@iyulab/components 0.3.0 → 1.0.0

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

@@ -1,338 +0,0 @@
-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.getItems("enabled");
-      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 = e.target;
-      if (!(item instanceof UMenuItem)) return;
-      if (item.disabled) return;
-      if (item.submenu) 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 = e.target;
-      if (!(item instanceof UMenuItem)) return;
-      if (item.disabled) 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":
-          if (this.type === "submenu") {
-            e.preventDefault();
-            e.stopPropagation();
-            await this.hide();
-            if (this.target instanceof HTMLElement) {
-              this.target.focus();
-            }
-          }
-          break;
-        case "ArrowRight":
-          if (item.submenu) {
-            e.preventDefault();
-            e.stopPropagation();
-            await item.submenu.show(item);
-            await item.submenu.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 currentTarget = this.target;
-        if (!currentTarget || !(currentTarget instanceof HTMLElement)) return;
-        const targets = e.composedPath().filter((v) => v instanceof HTMLElement);
-        for (const target of targets) {
-          if (this.contains(target) || currentTarget.contains(target)) return;
-        }
-        await this.hide();
-      }
-    };
-    //#endregion
-    //#region 'dropdown' 이벤트 핸들러
-    this.handleAnchorPointerDown = async (e) => {
-      if (e.button !== 0) return;
-      const target = e.currentTarget;
-      if (this.visible && this.target === target)
-        await this.hide();
-      else
-        await this.show(target);
-    };
-    this.handleAnchorKeydown = async (e) => {
-      if (e.key === "ArrowDown" || e.key === "Enter" || e.key === " ") {
-        e.preventDefault();
-        const target = e.currentTarget;
-        if (this.visible) return;
-        await this.show(target);
-      }
-    };
-    //#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);
-    };
-    //#endregion
-    //#region 'submenu' 이벤트 핸들러
-    this.handleSubmenuAnchorPointerEnter = (e) => {
-      const target = e.currentTarget;
-      if (target?.disabled) return;
-      this.show(target);
-    };
-    this.handleSubmenuAnchorPointerLeave = (e) => {
-      const related = e.relatedTarget;
-      if (related) {
-        const target = this.target;
-        if (target?.contains(related) || this.contains(related)) return;
-      }
-      this.hide();
-    };
-    this.handleSubmenuAnchorFocusIn = (e) => {
-      const target = e.currentTarget;
-      if (target?.disabled) return;
-      this.show(target);
-    };
-    this.handleSubmenuAnchorFocusOut = (e) => {
-      const related = e.relatedTarget;
-      if (related) {
-        const target = this.target;
-        if (target?.contains(related) || this.contains(related)) return;
-      }
-      this.hide();
-    };
-  }
-  static {
-    this.styles = [super.styles, styles];
-  }
-  static {
-    this.dependencies = {};
-  }
-  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("anchors") || changedProperties.has("type")) {
-      const oldType = changedProperties.get("type") || "default";
-      const newType = this.type || "default";
-      const oldAnchors = changedProperties.get("anchors");
-      const newAnchors = this.anchors;
-      if (oldAnchors) this.unbind(oldType, oldAnchors);
-      if (newAnchors) this.bind(newType, newAnchors);
-    }
-    if (changedProperties.has("mode")) {
-      this.clearAll();
-    }
-  }
-  render() {
-    return html`<slot></slot>`;
-  }
-  /**
-   * 모든 아이템들의 선택 상태를 해제합니다
-   * 재귀적으로 서브메뉴의 아이템들도 해제됩니다.
-   */
-  clearAll() {
-    const items = this.getItems("all");
-    for (const item of items) {
-      item.selected = false;
-      item.checked = false;
-      if (item.submenu) {
-        item.submenu.clearAll();
-      }
-    }
-  }
-  /**
-   * 조건에 맞는 메뉴 아이템들을 반환합니다
-   * 
-   * @param filter - 필터 조건입니다
-   * @return 조건에 맞는 아이템들의 배열입니다
-   */
-  getItems(filter = "all") {
-    const items = this.items?.filter((item) => item instanceof UMenuItem) || [];
-    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, anchors) {
-    if (type === "dropdown") {
-      this.visible = false;
-      this.placement ||= "bottom-start";
-      for (const anchor of anchors) {
-        anchor.addEventListener("pointerdown", this.handleAnchorPointerDown);
-        anchor.addEventListener("keydown", this.handleAnchorKeydown);
-      }
-    } else if (type === "contextmenu") {
-      this.visible = false;
-      this.placement ||= "bottom-start";
-      for (const anchor of anchors) {
-        anchor.addEventListener("contextmenu", this.handleAnchorContextMenu);
-      }
-    } else if (type === "submenu") {
-      this.visible = false;
-      this.placement ||= "right-start";
-      for (const anchor of anchors) {
-        anchor.addEventListener("pointerenter", this.handleSubmenuAnchorPointerEnter);
-        anchor.addEventListener("pointerleave", this.handleSubmenuAnchorPointerLeave);
-        anchor.addEventListener("focusin", this.handleSubmenuAnchorFocusIn);
-        anchor.addEventListener("focusout", this.handleSubmenuAnchorFocusOut);
-      }
-    } else {
-      this.visible = true;
-      return;
-    }
-    window.addEventListener("focusout", this.handleWindowFocusOut);
-    window.addEventListener("keydown", this.handleWindowKeydown);
-    window.addEventListener("pointerdown", this.handleWindowPointerDown);
-  }
-  /** 앵커에서 이벤트 바인딩 해제 */
-  unbind(_, anchors) {
-    window.removeEventListener("focusout", this.handleWindowFocusOut);
-    window.removeEventListener("keydown", this.handleWindowKeydown);
-    window.removeEventListener("pointerdown", this.handleWindowPointerDown);
-    for (const anchor of anchors) {
-      anchor.removeEventListener("pointerdown", this.handleAnchorPointerDown);
-      anchor.removeEventListener("keydown", this.handleAnchorKeydown);
-      anchor.removeEventListener("contextmenu", this.handleAnchorContextMenu);
-      anchor.removeEventListener("pointerenter", this.handleSubmenuAnchorPointerEnter);
-      anchor.removeEventListener("pointerleave", this.handleSubmenuAnchorPointerLeave);
-      anchor.removeEventListener("focusin", this.handleSubmenuAnchorFocusIn);
-      anchor.removeEventListener("focusout", this.handleSubmenuAnchorFocusOut);
-    }
-  }
-  //#endregion
-}
-__decorateClass([
-  queryAssignedElements({ flatten: false })
-], 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-item/UMenuItem.component.d.ts

@@ -1,25 +0,0 @@
-import { PropertyValues } from 'lit';
-import { BaseElement } from '../BaseElement.js';
-import { UMenu } from '../menu/UMenu.component.js';
-export declare class UMenuItem extends BaseElement {
-    static styles: import('lit').CSSResultGroup[];
-    static dependencies: Record<string, typeof BaseElement>;
-    /** 서브메뉴 요소 */
-    submenu: UMenu | null;
-    /** 비활성화 여부 @default false */
-    disabled: boolean;
-    /** 로딩 상태 @default false */
-    loading: 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 handleSlotChange;
-    /** submenu 슬롯 변경 감지 */
-    private handleSubmenuSlotChange;
-}

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

@@ -1,111 +0,0 @@
-import { html } from 'lit';
-import { state, property } from 'lit/decorators.js';
-import { BaseElement } from '../BaseElement.js';
-import { UIcon } from '../icon/UIcon.component.js';
-import { UMenu } from '../menu/UMenu.component.js';
-import { USpinner } from '../spinner/USpinner.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.submenu = null;
-    this.disabled = false;
-    this.loading = false;
-    this.checked = false;
-    this.selected = false;
-    /** 기본 슬롯 변경 감지 */
-    this.handleSlotChange = (e) => {
-      const slot = e.target;
-      const elements = slot.assignedElements({ flatten: true });
-      const menu = elements.find((el) => el instanceof UMenu);
-      menu?.setAttribute("slot", "submenu");
-    };
-    /** submenu 슬롯 변경 감지 */
-    this.handleSubmenuSlotChange = (e) => {
-      const slot = e.target;
-      const elements = slot.assignedElements({ flatten: true });
-      const menu = elements.find((el) => el instanceof UMenu);
-      if (menu) {
-        menu.type = "submenu";
-        menu.anchors = [this];
-        this.submenu = menu;
-      } else {
-        this.submenu = null;
-      }
-    };
-  }
-  static {
-    this.styles = [super.styles, styles];
-  }
-  static {
-    this.dependencies = {
-      "u-icon": UIcon,
-      "u-spinner": USpinner
-    };
-  }
-  updated(changedProperties) {
-    super.updated(changedProperties);
-    if (changedProperties.has("disabled")) {
-      this.setAttribute("tabindex", this.disabled ? "-1" : "0");
-    }
-  }
-  render() {
-    return html`
-      <u-icon class="prefix icon"
-        ?hidden=${!this.checked}
-        lib="internal"
-        name="check"
-      ></u-icon>
-
-      <u-spinner class="prefix icon" 
-        ?hidden=${!this.loading}
-      ></u-spinner>
-
-      <slot name="prefix"></slot>
-
-      <span class="label">
-        <slot @slotchange=${this.handleSlotChange}></slot>
-      </span>
-
-      <slot name="suffix"></slot>
-
-      <u-icon class="suffix icon"
-        ?hidden=${this.submenu === null}
-        lib="internal"
-        name="chevron-right"
-      ></u-icon>
-
-      <slot name="submenu" @slotchange=${this.handleSubmenuSlotChange}></slot>
-    `;
-  }
-}
-__decorateClass([
-  state()
-], UMenuItem.prototype, "submenu");
-__decorateClass([
-  property({ type: Boolean, reflect: true })
-], UMenuItem.prototype, "disabled");
-__decorateClass([
-  property({ type: Boolean, reflect: true })
-], UMenuItem.prototype, "loading");
-__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/progress-bar/UProgressBar.component.d.ts

