@iyulab/components 0.1.4 → 0.1.5

package/dist/components/split-panel/SplitPanel.js

@@ -3,7 +3,6 @@ import { property } from 'lit/decorators.js';
 import { arrayAttributeConverter } from '../../internals/attribute-converters.js';
 import { BaseElement } from '../BaseElement.js';
 import { Divider } from '../divider/Divider.js';
-import { Panel } from '../panel/Panel.js';
 import { styles } from './SplitPanel.styles.js';
 
 var __defProp = Object.defineProperty;
@@ -26,8 +25,8 @@ class SplitPanel extends BaseElement {
     this.initialRatio = [];
     this.handleSlotChange = async (e) => {
       const slot = e.target;
-      const childrens = slot.assignedElements({ flatten: true });
-      const panels = childrens.filter((el) => el instanceof Panel);
+      const children = slot.assignedElements({ flatten: true });
+      const panels = children.filter((el) => el instanceof HTMLElement);
       if (this.panels.length === panels.length && this.panels.every((p, i) => p === panels[i])) {
         return;
       }
@@ -52,7 +51,7 @@ class SplitPanel extends BaseElement {
         const divider = new Divider();
         divider.orientation = this.orientation;
         divider.draggable = true;
-        divider.addEventListener("u-drag", this.handleDividerDrag);
+        divider.addEventListener("u-move", this.handleDividerMove);
         this.dividers.push(divider);
         panel.after(divider);
       });
@@ -60,7 +59,7 @@ class SplitPanel extends BaseElement {
       await this.updateComplete;
     };
     /** 디바이더 드래그 이벤트 핸들러 */
-    this.handleDividerDrag = (event) => {
+    this.handleDividerMove = (event) => {
       const divider = event.target;
       const delta = event.detail.delta;
       const index = this.dividers.indexOf(divider);
@@ -93,8 +92,7 @@ class SplitPanel extends BaseElement {
   }
   static {
     this.dependencies = {
-      "u-divider": Divider,
-      "u-panel": Panel
+      "u-divider": Divider
     };
   }
   disconnectedCallback() {

package/dist/components/split-panel/index.js

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

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

@@ -10,7 +10,7 @@ const styles = css`
     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;

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/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/index.js

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

package/dist/index.js

@@ -1,6 +1,30 @@
+import './components/alert/index.js';
+import './components/button/index.js';
+import './components/context-menu/index.js';
+import './components/copy-button/index.js';
+import './components/dialog/index.js';
+import './components/divider/index.js';
+import './components/form/index.js';
+import './components/icon/index.js';
+import './components/icon-button/index.js';
+import './components/input/index.js';
+import './components/menu/index.js';
+import './components/progress-bar/index.js';
+import './components/progress-ring/index.js';
+import './components/spinner/index.js';
+import './components/split-panel/index.js';
+import './components/tooltip/index.js';
+import './components/tree/index.js';
+import './components/tree-item/index.js';
+export { BrowserStorage } from './utilities/BrowserStorage.js';
+export { getPropertyMeta, propertyMeta, setPropertyMeta } from './utilities/decorators.js';
+export { getDefaultBaseUrl, icons, setDefaultBaseUrl } from './utilities/icons.js';
+export { notifier } from './utilities/notifier.js';
+export { theme } from './utilities/theme.js';
 export { Alert } from './components/alert/Alert.js';
 export { Button } from './components/button/Button.js';
 export { ContextMenu } from './components/context-menu/ContextMenu.js';
+export { CopyButton } from './components/copy-button/CopyButton.js';
 export { Dialog } from './components/dialog/Dialog.js';
 export { Divider } from './components/divider/Divider.js';
 export { Form } from './components/form/Form.js';
@@ -8,7 +32,6 @@ 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';
@@ -16,7 +39,3 @@ 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';
-export { Theme, theme } from './utilities/theme.js';

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

@@ -17,7 +17,6 @@ export { UIconButton, UIconButtonProps } from './UIconButton';
 export { UInput, UInputProps } from './UInput';
 export { UMenu, UMenuProps } from './UMenu';
 export { UMenuItem, UMenuItemProps } from './UMenuItem';
-export { UPanel, UPanelProps } from './UPanel';
 export { UProgressBar, UProgressBarProps } from './UProgressBar';
 export { UProgressRing, UProgressRingProps } from './UProgressRing';
 export { USpinner, USpinnerProps } from './USpinner';

package/dist/integrations/react/index.js

@@ -10,7 +10,6 @@ export { UIconButton } from './UIconButton.js';
 export { UInput } from './UInput.js';
 export { UMenu } from './UMenu.js';
 export { UMenuItem } from './UMenuItem.js';
-export { UPanel } from './UPanel.js';
 export { UProgressBar } from './UProgressBar.js';
 export { UProgressRing } from './UProgressRing.js';
 export { USpinner } from './USpinner.js';

package/dist/internals/index.d.ts

@@ -1,4 +1,3 @@
 export * from './attribute-converters.js';
-export * from './icon-helpers.js';
 export * from './node-helpers.js';
 export * from './react-wrapper.js';

package/dist/utilities/decorators.js

@@ -1,3 +1,5 @@
+import 'reflect-metadata';
+
 const propertyMetaKey = Symbol("propertyMeta");
 function propertyMeta(metadata) {
   return (target, propertyKey) => {

package/dist/utilities/icons.d.ts

@@ -0,0 +1,46 @@
+type IconResolver = (name: string) => string | undefined | Promise<string | undefined>;
+/**
+ * 아이콘 레지스트리 클래스입니다.
+ * 아이콘 라이브러리를 등록하고, 아이콘을 조회하는 기능을 제공합니다.
+ */
+declare class IconRegistry {
+    private static _instance;
+    private libs;
+    private constructor();
+    static get instance(): IconRegistry;
+    /**
+     * 지정된 아이콘 라이브러리가 등록되었는지 확인합니다.
+     */
+    has(lib: string): boolean;
+    /**
+     * 지정된 아이콘 라이브러리를 등록합니다.
+     * 이미 등록된 라이브러리 이름인 경우, 경고 메시지를 출력합니다.
+     */
+    register(lib: string, resolver: IconResolver): void;
+    /**
+     * 지정된 아이콘 라이브러리를 등록 해제합니다.
+     */
+    unregister(lib: string): void;
+    /**
+     * 지정된 아이콘 라이브러리의 svg 아이콘 소스를 가져옵니다.
+     */
+    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 {};

package/dist/utilities/icons.js

@@ -0,0 +1,114 @@
+import * as arrowClockwise from '../assets/icons/arrow-clockwise.svg.js';
+import * as arrowDown from '../assets/icons/arrow-down.svg.js';
+import * as arrowUp from '../assets/icons/arrow-up.svg.js';
+import * as ban from '../assets/icons/ban.svg.js';
+import * as bellFill from '../assets/icons/bell-fill.svg.js';
+import * as checkCircleFill from '../assets/icons/check-circle-fill.svg.js';
+import * as checkLg from '../assets/icons/check-lg.svg.js';
+import * as chevronDown from '../assets/icons/chevron-down.svg.js';
+import * as chevronLeft from '../assets/icons/chevron-left.svg.js';
+import * as chevronRight from '../assets/icons/chevron-right.svg.js';
+import * as chevronUp from '../assets/icons/chevron-up.svg.js';
+import * as copy from '../assets/icons/copy.svg.js';
+import * as dashLg from '../assets/icons/dash-lg.svg.js';
+import * as exclamationCircleFill from '../assets/icons/exclamation-circle-fill.svg.js';
+import * as exclamationTriangleFill from '../assets/icons/exclamation-triangle-fill.svg.js';
+import * as eyeSlash from '../assets/icons/eye-slash.svg.js';
+import * as eye from '../assets/icons/eye.svg.js';
+import * as infoCircleFill from '../assets/icons/info-circle-fill.svg.js';
+import * as layoutSidebar from '../assets/icons/layout-sidebar.svg.js';
+import * as lightbulbFill from '../assets/icons/lightbulb-fill.svg.js';
+import * as lightbulbOff from '../assets/icons/lightbulb-off.svg.js';
+import * as lightbulb from '../assets/icons/lightbulb.svg.js';
+import * as micFill from '../assets/icons/mic-fill.svg.js';
+import * as micMuteFill from '../assets/icons/mic-mute-fill.svg.js';
+import * as paperclip from '../assets/icons/paperclip.svg.js';
+import * as pencilSquare from '../assets/icons/pencil-square.svg.js';
+import * as plusLg from '../assets/icons/plus-lg.svg.js';
+import * as search from '../assets/icons/search.svg.js';
+import * as speedometer from '../assets/icons/speedometer.svg.js';
+import * as xLg from '../assets/icons/x-lg.svg.js';
+
+let defaultIconBaseUrl = "/assets/icons/";
+const defaultIconCache = /* @__PURE__ */ new Map();
+const internalIconBundle = new Map(
+  Object.entries(/* #__PURE__ */ Object.assign({"../assets/icons/arrow-clockwise.svg": arrowClockwise,"../assets/icons/arrow-down.svg": arrowDown,"../assets/icons/arrow-up.svg": arrowUp,"../assets/icons/ban.svg": ban,"../assets/icons/bell-fill.svg": bellFill,"../assets/icons/check-circle-fill.svg": checkCircleFill,"../assets/icons/check-lg.svg": checkLg,"../assets/icons/chevron-down.svg": chevronDown,"../assets/icons/chevron-left.svg": chevronLeft,"../assets/icons/chevron-right.svg": chevronRight,"../assets/icons/chevron-up.svg": chevronUp,"../assets/icons/copy.svg": copy,"../assets/icons/dash-lg.svg": dashLg,"../assets/icons/exclamation-circle-fill.svg": exclamationCircleFill,"../assets/icons/exclamation-triangle-fill.svg": exclamationTriangleFill,"../assets/icons/eye-slash.svg": eyeSlash,"../assets/icons/eye.svg": eye,"../assets/icons/info-circle-fill.svg": infoCircleFill,"../assets/icons/layout-sidebar.svg": layoutSidebar,"../assets/icons/lightbulb-fill.svg": lightbulbFill,"../assets/icons/lightbulb-off.svg": lightbulbOff,"../assets/icons/lightbulb.svg": lightbulb,"../assets/icons/mic-fill.svg": micFill,"../assets/icons/mic-mute-fill.svg": micMuteFill,"../assets/icons/paperclip.svg": paperclip,"../assets/icons/pencil-square.svg": pencilSquare,"../assets/icons/plus-lg.svg": plusLg,"../assets/icons/search.svg": search,"../assets/icons/speedometer.svg": speedometer,"../assets/icons/x-lg.svg": xLg
+
+
+})).map(([path, module]) => {
+    const name = path.split("/").pop()?.replace(".svg", "") || "";
+    return [name, module.default];
+  }).filter(([name]) => name !== "")
+);
+class IconRegistry {
+  constructor() {
+    this.libs = /* @__PURE__ */ new Map();
+  }
+  static get instance() {
+    if (!this._instance) {
+      this._instance = new IconRegistry();
+    }
+    return this._instance;
+  }
+  /**
+   * 지정된 아이콘 라이브러리가 등록되었는지 확인합니다.
+   */
+  has(lib) {
+    return this.libs.has(lib);
+  }
+  /**
+   * 지정된 아이콘 라이브러리를 등록합니다.
+   * 이미 등록된 라이브러리 이름인 경우, 경고 메시지를 출력합니다.
+   */
+  register(lib, resolver) {
+    if (this.libs.has(lib)) {
+      console.warn(`Icon library "${lib}" is already registered`);
+    } else {
+      this.libs.set(lib, resolver);
+    }
+  }
+  /**
+   * 지정된 아이콘 라이브러리를 등록 해제합니다.
+   */
+  unregister(lib) {
+    this.libs.delete(lib);
+  }
+  /**
+   * 지정된 아이콘 라이브러리의 svg 아이콘 소스를 가져옵니다.
+   */
+  async resolve(lib, name) {
+    const resolver = this.libs.get(lib);
+    if (!resolver) return void 0;
+    const svg = await resolver(name);
+    return svg?.trim();
+  }
+}
+IconRegistry.instance.register("internal", (name) => {
+  return internalIconBundle.get(name);
+});
+IconRegistry.instance.register("default", async (name) => {
+  if (defaultIconCache.has(name)) {
+    return defaultIconCache.get(name);
+  }
+  const baseUrl = getDefaultBaseUrl();
+  const remoteUrl = baseUrl.endsWith("/") ? `${baseUrl}${name}.svg` : `${baseUrl}/${name}.svg`;
+  try {
+    const response = await fetch(remoteUrl);
+    if (!response.ok) return void 0;
+    const svg = await response.text();
+    defaultIconCache.set(name, svg);
+    return svg;
+  } catch (error) {
+    console.error(error);
+    return void 0;
+  }
+});
+const icons = IconRegistry.instance;
+function getDefaultBaseUrl() {
+  return defaultIconBaseUrl;
+}
+function setDefaultBaseUrl(url) {
+  defaultIconBaseUrl = url;
+}
+
+export { getDefaultBaseUrl, icons, setDefaultBaseUrl };

package/dist/utilities/index.d.ts

@@ -1,4 +1,5 @@
 export * from './BrowserStorage.js';
 export * from './decorators';
+export * from './icons.js';
 export * from './notifier.js';
 export * from './theme.js';

package/dist/utilities/notifier.d.ts

@@ -1,11 +1,11 @@
-import { Alert, AlertType } from '../components/alert/Alert.js';
+import { AlertType } from '../components/alert/Alert.js';
 export type ScreenPosition = "top-left" | "top-center" | "top-right" | "middle-left" | "middle-center" | "middle-right" | "bottom-left" | "bottom-center" | "bottom-right";
 /** 토스트 알림 옵션 */
 export interface ToastOptions {
     /** 알림 유형 */
     type: AlertType;
     /** 알림 제목 */
-    label?: string;
+    heading?: string;
     /** 알림 내용 */
     content?: string;
     /** 알림 표시 시간 (밀리초 단위) */
@@ -14,13 +14,23 @@ export interface ToastOptions {
     position?: ScreenPosition;
 }
 /**
- * notifier 객체 여러 위치에 알림을 표시하는 유틸리티입니다.
+ * Notifier 클래스 — 싱글톤 패턴으로 사용합니다.
  */
-export declare const notifier: {
-    container: Map<ScreenPosition, HTMLDivElement>;
-    toasts: Set<Alert>;
+declare class Notifier {
+    private static _instance;
+    private containers;
+    private toasts;
+    private constructor();
+    static get instance(): Notifier;
     /**
      * 토스트 알림을 생성합니다.
      */
     toast(options: ToastOptions): Promise<void>;
-};
+    /** 위치에 맞는 컨테이너 엘리먼트를 가져오거나, 생성합니다. */
+    private getOrCreateContainer;
+}
+/**
+ * 알림 유틸리티 싱글톤 인스턴스입니다.
+ */
+export declare const notifier: Notifier;
+export {};

package/dist/utilities/notifier.js

@@ -1,20 +1,28 @@
 import { Alert } from '../components/alert/Alert.js';
 
 Alert.define("u-alert");
-const notifier = {
-  container: /* @__PURE__ */ new Map(),
-  toasts: /* @__PURE__ */ new Set(),
+class Notifier {
+  constructor() {
+    this.containers = /* @__PURE__ */ new Map();
+    this.toasts = /* @__PURE__ */ new Set();
+  }
+  static get instance() {
+    if (!this._instance) {
+      this._instance = new Notifier();
+    }
+    return this._instance;
+  }
   /**
    * 토스트 알림을 생성합니다.
    */
   async toast(options) {
     const el = new Alert();
     el.type = options.type;
-    el.label = options.label;
+    el.heading = options.heading;
     el.content = options.content;
     this.toasts.add(el);
     const position = options.position || "top-right";
-    const container = getOrCreateContainer(position);
+    const container = this.getOrCreateContainer(position);
     container.appendChild(el);
     await el.updateComplete;
     el.show();
@@ -26,46 +34,48 @@ const notifier = {
       this.toasts.delete(el);
       if (!container.hasChildNodes()) {
         container.remove();
-        this.container.delete(position);
+        this.containers.delete(position);
       }
     }, duration);
   }
-};
-function getOrCreateContainer(position) {
-  let container = notifier.container.get(position);
-  if (container) return container;
-  container = document.createElement("div");
-  container.style.position = "fixed";
-  container.style.zIndex = "9999";
-  container.style.display = "flex";
-  container.style.gap = "10px";
-  const transformParts = [];
-  if (position.startsWith("top")) {
-    container.style.top = "20px";
-    container.style.flexDirection = "column";
-  } else if (position.startsWith("bottom")) {
-    container.style.bottom = "20px";
-    container.style.flexDirection = "column-reverse";
-  } else {
-    container.style.top = "50%";
-    container.style.flexDirection = "column";
-    transformParts.push("translateY(-50%)");
-  }
-  if (position.endsWith("left")) {
-    container.style.left = "20px";
-    container.style.alignItems = "flex-start";
-  } else if (position.endsWith("right")) {
-    container.style.right = "20px";
-    container.style.alignItems = "flex-end";
-  } else {
-    container.style.left = "50%";
-    container.style.alignItems = "center";
-    transformParts.unshift("translateX(-50%)");
+  /** 위치에 맞는 컨테이너 엘리먼트를 가져오거나, 생성합니다. */
+  getOrCreateContainer(position) {
+    let container = this.containers.get(position);
+    if (container) return container;
+    container = document.createElement("div");
+    container.style.position = "fixed";
+    container.style.zIndex = "9999";
+    container.style.display = "flex";
+    container.style.gap = "10px";
+    const transformParts = [];
+    if (position.startsWith("top")) {
+      container.style.top = "20px";
+      container.style.flexDirection = "column";
+    } else if (position.startsWith("bottom")) {
+      container.style.bottom = "20px";
+      container.style.flexDirection = "column-reverse";
+    } else {
+      container.style.top = "50%";
+      container.style.flexDirection = "column";
+      transformParts.push("translateY(-50%)");
+    }
+    if (position.endsWith("left")) {
+      container.style.left = "20px";
+      container.style.alignItems = "flex-start";
+    } else if (position.endsWith("right")) {
+      container.style.right = "20px";
+      container.style.alignItems = "flex-end";
+    } else {
+      container.style.left = "50%";
+      container.style.alignItems = "center";
+      transformParts.unshift("translateX(-50%)");
+    }
+    container.style.transform = transformParts.length ? transformParts.join(" ") : "";
+    document.body.appendChild(container);
+    this.containers.set(position, container);
+    return container;
   }
-  container.style.transform = transformParts.length ? transformParts.join(" ") : "";
-  document.body.appendChild(container);
-  notifier.container.set(position, container);
-  return container;
 }
+const notifier = Notifier.instance;
 
 export { notifier };

package/dist/utilities/theme.d.ts

@@ -8,11 +8,6 @@ export interface ThemeInitOptions {
      * @default false
      */
     debug?: boolean;
-    /**
-     * 내부적으로 제공되는 스타일 시트를 사용할지 여부
-     * @default true
-     */
-    useBuiltIn?: boolean;
     /**
      * 테마 설정을 브라우저 스토리지에 영구 저장할지 여부 또는 옵션
      * @default false
@@ -23,24 +18,27 @@ export interface ThemeInitOptions {
      * @default 'system'
      */
     default?: ThemeType;
+    /**
+     * 내부적으로 제공되는 스타일 시트를 사용할지 여부
+     * @default true
+     */
+    useBuiltIn?: boolean;
 }
 /**
- * Theme 클래스 — 싱글톤 패턴으로 사용합니다.
+ * 현재 문서에 테마를 적용하고 관리하는 유틸리티 클래스입니다.
  */
-export declare class Theme {
+declare class Theme {
     private static _instance;
-    private readonly STORAGE_KEY_DEFAULT;
+    private readonly STORAGE_THEME_KEY;
     private storage;
     private _isInitialized;
     private _isDebugMode;
-    /** private 생성자 — 외부에서 new Theme()를 할 수 없게 함 */
     private constructor();
-    /** 싱글톤 인스턴스 접근자 */
     static get instance(): Theme;
-    /** 외부에서 현재 초기화 상태를 확인할 수 있게 getter 제공 */
     get isInitialized(): boolean;
+    get isDebugMode(): boolean;
     /**
-     * 테마 유틸리티 초기화
+     * 테마 유틸리티를 초기화합니다.
      */
     init(options?: ThemeInitOptions): Promise<void>;
     /**
@@ -48,19 +46,16 @@ export declare class Theme {
      */
     get(): ThemeType | undefined;
     /**
-     * 현재 문서 테마를 설정합니다.
+     * 현재 문서에 적용할 테마를 설정합니다.
      */
     set(theme: ThemeType): void;
-    /**
-     * 시스템 테마 변경을 처리하는 메서드
-     */
+    /** 시스템 테마 변경을 처리하는 메서드 */
     private handleSystemThemeChanged;
-    /**
-     * 디버그 모드시 로그 출력 함수 (인스턴스 스코프)
-     */
+    /** 디버그 모드시 로그 출력 함수 (인스턴스 스코프) */
     private log;
 }
 /**
- * 테마 유틸리티 싱글톤 인스턴스입니다.
+ * 테마 유틸리티의 싱글톤 인스턴스입니다.
  */
 export declare const theme: Theme;
+export {};