@iyulab/components 0.1.7 → 0.1.8

package/dist/components/progress-bar/{ProgressBar.js → UProgressBar.component.js}

@@ -1,7 +1,7 @@
 import { html } from 'lit';
 import { query, state, property } from 'lit/decorators.js';
 import { BaseElement } from '../BaseElement.js';
-import { styles } from './ProgressBar.styles.js';
+import { styles } from './UProgressBar.styles.js';
 
 var __defProp = Object.defineProperty;
 var __decorateClass = (decorators, target, key, kind) => {
@@ -12,7 +12,7 @@ var __decorateClass = (decorators, target, key, kind) => {
   if (result) __defProp(target, key, result);
   return result;
 };
-class ProgressBar extends BaseElement {
+class UProgressBar extends BaseElement {
   constructor() {
     super(...arguments);
     this.progressState = "turned-on";
@@ -76,24 +76,24 @@ class ProgressBar extends BaseElement {
 }
 __decorateClass([
   query(".indicator")
-], ProgressBar.prototype, "indicatorEl");
+], UProgressBar.prototype, "indicatorEl");
 __decorateClass([
   state()
-], ProgressBar.prototype, "progressState");
+], UProgressBar.prototype, "progressState");
 __decorateClass([
   state()
-], ProgressBar.prototype, "progress");
+], UProgressBar.prototype, "progress");
 __decorateClass([
   property({ type: Boolean, reflect: true })
-], ProgressBar.prototype, "indeterminate");
+], UProgressBar.prototype, "indeterminate");
 __decorateClass([
   property({ type: Number })
-], ProgressBar.prototype, "minValue");
+], UProgressBar.prototype, "minValue");
 __decorateClass([
   property({ type: Number })
-], ProgressBar.prototype, "maxValue");
+], UProgressBar.prototype, "maxValue");
 __decorateClass([
   property({ type: Number })
-], ProgressBar.prototype, "value");
+], UProgressBar.prototype, "value");
 
-export { ProgressBar };
+export { UProgressBar };

package/dist/components/progress-bar/UProgressBar.d.ts

@@ -0,0 +1,7 @@
+import { UProgressBar } from './UProgressBar.component.js';
+declare global {
+    interface HTMLElementTagNameMap {
+        'u-progress-bar': UProgressBar;
+    }
+}
+export { UProgressBar };

package/dist/components/progress-bar/UProgressBar.js

@@ -0,0 +1,5 @@
+import { UProgressBar } from './UProgressBar.component.js';
+
+UProgressBar.define("u-progress-bar");
+
+export { UProgressBar };

package/dist/components/progress-ring/{ProgressRing.d.ts → UProgressRing.component.d.ts}

@@ -6,7 +6,7 @@ export type ProgressRingVariant = 'smooth' | 'blocks' | 'ticks';
  * ProgressRing 컴포넌트는 원형 진행 표시기를 제공합니다.
  * 진행 상태를 시각적으로 나타내며, 크기와 두께를 스타일 속성으로 조절할 수 있습니다.
  */
