@iyulab/components 0.4.0 → 1.0.0

package/dist/components/carousel/UCarousel.component.js

@@ -1,264 +0,0 @@
-import { html } from 'lit';
-import { property, state } from 'lit/decorators.js';
-import { UElement } from '../UElement.js';
-import { UButton } from '../button/UButton.component.js';
-import { UIcon } from '../icon/UIcon.component.js';
-import { styles } from './UCarousel.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 UCarousel extends UElement {
-  constructor() {
-    super(...arguments);
-    this.autoplay = false;
-    this.autoplayInterval = 3e3;
-    this.loop = false;
-    this.navigation = false;
-    this.pagination = false;
-    this.draggable = false;
-    this.slidesPerView = 1;
-    this.slidesPerMove = 1;
-    this.gap = 0;
-    this.index = 0;
-    this.slideCount = 0;
-    this.isDragging = false;
-    this.dragOffset = 0;
-    this.dragStartX = 0;
-    this.dragStartTime = 0;
-    this.pointerDown = false;
-    /** 이전 슬라이드로 이동 */
-    this.prev = () => {
-      const target = Math.max(0, this.index - this.perMove);
-      if (target !== this.index) {
-        this.goTo(target);
-      } else if (this.loop) {
-        this.goTo(Math.min((this.pageCount - 1) * this.perMove, this.maxIndex));
-      }
-    };
-    /** 다음 슬라이드로 이동 */
-    this.next = () => {
-      const target = Math.min(this.maxIndex, this.index + this.perMove);
-      if (target !== this.index) {
-        this.goTo(target);
-      } else if (this.loop) {
-        this.goTo(0);
-      }
-    };
-    /** 지정한 인덱스로 이동 */
-    this.goTo = (index) => {
-      if (index < 0 || index > this.maxIndex || index === this.index) return;
-      this.index = index;
-      this.emit("u-change", {
-        index: this.index
-      });
-      if (this.autoplay) this.startAutoplay();
-    };
-    this.handleDragStart = (e) => {
-      e.preventDefault();
-    };
-    this.handlePointerDown = (e) => {
-      if (e.button !== 0) return;
-      this.pointerDown = true;
-      this.dragStartX = e.clientX;
-      this.dragOffset = 0;
-      this.dragStartTime = Date.now();
-      if (this.autoplay) this.stopAutoplay();
-    };
-    this.handlePointerMove = (e) => {
-      if (!this.pointerDown) return;
-      const wrapper = e.currentTarget;
-      const offset = (e.clientX - this.dragStartX) / wrapper.offsetWidth * 100;
-      if (!this.isDragging && Math.abs(e.clientX - this.dragStartX) > 5) {
-        this.isDragging = true;
-        wrapper.setPointerCapture(e.pointerId);
-      }
-      if (this.isDragging) {
-        this.dragOffset = offset;
-      }
-    };
-    this.handlePointerUp = (e) => {
-      if (!this.pointerDown) return;
-      const elapsed = Date.now() - this.dragStartTime;
-      const absDrag = Math.abs(this.dragOffset);
-      if (this.isDragging && (absDrag > 20 || absDrag > 5 && elapsed < 300)) {
-        if (this.dragOffset < 0) this.next();
-        else this.prev();
-        this.addEventListener("click", this.handleClickCancel, {
-          capture: true,
-          once: true
-        });
-      }
-      if (this.isDragging) {
-        const wrapper = e.currentTarget;
-        wrapper.releasePointerCapture(e.pointerId);
-      }
-      this.pointerDown = false;
-      this.isDragging = false;
-      this.dragOffset = 0;
-      if (this.autoplay) this.startAutoplay();
-    };
-    this.handleClickCancel = (e) => {
-      e.preventDefault();
-      e.stopPropagation();
-    };
-  }
-  static {
-    this.styles = [super.styles, styles];
-  }
-  static {
-    this.dependencies = {
-      "u-button": UButton,
-      "u-icon": UIcon
-    };
-  }
-  /** 한 화면에 표시할 슬라이드 수 (최소 1) */
-  get perView() {
-    return Math.max(1, this.slidesPerView);
-  }
-  /** 한 번에 이동할 슬라이드 수 (최소 1) */
-  get perMove() {
-    return Math.max(1, this.slidesPerMove);
-  }
-  /** 슬라이드가 이동할 수 있는 최대 index */
-  get maxIndex() {
-    return Math.max(0, this.slideCount - this.perView);
-  }
-  /** 총 페이지 수 (인디케이터 도트 수) */
-  get pageCount() {
-    return this.maxIndex <= 0 ? 1 : Math.ceil(this.maxIndex / this.perMove) + 1;
-  }
-  /** 현재 페이지 (인디케이터 도트 활성화에 사용) */
-  get currentPage() {
-    return this.index >= this.maxIndex ? this.pageCount - 1 : Math.floor(this.index / this.perMove);
-  }
-  connectedCallback() {
-    super.connectedCallback();
-    if (this.autoplay) this.startAutoplay();
-  }
-  disconnectedCallback() {
-    this.stopAutoplay();
-    super.disconnectedCallback();
-  }
-  willUpdate(changedProperties) {
-    super.willUpdate(changedProperties);
-    if (changedProperties.has("slidesPerView")) {
-      this.style.setProperty("--slides-per-view", String(this.perView));
-    }
-    if (changedProperties.has("gap")) {
-      this.style.setProperty("--slide-gap", `${this.gap}px`);
-    }
-  }
-  updated(changedProperties) {
-    super.updated(changedProperties);
-    if (changedProperties.has("autoplay") || changedProperties.has("autoplayInterval")) {
-      if (this.autoplay) this.startAutoplay();
-      else this.stopAutoplay();
-    }
-  }
-  render() {
-    const pct = -(this.index * (100 / this.perView)) + this.dragOffset;
-    const gapPx = this.gap > 0 ? -(this.index * this.gap / this.perView) : 0;
-    const transform = gapPx ? `translateX(calc(${pct}% + ${gapPx}px))` : `translateX(${pct}%)`;
-    const style = `transform: ${transform}${this.isDragging ? "; transition: none" : ""}`;
-    return html`
-      <div class="slides-wrapper"
-        @dragstart=${this.handleDragStart}
-        @pointerdown=${this.draggable ? this.handlePointerDown : null}
-        @pointermove=${this.draggable ? this.handlePointerMove : null}
-        @pointerup=${this.draggable ? this.handlePointerUp : null}
-        @pointerleave=${this.draggable ? this.handlePointerUp : null}>
-        <div part="slides" class="slides" style="${style}">
-          <slot @slotchange=${this.handleSlotChange}></slot>
-        </div>
-      </div>
-
-      <u-button part="prev-button" class="nav-button prev"
-        ?hidden=${!this.navigation || !this.loop && this.index <= 0}
-        @click=${this.prev}>
-        <u-icon lib="internal" name="chevron-left"></u-icon>
-      </u-button>
-      <u-button part="next-button" class="nav-button next"
-        ?hidden=${!this.navigation || !this.loop && this.index >= this.maxIndex}
-        @click=${this.next}>
-        <u-icon lib="internal" name="chevron-right"></u-icon>
-      </u-button>
-
-      <div part="indicator" class="indicator"
-        ?hidden=${!this.pagination || !this.slideCount}>
-        ${Array.from({ length: this.pageCount }, (_, i) => html`
-          <button part="dot" class="dot"
-            ?active=${i === this.currentPage}
-            @click=${() => this.goTo(Math.min(i * this.perMove, this.maxIndex))}>
-          </button>
-        `)}
-      </div>
-    `;
-  }
-  startAutoplay() {
-    this.stopAutoplay();
-    this.autoplayTimer = window.setInterval(() => {
-      this.next();
-    }, this.autoplayInterval);
-  }
-  stopAutoplay() {
-    if (this.autoplayTimer) {
-      clearInterval(this.autoplayTimer);
-      this.autoplayTimer = void 0;
-    }
-  }
-  handleSlotChange(e) {
-    const slot = e.target;
-    this.slideCount = slot.assignedElements().length;
-    if (this.index >= this.slideCount) {
-      this.index = Math.max(0, this.slideCount - 1);
-    }
-  }
-}
-__decorateClass([
-  property({ type: Boolean })
-], UCarousel.prototype, "autoplay");
-__decorateClass([
-  property({ type: Number, attribute: "autoplay-interval" })
-], UCarousel.prototype, "autoplayInterval");
-__decorateClass([
-  property({ type: Boolean })
-], UCarousel.prototype, "loop");
-__decorateClass([
-  property({ type: Boolean })
-], UCarousel.prototype, "navigation");
-__decorateClass([
-  property({ type: Boolean })
-], UCarousel.prototype, "pagination");
-__decorateClass([
-  property({ type: Boolean, reflect: true })
-], UCarousel.prototype, "draggable");
-__decorateClass([
-  property({ type: Number, attribute: "slides-per-view" })
-], UCarousel.prototype, "slidesPerView");
-__decorateClass([
-  property({ type: Number, attribute: "slides-per-move" })
-], UCarousel.prototype, "slidesPerMove");
-__decorateClass([
-  property({ type: Number })
-], UCarousel.prototype, "gap");
-__decorateClass([
-  property({ type: Number })
-], UCarousel.prototype, "index");
-__decorateClass([
-  state()
-], UCarousel.prototype, "slideCount");
-__decorateClass([
-  state()
-], UCarousel.prototype, "isDragging");
-__decorateClass([
-  state()
-], UCarousel.prototype, "dragOffset");
-
-export { UCarousel };

