@xihan-ui/vue 1.0.0 → 1.1.0

package/dist/components/resizable/resizable.js

@@ -0,0 +1,108 @@
+import { withXhConfig } from "../../config/config.js";
+import { provideResizable, useResizableContext } from "./context.js";
+import { useResizable } from "./use-resizable.js";
+import { defineComponent, h } from "vue";
+//#region src/components/resizable/resizable.ts
+const XhResizableRoot = defineComponent({
+	name: "XhResizableRoot",
+	props: {
+		size: {
+			type: Object,
+			default: void 0
+		},
+		defaultSize: {
+			type: Object,
+			default: void 0
+		},
+		minWidth: {
+			type: Number,
+			default: void 0
+		},
+		minHeight: {
+			type: Number,
+			default: void 0
+		},
+		maxWidth: {
+			type: Number,
+			default: void 0
+		},
+		maxHeight: {
+			type: Number,
+			default: void 0
+		},
+		aspectRatio: {
+			type: Number,
+			default: void 0
+		},
+		step: {
+			type: Number,
+			default: void 0
+		},
+		keyboardStep: {
+			type: Number,
+			default: void 0
+		},
+		keyboardLargeStep: {
+			type: Number,
+			default: void 0
+		},
+		edges: {
+			type: Array,
+			default: void 0
+		},
+		disabled: Boolean,
+		dir: {
+			type: String,
+			default: void 0
+		},
+		translations: {
+			type: Object,
+			default: void 0
+		}
+	},
+	emits: {
+		"size-change": (_details) => true,
+		"update:size": (_size) => true,
+		"size-change-end": (_details) => true
+	},
+	slots: Object,
+	setup(props, { slots, emit }) {
+		const notify = (details) => {
+			emit("size-change", details);
+			emit("update:size", details.size);
+		};
+		const ctx = useResizable(withXhConfig("resizable", props), notify, (details) => emit("size-change-end", details));
+		provideResizable(ctx);
+		return () => h("div", {
+			...ctx.api.value.getRootProps(),
+			ref: ctx.rootRef
+		}, slots.default?.({
+			size: ctx.api.value.size,
+			offset: ctx.api.value.offset,
+			resizing: ctx.api.value.resizing,
+			activeEdge: ctx.api.value.activeEdge
+		}));
+	}
+});
+/**
+* 一条边上的把手。
+*
+* 推西边与北边时容器的起点会动，那段位移写成 root 的 left / top——皮肤已给
+* `position: relative`，开箱即对。把 root 改成 static 会让这两个方向只变尺寸不移位。
+*/
+const XhResizableHandle = defineComponent({
+	name: "XhResizableHandle",
+	props: { edge: {
+		type: String,
+		required: true
+	} },
+	slots: Object,
+	setup(props, { slots }) {
+		const ctx = useResizableContext();
+		return () => h("span", ctx.api.value.getHandleProps({ edge: props.edge }), slots.default?.());
+	}
+});
+//#endregion
+export { XhResizableHandle, XhResizableRoot };
+
+//# sourceMappingURL=resizable.js.map

