@editora/ui-core 0.1.9 → 0.1.10
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/README.md +35 -0
- package/dist/ElementBase-1b301e7f.js +1 -0
- package/dist/ElementBase-909688f3.mjs +79 -0
- package/dist/accordion.cjs.js +360 -0
- package/dist/accordion.esm.js +647 -0
- package/dist/alert-dialog.cjs.js +567 -0
- package/dist/alert-dialog.esm.js +1043 -0
- package/dist/alert.cjs.js +351 -0
- package/dist/alert.esm.js +450 -0
- package/dist/anchor.cjs.js +30 -0
- package/dist/anchor.esm.js +62 -0
- package/dist/animated-beam.cjs.js +720 -0
- package/dist/animated-beam.esm.js +1540 -0
- package/dist/animated-list.cjs.js +672 -0
- package/dist/animated-list.esm.js +1137 -0
- package/dist/animated-text.cjs.js +683 -0
- package/dist/animated-text.esm.js +1020 -0
- package/dist/app-header.cjs.js +345 -0
- package/dist/app-header.esm.js +398 -0
- package/dist/aspect-ratio.cjs.js +294 -0
- package/dist/aspect-ratio.esm.js +416 -0
- package/dist/avatar.cjs.js +365 -0
- package/dist/avatar.esm.js +513 -0
- package/dist/badge.cjs.js +432 -0
- package/dist/badge.esm.js +554 -0
- package/dist/block-controls.cjs.js +347 -0
- package/dist/block-controls.esm.js +556 -0
- package/dist/box.cjs.js +226 -0
- package/dist/box.esm.js +556 -0
- package/dist/breadcrumb.cjs.js +288 -0
- package/dist/breadcrumb.esm.js +523 -0
- package/dist/button.cjs.js +521 -0
- package/dist/button.esm.js +671 -0
- package/dist/calendar-2c11b824.mjs +1685 -0
- package/dist/calendar-a8735e40.js +741 -0
- package/dist/calendar.cjs.js +1 -0
- package/dist/calendar.esm.js +11 -0
- package/dist/card.cjs.js +306 -0
- package/dist/card.esm.js +378 -0
- package/dist/chart.cjs.js +783 -0
- package/dist/chart.esm.js +1369 -0
- package/dist/checkbox.cjs.js +338 -0
- package/dist/checkbox.esm.js +455 -0
- package/dist/collapsible.cjs.js +381 -0
- package/dist/collapsible.esm.js +548 -0
- package/dist/collection-a1aac0c6.mjs +56 -0
- package/dist/collection-a2969ad2.js +1 -0
- package/dist/collection.cjs.js +1 -0
- package/dist/collection.esm.js +136 -0
- package/dist/color-picker.cjs.js +803 -0
- package/dist/color-picker.esm.js +1809 -0
- package/dist/combobox.cjs.js +525 -0
- package/dist/combobox.esm.js +1023 -0
- package/dist/command-palette.cjs.js +67 -0
- package/dist/command-palette.esm.js +181 -0
- package/dist/command.cjs.js +130 -0
- package/dist/command.esm.js +307 -0
- package/dist/container.cjs.js +115 -0
- package/dist/container.esm.js +156 -0
- package/dist/context-menu.cjs.js +357 -0
- package/dist/context-menu.esm.js +1204 -0
- package/dist/control-group.cjs.js +80 -0
- package/dist/control-group.esm.js +110 -0
- package/dist/data-table.cjs.js +682 -0
- package/dist/data-table.esm.js +1660 -0
- package/dist/date-field.cjs.js +142 -0
- package/dist/date-field.esm.js +384 -0
- package/dist/date-picker.cjs.js +570 -0
- package/dist/date-picker.esm.js +1067 -0
- package/dist/date-range-picker.cjs.js +455 -0
- package/dist/date-range-picker.esm.js +973 -0
- package/dist/date-range-time-picker.cjs.js +573 -0
- package/dist/date-range-time-picker.esm.js +1137 -0
- package/dist/date-time-picker.cjs.js +495 -0
- package/dist/date-time-picker.esm.js +1062 -0
- package/dist/date-time-utils-5cf58cd0.js +1 -0
- package/dist/date-time-utils-bdceb7af.mjs +273 -0
- package/dist/description.cjs.js +85 -0
- package/dist/description.esm.js +136 -0
- package/dist/dialog.cjs.js +406 -0
- package/dist/dialog.esm.js +822 -0
- package/dist/direction-provider.cjs.js +30 -0
- package/dist/direction-provider.esm.js +74 -0
- package/dist/dismissable-layer-193e3bed.js +1 -0
- package/dist/dismissable-layer-9c7e6b58.mjs +112 -0
- package/dist/dismissable-layer.cjs.js +6 -0
- package/dist/dismissable-layer.esm.js +115 -0
- package/dist/dock.cjs.js +347 -0
- package/dist/dock.esm.js +826 -0
- package/dist/drawer.cjs.js +538 -0
- package/dist/drawer.esm.js +872 -0
- package/dist/dropdown.cjs.js +511 -0
- package/dist/dropdown.esm.js +1084 -0
- package/dist/dropzone.cjs.js +1 -0
- package/dist/dropzone.esm.js +11 -0
- package/dist/empty-state.cjs.js +169 -0
- package/dist/empty-state.esm.js +199 -0
- package/dist/field-error.cjs.js +74 -0
- package/dist/field-error.esm.js +125 -0
- package/dist/field.cjs.js +398 -0
- package/dist/field.esm.js +542 -0
- package/dist/fieldset.cjs.js +214 -0
- package/dist/fieldset.esm.js +298 -0
- package/dist/file-upload.cjs.js +353 -0
- package/dist/file-upload.esm.js +740 -0
- package/dist/flex.cjs.js +54 -0
- package/dist/flex.esm.js +168 -0
- package/dist/floating-toolbar.cjs.js +223 -0
- package/dist/floating-toolbar.esm.js +513 -0
- package/dist/focus-scope-103833ee.mjs +147 -0
- package/dist/focus-scope-2b12b4e7.js +1 -0
- package/dist/focus-scope.cjs.js +6 -0
- package/dist/focus-scope.esm.js +97 -0
- package/dist/form.cjs.js +377 -0
- package/dist/form.esm.js +862 -0
- package/dist/gantt.cjs.js +157 -0
- package/dist/gantt.esm.js +214 -0
- package/dist/grid.cjs.js +67 -0
- package/dist/grid.esm.js +211 -0
- package/dist/hover-card.cjs.js +284 -0
- package/dist/hover-card.esm.js +470 -0
- package/dist/icon-9ed13093.mjs +364 -0
- package/dist/icon-cloud.cjs.js +495 -0
- package/dist/icon-cloud.esm.js +828 -0
- package/dist/icon-eaa486b3.js +207 -0
- package/dist/icon.cjs.js +1 -0
- package/dist/icon.esm.js +6 -0
- package/dist/index.cjs.js +1 -36010
- package/dist/index.esm.js +440 -66615
- package/dist/inline-edit.cjs.js +118 -0
- package/dist/inline-edit.esm.js +206 -0
- package/dist/input.cjs.js +535 -0
- package/dist/input.esm.js +790 -0
- package/dist/label.cjs.js +195 -0
- package/dist/label.esm.js +301 -0
- package/dist/layout.cjs.js +266 -0
- package/dist/layout.esm.js +408 -0
- package/dist/listbox-308789a0.mjs +210 -0
- package/dist/listbox-ef2f708e.js +46 -0
- package/dist/listbox.cjs.js +1 -0
- package/dist/listbox.esm.js +6 -0
- package/dist/marquee.cjs.js +513 -0
- package/dist/marquee.esm.js +767 -0
- package/dist/masonry-grid.cjs.js +65 -0
- package/dist/masonry-grid.esm.js +180 -0
- package/dist/menu-item-styles-27fdbac4.mjs +181 -0
- package/dist/menu-item-styles-83ad1e22.js +152 -0
- package/dist/menu.cjs.js +275 -0
- package/dist/menu.esm.js +743 -0
- package/dist/menubar.cjs.js +455 -0
- package/dist/menubar.esm.js +1195 -0
- package/dist/meter.cjs.js +241 -0
- package/dist/meter.esm.js +334 -0
- package/dist/multi-select.cjs.js +549 -0
- package/dist/multi-select.esm.js +914 -0
- package/dist/navigation-menu.cjs.js +382 -0
- package/dist/navigation-menu.esm.js +614 -0
- package/dist/number-field.cjs.js +351 -0
- package/dist/number-field.esm.js +771 -0
- package/dist/number-ticker.cjs.js +209 -0
- package/dist/number-ticker.esm.js +749 -0
- package/dist/odometer.cjs.js +313 -0
- package/dist/odometer.esm.js +565 -0
- package/dist/orbiter.cjs.js +495 -0
- package/dist/orbiter.esm.js +831 -0
- package/dist/overlayManager-86454af7.mjs +58 -0
- package/dist/overlayManager-ece06517.js +1 -0
- package/dist/pagination.cjs.js +201 -0
- package/dist/pagination.esm.js +297 -0
- package/dist/panel-group-40254cdd.js +36 -0
- package/dist/panel-group-a376cc5e.mjs +326 -0
- package/dist/panel-group.cjs.js +1 -0
- package/dist/panel-group.esm.js +7 -0
- package/dist/panel.cjs.js +22 -0
- package/dist/panel.esm.js +46 -0
- package/dist/password-field.cjs.js +626 -0
- package/dist/password-field.esm.js +925 -0
- package/dist/pin-input.cjs.js +185 -0
- package/dist/pin-input.esm.js +412 -0
- package/dist/placement-grid.cjs.js +99 -0
- package/dist/placement-grid.esm.js +486 -0
- package/dist/plugin-panel.cjs.js +131 -0
- package/dist/plugin-panel.esm.js +173 -0
- package/dist/popover.cjs.js +286 -0
- package/dist/popover.esm.js +483 -0
- package/dist/portal-1cf392ca.mjs +114 -0
- package/dist/portal-d8d7fbca.js +1 -0
- package/dist/portal.cjs.js +39 -0
- package/dist/portal.esm.js +187 -0
- package/dist/positioner-accc6e5f.js +1 -0
- package/dist/positioner-fbd61bf1.mjs +132 -0
- package/dist/positioner.cjs.js +6 -0
- package/dist/positioner.esm.js +137 -0
- package/dist/presence.cjs.js +164 -0
- package/dist/presence.esm.js +301 -0
- package/dist/progress.cjs.js +329 -0
- package/dist/progress.esm.js +453 -0
- package/dist/quick-actions.cjs.js +202 -0
- package/dist/quick-actions.esm.js +357 -0
- package/dist/radio-group.cjs.js +257 -0
- package/dist/radio-group.esm.js +477 -0
- package/dist/rating.cjs.js +355 -0
- package/dist/rating.esm.js +637 -0
- package/dist/roving-focus-group-4350c9a7.mjs +50 -0
- package/dist/roving-focus-group-5c059bf9.js +1 -0
- package/dist/roving-focus-group.cjs.js +1 -0
- package/dist/roving-focus-group.esm.js +72 -0
- package/dist/{runtime-3cc1c386.mjs → runtime-4ac0107b.mjs} +348 -459
- package/dist/runtime-5f282bc8.js +1 -0
- package/dist/runtime.cjs.js +1 -1
- package/dist/runtime.esm.js +24 -23
- package/dist/scroll-area.cjs.js +294 -0
- package/dist/scroll-area.esm.js +478 -0
- package/dist/scroll-lock-48793569.js +1 -0
- package/dist/scroll-lock-9de6d328.mjs +53 -0
- package/dist/section.cjs.js +167 -0
- package/dist/section.esm.js +202 -0
- package/dist/select.cjs.js +799 -0
- package/dist/select.esm.js +1266 -0
- package/dist/selection-popup.cjs.js +203 -0
- package/dist/selection-popup.esm.js +392 -0
- package/dist/separator.cjs.js +221 -0
- package/dist/separator.esm.js +241 -0
- package/dist/sidebar.cjs.js +769 -0
- package/dist/sidebar.esm.js +1219 -0
- package/dist/skeleton.cjs.js +205 -0
- package/dist/skeleton.esm.js +249 -0
- package/dist/slider.cjs.js +493 -0
- package/dist/slider.esm.js +694 -0
- package/dist/slot.cjs.js +159 -0
- package/dist/slot.esm.js +227 -0
- package/dist/sortable.cjs.js +855 -1
- package/dist/sortable.esm.js +2176 -2
- package/dist/spinning-text.cjs.js +395 -0
- package/dist/spinning-text.esm.js +635 -0
- package/dist/split-button.cjs.js +410 -0
- package/dist/split-button.esm.js +619 -0
- package/dist/splitter.cjs.js +70 -0
- package/dist/splitter.esm.js +105 -0
- package/dist/standalone/accordion.d.ts +2 -0
- package/dist/standalone/accordion.d.ts.map +1 -0
- package/dist/standalone/alert-dialog.d.ts +2 -0
- package/dist/standalone/alert-dialog.d.ts.map +1 -0
- package/dist/standalone/alert.d.ts +2 -0
- package/dist/standalone/alert.d.ts.map +1 -0
- package/dist/standalone/anchor.d.ts +2 -0
- package/dist/standalone/anchor.d.ts.map +1 -0
- package/dist/standalone/animated-beam.d.ts +2 -0
- package/dist/standalone/animated-beam.d.ts.map +1 -0
- package/dist/standalone/animated-list.d.ts +2 -0
- package/dist/standalone/animated-list.d.ts.map +1 -0
- package/dist/standalone/animated-text.d.ts +2 -0
- package/dist/standalone/animated-text.d.ts.map +1 -0
- package/dist/standalone/app-header.d.ts +2 -0
- package/dist/standalone/app-header.d.ts.map +1 -0
- package/dist/standalone/aspect-ratio.d.ts +2 -0
- package/dist/standalone/aspect-ratio.d.ts.map +1 -0
- package/dist/standalone/avatar.d.ts +2 -0
- package/dist/standalone/avatar.d.ts.map +1 -0
- package/dist/standalone/badge.d.ts +2 -0
- package/dist/standalone/badge.d.ts.map +1 -0
- package/dist/standalone/block-controls.d.ts +2 -0
- package/dist/standalone/block-controls.d.ts.map +1 -0
- package/dist/standalone/box.d.ts +2 -0
- package/dist/standalone/box.d.ts.map +1 -0
- package/dist/standalone/breadcrumb.d.ts +2 -0
- package/dist/standalone/breadcrumb.d.ts.map +1 -0
- package/dist/standalone/button.d.ts +2 -0
- package/dist/standalone/button.d.ts.map +1 -0
- package/dist/standalone/calendar.d.ts +2 -0
- package/dist/standalone/calendar.d.ts.map +1 -0
- package/dist/standalone/card.d.ts +2 -0
- package/dist/standalone/card.d.ts.map +1 -0
- package/dist/standalone/chart.d.ts +2 -0
- package/dist/standalone/chart.d.ts.map +1 -0
- package/dist/standalone/checkbox.d.ts +2 -0
- package/dist/standalone/checkbox.d.ts.map +1 -0
- package/dist/standalone/collapsible.d.ts +2 -0
- package/dist/standalone/collapsible.d.ts.map +1 -0
- package/dist/standalone/collection.d.ts +2 -0
- package/dist/standalone/collection.d.ts.map +1 -0
- package/dist/standalone/color-picker.d.ts +2 -0
- package/dist/standalone/color-picker.d.ts.map +1 -0
- package/dist/standalone/combobox.d.ts +2 -0
- package/dist/standalone/combobox.d.ts.map +1 -0
- package/dist/standalone/command-palette.d.ts +2 -0
- package/dist/standalone/command-palette.d.ts.map +1 -0
- package/dist/standalone/command.d.ts +2 -0
- package/dist/standalone/command.d.ts.map +1 -0
- package/dist/standalone/container.d.ts +2 -0
- package/dist/standalone/container.d.ts.map +1 -0
- package/dist/standalone/context-menu.d.ts +2 -0
- package/dist/standalone/context-menu.d.ts.map +1 -0
- package/dist/standalone/control-group.d.ts +2 -0
- package/dist/standalone/control-group.d.ts.map +1 -0
- package/dist/standalone/data-table.d.ts +2 -0
- package/dist/standalone/data-table.d.ts.map +1 -0
- package/dist/standalone/date-field.d.ts +2 -0
- package/dist/standalone/date-field.d.ts.map +1 -0
- package/dist/standalone/date-picker.d.ts +2 -0
- package/dist/standalone/date-picker.d.ts.map +1 -0
- package/dist/standalone/date-range-picker.d.ts +2 -0
- package/dist/standalone/date-range-picker.d.ts.map +1 -0
- package/dist/standalone/date-range-time-picker.d.ts +2 -0
- package/dist/standalone/date-range-time-picker.d.ts.map +1 -0
- package/dist/standalone/date-time-picker.d.ts +2 -0
- package/dist/standalone/date-time-picker.d.ts.map +1 -0
- package/dist/standalone/description.d.ts +2 -0
- package/dist/standalone/description.d.ts.map +1 -0
- package/dist/standalone/dialog.d.ts +2 -0
- package/dist/standalone/dialog.d.ts.map +1 -0
- package/dist/standalone/direction-provider.d.ts +2 -0
- package/dist/standalone/direction-provider.d.ts.map +1 -0
- package/dist/standalone/dismissable-layer.d.ts +2 -0
- package/dist/standalone/dismissable-layer.d.ts.map +1 -0
- package/dist/standalone/dock.d.ts +2 -0
- package/dist/standalone/dock.d.ts.map +1 -0
- package/dist/standalone/drawer.d.ts +2 -0
- package/dist/standalone/drawer.d.ts.map +1 -0
- package/dist/standalone/dropdown.d.ts +2 -0
- package/dist/standalone/dropdown.d.ts.map +1 -0
- package/dist/standalone/dropzone.d.ts +2 -0
- package/dist/standalone/dropzone.d.ts.map +1 -0
- package/dist/standalone/empty-state.d.ts +2 -0
- package/dist/standalone/empty-state.d.ts.map +1 -0
- package/dist/standalone/field-error.d.ts +2 -0
- package/dist/standalone/field-error.d.ts.map +1 -0
- package/dist/standalone/field.d.ts +2 -0
- package/dist/standalone/field.d.ts.map +1 -0
- package/dist/standalone/fieldset.d.ts +2 -0
- package/dist/standalone/fieldset.d.ts.map +1 -0
- package/dist/standalone/file-upload.d.ts +2 -0
- package/dist/standalone/file-upload.d.ts.map +1 -0
- package/dist/standalone/flex.d.ts +2 -0
- package/dist/standalone/flex.d.ts.map +1 -0
- package/dist/standalone/floating-toolbar.d.ts +2 -0
- package/dist/standalone/floating-toolbar.d.ts.map +1 -0
- package/dist/standalone/focus-scope.d.ts +2 -0
- package/dist/standalone/focus-scope.d.ts.map +1 -0
- package/dist/standalone/form.d.ts +2 -0
- package/dist/standalone/form.d.ts.map +1 -0
- package/dist/standalone/gantt.d.ts +2 -0
- package/dist/standalone/gantt.d.ts.map +1 -0
- package/dist/standalone/grid.d.ts +2 -0
- package/dist/standalone/grid.d.ts.map +1 -0
- package/dist/standalone/hover-card.d.ts +2 -0
- package/dist/standalone/hover-card.d.ts.map +1 -0
- package/dist/standalone/icon-cloud.d.ts +2 -0
- package/dist/standalone/icon-cloud.d.ts.map +1 -0
- package/dist/standalone/icon.d.ts +2 -0
- package/dist/standalone/icon.d.ts.map +1 -0
- package/dist/standalone/inline-edit.d.ts +2 -0
- package/dist/standalone/inline-edit.d.ts.map +1 -0
- package/dist/standalone/input.d.ts +2 -0
- package/dist/standalone/input.d.ts.map +1 -0
- package/dist/standalone/label.d.ts +2 -0
- package/dist/standalone/label.d.ts.map +1 -0
- package/dist/standalone/layout.d.ts +2 -0
- package/dist/standalone/layout.d.ts.map +1 -0
- package/dist/standalone/listbox.d.ts +2 -0
- package/dist/standalone/listbox.d.ts.map +1 -0
- package/dist/standalone/marquee.d.ts +2 -0
- package/dist/standalone/marquee.d.ts.map +1 -0
- package/dist/standalone/masonry-grid.d.ts +2 -0
- package/dist/standalone/masonry-grid.d.ts.map +1 -0
- package/dist/standalone/menu.d.ts +2 -0
- package/dist/standalone/menu.d.ts.map +1 -0
- package/dist/standalone/menubar.d.ts +2 -0
- package/dist/standalone/menubar.d.ts.map +1 -0
- package/dist/standalone/meter.d.ts +2 -0
- package/dist/standalone/meter.d.ts.map +1 -0
- package/dist/standalone/multi-select.d.ts +2 -0
- package/dist/standalone/multi-select.d.ts.map +1 -0
- package/dist/standalone/navigation-menu.d.ts +2 -0
- package/dist/standalone/navigation-menu.d.ts.map +1 -0
- package/dist/standalone/number-field.d.ts +2 -0
- package/dist/standalone/number-field.d.ts.map +1 -0
- package/dist/standalone/number-ticker.d.ts +2 -0
- package/dist/standalone/number-ticker.d.ts.map +1 -0
- package/dist/standalone/odometer.d.ts +2 -0
- package/dist/standalone/odometer.d.ts.map +1 -0
- package/dist/standalone/orbiter.d.ts +2 -0
- package/dist/standalone/orbiter.d.ts.map +1 -0
- package/dist/standalone/pagination.d.ts +2 -0
- package/dist/standalone/pagination.d.ts.map +1 -0
- package/dist/standalone/panel-group.d.ts +2 -0
- package/dist/standalone/panel-group.d.ts.map +1 -0
- package/dist/standalone/panel.d.ts +2 -0
- package/dist/standalone/panel.d.ts.map +1 -0
- package/dist/standalone/password-field.d.ts +2 -0
- package/dist/standalone/password-field.d.ts.map +1 -0
- package/dist/standalone/pin-input.d.ts +2 -0
- package/dist/standalone/pin-input.d.ts.map +1 -0
- package/dist/standalone/placement-grid.d.ts +2 -0
- package/dist/standalone/placement-grid.d.ts.map +1 -0
- package/dist/standalone/plugin-panel.d.ts +2 -0
- package/dist/standalone/plugin-panel.d.ts.map +1 -0
- package/dist/standalone/popover.d.ts +2 -0
- package/dist/standalone/popover.d.ts.map +1 -0
- package/dist/standalone/portal.d.ts +2 -0
- package/dist/standalone/portal.d.ts.map +1 -0
- package/dist/standalone/positioner.d.ts +2 -0
- package/dist/standalone/positioner.d.ts.map +1 -0
- package/dist/standalone/presence.d.ts +2 -0
- package/dist/standalone/presence.d.ts.map +1 -0
- package/dist/standalone/progress.d.ts +2 -0
- package/dist/standalone/progress.d.ts.map +1 -0
- package/dist/standalone/quick-actions.d.ts +2 -0
- package/dist/standalone/quick-actions.d.ts.map +1 -0
- package/dist/standalone/radio-group.d.ts +2 -0
- package/dist/standalone/radio-group.d.ts.map +1 -0
- package/dist/standalone/rating.d.ts +2 -0
- package/dist/standalone/rating.d.ts.map +1 -0
- package/dist/standalone/roving-focus-group.d.ts +2 -0
- package/dist/standalone/roving-focus-group.d.ts.map +1 -0
- package/dist/standalone/scroll-area.d.ts +2 -0
- package/dist/standalone/scroll-area.d.ts.map +1 -0
- package/dist/standalone/section.d.ts +2 -0
- package/dist/standalone/section.d.ts.map +1 -0
- package/dist/standalone/select.d.ts +2 -0
- package/dist/standalone/select.d.ts.map +1 -0
- package/dist/standalone/selection-popup.d.ts +2 -0
- package/dist/standalone/selection-popup.d.ts.map +1 -0
- package/dist/standalone/separator.d.ts +2 -0
- package/dist/standalone/separator.d.ts.map +1 -0
- package/dist/standalone/sidebar.d.ts +2 -0
- package/dist/standalone/sidebar.d.ts.map +1 -0
- package/dist/standalone/skeleton.d.ts +2 -0
- package/dist/standalone/skeleton.d.ts.map +1 -0
- package/dist/standalone/slider.d.ts +2 -0
- package/dist/standalone/slider.d.ts.map +1 -0
- package/dist/standalone/slot.d.ts +2 -0
- package/dist/standalone/slot.d.ts.map +1 -0
- package/dist/standalone/spinning-text.d.ts +2 -0
- package/dist/standalone/spinning-text.d.ts.map +1 -0
- package/dist/standalone/split-button.d.ts +2 -0
- package/dist/standalone/split-button.d.ts.map +1 -0
- package/dist/standalone/splitter.d.ts +2 -0
- package/dist/standalone/splitter.d.ts.map +1 -0
- package/dist/standalone/stepper.d.ts +2 -0
- package/dist/standalone/stepper.d.ts.map +1 -0
- package/dist/standalone/switch.d.ts +2 -0
- package/dist/standalone/switch.d.ts.map +1 -0
- package/dist/standalone/table.d.ts +2 -0
- package/dist/standalone/table.d.ts.map +1 -0
- package/dist/standalone/tabs.d.ts +2 -0
- package/dist/standalone/tabs.d.ts.map +1 -0
- package/dist/standalone/tags-input.d.ts +2 -0
- package/dist/standalone/tags-input.d.ts.map +1 -0
- package/dist/standalone/textarea.d.ts +2 -0
- package/dist/standalone/textarea.d.ts.map +1 -0
- package/dist/standalone/time-field.d.ts +2 -0
- package/dist/standalone/time-field.d.ts.map +1 -0
- package/dist/standalone/time-picker.d.ts +2 -0
- package/dist/standalone/time-picker.d.ts.map +1 -0
- package/dist/standalone/timeline.d.ts +2 -0
- package/dist/standalone/timeline.d.ts.map +1 -0
- package/dist/standalone/toast.d.ts +2 -0
- package/dist/standalone/toast.d.ts.map +1 -0
- package/dist/standalone/toggle-group.d.ts +2 -0
- package/dist/standalone/toggle-group.d.ts.map +1 -0
- package/dist/standalone/toggle.d.ts +2 -0
- package/dist/standalone/toggle.d.ts.map +1 -0
- package/dist/standalone/toolbar.d.ts +2 -0
- package/dist/standalone/toolbar.d.ts.map +1 -0
- package/dist/standalone/tooltip.d.ts +2 -0
- package/dist/standalone/tooltip.d.ts.map +1 -0
- package/dist/standalone/transfer-list.d.ts +2 -0
- package/dist/standalone/transfer-list.d.ts.map +1 -0
- package/dist/standalone/tree-item.d.ts +2 -0
- package/dist/standalone/tree-item.d.ts.map +1 -0
- package/dist/standalone/tree.d.ts +2 -0
- package/dist/standalone/tree.d.ts.map +1 -0
- package/dist/standalone/visually-hidden.d.ts +2 -0
- package/dist/standalone/visually-hidden.d.ts.map +1 -0
- package/dist/standalone/wizard.d.ts +2 -0
- package/dist/standalone/wizard.d.ts.map +1 -0
- package/dist/stepper.cjs.js +337 -0
- package/dist/stepper.esm.js +578 -0
- package/dist/switch.cjs.js +397 -0
- package/dist/switch.esm.js +543 -0
- package/dist/table.cjs.js +212 -0
- package/dist/table.esm.js +432 -0
- package/dist/tabs.cjs.js +515 -0
- package/dist/tabs.esm.js +808 -0
- package/dist/tags-input.cjs.js +202 -0
- package/dist/tags-input.esm.js +436 -0
- package/dist/textarea.cjs.js +329 -0
- package/dist/textarea.esm.js +520 -0
- package/dist/time-field.cjs.js +142 -0
- package/dist/time-field.esm.js +387 -0
- package/dist/time-picker.cjs.js +284 -0
- package/dist/time-picker.esm.js +686 -0
- package/dist/timeline.cjs.js +198 -0
- package/dist/timeline.esm.js +248 -0
- package/dist/toast.cjs.js +234 -0
- package/dist/toast.esm.js +399 -0
- package/dist/toggle-group.cjs.js +131 -0
- package/dist/toggle-group.esm.js +382 -0
- package/dist/toggle.cjs.js +237 -0
- package/dist/toggle.esm.js +346 -0
- package/dist/toolbar.cjs.js +126 -0
- package/dist/toolbar.esm.js +240 -0
- package/dist/tooltip.cjs.js +159 -0
- package/dist/tooltip.esm.js +376 -0
- package/dist/transfer-list.cjs.js +734 -0
- package/dist/transfer-list.esm.js +969 -0
- package/dist/tree-0a7a8d05.js +39 -0
- package/dist/tree-dcd74a4a.mjs +294 -0
- package/dist/tree-item.cjs.js +103 -0
- package/dist/tree-item.esm.js +143 -0
- package/dist/tree.cjs.js +1 -0
- package/dist/tree.esm.js +7 -0
- package/dist/visually-hidden.cjs.js +42 -0
- package/dist/visually-hidden.esm.js +68 -0
- package/dist/wizard.cjs.js +677 -0
- package/dist/wizard.esm.js +1068 -0
- package/package.json +7 -1
- package/dist/runtime-41717c1e.js +0 -1
- package/dist/sortable-06a3bd6c.js +0 -855
- package/dist/sortable-23bf110b.mjs +0 -2254
package/dist/sortable.esm.js
CHANGED
|
@@ -1,4 +1,2178 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { E as ee } from "./ElementBase-909688f3.mjs";
|
|
2
|
+
const te = 1, re = 44, ie = 72, se = `
|
|
3
|
+
:host {
|
|
4
|
+
--ui-sortable-accent: var(--ui-color-primary, #2563eb);
|
|
5
|
+
--ui-sortable-surface: var(--ui-color-surface, #ffffff);
|
|
6
|
+
--ui-sortable-surface-muted: color-mix(in srgb, var(--ui-sortable-surface) 92%, #eff6ff);
|
|
7
|
+
--ui-sortable-border: color-mix(in srgb, var(--ui-color-border, #cbd5e1) 76%, transparent);
|
|
8
|
+
--ui-sortable-text: var(--ui-color-text, #0f172a);
|
|
9
|
+
--ui-sortable-muted: var(--ui-color-muted, #64748b);
|
|
10
|
+
--ui-sortable-shadow:
|
|
11
|
+
0 1px 3px rgba(15, 23, 42, 0.06),
|
|
12
|
+
0 16px 34px rgba(15, 23, 42, 0.08);
|
|
13
|
+
--ui-sortable-radius: 24px;
|
|
14
|
+
--ui-sortable-panel-radius: 18px;
|
|
15
|
+
--ui-sortable-item-radius: 16px;
|
|
16
|
+
--ui-sortable-handle-radius: 12px;
|
|
17
|
+
--ui-sortable-gap: 16px;
|
|
18
|
+
--ui-sortable-list-gap: 8px;
|
|
19
|
+
--ui-sortable-item-gap: 12px;
|
|
20
|
+
--ui-sortable-dropzone-size: 10px;
|
|
21
|
+
--ui-sortable-dropzone-inside-size: 16px;
|
|
22
|
+
--ui-sortable-dropzone-container-min-block-size: 76px;
|
|
23
|
+
--ui-sortable-dropzone-container-min-inline-size: 180px;
|
|
24
|
+
--ui-sortable-indent: 22px;
|
|
25
|
+
display: block;
|
|
26
|
+
min-inline-size: 0;
|
|
27
|
+
color: var(--ui-sortable-text);
|
|
28
|
+
color-scheme: light dark;
|
|
29
|
+
font-family: "Inter", "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
|
|
30
|
+
box-sizing: border-box;
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
:host([disabled]) {
|
|
34
|
+
opacity: 0.72;
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
.root {
|
|
38
|
+
display: grid;
|
|
39
|
+
gap: 14px;
|
|
40
|
+
min-inline-size: 0;
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
.toolbar {
|
|
44
|
+
display: flex;
|
|
45
|
+
flex-wrap: wrap;
|
|
46
|
+
align-items: center;
|
|
47
|
+
justify-content: space-between;
|
|
48
|
+
gap: 10px 16px;
|
|
49
|
+
padding: 0 2px;
|
|
50
|
+
color: var(--ui-sortable-muted);
|
|
51
|
+
font-size: 13px;
|
|
52
|
+
line-height: 1.5;
|
|
53
|
+
}
|
|
54
|
+
|
|
55
|
+
.helper {
|
|
56
|
+
display: inline-flex;
|
|
57
|
+
align-items: center;
|
|
58
|
+
gap: 8px;
|
|
59
|
+
min-inline-size: 0;
|
|
60
|
+
}
|
|
61
|
+
|
|
62
|
+
.selection-pill {
|
|
63
|
+
display: inline-flex;
|
|
64
|
+
align-items: center;
|
|
65
|
+
justify-content: center;
|
|
66
|
+
min-inline-size: 28px;
|
|
67
|
+
min-block-size: 24px;
|
|
68
|
+
padding-inline: 8px;
|
|
69
|
+
border-radius: 999px;
|
|
70
|
+
background: color-mix(in srgb, var(--ui-sortable-accent) 14%, transparent);
|
|
71
|
+
color: color-mix(in srgb, var(--ui-sortable-accent) 84%, var(--ui-sortable-text));
|
|
72
|
+
font-weight: 700;
|
|
73
|
+
}
|
|
74
|
+
|
|
75
|
+
.lists {
|
|
76
|
+
display: grid;
|
|
77
|
+
gap: var(--ui-sortable-gap);
|
|
78
|
+
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
|
79
|
+
min-inline-size: 0;
|
|
80
|
+
}
|
|
81
|
+
|
|
82
|
+
.list {
|
|
83
|
+
display: grid;
|
|
84
|
+
grid-template-rows: auto 1fr;
|
|
85
|
+
gap: 12px;
|
|
86
|
+
min-inline-size: 0;
|
|
87
|
+
padding: 16px;
|
|
88
|
+
border: 1px solid var(--ui-sortable-border);
|
|
89
|
+
border-radius: var(--ui-sortable-radius);
|
|
90
|
+
background:
|
|
91
|
+
linear-gradient(
|
|
92
|
+
180deg,
|
|
93
|
+
color-mix(in srgb, var(--ui-sortable-surface) 96%, transparent),
|
|
94
|
+
color-mix(in srgb, var(--ui-sortable-accent) 4%, var(--ui-sortable-surface))
|
|
95
|
+
);
|
|
96
|
+
box-shadow: var(--ui-sortable-shadow);
|
|
97
|
+
}
|
|
98
|
+
|
|
99
|
+
.list[data-orientation="horizontal"] .items {
|
|
100
|
+
display: flex;
|
|
101
|
+
flex-wrap: nowrap;
|
|
102
|
+
overflow: auto hidden;
|
|
103
|
+
align-items: stretch;
|
|
104
|
+
}
|
|
105
|
+
|
|
106
|
+
.list[data-disabled="true"] {
|
|
107
|
+
opacity: 0.68;
|
|
108
|
+
}
|
|
109
|
+
|
|
110
|
+
.list-header {
|
|
111
|
+
display: grid;
|
|
112
|
+
gap: 4px;
|
|
113
|
+
}
|
|
114
|
+
|
|
115
|
+
.list-custom-header:empty {
|
|
116
|
+
display: none;
|
|
117
|
+
}
|
|
118
|
+
|
|
119
|
+
.list-custom-header:not(:empty) {
|
|
120
|
+
display: block;
|
|
121
|
+
}
|
|
122
|
+
|
|
123
|
+
.list-custom-header:not(:empty) + .list-default-header {
|
|
124
|
+
display: none;
|
|
125
|
+
}
|
|
126
|
+
|
|
127
|
+
.list-topline {
|
|
128
|
+
display: flex;
|
|
129
|
+
align-items: center;
|
|
130
|
+
justify-content: space-between;
|
|
131
|
+
gap: 12px;
|
|
132
|
+
}
|
|
133
|
+
|
|
134
|
+
.list-label {
|
|
135
|
+
font-size: 14px;
|
|
136
|
+
line-height: 1.4;
|
|
137
|
+
font-weight: 700;
|
|
138
|
+
color: var(--ui-sortable-text);
|
|
139
|
+
}
|
|
140
|
+
|
|
141
|
+
.list-count {
|
|
142
|
+
display: inline-flex;
|
|
143
|
+
align-items: center;
|
|
144
|
+
justify-content: center;
|
|
145
|
+
min-inline-size: 28px;
|
|
146
|
+
min-block-size: 24px;
|
|
147
|
+
padding-inline: 8px;
|
|
148
|
+
border-radius: 999px;
|
|
149
|
+
background: color-mix(in srgb, var(--ui-sortable-accent) 10%, transparent);
|
|
150
|
+
color: var(--ui-sortable-muted);
|
|
151
|
+
font-size: 12px;
|
|
152
|
+
font-weight: 700;
|
|
153
|
+
}
|
|
154
|
+
|
|
155
|
+
.list-description,
|
|
156
|
+
.list-helper,
|
|
157
|
+
.empty {
|
|
158
|
+
color: var(--ui-sortable-muted);
|
|
159
|
+
font-size: 12px;
|
|
160
|
+
line-height: 1.55;
|
|
161
|
+
}
|
|
162
|
+
|
|
163
|
+
.items {
|
|
164
|
+
display: grid;
|
|
165
|
+
align-content: start;
|
|
166
|
+
gap: var(--ui-sortable-list-gap);
|
|
167
|
+
min-block-size: 140px;
|
|
168
|
+
min-inline-size: 0;
|
|
169
|
+
}
|
|
170
|
+
|
|
171
|
+
.tree {
|
|
172
|
+
display: grid;
|
|
173
|
+
gap: var(--ui-sortable-list-gap);
|
|
174
|
+
min-inline-size: 0;
|
|
175
|
+
}
|
|
176
|
+
|
|
177
|
+
.list-custom-empty:empty {
|
|
178
|
+
display: none;
|
|
179
|
+
}
|
|
180
|
+
|
|
181
|
+
.list-custom-empty:not(:empty) {
|
|
182
|
+
display: block;
|
|
183
|
+
}
|
|
184
|
+
|
|
185
|
+
.list-custom-empty:not(:empty) + .empty {
|
|
186
|
+
display: none;
|
|
187
|
+
}
|
|
188
|
+
|
|
189
|
+
.item-shell {
|
|
190
|
+
display: grid;
|
|
191
|
+
gap: 8px;
|
|
192
|
+
min-inline-size: 0;
|
|
193
|
+
}
|
|
194
|
+
|
|
195
|
+
.item {
|
|
196
|
+
display: grid;
|
|
197
|
+
grid-template-columns: auto minmax(0, 1fr);
|
|
198
|
+
align-items: start;
|
|
199
|
+
gap: var(--ui-sortable-item-gap);
|
|
200
|
+
min-inline-size: 0;
|
|
201
|
+
padding: 12px;
|
|
202
|
+
border: 1px solid color-mix(in srgb, var(--ui-sortable-border) 82%, transparent);
|
|
203
|
+
border-radius: var(--ui-sortable-item-radius);
|
|
204
|
+
background: var(--ui-sortable-surface-muted);
|
|
205
|
+
box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
|
|
206
|
+
will-change: transform, opacity, box-shadow, border-color, background;
|
|
207
|
+
transition:
|
|
208
|
+
transform 180ms ease,
|
|
209
|
+
opacity 180ms ease,
|
|
210
|
+
box-shadow 180ms ease,
|
|
211
|
+
border-color 180ms ease,
|
|
212
|
+
background 180ms ease;
|
|
213
|
+
}
|
|
214
|
+
|
|
215
|
+
.item[data-drag-handle-mode="item"],
|
|
216
|
+
.item[data-drag-handle-mode="custom"] {
|
|
217
|
+
grid-template-columns: minmax(0, 1fr);
|
|
218
|
+
}
|
|
219
|
+
|
|
220
|
+
.item[data-drag-handle-mode="item"] {
|
|
221
|
+
cursor: grab;
|
|
222
|
+
}
|
|
223
|
+
|
|
224
|
+
.item[data-drag-handle-mode="item"][data-dragging="true"] {
|
|
225
|
+
cursor: grabbing;
|
|
226
|
+
}
|
|
227
|
+
|
|
228
|
+
.item[data-selected="true"] {
|
|
229
|
+
border-color: color-mix(in srgb, var(--ui-sortable-accent) 32%, var(--ui-sortable-border));
|
|
230
|
+
background: color-mix(in srgb, var(--ui-sortable-accent) 11%, var(--ui-sortable-surface));
|
|
231
|
+
box-shadow:
|
|
232
|
+
0 0 0 1px color-mix(in srgb, var(--ui-sortable-accent) 10%, transparent),
|
|
233
|
+
0 10px 24px rgba(15, 23, 42, 0.08);
|
|
234
|
+
}
|
|
235
|
+
|
|
236
|
+
.item[data-focused="true"] {
|
|
237
|
+
border-color: color-mix(in srgb, var(--ui-sortable-accent) 42%, var(--ui-sortable-border));
|
|
238
|
+
box-shadow:
|
|
239
|
+
0 0 0 3px color-mix(in srgb, var(--ui-sortable-accent) 12%, transparent),
|
|
240
|
+
0 10px 24px rgba(15, 23, 42, 0.08);
|
|
241
|
+
}
|
|
242
|
+
|
|
243
|
+
.item[data-drop-inside-active="true"] {
|
|
244
|
+
border-color: color-mix(in srgb, var(--ui-sortable-accent) 48%, var(--ui-sortable-border));
|
|
245
|
+
background:
|
|
246
|
+
linear-gradient(
|
|
247
|
+
180deg,
|
|
248
|
+
color-mix(in srgb, var(--ui-sortable-accent) 14%, var(--ui-sortable-surface)),
|
|
249
|
+
color-mix(in srgb, var(--ui-sortable-accent) 10%, var(--ui-sortable-surface-muted))
|
|
250
|
+
);
|
|
251
|
+
box-shadow:
|
|
252
|
+
0 0 0 3px color-mix(in srgb, var(--ui-sortable-accent) 12%, transparent),
|
|
253
|
+
0 14px 30px rgba(15, 23, 42, 0.1);
|
|
254
|
+
}
|
|
255
|
+
|
|
256
|
+
.item[data-dragging="true"] {
|
|
257
|
+
opacity: 0.48;
|
|
258
|
+
transform: scale(0.985);
|
|
259
|
+
transition-duration: 0ms, 180ms, 180ms, 180ms, 180ms;
|
|
260
|
+
}
|
|
261
|
+
|
|
262
|
+
.item.item-placeholder {
|
|
263
|
+
grid-template-columns: 1fr;
|
|
264
|
+
border-style: dashed;
|
|
265
|
+
border-color: color-mix(in srgb, var(--ui-sortable-accent) 50%, var(--ui-sortable-border));
|
|
266
|
+
background:
|
|
267
|
+
linear-gradient(
|
|
268
|
+
180deg,
|
|
269
|
+
color-mix(in srgb, var(--ui-sortable-accent) 10%, var(--ui-sortable-surface)),
|
|
270
|
+
color-mix(in srgb, var(--ui-sortable-accent) 6%, var(--ui-sortable-surface-muted))
|
|
271
|
+
);
|
|
272
|
+
box-shadow:
|
|
273
|
+
inset 0 0 0 1px color-mix(in srgb, var(--ui-sortable-accent) 18%, transparent),
|
|
274
|
+
0 12px 26px rgba(15, 23, 42, 0.08);
|
|
275
|
+
}
|
|
276
|
+
|
|
277
|
+
.placeholder-content {
|
|
278
|
+
display: grid;
|
|
279
|
+
gap: 6px;
|
|
280
|
+
min-inline-size: 0;
|
|
281
|
+
}
|
|
282
|
+
|
|
283
|
+
.placeholder-kicker {
|
|
284
|
+
font-size: 11px;
|
|
285
|
+
line-height: 1.4;
|
|
286
|
+
font-weight: 700;
|
|
287
|
+
letter-spacing: 0.08em;
|
|
288
|
+
text-transform: uppercase;
|
|
289
|
+
color: color-mix(in srgb, var(--ui-sortable-accent) 72%, var(--ui-sortable-text));
|
|
290
|
+
}
|
|
291
|
+
|
|
292
|
+
.placeholder-title {
|
|
293
|
+
font-size: 14px;
|
|
294
|
+
line-height: 1.4;
|
|
295
|
+
font-weight: 700;
|
|
296
|
+
color: var(--ui-sortable-text);
|
|
297
|
+
}
|
|
298
|
+
|
|
299
|
+
.placeholder-description {
|
|
300
|
+
color: var(--ui-sortable-muted);
|
|
301
|
+
font-size: 12px;
|
|
302
|
+
line-height: 1.55;
|
|
303
|
+
}
|
|
304
|
+
|
|
305
|
+
.drag-preview-overlay {
|
|
306
|
+
position: fixed;
|
|
307
|
+
inset: auto auto auto auto;
|
|
308
|
+
top: -9999px;
|
|
309
|
+
left: -9999px;
|
|
310
|
+
z-index: 2147483646;
|
|
311
|
+
box-sizing: border-box;
|
|
312
|
+
inline-size: min(320px, calc(100vw - 32px));
|
|
313
|
+
padding: 12px;
|
|
314
|
+
border: 1px dashed color-mix(in srgb, var(--ui-sortable-accent) 50%, var(--ui-sortable-border));
|
|
315
|
+
border-radius: var(--ui-sortable-item-radius);
|
|
316
|
+
background:
|
|
317
|
+
linear-gradient(
|
|
318
|
+
180deg,
|
|
319
|
+
color-mix(in srgb, var(--ui-sortable-accent) 10%, var(--ui-sortable-surface)),
|
|
320
|
+
color-mix(in srgb, var(--ui-sortable-accent) 6%, var(--ui-sortable-surface-muted))
|
|
321
|
+
);
|
|
322
|
+
box-shadow:
|
|
323
|
+
inset 0 0 0 1px color-mix(in srgb, var(--ui-sortable-accent) 18%, transparent),
|
|
324
|
+
0 18px 40px rgba(15, 23, 42, 0.12);
|
|
325
|
+
pointer-events: none;
|
|
326
|
+
opacity: 0;
|
|
327
|
+
transition: opacity 120ms ease;
|
|
328
|
+
}
|
|
329
|
+
|
|
330
|
+
.drag-preview-overlay[data-visible="true"] {
|
|
331
|
+
opacity: 1;
|
|
332
|
+
}
|
|
333
|
+
|
|
334
|
+
.drag-preview-overlay .placeholder-description {
|
|
335
|
+
display: inline-block;
|
|
336
|
+
max-inline-size: 190px;
|
|
337
|
+
padding: 4px 8px;
|
|
338
|
+
border-radius: 10px;
|
|
339
|
+
background: color-mix(in srgb, var(--ui-sortable-surface) 94%, white 6%);
|
|
340
|
+
box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ui-sortable-border) 72%, transparent);
|
|
341
|
+
color: color-mix(in srgb, var(--ui-sortable-text) 84%, var(--ui-sortable-accent));
|
|
342
|
+
font-weight: 500;
|
|
343
|
+
}
|
|
344
|
+
|
|
345
|
+
.item[data-disabled="true"] {
|
|
346
|
+
opacity: 0.58;
|
|
347
|
+
}
|
|
348
|
+
|
|
349
|
+
.item-content {
|
|
350
|
+
display: grid;
|
|
351
|
+
gap: 4px;
|
|
352
|
+
min-inline-size: 0;
|
|
353
|
+
}
|
|
354
|
+
|
|
355
|
+
:host([custom-item-rendering][custom-item-rendering-pending]) {
|
|
356
|
+
visibility: hidden;
|
|
357
|
+
}
|
|
358
|
+
|
|
359
|
+
:host([custom-item-rendering][custom-item-rendering-ready]) .item-custom-content {
|
|
360
|
+
display: block;
|
|
361
|
+
min-inline-size: 0;
|
|
362
|
+
}
|
|
363
|
+
|
|
364
|
+
:host([custom-item-rendering][custom-item-rendering-ready]) .item-default-content {
|
|
365
|
+
display: none;
|
|
366
|
+
}
|
|
367
|
+
|
|
368
|
+
.item-custom-content:empty {
|
|
369
|
+
display: none;
|
|
370
|
+
}
|
|
371
|
+
|
|
372
|
+
.item-custom-content:not(:empty) {
|
|
373
|
+
display: block;
|
|
374
|
+
min-inline-size: 0;
|
|
375
|
+
}
|
|
376
|
+
|
|
377
|
+
.item-custom-content:not(:empty) + .item-default-content {
|
|
378
|
+
display: none;
|
|
379
|
+
}
|
|
380
|
+
|
|
381
|
+
.item-title {
|
|
382
|
+
font-size: 14px;
|
|
383
|
+
line-height: 1.4;
|
|
384
|
+
font-weight: 700;
|
|
385
|
+
color: var(--ui-sortable-text);
|
|
386
|
+
overflow-wrap: anywhere;
|
|
387
|
+
}
|
|
388
|
+
|
|
389
|
+
.item-description {
|
|
390
|
+
color: var(--ui-sortable-muted);
|
|
391
|
+
font-size: 12px;
|
|
392
|
+
line-height: 1.55;
|
|
393
|
+
overflow-wrap: anywhere;
|
|
394
|
+
}
|
|
395
|
+
|
|
396
|
+
.item-meta {
|
|
397
|
+
display: flex;
|
|
398
|
+
flex-wrap: wrap;
|
|
399
|
+
gap: 6px;
|
|
400
|
+
}
|
|
401
|
+
|
|
402
|
+
.item-badge {
|
|
403
|
+
display: inline-flex;
|
|
404
|
+
align-items: center;
|
|
405
|
+
gap: 6px;
|
|
406
|
+
padding: 4px 8px;
|
|
407
|
+
border-radius: 999px;
|
|
408
|
+
background: color-mix(in srgb, var(--ui-sortable-accent) 10%, transparent);
|
|
409
|
+
color: var(--ui-sortable-muted);
|
|
410
|
+
font-size: 11px;
|
|
411
|
+
font-weight: 600;
|
|
412
|
+
}
|
|
413
|
+
|
|
414
|
+
.item-badge[hidden] {
|
|
415
|
+
display: none;
|
|
416
|
+
}
|
|
417
|
+
|
|
418
|
+
.item[data-drop-inside-active="true"] .item-badge.drop-badge {
|
|
419
|
+
background: color-mix(in srgb, var(--ui-sortable-accent) 18%, var(--ui-sortable-surface));
|
|
420
|
+
color: color-mix(in srgb, var(--ui-sortable-accent) 78%, var(--ui-sortable-text));
|
|
421
|
+
}
|
|
422
|
+
|
|
423
|
+
.item-badge.drop-badge {
|
|
424
|
+
display: none;
|
|
425
|
+
}
|
|
426
|
+
|
|
427
|
+
.item[data-drop-inside-active="true"] .item-badge.drop-badge {
|
|
428
|
+
display: inline-flex;
|
|
429
|
+
}
|
|
430
|
+
|
|
431
|
+
.handle {
|
|
432
|
+
display: inline-grid;
|
|
433
|
+
place-items: center;
|
|
434
|
+
inline-size: 34px;
|
|
435
|
+
block-size: 34px;
|
|
436
|
+
margin: 0;
|
|
437
|
+
padding: 0;
|
|
438
|
+
border: 1px solid color-mix(in srgb, var(--ui-sortable-border) 86%, transparent);
|
|
439
|
+
border-radius: var(--ui-sortable-handle-radius);
|
|
440
|
+
background: color-mix(in srgb, var(--ui-sortable-surface) 92%, transparent);
|
|
441
|
+
color: var(--ui-sortable-muted);
|
|
442
|
+
cursor: grab;
|
|
443
|
+
touch-action: none;
|
|
444
|
+
user-select: none;
|
|
445
|
+
-webkit-user-select: none;
|
|
446
|
+
transition:
|
|
447
|
+
transform 160ms ease,
|
|
448
|
+
color 160ms ease,
|
|
449
|
+
border-color 160ms ease,
|
|
450
|
+
background 160ms ease;
|
|
451
|
+
}
|
|
452
|
+
|
|
453
|
+
.handle:hover {
|
|
454
|
+
color: color-mix(in srgb, var(--ui-sortable-accent) 80%, var(--ui-sortable-text));
|
|
455
|
+
border-color: color-mix(in srgb, var(--ui-sortable-accent) 26%, var(--ui-sortable-border));
|
|
456
|
+
background: color-mix(in srgb, var(--ui-sortable-accent) 8%, var(--ui-sortable-surface));
|
|
457
|
+
}
|
|
458
|
+
|
|
459
|
+
.handle:active {
|
|
460
|
+
cursor: grabbing;
|
|
461
|
+
transform: scale(0.96);
|
|
462
|
+
}
|
|
463
|
+
|
|
464
|
+
.handle[disabled] {
|
|
465
|
+
cursor: not-allowed;
|
|
466
|
+
opacity: 0.48;
|
|
467
|
+
}
|
|
468
|
+
|
|
469
|
+
.handle svg {
|
|
470
|
+
inline-size: 16px;
|
|
471
|
+
block-size: 16px;
|
|
472
|
+
}
|
|
473
|
+
|
|
474
|
+
.children {
|
|
475
|
+
display: grid;
|
|
476
|
+
gap: var(--ui-sortable-list-gap);
|
|
477
|
+
padding-inline-start: var(--ui-sortable-indent);
|
|
478
|
+
min-inline-size: 0;
|
|
479
|
+
}
|
|
480
|
+
|
|
481
|
+
.dropzone {
|
|
482
|
+
position: relative;
|
|
483
|
+
display: block;
|
|
484
|
+
min-block-size: var(--ui-sortable-dropzone-size);
|
|
485
|
+
min-inline-size: 0;
|
|
486
|
+
border-radius: 999px;
|
|
487
|
+
will-change: opacity, background;
|
|
488
|
+
transition: opacity 140ms ease, background 140ms ease;
|
|
489
|
+
}
|
|
490
|
+
|
|
491
|
+
.root[data-dropzone-style="container"] .dropzone {
|
|
492
|
+
display: grid;
|
|
493
|
+
place-items: center;
|
|
494
|
+
min-block-size: var(--ui-sortable-dropzone-match-block-size, var(--ui-sortable-dropzone-container-min-block-size));
|
|
495
|
+
inline-size: min(100%, var(--ui-sortable-dropzone-match-inline-size, 100%));
|
|
496
|
+
max-inline-size: var(--ui-sortable-dropzone-container-max-inline-size, none);
|
|
497
|
+
padding: 12px;
|
|
498
|
+
border: 1px dashed color-mix(in srgb, var(--ui-sortable-accent) 40%, var(--ui-sortable-border));
|
|
499
|
+
border-radius: var(--ui-sortable-item-radius);
|
|
500
|
+
background:
|
|
501
|
+
linear-gradient(
|
|
502
|
+
180deg,
|
|
503
|
+
color-mix(in srgb, var(--ui-sortable-accent) 9%, var(--ui-sortable-surface)),
|
|
504
|
+
color-mix(in srgb, var(--ui-sortable-accent) 5%, var(--ui-sortable-surface-muted))
|
|
505
|
+
);
|
|
506
|
+
box-shadow:
|
|
507
|
+
inset 0 0 0 1px color-mix(in srgb, var(--ui-sortable-accent) 12%, transparent),
|
|
508
|
+
0 8px 18px rgba(15, 23, 42, 0.05);
|
|
509
|
+
opacity: 0.82;
|
|
510
|
+
overflow: hidden;
|
|
511
|
+
}
|
|
512
|
+
|
|
513
|
+
.list[data-orientation="horizontal"] .dropzone {
|
|
514
|
+
min-block-size: auto;
|
|
515
|
+
min-inline-size: 16px;
|
|
516
|
+
align-self: stretch;
|
|
517
|
+
}
|
|
518
|
+
|
|
519
|
+
.root[data-dropzone-style="container"] .list[data-orientation="horizontal"] .dropzone {
|
|
520
|
+
min-block-size: var(--ui-sortable-dropzone-match-block-size, var(--ui-sortable-dropzone-container-min-block-size));
|
|
521
|
+
min-inline-size: var(--ui-sortable-dropzone-match-inline-size, var(--ui-sortable-dropzone-container-min-inline-size));
|
|
522
|
+
inline-size: auto;
|
|
523
|
+
align-self: stretch;
|
|
524
|
+
}
|
|
525
|
+
|
|
526
|
+
.dropzone::before {
|
|
527
|
+
content: '';
|
|
528
|
+
position: absolute;
|
|
529
|
+
inset-block-start: 50%;
|
|
530
|
+
inset-inline: 0;
|
|
531
|
+
block-size: 2px;
|
|
532
|
+
transform: translateY(-50%) scaleX(0.42);
|
|
533
|
+
transform-origin: center;
|
|
534
|
+
border-radius: 999px;
|
|
535
|
+
background: color-mix(in srgb, var(--ui-sortable-accent) 22%, transparent);
|
|
536
|
+
transition: transform 160ms ease, background 160ms ease;
|
|
537
|
+
}
|
|
538
|
+
|
|
539
|
+
.list[data-orientation="horizontal"] .dropzone::before {
|
|
540
|
+
inset-block: 0;
|
|
541
|
+
inset-inline-start: 50%;
|
|
542
|
+
inset-inline-end: auto;
|
|
543
|
+
inline-size: 2px;
|
|
544
|
+
block-size: 100%;
|
|
545
|
+
transform: translateX(-50%) scaleY(0.24);
|
|
546
|
+
}
|
|
547
|
+
|
|
548
|
+
.dropzone[data-active="true"] {
|
|
549
|
+
opacity: 1;
|
|
550
|
+
}
|
|
551
|
+
|
|
552
|
+
.root[data-dropzone-style="container"] .dropzone[data-active="true"] {
|
|
553
|
+
border-color: color-mix(in srgb, var(--ui-sortable-accent) 56%, var(--ui-sortable-border));
|
|
554
|
+
background:
|
|
555
|
+
linear-gradient(
|
|
556
|
+
180deg,
|
|
557
|
+
color-mix(in srgb, var(--ui-sortable-accent) 14%, var(--ui-sortable-surface)),
|
|
558
|
+
color-mix(in srgb, var(--ui-sortable-accent) 10%, var(--ui-sortable-surface-muted))
|
|
559
|
+
);
|
|
560
|
+
box-shadow:
|
|
561
|
+
inset 0 0 0 1px color-mix(in srgb, var(--ui-sortable-accent) 16%, transparent),
|
|
562
|
+
0 12px 24px rgba(15, 23, 42, 0.08);
|
|
563
|
+
}
|
|
564
|
+
|
|
565
|
+
.list[data-orientation="horizontal"] .dropzone[data-active="true"] {
|
|
566
|
+
opacity: 1;
|
|
567
|
+
}
|
|
568
|
+
|
|
569
|
+
.dropzone[data-active="true"]::before {
|
|
570
|
+
transform: translateY(-50%) scaleX(1);
|
|
571
|
+
background: color-mix(in srgb, var(--ui-sortable-accent) 86%, var(--ui-sortable-text));
|
|
572
|
+
}
|
|
573
|
+
|
|
574
|
+
.list[data-orientation="horizontal"] .dropzone[data-active="true"]::before {
|
|
575
|
+
transform: translateX(-50%) scaleY(1);
|
|
576
|
+
}
|
|
577
|
+
|
|
578
|
+
.dropzone[data-mode="inside"] {
|
|
579
|
+
min-block-size: var(--ui-sortable-dropzone-inside-size);
|
|
580
|
+
margin-block-start: -2px;
|
|
581
|
+
padding-inline-start: 6px;
|
|
582
|
+
}
|
|
583
|
+
|
|
584
|
+
.root[data-dropzone-style="container"] .dropzone[data-mode="inside"] {
|
|
585
|
+
min-block-size: max(
|
|
586
|
+
calc(var(--ui-sortable-dropzone-match-block-size, var(--ui-sortable-dropzone-container-min-block-size)) * 0.78),
|
|
587
|
+
var(--ui-sortable-dropzone-container-min-block-size)
|
|
588
|
+
);
|
|
589
|
+
margin-block-start: 0;
|
|
590
|
+
padding-inline-start: 12px;
|
|
591
|
+
}
|
|
592
|
+
|
|
593
|
+
.dropzone[data-mode="inside"]::before {
|
|
594
|
+
inset-inline-start: 8px;
|
|
595
|
+
inset-inline-end: auto;
|
|
596
|
+
inline-size: 42px;
|
|
597
|
+
}
|
|
598
|
+
|
|
599
|
+
.dropzone-label {
|
|
600
|
+
position: absolute;
|
|
601
|
+
inset-block-start: 50%;
|
|
602
|
+
inset-inline-start: 50%;
|
|
603
|
+
inset-inline-end: auto;
|
|
604
|
+
transform: translate(-50%, -50%) scale(0.98);
|
|
605
|
+
padding: 2px 8px;
|
|
606
|
+
border-radius: 999px;
|
|
607
|
+
background: color-mix(in srgb, var(--ui-sortable-surface) 84%, transparent);
|
|
608
|
+
color: var(--ui-sortable-muted);
|
|
609
|
+
font-size: 11px;
|
|
610
|
+
opacity: 0;
|
|
611
|
+
transition: opacity 120ms ease, transform 120ms ease;
|
|
612
|
+
pointer-events: none;
|
|
613
|
+
}
|
|
614
|
+
|
|
615
|
+
.root[data-dropzone-style="container"] .dropzone::before {
|
|
616
|
+
display: none;
|
|
617
|
+
}
|
|
618
|
+
|
|
619
|
+
.root[data-dropzone-style="container"] .dropzone-label {
|
|
620
|
+
position: static;
|
|
621
|
+
inset: auto;
|
|
622
|
+
transform: none;
|
|
623
|
+
padding: 0;
|
|
624
|
+
border-radius: 0;
|
|
625
|
+
background: transparent;
|
|
626
|
+
color: color-mix(in srgb, var(--ui-sortable-accent) 76%, var(--ui-sortable-text));
|
|
627
|
+
font-size: 12px;
|
|
628
|
+
font-weight: 700;
|
|
629
|
+
letter-spacing: 0.02em;
|
|
630
|
+
opacity: 1;
|
|
631
|
+
white-space: nowrap;
|
|
632
|
+
}
|
|
633
|
+
|
|
634
|
+
.dropzone[data-active="true"] .dropzone-label {
|
|
635
|
+
opacity: 1;
|
|
636
|
+
transform: translate(-50%, -50%) scale(1);
|
|
637
|
+
}
|
|
638
|
+
|
|
639
|
+
.root[data-drag-preview="true"] .dropzone-label {
|
|
640
|
+
opacity: 0;
|
|
641
|
+
}
|
|
642
|
+
|
|
643
|
+
.root[data-dropzone-style="container"][data-drag-preview="true"] .dropzone-label {
|
|
644
|
+
opacity: 1;
|
|
645
|
+
}
|
|
646
|
+
|
|
647
|
+
.root[data-drop-indicator-visibility="active"] .dropzone {
|
|
648
|
+
opacity: 0;
|
|
649
|
+
}
|
|
650
|
+
|
|
651
|
+
.root[data-dropzone-style="container"][data-drop-indicator-visibility="active"] .dropzone {
|
|
652
|
+
display: none;
|
|
653
|
+
opacity: 0;
|
|
654
|
+
}
|
|
655
|
+
|
|
656
|
+
.root[data-dropzone-style="container"][data-drop-indicator-visibility="active"] .dropzone[data-active="true"] {
|
|
657
|
+
display: grid;
|
|
658
|
+
opacity: 1;
|
|
659
|
+
}
|
|
660
|
+
|
|
661
|
+
.root[data-drop-indicator-visibility="active"] .dropzone::before {
|
|
662
|
+
background: transparent;
|
|
663
|
+
transform: translateY(-50%) scaleX(0.16);
|
|
664
|
+
}
|
|
665
|
+
|
|
666
|
+
.root[data-drop-indicator-visibility="active"] .list[data-orientation="horizontal"] .dropzone::before {
|
|
667
|
+
transform: translateX(-50%) scaleY(0.16);
|
|
668
|
+
}
|
|
669
|
+
|
|
670
|
+
.root[data-drop-indicator-visibility="active"] .dropzone[data-active="true"] {
|
|
671
|
+
opacity: 1;
|
|
672
|
+
}
|
|
673
|
+
|
|
674
|
+
.root[data-drop-indicator-visibility="active"] .dropzone[data-active="true"]::before {
|
|
675
|
+
transform: translateY(-50%) scaleX(1);
|
|
676
|
+
background: color-mix(in srgb, var(--ui-sortable-accent) 86%, var(--ui-sortable-text));
|
|
677
|
+
}
|
|
678
|
+
|
|
679
|
+
.root[data-drop-indicator-visibility="active"] .list[data-orientation="horizontal"] .dropzone[data-active="true"]::before {
|
|
680
|
+
transform: translateX(-50%) scaleY(1);
|
|
681
|
+
}
|
|
682
|
+
|
|
683
|
+
.root[data-drop-indicator-visibility="active"] .dropzone[data-active="true"] .dropzone-label {
|
|
684
|
+
opacity: 1;
|
|
685
|
+
transform: translate(-50%, -50%) scale(1);
|
|
686
|
+
}
|
|
687
|
+
|
|
688
|
+
.sr-only {
|
|
689
|
+
position: absolute;
|
|
690
|
+
inline-size: 1px;
|
|
691
|
+
block-size: 1px;
|
|
692
|
+
margin: -1px;
|
|
693
|
+
padding: 0;
|
|
694
|
+
overflow: hidden;
|
|
695
|
+
clip: rect(0, 0, 0, 0);
|
|
696
|
+
white-space: nowrap;
|
|
697
|
+
border: 0;
|
|
698
|
+
}
|
|
699
|
+
|
|
700
|
+
@media (prefers-reduced-motion: reduce) {
|
|
701
|
+
.item,
|
|
702
|
+
.handle,
|
|
703
|
+
.dropzone,
|
|
704
|
+
.dropzone::before,
|
|
705
|
+
.dropzone-label {
|
|
706
|
+
transition: none;
|
|
707
|
+
}
|
|
708
|
+
}
|
|
709
|
+
|
|
710
|
+
@media (forced-colors: active) {
|
|
711
|
+
.list,
|
|
712
|
+
.item,
|
|
713
|
+
.handle {
|
|
714
|
+
forced-color-adjust: none;
|
|
715
|
+
background: Canvas;
|
|
716
|
+
color: CanvasText;
|
|
717
|
+
border-color: CanvasText;
|
|
718
|
+
}
|
|
719
|
+
|
|
720
|
+
.dropzone::before {
|
|
721
|
+
background: Highlight;
|
|
722
|
+
}
|
|
723
|
+
}
|
|
724
|
+
`;
|
|
725
|
+
function V(u) {
|
|
726
|
+
if (!u)
|
|
727
|
+
return [];
|
|
728
|
+
try {
|
|
729
|
+
const e = JSON.parse(u);
|
|
730
|
+
return Array.isArray(e) ? e : [];
|
|
731
|
+
} catch {
|
|
732
|
+
return [];
|
|
733
|
+
}
|
|
734
|
+
}
|
|
735
|
+
function I(u) {
|
|
736
|
+
return u.replace(/&/g, "&").replace(/</g, "<").replace(/>/g, ">").replace(/"/g, """).replace(/'/g, "'");
|
|
737
|
+
}
|
|
738
|
+
function z(u, e) {
|
|
739
|
+
return `${u}::${e ?? "__root__"}`;
|
|
740
|
+
}
|
|
741
|
+
function X(u) {
|
|
742
|
+
return u ? [u.listId, u.parentId ?? "", u.beforeId ?? "", u.mode].join("::") : "";
|
|
743
|
+
}
|
|
744
|
+
function B(u, e) {
|
|
745
|
+
return X(u) === X(e);
|
|
746
|
+
}
|
|
747
|
+
function ne(u) {
|
|
748
|
+
if (!u || u === "none")
|
|
749
|
+
return { x: 1, y: 1 };
|
|
750
|
+
const e = u.match(/^matrix3d\((.+)\)$/);
|
|
751
|
+
if (e) {
|
|
752
|
+
const t = e[1].split(",").map((i) => Number.parseFloat(i.trim()));
|
|
753
|
+
if (t.length === 16 && t.every((i) => Number.isFinite(i)))
|
|
754
|
+
return {
|
|
755
|
+
x: t[0] || 1,
|
|
756
|
+
y: t[5] || 1
|
|
757
|
+
};
|
|
758
|
+
}
|
|
759
|
+
const r = u.match(/^matrix\((.+)\)$/);
|
|
760
|
+
if (r) {
|
|
761
|
+
const t = r[1].split(",").map((i) => Number.parseFloat(i.trim()));
|
|
762
|
+
if (t.length === 6 && t.every((i) => Number.isFinite(i))) {
|
|
763
|
+
const [i, s, o, a] = t;
|
|
764
|
+
return {
|
|
765
|
+
x: Math.sqrt(i * i + s * s) || 1,
|
|
766
|
+
y: Math.sqrt(o * o + a * a) || 1
|
|
767
|
+
};
|
|
768
|
+
}
|
|
769
|
+
}
|
|
770
|
+
return { x: 1, y: 1 };
|
|
771
|
+
}
|
|
772
|
+
function oe(u) {
|
|
773
|
+
return u === "item" ? "item" : "handle";
|
|
774
|
+
}
|
|
775
|
+
function P(u) {
|
|
776
|
+
return { ...u };
|
|
777
|
+
}
|
|
778
|
+
function ae(u, e, r, t, i, s) {
|
|
779
|
+
const o = M(u), a = E(u), l = /* @__PURE__ */ new Set(), n = [], d = (h) => {
|
|
780
|
+
const x = o.get(h);
|
|
781
|
+
!x || l.has(h) || (l.add(h), n.push(h), (a.get(z(x.listId, h)) || []).forEach(d));
|
|
782
|
+
};
|
|
783
|
+
t.forEach(d);
|
|
784
|
+
const c = u.map(P), g = c.filter((h) => l.has(h.id)), b = i ? c.map(P) : c.filter((h) => !l.has(h.id)), f = i ? g.map((h) => s(h, n)) : g.map(P), v = /* @__PURE__ */ new Map(), m = /* @__PURE__ */ new Map();
|
|
785
|
+
i && g.forEach((h, x) => {
|
|
786
|
+
v.set(h.id, f[x].id), m.set(f[x].id, h.id);
|
|
787
|
+
}), f.forEach((h) => {
|
|
788
|
+
const x = i ? m.get(h.id) : h.id, F = x ? o.get(x) : null;
|
|
789
|
+
F && (i && (h.parentId = F.parentId && v.has(F.parentId) && v.get(F.parentId) || null), h.listId = r.listId);
|
|
790
|
+
});
|
|
791
|
+
const y = t.map((h) => v.get(h) || h), w = [...b, ...f], k = E(b), A = z(r.listId, r.parentId), _ = [...k.get(A) || []], R = r.beforeId ? _.indexOf(r.beforeId) : _.length, S = R >= 0 ? R : _.length;
|
|
792
|
+
_.splice(S, 0, ...y), k.set(A, _), E(f).forEach((h, x) => {
|
|
793
|
+
const [, F] = x.split("::");
|
|
794
|
+
(F || "") !== "__root__" && k.set(x, [...h]);
|
|
795
|
+
});
|
|
796
|
+
const T = M(w);
|
|
797
|
+
y.forEach((h) => {
|
|
798
|
+
const x = T.get(h);
|
|
799
|
+
x && (x.parentId = r.parentId, x.listId = r.listId);
|
|
800
|
+
});
|
|
801
|
+
const $ = [], L = /* @__PURE__ */ new Set(), G = (h, x) => {
|
|
802
|
+
(k.get(z(h, x)) || []).forEach((O, K) => {
|
|
803
|
+
const p = T.get(O);
|
|
804
|
+
!p || L.has(O) || (L.add(O), p.listId = h, p.parentId = x, p.order = K, $.push(p), G(h, O));
|
|
805
|
+
});
|
|
806
|
+
};
|
|
807
|
+
return e.forEach((h) => G(h.id, null)), w.forEach((h) => {
|
|
808
|
+
L.has(h.id) || (h.parentId = null, $.push(h));
|
|
809
|
+
}), {
|
|
810
|
+
items: $.map(P),
|
|
811
|
+
insertedRootIds: y
|
|
812
|
+
};
|
|
813
|
+
}
|
|
814
|
+
function E(u) {
|
|
815
|
+
const e = /* @__PURE__ */ new Map();
|
|
816
|
+
return u.forEach((r) => {
|
|
817
|
+
const t = z(r.listId, r.parentId), i = e.get(t);
|
|
818
|
+
i ? i.push(r.id) : e.set(t, [r.id]);
|
|
819
|
+
}), e;
|
|
820
|
+
}
|
|
821
|
+
function M(u) {
|
|
822
|
+
return new Map(u.map((e) => [e.id, e]));
|
|
823
|
+
}
|
|
824
|
+
function Y(u) {
|
|
825
|
+
const e = /* @__PURE__ */ new Set(), r = [];
|
|
826
|
+
return u.forEach((t, i) => {
|
|
827
|
+
const s = typeof (t == null ? void 0 : t.id) == "string" && t.id.trim() ? t.id.trim() : `list-${i + 1}`;
|
|
828
|
+
e.has(s) || (e.add(s), r.push({
|
|
829
|
+
id: s,
|
|
830
|
+
label: typeof (t == null ? void 0 : t.label) == "string" && t.label.trim() ? t.label.trim() : `List ${i + 1}`,
|
|
831
|
+
description: typeof (t == null ? void 0 : t.description) == "string" ? t.description : "",
|
|
832
|
+
emptyLabel: typeof (t == null ? void 0 : t.emptyLabel) == "string" && t.emptyLabel.trim() ? t.emptyLabel.trim() : "Drop items here.",
|
|
833
|
+
orientation: (t == null ? void 0 : t.orientation) === "horizontal" ? "horizontal" : "vertical",
|
|
834
|
+
disabled: !!(t != null && t.disabled),
|
|
835
|
+
cloneOnDrag: !!(t != null && t.cloneOnDrag),
|
|
836
|
+
accepts: Array.isArray(t == null ? void 0 : t.accepts) ? t.accepts.filter((o) => typeof o == "string" && o.trim().length > 0) : void 0
|
|
837
|
+
}));
|
|
838
|
+
}), r.length ? r : [{
|
|
839
|
+
id: "default",
|
|
840
|
+
label: "Items",
|
|
841
|
+
description: "",
|
|
842
|
+
emptyLabel: "Drop items here.",
|
|
843
|
+
orientation: "vertical",
|
|
844
|
+
disabled: !1,
|
|
845
|
+
cloneOnDrag: !1
|
|
846
|
+
}];
|
|
847
|
+
}
|
|
848
|
+
function U(u, e) {
|
|
849
|
+
const r = new Set(u.map((n) => n.id)), t = [];
|
|
850
|
+
e.forEach((n, d) => {
|
|
851
|
+
const c = typeof (n == null ? void 0 : n.id) == "string" && n.id.trim() ? n.id.trim() : "", g = typeof (n == null ? void 0 : n.label) == "string" && n.label.trim() ? n.label.trim() : "";
|
|
852
|
+
if (!c || !g)
|
|
853
|
+
return;
|
|
854
|
+
const b = typeof (n == null ? void 0 : n.listId) == "string" && r.has(n.listId) ? n.listId : u[0].id;
|
|
855
|
+
t.push({
|
|
856
|
+
id: c,
|
|
857
|
+
label: g,
|
|
858
|
+
listId: b,
|
|
859
|
+
parentId: typeof (n == null ? void 0 : n.parentId) == "string" && n.parentId.trim() ? n.parentId.trim() : null,
|
|
860
|
+
description: typeof (n == null ? void 0 : n.description) == "string" ? n.description : "",
|
|
861
|
+
order: Number.isFinite(n == null ? void 0 : n.order) ? Number(n.order) : d,
|
|
862
|
+
disabled: !!(n != null && n.disabled),
|
|
863
|
+
dragDisabled: !!(n != null && n.dragDisabled),
|
|
864
|
+
cloneOnDrag: !!(n != null && n.cloneOnDrag),
|
|
865
|
+
hidden: !!(n != null && n.hidden)
|
|
866
|
+
});
|
|
867
|
+
});
|
|
868
|
+
const i = new Map(t.map((n) => [n.id, n]));
|
|
869
|
+
t.forEach((n) => {
|
|
870
|
+
if (!n.parentId)
|
|
871
|
+
return;
|
|
872
|
+
const d = i.get(n.parentId);
|
|
873
|
+
(!d || d.id === n.id || d.listId !== n.listId) && (n.parentId = null);
|
|
874
|
+
});
|
|
875
|
+
const s = /* @__PURE__ */ new Map();
|
|
876
|
+
t.forEach((n) => {
|
|
877
|
+
const d = z(n.listId, n.parentId), c = s.get(d);
|
|
878
|
+
c ? c.push(n) : s.set(d, [n]);
|
|
879
|
+
}), s.forEach((n) => n.sort((d, c) => d.order - c.order || d.label.localeCompare(c.label)));
|
|
880
|
+
const o = [], a = /* @__PURE__ */ new Set(), l = (n, d) => {
|
|
881
|
+
(s.get(z(n, d)) || []).forEach((g, b) => {
|
|
882
|
+
a.has(g.id) || (a.add(g.id), g.order = b, o.push(g), l(n, g.id));
|
|
883
|
+
});
|
|
884
|
+
};
|
|
885
|
+
return u.forEach((n) => l(n.id, null)), t.forEach((n) => {
|
|
886
|
+
a.has(n.id) || (n.parentId = null, o.push(n));
|
|
887
|
+
}), o.map(P);
|
|
888
|
+
}
|
|
889
|
+
function de(u) {
|
|
890
|
+
return JSON.stringify(u.map((e) => ({
|
|
891
|
+
id: e.id,
|
|
892
|
+
label: e.label,
|
|
893
|
+
listId: e.listId,
|
|
894
|
+
parentId: e.parentId,
|
|
895
|
+
description: e.description,
|
|
896
|
+
order: e.order,
|
|
897
|
+
disabled: e.disabled,
|
|
898
|
+
dragDisabled: e.dragDisabled,
|
|
899
|
+
cloneOnDrag: e.cloneOnDrag,
|
|
900
|
+
hidden: e.hidden
|
|
901
|
+
})));
|
|
902
|
+
}
|
|
903
|
+
function le(u) {
|
|
904
|
+
return JSON.stringify(u.map((e) => ({
|
|
905
|
+
id: e.id,
|
|
906
|
+
label: e.label,
|
|
907
|
+
description: e.description,
|
|
908
|
+
emptyLabel: e.emptyLabel,
|
|
909
|
+
orientation: e.orientation,
|
|
910
|
+
disabled: e.disabled,
|
|
911
|
+
cloneOnDrag: e.cloneOnDrag,
|
|
912
|
+
accepts: e.accepts
|
|
913
|
+
})));
|
|
914
|
+
}
|
|
915
|
+
function j(u) {
|
|
916
|
+
return JSON.stringify(u);
|
|
917
|
+
}
|
|
918
|
+
function J(u) {
|
|
919
|
+
const e = /* @__PURE__ */ new Map(), r = u.map((t) => {
|
|
920
|
+
const i = z(t.listId, t.parentId), s = e.get(i) ?? 0;
|
|
921
|
+
return e.set(i, s + 1), {
|
|
922
|
+
id: t.id,
|
|
923
|
+
listId: t.listId,
|
|
924
|
+
parentId: t.parentId,
|
|
925
|
+
index: s
|
|
926
|
+
};
|
|
927
|
+
});
|
|
928
|
+
return {
|
|
929
|
+
version: te,
|
|
930
|
+
records: r
|
|
931
|
+
};
|
|
932
|
+
}
|
|
933
|
+
function W(u, e) {
|
|
934
|
+
return e ? `${u.label} ${u.description}`.toLowerCase().includes(e.toLowerCase()) : !0;
|
|
935
|
+
}
|
|
936
|
+
function Q(u, e, r, t, i) {
|
|
937
|
+
const s = M(u), o = E(u), a = /* @__PURE__ */ new Map(), l = (c, g) => {
|
|
938
|
+
const b = [...o.get(z(c, g)) || []];
|
|
939
|
+
return i === "label" && b.sort((f, v) => {
|
|
940
|
+
const m = s.get(f), y = s.get(v);
|
|
941
|
+
return !m || !y ? 0 : m.label.localeCompare(y.label);
|
|
942
|
+
}), b;
|
|
943
|
+
}, n = (c, g, b) => {
|
|
944
|
+
const f = [];
|
|
945
|
+
return l(c, g).forEach((v) => {
|
|
946
|
+
const m = s.get(v);
|
|
947
|
+
if (!m || m.hidden)
|
|
948
|
+
return;
|
|
949
|
+
const y = n(c, m.id);
|
|
950
|
+
!W(m, t) && y.length === 0 || (f.push({
|
|
951
|
+
id: m.id,
|
|
952
|
+
disabled: m.disabled
|
|
953
|
+
}), y.length && f.push(...y));
|
|
954
|
+
}), f;
|
|
955
|
+
};
|
|
956
|
+
return Array.from(new Set(u.map((c) => c.listId))).forEach((c) => {
|
|
957
|
+
a.set(c, n(c, null));
|
|
958
|
+
}), a;
|
|
959
|
+
}
|
|
960
|
+
class ce extends ee {
|
|
961
|
+
constructor() {
|
|
962
|
+
super(), this._lists = Y([]), this._items = [], this._selection = [], this._focusedId = null, this._rangeAnchorId = null, this._dragState = null, this._liveMessage = "Sortable list ready.", this._lastListsAttr = null, this._lastItemsAttr = null, this._lastSelectionAttr = null, this._hydratedPersistKey = null, this._cloneSeed = 1, this._dragImage = null, this._dragPreviewOverlay = null, this._pendingFocusId = null, this._pointerGesture = null, this._pendingDropTarget = null, this._suppressAttributeRender = !1, this._onClick = this._onClick.bind(this), this._onKeyDown = this._onKeyDown.bind(this), this._onDragStart = this._onDragStart.bind(this), this._onDragOver = this._onDragOver.bind(this), this._onDrop = this._onDrop.bind(this), this._onDragEnd = this._onDragEnd.bind(this), this._onPointerDown = this._onPointerDown.bind(this), this._onPointerMove = this._onPointerMove.bind(this), this._onPointerUp = this._onPointerUp.bind(this), this._onPointerCancel = this._onPointerCancel.bind(this), this._onFocusIn = this._onFocusIn.bind(this), this._onDocumentKeyDown = this._onDocumentKeyDown.bind(this);
|
|
963
|
+
}
|
|
964
|
+
static get observedAttributes() {
|
|
965
|
+
return [
|
|
966
|
+
"lists",
|
|
967
|
+
"items",
|
|
968
|
+
"selection",
|
|
969
|
+
"filter-query",
|
|
970
|
+
"sort",
|
|
971
|
+
"persist-key",
|
|
972
|
+
"allow-filtered-drag",
|
|
973
|
+
"allow-nesting",
|
|
974
|
+
"drop-indicator-visibility",
|
|
975
|
+
"dropzone-style",
|
|
976
|
+
"drag-preview-size",
|
|
977
|
+
"drag-handle-mode",
|
|
978
|
+
"drag-handle-selector",
|
|
979
|
+
"custom-item-rendering",
|
|
980
|
+
"show-selection-badge",
|
|
981
|
+
"disabled"
|
|
982
|
+
];
|
|
983
|
+
}
|
|
984
|
+
shouldRenderOnAttributeChange(e, r, t) {
|
|
985
|
+
return this._suppressAttributeRender ? !["lists", "items", "selection"].includes(e) : !0;
|
|
986
|
+
}
|
|
987
|
+
attributeChangedCallback(e, r, t) {
|
|
988
|
+
if (r !== t && this.isConnected) {
|
|
989
|
+
if (e === "selection" && !this._suppressAttributeRender && this._canSyncInteractiveStateInPlace()) {
|
|
990
|
+
this._syncSelectionFromAttribute(t ?? null), this._syncSelectionVisualState();
|
|
991
|
+
return;
|
|
992
|
+
}
|
|
993
|
+
if (e === "show-selection-badge" && this._canSyncInteractiveStateInPlace()) {
|
|
994
|
+
this._syncSelectionVisualState();
|
|
995
|
+
return;
|
|
996
|
+
}
|
|
997
|
+
super.attributeChangedCallback(e, r, t);
|
|
998
|
+
}
|
|
999
|
+
}
|
|
1000
|
+
connectedCallback() {
|
|
1001
|
+
var e, r, t, i;
|
|
1002
|
+
super.connectedCallback(), this.root.addEventListener("click", this._onClick), this.root.addEventListener("keydown", this._onKeyDown), this.root.addEventListener("dragstart", this._onDragStart), this.root.addEventListener("dragover", this._onDragOver), this.root.addEventListener("drop", this._onDrop), this.root.addEventListener("dragend", this._onDragEnd), this.root.addEventListener("pointerdown", this._onPointerDown), this.root.addEventListener("focusin", this._onFocusIn), (e = this.ownerDocument) == null || e.addEventListener("keydown", this._onDocumentKeyDown, !0), (r = this.ownerDocument) == null || r.addEventListener("pointermove", this._onPointerMove, !0), (t = this.ownerDocument) == null || t.addEventListener("pointerup", this._onPointerUp, !0), (i = this.ownerDocument) == null || i.addEventListener("pointercancel", this._onPointerCancel, !0);
|
|
1003
|
+
}
|
|
1004
|
+
disconnectedCallback() {
|
|
1005
|
+
var e, r, t, i;
|
|
1006
|
+
this.root.removeEventListener("click", this._onClick), this.root.removeEventListener("keydown", this._onKeyDown), this.root.removeEventListener("dragstart", this._onDragStart), this.root.removeEventListener("dragover", this._onDragOver), this.root.removeEventListener("drop", this._onDrop), this.root.removeEventListener("dragend", this._onDragEnd), this.root.removeEventListener("pointerdown", this._onPointerDown), this.root.removeEventListener("focusin", this._onFocusIn), (e = this.ownerDocument) == null || e.removeEventListener("keydown", this._onDocumentKeyDown, !0), (r = this.ownerDocument) == null || r.removeEventListener("pointermove", this._onPointerMove, !0), (t = this.ownerDocument) == null || t.removeEventListener("pointerup", this._onPointerUp, !0), (i = this.ownerDocument) == null || i.removeEventListener("pointercancel", this._onPointerCancel, !0), this._removeDragPreviewOverlay(), this._removeDragImage(), super.disconnectedCallback();
|
|
1007
|
+
}
|
|
1008
|
+
get lists() {
|
|
1009
|
+
return this._lists.map((e) => ({ ...e }));
|
|
1010
|
+
}
|
|
1011
|
+
set lists(e) {
|
|
1012
|
+
this.setAttribute("lists", JSON.stringify(e ?? []));
|
|
1013
|
+
}
|
|
1014
|
+
get items() {
|
|
1015
|
+
return this._items.map((e) => ({ ...e }));
|
|
1016
|
+
}
|
|
1017
|
+
set items(e) {
|
|
1018
|
+
this.setAttribute("items", JSON.stringify(e ?? []));
|
|
1019
|
+
}
|
|
1020
|
+
get selection() {
|
|
1021
|
+
return [...this._selection];
|
|
1022
|
+
}
|
|
1023
|
+
set selection(e) {
|
|
1024
|
+
this.setAttribute("selection", JSON.stringify(e ?? []));
|
|
1025
|
+
}
|
|
1026
|
+
get sort() {
|
|
1027
|
+
return this.getAttribute("sort") === "label" ? "label" : "manual";
|
|
1028
|
+
}
|
|
1029
|
+
set sort(e) {
|
|
1030
|
+
!e || e === "manual" ? this.removeAttribute("sort") : this.setAttribute("sort", e);
|
|
1031
|
+
}
|
|
1032
|
+
get filterQuery() {
|
|
1033
|
+
return this.getAttribute("filter-query") || "";
|
|
1034
|
+
}
|
|
1035
|
+
set filterQuery(e) {
|
|
1036
|
+
e ? this.setAttribute("filter-query", e) : this.removeAttribute("filter-query");
|
|
1037
|
+
}
|
|
1038
|
+
select(e) {
|
|
1039
|
+
this._setSelection(e, "api");
|
|
1040
|
+
}
|
|
1041
|
+
clearSelection() {
|
|
1042
|
+
this._setSelection([], "api");
|
|
1043
|
+
}
|
|
1044
|
+
cancelDrag() {
|
|
1045
|
+
this._cancelDrag(!0);
|
|
1046
|
+
}
|
|
1047
|
+
focusItem(e) {
|
|
1048
|
+
this._items.some((r) => r.id === e) && (this._focusedId = e, this._pendingFocusId = e, !this._applyInteractiveStateInPlace({ restoreFocus: !0 }) && this.requestRender());
|
|
1049
|
+
}
|
|
1050
|
+
moveSelection(e) {
|
|
1051
|
+
const r = this._selectedRootIds();
|
|
1052
|
+
r.length && this._commitMove({
|
|
1053
|
+
listId: e.targetListId,
|
|
1054
|
+
parentId: e.parentId ?? null,
|
|
1055
|
+
beforeId: e.beforeId ?? null,
|
|
1056
|
+
mode: e.mode ?? (e.parentId ? "inside" : "before")
|
|
1057
|
+
}, r, !!e.clone, e.source ?? "api");
|
|
1058
|
+
}
|
|
1059
|
+
getPersistenceSnapshot() {
|
|
1060
|
+
return J(this._items);
|
|
1061
|
+
}
|
|
1062
|
+
render() {
|
|
1063
|
+
var _, R;
|
|
1064
|
+
this._syncStateFromAttributes();
|
|
1065
|
+
const e = this._measureItemShellRects(), r = new Set(this._draggingIds()), t = new Set(this._selection), s = !!((_ = this._dragState) != null && _.keyboard) ? this._projectedMoveResult() : null, o = (s == null ? void 0 : s.items) || this._items, a = new Set((s == null ? void 0 : s.insertedRootIds) || []), l = !!this._dragState && !this._dragState.keyboard && !!this._dragState.dropTarget, n = Q(o, t, r, this.filterQuery, this.sort), d = this._resolvedFocusedId(n), c = this._isDragLocked(), g = this._selection.length, b = this.getAttribute("allow-nesting") !== "false", f = this.getAttribute("drop-indicator-visibility") === "always" ? "always" : "active", v = this._dropzoneStyle(), m = this.getAttribute("show-selection-badge") !== "false", y = this._dragHandleMode(), w = this._usesCustomHandleSelector(), k = c ? this.sort === "label" ? "Dragging is paused while alphabetical sorting is active." : this.filterQuery && !this.hasAttribute("allow-filtered-drag") ? "Dragging is paused while the list is filtered." : "Dragging is currently disabled." : (R = this._dragState) != null && R.keyboard ? "Keyboard drag active. Use arrow keys to choose a drop target, Space or Enter to drop, and Escape to cancel." : y === "item" ? "Drag from anywhere on an item, or press Space on a focused item to start keyboard reordering." : w ? "Use your custom drag handle element, or press Space on a focused item to start keyboard reordering." : "Use the handle to drag, or press Space on a focused item to start keyboard reordering.", A = `
|
|
1066
|
+
<style>${se}</style>
|
|
1067
|
+
<div
|
|
1068
|
+
class="root"
|
|
1069
|
+
part="root"
|
|
1070
|
+
data-drag-locked="${c}"
|
|
1071
|
+
data-drag-preview="${a.size || l ? "true" : "false"}"
|
|
1072
|
+
data-drop-indicator-visibility="${f}"
|
|
1073
|
+
data-dropzone-style="${v}"
|
|
1074
|
+
>
|
|
1075
|
+
<div class="toolbar" part="toolbar">
|
|
1076
|
+
<div class="helper">${I(k)}</div>
|
|
1077
|
+
<div class="helper selection-summary">
|
|
1078
|
+
<span class="selection-pill" part="selection-count">${g}</span>
|
|
1079
|
+
<span class="selection-text">${g === 1 ? "item selected" : "items selected"}</span>
|
|
1080
|
+
</div>
|
|
1081
|
+
</div>
|
|
1082
|
+
<div class="lists" part="lists">
|
|
1083
|
+
${this._lists.map((S) => {
|
|
1084
|
+
var L;
|
|
1085
|
+
const C = n.get(S.id) || [], T = C.length ? this._renderListTree(o, S, d, r, b, a, m) : "", $ = S.disabled ? "This list is read-only." : S.cloneOnDrag ? "Dragging from this list creates a copy." : (L = S.accepts) != null && L.length ? `Accepts drops from: ${S.accepts.join(", ")}` : "";
|
|
1086
|
+
return `
|
|
1087
|
+
<section
|
|
1088
|
+
class="list"
|
|
1089
|
+
part="list"
|
|
1090
|
+
data-list-id="${I(S.id)}"
|
|
1091
|
+
data-orientation="${S.orientation}"
|
|
1092
|
+
data-disabled="${S.disabled}"
|
|
1093
|
+
aria-label="${I(S.label)}"
|
|
1094
|
+
>
|
|
1095
|
+
<header class="list-header">
|
|
1096
|
+
<div class="list-custom-header" part="list-custom-header" data-list-header-target="${I(S.id)}"></div>
|
|
1097
|
+
<div class="list-default-header">
|
|
1098
|
+
<div class="list-topline">
|
|
1099
|
+
<div class="list-label">${I(S.label)}</div>
|
|
1100
|
+
<span class="list-count">${C.length}</span>
|
|
1101
|
+
</div>
|
|
1102
|
+
${S.description ? `<div class="list-description">${I(S.description)}</div>` : ""}
|
|
1103
|
+
${$ ? `<div class="list-helper">${I($)}</div>` : ""}
|
|
1104
|
+
</div>
|
|
1105
|
+
</header>
|
|
1106
|
+
<div class="items" role="listbox" aria-multiselectable="true">
|
|
1107
|
+
${T || `<div class="list-custom-empty" part="list-custom-empty" data-list-empty-target="${I(S.id)}"></div><div class="empty">${I(S.emptyLabel)}</div>${this._renderDropzone({
|
|
1108
|
+
listId: S.id,
|
|
1109
|
+
parentId: null,
|
|
1110
|
+
beforeId: null,
|
|
1111
|
+
mode: "before"
|
|
1112
|
+
}, "Drop here")}`}
|
|
1113
|
+
</div>
|
|
1114
|
+
</section>
|
|
1115
|
+
`;
|
|
1116
|
+
}).join("")}
|
|
1117
|
+
</div>
|
|
1118
|
+
<div class="sr-only" aria-live="polite" aria-atomic="true">${I(this._liveMessage)}</div>
|
|
1119
|
+
</div>
|
|
1120
|
+
`;
|
|
1121
|
+
this.setContent(A), queueMicrotask(() => {
|
|
1122
|
+
this._restorePendingFocus(), this._applyCurrentDropTargetVisualState(), this._applyLiveMessage(), this._updatePointerDragPreview(), this._animateItemShellReflow(e);
|
|
1123
|
+
});
|
|
1124
|
+
}
|
|
1125
|
+
_syncStateFromAttributes() {
|
|
1126
|
+
var i;
|
|
1127
|
+
const e = this.getAttribute("lists");
|
|
1128
|
+
e !== this._lastListsAttr && (this._lastListsAttr = e, this._lists = Y(V(e)));
|
|
1129
|
+
const r = this.getAttribute("items");
|
|
1130
|
+
if (r !== this._lastItemsAttr) {
|
|
1131
|
+
this._lastItemsAttr = r, this._items = U(this._lists, V(r));
|
|
1132
|
+
const s = this.getAttribute("persist-key");
|
|
1133
|
+
s && this._hydratedPersistKey !== s && (this._items = this._restorePersistedItems(s, this._items), this._hydratedPersistKey = s);
|
|
1134
|
+
}
|
|
1135
|
+
const t = this.getAttribute("selection");
|
|
1136
|
+
t !== this._lastSelectionAttr && this._syncSelectionFromAttribute(t), this._focusedId || (this._focusedId = ((i = this._items.find((s) => !s.hidden)) == null ? void 0 : i.id) || null);
|
|
1137
|
+
}
|
|
1138
|
+
_restorePersistedItems(e, r) {
|
|
1139
|
+
try {
|
|
1140
|
+
const t = window.localStorage.getItem(e);
|
|
1141
|
+
if (!t)
|
|
1142
|
+
return r;
|
|
1143
|
+
const i = JSON.parse(t);
|
|
1144
|
+
if (!i || typeof i != "object" || !Array.isArray(i.records))
|
|
1145
|
+
return r;
|
|
1146
|
+
const s = new Map(i.records.map((a) => [a.id, a])), o = r.map((a, l) => {
|
|
1147
|
+
const n = s.get(a.id);
|
|
1148
|
+
return n ? {
|
|
1149
|
+
...a,
|
|
1150
|
+
listId: this._lists.some((d) => d.id === n.listId) ? n.listId : a.listId,
|
|
1151
|
+
parentId: typeof n.parentId == "string" ? n.parentId : null,
|
|
1152
|
+
order: Number.isFinite(n.index) ? n.index : l
|
|
1153
|
+
} : { ...a, order: l };
|
|
1154
|
+
});
|
|
1155
|
+
return U(this._lists, o);
|
|
1156
|
+
} catch {
|
|
1157
|
+
return r;
|
|
1158
|
+
}
|
|
1159
|
+
}
|
|
1160
|
+
_resolvedFocusedId(e) {
|
|
1161
|
+
const r = new Set(Array.from(e.values()).flat().map((i) => i.id));
|
|
1162
|
+
if (this._focusedId && r.has(this._focusedId))
|
|
1163
|
+
return this._focusedId;
|
|
1164
|
+
const t = Array.from(e.values()).flat().find((i) => !i.disabled);
|
|
1165
|
+
return (t == null ? void 0 : t.id) || null;
|
|
1166
|
+
}
|
|
1167
|
+
_restorePendingFocus() {
|
|
1168
|
+
const e = this._pendingFocusId || this._focusedId;
|
|
1169
|
+
if (!e)
|
|
1170
|
+
return;
|
|
1171
|
+
const r = typeof CSS < "u" && typeof CSS.escape == "function" ? CSS.escape(e) : e.replace(/"/g, '\\"'), t = this.root.querySelector(`.item[data-id="${r}"]`);
|
|
1172
|
+
t && (document.activeElement !== t && t.focus({ preventScroll: !0 }), this._pendingFocusId = null);
|
|
1173
|
+
}
|
|
1174
|
+
_escapeSelectorValue(e) {
|
|
1175
|
+
return typeof CSS < "u" && typeof CSS.escape == "function" ? CSS.escape(e) : e.replace(/"/g, '\\"');
|
|
1176
|
+
}
|
|
1177
|
+
_findDropzone(e) {
|
|
1178
|
+
const r = this._escapeSelectorValue(e.listId), t = this._escapeSelectorValue(e.parentId ?? ""), i = this._escapeSelectorValue(e.beforeId ?? ""), s = this._escapeSelectorValue(e.mode);
|
|
1179
|
+
return this.root.querySelector(
|
|
1180
|
+
`.dropzone[data-list-id="${r}"][data-parent-id="${t}"][data-before-id="${i}"][data-mode="${s}"]`
|
|
1181
|
+
);
|
|
1182
|
+
}
|
|
1183
|
+
_findItemElement(e) {
|
|
1184
|
+
const r = this._escapeSelectorValue(e);
|
|
1185
|
+
return this.root.querySelector(`.item[data-id="${r}"]`);
|
|
1186
|
+
}
|
|
1187
|
+
_dragHandleMode() {
|
|
1188
|
+
return oe(this.getAttribute("drag-handle-mode"));
|
|
1189
|
+
}
|
|
1190
|
+
_dropzoneStyle() {
|
|
1191
|
+
return this.getAttribute("dropzone-style") === "container" ? "container" : "indicator";
|
|
1192
|
+
}
|
|
1193
|
+
_usesCustomHandleSelector() {
|
|
1194
|
+
var e;
|
|
1195
|
+
return !!((e = this.getAttribute("drag-handle-selector")) != null && e.trim());
|
|
1196
|
+
}
|
|
1197
|
+
_dragActivatorFromPath(e) {
|
|
1198
|
+
var o;
|
|
1199
|
+
const r = e.find((a) => a instanceof HTMLElement && !!a.getAttribute("data-drag-trigger"));
|
|
1200
|
+
if (!r)
|
|
1201
|
+
return null;
|
|
1202
|
+
const t = r.getAttribute("data-drag-trigger"), i = t === "item" ? "item" : t === "custom" ? "custom" : "handle", s = r.getAttribute("data-id") || ((o = r.closest(".item[data-id]")) == null ? void 0 : o.getAttribute("data-id"));
|
|
1203
|
+
return s ? { element: r, id: s, kind: i } : null;
|
|
1204
|
+
}
|
|
1205
|
+
_setDropTargetVisualState(e, r) {
|
|
1206
|
+
var i;
|
|
1207
|
+
if (!e)
|
|
1208
|
+
return;
|
|
1209
|
+
const t = this._findDropzone(e);
|
|
1210
|
+
t && (t.setAttribute("data-active", r ? "true" : "false"), r ? this._syncDropzoneContainerSize(t, e) : this._clearDropzoneContainerSize(t)), e.mode === "inside" && e.parentId && ((i = this._findItemElement(e.parentId)) == null || i.setAttribute("data-drop-inside-active", r ? "true" : "false"));
|
|
1211
|
+
}
|
|
1212
|
+
_applyCurrentDropTargetVisualState(e) {
|
|
1213
|
+
var r;
|
|
1214
|
+
this._setDropTargetVisualState(e ?? null, !1), this._setDropTargetVisualState(((r = this._dragState) == null ? void 0 : r.dropTarget) ?? null, !0);
|
|
1215
|
+
}
|
|
1216
|
+
_applyLiveMessage() {
|
|
1217
|
+
const e = this.root.querySelector(".sr-only[aria-live]");
|
|
1218
|
+
e && (e.textContent = this._liveMessage);
|
|
1219
|
+
}
|
|
1220
|
+
_canSyncInteractiveStateInPlace() {
|
|
1221
|
+
return !!this.root.querySelector(".root") && !this._dragState;
|
|
1222
|
+
}
|
|
1223
|
+
_applyInteractiveStateInPlace(e) {
|
|
1224
|
+
return this._canSyncInteractiveStateInPlace() ? (this._syncSelectionVisualState(), e != null && e.restoreFocus && this._restorePendingFocus(), this._applyLiveMessage(), !0) : !1;
|
|
1225
|
+
}
|
|
1226
|
+
_hasCustomItemRendering() {
|
|
1227
|
+
return this.hasAttribute("custom-item-rendering");
|
|
1228
|
+
}
|
|
1229
|
+
_syncSelectionFromAttribute(e) {
|
|
1230
|
+
this._lastSelectionAttr = e;
|
|
1231
|
+
const r = new Set(this._items.map((t) => t.id));
|
|
1232
|
+
this._selection = V(e).filter((t) => r.has(t)), !this._selection.length && this._focusedId && !r.has(this._focusedId) && (this._focusedId = null);
|
|
1233
|
+
}
|
|
1234
|
+
_syncSelectionVisualState() {
|
|
1235
|
+
const e = new Set(this._selection), r = this.getAttribute("show-selection-badge") !== "false";
|
|
1236
|
+
this.root.querySelectorAll(".item[data-id]").forEach((s) => {
|
|
1237
|
+
const o = s.getAttribute("data-id");
|
|
1238
|
+
if (!o)
|
|
1239
|
+
return;
|
|
1240
|
+
const a = e.has(o), l = this._focusedId === o;
|
|
1241
|
+
s.setAttribute("data-selected", a ? "true" : "false"), s.setAttribute("aria-selected", a ? "true" : "false"), s.setAttribute("data-focused", l ? "true" : "false"), s.setAttribute("tabindex", l ? "0" : "-1");
|
|
1242
|
+
const n = s.querySelector('[data-selection-badge="true"]');
|
|
1243
|
+
if (n) {
|
|
1244
|
+
const d = a && r;
|
|
1245
|
+
n.hidden = !d, n.textContent = d ? "Selected" : "";
|
|
1246
|
+
}
|
|
1247
|
+
});
|
|
1248
|
+
const t = this.root.querySelector(".selection-pill");
|
|
1249
|
+
t && (t.textContent = String(this._selection.length));
|
|
1250
|
+
const i = this.root.querySelector(".selection-text");
|
|
1251
|
+
i && (i.textContent = this._selection.length === 1 ? "item selected" : "items selected");
|
|
1252
|
+
}
|
|
1253
|
+
_clearDropzoneContainerSize(e) {
|
|
1254
|
+
e.style.removeProperty("--ui-sortable-dropzone-match-block-size"), e.style.removeProperty("--ui-sortable-dropzone-match-inline-size");
|
|
1255
|
+
}
|
|
1256
|
+
_dropzoneReferenceElement(e, r) {
|
|
1257
|
+
if (e.mode === "inside" && e.parentId)
|
|
1258
|
+
return this._findItemElement(e.parentId);
|
|
1259
|
+
let t = r.nextElementSibling;
|
|
1260
|
+
for (; t; ) {
|
|
1261
|
+
if (t instanceof HTMLElement && t.classList.contains("item-shell"))
|
|
1262
|
+
return t.querySelector(".item[data-id]");
|
|
1263
|
+
t = t.nextElementSibling;
|
|
1264
|
+
}
|
|
1265
|
+
let i = r.previousElementSibling;
|
|
1266
|
+
for (; i; ) {
|
|
1267
|
+
if (i instanceof HTMLElement && i.classList.contains("item-shell"))
|
|
1268
|
+
return i.querySelector(".item[data-id]");
|
|
1269
|
+
i = i.previousElementSibling;
|
|
1270
|
+
}
|
|
1271
|
+
const s = this._escapeSelectorValue(e.listId), o = this.root.querySelector(`.list[data-list-id="${s}"] .items`), a = o == null ? void 0 : o.querySelector(".item[data-id]");
|
|
1272
|
+
return a || o || null;
|
|
1273
|
+
}
|
|
1274
|
+
_syncDropzoneContainerSize(e, r) {
|
|
1275
|
+
if (this._clearDropzoneContainerSize(e), this._dropzoneStyle() !== "container")
|
|
1276
|
+
return;
|
|
1277
|
+
const t = this._dropzoneReferenceElement(r, e);
|
|
1278
|
+
if (!t)
|
|
1279
|
+
return;
|
|
1280
|
+
const i = t.getBoundingClientRect();
|
|
1281
|
+
e.style.setProperty("--ui-sortable-dropzone-match-block-size", `${Math.max(76, Math.round(i.height))}px`), e.style.setProperty("--ui-sortable-dropzone-match-inline-size", `${Math.max(180, Math.round(i.width))}px`);
|
|
1282
|
+
}
|
|
1283
|
+
_ensureDragPreviewOverlay() {
|
|
1284
|
+
if (this._dragPreviewOverlay && this._dragPreviewOverlay.isConnected)
|
|
1285
|
+
return this._dragPreviewOverlay;
|
|
1286
|
+
const e = document.createElement("div");
|
|
1287
|
+
return e.className = "drag-preview-overlay", e.setAttribute("data-visible", "false"), this.root.appendChild(e), this._dragPreviewOverlay = e, e;
|
|
1288
|
+
}
|
|
1289
|
+
_clearPointerDragPreview() {
|
|
1290
|
+
var r, t, i, s;
|
|
1291
|
+
(r = this._dragPreviewOverlay) == null || r.setAttribute("data-visible", "false"), (t = this._dragPreviewOverlay) == null || t.style.setProperty("left", "-9999px"), (i = this._dragPreviewOverlay) == null || i.style.setProperty("top", "-9999px");
|
|
1292
|
+
const e = this.root.querySelector(".root");
|
|
1293
|
+
e && !((s = this._dragState) != null && s.keyboard) && e.setAttribute("data-drag-preview", "false");
|
|
1294
|
+
}
|
|
1295
|
+
_pointerPreviewContent() {
|
|
1296
|
+
if (!this._dragState || this._dragState.keyboard)
|
|
1297
|
+
return null;
|
|
1298
|
+
const e = this._dragState.movedRootIds[0], r = this._items.find((t) => t.id === e);
|
|
1299
|
+
return r ? {
|
|
1300
|
+
kicker: this._dragState.clone ? "Copy preview" : "Drop preview",
|
|
1301
|
+
title: this._dragState.clone ? `${r.label} copy` : r.label,
|
|
1302
|
+
description: this._dragState.clone ? "Release to add a copy here." : this._dragState.movedRootIds.length > 1 ? "Release to place this selection here." : "Release to place this item here."
|
|
1303
|
+
} : null;
|
|
1304
|
+
}
|
|
1305
|
+
_pointerPreviewSize() {
|
|
1306
|
+
if (this.getAttribute("drag-preview-size") === "compact" || !this._dragState || this._dragState.keyboard)
|
|
1307
|
+
return null;
|
|
1308
|
+
const e = this._dragState.movedRootIds[0], r = e ? this._findItemElement(e) : null;
|
|
1309
|
+
if (!r)
|
|
1310
|
+
return null;
|
|
1311
|
+
const t = window.getComputedStyle(r), i = ne(t.transform);
|
|
1312
|
+
return {
|
|
1313
|
+
width: r.offsetWidth * i.x,
|
|
1314
|
+
height: r.offsetHeight * i.y
|
|
1315
|
+
};
|
|
1316
|
+
}
|
|
1317
|
+
_updatePointerDragPreview() {
|
|
1318
|
+
if (!this._dragState || this._dragState.keyboard) {
|
|
1319
|
+
this._clearPointerDragPreview();
|
|
1320
|
+
return;
|
|
1321
|
+
}
|
|
1322
|
+
const e = this._pointerPreviewContent();
|
|
1323
|
+
if (!e) {
|
|
1324
|
+
this._clearPointerDragPreview();
|
|
1325
|
+
return;
|
|
1326
|
+
}
|
|
1327
|
+
const r = this.root.querySelector(".root"), t = this._dragPreviewOverlay, i = (t == null ? void 0 : t.getAttribute("data-visible")) === "true", s = this._pointerPreviewSize();
|
|
1328
|
+
if (!this._dragState.dropTarget) {
|
|
1329
|
+
i && r && r.setAttribute("data-drag-preview", "true");
|
|
1330
|
+
return;
|
|
1331
|
+
}
|
|
1332
|
+
const o = this._findDropzone(this._dragState.dropTarget);
|
|
1333
|
+
if (!o) {
|
|
1334
|
+
i && r && r.setAttribute("data-drag-preview", "true");
|
|
1335
|
+
return;
|
|
1336
|
+
}
|
|
1337
|
+
const a = this._ensureDragPreviewOverlay();
|
|
1338
|
+
a.innerHTML = `
|
|
1339
|
+
<div class="placeholder-content">
|
|
1340
|
+
<div class="placeholder-kicker">${I(e.kicker)}</div>
|
|
1341
|
+
<div class="placeholder-title">${I(e.title)}</div>
|
|
1342
|
+
<div class="placeholder-description">${I(e.description)}</div>
|
|
1343
|
+
</div>
|
|
1344
|
+
`;
|
|
1345
|
+
const l = o.getBoundingClientRect();
|
|
1346
|
+
r && r.setAttribute("data-drag-preview", "true"), a.style.setProperty("left", "-9999px"), a.style.setProperty("top", "-9999px"), s ? (a.style.setProperty("inline-size", `${s.width}px`), a.style.setProperty("block-size", `${s.height}px`)) : (a.style.removeProperty("inline-size"), a.style.removeProperty("block-size")), a.setAttribute("data-visible", "true");
|
|
1347
|
+
const n = a.getBoundingClientRect(), d = (s == null ? void 0 : s.width) ?? n.width, c = (s == null ? void 0 : s.height) ?? n.height, g = Math.max(16, Math.min(l.left, window.innerWidth - d - 16)), b = Math.max(
|
|
1348
|
+
16,
|
|
1349
|
+
Math.min(
|
|
1350
|
+
l.top + (l.height - c) / 2,
|
|
1351
|
+
window.innerHeight - c - 16
|
|
1352
|
+
)
|
|
1353
|
+
);
|
|
1354
|
+
a.style.setProperty("left", `${Math.round(g)}px`), a.style.setProperty("top", `${Math.round(b)}px`);
|
|
1355
|
+
}
|
|
1356
|
+
_setDraggingVisualState(e, r) {
|
|
1357
|
+
e.forEach((t) => {
|
|
1358
|
+
const i = this._findItemElement(t);
|
|
1359
|
+
i && (i.setAttribute("data-dragging", r ? "true" : "false"), i.setAttribute("aria-grabbed", r ? "true" : "false"), r && i.getBoundingClientRect());
|
|
1360
|
+
});
|
|
1361
|
+
}
|
|
1362
|
+
_setDropTarget(e, r) {
|
|
1363
|
+
var i;
|
|
1364
|
+
const t = ((i = this._dragState) == null ? void 0 : i.dropTarget) ?? null;
|
|
1365
|
+
if (!(!this._dragState || B(t, e))) {
|
|
1366
|
+
if (this._pendingDropTarget = null, this._dragState.dropTarget = e, this._applyCurrentDropTargetVisualState(t), r != null && r.announceLabel && this._announce(r.announceLabel), this._dragState.keyboard) {
|
|
1367
|
+
this.requestRender();
|
|
1368
|
+
return;
|
|
1369
|
+
}
|
|
1370
|
+
this._updatePointerDragPreview();
|
|
1371
|
+
}
|
|
1372
|
+
}
|
|
1373
|
+
_queueDropTarget(e, r, t) {
|
|
1374
|
+
if (!this._dragState)
|
|
1375
|
+
return;
|
|
1376
|
+
const i = this._dragState.dropTarget ?? null;
|
|
1377
|
+
if (B(i, e)) {
|
|
1378
|
+
this._pendingDropTarget = null;
|
|
1379
|
+
return;
|
|
1380
|
+
}
|
|
1381
|
+
if (!i && e) {
|
|
1382
|
+
this._setDropTarget(e, t);
|
|
1383
|
+
return;
|
|
1384
|
+
}
|
|
1385
|
+
const s = typeof r == "number" && Number.isFinite(r) ? r : performance.now(), o = this._pendingDropTarget;
|
|
1386
|
+
if (o && B(o.target, e)) {
|
|
1387
|
+
const a = e ? re : ie;
|
|
1388
|
+
s - o.startedAt >= a && this._setDropTarget(e, o.announceLabel ? { announceLabel: o.announceLabel } : t);
|
|
1389
|
+
return;
|
|
1390
|
+
}
|
|
1391
|
+
this._pendingDropTarget = {
|
|
1392
|
+
target: e,
|
|
1393
|
+
startedAt: s,
|
|
1394
|
+
announceLabel: t == null ? void 0 : t.announceLabel
|
|
1395
|
+
};
|
|
1396
|
+
}
|
|
1397
|
+
_releaseDropTarget(e, r) {
|
|
1398
|
+
var s;
|
|
1399
|
+
if (!this._dragState)
|
|
1400
|
+
return null;
|
|
1401
|
+
if (Number.isFinite(e) && Number.isFinite(r)) {
|
|
1402
|
+
const o = this._dropTargetFromPoint(e, r);
|
|
1403
|
+
if (o && this._canDrop(o, this._dragState.movedRootIds))
|
|
1404
|
+
return this._pendingDropTarget = null, o;
|
|
1405
|
+
}
|
|
1406
|
+
const t = ((s = this._pendingDropTarget) == null ? void 0 : s.target) ?? null;
|
|
1407
|
+
if (this._pendingDropTarget = null, t && this._canDrop(t, this._dragState.movedRootIds))
|
|
1408
|
+
return t;
|
|
1409
|
+
const i = this._dragState.dropTarget ?? null;
|
|
1410
|
+
return i && this._canDrop(i, this._dragState.movedRootIds) ? i : null;
|
|
1411
|
+
}
|
|
1412
|
+
_pathFromPoint(e, r) {
|
|
1413
|
+
var o, a;
|
|
1414
|
+
const t = [], i = this.root;
|
|
1415
|
+
let s = typeof i.elementFromPoint == "function" ? i.elementFromPoint(e, r) : ((o = this.ownerDocument) == null ? void 0 : o.elementFromPoint(e, r)) ?? null;
|
|
1416
|
+
for (; s && (s instanceof HTMLElement && t.push(s), s !== this); ) {
|
|
1417
|
+
if (s instanceof ShadowRoot) {
|
|
1418
|
+
s = s.host;
|
|
1419
|
+
continue;
|
|
1420
|
+
}
|
|
1421
|
+
s = s.parentNode, !s && ((a = t[t.length - 1]) == null ? void 0 : a.getRootNode()) instanceof ShadowRoot && (s = t[t.length - 1].getRootNode().host);
|
|
1422
|
+
}
|
|
1423
|
+
return t;
|
|
1424
|
+
}
|
|
1425
|
+
_measureItemShellRects() {
|
|
1426
|
+
const e = /* @__PURE__ */ new Map();
|
|
1427
|
+
return this.root.querySelectorAll(".item-shell[data-item-shell]").forEach((r) => {
|
|
1428
|
+
const t = r.getAttribute("data-item-shell");
|
|
1429
|
+
if (!t)
|
|
1430
|
+
return;
|
|
1431
|
+
const i = r.getBoundingClientRect();
|
|
1432
|
+
e.set(t, { top: i.top, left: i.left });
|
|
1433
|
+
}), e;
|
|
1434
|
+
}
|
|
1435
|
+
_animateItemShellReflow(e) {
|
|
1436
|
+
if (!e.size)
|
|
1437
|
+
return;
|
|
1438
|
+
const r = new Set(this._draggingIds());
|
|
1439
|
+
this.root.querySelectorAll(".item-shell[data-item-shell]").forEach((t) => {
|
|
1440
|
+
const i = t.getAttribute("data-item-shell");
|
|
1441
|
+
if (!i || r.has(i))
|
|
1442
|
+
return;
|
|
1443
|
+
const s = e.get(i);
|
|
1444
|
+
if (!s)
|
|
1445
|
+
return;
|
|
1446
|
+
const o = t.getBoundingClientRect(), a = s.left - o.left, l = s.top - o.top;
|
|
1447
|
+
Math.abs(a) < 0.5 && Math.abs(l) < 0.5 || (t.style.transition = "none", t.style.transform = `translate(${a}px, ${l}px)`, t.style.willChange = "transform", t.getBoundingClientRect(), requestAnimationFrame(() => {
|
|
1448
|
+
t.style.transition = "transform 180ms ease", t.style.transform = "";
|
|
1449
|
+
const n = () => {
|
|
1450
|
+
t.style.transition = "", t.style.willChange = "", t.removeEventListener("transitionend", n);
|
|
1451
|
+
};
|
|
1452
|
+
t.addEventListener("transitionend", n), window.setTimeout(n, 220);
|
|
1453
|
+
}));
|
|
1454
|
+
});
|
|
1455
|
+
}
|
|
1456
|
+
_previewCloneSubtreeItem(e, r) {
|
|
1457
|
+
const t = e.id.includes("--copy-") ? e.id.split("--copy-")[0] : e.id;
|
|
1458
|
+
return {
|
|
1459
|
+
...e,
|
|
1460
|
+
id: `${t}--preview`,
|
|
1461
|
+
label: r[0] === e.id ? `${e.label} copy` : e.label
|
|
1462
|
+
};
|
|
1463
|
+
}
|
|
1464
|
+
_projectedMoveResult() {
|
|
1465
|
+
var e;
|
|
1466
|
+
return !((e = this._dragState) != null && e.dropTarget) || !this._canDrop(this._dragState.dropTarget, this._dragState.movedRootIds) ? null : ae(
|
|
1467
|
+
this._items,
|
|
1468
|
+
this._lists,
|
|
1469
|
+
this._dragState.dropTarget,
|
|
1470
|
+
this._dragState.movedRootIds,
|
|
1471
|
+
this._dragState.clone,
|
|
1472
|
+
(r, t) => this._previewCloneSubtreeItem(r, t)
|
|
1473
|
+
);
|
|
1474
|
+
}
|
|
1475
|
+
_renderListTree(e, r, t, i, s, o, a) {
|
|
1476
|
+
const l = M(e), n = E(e), d = (c) => {
|
|
1477
|
+
const g = n.get(z(r.id, c)) || [], b = this.sort === "label" ? [...g].sort((v, m) => {
|
|
1478
|
+
const y = l.get(v), w = l.get(m);
|
|
1479
|
+
return !y || !w ? 0 : y.label.localeCompare(w.label);
|
|
1480
|
+
}) : g;
|
|
1481
|
+
let f = "";
|
|
1482
|
+
return b.forEach((v) => {
|
|
1483
|
+
const m = l.get(v);
|
|
1484
|
+
if (!m || m.hidden)
|
|
1485
|
+
return;
|
|
1486
|
+
const y = this._renderChildBranch(
|
|
1487
|
+
m,
|
|
1488
|
+
t,
|
|
1489
|
+
i,
|
|
1490
|
+
d,
|
|
1491
|
+
s,
|
|
1492
|
+
o,
|
|
1493
|
+
a
|
|
1494
|
+
);
|
|
1495
|
+
!W(m, this.filterQuery) && !y.includes('class="item"') || (f += this._renderDropzone({
|
|
1496
|
+
listId: r.id,
|
|
1497
|
+
parentId: c,
|
|
1498
|
+
beforeId: v,
|
|
1499
|
+
mode: "before"
|
|
1500
|
+
}, "Drop here"), f += y);
|
|
1501
|
+
}), f += this._renderDropzone({
|
|
1502
|
+
listId: r.id,
|
|
1503
|
+
parentId: c,
|
|
1504
|
+
beforeId: null,
|
|
1505
|
+
mode: "before"
|
|
1506
|
+
}, "Drop here"), f;
|
|
1507
|
+
};
|
|
1508
|
+
return `<div class="tree">${d(null)}</div>`;
|
|
1509
|
+
}
|
|
1510
|
+
_renderChildBranch(e, r, t, i, s, o, a) {
|
|
1511
|
+
var S, C, T, $;
|
|
1512
|
+
const l = I(e.id), n = o.has(e.id), d = n ? "" : i(e.id), c = d.includes('class="item"'), g = n ? !1 : this._selection.includes(e.id), b = n ? !1 : t.has(e.id), f = e.disabled, v = f || e.dragDisabled || this._isDragLocked(), m = ((C = (S = this._dragState) == null ? void 0 : S.dropTarget) == null ? void 0 : C.mode) === "inside" && this._dragState.dropTarget.parentId === e.id, y = (T = this._dragState) != null && T.clone ? "Copy preview" : "Drop preview", w = ($ = this._dragState) != null && $.clone ? "Release to add a copy here." : this._dragState && this._dragState.movedRootIds.length > 1 ? "Release to place this selection here." : "Release to place this item here.", k = this._dragHandleMode(), A = this._usesCustomHandleSelector(), _ = A ? "custom" : k, R = !A && k === "handle";
|
|
1513
|
+
return `
|
|
1514
|
+
<div class="item-shell" data-item-shell="${l}">
|
|
1515
|
+
<article
|
|
1516
|
+
class="item${n ? " item-placeholder" : ""}"
|
|
1517
|
+
part="item"
|
|
1518
|
+
data-id="${l}"
|
|
1519
|
+
data-drag-handle-mode="${_}"
|
|
1520
|
+
${!n && _ === "item" ? 'data-drag-trigger="item"' : ""}
|
|
1521
|
+
data-selected="${g}"
|
|
1522
|
+
data-focused="${n ? "false" : r === e.id}"
|
|
1523
|
+
data-dragging="${b}"
|
|
1524
|
+
data-disabled="${f}"
|
|
1525
|
+
data-drop-inside-active="${m ? "true" : "false"}"
|
|
1526
|
+
role="${n ? "presentation" : "option"}"
|
|
1527
|
+
aria-selected="${n ? "false" : g}"
|
|
1528
|
+
aria-disabled="${f}"
|
|
1529
|
+
aria-grabbed="${n ? "false" : b}"
|
|
1530
|
+
aria-hidden="${n ? "true" : "false"}"
|
|
1531
|
+
tabindex="${n ? "-1" : r === e.id ? "0" : "-1"}"
|
|
1532
|
+
>
|
|
1533
|
+
${n ? `
|
|
1534
|
+
<div class="placeholder-content">
|
|
1535
|
+
<div class="placeholder-kicker">${I(y)}</div>
|
|
1536
|
+
<div class="placeholder-title">${I(e.label)}</div>
|
|
1537
|
+
<div class="placeholder-description">${I(w)}</div>
|
|
1538
|
+
</div>
|
|
1539
|
+
` : `
|
|
1540
|
+
${R ? `
|
|
1541
|
+
<button
|
|
1542
|
+
class="handle"
|
|
1543
|
+
part="handle"
|
|
1544
|
+
type="button"
|
|
1545
|
+
data-action="handle"
|
|
1546
|
+
data-drag-trigger="handle"
|
|
1547
|
+
data-id="${l}"
|
|
1548
|
+
draggable="false"
|
|
1549
|
+
${v ? "disabled" : ""}
|
|
1550
|
+
aria-label="Drag ${I(e.label)}"
|
|
1551
|
+
>
|
|
1552
|
+
<svg viewBox="0 0 16 16" aria-hidden="true" focusable="false">
|
|
1553
|
+
<circle cx="5" cy="4" r="1.25"></circle>
|
|
1554
|
+
<circle cx="11" cy="4" r="1.25"></circle>
|
|
1555
|
+
<circle cx="5" cy="8" r="1.25"></circle>
|
|
1556
|
+
<circle cx="11" cy="8" r="1.25"></circle>
|
|
1557
|
+
<circle cx="5" cy="12" r="1.25"></circle>
|
|
1558
|
+
<circle cx="11" cy="12" r="1.25"></circle>
|
|
1559
|
+
</svg>
|
|
1560
|
+
</button>
|
|
1561
|
+
` : ""}
|
|
1562
|
+
<div class="item-content" data-action="select" data-id="${l}">
|
|
1563
|
+
<div class="item-custom-content" part="item-custom-content" data-item-content-target="${l}"></div>
|
|
1564
|
+
<div class="item-default-content">
|
|
1565
|
+
<div class="item-title">${I(e.label)}</div>
|
|
1566
|
+
${e.description ? `<div class="item-description">${I(e.description)}</div>` : ""}
|
|
1567
|
+
<div class="item-meta">
|
|
1568
|
+
<span class="item-badge selection-badge" data-selection-badge="true" ${g && a ? "" : "hidden"}>${g && a ? "Selected" : ""}</span>
|
|
1569
|
+
${e.cloneOnDrag ? '<span class="item-badge">Clone on drag</span>' : ""}
|
|
1570
|
+
${e.dragDisabled ? '<span class="item-badge">Pinned</span>' : ""}
|
|
1571
|
+
${s ? '<span class="item-badge drop-badge">Nest here</span>' : ""}
|
|
1572
|
+
</div>
|
|
1573
|
+
</div>
|
|
1574
|
+
</div>
|
|
1575
|
+
`}
|
|
1576
|
+
</article>
|
|
1577
|
+
${s && !n ? this._renderDropzone({
|
|
1578
|
+
listId: e.listId,
|
|
1579
|
+
parentId: e.id,
|
|
1580
|
+
beforeId: null,
|
|
1581
|
+
mode: "inside"
|
|
1582
|
+
}, "Nest here") : ""}
|
|
1583
|
+
${c ? `<div class="children">${d}</div>` : ""}
|
|
1584
|
+
</div>
|
|
1585
|
+
`;
|
|
1586
|
+
}
|
|
1587
|
+
_renderDropzone(e, r) {
|
|
1588
|
+
var i;
|
|
1589
|
+
const t = ((i = this._dragState) == null ? void 0 : i.dropTarget) && this._dragState.dropTarget.listId === e.listId && this._dragState.dropTarget.parentId === e.parentId && this._dragState.dropTarget.beforeId === e.beforeId && this._dragState.dropTarget.mode === e.mode;
|
|
1590
|
+
return `
|
|
1591
|
+
<div
|
|
1592
|
+
class="dropzone"
|
|
1593
|
+
part="dropzone"
|
|
1594
|
+
data-list-id="${I(e.listId)}"
|
|
1595
|
+
data-parent-id="${I(e.parentId ?? "")}"
|
|
1596
|
+
data-before-id="${I(e.beforeId ?? "")}"
|
|
1597
|
+
data-mode="${e.mode}"
|
|
1598
|
+
data-active="${t ? "true" : "false"}"
|
|
1599
|
+
aria-hidden="true"
|
|
1600
|
+
>
|
|
1601
|
+
<span class="dropzone-label">${I(r)}</span>
|
|
1602
|
+
</div>
|
|
1603
|
+
`;
|
|
1604
|
+
}
|
|
1605
|
+
_onClick(e) {
|
|
1606
|
+
const r = e.composedPath(), t = r.find((n) => {
|
|
1607
|
+
var d;
|
|
1608
|
+
return n instanceof HTMLElement && ((d = n.classList) == null ? void 0 : d.contains("toolbar"));
|
|
1609
|
+
}), i = this._dragActivatorFromPath(r), s = r.find((n) => n instanceof HTMLElement && n.classList.contains("item"));
|
|
1610
|
+
if (i && i.kind !== "item")
|
|
1611
|
+
return;
|
|
1612
|
+
if (!s)
|
|
1613
|
+
return t && !(e.target instanceof HTMLButtonElement), void 0;
|
|
1614
|
+
const o = s.getAttribute("data-id");
|
|
1615
|
+
if (!o)
|
|
1616
|
+
return;
|
|
1617
|
+
const a = this._items.find((n) => n.id === o);
|
|
1618
|
+
if (!a || a.disabled)
|
|
1619
|
+
return;
|
|
1620
|
+
const l = e;
|
|
1621
|
+
if (l.shiftKey ? this._selectRangeTo(o) : l.metaKey || l.ctrlKey ? this._toggleSelection(o) : this._setSelection([o], "pointer"), this._focusedId = o, this._rangeAnchorId = o, this._pendingFocusId = o, this._hasCustomItemRendering()) {
|
|
1622
|
+
this._syncSelectionVisualState(), this._restorePendingFocus();
|
|
1623
|
+
return;
|
|
1624
|
+
}
|
|
1625
|
+
this.requestRender();
|
|
1626
|
+
}
|
|
1627
|
+
_onFocusIn(e) {
|
|
1628
|
+
const r = e.composedPath().find((i) => i instanceof HTMLElement && i.classList.contains("item")), t = r == null ? void 0 : r.getAttribute("data-id");
|
|
1629
|
+
t && (this._focusedId = t, this._syncSelectionVisualState());
|
|
1630
|
+
}
|
|
1631
|
+
_onKeyDown(e) {
|
|
1632
|
+
var l;
|
|
1633
|
+
const r = this._visibleItemIds();
|
|
1634
|
+
if (!r.length)
|
|
1635
|
+
return;
|
|
1636
|
+
const t = this._focusedId && r.includes(this._focusedId) ? this._focusedId : r[0], i = r.indexOf(t), s = this._items.find((n) => n.id === t), o = s ? this._lists.find((n) => n.id === s.listId) : null, a = (o == null ? void 0 : o.orientation) === "horizontal";
|
|
1637
|
+
if (!((l = this._dragState) != null && l.keyboard)) {
|
|
1638
|
+
if (e.key === "ArrowDown" && !a || e.key === "ArrowRight" && a) {
|
|
1639
|
+
e.preventDefault(), this._moveFocusBy(r, i, 1);
|
|
1640
|
+
return;
|
|
1641
|
+
}
|
|
1642
|
+
if (e.key === "ArrowUp" && !a || e.key === "ArrowLeft" && a) {
|
|
1643
|
+
e.preventDefault(), this._moveFocusBy(r, i, -1);
|
|
1644
|
+
return;
|
|
1645
|
+
}
|
|
1646
|
+
if ((e.ctrlKey || e.metaKey) && e.key.toLowerCase() === "a") {
|
|
1647
|
+
e.preventDefault(), this._setSelection(r, "keyboard"), this._announce(`${r.length} items selected.`);
|
|
1648
|
+
return;
|
|
1649
|
+
}
|
|
1650
|
+
if (e.key === "Enter") {
|
|
1651
|
+
e.preventDefault(), this._setSelection([t], "keyboard");
|
|
1652
|
+
return;
|
|
1653
|
+
}
|
|
1654
|
+
if (e.key === " " || e.code === "Space") {
|
|
1655
|
+
if (e.preventDefault(), this._isDragLocked()) {
|
|
1656
|
+
this._announce("Dragging is disabled right now.");
|
|
1657
|
+
return;
|
|
1658
|
+
}
|
|
1659
|
+
const n = this._selectedRootIds(t);
|
|
1660
|
+
if (!n.length)
|
|
1661
|
+
return;
|
|
1662
|
+
const d = this._itemClonesOnDrag(t);
|
|
1663
|
+
this._dragState = {
|
|
1664
|
+
snapshot: this._items.map(P),
|
|
1665
|
+
movedRootIds: n,
|
|
1666
|
+
originId: t,
|
|
1667
|
+
clone: d,
|
|
1668
|
+
keyboard: !0,
|
|
1669
|
+
dropTarget: this._initialKeyboardDropTarget(t),
|
|
1670
|
+
committed: !1
|
|
1671
|
+
};
|
|
1672
|
+
const c = n.length === 1 ? `Lifted ${(s == null ? void 0 : s.label) || "item"}.` : `Lifted ${n.length} items.`;
|
|
1673
|
+
this._announce(`${c} Use arrow keys to choose a destination.`), this.requestRender();
|
|
1674
|
+
return;
|
|
1675
|
+
}
|
|
1676
|
+
if (e.key === "Escape") {
|
|
1677
|
+
this._setSelection([], "keyboard");
|
|
1678
|
+
return;
|
|
1679
|
+
}
|
|
1680
|
+
return;
|
|
1681
|
+
}
|
|
1682
|
+
if (e.key === "Escape") {
|
|
1683
|
+
e.preventDefault(), this._cancelDrag(!0);
|
|
1684
|
+
return;
|
|
1685
|
+
}
|
|
1686
|
+
if (e.key === "Enter" || e.key === " " || e.code === "Space") {
|
|
1687
|
+
e.preventDefault();
|
|
1688
|
+
const n = this._dragState.dropTarget;
|
|
1689
|
+
if (!n)
|
|
1690
|
+
return;
|
|
1691
|
+
this._commitMove(n, this._dragState.movedRootIds, this._dragState.clone, "keyboard");
|
|
1692
|
+
return;
|
|
1693
|
+
}
|
|
1694
|
+
if (["ArrowDown", "ArrowUp", "ArrowLeft", "ArrowRight"].includes(e.key)) {
|
|
1695
|
+
e.preventDefault();
|
|
1696
|
+
const n = e.key === "ArrowDown" || e.key === "ArrowRight" ? 1 : -1;
|
|
1697
|
+
this._moveKeyboardDropTarget(n);
|
|
1698
|
+
}
|
|
1699
|
+
}
|
|
1700
|
+
_moveFocusBy(e, r, t) {
|
|
1701
|
+
const i = Math.max(0, Math.min(e.length - 1, r + t)), s = e[i];
|
|
1702
|
+
this._focusedId = s, this._pendingFocusId = s, !this._applyInteractiveStateInPlace({ restoreFocus: !0 }) && this.requestRender();
|
|
1703
|
+
}
|
|
1704
|
+
_onDragStart(e) {
|
|
1705
|
+
const r = this._dragActivatorFromPath(e.composedPath()), t = r == null ? void 0 : r.id;
|
|
1706
|
+
if (!r || !t) {
|
|
1707
|
+
e.preventDefault();
|
|
1708
|
+
return;
|
|
1709
|
+
}
|
|
1710
|
+
if (this._isDragLocked()) {
|
|
1711
|
+
e.preventDefault(), this._announce("Dragging is disabled right now.");
|
|
1712
|
+
return;
|
|
1713
|
+
}
|
|
1714
|
+
const i = this._items.find((a) => a.id === t);
|
|
1715
|
+
if (!i || i.disabled || i.dragDisabled) {
|
|
1716
|
+
e.preventDefault();
|
|
1717
|
+
return;
|
|
1718
|
+
}
|
|
1719
|
+
const s = this._selection.includes(t) ? this._selectedRootIds(t) : [t];
|
|
1720
|
+
this._selection.includes(t) || this._setSelection([t], "pointer");
|
|
1721
|
+
const o = this._itemClonesOnDrag(t);
|
|
1722
|
+
this._dragState = {
|
|
1723
|
+
snapshot: this._items.map(P),
|
|
1724
|
+
movedRootIds: s,
|
|
1725
|
+
originId: t,
|
|
1726
|
+
clone: o,
|
|
1727
|
+
keyboard: !1,
|
|
1728
|
+
dropTarget: null,
|
|
1729
|
+
committed: !1
|
|
1730
|
+
}, e.dataTransfer && (e.dataTransfer.effectAllowed = o ? "copyMove" : "move", e.dataTransfer.setData("text/plain", s.join(",")), this._applyDragImage(e.dataTransfer, s.length)), this._announce(
|
|
1731
|
+
o ? `Dragging ${s.length === 1 ? i.label : `${s.length} items`} as a copy.` : `Dragging ${s.length === 1 ? i.label : `${s.length} items`}.`
|
|
1732
|
+
), this.requestRender();
|
|
1733
|
+
}
|
|
1734
|
+
_onDragOver(e) {
|
|
1735
|
+
if (!this._dragState || this._dragState.keyboard)
|
|
1736
|
+
return;
|
|
1737
|
+
const r = this._dropTargetFromEvent(e);
|
|
1738
|
+
if (!r || !this._canDrop(r, this._dragState.movedRootIds)) {
|
|
1739
|
+
this._queueDropTarget(null, e.timeStamp);
|
|
1740
|
+
return;
|
|
1741
|
+
}
|
|
1742
|
+
e.preventDefault(), this._queueDropTarget(r, e.timeStamp), e.dataTransfer && (e.dataTransfer.dropEffect = this._dragState.clone ? "copy" : "move");
|
|
1743
|
+
}
|
|
1744
|
+
_onDrop(e) {
|
|
1745
|
+
if (!this._dragState || this._dragState.keyboard)
|
|
1746
|
+
return;
|
|
1747
|
+
const r = this._dropTargetFromEvent(e);
|
|
1748
|
+
!r || !this._canDrop(r, this._dragState.movedRootIds) || (e.preventDefault(), this._commitMove(r, this._dragState.movedRootIds, this._dragState.clone, "pointer"));
|
|
1749
|
+
}
|
|
1750
|
+
_onDocumentKeyDown(e) {
|
|
1751
|
+
e.key === "Escape" && (!this._dragState || this._dragState.keyboard || (e.preventDefault(), this._cancelDrag(!0)));
|
|
1752
|
+
}
|
|
1753
|
+
_onDragEnd() {
|
|
1754
|
+
!this._dragState || this._dragState.keyboard || this._dragState.committed || (this._pendingDropTarget = null, this._setDropTargetVisualState(this._dragState.dropTarget, !1), this._clearPointerDragPreview(), this._dragState = null, this._removeDragImage(), this._announce("Drag cancelled."), this.requestRender());
|
|
1755
|
+
}
|
|
1756
|
+
_dropTargetFromEvent(e) {
|
|
1757
|
+
return this._dropTargetFromPath(e.composedPath(), e.clientX, e.clientY);
|
|
1758
|
+
}
|
|
1759
|
+
_dropTargetFromPath(e, r, t) {
|
|
1760
|
+
const i = e.find((_) => _ instanceof HTMLElement && _.classList.contains("dropzone"));
|
|
1761
|
+
if (i) {
|
|
1762
|
+
const _ = {
|
|
1763
|
+
listId: i.getAttribute("data-list-id") || "",
|
|
1764
|
+
parentId: i.getAttribute("data-parent-id") || null,
|
|
1765
|
+
beforeId: i.getAttribute("data-before-id") || null,
|
|
1766
|
+
mode: i.getAttribute("data-mode") === "inside" ? "inside" : "before"
|
|
1767
|
+
};
|
|
1768
|
+
if (_.listId)
|
|
1769
|
+
return _;
|
|
1770
|
+
}
|
|
1771
|
+
const s = e.find((_) => _ instanceof HTMLElement && _.classList.contains("item"));
|
|
1772
|
+
if (!s)
|
|
1773
|
+
return null;
|
|
1774
|
+
const o = s.getAttribute("data-id");
|
|
1775
|
+
if (!o)
|
|
1776
|
+
return null;
|
|
1777
|
+
const a = this._items.find((_) => _.id === o);
|
|
1778
|
+
if (!a)
|
|
1779
|
+
return null;
|
|
1780
|
+
const l = this._lists.find((_) => _.id === a.listId), n = s.getBoundingClientRect(), d = (l == null ? void 0 : l.orientation) === "horizontal", c = d ? n.left : n.top, g = d ? n.right : n.bottom, b = d ? r : t, f = Math.max(1, g - c), v = (b - c) / f, m = this.getAttribute("allow-nesting") !== "false" && !a.disabled;
|
|
1781
|
+
if (v <= 0.34)
|
|
1782
|
+
return {
|
|
1783
|
+
listId: a.listId,
|
|
1784
|
+
parentId: a.parentId,
|
|
1785
|
+
beforeId: a.id,
|
|
1786
|
+
mode: "before"
|
|
1787
|
+
};
|
|
1788
|
+
if (m && v >= 0.34 && v <= 0.74)
|
|
1789
|
+
return {
|
|
1790
|
+
listId: a.listId,
|
|
1791
|
+
parentId: a.id,
|
|
1792
|
+
beforeId: null,
|
|
1793
|
+
mode: "inside"
|
|
1794
|
+
};
|
|
1795
|
+
const w = E(this._items).get(z(a.listId, a.parentId)) || [], k = w.indexOf(a.id), A = k >= 0 && w[k + 1] || null;
|
|
1796
|
+
return {
|
|
1797
|
+
listId: a.listId,
|
|
1798
|
+
parentId: a.parentId,
|
|
1799
|
+
beforeId: A,
|
|
1800
|
+
mode: "before"
|
|
1801
|
+
};
|
|
1802
|
+
}
|
|
1803
|
+
_dropTargetFromPoint(e, r) {
|
|
1804
|
+
return this._dropTargetFromPath(this._pathFromPoint(e, r), e, r);
|
|
1805
|
+
}
|
|
1806
|
+
_beginPointerDrag(e, r) {
|
|
1807
|
+
if (!this._pointerGesture || this._dragState)
|
|
1808
|
+
return;
|
|
1809
|
+
const t = this._items.find((i) => {
|
|
1810
|
+
var s;
|
|
1811
|
+
return i.id === ((s = this._pointerGesture) == null ? void 0 : s.originId);
|
|
1812
|
+
});
|
|
1813
|
+
t && (this._dragState = {
|
|
1814
|
+
snapshot: this._items.map(P),
|
|
1815
|
+
movedRootIds: [...this._pointerGesture.movedRootIds],
|
|
1816
|
+
originId: this._pointerGesture.originId,
|
|
1817
|
+
clone: this._pointerGesture.clone,
|
|
1818
|
+
keyboard: !1,
|
|
1819
|
+
dropTarget: null,
|
|
1820
|
+
committed: !1
|
|
1821
|
+
}, this._pendingDropTarget = null, this._applyPointerPreview(
|
|
1822
|
+
e,
|
|
1823
|
+
r,
|
|
1824
|
+
this._dragState.movedRootIds.length,
|
|
1825
|
+
this._dragState.clone
|
|
1826
|
+
), this._setDraggingVisualState(this._draggingIds(), !0), this._announce(
|
|
1827
|
+
this._dragState.clone ? `Dragging ${this._dragState.movedRootIds.length === 1 ? t.label : `${this._dragState.movedRootIds.length} items`} as a copy.` : `Dragging ${this._dragState.movedRootIds.length === 1 ? t.label : `${this._dragState.movedRootIds.length} items`}.`
|
|
1828
|
+
));
|
|
1829
|
+
}
|
|
1830
|
+
_onPointerDown(e) {
|
|
1831
|
+
var o, a;
|
|
1832
|
+
const r = this._dragActivatorFromPath(e.composedPath()), t = r == null ? void 0 : r.id;
|
|
1833
|
+
if (!r || !t)
|
|
1834
|
+
return;
|
|
1835
|
+
if (this._isDragLocked()) {
|
|
1836
|
+
e.preventDefault(), this._announce("Dragging is disabled right now.");
|
|
1837
|
+
return;
|
|
1838
|
+
}
|
|
1839
|
+
const i = this._items.find((l) => l.id === t);
|
|
1840
|
+
if (!i || i.disabled || i.dragDisabled) {
|
|
1841
|
+
e.preventDefault();
|
|
1842
|
+
return;
|
|
1843
|
+
}
|
|
1844
|
+
e.preventDefault();
|
|
1845
|
+
try {
|
|
1846
|
+
(a = (o = r.element).setPointerCapture) == null || a.call(o, e.pointerId);
|
|
1847
|
+
} catch {
|
|
1848
|
+
}
|
|
1849
|
+
const s = this._selection.includes(t) ? this._selectedRootIds(t) : [t];
|
|
1850
|
+
this._pointerGesture = {
|
|
1851
|
+
pointerId: e.pointerId,
|
|
1852
|
+
pointerType: e.pointerType,
|
|
1853
|
+
originId: t,
|
|
1854
|
+
movedRootIds: s,
|
|
1855
|
+
clone: this._itemClonesOnDrag(t),
|
|
1856
|
+
startX: e.clientX,
|
|
1857
|
+
startY: e.clientY,
|
|
1858
|
+
moved: !1,
|
|
1859
|
+
captureTarget: r.element
|
|
1860
|
+
};
|
|
1861
|
+
}
|
|
1862
|
+
_onPointerMove(e) {
|
|
1863
|
+
if (!(!this._pointerGesture || e.pointerId !== this._pointerGesture.pointerId)) {
|
|
1864
|
+
if (e.preventDefault(), !this._pointerGesture.moved) {
|
|
1865
|
+
if (Math.hypot(e.clientX - this._pointerGesture.startX, e.clientY - this._pointerGesture.startY) < 6)
|
|
1866
|
+
return;
|
|
1867
|
+
this._pointerGesture.moved = !0, this._beginPointerDrag(e.clientX, e.clientY);
|
|
1868
|
+
}
|
|
1869
|
+
if (!(!this._dragState || this._dragState.keyboard) && (this._movePointerPreview(e.clientX, e.clientY), !this._dragState.committed)) {
|
|
1870
|
+
const r = this._dropTargetFromPoint(e.clientX, e.clientY);
|
|
1871
|
+
if (!r || !this._canDrop(r, this._dragState.movedRootIds)) {
|
|
1872
|
+
this._queueDropTarget(null, e.timeStamp);
|
|
1873
|
+
return;
|
|
1874
|
+
}
|
|
1875
|
+
this._queueDropTarget(r, e.timeStamp);
|
|
1876
|
+
}
|
|
1877
|
+
}
|
|
1878
|
+
}
|
|
1879
|
+
_onPointerUp(e) {
|
|
1880
|
+
var i, s;
|
|
1881
|
+
if (!this._pointerGesture || e.pointerId !== this._pointerGesture.pointerId)
|
|
1882
|
+
return;
|
|
1883
|
+
e.preventDefault();
|
|
1884
|
+
try {
|
|
1885
|
+
(s = (i = this._pointerGesture.captureTarget) == null ? void 0 : i.releasePointerCapture) == null || s.call(i, e.pointerId);
|
|
1886
|
+
} catch {
|
|
1887
|
+
}
|
|
1888
|
+
const r = this._pointerGesture;
|
|
1889
|
+
if (this._pointerGesture = null, !this._dragState || this._dragState.keyboard)
|
|
1890
|
+
return;
|
|
1891
|
+
const t = r.moved ? this._releaseDropTarget(e.clientX, e.clientY) : null;
|
|
1892
|
+
if (r.moved && t) {
|
|
1893
|
+
this._commitMove(t, this._dragState.movedRootIds, this._dragState.clone, "pointer");
|
|
1894
|
+
return;
|
|
1895
|
+
}
|
|
1896
|
+
r.moved ? this._cancelDrag(!0) : (this._setDropTargetVisualState(this._dragState.dropTarget, !1), this._clearPointerDragPreview(), this._dragState = null, this._removeDragImage(), this.requestRender());
|
|
1897
|
+
}
|
|
1898
|
+
_onPointerCancel(e) {
|
|
1899
|
+
!this._pointerGesture || e.pointerId !== this._pointerGesture.pointerId || (this._pointerGesture = null, this._dragState && this._cancelDrag(!0));
|
|
1900
|
+
}
|
|
1901
|
+
_setSelection(e, r) {
|
|
1902
|
+
const t = new Set(this._items.map((a) => a.id)), i = Array.from(new Set(e.filter((a) => t.has(a)))), s = [...this._selection];
|
|
1903
|
+
this._selection = i, this._rangeAnchorId = i[i.length - 1] || null, this._focusedId = i[i.length - 1] || this._focusedId;
|
|
1904
|
+
const o = j(i);
|
|
1905
|
+
if (this.getAttribute("selection") !== o) {
|
|
1906
|
+
this._lastSelectionAttr = o, this._suppressAttributeRender = !0;
|
|
1907
|
+
try {
|
|
1908
|
+
i.length ? this.setAttribute("selection", o) : this.removeAttribute("selection");
|
|
1909
|
+
} finally {
|
|
1910
|
+
this._suppressAttributeRender = !1;
|
|
1911
|
+
}
|
|
1912
|
+
}
|
|
1913
|
+
if (this.dispatchEvent(new CustomEvent("selection-change", {
|
|
1914
|
+
detail: {
|
|
1915
|
+
selection: [...i],
|
|
1916
|
+
previousSelection: s
|
|
1917
|
+
},
|
|
1918
|
+
bubbles: !0,
|
|
1919
|
+
composed: !0
|
|
1920
|
+
})), r !== "restore") {
|
|
1921
|
+
if (this._applyInteractiveStateInPlace({ restoreFocus: !0 }))
|
|
1922
|
+
return;
|
|
1923
|
+
this.requestRender();
|
|
1924
|
+
}
|
|
1925
|
+
}
|
|
1926
|
+
_toggleSelection(e) {
|
|
1927
|
+
const r = this._selection.includes(e) ? this._selection.filter((t) => t !== e) : [...this._selection, e];
|
|
1928
|
+
this._setSelection(r, "pointer"), this._announce(`${r.length} items selected.`);
|
|
1929
|
+
}
|
|
1930
|
+
_selectRangeTo(e) {
|
|
1931
|
+
const r = this._visibleItemIds(), t = this._rangeAnchorId || this._focusedId || e, i = r.indexOf(t), s = r.indexOf(e);
|
|
1932
|
+
if (i < 0 || s < 0) {
|
|
1933
|
+
this._setSelection([e], "pointer");
|
|
1934
|
+
return;
|
|
1935
|
+
}
|
|
1936
|
+
const [o, a] = i <= s ? [i, s] : [s, i];
|
|
1937
|
+
this._setSelection(r.slice(o, a + 1), "pointer"), this._announce(`${a - o + 1} items selected.`);
|
|
1938
|
+
}
|
|
1939
|
+
_visibleItemIds() {
|
|
1940
|
+
const e = Q(this._items, new Set(this._selection), new Set(this._draggingIds()), this.filterQuery, this.sort);
|
|
1941
|
+
return Array.from(e.values()).flat().filter((r) => !r.disabled).map((r) => r.id);
|
|
1942
|
+
}
|
|
1943
|
+
_selectedRootIds(e) {
|
|
1944
|
+
const r = this._selection.length ? [...this._selection] : e ? [e] : [], t = M(this._items), i = new Set(r);
|
|
1945
|
+
return r.filter((s) => {
|
|
1946
|
+
var l;
|
|
1947
|
+
const o = t.get(s);
|
|
1948
|
+
if (!o)
|
|
1949
|
+
return !1;
|
|
1950
|
+
let a = o.parentId;
|
|
1951
|
+
for (; a; ) {
|
|
1952
|
+
if (i.has(a))
|
|
1953
|
+
return !1;
|
|
1954
|
+
a = ((l = t.get(a)) == null ? void 0 : l.parentId) ?? null;
|
|
1955
|
+
}
|
|
1956
|
+
return !o.disabled;
|
|
1957
|
+
});
|
|
1958
|
+
}
|
|
1959
|
+
_draggingIds() {
|
|
1960
|
+
if (!this._dragState)
|
|
1961
|
+
return [];
|
|
1962
|
+
const e = M(this._items), r = E(this._items), t = [], i = (s) => {
|
|
1963
|
+
t.push(s);
|
|
1964
|
+
const o = e.get(s);
|
|
1965
|
+
if (!o)
|
|
1966
|
+
return;
|
|
1967
|
+
(r.get(z(o.listId, s)) || []).forEach(i);
|
|
1968
|
+
};
|
|
1969
|
+
return this._dragState.movedRootIds.forEach(i), t;
|
|
1970
|
+
}
|
|
1971
|
+
_itemClonesOnDrag(e) {
|
|
1972
|
+
const r = this._items.find((i) => i.id === e);
|
|
1973
|
+
if (!r)
|
|
1974
|
+
return !1;
|
|
1975
|
+
if (r.cloneOnDrag)
|
|
1976
|
+
return !0;
|
|
1977
|
+
const t = this._lists.find((i) => i.id === r.listId);
|
|
1978
|
+
return !!(t != null && t.cloneOnDrag);
|
|
1979
|
+
}
|
|
1980
|
+
_isDragLocked() {
|
|
1981
|
+
return !!(this.hasAttribute("disabled") || this.sort !== "manual" || this.filterQuery && !this.hasAttribute("allow-filtered-drag"));
|
|
1982
|
+
}
|
|
1983
|
+
_canDrop(e, r) {
|
|
1984
|
+
var n;
|
|
1985
|
+
if (this._isDragLocked())
|
|
1986
|
+
return !1;
|
|
1987
|
+
const t = this._lists.find((d) => d.id === e.listId);
|
|
1988
|
+
if (!t || t.disabled)
|
|
1989
|
+
return !1;
|
|
1990
|
+
const i = M(this._items), s = /* @__PURE__ */ new Set(), o = E(this._items), a = (d) => {
|
|
1991
|
+
s.add(d);
|
|
1992
|
+
const c = i.get(d);
|
|
1993
|
+
c && (o.get(z(c.listId, d)) || []).forEach(a);
|
|
1994
|
+
};
|
|
1995
|
+
if (r.forEach(a), e.parentId && s.has(e.parentId) || e.beforeId && s.has(e.beforeId))
|
|
1996
|
+
return !1;
|
|
1997
|
+
const l = Array.from(new Set(r.map((d) => {
|
|
1998
|
+
var c;
|
|
1999
|
+
return (c = i.get(d)) == null ? void 0 : c.listId;
|
|
2000
|
+
}).filter(Boolean)));
|
|
2001
|
+
return !((n = t.accepts) != null && n.length && l.some((d) => {
|
|
2002
|
+
var c;
|
|
2003
|
+
return !((c = t.accepts) != null && c.includes(d));
|
|
2004
|
+
}) || e.mode === "inside" && this.getAttribute("allow-nesting") === "false");
|
|
2005
|
+
}
|
|
2006
|
+
_commitMove(e, r, t, i) {
|
|
2007
|
+
if (!this._canDrop(e, r))
|
|
2008
|
+
return;
|
|
2009
|
+
const s = M(this._items), o = E(this._items), a = /* @__PURE__ */ new Set(), l = [], n = (p) => {
|
|
2010
|
+
const D = s.get(p);
|
|
2011
|
+
!D || a.has(p) || (a.add(p), l.push(p), (o.get(z(D.listId, p)) || []).forEach(n));
|
|
2012
|
+
};
|
|
2013
|
+
r.forEach(n);
|
|
2014
|
+
const d = this._items.map(P), c = d.filter((p) => a.has(p.id)), g = t ? d.map(P) : d.filter((p) => !a.has(p.id)), b = t ? c.map((p) => this._cloneSubtreeItem(p, l)) : c.map(P), f = /* @__PURE__ */ new Map(), v = /* @__PURE__ */ new Map();
|
|
2015
|
+
t && c.forEach((p, D) => {
|
|
2016
|
+
f.set(p.id, b[D].id), v.set(b[D].id, p.id);
|
|
2017
|
+
}), b.forEach((p) => {
|
|
2018
|
+
const D = t ? v.get(p.id) : p.id, q = D ? s.get(D) : null;
|
|
2019
|
+
q && (t && (p.parentId = q.parentId && f.has(q.parentId) && f.get(q.parentId) || null), p.listId = e.listId);
|
|
2020
|
+
});
|
|
2021
|
+
const m = r.map((p) => f.get(p) || p), y = [...g, ...b], w = E(g), k = z(e.listId, e.parentId), A = [...w.get(k) || []], _ = e.beforeId ? A.indexOf(e.beforeId) : A.length, R = _ >= 0 ? _ : A.length;
|
|
2022
|
+
A.splice(R, 0, ...m), w.set(k, A), E(b).forEach((p, D) => {
|
|
2023
|
+
const [, q] = D.split("::");
|
|
2024
|
+
(q || "") !== "__root__" && w.set(D, [...p]);
|
|
2025
|
+
});
|
|
2026
|
+
const C = M(y);
|
|
2027
|
+
m.forEach((p) => {
|
|
2028
|
+
const D = C.get(p);
|
|
2029
|
+
D && (D.parentId = e.parentId, D.listId = e.listId);
|
|
2030
|
+
});
|
|
2031
|
+
const T = [], $ = /* @__PURE__ */ new Set(), L = (p, D) => {
|
|
2032
|
+
(w.get(z(p, D)) || []).forEach((N, Z) => {
|
|
2033
|
+
const H = C.get(N);
|
|
2034
|
+
!H || $.has(N) || ($.add(N), H.listId = p, H.parentId = D, H.order = Z, T.push(H), L(p, N));
|
|
2035
|
+
});
|
|
2036
|
+
};
|
|
2037
|
+
this._lists.forEach((p) => L(p.id, null)), y.forEach((p) => {
|
|
2038
|
+
$.has(p.id) || (p.parentId = null, T.push(p));
|
|
2039
|
+
}), this._dragState && (this._dragState.committed = !0), this._items = T.map(P), this._clearPointerDragPreview(), this._dragState = null, this._removeDragImage();
|
|
2040
|
+
const G = [...m], h = [...this._selection];
|
|
2041
|
+
this._selection = G, this._focusedId = G[0] || null, this._pendingFocusId = this._focusedId, this._syncAttributesFromState();
|
|
2042
|
+
const x = J(this._items);
|
|
2043
|
+
this._persistSnapshot(x);
|
|
2044
|
+
const F = r.map((p) => s.get(p)).filter((p) => !!p), O = t ? "clone" : e.mode === "inside" ? "nest" : F.some((p) => p.listId !== e.listId) ? "transfer" : "reorder", K = {
|
|
2045
|
+
items: this.items,
|
|
2046
|
+
lists: this.lists,
|
|
2047
|
+
selection: [...G],
|
|
2048
|
+
previousSelection: h,
|
|
2049
|
+
movedIds: [...m],
|
|
2050
|
+
source: i,
|
|
2051
|
+
operation: O,
|
|
2052
|
+
persistence: x
|
|
2053
|
+
};
|
|
2054
|
+
this.dispatchEvent(new CustomEvent("change", {
|
|
2055
|
+
detail: K,
|
|
2056
|
+
bubbles: !0,
|
|
2057
|
+
composed: !0
|
|
2058
|
+
})), this.dispatchEvent(new CustomEvent("persist-request", {
|
|
2059
|
+
detail: K,
|
|
2060
|
+
bubbles: !0,
|
|
2061
|
+
composed: !0
|
|
2062
|
+
})), this._announce(this._messageForMove(O, m.length, e)), this.requestRender();
|
|
2063
|
+
}
|
|
2064
|
+
_syncAttributesFromState() {
|
|
2065
|
+
const e = le(this._lists), r = de(this._items), t = j(this._selection);
|
|
2066
|
+
this._lastListsAttr = e, this._lastItemsAttr = r, this._lastSelectionAttr = t, this._suppressAttributeRender = !0;
|
|
2067
|
+
try {
|
|
2068
|
+
this.setAttribute("lists", e), this.setAttribute("items", r), this._selection.length ? this.setAttribute("selection", t) : this.removeAttribute("selection");
|
|
2069
|
+
} finally {
|
|
2070
|
+
this._suppressAttributeRender = !1;
|
|
2071
|
+
}
|
|
2072
|
+
}
|
|
2073
|
+
_cloneSubtreeItem(e, r) {
|
|
2074
|
+
const i = `copy-${this._cloneSeed++}`, o = `${e.id.includes("--copy-") ? e.id.split("--copy-")[0] : e.id}--${i}`;
|
|
2075
|
+
return {
|
|
2076
|
+
...e,
|
|
2077
|
+
id: o,
|
|
2078
|
+
label: r[0] === e.id ? `${e.label} copy` : e.label
|
|
2079
|
+
};
|
|
2080
|
+
}
|
|
2081
|
+
_messageForMove(e, r, t) {
|
|
2082
|
+
const i = this._lists.find((o) => o.id === t.listId), s = (i == null ? void 0 : i.label) || t.listId;
|
|
2083
|
+
return e === "clone" ? `${r === 1 ? "Item copied" : `${r} items copied`} into ${s}.` : e === "nest" ? `${r === 1 ? "Item nested" : `${r} items nested`} in ${s}.` : e === "transfer" ? `${r === 1 ? "Item moved" : `${r} items moved`} to ${s}.` : `${r === 1 ? "Item reordered" : `${r} items reordered`} in ${s}.`;
|
|
2084
|
+
}
|
|
2085
|
+
_persistSnapshot(e) {
|
|
2086
|
+
const r = this.getAttribute("persist-key");
|
|
2087
|
+
if (r)
|
|
2088
|
+
try {
|
|
2089
|
+
window.localStorage.setItem(r, JSON.stringify(e));
|
|
2090
|
+
} catch {
|
|
2091
|
+
}
|
|
2092
|
+
}
|
|
2093
|
+
_announce(e) {
|
|
2094
|
+
this._liveMessage = e, this._applyLiveMessage();
|
|
2095
|
+
}
|
|
2096
|
+
_cancelDrag(e) {
|
|
2097
|
+
this._dragState && (this._pendingDropTarget = null, this._setDropTargetVisualState(this._dragState.dropTarget, !1), this._clearPointerDragPreview(), this._items = this._dragState.snapshot.map(P), this._dragState = null, this._pointerGesture = null, this._removeDragImage(), e && this._announce("Drag cancelled."), this._syncAttributesFromState(), this.requestRender());
|
|
2098
|
+
}
|
|
2099
|
+
_applyDragImage(e, r) {
|
|
2100
|
+
this._removeDragImage();
|
|
2101
|
+
const t = document.createElement("div");
|
|
2102
|
+
t.textContent = r === 1 ? "Dragging item" : `Dragging ${r} items`, t.style.position = "fixed", t.style.top = "-999px", t.style.left = "-999px", t.style.padding = "8px 12px", t.style.borderRadius = "999px", t.style.background = "rgba(15, 23, 42, 0.92)", t.style.color = "#f8fafc", t.style.font = "600 12px/1 Inter, sans-serif", t.style.pointerEvents = "none", document.body.appendChild(t), e.setDragImage(t, 12, 12), this._dragImage = t;
|
|
2103
|
+
}
|
|
2104
|
+
_removeDragImage() {
|
|
2105
|
+
var e;
|
|
2106
|
+
(e = this._dragImage) == null || e.remove(), this._dragImage = null;
|
|
2107
|
+
}
|
|
2108
|
+
_removeDragPreviewOverlay() {
|
|
2109
|
+
var e;
|
|
2110
|
+
(e = this._dragPreviewOverlay) == null || e.remove(), this._dragPreviewOverlay = null;
|
|
2111
|
+
}
|
|
2112
|
+
_applyPointerPreview(e, r, t, i) {
|
|
2113
|
+
this._removeDragImage();
|
|
2114
|
+
const s = document.createElement("div");
|
|
2115
|
+
s.textContent = i ? t === 1 ? "Copying item" : `Copying ${t} items` : t === 1 ? "Moving item" : `Moving ${t} items`, s.style.position = "fixed", s.style.top = "0", s.style.left = "0", s.style.zIndex = "2147483647", s.style.padding = "8px 12px", s.style.borderRadius = "999px", s.style.background = "rgba(15, 23, 42, 0.92)", s.style.color = "#f8fafc", s.style.font = "600 12px/1 Inter, sans-serif", s.style.pointerEvents = "none", s.style.boxShadow = "0 12px 28px rgba(15, 23, 42, 0.22)", document.body.appendChild(s), this._dragImage = s, this._movePointerPreview(e, r);
|
|
2116
|
+
}
|
|
2117
|
+
_movePointerPreview(e, r) {
|
|
2118
|
+
this._dragImage && (this._dragImage.style.transform = `translate(${Math.round(e + 14)}px, ${Math.round(r + 14)}px)`);
|
|
2119
|
+
}
|
|
2120
|
+
_keyboardDropTargets() {
|
|
2121
|
+
const e = M(this._items), r = E(this._items), t = [], i = (s, o) => {
|
|
2122
|
+
var l;
|
|
2123
|
+
(r.get(z(s, o)) || []).forEach((n) => {
|
|
2124
|
+
const d = e.get(n);
|
|
2125
|
+
!d || d.hidden || (t.push({
|
|
2126
|
+
listId: s,
|
|
2127
|
+
parentId: o,
|
|
2128
|
+
beforeId: n,
|
|
2129
|
+
mode: "before",
|
|
2130
|
+
label: `Before ${d.label}`
|
|
2131
|
+
}), this.getAttribute("allow-nesting") !== "false" && t.push({
|
|
2132
|
+
listId: s,
|
|
2133
|
+
parentId: n,
|
|
2134
|
+
beforeId: null,
|
|
2135
|
+
mode: "inside",
|
|
2136
|
+
label: `Nest inside ${d.label}`
|
|
2137
|
+
}), i(s, n));
|
|
2138
|
+
}), t.push({
|
|
2139
|
+
listId: s,
|
|
2140
|
+
parentId: o,
|
|
2141
|
+
beforeId: null,
|
|
2142
|
+
mode: "before",
|
|
2143
|
+
label: o ? "After children" : `End of ${((l = this._lists.find((n) => n.id === s)) == null ? void 0 : l.label) || s}`
|
|
2144
|
+
});
|
|
2145
|
+
};
|
|
2146
|
+
return this._lists.forEach((s) => i(s.id, null)), t.filter((s) => {
|
|
2147
|
+
var o;
|
|
2148
|
+
return this._canDrop(s, ((o = this._dragState) == null ? void 0 : o.movedRootIds) || []);
|
|
2149
|
+
});
|
|
2150
|
+
}
|
|
2151
|
+
_initialKeyboardDropTarget(e) {
|
|
2152
|
+
const r = this._items.find((t) => t.id === e);
|
|
2153
|
+
return r ? {
|
|
2154
|
+
listId: r.listId,
|
|
2155
|
+
parentId: r.parentId,
|
|
2156
|
+
beforeId: e,
|
|
2157
|
+
mode: "before"
|
|
2158
|
+
} : null;
|
|
2159
|
+
}
|
|
2160
|
+
_moveKeyboardDropTarget(e) {
|
|
2161
|
+
if (!this._dragState)
|
|
2162
|
+
return;
|
|
2163
|
+
const r = this._keyboardDropTargets();
|
|
2164
|
+
if (!r.length)
|
|
2165
|
+
return;
|
|
2166
|
+
const t = Math.max(0, r.findIndex(
|
|
2167
|
+
(s) => {
|
|
2168
|
+
var o, a, l, n, d, c, g, b;
|
|
2169
|
+
return s.listId === ((a = (o = this._dragState) == null ? void 0 : o.dropTarget) == null ? void 0 : a.listId) && s.parentId === ((n = (l = this._dragState) == null ? void 0 : l.dropTarget) == null ? void 0 : n.parentId) && s.beforeId === ((c = (d = this._dragState) == null ? void 0 : d.dropTarget) == null ? void 0 : c.beforeId) && s.mode === ((b = (g = this._dragState) == null ? void 0 : g.dropTarget) == null ? void 0 : b.mode);
|
|
2170
|
+
}
|
|
2171
|
+
)), i = Math.max(0, Math.min(r.length - 1, t + e));
|
|
2172
|
+
this._setDropTarget(r[i], { announceLabel: r[i].label });
|
|
2173
|
+
}
|
|
2174
|
+
}
|
|
2175
|
+
typeof customElements < "u" && !customElements.get("ui-sortable") && customElements.define("ui-sortable", ce);
|
|
2
2176
|
export {
|
|
3
|
-
|
|
2177
|
+
ce as UISortable
|
|
4
2178
|
};
|