@iyulab/components 0.3.0 → 1.0.0

package/dist/components/option/UOption.js

@@ -0,0 +1,64 @@
+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 { styles } from "./UOption.styles.js";
+import { customElement, property } from "lit/decorators.js";
+import { html, nothing } from "lit";
+//#region src/components/option/UOption.ts
+var UOption = class UOption extends UElement {
+	constructor(..._args) {
+		super(..._args);
+		this.disabled = false;
+		this.selected = false;
+		this.value = "";
+	}
+	static {
+		this.styles = [super.styles, styles];
+	}
+	connectedCallback() {
+		super.connectedCallback();
+		this.setAttribute("role", "option");
+		this.setAttribute("tabindex", this.disabled ? "-1" : "0");
+	}
+	render() {
+		return html`
+      ${this.renderMarker()}
+      <slot name="prefix"></slot>
+      <div class="content" part="content">
+        <slot></slot>
+      </div>
+      <slot name="suffix"></slot>
+    `;
+	}
+	getText() {
+		return this.renderRoot.querySelector("slot:not([name])")?.assignedNodes({ flatten: true }).map((n) => n.textContent?.trim()).filter(Boolean).join("") || this.value;
+	}
+	renderMarker() {
+		if (this.marker === "radio") return html`<span class="radio-marker" part="radio-marker"></span>`;
+		if (this.marker === "check") return html`
+        <u-icon class="check-marker" part="check-marker"
+          ?hidden=${!this.selected}
+          lib="internal"
+          name="check-lg"
+        ></u-icon>
+      `;
+		return nothing;
+	}
+};
+__decorate([property({
+	type: Boolean,
+	reflect: true
+}), __decorateMetadata("design:type", Boolean)], UOption.prototype, "disabled", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true
+}), __decorateMetadata("design:type", Boolean)], UOption.prototype, "selected", void 0);
+__decorate([property({
+	type: String,
+	reflect: true
+}), __decorateMetadata("design:type", Object)], UOption.prototype, "marker", void 0);
+__decorate([property({ type: String }), __decorateMetadata("design:type", String)], UOption.prototype, "value", void 0);
+UOption = __decorate([customElement("u-option")], UOption);
+//#endregion
+export { UOption };

package/dist/components/option/UOption.styles.d.ts

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

package/dist/components/option/UOption.styles.js

@@ -0,0 +1,132 @@
+import { css } from "lit";
+//#region src/components/option/UOption.styles.ts
+var styles = css`
+  :host {
+    --option-color-interactive: inherit;
+    --option-border-color-interactive: var(--u-border-color-hover);
+    --option-background-color-interactive: var(--u-bg-color-hover);
+
+    --option-color-active: inherit;
+    --option-border-color-active: var(--u-blue-600);
+    --option-background-color-active: var(--u-blue-100);
+
+    --option-color-active-interactive: inherit;
+    --option-border-color-active-interactive: var(--u-blue-600);
+    --option-background-color-active-interactive: var(--u-blue-200);
+  }
+
+  :host {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    padding: 0.25em 0.5em;
+    transition: background-color 0.15s ease, color 0.15s ease;
+    user-select: none;
+    cursor: pointer;
+  }
+  :host(:focus-visible) {
+    outline: none;
+  }
+  :host([disabled]) {
+    opacity: 0.5;
+    pointer-events: none;
+  }
+
+  :host(:not([disabled]):hover),
+  :host(:not([disabled]):focus-visible) {
+    color: var(--option-color-interactive);
+    border-color: var(--option-border-color-interactive);
+    background-color: var(--option-background-color-interactive);
+  }
+  :host([selected]) {
+    font-weight: 600;
+    color: var(--option-color-active);
+    border-color: var(--option-border-color-active);
+    background-color: var(--option-background-color-active);
+  }
+  :host([selected]:hover),
+  :host([selected]:focus-visible) {
+    color: var(--option-color-active-interactive);
+    border-color: var(--option-border-color-active-interactive);
+    background-color: var(--option-background-color-active-interactive);
+  }
+
+  :host([marker="radio"]:not([disabled]):hover),
+  :host([marker="radio"]:not([disabled]):focus-visible) {
+    color: inherit;
+    border-color: transparent;
+    background-color: transparent;
+  }
+  :host([marker="radio"][selected]) {
+    font-weight: inherit;
+    color: inherit;
+    border-color: transparent;
+    background-color: transparent;
+  }
+  :host([marker="radio"][selected]:hover),
+  :host([marker="radio"][selected]:focus-visible) {
+    color: inherit;
+    border-color: transparent;
+    background-color: transparent;
+  }
+
+  .content {
+    line-height: 1.5;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  /* 라디오 마커 (원형) */
+  .radio-marker {
+    flex-shrink: 0;
+    margin-right: 0.5em;
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 1.25em;
+    height: 1.25em;
+    border: 2px solid var(--u-neutral-400);
+    border-radius: 50%;
+    background-color: var(--u-bg-color);
+    transition: border-color 0.2s ease, background-color 0.2s ease;
+  }
+  :host([marker="radio"]:not([disabled]):hover) .radio-marker,
+  :host([marker="radio"]:not([disabled]):focus-visible) .radio-marker {
+    border-color: var(--option-border-color-interactive);
+  }
+  :host([marker="radio"][selected]) .radio-marker {
+    border-color: var(--option-border-color-active);
+    background-color: var(--option-background-color-active);
+  }
+  :host([marker="radio"][selected]:hover) .radio-marker,
+  :host([marker="radio"][selected]:focus-visible) .radio-marker {
+    border-color: var(--option-border-color-active-interactive);
+    background-color: var(--option-background-color-active-interactive);
+  }
+
+  /* 라디오 마커 내부 원 */
+  .radio-marker::after {
+    content: '';
+    display: block;
+    width: 0.45em;
+    height: 0.45em;
+    border-radius: 50%;
+    background-color: var(--option-color-active);
+    transform: scale(0);
+    transition: transform 0.15s ease;
+  }
+  :host([marker="radio"][selected]) .radio-marker::after {
+    transform: scale(1);
+  }
+
+  /* 체크 아이콘 */
+  .check-marker {
+    flex-shrink: 0;
+    margin-right: 0.5em;
+    color: var(--option-color-active);
+  }
+`;
+//#endregion
+export { styles };