package/dist/components/resizable/resizable.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"resizable.js","names":[],"sources":["../../../src/components/resizable/resizable.ts"],"sourcesContent":["import type { ResizableOffset, ResizableSchema, ResizableSize, ResizableTranslations } from '@xihan-ui/headless'\nimport type { Direction } from '@xihan-ui/kernel'\nimport type { ResizeEdge } from '@xihan-ui/pointer'\nimport type { PropType, SlotsType, VNode } from 'vue'\nimport type { PayloadOf } from '../../runtime/payload'\nimport { defineComponent, h } from 'vue'\nimport { withXhConfig } from '../../config/config'\nimport { provideResizable, useResizableContext } from './context'\nimport { useResizable } from './use-resizable'\n\ntype ResizableProps = ResizableSchema['props']\n\n/** 默认插槽的载荷：当前尺寸、位移与调整态。 */\nexport interface ResizableRootSlotProps {\n  size: ResizableSize\n  offset: ResizableOffset\n  resizing: boolean\n  activeEdge: ResizeEdge | null\n}\n\nexport const XhResizableRoot = defineComponent({\n  name: 'XhResizableRoot',\n  props: {\n    size: { type: Object as PropType<ResizableSize>, default: undefined },\n    defaultSize: { type: Object as PropType<ResizableSize>, default: undefined },\n    minWidth: { type: Number, default: undefined },\n    minHeight: { type: Number, default: undefined },\n    maxWidth: { type: Number, default: undefined },\n    maxHeight: { type: Number, default: undefined },\n    aspectRatio: { type: Number, default: undefined },\n    step: { type: Number, default: undefined },\n    keyboardStep: { type: Number, default: undefined },\n    keyboardLargeStep: { type: Number, default: undefined },\n    edges: { type: Array as PropType<ResizeEdge[]>, default: undefined },\n    disabled: Boolean,\n    dir: { type: String as PropType<Direction>, default: undefined },\n    translations: { type: Object as PropType<Partial<ResizableTranslations>>, default: undefined },\n  },\n  // size-change 携带 { size }，update:size 携带裸尺寸（v-model:size）；\n  // size-change-end 只在一次调整收尾时发一次，存尺寸用它\n  emits: {\n    'size-change': (_details: PayloadOf<ResizableProps, 'onSizeChange'>) => true,\n    'update:size': (_size: PayloadOf<ResizableProps, 'onSizeChange'>['size']) => true,\n    'size-change-end': (_details: PayloadOf<ResizableProps, 'onSizeChangeEnd'>) => true,\n  },\n  slots: Object as SlotsType<{\n    default?: (props: ResizableRootSlotProps) => VNode[]\n  }>,\n  setup(props, { slots, emit }) {\n    const notify: ResizableProps['onSizeChange'] = (details) => {\n      emit('size-change', details)\n      emit('update:size', details.size)\n    }\n    const ctx = useResizable(withXhConfig('resizable', props) as ResizableProps, notify, details => emit('size-change-end', details))\n    provideResizable(ctx)\n\n    return () => h('div', {\n      ...ctx.api.value.getRootProps() as Record<string, unknown>,\n      ref: ctx.rootRef,\n    }, slots.default?.({\n      size: ctx.api.value.size,\n      offset: ctx.api.value.offset,\n      resizing: ctx.api.value.resizing,\n      activeEdge: ctx.api.value.activeEdge,\n    }))\n  },\n})\n\n/**\n * 一条边上的把手。\n *\n * 推西边与北边时容器的起点会动，那段位移写成 root 的 left / top——皮肤已给\n * `position: relative`，开箱即对。把 root 改成 static 会让这两个方向只变尺寸不移位。\n */\nexport const XhResizableHandle = defineComponent({\n  name: 'XhResizableHandle',\n  props: {\n    edge: { type: String as PropType<ResizeEdge>, required: true },\n  },\n  slots: Object as SlotsType<{\n    default?: () => VNode[]\n  }>,\n  setup(props, { slots }) {\n    const ctx = useResizableContext()\n    return () => h(\n      'span',\n      ctx.api.value.getHandleProps({ edge: props.edge }) as Record<string, unknown>,\n      slots.default?.(),\n    )\n  },\n})\n"],"mappings":";;;;;AAoBA,MAAa,kBAAkB,gBAAgB;CAC7C,MAAM;CACN,OAAO;EACL,MAAM;GAAE,MAAM;GAAmC,SAAS,KAAA;EAAU;EACpE,aAAa;GAAE,MAAM;GAAmC,SAAS,KAAA;EAAU;EAC3E,UAAU;GAAE,MAAM;GAAQ,SAAS,KAAA;EAAU;EAC7C,WAAW;GAAE,MAAM;GAAQ,SAAS,KAAA;EAAU;EAC9C,UAAU;GAAE,MAAM;GAAQ,SAAS,KAAA;EAAU;EAC7C,WAAW;GAAE,MAAM;GAAQ,SAAS,KAAA;EAAU;EAC9C,aAAa;GAAE,MAAM;GAAQ,SAAS,KAAA;EAAU;EAChD,MAAM;GAAE,MAAM;GAAQ,SAAS,KAAA;EAAU;EACzC,cAAc;GAAE,MAAM;GAAQ,SAAS,KAAA;EAAU;EACjD,mBAAmB;GAAE,MAAM;GAAQ,SAAS,KAAA;EAAU;EACtD,OAAO;GAAE,MAAM;GAAiC,SAAS,KAAA;EAAU;EACnE,UAAU;EACV,KAAK;GAAE,MAAM;GAA+B,SAAS,KAAA;EAAU;EAC/D,cAAc;GAAE,MAAM;GAAoD,SAAS,KAAA;EAAU;CAC/F;CAGA,OAAO;EACL,gBAAgB,aAAwD;EACxE,gBAAgB,UAA6D;EAC7E,oBAAoB,aAA2D;CACjF;CACA,OAAO;CAGP,MAAM,OAAO,EAAE,OAAO,QAAQ;EAC5B,MAAM,UAA0C,YAAY;GAC1D,KAAK,eAAe,OAAO;GAC3B,KAAK,eAAe,QAAQ,IAAI;EAClC;EACA,MAAM,MAAM,aAAa,aAAa,aAAa,KAAK,GAAqB,SAAQ,YAAW,KAAK,mBAAmB,OAAO,CAAC;EAChI,iBAAiB,GAAG;EAEpB,aAAa,EAAE,OAAO;GACpB,GAAG,IAAI,IAAI,MAAM,aAAa;GAC9B,KAAK,IAAI;EACX,GAAG,MAAM,UAAU;GACjB,MAAM,IAAI,IAAI,MAAM;GACpB,QAAQ,IAAI,IAAI,MAAM;GACtB,UAAU,IAAI,IAAI,MAAM;GACxB,YAAY,IAAI,IAAI,MAAM;EAC5B,CAAC,CAAC;CACJ;AACF,CAAC;;;;;;;AAQD,MAAa,oBAAoB,gBAAgB;CAC/C,MAAM;CACN,OAAO,EACL,MAAM;EAAE,MAAM;EAAgC,UAAU;CAAK,EAC/D;CACA,OAAO;CAGP,MAAM,OAAO,EAAE,SAAS;EACtB,MAAM,MAAM,oBAAoB;EAChC,aAAa,EACX,QACA,IAAI,IAAI,MAAM,eAAe,EAAE,MAAM,MAAM,KAAK,CAAC,GACjD,MAAM,UAAU,CAClB;CACF;AACF,CAAC"}

package/dist/components/resizable/use-resizable.d.ts

@@ -0,0 +1,14 @@
+import { ComputedRef, Ref } from "vue";
+import { ResizableApi, ResizableSchema } from "@xihan-ui/headless";
+import { Service } from "@xihan-ui/machine";
+//#region src/components/resizable/use-resizable.d.ts
+interface ResizableContext {
+  api: ComputedRef<ResizableApi>;
+  service: Service<ResizableSchema>;
+  /** 容器节点，机器在按下时拿它量矩形。 */
+  rootRef: Ref<HTMLElement | null>;
+}
+declare function useResizable(props: ResizableSchema['props'], onSizeChange?: ResizableSchema['props']['onSizeChange'], onSizeChangeEnd?: ResizableSchema['props']['onSizeChangeEnd']): ResizableContext;
+//#endregion
+export { ResizableContext, useResizable };
+//# sourceMappingURL=use-resizable.d.ts.map

package/dist/components/resizable/use-resizable.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-resizable.d.ts","names":[],"sources":["../../../src/components/resizable/use-resizable.ts"],"mappings":";;;;UAUiB;EACf,KAAK,YAAY;EACjB,SAAS,QAAQ;;EAEjB,SAAS,IAAI;;iBAGC,aACd,OAAO,0BACP,eAAe,0CACf,kBAAkB,8CACjB"}

