wj-elements 0.3.0-alpha.2 → 0.3.0-alpha.3
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.
|
@@ -98,6 +98,13 @@ export default class TreeItem extends HTMLElement {
|
|
|
98
98
|
* @returns {void} No return value.
|
|
99
99
|
*/
|
|
100
100
|
beforeDraw(): void;
|
|
101
|
+
/**
|
|
102
|
+
* Synchronizes the nesting-related state on the host element.
|
|
103
|
+
* Sets the "slot" to children for nested items and updates
|
|
104
|
+
* the nesting depth used to compute visual indentation.
|
|
105
|
+
* @returns {void}
|
|
106
|
+
*/
|
|
107
|
+
syncNestingState(): void;
|
|
101
108
|
/**
|
|
102
109
|
* Creates and returns a document fragment representing the structure of a tree item component.
|
|
103
110
|
* The method constructs the DOM elements including the native container, indentation, toggle button,
|
|
@@ -125,6 +132,12 @@ export default class TreeItem extends HTMLElement {
|
|
|
125
132
|
* @returns {boolean} Returns true if the current item is a nested tree item; otherwise, false.
|
|
126
133
|
*/
|
|
127
134
|
isNestedItem(): boolean;
|
|
135
|
+
/**
|
|
136
|
+
* Calculates nesting depth based on ancestor tree items.
|
|
137
|
+
* Root items have depth 0, direct children depth 1, etc.
|
|
138
|
+
* @returns {number}
|
|
139
|
+
*/
|
|
140
|
+
getNestingDepth(): number;
|
|
128
141
|
/**
|
|
129
142
|
* Checks whether the given node is a tree item.
|
|
130
143
|
* @param {object} node The node to check.
|
package/dist/wje-tree-item.js
CHANGED
|
@@ -2,7 +2,7 @@ var __defProp = Object.defineProperty;
|
|
|
2
2
|
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
3
3
|
var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
|
|
4
4
|
import WJElement from "./wje-element.js";
|
|
5
|
-
const styles = "/*\n[ WJ Tree Item ]\n*/\n\n:host {\n .native-tree-item {\n position: relative;\n display: flex;\n align-items: stretch;\n flex-direction: column;\n &.multiple {\n .item {\n border-radius: 0 !important;\n }\n }\n .item {\n display: flex;\n align-items: center;\n padding-inline: var(--wje-tree-item-padding-inline);\n padding-block: var(--wje-tree-item-padding-block);\n border-radius: var(--wje-tree-item-border-radius);\n background-color: var(--wje-tree-item-background);\n color: var(--wje-tree-item-color);\n\n &:hover {\n background-color: var(--wje-tree-item-background-hover);\n color: var(--wje-tree-item-color-hover);\n }\n\n .indent {\n display: block;\n width:
|
|
5
|
+
const styles = "/*\n[ WJ Tree Item ]\n*/\n\n:host {\n .native-tree-item {\n position: relative;\n display: flex;\n align-items: stretch;\n flex-direction: column;\n &.multiple {\n .item {\n border-radius: 0 !important;\n }\n }\n .item {\n display: flex;\n align-items: center;\n padding-inline: var(--wje-tree-item-padding-inline);\n padding-block: var(--wje-tree-item-padding-block);\n border-radius: var(--wje-tree-item-border-radius);\n background-color: var(--wje-tree-item-background);\n color: var(--wje-tree-item-color);\n\n &:hover {\n background-color: var(--wje-tree-item-background-hover);\n color: var(--wje-tree-item-color-hover);\n }\n\n .indent {\n display: block;\n width: calc(var(--wje-tree-item-indent, var(--wje-spacing-medium)) * var(--wje-tree-item-depth, 0));\n flex-shrink: 0;\n }\n\n .toggle {\n font-size: var(--wje-tree-item-font-size);\n display: flex;\n align-items: center;\n justify-content: center;\n box-sizing: content-box;\n width: var(--wje-tree-item-indent);\n height: var(--wje-tree-item-indent);\n flex-shrink: 0;\n }\n\n wje-checkbox {\n font-size: var(--wje-tree-item-font-size);\n margin: 0;\n }\n\n .content {\n font-size: var(--wje-tree-item-font-size);\n }\n\n slot {\n display: flex;\n align-items: center;\n }\n\n slot:not([name])::slotted(wje-icon) {\n margin-right: var(--wje-spacing-2x-small);\n }\n\n slot[name='end'] {\n margin-inline-start: auto;\n }\n }\n .children {\n display: none;\n &.open {\n font-size: var(--wje-tree-item-font-size);\n display: block;\n\n ::before {\n content: '';\n position: absolute;\n top: var(--wje-tree-item-indent);\n bottom: 5px;\n left: calc(\n (var(--wje-tree-item-indent, var(--wje-spacing-medium)) * var(--wje-tree-item-depth, 0)) +\n 1em -\n (var(--wje-spacing-3x-small) * 2) -\n (var(--wje-tree-item-indent-guid-width) / 2)\n );\n border-inline-end: var(--wje-tree-item-indent-guid-width) solid var(--wje-border-color);\n z-index: 1;\n }\n }\n }\n }\n\n .native-tree-item.expanded .item slot[name='expand'],\n .native-tree-item:not(.expanded) slot[name='collapse'] {\n display: none;\n }\n}\n\n:host([selected]) {\n .item {\n background-color: var(--wje-tree-item-background-selected);\n color: var(--wje-tree-item-color-selected);\n }\n}\n:host([slot-hover-visible]) {\n .item {\n &:hover {\n slot[name='start'], slot[name='end'] {\n visibility: visible;\n }\n }\n slot[name='start'], slot[name='end'] {\n visibility: hidden;\n }\n }\n}\n";
|
|
6
6
|
class TreeItem extends WJElement {
|
|
7
7
|
/**
|
|
8
8
|
* Creates an instance of Toast.
|
|
@@ -107,7 +107,7 @@ class TreeItem extends WJElement {
|
|
|
107
107
|
connectedCallback() {
|
|
108
108
|
var _a;
|
|
109
109
|
(_a = super.connectedCallback) == null ? void 0 : _a.call(this);
|
|
110
|
-
|
|
110
|
+
this.syncNestingState();
|
|
111
111
|
}
|
|
112
112
|
/**
|
|
113
113
|
* Returns the list of attributes to observe for changes.
|
|
@@ -151,10 +151,25 @@ class TreeItem extends WJElement {
|
|
|
151
151
|
*/
|
|
152
152
|
beforeDraw() {
|
|
153
153
|
var _a;
|
|
154
|
-
|
|
154
|
+
this.syncNestingState();
|
|
155
155
|
if ((_a = this.closest("wje-tree")) == null ? void 0 : _a.hasAttribute("slot-hover-visible"))
|
|
156
156
|
this.setAttribute("slot-hover-visible", "");
|
|
157
157
|
}
|
|
158
|
+
/**
|
|
159
|
+
* Synchronizes the nesting-related state on the host element.
|
|
160
|
+
* Sets the "slot" to children for nested items and updates
|
|
161
|
+
* the nesting depth used to compute visual indentation.
|
|
162
|
+
* @returns {void}
|
|
163
|
+
*/
|
|
164
|
+
syncNestingState() {
|
|
165
|
+
const depth = this.getNestingDepth();
|
|
166
|
+
this.style.setProperty("--wje-tree-item-depth", String(depth));
|
|
167
|
+
if (depth > 0) {
|
|
168
|
+
this.slot = "children";
|
|
169
|
+
} else if (this.getAttribute("slot") === "children") {
|
|
170
|
+
this.removeAttribute("slot");
|
|
171
|
+
}
|
|
172
|
+
}
|
|
158
173
|
/**
|
|
159
174
|
* Creates and returns a document fragment representing the structure of a tree item component.
|
|
160
175
|
* The method constructs the DOM elements including the native container, indentation, toggle button,
|
|
@@ -248,6 +263,20 @@ class TreeItem extends WJElement {
|
|
|
248
263
|
const parent = this.parentElement;
|
|
249
264
|
return !!parent && this.isTreeItem(parent);
|
|
250
265
|
}
|
|
266
|
+
/**
|
|
267
|
+
* Calculates nesting depth based on ancestor tree items.
|
|
268
|
+
* Root items have depth 0, direct children depth 1, etc.
|
|
269
|
+
* @returns {number}
|
|
270
|
+
*/
|
|
271
|
+
getNestingDepth() {
|
|
272
|
+
let depth = 0;
|
|
273
|
+
let current = this.parentElement;
|
|
274
|
+
while (current) {
|
|
275
|
+
if (this.isTreeItem(current)) depth += 1;
|
|
276
|
+
current = current.parentElement;
|
|
277
|
+
}
|
|
278
|
+
return depth;
|
|
279
|
+
}
|
|
251
280
|
/**
|
|
252
281
|
* Checks whether the given node is a tree item.
|
|
253
282
|
* @param {object} node The node to check.
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"wje-tree-item.js","sources":["../packages/wje-tree-item/tree-item.element.js","../packages/wje-tree-item/tree-item.js"],"sourcesContent":["import { default as WJElement, WjElementUtils, event } from '../wje-element/element.js';\nimport styles from './styles/styles.css?inline';\n\n/**\n * `wje-tree-item` is a custom web component used as a child of the `wje-tree`.\n * It represents a node within a tree structure, capable of nesting other items.\n * @summary Represents a single item in a tree structure.\n * @documentation https://elements.webjet.sk/components/tree-item\n * @status stable\n * @augments {HTMLElement}\n * @slot - Default slot for rendering the tree item's content (e.g., text or custom elements).\n * @csspart native - The native container of the tree item.\n * @cssproperty [--wje-tree-item-indent=var(--wje-spacing-large)] - Defines the indentation for nested tree items.\n * @cssproperty [--wje-tree-item-indent-guid-width=0px] - Specifies the width of the guide element shown next to a tree item.\n * @cssproperty [--wje-tree-item-border-radius=var(--wje-border-radius-medium)] - Sets the border radius of the tree item’s container.\n * @tag wje-tree-item\n */\n\nexport default class TreeItem extends WJElement {\n /**\n * Creates an instance of Toast.\n */\n constructor() {\n super();\n\n this._selection = 'single';\n }\n\n /**\n * Sets the expanded state of the element. When set to a truthy value,\n * the 'expanded' attribute will be added to the element. When set to a falsy\n * value, the 'expanded' attribute will be removed.\n * @param {boolean} value A boolean value indicating whether the\n * element should be expanded (true) or collapsed (false).\n */\n set expanded(value) {\n if (value) {\n this.setAttribute('expanded', '');\n } else {\n this.removeAttribute('expanded');\n }\n }\n\n /**\n * Retrieves the value of the 'expanded' state for the current element.\n * This getter checks whether the 'expanded' attribute is present on the element.\n * If the attribute exists, it returns true, representing that the element is expanded.\n * Otherwise, it returns false, indicating that the element is not expanded.\n * @returns {boolean} True if the 'expanded' attribute is present, false otherwise.\n */\n get expanded() {\n return this.hasAttribute('expanded');\n }\n\n /**\n * Sets the 'selected' attribute of the element. Removes the attribute if the provided value is falsy; otherwise, sets it.\n * @param {boolean} value The value indicating whether the element should have the 'selected' attribute.\n */\n set selected(value) {\n this.removeAttribute('selected');\n\n if (value) this.setAttribute('selected', '');\n }\n\n /**\n * Getter method for determining if the 'selected' attribute is present on the element.\n * @returns {boolean} Returns true if the 'selected' attribute is present, otherwise false.\n */\n get selected() {\n return this.hasAttribute('selected');\n }\n\n /**\n * Sets the selection mode for the component.\n * @param {string} value The selection mode to apply. Defaults to 'single'\n * if no value is provided. Possible options may be\n * specific to the implementation of the component\n * (e.g., 'single', 'multiple').\n */\n set selection(value) {\n this._selection = value || 'single';\n }\n\n /**\n * Retrieves the current selection.\n * @returns {*} The value of the current selection.\n */\n get selection() {\n return this._selection;\n }\n\n /**\n * Sets or removes the 'indeterminate' attribute based on the provided value.\n * This can be used to visually indicate an indeterminate state for elements like checkboxes.\n * @param {boolean} value A boolean indicating whether to set the element to an indeterminate state.\n * If true, the 'indeterminate' attribute is added to the element; if false, the attribute is removed.\n */\n set indeterminate(value) {\n this.removeAttribute('indeterminate');\n\n if (value) this.setAttribute('indeterminate', '');\n }\n\n /**\n * Retrieves the state of the indeterminate attribute.\n * @returns {boolean} True if the indeterminate attribute is present, otherwise false.\n */\n get indeterminate() {\n return this.hasAttribute('indeterminate');\n }\n\n /**\n * The class name for the component.\n * @type {string}\n */\n className = 'TreeItem';\n\n /**\n * Returns the CSS stylesheet for the component.\n * @static\n * @returns {CSSStyleSheet} The CSS stylesheet\n */\n static get cssStyleSheet() {\n return styles;\n }\n\n /**\n * Setup attributes for the Button element.\n */\n setupAttributes() {\n this.isShadowRoot = 'open';\n this.syncAria();\n }\n\n connectedCallback() {\n super.connectedCallback?.();\n if (this.isNestedItem()) this.slot = 'children';\n }\n\n /**\n * Returns the list of attributes to observe for changes.\n * @static\n * @returns {Array<string>}\n */\n static get observedAttributes() {\n return ['selected', 'indeterminate'];\n }\n\n /**\n * Handles updates when observed attributes of the element are changed.\n * Updates the checkbox state based on changes to the \"selected\" or \"indeterminate\" attributes.\n * @param {string} name The name of the attribute that was changed.\n * @param {string|null} oldValue The previous value of the attribute before the change.\n * @param {string|null} newValue The new value of the attribute after the change.\n * @returns {void}\n */\n attributeChangedCallback(name, oldValue, newValue) {\n if (!this.checkbox) {\n this.syncAria();\n return;\n }\n if (name === 'selected') {\n // this.checkbox.removeAttribute('indeterminate');\n if (this.selected) {\n this.checkbox.checked = true;\n } else {\n this.checkbox.checked = false;\n }\n }\n\n if (name === 'indeterminate' && !this.selected) {\n this.checkbox.removeAttribute('indeterminate');\n this.checkbox.removeAttribute('checked');\n\n if (this.indeterminate) this.checkbox.setAttribute('indeterminate', '');\n }\n this.syncAria();\n }\n\n /**\n * Custom logic executed before the draw process begins.\n * Determines and sets the appropriate slot if the current item is nested.\n * @returns {void} No return value.\n */\n beforeDraw() {\n if (this.isNestedItem()) this.slot = 'children';\n\n if(this.closest('wje-tree')?.hasAttribute('slot-hover-visible'))\n this.setAttribute('slot-hover-visible', '');\n }\n\n /**\n * Creates and returns a document fragment representing the structure of a tree item component.\n * The method constructs the DOM elements including the native container, indentation, toggle button,\n * selection checkbox, label, and children container, along with their respective slots and attributes.\n * It dynamically handles the creation of expand and collapse icons, as well as appending slots for\n * child components.\n * @returns {DocumentFragment} A fragment containing the complete tree item structure to be rendered.\n */\n draw() {\n let fragment = document.createDocumentFragment();\n\n let native = document.createElement('div');\n native.setAttribute('part', 'native');\n native.classList.add('native-tree-item', this.selection === 'multiple' ? 'multiple' : 'single');\n\n let slotStart = document.createElement('slot');\n slotStart.setAttribute('name', 'start');\n\n let item = document.createElement('div');\n item.setAttribute('part', 'item');\n item.classList.add('item');\n\n let indent = document.createElement('div');\n indent.classList.add('indent');\n\n let button = document.createElement('div');\n button.classList.add('toggle');\n\n let checkbox = document.createElement('wje-checkbox');\n if (this.selected) checkbox.setAttribute('checked', '');\n\n let label = document.createElement('div');\n label.setAttribute('part', 'label');\n label.classList.add('content');\n\n let slotElement = document.createElement('slot');\n\n let children = document.createElement('div');\n children.classList.add('children');\n\n let slot = document.createElement('slot');\n slot.setAttribute('name', 'children');\n children.appendChild(slot);\n\n let slotEnd = document.createElement('slot');\n slotEnd.setAttribute('name', 'end');\n\n item.appendChild(slotStart);\n item.appendChild(indent);\n\n if (this.querySelectorAll(':scope > wje-tree-item').length > 0) {\n if (this.querySelectorAll('[slot=\"expand\"]').length < 1) {\n let expandIcon = document.createElement('wje-icon');\n expandIcon.setAttribute('name', 'chevron-right');\n expandIcon.setAttribute('slot', 'expand');\n\n this.appendChild(expandIcon);\n }\n\n if (this.querySelectorAll('[slot=\"collapse\"]').length < 1) {\n let collapseIcon = document.createElement('wje-icon');\n collapseIcon.setAttribute('name', 'chevron-down');\n collapseIcon.setAttribute('slot', 'collapse');\n\n this.appendChild(collapseIcon);\n }\n\n let expandSlot = document.createElement('slot');\n expandSlot.setAttribute('name', 'expand');\n\n let collapseSlot = document.createElement('slot');\n collapseSlot.setAttribute('name', 'collapse');\n\n button.appendChild(expandSlot);\n button.appendChild(collapseSlot);\n }\n\n item.appendChild(button);\n\n if (this.selection === 'multiple') item.appendChild(checkbox);\n\n label.appendChild(slotElement);\n item.appendChild(label);\n item.appendChild(slotEnd);\n\n native.appendChild(item);\n native.appendChild(children);\n\n fragment.appendChild(native);\n\n this.checkbox = checkbox;\n this.native = native;\n this.button = button;\n this.childrenElement = children;\n this.childrenSlot = slot;\n\n return fragment;\n }\n\n /**\n * Executes operations to be performed after the draw action is completed.\n * If the state indicates it is expanded, toggles its children.\n * Additionally, sets up an event listener on the button element to handle toggling children upon click.\n * @returns {void} Does not return a value.\n */\n afterDraw() {\n if (this.expanded) this.toggleChildren();\n\n this.button.addEventListener('click', this.toggleChildren.bind(this));\n this.setAttribute('tabindex', '0');\n this.syncAria();\n }\n\n /**\n * Determines if the current item is a nested item within a tree structure.\n * Checks if the item's parent element exists and is also a tree item.\n * @returns {boolean} Returns true if the current item is a nested tree item; otherwise, false.\n */\n isNestedItem() {\n const parent = this.parentElement;\n return !!parent && this.isTreeItem(parent);\n }\n\n /**\n * Checks whether the given node is a tree item.\n * @param {object} node The node to check.\n * @returns {boolean} Returns true if the node is an Element and has a class name of 'TreeItem', otherwise false.\n */\n isTreeItem(node) {\n return node instanceof Element && node.className === 'TreeItem';\n }\n\n /**\n * Toggles the visibility state of the children element and updates the class of the parent element.\n * The method toggles the 'open' class on the children elements and the 'expanded' class on the parent element,\n * effectively showing or hiding the children and indicating the expanded state.\n * @returns {void} Does not return a value.\n */\n toggleChildren() {\n this.childrenElement.classList.toggle('open');\n this.native.classList.toggle('expanded');\n this.syncAria();\n }\n\n /**\n * Syncs ARIA attributes on the host element.\n */\n syncAria() {\n const hasChildren = this.querySelectorAll(':scope > wje-tree-item').length > 0;\n const expanded = hasChildren ? this.native?.classList?.contains('expanded') : undefined;\n if (this.selection === 'multiple') {\n const checked = this.indeterminate ? 'mixed' : (this.selected ? 'true' : 'false');\n this.setAriaState({\n role: 'treeitem',\n checked,\n expanded,\n });\n } else {\n this.setAriaState({\n role: 'treeitem',\n selected: this.selected,\n expanded,\n });\n }\n }\n\n /**\n * Retrieves the child items from the `childrenSlot` that match specific criteria.\n * @param {object} [options] Configuration options.\n * @param {boolean} [options.includeDisabled] Determines whether disabled items should be included in the result. Defaults to true.\n * @returns {Array} An array of child items that are valid tree items and meet the criteria specified in the options.\n */\n getChildrenItems(options = {}) {\n const includeDisabled = options.includeDisabled ?? true; // Ak nie je zadané, predvolená hodnota je true\n\n const assigned = this.childrenSlot\n ? this.childrenSlot.assignedElements({ flatten: true })\n : [];\n const direct = assigned.length\n ? assigned\n : Array.from(this.querySelectorAll(':scope > wje-tree-item'));\n\n return direct.filter(\n (item) => this.isTreeItem(item) && (includeDisabled || !item.disabled)\n );\n }\n\n /**\n * Retrieves all descendant children of the current object in a flattened array structure.\n * @param {object} [options] An optional object specifying filters or configurations for retrieving children.\n * @returns {Array} An array containing all children and their descendants in a flat structure.\n */\n getAllChildrenFlat(options = {}) {\n const directChildren = this.getChildrenItems(options);\n return directChildren.flatMap((child) => [child, ...child.getAllChildrenFlat(options)]);\n }\n}\n","import TreeItem from './tree-item.element.js';\n\nexport default TreeItem;\n\nTreeItem.define('wje-tree-item', TreeItem);\n"],"names":[],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"wje-tree-item.js","sources":["../packages/wje-tree-item/tree-item.element.js","../packages/wje-tree-item/tree-item.js"],"sourcesContent":["import { default as WJElement, WjElementUtils, event } from '../wje-element/element.js';\nimport styles from './styles/styles.css?inline';\n\n/**\n * `wje-tree-item` is a custom web component used as a child of the `wje-tree`.\n * It represents a node within a tree structure, capable of nesting other items.\n * @summary Represents a single item in a tree structure.\n * @documentation https://elements.webjet.sk/components/tree-item\n * @status stable\n * @augments {HTMLElement}\n * @slot - Default slot for rendering the tree item's content (e.g., text or custom elements).\n * @csspart native - The native container of the tree item.\n * @cssproperty [--wje-tree-item-indent=var(--wje-spacing-large)] - Defines the indentation for nested tree items.\n * @cssproperty [--wje-tree-item-indent-guid-width=0px] - Specifies the width of the guide element shown next to a tree item.\n * @cssproperty [--wje-tree-item-border-radius=var(--wje-border-radius-medium)] - Sets the border radius of the tree item’s container.\n * @tag wje-tree-item\n */\n\nexport default class TreeItem extends WJElement {\n /**\n * Creates an instance of Toast.\n */\n constructor() {\n super();\n\n this._selection = 'single';\n }\n\n /**\n * Sets the expanded state of the element. When set to a truthy value,\n * the 'expanded' attribute will be added to the element. When set to a falsy\n * value, the 'expanded' attribute will be removed.\n * @param {boolean} value A boolean value indicating whether the\n * element should be expanded (true) or collapsed (false).\n */\n set expanded(value) {\n if (value) {\n this.setAttribute('expanded', '');\n } else {\n this.removeAttribute('expanded');\n }\n }\n\n /**\n * Retrieves the value of the 'expanded' state for the current element.\n * This getter checks whether the 'expanded' attribute is present on the element.\n * If the attribute exists, it returns true, representing that the element is expanded.\n * Otherwise, it returns false, indicating that the element is not expanded.\n * @returns {boolean} True if the 'expanded' attribute is present, false otherwise.\n */\n get expanded() {\n return this.hasAttribute('expanded');\n }\n\n /**\n * Sets the 'selected' attribute of the element. Removes the attribute if the provided value is falsy; otherwise, sets it.\n * @param {boolean} value The value indicating whether the element should have the 'selected' attribute.\n */\n set selected(value) {\n this.removeAttribute('selected');\n\n if (value) this.setAttribute('selected', '');\n }\n\n /**\n * Getter method for determining if the 'selected' attribute is present on the element.\n * @returns {boolean} Returns true if the 'selected' attribute is present, otherwise false.\n */\n get selected() {\n return this.hasAttribute('selected');\n }\n\n /**\n * Sets the selection mode for the component.\n * @param {string} value The selection mode to apply. Defaults to 'single'\n * if no value is provided. Possible options may be\n * specific to the implementation of the component\n * (e.g., 'single', 'multiple').\n */\n set selection(value) {\n this._selection = value || 'single';\n }\n\n /**\n * Retrieves the current selection.\n * @returns {*} The value of the current selection.\n */\n get selection() {\n return this._selection;\n }\n\n /**\n * Sets or removes the 'indeterminate' attribute based on the provided value.\n * This can be used to visually indicate an indeterminate state for elements like checkboxes.\n * @param {boolean} value A boolean indicating whether to set the element to an indeterminate state.\n * If true, the 'indeterminate' attribute is added to the element; if false, the attribute is removed.\n */\n set indeterminate(value) {\n this.removeAttribute('indeterminate');\n\n if (value) this.setAttribute('indeterminate', '');\n }\n\n /**\n * Retrieves the state of the indeterminate attribute.\n * @returns {boolean} True if the indeterminate attribute is present, otherwise false.\n */\n get indeterminate() {\n return this.hasAttribute('indeterminate');\n }\n\n /**\n * The class name for the component.\n * @type {string}\n */\n className = 'TreeItem';\n\n /**\n * Returns the CSS stylesheet for the component.\n * @static\n * @returns {CSSStyleSheet} The CSS stylesheet\n */\n static get cssStyleSheet() {\n return styles;\n }\n\n /**\n * Setup attributes for the Button element.\n */\n setupAttributes() {\n this.isShadowRoot = 'open';\n this.syncAria();\n }\n\n connectedCallback() {\n super.connectedCallback?.();\n this.syncNestingState();\n }\n\n /**\n * Returns the list of attributes to observe for changes.\n * @static\n * @returns {Array<string>}\n */\n static get observedAttributes() {\n return ['selected', 'indeterminate'];\n }\n\n /**\n * Handles updates when observed attributes of the element are changed.\n * Updates the checkbox state based on changes to the \"selected\" or \"indeterminate\" attributes.\n * @param {string} name The name of the attribute that was changed.\n * @param {string|null} oldValue The previous value of the attribute before the change.\n * @param {string|null} newValue The new value of the attribute after the change.\n * @returns {void}\n */\n attributeChangedCallback(name, oldValue, newValue) {\n if (!this.checkbox) {\n this.syncAria();\n return;\n }\n if (name === 'selected') {\n // this.checkbox.removeAttribute('indeterminate');\n if (this.selected) {\n this.checkbox.checked = true;\n } else {\n this.checkbox.checked = false;\n }\n }\n\n if (name === 'indeterminate' && !this.selected) {\n this.checkbox.removeAttribute('indeterminate');\n this.checkbox.removeAttribute('checked');\n\n if (this.indeterminate) this.checkbox.setAttribute('indeterminate', '');\n }\n this.syncAria();\n }\n\n /**\n * Custom logic executed before the draw process begins.\n * Determines and sets the appropriate slot if the current item is nested.\n * @returns {void} No return value.\n */\n beforeDraw() {\n this.syncNestingState();\n\n if(this.closest('wje-tree')?.hasAttribute('slot-hover-visible'))\n this.setAttribute('slot-hover-visible', '');\n }\n\n /**\n * Synchronizes the nesting-related state on the host element.\n * Sets the \"slot\" to children for nested items and updates\n * the nesting depth used to compute visual indentation.\n * @returns {void}\n */\n syncNestingState() {\n const depth = this.getNestingDepth();\n this.style.setProperty('--wje-tree-item-depth', String(depth));\n\n if (depth > 0) {\n this.slot = 'children';\n } else if (this.getAttribute('slot') === 'children') {\n this.removeAttribute('slot');\n }\n }\n\n /**\n * Creates and returns a document fragment representing the structure of a tree item component.\n * The method constructs the DOM elements including the native container, indentation, toggle button,\n * selection checkbox, label, and children container, along with their respective slots and attributes.\n * It dynamically handles the creation of expand and collapse icons, as well as appending slots for\n * child components.\n * @returns {DocumentFragment} A fragment containing the complete tree item structure to be rendered.\n */\n draw() {\n let fragment = document.createDocumentFragment();\n\n let native = document.createElement('div');\n native.setAttribute('part', 'native');\n native.classList.add('native-tree-item', this.selection === 'multiple' ? 'multiple' : 'single');\n\n let slotStart = document.createElement('slot');\n slotStart.setAttribute('name', 'start');\n\n let item = document.createElement('div');\n item.setAttribute('part', 'item');\n item.classList.add('item');\n\n let indent = document.createElement('div');\n indent.classList.add('indent');\n\n let button = document.createElement('div');\n button.classList.add('toggle');\n\n let checkbox = document.createElement('wje-checkbox');\n if (this.selected) checkbox.setAttribute('checked', '');\n\n let label = document.createElement('div');\n label.setAttribute('part', 'label');\n label.classList.add('content');\n\n let slotElement = document.createElement('slot');\n\n let children = document.createElement('div');\n children.classList.add('children');\n\n let slot = document.createElement('slot');\n slot.setAttribute('name', 'children');\n children.appendChild(slot);\n\n let slotEnd = document.createElement('slot');\n slotEnd.setAttribute('name', 'end');\n\n item.appendChild(slotStart);\n item.appendChild(indent);\n\n if (this.querySelectorAll(':scope > wje-tree-item').length > 0) {\n if (this.querySelectorAll('[slot=\"expand\"]').length < 1) {\n let expandIcon = document.createElement('wje-icon');\n expandIcon.setAttribute('name', 'chevron-right');\n expandIcon.setAttribute('slot', 'expand');\n\n this.appendChild(expandIcon);\n }\n\n if (this.querySelectorAll('[slot=\"collapse\"]').length < 1) {\n let collapseIcon = document.createElement('wje-icon');\n collapseIcon.setAttribute('name', 'chevron-down');\n collapseIcon.setAttribute('slot', 'collapse');\n\n this.appendChild(collapseIcon);\n }\n\n let expandSlot = document.createElement('slot');\n expandSlot.setAttribute('name', 'expand');\n\n let collapseSlot = document.createElement('slot');\n collapseSlot.setAttribute('name', 'collapse');\n\n button.appendChild(expandSlot);\n button.appendChild(collapseSlot);\n }\n\n item.appendChild(button);\n\n if (this.selection === 'multiple') item.appendChild(checkbox);\n\n label.appendChild(slotElement);\n item.appendChild(label);\n item.appendChild(slotEnd);\n\n native.appendChild(item);\n native.appendChild(children);\n\n fragment.appendChild(native);\n\n this.checkbox = checkbox;\n this.native = native;\n this.button = button;\n this.childrenElement = children;\n this.childrenSlot = slot;\n\n return fragment;\n }\n\n /**\n * Executes operations to be performed after the draw action is completed.\n * If the state indicates it is expanded, toggles its children.\n * Additionally, sets up an event listener on the button element to handle toggling children upon click.\n * @returns {void} Does not return a value.\n */\n afterDraw() {\n if (this.expanded) this.toggleChildren();\n\n this.button.addEventListener('click', this.toggleChildren.bind(this));\n this.setAttribute('tabindex', '0');\n this.syncAria();\n }\n\n /**\n * Determines if the current item is a nested item within a tree structure.\n * Checks if the item's parent element exists and is also a tree item.\n * @returns {boolean} Returns true if the current item is a nested tree item; otherwise, false.\n */\n isNestedItem() {\n const parent = this.parentElement;\n return !!parent && this.isTreeItem(parent);\n }\n\n /**\n * Calculates nesting depth based on ancestor tree items.\n * Root items have depth 0, direct children depth 1, etc.\n * @returns {number}\n */\n getNestingDepth() {\n let depth = 0;\n let current = this.parentElement;\n\n while (current) {\n if (this.isTreeItem(current)) depth += 1;\n current = current.parentElement;\n }\n\n return depth;\n }\n\n /**\n * Checks whether the given node is a tree item.\n * @param {object} node The node to check.\n * @returns {boolean} Returns true if the node is an Element and has a class name of 'TreeItem', otherwise false.\n */\n isTreeItem(node) {\n return node instanceof Element && node.className === 'TreeItem';\n }\n\n /**\n * Toggles the visibility state of the children element and updates the class of the parent element.\n * The method toggles the 'open' class on the children elements and the 'expanded' class on the parent element,\n * effectively showing or hiding the children and indicating the expanded state.\n * @returns {void} Does not return a value.\n */\n toggleChildren() {\n this.childrenElement.classList.toggle('open');\n this.native.classList.toggle('expanded');\n this.syncAria();\n }\n\n /**\n * Syncs ARIA attributes on the host element.\n */\n syncAria() {\n const hasChildren = this.querySelectorAll(':scope > wje-tree-item').length > 0;\n const expanded = hasChildren ? this.native?.classList?.contains('expanded') : undefined;\n if (this.selection === 'multiple') {\n const checked = this.indeterminate ? 'mixed' : (this.selected ? 'true' : 'false');\n this.setAriaState({\n role: 'treeitem',\n checked,\n expanded,\n });\n } else {\n this.setAriaState({\n role: 'treeitem',\n selected: this.selected,\n expanded,\n });\n }\n }\n\n /**\n * Retrieves the child items from the `childrenSlot` that match specific criteria.\n * @param {object} [options] Configuration options.\n * @param {boolean} [options.includeDisabled] Determines whether disabled items should be included in the result. Defaults to true.\n * @returns {Array} An array of child items that are valid tree items and meet the criteria specified in the options.\n */\n getChildrenItems(options = {}) {\n const includeDisabled = options.includeDisabled ?? true; // Ak nie je zadané, predvolená hodnota je true\n\n const assigned = this.childrenSlot\n ? this.childrenSlot.assignedElements({ flatten: true })\n : [];\n const direct = assigned.length\n ? assigned\n : Array.from(this.querySelectorAll(':scope > wje-tree-item'));\n\n return direct.filter(\n (item) => this.isTreeItem(item) && (includeDisabled || !item.disabled)\n );\n }\n\n /**\n * Retrieves all descendant children of the current object in a flattened array structure.\n * @param {object} [options] An optional object specifying filters or configurations for retrieving children.\n * @returns {Array} An array containing all children and their descendants in a flat structure.\n */\n getAllChildrenFlat(options = {}) {\n const directChildren = this.getChildrenItems(options);\n return directChildren.flatMap((child) => [child, ...child.getAllChildrenFlat(options)]);\n }\n}\n","import TreeItem from './tree-item.element.js';\n\nexport default TreeItem;\n\nTreeItem.define('wje-tree-item', TreeItem);\n"],"names":[],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "wj-elements",
|
|
3
3
|
"description": "WebJET Elements is a modern set of user interface tools harnessing the power of web components designed to simplify web application development.",
|
|
4
|
-
"version": "0.3.0-alpha.
|
|
4
|
+
"version": "0.3.0-alpha.3",
|
|
5
5
|
"homepage": "https://github.com/lencys/wj-elements",
|
|
6
6
|
"author": "Lukáš Ondrejček <lukas.ondrejcek@gmail.com>",
|
|
7
7
|
"license": "MIT",
|