@iyulab/components 0.1.4 → 0.1.6

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

@@ -3,32 +3,17 @@ import { css } from 'lit';
 const styles = css`
   :host {
     position: relative;
-    display: block;
+    display: flex;
     width: 100%;
     height: 100%;
     overflow: hidden;
-
-    --divider-size: 2px;
-    --divider-color: var(--u-neutral-200, #d1d5db);
-    --divider-handle-size: 4px;
-    --divider-handle-color: var(--u-blue-500, #3b82f6);
   }
   :host([orientation="horizontal"]) {
-    display: flex;
     flex-direction: row;
   }
   :host([orientation="vertical"]) {
-    display: flex;
     flex-direction: column;
   }
-
-  ::slotted(u-divider) {
-    background-color: var(--divider-color, var(--u-neutral-200, #d1d5db));
-
-    --divider-size: var(--divider-size, 2px);
-    --handler-size: var(--divider-handle-size, 4px);
-    --handler-color: var(--divider-handle-color, var(--u-blue-500, #3b82f6));
-  }
 `;
 
 export { styles };

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.d.ts

@@ -1,40 +1,20 @@
 import { PropertyValues } from 'lit';
-import { Placement } from '@floating-ui/dom';
 import { BaseElement } from '../BaseElement.js';
+import { FloatingElement } from '../FloatingElement.js';
 /**
  * Tooltip 컴포넌트는 대상 엘리먼트에 툴팁을 표시하는 기능을 제공합니다.
  */
