@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
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import { E as
|
|
2
|
-
const
|
|
1
|
+
import { E as b } from "./ElementBase-YlTLMsGk.mjs";
|
|
2
|
+
const _ = {
|
|
3
3
|
sm: "var(--ui-breakpoint-sm, 640px)",
|
|
4
4
|
md: "var(--ui-breakpoint-md, 768px)",
|
|
5
5
|
lg: "var(--ui-breakpoint-lg, 1024px)",
|
|
@@ -20,13 +20,13 @@ const w = {
|
|
|
20
20
|
"aligncontent",
|
|
21
21
|
"justifycontent",
|
|
22
22
|
"placecontent"
|
|
23
|
-
],
|
|
23
|
+
], v = {
|
|
24
24
|
xs: "var(--ui-space-xs, 4px)",
|
|
25
25
|
sm: "var(--ui-space-sm, 8px)",
|
|
26
26
|
md: "var(--ui-space-md, 12px)",
|
|
27
27
|
lg: "var(--ui-space-lg, 20px)",
|
|
28
28
|
xl: "var(--ui-space-xl, 28px)"
|
|
29
|
-
},
|
|
29
|
+
}, w = [
|
|
30
30
|
"data-row",
|
|
31
31
|
"data-column",
|
|
32
32
|
"data-row-span",
|
|
@@ -35,7 +35,7 @@ const w = {
|
|
|
35
35
|
"data-selected",
|
|
36
36
|
"data-disabled",
|
|
37
37
|
"hidden"
|
|
38
|
-
],
|
|
38
|
+
], A = `
|
|
39
39
|
:host {
|
|
40
40
|
--ui-placement-display: grid;
|
|
41
41
|
--ui-placement-columns: 1fr;
|
|
@@ -132,12 +132,10 @@ const w = {
|
|
|
132
132
|
}
|
|
133
133
|
}
|
|
134
134
|
`;
|
|
135
|
-
function
|
|
136
|
-
if (!
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
if (!t.startsWith("{"))
|
|
140
|
-
return null;
|
|
135
|
+
function f(u) {
|
|
136
|
+
if (!u) return null;
|
|
137
|
+
const t = u.trim();
|
|
138
|
+
if (!t.startsWith("{")) return null;
|
|
141
139
|
try {
|
|
142
140
|
const e = JSON.parse(t);
|
|
143
141
|
return !e || typeof e != "object" ? null : e;
|
|
@@ -145,17 +143,16 @@ function b(c) {
|
|
|
145
143
|
return null;
|
|
146
144
|
}
|
|
147
145
|
}
|
|
148
|
-
function h(
|
|
149
|
-
return
|
|
146
|
+
function h(u) {
|
|
147
|
+
return v[u] || u;
|
|
150
148
|
}
|
|
151
|
-
function d(
|
|
152
|
-
if (!
|
|
153
|
-
|
|
154
|
-
const t = Number.parseInt(c, 10);
|
|
149
|
+
function d(u) {
|
|
150
|
+
if (!u) return null;
|
|
151
|
+
const t = Number.parseInt(u, 10);
|
|
155
152
|
return !Number.isFinite(t) || t < 1 ? null : t;
|
|
156
153
|
}
|
|
157
|
-
function
|
|
158
|
-
switch (
|
|
154
|
+
function g(u, t) {
|
|
155
|
+
switch (u) {
|
|
159
156
|
case "display":
|
|
160
157
|
return { "--ui-placement-display": t };
|
|
161
158
|
case "columns":
|
|
@@ -190,7 +187,7 @@ function _(c, t) {
|
|
|
190
187
|
return {};
|
|
191
188
|
}
|
|
192
189
|
}
|
|
193
|
-
class
|
|
190
|
+
class I extends b {
|
|
194
191
|
constructor() {
|
|
195
192
|
super(...arguments), this._lastClassname = "", this._appliedInlineProps = /* @__PURE__ */ new Set(), this._mutationObserver = null, this._suppressMutations = !1, this._focusedValue = null, this._dragItem = null, this._dragOverItem = null, this._onKeyDownBound = (t) => this._onKeyDown(t), this._onClickBound = (t) => this._onClick(t), this._onDragStartBound = (t) => this._onDragStart(t), this._onDragOverBound = (t) => this._onDragOver(t), this._onDropBound = (t) => this._onDrop(t), this._onDragEndBound = () => this._clearDragState();
|
|
196
193
|
}
|
|
@@ -201,8 +198,7 @@ class x extends v {
|
|
|
201
198
|
super.connectedCallback(), this._observeMutations(), this.addEventListener("keydown", this._onKeyDownBound), this.addEventListener("click", this._onClickBound), this.addEventListener("dragstart", this._onDragStartBound), this.addEventListener("dragover", this._onDragOverBound), this.addEventListener("drop", this._onDropBound), this.addEventListener("dragend", this._onDragEndBound);
|
|
202
199
|
}
|
|
203
200
|
disconnectedCallback() {
|
|
204
|
-
|
|
205
|
-
this.removeEventListener("keydown", this._onKeyDownBound), this.removeEventListener("click", this._onClickBound), this.removeEventListener("dragstart", this._onDragStartBound), this.removeEventListener("dragover", this._onDragOverBound), this.removeEventListener("drop", this._onDropBound), this.removeEventListener("dragend", this._onDragEndBound), (t = this._mutationObserver) == null || t.disconnect(), this._mutationObserver = null, this._clearDragState(), super.disconnectedCallback();
|
|
201
|
+
this.removeEventListener("keydown", this._onKeyDownBound), this.removeEventListener("click", this._onClickBound), this.removeEventListener("dragstart", this._onDragStartBound), this.removeEventListener("dragover", this._onDragOverBound), this.removeEventListener("drop", this._onDropBound), this.removeEventListener("dragend", this._onDragEndBound), this._mutationObserver?.disconnect(), this._mutationObserver = null, this._clearDragState(), super.disconnectedCallback();
|
|
206
202
|
}
|
|
207
203
|
refresh() {
|
|
208
204
|
this.requestRender();
|
|
@@ -212,8 +208,8 @@ class x extends v {
|
|
|
212
208
|
e && this._setFocusedItem(e, !0);
|
|
213
209
|
}
|
|
214
210
|
moveItem(t, e, s) {
|
|
215
|
-
const
|
|
216
|
-
|
|
211
|
+
const r = this._resolveItem(t);
|
|
212
|
+
r && this._moveItemTo(r, Math.max(1, e), Math.max(1, s), "api");
|
|
217
213
|
}
|
|
218
214
|
_observeMutations() {
|
|
219
215
|
this._mutationObserver || (this._mutationObserver = new MutationObserver(() => {
|
|
@@ -222,7 +218,7 @@ class x extends v {
|
|
|
222
218
|
childList: !0,
|
|
223
219
|
subtree: !0,
|
|
224
220
|
attributes: !0,
|
|
225
|
-
attributeFilter: [...
|
|
221
|
+
attributeFilter: [...w]
|
|
226
222
|
}));
|
|
227
223
|
}
|
|
228
224
|
_syncLegacyClassname() {
|
|
@@ -236,11 +232,10 @@ class x extends v {
|
|
|
236
232
|
_applyInlineStyles() {
|
|
237
233
|
this._appliedInlineProps.forEach((t) => this.style.removeProperty(t)), this._appliedInlineProps.clear(), p.forEach((t) => {
|
|
238
234
|
const e = this.getAttribute(t);
|
|
239
|
-
if (!e ||
|
|
240
|
-
|
|
241
|
-
|
|
242
|
-
|
|
243
|
-
this.style.setProperty(a, n), this._appliedInlineProps.add(a);
|
|
235
|
+
if (!e || f(e)) return;
|
|
236
|
+
const s = g(t, e);
|
|
237
|
+
Object.entries(s).forEach(([r, i]) => {
|
|
238
|
+
this.style.setProperty(r, i), this._appliedInlineProps.add(r);
|
|
244
239
|
});
|
|
245
240
|
});
|
|
246
241
|
}
|
|
@@ -251,23 +246,22 @@ class x extends v {
|
|
|
251
246
|
lg: {},
|
|
252
247
|
xl: {}
|
|
253
248
|
};
|
|
254
|
-
p.forEach((
|
|
255
|
-
const
|
|
256
|
-
if (!
|
|
257
|
-
|
|
258
|
-
|
|
259
|
-
Object.assign(u, _(r, m));
|
|
249
|
+
p.forEach((a) => {
|
|
250
|
+
const o = this.getAttribute(a), n = f(o);
|
|
251
|
+
if (!n) return;
|
|
252
|
+
const l = (c, m) => {
|
|
253
|
+
Object.assign(c, g(a, m));
|
|
260
254
|
};
|
|
261
|
-
typeof
|
|
255
|
+
typeof n.initial == "string" && l(t, n.initial), typeof n.sm == "string" && l(e.sm, n.sm), typeof n.md == "string" && l(e.md, n.md), typeof n.lg == "string" && l(e.lg, n.lg), typeof n.xl == "string" && l(e.xl, n.xl);
|
|
262
256
|
});
|
|
263
|
-
const s = (
|
|
264
|
-
const
|
|
265
|
-
return
|
|
266
|
-
},
|
|
267
|
-
return
|
|
268
|
-
const
|
|
269
|
-
|
|
270
|
-
}),
|
|
257
|
+
const s = (a, o) => {
|
|
258
|
+
const n = Object.entries(o);
|
|
259
|
+
return n.length ? `${a} { ${n.map(([l, c]) => `${l}: ${c};`).join(" ")} }` : "";
|
|
260
|
+
}, r = [], i = s(":host", t);
|
|
261
|
+
return i && r.push(i), Object.keys(e).forEach((a) => {
|
|
262
|
+
const o = s(":host", e[a]);
|
|
263
|
+
o && r.push(`@media (min-width: ${_[a]}) { ${o} }`);
|
|
264
|
+
}), r.join(`
|
|
271
265
|
`);
|
|
272
266
|
}
|
|
273
267
|
_items() {
|
|
@@ -285,21 +279,21 @@ class x extends v {
|
|
|
285
279
|
_computeItems() {
|
|
286
280
|
const t = this._fallbackColumnCount();
|
|
287
281
|
let e = 0;
|
|
288
|
-
return this._items().map((s,
|
|
289
|
-
let
|
|
290
|
-
const
|
|
291
|
-
if (
|
|
292
|
-
const
|
|
293
|
-
|
|
282
|
+
return this._items().map((s, r) => {
|
|
283
|
+
let i = d(s.getAttribute("data-row")), a = d(s.getAttribute("data-column"));
|
|
284
|
+
const o = d(s.getAttribute("data-row-span")) || 1, n = d(s.getAttribute("data-column-span")) || 1;
|
|
285
|
+
if (i == null || a == null) {
|
|
286
|
+
const l = e++, c = Math.floor(l / t) + 1, m = l % t + 1;
|
|
287
|
+
i == null && (i = c), a == null && (a = m);
|
|
294
288
|
}
|
|
295
289
|
return {
|
|
296
290
|
el: s,
|
|
297
|
-
index:
|
|
298
|
-
row:
|
|
299
|
-
column:
|
|
300
|
-
rowSpan:
|
|
301
|
-
columnSpan:
|
|
302
|
-
value: s.getAttribute("data-value") || s.id || String(
|
|
291
|
+
index: r,
|
|
292
|
+
row: i,
|
|
293
|
+
column: a,
|
|
294
|
+
rowSpan: o,
|
|
295
|
+
columnSpan: n,
|
|
296
|
+
value: s.getAttribute("data-value") || s.id || String(r),
|
|
303
297
|
disabled: s.hasAttribute("disabled") || s.hasAttribute("data-disabled"),
|
|
304
298
|
selected: s.hasAttribute("data-selected")
|
|
305
299
|
};
|
|
@@ -327,143 +321,126 @@ class x extends v {
|
|
|
327
321
|
)) : this.hasAttribute("data-ui-placement-role") && (this.removeAttribute("role"), this.removeAttribute("data-ui-placement-role"), this.removeAttribute("aria-rowcount"), this.removeAttribute("aria-colcount"));
|
|
328
322
|
}
|
|
329
323
|
_setFocusedItem(t, e = !1) {
|
|
330
|
-
const s = this._items(),
|
|
331
|
-
this._focusedValue =
|
|
332
|
-
this._isInteractive() ?
|
|
333
|
-
}), e &&
|
|
324
|
+
const s = this._items(), r = t || s[0] || null;
|
|
325
|
+
this._focusedValue = r && (r.getAttribute("data-value") || r.id) || null, s.forEach((i) => {
|
|
326
|
+
this._isInteractive() ? i.tabIndex = i === r ? 0 : -1 : i.removeAttribute("tabindex");
|
|
327
|
+
}), e && r && r.focus({ preventScroll: !0 });
|
|
334
328
|
}
|
|
335
329
|
_syncItems() {
|
|
336
|
-
var s, a;
|
|
337
330
|
const t = this._computeItems(), e = this._order() === "row-major" ? this._sortMeta(t) : t;
|
|
338
331
|
this._suppressMutations = !0;
|
|
339
332
|
try {
|
|
340
333
|
this._order() === "row-major" && e.forEach((r) => this.appendChild(r.el)), this._syncHostSemantics(e);
|
|
341
|
-
const
|
|
334
|
+
const s = e.find((r) => r.value === this._focusedValue)?.el || e[0]?.el || null;
|
|
342
335
|
e.forEach((r) => {
|
|
343
336
|
r.el.style.gridColumn = `${r.column} / span ${r.columnSpan}`, r.el.style.gridRow = `${r.row} / span ${r.rowSpan}`, r.el.style.minInlineSize = "0", r.el.style.boxSizing = "border-box", this._isInteractive() ? (r.el.hasAttribute("role") || r.el.setAttribute("role", "gridcell"), r.el.setAttribute("aria-rowindex", String(r.row)), r.el.setAttribute("aria-colindex", String(r.column)), r.columnSpan > 1 ? r.el.setAttribute("aria-colspan", String(r.columnSpan)) : r.el.removeAttribute("aria-colspan"), r.rowSpan > 1 ? r.el.setAttribute("aria-rowspan", String(r.rowSpan)) : r.el.removeAttribute("aria-rowspan"), r.selected ? r.el.setAttribute("aria-selected", "true") : r.el.removeAttribute("aria-selected"), r.disabled ? r.el.setAttribute("aria-disabled", "true") : r.el.removeAttribute("aria-disabled")) : (r.el.removeAttribute("aria-rowindex"), r.el.removeAttribute("aria-colindex"), r.el.removeAttribute("aria-rowspan"), r.el.removeAttribute("aria-colspan"), r.el.removeAttribute("aria-selected"), r.el.removeAttribute("aria-disabled")), this._isDraggable() && !r.disabled ? (r.el.setAttribute("data-draggable", ""), r.el.setAttribute("draggable", "true")) : (r.el.removeAttribute("data-draggable"), r.el.removeAttribute("draggable"));
|
|
344
|
-
}), this._setFocusedItem(
|
|
337
|
+
}), this._setFocusedItem(s, !1);
|
|
345
338
|
} finally {
|
|
346
339
|
this._suppressMutations = !1;
|
|
347
340
|
}
|
|
348
341
|
}
|
|
349
342
|
_findItemFromTarget(t) {
|
|
350
|
-
if (!(t instanceof Element))
|
|
351
|
-
return null;
|
|
343
|
+
if (!(t instanceof Element)) return null;
|
|
352
344
|
const e = t.closest("[data-ui-placement-item]");
|
|
353
345
|
return e instanceof HTMLElement && this.contains(e) ? e : null;
|
|
354
346
|
}
|
|
355
347
|
_metaForItem(t) {
|
|
356
348
|
return this._computeItems().find((e) => e.el === t) || null;
|
|
357
349
|
}
|
|
358
|
-
_intervalsOverlap(t, e, s,
|
|
359
|
-
const
|
|
360
|
-
return t <=
|
|
350
|
+
_intervalsOverlap(t, e, s, r) {
|
|
351
|
+
const i = t + e - 1, a = s + r - 1;
|
|
352
|
+
return t <= a && s <= i;
|
|
361
353
|
}
|
|
362
354
|
_findNeighbor(t, e) {
|
|
363
|
-
|
|
364
|
-
|
|
365
|
-
|
|
366
|
-
|
|
367
|
-
|
|
368
|
-
|
|
369
|
-
const i = this._order() === "row-major" ? this._sortMeta(this._computeItems()) : this._computeItems(), o = i.findIndex((m) => m.el === t.el);
|
|
370
|
-
return ((r = i[o + (e === "left" || e === "up" ? -1 : 1)]) == null ? void 0 : r.el) || null;
|
|
355
|
+
const s = this._computeItems().filter((a) => !a.disabled && a.el !== t.el);
|
|
356
|
+
if (!s.length) return null;
|
|
357
|
+
const r = s.filter((a) => e === "left" || e === "right" ? this._intervalsOverlap(t.row, t.rowSpan, a.row, a.rowSpan) ? e === "left" ? a.column < t.column : a.column > t.column : !1 : this._intervalsOverlap(t.column, t.columnSpan, a.column, a.columnSpan) ? e === "up" ? a.row < t.row : a.row > t.row : !1);
|
|
358
|
+
if (!r.length) {
|
|
359
|
+
const a = this._order() === "row-major" ? this._sortMeta(this._computeItems()) : this._computeItems(), o = a.findIndex((l) => l.el === t.el);
|
|
360
|
+
return a[o + (e === "left" || e === "up" ? -1 : 1)]?.el || null;
|
|
371
361
|
}
|
|
372
|
-
return
|
|
362
|
+
return r.sort((a, o) => {
|
|
373
363
|
if (e === "left" || e === "right") {
|
|
374
|
-
const
|
|
375
|
-
return
|
|
364
|
+
const c = Math.abs(a.column - t.column), m = Math.abs(o.column - t.column);
|
|
365
|
+
return c !== m ? c - m : Math.abs(a.row - t.row) - Math.abs(o.row - t.row);
|
|
376
366
|
}
|
|
377
|
-
const
|
|
378
|
-
return
|
|
379
|
-
})[0]
|
|
367
|
+
const n = Math.abs(a.row - t.row), l = Math.abs(o.row - t.row);
|
|
368
|
+
return n !== l ? n - l : Math.abs(a.column - t.column) - Math.abs(o.column - t.column);
|
|
369
|
+
})[0]?.el || null;
|
|
380
370
|
}
|
|
381
|
-
_moveItemTo(t, e, s,
|
|
382
|
-
const
|
|
383
|
-
!
|
|
371
|
+
_moveItemTo(t, e, s, r) {
|
|
372
|
+
const i = this._metaForItem(t);
|
|
373
|
+
!i || i.disabled || (t.setAttribute("data-row", String(e)), t.setAttribute("data-column", String(s)), this.dispatchEvent(
|
|
384
374
|
new CustomEvent("itemmove", {
|
|
385
375
|
bubbles: !0,
|
|
386
376
|
composed: !0,
|
|
387
377
|
detail: {
|
|
388
|
-
value:
|
|
389
|
-
reason:
|
|
390
|
-
from: { row:
|
|
378
|
+
value: i.value,
|
|
379
|
+
reason: r,
|
|
380
|
+
from: { row: i.row, column: i.column },
|
|
391
381
|
to: { row: e, column: s }
|
|
392
382
|
}
|
|
393
383
|
})
|
|
394
384
|
), this.requestRender());
|
|
395
385
|
}
|
|
396
386
|
_swapItems(t, e, s) {
|
|
397
|
-
const
|
|
398
|
-
!
|
|
387
|
+
const r = this._metaForItem(t), i = this._metaForItem(e);
|
|
388
|
+
!r || !i || (t.setAttribute("data-row", String(i.row)), t.setAttribute("data-column", String(i.column)), e.setAttribute("data-row", String(r.row)), e.setAttribute("data-column", String(r.column)), this.dispatchEvent(
|
|
399
389
|
new CustomEvent("itemmove", {
|
|
400
390
|
bubbles: !0,
|
|
401
391
|
composed: !0,
|
|
402
392
|
detail: {
|
|
403
|
-
value:
|
|
404
|
-
targetValue:
|
|
393
|
+
value: r.value,
|
|
394
|
+
targetValue: i.value,
|
|
405
395
|
reason: s,
|
|
406
|
-
from: { row:
|
|
407
|
-
to: { row:
|
|
396
|
+
from: { row: r.row, column: r.column },
|
|
397
|
+
to: { row: i.row, column: i.column }
|
|
408
398
|
}
|
|
409
399
|
})
|
|
410
400
|
), this.requestRender());
|
|
411
401
|
}
|
|
412
402
|
_onClick(t) {
|
|
413
|
-
if (!this._isInteractive())
|
|
414
|
-
return;
|
|
403
|
+
if (!this._isInteractive()) return;
|
|
415
404
|
const e = this._findItemFromTarget(t.target);
|
|
416
405
|
e && this._setFocusedItem(e, !1);
|
|
417
406
|
}
|
|
418
407
|
_onKeyDown(t) {
|
|
419
|
-
|
|
420
|
-
if (!this._isInteractive())
|
|
421
|
-
return;
|
|
408
|
+
if (!this._isInteractive()) return;
|
|
422
409
|
const e = this._findItemFromTarget(t.target);
|
|
423
|
-
if (!e)
|
|
424
|
-
return;
|
|
410
|
+
if (!e) return;
|
|
425
411
|
const s = this._metaForItem(e);
|
|
426
|
-
if (!s || s.disabled)
|
|
427
|
-
|
|
428
|
-
|
|
429
|
-
if (t.altKey && this._isDraggable() && n) {
|
|
412
|
+
if (!s || s.disabled) return;
|
|
413
|
+
const r = t.key, i = r === "ArrowLeft" || r === "ArrowRight" || r === "ArrowUp" || r === "ArrowDown";
|
|
414
|
+
if (t.altKey && this._isDraggable() && i) {
|
|
430
415
|
t.preventDefault();
|
|
431
|
-
const o =
|
|
432
|
-
this._moveItemTo(e, Math.max(1, s.row + o), Math.max(1, s.column +
|
|
416
|
+
const o = r === "ArrowDown" ? 1 : r === "ArrowUp" ? -1 : 0, n = r === "ArrowRight" ? 1 : r === "ArrowLeft" ? -1 : 0;
|
|
417
|
+
this._moveItemTo(e, Math.max(1, s.row + o), Math.max(1, s.column + n), "keyboard"), this._setFocusedItem(e, !0);
|
|
433
418
|
return;
|
|
434
419
|
}
|
|
435
|
-
let
|
|
436
|
-
if (
|
|
437
|
-
|
|
438
|
-
else if (
|
|
439
|
-
|
|
440
|
-
else if (a === "
|
|
441
|
-
|
|
442
|
-
else if (a === "ArrowDown")
|
|
443
|
-
r = this._findNeighbor(s, "down");
|
|
444
|
-
else if (a === "Home")
|
|
445
|
-
r = ((l = (this._order() === "row-major" ? this._sortMeta(this._computeItems()) : this._computeItems())[0]) == null ? void 0 : l.el) || null;
|
|
446
|
-
else if (a === "End") {
|
|
420
|
+
let a = null;
|
|
421
|
+
if (r === "ArrowLeft") a = this._findNeighbor(s, "left");
|
|
422
|
+
else if (r === "ArrowRight") a = this._findNeighbor(s, "right");
|
|
423
|
+
else if (r === "ArrowUp") a = this._findNeighbor(s, "up");
|
|
424
|
+
else if (r === "ArrowDown") a = this._findNeighbor(s, "down");
|
|
425
|
+
else if (r === "Home") a = (this._order() === "row-major" ? this._sortMeta(this._computeItems()) : this._computeItems())[0]?.el || null;
|
|
426
|
+
else if (r === "End") {
|
|
447
427
|
const o = this._order() === "row-major" ? this._sortMeta(this._computeItems()) : this._computeItems();
|
|
448
|
-
|
|
428
|
+
a = o[o.length - 1]?.el || null;
|
|
449
429
|
}
|
|
450
|
-
|
|
430
|
+
a && (t.preventDefault(), this._setFocusedItem(a, !0));
|
|
451
431
|
}
|
|
452
432
|
_onDragStart(t) {
|
|
453
|
-
if (!this._isDraggable())
|
|
454
|
-
return;
|
|
433
|
+
if (!this._isDraggable()) return;
|
|
455
434
|
const e = this._findItemFromTarget(t.target);
|
|
456
435
|
!e || e.hasAttribute("data-disabled") || (this._dragItem = e, e.setAttribute("data-dragging", ""), t.dataTransfer && (t.dataTransfer.effectAllowed = "move", t.dataTransfer.setData("text/plain", e.getAttribute("data-value") || e.id || "")));
|
|
457
436
|
}
|
|
458
437
|
_onDragOver(t) {
|
|
459
|
-
if (!this._dragItem)
|
|
460
|
-
return;
|
|
438
|
+
if (!this._dragItem) return;
|
|
461
439
|
const e = this._findItemFromTarget(t.target);
|
|
462
440
|
!e || e === this._dragItem || (t.preventDefault(), this._dragOverItem && this._dragOverItem !== e && this._dragOverItem.removeAttribute("data-drag-over"), this._dragOverItem = e, e.setAttribute("data-drag-over", ""));
|
|
463
441
|
}
|
|
464
442
|
_onDrop(t) {
|
|
465
|
-
if (!this._dragItem)
|
|
466
|
-
return;
|
|
443
|
+
if (!this._dragItem) return;
|
|
467
444
|
const e = this._findItemFromTarget(t.target);
|
|
468
445
|
t.preventDefault(), e && e !== this._dragItem && (this._swapItems(this._dragItem, e, "pointer"), this._setFocusedItem(this._dragItem, !1)), this._clearDragState();
|
|
469
446
|
}
|
|
@@ -473,14 +450,14 @@ class x extends v {
|
|
|
473
450
|
render() {
|
|
474
451
|
this._syncLegacyClassname(), this._applyInlineStyles(), this._syncItems();
|
|
475
452
|
const t = this._buildResponsiveCss();
|
|
476
|
-
this.setContent(`<style>${
|
|
453
|
+
this.setContent(`<style>${A}${t ? `
|
|
477
454
|
${t}` : ""}</style><slot></slot>`);
|
|
478
455
|
}
|
|
479
456
|
shouldRenderOnAttributeChange(t, e, s) {
|
|
480
457
|
return !0;
|
|
481
458
|
}
|
|
482
459
|
}
|
|
483
|
-
typeof customElements < "u" && !customElements.get("ui-placement-grid") && customElements.define("ui-placement-grid",
|
|
460
|
+
typeof customElements < "u" && !customElements.get("ui-placement-grid") && customElements.define("ui-placement-grid", I);
|
|
484
461
|
export {
|
|
485
|
-
|
|
462
|
+
I as UIPlacementGrid
|
|
486
463
|
};
|
package/dist/plugin-panel.cjs.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const s=require("./ElementBase-
|
|
1
|
+
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const s=require("./ElementBase-EV6mVBUV.js"),o=`
|
|
2
2
|
:host {
|
|
3
3
|
position: fixed;
|
|
4
4
|
display: block;
|
|
@@ -114,18 +114,18 @@
|
|
|
114
114
|
transition: none !important;
|
|
115
115
|
}
|
|
116
116
|
}
|
|
117
|
-
`;class
|
|
118
|
-
<style>${
|
|
119
|
-
<aside class="panel" part="panel" role="complementary" aria-label="${e||"Plugin panel"}" data-size="${
|
|
120
|
-
${e||t||
|
|
117
|
+
`;class a extends s.ElementBase{constructor(){super(...arguments),this._onDocumentKeyDown=e=>{e.key!=="Escape"||!this.hasAttribute("open")||!this.hasAttribute("dismissible")||(e.preventDefault(),this.closePanel())}}static get observedAttributes(){return["open","position","headless","title","description","dismissible","size"]}connectedCallback(){super.connectedCallback(),document.addEventListener("keydown",this._onDocumentKeyDown)}disconnectedCallback(){document.removeEventListener("keydown",this._onDocumentKeyDown),super.disconnectedCallback()}openPanel(){this.setAttribute("open","")}closePanel(){this.removeAttribute("open")}togglePanel(){this.hasAttribute("open")?this.closePanel():this.openPanel()}attributeChangedCallback(e,t,i){if(t!==i&&(this.isConnected&&this.requestRender(),e==="open"&&t!==i)){const n=i!=null;this.dispatchEvent(new CustomEvent(n?"open":"close",{bubbles:!0,composed:!0})),this.dispatchEvent(new CustomEvent("open-change",{detail:{open:n},bubbles:!0,composed:!0}))}}render(){const e=this.getAttribute("title"),t=this.getAttribute("description"),i=this.hasAttribute("dismissible"),n=this.getAttribute("size")||"md";this.setContent(`
|
|
118
|
+
<style>${o}</style>
|
|
119
|
+
<aside class="panel" part="panel" role="complementary" aria-label="${e||"Plugin panel"}" data-size="${n}">
|
|
120
|
+
${e||t||i?`
|
|
121
121
|
<header class="header" part="header" style="display:flex;align-items:flex-start;gap:10px;padding:12px 14px 0;">
|
|
122
122
|
<div style="min-width:0;display:grid;gap:4px;flex:1 1 auto;">
|
|
123
123
|
${e?`<strong part="title" style="font-size:14px;line-height:1.3;">${e}</strong>`:""}
|
|
124
124
|
${t?`<p part="description" style="margin:0;font-size:12px;line-height:1.4;color:var(--ui-color-muted, #64748b);">${t}</p>`:""}
|
|
125
125
|
</div>
|
|
126
|
-
${
|
|
126
|
+
${i?'<button type="button" class="dismiss" part="dismiss-button" aria-label="Close panel" style="border:none;background:transparent;color:inherit;cursor:pointer;font:inherit;padding:4px 6px;">Close</button>':""}
|
|
127
127
|
</header>
|
|
128
128
|
`:""}
|
|
129
129
|
<slot></slot>
|
|
130
130
|
</aside>
|
|
131
|
-
`)
|
|
131
|
+
`),this.root.querySelector(".dismiss")?.addEventListener("click",()=>this.closePanel(),{once:!0})}}typeof customElements<"u"&&!customElements.get("ui-plugin-panel")&&customElements.define("ui-plugin-panel",a);exports.UIPluginPanel=a;
|
package/dist/plugin-panel.esm.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { E as
|
|
1
|
+
import { E as a } from "./ElementBase-YlTLMsGk.mjs";
|
|
2
2
|
const s = `
|
|
3
3
|
:host {
|
|
4
4
|
position: fixed;
|
|
@@ -116,7 +116,7 @@ const s = `
|
|
|
116
116
|
}
|
|
117
117
|
}
|
|
118
118
|
`;
|
|
119
|
-
class
|
|
119
|
+
class o extends a {
|
|
120
120
|
constructor() {
|
|
121
121
|
super(...arguments), this._onDocumentKeyDown = (e) => {
|
|
122
122
|
e.key !== "Escape" || !this.hasAttribute("open") || !this.hasAttribute("dismissible") || (e.preventDefault(), this.closePanel());
|
|
@@ -140,34 +140,32 @@ class r extends o {
|
|
|
140
140
|
togglePanel() {
|
|
141
141
|
this.hasAttribute("open") ? this.closePanel() : this.openPanel();
|
|
142
142
|
}
|
|
143
|
-
attributeChangedCallback(e, t,
|
|
144
|
-
if (t !==
|
|
145
|
-
const
|
|
146
|
-
this.dispatchEvent(new CustomEvent(
|
|
143
|
+
attributeChangedCallback(e, t, i) {
|
|
144
|
+
if (t !== i && (this.isConnected && this.requestRender(), e === "open" && t !== i)) {
|
|
145
|
+
const n = i != null;
|
|
146
|
+
this.dispatchEvent(new CustomEvent(n ? "open" : "close", { bubbles: !0, composed: !0 })), this.dispatchEvent(new CustomEvent("open-change", { detail: { open: n }, bubbles: !0, composed: !0 }));
|
|
147
147
|
}
|
|
148
148
|
}
|
|
149
149
|
render() {
|
|
150
|
-
const e = this.getAttribute("title"), t = this.getAttribute("description"),
|
|
150
|
+
const e = this.getAttribute("title"), t = this.getAttribute("description"), i = this.hasAttribute("dismissible"), n = this.getAttribute("size") || "md";
|
|
151
151
|
this.setContent(`
|
|
152
152
|
<style>${s}</style>
|
|
153
|
-
<aside class="panel" part="panel" role="complementary" aria-label="${e || "Plugin panel"}" data-size="${
|
|
154
|
-
${e || t ||
|
|
153
|
+
<aside class="panel" part="panel" role="complementary" aria-label="${e || "Plugin panel"}" data-size="${n}">
|
|
154
|
+
${e || t || i ? `
|
|
155
155
|
<header class="header" part="header" style="display:flex;align-items:flex-start;gap:10px;padding:12px 14px 0;">
|
|
156
156
|
<div style="min-width:0;display:grid;gap:4px;flex:1 1 auto;">
|
|
157
157
|
${e ? `<strong part="title" style="font-size:14px;line-height:1.3;">${e}</strong>` : ""}
|
|
158
158
|
${t ? `<p part="description" style="margin:0;font-size:12px;line-height:1.4;color:var(--ui-color-muted, #64748b);">${t}</p>` : ""}
|
|
159
159
|
</div>
|
|
160
|
-
${
|
|
160
|
+
${i ? '<button type="button" class="dismiss" part="dismiss-button" aria-label="Close panel" style="border:none;background:transparent;color:inherit;cursor:pointer;font:inherit;padding:4px 6px;">Close</button>' : ""}
|
|
161
161
|
</header>
|
|
162
162
|
` : ""}
|
|
163
163
|
<slot></slot>
|
|
164
164
|
</aside>
|
|
165
|
-
`);
|
|
166
|
-
const a = this.root.querySelector(".dismiss");
|
|
167
|
-
a == null || a.addEventListener("click", () => this.closePanel(), { once: !0 });
|
|
165
|
+
`), this.root.querySelector(".dismiss")?.addEventListener("click", () => this.closePanel(), { once: !0 });
|
|
168
166
|
}
|
|
169
167
|
}
|
|
170
|
-
typeof customElements < "u" && !customElements.get("ui-plugin-panel") && customElements.define("ui-plugin-panel",
|
|
168
|
+
typeof customElements < "u" && !customElements.get("ui-plugin-panel") && customElements.define("ui-plugin-panel", o);
|
|
171
169
|
export {
|
|
172
|
-
|
|
170
|
+
o as UIPluginPanel
|
|
173
171
|
};
|
package/dist/popover.cjs.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const h=require("./ElementBase-
|
|
1
|
+
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const h=require("./ElementBase-EV6mVBUV.js"),f=require("./portal-DgpQ3Jo1.js"),b=require("./dismissable-layer-DNfrKA20.js"),g=require("./positioner-D_fqyx_j.js"),m=`
|
|
2
2
|
.popover-shell {
|
|
3
3
|
--ui-popover-accent: var(--ui-color-primary, var(--ui-primary, #2563eb));
|
|
4
4
|
--ui-popover-bg:
|
|
@@ -283,4 +283,4 @@
|
|
|
283
283
|
box-shadow: none;
|
|
284
284
|
}
|
|
285
285
|
}
|
|
286
|
-
`;class d extends h.ElementBase{constructor(){super(),this._portalEl=null,this._panelEl=null,this._positioner=null,this._layer=null,this._isOpen=!1,this._restoreFocusEl=null,this._contentObserver=null,this._hostObserver=null,this._syncPortalScheduled=!1,this._onHostClick=this._handleHostClick.bind(this)}static get observedAttributes(){return["open","placement","offset","flip","shift","close-on-escape","close-on-outside","variant","tone","size","radius","elevation"]}attributeChangedCallback(e,t,r){
|
|
286
|
+
`;class d extends h.ElementBase{constructor(){super(),this._portalEl=null,this._panelEl=null,this._positioner=null,this._layer=null,this._isOpen=!1,this._restoreFocusEl=null,this._contentObserver=null,this._hostObserver=null,this._syncPortalScheduled=!1,this._onHostClick=this._handleHostClick.bind(this)}static get observedAttributes(){return["open","placement","offset","flip","shift","close-on-escape","close-on-outside","variant","tone","size","radius","elevation"]}attributeChangedCallback(e,t,r){if(t!==r){if(e==="open"){this._syncOpenState();return}this._isOpen&&this._portalEl?.isConnected&&(e==="placement"||e==="offset"||e==="flip"||e==="shift"||e==="variant"||e==="tone"||e==="size"||e==="radius"||e==="elevation"?this._mountPortal():(e==="close-on-escape"||e==="close-on-outside")&&this._syncDismissableLayer())}}connectedCallback(){super.connectedCallback(),this.addEventListener("click",this._onHostClick),this._observeHost(),this._syncOpenState()}disconnectedCallback(){this.removeEventListener("click",this._onHostClick),this._hostObserver?.disconnect(),this._hostObserver=null,this._teardownPortal(),super.disconnectedCallback()}_handleHostClick(e){const t=this._getTrigger();if(!t)return;const r=typeof e.composedPath=="function"?e.composedPath():[],o=e.target instanceof Node?e.target:null;(r.includes(t)||o&&(t===o||t.contains(o)))&&this.toggle()}open(){this.setAttribute("open","")}close(){this.removeAttribute("open")}toggle(){this.hasAttribute("open")?this.close():this.open()}updatePosition(){this._positioner?.update()}_getTrigger(){return this.querySelector('[slot="trigger"]')}_buildPortalContent(){const e=document.createElement("div");e.className="popover-shell",e.style.pointerEvents="auto";const t=this.getAttribute("variant");t&&(e.dataset.variant=t);const r=this.getAttribute("tone");r&&(e.dataset.tone=r);const o=this.getAttribute("size");o&&(e.dataset.size=o);const a=this.getAttribute("elevation");a&&(e.dataset.elevation=a);const s=this.getAttribute("radius");if(s&&s.trim()){const p=s.trim(),v=/^-?\d+(\.\d+)?$/.test(p)?`${p}px`:p;e.style.setProperty("--ui-popover-radius",v)}const l=document.createElement("style");l.textContent=m,e.appendChild(l);const i=document.createElement("div");i.className="panel show",this._panelEl=i;const c=document.createElement("div");c.className="arrow",i.appendChild(c);const u=this.querySelector('[slot="content"]'),n=document.createElement("div");return n.className="content",u&&n.appendChild(u.cloneNode(!0)),i.appendChild(n),e.appendChild(i),e}_getContentSource(){return this.querySelector('[slot="content"]')}_placement(){const e=this.getAttribute("placement");return e||"bottom"}_offset(){const e=Number(this.getAttribute("offset"));return Number.isFinite(e)?e:8}_closeOnEscape(){return this.getAttribute("close-on-escape")!=="false"}_closeOnOutside(){return this.getAttribute("close-on-outside")!=="false"}_syncDismissableLayer(){const e=this._getTrigger();!e||!this._panelEl||(this._layer?.destroy(),this._layer=b.createDismissableLayer({node:this._panelEl,trigger:e,closeOnEscape:this._closeOnEscape(),closeOnPointerOutside:this._closeOnOutside(),onDismiss:()=>this.close()}))}_teardownPortal(){if(this._contentObserver?.disconnect(),this._contentObserver=null,this._layer?.destroy(),this._layer=null,this._positioner?.destroy(),this._positioner=null,this._panelEl=null,this._portalEl?.parentElement)try{this._portalEl.parentElement.removeChild(this._portalEl)}catch{}this._portalEl=null}_schedulePortalSync(){this._syncPortalScheduled||!this._isOpen||(this._syncPortalScheduled=!0,queueMicrotask(()=>{this._syncPortalScheduled=!1,this._isOpen&&this._mountPortal()}))}_observeContent(){this._contentObserver?.disconnect(),this._contentObserver=null;const e=this._getContentSource();!e||typeof MutationObserver>"u"||(this._contentObserver=new MutationObserver(()=>this._schedulePortalSync()),this._contentObserver.observe(e,{attributes:!0,childList:!0,characterData:!0,subtree:!0}))}_observeHost(){this._hostObserver?.disconnect(),this._hostObserver=null,!(typeof MutationObserver>"u")&&(this._hostObserver=new MutationObserver(()=>this._schedulePortalSync()),this._hostObserver.observe(this,{childList:!0,subtree:!1}))}_mountPortal(){const e=this._getTrigger();if(!e)return;this._teardownPortal(),this._portalEl=this._buildPortalContent();const t=f.createPortalContainer();t&&(t.appendChild(this._portalEl),this._observeContent(),this._positioner=g.createPositioner({anchor:e,floating:this._portalEl,placement:this._placement(),offset:this._offset(),shift:this.getAttribute("shift")!=="false",flip:this.getAttribute("flip")!=="false",arrow:this._portalEl.querySelector(".arrow")}),this._syncDismissableLayer())}_syncOpenState(){const e=this.hasAttribute("open");if(e===this._isOpen){e&&(!this._portalEl||!this._portalEl.isConnected?this._mountPortal():this._positioner?.update());return}if(this._isOpen=e,e){this._restoreFocusEl=document.activeElement instanceof HTMLElement?document.activeElement:null,this._mountPortal(),this.dispatchEvent(new CustomEvent("open",{bubbles:!0,composed:!0})),this.dispatchEvent(new CustomEvent("open-change",{detail:{open:!0},bubbles:!0,composed:!0}));return}this._teardownPortal(),this.dispatchEvent(new CustomEvent("close",{bubbles:!0,composed:!0})),this.dispatchEvent(new CustomEvent("open-change",{detail:{open:!1},bubbles:!0,composed:!0}));const t=this._getTrigger(),r=this._restoreFocusEl;this._restoreFocusEl=null;const o=(t&&t.isConnected?t:r)||null;if(o&&o.isConnected)try{o.focus()}catch{}}render(){this.setContent('<slot name="trigger"></slot>')}shouldRenderOnAttributeChange(e,t,r){return!1}}typeof customElements<"u"&&!customElements.get("ui-popover")&&customElements.define("ui-popover",d);exports.UIPopover=d;
|