@will-ui/vue 1.0.0

package/dist/components/time/TimePicker.js

@@ -0,0 +1,162 @@
+import { effectiveBgVar, effectiveSizeVar, effectiveTextVar, mergeStyle, propColorToCssVars, propSizeToCssVars, toCssVarsStyle } from "../../util/cssVars.js";
+import Layer_default from "../layer/Layer.js";
+import Trigger_default from "../trigger/Trigger.js";
+import { useUII18n } from "../../use/useUII18n.js";
+import Dial_default from "./Dial.js";
+import { computed, createVNode, defineComponent, inject, ref, watch } from "vue";
+//#region components/time/TimePicker.tsx
+var validate_hms = (hms) => {
+	if (hms === void 0 || !hms) return true;
+	else {
+		const len = hms.length;
+		const [_h, _m, _s] = hms.split(":");
+		if (len === 2 || len === 5 || len === 8) {
+			const h = +_h;
+			const isValidHour = h >= 0 && h < 24;
+			if (len === 2) return isValidHour;
+			else if (len === 5) {
+				const m = +_m;
+				return isValidHour && m >= 0 && m < 60;
+			} else {
+				const m = +_m;
+				const s = +_s;
+				return isValidHour && m >= 0 && m < 60 && s >= 0 && s < 60;
+			}
+		}
+		return false;
+	}
+};
+var TimePicker_default = /* @__PURE__ */ defineComponent({
+	name: "TimePicker",
+	components: {
+		Trigger: Trigger_default,
+		Layer: Layer_default,
+		Dial: Dial_default
+	},
+	props: {
+		show: {
+			type: Boolean,
+			default: false
+		},
+		clearable: { type: Boolean },
+		disabled: { type: Boolean },
+		block: Boolean,
+		placeholder: {
+			type: [
+				String,
+				Object,
+				Array
+			],
+			default: void 0
+		},
+		modelValue: {
+			type: String,
+			default: void 0,
+			validator: validate_hms
+		},
+		format: {
+			type: String,
+			default: "HH:mm:ss"
+		},
+		/** 实例高度（px），写入 `--w-prop-time-picker-size` */
+		size: {
+			type: Number,
+			default: void 0
+		},
+		/** 品牌主色 → `--w-prop-time-picker-color` */
+		color: {
+			type: String,
+			default: void 0
+		},
+		cssVars: {
+			type: Object,
+			default: void 0
+		},
+		nearby: {
+			type: Boolean,
+			default: false
+		}
+	},
+	emits: ["update:show", "update:modelValue"],
+	setup(props, { emit, attrs }) {
+		const formItem = inject("formItem", void 0);
+		const { t } = useUII18n();
+		const timePlaceholder = computed(() => props.placeholder || t("time.placeholder"));
+		const visible = ref(props.show);
+		const text = computed(() => {
+			return props.modelValue || "";
+		});
+		const sizeVars = computed(() => toCssVarsStyle({
+			...propSizeToCssVars("time-picker", props.size),
+			...propColorToCssVars("time-picker", props.color),
+			"--w-prop-trigger-size": effectiveSizeVar("time-picker"),
+			"--w-prop-trigger-bg-color": effectiveBgVar("time-picker"),
+			"--w-prop-trigger-text-color": effectiveTextVar("time-picker"),
+			"--w-prop-layer-bg-color": effectiveBgVar("time-picker"),
+			"--w-prop-layer-text-color": effectiveTextVar("time-picker"),
+			...props.cssVars
+		}));
+		const rootStyle = computed(() => mergeStyle(sizeVars.value, attrs.style));
+		const layerOptions = computed(() => {
+			return {
+				immediate: true,
+				show: visible.value,
+				nearby: props.nearby,
+				disabled: props.disabled,
+				placement: "bottom-start",
+				gap: 2,
+				hasArrow: false,
+				transitionName: "w-slide-y",
+				layerClass: "w-time-picker",
+				layerStyle: sizeVars.value,
+				"onUpdate:show": (b) => {
+					visible.value = b;
+				}
+			};
+		});
+		function clear() {
+			emit("update:modelValue", void 0);
+			formItem?.validate("change");
+		}
+		function renderTrigger() {
+			const triggerOptions = {
+				class: attrs.class,
+				placeholder: timePlaceholder.value,
+				disabled: props.disabled,
+				block: props.block,
+				clearable: props.clearable,
+				text: text.value,
+				active: visible.value,
+				style: rootStyle.value,
+				onClear: () => {
+					clear();
+				}
+			};
+			return createVNode(Trigger_default, triggerOptions, null);
+		}
+		function renderContent() {
+			return createVNode(Dial_default, {
+				"format": props.format,
+				"value": props.modelValue,
+				"onChange": (v) => {
+					emit("update:modelValue", v);
+					formItem?.validate("change");
+				}
+			}, null);
+		}
+		watch(() => props.show, (b) => {
+			visible.value = b;
+		});
+		watch(visible, (b) => {
+			emit("update:show", b);
+		});
+		return () => createVNode(Layer_default, layerOptions.value, {
+			trigger: renderTrigger,
+			default: renderContent
+		});
+	}
+});
+//#endregion
+export { TimePicker_default as default };
+
+//# sourceMappingURL=TimePicker.js.map