@@ -1,27 +0,0 @@
-import { PropertyValues } from 'lit';
-import { BaseElement } from '../BaseElement.js';
-/**
- * ProgressBar 컴포넌트는 진행 상태를 시각적으로 표시합니다.
- * 로딩 상태나 작업 진행률을 표시하는데 사용됩니다.
- */
-export declare class UProgressBar extends BaseElement {
-    static styles: import('lit').CSSResultGroup[];
-    static dependencies: Record<string, typeof BaseElement>;
-    indicatorEl: HTMLElement;
-    /** 내부 진행 상태 */
-    progressState: 'turned-on' | 'turned-off' | 'determinate' | 'indeterminate';
-    /** 내부 진행 상태 (0과 1 사이 값) */
-    progress: number;
-    /** 불확정 상태 (로딩 애니메이션 표시) */
-    indeterminate: boolean;
-    /** 최소값 (기본값: 0) */
-    minValue: number;
-    /** 최대값 (기본값: 100) */
-    maxValue: number;
-    /** 현재값 */
-    value: number;
-    protected willUpdate(changedProperties: PropertyValues): void;
-    render(): import('lit-html').TemplateResult<1>;
-    /** 내부 진행 상태 업데이트 */
-    private updateProgressState;
-}

package/dist/components/progress-bar/UProgressBar.component.js