package/dist/components/dialog/UDialog.component.d.ts

@@ -1,17 +0,0 @@
-import { UElement } from '../UElement.js';
-import { UModalElement } from '../UModalElement.js';
-/**
- * Dialog 컴포넌트는 모달 대화상자를 제공합니다.
- * 오버레이와 함께 화면 중앙에 표시되며, 헤더, 본문, 푸터 영역을 슬롯으로 제공합니다.
- */
-export declare class UDialog extends UModalElement {
-    static styles: import('lit').CSSResultGroup[];
-    static dependencies: Record<string, typeof UElement>;
-    /** 헤드리스 모드 여부 */
-    headless: boolean;
-    /** 타이틀 텍스트 */
-    heading: string;
-    render(): import('lit-html').TemplateResult<1>;
-    /** block시 진동 효과를 적용합니다. */
-    protected block(): Promise<void>;
-}

package/dist/components/dialog/UDialog.component.js

@@ -1,70 +0,0 @@
-import { html } from 'lit';
-import { property } from 'lit/decorators.js';
-import { UModalElement } from '../UModalElement.js';
-import { UIcon } from '../icon/UIcon.component.js';
-import { UButton } from '../button/UButton.component.js';
-import { styles } from './UDialog.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 UDialog extends UModalElement {
-  constructor() {
-    super(...arguments);
-    this.headless = false;
-    this.heading = "";
-  }
-  static {
-    this.styles = [super.styles, styles];
-  }
-  static {
-    this.dependencies = {
-      "u-icon": UIcon,
-      "u-button": UButton
-    };
-  }
-  render() {
-    return html`
-      <div class="dialog" part="base" ?open=${this.open}>
-        <div class="header" part="header" ?hidden=${this.headless}>
-          <span class="title" part="title">
-            ${this.heading}
-          </span>
-          <u-button class="close-btn" part="close-btn"
-            variant="link"
-            @click=${() => this.hide()}>
-            <u-icon lib="internal" name="x-lg"></u-icon>
-          </u-button>
-        </div>
-
-        <div class="content" part="content" scrollable>
-          <slot></slot>
-        </div>
-      </div>
-    `;
-  }
-  /** block시 진동 효과를 적용합니다. */
-  async block() {
-    await super.block();
-    const dialogEl = this.renderRoot.querySelector(".dialog");
-    if (!dialogEl) return;
-    dialogEl.setAttribute("shake", "");
-    setTimeout(() => {
-      dialogEl.removeAttribute("shake");
-    }, 500);
-  }
-}
-__decorateClass([
-  property({ type: Boolean, reflect: true })
-], UDialog.prototype, "headless");
-__decorateClass([
-  property({ type: String })
-], UDialog.prototype, "heading");
-
-export { UDialog };

