@iyulab/components 0.3.0 → 1.0.0

package/dist/components/tree/UTree.js

@@ -1,5 +1,310 @@
-import { UTree } from './UTree.component.js';
-
-UTree.define("u-tree");
+import { UElement } from "../UElement.js";
+import { __decorateMetadata } from "../../_virtual/_@oxc-project_runtime@0.122.0/helpers/decorateMetadata.js";
+import { __decorate } from "../../_virtual/_@oxc-project_runtime@0.122.0/helpers/decorate.js";
+import { UTreeItem } from "../tree-item/UTreeItem.js";
+import { styles } from "./UTree.styles.js";
+import { customElement, property, state } from "lit/decorators.js";
+import { html } from "lit";
+//#region src/components/tree/UTree.ts
+var _ref, _ref2;
+var UTree = class UTree extends UElement {
+	constructor(..._args) {
+		super(..._args);
+		this.selectable = false;
+		this.selectMultiple = false;
+		this.selectLeaf = false;
+		this.checkable = false;
+		this.checkCascade = false;
+		this.trigger = "item";
+		this.draggable = false;
+		this.droppable = false;
+		this.anchor = null;
+		this._items = [];
+		this.handleSlotChange = (e) => {
+			this._items = e.target.assignedElements({ flatten: true }).filter((el) => el instanceof UTreeItem);
+			this.propagate();
+		};
+		this.handleIconSlotChange = (e) => {
+			const slot = e.target;
+			const nodes = slot.assignedNodes({ flatten: true });
+			if (slot.name === "expand-icon") this.expandIcon = nodes[0];
+			else if (slot.name === "collapse-icon") this.collapseIcon = nodes[0];
+		};
+		this.handlePick = (e) => {
+			if (!this.selectable) return;
+			e.stopPropagation();
+			const item = e.composedPath().find((el) => el instanceof UTreeItem);
+			if (!item) return;
+			if (this.selectLeaf && !item.leaf) return;
+			const detail = e.detail ?? {};
+			const ctrlKey = detail.ctrlKey ?? false;
+			const shiftKey = detail.shiftKey ?? false;
+			if (this.selectMultiple && shiftKey && this.anchor) this.selectRange(this.anchor, item);
+			else if (this.selectMultiple && ctrlKey) {
+				item.selected = !item.selected;
+				this.anchor = item;
+			} else {
+				this.mapItems((i) => i.selected = false);
+				item.selected = true;
+				this.anchor = item;
+			}
+			this.dispatchEvent(new Event("change", {
+				bubbles: true,
+				composed: true
+			}));
+		};
+		this.handleCheck = (e) => {
+			if (!this.checkable) return;
+			e.stopPropagation();
+			const item = e.composedPath().find((el) => el instanceof UTreeItem);
+			if (!item) return;
+			item.checked = !item.checked;
+			item.indeterminate = false;
+			if (this.checkCascade) {
+				this.cascadeDown(item, item.checked);
+				this.cascadeUp(item);
+			}
+			this.dispatchEvent(new Event("change", {
+				bubbles: true,
+				composed: true
+			}));
+		};
+		this.handleKeydown = (e) => {
+			const focused = e.composedPath().find((el) => el instanceof UTreeItem);
+			if (!focused) return;
+			const items = this.getItems((item) => !item.disabled && (!item.parentItem || item.parentItem.expanded));
+			if (items.length === 0) return;
+			const current = focused ? items.indexOf(focused) : -1;
+			if (current === -1) return;
+			switch (e.key) {
+				case "ArrowDown": {
+					e.preventDefault();
+					const next = current < items.length - 1 ? items[current + 1] : items[0];
+					if (this.selectMultiple && e.shiftKey && this.selectable) {
+						if (!this.anchor) this.anchor = focused;
+						this.selectRange(this.anchor, next);
+					}
+					next.focus();
+					break;
+				}
+				case "ArrowUp": {
+					e.preventDefault();
+					const prev = current > 0 ? items[current - 1] : items[items.length - 1];
+					if (this.selectMultiple && e.shiftKey && this.selectable) {
+						if (!this.anchor) this.anchor = focused;
+						this.selectRange(this.anchor, prev);
+					}
+					prev.focus();
+					break;
+				}
+				case "ArrowRight":
+					e.preventDefault();
+					if (!focused.leaf) if (!focused.expanded) focused.expand();
+					else {
+						const first = focused.childItems[0];
+						if (first && !first.disabled) first.focus();
+					}
+					break;
+				case "ArrowLeft":
+					e.preventDefault();
+					if (focused.expanded && !focused.leaf) focused.collapse();
+					else if (focused.parentItem) focused.parentItem.focus();
+					break;
+				case "Home":
+					e.preventDefault();
+					items[0]?.focus();
+					break;
+				case "End":
+					e.preventDefault();
+					items[items.length - 1]?.focus();
+					break;
+				case "Enter":
+				case " ":
+					e.preventDefault();
+					const header = focused.shadowRoot?.querySelector(".header");
+					if (header) header.click();
+					break;
+			}
+		};
+	}
+	static {
+		this.styles = [super.styles, styles];
+	}
+	get items() {
+		return this._items;
+	}
+	get selectedItems() {
+		return this.getItems((item) => item.selected);
+	}
+	get checkedItems() {
+		return this.getItems((item) => item.checked);
+	}
+	connectedCallback() {
+		super.connectedCallback();
+		this.setAttribute("role", "tree");
+		this.addEventListener("pick", this.handlePick);
+		this.addEventListener("check", this.handleCheck);
+		this.addEventListener("keydown", this.handleKeydown);
+	}
+	disconnectedCallback() {
+		this.removeEventListener("pick", this.handlePick);
+		this.removeEventListener("check", this.handleCheck);
+		this.removeEventListener("keydown", this.handleKeydown);
+		super.disconnectedCallback();
+	}
+	willUpdate(changedProperties) {
+		super.willUpdate(changedProperties);
+		if ([
+			"disabled",
+			"selectable",
+			"checkable",
+			"trigger",
+			"expandIcon",
+			"collapseIcon"
+		].some((k) => changedProperties.has(k))) this.propagate();
+	}
+	render() {
+		return html`
+      <slot @slotchange=${this.handleSlotChange}></slot>
 
+      <div hidden aria-hidden="true">
+        <slot name="expand-icon" @slotchange=${this.handleIconSlotChange}></slot>
+        <slot name="collapse-icon" @slotchange=${this.handleIconSlotChange}></slot>
+      </div>
+    `;
+	}
+	expandAll() {
+		this.mapItems((item) => {
+			if (!item.leaf) item.expanded = true;
+		});
+	}
+	collapseAll() {
+		this.mapItems((item) => {
+			item.expanded = false;
+		});
+	}
+	expand(value) {
+		this.getItem(value)?.expand();
+	}
+	collapse(value) {
+		this.getItem(value)?.collapse();
+	}
+	toggle(value) {
+		this.getItem(value)?.toggle();
+	}
+	getItem(value) {
+		let found;
+		const search = (items) => {
+			for (const item of items) {
+				if (item.value === value) {
+					found = item;
+					return;
+				}
+				if (item.childItems.length > 0) search(item.childItems);
+				if (found) return;
+			}
+		};
+		search(this._items);
+		return found;
+	}
+	getItems(fn) {
+		const result = [];
+		const filter = (items) => {
+			for (const item of items) {
+				if (fn(item)) result.push(item);
+				if (item.childItems.length > 0) filter(item.childItems);
+			}
+		};
+		filter(this._items);
+		return result;
+	}
+	mapItems(fn) {
+		const map = (items) => {
+			for (const item of items) {
+				fn(item);
+				if (item.childItems.length > 0) map(item.childItems);
+			}
+		};
+		map(this._items);
+	}
+	propagate() {
+		this._items.forEach((item) => {
+			item.selectable = this.selectable;
+			item.checkable = this.checkable;
+			item.trigger = this.trigger;
+			item.expandIcon = this.expandIcon?.cloneNode(true);
+			item.collapseIcon = this.collapseIcon?.cloneNode(true);
+		});
+	}
+	selectRange(anchor, target) {
+		const visible = this.getItems((item) => !item.disabled && (!item.parentItem || item.parentItem.expanded));
+		const from = visible.indexOf(anchor);
+		const to = visible.indexOf(target);
+		if (from === -1 || to === -1) return;
+		const [start, end] = from < to ? [from, to] : [to, from];
+		this.mapItems((i) => i.selected = false);
+		for (let i = start; i <= end; i++) if (!this.selectLeaf || visible[i].leaf) visible[i].selected = true;
+	}
+	cascadeDown(item, checked) {
+		for (const child of item.childItems) {
+			child.checked = checked;
+			child.indeterminate = false;
+			this.cascadeDown(child, checked);
+		}
+	}
+	cascadeUp(item) {
+		const parent = item.parentItem;
+		if (!parent) return;
+		const children = parent.childItems;
+		const checkedCount = children.filter((c) => c.checked).length;
+		const hasIndeterminate = children.some((c) => c.indeterminate);
+		if (checkedCount === children.length) {
+			parent.checked = true;
+			parent.indeterminate = false;
+		} else if (checkedCount === 0 && !hasIndeterminate) {
+			parent.checked = false;
+			parent.indeterminate = false;
+		} else {
+			parent.checked = false;
+			parent.indeterminate = true;
+		}
+		this.cascadeUp(parent);
+	}
+};
+__decorate([property({
+	type: Boolean,
+	reflect: true
+}), __decorateMetadata("design:type", Boolean)], UTree.prototype, "selectable", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true,
+	attribute: "select-multiple"
+}), __decorateMetadata("design:type", Boolean)], UTree.prototype, "selectMultiple", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true,
+	attribute: "select-leaf"
+}), __decorateMetadata("design:type", Boolean)], UTree.prototype, "selectLeaf", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true
+}), __decorateMetadata("design:type", Boolean)], UTree.prototype, "checkable", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true,
+	attribute: "check-cascade"
+}), __decorateMetadata("design:type", Boolean)], UTree.prototype, "checkCascade", void 0);
+__decorate([property({ type: String }), __decorateMetadata("design:type", Object)], UTree.prototype, "trigger", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true
+}), __decorateMetadata("design:type", Boolean)], UTree.prototype, "draggable", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true
+}), __decorateMetadata("design:type", Boolean)], UTree.prototype, "droppable", void 0);
+__decorate([state(), __decorateMetadata("design:type", typeof (_ref = typeof Node !== "undefined" && Node) === "function" ? _ref : Object)], UTree.prototype, "expandIcon", void 0);
+__decorate([state(), __decorateMetadata("design:type", typeof (_ref2 = typeof Node !== "undefined" && Node) === "function" ? _ref2 : Object)], UTree.prototype, "collapseIcon", void 0);
+UTree = __decorate([customElement("u-tree")], UTree);
+//#endregion
 export { UTree };

