@zerodep-dev/vue-tsx-pro-mobile 0.0.0-stage → 0.4.0

package/dist/form/Slider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Slider.js","names":["_vtp_bindable","_vtp_readonlyProp","_vtp_restProps","_vue_ref","_createVNode","_mergeProps"],"sources":["../../src/form/Slider.tsx"],"sourcesContent":["/**\n * 滑块：在一段范围里拖动选一个数（音量、价格上限），给两个数时是区间（价格区间）。点轨道直接跳过去。\n *\n *   <Slider _value={volume} />\n *   <Slider _value={price} min={0} max={1000} step={50} />      price 是 [200, 600] 时两个滑块\n *\n * 拖动时值跟着变，松手时 onChange；横滑才接管手势，竖滑照常滚动页面。\n */\nimport { _component } from '@zerodep-dev/vue-tsx-pro-tsx';\nimport { css } from '@zerodep-dev/vue-tsx-pro-tsx/styles';\nimport { useHost, type HostRect } from '../utils/host';\nimport { dataAttrs, mergeAttrs, type PartProps } from '../utils/props';\nimport { useForm } from './context';\n\n/** 一个数，或区间的两端 */\nexport type SliderValue = number | [number, number];\n\n/** 未声明的属性落到根元素（div）上 */\nexport interface SliderProps extends Omit<PartProps<'div'>, 'onChange'> {\n  /** 当前的值；双向绑定写 `_value={x}`。数组时是区间 */\n  _value?: SliderValue;\n  /**\n   * 最小值\n   * @default 0\n   */\n  min?: number;\n  /**\n   * 最大值\n   * @default 100\n   */\n  max?: number;\n  /**\n   * 步长\n   * @default 1\n   */\n  step?: number;\n  /** 禁用 */\n  disabled?: boolean;\n  /** 只读 */\n  readonly?: boolean;\n  /** 松手（或点了轨道、按了方向键）之后 */\n  onChange?: (value: SliderValue) => void;\n  /** 轨道的部件属性 */\n  propsTrack?: PartProps<'div'>;\n  /** 滑块（两个时都用）的部件属性 */\n  propsThumb?: PartProps<'div'>;\n}\n\n/** Slider 的样式：root、track、fill、thumb */\nexport const sliderStyles = css.create({\n  root: {\n    position: 'relative',\n    display: 'flex',\n    alignItems: 'center',\n    height: '2em',\n    // 两端留出半个滑块，滑块不出界\n    paddingInline: '0.75em',\n    touchAction: 'pan-y',\n    userSelect: 'none',\n    opacity: { default: 1, '[data-disabled]': '_disabled' },\n  },\n  track: {\n    position: 'relative',\n    flex: '1 1 auto',\n    height: '0.25em',\n    borderRadius: '_full',\n    backgroundColor: '_fillActive',\n  },\n  fill: { position: 'absolute', insetBlock: 0, borderRadius: '_full', backgroundColor: '_accent' },\n  thumb: {\n    boxSizing: 'border-box',\n    position: 'absolute',\n    insetBlockStart: '50%',\n    width: '1.5em',\n    height: '1.5em',\n    borderRadius: '_full',\n    borderWidth: '_xs',\n    borderStyle: 'solid',\n    borderColor: '_border',\n    // 滑块在亮暗两套主题里都是白的（同 Switch 的圆点）\n    backgroundColor: '#fff',\n    boxShadow: '_sm',\n    transform: 'translate(-50%, -50%)',\n    cursor: { default: 'grab', '[data-disabled]': 'not-allowed' },\n  },\n});\n\n// 判定横竖的移动距离（px）\nconst LOCK_DISTANCE = 6;\n\n/** 滑块（div > 轨道：已选的一段 + 滑块） */\nexport const Slider = _component(\n  ({\n    _value: value = _bindable<SliderValue>(0),\n    min = 0,\n    max = 100,\n    step = 1,\n    disabled,\n    readonly = false,\n    onChange,\n    propsTrack,\n    propsThumb,\n    ...rest\n  }: SliderProps) => {\n    const host = useHost();\n    const form = useForm();\n    let track: unknown = null;\n    let rect: HostRect | null = null;\n    let horizontal = _state(false);\n    let start = { x: 0, y: 0 };\n    let direction: 'h' | 'v' | null = null;\n    // 拖的是区间的哪一端\n    let active = 0;\n\n    const interactive = () => !(disabled ?? form?.disabled) && !readonly && !form?.readonly;\n    const ends = (): [number, number] => (Array.isArray(value) ? value : [min, value]);\n    const percent = (number: number) => ((number - min) / (max - min || 1)) * 100;\n    const snap = (number: number) => {\n      const stepped = Math.round((number - min) / step) * step + min;\n      return Number(Math.min(max, Math.max(min, stepped)).toFixed(10));\n    };\n    const valueAt = (x: number) =>\n      rect ? snap(min + ((x - rect.left) / (rect.width || 1)) * (max - min)) : null;\n    /** 把一端改成 next：区间两端交叉时换成拖另一端 */\n    const setEnd = (index: number, next: number) => {\n      if (!Array.isArray(value)) return void (value = next);\n      const pair: [number, number] = [...value];\n      pair[index] = next;\n      if (pair[0] > pair[1]) {\n        pair.reverse();\n        active = 1 - index;\n      }\n      value = pair;\n    };\n    const nearest = (number: number) => {\n      if (!Array.isArray(value)) return 0;\n      return Math.abs(number - value[0]) <= Math.abs(number - value[1]) ? 0 : 1;\n    };\n    const pointX = (event: Event) =>\n      (event as TouchEvent).changedTouches?.[0]?.clientX ?? (event as MouseEvent).clientX;\n\n    const onTouchstart = (event: TouchEvent) => {\n      if (!interactive()) return;\n      const touch = event.touches[0]!;\n      start = { x: touch.clientX, y: touch.clientY };\n      direction = null;\n      void host.measure(track).then((measured) => (rect = measured));\n    };\n    const onTouchmove = (event: TouchEvent) => {\n      if (!interactive() || !rect) return;\n      const touch = event.touches[0]!;\n      if (!direction) {\n        const dx = touch.clientX - start.x;\n        const dy = touch.clientY - start.y;\n        if (Math.abs(dx) < LOCK_DISTANCE && Math.abs(dy) < LOCK_DISTANCE) return;\n        direction = Math.abs(dx) > Math.abs(dy) ? 'h' : 'v';\n        horizontal = direction === 'h';\n        if (horizontal) active = nearest(valueAt(start.x) ?? min);\n      }\n      if (direction !== 'h') return;\n      const next = valueAt(touch.clientX);\n      if (next !== null) setEnd(active, next);\n    };\n    const onTouchend = () => {\n      if (horizontal) onChange?.(value);\n      horizontal = false;\n    };\n    // 点轨道：跳到点的位置（滑动不触发点击）\n    const onClick = (event: Event) => {\n      if (!interactive()) return;\n      const x = pointX(event);\n      void host.measure(track).then((measured) => {\n        rect = measured;\n        const next = valueAt(x);\n        if (next === null) return;\n        active = nearest(next);\n        setEnd(active, next);\n        onChange?.(value);\n      });\n    };\n    const onKeydown = (index: number, event: KeyboardEvent) => {\n      if (!interactive()) return;\n      const delta = { ArrowRight: step, ArrowUp: step, ArrowLeft: -step, ArrowDown: -step }[\n        event.key\n      ];\n      if (delta === undefined) return;\n      event.preventDefault();\n      setEnd(index, snap(ends()[index]! + delta));\n      onChange?.(value);\n    };\n\n    return () => {\n      const off = !interactive();\n      const [low, high] = ends();\n      const range = Array.isArray(value);\n      const thumbs = range ? [low, high] : [high];\n      return (\n        <div\n          {...mergeAttrs<'div'>({ sx: sliderStyles.root }, rest, {\n            onTouchstart,\n            onTouchmove,\n            onTouchend,\n            onTouchcancel: onTouchend,\n            onClick,\n            ...dataAttrs({\n              // 小程序：收 touchmove；横滑期间 catch，页面不跟着滚\n              'data-touch-move': horizontal ? 'catch' : true,\n              'data-disabled': disabled ?? form?.disabled,\n            }),\n          })}\n        >\n          <div\n            {...mergeAttrs<'div'>({ sx: sliderStyles.track }, propsTrack)}\n            ref={(node: unknown) => (track = node)}\n          >\n            <div\n              {...mergeAttrs<'div'>({\n                sx: sliderStyles.fill,\n                style: {\n                  insetInlineStart: `${range ? percent(low) : 0}%`,\n                  width: `${percent(high) - (range ? percent(low) : 0)}%`,\n                },\n              })}\n            />\n            {thumbs.map((number, index) => (\n              <div\n                {...mergeAttrs<'div'>(\n                  { sx: sliderStyles.thumb, style: { insetInlineStart: `${percent(number)}%` } },\n                  propsThumb,\n                  {\n                    role: 'slider',\n                    tabindex: off ? undefined : 0,\n                    'aria-valuemin': min,\n                    'aria-valuemax': max,\n                    'aria-valuenow': number,\n                    'aria-disabled': off ? 'true' : undefined,\n                    onKeydown: (event: KeyboardEvent) => onKeydown(range ? index : 1, event),\n                    ...dataAttrs({ 'data-disabled': off }),\n                  },\n                )}\n              />\n            ))}\n          </div>\n        </div>\n      );\n    };\n  },\n);\n"],"mappings":";;;;;;;;;;AAiDA,IAAa,eAAe,IAAI,OAAO;CACrC,MAAM;EACJ,UAAU;EACV,SAAS;EACT,YAAY;EACZ,QAAQ;EAER,eAAe;EACf,aAAa;EACb,YAAY;EACZ,SAAS;GAAE,SAAS;GAAG,mBAAmB;EAAY;CACxD;CACA,OAAO;EACL,UAAU;EACV,MAAM;EACN,QAAQ;EACR,cAAc;EACd,iBAAiB;CACnB;CACA,MAAM;EAAE,UAAU;EAAY,YAAY;EAAG,cAAc;EAAS,iBAAiB;CAAU;CAC/F,OAAO;EACL,WAAW;EACX,UAAU;EACV,iBAAiB;EACjB,OAAO;EACP,QAAQ;EACR,cAAc;EACd,aAAa;EACb,aAAa;EACb,aAAa;EAEb,iBAAiB;EACjB,WAAW;EACX,WAAW;EACX,QAAQ;GAAE,SAAS;GAAQ,mBAAmB;EAAc;CAC9D;AACF,CAAC;AAGD,IAAM,gBAAgB;;AAGtB,IAAa,SAAS,0BACpB,QAAA,SAWmB;CAAA,MAAA,SAAA,CAAA;CAAA,MAAA,QAAAA,SAAA,QAAA,gBAVsB,GAAC,KAAA,IAAA;CAAA,MAAA,MAAAC,aAAA,QAAA,OAClC,CAAC;CAAA,MAAA,MAAAA,aAAA,QAAA,OACD,GAAG;CAAA,MAAA,OAAAA,aAAA,QAAA,QACF,CAAC;CAAA,MAAA,WAAAA,aAAA,QAAA,UAAA;CAAA,MAAA,WAAAA,aAAA,QAAA,YAEG,KAAK;CAAA,MAAA,WAAAA,aAAA,QAAA,UAAA;CAAA,MAAA,aAAAA,aAAA,QAAA,YAAA;CAAA,MAAA,aAAAA,aAAA,QAAA,YAAA;CAAA,MAIb,OAAIC,UAAA,QAAA,MAAA,IAAA;CAEP,MAAM,OAAO,QAAQ;CACrB,MAAM,OAAO,QAAQ;CACrB,IAAI,QAAiB;CACrB,IAAI,OAAwB;CAC5B,IAAI,aAAUC,IAAU,KAAK;CAC7B,IAAI,QAAQ;EAAE,GAAG;EAAG,GAAG;CAAE;CACzB,IAAI,YAA8B;CAElC,IAAI,SAAS;CAEb,MAAM,oBAAoB,EAAE,SAAA,SAAY,MAAM,aAAa,CAAA,SAAA,SAAa,CAAC,MAAM;CAC/E,MAAM,aAAgC,MAAM,QAAO,MAAA,KAAM,IAAC,MAAA,QAAW,CAAA,IAAA,OAAA,MAAA,KAAA;CACrE,MAAM,WAAW,YAAqB,SAAM,IAAA,UAAW,IAAA,QAAA,IAAA,SAAa,KAAM;CAC1E,MAAM,QAAQ,WAAmB;EAC/B,MAAM,UAAU,KAAK,OAAO,SAAM,IAAA,SAAM,KAAA,KAAQ,IAAC,KAAA,QAAO,IAAA;EACxD,OAAO,OAAO,KAAK,IAAG,IAAA,OAAM,KAAK,IAAG,IAAA,OAAM,OAAO,CAAC,CAAC,CAAC,QAAQ,EAAE,CAAC;CACjE;CACA,MAAM,WAAW,MACf,OAAO,KAAK,IAAA,SAAQ,IAAI,KAAK,SAAS,KAAK,SAAS,MAAO,IAAA,QAAA,IAAA,MAAU,IAAI;;CAE3E,MAAM,UAAU,OAAe,SAAiB;EAC9C,IAAI,CAAC,MAAM,QAAO,MAAA,KAAM,GAAG,OAAO,MAAM,MAAA,QAAQ;EAChD,MAAM,OAAyB,CAAC,GAAA,MAAA,KAAQ;EACxC,KAAK,SAAS;EACd,IAAI,KAAK,KAAK,KAAK,IAAI;GACrB,KAAK,QAAQ;GACb,SAAS,IAAI;EACf;EACA,MAAA,QAAQ;CACV;CACA,MAAM,WAAW,WAAmB;EAClC,IAAI,CAAC,MAAM,QAAO,MAAA,KAAM,GAAG,OAAO;EAClC,OAAO,KAAK,IAAI,SAAS,MAAA,MAAM,EAAE,KAAK,KAAK,IAAI,SAAS,MAAA,MAAM,EAAE,IAAI,IAAI;CAC1E;CACA,MAAM,UAAU,UACb,MAAqB,iBAAiB,EAAE,EAAE,WAAY,MAAqB;CAE9E,MAAM,gBAAgB,UAAsB;EAC1C,IAAI,CAAC,YAAY,GAAG;EACpB,MAAM,QAAQ,MAAM,QAAQ;EAC5B,QAAQ;GAAE,GAAG,MAAM;GAAS,GAAG,MAAM;EAAQ;EAC7C,YAAY;EACZ,KAAU,QAAQ,KAAK,CAAC,CAAC,MAAM,aAAc,OAAO,QAAS;CAC/D;CACA,MAAM,eAAe,UAAsB;EACzC,IAAI,CAAC,YAAY,KAAK,CAAC,MAAM;EAC7B,MAAM,QAAQ,MAAM,QAAQ;EAC5B,IAAI,CAAC,WAAW;GACd,MAAM,KAAK,MAAM,UAAU,MAAM;GACjC,MAAM,KAAK,MAAM,UAAU,MAAM;GACjC,IAAI,KAAK,IAAI,EAAE,IAAI,iBAAiB,KAAK,IAAI,EAAE,IAAI,eAAe;GAClE,YAAY,KAAK,IAAI,EAAE,IAAI,KAAK,IAAI,EAAE,IAAI,MAAM;GAChD,WAAA,QAAa,cAAc;GAC3B,IAAA,WAAA,OAAgB,SAAS,QAAQ,QAAQ,MAAM,CAAC,KAAC,IAAA,KAAO;EAC1D;EACA,IAAI,cAAc,KAAK;EACvB,MAAM,OAAO,QAAQ,MAAM,OAAO;EAClC,IAAI,SAAS,MAAM,OAAO,QAAQ,IAAI;CACxC;CACA,MAAM,mBAAmB;EACvB,IAAA,WAAA,OAAgB,SAAA,QAAA,MAAA,KAAgB;EAChC,WAAA,QAAa;CACf;CAEA,MAAM,WAAW,UAAiB;EAChC,IAAI,CAAC,YAAY,GAAG;EACpB,MAAM,IAAI,OAAO,KAAK;EACtB,KAAU,QAAQ,KAAK,CAAC,CAAC,MAAM,aAAa;GAC1C,OAAO;GACP,MAAM,OAAO,QAAQ,CAAC;GACtB,IAAI,SAAS,MAAM;GACnB,SAAS,QAAQ,IAAI;GACrB,OAAO,QAAQ,IAAI;GACnB,SAAA,QAAA,MAAA,KAAgB;EAClB,CAAC;CACH;CACA,MAAM,aAAa,OAAe,UAAyB;EACzD,IAAI,CAAC,YAAY,GAAG;EACpB,MAAM,QAAQ;GAAE,YAAU,KAAA;GAAQ,SAAO,KAAA;GAAQ,WAAW,CAAA,KAAA;GAAO,WAAW,CAAA,KAAA;EAAM,EAClF,MAAM;EAER,IAAI,UAAU,KAAA,GAAW;EACzB,MAAM,eAAe;EACrB,OAAO,OAAO,KAAK,KAAK,CAAC,CAAC,SAAU,KAAK,CAAC;EAC1C,SAAA,QAAA,MAAA,KAAgB;CAClB;CAEA,aAAa;EACX,MAAM,MAAM,CAAC,YAAY;EACzB,MAAM,CAAC,KAAK,QAAQ,KAAK;EACzB,MAAM,QAAQ,MAAM,QAAO,MAAA,KAAM;EACjC,MAAM,SAAS,QAAQ,CAAC,KAAK,IAAI,IAAI,CAAC,IAAI;EAC1C,OAAAC,YAAA,OAEQ,WAAkB,EAAE,IAAI,aAAa,KAAK,GAAG,MAAM;GACrD;GACA;GACA;GACA,eAAe;GACf;GACA,GAAG,UAAU;IAEX,mBAAmB,WAAA,QAAa,UAAU;IAC1C,iBAAiB,SAAA,SAAY,MAAM;GACrC,CAAC;EACH,CAAC,GAAC,CAAAA,YAAA,OAAAC,cAGI,WAAkB,EAAE,IAAI,aAAa,MAAM,GAAC,WAAA,KAAY,GAAC,EAAA,OAAA,OAAA,OAAA,OAAA,MACvD,SAAmB,QAAQ,MAAK,CAAA,GAAA,CAAAD,YAAA,OAGhC,WAAkB;GACpB,IAAI,aAAa;GACjB,OAAO;IACL,kBAAkB,GAAG,QAAQ,QAAQ,GAAG,IAAI,EAAC;IAC7C,OAAO,GAAG,QAAQ,IAAI,KAAK,QAAQ,QAAQ,GAAG,IAAI,GAAE;GACtD;EACF,CAAC,GAAC,IAAA,GAEH,OAAO,KAAK,QAAQ,UAAKA,YAAA,OAElB,WACF;GAAE,IAAI,aAAa;GAAO,OAAO,EAAE,kBAAkB,GAAG,QAAQ,MAAM,EAAC,GAAI;EAAE,GAAC,WAAA,OAE9E;GACE,MAAM;GACN,UAAU,MAAM,KAAA,IAAY;GAC5B,iBAAe,IAAA;GACf,iBAAe,IAAA;GACf,iBAAiB;GACjB,iBAAiB,MAAM,SAAS,KAAA;GAChC,YAAY,UAAyB,UAAU,QAAQ,QAAQ,GAAG,KAAK;GACvE,GAAG,UAAU,EAAE,iBAAiB,IAAI,CAAC;EACvC,CACF,GAAC,IAAA,CAEJ,CAAC,CAAA,CAAA,CAAA;CAIV;AACF,GAAC;CAAA,MAAA;CAAA,OAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;CAAA;AAAA,CACH"}

package/dist/form/Stepper.d.ts

@@ -0,0 +1,61 @@
+import { css } from '@zerodep-dev/vue-tsx-pro-tsx/styles';
+import { type PartProps } from '../utils/props';
+/** 外观 */
+export interface StepperThemes {
+    /** 方块按钮，浅灰底（默认） */
+    default: unknown;
+    /** 圆按钮：减号描边、加号实底 */
+    round: unknown;
+}
+/** 未声明的属性落到根元素（div）上 */
+export interface StepperProps extends Omit<PartProps<'div', 'role'>, 'onChange'> {
+    /** 当前的数；双向绑定写 `_value={x}` */
+    _value?: number;
+    /**
+     * 最小值
+     * @default 1
+     */
+    min?: number;
+    /** 最大值 */
+    max?: number;
+    /**
+     * 每次加减多少
+     * @default 1
+     */
+    step?: number;
+    /** 保留几位小数；不给时按 step 的小数位 */
+    decimalLength?: number;
+    /**
+     * 外观
+     * @default 'default'
+     */
+    theme?: keyof StepperThemes;
+    /** 禁用 */
+    disabled?: boolean;
+    /** 中间的数不能直接输入（只能点加减） */
+    disableInput?: boolean;
+    /**
+     * 按住加减号时连续变化
+     * @default true
+     */
+    longPress?: boolean;
+    /** 数变了 */
+    onChange?: (value: number) => void;
+    /** 减号按钮的部件属性 */
+    propsMinus?: PartProps<'button'>;
+    /** 加号按钮的部件属性 */
+    propsPlus?: PartProps<'button'>;
+    /** 输入框的部件属性 */
+    propsInput?: PartProps<'input', 'value' | 'disabled' | 'readonly' | 'inputmode'>;
+}
+/** Stepper 的样式：root、button、round、plusRound、input */
+export declare const stepperStyles: Readonly<{
+    button: css.CompiledStyles;
+    input: css.CompiledStyles;
+    inputRound: css.CompiledStyles;
+    plusRound: css.CompiledStyles;
+    root: css.CompiledStyles;
+    round: css.CompiledStyles;
+}>;
+/** 步进器（div > 减号 + 输入框 + 加号） */
+export declare const Stepper: import("@zerodep-dev/vue-tsx-pro-tsx").TsxComponent<StepperProps>;

package/dist/form/Stepper.js

@@ -0,0 +1,222 @@
+import { useConfig } from "../config/context.js";
+import { dataAttrs, mergeAttrs } from "../utils/props.js";
+import { Icon } from "../base/Icon.js";
+import { useForm } from "./context.js";
+import { css } from "@zerodep-dev/vue-tsx-pro-tsx/styles";
+import { _component, bindable, readonlyProp, restProps } from "@zerodep-dev/vue-tsx-pro-tsx";
+import { createVNode, onBeforeUnmount, ref } from "vue";
+import { Minus, Plus } from "@lucide/icons";
+//#region src/form/Stepper.tsx
+/**
+* 步进器：减号、数字、加号，调整数量（购物车的件数、人数）。按住加减号连续变化；中间的数字也可以直接输入，失焦时按范围修正。
+*
+*   <Stepper _value={count} min={1} max={99} />
+*   <Stepper _value={weight} step={0.5} decimalLength={1} theme="round" />
+*/
+/** 外观 */
+/** 未声明的属性落到根元素（div）上 */
+/** Stepper 的样式：root、button、round、plusRound、input */
+var stepperStyles = css.create({
+	root: {
+		display: "inline-flex",
+		alignItems: "center",
+		gap: "0.15em",
+		verticalAlign: "middle"
+	},
+	button: {
+		boxSizing: "border-box",
+		display: "inline-flex",
+		alignItems: "center",
+		justifyContent: "center",
+		width: "2em",
+		height: "2em",
+		margin: 0,
+		padding: 0,
+		borderWidth: 0,
+		borderRadius: "_sm",
+		backgroundColor: {
+			default: "_fill",
+			":active:not([disabled])": "_fillActive"
+		},
+		color: {
+			default: "_text",
+			"[disabled]": "_textDisabled"
+		},
+		fontSize: "1em",
+		cursor: {
+			default: "pointer",
+			"[disabled]": "not-allowed"
+		},
+		userSelect: "none"
+	},
+	round: {
+		borderRadius: "_full",
+		borderWidth: "_xs",
+		borderStyle: "solid",
+		borderColor: {
+			default: "_accent",
+			"[disabled]": "_border"
+		},
+		backgroundColor: {
+			default: "_surface",
+			":active:not([disabled])": "_accentSoft"
+		},
+		color: {
+			default: "_accentText",
+			"[disabled]": "_textDisabled"
+		}
+	},
+	plusRound: {
+		backgroundColor: {
+			default: "_accent",
+			":active:not([disabled])": "_accentActive",
+			"[disabled]": "_fill"
+		},
+		color: {
+			default: "_accentContrast",
+			"[disabled]": "_textDisabled"
+		}
+	},
+	input: {
+		boxSizing: "border-box",
+		width: "2.6em",
+		height: "2em",
+		margin: 0,
+		padding: 0,
+		borderWidth: 0,
+		borderRadius: "_sm",
+		backgroundColor: "_fill",
+		color: {
+			default: "_text",
+			"[disabled]": "_textDisabled"
+		},
+		fontFamily: "inherit",
+		fontSize: "inherit",
+		textAlign: "center",
+		outlineStyle: "none"
+	},
+	inputRound: { backgroundColor: "transparent" }
+});
+/** 按住多久开始连续变化、之后每隔多久变一次（ms） */
+var HOLD_DELAY = 500;
+var REPEAT_INTERVAL = 150;
+/** 小数位：step 是 0.5 时是 1 */
+var decimalsOf = (step) => (String(step).split(".")[1] ?? "").length;
+/** 步进器（div > 减号 + 输入框 + 加号） */
+var Stepper = /*#__PURE__*/ _component((_props, _ctx) => {
+	const value = bindable(_props, "_value", () => 1, _ctx.emit);
+	const min = readonlyProp(_props, "min", 1);
+	const max = readonlyProp(_props, "max", () => Number.POSITIVE_INFINITY);
+	const step = readonlyProp(_props, "step", 1);
+	const decimalLength = readonlyProp(_props, "decimalLength");
+	const theme = readonlyProp(_props, "theme", "default");
+	const disabled = readonlyProp(_props, "disabled");
+	const disableInput = readonlyProp(_props, "disableInput", false);
+	const longPress = readonlyProp(_props, "longPress", true);
+	const onChange = readonlyProp(_props, "onChange");
+	const propsMinus = readonlyProp(_props, "propsMinus");
+	const propsPlus = readonlyProp(_props, "propsPlus");
+	const propsInput = readonlyProp(_props, "propsInput");
+	const rest = restProps(_props, _ctx, true);
+	const config = useConfig();
+	const form = useForm();
+	let draft = ref(null);
+	const digits = () => decimalLength.value ?? decimalsOf(step.value);
+	const clamp = (next) => {
+		const bounded = Math.min(max.value, Math.max(min.value, next));
+		return Number(bounded.toFixed(digits()));
+	};
+	const set = (next) => {
+		const fixed = clamp(next);
+		if (fixed === value.value) return;
+		value.value = fixed;
+		onChange.value?.(fixed);
+	};
+	const isDisabled = () => disabled.value ?? form?.disabled ?? false;
+	let holdTimer;
+	let repeatTimer;
+	let held = false;
+	const stopHold = () => {
+		clearTimeout(holdTimer);
+		clearInterval(repeatTimer);
+	};
+	onBeforeUnmount(stopHold);
+	const startHold = (direction) => {
+		held = false;
+		if (!longPress.value) return;
+		stopHold();
+		holdTimer = setTimeout(() => {
+			held = true;
+			repeatTimer = setInterval(() => set(value.value + direction * step.value), REPEAT_INTERVAL);
+		}, HOLD_DELAY);
+	};
+	const button = (direction) => {
+		const off = isDisabled() || form?.readonly || (direction < 0 ? value.value <= min.value : value.value >= max.value) || false;
+		return createVNode("button", mergeAttrs({ sx: [
+			stepperStyles.button,
+			theme.value === "round" && stepperStyles.round,
+			theme.value === "round" && direction > 0 && stepperStyles.plusRound
+		] }, direction > 0 ? propsPlus.value : propsMinus.value, {
+			type: "button",
+			disabled: off,
+			"aria-label": direction > 0 ? config.lang.increase : config.lang.decrease,
+			onTouchstart: () => startHold(direction),
+			onTouchend: stopHold,
+			onTouchcancel: stopHold,
+			onClick: () => {
+				if (held) return void (held = false);
+				set(value.value + direction * step.value);
+			}
+		}), [createVNode(Icon, { "icon": direction > 0 ? Plus : Minus }, null)]);
+	};
+	return () => {
+		const off = isDisabled();
+		return createVNode("div", mergeAttrs({ sx: stepperStyles.root }, rest, {
+			role: "group",
+			...dataAttrs({ "data-disabled": off })
+		}), [
+			button(-1),
+			createVNode("input", mergeAttrs({ sx: [stepperStyles.input, theme.value === "round" && stepperStyles.inputRound] }, propsInput.value, {
+				value: draft.value ?? value.value.toFixed(digits()),
+				type: "text",
+				inputmode: digits() > 0 || min.value < 0 ? "decimal" : "numeric",
+				disabled: off,
+				readonly: disableInput.value || form?.readonly,
+				"aria-valuemin": min.value,
+				"aria-valuemax": Number.isFinite(max.value) ? max.value : void 0,
+				"aria-valuenow": value.value,
+				role: "spinbutton",
+				onInput: (event) => draft.value = event.target.value,
+				onBlur: () => {
+					if (draft.value === null) return;
+					const parsed = Number.parseFloat(draft.value);
+					draft.value = null;
+					if (!Number.isNaN(parsed)) set(parsed);
+				}
+			}), null),
+			button(1)
+		]);
+	};
+}, {
+	name: "Stepper",
+	props: [
+		"_value",
+		"onUpdate:_value",
+		"min",
+		"max",
+		"step",
+		"decimalLength",
+		"theme",
+		"disabled",
+		"disableInput",
+		"longPress",
+		"onChange",
+		"propsMinus",
+		"propsPlus",
+		"propsInput"
+	]
+});
+//#endregion
+export { Stepper, stepperStyles };
+
+//# sourceMappingURL=Stepper.js.map

package/dist/form/Stepper.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Stepper.js","names":["_vtp_bindable","_vtp_readonlyProp","_vtp_restProps","_vue_ref","_createVNode"],"sources":["../../src/form/Stepper.tsx"],"sourcesContent":["/**\n * 步进器：减号、数字、加号，调整数量（购物车的件数、人数）。按住加减号连续变化；中间的数字也可以直接输入，失焦时按范围修正。\n *\n *   <Stepper _value={count} min={1} max={99} />\n *   <Stepper _value={weight} step={0.5} decimalLength={1} theme=\"round\" />\n */\nimport { Minus, Plus } from '@lucide/icons';\nimport { _component } from '@zerodep-dev/vue-tsx-pro-tsx';\nimport { css } from '@zerodep-dev/vue-tsx-pro-tsx/styles';\nimport { onBeforeUnmount } from 'vue';\nimport { Icon } from '../base/Icon';\nimport { useConfig } from '../config/context';\nimport { dataAttrs, mergeAttrs, type PartProps } from '../utils/props';\nimport { useForm } from './context';\n\n/** 外观 */\nexport interface StepperThemes {\n  /** 方块按钮，浅灰底（默认） */\n  default: unknown;\n  /** 圆按钮：减号描边、加号实底 */\n  round: unknown;\n}\n\n/** 未声明的属性落到根元素（div）上 */\nexport interface StepperProps extends Omit<PartProps<'div', 'role'>, 'onChange'> {\n  /** 当前的数；双向绑定写 `_value={x}` */\n  _value?: number;\n  /**\n   * 最小值\n   * @default 1\n   */\n  min?: number;\n  /** 最大值 */\n  max?: number;\n  /**\n   * 每次加减多少\n   * @default 1\n   */\n  step?: number;\n  /** 保留几位小数；不给时按 step 的小数位 */\n  decimalLength?: number;\n  /**\n   * 外观\n   * @default 'default'\n   */\n  theme?: keyof StepperThemes;\n  /** 禁用 */\n  disabled?: boolean;\n  /** 中间的数不能直接输入（只能点加减） */\n  disableInput?: boolean;\n  /**\n   * 按住加减号时连续变化\n   * @default true\n   */\n  longPress?: boolean;\n  /** 数变了 */\n  onChange?: (value: number) => void;\n  /** 减号按钮的部件属性 */\n  propsMinus?: PartProps<'button'>;\n  /** 加号按钮的部件属性 */\n  propsPlus?: PartProps<'button'>;\n  /** 输入框的部件属性 */\n  propsInput?: PartProps<'input', 'value' | 'disabled' | 'readonly' | 'inputmode'>;\n}\n\n/** Stepper 的样式：root、button、round、plusRound、input */\nexport const stepperStyles = css.create({\n  root: { display: 'inline-flex', alignItems: 'center', gap: '0.15em', verticalAlign: 'middle' },\n  button: {\n    boxSizing: 'border-box',\n    display: 'inline-flex',\n    alignItems: 'center',\n    justifyContent: 'center',\n    width: '2em',\n    height: '2em',\n    margin: 0,\n    padding: 0,\n    borderWidth: 0,\n    borderRadius: '_sm',\n    backgroundColor: { default: '_fill', ':active:not([disabled])': '_fillActive' },\n    color: { default: '_text', '[disabled]': '_textDisabled' },\n    fontSize: '1em',\n    cursor: { default: 'pointer', '[disabled]': 'not-allowed' },\n    userSelect: 'none',\n  },\n  round: {\n    borderRadius: '_full',\n    borderWidth: '_xs',\n    borderStyle: 'solid',\n    borderColor: { default: '_accent', '[disabled]': '_border' },\n    backgroundColor: { default: '_surface', ':active:not([disabled])': '_accentSoft' },\n    color: { default: '_accentText', '[disabled]': '_textDisabled' },\n  },\n  plusRound: {\n    backgroundColor: {\n      default: '_accent',\n      ':active:not([disabled])': '_accentActive',\n      '[disabled]': '_fill',\n    },\n    color: { default: '_accentContrast', '[disabled]': '_textDisabled' },\n  },\n  input: {\n    boxSizing: 'border-box',\n    width: '2.6em',\n    height: '2em',\n    margin: 0,\n    padding: 0,\n    borderWidth: 0,\n    borderRadius: '_sm',\n    backgroundColor: '_fill',\n    color: { default: '_text', '[disabled]': '_textDisabled' },\n    fontFamily: 'inherit',\n    fontSize: 'inherit',\n    textAlign: 'center',\n    outlineStyle: 'none',\n  },\n  inputRound: { backgroundColor: 'transparent' },\n});\n\n/** 按住多久开始连续变化、之后每隔多久变一次（ms） */\nconst HOLD_DELAY = 500;\nconst REPEAT_INTERVAL = 150;\n\n/** 小数位：step 是 0.5 时是 1 */\nconst decimalsOf = (step: number) => (String(step).split('.')[1] ?? '').length;\n\n/** 步进器（div > 减号 + 输入框 + 加号） */\nexport const Stepper = _component(\n  ({\n    _value: value = _bindable(1),\n    min = 1,\n    max = Number.POSITIVE_INFINITY,\n    step = 1,\n    decimalLength,\n    theme = 'default',\n    disabled,\n    disableInput = false,\n    longPress = true,\n    onChange,\n    propsMinus,\n    propsPlus,\n    propsInput,\n    ...rest\n  }: StepperProps) => {\n    const config = useConfig();\n    const form = useForm();\n    // 正在输入的文字：失焦时才换成数\n    let draft = _state<string | null>(null);\n    const digits = () => decimalLength ?? decimalsOf(step);\n    const clamp = (next: number) => {\n      const bounded = Math.min(max, Math.max(min, next));\n      return Number(bounded.toFixed(digits()));\n    };\n    const set = (next: number) => {\n      const fixed = clamp(next);\n      if (fixed === value) return;\n      value = fixed;\n      onChange?.(fixed);\n    };\n    const isDisabled = () => disabled ?? form?.disabled ?? false;\n\n    // 按住连续加减；连续变化过之后松手，那一次点击不再算\n    let holdTimer: ReturnType<typeof setTimeout> | undefined;\n    let repeatTimer: ReturnType<typeof setInterval> | undefined;\n    let held = false;\n    const stopHold = () => {\n      clearTimeout(holdTimer);\n      clearInterval(repeatTimer);\n    };\n    onBeforeUnmount(stopHold);\n    const startHold = (direction: 1 | -1) => {\n      held = false;\n      if (!longPress) return;\n      stopHold();\n      holdTimer = setTimeout(() => {\n        held = true;\n        repeatTimer = setInterval(() => set(value + direction * step), REPEAT_INTERVAL);\n      }, HOLD_DELAY);\n    };\n\n    const button = (direction: 1 | -1) => {\n      const off =\n        isDisabled() || form?.readonly || (direction < 0 ? value <= min : value >= max) || false;\n      return (\n        <button\n          {...mergeAttrs<'button'>(\n            {\n              sx: [\n                stepperStyles.button,\n                theme === 'round' && stepperStyles.round,\n                theme === 'round' && direction > 0 && stepperStyles.plusRound,\n              ],\n            },\n            direction > 0 ? propsPlus : propsMinus,\n            {\n              type: 'button',\n              disabled: off,\n              'aria-label': direction > 0 ? config.lang.increase : config.lang.decrease,\n              onTouchstart: () => startHold(direction),\n              onTouchend: stopHold,\n              onTouchcancel: stopHold,\n              onClick: () => {\n                if (held) return void (held = false);\n                set(value + direction * step);\n              },\n            },\n          )}\n        >\n          <Icon icon={direction > 0 ? Plus : Minus} />\n        </button>\n      );\n    };\n\n    return () => {\n      const off = isDisabled();\n      return (\n        <div\n          {...mergeAttrs<'div'>({ sx: stepperStyles.root }, rest, {\n            role: 'group',\n            ...dataAttrs({ 'data-disabled': off }),\n          })}\n        >\n          {button(-1)}\n          <input\n            {...mergeAttrs<'input'>(\n              { sx: [stepperStyles.input, theme === 'round' && stepperStyles.inputRound] },\n              propsInput,\n              {\n                value: draft ?? value.toFixed(digits()),\n                type: 'text',\n                inputmode: digits() > 0 || min < 0 ? 'decimal' : 'numeric',\n                disabled: off,\n                readonly: disableInput || form?.readonly,\n                'aria-valuemin': min,\n                'aria-valuemax': Number.isFinite(max) ? max : undefined,\n                'aria-valuenow': value,\n                role: 'spinbutton',\n                onInput: (event: Event) => (draft = (event.target as HTMLInputElement).value),\n                onBlur: () => {\n                  if (draft === null) return;\n                  const parsed = Number.parseFloat(draft);\n                  draft = null;\n                  if (!Number.isNaN(parsed)) set(parsed);\n                },\n              },\n            )}\n          />\n          {button(1)}\n        </div>\n      );\n    };\n  },\n);\n"],"mappings":"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"}

package/dist/form/Switch.d.ts

@@ -0,0 +1,33 @@
+import { css } from '@zerodep-dev/vue-tsx-pro-tsx/styles';
+import { type PartProps } from '../utils/props';
+/** 角色与状态由组件管理 */
+export type SwitchManaged = 'role' | 'aria-checked' | 'type' | 'disabled';
+/** 未声明的属性落到按钮上 */
+export interface SwitchProps extends Omit<PartProps<'button', SwitchManaged>, 'onChange'> {
+    /** 是否打开；双向绑定写 `_checked={x}` */
+    _checked?: boolean;
+    /**
+     * 打开时的色调
+     * @default 'accent'
+     */
+    tone?: 'accent' | 'success' | 'warning' | 'danger';
+    /** 加载中：圆点里转圈，不能切换 */
+    loading?: boolean;
+    /** 禁用；在 Form 里时随 Form */
+    disabled?: boolean;
+    /** 切换了 */
+    onChange?: (checked: boolean) => void;
+    /** 圆点的部件属性 */
+    propsThumb?: PartProps<'span'>;
+}
+/** Switch 的样式：root、各色调、thumb、spinner */
+export declare const switchStyles: Readonly<{
+    accent: css.CompiledStyles;
+    danger: css.CompiledStyles;
+    root: css.CompiledStyles;
+    success: css.CompiledStyles;
+    thumb: css.CompiledStyles;
+    warning: css.CompiledStyles;
+}>;
+/** 开关（button[role=switch] > 圆点） */
+export declare const Switch: import("@zerodep-dev/vue-tsx-pro-tsx").TsxComponent<SwitchProps>;

package/dist/form/Switch.js

@@ -0,0 +1,116 @@
+import { dataAttrs, mergeAttrs } from "../utils/props.js";
+import { Loading } from "../feedback/Loading.js";
+import { useForm } from "./context.js";
+import { css } from "@zerodep-dev/vue-tsx-pro-tsx/styles";
+import { _component, bindable, readonlyProp, restProps } from "@zerodep-dev/vue-tsx-pro-tsx";
+import { createVNode } from "vue";
+//#region src/form/Switch.tsx
+/** 角色与状态由组件管理 */
+/** 未声明的属性落到按钮上 */
+/** Switch 的样式：root、各色调、thumb、spinner */
+var switchStyles = css.create({
+	root: {
+		boxSizing: "border-box",
+		position: "relative",
+		display: "inline-block",
+		flex: "none",
+		width: "3.1em",
+		height: "1.85em",
+		margin: 0,
+		padding: 0,
+		borderWidth: 0,
+		borderRadius: "_full",
+		verticalAlign: "middle",
+		cursor: {
+			default: "pointer",
+			"[data-disabled]": "not-allowed"
+		},
+		opacity: {
+			default: 1,
+			"[data-disabled]": "_disabled"
+		},
+		transitionProperty: "background-color",
+		transitionDuration: "_md"
+	},
+	accent: { backgroundColor: {
+		default: "_fillActive",
+		"[aria-checked=\"true\"]": "_accent"
+	} },
+	success: { backgroundColor: {
+		default: "_fillActive",
+		"[aria-checked=\"true\"]": "_success"
+	} },
+	warning: { backgroundColor: {
+		default: "_fillActive",
+		"[aria-checked=\"true\"]": "_warning"
+	} },
+	danger: { backgroundColor: {
+		default: "_fillActive",
+		"[aria-checked=\"true\"]": "_danger"
+	} },
+	thumb: {
+		boxSizing: "border-box",
+		position: "absolute",
+		insetBlockStart: "0.15em",
+		insetInlineStart: "0.15em",
+		display: "flex",
+		alignItems: "center",
+		justifyContent: "center",
+		width: "1.55em",
+		height: "1.55em",
+		borderRadius: "_full",
+		backgroundColor: "#fff",
+		boxShadow: "_sm",
+		color: "_accent",
+		fontSize: "1em",
+		transform: {
+			default: "none",
+			"[data-checked]": "translateX(1.25em)"
+		},
+		transitionProperty: "transform",
+		transitionDuration: "_md",
+		transitionTimingFunction: "_standard"
+	}
+});
+/** 开关（button[role=switch] > 圆点） */
+var Switch = /*#__PURE__*/ _component((_props, _ctx) => {
+	const checked = bindable(_props, "_checked", () => false, _ctx.emit);
+	const tone = readonlyProp(_props, "tone", "accent");
+	const loading = readonlyProp(_props, "loading", false);
+	const disabled = readonlyProp(_props, "disabled");
+	const onChange = readonlyProp(_props, "onChange");
+	const propsThumb = readonlyProp(_props, "propsThumb");
+	const rest = restProps(_props, _ctx, true);
+	const form = useForm();
+	return () => {
+		const off = disabled.value ?? form?.disabled ?? false;
+		return createVNode("button", mergeAttrs({ sx: [switchStyles.root, switchStyles[tone.value]] }, rest, {
+			type: "button",
+			role: "switch",
+			"aria-checked": checked.value ? "true" : "false",
+			"aria-busy": loading.value ? "true" : void 0,
+			disabled: off,
+			onClick: () => {
+				if (loading.value || form?.readonly) return;
+				checked.value = !checked.value;
+				onChange.value?.(checked.value);
+			},
+			...dataAttrs({ "data-disabled": off })
+		}), [createVNode("span", mergeAttrs({ sx: switchStyles.thumb }, propsThumb.value, dataAttrs({ "data-checked": checked.value })), [loading.value && createVNode(Loading, { "size": 14 }, null)])]);
+	};
+}, {
+	name: "Switch",
+	props: [
+		"_checked",
+		"onUpdate:_checked",
+		"tone",
+		"loading",
+		"disabled",
+		"onChange",
+		"propsThumb"
+	]
+});
+//#endregion
+export { Switch, switchStyles };
+
+//# sourceMappingURL=Switch.js.map

package/dist/form/Switch.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Switch.js","names":["_vtp_bindable","_vtp_readonlyProp","_vtp_restProps","_createVNode"],"sources":["../../src/form/Switch.tsx"],"sourcesContent":["/**\n * 开关：两种状态之间切换，立刻生效（消息通知、深色模式）。要提交了才生效的选项用 Checkbox。\n *\n *   <Switch _checked={notify} aria-label=\"消息通知\" />\n *   <Switch _checked={autoRenew} loading={saving} onChange={(on) => save(on)} />\n *\n * 大小随所在文字（em），整体缩放写 sx 的 fontSize。\n */\nimport { _component } from '@zerodep-dev/vue-tsx-pro-tsx';\nimport { css } from '@zerodep-dev/vue-tsx-pro-tsx/styles';\nimport { Loading } from '../feedback/Loading';\nimport { useForm } from './context';\nimport { dataAttrs, mergeAttrs, type PartProps } from '../utils/props';\n\n/** 角色与状态由组件管理 */\nexport type SwitchManaged = 'role' | 'aria-checked' | 'type' | 'disabled';\n\n/** 未声明的属性落到按钮上 */\nexport interface SwitchProps extends Omit<PartProps<'button', SwitchManaged>, 'onChange'> {\n  /** 是否打开；双向绑定写 `_checked={x}` */\n  _checked?: boolean;\n  /**\n   * 打开时的色调\n   * @default 'accent'\n   */\n  tone?: 'accent' | 'success' | 'warning' | 'danger';\n  /** 加载中：圆点里转圈，不能切换 */\n  loading?: boolean;\n  /** 禁用；在 Form 里时随 Form */\n  disabled?: boolean;\n  /** 切换了 */\n  onChange?: (checked: boolean) => void;\n  /** 圆点的部件属性 */\n  propsThumb?: PartProps<'span'>;\n}\n\n/** Switch 的样式：root、各色调、thumb、spinner */\nexport const switchStyles = css.create({\n  root: {\n    boxSizing: 'border-box',\n    position: 'relative',\n    display: 'inline-block',\n    flex: 'none',\n    width: '3.1em',\n    height: '1.85em',\n    margin: 0,\n    padding: 0,\n    borderWidth: 0,\n    borderRadius: '_full',\n    verticalAlign: 'middle',\n    cursor: { default: 'pointer', '[data-disabled]': 'not-allowed' },\n    opacity: { default: 1, '[data-disabled]': '_disabled' },\n    transitionProperty: 'background-color',\n    transitionDuration: '_md',\n  },\n  accent: { backgroundColor: { default: '_fillActive', '[aria-checked=\"true\"]': '_accent' } },\n  success: { backgroundColor: { default: '_fillActive', '[aria-checked=\"true\"]': '_success' } },\n  warning: { backgroundColor: { default: '_fillActive', '[aria-checked=\"true\"]': '_warning' } },\n  danger: { backgroundColor: { default: '_fillActive', '[aria-checked=\"true\"]': '_danger' } },\n  thumb: {\n    boxSizing: 'border-box',\n    position: 'absolute',\n    insetBlockStart: '0.15em',\n    insetInlineStart: '0.15em',\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'center',\n    width: '1.55em',\n    height: '1.55em',\n    borderRadius: '_full',\n    // 圆点在亮暗两套主题里都是白的（同系统的开关）\n    backgroundColor: '#fff',\n    boxShadow: '_sm',\n    color: '_accent',\n    fontSize: '1em',\n    transform: { default: 'none', '[data-checked]': 'translateX(1.25em)' },\n    transitionProperty: 'transform',\n    transitionDuration: '_md',\n    transitionTimingFunction: '_standard',\n  },\n});\n\n/** 开关（button[role=switch] > 圆点） */\nexport const Switch = _component(\n  ({\n    _checked: checked = _bindable(false),\n    tone = 'accent',\n    loading = false,\n    disabled,\n    onChange,\n    propsThumb,\n    ...rest\n  }: SwitchProps) => {\n    const form = useForm();\n    return () => {\n      const off = disabled ?? form?.disabled ?? false;\n      return (\n        <button\n          {...mergeAttrs<'button'>({ sx: [switchStyles.root, switchStyles[tone]] }, rest, {\n            type: 'button',\n            role: 'switch',\n            'aria-checked': checked ? 'true' : 'false',\n            'aria-busy': loading ? 'true' : undefined,\n            disabled: off,\n            onClick: () => {\n              if (loading || form?.readonly) return;\n              checked = !checked;\n              onChange?.(checked);\n            },\n            ...dataAttrs({ 'data-disabled': off }),\n          })}\n        >\n          <span\n            {...mergeAttrs<'span'>(\n              { sx: switchStyles.thumb },\n              propsThumb,\n              dataAttrs({ 'data-checked': checked }),\n            )}\n          >\n            {loading && <Loading size={14} />}\n          </span>\n        </button>\n      );\n    };\n  },\n);\n"],"mappings":";;;;;;;;;;AAqCA,IAAa,eAAe,IAAI,OAAO;CACrC,MAAM;EACJ,WAAW;EACX,UAAU;EACV,SAAS;EACT,MAAM;EACN,OAAO;EACP,QAAQ;EACR,QAAQ;EACR,SAAS;EACT,aAAa;EACb,cAAc;EACd,eAAe;EACf,QAAQ;GAAE,SAAS;GAAW,mBAAmB;EAAc;EAC/D,SAAS;GAAE,SAAS;GAAG,mBAAmB;EAAY;EACtD,oBAAoB;EACpB,oBAAoB;CACtB;CACA,QAAQ,EAAE,iBAAiB;EAAE,SAAS;EAAe,2BAAyB;CAAU,EAAE;CAC1F,SAAS,EAAE,iBAAiB;EAAE,SAAS;EAAe,2BAAyB;CAAW,EAAE;CAC5F,SAAS,EAAE,iBAAiB;EAAE,SAAS;EAAe,2BAAyB;CAAW,EAAE;CAC5F,QAAQ,EAAE,iBAAiB;EAAE,SAAS;EAAe,2BAAyB;CAAU,EAAE;CAC1F,OAAO;EACL,WAAW;EACX,UAAU;EACV,iBAAiB;EACjB,kBAAkB;EAClB,SAAS;EACT,YAAY;EACZ,gBAAgB;EAChB,OAAO;EACP,QAAQ;EACR,cAAc;EAEd,iBAAiB;EACjB,WAAW;EACX,OAAO;EACP,UAAU;EACV,WAAW;GAAE,SAAS;GAAQ,kBAAkB;EAAqB;EACrE,oBAAoB;EACpB,oBAAoB;EACpB,0BAA0B;CAC5B;AACF,CAAC;;AAGD,IAAa,SAAS,0BACpB,QAAA,SAQmB;CAAA,MAAA,UAAAA,SAAA,QAAA,kBAPa,OAAK,KAAA,IAAA;CAAA,MAAA,OAAAC,aAAA,QAAA,QAC5B,QAAQ;CAAA,MAAA,UAAAA,aAAA,QAAA,WACL,KAAK;CAAA,MAAA,WAAAA,aAAA,QAAA,UAAA;CAAA,MAAA,WAAAA,aAAA,QAAA,UAAA;CAAA,MAAA,aAAAA,aAAA,QAAA,YAAA;CAAA,MAIZ,OAAIC,UAAA,QAAA,MAAA,IAAA;CAEP,MAAM,OAAO,QAAQ;CACrB,aAAa;EACX,MAAM,MAAM,SAAA,SAAY,MAAM,YAAY;EAC1C,OAAAC,YAAA,UAEQ,WAAqB,EAAE,IAAI,CAAC,aAAa,MAAM,aAAY,KAAA,MAAM,EAAE,GAAG,MAAM;GAC9E,MAAM;GACN,MAAM;GACN,gBAAgB,QAAA,QAAU,SAAS;GACnC,aAAa,QAAA,QAAU,SAAS,KAAA;GAChC,UAAU;GACV,eAAe;IACb,IAAI,QAAA,SAAW,MAAM,UAAU;IAC/B,QAAA,QAAU,CAAA,QAAA;IACV,SAAA,QAAA,QAAA,KAAkB;GACpB;GACA,GAAG,UAAU,EAAE,iBAAiB,IAAI,CAAC;EACvC,CAAC,GAAC,CAAAA,YAAA,QAGI,WACF,EAAE,IAAI,aAAa,MAAM,GAAC,WAAA,OAE1B,UAAU,EAAE,gBAAc,QAAA,MAAU,CAAC,CACvC,GAAC,CAEA,QAAA,SAAAA,YAAA,SAAA,EAAA,QAA0B,GAAE,GAAA,IAAA,CAAI,CAAA,CAAA,CAAA;CAIzC;AACF,GAAC;CAAA,MAAA;CAAA,OAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;CAAA;AAAA,CACH"}

package/dist/form/Uploader.d.ts

@@ -0,0 +1,67 @@
+import { css } from '@zerodep-dev/vue-tsx-pro-tsx/styles';
+import { type VNodeChild } from 'vue';
+import { type PartProps } from '../utils/props';
+/** 一个文件 */
+export interface UploaderFile {
+    /** 预览（及上传完）的地址 */
+    url: string;
+    /** H5 里选到的 File，上传时用；小程序里没有（用 url 这个临时路径上传） */
+    file?: File;
+    /** 字节数 */
+    size?: number;
+    /** 上传的状态；不给时是已完成 */
+    status?: 'uploading' | 'failed' | 'done';
+    /** 状态下面的文字（“上传中”“上传失败”） */
+    message?: string;
+}
+/** 未声明的属性落到根元素（div）上 */
+export interface UploaderProps extends Omit<PartProps<'div'>, 'onChange'> {
+    /** 已选的文件；双向绑定写 `_value={x}` */
+    _value?: UploaderFile[];
+    /** 最多几张 */
+    maxCount?: number;
+    /** 单张最大字节数；超过的不加进来，交给 onOversize */
+    maxSize?: number;
+    /**
+     * 一次可以选多张
+     * @default true
+     */
+    multiple?: boolean;
+    /**
+     * 能删除
+     * @default true
+     */
+    deletable?: boolean;
+    /** 禁用 */
+    disabled?: boolean;
+    /**
+     * 方格的边长（CSS 长度）
+     * @default '5em'
+     */
+    previewSize?: string;
+    /** 选图那一格的文字；不给时用语言包的“上传图片” */
+    uploadText?: VNodeChild;
+    /** 选好了：新加的文件（已经在 _value 里，是响应式的，改 status 会刷新） */
+    onRead?: (files: UploaderFile[]) => void;
+    /** 有文件超过 maxSize */
+    onOversize?: (files: UploaderFile[]) => void;
+    /** 删除了一张 */
+    onDelete?: (file: UploaderFile, index: number) => void;
+    /** 点了一张预览 */
+    onPreview?: (file: UploaderFile, index: number) => void;
+    /** 每一格预览的部件属性 */
+    propsItem?: PartProps<'div'>;
+    /** 选图那一格的部件属性 */
+    propsUpload?: PartProps<'button'>;
+}
+/** Uploader 的样式：root、item、mask、remove、upload */
+export declare const uploaderStyles: Readonly<{
+    item: css.CompiledStyles;
+    mask: css.CompiledStyles;
+    remove: css.CompiledStyles;
+    root: css.CompiledStyles;
+    upload: css.CompiledStyles;
+    uploadIcon: css.CompiledStyles;
+}>;
+/** 图片上传（div > 预览的方格 + 选图的一格） */
+export declare const Uploader: import("@zerodep-dev/vue-tsx-pro-tsx").TsxComponent<UploaderProps>;