@iyulab/components 0.3.0 → 1.0.0

package/dist/components/textarea/UTextarea.js

@@ -0,0 +1,145 @@
+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 { styles } from "./UTextarea.styles.js";
+import { customElement, property, query } from "lit/decorators.js";
+import { html } from "lit";
+import { ifDefined } from "lit/directives/if-defined.js";
+import { live } from "lit/directives/live.js";
+//#region src/components/textarea/UTextarea.ts
+var _ref, _ref2;
+var UTextarea = class UTextarea extends UFormControlElement {
+	constructor(..._args) {
+		super(..._args);
+		this.variant = "outlined";
+		this.resize = "auto";
+		this.counter = false;
+		this.spellcheck = false;
+		this.autofocus = false;
+		this.autocorrect = false;
+		this.autocapitalize = "off";
+		this.handleTextareaInput = (e) => {
+			this.value = this.textareaEl?.value;
+			this.relay(e);
+		};
+		this.handleTextareaChange = (e) => {
+			this.value = this.textareaEl?.value;
+			this.internals?.setFormValue(this.value || "");
+			this.internals?.setValidity(this.textareaEl?.validity, this.textareaEl?.validationMessage, this.textareaEl);
+			if (!this.novalidate) this.validate();
+			this.relay(e);
+		};
+	}
+	static {
+		this.styles = [super.styles, styles];
+	}
+	updated(changedProperties) {
+		super.updated(changedProperties);
+		if (this.resize === "auto" && [
+			"value",
+			"minRows",
+			"maxRows",
+			"resize"
+		].some((k) => changedProperties.has(k))) this.resizeTextarea();
+	}
+	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">
+          <textarea part="textarea"
+            scrollable
+            ?required=${this.required}
+            ?disabled=${this.disabled}
+            ?readonly=${this.readonly}
+            rows=${this.minRows || 1}
+            minlength=${ifDefined(this.minlength)}
+            maxlength=${ifDefined(this.maxlength)}
+            dirname=${ifDefined(this.dirname)}
+            spellcheck=${this.spellcheck}
+            ?autofocus=${this.autofocus}
+            ?autocorrect=${this.autocorrect}
+            autocapitalize=${ifDefined(this.autocapitalize)}
+            autocomplete=${ifDefined(this.autocomplete)}
+            enterkeyhint=${ifDefined(this.enterkeyhint)}
+            inputmode=${ifDefined(this.inputmode)}
+            placeholder=${ifDefined(this.placeholder)}
+            name=${ifDefined(this.name)}
+            .value=${live(this.value || "")}
+            @input=${this.handleTextareaInput}
+            @change=${this.handleTextareaChange}
+          ></textarea>
+        </div>
+
+        <div class="counter" part="counter" ?hidden=${!this.counter}>
+          ${this.value?.length}${this.maxlength ? ` / ${this.maxlength}` : ""}
+        </div>
+      </u-field>
+    `;
+	}
+	validate() {
+		if (this.internals) this.invalid = !this.internals.checkValidity();
+		else this.invalid = !this.textareaEl?.checkValidity();
+		return !this.invalid;
+	}
+	reset() {
+		this.value = void 0;
+		this.invalid = false;
+	}
+	resizeTextarea() {
+		const textarea = this.textareaEl;
+		if (!textarea) return;
+		const computed = getComputedStyle(textarea);
+		const lineHeight = parseFloat(computed.lineHeight) || parseFloat(computed.fontSize) * 1.5;
+		const extra = parseFloat(computed.paddingTop) + parseFloat(computed.paddingBottom) + (parseFloat(computed.borderTopWidth) + parseFloat(computed.borderBottomWidth));
+		const minHeight = this.minRows ? lineHeight * this.minRows + extra : lineHeight + extra;
+		const maxHeight = this.maxRows ? lineHeight * this.maxRows + extra : Infinity;
+		textarea.style.height = "auto";
+		const scrollHeight = textarea.scrollHeight;
+		const newHeight = Math.min(Math.max(scrollHeight, minHeight), maxHeight);
+		textarea.style.height = `${newHeight}px`;
+		textarea.style.overflowY = scrollHeight > maxHeight ? "auto" : "hidden";
+	}
+};
+__decorate([property({
+	type: String,
+	reflect: true
+}), __decorateMetadata("design:type", Object)], UTextarea.prototype, "variant", void 0);
+__decorate([property({
+	type: String,
+	reflect: true
+}), __decorateMetadata("design:type", Object)], UTextarea.prototype, "resize", void 0);
+__decorate([property({
+	type: Number,
+	attribute: "min-rows"
+}), __decorateMetadata("design:type", Number)], UTextarea.prototype, "minRows", void 0);
+__decorate([property({
+	type: Number,
+	attribute: "max-rows"
+}), __decorateMetadata("design:type", Number)], UTextarea.prototype, "maxRows", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true
+}), __decorateMetadata("design:type", Boolean)], UTextarea.prototype, "counter", void 0);
+__decorate([property({ type: Number }), __decorateMetadata("design:type", Number)], UTextarea.prototype, "minlength", void 0);
+__decorate([property({ type: Number }), __decorateMetadata("design:type", Number)], UTextarea.prototype, "maxlength", void 0);
+__decorate([property({ type: String }), __decorateMetadata("design:type", String)], UTextarea.prototype, "dirname", void 0);
+__decorate([property({ type: String }), __decorateMetadata("design:type", Object)], UTextarea.prototype, "inputmode", void 0);
+__decorate([property({ type: String }), __decorateMetadata("design:type", Object)], UTextarea.prototype, "enterkeyhint", void 0);
+__decorate([property({ type: Boolean }), __decorateMetadata("design:type", Boolean)], UTextarea.prototype, "spellcheck", void 0);
+__decorate([property({ type: Boolean }), __decorateMetadata("design:type", Boolean)], UTextarea.prototype, "autofocus", void 0);
+__decorate([property({ type: Boolean }), __decorateMetadata("design:type", Boolean)], UTextarea.prototype, "autocorrect", void 0);
+__decorate([property({ type: String }), __decorateMetadata("design:type", Object)], UTextarea.prototype, "autocapitalize", void 0);
+__decorate([property({ type: String }), __decorateMetadata("design:type", typeof (_ref = typeof AutoFill !== "undefined" && AutoFill) === "function" ? _ref : Object)], UTextarea.prototype, "autocomplete", void 0);
+__decorate([property({ type: String }), __decorateMetadata("design:type", String)], UTextarea.prototype, "placeholder", void 0);
+__decorate([query("textarea", true), __decorateMetadata("design:type", typeof (_ref2 = typeof HTMLTextAreaElement !== "undefined" && HTMLTextAreaElement) === "function" ? _ref2 : Object)], UTextarea.prototype, "textareaEl", void 0);
+UTextarea = __decorate([customElement("u-textarea")], UTextarea);
+//#endregion
+export { UTextarea };

package/dist/components/textarea/UTextarea.styles.d.ts

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

package/dist/components/textarea/UTextarea.styles.js

@@ -0,0 +1,157 @@
+import { css } from "lit";
+//#region src/components/textarea/UTextarea.styles.ts
+var styles = css`
+  :host {
+    display: inline-block;
+    color: var(--u-txt-color);
+    font-size: inherit;
+    font-family: var(--u-font-base);
+  }
+
+  /* ===== 컨테이너 (outlined 기본) ===== */
+  .container {
+    display: flex;
+    padding: 0.3em 0.6em;
+    border: 1px solid var(--u-input-border-color);
+    border-radius: 0.25em;
+    background-color: var(--u-input-bg-color);
+    transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
+  }
+  :host([readonly]) .container,
+  :host([disabled]) .container {
+    border-color: var(--u-border-color-weak);
+    background-color: var(--u-bg-color-disabled);
+  }
+  :host(:not([readonly]):not([disabled])) .container:hover {
+    box-shadow: 0 0 0 1px var(--u-input-border-color-hover);
+  }
+  :host(:not([readonly]):not([disabled])) .container:focus-within {
+    box-shadow: 0 0 0 1px var(--u-input-border-color-focus);
+  }
+  :host([invalid]:not([readonly]):not([disabled])) .container {
+    box-shadow: 0 0 0 1px var(--u-input-border-color-invalid);
+  }
+
+  /* ===== Variant: filled ===== */
+  :host([variant="filled"]) .container {
+    border-color: transparent;
+    background-color: var(--u-neutral-200);
+    border-radius: 0.25em 0.25em 0 0;
+    border-bottom: 2px solid var(--u-input-border-color);
+  }
+  :host([variant="filled"][readonly]) .container,
+  :host([variant="filled"][disabled]) .container {
+    background-color: var(--u-bg-color-disabled);
+    border-bottom-color: var(--u-border-color-weak);
+  }
+  :host([variant="filled"]:not([readonly]):not([disabled])) .container:hover {
+    box-shadow: none;
+    background-color: var(--u-neutral-300);
+    border-bottom-color: var(--u-input-border-color-hover);
+  }
+  :host([variant="filled"]:not([readonly]):not([disabled])) .container:focus-within {
+    box-shadow: none;
+    border-bottom-color: var(--u-input-border-color-focus);
+  }
+  :host([variant="filled"][invalid]:not([readonly]):not([disabled])) .container {
+    box-shadow: none;
+    border-bottom-color: var(--u-input-border-color-invalid);
+  }
+
+  /* ===== Variant: underlined ===== */
+  :host([variant="underlined"]) .container {
+    border: none;
+    border-radius: 0;
+    background-color: transparent;
+    padding-left: 0;
+    padding-right: 0;
+    border-bottom: 1px solid var(--u-input-border-color);
+  }
+  :host([variant="underlined"][readonly]) .container,
+  :host([variant="underlined"][disabled]) .container {
+    background-color: transparent;
+    border-bottom-color: var(--u-border-color-weak);
+  }
+  :host([variant="underlined"]:not([readonly]):not([disabled])) .container:hover {
+    box-shadow: none;
+    border-bottom-color: var(--u-input-border-color-hover);
+  }
+  :host([variant="underlined"]:not([readonly]):not([disabled])) .container:focus-within {
+    box-shadow: none;
+    border-bottom-color: var(--u-input-border-color-focus);
+    border-bottom-width: 2px;
+  }
+  :host([variant="underlined"][invalid]:not([readonly]):not([disabled])) .container {
+    box-shadow: none;
+    border-bottom-color: var(--u-input-border-color-invalid);
+  }
+
+  /* ===== Variant: borderless ===== */
+  :host([variant="borderless"]) .container {
+    border: none;
+    border-radius: 0;
+    background-color: transparent;
+    padding: 0;
+    box-shadow: none;
+  }
+  :host([variant="borderless"]:not([readonly]):not([disabled])) .container:hover,
+  :host([variant="borderless"]:not([readonly]):not([disabled])) .container:focus-within {
+    box-shadow: none;
+  }
+
+  /* ===== Textarea 요소 ===== */
+  textarea {
+    all: unset;
+    flex: 1;
+    min-width: 0;
+    font-size: 1em;
+    line-height: 1.5;
+    white-space: pre-wrap;
+    word-wrap: break-word;
+  }
+  textarea::placeholder {
+    color: var(--u-txt-color-weak);
+  }
+  textarea:disabled {
+    cursor: not-allowed;
+  }
+  textarea:read-only {
+    cursor: default;
+  }
+  textarea:focus,
+  textarea:focus-visible {
+    outline: none;
+  }
+
+  :host([resize="none"]) textarea { 
+    resize: none; 
+  }
+  :host([resize="vertical"]) textarea { 
+    resize: vertical; 
+  }
+  :host([resize="horizontal"]) textarea { 
+    resize: horizontal; 
+  }
+  :host([resize="both"]) textarea { 
+    resize: both; 
+  }
+  :host([resize="auto"]) textarea {
+    resize: none;
+    overflow: hidden;
+  }
+  :host([disabled]) textarea,
+  :host([readonly]) textarea {
+    resize: none;
+  }
+
+  /* ===== 카운터 ===== */
+  .counter {
+    margin-top: 0.25em;
+    text-align: right;
+    color: var(--u-txt-color-weak);
+    font-size: 0.75em;
+    line-height: 1.2;
+  }
+`;
+//#endregion
+export { styles };

package/dist/components/tooltip/UTooltip.d.ts

@@ -1,7 +1,33 @@
-import { UTooltip } from './UTooltip.component.js';
+import { PropertyValues } from 'lit';
+import { UFloatingElement } from '../UFloatingElement.js';
+/**
+ * 특정 요소에 툴팁을 표시하는 컴포넌트입니다.
+ * 호버 또는 포커스 시 자동으로 표시합니다.
+ *
+ * @slot - 툴팁 콘텐츠
+ *
+ * @event show - 툴팁을 표시하기 직전 발생 (취소 가능)
+ * @event hide - 툴팁을 숨기기 직전 발생 (취소 가능)
+ */
+export declare class UTooltip extends UFloatingElement {
+    static styles: import('lit').CSSResultGroup[];
+    /** 마우스가 툴팁 위에 이동해도 유지하는지 여부 */
+    interactive: boolean;
+    /** 호버 시 마우스 커서 위치를 따라가는지 여부 */
+    tracking: boolean;
+    private isEmpty;
+    disconnectedCallback(): void;
+    protected updated(changedProperties: PropertyValues): void;
+    render(): import('lit-html').TemplateResult<1>;
+    private bind;
+    private unbind;
+    private handleSlotChange;
+    private handleAnchorTrigger;
+    private handleAnchorDismiss;
+    private handleAnchorPointerMove;
+}
 declare global {
     interface HTMLElementTagNameMap {
         'u-tooltip': UTooltip;
     }
 }
-export { UTooltip };

package/dist/components/tooltip/UTooltip.js

@@ -1,5 +1,105 @@
-import { UTooltip } from './UTooltip.component.js';
-
-UTooltip.define("u-tooltip");
-
+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 { styles } from "./UTooltip.styles.js";
+import { customElement, property } from "lit/decorators.js";
+import { html } from "lit";
+//#region src/components/tooltip/UTooltip.ts
+var UTooltip = class UTooltip extends UFloatingElement {
+	constructor(..._args) {
+		super(..._args);
+		this.interactive = false;
+		this.tracking = false;
+		this.isEmpty = true;
+		this.handleSlotChange = (event) => {
+			this.isEmpty = event.target.assignedNodes({ flatten: true }).every((node) => {
+				return node.nodeType === Node.TEXT_NODE && node.textContent?.trim() === "" || node.nodeType === Node.COMMENT_NODE;
+			});
+		};
+		this.handleAnchorTrigger = (event) => {
+			if (this.isEmpty) return;
+			let target = event.currentTarget;
+			if (!target) return;
+			if (this.tracking && event instanceof PointerEvent) target = this.createVirtualTarget(event);
+			this.show(target);
+		};
+		this.handleAnchorDismiss = (event) => {
+			if (this.interactive) {
+				const related = event.relatedTarget;
+				if (related instanceof Node) {
+					if (this.contains(related)) return;
+					if (this.targetEl instanceof Element && this.targetEl.contains(related)) return;
+				}
+			}
+			this.hide();
+		};
+		this.handleAnchorPointerMove = (event) => {
+			if (!this.tracking || !this.open) return;
+			const virtualEl = this.createVirtualTarget(event);
+			this.reposition(virtualEl);
+		};
+	}
+	static {
+		this.styles = [super.styles, styles];
+	}
+	disconnectedCallback() {
+		if (this.anchors) this.unbind(this.anchors);
+		super.disconnectedCallback();
+	}
+	updated(changedProperties) {
+		super.updated(changedProperties);
+		if (changedProperties.has("anchors")) {
+			const oldAnchors = changedProperties.get("anchors");
+			const newAnchors = this.anchors;
+			if (oldAnchors) this.unbind(oldAnchors);
+			if (newAnchors) this.bind(newAnchors);
+		}
+		if (changedProperties.has("offset") || changedProperties.has("interactive")) if (this.interactive) {
+			let size = 0;
+			if (typeof this.offset === "number") size = this.offset;
+			if (typeof this.offset === "object") {
+				const { mainAxis = 0, crossAxis = 0 } = this.offset;
+				size = Math.max(mainAxis, crossAxis);
+			}
+			this.style.setProperty("--tooltip-bridge-area", `${size}px`);
+		} else this.style.removeProperty("--tooltip-bridge-area");
+	}
+	render() {
+		return html`
+      <slot @slotchange=${this.handleSlotChange}></slot>
+    `;
+	}
+	bind(anchors) {
+		for (const anchor of anchors) {
+			anchor.addEventListener("pointerenter", this.handleAnchorTrigger);
+			anchor.addEventListener("pointerleave", this.handleAnchorDismiss);
+			anchor.addEventListener("pointermove", this.handleAnchorPointerMove);
+			anchor.addEventListener("focusin", this.handleAnchorTrigger);
+			anchor.addEventListener("focusout", this.handleAnchorDismiss);
+		}
+		this.addEventListener("pointerleave", this.handleAnchorDismiss);
+		this.addEventListener("focusout", this.handleAnchorDismiss);
+	}
+	unbind(anchors) {
+		for (const anchor of anchors) {
+			anchor.removeEventListener("pointerenter", this.handleAnchorTrigger);
+			anchor.removeEventListener("pointerleave", this.handleAnchorDismiss);
+			anchor.removeEventListener("pointermove", this.handleAnchorPointerMove);
+			anchor.removeEventListener("focusin", this.handleAnchorTrigger);
+			anchor.removeEventListener("focusout", this.handleAnchorDismiss);
+		}
+		this.removeEventListener("pointerleave", this.handleAnchorDismiss);
+		this.removeEventListener("focusout", this.handleAnchorDismiss);
+	}
+};
+__decorate([property({
+	type: Boolean,
+	reflect: true
+}), __decorateMetadata("design:type", Boolean)], UTooltip.prototype, "interactive", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true
+}), __decorateMetadata("design:type", Boolean)], UTooltip.prototype, "tracking", void 0);
+UTooltip = __decorate([customElement("u-tooltip")], UTooltip);
+//#endregion
 export { UTooltip };

package/dist/components/tooltip/UTooltip.styles.js

@@ -1,8 +1,8 @@
-import { css } from 'lit';
-
-const styles = css`
+import { css } from "lit";
+//#region src/components/tooltip/UTooltip.styles.ts
+var styles = css`
   :host {
-    --interactive-area: 0px;
+    --tooltip-bridge-area: 0px;
   }
 
   :host {
@@ -15,24 +15,22 @@ const styles = css`
     border-radius: 4px;
     background-color: var(--u-tooltip-bg-color);
     box-shadow: 0 6px 18px rgba(0, 0, 0, 0.2);
-    transform: scale(0.8);
-    transition: opacity 0.2s ease, transform 0.2s ease;
+    transform: scale(0.9);
+    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s 0.2s;
   }
