@mantine-vue/nprogress 1.1.2
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/cjs/index.cjs +225 -0
- package/cjs/index.cjs.map +1 -0
- package/esm/index.mjs +202 -0
- package/esm/index.mjs.map +1 -0
- package/lib/NavigationProgress.d.ts +90 -0
- package/lib/index.d.mts +3 -0
- package/lib/index.d.ts +3 -0
- package/lib/nprogress.store.d.ts +43 -0
- package/package.json +44 -0
- package/styles.css +35 -0
- package/styles.layer.css +37 -0
package/cjs/index.cjs
ADDED
|
@@ -0,0 +1,225 @@
|
|
|
1
|
+
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
|
2
|
+
let vue = require("vue");
|
|
3
|
+
let _mantine_vue_core = require("@mantine-vue/core");
|
|
4
|
+
let _mantine_vue_store = require("@mantine-vue/store");
|
|
5
|
+
//#region src/nprogress.store.ts
|
|
6
|
+
function clamp(value, min, max) {
|
|
7
|
+
return Math.min(max, Math.max(min, value));
|
|
8
|
+
}
|
|
9
|
+
function getIntervalProgressValue(currentProgress) {
|
|
10
|
+
let next = .5;
|
|
11
|
+
if (currentProgress >= 0 && currentProgress <= 20) next = 10;
|
|
12
|
+
else if (currentProgress >= 20 && currentProgress <= 50) next = 4;
|
|
13
|
+
else if (currentProgress >= 50 && currentProgress <= 80) next = 2;
|
|
14
|
+
else if (currentProgress >= 80 && currentProgress <= 99) next = 1;
|
|
15
|
+
else if (currentProgress >= 99 && currentProgress <= 100) next = 0;
|
|
16
|
+
return currentProgress + next;
|
|
17
|
+
}
|
|
18
|
+
var createNprogressStore = () => (0, _mantine_vue_store.createStore)({
|
|
19
|
+
mounted: false,
|
|
20
|
+
progress: 0,
|
|
21
|
+
interval: 0,
|
|
22
|
+
step: 1,
|
|
23
|
+
stepInterval: 100,
|
|
24
|
+
timeouts: []
|
|
25
|
+
});
|
|
26
|
+
var useNprogress = (store) => store.value;
|
|
27
|
+
function updateNavigationProgressStateAction(update, store) {
|
|
28
|
+
const state = store.getState();
|
|
29
|
+
store.setState({
|
|
30
|
+
...state,
|
|
31
|
+
...update(store.getState())
|
|
32
|
+
});
|
|
33
|
+
}
|
|
34
|
+
function decrementNavigationProgressAction(store) {
|
|
35
|
+
updateNavigationProgressStateAction((state) => ({ progress: Math.max(state.progress - state.step, 0) }), store);
|
|
36
|
+
}
|
|
37
|
+
function setNavigationProgressAction(value, store) {
|
|
38
|
+
updateNavigationProgressStateAction(() => ({
|
|
39
|
+
progress: clamp(value, 0, 100),
|
|
40
|
+
mounted: true
|
|
41
|
+
}), store);
|
|
42
|
+
}
|
|
43
|
+
function cleanupNavigationProgressAction(store) {
|
|
44
|
+
updateNavigationProgressStateAction((state) => {
|
|
45
|
+
window.clearInterval(state.interval);
|
|
46
|
+
state.timeouts.forEach((timeout) => window.clearTimeout(timeout));
|
|
47
|
+
return { timeouts: [] };
|
|
48
|
+
}, store);
|
|
49
|
+
}
|
|
50
|
+
function completeNavigationProgressAction(store) {
|
|
51
|
+
cleanupNavigationProgressAction(store);
|
|
52
|
+
updateNavigationProgressStateAction((state) => {
|
|
53
|
+
return {
|
|
54
|
+
progress: 100,
|
|
55
|
+
timeouts: [window.setTimeout(() => {
|
|
56
|
+
updateNavigationProgressStateAction(() => ({ mounted: false }), store);
|
|
57
|
+
}, 50), window.setTimeout(() => {
|
|
58
|
+
updateNavigationProgressStateAction(() => ({ progress: 0 }), store);
|
|
59
|
+
}, state.stepInterval + 50)]
|
|
60
|
+
};
|
|
61
|
+
}, store);
|
|
62
|
+
}
|
|
63
|
+
function startNavigationProgressAction(store) {
|
|
64
|
+
updateNavigationProgressStateAction((state) => ({
|
|
65
|
+
progress: getIntervalProgressValue(state.progress),
|
|
66
|
+
mounted: true
|
|
67
|
+
}), store);
|
|
68
|
+
updateNavigationProgressStateAction((state) => {
|
|
69
|
+
window.clearInterval(state.interval);
|
|
70
|
+
return {
|
|
71
|
+
interval: window.setInterval(() => {
|
|
72
|
+
updateNavigationProgressStateAction((current) => ({
|
|
73
|
+
progress: getIntervalProgressValue(current.progress),
|
|
74
|
+
mounted: true
|
|
75
|
+
}), store);
|
|
76
|
+
}, state.stepInterval),
|
|
77
|
+
mounted: true
|
|
78
|
+
};
|
|
79
|
+
}, store);
|
|
80
|
+
}
|
|
81
|
+
function stopNavigationProgressAction(store) {
|
|
82
|
+
updateNavigationProgressStateAction((state) => {
|
|
83
|
+
window.clearInterval(state.interval);
|
|
84
|
+
return { interval: -1 };
|
|
85
|
+
}, store);
|
|
86
|
+
}
|
|
87
|
+
function resetNavigationProgressAction(store) {
|
|
88
|
+
cleanupNavigationProgressAction(store);
|
|
89
|
+
stopNavigationProgressAction(store);
|
|
90
|
+
updateNavigationProgressStateAction(() => ({
|
|
91
|
+
progress: 0,
|
|
92
|
+
mounted: false
|
|
93
|
+
}), store);
|
|
94
|
+
}
|
|
95
|
+
function incrementNavigationProgressAction(store) {
|
|
96
|
+
updateNavigationProgressStateAction((state) => {
|
|
97
|
+
const nextValue = Math.min(state.progress + state.step, 100);
|
|
98
|
+
const nextMounted = nextValue !== 100 && nextValue !== 0;
|
|
99
|
+
if (!nextMounted) {
|
|
100
|
+
const timeout = window.setTimeout(() => resetNavigationProgressAction(store), state.stepInterval + 50);
|
|
101
|
+
return {
|
|
102
|
+
progress: nextValue,
|
|
103
|
+
mounted: nextMounted,
|
|
104
|
+
timeouts: [...state.timeouts, timeout]
|
|
105
|
+
};
|
|
106
|
+
}
|
|
107
|
+
return {
|
|
108
|
+
progress: nextValue,
|
|
109
|
+
mounted: nextMounted
|
|
110
|
+
};
|
|
111
|
+
}, store);
|
|
112
|
+
}
|
|
113
|
+
function createNprogress() {
|
|
114
|
+
const store = createNprogressStore();
|
|
115
|
+
return [store, {
|
|
116
|
+
start: () => startNavigationProgressAction(store),
|
|
117
|
+
stop: () => stopNavigationProgressAction(store),
|
|
118
|
+
reset: () => resetNavigationProgressAction(store),
|
|
119
|
+
set: (value) => setNavigationProgressAction(value, store),
|
|
120
|
+
increment: () => incrementNavigationProgressAction(store),
|
|
121
|
+
decrement: () => decrementNavigationProgressAction(store),
|
|
122
|
+
complete: () => completeNavigationProgressAction(store),
|
|
123
|
+
cleanup: () => cleanupNavigationProgressAction(store)
|
|
124
|
+
}];
|
|
125
|
+
}
|
|
126
|
+
var [nprogressStore, nprogress] = createNprogress();
|
|
127
|
+
var { start: startNavigationProgress, stop: stopNavigationProgress, reset: resetNavigationProgress, set: setNavigationProgress, increment: incrementNavigationProgress, decrement: decrementNavigationProgress, complete: completeNavigationProgress, cleanup: cleanupNavigationProgress } = nprogress;
|
|
128
|
+
var NavigationProgress_module_default = {
|
|
129
|
+
root: "_root_1o6fp_1",
|
|
130
|
+
section: "_section_1o6fp_17"
|
|
131
|
+
};
|
|
132
|
+
//#endregion
|
|
133
|
+
//#region src/NavigationProgress.ts
|
|
134
|
+
var NavigationProgress = (0, vue.defineComponent)({
|
|
135
|
+
name: "NavigationProgress",
|
|
136
|
+
inheritAttrs: false,
|
|
137
|
+
props: {
|
|
138
|
+
store: {
|
|
139
|
+
type: Object,
|
|
140
|
+
default: () => nprogressStore
|
|
141
|
+
},
|
|
142
|
+
initialProgress: {
|
|
143
|
+
type: Number,
|
|
144
|
+
default: 0
|
|
145
|
+
},
|
|
146
|
+
color: {
|
|
147
|
+
type: String,
|
|
148
|
+
default: void 0
|
|
149
|
+
},
|
|
150
|
+
size: {
|
|
151
|
+
type: Number,
|
|
152
|
+
default: 3
|
|
153
|
+
},
|
|
154
|
+
stepInterval: {
|
|
155
|
+
type: Number,
|
|
156
|
+
default: 500
|
|
157
|
+
},
|
|
158
|
+
withinPortal: {
|
|
159
|
+
type: Boolean,
|
|
160
|
+
default: true
|
|
161
|
+
},
|
|
162
|
+
portalProps: {
|
|
163
|
+
type: Object,
|
|
164
|
+
default: void 0
|
|
165
|
+
},
|
|
166
|
+
zIndex: {
|
|
167
|
+
type: [Number, String],
|
|
168
|
+
default: () => (0, _mantine_vue_core.getDefaultZIndex)("max")
|
|
169
|
+
}
|
|
170
|
+
},
|
|
171
|
+
setup(props, { attrs }) {
|
|
172
|
+
const state = useNprogress(props.store);
|
|
173
|
+
(0, vue.watch)(() => [
|
|
174
|
+
props.initialProgress,
|
|
175
|
+
props.stepInterval,
|
|
176
|
+
props.store
|
|
177
|
+
], () => {
|
|
178
|
+
props.store.setState((current) => ({
|
|
179
|
+
...current,
|
|
180
|
+
progress: props.initialProgress,
|
|
181
|
+
stepInterval: props.stepInterval
|
|
182
|
+
}));
|
|
183
|
+
}, { immediate: true });
|
|
184
|
+
(0, vue.onBeforeUnmount)(() => resetNavigationProgressAction(props.store));
|
|
185
|
+
return () => (0, vue.h)(_mantine_vue_core.OptionalPortal, {
|
|
186
|
+
withinPortal: props.withinPortal,
|
|
187
|
+
...props.portalProps
|
|
188
|
+
}, () => (0, vue.h)(_mantine_vue_core.Progress, {
|
|
189
|
+
...attrs,
|
|
190
|
+
radius: 0,
|
|
191
|
+
value: state.value.progress,
|
|
192
|
+
size: props.size,
|
|
193
|
+
color: props.color,
|
|
194
|
+
classNames: NavigationProgress_module_default,
|
|
195
|
+
"data-mounted": state.value.mounted || void 0,
|
|
196
|
+
vars: { root: { "--nprogress-z-index": props.zIndex?.toString() } }
|
|
197
|
+
}));
|
|
198
|
+
}
|
|
199
|
+
});
|
|
200
|
+
//#endregion
|
|
201
|
+
exports.NavigationProgress = NavigationProgress;
|
|
202
|
+
exports.cleanupNavigationProgress = cleanupNavigationProgress;
|
|
203
|
+
exports.cleanupNavigationProgressAction = cleanupNavigationProgressAction;
|
|
204
|
+
exports.completeNavigationProgress = completeNavigationProgress;
|
|
205
|
+
exports.completeNavigationProgressAction = completeNavigationProgressAction;
|
|
206
|
+
exports.createNprogress = createNprogress;
|
|
207
|
+
exports.createNprogressStore = createNprogressStore;
|
|
208
|
+
exports.decrementNavigationProgress = decrementNavigationProgress;
|
|
209
|
+
exports.decrementNavigationProgressAction = decrementNavigationProgressAction;
|
|
210
|
+
exports.incrementNavigationProgress = incrementNavigationProgress;
|
|
211
|
+
exports.incrementNavigationProgressAction = incrementNavigationProgressAction;
|
|
212
|
+
exports.nprogress = nprogress;
|
|
213
|
+
exports.nprogressStore = nprogressStore;
|
|
214
|
+
exports.resetNavigationProgress = resetNavigationProgress;
|
|
215
|
+
exports.resetNavigationProgressAction = resetNavigationProgressAction;
|
|
216
|
+
exports.setNavigationProgress = setNavigationProgress;
|
|
217
|
+
exports.setNavigationProgressAction = setNavigationProgressAction;
|
|
218
|
+
exports.startNavigationProgress = startNavigationProgress;
|
|
219
|
+
exports.startNavigationProgressAction = startNavigationProgressAction;
|
|
220
|
+
exports.stopNavigationProgress = stopNavigationProgress;
|
|
221
|
+
exports.stopNavigationProgressAction = stopNavigationProgressAction;
|
|
222
|
+
exports.updateNavigationProgressStateAction = updateNavigationProgressStateAction;
|
|
223
|
+
exports.useNprogress = useNprogress;
|
|
224
|
+
|
|
225
|
+
//# sourceMappingURL=index.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.cjs","names":[],"sources":["../src/nprogress.store.ts","../src/NavigationProgress.module.css","../src/NavigationProgress.ts"],"sourcesContent":["import { type Ref } from 'vue'\nimport { createStore, type MantineStore } from '@mantine-vue/store'\n\nfunction clamp(value: number, min: number, max: number) {\n return Math.min(max, Math.max(min, value))\n}\n\nfunction getIntervalProgressValue(currentProgress: number) {\n let next = 0.5\n\n if (currentProgress >= 0 && currentProgress <= 20) {\n next = 10\n } else if (currentProgress >= 20 && currentProgress <= 50) {\n next = 4\n } else if (currentProgress >= 50 && currentProgress <= 80) {\n next = 2\n } else if (currentProgress >= 80 && currentProgress <= 99) {\n next = 1\n } else if (currentProgress >= 99 && currentProgress <= 100) {\n next = 0\n }\n\n return currentProgress + next\n}\n\nexport interface NprogressState {\n mounted: boolean\n progress: number\n interval: number\n step: number\n stepInterval: number\n timeouts: number[]\n}\n\nexport type NprogressStore = MantineStore<NprogressState>\n\nexport const createNprogressStore = () =>\n createStore<NprogressState>({\n mounted: false,\n progress: 0,\n interval: 0,\n step: 1,\n stepInterval: 100,\n timeouts: [],\n })\n\nexport const useNprogress = (store: NprogressStore): Readonly<Ref<NprogressState>> => store.value\n\nexport function updateNavigationProgressStateAction(\n update: (state: NprogressState) => Partial<NprogressState>,\n store: NprogressStore,\n) {\n const state = store.getState()\n store.setState({ ...state, ...update(store.getState()) })\n}\n\nexport function decrementNavigationProgressAction(store: NprogressStore) {\n updateNavigationProgressStateAction(\n (state) => ({ progress: Math.max(state.progress - state.step, 0) }),\n store,\n )\n}\n\nexport function setNavigationProgressAction(value: number, store: NprogressStore) {\n updateNavigationProgressStateAction(\n () => ({ progress: clamp(value, 0, 100), mounted: true }),\n store,\n )\n}\n\nexport function cleanupNavigationProgressAction(store: NprogressStore) {\n updateNavigationProgressStateAction((state) => {\n window.clearInterval(state.interval)\n state.timeouts.forEach((timeout) => window.clearTimeout(timeout))\n return { timeouts: [] }\n }, store)\n}\n\nexport function completeNavigationProgressAction(store: NprogressStore) {\n cleanupNavigationProgressAction(store)\n\n updateNavigationProgressStateAction((state) => {\n const mountedTimeout = window.setTimeout(() => {\n updateNavigationProgressStateAction(() => ({ mounted: false }), store)\n }, 50)\n\n const resetTimeout = window.setTimeout(() => {\n updateNavigationProgressStateAction(() => ({ progress: 0 }), store)\n }, state.stepInterval + 50)\n\n return { progress: 100, timeouts: [mountedTimeout, resetTimeout] }\n }, store)\n}\n\nexport function startNavigationProgressAction(store: NprogressStore) {\n updateNavigationProgressStateAction(\n (state) => ({ progress: getIntervalProgressValue(state.progress), mounted: true }),\n store,\n )\n\n updateNavigationProgressStateAction((state) => {\n window.clearInterval(state.interval)\n\n const interval = window.setInterval(() => {\n updateNavigationProgressStateAction(\n (current) => ({ progress: getIntervalProgressValue(current.progress), mounted: true }),\n store,\n )\n }, state.stepInterval)\n\n return { interval, mounted: true }\n }, store)\n}\n\nexport function stopNavigationProgressAction(store: NprogressStore) {\n updateNavigationProgressStateAction((state) => {\n window.clearInterval(state.interval)\n return { interval: -1 }\n }, store)\n}\n\nexport function resetNavigationProgressAction(store: NprogressStore) {\n cleanupNavigationProgressAction(store)\n stopNavigationProgressAction(store)\n updateNavigationProgressStateAction(() => ({ progress: 0, mounted: false }), store)\n}\n\nexport function incrementNavigationProgressAction(store: NprogressStore) {\n updateNavigationProgressStateAction((state) => {\n const nextValue = Math.min(state.progress + state.step, 100)\n const nextMounted = nextValue !== 100 && nextValue !== 0\n\n if (!nextMounted) {\n const timeout = window.setTimeout(\n () => resetNavigationProgressAction(store),\n state.stepInterval + 50,\n )\n\n return {\n progress: nextValue,\n mounted: nextMounted,\n timeouts: [...state.timeouts, timeout],\n }\n }\n\n return {\n progress: nextValue,\n mounted: nextMounted,\n }\n }, store)\n}\n\nexport function createNprogress() {\n const store = createNprogressStore()\n const actions = {\n start: () => startNavigationProgressAction(store),\n stop: () => stopNavigationProgressAction(store),\n reset: () => resetNavigationProgressAction(store),\n set: (value: number) => setNavigationProgressAction(value, store),\n increment: () => incrementNavigationProgressAction(store),\n decrement: () => decrementNavigationProgressAction(store),\n complete: () => completeNavigationProgressAction(store),\n cleanup: () => cleanupNavigationProgressAction(store),\n }\n\n return [store, actions] as const\n}\n\nexport const [nprogressStore, nprogress] = createNprogress()\nexport const {\n start: startNavigationProgress,\n stop: stopNavigationProgress,\n reset: resetNavigationProgress,\n set: setNavigationProgress,\n increment: incrementNavigationProgress,\n decrement: decrementNavigationProgress,\n complete: completeNavigationProgress,\n cleanup: cleanupNavigationProgress,\n} = nprogress\n",".root {\n position: fixed;\n top: 0;\n inset-inline: 0;\n z-index: var(--nprogress-z-index);\n background-color: transparent;\n transition: opacity 150ms ease;\n transition-delay: 50ms;\n opacity: 0;\n overflow: visible;\n\n &:where([data-mounted]) {\n opacity: 1;\n }\n}\n\n.section {\n position: relative;\n transition: width 150ms ease;\n overflow: visible;\n\n &::before {\n content: '';\n position: absolute;\n width: 100px;\n height: var(--progress-size);\n top: 0;\n inset-inline-end: 1px;\n transform: rotate(4deg) translateY(-4px);\n box-shadow:\n 0 0 10px var(--progress-section-color),\n 0 0 5px var(--progress-section-color);\n }\n}\n","import { defineComponent, h, onBeforeUnmount, watch, type PropType } from 'vue'\nimport { OptionalPortal, Progress, getDefaultZIndex } from '@mantine-vue/core'\nimport {\n nprogressStore,\n resetNavigationProgressAction,\n useNprogress,\n type NprogressStore,\n} from './nprogress.store'\nimport classes from './NavigationProgress.module.css'\n\nexport interface NavigationProgressProps {\n store?: NprogressStore\n initialProgress?: number\n color?: string\n size?: number\n stepInterval?: number\n withinPortal?: boolean\n portalProps?: Record<string, any>\n zIndex?: string | number\n}\n\nexport const NavigationProgress = defineComponent({\n name: 'NavigationProgress',\n inheritAttrs: false,\n props: {\n store: { type: Object as PropType<NprogressStore>, default: () => nprogressStore },\n initialProgress: { type: Number, default: 0 },\n color: { type: String, default: undefined },\n size: { type: Number, default: 3 },\n stepInterval: { type: Number, default: 500 },\n withinPortal: { type: Boolean, default: true },\n portalProps: { type: Object as PropType<Record<string, any>>, default: undefined },\n zIndex: {\n type: [Number, String] as PropType<string | number>,\n default: () => getDefaultZIndex('max'),\n },\n },\n setup(props, { attrs }) {\n const state = useNprogress(props.store)\n\n watch(\n () => [props.initialProgress, props.stepInterval, props.store] as const,\n () => {\n props.store.setState((current) => ({\n ...current,\n progress: props.initialProgress,\n stepInterval: props.stepInterval,\n }))\n },\n { immediate: true },\n )\n\n onBeforeUnmount(() => resetNavigationProgressAction(props.store))\n\n return () =>\n h(OptionalPortal, { withinPortal: props.withinPortal, ...props.portalProps }, () =>\n h(Progress, {\n ...attrs,\n radius: 0,\n value: state.value.progress,\n size: props.size,\n color: props.color,\n classNames: classes,\n 'data-mounted': state.value.mounted || undefined,\n vars: {\n root: {\n '--nprogress-z-index': props.zIndex?.toString(),\n },\n },\n }),\n )\n },\n})\n"],"mappings":"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"}
|
package/esm/index.mjs
ADDED
|
@@ -0,0 +1,202 @@
|
|
|
1
|
+
import { defineComponent, h, onBeforeUnmount, watch } from "vue";
|
|
2
|
+
import { OptionalPortal, Progress, getDefaultZIndex } from "@mantine-vue/core";
|
|
3
|
+
import { createStore } from "@mantine-vue/store";
|
|
4
|
+
//#region src/nprogress.store.ts
|
|
5
|
+
function clamp(value, min, max) {
|
|
6
|
+
return Math.min(max, Math.max(min, value));
|
|
7
|
+
}
|
|
8
|
+
function getIntervalProgressValue(currentProgress) {
|
|
9
|
+
let next = .5;
|
|
10
|
+
if (currentProgress >= 0 && currentProgress <= 20) next = 10;
|
|
11
|
+
else if (currentProgress >= 20 && currentProgress <= 50) next = 4;
|
|
12
|
+
else if (currentProgress >= 50 && currentProgress <= 80) next = 2;
|
|
13
|
+
else if (currentProgress >= 80 && currentProgress <= 99) next = 1;
|
|
14
|
+
else if (currentProgress >= 99 && currentProgress <= 100) next = 0;
|
|
15
|
+
return currentProgress + next;
|
|
16
|
+
}
|
|
17
|
+
var createNprogressStore = () => createStore({
|
|
18
|
+
mounted: false,
|
|
19
|
+
progress: 0,
|
|
20
|
+
interval: 0,
|
|
21
|
+
step: 1,
|
|
22
|
+
stepInterval: 100,
|
|
23
|
+
timeouts: []
|
|
24
|
+
});
|
|
25
|
+
var useNprogress = (store) => store.value;
|
|
26
|
+
function updateNavigationProgressStateAction(update, store) {
|
|
27
|
+
const state = store.getState();
|
|
28
|
+
store.setState({
|
|
29
|
+
...state,
|
|
30
|
+
...update(store.getState())
|
|
31
|
+
});
|
|
32
|
+
}
|
|
33
|
+
function decrementNavigationProgressAction(store) {
|
|
34
|
+
updateNavigationProgressStateAction((state) => ({ progress: Math.max(state.progress - state.step, 0) }), store);
|
|
35
|
+
}
|
|
36
|
+
function setNavigationProgressAction(value, store) {
|
|
37
|
+
updateNavigationProgressStateAction(() => ({
|
|
38
|
+
progress: clamp(value, 0, 100),
|
|
39
|
+
mounted: true
|
|
40
|
+
}), store);
|
|
41
|
+
}
|
|
42
|
+
function cleanupNavigationProgressAction(store) {
|
|
43
|
+
updateNavigationProgressStateAction((state) => {
|
|
44
|
+
window.clearInterval(state.interval);
|
|
45
|
+
state.timeouts.forEach((timeout) => window.clearTimeout(timeout));
|
|
46
|
+
return { timeouts: [] };
|
|
47
|
+
}, store);
|
|
48
|
+
}
|
|
49
|
+
function completeNavigationProgressAction(store) {
|
|
50
|
+
cleanupNavigationProgressAction(store);
|
|
51
|
+
updateNavigationProgressStateAction((state) => {
|
|
52
|
+
return {
|
|
53
|
+
progress: 100,
|
|
54
|
+
timeouts: [window.setTimeout(() => {
|
|
55
|
+
updateNavigationProgressStateAction(() => ({ mounted: false }), store);
|
|
56
|
+
}, 50), window.setTimeout(() => {
|
|
57
|
+
updateNavigationProgressStateAction(() => ({ progress: 0 }), store);
|
|
58
|
+
}, state.stepInterval + 50)]
|
|
59
|
+
};
|
|
60
|
+
}, store);
|
|
61
|
+
}
|
|
62
|
+
function startNavigationProgressAction(store) {
|
|
63
|
+
updateNavigationProgressStateAction((state) => ({
|
|
64
|
+
progress: getIntervalProgressValue(state.progress),
|
|
65
|
+
mounted: true
|
|
66
|
+
}), store);
|
|
67
|
+
updateNavigationProgressStateAction((state) => {
|
|
68
|
+
window.clearInterval(state.interval);
|
|
69
|
+
return {
|
|
70
|
+
interval: window.setInterval(() => {
|
|
71
|
+
updateNavigationProgressStateAction((current) => ({
|
|
72
|
+
progress: getIntervalProgressValue(current.progress),
|
|
73
|
+
mounted: true
|
|
74
|
+
}), store);
|
|
75
|
+
}, state.stepInterval),
|
|
76
|
+
mounted: true
|
|
77
|
+
};
|
|
78
|
+
}, store);
|
|
79
|
+
}
|
|
80
|
+
function stopNavigationProgressAction(store) {
|
|
81
|
+
updateNavigationProgressStateAction((state) => {
|
|
82
|
+
window.clearInterval(state.interval);
|
|
83
|
+
return { interval: -1 };
|
|
84
|
+
}, store);
|
|
85
|
+
}
|
|
86
|
+
function resetNavigationProgressAction(store) {
|
|
87
|
+
cleanupNavigationProgressAction(store);
|
|
88
|
+
stopNavigationProgressAction(store);
|
|
89
|
+
updateNavigationProgressStateAction(() => ({
|
|
90
|
+
progress: 0,
|
|
91
|
+
mounted: false
|
|
92
|
+
}), store);
|
|
93
|
+
}
|
|
94
|
+
function incrementNavigationProgressAction(store) {
|
|
95
|
+
updateNavigationProgressStateAction((state) => {
|
|
96
|
+
const nextValue = Math.min(state.progress + state.step, 100);
|
|
97
|
+
const nextMounted = nextValue !== 100 && nextValue !== 0;
|
|
98
|
+
if (!nextMounted) {
|
|
99
|
+
const timeout = window.setTimeout(() => resetNavigationProgressAction(store), state.stepInterval + 50);
|
|
100
|
+
return {
|
|
101
|
+
progress: nextValue,
|
|
102
|
+
mounted: nextMounted,
|
|
103
|
+
timeouts: [...state.timeouts, timeout]
|
|
104
|
+
};
|
|
105
|
+
}
|
|
106
|
+
return {
|
|
107
|
+
progress: nextValue,
|
|
108
|
+
mounted: nextMounted
|
|
109
|
+
};
|
|
110
|
+
}, store);
|
|
111
|
+
}
|
|
112
|
+
function createNprogress() {
|
|
113
|
+
const store = createNprogressStore();
|
|
114
|
+
return [store, {
|
|
115
|
+
start: () => startNavigationProgressAction(store),
|
|
116
|
+
stop: () => stopNavigationProgressAction(store),
|
|
117
|
+
reset: () => resetNavigationProgressAction(store),
|
|
118
|
+
set: (value) => setNavigationProgressAction(value, store),
|
|
119
|
+
increment: () => incrementNavigationProgressAction(store),
|
|
120
|
+
decrement: () => decrementNavigationProgressAction(store),
|
|
121
|
+
complete: () => completeNavigationProgressAction(store),
|
|
122
|
+
cleanup: () => cleanupNavigationProgressAction(store)
|
|
123
|
+
}];
|
|
124
|
+
}
|
|
125
|
+
var [nprogressStore, nprogress] = createNprogress();
|
|
126
|
+
var { start: startNavigationProgress, stop: stopNavigationProgress, reset: resetNavigationProgress, set: setNavigationProgress, increment: incrementNavigationProgress, decrement: decrementNavigationProgress, complete: completeNavigationProgress, cleanup: cleanupNavigationProgress } = nprogress;
|
|
127
|
+
var NavigationProgress_module_default = {
|
|
128
|
+
root: "_root_1o6fp_1",
|
|
129
|
+
section: "_section_1o6fp_17"
|
|
130
|
+
};
|
|
131
|
+
//#endregion
|
|
132
|
+
//#region src/NavigationProgress.ts
|
|
133
|
+
var NavigationProgress = defineComponent({
|
|
134
|
+
name: "NavigationProgress",
|
|
135
|
+
inheritAttrs: false,
|
|
136
|
+
props: {
|
|
137
|
+
store: {
|
|
138
|
+
type: Object,
|
|
139
|
+
default: () => nprogressStore
|
|
140
|
+
},
|
|
141
|
+
initialProgress: {
|
|
142
|
+
type: Number,
|
|
143
|
+
default: 0
|
|
144
|
+
},
|
|
145
|
+
color: {
|
|
146
|
+
type: String,
|
|
147
|
+
default: void 0
|
|
148
|
+
},
|
|
149
|
+
size: {
|
|
150
|
+
type: Number,
|
|
151
|
+
default: 3
|
|
152
|
+
},
|
|
153
|
+
stepInterval: {
|
|
154
|
+
type: Number,
|
|
155
|
+
default: 500
|
|
156
|
+
},
|
|
157
|
+
withinPortal: {
|
|
158
|
+
type: Boolean,
|
|
159
|
+
default: true
|
|
160
|
+
},
|
|
161
|
+
portalProps: {
|
|
162
|
+
type: Object,
|
|
163
|
+
default: void 0
|
|
164
|
+
},
|
|
165
|
+
zIndex: {
|
|
166
|
+
type: [Number, String],
|
|
167
|
+
default: () => getDefaultZIndex("max")
|
|
168
|
+
}
|
|
169
|
+
},
|
|
170
|
+
setup(props, { attrs }) {
|
|
171
|
+
const state = useNprogress(props.store);
|
|
172
|
+
watch(() => [
|
|
173
|
+
props.initialProgress,
|
|
174
|
+
props.stepInterval,
|
|
175
|
+
props.store
|
|
176
|
+
], () => {
|
|
177
|
+
props.store.setState((current) => ({
|
|
178
|
+
...current,
|
|
179
|
+
progress: props.initialProgress,
|
|
180
|
+
stepInterval: props.stepInterval
|
|
181
|
+
}));
|
|
182
|
+
}, { immediate: true });
|
|
183
|
+
onBeforeUnmount(() => resetNavigationProgressAction(props.store));
|
|
184
|
+
return () => h(OptionalPortal, {
|
|
185
|
+
withinPortal: props.withinPortal,
|
|
186
|
+
...props.portalProps
|
|
187
|
+
}, () => h(Progress, {
|
|
188
|
+
...attrs,
|
|
189
|
+
radius: 0,
|
|
190
|
+
value: state.value.progress,
|
|
191
|
+
size: props.size,
|
|
192
|
+
color: props.color,
|
|
193
|
+
classNames: NavigationProgress_module_default,
|
|
194
|
+
"data-mounted": state.value.mounted || void 0,
|
|
195
|
+
vars: { root: { "--nprogress-z-index": props.zIndex?.toString() } }
|
|
196
|
+
}));
|
|
197
|
+
}
|
|
198
|
+
});
|
|
199
|
+
//#endregion
|
|
200
|
+
export { NavigationProgress, cleanupNavigationProgress, cleanupNavigationProgressAction, completeNavigationProgress, completeNavigationProgressAction, createNprogress, createNprogressStore, decrementNavigationProgress, decrementNavigationProgressAction, incrementNavigationProgress, incrementNavigationProgressAction, nprogress, nprogressStore, resetNavigationProgress, resetNavigationProgressAction, setNavigationProgress, setNavigationProgressAction, startNavigationProgress, startNavigationProgressAction, stopNavigationProgress, stopNavigationProgressAction, updateNavigationProgressStateAction, useNprogress };
|
|
201
|
+
|
|
202
|
+
//# sourceMappingURL=index.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.mjs","names":[],"sources":["../src/nprogress.store.ts","../src/NavigationProgress.module.css","../src/NavigationProgress.ts"],"sourcesContent":["import { type Ref } from 'vue'\nimport { createStore, type MantineStore } from '@mantine-vue/store'\n\nfunction clamp(value: number, min: number, max: number) {\n return Math.min(max, Math.max(min, value))\n}\n\nfunction getIntervalProgressValue(currentProgress: number) {\n let next = 0.5\n\n if (currentProgress >= 0 && currentProgress <= 20) {\n next = 10\n } else if (currentProgress >= 20 && currentProgress <= 50) {\n next = 4\n } else if (currentProgress >= 50 && currentProgress <= 80) {\n next = 2\n } else if (currentProgress >= 80 && currentProgress <= 99) {\n next = 1\n } else if (currentProgress >= 99 && currentProgress <= 100) {\n next = 0\n }\n\n return currentProgress + next\n}\n\nexport interface NprogressState {\n mounted: boolean\n progress: number\n interval: number\n step: number\n stepInterval: number\n timeouts: number[]\n}\n\nexport type NprogressStore = MantineStore<NprogressState>\n\nexport const createNprogressStore = () =>\n createStore<NprogressState>({\n mounted: false,\n progress: 0,\n interval: 0,\n step: 1,\n stepInterval: 100,\n timeouts: [],\n })\n\nexport const useNprogress = (store: NprogressStore): Readonly<Ref<NprogressState>> => store.value\n\nexport function updateNavigationProgressStateAction(\n update: (state: NprogressState) => Partial<NprogressState>,\n store: NprogressStore,\n) {\n const state = store.getState()\n store.setState({ ...state, ...update(store.getState()) })\n}\n\nexport function decrementNavigationProgressAction(store: NprogressStore) {\n updateNavigationProgressStateAction(\n (state) => ({ progress: Math.max(state.progress - state.step, 0) }),\n store,\n )\n}\n\nexport function setNavigationProgressAction(value: number, store: NprogressStore) {\n updateNavigationProgressStateAction(\n () => ({ progress: clamp(value, 0, 100), mounted: true }),\n store,\n )\n}\n\nexport function cleanupNavigationProgressAction(store: NprogressStore) {\n updateNavigationProgressStateAction((state) => {\n window.clearInterval(state.interval)\n state.timeouts.forEach((timeout) => window.clearTimeout(timeout))\n return { timeouts: [] }\n }, store)\n}\n\nexport function completeNavigationProgressAction(store: NprogressStore) {\n cleanupNavigationProgressAction(store)\n\n updateNavigationProgressStateAction((state) => {\n const mountedTimeout = window.setTimeout(() => {\n updateNavigationProgressStateAction(() => ({ mounted: false }), store)\n }, 50)\n\n const resetTimeout = window.setTimeout(() => {\n updateNavigationProgressStateAction(() => ({ progress: 0 }), store)\n }, state.stepInterval + 50)\n\n return { progress: 100, timeouts: [mountedTimeout, resetTimeout] }\n }, store)\n}\n\nexport function startNavigationProgressAction(store: NprogressStore) {\n updateNavigationProgressStateAction(\n (state) => ({ progress: getIntervalProgressValue(state.progress), mounted: true }),\n store,\n )\n\n updateNavigationProgressStateAction((state) => {\n window.clearInterval(state.interval)\n\n const interval = window.setInterval(() => {\n updateNavigationProgressStateAction(\n (current) => ({ progress: getIntervalProgressValue(current.progress), mounted: true }),\n store,\n )\n }, state.stepInterval)\n\n return { interval, mounted: true }\n }, store)\n}\n\nexport function stopNavigationProgressAction(store: NprogressStore) {\n updateNavigationProgressStateAction((state) => {\n window.clearInterval(state.interval)\n return { interval: -1 }\n }, store)\n}\n\nexport function resetNavigationProgressAction(store: NprogressStore) {\n cleanupNavigationProgressAction(store)\n stopNavigationProgressAction(store)\n updateNavigationProgressStateAction(() => ({ progress: 0, mounted: false }), store)\n}\n\nexport function incrementNavigationProgressAction(store: NprogressStore) {\n updateNavigationProgressStateAction((state) => {\n const nextValue = Math.min(state.progress + state.step, 100)\n const nextMounted = nextValue !== 100 && nextValue !== 0\n\n if (!nextMounted) {\n const timeout = window.setTimeout(\n () => resetNavigationProgressAction(store),\n state.stepInterval + 50,\n )\n\n return {\n progress: nextValue,\n mounted: nextMounted,\n timeouts: [...state.timeouts, timeout],\n }\n }\n\n return {\n progress: nextValue,\n mounted: nextMounted,\n }\n }, store)\n}\n\nexport function createNprogress() {\n const store = createNprogressStore()\n const actions = {\n start: () => startNavigationProgressAction(store),\n stop: () => stopNavigationProgressAction(store),\n reset: () => resetNavigationProgressAction(store),\n set: (value: number) => setNavigationProgressAction(value, store),\n increment: () => incrementNavigationProgressAction(store),\n decrement: () => decrementNavigationProgressAction(store),\n complete: () => completeNavigationProgressAction(store),\n cleanup: () => cleanupNavigationProgressAction(store),\n }\n\n return [store, actions] as const\n}\n\nexport const [nprogressStore, nprogress] = createNprogress()\nexport const {\n start: startNavigationProgress,\n stop: stopNavigationProgress,\n reset: resetNavigationProgress,\n set: setNavigationProgress,\n increment: incrementNavigationProgress,\n decrement: decrementNavigationProgress,\n complete: completeNavigationProgress,\n cleanup: cleanupNavigationProgress,\n} = nprogress\n",".root {\n position: fixed;\n top: 0;\n inset-inline: 0;\n z-index: var(--nprogress-z-index);\n background-color: transparent;\n transition: opacity 150ms ease;\n transition-delay: 50ms;\n opacity: 0;\n overflow: visible;\n\n &:where([data-mounted]) {\n opacity: 1;\n }\n}\n\n.section {\n position: relative;\n transition: width 150ms ease;\n overflow: visible;\n\n &::before {\n content: '';\n position: absolute;\n width: 100px;\n height: var(--progress-size);\n top: 0;\n inset-inline-end: 1px;\n transform: rotate(4deg) translateY(-4px);\n box-shadow:\n 0 0 10px var(--progress-section-color),\n 0 0 5px var(--progress-section-color);\n }\n}\n","import { defineComponent, h, onBeforeUnmount, watch, type PropType } from 'vue'\nimport { OptionalPortal, Progress, getDefaultZIndex } from '@mantine-vue/core'\nimport {\n nprogressStore,\n resetNavigationProgressAction,\n useNprogress,\n type NprogressStore,\n} from './nprogress.store'\nimport classes from './NavigationProgress.module.css'\n\nexport interface NavigationProgressProps {\n store?: NprogressStore\n initialProgress?: number\n color?: string\n size?: number\n stepInterval?: number\n withinPortal?: boolean\n portalProps?: Record<string, any>\n zIndex?: string | number\n}\n\nexport const NavigationProgress = defineComponent({\n name: 'NavigationProgress',\n inheritAttrs: false,\n props: {\n store: { type: Object as PropType<NprogressStore>, default: () => nprogressStore },\n initialProgress: { type: Number, default: 0 },\n color: { type: String, default: undefined },\n size: { type: Number, default: 3 },\n stepInterval: { type: Number, default: 500 },\n withinPortal: { type: Boolean, default: true },\n portalProps: { type: Object as PropType<Record<string, any>>, default: undefined },\n zIndex: {\n type: [Number, String] as PropType<string | number>,\n default: () => getDefaultZIndex('max'),\n },\n },\n setup(props, { attrs }) {\n const state = useNprogress(props.store)\n\n watch(\n () => [props.initialProgress, props.stepInterval, props.store] as const,\n () => {\n props.store.setState((current) => ({\n ...current,\n progress: props.initialProgress,\n stepInterval: props.stepInterval,\n }))\n },\n { immediate: true },\n )\n\n onBeforeUnmount(() => resetNavigationProgressAction(props.store))\n\n return () =>\n h(OptionalPortal, { withinPortal: props.withinPortal, ...props.portalProps }, () =>\n h(Progress, {\n ...attrs,\n radius: 0,\n value: state.value.progress,\n size: props.size,\n color: props.color,\n classNames: classes,\n 'data-mounted': state.value.mounted || undefined,\n vars: {\n root: {\n '--nprogress-z-index': props.zIndex?.toString(),\n },\n },\n }),\n )\n },\n})\n"],"mappings":"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"}
|
|
@@ -0,0 +1,90 @@
|
|
|
1
|
+
import { type PropType } from 'vue';
|
|
2
|
+
import { type NprogressStore } from './nprogress.store';
|
|
3
|
+
export interface NavigationProgressProps {
|
|
4
|
+
store?: NprogressStore;
|
|
5
|
+
initialProgress?: number;
|
|
6
|
+
color?: string;
|
|
7
|
+
size?: number;
|
|
8
|
+
stepInterval?: number;
|
|
9
|
+
withinPortal?: boolean;
|
|
10
|
+
portalProps?: Record<string, any>;
|
|
11
|
+
zIndex?: string | number;
|
|
12
|
+
}
|
|
13
|
+
export declare const NavigationProgress: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
|
|
14
|
+
store: {
|
|
15
|
+
type: PropType<NprogressStore>;
|
|
16
|
+
default: () => import("@mantine-vue/store").MantineStore<import("./nprogress.store").NprogressState>;
|
|
17
|
+
};
|
|
18
|
+
initialProgress: {
|
|
19
|
+
type: NumberConstructor;
|
|
20
|
+
default: number;
|
|
21
|
+
};
|
|
22
|
+
color: {
|
|
23
|
+
type: StringConstructor;
|
|
24
|
+
default: undefined;
|
|
25
|
+
};
|
|
26
|
+
size: {
|
|
27
|
+
type: NumberConstructor;
|
|
28
|
+
default: number;
|
|
29
|
+
};
|
|
30
|
+
stepInterval: {
|
|
31
|
+
type: NumberConstructor;
|
|
32
|
+
default: number;
|
|
33
|
+
};
|
|
34
|
+
withinPortal: {
|
|
35
|
+
type: BooleanConstructor;
|
|
36
|
+
default: boolean;
|
|
37
|
+
};
|
|
38
|
+
portalProps: {
|
|
39
|
+
type: PropType<Record<string, any>>;
|
|
40
|
+
default: undefined;
|
|
41
|
+
};
|
|
42
|
+
zIndex: {
|
|
43
|
+
type: PropType<string | number>;
|
|
44
|
+
default: () => number;
|
|
45
|
+
};
|
|
46
|
+
}>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
|
47
|
+
[key: string]: any;
|
|
48
|
+
}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
|
|
49
|
+
store: {
|
|
50
|
+
type: PropType<NprogressStore>;
|
|
51
|
+
default: () => import("@mantine-vue/store").MantineStore<import("./nprogress.store").NprogressState>;
|
|
52
|
+
};
|
|
53
|
+
initialProgress: {
|
|
54
|
+
type: NumberConstructor;
|
|
55
|
+
default: number;
|
|
56
|
+
};
|
|
57
|
+
color: {
|
|
58
|
+
type: StringConstructor;
|
|
59
|
+
default: undefined;
|
|
60
|
+
};
|
|
61
|
+
size: {
|
|
62
|
+
type: NumberConstructor;
|
|
63
|
+
default: number;
|
|
64
|
+
};
|
|
65
|
+
stepInterval: {
|
|
66
|
+
type: NumberConstructor;
|
|
67
|
+
default: number;
|
|
68
|
+
};
|
|
69
|
+
withinPortal: {
|
|
70
|
+
type: BooleanConstructor;
|
|
71
|
+
default: boolean;
|
|
72
|
+
};
|
|
73
|
+
portalProps: {
|
|
74
|
+
type: PropType<Record<string, any>>;
|
|
75
|
+
default: undefined;
|
|
76
|
+
};
|
|
77
|
+
zIndex: {
|
|
78
|
+
type: PropType<string | number>;
|
|
79
|
+
default: () => number;
|
|
80
|
+
};
|
|
81
|
+
}>> & Readonly<{}>, {
|
|
82
|
+
size: number;
|
|
83
|
+
color: string;
|
|
84
|
+
zIndex: string | number;
|
|
85
|
+
withinPortal: boolean;
|
|
86
|
+
portalProps: Record<string, any>;
|
|
87
|
+
store: NprogressStore;
|
|
88
|
+
stepInterval: number;
|
|
89
|
+
initialProgress: number;
|
|
90
|
+
}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
|
package/lib/index.d.mts
ADDED
package/lib/index.d.ts
ADDED
|
@@ -0,0 +1,43 @@
|
|
|
1
|
+
import { type Ref } from 'vue';
|
|
2
|
+
import { type MantineStore } from '@mantine-vue/store';
|
|
3
|
+
export interface NprogressState {
|
|
4
|
+
mounted: boolean;
|
|
5
|
+
progress: number;
|
|
6
|
+
interval: number;
|
|
7
|
+
step: number;
|
|
8
|
+
stepInterval: number;
|
|
9
|
+
timeouts: number[];
|
|
10
|
+
}
|
|
11
|
+
export type NprogressStore = MantineStore<NprogressState>;
|
|
12
|
+
export declare const createNprogressStore: () => MantineStore<NprogressState>;
|
|
13
|
+
export declare const useNprogress: (store: NprogressStore) => Readonly<Ref<NprogressState>>;
|
|
14
|
+
export declare function updateNavigationProgressStateAction(update: (state: NprogressState) => Partial<NprogressState>, store: NprogressStore): void;
|
|
15
|
+
export declare function decrementNavigationProgressAction(store: NprogressStore): void;
|
|
16
|
+
export declare function setNavigationProgressAction(value: number, store: NprogressStore): void;
|
|
17
|
+
export declare function cleanupNavigationProgressAction(store: NprogressStore): void;
|
|
18
|
+
export declare function completeNavigationProgressAction(store: NprogressStore): void;
|
|
19
|
+
export declare function startNavigationProgressAction(store: NprogressStore): void;
|
|
20
|
+
export declare function stopNavigationProgressAction(store: NprogressStore): void;
|
|
21
|
+
export declare function resetNavigationProgressAction(store: NprogressStore): void;
|
|
22
|
+
export declare function incrementNavigationProgressAction(store: NprogressStore): void;
|
|
23
|
+
export declare function createNprogress(): readonly [MantineStore<NprogressState>, {
|
|
24
|
+
start: () => void;
|
|
25
|
+
stop: () => void;
|
|
26
|
+
reset: () => void;
|
|
27
|
+
set: (value: number) => void;
|
|
28
|
+
increment: () => void;
|
|
29
|
+
decrement: () => void;
|
|
30
|
+
complete: () => void;
|
|
31
|
+
cleanup: () => void;
|
|
32
|
+
}];
|
|
33
|
+
export declare const nprogressStore: MantineStore<NprogressState>, nprogress: {
|
|
34
|
+
start: () => void;
|
|
35
|
+
stop: () => void;
|
|
36
|
+
reset: () => void;
|
|
37
|
+
set: (value: number) => void;
|
|
38
|
+
increment: () => void;
|
|
39
|
+
decrement: () => void;
|
|
40
|
+
complete: () => void;
|
|
41
|
+
cleanup: () => void;
|
|
42
|
+
};
|
|
43
|
+
export declare const startNavigationProgress: () => void, stopNavigationProgress: () => void, resetNavigationProgress: () => void, setNavigationProgress: (value: number) => void, incrementNavigationProgress: () => void, decrementNavigationProgress: () => void, completeNavigationProgress: () => void, cleanupNavigationProgress: () => void;
|
package/package.json
ADDED
|
@@ -0,0 +1,44 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "@mantine-vue/nprogress",
|
|
3
|
+
"version": "1.1.2",
|
|
4
|
+
"description": "Vue navigation progress bar equivalent to @mantine/nprogress",
|
|
5
|
+
"license": "MIT",
|
|
6
|
+
"files": [
|
|
7
|
+
"cjs",
|
|
8
|
+
"esm",
|
|
9
|
+
"lib",
|
|
10
|
+
"styles.css",
|
|
11
|
+
"styles.layer.css",
|
|
12
|
+
"styles"
|
|
13
|
+
],
|
|
14
|
+
"sideEffects": [
|
|
15
|
+
"*.css"
|
|
16
|
+
],
|
|
17
|
+
"main": "./cjs/index.cjs",
|
|
18
|
+
"module": "./esm/index.mjs",
|
|
19
|
+
"types": "./lib/index.d.ts",
|
|
20
|
+
"exports": {
|
|
21
|
+
".": {
|
|
22
|
+
"import": {
|
|
23
|
+
"types": "./lib/index.d.mts",
|
|
24
|
+
"default": "./esm/index.mjs"
|
|
25
|
+
},
|
|
26
|
+
"require": {
|
|
27
|
+
"types": "./lib/index.d.ts",
|
|
28
|
+
"default": "./cjs/index.cjs"
|
|
29
|
+
}
|
|
30
|
+
}
|
|
31
|
+
},
|
|
32
|
+
"devDependencies": {
|
|
33
|
+
"@mantine-vue/core": "workspace:*",
|
|
34
|
+
"@mantine-vue/store": "workspace:*",
|
|
35
|
+
"@vue/compiler-dom": "^3.5.0",
|
|
36
|
+
"@vue/test-utils": "^2.4.6",
|
|
37
|
+
"vue": "^3.5.0"
|
|
38
|
+
},
|
|
39
|
+
"peerDependencies": {
|
|
40
|
+
"@mantine-vue/core": "1.1.1",
|
|
41
|
+
"@mantine-vue/store": "1.1.1",
|
|
42
|
+
"vue": "^3.5.0"
|
|
43
|
+
}
|
|
44
|
+
}
|
package/styles.css
ADDED
|
@@ -0,0 +1,35 @@
|
|
|
1
|
+
._root_1o6fp_1 {
|
|
2
|
+
position: fixed;
|
|
3
|
+
top: 0;
|
|
4
|
+
inset-inline: 0;
|
|
5
|
+
z-index: var(--nprogress-z-index);
|
|
6
|
+
background-color: transparent;
|
|
7
|
+
transition: opacity 150ms ease;
|
|
8
|
+
transition-delay: 50ms;
|
|
9
|
+
opacity: 0;
|
|
10
|
+
overflow: visible;
|
|
11
|
+
}
|
|
12
|
+
|
|
13
|
+
._root_1o6fp_1:where([data-mounted]) {
|
|
14
|
+
opacity: 1;
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
._section_1o6fp_17 {
|
|
18
|
+
position: relative;
|
|
19
|
+
transition: width 150ms ease;
|
|
20
|
+
overflow: visible;
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
._section_1o6fp_17::before {
|
|
24
|
+
content: '';
|
|
25
|
+
position: absolute;
|
|
26
|
+
width: calc(6.25rem * var(--mantine-scale));
|
|
27
|
+
height: var(--progress-size);
|
|
28
|
+
top: 0;
|
|
29
|
+
inset-inline-end: calc(0.0625rem * var(--mantine-scale));
|
|
30
|
+
transform: rotate(4deg) translateY(-4px);
|
|
31
|
+
box-shadow:
|
|
32
|
+
0 0 10px var(--progress-section-color),
|
|
33
|
+
0 0 5px var(--progress-section-color);
|
|
34
|
+
}
|
|
35
|
+
/*$vite$:1*/
|
package/styles.layer.css
ADDED
|
@@ -0,0 +1,37 @@
|
|
|
1
|
+
@layer mantine {
|
|
2
|
+
._root_1o6fp_1 {
|
|
3
|
+
position: fixed;
|
|
4
|
+
top: 0;
|
|
5
|
+
inset-inline: 0;
|
|
6
|
+
z-index: var(--nprogress-z-index);
|
|
7
|
+
background-color: transparent;
|
|
8
|
+
transition: opacity 150ms ease;
|
|
9
|
+
transition-delay: 50ms;
|
|
10
|
+
opacity: 0;
|
|
11
|
+
overflow: visible;
|
|
12
|
+
}
|
|
13
|
+
|
|
14
|
+
._root_1o6fp_1:where([data-mounted]) {
|
|
15
|
+
opacity: 1;
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
._section_1o6fp_17 {
|
|
19
|
+
position: relative;
|
|
20
|
+
transition: width 150ms ease;
|
|
21
|
+
overflow: visible;
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
._section_1o6fp_17::before {
|
|
25
|
+
content: '';
|
|
26
|
+
position: absolute;
|
|
27
|
+
width: calc(6.25rem * var(--mantine-scale));
|
|
28
|
+
height: var(--progress-size);
|
|
29
|
+
top: 0;
|
|
30
|
+
inset-inline-end: calc(0.0625rem * var(--mantine-scale));
|
|
31
|
+
transform: rotate(4deg) translateY(-4px);
|
|
32
|
+
box-shadow:
|
|
33
|
+
0 0 10px var(--progress-section-color),
|
|
34
|
+
0 0 5px var(--progress-section-color);
|
|
35
|
+
}
|
|
36
|
+
/*$vite$:1*/
|
|
37
|
+
}
|