@iyulab/components 0.3.0 → 1.0.0

package/dist/components/slider/USlider.d.ts

@@ -0,0 +1,88 @@
+import { PropertyValues, TemplateResult } from 'lit';
+import { UFormControlElement } from '../UFormControlElement.js';
+export interface SliderMark {
+    value: number;
+    label?: string;
+}
+export type SliderFormatter = (value: number) => string;
+/**
+ * 범위 내에서 값을 선택하는 슬라이더 컴포넌트입니다.
+ * 단일 thumb 및 range(dual-thumb) 모드를 지원합니다.
+ *
+ * @slot thumb - 커스텀 thumb 콘텐츠
+ * @slot thumb-end - range 모드에서 끝 커스텀 thumb
+ *
+ * @csspart field - u-field 요소
+ * @csspart container - 슬라이더 전체 컨테이너
+ * @csspart track - 트랙 영역
+ * @csspart fill - 활성화 영역
+ * @csspart thumb - 첫 번째 thumb
+ * @csspart thumb-end - range 모드의 끝 thumb
+ * @csspart thumb-tooltip - thumb에 표시되는 툴팁
+ * @csspart mark - 마크 요소
+ * @csspart mark-label - 마크 라벨
+ *
+ * @cssprop --slider-fill-color - 활성화 영역 색상
+ * @cssprop --slider-track-height - 트랙 높이
+ * @cssprop --slider-track-color - 트랙 배경 색상
+ * @cssprop --slider-thumb-size - thumb 크기
+ * @cssprop --slider-thumb-color - thumb 색상
+ * @cssprop --slider-thumb-border-color - thumb 테두리 색상
+ * @cssprop --slider-mark-size - 마크 크기
+ * @cssprop --slider-mark-color - 마크 색상
+ * @cssprop --slider-mark-border-color - 마크 테두리 색상
+ *
+ * @event change - 드래그 완료 후 값이 확정됐을 때 발생
+ */
+export declare class USlider extends UFormControlElement<number | number[]> {
+    static styles: import('lit').CSSResultGroup[];
+    /** range 모드 (dual-thumb) */
+    range: boolean;
+    /** 슬라이더 옆에 현재 값 표시 여부 */
+    showValue: boolean;
+    /** 드래그 시 마우스 위치 값 표시 여부 */
+    showTooltip: boolean;
+    /** 커스텀 포매터 */
+    formatter?: SliderFormatter;
+    /** 마크 설정 */
+    marks?: SliderMark[];
+    /** 시작값 오프셋 (single value only) */
+    offset?: number;
+    /** 최솟값 */
+    min: number;
+    /** 최댓값 */
+    max: number;
+    /** 값 변경 단위 */
+    step: number;
+    private dragging;
+    private trackEl;
+    get valueAsNumber(): number;
+    get valueAsArray(): number[];
+    private get minVal();
+    private set minVal(value);
+    private get maxVal();
+    private set maxVal(value);
+    private get fillStart();
+    private get fillEnd();
+    private get hasMarks();
+    protected willUpdate(changedProperties: PropertyValues): void;
+    render(): TemplateResult<1>;
+    validate(): boolean;
+    reset(): void;
+    private onChangeValue;
+    private getValidity;
+    private renderThumb;
+    private formatDisplay;
+    private formatValue;
+    private valToPercent;
+    private percentToVal;
+    private snap;
+    private getThumbValue;
+    private handleContainerPointerDown;
+    private handleThumbKeyDown;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'u-slider': USlider;
+    }
+}

package/dist/components/slider/USlider.js

