@iyulab/components 0.4.0 → 1.0.0

package/dist/components/UModalElement.js

@@ -1,144 +0,0 @@
-import { property } from 'lit/decorators.js';
-import { UElement } from './UElement.js';
-import { styles } from './UModalElement.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 UModalElement extends UElement {
-  constructor() {
-    super(...arguments);
-    this.open = false;
-    this.strategy = "fixed";
-    this.modal = true;
-    this.closable = true;
-    /** 백드롭 클릭 핸들러 */
-    this.handlePointerdown = (e) => {
-      if (!this.modal || !this.open) return;
-      const origin = e.composedPath()[0];
-      if (origin === this) {
-        if (this.closable) {
-          this.hide();
-        } else {
-          this.block();
-        }
-      }
-    };
-    /** 키보드 이벤트 핸들러 */
-    this.handleWindowKeydown = (e) => {
-      if (!this.modal || !this.open) return;
-      if (e.key === "Escape" && this.open) {
-        e.preventDefault();
-        if (this.closable) {
-          this.hide();
-        } else {
-          this.block();
-        }
-      }
-    };
-    /** 포커스 트랩 핸들러 */
-    this.handleWindowFocusin = (e) => {
-      if (!this.modal || !this.open) return;
-      const target = e.target;
-      if (!this.contains(target)) {
-        e.preventDefault();
-        this.focus();
-      }
-    };
-  }
-  static {
-    /** 기본 스타일을 정의합니다. */
-    this.styles = [super.styles, styles];
-  }
-  static {
-    /** 종속된 컴포넌트를 정의합니다. */
-    this.dependencies = {};
-  }
-  connectedCallback() {
-    super.connectedCallback();
-    this.setAttribute("tabindex", "-1");
-    this.addEventListener("pointerdown", this.handlePointerdown);
-  }
-  disconnectedCallback() {
-    window.removeEventListener("keydown", this.handleWindowKeydown);
-    window.removeEventListener("focusin", this.handleWindowFocusin);
-    super.disconnectedCallback();
-  }
-  updated(changedProperties) {
-    super.updated(changedProperties);
-    if (changedProperties.has("open")) {
-      this.toggleAttribute("aria-hidden", !this.open);
-      this.toggleAttribute("inert", !this.open);
-      this.updateOpenState(this.open);
-    }
-    if (changedProperties.has("modal")) {
-      this.updateModalState(this.modal);
-    }
-  }
-  /** 
-   * 모달을 표시합니다 
-   */
-  async show() {
-    await this.updateComplete;
-    requestAnimationFrame(() => {
-      this.open = true;
-    });
-  }
-  /** 
-   * 모달을 숨깁니다 
-   */
-  async hide() {
-    await this.updateComplete;
-    requestAnimationFrame(() => {
-      this.open = false;
-    });
-  }
-  /** 
-   * 모달이 차단 상태일 때 호출 됩니다 
-   */
-  async block() {
-    await this.updateComplete;
-  }
-  /** 엘리먼트의 열림/닫힘 상태를 업데이트합니다 */
-  updateOpenState(open) {
-    if (open) {
-      this.emit("u-show");
-      document.body.style.overflow = this.modal ? "hidden" : "";
-    } else {
-      this.emit("u-hide");
-      document.body.style.overflow = "";
-    }
-  }
-  /** 모달 모드 상태를 업데이트합니다 */
-  updateModalState(modal) {
-    if (modal) {
-      window.addEventListener("keydown", this.handleWindowKeydown);
-      window.addEventListener("focusin", this.handleWindowFocusin);
-      document.body.style.overflow = this.open ? "hidden" : "";
-    } else {
-      window.removeEventListener("keydown", this.handleWindowKeydown);
-      window.removeEventListener("focusin", this.handleWindowFocusin);
-      document.body.style.overflow = "";
-    }
-  }
-}
-__decorateClass([
-  property({ type: Boolean, reflect: true })
-], UModalElement.prototype, "open");
-__decorateClass([
-  property({ type: String, reflect: true })
-], UModalElement.prototype, "strategy");
-__decorateClass([
-  property({ type: Boolean, reflect: true })
-], UModalElement.prototype, "modal");
-__decorateClass([
-  property({ type: Boolean, reflect: true })
-], UModalElement.prototype, "closable");
-
-export { UModalElement };

