@iyulab/components 0.4.0 → 1.0.0

package/dist/components/popover/UPopover.d.ts

@@ -0,0 +1,69 @@
+import { PropertyValues } from 'lit';
+import { UFloatingElement } from '../UFloatingElement.js';
+export type PopoverTrigger = 'click' | 'contextmenu' | 'hover' | 'focus' | 'manual';
+export type PopoverDismiss = 'click' | 'escape' | 'scroll' | 'resize';
+/**
+ * 앵커 요소에 연결된 플로팅 팝오버 컴포넌트입니다.
+ * trigger와 dismiss 속성으로 드롭다운 메뉴, 컨텍스트 메뉴 등을 구현할 수 있습니다.
+ *
+ * @slot - 팝오버 내부 콘텐츠
+ *
+ * @event show - 팝오버가 표시되기 직전 발생 (취소 가능)
+ * @event hide - 팝오버가 닫히기 직전 발생 (취소 가능)
+ */
+export declare class UPopover extends UFloatingElement {
+    static styles: import('lit').CSSResultGroup[];
+    private static readonly SAFE_TIMER_DELAY;
+    /** 열릴 때 내부의 첫 번째 포커스 가능한 요소에 자동 포커스 */
+    autofocus: boolean;
+    /**
+     * 팝오버를 여는 트리거 방식
+     * - `click`: 클릭으로 열기
+     * - `contextmenu`: 우클릭으로 열기
+     * - `hover`: 마우스 오버 시 열기
+     * - `focus`: 포커스 시 열기
+     * - `manual`: 프로그래밍 방식으로만 열기
+     */
+    trigger: PopoverTrigger;
+    /**
+     * 팝오버를 닫는 조건 (쉼표 구분하여 복수 지정 가능)
+     * - `click`: 외부 클릭 시 닫기
+     * - `escape`: Escape 키 시 닫기
+     * - `scroll`: 스크롤 시 닫기
+     * - `resize`: 윈도우 리사이즈 시 닫기
+     */
+    dismiss: PopoverDismiss[];
+    /** 닫기 조건에 포함시킬 이벤트 목록 (쉼표 구분) */
+    dismissEvent: string[];
+    private safeTimer?;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    protected updated(changedProperties: PropertyValues): void;
+    render(): import('lit-html').TemplateResult<1>;
+    focusTo(index: number): void;
+    private bind;
+    private unbind;
+    private handleAnchorClick;
+    private handleAnchorKeydown;
+    private handleDocumentContextMenu;
+    private handleAnchorPointerEnter;
+    private handleAnchorPointerLeave;
+    private handlePopoverPointerEnter;
+    private handlePopoverPointerLeave;
+    private handleAnchorFocusIn;
+    private handleAnchorFocusOut;
+    private handlePopoverFocusIn;
+    private handlePopoverFocusOut;
+    private startSafeTimer;
+    private cancelSafeTimer;
+    private handleDocumentClick;
+    private handleDocumentKeydown;
+    private handleDocumentScroll;
+    private handleWindowResize;
+    private handlePopoverEvent;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'u-popover': UPopover;
+    }
+}

package/dist/components/popover/UPopover.js

