nanosplash 3.1.0 → 3.1.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/.github/workflows/ci.yml +51 -49
- package/.github/workflows/vitepress.yml +52 -52
- package/README.md +22 -2
- package/dist/cjs/ns.cjs +1 -1
- package/dist/es/ns.js +40 -40
- package/dist/iife/ns.iife.js +1 -1
- package/docs/.vitepress/theme/vue/Exe.vue +65 -61
- package/docs/api/start/customize.md +1 -1
- package/package.json +90 -91
- package/src/ts/Nanosplash.ts +58 -58
- package/tests/Nanosplash.spec.ts +7 -5
- package/bun.lockb +0 -0
- package/docs/.vitepress/.temp/@localSearchIndexroot.Ba2B1gNE.js +0 -4
- package/docs/.vitepress/.temp/Card.Ce4dbGEn.js +0 -30
- package/docs/.vitepress/.temp/VPLocalSearchBox.DV6bivXX.js +0 -382
- package/docs/.vitepress/.temp/api_doc_hide.md.js +0 -25
- package/docs/.vitepress/.temp/api_doc_show.md.js +0 -25
- package/docs/.vitepress/.temp/api_start_customize.md.js +0 -42
- package/docs/.vitepress/.temp/api_start_features.md.js +0 -19
- package/docs/.vitepress/.temp/api_start_install.md.js +0 -35
- package/docs/.vitepress/.temp/api_start_playground.md.js +0 -213
- package/docs/.vitepress/.temp/api_start_usage.md.js +0 -36
- package/docs/.vitepress/.temp/app.js +0 -5090
- package/docs/.vitepress/.temp/assets/style.lcyfX_uc.css +0 -5374
- package/docs/.vitepress/.temp/index.md.js +0 -19
- package/docs/.vitepress/.temp/macos.jpg +0 -0
- package/docs/.vitepress/.temp/package.json +0 -1
- package/docs/.vitepress/.temp/plugin-vue_export-helper.1tPrXgE0.js +0 -10
- /package/docs/.vitepress/{config.mts → config.ts} +0 -0
package/.github/workflows/ci.yml
CHANGED
|
@@ -1,54 +1,56 @@
|
|
|
1
1
|
name: Build and Test
|
|
2
2
|
|
|
3
3
|
on:
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
4
|
+
push:
|
|
5
|
+
branches:
|
|
6
|
+
- production
|
|
7
|
+
pull_request:
|
|
8
|
+
branches:
|
|
9
|
+
- production
|
|
10
10
|
|
|
11
11
|
jobs:
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
12
|
+
build-and-test:
|
|
13
|
+
runs-on: ubuntu-latest
|
|
14
|
+
|
|
15
|
+
steps:
|
|
16
|
+
- name: Checkout
|
|
17
|
+
uses: actions/checkout@v3
|
|
18
|
+
|
|
19
|
+
- name: Install PNPM
|
|
20
|
+
uses: pnpm/action-setup@v3
|
|
21
|
+
with:
|
|
22
|
+
version: 8
|
|
23
|
+
|
|
24
|
+
- name: Setup Node.js
|
|
25
|
+
uses: actions/setup-node@v3
|
|
26
|
+
with:
|
|
27
|
+
node-version: 20
|
|
28
|
+
|
|
29
|
+
- name: Set up Git and update production branch
|
|
30
|
+
run: |
|
|
31
|
+
git config --global user.name "GitHub Actions"
|
|
32
|
+
git config --global user.email "actions@github.com"
|
|
33
|
+
git fetch
|
|
34
|
+
git checkout production
|
|
35
|
+
git pull --no-rebase
|
|
36
|
+
|
|
37
|
+
- name: Setup Pages
|
|
38
|
+
uses: actions/configure-pages@v3
|
|
39
|
+
|
|
40
|
+
- name: Install dependencies
|
|
41
|
+
run: pnpm install
|
|
42
|
+
|
|
43
|
+
- name: Build (Vite)
|
|
44
|
+
run: pnpm build
|
|
45
|
+
|
|
46
|
+
- name: Test (Vitest)
|
|
47
|
+
run: pnpm test
|
|
48
|
+
|
|
49
|
+
- name: Generate Code Coverage (Vitest)
|
|
50
|
+
run: pnpm coverage
|
|
51
|
+
|
|
52
|
+
- name: Commit and push changes
|
|
53
|
+
run: |
|
|
54
|
+
git add .
|
|
55
|
+
git commit --allow-empty -m "Build, test, and coverage report"
|
|
56
|
+
git push
|
|
@@ -3,66 +3,66 @@
|
|
|
3
3
|
name: Deploy VitePress site to Pages
|
|
4
4
|
|
|
5
5
|
on:
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
6
|
+
# Runs on pushes targeting the `main` branch. Change this to `master` if you're
|
|
7
|
+
# using the `master` branch as the default branch.
|
|
8
|
+
push:
|
|
9
|
+
branches: [production]
|
|
10
|
+
pull_request:
|
|
11
|
+
branches: [production]
|
|
12
12
|
|
|
13
|
-
|
|
14
|
-
|
|
13
|
+
# Allows you to run this workflow manually from the Actions tab
|
|
14
|
+
workflow_dispatch:
|
|
15
15
|
|
|
16
16
|
# Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages
|
|
17
17
|
permissions:
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
18
|
+
contents: read
|
|
19
|
+
pages: write
|
|
20
|
+
id-token: write
|
|
21
21
|
|
|
22
22
|
# Allow only one concurrent deployment, skipping runs queued between the run in-progress and latest queued.
|
|
23
23
|
# However, do NOT cancel in-progress runs as we want to allow these production deployments to complete.
|
|
24
24
|
concurrency:
|
|
25
|
-
|
|
26
|
-
|
|
25
|
+
group: pages
|
|
26
|
+
cancel-in-progress: false
|
|
27
27
|
|
|
28
28
|
jobs:
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
29
|
+
# Build job
|
|
30
|
+
build:
|
|
31
|
+
runs-on: ubuntu-latest
|
|
32
|
+
steps:
|
|
33
|
+
- name: Checkout
|
|
34
|
+
uses: actions/checkout@v3
|
|
35
|
+
with:
|
|
36
|
+
fetch-depth: 0 # Not needed if lastUpdated is not enabled
|
|
37
|
+
- uses: pnpm/action-setup@v3
|
|
38
|
+
with:
|
|
39
|
+
version: 8
|
|
40
|
+
- name: Setup Node
|
|
41
|
+
uses: actions/setup-node@v3
|
|
42
|
+
with:
|
|
43
|
+
node-version: 20
|
|
44
|
+
- name: Setup Pages
|
|
45
|
+
uses: actions/configure-pages@v3
|
|
46
|
+
- name: Install dependencies
|
|
47
|
+
run: pnpm install
|
|
48
|
+
- name: Build with VitePress
|
|
49
|
+
run: |
|
|
50
|
+
pnpm docs:build
|
|
51
|
+
touch docs/.vitepress/dist/.nojekyll
|
|
52
|
+
- name: Upload artifact
|
|
53
|
+
uses: actions/upload-pages-artifact@v2
|
|
54
|
+
with:
|
|
55
|
+
path: docs/.vitepress/dist
|
|
56
56
|
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
57
|
+
# Deployment job
|
|
58
|
+
deploy:
|
|
59
|
+
environment:
|
|
60
|
+
name: github-pages
|
|
61
|
+
url: ${{ steps.deployment.outputs.page_url }}
|
|
62
|
+
needs: build
|
|
63
|
+
runs-on: ubuntu-latest
|
|
64
|
+
name: Deploy
|
|
65
|
+
steps:
|
|
66
|
+
- name: Deploy to GitHub Pages
|
|
67
|
+
id: deployment
|
|
68
|
+
uses: actions/deploy-pages@v2
|
package/README.md
CHANGED
|
@@ -6,11 +6,11 @@
|
|
|
6
6
|
|
|
7
7
|
[](https://github.com/isakhauge/nanosplash/actions/workflows/ci.yml)
|
|
8
8
|
|
|
9
|
-
## Documentation
|
|
9
|
+
## 💖 Documentation
|
|
10
10
|
|
|
11
11
|
[isakhauge.github.io/nanosplash/](https://isakhauge.github.io/nanosplash/)
|
|
12
12
|
|
|
13
|
-
## Usage
|
|
13
|
+
## 🚀 Usage
|
|
14
14
|
|
|
15
15
|
### Show
|
|
16
16
|
|
|
@@ -67,3 +67,23 @@ Remove all Nanosplashes.
|
|
|
67
67
|
```js
|
|
68
68
|
ns.hide('*')
|
|
69
69
|
```
|
|
70
|
+
|
|
71
|
+
## 🦄 Customization
|
|
72
|
+
|
|
73
|
+
You can easily make Nanosplash look the way you want.
|
|
74
|
+
|
|
75
|
+
```scss
|
|
76
|
+
// Backdrop selector
|
|
77
|
+
.nsh::before
|
|
78
|
+
|
|
79
|
+
// Main wrapper selector
|
|
80
|
+
.ns
|
|
81
|
+
|
|
82
|
+
// Text selector
|
|
83
|
+
.nst
|
|
84
|
+
|
|
85
|
+
// Spinner selector
|
|
86
|
+
.nss
|
|
87
|
+
```
|
|
88
|
+
|
|
89
|
+
Read more here: [Customization](https://isakhauge.github.io/nanosplash/api/start/customize.html)
|
package/dist/cjs/ns.cjs
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const b='@keyframes nsRotate{to{transform:rotate(360deg)}}@keyframes nsDash{0%{stroke-dasharray:1,150;stroke-dashoffset:0}50%{stroke-dasharray:90,150;stroke-dashoffset:-35}to{stroke-dasharray:90,150;stroke-dashoffset:-124}}@keyframes nsFade{0%{opacity:0}to{opacity:1}}@keyframes nsAscend{0%{opacity:0;transform:translateY(13px)}to{opacity:1;transform:translateY(0)}}:root{--ns-top: 0px}.ns,body.nsh,body.nsh:before,.nsh:before{width:100%;height:100%}.ns,.nsh:before{bottom:0;right:0}.ns{display:flex;justify-content:center;align-items:center}.nsh{--color: DarkSlateGray;--size: 20px;--relSize: calc(var(--size) * .9);--font: "Helvetica", "Arial", sans-serif;--weight: 400;--bg: rgba(255, 255, 255, .9);--zIdx: 999999999;--blur: blur(5px)}.nsh{position:relative;z-index:var(--zIdx)}.nsh:before{position:absolute;background-color:var(--bg);content:"";backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);z-index:calc(var(--zIdx) + 1);border-radius:inherit}body.nsh,body.nsh:before{position:fixed;top:var(--ns-top);left:0}.ns{position:absolute;z-index:calc(var(--zIdx) + 2);animation:nsFade 2s;gap:var(--relSize)}.nst{color:var(--color);font-size:var(--size);font-family:var(--font);font-weight:var(--weight);max-width:80dvw;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;text-shadow:0 0 .06rem rgba(47,79,79,.25);filter:drop-shadow(0 0 .07rem rgba(0,0,0,.25));animation:nsAscend .5s}.nss{display:block;width:var(--relSize);height:var(--relSize);animation:nsAscend .5s}.nss>svg{animation:nsRotate 2s linear infinite;position:relative;width:inherit;height:inherit;stroke-width:8}.nss .path{stroke:var(--color);stroke-linecap:round;animation:nsDash 1.5s ease-in-out infinite}',m="3.1.1",l="ns",i=document,r=i.body,a=e=>(s=>({all:s,first:t=>s(t)[0]??null}))(s=>Array.from(e.querySelectorAll(s))),f=e=>a(i).all(e),h=e=>a(i).first(e),p=()=>f(".ns"),u=e=>e instanceof Element?e:h(e),n=(e,...s)=>{const t=i.createElement("div");return e&&t.classList.add(e),t.append(...s),t},v=e=>{const s=n();return s.innerHTML=e,s.firstChild},g=()=>{const s=v('<svg viewBox="0 0 50 50"><circle class=path cx=25 cy=25 r=20 fill=none /></svg>'),t=n("ns",n("nst"),n("nss",s));return t.nsId=Date.now(),t},w=()=>p().sort((e,s)=>e.nsId-s.nsId)[0]??null,k=(e,s)=>{const t=a(e).first(".nst");if(!s)return t==null?void 0:t.remove();const o=n("nst",s);t?t.replaceWith(o):e.insertBefore(o,e.firstChild)},x=(e,s)=>{const t=s.firstElementChild;t&&s.insertBefore(e,t),s.append(e),s.classList.add("nsh")},z=(e,s)=>{const t=s?u(s):r;let o;const c=a(t??r).first("& > .ns");c?o=c:(o=g(),x(o,t)),k(o,e??"");const y=scrollY+"px";return r.style.setProperty("--ns-top",y),o.nsId},d=e=>{var s;(s=e==null?void 0:e.parentElement)==null||s.classList.remove("nsh"),e==null||e.remove()},I=e=>p().find(s=>s.nsId===e)??null,N=e=>{e==="*"?f(".ns").forEach(d):d(typeof e=="number"?I(e):w())},A=()=>{var e;(e=h("#"+l))==null||e.remove(),r.append(v(`<style id=${l}>${b}</style>`))},S=()=>(A(),window.ns={show:z,hide:N,version:m});exports.useNs=S;
|
package/dist/es/ns.js
CHANGED
|
@@ -1,44 +1,44 @@
|
|
|
1
|
-
const
|
|
2
|
-
all:
|
|
3
|
-
first: (
|
|
4
|
-
}))((
|
|
5
|
-
const
|
|
6
|
-
return e &&
|
|
7
|
-
},
|
|
8
|
-
const
|
|
9
|
-
return
|
|
10
|
-
},
|
|
11
|
-
const
|
|
12
|
-
return
|
|
13
|
-
}, w = () =>
|
|
14
|
-
const
|
|
15
|
-
if (!
|
|
16
|
-
return
|
|
17
|
-
const o =
|
|
18
|
-
|
|
19
|
-
},
|
|
20
|
-
const
|
|
21
|
-
|
|
22
|
-
},
|
|
23
|
-
const
|
|
24
|
-
let
|
|
25
|
-
const
|
|
26
|
-
|
|
27
|
-
const
|
|
28
|
-
return
|
|
29
|
-
},
|
|
30
|
-
var
|
|
31
|
-
(
|
|
32
|
-
},
|
|
33
|
-
e === "*" ?
|
|
34
|
-
},
|
|
1
|
+
const b = '@keyframes nsRotate{to{transform:rotate(360deg)}}@keyframes nsDash{0%{stroke-dasharray:1,150;stroke-dashoffset:0}50%{stroke-dasharray:90,150;stroke-dashoffset:-35}to{stroke-dasharray:90,150;stroke-dashoffset:-124}}@keyframes nsFade{0%{opacity:0}to{opacity:1}}@keyframes nsAscend{0%{opacity:0;transform:translateY(13px)}to{opacity:1;transform:translateY(0)}}:root{--ns-top: 0px}.ns,body.nsh,body.nsh:before,.nsh:before{width:100%;height:100%}.ns,.nsh:before{bottom:0;right:0}.ns{display:flex;justify-content:center;align-items:center}.nsh{--color: DarkSlateGray;--size: 20px;--relSize: calc(var(--size) * .9);--font: "Helvetica", "Arial", sans-serif;--weight: 400;--bg: rgba(255, 255, 255, .9);--zIdx: 999999999;--blur: blur(5px)}.nsh{position:relative;z-index:var(--zIdx)}.nsh:before{position:absolute;background-color:var(--bg);content:"";backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);z-index:calc(var(--zIdx) + 1);border-radius:inherit}body.nsh,body.nsh:before{position:fixed;top:var(--ns-top);left:0}.ns{position:absolute;z-index:calc(var(--zIdx) + 2);animation:nsFade 2s;gap:var(--relSize)}.nst{color:var(--color);font-size:var(--size);font-family:var(--font);font-weight:var(--weight);max-width:80dvw;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;text-shadow:0 0 .06rem rgba(47,79,79,.25);filter:drop-shadow(0 0 .07rem rgba(0,0,0,.25));animation:nsAscend .5s}.nss{display:block;width:var(--relSize);height:var(--relSize);animation:nsAscend .5s}.nss>svg{animation:nsRotate 2s linear infinite;position:relative;width:inherit;height:inherit;stroke-width:8}.nss .path{stroke:var(--color);stroke-linecap:round;animation:nsDash 1.5s ease-in-out infinite}', m = "3.1.1", l = "ns", i = document, r = i.body, a = (e) => /* @__PURE__ */ ((s) => ({
|
|
2
|
+
all: s,
|
|
3
|
+
first: (t) => s(t)[0] ?? null
|
|
4
|
+
}))((s) => Array.from(e.querySelectorAll(s))), f = (e) => a(i).all(e), h = (e) => a(i).first(e), p = () => f(".ns"), u = (e) => e instanceof Element ? e : h(e), n = (e, ...s) => {
|
|
5
|
+
const t = i.createElement("div");
|
|
6
|
+
return e && t.classList.add(e), t.append(...s), t;
|
|
7
|
+
}, v = (e) => {
|
|
8
|
+
const s = n();
|
|
9
|
+
return s.innerHTML = e, s.firstChild;
|
|
10
|
+
}, g = () => {
|
|
11
|
+
const s = v('<svg viewBox="0 0 50 50"><circle class=path cx=25 cy=25 r=20 fill=none /></svg>'), t = n("ns", n("nst"), n("nss", s));
|
|
12
|
+
return t.nsId = Date.now(), t;
|
|
13
|
+
}, w = () => p().sort((e, s) => e.nsId - s.nsId)[0] ?? null, k = (e, s) => {
|
|
14
|
+
const t = a(e).first(".nst");
|
|
15
|
+
if (!s)
|
|
16
|
+
return t == null ? void 0 : t.remove();
|
|
17
|
+
const o = n("nst", s);
|
|
18
|
+
t ? t.replaceWith(o) : e.insertBefore(o, e.firstChild);
|
|
19
|
+
}, x = (e, s) => {
|
|
20
|
+
const t = s.firstElementChild;
|
|
21
|
+
t && s.insertBefore(e, t), s.append(e), s.classList.add("nsh");
|
|
22
|
+
}, z = (e, s) => {
|
|
23
|
+
const t = s ? u(s) : r;
|
|
24
|
+
let o;
|
|
25
|
+
const c = a(t ?? r).first("& > .ns");
|
|
26
|
+
c ? o = c : (o = g(), x(o, t)), k(o, e ?? "");
|
|
27
|
+
const y = scrollY + "px";
|
|
28
|
+
return r.style.setProperty("--ns-top", y), o.nsId;
|
|
29
|
+
}, d = (e) => {
|
|
30
|
+
var s;
|
|
31
|
+
(s = e == null ? void 0 : e.parentElement) == null || s.classList.remove("nsh"), e == null || e.remove();
|
|
32
|
+
}, I = (e) => p().find((s) => s.nsId === e) ?? null, A = (e) => {
|
|
33
|
+
e === "*" ? f(".ns").forEach(d) : d(typeof e == "number" ? I(e) : w());
|
|
34
|
+
}, N = () => {
|
|
35
35
|
var e;
|
|
36
|
-
(e =
|
|
37
|
-
},
|
|
38
|
-
show:
|
|
39
|
-
hide:
|
|
40
|
-
version:
|
|
36
|
+
(e = h("#" + l)) == null || e.remove(), r.append(v(`<style id=${l}>${b}</style>`));
|
|
37
|
+
}, S = () => (N(), window.ns = {
|
|
38
|
+
show: z,
|
|
39
|
+
hide: A,
|
|
40
|
+
version: m
|
|
41
41
|
});
|
|
42
42
|
export {
|
|
43
|
-
|
|
43
|
+
S as useNs
|
|
44
44
|
};
|
package/dist/iife/ns.iife.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
(function(){"use strict";const
|
|
1
|
+
(function(){"use strict";const y='@keyframes nsRotate{to{transform:rotate(360deg)}}@keyframes nsDash{0%{stroke-dasharray:1,150;stroke-dashoffset:0}50%{stroke-dasharray:90,150;stroke-dashoffset:-35}to{stroke-dasharray:90,150;stroke-dashoffset:-124}}@keyframes nsFade{0%{opacity:0}to{opacity:1}}@keyframes nsAscend{0%{opacity:0;transform:translateY(13px)}to{opacity:1;transform:translateY(0)}}:root{--ns-top: 0px}.ns,body.nsh,body.nsh:before,.nsh:before{width:100%;height:100%}.ns,.nsh:before{bottom:0;right:0}.ns{display:flex;justify-content:center;align-items:center}.nsh{--color: DarkSlateGray;--size: 20px;--relSize: calc(var(--size) * .9);--font: "Helvetica", "Arial", sans-serif;--weight: 400;--bg: rgba(255, 255, 255, .9);--zIdx: 999999999;--blur: blur(5px)}.nsh{position:relative;z-index:var(--zIdx)}.nsh:before{position:absolute;background-color:var(--bg);content:"";backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);z-index:calc(var(--zIdx) + 1);border-radius:inherit}body.nsh,body.nsh:before{position:fixed;top:var(--ns-top);left:0}.ns{position:absolute;z-index:calc(var(--zIdx) + 2);animation:nsFade 2s;gap:var(--relSize)}.nst{color:var(--color);font-size:var(--size);font-family:var(--font);font-weight:var(--weight);max-width:80dvw;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;text-shadow:0 0 .06rem rgba(47,79,79,.25);filter:drop-shadow(0 0 .07rem rgba(0,0,0,.25));animation:nsAscend .5s}.nss{display:block;width:var(--relSize);height:var(--relSize);animation:nsAscend .5s}.nss>svg{animation:nsRotate 2s linear infinite;position:relative;width:inherit;height:inherit;stroke-width:8}.nss .path{stroke:var(--color);stroke-linecap:round;animation:nsDash 1.5s ease-in-out infinite}',b="3.1.1",c="ns",r=document,i=r.body,a=e=>(s=>({all:s,first:t=>s(t)[0]??null}))(s=>Array.from(e.querySelectorAll(s))),l=e=>a(r).all(e),d=e=>a(r).first(e),f=()=>l(".ns"),m=e=>e instanceof Element?e:d(e),o=(e,...s)=>{const t=r.createElement("div");return e&&t.classList.add(e),t.append(...s),t},h=e=>{const s=o();return s.innerHTML=e,s.firstChild},u=()=>{const s=h('<svg viewBox="0 0 50 50"><circle class=path cx=25 cy=25 r=20 fill=none /></svg>'),t=o("ns",o("nst"),o("nss",s));return t.nsId=Date.now(),t},g=()=>f().sort((e,s)=>e.nsId-s.nsId)[0]??null,w=(e,s)=>{const t=a(e).first(".nst");if(!s)return t==null?void 0:t.remove();const n=o("nst",s);t?t.replaceWith(n):e.insertBefore(n,e.firstChild)},k=(e,s)=>{const t=s.firstElementChild;t&&s.insertBefore(e,t),s.append(e),s.classList.add("nsh")},x=(e,s)=>{const t=s?m(s):i;let n;const v=a(t??i).first("& > .ns");v?n=v:(n=u(),k(n,t)),w(n,e??"");const A=scrollY+"px";return i.style.setProperty("--ns-top",A),n.nsId},p=e=>{var s;(s=e==null?void 0:e.parentElement)==null||s.classList.remove("nsh"),e==null||e.remove()},z=e=>f().find(s=>s.nsId===e)??null,I=e=>{e==="*"?l(".ns").forEach(p):p(typeof e=="number"?z(e):g())},N=()=>{var e;(e=d("#"+c))==null||e.remove(),i.append(h(`<style id=${c}>${y}</style>`))};N(),window.ns={show:x,hide:I,version:b}})();
|
|
@@ -1,70 +1,74 @@
|
|
|
1
1
|
<script setup>
|
|
2
|
-
import { ref } from 'vue'
|
|
3
|
-
import { useNs } from '../../../../dist/es/ns.js'
|
|
4
|
-
const ns = useNs()
|
|
2
|
+
import { ref, onMounted } from 'vue'
|
|
5
3
|
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
ShowInsideD: 'ns.show("Loading D", "#d")',
|
|
11
|
-
ShowInsideWrapper: 'ns.show("Loading Wrapper", "#wrapper")',
|
|
12
|
-
ShowFullScreen: 'ns.show("Loading window")',
|
|
13
|
-
Progress: 'Progressive Demo',
|
|
14
|
-
Hide: 'ns.hide()',
|
|
15
|
-
HideAll: 'ns.hide("*")',
|
|
16
|
-
}
|
|
4
|
+
onMounted(async () => {
|
|
5
|
+
if (!window) return
|
|
6
|
+
const nsLib = await import('../../../../dist/es/ns.js')
|
|
7
|
+
const ns = nsLib.useNs()
|
|
17
8
|
|
|
18
|
-
const
|
|
9
|
+
const Commands = {
|
|
10
|
+
ShowInsideA: 'ns.show("Loading A", "#a")',
|
|
11
|
+
ShowInsideB: 'ns.show("Loading B", "#b")',
|
|
12
|
+
ShowInsideC: 'ns.show("Loading C", "#c")',
|
|
13
|
+
ShowInsideD: 'ns.show("Loading D", "#d")',
|
|
14
|
+
ShowInsideWrapper: 'ns.show("Loading Wrapper", "#wrapper")',
|
|
15
|
+
ShowFullScreen: 'ns.show("Loading window")',
|
|
16
|
+
Progress: 'Progressive Demo',
|
|
17
|
+
Hide: 'ns.hide()',
|
|
18
|
+
HideAll: 'ns.hide("*")',
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
const rCommandString = ref('')
|
|
19
22
|
|
|
20
|
-
const wait = ms => new Promise(r => setTimeout(r, ms))
|
|
23
|
+
const wait = ms => new Promise(r => setTimeout(r, ms))
|
|
21
24
|
|
|
22
|
-
async function onClickExe() {
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
25
|
+
async function onClickExe() {
|
|
26
|
+
const value = rCommandString.value
|
|
27
|
+
const phrases = [
|
|
28
|
+
'Generating witty dialog',
|
|
29
|
+
'Swapping time and space',
|
|
30
|
+
'sudo rm -rf /**/*',
|
|
31
|
+
'Tokenizing real life',
|
|
32
|
+
'Pushing pixels',
|
|
33
|
+
"Don't think of purple hippos",
|
|
34
|
+
'One mississippi, two mississippi...',
|
|
35
|
+
]
|
|
36
|
+
switch (value) {
|
|
37
|
+
case Commands.ShowInsideA:
|
|
38
|
+
ns.show('Loading A', '#a')
|
|
39
|
+
break
|
|
40
|
+
case Commands.ShowInsideB:
|
|
41
|
+
ns.show('Loading B', '#b')
|
|
42
|
+
break
|
|
43
|
+
case Commands.ShowInsideC:
|
|
44
|
+
ns.show('Loading C', '#c')
|
|
45
|
+
break
|
|
46
|
+
case Commands.ShowInsideD:
|
|
47
|
+
ns.show('Loading D', '#d')
|
|
48
|
+
break
|
|
49
|
+
case Commands.ShowInsideWrapper:
|
|
50
|
+
ns.show('Loading Wrapper', '#wrapper')
|
|
51
|
+
break
|
|
52
|
+
case Commands.ShowFullScreen:
|
|
53
|
+
const id = ns.show('Loading window')
|
|
54
|
+
await wait(4000)
|
|
55
|
+
ns.hide(id)
|
|
56
|
+
break
|
|
57
|
+
case Commands.Hide:
|
|
58
|
+
ns.hide()
|
|
59
|
+
break
|
|
60
|
+
case Commands.HideAll:
|
|
61
|
+
ns.hide('*')
|
|
62
|
+
break
|
|
63
|
+
case Commands.Progress:
|
|
64
|
+
for (const phrase of phrases) {
|
|
65
|
+
ns.show(phrase)
|
|
66
|
+
await wait(1500)
|
|
67
|
+
}
|
|
68
|
+
ns.hide('*')
|
|
69
|
+
}
|
|
66
70
|
}
|
|
67
|
-
}
|
|
71
|
+
})
|
|
68
72
|
</script>
|
|
69
73
|
|
|
70
74
|
<template>
|