@iyulab/components 0.3.0 → 1.0.0

package/dist/components/split-panel/USplitPanel.d.ts

@@ -1,7 +1,54 @@
-import { USplitPanel } from './USplitPanel.component.js';
+import { PropertyValues } from 'lit';
+import { UElement } from '../UElement.js';
+/**
+ * 두 패널을 분할하고 크기를 조절할 수 있는 레이아웃 컴포넌트입니다.
+ *
+ * @slot - 분할된 패널 요소들
+ * @slot splitter - 핸들(스플리터) UI
+ *
+ * @cssprop --splitter-size - 스플리터 크기 (default: 4px)
+ * @cssprop --splitter-color - 스플리터 색상
+ * @cssprop --splitter-color-hover - 스플리터 호버 색상
+ * @cssprop --splitter-color-active - 스플리터 활성 색상
+ *
+ * @event shift-start - 구분선 이동 시작 시 발생
+ * @event shift - 구분선 이동 중 발생
+ * @event shift-end - 구분선 이동 완료 시 발생
+ */
+export declare class USplitPanel extends UElement {
+    static styles: import('lit').CSSResultGroup[];
+    /** 리사이즈 비활성화 여부 */
+    disabled: boolean;
+    /** 분할 방향 */
+    orientation: 'horizontal' | 'vertical';
+    /** 가상 스플리터를 보여주면서 마우스 놓을 지점에 업데이트 */
+    lazy: boolean;
+    /** 기본(초기) 패널 비율 */
+    defaultRatio: number[];
+    /** 현재 패널 크기 비율 상태 */
+    ratio: number[];
+    private ghost?;
+    private panels;
+    private splitter?;
+    private dragState;
+    private get percentages();
+    private get splitterSize();
+    private get splitterCount();
+    protected willUpdate(changedProperties: PropertyValues): void;
+    render(): import('lit-html').TemplateResult<1>;
+    private handleSlotChange;
+    private handleSplitterSlotChange;
+    private appendSplitters;
+    private createSplitter;
+    private updatePanelLayout;
+    private handleDblClick;
+    private handlePointerDown;
+    private handlePointerMove;
+    private handlePointerUp;
+    private clampPair;
+}
 declare global {
     interface HTMLElementTagNameMap {
         'u-split-panel': USplitPanel;
     }
 }
-export { USplitPanel };

package/dist/components/split-panel/USplitPanel.js