@@ -0,0 +1,286 @@
+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 "../tooltip/UTooltip.js";
+import "../field/UField.js";
+import { styles } from "./USlider.styles.js";
+import { customElement, property, query, state } from "lit/decorators.js";
+import { html } from "lit";
+//#region src/components/slider/USlider.ts
+var _ref;
+var USlider = class USlider extends UFormControlElement {
+	constructor(..._args) {
+		super(..._args);
+		this.range = false;
+		this.showValue = false;
+		this.showTooltip = false;
+		this.min = 0;
+		this.max = 100;
+		this.step = 1;
+		this.dragging = null;
+		this.handleContainerPointerDown = (e) => {
+			if (this.disabled || this.readonly) return;
+			const getPointerValue = (ev) => {
+				if (!this.trackEl) return 0;
+				const rect = this.trackEl.getBoundingClientRect();
+				const pct = Math.max(0, Math.min(rect.width, ev.clientX - rect.left)) / rect.width * 100;
+				return this.percentToVal(pct);
+			};
+			const val = getPointerValue(e);
+			if (this.range) {
+				const closer = Math.abs(val - this.minVal) <= Math.abs(val - this.maxVal) ? "min" : "max";
+				this.dragging = closer;
+				if (closer === "min") this.minVal = val;
+				else this.maxVal = val;
+			} else {
+				this.dragging = "min";
+				this.value = val;
+			}
+			const handleDocumentMove = (ev) => {
+				ev.preventDefault();
+				const val = getPointerValue(ev);
+				if (this.dragging === "min") if (this.range) this.minVal = Math.min(val, this.maxVal);
+				else this.value = val;
+				else if (this.dragging === "max") this.maxVal = Math.max(val, this.minVal);
+			};
+			const handleDocumentUp = () => {
+				document.removeEventListener("pointermove", handleDocumentMove);
+				document.removeEventListener("pointerup", handleDocumentUp);
+				this.dragging = null;
+			};
+			document.addEventListener("pointermove", handleDocumentMove);
+			document.addEventListener("pointerup", handleDocumentUp);
+		};
+		this.handleThumbKeyDown = (e) => {
+			if (this.disabled || this.readonly) return;
+			const thumb = e.currentTarget.dataset.thumb;
+			const currentVal = this.getThumbValue(thumb);
+			const bigStep = (this.max - this.min) / 10;
+			let delta;
+			switch (e.key) {
+				case "ArrowRight":
+				case "ArrowUp":
+					delta = this.step;
+					break;
+				case "ArrowLeft":
+				case "ArrowDown":
+					delta = -this.step;
+					break;
+				case "PageUp":
+					delta = bigStep;
+					break;
+				case "PageDown":
+					delta = -bigStep;
+					break;
+				case "Home":
+					delta = this.min - currentVal;
+					break;
+				case "End":
+					delta = this.max - currentVal;
+					break;
+				default: return;
+			}
+			e.preventDefault();
+			const newVal = this.snap(currentVal + delta);
+			if (thumb === "min") if (this.range) this.minVal = Math.min(newVal, this.maxVal);
+			else this.value = newVal;
+			else this.maxVal = Math.max(newVal, this.minVal);
+		};
+	}
+	static {
+		this.styles = [super.styles, styles];
+	}
+	get valueAsNumber() {
+		return Array.isArray(this.value) ? this.value[0] : this.value || 0;
+	}
+	get valueAsArray() {
+		return Array.isArray(this.value) ? this.value : [this.value || 0, this.value || 0];
+	}
+	get minVal() {
+		return Array.isArray(this.value) ? this.value[0] : this.min;
+	}
+	set minVal(v) {
+		this.value = [v, this.maxVal];
+	}
+	get maxVal() {
+		return Array.isArray(this.value) ? this.value[1] : this.max;
+	}
+	set maxVal(v) {
+		this.value = [this.minVal, v];
+	}
+	get fillStart() {
+		if (this.range) return this.valToPercent(Math.min(this.minVal, this.maxVal));
+		if (this.offset !== void 0) return this.valToPercent(Math.min(this.offset, this.valueAsNumber));
+		return 0;
+	}
+	get fillEnd() {
+		if (this.range) return this.valToPercent(Math.max(this.minVal, this.maxVal));
+		if (this.offset !== void 0) return this.valToPercent(Math.max(this.offset, this.valueAsNumber));
+		return this.valToPercent(this.valueAsNumber);
+	}
+	get hasMarks() {
+		return !!this.marks && this.marks.length > 0;
+	}
+	willUpdate(changedProperties) {
+		super.willUpdate(changedProperties);
+		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}
+      >
+        <span slot="label-aside" ?hidden=${!this.showValue}>
+          ${this.formatDisplay()}
+        </span>
+
+        <div class="container" part="container"
+          @pointerdown=${this.handleContainerPointerDown}
+        >
+          <div class="track" part="track">
+            <div class="fill" part="fill"
+              style="left: ${this.fillStart}%; width: ${this.fillEnd - this.fillStart}%">
+            </div>
+          </div>
+
+          <div class="marks" ?hidden=${!this.hasMarks}>
+            ${this.marks?.map((m) => html`
+                <span class="mark" part="mark" 
+                  style="left: ${this.valToPercent(m.value)}%"
+                ></span>`)}
+          </div>
+
+          ${this.renderThumb("min")}
+          ${this.renderThumb("max")}
+        </div>
+
+        <div class="mark-labels" ?hidden=${!this.hasMarks}>
+          ${this.marks?.map((m) => html`
+              <span class="mark-label" part="mark-label"
+                style="left: ${this.valToPercent(m.value)}%">
+                ${m.label}
+              </span>`)}
+        </div>
+      </u-field>
+    `;
+	}
+	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() {
+		if (this.range) this.value = [this.min, this.max];
+		else this.value = this.offset ?? this.min;
+		this.invalid = false;
+	}
+	onChangeValue() {
+		if (Array.isArray(this.value)) this.value = [this.snap(this.value[0]), this.snap(this.value[1])];
+		else if (typeof this.value === "number") this.value = this.snap(this.value);
+		this.internals?.setFormValue(this.valueAsNumber.toString());
+		const { flags, message } = this.getValidity();
+		this.internals?.setValidity(flags, this.validationMessage || message, this.renderRoot.querySelector(".container") || void 0);
+		this.dispatchEvent(new Event("change", {
+			bubbles: true,
+			composed: true
+		}));
+	}
+	getValidity() {
+		const v = this.valueAsNumber;
+		if (this.required && !v) return {
+			flags: { valueMissing: true },
+			message: "This field is required"
+		};
+		if (v < this.min) return {
+			flags: { rangeUnderflow: true },
+			message: `Value must be at least ${this.min}`
+		};
+		if (v > this.max) return {
+			flags: { rangeOverflow: true },
+			message: `Value must be at most ${this.max}`
+		};
+		return {
+			flags: {},
+			message: ""
+		};
+	}
+	renderThumb(thumb) {
+		const isEnd = thumb === "max";
+		const val = this.getThumbValue(thumb);
+		const pct = this.valToPercent(val);
+		return html`
+      <div class="thumb" part=${isEnd ? "thumb-end" : "thumb"}
+        role="slider"
+        ?hidden=${isEnd && !this.range}
+        style="left: ${pct}%"
+        tabindex=${this.disabled || isEnd && !this.range ? -1 : 0}
+        data-thumb=${thumb}
+        @keydown=${this.handleThumbKeyDown}
+      >
+        <div class="thumb-content">
+          <slot name=${isEnd ? "thumb-end" : "thumb"}></slot>
+        </div>
+        <u-tooltip part="thumb-tooltip"
+          ?disabled=${!this.showTooltip} 
+          placement="top"
+          offset="8"
+        >
+          ${this.formatValue(val)}
+        </u-tooltip>
+      </div>
+    `;
+	}
+	formatDisplay() {
+		if (this.range) return `${this.formatValue(this.minVal)} ??${this.formatValue(this.maxVal)}`;
+		else return this.formatValue(this.valueAsNumber);
+	}
+	formatValue(val) {
+		return this.formatter ? this.formatter(val) : `${val}`;
+	}
+	valToPercent(val) {
+		const range = this.max - this.min;
+		return range === 0 ? 0 : (val - this.min) / range * 100;
+	}
+	percentToVal(pct) {
+		return this.snap(this.min + pct / 100 * (this.max - this.min));
+	}
+	snap(val) {
+		const stepped = Math.round((val - this.min) / this.step) * this.step + this.min;
+		return Math.min(this.max, Math.max(this.min, parseFloat(stepped.toFixed(10))));
+	}
+	getThumbValue(thumb) {
+		if (thumb === "max") return this.maxVal;
+		return this.range ? this.minVal : this.valueAsNumber;
+	}
+};
+__decorate([property({
+	type: Boolean,
+	reflect: true
+}), __decorateMetadata("design:type", Boolean)], USlider.prototype, "range", void 0);
+__decorate([property({
+	type: Boolean,
+	attribute: "show-value"
+}), __decorateMetadata("design:type", Boolean)], USlider.prototype, "showValue", void 0);
+__decorate([property({
+	type: Boolean,
+	attribute: "show-tooltip"
+}), __decorateMetadata("design:type", Boolean)], USlider.prototype, "showTooltip", void 0);
+__decorate([property({ attribute: false }), __decorateMetadata("design:type", Object)], USlider.prototype, "formatter", void 0);
+__decorate([property({ attribute: false }), __decorateMetadata("design:type", Array)], USlider.prototype, "marks", void 0);
+__decorate([property({ type: Number }), __decorateMetadata("design:type", Number)], USlider.prototype, "offset", void 0);
+__decorate([property({ type: Number }), __decorateMetadata("design:type", Number)], USlider.prototype, "min", void 0);
+__decorate([property({ type: Number }), __decorateMetadata("design:type", Number)], USlider.prototype, "max", void 0);
+__decorate([property({ type: Number }), __decorateMetadata("design:type", Number)], USlider.prototype, "step", void 0);
+__decorate([state(), __decorateMetadata("design:type", Object)], USlider.prototype, "dragging", void 0);
+__decorate([query(".track"), __decorateMetadata("design:type", typeof (_ref = typeof HTMLElement !== "undefined" && HTMLElement) === "function" ? _ref : Object)], USlider.prototype, "trackEl", void 0);
+USlider = __decorate([customElement("u-slider")], USlider);
+//#endregion
+export { USlider };

package/dist/components/slider/USlider.styles.d.ts

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

package/dist/components/slider/USlider.styles.js

@@ -0,0 +1,125 @@
+import { css } from "lit";
+//#region src/components/slider/USlider.styles.ts
+var styles = css`
+  :host {
+    --slider-fill-color: var(--u-blue-600);
+    --slider-track-color: var(--u-neutral-300);
+    --slider-track-height: 6px;
+    --slider-thumb-size: 18px;
+    --slider-thumb-color: var(--u-blue-600);
+    --slider-thumb-border-color: var(--u-neutral-0);
+    --slider-mark-size: 12px;
+    --slider-mark-color: var(--u-neutral-0);
+    --slider-mark-border-color: var(--u-neutral-400);
+  }
+
+  :host {
+    display: block;
+    width: 100%;
+    color: var(--u-txt-color);
+    font-size: inherit;
+    font-family: var(--u-font-base);
+  }
+
+  .container {
+    position: relative;
+    height: var(--slider-thumb-size);
+    touch-action: none;
+    user-select: none;
+    -webkit-user-select: none;
+    cursor: pointer;
+  }
+
+  .track {
+    position: absolute;
+    left: 0;
+    right: 0;
+    top: 50%;
+    transform: translateY(-50%);
+    height: var(--slider-track-height);
+    border-radius: calc(var(--slider-track-height) / 2);
+    background: var(--slider-track-color);
+    overflow: visible;
+  }
+
+  .fill {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    border-radius: inherit;
+    background: var(--slider-fill-color);
+  }
+
+  .thumb {
+    position: absolute;
+    z-index: 1;
+    top: 50%;
+    transform: translate(-50%, -50%);
+    outline: none;
+  }
+
+  .thumb-content {
+    width: var(--slider-thumb-size);
+    height: var(--slider-thumb-size);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border: 2px solid var(--slider-thumb-border-color);
+    border-radius: 50%;
+    background: var(--slider-thumb-color);
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
+    transition: transform 0.15s ease, box-shadow 0.15s ease;
+    cursor: pointer;
+  }
+  .thumb:hover .thumb-content,
+  .thumb:active .thumb-content {
+    transform: scale(1.15);
+    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.3);
+  }
+  .thumb:focus-visible .thumb-content {
+    box-shadow: 0 0 0 1px var(--slider-fill-color);
+  }
+
+  /* 슬롯에 커스텀 엘리먼트가 들어오면 기본 스타일 제거 */
+  .thumb-content:has(::slotted(*)) {
+    width: auto;
+    height: auto;
+    border: none;
+    border-radius: 0;
+    background: transparent;
+    box-shadow: none;
+  }
+
+  .marks {
+    position: absolute;
+    z-index: 0;
+    inset: 0;
+    pointer-events: none;
+  }
+
+  .mark {
+    position: absolute;
+    top: 50%;
+    transform: translate(-50%, -50%);
+    width: var(--slider-mark-size);
+    height: var(--slider-mark-size);
+    border: 2px solid var(--slider-mark-border-color);
+    border-radius: 50%;
+    background: var(--slider-mark-color);
+  }
+
+  .mark-labels {
+    position: relative;
+    margin-top: 12px;
+  }
+
+  .mark-label {
+    position: absolute;
+    transform: translateX(-50%);
+    font-size: 0.75em;
+    color: var(--u-txt-color-weak);
+    white-space: nowrap;
+  }
+`;
+//#endregion
+export { styles };

package/dist/components/spinner/USpinner.d.ts

@@ -1,7 +1,28 @@
-import { USpinner } from './USpinner.component.js';
+import { UElement } from '../UElement.js';
+export type SpinnerColor = "neutral" | "blue" | "green" | "yellow" | "red" | "orange" | "teal" | "cyan" | "purple" | "pink";
+/**
+ * 로딩 상태를 나타내는 회전 스피너 컴포넌트입니다.
+ *
+ * @slot - 스피너 아래에 표시할 텍스트
+ *
+ * @csspart svg - 스피너 SVG 요소
+ * @csspart label - 라벨 영역
+ *
+ * @cssprop --spinner-track-width - 트랙 두께 (기본: 0.125em)
+ * @cssprop --spinner-track-color - 트랙 배경색
+ * @cssprop --spinner-indicator-color - 인디케이터 색상
+ * @cssprop --spinner-indicator-speed - 회전 속도 (기본: 2s)
+ */
+export declare class USpinner extends UElement {
+    static styles: import('lit').CSSResultGroup[];
+    /** 인디케이터 색상 */
+    color?: SpinnerColor;
+    private hasLabel;
+    render(): import('lit-html').TemplateResult<1>;
+    private handleSlotChange;
+}
 declare global {
     interface HTMLElementTagNameMap {
         'u-spinner': USpinner;
     }
 }
-export { USpinner };

package/dist/components/spinner/USpinner.js

@@ -1,5 +1,39 @@
-import { USpinner } from './USpinner.component.js';
-
-USpinner.define("u-spinner");
+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 "./USpinner.styles.js";
+import { customElement, property, state } from "lit/decorators.js";
+import { html } from "lit";
+//#region src/components/spinner/USpinner.ts
+var USpinner = class USpinner extends UElement {
+	constructor(..._args) {
+		super(..._args);
+		this.hasLabel = false;
+	}
+	static {
+		this.styles = [super.styles, styles];
+	}
+	render() {
+		return html`
+      <svg class="spinner" part="svg">
+        <circle class="track"></circle>
+        <circle class="indicator"></circle>
+      </svg>
 
