@avento-space/ts-ui 1.2.3 → 1.2.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +180 -187
- package/dist/{card.wc-CLzyZAbJ.d.ts → card.wc-83Ws3o27.d.ts} +1 -1
- package/dist/{chunk-PIXJHFME.js → chunk-47AXL5HN.js} +79 -17
- package/dist/chunk-47AXL5HN.js.map +1 -0
- package/dist/{chunk-2UKGVIH2.js → chunk-6Y6GA2QS.js} +538 -371
- package/dist/chunk-6Y6GA2QS.js.map +1 -0
- package/dist/{chunk-NUMML2ZR.js → chunk-FPZL7HOP.js} +4 -4
- package/dist/{chunk-NUMML2ZR.js.map → chunk-FPZL7HOP.js.map} +1 -1
- package/dist/{chunk-NJHLJNRI.js → chunk-Q4KFLERV.js} +3 -3
- package/dist/chunk-Q4KFLERV.js.map +1 -0
- package/dist/chunk-YRHQNIPK.js +3 -0
- package/dist/{chunk-T7QLIHHU.js.map → chunk-YRHQNIPK.js.map} +1 -1
- package/dist/components/index.d.ts +9 -10
- package/dist/components/index.js +3 -3
- package/dist/define.js +4 -4
- package/dist/icons/index.js +2 -2
- package/dist/index.d.ts +2 -2
- package/dist/index.js +5 -5
- package/dist/react/index.d.ts +1 -1
- package/dist/slot.wc-BvIJg5UJ.d.ts +11 -0
- package/package.json +12 -1
- package/tailwind-plugin.cjs +236 -0
- package/dist/chunk-2UKGVIH2.js.map +0 -1
- package/dist/chunk-NJHLJNRI.js.map +0 -1
- package/dist/chunk-PIXJHFME.js.map +0 -1
- package/dist/chunk-T7QLIHHU.js +0 -3
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { UElement, buttonStyles, inputStyles, boxStyles, listStyles, textStyles, stackStyles, gridStyles, overlayStyles, fieldStyles, checkboxStyles, selectStyles, linkStyles, containerStyles, dialogStyles, tooltipStyles, textareaStyles, radioStyles, switchStyles, labelStyles, treeStyles, tableStyles, breadcrumbStyles, tabsStyles, visuallyHiddenStyles, presenceStyles, animateKeyframes, modalStyles, drawerStyles, popoverStyles, dropdownStyles, accordionStyles, comboboxStyles, calendarStyles, dataTableStyles, commandPaletteStyles, toastStyles, contextMenuStyles, sortableStyles, formStyles, badgeStyles, cardStyles } from './chunk-
|
|
1
|
+
import { UElement, buttonStyles, inputStyles, boxStyles, listStyles, textStyles, stackStyles, gridStyles, overlayStyles, fieldStyles, checkboxStyles, selectStyles, linkStyles, containerStyles, dialogStyles, tooltipStyles, textareaStyles, radioStyles, switchStyles, labelStyles, treeStyles, tableStyles, breadcrumbStyles, tabsStyles, visuallyHiddenStyles, presenceStyles, animateKeyframes, modalStyles, drawerStyles, popoverStyles, dropdownStyles, accordionStyles, comboboxStyles, calendarStyles, dataTableStyles, commandPaletteStyles, toastStyles, contextMenuStyles, sortableStyles, formStyles, badgeStyles, cardStyles } from './chunk-6Y6GA2QS.js';
|
|
2
2
|
import { signal, effect } from './chunk-Q5RCPPCF.js';
|
|
3
3
|
|
|
4
4
|
// src/components/button.wc.ts
|
|
@@ -98,7 +98,7 @@ var UInput = class extends UElement {
|
|
|
98
98
|
this._readonly = false;
|
|
99
99
|
this._inputType = "text";
|
|
100
100
|
this._inputName = "";
|
|
101
|
-
this._root.innerHTML = `<style>${inputStyles}</style><div class="input-wrapper"><input part="input" /></div>`;
|
|
101
|
+
this._root.innerHTML = `<style>${inputStyles}</style><div part="wrapper" class="input-wrapper"><input part="input" /></div>`;
|
|
102
102
|
}
|
|
103
103
|
static get observedAttributes() {
|
|
104
104
|
return ["placeholder", "disabled", "readonly", "type", "name", "class"];
|
|
@@ -436,6 +436,7 @@ var UVirtualList = class extends UElement {
|
|
|
436
436
|
for (let i = startIndex; i < endIndex; i++) {
|
|
437
437
|
const div = document.createElement("div");
|
|
438
438
|
div.className = "item";
|
|
439
|
+
div.setAttribute("part", "item");
|
|
439
440
|
div.style.top = `${i * this._itemHeight}px`;
|
|
440
441
|
div.style.height = `${this._itemHeight}px`;
|
|
441
442
|
const content = this._renderItem(this._items[i], i);
|
|
@@ -1145,7 +1146,7 @@ var UCheckbox = class extends UElement {
|
|
|
1145
1146
|
this._checked = false;
|
|
1146
1147
|
this._disabled = false;
|
|
1147
1148
|
this._value = "";
|
|
1148
|
-
this._root.innerHTML = `<style>${checkboxStyles}</style><label part="checkbox" class="checkbox"><input type="checkbox" part="input" /><span part="indicator" class="checkbox-indicator"><svg viewBox="0 0 12 12" width="12" height="12"><path d="M2.5 6L5 8.5L9.5 3.5" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg></span
|
|
1149
|
+
this._root.innerHTML = `<style>${checkboxStyles}</style><label part="checkbox" class="checkbox"><input type="checkbox" part="input" /><span part="indicator" class="checkbox-indicator"><svg viewBox="0 0 12 12" width="12" height="12"><path d="M2.5 6L5 8.5L9.5 3.5" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg></span><!-- @deprecated label-text \u2192 use part="label" --><span part="label-text label" class="checkbox-label"><slot></slot></span></label>`;
|
|
1149
1150
|
}
|
|
1150
1151
|
static get observedAttributes() {
|
|
1151
1152
|
return ["checked", "disabled", "value", "class"];
|
|
@@ -1993,7 +1994,7 @@ var UTooltipRoot = class extends UElement {
|
|
|
1993
1994
|
this._disabled = false;
|
|
1994
1995
|
this._showTimeout = null;
|
|
1995
1996
|
this._hideTimeout = null;
|
|
1996
|
-
this._root.innerHTML = `<style>${tooltipStyles}</style><div part="trigger" class="tooltip-trigger" style="display:inline-flex"><slot></slot></div><div part="tooltip" class="tooltip" role="tooltip" hidden
|
|
1997
|
+
this._root.innerHTML = `<style>${tooltipStyles}</style><div part="trigger" class="tooltip-trigger" style="display:inline-flex"><slot></slot></div><div part="tooltip" class="tooltip" role="tooltip" hidden><!-- @deprecated tooltip-content \u2192 use part="content" --><div part="tooltip-content content" class="tooltip-content"></div><div part="arrow" class="tooltip-arrow"></div></div>`;
|
|
1997
1998
|
}
|
|
1998
1999
|
static get observedAttributes() {
|
|
1999
2000
|
return ["content", "placement", "delay", "disabled", "class"];
|
|
@@ -2041,7 +2042,7 @@ var UTooltipRoot = class extends UElement {
|
|
|
2041
2042
|
_sync() {
|
|
2042
2043
|
const triggerEl = this._root.querySelector('[part="trigger"]');
|
|
2043
2044
|
triggerEl.className = `tooltip-trigger ${this.className}`.trim();
|
|
2044
|
-
const contentEl = this._root.querySelector('[part
|
|
2045
|
+
const contentEl = this._root.querySelector('[part~="tooltip-content"]');
|
|
2045
2046
|
contentEl.textContent = this._content;
|
|
2046
2047
|
}
|
|
2047
2048
|
show() {
|
|
@@ -2097,7 +2098,7 @@ var UTextarea = class extends UElement {
|
|
|
2097
2098
|
this._rows = 3;
|
|
2098
2099
|
this._maxLength = -1;
|
|
2099
2100
|
this._name = "";
|
|
2100
|
-
this._root.innerHTML = `<style>${textareaStyles}</style><div class="textarea-wrapper"><textarea part="textarea"></textarea></div>`;
|
|
2101
|
+
this._root.innerHTML = `<style>${textareaStyles}</style><div part="wrapper" class="textarea-wrapper"><textarea part="textarea"></textarea></div>`;
|
|
2101
2102
|
}
|
|
2102
2103
|
static get observedAttributes() {
|
|
2103
2104
|
return ["placeholder", "disabled", "readonly", "rows", "max-length", "name", "class"];
|
|
@@ -2618,33 +2619,39 @@ var UTree = class extends UElement {
|
|
|
2618
2619
|
_renderNode(node, depth) {
|
|
2619
2620
|
const li = document.createElement("li");
|
|
2620
2621
|
li.className = "tree-node";
|
|
2622
|
+
li.setAttribute("part", "node");
|
|
2621
2623
|
li.setAttribute("role", "treeitem");
|
|
2622
2624
|
li.setAttribute("data-id", node.id);
|
|
2623
2625
|
li.setAttribute("aria-expanded", String(node.expanded ?? false));
|
|
2624
2626
|
li.setAttribute("aria-level", String(depth + 1));
|
|
2625
2627
|
const row = document.createElement("div");
|
|
2626
2628
|
row.className = "tree-row";
|
|
2629
|
+
row.setAttribute("part", "row");
|
|
2627
2630
|
row.style.paddingLeft = `${depth * 20 + 8}px`;
|
|
2628
2631
|
const hasChildren = node.children && node.children.length > 0;
|
|
2629
2632
|
if (hasChildren) {
|
|
2630
2633
|
const toggle = document.createElement("span");
|
|
2631
2634
|
toggle.className = "tree-toggle";
|
|
2635
|
+
toggle.setAttribute("part", "toggle");
|
|
2632
2636
|
toggle.textContent = node.expanded ? "\u25BE" : "\u25B8";
|
|
2633
2637
|
toggle.setAttribute("aria-hidden", "true");
|
|
2634
2638
|
row.appendChild(toggle);
|
|
2635
2639
|
} else {
|
|
2636
2640
|
const spacer = document.createElement("span");
|
|
2637
2641
|
spacer.className = "tree-toggle-spacer";
|
|
2642
|
+
spacer.setAttribute("part", "toggle-spacer");
|
|
2638
2643
|
row.appendChild(spacer);
|
|
2639
2644
|
}
|
|
2640
2645
|
const label = document.createElement("span");
|
|
2641
2646
|
label.className = "tree-label";
|
|
2647
|
+
label.setAttribute("part", "label");
|
|
2642
2648
|
label.textContent = node.label;
|
|
2643
2649
|
row.appendChild(label);
|
|
2644
2650
|
li.appendChild(row);
|
|
2645
2651
|
if (hasChildren && node.expanded) {
|
|
2646
2652
|
const ul = document.createElement("ul");
|
|
2647
2653
|
ul.className = "tree-children";
|
|
2654
|
+
ul.setAttribute("part", "children");
|
|
2648
2655
|
ul.setAttribute("role", "group");
|
|
2649
2656
|
for (const child of node.children) {
|
|
2650
2657
|
ul.appendChild(this._renderNode(child, depth + 1));
|
|
@@ -2723,6 +2730,7 @@ var UTable = class extends UElement {
|
|
|
2723
2730
|
headerRow.innerHTML = "";
|
|
2724
2731
|
for (const col of this._columns) {
|
|
2725
2732
|
const th = document.createElement("th");
|
|
2733
|
+
th.setAttribute("part", "header-cell");
|
|
2726
2734
|
th.textContent = col.label;
|
|
2727
2735
|
if (col.width) th.style.width = col.width;
|
|
2728
2736
|
if (this._sortable && col.sortable) {
|
|
@@ -2743,8 +2751,10 @@ var UTable = class extends UElement {
|
|
|
2743
2751
|
const data = this._sortKey ? this._sortedData() : this._rows;
|
|
2744
2752
|
for (const row of data) {
|
|
2745
2753
|
const tr = document.createElement("tr");
|
|
2754
|
+
tr.setAttribute("part", "row");
|
|
2746
2755
|
for (const col of this._columns) {
|
|
2747
2756
|
const td = document.createElement("td");
|
|
2757
|
+
td.setAttribute("part", "cell");
|
|
2748
2758
|
td.textContent = String(row[col.key] ?? "");
|
|
2749
2759
|
tr.appendChild(td);
|
|
2750
2760
|
}
|
|
@@ -2851,17 +2861,20 @@ var UBreadcrumb = class extends UElement {
|
|
|
2851
2861
|
const item = this._items[i];
|
|
2852
2862
|
const li = document.createElement("li");
|
|
2853
2863
|
li.className = "breadcrumb-item";
|
|
2864
|
+
li.setAttribute("part", "item");
|
|
2854
2865
|
if (i < this._items.length - 1) {
|
|
2855
2866
|
if (item.href) {
|
|
2856
2867
|
const a = document.createElement("a");
|
|
2857
2868
|
a.href = item.href;
|
|
2858
2869
|
a.textContent = item.label;
|
|
2870
|
+
a.setAttribute("part", "link");
|
|
2859
2871
|
li.appendChild(a);
|
|
2860
2872
|
} else {
|
|
2861
2873
|
li.textContent = item.label;
|
|
2862
2874
|
}
|
|
2863
2875
|
const sep = document.createElement("span");
|
|
2864
2876
|
sep.className = "breadcrumb-separator";
|
|
2877
|
+
sep.setAttribute("part", "separator");
|
|
2865
2878
|
sep.setAttribute("aria-hidden", "true");
|
|
2866
2879
|
sep.textContent = this._separator;
|
|
2867
2880
|
li.appendChild(sep);
|
|
@@ -2885,7 +2898,7 @@ var UTabs = class extends UElement {
|
|
|
2885
2898
|
this._variant = "underline";
|
|
2886
2899
|
this._fullWidth = false;
|
|
2887
2900
|
this._triggers = [];
|
|
2888
|
-
this._root.innerHTML = `<style>${tabsStyles}</style><div part="tabs" class="tabs"><div part="tablist" class="tablist tablist-underline" role="tablist"><div class="tab-indicator"></div></div><div part="tabpanels" class="tabpanels"></div></div>`;
|
|
2901
|
+
this._root.innerHTML = `<style>${tabsStyles}</style><div part="tabs" class="tabs"><div part="tablist" class="tablist tablist-underline" role="tablist"><div part="indicator" class="tab-indicator"></div></div><div part="tabpanels" class="tabpanels"></div></div>`;
|
|
2889
2902
|
this._tablistEl = this._root.querySelector('[part="tablist"]');
|
|
2890
2903
|
this._panelsContainer = this._root.querySelector('[part="tabpanels"]');
|
|
2891
2904
|
this._indicatorEl = this._tablistEl.querySelector(".tab-indicator");
|
|
@@ -2955,6 +2968,7 @@ var UTabs = class extends UElement {
|
|
|
2955
2968
|
const disabled = tab.hasAttribute("disabled");
|
|
2956
2969
|
const btn = document.createElement("button");
|
|
2957
2970
|
btn.className = "tab-trigger";
|
|
2971
|
+
btn.setAttribute("part", "tab");
|
|
2958
2972
|
btn.setAttribute("role", "tab");
|
|
2959
2973
|
btn.setAttribute("aria-selected", String(key === this._value));
|
|
2960
2974
|
btn.setAttribute("data-value", key);
|
|
@@ -2964,6 +2978,7 @@ var UTabs = class extends UElement {
|
|
|
2964
2978
|
if (iconSlot) {
|
|
2965
2979
|
const iconSpan = document.createElement("span");
|
|
2966
2980
|
iconSpan.className = "tab-trigger-icon";
|
|
2981
|
+
iconSpan.setAttribute("part", "tab-icon");
|
|
2967
2982
|
iconSpan.appendChild(iconSlot.cloneNode(true));
|
|
2968
2983
|
btn.appendChild(iconSpan);
|
|
2969
2984
|
} else {
|
|
@@ -2971,6 +2986,7 @@ var UTabs = class extends UElement {
|
|
|
2971
2986
|
if (svgs.length > 0) {
|
|
2972
2987
|
const iconSpan = document.createElement("span");
|
|
2973
2988
|
iconSpan.className = "tab-trigger-icon";
|
|
2989
|
+
iconSpan.setAttribute("part", "tab-icon");
|
|
2974
2990
|
iconSpan.appendChild(svgs[0].cloneNode(true));
|
|
2975
2991
|
btn.appendChild(iconSpan);
|
|
2976
2992
|
}
|
|
@@ -2986,6 +3002,7 @@ var UTabs = class extends UElement {
|
|
|
2986
3002
|
const key = panel.getAttribute("data-value") || String(i);
|
|
2987
3003
|
const div = document.createElement("div");
|
|
2988
3004
|
div.className = "tab-panel";
|
|
3005
|
+
div.setAttribute("part", "panel");
|
|
2989
3006
|
div.setAttribute("role", "tabpanel");
|
|
2990
3007
|
if (key === this._value) {
|
|
2991
3008
|
div.removeAttribute("hidden");
|
|
@@ -3784,14 +3801,17 @@ var UDrawer = class extends UElement {
|
|
|
3784
3801
|
<div part="backdrop" class="drawer-backdrop" hidden></div>
|
|
3785
3802
|
<div part="drawer" class="drawer drawer-right" role="dialog" aria-modal="true" hidden>
|
|
3786
3803
|
<div part="drawer-content" class="drawer-content">
|
|
3787
|
-
|
|
3804
|
+
<!-- @deprecated drawer-header \u2192 use part="header" -->
|
|
3805
|
+
<div part="drawer-header header" class="drawer-header">
|
|
3788
3806
|
<slot name="header"></slot>
|
|
3789
3807
|
<button part="close-btn" class="drawer-close" aria-label="Close">×</button>
|
|
3790
3808
|
</div>
|
|
3791
|
-
|
|
3809
|
+
<!-- @deprecated drawer-body \u2192 use part="body" -->
|
|
3810
|
+
<div part="drawer-body body" class="drawer-body">
|
|
3792
3811
|
<slot></slot>
|
|
3793
3812
|
</div>
|
|
3794
|
-
|
|
3813
|
+
<!-- @deprecated drawer-footer \u2192 use part="footer" -->
|
|
3814
|
+
<div part="drawer-footer footer" class="drawer-footer">
|
|
3795
3815
|
<slot name="footer"></slot>
|
|
3796
3816
|
</div>
|
|
3797
3817
|
</div>
|
|
@@ -3886,7 +3906,8 @@ var UDrawer = class extends UElement {
|
|
|
3886
3906
|
drawer.removeAttribute("hidden");
|
|
3887
3907
|
this._applyDrawerSize(content);
|
|
3888
3908
|
this._unlockScroll = lockScroll();
|
|
3889
|
-
|
|
3909
|
+
void drawer.offsetHeight;
|
|
3910
|
+
drawer.classList.add("drawer-open");
|
|
3890
3911
|
this._focusFirst();
|
|
3891
3912
|
} else {
|
|
3892
3913
|
drawer.classList.remove("drawer-open");
|
|
@@ -4227,17 +4248,20 @@ var UDropdown = class extends UElement {
|
|
|
4227
4248
|
lastGroup = item.group;
|
|
4228
4249
|
const label = document.createElement("div");
|
|
4229
4250
|
label.className = GROUP_HEADING_CLASS;
|
|
4251
|
+
label.setAttribute("part", "group-label");
|
|
4230
4252
|
label.textContent = item.group;
|
|
4231
4253
|
this._itemsContainer.appendChild(label);
|
|
4232
4254
|
}
|
|
4233
4255
|
if (item.divider) {
|
|
4234
4256
|
const div = document.createElement("div");
|
|
4235
4257
|
div.className = "dropdown-divider";
|
|
4258
|
+
div.setAttribute("part", "divider");
|
|
4236
4259
|
this._itemsContainer.appendChild(div);
|
|
4237
4260
|
continue;
|
|
4238
4261
|
}
|
|
4239
4262
|
const btn = document.createElement("button");
|
|
4240
4263
|
btn.className = ITEM_CLASS;
|
|
4264
|
+
btn.setAttribute("part", "item");
|
|
4241
4265
|
btn.setAttribute("role", "option");
|
|
4242
4266
|
btn.setAttribute("data-value", item.value);
|
|
4243
4267
|
btn.disabled = item.disabled ?? false;
|
|
@@ -4245,18 +4269,22 @@ var UDropdown = class extends UElement {
|
|
|
4245
4269
|
if (item.icon) {
|
|
4246
4270
|
const iconSpan = document.createElement("span");
|
|
4247
4271
|
iconSpan.className = "dropdown-item-icon";
|
|
4272
|
+
iconSpan.setAttribute("part", "item-icon");
|
|
4248
4273
|
iconSpan.innerHTML = item.icon;
|
|
4249
4274
|
btn.appendChild(iconSpan);
|
|
4250
4275
|
}
|
|
4251
4276
|
const textSpan = document.createElement("span");
|
|
4252
4277
|
textSpan.className = "dropdown-item-text";
|
|
4278
|
+
textSpan.setAttribute("part", "item-text");
|
|
4253
4279
|
const labelSpan = document.createElement("span");
|
|
4254
4280
|
labelSpan.className = "dropdown-item-label";
|
|
4281
|
+
labelSpan.setAttribute("part", "item-label");
|
|
4255
4282
|
labelSpan.textContent = item.label;
|
|
4256
4283
|
textSpan.appendChild(labelSpan);
|
|
4257
4284
|
if (item.description) {
|
|
4258
4285
|
const descSpan = document.createElement("span");
|
|
4259
4286
|
descSpan.className = "dropdown-item-desc";
|
|
4287
|
+
descSpan.setAttribute("part", "item-desc");
|
|
4260
4288
|
descSpan.textContent = item.description;
|
|
4261
4289
|
textSpan.appendChild(descSpan);
|
|
4262
4290
|
}
|
|
@@ -4264,6 +4292,7 @@ var UDropdown = class extends UElement {
|
|
|
4264
4292
|
if (item.shortcut) {
|
|
4265
4293
|
const shortcutSpan = document.createElement("span");
|
|
4266
4294
|
shortcutSpan.className = "dropdown-item-shortcut";
|
|
4295
|
+
shortcutSpan.setAttribute("part", "item-shortcut");
|
|
4267
4296
|
shortcutSpan.textContent = item.shortcut;
|
|
4268
4297
|
btn.appendChild(shortcutSpan);
|
|
4269
4298
|
}
|
|
@@ -4619,6 +4648,7 @@ var UCombobox = class extends UElement {
|
|
|
4619
4648
|
if (items.length === 0) {
|
|
4620
4649
|
const empty = document.createElement("div");
|
|
4621
4650
|
empty.className = "combobox-empty";
|
|
4651
|
+
empty.setAttribute("part", "empty");
|
|
4622
4652
|
empty.textContent = "No results";
|
|
4623
4653
|
listbox.appendChild(empty);
|
|
4624
4654
|
return;
|
|
@@ -4626,6 +4656,7 @@ var UCombobox = class extends UElement {
|
|
|
4626
4656
|
for (const opt of items) {
|
|
4627
4657
|
const btn = document.createElement("button");
|
|
4628
4658
|
btn.className = "combobox-option";
|
|
4659
|
+
btn.setAttribute("part", "option");
|
|
4629
4660
|
btn.setAttribute("role", "option");
|
|
4630
4661
|
btn.setAttribute("data-value", opt.value);
|
|
4631
4662
|
btn.textContent = opt.label;
|
|
@@ -4821,7 +4852,7 @@ var UCalendar = class extends UElement {
|
|
|
4821
4852
|
}
|
|
4822
4853
|
_renderDayNames() {
|
|
4823
4854
|
const container = this._root.querySelector('[part="day-names"]');
|
|
4824
|
-
container.innerHTML = DAYS.map((d) => `<span class="cal-day-name">${d}</span>`).join("");
|
|
4855
|
+
container.innerHTML = DAYS.map((d) => `<span part="day-name" class="cal-day-name">${d}</span>`).join("");
|
|
4825
4856
|
}
|
|
4826
4857
|
_render() {
|
|
4827
4858
|
const title = this._root.querySelector('[part="title"]');
|
|
@@ -4835,11 +4866,13 @@ var UCalendar = class extends UElement {
|
|
|
4835
4866
|
for (let i = 0; i < firstDay; i++) {
|
|
4836
4867
|
const empty = document.createElement("span");
|
|
4837
4868
|
empty.className = "cal-day cal-day-empty";
|
|
4869
|
+
empty.setAttribute("part", "day-empty");
|
|
4838
4870
|
grid.appendChild(empty);
|
|
4839
4871
|
}
|
|
4840
4872
|
for (let d = 1; d <= daysInMonth; d++) {
|
|
4841
4873
|
const dayEl = document.createElement("button");
|
|
4842
4874
|
dayEl.className = "cal-day";
|
|
4875
|
+
dayEl.setAttribute("part", "day");
|
|
4843
4876
|
dayEl.textContent = String(d);
|
|
4844
4877
|
const dateStr = `${this._viewYear}-${String(this._viewMonth + 1).padStart(2, "0")}-${String(d).padStart(2, "0")}`;
|
|
4845
4878
|
dayEl.setAttribute("data-date", dateStr);
|
|
@@ -5004,8 +5037,10 @@ var UDataTable = class extends UElement {
|
|
|
5004
5037
|
if (this._selectable) {
|
|
5005
5038
|
const th = document.createElement("th");
|
|
5006
5039
|
th.className = "dt-col-check";
|
|
5040
|
+
th.setAttribute("part", "header-checkbox");
|
|
5007
5041
|
const cb = document.createElement("input");
|
|
5008
5042
|
cb.type = "checkbox";
|
|
5043
|
+
cb.setAttribute("part", "select-all");
|
|
5009
5044
|
cb.addEventListener("change", () => {
|
|
5010
5045
|
const data = this._getPageData();
|
|
5011
5046
|
if (cb.checked)
|
|
@@ -5042,6 +5077,7 @@ var UDataTable = class extends UElement {
|
|
|
5042
5077
|
const tr = document.createElement("tr");
|
|
5043
5078
|
const td = document.createElement("td");
|
|
5044
5079
|
td.className = "dt-empty";
|
|
5080
|
+
td.setAttribute("part", "empty");
|
|
5045
5081
|
td.colSpan = this._columns.length + (this._selectable ? 1 : 0);
|
|
5046
5082
|
td.textContent = "No data";
|
|
5047
5083
|
tr.appendChild(td);
|
|
@@ -5051,12 +5087,14 @@ var UDataTable = class extends UElement {
|
|
|
5051
5087
|
for (let i = 0; i < data.length; i++) {
|
|
5052
5088
|
const row = data[i];
|
|
5053
5089
|
const tr = document.createElement("tr");
|
|
5090
|
+
tr.setAttribute("part", "row");
|
|
5054
5091
|
const rowKey = row.id ?? row._key ?? String(i);
|
|
5055
5092
|
if (this._selected.has(rowKey)) tr.classList.add("dt-row-selected");
|
|
5056
5093
|
if (this._selectable) {
|
|
5057
5094
|
const td = document.createElement("td");
|
|
5058
5095
|
const cb = document.createElement("input");
|
|
5059
5096
|
cb.type = "checkbox";
|
|
5097
|
+
cb.setAttribute("part", "select-row");
|
|
5060
5098
|
cb.checked = this._selected.has(rowKey);
|
|
5061
5099
|
cb.addEventListener("change", () => {
|
|
5062
5100
|
if (cb.checked) this._selected.add(rowKey);
|
|
@@ -5069,6 +5107,7 @@ var UDataTable = class extends UElement {
|
|
|
5069
5107
|
}
|
|
5070
5108
|
for (const col of this._columns) {
|
|
5071
5109
|
const td = document.createElement("td");
|
|
5110
|
+
td.setAttribute("part", "cell");
|
|
5072
5111
|
const val = row[col.key];
|
|
5073
5112
|
td.innerHTML = col.render ? col.render(val, row, i) : String(val ?? "");
|
|
5074
5113
|
tr.appendChild(td);
|
|
@@ -5087,6 +5126,7 @@ var UDataTable = class extends UElement {
|
|
|
5087
5126
|
for (let i = 1; i <= totalPages; i++) {
|
|
5088
5127
|
const btn = document.createElement("button");
|
|
5089
5128
|
btn.className = `dt-page-num ${i === this._page ? "active" : ""}`;
|
|
5129
|
+
btn.setAttribute("part", "page-num");
|
|
5090
5130
|
btn.textContent = String(i);
|
|
5091
5131
|
btn.addEventListener("click", () => {
|
|
5092
5132
|
this._page = i;
|
|
@@ -5294,6 +5334,7 @@ var UCommandPalette = class extends UElement {
|
|
|
5294
5334
|
if (this._filtered.length === 0) {
|
|
5295
5335
|
const div = document.createElement("div");
|
|
5296
5336
|
div.className = "cp-empty";
|
|
5337
|
+
div.setAttribute("part", "empty");
|
|
5297
5338
|
div.textContent = "No results found";
|
|
5298
5339
|
container.appendChild(div);
|
|
5299
5340
|
return;
|
|
@@ -5308,30 +5349,36 @@ var UCommandPalette = class extends UElement {
|
|
|
5308
5349
|
for (const [groupName, groupItems] of groups) {
|
|
5309
5350
|
const groupEl = document.createElement("div");
|
|
5310
5351
|
groupEl.className = "cp-group";
|
|
5352
|
+
groupEl.setAttribute("part", "group");
|
|
5311
5353
|
const label = document.createElement("div");
|
|
5312
5354
|
label.className = "cp-group-label";
|
|
5355
|
+
label.setAttribute("part", "group-label");
|
|
5313
5356
|
label.textContent = groupName;
|
|
5314
5357
|
groupEl.appendChild(label);
|
|
5315
5358
|
for (const item of groupItems) {
|
|
5316
5359
|
const btn = document.createElement("button");
|
|
5317
5360
|
btn.className = "cp-item";
|
|
5361
|
+
btn.setAttribute("part", "item");
|
|
5318
5362
|
btn.setAttribute("role", "option");
|
|
5319
5363
|
btn.setAttribute("data-id", item.id);
|
|
5320
5364
|
btn.setAttribute("data-index", String(idx));
|
|
5321
5365
|
if (idx === this._selectedIndex) btn.classList.add("cp-item-active");
|
|
5322
5366
|
const labelSpan = document.createElement("span");
|
|
5323
5367
|
labelSpan.className = "cp-item-label";
|
|
5368
|
+
labelSpan.setAttribute("part", "item-label");
|
|
5324
5369
|
labelSpan.textContent = item.label;
|
|
5325
5370
|
btn.appendChild(labelSpan);
|
|
5326
5371
|
if (item.description) {
|
|
5327
5372
|
const desc = document.createElement("span");
|
|
5328
5373
|
desc.className = "cp-item-desc";
|
|
5374
|
+
desc.setAttribute("part", "item-desc");
|
|
5329
5375
|
desc.textContent = item.description;
|
|
5330
5376
|
btn.appendChild(desc);
|
|
5331
5377
|
}
|
|
5332
5378
|
if (item.shortcut) {
|
|
5333
5379
|
const kbd = document.createElement("kbd");
|
|
5334
5380
|
kbd.className = "cp-item-shortcut";
|
|
5381
|
+
kbd.setAttribute("part", "item-shortcut");
|
|
5335
5382
|
kbd.textContent = item.shortcut;
|
|
5336
5383
|
btn.appendChild(kbd);
|
|
5337
5384
|
}
|
|
@@ -5467,16 +5514,20 @@ var UToast = class extends UElement {
|
|
|
5467
5514
|
const variant = opts.variant ?? "info";
|
|
5468
5515
|
const el = document.createElement("div");
|
|
5469
5516
|
el.className = `toast toast-${variant}`;
|
|
5517
|
+
el.setAttribute("part", "toast");
|
|
5470
5518
|
el.setAttribute("role", "alert");
|
|
5471
5519
|
const body = document.createElement("div");
|
|
5472
5520
|
body.className = "toast-body";
|
|
5521
|
+
body.setAttribute("part", "body");
|
|
5473
5522
|
const title = document.createElement("div");
|
|
5474
5523
|
title.className = "toast-title";
|
|
5524
|
+
title.setAttribute("part", "title");
|
|
5475
5525
|
title.textContent = opts.title;
|
|
5476
5526
|
body.appendChild(title);
|
|
5477
5527
|
if (opts.description) {
|
|
5478
5528
|
const desc = document.createElement("div");
|
|
5479
5529
|
desc.className = "toast-desc";
|
|
5530
|
+
desc.setAttribute("part", "description");
|
|
5480
5531
|
desc.textContent = opts.description;
|
|
5481
5532
|
body.appendChild(desc);
|
|
5482
5533
|
}
|
|
@@ -5484,6 +5535,7 @@ var UToast = class extends UElement {
|
|
|
5484
5535
|
if (opts.action) {
|
|
5485
5536
|
const btn = document.createElement("button");
|
|
5486
5537
|
btn.className = "toast-action";
|
|
5538
|
+
btn.setAttribute("part", "action");
|
|
5487
5539
|
btn.textContent = opts.action.label;
|
|
5488
5540
|
btn.addEventListener("click", () => {
|
|
5489
5541
|
opts.action.onClick();
|
|
@@ -5493,6 +5545,7 @@ var UToast = class extends UElement {
|
|
|
5493
5545
|
}
|
|
5494
5546
|
const close = document.createElement("button");
|
|
5495
5547
|
close.className = "toast-close";
|
|
5548
|
+
close.setAttribute("part", "close close-btn");
|
|
5496
5549
|
close.innerHTML = "×";
|
|
5497
5550
|
close.setAttribute("aria-label", "Dismiss");
|
|
5498
5551
|
close.addEventListener("click", () => this.dismiss(id));
|
|
@@ -5598,11 +5651,13 @@ var UContextMenu = class extends UElement {
|
|
|
5598
5651
|
if (item.divider) {
|
|
5599
5652
|
const div = document.createElement("div");
|
|
5600
5653
|
div.className = "cm-divider";
|
|
5654
|
+
div.setAttribute("part", "divider");
|
|
5601
5655
|
container.appendChild(div);
|
|
5602
5656
|
return;
|
|
5603
5657
|
}
|
|
5604
5658
|
const btn = document.createElement("button");
|
|
5605
5659
|
btn.className = "cm-item";
|
|
5660
|
+
btn.setAttribute("part", "item");
|
|
5606
5661
|
btn.setAttribute("role", "menuitem");
|
|
5607
5662
|
btn.setAttribute("data-value", item.value);
|
|
5608
5663
|
btn.setAttribute("data-index", String(i));
|
|
@@ -5610,11 +5665,13 @@ var UContextMenu = class extends UElement {
|
|
|
5610
5665
|
if (item.icon) {
|
|
5611
5666
|
const icon = document.createElement("span");
|
|
5612
5667
|
icon.className = "cm-item-icon";
|
|
5668
|
+
icon.setAttribute("part", "item-icon");
|
|
5613
5669
|
icon.textContent = item.icon;
|
|
5614
5670
|
btn.appendChild(icon);
|
|
5615
5671
|
}
|
|
5616
5672
|
const label = document.createElement("span");
|
|
5617
5673
|
label.className = "cm-item-label";
|
|
5674
|
+
label.setAttribute("part", "item-label");
|
|
5618
5675
|
label.textContent = item.label;
|
|
5619
5676
|
btn.appendChild(label);
|
|
5620
5677
|
container.appendChild(btn);
|
|
@@ -5627,9 +5684,9 @@ var UContextMenu = class extends UElement {
|
|
|
5627
5684
|
_openMenu(x, y) {
|
|
5628
5685
|
const menu = this._root.querySelector('[part="menu"]');
|
|
5629
5686
|
const itemsContainer = this._root.querySelector('[part="items"]');
|
|
5687
|
+
menu.style.animation = "none";
|
|
5630
5688
|
menu.removeAttribute("hidden");
|
|
5631
|
-
|
|
5632
|
-
this._open = true;
|
|
5689
|
+
void menu.offsetHeight;
|
|
5633
5690
|
const trigger = new DOMRect(x, y, 0, 0);
|
|
5634
5691
|
const result = computePosition(
|
|
5635
5692
|
trigger,
|
|
@@ -5640,6 +5697,11 @@ var UContextMenu = class extends UElement {
|
|
|
5640
5697
|
menu.style.top = `${result.top}px`;
|
|
5641
5698
|
menu.style.maxHeight = `${result.maxHeight ?? 320}px`;
|
|
5642
5699
|
itemsContainer.style.maxHeight = `${(result.maxHeight ?? 320) - 16}px`;
|
|
5700
|
+
void menu.offsetHeight;
|
|
5701
|
+
menu.style.animation = "";
|
|
5702
|
+
menu.style.transformOrigin = "top left";
|
|
5703
|
+
this._selectedIndex = -1;
|
|
5704
|
+
this._open = true;
|
|
5643
5705
|
this._focusFirst();
|
|
5644
5706
|
this.dispatchEvent(
|
|
5645
5707
|
new CustomEvent("u-context-menu-open", {
|
|
@@ -5746,7 +5808,7 @@ var USortable = class extends UElement {
|
|
|
5746
5808
|
this._placeholder.style.height = `${rect.height}px`;
|
|
5747
5809
|
this._dragClone = item.cloneNode(true);
|
|
5748
5810
|
this._dragClone.style.position = "fixed";
|
|
5749
|
-
this._dragClone.style.zIndex = "99999";
|
|
5811
|
+
this._dragClone.style.zIndex = getComputedStyle(this).getPropertyValue("--u-z-drag").trim() || "99999";
|
|
5750
5812
|
this._dragClone.style.width = `${rect.width}px`;
|
|
5751
5813
|
this._dragClone.style.height = `${rect.height}px`;
|
|
5752
5814
|
this._dragClone.style.left = `${rect.left}px`;
|
|
@@ -6143,5 +6205,5 @@ var UCard = class extends UElement {
|
|
|
6143
6205
|
};
|
|
6144
6206
|
|
|
6145
6207
|
export { UAccordion, UAccordionItem, UAnimate, UBadge, UBox, UBreadcrumb, UButton, UCalendar, UCard, UCheckbox, UCollection, UCombobox, UCommandPalette, UContainer, UContextMenu, UDataTable, UDialogRoot, UDismissableLayer, UDrawer, UDropdown, UField, UFocusManager, UFocusScope, UFocusTrap, UForm, UGrid, UHStack, UHoverable, UInput, UKeyboardNavigation, ULabel, ULink, UList, ULiveRegion, UModal, UOverlay, UPopover, UPopper, UPortal, UPresence, UPressable, URadio, URadioGroup, URouterView, USelect, USlot, USortable, USpacer, UStack, USwitch, UTable, UTabs, UText, UTextarea, UToast, UTooltipRoot, UTransition, UTree, UVirtualList, UVisuallyHidden, createControlledInput, setPortalRoot };
|
|
6146
|
-
//# sourceMappingURL=chunk-
|
|
6147
|
-
//# sourceMappingURL=chunk-
|
|
6208
|
+
//# sourceMappingURL=chunk-47AXL5HN.js.map
|
|
6209
|
+
//# sourceMappingURL=chunk-47AXL5HN.js.map
|