@mantine-vue/nprogress 3.0.0 → 3.2.0

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.
Files changed (11) hide show
  1. package/cjs/index.cjs +35 -45
  2. package/cjs/index.cjs.map +1 -1
  3. package/esm/index.mjs +36 -46
  4. package/esm/index.mjs.map +1 -1
  5. package/lib/components/NavigationProgress/NavigationProgress.types.d.ts +20 -0
  6. package/lib/components/NavigationProgress/NavigationProgress.vue.d.ts +4 -0
  7. package/lib/components/NavigationProgress/index.d.ts +2 -0
  8. package/lib/index.d.mts +2 -2
  9. package/lib/index.d.ts +2 -2
  10. package/package.json +3 -3
  11. package/lib/NavigationProgress.d.ts +0 -90
package/cjs/index.cjs CHANGED
@@ -130,45 +130,27 @@ var NavigationProgress_module_default = {
130
130
  section: "_section_1o6fp_17"
131
131
  };
132
132
  //#endregion
133
- //#region src/NavigationProgress.ts
134
- var NavigationProgress = (0, vue.defineComponent)({
133
+ //#region src/components/NavigationProgress/NavigationProgress.vue
134
+ var NavigationProgress_default = /* @__PURE__ */ (0, vue.defineComponent)({
135
135
  name: "NavigationProgress",
136
136
  inheritAttrs: false,
137
+ __name: "NavigationProgress",
137
138
  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
- },
139
+ store: { default: () => nprogressStore },
140
+ initialProgress: { default: 0 },
141
+ color: {},
142
+ size: { default: 3 },
143
+ stepInterval: { default: 500 },
158
144
  withinPortal: {
159
145
  type: Boolean,
160
146
  default: true
161
147
  },
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
- }
148
+ portalProps: {},
149
+ zIndex: { default: () => (0, _mantine_vue_core.getDefaultZIndex)("max") }
170
150
  },
171
- setup(props, { attrs }) {
151
+ setup(__props) {
152
+ const props = __props;
153
+ const attrs = (0, vue.useAttrs)();
172
154
  const state = useNprogress(props.store);
173
155
  (0, vue.watch)(() => [
174
156
  props.initialProgress,
@@ -182,23 +164,31 @@ var NavigationProgress = (0, vue.defineComponent)({
182
164
  }));
183
165
  }, { immediate: true });
184
166
  (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
- }));
167
+ return (_ctx, _cache) => {
168
+ return (0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(_mantine_vue_core.OptionalPortal), (0, vue.mergeProps)(props.portalProps, { "within-portal": props.withinPortal }), {
169
+ default: (0, vue.withCtx)(() => [(0, vue.createVNode)((0, vue.unref)(_mantine_vue_core.Progress), (0, vue.mergeProps)((0, vue.unref)(attrs), {
170
+ radius: 0,
171
+ value: (0, vue.unref)(state).progress,
172
+ size: props.size,
173
+ color: props.color,
174
+ "class-names": (0, vue.unref)(NavigationProgress_module_default),
175
+ "data-mounted": (0, vue.unref)(state).mounted || void 0,
176
+ style: { "--nprogress-z-index": props.zIndex?.toString() }
177
+ }), null, 16, [
178
+ "value",
179
+ "size",
180
+ "color",
181
+ "class-names",
182
+ "data-mounted",
183
+ "style"
184
+ ])]),
185
+ _: 1
186
+ }, 16, ["within-portal"]);
187
+ };
198
188
  }
199
189
  });
200
190
  //#endregion
201
- exports.NavigationProgress = NavigationProgress;
191
+ exports.NavigationProgress = NavigationProgress_default;
202
192
  exports.cleanupNavigationProgress = cleanupNavigationProgress;
203
193
  exports.cleanupNavigationProgressAction = cleanupNavigationProgressAction;
204
194
  exports.completeNavigationProgress = completeNavigationProgress;
