@xihan-ui/vue 3.0.0 → 3.2.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +148 -0
- package/README.md +1 -1
- package/dist/components/carousel/carousel.d.ts +7 -1
- package/dist/components/carousel/carousel.d.ts.map +1 -1
- package/dist/components/carousel/carousel.js +1 -0
- package/dist/components/carousel/carousel.js.map +1 -1
- package/dist/components/cartesian-chart/cartesian-chart.d.ts.map +1 -1
- package/dist/components/cartesian-chart/cartesian-chart.js +2 -2
- package/dist/components/cartesian-chart/cartesian-chart.js.map +1 -1
- package/dist/components/cascader/cascader.d.ts +2 -0
- package/dist/components/cascader/cascader.d.ts.map +1 -1
- package/dist/components/cascader/cascader.js +5 -2
- package/dist/components/cascader/cascader.js.map +1 -1
- package/dist/components/checkbox-group/checkbox-group.d.ts.map +1 -1
- package/dist/components/checkbox-group/checkbox-group.js +30 -11
- package/dist/components/checkbox-group/checkbox-group.js.map +1 -1
- package/dist/components/checkbox-group/use-checkbox-group.d.ts +6 -1
- package/dist/components/checkbox-group/use-checkbox-group.d.ts.map +1 -1
- package/dist/components/checkbox-group/use-checkbox-group.js +7 -3
- package/dist/components/checkbox-group/use-checkbox-group.js.map +1 -1
- package/dist/components/citation/citation.d.ts.map +1 -1
- package/dist/components/citation/citation.js +8 -6
- package/dist/components/citation/citation.js.map +1 -1
- package/dist/components/color-field/color-field.d.ts +2 -0
- package/dist/components/color-field/color-field.d.ts.map +1 -1
- package/dist/components/color-field/color-field.js +3 -1
- package/dist/components/color-field/color-field.js.map +1 -1
- package/dist/components/color-picker/color-picker.d.ts +76 -9
- package/dist/components/color-picker/color-picker.d.ts.map +1 -1
- package/dist/components/color-picker/color-picker.js +89 -7
- package/dist/components/color-picker/color-picker.js.map +1 -1
- package/dist/components/color-picker/context.js +10 -1
- package/dist/components/color-picker/context.js.map +1 -1
- package/dist/components/color-picker/use-color-picker.js +14 -4
- package/dist/components/color-picker/use-color-picker.js.map +1 -1
- package/dist/components/color-swatch-picker/color-swatch-picker.d.ts.map +1 -1
- package/dist/components/color-swatch-picker/color-swatch-picker.js +21 -4
- package/dist/components/color-swatch-picker/color-swatch-picker.js.map +1 -1
- package/dist/components/color-swatch-picker/use-color-swatch-picker.d.ts +6 -1
- package/dist/components/color-swatch-picker/use-color-swatch-picker.d.ts.map +1 -1
- package/dist/components/color-swatch-picker/use-color-swatch-picker.js +7 -3
- package/dist/components/color-swatch-picker/use-color-swatch-picker.js.map +1 -1
- package/dist/components/combobox/combobox.d.ts +2 -0
- package/dist/components/combobox/combobox.d.ts.map +1 -1
- package/dist/components/combobox/combobox.js +6 -4
- package/dist/components/combobox/combobox.js.map +1 -1
- package/dist/components/command/command.d.ts +3 -3
- package/dist/components/context-menu/context-menu.d.ts +9 -1
- package/dist/components/context-menu/context-menu.d.ts.map +1 -1
- package/dist/components/context-menu/context-menu.js +11 -1
- package/dist/components/context-menu/context-menu.js.map +1 -1
- package/dist/components/date-field/date-field.d.ts +6 -2
- package/dist/components/date-field/date-field.d.ts.map +1 -1
- package/dist/components/date-field/date-field.js +5 -2
- package/dist/components/date-field/date-field.js.map +1 -1
- package/dist/components/date-picker/context.js +10 -1
- package/dist/components/date-picker/context.js.map +1 -1
- package/dist/components/date-picker/date-picker.d.ts +58 -3
- package/dist/components/date-picker/date-picker.d.ts.map +1 -1
- package/dist/components/date-picker/date-picker.js +77 -5
- package/dist/components/date-picker/date-picker.js.map +1 -1
- package/dist/components/date-range-picker/date-range-picker.d.ts +27 -1
- package/dist/components/date-range-picker/date-range-picker.d.ts.map +1 -1
- package/dist/components/date-range-picker/date-range-picker.js +10 -1
- package/dist/components/date-range-picker/date-range-picker.js.map +1 -1
- package/dist/components/dialog/dialog.d.ts +12 -1
- package/dist/components/dialog/dialog.d.ts.map +1 -1
- package/dist/components/dialog/dialog.js +14 -4
- package/dist/components/dialog/dialog.js.map +1 -1
- package/dist/components/drawer/drawer.d.ts +12 -1
- package/dist/components/drawer/drawer.d.ts.map +1 -1
- package/dist/components/drawer/drawer.js +14 -4
- package/dist/components/drawer/drawer.js.map +1 -1
- package/dist/components/field/context.d.ts +6 -1
- package/dist/components/field/context.d.ts.map +1 -1
- package/dist/components/field/context.js +10 -1
- package/dist/components/field/context.js.map +1 -1
- package/dist/components/field/field.d.ts +9 -1
- package/dist/components/field/field.d.ts.map +1 -1
- package/dist/components/field/field.js +14 -2
- package/dist/components/field/field.js.map +1 -1
- package/dist/components/field/use-field-control.d.ts +8 -1
- package/dist/components/field/use-field-control.d.ts.map +1 -1
- package/dist/components/field/use-field-control.js +14 -1
- package/dist/components/field/use-field-control.js.map +1 -1
- package/dist/components/file-upload/file-upload.d.ts +2 -0
- package/dist/components/file-upload/file-upload.d.ts.map +1 -1
- package/dist/components/file-upload/file-upload.js +3 -1
- package/dist/components/file-upload/file-upload.js.map +1 -1
- package/dist/components/float-button/float-button.d.ts +26 -1
- package/dist/components/float-button/float-button.d.ts.map +1 -1
- package/dist/components/float-button/float-button.js +17 -5
- package/dist/components/float-button/float-button.js.map +1 -1
- package/dist/components/float-button/use-float-button.js +7 -1
- package/dist/components/float-button/use-float-button.js.map +1 -1
- package/dist/components/floating-panel/floating-panel.d.ts +2 -2
- package/dist/components/floating-panel/floating-panel.js +4 -1
- package/dist/components/floating-panel/floating-panel.js.map +1 -1
- package/dist/components/form/context.js +5 -1
- package/dist/components/form/context.js.map +1 -1
- package/dist/components/form/form.d.ts +8 -0
- package/dist/components/form/form.d.ts.map +1 -1
- package/dist/components/form/form.js +4 -1
- package/dist/components/form/form.js.map +1 -1
- package/dist/components/form/use-form-control.js +1 -1
- package/dist/components/funnel-chart/funnel-chart.d.ts.map +1 -1
- package/dist/components/funnel-chart/funnel-chart.js +2 -2
- package/dist/components/funnel-chart/funnel-chart.js.map +1 -1
- package/dist/components/graph-chart/graph-chart.d.ts.map +1 -1
- package/dist/components/graph-chart/graph-chart.js +2 -2
- package/dist/components/graph-chart/graph-chart.js.map +1 -1
- package/dist/components/hierarchy-chart/hierarchy-chart.d.ts.map +1 -1
- package/dist/components/hierarchy-chart/hierarchy-chart.js +2 -2
- package/dist/components/hierarchy-chart/hierarchy-chart.js.map +1 -1
- package/dist/components/hover-card/hover-card.js +2 -1
- package/dist/components/hover-card/hover-card.js.map +1 -1
- package/dist/components/image-viewer/image-viewer.d.ts +7 -1
- package/dist/components/image-viewer/image-viewer.d.ts.map +1 -1
- package/dist/components/image-viewer/image-viewer.js +1 -0
- package/dist/components/image-viewer/image-viewer.js.map +1 -1
- package/dist/components/mention/mention.d.ts +1 -1
- package/dist/components/mention/mention.js +5 -4
- package/dist/components/mention/mention.js.map +1 -1
- package/dist/components/menu/menu.js +31 -2
- package/dist/components/menu/menu.js.map +1 -1
- package/dist/components/menubar/context.d.ts.map +1 -1
- package/dist/components/menubar/context.js.map +1 -1
- package/dist/components/menubar/menubar.d.ts +9 -1
- package/dist/components/menubar/menubar.d.ts.map +1 -1
- package/dist/components/menubar/menubar.js +29 -2
- package/dist/components/menubar/menubar.js.map +1 -1
- package/dist/components/pagination/pagination.js +4 -2
- package/dist/components/pagination/pagination.js.map +1 -1
- package/dist/components/pie-chart/pie-chart.d.ts.map +1 -1
- package/dist/components/pie-chart/pie-chart.js +2 -2
- package/dist/components/pie-chart/pie-chart.js.map +1 -1
- package/dist/components/pin-input/pin-input.d.ts.map +1 -1
- package/dist/components/pin-input/pin-input.js +7 -1
- package/dist/components/pin-input/pin-input.js.map +1 -1
- package/dist/components/popconfirm/popconfirm.d.ts +20 -1
- package/dist/components/popconfirm/popconfirm.d.ts.map +1 -1
- package/dist/components/popconfirm/popconfirm.js +9 -1
- package/dist/components/popconfirm/popconfirm.js.map +1 -1
- package/dist/components/popconfirm/use-popconfirm.js +2 -0
- package/dist/components/popconfirm/use-popconfirm.js.map +1 -1
- package/dist/components/popover/popover.d.ts +1 -1
- package/dist/components/popover/popover.js +2 -1
- package/dist/components/popover/popover.js.map +1 -1
- package/dist/components/radar-chart/radar-chart.d.ts.map +1 -1
- package/dist/components/radar-chart/radar-chart.js +2 -2
- package/dist/components/radar-chart/radar-chart.js.map +1 -1
- package/dist/components/radio-group/radio-group.d.ts.map +1 -1
- package/dist/components/radio-group/radio-group.js +25 -6
- package/dist/components/radio-group/radio-group.js.map +1 -1
- package/dist/components/radio-group/use-radio-group.d.ts +5 -0
- package/dist/components/radio-group/use-radio-group.d.ts.map +1 -1
- package/dist/components/radio-group/use-radio-group.js +4 -1
- package/dist/components/radio-group/use-radio-group.js.map +1 -1
- package/dist/components/rating/rating.d.ts.map +1 -1
- package/dist/components/rating/rating.js +7 -1
- package/dist/components/rating/rating.js.map +1 -1
- package/dist/components/sankey-chart/sankey-chart.d.ts.map +1 -1
- package/dist/components/sankey-chart/sankey-chart.js +2 -2
- package/dist/components/sankey-chart/sankey-chart.js.map +1 -1
- package/dist/components/select/select.d.ts +13 -0
- package/dist/components/select/select.d.ts.map +1 -1
- package/dist/components/select/select.js +15 -4
- package/dist/components/select/select.js.map +1 -1
- package/dist/components/side-nav/side-nav.d.ts.map +1 -1
- package/dist/components/side-nav/side-nav.js +8 -2
- package/dist/components/side-nav/side-nav.js.map +1 -1
- package/dist/components/signature-pad/signature-pad.d.ts +2 -0
- package/dist/components/signature-pad/signature-pad.d.ts.map +1 -1
- package/dist/components/signature-pad/signature-pad.js +3 -1
- package/dist/components/signature-pad/signature-pad.js.map +1 -1
- package/dist/components/slider/slider.d.ts.map +1 -1
- package/dist/components/slider/slider.js +7 -1
- package/dist/components/slider/slider.js.map +1 -1
- package/dist/components/tags-input/tags-input.d.ts +2 -0
- package/dist/components/tags-input/tags-input.d.ts.map +1 -1
- package/dist/components/tags-input/tags-input.js +3 -1
- package/dist/components/tags-input/tags-input.js.map +1 -1
- package/dist/components/text-field/text-field.d.ts +2 -0
- package/dist/components/text-field/text-field.d.ts.map +1 -1
- package/dist/components/text-field/text-field.js +3 -1
- package/dist/components/text-field/text-field.js.map +1 -1
- package/dist/components/time-field/time-field.d.ts +2 -0
- package/dist/components/time-field/time-field.d.ts.map +1 -1
- package/dist/components/time-field/time-field.js +3 -1
- package/dist/components/time-field/time-field.js.map +1 -1
- package/dist/components/time-picker/context.js +10 -1
- package/dist/components/time-picker/context.js.map +1 -1
- package/dist/components/time-picker/time-picker.d.ts +78 -9
- package/dist/components/time-picker/time-picker.d.ts.map +1 -1
- package/dist/components/time-picker/time-picker.js +91 -9
- package/dist/components/time-picker/time-picker.js.map +1 -1
- package/dist/components/time-range-picker/time-range-picker.d.ts +2 -0
- package/dist/components/time-range-picker/time-range-picker.d.ts.map +1 -1
- package/dist/components/time-range-picker/time-range-picker.js +5 -2
- package/dist/components/time-range-picker/time-range-picker.js.map +1 -1
- package/dist/components/toggle-group/toggle-group.d.ts.map +1 -1
- package/dist/components/toggle-group/toggle-group.js +7 -1
- package/dist/components/toggle-group/toggle-group.js.map +1 -1
- package/dist/components/tooltip/tooltip.js +2 -1
- package/dist/components/tooltip/tooltip.js.map +1 -1
- package/dist/components/tour/tour.js +12 -3
- package/dist/components/tour/tour.js.map +1 -1
- package/dist/components/tree/tree.d.ts +2 -2
- package/dist/components/tree/tree.js +1 -1
- package/dist/components/tree/tree.js.map +1 -1
- package/dist/components/tree-select/tree-select.d.ts +2 -0
- package/dist/components/tree-select/tree-select.d.ts.map +1 -1
- package/dist/components/tree-select/tree-select.js +6 -4
- package/dist/components/tree-select/tree-select.js.map +1 -1
- package/dist/components/truncate/truncate.d.ts.map +1 -1
- package/dist/components/truncate/truncate.js +4 -8
- package/dist/components/truncate/truncate.js.map +1 -1
- package/dist/index.d.ts +7 -7
- package/dist/index.js +8 -8
- package/dist/locale.d.ts +2 -0
- package/dist/locale.js +2 -0
- package/dist/package.js +1 -1
- package/dist/runtime/as-child.js +7 -2
- package/dist/runtime/as-child.js.map +1 -1
- package/dist/runtime/portal.js +13 -1
- package/dist/runtime/portal.js.map +1 -1
- package/dist/runtime/use-overlay-exit.js +6 -1
- package/dist/runtime/use-overlay-exit.js.map +1 -1
- package/dist/runtime/with-handlers.js +25 -0
- package/dist/runtime/with-handlers.js.map +1 -0
- package/dist/services/dialog-service.d.ts +3 -3
- package/dist/services/dialog-service.d.ts.map +1 -1
- package/dist/services/dialog-service.js +8 -6
- package/dist/services/dialog-service.js.map +1 -1
- package/dist/services/service-config.js +2 -1
- package/dist/services/service-config.js.map +1 -1
- package/package.json +19 -15
|
@@ -1,8 +1,9 @@
|
|
|
1
1
|
import { withXhConfig } from "../../config/config.js";
|
|
2
2
|
import { useFormControlProps } from "../form/use-form-control.js";
|
|
3
|
+
import { useFieldGroupWiring, useFieldLabelWiring } from "../field/use-field-control.js";
|
|
3
4
|
import { provideColorSwatchPicker, useColorSwatchPickerContext } from "./context.js";
|
|
4
5
|
import { useColorSwatchPicker } from "./use-color-swatch-picker.js";
|
|
5
|
-
import { computed, defineComponent, h, onBeforeUnmount, ref, watch } from "vue";
|
|
6
|
+
import { computed, defineComponent, h, onBeforeUnmount, onMounted, ref, watch } from "vue";
|
|
6
7
|
//#region src/components/color-swatch-picker/color-swatch-picker.ts
|
|
7
8
|
const XhColorSwatchPickerRoot = defineComponent({
|
|
8
9
|
name: "XhColorSwatchPickerRoot",
|
|
@@ -47,15 +48,21 @@ const XhColorSwatchPickerRoot = defineComponent({
|
|
|
47
48
|
};
|
|
48
49
|
const ctx = useColorSwatchPicker(withXhConfig("color-swatch-picker", useFormControlProps(props)), notify);
|
|
49
50
|
provideColorSwatchPicker(ctx);
|
|
51
|
+
const fieldWiring = useFieldGroupWiring();
|
|
52
|
+
const fieldLabel = useFieldLabelWiring();
|
|
50
53
|
return () => {
|
|
51
54
|
const api = ctx.api.value;
|
|
52
|
-
|
|
55
|
+
const title = slots.label?.() ?? (props.label != null ? [props.label] : null);
|
|
56
|
+
return h("div", fieldLabel.value({
|
|
57
|
+
...fieldWiring.value,
|
|
58
|
+
...api.getRootProps()
|
|
59
|
+
}), slots.default ? [...renderLabel(title), ...slots.default({
|
|
53
60
|
value: api.value,
|
|
54
61
|
swatches: api.swatches,
|
|
55
62
|
focusedValue: api.focusedValue,
|
|
56
63
|
isSelected: api.isSelected,
|
|
57
64
|
setValue: api.setValue
|
|
58
|
-
}) : props.swatches ? renderDefaultTree(api.swatches,
|
|
65
|
+
})] : props.swatches ? renderDefaultTree(api.swatches, title) : renderLabel(title));
|
|
59
66
|
};
|
|
60
67
|
}
|
|
61
68
|
});
|
|
@@ -63,6 +70,12 @@ const XhColorSwatchPickerLabel = defineComponent({
|
|
|
63
70
|
name: "XhColorSwatchPickerLabel",
|
|
64
71
|
setup(_, { slots }) {
|
|
65
72
|
const ctx = useColorSwatchPickerContext();
|
|
73
|
+
onMounted(() => {
|
|
74
|
+
ctx.labelCount.value++;
|
|
75
|
+
});
|
|
76
|
+
onBeforeUnmount(() => {
|
|
77
|
+
ctx.labelCount.value--;
|
|
78
|
+
});
|
|
66
79
|
return () => h("span", ctx.api.value.getLabelProps(), slots.default?.());
|
|
67
80
|
}
|
|
68
81
|
});
|
|
@@ -119,11 +132,15 @@ const XhColorSwatchPickerItem = defineComponent({
|
|
|
119
132
|
* 与手写部件产出的 DOM 完全一致,需要修改结构时写默认插槽,行为不变。
|
|
120
133
|
*/
|
|
121
134
|
function renderDefaultTree(swatches, label) {
|
|
122
|
-
return [...
|
|
135
|
+
return [...renderLabel(label), ...swatches.map((node) => h(XhColorSwatchPickerItem, {
|
|
123
136
|
key: node.value,
|
|
124
137
|
value: node.value
|
|
125
138
|
}))];
|
|
126
139
|
}
|
|
140
|
+
/** 组标题:给了文字或 label 插槽才铺 label 部件。 */
|
|
141
|
+
function renderLabel(title) {
|
|
142
|
+
return title ? [h(XhColorSwatchPickerLabel, null, () => title)] : [];
|
|
143
|
+
}
|
|
127
144
|
//#endregion
|
|
128
145
|
export { XhColorSwatchPickerItem, XhColorSwatchPickerLabel, XhColorSwatchPickerRoot };
|
|
129
146
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"color-swatch-picker.js","names":[],"sources":["../../../src/components/color-swatch-picker/color-swatch-picker.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// 提供 color swatch picker 相关实现。\n\nimport type { Direction, Size, Tone } from '@xihan-ui/core'\nimport type { ColorSwatchPickerApi, ColorSwatchPickerItemProps, ColorSwatchPickerNode, ColorSwatchPickerNodeMeta, ColorSwatchPickerSchema } from '@xihan-ui/headless'\nimport type { PropType, SlotsType, VNode } from 'vue'\nimport type { PayloadOf } from '../../runtime/payload'\nimport { computed, defineComponent, h, onBeforeUnmount, ref, watch } from 'vue'\nimport { withXhConfig } from '../../config/config'\nimport { useFormControlProps } from '../form/use-form-control'\nimport { provideColorSwatchPicker, useColorSwatchPickerContext } from './context'\nimport { useColorSwatchPicker } from './use-color-swatch-picker'\n\ntype ColorSwatchPickerProps = ColorSwatchPickerSchema['props']\n\nexport type ColorSwatchPickerRootSlotProps = Pick<\n ColorSwatchPickerApi,\n 'value' | 'swatches' | 'focusedValue' | 'isSelected' | 'setValue'\n>\n\nexport const XhColorSwatchPickerRoot = defineComponent({\n name: 'XhColorSwatchPickerRoot',\n props: {\n /** 格子数据;未写默认插槽时按它自动铺开。 */\n swatches: { type: Array as PropType<ColorSwatchPickerNode[]> },\n /** 标题文字。提供后不必再写 label 部件;需要放置其他内容时改用 label 插槽。 */\n label: { type: String },\n value: { type: String as PropType<string | null> },\n defaultValue: { type: String as PropType<string | null> },\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 dir: { type: String as PropType<Direction> },\n name: { type: String },\n size: { type: String as PropType<Size> },\n tone: { type: String as PropType<Tone> },\n translations: { type: Object as PropType<ColorSwatchPickerProps['translations']> },\n },\n // value-change 携带 { value },update:value 携带裸值\n emits: {\n 'value-change': (_details: PayloadOf<ColorSwatchPickerProps, 'onValueChange'>) => true,\n 'update:value': (_value: PayloadOf<ColorSwatchPickerProps, 'onValueChange'>['value']) => true,\n },\n slots: Object as SlotsType<{\n default?: (props: ColorSwatchPickerRootSlotProps) => VNode[]\n label?: () => VNode[]\n }>,\n setup(props, { slots, emit }) {\n const notify: ColorSwatchPickerProps['onValueChange'] = (details) => {\n emit('value-change', details)\n emit('update:value', details.value)\n }\n // withXhConfig 只能在 setup 期调,机器在运行期读这份代理\n const ctx = useColorSwatchPicker(withXhConfig('color-swatch-picker', useFormControlProps(props)) as ColorSwatchPickerProps, notify)\n provideColorSwatchPicker(ctx)\n return () => {\n const api = ctx.api.value\n return h(\n 'div',\n api.getRootProps() as Record<string, unknown
|
|
1
|
+
{"version":3,"file":"color-swatch-picker.js","names":[],"sources":["../../../src/components/color-swatch-picker/color-swatch-picker.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// 提供 color swatch picker 相关实现。\n\nimport type { Direction, Size, Tone } from '@xihan-ui/core'\nimport type { ColorSwatchPickerApi, ColorSwatchPickerItemProps, ColorSwatchPickerNode, ColorSwatchPickerNodeMeta, ColorSwatchPickerSchema } from '@xihan-ui/headless'\nimport type { PropType, SlotsType, VNode } from 'vue'\nimport type { PayloadOf } from '../../runtime/payload'\nimport { computed, defineComponent, h, onBeforeUnmount, onMounted, ref, watch } from 'vue'\nimport { withXhConfig } from '../../config/config'\nimport { useFieldGroupWiring, useFieldLabelWiring } from '../field/use-field-control'\nimport { useFormControlProps } from '../form/use-form-control'\nimport { provideColorSwatchPicker, useColorSwatchPickerContext } from './context'\nimport { useColorSwatchPicker } from './use-color-swatch-picker'\n\ntype ColorSwatchPickerProps = ColorSwatchPickerSchema['props']\n\nexport type ColorSwatchPickerRootSlotProps = Pick<\n ColorSwatchPickerApi,\n 'value' | 'swatches' | 'focusedValue' | 'isSelected' | 'setValue'\n>\n\nexport const XhColorSwatchPickerRoot = defineComponent({\n name: 'XhColorSwatchPickerRoot',\n props: {\n /** 格子数据;未写默认插槽时按它自动铺开。 */\n swatches: { type: Array as PropType<ColorSwatchPickerNode[]> },\n /** 标题文字。提供后不必再写 label 部件;需要放置其他内容时改用 label 插槽。 */\n label: { type: String },\n value: { type: String as PropType<string | null> },\n defaultValue: { type: String as PropType<string | null> },\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 dir: { type: String as PropType<Direction> },\n name: { type: String },\n size: { type: String as PropType<Size> },\n tone: { type: String as PropType<Tone> },\n translations: { type: Object as PropType<ColorSwatchPickerProps['translations']> },\n },\n // value-change 携带 { value },update:value 携带裸值\n emits: {\n 'value-change': (_details: PayloadOf<ColorSwatchPickerProps, 'onValueChange'>) => true,\n 'update:value': (_value: PayloadOf<ColorSwatchPickerProps, 'onValueChange'>['value']) => true,\n },\n slots: Object as SlotsType<{\n default?: (props: ColorSwatchPickerRootSlotProps) => VNode[]\n label?: () => VNode[]\n }>,\n setup(props, { slots, emit }) {\n const notify: ColorSwatchPickerProps['onValueChange'] = (details) => {\n emit('value-change', details)\n emit('update:value', details.value)\n }\n // withXhConfig 只能在 setup 期调,机器在运行期读这份代理\n const ctx = useColorSwatchPicker(withXhConfig('color-swatch-picker', useFormControlProps(props)) as ColorSwatchPickerProps, notify)\n provideColorSwatchPicker(ctx)\n // 放进表单字段时,字段的标题与说明接到组上:读屏进组时念组名与说明\n const fieldWiring = useFieldGroupWiring()\n const fieldLabel = useFieldLabelWiring()\n return () => {\n const api = ctx.api.value\n // 标题文字不论手写格子还是数据驱动都由根铺出:手写格子时不必再写 label 部件\n const title = slots.label?.() ?? (props.label != null ? [props.label] : null)\n return h(\n 'div',\n fieldLabel.value({ ...fieldWiring.value, ...api.getRootProps() as Record<string, unknown> }),\n slots.default\n ? [...renderLabel(title), ...slots.default({\n value: api.value,\n swatches: api.swatches,\n focusedValue: api.focusedValue,\n isSelected: api.isSelected,\n setValue: api.setValue,\n })]\n : props.swatches\n ? renderDefaultTree(api.swatches, title)\n : renderLabel(title),\n )\n }\n },\n})\n\nexport const XhColorSwatchPickerLabel = defineComponent({\n name: 'XhColorSwatchPickerLabel',\n setup(_, { slots }) {\n const ctx = useColorSwatchPickerContext()\n // 渲出来了才登记:根的 aria-labelledby 只在这个节点真在场时才指过来\n onMounted(() => {\n ctx.labelCount.value++\n })\n onBeforeUnmount(() => {\n ctx.labelCount.value--\n })\n return () => h('span', ctx.api.value.getLabelProps() as Record<string, unknown>, slots.default?.())\n },\n})\n\n/** 一格:色块面、选中标记与表单影子由格子自行装配,不暴露成独立组件。 */\nexport const XhColorSwatchPickerItem = defineComponent({\n name: 'XhColorSwatchPickerItem',\n props: {\n value: { type: String, required: true },\n /** 读屏朗读该格子的方式;默认交给 connect 查询 swatches,都没有时朗读颜色串。 */\n label: { type: String },\n // 缺省交给 connect 回 swatches 里查,写死 false 会盖掉数据里的禁用\n disabled: { type: Boolean, default: undefined },\n },\n setup(props, { slots }) {\n const ctx = useColorSwatchPickerContext()\n const item = computed<ColorSwatchPickerItemProps>(() => ({ value: props.value, label: props.label, disabled: props.disabled }))\n // 本格持有焦点时,value 变更重报焦点格,卸载时上报整组失焦\n const itemEl = ref<HTMLElement | null>(null)\n watch(() => props.value, (next, prev) => {\n if (next === prev)\n return\n const svc = ctx.service\n if (svc.getStatus() !== 'Started')\n return\n if (itemEl.value && svc.scope.getActiveElement() === itemEl.value)\n svc.send({ type: 'ITEM.FOCUS', value: next })\n })\n onBeforeUnmount(() => {\n const { service } = ctx\n if (service.getStatus() !== 'Started')\n return\n // 按「本节点当下正持有焦点」判定,不按 value 比对\n if (itemEl.value && service.scope.getActiveElement() === itemEl.value)\n service.send({ type: 'GROUP.BLUR' })\n })\n return () => h('div', { ...ctx.api.value.getItemProps(item.value) as Record<string, unknown>, ref: itemEl }, [\n h('input', ctx.api.value.getHiddenInputProps(item.value) as Record<string, unknown>),\n h('span', ctx.api.value.getSwatchProps(item.value) as Record<string, unknown>),\n h('span', ctx.api.value.getIndicatorProps(item.value) as Record<string, unknown>),\n ...(slots.default?.() ?? []),\n ])\n },\n})\n\n/**\n * 未写默认插槽时按 swatches 铺开的整套结构,作者只提供数据。\n * 与手写部件产出的 DOM 完全一致,需要修改结构时写默认插槽,行为不变。\n */\nfunction renderDefaultTree(\n swatches: readonly ColorSwatchPickerNodeMeta[],\n label: (VNode | string)[] | null,\n): VNode[] {\n return [\n ...renderLabel(label),\n ...swatches.map(node => h(XhColorSwatchPickerItem, { key: node.value, value: node.value })),\n ]\n}\n\n/** 组标题:给了文字或 label 插槽才铺 label 部件。 */\nfunction renderLabel(title: (VNode | string)[] | null): VNode[] {\n return title ? [h(XhColorSwatchPickerLabel, null, () => title)] : []\n}\n"],"mappings":"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"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { ComputedRef } from "vue";
|
|
1
|
+
import { ComputedRef, Ref } from "vue";
|
|
2
2
|
import { Service } from "@xihan-ui/core";
|
|
3
3
|
import { ColorSwatchPickerApi, ColorSwatchPickerSchema } from "@xihan-ui/headless";
|
|
4
4
|
//#region src/components/color-swatch-picker/use-color-swatch-picker.d.ts
|
|
@@ -6,6 +6,11 @@ interface ColorSwatchPickerContext {
|
|
|
6
6
|
api: ComputedRef<ColorSwatchPickerApi>;
|
|
7
7
|
/** 状态机实例,供部件上报 DOM 侧的事实(如格子卸载带走了焦点)。 */
|
|
8
8
|
service: Service<ColorSwatchPickerSchema>;
|
|
9
|
+
/**
|
|
10
|
+
* 已挂载的 label 部件数量,由 XhColorSwatchPickerLabel 自行登记。
|
|
11
|
+
* 根的 aria-labelledby 据此决定输不输出:只看 label 属性有没有值不够,手写格子时标题可能根本没渲染。
|
|
12
|
+
*/
|
|
13
|
+
labelCount: Ref<number>;
|
|
9
14
|
}
|
|
10
15
|
declare function useColorSwatchPicker(props: ColorSwatchPickerSchema['props'], onValueChange?: ColorSwatchPickerSchema['props']['onValueChange']): ColorSwatchPickerContext;
|
|
11
16
|
//#endregion
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"use-color-swatch-picker.d.ts","names":[],"sources":["../../../src/components/color-swatch-picker/use-color-swatch-picker.ts"],"mappings":";;;;UAiBiB;EACf,KAAK,YAAY;;EAEjB,SAAS,QAAQ;;
|
|
1
|
+
{"version":3,"file":"use-color-swatch-picker.d.ts","names":[],"sources":["../../../src/components/color-swatch-picker/use-color-swatch-picker.ts"],"mappings":";;;;UAiBiB;EACf,KAAK,YAAY;;EAEjB,SAAS,QAAQ;;;;;EAKjB,YAAY;;iBAGE,qBACd,OAAO,kCACP,gBAAgB,oDACf"}
|
|
@@ -1,18 +1,22 @@
|
|
|
1
1
|
import { vueNormalize } from "../../runtime/normalize-props.js";
|
|
2
2
|
import { useMachine } from "../../runtime/use-machine.js";
|
|
3
3
|
import { createVueIdGenerator } from "../../runtime/vue-id.js";
|
|
4
|
-
import { computed } from "vue";
|
|
4
|
+
import { computed, ref } from "vue";
|
|
5
5
|
import { createScope } from "@xihan-ui/core";
|
|
6
6
|
import { colorSwatchPickerMachine, connectColorSwatchPicker } from "@xihan-ui/headless";
|
|
7
7
|
//#region src/components/color-swatch-picker/use-color-swatch-picker.ts
|
|
8
8
|
function useColorSwatchPicker(props, onValueChange) {
|
|
9
|
+
const scope = createScope(null, createVueIdGenerator());
|
|
10
|
+
const labelCount = ref(0);
|
|
9
11
|
const service = useMachine(colorSwatchPickerMachine, () => ({
|
|
10
12
|
...props,
|
|
13
|
+
labelled: labelCount.value > 0,
|
|
11
14
|
onValueChange
|
|
12
|
-
}),
|
|
15
|
+
}), scope);
|
|
13
16
|
return {
|
|
14
17
|
api: computed(() => connectColorSwatchPicker(service, vueNormalize)),
|
|
15
|
-
service
|
|
18
|
+
service,
|
|
19
|
+
labelCount
|
|
16
20
|
};
|
|
17
21
|
}
|
|
18
22
|
//#endregion
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"use-color-swatch-picker.js","names":[],"sources":["../../../src/components/color-swatch-picker/use-color-swatch-picker.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 color swatch picker 相关实现。\n\nimport type { Service } from '@xihan-ui/core'\nimport type { ColorSwatchPickerApi, ColorSwatchPickerSchema } from '@xihan-ui/headless'\nimport type { ComputedRef } from 'vue'\nimport { createScope } from '@xihan-ui/core'\nimport { colorSwatchPickerMachine, connectColorSwatchPicker } from '@xihan-ui/headless'\nimport { computed } from 'vue'\nimport { vueNormalize } from '../../runtime/normalize-props'\nimport { useMachine } from '../../runtime/use-machine'\nimport { createVueIdGenerator } from '../../runtime/vue-id'\n\nexport interface ColorSwatchPickerContext {\n api: ComputedRef<ColorSwatchPickerApi>\n /** 状态机实例,供部件上报 DOM 侧的事实(如格子卸载带走了焦点)。 */\n service: Service<ColorSwatchPickerSchema>\n}\n\nexport function useColorSwatchPicker(\n props: ColorSwatchPickerSchema['props'],\n onValueChange?: ColorSwatchPickerSchema['props']['onValueChange'],\n): ColorSwatchPickerContext {\n const idGen = createVueIdGenerator()\n const scope = createScope(null, idGen)\n const service = useMachine(colorSwatchPickerMachine, () => ({ ...props, onValueChange }), scope)\n const api = computed(() => connectColorSwatchPicker(service, vueNormalize))\n return { api, service }\n}\n"],"mappings":";;;;;;;
|
|
1
|
+
{"version":3,"file":"use-color-swatch-picker.js","names":[],"sources":["../../../src/components/color-swatch-picker/use-color-swatch-picker.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 color swatch picker 相关实现。\n\nimport type { Service } from '@xihan-ui/core'\nimport type { ColorSwatchPickerApi, ColorSwatchPickerSchema } from '@xihan-ui/headless'\nimport type { ComputedRef, Ref } from 'vue'\nimport { createScope } from '@xihan-ui/core'\nimport { colorSwatchPickerMachine, connectColorSwatchPicker } 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 ColorSwatchPickerContext {\n api: ComputedRef<ColorSwatchPickerApi>\n /** 状态机实例,供部件上报 DOM 侧的事实(如格子卸载带走了焦点)。 */\n service: Service<ColorSwatchPickerSchema>\n /**\n * 已挂载的 label 部件数量,由 XhColorSwatchPickerLabel 自行登记。\n * 根的 aria-labelledby 据此决定输不输出:只看 label 属性有没有值不够,手写格子时标题可能根本没渲染。\n */\n labelCount: Ref<number>\n}\n\nexport function useColorSwatchPicker(\n props: ColorSwatchPickerSchema['props'],\n onValueChange?: ColorSwatchPickerSchema['props']['onValueChange'],\n): ColorSwatchPickerContext {\n const idGen = createVueIdGenerator()\n const scope = createScope(null, idGen)\n const labelCount = ref(0)\n const service = useMachine(colorSwatchPickerMachine, () => ({ ...props, labelled: labelCount.value > 0, onValueChange }), scope)\n const api = computed(() => connectColorSwatchPicker(service, vueNormalize))\n return { api, service, labelCount }\n}\n"],"mappings":";;;;;;;AA4BA,SAAgB,qBACd,OACA,eAC0B;CAE1B,MAAM,QAAQ,YAAY,MADZ,qBACsB,CAAC;CACrC,MAAM,aAAa,IAAI,CAAC;CACxB,MAAM,UAAU,WAAW,iCAAiC;EAAE,GAAG;EAAO,UAAU,WAAW,QAAQ;EAAG;CAAc,IAAI,KAAK;CAE/H,OAAO;EAAE,KADG,eAAe,yBAAyB,SAAS,YAAY,CAC9D;EAAG;EAAS;CAAW;AACpC"}
|
|
@@ -102,6 +102,7 @@ declare const XhComboboxRoot: import("vue").DefineComponent<import("vue").Extrac
|
|
|
102
102
|
}>, () => VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
|
103
103
|
[key: string]: any;
|
|
104
104
|
}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
|
|
105
|
+
clear: () => true;
|
|
105
106
|
'value-change': (_details: PayloadOf<ComboboxProps, "onValueChange">) => true;
|
|
106
107
|
'input-value-change': (_details: PayloadOf<ComboboxProps, "onInputValueChange">) => true;
|
|
107
108
|
'open-change': (_details: PayloadOf<ComboboxProps, "onOpenChange">) => true;
|
|
@@ -204,6 +205,7 @@ declare const XhComboboxRoot: import("vue").DefineComponent<import("vue").Extrac
|
|
|
204
205
|
}>> & Readonly<{
|
|
205
206
|
"onValue-change"?: ((_details: import("@xihan-ui/headless").ComboboxValueChangeDetails) => any) | undefined;
|
|
206
207
|
"onUpdate:value"?: ((_value: string[]) => any) | undefined;
|
|
208
|
+
onClear?: (() => any) | undefined;
|
|
207
209
|
"onOpen-change"?: ((_details: import("@xihan-ui/headless").ComboboxOpenChangeDetails) => any) | undefined;
|
|
208
210
|
"onUpdate:open"?: ((_open: boolean) => any) | undefined;
|
|
209
211
|
"onInput-value-change"?: ((_details: import("@xihan-ui/headless").ComboboxInputValueChangeDetails) => any) | undefined;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"combobox.d.ts","names":[],"sources":["../../../src/components/combobox/combobox.ts"],"mappings":";;;;;
|
|
1
|
+
{"version":3,"file":"combobox.d.ts","names":[],"sources":["../../../src/components/combobox/combobox.ts"],"mappings":"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"}
|
|
@@ -2,6 +2,7 @@ import { withXhConfig } from "../../config/config.js";
|
|
|
2
2
|
import { XhPortal } from "../../runtime/portal.js";
|
|
3
3
|
import { slotIsPlainText } from "../../runtime/slot-content.js";
|
|
4
4
|
import { useScrollbars } from "../../runtime/use-scrollbars.js";
|
|
5
|
+
import { withHandlers } from "../../runtime/with-handlers.js";
|
|
5
6
|
import { useFormControlProps } from "../form/use-form-control.js";
|
|
6
7
|
import { useFieldLabelWiring, useFieldStateWiring } from "../field/use-field-control.js";
|
|
7
8
|
import { provideCombobox, provideComboboxItem, provideComboboxItemGroup, provideComboboxTag, useComboboxContext, useComboboxItemContext, useComboboxItemGroupContext, useComboboxTagContext } from "./context.js";
|
|
@@ -65,6 +66,7 @@ const XhComboboxRoot = defineComponent({
|
|
|
65
66
|
size: { type: String }
|
|
66
67
|
},
|
|
67
68
|
emits: {
|
|
69
|
+
"clear": () => true,
|
|
68
70
|
"value-change": (_details) => true,
|
|
69
71
|
"input-value-change": (_details) => true,
|
|
70
72
|
"open-change": (_details) => true,
|
|
@@ -86,7 +88,7 @@ const XhComboboxRoot = defineComponent({
|
|
|
86
88
|
emit("open-change", details);
|
|
87
89
|
emit("update:open", details.open);
|
|
88
90
|
};
|
|
89
|
-
const ctx = useCombobox(withXhConfig("combobox", useFormControlProps(props)), {
|
|
91
|
+
const ctx = useCombobox(withHandlers(withXhConfig("combobox", useFormControlProps(props)), { onClear: () => emit("clear") }), {
|
|
90
92
|
onValueChange: notifyValue,
|
|
91
93
|
onInputValueChange: notifyInputValue,
|
|
92
94
|
onOpenChange: notifyOpen
|
|
@@ -239,7 +241,8 @@ container: { type: Object } },
|
|
|
239
241
|
});
|
|
240
242
|
return () => h(XhPortal, {
|
|
241
243
|
to: props.container ?? ctx.portalTarget.value,
|
|
242
|
-
source: ctx.controlRef
|
|
244
|
+
source: ctx.controlRef,
|
|
245
|
+
present: ctx.visible.value
|
|
243
246
|
}, () => [h("div", {
|
|
244
247
|
...mergeProps(ctx.api.value.getPositionerProps(), attrs),
|
|
245
248
|
ref: (el) => {
|
|
@@ -356,8 +359,7 @@ const XhComboboxHiddenInput = defineComponent({
|
|
|
356
359
|
setup(_, { attrs }) {
|
|
357
360
|
const ctx = useComboboxContext();
|
|
358
361
|
return () => ctx.api.value.value.map((value) => h("input", {
|
|
359
|
-
...ctx.api.value.getHiddenInputProps({ value }),
|
|
360
|
-
...attrs,
|
|
362
|
+
...mergeProps(ctx.api.value.getHiddenInputProps({ value }), attrs),
|
|
361
363
|
key: value
|
|
362
364
|
}));
|
|
363
365
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"combobox.js","names":[],"sources":["../../../src/components/combobox/combobox.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// 提供 combobox 相关实现。\n\nimport type { ControlVariant, Direction, Placement, Size, Tone } from '@xihan-ui/core'\nimport type { CollectionVirtualizer, ComboboxApi, ComboboxGroupProps, ComboboxInputBehavior, ComboboxInputEl, ComboboxInputHost, ComboboxItemProps, ComboboxNode, ComboboxNodeMeta, ComboboxSchema, ComboboxTagMeta } from '@xihan-ui/headless'\nimport type { PropType, SlotsType, VNode } from 'vue'\nimport type { PayloadOf } from '../../runtime/payload'\nimport { computed, defineComponent, h, mergeProps, onMounted, onUnmounted, onUpdated, watch } from 'vue'\nimport { withXhConfig } from '../../config/config'\nimport { XhPortal } from '../../runtime/portal'\nimport { slotIsPlainText } from '../../runtime/slot-content'\nimport { useScrollbars } from '../../runtime/use-scrollbars'\nimport { useFieldLabelWiring, useFieldStateWiring } from '../field/use-field-control'\nimport { useFormControlProps } from '../form/use-form-control'\nimport {\n provideCombobox,\n provideComboboxItem,\n provideComboboxItemGroup,\n provideComboboxTag,\n useComboboxContext,\n useComboboxItemContext,\n useComboboxItemGroupContext,\n useComboboxTagContext,\n} from './context'\nimport { useCombobox } from './use-combobox'\n\ntype ComboboxProps = ComboboxSchema['props']\n\n/** 默认插槽的载荷:展开状态、选中值、输入串、高亮候选、空态、多选的可见标签与折起的个数,以及修改它们的命令。 */\nexport type ComboboxRootSlotProps = Pick<\n ComboboxApi,\n 'open' | 'value' | 'inputValue' | 'highlightedValue' | 'empty' | 'tags' | 'overflowCount' | 'overflowText' | 'isSelected' | 'setOpen' | 'setValue' | 'setInputValue' | 'clear' | 'deselect'\n>\n\nexport const XhComboboxRoot = defineComponent({\n name: 'XhComboboxRoot',\n // 有 connect 兜底的 prop:普通类型省略 default,Boolean 显式保留 undefined\n props: {\n collection: { type: Array as PropType<ComboboxNode[]> },\n virtualizer: { type: Object as PropType<CollectionVirtualizer> },\n /** 标题文字。提供后不必再写 label 部件;需要放置其他内容时改用 label 插槽。 */\n label: { type: String },\n /** 无匹配时的提示语。提供后不必再写 empty 部件;需要放置其他内容时改用 empty 插槽。 */\n empty: { type: String },\n value: { type: [String, Array] as PropType<string | string[]> },\n defaultValue: { type: [String, Array] as PropType<string | string[]> },\n inputValue: { type: String },\n defaultInputValue: { type: String },\n open: { type: Boolean, default: undefined },\n defaultOpen: Boolean,\n /** 表单字段名;提供后 hidden-input 才带 name 并参与提交 */\n name: { type: String },\n form: { type: String },\n multiple: Boolean,\n /** 多选标签最多显示的数量,其余折进 +N;默认 3。 */\n maxTagCount: { type: Number },\n disabled: { type: Boolean, default: undefined },\n readOnly: { type: Boolean, default: undefined },\n invalid: { type: Boolean, default: undefined },\n loading: Boolean,\n loop: { type: Boolean, default: undefined },\n placeholder: { type: String },\n /** 自动铺开时是否渲染清空按钮;手写部件模式不使用它,写了节点即可清空 */\n clearable: Boolean,\n translations: { type: Object as PropType<ComboboxProps['translations']> },\n allowCustomValue: Boolean,\n openOnClick: Boolean,\n inputBehavior: { type: String as PropType<ComboboxInputBehavior> },\n placement: { type: String as PropType<Placement> },\n offset: { type: Number },\n /** 文字方向;浮层迁移到落点后无法继承作者子树上的方向,需要 RTL 时显式提供。 */\n dir: { type: String as PropType<Direction> },\n variant: { type: String as PropType<ControlVariant> },\n tone: { type: String as PropType<Tone> },\n size: { type: String as PropType<Size> },\n },\n // *-change 携带 details 对象,update:* 携带裸值\n emits: {\n 'value-change': (_details: PayloadOf<ComboboxProps, 'onValueChange'>) => true,\n 'input-value-change': (_details: PayloadOf<ComboboxProps, 'onInputValueChange'>) => true,\n 'open-change': (_details: PayloadOf<ComboboxProps, 'onOpenChange'>) => true,\n 'update:value': (_value: PayloadOf<ComboboxProps, 'onValueChange'>['value']) => true,\n 'update:inputValue': (_inputValue: PayloadOf<ComboboxProps, 'onInputValueChange'>['inputValue']) => true,\n 'update:open': (_open: PayloadOf<ComboboxProps, 'onOpenChange'>['open']) => true,\n },\n slots: Object as SlotsType<{\n 'default'?: (props: ComboboxRootSlotProps) => VNode[]\n 'label'?: () => VNode[]\n 'empty'?: () => VNode[]\n /** 只填条目的文字槽,副文本与首尾两格照旧各归各的 */\n 'item'?: (node: ComboboxNodeMeta) => VNode[]\n /** 只接管行首那一格,其余槽照旧由数据铺 */\n 'item-prefix'?: (node: ComboboxNodeMeta) => VNode[]\n /** 只接管行尾那一格(计数、徽标、次级图标),其余槽照旧由数据铺 */\n 'item-suffix'?: (node: ComboboxNodeMeta) => VNode[]\n }>,\n setup(props, { slots, emit }) {\n const notifyValue: ComboboxProps['onValueChange'] = (details) => {\n emit('value-change', details)\n emit('update:value', details.value)\n }\n const notifyInputValue: ComboboxProps['onInputValueChange'] = (details) => {\n emit('input-value-change', details)\n emit('update:inputValue', details.inputValue)\n }\n const notifyOpen: ComboboxProps['onOpenChange'] = (details) => {\n emit('open-change', details)\n emit('update:open', details.open)\n }\n const ctx = useCombobox(withXhConfig('combobox', useFormControlProps(props)) as ComboboxProps, {\n onValueChange: notifyValue,\n onInputValueChange: notifyInputValue,\n onOpenChange: notifyOpen,\n })\n provideCombobox(ctx)\n\n // 首帧结算一次候选条数供空态节点判断,之后的增删由条目自己上报\n onMounted(ctx.syncItems)\n onUpdated(ctx.syncItems)\n\n return () => h(\n 'div',\n ctx.api.value.getRootProps() as Record<string, unknown>,\n slots.default\n ? slots.default({\n open: ctx.api.value.open,\n value: ctx.api.value.value,\n inputValue: ctx.api.value.inputValue,\n highlightedValue: ctx.api.value.highlightedValue,\n empty: ctx.api.value.empty,\n tags: ctx.api.value.tags,\n overflowCount: ctx.api.value.overflowCount,\n overflowText: ctx.api.value.overflowText,\n isSelected: ctx.api.value.isSelected,\n setOpen: ctx.api.value.setOpen,\n setValue: ctx.api.value.setValue,\n setInputValue: ctx.api.value.setInputValue,\n clear: ctx.api.value.clear,\n deselect: ctx.api.value.deselect,\n })\n : props.collection\n ? renderDefaultTree(\n ctx.api.value.collection,\n props.multiple ? ctx.api.value.tags : null,\n slots.label?.() ?? (props.label != null ? [props.label] : null),\n slots.empty?.() ?? (props.empty != null ? [props.empty] : null),\n slots.item,\n props.clearable,\n slots['item-prefix'],\n slots['item-suffix'],\n )\n : [],\n )\n },\n})\n\nexport const XhComboboxLabel = defineComponent({\n name: 'XhComboboxLabel',\n setup(_, { slots }) {\n const ctx = useComboboxContext()\n // 用原生 label,connect 给的 for 指向输入框\n return () => h('label', ctx.api.value.getLabelProps() as Record<string, unknown>, slots.default?.())\n },\n})\n\nexport const XhComboboxControl = defineComponent({\n name: 'XhComboboxControl',\n setup(_, { slots }) {\n const ctx = useComboboxContext()\n return () => h('div', {\n ...ctx.api.value.getControlProps() as Record<string, unknown>,\n ref: (el: unknown) => { ctx.controlRef.value = el as HTMLElement },\n }, slots.default?.())\n },\n})\n\nexport const XhComboboxTagList = defineComponent({\n name: 'XhComboboxTagList',\n setup(_, { slots }) {\n const ctx = useComboboxContext()\n // 标签行:盒里、输入框之前,可见标签与 +N 那一枚在里面并排;单选或无选中时连接层给 hidden\n return () => h('span', ctx.api.value.getTagListProps() as Record<string, unknown>, slots.default?.())\n },\n})\n\n/** 标签文字所在的块(tag 的 label):截断规则挂在这一层。 */\nexport const XhComboboxTagLabel = defineComponent({\n name: 'XhComboboxTagLabel',\n setup(_, { slots }) {\n const ctx = useComboboxContext()\n return () => h('span', ctx.api.value.getTagLabelProps() as Record<string, unknown>, slots.default?.())\n },\n})\n\n/**\n * 标签内容:只有文字时替它包一层 label:截断规则挂在 label 上,直接展开在 root 上的文字过长会把\n * 删除按钮挤出;作者自己写了节点则原样放行。与 XhTagRoot 同一规则。\n * 库自身填入的文字(+N,没有折叠时是空串)恒包 label,三个适配器渲染出同一棵树。\n */\nfunction tagChildren(content: VNode[] | string | undefined): VNode[] | string | undefined {\n if (typeof content === 'string')\n return [h(XhComboboxTagLabel, null, () => content)]\n return slotIsPlainText(content) ? [h(XhComboboxTagLabel, null, () => content)] : content\n}\n\n/** 一个选中值一个标签,即库内 tag 的 root(data-scope=\"tag\"):语气、尺寸与禁用从组合框传下,形态按盒的面派生;配合 XhComboboxItemDeleteTrigger 可删除。 */\nexport const XhComboboxTag = defineComponent({\n name: 'XhComboboxTag',\n props: {\n /** 它代表哪个选中值。 */\n value: { type: String, required: true },\n },\n setup(props, { slots }) {\n const ctx = useComboboxContext()\n provideComboboxTag({ value: () => props.value })\n return () => h('span', ctx.api.value.getTagProps({ value: props.value }) as Record<string, unknown>, tagChildren(slots.default?.()))\n },\n})\n\n/** 折叠的标签合成的一个标签:同样是 tag 的 root;有插槽时使用插槽,否则显示 +N。没有折叠的标签时连接层写 hidden。 */\nexport const XhComboboxOverflowTag = defineComponent({\n name: 'XhComboboxOverflowTag',\n setup(_, { slots }) {\n const ctx = useComboboxContext()\n return () => h(\n 'span',\n ctx.api.value.getOverflowTagProps() as Record<string, unknown>,\n tagChildren(slots.default?.() ?? ctx.api.value.overflowText),\n )\n },\n})\n\n/** 标签中的删除按钮:即所在标签那份 tag 的 close-trigger(data-scope=\"tag\"),可及名使用 translations.deleteItem;点按移除所在标签的选中值,焦点留在输入框。 */\nexport const XhComboboxItemDeleteTrigger = defineComponent({\n name: 'XhComboboxItemDeleteTrigger',\n setup(_, { slots }) {\n const ctx = useComboboxContext()\n const tag = useComboboxTagContext()\n return () => h('button', ctx.api.value.getItemDeleteTriggerProps({ value: tag.value() }) as Record<string, unknown>, slots.default?.())\n },\n})\n\nexport const XhComboboxInput = defineComponent({\n name: 'XhComboboxInput',\n props: {\n /**\n * 输入框渲染为哪个标签,默认 input。\n * 写 textarea 即多行宿主:connect 随之撤销 type、role 与 aria-expanded。\n */\n as: { type: String as PropType<ComboboxInputHost>, default: 'input' },\n },\n setup(props) {\n // 字段的说明与校验状态要落在真控件上,不能停在封装根的 div 上\n const fieldWiring = useFieldStateWiring()\n // 字段的标签也得并进名字链:控件自带的那条指的是它自己那个没渲染的 label 部件\n const fieldLabel = useFieldLabelWiring()\n const ctx = useComboboxContext()\n return () => h(props.as, fieldLabel.value({\n ...fieldWiring.value,\n ...ctx.api.value.getInputProps({ as: props.as }) as Record<string, unknown>,\n ref: (el: unknown) => { ctx.inputRef.value = el as ComboboxInputEl },\n }))\n },\n})\n\nexport const XhComboboxTrigger = defineComponent({\n name: 'XhComboboxTrigger',\n setup(_, { slots }) {\n const ctx = useComboboxContext()\n return () => h('button', ctx.api.value.getTriggerProps() as Record<string, unknown>, slots.default?.())\n },\n})\n\nexport const XhComboboxClearTrigger = defineComponent({\n name: 'XhComboboxClearTrigger',\n setup(_, { slots }) {\n const ctx = useComboboxContext()\n return () => h('button', ctx.api.value.getClearTriggerProps() as Record<string, unknown>, slots.default?.())\n },\n})\n\nexport const XhComboboxPositioner = defineComponent({\n name: 'XhComboboxPositioner',\n props: {\n /** 本实例的 Portal 容器;优先于应用级配置。 */\n container: { type: Object as PropType<Element> },\n },\n // 根是 Teleport,Vue 不会把直通属性合上去,作者写的 class 与 style 得自己接住落到 positioner 上\n inheritAttrs: false,\n setup(props, { slots, attrs }) {\n const ctx = useComboboxContext()\n // 候选列表的自绘条:与 content 同级、绝对定位不占布局,壳是这层已经 fixed 的 positioner,条子走浮层 4px 档\n const bars = useScrollbars({ scrollable: () => ctx.contentRef.value, props: { size: 'sm' } })\n // 搬到 portal 落点:留在原地的话,宿主祖先只要建了层叠上下文就能盖住浮层\n return () => h(XhPortal, { to: props.container ?? ctx.portalTarget.value, source: ctx.controlRef }, () => [\n h('div', {\n ...mergeProps(ctx.api.value.getPositionerProps() as Record<string, unknown>, attrs),\n ref: (el: unknown) => { ctx.positionerRef.value = el as HTMLElement },\n }, [...(slots.default?.() ?? []), ...bars.render()]),\n ])\n },\n})\n\nexport const XhComboboxContent = defineComponent({\n name: 'XhComboboxContent',\n setup(_, { slots }) {\n const ctx = useComboboxContext()\n return () => h('div', {\n ...ctx.api.value.getContentProps() as Record<string, unknown>,\n // 收起跟着退场闸门走:皮肤刻意没给 content 补 [hidden]{display:none}(补了退场\n // 就一帧都播不出来),所以真正的收起落成内联 display——节点始终留在原地\n style: ctx.visible.value ? undefined : { display: 'none' },\n ref: (el: unknown) => { ctx.contentRef.value = el as HTMLElement },\n }, slots.default?.())\n },\n})\n\nexport const XhComboboxGroup = defineComponent({\n name: 'XhComboboxGroup',\n props: {\n value: { type: String, required: true },\n },\n setup(props, { slots }) {\n const ctx = useComboboxContext()\n const group = computed<ComboboxGroupProps>(() => ({ value: props.value }))\n provideComboboxItemGroup({ group })\n return () => h('div', ctx.api.value.getGroupProps(group.value) as Record<string, unknown>, slots.default?.())\n },\n})\n\nexport const XhComboboxGroupLabel = defineComponent({\n name: 'XhComboboxGroupLabel',\n setup(_, { slots }) {\n const ctx = useComboboxContext()\n const { group } = useComboboxItemGroupContext()\n return () => h('span', ctx.api.value.getGroupLabelProps(group.value) as Record<string, unknown>, slots.default?.())\n },\n})\n\nexport const XhComboboxItem = defineComponent({\n name: 'XhComboboxItem',\n props: {\n value: { type: String, required: true },\n // 缺省交给 connect 回 collection 里查,写死 false 会盖掉数据里的禁用\n disabled: { type: Boolean, default: undefined },\n },\n setup(props, { slots }) {\n const ctx = useComboboxContext()\n const item = computed<ComboboxItemProps>(() => ({ value: props.value, disabled: props.disabled }))\n provideComboboxItem({ item })\n // 候选的进出与改名由条目自己上报,机器据此结算条数并摘掉悬空高亮\n onMounted(ctx.syncItems)\n onUnmounted(ctx.syncItems)\n // 节点就地复用时数量不变但身份换了,需按 value 另行上报\n watch(() => props.value, ctx.syncItems)\n return () => h('div', ctx.api.value.getItemProps(item.value) as Record<string, unknown>, slots.default?.())\n },\n})\n\nexport const XhComboboxItemText = defineComponent({\n name: 'XhComboboxItemText',\n setup(_, { slots }) {\n const ctx = useComboboxContext()\n const { item } = useComboboxItemContext()\n return () => h('span', ctx.api.value.getItemTextProps(item.value) as Record<string, unknown>, slots.default?.())\n },\n})\n\n/** 条目行首的作者内容(图标、色块、头像),对读屏隐藏 */\nexport const XhComboboxItemPrefix = defineComponent({\n name: 'XhComboboxItemPrefix',\n setup(_, { slots }) {\n const ctx = useComboboxContext()\n const { item } = useComboboxItemContext()\n return () => h('span', ctx.api.value.getItemPrefixProps(item.value) as Record<string, unknown>, slots.default?.())\n },\n})\n\n/** 条目行尾的作者内容(计数、徽标) */\nexport const XhComboboxItemSuffix = defineComponent({\n name: 'XhComboboxItemSuffix',\n setup(_, { slots }) {\n const ctx = useComboboxContext()\n const { item } = useComboboxItemContext()\n return () => h('span', ctx.api.value.getItemSuffixProps(item.value) as Record<string, unknown>, slots.default?.())\n },\n})\n\n/** 条目的第 2 行副文本,跨文字槽、走 muted 档 */\nexport const XhComboboxItemDescription = defineComponent({\n name: 'XhComboboxItemDescription',\n setup(_, { slots }) {\n const ctx = useComboboxContext()\n const { item } = useComboboxItemContext()\n return () => h('span', ctx.api.value.getItemDescriptionProps(item.value) as Record<string, unknown>, slots.default?.())\n },\n})\n\nexport const XhComboboxItemIndicator = defineComponent({\n name: 'XhComboboxItemIndicator',\n setup(_, { slots }) {\n const ctx = useComboboxContext()\n const { item } = useComboboxItemContext()\n return () => h('span', ctx.api.value.getItemIndicatorProps(item.value) as Record<string, unknown>, slots.default?.())\n },\n})\n\nexport const XhComboboxHiddenInput = defineComponent({\n name: 'XhComboboxHiddenInput',\n inheritAttrs: false,\n setup(_, { attrs }) {\n const ctx = useComboboxContext()\n // 表单出口,不写这个部件即不参与表单提交\n return () => ctx.api.value.value.map(value => h('input', {\n ...ctx.api.value.getHiddenInputProps({ value }) as Record<string, unknown>,\n ...attrs,\n key: value,\n }))\n },\n})\n\nexport const XhComboboxEmpty = defineComponent({\n name: 'XhComboboxEmpty',\n setup(_, { slots }) {\n const ctx = useComboboxContext()\n // 放在 positioner 里作 content 的兄弟节点,不进 role=listbox\n return () => h('div', ctx.api.value.getEmptyProps() as Record<string, unknown>, slots.default?.())\n },\n})\n\nexport const XhComboboxLoading = defineComponent({\n name: 'XhComboboxLoading',\n setup(_, { slots }) {\n const ctx = useComboboxContext()\n // 在途占位:与空态占位同一个位置,取数期间顶上来\n return () => h('div', ctx.api.value.getLoadingProps() as Record<string, unknown>, slots.default?.())\n },\n})\n\n/**\n * 未写默认插槽时按 collection 铺开的整套结构,作者只提供数据。\n * 与手写部件产出的 DOM 完全一致,需要修改结构时写默认插槽,行为不变。\n * 过滤仍归调用方:collection 就是当前应显示的候选。\n */\nfunction renderDefaultTree(\n collection: readonly ComboboxNodeMeta[],\n tags: readonly ComboboxTagMeta[] | null,\n label: (VNode | string)[] | null,\n empty: (VNode | string)[] | null,\n itemSlot: ((node: ComboboxNodeMeta) => VNode[]) | undefined,\n clearable: boolean,\n prefixSlot?: (node: ComboboxNodeMeta) => VNode[],\n suffixSlot?: (node: ComboboxNodeMeta) => VNode[],\n): VNode[] {\n return [\n ...(label ? [h(XhComboboxLabel, null, () => label)] : []),\n h(XhComboboxControl, null, () => [\n // 多选的已选项排在输入框之前:一枚一个带删除钮的标签,摆不下的折进 +N\n ...(tags\n ? [h(XhComboboxTagList, null, () => [\n ...tags.map(tag => h(XhComboboxTag, { key: tag.value, value: tag.value }, () => [\n h(XhComboboxTagLabel, null, () => tag.label),\n h(XhComboboxItemDeleteTrigger),\n ])),\n h(XhComboboxOverflowTag),\n ])]\n : []),\n h(XhComboboxInput),\n ...(clearable ? [h(XhComboboxClearTrigger)] : []),\n h(XhComboboxTrigger),\n ]),\n h(XhComboboxPositioner, null, () => [\n h(XhComboboxContent, null, () => collection.map(node =>\n h(XhComboboxItem, { key: node.value, value: node.value }, () => [\n ...(prefixSlot ? [h(XhComboboxItemPrefix, null, () => prefixSlot(node))] : []),\n h(XhComboboxItemText, null, () => itemSlot?.(node) ?? node.label),\n ...(node.description != null ? [h(XhComboboxItemDescription, null, () => node.description)] : []),\n ...(suffixSlot ? [h(XhComboboxItemSuffix, null, () => suffixSlot(node))] : []),\n h(XhComboboxItemIndicator),\n ]),\n )),\n // 空态节点是 content 的兄弟,不进 role=listbox\n h(XhComboboxEmpty, null, () => empty ?? []),\n ]),\n ]\n}\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"combobox.js","names":[],"sources":["../../../src/components/combobox/combobox.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// 提供 combobox 相关实现。\n\nimport type { ControlVariant, Direction, Placement, Size, Tone } from '@xihan-ui/core'\nimport type { CollectionVirtualizer, ComboboxApi, ComboboxGroupProps, ComboboxInputBehavior, ComboboxInputEl, ComboboxInputHost, ComboboxItemProps, ComboboxNode, ComboboxNodeMeta, ComboboxSchema, ComboboxTagMeta } from '@xihan-ui/headless'\nimport type { PropType, SlotsType, VNode } from 'vue'\nimport type { PayloadOf } from '../../runtime/payload'\nimport { computed, defineComponent, h, mergeProps, onMounted, onUnmounted, onUpdated, watch } from 'vue'\nimport { withXhConfig } from '../../config/config'\nimport { XhPortal } from '../../runtime/portal'\nimport { slotIsPlainText } from '../../runtime/slot-content'\nimport { useScrollbars } from '../../runtime/use-scrollbars'\nimport { withHandlers } from '../../runtime/with-handlers'\nimport { useFieldLabelWiring, useFieldStateWiring } from '../field/use-field-control'\nimport { useFormControlProps } from '../form/use-form-control'\nimport {\n provideCombobox,\n provideComboboxItem,\n provideComboboxItemGroup,\n provideComboboxTag,\n useComboboxContext,\n useComboboxItemContext,\n useComboboxItemGroupContext,\n useComboboxTagContext,\n} from './context'\nimport { useCombobox } from './use-combobox'\n\ntype ComboboxProps = ComboboxSchema['props']\n\n/** 默认插槽的载荷:展开状态、选中值、输入串、高亮候选、空态、多选的可见标签与折起的个数,以及修改它们的命令。 */\nexport type ComboboxRootSlotProps = Pick<\n ComboboxApi,\n 'open' | 'value' | 'inputValue' | 'highlightedValue' | 'empty' | 'tags' | 'overflowCount' | 'overflowText' | 'isSelected' | 'setOpen' | 'setValue' | 'setInputValue' | 'clear' | 'deselect'\n>\n\nexport const XhComboboxRoot = defineComponent({\n name: 'XhComboboxRoot',\n // 有 connect 兜底的 prop:普通类型省略 default,Boolean 显式保留 undefined\n props: {\n collection: { type: Array as PropType<ComboboxNode[]> },\n virtualizer: { type: Object as PropType<CollectionVirtualizer> },\n /** 标题文字。提供后不必再写 label 部件;需要放置其他内容时改用 label 插槽。 */\n label: { type: String },\n /** 无匹配时的提示语。提供后不必再写 empty 部件;需要放置其他内容时改用 empty 插槽。 */\n empty: { type: String },\n value: { type: [String, Array] as PropType<string | string[]> },\n defaultValue: { type: [String, Array] as PropType<string | string[]> },\n inputValue: { type: String },\n defaultInputValue: { type: String },\n open: { type: Boolean, default: undefined },\n defaultOpen: Boolean,\n /** 表单字段名;提供后 hidden-input 才带 name 并参与提交 */\n name: { type: String },\n form: { type: String },\n multiple: Boolean,\n /** 多选标签最多显示的数量,其余折进 +N;默认 3。 */\n maxTagCount: { type: Number },\n disabled: { type: Boolean, default: undefined },\n readOnly: { type: Boolean, default: undefined },\n invalid: { type: Boolean, default: undefined },\n loading: Boolean,\n loop: { type: Boolean, default: undefined },\n placeholder: { type: String },\n /** 自动铺开时是否渲染清空按钮;手写部件模式不使用它,写了节点即可清空 */\n clearable: Boolean,\n translations: { type: Object as PropType<ComboboxProps['translations']> },\n allowCustomValue: Boolean,\n openOnClick: Boolean,\n inputBehavior: { type: String as PropType<ComboboxInputBehavior> },\n placement: { type: String as PropType<Placement> },\n offset: { type: Number },\n /** 文字方向;浮层迁移到落点后无法继承作者子树上的方向,需要 RTL 时显式提供。 */\n dir: { type: String as PropType<Direction> },\n variant: { type: String as PropType<ControlVariant> },\n tone: { type: String as PropType<Tone> },\n size: { type: String as PropType<Size> },\n },\n // *-change 携带 details 对象,update:* 携带裸值\n emits: {\n 'clear': () => true,\n 'value-change': (_details: PayloadOf<ComboboxProps, 'onValueChange'>) => true,\n 'input-value-change': (_details: PayloadOf<ComboboxProps, 'onInputValueChange'>) => true,\n 'open-change': (_details: PayloadOf<ComboboxProps, 'onOpenChange'>) => true,\n 'update:value': (_value: PayloadOf<ComboboxProps, 'onValueChange'>['value']) => true,\n 'update:inputValue': (_inputValue: PayloadOf<ComboboxProps, 'onInputValueChange'>['inputValue']) => true,\n 'update:open': (_open: PayloadOf<ComboboxProps, 'onOpenChange'>['open']) => true,\n },\n slots: Object as SlotsType<{\n 'default'?: (props: ComboboxRootSlotProps) => VNode[]\n 'label'?: () => VNode[]\n 'empty'?: () => VNode[]\n /** 只填条目的文字槽,副文本与首尾两格照旧各归各的 */\n 'item'?: (node: ComboboxNodeMeta) => VNode[]\n /** 只接管行首那一格,其余槽照旧由数据铺 */\n 'item-prefix'?: (node: ComboboxNodeMeta) => VNode[]\n /** 只接管行尾那一格(计数、徽标、次级图标),其余槽照旧由数据铺 */\n 'item-suffix'?: (node: ComboboxNodeMeta) => VNode[]\n }>,\n setup(props, { slots, emit }) {\n const notifyValue: ComboboxProps['onValueChange'] = (details) => {\n emit('value-change', details)\n emit('update:value', details.value)\n }\n const notifyInputValue: ComboboxProps['onInputValueChange'] = (details) => {\n emit('input-value-change', details)\n emit('update:inputValue', details.inputValue)\n }\n const notifyOpen: ComboboxProps['onOpenChange'] = (details) => {\n emit('open-change', details)\n emit('update:open', details.open)\n }\n const ctx = useCombobox(withHandlers(withXhConfig('combobox', useFormControlProps(props)), { onClear: () => emit('clear') }) as ComboboxProps, {\n onValueChange: notifyValue,\n onInputValueChange: notifyInputValue,\n onOpenChange: notifyOpen,\n })\n provideCombobox(ctx)\n\n // 首帧结算一次候选条数供空态节点判断,之后的增删由条目自己上报\n onMounted(ctx.syncItems)\n onUpdated(ctx.syncItems)\n\n return () => h(\n 'div',\n ctx.api.value.getRootProps() as Record<string, unknown>,\n slots.default\n ? slots.default({\n open: ctx.api.value.open,\n value: ctx.api.value.value,\n inputValue: ctx.api.value.inputValue,\n highlightedValue: ctx.api.value.highlightedValue,\n empty: ctx.api.value.empty,\n tags: ctx.api.value.tags,\n overflowCount: ctx.api.value.overflowCount,\n overflowText: ctx.api.value.overflowText,\n isSelected: ctx.api.value.isSelected,\n setOpen: ctx.api.value.setOpen,\n setValue: ctx.api.value.setValue,\n setInputValue: ctx.api.value.setInputValue,\n clear: ctx.api.value.clear,\n deselect: ctx.api.value.deselect,\n })\n : props.collection\n ? renderDefaultTree(\n ctx.api.value.collection,\n props.multiple ? ctx.api.value.tags : null,\n slots.label?.() ?? (props.label != null ? [props.label] : null),\n slots.empty?.() ?? (props.empty != null ? [props.empty] : null),\n slots.item,\n props.clearable,\n slots['item-prefix'],\n slots['item-suffix'],\n )\n : [],\n )\n },\n})\n\nexport const XhComboboxLabel = defineComponent({\n name: 'XhComboboxLabel',\n setup(_, { slots }) {\n const ctx = useComboboxContext()\n // 用原生 label,connect 给的 for 指向输入框\n return () => h('label', ctx.api.value.getLabelProps() as Record<string, unknown>, slots.default?.())\n },\n})\n\nexport const XhComboboxControl = defineComponent({\n name: 'XhComboboxControl',\n setup(_, { slots }) {\n const ctx = useComboboxContext()\n return () => h('div', {\n ...ctx.api.value.getControlProps() as Record<string, unknown>,\n ref: (el: unknown) => { ctx.controlRef.value = el as HTMLElement },\n }, slots.default?.())\n },\n})\n\nexport const XhComboboxTagList = defineComponent({\n name: 'XhComboboxTagList',\n setup(_, { slots }) {\n const ctx = useComboboxContext()\n // 标签行:盒里、输入框之前,可见标签与 +N 那一枚在里面并排;单选或无选中时连接层给 hidden\n return () => h('span', ctx.api.value.getTagListProps() as Record<string, unknown>, slots.default?.())\n },\n})\n\n/** 标签文字所在的块(tag 的 label):截断规则挂在这一层。 */\nexport const XhComboboxTagLabel = defineComponent({\n name: 'XhComboboxTagLabel',\n setup(_, { slots }) {\n const ctx = useComboboxContext()\n return () => h('span', ctx.api.value.getTagLabelProps() as Record<string, unknown>, slots.default?.())\n },\n})\n\n/**\n * 标签内容:只有文字时替它包一层 label:截断规则挂在 label 上,直接展开在 root 上的文字过长会把\n * 删除按钮挤出;作者自己写了节点则原样放行。与 XhTagRoot 同一规则。\n * 库自身填入的文字(+N,没有折叠时是空串)恒包 label,三个适配器渲染出同一棵树。\n */\nfunction tagChildren(content: VNode[] | string | undefined): VNode[] | string | undefined {\n if (typeof content === 'string')\n return [h(XhComboboxTagLabel, null, () => content)]\n return slotIsPlainText(content) ? [h(XhComboboxTagLabel, null, () => content)] : content\n}\n\n/** 一个选中值一个标签,即库内 tag 的 root(data-scope=\"tag\"):语气、尺寸与禁用从组合框传下,形态按盒的面派生;配合 XhComboboxItemDeleteTrigger 可删除。 */\nexport const XhComboboxTag = defineComponent({\n name: 'XhComboboxTag',\n props: {\n /** 它代表哪个选中值。 */\n value: { type: String, required: true },\n },\n setup(props, { slots }) {\n const ctx = useComboboxContext()\n provideComboboxTag({ value: () => props.value })\n return () => h('span', ctx.api.value.getTagProps({ value: props.value }) as Record<string, unknown>, tagChildren(slots.default?.()))\n },\n})\n\n/** 折叠的标签合成的一个标签:同样是 tag 的 root;有插槽时使用插槽,否则显示 +N。没有折叠的标签时连接层写 hidden。 */\nexport const XhComboboxOverflowTag = defineComponent({\n name: 'XhComboboxOverflowTag',\n setup(_, { slots }) {\n const ctx = useComboboxContext()\n return () => h(\n 'span',\n ctx.api.value.getOverflowTagProps() as Record<string, unknown>,\n tagChildren(slots.default?.() ?? ctx.api.value.overflowText),\n )\n },\n})\n\n/** 标签中的删除按钮:即所在标签那份 tag 的 close-trigger(data-scope=\"tag\"),可及名使用 translations.deleteItem;点按移除所在标签的选中值,焦点留在输入框。 */\nexport const XhComboboxItemDeleteTrigger = defineComponent({\n name: 'XhComboboxItemDeleteTrigger',\n setup(_, { slots }) {\n const ctx = useComboboxContext()\n const tag = useComboboxTagContext()\n return () => h('button', ctx.api.value.getItemDeleteTriggerProps({ value: tag.value() }) as Record<string, unknown>, slots.default?.())\n },\n})\n\nexport const XhComboboxInput = defineComponent({\n name: 'XhComboboxInput',\n props: {\n /**\n * 输入框渲染为哪个标签,默认 input。\n * 写 textarea 即多行宿主:connect 随之撤销 type、role 与 aria-expanded。\n */\n as: { type: String as PropType<ComboboxInputHost>, default: 'input' },\n },\n setup(props) {\n // 字段的说明与校验状态要落在真控件上,不能停在封装根的 div 上\n const fieldWiring = useFieldStateWiring()\n // 字段的标签也得并进名字链:控件自带的那条指的是它自己那个没渲染的 label 部件\n const fieldLabel = useFieldLabelWiring()\n const ctx = useComboboxContext()\n return () => h(props.as, fieldLabel.value({\n ...fieldWiring.value,\n ...ctx.api.value.getInputProps({ as: props.as }) as Record<string, unknown>,\n ref: (el: unknown) => { ctx.inputRef.value = el as ComboboxInputEl },\n }))\n },\n})\n\nexport const XhComboboxTrigger = defineComponent({\n name: 'XhComboboxTrigger',\n setup(_, { slots }) {\n const ctx = useComboboxContext()\n return () => h('button', ctx.api.value.getTriggerProps() as Record<string, unknown>, slots.default?.())\n },\n})\n\nexport const XhComboboxClearTrigger = defineComponent({\n name: 'XhComboboxClearTrigger',\n setup(_, { slots }) {\n const ctx = useComboboxContext()\n return () => h('button', ctx.api.value.getClearTriggerProps() as Record<string, unknown>, slots.default?.())\n },\n})\n\nexport const XhComboboxPositioner = defineComponent({\n name: 'XhComboboxPositioner',\n props: {\n /** 本实例的 Portal 容器;优先于应用级配置。 */\n container: { type: Object as PropType<Element> },\n },\n // 根是 Teleport,Vue 不会把直通属性合上去,作者写的 class 与 style 得自己接住落到 positioner 上\n inheritAttrs: false,\n setup(props, { slots, attrs }) {\n const ctx = useComboboxContext()\n // 候选列表的自绘条:与 content 同级、绝对定位不占布局,壳是这层已经 fixed 的 positioner,条子走浮层 4px 档\n const bars = useScrollbars({ scrollable: () => ctx.contentRef.value, props: { size: 'sm' } })\n // 搬到 portal 落点:留在原地的话,宿主祖先只要建了层叠上下文就能盖住浮层\n return () => h(XhPortal, { to: props.container ?? ctx.portalTarget.value, source: ctx.controlRef, present: ctx.visible.value }, () => [\n h('div', {\n ...mergeProps(ctx.api.value.getPositionerProps() as Record<string, unknown>, attrs),\n ref: (el: unknown) => { ctx.positionerRef.value = el as HTMLElement },\n }, [...(slots.default?.() ?? []), ...bars.render()]),\n ])\n },\n})\n\nexport const XhComboboxContent = defineComponent({\n name: 'XhComboboxContent',\n setup(_, { slots }) {\n const ctx = useComboboxContext()\n return () => h('div', {\n ...ctx.api.value.getContentProps() as Record<string, unknown>,\n // 收起跟着退场闸门走:皮肤刻意没给 content 补 [hidden]{display:none}(补了退场\n // 就一帧都播不出来),所以真正的收起落成内联 display——节点始终留在原地\n style: ctx.visible.value ? undefined : { display: 'none' },\n ref: (el: unknown) => { ctx.contentRef.value = el as HTMLElement },\n }, slots.default?.())\n },\n})\n\nexport const XhComboboxGroup = defineComponent({\n name: 'XhComboboxGroup',\n props: {\n value: { type: String, required: true },\n },\n setup(props, { slots }) {\n const ctx = useComboboxContext()\n const group = computed<ComboboxGroupProps>(() => ({ value: props.value }))\n provideComboboxItemGroup({ group })\n return () => h('div', ctx.api.value.getGroupProps(group.value) as Record<string, unknown>, slots.default?.())\n },\n})\n\nexport const XhComboboxGroupLabel = defineComponent({\n name: 'XhComboboxGroupLabel',\n setup(_, { slots }) {\n const ctx = useComboboxContext()\n const { group } = useComboboxItemGroupContext()\n return () => h('span', ctx.api.value.getGroupLabelProps(group.value) as Record<string, unknown>, slots.default?.())\n },\n})\n\nexport const XhComboboxItem = defineComponent({\n name: 'XhComboboxItem',\n props: {\n value: { type: String, required: true },\n // 缺省交给 connect 回 collection 里查,写死 false 会盖掉数据里的禁用\n disabled: { type: Boolean, default: undefined },\n },\n setup(props, { slots }) {\n const ctx = useComboboxContext()\n const item = computed<ComboboxItemProps>(() => ({ value: props.value, disabled: props.disabled }))\n provideComboboxItem({ item })\n // 候选的进出与改名由条目自己上报,机器据此结算条数并摘掉悬空高亮\n onMounted(ctx.syncItems)\n onUnmounted(ctx.syncItems)\n // 节点就地复用时数量不变但身份换了,需按 value 另行上报\n watch(() => props.value, ctx.syncItems)\n return () => h('div', ctx.api.value.getItemProps(item.value) as Record<string, unknown>, slots.default?.())\n },\n})\n\nexport const XhComboboxItemText = defineComponent({\n name: 'XhComboboxItemText',\n setup(_, { slots }) {\n const ctx = useComboboxContext()\n const { item } = useComboboxItemContext()\n return () => h('span', ctx.api.value.getItemTextProps(item.value) as Record<string, unknown>, slots.default?.())\n },\n})\n\n/** 条目行首的作者内容(图标、色块、头像),对读屏隐藏 */\nexport const XhComboboxItemPrefix = defineComponent({\n name: 'XhComboboxItemPrefix',\n setup(_, { slots }) {\n const ctx = useComboboxContext()\n const { item } = useComboboxItemContext()\n return () => h('span', ctx.api.value.getItemPrefixProps(item.value) as Record<string, unknown>, slots.default?.())\n },\n})\n\n/** 条目行尾的作者内容(计数、徽标) */\nexport const XhComboboxItemSuffix = defineComponent({\n name: 'XhComboboxItemSuffix',\n setup(_, { slots }) {\n const ctx = useComboboxContext()\n const { item } = useComboboxItemContext()\n return () => h('span', ctx.api.value.getItemSuffixProps(item.value) as Record<string, unknown>, slots.default?.())\n },\n})\n\n/** 条目的第 2 行副文本,跨文字槽、走 muted 档 */\nexport const XhComboboxItemDescription = defineComponent({\n name: 'XhComboboxItemDescription',\n setup(_, { slots }) {\n const ctx = useComboboxContext()\n const { item } = useComboboxItemContext()\n return () => h('span', ctx.api.value.getItemDescriptionProps(item.value) as Record<string, unknown>, slots.default?.())\n },\n})\n\nexport const XhComboboxItemIndicator = defineComponent({\n name: 'XhComboboxItemIndicator',\n setup(_, { slots }) {\n const ctx = useComboboxContext()\n const { item } = useComboboxItemContext()\n return () => h('span', ctx.api.value.getItemIndicatorProps(item.value) as Record<string, unknown>, slots.default?.())\n },\n})\n\nexport const XhComboboxHiddenInput = defineComponent({\n name: 'XhComboboxHiddenInput',\n inheritAttrs: false,\n setup(_, { attrs }) {\n const ctx = useComboboxContext()\n // 表单出口,不写这个部件即不参与表单提交\n // 合并而不是展开:作者的 class 与部件的挂载类拼起来,不互相覆盖\n return () => ctx.api.value.value.map(value => h('input', {\n ...mergeProps(ctx.api.value.getHiddenInputProps({ value }) as Record<string, unknown>, attrs),\n key: value,\n }))\n },\n})\n\nexport const XhComboboxEmpty = defineComponent({\n name: 'XhComboboxEmpty',\n setup(_, { slots }) {\n const ctx = useComboboxContext()\n // 放在 positioner 里作 content 的兄弟节点,不进 role=listbox\n return () => h('div', ctx.api.value.getEmptyProps() as Record<string, unknown>, slots.default?.())\n },\n})\n\nexport const XhComboboxLoading = defineComponent({\n name: 'XhComboboxLoading',\n setup(_, { slots }) {\n const ctx = useComboboxContext()\n // 在途占位:与空态占位同一个位置,取数期间顶上来\n return () => h('div', ctx.api.value.getLoadingProps() as Record<string, unknown>, slots.default?.())\n },\n})\n\n/**\n * 未写默认插槽时按 collection 铺开的整套结构,作者只提供数据。\n * 与手写部件产出的 DOM 完全一致,需要修改结构时写默认插槽,行为不变。\n * 过滤仍归调用方:collection 就是当前应显示的候选。\n */\nfunction renderDefaultTree(\n collection: readonly ComboboxNodeMeta[],\n tags: readonly ComboboxTagMeta[] | null,\n label: (VNode | string)[] | null,\n empty: (VNode | string)[] | null,\n itemSlot: ((node: ComboboxNodeMeta) => VNode[]) | undefined,\n clearable: boolean,\n prefixSlot?: (node: ComboboxNodeMeta) => VNode[],\n suffixSlot?: (node: ComboboxNodeMeta) => VNode[],\n): VNode[] {\n return [\n ...(label ? [h(XhComboboxLabel, null, () => label)] : []),\n h(XhComboboxControl, null, () => [\n // 多选的已选项排在输入框之前:一枚一个带删除钮的标签,摆不下的折进 +N\n ...(tags\n ? [h(XhComboboxTagList, null, () => [\n ...tags.map(tag => h(XhComboboxTag, { key: tag.value, value: tag.value }, () => [\n h(XhComboboxTagLabel, null, () => tag.label),\n h(XhComboboxItemDeleteTrigger),\n ])),\n h(XhComboboxOverflowTag),\n ])]\n : []),\n h(XhComboboxInput),\n ...(clearable ? [h(XhComboboxClearTrigger)] : []),\n h(XhComboboxTrigger),\n ]),\n h(XhComboboxPositioner, null, () => [\n h(XhComboboxContent, null, () => collection.map(node =>\n h(XhComboboxItem, { key: node.value, value: node.value }, () => [\n ...(prefixSlot ? [h(XhComboboxItemPrefix, null, () => prefixSlot(node))] : []),\n h(XhComboboxItemText, null, () => itemSlot?.(node) ?? node.label),\n ...(node.description != null ? [h(XhComboboxItemDescription, null, () => node.description)] : []),\n ...(suffixSlot ? [h(XhComboboxItemSuffix, null, () => suffixSlot(node))] : []),\n h(XhComboboxItemIndicator),\n ]),\n )),\n // 空态节点是 content 的兄弟,不进 role=listbox\n h(XhComboboxEmpty, null, () => empty ?? []),\n ]),\n ]\n}\n"],"mappings":";;;;;;;;;;;AAuCA,MAAa,iBAAiB,gBAAgB;CAC5C,MAAM;CAEN,OAAO;EACL,YAAY,EAAE,MAAM,MAAkC;EACtD,aAAa,EAAE,MAAM,OAA0C;;EAE/D,OAAO,EAAE,MAAM,OAAO;;EAEtB,OAAO,EAAE,MAAM,OAAO;EACtB,OAAO,EAAE,MAAM,CAAC,QAAQ,KAAK,EAAiC;EAC9D,cAAc,EAAE,MAAM,CAAC,QAAQ,KAAK,EAAiC;EACrE,YAAY,EAAE,MAAM,OAAO;EAC3B,mBAAmB,EAAE,MAAM,OAAO;EAClC,MAAM;GAAE,MAAM;GAAS,SAAS,KAAA;EAAU;EAC1C,aAAa;;EAEb,MAAM,EAAE,MAAM,OAAO;EACrB,MAAM,EAAE,MAAM,OAAO;EACrB,UAAU;;EAEV,aAAa,EAAE,MAAM,OAAO;EAC5B,UAAU;GAAE,MAAM;GAAS,SAAS,KAAA;EAAU;EAC9C,UAAU;GAAE,MAAM;GAAS,SAAS,KAAA;EAAU;EAC9C,SAAS;GAAE,MAAM;GAAS,SAAS,KAAA;EAAU;EAC7C,SAAS;EACT,MAAM;GAAE,MAAM;GAAS,SAAS,KAAA;EAAU;EAC1C,aAAa,EAAE,MAAM,OAAO;;EAE5B,WAAW;EACX,cAAc,EAAE,MAAM,OAAkD;EACxE,kBAAkB;EAClB,aAAa;EACb,eAAe,EAAE,MAAM,OAA0C;EACjE,WAAW,EAAE,MAAM,OAA8B;EACjD,QAAQ,EAAE,MAAM,OAAO;;EAEvB,KAAK,EAAE,MAAM,OAA8B;EAC3C,SAAS,EAAE,MAAM,OAAmC;EACpD,MAAM,EAAE,MAAM,OAAyB;EACvC,MAAM,EAAE,MAAM,OAAyB;CACzC;CAEA,OAAO;EACL,eAAe;EACf,iBAAiB,aAAwD;EACzE,uBAAuB,aAA6D;EACpF,gBAAgB,aAAuD;EACvE,iBAAiB,WAA+D;EAChF,sBAAsB,gBAA8E;EACpG,gBAAgB,UAA4D;CAC9E;CACA,OAAO;CAWP,MAAM,OAAO,EAAE,OAAO,QAAQ;EAC5B,MAAM,eAA+C,YAAY;GAC/D,KAAK,gBAAgB,OAAO;GAC5B,KAAK,gBAAgB,QAAQ,KAAK;EACpC;EACA,MAAM,oBAAyD,YAAY;GACzE,KAAK,sBAAsB,OAAO;GAClC,KAAK,qBAAqB,QAAQ,UAAU;EAC9C;EACA,MAAM,cAA6C,YAAY;GAC7D,KAAK,eAAe,OAAO;GAC3B,KAAK,eAAe,QAAQ,IAAI;EAClC;EACA,MAAM,MAAM,YAAY,aAAa,aAAa,YAAY,oBAAoB,KAAK,CAAC,GAAG,EAAE,eAAe,KAAK,OAAO,EAAE,CAAC,GAAoB;GAC7I,eAAe;GACf,oBAAoB;GACpB,cAAc;EAChB,CAAC;EACD,gBAAgB,GAAG;EAGnB,UAAU,IAAI,SAAS;EACvB,UAAU,IAAI,SAAS;EAEvB,aAAa,EACX,OACA,IAAI,IAAI,MAAM,aAAa,GAC3B,MAAM,UACF,MAAM,QAAQ;GACZ,MAAM,IAAI,IAAI,MAAM;GACpB,OAAO,IAAI,IAAI,MAAM;GACrB,YAAY,IAAI,IAAI,MAAM;GAC1B,kBAAkB,IAAI,IAAI,MAAM;GAChC,OAAO,IAAI,IAAI,MAAM;GACrB,MAAM,IAAI,IAAI,MAAM;GACpB,eAAe,IAAI,IAAI,MAAM;GAC7B,cAAc,IAAI,IAAI,MAAM;GAC5B,YAAY,IAAI,IAAI,MAAM;GAC1B,SAAS,IAAI,IAAI,MAAM;GACvB,UAAU,IAAI,IAAI,MAAM;GACxB,eAAe,IAAI,IAAI,MAAM;GAC7B,OAAO,IAAI,IAAI,MAAM;GACrB,UAAU,IAAI,IAAI,MAAM;EAC1B,CAAC,IACD,MAAM,aACJ,kBACE,IAAI,IAAI,MAAM,YACd,MAAM,WAAW,IAAI,IAAI,MAAM,OAAO,MACtC,MAAM,QAAQ,MAAM,MAAM,SAAS,OAAO,CAAC,MAAM,KAAK,IAAI,OAC1D,MAAM,QAAQ,MAAM,MAAM,SAAS,OAAO,CAAC,MAAM,KAAK,IAAI,OAC1D,MAAM,MACN,MAAM,WACN,MAAM,gBACN,MAAM,cACR,IACA,CAAC,CACT;CACF;AACF,CAAC;AAED,MAAa,kBAAkB,gBAAgB;CAC7C,MAAM;CACN,MAAM,GAAG,EAAE,SAAS;EAClB,MAAM,MAAM,mBAAmB;EAE/B,aAAa,EAAE,SAAS,IAAI,IAAI,MAAM,cAAc,GAA8B,MAAM,UAAU,CAAC;CACrG;AACF,CAAC;AAED,MAAa,oBAAoB,gBAAgB;CAC/C,MAAM;CACN,MAAM,GAAG,EAAE,SAAS;EAClB,MAAM,MAAM,mBAAmB;EAC/B,aAAa,EAAE,OAAO;GACpB,GAAG,IAAI,IAAI,MAAM,gBAAgB;GACjC,MAAM,OAAgB;IAAE,IAAI,WAAW,QAAQ;GAAkB;EACnE,GAAG,MAAM,UAAU,CAAC;CACtB;AACF,CAAC;AAED,MAAa,oBAAoB,gBAAgB;CAC/C,MAAM;CACN,MAAM,GAAG,EAAE,SAAS;EAClB,MAAM,MAAM,mBAAmB;EAE/B,aAAa,EAAE,QAAQ,IAAI,IAAI,MAAM,gBAAgB,GAA8B,MAAM,UAAU,CAAC;CACtG;AACF,CAAC;;AAGD,MAAa,qBAAqB,gBAAgB;CAChD,MAAM;CACN,MAAM,GAAG,EAAE,SAAS;EAClB,MAAM,MAAM,mBAAmB;EAC/B,aAAa,EAAE,QAAQ,IAAI,IAAI,MAAM,iBAAiB,GAA8B,MAAM,UAAU,CAAC;CACvG;AACF,CAAC;;;;;;AAOD,SAAS,YAAY,SAAqE;CACxF,IAAI,OAAO,YAAY,UACrB,OAAO,CAAC,EAAE,oBAAoB,YAAY,OAAO,CAAC;CACpD,OAAO,gBAAgB,OAAO,IAAI,CAAC,EAAE,oBAAoB,YAAY,OAAO,CAAC,IAAI;AACnF;;AAGA,MAAa,gBAAgB,gBAAgB;CAC3C,MAAM;CACN,OAAO;;AAEL,OAAO;EAAE,MAAM;EAAQ,UAAU;CAAK,EACxC;CACA,MAAM,OAAO,EAAE,SAAS;EACtB,MAAM,MAAM,mBAAmB;EAC/B,mBAAmB,EAAE,aAAa,MAAM,MAAM,CAAC;EAC/C,aAAa,EAAE,QAAQ,IAAI,IAAI,MAAM,YAAY,EAAE,OAAO,MAAM,MAAM,CAAC,GAA8B,YAAY,MAAM,UAAU,CAAC,CAAC;CACrI;AACF,CAAC;;AAGD,MAAa,wBAAwB,gBAAgB;CACnD,MAAM;CACN,MAAM,GAAG,EAAE,SAAS;EAClB,MAAM,MAAM,mBAAmB;EAC/B,aAAa,EACX,QACA,IAAI,IAAI,MAAM,oBAAoB,GAClC,YAAY,MAAM,UAAU,KAAK,IAAI,IAAI,MAAM,YAAY,CAC7D;CACF;AACF,CAAC;;AAGD,MAAa,8BAA8B,gBAAgB;CACzD,MAAM;CACN,MAAM,GAAG,EAAE,SAAS;EAClB,MAAM,MAAM,mBAAmB;EAC/B,MAAM,MAAM,sBAAsB;EAClC,aAAa,EAAE,UAAU,IAAI,IAAI,MAAM,0BAA0B,EAAE,OAAO,IAAI,MAAM,EAAE,CAAC,GAA8B,MAAM,UAAU,CAAC;CACxI;AACF,CAAC;AAED,MAAa,kBAAkB,gBAAgB;CAC7C,MAAM;CACN,OAAO;;;;;AAKL,IAAI;EAAE,MAAM;EAAuC,SAAS;CAAQ,EACtE;CACA,MAAM,OAAO;EAEX,MAAM,cAAc,oBAAoB;EAExC,MAAM,aAAa,oBAAoB;EACvC,MAAM,MAAM,mBAAmB;EAC/B,aAAa,EAAE,MAAM,IAAI,WAAW,MAAM;GACxC,GAAG,YAAY;GACf,GAAG,IAAI,IAAI,MAAM,cAAc,EAAE,IAAI,MAAM,GAAG,CAAC;GAC/C,MAAM,OAAgB;IAAE,IAAI,SAAS,QAAQ;GAAsB;EACrE,CAAC,CAAC;CACJ;AACF,CAAC;AAED,MAAa,oBAAoB,gBAAgB;CAC/C,MAAM;CACN,MAAM,GAAG,EAAE,SAAS;EAClB,MAAM,MAAM,mBAAmB;EAC/B,aAAa,EAAE,UAAU,IAAI,IAAI,MAAM,gBAAgB,GAA8B,MAAM,UAAU,CAAC;CACxG;AACF,CAAC;AAED,MAAa,yBAAyB,gBAAgB;CACpD,MAAM;CACN,MAAM,GAAG,EAAE,SAAS;EAClB,MAAM,MAAM,mBAAmB;EAC/B,aAAa,EAAE,UAAU,IAAI,IAAI,MAAM,qBAAqB,GAA8B,MAAM,UAAU,CAAC;CAC7G;AACF,CAAC;AAED,MAAa,uBAAuB,gBAAgB;CAClD,MAAM;CACN,OAAO;;AAEL,WAAW,EAAE,MAAM,OAA4B,EACjD;CAEA,cAAc;CACd,MAAM,OAAO,EAAE,OAAO,SAAS;EAC7B,MAAM,MAAM,mBAAmB;EAE/B,MAAM,OAAO,cAAc;GAAE,kBAAkB,IAAI,WAAW;GAAO,OAAO,EAAE,MAAM,KAAK;EAAE,CAAC;EAE5F,aAAa,EAAE,UAAU;GAAE,IAAI,MAAM,aAAa,IAAI,aAAa;GAAO,QAAQ,IAAI;GAAY,SAAS,IAAI,QAAQ;EAAM,SAAS,CACpI,EAAE,OAAO;GACP,GAAG,WAAW,IAAI,IAAI,MAAM,mBAAmB,GAA8B,KAAK;GAClF,MAAM,OAAgB;IAAE,IAAI,cAAc,QAAQ;GAAkB;EACtE,GAAG,CAAC,GAAI,MAAM,UAAU,KAAK,CAAC,GAAI,GAAG,KAAK,OAAO,CAAC,CAAC,CACrD,CAAC;CACH;AACF,CAAC;AAED,MAAa,oBAAoB,gBAAgB;CAC/C,MAAM;CACN,MAAM,GAAG,EAAE,SAAS;EAClB,MAAM,MAAM,mBAAmB;EAC/B,aAAa,EAAE,OAAO;GACpB,GAAG,IAAI,IAAI,MAAM,gBAAgB;GAGjC,OAAO,IAAI,QAAQ,QAAQ,KAAA,IAAY,EAAE,SAAS,OAAO;GACzD,MAAM,OAAgB;IAAE,IAAI,WAAW,QAAQ;GAAkB;EACnE,GAAG,MAAM,UAAU,CAAC;CACtB;AACF,CAAC;AAED,MAAa,kBAAkB,gBAAgB;CAC7C,MAAM;CACN,OAAO,EACL,OAAO;EAAE,MAAM;EAAQ,UAAU;CAAK,EACxC;CACA,MAAM,OAAO,EAAE,SAAS;EACtB,MAAM,MAAM,mBAAmB;EAC/B,MAAM,QAAQ,gBAAoC,EAAE,OAAO,MAAM,MAAM,EAAE;EACzE,yBAAyB,EAAE,MAAM,CAAC;EAClC,aAAa,EAAE,OAAO,IAAI,IAAI,MAAM,cAAc,MAAM,KAAK,GAA8B,MAAM,UAAU,CAAC;CAC9G;AACF,CAAC;AAED,MAAa,uBAAuB,gBAAgB;CAClD,MAAM;CACN,MAAM,GAAG,EAAE,SAAS;EAClB,MAAM,MAAM,mBAAmB;EAC/B,MAAM,EAAE,UAAU,4BAA4B;EAC9C,aAAa,EAAE,QAAQ,IAAI,IAAI,MAAM,mBAAmB,MAAM,KAAK,GAA8B,MAAM,UAAU,CAAC;CACpH;AACF,CAAC;AAED,MAAa,iBAAiB,gBAAgB;CAC5C,MAAM;CACN,OAAO;EACL,OAAO;GAAE,MAAM;GAAQ,UAAU;EAAK;EAEtC,UAAU;GAAE,MAAM;GAAS,SAAS,KAAA;EAAU;CAChD;CACA,MAAM,OAAO,EAAE,SAAS;EACtB,MAAM,MAAM,mBAAmB;EAC/B,MAAM,OAAO,gBAAmC;GAAE,OAAO,MAAM;GAAO,UAAU,MAAM;EAAS,EAAE;EACjG,oBAAoB,EAAE,KAAK,CAAC;EAE5B,UAAU,IAAI,SAAS;EACvB,YAAY,IAAI,SAAS;EAEzB,YAAY,MAAM,OAAO,IAAI,SAAS;EACtC,aAAa,EAAE,OAAO,IAAI,IAAI,MAAM,aAAa,KAAK,KAAK,GAA8B,MAAM,UAAU,CAAC;CAC5G;AACF,CAAC;AAED,MAAa,qBAAqB,gBAAgB;CAChD,MAAM;CACN,MAAM,GAAG,EAAE,SAAS;EAClB,MAAM,MAAM,mBAAmB;EAC/B,MAAM,EAAE,SAAS,uBAAuB;EACxC,aAAa,EAAE,QAAQ,IAAI,IAAI,MAAM,iBAAiB,KAAK,KAAK,GAA8B,MAAM,UAAU,CAAC;CACjH;AACF,CAAC;;AAGD,MAAa,uBAAuB,gBAAgB;CAClD,MAAM;CACN,MAAM,GAAG,EAAE,SAAS;EAClB,MAAM,MAAM,mBAAmB;EAC/B,MAAM,EAAE,SAAS,uBAAuB;EACxC,aAAa,EAAE,QAAQ,IAAI,IAAI,MAAM,mBAAmB,KAAK,KAAK,GAA8B,MAAM,UAAU,CAAC;CACnH;AACF,CAAC;;AAGD,MAAa,uBAAuB,gBAAgB;CAClD,MAAM;CACN,MAAM,GAAG,EAAE,SAAS;EAClB,MAAM,MAAM,mBAAmB;EAC/B,MAAM,EAAE,SAAS,uBAAuB;EACxC,aAAa,EAAE,QAAQ,IAAI,IAAI,MAAM,mBAAmB,KAAK,KAAK,GAA8B,MAAM,UAAU,CAAC;CACnH;AACF,CAAC;;AAGD,MAAa,4BAA4B,gBAAgB;CACvD,MAAM;CACN,MAAM,GAAG,EAAE,SAAS;EAClB,MAAM,MAAM,mBAAmB;EAC/B,MAAM,EAAE,SAAS,uBAAuB;EACxC,aAAa,EAAE,QAAQ,IAAI,IAAI,MAAM,wBAAwB,KAAK,KAAK,GAA8B,MAAM,UAAU,CAAC;CACxH;AACF,CAAC;AAED,MAAa,0BAA0B,gBAAgB;CACrD,MAAM;CACN,MAAM,GAAG,EAAE,SAAS;EAClB,MAAM,MAAM,mBAAmB;EAC/B,MAAM,EAAE,SAAS,uBAAuB;EACxC,aAAa,EAAE,QAAQ,IAAI,IAAI,MAAM,sBAAsB,KAAK,KAAK,GAA8B,MAAM,UAAU,CAAC;CACtH;AACF,CAAC;AAED,MAAa,wBAAwB,gBAAgB;CACnD,MAAM;CACN,cAAc;CACd,MAAM,GAAG,EAAE,SAAS;EAClB,MAAM,MAAM,mBAAmB;EAG/B,aAAa,IAAI,IAAI,MAAM,MAAM,KAAI,UAAS,EAAE,SAAS;GACvD,GAAG,WAAW,IAAI,IAAI,MAAM,oBAAoB,EAAE,MAAM,CAAC,GAA8B,KAAK;GAC5F,KAAK;EACP,CAAC,CAAC;CACJ;AACF,CAAC;AAED,MAAa,kBAAkB,gBAAgB;CAC7C,MAAM;CACN,MAAM,GAAG,EAAE,SAAS;EAClB,MAAM,MAAM,mBAAmB;EAE/B,aAAa,EAAE,OAAO,IAAI,IAAI,MAAM,cAAc,GAA8B,MAAM,UAAU,CAAC;CACnG;AACF,CAAC;AAED,MAAa,oBAAoB,gBAAgB;CAC/C,MAAM;CACN,MAAM,GAAG,EAAE,SAAS;EAClB,MAAM,MAAM,mBAAmB;EAE/B,aAAa,EAAE,OAAO,IAAI,IAAI,MAAM,gBAAgB,GAA8B,MAAM,UAAU,CAAC;CACrG;AACF,CAAC;;;;;;AAOD,SAAS,kBACP,YACA,MACA,OACA,OACA,UACA,WACA,YACA,YACS;CACT,OAAO;EACL,GAAI,QAAQ,CAAC,EAAE,iBAAiB,YAAY,KAAK,CAAC,IAAI,CAAC;EACvD,EAAE,mBAAmB,YAAY;GAE/B,GAAI,OACA,CAAC,EAAE,mBAAmB,YAAY,CAChC,GAAG,KAAK,KAAI,QAAO,EAAE,eAAe;IAAE,KAAK,IAAI;IAAO,OAAO,IAAI;GAAM,SAAS,CAC9E,EAAE,oBAAoB,YAAY,IAAI,KAAK,GAC3C,EAAE,2BAA2B,CAC/B,CAAC,CAAC,GACF,EAAE,qBAAqB,CACzB,CAAC,CAAC,IACF,CAAC;GACL,EAAE,eAAe;GACjB,GAAI,YAAY,CAAC,EAAE,sBAAsB,CAAC,IAAI,CAAC;GAC/C,EAAE,iBAAiB;EACrB,CAAC;EACD,EAAE,sBAAsB,YAAY,CAClC,EAAE,mBAAmB,YAAY,WAAW,KAAI,SAC9C,EAAE,gBAAgB;GAAE,KAAK,KAAK;GAAO,OAAO,KAAK;EAAM,SAAS;GAC9D,GAAI,aAAa,CAAC,EAAE,sBAAsB,YAAY,WAAW,IAAI,CAAC,CAAC,IAAI,CAAC;GAC5E,EAAE,oBAAoB,YAAY,WAAW,IAAI,KAAK,KAAK,KAAK;GAChE,GAAI,KAAK,eAAe,OAAO,CAAC,EAAE,2BAA2B,YAAY,KAAK,WAAW,CAAC,IAAI,CAAC;GAC/F,GAAI,aAAa,CAAC,EAAE,sBAAsB,YAAY,WAAW,IAAI,CAAC,CAAC,IAAI,CAAC;GAC5E,EAAE,uBAAuB;EAC3B,CAAC,CACH,CAAC,GAED,EAAE,iBAAiB,YAAY,SAAS,CAAC,CAAC,CAC5C,CAAC;CACH;AACF"}
|
|
@@ -164,12 +164,12 @@ declare const XhCommandRoot: import("vue").DefineComponent<import("vue").Extract
|
|
|
164
164
|
open: boolean;
|
|
165
165
|
defaultOpen: boolean;
|
|
166
166
|
loading: boolean;
|
|
167
|
-
caseSensitive: boolean;
|
|
168
|
-
closeOnSelect: boolean;
|
|
169
|
-
modal: boolean;
|
|
170
167
|
closeOnEscape: boolean;
|
|
171
168
|
closeOnInteractOutside: boolean;
|
|
172
169
|
restoreFocus: boolean;
|
|
170
|
+
caseSensitive: boolean;
|
|
171
|
+
closeOnSelect: boolean;
|
|
172
|
+
modal: boolean;
|
|
173
173
|
}, SlotsType<{
|
|
174
174
|
default?: (props: CommandRootSlotProps) => VNode[];
|
|
175
175
|
/** 铺开时的触发按钮内容;未提供时不渲染触发器(面板改由快捷键或 v-model:open 唤起)。 */
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { PayloadOf } from "../../runtime/payload.js";
|
|
2
2
|
import { PropType, SlotsType, VNode } from "vue";
|
|
3
3
|
import { Direction, Placement, Size, Tone } from "@xihan-ui/core";
|
|
4
|
-
import { ContextMenuApi, ContextMenuNode, ContextMenuNodeMeta, ContextMenuRadioValue, ContextMenuSchema, MenuApi } from "@xihan-ui/headless";
|
|
4
|
+
import { ContextMenuApi, ContextMenuNode, ContextMenuNodeMeta, ContextMenuRadioValue, ContextMenuSchema, MenuApi, MenuNode } from "@xihan-ui/headless";
|
|
5
5
|
//#region src/components/context-menu/context-menu.d.ts
|
|
6
6
|
type ContextMenuProps = ContextMenuSchema['props'];
|
|
7
7
|
/** 默认插槽的载荷:右键菜单的展开态与锚点坐标,以及开合、按坐标展开的命令。 */
|
|
@@ -222,6 +222,10 @@ declare const XhContextMenuSub: import("vue").DefineComponent<import("vue").Extr
|
|
|
222
222
|
type: BooleanConstructor;
|
|
223
223
|
default: undefined;
|
|
224
224
|
};
|
|
225
|
+
/** 子层的条目数据:显示文本与禁用的事实源,按数据铺子层时由默认树代填。 */
|
|
226
|
+
collection: {
|
|
227
|
+
type: PropType<MenuNode[]>;
|
|
228
|
+
};
|
|
225
229
|
placement: {
|
|
226
230
|
type: PropType<Placement>;
|
|
227
231
|
};
|
|
@@ -266,6 +270,10 @@ declare const XhContextMenuSub: import("vue").DefineComponent<import("vue").Extr
|
|
|
266
270
|
type: BooleanConstructor;
|
|
267
271
|
default: undefined;
|
|
268
272
|
};
|
|
273
|
+
/** 子层的条目数据:显示文本与禁用的事实源,按数据铺子层时由默认树代填。 */
|
|
274
|
+
collection: {
|
|
275
|
+
type: PropType<MenuNode[]>;
|
|
276
|
+
};
|
|
269
277
|
placement: {
|
|
270
278
|
type: PropType<Placement>;
|
|
271
279
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"context-menu.d.ts","names":[],"sources":["../../../src/components/context-menu/context-menu.ts"],"mappings":";;;;;
|
|
1
|
+
{"version":3,"file":"context-menu.d.ts","names":[],"sources":["../../../src/components/context-menu/context-menu.ts"],"mappings":";;;;;KAiCK,mBAAmB;;KAGZ,2BAA2B,KAAK;;KAGhC,0BAA0B,KAAK;cAY9B,iCAAiB,8BAAA;;IAIG,MAAA,SAAS;;;IACN,MAAA;;;IACO,MAAA;;;IACT,MAAA,SAAS;;;IACF,MAAA,SAAS;;;;;;;;IAGjB,MAAA,SAAS;;;;;;;;;;;;;;IAIN,MAAA,SAAS;;;IAClB,MAAA,SAAS;;;;;;;;;;;IAIR,MAAA,SAAS;;;IACT,MAAA,SAAS;;;;;EAIP,gBAAA,UAAA,UAAU;EACf,SAAA,UAAA,UAAU;EACK,0BAAA,UAAA,UAAU;EACb,uBAAA,UAAA,UAAU;EACpB,gBAAA,OAAA,UAAU;;;IAzBJ,MAAA,SAAS;;;IACN,MAAA;;;IACO,MAAA;;;IACT,MAAA,SAAS;;;IACF,MAAA,SAAS;;;;;;;;IAGjB,MAAA,SAAS;;;;;;;;;;;;;;IAIN,MAAA,SAAS;;;IAClB,MAAA,SAAS;;;;;;;;;;;IAIR,MAAA,SAAS;;;IACT,MAAA,SAAS;;;;;;;;;;;;;;;EAWrB,WAAC,OAAO,6BAA6B;EACrC,gBAAM;;EAET,QAAC,MAAM,wBAAwB;;EAExB,iBAAC,MAAM,wBAAwB;;EAE/B,iBAAC,MAAM,wBAAwB;kCA+CjD;cAEW,oCAAoB,8BAAA;;;;;;;;;;qCA0B/B;cAEW,uCAAuB,8BAAA;;;IAIH,MAAA,SAAS;;;;;;;IAAT,MAAA,SAAS;;MAiBxC,oDAAA;cAEW,oCAAoB,0BAAA,oBAAA,4BAAA;;8BAY/B,qCAAA,iDAAA,aAAA,eAAA,oDAAA;cAEW,kCAAkB,8BAAA;;;;;;;;;;;;MAW7B,oDAAA;cAEW,uCAAuB,8BAAA;;;;;;;;;;;;MAWlC,oDAAA;cAEW,uCAAuB,0BAAA,oBAAA,4BAAA;;8BAOlC,qCAAA,iDAAA,aAAA,eAAA,oDAAA;cAoDW;cACA;cACA;;;;;;cAOA,gCAAgB,8BAAA;;;;;;;;;;;;IAOI,MAAA,SAAS;;;IACT,MAAA,SAAS;;;;;;;;;;;;;;;;;;IAMf,MAAA,SAAS;;;;IAER,MAAA,SAAS;;;;IAET,MAAA,SAAS;;;;;;;;;;;;;;;;;;;IAXJ,MAAA,SAAS;;;IACT,MAAA,SAAS;;;;;;;;;;;;;;;;;;IAMf,MAAA,SAAS;;;;IAER,MAAA,SAAS;;;;IAET,MAAA,SAAS;;;;;;;;;;EAIvB,WAAC,OAAO,4BAA4B;kCAyBhD;cAEW,uCAAuB,0BAAA,oBAAA,4BAAA;;8BAiBlC,qCAAA,iDAAA,aAAA,eAAA,oDAAA;cAEW,qCAAqB,0BAAA,oBAAA,4BAAA;;8BAOhC,qCAAA,iDAAA,aAAA,eAAA,oDAAA;cAEW,0CAA0B,0BAAA,oBAAA,4BAAA;;8BAOrC,qCAAA,iDAAA,aAAA,eAAA,oDAAA;;cAGW,4CAA4B,0BAAA,oBAAA,4BAAA;;8BAOvC,qCAAA,iDAAA,aAAA,eAAA,oDAAA;;cAGW,yCAAyB,0BAAA,oBAAA,4BAAA;;8BAOpC,qCAAA,iDAAA,aAAA,eAAA,oDAAA;;cAGW,uCAAuB,0BAAA,oBAAA,4BAAA;;8BAOlC,qCAAA,iDAAA,aAAA,eAAA,oDAAA;cAEW,sCAAsB,0BAAA,oBAAA,4BAAA;;8BAMjC,qCAAA,iDAAA,aAAA,eAAA,oDAAA;cAEW,kCAAkB,0BAAA,oBAAA,4BAAA;;8BAM7B,qCAAA,iDAAA,aAAA,eAAA,oDAAA"}
|
|
@@ -6,6 +6,7 @@ import { useScrollbars } from "../../runtime/use-scrollbars.js";
|
|
|
6
6
|
import { provideContextMenu, provideContextMenuGroup, provideContextMenuItem, provideContextMenuSub, useContextMenuContext, useContextMenuGroupContext, useContextMenuItemContext, useContextMenuSubContext } from "./context.js";
|
|
7
7
|
import { provideMenu, useMenuContext } from "../menu/context.js";
|
|
8
8
|
import { useMenuWithParent } from "../menu/use-menu.js";
|
|
9
|
+
import { MenuDefaultNodes, XhMenuContent, XhMenuPositioner } from "../menu/menu.js";
|
|
9
10
|
import { useContextMenu } from "./use-context-menu.js";
|
|
10
11
|
import { computed, defineComponent, h, mergeProps, onBeforeUnmount, ref, watch } from "vue";
|
|
11
12
|
import { groupAdjacentRuns, mergeProps as mergeProps$1 } from "@xihan-ui/core";
|
|
@@ -124,7 +125,8 @@ container: { type: Object } },
|
|
|
124
125
|
});
|
|
125
126
|
return () => h(XhPortal, {
|
|
126
127
|
to: props.container ?? ctx.portalTarget.value,
|
|
127
|
-
source: ctx.triggerRef
|
|
128
|
+
source: ctx.triggerRef,
|
|
129
|
+
present: ctx.visible.value
|
|
128
130
|
}, () => [h("div", {
|
|
129
131
|
...mergeProps(ctx.api.value.getPositionerProps(), attrs),
|
|
130
132
|
ref: (el) => {
|
|
@@ -262,6 +264,8 @@ const XhContextMenuSub = defineComponent({
|
|
|
262
264
|
type: Boolean,
|
|
263
265
|
default: void 0
|
|
264
266
|
},
|
|
267
|
+
/** 子层的条目数据:显示文本与禁用的事实源,按数据铺子层时由默认树代填。 */
|
|
268
|
+
collection: { type: Array },
|
|
265
269
|
placement: { type: String },
|
|
266
270
|
offset: { type: Number },
|
|
267
271
|
loop: {
|
|
@@ -410,6 +414,12 @@ function renderNodes(collection, itemSlots) {
|
|
|
410
414
|
* 行首那一格与数据里的 `indicator` 同一个部件,插槽在场时以它为准。
|
|
411
415
|
*/
|
|
412
416
|
function renderItem(meta, itemSlots) {
|
|
417
|
+
if (meta.children) return h(XhContextMenuSub, {
|
|
418
|
+
key: meta.value,
|
|
419
|
+
value: meta.value,
|
|
420
|
+
disabled: meta.disabled || void 0,
|
|
421
|
+
collection: meta.children
|
|
422
|
+
}, () => [h(XhContextMenuSubTrigger, null, () => [meta.label]), h(XhMenuPositioner, null, () => [h(XhMenuContent, null, () => [h(MenuDefaultNodes)])])]);
|
|
413
423
|
const prefix = itemSlots["item-prefix"];
|
|
414
424
|
const suffix = itemSlots["item-suffix"];
|
|
415
425
|
return h(meta.kind === "checkbox" ? XhContextMenuCheckboxItem : meta.kind === "radio" ? XhContextMenuRadioItem : XhContextMenuItem, {
|