@@ -1,99 +0,0 @@
-import { html } from 'lit';
-import { query, state, property } from 'lit/decorators.js';
-import { BaseElement } from '../BaseElement.js';
-import { styles } from './UProgressBar.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 UProgressBar 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.updateProgressState();
-    }
-  }
-  render() {
-    return html`
-      <div class="indicator" part="indicator"
-        state=${this.progressState}
-      ></div>
-      <div class="content" part="content">
-        <slot></slot>
-      </div>
-    `;
-  }
-  /** 내부 진행 상태 업데이트 */
-  async updateProgressState() {
-    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")
-], UProgressBar.prototype, "indicatorEl");
-__decorateClass([
-  state()
-], UProgressBar.prototype, "progressState");
-__decorateClass([
-  state()
-], UProgressBar.prototype, "progress");
-__decorateClass([
-  property({ type: Boolean, reflect: true })
-], UProgressBar.prototype, "indeterminate");
-__decorateClass([
-  property({ type: Number })
-], UProgressBar.prototype, "minValue");
-__decorateClass([
-  property({ type: Number })
-], UProgressBar.prototype, "maxValue");
-__decorateClass([
-  property({ type: Number })
-], UProgressBar.prototype, "value");
-
-export { UProgressBar };

package/dist/components/progress-ring/UProgressRing.component.d.ts

@@ -1,33 +0,0 @@
-import { PropertyValues } from 'lit';
-import { BaseElement } from '../BaseElement.js';
-/** 원형 진행 표시기의 변형 타입 */
-export type ProgressRingVariant = 'smooth' | 'blocks' | 'ticks';
-/**
- * ProgressRing 컴포넌트는 원형 진행 표시기를 제공합니다.
- * 진행 상태를 시각적으로 나타내며, 크기와 두께를 스타일 속성으로 조절할 수 있습니다.
- */
-export declare class UProgressRing extends BaseElement {
-    static styles: import('lit').CSSResultGroup[];
-    static dependencies: Record<string, typeof BaseElement>;
-    dasharray: string;
-    progress: number;
-    /** 진행 표시기의 스타일 변형을 설정합니다. */
-    variant: ProgressRingVariant;
-    /** 진행 표시기의 최소값을 설정합니다. */
-    minValue: number;
-    /** 진행 표시기의 최대값을 설정합니다. */
-    maxValue: number;
-    /** 진행 표시기의 현재 값을 설정합니다. */
-    value: number;
-    protected willUpdate(changedProperties: PropertyValues): void;
-    render(): import('lit-html').TemplateResult<1>;
-    /**
-     * 진행 상태를 0과 1 사이의 값으로 반환합니다.
-     */
-    private updateProgressState;
-    /**
-     * variant에 따라 dasharray 값을 반환합니다.
-     * [dash-length] [gap-length] or [dash-length] 형식
-     */
-    private updateDashArray;
-}