@xihan-ui/vue 1.0.0-alpha.3 → 1.0.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 +2057 -0
- package/dist/backgrounds.d.ts.map +1 -1
- package/dist/backgrounds.js +1 -5
- package/dist/backgrounds.js.map +1 -1
- package/dist/behavior.d.ts +38 -0
- package/dist/behavior.d.ts.map +1 -0
- package/dist/behavior.js +74 -0
- package/dist/behavior.js.map +1 -0
- package/dist/components/accordion/accordion.d.ts +1 -1
- package/dist/components/accordion/context.js +2 -2
- package/dist/components/accordion/context.js.map +1 -1
- package/dist/components/affix/context.js +1 -1
- package/dist/components/affix/context.js.map +1 -1
- package/dist/components/alert/context.js +1 -1
- package/dist/components/alert/context.js.map +1 -1
- package/dist/components/anchor/anchor.d.ts +2 -2
- package/dist/components/anchor/context.js +1 -1
- package/dist/components/anchor/context.js.map +1 -1
- package/dist/components/avatar/context.js +1 -1
- package/dist/components/avatar/context.js.map +1 -1
- package/dist/components/avatar-group/context.js +1 -1
- package/dist/components/avatar-group/context.js.map +1 -1
- package/dist/components/back-top/back-top.d.ts +2 -2
- package/dist/components/back-top/context.js +1 -1
- package/dist/components/back-top/context.js.map +1 -1
- package/dist/components/badge/badge.d.ts +142 -50
- package/dist/components/badge/badge.d.ts.map +1 -1
- package/dist/components/badge/badge.js +67 -37
- package/dist/components/badge/badge.js.map +1 -1
- package/dist/components/badge/context.js +15 -0
- package/dist/components/badge/context.js.map +1 -0
- package/dist/components/breadcrumb/breadcrumb.d.ts +1 -1
- package/dist/components/breadcrumb/context.js +1 -1
- package/dist/components/breadcrumb/context.js.map +1 -1
- package/dist/components/button-group/button-group.d.ts +1 -1
- package/dist/components/calendar/context.js +2 -2
- package/dist/components/calendar/context.js.map +1 -1
- package/dist/components/card/card.d.ts +1 -1
- package/dist/components/card/context.js +1 -1
- package/dist/components/card/context.js.map +1 -1
- package/dist/components/carousel/context.js +1 -1
- package/dist/components/carousel/context.js.map +1 -1
- package/dist/components/cascader/cascader.d.ts +4 -4
- package/dist/components/cascader/cascader.d.ts.map +1 -1
- package/dist/components/cascader/cascader.js +14 -4
- package/dist/components/cascader/cascader.js.map +1 -1
- package/dist/components/cascader/context.js +2 -2
- package/dist/components/cascader/context.js.map +1 -1
- package/dist/components/cascader/use-cascader.js +1 -1
- package/dist/components/cascader/use-cascader.js.map +1 -1
- package/dist/components/checkbox-group/context.js +2 -2
- package/dist/components/checkbox-group/context.js.map +1 -1
- package/dist/components/clipboard/context.js +1 -1
- package/dist/components/clipboard/context.js.map +1 -1
- package/dist/components/collapsible/context.js +1 -1
- package/dist/components/collapsible/context.js.map +1 -1
- package/dist/components/color-picker/color-picker.d.ts +12 -3
- package/dist/components/color-picker/color-picker.d.ts.map +1 -1
- package/dist/components/color-picker/color-picker.js +7 -1
- package/dist/components/color-picker/color-picker.js.map +1 -1
- package/dist/components/color-picker/context.js +2 -2
- package/dist/components/color-picker/context.js.map +1 -1
- package/dist/components/color-picker/use-color-picker.js +1 -1
- package/dist/components/color-picker/use-color-picker.js.map +1 -1
- package/dist/components/combobox/combobox.d.ts +3 -3
- package/dist/components/combobox/combobox.d.ts.map +1 -1
- package/dist/components/combobox/combobox.js +10 -4
- package/dist/components/combobox/combobox.js.map +1 -1
- package/dist/components/combobox/context.js +3 -3
- package/dist/components/combobox/context.js.map +1 -1
- package/dist/components/combobox/use-combobox.js +1 -1
- package/dist/components/combobox/use-combobox.js.map +1 -1
- package/dist/components/composer/context.js +1 -1
- package/dist/components/composer/context.js.map +1 -1
- package/dist/components/context-menu/context-menu.d.ts +4 -4
- package/dist/components/context-menu/context-menu.d.ts.map +1 -1
- package/dist/components/context-menu/context-menu.js +3 -1
- package/dist/components/context-menu/context-menu.js.map +1 -1
- package/dist/components/context-menu/context.js +5 -5
- package/dist/components/context-menu/context.js.map +1 -1
- package/dist/components/context-menu/use-context-menu.js +1 -1
- package/dist/components/context-menu/use-context-menu.js.map +1 -1
- package/dist/components/date-field/context.js +1 -1
- package/dist/components/date-field/context.js.map +1 -1
- package/dist/components/date-field/date-field.d.ts +2 -2
- package/dist/components/date-picker/context.js +13 -4
- package/dist/components/date-picker/context.js.map +1 -1
- package/dist/components/date-picker/date-picker.d.ts +80 -44
- package/dist/components/date-picker/date-picker.d.ts.map +1 -1
- package/dist/components/date-picker/date-picker.js +68 -26
- package/dist/components/date-picker/date-picker.js.map +1 -1
- package/dist/components/date-picker/use-date-picker.js +1 -1
- package/dist/components/date-picker/use-date-picker.js.map +1 -1
- package/dist/components/descriptions/context.js +1 -1
- package/dist/components/descriptions/context.js.map +1 -1
- package/dist/components/dialog/context.js +1 -1
- package/dist/components/dialog/context.js.map +1 -1
- package/dist/components/dialog/dialog.d.ts +1 -1
- package/dist/components/drawer/context.js +1 -1
- package/dist/components/drawer/context.js.map +1 -1
- package/dist/components/drawer/drawer.d.ts +2 -2
- package/dist/components/dynamic-input/context.js +2 -2
- package/dist/components/dynamic-input/context.js.map +1 -1
- package/dist/components/editable/context.js +1 -1
- package/dist/components/editable/context.js.map +1 -1
- package/dist/components/empty-state/context.js +1 -1
- package/dist/components/empty-state/context.js.map +1 -1
- package/dist/components/field/context.d.ts +9 -0
- package/dist/components/field/context.d.ts.map +1 -0
- package/dist/components/field/context.js +6 -2
- package/dist/components/field/context.js.map +1 -1
- package/dist/components/field/field.d.ts +26 -2
- package/dist/components/field/field.d.ts.map +1 -1
- package/dist/components/field/field.js +15 -4
- package/dist/components/field/field.js.map +1 -1
- package/dist/components/field/use-field-control.d.ts +41 -0
- package/dist/components/field/use-field-control.d.ts.map +1 -0
- package/dist/components/field/use-field-control.js +77 -0
- package/dist/components/field/use-field-control.js.map +1 -0
- package/dist/components/fieldset/context.js +1 -1
- package/dist/components/fieldset/context.js.map +1 -1
- package/dist/components/file-upload/context.js +2 -2
- package/dist/components/file-upload/context.js.map +1 -1
- package/dist/components/flex/flex.d.ts +9 -0
- package/dist/components/flex/flex.d.ts.map +1 -1
- package/dist/components/flex/flex.js +4 -0
- package/dist/components/flex/flex.js.map +1 -1
- package/dist/components/float-button/context.js +1 -1
- package/dist/components/float-button/context.js.map +1 -1
- package/dist/components/float-button/float-button.d.ts +2 -2
- package/dist/components/floating-panel/context.js +1 -1
- package/dist/components/floating-panel/context.js.map +1 -1
- package/dist/components/floating-panel/floating-panel.d.ts +1 -1
- package/dist/components/form/context.js +2 -2
- package/dist/components/form/context.js.map +1 -1
- package/dist/components/grid/context.js +1 -1
- package/dist/components/grid/context.js.map +1 -1
- package/dist/components/heatmap/context.js +3 -3
- package/dist/components/heatmap/context.js.map +1 -1
- package/dist/components/heatmap/heatmap.d.ts +1 -1
- package/dist/components/hotkeys/hotkeys.d.ts +3 -1
- package/dist/components/hotkeys/hotkeys.d.ts.map +1 -1
- package/dist/components/hotkeys/hotkeys.js +7 -25
- package/dist/components/hotkeys/hotkeys.js.map +1 -1
- package/dist/components/hotkeys/use-hotkeys.d.ts +31 -0
- package/dist/components/hotkeys/use-hotkeys.d.ts.map +1 -0
- package/dist/components/hotkeys/use-hotkeys.js +60 -0
- package/dist/components/hotkeys/use-hotkeys.js.map +1 -0
- package/dist/components/hover-card/context.js +1 -1
- package/dist/components/hover-card/context.js.map +1 -1
- package/dist/components/hover-card/hover-card.d.ts +2 -2
- package/dist/components/hover-card/hover-card.d.ts.map +1 -1
- package/dist/components/hover-card/hover-card.js +3 -1
- package/dist/components/hover-card/hover-card.js.map +1 -1
- package/dist/components/hover-card/use-hover-card.js +1 -1
- package/dist/components/hover-card/use-hover-card.js.map +1 -1
- package/dist/components/icon/icon.d.ts +1 -1
- package/dist/components/icon-wrapper/icon-wrapper.d.ts +1 -1
- package/dist/components/image/context.js +1 -1
- package/dist/components/image/context.js.map +1 -1
- package/dist/components/image-cropper/context.js +1 -1
- package/dist/components/image-cropper/context.js.map +1 -1
- package/dist/components/image-cropper/image-cropper.d.ts +1 -1
- package/dist/components/image-viewer/context.js +1 -1
- package/dist/components/image-viewer/context.js.map +1 -1
- package/dist/components/image-viewer/image-viewer.d.ts +2 -2
- package/dist/components/infinite-scroll/context.js +1 -1
- package/dist/components/infinite-scroll/context.js.map +1 -1
- package/dist/components/infinite-scroll/infinite-scroll.d.ts +1 -1
- package/dist/components/json-viewer/json-viewer.d.ts +12 -3
- package/dist/components/json-viewer/json-viewer.d.ts.map +1 -1
- package/dist/components/json-viewer/json-viewer.js +23 -2
- package/dist/components/json-viewer/json-viewer.js.map +1 -1
- package/dist/components/layout/context.js +1 -1
- package/dist/components/layout/context.js.map +1 -1
- package/dist/components/list/context.js +1 -1
- package/dist/components/list/context.js.map +1 -1
- package/dist/components/list/list.d.ts +1 -1
- package/dist/components/listbox/context.js +3 -3
- package/dist/components/listbox/context.js.map +1 -1
- package/dist/components/loading-bar/context.js +1 -1
- package/dist/components/loading-bar/context.js.map +1 -1
- package/dist/components/log/context.js +1 -1
- package/dist/components/log/context.js.map +1 -1
- package/dist/components/marquee/context.js +1 -1
- package/dist/components/marquee/context.js.map +1 -1
- package/dist/components/mention/context.js +2 -2
- package/dist/components/mention/context.js.map +1 -1
- package/dist/components/mention/mention.d.ts +2 -2
- package/dist/components/mention/mention.d.ts.map +1 -1
- package/dist/components/mention/mention.js +10 -4
- package/dist/components/mention/mention.js.map +1 -1
- package/dist/components/mention/use-mention.js +1 -1
- package/dist/components/mention/use-mention.js.map +1 -1
- package/dist/components/menu/context.js +4 -4
- package/dist/components/menu/context.js.map +1 -1
- package/dist/components/menu/menu.d.ts +3 -3
- package/dist/components/menu/menu.d.ts.map +1 -1
- package/dist/components/menu/menu.js +3 -1
- package/dist/components/menu/menu.js.map +1 -1
- package/dist/components/menu/use-menu.js +1 -1
- package/dist/components/menu/use-menu.js.map +1 -1
- package/dist/components/menubar/context.js +6 -6
- package/dist/components/menubar/context.js.map +1 -1
- package/dist/components/menubar/menubar.d.ts +2 -2
- package/dist/components/menubar/menubar.js.map +1 -1
- package/dist/components/navigation-menu/context.js +1 -1
- package/dist/components/navigation-menu/context.js.map +1 -1
- package/dist/components/navigation-menu/navigation-menu.d.ts +1 -1
- package/dist/components/notification/context.d.ts +23 -0
- package/dist/components/notification/context.d.ts.map +1 -0
- package/dist/components/notification/context.js +28 -0
- package/dist/components/notification/context.js.map +1 -0
- package/dist/components/notification/notification.d.ts +249 -0
- package/dist/components/notification/notification.d.ts.map +1 -0
- package/dist/components/notification/notification.js +179 -0
- package/dist/components/notification/notification.js.map +1 -0
- package/dist/components/notification/use-notification.d.ts +14 -0
- package/dist/components/notification/use-notification.d.ts.map +1 -0
- package/dist/components/notification/use-notification.js +42 -0
- package/dist/components/notification/use-notification.js.map +1 -0
- package/dist/components/number-animation/number-animation.d.ts +1 -1
- package/dist/components/number-field/context.js +1 -1
- package/dist/components/number-field/context.js.map +1 -1
- package/dist/components/number-field/number-field.d.ts +3 -3
- package/dist/components/number-field/number-field.d.ts.map +1 -1
- package/dist/components/number-field/number-field.js +7 -1
- package/dist/components/number-field/number-field.js.map +1 -1
- package/dist/components/page-header/context.js +1 -1
- package/dist/components/page-header/context.js.map +1 -1
- package/dist/components/pagination/context.js +1 -1
- package/dist/components/pagination/context.js.map +1 -1
- package/dist/components/pagination/pagination.d.ts +60 -6
- package/dist/components/pagination/pagination.d.ts.map +1 -1
- package/dist/components/pagination/pagination.js +85 -5
- package/dist/components/pagination/pagination.js.map +1 -1
- package/dist/components/pagination/use-pagination.d.ts +12 -2
- package/dist/components/pagination/use-pagination.d.ts.map +1 -1
- package/dist/components/pagination/use-pagination.js +50 -5
- package/dist/components/pagination/use-pagination.js.map +1 -1
- package/dist/components/password-input/context.js +1 -1
- package/dist/components/password-input/context.js.map +1 -1
- package/dist/components/password-input/password-input.d.ts +2 -2
- package/dist/components/password-input/password-input.d.ts.map +1 -1
- package/dist/components/password-input/password-input.js +7 -1
- package/dist/components/password-input/password-input.js.map +1 -1
- package/dist/components/pin-input/context.js +1 -1
- package/dist/components/pin-input/context.js.map +1 -1
- package/dist/components/pin-input/pin-input.d.ts +1 -1
- package/dist/components/popconfirm/context.js +1 -1
- package/dist/components/popconfirm/context.js.map +1 -1
- package/dist/components/popconfirm/popconfirm.d.ts +1 -1
- package/dist/components/popover/context.js +1 -1
- package/dist/components/popover/context.js.map +1 -1
- package/dist/components/popover/popover.d.ts +2 -2
- package/dist/components/popover/popover.d.ts.map +1 -1
- package/dist/components/popover/popover.js +3 -1
- package/dist/components/popover/popover.js.map +1 -1
- package/dist/components/popover/use-popover.js +1 -1
- package/dist/components/popover/use-popover.js.map +1 -1
- package/dist/components/popselect/context.js +2 -2
- package/dist/components/popselect/context.js.map +1 -1
- package/dist/components/popselect/popselect.d.ts +3 -3
- package/dist/components/popselect/popselect.d.ts.map +1 -1
- package/dist/components/popselect/popselect.js +3 -1
- package/dist/components/popselect/popselect.js.map +1 -1
- package/dist/components/popselect/use-popselect.js +1 -1
- package/dist/components/popselect/use-popselect.js.map +1 -1
- package/dist/components/progress/progress.d.ts +1 -1
- package/dist/components/qr-code/context.js +1 -1
- package/dist/components/qr-code/context.js.map +1 -1
- package/dist/components/radio-group/context.js +2 -2
- package/dist/components/radio-group/context.js.map +1 -1
- package/dist/components/radio-group/radio-group.d.ts +1 -1
- package/dist/components/rating/context.js +1 -1
- package/dist/components/rating/context.js.map +1 -1
- package/dist/components/rating/rating.d.ts +2 -2
- package/dist/components/result/context.js +1 -1
- package/dist/components/result/context.js.map +1 -1
- package/dist/components/scroll-area/context.js +2 -2
- package/dist/components/scroll-area/context.js.map +1 -1
- package/dist/components/scroll-area/scroll-area.d.ts +1 -1
- package/dist/components/scrollbar/context.js +1 -1
- package/dist/components/scrollbar/context.js.map +1 -1
- package/dist/components/scrollbar/scrollbar.d.ts +1 -1
- package/dist/components/segmented/context.js +2 -2
- package/dist/components/segmented/context.js.map +1 -1
- package/dist/components/segmented/segmented.d.ts +1 -1
- package/dist/components/select/context.js +3 -3
- package/dist/components/select/context.js.map +1 -1
- package/dist/components/select/select.d.ts +3 -3
- package/dist/components/select/select.d.ts.map +1 -1
- package/dist/components/select/select.js +7 -3
- package/dist/components/select/select.js.map +1 -1
- package/dist/components/side-nav/context.js +2 -2
- package/dist/components/side-nav/context.js.map +1 -1
- package/dist/components/side-nav/side-nav.d.ts +1 -1
- package/dist/components/signature-pad/context.js +1 -1
- package/dist/components/signature-pad/context.js.map +1 -1
- package/dist/components/skeleton/context.js +1 -1
- package/dist/components/skeleton/context.js.map +1 -1
- package/dist/components/slider/context.js +2 -2
- package/dist/components/slider/context.js.map +1 -1
- package/dist/components/slider/slider.d.ts +1 -1
- package/dist/components/space/context.js +1 -1
- package/dist/components/space/context.js.map +1 -1
- package/dist/components/space/space.d.ts +9 -0
- package/dist/components/space/space.d.ts.map +1 -1
- package/dist/components/space/space.js +4 -0
- package/dist/components/space/space.js.map +1 -1
- package/dist/components/spinner/context.js +1 -1
- package/dist/components/spinner/context.js.map +1 -1
- package/dist/components/spinner/spinner.d.ts +1 -1
- package/dist/components/splitter/context.js +1 -1
- package/dist/components/splitter/context.js.map +1 -1
- package/dist/components/statistic/context.js +1 -1
- package/dist/components/statistic/context.js.map +1 -1
- package/dist/components/statistic/statistic.d.ts +1 -1
- package/dist/components/steps/context.js +2 -2
- package/dist/components/steps/context.js.map +1 -1
- package/dist/components/steps/steps.d.ts +2 -2
- package/dist/components/table/context.js +4 -4
- package/dist/components/table/context.js.map +1 -1
- package/dist/components/table/table.d.ts +62 -3
- package/dist/components/table/table.d.ts.map +1 -1
- package/dist/components/table/table.js +37 -1
- package/dist/components/table/table.js.map +1 -1
- package/dist/components/table/use-table.d.ts +1 -1
- package/dist/components/table/use-table.d.ts.map +1 -1
- package/dist/components/table/use-table.js +3 -2
- package/dist/components/table/use-table.js.map +1 -1
- package/dist/components/tabs/context.js +1 -1
- package/dist/components/tabs/context.js.map +1 -1
- package/dist/components/tabs/tabs.d.ts +1 -1
- package/dist/components/tag/context.js +1 -1
- package/dist/components/tag/context.js.map +1 -1
- package/dist/components/tag/use-tag.js +14 -2
- package/dist/components/tag/use-tag.js.map +1 -1
- package/dist/components/tags-input/context.js +2 -2
- package/dist/components/tags-input/context.js.map +1 -1
- package/dist/components/tags-input/tags-input.d.ts +3 -3
- package/dist/components/tags-input/tags-input.d.ts.map +1 -1
- package/dist/components/tags-input/tags-input.js +7 -1
- package/dist/components/tags-input/tags-input.js.map +1 -1
- package/dist/components/text-field/context.js +1 -1
- package/dist/components/text-field/context.js.map +1 -1
- package/dist/components/text-field/text-field.d.ts +1 -1
- package/dist/components/text-field/text-field.d.ts.map +1 -1
- package/dist/components/text-field/text-field.js +7 -3
- package/dist/components/text-field/text-field.js.map +1 -1
- package/dist/components/thread/context.d.ts +7 -0
- package/dist/components/thread/context.d.ts.map +1 -0
- package/dist/components/thread/context.js +1 -1
- package/dist/components/thread/context.js.map +1 -1
- package/dist/components/time-field/context.js +1 -1
- package/dist/components/time-field/context.js.map +1 -1
- package/dist/components/time-field/time-field.d.ts +2 -2
- package/dist/components/time-picker/context.js +2 -2
- package/dist/components/time-picker/context.js.map +1 -1
- package/dist/components/time-picker/time-picker.d.ts +5 -5
- package/dist/components/time-picker/time-picker.d.ts.map +1 -1
- package/dist/components/time-picker/time-picker.js +10 -1
- package/dist/components/time-picker/time-picker.js.map +1 -1
- package/dist/components/time-picker/use-time-picker.d.ts +1 -0
- package/dist/components/time-picker/use-time-picker.d.ts.map +1 -1
- package/dist/components/time-picker/use-time-picker.js +3 -0
- package/dist/components/time-picker/use-time-picker.js.map +1 -1
- package/dist/components/timeline/context.js +2 -2
- package/dist/components/timeline/context.js.map +1 -1
- package/dist/components/timeline/timeline.d.ts +1 -1
- package/dist/components/timer/context.js +1 -1
- package/dist/components/timer/context.js.map +1 -1
- package/dist/components/toast/context.js +1 -1
- package/dist/components/toast/context.js.map +1 -1
- package/dist/components/toast/toast.d.ts +3 -15
- package/dist/components/toast/toast.d.ts.map +1 -1
- package/dist/components/toast/toast.js +1 -12
- package/dist/components/toast/toast.js.map +1 -1
- package/dist/components/toast/use-toast.d.ts.map +1 -1
- package/dist/components/toast/use-toast.js +1 -7
- package/dist/components/toast/use-toast.js.map +1 -1
- package/dist/components/toggle-group/context.js +1 -1
- package/dist/components/toggle-group/context.js.map +1 -1
- package/dist/components/toggle-group/toggle-group.d.ts +10 -1
- package/dist/components/toggle-group/toggle-group.d.ts.map +1 -1
- package/dist/components/toggle-group/toggle-group.js +4 -0
- package/dist/components/toggle-group/toggle-group.js.map +1 -1
- package/dist/components/toolbar/context.js +1 -1
- package/dist/components/toolbar/context.js.map +1 -1
- package/dist/components/toolbar/toolbar.d.ts +1 -1
- package/dist/components/tooltip/context.js +1 -1
- package/dist/components/tooltip/context.js.map +1 -1
- package/dist/components/tooltip/tooltip.d.ts +2 -2
- package/dist/components/tour/context.js +1 -1
- package/dist/components/tour/context.js.map +1 -1
- package/dist/components/tour/tour.d.ts +2 -2
- package/dist/components/transfer/context.js +3 -3
- package/dist/components/transfer/context.js.map +1 -1
- package/dist/components/tree/context.js +2 -2
- package/dist/components/tree/context.js.map +1 -1
- package/dist/components/tree/tree.d.ts +20 -0
- package/dist/components/tree/tree.d.ts.map +1 -1
- package/dist/components/tree/tree.js +9 -0
- package/dist/components/tree/tree.js.map +1 -1
- package/dist/components/tree-select/context.js +2 -2
- package/dist/components/tree-select/context.js.map +1 -1
- package/dist/components/tree-select/tree-select.d.ts +3 -3
- package/dist/components/tree-select/tree-select.d.ts.map +1 -1
- package/dist/components/tree-select/tree-select.js +14 -4
- package/dist/components/tree-select/tree-select.js.map +1 -1
- package/dist/components/tree-select/use-tree-select.js +1 -1
- package/dist/components/tree-select/use-tree-select.js.map +1 -1
- package/dist/components/typography/context.js +1 -1
- package/dist/components/typography/context.js.map +1 -1
- package/dist/components/virtualizer/context.js +1 -1
- package/dist/components/virtualizer/context.js.map +1 -1
- package/dist/components/watermark/context.js +1 -1
- package/dist/components/watermark/context.js.map +1 -1
- package/dist/config/config.js +1 -1
- package/dist/config/config.js.map +1 -1
- package/dist/index.d.ts +16 -9
- package/dist/index.js +15 -8
- package/dist/package.js +1 -1
- package/dist/runtime/use-scrollbars.js +66 -0
- package/dist/runtime/use-scrollbars.js.map +1 -0
- package/dist/services/dialog-service.d.ts +33 -8
- package/dist/services/dialog-service.d.ts.map +1 -1
- package/dist/services/dialog-service.js +44 -20
- package/dist/services/dialog-service.js.map +1 -1
- package/dist/services/glyph.js +41 -1
- package/dist/services/glyph.js.map +1 -1
- package/dist/services/loading-bar-service.d.ts +46 -0
- package/dist/services/loading-bar-service.d.ts.map +1 -0
- package/dist/services/loading-bar-service.js +70 -0
- package/dist/services/loading-bar-service.js.map +1 -0
- package/dist/services/mount-host.js +35 -0
- package/dist/services/mount-host.js.map +1 -0
- package/dist/services/notification-service.d.ts +46 -0
- package/dist/services/notification-service.d.ts.map +1 -0
- package/dist/services/notification-service.js +91 -0
- package/dist/services/notification-service.js.map +1 -0
- package/dist/services/service-config.js +16 -0
- package/dist/services/service-config.js.map +1 -0
- package/dist/services/toast-service.d.ts +20 -12
- package/dist/services/toast-service.d.ts.map +1 -1
- package/dist/services/toast-service.js +103 -50
- package/dist/services/toast-service.js.map +1 -1
- package/package.json +18 -14
- package/dist/components/toaster/context.js +0 -19
- package/dist/components/toaster/context.js.map +0 -1
- package/dist/components/toaster/toaster.d.ts +0 -135
- package/dist/components/toaster/toaster.d.ts.map +0 -1
- package/dist/components/toaster/toaster.js +0 -91
- package/dist/components/toaster/toaster.js.map +0 -1
- package/dist/components/toaster/use-toaster.d.ts +0 -15
- package/dist/components/toaster/use-toaster.d.ts.map +0 -1
- package/dist/components/toaster/use-toaster.js +0 -23
- package/dist/components/toaster/use-toaster.js.map +0 -1
|
@@ -1,14 +1,59 @@
|
|
|
1
|
+
import { useOverlayExit } from "../../runtime/use-overlay-exit.js";
|
|
1
2
|
import { vueNormalize } from "../../runtime/normalize-props.js";
|
|
3
|
+
import { useXhConfig } from "../../config/config.js";
|
|
2
4
|
import { useMachine } from "../../runtime/use-machine.js";
|
|
3
|
-
import {
|
|
5
|
+
import { createVueIdGenerator } from "../../runtime/vue-id.js";
|
|
6
|
+
import { computed, ref } from "vue";
|
|
4
7
|
import { connectPagination, paginationMachine } from "@xihan-ui/headless";
|
|
8
|
+
import { createRuntimeConfig, createScope } from "@xihan-ui/kernel";
|
|
9
|
+
import { createPositionEngine } from "@xihan-ui/position";
|
|
5
10
|
//#region src/components/pagination/use-pagination.ts
|
|
6
|
-
function usePagination(props, onPageChange) {
|
|
11
|
+
function usePagination(props, onPageChange, onPageSizeChange) {
|
|
12
|
+
const xhConfig = useXhConfig();
|
|
13
|
+
const ellipsisRef = ref(null);
|
|
14
|
+
const positionerRef = ref(null);
|
|
15
|
+
const contentRef = ref(null);
|
|
16
|
+
const idGen = createVueIdGenerator();
|
|
17
|
+
const scope = createScope(null, idGen);
|
|
7
18
|
const service = useMachine(paginationMachine, () => ({
|
|
8
19
|
...props,
|
|
9
|
-
onPageChange
|
|
10
|
-
|
|
11
|
-
|
|
20
|
+
onPageChange,
|
|
21
|
+
onPageSizeChange
|
|
22
|
+
}), scope);
|
|
23
|
+
let config = null;
|
|
24
|
+
if (typeof document !== "undefined") {
|
|
25
|
+
config = createRuntimeConfig({
|
|
26
|
+
scope,
|
|
27
|
+
idGenerator: idGen
|
|
28
|
+
});
|
|
29
|
+
const registerLayer = () => config.layerRegistry.register({
|
|
30
|
+
kind: "popover",
|
|
31
|
+
node: () => contentRef.value,
|
|
32
|
+
branches: () => [ellipsisRef.value, positionerRef.value].filter(Boolean),
|
|
33
|
+
isModal: () => false,
|
|
34
|
+
setModal: () => {},
|
|
35
|
+
surfaces: () => []
|
|
36
|
+
});
|
|
37
|
+
service.refs.set("config", config);
|
|
38
|
+
service.refs.set("registerLayer", registerLayer);
|
|
39
|
+
service.refs.set("position", createPositionEngine());
|
|
40
|
+
}
|
|
41
|
+
service.refs.set("getAnchorEl", () => ellipsisRef.value);
|
|
42
|
+
service.refs.set("getFloatingEl", () => positionerRef.value);
|
|
43
|
+
service.refs.set("getContentEl", () => contentRef.value);
|
|
44
|
+
const api = computed(() => connectPagination(service, vueNormalize));
|
|
45
|
+
return {
|
|
46
|
+
api,
|
|
47
|
+
ellipsisRef,
|
|
48
|
+
positionerRef,
|
|
49
|
+
contentRef,
|
|
50
|
+
visible: useOverlayExit({
|
|
51
|
+
config,
|
|
52
|
+
isOpen: () => api.value.openEllipsis != null,
|
|
53
|
+
contentRef
|
|
54
|
+
}),
|
|
55
|
+
portalTarget: computed(() => xhConfig.value.portalContainer?.() ?? config?.portalContainer() ?? "body")
|
|
56
|
+
};
|
|
12
57
|
}
|
|
13
58
|
//#endregion
|
|
14
59
|
export { usePagination };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"use-pagination.js","names":[],"sources":["../../../src/components/pagination/use-pagination.ts"],"sourcesContent":["import type { PaginationApi, PaginationSchema } from '@xihan-ui/headless'\nimport type { ComputedRef } from 'vue'\nimport { connectPagination, paginationMachine } from '@xihan-ui/headless'\nimport { computed } from 'vue'\nimport { vueNormalize } from '../../runtime/normalize-props'\nimport { useMachine } from '../../runtime/use-machine'\n\nexport interface PaginationContext {\n api: ComputedRef<PaginationApi>\n}\n\nexport function usePagination(\n props: PaginationSchema['props'],\n onPageChange?: PaginationSchema['props']['onPageChange'],\n): PaginationContext {\n const service = useMachine(paginationMachine
|
|
1
|
+
{"version":3,"file":"use-pagination.js","names":[],"sources":["../../../src/components/pagination/use-pagination.ts"],"sourcesContent":["import type { PaginationApi, PaginationSchema } from '@xihan-ui/headless'\nimport type { Cleanup, Layer, RuntimeConfig } from '@xihan-ui/kernel'\nimport type { ComputedRef, Ref } from 'vue'\nimport { connectPagination, paginationMachine } from '@xihan-ui/headless'\nimport { createRuntimeConfig, createScope } from '@xihan-ui/kernel'\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 PaginationContext {\n api: ComputedRef<PaginationApi>\n /** 摊开的那个省略位,定位锚点。 */\n ellipsisRef: Ref<HTMLElement | null>\n /** 被定位的浮层。 */\n positionerRef: Ref<HTMLElement | null>\n /** 消解层节点。 */\n contentRef: Ref<HTMLElement | null>\n /** 此刻该不该渲染:退场动画播完之前仍为真。 */\n visible: Ref<boolean>\n /** 浮层搬到哪儿:全局配置的 portalContainer > body。 */\n portalTarget: ComputedRef<string | Element>\n}\n\nexport function usePagination(\n props: PaginationSchema['props'],\n onPageChange?: PaginationSchema['props']['onPageChange'],\n onPageSizeChange?: PaginationSchema['props']['onPageSizeChange'],\n): PaginationContext {\n const xhConfig = useXhConfig()\n const ellipsisRef = 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 const service = useMachine(\n paginationMachine,\n () => ({ ...props, onPageChange, onPageSizeChange }),\n scope,\n )\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 // 省略位记为本层分支:指针按在它上面算层内交互,不该判成点了外面。\n // 浮层壳一并记上:页码列表之外还浮着自绘滚动条,按住它拖动不该把列表消解掉\n branches: () => [ellipsisRef.value, positionerRef.value].filter(Boolean) as Element[],\n // 摊开的页码是非模态的:不陷焦点、不锁滚动、无遮罩\n isModal: () => false,\n setModal: () => {},\n surfaces: () => [],\n })\n\n service.refs.set('config', config)\n service.refs.set('registerLayer', registerLayer)\n service.refs.set('position', createPositionEngine())\n }\n\n // 元素 getter 在无 DOM 环境下也要设:连接层与效应经它们取节点\n service.refs.set('getAnchorEl', () => ellipsisRef.value)\n service.refs.set('getFloatingEl', () => positionerRef.value)\n service.refs.set('getContentEl', () => contentRef.value)\n\n const api = computed(() => connectPagination(service, vueNormalize))\n // 退场闸门:收起从跟着展开态走,改成跟着 presence 走\n const visible = useOverlayExit({\n config,\n isOpen: () => api.value.openEllipsis != null,\n contentRef,\n })\n const portalTarget = computed<string | Element>(\n () => xhConfig.value.portalContainer?.() ?? config?.portalContainer() ?? 'body',\n )\n\n return { api, ellipsisRef, positionerRef, contentRef, visible, portalTarget }\n}\n"],"mappings":";;;;;;;;;;AA2BA,SAAgB,cACd,OACA,cACA,kBACmB;CACnB,MAAM,WAAW,YAAY;CAC7B,MAAM,cAAc,IAAwB,IAAI;CAChD,MAAM,gBAAgB,IAAwB,IAAI;CAClD,MAAM,aAAa,IAAwB,IAAI;CAE/C,MAAM,QAAQ,qBAAqB;CACnC,MAAM,QAAQ,YAAY,MAAM,KAAK;CACrC,MAAM,UAAU,WACd,0BACO;EAAE,GAAG;EAAO;EAAc;CAAiB,IAClD,KACF;CAGA,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,YAAY,OAAO,cAAc,KAAK,CAAC,CAAC,OAAO,OAAO;GAEvE,eAAe;GACf,gBAAgB,CAAC;GACjB,gBAAgB,CAAC;EACnB,CAAC;EAED,QAAQ,KAAK,IAAI,UAAU,MAAM;EACjC,QAAQ,KAAK,IAAI,iBAAiB,aAAa;EAC/C,QAAQ,KAAK,IAAI,YAAY,qBAAqB,CAAC;CACrD;CAGA,QAAQ,KAAK,IAAI,qBAAqB,YAAY,KAAK;CACvD,QAAQ,KAAK,IAAI,uBAAuB,cAAc,KAAK;CAC3D,QAAQ,KAAK,IAAI,sBAAsB,WAAW,KAAK;CAEvD,MAAM,MAAM,eAAe,kBAAkB,SAAS,YAAY,CAAC;CAWnE,OAAO;EAAE;EAAK;EAAa;EAAe;EAAY,SATtC,eAAe;GAC7B;GACA,cAAc,IAAI,MAAM,gBAAgB;GACxC;EACF,CAK4D;EAAG,cAJ1C,eACb,SAAS,MAAM,kBAAkB,KAAK,QAAQ,gBAAgB,KAAK,MAGD;CAAE;AAC9E"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"context.js","names":[],"sources":["../../../src/components/password-input/context.ts"],"sourcesContent":["import type { InjectionKey } from 'vue'\nimport type { PasswordInputContext } from './use-password-input'\nimport { inject, provide } from 'vue'\n\nconst KEY: InjectionKey<PasswordInputContext> = Symbol('xh-password-input')\n\nexport function providePasswordInput(ctx: PasswordInputContext): void {\n provide(KEY, ctx)\n}\n\nexport function usePasswordInputContext(): PasswordInputContext {\n const ctx = inject(KEY, null)\n if (!ctx)\n throw new Error('[xh] PasswordInput 部件必须用在 XhPasswordInputRoot 内')\n return ctx\n}\n"],"mappings":";;AAIA,MAAM,MAA0C,OAAO,mBAAmB;
|
|
1
|
+
{"version":3,"file":"context.js","names":[],"sources":["../../../src/components/password-input/context.ts"],"sourcesContent":["import type { InjectionKey } from 'vue'\nimport type { PasswordInputContext } from './use-password-input'\nimport { inject, provide } from 'vue'\n\nconst KEY: InjectionKey<PasswordInputContext> = Symbol.for('xh-password-input')\n\nexport function providePasswordInput(ctx: PasswordInputContext): void {\n provide(KEY, ctx)\n}\n\nexport function usePasswordInputContext(): PasswordInputContext {\n const ctx = inject(KEY, null)\n if (!ctx)\n throw new Error('[xh] PasswordInput 部件必须用在 XhPasswordInputRoot 内')\n return ctx\n}\n"],"mappings":";;AAIA,MAAM,MAA0C,OAAO,IAAI,mBAAmB;AAE9E,SAAgB,qBAAqB,KAAiC;CACpE,QAAQ,KAAK,GAAG;AAClB;AAEA,SAAgB,0BAAgD;CAC9D,MAAM,MAAM,OAAO,KAAK,IAAI;CAC5B,IAAI,CAAC,KACH,MAAM,IAAI,MAAM,iDAAiD;CACnE,OAAO;AACT"}
|
|
@@ -144,15 +144,15 @@ declare const XhPasswordInputRoot: import("vue").DefineComponent<import("vue").E
|
|
|
144
144
|
required: boolean;
|
|
145
145
|
name: string;
|
|
146
146
|
invalid: boolean;
|
|
147
|
-
size: Size;
|
|
148
147
|
value: string;
|
|
149
148
|
defaultValue: string;
|
|
150
149
|
tone: Tone;
|
|
150
|
+
size: Size;
|
|
151
151
|
disabled: boolean;
|
|
152
152
|
translations: Partial<PasswordInputTranslations>;
|
|
153
|
-
visible: boolean;
|
|
154
153
|
variant: ControlVariant;
|
|
155
154
|
readOnly: boolean;
|
|
155
|
+
visible: boolean;
|
|
156
156
|
placeholder: string;
|
|
157
157
|
defaultVisible: boolean;
|
|
158
158
|
autoComplete: string;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"password-input.d.ts","names":[],"sources":["../../../src/components/password-input/password-input.ts"],"mappings":";;;;;
|
|
1
|
+
{"version":3,"file":"password-input.d.ts","names":[],"sources":["../../../src/components/password-input/password-input.ts"],"mappings":";;;;;KAUK,qBAAqB;;KAGd,6BAA6B,KACvC;cAIW,mCAAmB,8BAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAeD,MAAA,SAAS;;;;IACZ,MAAA,SAAS;;;;IACT,MAAA,SAAS;;;;IACD,MAAA,SAAS,QAAQ;;;;;;EAItB,iBAAA,UAAA,UAAU;EACZ,iBAAA,QAAA,UAAU;EACH,sBAAA,UAAA,UAAU;EACb,mBAAA,UAAA,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAVZ,MAAA,SAAS;;;;IACZ,MAAA,SAAS;;;;IACT,MAAA,SAAS;;;;IACD,MAAA,SAAS,QAAQ;;;;;;;;;;;;;;;;;;;;;;;;;EAUvC,WAAC,OAAO,+BAA+B;kCA2BnD;cAEW,oCAAoB,0BAAA,oBAAA,4BAAA;;8BAO/B,qCAAA,iDAAA,aAAA,eAAA,oDAAA;cAEW,sCAAsB,0BAAA,oBAAA,4BAAA;;8BAOjC,qCAAA,iDAAA,aAAA,eAAA,oDAAA;cAEW,oCAAoB,0BAAA,oBAAA,4BAAA;;8BAW/B,qCAAA,iDAAA,aAAA,eAAA,oDAAA;cAEW,gDAAgC,0BAAA,oBAAA,4BAAA;;8BAO3C,qCAAA,iDAAA,aAAA,eAAA,oDAAA;cAEW,gDAAgC,0BAAA,oBAAA,4BAAA;;8BAO3C,qCAAA,iDAAA,aAAA,eAAA,oDAAA"}
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import { withXhConfig } from "../../config/config.js";
|
|
2
|
+
import { useFieldLabelWiring, useFieldStateWiring } from "../field/use-field-control.js";
|
|
2
3
|
import { providePasswordInput, usePasswordInputContext } from "./context.js";
|
|
3
4
|
import { usePasswordInput } from "./use-password-input.js";
|
|
4
5
|
import { defineComponent, h } from "vue";
|
|
@@ -117,8 +118,13 @@ const XhPasswordInputControl = defineComponent({
|
|
|
117
118
|
const XhPasswordInputInput = defineComponent({
|
|
118
119
|
name: "XhPasswordInputInput",
|
|
119
120
|
setup() {
|
|
121
|
+
const fieldWiring = useFieldStateWiring();
|
|
122
|
+
const fieldLabel = useFieldLabelWiring();
|
|
120
123
|
const ctx = usePasswordInputContext();
|
|
121
|
-
return () => h("input",
|
|
124
|
+
return () => h("input", fieldLabel.value({
|
|
125
|
+
...ctx.api.value.getInputProps(),
|
|
126
|
+
...fieldWiring.value
|
|
127
|
+
}));
|
|
122
128
|
}
|
|
123
129
|
});
|
|
124
130
|
const XhPasswordInputVisibilityTrigger = defineComponent({
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"password-input.js","names":[],"sources":["../../../src/components/password-input/password-input.ts"],"sourcesContent":["import type { PasswordInputApi, PasswordInputSchema, PasswordInputTranslations } from '@xihan-ui/headless'\nimport type { ControlVariant, Size, Tone } from '@xihan-ui/kernel'\nimport type { PropType, SlotsType, VNode } from 'vue'\nimport type { PayloadOf } from '../../runtime/payload'\nimport { defineComponent, h } from 'vue'\nimport { withXhConfig } from '../../config/config'\nimport { providePasswordInput, usePasswordInputContext } from './context'\nimport { usePasswordInput } from './use-password-input'\n\ntype PasswordInputProps = PasswordInputSchema['props']\n\n/** 默认插槽的载荷:当前值与空标志、明暗与大写锁定,以及写值与翻明暗的动作。 */\nexport type PasswordInputRootSlotProps = Pick<\n PasswordInputApi,\n 'value' | 'empty' | 'visible' | 'capsLock' | 'inputType' | 'setValue' | 'setVisible' | 'toggleVisibility'\n>\n\nexport const XhPasswordInputRoot = defineComponent({\n name: 'XhPasswordInputRoot',\n props: {\n // default: undefined 表示非受控\n value: { type: String, default: undefined },\n defaultValue: { type: String, default: undefined },\n visible: { type: Boolean, default: undefined },\n defaultVisible: { type: Boolean, default: undefined },\n disabled: { type: Boolean, default: undefined },\n readOnly: { type: Boolean, default: undefined },\n required: { type: Boolean, default: undefined },\n invalid: { type: Boolean, default: undefined },\n name: { type: String, default: undefined },\n placeholder: { type: String, default: undefined },\n autoComplete: { type: String, default: undefined },\n variant: { type: String as PropType<ControlVariant>, default: undefined },\n tone: { type: String as PropType<Tone>, default: undefined },\n size: { type: String as PropType<Size>, default: undefined },\n translations: { type: Object as PropType<Partial<PasswordInputTranslations>>, default: undefined },\n },\n // value-change 携带 { value },update:value 携带裸串;明暗走 visibility-change 一路\n emits: {\n 'value-change': (_details: PayloadOf<PasswordInputProps, 'onValueChange'>) => true,\n 'update:value': (_value: PayloadOf<PasswordInputProps, 'onValueChange'>['value']) => true,\n 'visibility-change': (_details: PayloadOf<PasswordInputProps, 'onVisibilityChange'>) => true,\n 'update:visible': (_visible: PayloadOf<PasswordInputProps, 'onVisibilityChange'>['visible']) => true,\n },\n slots: Object as SlotsType<{\n default?: (props: PasswordInputRootSlotProps) => VNode[]\n }>,\n setup(props, { slots, emit }) {\n const onValueChange: PasswordInputProps['onValueChange'] = (details) => {\n emit('value-change', details)\n emit('update:value', details.value)\n }\n const onVisibilityChange: PasswordInputProps['onVisibilityChange'] = (details) => {\n emit('visibility-change', details)\n emit('update:visible', details.visible)\n }\n const ctx = usePasswordInput(\n withXhConfig('password-input', props) as PasswordInputProps,\n { onValueChange, onVisibilityChange },\n )\n providePasswordInput(ctx)\n return () => h('div', ctx.api.value.getRootProps() as Record<string, unknown>, slots.default?.({\n value: ctx.api.value.value,\n empty: ctx.api.value.empty,\n visible: ctx.api.value.visible,\n capsLock: ctx.api.value.capsLock,\n inputType: ctx.api.value.inputType,\n setValue: ctx.api.value.setValue,\n setVisible: ctx.api.value.setVisible,\n toggleVisibility: ctx.api.value.toggleVisibility,\n }))\n },\n})\n\nexport const XhPasswordInputLabel = defineComponent({\n name: 'XhPasswordInputLabel',\n setup(_, { slots }) {\n const ctx = usePasswordInputContext()\n // 必须是原生 <label>,connect 把 for 写向 input\n return () => h('label', ctx.api.value.getLabelProps() as Record<string, unknown>, slots.default?.())\n },\n})\n\nexport const XhPasswordInputControl = defineComponent({\n name: 'XhPasswordInputControl',\n setup(_, { slots }) {\n const ctx = usePasswordInputContext()\n // 视觉盒:输入框、切换钮与大写锁定提示都排在它里面\n return () => h('div', ctx.api.value.getControlProps() as Record<string, unknown>, slots.default?.())\n },\n})\n\nexport const XhPasswordInputInput = defineComponent({\n name: 'XhPasswordInputInput',\n setup() {\n const ctx = usePasswordInputContext()\n // 原生 <input>:光标、选区与撤销都归浏览器,label 的 for 也指着它\n return () => h('input', ctx.api.value.getInputProps() as Record<string, unknown
|
|
1
|
+
{"version":3,"file":"password-input.js","names":[],"sources":["../../../src/components/password-input/password-input.ts"],"sourcesContent":["import type { PasswordInputApi, PasswordInputSchema, PasswordInputTranslations } from '@xihan-ui/headless'\nimport type { ControlVariant, Size, Tone } from '@xihan-ui/kernel'\nimport type { PropType, SlotsType, VNode } from 'vue'\nimport type { PayloadOf } from '../../runtime/payload'\nimport { defineComponent, h } from 'vue'\nimport { withXhConfig } from '../../config/config'\nimport { useFieldLabelWiring, useFieldStateWiring } from '../field/use-field-control'\nimport { providePasswordInput, usePasswordInputContext } from './context'\nimport { usePasswordInput } from './use-password-input'\n\ntype PasswordInputProps = PasswordInputSchema['props']\n\n/** 默认插槽的载荷:当前值与空标志、明暗与大写锁定,以及写值与翻明暗的动作。 */\nexport type PasswordInputRootSlotProps = Pick<\n PasswordInputApi,\n 'value' | 'empty' | 'visible' | 'capsLock' | 'inputType' | 'setValue' | 'setVisible' | 'toggleVisibility'\n>\n\nexport const XhPasswordInputRoot = defineComponent({\n name: 'XhPasswordInputRoot',\n props: {\n // default: undefined 表示非受控\n value: { type: String, default: undefined },\n defaultValue: { type: String, default: undefined },\n visible: { type: Boolean, default: undefined },\n defaultVisible: { type: Boolean, default: undefined },\n disabled: { type: Boolean, default: undefined },\n readOnly: { type: Boolean, default: undefined },\n required: { type: Boolean, default: undefined },\n invalid: { type: Boolean, default: undefined },\n name: { type: String, default: undefined },\n placeholder: { type: String, default: undefined },\n autoComplete: { type: String, default: undefined },\n variant: { type: String as PropType<ControlVariant>, default: undefined },\n tone: { type: String as PropType<Tone>, default: undefined },\n size: { type: String as PropType<Size>, default: undefined },\n translations: { type: Object as PropType<Partial<PasswordInputTranslations>>, default: undefined },\n },\n // value-change 携带 { value },update:value 携带裸串;明暗走 visibility-change 一路\n emits: {\n 'value-change': (_details: PayloadOf<PasswordInputProps, 'onValueChange'>) => true,\n 'update:value': (_value: PayloadOf<PasswordInputProps, 'onValueChange'>['value']) => true,\n 'visibility-change': (_details: PayloadOf<PasswordInputProps, 'onVisibilityChange'>) => true,\n 'update:visible': (_visible: PayloadOf<PasswordInputProps, 'onVisibilityChange'>['visible']) => true,\n },\n slots: Object as SlotsType<{\n default?: (props: PasswordInputRootSlotProps) => VNode[]\n }>,\n setup(props, { slots, emit }) {\n const onValueChange: PasswordInputProps['onValueChange'] = (details) => {\n emit('value-change', details)\n emit('update:value', details.value)\n }\n const onVisibilityChange: PasswordInputProps['onVisibilityChange'] = (details) => {\n emit('visibility-change', details)\n emit('update:visible', details.visible)\n }\n const ctx = usePasswordInput(\n withXhConfig('password-input', props) as PasswordInputProps,\n { onValueChange, onVisibilityChange },\n )\n providePasswordInput(ctx)\n return () => h('div', ctx.api.value.getRootProps() as Record<string, unknown>, slots.default?.({\n value: ctx.api.value.value,\n empty: ctx.api.value.empty,\n visible: ctx.api.value.visible,\n capsLock: ctx.api.value.capsLock,\n inputType: ctx.api.value.inputType,\n setValue: ctx.api.value.setValue,\n setVisible: ctx.api.value.setVisible,\n toggleVisibility: ctx.api.value.toggleVisibility,\n }))\n },\n})\n\nexport const XhPasswordInputLabel = defineComponent({\n name: 'XhPasswordInputLabel',\n setup(_, { slots }) {\n const ctx = usePasswordInputContext()\n // 必须是原生 <label>,connect 把 for 写向 input\n return () => h('label', ctx.api.value.getLabelProps() as Record<string, unknown>, slots.default?.())\n },\n})\n\nexport const XhPasswordInputControl = defineComponent({\n name: 'XhPasswordInputControl',\n setup(_, { slots }) {\n const ctx = usePasswordInputContext()\n // 视觉盒:输入框、切换钮与大写锁定提示都排在它里面\n return () => h('div', ctx.api.value.getControlProps() as Record<string, unknown>, slots.default?.())\n },\n})\n\nexport const XhPasswordInputInput = defineComponent({\n name: 'XhPasswordInputInput',\n setup() {\n // 字段的说明与校验状态要落在真控件上,不能停在封装根的 div 上\n const fieldWiring = useFieldStateWiring()\n // 字段的标签也得并进名字链:控件自带的那条指的是它自己那个没渲染的 label 部件\n const fieldLabel = useFieldLabelWiring()\n const ctx = usePasswordInputContext()\n // 原生 <input>:光标、选区与撤销都归浏览器,label 的 for 也指着它\n return () => h('input', fieldLabel.value({ ...ctx.api.value.getInputProps() as Record<string, unknown>, ...fieldWiring.value }))\n },\n})\n\nexport const XhPasswordInputVisibilityTrigger = defineComponent({\n name: 'XhPasswordInputVisibilityTrigger',\n setup(_, { slots }) {\n const ctx = usePasswordInputContext()\n // 原生 <button>,Enter / Space 的激活交给平台\n return () => h('button', ctx.api.value.getVisibilityTriggerProps() as Record<string, unknown>, slots.default?.())\n },\n})\n\nexport const XhPasswordInputCapsLockIndicator = defineComponent({\n name: 'XhPasswordInputCapsLockIndicator',\n setup() {\n const ctx = usePasswordInputContext()\n // 区内文字由组件写:活区域播报的是内容,不是名字。关着时是空串,节点仍在场\n return () => h('span', ctx.api.value.getCapsLockIndicatorProps() as Record<string, unknown>, ctx.api.value.capsLockMessage)\n },\n})\n"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"context.js","names":[],"sources":["../../../src/components/pin-input/context.ts"],"sourcesContent":["import type { InjectionKey } from 'vue'\nimport type { PinInputContext } from './use-pin-input'\nimport { inject, provide } from 'vue'\n\nconst KEY: InjectionKey<PinInputContext> = Symbol('xh-pin-input')\n\nexport function providePinInput(ctx: PinInputContext): void {\n provide(KEY, ctx)\n}\n\nexport function usePinInputContext(): PinInputContext {\n const ctx = inject(KEY, null)\n if (!ctx)\n throw new Error('[xh] PinInput 部件必须用在 XhPinInputRoot 内')\n return ctx\n}\n"],"mappings":";;AAIA,MAAM,MAAqC,OAAO,cAAc;
|
|
1
|
+
{"version":3,"file":"context.js","names":[],"sources":["../../../src/components/pin-input/context.ts"],"sourcesContent":["import type { InjectionKey } from 'vue'\nimport type { PinInputContext } from './use-pin-input'\nimport { inject, provide } from 'vue'\n\nconst KEY: InjectionKey<PinInputContext> = Symbol.for('xh-pin-input')\n\nexport function providePinInput(ctx: PinInputContext): void {\n provide(KEY, ctx)\n}\n\nexport function usePinInputContext(): PinInputContext {\n const ctx = inject(KEY, null)\n if (!ctx)\n throw new Error('[xh] PinInput 部件必须用在 XhPinInputRoot 内')\n return ctx\n}\n"],"mappings":";;AAIA,MAAM,MAAqC,OAAO,IAAI,cAAc;AAEpE,SAAgB,gBAAgB,KAA4B;CAC1D,QAAQ,KAAK,GAAG;AAClB;AAEA,SAAgB,qBAAsC;CACpD,MAAM,MAAM,OAAO,KAAK,IAAI;CAC5B,IAAI,CAAC,KACH,MAAM,IAAI,MAAM,uCAAuC;CACzD,OAAO;AACT"}
|
|
@@ -121,10 +121,10 @@ declare const XhPinInputRoot: import("vue").DefineComponent<import("vue").Extrac
|
|
|
121
121
|
name: string;
|
|
122
122
|
length: number;
|
|
123
123
|
invalid: boolean;
|
|
124
|
-
size: Size;
|
|
125
124
|
value: string[];
|
|
126
125
|
defaultValue: string[];
|
|
127
126
|
tone: Tone;
|
|
127
|
+
size: Size;
|
|
128
128
|
disabled: boolean;
|
|
129
129
|
translations: Partial<PinInputTranslations>;
|
|
130
130
|
variant: ControlVariant;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"context.js","names":[],"sources":["../../../src/components/popconfirm/context.ts"],"sourcesContent":["import type { InjectionKey } from 'vue'\nimport type { PopconfirmContext } from './use-popconfirm'\nimport { inject, provide } from 'vue'\n\nconst KEY: InjectionKey<PopconfirmContext> = Symbol('xh-popconfirm')\n\nexport function providePopconfirm(ctx: PopconfirmContext): void {\n provide(KEY, ctx)\n}\n\nexport function usePopconfirmContext(): PopconfirmContext {\n const ctx = inject(KEY, null)\n if (!ctx)\n throw new Error('[xh] Popconfirm 部件必须用在 XhPopconfirmRoot 内')\n return ctx\n}\n"],"mappings":";;AAIA,MAAM,MAAuC,OAAO,eAAe;
|
|
1
|
+
{"version":3,"file":"context.js","names":[],"sources":["../../../src/components/popconfirm/context.ts"],"sourcesContent":["import type { InjectionKey } from 'vue'\nimport type { PopconfirmContext } from './use-popconfirm'\nimport { inject, provide } from 'vue'\n\nconst KEY: InjectionKey<PopconfirmContext> = Symbol.for('xh-popconfirm')\n\nexport function providePopconfirm(ctx: PopconfirmContext): void {\n provide(KEY, ctx)\n}\n\nexport function usePopconfirmContext(): PopconfirmContext {\n const ctx = inject(KEY, null)\n if (!ctx)\n throw new Error('[xh] Popconfirm 部件必须用在 XhPopconfirmRoot 内')\n return ctx\n}\n"],"mappings":";;AAIA,MAAM,MAAuC,OAAO,IAAI,eAAe;AAEvE,SAAgB,kBAAkB,KAA8B;CAC9D,QAAQ,KAAK,GAAG;AAClB;AAEA,SAAgB,uBAA0C;CACxD,MAAM,MAAM,OAAO,KAAK,IAAI;CAC5B,IAAI,CAAC,KACH,MAAM,IAAI,MAAM,2CAA2C;CAC7D,OAAO;AACT"}
|
|
@@ -87,9 +87,9 @@ declare const XhPopconfirmRoot: import("vue").DefineComponent<import("vue").Extr
|
|
|
87
87
|
"onUpdate:open"?: ((_open: boolean) => any) | undefined;
|
|
88
88
|
}>, {
|
|
89
89
|
size: Size;
|
|
90
|
+
offset: number;
|
|
90
91
|
open: boolean;
|
|
91
92
|
defaultOpen: boolean;
|
|
92
|
-
offset: number;
|
|
93
93
|
placement: Placement;
|
|
94
94
|
closeOnEscape: boolean;
|
|
95
95
|
closeOnInteractOutside: boolean;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"context.js","names":[],"sources":["../../../src/components/popover/context.ts"],"sourcesContent":["import type { InjectionKey } from 'vue'\nimport type { PopoverContext } from './use-popover'\nimport { inject, provide } from 'vue'\n\nconst KEY: InjectionKey<PopoverContext> = Symbol('xh-popover')\n\nexport function providePopover(ctx: PopoverContext): void {\n provide(KEY, ctx)\n}\n\nexport function usePopoverContext(): PopoverContext {\n const ctx = inject(KEY, null)\n if (!ctx)\n throw new Error('[xh] Popover 部件必须用在 XhPopoverRoot 内')\n return ctx\n}\n"],"mappings":";;AAIA,MAAM,MAAoC,OAAO,YAAY;
|
|
1
|
+
{"version":3,"file":"context.js","names":[],"sources":["../../../src/components/popover/context.ts"],"sourcesContent":["import type { InjectionKey } from 'vue'\nimport type { PopoverContext } from './use-popover'\nimport { inject, provide } from 'vue'\n\nconst KEY: InjectionKey<PopoverContext> = Symbol.for('xh-popover')\n\nexport function providePopover(ctx: PopoverContext): void {\n provide(KEY, ctx)\n}\n\nexport function usePopoverContext(): PopoverContext {\n const ctx = inject(KEY, null)\n if (!ctx)\n throw new Error('[xh] Popover 部件必须用在 XhPopoverRoot 内')\n return ctx\n}\n"],"mappings":";;AAIA,MAAM,MAAoC,OAAO,IAAI,YAAY;AAEjE,SAAgB,eAAe,KAA2B;CACxD,QAAQ,KAAK,GAAG;AAClB;AAEA,SAAgB,oBAAoC;CAClD,MAAM,MAAM,OAAO,KAAK,IAAI;CAC5B,IAAI,CAAC,KACH,MAAM,IAAI,MAAM,qCAAqC;CACvD,OAAO;AACT"}
|
|
@@ -84,10 +84,10 @@ declare const XhPopoverRoot: import("vue").DefineComponent<import("vue").Extract
|
|
|
84
84
|
"onUpdate:open"?: ((_open: boolean) => any) | undefined;
|
|
85
85
|
}>, {
|
|
86
86
|
size: Size;
|
|
87
|
+
offset: number;
|
|
88
|
+
translations: Partial<import("@xihan-ui/headless").PopoverTranslations> | undefined;
|
|
87
89
|
open: boolean;
|
|
88
90
|
defaultOpen: boolean;
|
|
89
|
-
translations: Partial<import("@xihan-ui/headless").PopoverTranslations> | undefined;
|
|
90
|
-
offset: number;
|
|
91
91
|
placement: Placement;
|
|
92
92
|
modal: boolean;
|
|
93
93
|
closeOnEscape: boolean;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"popover.d.ts","names":[],"sources":["../../../src/components/popover/popover.ts"],"mappings":";;;;;
|
|
1
|
+
{"version":3,"file":"popover.d.ts","names":[],"sources":["../../../src/components/popover/popover.ts"],"mappings":";;;;;KAWK,eAAe;;KAGR,uBAAuB,KAAK;cAE3B,6BAAa,8BAAA;;;;;;;IAKO,MAAA,SAAS;;;;;;;;;;;;;;;;;;;;IAKN,MAAA,SAAS;;;;IACjB,MAAA,SAAS;;;;;;EAIP,gBAAA,UAAA,UAAU;EACb,gBAAA,OAAA,UAAU;;;;;;;;IAXJ,MAAA,SAAS;;;;;;;;;;;;;;;;;;;;IAKN,MAAA,SAAS;;;;IACjB,MAAA,SAAS;;;;;;;;;;;;;;;;;EAQvB,WAAC,OAAO,yBAAyB;kCAW7C;cAEW,gCAAgB,8BAAA;;;;;;;;;;qCAuB3B;cAEW,mCAAmB,0BAAA,oBAAA,4BAAA;;8BAgB9B,qCAAA,iDAAA,aAAA,eAAA,oDAAA;cAEW,gCAAgB,0BAAA,oBAAA,4BAAA;;8BAY3B,qCAAA,iDAAA,aAAA,eAAA,oDAAA;cAEW,8BAAc,0BAAA,oBAAA,4BAAA;;8BAMzB,qCAAA,iDAAA,aAAA,eAAA,oDAAA;cAEW,oCAAoB,0BAAA,oBAAA,4BAAA;;8BAM/B,qCAAA,iDAAA,aAAA,eAAA,oDAAA;cAEW,qCAAqB,0BAAA,oBAAA,4BAAA;;8BAMhC,qCAAA,iDAAA,aAAA,eAAA,oDAAA;cAEW,8BAAc,0BAAA,oBAAA,4BAAA;;8BAMzB,qCAAA,iDAAA,aAAA,eAAA,oDAAA"}
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import { withXhConfig } from "../../config/config.js";
|
|
2
|
+
import { useScrollbars } from "../../runtime/use-scrollbars.js";
|
|
2
3
|
import { mergeIntoChild } from "../../runtime/as-child.js";
|
|
3
4
|
import { providePopover, usePopoverContext } from "./context.js";
|
|
4
5
|
import { usePopover } from "./use-popover.js";
|
|
@@ -87,12 +88,13 @@ const XhPopoverPositioner = defineComponent({
|
|
|
87
88
|
inheritAttrs: false,
|
|
88
89
|
setup(_, { slots, attrs }) {
|
|
89
90
|
const ctx = usePopoverContext();
|
|
91
|
+
const bars = useScrollbars({ scrollable: () => ctx.contentRef.value });
|
|
90
92
|
return () => h(Teleport, { to: ctx.portalTarget.value }, [h("div", {
|
|
91
93
|
...mergeProps(ctx.api.value.getPositionerProps(), attrs),
|
|
92
94
|
ref: (el) => {
|
|
93
95
|
ctx.positionerRef.value = el;
|
|
94
96
|
}
|
|
95
|
-
}, slots.default?.())]);
|
|
97
|
+
}, [...slots.default?.() ?? [], ...bars.render()])]);
|
|
96
98
|
}
|
|
97
99
|
});
|
|
98
100
|
const XhPopoverContent = defineComponent({
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"popover.js","names":[],"sources":["../../../src/components/popover/popover.ts"],"sourcesContent":["import type { PopoverApi, PopoverSchema } from '@xihan-ui/headless'\nimport type { Placement, Size } from '@xihan-ui/kernel'\nimport type { PropType, SlotsType, VNode } from 'vue'\nimport type { PayloadOf } from '../../runtime/payload'\nimport { defineComponent, h, mergeProps, Teleport } from 'vue'\nimport { withXhConfig } from '../../config/config'\nimport { mergeIntoChild } from '../../runtime/as-child'\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>, default: undefined },\n offset: { type: Number, default: undefined },\n modal: { type: Boolean, default: false },\n closeOnEscape: { type: Boolean, default: true },\n closeOnInteractOutside: { type: Boolean, default: true },\n translations: { type: Object as PropType<PopoverProps['translations']>, default: undefined },\n size: { type: String as PropType<Size>, default: undefined },\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 props: {\n /** 借用作者的子节点当触发器,不再渲染自己的包裹元素;子节点须恰好一个。 */\n asChild: Boolean,\n },\n setup(props, { slots }) {\n const ctx = usePopoverContext()\n return () => {\n const attrs = {\n ...ctx.api.value.getTriggerProps() as Record<string, unknown>,\n ref: (el: unknown) => { ctx.triggerRef.value = el as HTMLElement },\n }\n const children = slots.default?.()\n // asChild:把触发器属性合到作者的节点上,不再自己渲染包裹元素\n if (props.asChild) {\n const merged = mergeIntoChild(children, attrs, 'popover')\n if (merged)\n return merged\n }\n return h('button', attrs, children)\n }\n },\n})\n\nexport const XhPopoverPositioner = defineComponent({\n name: 'XhPopoverPositioner',\n // 根是 Teleport,Vue 不会把直通属性合上去,作者写的 class 与 style 得自己接住落到 positioner 上\n inheritAttrs: false,\n setup(_, { slots, attrs }) {\n const ctx = usePopoverContext()\n // 定位层搬到 portal 落点,逃开祖先的层叠上下文\n return () => h(Teleport, { to: ctx.portalTarget.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?.()),\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":"
|
|
1
|
+
{"version":3,"file":"popover.js","names":[],"sources":["../../../src/components/popover/popover.ts"],"sourcesContent":["import type { PopoverApi, PopoverSchema } from '@xihan-ui/headless'\nimport type { Placement, Size } from '@xihan-ui/kernel'\nimport type { PropType, SlotsType, VNode } from 'vue'\nimport type { PayloadOf } from '../../runtime/payload'\nimport { defineComponent, h, mergeProps, Teleport } from 'vue'\nimport { withXhConfig } from '../../config/config'\nimport { mergeIntoChild } from '../../runtime/as-child'\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>, default: undefined },\n offset: { type: Number, default: undefined },\n modal: { type: Boolean, default: false },\n closeOnEscape: { type: Boolean, default: true },\n closeOnInteractOutside: { type: Boolean, default: true },\n translations: { type: Object as PropType<PopoverProps['translations']>, default: undefined },\n size: { type: String as PropType<Size>, default: undefined },\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 props: {\n /** 借用作者的子节点当触发器,不再渲染自己的包裹元素;子节点须恰好一个。 */\n asChild: Boolean,\n },\n setup(props, { slots }) {\n const ctx = usePopoverContext()\n return () => {\n const attrs = {\n ...ctx.api.value.getTriggerProps() as Record<string, unknown>,\n ref: (el: unknown) => { ctx.triggerRef.value = el as HTMLElement },\n }\n const children = slots.default?.()\n // asChild:把触发器属性合到作者的节点上,不再自己渲染包裹元素\n if (props.asChild) {\n const merged = mergeIntoChild(children, attrs, 'popover')\n if (merged)\n return merged\n }\n return h('button', attrs, children)\n }\n },\n})\n\nexport const XhPopoverPositioner = defineComponent({\n name: 'XhPopoverPositioner',\n // 根是 Teleport,Vue 不会把直通属性合上去,作者写的 class 与 style 得自己接住落到 positioner 上\n inheritAttrs: false,\n setup(_, { slots, attrs }) {\n const ctx = usePopoverContext()\n // 面板内容的自绘条:与 content 同级、绝对定位不占布局,壳是这层已经 fixed 的 positioner\n const bars = useScrollbars({ scrollable: () => ctx.contentRef.value })\n // 定位层搬到 portal 落点,逃开祖先的层叠上下文\n return () => h(Teleport, { to: ctx.portalTarget.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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"}
|
|
@@ -28,7 +28,7 @@ function usePopover(props, onOpenChange) {
|
|
|
28
28
|
const registerLayer = () => config.layerRegistry.register({
|
|
29
29
|
kind: "popover",
|
|
30
30
|
node: () => contentRef.value,
|
|
31
|
-
branches: () => [triggerRef.value].filter(Boolean),
|
|
31
|
+
branches: () => [triggerRef.value, positionerRef.value].filter(Boolean),
|
|
32
32
|
isModal: () => props.modal ?? false,
|
|
33
33
|
setModal: () => {},
|
|
34
34
|
surfaces: () => []
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"use-popover.js","names":[],"sources":["../../../src/components/popover/use-popover.ts"],"sourcesContent":["import type { PopoverApi, PopoverSchema } from '@xihan-ui/headless'\nimport type { Cleanup, Layer, RuntimeConfig } from '@xihan-ui/kernel'\nimport type { Service } from '@xihan-ui/machine'\nimport type { ComputedRef, Ref } from 'vue'\nimport { connectPopover, popoverMachine } from '@xihan-ui/headless'\nimport { createRuntimeConfig, createScope } from '@xihan-ui/kernel'\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 PopoverContext {\n service: Service<PopoverSchema>\n api: ComputedRef<PopoverApi>\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 usePopover(\n props: PopoverSchema['props'],\n onOpenChange?: PopoverSchema['props']['onOpenChange'],\n): PopoverContext {\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 const service = useMachine(popoverMachine, () => ({ ...props, onOpenChange }), 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
|
|
1
|
+
{"version":3,"file":"use-popover.js","names":[],"sources":["../../../src/components/popover/use-popover.ts"],"sourcesContent":["import type { PopoverApi, PopoverSchema } from '@xihan-ui/headless'\nimport type { Cleanup, Layer, RuntimeConfig } from '@xihan-ui/kernel'\nimport type { Service } from '@xihan-ui/machine'\nimport type { ComputedRef, Ref } from 'vue'\nimport { connectPopover, popoverMachine } from '@xihan-ui/headless'\nimport { createRuntimeConfig, createScope } from '@xihan-ui/kernel'\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 PopoverContext {\n service: Service<PopoverSchema>\n api: ComputedRef<PopoverApi>\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 usePopover(\n props: PopoverSchema['props'],\n onOpenChange?: PopoverSchema['props']['onOpenChange'],\n): PopoverContext {\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 const service = useMachine(popoverMachine, () => ({ ...props, onOpenChange }), 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: () => props.modal ?? false,\n setModal: () => {},\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 const api = computed(() => connectPopover(service, vueNormalize))\n // 退场闸门:收起从跟着 open 走,改成跟着 presence 走\n const visible = useOverlayExit({ config, isOpen: () => api.value.open, contentRef })\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":";;;;;;;;;;AA0BA,SAAgB,WACd,OACA,cACgB;CAChB,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;CACrC,MAAM,UAAU,WAAW,uBAAuB;EAAE,GAAG;EAAO;CAAa,IAAI,KAAK;CAGpF,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,MAAM,SAAS;GAC9B,gBAAgB,CAAC;GACjB,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;CAEA,MAAM,MAAM,eAAe,eAAe,SAAS,YAAY,CAAC;CAMhE,OAAO;EAAE,SAJO,eAAe;GAAE;GAAQ,cAAc,IAAI,MAAM;GAAM;EAAW,CAInE;EAAG;EAAS;EAAK;EAAY;EAAe;EAAY,cAFlD,eAAiC,SAAS,MAAM,kBAAkB,KAAK,QAAQ,gBAAgB,KAAK,MAEvC;CAAE;AACtF"}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { inject, provide } from "vue";
|
|
2
2
|
//#region src/components/popselect/context.ts
|
|
3
|
-
const KEY = Symbol("xh-popselect");
|
|
4
|
-
const ITEM_KEY = Symbol("xh-popselect-item");
|
|
3
|
+
const KEY = Symbol.for("xh-popselect");
|
|
4
|
+
const ITEM_KEY = Symbol.for("xh-popselect-item");
|
|
5
5
|
function providePopselect(ctx) {
|
|
6
6
|
provide(KEY, ctx);
|
|
7
7
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"context.js","names":[],"sources":["../../../src/components/popselect/context.ts"],"sourcesContent":["import type { PopselectItemProps } from '@xihan-ui/headless'\nimport type { ComputedRef, InjectionKey } from 'vue'\nimport type { PopselectContext } from './use-popselect'\nimport { inject, provide } from 'vue'\n\n/** 条目自报的值与禁用,供 item-text / item-indicator 这类子部件复用同一份声明。 */\nexport interface PopselectItemContext {\n item: ComputedRef<PopselectItemProps>\n}\n\nconst KEY: InjectionKey<PopselectContext> = Symbol('xh-popselect')\nconst ITEM_KEY: InjectionKey<PopselectItemContext> = Symbol('xh-popselect-item')\n\nexport function providePopselect(ctx: PopselectContext): void {\n provide(KEY, ctx)\n}\n\nexport function usePopselectContext(): PopselectContext {\n const ctx = inject(KEY, null)\n if (!ctx)\n throw new Error('[xh] Popselect 部件必须用在 XhPopselectRoot 内')\n return ctx\n}\n\nexport function providePopselectItem(ctx: PopselectItemContext): void {\n provide(ITEM_KEY, ctx)\n}\n\nexport function usePopselectItemContext(): PopselectItemContext {\n const ctx = inject(ITEM_KEY, null)\n if (!ctx)\n throw new Error('[xh] Popselect 条目子部件必须用在 XhPopselectItem 内')\n return ctx\n}\n"],"mappings":";;AAUA,MAAM,MAAsC,OAAO,cAAc;
|
|
1
|
+
{"version":3,"file":"context.js","names":[],"sources":["../../../src/components/popselect/context.ts"],"sourcesContent":["import type { PopselectItemProps } from '@xihan-ui/headless'\nimport type { ComputedRef, InjectionKey } from 'vue'\nimport type { PopselectContext } from './use-popselect'\nimport { inject, provide } from 'vue'\n\n/** 条目自报的值与禁用,供 item-text / item-indicator 这类子部件复用同一份声明。 */\nexport interface PopselectItemContext {\n item: ComputedRef<PopselectItemProps>\n}\n\nconst KEY: InjectionKey<PopselectContext> = Symbol.for('xh-popselect')\nconst ITEM_KEY: InjectionKey<PopselectItemContext> = Symbol.for('xh-popselect-item')\n\nexport function providePopselect(ctx: PopselectContext): void {\n provide(KEY, ctx)\n}\n\nexport function usePopselectContext(): PopselectContext {\n const ctx = inject(KEY, null)\n if (!ctx)\n throw new Error('[xh] Popselect 部件必须用在 XhPopselectRoot 内')\n return ctx\n}\n\nexport function providePopselectItem(ctx: PopselectItemContext): void {\n provide(ITEM_KEY, ctx)\n}\n\nexport function usePopselectItemContext(): PopselectItemContext {\n const ctx = inject(ITEM_KEY, null)\n if (!ctx)\n throw new Error('[xh] Popselect 条目子部件必须用在 XhPopselectItem 内')\n return ctx\n}\n"],"mappings":";;AAUA,MAAM,MAAsC,OAAO,IAAI,cAAc;AACrE,MAAM,WAA+C,OAAO,IAAI,mBAAmB;AAEnF,SAAgB,iBAAiB,KAA6B;CAC5D,QAAQ,KAAK,GAAG;AAClB;AAEA,SAAgB,sBAAwC;CACtD,MAAM,MAAM,OAAO,KAAK,IAAI;CAC5B,IAAI,CAAC,KACH,MAAM,IAAI,MAAM,yCAAyC;CAC3D,OAAO;AACT;AAEA,SAAgB,qBAAqB,KAAiC;CACpE,QAAQ,UAAU,GAAG;AACvB;AAEA,SAAgB,0BAAgD;CAC9D,MAAM,MAAM,OAAO,UAAU,IAAI;CACjC,IAAI,CAAC,KACH,MAAM,IAAI,MAAM,4CAA4C;CAC9D,OAAO;AACT"}
|
|
@@ -147,18 +147,18 @@ declare const XhPopselectRoot: import("vue").DefineComponent<import("vue").Extra
|
|
|
147
147
|
"onOpen-change"?: ((_details: import("@xihan-ui/headless").PopoverOpenChangeDetails) => any) | undefined;
|
|
148
148
|
"onUpdate:open"?: ((_open: boolean) => any) | undefined;
|
|
149
149
|
}>, {
|
|
150
|
-
size: Size;
|
|
151
150
|
value: string | string[];
|
|
152
151
|
multiple: boolean;
|
|
153
152
|
collection: PopselectNode[];
|
|
154
153
|
defaultValue: string | string[];
|
|
155
154
|
dir: Direction;
|
|
156
155
|
tone: Tone;
|
|
156
|
+
size: Size;
|
|
157
157
|
disabled: boolean;
|
|
158
|
+
offset: number;
|
|
159
|
+
translations: Partial<PopselectTranslations>;
|
|
158
160
|
open: boolean;
|
|
159
161
|
defaultOpen: boolean;
|
|
160
|
-
translations: Partial<PopselectTranslations>;
|
|
161
|
-
offset: number;
|
|
162
162
|
variant: ControlVariant;
|
|
163
163
|
loop: boolean;
|
|
164
164
|
placement: Placement;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"popselect.d.ts","names":[],"sources":["../../../src/components/popselect/popselect.ts"],"mappings":";;;;;;;
|
|
1
|
+
{"version":3,"file":"popselect.d.ts","names":[],"sources":["../../../src/components/popselect/popselect.ts"],"mappings":";;;;;;;KAYY,yBAAyB,KACnC;cAIW,+BAAe,8BAAA;;IAIK,MAAA,SAAS;;;;IACJ,MAAA;;;;IACO,MAAA;;;;;;;;;;;;;;IAKlB,MAAA,SAAS;;;;;;;;;IAGH,MAAA,SAAS;;;;;;;;;;;;;;;;IAIX,MAAA,SAAS;;;;IACZ,MAAA,SAAS;;;;IACT,MAAA,SAAS;;;;IACD,MAAA,SAAS,QAAQ;;;;;;EAItB,iBAAA,UAAA,UAAU;EACX,gBAAA,UAAA,UAAU;EACX,iBAAA,QAAA,UAAU;EACZ,gBAAA,OAAA,UAAU;;;IAxBJ,MAAA,SAAS;;;;IACJ,MAAA;;;;IACO,MAAA;;;;;;;;;;;;;;IAKlB,MAAA,SAAS;;;;;;;;;IAGH,MAAA,SAAS;;;;;;;;;;;;;;;;IAIX,MAAA,SAAS;;;;IACZ,MAAA,SAAS;;;;IACT,MAAA,SAAS;;;;IACD,MAAA,SAAS,QAAQ;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAUvC,WAAC,OAAO,2BAA2B;kCA4B/C;;cAGW,kCAAkB,0BAAA,oBAAA,4BAAA;;8BAM7B,qCAAA,iDAAA,aAAA,eAAA,oDAAA;cAEW,kCAAkB,8BAAA;;;;;;;;;;qCAuB7B;;cAGW,uCAAuB,0BAAA,oBAAA,4BAAA;;8BAMlC,qCAAA,iDAAA,aAAA,eAAA,oDAAA;cAEW,qCAAqB,0BAAA,oBAAA,4BAAA;;8BAgBhC,qCAAA,iDAAA,aAAA,eAAA,oDAAA;cAEW,kCAAkB,0BAAA,oBAAA,4BAAA;;8BAY7B,qCAAA,iDAAA,aAAA,eAAA,oDAAA;cAEW,+BAAe,8BAAA;;;;;;;;;;;;;;;;;;;;;;qCAoC1B;cAEW,mCAAmB,0BAAA,oBAAA,4BAAA;;8BAO9B,qCAAA,iDAAA,aAAA,eAAA,oDAAA;cAEW,wCAAwB,0BAAA,oBAAA,4BAAA;;8BAOnC,qCAAA,iDAAA,aAAA,eAAA,oDAAA"}
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
import { useScrollbars } from "../../runtime/use-scrollbars.js";
|
|
1
2
|
import { mergeIntoChild } from "../../runtime/as-child.js";
|
|
2
3
|
import { providePopselect, providePopselectItem, usePopselectContext, usePopselectItemContext } from "./context.js";
|
|
3
4
|
import { usePopselect } from "./use-popselect.js";
|
|
@@ -147,12 +148,13 @@ const XhPopselectPositioner = defineComponent({
|
|
|
147
148
|
inheritAttrs: false,
|
|
148
149
|
setup(_, { slots, attrs }) {
|
|
149
150
|
const ctx = usePopselectContext();
|
|
151
|
+
const bars = useScrollbars({ scrollable: () => ctx.contentRef.value });
|
|
150
152
|
return () => h(Teleport, { to: ctx.portalTarget.value }, [h("div", {
|
|
151
153
|
...mergeProps(ctx.api.value.getPositionerProps(), attrs),
|
|
152
154
|
ref: (el) => {
|
|
153
155
|
ctx.positionerRef.value = el;
|
|
154
156
|
}
|
|
155
|
-
}, slots.default?.())]);
|
|
157
|
+
}, [...slots.default?.() ?? [], ...bars.render()])]);
|
|
156
158
|
}
|
|
157
159
|
});
|
|
158
160
|
const XhPopselectContent = defineComponent({
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"popselect.js","names":[],"sources":["../../../src/components/popselect/popselect.ts"],"sourcesContent":["import type { PopselectApi, PopselectItemProps, PopselectNode, PopselectNodeMeta, PopselectTranslations } from '@xihan-ui/headless'\nimport type { ControlVariant, Direction, Placement, Size, Tone } from '@xihan-ui/kernel'\nimport type { PropType, SlotsType, VNode } from 'vue'\nimport type { PayloadOf } from '../../runtime/payload'\nimport type { PopselectNotifiers, PopselectRootProps } from './use-popselect'\nimport { computed, defineComponent, h, mergeProps, onBeforeUnmount, ref, Teleport, watch } from 'vue'\nimport { mergeIntoChild } from '../../runtime/as-child'\nimport { providePopselect, providePopselectItem, usePopselectContext, usePopselectItemContext } from './context'\nimport { usePopselect } from './use-popselect'\n\n/** 默认插槽的载荷:浮层开合、选中集合与条目数据,以及改动它们的方法。 */\nexport type PopselectRootSlotProps = Pick<\n PopselectApi,\n 'open' | 'value' | 'collection' | 'focusedValue' | 'canClear' | 'isSelected' | 'setOpen' | 'setValue' | 'select' | 'clear'\n>\n\nexport const XhPopselectRoot = defineComponent({\n name: 'XhPopselectRoot',\n // 有 connect 或机器兜底的 prop 一律 default: undefined\n props: {\n collection: { type: Array as PropType<PopselectNode[]>, default: undefined },\n value: { type: [String, Array] as PropType<string | string[]>, default: undefined },\n defaultValue: { type: [String, Array] as PropType<string | string[]>, default: undefined },\n multiple: Boolean,\n disabled: Boolean,\n loop: { type: Boolean, default: undefined },\n typeahead: { type: Boolean, default: undefined },\n dir: { type: String as PropType<Direction>, default: undefined },\n open: { type: Boolean, default: undefined },\n defaultOpen: Boolean,\n placement: { type: String as PropType<Placement>, default: undefined },\n offset: { type: Number, default: undefined },\n closeOnEscape: { type: Boolean, default: undefined },\n closeOnInteractOutside: { type: Boolean, default: undefined },\n variant: { type: String as PropType<ControlVariant>, default: undefined },\n tone: { type: String as PropType<Tone>, default: undefined },\n size: { type: String as PropType<Size>, default: undefined },\n translations: { type: Object as PropType<Partial<PopselectTranslations>>, default: undefined },\n },\n // *-change 携带 details 对象,update:* 携带裸值;回传的选中值恒为数组,单选时长度 ≤ 1\n emits: {\n 'value-change': (_details: PayloadOf<PopselectNotifiers, 'onValueChange'>) => true,\n 'open-change': (_details: PayloadOf<PopselectNotifiers, 'onOpenChange'>) => true,\n 'update:value': (_value: PayloadOf<PopselectNotifiers, 'onValueChange'>['value']) => true,\n 'update:open': (_open: PayloadOf<PopselectNotifiers, 'onOpenChange'>['open']) => true,\n },\n slots: Object as SlotsType<{\n default?: (props: PopselectRootSlotProps) => VNode[]\n }>,\n setup(props, { slots, emit }) {\n const notify: PopselectNotifiers = {\n onValueChange: (details) => {\n emit('value-change', details)\n emit('update:value', details.value)\n },\n onOpenChange: (details) => {\n emit('open-change', details)\n emit('update:open', details.open)\n },\n }\n const ctx = usePopselect(props as PopselectRootProps, notify)\n providePopselect(ctx)\n return () => h('div', ctx.api.value.getRootProps() as Record<string, unknown>, slots.default?.({\n open: ctx.api.value.open,\n value: ctx.api.value.value,\n collection: ctx.api.value.collection,\n focusedValue: ctx.api.value.focusedValue,\n canClear: ctx.api.value.canClear,\n isSelected: ctx.api.value.isSelected,\n setOpen: ctx.api.value.setOpen,\n setValue: ctx.api.value.setValue,\n select: ctx.api.value.select,\n clear: ctx.api.value.clear,\n }))\n },\n})\n\n/** 盒:触发器与清空按钮在里面并排,描边、底色与聚焦环都长在它上面。 */\nexport const XhPopselectControl = defineComponent({\n name: 'XhPopselectControl',\n setup(_, { slots }) {\n const ctx = usePopselectContext()\n return () => h('div', ctx.api.value.getControlProps() as Record<string, unknown>, slots.default?.())\n },\n})\n\nexport const XhPopselectTrigger = defineComponent({\n name: 'XhPopselectTrigger',\n props: {\n /** 借用作者的子节点当触发器,不再渲染自己的包裹元素;子节点须恰好一个。 */\n asChild: Boolean,\n },\n setup(props, { slots }) {\n const ctx = usePopselectContext()\n return () => {\n const attrs = {\n ...ctx.api.value.getTriggerProps() as Record<string, unknown>,\n ref: (el: unknown) => { ctx.triggerRef.value = el as HTMLElement },\n }\n const children = slots.default?.()\n // asChild:把触发器属性合到作者的节点上,不再自己渲染包裹元素\n if (props.asChild) {\n const merged = mergeIntoChild(children, attrs, 'popselect')\n if (merged)\n return merged\n }\n return h('button', attrs, children)\n }\n },\n})\n\n/** 清空钮:盒里 trigger 的兄弟节点,有选中值才显出;没写内容时由皮肤画叉。 */\nexport const XhPopselectClearTrigger = defineComponent({\n name: 'XhPopselectClearTrigger',\n setup(_, { slots }) {\n const ctx = usePopselectContext()\n return () => h('button', ctx.api.value.getClearTriggerProps() as Record<string, unknown>, slots.default?.())\n },\n})\n\nexport const XhPopselectPositioner = defineComponent({\n name: 'XhPopselectPositioner',\n // 根是 Teleport,Vue 不会把直通属性合上去,作者写的 class 与 style 得自己接住落到 positioner 上\n inheritAttrs: false,\n setup(_, { slots, attrs }) {\n const ctx = usePopselectContext()\n // 定位层搬到 portal 落点,逃开祖先的层叠上下文\n return () => h(Teleport, { to: ctx.portalTarget.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?.()),\n ])\n },\n})\n\nexport const XhPopselectContent = defineComponent({\n name: 'XhPopselectContent',\n setup(_, { slots }) {\n const ctx = usePopselectContext()\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?.() ?? renderItems(ctx.api.value.collection, slots.item))\n },\n})\n\nexport const XhPopselectItem = defineComponent({\n name: 'XhPopselectItem',\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 = usePopselectContext()\n const item = computed<PopselectItemProps>(() => ({ value: props.value, disabled: props.disabled }))\n providePopselectItem({ item })\n // 本条目持有焦点时,value 变更重报焦点条目,卸载时上报列表失焦\n const itemEl = ref<HTMLElement | null>(null)\n watch(() => props.value, (next, prev) => {\n if (next === prev)\n return\n const { listbox } = ctx\n if (listbox.getStatus() !== 'Started')\n return\n if (itemEl.value && listbox.scope.getActiveElement() === itemEl.value)\n listbox.send({ type: 'ITEM.FOCUS', value: next })\n })\n onBeforeUnmount(() => {\n const { listbox } = ctx\n if (listbox.getStatus() !== 'Started')\n return\n // 按「本节点当下正持有焦点」判定,不按 value 比对\n if (itemEl.value && listbox.scope.getActiveElement() === itemEl.value)\n listbox.send({ type: 'LIST.BLUR' })\n })\n return () => h(\n 'div',\n { ...ctx.api.value.getItemProps(item.value) as Record<string, unknown>, ref: itemEl },\n slots.default?.(),\n )\n },\n})\n\nexport const XhPopselectItemText = defineComponent({\n name: 'XhPopselectItemText',\n setup(_, { slots }) {\n const ctx = usePopselectContext()\n const { item } = usePopselectItemContext()\n return () => h('span', ctx.api.value.getItemTextProps(item.value) as Record<string, unknown>, slots.default?.())\n },\n})\n\nexport const XhPopselectItemIndicator = defineComponent({\n name: 'XhPopselectItemIndicator',\n setup(_, { slots }) {\n const ctx = usePopselectContext()\n const { item } = usePopselectItemContext()\n return () => h('span', ctx.api.value.getItemIndicatorProps(item.value) as Record<string, unknown>, slots.default?.())\n },\n})\n\n/**\n * 浮层里没写默认插槽时按 collection 铺开的条目,作者只交数据。\n * 与手写部件产出的 DOM 完全一致,要在条目之外放别的节点就写默认插槽。\n */\nfunction renderItems(\n collection: readonly PopselectNodeMeta[],\n itemSlot?: (node: PopselectNodeMeta) => VNode[],\n): VNode[] {\n return collection.map(node =>\n h(XhPopselectItem, { key: node.value, value: node.value }, () => [\n h(XhPopselectItemText, null, () => itemSlot?.(node) ?? node.label),\n h(XhPopselectItemIndicator),\n ]),\n )\n}\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"popselect.js","names":[],"sources":["../../../src/components/popselect/popselect.ts"],"sourcesContent":["import type { PopselectApi, PopselectItemProps, PopselectNode, PopselectNodeMeta, PopselectTranslations } from '@xihan-ui/headless'\nimport type { ControlVariant, Direction, Placement, Size, Tone } from '@xihan-ui/kernel'\nimport type { PropType, SlotsType, VNode } from 'vue'\nimport type { PayloadOf } from '../../runtime/payload'\nimport type { PopselectNotifiers, PopselectRootProps } from './use-popselect'\nimport { computed, defineComponent, h, mergeProps, onBeforeUnmount, ref, Teleport, watch } from 'vue'\nimport { mergeIntoChild } from '../../runtime/as-child'\nimport { useScrollbars } from '../../runtime/use-scrollbars'\nimport { providePopselect, providePopselectItem, usePopselectContext, usePopselectItemContext } from './context'\nimport { usePopselect } from './use-popselect'\n\n/** 默认插槽的载荷:浮层开合、选中集合与条目数据,以及改动它们的方法。 */\nexport type PopselectRootSlotProps = Pick<\n PopselectApi,\n 'open' | 'value' | 'collection' | 'focusedValue' | 'canClear' | 'isSelected' | 'setOpen' | 'setValue' | 'select' | 'clear'\n>\n\nexport const XhPopselectRoot = defineComponent({\n name: 'XhPopselectRoot',\n // 有 connect 或机器兜底的 prop 一律 default: undefined\n props: {\n collection: { type: Array as PropType<PopselectNode[]>, default: undefined },\n value: { type: [String, Array] as PropType<string | string[]>, default: undefined },\n defaultValue: { type: [String, Array] as PropType<string | string[]>, default: undefined },\n multiple: Boolean,\n disabled: Boolean,\n loop: { type: Boolean, default: undefined },\n typeahead: { type: Boolean, default: undefined },\n dir: { type: String as PropType<Direction>, default: undefined },\n open: { type: Boolean, default: undefined },\n defaultOpen: Boolean,\n placement: { type: String as PropType<Placement>, default: undefined },\n offset: { type: Number, default: undefined },\n closeOnEscape: { type: Boolean, default: undefined },\n closeOnInteractOutside: { type: Boolean, default: undefined },\n variant: { type: String as PropType<ControlVariant>, default: undefined },\n tone: { type: String as PropType<Tone>, default: undefined },\n size: { type: String as PropType<Size>, default: undefined },\n translations: { type: Object as PropType<Partial<PopselectTranslations>>, default: undefined },\n },\n // *-change 携带 details 对象,update:* 携带裸值;回传的选中值恒为数组,单选时长度 ≤ 1\n emits: {\n 'value-change': (_details: PayloadOf<PopselectNotifiers, 'onValueChange'>) => true,\n 'open-change': (_details: PayloadOf<PopselectNotifiers, 'onOpenChange'>) => true,\n 'update:value': (_value: PayloadOf<PopselectNotifiers, 'onValueChange'>['value']) => true,\n 'update:open': (_open: PayloadOf<PopselectNotifiers, 'onOpenChange'>['open']) => true,\n },\n slots: Object as SlotsType<{\n default?: (props: PopselectRootSlotProps) => VNode[]\n }>,\n setup(props, { slots, emit }) {\n const notify: PopselectNotifiers = {\n onValueChange: (details) => {\n emit('value-change', details)\n emit('update:value', details.value)\n },\n onOpenChange: (details) => {\n emit('open-change', details)\n emit('update:open', details.open)\n },\n }\n const ctx = usePopselect(props as PopselectRootProps, notify)\n providePopselect(ctx)\n return () => h('div', ctx.api.value.getRootProps() as Record<string, unknown>, slots.default?.({\n open: ctx.api.value.open,\n value: ctx.api.value.value,\n collection: ctx.api.value.collection,\n focusedValue: ctx.api.value.focusedValue,\n canClear: ctx.api.value.canClear,\n isSelected: ctx.api.value.isSelected,\n setOpen: ctx.api.value.setOpen,\n setValue: ctx.api.value.setValue,\n select: ctx.api.value.select,\n clear: ctx.api.value.clear,\n }))\n },\n})\n\n/** 盒:触发器与清空按钮在里面并排,描边、底色与聚焦环都长在它上面。 */\nexport const XhPopselectControl = defineComponent({\n name: 'XhPopselectControl',\n setup(_, { slots }) {\n const ctx = usePopselectContext()\n return () => h('div', ctx.api.value.getControlProps() as Record<string, unknown>, slots.default?.())\n },\n})\n\nexport const XhPopselectTrigger = defineComponent({\n name: 'XhPopselectTrigger',\n props: {\n /** 借用作者的子节点当触发器,不再渲染自己的包裹元素;子节点须恰好一个。 */\n asChild: Boolean,\n },\n setup(props, { slots }) {\n const ctx = usePopselectContext()\n return () => {\n const attrs = {\n ...ctx.api.value.getTriggerProps() as Record<string, unknown>,\n ref: (el: unknown) => { ctx.triggerRef.value = el as HTMLElement },\n }\n const children = slots.default?.()\n // asChild:把触发器属性合到作者的节点上,不再自己渲染包裹元素\n if (props.asChild) {\n const merged = mergeIntoChild(children, attrs, 'popselect')\n if (merged)\n return merged\n }\n return h('button', attrs, children)\n }\n },\n})\n\n/** 清空钮:盒里 trigger 的兄弟节点,有选中值才显出;没写内容时由皮肤画叉。 */\nexport const XhPopselectClearTrigger = defineComponent({\n name: 'XhPopselectClearTrigger',\n setup(_, { slots }) {\n const ctx = usePopselectContext()\n return () => h('button', ctx.api.value.getClearTriggerProps() as Record<string, unknown>, slots.default?.())\n },\n})\n\nexport const XhPopselectPositioner = defineComponent({\n name: 'XhPopselectPositioner',\n // 根是 Teleport,Vue 不会把直通属性合上去,作者写的 class 与 style 得自己接住落到 positioner 上\n inheritAttrs: false,\n setup(_, { slots, attrs }) {\n const ctx = usePopselectContext()\n // 候选列表的自绘条:与 content 同级、绝对定位不占布局,壳是这层已经 fixed 的 positioner\n const bars = useScrollbars({ scrollable: () => ctx.contentRef.value })\n // 定位层搬到 portal 落点,逃开祖先的层叠上下文\n return () => h(Teleport, { to: ctx.portalTarget.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 XhPopselectContent = defineComponent({\n name: 'XhPopselectContent',\n setup(_, { slots }) {\n const ctx = usePopselectContext()\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?.() ?? renderItems(ctx.api.value.collection, slots.item))\n },\n})\n\nexport const XhPopselectItem = defineComponent({\n name: 'XhPopselectItem',\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 = usePopselectContext()\n const item = computed<PopselectItemProps>(() => ({ value: props.value, disabled: props.disabled }))\n providePopselectItem({ item })\n // 本条目持有焦点时,value 变更重报焦点条目,卸载时上报列表失焦\n const itemEl = ref<HTMLElement | null>(null)\n watch(() => props.value, (next, prev) => {\n if (next === prev)\n return\n const { listbox } = ctx\n if (listbox.getStatus() !== 'Started')\n return\n if (itemEl.value && listbox.scope.getActiveElement() === itemEl.value)\n listbox.send({ type: 'ITEM.FOCUS', value: next })\n })\n onBeforeUnmount(() => {\n const { listbox } = ctx\n if (listbox.getStatus() !== 'Started')\n return\n // 按「本节点当下正持有焦点」判定,不按 value 比对\n if (itemEl.value && listbox.scope.getActiveElement() === itemEl.value)\n listbox.send({ type: 'LIST.BLUR' })\n })\n return () => h(\n 'div',\n { ...ctx.api.value.getItemProps(item.value) as Record<string, unknown>, ref: itemEl },\n slots.default?.(),\n )\n },\n})\n\nexport const XhPopselectItemText = defineComponent({\n name: 'XhPopselectItemText',\n setup(_, { slots }) {\n const ctx = usePopselectContext()\n const { item } = usePopselectItemContext()\n return () => h('span', ctx.api.value.getItemTextProps(item.value) as Record<string, unknown>, slots.default?.())\n },\n})\n\nexport const XhPopselectItemIndicator = defineComponent({\n name: 'XhPopselectItemIndicator',\n setup(_, { slots }) {\n const ctx = usePopselectContext()\n const { item } = usePopselectItemContext()\n return () => h('span', ctx.api.value.getItemIndicatorProps(item.value) as Record<string, unknown>, slots.default?.())\n },\n})\n\n/**\n * 浮层里没写默认插槽时按 collection 铺开的条目,作者只交数据。\n * 与手写部件产出的 DOM 完全一致,要在条目之外放别的节点就写默认插槽。\n */\nfunction renderItems(\n collection: readonly PopselectNodeMeta[],\n itemSlot?: (node: PopselectNodeMeta) => VNode[],\n): VNode[] {\n return collection.map(node =>\n h(XhPopselectItem, { key: node.value, value: node.value }, () => [\n h(XhPopselectItemText, null, () => itemSlot?.(node) ?? node.label),\n h(XhPopselectItemIndicator),\n ]),\n )\n}\n"],"mappings":"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"}
|
|
@@ -45,7 +45,7 @@ function usePopselect(props, notify = {}) {
|
|
|
45
45
|
const registerLayer = () => config.layerRegistry.register({
|
|
46
46
|
kind: "popover",
|
|
47
47
|
node: () => contentRef.value,
|
|
48
|
-
branches: () => [triggerRef.value].filter(Boolean),
|
|
48
|
+
branches: () => [triggerRef.value, positionerRef.value].filter(Boolean),
|
|
49
49
|
isModal: () => false,
|
|
50
50
|
setModal: () => {},
|
|
51
51
|
surfaces: () => []
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"use-popselect.js","names":[],"sources":["../../../src/components/popselect/use-popselect.ts"],"sourcesContent":["import type {\n ListboxSchema,\n PopoverSchema,\n PopselectApi,\n PopselectNode,\n PopselectTranslations,\n} from '@xihan-ui/headless'\nimport type { Cleanup, ControlVariant, Direction, Layer, Placement, RuntimeConfig, Size, Tone } from '@xihan-ui/kernel'\nimport type { Service } from '@xihan-ui/machine'\nimport type { ComputedRef, Ref } from 'vue'\nimport { connectPopselect, listboxMachine, popoverMachine, popselectInitialFocus } from '@xihan-ui/headless'\nimport { createRuntimeConfig, createScope } from '@xihan-ui/kernel'\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\n/** 根部件对外的全部输入:浮层一半归 popover 机器,列表一半归 listbox 机器,三个视觉轴直给 connect。 */\nexport interface PopselectRootProps {\n collection?: PopselectNode[]\n value?: string | string[]\n defaultValue?: string | string[]\n multiple?: boolean\n disabled?: boolean\n loop?: boolean\n typeahead?: boolean\n dir?: Direction\n open?: boolean\n defaultOpen?: boolean\n placement?: Placement\n offset?: number\n closeOnEscape?: boolean\n closeOnInteractOutside?: boolean\n variant?: ControlVariant\n tone?: Tone\n size?: Size\n translations?: Partial<PopselectTranslations>\n}\n\nexport interface PopselectContext {\n /** 浮层机器,供部件读开合状态。 */\n popover: Service<PopoverSchema>\n /** 列表机器,供部件上报 DOM 侧的事实(如条目卸载带走了焦点)。 */\n listbox: Service<ListboxSchema>\n api: ComputedRef<PopselectApi>\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 interface PopselectNotifiers {\n onValueChange?: ListboxSchema['props']['onValueChange']\n onOpenChange?: PopoverSchema['props']['onOpenChange']\n}\n\nexport function usePopselect(props: PopselectRootProps, notify: PopselectNotifiers = {}): PopselectContext {\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 // 两台机器共用一个 scope:trigger 与 content 的 id 由它派生,aria-controls 才指得准\n const scope = createScope(null, idGen)\n\n const popover = useMachine(popoverMachine, () => ({\n open: props.open,\n defaultOpen: props.defaultOpen,\n placement: props.placement,\n offset: props.offset,\n closeOnEscape: props.closeOnEscape,\n closeOnInteractOutside: props.closeOnInteractOutside,\n // 弹出选择不陷焦点:Tab 走得出去,走出去即由消解层判定收起\n modal: false,\n onOpenChange: notify.onOpenChange,\n }), scope)\n\n // 连打检索缓冲存在 listbox 机器的 refs 里,适配器不必注入\n const listbox = useMachine(listboxMachine, () => ({\n collection: props.collection,\n value: props.value,\n defaultValue: props.defaultValue,\n multiple: props.multiple,\n disabled: props.disabled,\n loop: props.loop,\n typeahead: props.typeahead,\n dir: props.dir,\n onValueChange: notify.onValueChange,\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 // 只提供注册函数,入栈出栈由 popover 机器的 trackLayer 效应按展开态驱动\n const registerLayer = (): { layer: Layer, dispose: Cleanup } => config!.layerRegistry.register({\n kind: 'popover',\n node: () => contentRef.value,\n // trigger
|
|
1
|
+
{"version":3,"file":"use-popselect.js","names":[],"sources":["../../../src/components/popselect/use-popselect.ts"],"sourcesContent":["import type {\n ListboxSchema,\n PopoverSchema,\n PopselectApi,\n PopselectNode,\n PopselectTranslations,\n} from '@xihan-ui/headless'\nimport type { Cleanup, ControlVariant, Direction, Layer, Placement, RuntimeConfig, Size, Tone } from '@xihan-ui/kernel'\nimport type { Service } from '@xihan-ui/machine'\nimport type { ComputedRef, Ref } from 'vue'\nimport { connectPopselect, listboxMachine, popoverMachine, popselectInitialFocus } from '@xihan-ui/headless'\nimport { createRuntimeConfig, createScope } from '@xihan-ui/kernel'\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\n/** 根部件对外的全部输入:浮层一半归 popover 机器,列表一半归 listbox 机器,三个视觉轴直给 connect。 */\nexport interface PopselectRootProps {\n collection?: PopselectNode[]\n value?: string | string[]\n defaultValue?: string | string[]\n multiple?: boolean\n disabled?: boolean\n loop?: boolean\n typeahead?: boolean\n dir?: Direction\n open?: boolean\n defaultOpen?: boolean\n placement?: Placement\n offset?: number\n closeOnEscape?: boolean\n closeOnInteractOutside?: boolean\n variant?: ControlVariant\n tone?: Tone\n size?: Size\n translations?: Partial<PopselectTranslations>\n}\n\nexport interface PopselectContext {\n /** 浮层机器,供部件读开合状态。 */\n popover: Service<PopoverSchema>\n /** 列表机器,供部件上报 DOM 侧的事实(如条目卸载带走了焦点)。 */\n listbox: Service<ListboxSchema>\n api: ComputedRef<PopselectApi>\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 interface PopselectNotifiers {\n onValueChange?: ListboxSchema['props']['onValueChange']\n onOpenChange?: PopoverSchema['props']['onOpenChange']\n}\n\nexport function usePopselect(props: PopselectRootProps, notify: PopselectNotifiers = {}): PopselectContext {\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 // 两台机器共用一个 scope:trigger 与 content 的 id 由它派生,aria-controls 才指得准\n const scope = createScope(null, idGen)\n\n const popover = useMachine(popoverMachine, () => ({\n open: props.open,\n defaultOpen: props.defaultOpen,\n placement: props.placement,\n offset: props.offset,\n closeOnEscape: props.closeOnEscape,\n closeOnInteractOutside: props.closeOnInteractOutside,\n // 弹出选择不陷焦点:Tab 走得出去,走出去即由消解层判定收起\n modal: false,\n onOpenChange: notify.onOpenChange,\n }), scope)\n\n // 连打检索缓冲存在 listbox 机器的 refs 里,适配器不必注入\n const listbox = useMachine(listboxMachine, () => ({\n collection: props.collection,\n value: props.value,\n defaultValue: props.defaultValue,\n multiple: props.multiple,\n disabled: props.disabled,\n loop: props.loop,\n typeahead: props.typeahead,\n dir: props.dir,\n onValueChange: notify.onValueChange,\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 // 只提供注册函数,入栈出栈由 popover 机器的 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 setModal: () => {},\n // 列表不带遮罩,没有「点它就该关本层」的表面\n surfaces: () => [],\n })\n\n // 定位引擎由适配器注入,机器只经端口驱动\n popover.refs.set('config', config!)\n popover.refs.set('registerLayer', registerLayer)\n popover.refs.set('position', createPositionEngine())\n popover.refs.set('getAnchorEl', () => triggerRef.value)\n popover.refs.set('getFloatingEl', () => positionerRef.value)\n popover.refs.set('getContentEl', () => contentRef.value)\n // 落焦点由 popselect 这一侧收口:有锚点条目就落它,没有就落列表容器\n popover.refs.set('getInitialFocusEl', () => popselectInitialFocus(listbox, contentRef.value))\n }\n\n const api = computed(() => connectPopselect({\n popover,\n listbox,\n props: { variant: props.variant, tone: props.tone, size: props.size, translations: props.translations },\n }, vueNormalize))\n\n // 退场闸门:收起从跟着 open 走,改成跟着 presence 走\n const visible = useOverlayExit({ config, isOpen: () => api.value.open, contentRef })\n // 全局配置写了容器就用它,否则落到运行时那个单一浮层落点;没有 DOM 时才回到 body\n const portalTarget = computed<string | Element>(() => xhConfig.value.portalContainer?.() ?? config?.portalContainer() ?? 'body')\n\n return { visible, popover, listbox, api, triggerRef, positionerRef, contentRef, portalTarget }\n}\n"],"mappings":";;;;;;;;;;AA8DA,SAAgB,aAAa,OAA2B,SAA6B,CAAC,GAAqB;CACzG,MAAM,WAAW,YAAY;CAC7B,MAAM,aAAa,IAAwB,IAAI;CAC/C,MAAM,gBAAgB,IAAwB,IAAI;CAClD,MAAM,aAAa,IAAwB,IAAI;CAE/C,MAAM,QAAQ,qBAAqB;CAEnC,MAAM,QAAQ,YAAY,MAAM,KAAK;CAErC,MAAM,UAAU,WAAW,uBAAuB;EAChD,MAAM,MAAM;EACZ,aAAa,MAAM;EACnB,WAAW,MAAM;EACjB,QAAQ,MAAM;EACd,eAAe,MAAM;EACrB,wBAAwB,MAAM;EAE9B,OAAO;EACP,cAAc,OAAO;CACvB,IAAI,KAAK;CAGT,MAAM,UAAU,WAAW,uBAAuB;EAChD,YAAY,MAAM;EAClB,OAAO,MAAM;EACb,cAAc,MAAM;EACpB,UAAU,MAAM;EAChB,UAAU,MAAM;EAChB,MAAM,MAAM;EACZ,WAAW,MAAM;EACjB,KAAK,MAAM;EACX,eAAe,OAAO;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;GAEjB,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;EAEvD,QAAQ,KAAK,IAAI,2BAA2B,sBAAsB,SAAS,WAAW,KAAK,CAAC;CAC9F;CAEA,MAAM,MAAM,eAAe,iBAAiB;EAC1C;EACA;EACA,OAAO;GAAE,SAAS,MAAM;GAAS,MAAM,MAAM;GAAM,MAAM,MAAM;GAAM,cAAc,MAAM;EAAa;CACxG,GAAG,YAAY,CAAC;CAOhB,OAAO;EAAE,SAJO,eAAe;GAAE;GAAQ,cAAc,IAAI,MAAM;GAAM;EAAW,CAInE;EAAG;EAAS;EAAS;EAAK;EAAY;EAAe;EAAY,cAF3D,eAAiC,SAAS,MAAM,kBAAkB,KAAK,QAAQ,gBAAgB,KAAK,MAE9B;CAAE;AAC/F"}
|