@iyulab/components 0.4.0 → 1.0.0

package/dist/components/progress-ring/UProgressRing.d.ts

@@ -1,8 +1,51 @@
-import { UProgressRing } from './UProgressRing.component.js';
+import { PropertyValues } from 'lit';
+import { UElement } from '../UElement.js';
+export type ProgressRingStatus = 'default' | 'success' | 'warning' | 'error' | 'info';
+/**
+ * 원형 진행 표시기 컴포넌트입니다.
+ *
+ * @slot - 링 중앙에 표시할 콘텐츠 (예: 퍼센트)
+ *
+ * @csspart svg - 링을 감싸는 SVG 요소
+ * @csspart content - 링 중앙의 콘텐츠 래퍼
+ *
+ * @cssprop --progress-ring-size - 링의 크기 (기본: 6em)
+ * @cssprop --progress-ring-color - 링 색상
+ * @cssprop --progress-ring-track-width - 트랙/링 두께 (기본: 6)
+ * @cssprop --progress-ring-track-color - 트랙 배경색
+ * @cssprop --progress-ring-buffer-color - 버퍼 링 색상
+ */
+export declare class UProgressRing extends UElement {
+    static styles: import('lit').CSSResultGroup[];
+    /** 불확정 상태 (로딩 애니메이션 표시) */
+    indeterminate: boolean;
+    /** 둥근 끝 (stroke-linecap: round) */
+    rounded: boolean;
+    /** 상태 (색상 변경) */
+    status: ProgressRingStatus;
+    /** 세그먼트 개수 */
+    segments: number;
+    /** 세그먼트 간격 (pathLength 기준 비율) */
+    segmentGap: number;
+    /** 최소값 */
+    min: number;
+    /** 최대값 */
+    max: number;
+    /** 버퍼값 */
+    buffer?: number;
+    /** 현재값 */
+    value: number;
+    private progress;
+    private bufferProgress;
+    private dasharray;
+    private uuid;
+    protected willUpdate(changedProperties: PropertyValues): void;
+    render(): import('lit-html').TemplateResult<1>;
+    private calcProgress;
+    private calcDasharray;
+}
 declare global {
     interface HTMLElementTagNameMap {
         'u-progress-ring': UProgressRing;
     }
 }
-export { UProgressRing };
-export type { ProgressRingVariant } from './UProgressRing.component.js';

package/dist/components/progress-ring/UProgressRing.js