@@ -1,5 +1,241 @@
-import { USplitPanel } from './USplitPanel.component.js';
-
-USplitPanel.define("u-split-panel");
+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 { arrayAttrConverter } from "../../utilities/converters.js";
+import { styles } from "./USplitPanel.styles.js";
+import { customElement, property, query } from "lit/decorators.js";
+import { html } from "lit";
+//#region src/components/split-panel/USplitPanel.ts
+var _ref;
+var USplitPanel = class USplitPanel extends UElement {
+	constructor(..._args) {
+		super(..._args);
+		this.disabled = false;
+		this.orientation = "horizontal";
+		this.lazy = false;
+		this.defaultRatio = [];
+		this.ratio = [];
+		this.panels = [];
+		this.dragState = {
+			index: -1,
+			startPoint: 0,
+			availableSize: 0,
+			percentages: [],
+			ghostDelta: 0
+		};
+		this.handleSlotChange = (e) => {
+			this.panels = e.target.assignedElements({ flatten: true }).filter((el) => el instanceof HTMLElement);
+			this.appendSplitters();
+			this.updatePanelLayout();
+		};
+		this.handleSplitterSlotChange = (e) => {
+			this.splitter = e.target.assignedNodes({ flatten: true }).at(0);
+			this.appendSplitters();
+		};
+		this.handleDblClick = () => {
+			if (this.disabled) return;
+			this.ratio = this.defaultRatio.length === this.panels.length ? [...this.defaultRatio] : [];
+			this.updatePanelLayout();
+		};
+		this.handlePointerDown = (e) => {
+			if (e.button !== 0 || this.disabled) return;
+			e.preventDefault();
+			const target = e.currentTarget;
+			target.setPointerCapture(e.pointerId);
+			target.addEventListener("pointermove", this.handlePointerMove);
+			target.addEventListener("pointerup", this.handlePointerUp);
+			target.addEventListener("pointercancel", this.handlePointerUp);
+			const hostRect = this.getBoundingClientRect();
+			const containerSize = this.orientation === "horizontal" ? hostRect.width : hostRect.height;
+			const splitterRect = target.getBoundingClientRect();
+			const splitterPos = this.orientation === "horizontal" ? splitterRect.left - hostRect.left : splitterRect.top - hostRect.top;
+			this.dragState = {
+				index: parseInt(target.dataset.index || "-1"),
+				startPoint: this.orientation === "horizontal" ? e.clientX : e.clientY,
+				availableSize: containerSize - this.splitterSize * this.splitterCount,
+				percentages: this.percentages,
+				ghostDelta: 0
+			};
+			if (this.lazy && this.ghost) {
+				this.ghost.style.left = "";
+				this.ghost.style.top = "";
+				this.ghost.style.transform = "";
+				const prop = this.orientation === "horizontal" ? "left" : "top";
+				this.ghost.style[prop] = `${splitterPos}px`;
+				this.ghost.setAttribute("active", "");
+			}
+			document.body.style.userSelect = "none";
+			document.body.style.cursor = this.orientation === "horizontal" ? "col-resize" : "row-resize";
+			this.fire("shift-start", { detail: {
+				index: this.dragState.index,
+				ratio: [...this.percentages]
+			} });
+		};
+		this.handlePointerMove = (e) => {
+			e.preventDefault();
+			const deltaPixel = (this.orientation === "horizontal" ? e.clientX : e.clientY) - this.dragState.startPoint;
+			const deltaPercent = deltaPixel / this.dragState.availableSize * 100;
+			const aIdx = this.dragState.index;
+			const bIdx = aIdx + 1;
+			if (this.lazy && this.ghost) {
+				const maxDelta = this.dragState.percentages[bIdx] / 100 * this.dragState.availableSize;
+				const minDelta = -(this.dragState.percentages[aIdx] / 100) * this.dragState.availableSize;
+				this.dragState.ghostDelta = Math.max(minDelta, Math.min(maxDelta, deltaPixel));
+				const axis = this.orientation === "horizontal" ? "X" : "Y";
+				this.ghost.style.transform = `translate${axis}(${this.dragState.ghostDelta}px)`;
+			} else {
+				const [aPercent, bPercent] = this.clampPair(this.dragState.percentages[aIdx] + deltaPercent, this.dragState.percentages[bIdx] - deltaPercent);
+				const dim = this.orientation === "horizontal" ? "width" : "height";
+				const offset = this.splitterSize * (this.splitterCount / this.panels.length);
+				this.panels[aIdx].style[dim] = `calc(${aPercent}% - ${offset}px)`;
+				this.panels[bIdx].style[dim] = `calc(${bPercent}% - ${offset}px)`;
+				const newRatio = [...this.dragState.percentages];
+				newRatio[aIdx] = aPercent;
+				newRatio[bIdx] = bPercent;
+				this.ratio = newRatio;
+			}
+			this.fire("shift", { detail: {
+				index: this.dragState.index,
+				ratio: this.lazy ? this.percentages : [...this.ratio]
+			} });
+		};
+		this.handlePointerUp = (e) => {
+			const target = e.currentTarget;
+			target.releasePointerCapture(e.pointerId);
+			target.removeEventListener("pointermove", this.handlePointerMove);
+			target.removeEventListener("pointerup", this.handlePointerUp);
+			target.removeEventListener("pointercancel", this.handlePointerUp);
+			if (this.lazy && this.ghost) {
+				this.ghost.removeAttribute("active");
+				this.ghost.style.transform = "";
+				const deltaPercent = this.dragState.ghostDelta / this.dragState.availableSize * 100;
+				const aIdx = this.dragState.index;
+				const bIdx = aIdx + 1;
+				const newRatio = [...this.dragState.percentages];
+				const [a, b] = this.clampPair(newRatio[aIdx] + deltaPercent, newRatio[bIdx] - deltaPercent);
+				newRatio[aIdx] = a;
+				newRatio[bIdx] = b;
+				this.ratio = newRatio;
+				this.updatePanelLayout();
+			}
+			document.body.style.userSelect = "";
+			document.body.style.cursor = "";
+			this.fire("shift-end", { detail: {
+				index: this.dragState.index,
+				ratio: [...this.percentages]
+			} });
+		};
+	}
+	static {
+		this.styles = [super.styles, styles];
+	}
+	get percentages() {
+		const source = this.ratio.length === this.panels.length ? this.ratio : this.defaultRatio.length === this.panels.length ? this.defaultRatio : [];
+		if (source.length === this.panels.length) {
+			const total = source.reduce((sum, s) => sum + s, 0);
+			return source.map((s) => s / total * 100);
+		}
+		const equals = 100 / this.panels.length;
+		return this.panels.map(() => equals);
+	}
+	get splitterSize() {
+		const sizeStr = getComputedStyle(this).getPropertyValue("--splitter-size").trim();
+		return parseFloat(sizeStr) || 4;
+	}
+	get splitterCount() {
+		return Math.max(0, this.panels.length - 1);
+	}
+	willUpdate(changedProperties) {
+		super.willUpdate(changedProperties);
+		if ([
+			"orientation",
+			"defaultRatio",
+			"ratio"
+		].some((k) => changedProperties.has(k))) this.updatePanelLayout();
+	}
+	render() {
+		return html`
+      <slot @slotchange=${this.handleSlotChange}></slot>
 
+      <div class="splitter-ghost"></div>
+      <div hidden aria-hidden="true">
+        <slot name="splitter" @slotchange=${this.handleSplitterSlotChange}></slot>
+      </div>
+    `;
+	}
+	appendSplitters() {
+		const root = this.renderRoot;
+		if (!root) return;
+		root.querySelectorAll(".splitter").forEach((el) => el.remove());
+		const ref = this.ghost ?? null;
+		for (let i = 0; i < this.splitterCount; i++) {
+			const splitter = this.createSplitter(i);
+			root.insertBefore(splitter, ref);
+		}
+	}
+	createSplitter(index) {
+		const el = document.createElement("div");
+		el.setAttribute("class", "splitter");
+		el.setAttribute("part", "splitter");
+		el.style.order = String(index * 2 + 1);
+		el.dataset.index = String(index);
+		if (this.splitter) el.appendChild(this.splitter.cloneNode(true));
+		el.addEventListener("pointerdown", this.handlePointerDown);
+		el.addEventListener("dblclick", this.handleDblClick);
+		return el;
+	}
+	updatePanelLayout() {
+		if (this.panels.length === 0) return;
+		const dim = this.orientation === "horizontal" ? "width" : "height";
+		const otherDim = this.orientation === "horizontal" ? "height" : "width";
+		const percentages = this.percentages;
+		const splitterOffset = this.splitterSize * (this.splitterCount / this.panels.length);
+		this.panels.forEach((panel, index) => {
+			panel.style[dim] = `calc(${percentages[index]}% - ${splitterOffset}px)`;
+			panel.style[otherDim] = "";
+			panel.style.order = String(index * 2);
+			panel.style.boxSizing = "border-box";
+			panel.style.flexShrink = "0";
+			panel.style.overflow = "auto";
+		});
+	}
+	clampPair(aRaw, bRaw) {
+		const sum = aRaw + bRaw;
+		let a = aRaw, b = bRaw;
+		if (a < 0) {
+			a = 0;
+			b = sum;
+		} else if (b < 0) {
+			b = 0;
+			a = sum;
+		}
+		return [a, b];
+	}
+};
+__decorate([property({
+	type: Boolean,
+	reflect: true
+}), __decorateMetadata("design:type", Object)], USplitPanel.prototype, "disabled", void 0);
+__decorate([property({
+	type: String,
+	reflect: true
+}), __decorateMetadata("design:type", String)], USplitPanel.prototype, "orientation", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true
+}), __decorateMetadata("design:type", Object)], USplitPanel.prototype, "lazy", void 0);
+__decorate([property({
+	type: Array,
+	reflect: true,
+	attribute: "default-ratio",
+	converter: arrayAttrConverter(parseFloat)
+}), __decorateMetadata("design:type", Array)], USplitPanel.prototype, "defaultRatio", void 0);
+__decorate([property({
+	type: Array,
+	reflect: true,
+	converter: arrayAttrConverter(parseFloat)
+}), __decorateMetadata("design:type", Array)], USplitPanel.prototype, "ratio", void 0);
+__decorate([query(".splitter-ghost"), __decorateMetadata("design:type", typeof (_ref = typeof HTMLElement !== "undefined" && HTMLElement) === "function" ? _ref : Object)], USplitPanel.prototype, "ghost", void 0);
+USplitPanel = __decorate([customElement("u-split-panel")], USplitPanel);
+//#endregion
 export { USplitPanel };

