@iyulab/components 0.1.10 → 0.2.0

package/dist/components/tooltip/UTooltip.component.js

@@ -1,13 +1,37 @@
 import { html } from 'lit';
+import { property } from 'lit/decorators.js';
 import { FloatingElement } from '../FloatingElement.js';
 import { styles } from './UTooltip.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 UTooltip extends FloatingElement {
   constructor() {
     super(...arguments);
+    this.interactive = false;
     /** this 바인딩 이벤트 핸들러 */
-    this._show = () => this.show();
-    this._hide = () => this.hide();
+    this._show = (event) => {
+      const target = event.currentTarget;
+      if (!target) return;
+      this.show(target);
+    };
+    /** this 바인딩 이벤트 핸들러 */
+    this._hide = (event) => {
+      if (this.interactive) {
+        const target = this.target;
+        const related = event.relatedTarget;
+        if (!target || !related) return;
+        if (this.contains(related) || target.contains(related)) return;
+      }
+      this.hide();
+    };
   }
   static {
     this.styles = [super.styles, styles];
@@ -17,30 +41,48 @@ class UTooltip extends FloatingElement {
   }
   updated(changedProperties) {
     super.updated(changedProperties);
-    if (changedProperties.has("anchor")) {
-      const oldAnchor = changedProperties.get("anchor");
-      const newAnchor = this.anchor;
-      if (oldAnchor) this.unbind(oldAnchor);
-      if (newAnchor) this.bind(newAnchor);
+    if (changedProperties.has("anchors")) {
+      const oldAnchors = changedProperties.get("anchors");
+      const newAnchors = this.anchors;
+      if (oldAnchors) this.unbind(oldAnchors);
+      if (newAnchors) this.bind(newAnchors);
+    }
+    if (changedProperties.has("distance")) {
+      if (this.distance > 0) {
+        this.style.setProperty("--interactive-area", `${this.distance}px`);
+      } else {
+        this.style.removeProperty("--interactive-area");
+      }
     }
   }
   render() {
     return html`<slot></slot>`;
   }
   /** 바인딩 이벤트 핸들러 */
-  bind(target) {
-    target.addEventListener("pointerenter", this._show);
-    target.addEventListener("pointerleave", this._hide);
-    target.addEventListener("focusin", this._show);
-    target.addEventListener("focusout", this._hide);
+  bind(anchors) {
+    for (const anchor of anchors) {
+      anchor.addEventListener("pointerenter", this._show);
+      anchor.addEventListener("pointerleave", this._hide);
+      anchor.addEventListener("focusin", this._show);
+      anchor.addEventListener("focusout", this._hide);
+    }
+    this.addEventListener("pointerleave", this._hide);
+    this.addEventListener("focusout", this._hide);
   }
   /** 바인딩 해제 이벤트 핸들러 */
-  unbind(target) {
-    target.removeEventListener("pointerenter", this._show);
-    target.removeEventListener("pointerleave", this._hide);
-    target.removeEventListener("focusin", this._show);
-    target.removeEventListener("focusout", this._hide);
+  unbind(anchors) {
+    for (const anchor of anchors) {
+      anchor.removeEventListener("pointerenter", this._show);
+      anchor.removeEventListener("pointerleave", this._hide);
+      anchor.removeEventListener("focusin", this._show);
+      anchor.removeEventListener("focusout", this._hide);
+    }
+    this.addEventListener("pointerleave", this._hide);
+    this.addEventListener("focusout", this._hide);
   }
 }
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], UTooltip.prototype, "interactive");
 
 export { UTooltip };

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

@@ -1,6 +1,10 @@
 import { css } from 'lit';
 
 const styles = css`
+  :host {
+    --interactive-area: 0px;
+  }
+
   :host {
     padding: 6px 8px;
     color: var(--u-tooltip-txt-color);
@@ -18,6 +22,17 @@ const styles = css`
     opacity: 0.8;
     transform: scale(1);
   }