package/dist/components/UModalElement.styles.js

@@ -1,29 +0,0 @@
-import { css } from 'lit';
-
-const styles = css`
-  :host {
-    position: fixed;
-    z-index: 9999;
-    top: 0;
-    bottom: 0;
-    left: 0;
-    right: 0;
-    opacity: 0;
-    background: transparent;
-    transition: opacity 0.3s, background 0.3s ease;
-  }
-  :host([open]) {
-    opacity: 1;
-  }
-  :host([modal]) {
-    background: var(--u-overlay-bg-color);
-  }
-  :host([strategy="fixed"]) {
-    position: fixed;
-  }
-  :host([strategy="absolute"]) {
-    position: absolute;
-  }
-`;
-
-export { styles };

package/dist/components/alert/UAlert.component.d.ts

@@ -1,40 +0,0 @@
-import { PropertyValues } from 'lit';
-import { UElement } from '../UElement.js';
-export type AlertType = "error" | "warning" | "info" | "success" | "notice";
-/**
- * 사용자에게 메시지를 표시하는 Alert 컴포넌트입니다.
- * 자동 닫힘 타이머, 접기/펼치기 기능 등을 제공합니다.
- */
-export declare class UAlert extends UElement {
-    static styles: import('lit').CSSResultGroup[];
-    static dependencies: Record<string, typeof UElement>;
-    private timeoutId?;
-    /** 표시 여부 */
-    open: boolean;
-    /** 상태 (warning, error, info, success, notice) */
-    type: AlertType;
-    /** 타이틀 라벨 */
-    heading?: string;
-    /** 본문 내용 */
-    content?: string;
-    /** 본문 최소 행 수 */
-    minRows: number;
-    /** 본문 최대 행 수 */
-    maxRows: number;
-    /** 자동 닫힘 타이머 (밀리초 단위, 0일 경우 자동 닫힘 없음) */
-    duration: number;
-    protected updated(changedProperties: PropertyValues): void;
-    render(): import('lit-html').TemplateResult<1>;
-    /**
-     * Alert를 표시합니다.
-     */
-    show(): Promise<void>;
-    /**
-     * Alert를 숨깁니다.
-     */
-    hide(): Promise<void>;
-    /** Alert 타입에 따른 아이콘 이름을 반환합니다. */
-    private getIconName;
-    /** open 속성 변경에 따른 상태 업데이트를 처리합니다. */
-    private updateOpenState;
-}

package/dist/components/alert/UAlert.component.js

