@iyulab/components 0.3.0 → 1.0.0

package/dist/components/button-group/UButtonGroup.js

@@ -0,0 +1,93 @@
+import { UElement } from "../UElement.js";
+import { __decorateMetadata } from "../../_virtual/_@oxc-project_runtime@0.122.0/helpers/decorateMetadata.js";
+import { __decorate } from "../../_virtual/_@oxc-project_runtime@0.122.0/helpers/decorate.js";
+import { UButton } from "../button/UButton.js";
+import { UIconButton } from "../icon-button/UIconButton.js";
+import { styles } from "./UButtonGroup.styles.js";
+import { customElement, property } from "lit/decorators.js";
+import { html } from "lit";
+//#region src/components/button-group/UButtonGroup.ts
+var UButtonGroup = class UButtonGroup extends UElement {
+	constructor(..._args) {
+		super(..._args);
+		this.variant = "solid";
+		this.vertical = false;
+		this.disabled = false;
+		this.handleSlotChange = () => {
+			this.propagate();
+		};
+	}
+	static {
+		this.styles = [super.styles, styles];
+	}
+	updated(changedProperties) {
+		super.updated(changedProperties);
+		if ([
+			"variant",
+			"disabled",
+			"vertical"
+		].some((k) => changedProperties.has(k))) this.propagate();
+	}
+	render() {
+		return html`
+      <slot @slotchange=${this.handleSlotChange}></slot>
+    `;
+	}
+	propagate() {
+		const buttons = (this.shadowRoot?.querySelector("slot"))?.assignedElements({ flatten: true }).filter((el) => el instanceof UButton || el instanceof UIconButton);
+		if (!buttons?.length) return;
+		const variant = this.variant;
+		const vertical = this.vertical;
+		const lastIndex = buttons.length - 1;
+		const isGhost = variant === "ghost" || variant === "link";
+		const isSolid = variant === "solid" || variant === "filled";
+		buttons.forEach((button, index) => {
+			button.variant = variant;
+			button.disabled = this.disabled;
+			const radius = this.getRadius(index, lastIndex, vertical);
+			const margin = index > 0 && !isGhost ? "-1px" : "";
+			const borderCollapse = isSolid && button instanceof UButton;
+			if (button instanceof UIconButton) {
+				const inner = button.shadowRoot?.querySelector("u-button");
+				if (inner) inner.style.borderRadius = radius;
+				button.style.borderRadius = "";
+				button.style.margin = vertical ? `${margin} 0 0 0` : `0 0 0 ${margin}`;
+			} else {
+				button.style.borderRadius = radius;
+				button.style.margin = vertical ? `${margin} 0 0 0` : `0 0 0 ${margin}`;
+				if (borderCollapse) if (vertical) {
+					button.style.borderBottomWidth = index < lastIndex ? "0" : "";
+					button.style.borderRightWidth = "";
+				} else {
+					button.style.borderRightWidth = index < lastIndex ? "0" : "";
+					button.style.borderBottomWidth = "";
+				}
+				else {
+					button.style.borderRightWidth = "";
+					button.style.borderBottomWidth = "";
+				}
+			}
+		});
+	}
+	getRadius(index, last, vertical) {
+		if (last === 0) return "6px";
+		if (index === 0) return vertical ? "6px 6px 0 0" : "6px 0 0 6px";
+		if (index === last) return vertical ? "0 0 6px 6px" : "0 6px 6px 0";
+		return "0";
+	}
+};
+__decorate([property({
+	type: String,
+	reflect: true
+}), __decorateMetadata("design:type", Object)], UButtonGroup.prototype, "variant", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true
+}), __decorateMetadata("design:type", Object)], UButtonGroup.prototype, "vertical", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true
+}), __decorateMetadata("design:type", Object)], UButtonGroup.prototype, "disabled", void 0);
+UButtonGroup = __decorate([customElement("u-button-group")], UButtonGroup);
+//#endregion
+export { UButtonGroup };

package/dist/components/button-group/UButtonGroup.styles.d.ts

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

package/dist/components/button-group/UButtonGroup.styles.js

@@ -0,0 +1,34 @@
+import { css } from "lit";
+//#region src/components/button-group/UButtonGroup.styles.ts
+var styles = css`
+  :host {
+    display: inline-flex;
+    flex-direction: row;
+    align-items: stretch;
+    font-size: 14px;
+  }
+
+  :host([vertical]) {
+    flex-direction: column;
+  }
+
+  ::slotted(u-button),
+  ::slotted(u-icon-button) {
+    font-size: inherit;
+  }
+
+  /* hover/focus 시 border 겹침 위로 올리기 */
+  ::slotted(u-button:hover),
+  ::slotted(u-button:focus-within),
+  ::slotted(u-icon-button:hover),
+  ::slotted(u-icon-button:focus-within) {
+    z-index: 1;
+  }
+
+  :host([variant="ghost"]),
+  :host([variant="link"]) {
+    gap: 2px;
+  }
+`;
+//#endregion
+export { styles };

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

