@iyulab/components 0.1.4 → 0.1.6

package/dist/components/menu-item/MenuItem.js

@@ -1,5 +1,6 @@
-import { html, nothing } from 'lit';
-import { property } from 'lit/decorators.js';
+import { nothing, html } from 'lit';
+import { property, state, query, queryAssignedElements } from 'lit/decorators.js';
+import { autoUpdate, computePosition, offset, flip, shift } from '@floating-ui/dom';
 import { BaseElement } from '../BaseElement.js';
 import { styles } from './MenuItem.styles.js';
 
@@ -20,13 +21,125 @@ class MenuItem extends BaseElement {
     this.checked = false;
     this.checkable = false;
     this.value = "";
-    /** 클릭 이벤트를 처리합니다. */
-    this.handleClick = (e) => {
+    this.submenuOpen = false;
+    this.submenuCleanup = null;
+    this.closeTimer = null;
+    /** 외부에서 호출 가능하게(부모 menu가 형제 submenu 닫을 때 사용) */
+    this.closeSubmenu = async () => {
+      const sm = this.submenu;
+      if (!sm) return;
+      this.stopSubmenuAutoUpdate();
+      if (this.closeTimer) window.clearTimeout(this.closeTimer);
+      this.submenuOpen = false;
+      this.setAttribute("aria-expanded", "false");
+      await sm.hide();
+    };
+    this.openSubmenu = async (focusFirst = false) => {
+      const sm = this.submenu;
+      if (!sm || this.disabled) return;
+      if (this.closeTimer) {
+        window.clearTimeout(this.closeTimer);
+        this.closeTimer = null;
+      }
+      this.submenuOpen = true;
+      this.setAttribute("aria-expanded", "true");
+      this.emit("u-submenu-open", { item: this });
+      await sm.show();
+      await this.positionSubmenu();
+      this.stopSubmenuAutoUpdate();
+      this.submenuCleanup = autoUpdate(this.containerEl, sm, () => {
+        this.positionSubmenu();
+      });
+      sm.addEventListener("u-select", this.onSubmenuSelect, { once: true });
+      if (focusFirst) {
+        await sm.focusFirstItem?.();
+      }
+    };
+    this.onSubmenuSelect = () => {
+      this.closeSubmenu();
+    };
+    this.scheduleCloseSubmenu = () => {
+      if (!this.submenu) return;
+      if (this.closeTimer) window.clearTimeout(this.closeTimer);
+      this.closeTimer = window.setTimeout(() => this.closeSubmenu(), 150);
+    };
+    this.positionSubmenu = async () => {
+      const sm = this.submenu;
+      if (!sm) return;
+      const pos = await computePosition(this.containerEl, sm, {
+        strategy: "fixed",
+        placement: "right-start",
+        middleware: [
+          offset(6),
+          flip(),
+          shift({ padding: 8 })
+        ]
+      });
+      Object.assign(sm.style, {
+        position: "fixed",
+        left: `${pos.x}px`,
+        top: `${pos.y}px`,
+        zIndex: "1001",
+        transformOrigin: (() => {
+          switch (pos.placement) {
+            case "left":
+            case "left-start":
+            case "left-end":
+              return "right center";
+            case "right":
+            case "right-start":
+            case "right-end":
+              return "left center";
+            case "top":
+            case "top-start":
+            case "top-end":
+              return "center bottom";
+            default:
+              return "center top";
+          }
+        })()
+      });
+    };
+    this.onPointerEnter = () => {
+      if (this.submenu) this.openSubmenu(false);
+    };
+    this.onPointerLeave = (e) => {
+      const sm = this.submenu;
+      if (!sm) return;
+      const next = e.relatedTarget;
+      if (next && (this.contains(next) || sm.contains(next))) return;
+      this.scheduleCloseSubmenu();
+    };
+    this.onFocusIn = () => {
+      if (this.submenu) this.openSubmenu(false);
+    };
+    this.onFocusOut = (e) => {
+      const sm = this.submenu;
+      if (!sm) return;
+      const next = e.relatedTarget;
+      if (next && (this.contains(next) || sm.contains(next))) return;
+      this.scheduleCloseSubmenu();
+    };
+    this.handleKeydown = async (e) => {
+      if (!this.submenu) return;
+      if (e.key === "ArrowRight" || e.key === "Enter" || e.key === " ") {
+        e.preventDefault();
+        await this.openSubmenu(true);
+      }
+    };
+    this.handleClick = async (e) => {
       if (this.disabled) {
         e.preventDefault();
         e.stopPropagation();
         return;
       }
+      if (this.submenu) {
+        e.preventDefault();
+        e.stopPropagation();
+        if (this.submenuOpen) await this.closeSubmenu();
+        else await this.openSubmenu(true);
+        return;
+      }
       if (this.checkable) {
         this.checked = !this.checked;
         this.emit("u-check", { checked: this.checked });
@@ -41,41 +154,88 @@ class MenuItem extends BaseElement {
   static {
     this.dependencies = {};
   }
+  get submenu() {
+    return this.submenuList?.[0];
+  }
   connectedCallback() {
     super.connectedCallback();
-    this.setAttribute("role", "menuitem");
     this.setAttribute("tabindex", this.disabled ? "-1" : "0");
+    this.updateRole();
+    this.addEventListener("keydown", this.handleKeydown);
+    this.addEventListener("pointerenter", this.onPointerEnter);
+    this.addEventListener("pointerleave", this.onPointerLeave);
+    this.addEventListener("focusin", this.onFocusIn);
+    this.addEventListener("focusout", this.onFocusOut);
   }
-  updated(changedProperties) {
-    super.updated(changedProperties);
-    if (changedProperties.has("disabled")) {
+  disconnectedCallback() {
+    this.removeEventListener("keydown", this.handleKeydown);
+    this.removeEventListener("pointerenter", this.onPointerEnter);
+    this.removeEventListener("pointerleave", this.onPointerLeave);
+    this.removeEventListener("focusin", this.onFocusIn);
+    this.removeEventListener("focusout", this.onFocusOut);
+    this.stopSubmenuAutoUpdate();
+    if (this.closeTimer) window.clearTimeout(this.closeTimer);
+    super.disconnectedCallback();
+  }
+  updated(changed) {
+    super.updated(changed);
+    if (changed.has("disabled")) {
       this.setAttribute("tabindex", this.disabled ? "-1" : "0");
       this.setAttribute("aria-disabled", this.disabled ? "true" : "false");
+      if (this.disabled) this.closeSubmenu();
     }
-    if (changedProperties.has("checked")) {
+    if (changed.has("checked")) {
       this.setAttribute("aria-checked", this.checked ? "true" : "false");
     }
+    if (changed.has("checkable")) {
+      this.updateRole();
+    }
+  }
+  updateRole() {
+    const hasSubmenu = !!this.submenu;
+    if (this.checkable) {
+      this.setAttribute("role", "menuitemcheckbox");
+      this.setAttribute("aria-checked", this.checked ? "true" : "false");
+    } else {
+      this.setAttribute("role", "menuitem");
+    }
+    if (hasSubmenu) {
+      this.setAttribute("aria-haspopup", "menu");
+      this.setAttribute("aria-expanded", this.submenuOpen ? "true" : "false");
+    } else {
+      this.removeAttribute("aria-haspopup");
+      this.removeAttribute("aria-expanded");
+    }
   }
   render() {
+    const hasSubmenu = !!this.submenu;
     return html`
       <div class="container" @click=${this.handleClick}>
         ${this.renderPrefixItem()}
         <slot name="prefix"></slot>
+
         <span class="content">
           <slot></slot>
         </span>
+
         <slot name="suffix"></slot>
+        ${hasSubmenu ? html`<span class="submenu-indicator">›</span>` : nothing}
       </div>
+
+      <!-- Shoelace 방식 그대로 -->
+      <slot name="submenu"></slot>
     `;
   }
-  /** 메뉴 항목의 앞부분을 렌더링합니다. */
   renderPrefixItem() {
     if (this.checkable) {
-      return html`
-        <span class="checker" ?checked=${this.checked}>✓</span>
-      `;
-    } else {
-      return nothing;
+      return html`<span class="checker" ?checked=${this.checked}>✓</span>`;
+    }
+    return nothing;
+  }
+  stopSubmenuAutoUpdate() {
+    if (this.submenuCleanup) {
+      this.submenuCleanup();
+      this.submenuCleanup = null;
     }
   }
 }
@@ -94,5 +254,14 @@ __decorateClass([
 __decorateClass([
   property({ type: String })
 ], MenuItem.prototype, "value");
+__decorateClass([
+  state()
+], MenuItem.prototype, "submenuOpen");
+__decorateClass([
+  query(".container")
+], MenuItem.prototype, "containerEl");
+__decorateClass([
+  queryAssignedElements({ slot: "submenu", selector: "u-menu" })
+], MenuItem.prototype, "submenuList");
 
 export { MenuItem };

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

@@ -59,6 +59,12 @@ const styles = css`
     text-overflow: ellipsis;
     white-space: nowrap;
   }
+
+  .submenu-indicator {
+    margin-left: 8px;
+    opacity: 0.7;
+    user-select: none;
+  }
 `;
 
 export { styles };

package/dist/components/menu-item/index.js

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

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

@@ -23,5 +23,5 @@ export declare class ProgressBar extends BaseElement {
     protected willUpdate(changedProperties: PropertyValues): void;
     render(): import('lit-html').TemplateResult<1>;
     /** 내부 진행 상태 업데이트 */
-    private updateProgress;
+    private updateProgressState;
 }

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

@@ -34,7 +34,7 @@ class ProgressBar extends BaseElement {
       this.progressState = this.indeterminate ? "indeterminate" : "turned-on";
     }
     if (changedProperties.has("minValue") || changedProperties.has("maxValue") || changedProperties.has("value")) {
-      this.updateProgress();
+      this.updateProgressState();
     }
   }
   render() {
@@ -48,7 +48,7 @@ class ProgressBar extends BaseElement {
     `;
   }
   /** 내부 진행 상태 업데이트 */
-  async updateProgress() {
+  async updateProgressState() {
     await this.updateComplete;
     if (this.indeterminate) return;
     const range = this.maxValue - this.minValue;

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>
@@ -65,14 +66,14 @@ class ProgressRing extends BaseElement {
         ></circle>
       </svg>
       <div class="label" part="label">
-        ${Math.round(this.progress * 100)}%
+        ${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;
@@ -93,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,3 +1,4 @@
+import { PropertyValues } from 'lit';
 import { BaseElement } from '../BaseElement.js';
 /**
  * SplitPanel 컴포넌트는 화면을 여러 개의 패널로 분할하여 표시합니다.
@@ -9,14 +10,21 @@ export declare class SplitPanel extends BaseElement {
     private dividers;
     private panelSizes;
     private panelAdjustSizes;
+    childElements: HTMLElement[];
     /** 분할 방향을 설정합니다. 'horizontal'은 좌우 분할, 'vertical'은 상하 분할입니다. */
     orientation: 'horizontal' | 'vertical';
     /** 초기 패널 크기 비율을 설정합니다. (예: [30, 70]은 첫 번째 패널이 30%, 두 번째 패널이 70%를 차지) */
-    initialRatio: number[];
+    initRatio: number[];
+    /** 각 패널의 최소 크기를 설정합니다. (픽셀 단위) */
+    minSizes: number[];
+    /** 각 패널의 최대 크기를 설정합니다. (픽셀 단위) */
+    maxSizes: number[];
     disconnectedCallback(): void;
+    protected willUpdate(changedProperties: PropertyValues): void;
     render(): import('lit-html').TemplateResult<1>;
-    private getDividerSize;
+    private initialize;
     private handleSlotChange;
     /** 디바이더 드래그 이벤트 핸들러 */
-    private handleDividerDrag;
+    private handleDividerMove;
+    private getDividerSize;
 }

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

@@ -1,9 +1,8 @@
 import { html } from 'lit';
-import { property } from 'lit/decorators.js';
+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 { Panel } from '../panel/Panel.js';
 import { styles } from './SplitPanel.styles.js';
 
 var __defProp = Object.defineProperty;
@@ -23,44 +22,48 @@ class SplitPanel extends BaseElement {
     this.panelSizes = [];
     this.panelAdjustSizes = [];
     this.orientation = "horizontal";
-    this.initialRatio = [];
-    this.handleSlotChange = async (e) => {
-      const slot = e.target;
-      const childrens = slot.assignedElements({ flatten: true });
-      const panels = childrens.filter((el) => el instanceof Panel);
-      if (this.panels.length === panels.length && this.panels.every((p, i) => p === panels[i])) {
-        return;
-      }
-      this.panels = panels;
+    this.initRatio = [];
+    this.minSizes = [];
+    this.maxSizes = [];
+    // 초기화 메서드
+    this.initialize = async () => {
+      this.panels = this.childElements.filter((el) => el instanceof Divider === false);
       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);
+      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);
       } else {
-        const equalRatio = 100 / panels.length;
-        this.panelSizes = panels.map(() => equalRatio);
+        const equalRatio = 100 / this.panels.length;
+        this.panelSizes = this.panels.map(() => equalRatio);
       }
-      this.panelAdjustSizes = panels.map(() => 0);
+      this.panelAdjustSizes = this.panels.map(() => 0);
       const property2 = this.orientation === "horizontal" ? "width" : "height";
       const dividerSize = this.getDividerSize();
-      panels.forEach((panel, index) => {
+      this.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;
+        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();
         divider.orientation = this.orientation;
-        divider.draggable = true;
-        divider.addEventListener("u-drag", this.handleDividerDrag);
+        divider.movable = true;
+        divider.addEventListener("u-move", this.handleDividerMove);
         this.dividers.push(divider);
         panel.after(divider);
       });
       this.requestUpdate();
       await this.updateComplete;
     };
+    this.handleSlotChange = async () => {
+      const panels = this.childElements.filter((el) => el instanceof Divider === false);
+      if (panels.every((p, i) => p === this.panels[i])) {
+        return;
+      }
+      await this.initialize();
+    };
     /** 디바이더 드래그 이벤트 핸들러 */
-    this.handleDividerDrag = (event) => {
+    this.handleDividerMove = (event) => {
       const divider = event.target;
       const delta = event.detail.delta;
       const index = this.dividers.indexOf(divider);
@@ -93,14 +96,19 @@ class SplitPanel extends BaseElement {
   }
   static {
     this.dependencies = {
-      "u-divider": Divider,
-      "u-panel": Panel
+      "u-divider": Divider
     };
   }
   disconnectedCallback() {
     this.dividers.forEach((divider) => divider.remove());
     super.disconnectedCallback();
   }
+  willUpdate(changedProperties) {
+    super.willUpdate(changedProperties);
+    if (changedProperties.has("orientation")) {
+      this.initialize();
+    }
+  }
   render() {
     return html`
       <slot @slotchange=${this.handleSlotChange}></slot>
@@ -112,11 +120,20 @@ class SplitPanel extends BaseElement {
     return parseFloat(sizeStr) || 2;
   }
 }
+__decorateClass([
+  queryAssignedElements({ flatten: true })
+], SplitPanel.prototype, "childElements");
 __decorateClass([
   property({ type: String, reflect: true })
 ], SplitPanel.prototype, "orientation");
 __decorateClass([
-  property({ type: Array, attribute: "initial-ratio", converter: arrayAttributeConverter(parseFloat) })
-], SplitPanel.prototype, "initialRatio");
+  property({ type: Array, attribute: "init-ratio", converter: arrayAttributeConverter(parseFloat) })
+], SplitPanel.prototype, "initRatio");
+__decorateClass([
+  property({ type: Array, attribute: "min-sizes", converter: arrayAttributeConverter(parseFloat) })
+], SplitPanel.prototype, "minSizes");
+__decorateClass([
+  property({ type: Array, attribute: "max-sizes", converter: arrayAttributeConverter(parseFloat) })
+], SplitPanel.prototype, "maxSizes");
 
 export { SplitPanel };