package/dist/components/panel/UPanel.d.ts

@@ -0,0 +1,22 @@
+import { UElement } from '../UElement.js';
+/**
+ * 콘텐츠를 담는 기본 패널 컴포넌트입니다.
+ * 이 패널은 value 기반으로 매칭하여 사용하거나 독립적으로 사용합니다.
+ *
+ * @slot - 패널 내부 콘텐츠
+ */
+export declare class UPanel extends UElement {
+    static styles: import('lit').CSSResultGroup[];
+    /** 패널 비활성화 여부 */
+    disabled: boolean;
+    /** 패널 접기 가능 여부 */
+    collapsible: boolean;
+    /** 패널 고유값 (매칭 시 사용) */
+    value: string;
+    render(): import('lit-html').TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'u-panel': UPanel;
+    }
+}

package/dist/components/panel/UPanel.js

@@ -0,0 +1,36 @@
+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 "./UPanel.styles.js";
+import { customElement, property } from "lit/decorators.js";
+import { html } from "lit";
+//#region src/components/panel/UPanel.ts
+var UPanel = class UPanel extends UElement {
+	constructor(..._args) {
+		super(..._args);
+		this.disabled = false;
+		this.collapsible = false;
+		this.value = "";
+	}
+	static {
+		this.styles = [super.styles, styles];
+	}
+	render() {
+		return html`<slot></slot>`;
+	}
+};
+__decorate([property({
+	type: Boolean,
+	reflect: true
+}), __decorateMetadata("design:type", Object)], UPanel.prototype, "disabled", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true
+}), __decorateMetadata("design:type", Object)], UPanel.prototype, "collapsible", void 0);
+__decorate([property({
+	type: String,
+	reflect: true
+}), __decorateMetadata("design:type", Object)], UPanel.prototype, "value", void 0);
+UPanel = __decorate([customElement("u-panel")], UPanel);
+//#endregion
+export { UPanel };

package/dist/components/panel/UPanel.styles.d.ts

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

package/dist/components/panel/UPanel.styles.js

@@ -0,0 +1,14 @@
+import { css } from "lit";
+//#region src/components/panel/UPanel.styles.ts
+var styles = css`
+  :host {
+    display: block;
+    overflow: auto;
+  }
+  :host([disabled]) {
+    pointer-events: none;
+    opacity: 0.5;
+  }
+`;
+//#endregion
+export { styles };

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 };