+
+  /* 툴팁을 distance만큼 감싸는 보이지 않는 영역 */
+  :host([interactive])::before {
+    content: '';
+    position: absolute;
+    /* 툴팁을 distance만큼 모든 방향으로 확장 */
+    inset: calc(var(--interactive-area) * -1);
+    background: transparent;
+    pointer-events: auto;
+    z-index: -1;
+  }
 `;
 
 export { styles };

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

@@ -1,32 +1,40 @@
 import { PropertyValues } from 'lit';
 import { BaseElement } from '../BaseElement.js';
 /**
- * TreeItem 컴포넌트는 트리의 개별 노드를 나타냅니다.
- * u-tree 컴포넌트와 함께 사용되며, 중첩된 구조를 지원합니다.
+ * UTreeItem 컴포넌트는 트리의 개별 노드를 나타냅니다.
+ * UTree 컴포넌트와 함께 사용되며, 중첩된 구조를 지원합니다.
  */
 export declare class UTreeItem extends BaseElement {
     static styles: import('lit').CSSResultGroup[];
     static dependencies: Record<string, typeof BaseElement>;
+    /** DOM 변경 감지를 위한 MutationObserver */
+    private mutationObserver?;
+    /** 자식 트리 아이템 배열 */
+    private _childrenItems;
+    /** 자식 트리 아이템 배열 (읽기 전용) */
+    get childrenItems(): readonly UTreeItem[];
     headerEl: HTMLElement;
-    childrenItems: UTreeItem[];
     /** 트리 항목이 리프 노드인지 여부입니다. */
     leaf: boolean;
     /** 트리 항목의 들여쓰기 레벨입니다. */
     level: number;
+    /** 트리 항목이 확장된 상태인지 여부입니다. */
+    expanded: boolean;
     /** 트리 항목이 비활성화 상태인지 여부입니다. */
     disabled: boolean;
+    /** 로딩 상태 @default false */
+    loading: boolean;
     /** 트리 항목이 선택된 상태인지 여부입니다. */
     selected: boolean;
-    /** 트리 항목이 확장된 상태인지 여부입니다. */
-    expanded: boolean;
     /** 트리 항목의 값입니다. */
     value: string;
     connectedCallback(): void;
+    disconnectedCallback(): void;
     protected updated(changedProperties: PropertyValues): void;
     render(): import('lit-html').TemplateResult<1>;
-    /** 슬롯 변경 시 헤더용 노드와 자식 노드 분리 */
-    private handleSlotChange;
-    /** 자식 슬롯 변경 시 자식 노드 재설정 */
+    /** 자식 u-tree-item 요소들에 slot 속성 부여 */
+    private processChildren;
+    /** 자식 슬롯 변경 시 처리 */
     private handleChildrenSlotChange;
     /** 헤더 클릭 이벤트를 처리합니다. */
     private handleHeaderClick;

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

@@ -1,8 +1,9 @@
 import { html } from 'lit';
-import { query, queryAssignedElements, state, property } from 'lit/decorators.js';
+import { query, state, property } from 'lit/decorators.js';
 import { BaseElement } from '../BaseElement.js';
 import { UIcon } from '../icon/UIcon.component.js';
 import { styles } from './UTreeItem.styles.js';
+import { USpinner } from '../spinner/USpinner.component.js';
 
 var __defProp = Object.defineProperty;
 var __decorateClass = (decorators, target, key, kind) => {
@@ -13,29 +14,27 @@ var __decorateClass = (decorators, target, key, kind) => {
   if (result) __defProp(target, key, result);
   return result;
 };
-const _UTreeItem = class _UTreeItem extends BaseElement {
+class UTreeItem extends BaseElement {
   constructor() {
     super(...arguments);
+    /** 자식 트리 아이템 배열 */
+    this._childrenItems = [];
     this.leaf = true;
     this.level = 0;
+    this.expanded = false;
     this.disabled = false;
+    this.loading = false;
     this.selected = false;
-    this.expanded = false;
     this.value = "";
-    /** 슬롯 변경 시 헤더용 노드와 자식 노드 분리 */
-    this.handleSlotChange = (e) => {
+    /** 자식 슬롯 변경 시 처리 */
+    this.handleChildrenSlotChange = (e) => {
       const slot = e.target;
-      const nodes = slot.assignedNodes({ flatten: true });
-      nodes.forEach((node) => {
-        if (node instanceof _UTreeItem) {
-          node.setAttribute("slot", "children");
-        }
-      });
-    };
-    /** 자식 슬롯 변경 시 자식 노드 재설정 */
-    this.handleChildrenSlotChange = () => {
-      this.leaf = this.childrenItems.length === 0;
-      this.childrenItems.forEach((child) => {
+      const assignedElements = slot.assignedElements({ flatten: true });
+      this._childrenItems = assignedElements.filter(
+        (el) => el.tagName.toLowerCase() === "u-tree-item"
+      );
+      this.leaf = this._childrenItems.length === 0;
+      this._childrenItems.forEach((child) => {
         child.level = this.level + 1;
       });
     };
@@ -60,12 +59,34 @@ const _UTreeItem = class _UTreeItem extends BaseElement {
   }
   static {
     this.dependencies = {
-      "u-icon": UIcon
+      "u-icon": UIcon,
+      "u-spinner": USpinner
     };
   }
+  /** 자식 트리 아이템 배열 (읽기 전용) */
+  get childrenItems() {
+    return this._childrenItems;
+  }
   connectedCallback() {
     super.connectedCallback();
     this.setAttribute("tabindex", this.disabled ? "-1" : "0");
+    this.mutationObserver = new MutationObserver((mutations) => {
+      for (const mutation of mutations) {
+        if (mutation.type === "childList") {
+          mutation.addedNodes.forEach((node) => {
+            if (node instanceof Element && node.tagName.toLowerCase() === "u-tree-item" && !node.hasAttribute("slot")) {
+              node.setAttribute("slot", "children");
+            }
+          });
+        }
+      }
+    });
+    this.mutationObserver.observe(this, { childList: true });
+    this.processChildren();
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.mutationObserver?.disconnect();
   }
   updated(changedProperties) {
     super.updated(changedProperties);
@@ -73,7 +94,7 @@ const _UTreeItem = class _UTreeItem extends BaseElement {
       this.setAttribute("tabindex", this.disabled ? "-1" : "0");
     }
     if (changedProperties.has("level")) {
-      this.headerEl.style.paddingLeft = `calc(${this.level} * var(--indent-size, 20px))`;
+      this.style.setProperty("--indent-level", this.level.toString());
     }
   }
   render() {
@@ -84,40 +105,57 @@ const _UTreeItem = class _UTreeItem extends BaseElement {
           lib="internal"
           name=${this.expanded ? "chevron-down" : "chevron-right"}
         ></u-icon>
+        
+        <u-spinner class="prefix icon" 
+          ?hidden=${!this.loading}
+        ></u-spinner>
+        
         <slot name="prefix"></slot>
-        <slot @slotchange=${this.handleSlotChange}></slot>
+        
+        <span class="label">
+          <slot></slot>
+        </span>
+        
         <slot name="suffix"></slot>
       </div>
+
       <div class="children" ?hidden=${!this.expanded}>
         <slot name="children" @slotchange=${this.handleChildrenSlotChange}></slot>
       </div>
     `;
   }
