Skip to content

Commit 2e1b122

Browse files
reegodevreegodev
committed
chore: update README
1 parent e2f67f1 commit 2e1b122

File tree

66 files changed

+793
-1
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

66 files changed

+793
-1
lines changed

‎.gitignore

+1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
node_modules
22
dist
3+
!packages/docs/src/.vitepress/dist
34
.nuxt
45
packages/e2e/cypress/screenshots
56
.DS_Store

‎README.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44

55
<br>
66

7-
> Warning: Version 2.0 only supports Vue 3 and is in early alpha version. There might still be API changes before final release.
7+
> Warning: Version 2.0 only supports Vue 3 and is in early alpha version. There might still be API changes before final release.<br> v1 docs are available [here](https://github.com/reegodev/vue-screen/tree/v1.5.3)
88
99
<br>
1010

‎package.json

+3
Original file line numberDiff line numberDiff line change
@@ -6,5 +6,8 @@
66
],
77
"devDependencies": {
88
"lerna": "^3.22.1"
9+
},
10+
"scripts": {
11+
"docs:publish": "git subtree push --prefix packages/docs/src/.vitepress/dist origin gh-pages"
912
}
1013
}

‎packages/docs/src/.vitepress/dist/api/grid.html

+31
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
<!DOCTYPE html>
2+
<html lang="en-US">
3+
<head>
4+
<meta charset="utf-8">
5+
<meta name="viewport" content="width=device-width,initial-scale=1">
6+
<title>
7+
Grid properties | VueScreen
8+
</title>
9+
<meta name="description" content=""Reactive screen size and media query states for Vue components. Integrates with most UI frameworks out of the box.">
10+
<link rel="stylesheet" href="/assets/style.debd2f6e.css">
11+
<link rel="modulepreload" href="/assets/Home.87cb6a51.js">
12+
<link rel="modulepreload" href="/assets/app.89f185b4.js">
13+
<link rel="modulepreload" href="/assets/api_grid.md.a6d0e4ab.lean.js">
14+
<link rel="modulepreload" href="/assets/app.89f185b4.js">
15+
16+
17+
</head>
18+
<body>
19+
<div id="app"><!--[--><div class="theme"><header class="nav-bar" data-v-17cf111d><div class="sidebar-button" data-v-17cf111d><svg class="icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z" class></path></svg></div><a class="nav-bar-title" href="/" aria-label="VueScreen, back to home" data-v-17cf111d data-v-f9766336><!----> VueScreen</a><div class="flex-grow" data-v-17cf111d></div><div class="nav" data-v-17cf111d><nav class="nav-links" data-v-17cf111d data-v-aa99e5ce><!--[--><div class="item" data-v-aa99e5ce><div class="nav-link" data-v-aa99e5ce data-v-1762a029><a class="item" href="/" data-v-1762a029>Guide <!----></a></div></div><div class="item" data-v-aa99e5ce><div class="nav-link" data-v-aa99e5ce data-v-1762a029><a class="item active" href="/api/" data-v-1762a029>API Reference <!----></a></div></div><div class="item" data-v-aa99e5ce><div class="nav-link" data-v-aa99e5ce data-v-1762a029><a class="item isExternal" href="https://github.com/reegodev/vue-screen" target="_blank" rel="noopener noreferrer" data-v-1762a029>Github <svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-1762a029><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></div></div><!--]--><!----><!----></nav></div><!--[--><!--]--></header><aside class="sidebar" data-v-66249427><nav class="nav-links nav" data-v-66249427 data-v-aa99e5ce><!--[--><div class="item" data-v-aa99e5ce><div class="nav-link" data-v-aa99e5ce data-v-1762a029><a class="item" href="/" data-v-1762a029>Guide <!----></a></div></div><div class="item" data-v-aa99e5ce><div class="nav-link" data-v-aa99e5ce data-v-1762a029><a class="item active" href="/api/" data-v-1762a029>API Reference <!----></a></div></div><div class="item" data-v-aa99e5ce><div class="nav-link" data-v-aa99e5ce data-v-1762a029><a class="item isExternal" href="https://github.com/reegodev/vue-screen" target="_blank" rel="noopener noreferrer" data-v-1762a029>Github <svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-1762a029><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></div></div><!--]--><!----><!----></nav><!--[--><!--]--><ul class="sidebar-links" data-v-66249427><!--[--><li class="sidebar-link" data-v-66249427 data-v-66249427><a class="sidebar-link-item" href="/api/" data-v-66249427>API Reference</a><ul class="sidebar-links" data-v-66249427><li class="sidebar-link" data-v-66249427 data-v-66249427><a class="sidebar-link-item" href="/api/screen" data-v-66249427>Screen</a><!----></li><li class="sidebar-link" data-v-66249427 data-v-66249427><a class="sidebar-link-item active" href="/api/grid" data-v-66249427>Grid</a><!----></li></ul></li><!--]--></ul><!--[--><!--]--></aside><!-- TODO: make this button accessible --><div class="sidebar-mask"></div><main class="page" data-v-4ddcb3ad><div class="container" data-v-4ddcb3ad><!--[--><!--]--><div class="content" data-v-4ddcb3ad><div data-v-4ddcb3ad><h1 id="grid-properties"><a class="header-anchor" href="#grid-properties" aria-hidden="true">#</a> Grid properties</h1><p>The grid object is very dynamic, and depends on the breakpoints passed by the configuration object. Every breakpoint name has a corresponding property telling if that breakpoint is active. The only fixed property every grid object has is the <code>breakpoint</code> key, which contains the name of the current breakpoint.</p><p>For example, when using tailwind your grid object will contain the following properties:</p><div class="language-js"><pre><code><span class="token punctuation">{</span>
20+
sm<span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
21+
md<span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
22+
lg<span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
23+
xl<span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
24+
<span class="token string">&#39;2xl&#39;</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
25+
breakpoint<span class="token operator">:</span> <span class="token string">&#39;sm&#39;</span><span class="token punctuation">,</span>
26+
<span class="token punctuation">}</span>
27+
</code></pre></div><div class="warning custom-block"><p class="custom-block-title">WARNING</p><p>The actual values of the properties depend on the screen size.</p></div><p>Please refer to specific frameworks for all properties.</p></div></div><footer class="page-footer" data-v-4ddcb3ad data-v-68ed61e9><div class="edit" data-v-68ed61e9><div class="edit-link" data-v-68ed61e9 data-v-05807432><!----></div></div><div class="updated" data-v-68ed61e9><p class="last-updated" data-v-68ed61e9 data-v-43b88736><span class="prefix" data-v-43b88736>Last Updated:</span><span class="datetime" data-v-43b88736></span></p></div></footer><div class="next-and-prev-link" data-v-4ddcb3ad data-v-47824308><div class="container" data-v-47824308><div class="prev" data-v-47824308><a class="link" href="/api/screen" data-v-47824308><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" class="icon icon-prev" data-v-47824308><path d="M19,11H7.4l5.3-5.3c0.4-0.4,0.4-1,0-1.4s-1-0.4-1.4,0l-7,7c-0.1,0.1-0.2,0.2-0.2,0.3c-0.1,0.2-0.1,0.5,0,0.8c0.1,0.1,0.1,0.2,0.2,0.3l7,7c0.2,0.2,0.5,0.3,0.7,0.3s0.5-0.1,0.7-0.3c0.4-0.4,0.4-1,0-1.4L7.4,13H19c0.6,0,1-0.4,1-1S19.6,11,19,11z"></path></svg><span class="text" data-v-47824308>Screen</span></a></div><div class="next" data-v-47824308><!----></div></div></div><!--[--><!--]--></div></main></div><!----><!--]--></div>
28+
<script>__VP_HASH_MAP__ = JSON.parse("{\"index.md\":\"9c4e17cb\",\"api_grid.md\":\"a6d0e4ab\",\"api_index.md\":\"6a88661e\",\"api_screen.md\":\"54641abd\",\"guide_getting-started.md\":\"5b738a21\",\"guide_upgrading.md\":\"7713ee19\",\"guide_examples_custom-tailwind-config.md\":\"8e2ca36d\",\"guide_examples_shared-config.md\":\"d1ab46a3\",\"guide_frameworks_bootstrap.md\":\"9e7dc4fb\",\"guide_frameworks_bulma.md\":\"650f0854\",\"guide_frameworks_custom.md\":\"483205da\",\"guide_frameworks_foundation.md\":\"ef90a889\",\"guide_frameworks_materialize.md\":\"296a747a\",\"guide_frameworks_semantic-ui.md\":\"b125bed4\",\"guide_frameworks_tailwind.md\":\"339c1743\",\"guide_configuration_composition-api.md\":\"f5f10544\",\"guide_configuration_plugin.md\":\"6c171cb4\",\"guide_ssr_caveats.md\":\"368a7164\",\"guide_ssr_nuxt.md\":\"9aa03e8c\"}")</script>
29+
<script type="module" async src="/assets/app.89f185b4.js"></script>
30+
</body>
31+
</html>

