@editora/ui-core 0.1.19 → 0.1.20
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/dist/{ElementBase-1b301e7f.js → ElementBase-EV6mVBUV.js} +1 -1
- package/dist/{ElementBase-909688f3.mjs → ElementBase-YlTLMsGk.mjs} +3 -3
- package/dist/accordion.cjs.js +3 -3
- package/dist/accordion.esm.js +39 -62
- package/dist/alert-dialog.cjs.js +19 -19
- package/dist/alert-dialog.esm.js +69 -87
- package/dist/alert.cjs.js +1 -1
- package/dist/alert.esm.js +4 -7
- package/dist/anchor.cjs.js +2 -2
- package/dist/anchor.esm.js +3 -3
- package/dist/animated-beam.cjs.js +83 -83
- package/dist/animated-beam.esm.js +250 -277
- package/dist/animated-list.cjs.js +4 -4
- package/dist/animated-list.esm.js +47 -61
- package/dist/animated-text.cjs.js +2 -2
- package/dist/animated-text.esm.js +13 -24
- package/dist/app-header.cjs.js +3 -3
- package/dist/app-header.esm.js +11 -13
- package/dist/aspect-ratio.cjs.js +1 -1
- package/dist/aspect-ratio.esm.js +4 -7
- package/dist/avatar.cjs.js +1 -1
- package/dist/avatar.esm.js +7 -13
- package/dist/badge.cjs.js +1 -1
- package/dist/badge.esm.js +4 -7
- package/dist/block-controls.cjs.js +2 -2
- package/dist/block-controls.esm.js +19 -35
- package/dist/box.cjs.js +1 -1
- package/dist/box.esm.js +8 -15
- package/dist/breadcrumb.cjs.js +2 -2
- package/dist/breadcrumb.esm.js +20 -37
- package/dist/button.cjs.js +1 -521
- package/dist/button.esm.js +2 -671
- package/dist/{calendar-2c11b824.mjs → calendar-DLY4acgn.mjs} +293 -342
- package/dist/{calendar-a8735e40.js → calendar-Dkof-FTK.js} +25 -25
- package/dist/calendar.cjs.js +1 -1
- package/dist/calendar.esm.js +8 -9
- package/dist/card.cjs.js +4 -4
- package/dist/card.esm.js +13 -19
- package/dist/chart.cjs.js +64 -64
- package/dist/chart.esm.js +223 -254
- package/dist/checkbox.cjs.js +1 -1
- package/dist/checkbox.esm.js +2 -3
- package/dist/collapsible.cjs.js +1 -1
- package/dist/collapsible.esm.js +5 -9
- package/dist/{collection-a1aac0c6.mjs → collection-C7URGjEI.mjs} +8 -14
- package/dist/collection.cjs.js +1 -1
- package/dist/collection.esm.js +4 -7
- package/dist/color-picker.cjs.js +9 -9
- package/dist/color-picker.esm.js +189 -252
- package/dist/combobox.cjs.js +13 -13
- package/dist/combobox.esm.js +93 -126
- package/dist/command-palette.cjs.js +3 -3
- package/dist/command-palette.esm.js +19 -30
- package/dist/command.cjs.js +4 -4
- package/dist/command.esm.js +41 -53
- package/dist/components/ui-orbiter.d.ts.map +1 -1
- package/dist/components/ui-skeleton.d.ts.map +1 -1
- package/dist/components/ui-split-button.d.ts +1 -0
- package/dist/components/ui-split-button.d.ts.map +1 -1
- package/dist/components/ui-time-picker.d.ts.map +1 -1
- package/dist/container.cjs.js +2 -2
- package/dist/container.esm.js +2 -3
- package/dist/context-menu.cjs.js +8 -8
- package/dist/context-menu.esm.js +157 -219
- package/dist/control-group.cjs.js +1 -1
- package/dist/control-group.esm.js +2 -3
- package/dist/data-table.cjs.js +4 -4
- package/dist/data-table.esm.js +299 -381
- package/dist/date-field.cjs.js +3 -3
- package/dist/date-field.esm.js +68 -80
- package/dist/date-picker.cjs.js +9 -9
- package/dist/date-picker.esm.js +69 -97
- package/dist/date-range-picker.cjs.js +3 -3
- package/dist/date-range-picker.esm.js +32 -56
- package/dist/date-range-time-picker.cjs.js +9 -9
- package/dist/date-range-time-picker.esm.js +111 -140
- package/dist/date-time-picker.cjs.js +4 -4
- package/dist/date-time-picker.esm.js +112 -144
- package/dist/date-time-utils-Dmost5Ee.js +1 -0
- package/dist/date-time-utils-y1N2gvG2.mjs +268 -0
- package/dist/description.cjs.js +1 -1
- package/dist/description.esm.js +3 -5
- package/dist/dialog.cjs.js +12 -12
- package/dist/dialog.esm.js +44 -63
- package/dist/direction-provider.cjs.js +1 -1
- package/dist/direction-provider.esm.js +2 -3
- package/dist/{dismissable-layer-9c7e6b58.mjs → dismissable-layer-BmPIoK80.mjs} +29 -33
- package/dist/dismissable-layer-DNfrKA20.js +1 -0
- package/dist/dismissable-layer.cjs.js +2 -2
- package/dist/dismissable-layer.esm.js +4 -6
- package/dist/dock.cjs.js +5 -5
- package/dist/dock.esm.js +134 -155
- package/dist/drawer.cjs.js +2 -2
- package/dist/drawer.esm.js +18 -35
- package/dist/dropdown.cjs.js +2 -2
- package/dist/dropdown.esm.js +119 -149
- package/dist/dropzone.cjs.js +1 -1
- package/dist/dropzone.esm.js +0 -1
- package/dist/empty-state.cjs.js +1 -1
- package/dist/empty-state.esm.js +1 -1
- package/dist/field-error.cjs.js +1 -1
- package/dist/field-error.esm.js +3 -5
- package/dist/field.cjs.js +5 -5
- package/dist/field.esm.js +27 -34
- package/dist/fieldset.cjs.js +4 -4
- package/dist/fieldset.esm.js +19 -24
- package/dist/file-upload.cjs.js +4 -4
- package/dist/file-upload.esm.js +69 -93
- package/dist/flex.cjs.js +1 -1
- package/dist/flex.esm.js +5 -9
- package/dist/floating-toolbar.cjs.js +4 -4
- package/dist/floating-toolbar.esm.js +60 -85
- package/dist/focus-scope-Bwug2gDv.js +1 -0
- package/dist/{focus-scope-103833ee.mjs → focus-scope-CmEsG5UZ.mjs} +39 -48
- package/dist/focus-scope.cjs.js +2 -2
- package/dist/focus-scope.esm.js +15 -20
- package/dist/form.cjs.js +2 -2
- package/dist/form.esm.js +26 -53
- package/dist/gantt.cjs.js +43 -43
- package/dist/gantt.esm.js +295 -322
- package/dist/grid.cjs.js +1 -1
- package/dist/grid.esm.js +5 -9
- package/dist/hover-card.cjs.js +4 -4
- package/dist/hover-card.esm.js +22 -28
- package/dist/icon-cloud.cjs.js +7 -7
- package/dist/icon-cloud.esm.js +48 -62
- package/dist/icon.cjs.js +1 -1
- package/dist/icon.esm.js +2 -4
- package/dist/index.cjs.js +1 -1
- package/dist/index.esm.js +378 -390
- package/dist/inline-edit.cjs.js +11 -11
- package/dist/inline-edit.esm.js +32 -36
- package/dist/input.cjs.js +17 -17
- package/dist/input.esm.js +50 -63
- package/dist/label.cjs.js +2 -2
- package/dist/label.esm.js +8 -17
- package/dist/layout.cjs.js +2 -2
- package/dist/layout.esm.js +20 -26
- package/dist/listbox-B6QgECax.js +46 -0
- package/dist/listbox-DJamVeFj.mjs +200 -0
- package/dist/listbox.cjs.js +1 -1
- package/dist/listbox.esm.js +2 -4
- package/dist/marquee.cjs.js +5 -5
- package/dist/marquee.esm.js +33 -50
- package/dist/masonry-grid.cjs.js +1 -1
- package/dist/masonry-grid.esm.js +5 -9
- package/dist/menu.cjs.js +3 -3
- package/dist/menu.esm.js +106 -126
- package/dist/menubar.cjs.js +5 -5
- package/dist/menubar.esm.js +118 -164
- package/dist/meter.cjs.js +2 -2
- package/dist/meter.esm.js +4 -4
- package/dist/multi-select.cjs.js +4 -4
- package/dist/multi-select.esm.js +120 -140
- package/dist/navigation-menu.cjs.js +4 -4
- package/dist/navigation-menu.esm.js +44 -55
- package/dist/number-field.cjs.js +2 -2
- package/dist/number-field.esm.js +73 -98
- package/dist/number-ticker.cjs.js +3 -3
- package/dist/number-ticker.esm.js +22 -43
- package/dist/odometer.cjs.js +1 -1
- package/dist/odometer.esm.js +5 -9
- package/dist/orbiter.cjs.js +13 -13
- package/dist/orbiter.esm.js +79 -90
- package/dist/{overlayManager-5bbd4dc3.mjs → overlayManager-BJjU1VA8.mjs} +4 -5
- package/dist/{overlayManager-0eda4e08.js → overlayManager-CSy3fJmJ.js} +1 -1
- package/dist/pagination.cjs.js +2 -2
- package/dist/pagination.esm.js +14 -18
- package/dist/{panel-group-a376cc5e.mjs → panel-group-8sVNnGxg.mjs} +24 -46
- package/dist/panel-group-CaD0_KQf.js +36 -0
- package/dist/panel-group.cjs.js +1 -1
- package/dist/panel-group.esm.js +2 -5
- package/dist/panel.cjs.js +4 -4
- package/dist/panel.esm.js +8 -10
- package/dist/password-field.cjs.js +9 -9
- package/dist/password-field.esm.js +62 -82
- package/dist/pin-input.cjs.js +3 -3
- package/dist/pin-input.esm.js +33 -39
- package/dist/placement-grid.cjs.js +4 -4
- package/dist/placement-grid.esm.js +108 -131
- package/dist/plugin-panel.cjs.js +7 -7
- package/dist/plugin-panel.esm.js +13 -15
- package/dist/popover.cjs.js +2 -2
- package/dist/popover.esm.js +21 -31
- package/dist/portal-DgpQ3Jo1.js +1 -0
- package/dist/{portal-fe73e5cc.mjs → portal-bR42gHvG.mjs} +43 -48
- package/dist/portal.cjs.js +2 -2
- package/dist/portal.esm.js +10 -19
- package/dist/{positioner-e9770c66.mjs → positioner-D0VGxtYU.mjs} +189 -209
- package/dist/positioner-D_fqyx_j.js +1 -0
- package/dist/positioner.cjs.js +2 -2
- package/dist/positioner.esm.js +11 -18
- package/dist/presence.cjs.js +1 -1
- package/dist/presence.esm.js +7 -13
- package/dist/progress.cjs.js +1 -1
- package/dist/progress.esm.js +5 -9
- package/dist/quick-actions.cjs.js +6 -6
- package/dist/quick-actions.esm.js +52 -62
- package/dist/radio-group.cjs.js +13 -13
- package/dist/radio-group.esm.js +39 -51
- package/dist/radio.cjs.js +1 -1
- package/dist/radio.esm.js +5 -9
- package/dist/rating.cjs.js +1 -1
- package/dist/rating.esm.js +12 -23
- package/dist/{roving-focus-group-4350c9a7.mjs → roving-focus-group-Dbm1Jko_.mjs} +3 -6
- package/dist/roving-focus-group.cjs.js +1 -1
- package/dist/roving-focus-group.esm.js +3 -5
- package/dist/runtime-CTaOSmBj.js +1 -0
- package/dist/{runtime-161f68a2.mjs → runtime-D1gFh1fS.mjs} +338 -366
- package/dist/runtime.cjs.js +1 -1
- package/dist/runtime.esm.js +6 -6
- package/dist/scroll-area.cjs.js +3 -3
- package/dist/scroll-area.esm.js +38 -46
- package/dist/{scroll-lock-31da444f.mjs → scroll-lock-LfqXXqsu.mjs} +5 -9
- package/dist/section.cjs.js +1 -1
- package/dist/section.esm.js +1 -1
- package/dist/select.cjs.js +7 -7
- package/dist/select.esm.js +67 -97
- package/dist/selection-popup.cjs.js +1 -1
- package/dist/selection-popup.esm.js +8 -15
- package/dist/separator.cjs.js +1 -1
- package/dist/separator.esm.js +1 -1
- package/dist/sidebar.cjs.js +18 -18
- package/dist/sidebar.esm.js +117 -139
- package/dist/skeleton.cjs.js +11 -11
- package/dist/skeleton.esm.js +27 -24
- package/dist/slider.cjs.js +1 -1
- package/dist/slider.esm.js +6 -11
- package/dist/slot.cjs.js +4 -4
- package/dist/slot.esm.js +16 -19
- package/dist/sortable.cjs.js +45 -45
- package/dist/sortable.esm.js +421 -524
- package/dist/spinning-text.cjs.js +12 -12
- package/dist/spinning-text.esm.js +80 -92
- package/dist/split-button.cjs.js +4 -4
- package/dist/split-button.esm.js +77 -62
- package/dist/splitter.cjs.js +1 -1
- package/dist/splitter.esm.js +1 -1
- package/dist/stepper.cjs.js +8 -8
- package/dist/stepper.esm.js +32 -52
- package/dist/switch.cjs.js +7 -7
- package/dist/switch.esm.js +23 -31
- package/dist/table.cjs.js +2 -2
- package/dist/table.esm.js +46 -56
- package/dist/tabs.cjs.js +3 -3
- package/dist/tabs.esm.js +35 -55
- package/dist/tags-input.cjs.js +4 -4
- package/dist/tags-input.esm.js +45 -62
- package/dist/textarea.cjs.js +6 -6
- package/dist/textarea.esm.js +32 -41
- package/dist/time-field.cjs.js +4 -4
- package/dist/time-field.esm.js +70 -84
- package/dist/time-picker.cjs.js +22 -22
- package/dist/time-picker.esm.js +88 -110
- package/dist/timeline.cjs.js +1 -1
- package/dist/timeline.esm.js +3 -5
- package/dist/toast.cjs.js +2 -2
- package/dist/toast.esm.js +33 -47
- package/dist/toggle-group.cjs.js +6 -6
- package/dist/toggle-group.esm.js +85 -105
- package/dist/toggle.cjs.js +1 -1
- package/dist/toggle.esm.js +3 -5
- package/dist/toolbar.cjs.js +1 -1
- package/dist/toolbar.esm.js +13 -24
- package/dist/tooltip.cjs.js +2 -2
- package/dist/tooltip.esm.js +31 -42
- package/dist/transfer-list.cjs.js +19 -19
- package/dist/transfer-list.esm.js +98 -111
- package/dist/{tree-dcd74a4a.mjs → tree-B3kE8ESs.mjs} +55 -62
- package/dist/tree-Dx_kv_ih.js +39 -0
- package/dist/tree-item.cjs.js +2 -2
- package/dist/tree-item.esm.js +2 -3
- package/dist/tree.cjs.js +1 -1
- package/dist/tree.esm.js +2 -5
- package/dist/ui-button-Q0GNNWKC.mjs +665 -0
- package/dist/ui-button-rXQOS9QJ.js +521 -0
- package/dist/{icon-9e9da03b.js → ui-icon-BzVNC_lr.js} +4 -4
- package/dist/{icon-e2a85cc1.mjs → ui-icon-YI6lyuqU.mjs} +58 -65
- package/dist/visually-hidden.cjs.js +1 -1
- package/dist/visually-hidden.esm.js +1 -1
- package/dist/wizard.cjs.js +14 -14
- package/dist/wizard.esm.js +85 -105
- package/package.json +2 -2
- package/dist/date-time-utils-66480de4.js +0 -1
- package/dist/date-time-utils-a2c7af25.mjs +0 -307
- package/dist/dismissable-layer-193e3bed.js +0 -1
- package/dist/focus-scope-2b12b4e7.js +0 -1
- package/dist/listbox-308789a0.mjs +0 -210
- package/dist/listbox-ef2f708e.js +0 -46
- package/dist/panel-group-40254cdd.js +0 -36
- package/dist/portal-c69756c0.js +0 -1
- package/dist/positioner-33529bb8.js +0 -1
- package/dist/runtime-3f13807b.js +0 -1
- package/dist/tree-0a7a8d05.js +0 -39
- /package/dist/{collection-a2969ad2.js → collection-qv8A8rq4.js} +0 -0
- /package/dist/{menu-item-styles-27fdbac4.mjs → menu-item-styles-CZiPwPwl.mjs} +0 -0
- /package/dist/{menu-item-styles-83ad1e22.js → menu-item-styles-CbNUEwP2.js} +0 -0
- /package/dist/{roving-focus-group-5c059bf9.js → roving-focus-group-BdJ_4Njm.js} +0 -0
- /package/dist/{scroll-lock-d7b0df21.js → scroll-lock-BX6e3Ced.js} +0 -0
package/dist/sortable.esm.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { E as ee } from "./ElementBase-
|
|
1
|
+
import { E as ee } from "./ElementBase-YlTLMsGk.mjs";
|
|
2
2
|
const te = 1, re = 44, ie = 72, se = `
|
|
3
3
|
:host {
|
|
4
4
|
--ui-sortable-accent: var(--ui-color-primary, #2563eb);
|
|
@@ -722,32 +722,31 @@ const te = 1, re = 44, ie = 72, se = `
|
|
|
722
722
|
}
|
|
723
723
|
}
|
|
724
724
|
`;
|
|
725
|
-
function V(
|
|
726
|
-
if (!
|
|
727
|
-
return [];
|
|
725
|
+
function V(l) {
|
|
726
|
+
if (!l) return [];
|
|
728
727
|
try {
|
|
729
|
-
const e = JSON.parse(
|
|
728
|
+
const e = JSON.parse(l);
|
|
730
729
|
return Array.isArray(e) ? e : [];
|
|
731
730
|
} catch {
|
|
732
731
|
return [];
|
|
733
732
|
}
|
|
734
733
|
}
|
|
735
|
-
function I(
|
|
736
|
-
return
|
|
734
|
+
function I(l) {
|
|
735
|
+
return l.replace(/&/g, "&").replace(/</g, "<").replace(/>/g, ">").replace(/"/g, """).replace(/'/g, "'");
|
|
737
736
|
}
|
|
738
|
-
function
|
|
739
|
-
return `${
|
|
737
|
+
function D(l, e) {
|
|
738
|
+
return `${l}::${e ?? "__root__"}`;
|
|
740
739
|
}
|
|
741
|
-
function
|
|
742
|
-
return
|
|
740
|
+
function j(l) {
|
|
741
|
+
return l ? [l.listId, l.parentId ?? "", l.beforeId ?? "", l.mode].join("::") : "";
|
|
743
742
|
}
|
|
744
|
-
function B(
|
|
745
|
-
return
|
|
743
|
+
function B(l, e) {
|
|
744
|
+
return j(l) === j(e);
|
|
746
745
|
}
|
|
747
|
-
function
|
|
748
|
-
if (!
|
|
746
|
+
function oe(l) {
|
|
747
|
+
if (!l || l === "none")
|
|
749
748
|
return { x: 1, y: 1 };
|
|
750
|
-
const e =
|
|
749
|
+
const e = l.match(/^matrix3d\((.+)\)$/);
|
|
751
750
|
if (e) {
|
|
752
751
|
const t = e[1].split(",").map((i) => Number.parseFloat(i.trim()));
|
|
753
752
|
if (t.length === 16 && t.every((i) => Number.isFinite(i)))
|
|
@@ -756,84 +755,84 @@ function ne(u) {
|
|
|
756
755
|
y: t[5] || 1
|
|
757
756
|
};
|
|
758
757
|
}
|
|
759
|
-
const r =
|
|
758
|
+
const r = l.match(/^matrix\((.+)\)$/);
|
|
760
759
|
if (r) {
|
|
761
760
|
const t = r[1].split(",").map((i) => Number.parseFloat(i.trim()));
|
|
762
761
|
if (t.length === 6 && t.every((i) => Number.isFinite(i))) {
|
|
763
|
-
const [i, s,
|
|
762
|
+
const [i, s, a, n] = t;
|
|
764
763
|
return {
|
|
765
764
|
x: Math.sqrt(i * i + s * s) || 1,
|
|
766
|
-
y: Math.sqrt(
|
|
765
|
+
y: Math.sqrt(a * a + n * n) || 1
|
|
767
766
|
};
|
|
768
767
|
}
|
|
769
768
|
}
|
|
770
769
|
return { x: 1, y: 1 };
|
|
771
770
|
}
|
|
772
|
-
function
|
|
773
|
-
return
|
|
771
|
+
function ne(l) {
|
|
772
|
+
return l === "item" ? "item" : "handle";
|
|
774
773
|
}
|
|
775
|
-
function
|
|
776
|
-
return { ...
|
|
774
|
+
function A(l) {
|
|
775
|
+
return { ...l };
|
|
777
776
|
}
|
|
778
|
-
function ae(
|
|
779
|
-
const
|
|
780
|
-
const
|
|
781
|
-
!
|
|
777
|
+
function ae(l, e, r, t, i, s) {
|
|
778
|
+
const a = P(l), n = $(l), d = /* @__PURE__ */ new Set(), o = [], u = (g) => {
|
|
779
|
+
const S = a.get(g);
|
|
780
|
+
!S || d.has(g) || (d.add(g), o.push(g), (n.get(D(S.listId, g)) || []).forEach(u));
|
|
782
781
|
};
|
|
783
|
-
t.forEach(
|
|
784
|
-
const
|
|
785
|
-
i &&
|
|
786
|
-
v.set(
|
|
787
|
-
}), f.forEach((
|
|
788
|
-
const
|
|
789
|
-
|
|
782
|
+
t.forEach(u);
|
|
783
|
+
const p = l.map(A), m = p.filter((g) => d.has(g.id)), _ = i ? p.map(A) : p.filter((g) => !d.has(g.id)), f = i ? m.map((g) => s(g, o)) : m.map(A), v = /* @__PURE__ */ new Map(), b = /* @__PURE__ */ new Map();
|
|
784
|
+
i && m.forEach((g, S) => {
|
|
785
|
+
v.set(g.id, f[S].id), b.set(f[S].id, g.id);
|
|
786
|
+
}), f.forEach((g) => {
|
|
787
|
+
const S = i ? b.get(g.id) : g.id, T = S ? a.get(S) : null;
|
|
788
|
+
T && (i && (g.parentId = T.parentId && v.has(T.parentId) && v.get(T.parentId) || null), g.listId = r.listId);
|
|
790
789
|
});
|
|
791
|
-
const y = t.map((
|
|
792
|
-
|
|
793
|
-
const [,
|
|
794
|
-
(
|
|
790
|
+
const y = t.map((g) => v.get(g) || g), x = [..._, ...f], z = $(_), k = D(r.listId, r.parentId), h = [...z.get(k) || []], E = r.beforeId ? h.indexOf(r.beforeId) : h.length, H = E >= 0 ? E : h.length;
|
|
791
|
+
h.splice(H, 0, ...y), z.set(k, h), $(f).forEach((g, S) => {
|
|
792
|
+
const [, T] = S.split("::");
|
|
793
|
+
(T || "") !== "__root__" && z.set(S, [...g]);
|
|
795
794
|
});
|
|
796
|
-
const
|
|
797
|
-
y.forEach((
|
|
798
|
-
const
|
|
799
|
-
|
|
795
|
+
const F = P(x);
|
|
796
|
+
y.forEach((g) => {
|
|
797
|
+
const S = F.get(g);
|
|
798
|
+
S && (S.parentId = r.parentId, S.listId = r.listId);
|
|
800
799
|
});
|
|
801
|
-
const
|
|
802
|
-
(
|
|
803
|
-
const
|
|
804
|
-
!
|
|
800
|
+
const M = [], O = /* @__PURE__ */ new Set(), q = (g, S) => {
|
|
801
|
+
(z.get(D(g, S)) || []).forEach((R, K) => {
|
|
802
|
+
const c = F.get(R);
|
|
803
|
+
!c || O.has(R) || (O.add(R), c.listId = g, c.parentId = S, c.order = K, M.push(c), q(g, R));
|
|
805
804
|
});
|
|
806
805
|
};
|
|
807
|
-
return e.forEach((
|
|
808
|
-
|
|
806
|
+
return e.forEach((g) => q(g.id, null)), x.forEach((g) => {
|
|
807
|
+
O.has(g.id) || (g.parentId = null, M.push(g));
|
|
809
808
|
}), {
|
|
810
|
-
items:
|
|
809
|
+
items: M.map(A),
|
|
811
810
|
insertedRootIds: y
|
|
812
811
|
};
|
|
813
812
|
}
|
|
814
|
-
function
|
|
813
|
+
function $(l) {
|
|
815
814
|
const e = /* @__PURE__ */ new Map();
|
|
816
|
-
return
|
|
817
|
-
const t =
|
|
815
|
+
return l.forEach((r) => {
|
|
816
|
+
const t = D(r.listId, r.parentId), i = e.get(t);
|
|
818
817
|
i ? i.push(r.id) : e.set(t, [r.id]);
|
|
819
818
|
}), e;
|
|
820
819
|
}
|
|
821
|
-
function
|
|
822
|
-
return new Map(
|
|
820
|
+
function P(l) {
|
|
821
|
+
return new Map(l.map((e) => [e.id, e]));
|
|
823
822
|
}
|
|
824
|
-
function
|
|
823
|
+
function X(l) {
|
|
825
824
|
const e = /* @__PURE__ */ new Set(), r = [];
|
|
826
|
-
return
|
|
827
|
-
const s = typeof
|
|
825
|
+
return l.forEach((t, i) => {
|
|
826
|
+
const s = typeof t?.id == "string" && t.id.trim() ? t.id.trim() : `list-${i + 1}`;
|
|
828
827
|
e.has(s) || (e.add(s), r.push({
|
|
829
828
|
id: s,
|
|
830
|
-
label: typeof
|
|
831
|
-
description: typeof
|
|
832
|
-
emptyLabel: typeof
|
|
833
|
-
orientation:
|
|
834
|
-
disabled: !!
|
|
835
|
-
cloneOnDrag: !!
|
|
836
|
-
accepts: Array.isArray(t
|
|
829
|
+
label: typeof t?.label == "string" && t.label.trim() ? t.label.trim() : `List ${i + 1}`,
|
|
830
|
+
description: typeof t?.description == "string" ? t.description : "",
|
|
831
|
+
emptyLabel: typeof t?.emptyLabel == "string" && t.emptyLabel.trim() ? t.emptyLabel.trim() : "Drop items here.",
|
|
832
|
+
orientation: t?.orientation === "horizontal" ? "horizontal" : "vertical",
|
|
833
|
+
disabled: !!t?.disabled,
|
|
834
|
+
cloneOnDrag: !!t?.cloneOnDrag,
|
|
835
|
+
accepts: Array.isArray(t?.accepts) ? t.accepts.filter((a) => typeof a == "string" && a.trim().length > 0) : void 0
|
|
837
836
|
}));
|
|
838
837
|
}), r.length ? r : [{
|
|
839
838
|
id: "default",
|
|
@@ -845,49 +844,47 @@ function Y(u) {
|
|
|
845
844
|
cloneOnDrag: !1
|
|
846
845
|
}];
|
|
847
846
|
}
|
|
848
|
-
function
|
|
849
|
-
const r = new Set(
|
|
850
|
-
e.forEach((
|
|
851
|
-
const
|
|
852
|
-
if (!
|
|
853
|
-
|
|
854
|
-
const m = typeof (n == null ? void 0 : n.listId) == "string" && r.has(n.listId) ? n.listId : u[0].id;
|
|
847
|
+
function Y(l, e) {
|
|
848
|
+
const r = new Set(l.map((o) => o.id)), t = [];
|
|
849
|
+
e.forEach((o, u) => {
|
|
850
|
+
const p = typeof o?.id == "string" && o.id.trim() ? o.id.trim() : "", m = typeof o?.label == "string" && o.label.trim() ? o.label.trim() : "";
|
|
851
|
+
if (!p || !m) return;
|
|
852
|
+
const _ = typeof o?.listId == "string" && r.has(o.listId) ? o.listId : l[0].id;
|
|
855
853
|
t.push({
|
|
856
|
-
id:
|
|
857
|
-
label:
|
|
858
|
-
listId:
|
|
859
|
-
parentId: typeof
|
|
860
|
-
description: typeof
|
|
861
|
-
order: Number.isFinite(
|
|
862
|
-
disabled: !!
|
|
863
|
-
dragDisabled: !!
|
|
864
|
-
cloneOnDrag: !!
|
|
865
|
-
hidden: !!
|
|
854
|
+
id: p,
|
|
855
|
+
label: m,
|
|
856
|
+
listId: _,
|
|
857
|
+
parentId: typeof o?.parentId == "string" && o.parentId.trim() ? o.parentId.trim() : null,
|
|
858
|
+
description: typeof o?.description == "string" ? o.description : "",
|
|
859
|
+
order: Number.isFinite(o?.order) ? Number(o.order) : u,
|
|
860
|
+
disabled: !!o?.disabled,
|
|
861
|
+
dragDisabled: !!o?.dragDisabled,
|
|
862
|
+
cloneOnDrag: !!o?.cloneOnDrag,
|
|
863
|
+
hidden: !!o?.hidden
|
|
866
864
|
});
|
|
867
865
|
});
|
|
868
|
-
const i = new Map(t.map((
|
|
869
|
-
t.forEach((
|
|
870
|
-
if (!
|
|
871
|
-
|
|
872
|
-
|
|
873
|
-
(!d || d.id === n.id || d.listId !== n.listId) && (n.parentId = null);
|
|
866
|
+
const i = new Map(t.map((o) => [o.id, o]));
|
|
867
|
+
t.forEach((o) => {
|
|
868
|
+
if (!o.parentId) return;
|
|
869
|
+
const u = i.get(o.parentId);
|
|
870
|
+
(!u || u.id === o.id || u.listId !== o.listId) && (o.parentId = null);
|
|
874
871
|
});
|
|
875
872
|
const s = /* @__PURE__ */ new Map();
|
|
876
|
-
t.forEach((
|
|
877
|
-
const
|
|
878
|
-
|
|
879
|
-
}), s.forEach((
|
|
880
|
-
const
|
|
881
|
-
(s.get(
|
|
882
|
-
|
|
873
|
+
t.forEach((o) => {
|
|
874
|
+
const u = D(o.listId, o.parentId), p = s.get(u);
|
|
875
|
+
p ? p.push(o) : s.set(u, [o]);
|
|
876
|
+
}), s.forEach((o) => o.sort((u, p) => u.order - p.order || u.label.localeCompare(p.label)));
|
|
877
|
+
const a = [], n = /* @__PURE__ */ new Set(), d = (o, u) => {
|
|
878
|
+
(s.get(D(o, u)) || []).forEach((m, _) => {
|
|
879
|
+
n.has(m.id) || (n.add(m.id), m.order = _, a.push(m), d(o, m.id));
|
|
883
880
|
});
|
|
884
881
|
};
|
|
885
|
-
return
|
|
886
|
-
|
|
887
|
-
}),
|
|
882
|
+
return l.forEach((o) => d(o.id, null)), t.forEach((o) => {
|
|
883
|
+
n.has(o.id) || (o.parentId = null, a.push(o));
|
|
884
|
+
}), a.map(A);
|
|
888
885
|
}
|
|
889
|
-
function de(
|
|
890
|
-
return JSON.stringify(
|
|
886
|
+
function de(l) {
|
|
887
|
+
return JSON.stringify(l.map((e) => ({
|
|
891
888
|
id: e.id,
|
|
892
889
|
label: e.label,
|
|
893
890
|
listId: e.listId,
|
|
@@ -900,8 +897,8 @@ function de(u) {
|
|
|
900
897
|
hidden: e.hidden
|
|
901
898
|
})));
|
|
902
899
|
}
|
|
903
|
-
function le(
|
|
904
|
-
return JSON.stringify(
|
|
900
|
+
function le(l) {
|
|
901
|
+
return JSON.stringify(l.map((e) => ({
|
|
905
902
|
id: e.id,
|
|
906
903
|
label: e.label,
|
|
907
904
|
description: e.description,
|
|
@@ -912,12 +909,12 @@ function le(u) {
|
|
|
912
909
|
accepts: e.accepts
|
|
913
910
|
})));
|
|
914
911
|
}
|
|
915
|
-
function
|
|
916
|
-
return JSON.stringify(
|
|
912
|
+
function U(l) {
|
|
913
|
+
return JSON.stringify(l);
|
|
917
914
|
}
|
|
918
|
-
function J(
|
|
919
|
-
const e = /* @__PURE__ */ new Map(), r =
|
|
920
|
-
const i =
|
|
915
|
+
function J(l) {
|
|
916
|
+
const e = /* @__PURE__ */ new Map(), r = l.map((t) => {
|
|
917
|
+
const i = D(t.listId, t.parentId), s = e.get(i) ?? 0;
|
|
921
918
|
return e.set(i, s + 1), {
|
|
922
919
|
id: t.id,
|
|
923
920
|
listId: t.listId,
|
|
@@ -930,36 +927,35 @@ function J(u) {
|
|
|
930
927
|
records: r
|
|
931
928
|
};
|
|
932
929
|
}
|
|
933
|
-
function W(
|
|
934
|
-
return e ? `${
|
|
930
|
+
function W(l, e) {
|
|
931
|
+
return e ? `${l.label} ${l.description}`.toLowerCase().includes(e.toLowerCase()) : !0;
|
|
935
932
|
}
|
|
936
|
-
function Q(
|
|
937
|
-
const s =
|
|
938
|
-
const
|
|
939
|
-
return i === "label" &&
|
|
933
|
+
function Q(l, e, r, t, i) {
|
|
934
|
+
const s = P(l), a = $(l), n = /* @__PURE__ */ new Map(), d = (p, m) => {
|
|
935
|
+
const _ = [...a.get(D(p, m)) || []];
|
|
936
|
+
return i === "label" && _.sort((f, v) => {
|
|
940
937
|
const b = s.get(f), y = s.get(v);
|
|
941
938
|
return !b || !y ? 0 : b.label.localeCompare(y.label);
|
|
942
|
-
}),
|
|
943
|
-
},
|
|
939
|
+
}), _;
|
|
940
|
+
}, o = (p, m, _) => {
|
|
944
941
|
const f = [];
|
|
945
|
-
return
|
|
942
|
+
return d(p, m).forEach((v) => {
|
|
946
943
|
const b = s.get(v);
|
|
947
|
-
if (!b || b.hidden)
|
|
948
|
-
|
|
949
|
-
const y = n(c, b.id);
|
|
944
|
+
if (!b || b.hidden) return;
|
|
945
|
+
const y = o(p, b.id);
|
|
950
946
|
!W(b, t) && y.length === 0 || (f.push({
|
|
951
947
|
id: b.id,
|
|
952
948
|
disabled: b.disabled
|
|
953
949
|
}), y.length && f.push(...y));
|
|
954
950
|
}), f;
|
|
955
951
|
};
|
|
956
|
-
return Array.from(new Set(
|
|
957
|
-
|
|
958
|
-
}),
|
|
952
|
+
return Array.from(new Set(l.map((p) => p.listId))).forEach((p) => {
|
|
953
|
+
n.set(p, o(p, null));
|
|
954
|
+
}), n;
|
|
959
955
|
}
|
|
960
956
|
class ce extends ee {
|
|
961
957
|
constructor() {
|
|
962
|
-
super(), this._lists =
|
|
958
|
+
super(), this._lists = X([]), 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
959
|
}
|
|
964
960
|
static get observedAttributes() {
|
|
965
961
|
return [
|
|
@@ -998,12 +994,10 @@ class ce extends ee {
|
|
|
998
994
|
}
|
|
999
995
|
}
|
|
1000
996
|
connectedCallback() {
|
|
1001
|
-
|
|
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);
|
|
997
|
+
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), this.ownerDocument?.addEventListener("keydown", this._onDocumentKeyDown, !0), this.ownerDocument?.addEventListener("pointermove", this._onPointerMove, !0), this.ownerDocument?.addEventListener("pointerup", this._onPointerUp, !0), this.ownerDocument?.addEventListener("pointercancel", this._onPointerCancel, !0);
|
|
1003
998
|
}
|
|
1004
999
|
disconnectedCallback() {
|
|
1005
|
-
|
|
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();
|
|
1000
|
+
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), this.ownerDocument?.removeEventListener("keydown", this._onDocumentKeyDown, !0), this.ownerDocument?.removeEventListener("pointermove", this._onPointerMove, !0), this.ownerDocument?.removeEventListener("pointerup", this._onPointerUp, !0), this.ownerDocument?.removeEventListener("pointercancel", this._onPointerCancel, !0), this._removeDragPreviewOverlay(), this._removeDragImage(), super.disconnectedCallback();
|
|
1007
1001
|
}
|
|
1008
1002
|
get lists() {
|
|
1009
1003
|
return this._lists.map((e) => ({ ...e }));
|
|
@@ -1061,52 +1055,50 @@ class ce extends ee {
|
|
|
1061
1055
|
return J(this._items);
|
|
1062
1056
|
}
|
|
1063
1057
|
render() {
|
|
1064
|
-
var _, R;
|
|
1065
1058
|
this._syncStateFromAttributes();
|
|
1066
|
-
const e = this._measureItemShellRects(), r = new Set(this._draggingIds()), t = new Set(this._selection), s = !!
|
|
1059
|
+
const e = this._measureItemShellRects(), r = new Set(this._draggingIds()), t = new Set(this._selection), s = !!this._dragState?.keyboard ? this._projectedMoveResult() : null, a = s?.items || this._items, n = new Set(s?.insertedRootIds || []), d = !!this._dragState && !this._dragState.keyboard && !!this._dragState.dropTarget, o = Q(a, t, r, this.filterQuery, this.sort), u = this._resolvedFocusedId(o), p = this._isDragLocked(), m = this._selection.length, _ = this.getAttribute("allow-nesting") !== "false", f = this.getAttribute("drop-indicator-visibility") === "always" ? "always" : "active", v = this._dropzoneStyle(), b = this.getAttribute("show-selection-badge") !== "false", y = this._dragHandleMode(), x = this._usesCustomHandleSelector(), z = p ? 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." : this._dragState?.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." : x ? "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.", k = `
|
|
1067
1060
|
<style>${se}</style>
|
|
1068
1061
|
<div
|
|
1069
1062
|
class="root"
|
|
1070
1063
|
part="root"
|
|
1071
|
-
data-drag-locked="${
|
|
1072
|
-
data-drag-preview="${
|
|
1064
|
+
data-drag-locked="${p}"
|
|
1065
|
+
data-drag-preview="${n.size || d ? "true" : "false"}"
|
|
1073
1066
|
data-drop-indicator-visibility="${f}"
|
|
1074
1067
|
data-dropzone-style="${v}"
|
|
1075
1068
|
>
|
|
1076
1069
|
<div class="toolbar" part="toolbar">
|
|
1077
|
-
<div class="helper">${I(
|
|
1070
|
+
<div class="helper">${I(z)}</div>
|
|
1078
1071
|
<div class="helper selection-summary">
|
|
1079
|
-
<span class="selection-pill" part="selection-count">${
|
|
1080
|
-
<span class="selection-text">${
|
|
1072
|
+
<span class="selection-pill" part="selection-count">${m}</span>
|
|
1073
|
+
<span class="selection-text">${m === 1 ? "item selected" : "items selected"}</span>
|
|
1081
1074
|
</div>
|
|
1082
1075
|
</div>
|
|
1083
1076
|
<div class="lists" part="lists">
|
|
1084
|
-
${this._lists.map((
|
|
1085
|
-
|
|
1086
|
-
const C = n.get(S.id) || [], T = C.length ? this._renderListTree(o, S, d, r, m, a, b) : "", $ = 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(", ")}` : "";
|
|
1077
|
+
${this._lists.map((h) => {
|
|
1078
|
+
const E = o.get(h.id) || [], H = E.length ? this._renderListTree(a, h, u, r, _, n, b) : "", L = h.disabled ? "This list is read-only." : h.cloneOnDrag ? "Dragging from this list creates a copy." : h.accepts?.length ? `Accepts drops from: ${h.accepts.join(", ")}` : "";
|
|
1087
1079
|
return `
|
|
1088
1080
|
<section
|
|
1089
1081
|
class="list"
|
|
1090
1082
|
part="list"
|
|
1091
|
-
data-list-id="${I(
|
|
1092
|
-
data-orientation="${
|
|
1093
|
-
data-disabled="${
|
|
1094
|
-
aria-label="${I(
|
|
1083
|
+
data-list-id="${I(h.id)}"
|
|
1084
|
+
data-orientation="${h.orientation}"
|
|
1085
|
+
data-disabled="${h.disabled}"
|
|
1086
|
+
aria-label="${I(h.label)}"
|
|
1095
1087
|
>
|
|
1096
1088
|
<header class="list-header">
|
|
1097
|
-
<div class="list-custom-header" part="list-custom-header" data-list-header-target="${I(
|
|
1089
|
+
<div class="list-custom-header" part="list-custom-header" data-list-header-target="${I(h.id)}"></div>
|
|
1098
1090
|
<div class="list-default-header">
|
|
1099
1091
|
<div class="list-topline">
|
|
1100
|
-
<div class="list-label">${I(
|
|
1101
|
-
<span class="list-count">${
|
|
1092
|
+
<div class="list-label">${I(h.label)}</div>
|
|
1093
|
+
<span class="list-count">${E.length}</span>
|
|
1102
1094
|
</div>
|
|
1103
|
-
${
|
|
1104
|
-
${
|
|
1095
|
+
${h.description ? `<div class="list-description">${I(h.description)}</div>` : ""}
|
|
1096
|
+
${L ? `<div class="list-helper">${I(L)}</div>` : ""}
|
|
1105
1097
|
</div>
|
|
1106
1098
|
</header>
|
|
1107
1099
|
<div class="items" role="listbox" aria-multiselectable="true">
|
|
1108
|
-
${
|
|
1109
|
-
listId:
|
|
1100
|
+
${H || `<div class="list-custom-empty" part="list-custom-empty" data-list-empty-target="${I(h.id)}"></div><div class="empty">${I(h.emptyLabel)}</div>${this._renderDropzone({
|
|
1101
|
+
listId: h.id,
|
|
1110
1102
|
parentId: null,
|
|
1111
1103
|
beforeId: null,
|
|
1112
1104
|
mode: "before"
|
|
@@ -1119,56 +1111,49 @@ class ce extends ee {
|
|
|
1119
1111
|
<div class="sr-only" aria-live="polite" aria-atomic="true">${I(this._liveMessage)}</div>
|
|
1120
1112
|
</div>
|
|
1121
1113
|
`;
|
|
1122
|
-
this.setContent(
|
|
1114
|
+
this.setContent(k), queueMicrotask(() => {
|
|
1123
1115
|
this._restorePendingFocus(), this._applyCurrentDropTargetVisualState(), this._applyLiveMessage(), this._updatePointerDragPreview(), this._animateItemShellReflow(e);
|
|
1124
1116
|
});
|
|
1125
1117
|
}
|
|
1126
1118
|
_syncStateFromAttributes() {
|
|
1127
|
-
var i;
|
|
1128
1119
|
const e = this.getAttribute("lists");
|
|
1129
|
-
e !== this._lastListsAttr && (this._lastListsAttr = e, this._lists =
|
|
1120
|
+
e !== this._lastListsAttr && (this._lastListsAttr = e, this._lists = X(V(e)));
|
|
1130
1121
|
const r = this.getAttribute("items");
|
|
1131
1122
|
if (r !== this._lastItemsAttr) {
|
|
1132
|
-
this._lastItemsAttr = r, this._items =
|
|
1133
|
-
const
|
|
1134
|
-
|
|
1123
|
+
this._lastItemsAttr = r, this._items = Y(this._lists, V(r));
|
|
1124
|
+
const i = this.getAttribute("persist-key");
|
|
1125
|
+
i && this._hydratedPersistKey !== i && (this._items = this._restorePersistedItems(i, this._items), this._hydratedPersistKey = i);
|
|
1135
1126
|
}
|
|
1136
1127
|
const t = this.getAttribute("selection");
|
|
1137
|
-
t !== this._lastSelectionAttr && this._syncSelectionFromAttribute(t), this._focusedId || (this._focusedId =
|
|
1128
|
+
t !== this._lastSelectionAttr && this._syncSelectionFromAttribute(t), this._focusedId || (this._focusedId = this._items.find((i) => !i.hidden)?.id || null);
|
|
1138
1129
|
}
|
|
1139
1130
|
_restorePersistedItems(e, r) {
|
|
1140
1131
|
try {
|
|
1141
1132
|
const t = window.localStorage.getItem(e);
|
|
1142
|
-
if (!t)
|
|
1143
|
-
return r;
|
|
1133
|
+
if (!t) return r;
|
|
1144
1134
|
const i = JSON.parse(t);
|
|
1145
|
-
if (!i || typeof i != "object" || !Array.isArray(i.records))
|
|
1146
|
-
|
|
1147
|
-
|
|
1148
|
-
|
|
1149
|
-
|
|
1150
|
-
|
|
1151
|
-
|
|
1152
|
-
|
|
1153
|
-
|
|
1154
|
-
} : { ...a, order: l };
|
|
1135
|
+
if (!i || typeof i != "object" || !Array.isArray(i.records)) return r;
|
|
1136
|
+
const s = new Map(i.records.map((n) => [n.id, n])), a = r.map((n, d) => {
|
|
1137
|
+
const o = s.get(n.id);
|
|
1138
|
+
return o ? {
|
|
1139
|
+
...n,
|
|
1140
|
+
listId: this._lists.some((u) => u.id === o.listId) ? o.listId : n.listId,
|
|
1141
|
+
parentId: typeof o.parentId == "string" ? o.parentId : null,
|
|
1142
|
+
order: Number.isFinite(o.index) ? o.index : d
|
|
1143
|
+
} : { ...n, order: d };
|
|
1155
1144
|
});
|
|
1156
|
-
return
|
|
1145
|
+
return Y(this._lists, a);
|
|
1157
1146
|
} catch {
|
|
1158
1147
|
return r;
|
|
1159
1148
|
}
|
|
1160
1149
|
}
|
|
1161
1150
|
_resolvedFocusedId(e) {
|
|
1162
1151
|
const r = new Set(Array.from(e.values()).flat().map((i) => i.id));
|
|
1163
|
-
|
|
1164
|
-
return this._focusedId;
|
|
1165
|
-
const t = Array.from(e.values()).flat().find((i) => !i.disabled);
|
|
1166
|
-
return (t == null ? void 0 : t.id) || null;
|
|
1152
|
+
return this._focusedId && r.has(this._focusedId) ? this._focusedId : Array.from(e.values()).flat().find((i) => !i.disabled)?.id || null;
|
|
1167
1153
|
}
|
|
1168
1154
|
_restorePendingFocus() {
|
|
1169
1155
|
const e = this._pendingFocusId || this._focusedId;
|
|
1170
|
-
if (!e)
|
|
1171
|
-
return;
|
|
1156
|
+
if (!e) return;
|
|
1172
1157
|
const r = typeof CSS < "u" && typeof CSS.escape == "function" ? CSS.escape(e) : e.replace(/"/g, '\\"'), t = this.root.querySelector(`.item[data-id="${r}"]`);
|
|
1173
1158
|
t && (document.activeElement !== t && t.focus({ preventScroll: !0 }), this._pendingFocusId = null);
|
|
1174
1159
|
}
|
|
@@ -1186,33 +1171,27 @@ class ce extends ee {
|
|
|
1186
1171
|
return this.root.querySelector(`.item[data-id="${r}"]`);
|
|
1187
1172
|
}
|
|
1188
1173
|
_dragHandleMode() {
|
|
1189
|
-
return
|
|
1174
|
+
return ne(this.getAttribute("drag-handle-mode"));
|
|
1190
1175
|
}
|
|
1191
1176
|
_dropzoneStyle() {
|
|
1192
1177
|
return this.getAttribute("dropzone-style") === "container" ? "container" : "indicator";
|
|
1193
1178
|
}
|
|
1194
1179
|
_usesCustomHandleSelector() {
|
|
1195
|
-
|
|
1196
|
-
return !!((e = this.getAttribute("drag-handle-selector")) != null && e.trim());
|
|
1180
|
+
return !!this.getAttribute("drag-handle-selector")?.trim();
|
|
1197
1181
|
}
|
|
1198
1182
|
_dragActivatorFromPath(e) {
|
|
1199
|
-
var o;
|
|
1200
1183
|
const r = e.find((a) => a instanceof HTMLElement && !!a.getAttribute("data-drag-trigger"));
|
|
1201
|
-
if (!r)
|
|
1202
|
-
|
|
1203
|
-
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"));
|
|
1184
|
+
if (!r) return null;
|
|
1185
|
+
const t = r.getAttribute("data-drag-trigger"), i = t === "item" ? "item" : t === "custom" ? "custom" : "handle", s = r.getAttribute("data-id") || r.closest(".item[data-id]")?.getAttribute("data-id");
|
|
1204
1186
|
return s ? { element: r, id: s, kind: i } : null;
|
|
1205
1187
|
}
|
|
1206
1188
|
_setDropTargetVisualState(e, r) {
|
|
1207
|
-
|
|
1208
|
-
if (!e)
|
|
1209
|
-
return;
|
|
1189
|
+
if (!e) return;
|
|
1210
1190
|
const t = this._findDropzone(e);
|
|
1211
|
-
t && (t.setAttribute("data-active", r ? "true" : "false"), r ? this._syncDropzoneContainerSize(t, e) : this._clearDropzoneContainerSize(t)), e.mode === "inside" && e.parentId &&
|
|
1191
|
+
t && (t.setAttribute("data-active", r ? "true" : "false"), r ? this._syncDropzoneContainerSize(t, e) : this._clearDropzoneContainerSize(t)), e.mode === "inside" && e.parentId && this._findItemElement(e.parentId)?.setAttribute("data-drop-inside-active", r ? "true" : "false");
|
|
1212
1192
|
}
|
|
1213
1193
|
_applyCurrentDropTargetVisualState(e) {
|
|
1214
|
-
|
|
1215
|
-
this._setDropTargetVisualState(e ?? null, !1), this._setDropTargetVisualState(((r = this._dragState) == null ? void 0 : r.dropTarget) ?? null, !0);
|
|
1194
|
+
this._setDropTargetVisualState(e ?? null, !1), this._setDropTargetVisualState(this._dragState?.dropTarget ?? null, !0);
|
|
1216
1195
|
}
|
|
1217
1196
|
_applyLiveMessage() {
|
|
1218
1197
|
const e = this.root.querySelector(".sr-only[aria-live]");
|
|
@@ -1222,7 +1201,7 @@ class ce extends ee {
|
|
|
1222
1201
|
return !!this.root.querySelector(".root") && !this._dragState;
|
|
1223
1202
|
}
|
|
1224
1203
|
_applyInteractiveStateInPlace(e) {
|
|
1225
|
-
return this._canSyncInteractiveStateInPlace() ? (this._syncSelectionVisualState(), e
|
|
1204
|
+
return this._canSyncInteractiveStateInPlace() ? (this._syncSelectionVisualState(), e?.restoreFocus && this._restorePendingFocus(), this._applyLiveMessage(), !0) : !1;
|
|
1226
1205
|
}
|
|
1227
1206
|
_hasCustomItemRendering() {
|
|
1228
1207
|
return this.hasAttribute("custom-item-rendering");
|
|
@@ -1235,15 +1214,14 @@ class ce extends ee {
|
|
|
1235
1214
|
_syncSelectionVisualState() {
|
|
1236
1215
|
const e = new Set(this._selection), r = this.getAttribute("show-selection-badge") !== "false";
|
|
1237
1216
|
this.root.querySelectorAll(".item[data-id]").forEach((s) => {
|
|
1238
|
-
const
|
|
1239
|
-
if (!
|
|
1240
|
-
|
|
1241
|
-
|
|
1242
|
-
|
|
1243
|
-
|
|
1244
|
-
|
|
1245
|
-
|
|
1246
|
-
n.hidden = !d, n.textContent = d ? "Selected" : "";
|
|
1217
|
+
const a = s.getAttribute("data-id");
|
|
1218
|
+
if (!a) return;
|
|
1219
|
+
const n = e.has(a), d = this._focusedId === a;
|
|
1220
|
+
s.setAttribute("data-selected", n ? "true" : "false"), s.setAttribute("aria-selected", n ? "true" : "false"), s.setAttribute("data-focused", d ? "true" : "false"), s.setAttribute("tabindex", d ? "0" : "-1");
|
|
1221
|
+
const o = s.querySelector('[data-selection-badge="true"]');
|
|
1222
|
+
if (o) {
|
|
1223
|
+
const u = n && r;
|
|
1224
|
+
o.hidden = !u, o.textContent = u ? "Selected" : "";
|
|
1247
1225
|
}
|
|
1248
1226
|
});
|
|
1249
1227
|
const t = this.root.querySelector(".selection-pill");
|
|
@@ -1255,8 +1233,7 @@ class ce extends ee {
|
|
|
1255
1233
|
e.style.removeProperty("--ui-sortable-dropzone-match-block-size"), e.style.removeProperty("--ui-sortable-dropzone-match-inline-size");
|
|
1256
1234
|
}
|
|
1257
1235
|
_dropzoneReferenceElement(e, r) {
|
|
1258
|
-
if (e.mode === "inside" && e.parentId)
|
|
1259
|
-
return this._findItemElement(e.parentId);
|
|
1236
|
+
if (e.mode === "inside" && e.parentId) return this._findItemElement(e.parentId);
|
|
1260
1237
|
let t = r.nextElementSibling;
|
|
1261
1238
|
for (; t; ) {
|
|
1262
1239
|
if (t instanceof HTMLElement && t.classList.contains("item-shell"))
|
|
@@ -1269,33 +1246,28 @@ class ce extends ee {
|
|
|
1269
1246
|
return i.querySelector(".item[data-id]");
|
|
1270
1247
|
i = i.previousElementSibling;
|
|
1271
1248
|
}
|
|
1272
|
-
const s = this._escapeSelectorValue(e.listId),
|
|
1273
|
-
return
|
|
1249
|
+
const s = this._escapeSelectorValue(e.listId), a = this.root.querySelector(`.list[data-list-id="${s}"] .items`), n = a?.querySelector(".item[data-id]");
|
|
1250
|
+
return n || a || null;
|
|
1274
1251
|
}
|
|
1275
1252
|
_syncDropzoneContainerSize(e, r) {
|
|
1276
|
-
if (this._clearDropzoneContainerSize(e), this._dropzoneStyle() !== "container")
|
|
1277
|
-
return;
|
|
1253
|
+
if (this._clearDropzoneContainerSize(e), this._dropzoneStyle() !== "container") return;
|
|
1278
1254
|
const t = this._dropzoneReferenceElement(r, e);
|
|
1279
|
-
if (!t)
|
|
1280
|
-
return;
|
|
1255
|
+
if (!t) return;
|
|
1281
1256
|
const i = t.getBoundingClientRect();
|
|
1282
1257
|
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`);
|
|
1283
1258
|
}
|
|
1284
1259
|
_ensureDragPreviewOverlay() {
|
|
1285
|
-
if (this._dragPreviewOverlay && this._dragPreviewOverlay.isConnected)
|
|
1286
|
-
return this._dragPreviewOverlay;
|
|
1260
|
+
if (this._dragPreviewOverlay && this._dragPreviewOverlay.isConnected) return this._dragPreviewOverlay;
|
|
1287
1261
|
const e = document.createElement("div");
|
|
1288
1262
|
return e.className = "drag-preview-overlay", e.setAttribute("data-visible", "false"), this.root.appendChild(e), this._dragPreviewOverlay = e, e;
|
|
1289
1263
|
}
|
|
1290
1264
|
_clearPointerDragPreview() {
|
|
1291
|
-
|
|
1292
|
-
(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");
|
|
1265
|
+
this._dragPreviewOverlay?.setAttribute("data-visible", "false"), this._dragPreviewOverlay?.style.setProperty("left", "-9999px"), this._dragPreviewOverlay?.style.setProperty("top", "-9999px");
|
|
1293
1266
|
const e = this.root.querySelector(".root");
|
|
1294
|
-
e && !
|
|
1267
|
+
e && !this._dragState?.keyboard && e.setAttribute("data-drag-preview", "false");
|
|
1295
1268
|
}
|
|
1296
1269
|
_pointerPreviewContent() {
|
|
1297
|
-
if (!this._dragState || this._dragState.keyboard)
|
|
1298
|
-
return null;
|
|
1270
|
+
if (!this._dragState || this._dragState.keyboard) return null;
|
|
1299
1271
|
const e = this._dragState.movedRootIds[0], r = this._items.find((t) => t.id === e);
|
|
1300
1272
|
return r ? {
|
|
1301
1273
|
kicker: this._dragState.clone ? "Copy preview" : "Drop preview",
|
|
@@ -1304,12 +1276,10 @@ class ce extends ee {
|
|
|
1304
1276
|
} : null;
|
|
1305
1277
|
}
|
|
1306
1278
|
_pointerPreviewSize() {
|
|
1307
|
-
if (this.getAttribute("drag-preview-size") === "compact" || !this._dragState || this._dragState.keyboard)
|
|
1308
|
-
return null;
|
|
1279
|
+
if (this.getAttribute("drag-preview-size") === "compact" || !this._dragState || this._dragState.keyboard) return null;
|
|
1309
1280
|
const e = this._dragState.movedRootIds[0], r = e ? this._findItemElement(e) : null;
|
|
1310
|
-
if (!r)
|
|
1311
|
-
|
|
1312
|
-
const t = window.getComputedStyle(r), i = ne(t.transform);
|
|
1281
|
+
if (!r) return null;
|
|
1282
|
+
const t = window.getComputedStyle(r), i = oe(t.transform);
|
|
1313
1283
|
return {
|
|
1314
1284
|
width: r.offsetWidth * i.x,
|
|
1315
1285
|
height: r.offsetHeight * i.y
|
|
@@ -1325,34 +1295,34 @@ class ce extends ee {
|
|
|
1325
1295
|
this._clearPointerDragPreview();
|
|
1326
1296
|
return;
|
|
1327
1297
|
}
|
|
1328
|
-
const r = this.root.querySelector(".root"),
|
|
1298
|
+
const r = this.root.querySelector(".root"), i = this._dragPreviewOverlay?.getAttribute("data-visible") === "true", s = this._pointerPreviewSize();
|
|
1329
1299
|
if (!this._dragState.dropTarget) {
|
|
1330
1300
|
i && r && r.setAttribute("data-drag-preview", "true");
|
|
1331
1301
|
return;
|
|
1332
1302
|
}
|
|
1333
|
-
const
|
|
1334
|
-
if (!
|
|
1303
|
+
const a = this._findDropzone(this._dragState.dropTarget);
|
|
1304
|
+
if (!a) {
|
|
1335
1305
|
i && r && r.setAttribute("data-drag-preview", "true");
|
|
1336
1306
|
return;
|
|
1337
1307
|
}
|
|
1338
|
-
const
|
|
1339
|
-
|
|
1308
|
+
const n = this._ensureDragPreviewOverlay();
|
|
1309
|
+
n.innerHTML = `
|
|
1340
1310
|
<div class="placeholder-content">
|
|
1341
1311
|
<div class="placeholder-kicker">${I(e.kicker)}</div>
|
|
1342
1312
|
<div class="placeholder-title">${I(e.title)}</div>
|
|
1343
1313
|
<div class="placeholder-description">${I(e.description)}</div>
|
|
1344
1314
|
</div>
|
|
1345
1315
|
`;
|
|
1346
|
-
const
|
|
1347
|
-
r && r.setAttribute("data-drag-preview", "true"),
|
|
1348
|
-
const
|
|
1316
|
+
const d = a.getBoundingClientRect();
|
|
1317
|
+
r && r.setAttribute("data-drag-preview", "true"), n.style.setProperty("left", "-9999px"), n.style.setProperty("top", "-9999px"), s ? (n.style.setProperty("inline-size", `${s.width}px`), n.style.setProperty("block-size", `${s.height}px`)) : (n.style.removeProperty("inline-size"), n.style.removeProperty("block-size")), n.setAttribute("data-visible", "true");
|
|
1318
|
+
const o = n.getBoundingClientRect(), u = s?.width ?? o.width, p = s?.height ?? o.height, m = Math.max(16, Math.min(d.left, window.innerWidth - u - 16)), _ = Math.max(
|
|
1349
1319
|
16,
|
|
1350
1320
|
Math.min(
|
|
1351
|
-
|
|
1352
|
-
window.innerHeight -
|
|
1321
|
+
d.top + (d.height - p) / 2,
|
|
1322
|
+
window.innerHeight - p - 16
|
|
1353
1323
|
)
|
|
1354
1324
|
);
|
|
1355
|
-
|
|
1325
|
+
n.style.setProperty("left", `${Math.round(m)}px`), n.style.setProperty("top", `${Math.round(_)}px`);
|
|
1356
1326
|
}
|
|
1357
1327
|
_setDraggingVisualState(e, r) {
|
|
1358
1328
|
e.forEach((t) => {
|
|
@@ -1361,10 +1331,9 @@ class ce extends ee {
|
|
|
1361
1331
|
});
|
|
1362
1332
|
}
|
|
1363
1333
|
_setDropTarget(e, r) {
|
|
1364
|
-
|
|
1365
|
-
const t = ((i = this._dragState) == null ? void 0 : i.dropTarget) ?? null;
|
|
1334
|
+
const t = this._dragState?.dropTarget ?? null;
|
|
1366
1335
|
if (!(!this._dragState || B(t, e))) {
|
|
1367
|
-
if (this._pendingDropTarget = null, this._dragState.dropTarget = e, this._applyCurrentDropTargetVisualState(t), r
|
|
1336
|
+
if (this._pendingDropTarget = null, this._dragState.dropTarget = e, this._applyCurrentDropTargetVisualState(t), r?.announceLabel && this._announce(r.announceLabel), this._dragState.keyboard) {
|
|
1368
1337
|
this.requestRender();
|
|
1369
1338
|
return;
|
|
1370
1339
|
}
|
|
@@ -1372,8 +1341,7 @@ class ce extends ee {
|
|
|
1372
1341
|
}
|
|
1373
1342
|
}
|
|
1374
1343
|
_queueDropTarget(e, r, t) {
|
|
1375
|
-
if (!this._dragState)
|
|
1376
|
-
return;
|
|
1344
|
+
if (!this._dragState) return;
|
|
1377
1345
|
const i = this._dragState.dropTarget ?? null;
|
|
1378
1346
|
if (B(i, e)) {
|
|
1379
1347
|
this._pendingDropTarget = null;
|
|
@@ -1383,43 +1351,39 @@ class ce extends ee {
|
|
|
1383
1351
|
this._setDropTarget(e, t);
|
|
1384
1352
|
return;
|
|
1385
1353
|
}
|
|
1386
|
-
const s = typeof r == "number" && Number.isFinite(r) ? r : performance.now(),
|
|
1387
|
-
if (
|
|
1388
|
-
const
|
|
1389
|
-
s -
|
|
1354
|
+
const s = typeof r == "number" && Number.isFinite(r) ? r : performance.now(), a = this._pendingDropTarget;
|
|
1355
|
+
if (a && B(a.target, e)) {
|
|
1356
|
+
const n = e ? re : ie;
|
|
1357
|
+
s - a.startedAt >= n && this._setDropTarget(e, a.announceLabel ? { announceLabel: a.announceLabel } : t);
|
|
1390
1358
|
return;
|
|
1391
1359
|
}
|
|
1392
1360
|
this._pendingDropTarget = {
|
|
1393
1361
|
target: e,
|
|
1394
1362
|
startedAt: s,
|
|
1395
|
-
announceLabel: t
|
|
1363
|
+
announceLabel: t?.announceLabel
|
|
1396
1364
|
};
|
|
1397
1365
|
}
|
|
1398
1366
|
_releaseDropTarget(e, r) {
|
|
1399
|
-
|
|
1400
|
-
if (!this._dragState)
|
|
1401
|
-
return null;
|
|
1367
|
+
if (!this._dragState) return null;
|
|
1402
1368
|
if (Number.isFinite(e) && Number.isFinite(r)) {
|
|
1403
|
-
const
|
|
1404
|
-
if (
|
|
1405
|
-
return this._pendingDropTarget = null,
|
|
1369
|
+
const s = this._dropTargetFromPoint(e, r);
|
|
1370
|
+
if (s && this._canDrop(s, this._dragState.movedRootIds))
|
|
1371
|
+
return this._pendingDropTarget = null, s;
|
|
1406
1372
|
}
|
|
1407
|
-
const t =
|
|
1408
|
-
if (this._pendingDropTarget = null, t && this._canDrop(t, this._dragState.movedRootIds))
|
|
1409
|
-
return t;
|
|
1373
|
+
const t = this._pendingDropTarget?.target ?? null;
|
|
1374
|
+
if (this._pendingDropTarget = null, t && this._canDrop(t, this._dragState.movedRootIds)) return t;
|
|
1410
1375
|
const i = this._dragState.dropTarget ?? null;
|
|
1411
1376
|
return i && this._canDrop(i, this._dragState.movedRootIds) ? i : null;
|
|
1412
1377
|
}
|
|
1413
1378
|
_pathFromPoint(e, r) {
|
|
1414
|
-
var o, a;
|
|
1415
1379
|
const t = [], i = this.root;
|
|
1416
|
-
let s = typeof i.elementFromPoint == "function" ? i.elementFromPoint(e, r) :
|
|
1380
|
+
let s = typeof i.elementFromPoint == "function" ? i.elementFromPoint(e, r) : this.ownerDocument?.elementFromPoint(e, r) ?? null;
|
|
1417
1381
|
for (; s && (s instanceof HTMLElement && t.push(s), s !== this); ) {
|
|
1418
1382
|
if (s instanceof ShadowRoot) {
|
|
1419
1383
|
s = s.host;
|
|
1420
1384
|
continue;
|
|
1421
1385
|
}
|
|
1422
|
-
s = s.parentNode, !s &&
|
|
1386
|
+
s = s.parentNode, !s && t[t.length - 1]?.getRootNode() instanceof ShadowRoot && (s = t[t.length - 1].getRootNode().host);
|
|
1423
1387
|
}
|
|
1424
1388
|
return t;
|
|
1425
1389
|
}
|
|
@@ -1427,30 +1391,26 @@ class ce extends ee {
|
|
|
1427
1391
|
const e = /* @__PURE__ */ new Map();
|
|
1428
1392
|
return this.root.querySelectorAll(".item-shell[data-item-shell]").forEach((r) => {
|
|
1429
1393
|
const t = r.getAttribute("data-item-shell");
|
|
1430
|
-
if (!t)
|
|
1431
|
-
return;
|
|
1394
|
+
if (!t) return;
|
|
1432
1395
|
const i = r.getBoundingClientRect();
|
|
1433
1396
|
e.set(t, { top: i.top, left: i.left });
|
|
1434
1397
|
}), e;
|
|
1435
1398
|
}
|
|
1436
1399
|
_animateItemShellReflow(e) {
|
|
1437
|
-
if (!e.size)
|
|
1438
|
-
return;
|
|
1400
|
+
if (!e.size) return;
|
|
1439
1401
|
const r = new Set(this._draggingIds());
|
|
1440
1402
|
this.root.querySelectorAll(".item-shell[data-item-shell]").forEach((t) => {
|
|
1441
1403
|
const i = t.getAttribute("data-item-shell");
|
|
1442
|
-
if (!i || r.has(i))
|
|
1443
|
-
return;
|
|
1404
|
+
if (!i || r.has(i)) return;
|
|
1444
1405
|
const s = e.get(i);
|
|
1445
|
-
if (!s)
|
|
1446
|
-
|
|
1447
|
-
|
|
1448
|
-
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(() => {
|
|
1406
|
+
if (!s) return;
|
|
1407
|
+
const a = t.getBoundingClientRect(), n = s.left - a.left, d = s.top - a.top;
|
|
1408
|
+
Math.abs(n) < 0.5 && Math.abs(d) < 0.5 || (t.style.transition = "none", t.style.transform = `translate(${n}px, ${d}px)`, t.style.willChange = "transform", t.getBoundingClientRect(), requestAnimationFrame(() => {
|
|
1449
1409
|
t.style.transition = "transform 180ms ease", t.style.transform = "";
|
|
1450
|
-
const
|
|
1451
|
-
t.style.transition = "", t.style.willChange = "", t.removeEventListener("transitionend",
|
|
1410
|
+
const o = () => {
|
|
1411
|
+
t.style.transition = "", t.style.willChange = "", t.removeEventListener("transitionend", o);
|
|
1452
1412
|
};
|
|
1453
|
-
t.addEventListener("transitionend",
|
|
1413
|
+
t.addEventListener("transitionend", o), window.setTimeout(o, 220);
|
|
1454
1414
|
}));
|
|
1455
1415
|
});
|
|
1456
1416
|
}
|
|
@@ -1463,89 +1423,86 @@ class ce extends ee {
|
|
|
1463
1423
|
};
|
|
1464
1424
|
}
|
|
1465
1425
|
_projectedMoveResult() {
|
|
1466
|
-
|
|
1467
|
-
return !((e = this._dragState) != null && e.dropTarget) || !this._canDrop(this._dragState.dropTarget, this._dragState.movedRootIds) ? null : ae(
|
|
1426
|
+
return !this._dragState?.dropTarget || !this._canDrop(this._dragState.dropTarget, this._dragState.movedRootIds) ? null : ae(
|
|
1468
1427
|
this._items,
|
|
1469
1428
|
this._lists,
|
|
1470
1429
|
this._dragState.dropTarget,
|
|
1471
1430
|
this._dragState.movedRootIds,
|
|
1472
1431
|
this._dragState.clone,
|
|
1473
|
-
(
|
|
1432
|
+
(e, r) => this._previewCloneSubtreeItem(e, r)
|
|
1474
1433
|
);
|
|
1475
1434
|
}
|
|
1476
|
-
_renderListTree(e, r, t, i, s,
|
|
1477
|
-
const
|
|
1478
|
-
const
|
|
1479
|
-
const y =
|
|
1480
|
-
return !y || !
|
|
1481
|
-
}) :
|
|
1435
|
+
_renderListTree(e, r, t, i, s, a, n) {
|
|
1436
|
+
const d = P(e), o = $(e), u = (p) => {
|
|
1437
|
+
const m = o.get(D(r.id, p)) || [], _ = this.sort === "label" ? [...m].sort((v, b) => {
|
|
1438
|
+
const y = d.get(v), x = d.get(b);
|
|
1439
|
+
return !y || !x ? 0 : y.label.localeCompare(x.label);
|
|
1440
|
+
}) : m;
|
|
1482
1441
|
let f = "";
|
|
1483
|
-
return
|
|
1484
|
-
const b =
|
|
1485
|
-
if (!b || b.hidden)
|
|
1486
|
-
return;
|
|
1442
|
+
return _.forEach((v) => {
|
|
1443
|
+
const b = d.get(v);
|
|
1444
|
+
if (!b || b.hidden) return;
|
|
1487
1445
|
const y = this._renderChildBranch(
|
|
1488
1446
|
b,
|
|
1489
1447
|
t,
|
|
1490
1448
|
i,
|
|
1491
|
-
|
|
1449
|
+
u,
|
|
1492
1450
|
s,
|
|
1493
|
-
|
|
1494
|
-
|
|
1451
|
+
a,
|
|
1452
|
+
n
|
|
1495
1453
|
);
|
|
1496
1454
|
!W(b, this.filterQuery) && !y.includes('class="item"') || (f += this._renderDropzone({
|
|
1497
1455
|
listId: r.id,
|
|
1498
|
-
parentId:
|
|
1456
|
+
parentId: p,
|
|
1499
1457
|
beforeId: v,
|
|
1500
1458
|
mode: "before"
|
|
1501
1459
|
}, "Drop here"), f += y);
|
|
1502
1460
|
}), f += this._renderDropzone({
|
|
1503
1461
|
listId: r.id,
|
|
1504
|
-
parentId:
|
|
1462
|
+
parentId: p,
|
|
1505
1463
|
beforeId: null,
|
|
1506
1464
|
mode: "before"
|
|
1507
1465
|
}, "Drop here"), f;
|
|
1508
1466
|
};
|
|
1509
|
-
return `<div class="tree">${
|
|
1467
|
+
return `<div class="tree">${u(null)}</div>`;
|
|
1510
1468
|
}
|
|
1511
|
-
_renderChildBranch(e, r, t, i, s,
|
|
1512
|
-
|
|
1513
|
-
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), m = n ? !1 : t.has(e.id), f = e.disabled, v = f || e.dragDisabled || this._isDragLocked(), b = ((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";
|
|
1469
|
+
_renderChildBranch(e, r, t, i, s, a, n) {
|
|
1470
|
+
const d = I(e.id), o = a.has(e.id), u = o ? "" : i(e.id), p = u.includes('class="item"'), m = o ? !1 : this._selection.includes(e.id), _ = o ? !1 : t.has(e.id), f = e.disabled, v = f || e.dragDisabled || this._isDragLocked(), b = this._dragState?.dropTarget?.mode === "inside" && this._dragState.dropTarget.parentId === e.id, y = this._dragState?.clone ? "Copy preview" : "Drop preview", x = this._dragState?.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.", z = this._dragHandleMode(), k = this._usesCustomHandleSelector(), h = k ? "custom" : z, E = !k && z === "handle";
|
|
1514
1471
|
return `
|
|
1515
|
-
<div class="item-shell" data-item-shell="${
|
|
1472
|
+
<div class="item-shell" data-item-shell="${d}">
|
|
1516
1473
|
<article
|
|
1517
|
-
class="item${
|
|
1474
|
+
class="item${o ? " item-placeholder" : ""}"
|
|
1518
1475
|
part="item"
|
|
1519
|
-
data-id="${
|
|
1520
|
-
data-drag-handle-mode="${
|
|
1521
|
-
${!
|
|
1522
|
-
data-selected="${
|
|
1523
|
-
data-focused="${
|
|
1524
|
-
data-dragging="${
|
|
1476
|
+
data-id="${d}"
|
|
1477
|
+
data-drag-handle-mode="${h}"
|
|
1478
|
+
${!o && h === "item" ? 'data-drag-trigger="item"' : ""}
|
|
1479
|
+
data-selected="${m}"
|
|
1480
|
+
data-focused="${o ? "false" : r === e.id}"
|
|
1481
|
+
data-dragging="${_}"
|
|
1525
1482
|
data-disabled="${f}"
|
|
1526
1483
|
data-drop-inside-active="${b ? "true" : "false"}"
|
|
1527
|
-
role="${
|
|
1528
|
-
aria-selected="${
|
|
1484
|
+
role="${o ? "presentation" : "option"}"
|
|
1485
|
+
aria-selected="${o ? "false" : m}"
|
|
1529
1486
|
aria-disabled="${f}"
|
|
1530
|
-
aria-grabbed="${
|
|
1531
|
-
aria-hidden="${
|
|
1532
|
-
tabindex="${
|
|
1487
|
+
aria-grabbed="${o ? "false" : _}"
|
|
1488
|
+
aria-hidden="${o ? "true" : "false"}"
|
|
1489
|
+
tabindex="${o ? "-1" : r === e.id ? "0" : "-1"}"
|
|
1533
1490
|
>
|
|
1534
|
-
${
|
|
1491
|
+
${o ? `
|
|
1535
1492
|
<div class="placeholder-content">
|
|
1536
1493
|
<div class="placeholder-kicker">${I(y)}</div>
|
|
1537
1494
|
<div class="placeholder-title">${I(e.label)}</div>
|
|
1538
|
-
<div class="placeholder-description">${I(
|
|
1495
|
+
<div class="placeholder-description">${I(x)}</div>
|
|
1539
1496
|
</div>
|
|
1540
1497
|
` : `
|
|
1541
|
-
${
|
|
1498
|
+
${E ? `
|
|
1542
1499
|
<button
|
|
1543
1500
|
class="handle"
|
|
1544
1501
|
part="handle"
|
|
1545
1502
|
type="button"
|
|
1546
1503
|
data-action="handle"
|
|
1547
1504
|
data-drag-trigger="handle"
|
|
1548
|
-
data-id="${
|
|
1505
|
+
data-id="${d}"
|
|
1549
1506
|
draggable="false"
|
|
1550
1507
|
${v ? "disabled" : ""}
|
|
1551
1508
|
aria-label="Drag ${I(e.label)}"
|
|
@@ -1560,13 +1517,13 @@ class ce extends ee {
|
|
|
1560
1517
|
</svg>
|
|
1561
1518
|
</button>
|
|
1562
1519
|
` : ""}
|
|
1563
|
-
<div class="item-content" data-action="select" data-id="${
|
|
1564
|
-
<div class="item-custom-content" part="item-custom-content" data-item-content-target="${
|
|
1520
|
+
<div class="item-content" data-action="select" data-id="${d}">
|
|
1521
|
+
<div class="item-custom-content" part="item-custom-content" data-item-content-target="${d}"></div>
|
|
1565
1522
|
<div class="item-default-content">
|
|
1566
1523
|
<div class="item-title">${I(e.label)}</div>
|
|
1567
1524
|
${e.description ? `<div class="item-description">${I(e.description)}</div>` : ""}
|
|
1568
1525
|
<div class="item-meta">
|
|
1569
|
-
<span class="item-badge selection-badge" data-selection-badge="true" ${
|
|
1526
|
+
<span class="item-badge selection-badge" data-selection-badge="true" ${m && n ? "" : "hidden"}>${m && n ? "Selected" : ""}</span>
|
|
1570
1527
|
${e.cloneOnDrag ? '<span class="item-badge">Clone on drag</span>' : ""}
|
|
1571
1528
|
${e.dragDisabled ? '<span class="item-badge">Pinned</span>' : ""}
|
|
1572
1529
|
${s ? '<span class="item-badge drop-badge">Nest here</span>' : ""}
|
|
@@ -1575,19 +1532,18 @@ class ce extends ee {
|
|
|
1575
1532
|
</div>
|
|
1576
1533
|
`}
|
|
1577
1534
|
</article>
|
|
1578
|
-
${s && !
|
|
1535
|
+
${s && !o ? this._renderDropzone({
|
|
1579
1536
|
listId: e.listId,
|
|
1580
1537
|
parentId: e.id,
|
|
1581
1538
|
beforeId: null,
|
|
1582
1539
|
mode: "inside"
|
|
1583
1540
|
}, "Nest here") : ""}
|
|
1584
|
-
${
|
|
1541
|
+
${p ? `<div class="children">${u}</div>` : ""}
|
|
1585
1542
|
</div>
|
|
1586
1543
|
`;
|
|
1587
1544
|
}
|
|
1588
1545
|
_renderDropzone(e, r) {
|
|
1589
|
-
|
|
1590
|
-
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;
|
|
1546
|
+
const t = this._dragState?.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;
|
|
1591
1547
|
return `
|
|
1592
1548
|
<div
|
|
1593
1549
|
class="dropzone"
|
|
@@ -1604,43 +1560,35 @@ class ce extends ee {
|
|
|
1604
1560
|
`;
|
|
1605
1561
|
}
|
|
1606
1562
|
_onClick(e) {
|
|
1607
|
-
const r = e.composedPath(), t = r.find((
|
|
1608
|
-
|
|
1609
|
-
return n instanceof HTMLElement && ((d = n.classList) == null ? void 0 : d.contains("toolbar"));
|
|
1610
|
-
}), i = this._dragActivatorFromPath(r), s = r.find((n) => n instanceof HTMLElement && n.classList.contains("item"));
|
|
1611
|
-
if (i && i.kind !== "item")
|
|
1612
|
-
return;
|
|
1563
|
+
const r = e.composedPath(), t = r.find((o) => o instanceof HTMLElement && o.classList?.contains("toolbar")), i = this._dragActivatorFromPath(r), s = r.find((o) => o instanceof HTMLElement && o.classList.contains("item"));
|
|
1564
|
+
if (i && i.kind !== "item") return;
|
|
1613
1565
|
if (!s)
|
|
1614
1566
|
return t && !(e.target instanceof HTMLButtonElement), void 0;
|
|
1615
|
-
const
|
|
1616
|
-
if (!
|
|
1617
|
-
|
|
1618
|
-
|
|
1619
|
-
|
|
1620
|
-
|
|
1621
|
-
const l = e;
|
|
1622
|
-
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()) {
|
|
1567
|
+
const a = s.getAttribute("data-id");
|
|
1568
|
+
if (!a) return;
|
|
1569
|
+
const n = this._items.find((o) => o.id === a);
|
|
1570
|
+
if (!n || n.disabled) return;
|
|
1571
|
+
const d = e;
|
|
1572
|
+
if (d.shiftKey ? this._selectRangeTo(a) : d.metaKey || d.ctrlKey ? this._toggleSelection(a) : this._setSelection([a], "pointer"), this._focusedId = a, this._rangeAnchorId = a, this._pendingFocusId = a, this._hasCustomItemRendering()) {
|
|
1623
1573
|
this._syncSelectionVisualState(), this._restorePendingFocus();
|
|
1624
1574
|
return;
|
|
1625
1575
|
}
|
|
1626
1576
|
this.requestRender();
|
|
1627
1577
|
}
|
|
1628
1578
|
_onFocusIn(e) {
|
|
1629
|
-
const
|
|
1579
|
+
const t = e.composedPath().find((i) => i instanceof HTMLElement && i.classList.contains("item"))?.getAttribute("data-id");
|
|
1630
1580
|
t && (this._focusedId = t, this._syncSelectionVisualState());
|
|
1631
1581
|
}
|
|
1632
1582
|
_onKeyDown(e) {
|
|
1633
|
-
var l;
|
|
1634
1583
|
const r = this._visibleItemIds();
|
|
1635
|
-
if (!r.length)
|
|
1636
|
-
|
|
1637
|
-
|
|
1638
|
-
|
|
1639
|
-
if (e.key === "ArrowDown" && !a || e.key === "ArrowRight" && a) {
|
|
1584
|
+
if (!r.length) return;
|
|
1585
|
+
const t = this._focusedId && r.includes(this._focusedId) ? this._focusedId : r[0], i = r.indexOf(t), s = this._items.find((d) => d.id === t), n = (s ? this._lists.find((d) => d.id === s.listId) : null)?.orientation === "horizontal";
|
|
1586
|
+
if (!this._dragState?.keyboard) {
|
|
1587
|
+
if (e.key === "ArrowDown" && !n || e.key === "ArrowRight" && n) {
|
|
1640
1588
|
e.preventDefault(), this._moveFocusBy(r, i, 1);
|
|
1641
1589
|
return;
|
|
1642
1590
|
}
|
|
1643
|
-
if (e.key === "ArrowUp" && !
|
|
1591
|
+
if (e.key === "ArrowUp" && !n || e.key === "ArrowLeft" && n) {
|
|
1644
1592
|
e.preventDefault(), this._moveFocusBy(r, i, -1);
|
|
1645
1593
|
return;
|
|
1646
1594
|
}
|
|
@@ -1657,21 +1605,20 @@ class ce extends ee {
|
|
|
1657
1605
|
this._announce("Dragging is disabled right now.");
|
|
1658
1606
|
return;
|
|
1659
1607
|
}
|
|
1660
|
-
const
|
|
1661
|
-
if (!
|
|
1662
|
-
|
|
1663
|
-
const d = this._itemClonesOnDrag(t);
|
|
1608
|
+
const d = this._selectedRootIds(t);
|
|
1609
|
+
if (!d.length) return;
|
|
1610
|
+
const o = this._itemClonesOnDrag(t);
|
|
1664
1611
|
this._dragState = {
|
|
1665
|
-
snapshot: this._items.map(
|
|
1666
|
-
movedRootIds:
|
|
1612
|
+
snapshot: this._items.map(A),
|
|
1613
|
+
movedRootIds: d,
|
|
1667
1614
|
originId: t,
|
|
1668
|
-
clone:
|
|
1615
|
+
clone: o,
|
|
1669
1616
|
keyboard: !0,
|
|
1670
1617
|
dropTarget: this._initialKeyboardDropTarget(t),
|
|
1671
1618
|
committed: !1
|
|
1672
1619
|
};
|
|
1673
|
-
const
|
|
1674
|
-
this._announce(`${
|
|
1620
|
+
const u = d.length === 1 ? `Lifted ${s?.label || "item"}.` : `Lifted ${d.length} items.`;
|
|
1621
|
+
this._announce(`${u} Use arrow keys to choose a destination.`), this.requestRender();
|
|
1675
1622
|
return;
|
|
1676
1623
|
}
|
|
1677
1624
|
if (e.key === "Escape") {
|
|
@@ -1686,16 +1633,15 @@ class ce extends ee {
|
|
|
1686
1633
|
}
|
|
1687
1634
|
if (e.key === "Enter" || e.key === " " || e.code === "Space") {
|
|
1688
1635
|
e.preventDefault();
|
|
1689
|
-
const
|
|
1690
|
-
if (!
|
|
1691
|
-
|
|
1692
|
-
this._commitMove(n, this._dragState.movedRootIds, this._dragState.clone, "keyboard");
|
|
1636
|
+
const d = this._dragState.dropTarget;
|
|
1637
|
+
if (!d) return;
|
|
1638
|
+
this._commitMove(d, this._dragState.movedRootIds, this._dragState.clone, "keyboard");
|
|
1693
1639
|
return;
|
|
1694
1640
|
}
|
|
1695
1641
|
if (["ArrowDown", "ArrowUp", "ArrowLeft", "ArrowRight"].includes(e.key)) {
|
|
1696
1642
|
e.preventDefault();
|
|
1697
|
-
const
|
|
1698
|
-
this._moveKeyboardDropTarget(
|
|
1643
|
+
const d = e.key === "ArrowDown" || e.key === "ArrowRight" ? 1 : -1;
|
|
1644
|
+
this._moveKeyboardDropTarget(d);
|
|
1699
1645
|
}
|
|
1700
1646
|
}
|
|
1701
1647
|
_moveFocusBy(e, r, t) {
|
|
@@ -1703,7 +1649,7 @@ class ce extends ee {
|
|
|
1703
1649
|
this._focusedId = s, this._pendingFocusId = s, !this._applyInteractiveStateInPlace({ restoreFocus: !0 }) && this.requestRender();
|
|
1704
1650
|
}
|
|
1705
1651
|
_onDragStart(e) {
|
|
1706
|
-
const r = this._dragActivatorFromPath(e.composedPath()), t = r
|
|
1652
|
+
const r = this._dragActivatorFromPath(e.composedPath()), t = r?.id;
|
|
1707
1653
|
if (!r || !t) {
|
|
1708
1654
|
e.preventDefault();
|
|
1709
1655
|
return;
|
|
@@ -1712,29 +1658,28 @@ class ce extends ee {
|
|
|
1712
1658
|
e.preventDefault(), this._announce("Dragging is disabled right now.");
|
|
1713
1659
|
return;
|
|
1714
1660
|
}
|
|
1715
|
-
const i = this._items.find((
|
|
1661
|
+
const i = this._items.find((n) => n.id === t);
|
|
1716
1662
|
if (!i || i.disabled || i.dragDisabled) {
|
|
1717
1663
|
e.preventDefault();
|
|
1718
1664
|
return;
|
|
1719
1665
|
}
|
|
1720
1666
|
const s = this._selection.includes(t) ? this._selectedRootIds(t) : [t];
|
|
1721
1667
|
this._selection.includes(t) || this._setSelection([t], "pointer");
|
|
1722
|
-
const
|
|
1668
|
+
const a = this._itemClonesOnDrag(t);
|
|
1723
1669
|
this._dragState = {
|
|
1724
|
-
snapshot: this._items.map(
|
|
1670
|
+
snapshot: this._items.map(A),
|
|
1725
1671
|
movedRootIds: s,
|
|
1726
1672
|
originId: t,
|
|
1727
|
-
clone:
|
|
1673
|
+
clone: a,
|
|
1728
1674
|
keyboard: !1,
|
|
1729
1675
|
dropTarget: null,
|
|
1730
1676
|
committed: !1
|
|
1731
|
-
}, e.dataTransfer && (e.dataTransfer.effectAllowed =
|
|
1732
|
-
|
|
1677
|
+
}, e.dataTransfer && (e.dataTransfer.effectAllowed = a ? "copyMove" : "move", e.dataTransfer.setData("text/plain", s.join(",")), this._applyDragImage(e.dataTransfer, s.length)), this._announce(
|
|
1678
|
+
a ? `Dragging ${s.length === 1 ? i.label : `${s.length} items`} as a copy.` : `Dragging ${s.length === 1 ? i.label : `${s.length} items`}.`
|
|
1733
1679
|
), this.requestRender();
|
|
1734
1680
|
}
|
|
1735
1681
|
_onDragOver(e) {
|
|
1736
|
-
if (!this._dragState || this._dragState.keyboard)
|
|
1737
|
-
return;
|
|
1682
|
+
if (!this._dragState || this._dragState.keyboard) return;
|
|
1738
1683
|
const r = this._dropTargetFromEvent(e);
|
|
1739
1684
|
if (!r || !this._canDrop(r, this._dragState.movedRootIds)) {
|
|
1740
1685
|
this._queueDropTarget(null, e.timeStamp);
|
|
@@ -1743,8 +1688,7 @@ class ce extends ee {
|
|
|
1743
1688
|
e.preventDefault(), this._queueDropTarget(r, e.timeStamp), e.dataTransfer && (e.dataTransfer.dropEffect = this._dragState.clone ? "copy" : "move");
|
|
1744
1689
|
}
|
|
1745
1690
|
_onDrop(e) {
|
|
1746
|
-
if (!this._dragState || this._dragState.keyboard)
|
|
1747
|
-
return;
|
|
1691
|
+
if (!this._dragState || this._dragState.keyboard) return;
|
|
1748
1692
|
const r = this._dropTargetFromEvent(e);
|
|
1749
1693
|
!r || !this._canDrop(r, this._dragState.movedRootIds) || (e.preventDefault(), this._commitMove(r, this._dragState.movedRootIds, this._dragState.clone, "pointer"));
|
|
1750
1694
|
}
|
|
@@ -1758,46 +1702,42 @@ class ce extends ee {
|
|
|
1758
1702
|
return this._dropTargetFromPath(e.composedPath(), e.clientX, e.clientY);
|
|
1759
1703
|
}
|
|
1760
1704
|
_dropTargetFromPath(e, r, t) {
|
|
1761
|
-
const i = e.find((
|
|
1705
|
+
const i = e.find((h) => h instanceof HTMLElement && h.classList.contains("dropzone"));
|
|
1762
1706
|
if (i) {
|
|
1763
|
-
const
|
|
1707
|
+
const h = {
|
|
1764
1708
|
listId: i.getAttribute("data-list-id") || "",
|
|
1765
1709
|
parentId: i.getAttribute("data-parent-id") || null,
|
|
1766
1710
|
beforeId: i.getAttribute("data-before-id") || null,
|
|
1767
1711
|
mode: i.getAttribute("data-mode") === "inside" ? "inside" : "before"
|
|
1768
1712
|
};
|
|
1769
|
-
if (
|
|
1770
|
-
return _;
|
|
1713
|
+
if (h.listId) return h;
|
|
1771
1714
|
}
|
|
1772
|
-
const s = e.find((
|
|
1773
|
-
if (!s)
|
|
1774
|
-
|
|
1775
|
-
|
|
1776
|
-
|
|
1777
|
-
|
|
1778
|
-
const
|
|
1779
|
-
if (!a)
|
|
1780
|
-
return null;
|
|
1781
|
-
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, m = d ? r : t, f = Math.max(1, g - c), v = (m - c) / f, b = this.getAttribute("allow-nesting") !== "false" && !a.disabled;
|
|
1715
|
+
const s = e.find((h) => h instanceof HTMLElement && h.classList.contains("item"));
|
|
1716
|
+
if (!s) return null;
|
|
1717
|
+
const a = s.getAttribute("data-id");
|
|
1718
|
+
if (!a) return null;
|
|
1719
|
+
const n = this._items.find((h) => h.id === a);
|
|
1720
|
+
if (!n) return null;
|
|
1721
|
+
const d = this._lists.find((h) => h.id === n.listId), o = s.getBoundingClientRect(), u = d?.orientation === "horizontal", p = u ? o.left : o.top, m = u ? o.right : o.bottom, _ = u ? r : t, f = Math.max(1, m - p), v = (_ - p) / f, b = this.getAttribute("allow-nesting") !== "false" && !n.disabled;
|
|
1782
1722
|
if (v <= 0.34)
|
|
1783
1723
|
return {
|
|
1784
|
-
listId:
|
|
1785
|
-
parentId:
|
|
1786
|
-
beforeId:
|
|
1724
|
+
listId: n.listId,
|
|
1725
|
+
parentId: n.parentId,
|
|
1726
|
+
beforeId: n.id,
|
|
1787
1727
|
mode: "before"
|
|
1788
1728
|
};
|
|
1789
1729
|
if (b && v >= 0.34 && v <= 0.74)
|
|
1790
1730
|
return {
|
|
1791
|
-
listId:
|
|
1792
|
-
parentId:
|
|
1731
|
+
listId: n.listId,
|
|
1732
|
+
parentId: n.id,
|
|
1793
1733
|
beforeId: null,
|
|
1794
1734
|
mode: "inside"
|
|
1795
1735
|
};
|
|
1796
|
-
const
|
|
1736
|
+
const x = $(this._items).get(D(n.listId, n.parentId)) || [], z = x.indexOf(n.id), k = z >= 0 && x[z + 1] || null;
|
|
1797
1737
|
return {
|
|
1798
|
-
listId:
|
|
1799
|
-
parentId:
|
|
1800
|
-
beforeId:
|
|
1738
|
+
listId: n.listId,
|
|
1739
|
+
parentId: n.parentId,
|
|
1740
|
+
beforeId: k,
|
|
1801
1741
|
mode: "before"
|
|
1802
1742
|
};
|
|
1803
1743
|
}
|
|
@@ -1805,14 +1745,10 @@ class ce extends ee {
|
|
|
1805
1745
|
return this._dropTargetFromPath(this._pathFromPoint(e, r), e, r);
|
|
1806
1746
|
}
|
|
1807
1747
|
_beginPointerDrag(e, r) {
|
|
1808
|
-
if (!this._pointerGesture || this._dragState)
|
|
1809
|
-
|
|
1810
|
-
const t = this._items.find((i) => {
|
|
1811
|
-
var s;
|
|
1812
|
-
return i.id === ((s = this._pointerGesture) == null ? void 0 : s.originId);
|
|
1813
|
-
});
|
|
1748
|
+
if (!this._pointerGesture || this._dragState) return;
|
|
1749
|
+
const t = this._items.find((i) => i.id === this._pointerGesture?.originId);
|
|
1814
1750
|
t && (this._dragState = {
|
|
1815
|
-
snapshot: this._items.map(
|
|
1751
|
+
snapshot: this._items.map(A),
|
|
1816
1752
|
movedRootIds: [...this._pointerGesture.movedRootIds],
|
|
1817
1753
|
originId: this._pointerGesture.originId,
|
|
1818
1754
|
clone: this._pointerGesture.clone,
|
|
@@ -1829,22 +1765,20 @@ class ce extends ee {
|
|
|
1829
1765
|
));
|
|
1830
1766
|
}
|
|
1831
1767
|
_onPointerDown(e) {
|
|
1832
|
-
|
|
1833
|
-
|
|
1834
|
-
if (!r || !t)
|
|
1835
|
-
return;
|
|
1768
|
+
const r = this._dragActivatorFromPath(e.composedPath()), t = r?.id;
|
|
1769
|
+
if (!r || !t) return;
|
|
1836
1770
|
if (this._isDragLocked()) {
|
|
1837
1771
|
e.preventDefault(), this._announce("Dragging is disabled right now.");
|
|
1838
1772
|
return;
|
|
1839
1773
|
}
|
|
1840
|
-
const i = this._items.find((
|
|
1774
|
+
const i = this._items.find((a) => a.id === t);
|
|
1841
1775
|
if (!i || i.disabled || i.dragDisabled) {
|
|
1842
1776
|
e.preventDefault();
|
|
1843
1777
|
return;
|
|
1844
1778
|
}
|
|
1845
1779
|
e.preventDefault();
|
|
1846
1780
|
try {
|
|
1847
|
-
|
|
1781
|
+
r.element.setPointerCapture?.(e.pointerId);
|
|
1848
1782
|
} catch {
|
|
1849
1783
|
}
|
|
1850
1784
|
const s = this._selection.includes(t) ? this._selectedRootIds(t) : [t];
|
|
@@ -1863,8 +1797,7 @@ class ce extends ee {
|
|
|
1863
1797
|
_onPointerMove(e) {
|
|
1864
1798
|
if (!(!this._pointerGesture || e.pointerId !== this._pointerGesture.pointerId)) {
|
|
1865
1799
|
if (e.preventDefault(), !this._pointerGesture.moved) {
|
|
1866
|
-
if (Math.hypot(e.clientX - this._pointerGesture.startX, e.clientY - this._pointerGesture.startY) < 6)
|
|
1867
|
-
return;
|
|
1800
|
+
if (Math.hypot(e.clientX - this._pointerGesture.startX, e.clientY - this._pointerGesture.startY) < 6) return;
|
|
1868
1801
|
this._pointerGesture.moved = !0, this._beginPointerDrag(e.clientX, e.clientY);
|
|
1869
1802
|
}
|
|
1870
1803
|
if (!(!this._dragState || this._dragState.keyboard) && (this._movePointerPreview(e.clientX, e.clientY), !this._dragState.committed)) {
|
|
@@ -1878,17 +1811,14 @@ class ce extends ee {
|
|
|
1878
1811
|
}
|
|
1879
1812
|
}
|
|
1880
1813
|
_onPointerUp(e) {
|
|
1881
|
-
|
|
1882
|
-
if (!this._pointerGesture || e.pointerId !== this._pointerGesture.pointerId)
|
|
1883
|
-
return;
|
|
1814
|
+
if (!this._pointerGesture || e.pointerId !== this._pointerGesture.pointerId) return;
|
|
1884
1815
|
e.preventDefault();
|
|
1885
1816
|
try {
|
|
1886
|
-
|
|
1817
|
+
this._pointerGesture.captureTarget?.releasePointerCapture?.(e.pointerId);
|
|
1887
1818
|
} catch {
|
|
1888
1819
|
}
|
|
1889
1820
|
const r = this._pointerGesture;
|
|
1890
|
-
if (this._pointerGesture = null, !this._dragState || this._dragState.keyboard)
|
|
1891
|
-
return;
|
|
1821
|
+
if (this._pointerGesture = null, !this._dragState || this._dragState.keyboard) return;
|
|
1892
1822
|
const t = r.moved ? this._releaseDropTarget(e.clientX, e.clientY) : null;
|
|
1893
1823
|
if (r.moved && t) {
|
|
1894
1824
|
this._commitMove(t, this._dragState.movedRootIds, this._dragState.clone, "pointer");
|
|
@@ -1900,13 +1830,13 @@ class ce extends ee {
|
|
|
1900
1830
|
!this._pointerGesture || e.pointerId !== this._pointerGesture.pointerId || (this._pointerGesture = null, this._dragState && this._cancelDrag(!0));
|
|
1901
1831
|
}
|
|
1902
1832
|
_setSelection(e, r) {
|
|
1903
|
-
const t = new Set(this._items.map((
|
|
1833
|
+
const t = new Set(this._items.map((n) => n.id)), i = Array.from(new Set(e.filter((n) => t.has(n)))), s = [...this._selection];
|
|
1904
1834
|
this._selection = i, this._rangeAnchorId = i[i.length - 1] || null, this._focusedId = i[i.length - 1] || this._focusedId;
|
|
1905
|
-
const
|
|
1906
|
-
if (this.getAttribute("selection") !==
|
|
1907
|
-
this._lastSelectionAttr =
|
|
1835
|
+
const a = U(i);
|
|
1836
|
+
if (this.getAttribute("selection") !== a) {
|
|
1837
|
+
this._lastSelectionAttr = a, this._suppressAttributeRender = !0;
|
|
1908
1838
|
try {
|
|
1909
|
-
i.length ? this.setAttribute("selection",
|
|
1839
|
+
i.length ? this.setAttribute("selection", a) : this.removeAttribute("selection");
|
|
1910
1840
|
} finally {
|
|
1911
1841
|
this._suppressAttributeRender = !1;
|
|
1912
1842
|
}
|
|
@@ -1919,8 +1849,7 @@ class ce extends ee {
|
|
|
1919
1849
|
bubbles: !0,
|
|
1920
1850
|
composed: !0
|
|
1921
1851
|
})), r !== "restore") {
|
|
1922
|
-
if (this._applyInteractiveStateInPlace({ restoreFocus: !0 }))
|
|
1923
|
-
return;
|
|
1852
|
+
if (this._applyInteractiveStateInPlace({ restoreFocus: !0 })) return;
|
|
1924
1853
|
this.requestRender();
|
|
1925
1854
|
}
|
|
1926
1855
|
}
|
|
@@ -1934,123 +1863,102 @@ class ce extends ee {
|
|
|
1934
1863
|
this._setSelection([e], "pointer");
|
|
1935
1864
|
return;
|
|
1936
1865
|
}
|
|
1937
|
-
const [
|
|
1938
|
-
this._setSelection(r.slice(
|
|
1866
|
+
const [a, n] = i <= s ? [i, s] : [s, i];
|
|
1867
|
+
this._setSelection(r.slice(a, n + 1), "pointer"), this._announce(`${n - a + 1} items selected.`);
|
|
1939
1868
|
}
|
|
1940
1869
|
_visibleItemIds() {
|
|
1941
1870
|
const e = Q(this._items, new Set(this._selection), new Set(this._draggingIds()), this.filterQuery, this.sort);
|
|
1942
1871
|
return Array.from(e.values()).flat().filter((r) => !r.disabled).map((r) => r.id);
|
|
1943
1872
|
}
|
|
1944
1873
|
_selectedRootIds(e) {
|
|
1945
|
-
const r = this._selection.length ? [...this._selection] : e ? [e] : [], t =
|
|
1874
|
+
const r = this._selection.length ? [...this._selection] : e ? [e] : [], t = P(this._items), i = new Set(r);
|
|
1946
1875
|
return r.filter((s) => {
|
|
1947
|
-
|
|
1948
|
-
|
|
1949
|
-
|
|
1950
|
-
|
|
1951
|
-
|
|
1952
|
-
|
|
1953
|
-
if (i.has(a))
|
|
1954
|
-
return !1;
|
|
1955
|
-
a = ((l = t.get(a)) == null ? void 0 : l.parentId) ?? null;
|
|
1876
|
+
const a = t.get(s);
|
|
1877
|
+
if (!a) return !1;
|
|
1878
|
+
let n = a.parentId;
|
|
1879
|
+
for (; n; ) {
|
|
1880
|
+
if (i.has(n)) return !1;
|
|
1881
|
+
n = t.get(n)?.parentId ?? null;
|
|
1956
1882
|
}
|
|
1957
|
-
return !
|
|
1883
|
+
return !a.disabled;
|
|
1958
1884
|
});
|
|
1959
1885
|
}
|
|
1960
1886
|
_draggingIds() {
|
|
1961
|
-
if (!this._dragState)
|
|
1962
|
-
|
|
1963
|
-
const e = M(this._items), r = E(this._items), t = [], i = (s) => {
|
|
1887
|
+
if (!this._dragState) return [];
|
|
1888
|
+
const e = P(this._items), r = $(this._items), t = [], i = (s) => {
|
|
1964
1889
|
t.push(s);
|
|
1965
|
-
const
|
|
1966
|
-
if (!
|
|
1967
|
-
|
|
1968
|
-
(r.get(z(o.listId, s)) || []).forEach(i);
|
|
1890
|
+
const a = e.get(s);
|
|
1891
|
+
if (!a) return;
|
|
1892
|
+
(r.get(D(a.listId, s)) || []).forEach(i);
|
|
1969
1893
|
};
|
|
1970
1894
|
return this._dragState.movedRootIds.forEach(i), t;
|
|
1971
1895
|
}
|
|
1972
1896
|
_itemClonesOnDrag(e) {
|
|
1973
1897
|
const r = this._items.find((i) => i.id === e);
|
|
1974
|
-
|
|
1975
|
-
return !1;
|
|
1976
|
-
if (r.cloneOnDrag)
|
|
1977
|
-
return !0;
|
|
1978
|
-
const t = this._lists.find((i) => i.id === r.listId);
|
|
1979
|
-
return !!(t != null && t.cloneOnDrag);
|
|
1898
|
+
return r ? r.cloneOnDrag ? !0 : !!this._lists.find((i) => i.id === r.listId)?.cloneOnDrag : !1;
|
|
1980
1899
|
}
|
|
1981
1900
|
_isDragLocked() {
|
|
1982
1901
|
return !!(this.hasAttribute("disabled") || this.sort !== "manual" || this.filterQuery && !this.hasAttribute("allow-filtered-drag"));
|
|
1983
1902
|
}
|
|
1984
1903
|
_canDrop(e, r) {
|
|
1985
|
-
|
|
1986
|
-
|
|
1987
|
-
|
|
1988
|
-
const
|
|
1989
|
-
|
|
1990
|
-
|
|
1991
|
-
|
|
1992
|
-
s.add(d);
|
|
1993
|
-
const c = i.get(d);
|
|
1994
|
-
c && (o.get(z(c.listId, d)) || []).forEach(a);
|
|
1904
|
+
if (this._isDragLocked()) return !1;
|
|
1905
|
+
const t = this._lists.find((o) => o.id === e.listId);
|
|
1906
|
+
if (!t || t.disabled) return !1;
|
|
1907
|
+
const i = P(this._items), s = /* @__PURE__ */ new Set(), a = $(this._items), n = (o) => {
|
|
1908
|
+
s.add(o);
|
|
1909
|
+
const u = i.get(o);
|
|
1910
|
+
u && (a.get(D(u.listId, o)) || []).forEach(n);
|
|
1995
1911
|
};
|
|
1996
|
-
if (r.forEach(
|
|
1997
|
-
|
|
1998
|
-
|
|
1999
|
-
var c;
|
|
2000
|
-
return (c = i.get(d)) == null ? void 0 : c.listId;
|
|
2001
|
-
}).filter(Boolean)));
|
|
2002
|
-
return !((n = t.accepts) != null && n.length && l.some((d) => {
|
|
2003
|
-
var c;
|
|
2004
|
-
return !((c = t.accepts) != null && c.includes(d));
|
|
2005
|
-
}) || e.mode === "inside" && this.getAttribute("allow-nesting") === "false");
|
|
1912
|
+
if (r.forEach(n), e.parentId && s.has(e.parentId) || e.beforeId && s.has(e.beforeId)) return !1;
|
|
1913
|
+
const d = Array.from(new Set(r.map((o) => i.get(o)?.listId).filter(Boolean)));
|
|
1914
|
+
return !(t.accepts?.length && d.some((o) => !t.accepts?.includes(o)) || e.mode === "inside" && this.getAttribute("allow-nesting") === "false");
|
|
2006
1915
|
}
|
|
2007
1916
|
_commitMove(e, r, t, i) {
|
|
2008
|
-
if (!this._canDrop(e, r))
|
|
2009
|
-
|
|
2010
|
-
|
|
2011
|
-
|
|
2012
|
-
!D || a.has(p) || (a.add(p), l.push(p), (o.get(z(D.listId, p)) || []).forEach(n));
|
|
1917
|
+
if (!this._canDrop(e, r)) return;
|
|
1918
|
+
const s = P(this._items), a = $(this._items), n = /* @__PURE__ */ new Set(), d = [], o = (c) => {
|
|
1919
|
+
const w = s.get(c);
|
|
1920
|
+
!w || n.has(c) || (n.add(c), d.push(c), (a.get(D(w.listId, c)) || []).forEach(o));
|
|
2013
1921
|
};
|
|
2014
|
-
r.forEach(
|
|
2015
|
-
const
|
|
2016
|
-
t &&
|
|
2017
|
-
f.set(
|
|
2018
|
-
}),
|
|
2019
|
-
const
|
|
2020
|
-
|
|
1922
|
+
r.forEach(o);
|
|
1923
|
+
const u = this._items.map(A), p = u.filter((c) => n.has(c.id)), m = t ? u.map(A) : u.filter((c) => !n.has(c.id)), _ = t ? p.map((c) => this._cloneSubtreeItem(c, d)) : p.map(A), f = /* @__PURE__ */ new Map(), v = /* @__PURE__ */ new Map();
|
|
1924
|
+
t && p.forEach((c, w) => {
|
|
1925
|
+
f.set(c.id, _[w].id), v.set(_[w].id, c.id);
|
|
1926
|
+
}), _.forEach((c) => {
|
|
1927
|
+
const w = t ? v.get(c.id) : c.id, C = w ? s.get(w) : null;
|
|
1928
|
+
C && (t && (c.parentId = C.parentId && f.has(C.parentId) && f.get(C.parentId) || null), c.listId = e.listId);
|
|
2021
1929
|
});
|
|
2022
|
-
const b = r.map((
|
|
2023
|
-
|
|
2024
|
-
const [,
|
|
2025
|
-
(
|
|
1930
|
+
const b = r.map((c) => f.get(c) || c), y = [...m, ..._], x = $(m), z = D(e.listId, e.parentId), k = [...x.get(z) || []], h = e.beforeId ? k.indexOf(e.beforeId) : k.length, E = h >= 0 ? h : k.length;
|
|
1931
|
+
k.splice(E, 0, ...b), x.set(z, k), $(_).forEach((c, w) => {
|
|
1932
|
+
const [, C] = w.split("::");
|
|
1933
|
+
(C || "") !== "__root__" && x.set(w, [...c]);
|
|
2026
1934
|
});
|
|
2027
|
-
const
|
|
2028
|
-
b.forEach((
|
|
2029
|
-
const
|
|
2030
|
-
|
|
1935
|
+
const L = P(y);
|
|
1936
|
+
b.forEach((c) => {
|
|
1937
|
+
const w = L.get(c);
|
|
1938
|
+
w && (w.parentId = e.parentId, w.listId = e.listId);
|
|
2031
1939
|
});
|
|
2032
|
-
const
|
|
2033
|
-
(
|
|
2034
|
-
const
|
|
2035
|
-
!
|
|
1940
|
+
const F = [], M = /* @__PURE__ */ new Set(), O = (c, w) => {
|
|
1941
|
+
(x.get(D(c, w)) || []).forEach((N, Z) => {
|
|
1942
|
+
const G = L.get(N);
|
|
1943
|
+
!G || M.has(N) || (M.add(N), G.listId = c, G.parentId = w, G.order = Z, F.push(G), O(c, N));
|
|
2036
1944
|
});
|
|
2037
1945
|
};
|
|
2038
|
-
this._lists.forEach((
|
|
2039
|
-
|
|
2040
|
-
}), this._dragState && (this._dragState.committed = !0), this._items =
|
|
2041
|
-
const
|
|
2042
|
-
this._selection =
|
|
2043
|
-
const
|
|
2044
|
-
this._persistSnapshot(
|
|
2045
|
-
const
|
|
1946
|
+
this._lists.forEach((c) => O(c.id, null)), y.forEach((c) => {
|
|
1947
|
+
M.has(c.id) || (c.parentId = null, F.push(c));
|
|
1948
|
+
}), this._dragState && (this._dragState.committed = !0), this._items = F.map(A), this._clearPointerDragPreview(), this._dragState = null, this._removeDragImage();
|
|
1949
|
+
const q = [...b], g = [...this._selection];
|
|
1950
|
+
this._selection = q, this._focusedId = q[0] || null, this._pendingFocusId = this._focusedId, this._syncAttributesFromState();
|
|
1951
|
+
const S = J(this._items);
|
|
1952
|
+
this._persistSnapshot(S);
|
|
1953
|
+
const T = r.map((c) => s.get(c)).filter((c) => !!c), R = t ? "clone" : e.mode === "inside" ? "nest" : T.some((c) => c.listId !== e.listId) ? "transfer" : "reorder", K = {
|
|
2046
1954
|
items: this.items,
|
|
2047
1955
|
lists: this.lists,
|
|
2048
|
-
selection: [...
|
|
2049
|
-
previousSelection:
|
|
1956
|
+
selection: [...q],
|
|
1957
|
+
previousSelection: g,
|
|
2050
1958
|
movedIds: [...b],
|
|
2051
1959
|
source: i,
|
|
2052
|
-
operation:
|
|
2053
|
-
persistence:
|
|
1960
|
+
operation: R,
|
|
1961
|
+
persistence: S
|
|
2054
1962
|
};
|
|
2055
1963
|
this.dispatchEvent(new CustomEvent("change", {
|
|
2056
1964
|
detail: K,
|
|
@@ -2060,10 +1968,10 @@ class ce extends ee {
|
|
|
2060
1968
|
detail: K,
|
|
2061
1969
|
bubbles: !0,
|
|
2062
1970
|
composed: !0
|
|
2063
|
-
})), this._announce(this._messageForMove(
|
|
1971
|
+
})), this._announce(this._messageForMove(R, b.length, e)), this.requestRender();
|
|
2064
1972
|
}
|
|
2065
1973
|
_syncAttributesFromState() {
|
|
2066
|
-
const e = le(this._lists), r = de(this._items), t =
|
|
1974
|
+
const e = le(this._lists), r = de(this._items), t = U(this._selection);
|
|
2067
1975
|
this._lastListsAttr = e, this._lastItemsAttr = r, this._lastSelectionAttr = t, this._suppressAttributeRender = !0;
|
|
2068
1976
|
try {
|
|
2069
1977
|
this.setAttribute("lists", e), this.setAttribute("items", r), this._selection.length ? this.setAttribute("selection", t) : this.removeAttribute("selection");
|
|
@@ -2072,15 +1980,15 @@ class ce extends ee {
|
|
|
2072
1980
|
}
|
|
2073
1981
|
}
|
|
2074
1982
|
_cloneSubtreeItem(e, r) {
|
|
2075
|
-
const i = `copy-${this._cloneSeed++}`,
|
|
1983
|
+
const i = `copy-${this._cloneSeed++}`, a = `${e.id.includes("--copy-") ? e.id.split("--copy-")[0] : e.id}--${i}`;
|
|
2076
1984
|
return {
|
|
2077
1985
|
...e,
|
|
2078
|
-
id:
|
|
1986
|
+
id: a,
|
|
2079
1987
|
label: r[0] === e.id ? `${e.label} copy` : e.label
|
|
2080
1988
|
};
|
|
2081
1989
|
}
|
|
2082
1990
|
_messageForMove(e, r, t) {
|
|
2083
|
-
const
|
|
1991
|
+
const s = this._lists.find((a) => a.id === t.listId)?.label || t.listId;
|
|
2084
1992
|
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}.`;
|
|
2085
1993
|
}
|
|
2086
1994
|
_persistSnapshot(e) {
|
|
@@ -2095,7 +2003,7 @@ class ce extends ee {
|
|
|
2095
2003
|
this._liveMessage = e, this._applyLiveMessage();
|
|
2096
2004
|
}
|
|
2097
2005
|
_cancelDrag(e) {
|
|
2098
|
-
this._dragState && (this._pendingDropTarget = null, this._setDropTargetVisualState(this._dragState.dropTarget, !1), this._clearPointerDragPreview(), this._items = this._dragState.snapshot.map(
|
|
2006
|
+
this._dragState && (this._pendingDropTarget = null, this._setDropTargetVisualState(this._dragState.dropTarget, !1), this._clearPointerDragPreview(), this._items = this._dragState.snapshot.map(A), this._dragState = null, this._pointerGesture = null, this._removeDragImage(), e && this._announce("Drag cancelled."), this._syncAttributesFromState(), this.requestRender());
|
|
2099
2007
|
}
|
|
2100
2008
|
_applyDragImage(e, r) {
|
|
2101
2009
|
this._removeDragImage();
|
|
@@ -2103,12 +2011,10 @@ class ce extends ee {
|
|
|
2103
2011
|
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;
|
|
2104
2012
|
}
|
|
2105
2013
|
_removeDragImage() {
|
|
2106
|
-
|
|
2107
|
-
(e = this._dragImage) == null || e.remove(), this._dragImage = null;
|
|
2014
|
+
this._dragImage?.remove(), this._dragImage = null;
|
|
2108
2015
|
}
|
|
2109
2016
|
_removeDragPreviewOverlay() {
|
|
2110
|
-
|
|
2111
|
-
(e = this._dragPreviewOverlay) == null || e.remove(), this._dragPreviewOverlay = null;
|
|
2017
|
+
this._dragPreviewOverlay?.remove(), this._dragPreviewOverlay = null;
|
|
2112
2018
|
}
|
|
2113
2019
|
_applyPointerPreview(e, r, t, i) {
|
|
2114
2020
|
this._removeDragImage();
|
|
@@ -2119,35 +2025,31 @@ class ce extends ee {
|
|
|
2119
2025
|
this._dragImage && (this._dragImage.style.transform = `translate(${Math.round(e + 14)}px, ${Math.round(r + 14)}px)`);
|
|
2120
2026
|
}
|
|
2121
2027
|
_keyboardDropTargets() {
|
|
2122
|
-
const e =
|
|
2123
|
-
|
|
2124
|
-
|
|
2125
|
-
|
|
2126
|
-
!d || d.hidden || (t.push({
|
|
2028
|
+
const e = P(this._items), r = $(this._items), t = [], i = (s, a) => {
|
|
2029
|
+
(r.get(D(s, a)) || []).forEach((d) => {
|
|
2030
|
+
const o = e.get(d);
|
|
2031
|
+
!o || o.hidden || (t.push({
|
|
2127
2032
|
listId: s,
|
|
2128
|
-
parentId:
|
|
2129
|
-
beforeId:
|
|
2033
|
+
parentId: a,
|
|
2034
|
+
beforeId: d,
|
|
2130
2035
|
mode: "before",
|
|
2131
|
-
label: `Before ${
|
|
2036
|
+
label: `Before ${o.label}`
|
|
2132
2037
|
}), this.getAttribute("allow-nesting") !== "false" && t.push({
|
|
2133
2038
|
listId: s,
|
|
2134
|
-
parentId:
|
|
2039
|
+
parentId: d,
|
|
2135
2040
|
beforeId: null,
|
|
2136
2041
|
mode: "inside",
|
|
2137
|
-
label: `Nest inside ${
|
|
2138
|
-
}), i(s,
|
|
2042
|
+
label: `Nest inside ${o.label}`
|
|
2043
|
+
}), i(s, d));
|
|
2139
2044
|
}), t.push({
|
|
2140
2045
|
listId: s,
|
|
2141
|
-
parentId:
|
|
2046
|
+
parentId: a,
|
|
2142
2047
|
beforeId: null,
|
|
2143
2048
|
mode: "before",
|
|
2144
|
-
label:
|
|
2049
|
+
label: a ? "After children" : `End of ${this._lists.find((d) => d.id === s)?.label || s}`
|
|
2145
2050
|
});
|
|
2146
2051
|
};
|
|
2147
|
-
return this._lists.forEach((s) => i(s.id, null)), t.filter((s) =>
|
|
2148
|
-
var o;
|
|
2149
|
-
return this._canDrop(s, ((o = this._dragState) == null ? void 0 : o.movedRootIds) || []);
|
|
2150
|
-
});
|
|
2052
|
+
return this._lists.forEach((s) => i(s.id, null)), t.filter((s) => this._canDrop(s, this._dragState?.movedRootIds || []));
|
|
2151
2053
|
}
|
|
2152
2054
|
_initialKeyboardDropTarget(e) {
|
|
2153
2055
|
const r = this._items.find((t) => t.id === e);
|
|
@@ -2159,16 +2061,11 @@ class ce extends ee {
|
|
|
2159
2061
|
} : null;
|
|
2160
2062
|
}
|
|
2161
2063
|
_moveKeyboardDropTarget(e) {
|
|
2162
|
-
if (!this._dragState)
|
|
2163
|
-
return;
|
|
2064
|
+
if (!this._dragState) return;
|
|
2164
2065
|
const r = this._keyboardDropTargets();
|
|
2165
|
-
if (!r.length)
|
|
2166
|
-
return;
|
|
2066
|
+
if (!r.length) return;
|
|
2167
2067
|
const t = Math.max(0, r.findIndex(
|
|
2168
|
-
(s) =>
|
|
2169
|
-
var o, a, l, n, d, c, g, m;
|
|
2170
|
-
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 === ((m = (g = this._dragState) == null ? void 0 : g.dropTarget) == null ? void 0 : m.mode);
|
|
2171
|
-
}
|
|
2068
|
+
(s) => s.listId === this._dragState?.dropTarget?.listId && s.parentId === this._dragState?.dropTarget?.parentId && s.beforeId === this._dragState?.dropTarget?.beforeId && s.mode === this._dragState?.dropTarget?.mode
|
|
2172
2069
|
)), i = Math.max(0, Math.min(r.length - 1, t + e));
|
|
2173
2070
|
this._setDropTarget(r[i], { announceLabel: r[i].label });
|
|
2174
2071
|
}
|