@iyulab/components 0.2.3 → 0.4.0

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

@@ -1,6 +1,6 @@
 import { html } from 'lit';
 import { property } from 'lit/decorators.js';
-import { BaseElement } from '../BaseElement.js';
+import { UElement } from '../UElement.js';
 import { USpinner } from '../spinner/USpinner.component.js';
 import { styles } from './UButton.styles.js';
 
@@ -13,7 +13,7 @@ var __decorateClass = (decorators, target, key, kind) => {
   if (result) __defProp(target, key, result);
   return result;
 };
-class UButton extends BaseElement {
+class UButton extends UElement {
   constructor() {
     super(...arguments);
     this.variant = "default";

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

@@ -0,0 +1,21 @@
+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

@@ -0,0 +1,66 @@
+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/card/UCard.d.ts

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

package/dist/components/card/UCard.js

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

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

@@ -0,0 +1 @@
+export declare const styles: import('lit').CSSResult;

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

@@ -0,0 +1,76 @@
+import { css } from 'lit';
+
+const styles = css`
+  :host {
+    display: flex;
+    flex-direction: column;
+    background-color: var(--u-panel-bg-color);
+    border-radius: 8px;
+    overflow: hidden;
+    border: 1px solid var(--u-border-color);
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+  }
+  :host([borderless]) {
+    border: none;
+  }
+  :host([shadowless]) {
+    box-shadow: none;
+  }
+  :host([hoverable]) {
+    cursor: pointer;
+    transition: all 0.2s ease;
+  }
+  :host([hoverable]:hover) {
+    transform: translateY(-2px);
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+  }
+  :host([orientation="horizontal"]) {
+    flex-direction: row;
+  }
+
+  .media {
+    display: none;
+    flex-shrink: 0;
+    overflow: hidden;
+  }
+  .media.has-content {
+    display: block;
+  }
+
+  .content {
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+    min-width: 0;
+  }
+
+  .header {
+    display: none;
+    padding: 16px;
+    border-bottom: 1px solid var(--u-border-color);
+  }
+  .header.has-content {
+    display: block;
+  }
+
+  .body {
+    display: none;
+    flex: 1;
+    padding: 16px;
+  }
+  .body.has-content {
+    display: block;
+  }
+
+  .footer {
+    display: none;
+    padding: 16px;
+    border-top: 1px solid var(--u-border-color);
+  }
+  .footer.has-content {
+    display: block;
+  }
+
+`;
+
+export { styles };

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

@@ -0,0 +1,78 @@
+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;
+}

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

@@ -0,0 +1,264 @@
+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/carousel/UCarousel.d.ts

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

package/dist/components/carousel/UCarousel.js

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

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

@@ -0,0 +1 @@
+export declare const styles: import('lit').CSSResult;

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

@@ -0,0 +1,112 @@
+import { css } from 'lit';
+
+const styles = css`
+  :host {
+    --slide-gap: 0px;
+    --slides-per-view: 1;
+  }
+  :host {
+    position: relative;
+    display: block;
+    width: 100%;
+    overflow: hidden;
+  }
+  :host([draggable]) .slides-wrapper {
+    cursor: grab;
+    user-select: none;
+  }
+  :host([draggable]) .slides-wrapper:active {
+    cursor: grabbing;
+  }
+  :host([draggable]) ::slotted(*) {
+    -webkit-user-drag: none;
+    user-select: none;
+  }
+
+  /* ── Slides ── */
+  .slides-wrapper {
+    position: relative;
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+    touch-action: pan-y;
+  }
+
+  .slides {
+    display: flex;
+    flex-direction: row;
+    width: 100%;
+    height: 100%;
+    gap: var(--slide-gap, 0px);
+    transition: transform 0.3s ease-in-out;
+  }
+
+  ::slotted(*) {
+    flex: 0 0 calc(
+      (100% - (var(--slides-per-view) - 1) * var(--slide-gap, 0px)) / var(--slides-per-view)
+    );
+    min-width: 0;
+    height: 100%;
+  }
+
+  /* ── Navigation ── */
+  .nav-button {
+    position: absolute;
+    z-index: 10;
+    top: 50%;
+    transform: translateY(-50%);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 24px;
+    color: var(--u-neutral-900);
+    border: none;
+    background-color: transparent;
+  }
+  .nav-button:hover {
+    opacity: 0.5;
+    transform: scale(1.2) translateY(-40%);
+  }
+  .nav-button:active {
+    opacity: 0.8;
+    transform: scale(1.1) translateY(-45%);
+  }
+
+  .nav-button.prev { left: 16px; }
+  .nav-button.next { right: 16px; }
+
+  /* ── Pagination ── */
+  .indicator {
+    position: absolute;
+    z-index: 10;
+    bottom: 16px;
+    left: 50%;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+    gap: 8px;
+    transform: translateX(-50%);
+  }
+
+  .dot {
+    width: 10px;
+    height: 10px;
+    padding: 0;
+    border: none;
+    border-radius: 50%;
+    background-color: var(--u-neutral-400);
+    cursor: pointer;
+    transition: all 0.2s ease;
+  }
+  .dot:hover {
+    background-color: var(--u-neutral-200);
+  }
+  .dot[active] {
+    width: 24px;
+    border-radius: 5px;
+    background-color: var(--u-neutral-100);
+  }
+`;
+
+export { styles };

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

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