package/dist/components/time/TimePicker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TimePicker.js","names":["computed","defineComponent","ref","watch","inject","createVNode","_createVNode","effectiveSizeVar","effectiveBgVar","effectiveTextVar","mergeStyle","propSizeToCssVars","propColorToCssVars","toCssVarsStyle","Trigger","Layer","Dial","useUII18n","validate_hms","hms","undefined","len","length","_h","_m","_s","split","h","isValidHour","m","s","name","components","props","show","type","Boolean","default","clearable","disabled","block","placeholder","String","Object","Array","modelValue","validator","format","size","Number","color","cssVars","nearby","emits","setup","emit","attrs","formItem","t","timePlaceholder","visible","text","sizeVars","rootStyle","value","style","layerOptions","immediate","placement","gap","hasArrow","transitionName","layerClass","layerStyle","b","clear","validate","renderTrigger","triggerOptions","class","active","onClear","renderContent","v","trigger"],"sources":["../../../components/time/TimePicker.tsx"],"sourcesContent":["import { computed, defineComponent, ref, watch, inject } from 'vue'\r\nimport type { PropType } from 'vue'\r\nimport type { TimeFormatType } from '../../config/types'\r\nimport {\r\n  effectiveSizeVar,\r\n  effectiveBgVar,\r\n  effectiveTextVar,\r\n  mergeStyle,\r\n  propSizeToCssVars,\r\n  propColorToCssVars,\r\n  toCssVarsStyle,\r\n  type CssVars,\r\n} from '../../util'\r\nimport Trigger from '../trigger/index'\r\nimport Layer from '../layer/index'\r\nimport Dial from './Dial.vue'\r\nimport { useUII18n } from '../../use/useUII18n'\r\n\r\nconst validate_hms = (hms?: string) => {\r\n  if (hms === undefined || !hms) {\r\n    return true\r\n  } else {\r\n    const len = hms.length\r\n    const [_h, _m, _s] = hms.split(':')\r\n\r\n    if (len === 2 || len === 5 || len === 8) {\r\n      const h = +_h\r\n      const isValidHour = h >= 0 && h < 24\r\n      if (len === 2) {\r\n        return isValidHour\r\n      } else if (len === 5) {\r\n        const m = +_m\r\n        return isValidHour && m >= 0 && m < 60\r\n      } else {\r\n        const m = +_m\r\n        const s = +_s\r\n        return isValidHour && m >= 0 && m < 60 && s >= 0 && s < 60\r\n      }\r\n    }\r\n    return false\r\n  }\r\n}\r\n\r\nexport default defineComponent({\r\n  name: 'TimePicker',\r\n  components: { Trigger, Layer, Dial },\r\n  props: {\r\n    show: { type: Boolean, default: false },\r\n    clearable: { type: Boolean },\r\n    disabled: { type: Boolean },\r\n    block: Boolean,\r\n    placeholder: { type: [String, Object, Array], default: undefined },\r\n    modelValue: {\r\n      type: String,\r\n      default: undefined,\r\n      validator: validate_hms,\r\n    },\r\n    format: { type: String as PropType<TimeFormatType>, default: 'HH:mm:ss' },\r\n    /** 实例高度（px），写入 `--w-prop-time-picker-size` */\r\n    size: { type: Number, default: undefined },\r\n    /** 品牌主色 → `--w-prop-time-picker-color` */\r\n    color: { type: String, default: undefined },\r\n    cssVars: { type: Object as PropType<CssVars>, default: undefined },\r\n    nearby: { type: Boolean, default: false },\r\n  },\r\n  emits: ['update:show', 'update:modelValue'],\r\n  setup(props, { emit, attrs }) {\r\n    const formItem: any = inject('formItem', undefined)\r\n    const { t } = useUII18n()\r\n\r\n    const timePlaceholder = computed(\r\n      () => props.placeholder || t('time.placeholder'),\r\n    )\r\n\r\n    const visible = ref(props.show)\r\n    const text = computed(() => {\r\n      return props.modelValue || ''\r\n    })\r\n\r\n    const sizeVars = computed(() =>\r\n      toCssVarsStyle({\r\n        ...propSizeToCssVars('time-picker', props.size),\r\n        ...propColorToCssVars('time-picker', props.color),\r\n        '--w-prop-trigger-size': effectiveSizeVar('time-picker'),\r\n        '--w-prop-trigger-bg-color': effectiveBgVar('time-picker'),\r\n        '--w-prop-trigger-text-color': effectiveTextVar('time-picker'),\r\n        '--w-prop-layer-bg-color': effectiveBgVar('time-picker'),\r\n        '--w-prop-layer-text-color': effectiveTextVar('time-picker'),\r\n        ...props.cssVars,\r\n      }),\r\n    )\r\n    const rootStyle = computed(() =>\r\n      mergeStyle(sizeVars.value, attrs.style as Record<string, any> | undefined),\r\n    )\r\n\r\n    const layerOptions = computed(() => {\r\n      return {\r\n        immediate: true,\r\n        show: visible.value,\r\n        nearby: props.nearby,\r\n        disabled: props.disabled,\r\n        placement: 'bottom-start',\r\n        gap: 2,\r\n        hasArrow: false,\r\n        transitionName: 'w-slide-y',\r\n        layerClass: 'w-time-picker',\r\n        layerStyle: sizeVars.value,\r\n        'onUpdate:show': (b: boolean) => {\r\n          visible.value = b\r\n        },\r\n      } as Record<any, any>\r\n    })\r\n\r\n    function clear() {\r\n      emit('update:modelValue', undefined)\r\n      formItem?.validate('change')\r\n    }\r\n    function renderTrigger() {\r\n      const triggerOptions = {\r\n        class: attrs.class,\r\n        placeholder: timePlaceholder.value,\r\n        disabled: props.disabled,\r\n        block: props.block,\r\n        clearable: props.clearable,\r\n        text: text.value,\r\n        active: visible.value,\r\n        style: rootStyle.value,\r\n        onClear: () => {\r\n          clear()\r\n        },\r\n      }\r\n      return <Trigger {...triggerOptions} />\r\n    }\r\n    function renderContent() {\r\n      return (\r\n        <Dial\r\n          format={props.format}\r\n          value={props.modelValue}\r\n          onChange={(v: string | undefined) => {\r\n            emit('update:modelValue', v)\r\n            formItem?.validate('change')\r\n          }}\r\n        />\r\n      )\r\n    }\r\n\r\n    watch(\r\n      () => props.show,\r\n      (b: boolean) => {\r\n        visible.value = b\r\n      },\r\n    )\r\n    watch(visible, (b: boolean) => {\r\n      emit('update:show', b)\r\n    })\r\n\r\n    return () => (\r\n      <Layer {...layerOptions.value}>\r\n        {{\r\n          trigger: renderTrigger,\r\n          default: renderContent,\r\n        }}\r\n      </Layer>\r\n    )\r\n  },\r\n})\r\n"],"mappings":"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"}