package/dist/components/split-panel/USplitPanel.styles.js

@@ -1,10 +1,11 @@
-import { css } from 'lit';
-
-const styles = css`
+import { css } from "lit";
+//#region src/components/split-panel/USplitPanel.styles.ts
+var styles = css`
   :host {
     --splitter-size: 4px;
-    --splitter-color: var(--u-neutral-200, #e5e7eb);
-    --splitter-active-color: var(--u-blue-500, #3b82f6);
+    --splitter-color: var(--u-neutral-200);
+    --splitter-color-hover: var(--u-blue-300);
+    --splitter-color-active: var(--u-blue-500);
   }
 
   :host {
@@ -21,29 +22,60 @@ const styles = css`
     flex-direction: column;
   }
 
+  :host([disabled]) .splitter {
+    pointer-events: none;
+    opacity: 0.4;
+  }
+
   /* Splitter */
   .splitter {
+    position: relative;
+    z-index: 1;
     flex-shrink: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
     background-color: var(--splitter-color);
     transition: background-color 0.15s ease;
+    touch-action: none;
+  }
+  .splitter:hover {
+    background-color: var(--splitter-color-hover);
   }
-  .splitter[orientation="horizontal"] {
+  .splitter:active {
+    background-color: var(--splitter-color-active);
+  }
+  :host([orientation="horizontal"]) .splitter {
     width: var(--splitter-size);
     cursor: col-resize;
   }
-  .splitter[orientation="vertical"] {
+  :host([orientation="vertical"]) .splitter {
     height: var(--splitter-size);
     cursor: row-resize;
   }
-  .splitter:hover,
-  .splitter.active {
-    background-color: var(--splitter-active-color);
-  }
 
-  /* Slotted panels */
-  ::slotted(*) {
-    overflow: auto;
+  /* Ghost Splitter (lazy) */
+  .splitter-ghost {
+    display: none;
+    position: absolute;
+    z-index: 10;
+    background-color: var(--splitter-color-active);
+    opacity: 0.5;
+    pointer-events: none;
+  }
+  .splitter-ghost[active] {
+    display: block;
+  }
+  :host([orientation="horizontal"]) .splitter-ghost {
+    top: 0;
+    width: var(--splitter-size);
+    height: 100%;
+  }
+  :host([orientation="vertical"]) .splitter-ghost {
+    left: 0;
+    width: 100%;
+    height: var(--splitter-size);
   }
 `;
-
+//#endregion
 export { styles };

package/dist/components/switch/USwitch.d.ts

@@ -0,0 +1,43 @@
+import { UFormControlElement } from '../UFormControlElement.js';
+/**
+ * 온/오프 상태를 전환하는 스위치 컴포넌트입니다.
+ * font-size로 전체 크기를 지정하고, CSS 변수로 다양한 스타일을 적용할 수 있습니다.
+ *
+ * @slot - 스위치 옆에 표시될 레이블 텍스트
+ * @slot track-checked - 체크 상태에서 트랙에 표시될 콘텐츠
+ * @slot track-unchecked - 체크 해제 상태에서 트랙에 표시될 콘텐츠
+ * @slot thumb-checked - 체크 상태에서 thumb에 표시될 콘텐츠
+ * @slot thumb-unchecked - 체크 해제 상태에서 thumb에 표시될 콘텐츠
+ *
+ * @csspart wrapper - 스위치 전체 래퍼
+ * @csspart track - 트랙 요소
+ * @csspart thumb - thumb 요소
+ * @csspart label - 레이블 영역
+ *
+ * @cssprop --switch-track-width - 트랙 너비 (2.4em)
+ * @cssprop --switch-track-height - 트랙 높이 (1.4em)
+ * @cssprop --switch-track-color - 비활성 트랙 배경색
+ * @cssprop --switch-track-color-checked - 활성 트랙 배경색
+ * @cssprop --switch-thumb-size - thumb 크기 (1.1em)
+ * @cssprop --switch-thumb-offset - thumb 간격 (0.15em)
+ * @cssprop --switch-thumb-color - thumb 색상 (#fff)
+ * @cssprop --switch-thumb-color-checked - 활성 thumb 색상 (#fff)
+ * @cssprop --switch-radius - border-radius (9999px, pill 형태)
+ * @cssprop --switch-duration - 전환 애니메이션 시간 (0.25s)
+ *
+ * @event change - 스위치 상태 변경 시 발생
+ */
+export declare class USwitch extends UFormControlElement<string> {
+    static styles: import('lit').CSSResultGroup[];
+    /** 체크 여부 */
+    checked: boolean;
+    render(): import('lit-html').TemplateResult<1>;
+    validate(): boolean;
+    reset(): void;
+    private handleInputChange;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'u-switch': USwitch;
+    }
+}

package/dist/components/switch/USwitch.js

@@ -0,0 +1,80 @@
+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 { styles } from "./USwitch.styles.js";
+import { customElement, property } from "lit/decorators.js";
+import { html } from "lit";
+import { live } from "lit/directives/live.js";
+//#region src/components/switch/USwitch.ts
+var USwitch = class USwitch extends UFormControlElement {
+	constructor(..._args) {
+		super(..._args);
+		this.checked = false;
+		this.handleInputChange = (e) => {
+			e.stopImmediatePropagation();
+			if (this.readonly || this.disabled) return;
+			const input = e.target;
+			this.checked = input.checked;
+			this.internals?.setFormValue(this.checked ? this.value || String(this.checked) : String(this.checked));
+			this.internals?.setValidity(input.validity, this.validationMessage || input.validationMessage, this.shadowRoot?.querySelector(".track") || void 0);
+			if (!this.novalidate) this.validate();
+			this.relay(e);
+		};
+	}
+	static {
+		this.styles = [super.styles, styles];
+	}
+	render() {
+		return html`
+      <label class="wrapper" part="wrapper">
+        <input
+          type="checkbox"
+          ?disabled=${this.disabled || this.readonly}
+          ?required=${this.required}
+          .checked=${live(this.checked)}
+          @change=${this.handleInputChange}
+        />
+        <span class="track" part="track">
+          <span class="track-checked">
+            <slot name="track-checked"></slot>
+          </span>
+          <span class="track-unchecked">
+            <slot name="track-unchecked"></slot>
+          </span>
+          <span class="thumb" part="thumb">
+            <span class="thumb-checked">
+              <slot name="thumb-checked"></slot>
+            </span>
+            <span class="thumb-unchecked">
+              <slot name="thumb-unchecked"></slot>
+            </span>
+          </span>
+        </span>
+        <span class="label" part="label">
+          <slot></slot>
+          <span class="required" ?hidden=${!this.required}>*</span>
+        </span>
+      </label>
+
+      <div class="description" ?hidden=${!this.description}>
+        ${this.description}
+      </div>
+    `;
+	}
+	validate() {
+		if (this.internals) this.invalid = !this.internals.reportValidity();
+		else this.invalid = this.required && !this.checked;
+		return !this.invalid;
+	}
+	reset() {
+		this.checked = false;
+		this.invalid = false;
+	}
+};
+__decorate([property({
+	type: Boolean,
+	reflect: true
+}), __decorateMetadata("design:type", Boolean)], USwitch.prototype, "checked", void 0);
+USwitch = __decorate([customElement("u-switch")], USwitch);
+//#endregion
+export { USwitch };

package/dist/components/switch/USwitch.styles.d.ts

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