package/dist/components/divider/UDivider.component.d.ts

@@ -1,10 +0,0 @@
-import { UElement } from '../UElement.js';
-/**
- * Divider 컴포넌트는 엘리먼트 사이에 구분선을 제공합니다.
- */
-export declare class UDivider extends UElement {
-    static styles: import('lit').CSSResultGroup[];
-    static dependencies: Record<string, typeof UElement>;
-    /** 수직 방향 여부를 설정합니다. (기본값: 수평) */
-    vertical: boolean;
-}

package/dist/components/divider/UDivider.component.js

@@ -1,30 +0,0 @@
-import { property } from 'lit/decorators.js';
-import { UElement } from '../UElement.js';
-import { styles } from './UDivider.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 UDivider extends UElement {
-  constructor() {
-    super(...arguments);
-    this.vertical = false;
-  }
-  static {
-    this.styles = [super.styles, styles];
-  }
-  static {
-    this.dependencies = {};
-  }
-}
-__decorateClass([
-  property({ type: Boolean, reflect: true })
-], UDivider.prototype, "vertical");
-
-export { UDivider };

package/dist/components/drawer/UDrawer.component.d.ts

@@ -1,18 +0,0 @@
-import { UElement } from '../UElement.js';
-import { UModalElement } from '../UModalElement.js';
-export type DrawerPlacement = 'left' | 'right' | 'top' | 'bottom';
-/**
- * Drawer 컴포넌트는 화면 가장자리에서 슬라이드하여 나타나는 패널을 제공합니다.
- * 네비게이션, 설정 패널, 상세 정보 표시 등에 사용됩니다.
- */
-export declare class UDrawer extends UModalElement {
-    static styles: import('lit').CSSResultGroup[];
-    static dependencies: Record<string, typeof UElement>;
-    /** 드로어가 나타나는 위치 */
-    placement: DrawerPlacement;
-    /** 헤드리스 모드 여부 */
-    headless: boolean;
-    /** 타이틀 텍스트 */
-    heading: string;
-    render(): import('lit-html').TemplateResult<1>;
-}

