@xihan-ui/vue 4.1.0 → 5.0.0

package/dist/components/slider/slider.js

@@ -1,13 +1,19 @@
+import { renderStructure } from "../../runtime/structure.js";
 import { useFormControlProps } from "../form/use-form-control.js";
 import { useFieldGroupWiring, useFieldLabelWiring } from "../field/use-field-control.js";
 import { provideSlider, provideSliderThumb, useSliderContext, useSliderThumbContext } from "./context.js";
 import { useSlider } from "./use-slider.js";
-import { computed, defineComponent, h } from "vue";
+import { sliderStructure } from "@xihan-ui/headless";
+import { computed, defineComponent, h, onUnmounted } from "vue";
 import { normalizeItemIndex } from "@xihan-ui/core";
 //#region src/components/slider/slider.ts
 const XhSliderRoot = defineComponent({
 	name: "XhSliderRoot",
 	props: {
+		/** 标题文字。不写默认插槽时铺 label 部件；需要放置其他内容时改用 label 插槽。 */
+		label: { type: String },
+		/** 不显示出来的名字，写成 aria-label 落在与字段标签同一个部件上；放进字段或渲染了 label 部件时以它们为准。 */
+		ariaLabel: { type: String },
 		value: { type: Array },
 		defaultValue: { type: Array },
 		min: { type: Number },
@@ -46,6 +52,10 @@ const XhSliderRoot = defineComponent({
 			type: Boolean,
 			default: void 0
 		},
+		required: {
+			type: Boolean,
+			default: void 0
+		},
 		tone: { type: String },
 		size: { type: String },
 		name: { type: String },
@@ -67,20 +77,27 @@ const XhSliderRoot = defineComponent({
 		};
 		const ctx = useSlider(useFormControlProps(props), notify, notifyEnd);
 		provideSlider(ctx);
-		return () => h("div", ctx.api.value.getRootProps(), slots.default?.({
-			value: ctx.api.value.value,
-			thumbs: ctx.api.value.thumbs,
-			range: ctx.api.value.range,
-			dragging: ctx.api.value.dragging,
-			setValue: ctx.api.value.setValue,
-			setThumbValue: ctx.api.value.setThumbValue
-		}));
+		return () => {
+			const api = ctx.api.value;
+			return h("div", api.getRootProps(), slots.default ? slots.default({
+				value: api.value,
+				thumbs: api.thumbs,
+				range: api.range,
+				dragging: api.dragging,
+				setValue: api.setValue,
+				setThumbValue: api.setThumbValue
+			}) : renderDefaultStructure(api, props.label, props.name !== void 0, slots.label));
+		};
 	}
 });
 const XhSliderLabel = defineComponent({
 	name: "XhSliderLabel",
 	setup(_, { slots }) {
 		const ctx = useSliderContext();
+		ctx.labelCount.value++;
+		onUnmounted(() => {
+			ctx.labelCount.value--;
+		});
 		return () => h("label", ctx.api.value.getLabelProps(), slots.default?.());
 	}
 });
@@ -158,6 +175,38 @@ const XhSliderHiddenInput = defineComponent({
 		return () => h("input", ctx.api.value.getHiddenInputProps(index.value));
 	}
 });
+/** 标准结构里各部件对应的组件；刻度的圆点与文案由 XhSliderTickGroup 自己铺。 */
+const SLIDER_PARTS = {
+	"label": XhSliderLabel,
+	"control": XhSliderControl,
+	"track": XhSliderTrack,
+	"range": XhSliderRange,
+	"tick-group": XhSliderTickGroup,
+	"thumb": XhSliderThumb,
+	"hidden-input": XhSliderHiddenInput
+};
+/** 刻度组自己按 marks 铺圆点与文案，铺结构时去掉这两格。 */
+function withoutSelfAssembled(nodes) {
+	return nodes.flatMap((node) => {
+		if (!("part" in node)) return [node];
+		if (node.part === "tick" || node.part === "tick-label") return [];
+		return [node.children ? {
+			...node,
+			children: withoutSelfAssembled(node.children)
+		} : node];
+	});
+}
+/**
+* 未写默认插槽时铺开的整套结构：照 headless 的 sliderStructure 渲，
+* 与 Web Components 不写部件时元素生成的节点出自同一份。标题由 label 插槽接管。
+*/
+function renderDefaultStructure(api, label, hiddenInput, labelSlot) {
+	return renderStructure(withoutSelfAssembled(sliderStructure(api, {
+		label,
+		hiddenInput,
+		slotted: (name) => name === "label" && labelSlot != null
+	})), SLIDER_PARTS, (node) => node.slot ? labelSlot?.() : void 0);
+}
 //#endregion
 export { XhSliderControl, XhSliderHiddenInput, XhSliderLabel, XhSliderRange, XhSliderRoot, XhSliderThumb, XhSliderTickGroup, XhSliderTrack, XhSliderValueText };
 

package/dist/components/slider/slider.js.map

@@ -1 +1 @@
-{"version":3,"file":"slider.js","names":[],"sources":["../../../src/components/slider/slider.ts"],"sourcesContent":["/*\n * Copyright (c) 2021-Present XiHanFun and contributors.\n * Licensed under the MIT License. See LICENSE in the project root for license information.\n */\n\n// 提供 slider 相关实现。\n\nimport type { Direction, Orientation, Size, Tone } from '@xihan-ui/core'\nimport type { SliderApi, SliderMark, SliderMarkMeta, SliderSchema, SliderValueTextDetails } from '@xihan-ui/headless'\nimport type { PropType, SlotsType, VNode } from 'vue'\nimport type { PayloadOf } from '../../runtime/payload'\nimport { normalizeItemIndex } from '@xihan-ui/core'\nimport { computed, defineComponent, h } from 'vue'\nimport { useFieldGroupWiring, useFieldLabelWiring } from '../field/use-field-control'\nimport { useFormControlProps } from '../form/use-form-control'\nimport { provideSlider, provideSliderThumb, useSliderContext, useSliderThumbContext } from './context'\nimport { useSlider } from './use-slider'\n\ntype SliderProps = SliderSchema['props']\n\n/** 默认插槽的载荷：当前值、逐个滑块的状态、已选区间与拖动标记，以及整份改值与单个滑块改值。 */\nexport type SliderRootSlotProps = Pick<\n  SliderApi,\n  'value' | 'thumbs' | 'range' | 'dragging' | 'setValue' | 'setThumbValue'\n>\n\n/** tick 插槽的载荷：该档刻度的呈现数据。 */\nexport interface SliderTickGroupTickSlotProps {\n  tick: SliderMarkMeta\n}\n\nexport const XhSliderRoot = defineComponent({\n  name: 'XhSliderRoot',\n  props: {\n    // 值恒是数组，单滑块即长度 1；缺席值 undefined 表示非受控\n    value: { type: Array as PropType<number[]> },\n    defaultValue: { type: Array as PropType<number[]> },\n    min: { type: Number },\n    max: { type: Number },\n    step: { type: Number },\n    largeStep: { type: Number },\n    minStepsBetweenThumbs: { type: Number },\n    marks: { type: Array as PropType<SliderMark[]> },\n    snapToMarks: { type: Boolean, default: undefined },\n    inverted: { type: Boolean, default: undefined },\n    draggableRange: { type: Boolean, default: undefined },\n    trackFill: { type: Boolean, default: undefined },\n    orientation: { type: String as PropType<Orientation> },\n    dir: { type: String as PropType<Direction> },\n    disabled: { type: Boolean, default: undefined },\n    readOnly: { type: Boolean, default: undefined },\n    invalid: { type: Boolean, default: undefined },\n    tone: { type: String as PropType<Tone> },\n    size: { type: String as PropType<Size> },\n    name: { type: String },\n    getValueText: {\n      type: Function as PropType<(details: SliderValueTextDetails) => string>,\n    },\n  },\n  // value-change 携带 { value }，update:value 携带裸数组；value-change-end 只在操作收尾时发一次\n  emits: {\n    'value-change': (_details: PayloadOf<SliderProps, 'onValueChange'>) => true,\n    'update:value': (_value: PayloadOf<SliderProps, 'onValueChange'>['value']) => true,\n    'value-change-end': (_details: PayloadOf<SliderProps, 'onValueChangeEnd'>) => true,\n  },\n  slots: Object as SlotsType<{\n    default?: (props: SliderRootSlotProps) => VNode[]\n  }>,\n  setup(props, { slots, emit }) {\n    const notify: SliderProps['onValueChange'] = (details) => {\n      emit('value-change', details)\n      emit('update:value', details.value)\n    }\n    const notifyEnd: SliderProps['onValueChangeEnd'] = (details) => {\n      emit('value-change-end', details)\n    }\n    const ctx = useSlider(useFormControlProps(props) as SliderProps, notify, notifyEnd)\n    provideSlider(ctx)\n    return () => h('div', ctx.api.value.getRootProps() as Record<string, unknown>, slots.default?.({\n      value: ctx.api.value.value,\n      thumbs: ctx.api.value.thumbs,\n      range: ctx.api.value.range,\n      dragging: ctx.api.value.dragging,\n      setValue: ctx.api.value.setValue,\n      setThumbValue: ctx.api.value.setThumbValue,\n    }))\n  },\n})\n\nexport const XhSliderLabel = defineComponent({\n  name: 'XhSliderLabel',\n  setup(_, { slots }) {\n    const ctx = useSliderContext()\n    return () => h('label', ctx.api.value.getLabelProps() as Record<string, unknown>, slots.default?.())\n  },\n})\n\nexport const XhSliderControl = defineComponent({\n  name: 'XhSliderControl',\n  setup(_, { slots }) {\n    const ctx = useSliderContext()\n    return () => h('div', ctx.api.value.getControlProps() as Record<string, unknown>, slots.default?.())\n  },\n})\n\nexport const XhSliderTrack = defineComponent({\n  name: 'XhSliderTrack',\n  setup(_, { slots }) {\n    const ctx = useSliderContext()\n    // 轨道节点交给机器，矩形在指针事件里现量\n    return () => h('div', {\n      ...ctx.api.value.getTrackProps() as Record<string, unknown>,\n      ref: ctx.trackRef,\n    }, slots.default?.())\n  },\n})\n\nexport const XhSliderTickGroup = defineComponent({\n  name: 'XhSliderTickGroup',\n  slots: Object as SlotsType<{\n    tick?: (props: SliderTickGroupTickSlotProps) => VNode[]\n  }>,\n  setup(_, { slots }) {\n    const ctx = useSliderContext()\n    // 刻度整组自动铺：圆点 + 文案（点文案跳值）；tick 插槽可换文案内容\n    return () => h('div', ctx.api.value.getTickGroupProps() as Record<string, unknown>, ctx.api.value.marks.flatMap(tick => [\n      h('span', { ...ctx.api.value.getTickProps({ value: tick.value }) as Record<string, unknown>, key: `dot-${tick.value}` }),\n      h(\n        'span',\n        { ...ctx.api.value.getTickLabelProps({ value: tick.value }) as Record<string, unknown>, key: `label-${tick.value}` },\n        slots.tick ? slots.tick({ tick }) : tick.label,\n      ),\n    ]))\n  },\n})\n\nexport const XhSliderRange = defineComponent({\n  name: 'XhSliderRange',\n  setup(_, { slots }) {\n    const ctx = useSliderContext()\n    return () => h('div', ctx.api.value.getRangeProps() as Record<string, unknown>, slots.default?.())\n  },\n})\n\nexport const XhSliderThumb = defineComponent({\n  name: 'XhSliderThumb',\n  props: {\n    /** 第几个滑块，多滑块时必须逐个写明（`:index=\"i\"`）；兼收字符串。 */\n    index: { type: [Number, String] as PropType<number | string>, default: 0 },\n  },\n  setup(props, { slots }) {\n    const ctx = useSliderContext()\n    const index = computed(() => normalizeItemIndex(props.index))\n    provideSliderThumb({ index })\n    // 放进表单字段时，字段的标题与说明接到拇指上：焦点落在拇指，读屏在这里念名字与说明\n    const fieldWiring = useFieldGroupWiring()\n    const fieldLabel = useFieldLabelWiring()\n    return () => h('div', fieldLabel.value({ ...fieldWiring.value, ...ctx.api.value.getThumbProps(index.value) as Record<string, unknown> }), slots.default?.())\n  },\n})\n\nexport const XhSliderValueText = defineComponent({\n  name: 'XhSliderValueText',\n  setup(_, { slots }) {\n    const { index } = useSliderThumbContext()\n    const ctx = useSliderContext()\n    // 值气泡：写在拇指里，没给内容就填这一个拇指的值文本\n    return () => h(\n      'span',\n      ctx.api.value.getValueTextProps(index.value) as Record<string, unknown>,\n      slots.default?.() ?? ctx.api.value.valueText(index.value),\n    )\n  },\n})\n\nexport const XhSliderHiddenInput = defineComponent({\n  name: 'XhSliderHiddenInput',\n  setup() {\n    const { index } = useSliderThumbContext()\n    const ctx = useSliderContext()\n    return () => h('input', ctx.api.value.getHiddenInputProps(index.value) as Record<string, unknown>)\n  },\n})\n"],"mappings":"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"}
+{"version":3,"file":"slider.js","names":[],"sources":["../../../src/components/slider/slider.ts"],"sourcesContent":["/*\n * Copyright (c) 2021-Present XiHanFun and contributors.\n * Licensed under the MIT License. See LICENSE in the project root for license information.\n */\n\n// 提供 slider 相关实现。\n\nimport type { Direction, Orientation, Size, Tone } from '@xihan-ui/core'\nimport type { SliderApi, SliderMark, SliderMarkMeta, SliderSchema, SliderValueTextDetails, StructureChild } from '@xihan-ui/headless'\nimport type { PropType, SlotsType, VNode } from 'vue'\nimport type { PayloadOf } from '../../runtime/payload'\nimport { normalizeItemIndex } from '@xihan-ui/core'\nimport { sliderStructure } from '@xihan-ui/headless'\nimport { computed, defineComponent, h, onUnmounted } from 'vue'\nimport { renderStructure } from '../../runtime/structure'\nimport { useFieldGroupWiring, useFieldLabelWiring } from '../field/use-field-control'\nimport { useFormControlProps } from '../form/use-form-control'\nimport { provideSlider, provideSliderThumb, useSliderContext, useSliderThumbContext } from './context'\nimport { useSlider } from './use-slider'\n\ntype SliderProps = SliderSchema['props']\n\n/** 默认插槽的载荷：当前值、逐个滑块的状态、已选区间与拖动标记，以及整份改值与单个滑块改值。 */\nexport type SliderRootSlotProps = Pick<\n  SliderApi,\n  'value' | 'thumbs' | 'range' | 'dragging' | 'setValue' | 'setThumbValue'\n>\n\n/** tick 插槽的载荷：该档刻度的呈现数据。 */\nexport interface SliderTickGroupTickSlotProps {\n  tick: SliderMarkMeta\n}\n\nexport const XhSliderRoot = defineComponent({\n  name: 'XhSliderRoot',\n  props: {\n    /** 标题文字。不写默认插槽时铺 label 部件；需要放置其他内容时改用 label 插槽。 */\n    label: { type: String },\n    /** 不显示出来的名字，写成 aria-label 落在与字段标签同一个部件上；放进字段或渲染了 label 部件时以它们为准。 */\n    ariaLabel: { type: String },\n    // 值恒是数组，单滑块即长度 1；缺席值 undefined 表示非受控\n    value: { type: Array as PropType<number[]> },\n    defaultValue: { type: Array as PropType<number[]> },\n    min: { type: Number },\n    max: { type: Number },\n    step: { type: Number },\n    largeStep: { type: Number },\n    minStepsBetweenThumbs: { type: Number },\n    marks: { type: Array as PropType<SliderMark[]> },\n    snapToMarks: { type: Boolean, default: undefined },\n    inverted: { type: Boolean, default: undefined },\n    draggableRange: { type: Boolean, default: undefined },\n    trackFill: { type: Boolean, default: undefined },\n    orientation: { type: String as PropType<Orientation> },\n    dir: { type: String as PropType<Direction> },\n    disabled: { type: Boolean, default: undefined },\n    readOnly: { type: Boolean, default: undefined },\n    invalid: { type: Boolean, default: undefined },\n    required: { type: Boolean, default: undefined },\n    tone: { type: String as PropType<Tone> },\n    size: { type: String as PropType<Size> },\n    name: { type: String },\n    getValueText: {\n      type: Function as PropType<(details: SliderValueTextDetails) => string>,\n    },\n  },\n  // value-change 携带 { value }，update:value 携带裸数组；value-change-end 只在操作收尾时发一次\n  emits: {\n    'value-change': (_details: PayloadOf<SliderProps, 'onValueChange'>) => true,\n    'update:value': (_value: PayloadOf<SliderProps, 'onValueChange'>['value']) => true,\n    'value-change-end': (_details: PayloadOf<SliderProps, 'onValueChangeEnd'>) => true,\n  },\n  slots: Object as SlotsType<{\n    default?: (props: SliderRootSlotProps) => VNode[]\n    label?: () => VNode[]\n  }>,\n  setup(props, { slots, emit }) {\n    const notify: SliderProps['onValueChange'] = (details) => {\n      emit('value-change', details)\n      emit('update:value', details.value)\n    }\n    const notifyEnd: SliderProps['onValueChangeEnd'] = (details) => {\n      emit('value-change-end', details)\n    }\n    const ctx = useSlider(useFormControlProps(props) as SliderProps, notify, notifyEnd)\n    provideSlider(ctx)\n    return () => {\n      const api = ctx.api.value\n      return h('div', api.getRootProps() as Record<string, unknown>, slots.default\n        ? slots.default({\n            value: api.value,\n            thumbs: api.thumbs,\n            range: api.range,\n            dragging: api.dragging,\n            setValue: api.setValue,\n            setThumbValue: api.setThumbValue,\n          })\n        : renderDefaultStructure(api, props.label, props.name !== undefined, slots.label))\n    }\n  },\n})\n\nexport const XhSliderLabel = defineComponent({\n  name: 'XhSliderLabel',\n  setup(_, { slots }) {\n    const ctx = useSliderContext()\n    // 渲出来就登记，在 setup 里同步做：排在输入之前时首帧与服务端直出就带上名字\n    ctx.labelCount.value++\n    onUnmounted(() => {\n      ctx.labelCount.value--\n    })\n    return () => h('label', ctx.api.value.getLabelProps() as Record<string, unknown>, slots.default?.())\n  },\n})\n\nexport const XhSliderControl = defineComponent({\n  name: 'XhSliderControl',\n  setup(_, { slots }) {\n    const ctx = useSliderContext()\n    return () => h('div', ctx.api.value.getControlProps() as Record<string, unknown>, slots.default?.())\n  },\n})\n\nexport const XhSliderTrack = defineComponent({\n  name: 'XhSliderTrack',\n  setup(_, { slots }) {\n    const ctx = useSliderContext()\n    // 轨道节点交给机器，矩形在指针事件里现量\n    return () => h('div', {\n      ...ctx.api.value.getTrackProps() as Record<string, unknown>,\n      ref: ctx.trackRef,\n    }, slots.default?.())\n  },\n})\n\nexport const XhSliderTickGroup = defineComponent({\n  name: 'XhSliderTickGroup',\n  slots: Object as SlotsType<{\n    tick?: (props: SliderTickGroupTickSlotProps) => VNode[]\n  }>,\n  setup(_, { slots }) {\n    const ctx = useSliderContext()\n    // 刻度整组自动铺：圆点 + 文案（点文案跳值）；tick 插槽可换文案内容\n    return () => h('div', ctx.api.value.getTickGroupProps() as Record<string, unknown>, ctx.api.value.marks.flatMap(tick => [\n      h('span', { ...ctx.api.value.getTickProps({ value: tick.value }) as Record<string, unknown>, key: `dot-${tick.value}` }),\n      h(\n        'span',\n        { ...ctx.api.value.getTickLabelProps({ value: tick.value }) as Record<string, unknown>, key: `label-${tick.value}` },\n        slots.tick ? slots.tick({ tick }) : tick.label,\n      ),\n    ]))\n  },\n})\n\nexport const XhSliderRange = defineComponent({\n  name: 'XhSliderRange',\n  setup(_, { slots }) {\n    const ctx = useSliderContext()\n    return () => h('div', ctx.api.value.getRangeProps() as Record<string, unknown>, slots.default?.())\n  },\n})\n\nexport const XhSliderThumb = defineComponent({\n  name: 'XhSliderThumb',\n  props: {\n    /** 第几个滑块，多滑块时必须逐个写明（`:index=\"i\"`）；兼收字符串。 */\n    index: { type: [Number, String] as PropType<number | string>, default: 0 },\n  },\n  setup(props, { slots }) {\n    const ctx = useSliderContext()\n    const index = computed(() => normalizeItemIndex(props.index))\n    provideSliderThumb({ index })\n    // 放进表单字段时，字段的标题与说明接到拇指上：焦点落在拇指，读屏在这里念名字与说明\n    const fieldWiring = useFieldGroupWiring()\n    const fieldLabel = useFieldLabelWiring()\n    return () => h('div', fieldLabel.value({ ...fieldWiring.value, ...ctx.api.value.getThumbProps(index.value) as Record<string, unknown> }), slots.default?.())\n  },\n})\n\nexport const XhSliderValueText = defineComponent({\n  name: 'XhSliderValueText',\n  setup(_, { slots }) {\n    const { index } = useSliderThumbContext()\n    const ctx = useSliderContext()\n    // 值气泡：写在拇指里，没给内容就填这一个拇指的值文本\n    return () => h(\n      'span',\n      ctx.api.value.getValueTextProps(index.value) as Record<string, unknown>,\n      slots.default?.() ?? ctx.api.value.valueText(index.value),\n    )\n  },\n})\n\nexport const XhSliderHiddenInput = defineComponent({\n  name: 'XhSliderHiddenInput',\n  setup() {\n    const { index } = useSliderThumbContext()\n    const ctx = useSliderContext()\n    return () => h('input', ctx.api.value.getHiddenInputProps(index.value) as Record<string, unknown>)\n  },\n})\n\n/** 标准结构里各部件对应的组件；刻度的圆点与文案由 XhSliderTickGroup 自己铺。 */\nconst SLIDER_PARTS = {\n  'label': XhSliderLabel,\n  'control': XhSliderControl,\n  'track': XhSliderTrack,\n  'range': XhSliderRange,\n  'tick-group': XhSliderTickGroup,\n  'thumb': XhSliderThumb,\n  'hidden-input': XhSliderHiddenInput,\n}\n\n/** 刻度组自己按 marks 铺圆点与文案，铺结构时去掉这两格。 */\nfunction withoutSelfAssembled(nodes: readonly StructureChild[]): StructureChild[] {\n  return nodes.flatMap((node): StructureChild[] => {\n    if (!('part' in node))\n      return [node]\n    if (node.part === 'tick' || node.part === 'tick-label')\n      return []\n    return [node.children ? { ...node, children: withoutSelfAssembled(node.children) } : node]\n  })\n}\n\n/**\n * 未写默认插槽时铺开的整套结构：照 headless 的 sliderStructure 渲，\n * 与 Web Components 不写部件时元素生成的节点出自同一份。标题由 label 插槽接管。\n */\nfunction renderDefaultStructure(api: SliderApi, label: string | undefined, hiddenInput: boolean, labelSlot?: () => VNode[]): VNode[] {\n  const nodes = sliderStructure(api, { label, hiddenInput, slotted: name => name === 'label' && labelSlot != null })\n  return renderStructure(withoutSelfAssembled(nodes), SLIDER_PARTS, node => (node.slot ? labelSlot?.() : undefined))\n}\n"],"mappings":"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"}

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

@@ -1,8 +1,13 @@
+import { SliderApi, SliderSchema } from "@xihan-ui/headless";
 import { ComputedRef, Ref } from "vue";
 import { Service } from "@xihan-ui/core";
-import { SliderApi, SliderSchema } from "@xihan-ui/headless";
 //#region src/components/slider/use-slider.d.ts
 interface SliderContext {
+  /**
+   * 已渲染的 label 部件数量，由 XhSliderLabel 在 setup 里同步登记、卸载时撤销。
+   * 可聚焦部件的 aria-labelledby 据此决定指不指过去：label 排在输入之前时，首帧与服务端直出就带上名字。
+   */
+  labelCount: Ref<number>;
   api: ComputedRef<SliderApi>;
   service: Service<SliderSchema>;
   /** 轨道节点，状态机在指针事件中读取它的矩形。 */

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

@@ -1 +1 @@
-{"version":3,"file":"use-slider.d.ts","names":[],"sources":["../../../src/components/slider/use-slider.ts"],"mappings":";;;;UAiBiB;EACf,KAAK,YAAY;EACjB,SAAS,QAAQ;;EAEjB,UAAU,IAAI;;iBAGA,UACd,OAAO,uBACP,gBAAgB,wCAChB,mBAAmB,4CAClB"}
+{"version":3,"file":"use-slider.d.ts","names":[],"sources":["../../../src/components/slider/use-slider.ts"],"mappings":";;;;UAiBiB;;;;;EAKf,YAAY;EACZ,KAAK,YAAY;EACjB,SAAS,QAAQ;;EAEjB,UAAU,IAAI;;iBAGA,UACd,OAAO,uBACP,gBAAgB,wCAChB,mBAAmB,4CAClB"}

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

@@ -1,19 +1,23 @@
 import { vueNormalize } from "../../runtime/normalize-props.js";
 import { useMachine } from "../../runtime/use-machine.js";
 import { createVueIdGenerator } from "../../runtime/vue-id.js";
+import { connectSlider, sliderMachine } from "@xihan-ui/headless";
 import { computed, ref } from "vue";
 import { createScope } from "@xihan-ui/core";
-import { connectSlider, sliderMachine } from "@xihan-ui/headless";
 //#region src/components/slider/use-slider.ts
 function useSlider(props, onValueChange, onValueChangeEnd) {
 	const trackRef = ref(null);
+	const scope = createScope(null, createVueIdGenerator());
+	const labelCount = ref(0);
 	const service = useMachine(sliderMachine, () => ({
 		...props,
+		labelled: labelCount.value > 0,
 		onValueChange,
 		onValueChangeEnd
-	}), createScope(null, createVueIdGenerator()));
+	}), scope);
 	service.refs.set("getTrackEl", () => trackRef.value);
 	return {
+		labelCount,
 		api: computed(() => connectSlider(service, vueNormalize)),
 		service,
 		trackRef

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

@@ -1 +1 @@
-{"version":3,"file":"use-slider.js","names":[],"sources":["../../../src/components/slider/use-slider.ts"],"sourcesContent":["/*\n * Copyright (c) 2021-Present XiHanFun and contributors.\n * Licensed under the MIT License. See LICENSE in the project root for license information.\n */\n\n// 提供 use slider 相关实现。\n\nimport type { Service } from '@xihan-ui/core'\nimport type { SliderApi, SliderSchema } from '@xihan-ui/headless'\nimport type { ComputedRef, Ref } from 'vue'\nimport { createScope } from '@xihan-ui/core'\nimport { connectSlider, sliderMachine } from '@xihan-ui/headless'\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 SliderContext {\n  api: ComputedRef<SliderApi>\n  service: Service<SliderSchema>\n  /** 轨道节点，状态机在指针事件中读取它的矩形。 */\n  trackRef: Ref<HTMLElement | null>\n}\n\nexport function useSlider(\n  props: SliderSchema['props'],\n  onValueChange?: SliderSchema['props']['onValueChange'],\n  onValueChangeEnd?: SliderSchema['props']['onValueChangeEnd'],\n): SliderContext {\n  const trackRef = ref<HTMLElement | null>(null)\n\n  const idGen = createVueIdGenerator()\n  const scope = createScope(null, idGen)\n  const service = useMachine(sliderMachine, () => ({ ...props, onValueChange, onValueChangeEnd }), scope)\n\n  // 传 getter 而非节点，ref 在挂载后才有值\n  service.refs.set('getTrackEl', () => trackRef.value)\n\n  const api = computed(() => connectSlider(service, vueNormalize))\n  return { api, service, trackRef }\n}\n"],"mappings":";;;;;;;AAwBA,SAAgB,UACd,OACA,eACA,kBACe;CACf,MAAM,WAAW,IAAwB,IAAI;CAI7C,MAAM,UAAU,WAAW,sBAAsB;EAAE,GAAG;EAAO;EAAe;CAAiB,IAD/E,YAAY,MADZ,qBACsB,CACiE,CAAC;CAGtG,QAAQ,KAAK,IAAI,oBAAoB,SAAS,KAAK;CAGnD,OAAO;EAAE,KADG,eAAe,cAAc,SAAS,YAAY,CACnD;EAAG;EAAS;CAAS;AAClC"}
+{"version":3,"file":"use-slider.js","names":[],"sources":["../../../src/components/slider/use-slider.ts"],"sourcesContent":["/*\n * Copyright (c) 2021-Present XiHanFun and contributors.\n * Licensed under the MIT License. See LICENSE in the project root for license information.\n */\n\n// 提供 use slider 相关实现。\n\nimport type { Service } from '@xihan-ui/core'\nimport type { SliderApi, SliderSchema } from '@xihan-ui/headless'\nimport type { ComputedRef, Ref } from 'vue'\nimport { createScope } from '@xihan-ui/core'\nimport { connectSlider, sliderMachine } from '@xihan-ui/headless'\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 SliderContext {\n  /**\n   * 已渲染的 label 部件数量，由 XhSliderLabel 在 setup 里同步登记、卸载时撤销。\n   * 可聚焦部件的 aria-labelledby 据此决定指不指过去：label 排在输入之前时，首帧与服务端直出就带上名字。\n   */\n  labelCount: Ref<number>\n  api: ComputedRef<SliderApi>\n  service: Service<SliderSchema>\n  /** 轨道节点，状态机在指针事件中读取它的矩形。 */\n  trackRef: Ref<HTMLElement | null>\n}\n\nexport function useSlider(\n  props: SliderSchema['props'],\n  onValueChange?: SliderSchema['props']['onValueChange'],\n  onValueChangeEnd?: SliderSchema['props']['onValueChangeEnd'],\n): SliderContext {\n  const trackRef = ref<HTMLElement | null>(null)\n\n  const idGen = createVueIdGenerator()\n  const scope = createScope(null, idGen)\n  const labelCount = ref(0)\n  const service = useMachine(sliderMachine, () => ({ ...props, labelled: labelCount.value > 0, onValueChange, onValueChangeEnd }), scope)\n\n  // 传 getter 而非节点，ref 在挂载后才有值\n  service.refs.set('getTrackEl', () => trackRef.value)\n\n  const api = computed(() => connectSlider(service, vueNormalize))\n  return { labelCount, api, service, trackRef }\n}\n"],"mappings":";;;;;;;AA6BA,SAAgB,UACd,OACA,eACA,kBACe;CACf,MAAM,WAAW,IAAwB,IAAI;CAG7C,MAAM,QAAQ,YAAY,MADZ,qBACsB,CAAC;CACrC,MAAM,aAAa,IAAI,CAAC;CACxB,MAAM,UAAU,WAAW,sBAAsB;EAAE,GAAG;EAAO,UAAU,WAAW,QAAQ;EAAG;EAAe;CAAiB,IAAI,KAAK;CAGtI,QAAQ,KAAK,IAAI,oBAAoB,SAAS,KAAK;CAGnD,OAAO;EAAE;EAAY,KADT,eAAe,cAAc,SAAS,YAAY,CACvC;EAAG;EAAS;CAAS;AAC9C"}

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

@@ -1,7 +1,7 @@
 import { PayloadOf } from "../../runtime/payload.js";
+import { SortableItemState, SortableMode, SortableSchema, SortableTranslations } from "@xihan-ui/headless";
 import { PropType, SlotsType, VNode } from "vue";
 import { Direction } from "@xihan-ui/core";
-import { SortableItemState, SortableMode, SortableSchema, SortableTranslations } from "@xihan-ui/headless";
 import { SortableAxis } from "@xihan-ui/pointer";
 //#region src/components/sortable/sortable.d.ts
 type SortableProps = SortableSchema['props'];
@@ -95,8 +95,8 @@ declare const XhSortableRoot: import("vue").DefineComponent<import("vue").Extrac
   "onUpdate:ids"?: ((_ids: string[]) => any) | undefined;
 }>, {
   disabled: boolean;
-  ids: string[];
   autoScroll: boolean;
+  ids: string[];
 }, SlotsType<{
   default?: (props: SortableRootSlotProps) => VNode[];
 }>, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

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