package/dist/components/resizable/use-resizable.js

@@ -0,0 +1,25 @@
+import { vueNormalize } from "../../runtime/normalize-props.js";
+import { useMachine } from "../../runtime/use-machine.js";
+import { createVueIdGenerator } from "../../runtime/vue-id.js";
+import { computed, ref } from "vue";
+import { connectResizable, resizableMachine } from "@xihan-ui/headless";
+import { createScope } from "@xihan-ui/kernel";
+//#region src/components/resizable/use-resizable.ts
+function useResizable(props, onSizeChange, onSizeChangeEnd) {
+	const rootRef = ref(null);
+	const service = useMachine(resizableMachine, () => ({
+		...props,
+		onSizeChange,
+		onSizeChangeEnd
+	}), createScope(null, createVueIdGenerator()));
+	service.refs.set("getRootEl", () => rootRef.value);
+	return {
+		api: computed(() => connectResizable(service, vueNormalize)),
+		service,
+		rootRef
+	};
+}
+//#endregion
+export { useResizable };
+
+//# sourceMappingURL=use-resizable.js.map

package/dist/components/resizable/use-resizable.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-resizable.js","names":[],"sources":["../../../src/components/resizable/use-resizable.ts"],"sourcesContent":["import type { ResizableApi, ResizableSchema } from '@xihan-ui/headless'\nimport type { Service } from '@xihan-ui/machine'\nimport type { ComputedRef, Ref } from 'vue'\nimport { connectResizable, resizableMachine } from '@xihan-ui/headless'\nimport { createScope } from '@xihan-ui/kernel'\nimport { computed, ref } from 'vue'\nimport { vueNormalize } from '../../runtime/normalize-props'\nimport { useMachine } from '../../runtime/use-machine'\nimport { createVueIdGenerator } from '../../runtime/vue-id'\n\nexport interface ResizableContext {\n  api: ComputedRef<ResizableApi>\n  service: Service<ResizableSchema>\n  /** 容器节点，机器在按下时拿它量矩形。 */\n  rootRef: Ref<HTMLElement | null>\n}\n\nexport function useResizable(\n  props: ResizableSchema['props'],\n  onSizeChange?: ResizableSchema['props']['onSizeChange'],\n  onSizeChangeEnd?: ResizableSchema['props']['onSizeChangeEnd'],\n): ResizableContext {\n  const rootRef = ref<HTMLElement | null>(null)\n\n  const idGen = createVueIdGenerator()\n  const scope = createScope(null, idGen)\n  const service = useMachine(resizableMachine, () => ({ ...props, onSizeChange, onSizeChangeEnd }), scope)\n\n  // 传 getter 而非节点，ref 在挂载后才有值\n  service.refs.set('getRootEl', () => rootRef.value)\n\n  const api = computed(() => connectResizable(service, vueNormalize))\n  return { api, service, rootRef }\n}\n"],"mappings":";;;;;;;AAiBA,SAAgB,aACd,OACA,cACA,iBACkB;CAClB,MAAM,UAAU,IAAwB,IAAI;CAI5C,MAAM,UAAU,WAAW,yBAAyB;EAAE,GAAG;EAAO;EAAc;CAAgB,IADhF,YAAY,MADZ,qBACsB,CACkE,CAAC;CAGvG,QAAQ,KAAK,IAAI,mBAAmB,QAAQ,KAAK;CAGjD,OAAO;EAAE,KADG,eAAe,iBAAiB,SAAS,YAAY,CACtD;EAAG;EAAS;CAAQ;AACjC"}

package/dist/components/select/select.d.ts

@@ -192,15 +192,15 @@ declare const XhSelectRoot: import("vue").DefineComponent<import("vue").ExtractP
   tone: Tone;
   size: Size;
   disabled: boolean;
-  offset: number;
-  translations: Partial<import("@xihan-ui/headless").SelectTranslations> | undefined;
   open: boolean;
   defaultOpen: boolean;
-  variant: ControlVariant;
+  translations: Partial<import("@xihan-ui/headless").SelectTranslations> | undefined;
+  offset: number;
   readOnly: boolean;
-  loop: boolean;
   placeholder: string;
+  loop: boolean;
   placement: Placement;
+  variant: ControlVariant;
   clearable: boolean;
   maxTagCount: number;
 }, SlotsType<{

package/dist/components/side-nav/side-nav.d.ts

@@ -110,11 +110,11 @@ declare const XhSideNavRoot: import("vue").DefineComponent<import("vue").Extract
   dir: import("@xihan-ui/kernel").Direction | undefined;
   disabled: boolean;
   translations: Partial<import("@xihan-ui/headless").SideNavTranslations> | undefined;
-  accordion: boolean;
   loop: boolean;
+  accordion: boolean;
   expandedValue: string[];
-  collapsed: boolean;
   defaultExpandedValue: string[];
+  collapsed: boolean;
   collapsedPopout: boolean;
 }, SlotsType<{
   default?: (props: SideNavRootSlotProps) => VNode[];

package/dist/components/slider/slider.d.ts

@@ -158,8 +158,8 @@ declare const XhSliderRoot: import("vue").DefineComponent<import("vue").ExtractP
   tone: Tone;
   size: Size;
   disabled: boolean;
-  max: number;
   readOnly: boolean;
+  max: number;
   min: number;
   step: number;
   largeStep: number;

package/dist/components/sortable/context.d.ts

@@ -0,0 +1,7 @@
+import { SortableContext } from "./use-sortable.js";
+//#region src/components/sortable/context.d.ts
+declare function provideSortable(ctx: SortableContext): void;
+declare function useSortableContext(): SortableContext;
+//#endregion
+export { provideSortable, useSortableContext };
+//# sourceMappingURL=context.d.ts.map

package/dist/components/sortable/context.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"context.d.ts","names":[],"sources":["../../../src/components/sortable/context.ts"],"mappings":";;iBAMgB,gBAAgB,KAAK;iBAIrB,sBAAsB"}