package/cjs/index.cjs.map CHANGED
@@ -1 +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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"}
1
+ {"version":3,"file":"index.cjs","names":[],"sources":["../src/nprogress.store.ts","../src/NavigationProgress.module.css","../src/components/NavigationProgress/NavigationProgress.vue","../src/components/NavigationProgress/NavigationProgress.vue"],"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","<script setup lang=\"ts\">\nimport { onBeforeUnmount, useAttrs, watch } from 'vue'\nimport { OptionalPortal, Progress, getDefaultZIndex } from '@mantine-vue/core'\nimport { nprogressStore, resetNavigationProgressAction, useNprogress } from '../../nprogress.store'\nimport type { NavigationProgressProps } from './NavigationProgress.types'\nimport classes from '../../NavigationProgress.module.css'\n\ndefineOptions({ name: 'NavigationProgress', inheritAttrs: false })\n\nconst props = withDefaults(defineProps<NavigationProgressProps>(), {\n store: () => nprogressStore,\n initialProgress: 0,\n size: 3,\n stepInterval: 500,\n withinPortal: true,\n zIndex: () => getDefaultZIndex('max'),\n})\nconst attrs = useAttrs()\nconst state = useNprogress(props.store)\n\nwatch(\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\nonBeforeUnmount(() => resetNavigationProgressAction(props.store))\n</script>\n\n<template>\n <OptionalPortal v-bind=\"props.portalProps\" :within-portal=\"props.withinPortal\">\n <Progress\n v-bind=\"attrs\"\n :radius=\"0\"\n :value=\"state.progress\"\n :size=\"props.size\"\n :color=\"props.color\"\n :class-names=\"classes\"\n :data-mounted=\"state.mounted || undefined\"\n :style=\"{ '--nprogress-z-index': props.zIndex?.toString() }\"\n />\n </OptionalPortal>\n</template>\n","<script setup lang=\"ts\">\nimport { onBeforeUnmount, useAttrs, watch } from 'vue'\nimport { OptionalPortal, Progress, getDefaultZIndex } from '@mantine-vue/core'\nimport { nprogressStore, resetNavigationProgressAction, useNprogress } from '../../nprogress.store'\nimport type { NavigationProgressProps } from './NavigationProgress.types'\nimport classes from '../../NavigationProgress.module.css'\n\ndefineOptions({ name: 'NavigationProgress', inheritAttrs: false })\n\nconst props = withDefaults(defineProps<NavigationProgressProps>(), {\n store: () => nprogressStore,\n initialProgress: 0,\n size: 3,\n stepInterval: 500,\n withinPortal: true,\n zIndex: () => getDefaultZIndex('max'),\n})\nconst attrs = useAttrs()\nconst state = useNprogress(props.store)\n\nwatch(\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\nonBeforeUnmount(() => resetNavigationProgressAction(props.store))\n</script>\n\n<template>\n <OptionalPortal v-bind=\"props.portalProps\" :within-portal=\"props.withinPortal\">\n <Progress\n v-bind=\"attrs\"\n :radius=\"0\"\n :value=\"state.progress\"\n :size=\"props.size\"\n :color=\"props.color\"\n :class-names=\"classes\"\n :data-mounted=\"state.mounted || undefined\"\n :style=\"{ '--nprogress-z-index': props.zIndex?.toString() }\"\n />\n </OptionalPortal>\n</template>\n"],"mappings":"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"}
package/esm/index.mjs CHANGED
@@ -1,4 +1,4 @@
1
- import { defineComponent, h, onBeforeUnmount, watch } from "vue";
1
+ import { createBlock, createVNode, defineComponent, mergeProps, onBeforeUnmount, openBlock, unref, useAttrs, watch, withCtx } from "vue";
2
2
  import { OptionalPortal, Progress, getDefaultZIndex } from "@mantine-vue/core";
3
3
  import { createStore } from "@mantine-vue/store";
4
4
  //#region src/nprogress.store.ts
@@ -129,45 +129,27 @@ var NavigationProgress_module_default = {
129
129
  section: "_section_1o6fp_17"
130
130
  };
131
131
  //#endregion