package/dist/components/time/_use/useTimeModules.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/time/index.d.ts

@@ -0,0 +1 @@
+export { default } from './TimePicker';

package/dist/components/time/style/dial.css

@@ -0,0 +1 @@
+@import '../../../theme/tokens/components/time/dial.css';

package/dist/components/time/style/index.css

@@ -0,0 +1 @@
+@import '../../../theme/tokens/components/time/index.css';

package/dist/components/toggle/Toggle.d.ts

@@ -0,0 +1,140 @@
+import { PropType } from 'vue';
+import { DataItemType } from '../../config/types';
+type TransformType = 'scale' | 'translate';
+interface EmitOptions {
+    prev: () => void;
+    next: () => void;
+    delay: (handler?: Function | number, delayTime?: number) => Promise<void>;
+}
+declare const _default: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    dynamic: BooleanConstructor;
+    data: {
+        type: PropType<DataItemType[]>;
+        default: () => any[];
+    };
+    item: {
+        type: PropType<DataItemType>;
+    };
+    index: {
+        type: NumberConstructor;
+        default: number;
+    };
+    itemClass: {
+        type: (StringConstructor | ArrayConstructor | ObjectConstructor)[];
+    };
+    transform: {
+        type: PropType<TransformType>;
+        default: string;
+    };
+    scale: {
+        type: PropType<{
+            from: number;
+            to: number;
+        }>;
+        default: () => {
+            from: number;
+            to: number;
+        };
+    };
+    direction: {
+        type: PropType<"x" | "y">;
+        default: string;
+    };
+    carousel: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    duration: {
+        type: NumberConstructor;
+        default: number;
+    };
+    wheel: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    rowKey: {
+        type: FunctionConstructor;
+    };
+    alwaysOneWay: {
+        type: BooleanConstructor;
+    };
+}>, () => import("vue/jsx-runtime").JSX.Element, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    afterToggle: ({ prev, next, delay }: EmitOptions) => true;
+    wheel: (options: {
+        event: WheelEvent;
+    } & EmitOptions) => true;
+    'update:index': (i: number) => true;
+}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    dynamic: BooleanConstructor;
+    data: {
+        type: PropType<DataItemType[]>;
+        default: () => any[];
+    };
+    item: {
+        type: PropType<DataItemType>;
+    };
+    index: {
+        type: NumberConstructor;
+        default: number;
+    };
+    itemClass: {
+        type: (StringConstructor | ArrayConstructor | ObjectConstructor)[];
+    };
+    transform: {
+        type: PropType<TransformType>;
+        default: string;
+    };
+    scale: {
+        type: PropType<{
+            from: number;
+            to: number;
+        }>;
+        default: () => {
+            from: number;
+            to: number;
+        };
+    };
+    direction: {
+        type: PropType<"x" | "y">;
+        default: string;
+    };
+    carousel: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    duration: {
+        type: NumberConstructor;
+        default: number;
+    };
+    wheel: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    rowKey: {
+        type: FunctionConstructor;
+    };
+    alwaysOneWay: {
+        type: BooleanConstructor;
+    };
+}>> & Readonly<{
+    onWheel?: (options: {
+        event: WheelEvent;
+    } & EmitOptions) => any;
+    onAfterToggle?: (args_0: EmitOptions) => any;
+    "onUpdate:index"?: (i: number) => any;
+}>, {
+    scale: {
+        from: number;
+        to: number;
+    };
+    data: DataItemType[];
+    direction: "x" | "y";
+    wheel: boolean;
+    duration: number;
+    index: number;
+    transform: TransformType;
+    dynamic: boolean;
+    carousel: boolean;
+    alwaysOneWay: boolean;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+export default _default;

package/dist/components/toggle/Toggle.js

@@ -0,0 +1,209 @@
+import { isBoolean, isObject } from "../../util/tools.js";
+import useToggleArray from "../../use/toggle/useToggleArray.js";
+import useDelay from "../../use/useDelay.js";
+import useMousePositionInElement from "../../use/useMousePositionInElement.js";
+import { Fragment, Transition, TransitionGroup, computed, createVNode, defineComponent, isVNode, mergeProps, nextTick, normalizeClass, onMounted, ref, unref, watch } from "vue";
+//#region components/toggle/Toggle.tsx
+function _isSlot(s) {
+	return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !isVNode(s);
+}
+var Toggle_default = /* @__PURE__ */ defineComponent({
+	inheritAttrs: false,
+	name: "Toggle",
+	props: {
+		dynamic: Boolean,
+		data: {
+			type: Array,
+			default: () => []
+		},
+		item: { type: String },
+		index: {
+			type: Number,
+			default: 0
+		},
+		itemClass: { type: [
+			String,
+			Array,
+			Object
+		] },
+		transform: {
+			type: String,
+			default: "scale"
+		},
+		scale: {
+			type: Object,
+			default: () => ({
+				from: 0,
+				to: 2
+			})
+		},
+		direction: {
+			type: String,
+			default: "x"
+		},
+		carousel: {
+			type: Boolean,
+			default: false
+		},
+		duration: {
+			type: Number,
+			default: 3600
+		},
+		wheel: {
+			type: Boolean,
+			default: true
+		},
+		rowKey: { type: Function },
+		alwaysOneWay: { type: Boolean }
+	},
+	emits: {
+		afterToggle: ({ prev, next, delay }) => {
+			return true;
+		},
+		wheel: (options) => {
+			return true;
+		},
+		"update:index": (i) => true
+	},
+	setup(props, { attrs, slots, emit, expose }) {
+		const rootElement = ref();
+		const isMounted = ref(false);
+		const { delay } = useDelay(props.duration);
+		const isPrev = ref(false);
+		const { x, y } = useMousePositionInElement(rootElement, "click");
+		const { prev: _prev, next: _next, item, index, set } = useToggleArray(computed(() => props.data));
+		const name = computed(() => {
+			const t = props.transform;
+			if (t === "scale") {
+				if (isPrev.value) return "w-toggle-scale-prev";
+				return "w-toggle-scale";
+			} else if (t === "translate") {
+				if (props.direction === "y") {
+					if (isPrev.value) return "w-toggle-translate-y-prev";
+					return "w-toggle-translate-y";
+				} else {
+					if (isPrev.value) return "w-toggle-translate-prev";
+					return "w-toggle-translate";
+				}
+			}
+		});
+		const klass = computed(() => {
+			props.transform;
+			return ["w-toggle", { "w-overflow-hidden": isMounted.value }];
+		});
+		const options = computed(() => {
+			return mergeProps({
+				class: klass.value,
+				style: {
+					"--__scale-from": props.transform === "scale" && props.scale.from,
+					"--__scale-to": props.transform === "scale" && props.scale.to,
+					"--__origin-x": x.value === void 0 ? "center" : `${x.value}px`,
+					"--__origin-y": y.value === void 0 ? "center" : `${y.value}px`
+				},
+				onWheel: props.wheel ? (e) => {
+					e.preventDefault();
+					e.stopPropagation();
+					emit("wheel", {
+						event: e,
+						prev,
+						next,
+						delay
+					});
+				} : null
+			}, attrs);
+		});
+		const itemOptions = computed(() => {
+			props.transform;
+			return mergeProps({ class: "w-toggle-item" }, { class: normalizeClass(props.itemClass) });
+		});
+		function prev() {
+			isPrev.value = true;
+			if (props.dynamic) {} else _prev();
+		}
+		function next() {
+			isPrev.value = false;
+			if (props.dynamic) {} else _next();
+		}
+		function afterToggle() {
+			emit("afterToggle", {
+				prev,
+				next,
+				delay
+			});
+		}
+		expose({
+			prev,
+			next,
+			set
+		});
+		watch(() => props.index, (i, old_i) => {
+			if (!props.dynamic) {
+				if (!props.alwaysOneWay) {
+					if (i > old_i) isPrev.value = false;
+					else isPrev.value = true;
+				}
+				set({ index: props.index });
+			}
+		}, { immediate: true });
+		watch(index, (i) => {
+			emit("update:index", i);
+		});
+		const carouselStarted = ref(false);
+		onMounted(() => {
+			isMounted.value = true;
+		});
+		watch(() => [
+			props.carousel,
+			props.dynamic,
+			props.data?.length ?? 0
+		], ([carousel, dynamic, len]) => {
+			if (!carousel || dynamic || !len) {
+				carouselStarted.value = false;
+				return;
+			}
+			if (carouselStarted.value) return;
+			carouselStarted.value = true;
+			nextTick(() => afterToggle());
+		}, { immediate: true });
+		return () => {
+			let _slot;
+			const dynamicPart = props.dynamic && createVNode(TransitionGroup, {
+				"name": name.value,
+				"onAfterEnter": afterToggle
+			}, _isSlot(_slot = props.data.map((el, i) => {
+				let k = i;
+				if (props.rowKey && typeof props.rowKey === "function") k = props.rowKey(el, i);
+				else k = isObject(el) ? JSON.stringify(el) : isBoolean(el) ? Number(el) : el;
+				return createVNode("div", mergeProps(itemOptions.value, { "key": k }), [slots.default?.({
+					item: el,
+					index: i,
+					prev,
+					next
+				})]);
+			})) ? _slot : { default: () => [_slot] });
+			const staticPart = props.data.map((el, i) => {
+				return createVNode(Transition, {
+					"name": name.value,
+					"onAfterEnter": afterToggle
+				}, { default: () => [i === index.value && createVNode("div", itemOptions.value, [slots.default?.({
+					item: el,
+					index: i,
+					prev,
+					next
+				})])] });
+			});
+			return createVNode(Fragment, null, [slots.use?.({
+				...props,
+				prev,
+				next,
+				item: unref(item),
+				index: unref(index),
+				set
+			}), createVNode("div", mergeProps(options.value, { "ref": rootElement }), [props.dynamic ? dynamicPart : staticPart])]);
+		};
+	}
+});
+//#endregion
+export { Toggle_default as default };
+
+//# sourceMappingURL=Toggle.js.map

package/dist/components/toggle/Toggle.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Toggle.js","names":["ref","computed","defineComponent","watch","unref","mergeProps","TransitionGroup","onMounted","Transition","normalizeClass","nextTick","_mergeProps","createVNode","_createVNode","isVNode","_isVNode","Fragment","_Fragment","useToggleArray","useDelay","useMousePositionInElement","isBoolean","isObject","_isSlot","s","Object","prototype","toString","call","inheritAttrs","name","props","dynamic","Boolean","data","type","Array","default","item","String","index","Number","itemClass","transform","scale","from","to","direction","carousel","duration","wheel","rowKey","Function","alwaysOneWay","emits","afterToggle","prev","next","delay","options","i","setup","attrs","slots","emit","expose","rootElement","isMounted","isPrev","x","y","_prev","_next","set","t","value","klass","p","class","style","undefined","onWheel","e","preventDefault","stopPropagation","event","itemOptions","old_i","immediate","carouselStarted","length","len","_slot","dynamicPart","map","el","k","JSON","stringify","staticPart","use"],"sources":["../../../components/toggle/Toggle.tsx"],"sourcesContent":["import {\r\n  h,\r\n  ref,\r\n  computed,\r\n  defineComponent,\r\n  watch,\r\n  unref,\r\n  mergeProps,\r\n  TransitionGroup,\r\n  onMounted,\r\n  Transition,\r\n  normalizeClass,\r\n  nextTick,\r\n} from 'vue'\r\nimport type { PropType, ComputedRef } from 'vue'\r\nimport useToggleArray from '../../use/toggle/useToggleArray'\r\nimport useDelay from '../../use/useDelay'\r\nimport useMousePositionInElement from '../../use/useMousePositionInElement'\r\nimport { isBoolean, isObject } from '../../util/index'\r\nimport type { DataItemType } from '../../config/types'\r\ntype TransformType = 'scale' | 'translate'\r\ninterface EmitOptions {\r\n  prev: () => void\r\n  next: () => void\r\n  delay: (handler?: Function | number, delayTime?: number) => Promise<void>\r\n}\r\nexport default defineComponent({\r\n  inheritAttrs: false,\r\n  name: 'Toggle',\r\n  props: {\r\n    dynamic: Boolean,\r\n    data: {\r\n      type: Array as PropType<DataItemType[]>,\r\n      default: () => [],\r\n    },\r\n    //item和index任给其一\r\n    item: {\r\n      type: String as PropType<DataItemType>,\r\n    },\r\n    //TODO: 可以做成v-model:index\r\n    index: {\r\n      type: Number,\r\n      default: 0,\r\n    },\r\n    itemClass: { type: [String, Array, Object] },\r\n    transform: {\r\n      type: String as PropType<TransformType>,\r\n      default: 'scale',\r\n    },\r\n    scale: {\r\n      type: Object as PropType<{ from: number; to: number }>,\r\n      default: () => ({ from: 0, to: 2 }),\r\n    },\r\n    //当transform时translate时，direction生效\r\n    direction: {\r\n      type: String as PropType<'x' | 'y'>,\r\n      default: 'x',\r\n    },\r\n    carousel: {\r\n      type: Boolean,\r\n      default: false,\r\n    },\r\n    //如果是轮播图的情况，则此参数有效\r\n    duration: {\r\n      type: Number,\r\n      default: 3600,\r\n    },\r\n    wheel: { type: Boolean, default: true },\r\n    rowKey: { type: Function },\r\n    //一直一个方向，\r\n    alwaysOneWay: { type: Boolean },\r\n  },\r\n  emits: {\r\n    afterToggle: ({ prev, next, delay }: EmitOptions) => {\r\n      return true\r\n    },\r\n    wheel: (options: { event: WheelEvent } & EmitOptions) => {\r\n      return true\r\n    },\r\n    'update:index': (i: number) => true,\r\n  },\r\n  setup(props, { attrs, slots, emit, expose }) {\r\n    const rootElement = ref<HTMLElement>()\r\n    const isMounted = ref(false)\r\n    const { delay } = useDelay(props.duration)\r\n    const isPrev = ref(false)\r\n    const { x, y } = useMousePositionInElement(rootElement, 'click')\r\n    const {\r\n      prev: _prev,\r\n      next: _next,\r\n      item,\r\n      index,\r\n      set,\r\n    } = useToggleArray<DataItemType>(computed(() => props.data))\r\n    const name = computed(() => {\r\n      const t = props.transform\r\n      if (t === 'scale') {\r\n        if (isPrev.value) {\r\n          return 'w-toggle-scale-prev'\r\n        }\r\n        return 'w-toggle-scale'\r\n      } else if (t === 'translate') {\r\n        if (props.direction === 'y') {\r\n          if (isPrev.value) {\r\n            return 'w-toggle-translate-y-prev'\r\n          }\r\n          return 'w-toggle-translate-y'\r\n        } else {\r\n          if (isPrev.value) {\r\n            return 'w-toggle-translate-prev'\r\n          }\r\n          return 'w-toggle-translate'\r\n        }\r\n      }\r\n    })\r\n    const klass = computed(() => {\r\n      const t = props.transform\r\n      return ['w-toggle', { 'w-overflow-hidden': isMounted.value }]\r\n    })\r\n    const options = computed(() => {\r\n      const p = mergeProps(\r\n        {\r\n          class: klass.value,\r\n          style: {\r\n            '--__scale-from': props.transform === 'scale' && props.scale.from,\r\n            '--__scale-to': props.transform === 'scale' && props.scale.to,\r\n            '--__origin-x': x.value === undefined ? 'center' : `${x.value}px`,\r\n            '--__origin-y': y.value === undefined ? 'center' : `${y.value}px`,\r\n          },\r\n\r\n          onWheel: props.wheel\r\n            ? (e: WheelEvent) => {\r\n                e.preventDefault()\r\n                e.stopPropagation()\r\n                emit('wheel', { event: e, prev, next, delay })\r\n              }\r\n            : null,\r\n        },\r\n        attrs,\r\n      )\r\n      return p\r\n    })\r\n    const itemOptions = computed(() => {\r\n      const t = props.transform\r\n      return mergeProps(\r\n        {\r\n          class: 'w-toggle-item',\r\n        },\r\n        { class: normalizeClass(props.itemClass) },\r\n      )\r\n    })\r\n\r\n    function prev() {\r\n      isPrev.value = true\r\n      if (props.dynamic) {\r\n      } else {\r\n        _prev()\r\n      }\r\n    }\r\n    function next() {\r\n      isPrev.value = false\r\n      if (props.dynamic) {\r\n      } else {\r\n        _next()\r\n      }\r\n    }\r\n\r\n    function afterToggle() {\r\n      // console.log(el)\r\n      emit('afterToggle', { prev, next, delay })\r\n    }\r\n\r\n    expose({\r\n      prev,\r\n      next,\r\n      set,\r\n    })\r\n\r\n    watch(\r\n      () => props.index,\r\n      (i, old_i) => {\r\n        if (!props.dynamic) {\r\n          // if (old_i !== undefined) {\r\n          //   if (i > old_i) {\r\n          //     next()\r\n          //   } else {\r\n          //     prev()\r\n          //   }\r\n          // }\r\n          if (!props.alwaysOneWay) {\r\n            if (i > old_i) {\r\n              isPrev.value = false\r\n            } else {\r\n              isPrev.value = true\r\n            }\r\n          }\r\n          set({ index: props.index })\r\n        }\r\n      },\r\n      { immediate: true },\r\n    )\r\n    watch(index, (i) => {\r\n      emit('update:index', i)\r\n    })\r\n\r\n    const carouselStarted = ref(false)\r\n\r\n    onMounted(() => {\r\n      isMounted.value = true\r\n    })\r\n\r\n    // 轮播 kickstart：等数据就绪后再 nextTick 触发，避免 setup 同步 next() 跳过首屏过渡、\r\n    // 导致 onAfterEnter 永不回调、轮播链条断裂。后续由 afterToggle + delay(next) 驱动。\r\n    watch(\r\n      () =>\r\n        [props.carousel, props.dynamic, props.data?.length ?? 0] as const,\r\n      ([carousel, dynamic, len]) => {\r\n        if (!carousel || dynamic || !len) {\r\n          carouselStarted.value = false\r\n          return\r\n        }\r\n        if (carouselStarted.value) return\r\n        carouselStarted.value = true\r\n        nextTick(() => afterToggle())\r\n      },\r\n      { immediate: true },\r\n    )\r\n\r\n    return () => {\r\n      const dynamicPart = props.dynamic && (\r\n        <TransitionGroup name={name.value} onAfterEnter={afterToggle}>\r\n          {props.data.map((el, i) => {\r\n            let k: any = i\r\n            if (props.rowKey && typeof props.rowKey === 'function') {\r\n              k = props.rowKey(el, i)\r\n            } else {\r\n              k = isObject(el)\r\n                ? (JSON.stringify(el) as string)\r\n                : isBoolean(el)\r\n                  ? (Number(el) as number)\r\n                  : (el as string)\r\n            }\r\n            return (\r\n              <div {...itemOptions.value} key={k}>\r\n                {slots.default?.({\r\n                  item: el,\r\n                  index: i,\r\n                  prev,\r\n                  next,\r\n                })}\r\n              </div>\r\n            )\r\n          })}\r\n        </TransitionGroup>\r\n      )\r\n      const staticPart = props.data.map((el, i) => {\r\n        return (\r\n          <Transition name={name.value} onAfterEnter={afterToggle}>\r\n            {i === index.value && (\r\n              <div {...itemOptions.value}>\r\n                {slots.default?.({\r\n                  item: el,\r\n                  index: i,\r\n                  prev,\r\n                  next,\r\n                })}\r\n              </div>\r\n            )}\r\n          </Transition>\r\n        )\r\n      })\r\n\r\n      return (\r\n        <>\r\n          {slots.use?.({\r\n            ...props,\r\n            prev,\r\n            next,\r\n            item: unref(item),\r\n            index: unref(index),\r\n            set,\r\n          })}\r\n          <div {...options.value} ref={rootElement}>\r\n            {props.dynamic ? dynamicPart : staticPart}\r\n          </div>\r\n        </>\r\n      )\r\n    }\r\n  },\r\n})\r\n"],"mappings":"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"}

package/dist/components/toggle/index.d.ts

@@ -0,0 +1 @@
+export { default } from './Toggle';

package/dist/components/toggle/style/index.css

@@ -0,0 +1 @@
+@import '../../../theme/tokens/components/toggle/index.css';

package/dist/components/toggle/style/scale.css

@@ -0,0 +1 @@
+@import '../../../theme/tokens/components/toggle/scale.css';

package/dist/components/toggle/style/translate.css

@@ -0,0 +1 @@
+@import '../../../theme/tokens/components/toggle/translate.css';