-export declare class Tooltip extends BaseElement {
+export declare class Tooltip extends FloatingElement {
     static styles: import('lit').CSSResultGroup[];
     static dependencies: Record<string, typeof BaseElement>;
-    /** 툴팁이 연결될 대상 엘리먼트입니다. 지정하지 않으면 부모 엘리먼트가 대상이 됩니다. */
-    triggers: HTMLElement[];
-    /** 트리거 셀렉터 문자열입니다. 이 속성을 사용하여 트리거 엘리먼트를 지정할 수 있습니다. */
-    triggerSelectors?: string;
-    /** 'fixed' 위치에서 포지션을 계산할지 여부를 설정합니다. 기본값은 false입니다. */
-    hoist: boolean;
-    /** 툴팁이 나타날 위치를 설정합니다. */
-    placement?: Placement;
-    /** 툴팁의 위치에서 대상 엘리먼트까지의 거리를 픽셀단위로 설정합니다. 기본값은 8입니다. */
-    distance: number;
-    /** 툴팁의 표시 딜레이 시간을 밀리초 단위로 설정합니다. 기본값은 0입니다. */
-    delay: number;
-    constructor();
-    connectedCallback(): void;
     disconnectedCallback(): void;
-    protected willUpdate(changedProperties: PropertyValues): void;
     protected updated(changedProperties: PropertyValues): void;
     render(): import('lit-html').TemplateResult<1>;
-    /** 툴팁을 표시합니다. */
-    show: (event: Event) => Promise<void>;
-    /** 툴팁을 숨깁니다. */
-    hide: (event: Event) => Promise<void>;
-    /** 대상 엘리먼트에 툴팁 이벤트를 바인딩 합니다. */
-    private attachTriggers;
-    /** 대상 엘리먼트에 바인딩된 툴팁 이벤트를 제거합니다. */
-    private detachTriggers;
-    /**
-     * 툴팁이 나타날 위치에 따라 transform-origin 값을 반환합니다.
-     */
-    private getTransformOrigin;
+    /** 바인딩 이벤트 핸들러 */
+    private _show;
+    private _hide;
+    /** 대상 엘리먼트에 트리거 이벤트를 바인딩합니다. */
+    private attachAnchor;
+    /** 바인딩된 트리거 이벤트를 제거합니다. */
+    private detachAnchor;
 }

package/dist/components/tooltip/Tooltip.js

@@ -1,70 +1,13 @@
 import { html } from 'lit';
-import { property } from 'lit/decorators.js';
-import { offset, shift, flip, autoPlacement, computePosition } from '@floating-ui/dom';
-import { getParentElement, findElementsBy } from '../../internals/node-helpers.js';
-import { BaseElement } from '../BaseElement.js';
+import { FloatingElement } from '../FloatingElement.js';
 import { styles } from './Tooltip.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 Tooltip extends BaseElement {
+class Tooltip extends FloatingElement {
   constructor() {
-    super();
-    this.triggers = [];
-    this.hoist = false;
-    this.distance = 8;
-    this.delay = 0;
-    /** 툴팁을 표시합니다. */
-    this.show = async (event) => {
-      await this.updateComplete;
-      const trigger = event?.currentTarget;
-      if (trigger instanceof HTMLElement === false) {
-        return;
-      }
-      const middleware = [
-        offset({ mainAxis: this.distance }),
-        shift(),
-        flip()
-      ];
-      if (!this.placement) {
-        middleware.push(autoPlacement());
-      }
-      const position = await computePosition(trigger, this, {
-        strategy: this.hoist ? "fixed" : "absolute",
-        placement: this.placement,
-        middleware
-      });
-      Object.assign(this.style, {
-        left: `${position.x}px`,
-        top: `${position.y}px`,
-        transformOrigin: this.getTransformOrigin(position.placement)
-      });
-      if (this.delay > 0) {
-        await new Promise((resolve) => setTimeout(resolve, this.delay));
-      }
-      requestAnimationFrame(() => {
-        this.setAttribute("open", "");
-      });
-    };
-    /** 툴팁을 숨깁니다. */
-    this.hide = async (event) => {
-      await this.updateComplete;
-      if ("relatedTarget" in event) {
-        const relatedTarget = event["relatedTarget"];
-        if (this.contains(relatedTarget)) {
-          return;
-        }
-      }
-      this.removeAttribute("open");
-    };
-    this.setAttribute("tabindex", "0");
+    super(...arguments);
+    /** 바인딩 이벤트 핸들러 */
+    this._show = () => this.show();
+    this._hide = () => this.hide();
   }
   static {
     this.styles = [super.styles, styles];
@@ -72,101 +15,36 @@ class Tooltip extends BaseElement {
   static {
     this.dependencies = {};
   }
-  connectedCallback() {
-    super.connectedCallback();
-    if (this.triggers.length === 0) {
-      const parent = getParentElement(this);
-      if (parent) this.triggers = [parent];
-    }
-    this.addEventListener("mouseleave", this.hide);
-    this.addEventListener("focusout", this.hide);
-  }
   disconnectedCallback() {
-    this.detachTriggers(this.triggers);
+    this.detachAnchor(this.anchor);
     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")) {
-      const oldTriggers = changedProperties.get("triggers");
-      this.detachTriggers(oldTriggers);
-      this.attachTriggers(this.triggers);
+    if (changedProperties.has("anchor")) {
+      this.detachAnchor(changedProperties.get("anchor"));
+      this.attachAnchor(this.anchor);
     }
   }
   render() {
-    return html`
-      <slot></slot>
-    `;
-  }
-  /** 대상 엘리먼트에 툴팁 이벤트를 바인딩 합니다. */
-  attachTriggers(triggers) {
-    if (!triggers) return;
-    for (const trigger of triggers) {
-      trigger.addEventListener("mouseenter", this.show);
-      trigger.addEventListener("mouseleave", this.hide);
-      trigger.addEventListener("focusin", this.show);
-      trigger.addEventListener("focusout", this.hide);
-    }
-  }
-  /** 대상 엘리먼트에 바인딩된 툴팁 이벤트를 제거합니다. */
-  detachTriggers(triggers) {
-    if (!triggers) return;
-    for (const trigger of triggers) {
-      trigger.removeEventListener("mouseenter", this.show);
-      trigger.removeEventListener("mouseleave", this.hide);
-      trigger.removeEventListener("focusin", this.show);
-      trigger.removeEventListener("focusout", this.hide);
-    }
-  }
-  /**
-   * 툴팁이 나타날 위치에 따라 transform-origin 값을 반환합니다.
-   */
-  getTransformOrigin(placement) {
-    switch (placement) {
-      case "top":
-      case "top-start":
-      case "top-end":
-        return "center bottom";
-      case "bottom":
-      case "bottom-start":
-      case "bottom-end":
-        return "center top";
-      case "left":
-      case "left-start":
-      case "left-end":
-        return "right center";
-      case "right":
-      case "right-start":
-      case "right-end":
-        return "left center";
-      default:
-        return "center";
-    }
+    return html`<slot></slot>`;
+  }
+  /** 대상 엘리먼트에 트리거 이벤트를 바인딩합니다. */
+  attachAnchor(target) {
+    if (!target) return;
+    target.addEventListener("pointerenter", this._show);
+    target.addEventListener("pointerleave", this._hide);
+    target.addEventListener("focusin", this._show);
+    target.addEventListener("focusout", this._hide);
+  }
+  /** 바인딩된 트리거 이벤트를 제거합니다. */
+  detachAnchor(target) {
+    if (!target) return;
+    target.removeEventListener("pointerenter", this._show);
+    target.removeEventListener("pointerleave", this._hide);
+    target.removeEventListener("focusin", this._show);
+    target.removeEventListener("focusout", this._hide);
   }
 }
-__decorateClass([
-  property({ attribute: false })
-], Tooltip.prototype, "triggers");
-__decorateClass([
-  property({ type: String, attribute: "trigger-selectors" })
-], Tooltip.prototype, "triggerSelectors");
-__decorateClass([
-  property({ type: Boolean, reflect: true })
-], Tooltip.prototype, "hoist");
-__decorateClass([
-  property({ type: String })
-], Tooltip.prototype, "placement");
-__decorateClass([
-  property({ type: Number })
-], Tooltip.prototype, "distance");
-__decorateClass([
-  property({ type: Number })
-], Tooltip.prototype, "delay");
 
 export { Tooltip };

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

@@ -2,34 +2,20 @@ import { css } from 'lit';
 
 const styles = css`
   :host {
-    position: absolute;
-    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);
-    font-size: 14px;
-    line-height: 1.5;
+    padding: 6px 8px;
+    color: var(--u-tooltip-txt-color);
+    font-family: var(--u-font-display, inherit);
+    font-size: 12px;
+    line-height: 1.25;
     border: none;
     border-radius: 4px;
     background-color: var(--u-tooltip-bg-color);
-    
-    opacity: 0;
-    pointer-events: none;
-    transform: scale(0);
-    transition: opacity 0.15s ease, transform 0.15s ease;
-  }
-  :host([hoist]) {
-    position: fixed;
+    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.2);
+    transform: scale(0.8);
+    transition: opacity 0.2s ease, transform 0.2s ease;
   }
-  :host([open]) {
-    opacity: 0.8;
+  :host([visible]) {
     transform: scale(1);
-    pointer-events: auto;
   }
 `;
 

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,14 +1,41 @@
+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/dropdown-menu/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/menu-item/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 { DropdownMenu } from './components/dropdown-menu/DropdownMenu.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 { MenuItem } from './components/menu-item/MenuItem.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 +43,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/UDropdownMenu.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import { DropdownMenu } from '../../components/dropdown-menu/index';
+
+export declare const UDropdownMenu: React.ForwardRefExoticComponent<
+  Partial<DropdownMenu> & React.HTMLAttributes<DropdownMenu>
+>;
+
+export type UDropdownMenuProps = React.ComponentProps<typeof UDropdownMenu>;

package/dist/integrations/react/UDropdownMenu.js

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

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

@@ -11,13 +11,13 @@ export { UContextMenu, UContextMenuProps } from './UContextMenu';
 export { UCopyButton, UCopyButtonProps } from './UCopyButton';
 export { UDialog, UDialogProps } from './UDialog';
 export { UDivider, UDividerProps } from './UDivider';
+export { UDropdownMenu, UDropdownMenuProps } from './UDropdownMenu';
 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';
-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

@@ -4,13 +4,13 @@ export { UContextMenu } from './UContextMenu.js';
 export { UCopyButton } from './UCopyButton.js';
 export { UDialog } from './UDialog.js';
 export { UDivider } from './UDivider.js';
+export { UDropdownMenu } from './UDropdownMenu.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';
-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/internals/node-helpers.d.ts

@@ -5,8 +5,13 @@
  * 찾을 수 없는 경우 undefined을 반환합니다.
  */
 export declare function getParentElement(element: Element): HTMLElement | undefined;
+/**
+ * element 기준으로 selector와 매치되는 첫번째 HTMLElement를 반환합니다.
+ * - 탐색은 element가 존재하는 shadow DOM 또는 document 루트 안에서 이루어집니다.
+ */
+export declare function querySelectorFrom(element: Element, selectors: string): HTMLElement | null;
 /**
  * element 기준으로 selector와 매치되는 모든 HTMLElement를 반환합니다.
  * - 탐색은 element가 존재하는 shadow DOM 또는 document 루트 안에서 이루어집니다.
  */
-export declare function findElementsBy(element: Element, selectors: string): HTMLElement[];
+export declare function querySelectorAllFrom(element: Element, selectors: string): HTMLElement[];

package/dist/internals/node-helpers.js

@@ -6,15 +6,14 @@ function getParentElement(element) {
     return root instanceof Document ? root.documentElement : root instanceof ShadowRoot ? root.host : root instanceof HTMLElement ? root : void 0;
   }
 }
-function findElementsBy(element, selectors) {
-  if (!selectors) return [];
+function querySelectorFrom(element, selectors) {
+  if (!selectors) return null;
   const rootNode = element.getRootNode({ composed: false });
   if (rootNode instanceof ShadowRoot || rootNode instanceof Document) {
-    const nodeList = rootNode.querySelectorAll(selectors);
-    return Array.from(nodeList);
+    return rootNode.querySelector(selectors);
   } else {
-    return [];
+    return null;
   }
 }
 
-export { findElementsBy, getParentElement };
+export { getParentElement, querySelectorFrom };

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 {};