package/dist/components/sortable/context.js

@@ -0,0 +1,15 @@
+import { inject, provide } from "vue";
+//#region src/components/sortable/context.ts
+const KEY = Symbol.for("xh-sortable");
+function provideSortable(ctx) {
+	provide(KEY, ctx);
+}
+function useSortableContext() {
+	const ctx = inject(KEY, null);
+	if (!ctx) throw new Error("[xh] Sortable 部件必须用在 XhSortableRoot 内");
+	return ctx;
+}
+//#endregion
+export { provideSortable, useSortableContext };
+
+//# sourceMappingURL=context.js.map

package/dist/components/sortable/context.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"context.js","names":[],"sources":["../../../src/components/sortable/context.ts"],"sourcesContent":["import type { InjectionKey } from 'vue'\nimport type { SortableContext } from './use-sortable'\nimport { inject, provide } from 'vue'\n\nconst KEY: InjectionKey<SortableContext> = Symbol.for('xh-sortable')\n\nexport function provideSortable(ctx: SortableContext): void {\n  provide(KEY, ctx)\n}\n\nexport function useSortableContext(): SortableContext {\n  const ctx = inject(KEY, null)\n  if (!ctx)\n    throw new Error('[xh] Sortable 部件必须用在 XhSortableRoot 内')\n  return ctx\n}\n"],"mappings":";;AAIA,MAAM,MAAqC,OAAO,IAAI,aAAa;AAEnE,SAAgB,gBAAgB,KAA4B;CAC1D,QAAQ,KAAK,GAAG;AAClB;AAEA,SAAgB,qBAAsC;CACpD,MAAM,MAAM,OAAO,KAAK,IAAI;CAC5B,IAAI,CAAC,KACH,MAAM,IAAI,MAAM,uCAAuC;CACzD,OAAO;AACT"}

package/dist/components/sortable/sortable.d.ts

@@ -0,0 +1,166 @@
+import { PayloadOf } from "../../runtime/payload.js";
+import { PropType, SlotsType, VNode } from "vue";
+import { SortableItemState, SortableMode, SortableSchema, SortableTranslations } from "@xihan-ui/headless";
+import { Direction } from "@xihan-ui/kernel";
+import { SortableAxis } from "@xihan-ui/pointer";
+//#region src/components/sortable/sortable.d.ts
+type SortableProps = SortableSchema['props'];
+/** 默认插槽的载荷：逐项呈现状态与整体拖动态。 */
+interface SortableRootSlotProps {
+  items: SortableItemState[];
+  dragging: boolean;
+  activeId: string | null;
+  from: number;
+  to: number;
+  mode: SortableMode | null;
+}
+/** 每一项的插槽载荷。`dragging` 是「就是它被拖着」，不是「列表里有人在拖」。 */
+interface SortableItemSlotProps {
+  dragging: boolean;
+  index: number;
+}
+declare const XhSortableRoot: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+  ids: {
+    type: PropType<string[]>;
+    default: () => never[];
+  };
+  orientation: {
+    type: PropType<SortableAxis>;
+    default: undefined;
+  };
+  dir: {
+    type: PropType<Direction>;
+    default: undefined;
+  };
+  disabled: BooleanConstructor;
+  activationDistance: {
+    type: NumberConstructor;
+    default: undefined;
+  };
+  autoScroll: {
+    type: BooleanConstructor;
+    default: undefined;
+  };
+  translations: {
+    type: PropType<Partial<SortableTranslations>>;
+    default: undefined;
+  };
+}>, () => VNode<import("vue").RendererNode, import("vue").RendererElement, {
+  [key: string]: any;
+}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+  sort: (_details: PayloadOf<SortableProps, "onSort">) => boolean;
+  'update:ids': (_ids: PayloadOf<SortableProps, "onSort">["ids"]) => true;
+  'drag-start': (_details: PayloadOf<SortableProps, "onDragStart">) => true;
+  'drag-end': (_details: PayloadOf<SortableProps, "onDragEnd">) => true;
+}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+  ids: {
+    type: PropType<string[]>;
+    default: () => never[];
+  };
+  orientation: {
+    type: PropType<SortableAxis>;
+    default: undefined;
+  };
+  dir: {
+    type: PropType<Direction>;
+    default: undefined;
+  };
+  disabled: BooleanConstructor;
+  activationDistance: {
+    type: NumberConstructor;
+    default: undefined;
+  };
+  autoScroll: {
+    type: BooleanConstructor;
+    default: undefined;
+  };
+  translations: {
+    type: PropType<Partial<SortableTranslations>>;
+    default: undefined;
+  };
+}>> & Readonly<{
+  onSort?: ((_details: import("@xihan-ui/headless").SortableSortDetails) => any) | undefined;
+  "onDrag-start"?: ((_details: import("@xihan-ui/headless").SortableDragStartDetails) => any) | undefined;
+  "onDrag-end"?: ((_details: import("@xihan-ui/headless").SortableDragEndDetails) => any) | undefined;
+  "onUpdate:ids"?: ((_ids: string[]) => any) | undefined;
+}>, {
+  orientation: SortableAxis;
+  dir: Direction;
+  disabled: boolean;
+  translations: Partial<SortableTranslations>;
+  ids: string[];
+  activationDistance: number;
+  autoScroll: boolean;
+}, SlotsType<{
+  default?: (props: SortableRootSlotProps) => VNode[];
+}>, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const XhSortableItem: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+  /** 项标识，与 `ids` 里的值一一对应。 */
+  itemId: {
+    type: StringConstructor;
+    required: true;
+  };
+  /** 单独禁掉这一项。整份 `disabled` 在 Root 上，这条是项级的。 */
+  disabled: {
+    type: BooleanConstructor;
+    default: undefined;
+  };
+}>, () => VNode<import("vue").RendererNode, import("vue").RendererElement, {
+  [key: string]: any;
+}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+  /** 项标识，与 `ids` 里的值一一对应。 */
+  itemId: {
+    type: StringConstructor;
+    required: true;
+  };
+  /** 单独禁掉这一项。整份 `disabled` 在 Root 上，这条是项级的。 */
+  disabled: {
+    type: BooleanConstructor;
+    default: undefined;
+  };
+}>> & Readonly<{}>, {
+  disabled: boolean;
+}, SlotsType<{
+  default?: (props: SortableItemSlotProps) => VNode[];
+}>, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const XhSortableItemHandle: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+  /** 项标识，与 `ids` 里的值一一对应。 */
+  itemId: {
+    type: StringConstructor;
+    required: true;
+  };
+  /** 单独禁掉这一项。整份 `disabled` 在 Root 上，这条是项级的。 */
+  disabled: {
+    type: BooleanConstructor;
+    default: undefined;
+  };
+}>, () => VNode<import("vue").RendererNode, import("vue").RendererElement, {
+  [key: string]: any;
+}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+  /** 项标识，与 `ids` 里的值一一对应。 */
+  itemId: {
+    type: StringConstructor;
+    required: true;
+  };
+  /** 单独禁掉这一项。整份 `disabled` 在 Root 上，这条是项级的。 */
+  disabled: {
+    type: BooleanConstructor;
+    default: undefined;
+  };
+}>> & Readonly<{}>, {
+  disabled: boolean;
+}, SlotsType<{
+  default?: () => VNode[];
+}>, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+/**
+ * 拖动过程的读屏播报区，视觉上不可见。
+ *
+ * 放进列表里就行，位置不限。它必须在拖动开始**之前**就在 DOM 上——
+ * 读屏不播报后插入的节点，等到拾起才渲出来等于没有。
+ */
+declare const XhSortableLiveRegion: import("vue").DefineComponent<{}, () => VNode<import("vue").RendererNode, import("vue").RendererElement, {
+  [key: string]: any;
+}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+//#endregion
+export { SortableItemSlotProps, SortableRootSlotProps, XhSortableItem, XhSortableItemHandle, XhSortableLiveRegion, XhSortableRoot };
+//# sourceMappingURL=sortable.d.ts.map