‎packages/docs/src/.vitepress/dist/api/index.html

+23
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
<!DOCTYPE html>
2+
<html lang="en-US">
3+
<head>
4+
<meta charset="utf-8">
5+
<meta name="viewport" content="width=device-width,initial-scale=1">
6+
<title>
7+
API Reference | VueScreen
8+
</title>
9+
<meta name="description" content=""Reactive screen size and media query states for Vue components. Integrates with most UI frameworks out of the box.">
10+
<link rel="stylesheet" href="/assets/style.debd2f6e.css">
11+
<link rel="modulepreload" href="/assets/Home.87cb6a51.js">
12+
<link rel="modulepreload" href="/assets/app.89f185b4.js">
13+
<link rel="modulepreload" href="/assets/api_index.md.6a88661e.lean.js">
14+
<link rel="modulepreload" href="/assets/app.89f185b4.js">
15+
16+
17+
</head>
18+
<body>
19+
<div id="app"><!--[--><div class="theme"><header class="nav-bar" data-v-17cf111d><div class="sidebar-button" data-v-17cf111d><svg class="icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z" class></path></svg></div><a class="nav-bar-title" href="/" aria-label="VueScreen, back to home" data-v-17cf111d data-v-f9766336><!----> VueScreen</a><div class="flex-grow" data-v-17cf111d></div><div class="nav" data-v-17cf111d><nav class="nav-links" data-v-17cf111d data-v-aa99e5ce><!--[--><div class="item" data-v-aa99e5ce><div class="nav-link" data-v-aa99e5ce data-v-1762a029><a class="item" href="/" data-v-1762a029>Guide <!----></a></div></div><div class="item" data-v-aa99e5ce><div class="nav-link" data-v-aa99e5ce data-v-1762a029><a class="item active" href="/api/" data-v-1762a029>API Reference <!----></a></div></div><div class="item" data-v-aa99e5ce><div class="nav-link" data-v-aa99e5ce data-v-1762a029><a class="item isExternal" href="https://github.com/reegodev/vue-screen" target="_blank" rel="noopener noreferrer" data-v-1762a029>Github <svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-1762a029><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></div></div><!--]--><!----><!----></nav></div><!--[--><!--]--></header><aside class="sidebar" data-v-66249427><nav class="nav-links nav" data-v-66249427 data-v-aa99e5ce><!--[--><div class="item" data-v-aa99e5ce><div class="nav-link" data-v-aa99e5ce data-v-1762a029><a class="item" href="/" data-v-1762a029>Guide <!----></a></div></div><div class="item" data-v-aa99e5ce><div class="nav-link" data-v-aa99e5ce data-v-1762a029><a class="item active" href="/api/" data-v-1762a029>API Reference <!----></a></div></div><div class="item" data-v-aa99e5ce><div class="nav-link" data-v-aa99e5ce data-v-1762a029><a class="item isExternal" href="https://github.com/reegodev/vue-screen" target="_blank" rel="noopener noreferrer" data-v-1762a029>Github <svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-1762a029><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></div></div><!--]--><!----><!----></nav><!--[--><!--]--><ul class="sidebar-links" data-v-66249427><!--[--><li class="sidebar-link" data-v-66249427 data-v-66249427><a class="sidebar-link-item active" href="/api/" data-v-66249427>API Reference</a><ul class="sidebar-links" data-v-66249427><li class="sidebar-link" data-v-66249427 data-v-66249427><a class="sidebar-link-item" href="/api/screen" data-v-66249427>Screen</a><!----></li><li class="sidebar-link" data-v-66249427 data-v-66249427><a class="sidebar-link-item" href="/api/grid" data-v-66249427>Grid</a><!----></li></ul></li><!--]--></ul><!--[--><!--]--></aside><!-- TODO: make this button accessible --><div class="sidebar-mask"></div><main class="page" data-v-4ddcb3ad><div class="container" data-v-4ddcb3ad><!--[--><!--]--><div class="content" data-v-4ddcb3ad><div data-v-4ddcb3ad><h1 id="api-reference"><a class="header-anchor" href="#api-reference" aria-hidden="true">#</a> API Reference</h1><p>Tthe are 2 main APIs:</p><ul><li><a href="/api/screen.html">the <strong>screen</strong> object</a>, that contains information about the screen, device orientation, and touch support.</li><li><a href="/api/grid.html">the <strong>grid</strong> object</a>, that contains information about the state of the breakpoints of your UI framework.</li></ul></div></div><footer class="page-footer" data-v-4ddcb3ad data-v-68ed61e9><div class="edit" data-v-68ed61e9><div class="edit-link" data-v-68ed61e9 data-v-05807432><!----></div></div><div class="updated" data-v-68ed61e9><p class="last-updated" data-v-68ed61e9 data-v-43b88736><span class="prefix" data-v-43b88736>Last Updated:</span><span class="datetime" data-v-43b88736></span></p></div></footer><div class="next-and-prev-link" data-v-4ddcb3ad data-v-47824308><div class="container" data-v-47824308><div class="prev" data-v-47824308><!----></div><div class="next" data-v-47824308><a class="link" href="/api/screen" data-v-47824308><span class="text" data-v-47824308>Screen</span><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" class="icon icon-next" data-v-47824308><path d="M19.9,12.4c0.1-0.2,0.1-0.5,0-0.8c-0.1-0.1-0.1-0.2-0.2-0.3l-7-7c-0.4-0.4-1-0.4-1.4,0s-0.4,1,0,1.4l5.3,5.3H5c-0.6,0-1,0.4-1,1s0.4,1,1,1h11.6l-5.3,5.3c-0.4,0.4-0.4,1,0,1.4c0.2,0.2,0.5,0.3,0.7,0.3s0.5-0.1,0.7-0.3l7-7C19.8,12.6,19.9,12.5,19.9,12.4z"></path></svg></a></div></div></div><!--[--><!--]--></div></main></div><!----><!--]--></div>
20+
<script>__VP_HASH_MAP__ = JSON.parse("{\"index.md\":\"9c4e17cb\",\"api_grid.md\":\"a6d0e4ab\",\"api_index.md\":\"6a88661e\",\"api_screen.md\":\"54641abd\",\"guide_getting-started.md\":\"5b738a21\",\"guide_upgrading.md\":\"7713ee19\",\"guide_examples_custom-tailwind-config.md\":\"8e2ca36d\",\"guide_examples_shared-config.md\":\"d1ab46a3\",\"guide_frameworks_bootstrap.md\":\"9e7dc4fb\",\"guide_frameworks_bulma.md\":\"650f0854\",\"guide_frameworks_custom.md\":\"483205da\",\"guide_frameworks_foundation.md\":\"ef90a889\",\"guide_frameworks_materialize.md\":\"296a747a\",\"guide_frameworks_semantic-ui.md\":\"b125bed4\",\"guide_frameworks_tailwind.md\":\"339c1743\",\"guide_configuration_composition-api.md\":\"f5f10544\",\"guide_configuration_plugin.md\":\"6c171cb4\",\"guide_ssr_caveats.md\":\"368a7164\",\"guide_ssr_nuxt.md\":\"9aa03e8c\"}")</script>
21+
<script type="module" async src="/assets/app.89f185b4.js"></script>
22+
</body>
23+
</html>

0 commit comments

Comments
 (0)