@iyulab/components 0.1.7 → 0.1.9

package/dist/components/menu/UMenu.component.js

@@ -0,0 +1,327 @@
+import { html } from 'lit';
+import { queryAssignedElements, property } from 'lit/decorators.js';
+import { FloatingElement } from '../FloatingElement.js';
+import { UMenuItem } from '../menu-item/UMenuItem.component.js';
+import { styles } from './UMenu.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 UMenu extends FloatingElement {
+  constructor() {
+    super(...arguments);
+    this.type = "default";
+    this.mode = "none";
+    /** 
+     * 특정 인덱스의 아이템에 포커스 (기본: 첫 번째)
+     * @param index 인덱스 (음수 가능)
+     */
+    this.focusAt = async (index = 0) => {
+      await this.updateComplete;
+      const items = this.items || [];
+      const length = items.length;
+      if (length === 0) return;
+      index = index < 0 ? Math.max(0, length + index) : Math.min(index, length - 1);
+      const item = items[index];
+      if (item.disabled) return;
+      item.focus();
+    };
+    //#region 기본 이벤트 핸들러
+    this.handleClick = async (e) => {
+      const item = this.getEnabledItemFrom(e);
+      if (!item || item.isNested) return;
+      const items = this.getItems("enabled");
+      if (!items.includes(item)) return;
+      const value = item.value || "";
+      if (this.mode === "single") {
+        for (const i of items) {
+          i.selected = i === item;
+        }
+        if (this.type !== "default") {
+          this.hide();
+        }
+      } else if (this.mode === "multiple") {
+        item.checked = !item.checked;
+      } else {
+        if (this.type !== "default") {
+          this.hide();
+        }
+      }
+      this.emit("u-select", { value });
+    };
+    this.handleKeydown = async (e) => {
+      const item = this.getEnabledItemFrom(e);
+      if (!item) return;
+      const items = this.getItems("enabled");
+      if (!items.includes(item)) return;
+      const currentIndex = items.findIndex((i) => i === item);
+      let nextIndex;
+      switch (e.key) {
+        case "Enter":
+        case " ":
+          e.preventDefault();
+          item.click();
+          break;
+        case "Home":
+          e.preventDefault();
+          await this.focusAt(0);
+          break;
+        case "End":
+          e.preventDefault();
+          await this.focusAt(items.length - 1);
+          break;
+        case "ArrowDown":
+          e.preventDefault();
+          nextIndex = (currentIndex + 1) % items.length;
+          await this.focusAt(nextIndex);
+          break;
+        case "ArrowUp":
+          e.preventDefault();
+          nextIndex = currentIndex - 1 < 0 ? items.length - 1 : currentIndex - 1;
+          await this.focusAt(nextIndex);
+          break;
+        case "ArrowLeft":
+          e.preventDefault();
+          e.stopPropagation();
+          if (this.type === "submenu") {
+            this.anchor?.focus();
+          }
+          break;
+        case "ArrowRight":
+          e.preventDefault();
+          e.stopPropagation();
+          const menu = item.querySelector("u-menu");
+          if (menu?.type === "submenu") {
+            await menu?.focusAt(0);
+          }
+          break;
+      }
+    };
+    //#endregion
+    //#region 공용 이벤트 핸들러
+    this.handleWindowFocusOut = async (_) => {
+      await this.hide();
+    };
+    this.handleWindowKeydown = async (e) => {
+      if (e.key === "Escape") {
+        await this.hide();
+      }
+    };
+    this.handleWindowPointerDown = async (e) => {
+      if (this.type === "contextmenu") {
+        const targets = e.composedPath().filter((v) => v instanceof HTMLElement);
+        for (const target of targets) {
+          if (this.contains(target)) return;
+        }
+        await this.hide();
+      } else if (this.type === "dropdown") {
+        const anchor = this.anchor;
+        if (!anchor) return;
+        const targets = e.composedPath().filter((v) => v instanceof HTMLElement);
+        for (const target of targets) {
+          if (this.contains(target) || anchor.contains(target)) return;
+        }
+        await this.hide();
+      }
+    };
+    //#endregion
+    //#region 'submenu' 이벤트 핸들러
+    this.handleAnchorPointerEnter = (e) => {
+      const item = this.getEnabledItemFrom(e);
+      if (!item) return;
+      this.show();
+    };
+    this.handleAnchorPointerLeave = async (e) => {
+      const item = this.getEnabledItemFrom(e);
+      if (!item) return;
+      this.hide();
+    };
+    this.handleAnchorFocusIn = (e) => {
+      const item = this.getEnabledItemFrom(e);
+      if (!item) return;
+      this.show();
+    };
+    this.handleAnchorFocusOut = async (e) => {
+      const item = this.getEnabledItemFrom(e);
+      if (!item) return;
+      this.hide();
+    };
+    //#endregion
+    //#region 'dropdown' 이벤트 핸들러
+    this.handleAnchorPointerDown = async (e) => {
+      if (e.button !== 0) return;
+      if (this.visible)
+        await this.hide();
+      else
+        await this.show();
+    };
+    this.handleAnchorKeydown = async (e) => {
+      if (e.key === "ArrowDown" || e.key === "Enter" || e.key === " ") {
+        e.preventDefault();
+        if (this.visible) return;
+        await this.show();
+      }
+    };
+    //#endregion
+    //#region 'contextmenu' 이벤트 핸들러
+    this.handleAnchorContextMenu = async (e) => {
+      e.preventDefault();
+      await this.hide();
+      const virtual = {
+        getBoundingClientRect: () => ({
+          x: e.clientX,
+          y: e.clientY,
+          left: e.clientX,
+          top: e.clientY,
+          right: e.clientX,
+          bottom: e.clientY,
+          width: 0,
+          height: 0
+        })
+      };
+      await this.show(virtual, false);
+    };
+  }
+  static {
+    this.styles = [super.styles, styles];
+  }
+  static {
+    this.dependencies = {
+      "u-menu-item": UMenuItem
+    };
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.addEventListener("click", this.handleClick);
+    this.addEventListener("keydown", this.handleKeydown);
+  }
+  disconnectedCallback() {
+    this.removeEventListener("click", this.handleClick);
+    this.removeEventListener("keydown", this.handleKeydown);
+    super.disconnectedCallback();
+  }
+  willUpdate(changedProperties) {
+    super.willUpdate(changedProperties);
+    if (changedProperties.has("anchor") || changedProperties.has("type")) {
+      const oldType = changedProperties.get("type") || "default";
+      const newType = this.type || "default";
+      const oldAnchor = changedProperties.get("anchor");
+      const newAnchor = this.anchor;
+      if (oldAnchor) this.unbind(oldType, oldAnchor);
+      if (newAnchor) this.bind(newType, newAnchor);
+    }
+    if (changedProperties.has("mode")) {
+      this.clearAll();
+    }
+  }
+  render() {
+    return html`<slot></slot>`;
+  }
+  /**
+   * 모든 아이템들의 선택 상태를 해제합니다
+   * 재귀적으로 서브메뉴의 아이템들도 해제됩니다.
+   */
+  clearAll() {
+    const items = this.items || [];
+    for (const item of items) {
+      item.selected = false;
+      item.checked = false;
+      if (item.isNested) {
+        const submenu = item.querySelector("u-menu");
+        submenu?.clearAll();
+      }
+    }
+  }
+  /**
+   * 조건에 맞는 메뉴 아이템들을 반환합니다
+   * 
+   * @param filter - 필터 조건입니다
+   * @return 조건에 맞는 아이템들의 배열입니다
+   */
+  getItems(filter = "all") {
+    const items = this.items || [];
+    switch (filter) {
+      case "all":
+        return items;
+      case "enabled":
+        return items.filter((item) => !item.disabled);
+      case "disabled":
+        return items.filter((item) => item.disabled);
+      case "selected":
+        return items.filter((item) => item.selected);
+      case "unselected":
+        return items.filter((item) => !item.selected);
+      case "checked":
+        return items.filter((item) => item.checked);
+      case "unchecked":
+        return items.filter((item) => !item.checked);
+      default:
+        return [];
+    }
+  }
+  /** 앵커에 이벤트 바인딩 */
+  bind(type, target) {
+    if (type === "submenu") {
+      this.visible = false;
+      this.placement ||= "right-start";
+      this.offset = -8;
+      target.addEventListener("pointerenter", this.handleAnchorPointerEnter);
+      target.addEventListener("pointerleave", this.handleAnchorPointerLeave);
+      target.addEventListener("focusin", this.handleAnchorFocusIn);
+      target.addEventListener("focusout", this.handleAnchorFocusOut);
+    } else if (type === "dropdown") {
+      this.visible = false;
+      this.placement ||= "bottom-start";
+      target.addEventListener("pointerdown", this.handleAnchorPointerDown);
+      target.addEventListener("keydown", this.handleAnchorKeydown);
+    } else if (type === "contextmenu") {
+      this.visible = false;
+      this.placement ||= "bottom-start";
+      target.addEventListener("contextmenu", this.handleAnchorContextMenu);
+    } else {
+      this.visible = true;
+      return;
+    }
+    window.addEventListener("focusout", this.handleWindowFocusOut);
+    window.addEventListener("keydown", this.handleWindowKeydown);
+    window.addEventListener("pointerdown", this.handleWindowPointerDown);
+  }
+  /** 앵커에서 이벤트 바인딩 해제 */
+  unbind(_, target) {
+    window.removeEventListener("focusout", this.handleWindowFocusOut);
+    window.removeEventListener("keydown", this.handleWindowKeydown);
+    window.removeEventListener("pointerdown", this.handleWindowPointerDown);
+    target.removeEventListener("pointerenter", this.handleAnchorPointerEnter);
+    target.removeEventListener("pointerleave", this.handleAnchorPointerLeave);
+    target.removeEventListener("focusin", this.handleAnchorFocusIn);
+    target.removeEventListener("focusout", this.handleAnchorFocusOut);
+    target.removeEventListener("pointerdown", this.handleAnchorPointerDown);
+    target.removeEventListener("keydown", this.handleAnchorKeydown);
+    target.removeEventListener("contextmenu", this.handleAnchorContextMenu);
+  }
+  //#endregion
+  /** 이벤트로부터 활성화된 (비활성화되지 않은) 메뉴 아이템을 반환 */
+  getEnabledItemFrom(event) {
+    const target = event.target;
+    const item = target.closest("u-menu-item");
+    if (!item || item.disabled) return null;
+    return item;
+  }
+}
+__decorateClass([
+  queryAssignedElements({ flatten: false, selector: "u-menu-item" })
+], UMenu.prototype, "items");
+__decorateClass([
+  property({ type: String, reflect: true })
+], UMenu.prototype, "type");
+__decorateClass([
+  property({ type: String, reflect: true })
+], UMenu.prototype, "mode");
+
+export { UMenu };