+      <span class="label" part="label" ?hidden=${!this.hasLabel}>
+        <slot @slotchange=${this.handleSlotChange}></slot>
+      </span>
+    `;
+	}
+	handleSlotChange(e) {
+		this.hasLabel = e.target.assignedNodes({ flatten: true }).some((node) => node.nodeType === Node.ELEMENT_NODE || node.nodeType === Node.TEXT_NODE && node.textContent?.trim() !== "");
+	}
+};
+__decorate([property({
+	type: String,
+	reflect: true
+}), __decorateMetadata("design:type", Object)], USpinner.prototype, "color", void 0);
+__decorate([state(), __decorateMetadata("design:type", Object)], USpinner.prototype, "hasLabel", void 0);
+USpinner = __decorate([customElement("u-spinner")], USpinner);
+//#endregion
 export { USpinner };

package/dist/components/spinner/USpinner.styles.js

@@ -1,41 +1,62 @@
-import { css } from 'lit';
-
-const styles = css`
+import { css } from "lit";
+//#region src/components/spinner/USpinner.styles.ts
+var styles = css`
   :host {
-    --track-width: 0.125em;
-    --track-color: var(--u-neutral-200, #e5e7eb);
-    --indicator-color: var(--u-neutral-800, #1f2937);
+    --spinner-track-width: 0.125em;
+    --spinner-track-color: var(--u-neutral-200);
+    --spinner-indicator-color: var(--u-neutral-800);
+    --spinner-indicator-speed: 2s;
   }
 
+  /* Color variants */
+  :host([color="blue"]) { --spinner-indicator-color: var(--u-blue-600); }
+  :host([color="green"]) { --spinner-indicator-color: var(--u-green-600); }
+  :host([color="yellow"]) { --spinner-indicator-color: var(--u-yellow-600); }
+  :host([color="red"]) { --spinner-indicator-color: var(--u-red-600); }
+  :host([color="orange"]) { --spinner-indicator-color: var(--u-orange-600); }
+  :host([color="teal"]) { --spinner-indicator-color: var(--u-teal-600); }
+  :host([color="cyan"]) { --spinner-indicator-color: var(--u-cyan-600); }
+  :host([color="purple"]) { --spinner-indicator-color: var(--u-purple-600); }
+  :host([color="pink"]) { --spinner-indicator-color: var(--u-pink-600); }
+
   :host {
     display: inline-flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 0.25em;
     font-size: inherit;
   }
 
   .spinner {
-    flex: 1 1 auto;
+    flex: 0 0 auto;
     width: 1em;
     height: 1em;
   }
   .spinner circle {
     fill: none;
-    stroke-width: var(--track-width);
-    r: calc(0.5em - var(--track-width) / 2);
+    stroke-width: var(--spinner-track-width);
+    r: calc(0.5em - var(--spinner-track-width) / 2);
     cx: 0.5em;
     cy: 0.5em;
   }
 
   .track {
-    stroke: var(--track-color);
+    stroke: var(--spinner-track-color);
     transform-origin: 0% 0%;
   }
 
   .indicator {
-    stroke: var(--indicator-color);
+    stroke: var(--spinner-indicator-color);
     stroke-linecap: round;
     stroke-dasharray: 150% 75%;
     transform-origin: 50% 50%;
-    animation: spin 2s linear infinite;
+    animation: spin var(--spinner-indicator-speed) linear infinite;
+  }
+
+  .label {
+    font-size: 0.5em;
+    color: var(--spinner-indicator-color);
+    user-select: none;
   }
 
   @keyframes spin {
@@ -55,5 +76,5 @@ const styles = css`
     }
   }
 `;
-
+//#endregion
 export { styles };