@@ -0,0 +1,235 @@
+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 { UFloatingElement } from "../UFloatingElement.js";
+import { arrayAttrConverter } from "../../utilities/converters.js";
+import { styles } from "./UPopover.styles.js";
+import { customElement, property } from "lit/decorators.js";
+import { html } from "lit";
+//#region src/components/popover/UPopover.ts
+var _UPopover;
+var UPopover = class UPopover extends UFloatingElement {
+	static {
+		_UPopover = this;
+	}
+	constructor(..._args) {
+		super(..._args);
+		this.autofocus = false;
+		this.trigger = "click";
+		this.dismiss = [
+			"click",
+			"escape",
+			"scroll",
+			"resize"
+		];
+		this.dismissEvent = [];
+		this.handleAnchorClick = (e) => {
+			if (this.open) this.hide();
+			else this.show(e.currentTarget);
+		};
+		this.handleAnchorKeydown = (e) => {
+			if (![
+				"ArrowDown",
+				"Enter",
+				" "
+			].includes(e.key)) return;
+			e.preventDefault();
+			if (this.open) this.hide();
+			else this.show(e.currentTarget);
+		};
+		this.handleDocumentContextMenu = async (e) => {
+			if (this.open) await this.hide();
+			const path = e.composedPath();
+			if (!this.anchors?.some((a) => path.includes(a))) return;
+			e.preventDefault();
+			e.stopPropagation();
+			const virtualEl = this.createVirtualTarget(e);
+			this.show(virtualEl);
+		};
+		this.handleAnchorPointerEnter = (e) => {
+			this.cancelSafeTimer();
+			this.show(e.currentTarget);
+		};
+		this.handleAnchorPointerLeave = () => {
+			this.startSafeTimer();
+		};
+		this.handlePopoverPointerEnter = () => {
+			this.cancelSafeTimer();
+		};
+		this.handlePopoverPointerLeave = () => {
+			this.startSafeTimer();
+		};
+		this.handleAnchorFocusIn = (e) => {
+			this.cancelSafeTimer();
+			this.show(e.currentTarget);
+		};
+		this.handleAnchorFocusOut = () => {
+			this.startSafeTimer();
+		};
+		this.handlePopoverFocusIn = () => {
+			this.cancelSafeTimer();
+		};
+		this.handlePopoverFocusOut = () => {
+			this.startSafeTimer();
+		};
+		this.handleDocumentClick = (e) => {
+			if (this.trigger === "contextmenu") {
+				this.hide();
+				return;
+			}
+			const path = e.composedPath();
+			if (path.includes(this)) return;
+			if (this.anchors?.some((a) => path.includes(a))) return;
+			this.hide();
+		};
+		this.handleDocumentKeydown = (e) => {
+			if (e.key !== "Escape") return;
+			e.preventDefault();
+			this.hide();
+		};
+		this.handleDocumentScroll = () => {
+			this.hide();
+		};
+		this.handleWindowResize = () => {
+			this.hide();
+		};
+		this.handlePopoverEvent = () => {
+			this.hide();
+		};
+	}
+	static {
+		this.styles = [super.styles, styles];
+	}
+	static {
+		this.SAFE_TIMER_DELAY = 200;
+	}
+	connectedCallback() {
+		super.connectedCallback();
+		this.placement ??= "bottom-start";
+	}
+	disconnectedCallback() {
+		clearTimeout(this.safeTimer);
+		if (this.anchors) this.unbind(this.anchors);
+		super.disconnectedCallback();
+	}
+	updated(changedProperties) {
+		super.updated(changedProperties);
+		if (changedProperties.has("open") && this.open && this.autofocus) this.focusTo(0);
+		if ([
+			"anchors",
+			"trigger",
+			"dismiss"
+		].some((k) => changedProperties.has(k))) {
+			const oldAnchors = changedProperties.get("anchors");
+			const newAnchors = this.anchors;
+			if (["trigger", "dismiss"].some((k) => changedProperties.has(k))) this.unbind(newAnchors || []);
+			else if (oldAnchors) this.unbind(oldAnchors);
+			if (newAnchors) this.bind(newAnchors);
+		}
+	}
+	render() {
+		return html`<slot></slot>`;
+	}
+	focusTo(index) {
+		const focusables = this.renderRoot.querySelector("slot")?.assignedElements({ flatten: true }).filter((el) => {
+			if (!(el instanceof HTMLElement)) return false;
+			if (el.hasAttribute("disabled") || el.hasAttribute("hidden")) return false;
+			return el.matches("a, button, input, select, textarea, [tabindex]:not([tabindex=\"-1\"])");
+		});
+		if (!focusables || focusables.length === 0) {
+			this.focus();
+			return;
+		}
+		const target = focusables[index];
+		if (target) target.focus();
+		else focusables[0].focus();
+	}
+	bind(anchors) {
+		switch (this.trigger) {
+			case "click":
+				for (const anchor of anchors) {
+					anchor.addEventListener("click", this.handleAnchorClick);
+					anchor.addEventListener("keydown", this.handleAnchorKeydown);
+				}
+				break;
+			case "contextmenu":
+				document.addEventListener("contextmenu", this.handleDocumentContextMenu);
+				break;
+			case "hover":
+				for (const anchor of anchors) {
+					anchor.addEventListener("pointerenter", this.handleAnchorPointerEnter);
+					anchor.addEventListener("pointerleave", this.handleAnchorPointerLeave);
+				}
+				this.addEventListener("pointerenter", this.handlePopoverPointerEnter);
+				this.addEventListener("pointerleave", this.handlePopoverPointerLeave);
+				break;
+			case "focus":
+				for (const anchor of anchors) {
+					anchor.addEventListener("focusin", this.handleAnchorFocusIn);
+					anchor.addEventListener("focusout", this.handleAnchorFocusOut);
+				}
+				this.addEventListener("focusin", this.handlePopoverFocusIn);
+				this.addEventListener("focusout", this.handlePopoverFocusOut);
+				break;
+		}
+		const dismissList = new Set(this.dismiss);
+		if (dismissList.has("click")) document.addEventListener("click", this.handleDocumentClick);
+		if (dismissList.has("escape")) document.addEventListener("keydown", this.handleDocumentKeydown);
+		if (dismissList.has("scroll")) document.addEventListener("scroll", this.handleDocumentScroll, true);
+		if (dismissList.has("resize")) window.addEventListener("resize", this.handleWindowResize);
+		const dismissEventList = new Set(this.dismissEvent);
+		for (const eventName of dismissEventList) this.addEventListener(eventName, this.handlePopoverEvent);
+	}
+	unbind(anchors) {
+		for (const anchor of anchors) {
+			anchor.removeEventListener("click", this.handleAnchorClick);
+			anchor.removeEventListener("keydown", this.handleAnchorKeydown);
+			anchor.removeEventListener("pointerenter", this.handleAnchorPointerEnter);
+			anchor.removeEventListener("pointerleave", this.handleAnchorPointerLeave);
+			anchor.removeEventListener("focusin", this.handleAnchorFocusIn);
+			anchor.removeEventListener("focusout", this.handleAnchorFocusOut);
+		}
+		document.removeEventListener("contextmenu", this.handleDocumentContextMenu);
+		this.removeEventListener("pointerenter", this.handlePopoverPointerEnter);
+		this.removeEventListener("pointerleave", this.handlePopoverPointerLeave);
+		this.removeEventListener("focusin", this.handlePopoverFocusIn);
+		this.removeEventListener("focusout", this.handlePopoverFocusOut);
+		document.removeEventListener("click", this.handleDocumentClick);
+		document.removeEventListener("keydown", this.handleDocumentKeydown);
+		document.removeEventListener("scroll", this.handleDocumentScroll, true);
+		window.removeEventListener("resize", this.handleWindowResize);
+		for (const eventName of this.dismissEvent) this.removeEventListener(eventName, this.handlePopoverEvent);
+	}
+	startSafeTimer() {
+		clearTimeout(this.safeTimer);
+		this.safeTimer = window.setTimeout(() => {
+			this.safeTimer = void 0;
+			this.hide();
+		}, _UPopover.SAFE_TIMER_DELAY);
+	}
+	cancelSafeTimer() {
+		clearTimeout(this.safeTimer);
+		this.safeTimer = void 0;
+	}
+};
+__decorate([property({
+	type: Boolean,
+	reflect: true
+}), __decorateMetadata("design:type", Boolean)], UPopover.prototype, "autofocus", void 0);
+__decorate([property({
+	type: String,
+	reflect: true
+}), __decorateMetadata("design:type", Object)], UPopover.prototype, "trigger", void 0);
+__decorate([property({
+	type: Array,
+	reflect: true,
+	converter: arrayAttrConverter()
+}), __decorateMetadata("design:type", Array)], UPopover.prototype, "dismiss", void 0);
+__decorate([property({
+	type: Array,
+	reflect: true,
+	attribute: "dismiss-event",
+	converter: arrayAttrConverter()
+}), __decorateMetadata("design:type", Array)], UPopover.prototype, "dismissEvent", void 0);
+UPopover = _UPopover = __decorate([customElement("u-popover")], UPopover);
+//#endregion
+export { UPopover };