-export declare class ProgressRing extends BaseElement {
+export declare class UProgressRing extends BaseElement {
     static styles: import('lit').CSSResultGroup[];
     static dependencies: Record<string, typeof BaseElement>;
     dasharray: string;

package/dist/components/progress-ring/{ProgressRing.js → UProgressRing.component.js}

@@ -1,7 +1,7 @@
 import { html } from 'lit';
 import { state, property } from 'lit/decorators.js';
 import { BaseElement } from '../BaseElement.js';
-import { styles } from './ProgressRing.styles.js';
+import { styles } from './UProgressRing.styles.js';
 
 var __defProp = Object.defineProperty;
 var __decorateClass = (decorators, target, key, kind) => {
@@ -13,7 +13,7 @@ var __decorateClass = (decorators, target, key, kind) => {
   return result;
 };
 const PATH_LENGTH = 100;
-class ProgressRing extends BaseElement {
+class UProgressRing extends BaseElement {
   constructor() {
     super(...arguments);
     this.dasharray = PATH_LENGTH.toString();
@@ -94,21 +94,21 @@ class ProgressRing extends BaseElement {
 }
 __decorateClass([
   state()
-], ProgressRing.prototype, "dasharray");
+], UProgressRing.prototype, "dasharray");
 __decorateClass([
   state()
-], ProgressRing.prototype, "progress");
+], UProgressRing.prototype, "progress");
 __decorateClass([
   property({ type: String, reflect: true })
-], ProgressRing.prototype, "variant");
+], UProgressRing.prototype, "variant");
 __decorateClass([
   property({ type: Number })
-], ProgressRing.prototype, "minValue");
+], UProgressRing.prototype, "minValue");
 __decorateClass([
   property({ type: Number })
-], ProgressRing.prototype, "maxValue");
+], UProgressRing.prototype, "maxValue");
 __decorateClass([
   property({ type: Number })
-], ProgressRing.prototype, "value");
+], UProgressRing.prototype, "value");
 
-export { ProgressRing };
+export { UProgressRing };

package/dist/components/progress-ring/UProgressRing.d.ts

@@ -0,0 +1,8 @@
+import { UProgressRing } from './UProgressRing.component.js';
+declare global {
+    interface HTMLElementTagNameMap {
+        'u-progress-ring': UProgressRing;
+    }
+}
+export { UProgressRing };
+export type { ProgressRingVariant } from './UProgressRing.component.js';

package/dist/components/progress-ring/UProgressRing.js

@@ -0,0 +1,5 @@
+import { UProgressRing } from './UProgressRing.component.js';
+
+UProgressRing.define("u-progress-ring");
+
+export { UProgressRing };

package/dist/components/skeleton/USkeleton.component.d.ts

@@ -0,0 +1,22 @@
+import { PropertyValues } from 'lit';
+import { BaseElement } from '../BaseElement.js';
+export type SkeletonShape = 'default' | 'circle' | 'rounded';
+export type SkeletonEffect = 'pulse' | 'shimmer' | 'none';
+/**
+ * 콘텐츠가 로딩 중임을 나타내는 Skeleton 컴포넌트입니다.
+ * 다양한 모양과 애니메이션 효과를 지원합니다.
+ */
+export declare class USkeleton extends BaseElement {
+    static styles: import('lit').CSSResultGroup[];
+    static dependencies: Record<string, typeof BaseElement>;
+    /** 모양 (default, circle, rounded) */
+    shape: SkeletonShape;
+    /** 애니메이션 효과 (pulse, shimmer, none) */
+    effect: SkeletonEffect;
+    /** 스켈레톤의 너비 (CSS 값) */
+    width?: string;
+    /** 스켈레톤의 높이 (CSS 값) */
+    height?: string;
+    protected updated(changedProperties: PropertyValues): void;
+    render(): import('lit-html').TemplateResult<1>;
+}

package/dist/components/skeleton/USkeleton.component.js

@@ -0,0 +1,58 @@
+import { html } from 'lit';
+import { property } from 'lit/decorators.js';
+import { BaseElement } from '../BaseElement.js';
+import { styles } from './USkeleton.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 USkeleton extends BaseElement {
+  constructor() {
+    super(...arguments);
+    this.shape = "default";
+    this.effect = "pulse";
+  }
+  static {
+    this.styles = [super.styles, styles];
+  }
+  static {
+    this.dependencies = {};
+  }
+  updated(changedProperties) {
+    super.updated(changedProperties);
+    if (changedProperties.has("width") && this.width) {
+      this.style.setProperty("--skeleton-width", this.width);
+    }
+    if (changedProperties.has("height") && this.height) {
+      this.style.setProperty("--skeleton-height", this.height);
+    }
+  }
+  render() {
+    return html`
+      <div class="skeleton" part="base"
+        shape=${this.shape}
+        effect=${this.effect}
+      ></div>
+    `;
+  }
+}
+__decorateClass([
+  property({ type: String, reflect: true })
+], USkeleton.prototype, "shape");
+__decorateClass([
+  property({ type: String, reflect: true })
+], USkeleton.prototype, "effect");
+__decorateClass([
+  property({ type: String })
+], USkeleton.prototype, "width");
+__decorateClass([
+  property({ type: String })
+], USkeleton.prototype, "height");
+
+export { USkeleton };

