@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 +1 @@
|
|
|
1
|
-
{"version":3,"file":"popconfirm.js","names":[],"sources":["../../../src/components/popconfirm/popconfirm.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// 提供 popconfirm 相关实现。\n\nimport type { Placement, Size } from '@xihan-ui/core'\nimport type { PopconfirmApi, PopconfirmConfirmErrorDetails, PopconfirmNotifiers, PopconfirmOverlayProps, PopconfirmProps } from '@xihan-ui/headless'\nimport type { PropType, SlotsType, VNode } from 'vue'\nimport type { PayloadOf } from '../../runtime/payload'\nimport { defineComponent, h, mergeProps } from 'vue'\nimport { mergeIntoChild } from '../../runtime/as-child'\nimport { mergePartProps } from '../../runtime/merge-props'\nimport { XhPortal } from '../../runtime/portal'\nimport { useScrollbars } from '../../runtime/use-scrollbars'\nimport { providePopconfirm, usePopconfirmContext } from './context'\nimport { usePopconfirm } from './use-popconfirm'\n\n/** 默认插槽的载荷:开合、确认事务状态与三个动作。 */\nexport type PopconfirmRootSlotProps = Pick<\n PopconfirmApi,\n 'open' | 'pending' | 'actionError' | 'setOpen' | 'confirm' | 'cancel'\n>\n\nexport const XhPopconfirmRoot = defineComponent({\n name: 'XhPopconfirmRoot',\n props: {\n open: { type: Boolean, default: undefined },\n defaultOpen: Boolean,\n placement: { type: String as PropType<Placement> },\n offset: { type: Number },\n closeOnEscape: { type: Boolean, default: true },\n closeOnInteractOutside: { type: Boolean, default: true },\n size: { type: String as PropType<Size> },\n /**\n * 确认回调使用函数 prop 而非 emit:emit 无法获取监听函数的返回值,而异步门正需要它:\n * 返回 thenable 即挂起(浮层等待兑现后再收起、确认按钮显示加载),拒绝则保持打开并触发 confirm-error。\n * 模板中照常写 @confirm,Vue 会把它落到该 prop 上。\n */\n onConfirm: { type: Function as PropType<PopconfirmNotifiers['onConfirm']> },\n },\n // open-change 携带 { open },update:open 携带裸布尔;cancel 不带载荷\n emits: {\n 'open-change': (_details: PayloadOf<PopconfirmProps, 'onOpenChange'>) => true,\n 'update:open': (_open: PayloadOf<PopconfirmProps, 'onOpenChange'>['open']) => true,\n 'confirm-error': (_details: PopconfirmConfirmErrorDetails) => true,\n 'cancel': () => true,\n },\n slots: Object as SlotsType<{\n default?: (props: PopconfirmRootSlotProps) => VNode[]\n }>,\n setup(props, { slots, emit }) {\n const notify: PopconfirmNotifiers = {\n onOpenChange: (details) => {\n emit('open-change', details)\n emit('update:open', details.open)\n },\n onConfirm: () => props.onConfirm?.(),\n onConfirmError: details => emit('confirm-error', details),\n onCancel: () => { emit('cancel') },\n }\n const ctx = usePopconfirm(props as PopconfirmOverlayProps, notify)\n providePopconfirm(ctx)\n return () => h('div', ctx.api.value.getRootProps() as Record<string, unknown>, slots.default?.({\n open: ctx.api.value.open,\n pending: ctx.api.value.pending,\n actionError: ctx.api.value.actionError,\n setOpen: ctx.api.value.setOpen,\n confirm: ctx.api.value.confirm,\n cancel: ctx.api.value.cancel,\n }))\n },\n})\n\nexport const XhPopconfirmTrigger = defineComponent({\n name: 'XhPopconfirmTrigger',\n // 直通属性自己合:Vue 默认把作者的处理器排在部件的后面,这里改成作者先跑\n inheritAttrs: false,\n props: {\n /** 借用作者的子节点作为触发器,不再渲染自己的包裹元素;子节点须恰好一个。 */\n asChild: Boolean,\n },\n setup(props, { slots, attrs }) {\n const ctx = usePopconfirmContext()\n return () => {\n const part = mergePartProps({\n ...ctx.api.value.getTriggerProps() as Record<string, unknown>,\n ref: (el: unknown) => { ctx.triggerRef.value = el as HTMLElement },\n }, attrs)\n const children = slots.default?.()\n // asChild:把触发器属性合到作者的节点上,不再自己渲染包裹元素\n if (props.asChild) {\n const merged = mergeIntoChild(children, part, 'popconfirm')\n if (merged)\n return merged\n }\n return h('button', part, children)\n }\n },\n})\n\nexport const XhPopconfirmPositioner = defineComponent({\n name: 'XhPopconfirmPositioner',\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 = usePopconfirmContext()\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.triggerRef }, () => [\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 XhPopconfirmContent = defineComponent({\n name: 'XhPopconfirmContent',\n setup(_, { slots }) {\n const ctx = usePopconfirmContext()\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 XhPopconfirmTitle = defineComponent({\n name: 'XhPopconfirmTitle',\n setup(_, { slots }) {\n const ctx = usePopconfirmContext()\n return () => h('h2', ctx.api.value.getTitleProps() as Record<string, unknown>, slots.default?.())\n },\n})\n\nexport const XhPopconfirmDescription = defineComponent({\n name: 'XhPopconfirmDescription',\n setup(_, { slots }) {\n const ctx = usePopconfirmContext()\n return () => h('p', ctx.api.value.getDescriptionProps() as Record<string, unknown>, slots.default?.())\n },\n})\n\nexport const XhPopconfirmConfirmTrigger = defineComponent({\n name: 'XhPopconfirmConfirmTrigger',\n setup(_, { slots }) {\n const ctx = usePopconfirmContext()\n return () => h('button', ctx.api.value.getConfirmTriggerProps() as Record<string, unknown>, slots.default?.())\n },\n})\n\nexport const XhPopconfirmCancelTrigger = defineComponent({\n name: 'XhPopconfirmCancelTrigger',\n setup(_, { slots }) {\n const ctx = usePopconfirmContext()\n return () => h('button', ctx.api.value.getCancelTriggerProps() as Record<string, unknown>, slots.default?.())\n },\n})\n\nexport const XhPopconfirmArrow = defineComponent({\n name: 'XhPopconfirmArrow',\n setup() {\n const ctx = usePopconfirmContext()\n return () => h('div', ctx.api.value.getArrowProps() as Record<string, unknown>)\n },\n})\n"],"mappings":";;;;;;;;AAyBA,MAAa,mBAAmB,gBAAgB;CAC9C,MAAM;CACN,OAAO;EACL,MAAM;GAAE,MAAM;GAAS,SAAS,KAAA;EAAU;EAC1C,aAAa;EACb,WAAW,EAAE,MAAM,OAA8B;EACjD,QAAQ,EAAE,MAAM,OAAO;EACvB,eAAe;GAAE,MAAM;GAAS,SAAS;EAAK;EAC9C,wBAAwB;GAAE,MAAM;GAAS,SAAS;EAAK;EACvD,MAAM,EAAE,MAAM,OAAyB;;;;;;EAMvC,WAAW,EAAE,MAAM,SAAuD;CAC5E;CAEA,OAAO;EACL,gBAAgB,aAAyD;EACzE,gBAAgB,UAA8D;EAC9E,kBAAkB,aAA4C;EAC9D,gBAAgB;CAClB;CACA,OAAO;CAGP,MAAM,OAAO,EAAE,OAAO,QAAQ;EAU5B,MAAM,MAAM,cAAc,OAAiC;GARzD,eAAe,YAAY;IACzB,KAAK,eAAe,OAAO;IAC3B,KAAK,eAAe,QAAQ,IAAI;GAClC;GACA,iBAAiB,MAAM,YAAY;GACnC,iBAAgB,YAAW,KAAK,iBAAiB,OAAO;GACxD,gBAAgB;IAAE,KAAK,QAAQ;GAAE;EAE6B,CAAC;EACjE,kBAAkB,GAAG;EACrB,aAAa,EAAE,OAAO,IAAI,IAAI,MAAM,aAAa,GAA8B,MAAM,UAAU;GAC7F,MAAM,IAAI,IAAI,MAAM;GACpB,SAAS,IAAI,IAAI,MAAM;GACvB,aAAa,IAAI,IAAI,MAAM;GAC3B,SAAS,IAAI,IAAI,MAAM;GACvB,SAAS,IAAI,IAAI,MAAM;GACvB,QAAQ,IAAI,IAAI,MAAM;EACxB,CAAC,CAAC;CACJ;AACF,CAAC;AAED,MAAa,sBAAsB,gBAAgB;CACjD,MAAM;CAEN,cAAc;CACd,OAAO;;AAEL,SAAS,QACX;CACA,MAAM,OAAO,EAAE,OAAO,SAAS;EAC7B,MAAM,MAAM,qBAAqB;EACjC,aAAa;GACX,MAAM,OAAO,eAAe;IAC1B,GAAG,IAAI,IAAI,MAAM,gBAAgB;IACjC,MAAM,OAAgB;KAAE,IAAI,WAAW,QAAQ;IAAkB;GACnE,GAAG,KAAK;GACR,MAAM,WAAW,MAAM,UAAU;GAEjC,IAAI,MAAM,SAAS;IACjB,MAAM,SAAS,eAAe,UAAU,MAAM,YAAY;IAC1D,IAAI,QACF,OAAO;GACX;GACA,OAAO,EAAE,UAAU,MAAM,QAAQ;EACnC;CACF;AACF,CAAC;AAED,MAAa,yBAAyB,gBAAgB;CACpD,MAAM;CACN,OAAO;;AAEL,WAAW,EAAE,MAAM,OAA4B,EACjD;CAEA,cAAc;CACd,MAAM,OAAO,EAAE,OAAO,SAAS;EAC7B,MAAM,MAAM,qBAAqB;EAEjC,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;EAAW,SAAS,CACxG,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,sBAAsB,gBAAgB;CACjD,MAAM;CACN,MAAM,GAAG,EAAE,SAAS;EAClB,MAAM,MAAM,qBAAqB;EACjC,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,oBAAoB,gBAAgB;CAC/C,MAAM;CACN,MAAM,GAAG,EAAE,SAAS;EAClB,MAAM,MAAM,qBAAqB;EACjC,aAAa,EAAE,MAAM,IAAI,IAAI,MAAM,cAAc,GAA8B,MAAM,UAAU,CAAC;CAClG;AACF,CAAC;AAED,MAAa,0BAA0B,gBAAgB;CACrD,MAAM;CACN,MAAM,GAAG,EAAE,SAAS;EAClB,MAAM,MAAM,qBAAqB;EACjC,aAAa,EAAE,KAAK,IAAI,IAAI,MAAM,oBAAoB,GAA8B,MAAM,UAAU,CAAC;CACvG;AACF,CAAC;AAED,MAAa,6BAA6B,gBAAgB;CACxD,MAAM;CACN,MAAM,GAAG,EAAE,SAAS;EAClB,MAAM,MAAM,qBAAqB;EACjC,aAAa,EAAE,UAAU,IAAI,IAAI,MAAM,uBAAuB,GAA8B,MAAM,UAAU,CAAC;CAC/G;AACF,CAAC;AAED,MAAa,4BAA4B,gBAAgB;CACvD,MAAM;CACN,MAAM,GAAG,EAAE,SAAS;EAClB,MAAM,MAAM,qBAAqB;EACjC,aAAa,EAAE,UAAU,IAAI,IAAI,MAAM,sBAAsB,GAA8B,MAAM,UAAU,CAAC;CAC9G;AACF,CAAC;AAED,MAAa,oBAAoB,gBAAgB;CAC/C,MAAM;CACN,QAAQ;EACN,MAAM,MAAM,qBAAqB;EACjC,aAAa,EAAE,OAAO,IAAI,IAAI,MAAM,cAAc,CAA4B;CAChF;AACF,CAAC"}
|
|
1
|
+
{"version":3,"file":"popconfirm.js","names":[],"sources":["../../../src/components/popconfirm/popconfirm.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// 提供 popconfirm 相关实现。\n\nimport type { Direction, Placement, Size } from '@xihan-ui/core'\nimport type { PopconfirmApi, PopconfirmConfirmErrorDetails, PopconfirmNotifiers, PopconfirmOverlayProps, PopconfirmProps } from '@xihan-ui/headless'\nimport type { PropType, SlotsType, VNode } from 'vue'\nimport type { PayloadOf } from '../../runtime/payload'\nimport { defineComponent, h, mergeProps } from 'vue'\nimport { mergeIntoChild } from '../../runtime/as-child'\nimport { mergePartProps } from '../../runtime/merge-props'\nimport { XhPortal } from '../../runtime/portal'\nimport { useScrollbars } from '../../runtime/use-scrollbars'\nimport { providePopconfirm, usePopconfirmContext } from './context'\nimport { usePopconfirm } from './use-popconfirm'\n\n/** 默认插槽的载荷:开合、确认事务状态与三个动作。 */\nexport type PopconfirmRootSlotProps = Pick<\n PopconfirmApi,\n 'open' | 'pending' | 'actionError' | 'setOpen' | 'confirm' | 'cancel'\n>\n\nexport const XhPopconfirmRoot = defineComponent({\n name: 'XhPopconfirmRoot',\n props: {\n open: { type: Boolean, default: undefined },\n defaultOpen: Boolean,\n placement: { type: String as PropType<Placement> },\n offset: { type: Number },\n /** 文字方向;浮层迁移到落点后无法继承作者子树上的方向,需要 RTL 时显式提供。 */\n dir: { type: String as PropType<Direction> },\n closeOnEscape: { type: Boolean, default: true },\n closeOnInteractOutside: { type: Boolean, default: true },\n /** 不可打开:触发器转原生 disabled,展开途中转为禁用即收起。 */\n disabled: { type: Boolean, default: undefined },\n size: { type: String as PropType<Size> },\n /**\n * 确认回调使用函数 prop 而非 emit:emit 无法获取监听函数的返回值,而异步门正需要它:\n * 返回 thenable 即挂起(浮层等待兑现后再收起、确认按钮显示加载),拒绝则保持打开并触发 confirm-error。\n * 模板中照常写 @confirm,Vue 会把它落到该 prop 上。\n */\n onConfirm: { type: Function as PropType<PopconfirmNotifiers['onConfirm']> },\n },\n // open-change 携带 { open },update:open 携带裸布尔;cancel 不带载荷\n emits: {\n 'open-change': (_details: PayloadOf<PopconfirmProps, 'onOpenChange'>) => true,\n 'update:open': (_open: PayloadOf<PopconfirmProps, 'onOpenChange'>['open']) => true,\n 'confirm-error': (_details: PopconfirmConfirmErrorDetails) => true,\n 'cancel': () => true,\n },\n slots: Object as SlotsType<{\n default?: (props: PopconfirmRootSlotProps) => VNode[]\n }>,\n setup(props, { slots, emit }) {\n const notify: PopconfirmNotifiers = {\n onOpenChange: (details) => {\n emit('open-change', details)\n emit('update:open', details.open)\n },\n onConfirm: () => props.onConfirm?.(),\n onConfirmError: details => emit('confirm-error', details),\n onCancel: () => { emit('cancel') },\n }\n const ctx = usePopconfirm(props as PopconfirmOverlayProps, notify)\n providePopconfirm(ctx)\n return () => h('div', ctx.api.value.getRootProps() as Record<string, unknown>, slots.default?.({\n open: ctx.api.value.open,\n pending: ctx.api.value.pending,\n actionError: ctx.api.value.actionError,\n setOpen: ctx.api.value.setOpen,\n confirm: ctx.api.value.confirm,\n cancel: ctx.api.value.cancel,\n }))\n },\n})\n\nexport const XhPopconfirmTrigger = defineComponent({\n name: 'XhPopconfirmTrigger',\n // 直通属性自己合:Vue 默认把作者的处理器排在部件的后面,这里改成作者先跑\n inheritAttrs: false,\n props: {\n /** 借用作者的子节点作为触发器,不再渲染自己的包裹元素;子节点须恰好一个。 */\n asChild: Boolean,\n },\n setup(props, { slots, attrs }) {\n const ctx = usePopconfirmContext()\n return () => {\n const part = mergePartProps({\n ...ctx.api.value.getTriggerProps() as Record<string, unknown>,\n ref: (el: unknown) => { ctx.triggerRef.value = el as HTMLElement },\n }, attrs)\n const children = slots.default?.()\n // asChild:把触发器属性合到作者的节点上,不再自己渲染包裹元素\n if (props.asChild) {\n const merged = mergeIntoChild(children, part, 'popconfirm')\n if (merged)\n return merged\n }\n return h('button', part, children)\n }\n },\n})\n\nexport const XhPopconfirmPositioner = defineComponent({\n name: 'XhPopconfirmPositioner',\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 = usePopconfirmContext()\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.triggerRef, 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 XhPopconfirmContent = defineComponent({\n name: 'XhPopconfirmContent',\n setup(_, { slots }) {\n const ctx = usePopconfirmContext()\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 XhPopconfirmTitle = defineComponent({\n name: 'XhPopconfirmTitle',\n setup(_, { slots }) {\n const ctx = usePopconfirmContext()\n return () => h('h2', ctx.api.value.getTitleProps() as Record<string, unknown>, slots.default?.())\n },\n})\n\nexport const XhPopconfirmDescription = defineComponent({\n name: 'XhPopconfirmDescription',\n setup(_, { slots }) {\n const ctx = usePopconfirmContext()\n return () => h('p', ctx.api.value.getDescriptionProps() as Record<string, unknown>, slots.default?.())\n },\n})\n\nexport const XhPopconfirmConfirmTrigger = defineComponent({\n name: 'XhPopconfirmConfirmTrigger',\n setup(_, { slots }) {\n const ctx = usePopconfirmContext()\n return () => h('button', ctx.api.value.getConfirmTriggerProps() as Record<string, unknown>, slots.default?.())\n },\n})\n\nexport const XhPopconfirmCancelTrigger = defineComponent({\n name: 'XhPopconfirmCancelTrigger',\n setup(_, { slots }) {\n const ctx = usePopconfirmContext()\n return () => h('button', ctx.api.value.getCancelTriggerProps() as Record<string, unknown>, slots.default?.())\n },\n})\n\nexport const XhPopconfirmArrow = defineComponent({\n name: 'XhPopconfirmArrow',\n setup() {\n const ctx = usePopconfirmContext()\n return () => h('div', ctx.api.value.getArrowProps() as Record<string, unknown>)\n },\n})\n"],"mappings":"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"}
|
|
@@ -22,6 +22,8 @@ function usePopconfirm(props, notify) {
|
|
|
22
22
|
defaultOpen: props.defaultOpen,
|
|
23
23
|
placement: props.placement,
|
|
24
24
|
offset: props.offset,
|
|
25
|
+
dir: props.dir,
|
|
26
|
+
disabled: props.disabled,
|
|
25
27
|
closeOnEscape: pending.value ? false : props.closeOnEscape,
|
|
26
28
|
closeOnInteractOutside: pending.value ? false : props.closeOnInteractOutside,
|
|
27
29
|
size: props.size,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"use-popconfirm.js","names":[],"sources":["../../../src/components/popconfirm/use-popconfirm.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 popconfirm 相关实现。\n\nimport type { Cleanup, Layer, RuntimeConfig, Service } from '@xihan-ui/core'\nimport type { PopconfirmApi, PopconfirmConfirmErrorDetails, PopconfirmIntents, PopconfirmNotifiers, PopconfirmOverlayProps, PopoverSchema } from '@xihan-ui/headless'\nimport type { ComputedRef, Ref } from 'vue'\nimport { createRuntimeConfig, createScope } from '@xihan-ui/core'\nimport { connectPopconfirm, popoverMachine } from '@xihan-ui/headless'\nimport { createPositionEngine } from '@xihan-ui/position'\nimport { computed, ref } from 'vue'\nimport { useXhConfig } from '../../config/config'\nimport { vueNormalize } from '../../runtime/normalize-props'\nimport { useMachine } from '../../runtime/use-machine'\nimport { useOverlayExit } from '../../runtime/use-overlay-exit'\nimport { createVueIdGenerator } from '../../runtime/vue-id'\n\nexport interface PopconfirmContext {\n service: Service<PopoverSchema>\n api: ComputedRef<PopconfirmApi>\n triggerRef: Ref<HTMLElement | null>\n positionerRef: Ref<HTMLElement | null>\n contentRef: Ref<HTMLElement | null>\n /** 当前是否应当渲染:退场动画播完之前仍为真。 */\n visible: Ref<boolean>\n /** 浮层迁移到的位置:全局配置的容器 > 运行时的浮层落点 > body。 */\n portalTarget: ComputedRef<string | Element>\n}\n\nexport function usePopconfirm(\n props: PopconfirmOverlayProps,\n notify?: PopconfirmNotifiers,\n): PopconfirmContext {\n const xhConfig = useXhConfig()\n const triggerRef = ref<HTMLElement | null>(null)\n const positionerRef = ref<HTMLElement | null>(null)\n const contentRef = ref<HTMLElement | null>(null)\n\n const idGen = createVueIdGenerator()\n const scope = createScope(null, idGen)\n // ref 同步写入:thenable 被识别的同一拍里,机器就要开始拒绝 Escape 与层外交互关闭。\n const pending = ref(false)\n const actionError = ref<PopconfirmConfirmErrorDetails | null>(null)\n\n // 开合、定位、消解层与焦点域全交给 popover 机器;气泡确认只多出确认/取消两个意图,\n // 它们不改开合以外的状态,走 connect 不进机器。\n // modal 与 translations 不往下传:不陷焦点,按钮文案由作者写在节点里。\n const service = useMachine(popoverMachine, (): PopoverSchema['props'] => ({\n open: props.open,\n defaultOpen: props.defaultOpen,\n placement: props.placement,\n offset: props.offset,\n closeOnEscape: pending.value ? false : props.closeOnEscape,\n closeOnInteractOutside: pending.value ? false : props.closeOnInteractOutside,\n size: props.size,\n onOpenChange: notify?.onOpenChange,\n }), scope)\n\n // 服务端没有 DOM、也就没有退场:config 传 null 时闸门退化成「跟着展开态」\n let config: RuntimeConfig | null = null\n\n if (typeof document !== 'undefined') {\n config = createRuntimeConfig({ scope, idGenerator: idGen })\n\n // 只提供注册函数,入栈出栈由机器的 trackLayer 效应按展开态驱动\n const registerLayer = (): { layer: Layer, dispose: Cleanup } => config!.layerRegistry.register({\n kind: 'popover',\n node: () => contentRef.value,\n // trigger 记为本层分支,点它算层内交互;浮层壳一并记上:面板之外还浮着自绘滚动条,\n // 按住它拖动不该把面板消解掉\n branches: () => [triggerRef.value, positionerRef.value].filter(Boolean) as Element[],\n isModal: () => false,\n surfaces: () => [],\n })\n\n // 定位引擎由适配器注入,机器只经端口驱动\n service.refs.set('config', config!)\n service.refs.set('registerLayer', registerLayer)\n service.refs.set('position', createPositionEngine())\n service.refs.set('getAnchorEl', () => triggerRef.value)\n service.refs.set('getFloatingEl', () => positionerRef.value)\n service.refs.set('getContentEl', () => contentRef.value)\n }\n\n // 每次点击现读 notify,宿主换回调也立刻生效;onConfirm 的返回值原样透传,异步门靠它\n const intents: PopconfirmIntents = {\n onConfirm: () => notify?.onConfirm?.(),\n onConfirmError: details => notify?.onConfirmError?.(details),\n onCancel: () => { notify?.onCancel?.() },\n get pending() {\n return pending.value\n },\n onPendingChange: (next) => {\n pending.value = next\n },\n get actionError() {\n return actionError.value\n },\n onActionErrorChange: (next) => {\n actionError.value = next\n },\n }\n\n const api = computed(() => connectPopconfirm(service, intents, vueNormalize))\n // 退场闸门:收起从跟着 open 走,改成跟着 presence 走\n const visible = useOverlayExit({\n config,\n isOpen: () => api.value.open,\n contentRef,\n onPresence: presence => service.refs.set('presence', presence),\n })\n // 全局配置写了容器就用它,否则落到运行时那个单一浮层落点;没有 DOM 时才回到 body\n const portalTarget = computed<string | Element>(() => xhConfig.value.portalContainer?.() ?? config?.portalContainer() ?? 'body')\n\n return { visible, service, api, triggerRef, positionerRef, contentRef, portalTarget }\n}\n"],"mappings":";;;;;;;;;;AAgCA,SAAgB,cACd,OACA,QACmB;CACnB,MAAM,WAAW,YAAY;CAC7B,MAAM,aAAa,IAAwB,IAAI;CAC/C,MAAM,gBAAgB,IAAwB,IAAI;CAClD,MAAM,aAAa,IAAwB,IAAI;CAE/C,MAAM,QAAQ,qBAAqB;CACnC,MAAM,QAAQ,YAAY,MAAM,KAAK;CAErC,MAAM,UAAU,IAAI,KAAK;CACzB,MAAM,cAAc,IAA0C,IAAI;CAKlE,MAAM,UAAU,WAAW,uBAA+C;EACxE,MAAM,MAAM;EACZ,aAAa,MAAM;EACnB,WAAW,MAAM;EACjB,QAAQ,MAAM;EACd,eAAe,QAAQ,QAAQ,QAAQ,MAAM;EAC7C,wBAAwB,QAAQ,QAAQ,QAAQ,MAAM;EACtD,MAAM,MAAM;EACZ,cAAc,QAAQ;CACxB,IAAI,KAAK;CAGT,IAAI,SAA+B;CAEnC,IAAI,OAAO,aAAa,aAAa;EACnC,SAAS,oBAAoB;GAAE;GAAO,aAAa;EAAM,CAAC;EAG1D,MAAM,sBAA0D,OAAQ,cAAc,SAAS;GAC7F,MAAM;GACN,YAAY,WAAW;GAGvB,gBAAgB,CAAC,WAAW,OAAO,cAAc,KAAK,CAAC,CAAC,OAAO,OAAO;GACtE,eAAe;GACf,gBAAgB,CAAC;EACnB,CAAC;EAGD,QAAQ,KAAK,IAAI,UAAU,MAAO;EAClC,QAAQ,KAAK,IAAI,iBAAiB,aAAa;EAC/C,QAAQ,KAAK,IAAI,YAAY,qBAAqB,CAAC;EACnD,QAAQ,KAAK,IAAI,qBAAqB,WAAW,KAAK;EACtD,QAAQ,KAAK,IAAI,uBAAuB,cAAc,KAAK;EAC3D,QAAQ,KAAK,IAAI,sBAAsB,WAAW,KAAK;CACzD;CAGA,MAAM,UAA6B;EACjC,iBAAiB,QAAQ,YAAY;EACrC,iBAAgB,YAAW,QAAQ,iBAAiB,OAAO;EAC3D,gBAAgB;GAAE,QAAQ,WAAW;EAAE;EACvC,IAAI,UAAU;GACZ,OAAO,QAAQ;EACjB;EACA,kBAAkB,SAAS;GACzB,QAAQ,QAAQ;EAClB;EACA,IAAI,cAAc;GAChB,OAAO,YAAY;EACrB;EACA,sBAAsB,SAAS;GAC7B,YAAY,QAAQ;EACtB;CACF;CAEA,MAAM,MAAM,eAAe,kBAAkB,SAAS,SAAS,YAAY,CAAC;CAW5E,OAAO;EAAE,SATO,eAAe;GAC7B;GACA,cAAc,IAAI,MAAM;GACxB;GACA,aAAY,aAAY,QAAQ,KAAK,IAAI,YAAY,QAAQ;EAC/D,CAIe;EAAG;EAAS;EAAK;EAAY;EAAe;EAAY,cAFlD,eAAiC,SAAS,MAAM,kBAAkB,KAAK,QAAQ,gBAAgB,KAAK,MAEvC;CAAE;AACtF"}
|
|
1
|
+
{"version":3,"file":"use-popconfirm.js","names":[],"sources":["../../../src/components/popconfirm/use-popconfirm.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 popconfirm 相关实现。\n\nimport type { Cleanup, Layer, RuntimeConfig, Service } from '@xihan-ui/core'\nimport type { PopconfirmApi, PopconfirmConfirmErrorDetails, PopconfirmIntents, PopconfirmNotifiers, PopconfirmOverlayProps, PopoverSchema } from '@xihan-ui/headless'\nimport type { ComputedRef, Ref } from 'vue'\nimport { createRuntimeConfig, createScope } from '@xihan-ui/core'\nimport { connectPopconfirm, popoverMachine } from '@xihan-ui/headless'\nimport { createPositionEngine } from '@xihan-ui/position'\nimport { computed, ref } from 'vue'\nimport { useXhConfig } from '../../config/config'\nimport { vueNormalize } from '../../runtime/normalize-props'\nimport { useMachine } from '../../runtime/use-machine'\nimport { useOverlayExit } from '../../runtime/use-overlay-exit'\nimport { createVueIdGenerator } from '../../runtime/vue-id'\n\nexport interface PopconfirmContext {\n service: Service<PopoverSchema>\n api: ComputedRef<PopconfirmApi>\n triggerRef: Ref<HTMLElement | null>\n positionerRef: Ref<HTMLElement | null>\n contentRef: Ref<HTMLElement | null>\n /** 当前是否应当渲染:退场动画播完之前仍为真。 */\n visible: Ref<boolean>\n /** 浮层迁移到的位置:全局配置的容器 > 运行时的浮层落点 > body。 */\n portalTarget: ComputedRef<string | Element>\n}\n\nexport function usePopconfirm(\n props: PopconfirmOverlayProps,\n notify?: PopconfirmNotifiers,\n): PopconfirmContext {\n const xhConfig = useXhConfig()\n const triggerRef = ref<HTMLElement | null>(null)\n const positionerRef = ref<HTMLElement | null>(null)\n const contentRef = ref<HTMLElement | null>(null)\n\n const idGen = createVueIdGenerator()\n const scope = createScope(null, idGen)\n // ref 同步写入:thenable 被识别的同一拍里,机器就要开始拒绝 Escape 与层外交互关闭。\n const pending = ref(false)\n const actionError = ref<PopconfirmConfirmErrorDetails | null>(null)\n\n // 开合、定位、消解层与焦点域全交给 popover 机器;气泡确认只多出确认/取消两个意图,\n // 它们不改开合以外的状态,走 connect 不进机器。\n // modal 与 translations 不往下传:不陷焦点,按钮文案由作者写在节点里。\n const service = useMachine(popoverMachine, (): PopoverSchema['props'] => ({\n open: props.open,\n defaultOpen: props.defaultOpen,\n placement: props.placement,\n offset: props.offset,\n dir: props.dir,\n disabled: props.disabled,\n closeOnEscape: pending.value ? false : props.closeOnEscape,\n closeOnInteractOutside: pending.value ? false : props.closeOnInteractOutside,\n size: props.size,\n onOpenChange: notify?.onOpenChange,\n }), scope)\n\n // 服务端没有 DOM、也就没有退场:config 传 null 时闸门退化成「跟着展开态」\n let config: RuntimeConfig | null = null\n\n if (typeof document !== 'undefined') {\n config = createRuntimeConfig({ scope, idGenerator: idGen })\n\n // 只提供注册函数,入栈出栈由机器的 trackLayer 效应按展开态驱动\n const registerLayer = (): { layer: Layer, dispose: Cleanup } => config!.layerRegistry.register({\n kind: 'popover',\n node: () => contentRef.value,\n // trigger 记为本层分支,点它算层内交互;浮层壳一并记上:面板之外还浮着自绘滚动条,\n // 按住它拖动不该把面板消解掉\n branches: () => [triggerRef.value, positionerRef.value].filter(Boolean) as Element[],\n isModal: () => false,\n surfaces: () => [],\n })\n\n // 定位引擎由适配器注入,机器只经端口驱动\n service.refs.set('config', config!)\n service.refs.set('registerLayer', registerLayer)\n service.refs.set('position', createPositionEngine())\n service.refs.set('getAnchorEl', () => triggerRef.value)\n service.refs.set('getFloatingEl', () => positionerRef.value)\n service.refs.set('getContentEl', () => contentRef.value)\n }\n\n // 每次点击现读 notify,宿主换回调也立刻生效;onConfirm 的返回值原样透传,异步门靠它\n const intents: PopconfirmIntents = {\n onConfirm: () => notify?.onConfirm?.(),\n onConfirmError: details => notify?.onConfirmError?.(details),\n onCancel: () => { notify?.onCancel?.() },\n get pending() {\n return pending.value\n },\n onPendingChange: (next) => {\n pending.value = next\n },\n get actionError() {\n return actionError.value\n },\n onActionErrorChange: (next) => {\n actionError.value = next\n },\n }\n\n const api = computed(() => connectPopconfirm(service, intents, vueNormalize))\n // 退场闸门:收起从跟着 open 走,改成跟着 presence 走\n const visible = useOverlayExit({\n config,\n isOpen: () => api.value.open,\n contentRef,\n onPresence: presence => service.refs.set('presence', presence),\n })\n // 全局配置写了容器就用它,否则落到运行时那个单一浮层落点;没有 DOM 时才回到 body\n const portalTarget = computed<string | Element>(() => xhConfig.value.portalContainer?.() ?? config?.portalContainer() ?? 'body')\n\n return { visible, service, api, triggerRef, positionerRef, contentRef, portalTarget }\n}\n"],"mappings":";;;;;;;;;;AAgCA,SAAgB,cACd,OACA,QACmB;CACnB,MAAM,WAAW,YAAY;CAC7B,MAAM,aAAa,IAAwB,IAAI;CAC/C,MAAM,gBAAgB,IAAwB,IAAI;CAClD,MAAM,aAAa,IAAwB,IAAI;CAE/C,MAAM,QAAQ,qBAAqB;CACnC,MAAM,QAAQ,YAAY,MAAM,KAAK;CAErC,MAAM,UAAU,IAAI,KAAK;CACzB,MAAM,cAAc,IAA0C,IAAI;CAKlE,MAAM,UAAU,WAAW,uBAA+C;EACxE,MAAM,MAAM;EACZ,aAAa,MAAM;EACnB,WAAW,MAAM;EACjB,QAAQ,MAAM;EACd,KAAK,MAAM;EACX,UAAU,MAAM;EAChB,eAAe,QAAQ,QAAQ,QAAQ,MAAM;EAC7C,wBAAwB,QAAQ,QAAQ,QAAQ,MAAM;EACtD,MAAM,MAAM;EACZ,cAAc,QAAQ;CACxB,IAAI,KAAK;CAGT,IAAI,SAA+B;CAEnC,IAAI,OAAO,aAAa,aAAa;EACnC,SAAS,oBAAoB;GAAE;GAAO,aAAa;EAAM,CAAC;EAG1D,MAAM,sBAA0D,OAAQ,cAAc,SAAS;GAC7F,MAAM;GACN,YAAY,WAAW;GAGvB,gBAAgB,CAAC,WAAW,OAAO,cAAc,KAAK,CAAC,CAAC,OAAO,OAAO;GACtE,eAAe;GACf,gBAAgB,CAAC;EACnB,CAAC;EAGD,QAAQ,KAAK,IAAI,UAAU,MAAO;EAClC,QAAQ,KAAK,IAAI,iBAAiB,aAAa;EAC/C,QAAQ,KAAK,IAAI,YAAY,qBAAqB,CAAC;EACnD,QAAQ,KAAK,IAAI,qBAAqB,WAAW,KAAK;EACtD,QAAQ,KAAK,IAAI,uBAAuB,cAAc,KAAK;EAC3D,QAAQ,KAAK,IAAI,sBAAsB,WAAW,KAAK;CACzD;CAGA,MAAM,UAA6B;EACjC,iBAAiB,QAAQ,YAAY;EACrC,iBAAgB,YAAW,QAAQ,iBAAiB,OAAO;EAC3D,gBAAgB;GAAE,QAAQ,WAAW;EAAE;EACvC,IAAI,UAAU;GACZ,OAAO,QAAQ;EACjB;EACA,kBAAkB,SAAS;GACzB,QAAQ,QAAQ;EAClB;EACA,IAAI,cAAc;GAChB,OAAO,YAAY;EACrB;EACA,sBAAsB,SAAS;GAC7B,YAAY,QAAQ;EACtB;CACF;CAEA,MAAM,MAAM,eAAe,kBAAkB,SAAS,SAAS,YAAY,CAAC;CAW5E,OAAO;EAAE,SATO,eAAe;GAC7B;GACA,cAAc,IAAI,MAAM;GACxB;GACA,aAAY,aAAY,QAAQ,KAAK,IAAI,YAAY,QAAQ;EAC/D,CAIe;EAAG;EAAS;EAAK;EAAY;EAAe;EAAY,cAFlD,eAAiC,SAAS,MAAM,kBAAkB,KAAK,QAAQ,gBAAgB,KAAK,MAEvC;CAAE;AACtF"}
|
|
@@ -96,9 +96,9 @@ declare const XhPopoverRoot: import("vue").DefineComponent<import("vue").Extract
|
|
|
96
96
|
disabled: boolean;
|
|
97
97
|
open: boolean;
|
|
98
98
|
defaultOpen: boolean;
|
|
99
|
-
modal: boolean;
|
|
100
99
|
closeOnEscape: boolean;
|
|
101
100
|
closeOnInteractOutside: boolean;
|
|
101
|
+
modal: boolean;
|
|
102
102
|
}, SlotsType<{
|
|
103
103
|
default?: (props: PopoverRootSlotProps) => VNode[];
|
|
104
104
|
}>, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
|
|
@@ -95,7 +95,8 @@ container: { type: Object } },
|
|
|
95
95
|
});
|
|
96
96
|
return () => h(XhPortal, {
|
|
97
97
|
to: props.container ?? ctx.portalTarget.value,
|
|
98
|
-
source: ctx.triggerRef
|
|
98
|
+
source: ctx.triggerRef,
|
|
99
|
+
present: ctx.visible.value
|
|
99
100
|
}, () => [h("div", {
|
|
100
101
|
...mergeProps(ctx.api.value.getPositionerProps(), attrs),
|
|
101
102
|
ref: (el) => {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"popover.js","names":[],"sources":["../../../src/components/popover/popover.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// 提供 popover 相关实现。\n\nimport type { Direction, Placement, Size } from '@xihan-ui/core'\nimport type { PopoverApi, PopoverSchema } from '@xihan-ui/headless'\nimport type { PropType, SlotsType, VNode } from 'vue'\nimport type { PayloadOf } from '../../runtime/payload'\nimport { defineComponent, h, mergeProps } from 'vue'\nimport { withXhConfig } from '../../config/config'\nimport { mergeIntoChild } from '../../runtime/as-child'\nimport { mergePartProps } from '../../runtime/merge-props'\nimport { XhPortal } from '../../runtime/portal'\nimport { useScrollbars } from '../../runtime/use-scrollbars'\nimport { providePopover, usePopoverContext } from './context'\nimport { usePopover } from './use-popover'\n\ntype PopoverProps = PopoverSchema['props']\n\n/** 默认插槽的载荷:浮层的展开态与开合命令。 */\nexport type PopoverRootSlotProps = Pick<PopoverApi, 'open' | 'setOpen'>\n\nexport const XhPopoverRoot = defineComponent({\n name: 'XhPopoverRoot',\n props: {\n open: { type: Boolean, default: undefined },\n defaultOpen: Boolean,\n placement: { type: String as PropType<Placement> },\n offset: { type: Number },\n /** 文字方向;浮层迁移到落点后无法继承作者子树上的方向,需要 RTL 时显式提供。 */\n dir: { type: String as PropType<Direction> },\n modal: { type: Boolean, default: false },\n closeOnEscape: { type: Boolean, default: true },\n closeOnInteractOutside: { type: Boolean, default: true },\n /** 浮层不可打开:触发器转原生 disabled。 */\n disabled: { type: Boolean, default: undefined },\n translations: { type: Object as PropType<PopoverProps['translations']> },\n size: { type: String as PropType<Size> },\n },\n // open-change 携带 { open },update:open 携带裸布尔\n emits: {\n 'open-change': (_details: PayloadOf<PopoverProps, 'onOpenChange'>) => true,\n 'update:open': (_open: PayloadOf<PopoverProps, 'onOpenChange'>['open']) => true,\n },\n slots: Object as SlotsType<{\n default?: (props: PopoverRootSlotProps) => VNode[]\n }>,\n setup(props, { slots, emit }) {\n const notify: PopoverProps['onOpenChange'] = (details) => {\n emit('open-change', details)\n emit('update:open', details.open)\n }\n const ctx = usePopover(withXhConfig('popover', props) as PopoverProps, notify)\n providePopover(ctx)\n return () => slots.default?.({ open: ctx.api.value.open, setOpen: ctx.api.value.setOpen })\n },\n})\n\nexport const XhPopoverTrigger = defineComponent({\n name: 'XhPopoverTrigger',\n // 直通属性自己合:Vue 默认把作者的处理器排在部件的后面,这里改成作者先跑\n inheritAttrs: false,\n props: {\n /** 借用作者的子节点作为触发器,不再渲染自己的包裹元素;子节点须恰好一个。 */\n asChild: Boolean,\n },\n setup(props, { slots, attrs }) {\n const ctx = usePopoverContext()\n return () => {\n const part = mergePartProps({\n ...ctx.api.value.getTriggerProps() as Record<string, unknown>,\n ref: (el: unknown) => { ctx.triggerRef.value = el as HTMLElement },\n }, attrs)\n const children = slots.default?.()\n // asChild:把触发器属性合到作者的节点上,不再自己渲染包裹元素\n if (props.asChild) {\n const merged = mergeIntoChild(children, part, 'popover')\n if (merged)\n return merged\n }\n return h('button', part, children)\n }\n },\n})\n\nexport const XhPopoverPositioner = defineComponent({\n name: 'XhPopoverPositioner',\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 = usePopoverContext()\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.triggerRef }, () => [\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 XhPopoverContent = defineComponent({\n name: 'XhPopoverContent',\n setup(_, { slots }) {\n const ctx = usePopoverContext()\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 XhPopoverTitle = defineComponent({\n name: 'XhPopoverTitle',\n setup(_, { slots }) {\n const ctx = usePopoverContext()\n return () => h('h2', ctx.api.value.getTitleProps() as Record<string, unknown>, slots.default?.())\n },\n})\n\nexport const XhPopoverDescription = defineComponent({\n name: 'XhPopoverDescription',\n setup(_, { slots }) {\n const ctx = usePopoverContext()\n return () => h('p', ctx.api.value.getDescriptionProps() as Record<string, unknown>, slots.default?.())\n },\n})\n\nexport const XhPopoverCloseTrigger = defineComponent({\n name: 'XhPopoverCloseTrigger',\n setup(_, { slots }) {\n const ctx = usePopoverContext()\n return () => h('button', ctx.api.value.getCloseTriggerProps() as Record<string, unknown>, slots.default?.())\n },\n})\n\nexport const XhPopoverArrow = defineComponent({\n name: 'XhPopoverArrow',\n setup() {\n const ctx = usePopoverContext()\n return () => h('div', ctx.api.value.getArrowProps() as Record<string, unknown>)\n },\n})\n"],"mappings":";;;;;;;;;AAyBA,MAAa,gBAAgB,gBAAgB;CAC3C,MAAM;CACN,OAAO;EACL,MAAM;GAAE,MAAM;GAAS,SAAS,KAAA;EAAU;EAC1C,aAAa;EACb,WAAW,EAAE,MAAM,OAA8B;EACjD,QAAQ,EAAE,MAAM,OAAO;;EAEvB,KAAK,EAAE,MAAM,OAA8B;EAC3C,OAAO;GAAE,MAAM;GAAS,SAAS;EAAM;EACvC,eAAe;GAAE,MAAM;GAAS,SAAS;EAAK;EAC9C,wBAAwB;GAAE,MAAM;GAAS,SAAS;EAAK;;EAEvD,UAAU;GAAE,MAAM;GAAS,SAAS,KAAA;EAAU;EAC9C,cAAc,EAAE,MAAM,OAAiD;EACvE,MAAM,EAAE,MAAM,OAAyB;CACzC;CAEA,OAAO;EACL,gBAAgB,aAAsD;EACtE,gBAAgB,UAA2D;CAC7E;CACA,OAAO;CAGP,MAAM,OAAO,EAAE,OAAO,QAAQ;EAC5B,MAAM,UAAwC,YAAY;GACxD,KAAK,eAAe,OAAO;GAC3B,KAAK,eAAe,QAAQ,IAAI;EAClC;EACA,MAAM,MAAM,WAAW,aAAa,WAAW,KAAK,GAAmB,MAAM;EAC7E,eAAe,GAAG;EAClB,aAAa,MAAM,UAAU;GAAE,MAAM,IAAI,IAAI,MAAM;GAAM,SAAS,IAAI,IAAI,MAAM;EAAQ,CAAC;CAC3F;AACF,CAAC;AAED,MAAa,mBAAmB,gBAAgB;CAC9C,MAAM;CAEN,cAAc;CACd,OAAO;;AAEL,SAAS,QACX;CACA,MAAM,OAAO,EAAE,OAAO,SAAS;EAC7B,MAAM,MAAM,kBAAkB;EAC9B,aAAa;GACX,MAAM,OAAO,eAAe;IAC1B,GAAG,IAAI,IAAI,MAAM,gBAAgB;IACjC,MAAM,OAAgB;KAAE,IAAI,WAAW,QAAQ;IAAkB;GACnE,GAAG,KAAK;GACR,MAAM,WAAW,MAAM,UAAU;GAEjC,IAAI,MAAM,SAAS;IACjB,MAAM,SAAS,eAAe,UAAU,MAAM,SAAS;IACvD,IAAI,QACF,OAAO;GACX;GACA,OAAO,EAAE,UAAU,MAAM,QAAQ;EACnC;CACF;AACF,CAAC;AAED,MAAa,sBAAsB,gBAAgB;CACjD,MAAM;CACN,OAAO;;AAEL,WAAW,EAAE,MAAM,OAA4B,EACjD;CAEA,cAAc;CACd,MAAM,OAAO,EAAE,OAAO,SAAS;EAC7B,MAAM,MAAM,kBAAkB;EAE9B,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;
|
|
1
|
+
{"version":3,"file":"popover.js","names":[],"sources":["../../../src/components/popover/popover.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// 提供 popover 相关实现。\n\nimport type { Direction, Placement, Size } from '@xihan-ui/core'\nimport type { PopoverApi, PopoverSchema } from '@xihan-ui/headless'\nimport type { PropType, SlotsType, VNode } from 'vue'\nimport type { PayloadOf } from '../../runtime/payload'\nimport { defineComponent, h, mergeProps } from 'vue'\nimport { withXhConfig } from '../../config/config'\nimport { mergeIntoChild } from '../../runtime/as-child'\nimport { mergePartProps } from '../../runtime/merge-props'\nimport { XhPortal } from '../../runtime/portal'\nimport { useScrollbars } from '../../runtime/use-scrollbars'\nimport { providePopover, usePopoverContext } from './context'\nimport { usePopover } from './use-popover'\n\ntype PopoverProps = PopoverSchema['props']\n\n/** 默认插槽的载荷:浮层的展开态与开合命令。 */\nexport type PopoverRootSlotProps = Pick<PopoverApi, 'open' | 'setOpen'>\n\nexport const XhPopoverRoot = defineComponent({\n name: 'XhPopoverRoot',\n props: {\n open: { type: Boolean, default: undefined },\n defaultOpen: Boolean,\n placement: { type: String as PropType<Placement> },\n offset: { type: Number },\n /** 文字方向;浮层迁移到落点后无法继承作者子树上的方向,需要 RTL 时显式提供。 */\n dir: { type: String as PropType<Direction> },\n modal: { type: Boolean, default: false },\n closeOnEscape: { type: Boolean, default: true },\n closeOnInteractOutside: { type: Boolean, default: true },\n /** 浮层不可打开:触发器转原生 disabled。 */\n disabled: { type: Boolean, default: undefined },\n translations: { type: Object as PropType<PopoverProps['translations']> },\n size: { type: String as PropType<Size> },\n },\n // open-change 携带 { open },update:open 携带裸布尔\n emits: {\n 'open-change': (_details: PayloadOf<PopoverProps, 'onOpenChange'>) => true,\n 'update:open': (_open: PayloadOf<PopoverProps, 'onOpenChange'>['open']) => true,\n },\n slots: Object as SlotsType<{\n default?: (props: PopoverRootSlotProps) => VNode[]\n }>,\n setup(props, { slots, emit }) {\n const notify: PopoverProps['onOpenChange'] = (details) => {\n emit('open-change', details)\n emit('update:open', details.open)\n }\n const ctx = usePopover(withXhConfig('popover', props) as PopoverProps, notify)\n providePopover(ctx)\n return () => slots.default?.({ open: ctx.api.value.open, setOpen: ctx.api.value.setOpen })\n },\n})\n\nexport const XhPopoverTrigger = defineComponent({\n name: 'XhPopoverTrigger',\n // 直通属性自己合:Vue 默认把作者的处理器排在部件的后面,这里改成作者先跑\n inheritAttrs: false,\n props: {\n /** 借用作者的子节点作为触发器,不再渲染自己的包裹元素;子节点须恰好一个。 */\n asChild: Boolean,\n },\n setup(props, { slots, attrs }) {\n const ctx = usePopoverContext()\n return () => {\n const part = mergePartProps({\n ...ctx.api.value.getTriggerProps() as Record<string, unknown>,\n ref: (el: unknown) => { ctx.triggerRef.value = el as HTMLElement },\n }, attrs)\n const children = slots.default?.()\n // asChild:把触发器属性合到作者的节点上,不再自己渲染包裹元素\n if (props.asChild) {\n const merged = mergeIntoChild(children, part, 'popover')\n if (merged)\n return merged\n }\n return h('button', part, children)\n }\n },\n})\n\nexport const XhPopoverPositioner = defineComponent({\n name: 'XhPopoverPositioner',\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 = usePopoverContext()\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.triggerRef, 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 XhPopoverContent = defineComponent({\n name: 'XhPopoverContent',\n setup(_, { slots }) {\n const ctx = usePopoverContext()\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 XhPopoverTitle = defineComponent({\n name: 'XhPopoverTitle',\n setup(_, { slots }) {\n const ctx = usePopoverContext()\n return () => h('h2', ctx.api.value.getTitleProps() as Record<string, unknown>, slots.default?.())\n },\n})\n\nexport const XhPopoverDescription = defineComponent({\n name: 'XhPopoverDescription',\n setup(_, { slots }) {\n const ctx = usePopoverContext()\n return () => h('p', ctx.api.value.getDescriptionProps() as Record<string, unknown>, slots.default?.())\n },\n})\n\nexport const XhPopoverCloseTrigger = defineComponent({\n name: 'XhPopoverCloseTrigger',\n setup(_, { slots }) {\n const ctx = usePopoverContext()\n return () => h('button', ctx.api.value.getCloseTriggerProps() as Record<string, unknown>, slots.default?.())\n },\n})\n\nexport const XhPopoverArrow = defineComponent({\n name: 'XhPopoverArrow',\n setup() {\n const ctx = usePopoverContext()\n return () => h('div', ctx.api.value.getArrowProps() as Record<string, unknown>)\n },\n})\n"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"radar-chart.d.ts","names":[],"sources":["../../../src/components/radar-chart/radar-chart.ts"],"mappings":";;;;KA6BK,kBAAkB;;KAGX,0BAA0B,KAAK;;UAG1B;EACf,QAAQ;EACR,SAAS;;;
|
|
1
|
+
{"version":3,"file":"radar-chart.d.ts","names":[],"sources":["../../../src/components/radar-chart/radar-chart.ts"],"mappings":";;;;KA6BK,kBAAkB;;KAGX,0BAA0B,KAAK;;UAG1B;EACf,QAAQ;EACR,SAAS;;;cAsDE,mCAAmB,0BAAA,oBAAA,4BAAA;;8BAM9B,qCAAA,iDAAA,aAAA,eAAA,oDAAA;;cAGW,kCAAkB,0BAAA,oBAAA,4BAAA;;8BAa7B,qCAAA,iDAAA,aAAA,eAAA,oDAAA;;cAGW,oCAAoB,0BAAA,oBAAA,4BAAA;;8BAS/B,qCAAA,iDAAA,aAAA,eAAA,oDAAA;;cAGW,gCAAgB,0BAAA,oBAAA,4BAAA;;8BAU3B,qCAAA,iDAAA,aAAA,eAAA,oDAAA;;cAGW,mCAAmB,0BAAA,oBAAA,4BAAA;;;EAGlB,WAAC,OAAO,+BAA+B;kCAWnD;;cAGW,iCAAiB,0BAAA,oBAAA,4BAAA;;8BAM5B,qCAAA,iDAAA,aAAA,eAAA,oDAAA;;cAGW,gCAAgB,8BAAA;;IAIF,MAAA,kBAAkB;;;;;;IAEZ,MAAA,kBAAkB;;;IACtB,MAAA,SAAS;;;;;;;IAET,MAAA,SAAS;;;IACT,MAAA,SAAS;;;;;;;;;;;;IAKI,MAAA,SAAS,qBAAqB;;;IACrC,MAAA;;;IACO,MAAA;;;IACa,MAAA,SAAS;;;;;;;;;;;;;;IAI5B,MAAA,SAAS,QAAQ;;;;;EAId,yBAAA,UAAA,UAAU;EACZ,wBAAA,SAAA,UAAU;EACX,sBAAA,UAAA,UAAU;EACf,qBAAA,MAAA,UAAU;EACV,iBAAA,UAAA,UAAU;EACX,gBAAA,UAAA,UAAU;;;IA3Bb,MAAA,kBAAkB;;;;;;IAEZ,MAAA,kBAAkB;;;IACtB,MAAA,SAAS;;;;;;;IAET,MAAA,SAAS;;;IACT,MAAA,SAAS;;;;;;;;;;;;IAKI,MAAA,SAAS,qBAAqB;;;IACrC,MAAA;;;IACO,MAAA;;;IACa,MAAA,SAAS;;;;;;;;;;;;;;IAI5B,MAAA,SAAS,QAAQ;;;;;;;;;;;;;;;;EAavC,WAAC,OAAO,4BAA4B;;EAEpC,gBAAM;;EAEN,WAAC,OAAO,+BAA+B;;EAEzC,cAAM;kCA8ChB"}
|
|
@@ -36,7 +36,7 @@ function renderTooltipContent(api) {
|
|
|
36
36
|
/** 摘要与数据表:由根自动生成、视觉隐藏,保证无障碍等价物始终存在。 */
|
|
37
37
|
function renderA11y(api) {
|
|
38
38
|
const { columns, rows } = api.table;
|
|
39
|
-
return [h("p", api.getSummaryProps(), api.summary), h("table", api.getTableProps(), [
|
|
39
|
+
return [h("p", api.getSummaryProps(), api.summary), h("div", api.getTableRegionProps(), [h("table", api.getTableProps(), [
|
|
40
40
|
h("caption", api.tableCaption),
|
|
41
41
|
h("thead", [h("tr", columns.map((column) => h("th", {
|
|
42
42
|
key: column.id,
|
|
@@ -46,7 +46,7 @@ function renderA11y(api) {
|
|
|
46
46
|
key: c,
|
|
47
47
|
scope: "row"
|
|
48
48
|
}, cell.text) : h("td", { key: c }, cell.text)))))
|
|
49
|
-
])];
|
|
49
|
+
])])];
|
|
50
50
|
}
|
|
51
51
|
/** 标题:图表的可及名来源。 */
|
|
52
52
|
const XhRadarChartCaption = defineComponent({
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"radar-chart.js","names":[],"sources":["../../../src/components/radar-chart/radar-chart.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// 提供 radar chart 相关实现。\n\nimport type {\n ChartDatumDetails,\n ChartKey,\n ChartMark,\n ChartRow,\n NumberFormatSpec,\n RadarChartApi,\n RadarChartSchema,\n RadarChartTranslations,\n RadarCurve,\n RadarIndicator,\n RadarScale,\n RadarShape,\n RadarTooltipModel,\n} from '@xihan-ui/headless'\nimport type { PropType, SlotsType, VNode } from 'vue'\nimport type { PayloadOf } from '../../runtime/payload'\nimport { defineComponent, h } from 'vue'\nimport { withXhConfig } from '../../config/config'\nimport { provideRadarChart, useRadarChartContext } from './context'\nimport { useRadarChart } from './use-radar-chart'\n\ntype RadarChartProps = RadarChartSchema['props']\n\n/** 默认插槽的载荷:自行摆放部件时用得上的状态与动作。 */\nexport type RadarChartRootSlotProps = Pick<RadarChartApi, 'legendItems' | 'active' | 'tooltip' | 'empty' | 'hiddenSeries' | 'activeKey' | 'toggleSeries' | 'setFocusedDatum' | 'table'>\n\n/** 提示框插槽的载荷:激活的顶点与缺省的内容模型。 */\nexport interface RadarChartTooltipSlotProps {\n active: ChartDatumDetails | null\n tooltip: RadarTooltipModel | null\n}\n\n/** 纹理定义:绘图区的第一个子节点,每种纹理一个 pattern、里面一条线。 */\nfunction renderDefs(api: RadarChartApi): VNode {\n return h('defs', api.getDefsProps() as Record<string, unknown>, api.patterns.map(pattern =>\n h('pattern', { ...api.getPatternProps(pattern) as Record<string, unknown>, key: pattern.id }, [\n h('path', api.getPatternLineProps(pattern) as Record<string, unknown>),\n ])))\n}\n\n/** 一个场景标记画成 SVG 元素;文字标记带文字。 */\nfunction renderMark(api: RadarChartApi, mark: ChartMark): VNode {\n const props = { ...api.getMarkProps(mark) as Record<string, unknown>, key: mark.key }\n if (mark.kind === 'group')\n return h('g', props, mark.children.map(child => renderMark(api, child)))\n if (mark.kind === 'text')\n return h('text', props, mark.text)\n return h('path', props)\n}\n\n/** 缺省的提示框内容:头部是指标名,每个可见实体一行(色标、数值、实体名)。 */\nfunction renderTooltipContent(api: RadarChartApi): VNode[] {\n const tooltip = api.tooltip\n if (!tooltip)\n return []\n return [\n h('div', api.getTooltipHeaderProps() as Record<string, unknown>, tooltip.header),\n ...tooltip.rows.map(row => h('div', { ...api.getTooltipRowProps(row) as Record<string, unknown>, key: row.seriesId }, [\n h('span', api.getTooltipSwatchProps(row) as Record<string, unknown>),\n h('span', api.getTooltipValueProps(row) as Record<string, unknown>, row.value),\n h('span', api.getTooltipNameProps(row) as Record<string, unknown>, row.name),\n ])),\n ]\n}\n\n/** 摘要与数据表:由根自动生成、视觉隐藏,保证无障碍等价物始终存在。 */\nfunction renderA11y(api: RadarChartApi): VNode[] {\n const { columns, rows } = api.table\n return [\n h('p', api.getSummaryProps() as Record<string, unknown>, api.summary),\n h('table', api.getTableProps() as Record<string, unknown>, [\n h('caption', api.tableCaption),\n h('thead', [h('tr', columns.map(column => h('th', { key: column.id, scope: 'col' }, column.label)))]),\n h('tbody', rows.map((row, i) => h('tr', { key: i }, row.cells.map((cell, c) =>\n c === 0 ? h('th', { key: c, scope: 'row' }, cell.text) : h('td', { key: c }, cell.text))))),\n ]),\n ]\n}\n\n/** 标题:图表的可及名来源。 */\nexport const XhRadarChartCaption = defineComponent({\n name: 'XhRadarChartCaption',\n setup(_, { slots }) {\n const ctx = useRadarChartContext()\n return () => h('figcaption', ctx.api.value.getCaptionProps() as Record<string, unknown>, slots.default?.())\n },\n})\n\n/** 图例:项由组件按实体生成;只有一个实体时整条收起。 */\nexport const XhRadarChartLegend = defineComponent({\n name: 'XhRadarChartLegend',\n setup() {\n const ctx = useRadarChartContext()\n return () => {\n const api = ctx.api.value\n return h('div', api.getLegendProps() as Record<string, unknown>, api.legendItems.map(item =>\n h('button', { ...api.getLegendItemProps(item) as Record<string, unknown>, key: item.id }, [\n h('span', api.getLegendSwatchProps(item) as Record<string, unknown>),\n h('span', api.getLegendLabelProps(item) as Record<string, unknown>, item.name),\n ])))\n }\n },\n})\n\n/** 视口:尺寸观测的宿主,块尺寸由组件槽决定。 */\nexport const XhRadarChartViewport = defineComponent({\n name: 'XhRadarChartViewport',\n setup(_, { slots }) {\n const ctx = useRadarChartContext()\n return () => h('div', {\n ...ctx.api.value.getViewportProps() as Record<string, unknown>,\n ref: (el: unknown) => { ctx.viewportRef.value = el as HTMLElement },\n }, slots.default?.())\n },\n})\n\n/** 绘图区:网格与指标名在下,准线其次,各实体的面积、轮廓与顶点再上,焦点环最上。 */\nexport const XhRadarChartPlot = defineComponent({\n name: 'XhRadarChartPlot',\n setup() {\n const ctx = useRadarChartContext()\n return () => {\n const api = ctx.api.value\n const marks = [...api.scene.layers.back, ...api.overlay.under, ...api.scene.layers.data, ...api.overlay.over]\n return h('svg', api.getPlotProps() as Record<string, unknown>, [renderDefs(api), ...marks.map(mark => renderMark(api, mark))])\n }\n },\n})\n\n/** 提示框:缺省内容按激活的指标生成,作用域插槽可替换。 */\nexport const XhRadarChartTooltip = defineComponent({\n name: 'XhRadarChartTooltip',\n slots: Object as SlotsType<{\n default?: (props: RadarChartTooltipSlotProps) => VNode[]\n }>,\n setup(_, { slots }) {\n const ctx = useRadarChartContext()\n return () => {\n const api = ctx.api.value\n return h('div', api.getTooltipProps() as Record<string, unknown>, slots.default\n ? slots.default({ active: api.active, tooltip: api.tooltip })\n : renderTooltipContent(api))\n }\n },\n})\n\n/** 空态:没有可画的数据时显示,缺省文字取文案。 */\nexport const XhRadarChartEmpty = defineComponent({\n name: 'XhRadarChartEmpty',\n setup(_, { slots }) {\n const ctx = useRadarChartContext()\n return () => h('div', ctx.api.value.getEmptyProps() as Record<string, unknown>, slots.default?.() ?? ctx.api.value.emptyText)\n },\n})\n\n/** 根:铺开缺省结构或交给默认插槽,并在末尾追加摘要与数据表。 */\nexport const XhRadarChartRoot = defineComponent({\n name: 'XhRadarChartRoot',\n // 缺省值由机器与 connect 决定;普通类型省略 default,Boolean 显式保留 undefined\n props: {\n data: { type: Array as PropType<readonly ChartRow[]> },\n nameField: { type: String },\n indicators: { type: Array as PropType<readonly RadarIndicator[]> },\n shape: { type: String as PropType<RadarShape> },\n area: { type: Boolean, default: undefined },\n scale: { type: String as PropType<RadarScale> },\n curve: { type: String as PropType<RadarCurve> },\n /** 网格分几圈,2–10,缺省 4。 */\n rings: { type: Number },\n /** 在 12 点方向那根轴上写出每一圈的数值;只在各指标量程相同时写。 */\n ringLabels: { type: Boolean, default: undefined },\n format: { type: [Object, Function] as PropType<NumberFormatSpec | ((value: number) => string)> },\n hiddenSeries: { type: Array as PropType<string[]> },\n defaultHiddenSeries: { type: Array as PropType<string[]> },\n activeKey: { type: [String, Number, Date, null] as PropType<ChartKey | null> },\n pending: { type: Boolean, default: undefined },\n animated: { type: Boolean, default: undefined },\n locale: { type: String },\n translations: { type: Object as PropType<Partial<RadarChartTranslations>> },\n },\n // hidden-series-change / active-key-change 携带 details;update:* 携带裸值,支持 v-model\n emits: {\n 'hidden-series-change': (_details: PayloadOf<RadarChartProps, 'onHiddenSeriesChange'>) => true,\n 'update:hiddenSeries': (_hidden: PayloadOf<RadarChartProps, 'onHiddenSeriesChange'>['hiddenSeries']) => true,\n 'active-key-change': (_details: PayloadOf<RadarChartProps, 'onActiveKeyChange'>) => true,\n 'update:activeKey': (_key: PayloadOf<RadarChartProps, 'onActiveKeyChange'>['activeKey']) => true,\n 'datum-active': (_details: PayloadOf<RadarChartProps, 'onDatumActive'>) => true,\n 'datum-press': (_details: PayloadOf<RadarChartProps, 'onDatumPress'>) => true,\n },\n slots: Object as SlotsType<{\n /** 自行摆放部件;不写时铺开缺省结构:图例、视口(绘图区与空态)、提示框。 */\n default?: (props: RadarChartRootSlotProps) => VNode[]\n /** 缺省结构里的标题内容。 */\n caption?: () => VNode[]\n /** 缺省结构里的提示框内容。 */\n tooltip?: (props: RadarChartTooltipSlotProps) => VNode[]\n /** 缺省结构里的空态内容。 */\n empty?: () => VNode[]\n }>,\n setup(props, { slots, emit }) {\n const ctx = useRadarChart(withXhConfig('radar-chart', props) as RadarChartProps, {\n onHiddenSeriesChange: (details) => {\n emit('hidden-series-change', details)\n emit('update:hiddenSeries', details.hiddenSeries)\n },\n onActiveKeyChange: (details) => {\n emit('active-key-change', details)\n emit('update:activeKey', details.activeKey)\n },\n onDatumActive: details => emit('datum-active', details),\n onDatumPress: details => emit('datum-press', details),\n })\n provideRadarChart(ctx)\n return () => {\n const api = ctx.api.value\n const content = slots.default\n ? slots.default({\n legendItems: api.legendItems,\n active: api.active,\n tooltip: api.tooltip,\n empty: api.empty,\n table: api.table,\n hiddenSeries: api.hiddenSeries,\n activeKey: api.activeKey,\n toggleSeries: api.toggleSeries,\n setFocusedDatum: api.setFocusedDatum,\n })\n : [\n ...(slots.caption ? [h(XhRadarChartCaption, null, () => slots.caption?.())] : []),\n h(XhRadarChartLegend),\n // 空态放进视口:叠在绘图区上,标题与图例不被盖住\n h(XhRadarChartViewport, null, () => [\n h(XhRadarChartPlot),\n h(XhRadarChartEmpty, null, slots.empty ? () => slots.empty?.() : undefined),\n ]),\n h(XhRadarChartTooltip, null, slots.tooltip ? { default: slots.tooltip } : undefined),\n ]\n return h('figure', {\n ...api.getRootProps() as Record<string, unknown>,\n ref: (el: unknown) => { ctx.rootRef.value = el as HTMLElement },\n }, [...content, ...renderA11y(api)])\n }\n },\n})\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"radar-chart.js","names":[],"sources":["../../../src/components/radar-chart/radar-chart.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// 提供 radar chart 相关实现。\n\nimport type {\n ChartDatumDetails,\n ChartKey,\n ChartMark,\n ChartRow,\n NumberFormatSpec,\n RadarChartApi,\n RadarChartSchema,\n RadarChartTranslations,\n RadarCurve,\n RadarIndicator,\n RadarScale,\n RadarShape,\n RadarTooltipModel,\n} from '@xihan-ui/headless'\nimport type { PropType, SlotsType, VNode } from 'vue'\nimport type { PayloadOf } from '../../runtime/payload'\nimport { defineComponent, h } from 'vue'\nimport { withXhConfig } from '../../config/config'\nimport { provideRadarChart, useRadarChartContext } from './context'\nimport { useRadarChart } from './use-radar-chart'\n\ntype RadarChartProps = RadarChartSchema['props']\n\n/** 默认插槽的载荷:自行摆放部件时用得上的状态与动作。 */\nexport type RadarChartRootSlotProps = Pick<RadarChartApi, 'legendItems' | 'active' | 'tooltip' | 'empty' | 'hiddenSeries' | 'activeKey' | 'toggleSeries' | 'setFocusedDatum' | 'table'>\n\n/** 提示框插槽的载荷:激活的顶点与缺省的内容模型。 */\nexport interface RadarChartTooltipSlotProps {\n active: ChartDatumDetails | null\n tooltip: RadarTooltipModel | null\n}\n\n/** 纹理定义:绘图区的第一个子节点,每种纹理一个 pattern、里面一条线。 */\nfunction renderDefs(api: RadarChartApi): VNode {\n return h('defs', api.getDefsProps() as Record<string, unknown>, api.patterns.map(pattern =>\n h('pattern', { ...api.getPatternProps(pattern) as Record<string, unknown>, key: pattern.id }, [\n h('path', api.getPatternLineProps(pattern) as Record<string, unknown>),\n ])))\n}\n\n/** 一个场景标记画成 SVG 元素;文字标记带文字。 */\nfunction renderMark(api: RadarChartApi, mark: ChartMark): VNode {\n const props = { ...api.getMarkProps(mark) as Record<string, unknown>, key: mark.key }\n if (mark.kind === 'group')\n return h('g', props, mark.children.map(child => renderMark(api, child)))\n if (mark.kind === 'text')\n return h('text', props, mark.text)\n return h('path', props)\n}\n\n/** 缺省的提示框内容:头部是指标名,每个可见实体一行(色标、数值、实体名)。 */\nfunction renderTooltipContent(api: RadarChartApi): VNode[] {\n const tooltip = api.tooltip\n if (!tooltip)\n return []\n return [\n h('div', api.getTooltipHeaderProps() as Record<string, unknown>, tooltip.header),\n ...tooltip.rows.map(row => h('div', { ...api.getTooltipRowProps(row) as Record<string, unknown>, key: row.seriesId }, [\n h('span', api.getTooltipSwatchProps(row) as Record<string, unknown>),\n h('span', api.getTooltipValueProps(row) as Record<string, unknown>, row.value),\n h('span', api.getTooltipNameProps(row) as Record<string, unknown>, row.name),\n ])),\n ]\n}\n\n/** 摘要与数据表:由根自动生成、视觉隐藏,保证无障碍等价物始终存在。 */\nfunction renderA11y(api: RadarChartApi): VNode[] {\n const { columns, rows } = api.table\n return [\n h('p', api.getSummaryProps() as Record<string, unknown>, api.summary),\n // 视觉隐藏落在包着表格的区域上,表格在里面照常排版:隐藏写在表格上收不住它的高度\n h('div', api.getTableRegionProps() as Record<string, unknown>, [\n h('table', api.getTableProps() as Record<string, unknown>, [\n h('caption', api.tableCaption),\n h('thead', [h('tr', columns.map(column => h('th', { key: column.id, scope: 'col' }, column.label)))]),\n h('tbody', rows.map((row, i) => h('tr', { key: i }, row.cells.map((cell, c) =>\n c === 0 ? h('th', { key: c, scope: 'row' }, cell.text) : h('td', { key: c }, cell.text))))),\n ]),\n ]),\n ]\n}\n\n/** 标题:图表的可及名来源。 */\nexport const XhRadarChartCaption = defineComponent({\n name: 'XhRadarChartCaption',\n setup(_, { slots }) {\n const ctx = useRadarChartContext()\n return () => h('figcaption', ctx.api.value.getCaptionProps() as Record<string, unknown>, slots.default?.())\n },\n})\n\n/** 图例:项由组件按实体生成;只有一个实体时整条收起。 */\nexport const XhRadarChartLegend = defineComponent({\n name: 'XhRadarChartLegend',\n setup() {\n const ctx = useRadarChartContext()\n return () => {\n const api = ctx.api.value\n return h('div', api.getLegendProps() as Record<string, unknown>, api.legendItems.map(item =>\n h('button', { ...api.getLegendItemProps(item) as Record<string, unknown>, key: item.id }, [\n h('span', api.getLegendSwatchProps(item) as Record<string, unknown>),\n h('span', api.getLegendLabelProps(item) as Record<string, unknown>, item.name),\n ])))\n }\n },\n})\n\n/** 视口:尺寸观测的宿主,块尺寸由组件槽决定。 */\nexport const XhRadarChartViewport = defineComponent({\n name: 'XhRadarChartViewport',\n setup(_, { slots }) {\n const ctx = useRadarChartContext()\n return () => h('div', {\n ...ctx.api.value.getViewportProps() as Record<string, unknown>,\n ref: (el: unknown) => { ctx.viewportRef.value = el as HTMLElement },\n }, slots.default?.())\n },\n})\n\n/** 绘图区:网格与指标名在下,准线其次,各实体的面积、轮廓与顶点再上,焦点环最上。 */\nexport const XhRadarChartPlot = defineComponent({\n name: 'XhRadarChartPlot',\n setup() {\n const ctx = useRadarChartContext()\n return () => {\n const api = ctx.api.value\n const marks = [...api.scene.layers.back, ...api.overlay.under, ...api.scene.layers.data, ...api.overlay.over]\n return h('svg', api.getPlotProps() as Record<string, unknown>, [renderDefs(api), ...marks.map(mark => renderMark(api, mark))])\n }\n },\n})\n\n/** 提示框:缺省内容按激活的指标生成,作用域插槽可替换。 */\nexport const XhRadarChartTooltip = defineComponent({\n name: 'XhRadarChartTooltip',\n slots: Object as SlotsType<{\n default?: (props: RadarChartTooltipSlotProps) => VNode[]\n }>,\n setup(_, { slots }) {\n const ctx = useRadarChartContext()\n return () => {\n const api = ctx.api.value\n return h('div', api.getTooltipProps() as Record<string, unknown>, slots.default\n ? slots.default({ active: api.active, tooltip: api.tooltip })\n : renderTooltipContent(api))\n }\n },\n})\n\n/** 空态:没有可画的数据时显示,缺省文字取文案。 */\nexport const XhRadarChartEmpty = defineComponent({\n name: 'XhRadarChartEmpty',\n setup(_, { slots }) {\n const ctx = useRadarChartContext()\n return () => h('div', ctx.api.value.getEmptyProps() as Record<string, unknown>, slots.default?.() ?? ctx.api.value.emptyText)\n },\n})\n\n/** 根:铺开缺省结构或交给默认插槽,并在末尾追加摘要与数据表。 */\nexport const XhRadarChartRoot = defineComponent({\n name: 'XhRadarChartRoot',\n // 缺省值由机器与 connect 决定;普通类型省略 default,Boolean 显式保留 undefined\n props: {\n data: { type: Array as PropType<readonly ChartRow[]> },\n nameField: { type: String },\n indicators: { type: Array as PropType<readonly RadarIndicator[]> },\n shape: { type: String as PropType<RadarShape> },\n area: { type: Boolean, default: undefined },\n scale: { type: String as PropType<RadarScale> },\n curve: { type: String as PropType<RadarCurve> },\n /** 网格分几圈,2–10,缺省 4。 */\n rings: { type: Number },\n /** 在 12 点方向那根轴上写出每一圈的数值;只在各指标量程相同时写。 */\n ringLabels: { type: Boolean, default: undefined },\n format: { type: [Object, Function] as PropType<NumberFormatSpec | ((value: number) => string)> },\n hiddenSeries: { type: Array as PropType<string[]> },\n defaultHiddenSeries: { type: Array as PropType<string[]> },\n activeKey: { type: [String, Number, Date, null] as PropType<ChartKey | null> },\n pending: { type: Boolean, default: undefined },\n animated: { type: Boolean, default: undefined },\n locale: { type: String },\n translations: { type: Object as PropType<Partial<RadarChartTranslations>> },\n },\n // hidden-series-change / active-key-change 携带 details;update:* 携带裸值,支持 v-model\n emits: {\n 'hidden-series-change': (_details: PayloadOf<RadarChartProps, 'onHiddenSeriesChange'>) => true,\n 'update:hiddenSeries': (_hidden: PayloadOf<RadarChartProps, 'onHiddenSeriesChange'>['hiddenSeries']) => true,\n 'active-key-change': (_details: PayloadOf<RadarChartProps, 'onActiveKeyChange'>) => true,\n 'update:activeKey': (_key: PayloadOf<RadarChartProps, 'onActiveKeyChange'>['activeKey']) => true,\n 'datum-active': (_details: PayloadOf<RadarChartProps, 'onDatumActive'>) => true,\n 'datum-press': (_details: PayloadOf<RadarChartProps, 'onDatumPress'>) => true,\n },\n slots: Object as SlotsType<{\n /** 自行摆放部件;不写时铺开缺省结构:图例、视口(绘图区与空态)、提示框。 */\n default?: (props: RadarChartRootSlotProps) => VNode[]\n /** 缺省结构里的标题内容。 */\n caption?: () => VNode[]\n /** 缺省结构里的提示框内容。 */\n tooltip?: (props: RadarChartTooltipSlotProps) => VNode[]\n /** 缺省结构里的空态内容。 */\n empty?: () => VNode[]\n }>,\n setup(props, { slots, emit }) {\n const ctx = useRadarChart(withXhConfig('radar-chart', props) as RadarChartProps, {\n onHiddenSeriesChange: (details) => {\n emit('hidden-series-change', details)\n emit('update:hiddenSeries', details.hiddenSeries)\n },\n onActiveKeyChange: (details) => {\n emit('active-key-change', details)\n emit('update:activeKey', details.activeKey)\n },\n onDatumActive: details => emit('datum-active', details),\n onDatumPress: details => emit('datum-press', details),\n })\n provideRadarChart(ctx)\n return () => {\n const api = ctx.api.value\n const content = slots.default\n ? slots.default({\n legendItems: api.legendItems,\n active: api.active,\n tooltip: api.tooltip,\n empty: api.empty,\n table: api.table,\n hiddenSeries: api.hiddenSeries,\n activeKey: api.activeKey,\n toggleSeries: api.toggleSeries,\n setFocusedDatum: api.setFocusedDatum,\n })\n : [\n ...(slots.caption ? [h(XhRadarChartCaption, null, () => slots.caption?.())] : []),\n h(XhRadarChartLegend),\n // 空态放进视口:叠在绘图区上,标题与图例不被盖住\n h(XhRadarChartViewport, null, () => [\n h(XhRadarChartPlot),\n h(XhRadarChartEmpty, null, slots.empty ? () => slots.empty?.() : undefined),\n ]),\n h(XhRadarChartTooltip, null, slots.tooltip ? { default: slots.tooltip } : undefined),\n ]\n return h('figure', {\n ...api.getRootProps() as Record<string, unknown>,\n ref: (el: unknown) => { ctx.rootRef.value = el as HTMLElement },\n }, [...content, ...renderA11y(api)])\n }\n },\n})\n"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"radio-group.d.ts","names":[],"sources":["../../../src/components/radio-group/radio-group.ts"],"mappings":";;;;;
|
|
1
|
+
{"version":3,"file":"radio-group.d.ts","names":[],"sources":["../../../src/components/radio-group/radio-group.ts"],"mappings":";;;;;KAiBK,kBAAkB;cAEV,gCAAgB,8BAAA;;IAGI,MAAA,SAAS;;;;;;;IAGb,MAAA;;;IACO,MAAA;;;;;;;;;;;;;;;;;;;IAKD,MAAA,SAAS;;;IACjB,MAAA,SAAS;;;;;;;;;;;;;;IAIR,MAAA,SAAS;;;IACT,MAAA,SAAS;;;IACN,MAAA,SAAS;;;;;EAIT,iBAAA,UAAA,UAAU;EACZ,iBAAA,QAAA,UAAU;;;IArBN,MAAA,SAAS;;;;;;;IAGb,MAAA;;;IACO,MAAA;;;;;;;;;;;;;;;;;;;IAKD,MAAA,SAAS;;;IACjB,MAAA,SAAS;;;;;;;;;;;;;;IAIR,MAAA,SAAS;;;IACT,MAAA,SAAS;;;IACN,MAAA,SAAS;;;;;;;;;;;;qCAoCtC;cAEW,iCAAiB,0BAAA,oBAAA,4BAAA;;8BAa5B,qCAAA,iDAAA,aAAA,eAAA,oDAAA;;cAGW,iCAAiB,0BAAA,oBAAA,4BAAA;;8BAM5B,qCAAA,iDAAA,aAAA,eAAA,oDAAA;cAEW,gCAAgB,8BAAA;;;;;;;;;;;;;;;;;;;;;;qCAqC3B;;cAGW,oCAAoB,0BAAA,oBAAA,4BAAA;;8BAO/B,qCAAA,iDAAA,aAAA,eAAA,oDAAA;cAEW,oCAAoB,0BAAA,oBAAA,4BAAA;;8BAO/B,qCAAA,iDAAA,aAAA,eAAA,oDAAA;cAEW,2CAA2B,0BAAA,oBAAA,4BAAA;;8BAOtC,qCAAA,iDAAA,aAAA,eAAA,oDAAA"}
|
|
@@ -1,7 +1,8 @@
|
|
|
1
1
|
import { useFormControlProps } from "../form/use-form-control.js";
|
|
2
|
+
import { useFieldGroupWiring, useFieldLabelWiring } from "../field/use-field-control.js";
|
|
2
3
|
import { provideRadioGroup, provideRadioGroupItem, useRadioGroupContext, useRadioGroupItemContext } from "./context.js";
|
|
3
4
|
import { useRadioGroup } from "./use-radio-group.js";
|
|
4
|
-
import { computed, defineComponent, h, onBeforeUnmount, ref, watch } from "vue";
|
|
5
|
+
import { computed, defineComponent, h, onBeforeUnmount, onMounted, ref, watch } from "vue";
|
|
5
6
|
//#region src/components/radio-group/radio-group.ts
|
|
6
7
|
const XhRadioGroupRoot = defineComponent({
|
|
7
8
|
name: "XhRadioGroupRoot",
|
|
@@ -53,16 +54,30 @@ const XhRadioGroupRoot = defineComponent({
|
|
|
53
54
|
};
|
|
54
55
|
const ctx = useRadioGroup(useFormControlProps(props), notify);
|
|
55
56
|
provideRadioGroup(ctx);
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
57
|
+
const fieldWiring = useFieldGroupWiring();
|
|
58
|
+
const fieldLabel = useFieldLabelWiring();
|
|
59
|
+
return () => {
|
|
60
|
+
const title = slots.label?.() ?? (props.label != null ? [props.label] : null);
|
|
61
|
+
return h("div", {
|
|
62
|
+
...fieldLabel.value({
|
|
63
|
+
...fieldWiring.value,
|
|
64
|
+
...ctx.api.value.getRootProps()
|
|
65
|
+
}),
|
|
66
|
+
ref: ctx.rootRef
|
|
67
|
+
}, slots.default ? [...renderLabel(title), ...slots.default()] : props.collection ? renderDefaultTree(ctx.api.value.collection, ctx.api.value.variant === "segmented", title, slots.item) : renderLabel(title));
|
|
68
|
+
};
|
|
60
69
|
}
|
|
61
70
|
});
|
|
62
71
|
const XhRadioGroupLabel = defineComponent({
|
|
63
72
|
name: "XhRadioGroupLabel",
|
|
64
73
|
setup(_, { slots }) {
|
|
65
74
|
const ctx = useRadioGroupContext();
|
|
75
|
+
onMounted(() => {
|
|
76
|
+
ctx.labelCount.value++;
|
|
77
|
+
});
|
|
78
|
+
onBeforeUnmount(() => {
|
|
79
|
+
ctx.labelCount.value--;
|
|
80
|
+
});
|
|
66
81
|
return () => h("span", ctx.api.value.getLabelProps(), slots.default?.());
|
|
67
82
|
}
|
|
68
83
|
});
|
|
@@ -150,7 +165,7 @@ const XhRadioGroupItemDescription = defineComponent({
|
|
|
150
165
|
*/
|
|
151
166
|
function renderDefaultTree(collection, segmented, label, itemSlot) {
|
|
152
167
|
return [
|
|
153
|
-
...
|
|
168
|
+
...renderLabel(label),
|
|
154
169
|
...segmented ? [h(XhRadioGroupThumb)] : [],
|
|
155
170
|
...collection.map((node) => h(XhRadioGroupItem, {
|
|
156
171
|
key: node.value,
|
|
@@ -162,6 +177,10 @@ function renderDefaultTree(collection, segmented, label, itemSlot) {
|
|
|
162
177
|
]))
|
|
163
178
|
];
|
|
164
179
|
}
|
|
180
|
+
/** 组标题:给了文字或 label 插槽才铺 label 部件。 */
|
|
181
|
+
function renderLabel(title) {
|
|
182
|
+
return title ? [h(XhRadioGroupLabel, null, () => title)] : [];
|
|
183
|
+
}
|
|
165
184
|
//#endregion
|
|
166
185
|
export { XhRadioGroupItem, XhRadioGroupItemDescription, XhRadioGroupItemIcon, XhRadioGroupItemText, XhRadioGroupLabel, XhRadioGroupRoot, XhRadioGroupThumb };
|
|
167
186
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"radio-group.js","names":[],"sources":["../../../src/components/radio-group/radio-group.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// 提供 radio group 相关实现。\n\nimport type { Direction, Orientation, Size, Tone } from '@xihan-ui/core'\nimport type { RadioGroupItemProps, RadioGroupNode, RadioGroupNodeMeta, RadioGroupSchema, RadioGroupVariant } from '@xihan-ui/headless'\nimport type { PropType, VNode } from 'vue'\nimport type { PayloadOf } from '../../runtime/payload'\nimport { computed, defineComponent, h, onBeforeUnmount, ref, watch } from 'vue'\nimport { useFormControlProps } from '../form/use-form-control'\nimport { provideRadioGroup, provideRadioGroupItem, useRadioGroupContext, useRadioGroupItemContext } from './context'\nimport { useRadioGroup } from './use-radio-group'\n\ntype RadioGroupProps = RadioGroupSchema['props']\n\nexport const XhRadioGroupRoot = defineComponent({\n name: 'XhRadioGroupRoot',\n props: {\n collection: { type: Array as PropType<RadioGroupNode[]> },\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 orientation: { type: String as PropType<Orientation> },\n dir: { type: String as PropType<Direction> },\n name: { type: String },\n loop: { type: Boolean, default: undefined },\n block: { type: Boolean, default: undefined },\n tone: { type: String as PropType<Tone> },\n size: { type: String as PropType<Size> },\n variant: { type: String as PropType<RadioGroupVariant> },\n },\n // value-change 携带 { value },update:value 携带裸值\n emits: {\n 'value-change': (_details: PayloadOf<RadioGroupProps, 'onValueChange'>) => true,\n 'update:value': (_value: PayloadOf<RadioGroupProps, 'onValueChange'>['value']) => true,\n },\n setup(props, { slots, emit }) {\n const notify: RadioGroupProps['onValueChange'] = (details) => {\n emit('value-change', details)\n emit('update:value', details.value)\n }\n const ctx = useRadioGroup(useFormControlProps(props) as RadioGroupProps, notify)\n provideRadioGroup(ctx)\n return () => h(\n 'div',\n { ...ctx.api.value.getRootProps() as Record<string, unknown>, ref: ctx.rootRef },\n slots.default\n ? slots.default()\n : props.collection\n ? renderDefaultTree(\n ctx.api.value.collection,\n ctx.api.value.variant === 'segmented',\n slots.label?.() ?? (props.label != null ? [props.label] : null),\n slots.item,\n )\n : [],\n )\n },\n})\n\nexport const XhRadioGroupLabel = defineComponent({\n name: 'XhRadioGroupLabel',\n setup(_, { slots }) {\n const ctx = useRadioGroupContext()\n return () => h('span', ctx.api.value.getLabelProps() as Record<string, unknown>, slots.default?.())\n },\n})\n\n/** segmented 形态里滑动的选中标记,位置由状态机测量后写入内联样式的私有槽;没有落点时收起。须写在条目之前。 */\nexport const XhRadioGroupThumb = defineComponent({\n name: 'XhRadioGroupThumb',\n setup() {\n const ctx = useRadioGroupContext()\n return () => h('span', ctx.api.value.getThumbProps() as Record<string, unknown>)\n },\n})\n\nexport const XhRadioGroupItem = defineComponent({\n name: 'XhRadioGroupItem',\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 = useRadioGroupContext()\n const item = computed<RadioGroupItemProps>(() => ({ value: props.value, disabled: props.disabled }))\n provideRadioGroupItem({ item })\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 // 隐藏输入与 indicator 由条目自行装配,不暴露成独立组件\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.getIndicatorProps(item.value) as Record<string, unknown>),\n ...(slots.default?.() ?? []),\n ])\n },\n})\n\n/** 条目文字前的图标位:纯装饰,对读屏隐藏。 */\nexport const XhRadioGroupItemIcon = defineComponent({\n name: 'XhRadioGroupItemIcon',\n setup(_, { slots }) {\n const ctx = useRadioGroupContext()\n const { item } = useRadioGroupItemContext()\n return () => h('span', ctx.api.value.getItemIconProps(item.value) as Record<string, unknown>, slots.default?.())\n },\n})\n\nexport const XhRadioGroupItemText = defineComponent({\n name: 'XhRadioGroupItemText',\n setup(_, { slots }) {\n const ctx = useRadioGroupContext()\n const { item } = useRadioGroupItemContext()\n return () => h('span', ctx.api.value.getItemTextProps(item.value) as Record<string, unknown>, slots.default?.())\n },\n})\n\nexport const XhRadioGroupItemDescription = defineComponent({\n name: 'XhRadioGroupItemDescription',\n setup(_, { slots }) {\n const ctx = useRadioGroupContext()\n const { item } = useRadioGroupItemContext()\n return () => h('span', ctx.api.value.getItemDescriptionProps(item.value) as Record<string, unknown>, slots.default?.())\n },\n})\n\n/**\n * 未写默认插槽时按 collection 铺开的整套结构,作者只提供数据。\n * 与手写部件产出的 DOM 完全一致,需要修改结构时写默认插槽,行为不变。\n * segmented 形态的滑块排在条目之前:它绝对定位,依靠文档序让后面的条目覆盖在它上面,文字才不会被遮住。\n */\nfunction renderDefaultTree(\n collection: readonly RadioGroupNodeMeta[],\n segmented: boolean,\n label: (VNode | string)[] | null,\n itemSlot?: (node: RadioGroupNodeMeta) => VNode[],\n): VNode[] {\n return [\n ...(label ? [h(XhRadioGroupLabel, null, () => label)] : []),\n ...(segmented ? [h(XhRadioGroupThumb)] : []),\n // 条目内的 hidden-input 与 indicator 由 XhRadioGroupItem 自行装配\n ...collection.map(node => h(XhRadioGroupItem, { key: node.value, value: node.value }, () => [\n ...(node.icon != null ? [h(XhRadioGroupItemIcon, null, () => node.icon)] : []),\n h(XhRadioGroupItemText, null, () => itemSlot?.(node) ?? node.label),\n ...(node.description != null ? [h(XhRadioGroupItemDescription, null, () => node.description)] : []),\n ])),\n ]\n}\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"radio-group.js","names":[],"sources":["../../../src/components/radio-group/radio-group.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// 提供 radio group 相关实现。\n\nimport type { Direction, Orientation, Size, Tone } from '@xihan-ui/core'\nimport type { RadioGroupItemProps, RadioGroupNode, RadioGroupNodeMeta, RadioGroupSchema, RadioGroupVariant } from '@xihan-ui/headless'\nimport type { PropType, VNode } from 'vue'\nimport type { PayloadOf } from '../../runtime/payload'\nimport { computed, defineComponent, h, onBeforeUnmount, onMounted, ref, watch } from 'vue'\nimport { useFieldGroupWiring, useFieldLabelWiring } from '../field/use-field-control'\nimport { useFormControlProps } from '../form/use-form-control'\nimport { provideRadioGroup, provideRadioGroupItem, useRadioGroupContext, useRadioGroupItemContext } from './context'\nimport { useRadioGroup } from './use-radio-group'\n\ntype RadioGroupProps = RadioGroupSchema['props']\n\nexport const XhRadioGroupRoot = defineComponent({\n name: 'XhRadioGroupRoot',\n props: {\n collection: { type: Array as PropType<RadioGroupNode[]> },\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 orientation: { type: String as PropType<Orientation> },\n dir: { type: String as PropType<Direction> },\n name: { type: String },\n loop: { type: Boolean, default: undefined },\n block: { type: Boolean, default: undefined },\n tone: { type: String as PropType<Tone> },\n size: { type: String as PropType<Size> },\n variant: { type: String as PropType<RadioGroupVariant> },\n },\n // value-change 携带 { value },update:value 携带裸值\n emits: {\n 'value-change': (_details: PayloadOf<RadioGroupProps, 'onValueChange'>) => true,\n 'update:value': (_value: PayloadOf<RadioGroupProps, 'onValueChange'>['value']) => true,\n },\n setup(props, { slots, emit }) {\n const notify: RadioGroupProps['onValueChange'] = (details) => {\n emit('value-change', details)\n emit('update:value', details.value)\n }\n const ctx = useRadioGroup(useFormControlProps(props) as RadioGroupProps, notify)\n provideRadioGroup(ctx)\n // 放进表单字段时,字段的标题与说明接到组上:读屏进组时念组名与说明\n const fieldWiring = useFieldGroupWiring()\n const fieldLabel = useFieldLabelWiring()\n return () => {\n // 标题文字不论手写选项还是数据驱动都由根铺出:手写选项时不必再写 label 部件\n const title = slots.label?.() ?? (props.label != null ? [props.label] : null)\n return h(\n 'div',\n { ...fieldLabel.value({ ...fieldWiring.value, ...ctx.api.value.getRootProps() as Record<string, unknown> }), ref: ctx.rootRef },\n slots.default\n ? [...renderLabel(title), ...slots.default()]\n : props.collection\n ? renderDefaultTree(\n ctx.api.value.collection,\n ctx.api.value.variant === 'segmented',\n title,\n slots.item,\n )\n : renderLabel(title),\n )\n }\n },\n})\n\nexport const XhRadioGroupLabel = defineComponent({\n name: 'XhRadioGroupLabel',\n setup(_, { slots }) {\n const ctx = useRadioGroupContext()\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/** segmented 形态里滑动的选中标记,位置由状态机测量后写入内联样式的私有槽;没有落点时收起。须写在条目之前。 */\nexport const XhRadioGroupThumb = defineComponent({\n name: 'XhRadioGroupThumb',\n setup() {\n const ctx = useRadioGroupContext()\n return () => h('span', ctx.api.value.getThumbProps() as Record<string, unknown>)\n },\n})\n\nexport const XhRadioGroupItem = defineComponent({\n name: 'XhRadioGroupItem',\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 = useRadioGroupContext()\n const item = computed<RadioGroupItemProps>(() => ({ value: props.value, disabled: props.disabled }))\n provideRadioGroupItem({ item })\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 // 隐藏输入与 indicator 由条目自行装配,不暴露成独立组件\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.getIndicatorProps(item.value) as Record<string, unknown>),\n ...(slots.default?.() ?? []),\n ])\n },\n})\n\n/** 条目文字前的图标位:纯装饰,对读屏隐藏。 */\nexport const XhRadioGroupItemIcon = defineComponent({\n name: 'XhRadioGroupItemIcon',\n setup(_, { slots }) {\n const ctx = useRadioGroupContext()\n const { item } = useRadioGroupItemContext()\n return () => h('span', ctx.api.value.getItemIconProps(item.value) as Record<string, unknown>, slots.default?.())\n },\n})\n\nexport const XhRadioGroupItemText = defineComponent({\n name: 'XhRadioGroupItemText',\n setup(_, { slots }) {\n const ctx = useRadioGroupContext()\n const { item } = useRadioGroupItemContext()\n return () => h('span', ctx.api.value.getItemTextProps(item.value) as Record<string, unknown>, slots.default?.())\n },\n})\n\nexport const XhRadioGroupItemDescription = defineComponent({\n name: 'XhRadioGroupItemDescription',\n setup(_, { slots }) {\n const ctx = useRadioGroupContext()\n const { item } = useRadioGroupItemContext()\n return () => h('span', ctx.api.value.getItemDescriptionProps(item.value) as Record<string, unknown>, slots.default?.())\n },\n})\n\n/**\n * 未写默认插槽时按 collection 铺开的整套结构,作者只提供数据。\n * 与手写部件产出的 DOM 完全一致,需要修改结构时写默认插槽,行为不变。\n * segmented 形态的滑块排在条目之前:它绝对定位,依靠文档序让后面的条目覆盖在它上面,文字才不会被遮住。\n */\nfunction renderDefaultTree(\n collection: readonly RadioGroupNodeMeta[],\n segmented: boolean,\n label: (VNode | string)[] | null,\n itemSlot?: (node: RadioGroupNodeMeta) => VNode[],\n): VNode[] {\n return [\n ...renderLabel(label),\n ...(segmented ? [h(XhRadioGroupThumb)] : []),\n // 条目内的 hidden-input 与 indicator 由 XhRadioGroupItem 自行装配\n ...collection.map(node => h(XhRadioGroupItem, { key: node.value, value: node.value }, () => [\n ...(node.icon != null ? [h(XhRadioGroupItemIcon, null, () => node.icon)] : []),\n h(XhRadioGroupItemText, null, () => itemSlot?.(node) ?? node.label),\n ...(node.description != null ? [h(XhRadioGroupItemDescription, null, () => node.description)] : []),\n ])),\n ]\n}\n\n/** 组标题:给了文字或 label 插槽才铺 label 部件。 */\nfunction renderLabel(title: (VNode | string)[] | null): VNode[] {\n return title ? [h(XhRadioGroupLabel, null, () => title)] : []\n}\n"],"mappings":"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"}
|
|
@@ -8,6 +8,11 @@ interface RadioGroupContext {
|
|
|
8
8
|
service: Service<RadioGroupSchema>;
|
|
9
9
|
/** root 节点:条目集合的查询容器,同时是 segmented 形态滑块测量的参照系。 */
|
|
10
10
|
rootRef: Ref<HTMLElement | null>;
|
|
11
|
+
/**
|
|
12
|
+
* 已挂载的 label 部件数量,由 XhRadioGroupLabel 自行登记。
|
|
13
|
+
* 根的 aria-labelledby 据此决定输不输出:只看 label 属性有没有值不够,手写选项时标题可能根本没渲染。
|
|
14
|
+
*/
|
|
15
|
+
labelCount: Ref<number>;
|
|
11
16
|
}
|
|
12
17
|
declare function useRadioGroup(props: RadioGroupSchema['props'], onValueChange?: RadioGroupSchema['props']['onValueChange']): RadioGroupContext;
|
|
13
18
|
//#endregion
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"use-radio-group.d.ts","names":[],"sources":["../../../src/components/radio-group/use-radio-group.ts"],"mappings":";;;;UAiBiB;EACf,KAAK,YAAY;;EAEjB,SAAS,QAAQ;;EAEjB,SAAS,IAAI;;
|
|
1
|
+
{"version":3,"file":"use-radio-group.d.ts","names":[],"sources":["../../../src/components/radio-group/use-radio-group.ts"],"mappings":";;;;UAiBiB;EACf,KAAK,YAAY;;EAEjB,SAAS,QAAQ;;EAEjB,SAAS,IAAI;;;;;EAKb,YAAY;;iBAGE,cACd,OAAO,2BACP,gBAAgB,6CACf"}
|
|
@@ -8,15 +8,18 @@ import { connectRadioGroup, radioGroupMachine } from "@xihan-ui/headless";
|
|
|
8
8
|
function useRadioGroup(props, onValueChange) {
|
|
9
9
|
const scope = createScope(null, createVueIdGenerator());
|
|
10
10
|
const rootRef = ref(null);
|
|
11
|
+
const labelCount = ref(0);
|
|
11
12
|
const service = useMachine(radioGroupMachine, () => ({
|
|
12
13
|
...props,
|
|
14
|
+
labelled: labelCount.value > 0,
|
|
13
15
|
onValueChange
|
|
14
16
|
}), scope);
|
|
15
17
|
service.refs.set("getRootEl", () => rootRef.value);
|
|
16
18
|
return {
|
|
17
19
|
api: computed(() => connectRadioGroup(service, vueNormalize)),
|
|
18
20
|
service,
|
|
19
|
-
rootRef
|
|
21
|
+
rootRef,
|
|
22
|
+
labelCount
|
|
20
23
|
};
|
|
21
24
|
}
|
|
22
25
|
//#endregion
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"use-radio-group.js","names":[],"sources":["../../../src/components/radio-group/use-radio-group.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 radio group 相关实现。\n\nimport type { Service } from '@xihan-ui/core'\nimport type { RadioGroupApi, RadioGroupSchema } from '@xihan-ui/headless'\nimport type { ComputedRef, Ref } from 'vue'\nimport { createScope } from '@xihan-ui/core'\nimport { connectRadioGroup, radioGroupMachine } 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 RadioGroupContext {\n api: ComputedRef<RadioGroupApi>\n /** 状态机实例,供部件上报 DOM 侧的事实(如条目卸载带走了焦点)。 */\n service: Service<RadioGroupSchema>\n /** root 节点:条目集合的查询容器,同时是 segmented 形态滑块测量的参照系。 */\n rootRef: Ref<HTMLElement | null>\n}\n\nexport function useRadioGroup(\n props: RadioGroupSchema['props'],\n onValueChange?: RadioGroupSchema['props']['onValueChange'],\n): RadioGroupContext {\n const idGen = createVueIdGenerator()\n const scope = createScope(null, idGen)\n const rootRef = ref<HTMLElement | null>(null)\n const service = useMachine(radioGroupMachine, () => ({ ...props, onValueChange }), scope)\n\n // 滑块的量测在机器里跑,DOM 侧的取值口经 refs 交进去\n service.refs.set('getRootEl', () => rootRef.value)\n\n const api = computed(() => connectRadioGroup(service, vueNormalize))\n return { api, service, rootRef }\n}\n"],"mappings":";;;;;;;
|
|
1
|
+
{"version":3,"file":"use-radio-group.js","names":[],"sources":["../../../src/components/radio-group/use-radio-group.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 radio group 相关实现。\n\nimport type { Service } from '@xihan-ui/core'\nimport type { RadioGroupApi, RadioGroupSchema } from '@xihan-ui/headless'\nimport type { ComputedRef, Ref } from 'vue'\nimport { createScope } from '@xihan-ui/core'\nimport { connectRadioGroup, radioGroupMachine } 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 RadioGroupContext {\n api: ComputedRef<RadioGroupApi>\n /** 状态机实例,供部件上报 DOM 侧的事实(如条目卸载带走了焦点)。 */\n service: Service<RadioGroupSchema>\n /** root 节点:条目集合的查询容器,同时是 segmented 形态滑块测量的参照系。 */\n rootRef: Ref<HTMLElement | null>\n /**\n * 已挂载的 label 部件数量,由 XhRadioGroupLabel 自行登记。\n * 根的 aria-labelledby 据此决定输不输出:只看 label 属性有没有值不够,手写选项时标题可能根本没渲染。\n */\n labelCount: Ref<number>\n}\n\nexport function useRadioGroup(\n props: RadioGroupSchema['props'],\n onValueChange?: RadioGroupSchema['props']['onValueChange'],\n): RadioGroupContext {\n const idGen = createVueIdGenerator()\n const scope = createScope(null, idGen)\n const rootRef = ref<HTMLElement | null>(null)\n const labelCount = ref(0)\n const service = useMachine(radioGroupMachine, () => ({ ...props, labelled: labelCount.value > 0, onValueChange }), scope)\n\n // 滑块的量测在机器里跑,DOM 侧的取值口经 refs 交进去\n service.refs.set('getRootEl', () => rootRef.value)\n\n const api = computed(() => connectRadioGroup(service, vueNormalize))\n return { api, service, rootRef, labelCount }\n}\n"],"mappings":";;;;;;;AA8BA,SAAgB,cACd,OACA,eACmB;CAEnB,MAAM,QAAQ,YAAY,MADZ,qBACsB,CAAC;CACrC,MAAM,UAAU,IAAwB,IAAI;CAC5C,MAAM,aAAa,IAAI,CAAC;CACxB,MAAM,UAAU,WAAW,0BAA0B;EAAE,GAAG;EAAO,UAAU,WAAW,QAAQ;EAAG;CAAc,IAAI,KAAK;CAGxH,QAAQ,KAAK,IAAI,mBAAmB,QAAQ,KAAK;CAGjD,OAAO;EAAE,KADG,eAAe,kBAAkB,SAAS,YAAY,CACvD;EAAG;EAAS;EAAS;CAAW;AAC7C"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"rating.d.ts","names":[],"sources":["../../../src/components/rating/rating.ts"],"mappings":";;;;;
|
|
1
|
+
{"version":3,"file":"rating.d.ts","names":[],"sources":["../../../src/components/rating/rating.ts"],"mappings":";;;;;KAkBK,cAAc;;KAGP,sBAAsB,KAChC;;KAYU,sBAAsB;cAErB,4BAAY,8BAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAaE,MAAA,SAAS;;;IACR,MAAA,SAAS;;;IACT,MAAA,SAAS;;;IACD,MAAA,SAAS;;;;;EAId,iBAAA,UAAA,UAAU;EACZ,iBAAA,QAAA,UAAU;EACR,iBAAA,UAAA,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IATd,MAAA,SAAS;;;IACR,MAAA,SAAS;;;IACT,MAAA,SAAS;;;IACD,MAAA,SAAS;;;;;;;;;;;;;EAS/B,WAAC,OAAO,wBAAwB;kCAwB5C;cAEW,6BAAa,0BAAA,oBAAA,4BAAA;;8BAMxB,qCAAA,iDAAA,aAAA,eAAA,oDAAA;cAEW,+BAAe,0BAAA,oBAAA,4BAAA;;8BAS1B,qCAAA,iDAAA,aAAA,eAAA,oDAAA;cAEW,iCAAiB,0BAAA,oBAAA,4BAAA;;8BAW5B,qCAAA,iDAAA,aAAA,eAAA,oDAAA;cAEW,4BAAY,8BAAA;;IAIc,MAAA;;;;;;;IAAA,MAAA;;;;EAGzB,WAAC,OAAO,wBAAwB;kCA+B5C;cAEW,mCAAmB,0BAAA,oBAAA,4BAAA;;8BAM9B,qCAAA,iDAAA,aAAA,eAAA,oDAAA"}
|
|
@@ -1,5 +1,6 @@
|
|
|
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 { provideRating, useRatingContext } from "./context.js";
|
|
4
5
|
import { useRating } from "./use-rating.js";
|
|
5
6
|
import { computed, defineComponent, h, onBeforeUnmount, ref, watch } from "vue";
|
|
@@ -75,7 +76,12 @@ const XhRatingControl = defineComponent({
|
|
|
75
76
|
name: "XhRatingControl",
|
|
76
77
|
setup(_, { slots }) {
|
|
77
78
|
const ctx = useRatingContext();
|
|
78
|
-
|
|
79
|
+
const fieldWiring = useFieldGroupWiring();
|
|
80
|
+
const fieldLabel = useFieldLabelWiring();
|
|
81
|
+
return () => h("div", fieldLabel.value({
|
|
82
|
+
...fieldWiring.value,
|
|
83
|
+
...ctx.api.value.getControlProps()
|
|
84
|
+
}), slots.default?.());
|
|
79
85
|
}
|
|
80
86
|
});
|
|
81
87
|
const XhRatingValueText = defineComponent({
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"rating.js","names":[],"sources":["../../../src/components/rating/rating.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// 提供 rating 相关实现。\n\nimport type { Direction, Size, Tone } from '@xihan-ui/core'\nimport type { RatingApi, RatingItemState, RatingSchema } 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 { provideRating, useRatingContext } from './context'\nimport { useRating } from './use-rating'\n\ntype RatingProps = RatingSchema['props']\n\n/** 默认插槽的载荷:评分与预览值、星星序号表,以及取单颗星状态与改写评分的句柄。 */\nexport type RatingRootSlotProps = Pick<\n RatingApi,\n | 'value'\n | 'hoveredValue'\n | 'highlightedValue'\n | 'count'\n | 'empty'\n | 'items'\n | 'getItemState'\n | 'setValue'\n>\n\n/** 条目默认插槽的载荷:该颗星的选中、点亮与半亮状态。 */\nexport type RatingItemSlotProps = RatingItemState\n\nexport const XhRatingRoot = defineComponent({\n name: 'XhRatingRoot',\n props: {\n // 缺席值 undefined 表示非受控\n value: { type: Number },\n defaultValue: { type: Number },\n count: { type: Number },\n allowHalf: Boolean,\n allowClear: { type: Boolean, default: undefined },\n disabled: { type: Boolean, default: undefined },\n readOnly: { type: Boolean, default: undefined },\n required: { type: Boolean, default: undefined },\n name: { type: String },\n dir: { type: String as PropType<Direction> },\n tone: { type: String as PropType<Tone> },\n size: { type: String as PropType<Size> },\n translations: { type: Object as PropType<RatingProps['translations']> },\n },\n // value-change 携带 { value },update:value 携带裸值;hover-change 是预览通道\n emits: {\n 'value-change': (_details: PayloadOf<RatingProps, 'onValueChange'>) => true,\n 'update:value': (_value: PayloadOf<RatingProps, 'onValueChange'>['value']) => true,\n 'hover-change': (_details: PayloadOf<RatingProps, 'onHoverChange'>) => true,\n },\n slots: Object as SlotsType<{\n default?: (props: RatingRootSlotProps) => VNode[]\n }>,\n setup(props, { slots, emit }) {\n const onValueChange: RatingProps['onValueChange'] = (details) => {\n emit('value-change', details)\n emit('update:value', details.value)\n }\n const onHoverChange: RatingProps['onHoverChange'] = (details) => {\n emit('hover-change', details)\n }\n const ctx = useRating(withXhConfig('rating', useFormControlProps(props)) as RatingProps, { onValueChange, onHoverChange })\n provideRating(ctx)\n return () => h('div', ctx.api.value.getRootProps() as Record<string, unknown>, slots.default?.({\n value: ctx.api.value.value,\n hoveredValue: ctx.api.value.hoveredValue,\n highlightedValue: ctx.api.value.highlightedValue,\n count: ctx.api.value.count,\n empty: ctx.api.value.empty,\n // 条目序号列表,供 v-for 渲染星星\n items: ctx.api.value.items,\n getItemState: ctx.api.value.getItemState,\n setValue: ctx.api.value.setValue,\n }))\n },\n})\n\nexport const XhRatingLabel = defineComponent({\n name: 'XhRatingLabel',\n setup(_, { slots }) {\n const ctx = useRatingContext()\n return () => h('span', ctx.api.value.getLabelProps() as Record<string, unknown>, slots.default?.())\n },\n})\n\nexport const XhRatingControl = defineComponent({\n name: 'XhRatingControl',\n setup(_, { slots }) {\n const ctx = useRatingContext()\n return () => h('div', ctx.api.value.getControlProps() as Record<string, unknown
|
|
1
|
+
{"version":3,"file":"rating.js","names":[],"sources":["../../../src/components/rating/rating.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// 提供 rating 相关实现。\n\nimport type { Direction, Size, Tone } from '@xihan-ui/core'\nimport type { RatingApi, RatingItemState, RatingSchema } 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 { useFieldGroupWiring, useFieldLabelWiring } from '../field/use-field-control'\nimport { useFormControlProps } from '../form/use-form-control'\nimport { provideRating, useRatingContext } from './context'\nimport { useRating } from './use-rating'\n\ntype RatingProps = RatingSchema['props']\n\n/** 默认插槽的载荷:评分与预览值、星星序号表,以及取单颗星状态与改写评分的句柄。 */\nexport type RatingRootSlotProps = Pick<\n RatingApi,\n | 'value'\n | 'hoveredValue'\n | 'highlightedValue'\n | 'count'\n | 'empty'\n | 'items'\n | 'getItemState'\n | 'setValue'\n>\n\n/** 条目默认插槽的载荷:该颗星的选中、点亮与半亮状态。 */\nexport type RatingItemSlotProps = RatingItemState\n\nexport const XhRatingRoot = defineComponent({\n name: 'XhRatingRoot',\n props: {\n // 缺席值 undefined 表示非受控\n value: { type: Number },\n defaultValue: { type: Number },\n count: { type: Number },\n allowHalf: Boolean,\n allowClear: { type: Boolean, default: undefined },\n disabled: { type: Boolean, default: undefined },\n readOnly: { type: Boolean, default: undefined },\n required: { type: Boolean, default: undefined },\n name: { type: String },\n dir: { type: String as PropType<Direction> },\n tone: { type: String as PropType<Tone> },\n size: { type: String as PropType<Size> },\n translations: { type: Object as PropType<RatingProps['translations']> },\n },\n // value-change 携带 { value },update:value 携带裸值;hover-change 是预览通道\n emits: {\n 'value-change': (_details: PayloadOf<RatingProps, 'onValueChange'>) => true,\n 'update:value': (_value: PayloadOf<RatingProps, 'onValueChange'>['value']) => true,\n 'hover-change': (_details: PayloadOf<RatingProps, 'onHoverChange'>) => true,\n },\n slots: Object as SlotsType<{\n default?: (props: RatingRootSlotProps) => VNode[]\n }>,\n setup(props, { slots, emit }) {\n const onValueChange: RatingProps['onValueChange'] = (details) => {\n emit('value-change', details)\n emit('update:value', details.value)\n }\n const onHoverChange: RatingProps['onHoverChange'] = (details) => {\n emit('hover-change', details)\n }\n const ctx = useRating(withXhConfig('rating', useFormControlProps(props)) as RatingProps, { onValueChange, onHoverChange })\n provideRating(ctx)\n return () => h('div', ctx.api.value.getRootProps() as Record<string, unknown>, slots.default?.({\n value: ctx.api.value.value,\n hoveredValue: ctx.api.value.hoveredValue,\n highlightedValue: ctx.api.value.highlightedValue,\n count: ctx.api.value.count,\n empty: ctx.api.value.empty,\n // 条目序号列表,供 v-for 渲染星星\n items: ctx.api.value.items,\n getItemState: ctx.api.value.getItemState,\n setValue: ctx.api.value.setValue,\n }))\n },\n})\n\nexport const XhRatingLabel = defineComponent({\n name: 'XhRatingLabel',\n setup(_, { slots }) {\n const ctx = useRatingContext()\n return () => h('span', ctx.api.value.getLabelProps() as Record<string, unknown>, slots.default?.())\n },\n})\n\nexport const XhRatingControl = defineComponent({\n name: 'XhRatingControl',\n setup(_, { slots }) {\n const ctx = useRatingContext()\n // 放进表单字段时,字段的标题与说明接到星组上:读屏进组时念组名与说明\n const fieldWiring = useFieldGroupWiring()\n const fieldLabel = useFieldLabelWiring()\n return () => h('div', fieldLabel.value({ ...fieldWiring.value, ...ctx.api.value.getControlProps() as Record<string, unknown> }), slots.default?.())\n },\n})\n\nexport const XhRatingValueText = defineComponent({\n name: 'XhRatingValueText',\n setup(_, { slots }) {\n const ctx = useRatingContext()\n // 分值文本:写在 root 里、control 的兄弟;没给内容就填当前该点亮到的那个数\n return () => h(\n 'span',\n ctx.api.value.getValueTextProps() as Record<string, unknown>,\n slots.default?.() ?? ctx.api.value.valueText,\n )\n },\n})\n\nexport const XhRatingItem = defineComponent({\n name: 'XhRatingItem',\n props: {\n // 星序号,兼收字符串;往下传前统一归成数字\n value: { type: [Number, String] as PropType<number | string>, required: true },\n },\n slots: Object as SlotsType<{\n default?: (props: RatingItemSlotProps) => VNode[]\n }>,\n setup(props, { slots }) {\n const ctx = useRatingContext()\n const item = computed(() => ({ value: Number(props.value) }))\n\n // 本条目持有焦点时,序号变更重报焦点条目,卸载时上报评分带失焦\n const itemEl = ref<HTMLElement | null>(null)\n watch(() => item.value.value, (next, prev) => {\n if (next === prev)\n return\n const { service } = ctx\n if (service.getStatus() !== 'Started')\n return\n if (itemEl.value && service.scope.getActiveElement() === itemEl.value)\n service.send({ type: 'ITEM.FOCUS', index: next })\n })\n onBeforeUnmount(() => {\n const { service } = ctx\n if (service.getStatus() !== 'Started')\n return\n // 按「本节点当下正持有焦点」判定,不按序号比对\n if (itemEl.value && service.scope.getActiveElement() === itemEl.value)\n service.send({ type: 'CONTROL.BLUR' })\n })\n\n return () => h('span', {\n ...ctx.api.value.getItemProps(item.value) as Record<string, unknown>,\n ref: itemEl,\n }, slots.default?.(ctx.api.value.getItemState(item.value)))\n },\n})\n\nexport const XhRatingHiddenInput = defineComponent({\n name: 'XhRatingHiddenInput',\n setup() {\n const ctx = useRatingContext()\n return () => h('input', ctx.api.value.getHiddenInputProps() as Record<string, unknown>)\n },\n})\n"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"sankey-chart.d.ts","names":[],"sources":["../../../src/components/sankey-chart/sankey-chart.ts"],"mappings":";;;;KA8BK,mBAAmB;;KAGZ,2BAA2B,KAAK;;UAG3B;EACf,QAAQ;EACR,SAAS;;;
|
|
1
|
+
{"version":3,"file":"sankey-chart.d.ts","names":[],"sources":["../../../src/components/sankey-chart/sankey-chart.ts"],"mappings":";;;;KA8BK,mBAAmB;;KAGZ,2BAA2B,KAAK;;UAG3B;EACf,QAAQ;EACR,SAAS;;;cAuDE,oCAAoB,0BAAA,oBAAA,4BAAA;;8BAM/B,qCAAA,iDAAA,aAAA,eAAA,oDAAA;;cAGW,mCAAmB,0BAAA,oBAAA,4BAAA;;8BAa9B,qCAAA,iDAAA,aAAA,eAAA,oDAAA;;cAGW,qCAAqB,0BAAA,oBAAA,4BAAA;;8BAShC,qCAAA,iDAAA,aAAA,eAAA,oDAAA;;cAGW,iCAAiB,0BAAA,oBAAA,4BAAA;;8BAU5B,qCAAA,iDAAA,aAAA,eAAA,oDAAA;;cAGW,oCAAoB,0BAAA,oBAAA,4BAAA;;;EAGnB,WAAC,OAAO,gCAAgC;kCAWpD;;cAGW,kCAAkB,0BAAA,oBAAA,4BAAA;;8BAM7B,qCAAA,iDAAA,aAAA,eAAA,oDAAA;;cAGW,iCAAiB,8BAAA;;IAIF,MAAA,kBAAkB;;;IAClB,MAAA,kBAAkB;;;IACX,MAAA,SAAS;;;IACX,MAAA,SAAS;;;IACT,MAAA,SAAS;;;IACV,MAAA,SAAS;;;IACC,MAAA,SAAS,qBAAqB;;;IACrC,MAAA;;;IACO,MAAA;;;IACa,MAAA,SAAS;;;;;;;;;;;;;;IAI5B,MAAA,SAAS,QAAQ;;;;;EAId,yBAAA,UAAA,UAAU;EACZ,wBAAA,SAAA,UAAU;EACX,sBAAA,UAAA,UAAU;EACf,qBAAA,MAAA,UAAU;EACV,iBAAA,UAAA,UAAU;EACX,gBAAA,UAAA,UAAU;;;IAtBZ,MAAA,kBAAkB;;;IAClB,MAAA,kBAAkB;;;IACX,MAAA,SAAS;;;IACX,MAAA,SAAS;;;IACT,MAAA,SAAS;;;IACV,MAAA,SAAS;;;IACC,MAAA,SAAS,qBAAqB;;;IACrC,MAAA;;;IACO,MAAA;;;IACa,MAAA,SAAS;;;;;;;;;;;;;;IAI5B,MAAA,SAAS,QAAQ;;;;;;;;;;;;;;EAavC,WAAC,OAAO,6BAA6B;;EAErC,gBAAM;;EAEN,WAAC,OAAO,gCAAgC;;EAE1C,cAAM;kCA8ChB"}
|
|
@@ -36,7 +36,7 @@ function renderTooltipContent(api) {
|
|
|
36
36
|
/** 摘要与数据表:由根自动生成、视觉隐藏,保证无障碍等价物始终存在。 */
|
|
37
37
|
function renderA11y(api) {
|
|
38
38
|
const { columns, rows } = api.table;
|
|
39
|
-
return [h("p", api.getSummaryProps(), api.summary), h("table", api.getTableProps(), [
|
|
39
|
+
return [h("p", api.getSummaryProps(), api.summary), h("div", api.getTableRegionProps(), [h("table", api.getTableProps(), [
|
|
40
40
|
h("caption", api.tableCaption),
|
|
41
41
|
h("thead", [h("tr", columns.map((column) => h("th", {
|
|
42
42
|
key: column.id,
|
|
@@ -46,7 +46,7 @@ function renderA11y(api) {
|
|
|
46
46
|
key: c,
|
|
47
47
|
scope: "row"
|
|
48
48
|
}, cell.text) : h("td", { key: c }, cell.text)))))
|
|
49
|
-
])];
|
|
49
|
+
])])];
|
|
50
50
|
}
|
|
51
51
|
/** 标题:图表的可及名来源。 */
|
|
52
52
|
const XhSankeyChartCaption = defineComponent({
|