132
- //#region src/NavigationProgress.ts
133
- var NavigationProgress = defineComponent({
132
+ //#region src/components/NavigationProgress/NavigationProgress.vue
133
+ var NavigationProgress_default = /* @__PURE__ */ defineComponent({
134
134
  name: "NavigationProgress",
135
135
  inheritAttrs: false,
136
+ __name: "NavigationProgress",
136
137
  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
- },
138
+ store: { default: () => nprogressStore },
139
+ initialProgress: { default: 0 },
140
+ color: {},
141
+ size: { default: 3 },
142
+ stepInterval: { default: 500 },
157
143
  withinPortal: {
158
144
  type: Boolean,
159
145
  default: true
160
146
  },
161
- portalProps: {
162
- type: Object,
163
- default: void 0
164
- },
165
- zIndex: {
166
- type: [Number, String],
167
- default: () => getDefaultZIndex("max")
168
- }
147
+ portalProps: {},
148
+ zIndex: { default: () => getDefaultZIndex("max") }
169
149
  },
170
- setup(props, { attrs }) {
150
+ setup(__props) {
151
+ const props = __props;
152
+ const attrs = useAttrs();
171
153
  const state = useNprogress(props.store);
172
154
  watch(() => [
173
155
  props.initialProgress,
@@ -181,22 +163,30 @@ var NavigationProgress = defineComponent({
181
163
  }));
182
164
  }, { immediate: true });
183
165
  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
- }));
166
+ return (_ctx, _cache) => {
167
+ return openBlock(), createBlock(unref(OptionalPortal), mergeProps(props.portalProps, { "within-portal": props.withinPortal }), {
168
+ default: withCtx(() => [createVNode(unref(Progress), mergeProps(unref(attrs), {
169
+ radius: 0,
170
+ value: unref(state).progress,
171
+ size: props.size,
172
+ color: props.color,
173
+ "class-names": unref(NavigationProgress_module_default),
174
+ "data-mounted": unref(state).mounted || void 0,
175
+ style: { "--nprogress-z-index": props.zIndex?.toString() }
176
+ }), null, 16, [
177
+ "value",
178
+ "size",
179
+ "color",
180
+ "class-names",
181
+ "data-mounted",
182
+ "style"
183
+ ])]),
184
+ _: 1
185
+ }, 16, ["within-portal"]);
186
+ };
197
187
  }
198
188
  });
199
189
  //#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 };
190
+ export { NavigationProgress_default as NavigationProgress, cleanupNavigationProgress, cleanupNavigationProgressAction, completeNavigationProgress, completeNavigationProgressAction, createNprogress, createNprogressStore, decrementNavigationProgress, decrementNavigationProgressAction, incrementNavigationProgress, incrementNavigationProgressAction, nprogress, nprogressStore, resetNavigationProgress, resetNavigationProgressAction, setNavigationProgress, setNavigationProgressAction, startNavigationProgress, startNavigationProgressAction, stopNavigationProgress, stopNavigationProgressAction, updateNavigationProgressStateAction, useNprogress };
201
191
 
202
192
  //# sourceMappingURL=index.mjs.map