package/dist/components/drawer/UDrawer.component.js

@@ -1,64 +0,0 @@
-import { html } from 'lit';
-import { property } from 'lit/decorators.js';
-import { UModalElement } from '../UModalElement.js';
-import { UIcon } from '../icon/UIcon.component.js';
-import { UButton } from '../button/UButton.component.js';
-import { styles } from './UDrawer.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 UDrawer extends UModalElement {
-  constructor() {
-    super(...arguments);
-    this.placement = "left";
-    this.headless = false;
-    this.heading = "";
-  }
-  static {
-    this.styles = [super.styles, styles];
-  }
-  static {
-    this.dependencies = {
-      "u-icon": UIcon,
-      "u-button": UButton
-    };
-  }
-  render() {
-    return html`
-      <div class="drawer" part="base" ?open=${this.open} placement=${this.placement}>
-        <div class="header" part="header" ?hidden=${this.headless}>
-          <span class="title" part="title">
-            ${this.heading}
-          </span>
-          <u-button class="close-btn" part="close-btn"
-            variant="link"
-            @click=${() => this.hide()}>
-            <u-icon lib="internal" name="x-lg"></u-icon>
-          </u-button>
-        </div>
-
-        <div class="content" part="content" scrollable>
-          <slot></slot>
-        </div>
-      </div>
-    `;
-  }
-}
-__decorateClass([
-  property({ type: String, reflect: true })
-], UDrawer.prototype, "placement");
-__decorateClass([
-  property({ type: Boolean, reflect: true })
-], UDrawer.prototype, "headless");
-__decorateClass([
-  property({ type: String })
-], UDrawer.prototype, "heading");
-
-export { UDrawer };

package/dist/components/form/UForm.component.d.ts

@@ -1,24 +0,0 @@
-import { UElement } from '../UElement.js';
-/**
- * Form 컴포넌트는 여러 입력 요소를 그룹화하고 관리하는 폼 컨테이너입니다.
- * 폼 내의 입력 요소들의 값 변경을 감지하고, 포함 및 제외 규칙에 따라 폼 컨텍스트에 데이터를 자동으로 업데이트합니다.
- */
-export declare class UForm extends UElement {
-    static styles: import('lit').CSSResultGroup[];
-    static dependencies: Record<string, typeof UElement>;
-    /** 포함할 입력 요소의 name 속성 목록입니다. */
-    includes: string[];
-    /** 제외할 입력 요소의 name 속성 목록입니다. */
-    excludes: string[];
-    /** 폼의 컨텍스트 데이터를 설정합니다. */
-    context?: any;
-    connectedCallback(): void;
-    disconnectedCallback(): void;
-    render(): import('lit-html').TemplateResult<1>;
-    /**
-     * 폼 내의 모든 입력 요소를 검증합니다.
-     */
-    validate(): boolean;
-    /** 입력 요소의 변경 이벤트를 처리합니다. */
-    private handleInputChange;
-}

package/dist/components/form/UForm.component.js