package/dist/components/menu/UMenu.d.ts

@@ -0,0 +1,8 @@
+import { UMenu } from './UMenu.component.js';
+declare global {
+    interface HTMLElementTagNameMap {
+        'u-menu': UMenu;
+    }
+}
+export { UMenu };
+export type { MenuType, MenuMode } from './UMenu.component.js';

package/dist/components/menu/UMenu.js

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

package/dist/components/menu/UMenu.styles.js

@@ -0,0 +1,39 @@
+import { css } from 'lit';
+
+const styles = css`
+  /* 공통 스타일 */
+  :host {
+    display: flex;
+    flex-direction: column;
+    align-items: stretch;
+    justify-content: flex-start;
+    padding: 8px 0px;
+    border: 1px solid var(--u-border-color);
+    border-radius: 4px;
+    background: var(--u-panel-bg-color);
+  }
+
+  /* default 타입: 일반 메뉴 (항상 표시, 문서 흐름에 포함) */
+  :host([type="default"]) {
+    position: relative;
+    z-index: inherit;
+    top: unset;
+    left: unset;
+    opacity: 1;
+  }
+
+  /* dropdown/contextmenu/submenu 타입: 플로팅 메뉴 */
+  :host([type="dropdown"]),
+  :host([type="contextmenu"]),
+  :host([type="submenu"]) {
+    transform: scale(0.9);
+    transition: transform 0.2s ease;
+  }
+  :host([type="dropdown"][visible]),
+  :host([type="contextmenu"][visible]),
+  :host([type="submenu"][visible]) {
+    transform: scale(1);
+  }
+`;
+
+export { styles };