@@ -1,7 +1,34 @@
-import { UCard } from './UCard.component.js';
+import { UElement } from '../UElement.js';
+export type CardOrientation = 'vertical' | 'horizontal';
+/**
+ * 콘텐츠를 카드 형태로 표시하는 컴포넌트입니다.
+ *
+ * @slot - 카드의 본문 콘텐츠
+ * @slot header - 카드 상단 헤더 영역
+ * @slot footer - 카드 하단 푸터 영역
+ * @slot media - 카드의 미디어 영역 (이미지, 동영상 등)
+ *
+ * @csspart media - 미디어 영역 컨테이너
+ * @csspart content - 콘텐츠 영역 컨테이너
+ * @csspart header - 헤더 영역 컨테이너
+ * @csspart body - 본문 영역 컨테이너
+ * @csspart footer - 푸터 영역 컨테이너
+ */
+export declare class UCard extends UElement {
+    static styles: import('lit').CSSResultGroup[];
+    /** 카드 레이아웃 방향 */
+    orientation: CardOrientation;
+    /** 그림자 제거 여부 */
+    shadowless: boolean;
+    /** 테두리 제거 여부 */
+    borderless: boolean;
+    /** 마우스 오버 효과 적용 여부 */
+    hoverable: boolean;
+    render(): import('lit-html').TemplateResult<1>;
+    private handleSlotChange;
+}
 declare global {
     interface HTMLElementTagNameMap {
-        "u-card": UCard;
+        'u-card': UCard;
     }
 }
-export { UCard };

package/dist/components/card/UCard.js