@@ -1,76 +0,0 @@
-import { html } from 'lit';
-import { property } from 'lit/decorators.js';
-import { arrayAttrConverter } from '../../utilities/converters.js';
-import { UElement } from '../UElement.js';
-import { UInput } from '../input/UInput.component.js';
-import { styles } from './UForm.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 UForm extends UElement {
-  constructor() {
-    super(...arguments);
-    this.includes = [];
-    this.excludes = [];
-    /** 입력 요소의 변경 이벤트를 처리합니다. */
-    this.handleInputChange = (e) => {
-      const input = e.target;
-      const name = input.name;
-      const value = input.value;
-      if (!name) return;
-      if (!this.includes.includes(name)) return;
-      if (this.excludes.includes(name)) return;
-      if (this.context && typeof this.context === "object") {
-        this.context[name] = value;
-      }
-    };
-  }
-  static {
-    this.styles = [super.styles, styles];
-  }
-  static {
-    this.dependencies = {};
-  }
-  connectedCallback() {
-    super.connectedCallback();
-    this.addEventListener("change", this.handleInputChange);
-  }
-  disconnectedCallback() {
-    this.removeEventListener("change", this.handleInputChange);
-    super.disconnectedCallback();
-  }
-  render() {
-    return html`
-      <slot></slot>
-    `;
-  }
-  /** 
-   * 폼 내의 모든 입력 요소를 검증합니다. 
-   */
-  validate() {
-    const slot = this.shadowRoot?.querySelector("slot");
-    const elements = slot?.assignedElements({ flatten: true }).filter((el) => el instanceof UInput);
-    if (!elements) return true;
-    if (elements.length === 0) return true;
-    const isValid = Array.from(elements).every((input) => input.validate());
-    return isValid;
-  }
-}
-__decorateClass([
-  property({ type: Array, converter: arrayAttrConverter((v) => v) })
-], UForm.prototype, "includes");
-__decorateClass([
-  property({ type: Array, converter: arrayAttrConverter((v) => v) })
-], UForm.prototype, "excludes");
-__decorateClass([
-  property({ type: Object, attribute: false })
-], UForm.prototype, "context");
-
-export { UForm };

package/dist/components/icon/UIcon.component.d.ts

@@ -1,29 +0,0 @@
-import { nothing } from 'lit';
-import { UElement } from '../UElement.js';
-export type IconLibrary = "internal" | "default" | (string & {});
-/**
- * 아이콘 컴포넌트입니다. SVG 아이콘을 이름으로 불러와서 렌더링합니다.
- */
-export declare class UIcon extends UElement {
-    static styles: import('lit').CSSResultGroup[];
-    static dependencies: Record<string, typeof UElement>;
-    /**
-     * 사용할 아이콘 라이브러리를 지정합니다.
-     * - 기본 내장 라이브러리: `internal`, `default`
-     * - 사용자 확장 라이브러리: `icons.register()`로 등록한 라이브러리 이름
-     *
-     * @default "default"
-     */
-    lib: IconLibrary;
-    /**
-     * 사용할 아이콘의 이름을 지정합니다.
-     */
-    name?: string;
-    render(): import('lit-html/directive.js').DirectiveResult<{
-        new (_partInfo: import('lit-html/directive.js').PartInfo): import('lit-html/directives/until.js').UntilDirective<typeof nothing | Promise<import('lit-html/directive.js').DirectiveResult<typeof import('lit-html/directives/unsafe-html.js').UnsafeHTMLDirective>>>;
-    }>;
-    /**
-     * SVG 콘텐츠가 유효한 HTML인지 검사합니다.
-     */
-    private validate;
-}

package/dist/components/icon/UIcon.component.js

@@ -1,57 +0,0 @@
-import { nothing } from 'lit';
-import { property } from 'lit/decorators.js';
-import { unsafeHTML } from 'lit/directives/unsafe-html.js';
-import { until } from 'lit/directives/until.js';
-import { UElement } from '../UElement.js';
-import { IconRegistry } from '../../utilities/IconRegistry.js';
-import { styles } from './UIcon.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 UIcon extends UElement {
-  constructor() {
-    super(...arguments);
-    this.lib = "default";
-  }
-  static {
-    this.styles = [super.styles, styles];
-  }
-  static {
-    this.dependencies = {};
-  }
-  render() {
-    if (!this.lib || !this.name) return nothing;
-    return until(IconRegistry.resolve(this.lib, this.name).then((html) => {
-      return this.validate(html) ? unsafeHTML(html) : nothing;
-    }), nothing);
-  }
-  /**
-   * SVG 콘텐츠가 유효한 HTML인지 검사합니다.
-   */
-  validate(html) {
-    if (!html) return false;
-    const trimmed = html.trim();
-    try {
-      const doc = new DOMParser().parseFromString(trimmed, "image/svg+xml");
-      if (doc.querySelector("parsererror")) return false;
-      return doc.documentElement?.tagName.toLowerCase() === "svg";
-    } catch {
-      return false;
-    }
-  }
-}
-__decorateClass([
-  property({ type: String })
-], UIcon.prototype, "lib");
-__decorateClass([
-  property({ type: String })
-], UIcon.prototype, "name");
-
-export { UIcon };