@iyulab/components 0.1.3 → 0.1.5

package/dist/components/progress-bar/ProgressBar.styles.js

@@ -1,25 +1,25 @@
 import { css } from 'lit';
 
 const styles = css`
+  :host {
+    --progress-value: 0;
+  }
+
   :host {
     position: relative;
     display: block;
     width: 100%;
-    height: 12px;
+    height: 1em;
     border-radius: 9999px;
     background-color: var(--u-neutral-200);
     box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
     overflow: hidden;
-
-    --progress-value: 0;
   }
 
   .indicator {
     position: absolute;
     inset: 0 0 0 0;
     display: block;
-    width: 100%;
-    height: 100%;
     border-radius: inherit;
     background-color: var(--u-blue-600);
     transform-origin: left center;
@@ -47,14 +47,14 @@ const styles = css`
   }
 
   .content {
-    position: relative;
-    z-index: 1;
+    position: absolute;
+    z-index: 100;
     display: flex;
+    inset: 0 0 0 0;
     align-items: center;
     justify-content: center;
-    font-size: 8px;
-    line-height: 12px;
-    color: var(--u-neutral-800);
+    font-size: 0.5em;
+    line-height: 1em;
     white-space: nowrap;
     user-select: none;
     pointer-events: none;

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

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

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

@@ -9,8 +9,8 @@ export type ProgressRingVariant = 'smooth' | 'blocks' | 'ticks';
 export declare class ProgressRing extends BaseElement {
     static styles: import('lit').CSSResultGroup[];
     static dependencies: Record<string, typeof BaseElement>;
-    progress: number;
     dasharray: string;
+    progress: number;
     /** 진행 표시기의 스타일 변형을 설정합니다. */
     variant: ProgressRingVariant;
     /** 진행 표시기의 최소값을 설정합니다. */
@@ -24,7 +24,7 @@ export declare class ProgressRing extends BaseElement {
     /**
      * 진행 상태를 0과 1 사이의 값으로 반환합니다.
      */
-    private updateProgress;
+    private updateProgressState;
     /**
      * variant에 따라 dasharray 값을 반환합니다.
      * [dash-length] [gap-length] or [dash-length] 형식

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

@@ -16,8 +16,8 @@ const PATH_LENGTH = 100;
 class ProgressRing extends BaseElement {
   constructor() {
     super(...arguments);
-    this.progress = 0;
     this.dasharray = PATH_LENGTH.toString();
+    this.progress = 0;
     this.variant = "smooth";
     this.minValue = 0;
     this.maxValue = 100;
@@ -35,7 +35,7 @@ class ProgressRing extends BaseElement {
       this.updateDashArray();
     }
     if (changedProperties.has("minValue") || changedProperties.has("maxValue") || changedProperties.has("value")) {
-      this.updateProgress();
+      this.updateProgressState();
     }
   }
   render() {
@@ -48,6 +48,7 @@ class ProgressRing extends BaseElement {
               stroke="white"
               stroke-dasharray="${PATH_LENGTH}"
               stroke-dashoffset="${PATH_LENGTH * (1 - this.progress)}"
+              stroke-linecap=${this.variant === "smooth" ? "round" : "butt"}
             ></circle>
           </mask>
         </defs>
@@ -64,13 +65,15 @@ class ProgressRing extends BaseElement {
           mask="url(#progress-mask)"
         ></circle>
       </svg>
-      <div class="label" part="label">${Math.round(this.progress * 100)}%</div>
+      <div class="label" part="label">
+        ${Math.round(this.progress * 100)} %
+      </div>
     `;
   }
   /** 
    * 진행 상태를 0과 1 사이의 값으로 반환합니다. 
    */
-  updateProgress() {
+  updateProgressState() {
     const range = this.maxValue - this.minValue;
     const clampedValue = Math.max(this.minValue, Math.min(this.maxValue, this.value));
     this.progress = range === 0 ? 0 : (clampedValue - this.minValue) / range;
@@ -91,10 +94,10 @@ class ProgressRing extends BaseElement {
 }
 __decorateClass([
   state()
-], ProgressRing.prototype, "progress");
+], ProgressRing.prototype, "dasharray");
 __decorateClass([
   state()
-], ProgressRing.prototype, "dasharray");
+], ProgressRing.prototype, "progress");
 __decorateClass([
   property({ type: String, reflect: true })
 ], ProgressRing.prototype, "variant");

package/dist/components/progress-ring/ProgressRing.styles.js

@@ -2,20 +2,19 @@ import { css } from 'lit';
 
 const styles = css`
   :host {
-    position: relative;
-    display: inline-flex;
-    font-size: inherit;
-
     --track-width: 0.25em;
     --track-color: var(--u-neutral-200, #e5e7eb);
     --indicator-color: var(--u-blue-600, #3b82f6);
   }
-  /* smooth variant - 매끄러운 원형 */
-  :host([variant="smooth"]) .mask {
-    stroke-linecap: round;
+
+  :host {
+    position: relative;
+    display: inline-flex;
+    font-size: inherit;
   }
 
   .progress-ring {
+    position: relative;
     width: 6em;
     height: 6em;
     transform: rotate(-90deg); /* 0%가 위에서 시작하도록 회전 */
@@ -39,12 +38,12 @@ const styles = css`
   /* 라벨 중앙 숫자 */
   .label {
     position: absolute;
-    inset: 0;
+    inset: 0 0 0 0;
     display: flex;
     align-items: center;
     justify-content: center;
     font-weight: 600;
-    font-size: 1.1em;
+    font-size: 1em;
     color: var(--indicator-color);
     pointer-events: none;
   }

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

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

package/dist/components/spinner/Spinner.styles.js

@@ -2,14 +2,16 @@ import { css } from 'lit';
 
 const styles = css`
   :host {
-    display: inline-flex;
-    font-size: inherit;
-
     --track-width: 0.125em;
     --track-color: var(--u-neutral-200, #e5e7eb);
     --indicator-color: var(--u-neutral-800, #1f2937);
   }
 
+  :host {
+    display: inline-flex;
+    font-size: inherit;
+  }
+
   .spinner {
     flex: 1 1 auto;
     width: 1em;

package/dist/components/spinner/index.js

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

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

@@ -1,5 +1,4 @@
 import { BaseElement } from '../BaseElement.js';
-import { PanelOrientation } from './SplitPanel.types.js';
 /**
  * SplitPanel 컴포넌트는 화면을 여러 개의 패널로 분할하여 표시합니다.
  */
@@ -7,20 +6,17 @@ export declare class SplitPanel extends BaseElement {
     static styles: import('lit').CSSResultGroup[];
     static dependencies: Record<string, typeof BaseElement>;
     private panels;
-    private splitters;
-    private isDragging;
-    private currentSplitter;
-    private totalSize;
-    private startPosition;
-    private startRatio;
+    private dividers;
+    private panelSizes;
+    private panelAdjustSizes;
     /** 분할 방향을 설정합니다. 'horizontal'은 좌우 분할, 'vertical'은 상하 분할입니다. */
-    orientation: PanelOrientation;
+    orientation: 'horizontal' | 'vertical';
     /** 초기 패널 크기 비율을 설정합니다. (예: [30, 70]은 첫 번째 패널이 30%, 두 번째 패널이 70%를 차지) */
-    ratio: number[];
+    initialRatio: number[];
     disconnectedCallback(): void;
     render(): import('lit-html').TemplateResult<1>;
+    private getDividerSize;
     private handleSlotChange;
-    private handleMouseDown;
-    private handleMouseMove;
-    private handleMouseUp;
+    /** 디바이더 드래그 이벤트 핸들러 */
+    private handleDividerMove;
 }

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

@@ -2,8 +2,7 @@ import { html } from 'lit';
 import { property } from 'lit/decorators.js';
 import { arrayAttributeConverter } from '../../internals/attribute-converters.js';
 import { BaseElement } from '../BaseElement.js';
-import { Panel } from '../panel/Panel.js';
-import { Splitter } from './Splitter.js';
+import { Divider } from '../divider/Divider.js';
 import { styles } from './SplitPanel.styles.js';
 
 var __defProp = Object.defineProperty;
@@ -19,98 +18,73 @@ class SplitPanel extends BaseElement {
   constructor() {
     super(...arguments);
     this.panels = [];
-    this.splitters = [];
-    this.isDragging = false;
-    this.currentSplitter = null;
-    this.totalSize = 0;
-    this.startPosition = 0;
-    this.startRatio = [];
+    this.dividers = [];
+    this.panelSizes = [];
+    this.panelAdjustSizes = [];
     this.orientation = "horizontal";
-    this.ratio = [];
+    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;
       }
-      this.splitters.forEach((splitter) => splitter.remove());
-      this.splitters = [];
       this.panels = panels;
-      panels.forEach((panel, index) => {
-        if (index === panels.length - 1) {
-          return;
-        }
-        const splitter = new Splitter();
-        splitter.orientation = this.orientation;
-        splitter.addEventListener("mousedown", this.handleMouseDown);
-        this.splitters.push(splitter);
-        panel.after(splitter);
-      });
-      if (this.ratio.length === panels.length) {
-        const totalRatio = this.ratio.reduce((sum, r) => sum + r, 0);
-        panels.forEach((panel, i) => {
-          const panelRatio = this.ratio[i] / totalRatio * 100;
-          panel.style.flex = `${panelRatio} 1 0%`;
-        });
-        return;
+      this.dividers.forEach((divider) => divider.remove());
+      this.dividers = [];
+      if (this.initialRatio.length === panels.length) {
+        const totalRatio = this.initialRatio.reduce((sum, r) => sum + r, 0);
+        this.panelSizes = this.initialRatio.map((r) => r / totalRatio * 100);
       } else {
-        panels.forEach((panel) => {
-          panel.style.flex = `${100 / panels.length} 1 0%`;
-        });
+        const equalRatio = 100 / panels.length;
+        this.panelSizes = panels.map(() => equalRatio);
       }
+      this.panelAdjustSizes = panels.map(() => 0);
+      const property2 = this.orientation === "horizontal" ? "width" : "height";
+      const dividerSize = this.getDividerSize();
+      panels.forEach((panel, index) => {
+        const ratio = this.panelSizes[index];
+        panel.style.flex = "none";
+        panel.style[property2] = index === 0 || index === panels.length - 1 ? `calc(${ratio}% - ${dividerSize / 2}px)` : `calc(${ratio}% - ${dividerSize}px)`;
+        if (index === panels.length - 1) return;
+        const divider = new Divider();
+        divider.orientation = this.orientation;
+        divider.draggable = true;
+        divider.addEventListener("u-move", this.handleDividerMove);
+        this.dividers.push(divider);
+        panel.after(divider);
+      });
       this.requestUpdate();
       await this.updateComplete;
     };
-    this.handleMouseDown = (e) => {
-      e.preventDefault();
-      const splitter = e.currentTarget;
-      this.currentSplitter = splitter;
-      this.isDragging = true;
-      this.startPosition = this.orientation === "horizontal" ? e.clientX : e.clientY;
-      const containerRect = this.getBoundingClientRect();
-      const containerSize = this.orientation === "horizontal" ? containerRect.width : containerRect.height;
-      const splittersSize = this.splitters.reduce((sum, sp) => sum + sp.size, 0);
-      this.totalSize = containerSize - splittersSize;
-      this.startRatio = this.panels.map((panel) => {
-        const rect = panel.getBoundingClientRect();
-        const size = this.orientation === "horizontal" ? rect.width : rect.height;
-        return size / this.totalSize * 100;
-      });
-      splitter.dragging = true;
-      document.addEventListener("mousemove", this.handleMouseMove);
-      document.addEventListener("mouseup", this.handleMouseUp);
-      document.body.style.userSelect = "none";
-      document.body.style.cursor = this.orientation === "horizontal" ? "col-resize" : "row-resize";
-    };
-    this.handleMouseMove = (e) => {
-      if (!this.isDragging || !this.currentSplitter) return;
-      e.preventDefault();
-      const currentPosition = this.orientation === "horizontal" ? e.clientX : e.clientY;
-      const deltaPixels = currentPosition - this.startPosition;
-      const splitterIndex = this.splitters.indexOf(this.currentSplitter);
-      if (splitterIndex === -1) return;
-      const prevPanel = this.panels[splitterIndex];
-      const nextPanel = this.panels[splitterIndex + 1];
-      if (!prevPanel || !nextPanel) return;
-      const deltaRatio = deltaPixels / this.totalSize * 100;
-      const prevRatio = this.startRatio[splitterIndex] + deltaRatio;
-      const nextRatio = this.startRatio[splitterIndex + 1] - deltaRatio;
-      if (prevRatio < 0 || nextRatio < 0) return;
-      prevPanel.style.flex = `${prevRatio} 1 0%`;
-      nextPanel.style.flex = `${nextRatio} 1 0%`;
-    };
-    this.handleMouseUp = (_e) => {
-      if (!this.isDragging) return;
-      this.isDragging = false;
-      if (this.currentSplitter) {
-        this.currentSplitter.dragging = false;
-        this.currentSplitter = null;
+    /** 디바이더 드래그 이벤트 핸들러 */
+    this.handleDividerMove = (event) => {
+      const divider = event.target;
+      const delta = event.detail.delta;
+      const index = this.dividers.indexOf(divider);
+      if (index === -1) return;
+      const prevPanel = this.panels[index];
+      const nextPanel = this.panels[index + 1];
+      const property2 = this.orientation === "horizontal" ? "width" : "height";
+      const prevPanelSize = this.panelSizes[index];
+      const nextPanelSize = this.panelSizes[index + 1];
+      const prevAdjSize = this.panelAdjustSizes[index] || 0;
+      const nextAdjSize = this.panelAdjustSizes[index + 1] || 0;
+      if (delta === 0) return;
+      if (delta > 0) {
+        const prevNewAdjSize = prevAdjSize + delta;
+        const nextNewAdjSize = nextAdjSize - delta;
+        this.panelAdjustSizes[index] = prevNewAdjSize;
+        this.panelAdjustSizes[index + 1] = nextNewAdjSize;
+      } else {
+        const prevNewAdjSize = prevAdjSize + delta;
+        const nextNewAdjSize = nextAdjSize - delta;
+        this.panelAdjustSizes[index] = prevNewAdjSize;
+        this.panelAdjustSizes[index + 1] = nextNewAdjSize;
       }
-      document.removeEventListener("mousemove", this.handleMouseMove);
-      document.removeEventListener("mouseup", this.handleMouseUp);
-      document.body.style.userSelect = "";
-      document.body.style.cursor = "";
+      prevPanel.style[property2] = `calc(${prevPanelSize}% - ${this.getDividerSize() / 2}px + ${this.panelAdjustSizes[index]}px)`;
+      nextPanel.style[property2] = `calc(${nextPanelSize}% - ${this.getDividerSize() / 2}px + ${this.panelAdjustSizes[index + 1]}px)`;
     };
   }
   static {
@@ -118,17 +92,11 @@ class SplitPanel extends BaseElement {
   }
   static {
     this.dependencies = {
-      "u-panel": Panel,
-      "u-splitter": Splitter
+      "u-divider": Divider
     };
   }
   disconnectedCallback() {
-    document.removeEventListener("mousemove", this.handleMouseMove);
-    document.removeEventListener("mouseup", this.handleMouseUp);
-    this.splitters.forEach((splitter) => {
-      splitter.removeEventListener("mousedown", this.handleMouseDown);
-      splitter.remove();
-    });
+    this.dividers.forEach((divider) => divider.remove());
     super.disconnectedCallback();
   }
   render() {
@@ -136,12 +104,17 @@ class SplitPanel extends BaseElement {
       <slot @slotchange=${this.handleSlotChange}></slot>
     `;
   }
