@iyulab/components 0.1.10 → 0.2.0

package/dist/components/menu-item/UMenuItem.styles.js

@@ -22,7 +22,7 @@ const styles = css`
     pointer-events: none;
     cursor: not-allowed;
   }
-  :host(:not([disabled])[selected]) {
+  :host([selected]) {
     color: var(--selected-color);
     background-color: var(--selected-bg-color);
   }
@@ -31,9 +31,9 @@ const styles = css`
     background-color: var(--u-bg-color-hover);
   }
 
-  /* 콘텐츠 영역 */
-  .content {
-    flex: 1 0 auto;
+  /* 라벨 영역 */
+  .label {
+    flex: 1 1 auto;
     font-size: 1em;
     line-height: 1.5;
     overflow: hidden;

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

@@ -6,11 +6,17 @@ import { BaseElement } from '../BaseElement.js';
 export declare class USplitPanel extends BaseElement {
     static styles: import('lit').CSSResultGroup[];
     static dependencies: Record<string, typeof BaseElement>;
+    /** 현재 상태를 저장하는 패널 요소들 */
     private panels;
-    private dividers;
-    private panelSizes;
-    private panelAdjustSizes;
-    childElements: HTMLElement[];
+    private sizes;
+    /** 드래그 시작 시 저장되는 정보 */
+    private draggingIndex;
+    private dragStartSizes;
+    private dragStartPosition;
+    private containerSize;
+    slotEls?: HTMLElement[];
+    /** 스플리터 개수 (렌더링용) */
+    splitterCount: number;
     /** 분할 방향을 설정합니다. 'horizontal'은 좌우 분할, 'vertical'은 상하 분할입니다. */
     orientation: 'horizontal' | 'vertical';
     /** 초기 패널 크기 비율을 설정합니다. (예: [30, 70]은 첫 번째 패널이 30%, 두 번째 패널이 70%를 차지) */
@@ -22,9 +28,17 @@ export declare class USplitPanel extends BaseElement {
     disconnectedCallback(): void;
     protected willUpdate(changedProperties: PropertyValues): void;
     render(): import('lit-html').TemplateResult<1>;
-    private initialize;
+    /** 슬롯 변경시 패널 초기화 */
     private handleSlotChange;
-    /** 디바이더 드래그 이벤트 핸들러 */
-    private handleDividerMove;
-    private getDividerSize;
+    /** 패널 및 크기 초기화 */
+    private initialize;
+    /** 패널에 새로운 스타일 적용 */
+    private updatePanelStyles;
+    private handleSplitterMouseDown;
+    private handleDocumentMouseMove;
+    private handleDocumentMouseUp;
+    /** 전역 이벤트 리스너 제거 */
+    private removeEventListeners;
+    /** 거터 크기 가져오기 */
+    private getGutterSize;
 }

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

@@ -1,8 +1,7 @@
 import { html } from 'lit';
-import { queryAssignedElements, property } from 'lit/decorators.js';
-import { arrayAttributeConverter } from '../../internals/attribute-converters.js';
+import { queryAssignedElements, state, property } from 'lit/decorators.js';
+import { arrayAttrConverter } from '../../utilities/converters.js';
 import { BaseElement } from '../BaseElement.js';
-import { UDivider } from '../divider/UDivider.component.js';
 import { styles } from './USplitPanel.styles.js';
 
 var __defProp = Object.defineProperty;
@@ -17,90 +16,113 @@ var __decorateClass = (decorators, target, key, kind) => {
 class USplitPanel extends BaseElement {
   constructor() {
     super(...arguments);
+    /** 현재 상태를 저장하는 패널 요소들 */
     this.panels = [];
-    this.dividers = [];
-    this.panelSizes = [];
-    this.panelAdjustSizes = [];
+    this.sizes = [];
+    /** 드래그 시작 시 저장되는 정보 */
+    this.draggingIndex = -1;
+    this.dragStartSizes = [];
+    this.dragStartPosition = 0;
+    this.containerSize = 0;
+    this.splitterCount = 0;
     this.orientation = "horizontal";
     this.initRatio = [];
     this.minSizes = [];
     this.maxSizes = [];
-    // 초기화 메서드
-    this.initialize = async () => {
-      this.panels = this.childElements.filter((el) => el instanceof UDivider === false);
-      this.dividers.forEach((divider) => divider.remove());
-      this.dividers = [];
+    /** 슬롯 변경시 패널 초기화 */
+    this.handleSlotChange = () => {
+      const panels = this.slotEls || [];
+      if (panels.every((p, i) => p === this.panels[i])) {
+        return;
+      }
+      this.initialize();
+    };
+    /** 패널 및 크기 초기화 */
+    this.initialize = () => {
+      this.panels = this.slotEls || [];
+      if (this.panels.length === 0) {
+        this.splitterCount = 0;
+        return;
+      }
+      this.splitterCount = Math.max(0, this.panels.length - 1);
       if (this.initRatio.length === this.panels.length) {
-        const totalRatio = this.initRatio.reduce((sum, r) => sum + r, 0);
-        this.panelSizes = this.initRatio.map((r) => r / totalRatio * 100);
+        const total = this.initRatio.reduce((sum, r) => sum + r, 0);
+        this.sizes = this.initRatio.map((r) => r / total * 100);
       } else {
-        const equalRatio = 100 / this.panels.length;
-        this.panelSizes = this.panels.map(() => equalRatio);
+        const equalSize = 100 / this.panels.length;
+        this.sizes = this.panels.map(() => equalSize);
       }
-      this.panelAdjustSizes = this.panels.map(() => 0);
-      const property2 = this.orientation === "horizontal" ? "width" : "height";
-      const dividerSize = this.getDividerSize();
-      this.panels.forEach((panel, index) => {
-        const ratio = this.panelSizes[index];
-        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 UDivider();
-        divider.orientation = this.orientation;
-        divider.movable = true;
-        divider.addEventListener("u-move", this.handleDividerMove);
-        this.dividers.push(divider);
-        panel.after(divider);
-      });
+      this.updatePanelStyles();
       this.requestUpdate();
-      await this.updateComplete;
     };
-    this.handleSlotChange = async () => {
-      const panels = this.childElements.filter((el) => el instanceof UDivider === false);
-      if (panels.every((p, i) => p === this.panels[i])) {
-        return;
-      }
-      await this.initialize();
+    this.handleSplitterMouseDown = (e, index) => {
+      if (e.button !== 0) return;
+      e.preventDefault();
+      this.draggingIndex = index;
+      this.dragStartPosition = this.orientation === "horizontal" ? e.clientX : e.clientY;
+      this.dragStartSizes = [...this.sizes];
+      const rect = this.getBoundingClientRect();
+      this.containerSize = this.orientation === "horizontal" ? rect.width : rect.height;
+      this.containerSize -= this.getGutterSize() * this.splitterCount;
+      const splitters = this.shadowRoot?.querySelectorAll(".splitter");
+      splitters?.[index]?.classList.add("active");
+      document.addEventListener("mousemove", this.handleDocumentMouseMove);
+      document.addEventListener("mouseup", this.handleDocumentMouseUp);
+      document.body.style.userSelect = "none";
+      document.body.style.cursor = this.orientation === "horizontal" ? "col-resize" : "row-resize";
     };
-    /** 디바이더 드래그 이벤트 핸들러 */
-    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;
+    this.handleDocumentMouseMove = (e) => {
+      if (this.draggingIndex === -1) return;
+      e.preventDefault();
+      const currentPosition = this.orientation === "horizontal" ? e.clientX : e.clientY;
+      const delta = currentPosition - this.dragStartPosition;
+      const deltaPercent = delta / this.containerSize * 100;
+      const aIndex = this.draggingIndex;
+      const bIndex = this.draggingIndex + 1;
+      let newASize = this.dragStartSizes[aIndex] + deltaPercent;
+      let newBSize = this.dragStartSizes[bIndex] - deltaPercent;
+      const minAPercent = (this.minSizes[aIndex] ?? 0) / this.containerSize * 100;
+      const minBPercent = (this.minSizes[bIndex] ?? 0) / this.containerSize * 100;
+      const maxAPercent = this.maxSizes[aIndex] ? this.maxSizes[aIndex] / this.containerSize * 100 : 100;
+      const maxBPercent = this.maxSizes[bIndex] ? this.maxSizes[bIndex] / this.containerSize * 100 : 100;
+      if (newASize < minAPercent) {
+        newASize = minAPercent;
+        newBSize = this.dragStartSizes[aIndex] + this.dragStartSizes[bIndex] - newASize;
+      }
+      if (newBSize < minBPercent) {
+        newBSize = minBPercent;
+        newASize = this.dragStartSizes[aIndex] + this.dragStartSizes[bIndex] - newBSize;
+      }
+      if (newASize > maxAPercent) {
+        newASize = maxAPercent;
+        newBSize = this.dragStartSizes[aIndex] + this.dragStartSizes[bIndex] - newASize;
       }
-      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)`;
+      if (newBSize > maxBPercent) {
+        newBSize = maxBPercent;
+        newASize = this.dragStartSizes[aIndex] + this.dragStartSizes[bIndex] - newBSize;
+      }
+      this.sizes[aIndex] = newASize;
+      this.sizes[bIndex] = newBSize;
+      this.updatePanelStyles();
+    };
+    this.handleDocumentMouseUp = () => {
+      if (this.draggingIndex === -1) return;
+      const splitters = this.shadowRoot?.querySelectorAll(".splitter");
+      splitters?.[this.draggingIndex]?.classList.remove("active");
+      this.draggingIndex = -1;
+      this.removeEventListeners();
+      document.body.style.userSelect = "";
+      document.body.style.cursor = "";
     };
   }
   static {
     this.styles = [super.styles, styles];
   }
   static {
-    this.dependencies = {
-      "u-divider": UDivider
-    };
+    this.dependencies = {};
   }
   disconnectedCallback() {
-    this.dividers.forEach((divider) => divider.remove());
+    this.removeEventListeners();
     super.disconnectedCallback();
   }
   willUpdate(changedProperties) {
@@ -111,29 +133,53 @@ class USplitPanel extends BaseElement {
   }
   render() {
     return html`
+      ${Array.from({ length: this.splitterCount }, (_, i) => html`
+        <div class="splitter" style="order: ${i * 2 + 1}"
+          orientation=${this.orientation}
+          @mousedown=${(e) => this.handleSplitterMouseDown(e, i)}>
+        </div>
+      `)}
       <slot @slotchange=${this.handleSlotChange}></slot>
     `;
   }
-  // Get divider size from CSS variable
-  getDividerSize() {
-    const sizeStr = getComputedStyle(this).getPropertyValue("--divider-size").trim();
-    return parseFloat(sizeStr) || 2;
+  /** 패널에 새로운 스타일 적용 */
+  updatePanelStyles() {
+    const dimension = this.orientation === "horizontal" ? "width" : "height";
+    const gutterSize = this.getGutterSize();
+    this.panels.forEach((panel, index) => {
+      const size = this.sizes[index];
+      panel.style[dimension] = `calc(${size}% - ${gutterSize * (this.splitterCount / this.panels.length)}px)`;
+      panel.style.order = String(index * 2);
+    });
+  }
+  /** 전역 이벤트 리스너 제거 */
+  removeEventListeners() {
+    document.removeEventListener("mousemove", this.handleDocumentMouseMove);
+    document.removeEventListener("mouseup", this.handleDocumentMouseUp);
+  }
+  /** 거터 크기 가져오기 */
+  getGutterSize() {
+    const sizeStr = getComputedStyle(this).getPropertyValue("--splitter-size").trim();
+    return parseFloat(sizeStr) || 4;
   }
 }
 __decorateClass([
   queryAssignedElements({ flatten: true })
-], USplitPanel.prototype, "childElements");
+], USplitPanel.prototype, "slotEls");
+__decorateClass([
+  state()
+], USplitPanel.prototype, "splitterCount");
 __decorateClass([
   property({ type: String, reflect: true })
 ], USplitPanel.prototype, "orientation");
 __decorateClass([
-  property({ type: Array, attribute: "init-ratio", converter: arrayAttributeConverter(parseFloat) })
+  property({ type: Array, attribute: "init-ratio", converter: arrayAttrConverter(parseFloat) })
 ], USplitPanel.prototype, "initRatio");
 __decorateClass([
-  property({ type: Array, attribute: "min-sizes", converter: arrayAttributeConverter(parseFloat) })
+  property({ type: Array, attribute: "min-sizes", converter: arrayAttrConverter(parseFloat) })
 ], USplitPanel.prototype, "minSizes");
 __decorateClass([
-  property({ type: Array, attribute: "max-sizes", converter: arrayAttributeConverter(parseFloat) })
+  property({ type: Array, attribute: "max-sizes", converter: arrayAttrConverter(parseFloat) })
 ], USplitPanel.prototype, "maxSizes");
 
 export { USplitPanel };

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

@@ -1,6 +1,12 @@
 import { css } from 'lit';
 
 const styles = css`
+  :host {
+    --splitter-size: 4px;
+    --splitter-color: var(--u-neutral-200, #e5e7eb);
+    --splitter-active-color: var(--u-blue-500, #3b82f6);
+  }
+
   :host {
     position: relative;
     display: flex;
@@ -14,6 +20,30 @@ const styles = css`
   :host([orientation="vertical"]) {
     flex-direction: column;
   }
+
+  /* Splitter */
+  .splitter {
+    flex-shrink: 0;
+    background-color: var(--splitter-color);
+    transition: background-color 0.15s ease;
+  }
+  .splitter[orientation="horizontal"] {
+    width: var(--splitter-size);
+    cursor: col-resize;
+  }
+  .splitter[orientation="vertical"] {
+    height: var(--splitter-size);
+    cursor: row-resize;
+  }
+  .splitter:hover,
+  .splitter.active {
+    background-color: var(--splitter-active-color);
+  }
+
+  /* Slotted panels */
+  ::slotted(*) {
+    overflow: auto;
+  }
 `;
 
 export { styles };

package/dist/components/tag/UTag.component.d.ts

@@ -0,0 +1,23 @@
+import { BaseElement } from '../BaseElement.js';
+export type TagVariant = "default" | "info" | "success" | "warning" | "danger";
+/**
+ * Tag 컴포넌트는 레이블, 카테고리, 상태 등을 표시하는데 사용됩니다.
+ * @slot - 태그 내부에 표시할 콘텐츠를 삽입합니다.
+ * @slot prefix - 태그의 접두사로 표시할 콘텐츠를 삽입합니다.
+ * @slot suffix - 태그의 접미사로 표시할 콘텐츠를 삽입합니다.
+ */
+export declare class UTag extends BaseElement {
+    static styles: import('lit').CSSResultGroup[];
+    static dependencies: Record<string, typeof BaseElement>;
+    /** 태그의 스타일 변형을 설정합니다. */
+    variant: TagVariant;
+    /** 태그를 둥글게 표시합니다. */
+    rounded: boolean;
+    /** 태그를 제거 가능하게 설정합니다. */
+    removable: boolean;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    render(): import('lit-html').TemplateResult<1>;
+    private handleRemoveButtonClick;
+    private handleTransitionEnd;
+}

package/dist/components/tag/UTag.component.js

@@ -0,0 +1,72 @@
+import { html } from 'lit';
+import { property } from 'lit/decorators.js';
+import { BaseElement } from '../BaseElement.js';
+import { styles } from './UTag.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 UTag extends BaseElement {
+  constructor() {
+    super(...arguments);
+    this.variant = "default";
+    this.rounded = false;
+    this.removable = false;
+    this.handleRemoveButtonClick = (e) => {
+      e.stopPropagation();
+      this.emit("u-remove");
+      requestAnimationFrame(() => {
+        this.style.transform = "scale(0.8)";
+        this.style.opacity = "0";
+      });
+    };
+    this.handleTransitionEnd = (e) => {
+      if (e.propertyName === "opacity" && this.style.opacity === "0") {
+        this.remove();
+      }
+    };
+  }
+  static {
+    this.styles = [super.styles, styles];
+  }
+  static {
+    this.dependencies = {};
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.addEventListener("transitionend", this.handleTransitionEnd);
+  }
+  disconnectedCallback() {
+    this.removeEventListener("transitionend", this.handleTransitionEnd);
+    super.disconnectedCallback();
+  }
+  render() {
+    return html`
+      <slot name="prefix"></slot>
+      <slot></slot>
+      <slot name="suffix"></slot>
+      <button class="remove-btn" part="remove-btn"
+        ?hidden=${!this.removable}
+        @click=${this.handleRemoveButtonClick}>
+        &times;
+      </button>
+    `;
+  }
+}
+__decorateClass([
+  property({ type: String, reflect: true })
+], UTag.prototype, "variant");
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], UTag.prototype, "rounded");
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], UTag.prototype, "removable");
+
+export { UTag };

package/dist/components/tag/UTag.d.ts

@@ -0,0 +1,8 @@
+import { UTag } from './UTag.component.js';
+declare global {
+    interface HTMLElementTagNameMap {
+        'u-tag': UTag;
+    }
+}
+export { UTag };
+export type { TagVariant } from './UTag.component.js';

package/dist/components/tag/UTag.js

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

package/dist/components/tag/UTag.styles.js

@@ -0,0 +1,83 @@
+import { css } from 'lit';
+
+const styles = css`
+  :host {
+    display: inline-flex;
+    align-items: center;
+    gap: 4px;
+    font-size: 12px;
+    padding: 0.25em 0.5em;
+    border-radius: 4px;
+    font-weight: 500;
+    line-height: 1.5em;
+    white-space: nowrap;
+    user-select: none;
+    opacity: 1;
+    transform: scale(1);
+    transition: opacity 0.2s ease, transform 0.2s ease;
+  }
+  /* Style variants */
+  :host([variant="default"]) {
+    color: var(--u-neutral-800);
+    border: 1px solid var(--u-neutral-300);
+    background-color: var(--u-neutral-100);
+  }
+  :host([variant="info"]) {
+    color: var(--u-blue-800);
+    border: 1px solid var(--u-blue-300);
+    background-color: var(--u-blue-100);
+  }
+  :host([variant="success"]) {
+    color: var(--u-green-800);
+    border: 1px solid var(--u-green-300);
+    background-color: var(--u-green-100);
+  }
+  :host([variant="warning"]) {
+    color: var(--u-yellow-800);
+    border: 1px solid var(--u-yellow-300);
+    background-color: var(--u-yellow-100);
+  }
+  :host([variant="danger"]) {
+    color: var(--u-red-800);
+    border: 1px solid var(--u-red-300);
+    background-color: var(--u-red-100);
+  }
+  /* Rounded variant */
+  :host([rounded]) {
+    border-radius: 999px;
+  }
+
+  /* Slot styles */
+  ::slotted([slot="prefix"]) {
+    margin-right: 0.2em;
+  }
+  ::slotted([slot="suffix"]) {
+    margin-left: 0.2em;
+  }
+
+  /* Remove button */
+  .remove-btn {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 1.5em;
+    width: 1em;
+    height: 1em;
+    line-height: 1.2em;
+    padding: 0;
+    border: none;
+    border-radius: 50%;
+    color: currentColor;
+    background-color: transparent;
+    transition: background-color 0.2s ease;
+    cursor: pointer;
+  }
+  .remove-btn:hover {
+    background-color: rgba(0, 0, 0, 0.1);
+  }
+  .remove-btn:active {
+    background-color: rgba(0, 0, 0, 0.2);
+  }
+`;
+
+export { styles };

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

@@ -7,10 +7,18 @@ import { FloatingElement } from '../FloatingElement.js';
 export declare class UTooltip extends FloatingElement {
     static styles: import('lit').CSSResultGroup[];
     static dependencies: Record<string, typeof BaseElement>;
+    /**
+     * 툴팁 내부로 마우스를 이동해도 툴팁이 유지되는지 여부입니다.
+     * true일 경우 툴팁 위에 마우스를 올려놓을 수 있습니다.
+     *
+     * @default false
+     */
+    interactive: boolean;
     protected updated(changedProperties: PropertyValues): void;
     render(): import('lit-html').TemplateResult<1>;
     /** this 바인딩 이벤트 핸들러 */
     private _show;
+    /** this 바인딩 이벤트 핸들러 */
     private _hide;
     /** 바인딩 이벤트 핸들러 */
     private bind;