package/dist/components/menu-item/UMenuItem.component.d.ts

@@ -0,0 +1,19 @@
+import { PropertyValues } from 'lit';
+import { BaseElement } from '../BaseElement.js';
+export declare class UMenuItem extends BaseElement {
+    static styles: import('lit').CSSResultGroup[];
+    static dependencies: Record<string, typeof BaseElement>;
+    /** 중첩된 메뉴 아이템인지 여부 */
+    isNested: boolean;
+    /** 비활성화 여부 @default false */
+    disabled: boolean;
+    /** 선택 여부(multiple mode) @default false */
+    checked: boolean;
+    /** 선택 여부(single mode) @default false */
+    selected: boolean;
+    /** 값 */
+    value: string;
+    protected updated(changedProperties: PropertyValues): void;
+    render(): import('lit-html').TemplateResult<1>;
+    private handleSubmenuSlotChange;
+}

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

@@ -0,0 +1,96 @@
+import { html } from 'lit';
+import { state, property } from 'lit/decorators.js';
+import { BaseElement } from '../BaseElement.js';
+import { UMenu } from '../menu/UMenu.component.js';
+import { styles } from './UMenuItem.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 UMenuItem extends BaseElement {
+  constructor() {
+    super(...arguments);
+    this.isNested = false;
+    this.disabled = false;
+    this.checked = false;
+    this.selected = false;
+    this.value = "";
+    this.handleSubmenuSlotChange = (e) => {
+      const slot = e.target;
+      const elements = slot.assignedElements({ flatten: true }).filter((el) => el instanceof UMenu) || [];
+      if (elements.length !== 1) {
+        console.warn(`when using <u-menu-item> with submenu, there must be exactly one <u-menu> element in the 'submenu' slot.`);
+        this.isNested = false;
+      } else {
+        const submenu = elements[0];
+        submenu.anchor = this;
+        submenu.type = "submenu";
+        this.isNested = true;
+      }
+    };
+  }
+  static {
+    this.styles = [super.styles, styles];
+  }
+  static {
+    this.dependencies = {};
+  }
+  updated(changedProperties) {
+    super.updated(changedProperties);
+    if (changedProperties.has("disabled")) {
+      const tabIndex = this.disabled ? "-1" : "0";
+      this.setAttribute("tabindex", tabIndex);
+    }
+  }
+  render() {
+    return html`
+      <u-icon class="prefix icon"
+        ?hidden=${!this.checked}
+        lib="internal"
+        name="check-lg"
+      ></u-icon>
+
+      <slot name="prefix"></slot>
+
+      <span class="content">
+        <slot></slot>
+      </span>
+
+      <slot name="suffix"></slot>
+
+      <u-icon class="suffix icon"
+        ?hidden=${!this.isNested}
+        lib="internal"
+        name="chevron-right"
+      ></u-icon>
+
+      <slot name="submenu"
+        ?hidden=${!this.isNested}
+        @slotchange=${this.handleSubmenuSlotChange}
+      ></slot>
+    `;
+  }
+}
+__decorateClass([
+  state()
+], UMenuItem.prototype, "isNested");
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], UMenuItem.prototype, "disabled");
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], UMenuItem.prototype, "checked");
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], UMenuItem.prototype, "selected");
+__decorateClass([
+  property({ type: String })
+], UMenuItem.prototype, "value");
+
+export { UMenuItem };

