@iyulab/components 0.3.0 → 1.0.0

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

package/dist/components/rating/URating.d.ts

@@ -0,0 +1,48 @@
+import { PropertyValues } from 'lit';
+import { UFormControlElement } from '../UFormControlElement.js';
+/**
+ * 별점 등의 숫자 입력을 지원하는 레이팅 컴포넌트입니다.
+ *
+ * @slot symbol - 활성화 상태의 심볼 슬롯 아이콘
+ * @slot symbol-off - 비활성화 상태의 심볼 슬롯 아이콘
+ *
+ * @csspart field - u-field 요소
+ * @csspart container - 심볼들을 감싸는 컨테이너
+ * @csspart symbol - 각 심볼 요소
+ * @csspart symbol-fg - 각 심볼의 활성화된 부분을 나타내는 요소
+ *
+ * @cssprop --rating-symbol-color - 활성화된 심볼 색상
+ * @cssprop --rating-symbol-off-color - 비활성화된 심볼 색상
+ *
+ * @event change - 레이팅 값 변경 시 발생
+ */
+export declare class URating extends UFormControlElement<number> {
+    static styles: import('lit').CSSResultGroup[];
+    /** 理쒖냼 媛?*/
+    min: number;
+    /** 理쒕? 媛?*/
+    max: number;
+    /** 정밀도 (0.5 등) */
+    precision: number;
+    private buffer;
+    private symbol;
+    private symbolOff;
+    private get interactive();
+    protected updated(changedProperties: PropertyValues): void;
+    render(): import('lit-html').TemplateResult<1>;
+    validate(): boolean;
+    reset(): void;
+    private onChangeValue;
+    private getValidity;
+    private handleSlotChange;
+    private handleSymbolPointerMove;
+    private handleSymbolPointerLeave;
+    private handleSymbolClick;
+    private handleSymbolKeydown;
+    private calibrate;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'u-rating': URating;
+    }
+}

package/dist/components/rating/URating.js