package/dist/components/popover/UPopover.styles.d.ts

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

package/dist/components/popover/UPopover.styles.js

@@ -0,0 +1,9 @@
+import { css } from "lit";
+//#region src/components/popover/UPopover.styles.ts
+var styles = css`
+  :host {
+    display: inline-block;
+  }
+`;
+//#endregion
+export { styles };

package/dist/components/progress-bar/UProgressBar.d.ts

@@ -1,7 +1,51 @@
-import { UProgressBar } from './UProgressBar.component.js';
+import { PropertyValues } from 'lit';
+import { UElement } from '../UElement.js';
+export type ProgressBarStatus = 'default' | 'success' | 'warning' | 'error' | 'info';
+/**
+ * 진행 상태를 시각적으로 표시하는 프로그레스 바 컴포넌트입니다.
+ *
+ * @slot - 바 위에 표시할 콘텐츠 (예: 퍼센트)
+ *
+ * @csspart buffer - 버퍼 바
+ * @csspart indicator - 진행 바
+ * @csspart segments - 세그먼트 간격 컨테이너
+ * @csspart content - 슬롯 콘텐츠 영역
+ *
+ * @cssprop --progress-bar-height - 바의 높이 (기본: 0.5em)
+ * @cssprop --progress-bar-color - 바 색상
+ * @cssprop --progress-bar-track-color - 트랙 배경색
+ * @cssprop --progress-bar-buffer-color - 버퍼 바 색상
+ */
+export declare class UProgressBar extends UElement {
+    static styles: import('lit').CSSResultGroup[];
+    /** 불확정 상태 (로딩 애니메이션 표시) */
+    indeterminate: boolean;
+    /** 줄무늬 효과 */
+    striped: boolean;
+    /** 둥근 모서리 */
+    rounded: boolean;
+    /** 상태 (색상 변경) */
+    status: ProgressBarStatus;
+    /** 세그먼트 개수 */
+    segments: number;
+    /** 세그먼트 간격 (px) */
+    segmentGap: number;
+    /** 최소값 */
+    min: number;
+    /** 최대값 */
+    max: number;
+    /** 버퍼값 */
+    buffer?: number;
+    /** 현재값 */
+    value: number;
+    private progress;
+    private bufferProgress;
+    protected willUpdate(changedProperties: PropertyValues): void;
+    render(): import('lit-html').TemplateResult<1>;
+    private calcProgress;
+}
 declare global {
     interface HTMLElementTagNameMap {
         'u-progress-bar': UProgressBar;
     }
 }
