wj-elements 0.7.3 → 0.7.4

package/dist/dark.css

@@ -276,6 +276,20 @@
     /* Toast */
     --wje-toast-stack-width: 300px;
 
+    /* Tree - Item */
+    --wje-tree-item-indent-guid-color: var(--wje-border-color);
+    --wje-tree-item-border-color: transparent;
+    --wje-tree-item-border-color-hover: transparent;
+    --wje-tree-item-border-color-selected: transparent;
+    --wje-tree-item-background: transparent;
+    --wje-tree-item-color: var(--wje-color);
+    --wje-tree-item-background-hover: var(--wje-color-contrast-1);
+    --wje-tree-item-color-hover: var(--wje-color-contrast-8);
+    --wje-tree-item-background-selected: var(--wje-color-primary-9);
+    --wje-tree-item-color-selected: var(--wje-color-contrast-0);
+    --wje-tree-item-drop-color: var(--wje-color-primary);
+    --wje-tree-item-drop-border-color: var(--wje-tree-item-drop-color);
+
     /* Toolbar */
     --wje-toolbar-background: var(--wje-background);
     --wje-toolbar-border-color: var(--wje-border-color);

package/dist/light.css

@@ -707,11 +707,25 @@
     --wje-tree-item-padding-block: var(--wje-spacing-3x-small);
     --wje-tree-item-indent: var(--wje-spacing-large);
     --wje-tree-item-indent-guid-width: 0px;
+    --wje-tree-item-indent-guid-style: solid;
+    --wje-tree-item-indent-guid-color: var(--wje-border-color);
     --wje-tree-item-border-radius: var(--wje-border-radius-medium);
+    --wje-tree-item-border-width: 0;
+    --wje-tree-item-border-style: solid;
+    --wje-tree-item-border-color: transparent;
+    --wje-tree-item-border-color-hover: transparent;
+    --wje-tree-item-border-color-selected: transparent;
     --wje-tree-item-background: transparent;
     --wje-tree-item-color: var(--wje-color);
     --wje-tree-item-background-hover: var(--wje-color-contrast-1);
     --wje-tree-item-color-hover: var(--wje-color-contrast-8);
     --wje-tree-item-background-selected: var(--wje-color-primary-9);
     --wje-tree-item-color-selected: var(--wje-color-contrast-0);
+    --wje-tree-item-drop-color: var(--wje-color-primary);
+    --wje-tree-item-drop-line-width: 2px;
+    --wje-tree-item-drop-line-border-radius: var(--wje-border-radius-pill);
+    --wje-tree-item-drop-border-width: 1px;
+    --wje-tree-item-drop-border-style: solid;
+    --wje-tree-item-drop-border-color: var(--wje-tree-item-drop-color);
+    --wje-tree-item-drop-border-radius: var(--wje-border-radius-medium);
 }

package/dist/packages/wje-tree/tree.element.d.ts

@@ -6,6 +6,7 @@ import { default as WJElement } from '../wje-element/element.js';
  * @documentation https://elements.webjet.sk/components/tree
  * @status stable
  * @augments {WJElement}
+ * @attribute {boolean} reorder - Enables moving tree items by dragging direct start slot content.
  * @csspart native - The native container part of the tree.
  * @slot - The default slot to place `wje-tree-item` child components.
  * @tag wje-tree