package/dist/components/menu-item/UMenuItem.d.ts

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

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

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

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

@@ -0,0 +1,65 @@
+import { css } from 'lit';
+
+const styles = css`
+  :host {
+    --selected-color: var(--u-txt-color-inverse, #ffffff);
+    --selected-bg-color: var(--u-blue-600, #0078d4);
+  }
+
+  :host {
+    position: relative;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    padding: 0.5em 1em;
+    background-color: transparent;
+    transition: background-color 0.15s ease;
+    user-select: none;
+    cursor: pointer;
+  }
+  :host([disabled]) {
+    opacity: 0.5;
+    pointer-events: none;
+    cursor: not-allowed;
+  }
+  :host(:not([disabled])[selected]) {
+    color: var(--selected-color);
+    background-color: var(--selected-bg-color);
+  }
+  :host(:not([disabled]):not([selected]):hover),
+  :host(:not([disabled]):not([selected]):focus-visible) {
+    background-color: var(--u-bg-color-hover);
+  }
+
+  /* 콘텐츠 영역 */
+  .content {
+    flex: 1 0 auto;
+    font-size: 1em;
+    line-height: 1.5;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  /* prefix/suffix 슬롯 */
+  ::slotted([slot="prefix"]) {
+    margin-right: 0.5em;
+  }
+  ::slotted([slot="suffix"]) {
+    margin-left: 0.5em;
+  }
+
+  /* 아이콘 공통 스타일 */
+  .icon {
+    color: var(--u-txt-color);
+    font-size: 0.75em;
+  }
+  .icon.prefix {
+    margin-right: 0.5em;
+  }
+  .icon.suffix {
+    margin-left: 0.5em;
+  }
+`;
+
+export { styles };

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

@@ -4,7 +4,7 @@ import { BaseElement } from '../BaseElement.js';
  * ProgressBar 컴포넌트는 진행 상태를 시각적으로 표시합니다.
  * 로딩 상태나 작업 진행률을 표시하는데 사용됩니다.
  */
-export declare class ProgressBar extends BaseElement {
+export declare class UProgressBar extends BaseElement {
     static styles: import('lit').CSSResultGroup[];
     static dependencies: Record<string, typeof BaseElement>;
     indicatorEl: HTMLElement;

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;