@@ -0,0 +1,196 @@
+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 "../icon/UIcon.js";
+import "../field/UField.js";
+import { styles } from "./URating.styles.js";
+import { customElement, property, state } from "lit/decorators.js";
+import { html } from "lit";
+//#region src/components/rating/URating.ts
+var URating = class URating extends UFormControlElement {
+	constructor(..._args) {
+		super(..._args);
+		this.min = 0;
+		this.max = 5;
+		this.precision = 1;
+		this.buffer = -1;
+		this.symbol = null;
+		this.symbolOff = null;
+		this.handleSlotChange = (e) => {
+			const slot = e.target;
+			const name = slot.name;
+			const node = slot.assignedNodes({ flatten: true }).at(0);
+			if (name === "symbol") this.symbol = node ?? null;
+			else if (name === "symbol-off") this.symbolOff = node ?? null;
+		};
+		this.handleSymbolPointerMove = (e) => {
+			if (this.disabled || this.readonly) return;
+			const score = Number(e.currentTarget.dataset.score);
+			this.buffer = this.calibrate(e, score);
+		};
+		this.handleSymbolPointerLeave = (_) => {
+			if (this.disabled || this.readonly) return;
+			this.buffer = -1;
+		};
+		this.handleSymbolClick = (e) => {
+			if (this.disabled || this.readonly) return;
+			const score = Number(e.currentTarget.dataset.score);
+			const val = this.precision < 1 ? this.calibrate(e, score) : score;
+			this.value = this.value === val ? 0 : val;
+		};
+		this.handleSymbolKeydown = (e) => {
+			if (this.disabled || this.readonly) return;
+			const symbols = Array.from(this.renderRoot.querySelectorAll(".symbol"));
+			const currentSymbol = e.currentTarget;
+			const currentIndex = symbols.indexOf(currentSymbol);
+			if (currentIndex === -1) return;
+			switch (e.key) {
+				case "ArrowRight":
+				case "ArrowUp":
+					e.preventDefault();
+					symbols[Math.min(symbols.length - 1, currentIndex + 1)].focus();
+					break;
+				case "ArrowLeft":
+				case "ArrowDown":
+					e.preventDefault();
+					symbols[Math.max(0, currentIndex - 1)].focus();
+					break;
+				case "Home":
+					e.preventDefault();
+					symbols[0].focus();
+					break;
+				case "End":
+					e.preventDefault();
+					symbols[symbols.length - 1].focus();
+					break;
+				case " ":
+				case "Enter": {
+					e.preventDefault();
+					const score = Number(e.currentTarget.dataset.score);
+					this.value = this.value === score ? 0 : score;
+					return;
+				}
+				default: return;
+			}
+		};
+	}
+	static {
+		this.styles = [super.styles, styles];
+	}
+	get interactive() {
+		return !this.disabled && !this.readonly;
+	}
+	updated(changedProperties) {
+		super.updated(changedProperties);
+		if (changedProperties.has("value")) this.onChangeValue();
+	}
+	render() {
+		const value = this.buffer >= 0 ? this.buffer : this.value || 0;
+		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="symbols" part="container" role="radiogroup">
+          ${Array.from({ length: this.max }, (_, i) => {
+			const score = i + 1;
+			const fill = Math.max(0, Math.min(1, value - score + 1));
+			return html`
+              <span class="symbol" part="symbol"
+                role="radio"
+                tabindex=${this.interactive ? "0" : "-1"}
+                data-score=${score}
+                @pointermove=${this.handleSymbolPointerMove}
+                @pointerleave=${this.handleSymbolPointerLeave}
+                @click=${this.handleSymbolClick}
+                @keydown=${this.handleSymbolKeydown}
+              >
+                ${this.symbolOff ? this.symbolOff.cloneNode(true) : html`<u-icon lib="internal" name="star"></u-icon>`}
+
+                <span class="symbol-fg" part="symbol-fg" 
+                  ?hidden=${fill <= 0} 
+                  style="width: ${fill * 100}%">
+                  ${this.symbol ? this.symbol.cloneNode(true) : html`<u-icon lib="internal" name="star-fill"></u-icon>`}
+                </span>
+              </span>
+            `;
+		})}
+        </div>
+      </u-field>
+
+      <div hidden aria-hidden="true">
+        <slot name="symbol" @slotchange=${this.handleSlotChange}></slot>
+        <slot name="symbol-off" @slotchange=${this.handleSlotChange}></slot>
+      </div>
+    `;
+	}
+	validate() {
+		if (this.internals) this.invalid = !this.internals.checkValidity();
+		else {
+			const { flags } = this.getValidity();
+			this.invalid = Object.values(flags).some(Boolean);
+		}
+		return !this.invalid;
+	}
+	reset() {
+		this.value = 0;
+		this.invalid = false;
+	}
+	onChangeValue() {
+		this.buffer = -1;
+		this.internals?.setFormValue(this.value?.toString() || "");
+		const { flags, message } = this.getValidity();
+		this.internals?.setValidity(flags, this.validationMessage || message, this.renderRoot.querySelector(".symbols") || void 0);
+		if (!this.novalidate) this.validate();
+		this.dispatchEvent(new Event("change", {
+			bubbles: true,
+			composed: true
+		}));
+	}
+	getValidity() {
+		const v = this.value || 0;
+		if (this.required && !v) return {
+			flags: { valueMissing: true },
+			message: "This field is required"
+		};
+		if (v && v < this.min) return {
+			flags: { rangeUnderflow: true },
+			message: `Value must be at least ${this.min}`
+		};
+		if (v && v > this.max) return {
+			flags: { rangeOverflow: true },
+			message: `Value must be no more than ${this.max}`
+		};
+		if (v && this.precision < 1) {
+			const remainder = Math.abs(v % this.precision);
+			if (remainder > .001 && Math.abs(remainder - this.precision) > .001) return {
+				flags: { stepMismatch: true },
+				message: `Value must be a multiple of ${this.precision}`
+			};
+		}
+		return {
+			flags: {},
+			message: ""
+		};
+	}
+	calibrate(e, score) {
+		const rect = e.currentTarget.getBoundingClientRect();
+		const ratio = Math.max(0, Math.min(1, (e.clientX - rect.left) / rect.width));
+		const raw = score - 1 + ratio;
+		const p = Math.max(.01, Math.min(1, this.precision));
+		return Math.max(p, Math.min(this.max, Math.round(raw / p) * p));
+	}
+};
+__decorate([property({ type: Number }), __decorateMetadata("design:type", Object)], URating.prototype, "min", void 0);
+__decorate([property({ type: Number }), __decorateMetadata("design:type", Object)], URating.prototype, "max", void 0);
+__decorate([property({ type: Number }), __decorateMetadata("design:type", Object)], URating.prototype, "precision", void 0);
+__decorate([state(), __decorateMetadata("design:type", Object)], URating.prototype, "buffer", void 0);
+__decorate([state(), __decorateMetadata("design:type", Object)], URating.prototype, "symbol", void 0);
+__decorate([state(), __decorateMetadata("design:type", Object)], URating.prototype, "symbolOff", void 0);
+URating = __decorate([customElement("u-rating")], URating);
+//#endregion
+export { URating };

package/dist/components/rating/URating.styles.d.ts

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

package/dist/components/rating/URating.styles.js

@@ -0,0 +1,55 @@
+import { css } from "lit";
+//#region src/components/rating/URating.styles.ts
+var styles = css`
+  :host {
+    --rating-symbol-color: var(--u-yellow-500);
+    --rating-symbol-off-color: var(--u-neutral-300);
+  }
+
+  :host {
+    display: block;
+    font-size: inherit;
+    font-family: var(--u-font-base);
+    user-select: none;
+  }
+
+  .symbols {
+    display: flex;
+    align-items: center;
+    gap: 0.2em;
+    cursor: pointer;
+  }
+
+  .symbol {
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 1.2em;
+    outline: none;
+    border-radius: 0.15em;
+    color: var(--rating-symbol-off-color);
+    transition: color 0.15s ease, transform 0.15s ease;
+  }
+  .symbol:focus-visible {
+    outline: 2px solid var(--u-blue-500);
+    outline-offset: 2px;
+  }
+  :host(:not([disabled]):not([readonly])) .symbol:hover {
+    transform: scale(1.2);
+  }
+
+  .symbol-fg {
+    position: absolute;
+    top: 0;
+    left: 0;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    color: var(--rating-symbol-color);
+    pointer-events: none;
+    overflow: hidden;
+  }
+`;
+//#endregion
+export { styles };

package/dist/components/select/USelect.d.ts

@@ -0,0 +1,70 @@
+import { PropertyValues } from 'lit';
+import { UFormControlElement } from '../UFormControlElement.js';
+import { UPopover } from '../popover/UPopover.js';
+export type SelectVariant = 'outlined' | 'filled' | 'underlined' | 'borderless';
+/**
+ * 드롭다운 목록에서 값을 선택하는 폼 컨트롤 컴포넌트입니다.
+ * 단일 선택 및 다중 선택, 검색 기능을 지원합니다.
+ *
+ * @slot - u-option 아이템
+ *
+ * @csspart field - u-field 요소
+ * @csspart container - 트리거 영역을 감싸는 요소
+ * @csspart popover - 옵션 목록이 표시되는 팝오버 요소
+ * @csspart search-input - 검색 입력 영역
+ *
+ * @cssprop --select-popover-min-width - 팝오버의 최소 너비 (기본값: 100%)
+ * @cssprop --select-popover-max-width - 팝오버의 최대 너비 (기본값: 80vw)
+ * @cssprop --select-popover-min-height - 팝오버의 최소 높이 (기본값: 0px)
+ * @cssprop --select-popover-max-height - 팝오버의 최대 높이 (기본값: 50vh)
+ *
+ * @event change - 선택 값이 변경될 때 발생
+ */
+export declare class USelect extends UFormControlElement<string | string[]> {
+    static styles: import('lit').CSSResultGroup[];
+    /** 트리거 영역의 스타일 변형 */
+    variant: SelectVariant;
+    /** 다중 선택 여부 */
+    multiple: boolean;
+    /** 검색 가능 여부 */
+    searchable: boolean;
+    /** 지우기 버튼 표시 여부 */
+    clearable: boolean;
+    /** 로딩 상태 표시 여부 */
+    loading: boolean;
+    /** 최소 선택 개수 (다중 선택 시) */
+    minCount?: number;
+    /** 최대 선택 개수 (다중 선택 시) */
+    maxCount?: number;
+    /** placeholder 텍스트 */
+    placeholder?: string;
+    containerEl?: HTMLElement;
+    popoverEl?: UPopover;
+    private options;
+    private get valueAsString();
+    private get valueAsArray();
+    private get hasValue();
+    disconnectedCallback(): void;
+    protected updated(changedProperties: PropertyValues): void;
+    render(): import('lit-html').TemplateResult<1>;
+    private renderContent;
+    validate(): boolean;
+    reset(): void;
+    private setup;
+    private cleanup;
+    private onChangeValue;
+    private getValidity;
+    private handleSlotChange;
+    private handleOptionClick;
+    private handleOptionKeydown;
+    private handleSearchInput;
+    private handleSearchKeydown;
+    private handleClearClick;
+    private handleChipRemove;
+    private handlePopoverEvent;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'u-select': USelect;
+    }
+}