@@ -17,6 +18,9 @@ export default class Tree extends WJElement {
      * @returns {CSSStyleSheet} The CSS stylesheet
      */
     static get cssStyleSheet(): CSSStyleSheet;
+    draggedItem: HTMLElement;
+    dropTarget: any;
+    dropPosition: string;
     /**
      * Sets the selection attribute for the element.
      * @param {string} value The value to set as the selection attribute.
@@ -28,6 +32,16 @@ export default class Tree extends WJElement {
      * @returns {string} The current selection mode, either set by the element's attribute or the default value 'single'.
      */
     get selection(): string;
+    /**
+     * Enables reordering tree items by dragging an element assigned to the start slot.
+     * @param {boolean} value Whether reordering is enabled.
+     */
+    set reorder(value: boolean);
+    /**
+     * Indicates whether tree items can be reordered with the start slot handle.
+     * @returns {boolean}
+     */
+    get reorder(): boolean;
     /**
      * A method called before the drawing or rendering process of tree items.
      * It iterates through all `wje-tree-item` elements, updating their selection state
@@ -36,7 +50,7 @@ export default class Tree extends WJElement {
      */
     beforeDraw(): void;
     /**
-     * Draw method for the toast notification.
+     * Draw method for the tree.
      * @returns {object} Document fragment
      */
     draw(): object;
@@ -59,19 +73,158 @@ export default class Tree extends WJElement {
      * @param {Event} e The click event object.
      */
     handleClick: (e: Event) => void;
+    /**
+     * Starts dragging a tree item when the drag begins from the configured start slot handle.
+     * @param {DragEvent} e The drag event.
+     * @returns {void}
+     */
+    handleDragStart: (e: DragEvent) => void;
+    /**
+     * Updates the current drop target and exposes a visual drop position.
+     * @param {DragEvent} e The drag event.
+     * @returns {void}
+     */
+    handleDragOver: (e: DragEvent) => void;
+    /**
+     * Completes a tree item move.
+     * @param {DragEvent} e The drop event.
+     * @returns {void}
+     */
+    handleDrop: (e: DragEvent) => void;
+    /**
+     * Clears drag state after the browser drag operation ends.
+     * @returns {void}
+     */
+    handleDragEnd: () => void;
     /**
      * Retrieves all items that match the selector 'wje-tree-item' within the current context.
      * @returns {Array<Element>} An array of all matching DOM elements.
      */
     getAllItems(): Array<Element>;
     /**
-     * Retrieves and appends an expand/collapse icon to a given item based on the provided status.
-     * @param {HTMLElement} item The DOM element to which the icon will be appended.
-     * @param {string} status The status indicating which icon to retrieve (e.g., "expand" or "collapse").
-     * @returns {void} This method does not return a value. If the icon matching the given status is not found, a warning is logged.
+     * Retrieves and appends a template slot to a tree item.
+     * @param {HTMLElement} item The DOM element to which the slot content will be appended.
+     * @param {HTMLTemplateElement|null} template Template that may provide reusable slot content.
+     * @param {string} slotName Name of the projected slot content to clone.
+     * @returns {void}
+     */
+    appendTemplateSlot(item: HTMLElement, template: HTMLTemplateElement | null, slotName: string): void;
+    /**
+     * Returns the internal class used to identify cloned template slot content.
+     * @param {string} slotName Name of the projected slot.
+     * @returns {string}
+     */
+    getTemplateSlotClass(slotName: string): string;
+    /**
+     * Marks direct start slot content as the drag handle for reorderable trees.
+     * @param {HTMLElement} item Host item that receives draggable start content.
+     * @returns {void}
+     */
+    setupReorderHandle(item: HTMLElement): void;
+    /**
+     * Finds a tree item from a composed event path.
+     * @param {Event} e User interaction that may originate inside shadow DOM.
+     * @returns {HTMLElement|null}
+     */
+    getTreeItemFromEvent(e: Event): HTMLElement | null;
+    /**
+     * Checks whether the event started from a reorder handle.
+     * @param {Event} e User interaction to inspect.
+     * @returns {boolean}
+     */
+    isReorderHandleEvent(e: Event): boolean;
+    /**
+     * Checks whether a node is a tree item element.
+     * @param {object} node The node to inspect.
+     * @returns {boolean}
+     */
+    isTreeItem(node: object): boolean;
+    /**
+     * Returns direct tree item children for a tree or tree item parent.
+     * @param {HTMLElement} parent The parent element.
+     * @returns {HTMLElement[]}
+     */
+    getDirectTreeItems(parent: HTMLElement): HTMLElement[];
+    /**
+     * Gets the index of a tree item among direct tree item siblings.
+     * @param {HTMLElement} item Element whose sibling position should be resolved.
+     * @returns {number}
+     */
+    getTreeItemIndex(item: HTMLElement): number;
+    /**
+     * Determines whether the dragged item can be dropped on the target.
+     * @param {HTMLElement} draggedItem Item currently being moved.
+     * @param {HTMLElement} targetItem Candidate item under the pointer.
+     * @returns {boolean}
+     */
+    canDrop(draggedItem: HTMLElement, targetItem: HTMLElement): boolean;
+    /**
+     * Resolves the drop position against the visible tree item row.
+     * @param {DragEvent} e Browser drag event carrying pointer coordinates.
+     * @param {HTMLElement|null} target Item used to calculate row boundaries.
+     * @returns {'before'|'inside'|'after'}
+     */
+    getDropPosition(e: DragEvent, target: HTMLElement | null): "before" | "inside" | "after";
+    /**
+     * Applies the visual drop position to the current target item.
+     * @param {HTMLElement} target Item currently showing insertion feedback.
+     * @param {string} position Resolved insertion area for the target row.
+     * @returns {void}
+     */
+    setDropState(target: HTMLElement, position: string): void;
+    /**
+     * Clears visual drop target state.
+     * @returns {void}
+     */
+    clearDropState(): void;
+    /**
+     * Clears the active drag state.
+     * @returns {void}
+     */
+    clearDragState(): void;
+    /**
+     * Returns the internal class used to render a drop marker.
+     * @param {'before'|'inside'|'after'} position Drop marker position.
+     * @returns {string}
+     */
+    getDropPositionClass(position: "before" | "inside" | "after"): string;
+    /**
+     * Moves a tree item relative to another tree item and syncs nesting metadata.
+     * @param {HTMLElement} draggedItem The item being moved.
+     * @param {HTMLElement} targetItem Item that receives or anchors the moved item.
+     * @param {'before'|'inside'|'after'} position The target position.
+     * @returns {object|null} Move detail, or null when the move is invalid.
+     */
+    moveItem(draggedItem: HTMLElement, targetItem: HTMLElement, position?: "before" | "inside" | "after"): object | null;
+    /**
+     * Returns cloned direct tree item children for an event detail.
+     * @param {HTMLElement} parent Parent whose direct tree item children should be serialized.
+     * @returns {HTMLElement[]}
+     */
+    getOrderElements(parent: HTMLElement): HTMLElement[];
+    /**
+     * Returns stable ids for direct tree item children when they are available.
+     * @param {HTMLElement} parent Parent whose direct tree item children should be serialized.
+     * @returns {Array<string|null>}
+     */
+    getOrderIds(parent: HTMLElement): Array<string | null>;
+    /**
+     * Gets an application-facing id from a tree item.
+     * @param {HTMLElement|null} item Tree item to read.
+     * @returns {string|null}
+     */
+    getItemId(item: HTMLElement | null): string | null;
+    /**
+     * Syncs item selection mode and nesting metadata after a DOM move.
+     * @returns {void}
+     */
+    syncTreeItems(): void;
+    /**
+     * Redraws affected parent items so expand/collapse affordances match current children.
+     * @param {HTMLElement[]} items Items that may need refresh.
+     * @returns {void}
      */
-    getExpandCollapseIcon(item: HTMLElement, status: string): void;
-    getSlots(item: any, slotName: any): void;
+    refreshMovedItems(items: HTMLElement[]): void;
     /**
      * Updates the state of a checkbox, syncing the state both upwards to parent elements
      * and downwards to child elements as necessary.

package/dist/packages/wje-tree-item/tree-item.element.d.ts

@@ -9,7 +9,21 @@
  * @csspart native - The native container of the tree item.
  * @cssproperty [--wje-tree-item-indent=var(--wje-spacing-large)] - Defines the indentation for nested tree items.
  * @cssproperty [--wje-tree-item-indent-guid-width=0px] - Specifies the width of the guide element shown next to a tree item.
- * @cssproperty [--wje-tree-item-border-radius=var(--wje-border-radius-medium)] - Sets the border radius of the tree item’s container.
+ * @cssproperty [--wje-tree-item-indent-guid-style=solid] - Defines the guide border style for nested tree items.
+ * @cssproperty [--wje-tree-item-indent-guid-color=var(--wje-border-color)] - Defines the guide border color for nested tree items.
+ * @cssproperty [--wje-tree-item-border-radius=var(--wje-border-radius-medium)] - Sets the border radius of the tree item's container.
+ * @cssproperty [--wje-tree-item-border-width=0px] - Sets the border width of the tree item row.
+ * @cssproperty [--wje-tree-item-border-style=solid] - Sets the border style of the tree item row.
+ * @cssproperty [--wje-tree-item-border-color=transparent] - Sets the border color of the tree item row.
+ * @cssproperty [--wje-tree-item-border-color-hover=transparent] - Sets the border color of the hovered tree item row.
+ * @cssproperty [--wje-tree-item-border-color-selected=transparent] - Sets the border color of the selected tree item row.
+ * @cssproperty [--wje-tree-item-drop-color=var(--wje-color-primary)] - Sets the color of reorder drop indicators.
+ * @cssproperty [--wje-tree-item-drop-line-width=2px] - Sets the thickness of before/after reorder drop indicators.
+ * @cssproperty [--wje-tree-item-drop-line-border-radius=var(--wje-border-radius-pill)] - Sets the radius of before/after reorder drop indicators.
+ * @cssproperty [--wje-tree-item-drop-border-width=1px] - Sets the width of the inside reorder drop border.
+ * @cssproperty [--wje-tree-item-drop-border-style=solid] - Sets the style of the inside reorder drop border.
+ * @cssproperty [--wje-tree-item-drop-border-color=var(--wje-tree-item-drop-color)] - Sets the color of the inside reorder drop border.
+ * @cssproperty [--wje-tree-item-drop-border-radius=inherit] - Sets the radius of the inside reorder drop border.
  * @tag wje-tree-item
  */
 export default class TreeItem extends HTMLElement {
@@ -141,7 +155,7 @@ export default class TreeItem extends HTMLElement {
     /**
      * Checks whether the given node is a tree item.
      * @param {object} node The node to check.
-     * @returns {boolean} Returns true if the node is an Element and has a class name of 'TreeItem', otherwise false.
+     * @returns {boolean} Returns true when the node is a tree item element.
      */
     isTreeItem(node: object): boolean;
     /**
@@ -151,6 +165,16 @@ export default class TreeItem extends HTMLElement {
      * @returns {void} Does not return a value.
      */
     toggleChildren(): void;
+    /**
+     * Sets the rendered children visibility and optionally mirrors it to the expanded attribute.
+     * @param {boolean} expanded Whether child items should be visible.
+     * @param {object} [options] Configuration for attribute syncing.
+     * @param {boolean} [options.syncAttribute] Mirrors the visual state to the host attribute when true.
+     * @returns {void}
+     */
+    setChildrenExpanded(expanded: boolean, options?: {
+        syncAttribute?: boolean;
+    }): void;
     /**
      * Syncs ARIA attributes on the host element.
      */