-};
+  /** 자식 u-tree-item 요소들에 slot 속성 부여 */
+  processChildren() {
+    Array.from(this.children).forEach((child) => {
+      if (child.tagName.toLowerCase() === "u-tree-item" && !child.hasAttribute("slot")) {
+        child.setAttribute("slot", "children");
+      }
+    });
+  }
+}
 __decorateClass([
   query(".header")
-], _UTreeItem.prototype, "headerEl");
-__decorateClass([
-  queryAssignedElements({ slot: "children", selector: "u-tree-item", flatten: true })
-], _UTreeItem.prototype, "childrenItems");
+], UTreeItem.prototype, "headerEl");
 __decorateClass([
   state()
-], _UTreeItem.prototype, "leaf");
+], UTreeItem.prototype, "leaf");
 __decorateClass([
   state()
-], _UTreeItem.prototype, "level");
+], UTreeItem.prototype, "level");
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], UTreeItem.prototype, "expanded");
 __decorateClass([
   property({ type: Boolean, reflect: true })
-], _UTreeItem.prototype, "disabled");
+], UTreeItem.prototype, "disabled");
 __decorateClass([
   property({ type: Boolean, reflect: true })
-], _UTreeItem.prototype, "selected");
+], UTreeItem.prototype, "loading");
 __decorateClass([
   property({ type: Boolean, reflect: true })
-], _UTreeItem.prototype, "expanded");
+], UTreeItem.prototype, "selected");
 __decorateClass([
   property({ type: String })
-], _UTreeItem.prototype, "value");
-let UTreeItem = _UTreeItem;
+], UTreeItem.prototype, "value");
 
 export { UTreeItem };

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

@@ -2,10 +2,13 @@ import { css } from 'lit';
 
 const styles = css`
   :host {
-    display: block;
-    
+    --indent-level: 0;
     --indent-size: 20px;
   }
+
+  :host {
+    display: block;
+  }
   :host([disabled]) {
     opacity: 0.5;
     pointer-events: none;
@@ -22,6 +25,7 @@ const styles = css`
     align-items: center;
     gap: 6px;
     padding: 6px 8px;
