luxen-ui 0.1.0
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/LICENSE +21 -0
- package/README.md +98 -0
- package/dist/css/elements/avatar.css +20 -0
- package/dist/css/elements/badge.css +159 -0
- package/dist/css/elements/button.css +171 -0
- package/dist/css/elements/close-button/circle.css +66 -0
- package/dist/css/elements/close-button/ring.css +71 -0
- package/dist/css/elements/close-button/square.css +70 -0
- package/dist/css/elements/disclosure.css +137 -0
- package/dist/css/elements/divider.css +75 -0
- package/dist/css/elements/input-otp.css +164 -0
- package/dist/css/elements/input-stepper/default.css +245 -0
- package/dist/css/elements/input-stepper/rounded.css +238 -0
- package/dist/css/elements/kbd.css +21 -0
- package/dist/css/elements/progress.css +114 -0
- package/dist/css/elements/select.css +71 -0
- package/dist/css/elements/skeleton.css +89 -0
- package/dist/css/elements/tabs/enclosed.css +148 -0
- package/dist/css/elements/tabs/line.css +138 -0
- package/dist/css/elements/toast.css +260 -0
- package/dist/css/index.css +885 -0
- package/dist/custom-elements.json +14424 -0
- package/dist/define.d.ts +9 -0
- package/dist/define.d.ts.map +1 -0
- package/dist/define.js +16 -0
- package/dist/elements/avatar/avatar.css +128 -0
- package/dist/elements/avatar/avatar.d.ts +21 -0
- package/dist/elements/avatar/avatar.d.ts.map +1 -0
- package/dist/elements/avatar/avatar.js +106 -0
- package/dist/elements/avatar/index.d.ts +8 -0
- package/dist/elements/avatar/index.d.ts.map +1 -0
- package/dist/elements/avatar/index.js +4 -0
- package/dist/elements/badge/badge.d.ts +17 -0
- package/dist/elements/badge/badge.d.ts.map +1 -0
- package/dist/elements/badge/badge.js +34 -0
- package/dist/elements/badge/index.d.ts +8 -0
- package/dist/elements/badge/index.d.ts.map +1 -0
- package/dist/elements/badge/index.js +4 -0
- package/dist/elements/carousel/carousel.css +205 -0
- package/dist/elements/carousel/carousel.d.ts +148 -0
- package/dist/elements/carousel/carousel.d.ts.map +1 -0
- package/dist/elements/carousel/carousel.js +473 -0
- package/dist/elements/carousel/index.d.ts +8 -0
- package/dist/elements/carousel/index.d.ts.map +1 -0
- package/dist/elements/carousel/index.js +4 -0
- package/dist/elements/carousel-item/carousel-item.css +11 -0
- package/dist/elements/carousel-item/carousel-item.d.ts +13 -0
- package/dist/elements/carousel-item/carousel-item.d.ts.map +1 -0
- package/dist/elements/carousel-item/carousel-item.js +20 -0
- package/dist/elements/carousel-item/index.d.ts +8 -0
- package/dist/elements/carousel-item/index.d.ts.map +1 -0
- package/dist/elements/carousel-item/index.js +4 -0
- package/dist/elements/dialog/dialog.css +92 -0
- package/dist/elements/dialog/dialog.d.ts +56 -0
- package/dist/elements/dialog/dialog.d.ts.map +1 -0
- package/dist/elements/dialog/dialog.js +204 -0
- package/dist/elements/dialog/dialog.styles.d.ts +8 -0
- package/dist/elements/dialog/dialog.styles.d.ts.map +1 -0
- package/dist/elements/dialog/dialog.styles.js +8 -0
- package/dist/elements/dialog/index.d.ts +8 -0
- package/dist/elements/dialog/index.d.ts.map +1 -0
- package/dist/elements/dialog/index.js +4 -0
- package/dist/elements/divider/divider.d.ts +23 -0
- package/dist/elements/divider/divider.d.ts.map +1 -0
- package/dist/elements/divider/divider.js +49 -0
- package/dist/elements/divider/index.d.ts +8 -0
- package/dist/elements/divider/index.d.ts.map +1 -0
- package/dist/elements/divider/index.js +4 -0
- package/dist/elements/drawer/drawer.css +66 -0
- package/dist/elements/drawer/drawer.d.ts +34 -0
- package/dist/elements/drawer/drawer.d.ts.map +1 -0
- package/dist/elements/drawer/drawer.js +46 -0
- package/dist/elements/drawer/index.d.ts +8 -0
- package/dist/elements/drawer/index.d.ts.map +1 -0
- package/dist/elements/drawer/index.js +4 -0
- package/dist/elements/dropdown/dropdown.css +31 -0
- package/dist/elements/dropdown/dropdown.d.ts +64 -0
- package/dist/elements/dropdown/dropdown.d.ts.map +1 -0
- package/dist/elements/dropdown/dropdown.js +322 -0
- package/dist/elements/dropdown/index.d.ts +8 -0
- package/dist/elements/dropdown/index.d.ts.map +1 -0
- package/dist/elements/dropdown/index.js +4 -0
- package/dist/elements/dropdown-item/dropdown-item.css +51 -0
- package/dist/elements/dropdown-item/dropdown-item.d.ts +25 -0
- package/dist/elements/dropdown-item/dropdown-item.d.ts.map +1 -0
- package/dist/elements/dropdown-item/dropdown-item.js +110 -0
- package/dist/elements/dropdown-item/index.d.ts +8 -0
- package/dist/elements/dropdown-item/index.d.ts.map +1 -0
- package/dist/elements/dropdown-item/index.js +4 -0
- package/dist/elements/icon/icon.css +10 -0
- package/dist/elements/icon/icon.d.ts +19 -0
- package/dist/elements/icon/icon.d.ts.map +1 -0
- package/dist/elements/icon/icon.js +53 -0
- package/dist/elements/icon/index.d.ts +8 -0
- package/dist/elements/icon/index.d.ts.map +1 -0
- package/dist/elements/icon/index.js +4 -0
- package/dist/elements/input-otp/index.d.ts +8 -0
- package/dist/elements/input-otp/index.d.ts.map +1 -0
- package/dist/elements/input-otp/index.js +4 -0
- package/dist/elements/input-otp/input-otp.d.ts +31 -0
- package/dist/elements/input-otp/input-otp.d.ts.map +1 -0
- package/dist/elements/input-otp/input-otp.js +139 -0
- package/dist/elements/input-stepper/index.d.ts +8 -0
- package/dist/elements/input-stepper/index.d.ts.map +1 -0
- package/dist/elements/input-stepper/index.js +4 -0
- package/dist/elements/input-stepper/input-stepper.d.ts +63 -0
- package/dist/elements/input-stepper/input-stepper.d.ts.map +1 -0
- package/dist/elements/input-stepper/input-stepper.js +249 -0
- package/dist/elements/popover/index.d.ts +8 -0
- package/dist/elements/popover/index.d.ts.map +1 -0
- package/dist/elements/popover/index.js +4 -0
- package/dist/elements/popover/popover.css +61 -0
- package/dist/elements/popover/popover.d.ts +62 -0
- package/dist/elements/popover/popover.d.ts.map +1 -0
- package/dist/elements/popover/popover.js +244 -0
- package/dist/elements/rating/index.d.ts +8 -0
- package/dist/elements/rating/index.d.ts.map +1 -0
- package/dist/elements/rating/index.js +4 -0
- package/dist/elements/rating/rating.css +102 -0
- package/dist/elements/rating/rating.d.ts +38 -0
- package/dist/elements/rating/rating.d.ts.map +1 -0
- package/dist/elements/rating/rating.js +193 -0
- package/dist/elements/skeleton/index.d.ts +8 -0
- package/dist/elements/skeleton/index.d.ts.map +1 -0
- package/dist/elements/skeleton/index.js +4 -0
- package/dist/elements/skeleton/skeleton.d.ts +12 -0
- package/dist/elements/skeleton/skeleton.d.ts.map +1 -0
- package/dist/elements/skeleton/skeleton.js +13 -0
- package/dist/elements/spinner/index.d.ts +8 -0
- package/dist/elements/spinner/index.d.ts.map +1 -0
- package/dist/elements/spinner/index.js +4 -0
- package/dist/elements/spinner/spinner.css +28 -0
- package/dist/elements/spinner/spinner.d.ts +16 -0
- package/dist/elements/spinner/spinner.d.ts.map +1 -0
- package/dist/elements/spinner/spinner.js +37 -0
- package/dist/elements/tabs/index.d.ts +8 -0
- package/dist/elements/tabs/index.d.ts.map +1 -0
- package/dist/elements/tabs/index.js +4 -0
- package/dist/elements/tabs/tabs.d.ts +48 -0
- package/dist/elements/tabs/tabs.d.ts.map +1 -0
- package/dist/elements/tabs/tabs.js +210 -0
- package/dist/elements/toast/index.d.ts +9 -0
- package/dist/elements/toast/index.d.ts.map +1 -0
- package/dist/elements/toast/index.js +5 -0
- package/dist/elements/toast/toast.d.ts +72 -0
- package/dist/elements/toast/toast.d.ts.map +1 -0
- package/dist/elements/toast/toast.js +375 -0
- package/dist/elements/tooltip/index.d.ts +8 -0
- package/dist/elements/tooltip/index.d.ts.map +1 -0
- package/dist/elements/tooltip/index.js +4 -0
- package/dist/elements/tooltip/tooltip.css +37 -0
- package/dist/elements/tooltip/tooltip.d.ts +59 -0
- package/dist/elements/tooltip/tooltip.d.ts.map +1 -0
- package/dist/elements/tooltip/tooltip.js +231 -0
- package/dist/elements/tree/index.d.ts +8 -0
- package/dist/elements/tree/index.d.ts.map +1 -0
- package/dist/elements/tree/index.js +4 -0
- package/dist/elements/tree/tree.css +26 -0
- package/dist/elements/tree/tree.d.ts +76 -0
- package/dist/elements/tree/tree.d.ts.map +1 -0
- package/dist/elements/tree/tree.js +432 -0
- package/dist/elements/tree-item/index.d.ts +8 -0
- package/dist/elements/tree-item/index.d.ts.map +1 -0
- package/dist/elements/tree-item/index.js +4 -0
- package/dist/elements/tree-item/tree-item.css +172 -0
- package/dist/elements/tree-item/tree-item.d.ts +74 -0
- package/dist/elements/tree-item/tree-item.d.ts.map +1 -0
- package/dist/elements/tree-item/tree-item.js +301 -0
- package/dist/index.d.ts +6 -0
- package/dist/index.d.ts.map +1 -0
- package/dist/index.js +4 -0
- package/dist/registry.d.ts +22 -0
- package/dist/registry.d.ts.map +1 -0
- package/dist/registry.js +33 -0
- package/dist/shared/controllers/popover.d.ts +44 -0
- package/dist/shared/controllers/popover.d.ts.map +1 -0
- package/dist/shared/controllers/popover.js +359 -0
- package/dist/shared/luxen-element.d.ts +20 -0
- package/dist/shared/luxen-element.d.ts.map +1 -0
- package/dist/shared/luxen-element.js +23 -0
- package/dist/shared/luxen-form-associated-element.d.ts +49 -0
- package/dist/shared/luxen-form-associated-element.d.ts.map +1 -0
- package/dist/shared/luxen-form-associated-element.js +123 -0
- package/dist/shared/styles/host.css +13 -0
- package/dist/shared/styles/host.styles.d.ts +9 -0
- package/dist/shared/styles/host.styles.d.ts.map +1 -0
- package/dist/shared/styles/host.styles.js +9 -0
- package/dist/skills/luxen-ui/SKILL.md +82 -0
- package/dist/skills/luxen-ui/references/avatar.md +259 -0
- package/dist/skills/luxen-ui/references/badge.md +289 -0
- package/dist/skills/luxen-ui/references/button.md +309 -0
- package/dist/skills/luxen-ui/references/close-button.md +104 -0
- package/dist/skills/luxen-ui/references/dialog.md +435 -0
- package/dist/skills/luxen-ui/references/drawer.md +400 -0
- package/dist/skills/luxen-ui/references/progress.md +133 -0
- package/dist/skills/luxen-ui/references/select.md +100 -0
- package/dist/skills/luxen-ui/references/toast.md +396 -0
- package/dist/skills/luxen-ui/references/tree.md +359 -0
- package/package.json +116 -0
- package/postcss-plugin-prefix.js +63 -0
- package/vite-plugin.ts +29 -0
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"tree-item.d.ts","sourceRoot":"","sources":["../../../src/html/elements/tree-item/tree-item.ts"],"names":[],"mappings":"AAAA,OAAO,EAAmB,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAE3D,OAAO,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAO1D;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,qBAAa,aAAc,SAAQ,YAAY;IAC7C,OAAgB,MAAM,4BAAwB;IAE9C,OAAO,CAAC,UAAU,CAA0B;IAC5C,OAAO,CAAC,cAAc,CAAC,CAAmB;IAE1C,oCAAoC;IAEpC,QAAQ,CAAC,QAAQ,UAAS;IAE1B,oCAAoC;IAEpC,QAAQ,CAAC,QAAQ,UAAS;IAE1B,yEAAyE;IAEzE,QAAQ,CAAC,aAAa,UAAS;IAE/B,oCAAoC;IAEpC,QAAQ,CAAC,QAAQ,UAAS;IAE1B,8EAA8E;IAE9E,QAAQ,CAAC,IAAI,UAAS;IAEtB,+DAA+D;IAE/D,QAAQ,CAAC,OAAO,UAAS;IAEzB,sDAAsD;IACtD,IAAI,YAAY,CAAC,KAAK,EAAE,OAAO,EAG9B;IACD,IAAI,YAAY,IAAI,OAAO,CAE1B;IACD,OAAO,CAAC,aAAa,CAAS;IAE9B,mEAAmE;IACnE,IAAI,KAAK,CAAC,KAAK,EAAE,MAAM,EAGtB;IACD,IAAI,KAAK,IAAI,MAAM,CAElB;IACD,OAAO,CAAC,MAAM,CAAK;IAEnB,uDAAuD;IACvD,IAAI,WAAW,IAAI,OAAO,CAEzB;IACD,OAAO,CAAC,YAAY,CAAS;IAE7B,0EAA0E;IAC1E,gBAAgB,CAAC,EAAE,eAAsB,EAAE;;KAAK,GAAG,aAAa,EAAE;IAOlE,4DAA4D;IAC5D,MAAM,IAAI,OAAO;IAIjB,2CAA2C;IAC3C,YAAY,IAAI,MAAM;IAUb,iBAAiB;IAQjB,oBAAoB;IAKpB,OAAO,CAAC,OAAO,EAAE,cAAc,CAAC,IAAI,CAAC;IAe9C,OAAO,CAAC,SAAS;IAMjB,OAAO,CAAC,aAAa;IAmBrB,+EAA+E;IAC/E,MAAM;IASN,OAAO,CAAC,iBAAiB,CAUvB;IAEO,MAAM;CAwFhB"}
|
|
@@ -0,0 +1,301 @@
|
|
|
1
|
+
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
|
|
2
|
+
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
|
|
3
|
+
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
|
|
4
|
+
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
|
|
5
|
+
return c > 3 && r && Object.defineProperty(target, key, r), r;
|
|
6
|
+
};
|
|
7
|
+
var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (receiver, state, kind, f) {
|
|
8
|
+
if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter");
|
|
9
|
+
if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
|
|
10
|
+
return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
|
|
11
|
+
};
|
|
12
|
+
var __classPrivateFieldSet = (this && this.__classPrivateFieldSet) || function (receiver, state, value, kind, f) {
|
|
13
|
+
if (kind === "m") throw new TypeError("Private method is not writable");
|
|
14
|
+
if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a setter");
|
|
15
|
+
if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot write private member to an object whose class did not declare it");
|
|
16
|
+
return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
|
|
17
|
+
};
|
|
18
|
+
var _LuxenTreeItem_expanded_accessor_storage, _LuxenTreeItem_selected_accessor_storage, _LuxenTreeItem_indeterminate_accessor_storage, _LuxenTreeItem_disabled_accessor_storage, _LuxenTreeItem_lazy_accessor_storage, _LuxenTreeItem_loading_accessor_storage;
|
|
19
|
+
import { html, unsafeCSS } from 'lit';
|
|
20
|
+
import { property } from 'lit/decorators.js';
|
|
21
|
+
import { LuxenElement } from '../../shared/luxen-element';
|
|
22
|
+
import { tagName } from '../../registry';
|
|
23
|
+
import hostStyles from '../../shared/styles/host.styles';
|
|
24
|
+
import rawStyles from './tree-item.css?inline';
|
|
25
|
+
const styles = unsafeCSS(rawStyles);
|
|
26
|
+
/**
|
|
27
|
+
* A node inside `<l-tree>`. Nested `<l-tree-item>` children become sub-nodes.
|
|
28
|
+
*
|
|
29
|
+
* @slot - Label content (kept to a single row).
|
|
30
|
+
* @slot prefix - Leading content before the label (e.g. icon).
|
|
31
|
+
* @slot suffix - Trailing content.
|
|
32
|
+
* @slot expand-icon - Icon shown when the item is collapsed.
|
|
33
|
+
* @slot collapse-icon - Icon shown when the item is expanded.
|
|
34
|
+
* @slot content - Block content that belongs to the item but not to its header row (e.g. comment body, action bar). Hidden when a branch is collapsed.
|
|
35
|
+
*
|
|
36
|
+
* @csspart base - The item row.
|
|
37
|
+
* @csspart expand-button - The chevron toggle area.
|
|
38
|
+
* @csspart checkbox - The native checkbox input.
|
|
39
|
+
* @csspart label - The label container.
|
|
40
|
+
* @csspart branch - Wrapper around the content and children slots; carries the indent guide.
|
|
41
|
+
* @csspart content - The content slot wrapper (block area between the row and the children).
|
|
42
|
+
* @csspart children - The nested items container.
|
|
43
|
+
*
|
|
44
|
+
* @cssproperty [--_depth] - Internal depth index driving indentation. Set by `<l-tree>`.
|
|
45
|
+
*
|
|
46
|
+
* Layout tokens (`--chevron-size`, `--row-height`, `--row-padding-inline`, `--item-gap`) live on `<l-tree>` and cascade down — see its CSS custom properties.
|
|
47
|
+
*
|
|
48
|
+
* @event expand - Fired when the item is expanded.
|
|
49
|
+
* @event collapse - Fired when the item is collapsed.
|
|
50
|
+
* @event lazy-load - Fired when a lazy item is expanded for the first time. Consumers should append children and set `lazy=false`.
|
|
51
|
+
*/
|
|
52
|
+
export class LuxenTreeItem extends LuxenElement {
|
|
53
|
+
constructor() {
|
|
54
|
+
super(...arguments);
|
|
55
|
+
this._internals = this.attachInternals();
|
|
56
|
+
_LuxenTreeItem_expanded_accessor_storage.set(this, false);
|
|
57
|
+
_LuxenTreeItem_selected_accessor_storage.set(this, false);
|
|
58
|
+
_LuxenTreeItem_indeterminate_accessor_storage.set(this, false);
|
|
59
|
+
_LuxenTreeItem_disabled_accessor_storage.set(this, false);
|
|
60
|
+
_LuxenTreeItem_lazy_accessor_storage.set(this, false);
|
|
61
|
+
_LuxenTreeItem_loading_accessor_storage.set(this, false);
|
|
62
|
+
this._showCheckbox = false;
|
|
63
|
+
this._depth = 0;
|
|
64
|
+
this._hasChildren = false;
|
|
65
|
+
this._onCheckboxChange = (event) => {
|
|
66
|
+
event.stopPropagation();
|
|
67
|
+
const input = event.target;
|
|
68
|
+
this.dispatchEvent(new CustomEvent('l-tree-item-toggle', {
|
|
69
|
+
bubbles: true,
|
|
70
|
+
composed: true,
|
|
71
|
+
detail: { item: this, checked: input.checked },
|
|
72
|
+
}));
|
|
73
|
+
};
|
|
74
|
+
}
|
|
75
|
+
/** Whether the item is expanded. */
|
|
76
|
+
get expanded() { return __classPrivateFieldGet(this, _LuxenTreeItem_expanded_accessor_storage, "f"); }
|
|
77
|
+
set expanded(value) { __classPrivateFieldSet(this, _LuxenTreeItem_expanded_accessor_storage, value, "f"); }
|
|
78
|
+
/** Whether the item is selected. */
|
|
79
|
+
get selected() { return __classPrivateFieldGet(this, _LuxenTreeItem_selected_accessor_storage, "f"); }
|
|
80
|
+
set selected(value) { __classPrivateFieldSet(this, _LuxenTreeItem_selected_accessor_storage, value, "f"); }
|
|
81
|
+
/** Whether the checkbox is indeterminate (some descendants selected). */
|
|
82
|
+
get indeterminate() { return __classPrivateFieldGet(this, _LuxenTreeItem_indeterminate_accessor_storage, "f"); }
|
|
83
|
+
set indeterminate(value) { __classPrivateFieldSet(this, _LuxenTreeItem_indeterminate_accessor_storage, value, "f"); }
|
|
84
|
+
/** Whether the item is disabled. */
|
|
85
|
+
get disabled() { return __classPrivateFieldGet(this, _LuxenTreeItem_disabled_accessor_storage, "f"); }
|
|
86
|
+
set disabled(value) { __classPrivateFieldSet(this, _LuxenTreeItem_disabled_accessor_storage, value, "f"); }
|
|
87
|
+
/** Marks this item as having children that will be loaded on first expand. */
|
|
88
|
+
get lazy() { return __classPrivateFieldGet(this, _LuxenTreeItem_lazy_accessor_storage, "f"); }
|
|
89
|
+
set lazy(value) { __classPrivateFieldSet(this, _LuxenTreeItem_lazy_accessor_storage, value, "f"); }
|
|
90
|
+
/** Whether the item is currently loading (shows a spinner). */
|
|
91
|
+
get loading() { return __classPrivateFieldGet(this, _LuxenTreeItem_loading_accessor_storage, "f"); }
|
|
92
|
+
set loading(value) { __classPrivateFieldSet(this, _LuxenTreeItem_loading_accessor_storage, value, "f"); }
|
|
93
|
+
/** Set by `<l-tree>`: whether a checkbox is shown. */
|
|
94
|
+
set showCheckbox(value) {
|
|
95
|
+
this._showCheckbox = value;
|
|
96
|
+
this._setState('checkbox', value);
|
|
97
|
+
}
|
|
98
|
+
get showCheckbox() {
|
|
99
|
+
return this._showCheckbox;
|
|
100
|
+
}
|
|
101
|
+
/** Set by `<l-tree>`: depth of the item in the tree (0 = root). */
|
|
102
|
+
set depth(value) {
|
|
103
|
+
this._depth = value;
|
|
104
|
+
this.style.setProperty('--_depth', String(value));
|
|
105
|
+
}
|
|
106
|
+
get depth() {
|
|
107
|
+
return this._depth;
|
|
108
|
+
}
|
|
109
|
+
/** Whether this item has nested tree-item children. */
|
|
110
|
+
get hasChildren() {
|
|
111
|
+
return this._hasChildren;
|
|
112
|
+
}
|
|
113
|
+
/** Returns the child `<l-tree-item>` elements directly under this one. */
|
|
114
|
+
getChildrenItems({ includeDisabled = true } = {}) {
|
|
115
|
+
const childTag = tagName('tree-item').toUpperCase();
|
|
116
|
+
return Array.from(this.children).filter((el) => el.tagName === childTag && (includeDisabled || !el.disabled));
|
|
117
|
+
}
|
|
118
|
+
/** Returns true if this item has no expandable children. */
|
|
119
|
+
isLeaf() {
|
|
120
|
+
return !this.lazy && this.getChildrenItems().length === 0;
|
|
121
|
+
}
|
|
122
|
+
/** Returns the text label of this item. */
|
|
123
|
+
getTextLabel() {
|
|
124
|
+
const slot = this.shadowRoot?.querySelector('slot:not([name])');
|
|
125
|
+
if (!slot)
|
|
126
|
+
return (this.textContent ?? '').trim();
|
|
127
|
+
return slot
|
|
128
|
+
.assignedNodes({ flatten: true })
|
|
129
|
+
.map((n) => n.textContent ?? '')
|
|
130
|
+
.join('')
|
|
131
|
+
.trim();
|
|
132
|
+
}
|
|
133
|
+
connectedCallback() {
|
|
134
|
+
super.connectedCallback();
|
|
135
|
+
this._internals.role = 'treeitem';
|
|
136
|
+
this._childObserver = new MutationObserver(() => this._syncChildren());
|
|
137
|
+
this._childObserver.observe(this, { childList: true });
|
|
138
|
+
this._syncChildren();
|
|
139
|
+
}
|
|
140
|
+
disconnectedCallback() {
|
|
141
|
+
super.disconnectedCallback();
|
|
142
|
+
this._childObserver?.disconnect();
|
|
143
|
+
}
|
|
144
|
+
updated(changed) {
|
|
145
|
+
if (changed.has('expanded')) {
|
|
146
|
+
this._internals.ariaExpanded = this.isLeaf() ? null : String(this.expanded);
|
|
147
|
+
this.emit(this.expanded ? 'expand' : 'collapse');
|
|
148
|
+
}
|
|
149
|
+
if (changed.has('selected')) {
|
|
150
|
+
this._internals.ariaSelected = String(this.selected);
|
|
151
|
+
}
|
|
152
|
+
if (changed.has('disabled')) {
|
|
153
|
+
this._internals.ariaDisabled = this.disabled ? 'true' : null;
|
|
154
|
+
}
|
|
155
|
+
}
|
|
156
|
+
_setState(name, on) {
|
|
157
|
+
if (!this._internals.states)
|
|
158
|
+
return;
|
|
159
|
+
if (on)
|
|
160
|
+
this._internals.states.add(name);
|
|
161
|
+
else
|
|
162
|
+
this._internals.states.delete(name);
|
|
163
|
+
}
|
|
164
|
+
_syncChildren() {
|
|
165
|
+
// Auto-slot nested tree-items into the `children` slot so they render in the group container,
|
|
166
|
+
// while label text/elements remain in the default slot.
|
|
167
|
+
const childTag = tagName('tree-item').toUpperCase();
|
|
168
|
+
let count = 0;
|
|
169
|
+
for (const child of Array.from(this.children)) {
|
|
170
|
+
if (child.tagName === childTag) {
|
|
171
|
+
count++;
|
|
172
|
+
if (child.slot !== 'children')
|
|
173
|
+
child.slot = 'children';
|
|
174
|
+
}
|
|
175
|
+
}
|
|
176
|
+
this._hasChildren = count > 0;
|
|
177
|
+
this._setState('has-children', this._hasChildren);
|
|
178
|
+
if (!this._hasChildren && !this.lazy && this.expanded) {
|
|
179
|
+
this.expanded = false;
|
|
180
|
+
}
|
|
181
|
+
this._internals.ariaExpanded = this.isLeaf() ? null : String(this.expanded);
|
|
182
|
+
}
|
|
183
|
+
/** Toggle expand state. Emits `lazy-load` the first time a lazy item opens. */
|
|
184
|
+
toggle() {
|
|
185
|
+
if (this.isLeaf() && !this.lazy)
|
|
186
|
+
return;
|
|
187
|
+
const next = !this.expanded;
|
|
188
|
+
if (next && this.lazy) {
|
|
189
|
+
this.emit('lazy-load');
|
|
190
|
+
}
|
|
191
|
+
this.expanded = next;
|
|
192
|
+
}
|
|
193
|
+
render() {
|
|
194
|
+
return html `
|
|
195
|
+
<div
|
|
196
|
+
class="item"
|
|
197
|
+
part="base"
|
|
198
|
+
>
|
|
199
|
+
<span
|
|
200
|
+
class="expand"
|
|
201
|
+
part="expand-button"
|
|
202
|
+
aria-hidden="true"
|
|
203
|
+
>
|
|
204
|
+
${this.loading
|
|
205
|
+
? html `<span
|
|
206
|
+
class="spinner"
|
|
207
|
+
role="status"
|
|
208
|
+
></span>`
|
|
209
|
+
: this.expanded || this.isLeaf()
|
|
210
|
+
? html `<slot name="collapse-icon">
|
|
211
|
+
<svg
|
|
212
|
+
viewBox="0 0 16 16"
|
|
213
|
+
fill="none"
|
|
214
|
+
>
|
|
215
|
+
<path
|
|
216
|
+
d="M3.5 6l4.5 5 4.5-5"
|
|
217
|
+
stroke="currentColor"
|
|
218
|
+
stroke-width="1.5"
|
|
219
|
+
stroke-linecap="round"
|
|
220
|
+
stroke-linejoin="round"
|
|
221
|
+
/>
|
|
222
|
+
</svg>
|
|
223
|
+
</slot>`
|
|
224
|
+
: html `<slot name="expand-icon">
|
|
225
|
+
<svg
|
|
226
|
+
viewBox="0 0 16 16"
|
|
227
|
+
fill="none"
|
|
228
|
+
>
|
|
229
|
+
<path
|
|
230
|
+
d="M6 3.5l5 4.5-5 4.5"
|
|
231
|
+
stroke="currentColor"
|
|
232
|
+
stroke-width="1.5"
|
|
233
|
+
stroke-linecap="round"
|
|
234
|
+
stroke-linejoin="round"
|
|
235
|
+
/>
|
|
236
|
+
</svg>
|
|
237
|
+
</slot>`}
|
|
238
|
+
</span>
|
|
239
|
+
|
|
240
|
+
<input
|
|
241
|
+
class="checkbox"
|
|
242
|
+
part="checkbox"
|
|
243
|
+
type="checkbox"
|
|
244
|
+
tabindex="-1"
|
|
245
|
+
.checked=${this.selected}
|
|
246
|
+
.indeterminate=${this.indeterminate}
|
|
247
|
+
?disabled=${this.disabled}
|
|
248
|
+
@click=${(e) => e.stopPropagation()}
|
|
249
|
+
@change=${this._onCheckboxChange}
|
|
250
|
+
/>
|
|
251
|
+
|
|
252
|
+
<slot name="prefix"></slot>
|
|
253
|
+
<span
|
|
254
|
+
class="label"
|
|
255
|
+
part="label"
|
|
256
|
+
><slot></slot
|
|
257
|
+
></span>
|
|
258
|
+
<slot name="suffix"></slot>
|
|
259
|
+
</div>
|
|
260
|
+
|
|
261
|
+
<div
|
|
262
|
+
class="branch"
|
|
263
|
+
part="branch"
|
|
264
|
+
>
|
|
265
|
+
<div
|
|
266
|
+
class="content"
|
|
267
|
+
part="content"
|
|
268
|
+
>
|
|
269
|
+
<slot name="content"></slot>
|
|
270
|
+
</div>
|
|
271
|
+
<div
|
|
272
|
+
class="children"
|
|
273
|
+
part="children"
|
|
274
|
+
role="group"
|
|
275
|
+
>
|
|
276
|
+
<slot name="children"></slot>
|
|
277
|
+
</div>
|
|
278
|
+
</div>
|
|
279
|
+
`;
|
|
280
|
+
}
|
|
281
|
+
}
|
|
282
|
+
_LuxenTreeItem_expanded_accessor_storage = new WeakMap(), _LuxenTreeItem_selected_accessor_storage = new WeakMap(), _LuxenTreeItem_indeterminate_accessor_storage = new WeakMap(), _LuxenTreeItem_disabled_accessor_storage = new WeakMap(), _LuxenTreeItem_lazy_accessor_storage = new WeakMap(), _LuxenTreeItem_loading_accessor_storage = new WeakMap();
|
|
283
|
+
LuxenTreeItem.styles = [hostStyles, styles];
|
|
284
|
+
__decorate([
|
|
285
|
+
property({ type: Boolean, reflect: true })
|
|
286
|
+
], LuxenTreeItem.prototype, "expanded", null);
|
|
287
|
+
__decorate([
|
|
288
|
+
property({ type: Boolean, reflect: true })
|
|
289
|
+
], LuxenTreeItem.prototype, "selected", null);
|
|
290
|
+
__decorate([
|
|
291
|
+
property({ type: Boolean, reflect: true })
|
|
292
|
+
], LuxenTreeItem.prototype, "indeterminate", null);
|
|
293
|
+
__decorate([
|
|
294
|
+
property({ type: Boolean, reflect: true })
|
|
295
|
+
], LuxenTreeItem.prototype, "disabled", null);
|
|
296
|
+
__decorate([
|
|
297
|
+
property({ type: Boolean, reflect: true })
|
|
298
|
+
], LuxenTreeItem.prototype, "lazy", null);
|
|
299
|
+
__decorate([
|
|
300
|
+
property({ type: Boolean, reflect: true })
|
|
301
|
+
], LuxenTreeItem.prototype, "loading", null);
|
package/dist/index.d.ts
ADDED
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
export { LuxenElement } from './shared/luxen-element';
|
|
2
|
+
export { LuxenFormAssociatedElement } from './shared/luxen-form-associated-element';
|
|
3
|
+
export { define } from './define';
|
|
4
|
+
export { setPrefix, getPrefix, tagName, cls } from './registry';
|
|
5
|
+
export type { ElementBaseName } from './registry';
|
|
6
|
+
//# sourceMappingURL=index.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/html/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,wBAAwB,CAAC;AACtD,OAAO,EAAE,0BAA0B,EAAE,MAAM,wCAAwC,CAAC;AACpF,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,OAAO,EAAE,GAAG,EAAE,MAAM,YAAY,CAAC;AAChE,YAAY,EAAE,eAAe,EAAE,MAAM,YAAY,CAAC"}
|
package/dist/index.js
ADDED
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
/** Every component base name the library ships. */
|
|
2
|
+
export type ElementBaseName = 'avatar' | 'badge' | 'carousel' | 'carousel-item' | 'dialog' | 'divider' | 'drawer' | 'dropdown' | 'dropdown-item' | 'icon' | 'input-otp' | 'input-stepper' | 'popover' | 'skeleton' | 'spinner' | 'rating' | 'tabs' | 'toast' | 'toast-item' | 'tooltip' | 'tree' | 'tree-item';
|
|
3
|
+
/** Set the global prefix. Must be called before defining elements. */
|
|
4
|
+
export declare function setPrefix(prefix: {
|
|
5
|
+
element: string;
|
|
6
|
+
css: string;
|
|
7
|
+
}): void;
|
|
8
|
+
/** Get the current prefixes. */
|
|
9
|
+
export declare function getPrefix(): {
|
|
10
|
+
element: string;
|
|
11
|
+
css: string;
|
|
12
|
+
};
|
|
13
|
+
/** Derive the full tag name from element prefix + base name. */
|
|
14
|
+
export declare function tagName(baseName: ElementBaseName): string;
|
|
15
|
+
/** Prefix a CSS class name. `cls('toast-icon')` → `'l-toast-icon'` */
|
|
16
|
+
export declare function cls(name: string): string;
|
|
17
|
+
export declare function uniqueId(base: string): string;
|
|
18
|
+
/** Check if a base name is already registered. */
|
|
19
|
+
export declare function isRegistered(baseName: ElementBaseName): boolean;
|
|
20
|
+
/** Mark a base name as registered. Called internally by define(). */
|
|
21
|
+
export declare function markRegistered(baseName: ElementBaseName): void;
|
|
22
|
+
//# sourceMappingURL=registry.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"registry.d.ts","sourceRoot":"","sources":["../src/html/registry.ts"],"names":[],"mappings":"AAAA,mDAAmD;AACnD,MAAM,MAAM,eAAe,GACvB,QAAQ,GACR,OAAO,GACP,UAAU,GACV,eAAe,GACf,QAAQ,GACR,SAAS,GACT,QAAQ,GACR,UAAU,GACV,eAAe,GACf,MAAM,GACN,WAAW,GACX,eAAe,GACf,SAAS,GACT,UAAU,GACV,SAAS,GACT,QAAQ,GACR,MAAM,GACN,OAAO,GACP,YAAY,GACZ,SAAS,GACT,MAAM,GACN,WAAW,CAAC;AAMhB,sEAAsE;AACtE,wBAAgB,SAAS,CAAC,MAAM,EAAE;IAAE,OAAO,EAAE,MAAM,CAAC;IAAC,GAAG,EAAE,MAAM,CAAA;CAAE,GAAG,IAAI,CAGxE;AAED,gCAAgC;AAChC,wBAAgB,SAAS,IAAI;IAAE,OAAO,EAAE,MAAM,CAAC;IAAC,GAAG,EAAE,MAAM,CAAA;CAAE,CAE5D;AAED,gEAAgE;AAChE,wBAAgB,OAAO,CAAC,QAAQ,EAAE,eAAe,GAAG,MAAM,CAEzD;AAED,sEAAsE;AACtE,wBAAgB,GAAG,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM,CAExC;AAID,wBAAgB,QAAQ,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM,CAE7C;AAED,kDAAkD;AAClD,wBAAgB,YAAY,CAAC,QAAQ,EAAE,eAAe,GAAG,OAAO,CAE/D;AAED,qEAAqE;AACrE,wBAAgB,cAAc,CAAC,QAAQ,EAAE,eAAe,GAAG,IAAI,CAE9D"}
|
package/dist/registry.js
ADDED
|
@@ -0,0 +1,33 @@
|
|
|
1
|
+
let _elementPrefix = 'l';
|
|
2
|
+
let _cssPrefix = 'l';
|
|
3
|
+
const _registered = new Set();
|
|
4
|
+
/** Set the global prefix. Must be called before defining elements. */
|
|
5
|
+
export function setPrefix(prefix) {
|
|
6
|
+
_elementPrefix = prefix.element;
|
|
7
|
+
_cssPrefix = prefix.css;
|
|
8
|
+
}
|
|
9
|
+
/** Get the current prefixes. */
|
|
10
|
+
export function getPrefix() {
|
|
11
|
+
return { element: _elementPrefix, css: _cssPrefix };
|
|
12
|
+
}
|
|
13
|
+
/** Derive the full tag name from element prefix + base name. */
|
|
14
|
+
export function tagName(baseName) {
|
|
15
|
+
return `${_elementPrefix}-${baseName}`;
|
|
16
|
+
}
|
|
17
|
+
/** Prefix a CSS class name. `cls('toast-icon')` → `'l-toast-icon'` */
|
|
18
|
+
export function cls(name) {
|
|
19
|
+
return `${_cssPrefix}-${name}`;
|
|
20
|
+
}
|
|
21
|
+
/** Generate a globally unique prefixed ID. `uniqueId('toast')` → `'l:toast:1'` */
|
|
22
|
+
let _uid = 0;
|
|
23
|
+
export function uniqueId(base) {
|
|
24
|
+
return `${_cssPrefix}:${base}:${++_uid}`;
|
|
25
|
+
}
|
|
26
|
+
/** Check if a base name is already registered. */
|
|
27
|
+
export function isRegistered(baseName) {
|
|
28
|
+
return _registered.has(baseName);
|
|
29
|
+
}
|
|
30
|
+
/** Mark a base name as registered. Called internally by define(). */
|
|
31
|
+
export function markRegistered(baseName) {
|
|
32
|
+
_registered.add(baseName);
|
|
33
|
+
}
|
|
@@ -0,0 +1,44 @@
|
|
|
1
|
+
import type { ReactiveController, ReactiveControllerHost } from 'lit';
|
|
2
|
+
import { type Placement } from '@floating-ui/dom';
|
|
3
|
+
export interface PopoverControllerConfig {
|
|
4
|
+
getTriggerElement: () => HTMLElement | null;
|
|
5
|
+
getFloatingElement: () => HTMLElement | null;
|
|
6
|
+
getArrowElement: () => HTMLElement | null;
|
|
7
|
+
onPlacementChange?: (placement: string) => void;
|
|
8
|
+
}
|
|
9
|
+
export interface PositionOptions {
|
|
10
|
+
placement: Placement;
|
|
11
|
+
distance: number;
|
|
12
|
+
}
|
|
13
|
+
type TriggerHandlers = {
|
|
14
|
+
onPointerEnter?: (e: PointerEvent) => void;
|
|
15
|
+
onPointerLeave?: (e: PointerEvent) => void;
|
|
16
|
+
onFocusIn?: (e: FocusEvent) => void;
|
|
17
|
+
onFocusOut?: (e: FocusEvent) => void;
|
|
18
|
+
onClick?: (e: MouseEvent) => void;
|
|
19
|
+
onKeyDown?: (e: KeyboardEvent) => void;
|
|
20
|
+
};
|
|
21
|
+
export declare class PopoverController implements ReactiveController {
|
|
22
|
+
private _host;
|
|
23
|
+
private _config;
|
|
24
|
+
private _cleanupAutoUpdate?;
|
|
25
|
+
private _cleanupSafePolygon?;
|
|
26
|
+
private _handlers?;
|
|
27
|
+
private _triggerElement?;
|
|
28
|
+
private _currentPlacement;
|
|
29
|
+
constructor(host: ReactiveControllerHost & HTMLElement, config: PopoverControllerConfig);
|
|
30
|
+
hostConnected(): void;
|
|
31
|
+
hostDisconnected(): void;
|
|
32
|
+
get currentPlacement(): string;
|
|
33
|
+
updatePosition(options: PositionOptions): Promise<void>;
|
|
34
|
+
startPositioning(options: PositionOptions): void;
|
|
35
|
+
stopPositioning(): void;
|
|
36
|
+
handlePointerLeave(e: PointerEvent, onHide: () => void): void;
|
|
37
|
+
cleanupSafePolygon(): void;
|
|
38
|
+
addTriggerListeners(handlers: TriggerHandlers): void;
|
|
39
|
+
removeTriggerListeners(triggerOverride?: HTMLElement | null): void;
|
|
40
|
+
animateShow(el: HTMLElement, duration: number, keyframes?: Keyframe[]): Promise<void>;
|
|
41
|
+
animateHide(el: HTMLElement, duration: number, keyframes?: Keyframe[]): Promise<void>;
|
|
42
|
+
}
|
|
43
|
+
export {};
|
|
44
|
+
//# sourceMappingURL=popover.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"popover.d.ts","sourceRoot":"","sources":["../../../src/html/shared/controllers/popover.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,kBAAkB,EAAE,sBAAsB,EAAE,MAAM,KAAK,CAAC;AACtE,OAAO,EAOL,KAAK,SAAS,EACf,MAAM,kBAAkB,CAAC;AAoN1B,MAAM,WAAW,uBAAuB;IACtC,iBAAiB,EAAE,MAAM,WAAW,GAAG,IAAI,CAAC;IAC5C,kBAAkB,EAAE,MAAM,WAAW,GAAG,IAAI,CAAC;IAC7C,eAAe,EAAE,MAAM,WAAW,GAAG,IAAI,CAAC;IAC1C,iBAAiB,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;CACjD;AAED,MAAM,WAAW,eAAe;IAC9B,SAAS,EAAE,SAAS,CAAC;IACrB,QAAQ,EAAE,MAAM,CAAC;CAClB;AAED,KAAK,eAAe,GAAG;IACrB,cAAc,CAAC,EAAE,CAAC,CAAC,EAAE,YAAY,KAAK,IAAI,CAAC;IAC3C,cAAc,CAAC,EAAE,CAAC,CAAC,EAAE,YAAY,KAAK,IAAI,CAAC;IAC3C,SAAS,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,KAAK,IAAI,CAAC;IACpC,UAAU,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,KAAK,IAAI,CAAC;IACrC,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,KAAK,IAAI,CAAC;IAClC,SAAS,CAAC,EAAE,CAAC,CAAC,EAAE,aAAa,KAAK,IAAI,CAAC;CACxC,CAAC;AAEF,qBAAa,iBAAkB,YAAW,kBAAkB;IAC1D,OAAO,CAAC,KAAK,CAAuC;IACpD,OAAO,CAAC,OAAO,CAA0B;IACzC,OAAO,CAAC,kBAAkB,CAAC,CAAa;IACxC,OAAO,CAAC,mBAAmB,CAAC,CAAa;IACzC,OAAO,CAAC,SAAS,CAAC,CAAkB;IACpC,OAAO,CAAC,eAAe,CAAC,CAAqB;IAC7C,OAAO,CAAC,iBAAiB,CAAM;gBAEnB,IAAI,EAAE,sBAAsB,GAAG,WAAW,EAAE,MAAM,EAAE,uBAAuB;IAMvF,aAAa;IAEb,gBAAgB;IAMhB,IAAI,gBAAgB,WAEnB;IAIK,cAAc,CAAC,OAAO,EAAE,eAAe;IAyC7C,gBAAgB,CAAC,OAAO,EAAE,eAAe;IASzC,eAAe;IAOf,kBAAkB,CAAC,CAAC,EAAE,YAAY,EAAE,MAAM,EAAE,MAAM,IAAI;IAiDtD,kBAAkB;IAOlB,mBAAmB,CAAC,QAAQ,EAAE,eAAe;IAoB7C,sBAAsB,CAAC,eAAe,CAAC,EAAE,WAAW,GAAG,IAAI;IAyBrD,WAAW,CAAC,EAAE,EAAE,WAAW,EAAE,QAAQ,EAAE,MAAM,EAAE,SAAS,CAAC,EAAE,QAAQ,EAAE;IAYrE,WAAW,CAAC,EAAE,EAAE,WAAW,EAAE,QAAQ,EAAE,MAAM,EAAE,SAAS,CAAC,EAAE,QAAQ,EAAE;CAW5E"}
|