@ark-ui/vue 5.26.1 → 5.27.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.
- package/dist/components/anatomy.cjs +5 -0
- package/dist/components/anatomy.d.cts +2 -1
- package/dist/components/anatomy.d.ts +2 -1
- package/dist/components/anatomy.js +1 -0
- package/dist/components/angle-slider/angle-slider-root.vue.cjs +2 -0
- package/dist/components/angle-slider/angle-slider-root.vue.js +2 -0
- package/dist/components/angle-slider/angle-slider.types.d.cts +8 -0
- package/dist/components/angle-slider/angle-slider.types.d.ts +8 -0
- package/dist/components/bottom-sheet/bottom-sheet-backdrop.vue.cjs +12 -7
- package/dist/components/bottom-sheet/bottom-sheet-backdrop.vue.js +13 -8
- package/dist/components/dialog/dialog-backdrop.vue.cjs +12 -7
- package/dist/components/dialog/dialog-backdrop.vue.js +13 -8
- package/dist/components/index.cjs +23 -0
- package/dist/components/index.d.cts +1 -0
- package/dist/components/index.d.ts +1 -0
- package/dist/components/index.js +11 -0
- package/dist/components/marquee/index.cjs +30 -0
- package/dist/components/marquee/index.d.cts +11 -0
- package/dist/components/marquee/index.d.ts +11 -0
- package/dist/components/marquee/index.js +11 -0
- package/dist/components/marquee/marquee-content.vue.cjs +31 -0
- package/dist/components/marquee/marquee-content.vue.d.cts +19 -0
- package/dist/components/marquee/marquee-content.vue.d.ts +19 -0
- package/dist/components/marquee/marquee-content.vue.js +27 -0
- package/dist/components/marquee/marquee-content.vue2.cjs +9 -0
- package/dist/components/marquee/marquee-content.vue2.js +5 -0
- package/dist/components/marquee/marquee-context.vue.cjs +18 -0
- package/dist/components/marquee/marquee-context.vue.d.cts +41 -0
- package/dist/components/marquee/marquee-context.vue.d.ts +41 -0
- package/dist/components/marquee/marquee-context.vue.js +14 -0
- package/dist/components/marquee/marquee-context.vue2.cjs +9 -0
- package/dist/components/marquee/marquee-context.vue2.js +5 -0
- package/dist/components/marquee/marquee-edge.vue.cjs +31 -0
- package/dist/components/marquee/marquee-edge.vue.d.cts +20 -0
- package/dist/components/marquee/marquee-edge.vue.d.ts +20 -0
- package/dist/components/marquee/marquee-edge.vue.js +27 -0
- package/dist/components/marquee/marquee-edge.vue2.cjs +9 -0
- package/dist/components/marquee/marquee-edge.vue2.js +5 -0
- package/dist/components/marquee/marquee-root-provider.vue.cjs +32 -0
- package/dist/components/marquee/marquee-root-provider.vue.d.cts +23 -0
- package/dist/components/marquee/marquee-root-provider.vue.d.ts +23 -0
- package/dist/components/marquee/marquee-root-provider.vue.js +28 -0
- package/dist/components/marquee/marquee-root-provider.vue2.cjs +9 -0
- package/dist/components/marquee/marquee-root-provider.vue2.js +5 -0
- package/dist/components/marquee/marquee-root.vue.cjs +53 -0
- package/dist/components/marquee/marquee-root.vue.d.cts +37 -0
- package/dist/components/marquee/marquee-root.vue.d.ts +37 -0
- package/dist/components/marquee/marquee-root.vue.js +49 -0
- package/dist/components/marquee/marquee-root.vue2.cjs +9 -0
- package/dist/components/marquee/marquee-root.vue2.js +5 -0
- package/dist/components/marquee/marquee-viewport.vue.cjs +29 -0
- package/dist/components/marquee/marquee-viewport.vue.d.cts +19 -0
- package/dist/components/marquee/marquee-viewport.vue.d.ts +19 -0
- package/dist/components/marquee/marquee-viewport.vue.js +25 -0
- package/dist/components/marquee/marquee-viewport.vue2.cjs +9 -0
- package/dist/components/marquee/marquee-viewport.vue2.js +5 -0
- package/dist/components/marquee/marquee.anatomy.d.cts +1 -0
- package/dist/components/marquee/marquee.anatomy.d.ts +1 -0
- package/dist/components/marquee/marquee.cjs +19 -0
- package/dist/components/marquee/marquee.d.cts +7 -0
- package/dist/components/marquee/marquee.d.ts +7 -0
- package/dist/components/marquee/marquee.js +6 -0
- package/dist/components/marquee/marquee.types.d.cts +83 -0
- package/dist/components/marquee/marquee.types.d.ts +83 -0
- package/dist/components/marquee/use-marquee-context.cjs +10 -0
- package/dist/components/marquee/use-marquee-context.d.cts +4 -0
- package/dist/components/marquee/use-marquee-context.d.ts +4 -0
- package/dist/components/marquee/use-marquee-context.js +5 -0
- package/dist/components/marquee/use-marquee.cjs +60 -0
- package/dist/components/marquee/use-marquee.d.cts +10 -0
- package/dist/components/marquee/use-marquee.d.ts +10 -0
- package/dist/components/marquee/use-marquee.js +37 -0
- package/dist/components/tabs/tab-content.vue.cjs +15 -8
- package/dist/components/tabs/tab-content.vue.js +16 -9
- package/dist/components/tour/tour-backdrop.vue.cjs +12 -8
- package/dist/components/tour/tour-backdrop.vue.js +13 -9
- package/dist/index.cjs +23 -0
- package/dist/index.js +11 -0
- package/package.json +72 -69
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
|
|
4
|
+
|
|
5
|
+
const marqueeContent_vue_vue_type_script_setup_true_lang = require('./marquee-content.vue.cjs');
|
|
6
|
+
const marqueeContext_vue_vue_type_script_setup_true_lang = require('./marquee-context.vue.cjs');
|
|
7
|
+
const marqueeEdge_vue_vue_type_script_setup_true_lang = require('./marquee-edge.vue.cjs');
|
|
8
|
+
const marqueeRoot_vue_vue_type_script_setup_true_lang = require('./marquee-root.vue.cjs');
|
|
9
|
+
const marqueeRootProvider_vue_vue_type_script_setup_true_lang = require('./marquee-root-provider.vue.cjs');
|
|
10
|
+
const marqueeViewport_vue_vue_type_script_setup_true_lang = require('./marquee-viewport.vue.cjs');
|
|
11
|
+
|
|
12
|
+
|
|
13
|
+
|
|
14
|
+
exports.Content = marqueeContent_vue_vue_type_script_setup_true_lang.default;
|
|
15
|
+
exports.Context = marqueeContext_vue_vue_type_script_setup_true_lang.default;
|
|
16
|
+
exports.Edge = marqueeEdge_vue_vue_type_script_setup_true_lang.default;
|
|
17
|
+
exports.Root = marqueeRoot_vue_vue_type_script_setup_true_lang.default;
|
|
18
|
+
exports.RootProvider = marqueeRootProvider_vue_vue_type_script_setup_true_lang.default;
|
|
19
|
+
exports.Viewport = marqueeViewport_vue_vue_type_script_setup_true_lang.default;
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
export type { PauseStatusDetails, Side } from '@zag-js/marquee';
|
|
2
|
+
export { default as Content, type MarqueeContentBaseProps as ContentBaseProps, type MarqueeContentProps as ContentProps, } from './marquee-content.vue';
|
|
3
|
+
export { default as Context, type MarqueeContextProps as ContextProps } from './marquee-context.vue';
|
|
4
|
+
export { default as Edge, type MarqueeEdgeBaseProps as EdgeBaseProps, type MarqueeEdgeProps as EdgeProps, } from './marquee-edge.vue';
|
|
5
|
+
export { default as Root, type MarqueeRootBaseProps as RootBaseProps, type MarqueeRootEmits as RootEmits, type MarqueeRootProps as RootProps, } from './marquee-root.vue';
|
|
6
|
+
export { default as RootProvider, type MarqueeRootProviderBaseProps as RootProviderBaseProps, type MarqueeRootProviderProps as RootProviderProps, } from './marquee-root-provider.vue';
|
|
7
|
+
export { default as Viewport, type MarqueeViewportBaseProps as ViewportBaseProps, type MarqueeViewportProps as ViewportProps, } from './marquee-viewport.vue';
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
export type { PauseStatusDetails, Side } from '@zag-js/marquee';
|
|
2
|
+
export { default as Content, type MarqueeContentBaseProps as ContentBaseProps, type MarqueeContentProps as ContentProps, } from './marquee-content.vue';
|
|
3
|
+
export { default as Context, type MarqueeContextProps as ContextProps } from './marquee-context.vue';
|
|
4
|
+
export { default as Edge, type MarqueeEdgeBaseProps as EdgeBaseProps, type MarqueeEdgeProps as EdgeProps, } from './marquee-edge.vue';
|
|
5
|
+
export { default as Root, type MarqueeRootBaseProps as RootBaseProps, type MarqueeRootEmits as RootEmits, type MarqueeRootProps as RootProps, } from './marquee-root.vue';
|
|
6
|
+
export { default as RootProvider, type MarqueeRootProviderBaseProps as RootProviderBaseProps, type MarqueeRootProviderProps as RootProviderProps, } from './marquee-root-provider.vue';
|
|
7
|
+
export { default as Viewport, type MarqueeViewportBaseProps as ViewportBaseProps, type MarqueeViewportProps as ViewportProps, } from './marquee-viewport.vue';
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
export { default as Content } from './marquee-content.vue.js';
|
|
2
|
+
export { default as Context } from './marquee-context.vue.js';
|
|
3
|
+
export { default as Edge } from './marquee-edge.vue.js';
|
|
4
|
+
export { default as Root } from './marquee-root.vue.js';
|
|
5
|
+
export { default as RootProvider } from './marquee-root-provider.vue.js';
|
|
6
|
+
export { default as Viewport } from './marquee-viewport.vue.js';
|
|
@@ -0,0 +1,83 @@
|
|
|
1
|
+
import type * as marquee from '@zag-js/marquee';
|
|
2
|
+
export interface RootProps {
|
|
3
|
+
/**
|
|
4
|
+
* Whether to automatically duplicate content to fill the container.
|
|
5
|
+
* @default false
|
|
6
|
+
*/
|
|
7
|
+
autoFill?: boolean;
|
|
8
|
+
/**
|
|
9
|
+
* Whether the marquee is paused by default.
|
|
10
|
+
* @default false
|
|
11
|
+
*/
|
|
12
|
+
defaultPaused?: boolean;
|
|
13
|
+
/**
|
|
14
|
+
* The delay before the animation starts (in seconds).
|
|
15
|
+
* @default 0
|
|
16
|
+
*/
|
|
17
|
+
delay?: number;
|
|
18
|
+
/**
|
|
19
|
+
* The unique identifier of the machine.
|
|
20
|
+
*/
|
|
21
|
+
id?: string;
|
|
22
|
+
/**
|
|
23
|
+
* The ids of the elements in the marquee. Useful for composition.
|
|
24
|
+
*/
|
|
25
|
+
ids?: Partial<{
|
|
26
|
+
root: string;
|
|
27
|
+
viewport: string;
|
|
28
|
+
content: (index: number) => string;
|
|
29
|
+
}>;
|
|
30
|
+
/**
|
|
31
|
+
* The number of times to loop the animation (0 = infinite).
|
|
32
|
+
* @default 0
|
|
33
|
+
*/
|
|
34
|
+
loopCount?: number;
|
|
35
|
+
/**
|
|
36
|
+
* Whether to pause the marquee on user interaction (hover, focus).
|
|
37
|
+
* @default false
|
|
38
|
+
*/
|
|
39
|
+
pauseOnInteraction?: boolean;
|
|
40
|
+
/**
|
|
41
|
+
* Whether the marquee is paused.
|
|
42
|
+
*/
|
|
43
|
+
paused?: boolean;
|
|
44
|
+
/**
|
|
45
|
+
* Whether to reverse the animation direction.
|
|
46
|
+
* @default false
|
|
47
|
+
*/
|
|
48
|
+
reverse?: boolean;
|
|
49
|
+
/**
|
|
50
|
+
* The side/direction the marquee scrolls towards.
|
|
51
|
+
* @default "start"
|
|
52
|
+
*/
|
|
53
|
+
side?: marquee.Side;
|
|
54
|
+
/**
|
|
55
|
+
* The spacing between marquee items.
|
|
56
|
+
* @default "1rem"
|
|
57
|
+
*/
|
|
58
|
+
spacing?: string;
|
|
59
|
+
/**
|
|
60
|
+
* The speed of the marquee animation in pixels per second.
|
|
61
|
+
* @default 50
|
|
62
|
+
*/
|
|
63
|
+
speed?: number;
|
|
64
|
+
/**
|
|
65
|
+
* The localized messages to use.
|
|
66
|
+
*/
|
|
67
|
+
translations?: marquee.IntlTranslations;
|
|
68
|
+
}
|
|
69
|
+
export type RootEmits = {
|
|
70
|
+
/**
|
|
71
|
+
* Function called when the marquee completes all loops and stops.
|
|
72
|
+
* Only fires for finite loops (loopCount > 0).
|
|
73
|
+
*/
|
|
74
|
+
complete: [];
|
|
75
|
+
/**
|
|
76
|
+
* Function called when the marquee completes one loop iteration.
|
|
77
|
+
*/
|
|
78
|
+
loopComplete: [];
|
|
79
|
+
/**
|
|
80
|
+
* Function called when the pause status changes.
|
|
81
|
+
*/
|
|
82
|
+
pauseChange: [details: marquee.PauseStatusDetails];
|
|
83
|
+
};
|
|
@@ -0,0 +1,83 @@
|
|
|
1
|
+
import type * as marquee from '@zag-js/marquee';
|
|
2
|
+
export interface RootProps {
|
|
3
|
+
/**
|
|
4
|
+
* Whether to automatically duplicate content to fill the container.
|
|
5
|
+
* @default false
|
|
6
|
+
*/
|
|
7
|
+
autoFill?: boolean;
|
|
8
|
+
/**
|
|
9
|
+
* Whether the marquee is paused by default.
|
|
10
|
+
* @default false
|
|
11
|
+
*/
|
|
12
|
+
defaultPaused?: boolean;
|
|
13
|
+
/**
|
|
14
|
+
* The delay before the animation starts (in seconds).
|
|
15
|
+
* @default 0
|
|
16
|
+
*/
|
|
17
|
+
delay?: number;
|
|
18
|
+
/**
|
|
19
|
+
* The unique identifier of the machine.
|
|
20
|
+
*/
|
|
21
|
+
id?: string;
|
|
22
|
+
/**
|
|
23
|
+
* The ids of the elements in the marquee. Useful for composition.
|
|
24
|
+
*/
|
|
25
|
+
ids?: Partial<{
|
|
26
|
+
root: string;
|
|
27
|
+
viewport: string;
|
|
28
|
+
content: (index: number) => string;
|
|
29
|
+
}>;
|
|
30
|
+
/**
|
|
31
|
+
* The number of times to loop the animation (0 = infinite).
|
|
32
|
+
* @default 0
|
|
33
|
+
*/
|
|
34
|
+
loopCount?: number;
|
|
35
|
+
/**
|
|
36
|
+
* Whether to pause the marquee on user interaction (hover, focus).
|
|
37
|
+
* @default false
|
|
38
|
+
*/
|
|
39
|
+
pauseOnInteraction?: boolean;
|
|
40
|
+
/**
|
|
41
|
+
* Whether the marquee is paused.
|
|
42
|
+
*/
|
|
43
|
+
paused?: boolean;
|
|
44
|
+
/**
|
|
45
|
+
* Whether to reverse the animation direction.
|
|
46
|
+
* @default false
|
|
47
|
+
*/
|
|
48
|
+
reverse?: boolean;
|
|
49
|
+
/**
|
|
50
|
+
* The side/direction the marquee scrolls towards.
|
|
51
|
+
* @default "start"
|
|
52
|
+
*/
|
|
53
|
+
side?: marquee.Side;
|
|
54
|
+
/**
|
|
55
|
+
* The spacing between marquee items.
|
|
56
|
+
* @default "1rem"
|
|
57
|
+
*/
|
|
58
|
+
spacing?: string;
|
|
59
|
+
/**
|
|
60
|
+
* The speed of the marquee animation in pixels per second.
|
|
61
|
+
* @default 50
|
|
62
|
+
*/
|
|
63
|
+
speed?: number;
|
|
64
|
+
/**
|
|
65
|
+
* The localized messages to use.
|
|
66
|
+
*/
|
|
67
|
+
translations?: marquee.IntlTranslations;
|
|
68
|
+
}
|
|
69
|
+
export type RootEmits = {
|
|
70
|
+
/**
|
|
71
|
+
* Function called when the marquee completes all loops and stops.
|
|
72
|
+
* Only fires for finite loops (loopCount > 0).
|
|
73
|
+
*/
|
|
74
|
+
complete: [];
|
|
75
|
+
/**
|
|
76
|
+
* Function called when the marquee completes one loop iteration.
|
|
77
|
+
*/
|
|
78
|
+
loopComplete: [];
|
|
79
|
+
/**
|
|
80
|
+
* Function called when the pause status changes.
|
|
81
|
+
*/
|
|
82
|
+
pauseChange: [details: marquee.PauseStatusDetails];
|
|
83
|
+
};
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
|
|
4
|
+
|
|
5
|
+
const createContext = require('../../utils/create-context.cjs');
|
|
6
|
+
|
|
7
|
+
const [MarqueeProvider, useMarqueeContext] = createContext.createContext("MarqueeContext");
|
|
8
|
+
|
|
9
|
+
exports.MarqueeProvider = MarqueeProvider;
|
|
10
|
+
exports.useMarqueeContext = useMarqueeContext;
|
|
@@ -0,0 +1,4 @@
|
|
|
1
|
+
import { UseMarqueeReturn } from './use-marquee';
|
|
2
|
+
export interface UseMarqueeContext extends UseMarqueeReturn {
|
|
3
|
+
}
|
|
4
|
+
export declare const MarqueeProvider: (opts: UseMarqueeContext) => void, useMarqueeContext: (fallback?: UseMarqueeContext | undefined) => UseMarqueeContext;
|
|
@@ -0,0 +1,4 @@
|
|
|
1
|
+
import { UseMarqueeReturn } from './use-marquee';
|
|
2
|
+
export interface UseMarqueeContext extends UseMarqueeReturn {
|
|
3
|
+
}
|
|
4
|
+
export declare const MarqueeProvider: (opts: UseMarqueeContext) => void, useMarqueeContext: (fallback?: UseMarqueeContext | undefined) => UseMarqueeContext;
|
|
@@ -0,0 +1,60 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
|
|
4
|
+
|
|
5
|
+
const marquee = require('@zag-js/marquee');
|
|
6
|
+
const vue$1 = require('@zag-js/vue');
|
|
7
|
+
const vue = require('vue');
|
|
8
|
+
const useEnvironmentContext = require('../../providers/environment/use-environment-context.cjs');
|
|
9
|
+
const useLocaleContext = require('../../providers/locale/use-locale-context.cjs');
|
|
10
|
+
const cleanProps = require('../../utils/clean-props.cjs');
|
|
11
|
+
|
|
12
|
+
function _interopNamespaceDefault(e) {
|
|
13
|
+
const n = Object.create(null, { [Symbol.toStringTag]: { value: 'Module' } });
|
|
14
|
+
if (e) {
|
|
15
|
+
for (const k in e) {
|
|
16
|
+
if (k !== 'default') {
|
|
17
|
+
const d = Object.getOwnPropertyDescriptor(e, k);
|
|
18
|
+
Object.defineProperty(n, k, d.get ? d : {
|
|
19
|
+
enumerable: true,
|
|
20
|
+
get: () => e[k]
|
|
21
|
+
});
|
|
22
|
+
}
|
|
23
|
+
}
|
|
24
|
+
}
|
|
25
|
+
n.default = e;
|
|
26
|
+
return Object.freeze(n);
|
|
27
|
+
}
|
|
28
|
+
|
|
29
|
+
const marquee__namespace = /*#__PURE__*/_interopNamespaceDefault(marquee);
|
|
30
|
+
|
|
31
|
+
const useMarquee = (props = {}, emit) => {
|
|
32
|
+
const id = vue.useId();
|
|
33
|
+
const env = useEnvironmentContext.useEnvironmentContext(useEnvironmentContext.DEFAULT_ENVIRONMENT);
|
|
34
|
+
const locale = useLocaleContext.useLocaleContext(useLocaleContext.DEFAULT_LOCALE);
|
|
35
|
+
const context = vue.computed(() => {
|
|
36
|
+
const localeProps = vue.toValue(props);
|
|
37
|
+
return {
|
|
38
|
+
id,
|
|
39
|
+
dir: locale.value.dir,
|
|
40
|
+
getRootNode: env?.value.getRootNode,
|
|
41
|
+
...cleanProps.cleanProps(localeProps),
|
|
42
|
+
onPauseChange: (details) => {
|
|
43
|
+
emit?.("pauseChange", details);
|
|
44
|
+
localeProps.onPauseChange?.(details);
|
|
45
|
+
},
|
|
46
|
+
onLoopComplete: () => {
|
|
47
|
+
emit?.("loopComplete");
|
|
48
|
+
localeProps.onLoopComplete?.();
|
|
49
|
+
},
|
|
50
|
+
onComplete: () => {
|
|
51
|
+
emit?.("complete");
|
|
52
|
+
localeProps.onComplete?.();
|
|
53
|
+
}
|
|
54
|
+
};
|
|
55
|
+
});
|
|
56
|
+
const service = vue$1.useMachine(marquee__namespace.machine, context);
|
|
57
|
+
return vue.computed(() => marquee__namespace.connect(service, vue$1.normalizeProps));
|
|
58
|
+
};
|
|
59
|
+
|
|
60
|
+
exports.useMarquee = useMarquee;
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import { PropTypes } from '@zag-js/vue';
|
|
2
|
+
import { ComputedRef, MaybeRef } from 'vue';
|
|
3
|
+
import { EmitFn, Optional } from '../../types';
|
|
4
|
+
import { RootEmits } from './marquee.types';
|
|
5
|
+
import * as marquee from '@zag-js/marquee';
|
|
6
|
+
export interface UseMarqueeProps extends Optional<Omit<marquee.Props, 'dir' | 'getRootNode'>, 'id'> {
|
|
7
|
+
}
|
|
8
|
+
export interface UseMarqueeReturn extends ComputedRef<marquee.Api<PropTypes>> {
|
|
9
|
+
}
|
|
10
|
+
export declare const useMarquee: (props?: MaybeRef<UseMarqueeProps>, emit?: EmitFn<RootEmits>) => UseMarqueeReturn;
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import { PropTypes } from '@zag-js/vue';
|
|
2
|
+
import { ComputedRef, MaybeRef } from 'vue';
|
|
3
|
+
import { EmitFn, Optional } from '../../types';
|
|
4
|
+
import { RootEmits } from './marquee.types';
|
|
5
|
+
import * as marquee from '@zag-js/marquee';
|
|
6
|
+
export interface UseMarqueeProps extends Optional<Omit<marquee.Props, 'dir' | 'getRootNode'>, 'id'> {
|
|
7
|
+
}
|
|
8
|
+
export interface UseMarqueeReturn extends ComputedRef<marquee.Api<PropTypes>> {
|
|
9
|
+
}
|
|
10
|
+
export declare const useMarquee: (props?: MaybeRef<UseMarqueeProps>, emit?: EmitFn<RootEmits>) => UseMarqueeReturn;
|
|
@@ -0,0 +1,37 @@
|
|
|
1
|
+
import * as marquee from '@zag-js/marquee';
|
|
2
|
+
import { useMachine, normalizeProps } from '@zag-js/vue';
|
|
3
|
+
import { useId, computed, toValue } from 'vue';
|
|
4
|
+
import { useEnvironmentContext, DEFAULT_ENVIRONMENT } from '../../providers/environment/use-environment-context.js';
|
|
5
|
+
import { useLocaleContext, DEFAULT_LOCALE } from '../../providers/locale/use-locale-context.js';
|
|
6
|
+
import { cleanProps } from '../../utils/clean-props.js';
|
|
7
|
+
|
|
8
|
+
const useMarquee = (props = {}, emit) => {
|
|
9
|
+
const id = useId();
|
|
10
|
+
const env = useEnvironmentContext(DEFAULT_ENVIRONMENT);
|
|
11
|
+
const locale = useLocaleContext(DEFAULT_LOCALE);
|
|
12
|
+
const context = computed(() => {
|
|
13
|
+
const localeProps = toValue(props);
|
|
14
|
+
return {
|
|
15
|
+
id,
|
|
16
|
+
dir: locale.value.dir,
|
|
17
|
+
getRootNode: env?.value.getRootNode,
|
|
18
|
+
...cleanProps(localeProps),
|
|
19
|
+
onPauseChange: (details) => {
|
|
20
|
+
emit?.("pauseChange", details);
|
|
21
|
+
localeProps.onPauseChange?.(details);
|
|
22
|
+
},
|
|
23
|
+
onLoopComplete: () => {
|
|
24
|
+
emit?.("loopComplete");
|
|
25
|
+
localeProps.onLoopComplete?.();
|
|
26
|
+
},
|
|
27
|
+
onComplete: () => {
|
|
28
|
+
emit?.("complete");
|
|
29
|
+
localeProps.onComplete?.();
|
|
30
|
+
}
|
|
31
|
+
};
|
|
32
|
+
});
|
|
33
|
+
const service = useMachine(marquee.machine, context);
|
|
34
|
+
return computed(() => marquee.connect(service, normalizeProps));
|
|
35
|
+
};
|
|
36
|
+
|
|
37
|
+
export { useMarquee };
|
|
@@ -3,10 +3,13 @@
|
|
|
3
3
|
Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: 'Module' } });
|
|
4
4
|
|
|
5
5
|
const vue = require('vue');
|
|
6
|
+
const vue$1 = require('@zag-js/vue');
|
|
6
7
|
const useForwardExpose = require('../../utils/use-forward-expose.cjs');
|
|
7
8
|
const useRenderStrategy = require('../../utils/use-render-strategy.cjs');
|
|
8
9
|
const useTabsContext = require('./use-tabs-context.cjs');
|
|
9
|
-
const
|
|
10
|
+
const usePresence = require('../presence/use-presence.cjs');
|
|
11
|
+
const usePresenceContext = require('../presence/use-presence-context.cjs');
|
|
12
|
+
const factory = require('../factory.cjs');
|
|
10
13
|
|
|
11
14
|
const _sfc_main = /* @__PURE__ */ vue.defineComponent({
|
|
12
15
|
__name: "tab-content",
|
|
@@ -18,19 +21,23 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
|
|
|
18
21
|
const props = __props;
|
|
19
22
|
const tabs = useTabsContext.useTabsContext();
|
|
20
23
|
const renderStrategy = useRenderStrategy.useRenderStrategyProps();
|
|
24
|
+
const presence = usePresence.usePresence(
|
|
25
|
+
vue.computed(() => ({
|
|
26
|
+
...renderStrategy.value,
|
|
27
|
+
present: tabs.value.value === props.value,
|
|
28
|
+
immediate: true
|
|
29
|
+
}))
|
|
30
|
+
);
|
|
31
|
+
usePresenceContext.PresenceProvider(presence);
|
|
32
|
+
const mergedProps = vue.computed(() => vue$1.mergeProps(tabs.value.getContentProps(props), presence.value.presenceProps));
|
|
21
33
|
useForwardExpose.useForwardExpose();
|
|
22
34
|
return (_ctx, _cache) => {
|
|
23
|
-
return vue.openBlock(), vue.createBlock(vue.unref(
|
|
24
|
-
present: vue.unref(tabs).value === props.value,
|
|
25
|
-
"lazy-mount": vue.unref(renderStrategy).lazyMount,
|
|
26
|
-
"unmount-on-exit": vue.unref(renderStrategy).unmountOnExit,
|
|
27
|
-
immediate: true
|
|
28
|
-
}), {
|
|
35
|
+
return !vue.unref(presence).unmounted ? (vue.openBlock(), vue.createBlock(vue.unref(factory.ark).div, vue.mergeProps({ key: 0 }, mergedProps.value, { "as-child": __props.asChild }), {
|
|
29
36
|
default: vue.withCtx(() => [
|
|
30
37
|
vue.renderSlot(_ctx.$slots, "default")
|
|
31
38
|
]),
|
|
32
39
|
_: 3
|
|
33
|
-
}, 16, ["
|
|
40
|
+
}, 16, ["as-child"])) : vue.createCommentVNode("", true);
|
|
34
41
|
};
|
|
35
42
|
}
|
|
36
43
|
});
|
|
@@ -1,8 +1,11 @@
|
|
|
1
|
-
import { defineComponent, createBlock,
|
|
1
|
+
import { defineComponent, computed, createBlock, createCommentVNode, unref, openBlock, mergeProps as mergeProps$1, withCtx, renderSlot } from 'vue';
|
|
2
|
+
import { mergeProps } from '@zag-js/vue';
|
|
2
3
|
import { useForwardExpose } from '../../utils/use-forward-expose.js';
|
|
3
4
|
import { useRenderStrategyProps } from '../../utils/use-render-strategy.js';
|
|
4
5
|
import { useTabsContext } from './use-tabs-context.js';
|
|
5
|
-
import
|
|
6
|
+
import { usePresence } from '../presence/use-presence.js';
|
|
7
|
+
import { PresenceProvider } from '../presence/use-presence-context.js';
|
|
8
|
+
import { ark } from '../factory.js';
|
|
6
9
|
|
|
7
10
|
const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
8
11
|
__name: "tab-content",
|
|
@@ -14,19 +17,23 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
|
14
17
|
const props = __props;
|
|
15
18
|
const tabs = useTabsContext();
|
|
16
19
|
const renderStrategy = useRenderStrategyProps();
|
|
20
|
+
const presence = usePresence(
|
|
21
|
+
computed(() => ({
|
|
22
|
+
...renderStrategy.value,
|
|
23
|
+
present: tabs.value.value === props.value,
|
|
24
|
+
immediate: true
|
|
25
|
+
}))
|
|
26
|
+
);
|
|
27
|
+
PresenceProvider(presence);
|
|
28
|
+
const mergedProps = computed(() => mergeProps(tabs.value.getContentProps(props), presence.value.presenceProps));
|
|
17
29
|
useForwardExpose();
|
|
18
30
|
return (_ctx, _cache) => {
|
|
19
|
-
return openBlock(), createBlock(unref(
|
|
20
|
-
present: unref(tabs).value === props.value,
|
|
21
|
-
"lazy-mount": unref(renderStrategy).lazyMount,
|
|
22
|
-
"unmount-on-exit": unref(renderStrategy).unmountOnExit,
|
|
23
|
-
immediate: true
|
|
24
|
-
}), {
|
|
31
|
+
return !unref(presence).unmounted ? (openBlock(), createBlock(unref(ark).div, mergeProps$1({ key: 0 }, mergedProps.value, { "as-child": __props.asChild }), {
|
|
25
32
|
default: withCtx(() => [
|
|
26
33
|
renderSlot(_ctx.$slots, "default")
|
|
27
34
|
]),
|
|
28
35
|
_: 3
|
|
29
|
-
}, 16, ["
|
|
36
|
+
}, 16, ["as-child"])) : createCommentVNode("", true);
|
|
30
37
|
};
|
|
31
38
|
}
|
|
32
39
|
});
|
|
@@ -3,9 +3,11 @@
|
|
|
3
3
|
Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: 'Module' } });
|
|
4
4
|
|
|
5
5
|
const vue = require('vue');
|
|
6
|
+
const vue$1 = require('@zag-js/vue');
|
|
6
7
|
const useRenderStrategy = require('../../utils/use-render-strategy.cjs');
|
|
7
8
|
const useForwardExpose = require('../../utils/use-forward-expose.cjs');
|
|
8
|
-
const
|
|
9
|
+
const usePresence = require('../presence/use-presence.cjs');
|
|
10
|
+
const factory = require('../factory.cjs');
|
|
9
11
|
const useTourContext = require('./use-tour-context.cjs');
|
|
10
12
|
|
|
11
13
|
const _sfc_main = /* @__PURE__ */ vue.defineComponent({
|
|
@@ -16,19 +18,21 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
|
|
|
16
18
|
setup(__props) {
|
|
17
19
|
const tour = useTourContext.useTourContext();
|
|
18
20
|
const renderStrategy = useRenderStrategy.useRenderStrategyProps();
|
|
21
|
+
const presence = usePresence.usePresence(
|
|
22
|
+
vue.computed(() => ({
|
|
23
|
+
...renderStrategy.value,
|
|
24
|
+
present: tour.value.open
|
|
25
|
+
}))
|
|
26
|
+
);
|
|
27
|
+
const mergedProps = vue.computed(() => vue$1.mergeProps(tour.value.getBackdropProps(), presence.value.presenceProps));
|
|
19
28
|
useForwardExpose.useForwardExpose();
|
|
20
29
|
return (_ctx, _cache) => {
|
|
21
|
-
return vue.unref(tour).step?.backdrop ? (vue.openBlock(), vue.createBlock(vue.unref(
|
|
22
|
-
hidden: !vue.unref(tour).open,
|
|
23
|
-
present: vue.unref(tour).open,
|
|
24
|
-
"lazy-mount": vue.unref(renderStrategy).lazyMount,
|
|
25
|
-
"unmount-on-exit": vue.unref(renderStrategy).unmountOnExit
|
|
26
|
-
}), {
|
|
30
|
+
return vue.unref(tour).step?.backdrop && !vue.unref(presence).unmounted ? (vue.openBlock(), vue.createBlock(vue.unref(factory.ark).div, vue.mergeProps({ key: 0 }, mergedProps.value, { "as-child": __props.asChild }), {
|
|
27
31
|
default: vue.withCtx(() => [
|
|
28
32
|
vue.renderSlot(_ctx.$slots, "default")
|
|
29
33
|
]),
|
|
30
34
|
_: 3
|
|
31
|
-
}, 16, ["
|
|
35
|
+
}, 16, ["as-child"])) : vue.createCommentVNode("", true);
|
|
32
36
|
};
|
|
33
37
|
}
|
|
34
38
|
});
|
|
@@ -1,7 +1,9 @@
|
|
|
1
|
-
import { defineComponent, createBlock, createCommentVNode, unref, openBlock, mergeProps, withCtx, renderSlot } from 'vue';
|
|
1
|
+
import { defineComponent, computed, createBlock, createCommentVNode, unref, openBlock, mergeProps as mergeProps$1, withCtx, renderSlot } from 'vue';
|
|
2
|
+
import { mergeProps } from '@zag-js/vue';
|
|
2
3
|
import { useRenderStrategyProps } from '../../utils/use-render-strategy.js';
|
|
3
4
|
import { useForwardExpose } from '../../utils/use-forward-expose.js';
|
|
4
|
-
import
|
|
5
|
+
import { usePresence } from '../presence/use-presence.js';
|
|
6
|
+
import { ark } from '../factory.js';
|
|
5
7
|
import { useTourContext } from './use-tour-context.js';
|
|
6
8
|
|
|
7
9
|
const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
@@ -12,19 +14,21 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
|
12
14
|
setup(__props) {
|
|
13
15
|
const tour = useTourContext();
|
|
14
16
|
const renderStrategy = useRenderStrategyProps();
|
|
17
|
+
const presence = usePresence(
|
|
18
|
+
computed(() => ({
|
|
19
|
+
...renderStrategy.value,
|
|
20
|
+
present: tour.value.open
|
|
21
|
+
}))
|
|
22
|
+
);
|
|
23
|
+
const mergedProps = computed(() => mergeProps(tour.value.getBackdropProps(), presence.value.presenceProps));
|
|
15
24
|
useForwardExpose();
|
|
16
25
|
return (_ctx, _cache) => {
|
|
17
|
-
return unref(tour).step?.backdrop ? (openBlock(), createBlock(unref(
|
|
18
|
-
hidden: !unref(tour).open,
|
|
19
|
-
present: unref(tour).open,
|
|
20
|
-
"lazy-mount": unref(renderStrategy).lazyMount,
|
|
21
|
-
"unmount-on-exit": unref(renderStrategy).unmountOnExit
|
|
22
|
-
}), {
|
|
26
|
+
return unref(tour).step?.backdrop && !unref(presence).unmounted ? (openBlock(), createBlock(unref(ark).div, mergeProps$1({ key: 0 }, mergedProps.value, { "as-child": __props.asChild }), {
|
|
23
27
|
default: withCtx(() => [
|
|
24
28
|
renderSlot(_ctx.$slots, "default")
|
|
25
29
|
]),
|
|
26
30
|
_: 3
|
|
27
|
-
}, 16, ["
|
|
31
|
+
}, 16, ["as-child"])) : createCommentVNode("", true);
|
|
28
32
|
};
|
|
29
33
|
}
|
|
30
34
|
});
|
package/dist/index.cjs
CHANGED
|
@@ -324,6 +324,15 @@ const useListbox = require('./components/listbox/use-listbox.cjs');
|
|
|
324
324
|
const useListboxContext = require('./components/listbox/use-listbox-context.cjs');
|
|
325
325
|
const useListboxItemContext = require('./components/listbox/use-listbox-item-context.cjs');
|
|
326
326
|
const listbox = require('./components/listbox/listbox.cjs');
|
|
327
|
+
const marqueeContent_vue_vue_type_script_setup_true_lang = require('./components/marquee/marquee-content.vue.cjs');
|
|
328
|
+
const marqueeContext_vue_vue_type_script_setup_true_lang = require('./components/marquee/marquee-context.vue.cjs');
|
|
329
|
+
const marqueeEdge_vue_vue_type_script_setup_true_lang = require('./components/marquee/marquee-edge.vue.cjs');
|
|
330
|
+
const marqueeRoot_vue_vue_type_script_setup_true_lang = require('./components/marquee/marquee-root.vue.cjs');
|
|
331
|
+
const marqueeRootProvider_vue_vue_type_script_setup_true_lang = require('./components/marquee/marquee-root-provider.vue.cjs');
|
|
332
|
+
const marqueeViewport_vue_vue_type_script_setup_true_lang = require('./components/marquee/marquee-viewport.vue.cjs');
|
|
333
|
+
const useMarquee = require('./components/marquee/use-marquee.cjs');
|
|
334
|
+
const useMarqueeContext = require('./components/marquee/use-marquee-context.cjs');
|
|
335
|
+
const marquee$1 = require('./components/marquee/marquee.cjs');
|
|
327
336
|
const menuArrowTip_vue_vue_type_script_setup_true_lang = require('./components/menu/menu-arrow-tip.vue.cjs');
|
|
328
337
|
const menuArrow_vue_vue_type_script_setup_true_lang = require('./components/menu/menu-arrow.vue.cjs');
|
|
329
338
|
const menuCheckboxItem_vue_vue_type_script_setup_true_lang = require('./components/menu/menu-checkbox-item.vue.cjs');
|
|
@@ -716,6 +725,7 @@ const editable = require('@zag-js/editable');
|
|
|
716
725
|
const fileUpload = require('@zag-js/file-upload');
|
|
717
726
|
const floatingPanel = require('@zag-js/floating-panel');
|
|
718
727
|
const hoverCard = require('@zag-js/hover-card');
|
|
728
|
+
const marquee = require('@zag-js/marquee');
|
|
719
729
|
const menu = require('@zag-js/menu');
|
|
720
730
|
const numberInput = require('@zag-js/number-input');
|
|
721
731
|
const pagination = require('@zag-js/pagination');
|
|
@@ -1073,6 +1083,15 @@ exports.useListbox = useListbox.useListbox;
|
|
|
1073
1083
|
exports.useListboxContext = useListboxContext.useListboxContext;
|
|
1074
1084
|
exports.useListboxItemContext = useListboxItemContext.useListboxItemContext;
|
|
1075
1085
|
exports.Listbox = listbox;
|
|
1086
|
+
exports.MarqueeContent = marqueeContent_vue_vue_type_script_setup_true_lang.default;
|
|
1087
|
+
exports.MarqueeContext = marqueeContext_vue_vue_type_script_setup_true_lang.default;
|
|
1088
|
+
exports.MarqueeEdge = marqueeEdge_vue_vue_type_script_setup_true_lang.default;
|
|
1089
|
+
exports.MarqueeRoot = marqueeRoot_vue_vue_type_script_setup_true_lang.default;
|
|
1090
|
+
exports.MarqueeRootProvider = marqueeRootProvider_vue_vue_type_script_setup_true_lang.default;
|
|
1091
|
+
exports.MarqueeViewport = marqueeViewport_vue_vue_type_script_setup_true_lang.default;
|
|
1092
|
+
exports.useMarquee = useMarquee.useMarquee;
|
|
1093
|
+
exports.useMarqueeContext = useMarqueeContext.useMarqueeContext;
|
|
1094
|
+
exports.Marquee = marquee$1;
|
|
1076
1095
|
exports.MenuArrowTip = menuArrowTip_vue_vue_type_script_setup_true_lang.default;
|
|
1077
1096
|
exports.MenuArrow = menuArrow_vue_vue_type_script_setup_true_lang.default;
|
|
1078
1097
|
exports.MenuCheckboxItem = menuCheckboxItem_vue_vue_type_script_setup_true_lang.default;
|
|
@@ -1507,6 +1526,10 @@ Object.defineProperty(exports, "hoverCardAnatomy", {
|
|
|
1507
1526
|
enumerable: true,
|
|
1508
1527
|
get: () => hoverCard.anatomy
|
|
1509
1528
|
});
|
|
1529
|
+
Object.defineProperty(exports, "marqueeAnatomy", {
|
|
1530
|
+
enumerable: true,
|
|
1531
|
+
get: () => marquee.anatomy
|
|
1532
|
+
});
|
|
1510
1533
|
Object.defineProperty(exports, "menuAnatomy", {
|
|
1511
1534
|
enumerable: true,
|
|
1512
1535
|
get: () => menu.anatomy
|
package/dist/index.js
CHANGED
|
@@ -341,6 +341,16 @@ export { useListboxContext } from './components/listbox/use-listbox-context.js';
|
|
|
341
341
|
export { useListboxItemContext } from './components/listbox/use-listbox-item-context.js';
|
|
342
342
|
import * as listbox from './components/listbox/listbox.js';
|
|
343
343
|
export { listbox as Listbox };
|
|
344
|
+
export { default as MarqueeContent } from './components/marquee/marquee-content.vue.js';
|
|
345
|
+
export { default as MarqueeContext } from './components/marquee/marquee-context.vue.js';
|
|
346
|
+
export { default as MarqueeEdge } from './components/marquee/marquee-edge.vue.js';
|
|
347
|
+
export { default as MarqueeRoot } from './components/marquee/marquee-root.vue.js';
|
|
348
|
+
export { default as MarqueeRootProvider } from './components/marquee/marquee-root-provider.vue.js';
|
|
349
|
+
export { default as MarqueeViewport } from './components/marquee/marquee-viewport.vue.js';
|
|
350
|
+
export { useMarquee } from './components/marquee/use-marquee.js';
|
|
351
|
+
export { useMarqueeContext } from './components/marquee/use-marquee-context.js';
|
|
352
|
+
import * as marquee from './components/marquee/marquee.js';
|
|
353
|
+
export { marquee as Marquee };
|
|
344
354
|
export { default as MenuArrowTip } from './components/menu/menu-arrow-tip.vue.js';
|
|
345
355
|
export { default as MenuArrow } from './components/menu/menu-arrow.vue.js';
|
|
346
356
|
export { default as MenuCheckboxItem } from './components/menu/menu-checkbox-item.vue.js';
|
|
@@ -760,6 +770,7 @@ export { anatomy as editableAnatomy } from '@zag-js/editable';
|
|
|
760
770
|
export { anatomy as fileUploadAnatomy } from '@zag-js/file-upload';
|
|
761
771
|
export { anatomy as floatingPanelAnatomy } from '@zag-js/floating-panel';
|
|
762
772
|
export { anatomy as hoverCardAnatomy } from '@zag-js/hover-card';
|
|
773
|
+
export { anatomy as marqueeAnatomy } from '@zag-js/marquee';
|
|
763
774
|
export { anatomy as menuAnatomy } from '@zag-js/menu';
|
|
764
775
|
export { anatomy as numberInputAnatomy } from '@zag-js/number-input';
|
|
765
776
|
export { anatomy as paginationAnatomy } from '@zag-js/pagination';
|