veload 0.0.0-stage → 0.1.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/LICENSE +21 -0
- package/README.md +138 -3
- package/dist/components/VLoader/index.vue.d.ts +12 -0
- package/dist/components/VLoader/loaders.d.ts +38 -0
- package/dist/components/VLoader/types.d.ts +28 -0
- package/dist/components/VLoading/index.vue.d.ts +21 -0
- package/dist/components/VLoading/types.d.ts +27 -0
- package/dist/components/VLoadingButton/index.vue.d.ts +21 -0
- package/dist/components/VLoadingButton/types.d.ts +29 -0
- package/dist/components/VPatternSkeleton/index.vue.d.ts +18 -0
- package/dist/components/VPatternSkeleton/presets.d.ts +26 -0
- package/dist/components/VPatternSkeleton/types.d.ts +48 -0
- package/dist/components/VProgress/index.vue.d.ts +10 -0
- package/dist/components/VProgress/types.d.ts +45 -0
- package/dist/components/VSkeleton/index.vue.d.ts +7 -0
- package/dist/components/VSkeleton/types.d.ts +37 -0
- package/dist/components/VSkeletonGroup/index.vue.d.ts +17 -0
- package/dist/components/VSkeletonGroup/types.d.ts +8 -0
- package/dist/components/VSkeletonSwitch/index.vue.d.ts +31 -0
- package/dist/components/VSkeletonSwitch/types.d.ts +5 -0
- package/dist/components/VSpinner/index.vue.d.ts +9 -0
- package/dist/components/VSpinner/types.d.ts +29 -0
- package/dist/composables/useDelayedLoading.d.ts +32 -0
- package/dist/composables/useLoading.d.ts +28 -0
- package/dist/composables/useLoadingGroup.d.ts +25 -0
- package/dist/index.cjs +1 -0
- package/dist/index.d.ts +24 -0
- package/dist/index.js +851 -0
- package/dist/style.css +2 -0
- package/dist/utils/css.d.ts +7 -0
- package/package.json +70 -6
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
export interface VSpinnerProps {
|
|
2
|
+
/**
|
|
3
|
+
* Diameter of the spinner in pixels. Non-finite and negative values are
|
|
4
|
+
* safely normalized.
|
|
5
|
+
*
|
|
6
|
+
* @default 24
|
|
7
|
+
*/
|
|
8
|
+
size?: number;
|
|
9
|
+
/**
|
|
10
|
+
* Accent color of the active edge. The remaining track uses
|
|
11
|
+
* `--v-spinner-track-color` (falling back to `currentColor`).
|
|
12
|
+
*
|
|
13
|
+
* @default "currentColor"
|
|
14
|
+
*/
|
|
15
|
+
color?: string;
|
|
16
|
+
/**
|
|
17
|
+
* Accessible name announced by the status element.
|
|
18
|
+
*
|
|
19
|
+
* @default "Loading"
|
|
20
|
+
*/
|
|
21
|
+
label?: string;
|
|
22
|
+
/**
|
|
23
|
+
* Hides the spinner from assistive technology. Use this when an ancestor
|
|
24
|
+
* already exposes a loading status, such as `VLoading`.
|
|
25
|
+
*
|
|
26
|
+
* @default false
|
|
27
|
+
*/
|
|
28
|
+
decorative?: boolean;
|
|
29
|
+
}
|
|
@@ -0,0 +1,32 @@
|
|
|
1
|
+
import type { UseLoadingReturn } from "./useLoading";
|
|
2
|
+
export interface UseDelayedLoadingOptions {
|
|
3
|
+
/**
|
|
4
|
+
* Delay in milliseconds before the loading indicator becomes visible.
|
|
5
|
+
* Negative values are treated as `0`; non-finite values use the default.
|
|
6
|
+
*
|
|
7
|
+
* @default 200
|
|
8
|
+
*/
|
|
9
|
+
delay?: number;
|
|
10
|
+
/**
|
|
11
|
+
* Minimum time in milliseconds the loading indicator remains visible once
|
|
12
|
+
* it has appeared. This prevents a brief flash when an operation finishes
|
|
13
|
+
* just after the delay. `0` disables the minimum.
|
|
14
|
+
*
|
|
15
|
+
* The minimum is measured from the moment the indicator becomes visible,
|
|
16
|
+
* not from the moment the operation starts.
|
|
17
|
+
*
|
|
18
|
+
* @default 0
|
|
19
|
+
*/
|
|
20
|
+
minVisibleDuration?: number;
|
|
21
|
+
}
|
|
22
|
+
export type UseDelayedLoadingReturn = UseLoadingReturn;
|
|
23
|
+
/**
|
|
24
|
+
* Tracks asynchronous operations like {@link useLoading}, but delays showing
|
|
25
|
+
* the loading indicator until the work has remained pending for `delay`
|
|
26
|
+
* milliseconds.
|
|
27
|
+
*
|
|
28
|
+
* The operation itself starts immediately. Once visible, the indicator can be
|
|
29
|
+
* kept on screen for at least `minVisibleDuration` milliseconds to avoid a
|
|
30
|
+
* short flash.
|
|
31
|
+
*/
|
|
32
|
+
export declare function useDelayedLoading(options?: UseDelayedLoadingOptions | number): UseDelayedLoadingReturn;
|
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
import { type Ref } from "vue";
|
|
2
|
+
/**
|
|
3
|
+
* Reactive state returned by {@link useLoading}.
|
|
4
|
+
*/
|
|
5
|
+
export interface UseLoadingReturn {
|
|
6
|
+
/**
|
|
7
|
+
* `true` while at least one tracked operation is pending.
|
|
8
|
+
*/
|
|
9
|
+
isLoading: Readonly<Ref<boolean>>;
|
|
10
|
+
/**
|
|
11
|
+
* Number of currently pending operations for this instance.
|
|
12
|
+
*/
|
|
13
|
+
pendingCount: Readonly<Ref<number>>;
|
|
14
|
+
/**
|
|
15
|
+
* Runs an asynchronous operation and tracks it until it settles.
|
|
16
|
+
*
|
|
17
|
+
* The operation's return value and rejection reason are preserved.
|
|
18
|
+
*/
|
|
19
|
+
execute: <T>(operation: () => Promise<T>) => Promise<T>;
|
|
20
|
+
}
|
|
21
|
+
/**
|
|
22
|
+
* Tracks concurrent asynchronous operations for a single loading state.
|
|
23
|
+
*
|
|
24
|
+
* Each call to `execute` increments the pending count before invoking the
|
|
25
|
+
* operation and decrements it in a `finally` block. The operation result or
|
|
26
|
+
* error is passed through unchanged.
|
|
27
|
+
*/
|
|
28
|
+
export declare function useLoading(): UseLoadingReturn;
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
import { type ComputedRef, type Ref } from "vue";
|
|
2
|
+
/**
|
|
3
|
+
* A reactive boolean source or a getter that returns one.
|
|
4
|
+
*
|
|
5
|
+
* Typically this is the `isLoading` ref from another composable instance.
|
|
6
|
+
*/
|
|
7
|
+
export type LoadingSource = Readonly<Ref<boolean>> | (() => boolean);
|
|
8
|
+
export interface UseLoadingGroupReturn {
|
|
9
|
+
/**
|
|
10
|
+
* `true` when at least one source is active.
|
|
11
|
+
*/
|
|
12
|
+
isLoading: ComputedRef<boolean>;
|
|
13
|
+
/**
|
|
14
|
+
* Number of sources that are currently active.
|
|
15
|
+
*/
|
|
16
|
+
activeCount: ComputedRef<number>;
|
|
17
|
+
}
|
|
18
|
+
/**
|
|
19
|
+
* Aggregates independent loading sources into a single loading state.
|
|
20
|
+
*
|
|
21
|
+
* Pass an array for a fixed set of sources, or a getter when the set of
|
|
22
|
+
* sources changes dynamically. The group does not own the sources; it only
|
|
23
|
+
* reads them.
|
|
24
|
+
*/
|
|
25
|
+
export declare function useLoadingGroup(sources: readonly LoadingSource[] | (() => readonly LoadingSource[])): UseLoadingGroupReturn;
|
package/dist/index.cjs
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});let e=require("vue");var t=(0,e.defineComponent)({__name:`index`,props:{size:{default:24},color:{default:`currentColor`},label:{default:`Loading`},decorative:{type:Boolean,default:!1}},setup(t){let n=t,r=(0,e.computed)(()=>Number.isFinite(n.size)?Math.max(0,n.size):24),i=(0,e.computed)(()=>{let e=typeof n.color==`string`?n.color.trim():``;return e.length>0?e:`currentColor`}),a=(0,e.computed)(()=>typeof n.label==`string`?n.label.trim():``),o=(0,e.computed)(()=>n.decorative||a.value.length===0),s=(0,e.computed)(()=>o.value?{"aria-hidden":`true`}:{role:`status`,"aria-label":a.value});return(t,n)=>((0,e.openBlock)(),(0,e.createElementBlock)(`span`,(0,e.mergeProps)({class:`v-spinner`},s.value),[(0,e.createElementVNode)(`span`,{class:`v-spinner__indicator`,"aria-hidden":`true`,style:(0,e.normalizeStyle)({width:`${r.value}px`,height:`${r.value}px`,borderTopColor:i.value})},null,4)],16))}}),n=(e,t)=>{let n=e.__vccOpts||e;for(let[e,r]of t)n[e]=r;return n},r=n(t,[[`__scopeId`,`data-v-b967b6f4`]]);function i(e,t){if(typeof e==`number`)return Number.isFinite(e)?`${Math.max(0,e)}px`:t;if(typeof e==`string`){let n=e.trim();return n.length>0?n:t}return t}var a=n((0,e.defineComponent)({__name:`index`,props:{variant:{default:`text`},width:{},height:{},borderRadius:{},animated:{type:Boolean,default:!0},label:{}},setup(t){let n=t,r=(0,e.computed)(()=>{let e=n.variant;return e===`rect`||e===`circle`?e:`text`}),a=(0,e.computed)(()=>i(n.width,r.value===`circle`?`40px`:`100%`)),o=(0,e.computed)(()=>{if(n.height!==void 0)return i(n.height,r.value===`text`?`1em`:`6rem`);if(r.value!==`circle`)return r.value===`text`?`1em`:`6rem`}),s=(0,e.computed)(()=>{if(n.borderRadius===void 0)return;if(typeof n.borderRadius==`number`)return Number.isFinite(n.borderRadius)?`${Math.max(0,n.borderRadius)}px`:void 0;let e=n.borderRadius.trim();return e.length>0?e:void 0}),c=(0,e.computed)(()=>({width:a.value,height:o.value,borderRadius:s.value,aspectRatio:r.value===`circle`&&n.height===void 0?`1 / 1`:void 0})),l=(0,e.computed)(()=>typeof n.label==`string`?n.label.trim():``),u=(0,e.computed)(()=>l.value.length>0?{role:`status`,"aria-label":l.value,"aria-busy":`true`}:{"aria-hidden":`true`});return(n,i)=>((0,e.openBlock)(),(0,e.createElementBlock)(`span`,(0,e.mergeProps)({class:[`v-skeleton`,[`v-skeleton--${r.value}`,{"v-skeleton--animated":t.animated}]],style:c.value},u.value),null,16))}}),[[`__scopeId`,`data-v-9a8cf481`]]),o=[`aria-label`,`aria-valuemin`,`aria-valuemax`,`aria-valuenow`,`aria-valuetext`],s=n((0,e.defineComponent)({__name:`index`,props:{value:{default:null},min:{default:0},max:{default:100},label:{default:`Progress`},valueText:{},height:{default:8},color:{},trackColor:{}},setup(t){let n=t;function r(e){if(typeof e!=`string`)return;let t=e.trim();return t.length>0?t:void 0}let a=(0,e.computed)(()=>Number.isFinite(n.min)&&Number.isFinite(n.max)&&n.max>n.min),s=(0,e.computed)(()=>a.value?n.min:0),c=(0,e.computed)(()=>a.value?n.max:100),l=(0,e.computed)(()=>typeof n.value==`number`&&Number.isFinite(n.value)&&a.value),u=(0,e.computed)(()=>!l.value||typeof n.value!=`number`?s.value:Math.min(c.value,Math.max(s.value,n.value))),d=(0,e.computed)(()=>{if(!l.value)return 0;let e=c.value-s.value;return(u.value-s.value)/e*100}),f=(0,e.computed)(()=>typeof n.label==`string`?n.label.trim():``),p=(0,e.computed)(()=>{if(!l.value)return;let e=typeof n.valueText==`string`?n.valueText.trim():``;return e.length>0?e:void 0}),m=(0,e.computed)(()=>({height:i(n.height,`8px`),backgroundColor:r(n.trackColor)})),h=(0,e.computed)(()=>({width:l.value?`${d.value}%`:void 0,backgroundColor:r(n.color)}));return(t,n)=>((0,e.openBlock)(),(0,e.createElementBlock)(`div`,{class:(0,e.normalizeClass)([`v-progress`,{"v-progress--indeterminate":!l.value,"v-progress--determinate":l.value}]),role:`progressbar`,"aria-label":f.value.length>0?f.value:void 0,"aria-valuemin":l.value?s.value:void 0,"aria-valuemax":l.value?c.value:void 0,"aria-valuenow":l.value?u.value:void 0,"aria-valuetext":p.value,style:(0,e.normalizeStyle)(m.value)},[(0,e.createElementVNode)(`div`,{class:`v-progress__bar`,"aria-hidden":`true`,style:(0,e.normalizeStyle)(h.value)},null,4)],14,o))}}),[[`__scopeId`,`data-v-8a7154ed`]]),c=[`aria-busy`],l=[`inert`],u={key:0,class:`v-loading__label`},d=n((0,e.defineComponent)({__name:`index`,props:{loading:{type:Boolean,default:!1},label:{default:`Loading`},inertContent:{type:Boolean,default:!0},indicatorSize:{default:28}},setup(t){let n=t,i=(0,e.computed)(()=>typeof n.label==`string`?n.label.trim():``),a=(0,e.computed)(()=>Number.isFinite(n.indicatorSize)?Math.max(0,n.indicatorSize):28),o=(0,e.computed)(()=>n.loading&&n.inertContent),s=(0,e.computed)(()=>i.value.length>0?{role:`status`}:{"aria-hidden":`true`});return(n,d)=>((0,e.openBlock)(),(0,e.createElementBlock)(`div`,{class:(0,e.normalizeClass)([`v-loading`,{"v-loading--active":t.loading,"v-loading--blocking":o.value}]),"aria-busy":t.loading?`true`:void 0},[(0,e.createElementVNode)(`div`,{class:`v-loading__content`,inert:o.value||void 0},[(0,e.renderSlot)(n.$slots,`default`,{},void 0,!0)],8,l),t.loading?((0,e.openBlock)(),(0,e.createElementBlock)(`div`,(0,e.mergeProps)({key:0,class:`v-loading__overlay`},s.value),[(0,e.renderSlot)(n.$slots,`indicator`,{},()=>[(0,e.createVNode)(r,{size:a.value,decorative:``},null,8,[`size`])],!0),i.value.length>0?((0,e.openBlock)(),(0,e.createElementBlock)(`span`,u,(0,e.toDisplayString)(i.value),1)):(0,e.createCommentVNode)(``,!0)],16)):(0,e.createCommentVNode)(``,!0)],10,c))}}),[[`__scopeId`,`data-v-ac332306`]]),f=[`type`,`disabled`,`aria-busy`],p={key:0,class:`v-loading-button__indicator`,"aria-hidden":`true`},m=n((0,e.defineComponent)({__name:`index`,props:{loading:{type:Boolean,default:!1},disabled:{type:Boolean,default:!1},type:{default:`button`},indicatorSize:{default:16}},setup(t){let n=t,i=(0,e.computed)(()=>n.disabled||n.loading),a=(0,e.computed)(()=>{let e=n.type;return e===`submit`||e===`reset`?e:`button`}),o=(0,e.computed)(()=>Number.isFinite(n.indicatorSize)?Math.max(0,n.indicatorSize):16);return(n,s)=>((0,e.openBlock)(),(0,e.createElementBlock)(`button`,{class:(0,e.normalizeClass)([`v-loading-button`,{"v-loading-button--loading":t.loading}]),type:a.value,disabled:i.value,"aria-busy":t.loading?`true`:void 0},[(0,e.createElementVNode)(`span`,{class:(0,e.normalizeClass)([`v-loading-button__content`,{"v-loading-button__content--hidden":t.loading}])},[(0,e.renderSlot)(n.$slots,`default`,{},void 0,!0)],2),t.loading?((0,e.openBlock)(),(0,e.createElementBlock)(`span`,p,[(0,e.renderSlot)(n.$slots,`indicator`,{},()=>[(0,e.createVNode)(r,{size:o.value,decorative:``},null,8,[`size`])],!0)])):(0,e.createCommentVNode)(``,!0)],10,f))}}),[[`__scopeId`,`data-v-323480f1`]]),h=`bars.blob.bounce.breathing.card-flip.dot-sweep.dots.dual-arc.element.equalizer.fallback.flow.gradient-ring.grid.hashtag.heatmap.liquid.logo-spin.morph.orbit-dots.orbit.plane.progress-ring.pulse.ring.ripple.rotate.signal.sliding-bars.snake.spin-dots.spin.squares.stair.typing.wave`.split(`.`),g={class:`v-loader__visual`,"aria-hidden":`true`},_={key:0,class:`v-loader__value`},v=n((0,e.defineComponent)({__name:`index`,props:{variant:{default:`spin`},color:{default:`currentColor`},size:{default:40},duration:{default:1e3},label:{default:`Loading`},decorative:{type:Boolean,default:!1},count:{},value:{default:null}},setup(t){let n=t,r={breathing:2,"dual-arc":2},i={grid:4,heatmap:9,squares:9};function a(e,t=``){return typeof e==`string`&&e.trim().length>0?e.trim():t}function o(e,t,n,r){if(typeof e!=`number`||!Number.isFinite(e))return t;let i=Math.max(n,e);return r===void 0?i:Math.min(r,i)}let s=(0,e.computed)(()=>{let e=typeof n.variant==`string`?n.variant:``;return h.find(t=>t===e)??`spin`}),c=(0,e.computed)(()=>o(n.size,40,12)),l=(0,e.computed)(()=>o(n.duration,1e3,100)),u=(0,e.computed)(()=>r[s.value]??Math.round(o(n.count,i[s.value]??4,1,12))),d=(0,e.computed)(()=>a(n.color,`currentColor`)),f=(0,e.computed)(()=>a(n.label)),p=(0,e.computed)(()=>!!n.decorative||f.value.length===0),m=(0,e.computed)(()=>typeof n.value==`number`&&Number.isFinite(n.value)?Math.min(100,Math.max(0,n.value)):null),v=(0,e.computed)(()=>p.value?{"aria-hidden":`true`}:{role:`status`,"aria-label":f.value}),y=(0,e.computed)(()=>({"--vl-size":`${c.value}px`,"--vl-color":d.value,"--vl-duration":`${l.value}ms`,"--vl-value":`${m.value??72}%`,"--vl-total":String(u.value)})),b=(0,e.computed)(()=>Array.from({length:u.value}));return(t,n)=>((0,e.openBlock)(),(0,e.createElementBlock)(`span`,(0,e.mergeProps)({class:[`v-loader`,`v-loader--${s.value}`],style:y.value},v.value),[(0,e.createElementVNode)(`span`,g,[((0,e.openBlock)(!0),(0,e.createElementBlock)(e.Fragment,null,(0,e.renderList)(b.value,(t,n)=>((0,e.openBlock)(),(0,e.createElementBlock)(`span`,{key:n,class:`v-loader__mark`,style:(0,e.normalizeStyle)({"--vl-index":n})},null,4))),128)),s.value===`progress-ring`&&m.value!==null?((0,e.openBlock)(),(0,e.createElementBlock)(`span`,_,(0,e.toDisplayString)(Math.round(m.value))+`%`,1)):(0,e.createCommentVNode)(``,!0)])],16))}}),[[`__scopeId`,`data-v-f38f76f8`]]);function y(t,n){return(0,e.defineComponent)({name:t,inheritAttrs:!1,setup(t,{attrs:r,slots:i}){return()=>(0,e.h)(v,{...r,variant:n},i)}})}var b=y(`VBarsLoader`,`bars`),ee=y(`VBlobLoader`,`blob`),te=y(`VBounceLoader`,`bounce`),ne=y(`VBreathingLoader`,`breathing`),re=y(`VCardFlipLoader`,`card-flip`),ie=y(`VDotSweepLoader`,`dot-sweep`),x=y(`VDotsLoader`,`dots`),S=y(`VDualArcLoader`,`dual-arc`),C=y(`VElementLoader`,`element`),w=y(`VEqualizerLoader`,`equalizer`),T=y(`VFallbackLoader`,`fallback`),E=y(`VFlowLoader`,`flow`),D=y(`VGradientRingLoader`,`gradient-ring`),O=y(`VGridLoader`,`grid`),k=y(`VHashtagLoader`,`hashtag`),A=y(`VHeatmapLoader`,`heatmap`),j=y(`VLiquidLoader`,`liquid`),M=y(`VLogoSpinLoader`,`logo-spin`),N=y(`VMorphLoader`,`morph`),P=y(`VOrbitDotsLoader`,`orbit-dots`),F=y(`VOrbitLoader`,`orbit`),I=y(`VPlaneLoader`,`plane`),L=y(`VProgressRingLoader`,`progress-ring`),R=y(`VPulseLoader`,`pulse`),z=y(`VRingLoader`,`ring`),B=y(`VRippleLoader`,`ripple`),V=y(`VRotateLoader`,`rotate`),H=y(`VSignalLoader`,`signal`),U=y(`VSlidingBarsLoader`,`sliding-bars`),W=y(`VSnakeLoader`,`snake`),G=y(`VSpinDotsLoader`,`spin-dots`),K=y(`VSpinLoader`,`spin`),q=y(`VSquaresLoader`,`squares`),J=y(`VStairLoader`,`stair`),ae=y(`VTypingLoader`,`typing`),oe=y(`VWaveLoader`,`wave`),se={class:`v-pattern-skeleton__body`},ce={key:1,class:`v-pattern-skeleton__stats`},le={class:`v-pattern-skeleton__body`},ue={class:`v-pattern-skeleton__body`},de={key:1,class:`v-pattern-skeleton__inline`},fe={key:0,class:`v-pattern-skeleton__stats`},pe={class:`v-pattern-skeleton__body`},Y=n((0,e.defineComponent)({__name:`index`,props:{pattern:{default:`lines`},rows:{default:3},columns:{default:3},mediaHeight:{},avatarSize:{},showMedia:{type:Boolean,default:!0},showAvatar:{type:Boolean,default:!0},showHeader:{type:Boolean,default:!0},showChart:{type:Boolean,default:!0},showStats:{type:Boolean,default:!0},showSubmit:{type:Boolean,default:!0},showRating:{type:Boolean,default:!0},showPrice:{type:Boolean,default:!0},showCta:{type:Boolean,default:!0},color:{},highlightColor:{},animated:{type:Boolean,default:!0},label:{}},setup(t){let n=t,r=[`lines`,`article`,`card`,`profile`,`list`,`table`,`media`,`form`,`dashboard`,`feed`,`product`];function i(e,t,n=12){return typeof e==`number`&&Number.isFinite(e)?Math.min(n,Math.max(1,Math.round(e))):t}function o(e){return typeof e==`string`&&e.trim()?e.trim():void 0}let s=(0,e.computed)(()=>r.includes(n.pattern)?n.pattern:`lines`),c=(0,e.computed)(()=>i(n.rows,3)),l=(0,e.computed)(()=>i(n.columns,3,6)),u=(0,e.computed)(()=>i(n.avatarSize,48,160)),d=(0,e.computed)(()=>o(n.label)??``),f=(0,e.computed)(()=>d.value?{role:`status`,"aria-label":d.value,"aria-busy":`true`}:{"aria-hidden":`true`}),p=(0,e.computed)(()=>({"--v-skeleton-base-color":o(n.color),"--v-skeleton-highlight-color":o(n.highlightColor)})),m=(0,e.computed)(()=>({gridTemplateColumns:`repeat(${l.value}, minmax(0, 1fr))`}));return(n,r)=>((0,e.openBlock)(),(0,e.createElementBlock)(`div`,(0,e.mergeProps)({class:[`v-pattern-skeleton`,`v-pattern-skeleton--${s.value}`],style:p.value},f.value),[s.value===`profile`?((0,e.openBlock)(),(0,e.createElementBlock)(e.Fragment,{key:0},[t.showAvatar?((0,e.openBlock)(),(0,e.createBlock)(a,{key:0,variant:`circle`,animated:t.animated,width:u.value},null,8,[`animated`,`width`])):(0,e.createCommentVNode)(``,!0),(0,e.createElementVNode)(`div`,se,[(0,e.createVNode)(a,{animated:t.animated,width:`42%`,height:`1rem`},null,8,[`animated`]),(0,e.createVNode)(a,{animated:t.animated,width:`64%`,height:`.75rem`},null,8,[`animated`]),((0,e.openBlock)(!0),(0,e.createElementBlock)(e.Fragment,null,(0,e.renderList)(c.value,n=>((0,e.openBlock)(),(0,e.createBlock)(a,{key:n,animated:t.animated,width:n===c.value?`62%`:`100%`,height:`.7rem`},null,8,[`animated`,`width`]))),128))]),t.showStats?((0,e.openBlock)(),(0,e.createElementBlock)(`div`,ce,[((0,e.openBlock)(),(0,e.createElementBlock)(e.Fragment,null,(0,e.renderList)(3,n=>(0,e.createVNode)(a,{key:n,variant:`rect`,animated:t.animated,height:`2.5rem`},null,8,[`animated`])),64))])):(0,e.createCommentVNode)(``,!0)],64)):s.value===`feed`?((0,e.openBlock)(!0),(0,e.createElementBlock)(e.Fragment,{key:1},(0,e.renderList)(c.value,n=>((0,e.openBlock)(),(0,e.createElementBlock)(`div`,{key:n,class:`v-pattern-skeleton__feed-item`},[t.showAvatar?((0,e.openBlock)(),(0,e.createBlock)(a,{key:0,variant:`circle`,animated:t.animated,width:u.value},null,8,[`animated`,`width`])):(0,e.createCommentVNode)(``,!0),(0,e.createElementVNode)(`div`,le,[(0,e.createVNode)(a,{animated:t.animated,width:`40%`,height:`.85rem`},null,8,[`animated`]),(0,e.createVNode)(a,{animated:t.animated,width:`100%`,height:`.75rem`},null,8,[`animated`]),(0,e.createVNode)(a,{animated:t.animated,width:`72%`,height:`.75rem`},null,8,[`animated`])])]))),128)):s.value===`media`?((0,e.openBlock)(),(0,e.createElementBlock)(e.Fragment,{key:2},[(0,e.createVNode)(a,{variant:`rect`,animated:t.animated,width:t.mediaHeight?t.mediaHeight:`7.5rem`,height:`5.5rem`},null,8,[`animated`,`width`]),(0,e.createElementVNode)(`div`,ue,[(0,e.createVNode)(a,{animated:t.animated,width:`36%`,height:`.7rem`},null,8,[`animated`]),(0,e.createVNode)(a,{animated:t.animated,width:`100%`,height:`1rem`},null,8,[`animated`]),((0,e.openBlock)(!0),(0,e.createElementBlock)(e.Fragment,null,(0,e.renderList)(c.value,n=>((0,e.openBlock)(),(0,e.createBlock)(a,{key:n,animated:t.animated,width:n===c.value?`62%`:`86%`,height:`.7rem`},null,8,[`animated`,`width`]))),128))])],64)):s.value===`product`?((0,e.openBlock)(),(0,e.createElementBlock)(e.Fragment,{key:3},[(0,e.createVNode)(a,{variant:`rect`,animated:t.animated,width:`100%`,height:t.mediaHeight??`10rem`},null,8,[`animated`,`height`]),(0,e.createVNode)(a,{animated:t.animated,width:`74%`,height:`1rem`},null,8,[`animated`]),t.showRating?((0,e.openBlock)(),(0,e.createBlock)(a,{key:0,variant:`rect`,animated:t.animated,width:`4.5rem`,height:`1.25rem`},null,8,[`animated`])):(0,e.createCommentVNode)(``,!0),t.showPrice?((0,e.openBlock)(),(0,e.createBlock)(a,{key:1,animated:t.animated,width:`35%`,height:`1.15rem`},null,8,[`animated`])):(0,e.createCommentVNode)(``,!0),t.showCta?((0,e.openBlock)(),(0,e.createBlock)(a,{key:2,variant:`rect`,animated:t.animated,width:`46%`,height:`2.25rem`},null,8,[`animated`])):(0,e.createCommentVNode)(``,!0)],64)):s.value===`card`?((0,e.openBlock)(),(0,e.createElementBlock)(e.Fragment,{key:4},[t.showMedia?((0,e.openBlock)(),(0,e.createBlock)(a,{key:0,variant:`rect`,animated:t.animated,width:`100%`,height:t.mediaHeight??`6rem`},null,8,[`animated`,`height`])):(0,e.createCommentVNode)(``,!0),t.showAvatar?((0,e.openBlock)(),(0,e.createElementBlock)(`div`,de,[(0,e.createVNode)(a,{variant:`circle`,animated:t.animated,width:u.value},null,8,[`animated`,`width`]),(0,e.createVNode)(a,{animated:t.animated,width:`45%`,height:`.8rem`},null,8,[`animated`])])):(0,e.createCommentVNode)(``,!0),((0,e.openBlock)(!0),(0,e.createElementBlock)(e.Fragment,null,(0,e.renderList)(c.value,n=>((0,e.openBlock)(),(0,e.createBlock)(a,{key:n,animated:t.animated,width:n===c.value?`72%`:`100%`,height:`.75rem`},null,8,[`animated`,`width`]))),128))],64)):s.value===`table`?((0,e.openBlock)(),(0,e.createElementBlock)(e.Fragment,{key:5},[t.showHeader?((0,e.openBlock)(),(0,e.createElementBlock)(`div`,{key:0,class:`v-pattern-skeleton__table-row v-pattern-skeleton__table-header`,style:(0,e.normalizeStyle)(m.value)},[((0,e.openBlock)(!0),(0,e.createElementBlock)(e.Fragment,null,(0,e.renderList)(l.value,n=>((0,e.openBlock)(),(0,e.createBlock)(a,{key:n,animated:t.animated,height:`.9rem`},null,8,[`animated`]))),128))],4)):(0,e.createCommentVNode)(``,!0),((0,e.openBlock)(!0),(0,e.createElementBlock)(e.Fragment,null,(0,e.renderList)(c.value,n=>((0,e.openBlock)(),(0,e.createElementBlock)(`div`,{key:n,class:`v-pattern-skeleton__table-row v-pattern-skeleton__data-row`,style:(0,e.normalizeStyle)(m.value)},[((0,e.openBlock)(!0),(0,e.createElementBlock)(e.Fragment,null,(0,e.renderList)(l.value,n=>((0,e.openBlock)(),(0,e.createBlock)(a,{key:n,animated:t.animated,height:`.75rem`},null,8,[`animated`]))),128))],4))),128))],64)):s.value===`dashboard`?((0,e.openBlock)(),(0,e.createElementBlock)(e.Fragment,{key:6},[t.showStats?((0,e.openBlock)(),(0,e.createElementBlock)(`div`,fe,[((0,e.openBlock)(!0),(0,e.createElementBlock)(e.Fragment,null,(0,e.renderList)(l.value,n=>((0,e.openBlock)(),(0,e.createBlock)(a,{key:n,variant:`rect`,animated:t.animated,height:`4.5rem`},null,8,[`animated`]))),128))])):(0,e.createCommentVNode)(``,!0),t.showChart?((0,e.openBlock)(),(0,e.createBlock)(a,{key:1,variant:`rect`,animated:t.animated,width:`100%`,height:t.mediaHeight??`9rem`},null,8,[`animated`,`height`])):(0,e.createCommentVNode)(``,!0),(0,e.createElementVNode)(`div`,{class:`v-pattern-skeleton__table-row v-pattern-skeleton__table-header`,style:(0,e.normalizeStyle)(m.value)},[((0,e.openBlock)(!0),(0,e.createElementBlock)(e.Fragment,null,(0,e.renderList)(l.value,n=>((0,e.openBlock)(),(0,e.createBlock)(a,{key:n,animated:t.animated,height:`.7rem`},null,8,[`animated`]))),128))],4),((0,e.openBlock)(!0),(0,e.createElementBlock)(e.Fragment,null,(0,e.renderList)(c.value,n=>((0,e.openBlock)(),(0,e.createElementBlock)(`div`,{key:n,class:`v-pattern-skeleton__table-row v-pattern-skeleton__data-row`,style:(0,e.normalizeStyle)(m.value)},[((0,e.openBlock)(!0),(0,e.createElementBlock)(e.Fragment,null,(0,e.renderList)(l.value,n=>((0,e.openBlock)(),(0,e.createBlock)(a,{key:n,animated:t.animated,height:`.65rem`},null,8,[`animated`]))),128))],4))),128))],64)):s.value===`form`?((0,e.openBlock)(),(0,e.createElementBlock)(e.Fragment,{key:7},[((0,e.openBlock)(!0),(0,e.createElementBlock)(e.Fragment,null,(0,e.renderList)(c.value,n=>((0,e.openBlock)(),(0,e.createElementBlock)(`div`,{key:n,class:`v-pattern-skeleton__field`},[(0,e.createVNode)(a,{animated:t.animated,width:`30%`,height:`.7rem`},null,8,[`animated`]),(0,e.createVNode)(a,{variant:`rect`,animated:t.animated,width:`100%`,height:`2.5rem`},null,8,[`animated`])]))),128)),t.showSubmit?((0,e.openBlock)(),(0,e.createBlock)(a,{key:0,variant:`rect`,animated:t.animated,width:`8rem`,height:`2.5rem`},null,8,[`animated`])):(0,e.createCommentVNode)(``,!0)],64)):s.value===`list`?((0,e.openBlock)(!0),(0,e.createElementBlock)(e.Fragment,{key:8},(0,e.renderList)(c.value,n=>((0,e.openBlock)(),(0,e.createElementBlock)(`div`,{key:n,class:`v-pattern-skeleton__feed-item`},[t.showAvatar?((0,e.openBlock)(),(0,e.createBlock)(a,{key:0,variant:`circle`,animated:t.animated,width:u.value},null,8,[`animated`,`width`])):(0,e.createCommentVNode)(``,!0),(0,e.createElementVNode)(`div`,pe,[(0,e.createVNode)(a,{animated:t.animated,width:`76%`,height:`.85rem`},null,8,[`animated`]),(0,e.createVNode)(a,{animated:t.animated,width:`54%`,height:`.7rem`},null,8,[`animated`])])]))),128)):((0,e.openBlock)(),(0,e.createElementBlock)(e.Fragment,{key:9},[s.value===`article`&&t.showMedia?((0,e.openBlock)(),(0,e.createBlock)(a,{key:0,variant:`rect`,animated:t.animated,width:`100%`,height:t.mediaHeight??`10rem`},null,8,[`animated`,`height`])):(0,e.createCommentVNode)(``,!0),s.value===`article`?((0,e.openBlock)(),(0,e.createBlock)(a,{key:1,animated:t.animated,width:`72%`,height:`1.35rem`},null,8,[`animated`])):(0,e.createCommentVNode)(``,!0),((0,e.openBlock)(!0),(0,e.createElementBlock)(e.Fragment,null,(0,e.renderList)(c.value,n=>((0,e.openBlock)(),(0,e.createBlock)(a,{key:n,animated:t.animated,width:n===c.value?`62%`:`100%`,height:`.8rem`},null,8,[`animated`,`width`]))),128))],64))],16))}}),[[`__scopeId`,`data-v-e1a021e1`]]),me=n((0,e.defineComponent)({__name:`index`,props:{label:{},gap:{default:`0.75rem`},decorative:{type:Boolean,default:!1}},setup(t){let n=t,r=(0,e.computed)(()=>typeof n.label==`string`?n.label.trim():``),i=(0,e.computed)(()=>n.decorative?{"aria-hidden":`true`}:r.value?{role:`status`,"aria-label":r.value,"aria-busy":`true`}:{});return(n,r)=>((0,e.openBlock)(),(0,e.createElementBlock)(`div`,(0,e.mergeProps)({class:`v-skeleton-group`,style:{gap:t.gap}},i.value),[(0,e.renderSlot)(n.$slots,`default`,{},void 0,!0)],16))}}),[[`__scopeId`,`data-v-6a86d8c9`]]),X=(0,e.defineComponent)({__name:`index`,props:{loading:{type:Boolean,default:!0},pattern:{default:`lines`},rows:{default:3},columns:{},mediaHeight:{},avatarSize:{},showMedia:{type:Boolean,default:!0},showAvatar:{type:Boolean,default:!0},showHeader:{type:Boolean,default:!0},showChart:{type:Boolean,default:!0},showStats:{type:Boolean,default:!0},showSubmit:{type:Boolean,default:!0},showRating:{type:Boolean,default:!0},showPrice:{type:Boolean,default:!0},showCta:{type:Boolean,default:!0},color:{},highlightColor:{},animated:{type:Boolean,default:!0},label:{default:`Loading content`}},setup(t){let n=t,r=(0,e.computed)(()=>({pattern:n.pattern,rows:n.rows,columns:n.columns,color:n.color,highlightColor:n.highlightColor,animated:n.animated,label:n.label,mediaHeight:n.mediaHeight,avatarSize:n.avatarSize,showMedia:n.showMedia,showAvatar:n.showAvatar,showHeader:n.showHeader,showChart:n.showChart,showStats:n.showStats,showSubmit:n.showSubmit,showRating:n.showRating,showPrice:n.showPrice,showCta:n.showCta}));return(n,i)=>t.loading?(0,e.renderSlot)(n.$slots,`skeleton`,{},()=>[(0,e.createVNode)(Y,(0,e.normalizeProps)((0,e.guardReactiveProps)(r.value)),null,16)],void 0,1):(0,e.renderSlot)(n.$slots,`default`,{},void 0,void 0,0)}}),he=a;function Z(t,n){return(0,e.defineComponent)({name:t,inheritAttrs:!1,setup(t,{attrs:r}){return()=>(0,e.h)(Y,{...r,pattern:n})}})}var ge=Z(`VArticleSkeleton`,`article`),_e=Z(`VCardSkeleton`,`card`),ve=Z(`VDashboardSkeleton`,`dashboard`),ye=Z(`VFeedSkeleton`,`feed`),be=Z(`VFormSkeleton`,`form`),xe=Z(`VListSkeleton`,`list`),Q=Z(`VMediaCardSkeleton`,`media`),Se=Z(`VProductCardSkeleton`,`product`),Ce=Z(`VProfileSkeleton`,`profile`),we=Z(`VTableSkeleton`,`table`),Te=(0,e.defineComponent)({name:`VAutoSkeleton`,inheritAttrs:!1,props:[`loading`,`pattern`,`rows`,`columns`,`color`,`highlightColor`,`animated`,`label`,`mediaHeight`,`avatarSize`,`showMedia`,`showAvatar`,`showHeader`,`showChart`,`showStats`,`showSubmit`,`showRating`,`showPrice`,`showCta`],setup(t,{attrs:n,slots:r}){return()=>(0,e.h)(X,{...n,...t},r)}});function Ee(){let t=(0,e.ref)(0),n=(0,e.computed)(()=>t.value>0),r=(0,e.readonly)(t);async function i(e){t.value++;try{return await e()}finally{t.value=Math.max(0,t.value-1)}}return{isLoading:n,pendingCount:r,execute:i}}var De=200;function $(e,t){return e===void 0||!Number.isFinite(e)?t:Math.max(0,e)}function Oe(t){let n=typeof t==`number`?t:t?.delay,r=typeof t==`number`?0:t?.minVisibleDuration,i=$(n,De),a=$(r,0),o=(0,e.ref)(0),s=(0,e.ref)(!1),c=(0,e.readonly)(s),l=(0,e.readonly)(o),u=null,d=null,f=null,p=!1;function m(){u!==null&&(clearTimeout(u),u=null)}function h(){d!==null&&(clearTimeout(d),d=null)}function g(){s.value=!0,f=Date.now()}function _(){p||s.value||u!==null||o.value===0||(i<=0?g():u=setTimeout(()=>{u=null,!p&&o.value>0&&g()},i))}function v(){if(m(),h(),!s.value){f=null;return}if(a<=0||f===null){s.value=!1,f=null;return}let e=a-(Date.now()-f);e<=0?(s.value=!1,f=null):d=setTimeout(()=>{d=null,!p&&o.value===0&&(s.value=!1,f=null)},e)}(0,e.getCurrentScope)()&&(0,e.onScopeDispose)(()=>{p=!0,m(),h(),s.value=!1,f=null});async function y(e){o.value++,h(),_();try{return await e()}finally{o.value=Math.max(0,o.value-1),o.value===0&&v()}}return{isLoading:c,pendingCount:l,execute:y}}function ke(t){let n=typeof t==`function`?t:()=>t,r=(0,e.computed)(()=>{let e=0;for(let t of n())(typeof t==`function`?t():t.value)&&e++;return e});return{isLoading:(0,e.computed)(()=>r.value>0),activeCount:r}}exports.VArticleSkeleton=ge,exports.VAutoSkeleton=Te,exports.VBarsLoader=b,exports.VBlobLoader=ee,exports.VBounceLoader=te,exports.VBreathingLoader=ne,exports.VCardFlipLoader=re,exports.VCardSkeleton=_e,exports.VDashboardSkeleton=ve,exports.VDotSweepLoader=ie,exports.VDotsLoader=x,exports.VDualArcLoader=S,exports.VElementLoader=C,exports.VEqualizerLoader=w,exports.VFallbackLoader=T,exports.VFeedSkeleton=ye,exports.VFlowLoader=E,exports.VFormSkeleton=be,exports.VGradientRingLoader=D,exports.VGridLoader=O,exports.VHashtagLoader=k,exports.VHeatmapLoader=A,exports.VLiquidLoader=j,exports.VListSkeleton=xe,exports.VLoader=v,exports.VLoading=d,exports.VLoadingButton=m,exports.VLogoSpinLoader=M,exports.VMediaCardSkeleton=Q,exports.VMorphLoader=N,exports.VOrbitDotsLoader=P,exports.VOrbitLoader=F,exports.VPatternSkeleton=Y,exports.VPlaneLoader=I,exports.VProductCardSkeleton=Se,exports.VProfileSkeleton=Ce,exports.VProgress=s,exports.VProgressRingLoader=L,exports.VPulseLoader=R,exports.VRingLoader=z,exports.VRippleLoader=B,exports.VRotateLoader=V,exports.VSignalLoader=H,exports.VSkeleton=a,exports.VSkeletonGroup=me,exports.VSkeletonLoader=he,exports.VSkeletonSwitch=X,exports.VSlidingBarsLoader=U,exports.VSnakeLoader=W,exports.VSpinDotsLoader=G,exports.VSpinLoader=K,exports.VSpinner=r,exports.VSquaresLoader=q,exports.VStairLoader=J,exports.VTableSkeleton=we,exports.VTypingLoader=ae,exports.VWaveLoader=oe,exports.useDelayedLoading=Oe,exports.useLoading=Ee,exports.useLoadingGroup=ke;
|
package/dist/index.d.ts
ADDED
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
export { default as VSpinner } from "./components/VSpinner/index.vue";
|
|
2
|
+
export type { VSpinnerProps } from "./components/VSpinner/types";
|
|
3
|
+
export { default as VSkeleton } from "./components/VSkeleton/index.vue";
|
|
4
|
+
export type { VSkeletonProps, SkeletonVariant, } from "./components/VSkeleton/types";
|
|
5
|
+
export { default as VProgress } from "./components/VProgress/index.vue";
|
|
6
|
+
export type { VProgressProps } from "./components/VProgress/types";
|
|
7
|
+
export { default as VLoading } from "./components/VLoading/index.vue";
|
|
8
|
+
export type { VLoadingProps } from "./components/VLoading/types";
|
|
9
|
+
export { default as VLoadingButton } from "./components/VLoadingButton/index.vue";
|
|
10
|
+
export type { VLoadingButtonProps, LoadingButtonType, } from "./components/VLoadingButton/types";
|
|
11
|
+
export { default as VLoader } from "./components/VLoader/index.vue";
|
|
12
|
+
export { VBarsLoader, VBlobLoader, VBounceLoader, VBreathingLoader, VCardFlipLoader, VDotSweepLoader, VDotsLoader, VDualArcLoader, VElementLoader, VEqualizerLoader, VFallbackLoader, VFlowLoader, VGradientRingLoader, VGridLoader, VHashtagLoader, VHeatmapLoader, VLiquidLoader, VLogoSpinLoader, VMorphLoader, VOrbitDotsLoader, VOrbitLoader, VPlaneLoader, VProgressRingLoader, VPulseLoader, VRingLoader, VRippleLoader, VRotateLoader, VSignalLoader, VSlidingBarsLoader, VSnakeLoader, VSpinDotsLoader, VSpinLoader, VSquaresLoader, VStairLoader, VTypingLoader, VWaveLoader, } from "./components/VLoader/loaders";
|
|
13
|
+
export type { LoaderVariant, NamedLoaderProps, VLoaderProps, VMarkLoaderProps, VProgressRingLoaderProps } from "./components/VLoader/types";
|
|
14
|
+
export { default as VPatternSkeleton } from "./components/VPatternSkeleton/index.vue";
|
|
15
|
+
export { default as VSkeletonGroup } from "./components/VSkeletonGroup/index.vue";
|
|
16
|
+
export type { VSkeletonGroupProps } from "./components/VSkeletonGroup/types";
|
|
17
|
+
export { default as VSkeletonSwitch } from "./components/VSkeletonSwitch/index.vue";
|
|
18
|
+
export type { VSkeletonSwitchProps } from "./components/VSkeletonSwitch/types";
|
|
19
|
+
export { VAutoSkeleton, VArticleSkeleton, VCardSkeleton, VDashboardSkeleton, VFeedSkeleton, VFormSkeleton, VListSkeleton, VMediaCardSkeleton, VProductCardSkeleton, VProfileSkeleton, VSkeletonLoader, VTableSkeleton, } from "./components/VPatternSkeleton/presets";
|
|
20
|
+
export type { VAutoSkeletonProps } from "./components/VPatternSkeleton/presets";
|
|
21
|
+
export type { NamedSkeletonProps, SkeletonPattern, VArticleSkeletonProps, VCardSkeletonProps, VDashboardSkeletonProps, VFeedSkeletonProps, VFormSkeletonProps, VListSkeletonProps, VMediaCardSkeletonProps, VPatternSkeletonProps, VProductCardSkeletonProps, VProfileSkeletonProps, VTableSkeletonProps, } from "./components/VPatternSkeleton/types";
|
|
22
|
+
export { useLoading, type UseLoadingReturn } from "./composables/useLoading";
|
|
23
|
+
export { useDelayedLoading, type UseDelayedLoadingOptions, type UseDelayedLoadingReturn, } from "./composables/useDelayedLoading";
|
|
24
|
+
export { useLoadingGroup, type UseLoadingGroupReturn, type LoadingSource, } from "./composables/useLoadingGroup";
|