@@ -1,146 +0,0 @@
-import { html } from 'lit';
-import { property } from 'lit/decorators.js';
-import { UElement } from '../UElement.js';
-import { UIcon } from '../icon/UIcon.component.js';
-import { styles } from './UAlert.styles.js';
-import { unsafeHTML } from 'lit/directives/unsafe-html.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 UAlert extends UElement {
-  constructor() {
-    super(...arguments);
-    this.open = false;
-    this.type = "info";
-    this.minRows = 1;
-    this.maxRows = 3;
-    this.duration = 0;
-  }
-  static {
-    this.styles = [super.styles, styles];
-  }
-  static {
-    this.dependencies = {
-      "u-icon": UIcon
-    };
-  }
-  updated(changedProperties) {
-    super.updated(changedProperties);
-    if (changedProperties.has("open")) {
-      this.toggleAttribute("aria-hidden", !this.open);
-      this.toggleAttribute("inert", !this.open);
-      this.updateOpenState(this.open);
-    }
-    if (changedProperties.has("minRows") && this.minRows < this.maxRows && this.minRows > 0) {
-      this.style.setProperty("--min-content-rows", `${this.minRows}`);
-    }
-    if (changedProperties.has("maxRows") && this.maxRows > this.minRows && this.maxRows > 0) {
-      this.style.setProperty("--max-content-rows", `${this.maxRows}`);
-    }
-  }
-  render() {
-    return html`
-      <div class="container" part="base">
-        <div class="header" part="header">
-          <u-icon class="icon" part="icon"
-            .lib=${"internal"}
-            .name=${this.getIconName(this.type)}
-          ></u-icon>
-          <div class="title" part="title">
-            ${this.heading || this.type.toUpperCase()}
-          </div>
-          <u-icon class="close-btn" part="close-btn"
-            .lib=${"internal"}
-            .name=${"x-lg"}
-            @click=${this.hide}
-          ></u-icon>
-        </div>
-        <div class="content" part="content" scrollable>
-          ${this.content ? unsafeHTML(this.content) : html`<slot></slot>`}
-        </div>
-        <div class="footer" part="footer">
-          <slot name="footer"></slot>
-        </div>
-      </div>
-    `;
-  }
-  /**
-   * Alert를 표시합니다. 
-   */
-  async show() {
-    await this.updateComplete;
-    requestAnimationFrame(() => {
-      this.open = true;
-    });
-  }
-  /** 
-   * Alert를 숨깁니다. 
-   */
-  async hide() {
-    await this.updateComplete;
-    requestAnimationFrame(() => {
-      this.open = false;
-    });
-  }
-  /** Alert 타입에 따른 아이콘 이름을 반환합니다. */
-  getIconName(type) {
-    switch (type) {
-      case "error":
-        return "exclamation-circle-fill";
-      case "warning":
-        return "exclamation-triangle-fill";
-      case "info":
-        return "info-circle-fill";
-      case "success":
-        return "check-circle-fill";
-      case "notice":
-        return "bell-fill";
-      default:
-        return "bell-fill";
-    }
-  }
-  /** open 속성 변경에 따른 상태 업데이트를 처리합니다. */
-  updateOpenState(open) {
-    if (open) {
-      if (this.duration && this.duration > 0) {
-        this.timeoutId = window.setTimeout(() => {
-          this.hide();
-        }, this.duration);
-      }
-      this.emit("u-show");
-    } else {
-      clearTimeout(this.timeoutId);
-      this.emit("u-hide");
-    }
-  }
-}
-__decorateClass([
-  property({ type: Boolean, reflect: true })
-], UAlert.prototype, "open");
-__decorateClass([
-  property({ type: String, reflect: true })
-], UAlert.prototype, "type");
-__decorateClass([
-  property({ type: String })
-], UAlert.prototype, "heading");
-__decorateClass([
-  property({ type: String })
-], UAlert.prototype, "content");
-__decorateClass([
-  property({ type: Number })
-], UAlert.prototype, "minRows");
-__decorateClass([
-  property({ type: Number })
-], UAlert.prototype, "maxRows");
-__decorateClass([
-  property({ type: Number })
-], UAlert.prototype, "duration");
-
-export { UAlert };

package/dist/components/button/UButton.component.d.ts

@@ -1,23 +0,0 @@
-import { UElement } from '../UElement.js';
-export type ButtonVariant = "default" | "borderless" | "link";
-/**
- * Button 컴포넌트는 클릭 가능한 버튼을 나타내며, 로딩 상태와 툴팁 기능을 지원합니다.
- * @slot - 버튼 내부에 표시할 콘텐츠를 삽입합니다.
- * @slot prefix - 버튼의 접두사로 표시할 콘텐츠를 삽입합니다.
- * @slot suffix - 버튼의 접미사로 표시할 콘텐츠를 삽입합니다.
- */
-export declare class UButton extends UElement {
-    static styles: import('lit').CSSResultGroup[];
-    static dependencies: Record<string, typeof UElement>;
-    /** 버튼의 스타일 변형을 설정합니다. */
-    variant: ButtonVariant;
-    /** 버튼이 비활성화 상태인지 여부를 설정합니다. 비활성화된 버튼은 클릭할 수 없습니다. */
-    disabled: boolean;
-    /** 버튼이 로딩 상태인지 여부를 설정합니다. 로딩 중에는 버튼이 비활성화되고 스피너가 표시됩니다. */
-    loading: boolean;
-    connectedCallback(): void;
-    disconnectedCallback(): void;
-    render(): import('lit-html').TemplateResult<1>;
-    /** 클릭 이벤트 컨트롤 */
-    private handleClick;
-}

package/dist/components/button/UButton.component.js