package/dist/components/tree/UTree.styles.js

@@ -1,25 +1,19 @@
-import { css } from 'lit';
-
-const styles = css`
+import { css } from "lit";
+//#region src/components/tree/UTree.styles.ts
+var styles = css`
   :host {
-    display: block;
-    min-width: 0;
-    width: 100%;
-    padding: 4px;
-    background-color: transparent;
-    border-radius: 4px;
-  }
-  :host([disabled]) {
-    opacity: 0.5;
-    pointer-events: none;
-    cursor: not-allowed;
+    --tree-indent-size: 14px;
+    --tree-indent-guide-offset: 8px;
+    --tree-indent-guide-width: 1px;
+    --tree-indent-guide-style: solid;
+    --tree-indent-guide-color: var(--u-border-color-weak);
   }
 
-  .container {
-    display: flex;
-    flex-direction: column;
-    gap: 2px;
+  :host {
+    display: block;
+    font-size: 0.875rem;
+    color: var(--u-txt-color);
   }
 `;
-
+//#endregion
 export { styles };

package/dist/components/tree-item/UTreeItem.d.ts

@@ -1,7 +1,66 @@
-import { UTreeItem } from './UTreeItem.component.js';
+import { PropertyValues } from 'lit';
+import { UElement } from '../UElement.js';
+export type TreeItemTrigger = 'item' | 'icon';
+/**
+ * 트리 구조에서 개별 노드를 표시하는 컴포넌트입니다.
+ *
+ * @slot - 레이블 텍스트
+ * @slot prefix - 레이블 앞에 표시되는 콘텐츠
+ * @slot suffix - 레이블 뒤에 표시되는 콘텐츠
+ *
+ * @csspart header - 노드의 헤더 영역
+ * @csspart content - 노드의 레이블 콘텐츠 영역
+ * @csspart subtree - 자식 노드들을 감싸는 영역
+ *
+ * @event expand - 노드 펼침 시 발생
+ * @event collapse - 노드 접힐 시 발생
+ * @event pick - 선택 시 발생
+ * @event check - 체크 시 발생
+ */
+export declare class UTreeItem extends UElement {
+    static styles: import('lit').CSSResultGroup[];
+    /** 비활성화 여부 */
+    disabled: boolean;
+    /** 펼침/접힌 상태 */
+    expanded: boolean;
+    /** 선택 가능 여부 */
+    selectable: boolean;
+    /** 체크 가능 여부 */
+    checkable: boolean;
+    /** 로딩 상태 */
+    loading: boolean;
+    /** 트리 펼치기 트리거 방식 */
+    trigger: TreeItemTrigger;
+    /** 아이템의 고유값 */
+    value: string;
+    draggable: boolean;
+    droppable: boolean;
+    leaf: boolean;
+    depth: number;
+    selected: boolean;
+    checked: boolean;
+    indeterminate: boolean;
+    expandIcon?: Node;
+    collapseIcon?: Node;
+    private _parentItem;
+    get parentItem(): UTreeItem | null;
+    private _childItems;
+    get childItems(): readonly UTreeItem[];
+    connectedCallback(): void;
+    protected updated(changedProperties: PropertyValues): void;
+    render(): import('lit-html').TemplateResult<1>;
+    expand(): boolean;
+    collapse(): boolean;
+    toggle(): boolean;
+    private propagate;
+    private handleSlotChange;
+    private handleChildrenSlotChange;
+    private handleHeaderClick;
+    private handleToggleClick;
+    private handleCheckboxClick;
+}
 declare global {
     interface HTMLElementTagNameMap {
         'u-tree-item': UTreeItem;
     }
 }
-export { UTreeItem };

package/dist/components/tree-item/UTreeItem.js

@@ -1,5 +1,194 @@
-import { UTreeItem } from './UTreeItem.component.js';
+import { UElement } from "../UElement.js";
+import { __decorateMetadata } from "../../_virtual/_@oxc-project_runtime@0.122.0/helpers/decorateMetadata.js";
+import { __decorate } from "../../_virtual/_@oxc-project_runtime@0.122.0/helpers/decorate.js";
+import "../icon/UIcon.js";
+import "../spinner/USpinner.js";
+import { styles } from "./UTreeItem.styles.js";
+import { customElement, property, state } from "lit/decorators.js";
+import { html } from "lit";
+//#region src/components/tree-item/UTreeItem.ts
+var _ref, _ref2, _UTreeItem;
+var UTreeItem = class UTreeItem extends UElement {
+	static {
+		_UTreeItem = this;
+	}
+	constructor(..._args) {
+		super(..._args);
+		this.disabled = false;
+		this.expanded = false;
+		this.selectable = false;
+		this.checkable = false;
+		this.loading = false;
+		this.trigger = "item";
+		this.value = "";
+		this.draggable = false;
+		this.droppable = false;
+		this.leaf = true;
+		this.depth = 0;
+		this.selected = false;
+		this.checked = false;
+		this.indeterminate = false;
+		this._parentItem = null;
+		this._childItems = [];
+		this.handleSlotChange = (e) => {
+			const elements = e.target.assignedElements({ flatten: true });
+			for (const el of elements) if (el instanceof _UTreeItem && !el.hasAttribute("slot")) el.setAttribute("slot", "children");
+		};
+		this.handleChildrenSlotChange = (e) => {
+			this._childItems = e.target.assignedElements({ flatten: true }).filter((el) => el instanceof _UTreeItem);
+			this.leaf = this._childItems.length === 0;
+			this.propagate();
+		};
+		this.handleHeaderClick = (e) => {
+			e.stopPropagation();
+			if (this.disabled) return;
+			if (this.selectable) this.fire("pick", { detail: {
+				value: this.value,
+				selected: this.selected,
+				shiftKey: e.shiftKey,
+				metaKey: e.metaKey,
+				ctrlKey: e.ctrlKey
+			} });
+			const isMultiple = this.selectable && (e.ctrlKey || e.metaKey || e.shiftKey);
+			if (this.trigger === "item" && !isMultiple) this.toggle();
+		};
+		this.handleToggleClick = (e) => {
+			e.stopPropagation();
+			this.toggle();
+		};
+		this.handleCheckboxClick = (e) => {
+			e.stopPropagation();
+			if (this.disabled) return;
+			this.fire("check");
+		};
+	}
+	static {
+		this.styles = [super.styles, styles];
+	}
+	get parentItem() {
+		return this._parentItem;
+	}
+	get childItems() {
+		return this._childItems;
+	}
+	connectedCallback() {
+		super.connectedCallback();
+		this.setAttribute("role", "treeitem");
+		this.setAttribute("tabindex", this.disabled ? "-1" : "0");
+		if (this.parentElement instanceof _UTreeItem) {
+			this._parentItem = this.parentElement;
+			this.depth = this._parentItem.depth + 1;
+			if (!this.hasAttribute("slot")) this.setAttribute("slot", "children");
+		}
+	}
+	updated(changedProperties) {
+		super.updated(changedProperties);
+		if (changedProperties.has("disabled")) this.setAttribute("tabindex", this.disabled ? "-1" : "0");
+		if (changedProperties.has("depth")) this.style.setProperty("--tree-item-depth", String(this.depth));
+	}
+	render() {
+		return html`
+      <div class="header" part="header"
+        ?selected=${this.selected}
+        @click=${this.handleHeaderClick}
+      >
+        <span class="prefix-toggler"
+          ?hidden=${this.leaf}
+          @click=${this.handleToggleClick}
+        >
+          ${this.loading ? html`<u-spinner></u-spinner>` : this.expanded ? this.collapseIcon || html`<u-icon lib="internal" name="chevron-down"></u-icon>` : this.expandIcon || html`<u-icon lib="internal" name="chevron-right"></u-icon>`}
+        </span>
 
-UTreeItem.define("u-tree-item");
+        <span class="prefix-checkbox"
+          ?hidden=${!this.checkable}  
+          ?checked=${this.checked}
+          ?indeterminate=${this.indeterminate}
+          @click=${this.handleCheckboxClick}
+        >
+          <u-icon lib="internal"
+            name=${this.indeterminate ? "dash-lg" : "check-lg"}
+          ></u-icon>
+        </span>
 
+        <slot name="prefix"></slot>
+        <div class="content" part="content">
+          <slot @slotchange=${this.handleSlotChange}></slot>
+        </div>
+        <slot name="suffix"></slot>
+      </div>
+
+      <div class="subtree" part="subtree" ?hidden=${!this.expanded || this.leaf}>
+        <slot name="children" @slotchange=${this.handleChildrenSlotChange}></slot>
+      </div>
+    `;
+	}
+	expand() {
+		if (this.disabled || this.leaf) return false;
+		if (this.fire("expand")) {
+			this.expanded = true;
+			return true;
+		}
+		return false;
+	}
+	collapse() {
+		if (this.disabled || this.leaf) return false;
+		if (this.fire("collapse")) {
+			this.expanded = false;
+			return true;
+		}
+		return false;
+	}
+	toggle() {
+		if (this.expanded) return this.collapse();
+		else return this.expand();
+	}
+	propagate() {
+		this._childItems.forEach((item) => {
+			item.selectable = this.selectable;
+			item.checkable = this.checkable;
+			item.trigger = this.trigger;
+			item.expandIcon = this.expandIcon?.cloneNode(true);
+			item.collapseIcon = this.collapseIcon?.cloneNode(true);
+		});
+	}
+};
+__decorate([property({
+	type: Boolean,
+	reflect: true
+}), __decorateMetadata("design:type", Boolean)], UTreeItem.prototype, "disabled", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true
+}), __decorateMetadata("design:type", Boolean)], UTreeItem.prototype, "expanded", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true
+}), __decorateMetadata("design:type", Boolean)], UTreeItem.prototype, "selectable", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true
+}), __decorateMetadata("design:type", Boolean)], UTreeItem.prototype, "checkable", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true
+}), __decorateMetadata("design:type", Boolean)], UTreeItem.prototype, "loading", void 0);
+__decorate([property({ type: String }), __decorateMetadata("design:type", Object)], UTreeItem.prototype, "trigger", void 0);
+__decorate([property({ type: String }), __decorateMetadata("design:type", String)], UTreeItem.prototype, "value", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true
+}), __decorateMetadata("design:type", Boolean)], UTreeItem.prototype, "draggable", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true
+}), __decorateMetadata("design:type", Boolean)], UTreeItem.prototype, "droppable", void 0);
+__decorate([state(), __decorateMetadata("design:type", Boolean)], UTreeItem.prototype, "leaf", void 0);
+__decorate([state(), __decorateMetadata("design:type", Number)], UTreeItem.prototype, "depth", void 0);
+__decorate([state(), __decorateMetadata("design:type", Boolean)], UTreeItem.prototype, "selected", void 0);
+__decorate([state(), __decorateMetadata("design:type", Boolean)], UTreeItem.prototype, "checked", void 0);
+__decorate([state(), __decorateMetadata("design:type", Boolean)], UTreeItem.prototype, "indeterminate", void 0);
+__decorate([state(), __decorateMetadata("design:type", typeof (_ref = typeof Node !== "undefined" && Node) === "function" ? _ref : Object)], UTreeItem.prototype, "expandIcon", void 0);
+__decorate([state(), __decorateMetadata("design:type", typeof (_ref2 = typeof Node !== "undefined" && Node) === "function" ? _ref2 : Object)], UTreeItem.prototype, "collapseIcon", void 0);
+UTreeItem = _UTreeItem = __decorate([customElement("u-tree-item")], UTreeItem);
+//#endregion
 export { UTreeItem };