@@ -1,6 +1,6 @@
+import { SortableApi, SortableSchema } from "@xihan-ui/headless";
 import { ComputedRef, Ref } from "vue";
 import { Service } from "@xihan-ui/core";
-import { SortableApi, SortableSchema } from "@xihan-ui/headless";
 //#region src/components/sortable/use-sortable.d.ts
 interface SortableContext {
   api: ComputedRef<SortableApi>;

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

@@ -1,9 +1,9 @@
 import { vueNormalize } from "../../runtime/normalize-props.js";
 import { useMachine } from "../../runtime/use-machine.js";
 import { createVueIdGenerator } from "../../runtime/vue-id.js";
+import { connectSortable, sortableMachine } from "@xihan-ui/headless";
 import { computed, ref } from "vue";
 import { createScope } from "@xihan-ui/core";
-import { connectSortable, sortableMachine } from "@xihan-ui/headless";
 //#region src/components/sortable/use-sortable.ts
 function useSortable(props, onSort, onTransfer, onDragStart, onDragEnd) {
 	const rootRef = ref(null);

package/dist/components/sparkline/sparkline.d.ts

@@ -1,6 +1,6 @@
+import { NumberFormatSpec, SparklineCurve, SparklineMarkers, SparklineReference, SparklineSchema, SparklineTranslations, SparklineVariant } from "@xihan-ui/headless";
 import { PropType } from "vue";
 import { Tone } from "@xihan-ui/core";
-import { NumberFormatSpec, SparklineCurve, SparklineMarkers, SparklineReference, SparklineSchema, SparklineTranslations, SparklineVariant } from "@xihan-ui/headless";
 //#region src/components/sparkline/sparkline.d.ts
 type SparklineProps = SparklineSchema['props'];
 /**

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

@@ -1,6 +1,6 @@
+import { SparklineApi, SparklineSchema } from "@xihan-ui/headless";
 import { ComputedRef, Ref } from "vue";
 import { Service } from "@xihan-ui/core";
-import { SparklineApi, SparklineSchema } from "@xihan-ui/headless";
 //#region src/components/sparkline/use-sparkline.d.ts
 interface SparklineContext {
   api: ComputedRef<SparklineApi>;

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

@@ -1,7 +1,7 @@
 import { vueNormalize } from "../../runtime/normalize-props.js";
 import { useMachine } from "../../runtime/use-machine.js";
-import { computed, ref } from "vue";
 import { connectSparkline, sparklineMachine } from "@xihan-ui/headless";
+import { computed, ref } from "vue";
 //#region src/components/sparkline/use-sparkline.ts
 /** 量测与度量都在状态机的效应里做，DOM 取值口经 refs 交入。 */
 function useSparkline(props) {

package/dist/components/spinner/spinner.d.ts

@@ -1,6 +1,6 @@
+import { SpinnerTranslations, SpinnerVariant } from "@xihan-ui/headless";
 import { PropType } from "vue";
 import { Orientation, Size, Tone } from "@xihan-ui/core";
-import { SpinnerTranslations, SpinnerVariant } from "@xihan-ui/headless";
 //#region src/components/spinner/spinner.d.ts
 /** 旋转图形由皮肤绘制在 root 的伪元素上，这里不生成任何子节点。 */
 declare const XhSpinner: import("vue").DefineComponent<import("vue").ExtractPropTypes<{

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

@@ -1,7 +1,7 @@
 import { vueNormalize } from "../../runtime/normalize-props.js";
 import { useMachine } from "../../runtime/use-machine.js";
-import { computed } from "vue";
 import { connectSpinner, spinnerMachine } from "@xihan-ui/headless";
+import { computed } from "vue";
 //#region src/components/spinner/use-spinner.ts
 function useSpinner(props) {
 	const service = useMachine(spinnerMachine, () => ({ ...props }));

package/dist/components/splitter/splitter.d.ts

@@ -1,7 +1,7 @@
 import { PayloadOf } from "../../runtime/payload.js";
+import { SplitterApi, SplitterPanelProps, SplitterPanelState, SplitterSchema, SplitterTranslations } from "@xihan-ui/headless";
 import { PropType, SlotsType, VNode } from "vue";
 import { Direction, Orientation } from "@xihan-ui/core";
-import { SplitterApi, SplitterPanelProps, SplitterPanelState, SplitterSchema, SplitterTranslations } from "@xihan-ui/headless";
 //#region src/components/splitter/splitter.d.ts
 type SplitterProps = SplitterSchema['props'];
 /** 默认插槽的载荷：各面板的百分比与逐块状态、拖拽态，以及整份赋值、单块调整、折叠展开的命令。 */

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

@@ -1,6 +1,6 @@
+import { SplitterApi, SplitterSchema } from "@xihan-ui/headless";
 import { ComputedRef, Ref } from "vue";
 import { Service } from "@xihan-ui/core";
-import { SplitterApi, SplitterSchema } from "@xihan-ui/headless";
 //#region src/components/splitter/use-splitter.d.ts
 interface SplitterContext {
   api: ComputedRef<SplitterApi>;

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

@@ -1,9 +1,9 @@
 import { vueNormalize } from "../../runtime/normalize-props.js";
 import { useMachine } from "../../runtime/use-machine.js";
 import { createVueIdGenerator } from "../../runtime/vue-id.js";
+import { connectSplitter, splitterMachine } from "@xihan-ui/headless";
 import { computed, ref } from "vue";
 import { createScope } from "@xihan-ui/core";
-import { connectSplitter, splitterMachine } from "@xihan-ui/headless";
 //#region src/components/splitter/use-splitter.ts
 function useSplitter(props, onSizesChange, onSizesChangeEnd) {
 	const rootRef = ref(null);

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

@@ -1,5 +1,5 @@
-import { ComputedRef } from "vue";
 import { StatisticApi } from "@xihan-ui/headless";
+import { ComputedRef } from "vue";
 //#region src/components/statistic/context.d.ts
 interface StatisticContext {
   api: ComputedRef<StatisticApi>;

package/dist/components/statistic/statistic.d.ts

@@ -1,6 +1,6 @@
+import { StatisticTrend } from "@xihan-ui/headless";
 import { PropType } from "vue";
 import { Size, Tone } from "@xihan-ui/core";
-import { StatisticTrend } from "@xihan-ui/headless";
 //#region src/components/statistic/statistic.d.ts
 declare const XhStatisticRoot: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
   size: {

package/dist/components/statistic/statistic.js

@@ -1,8 +1,8 @@
 import { vueNormalize } from "../../runtime/normalize-props.js";
 import { withXhConfig } from "../../config/config.js";
 import { provideStatistic, useStatisticContext } from "./context.js";
-import { computed, defineComponent, h } from "vue";
 import { connectStatistic } from "@xihan-ui/headless";
+import { computed, defineComponent, h } from "vue";
 //#region src/components/statistic/statistic.ts
 const XhStatisticRoot = defineComponent({
 	name: "XhStatisticRoot",

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

@@ -1,7 +1,7 @@
 import { PayloadOf } from "../../runtime/payload.js";
+import { StepNode, StepStatus, StepsApi, StepsSchema, StepsTranslations, StepsVariant } from "@xihan-ui/headless";
 import { PropType, SlotsType, VNode } from "vue";
 import { Direction, Orientation, Size, Tone } from "@xihan-ui/core";
-import { StepNode, StepStatus, StepsApi, StepsSchema, StepsTranslations, StepsVariant } from "@xihan-ui/headless";
 //#region src/components/steps/steps.d.ts
 type StepsProps = StepsSchema['props'];
 /** 默认插槽的载荷：当前步序、总步数、是否完成，以及跳步与前进后退的方法。 */

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

@@ -1,6 +1,6 @@
+import { StepsApi, StepsSchema } from "@xihan-ui/headless";
 import { ComputedRef } from "vue";
 import { Service } from "@xihan-ui/core";
-import { StepsApi, StepsSchema } from "@xihan-ui/headless";
 //#region src/components/steps/use-steps.d.ts
 interface StepsContext {
   api: ComputedRef<StepsApi>;

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

@@ -1,9 +1,9 @@
 import { vueNormalize } from "../../runtime/normalize-props.js";
 import { useMachine } from "../../runtime/use-machine.js";
 import { createVueIdGenerator } from "../../runtime/vue-id.js";
+import { connectSteps, stepsMachine } from "@xihan-ui/headless";
 import { computed } from "vue";
 import { createScope } from "@xihan-ui/core";
-import { connectSteps, stepsMachine } from "@xihan-ui/headless";
 //#region src/components/steps/use-steps.ts
 function useSteps(props, onValueChange) {
 	const service = useMachine(stepsMachine, () => ({

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

@@ -1,10 +1,14 @@
 import { PayloadOf } from "../../runtime/payload.js";
+import { SwitchSchema } from "@xihan-ui/headless";
 import { PropType } from "vue";
 import { Size, Tone } from "@xihan-ui/core";
-import { SwitchSchema } from "@xihan-ui/headless";
 //#region src/components/switch/switch.d.ts
 type SwitchProps = SwitchSchema['props'];
 declare const XhSwitch: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+  /** 不显示出来的名字，写成 aria-label 落在与字段标签同一个部件上；放进字段或渲染了 label 部件时以它们为准。 */
+  ariaLabel: {
+    type: StringConstructor;
+  };
   checked: {
     type: BooleanConstructor;
     default: undefined;
@@ -45,6 +49,10 @@ declare const XhSwitch: import("vue").DefineComponent<import("vue").ExtractPropT
   'checked-change': (_details: PayloadOf<SwitchProps, "onCheckedChange">) => true;
   'update:checked': (_checked: PayloadOf<SwitchProps, "onCheckedChange">["checked"]) => true;
 }, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+  /** 不显示出来的名字，写成 aria-label 落在与字段标签同一个部件上；放进字段或渲染了 label 部件时以它们为准。 */
+  ariaLabel: {
+    type: StringConstructor;
+  };
   checked: {
     type: BooleanConstructor;
     default: undefined;

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

@@ -1 +1 @@
-{"version":3,"file":"switch.d.ts","names":[],"sources":["../../../src/components/switch/switch.ts"],"mappings":";;;;;KAiBK,cAAc;cAEN,wBAAQ,8BAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAaD,MAAA,SAAS;EACT,MAAA,SAAS;;;;EAII,mBAAA,UAAA,UAAU;EACV,mBAAA,UAAA,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EANvB,MAAA,SAAS;EACT,MAAA,SAAS;;;;;;;;;;;;qCA2C3B"}
+{"version":3,"file":"switch.d.ts","names":[],"sources":["../../../src/components/switch/switch.ts"],"mappings":";;;;;KAmBK,cAAc;cAmCN,wBAAQ,8BAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAeD,MAAA,SAAS;EACT,MAAA,SAAS;;;;EAII,mBAAA,UAAA,UAAU;EACV,mBAAA,UAAA,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EANvB,MAAA,SAAS;EACT,MAAA,SAAS;;;;;;;;;;;;qCAyC3B"}

package/dist/components/switch/switch.js

@@ -1,12 +1,39 @@
+import { renderStructure } from "../../runtime/structure.js";
 import { slotPaints } from "../../runtime/slot-content.js";
 import { useFormControlProps } from "../form/use-form-control.js";
 import { useFieldLabelWiring, useFieldStateWiring } from "../field/use-field-control.js";
 import { useSwitch } from "./use-switch.js";
-import { defineComponent, h, useId } from "vue";
+import { switchStructure } from "@xihan-ui/headless";
+import { defineComponent, h, inject, provide, useId } from "vue";
 //#region src/components/switch/switch.ts
+const SWITCH_API = Symbol("XhSwitchApi");
+function useSwitchApi() {
+	const api = inject(SWITCH_API);
+	if (!api) throw new Error("[xh] 开关的部件只能渲在 XhSwitch 里");
+	return api;
+}
+/** 标准结构里各部件对应的组件。 */
+const SWITCH_PARTS = {
+	"thumb": defineComponent({
+		name: "XhSwitchThumb",
+		setup() {
+			const api = useSwitchApi();
+			return () => h("span", api.value.getThumbProps());
+		}
+	}),
+	"hidden-input": defineComponent({
+		name: "XhSwitchHiddenInput",
+		setup() {
+			const api = useSwitchApi();
+			return () => h("input", api.value.getHiddenInputProps());
+		}
+	})
+};
 const XhSwitch = defineComponent({
 	name: "XhSwitch",
 	props: {
+		/** 不显示出来的名字，写成 aria-label 落在与字段标签同一个部件上；放进字段或渲染了 label 部件时以它们为准。 */
+		ariaLabel: { type: String },
 		checked: {
 			type: Boolean,
 			default: void 0
@@ -48,6 +75,7 @@ const XhSwitch = defineComponent({
 			emit("update:checked", details.checked);
 		};
 		const { api } = useSwitch(useFormControlProps(props), notify);
+		provide(SWITCH_API, api);
 		const fieldWiring = useFieldStateWiring();
 		const fieldLabel = useFieldLabelWiring();
 		const textId = useId();
@@ -58,7 +86,7 @@ const XhSwitch = defineComponent({
 				...fieldWiring.value,
 				...api.value.getRootProps(),
 				...labelled ? { "aria-labelledby": textId } : null
-			}), [h("span", api.value.getThumbProps()), props.name === void 0 ? null : h("input", api.value.getHiddenInputProps())]);
+			}), renderStructure(switchStructure({ hiddenInput: props.name !== void 0 }), SWITCH_PARTS));
 			if (!labelled) return track;
 			return h("label", api.value.getLabelProps(), [track, h("span", {
 				...api.value.getTextProps(),

package/dist/components/switch/switch.js.map

@@ -1 +1 @@
-{"version":3,"file":"switch.js","names":[],"sources":["../../../src/components/switch/switch.ts"],"sourcesContent":["/*\n * Copyright (c) 2021-Present XiHanFun and contributors.\n * Licensed under the MIT License. See LICENSE in the project root for license information.\n */\n\n// 提供 switch 相关实现。\n\nimport type { Size, Tone } from '@xihan-ui/core'\nimport type { SwitchSchema } from '@xihan-ui/headless'\nimport type { PropType } from 'vue'\nimport type { PayloadOf } from '../../runtime/payload'\nimport { defineComponent, h, useId } from 'vue'\nimport { slotPaints } from '../../runtime/slot-content'\nimport { useFieldLabelWiring, useFieldStateWiring } from '../field/use-field-control'\nimport { useFormControlProps } from '../form/use-form-control'\nimport { useSwitch } from './use-switch'\n\ntype SwitchProps = SwitchSchema['props']\n\nexport const XhSwitch = defineComponent({\n  name: 'XhSwitch',\n  props: {\n    checked: { type: Boolean, default: undefined },\n    defaultChecked: Boolean,\n    disabled: { type: Boolean, default: undefined },\n    readOnly: { type: Boolean, default: undefined },\n    invalid: { type: Boolean, default: undefined },\n    required: { type: Boolean, default: undefined },\n    loading: { type: Boolean, default: undefined },\n    /** 表单字段名；提供后 hidden-input 才带 name 并参与提交 */\n    name: { type: String },\n    value: { type: String },\n    tone: String as PropType<Tone>,\n    size: String as PropType<Size>,\n  },\n  // checked-change 携带 { checked }，update:checked 携带裸布尔\n  emits: {\n    'checked-change': (_details: PayloadOf<SwitchProps, 'onCheckedChange'>) => true,\n    'update:checked': (_checked: PayloadOf<SwitchProps, 'onCheckedChange'>['checked']) => true,\n  },\n  setup(props, { emit, slots }) {\n    const notify: SwitchProps['onCheckedChange'] = (details) => {\n      emit('checked-change', details)\n      emit('update:checked', details.checked)\n    }\n    const { api } = useSwitch(useFormControlProps(props) as SwitchProps, notify)\n    // 字段的说明与校验状态要落在焦点所在的那颗按钮上：给了文字时封装根是外面那个 <label>，\n    // XhFieldControl 把整份接线合在它身上，而读屏只念焦点所在节点的描述\n    const fieldWiring = useFieldStateWiring()\n    // 字段的标签也得并进名字链，否则按钮的名字里只剩组件自己那段文字\n    const fieldLabel = useFieldLabelWiring()\n    // 文字那段的 id：按钮按它取名，字段的标签再排到它前面\n    const textId = useId()\n    // 表单影子由组件自己渲染：单体控件的轨道里没有子部件插槽，作者递不进来。\n    // 给了 name 才有这个节点——type=hidden 不是交互内容，放进 button 里是合法的\n    return () => {\n      // 默认插槽是轨道旁的文字：<label> 包住两者，点文字即切换。没给文字就只有轨道\n      const text = slots.default?.()\n      const labelled = slotPaints(text)\n      const track = h('button', fieldLabel.value({\n        ...fieldWiring.value,\n        ...api.value.getRootProps() as Record<string, unknown>,\n        // 有文字时名字改由它承担；没文字时不写，作者写在组件上的 aria-label 照旧生效\n        ...(labelled ? { 'aria-labelledby': textId } : null),\n      }), [\n        h('span', api.value.getThumbProps() as Record<string, unknown>),\n        props.name === undefined ? null : h('input', api.value.getHiddenInputProps() as Record<string, unknown>),\n      ])\n      if (!labelled)\n        return track\n      return h('label', api.value.getLabelProps() as Record<string, unknown>, [\n        track,\n        h('span', { ...api.value.getTextProps() as Record<string, unknown>, id: textId }, text),\n      ])\n    }\n  },\n})\n"],"mappings":";;;;;;AAmBA,MAAa,WAAW,gBAAgB;CACtC,MAAM;CACN,OAAO;EACL,SAAS;GAAE,MAAM;GAAS,SAAS,KAAA;EAAU;EAC7C,gBAAgB;EAChB,UAAU;GAAE,MAAM;GAAS,SAAS,KAAA;EAAU;EAC9C,UAAU;GAAE,MAAM;GAAS,SAAS,KAAA;EAAU;EAC9C,SAAS;GAAE,MAAM;GAAS,SAAS,KAAA;EAAU;EAC7C,UAAU;GAAE,MAAM;GAAS,SAAS,KAAA;EAAU;EAC9C,SAAS;GAAE,MAAM;GAAS,SAAS,KAAA;EAAU;;EAE7C,MAAM,EAAE,MAAM,OAAO;EACrB,OAAO,EAAE,MAAM,OAAO;EACtB,MAAM;EACN,MAAM;CACR;CAEA,OAAO;EACL,mBAAmB,aAAwD;EAC3E,mBAAmB,aAAmE;CACxF;CACA,MAAM,OAAO,EAAE,MAAM,SAAS;EAC5B,MAAM,UAA0C,YAAY;GAC1D,KAAK,kBAAkB,OAAO;GAC9B,KAAK,kBAAkB,QAAQ,OAAO;EACxC;EACA,MAAM,EAAE,QAAQ,UAAU,oBAAoB,KAAK,GAAkB,MAAM;EAG3E,MAAM,cAAc,oBAAoB;EAExC,MAAM,aAAa,oBAAoB;EAEvC,MAAM,SAAS,MAAM;EAGrB,aAAa;GAEX,MAAM,OAAO,MAAM,UAAU;GAC7B,MAAM,WAAW,WAAW,IAAI;GAChC,MAAM,QAAQ,EAAE,UAAU,WAAW,MAAM;IACzC,GAAG,YAAY;IACf,GAAG,IAAI,MAAM,aAAa;IAE1B,GAAI,WAAW,EAAE,mBAAmB,OAAO,IAAI;GACjD,CAAC,GAAG,CACF,EAAE,QAAQ,IAAI,MAAM,cAAc,CAA4B,GAC9D,MAAM,SAAS,KAAA,IAAY,OAAO,EAAE,SAAS,IAAI,MAAM,oBAAoB,CAA4B,CACzG,CAAC;GACD,IAAI,CAAC,UACH,OAAO;GACT,OAAO,EAAE,SAAS,IAAI,MAAM,cAAc,GAA8B,CACtE,OACA,EAAE,QAAQ;IAAE,GAAG,IAAI,MAAM,aAAa;IAA8B,IAAI;GAAO,GAAG,IAAI,CACxF,CAAC;EACH;CACF;AACF,CAAC"}
+{"version":3,"file":"switch.js","names":[],"sources":["../../../src/components/switch/switch.ts"],"sourcesContent":["/*\n * Copyright (c) 2021-Present XiHanFun and contributors.\n * Licensed under the MIT License. See LICENSE in the project root for license information.\n */\n\n// 提供 switch 相关实现。\n\nimport type { Size, Tone } from '@xihan-ui/core'\nimport type { SwitchApi, SwitchSchema } from '@xihan-ui/headless'\nimport type { InjectionKey, PropType, Ref } from 'vue'\nimport type { PayloadOf } from '../../runtime/payload'\nimport { switchStructure } from '@xihan-ui/headless'\nimport { defineComponent, h, inject, provide, useId } from 'vue'\nimport { slotPaints } from '../../runtime/slot-content'\nimport { renderStructure } from '../../runtime/structure'\nimport { useFieldLabelWiring, useFieldStateWiring } from '../field/use-field-control'\nimport { useFormControlProps } from '../form/use-form-control'\nimport { useSwitch } from './use-switch'\n\ntype SwitchProps = SwitchSchema['props']\n\nconst SWITCH_API: InjectionKey<Readonly<Ref<SwitchApi>>> = Symbol('XhSwitchApi')\n\nfunction useSwitchApi(): Readonly<Ref<SwitchApi>> {\n  const api = inject(SWITCH_API)\n  if (!api)\n    throw new Error('[xh] 开关的部件只能渲在 XhSwitch 里')\n  return api\n}\n\n/** 滑块。 */\nconst SwitchThumb = defineComponent({\n  name: 'XhSwitchThumb',\n  setup() {\n    const api = useSwitchApi()\n    return () => h('span', api.value.getThumbProps() as Record<string, unknown>)\n  },\n})\n\n/** 表单影子：单体控件的轨道里没有子部件插槽，作者递不进来，由组件自己渲。 */\nconst SwitchHiddenInput = defineComponent({\n  name: 'XhSwitchHiddenInput',\n  setup() {\n    const api = useSwitchApi()\n    return () => h('input', api.value.getHiddenInputProps() as Record<string, unknown>)\n  },\n})\n\n/** 标准结构里各部件对应的组件。 */\nconst SWITCH_PARTS = {\n  'thumb': SwitchThumb,\n  'hidden-input': SwitchHiddenInput,\n}\n\nexport const XhSwitch = defineComponent({\n  name: 'XhSwitch',\n  props: {\n    /** 不显示出来的名字，写成 aria-label 落在与字段标签同一个部件上；放进字段或渲染了 label 部件时以它们为准。 */\n    ariaLabel: { type: String },\n    checked: { type: Boolean, default: undefined },\n    defaultChecked: Boolean,\n    disabled: { type: Boolean, default: undefined },\n    readOnly: { type: Boolean, default: undefined },\n    invalid: { type: Boolean, default: undefined },\n    required: { type: Boolean, default: undefined },\n    loading: { type: Boolean, default: undefined },\n    /** 表单字段名；提供后 hidden-input 才带 name 并参与提交 */\n    name: { type: String },\n    value: { type: String },\n    tone: String as PropType<Tone>,\n    size: String as PropType<Size>,\n  },\n  // checked-change 携带 { checked }，update:checked 携带裸布尔\n  emits: {\n    'checked-change': (_details: PayloadOf<SwitchProps, 'onCheckedChange'>) => true,\n    'update:checked': (_checked: PayloadOf<SwitchProps, 'onCheckedChange'>['checked']) => true,\n  },\n  setup(props, { emit, slots }) {\n    const notify: SwitchProps['onCheckedChange'] = (details) => {\n      emit('checked-change', details)\n      emit('update:checked', details.checked)\n    }\n    const { api } = useSwitch(useFormControlProps(props) as SwitchProps, notify)\n    provide(SWITCH_API, api)\n    // 字段的说明与校验状态要落在焦点所在的那颗按钮上：给了文字时封装根是外面那个 <label>，\n    // XhFieldControl 把整份接线合在它身上，而读屏只念焦点所在节点的描述\n    const fieldWiring = useFieldStateWiring()\n    // 字段的标签也得并进名字链，否则按钮的名字里只剩组件自己那段文字\n    const fieldLabel = useFieldLabelWiring()\n    // 文字那段的 id：按钮按它取名，字段的标签再排到它前面\n    const textId = useId()\n    // 表单影子由组件自己渲染：单体控件的轨道里没有子部件插槽，作者递不进来。\n    // 给了 name 才有这个节点——type=hidden 不是交互内容，放进 button 里是合法的\n    return () => {\n      // 默认插槽是轨道旁的文字：<label> 包住两者，点文字即切换。没给文字就只有轨道\n      const text = slots.default?.()\n      const labelled = slotPaints(text)\n      const track = h('button', fieldLabel.value({\n        ...fieldWiring.value,\n        ...api.value.getRootProps() as Record<string, unknown>,\n        // 有文字时名字改由它承担；没文字时不写，作者写在组件上的 aria-label 照旧生效\n        ...(labelled ? { 'aria-labelledby': textId } : null),\n      }), renderStructure(switchStructure({ hiddenInput: props.name !== undefined }), SWITCH_PARTS))\n      if (!labelled)\n        return track\n      return h('label', api.value.getLabelProps() as Record<string, unknown>, [\n        track,\n        h('span', { ...api.value.getTextProps() as Record<string, unknown>, id: textId }, text),\n      ])\n    }\n  },\n})\n"],"mappings":";;;;;;;;AAqBA,MAAM,aAAqD,OAAO,aAAa;AAE/E,SAAS,eAAyC;CAChD,MAAM,MAAM,OAAO,UAAU;CAC7B,IAAI,CAAC,KACH,MAAM,IAAI,MAAM,2BAA2B;CAC7C,OAAO;AACT;;AAqBA,MAAM,eAAe;CACnB,SAnBkB,gBAAgB;EAClC,MAAM;EACN,QAAQ;GACN,MAAM,MAAM,aAAa;GACzB,aAAa,EAAE,QAAQ,IAAI,MAAM,cAAc,CAA4B;EAC7E;CACF,CAaqB;CACnB,gBAXwB,gBAAgB;EACxC,MAAM;EACN,QAAQ;GACN,MAAM,MAAM,aAAa;GACzB,aAAa,EAAE,SAAS,IAAI,MAAM,oBAAoB,CAA4B;EACpF;CACF,CAKkC;AAClC;AAEA,MAAa,WAAW,gBAAgB;CACtC,MAAM;CACN,OAAO;;EAEL,WAAW,EAAE,MAAM,OAAO;EAC1B,SAAS;GAAE,MAAM;GAAS,SAAS,KAAA;EAAU;EAC7C,gBAAgB;EAChB,UAAU;GAAE,MAAM;GAAS,SAAS,KAAA;EAAU;EAC9C,UAAU;GAAE,MAAM;GAAS,SAAS,KAAA;EAAU;EAC9C,SAAS;GAAE,MAAM;GAAS,SAAS,KAAA;EAAU;EAC7C,UAAU;GAAE,MAAM;GAAS,SAAS,KAAA;EAAU;EAC9C,SAAS;GAAE,MAAM;GAAS,SAAS,KAAA;EAAU;;EAE7C,MAAM,EAAE,MAAM,OAAO;EACrB,OAAO,EAAE,MAAM,OAAO;EACtB,MAAM;EACN,MAAM;CACR;CAEA,OAAO;EACL,mBAAmB,aAAwD;EAC3E,mBAAmB,aAAmE;CACxF;CACA,MAAM,OAAO,EAAE,MAAM,SAAS;EAC5B,MAAM,UAA0C,YAAY;GAC1D,KAAK,kBAAkB,OAAO;GAC9B,KAAK,kBAAkB,QAAQ,OAAO;EACxC;EACA,MAAM,EAAE,QAAQ,UAAU,oBAAoB,KAAK,GAAkB,MAAM;EAC3E,QAAQ,YAAY,GAAG;EAGvB,MAAM,cAAc,oBAAoB;EAExC,MAAM,aAAa,oBAAoB;EAEvC,MAAM,SAAS,MAAM;EAGrB,aAAa;GAEX,MAAM,OAAO,MAAM,UAAU;GAC7B,MAAM,WAAW,WAAW,IAAI;GAChC,MAAM,QAAQ,EAAE,UAAU,WAAW,MAAM;IACzC,GAAG,YAAY;IACf,GAAG,IAAI,MAAM,aAAa;IAE1B,GAAI,WAAW,EAAE,mBAAmB,OAAO,IAAI;GACjD,CAAC,GAAG,gBAAgB,gBAAgB,EAAE,aAAa,MAAM,SAAS,KAAA,EAAU,CAAC,GAAG,YAAY,CAAC;GAC7F,IAAI,CAAC,UACH,OAAO;GACT,OAAO,EAAE,SAAS,IAAI,MAAM,cAAc,GAA8B,CACtE,OACA,EAAE,QAAQ;IAAE,GAAG,IAAI,MAAM,aAAa;IAA8B,IAAI;GAAO,GAAG,IAAI,CACxF,CAAC;EACH;CACF;AACF,CAAC"}

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

@@ -1,5 +1,5 @@
-import { ComputedRef } from "vue";
 import { SwitchApi, SwitchSchema } from "@xihan-ui/headless";
+import { ComputedRef } from "vue";
 //#region src/components/switch/use-switch.d.ts
 interface SwitchContext {
   api: ComputedRef<SwitchApi>;

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

@@ -1,7 +1,7 @@
 import { vueNormalize } from "../../runtime/normalize-props.js";
 import { useMachine } from "../../runtime/use-machine.js";
-import { computed } from "vue";
 import { connectSwitch, switchMachine } from "@xihan-ui/headless";
+import { computed } from "vue";
 //#region src/components/switch/use-switch.ts
 function useSwitch(props, onCheckedChange) {
 	const service = useMachine(switchMachine, () => ({

package/dist/components/table/context.js

@@ -5,6 +5,7 @@ const SECTION_KEY = Symbol.for("xh-table-section");
 const ROW_KEY = Symbol.for("xh-table-row");
 const COLUMN_KEY = Symbol.for("xh-table-column");
 const HEADER_LEVEL_KEY = Symbol.for("xh-table-header-level");
+const FOOTER_LEVEL_KEY = Symbol.for("xh-table-footer-level");
 /** 表头行写明的层号，供行里的列头定位自己在多级表头里的哪一格。 */
 function provideTableHeaderLevel(level) {
 	provide(HEADER_LEVEL_KEY, level);
@@ -12,6 +13,13 @@ function provideTableHeaderLevel(level) {
 function useOptionalTableHeaderLevel() {
 	return inject(HEADER_LEVEL_KEY, null);
 }
+/** 表尾行写明的层号，供行里的格子按 footerCellSpan 定位自己在第几行表尾。 */
+function provideTableFooterLevel(level) {
+	provide(FOOTER_LEVEL_KEY, level);
+}
+function useOptionalTableFooterLevel() {
+	return inject(FOOTER_LEVEL_KEY, null);
+}
 function provideTable(ctx) {
 	provide(KEY, ctx);
 }
@@ -52,6 +60,6 @@ function useOptionalTableColumnContext() {
 	return inject(COLUMN_KEY, null);
 }
 //#endregion
-export { provideTable, provideTableColumn, provideTableHeaderLevel, provideTableRow, provideTableSection, useOptionalTableColumnContext, useOptionalTableHeaderLevel, useOptionalTableRowContext, useTableColumnContext, useTableContext, useTableRowContext, useTableSection };
+export { provideTable, provideTableColumn, provideTableFooterLevel, provideTableHeaderLevel, provideTableRow, provideTableSection, useOptionalTableColumnContext, useOptionalTableFooterLevel, useOptionalTableHeaderLevel, useOptionalTableRowContext, useTableColumnContext, useTableContext, useTableRowContext, useTableSection };
 
 //# sourceMappingURL=context.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"context.js","names":[],"sources":["../../../src/components/table/context.ts"],"sourcesContent":["/*\n * Copyright (c) 2021-Present XiHanFun and contributors.\n * Licensed under the MIT License. See LICENSE in the project root for license information.\n */\n\n// 提供 context 相关实现。\n\nimport type { TableColumnProps, TableRowProps } from '@xihan-ui/headless'\nimport type { ComputedRef, InjectionKey } from 'vue'\nimport type { TableContext } from './use-table'\nimport { inject, provide } from 'vue'\n\n/** 行所在的区段，决定同一个 row 部件渲染为表头行、数据行还是脚注行。 */\nexport type TableSection = 'header' | 'body' | 'footer'\n\n/** 行声明的值，供行内的操作按钮与单元格复用同一份声明。 */\nexport interface TableRowContext {\n  row: ComputedRef<TableRowProps>\n}\n\n/** 列声明的值，供列标题中的排序按钮复用同一份声明。 */\nexport interface TableColumnContext {\n  column: ComputedRef<TableColumnProps>\n}\n\nconst KEY: InjectionKey<TableContext> = Symbol.for('xh-table')\nconst SECTION_KEY: InjectionKey<TableSection> = Symbol.for('xh-table-section')\nconst ROW_KEY: InjectionKey<TableRowContext> = Symbol.for('xh-table-row')\nconst COLUMN_KEY: InjectionKey<TableColumnContext> = Symbol.for('xh-table-column')\nconst HEADER_LEVEL_KEY: InjectionKey<ComputedRef<number | undefined>> = Symbol.for('xh-table-header-level')\n\n/** 表头行写明的层号，供行里的列头定位自己在多级表头里的哪一格。 */\nexport function provideTableHeaderLevel(level: ComputedRef<number | undefined>): void {\n  provide(HEADER_LEVEL_KEY, level)\n}\n\nexport function useOptionalTableHeaderLevel(): ComputedRef<number | undefined> | null {\n  return inject(HEADER_LEVEL_KEY, null)\n}\n\nexport function provideTable(ctx: TableContext): void {\n  provide(KEY, ctx)\n}\n\nexport function useTableContext(): TableContext {\n  const ctx = inject(KEY, null)\n  if (!ctx)\n    throw new Error('[xh] Table 部件必须用在 XhTableRoot 内')\n  return ctx\n}\n\nexport function provideTableSection(section: TableSection): void {\n  provide(SECTION_KEY, section)\n}\n\n/** 取所在区段，无区段声明时按数据行处理。 */\nexport function useTableSection(): TableSection {\n  return inject(SECTION_KEY, 'body')\n}\n\nexport function provideTableRow(ctx: TableRowContext): void {\n  provide(ROW_KEY, ctx)\n}\n\nexport function useTableRowContext(): TableRowContext {\n  const ctx = inject(ROW_KEY, null)\n  if (!ctx)\n    throw new Error('[xh] Table 行内部件必须用在 XhTableRow 或 XhTableExpandedRow 内')\n  return ctx\n}\n\n/** 注入行上下文，表头与脚注单元格不在行内时返回 null。 */\nexport function useOptionalTableRowContext(): TableRowContext | null {\n  return inject(ROW_KEY, null)\n}\n\nexport function provideTableColumn(ctx: TableColumnContext): void {\n  provide(COLUMN_KEY, ctx)\n}\n\nexport function useTableColumnContext(): TableColumnContext {\n  const ctx = inject(COLUMN_KEY, null)\n  if (!ctx)\n    throw new Error('[xh] Table 排序把手必须用在 XhTableColumnHeader 内')\n  return ctx\n}\n\n/** 注入列上下文，列设置区中的操作按钮不在列标题内时返回 null，列身份改由自己的 value 声明。 */\nexport function useOptionalTableColumnContext(): TableColumnContext | null {\n  return inject(COLUMN_KEY, null)\n}\n"],"mappings":";;AAyBA,MAAM,MAAkC,OAAO,IAAI,UAAU;AAC7D,MAAM,cAA0C,OAAO,IAAI,kBAAkB;AAC7E,MAAM,UAAyC,OAAO,IAAI,cAAc;AACxE,MAAM,aAA+C,OAAO,IAAI,iBAAiB;AACjF,MAAM,mBAAkE,OAAO,IAAI,uBAAuB;;AAG1G,SAAgB,wBAAwB,OAA8C;CACpF,QAAQ,kBAAkB,KAAK;AACjC;AAEA,SAAgB,8BAAsE;CACpF,OAAO,OAAO,kBAAkB,IAAI;AACtC;AAEA,SAAgB,aAAa,KAAyB;CACpD,QAAQ,KAAK,GAAG;AAClB;AAEA,SAAgB,kBAAgC;CAC9C,MAAM,MAAM,OAAO,KAAK,IAAI;CAC5B,IAAI,CAAC,KACH,MAAM,IAAI,MAAM,iCAAiC;CACnD,OAAO;AACT;AAEA,SAAgB,oBAAoB,SAA6B;CAC/D,QAAQ,aAAa,OAAO;AAC9B;;AAGA,SAAgB,kBAAgC;CAC9C,OAAO,OAAO,aAAa,MAAM;AACnC;AAEA,SAAgB,gBAAgB,KAA4B;CAC1D,QAAQ,SAAS,GAAG;AACtB;AAEA,SAAgB,qBAAsC;CACpD,MAAM,MAAM,OAAO,SAAS,IAAI;CAChC,IAAI,CAAC,KACH,MAAM,IAAI,MAAM,uDAAuD;CACzE,OAAO;AACT;;AAGA,SAAgB,6BAAqD;CACnE,OAAO,OAAO,SAAS,IAAI;AAC7B;AAEA,SAAgB,mBAAmB,KAA+B;CAChE,QAAQ,YAAY,GAAG;AACzB;AAEA,SAAgB,wBAA4C;CAC1D,MAAM,MAAM,OAAO,YAAY,IAAI;CACnC,IAAI,CAAC,KACH,MAAM,IAAI,MAAM,2CAA2C;CAC7D,OAAO;AACT;;AAGA,SAAgB,gCAA2D;CACzE,OAAO,OAAO,YAAY,IAAI;AAChC"}
+{"version":3,"file":"context.js","names":[],"sources":["../../../src/components/table/context.ts"],"sourcesContent":["/*\n * Copyright (c) 2021-Present XiHanFun and contributors.\n * Licensed under the MIT License. See LICENSE in the project root for license information.\n */\n\n// 提供 context 相关实现。\n\nimport type { TableColumnProps, TableRowProps } from '@xihan-ui/headless'\nimport type { ComputedRef, InjectionKey } from 'vue'\nimport type { TableContext } from './use-table'\nimport { inject, provide } from 'vue'\n\n/** 行所在的区段，决定同一个 row 部件渲染为表头行、数据行还是脚注行。 */\nexport type TableSection = 'header' | 'body' | 'footer'\n\n/** 行声明的值，供行内的操作按钮与单元格复用同一份声明。 */\nexport interface TableRowContext {\n  row: ComputedRef<TableRowProps>\n}\n\n/** 列声明的值，供列标题中的排序按钮复用同一份声明。 */\nexport interface TableColumnContext {\n  column: ComputedRef<TableColumnProps>\n}\n\nconst KEY: InjectionKey<TableContext> = Symbol.for('xh-table')\nconst SECTION_KEY: InjectionKey<TableSection> = Symbol.for('xh-table-section')\nconst ROW_KEY: InjectionKey<TableRowContext> = Symbol.for('xh-table-row')\nconst COLUMN_KEY: InjectionKey<TableColumnContext> = Symbol.for('xh-table-column')\nconst HEADER_LEVEL_KEY: InjectionKey<ComputedRef<number | undefined>> = Symbol.for('xh-table-header-level')\nconst FOOTER_LEVEL_KEY: InjectionKey<ComputedRef<number | undefined>> = Symbol.for('xh-table-footer-level')\n\n/** 表头行写明的层号，供行里的列头定位自己在多级表头里的哪一格。 */\nexport function provideTableHeaderLevel(level: ComputedRef<number | undefined>): void {\n  provide(HEADER_LEVEL_KEY, level)\n}\n\nexport function useOptionalTableHeaderLevel(): ComputedRef<number | undefined> | null {\n  return inject(HEADER_LEVEL_KEY, null)\n}\n\n/** 表尾行写明的层号，供行里的格子按 footerCellSpan 定位自己在第几行表尾。 */\nexport function provideTableFooterLevel(level: ComputedRef<number | undefined>): void {\n  provide(FOOTER_LEVEL_KEY, level)\n}\n\nexport function useOptionalTableFooterLevel(): ComputedRef<number | undefined> | null {\n  return inject(FOOTER_LEVEL_KEY, null)\n}\n\nexport function provideTable(ctx: TableContext): void {\n  provide(KEY, ctx)\n}\n\nexport function useTableContext(): TableContext {\n  const ctx = inject(KEY, null)\n  if (!ctx)\n    throw new Error('[xh] Table 部件必须用在 XhTableRoot 内')\n  return ctx\n}\n\nexport function provideTableSection(section: TableSection): void {\n  provide(SECTION_KEY, section)\n}\n\n/** 取所在区段，无区段声明时按数据行处理。 */\nexport function useTableSection(): TableSection {\n  return inject(SECTION_KEY, 'body')\n}\n\nexport function provideTableRow(ctx: TableRowContext): void {\n  provide(ROW_KEY, ctx)\n}\n\nexport function useTableRowContext(): TableRowContext {\n  const ctx = inject(ROW_KEY, null)\n  if (!ctx)\n    throw new Error('[xh] Table 行内部件必须用在 XhTableRow 或 XhTableExpandedRow 内')\n  return ctx\n}\n\n/** 注入行上下文，表头与脚注单元格不在行内时返回 null。 */\nexport function useOptionalTableRowContext(): TableRowContext | null {\n  return inject(ROW_KEY, null)\n}\n\nexport function provideTableColumn(ctx: TableColumnContext): void {\n  provide(COLUMN_KEY, ctx)\n}\n\nexport function useTableColumnContext(): TableColumnContext {\n  const ctx = inject(COLUMN_KEY, null)\n  if (!ctx)\n    throw new Error('[xh] Table 排序把手必须用在 XhTableColumnHeader 内')\n  return ctx\n}\n\n/** 注入列上下文，列设置区中的操作按钮不在列标题内时返回 null，列身份改由自己的 value 声明。 */\nexport function useOptionalTableColumnContext(): TableColumnContext | null {\n  return inject(COLUMN_KEY, null)\n}\n"],"mappings":";;AAyBA,MAAM,MAAkC,OAAO,IAAI,UAAU;AAC7D,MAAM,cAA0C,OAAO,IAAI,kBAAkB;AAC7E,MAAM,UAAyC,OAAO,IAAI,cAAc;AACxE,MAAM,aAA+C,OAAO,IAAI,iBAAiB;AACjF,MAAM,mBAAkE,OAAO,IAAI,uBAAuB;AAC1G,MAAM,mBAAkE,OAAO,IAAI,uBAAuB;;AAG1G,SAAgB,wBAAwB,OAA8C;CACpF,QAAQ,kBAAkB,KAAK;AACjC;AAEA,SAAgB,8BAAsE;CACpF,OAAO,OAAO,kBAAkB,IAAI;AACtC;;AAGA,SAAgB,wBAAwB,OAA8C;CACpF,QAAQ,kBAAkB,KAAK;AACjC;AAEA,SAAgB,8BAAsE;CACpF,OAAO,OAAO,kBAAkB,IAAI;AACtC;AAEA,SAAgB,aAAa,KAAyB;CACpD,QAAQ,KAAK,GAAG;AAClB;AAEA,SAAgB,kBAAgC;CAC9C,MAAM,MAAM,OAAO,KAAK,IAAI;CAC5B,IAAI,CAAC,KACH,MAAM,IAAI,MAAM,iCAAiC;CACnD,OAAO;AACT;AAEA,SAAgB,oBAAoB,SAA6B;CAC/D,QAAQ,aAAa,OAAO;AAC9B;;AAGA,SAAgB,kBAAgC;CAC9C,OAAO,OAAO,aAAa,MAAM;AACnC;AAEA,SAAgB,gBAAgB,KAA4B;CAC1D,QAAQ,SAAS,GAAG;AACtB;AAEA,SAAgB,qBAAsC;CACpD,MAAM,MAAM,OAAO,SAAS,IAAI;CAChC,IAAI,CAAC,KACH,MAAM,IAAI,MAAM,uDAAuD;CACzE,OAAO;AACT;;AAGA,SAAgB,6BAAqD;CACnE,OAAO,OAAO,SAAS,IAAI;AAC7B;AAEA,SAAgB,mBAAmB,KAA+B;CAChE,QAAQ,YAAY,GAAG;AACzB;AAEA,SAAgB,wBAA4C;CAC1D,MAAM,MAAM,OAAO,YAAY,IAAI;CACnC,IAAI,CAAC,KACH,MAAM,IAAI,MAAM,2CAA2C;CAC7D,OAAO;AACT;;AAGA,SAAgB,gCAA2D;CACzE,OAAO,OAAO,YAAY,IAAI;AAChC"}