+  // Get divider size from CSS variable
+  getDividerSize() {
+    const sizeStr = getComputedStyle(this).getPropertyValue("--divider-size").trim();
+    return parseFloat(sizeStr) || 2;
+  }
 }
 __decorateClass([
   property({ type: String, reflect: true })
 ], SplitPanel.prototype, "orientation");
 __decorateClass([
-  property({ type: Array, converter: arrayAttributeConverter(parseFloat) })
-], SplitPanel.prototype, "ratio");
+  property({ type: Array, attribute: "initial-ratio", converter: arrayAttributeConverter(parseFloat) })
+], SplitPanel.prototype, "initialRatio");
 
 export { SplitPanel };

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

@@ -3,17 +3,32 @@ import { css } from 'lit';
 const styles = css`
   :host {
     position: relative;
-    display: flex;
+    display: block;
     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

@@ -7,38 +7,34 @@ import { BaseElement } from '../BaseElement.js';
 export declare class Tooltip extends BaseElement {
     static styles: import('lit').CSSResultGroup[];
     static dependencies: Record<string, typeof BaseElement>;
-    /** 슬롯이 비어있는지 여부를 나타냅니다. */
-    private isSlotEmpty;
     /** 툴팁이 연결될 대상 엘리먼트입니다. 지정하지 않으면 부모 엘리먼트가 대상이 됩니다. */
     triggers: HTMLElement[];
     /** 트리거 셀렉터 문자열입니다. 이 속성을 사용하여 트리거 엘리먼트를 지정할 수 있습니다. */
     triggerSelectors?: string;
-    /** 현재 툴팁이 열려있는지 여부를 나타냅니다. */
-    open: boolean;
     /** '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: (e?: Event) => Promise<void>;
+    show: (event: Event) => Promise<void>;
     /** 툴팁을 숨깁니다. */
-    hide: (_: Event) => Promise<void>;
+    hide: (event: Event) => Promise<void>;
     /** 대상 엘리먼트에 툴팁 이벤트를 바인딩 합니다. */
     private attachTriggers;
     /** 대상 엘리먼트에 바인딩된 툴팁 이벤트를 제거합니다. */
     private detachTriggers;
     /**
-   * 툴팁이 나타날 위치에 따라 transform-origin 값을 반환합니다.
-   */
-    private getTransformOrigin;
-    /**
-     * slot에 콘텐츠가 존재하는지 확인합니다.
+     * 툴팁이 나타날 위치에 따라 transform-origin 값을 반환합니다.
      */
-    private handleSlotChange;
+    private getTransformOrigin;
 }