-export { UProgressBar };

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

@@ -1,5 +1,97 @@
-import { UProgressBar } from './UProgressBar.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 { styles } from "./UProgressBar.styles.js";
+import { customElement, property, state } from "lit/decorators.js";
+import { html } from "lit";
+//#region src/components/progress-bar/UProgressBar.ts
+var UProgressBar = class UProgressBar extends UElement {
+	constructor(..._args) {
+		super(..._args);
+		this.indeterminate = false;
+		this.striped = false;
+		this.rounded = false;
+		this.status = "default";
+		this.segments = 0;
+		this.segmentGap = 3;
+		this.min = 0;
+		this.max = 100;
+		this.value = 0;
+		this.progress = 0;
+		this.bufferProgress = 0;
+	}
+	static {
+		this.styles = [super.styles, styles];
+	}
+	willUpdate(changedProperties) {
+		super.willUpdate(changedProperties);
+		if ([
+			"min",
+			"max",
+			"buffer",
+			"value"
+		].some((k) => changedProperties.has(k))) {
+			this.progress = this.calcProgress(this.value);
+			this.bufferProgress = this.buffer !== void 0 ? this.calcProgress(this.buffer) : 0;
+		}
+	}
+	render() {
+		const hasBuffer = this.buffer !== void 0 && !this.indeterminate;
+		const hasSegments = this.segments > 1;
+		return html`
+      <div class="buffer" part="buffer" ?hidden=${!hasBuffer}
+        style=${`transform: scaleX(${this.bufferProgress})`}
+      ></div>
 
-UProgressBar.define("u-progress-bar");
+      <div class="indicator" part="indicator"
+        style=${this.indeterminate ? "" : `transform: scaleX(${this.progress})`}
+      ></div>
 
+      <div class="segments" part="segments" ?hidden=${!hasSegments}>
+        ${Array.from({ length: Math.max(this.segments - 1, 0) }, (_, i) => {
+			return html`<div class="segment-gap" style="left: ${(i + 1) / this.segments * 100}%; width: ${this.segmentGap}px;"></div>`;
+		})}
+      </div>
+
+      <div class="content" part="content">
+        <slot></slot>
+      </div>
+    `;
+	}
+	calcProgress(value) {
+		const range = this.max - this.min;
+		if (range === 0) return 0;
+		const p = (Math.max(this.min, Math.min(this.max, value)) - this.min) / range;
+		return isNaN(p) ? 0 : p;
+	}
+};
+__decorate([property({
+	type: Boolean,
+	reflect: true
+}), __decorateMetadata("design:type", Object)], UProgressBar.prototype, "indeterminate", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true
+}), __decorateMetadata("design:type", Object)], UProgressBar.prototype, "striped", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true
+}), __decorateMetadata("design:type", Object)], UProgressBar.prototype, "rounded", void 0);
+__decorate([property({
+	type: String,
+	reflect: true
+}), __decorateMetadata("design:type", Object)], UProgressBar.prototype, "status", void 0);
+__decorate([property({ type: Number }), __decorateMetadata("design:type", Number)], UProgressBar.prototype, "segments", void 0);
+__decorate([property({
+	type: Number,
+	attribute: "segment-gap"
+}), __decorateMetadata("design:type", Number)], UProgressBar.prototype, "segmentGap", void 0);
+__decorate([property({ type: Number }), __decorateMetadata("design:type", Number)], UProgressBar.prototype, "min", void 0);
+__decorate([property({ type: Number }), __decorateMetadata("design:type", Number)], UProgressBar.prototype, "max", void 0);
+__decorate([property({ type: Number }), __decorateMetadata("design:type", Number)], UProgressBar.prototype, "buffer", void 0);
+__decorate([property({ type: Number }), __decorateMetadata("design:type", Number)], UProgressBar.prototype, "value", void 0);
+__decorate([state(), __decorateMetadata("design:type", Number)], UProgressBar.prototype, "progress", void 0);
+__decorate([state(), __decorateMetadata("design:type", Number)], UProgressBar.prototype, "bufferProgress", void 0);
+UProgressBar = __decorate([customElement("u-progress-bar")], UProgressBar);
+//#endregion
 export { UProgressBar };

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

