@iyulab/components 0.1.2 → 0.1.4

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,25 +78,30 @@ 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);
     super.disconnectedCallback();
   }
+  willUpdate(changedProperties) {
+    super.willUpdate(changedProperties);
+    if (changedProperties.has("triggerSelectors") && this.triggerSelectors) {
+      this.triggers = findElementsBy(this, this.triggerSelectors);
+    }
+  }
   updated(changedProperties) {
     super.updated(changedProperties);
-    if (changedProperties.has("triggers") && this.triggers) {
+    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,9 +6,9 @@ const styles = css`
     z-index: 1000;
     top: 0;
     left: 0;
+
     display: block;
     width: max-content;
-
     padding: 8px;
     color: var(--u-tooltip-text-color);
     font-family: var(--u-font-modern, inherit);
@@ -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/tree/Tree.d.ts

@@ -0,0 +1,37 @@
+import { BaseElement } from '../BaseElement.js';
+import { TreeItem } from '../tree-item/TreeItem.js';
+/**
+ * Tree 컴포넌트는 계층적 데이터 구조를 표시하는 트리 뷰를 제공합니다.
+ * u-tree-item 컴포넌트를 자식으로 사용하여 중첩된 구조를 구성할 수 있습니다.
+ */
+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;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    render(): import('lit-html').TemplateResult<1>;
+    /** 트리 항목 선택 이벤트를 처리합니다. */
+    private handleItemSelect;
+    /** 트리 항목 확장/축소 이벤트를 처리합니다. */
+    private handleItemToggle;
+    /**
+     * 선택된 모든 항목을 반환합니다.
+     */
+    getSelectedItems(): TreeItem[];
+    /**
+     * 모든 선택을 해제합니다.
+     */
+    clearSelection(): void;
+    /**
+     * 재귀적으로 모든 TreeItem을 가져옵니다.
+     */
+    private getAllTreeItems;
+}

package/dist/components/tree/Tree.js

@@ -0,0 +1,131 @@
+import { html } from 'lit';
+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';
+
+var __defProp = Object.defineProperty;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = void 0 ;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (decorator(target, key, result) ) || result;
+  if (result) __defProp(target, key, result);
+  return result;
+};
+class Tree extends BaseElement {
+  constructor() {
+    super(...arguments);
+    this.selectedItems = /* @__PURE__ */ new Set();
+    this.disabled = false;
+    this.multiple = false;
+    this.selectable = true;
+    /** 트리 항목 선택 이벤트를 처리합니다. */
+    this.handleItemSelect = (e) => {
+      if (!this.selectable || this.disabled) {
+        e.stopPropagation();
+        return;
+      }
+      const item = e.detail.item;
+      if (!this.multiple) {
+        this.selectedItems.forEach((selectedItem) => {
+          if (selectedItem !== item) {
+            selectedItem.selected = false;
+          }
+        });
+        this.selectedItems.clear();
+      }
+      if (item.selected) {
+        this.selectedItems.add(item);
+      } else {
+        this.selectedItems.delete(item);
+      }
+      this.emit("u-tree-select", {
+        value: item.value,
+        item,
+        selectedItems: Array.from(this.selectedItems)
+      });
+    };
+    /** 트리 항목 확장/축소 이벤트를 처리합니다. */
+    this.handleItemToggle = (e) => {
+      if (this.disabled) {
+        e.stopPropagation();
+        return;
+      }
+      const item = e.detail.item;
+      this.emit("u-tree-toggle", {
+        expanded: item.expanded,
+        item
+      });
+    };
+  }
+  static {
+    this.styles = [super.styles, styles];
+  }
+  static {
+    this.dependencies = {
+      "u-tree-item": TreeItem
+    };
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.setAttribute("role", "tree");
+    this.addEventListener("u-select", this.handleItemSelect);
+    this.addEventListener("u-toggle", this.handleItemToggle);
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.removeEventListener("u-select", this.handleItemSelect);
+    this.removeEventListener("u-toggle", this.handleItemToggle);
+  }
+  render() {
+    return html`
+      <div class="container">
+        <slot></slot>
+      </div>
+    `;
+  }
+  /**
+   * 선택된 모든 항목을 반환합니다.
+   */
+  getSelectedItems() {
+    return Array.from(this.selectedItems);
+  }
+  /**
+   * 모든 선택을 해제합니다.
+   */
+  clearSelection() {
+    this.selectedItems.forEach((item) => {
+      item.selected = false;
+    });
+    this.selectedItems.clear();
+  }
+  /**
+   * 재귀적으로 모든 TreeItem을 가져옵니다.
+   */
+  getAllTreeItems(items = this.treeItems) {
+    let allItems = [];
+    items.forEach((item) => {
+      if (item instanceof TreeItem) {
+        allItems.push(item);
+        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");
+__decorateClass([
+  property({ type: Boolean })
+], Tree.prototype, "multiple");
+__decorateClass([
+  property({ type: Boolean })
+], Tree.prototype, "selectable");
+
+export { Tree };

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

@@ -0,0 +1 @@
+export declare const styles: import('lit').CSSResult;

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

@@ -0,0 +1,26 @@
+import { css } from 'lit';
+
+const 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;
+  }
+
+  .container {
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+  }
+`;
+
+export { styles };

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

@@ -0,0 +1,3 @@
+import { Tree } from './Tree.js';
+export { Tree };
+export default Tree;

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

@@ -0,0 +1,33 @@
+import { PropertyValues } from 'lit';
+import { BaseElement } from '../BaseElement.js';
+/**
+ * TreeItem 컴포넌트는 트리의 개별 노드를 나타냅니다.
+ * u-tree 컴포넌트와 함께 사용되며, 중첩된 구조를 지원합니다.
+ */
+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;
+    /** 트리 항목의 값입니다. */
+    value: string;
+    connectedCallback(): void;
+    protected updated(changedProperties: PropertyValues): void;
+    render(): import('lit-html').TemplateResult<1>;
+    /** 슬롯 변경 시 헤더용 노드와 자식 노드 분리 */
+    private handleSlotChange;
+    /** 자식 슬롯 변경 시 자식 노드 재설정 */
+    private handleChildrenSlotChange;
+    /** 헤더 클릭 이벤트를 처리합니다. */
+    private handleHeaderClick;
+}

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

@@ -0,0 +1,131 @@
+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;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = void 0 ;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (decorator(target, key, result) ) || result;
+  if (result) __defProp(target, key, result);
+  return result;
+};
+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.value = "";
+    /** 슬롯 변경 시 헤더용 노드와 자식 노드 분리 */
+    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) {
+        e.preventDefault();
+        e.stopPropagation();
+        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 });
+      }
+    };
+  }
+  static {
+    this.styles = [super.styles, styles];
+  }
+  static {
+    this.dependencies = {
+      "u-icon": Icon
+    };
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.setAttribute("role", "treeitem");
+    this.setAttribute("tabindex", this.disabled ? "-1" : "0");
+  }
+  updated(changedProperties) {
+    super.updated(changedProperties);
+    if (changedProperties.has("disabled")) {
+      this.setAttribute("tabindex", this.disabled ? "-1" : "0");
+      this.setAttribute("aria-disabled", this.disabled ? "true" : "false");
+    }
+    if (changedProperties.has("expanded")) {
+      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}>
+        <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.handleChildrenSlotChange}></slot>
+      </div>
+    `;
+  }
+};
+__decorateClass([
+  query(".header")
+], _TreeItem.prototype, "headerEl");
+__decorateClass([
+  queryAssignedElements({ slot: "children", selector: "u-tree-item", flatten: true })
+], _TreeItem.prototype, "childrenItems");
+__decorateClass([
+  state()
+], _TreeItem.prototype, "leaf");
+__decorateClass([
+  state()
+], _TreeItem.prototype, "level");
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], _TreeItem.prototype, "disabled");
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], _TreeItem.prototype, "selected");
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], _TreeItem.prototype, "expanded");
+__decorateClass([
+  property({ type: String })
+], _TreeItem.prototype, "value");
+let TreeItem = _TreeItem;
+
+export { TreeItem };

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

@@ -0,0 +1 @@
+export declare const styles: import('lit').CSSResult;

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

@@ -0,0 +1,66 @@
+import { css } from 'lit';
+
+const styles = css`
+  :host {
+    display: block;
+    
+    --indent-size: 20px;
+  }
+  :host([disabled]) {
+    opacity: 0.5;
+    pointer-events: none;
+    cursor: not-allowed;
+  }
+  :host([disabled]) .header {
+    cursor: not-allowed;
+    pointer-events: none;
+  }
+
+  .header {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    gap: 6px;
+    padding: 6px 8px;
+    line-height: 1.5;
+    border-radius: 4px;
+    background-color: transparent;
+    transition: background-color 0.2s ease;
+    user-select: none;
+    cursor: pointer;
+  }
+  :host(:not([disabled])) .header:hover {
+    background-color: var(--u-bg-color-hover, #f5f5f5);
+  }
+  :host([selected]) .header {
+    color: var(--u-blue-600, #0066cc);
+    background-color: var(--u-blue-0, #e8f4f8);
+  }
+
+  .expand-icon {
+    transition: transform 0.2s ease, color 0.2s ease;
+    cursor: pointer;
+  }
+  
+  slot[name="prefix"],
+  slot[name="suffix"] {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+  }
+  slot:not([name]) {
+    flex: 1;
+    display: inline-flex;
+    align-items: center;
+    justify-content: flex-start;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .children {
+    display: block;
+  }
+`;
+
+export { styles };

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

@@ -0,0 +1,3 @@
+import { TreeItem } from './TreeItem.js';
+export { TreeItem };
+export default TreeItem;

package/dist/index.js

@@ -2,16 +2,20 @@ export { Alert } from './components/alert/Alert.js';
 export { Button } from './components/button/Button.js';
 export { ContextMenu } from './components/context-menu/ContextMenu.js';
 export { Dialog } from './components/dialog/Dialog.js';
+export { Divider } from './components/divider/Divider.js';
 export { Form } from './components/form/Form.js';
 export { Icon } from './components/icon/Icon.js';
 export { IconButton } from './components/icon-button/IconButton.js';
 export { Input } from './components/input/Input.js';
 export { Menu } from './components/menu/Menu.js';
 export { Panel } from './components/panel/Panel.js';
+export { ProgressBar } from './components/progress-bar/ProgressBar.js';
 export { ProgressRing } from './components/progress-ring/ProgressRing.js';
 export { Spinner } from './components/spinner/Spinner.js';
 export { SplitPanel } from './components/split-panel/SplitPanel.js';
 export { Tooltip } from './components/tooltip/Tooltip.js';
+export { Tree } from './components/tree/Tree.js';
+export { TreeItem } from './components/tree-item/TreeItem.js';
 export { BrowserStorage } from './utilities/BrowserStorage.js';
 export { getPropertyMeta, propertyMeta, setPropertyMeta } from './utilities/decorators.js';
 export { notifier } from './utilities/notifier.js';

package/dist/integrations/react/UDivider.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import { Divider } from '../../components/divider/index';
+
+export declare const UDivider: React.ForwardRefExoticComponent<
+  Partial<Divider> & React.HTMLAttributes<Divider>
+>;
+
+export type UDividerProps = React.ComponentProps<typeof UDivider>;

package/dist/integrations/react/UDivider.js

@@ -0,0 +1,10 @@
+import React from 'react';
+import { createComponent } from '@lit/react';
+import { Divider } from '../../components/divider/index';
+
+export const UDivider = createComponent({
+  react: React,
+  tagName: 'u-divider',
+  elementClass: Divider,
+  events: {}
+});

package/dist/integrations/react/UProgressBar.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import { ProgressBar } from '../../components/progress-bar/index';
+
+export declare const UProgressBar: React.ForwardRefExoticComponent<
+  Partial<ProgressBar> & React.HTMLAttributes<ProgressBar>
+>;
+
+export type UProgressBarProps = React.ComponentProps<typeof UProgressBar>;

package/dist/integrations/react/UProgressBar.js

@@ -0,0 +1,10 @@
+import React from 'react';
+import { createComponent } from '@lit/react';
+import { ProgressBar } from '../../components/progress-bar/index';
+
+export const UProgressBar = createComponent({
+  react: React,
+  tagName: 'u-progress-bar',
+  elementClass: ProgressBar,
+  events: {}
+});