+    padding-left: calc(var(--indent-level, 0) * var(--indent-size));
     line-height: 1.5;
     border-radius: 4px;
     background-color: transparent;
@@ -48,7 +52,8 @@ const styles = css`
     align-items: center;
     justify-content: center;
   }
-  slot:not([name]) {
+  
+  .label {
     flex: 1;
     display: inline-flex;
     align-items: center;

package/dist/index.d.ts

@@ -5,7 +5,6 @@ export * from './components/divider/UDivider.js';
 export * from './components/drawer/UDrawer.js';
 export * from './components/form/UForm.js';
 export * from './components/icon/UIcon.js';
-export * from './components/icon-button/UIconButton.js';
 export * from './components/input/UInput.js';
 export * from './components/menu/UMenu.js';
 export * from './components/menu-item/UMenuItem.js';
@@ -14,6 +13,7 @@ export * from './components/progress-ring/UProgressRing.js';
 export * from './components/skeleton/USkeleton.js';
 export * from './components/spinner/USpinner.js';
 export * from './components/split-panel/USplitPanel.js';
+export * from './components/tag/UTag.js';
 export * from './components/tooltip/UTooltip.js';
 export * from './components/tree/UTree.js';
 export * from './components/tree-item/UTreeItem.js';
@@ -24,5 +24,6 @@ export * from './events/UResizeEvent';
 export * from './events/USelectEvent';
 export * from './events/UShowEvent';
 export * from './utilities/BrowserStorage.js';
-export * from './utilities/notifier.js';
-export * from './utilities/theme.js';
+export * from './utilities/IconRegistry.js';
+export * from './utilities/Notifier.js';
+export * from './utilities/Theme.js';

package/dist/index.js

@@ -5,7 +5,6 @@ import './components/divider/UDivider.js';
 import './components/drawer/UDrawer.js';
 import './components/form/UForm.js';
 import './components/icon/UIcon.js';
-import './components/icon-button/UIconButton.js';
 import './components/input/UInput.js';
 import './components/menu/UMenu.js';
 import './components/menu-item/UMenuItem.js';
@@ -14,12 +13,14 @@ import './components/progress-ring/UProgressRing.js';
 import './components/skeleton/USkeleton.js';
 import './components/spinner/USpinner.js';
 import './components/split-panel/USplitPanel.js';
+import './components/tag/UTag.js';
 import './components/tooltip/UTooltip.js';
 import './components/tree/UTree.js';
 import './components/tree-item/UTreeItem.js';
 export { BrowserStorage } from './utilities/BrowserStorage.js';
-export { notifier } from './utilities/notifier.js';
-export { theme } from './utilities/theme.js';
+export { IconRegistry, getDefaultBaseUrl, setDefaultBaseUrl } from './utilities/IconRegistry.js';
+export { Notifier } from './utilities/Notifier.js';
+export { Theme } from './utilities/Theme.js';
 export { UAlert } from './components/alert/UAlert.component.js';
 export { UButton } from './components/button/UButton.component.js';
 export { UDialog } from './components/dialog/UDialog.component.js';
@@ -27,7 +28,6 @@ export { UDivider } from './components/divider/UDivider.component.js';
 export { UDrawer } from './components/drawer/UDrawer.component.js';
 export { UForm } from './components/form/UForm.component.js';
 export { UIcon } from './components/icon/UIcon.component.js';
-export { UIconButton } from './components/icon-button/UIconButton.component.js';
 export { UInput } from './components/input/UInput.component.js';
 export { UMenu } from './components/menu/UMenu.component.js';
 export { UMenuItem } from './components/menu-item/UMenuItem.component.js';
@@ -36,6 +36,7 @@ export { UProgressRing } from './components/progress-ring/UProgressRing.componen
 export { USkeleton } from './components/skeleton/USkeleton.component.js';
 export { USpinner } from './components/spinner/USpinner.component.js';
 export { USplitPanel } from './components/split-panel/USplitPanel.component.js';
+export { UTag } from './components/tag/UTag.component.js';
 export { UTooltip } from './components/tooltip/UTooltip.component.js';
 export { UTree } from './components/tree/UTree.component.js';
 export { UTreeItem } from './components/tree-item/UTreeItem.component.js';

package/dist/react-components/UTag.d.ts

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

package/dist/react-components/UTag.js

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

package/dist/react-components/index.d.ts

@@ -12,7 +12,6 @@ export { UDivider, UDividerProps } from './UDivider';
 export { UDrawer, UDrawerProps } from './UDrawer';
 export { UForm, UFormProps } from './UForm';
 export { UIcon, UIconProps } from './UIcon';
-export { UIconButton, UIconButtonProps } from './UIconButton';
 export { UInput, UInputProps } from './UInput';
 export { UMenu, UMenuProps } from './UMenu';
 export { UMenuItem, UMenuItemProps } from './UMenuItem';
@@ -21,6 +20,7 @@ export { UProgressRing, UProgressRingProps } from './UProgressRing';
 export { USkeleton, USkeletonProps } from './USkeleton';
 export { USpinner, USpinnerProps } from './USpinner';
 export { USplitPanel, USplitPanelProps } from './USplitPanel';
+export { UTag, UTagProps } from './UTag';
 export { UTooltip, UTooltipProps } from './UTooltip';
 export { UTree, UTreeProps } from './UTree';
 export { UTreeItem, UTreeItemProps } from './UTreeItem';

package/dist/react-components/index.js

@@ -5,7 +5,6 @@ export { UDivider } from './UDivider.js';
 export { UDrawer } from './UDrawer.js';
 export { UForm } from './UForm.js';
 export { UIcon } from './UIcon.js';
-export { UIconButton } from './UIconButton.js';
 export { UInput } from './UInput.js';
 export { UMenu } from './UMenu.js';
 export { UMenuItem } from './UMenuItem.js';
@@ -14,6 +13,7 @@ export { UProgressRing } from './UProgressRing.js';
 export { USkeleton } from './USkeleton.js';
 export { USpinner } from './USpinner.js';
 export { USplitPanel } from './USplitPanel.js';
+export { UTag } from './UTag.js';
 export { UTooltip } from './UTooltip.js';
 export { UTree } from './UTree.js';
 export { UTreeItem } from './UTreeItem.js';

package/dist/utilities/{icons.d.ts → IconRegistry.d.ts}

@@ -1,46 +1,40 @@
+/**
+ * `default` 라이브러리에서 아이콘을 로드할 때 사용할 기본 URL을 반환합니다.
+ */
+declare function getDefaultBaseUrl(): string;
+/**
+ * `default` 라이브러리에서 아이콘을 로드할 때 사용할 기본 URL을 설정합니다.
+ *
+ * @example
+ * - `/assets/icons/`
+ * - `https://cdn.example.com/icons/`
+ */
+declare function setDefaultBaseUrl(url: string): void;
 type IconResolver = (name: string) => string | undefined | Promise<string | undefined>;
 /**
- * 아이콘 레지스트리 클래스입니다.
+ * 아이콘 레지스트리입니다.
  * 아이콘 라이브러리를 등록하고, 아이콘을 조회하는 기능을 제공합니다.
  */
 declare class IconRegistry {
-    private static _instance;
-    private libs;
+    private static libs;
+    /** 클래스 생성 방지 */
     private constructor();
-    static get instance(): IconRegistry;
     /**
      * 지정된 아이콘 라이브러리가 등록되었는지 확인합니다.
      */
-    has(lib: string): boolean;
+    static has(lib: string): boolean;
     /**
      * 지정된 아이콘 라이브러리를 등록합니다.
      * 이미 등록된 라이브러리 이름인 경우, 경고 메시지를 출력합니다.
      */
-    register(lib: string, resolver: IconResolver): void;
+    static register(lib: string, resolver: IconResolver): void;
     /**
      * 지정된 아이콘 라이브러리를 등록 해제합니다.
      */
-    unregister(lib: string): void;
+    static unregister(lib: string): void;
     /**
      * 지정된 아이콘 라이브러리의 svg 아이콘 소스를 가져옵니다.
      */
-    resolve(lib: string, name: string): Promise<string | undefined>;
+    static resolve(lib: string, name: string): Promise<string | undefined>;
 }
-/**
- * 전역 아이콘 레지스트리 인스턴스에 접근합니다.
- * 기본 내장 아이콘 라이브러리가 포함되어 있습니다.
- */
-export declare const icons: IconRegistry;
-/**
- * `default` 라이브러리에서 아이콘을 로드할 때 사용할 기본 URL을 반환합니다.
- */
-export declare function getDefaultBaseUrl(): string;
-/**
- * `default` 라이브러리에서 아이콘을 로드할 때 사용할 기본 URL을 설정합니다.
- *
- * @example
- * - `/assets/icons/`
- * - `https://cdn.example.com/icons/`
- */
-export declare function setDefaultBaseUrl(url: string): void;
-export {};
+export { IconRegistry, getDefaultBaseUrl, setDefaultBaseUrl, };