@threadlabs/looma 0.1.24 → 0.1.26
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/{chunk-IMHSPETJ.js → chunk-XRJRF3MM.js} +33 -32
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/cjs/looma.cjs.js +1 -1
- package/dist/cjs/{ui-combobox.cjs.entry.js → ui-chip_2.cjs.entry.js} +29 -4
- package/dist/cjs/ui-context-menu.cjs.entry.js +1 -1
- package/dist/cjs/ui-dialog.cjs.entry.js +1 -1
- package/dist/cjs/ui-disclosure.cjs.entry.js +1 -1
- package/dist/cjs/ui-editable.cjs.entry.js +100 -0
- package/dist/cjs/ui-floating-action-button.cjs.entry.js +1 -1
- package/dist/cjs/ui-form-field.cjs.entry.js +1 -1
- package/dist/cjs/ui-icon-button.cjs.entry.js +1 -1
- package/dist/cjs/ui-input.cjs.entry.js +1 -1
- package/dist/cjs/ui-menu-item.cjs.entry.js +1 -1
- package/dist/cjs/ui-menu.cjs.entry.js +1 -1
- package/dist/cjs/ui-multi-combobox.cjs.entry.js +190 -0
- package/dist/cjs/ui-popover.cjs.entry.js +1 -1
- package/dist/cjs/ui-radio-group.cjs.entry.js +1 -1
- package/dist/cjs/ui-radio.cjs.entry.js +1 -1
- package/dist/cjs/ui-search-result-row.cjs.entry.js +1 -1
- package/dist/cjs/ui-search-shell.cjs.entry.js +1 -1
- package/dist/cjs/ui-select.cjs.entry.js +1 -1
- package/dist/cjs/ui-switch.cjs.entry.js +2 -2
- package/dist/cjs/ui-tabs.cjs.entry.js +1 -1
- package/dist/cjs/ui-textarea.cjs.entry.js +1 -1
- package/dist/cjs/ui-toast-region.cjs.entry.js +1 -1
- package/dist/cjs/ui-tooltip.cjs.entry.js +1 -1
- package/dist/cjs/ui-top-bar.cjs.entry.js +1 -1
- package/dist/cjs/ui-tree-item.cjs.entry.js +2 -2
- package/dist/cjs/ui-tree.cjs.entry.js +1 -1
- package/dist/collection/collection-manifest.json +2 -0
- package/dist/collection/components/ui-chip/ui-chip.css +4 -0
- package/dist/collection/components/ui-chip/ui-chip.js +23 -1
- package/dist/collection/components/ui-combobox/ui-combobox.js +49 -4
- package/dist/collection/components/ui-context-menu/ui-context-menu.js +1 -1
- package/dist/collection/components/ui-dialog/ui-dialog.js +1 -1
- package/dist/collection/components/ui-disclosure/ui-disclosure.js +1 -1
- package/dist/collection/components/ui-editable/ui-editable.css +2 -0
- package/dist/collection/components/ui-editable/ui-editable.js +196 -0
- package/dist/collection/components/ui-floating-action-button/ui-floating-action-button.js +1 -1
- package/dist/collection/components/ui-form-field/ui-form-field.js +1 -1
- package/dist/collection/components/ui-icon-button/ui-icon-button.js +1 -1
- package/dist/collection/components/ui-input/ui-input.js +1 -1
- package/dist/collection/components/ui-menu/ui-menu.js +1 -1
- package/dist/collection/components/ui-menu-item/ui-menu-item.js +1 -1
- package/dist/collection/components/ui-multi-combobox/ui-multi-combobox.css +29 -0
- package/dist/collection/components/ui-multi-combobox/ui-multi-combobox.js +553 -0
- package/dist/collection/components/ui-popover/ui-popover.js +1 -1
- package/dist/collection/components/ui-radio/ui-radio.js +1 -1
- package/dist/collection/components/ui-radio-group/ui-radio-group.js +1 -1
- package/dist/collection/components/ui-search-result-row/ui-search-result-row.js +1 -1
- package/dist/collection/components/ui-search-shell/ui-search-shell.js +1 -1
- package/dist/collection/components/ui-select/ui-select.js +1 -1
- package/dist/collection/components/ui-switch/ui-switch.js +2 -2
- package/dist/collection/components/ui-tabs/ui-tabs.js +1 -1
- package/dist/collection/components/ui-textarea/ui-textarea.js +1 -1
- package/dist/collection/components/ui-toast-region/ui-toast-region.js +1 -1
- package/dist/collection/components/ui-tooltip/ui-tooltip.js +1 -1
- package/dist/collection/components/ui-top-bar/ui-top-bar.js +1 -1
- package/dist/collection/components/ui-tree/ui-tree.js +1 -1
- package/dist/collection/components/ui-tree-item/ui-tree-item.js +2 -2
- package/dist/collection/field/editable.js +1 -0
- package/dist/collection/field/multi-combobox.js +1 -0
- package/dist/components/index.d.ts +4 -0
- package/dist/components/index.js +1 -1
- package/dist/components/{p-DIGcRYAW.js → p-B9CzOHvE.js} +1 -1
- package/dist/components/p-BMgIcOh-.js +1 -0
- package/dist/components/p-BVteuP_d.js +1 -0
- package/dist/components/{p-Bk55QiUK.js → p-C6p-ygxq.js} +1 -1
- package/dist/components/ui-chip.js +1 -1
- package/dist/components/ui-combobox.js +1 -1
- package/dist/components/ui-context-menu.js +1 -1
- package/dist/components/ui-dialog.js +1 -1
- package/dist/components/ui-disclosure.js +1 -1
- package/dist/components/ui-editable.d.ts +11 -0
- package/dist/components/ui-editable.js +1 -0
- package/dist/components/ui-floating-action-button.js +1 -1
- package/dist/components/ui-form-field.js +1 -1
- package/dist/components/ui-icon-button.js +1 -1
- package/dist/components/ui-input.js +1 -1
- package/dist/components/ui-menu-item.js +1 -1
- package/dist/components/ui-menu.js +1 -1
- package/dist/components/ui-multi-combobox.d.ts +11 -0
- package/dist/components/ui-multi-combobox.js +1 -0
- package/dist/components/ui-popover.js +1 -1
- package/dist/components/ui-radio-group.js +1 -1
- package/dist/components/ui-radio.js +1 -1
- package/dist/components/ui-search-result-row.js +1 -1
- package/dist/components/ui-search-shell.js +1 -1
- package/dist/components/ui-select.js +1 -1
- package/dist/components/ui-switch.js +1 -1
- package/dist/components/ui-tabs.js +1 -1
- package/dist/components/ui-textarea.js +1 -1
- package/dist/components/ui-toast-region.js +1 -1
- package/dist/components/ui-tooltip.js +1 -1
- package/dist/components/ui-top-bar.js +1 -1
- package/dist/components/ui-tree-item.js +1 -1
- package/dist/components/ui-tree.js +1 -1
- package/dist/esm/loader.js +1 -1
- package/dist/esm/looma.js +1 -1
- package/dist/esm/{ui-combobox.entry.js → ui-chip_2.entry.js} +30 -6
- package/dist/esm/ui-context-menu.entry.js +1 -1
- package/dist/esm/ui-dialog.entry.js +1 -1
- package/dist/esm/ui-disclosure.entry.js +1 -1
- package/dist/esm/ui-editable.entry.js +98 -0
- package/dist/esm/ui-floating-action-button.entry.js +1 -1
- package/dist/esm/ui-form-field.entry.js +1 -1
- package/dist/esm/ui-icon-button.entry.js +1 -1
- package/dist/esm/ui-input.entry.js +1 -1
- package/dist/esm/ui-menu-item.entry.js +1 -1
- package/dist/esm/ui-menu.entry.js +1 -1
- package/dist/esm/ui-multi-combobox.entry.js +188 -0
- package/dist/esm/ui-popover.entry.js +1 -1
- package/dist/esm/ui-radio-group.entry.js +1 -1
- package/dist/esm/ui-radio.entry.js +1 -1
- package/dist/esm/ui-search-result-row.entry.js +1 -1
- package/dist/esm/ui-search-shell.entry.js +1 -1
- package/dist/esm/ui-select.entry.js +1 -1
- package/dist/esm/ui-switch.entry.js +2 -2
- package/dist/esm/ui-tabs.entry.js +1 -1
- package/dist/esm/ui-textarea.entry.js +1 -1
- package/dist/esm/ui-toast-region.entry.js +1 -1
- package/dist/esm/ui-tooltip.entry.js +1 -1
- package/dist/esm/ui-top-bar.entry.js +1 -1
- package/dist/esm/ui-tree-item.entry.js +2 -2
- package/dist/esm/ui-tree.entry.js +1 -1
- package/dist/index.cjs +368 -63
- package/dist/index.d.cts +18 -1
- package/dist/index.d.ts +18 -1
- package/dist/index.js +2 -2
- package/dist/looma/looma.esm.js +1 -1
- package/dist/looma/p-05592219.entry.js +1 -0
- package/dist/looma/{p-314d5c7c.entry.js → p-0e1741cb.entry.js} +1 -1
- package/dist/looma/{p-bd00d4e8.entry.js → p-0ef4bf13.entry.js} +1 -1
- package/dist/looma/{p-8e254bc4.entry.js → p-166f8593.entry.js} +1 -1
- package/dist/looma/p-262a542c.entry.js +1 -0
- package/dist/looma/{p-672e3d16.entry.js → p-26d357ae.entry.js} +1 -1
- package/dist/looma/{p-b63f6d4f.entry.js → p-30f01909.entry.js} +1 -1
- package/dist/looma/p-393e3e02.entry.js +1 -0
- package/dist/looma/p-3a44b9f9.entry.js +1 -0
- package/dist/looma/{p-fd1e4d22.entry.js → p-558d4f5b.entry.js} +1 -1
- package/dist/looma/{p-25e18ad6.entry.js → p-5780cefa.entry.js} +1 -1
- package/dist/looma/p-5a7261e1.entry.js +1 -0
- package/dist/looma/{p-03f44c45.entry.js → p-7319c147.entry.js} +1 -1
- package/dist/looma/{p-f1750fd7.entry.js → p-78b7e466.entry.js} +1 -1
- package/dist/looma/{p-7c4a225f.entry.js → p-7eb04f09.entry.js} +1 -1
- package/dist/looma/{p-e0f241ab.entry.js → p-81c533f5.entry.js} +1 -1
- package/dist/looma/{p-8e6b1001.entry.js → p-87f501cf.entry.js} +1 -1
- package/dist/looma/{p-cc915913.entry.js → p-89e71bbb.entry.js} +1 -1
- package/dist/looma/{p-a63e2561.entry.js → p-92cd1841.entry.js} +1 -1
- package/dist/looma/{p-5a900d89.entry.js → p-95eb3b58.entry.js} +1 -1
- package/dist/looma/{p-839faf55.entry.js → p-96ec4d7a.entry.js} +1 -1
- package/dist/looma/{p-2c03fa73.entry.js → p-bcb1b47b.entry.js} +1 -1
- package/dist/looma/{p-68430534.entry.js → p-d62da01d.entry.js} +1 -1
- package/dist/looma/{p-13f8195a.entry.js → p-dbcb479c.entry.js} +1 -1
- package/dist/looma/{p-920656cf.entry.js → p-e14024bf.entry.js} +1 -1
- package/dist/looma/{p-3ef2a21b.entry.js → p-fc180770.entry.js} +1 -1
- package/dist/types/components/ui-chip/ui-chip.d.ts +2 -0
- package/dist/types/components/ui-combobox/ui-combobox.d.ts +4 -0
- package/dist/types/components/ui-editable/ui-editable.d.ts +24 -0
- package/dist/types/components/ui-multi-combobox/ui-multi-combobox.d.ts +51 -0
- package/dist/types/components.d.ts +244 -0
- package/dist/types/field/editable.d.ts +5 -0
- package/dist/types/field/multi-combobox.d.ts +11 -0
- package/dist/{ui-affordance-scope.entry-3TUZ6GLW.js → ui-affordance-scope.entry-6N4ZQ5FM.js} +1 -1
- package/dist/{ui-avatar-group.entry-XGJKN25W.js → ui-avatar-group.entry-FTZVEFGI.js} +1 -1
- package/dist/{ui-avatar.entry-SN3G44HW.js → ui-avatar.entry-SST735OH.js} +1 -1
- package/dist/{ui-badge.entry-B6WDCWJX.js → ui-badge.entry-DZGS7MUT.js} +1 -1
- package/dist/{ui-button.entry-AZYUELLV.js → ui-button.entry-5WX56ARJ.js} +1 -1
- package/dist/{ui-callout.entry-QRPWRMPC.js → ui-callout.entry-OI5RNRXV.js} +1 -1
- package/dist/{ui-checkbox.entry-OB6GFC4M.js → ui-checkbox.entry-HCGIQPSE.js} +1 -1
- package/dist/{ui-combobox.entry-IIMMUJF7.js → ui-chip_2.entry-G2IGWJTL.js} +32 -7
- package/dist/{ui-context-menu.entry-AIULIE5Y.js → ui-context-menu.entry-K2LRT2WV.js} +2 -2
- package/dist/{ui-dialog.entry-QSYWYHLY.js → ui-dialog.entry-4W2T27R6.js} +2 -2
- package/dist/{ui-disclosure.entry-3BJEYU3U.js → ui-disclosure.entry-ONYMXRKR.js} +2 -2
- package/dist/ui-editable.entry-4ZHXIOER.js +110 -0
- package/dist/{ui-floating-action-button.entry-JEVNV6FI.js → ui-floating-action-button.entry-XU4JO2ZV.js} +2 -2
- package/dist/{ui-form-field.entry-PKSY7UU4.js → ui-form-field.entry-BZSEWR4A.js} +2 -2
- package/dist/{ui-icon-button.entry-TPX7BE7R.js → ui-icon-button.entry-MHJKL5OZ.js} +2 -2
- package/dist/{ui-input.entry-6NCLNW4E.js → ui-input.entry-BL6EX3GC.js} +2 -2
- package/dist/{ui-menu-item.entry-KA2K3PKV.js → ui-menu-item.entry-LERF3A4G.js} +2 -2
- package/dist/{ui-menu.entry-7GDO5L2T.js → ui-menu.entry-WXDYGFJE.js} +2 -2
- package/dist/ui-multi-combobox.entry-WSNWVRXE.js +196 -0
- package/dist/{ui-popover.entry-FR6YRNK6.js → ui-popover.entry-P6STTQVS.js} +2 -2
- package/dist/{ui-radio-group.entry-7QHXQSNO.js → ui-radio-group.entry-GZLHOY2M.js} +2 -2
- package/dist/{ui-radio.entry-YNMXKLDW.js → ui-radio.entry-4PXIRDKT.js} +2 -2
- package/dist/{ui-search-result-row.entry-AHVVAAIO.js → ui-search-result-row.entry-LHNOT7MK.js} +2 -2
- package/dist/{ui-search-shell.entry-CNBEAMEZ.js → ui-search-shell.entry-GQCMEU2Z.js} +2 -2
- package/dist/{ui-select.entry-TUY6TCTC.js → ui-select.entry-TZU7XX4U.js} +2 -2
- package/dist/{ui-switch.entry-26LFI7B5.js → ui-switch.entry-QFH3YDYP.js} +3 -3
- package/dist/{ui-tabs.entry-LXB62RJJ.js → ui-tabs.entry-A57JVDT2.js} +2 -2
- package/dist/{ui-textarea.entry-JYGMGPX2.js → ui-textarea.entry-L3RLZIGO.js} +2 -2
- package/dist/{ui-toast-region.entry-TOW4KZLZ.js → ui-toast-region.entry-XKKEY4K7.js} +2 -2
- package/dist/{ui-tooltip.entry-SKFNYXPH.js → ui-tooltip.entry-5WQTX7XF.js} +2 -2
- package/dist/{ui-top-bar.entry-S3YP52EA.js → ui-top-bar.entry-KMJEFYOM.js} +2 -2
- package/dist/{ui-tree-item.entry-LWYIPYLC.js → ui-tree-item.entry-TUBC57FI.js} +3 -3
- package/dist/{ui-tree.entry-LXKUQFRU.js → ui-tree.entry-Y75CRURL.js} +2 -2
- package/package.json +1 -1
- package/vue/{chunk-D4AJULDE.js → chunk-2DDIBSFD.js} +87 -1
- package/vue/editor/index.js +1 -1
- package/vue/index.d.ts +127 -2
- package/vue/index.js +5 -1
- package/dist/cjs/ui-chip.cjs.entry.js +0 -19
- package/dist/esm/ui-chip.entry.js +0 -17
- package/dist/looma/p-82f2fa3d.entry.js +0 -1
- package/dist/looma/p-97e8cb0e.entry.js +0 -1
- package/dist/looma/p-9e1c4020.entry.js +0 -1
- package/dist/looma/p-cfba8f7c.entry.js +0 -1
- package/dist/ui-chip.entry-XSNPJXX3.js +0 -22
|
@@ -10,7 +10,7 @@ import {
|
|
|
10
10
|
getElement,
|
|
11
11
|
h,
|
|
12
12
|
registerInstance
|
|
13
|
-
} from "./chunk-
|
|
13
|
+
} from "./chunk-XRJRF3MM.js";
|
|
14
14
|
|
|
15
15
|
// dist/esm/ui-switch.entry.js
|
|
16
16
|
var uiSwitchCss = () => `:host{display:inline-flex;align-items:center;gap:var(--ui-space-2);color:var(--ui-text-primary)}:host([aria-disabled='true']),:host([data-disabled='true']){opacity:0.6;cursor:not-allowed}:host([role='switch']){cursor:pointer}:host input[type='checkbox']{appearance:none;-webkit-appearance:none;display:block;position:relative;width:2.25rem;height:1.25rem;padding:0;border:1px solid var(--ui-border-default);border-radius:999px;background:var(--ui-surface-muted);cursor:pointer;transition:background-color var(--ui-motion-fast) var(--ui-motion-ease), border-color var(--ui-motion-fast) var(--ui-motion-ease);margin:0}:host input[type='checkbox']::after{content:'';position:absolute;top:2px;left:2px;width:0.875rem;height:0.875rem;border-radius:999px;background:var(--ui-surface-default);border:1px solid var(--ui-border-default);transition:transform var(--ui-motion-fast) var(--ui-motion-ease)}:host input[type='checkbox']:checked{background:var(--ui-accent-solid);border-color:var(--ui-accent-solid)}:host input[type='checkbox']:checked::after{transform:translateX(calc(2.25rem - 0.875rem - 4px));background:var(--ui-text-on-accent);border-color:var(--ui-text-on-accent)}:host input[type='checkbox']:focus-visible{outline:2px solid var(--ui-accent-solid);outline-offset:2px}`;
|
|
@@ -59,7 +59,7 @@ var UISwitch = class {
|
|
|
59
59
|
this.toggle("pointer");
|
|
60
60
|
};
|
|
61
61
|
render() {
|
|
62
|
-
return h(Host, { key: "
|
|
62
|
+
return h(Host, { key: "a37ded5259d71a57308cba6dd158ae4ae81e4e8b", role: "switch", "aria-checked": String(this.internalChecked), "aria-disabled": String(this.disabled), "data-disabled": this.disabled ? "" : void 0, tabIndex: this.disabled ? -1 : 0, onKeyDown: this.onKeydown, onClick: this.onClick }, h("input", { key: "882f81f39d752430f1de1554a5d83176416f4617", type: "checkbox", checked: this.internalChecked, disabled: this.disabled, required: this.required, value: this.value, "aria-hidden": "true", tabIndex: -1, onChange: (e) => {
|
|
63
63
|
const input = e.target;
|
|
64
64
|
const checked = input.checked;
|
|
65
65
|
if (!isControlled(this.checked))
|
|
@@ -71,7 +71,7 @@ var UISwitch = class {
|
|
|
71
71
|
});
|
|
72
72
|
if (isControlled(this.checked))
|
|
73
73
|
input.checked = this.internalChecked;
|
|
74
|
-
} }), h("slot", { key: "
|
|
74
|
+
} }), h("slot", { key: "b3b2b5afae622d1ae79cadd84f60c6b6c2df55a4" }));
|
|
75
75
|
}
|
|
76
76
|
static get watchers() {
|
|
77
77
|
return {
|
|
@@ -11,7 +11,7 @@ import {
|
|
|
11
11
|
getElement,
|
|
12
12
|
h,
|
|
13
13
|
registerInstance
|
|
14
|
-
} from "./chunk-
|
|
14
|
+
} from "./chunk-XRJRF3MM.js";
|
|
15
15
|
|
|
16
16
|
// dist/esm/ui-tabs.entry.js
|
|
17
17
|
var uiTabsCss = () => `:host{display:flex;flex-direction:column;gap:0}:host([data-orientation='vertical']){flex-direction:row}::slotted([role='tablist']){display:flex;gap:0;max-inline-size:100%;overflow-x:auto;overscroll-behavior-inline:contain;border-bottom:1px solid var(--ui-border-default)}:host([data-orientation='vertical']) ::slotted([role='tablist']){flex-direction:column;border-bottom:none;border-inline-end:1px solid var(--ui-border-default)}::slotted(button[role='tab']),::slotted([role='tab']),::slotted(ui-button) button[role='tab']{padding:var(--ui-space-2) var(--ui-space-3);font-size:var(--ui-font-size-sm);font-weight:var(--ui-font-medium, 500);color:var(--ui-text-secondary);background:none;border:none;border-bottom:2px solid transparent;margin-bottom:-1px;cursor:pointer;transition:color var(--ui-motion-fast) var(--ui-motion-ease);box-shadow:none}::slotted(button[role='tab']:hover),::slotted([role='tab']:hover){color:var(--ui-text-primary)}::slotted(button[role='tab'][aria-selected='true']),::slotted([role='tab'][aria-selected='true']){color:var(--ui-accent-solid);border-bottom-color:var(--ui-accent-solid)}:host([data-orientation='vertical']) ::slotted(button[role='tab']),:host([data-orientation='vertical']) ::slotted([role='tab']){border-bottom:none;border-inline-end:2px solid transparent;margin-bottom:0;margin-inline-end:-1px}:host([data-orientation='vertical']) ::slotted(button[role='tab'][aria-selected='true']),:host([data-orientation='vertical']) ::slotted([role='tab'][aria-selected='true']){border-inline-end-color:var(--ui-accent-solid)}::slotted([role='tabpanel']){padding:var(--ui-space-4)}`;
|
|
@@ -106,7 +106,7 @@ var UITabs = class {
|
|
|
106
106
|
}
|
|
107
107
|
};
|
|
108
108
|
render() {
|
|
109
|
-
return h(Host, { key: "
|
|
109
|
+
return h(Host, { key: "19207153c7b7a6ea5f5ffb50439e99af70984b44", orientation: this.orientation, "data-orientation": this.orientation }, h("slot", { key: "5045cd040eeccd028c00328206d47f7d17b622de" }));
|
|
110
110
|
}
|
|
111
111
|
static get watchers() {
|
|
112
112
|
return {
|
|
@@ -7,7 +7,7 @@ import {
|
|
|
7
7
|
getElement,
|
|
8
8
|
h,
|
|
9
9
|
registerInstance
|
|
10
|
-
} from "./chunk-
|
|
10
|
+
} from "./chunk-XRJRF3MM.js";
|
|
11
11
|
|
|
12
12
|
// dist/esm/ui-textarea.entry.js
|
|
13
13
|
var uiTextareaCss = () => `:host{display:inline-flex;min-inline-size:0;color:var(--ui-text-primary)}::slotted(textarea){width:100%;appearance:none;border:1px solid var(--ui-control-border, var(--ui-border-default));border-radius:var(--ui-radius-2);background:var(--ui-control-surface, var(--ui-surface-default));color:inherit;font:inherit;line-height:var(--ui-line-height-md);min-block-size:calc(var(--ui-space-12, 3rem) * 2);padding:var(--ui-space-2) var(--ui-space-3);margin:0;resize:vertical;transition:border-color var(--ui-motion-fast) var(--ui-motion-ease), box-shadow var(--ui-motion-fast) var(--ui-motion-ease), background-color var(--ui-motion-fast) var(--ui-motion-ease)}::slotted(textarea:hover:not(:focus):not(:disabled)){border-color:var(--ui-control-border-hover, var(--ui-border-strong))}::slotted(textarea:focus){border-color:var(--ui-control-focus, var(--ui-focus-ring));box-shadow:0 0 0 3px var(--ui-control-focus-halo, var(--ui-accent-soft))}:host([data-invalid='true'])::slotted(textarea),::slotted(textarea[aria-invalid='true']){border-color:var(--ui-accent-active)}::slotted(textarea:disabled){background:var(--ui-control-surface-disabled, var(--ui-surface-muted));color:var(--ui-text-muted);cursor:not-allowed}::slotted(textarea:focus-visible){outline:2px solid var(--ui-focus-ring);outline-offset:2px}`;
|
|
@@ -85,7 +85,7 @@ var UITextarea = class {
|
|
|
85
85
|
});
|
|
86
86
|
};
|
|
87
87
|
render() {
|
|
88
|
-
return h(Host, { key: "
|
|
88
|
+
return h(Host, { key: "020adfed4a177ef5d07852ff2e6ffb66b6f80742", "data-invalid": this.invalid ? "" : void 0 }, h("slot", { key: "2e9bd0e071e24fcf248eadf38f16484321359503", ref: (el) => this.slotRef = el }));
|
|
89
89
|
}
|
|
90
90
|
static get watchers() {
|
|
91
91
|
return {
|
|
@@ -10,7 +10,7 @@ import {
|
|
|
10
10
|
getElement,
|
|
11
11
|
h,
|
|
12
12
|
registerInstance
|
|
13
|
-
} from "./chunk-
|
|
13
|
+
} from "./chunk-XRJRF3MM.js";
|
|
14
14
|
|
|
15
15
|
// dist/esm/ui-toast-region.entry.js
|
|
16
16
|
var uiToastRegionCss = () => `:host{position:fixed;top:calc(var(--ui-space-4) + env(safe-area-inset-top));left:50%;transform:translateX(-50%);z-index:9999;display:grid;gap:var(--ui-space-2);inline-size:min(24rem, calc(100vw - (var(--ui-space-4) * 2)));max-inline-size:100%;pointer-events:none}:host([popover]){right:auto;bottom:auto;margin:0}:host>*{pointer-events:auto}::slotted([data-ui-toast]){display:grid;grid-template-columns:1fr auto;gap:var(--ui-space-2);align-items:start;border:1px solid var(--ui-border-default);border-radius:var(--ui-radius-3);padding:var(--ui-space-3) var(--ui-space-4);background:var(--ui-surface-elevated);color:var(--ui-text-primary);box-shadow:var(--ui-shadow-lg);animation:ui-toast-enter 0.25s var(--ui-motion-ease) forwards}@keyframes ui-toast-enter{from{opacity:0;transform:translateY(-0.5rem)}to{opacity:1;transform:translateY(0)}}::slotted([data-ui-toast][aria-hidden='true']){display:none}::slotted([data-ui-toast-dismiss]){border:0;background:transparent;color:var(--ui-text-secondary);cursor:pointer;font:inherit}`;
|
|
@@ -85,7 +85,7 @@ var UIToastRegion = class {
|
|
|
85
85
|
});
|
|
86
86
|
};
|
|
87
87
|
render() {
|
|
88
|
-
return h(Host, { key: "
|
|
88
|
+
return h(Host, { key: "8a3546bcd59e12f21393ea55fa4d232d3907a34e", role: "region", "aria-label": "Notifications", "aria-live": "polite", "data-open": this.internalOpen ? "" : void 0 }, h("slot", { key: "a4a4525a1ca768d65ff36b3889a821b8dda8b6f7" }));
|
|
89
89
|
}
|
|
90
90
|
static get watchers() {
|
|
91
91
|
return {
|
|
@@ -18,7 +18,7 @@ import {
|
|
|
18
18
|
getElement,
|
|
19
19
|
h,
|
|
20
20
|
registerInstance
|
|
21
|
-
} from "./chunk-
|
|
21
|
+
} from "./chunk-XRJRF3MM.js";
|
|
22
22
|
|
|
23
23
|
// dist/esm/ui-tooltip.entry.js
|
|
24
24
|
var uiTooltipCss = () => `:host{position:fixed;inset:auto;margin:0;display:inline-block;box-sizing:border-box;padding:0;border:0;border-radius:0;background:transparent;opacity:0;transform:translateY(4px);transition:opacity var(--ui-motion-fast) var(--ui-motion-ease), transform var(--ui-motion-fast) var(--ui-motion-ease), display var(--ui-motion-fast) allow-discrete, overlay var(--ui-motion-fast) allow-discrete}.tooltip__surface{box-sizing:border-box;border:1px solid var(--ui-border-default);border-radius:var(--ui-radius-2);background:var(--ui-surface-elevated);color:var(--ui-text-primary);padding:var(--ui-space-2) var(--ui-space-3);font-size:var(--ui-font-size-sm);box-shadow:var(--ui-shadow-md)}:host(:popover-open){opacity:1;transform:translateY(0)}@starting-style{:host(:popover-open){opacity:0;transform:translateY(4px)}}:host([hidden]){display:none !important}@media (prefers-reduced-motion: reduce){:host{transition:none}}`;
|
|
@@ -232,7 +232,7 @@ var UITooltip = class {
|
|
|
232
232
|
}
|
|
233
233
|
}
|
|
234
234
|
render() {
|
|
235
|
-
return h(Host, { key: "
|
|
235
|
+
return h(Host, { key: "6c70f235889d6f1c425f0a51fcfc04e06a96dea4", role: "tooltip", hidden: !this.internalOpen, "data-open": this.internalOpen ? "" : void 0 }, h("div", { key: "5c4f1d264e32d308f5b26af4e967e13369c4238a", class: "tooltip__surface" }, h("slot", { key: "52b5900d67ffa7590b0ff97511f99718d2e8c311" })));
|
|
236
236
|
}
|
|
237
237
|
static get watchers() {
|
|
238
238
|
return {
|
|
@@ -3,7 +3,7 @@ import {
|
|
|
3
3
|
getElement,
|
|
4
4
|
h,
|
|
5
5
|
registerInstance
|
|
6
|
-
} from "./chunk-
|
|
6
|
+
} from "./chunk-XRJRF3MM.js";
|
|
7
7
|
|
|
8
8
|
// dist/esm/ui-top-bar.entry.js
|
|
9
9
|
var uiTopBarCss = () => `:host{position:sticky;inset-block-start:0;z-index:var(--ui-top-bar-z-index, 100);display:block}.top-bar{min-block-size:calc(var(--ui-top-bar-height, 56px) + env(safe-area-inset-top));display:flex;align-items:center;gap:var(--ui-top-bar-gap, var(--ui-space-3, 0.75rem));padding-block-start:env(safe-area-inset-top);padding-inline-start:max( var(--ui-top-bar-padding-inline, var(--ui-space-4, 1rem)), env(safe-area-inset-left) );padding-inline-end:max( var(--ui-top-bar-padding-inline, var(--ui-space-4, 1rem)), env(safe-area-inset-right) );background:var(--ui-top-bar-bg, var(--ui-surface, #ffffff));border-block-end:1px solid var(--ui-top-bar-border, var(--ui-border, #e5e7eb))}.top-bar__leading,.top-bar__search,.top-bar__actions{display:flex;align-items:center;flex-shrink:0}.top-bar__actions{gap:var(--ui-top-bar-actions-gap, var(--ui-space-1, 0.25rem))}.top-bar__title{min-inline-size:0;flex:1}[hidden]{display:none}@media (min-width: 768px){:host{display:none}}`;
|
|
@@ -40,7 +40,7 @@ var UITopBar = class {
|
|
|
40
40
|
this.hasActions = slotHasContent(this.actionsSlot);
|
|
41
41
|
};
|
|
42
42
|
render() {
|
|
43
|
-
return h(Host, { key: "
|
|
43
|
+
return h(Host, { key: "ef7cf644a8e8381d7d1f8d093bcfefcdc4620682" }, h("header", { key: "5055594a179d86efefd43529e070a582c51cb1d8", class: "top-bar", part: "base" }, h("div", { key: "bd6ec069ae9d7820a6992250ba1aa997b4cc6754", class: "top-bar__leading", hidden: !this.hasLeading }, h("slot", { key: "3b9b1b73fb455ad720e1db46757555eb3713c0b8", name: "leading", ref: (el) => this.leadingSlot = el, onSlotchange: this.syncSlots })), h("div", { key: "e402cc0cb7ec4418460182f8f32cb161c6139221", class: "top-bar__title" }, h("slot", { key: "fce0cfc11da269167853f591742b1369023864ae" })), h("div", { key: "6861bb04f399076378aa1fa9be24b35db277106a", class: "top-bar__search", hidden: !this.hasSearch }, h("slot", { key: "3857f37d53ec99b36a52cb7830e634afdee29d2e", name: "search", ref: (el) => this.searchSlot = el, onSlotchange: this.syncSlots })), h("div", { key: "538f6297078b6d5aa85906e902066e8809f52540", class: "top-bar__actions", hidden: !this.hasActions }, h("slot", { key: "3c45ff59c4b48673e796c6e93842cb11fceb652f", name: "actions", ref: (el) => this.actionsSlot = el, onSlotchange: this.syncSlots }))));
|
|
44
44
|
}
|
|
45
45
|
};
|
|
46
46
|
UITopBar.style = uiTopBarCss();
|
|
@@ -10,7 +10,7 @@ import {
|
|
|
10
10
|
getElement,
|
|
11
11
|
h,
|
|
12
12
|
registerInstance
|
|
13
|
-
} from "./chunk-
|
|
13
|
+
} from "./chunk-XRJRF3MM.js";
|
|
14
14
|
|
|
15
15
|
// dist/esm/ui-tree-item.entry.js
|
|
16
16
|
var uiTreeItemCss = () => `:host{--ui-tree-indent:16px;--ui-tree-row-min-height:32px;--ui-tree-drop-color:var(--ui-accent-solid);position:relative;display:block;min-inline-size:0;margin-inline-start:calc(var(--ui-tree-item-depth, 0) * var(--ui-tree-indent))}.row{position:relative;display:grid;grid-template-columns:20px auto minmax(0, 1fr) auto;align-items:center;min-block-size:var(--ui-tree-row-min-height);min-inline-size:0;font-size:var(--ui-tree-font-size, var(--ui-font-size-ui, 0.9375rem));border-radius:var(--ui-radius-md);color:var(--ui-text-secondary);transition:background-color var(--ui-motion-fast) var(--ui-motion-ease), color var(--ui-motion-fast) var(--ui-motion-ease), opacity var(--ui-motion-fast) var(--ui-motion-ease), box-shadow var(--ui-motion-fast) var(--ui-motion-ease), min-block-size var(--ui-motion-base) var(--ui-motion-ease)}.row:hover,:host([data-selected]) .row,.row:focus-within{color:var(--ui-text-primary);background:var(--ui-surface-muted)}:host([data-disabled]) .row{opacity:0.55}:host([data-dragging]) .row{opacity:0.42}:host(:focus){outline:none}:host(:focus-visible) .row{box-shadow:0 0 0 2px var(--ui-focus-ring)}:host([data-drop-position='inside']) .row{background:var(--ui-accent-subtle);box-shadow:inset 0 0 0 1px var(--ui-tree-drop-color)}.disclosure,.disclosure-spacer{grid-column:1;grid-row:1;inline-size:20px;block-size:28px}.disclosure{display:grid;place-items:center;padding:0;color:var(--ui-text-muted);background:transparent;border:0;border-radius:var(--ui-radius-sm);cursor:pointer}.disclosure:hover{color:var(--ui-text-primary);background:var(--ui-surface-elevated)}.disclosure-icon{display:block;inline-size:14px;block-size:14px;transform:rotate(-90deg);transition:transform var(--ui-motion-fast) var(--ui-motion-ease)}.disclosure-icon--expanded{transform:rotate(0deg)}.disclosure-icon :is(svg),.drag-handle :is(svg){display:block;inline-size:100%;block-size:100%}.leading{display:none}.leading:has(*){display:inline-grid;place-items:center;grid-column:2;grid-row:1;inline-size:16px;block-size:16px;margin-inline-start:var(--ui-space-1)}.label{grid-column:3;grid-row:1;min-inline-size:0;padding:var(--ui-space-1) var(--ui-space-2)}.actions{grid-column:4;grid-row:1;display:inline-flex;align-items:center;min-inline-size:0}.drag-handle{position:absolute;z-index:2;inset-block-start:50%;inset-inline-start:-22px;inline-size:20px;block-size:32px;display:grid;place-items:center;padding:7px 3px;color:var(--ui-text-muted);background:var(--ui-surface-elevated);border:1px solid transparent;border-radius:var(--ui-radius-sm);cursor:grab;opacity:0;pointer-events:none;transform:translateY(-50%);transition:opacity var(--ui-motion-fast) var(--ui-motion-ease)}.row:hover .drag-handle,.drag-handle:focus-visible,:host([data-dragging]) .drag-handle{opacity:1;pointer-events:auto}.drag-handle:active{cursor:grabbing}.drop-indicator{position:absolute;z-index:3;inset-inline:1px;display:none;block-size:2px;border-radius:999px;background:var(--ui-tree-drop-color);pointer-events:none}.drop-indicator::before,.drop-indicator::after{content:'';position:absolute;inset-block-start:50%;inline-size:7px;block-size:7px;border:2px solid var(--ui-tree-drop-color);border-radius:999px;background:var(--ui-surface-elevated);transform:translateY(-50%)}.drop-indicator::before{inset-inline-start:-1px}.drop-indicator::after{inset-inline-end:-1px}:host([data-drop-position='before']) .row-drop-indicator{display:block;inset-block-start:-1px}:host([data-drop-position='after']) .subtree-drop-indicator{display:block;inset-block-end:-1px}.children[hidden]{display:none}:host-context(html[data-ui-input-modality='touch']){--ui-tree-row-min-height:44px}:host-context(html[data-ui-input-modality='touch']) .drag-handle{display:none}@media (prefers-reduced-motion: reduce){.row,.disclosure-icon,.drag-handle{transition:none}}`;
|
|
@@ -126,10 +126,10 @@ var UITreeItem = class {
|
|
|
126
126
|
const expanded = this.isExpanded();
|
|
127
127
|
const disclosureLabel = `${expanded ? "Collapse" : "Expand"} ${this.label || "item"}`;
|
|
128
128
|
const dragLabel = `Drag ${this.label || "item"} to reorder`;
|
|
129
|
-
return h(Host, { key: "
|
|
129
|
+
return h(Host, { key: "f092fa9586a39aba1a9629ba42e52f8fbc10de05", role: "treeitem", "aria-label": this.label || void 0, "aria-level": String(level), "aria-expanded": this.container ? String(expanded) : void 0, "aria-selected": String(this.selected), "aria-disabled": this.disabled ? "true" : void 0, "data-container": this.container ? "" : void 0, "data-selected": this.selected ? "" : void 0, "data-disabled": this.disabled ? "" : void 0, "data-drag-type": this.dragType || "item", "data-drop-scope": this.dropScope || void 0, "data-accepts": this.accepts || void 0, tabIndex: this.disabled || !this.tabStop ? -1 : 0, style: {
|
|
130
130
|
"--ui-tree-item-depth": String(level - 1),
|
|
131
131
|
"margin-inline-start": level > 1 ? "var(--ui-tree-indent, 16px)" : "0px"
|
|
132
|
-
} }, h("div", { key: "
|
|
132
|
+
} }, h("div", { key: "2f16d97219ba9ec9e37688d97ad9144508aa1ed5", class: "row", part: "row", onClick: this.onRowClick }, this.sortable && !this.disabled ? h("button", { class: "drag-handle", part: "drag-handle", type: "button", draggable: true, "aria-label": dragLabel, title: dragLabel }, h("span", { innerHTML: loomaIconMarkup("grip-vertical") })) : null, this.container ? h("button", { class: "disclosure", part: "disclosure", type: "button", "aria-label": disclosureLabel, "aria-expanded": String(expanded), disabled: this.disabled, onClick: this.onDisclosureClick, onKeyDown: this.onDisclosureKeydown }, h("span", { class: { "disclosure-icon": true, "disclosure-icon--expanded": expanded }, innerHTML: loomaIconMarkup("chevron-down") })) : h("span", { class: "disclosure-spacer", "aria-hidden": "true" }), h("span", { key: "d984631c891df304edb3e1dc5bcd19af3ad8e20d", class: "leading", part: "leading" }, h("slot", { key: "81a0e055859df5d4daaa6dac39013b23dcc2831b", name: "leading" })), h("span", { key: "3ae295523d5a3b9feaa9bfaa16d807349e37d78b", class: "label", part: "label" }, h("slot", { key: "db8503a41d087d283074a41e76fa872ff4b2a707" })), h("span", { key: "ac5b5db7128b31a9263b912bd64cd90ac640eaeb", class: "actions", part: "actions" }, h("slot", { key: "c8842a5d80215ec297688c86f6bfe9b4d9bed333", name: "actions" })), h("span", { key: "b7f239bc16867678291850ad61a5cd752d6a7425", class: "drop-indicator row-drop-indicator", part: "drop-indicator", "aria-hidden": "true" })), this.container ? h("div", { class: "children", part: "children", role: "group", hidden: !expanded }, h("slot", { name: "children" })) : null, h("span", { key: "2a5f448db2f4f363a34a1a950785e0ee12cc9938", class: "drop-indicator subtree-drop-indicator", part: "drop-indicator", "aria-hidden": "true" }));
|
|
133
133
|
}
|
|
134
134
|
static get watchers() {
|
|
135
135
|
return {
|
|
@@ -6,7 +6,7 @@ import {
|
|
|
6
6
|
getElement,
|
|
7
7
|
h,
|
|
8
8
|
registerInstance
|
|
9
|
-
} from "./chunk-
|
|
9
|
+
} from "./chunk-XRJRF3MM.js";
|
|
10
10
|
|
|
11
11
|
// dist/esm/ui-tree.entry.js
|
|
12
12
|
function classifyDropPosition(rect, clientY, acceptsChildren) {
|
|
@@ -461,7 +461,7 @@ var UITree = class {
|
|
|
461
461
|
}
|
|
462
462
|
};
|
|
463
463
|
render() {
|
|
464
|
-
return h(Host, { key: "
|
|
464
|
+
return h(Host, { key: "7efbf793fe63471006df57f0045a5fe995c81440", role: "tree", "aria-label": this.label || "Tree" }, h("slot", { key: "1804e391796e7451c93cb58258e0e23ec3ad98c7" }));
|
|
465
465
|
}
|
|
466
466
|
};
|
|
467
467
|
UITree.style = uiTreeCss();
|
package/package.json
CHANGED
|
@@ -109,6 +109,7 @@ var Combobox = defineComponent2({
|
|
|
109
109
|
placeholder: String,
|
|
110
110
|
name: String,
|
|
111
111
|
size: { type: String, default: "md" },
|
|
112
|
+
labelVisibility: { type: String, default: "visible" },
|
|
112
113
|
disabled: Boolean,
|
|
113
114
|
readOnly: Boolean,
|
|
114
115
|
required: Boolean,
|
|
@@ -170,13 +171,93 @@ var Combobox = defineComponent2({
|
|
|
170
171
|
required: props.required
|
|
171
172
|
})]),
|
|
172
173
|
...slots.option ? rows.value.map((option) => h2("div", { slot: `option-${option.id}`, key: option.id }, slots.option({ option }))) : [],
|
|
173
|
-
...["loading", "empty", "error", "create"].flatMap((name) => slots[name] ? [h2("div", { slot: name }, slots[name]({}))] : [])
|
|
174
|
+
...["start", "footer", "loading", "empty", "error", "create"].flatMap((name) => slots[name] ? [h2("div", { slot: name }, slots[name]({}))] : [])
|
|
175
|
+
]);
|
|
176
|
+
}
|
|
177
|
+
});
|
|
178
|
+
|
|
179
|
+
// src/MultiCombobox.ts
|
|
180
|
+
import { defineComponent as defineComponent3, h as h3, shallowRef as shallowRef3, watch, watchEffect as watchEffect3 } from "vue";
|
|
181
|
+
var MultiCombobox = defineComponent3({
|
|
182
|
+
name: "MultiCombobox",
|
|
183
|
+
inheritAttrs: false,
|
|
184
|
+
props: {
|
|
185
|
+
label: { type: String, required: true },
|
|
186
|
+
items: { type: Array, default: () => [] },
|
|
187
|
+
config: { type: Object, default: () => ({}) },
|
|
188
|
+
query: { type: String, default: void 0 },
|
|
189
|
+
defaultQuery: String,
|
|
190
|
+
tokenSeparators: { type: Array, default: () => [] },
|
|
191
|
+
placeholder: String,
|
|
192
|
+
name: String,
|
|
193
|
+
disabled: Boolean,
|
|
194
|
+
readOnly: Boolean,
|
|
195
|
+
required: Boolean
|
|
196
|
+
},
|
|
197
|
+
emits: {
|
|
198
|
+
"update:query": (_query) => true,
|
|
199
|
+
queryChange: (_detail) => true,
|
|
200
|
+
addItem: (_detail) => true,
|
|
201
|
+
removeItem: (_detail) => true,
|
|
202
|
+
createItem: (_detail) => true,
|
|
203
|
+
optionsChange: (_detail) => true
|
|
204
|
+
},
|
|
205
|
+
slots: Object,
|
|
206
|
+
setup(props, { attrs, slots, emit, expose }) {
|
|
207
|
+
const element = shallowRef3();
|
|
208
|
+
const rows = shallowRef3(props.config.options ?? []);
|
|
209
|
+
const currentQuery = shallowRef3(props.query ?? props.defaultQuery ?? "");
|
|
210
|
+
watch(() => props.query, (query) => {
|
|
211
|
+
if (query !== void 0) currentQuery.value = query;
|
|
212
|
+
});
|
|
213
|
+
watchEffect3(() => {
|
|
214
|
+
if (!element.value) return;
|
|
215
|
+
element.value.items = props.items;
|
|
216
|
+
element.value.config = props.config;
|
|
217
|
+
element.value.query = props.query;
|
|
218
|
+
element.value.tokenSeparators = props.tokenSeparators;
|
|
219
|
+
});
|
|
220
|
+
expose({ focusInput: () => element.value.focusInput() });
|
|
221
|
+
return () => h3("ui-multi-combobox", {
|
|
222
|
+
...attrs,
|
|
223
|
+
...Object.fromEntries(Object.entries(props).filter(([key]) => !["items", "config", "query", "tokenSeparators"].includes(key))),
|
|
224
|
+
items: props.items,
|
|
225
|
+
config: props.config,
|
|
226
|
+
query: props.query,
|
|
227
|
+
tokenSeparators: props.tokenSeparators,
|
|
228
|
+
"data-allow-mismatch": "class",
|
|
229
|
+
ref: element,
|
|
230
|
+
class: [attrs.class, element.value?.shadowRoot && "hydrated"],
|
|
231
|
+
"onOptions-change": (event) => {
|
|
232
|
+
rows.value = event.detail;
|
|
233
|
+
emit("optionsChange", event.detail);
|
|
234
|
+
},
|
|
235
|
+
"onQuery-change": (event) => {
|
|
236
|
+
currentQuery.value = event.detail.query;
|
|
237
|
+
emit("update:query", event.detail.query);
|
|
238
|
+
emit("queryChange", event.detail);
|
|
239
|
+
},
|
|
240
|
+
"onAdd-item": (event) => emit("addItem", event.detail),
|
|
241
|
+
"onRemove-item": (event) => emit("removeItem", event.detail),
|
|
242
|
+
"onCreate-item": (event) => emit("createItem", event.detail)
|
|
243
|
+
}, [
|
|
244
|
+
h3("label", { slot: "fallback" }, [props.label, h3("input", {
|
|
245
|
+
value: props.query ?? props.defaultQuery ?? "",
|
|
246
|
+
disabled: props.disabled,
|
|
247
|
+
readonly: props.readOnly,
|
|
248
|
+
required: props.required
|
|
249
|
+
})]),
|
|
250
|
+
...slots.item ? props.items.map((item) => h3("span", { slot: `item-${item.id}`, key: item.id }, slots.item({ item }))) : [],
|
|
251
|
+
...slots.option ? rows.value.map((option) => h3("span", { slot: `option-${option.id}`, key: option.id }, slots.option({ option }))) : [],
|
|
252
|
+
...slots.create ? [h3("span", { slot: "create" }, slots.create({ query: currentQuery.value }))] : [],
|
|
253
|
+
...["footer", "loading", "empty", "error"].flatMap((name) => slots[name] ? [h3("div", { slot: name }, slots[name]({}))] : [])
|
|
174
254
|
]);
|
|
175
255
|
}
|
|
176
256
|
});
|
|
177
257
|
|
|
178
258
|
// src/index.ts
|
|
179
259
|
var Combobox2 = Combobox;
|
|
260
|
+
var MultiCombobox2 = MultiCombobox;
|
|
180
261
|
var Stack = createAdapterComponent("ui-stack", "Stack");
|
|
181
262
|
var Inline = createAdapterComponent("ui-inline", "Inline");
|
|
182
263
|
var Cluster = createAdapterComponent("ui-cluster", "Cluster");
|
|
@@ -187,6 +268,7 @@ var Sidebar = createAdapterComponent("ui-sidebar", "Sidebar", [], "");
|
|
|
187
268
|
var Reel = createAdapterComponent("ui-reel", "Reel");
|
|
188
269
|
var Separator = createAdapterComponent("ui-separator", "Separator");
|
|
189
270
|
var Disclosure = createAdapterComponent("ui-disclosure", "Disclosure", [], "class", ["open"]);
|
|
271
|
+
var Editable = createAdapterComponent("ui-editable", "Editable", [["edit-change", "onEditChange"]], "class", ["edit"]);
|
|
190
272
|
var Tabs = createAdapterComponent("ui-tabs", "Tabs", [], "class", ["value"]);
|
|
191
273
|
var Dialog = createAdapterComponent("ui-dialog", "Dialog", [], "class", ["open"]);
|
|
192
274
|
var Popover = createAdapterComponent("ui-popover", "Popover", [], "class", ["open"]);
|
|
@@ -231,6 +313,7 @@ var TreeItem = createAdapterComponent(
|
|
|
231
313
|
);
|
|
232
314
|
var ADAPTER_COMPONENT_TAG_MAP = {
|
|
233
315
|
Combobox: "ui-combobox",
|
|
316
|
+
MultiCombobox: "ui-multi-combobox",
|
|
234
317
|
Stack: "ui-stack",
|
|
235
318
|
Inline: "ui-inline",
|
|
236
319
|
Cluster: "ui-cluster",
|
|
@@ -241,6 +324,7 @@ var ADAPTER_COMPONENT_TAG_MAP = {
|
|
|
241
324
|
Reel: "ui-reel",
|
|
242
325
|
Separator: "ui-separator",
|
|
243
326
|
Disclosure: "ui-disclosure",
|
|
327
|
+
Editable: "ui-editable",
|
|
244
328
|
Tabs: "ui-tabs",
|
|
245
329
|
Dialog: "ui-dialog",
|
|
246
330
|
Popover: "ui-popover",
|
|
@@ -278,6 +362,7 @@ export {
|
|
|
278
362
|
toHTMLElement,
|
|
279
363
|
createAdapterComponent,
|
|
280
364
|
Combobox2 as Combobox,
|
|
365
|
+
MultiCombobox2 as MultiCombobox,
|
|
281
366
|
Stack,
|
|
282
367
|
Inline,
|
|
283
368
|
Cluster,
|
|
@@ -288,6 +373,7 @@ export {
|
|
|
288
373
|
Reel,
|
|
289
374
|
Separator,
|
|
290
375
|
Disclosure,
|
|
376
|
+
Editable,
|
|
291
377
|
Tabs,
|
|
292
378
|
Dialog,
|
|
293
379
|
Popover,
|
package/vue/editor/index.js
CHANGED
package/vue/index.d.ts
CHANGED
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import * as _threadlabs_looma_core from '@threadlabs/looma/core';
|
|
2
|
-
|
|
2
|
+
import { EditableChange } from '@threadlabs/looma/core';
|
|
3
|
+
export { ComboboxChange, ComboboxConfig, ComboboxOption, ComboboxProvider, ComboboxRequest, ComboboxValidationState, EditableChange, FieldFormatter, FieldIssue, FieldSchema, FieldValidation, MultiComboboxCreate, MultiComboboxItem, MultiComboboxItemChange } from '@threadlabs/looma/core';
|
|
3
4
|
import * as vue from 'vue';
|
|
4
5
|
|
|
5
6
|
interface VueAdapterEventMap {
|
|
@@ -56,6 +57,7 @@ interface VueAdapterEventMap {
|
|
|
56
57
|
expanded: boolean;
|
|
57
58
|
trigger: string;
|
|
58
59
|
};
|
|
60
|
+
editChange: EditableChange;
|
|
59
61
|
}
|
|
60
62
|
|
|
61
63
|
interface AdapterBaseProps {
|
|
@@ -112,6 +114,12 @@ interface DisclosureProps extends AdapterBaseProps {
|
|
|
112
114
|
"onClose"?: ((detail: VueAdapterEventMap['close']) => void) | undefined;
|
|
113
115
|
"onOpen"?: ((detail: VueAdapterEventMap['open']) => void) | undefined;
|
|
114
116
|
}
|
|
117
|
+
interface EditableProps extends AdapterBaseProps {
|
|
118
|
+
"edit"?: boolean | undefined;
|
|
119
|
+
"defaultEdit"?: boolean | undefined;
|
|
120
|
+
"disabled"?: boolean | undefined;
|
|
121
|
+
"onEditChange"?: ((detail: VueAdapterEventMap['editChange']) => void) | undefined;
|
|
122
|
+
}
|
|
115
123
|
interface TabsProps extends AdapterBaseProps {
|
|
116
124
|
"defaultValue"?: string | undefined;
|
|
117
125
|
"orientation"?: "horizontal" | "vertical" | undefined;
|
|
@@ -248,6 +256,7 @@ interface BadgeProps extends AdapterBaseProps {
|
|
|
248
256
|
}
|
|
249
257
|
interface ChipProps extends AdapterBaseProps {
|
|
250
258
|
"appearance"?: "tag" | "pill" | undefined;
|
|
259
|
+
"size"?: "xs" | "sm" | undefined;
|
|
251
260
|
}
|
|
252
261
|
interface CalloutProps extends AdapterBaseProps {
|
|
253
262
|
"tone"?: "info" | "note" | "warning" | "success" | "error" | undefined;
|
|
@@ -308,6 +317,7 @@ interface AdapterComponentProps {
|
|
|
308
317
|
"Reel": ReelProps;
|
|
309
318
|
"Separator": SeparatorProps;
|
|
310
319
|
"Disclosure": DisclosureProps;
|
|
320
|
+
"Editable": EditableProps;
|
|
311
321
|
"Tabs": TabsProps;
|
|
312
322
|
"Dialog": DialogProps;
|
|
313
323
|
"Popover": PopoverProps;
|
|
@@ -365,6 +375,10 @@ declare const Combobox: vue.DefineComponent<vue.ExtractPropTypes<{
|
|
|
365
375
|
type: vue.PropType<"sm" | "md">;
|
|
366
376
|
default: string;
|
|
367
377
|
};
|
|
378
|
+
labelVisibility: {
|
|
379
|
+
type: vue.PropType<"visible" | "sr-only">;
|
|
380
|
+
default: string;
|
|
381
|
+
};
|
|
368
382
|
disabled: BooleanConstructor;
|
|
369
383
|
readOnly: BooleanConstructor;
|
|
370
384
|
required: BooleanConstructor;
|
|
@@ -411,6 +425,10 @@ declare const Combobox: vue.DefineComponent<vue.ExtractPropTypes<{
|
|
|
411
425
|
type: vue.PropType<"sm" | "md">;
|
|
412
426
|
default: string;
|
|
413
427
|
};
|
|
428
|
+
labelVisibility: {
|
|
429
|
+
type: vue.PropType<"visible" | "sr-only">;
|
|
430
|
+
default: string;
|
|
431
|
+
};
|
|
414
432
|
disabled: BooleanConstructor;
|
|
415
433
|
readOnly: BooleanConstructor;
|
|
416
434
|
required: BooleanConstructor;
|
|
@@ -440,6 +458,7 @@ declare const Combobox: vue.DefineComponent<vue.ExtractPropTypes<{
|
|
|
440
458
|
query: string;
|
|
441
459
|
config: _threadlabs_looma_core.ComboboxConfig;
|
|
442
460
|
size: "sm" | "md";
|
|
461
|
+
labelVisibility: "visible" | "sr-only";
|
|
443
462
|
}, vue.SlotsType<{
|
|
444
463
|
option: {
|
|
445
464
|
option: _threadlabs_looma_core.ComboboxOption;
|
|
@@ -448,6 +467,109 @@ declare const Combobox: vue.DefineComponent<vue.ExtractPropTypes<{
|
|
|
448
467
|
empty: Record<string, never>;
|
|
449
468
|
error: Record<string, never>;
|
|
450
469
|
create: Record<string, never>;
|
|
470
|
+
start: Record<string, never>;
|
|
471
|
+
footer: Record<string, never>;
|
|
472
|
+
}>, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
|
|
473
|
+
declare const MultiCombobox: vue.DefineComponent<vue.ExtractPropTypes<{
|
|
474
|
+
label: {
|
|
475
|
+
type: StringConstructor;
|
|
476
|
+
required: true;
|
|
477
|
+
};
|
|
478
|
+
items: {
|
|
479
|
+
type: vue.PropType<readonly _threadlabs_looma_core.MultiComboboxItem[]>;
|
|
480
|
+
default: () => never[];
|
|
481
|
+
};
|
|
482
|
+
config: {
|
|
483
|
+
type: vue.PropType<_threadlabs_looma_core.ComboboxConfig>;
|
|
484
|
+
default: () => {};
|
|
485
|
+
};
|
|
486
|
+
query: {
|
|
487
|
+
type: StringConstructor;
|
|
488
|
+
default: undefined;
|
|
489
|
+
};
|
|
490
|
+
defaultQuery: StringConstructor;
|
|
491
|
+
tokenSeparators: {
|
|
492
|
+
type: vue.PropType<readonly string[]>;
|
|
493
|
+
default: () => never[];
|
|
494
|
+
};
|
|
495
|
+
placeholder: StringConstructor;
|
|
496
|
+
name: StringConstructor;
|
|
497
|
+
disabled: BooleanConstructor;
|
|
498
|
+
readOnly: BooleanConstructor;
|
|
499
|
+
required: BooleanConstructor;
|
|
500
|
+
}>, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
|
|
501
|
+
[key: string]: any;
|
|
502
|
+
}>, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {
|
|
503
|
+
'update:query': (_query: string) => true;
|
|
504
|
+
queryChange: (_detail: {
|
|
505
|
+
query: string;
|
|
506
|
+
display: string;
|
|
507
|
+
trigger: string;
|
|
508
|
+
}) => true;
|
|
509
|
+
addItem: (_detail: _threadlabs_looma_core.MultiComboboxItemChange) => true;
|
|
510
|
+
removeItem: (_detail: _threadlabs_looma_core.MultiComboboxItemChange) => true;
|
|
511
|
+
createItem: (_detail: _threadlabs_looma_core.MultiComboboxCreate) => true;
|
|
512
|
+
optionsChange: (_detail: readonly _threadlabs_looma_core.ComboboxOption[]) => true;
|
|
513
|
+
}, string, vue.PublicProps, Readonly<vue.ExtractPropTypes<{
|
|
514
|
+
label: {
|
|
515
|
+
type: StringConstructor;
|
|
516
|
+
required: true;
|
|
517
|
+
};
|
|
518
|
+
items: {
|
|
519
|
+
type: vue.PropType<readonly _threadlabs_looma_core.MultiComboboxItem[]>;
|
|
520
|
+
default: () => never[];
|
|
521
|
+
};
|
|
522
|
+
config: {
|
|
523
|
+
type: vue.PropType<_threadlabs_looma_core.ComboboxConfig>;
|
|
524
|
+
default: () => {};
|
|
525
|
+
};
|
|
526
|
+
query: {
|
|
527
|
+
type: StringConstructor;
|
|
528
|
+
default: undefined;
|
|
529
|
+
};
|
|
530
|
+
defaultQuery: StringConstructor;
|
|
531
|
+
tokenSeparators: {
|
|
532
|
+
type: vue.PropType<readonly string[]>;
|
|
533
|
+
default: () => never[];
|
|
534
|
+
};
|
|
535
|
+
placeholder: StringConstructor;
|
|
536
|
+
name: StringConstructor;
|
|
537
|
+
disabled: BooleanConstructor;
|
|
538
|
+
readOnly: BooleanConstructor;
|
|
539
|
+
required: BooleanConstructor;
|
|
540
|
+
}>> & Readonly<{
|
|
541
|
+
"onUpdate:query"?: (_query: string) => any;
|
|
542
|
+
onQueryChange?: (_detail: {
|
|
543
|
+
query: string;
|
|
544
|
+
display: string;
|
|
545
|
+
trigger: string;
|
|
546
|
+
}) => any;
|
|
547
|
+
onAddItem?: (_detail: _threadlabs_looma_core.MultiComboboxItemChange) => any;
|
|
548
|
+
onRemoveItem?: (_detail: _threadlabs_looma_core.MultiComboboxItemChange) => any;
|
|
549
|
+
onCreateItem?: (_detail: _threadlabs_looma_core.MultiComboboxCreate) => any;
|
|
550
|
+
onOptionsChange?: (_detail: readonly _threadlabs_looma_core.ComboboxOption<unknown>[]) => any;
|
|
551
|
+
}>, {
|
|
552
|
+
disabled: boolean;
|
|
553
|
+
readOnly: boolean;
|
|
554
|
+
required: boolean;
|
|
555
|
+
query: string;
|
|
556
|
+
config: _threadlabs_looma_core.ComboboxConfig;
|
|
557
|
+
items: readonly _threadlabs_looma_core.MultiComboboxItem[];
|
|
558
|
+
tokenSeparators: readonly string[];
|
|
559
|
+
}, vue.SlotsType<{
|
|
560
|
+
item: {
|
|
561
|
+
item: _threadlabs_looma_core.MultiComboboxItem;
|
|
562
|
+
};
|
|
563
|
+
option: {
|
|
564
|
+
option: _threadlabs_looma_core.ComboboxOption;
|
|
565
|
+
};
|
|
566
|
+
create: {
|
|
567
|
+
query: string;
|
|
568
|
+
};
|
|
569
|
+
footer: Record<string, never>;
|
|
570
|
+
loading: Record<string, never>;
|
|
571
|
+
empty: Record<string, never>;
|
|
572
|
+
error: Record<string, never>;
|
|
451
573
|
}>, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
|
|
452
574
|
|
|
453
575
|
declare const Stack: vue.DefineComponent<StackProps>;
|
|
@@ -460,6 +582,7 @@ declare const Sidebar: vue.DefineComponent<SidebarProps>;
|
|
|
460
582
|
declare const Reel: vue.DefineComponent<ReelProps>;
|
|
461
583
|
declare const Separator: vue.DefineComponent<SeparatorProps>;
|
|
462
584
|
declare const Disclosure: vue.DefineComponent<DisclosureProps>;
|
|
585
|
+
declare const Editable: vue.DefineComponent<EditableProps>;
|
|
463
586
|
declare const Tabs: vue.DefineComponent<TabsProps>;
|
|
464
587
|
declare const Dialog: vue.DefineComponent<DialogProps>;
|
|
465
588
|
declare const Popover: vue.DefineComponent<PopoverProps>;
|
|
@@ -492,6 +615,7 @@ declare const Tree: vue.DefineComponent<TreeProps>;
|
|
|
492
615
|
declare const TreeItem: vue.DefineComponent<TreeItemProps>;
|
|
493
616
|
declare const ADAPTER_COMPONENT_TAG_MAP: {
|
|
494
617
|
readonly Combobox: "ui-combobox";
|
|
618
|
+
readonly MultiCombobox: "ui-multi-combobox";
|
|
495
619
|
readonly Stack: "ui-stack";
|
|
496
620
|
readonly Inline: "ui-inline";
|
|
497
621
|
readonly Cluster: "ui-cluster";
|
|
@@ -502,6 +626,7 @@ declare const ADAPTER_COMPONENT_TAG_MAP: {
|
|
|
502
626
|
readonly Reel: "ui-reel";
|
|
503
627
|
readonly Separator: "ui-separator";
|
|
504
628
|
readonly Disclosure: "ui-disclosure";
|
|
629
|
+
readonly Editable: "ui-editable";
|
|
505
630
|
readonly Tabs: "ui-tabs";
|
|
506
631
|
readonly Dialog: "ui-dialog";
|
|
507
632
|
readonly Popover: "ui-popover";
|
|
@@ -535,4 +660,4 @@ declare const ADAPTER_COMPONENT_TAG_MAP: {
|
|
|
535
660
|
};
|
|
536
661
|
declare const VUE_ADAPTER_NOTE = "Thin adapter only: attrs and slots pass through to custom elements and DOM events map to typed callbacks.";
|
|
537
662
|
|
|
538
|
-
export { ADAPTER_COMPONENT_TAG_MAP, type AdapterBaseProps, type AdapterComponentProps, AffordanceScope, type AffordanceScopeProps, Avatar, AvatarGroup, type AvatarGroupProps, type AvatarProps, Badge, type BadgeProps, Button, type ButtonProps, Callout, type CalloutProps, Center, type CenterProps, Checkbox, type CheckboxProps, Chip, type ChipProps, Cluster, type ClusterProps, Combobox, ContextMenu, type ContextMenuProps, Dialog, type DialogProps, Disclosure, type DisclosureProps, FloatingActionButton, type FloatingActionButtonProps, FormField, type FormFieldProps, Grid, type GridProps, IconButton, type IconButtonProps, Inline, type InlineProps, Input, type InputProps, Menu, MenuItem, type MenuItemProps, type MenuProps, Popover, type PopoverProps, Radio, RadioGroup, type RadioGroupProps, type RadioProps, Reel, type ReelProps, SearchResultRow, type SearchResultRowProps, SearchShell, type SearchShellProps, Select, type SelectProps, Separator, type SeparatorProps, Sidebar, type SidebarProps, Stack, type StackProps, Switch, type SwitchProps, Switcher, type SwitcherProps, Tabs, type TabsProps, Textarea, type TextareaProps, ToastRegion, type ToastRegionProps, Tooltip, type TooltipProps, TopBar, type TopBarProps, Tree, TreeItem, type TreeItemProps, type TreeProps, VUE_ADAPTER_NOTE, type VueAdapterEventMap };
|
|
663
|
+
export { ADAPTER_COMPONENT_TAG_MAP, type AdapterBaseProps, type AdapterComponentProps, AffordanceScope, type AffordanceScopeProps, Avatar, AvatarGroup, type AvatarGroupProps, type AvatarProps, Badge, type BadgeProps, Button, type ButtonProps, Callout, type CalloutProps, Center, type CenterProps, Checkbox, type CheckboxProps, Chip, type ChipProps, Cluster, type ClusterProps, Combobox, ContextMenu, type ContextMenuProps, Dialog, type DialogProps, Disclosure, type DisclosureProps, Editable, type EditableProps, FloatingActionButton, type FloatingActionButtonProps, FormField, type FormFieldProps, Grid, type GridProps, IconButton, type IconButtonProps, Inline, type InlineProps, Input, type InputProps, Menu, MenuItem, type MenuItemProps, type MenuProps, MultiCombobox, Popover, type PopoverProps, Radio, RadioGroup, type RadioGroupProps, type RadioProps, Reel, type ReelProps, SearchResultRow, type SearchResultRowProps, SearchShell, type SearchShellProps, Select, type SelectProps, Separator, type SeparatorProps, Sidebar, type SidebarProps, Stack, type StackProps, Switch, type SwitchProps, Switcher, type SwitcherProps, Tabs, type TabsProps, Textarea, type TextareaProps, ToastRegion, type ToastRegionProps, Tooltip, type TooltipProps, TopBar, type TopBarProps, Tree, TreeItem, type TreeItemProps, type TreeProps, VUE_ADAPTER_NOTE, type VueAdapterEventMap };
|
package/vue/index.js
CHANGED
|
@@ -14,6 +14,7 @@ import {
|
|
|
14
14
|
ContextMenu,
|
|
15
15
|
Dialog,
|
|
16
16
|
Disclosure,
|
|
17
|
+
Editable,
|
|
17
18
|
FloatingActionButton,
|
|
18
19
|
FormField,
|
|
19
20
|
Grid,
|
|
@@ -22,6 +23,7 @@ import {
|
|
|
22
23
|
Input,
|
|
23
24
|
Menu,
|
|
24
25
|
MenuItem,
|
|
26
|
+
MultiCombobox,
|
|
25
27
|
Popover,
|
|
26
28
|
Radio,
|
|
27
29
|
RadioGroup,
|
|
@@ -42,7 +44,7 @@ import {
|
|
|
42
44
|
Tree,
|
|
43
45
|
TreeItem,
|
|
44
46
|
VUE_ADAPTER_NOTE
|
|
45
|
-
} from "./chunk-
|
|
47
|
+
} from "./chunk-2DDIBSFD.js";
|
|
46
48
|
export {
|
|
47
49
|
ADAPTER_COMPONENT_TAG_MAP,
|
|
48
50
|
AffordanceScope,
|
|
@@ -59,6 +61,7 @@ export {
|
|
|
59
61
|
ContextMenu,
|
|
60
62
|
Dialog,
|
|
61
63
|
Disclosure,
|
|
64
|
+
Editable,
|
|
62
65
|
FloatingActionButton,
|
|
63
66
|
FormField,
|
|
64
67
|
Grid,
|
|
@@ -67,6 +70,7 @@ export {
|
|
|
67
70
|
Input,
|
|
68
71
|
Menu,
|
|
69
72
|
MenuItem,
|
|
73
|
+
MultiCombobox,
|
|
70
74
|
Popover,
|
|
71
75
|
Radio,
|
|
72
76
|
RadioGroup,
|
|
@@ -1,19 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
var index = require('./index-BHG9Rpil.js');
|
|
4
|
-
|
|
5
|
-
const uiChipCss = () => `:host{--ui-chip-surface:var(--ui-surface-subtle);--ui-chip-text:var(--ui-text-secondary);--ui-chip-border:var(--ui-border-default);--ui-chip-font-size:var(--ui-font-size-xs);--ui-chip-font-weight:var(--ui-font-normal);--ui-chip-line-height:var(--ui-line-height-tight);--ui-chip-padding-block:var(--ui-space-0-5);--ui-chip-padding-inline:var(--ui-space-2);--ui-chip-notch:var(--ui-space-1);display:inline-flex;max-width:100%}.chip__surface{display:inline-flex;align-items:center;max-width:100%;padding:var(--ui-chip-padding-block) var(--ui-chip-padding-inline);border:1px solid var(--ui-chip-border);background:var(--ui-chip-surface);color:var(--ui-chip-text) !important;font-family:var(--ui-font-family-sans) !important;font-size:var(--ui-chip-font-size) !important;font-weight:var(--ui-chip-font-weight) !important;line-height:var(--ui-chip-line-height) !important;white-space:nowrap}:host([data-appearance='pill']) .chip__surface{border-radius:var(--ui-radius-round)}:host([data-appearance='tag']) .chip__surface{border:0;padding-inline-end:calc(var(--ui-chip-padding-inline) + var(--ui-chip-notch));clip-path:polygon(0 0, calc(100% - var(--ui-chip-notch)) 0, 100% 50%, calc(100% - var(--ui-chip-notch)) 100%, 0 100%)}`;
|
|
6
|
-
|
|
7
|
-
const UIChip = class {
|
|
8
|
-
constructor(hostRef) {
|
|
9
|
-
index.registerInstance(this, hostRef);
|
|
10
|
-
}
|
|
11
|
-
/** `tag` has a square leading edge and an angled trailing edge; `pill` is fully rounded. */
|
|
12
|
-
appearance = 'tag';
|
|
13
|
-
render() {
|
|
14
|
-
return (index.h(index.Host, { key: 'fe1246a1e698098f0ca9cb04e749d5adf233e50c', "data-appearance": this.appearance }, index.h("span", { key: 'a17237699b9eb20fb0a084adbd900a3aa9bc12b0', class: "chip__surface" }, index.h("slot", { key: '7f4e5dcc82d360083d4ded2617fa39a9dc1fd3ef' }))));
|
|
15
|
-
}
|
|
16
|
-
};
|
|
17
|
-
UIChip.style = uiChipCss();
|
|
18
|
-
|
|
19
|
-
exports.ui_chip = UIChip;
|