package/esm/index.mjs.map CHANGED
@@ -1 +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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"}
1
+ {"version":3,"file":"index.mjs","names":[],"sources":["../src/nprogress.store.ts","../src/NavigationProgress.module.css","../src/components/NavigationProgress/NavigationProgress.vue","../src/components/NavigationProgress/NavigationProgress.vue"],"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","<script setup lang=\"ts\">\nimport { onBeforeUnmount, useAttrs, watch } from 'vue'\nimport { OptionalPortal, Progress, getDefaultZIndex } from '@mantine-vue/core'\nimport { nprogressStore, resetNavigationProgressAction, useNprogress } from '../../nprogress.store'\nimport type { NavigationProgressProps } from './NavigationProgress.types'\nimport classes from '../../NavigationProgress.module.css'\n\ndefineOptions({ name: 'NavigationProgress', inheritAttrs: false })\n\nconst props = withDefaults(defineProps<NavigationProgressProps>(), {\n store: () => nprogressStore,\n initialProgress: 0,\n size: 3,\n stepInterval: 500,\n withinPortal: true,\n zIndex: () => getDefaultZIndex('max'),\n})\nconst attrs = useAttrs()\nconst state = useNprogress(props.store)\n\nwatch(\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\nonBeforeUnmount(() => resetNavigationProgressAction(props.store))\n</script>\n\n<template>\n <OptionalPortal v-bind=\"props.portalProps\" :within-portal=\"props.withinPortal\">\n <Progress\n v-bind=\"attrs\"\n :radius=\"0\"\n :value=\"state.progress\"\n :size=\"props.size\"\n :color=\"props.color\"\n :class-names=\"classes\"\n :data-mounted=\"state.mounted || undefined\"\n :style=\"{ '--nprogress-z-index': props.zIndex?.toString() }\"\n />\n </OptionalPortal>\n</template>\n","<script setup lang=\"ts\">\nimport { onBeforeUnmount, useAttrs, watch } from 'vue'\nimport { OptionalPortal, Progress, getDefaultZIndex } from '@mantine-vue/core'\nimport { nprogressStore, resetNavigationProgressAction, useNprogress } from '../../nprogress.store'\nimport type { NavigationProgressProps } from './NavigationProgress.types'\nimport classes from '../../NavigationProgress.module.css'\n\ndefineOptions({ name: 'NavigationProgress', inheritAttrs: false })\n\nconst props = withDefaults(defineProps<NavigationProgressProps>(), {\n store: () => nprogressStore,\n initialProgress: 0,\n size: 3,\n stepInterval: 500,\n withinPortal: true,\n zIndex: () => getDefaultZIndex('max'),\n})\nconst attrs = useAttrs()\nconst state = useNprogress(props.store)\n\nwatch(\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\nonBeforeUnmount(() => resetNavigationProgressAction(props.store))\n</script>\n\n<template>\n <OptionalPortal v-bind=\"props.portalProps\" :within-portal=\"props.withinPortal\">\n <Progress\n v-bind=\"attrs\"\n :radius=\"0\"\n :value=\"state.progress\"\n :size=\"props.size\"\n :color=\"props.color\"\n :class-names=\"classes\"\n :data-mounted=\"state.mounted || undefined\"\n :style=\"{ '--nprogress-z-index': props.zIndex?.toString() }\"\n />\n </OptionalPortal>\n</template>\n"],"mappings":"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"}
package/lib/components/NavigationProgress/NavigationProgress.types.d.ts ADDED
@@ -0,0 +1,20 @@
1
+ import type { NprogressStore } from '../../nprogress.store';
2
+ /** Props accepted by `NavigationProgress`. */
3
+ export interface NavigationProgressProps {
4
+ /** Component store, controls state. */
5
+ store?: NprogressStore;
6
+ /** Initial progress value @default 0 */
7
+ initialProgress?: number;
8
+ /** Key of `theme.colors` or any other valid CSS color. @default theme.primaryColor */
9
+ color?: string;
10
+ /** Controls height of the progress bar. */
11
+ size?: number;
12
+ /** Step interval in ms. @default 500 */
13
+ stepInterval?: number;
14
+ /** Determines whether the progress bar should be rendered within `Portal`. @default true */
15
+ withinPortal?: boolean;
16
+ /** Props to pass down to the `Portal` when `withinPortal` is `true`. */
17
+ portalProps?: Record<string, any>;
18
+ /** Progressbar z-index. @default 9999 */
19
+ zIndex?: string | number;
20
+ }
package/lib/components/NavigationProgress/NavigationProgress.vue.d.ts ADDED
@@ -0,0 +1,4 @@
1
+ import type { NavigationProgressProps } from './NavigationProgress.types';
2
+ declare const __VLS_export: import("vue").DefineComponent<NavigationProgressProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<NavigationProgressProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
3
+ declare const _default: typeof __VLS_export;
4
+ export default _default;
package/lib/components/NavigationProgress/index.d.ts ADDED
@@ -0,0 +1,2 @@
1
+ export { default as NavigationProgress } from './NavigationProgress.vue';
2
+ export type { NavigationProgressProps } from './NavigationProgress.types';
package/lib/index.d.mts CHANGED
@@ -1,3 +1,3 @@
1
- export { NavigationProgress } from './NavigationProgress';
1
+ export { NavigationProgress } from './components/NavigationProgress';
2
2
  export * from './nprogress.store';
3
- export type { NavigationProgressProps } from './NavigationProgress';
3
+ export type { NavigationProgressProps } from './components/NavigationProgress';
package/lib/index.d.ts CHANGED
@@ -1,3 +1,3 @@
1
- export { NavigationProgress } from './NavigationProgress';
1
+ export { NavigationProgress } from './components/NavigationProgress';
2
2
  export * from './nprogress.store';
3
- export type { NavigationProgressProps } from './NavigationProgress';
3
+ export type { NavigationProgressProps } from './components/NavigationProgress';
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@mantine-vue/nprogress",
3
- "version": "3.0.0",
3
+ "version": "3.2.0",
4
4
  "description": "Vue navigation progress bar equivalent to @mantine/nprogress",
5
5
  "license": "MIT",
6
6
  "files": [
@@ -37,8 +37,8 @@
37
37
  "vue": "^3.5.0"
38
38
  },
39
39
  "peerDependencies": {
40
- "@mantine-vue/core": "3.0.0",
41
- "@mantine-vue/store": "3.0.0",
40
+ "@mantine-vue/core": "3.2.0",
41
+ "@mantine-vue/store": "3.2.0",
42
42
  "vue": "^3.5.0"
43
43
  }
44
44
  }
package/lib/NavigationProgress.d.ts DELETED
@@ -1,90 +0,0 @@
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>;