@iyulab/components 0.1.3 → 0.1.5

package/dist/components/tooltip/Tooltip.js

@@ -16,59 +16,55 @@ var __decorateClass = (decorators, target, key, kind) => {
 };
 class Tooltip extends BaseElement {
   constructor() {
-    super(...arguments);
-    /** 슬롯이 비어있는지 여부를 나타냅니다. */
-    this.isSlotEmpty = true;
+    super();
     this.triggers = [];
-    this.open = false;
     this.hoist = false;
     this.distance = 8;
+    this.delay = 0;
     /** 툴팁을 표시합니다. */
-    this.show = async (e) => {
+    this.show = async (event) => {
       await this.updateComplete;
-      const trigger = e?.currentTarget || this.triggers[0] || null;
-      if (!trigger || this.isSlotEmpty) return;
+      const trigger = event?.currentTarget;
+      if (trigger instanceof HTMLElement === false) {
+        return;
+      }
       const middleware = [
         offset({ mainAxis: this.distance }),
         shift(),
         flip()
       ];
-      if (!this.placement)
+      if (!this.placement) {
         middleware.push(autoPlacement());
+      }
       const position = await computePosition(trigger, this, {
+        strategy: this.hoist ? "fixed" : "absolute",
         placement: this.placement,
-        middleware,
-        strategy: this.hoist ? "fixed" : "absolute"
+        middleware
       });
       Object.assign(this.style, {
         left: `${position.x}px`,
         top: `${position.y}px`,
         transformOrigin: this.getTransformOrigin(position.placement)
       });
-      await this.updateComplete;
+      if (this.delay > 0) {
+        await new Promise((resolve) => setTimeout(resolve, this.delay));
+      }
       requestAnimationFrame(() => {
-        this.open = true;
+        this.setAttribute("open", "");
       });
     };
     /** 툴팁을 숨깁니다. */
-    this.hide = async (_) => {
+    this.hide = async (event) => {
       await this.updateComplete;
-      requestAnimationFrame(() => {
-        this.open = false;
-      });
-    };
-    /** 
-     * slot에 콘텐츠가 존재하는지 확인합니다. 
-     */
-    this.handleSlotChange = (e) => {
-      const slot = e.target;
-      const nodes = slot.assignedNodes({ flatten: true }) ?? [];
-      this.isSlotEmpty = !nodes.some((node) => {
-        if (node.nodeType === Node.ELEMENT_NODE) return true;
-        if (node.nodeType === Node.TEXT_NODE && node.textContent?.trim()) return true;
-        return false;
-      });
+      if ("relatedTarget" in event) {
+        const relatedTarget = event["relatedTarget"];
+        if (this.contains(relatedTarget)) {
+          return;
+        }
+      }
+      this.removeAttribute("open");
     };
+    this.setAttribute("tabindex", "0");
   }
   static {
     this.styles = [super.styles, styles];
@@ -82,6 +78,8 @@ class Tooltip extends BaseElement {
       const parent = getParentElement(this);
       if (parent) this.triggers = [parent];
     }
+    this.addEventListener("mouseleave", this.hide);
+    this.addEventListener("focusout", this.hide);
   }
   disconnectedCallback() {
     this.detachTriggers(this.triggers);
@@ -89,18 +87,21 @@ class Tooltip extends BaseElement {
   }
   willUpdate(changedProperties) {
     super.willUpdate(changedProperties);
-    if (changedProperties.has("triggers") && this.triggers) {
+    if (changedProperties.has("triggerSelectors") && this.triggerSelectors) {
+      this.triggers = findElementsBy(this, this.triggerSelectors);
+    }
+  }
+  updated(changedProperties) {
+    super.updated(changedProperties);
+    if (changedProperties.has("triggers")) {
       const oldTriggers = changedProperties.get("triggers");
       this.detachTriggers(oldTriggers);
       this.attachTriggers(this.triggers);
     }
-    if (changedProperties.has("triggerSelectors") && this.triggerSelectors) {
-      this.triggers = findElementsBy(this, this.triggerSelectors);
-    }
   }
   render() {
     return html`
-      <slot @slotchange=${this.handleSlotChange}></slot>
+      <slot></slot>
     `;
   }
   /** 대상 엘리먼트에 툴팁 이벤트를 바인딩 합니다. */
@@ -124,8 +125,8 @@ class Tooltip extends BaseElement {
     }
   }
   /**
-  * 툴팁이 나타날 위치에 따라 transform-origin 값을 반환합니다.
-  */
+   * 툴팁이 나타날 위치에 따라 transform-origin 값을 반환합니다.
+   */
   getTransformOrigin(placement) {
     switch (placement) {
       case "top":
@@ -155,9 +156,6 @@ __decorateClass([
 __decorateClass([
   property({ type: String, attribute: "trigger-selectors" })
 ], Tooltip.prototype, "triggerSelectors");
-__decorateClass([
-  property({ type: Boolean, reflect: true })
-], Tooltip.prototype, "open");
 __decorateClass([
   property({ type: Boolean, reflect: true })
 ], Tooltip.prototype, "hoist");
@@ -167,5 +165,8 @@ __decorateClass([
 __decorateClass([
   property({ type: Number })
 ], Tooltip.prototype, "distance");
+__decorateClass([
+  property({ type: Number })
+], Tooltip.prototype, "delay");
 
 export { Tooltip };

package/dist/components/tooltip/Tooltip.styles.js

@@ -6,11 +6,11 @@ const styles = css`
     z-index: 1000;
     top: 0;
     left: 0;
+
     display: block;
     width: max-content;
-
     padding: 8px;
-    color: var(--u-tooltip-text-color);
+    color: var(--u-tooltip-txt-color);
     font-family: var(--u-font-modern, inherit);
     font-size: 14px;
     line-height: 1.5;
@@ -23,14 +23,14 @@ const styles = css`
     transform: scale(0);
     transition: opacity 0.15s ease, transform 0.15s ease;
   }
+  :host([hoist]) {
+    position: fixed;
+  }
   :host([open]) {
     opacity: 0.8;
     transform: scale(1);
     pointer-events: auto;
   }
-  :host([hoist]) {
-    position: fixed;
-  }
 `;
 
 export { styles };

package/dist/components/tooltip/index.js

@@ -0,0 +1,5 @@
+import { Tooltip } from './Tooltip.js';
+
+Tooltip.define("u-tooltip");
+
+export { Tooltip };

package/dist/components/tree/Tree.d.ts

@@ -7,33 +7,21 @@ import { TreeItem } from '../tree-item/TreeItem.js';
 export declare class Tree extends BaseElement {
     static styles: import('lit').CSSResultGroup[];
     static dependencies: Record<string, typeof BaseElement>;
+    private selectedItems;
+    treeItems: TreeItem[];
     /** 트리가 비활성화 상태인지 여부입니다. */
     disabled: boolean;
     /** 다중 선택을 허용할지 여부입니다. */
     multiple: boolean;
     /** 선택 가능한 트리인지 여부입니다. */
     selectable: boolean;
-    private treeItems;
-    private selectedItems;
     connectedCallback(): void;
     disconnectedCallback(): void;
     render(): import('lit-html').TemplateResult<1>;
-    /** 슬롯 변경 이벤트를 처리합니다. */
-    private handleSlotChange;
-    /** 트리 항목의 레벨을 업데이트합니다. */
-    private updateTreeItemsLevel;
     /** 트리 항목 선택 이벤트를 처리합니다. */
     private handleItemSelect;
     /** 트리 항목 확장/축소 이벤트를 처리합니다. */
     private handleItemToggle;
-    /**
-     * 모든 트리 항목을 확장합니다.
-     */
-    expandAll(): void;
-    /**
-     * 모든 트리 항목을 축소합니다.
-     */
-    collapseAll(): void;
     /**
      * 선택된 모든 항목을 반환합니다.
      */

package/dist/components/tree/Tree.js

@@ -1,5 +1,5 @@
 import { html } from 'lit';
-import { property, queryAssignedElements } from 'lit/decorators.js';
+import { queryAssignedElements, property } from 'lit/decorators.js';
 import { BaseElement } from '../BaseElement.js';
 import { TreeItem } from '../tree-item/TreeItem.js';
 import { styles } from './Tree.styles.js';
@@ -16,14 +16,10 @@ var __decorateClass = (decorators, target, key, kind) => {
 class Tree extends BaseElement {
   constructor() {
     super(...arguments);
+    this.selectedItems = /* @__PURE__ */ new Set();
     this.disabled = false;
     this.multiple = false;
     this.selectable = true;
-    this.selectedItems = /* @__PURE__ */ new Set();
-    /** 슬롯 변경 이벤트를 처리합니다. */
-    this.handleSlotChange = () => {
-      this.updateTreeItemsLevel();
-    };
     /** 트리 항목 선택 이벤트를 처리합니다. */
     this.handleItemSelect = (e) => {
       if (!this.selectable || this.disabled) {
@@ -84,42 +80,11 @@ class Tree extends BaseElement {
   }
   render() {
     return html`
-      <div class="tree-container">
-        <slot @slotchange=${this.handleSlotChange}></slot>
+      <div class="container">
+        <slot></slot>
       </div>
     `;
   }
-  /** 트리 항목의 레벨을 업데이트합니다. */
-  updateTreeItemsLevel(items = this.treeItems, level = 0) {
-    items.forEach((item) => {
-      if (item instanceof TreeItem) {
-        item.level = level;
-        const childrenSlot = item.shadowRoot?.querySelector('slot[name="children"]');
-        if (childrenSlot) {
-          const children = childrenSlot.assignedElements();
-          if (children.length > 0) {
-            this.updateTreeItemsLevel(children, level + 1);
-          }
-        }
-      }
-    });
-  }
-  /**
-   * 모든 트리 항목을 확장합니다.
-   */
-  expandAll() {
-    this.getAllTreeItems().forEach((item) => {
-      item.expand();
-    });
-  }
-  /**
-   * 모든 트리 항목을 축소합니다.
-   */
-  collapseAll() {
-    this.getAllTreeItems().forEach((item) => {
-      item.collapse();
-    });
-  }
   /**
    * 선택된 모든 항목을 반환합니다.
    */
@@ -143,18 +108,16 @@ class Tree extends BaseElement {
     items.forEach((item) => {
       if (item instanceof TreeItem) {
         allItems.push(item);
-        const childrenSlot = item.shadowRoot?.querySelector('slot[name="children"]');
-        if (childrenSlot) {
-          const children = childrenSlot.assignedElements();
-          if (children.length > 0) {
-            allItems = allItems.concat(this.getAllTreeItems(children));
-          }
-        }
+        const childItems = this.getAllTreeItems(item.childrenItems);
+        allItems = allItems.concat(childItems);
       }
     });
     return allItems;
   }
 }
+__decorateClass([
+  queryAssignedElements({ selector: "u-tree-item" })
+], Tree.prototype, "treeItems");
 __decorateClass([
   property({ type: Boolean, reflect: true })
 ], Tree.prototype, "disabled");
@@ -164,8 +127,5 @@ __decorateClass([
 __decorateClass([
   property({ type: Boolean })
 ], Tree.prototype, "selectable");
-__decorateClass([
-  queryAssignedElements({ selector: "u-tree-item" })
-], Tree.prototype, "treeItems");
 
 export { Tree };

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

@@ -3,8 +3,11 @@ import { css } from 'lit';
 const styles = css`
   :host {
     display: block;
-    width: 100%;
     min-width: 0;
+    width: 100%;
+    padding: 4px;
+    background-color: transparent;
+    border-radius: 4px;
   }
 
   :host([disabled]) {
@@ -13,13 +16,10 @@ const styles = css`
     cursor: not-allowed;
   }
 
-  .tree-container {
+  .container {
     display: flex;
     flex-direction: column;
     gap: 2px;
-    padding: 4px;
-    background-color: transparent;
-    border-radius: 4px;
   }
 `;
 

package/dist/components/tree/index.js

@@ -0,0 +1,5 @@
+import { Tree } from './Tree.js';
+
+customElements.define("u-tree", Tree);
+
+export { Tree, Tree as default };

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

@@ -7,46 +7,27 @@ import { BaseElement } from '../BaseElement.js';
 export declare class TreeItem extends BaseElement {
     static styles: import('lit').CSSResultGroup[];
     static dependencies: Record<string, typeof BaseElement>;
+    headerEl: HTMLElement;
+    childrenItems: TreeItem[];
+    /** 트리 항목이 리프 노드인지 여부입니다. */
+    leaf: boolean;
+    /** 트리 항목의 들여쓰기 레벨입니다. */
+    level: number;
     /** 트리 항목이 비활성화 상태인지 여부입니다. */
     disabled: boolean;
     /** 트리 항목이 선택된 상태인지 여부입니다. */
     selected: boolean;
     /** 트리 항목이 확장된 상태인지 여부입니다. */
     expanded: boolean;
-    /** 트리 항목이 리프 노드인지 여부입니다. */
-    leaf: boolean;
-    /** 트리 항목의 들여쓰기 레벨입니다. */
-    level: number;
     /** 트리 항목의 값입니다. */
     value: string;
-    /** 트리 항목의 아이콘입니다. */
-    icon: string;
-    private hasChildren;
     connectedCallback(): void;
     protected updated(changedProperties: PropertyValues): void;
     render(): import('lit-html').TemplateResult<1>;
-    /** 확장/축소 아이콘을 렌더링합니다. */
-    private renderExpandIcon;
-    /** 커스텀 아이콘을 렌더링합니다. */
-    private renderIcon;
+    /** 슬롯 변경 시 헤더용 노드와 자식 노드 분리 */
+    private handleSlotChange;
+    /** 자식 슬롯 변경 시 자식 노드 재설정 */
+    private handleChildrenSlotChange;
     /** 헤더 클릭 이벤트를 처리합니다. */
     private handleHeaderClick;
-    /** 확장/축소 아이콘 클릭 이벤트를 처리합니다. */
-    private handleExpandClick;
-    /** 슬롯 변경 시 자식 노드 확인 */
-    private handleSlotChange;
-    /** 자식 노드가 있는지 확인합니다. */
-    private checkForChildren;
-    /**
-     * 트리 항목을 확장합니다.
-     */
-    expand(): void;
-    /**
-     * 트리 항목을 축소합니다.
-     */
-    collapse(): void;
-    /**
-     * 트리 항목의 확장 상태를 토글합니다.
-     */
-    toggle(): void;
 }

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

@@ -1,6 +1,7 @@
-import { html, nothing } from 'lit';
-import { property, state } from 'lit/decorators.js';
+import { html } from 'lit';
+import { query, queryAssignedElements, state, property } from 'lit/decorators.js';
 import { BaseElement } from '../BaseElement.js';
+import { Icon } from '../icon/Icon.js';
 import { styles } from './TreeItem.styles.js';
 
 var __defProp = Object.defineProperty;
@@ -12,17 +13,32 @@ var __decorateClass = (decorators, target, key, kind) => {
   if (result) __defProp(target, key, result);
   return result;
 };
-class TreeItem extends BaseElement {
+const _TreeItem = class _TreeItem extends BaseElement {
   constructor() {
     super(...arguments);
+    this.leaf = true;
+    this.level = 0;
     this.disabled = false;
     this.selected = false;
     this.expanded = false;
-    this.leaf = false;
-    this.level = 0;
     this.value = "";
-    this.icon = "";
-    this.hasChildren = false;
+    /** 슬롯 변경 시 헤더용 노드와 자식 노드 분리 */
+    this.handleSlotChange = (e) => {
+      const slot = e.target;
+      const nodes = slot.assignedNodes({ flatten: true });
+      nodes.forEach((node) => {
+        if (node instanceof _TreeItem) {
+          node.setAttribute("slot", "children");
+        }
+      });
+    };
+    /** 자식 슬롯 변경 시 자식 노드 재설정 */
+    this.handleChildrenSlotChange = () => {
+      this.leaf = this.childrenItems.length === 0;
+      this.childrenItems.forEach((child) => {
+        child.level = this.level + 1;
+      });
+    };
     /** 헤더 클릭 이벤트를 처리합니다. */
     this.handleHeaderClick = (e) => {
       if (this.disabled) {
@@ -30,34 +46,27 @@ class TreeItem extends BaseElement {
         e.stopPropagation();
         return;
       }
-      this.selected = true;
-      this.emit("u-select", { value: this.value, item: this });
-    };
-    /** 확장/축소 아이콘 클릭 이벤트를 처리합니다. */
-    this.handleExpandClick = (e) => {
-      e.stopPropagation();
-      if (this.disabled || this.leaf || !this.hasChildren) {
-        return;
+      if (this.leaf) {
+        this.selected = true;
+        this.emit("u-select", { value: this.value, item: this });
+      } else {
+        this.expanded = !this.expanded;
+        this.emit("u-toggle", { expanded: this.expanded, item: this });
       }
-      this.expanded = !this.expanded;
-      this.emit("u-toggle", { expanded: this.expanded, item: this });
-    };
-    /** 슬롯 변경 시 자식 노드 확인 */
-    this.handleSlotChange = () => {
-      this.checkForChildren();
     };
   }
   static {
     this.styles = [super.styles, styles];
   }
   static {
-    this.dependencies = {};
+    this.dependencies = {
+      "u-icon": Icon
+    };
   }
   connectedCallback() {
     super.connectedCallback();
     this.setAttribute("role", "treeitem");
     this.setAttribute("tabindex", this.disabled ? "-1" : "0");
-    this.checkForChildren();
   }
   updated(changedProperties) {
     super.updated(changedProperties);
@@ -66,98 +75,57 @@ class TreeItem extends BaseElement {
       this.setAttribute("aria-disabled", this.disabled ? "true" : "false");
     }
     if (changedProperties.has("expanded")) {
-      this.setAttribute("aria-expanded", this.hasChildren ? String(this.expanded) : "false");
+      this.setAttribute("aria-expanded", this.expanded ? "true" : "false");
     }
     if (changedProperties.has("selected")) {
       this.setAttribute("aria-selected", this.selected ? "true" : "false");
     }
+    if (changedProperties.has("level")) {
+      this.setAttribute("aria-level", String(this.level + 1));
+      this.headerEl.style.paddingLeft = `calc(${this.level} * var(--indent-size, 20px))`;
+    }
   }
   render() {
     return html`
-      <div class="header" @click=${this.handleHeaderClick} style="padding-left: calc(${this.level} * 20px)">
-        ${this.renderExpandIcon()}
-        ${this.renderIcon()}
-        <span class="label">
-          <slot name="label"></slot>
-          <slot></slot>
-        </span>
+      <div class="header" @click=${this.handleHeaderClick}>
+        <u-icon class="expand-icon"
+          ?hidden=${this.leaf}
+          name=${this.expanded ? "chevron-down" : "chevron-right"}
+        ></u-icon>
+        <slot name="prefix"></slot>
+        <slot @slotchange=${this.handleSlotChange}></slot>
+        <slot name="suffix"></slot>
       </div>
       <div class="children" ?hidden=${!this.expanded}>
-        <slot name="children" @slotchange=${this.handleSlotChange}></slot>
+        <slot name="children" @slotchange=${this.handleChildrenSlotChange}></slot>
       </div>
     `;
   }
-  /** 확장/축소 아이콘을 렌더링합니다. */
-  renderExpandIcon() {
-    if (this.leaf || !this.hasChildren) {
-      return html`<span class="expand-icon placeholder"></span>`;
-    }
-    return html`
-      <span class="expand-icon" @click=${this.handleExpandClick}>
-        ${this.expanded ? "▼" : "▶"}
-      </span>
-    `;
-  }
-  /** 커스텀 아이콘을 렌더링합니다. */
-  renderIcon() {
-    if (!this.icon) {
-      return nothing;
-    }
-    return html`<span class="icon">${this.icon}</span>`;
-  }
-  /** 자식 노드가 있는지 확인합니다. */
-  checkForChildren() {
-    const childrenSlot = this.shadowRoot?.querySelector('slot[name="children"]');
-    const children = childrenSlot?.assignedElements() || [];
-    this.hasChildren = children.length > 0;
-    this.setAttribute("aria-expanded", this.hasChildren ? String(this.expanded) : "false");
-  }
-  /**
-   * 트리 항목을 확장합니다.
-   */
-  expand() {
-    if (!this.leaf && this.hasChildren) {
-      this.expanded = true;
-    }
-  }
-  /**
-   * 트리 항목을 축소합니다.
-   */
-  collapse() {
-    this.expanded = false;
-  }
-  /**
-   * 트리 항목의 확장 상태를 토글합니다.
-   */
-  toggle() {
-    if (!this.leaf && this.hasChildren) {
-      this.expanded = !this.expanded;
-    }
-  }
-}
+};
 __decorateClass([
-  property({ type: Boolean, reflect: true })
-], TreeItem.prototype, "disabled");
+  query(".header")
+], _TreeItem.prototype, "headerEl");
 __decorateClass([
-  property({ type: Boolean, reflect: true })
-], TreeItem.prototype, "selected");
+  queryAssignedElements({ slot: "children", selector: "u-tree-item", flatten: true })
+], _TreeItem.prototype, "childrenItems");
 __decorateClass([
-  property({ type: Boolean, reflect: true })
-], TreeItem.prototype, "expanded");
+  state()
+], _TreeItem.prototype, "leaf");
+__decorateClass([
+  state()
+], _TreeItem.prototype, "level");
 __decorateClass([
   property({ type: Boolean, reflect: true })
-], TreeItem.prototype, "leaf");
+], _TreeItem.prototype, "disabled");
 __decorateClass([
-  property({ type: Number, reflect: true })
-], TreeItem.prototype, "level");
+  property({ type: Boolean, reflect: true })
+], _TreeItem.prototype, "selected");
 __decorateClass([
-  property({ type: String })
-], TreeItem.prototype, "value");
+  property({ type: Boolean, reflect: true })
+], _TreeItem.prototype, "expanded");
 __decorateClass([
   property({ type: String })
-], TreeItem.prototype, "icon");
-__decorateClass([
-  state()
-], TreeItem.prototype, "hasChildren");
+], _TreeItem.prototype, "value");
+let TreeItem = _TreeItem;
 
 export { TreeItem };