package/dist/components/skeleton/USkeleton.d.ts

@@ -0,0 +1,8 @@
+import { USkeleton } from './USkeleton.component.js';
+declare global {
+    interface HTMLElementTagNameMap {
+        'u-skeleton': USkeleton;
+    }
+}
+export { USkeleton };
+export type { SkeletonShape, SkeletonEffect } from './USkeleton.component.js';

package/dist/components/skeleton/USkeleton.js

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

package/dist/components/skeleton/USkeleton.styles.js

@@ -0,0 +1,74 @@
+import { css } from 'lit';
+
+const styles = css`
+  :host {
+    --skeleton-width: 100%;
+    --skeleton-height: 1em;
+    --skeleton-color: var(--u-neutral-200, #e5e5e5);
+    --skeleton-shimmer-color: var(--u-neutral-100, #f5f5f5);
+  }
+
+  :host {
+    display: inline-block;
+    width: var(--skeleton-width);
+    height: var(--skeleton-height);
+  }
+
+  .skeleton {
+    width: 100%;
+    height: 100%;
+    background-color: var(--skeleton-color);
+    border-radius: 4px;
+    animation: none;
+  }
+  
+  /* 모양 설정 */
+  .skeleton[shape="circle"] {
+    border-radius: 50%;
+  }
+  .skeleton[shape="rounded"] {
+    border-radius: 9999px;
+  }
+
+  /* 애니메이션 효과 설정 */
+  .skeleton[effect="pulse"] {
+    animation: pulse 1.5s ease-in-out infinite;
+  }
+  .skeleton[effect="shimmer"] {
+    position: relative;
+    overflow: hidden;
+  }
+  .skeleton[effect="shimmer"]::after {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: linear-gradient(
+      90deg,
+      transparent,
+      var(--skeleton-shimmer-color),
+      transparent
+    );
+    animation: shimmer 1.5s infinite;
+    transform: translateX(-100%);
+  }
+
+  @keyframes pulse {
+    0%, 100% {
+      opacity: 1;
+    }
+    50% {
+      opacity: 0.4;
+    }
+  }
+
+  @keyframes shimmer {
+    100% {
+      transform: translateX(100%);
+    }
+  }
+`;
+
+export { styles };

package/dist/components/spinner/{Spinner.d.ts → USpinner.component.d.ts}

@@ -2,7 +2,7 @@ import { BaseElement } from '../BaseElement.js';
 /**
  * Spinner 컴포넌트는 로딩 상태를 시각적으로 표시하는 회전하는 원형 스피너를 제공합니다.
  */