package/dist/components/sortable/sortable.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"sortable.d.ts","names":[],"sources":["../../../src/components/sortable/sortable.ts"],"mappings":";;;;;;KAUK,gBAAgB;;UAGJ;EACf,OAAO;EACP;EACA;EACA;EACA;EACA,MAAM;;;UAIS;EACf;EACA;;cAGW,8BAAc,8BAAA;;IAGD,MAAA;;;;IACS,MAAA,SAAS;;;;IACjB,MAAA,SAAS;;;;;;;;;;;;;IAIA,MAAA,SAAS,QAAQ;;;;;;EAI9B,OAAA,UAAA,UAAU;EACR,eAAA,MAAA,UAAU;EACN,eAAA,UAAA,UAAU;EACZ,aAAA,UAAA,UAAU;;;IAbX,MAAA;;;;IACS,MAAA,SAAS;;;;IACjB,MAAA,SAAS;;;;;;;;;;;;;IAIA,MAAA,SAAS,QAAQ;;;;;;;;;;;;;;;;;EAUvC,WAAC,OAAO,0BAA0B;kCA2B9C;cAEW,8BAAc,8BAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;EASb,WAAC,OAAO,0BAA0B;kCAc9C;cAEW,oCAAoB,8BAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;EASnB,gBAAM;kCAUlB;;;;;;;cAQW,oCAAoB,0BAAA,oBAAA,4BAAA;;8BAU/B,qCAAA,iDAAA,aAAA,eAAA,oDAAA"}

package/dist/components/sortable/sortable.js

@@ -0,0 +1,128 @@
+import { withXhConfig } from "../../config/config.js";
+import { provideSortable, useSortableContext } from "./context.js";
+import { useSortable } from "./use-sortable.js";
+import { computed, defineComponent, h } from "vue";
+//#region src/components/sortable/sortable.ts
+const XhSortableRoot = defineComponent({
+	name: "XhSortableRoot",
+	props: {
+		ids: {
+			type: Array,
+			default: () => []
+		},
+		orientation: {
+			type: String,
+			default: void 0
+		},
+		dir: {
+			type: String,
+			default: void 0
+		},
+		disabled: Boolean,
+		activationDistance: {
+			type: Number,
+			default: void 0
+		},
+		autoScroll: {
+			type: Boolean,
+			default: void 0
+		},
+		translations: {
+			type: Object,
+			default: void 0
+		}
+	},
+	emits: {
+		"sort": (_details) => true,
+		"update:ids": (_ids) => true,
+		"drag-start": (_details) => true,
+		"drag-end": (_details) => true
+	},
+	slots: Object,
+	setup(props, { slots, emit }) {
+		const notifySort = (details) => {
+			emit("sort", details);
+			emit("update:ids", details.ids);
+		};
+		const ctx = useSortable(withXhConfig("sortable", props), notifySort, (details) => emit("drag-start", details), (details) => emit("drag-end", details));
+		provideSortable(ctx);
+		return () => h("div", {
+			...ctx.api.value.getRootProps(),
+			ref: ctx.rootRef
+		}, slots.default?.({
+			items: ctx.api.value.items,
+			dragging: ctx.api.value.dragging,
+			activeId: ctx.api.value.activeId,
+			from: ctx.api.value.from,
+			to: ctx.api.value.to,
+			mode: ctx.api.value.mode
+		}));
+	}
+});
+const XhSortableItem = defineComponent({
+	name: "XhSortableItem",
+	props: {
+		/** 项标识，与 `ids` 里的值一一对应。 */
+		itemId: {
+			type: String,
+			required: true
+		},
+		/** 单独禁掉这一项。整份 `disabled` 在 Root 上，这条是项级的。 */
+		disabled: {
+			type: Boolean,
+			default: void 0
+		}
+	},
+	slots: Object,
+	setup(props, { slots }) {
+		const ctx = useSortableContext();
+		const state = computed(() => ctx.api.value.items.find((item) => item.id === props.itemId));
+		return () => h("div", ctx.api.value.getItemProps({
+			id: props.itemId,
+			disabled: props.disabled
+		}), slots.default?.({
+			dragging: state.value?.dragging ?? false,
+			index: state.value?.index ?? -1
+		}));
+	}
+});
+const XhSortableItemHandle = defineComponent({
+	name: "XhSortableItemHandle",
+	props: {
+		/** 项标识，与 `ids` 里的值一一对应。 */
+		itemId: {
+			type: String,
+			required: true
+		},
+		/** 单独禁掉这一项。整份 `disabled` 在 Root 上，这条是项级的。 */
+		disabled: {
+			type: Boolean,
+			default: void 0
+		}
+	},
+	slots: Object,
+	setup(props, { slots }) {
+		const ctx = useSortableContext();
+		return () => h("button", ctx.api.value.getItemHandleProps({
+			id: props.itemId,
+			disabled: props.disabled
+		}), slots.default?.());
+	}
+});
+/**
+* 拖动过程的读屏播报区，视觉上不可见。
+*
+* 放进列表里就行，位置不限。它必须在拖动开始**之前**就在 DOM 上——
+* 读屏不播报后插入的节点，等到拾起才渲出来等于没有。
+*/
+const XhSortableLiveRegion = defineComponent({
+	name: "XhSortableLiveRegion",
+	setup() {
+		const ctx = useSortableContext();
+		return () => h("div", ctx.api.value.getLiveRegionProps(), ctx.service.context.get("announcement"));
+	}
+});
+//#endregion
+export { XhSortableItem, XhSortableItemHandle, XhSortableLiveRegion, XhSortableRoot };
+
+//# sourceMappingURL=sortable.js.map