@@ -1,5 +1,62 @@
-import { UCard } from './UCard.component.js';
-
-UCard.define("u-card");
-
+import { UElement } from "../UElement.js";
+import { __decorateMetadata } from "../../_virtual/_@oxc-project_runtime@0.122.0/helpers/decorateMetadata.js";
+import { __decorate } from "../../_virtual/_@oxc-project_runtime@0.122.0/helpers/decorate.js";
+import { styles } from "./UCard.styles.js";
+import { customElement, property } from "lit/decorators.js";
+import { html } from "lit";
+//#region src/components/card/UCard.ts
+var UCard = class UCard extends UElement {
+	constructor(..._args) {
+		super(..._args);
+		this.orientation = "vertical";
+		this.shadowless = false;
+		this.borderless = false;
+		this.hoverable = false;
+	}
+	static {
+		this.styles = [super.styles, styles];
+	}
+	render() {
+		return html`
+      <div class="media" part="media">
+        <slot name="media" @slotchange=${this.handleSlotChange}></slot>
+      </div>
+      <div class="content" part="content">
+        <header class="header" part="header">
+          <slot name="header" @slotchange=${this.handleSlotChange}></slot>
+        </header>
+        <div class="body" part="body">
+          <slot @slotchange=${this.handleSlotChange}></slot>
+        </div>
+        <footer class="footer" part="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);
+	}
+};
+__decorate([property({
+	type: String,
+	reflect: true
+}), __decorateMetadata("design:type", Object)], UCard.prototype, "orientation", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true
+}), __decorateMetadata("design:type", Object)], UCard.prototype, "shadowless", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true
+}), __decorateMetadata("design:type", Object)], UCard.prototype, "borderless", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true
+}), __decorateMetadata("design:type", Object)], UCard.prototype, "hoverable", void 0);
+UCard = __decorate([customElement("u-card")], UCard);
+//#endregion
 export { UCard };

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

@@ -1,14 +1,19 @@
-import { css } from 'lit';
-
-const styles = css`
+import { css } from "lit";
+//#region src/components/card/UCard.styles.ts
+var 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);
+    border-radius: 8px;
+    background-color: var(--u-panel-bg-color);
     box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+    overflow: hidden;
+  }
+  :host([orientation="vertical"]) {
+    flex-direction: column;
+  }
+  :host([orientation="horizontal"]) {
+    flex-direction: row;
   }
   :host([borderless]) {
     border: none;
@@ -24,9 +29,6 @@ const styles = css`
     transform: translateY(-2px);
     box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
   }
-  :host([orientation="horizontal"]) {
-    flex-direction: row;
-  }
 
   .media {
     display: none;
@@ -70,7 +72,6 @@ const styles = css`
   .footer.has-content {
     display: block;
   }
-
 `;
-
+//#endregion
 export { styles };

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

@@ -1,7 +1,69 @@
-import { UCarousel } from './UCarousel.component.js';
+import { PropertyValues } from 'lit';
+import { UElement } from '../UElement.js';
+/**
+ * 여러 슬라이드를 전환하며 표시하는 캐러셀 컴포넌트입니다.
+ *
+ * @slot - 슬라이드로 표시할 콘텐츠 (각 자식 요소가 하나의 슬라이드)
+ *
+ * @csspart slides - 슬라이드 컨테이너
+ * @csspart prev-button - 이전 버튼
+ * @csspart next-button - 다음 버튼
+ * @csspart indicator - 페이지네이션 컨테이너
+ * @csspart dot - 페이지네이션 점
+ */
+export declare class UCarousel extends UElement {
+    static styles: import('lit').CSSResultGroup[];
+    /** 자동 재생 활성화 */
+    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;
+    private get perView();
+    private get perMove();
+    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;
+}
 declare global {
     interface HTMLElementTagNameMap {
-        "u-carousel": UCarousel;
+        'u-carousel': UCarousel;
     }
 }
-export { UCarousel };

package/dist/components/carousel/UCarousel.js

@@ -1,5 +1,222 @@
-import { UCarousel } from './UCarousel.component.js';
+import { UElement } from "../UElement.js";
+import { __decorateMetadata } from "../../_virtual/_@oxc-project_runtime@0.122.0/helpers/decorateMetadata.js";
+import { __decorate } from "../../_virtual/_@oxc-project_runtime@0.122.0/helpers/decorate.js";
+import "../icon/UIcon.js";
+import "../button/UButton.js";
+import { styles } from "./UCarousel.styles.js";
+import { customElement, property, state } from "lit/decorators.js";
+import { html } from "lit";
+//#region src/components/carousel/UCarousel.ts
+var UCarousel = class UCarousel extends UElement {
+	constructor(..._args) {
+		super(..._args);
+		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;
+			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) e.currentTarget.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];
+	}
+	get perView() {
+		return Math.max(1, this.slidesPerView);
+	}
+	get perMove() {
+		return Math.max(1, this.slidesPerMove);
+	}
+	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 style = `transform: ${gapPx ? `translateX(calc(${pct}% + ${gapPx}px))` : `translateX(${pct}%)`}${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>
 
-UCarousel.define("u-carousel");
+      <u-button part="prev-button" class="nav-button prev"
+        ?hidden=${!this.navigation || !this.loop && this.index <= 0}
+        variant="ghost"
+        rounded
+        @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}
+        variant="ghost"
+        rounded
+        @click=${this.next}>
+        <u-icon lib="internal" name="chevron-right"></u-icon>
+      </u-button>
 
+      <div part="indicator" class="indicator"
+        ?hidden=${!this.pagination || this.pageCount <= 1}>
+        ${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) {
+		this.slideCount = e.target.assignedElements().length;
+		if (this.index >= this.slideCount) this.index = Math.max(0, this.slideCount - 1);
+	}
+};
+__decorate([property({
+	type: Boolean,
+	reflect: true
+}), __decorateMetadata("design:type", Object)], UCarousel.prototype, "autoplay", void 0);
+__decorate([property({
+	type: Number,
+	attribute: "autoplay-interval"
+}), __decorateMetadata("design:type", Object)], UCarousel.prototype, "autoplayInterval", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true
+}), __decorateMetadata("design:type", Object)], UCarousel.prototype, "loop", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true
+}), __decorateMetadata("design:type", Object)], UCarousel.prototype, "navigation", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true
+}), __decorateMetadata("design:type", Object)], UCarousel.prototype, "pagination", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true
+}), __decorateMetadata("design:type", Object)], UCarousel.prototype, "draggable", void 0);
+__decorate([property({
+	type: Number,
+	attribute: "slides-per-view"
+}), __decorateMetadata("design:type", Object)], UCarousel.prototype, "slidesPerView", void 0);
+__decorate([property({
+	type: Number,
+	attribute: "slides-per-move"
+}), __decorateMetadata("design:type", Object)], UCarousel.prototype, "slidesPerMove", void 0);
+__decorate([property({ type: Number }), __decorateMetadata("design:type", Object)], UCarousel.prototype, "gap", void 0);
+__decorate([property({ type: Number }), __decorateMetadata("design:type", Object)], UCarousel.prototype, "index", void 0);
+__decorate([state(), __decorateMetadata("design:type", Object)], UCarousel.prototype, "slideCount", void 0);
+__decorate([state(), __decorateMetadata("design:type", Object)], UCarousel.prototype, "isDragging", void 0);
+__decorate([state(), __decorateMetadata("design:type", Object)], UCarousel.prototype, "dragOffset", void 0);
+UCarousel = __decorate([customElement("u-carousel")], UCarousel);
+//#endregion
 export { UCarousel };