@ansh-ui/vue 0.2.0 → 0.3.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/dist/{chunk-B6OXKW5Q.js → chunk-AL4PPK25.js} +5 -2
- package/dist/chunk-AL4PPK25.js.map +1 -0
- package/dist/{chunk-2VSROZ2N.js → chunk-D3HH726R.js} +152 -144
- package/dist/chunk-D3HH726R.js.map +1 -0
- package/dist/{chunk-5BQEZYG6.cjs → chunk-EDAF7RAN.cjs} +163 -155
- package/dist/chunk-EDAF7RAN.cjs.map +1 -0
- package/dist/{chunk-TMG3M6TK.js → chunk-G2OX2NH2.js} +3 -3
- package/dist/chunk-G2OX2NH2.js.map +1 -0
- package/dist/{chunk-SOYRICHU.js → chunk-G3EIU6VM.js} +14 -8
- package/dist/chunk-G3EIU6VM.js.map +1 -0
- package/dist/{chunk-KCA7RNJ4.cjs → chunk-IHH6KMBY.cjs} +239 -5
- package/dist/chunk-IHH6KMBY.cjs.map +1 -0
- package/dist/{chunk-J2LA4GRP.cjs → chunk-IO6WJEJI.cjs} +122 -120
- package/dist/chunk-IO6WJEJI.cjs.map +1 -0
- package/dist/{chunk-IOXGBPOV.cjs → chunk-JJBYF7AH.cjs} +14 -8
- package/dist/chunk-JJBYF7AH.cjs.map +1 -0
- package/dist/{chunk-Z7XOFKM4.cjs → chunk-KKCZ5RUE.cjs} +4 -2
- package/dist/chunk-KKCZ5RUE.cjs.map +1 -0
- package/dist/{chunk-6ABPGOJP.js → chunk-LFGAOD32.js} +4 -2
- package/dist/chunk-LFGAOD32.js.map +1 -0
- package/dist/{chunk-EISHOEB6.cjs → chunk-MWGVDY6K.cjs} +3 -3
- package/dist/chunk-MWGVDY6K.cjs.map +1 -0
- package/dist/{chunk-FVKLCGA4.js → chunk-NJMTWLT2.js} +123 -121
- package/dist/chunk-NJMTWLT2.js.map +1 -0
- package/dist/{chunk-T425FIC7.js → chunk-NKRPZTQA.js} +238 -5
- package/dist/chunk-NKRPZTQA.js.map +1 -0
- package/dist/{chunk-JQ4YLXXM.cjs → chunk-PNR4RQ4T.cjs} +5 -2
- package/dist/chunk-PNR4RQ4T.cjs.map +1 -0
- package/dist/data.cjs +16 -16
- package/dist/data.d.cts +54 -52
- package/dist/data.d.ts +54 -52
- package/dist/data.js +1 -1
- package/dist/form.cjs +36 -36
- package/dist/form.d.cts +53 -45
- package/dist/form.d.ts +53 -45
- package/dist/form.js +1 -1
- package/dist/index.cjs +208 -180
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +33 -8
- package/dist/index.d.ts +33 -8
- package/dist/index.js +31 -15
- package/dist/index.js.map +1 -1
- package/dist/layout.cjs +13 -13
- package/dist/layout.d.cts +23 -14
- package/dist/layout.d.ts +23 -14
- package/dist/layout.js +1 -1
- package/dist/motion.cjs +11 -11
- package/dist/motion.d.cts +41 -37
- package/dist/motion.d.ts +41 -37
- package/dist/motion.js +1 -1
- package/dist/navigation.cjs +13 -9
- package/dist/navigation.d.cts +125 -4
- package/dist/navigation.d.ts +125 -4
- package/dist/navigation.js +2 -2
- package/dist/overlay.cjs +14 -14
- package/dist/overlay.d.cts +36 -33
- package/dist/overlay.d.ts +36 -33
- package/dist/overlay.js +2 -2
- package/dist/{position-Cn7qP1pn.d.cts → position-CiY171HP.d.cts} +2 -1
- package/dist/{position-Cn7qP1pn.d.ts → position-CiY171HP.d.ts} +2 -1
- package/dist/primitives.cjs +6 -6
- package/dist/primitives.d.cts +6 -5
- package/dist/primitives.d.ts +6 -5
- package/dist/primitives.js +1 -1
- package/dist/{sidebar-CTZ-Ckko.d.ts → sidebar-B9zDHMbn.d.cts} +5 -4
- package/dist/{sidebar-CQqEmpid.d.cts → sidebar-DMrKHqZ5.d.ts} +5 -4
- package/dist/styles.css +464 -0
- package/dist/{utils-IKPG3zcC.d.cts → utils-D4XwXDeX.d.cts} +2 -1
- package/dist/{utils-IKPG3zcC.d.ts → utils-D4XwXDeX.d.ts} +2 -1
- package/package.json +3 -3
- package/dist/chunk-2VSROZ2N.js.map +0 -1
- package/dist/chunk-5BQEZYG6.cjs.map +0 -1
- package/dist/chunk-6ABPGOJP.js.map +0 -1
- package/dist/chunk-B6OXKW5Q.js.map +0 -1
- package/dist/chunk-EISHOEB6.cjs.map +0 -1
- package/dist/chunk-FVKLCGA4.js.map +0 -1
- package/dist/chunk-IOXGBPOV.cjs.map +0 -1
- package/dist/chunk-J2LA4GRP.cjs.map +0 -1
- package/dist/chunk-JQ4YLXXM.cjs.map +0 -1
- package/dist/chunk-KCA7RNJ4.cjs.map +0 -1
- package/dist/chunk-SOYRICHU.js.map +0 -1
- package/dist/chunk-T425FIC7.js.map +0 -1
- package/dist/chunk-TMG3M6TK.js.map +0 -1
- package/dist/chunk-Z7XOFKM4.cjs.map +0 -1
package/dist/layout.d.ts
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import * as vue from 'vue';
|
|
2
2
|
import { PropType, VNode } from 'vue';
|
|
3
|
-
import {
|
|
4
|
-
export { A as AppShell, N as NavItem, a as NavSection, S as Sidebar } from './sidebar-
|
|
3
|
+
import { SlotContent } from './index.js';
|
|
4
|
+
export { A as AppShell, N as NavItem, a as NavSection, S as Sidebar } from './sidebar-DMrKHqZ5.js';
|
|
5
5
|
|
|
6
6
|
/**
|
|
7
7
|
* Layout primitives — the Vue counterpart of `@ansh-ui/react`'s layout components.
|
|
@@ -33,6 +33,7 @@ type SpaceToken = 0 | 0.5 | 1 | 1.5 | 2 | 3 | 4 | 5 | 6 | 8 | 10 | 12 | 16 | 20
|
|
|
33
33
|
* string flows straight into the style property — is identical.
|
|
34
34
|
*/
|
|
35
35
|
type FlexAlign = string;
|
|
36
|
+
|
|
36
37
|
interface StackProps {
|
|
37
38
|
as?: string;
|
|
38
39
|
/** Default `'vertical'` — the direction that needs a helper more often. */
|
|
@@ -131,10 +132,10 @@ declare const Stack: vue.DefineComponent<vue.ExtractPropTypes<{
|
|
|
131
132
|
as: string;
|
|
132
133
|
direction: "horizontal" | "vertical";
|
|
133
134
|
gap: SpaceToken;
|
|
134
|
-
wrap: boolean;
|
|
135
135
|
align: string;
|
|
136
|
-
stretch: boolean;
|
|
137
136
|
justify: string;
|
|
137
|
+
wrap: boolean;
|
|
138
|
+
stretch: boolean;
|
|
138
139
|
divide: boolean;
|
|
139
140
|
}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
|
|
140
141
|
/** Horizontal `Stack`, for readability at call sites. */
|
|
@@ -201,10 +202,10 @@ declare const HStack: vue.DefineComponent<vue.ExtractPropTypes<{
|
|
|
201
202
|
}>> & Readonly<{}>, {
|
|
202
203
|
as: string;
|
|
203
204
|
gap: SpaceToken;
|
|
204
|
-
wrap: boolean;
|
|
205
205
|
align: string;
|
|
206
|
-
stretch: boolean;
|
|
207
206
|
justify: string;
|
|
207
|
+
wrap: boolean;
|
|
208
|
+
stretch: boolean;
|
|
208
209
|
divide: boolean;
|
|
209
210
|
}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
|
|
210
211
|
/** Vertical `Stack`, for symmetry with `HStack`. */
|
|
@@ -271,12 +272,13 @@ declare const VStack: vue.DefineComponent<vue.ExtractPropTypes<{
|
|
|
271
272
|
}>> & Readonly<{}>, {
|
|
272
273
|
as: string;
|
|
273
274
|
gap: SpaceToken;
|
|
274
|
-
wrap: boolean;
|
|
275
275
|
align: string;
|
|
276
|
-
stretch: boolean;
|
|
277
276
|
justify: string;
|
|
277
|
+
wrap: boolean;
|
|
278
|
+
stretch: boolean;
|
|
278
279
|
divide: boolean;
|
|
279
280
|
}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
|
|
281
|
+
|
|
280
282
|
interface GridProps {
|
|
281
283
|
as?: string;
|
|
282
284
|
/** Fixed column count, or `'auto'` for a responsive `auto-fill` track. */
|
|
@@ -390,10 +392,11 @@ declare const GridItem: vue.DefineComponent<vue.ExtractPropTypes<{
|
|
|
390
392
|
default: undefined;
|
|
391
393
|
};
|
|
392
394
|
}>> & Readonly<{}>, {
|
|
393
|
-
as: string;
|
|
394
395
|
span: number | "full";
|
|
396
|
+
as: string;
|
|
395
397
|
rowSpan: number;
|
|
396
398
|
}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
|
|
399
|
+
|
|
397
400
|
interface ContainerProps {
|
|
398
401
|
as?: string;
|
|
399
402
|
/** Max content width. Default `'lg'` (72rem). */
|
|
@@ -431,10 +434,11 @@ declare const Container: vue.DefineComponent<vue.ExtractPropTypes<{
|
|
|
431
434
|
default: number;
|
|
432
435
|
};
|
|
433
436
|
}>> & Readonly<{}>, {
|
|
434
|
-
size: "full" | "sm" | "md" | "lg" | "xl";
|
|
435
437
|
as: string;
|
|
438
|
+
size: "sm" | "md" | "lg" | "xl" | "full";
|
|
436
439
|
padding: SpaceToken;
|
|
437
440
|
}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
|
|
441
|
+
|
|
438
442
|
interface DividerProps {
|
|
439
443
|
orientation?: 'horizontal' | 'vertical';
|
|
440
444
|
/** Optional label rendered in the middle of the rule. */
|
|
@@ -477,6 +481,7 @@ declare const Divider: vue.DefineComponent<vue.ExtractPropTypes<{
|
|
|
477
481
|
label: SlotContent;
|
|
478
482
|
orientation: "horizontal" | "vertical";
|
|
479
483
|
}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
|
|
484
|
+
|
|
480
485
|
interface SpacerProps {
|
|
481
486
|
size?: SpaceToken;
|
|
482
487
|
/** Grow to absorb free space in a flex container. */
|
|
@@ -507,6 +512,7 @@ declare const Spacer: vue.DefineComponent<vue.ExtractPropTypes<{
|
|
|
507
512
|
size: SpaceToken;
|
|
508
513
|
grow: boolean;
|
|
509
514
|
}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
|
|
515
|
+
|
|
510
516
|
interface CenterProps {
|
|
511
517
|
as?: string;
|
|
512
518
|
}
|
|
@@ -526,6 +532,7 @@ declare const Center: vue.DefineComponent<vue.ExtractPropTypes<{
|
|
|
526
532
|
}>> & Readonly<{}>, {
|
|
527
533
|
as: string;
|
|
528
534
|
}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
|
|
535
|
+
|
|
529
536
|
interface AspectRatioProps {
|
|
530
537
|
as?: string;
|
|
531
538
|
/** Width ÷ height. `16 / 9` reads better than `1.777`. Default `16 / 9`. */
|
|
@@ -562,6 +569,7 @@ declare const AspectRatio: vue.DefineComponent<vue.ExtractPropTypes<{
|
|
|
562
569
|
as: string;
|
|
563
570
|
ratio: number;
|
|
564
571
|
}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
|
|
572
|
+
|
|
565
573
|
interface ScrollAreaProps {
|
|
566
574
|
as?: string;
|
|
567
575
|
/** Max height before scrolling starts. */
|
|
@@ -619,9 +627,9 @@ declare const ScrollArea: vue.DefineComponent<vue.ExtractPropTypes<{
|
|
|
619
627
|
};
|
|
620
628
|
}>> & Readonly<{}>, {
|
|
621
629
|
as: string;
|
|
622
|
-
fade: boolean;
|
|
623
|
-
axis: "y" | "x" | "both";
|
|
624
630
|
maxHeight: string;
|
|
631
|
+
axis: "both" | "x" | "y";
|
|
632
|
+
fade: boolean;
|
|
625
633
|
}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
|
|
626
634
|
|
|
627
635
|
/**
|
|
@@ -717,13 +725,14 @@ declare const Resizable: vue.DefineComponent<vue.ExtractPropTypes<{
|
|
|
717
725
|
}>> & Readonly<{
|
|
718
726
|
"onUpdate:size"?: ((...args: any[]) => any) | undefined;
|
|
719
727
|
}>, {
|
|
720
|
-
size: number;
|
|
721
728
|
label: string;
|
|
722
729
|
direction: "horizontal" | "vertical";
|
|
723
730
|
defaultSize: number;
|
|
731
|
+
size: number;
|
|
724
732
|
minSize: number;
|
|
725
733
|
maxSize: number;
|
|
726
734
|
snapPoints: readonly number[];
|
|
727
735
|
}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
|
|
728
736
|
|
|
729
|
-
export { AspectRatio,
|
|
737
|
+
export { AspectRatio, Center, Container, Divider, Grid, GridItem, HStack, Resizable, ScrollArea, Spacer, Stack, VStack };
|
|
738
|
+
export type { AspectRatioProps, CenterProps, ContainerProps, DividerProps, GridItemProps, GridProps, ResizableProps, ScrollAreaProps, SpaceToken, SpacerProps, StackProps };
|
package/dist/layout.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
export { AspectRatio, Center, Container, Divider, Grid, GridItem, HStack, Resizable, ScrollArea, Spacer, Stack, VStack } from './chunk-
|
|
1
|
+
export { AspectRatio, Center, Container, Divider, Grid, GridItem, HStack, Resizable, ScrollArea, Spacer, Stack, VStack } from './chunk-AL4PPK25.js';
|
|
2
2
|
export { AppShell, Sidebar } from './chunk-ZGMXOMCB.js';
|
|
3
3
|
import './chunk-OAQ7MDYX.js';
|
|
4
4
|
import './chunk-NJDDNO4C.js';
|
package/dist/motion.cjs
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var
|
|
3
|
+
var chunkKKCZ5RUE_cjs = require('./chunk-KKCZ5RUE.cjs');
|
|
4
4
|
require('./chunk-PP6OYURM.cjs');
|
|
5
5
|
require('./chunk-6732H4BQ.cjs');
|
|
6
6
|
|
|
@@ -8,43 +8,43 @@ require('./chunk-6732H4BQ.cjs');
|
|
|
8
8
|
|
|
9
9
|
Object.defineProperty(exports, "AnimatePresence", {
|
|
10
10
|
enumerable: true,
|
|
11
|
-
get: function () { return
|
|
11
|
+
get: function () { return chunkKKCZ5RUE_cjs.AnimatePresence; }
|
|
12
12
|
});
|
|
13
13
|
Object.defineProperty(exports, "AnimatedText", {
|
|
14
14
|
enumerable: true,
|
|
15
|
-
get: function () { return
|
|
15
|
+
get: function () { return chunkKKCZ5RUE_cjs.AnimatedText; }
|
|
16
16
|
});
|
|
17
17
|
Object.defineProperty(exports, "Draggable", {
|
|
18
18
|
enumerable: true,
|
|
19
|
-
get: function () { return
|
|
19
|
+
get: function () { return chunkKKCZ5RUE_cjs.Draggable; }
|
|
20
20
|
});
|
|
21
21
|
Object.defineProperty(exports, "GradientText", {
|
|
22
22
|
enumerable: true,
|
|
23
|
-
get: function () { return
|
|
23
|
+
get: function () { return chunkKKCZ5RUE_cjs.GradientText; }
|
|
24
24
|
});
|
|
25
25
|
Object.defineProperty(exports, "Motion", {
|
|
26
26
|
enumerable: true,
|
|
27
|
-
get: function () { return
|
|
27
|
+
get: function () { return chunkKKCZ5RUE_cjs.Motion; }
|
|
28
28
|
});
|
|
29
29
|
Object.defineProperty(exports, "MotionConfig", {
|
|
30
30
|
enumerable: true,
|
|
31
|
-
get: function () { return
|
|
31
|
+
get: function () { return chunkKKCZ5RUE_cjs.MotionConfig; }
|
|
32
32
|
});
|
|
33
33
|
Object.defineProperty(exports, "ThemeProvider", {
|
|
34
34
|
enumerable: true,
|
|
35
|
-
get: function () { return
|
|
35
|
+
get: function () { return chunkKKCZ5RUE_cjs.ThemeProvider; }
|
|
36
36
|
});
|
|
37
37
|
Object.defineProperty(exports, "themeScript", {
|
|
38
38
|
enumerable: true,
|
|
39
|
-
get: function () { return
|
|
39
|
+
get: function () { return chunkKKCZ5RUE_cjs.themeScript; }
|
|
40
40
|
});
|
|
41
41
|
Object.defineProperty(exports, "useMotionConfig", {
|
|
42
42
|
enumerable: true,
|
|
43
|
-
get: function () { return
|
|
43
|
+
get: function () { return chunkKKCZ5RUE_cjs.useMotionConfig; }
|
|
44
44
|
});
|
|
45
45
|
Object.defineProperty(exports, "useTheme", {
|
|
46
46
|
enumerable: true,
|
|
47
|
-
get: function () { return
|
|
47
|
+
get: function () { return chunkKKCZ5RUE_cjs.useTheme; }
|
|
48
48
|
});
|
|
49
49
|
//# sourceMappingURL=motion.cjs.map
|
|
50
50
|
//# sourceMappingURL=motion.cjs.map
|
package/dist/motion.d.cts
CHANGED
|
@@ -1,27 +1,7 @@
|
|
|
1
|
-
import * as vue from 'vue';
|
|
2
|
-
import { VNode, PropType, ComputedRef } from 'vue';
|
|
3
1
|
import { EasingInput, SpringOptions, springs, StaggerFrom, ColorInput, ReducedMotionMode } from '@ansh-ui/core';
|
|
2
|
+
import * as vue from 'vue';
|
|
3
|
+
import { PropType, VNode, ComputedRef } from 'vue';
|
|
4
4
|
|
|
5
|
-
/**
|
|
6
|
-
* Declarative motion — the Vue counterpart of `@ansh-ui/react`'s `Motion`/`AnimatePresence`/
|
|
7
|
-
* `Draggable`.
|
|
8
|
-
*
|
|
9
|
-
* A deliberately **small** subset of what a full motion library does: transform properties and
|
|
10
|
-
* opacity, animated from `initial` to `animate`, plus hover and press states and an exit animation
|
|
11
|
-
* when paired with `AnimatePresence`.
|
|
12
|
-
*
|
|
13
|
-
* That scope is a decision, not a gap. Layout animation (FLIP), shared-element transitions and
|
|
14
|
-
* variant propagation each need machinery an order of magnitude larger than this file, and a
|
|
15
|
-
* half-implementation of them is worse than none — it works in the demo and fails on the real page.
|
|
16
|
-
* For those, use a dedicated library; for the 90% case of "fade this in, slide that up, spring the
|
|
17
|
-
* card on hover", this costs a fraction of the bundle.
|
|
18
|
-
*
|
|
19
|
-
* Values are written straight to the element's `style` from the ticker's write phase, outside Vue's
|
|
20
|
-
* reactivity — the same principle `useMotionStyle` documents in `composables/use-motion.ts`. `Motion`
|
|
21
|
-
* and `Draggable` are built on `useAnimate()` (scope-bound imperative animation, auto-stopping the
|
|
22
|
-
* previous run) and `useInView()` (the `whileInView` trigger) rather than calling the ticker
|
|
23
|
-
* primitives from scratch, so cleanup and scope-disposal are inherited for free.
|
|
24
|
-
*/
|
|
25
5
|
interface MotionValues {
|
|
26
6
|
opacity?: number;
|
|
27
7
|
x?: number;
|
|
@@ -42,6 +22,27 @@ interface MotionTransition {
|
|
|
42
22
|
/** Use a spring instead of a tween. `true` uses the `smooth` preset. */
|
|
43
23
|
spring?: boolean | SpringOptions | keyof typeof springs;
|
|
44
24
|
}
|
|
25
|
+
|
|
26
|
+
/**
|
|
27
|
+
* Declarative motion — the Vue counterpart of `@ansh-ui/react`'s `Motion`/`AnimatePresence`/
|
|
28
|
+
* `Draggable`.
|
|
29
|
+
*
|
|
30
|
+
* A deliberately **small** subset of what a full motion library does: transform properties and
|
|
31
|
+
* opacity, animated from `initial` to `animate`, plus hover and press states and an exit animation
|
|
32
|
+
* when paired with `AnimatePresence`.
|
|
33
|
+
*
|
|
34
|
+
* That scope is a decision, not a gap. Layout animation (FLIP), shared-element transitions and
|
|
35
|
+
* variant propagation each need machinery an order of magnitude larger than this file, and a
|
|
36
|
+
* half-implementation of them is worse than none — it works in the demo and fails on the real page.
|
|
37
|
+
* For those, use a dedicated library; for the 90% case of "fade this in, slide that up, spring the
|
|
38
|
+
* card on hover", this costs a fraction of the bundle.
|
|
39
|
+
*
|
|
40
|
+
* Values are written straight to the element's `style` from the ticker's write phase, outside Vue's
|
|
41
|
+
* reactivity — the same principle `useMotionStyle` documents in `composables/use-motion.ts`. `Motion`
|
|
42
|
+
* and `Draggable` are built on `useAnimate()` (scope-bound imperative animation, auto-stopping the
|
|
43
|
+
* previous run) and `useInView()` (the `whileInView` trigger) rather than calling the ticker
|
|
44
|
+
* primitives from scratch, so cleanup and scope-disposal are inherited for free.
|
|
45
|
+
*/
|
|
45
46
|
/**
|
|
46
47
|
* An animated element.
|
|
47
48
|
*
|
|
@@ -92,7 +93,7 @@ declare const Motion: vue.DefineComponent<vue.ExtractPropTypes<{
|
|
|
92
93
|
type: NumberConstructor;
|
|
93
94
|
default: number;
|
|
94
95
|
};
|
|
95
|
-
}>, () => VNode<vue.RendererNode, vue.RendererElement, {
|
|
96
|
+
}>, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
|
|
96
97
|
[key: string]: any;
|
|
97
98
|
}>, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<vue.ExtractPropTypes<{
|
|
98
99
|
as: {
|
|
@@ -136,8 +137,8 @@ declare const Motion: vue.DefineComponent<vue.ExtractPropTypes<{
|
|
|
136
137
|
default: number;
|
|
137
138
|
};
|
|
138
139
|
}>> & Readonly<{}>, {
|
|
139
|
-
initial: MotionValues;
|
|
140
140
|
as: string;
|
|
141
|
+
initial: MotionValues;
|
|
141
142
|
animate: MotionValues;
|
|
142
143
|
exit: MotionValues;
|
|
143
144
|
transition: MotionTransition;
|
|
@@ -146,6 +147,7 @@ declare const Motion: vue.DefineComponent<vue.ExtractPropTypes<{
|
|
|
146
147
|
whileInView: boolean;
|
|
147
148
|
inViewAmount: number;
|
|
148
149
|
}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
|
|
150
|
+
|
|
149
151
|
interface AnimatePresenceProps {
|
|
150
152
|
/** Seconds to keep a removed child mounted. Default `0.35`. */
|
|
151
153
|
exitDuration?: number;
|
|
@@ -181,6 +183,7 @@ declare const AnimatePresence: vue.DefineComponent<vue.ExtractPropTypes<{
|
|
|
181
183
|
}>> & Readonly<{}>, {
|
|
182
184
|
exitDuration: number;
|
|
183
185
|
}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
|
|
186
|
+
|
|
184
187
|
interface DraggableProps {
|
|
185
188
|
/** Constrain movement. */
|
|
186
189
|
axis?: 'x' | 'y' | 'both';
|
|
@@ -229,7 +232,7 @@ declare const Draggable: vue.DefineComponent<vue.ExtractPropTypes<{
|
|
|
229
232
|
type: BooleanConstructor;
|
|
230
233
|
default: undefined;
|
|
231
234
|
};
|
|
232
|
-
}>, () => VNode<vue.RendererNode, vue.RendererElement, {
|
|
235
|
+
}>, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
|
|
233
236
|
[key: string]: any;
|
|
234
237
|
}>, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, ("dragStart" | "dragEnd")[], "dragStart" | "dragEnd", vue.PublicProps, Readonly<vue.ExtractPropTypes<{
|
|
235
238
|
axis: {
|
|
@@ -257,7 +260,7 @@ declare const Draggable: vue.DefineComponent<vue.ExtractPropTypes<{
|
|
|
257
260
|
onDragStart?: ((...args: any[]) => any) | undefined;
|
|
258
261
|
onDragEnd?: ((...args: any[]) => any) | undefined;
|
|
259
262
|
}>, {
|
|
260
|
-
axis: "
|
|
263
|
+
axis: "both" | "x" | "y";
|
|
261
264
|
bounds: {
|
|
262
265
|
left?: number;
|
|
263
266
|
right?: number;
|
|
@@ -339,12 +342,12 @@ declare const GradientText: vue.DefineComponent<vue.ExtractPropTypes<{
|
|
|
339
342
|
default: string;
|
|
340
343
|
};
|
|
341
344
|
}>> & Readonly<{}>, {
|
|
342
|
-
|
|
345
|
+
text: string;
|
|
343
346
|
colors: string | readonly ColorInput[];
|
|
344
347
|
angle: number;
|
|
345
|
-
stops: number;
|
|
346
348
|
duration: number;
|
|
347
|
-
|
|
349
|
+
stops: number;
|
|
350
|
+
as: string;
|
|
348
351
|
}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
|
|
349
352
|
/**
|
|
350
353
|
* Text that reveals unit by unit.
|
|
@@ -496,19 +499,19 @@ declare const AnimatedText: vue.DefineComponent<vue.ExtractPropTypes<{
|
|
|
496
499
|
}>> & Readonly<{
|
|
497
500
|
onComplete?: ((...args: any[]) => any) | undefined;
|
|
498
501
|
}>, {
|
|
499
|
-
|
|
502
|
+
duration: number;
|
|
500
503
|
as: string;
|
|
501
504
|
blur: number;
|
|
502
|
-
rotate: number;
|
|
503
|
-
duration: number;
|
|
504
|
-
easing: EasingInput;
|
|
505
|
-
distance: number;
|
|
506
|
-
delay: number;
|
|
507
505
|
by: "chars" | "words";
|
|
508
506
|
each: number;
|
|
509
507
|
from: StaggerFrom;
|
|
508
|
+
easing: EasingInput;
|
|
509
|
+
distance: number;
|
|
510
|
+
rotate: number;
|
|
510
511
|
mask: boolean;
|
|
511
512
|
whenInView: boolean;
|
|
513
|
+
repeat: boolean;
|
|
514
|
+
delay: number;
|
|
512
515
|
}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
|
|
513
516
|
|
|
514
517
|
/**
|
|
@@ -604,9 +607,9 @@ declare const MotionConfig: vue.DefineComponent<vue.ExtractPropTypes<{
|
|
|
604
607
|
default: boolean;
|
|
605
608
|
};
|
|
606
609
|
}>> & Readonly<{}>, {
|
|
607
|
-
quality: number | null;
|
|
608
610
|
reducedMotion: ReducedMotionMode;
|
|
609
611
|
timeScale: number;
|
|
612
|
+
quality: number | null;
|
|
610
613
|
pauseWhenHidden: boolean;
|
|
611
614
|
pauseWhenBlurred: boolean;
|
|
612
615
|
respectBattery: boolean;
|
|
@@ -678,4 +681,5 @@ declare function useTheme(): ComputedRef<ThemeContextValue>;
|
|
|
678
681
|
*/
|
|
679
682
|
declare function themeScript(storageKey?: string): string;
|
|
680
683
|
|
|
681
|
-
export { AnimatePresence,
|
|
684
|
+
export { AnimatePresence, AnimatedText, Draggable, GradientText, Motion, MotionConfig, ThemeProvider, themeScript, useMotionConfig, useTheme };
|
|
685
|
+
export type { AnimatePresenceProps, DraggableProps, MotionConfigValue, MotionTransition, MotionValues, ThemeContextValue, ThemeSetting };
|
package/dist/motion.d.ts
CHANGED
|
@@ -1,27 +1,7 @@
|
|
|
1
|
-
import * as vue from 'vue';
|
|
2
|
-
import { VNode, PropType, ComputedRef } from 'vue';
|
|
3
1
|
import { EasingInput, SpringOptions, springs, StaggerFrom, ColorInput, ReducedMotionMode } from '@ansh-ui/core';
|
|
2
|
+
import * as vue from 'vue';
|
|
3
|
+
import { PropType, VNode, ComputedRef } from 'vue';
|
|
4
4
|
|
|
5
|
-
/**
|
|
6
|
-
* Declarative motion — the Vue counterpart of `@ansh-ui/react`'s `Motion`/`AnimatePresence`/
|
|
7
|
-
* `Draggable`.
|
|
8
|
-
*
|
|
9
|
-
* A deliberately **small** subset of what a full motion library does: transform properties and
|
|
10
|
-
* opacity, animated from `initial` to `animate`, plus hover and press states and an exit animation
|
|
11
|
-
* when paired with `AnimatePresence`.
|
|
12
|
-
*
|
|
13
|
-
* That scope is a decision, not a gap. Layout animation (FLIP), shared-element transitions and
|
|
14
|
-
* variant propagation each need machinery an order of magnitude larger than this file, and a
|
|
15
|
-
* half-implementation of them is worse than none — it works in the demo and fails on the real page.
|
|
16
|
-
* For those, use a dedicated library; for the 90% case of "fade this in, slide that up, spring the
|
|
17
|
-
* card on hover", this costs a fraction of the bundle.
|
|
18
|
-
*
|
|
19
|
-
* Values are written straight to the element's `style` from the ticker's write phase, outside Vue's
|
|
20
|
-
* reactivity — the same principle `useMotionStyle` documents in `composables/use-motion.ts`. `Motion`
|
|
21
|
-
* and `Draggable` are built on `useAnimate()` (scope-bound imperative animation, auto-stopping the
|
|
22
|
-
* previous run) and `useInView()` (the `whileInView` trigger) rather than calling the ticker
|
|
23
|
-
* primitives from scratch, so cleanup and scope-disposal are inherited for free.
|
|
24
|
-
*/
|
|
25
5
|
interface MotionValues {
|
|
26
6
|
opacity?: number;
|
|
27
7
|
x?: number;
|
|
@@ -42,6 +22,27 @@ interface MotionTransition {
|
|
|
42
22
|
/** Use a spring instead of a tween. `true` uses the `smooth` preset. */
|
|
43
23
|
spring?: boolean | SpringOptions | keyof typeof springs;
|
|
44
24
|
}
|
|
25
|
+
|
|
26
|
+
/**
|
|
27
|
+
* Declarative motion — the Vue counterpart of `@ansh-ui/react`'s `Motion`/`AnimatePresence`/
|
|
28
|
+
* `Draggable`.
|
|
29
|
+
*
|
|
30
|
+
* A deliberately **small** subset of what a full motion library does: transform properties and
|
|
31
|
+
* opacity, animated from `initial` to `animate`, plus hover and press states and an exit animation
|
|
32
|
+
* when paired with `AnimatePresence`.
|
|
33
|
+
*
|
|
34
|
+
* That scope is a decision, not a gap. Layout animation (FLIP), shared-element transitions and
|
|
35
|
+
* variant propagation each need machinery an order of magnitude larger than this file, and a
|
|
36
|
+
* half-implementation of them is worse than none — it works in the demo and fails on the real page.
|
|
37
|
+
* For those, use a dedicated library; for the 90% case of "fade this in, slide that up, spring the
|
|
38
|
+
* card on hover", this costs a fraction of the bundle.
|
|
39
|
+
*
|
|
40
|
+
* Values are written straight to the element's `style` from the ticker's write phase, outside Vue's
|
|
41
|
+
* reactivity — the same principle `useMotionStyle` documents in `composables/use-motion.ts`. `Motion`
|
|
42
|
+
* and `Draggable` are built on `useAnimate()` (scope-bound imperative animation, auto-stopping the
|
|
43
|
+
* previous run) and `useInView()` (the `whileInView` trigger) rather than calling the ticker
|
|
44
|
+
* primitives from scratch, so cleanup and scope-disposal are inherited for free.
|
|
45
|
+
*/
|
|
45
46
|
/**
|
|
46
47
|
* An animated element.
|
|
47
48
|
*
|
|
@@ -92,7 +93,7 @@ declare const Motion: vue.DefineComponent<vue.ExtractPropTypes<{
|
|
|
92
93
|
type: NumberConstructor;
|
|
93
94
|
default: number;
|
|
94
95
|
};
|
|
95
|
-
}>, () => VNode<vue.RendererNode, vue.RendererElement, {
|
|
96
|
+
}>, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
|
|
96
97
|
[key: string]: any;
|
|
97
98
|
}>, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<vue.ExtractPropTypes<{
|
|
98
99
|
as: {
|
|
@@ -136,8 +137,8 @@ declare const Motion: vue.DefineComponent<vue.ExtractPropTypes<{
|
|
|
136
137
|
default: number;
|
|
137
138
|
};
|
|
138
139
|
}>> & Readonly<{}>, {
|
|
139
|
-
initial: MotionValues;
|
|
140
140
|
as: string;
|
|
141
|
+
initial: MotionValues;
|
|
141
142
|
animate: MotionValues;
|
|
142
143
|
exit: MotionValues;
|
|
143
144
|
transition: MotionTransition;
|
|
@@ -146,6 +147,7 @@ declare const Motion: vue.DefineComponent<vue.ExtractPropTypes<{
|
|
|
146
147
|
whileInView: boolean;
|
|
147
148
|
inViewAmount: number;
|
|
148
149
|
}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
|
|
150
|
+
|
|
149
151
|
interface AnimatePresenceProps {
|
|
150
152
|
/** Seconds to keep a removed child mounted. Default `0.35`. */
|
|
151
153
|
exitDuration?: number;
|
|
@@ -181,6 +183,7 @@ declare const AnimatePresence: vue.DefineComponent<vue.ExtractPropTypes<{
|
|
|
181
183
|
}>> & Readonly<{}>, {
|
|
182
184
|
exitDuration: number;
|
|
183
185
|
}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
|
|
186
|
+
|
|
184
187
|
interface DraggableProps {
|
|
185
188
|
/** Constrain movement. */
|
|
186
189
|
axis?: 'x' | 'y' | 'both';
|
|
@@ -229,7 +232,7 @@ declare const Draggable: vue.DefineComponent<vue.ExtractPropTypes<{
|
|
|
229
232
|
type: BooleanConstructor;
|
|
230
233
|
default: undefined;
|
|
231
234
|
};
|
|
232
|
-
}>, () => VNode<vue.RendererNode, vue.RendererElement, {
|
|
235
|
+
}>, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
|
|
233
236
|
[key: string]: any;
|
|
234
237
|
}>, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, ("dragStart" | "dragEnd")[], "dragStart" | "dragEnd", vue.PublicProps, Readonly<vue.ExtractPropTypes<{
|
|
235
238
|
axis: {
|
|
@@ -257,7 +260,7 @@ declare const Draggable: vue.DefineComponent<vue.ExtractPropTypes<{
|
|
|
257
260
|
onDragStart?: ((...args: any[]) => any) | undefined;
|
|
258
261
|
onDragEnd?: ((...args: any[]) => any) | undefined;
|
|
259
262
|
}>, {
|
|
260
|
-
axis: "
|
|
263
|
+
axis: "both" | "x" | "y";
|
|
261
264
|
bounds: {
|
|
262
265
|
left?: number;
|
|
263
266
|
right?: number;
|
|
@@ -339,12 +342,12 @@ declare const GradientText: vue.DefineComponent<vue.ExtractPropTypes<{
|
|
|
339
342
|
default: string;
|
|
340
343
|
};
|
|
341
344
|
}>> & Readonly<{}>, {
|
|
342
|
-
|
|
345
|
+
text: string;
|
|
343
346
|
colors: string | readonly ColorInput[];
|
|
344
347
|
angle: number;
|
|
345
|
-
stops: number;
|
|
346
348
|
duration: number;
|
|
347
|
-
|
|
349
|
+
stops: number;
|
|
350
|
+
as: string;
|
|
348
351
|
}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
|
|
349
352
|
/**
|
|
350
353
|
* Text that reveals unit by unit.
|
|
@@ -496,19 +499,19 @@ declare const AnimatedText: vue.DefineComponent<vue.ExtractPropTypes<{
|
|
|
496
499
|
}>> & Readonly<{
|
|
497
500
|
onComplete?: ((...args: any[]) => any) | undefined;
|
|
498
501
|
}>, {
|
|
499
|
-
|
|
502
|
+
duration: number;
|
|
500
503
|
as: string;
|
|
501
504
|
blur: number;
|
|
502
|
-
rotate: number;
|
|
503
|
-
duration: number;
|
|
504
|
-
easing: EasingInput;
|
|
505
|
-
distance: number;
|
|
506
|
-
delay: number;
|
|
507
505
|
by: "chars" | "words";
|
|
508
506
|
each: number;
|
|
509
507
|
from: StaggerFrom;
|
|
508
|
+
easing: EasingInput;
|
|
509
|
+
distance: number;
|
|
510
|
+
rotate: number;
|
|
510
511
|
mask: boolean;
|
|
511
512
|
whenInView: boolean;
|
|
513
|
+
repeat: boolean;
|
|
514
|
+
delay: number;
|
|
512
515
|
}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
|
|
513
516
|
|
|
514
517
|
/**
|
|
@@ -604,9 +607,9 @@ declare const MotionConfig: vue.DefineComponent<vue.ExtractPropTypes<{
|
|
|
604
607
|
default: boolean;
|
|
605
608
|
};
|
|
606
609
|
}>> & Readonly<{}>, {
|
|
607
|
-
quality: number | null;
|
|
608
610
|
reducedMotion: ReducedMotionMode;
|
|
609
611
|
timeScale: number;
|
|
612
|
+
quality: number | null;
|
|
610
613
|
pauseWhenHidden: boolean;
|
|
611
614
|
pauseWhenBlurred: boolean;
|
|
612
615
|
respectBattery: boolean;
|
|
@@ -678,4 +681,5 @@ declare function useTheme(): ComputedRef<ThemeContextValue>;
|
|
|
678
681
|
*/
|
|
679
682
|
declare function themeScript(storageKey?: string): string;
|
|
680
683
|
|
|
681
|
-
export { AnimatePresence,
|
|
684
|
+
export { AnimatePresence, AnimatedText, Draggable, GradientText, Motion, MotionConfig, ThemeProvider, themeScript, useMotionConfig, useTheme };
|
|
685
|
+
export type { AnimatePresenceProps, DraggableProps, MotionConfigValue, MotionTransition, MotionValues, ThemeContextValue, ThemeSetting };
|
package/dist/motion.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
export { AnimatePresence, AnimatedText, Draggable, GradientText, Motion, MotionConfig, ThemeProvider, themeScript, useMotionConfig, useTheme } from './chunk-
|
|
1
|
+
export { AnimatePresence, AnimatedText, Draggable, GradientText, Motion, MotionConfig, ThemeProvider, themeScript, useMotionConfig, useTheme } from './chunk-LFGAOD32.js';
|
|
2
2
|
import './chunk-EVO23GUS.js';
|
|
3
3
|
import './chunk-NJDDNO4C.js';
|
|
4
4
|
//# sourceMappingURL=motion.js.map
|
package/dist/navigation.cjs
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var
|
|
3
|
+
var chunkIHH6KMBY_cjs = require('./chunk-IHH6KMBY.cjs');
|
|
4
4
|
var chunkSHX2JGID_cjs = require('./chunk-SHX2JGID.cjs');
|
|
5
|
-
require('./chunk-
|
|
5
|
+
require('./chunk-MWGVDY6K.cjs');
|
|
6
6
|
require('./chunk-774WBLDR.cjs');
|
|
7
7
|
require('./chunk-6732H4BQ.cjs');
|
|
8
8
|
|
|
@@ -10,31 +10,35 @@ require('./chunk-6732H4BQ.cjs');
|
|
|
10
10
|
|
|
11
11
|
Object.defineProperty(exports, "Accordion", {
|
|
12
12
|
enumerable: true,
|
|
13
|
-
get: function () { return
|
|
13
|
+
get: function () { return chunkIHH6KMBY_cjs.Accordion; }
|
|
14
14
|
});
|
|
15
15
|
Object.defineProperty(exports, "Breadcrumbs", {
|
|
16
16
|
enumerable: true,
|
|
17
|
-
get: function () { return
|
|
17
|
+
get: function () { return chunkIHH6KMBY_cjs.Breadcrumbs; }
|
|
18
|
+
});
|
|
19
|
+
Object.defineProperty(exports, "Carousel", {
|
|
20
|
+
enumerable: true,
|
|
21
|
+
get: function () { return chunkIHH6KMBY_cjs.Carousel; }
|
|
18
22
|
});
|
|
19
23
|
Object.defineProperty(exports, "Collapsible", {
|
|
20
24
|
enumerable: true,
|
|
21
|
-
get: function () { return
|
|
25
|
+
get: function () { return chunkIHH6KMBY_cjs.Collapsible; }
|
|
22
26
|
});
|
|
23
27
|
Object.defineProperty(exports, "DisclosureList", {
|
|
24
28
|
enumerable: true,
|
|
25
|
-
get: function () { return
|
|
29
|
+
get: function () { return chunkIHH6KMBY_cjs.DisclosureList; }
|
|
26
30
|
});
|
|
27
31
|
Object.defineProperty(exports, "NavigationMenu", {
|
|
28
32
|
enumerable: true,
|
|
29
|
-
get: function () { return
|
|
33
|
+
get: function () { return chunkIHH6KMBY_cjs.NavigationMenu; }
|
|
30
34
|
});
|
|
31
35
|
Object.defineProperty(exports, "Stepper", {
|
|
32
36
|
enumerable: true,
|
|
33
|
-
get: function () { return
|
|
37
|
+
get: function () { return chunkIHH6KMBY_cjs.Stepper; }
|
|
34
38
|
});
|
|
35
39
|
Object.defineProperty(exports, "Tabs", {
|
|
36
40
|
enumerable: true,
|
|
37
|
-
get: function () { return
|
|
41
|
+
get: function () { return chunkIHH6KMBY_cjs.Tabs; }
|
|
38
42
|
});
|
|
39
43
|
Object.defineProperty(exports, "AppShell", {
|
|
40
44
|
enumerable: true,
|