-  :host([visible]) {
-    opacity: 0.8;
+  :host([open]) {
     transform: scale(1);
   }
 
-  /* 툴팁을 distance만큼 감싸는 보이지 않는 영역 */
+  /* 툴팁을 offset만큼 감싸는 보이지 않는 영역 */
   :host([interactive])::before {
     content: '';
     position: absolute;
-    /* 툴팁을 distance만큼 모든 방향으로 확장 */
-    inset: calc(var(--interactive-area) * -1);
+    inset: calc(var(--tooltip-bridge-area) * -1);
     background: transparent;
     pointer-events: auto;
     z-index: -1;
   }
 `;
-
+//#endregion
 export { styles };

package/dist/components/tree/UTree.d.ts

@@ -1,7 +1,67 @@
-import { UTree } from './UTree.component.js';
+import { PropertyValues } from 'lit';
+import { UElement } from '../UElement.js';
+import { UTreeItem, TreeItemTrigger } from '../tree-item/UTreeItem.js';
+/**
+ * 계층형 데이터 구조를 표시하는 트리 컴포넌트입니다.
+ *
+ * @slot - 트리 아이템 (u-tree-item)
+ *
+ * @cssprop tree-indent-size - 트리 아이템의 들여쓰기 크기 (기본값: 14px)
+ * @cssprop tree-indent-guide-offset - 들여쓰기 가이드 선의 좌측 간격 (기본값: 8px)
+ * @cssprop tree-indent-guide-width - 들여쓰기 가이드 선의 두께 (기본값: 1px)
+ * @cssprop tree-indent-guide-style - 들여쓰기 가이드 선의 스타일 (기본값: solid)
+ * @cssprop tree-indent-guide-color - 들여쓰기 가이드 선의 색상 (기본값: var(--u-border-color-weak))
+ *
+ * @event change - 선택된 아이템이 변경될 때 발생
+ */
+export declare class UTree extends UElement {
+    static styles: import('lit').CSSResultGroup[];
+    /** 아이템 선택 가능 여부 */
+    selectable: boolean;
+    /** 다중 선택 사용 여부 */
+    selectMultiple: boolean;
+    /** 리프 노드만 선택 사용 여부 */
+    selectLeaf: boolean;
+    /** 아이템 체크 가능 여부 */
+    checkable: boolean;
+    /** 체크박스 선택 시 하위 노드도 사용 여부 */
+    checkCascade: boolean;
+    /** 트리 펼치기 트리거 방식 */
+    trigger: TreeItemTrigger;
+    /** 드래그 앤드 드롭 지원 */
+    draggable: boolean;
+    droppable: boolean;
+    private expandIcon?;
+    private collapseIcon?;
+    private anchor;
+    private _items;
+    get items(): readonly UTreeItem[];
+    get selectedItems(): UTreeItem[];
+    get checkedItems(): UTreeItem[];
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    protected willUpdate(changedProperties: PropertyValues): void;
+    render(): import('lit-html').TemplateResult<1>;
+    expandAll(): void;
+    collapseAll(): void;
+    expand(value: string): void;
+    collapse(value: string): void;
+    toggle(value: string): void;
+    getItem(value: string): UTreeItem | undefined;
+    getItems(fn: (item: UTreeItem) => boolean): UTreeItem[];
+    mapItems(fn: (item: UTreeItem) => void): void;
+    private propagate;
+    private handleSlotChange;
+    private handleIconSlotChange;
+    private handlePick;
+    private selectRange;
+    private handleCheck;
+    private cascadeDown;
+    private cascadeUp;
+    private handleKeydown;
+}
 declare global {
     interface HTMLElementTagNameMap {
         'u-tree': UTree;
     }
 }
-export { UTree };