@@ -1,5 +1,155 @@
-import { UProgressRing } from './UProgressRing.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 "./UProgressRing.styles.js";
+import { customElement, property, state } from "lit/decorators.js";
+import { html } from "lit";
+//#region src/components/progress-ring/UProgressRing.ts
+var PATH_LENGTH = 100;
+var RADIUS = 44;
+var UProgressRing = class UProgressRing extends UElement {
+	constructor(..._args) {
+		super(..._args);
+		this.indeterminate = false;
+		this.rounded = false;
+		this.status = "default";
+		this.segments = 0;
+		this.segmentGap = 2;
+		this.min = 0;
+		this.max = 100;
+		this.value = 0;
+		this.progress = 0;
+		this.bufferProgress = 0;
+		this.dasharray = PATH_LENGTH.toString();
+		this.uuid = `pr-${Math.random().toString(36).slice(2, 8)}`;
+	}
+	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;
+		}
+		if (["segments", "segmentGap"].some((k) => changedProperties.has(k))) this.dasharray = this.calcDasharray(this.segments, this.segmentGap);
+	}
+	render() {
+		const hasBuffer = this.buffer !== void 0 && !this.indeterminate;
+		const linecap = this.rounded ? "round" : "butt";
+		const progressOffset = PATH_LENGTH * (1 - this.progress);
+		const bufferOffset = PATH_LENGTH * (1 - this.bufferProgress);
+		const maskId = `${this.uuid}-mask`;
+		const bufferMaskId = `${this.uuid}-buf-mask`;
+		return html`
+      <svg class="ring" part="svg" viewBox="0 0 100 100">
+        <defs>
+          <mask id="${maskId}">
+            <circle class="mask-progress"
+              cx="50" cy="50" r="${RADIUS}"
+              fill="none"
+              pathLength="${PATH_LENGTH}"
+              stroke="white"
+              stroke-width="var(--progress-ring-track-width, 6)"
+              stroke-dasharray="${PATH_LENGTH}"
+              stroke-dashoffset="${progressOffset}"
+              stroke-linecap="${linecap}"
+            />
+          </mask>
+          <mask id="${bufferMaskId}">
+            <circle class="mask-buffer"
+              cx="50" cy="50" r="${RADIUS}"
+              ?hidden=${!hasBuffer}
+              fill="none"
+              pathLength="${PATH_LENGTH}"
+              stroke="white"
+              stroke-width="var(--progress-ring-track-width, 6)"
+              stroke-dasharray="${PATH_LENGTH}"
+              stroke-dashoffset="${bufferOffset}"
+              stroke-linecap="${linecap}"
+            />
+          </mask>
+        </defs>
 
-UProgressRing.define("u-progress-ring");
+        <circle class="track"
+          cx="50" cy="50" r="${RADIUS}"
+          pathLength="${PATH_LENGTH}"
+          stroke-dasharray="${this.dasharray}"
+          stroke-linecap="${linecap}"
+        ></circle>
 
+        <circle class="buffer"
+          cx="50" cy="50" r="${RADIUS}"
+          ?hidden=${!hasBuffer}
+          pathLength="${PATH_LENGTH}"
+          stroke-dasharray="${this.dasharray}"
+          stroke-linecap="${linecap}"
+          mask="url(#${bufferMaskId})"
+        ></circle>
+
+        <circle class="indicator determinate"
+          cx="50" cy="50" r="${RADIUS}"
+          ?hidden=${this.indeterminate}
+          pathLength="${PATH_LENGTH}"
+          stroke-dasharray="${this.dasharray}"
+          stroke-linecap="${linecap}"
+          mask="url(#${maskId})"
+        ></circle>
+
+        <circle class="indicator indeterminate"
+          cx="50" cy="50" r="${RADIUS}"
+          ?hidden=${!this.indeterminate}
+          pathLength="${PATH_LENGTH}"
+        ></circle>
+      </svg>
+
+      <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;
+	}
+	calcDasharray(count, gap) {
+		if (count > 1) {
+			const dashLen = (PATH_LENGTH - count * gap) / count;
+			return `${Math.max(dashLen, .5)} ${gap}`;
+		} else return PATH_LENGTH.toString();
+	}
+};
+__decorate([property({
+	type: Boolean,
+	reflect: true
+}), __decorateMetadata("design:type", Object)], UProgressRing.prototype, "indeterminate", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true
+}), __decorateMetadata("design:type", Object)], UProgressRing.prototype, "rounded", void 0);
+__decorate([property({
+	type: String,
+	reflect: true
+}), __decorateMetadata("design:type", Object)], UProgressRing.prototype, "status", void 0);
+__decorate([property({ type: Number }), __decorateMetadata("design:type", Number)], UProgressRing.prototype, "segments", void 0);
+__decorate([property({
+	type: Number,
+	attribute: "segment-gap"
+}), __decorateMetadata("design:type", Number)], UProgressRing.prototype, "segmentGap", void 0);
+__decorate([property({ type: Number }), __decorateMetadata("design:type", Number)], UProgressRing.prototype, "min", void 0);
+__decorate([property({ type: Number }), __decorateMetadata("design:type", Number)], UProgressRing.prototype, "max", void 0);
+__decorate([property({ type: Number }), __decorateMetadata("design:type", Number)], UProgressRing.prototype, "buffer", void 0);
+__decorate([property({ type: Number }), __decorateMetadata("design:type", Number)], UProgressRing.prototype, "value", void 0);
+__decorate([state(), __decorateMetadata("design:type", Number)], UProgressRing.prototype, "progress", void 0);
+__decorate([state(), __decorateMetadata("design:type", Number)], UProgressRing.prototype, "bufferProgress", void 0);
+__decorate([state(), __decorateMetadata("design:type", String)], UProgressRing.prototype, "dasharray", void 0);
+UProgressRing = __decorate([customElement("u-progress-ring")], UProgressRing);
+//#endregion
 export { UProgressRing };

package/dist/components/progress-ring/UProgressRing.styles.js

@@ -1,52 +1,115 @@
-import { css } from 'lit';
-
-const styles = css`
+import { css } from "lit";
+//#region src/components/progress-ring/UProgressRing.styles.ts
+var styles = css`
   :host {
-    --track-width: 0.25em;
-    --track-color: var(--u-neutral-200, #e5e7eb);
-    --indicator-color: var(--u-blue-600, #3b82f6);
+    --progress-ring-size: 6em;
+    --progress-ring-color: var(--u-blue-600);
+    --progress-ring-track-width: 6;
+    --progress-ring-track-color: var(--u-neutral-200);
+    --progress-ring-buffer-color: var(--u-blue-200);
+  }
+
+  /* === Status Colors === */
+  :host([status="success"]) { 
+    --progress-ring-color: var(--u-green-600);
+    --progress-ring-buffer-color: var(--u-green-200);
+  }
+  :host([status="warning"]) { 
+    --progress-ring-color: var(--u-yellow-500);
+    --progress-ring-buffer-color: var(--u-yellow-200);
+  }
+  :host([status="error"]) { 
+    --progress-ring-color: var(--u-red-600);
+    --progress-ring-buffer-color: var(--u-red-200);
+  }
+  :host([status="info"]) { 
+    --progress-ring-color: var(--u-blue-500);
+    --progress-ring-buffer-color: var(--u-blue-200);
   }
 
+  /* === Host === */
   :host {
     position: relative;
     display: inline-flex;
+    width: var(--progress-ring-size);
+    height: var(--progress-ring-size);
     font-size: inherit;
   }
 
-  .progress-ring {
-    position: relative;
-    width: 6em;
-    height: 6em;
-    transform: rotate(-90deg); /* 0%가 위에서 시작하도록 회전 */
+  /* === Indeterminate === */
+  :host([indeterminate]) .ring {
+    animation: ring-rotate 1.4s linear infinite;
+  }
+  :host([indeterminate]) .indicator.indeterminate {
+    animation: ring-dash 2s ease-in-out infinite;
+    transition: none;
+    stroke-linecap: round;
   }
-  .progress-ring circle {
+
+  /* === SVG Ring === */
+  .ring {
+    width: 100%;
+    height: 100%;
+    transform: rotate(-90deg);
+  }
+  .ring circle {
     fill: none;
-    stroke-width: var(--track-width);
-    r: calc(3em - var(--track-width) / 2);
-    cx: 3em;
-    cy: 3em;
+    stroke-width: var(--progress-ring-track-width);
   }
 
+  /* === Mask === */
+  .mask-progress,
+  .mask-buffer {
+    transition: stroke-dashoffset 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+  }
+
+  /* === Track === */
   .track {
-    stroke: var(--track-color);
+    stroke: var(--progress-ring-track-color);
   }
-  .indicator {
-    stroke: var(--indicator-color);
-    transition: stroke-dashoffset 350ms ease;
+
+  /* === Buffer === */
+  .buffer {
+    stroke: var(--progress-ring-buffer-color);
   }
 
-  /* 라벨 중앙 숫자 */
-  .label {
+  /* === Indicator === */
+  .indicator {
+    stroke: var(--progress-ring-color);
+  }
+  
+  /* === Content (슬롯) === */
+  .content {
     position: absolute;
-    inset: 0 0 0 0;
+    inset: 0;
     display: flex;
     align-items: center;
     justify-content: center;
     font-weight: 600;
     font-size: 1em;
-    color: var(--indicator-color);
+    color: var(--progress-ring-color);
     pointer-events: none;
   }
-`;
 
+  @keyframes ring-rotate {
+    from { transform: rotate(-90deg); }
+    to { transform: rotate(270deg); }
+  }
+
+  @keyframes ring-dash {
+    0% {
+      stroke-dasharray: 1 99;
+      stroke-dashoffset: 0;
+    }
+    50% {
+      stroke-dasharray: 60 40;
+      stroke-dashoffset: -20;
+    }
+    100% {
+      stroke-dasharray: 1 99;
+      stroke-dashoffset: -99;
+    }
+  }
+`;
+//#endregion
 export { styles };

package/dist/components/radio/URadio.d.ts

@@ -0,0 +1,41 @@
+import { PropertyValues } from 'lit';
+import { UFormControlElement } from '../UFormControlElement.js';
+export type RadioType = "default" | "button";
+export type RadioVariant = "filled" | "outlined";
+export type RadioOrientation = "vertical" | "horizontal";
+/**
+ * 여러 라디오 버튼 중 하나를 선택하는 라디오 그룹 컴포넌트입니다.
+ *
+ * @slot - u-option 아이템
+ *
+ * @csspart field - u-field 요소
+ * @csspart container - 옵션들을 감싸는 컨테이너
+ *
+ * @event change - 선택 값이 변경될 때 발생
+ */
+export declare class URadio extends UFormControlElement<string> {
+    static styles: import('lit').CSSResultGroup[];
+    /** 라디오 유형 */
+    type: RadioType;
+    /** 스타일 변형 */
+    variant: RadioVariant;
+    /** 배치 방향 */
+    orientation: RadioOrientation;
+    private options;
+    disconnectedCallback(): void;
+    protected updated(changedProperties: PropertyValues): void;
+    render(): import('lit-html').TemplateResult<1>;
+    validate(): boolean;
+    reset(): void;
+    private setup;
+    private cleanup;
+    private onChangeValue;
+    private handleSlotChange;
+    private handleOptionClick;
+    private handleOptionKeyDown;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'u-radio': URadio;
+    }
+}

package/dist/components/radio/URadio.js

@@ -0,0 +1,151 @@
+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 { UFormControlElement } from "../UFormControlElement.js";
+import "../field/UField.js";
+import { UOption } from "../option/UOption.js";
+import { styles } from "./URadio.styles.js";
+import { customElement, property } from "lit/decorators.js";
+import { html } from "lit";
+//#region src/components/radio/URadio.ts
+var URadio = class URadio extends UFormControlElement {
+	constructor(..._args) {
+		super(..._args);
+		this.type = "default";
+		this.variant = "filled";
+		this.orientation = "vertical";
+		this.options = [];
+		this.handleSlotChange = (e) => {
+			this.cleanup(this.options);
+			this.options = e.target.assignedElements({ flatten: true }).filter((el) => el instanceof UOption);
+			this.setup(this.options);
+		};
+		this.handleOptionClick = (e) => {
+			if (this.readonly || this.disabled) return;
+			const option = e.currentTarget;
+			if (option.disabled) return;
+			this.value = option.value;
+		};
+		this.handleOptionKeyDown = (e) => {
+			if (this.readonly || this.disabled) return;
+			const options = this.options.filter((o) => !o.disabled);
+			const currentOption = e.currentTarget;
+			const currentIndex = options.indexOf(currentOption);
+			if (currentIndex === -1) return;
+			switch (e.key) {
+				case " ":
+				case "Enter":
+					e.preventDefault();
+					currentOption.click();
+					break;
+				case "ArrowDown":
+				case "ArrowRight":
+					e.preventDefault();
+					options[(currentIndex + 1) % options.length].focus();
+					break;
+				case "ArrowUp":
+				case "ArrowLeft":
+					e.preventDefault();
+					options[(currentIndex - 1 + options.length) % options.length].focus();
+					break;
+				case "Home":
+					e.preventDefault();
+					options[0].focus();
+					break;
+				case "End":
+					e.preventDefault();
+					options[options.length - 1].focus();
+					break;
+			}
+		};
+	}
+	static {
+		this.styles = [super.styles, styles];
+	}
+	disconnectedCallback() {
+		this.cleanup(this.options);
+		super.disconnectedCallback();
+	}
+	updated(changedProperties) {
+		super.updated(changedProperties);
+		if ([
+			"type",
+			"disabled",
+			"readonly"
+		].some((k) => changedProperties.has(k))) this.options.forEach((option) => {
+			option.marker = this.type === "button" ? void 0 : "radio";
+			if (this.disabled) option.disabled = true;
+			if (this.readonly) option.disabled = true;
+		});
+		if (changedProperties.has("value")) this.onChangeValue();
+	}
+	render() {
+		return html`
+      <u-field part="field"
+        ?required=${this.required}
+        ?disabled=${this.disabled}
+        ?invalid=${this.invalid}
+        .label=${this.label}
+        .description=${this.description}
+        .validationMessage=${this.validationMessage}
+      >
+        <div class="container" part="container">
+          <slot @slotchange=${this.handleSlotChange}></slot>
+        </div>
+      </u-field>
+    `;
+	}
+	validate() {
+		if (this.internals) this.invalid = !this.internals.checkValidity();
+		else this.invalid = this.required && !this.value;
+		return !this.invalid;
+	}
+	reset() {
+		this.value = void 0;
+		this.invalid = false;
+	}
+	setup(options) {
+		for (const option of options) {
+			option.removeEventListener("click", this.handleOptionClick);
+			option.removeEventListener("keydown", this.handleOptionKeyDown);
+			option.addEventListener("click", this.handleOptionClick);
+			option.addEventListener("keydown", this.handleOptionKeyDown);
+			option.selected = option.value === this.value;
+			option.marker = this.type === "button" ? void 0 : "radio";
+			if (this.disabled) option.disabled = true;
+			if (this.readonly) option.disabled = true;
+		}
+	}
+	cleanup(options) {
+		for (const option of options) {
+			option.removeEventListener("click", this.handleOptionClick);
+			option.removeEventListener("keydown", this.handleOptionKeyDown);
+		}
+	}
+	onChangeValue() {
+		this.options.forEach((option) => {
+			option.selected = option.value === this.value;
+		});
+		this.internals?.setFormValue(this.value || "");
+		this.internals?.setValidity(this.required && !this.value ? { valueMissing: true } : {}, this.validationMessage || "", this);
+		if (!this.novalidate) this.validate();
+		this.dispatchEvent(new Event("change", {
+			bubbles: true,
+			composed: true
+		}));
+	}
+};
+__decorate([property({
+	type: String,
+	reflect: true
+}), __decorateMetadata("design:type", Object)], URadio.prototype, "type", void 0);
+__decorate([property({
+	type: String,
+	reflect: true
+}), __decorateMetadata("design:type", Object)], URadio.prototype, "variant", void 0);
+__decorate([property({
+	type: String,
+	reflect: true
+}), __decorateMetadata("design:type", Object)], URadio.prototype, "orientation", void 0);
+URadio = __decorate([customElement("u-radio")], URadio);
+//#endregion
+export { URadio };

package/dist/components/radio/URadio.styles.d.ts

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

package/dist/components/radio/URadio.styles.js

@@ -0,0 +1,111 @@
+import { css } from "lit";
+//#region src/components/radio/URadio.styles.ts
+var styles = css`
+  :host {
+    display: inline-flex;
+    flex-direction: column;
+    gap: 0.5em;
+    font-size: inherit;
+    font-family: var(--u-font-base);
+    color: var(--u-txt-color);
+  }
+  :host([disabled]) {
+    opacity: 0.6;
+    pointer-events: none;
+  }
+  :host([readonly]) {
+    pointer-events: none;
+  }
+
+  .container {
+    display: flex;
+    gap: 0.5em;
+  }
+  :host([orientation="horizontal"]) .container {
+    flex-direction: row;
+  }
+  :host([orientation="vertical"]) .container {
+    flex-direction: column;
+  }
+  :host([type="button"]) .container {
+    gap: 0;
+    border: 1px solid var(--u-neutral-300);
+    border-radius: 0.35em;
+  }
+  :host([invalid]) .container {
+    border-color: var(--u-red-600);
+  }
+
+  /* Type: default */
+  :host([type="default"]) ::slotted(u-option) {
+    padding: 0;
+  }
+
+  /* Default + Filled */
+  :host([type="default"][variant="filled"]) ::slotted(u-option) {
+    --option-color-active: #fff;
+    --option-border-color-active: var(--u-blue-600);
+    --option-background-color-active: var(--u-blue-600);
+    --option-color-active-interactive: #fff;
+    --option-border-color-active-interactive: var(--u-blue-700);
+    --option-background-color-active-interactive: var(--u-blue-700);
+  }
+
+  /* Default + Outlined */
+  :host([type="default"][variant="outlined"]) ::slotted(u-option) {
+    --option-color-active: var(--u-blue-700);
+    --option-border-color-active: var(--u-blue-600);
+    --option-background-color-active: transparent;
+    --option-color-active-interactive: var(--u-blue-700);
+    --option-border-color-active-interactive: var(--u-blue-700);
+    --option-background-color-active-interactive: transparent;
+  }
+
+  /* Button + Filled */
+  :host([type="button"][variant="filled"]) ::slotted(u-option) {
+    --option-color-active: #fff;
+    --option-border-color-active: var(--u-blue-600);
+    --option-background-color-active: var(--u-blue-600);
+    --option-color-active-interactive: #fff;
+    --option-border-color-active-interactive: var(--u-blue-700);
+    --option-background-color-active-interactive: var(--u-blue-700);
+  }
+
+  /* Button + Outlined */
+  :host([type="button"][variant="outlined"]) ::slotted(u-option) {
+    --option-color-active: var(--u-blue-700);
+    --option-border-color-active: var(--u-blue-600);
+    --option-background-color-active: transparent;
+    --option-color-active-interactive: var(--u-blue-700);
+    --option-border-color-active-interactive: var(--u-blue-700);
+    --option-background-color-active-interactive: transparent;
+  }
+
+  /* === Button - Horizontal 배치 === */
+  :host([type="button"][orientation="horizontal"]) ::slotted(u-option:first-child) {
+    border-radius: 0.35em 0 0 0.35em;
+  }
+  :host([type="button"][orientation="horizontal"]) ::slotted(u-option:last-child) {
+    border-radius: 0 0.35em 0.35em 0;
+  }
+  :host([type="button"][orientation="horizontal"]) ::slotted(u-option:not(:last-child)) {
+    border-right: 1px solid var(--u-neutral-300);
+  }
+
+  /* === Button - Vertical 배치 === */
+  :host([type="button"][orientation="vertical"]) ::slotted(u-option) {
+    width: 100%;
+    justify-content: center;
+  }
+  :host([type="button"][orientation="vertical"]) ::slotted(u-option:first-child) {
+    border-radius: 0.35em 0.35em 0 0;
+  }
+  :host([type="button"][orientation="vertical"]) ::slotted(u-option:last-child) {
+    border-radius: 0 0 0.35em 0.35em;
+  }
+  :host([type="button"][orientation="vertical"]) ::slotted(u-option:not(:last-child)) {
+    border-bottom: 1px solid var(--u-neutral-300);
+  }
+`;
+//#endregion
+export { styles };