@@ -1,73 +1,147 @@
-import { css } from 'lit';
-
-const styles = css`
+import { css } from "lit";
+//#region src/components/progress-bar/UProgressBar.styles.ts
+var styles = css`
   :host {
-    --progress-value: 0;
+    --progress-bar-height: 0.5em;
+    --progress-bar-color: var(--u-blue-600);
+    --progress-bar-buffer-color: var(--u-blue-200);
+    --progress-bar-track-color: var(--u-neutral-200);
+  }
+
+  /* === Status Colors === */
+  :host([status="success"]) { 
+    --progress-bar-color: var(--u-green-600); 
+    --progress-bar-buffer-color: var(--u-green-200); 
+  }
+  :host([status="warning"]) { 
+    --progress-bar-color: var(--u-yellow-500); 
+    --progress-bar-buffer-color: var(--u-yellow-200); 
+  }
+  :host([status="error"]) { 
+    --progress-bar-color: var(--u-red-600); 
+    --progress-bar-buffer-color: var(--u-red-200); 
+  }
+  :host([status="info"]) { 
+    --progress-bar-color: var(--u-blue-500); 
+    --progress-bar-buffer-color: var(--u-blue-200); 
   }
 
   :host {
     position: relative;
     display: block;
     width: 100%;
-    height: 1em;
-    border-radius: 9999px;
-    background-color: var(--u-neutral-200);
-    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
+    height: var(--progress-bar-height);
+    background-color: var(--progress-bar-track-color);
     overflow: hidden;
   }
 