@@ -1,72 +0,0 @@
-import { html } from 'lit';
-import { property } from 'lit/decorators.js';
-import { UElement } from '../UElement.js';
-import { USpinner } from '../spinner/USpinner.component.js';
-import { styles } from './UButton.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 UButton extends UElement {
-  constructor() {
-    super(...arguments);
-    this.variant = "default";
-    this.disabled = false;
-    this.loading = false;
-    /** 클릭 이벤트 컨트롤 */
-    this.handleClick = (e) => {
-      if (this.disabled || this.loading) {
-        e.preventDefault();
-        e.stopImmediatePropagation();
-      }
-    };
-  }
-  static {
-    this.styles = [super.styles, styles];
-  }
-  static {
-    this.dependencies = {
-      "u-spinner": USpinner
-    };
-  }
-  connectedCallback() {
-    super.connectedCallback();
-    this.addEventListener("click", this.handleClick);
-  }
-  disconnectedCallback() {
-    this.removeEventListener("click", this.handleClick);
-    super.disconnectedCallback();
-  }
-  render() {
-    return html`
-      <button part="base" 
-        ?disabled=${this.disabled || this.loading}>
-        <slot name="prefix"></slot>
-        <slot></slot>
-        <slot name="suffix"></slot>
-      </button>
-      
-      <div class="mask" part="mask"
-        ?hidden=${!this.loading}>
-        <u-spinner></u-spinner>
-      </div>
-    `;
-  }
-}
-__decorateClass([
-  property({ type: String, reflect: true })
-], UButton.prototype, "variant");
-__decorateClass([
-  property({ type: Boolean, reflect: true })
-], UButton.prototype, "disabled");
-__decorateClass([
-  property({ type: Boolean, reflect: true })
-], UButton.prototype, "loading");
-
-export { UButton };

package/dist/components/card/UCard.component.d.ts

@@ -1,21 +0,0 @@
-import { UElement } from '../UElement.js';
-/**
- * Card 컴포넌트는 콘텐츠를 카드 형태로 표시합니다.
- * @slot - 카드의 메인 콘텐츠를 삽입합니다.
- * @slot header - 카드 상단의 헤더 영역에 표시할 콘텐츠를 삽입합니다.
- * @slot footer - 카드 하단의 푸터 영역에 표시할 콘텐츠를 삽입합니다.
- * @slot media - 카드의 미디어 영역에 표시할 이미지, 비디오 등을 삽입합니다.
- */
-export declare class UCard extends UElement {
-    static styles: import('lit').CSSResultGroup[];
-    /** 카드의 그림자 효과를 제거할지 여부를 설정합니다. */
-    shadowless: boolean;
-    /** 카드의 경계선을 제거할지 여부를 설정합니다. */
-    borderless: boolean;
-    /** 카드에 호버 효과를 적용할지 여부를 설정합니다. */
-    hoverable: boolean;
-    /** 카드의 레이아웃 방향을 설정합니다. 'vertical'(세로) 또는 'horizontal'(가로) */
-    orientation: 'vertical' | 'horizontal';
-    render(): import('lit-html').TemplateResult<1>;
-    private handleSlotChange;
-}

package/dist/components/card/UCard.component.js

@@ -1,66 +0,0 @@
-import { html } from 'lit';
-import { property } from 'lit/decorators.js';
-import { UElement } from '../UElement.js';
-import { styles } from './UCard.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 UCard extends UElement {
-  constructor() {
-    super(...arguments);
-    this.shadowless = false;
-    this.borderless = false;
-    this.hoverable = false;
-    this.orientation = "vertical";
-  }
-  static {
-    this.styles = [super.styles, styles];
-  }
-  render() {
-    return html`
-      <div part="media" class="media">
-        <slot name="media" @slotchange=${this.handleSlotChange}></slot>
-      </div>
-      <div class="content">
-        <header part="header" class="header">
-          <slot name="header" @slotchange=${this.handleSlotChange}></slot>
-        </header>
-        <div part="body" class="body">
-          <slot @slotchange=${this.handleSlotChange}></slot>
-        </div>
-        <footer part="footer" class="footer">
-          <slot name="footer" @slotchange=${this.handleSlotChange}></slot>
-        </footer>
-      </div>
-    `;
-  }
-  handleSlotChange(e) {
-    const slot = e.target;
-    const container = slot.parentElement;
-    const hasContent = slot.assignedNodes({ flatten: true }).length > 0;
-    if (container) {
-      container.classList.toggle("has-content", hasContent);
-    }
-  }
-}
-__decorateClass([
-  property({ type: Boolean, reflect: true })
-], UCard.prototype, "shadowless");
-__decorateClass([
-  property({ type: Boolean, reflect: true })
-], UCard.prototype, "borderless");
-__decorateClass([
-  property({ type: Boolean, reflect: true })
-], UCard.prototype, "hoverable");
-__decorateClass([
-  property({ type: String, reflect: true })
-], UCard.prototype, "orientation");
-
-export { UCard };

