@iyulab/components 0.1.2 → 0.1.4

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

@@ -0,0 +1,99 @@
+import { html } from 'lit';
+import { query, state, property } from 'lit/decorators.js';
+import { BaseElement } from '../BaseElement.js';
+import { styles } from './ProgressBar.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 ProgressBar extends BaseElement {
+  constructor() {
+    super(...arguments);
+    this.progressState = "turned-on";
+    this.progress = 0;
+    this.indeterminate = false;
+    this.minValue = 0;
+    this.maxValue = 100;
+    this.value = 0;
+  }
+  static {
+    this.styles = [super.styles, styles];
+  }
+  static {
+    this.dependencies = {};
+  }
+  willUpdate(changedProperties) {
+    super.willUpdate(changedProperties);
+    if (changedProperties.has("indeterminate")) {
+      this.progressState = this.indeterminate ? "indeterminate" : "turned-on";
+    }
+    if (changedProperties.has("minValue") || changedProperties.has("maxValue") || changedProperties.has("value")) {
+      this.updateProgress();
+    }
+  }
+  render() {
+    return html`
+      <div class="indicator" part="indicator"
+        state=${this.progressState}
+      ></div>
+      <div class="content" part="content">
+        <slot></slot>
+      </div>
+    `;
+  }
+  /** 내부 진행 상태 업데이트 */
+  async updateProgress() {
+    await this.updateComplete;
+    if (this.indeterminate) return;
+    const range = this.maxValue - this.minValue;
+    const clampedValue = Math.max(this.minValue, Math.min(this.maxValue, this.value));
+    const progress = range === 0 ? 0 : (clampedValue - this.minValue) / range;
+    if (isNaN(progress)) return;
+    if (this.progress <= 0 || progress < this.progress) {
+      this.progressState = "turned-on";
+      await this.updateComplete;
+      this.progressState = "determinate";
+    }
+    if (this.progressState === "determinate") {
+      this.indicatorEl.style.setProperty("--progress-value", progress.toString());
+    }
+    if (progress >= 1) {
+      setTimeout(() => {
+        this.progressState = "turned-off";
+        setTimeout(() => {
+          this.progressState = "turned-on";
+        }, 500);
+      }, 300);
+    }
+    this.progress = progress;
+  }
+}
+__decorateClass([
+  query(".indicator")
+], ProgressBar.prototype, "indicatorEl");
+__decorateClass([
+  state()
+], ProgressBar.prototype, "progressState");
+__decorateClass([
+  state()
+], ProgressBar.prototype, "progress");
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], ProgressBar.prototype, "indeterminate");
+__decorateClass([
+  property({ type: Number })
+], ProgressBar.prototype, "minValue");
+__decorateClass([
+  property({ type: Number })
+], ProgressBar.prototype, "maxValue");
+__decorateClass([
+  property({ type: Number })
+], ProgressBar.prototype, "value");
+
+export { ProgressBar };

package/dist/components/progress-bar/ProgressBar.styles.d.ts

@@ -0,0 +1 @@
+export declare const styles: import('lit').CSSResult;

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

@@ -0,0 +1,73 @@
+import { css } from 'lit';
+
+const styles = css`
+  :host {
+    position: relative;
+    display: block;
+    width: 100%;
+    height: 12px;
+    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;
+    will-change: transform, opacity;
+  }
+  .indicator[state="turned-on"] {
+    opacity: 0;
+    transform: scaleX(0);
+    transition: none;
+  }
+  .indicator[state="turned-off"] {
+    opacity: 0;
+    transform: scaleX(1);
+    transition: transform 0.3s ease, opacity 0.5s ease;
+  }
+  .indicator[state="determinate"] {
+    opacity: 1;
+    transform: scaleX(var(--progress-value));
+    transition: transform 0.3s ease;
+  }
+  .indicator[state="indeterminate"] {
+    opacity: 1;
+    transform: scaleX(1);
+    animation: indeterminate 1.5s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;
+  }
+
+  .content {
+    position: relative;
+    z-index: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 8px;
+    line-height: 12px;
+    color: var(--u-neutral-800);
+    white-space: nowrap;
+    user-select: none;
+    pointer-events: none;
+  }
+
+  @keyframes indeterminate {
+    0% {
+      transform: translateX(-100%);
+    }
+    100% {
+      transform: translateX(100%);
+    }
+  }
+`;
+
+export { styles };

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

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

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

@@ -21,7 +21,9 @@ export declare class ProgressRing extends BaseElement {
     value: number;
     protected willUpdate(changedProperties: PropertyValues): void;
     render(): import('lit-html').TemplateResult<1>;
-    /** 진행 상태를 0과 1 사이의 값으로 반환합니다. */
+    /**
+     * 진행 상태를 0과 1 사이의 값으로 반환합니다.
+     */
     private updateProgress;
     /**
      * variant에 따라 dasharray 값을 반환합니다.

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

@@ -32,10 +32,10 @@ class ProgressRing extends BaseElement {
   willUpdate(changedProperties) {
     super.willUpdate(changedProperties);
     if (changedProperties.has("variant")) {
-      this.dasharray = this.updateDashArray(this.variant);
+      this.updateDashArray();
     }
     if (changedProperties.has("minValue") || changedProperties.has("maxValue") || changedProperties.has("value")) {
-      this.progress = this.updateProgress(this.minValue, this.maxValue, this.value);
+      this.updateProgress();
     }
   }
   render() {
@@ -64,27 +64,30 @@ 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(min, max, val) {
-    min = Number(min ?? 0);
-    max = Number(max ?? 100);
-    val = Math.min(Math.max(Number(val ?? 0), min), max);
-    return max === min ? 0 : (val - min) / (max - min);
+  /** 
+   * 진행 상태를 0과 1 사이의 값으로 반환합니다. 
+   */
+  updateProgress() {
+    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;
   }
   /** 
    * variant에 따라 dasharray 값을 반환합니다. 
    * [dash-length] [gap-length] or [dash-length] 형식
    */
-  updateDashArray(variant) {
-    if (variant === "ticks") {
-      return "1 1";
-    } else if (variant === "blocks") {
-      return "8 2";
+  updateDashArray() {
+    if (this.variant === "ticks") {
+      this.dasharray = "1 1";
+    } else if (this.variant === "blocks") {
+      this.dasharray = "8 2";
     } else {
-      return PATH_LENGTH.toString();
+      this.dasharray = PATH_LENGTH.toString();
     }
   }
 }

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

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

@@ -2,8 +2,8 @@ import { html } from 'lit';
 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 { Splitter } from './Splitter.js';
 import { styles } from './SplitPanel.styles.js';
 
 var __defProp = Object.defineProperty;
@@ -19,14 +19,11 @@ 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 });
@@ -34,83 +31,61 @@ class SplitPanel extends BaseElement {
       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-drag", this.handleDividerDrag);
+        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.handleDividerDrag = (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 +93,12 @@ class SplitPanel extends BaseElement {
   }
   static {
     this.dependencies = {
-      "u-panel": Panel,
-      "u-splitter": Splitter
+      "u-divider": Divider,
+      "u-panel": Panel
     };
   }
   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 +106,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/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;
 }