package/dist/components/sortable/sortable.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sortable.js","names":[],"sources":["../../../src/components/sortable/sortable.ts"],"sourcesContent":["import type { SortableItemState, SortableMode, SortableSchema, SortableTranslations } from '@xihan-ui/headless'\nimport type { Direction } from '@xihan-ui/kernel'\nimport type { SortableAxis } from '@xihan-ui/pointer'\nimport type { PropType, SlotsType, VNode } from 'vue'\nimport type { PayloadOf } from '../../runtime/payload'\nimport { computed, defineComponent, h } from 'vue'\nimport { withXhConfig } from '../../config/config'\nimport { provideSortable, useSortableContext } from './context'\nimport { useSortable } from './use-sortable'\n\ntype SortableProps = SortableSchema['props']\n\n/** 默认插槽的载荷：逐项呈现状态与整体拖动态。 */\nexport interface SortableRootSlotProps {\n  items: SortableItemState[]\n  dragging: boolean\n  activeId: string | null\n  from: number\n  to: number\n  mode: SortableMode | null\n}\n\n/** 每一项的插槽载荷。`dragging` 是「就是它被拖着」，不是「列表里有人在拖」。 */\nexport interface SortableItemSlotProps {\n  dragging: boolean\n  index: number\n}\n\nexport const XhSortableRoot = defineComponent({\n  name: 'XhSortableRoot',\n  props: {\n    ids: { type: Array as PropType<string[]>, default: () => [] },\n    orientation: { type: String as PropType<SortableAxis>, default: undefined },\n    dir: { type: String as PropType<Direction>, default: undefined },\n    disabled: Boolean,\n    activationDistance: { type: Number, default: undefined },\n    autoScroll: { type: Boolean, default: undefined },\n    translations: { type: Object as PropType<Partial<SortableTranslations>>, default: undefined },\n  },\n  // sort 携带 { from, to, id, ids }，update:ids 携带重排好的裸数组，可直接 v-model:ids\n  emits: {\n    'sort': (_details: PayloadOf<SortableProps, 'onSort'>) => true,\n    'update:ids': (_ids: PayloadOf<SortableProps, 'onSort'>['ids']) => true,\n    'drag-start': (_details: PayloadOf<SortableProps, 'onDragStart'>) => true,\n    'drag-end': (_details: PayloadOf<SortableProps, 'onDragEnd'>) => true,\n  },\n  slots: Object as SlotsType<{\n    default?: (props: SortableRootSlotProps) => VNode[]\n  }>,\n  setup(props, { slots, emit }) {\n    const notifySort: SortableProps['onSort'] = (details) => {\n      emit('sort', details)\n      emit('update:ids', details.ids)\n    }\n    const ctx = useSortable(\n      withXhConfig('sortable', props) as SortableProps,\n      notifySort,\n      details => emit('drag-start', details),\n      details => emit('drag-end', details),\n    )\n    provideSortable(ctx)\n\n    return () => h('div', {\n      ...ctx.api.value.getRootProps() as Record<string, unknown>,\n      ref: ctx.rootRef,\n    }, slots.default?.({\n      items: ctx.api.value.items,\n      dragging: ctx.api.value.dragging,\n      activeId: ctx.api.value.activeId,\n      from: ctx.api.value.from,\n      to: ctx.api.value.to,\n      mode: ctx.api.value.mode,\n    }))\n  },\n})\n\nexport const XhSortableItem = defineComponent({\n  name: 'XhSortableItem',\n  props: {\n    /** 项标识，与 `ids` 里的值一一对应。 */\n    itemId: { type: String, required: true },\n    /** 单独禁掉这一项。整份 `disabled` 在 Root 上，这条是项级的。 */\n    disabled: { type: Boolean, default: undefined },\n  },\n  slots: Object as SlotsType<{\n    default?: (props: SortableItemSlotProps) => VNode[]\n  }>,\n  setup(props, { slots }) {\n    const ctx = useSortableContext()\n    const state = computed(() => ctx.api.value.items.find(item => item.id === props.itemId))\n    return () => h(\n      'div',\n      ctx.api.value.getItemProps({ id: props.itemId, disabled: props.disabled }) as Record<string, unknown>,\n      slots.default?.({\n        dragging: state.value?.dragging ?? false,\n        index: state.value?.index ?? -1,\n      }),\n    )\n  },\n})\n\nexport const XhSortableItemHandle = defineComponent({\n  name: 'XhSortableItemHandle',\n  props: {\n    /** 项标识，与 `ids` 里的值一一对应。 */\n    itemId: { type: String, required: true },\n    /** 单独禁掉这一项。整份 `disabled` 在 Root 上，这条是项级的。 */\n    disabled: { type: Boolean, default: undefined },\n  },\n  slots: Object as SlotsType<{\n    default?: () => VNode[]\n  }>,\n  setup(props, { slots }) {\n    const ctx = useSortableContext()\n    return () => h(\n      'button',\n      ctx.api.value.getItemHandleProps({ id: props.itemId, disabled: props.disabled }) as Record<string, unknown>,\n      slots.default?.(),\n    )\n  },\n})\n\n/**\n * 拖动过程的读屏播报区，视觉上不可见。\n *\n * 放进列表里就行，位置不限。它必须在拖动开始**之前**就在 DOM 上——\n * 读屏不播报后插入的节点，等到拾起才渲出来等于没有。\n */\nexport const XhSortableLiveRegion = defineComponent({\n  name: 'XhSortableLiveRegion',\n  setup() {\n    const ctx = useSortableContext()\n    return () => h(\n      'div',\n      ctx.api.value.getLiveRegionProps() as Record<string, unknown>,\n      ctx.service.context.get('announcement'),\n    )\n  },\n})\n"],"mappings":";;;;;AA4BA,MAAa,iBAAiB,gBAAgB;CAC5C,MAAM;CACN,OAAO;EACL,KAAK;GAAE,MAAM;GAA6B,eAAe,CAAC;EAAE;EAC5D,aAAa;GAAE,MAAM;GAAkC,SAAS,KAAA;EAAU;EAC1E,KAAK;GAAE,MAAM;GAA+B,SAAS,KAAA;EAAU;EAC/D,UAAU;EACV,oBAAoB;GAAE,MAAM;GAAQ,SAAS,KAAA;EAAU;EACvD,YAAY;GAAE,MAAM;GAAS,SAAS,KAAA;EAAU;EAChD,cAAc;GAAE,MAAM;GAAmD,SAAS,KAAA;EAAU;CAC9F;CAEA,OAAO;EACL,SAAS,aAAiD;EAC1D,eAAe,SAAoD;EACnE,eAAe,aAAsD;EACrE,aAAa,aAAoD;CACnE;CACA,OAAO;CAGP,MAAM,OAAO,EAAE,OAAO,QAAQ;EAC5B,MAAM,cAAuC,YAAY;GACvD,KAAK,QAAQ,OAAO;GACpB,KAAK,cAAc,QAAQ,GAAG;EAChC;EACA,MAAM,MAAM,YACV,aAAa,YAAY,KAAK,GAC9B,aACA,YAAW,KAAK,cAAc,OAAO,IACrC,YAAW,KAAK,YAAY,OAAO,CACrC;EACA,gBAAgB,GAAG;EAEnB,aAAa,EAAE,OAAO;GACpB,GAAG,IAAI,IAAI,MAAM,aAAa;GAC9B,KAAK,IAAI;EACX,GAAG,MAAM,UAAU;GACjB,OAAO,IAAI,IAAI,MAAM;GACrB,UAAU,IAAI,IAAI,MAAM;GACxB,UAAU,IAAI,IAAI,MAAM;GACxB,MAAM,IAAI,IAAI,MAAM;GACpB,IAAI,IAAI,IAAI,MAAM;GAClB,MAAM,IAAI,IAAI,MAAM;EACtB,CAAC,CAAC;CACJ;AACF,CAAC;AAED,MAAa,iBAAiB,gBAAgB;CAC5C,MAAM;CACN,OAAO;;EAEL,QAAQ;GAAE,MAAM;GAAQ,UAAU;EAAK;;EAEvC,UAAU;GAAE,MAAM;GAAS,SAAS,KAAA;EAAU;CAChD;CACA,OAAO;CAGP,MAAM,OAAO,EAAE,SAAS;EACtB,MAAM,MAAM,mBAAmB;EAC/B,MAAM,QAAQ,eAAe,IAAI,IAAI,MAAM,MAAM,MAAK,SAAQ,KAAK,OAAO,MAAM,MAAM,CAAC;EACvF,aAAa,EACX,OACA,IAAI,IAAI,MAAM,aAAa;GAAE,IAAI,MAAM;GAAQ,UAAU,MAAM;EAAS,CAAC,GACzE,MAAM,UAAU;GACd,UAAU,MAAM,OAAO,YAAY;GACnC,OAAO,MAAM,OAAO,SAAS;EAC/B,CAAC,CACH;CACF;AACF,CAAC;AAED,MAAa,uBAAuB,gBAAgB;CAClD,MAAM;CACN,OAAO;;EAEL,QAAQ;GAAE,MAAM;GAAQ,UAAU;EAAK;;EAEvC,UAAU;GAAE,MAAM;GAAS,SAAS,KAAA;EAAU;CAChD;CACA,OAAO;CAGP,MAAM,OAAO,EAAE,SAAS;EACtB,MAAM,MAAM,mBAAmB;EAC/B,aAAa,EACX,UACA,IAAI,IAAI,MAAM,mBAAmB;GAAE,IAAI,MAAM;GAAQ,UAAU,MAAM;EAAS,CAAC,GAC/E,MAAM,UAAU,CAClB;CACF;AACF,CAAC;;;;;;;AAQD,MAAa,uBAAuB,gBAAgB;CAClD,MAAM;CACN,QAAQ;EACN,MAAM,MAAM,mBAAmB;EAC/B,aAAa,EACX,OACA,IAAI,IAAI,MAAM,mBAAmB,GACjC,IAAI,QAAQ,QAAQ,IAAI,cAAc,CACxC;CACF;AACF,CAAC"}

package/dist/components/sortable/use-sortable.d.ts

@@ -0,0 +1,14 @@
+import { ComputedRef, Ref } from "vue";
+import { SortableApi, SortableSchema } from "@xihan-ui/headless";
+import { Service } from "@xihan-ui/machine";
+//#region src/components/sortable/use-sortable.d.ts
+interface SortableContext {
+  api: ComputedRef<SortableApi>;
+  service: Service<SortableSchema>;
+  /** 容器节点，机器在拾起时拿它找项、量矩形。 */
+  rootRef: Ref<HTMLElement | null>;
+}
+declare function useSortable(props: SortableSchema['props'], onSort?: SortableSchema['props']['onSort'], onDragStart?: SortableSchema['props']['onDragStart'], onDragEnd?: SortableSchema['props']['onDragEnd']): SortableContext;
+//#endregion
+export { SortableContext, useSortable };
+//# sourceMappingURL=use-sortable.d.ts.map

package/dist/components/sortable/use-sortable.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-sortable.d.ts","names":[],"sources":["../../../src/components/sortable/use-sortable.ts"],"mappings":";;;;UAUiB;EACf,KAAK,YAAY;EACjB,SAAS,QAAQ;;EAEjB,SAAS,IAAI;;iBAGC,YACd,OAAO,yBACP,SAAS,mCACT,cAAc,wCACd,YAAY,uCACX"}

package/dist/components/sortable/use-sortable.js

@@ -0,0 +1,26 @@
+import { vueNormalize } from "../../runtime/normalize-props.js";
+import { useMachine } from "../../runtime/use-machine.js";
+import { createVueIdGenerator } from "../../runtime/vue-id.js";
+import { computed, ref } from "vue";
+import { connectSortable, sortableMachine } from "@xihan-ui/headless";
+import { createScope } from "@xihan-ui/kernel";
+//#region src/components/sortable/use-sortable.ts
+function useSortable(props, onSort, onDragStart, onDragEnd) {
+	const rootRef = ref(null);
+	const service = useMachine(sortableMachine, () => ({
+		...props,
+		onSort,
+		onDragStart,
+		onDragEnd
+	}), createScope(null, createVueIdGenerator()));
+	service.refs.set("getRootEl", () => rootRef.value);
+	return {
+		api: computed(() => connectSortable(service, vueNormalize)),
+		service,
+		rootRef
+	};
+}
+//#endregion
+export { useSortable };
+
+//# sourceMappingURL=use-sortable.js.map

package/dist/components/sortable/use-sortable.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-sortable.js","names":[],"sources":["../../../src/components/sortable/use-sortable.ts"],"sourcesContent":["import type { SortableApi, SortableSchema } from '@xihan-ui/headless'\nimport type { Service } from '@xihan-ui/machine'\nimport type { ComputedRef, Ref } from 'vue'\nimport { connectSortable, sortableMachine } from '@xihan-ui/headless'\nimport { createScope } from '@xihan-ui/kernel'\nimport { computed, ref } from 'vue'\nimport { vueNormalize } from '../../runtime/normalize-props'\nimport { useMachine } from '../../runtime/use-machine'\nimport { createVueIdGenerator } from '../../runtime/vue-id'\n\nexport interface SortableContext {\n  api: ComputedRef<SortableApi>\n  service: Service<SortableSchema>\n  /** 容器节点，机器在拾起时拿它找项、量矩形。 */\n  rootRef: Ref<HTMLElement | null>\n}\n\nexport function useSortable(\n  props: SortableSchema['props'],\n  onSort?: SortableSchema['props']['onSort'],\n  onDragStart?: SortableSchema['props']['onDragStart'],\n  onDragEnd?: SortableSchema['props']['onDragEnd'],\n): SortableContext {\n  const rootRef = ref<HTMLElement | null>(null)\n\n  const idGen = createVueIdGenerator()\n  const scope = createScope(null, idGen)\n  const service = useMachine(sortableMachine, () => ({ ...props, onSort, onDragStart, onDragEnd }), scope)\n\n  // 传 getter 而非节点，ref 在挂载后才有值\n  service.refs.set('getRootEl', () => rootRef.value)\n\n  const api = computed(() => connectSortable(service, vueNormalize))\n  return { api, service, rootRef }\n}\n"],"mappings":";;;;;;;AAiBA,SAAgB,YACd,OACA,QACA,aACA,WACiB;CACjB,MAAM,UAAU,IAAwB,IAAI;CAI5C,MAAM,UAAU,WAAW,wBAAwB;EAAE,GAAG;EAAO;EAAQ;EAAa;CAAU,IADhF,YAAY,MADZ,qBACsB,CACkE,CAAC;CAGvG,QAAQ,KAAK,IAAI,mBAAmB,QAAQ,KAAK;CAGjD,OAAO;EAAE,KADG,eAAe,gBAAgB,SAAS,YAAY,CACrD;EAAG;EAAS;CAAQ;AACjC"}

package/dist/components/steps/steps.d.ts

@@ -95,9 +95,9 @@ declare const XhStepsRoot: import("vue").DefineComponent<import("vue").ExtractPr
   size: Size;
   disabled: boolean;
   count: number;
+  linear: boolean;
   step: number;
   defaultStep: number;
-  linear: boolean;
 }, SlotsType<{
   default?: (props: StepsRootSlotProps) => VNode[];
 }>, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

package/dist/components/switch/switch.d.ts

@@ -68,8 +68,8 @@ declare const XhSwitch: import("vue").DefineComponent<import("vue").ExtractPropT
   invalid: boolean;
   value: string;
   disabled: boolean;
-  loading: boolean;
   readOnly: boolean;
+  loading: boolean;
   checked: boolean;
   defaultChecked: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;