-export declare class Spinner extends BaseElement {
+export declare class USpinner extends BaseElement {
     static styles: import('lit').CSSResultGroup[];
     static dependencies: Record<string, typeof BaseElement>;
     render(): import('lit-html').TemplateResult<1>;

package/dist/components/spinner/{Spinner.js → USpinner.component.js}

@@ -1,8 +1,8 @@
 import { html } from 'lit';
 import { BaseElement } from '../BaseElement.js';
-import { styles } from './Spinner.styles.js';
+import { styles } from './USpinner.styles.js';
 
-class Spinner extends BaseElement {
+class USpinner extends BaseElement {
   static {
     this.styles = [super.styles, styles];
   }
@@ -19,4 +19,4 @@ class Spinner extends BaseElement {
   }
 }
 
-export { Spinner };
+export { USpinner };

package/dist/components/spinner/USpinner.d.ts

@@ -0,0 +1,7 @@
+import { USpinner } from './USpinner.component.js';
+declare global {
+    interface HTMLElementTagNameMap {
+        'u-spinner': USpinner;
+    }
+}
+export { USpinner };

package/dist/components/spinner/USpinner.js

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

package/dist/components/split-panel/{SplitPanel.d.ts → USplitPanel.component.d.ts}

@@ -3,7 +3,7 @@ import { BaseElement } from '../BaseElement.js';
 /**
  * SplitPanel 컴포넌트는 화면을 여러 개의 패널로 분할하여 표시합니다.
  */
-export declare class SplitPanel extends BaseElement {
+export declare class USplitPanel extends BaseElement {
     static styles: import('lit').CSSResultGroup[];
     static dependencies: Record<string, typeof BaseElement>;
     private panels;

package/dist/components/split-panel/{SplitPanel.js → USplitPanel.component.js}

@@ -2,8 +2,8 @@ import { html } from 'lit';
 import { queryAssignedElements, property } from 'lit/decorators.js';
 import { arrayAttributeConverter } from '../../internals/attribute-converters.js';
 import { BaseElement } from '../BaseElement.js';
-import { Divider } from '../divider/Divider.js';
-import { styles } from './SplitPanel.styles.js';
+import { UDivider } from '../divider/UDivider.component.js';
+import { styles } from './USplitPanel.styles.js';
 
 var __defProp = Object.defineProperty;
 var __decorateClass = (decorators, target, key, kind) => {
@@ -14,7 +14,7 @@ var __decorateClass = (decorators, target, key, kind) => {
   if (result) __defProp(target, key, result);
   return result;
 };
-class SplitPanel extends BaseElement {
+class USplitPanel extends BaseElement {
   constructor() {
     super(...arguments);
     this.panels = [];
@@ -27,7 +27,7 @@ class SplitPanel extends BaseElement {
     this.maxSizes = [];
     // 초기화 메서드
     this.initialize = async () => {
-      this.panels = this.childElements.filter((el) => el instanceof Divider === false);
+      this.panels = this.childElements.filter((el) => el instanceof UDivider === false);
       this.dividers.forEach((divider) => divider.remove());
       this.dividers = [];
       if (this.initRatio.length === this.panels.length) {
@@ -45,7 +45,7 @@ class SplitPanel extends BaseElement {
         panel.style.flex = "none";
         panel.style[property2] = index === 0 || index === this.panels.length - 1 ? `calc(${ratio}% - ${dividerSize / 2}px)` : `calc(${ratio}% - ${dividerSize}px)`;
         if (index === this.panels.length - 1) return;
-        const divider = new Divider();
+        const divider = new UDivider();
         divider.orientation = this.orientation;
         divider.movable = true;
         divider.addEventListener("u-move", this.handleDividerMove);
@@ -56,7 +56,7 @@ class SplitPanel extends BaseElement {
       await this.updateComplete;
     };
     this.handleSlotChange = async () => {
-      const panels = this.childElements.filter((el) => el instanceof Divider === false);
+      const panels = this.childElements.filter((el) => el instanceof UDivider === false);
       if (panels.every((p, i) => p === this.panels[i])) {
         return;
       }
@@ -96,7 +96,7 @@ class SplitPanel extends BaseElement {
   }
   static {
     this.dependencies = {
-      "u-divider": Divider
+      "u-divider": UDivider
     };
   }
   disconnectedCallback() {
@@ -122,18 +122,18 @@ class SplitPanel extends BaseElement {
 }
 __decorateClass([
   queryAssignedElements({ flatten: true })
-], SplitPanel.prototype, "childElements");
+], USplitPanel.prototype, "childElements");
 __decorateClass([
   property({ type: String, reflect: true })
-], SplitPanel.prototype, "orientation");
+], USplitPanel.prototype, "orientation");
 __decorateClass([
   property({ type: Array, attribute: "init-ratio", converter: arrayAttributeConverter(parseFloat) })
-], SplitPanel.prototype, "initRatio");
+], USplitPanel.prototype, "initRatio");
 __decorateClass([
   property({ type: Array, attribute: "min-sizes", converter: arrayAttributeConverter(parseFloat) })
-], SplitPanel.prototype, "minSizes");
+], USplitPanel.prototype, "minSizes");
 __decorateClass([
   property({ type: Array, attribute: "max-sizes", converter: arrayAttributeConverter(parseFloat) })
-], SplitPanel.prototype, "maxSizes");
+], USplitPanel.prototype, "maxSizes");
 
-export { SplitPanel };
+export { USplitPanel };

package/dist/components/split-panel/USplitPanel.d.ts

@@ -0,0 +1,7 @@
+import { USplitPanel } from './USplitPanel.component.js';
+declare global {
+    interface HTMLElementTagNameMap {
+        'u-split-panel': USplitPanel;
+    }
+}
+export { USplitPanel };

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

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

package/dist/components/tooltip/{Tooltip.d.ts → UTooltip.component.d.ts}

@@ -4,17 +4,16 @@ import { FloatingElement } from '../FloatingElement.js';
 /**
  * Tooltip 컴포넌트는 대상 엘리먼트에 툴팁을 표시하는 기능을 제공합니다.
  */
-export declare class Tooltip extends FloatingElement {
+export declare class UTooltip extends FloatingElement {
     static styles: import('lit').CSSResultGroup[];
     static dependencies: Record<string, typeof BaseElement>;
-    disconnectedCallback(): void;
     protected updated(changedProperties: PropertyValues): void;
     render(): import('lit-html').TemplateResult<1>;
-    /** 바인딩 이벤트 핸들러 */
+    /** this 바인딩 이벤트 핸들러 */
     private _show;
     private _hide;
-    /** 대상 엘리먼트에 트리거 이벤트를 바인딩합니다. */
-    private attachAnchor;
-    /** 바인딩된 트리거 이벤트를 제거합니다. */
-    private detachAnchor;
+    /** 바인딩 이벤트 핸들러 */
+    private bind;
+    /** 바인딩 해제 이벤트 핸들러 */
+    private unbind;
 }

package/dist/components/tooltip/{Tooltip.js → UTooltip.component.js}

@@ -1,11 +1,11 @@
 import { html } from 'lit';
 import { FloatingElement } from '../FloatingElement.js';
-import { styles } from './Tooltip.styles.js';
+import { styles } from './UTooltip.styles.js';
 
-class Tooltip extends FloatingElement {
+class UTooltip extends FloatingElement {
   constructor() {
     super(...arguments);
-    /** 바인딩 이벤트 핸들러 */
+    /** this 바인딩 이벤트 핸들러 */
     this._show = () => this.show();
     this._hide = () => this.hide();
   }
@@ -15,31 +15,27 @@ class Tooltip extends FloatingElement {
   static {
     this.dependencies = {};
   }
-  disconnectedCallback() {
-    this.detachAnchor(this.anchor);
-    super.disconnectedCallback();
-  }
   updated(changedProperties) {
     super.updated(changedProperties);
     if (changedProperties.has("anchor")) {
-      this.detachAnchor(changedProperties.get("anchor"));
-      this.attachAnchor(this.anchor);
+      const oldAnchor = changedProperties.get("anchor");
+      const newAnchor = this.anchor;
+      if (oldAnchor) this.unbind(oldAnchor);
+      if (newAnchor) this.bind(newAnchor);
     }
   }
   render() {
     return html`<slot></slot>`;
   }
-  /** 대상 엘리먼트에 트리거 이벤트를 바인딩합니다. */
-  attachAnchor(target) {
-    if (!target) return;
+  /** 바인딩 이벤트 핸들러 */
+  bind(target) {
     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;
+  /** 바인딩 해제 이벤트 핸들러 */
+  unbind(target) {
     target.removeEventListener("pointerenter", this._show);
     target.removeEventListener("pointerleave", this._hide);
     target.removeEventListener("focusin", this._show);
@@ -47,4 +43,4 @@ class Tooltip extends FloatingElement {
   }
 }
 
-export { Tooltip };
+export { UTooltip };

package/dist/components/tooltip/UTooltip.d.ts

@@ -0,0 +1,7 @@
+import { UTooltip } from './UTooltip.component.js';
+declare global {
+    interface HTMLElementTagNameMap {
+        'u-tooltip': UTooltip;
+    }
+}
+export { UTooltip };

package/dist/components/tooltip/UTooltip.js

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

package/dist/components/tooltip/{Tooltip.styles.js → UTooltip.styles.js}

@@ -15,6 +15,7 @@ const styles = css`
     transition: opacity 0.2s ease, transform 0.2s ease;
   }
   :host([visible]) {
+    opacity: 0.8;
     transform: scale(1);
   }
 `;

package/dist/components/tree/{Tree.d.ts → UTree.component.d.ts}

@@ -1,14 +1,14 @@
 import { BaseElement } from '../BaseElement.js';
-import { TreeItem } from '../tree-item/TreeItem.js';
+import { UTreeItem } from '../tree-item/UTreeItem.component.js';
 /**
  * Tree 컴포넌트는 계층적 데이터 구조를 표시하는 트리 뷰를 제공합니다.
  * u-tree-item 컴포넌트를 자식으로 사용하여 중첩된 구조를 구성할 수 있습니다.
  */
-export declare class Tree extends BaseElement {
+export declare class UTree extends BaseElement {
     static styles: import('lit').CSSResultGroup[];
     static dependencies: Record<string, typeof BaseElement>;
     private selectedItems;
-    treeItems: TreeItem[];
+    treeItems: UTreeItem[];
     /** 트리가 비활성화 상태인지 여부입니다. */
     disabled: boolean;
     /** 다중 선택을 허용할지 여부입니다. */
@@ -25,7 +25,7 @@ export declare class Tree extends BaseElement {
     /**
      * 선택된 모든 항목을 반환합니다.
      */
-    getSelectedItems(): TreeItem[];
+    getSelectedItems(): UTreeItem[];
     /**
      * 모든 선택을 해제합니다.
      */

package/dist/components/tree/{Tree.js → UTree.component.js}

@@ -1,8 +1,8 @@
 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';
+import { UTreeItem } from '../tree-item/UTreeItem.component.js';
+import { styles } from './UTree.styles.js';
 
 var __defProp = Object.defineProperty;
 var __decorateClass = (decorators, target, key, kind) => {
@@ -13,7 +13,7 @@ var __decorateClass = (decorators, target, key, kind) => {
   if (result) __defProp(target, key, result);
   return result;
 };
-class Tree extends BaseElement {
+class UTree extends BaseElement {
   constructor() {
     super(...arguments);
     this.selectedItems = /* @__PURE__ */ new Set();
@@ -64,7 +64,7 @@ class Tree extends BaseElement {
   }
   static {
     this.dependencies = {
-      "u-tree-item": TreeItem
+      "u-tree-item": UTreeItem
     };
   }
   connectedCallback() {
@@ -106,7 +106,7 @@ class Tree extends BaseElement {
   getAllTreeItems(items = this.treeItems) {
     let allItems = [];
     items.forEach((item) => {
-      if (item instanceof TreeItem) {
+      if (item instanceof UTreeItem) {
         allItems.push(item);
         const childItems = this.getAllTreeItems(item.childrenItems);
         allItems = allItems.concat(childItems);
@@ -117,15 +117,15 @@ class Tree extends BaseElement {
 }
 __decorateClass([
   queryAssignedElements({ selector: "u-tree-item" })
-], Tree.prototype, "treeItems");
+], UTree.prototype, "treeItems");
 __decorateClass([
   property({ type: Boolean, reflect: true })
-], Tree.prototype, "disabled");
+], UTree.prototype, "disabled");
 __decorateClass([
   property({ type: Boolean })
-], Tree.prototype, "multiple");
+], UTree.prototype, "multiple");
 __decorateClass([
   property({ type: Boolean })
-], Tree.prototype, "selectable");
+], UTree.prototype, "selectable");
 
-export { Tree };
+export { UTree };