+  /* === Rounded === */
+  :host([rounded]) {
+    border-radius: 9999px;
+  }
+
+  /* === Indeterminate === */
+  :host([indeterminate]) .indicator {
+    animation: indeterminate-move 2s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;
+    transform: none !important;
+    inset: 0;
+  }
+
+  /* === Striped Effect === */
+  :host([striped]) .indicator {
+    background-image: linear-gradient(
+      45deg,
+      rgba(255, 255, 255, 0.15) 25%,
+      transparent 25%,
+      transparent 50%,
+      rgba(255, 255, 255, 0.15) 50%,
+      rgba(255, 255, 255, 0.15) 75%,
+      transparent 75%,
+      transparent
+    );
+    background-size: 1em 1em;
+    animation: striped-move 1s linear infinite;
+  }
+
+  :host([striped][indeterminate]) .indicator {
+    animation:
+      indeterminate-move 2s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite,
+      striped-move 1s linear infinite;
+  }
+
+  /* === Indicator Bar === */
   .indicator {
     position: absolute;
-    inset: 0 0 0 0;
-    display: block;
+    inset: 0;
     border-radius: inherit;
-    background-color: var(--u-blue-600);
+    background-color: var(--progress-bar-color);
     transform-origin: left center;
-    will-change: transform, opacity;
-  }
-  .indicator[state="turned-on"] {
-    opacity: 0;
     transform: scaleX(0);
-    transition: none;
+    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+    will-change: transform;
   }
-  .indicator[state="turned-off"] {
-    opacity: 0;
-    transform: scaleX(1);
-    transition: transform 0.3s ease, opacity 0.5s ease;
+
+  /* === Buffer Bar === */
+  .buffer {
+    position: absolute;
+    inset: 0;
+    border-radius: inherit;
+    background-color: var(--progress-bar-buffer-color);
+    transform-origin: left center;
+    transform: scaleX(0);
+    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+    will-change: transform;
   }
-  .indicator[state="determinate"] {
-    opacity: 1;
-    transform: scaleX(var(--progress-value));
-    transition: transform 0.3s ease;
+
+  /* === Segments === */
+  .segments {
+    position: absolute;
+    inset: 0;
+    z-index: 2;
+    pointer-events: none;
   }
-  .indicator[state="indeterminate"] {
-    opacity: 1;
-    transform: scaleX(1);
-    animation: indeterminate 1.5s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;
+  .segment-gap {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    background-color: var(--progress-bar-track-color);
+    transform: translateX(-50%);
   }
 
+  /* === Content (슬롯) === */
   .content {
     position: absolute;
-    z-index: 100;
+    inset: 0;
+    z-index: 3;
     display: flex;
-    inset: 0 0 0 0;
     align-items: center;
     justify-content: center;
-    font-size: 0.5em;
-    line-height: 1em;
+    font-size: 0.65em;
+    line-height: 1;
     white-space: nowrap;
     user-select: none;
     pointer-events: none;
   }
 
-  @keyframes indeterminate {
+  @keyframes indeterminate-move {
     0% {
-      transform: translateX(-100%);
+      left: -35%;
+      right: 100%;
+    }
+    60% {
+      left: 100%;
+      right: -90%;
     }
     100% {
-      transform: translateX(100%);
+      left: 100%;
+      right: -90%;
     }
   }
-`;
 
+  @keyframes striped-move {
+    from { background-position: 1em 0; }
+    to { background-position: 0 0; }
+  }
+`;
+//#endregion
 export { styles };