package/dist/components/carousel/UCarousel.component.d.ts

@@ -1,78 +0,0 @@
-import { PropertyValues } from 'lit';
-import { UElement } from '../UElement.js';
-/**
- * Carousel 컴포넌트는 여러 슬라이드를 회전하며 표시합니다.
- *
- * @slot - 슬라이드로 표시할 콘텐츠. 각 자식 요소가 하나의 슬라이드.
- * @event u-change - 슬라이드 변경 시. detail: { index: number }
- *
- * @csspart slides - 슬라이드 컨테이너 (aspect-ratio 등 외부 스타일링)
- * @csspart prev-button - 이전 버튼
- * @csspart next-button - 다음 버튼
- * @csspart indicator - 인디케이터 컨테이너
- * @csspart dot - 인디케이터 도트
- */
-export declare class UCarousel extends UElement {
-    static styles: import('lit').CSSResultGroup[];
-    static dependencies: Record<string, typeof UElement>;
-    /** 자동 재생 활성화 */
-    autoplay: boolean;
-    /** 자동 재생 간격 (ms) */
-    autoplayInterval: number;
-    /** 처음/끝에서 순환 이동 */
-    loop: boolean;
-    /** 이전/다음 네비게이션 버튼 표시 */
-    navigation: boolean;
-    /** 페이지 인디케이터 표시 */
-    pagination: boolean;
-    /** 드래그로 슬라이드 전환 */
-    draggable: boolean;
-    /** 한 화면에 표시할 슬라이드 수 */
-    slidesPerView: number;
-    /** 한 번에 이동할 슬라이드 수 */
-    slidesPerMove: number;
-    /** 슬라이드 간 간격 (px) */
-    gap: number;
-    /** 현재 활성 슬라이드 인덱스 */
-    index: number;
-    /** 전체 슬라이드 수 */
-    private slideCount;
-    /** 드래그 중인지 여부 */
-    private isDragging;
-    /** 드래그 중 이동 보정값 (단위: %) */
-    private dragOffset;
-    /** 타이머 및 드래그 상태 추적 필드 */
-    private autoplayTimer?;
-    private dragStartX;
-    private dragStartTime;
-    private pointerDown;
-    /** 한 화면에 표시할 슬라이드 수 (최소 1) */
-    private get perView();
-    /** 한 번에 이동할 슬라이드 수 (최소 1) */
-    private get perMove();
-    /** 슬라이드가 이동할 수 있는 최대 index */
-    private get maxIndex();
-    /** 총 페이지 수 (인디케이터 도트 수) */
-    private get pageCount();
-    /** 현재 페이지 (인디케이터 도트 활성화에 사용) */
-    private get currentPage();
-    connectedCallback(): void;
-    disconnectedCallback(): void;
-    protected willUpdate(changedProperties: PropertyValues): void;
-    protected updated(changedProperties: PropertyValues): void;
-    render(): import('lit-html').TemplateResult<1>;
-    /** 이전 슬라이드로 이동 */
-    prev: () => void;
-    /** 다음 슬라이드로 이동 */
-    next: () => void;
-    /** 지정한 인덱스로 이동 */
-    goTo: (index: number) => void;
-    private startAutoplay;
-    private stopAutoplay;
-    private handleSlotChange;
-    private handleDragStart;
-    private handlePointerDown;
-    private handlePointerMove;
-    private handlePointerUp;
-    private handleClickCancel;
-}