@iyulab/components 0.3.0 → 1.0.0

package/dist/components/field/UField.d.ts

@@ -0,0 +1,31 @@
+import { UElement } from '../UElement.js';
+/**
+ * 폼 컨트롤의 공통 레이아웃을 제공하는 필드 컴포넌트입니다.
+ * 라벨, 필수 표시, 설명 텍스트, 유효성 검사 메시지를 포함합니다.
+ *
+ * @slot - 폼 컨트롤 (input, select, textarea 등)
+ * @slot label-aside - 라벨 오른쪽 슬롯 영역 (숫자 표시, 알림 등)
+ */
+export declare class UField extends UElement {
+    static styles: import('lit').CSSResultGroup[];
+    /** 비활성화 여부 */
+    disabled: boolean;
+    /** 필수 입력 여부 */
+    required: boolean;
+    /** 유효성 검사 실패 상태 */
+    invalid: boolean;
+    /** 라벨 텍스트 */
+    label?: string;
+    /** 하단 설명 텍스트 */
+    description?: string;
+    /** 유효성 검사 실패 시 표시할 메시지 */
+    validationMessage?: string;
+    render(): import('lit-html').TemplateResult<1>;
+    private renderFooter;
+    private handleLabelClick;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'u-field': UField;
+    }
+}

package/dist/components/field/UField.js

@@ -0,0 +1,64 @@
+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 "./UField.styles.js";
+import { customElement, property } from "lit/decorators.js";
+import { html, nothing } from "lit";
+import { isFocusable } from "tabbable";
+//#region src/components/field/UField.ts
+var UField = class UField extends UElement {
+	constructor(..._args) {
+		super(..._args);
+		this.disabled = false;
+		this.required = false;
+		this.invalid = false;
+		this.handleLabelClick = () => {
+			const nodes = (this.shadowRoot?.querySelector("slot:not([name])"))?.assignedElements({ flatten: true }) || [];
+			for (const node of nodes) if (isFocusable(node)) {
+				node.focus();
+				return;
+			}
+		};
+	}
+	static {
+		this.styles = [super.styles, styles];
+	}
+	render() {
+		return html`
+      <div class="header" ?hidden=${!this.label}>
+        <label class="label" @click=${this.handleLabelClick}>
+          <span class="required" ?hidden=${!this.required}>*</span>
+          ${this.label}
+        </label>
+        <slot name="label-aside"></slot>
+      </div>
+
+      <slot></slot>
+
+      ${this.renderFooter()}
+    `;
+	}
+	renderFooter() {
+		const message = this.invalid && this.validationMessage ? this.validationMessage : this.description;
+		if (!message) return nothing;
+		return html`<div class="footer">${message}</div>`;
+	}
+};
+__decorate([property({
+	type: Boolean,
+	reflect: true
+}), __decorateMetadata("design:type", Boolean)], UField.prototype, "disabled", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true
+}), __decorateMetadata("design:type", Boolean)], UField.prototype, "required", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true
+}), __decorateMetadata("design:type", Boolean)], UField.prototype, "invalid", void 0);
+__decorate([property({ type: String }), __decorateMetadata("design:type", String)], UField.prototype, "label", void 0);
+__decorate([property({ type: String }), __decorateMetadata("design:type", String)], UField.prototype, "description", void 0);
+__decorate([property({ type: String }), __decorateMetadata("design:type", String)], UField.prototype, "validationMessage", void 0);
+UField = __decorate([customElement("u-field")], UField);
+//#endregion
+export { UField };

package/dist/components/field/UField.styles.d.ts

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

package/dist/components/field/UField.styles.js

@@ -0,0 +1,47 @@
+import { css } from "lit";
+//#region src/components/field/UField.styles.ts
+var styles = css`
+  :host {
+    display: block;
+    color: var(--u-txt-color);
+    font-size: inherit;
+    font-family: var(--u-font-base);
+  }
+  :host([disabled]) {
+    opacity: 0.6;
+    cursor: not-allowed;
+  }
+  :host([invalid]) .footer {
+    color: var(--u-red-600);
+  }
+
+  .header {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+    font-size: 0.8em;
+    margin-bottom: 0.5em;
+    user-select: none;
+  }
+
+  .label {
+    font-weight: 500;
+    line-height: 1.25;
+    cursor: pointer;
+  }
+
+  .required {
+    color: var(--u-red-600);
+    margin-right: 0.2em;
+  }
+  
+  .footer {
+    color: var(--u-txt-color-weak);
+    font-size: 0.75em;
+    line-height: 1.2;
+    margin-top: 0.5em;
+  }
+`;
+//#endregion
+export { styles };

package/dist/components/form/UForm.d.ts

@@ -1,7 +1,43 @@
-import { UForm } from './UForm.component.js';
+import { PropertyValues } from 'lit';
+import { UElement } from '../UElement.js';
+/**
+ * 여러 입력 요소를 그룹화하고 관리하는 폼 컨테이너 컴포넌트입니다.
+ * 폼 내의 UFormControlElement 기반 입력 요소의 값 변경을 감지하고,
+ * 포함/제외 규칙에 따라 모델 데이터를 자동으로 업데이트합니다.
+ *
+ * @event change - 폼 컨트롤 값 변경 시 발생
+ */
+export declare class UForm extends UElement {
+    static styles: import('lit').CSSResultGroup[];
+    /** 포함할 입력 요소의 name 속성 목록. 비어있으면 모두 포함됩니다. */
+    includes: string[];
+    /** 제외할 입력 요소의 name 속성 목록. */
+    excludes: string[];
+    /** 폼의 양방향 바인딩 데이터 모델. */
+    model?: Record<string, unknown>;
+    /** model의 초기값 스냅샷. reset 시 이 값으로 복원됩니다. */
+    private snapshot;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    protected updated(changedProperties: PropertyValues): void;
+    render(): import('lit-html').TemplateResult<1>;
+    /**
+     * 폼 내의 모든 포함된 컨트롤을 검증합니다.
+     * @returns 모든 컨트롤이 유효하면 true, 아니면 false
+     */
+    validate(): boolean;
+    /**
+     * 폼 내의 모든 포함된 컨트롤을 스냅샷 값으로 리셋합니다.
+     */
+    reset(): void;
+    private sync;
+    private getControls;
+    private isIncluded;
+    private handleSlotChange;
+    private handleChange;
+}
 declare global {
     interface HTMLElementTagNameMap {
         'u-form': UForm;
     }
 }
-export { UForm };

package/dist/components/form/UForm.js

@@ -1,5 +1,106 @@
-import { UForm } from './UForm.component.js';
-
-UForm.define("u-form");
-
+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 { UFormControlElement } from "../UFormControlElement.js";
+import { arrayAttrConverter } from "../../utilities/converters.js";
+import { styles } from "./UForm.styles.js";
+import { customElement, property } from "lit/decorators.js";
+import { html } from "lit";
+//#region src/components/form/UForm.ts
+var _ref;
+var UForm = class UForm extends UElement {
+	constructor(..._args) {
+		super(..._args);
+		this.includes = [];
+		this.excludes = [];
+		this.snapshot = {};
+		this.handleSlotChange = (_) => {
+			this.sync();
+		};
+		this.handleChange = (e) => {
+			const target = e.target;
+			if (!(target instanceof UFormControlElement)) return;
+			const name = target.name;
+			const value = target.value;
+			if (!name) return;
+			if (!this.isIncluded(target)) return;
+			if (this.model && typeof this.model === "object") this.model[name] = value;
+			e.stopPropagation();
+			this.dispatchEvent(new Event("change", {
+				bubbles: true,
+				composed: true
+			}));
+		};
+	}
+	static {
+		this.styles = [super.styles, styles];
+	}
+	connectedCallback() {
+		super.connectedCallback();
+		this.addEventListener("change", this.handleChange);
+	}
+	disconnectedCallback() {
+		this.removeEventListener("change", this.handleChange);
+		super.disconnectedCallback();
+	}
+	updated(changedProperties) {
+		super.updated(changedProperties);
+		if (changedProperties.has("model")) {
+			this.snapshot = { ...this.model };
+			this.sync();
+		}
+	}
+	render() {
+		return html`<slot @slotchange=${this.handleSlotChange}></slot>`;
+	}
+	/**
+	* 폼 내의 모든 포함된 컨트롤을 검증합니다.
+	* @returns 모든 컨트롤이 유효하면 true, 아니면 false
+	*/
+	validate() {
+		return this.getControls().every((control) => control.validate());
+	}
+	/**
+	* 폼 내의 모든 포함된 컨트롤을 스냅샷 값으로 리셋합니다.
+	*/
+	reset() {
+		if (this.snapshot) {
+			this.model = {};
+			Object.keys(this.snapshot).forEach((key) => {
+				this.model[key] = this.snapshot[key];
+			});
+		}
+		this.sync();
+	}
+	sync() {
+		if (!this.model) return;
+		for (const control of this.getControls()) if (control.name && control.name in this.model) control.value = this.model[control.name];
+	}
+	getControls() {
+		const slot = this.renderRoot.querySelector("slot");
+		if (!slot) return [];
+		return slot.assignedElements({ flatten: true }).filter((el) => el instanceof UFormControlElement).filter((el) => this.isIncluded(el));
+	}
+	isIncluded(el) {
+		const name = el.name;
+		if (!name) return false;
+		if (this.excludes.includes(name)) return false;
+		if (this.includes.length > 0 && !this.includes.includes(name)) return false;
+		return true;
+	}
+};
+__decorate([property({
+	type: Array,
+	converter: arrayAttrConverter()
+}), __decorateMetadata("design:type", Array)], UForm.prototype, "includes", void 0);
+__decorate([property({
+	type: Array,
+	converter: arrayAttrConverter()
+}), __decorateMetadata("design:type", Array)], UForm.prototype, "excludes", void 0);
+__decorate([property({
+	type: Object,
+	attribute: false
+}), __decorateMetadata("design:type", typeof (_ref = typeof Record !== "undefined" && Record) === "function" ? _ref : Object)], UForm.prototype, "model", void 0);
+UForm = __decorate([customElement("u-form")], UForm);
+//#endregion
 export { UForm };

package/dist/components/form/UForm.styles.js

@@ -1,6 +1,6 @@
-import { css } from 'lit';
-
-const styles = css`
+import { css } from "lit";
+//#region src/components/form/UForm.styles.ts
+var styles = css`
   :host {
     width: 100%;
     display: flex;
@@ -10,10 +10,10 @@ const styles = css`
     font-size: 14px;
   }
 
-  :host * {
+  :host > * {
     width: 100%;
     font-size: inherit;
   }
 `;
-
+//#endregion
 export { styles };

package/dist/components/icon/UIcon.d.ts

@@ -1,8 +1,27 @@
-import { UIcon } from './UIcon.component.js';
+import { nothing } from 'lit';
+import { UElement } from '../UElement.js';
+export type IconLibrary = (string & {}) | "internal" | "tabler" | "heroicons" | "lucide" | "bootstrap";
+/**
+ * SVG 아이콘을 이름으로 불러와 표시하는 아이콘 컴포넌트입니다.
+ *
+ * @csspart svg - 아이콘의 SVG 요소에 적용됩니다.
+ */
+export declare class UIcon extends UElement {
+    static styles: import('lit').CSSResultGroup[];
+    /** SVG 콘텐츠를 직접 지정합니다. `name` 속성보다 우선 사용됩니다. */
+    src?: string;
+    /** 사용할 아이콘 라이브러리 이름을 지정합니다. */
+    lib?: IconLibrary;
+    /** 사용할 아이콘 이름을 지정합니다. */
+    name?: string;
+    render(): import('lit-html/directive.js').DirectiveResult<{
+        new (_partInfo: import('lit-html/directive.js').PartInfo): import('lit-html/directives/until.js').UntilDirective<typeof nothing | Promise<import('lit-html/directive.js').DirectiveResult<typeof import('lit-html/directives/unsafe-html.js').UnsafeHTMLDirective>>>;
+    }>;
+    private resolve;
+    private sanitize;
+}
 declare global {
     interface HTMLElementTagNameMap {
-        "u-icon": UIcon;
+        'u-icon': UIcon;
     }
 }
-export { UIcon };
-export type { IconLibrary } from './UIcon.component.js';

package/dist/components/icon/UIcon.js

@@ -1,5 +1,56 @@
-import { UIcon } from './UIcon.component.js';
-
-UIcon.define("u-icon");
-
+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 { IconRegistry, getDefaultBaseUrl } from "../../utilities/icons.js";
+import { styles } from "./UIcon.styles.js";
+import { customElement, property } from "lit/decorators.js";
+import { nothing } from "lit";
+import { unsafeHTML } from "lit/directives/unsafe-html.js";
+import { until } from "lit/directives/until.js";
+//#region src/components/icon/UIcon.ts
+var UIcon = class UIcon extends UElement {
+	static {
+		this.styles = [super.styles, styles];
+	}
+	render() {
+		if (this.src) return until(fetch(this.src).then((r) => r.text()).then((html) => {
+			return html ? unsafeHTML(this.sanitize(html)) : nothing;
+		}), nothing);
+		if (this.name) return until(this.resolve(this.name).then((html) => {
+			return html ? unsafeHTML(html) : nothing;
+		}), nothing);
+		return nothing;
+	}
+	async resolve(name) {
+		let html = void 0;
+		if (this.lib) html = await IconRegistry.resolve(this.lib, name);
+		else try {
+			const url = `${getDefaultBaseUrl().replace(/\/$/, "")}/${name}.svg`;
+			const response = await fetch(url);
+			if (response.ok) html = await response.text();
+		} catch (error) {
+			console.error(error);
+		}
+		return this.sanitize(html);
+	}
+	sanitize(html) {
+		if (!html) return void 0;
+		const trimmed = html.trim();
+		try {
+			const doc = new DOMParser().parseFromString(trimmed, "image/svg+xml");
+			if (doc.querySelector("parsererror")) return void 0;
+			const svg = doc.documentElement;
+			if (svg?.tagName.toLowerCase() !== "svg") return void 0;
+			svg.setAttribute("part", "svg");
+			return svg.outerHTML;
+		} catch {
+			return;
+		}
+	}
+};
+__decorate([property({ type: String }), __decorateMetadata("design:type", String)], UIcon.prototype, "src", void 0);
+__decorate([property({ type: String }), __decorateMetadata("design:type", Object)], UIcon.prototype, "lib", void 0);
+__decorate([property({ type: String }), __decorateMetadata("design:type", String)], UIcon.prototype, "name", void 0);
+UIcon = __decorate([customElement("u-icon")], UIcon);
+//#endregion
 export { UIcon };

package/dist/components/icon/UIcon.styles.js

@@ -1,9 +1,9 @@
-import { css } from 'lit';
-
-const styles = css`
+import { css } from "lit";
+//#region src/components/icon/UIcon.styles.ts
+var styles = css`
   :host {
     display: inline-flex;
-    color: var(--u-icon-color, currentColor);
+    color: inherit;
     font-size: inherit;
   }
 
@@ -13,5 +13,5 @@ const styles = css`
     fill: currentColor;
   }
 `;
-
+//#endregion
 export { styles };

package/dist/components/icon-button/UIconButton.d.ts

@@ -0,0 +1,48 @@
+import { Placement, OffsetOptions } from '@floating-ui/dom';
+import { UElement } from '../UElement.js';
+import { ButtonVariant } from '../button/UButton.js';
+import { IconLibrary } from '../icon/UIcon.js';
+/**
+ * 아이콘만 표시하는 정사각형 버튼 컴포넌트입니다.
+ * 내장 툴팁을 지원하여 접근성을 향상시킵니다.
+ *
+ * @slot - 툴팁에 표시할 콘텐츠
+ *
+ * @csspart button - 내부 버튼 요소
+ * @csspart icon - 아이콘 요소
+ * @csspart tooltip - 툴팁 요소
+ */
+export declare class UIconButton extends UElement {
+    static styles: import('lit').CSSResultGroup[];
+    /** 버튼 스타일 변형 */
+    variant: ButtonVariant;
+    /** 원형 표시 여부 */
+    rounded: boolean;
+    /** 비활성화 여부 */
+    disabled: boolean;
+    /** 로딩 상태 여부 */
+    loading: boolean;
+    /** 링크 URL (설정 시 앵커 태그로 렌더링) */
+    href?: string;
+    /** 링크 타겟 */
+    target?: string;
+    /** rel 속성 */
+    rel?: string;
+    /** 아이콘 SVG 소스를 직접 지정 */
+    src?: string;
+    /** 아이콘 라이브러리 */
+    lib?: IconLibrary;
+    /** 아이콘 이름 */
+    name?: string;
+    /** 툴팁 위치 */
+    tooltipPlacement: Placement;
+    /** 툴팁 거리 */
+    tooltipOffset: OffsetOptions;
+    render(): import('lit-html').TemplateResult<1>;
+    private handleStopTooltipEvent;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'u-icon-button': UIconButton;
+    }
+}

package/dist/components/icon-button/UIconButton.js

@@ -0,0 +1,88 @@
+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 "../icon/UIcon.js";
+import "../button/UButton.js";
+import "../tooltip/UTooltip.js";
+import { styles } from "./UIconButton.styles.js";
+import { customElement, property } from "lit/decorators.js";
+import { html } from "lit";
+//#region src/components/icon-button/UIconButton.ts
+var UIconButton = class UIconButton extends UElement {
+	constructor(..._args) {
+		super(..._args);
+		this.variant = "ghost";
+		this.rounded = false;
+		this.disabled = false;
+		this.loading = false;
+		this.tooltipPlacement = "top";
+		this.tooltipOffset = 4;
+	}
+	static {
+		this.styles = [super.styles, styles];
+	}
+	render() {
+		return html`
+      <u-button part="button"
+        .disabled=${this.disabled}
+        .loading=${this.loading}
+        .variant=${this.variant}
+        .rounded=${this.rounded}
+        .href=${this.href}
+        .target=${this.target}
+        .rel=${this.rel}
+      >
+        <u-icon part="icon"
+          .lib=${this.lib}
+          .name=${this.name}
+          .src=${this.src}
+        ></u-icon>
+      </u-button>
+
+      <u-tooltip part="tooltip"
+        .placement=${this.tooltipPlacement}
+        .offset=${this.tooltipOffset}
+        @show=${this.handleStopTooltipEvent}
+        @hide=${this.handleStopTooltipEvent}
+      >
+        <slot></slot>
+      </u-tooltip>
+    `;
+	}
+	handleStopTooltipEvent(e) {
+		e.stopImmediatePropagation();
+	}
+};
+__decorate([property({
+	type: String,
+	reflect: true
+}), __decorateMetadata("design:type", Object)], UIconButton.prototype, "variant", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true
+}), __decorateMetadata("design:type", Object)], UIconButton.prototype, "rounded", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true
+}), __decorateMetadata("design:type", Object)], UIconButton.prototype, "disabled", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true
+}), __decorateMetadata("design:type", Object)], UIconButton.prototype, "loading", void 0);
+__decorate([property({ type: String }), __decorateMetadata("design:type", String)], UIconButton.prototype, "href", void 0);
+__decorate([property({ type: String }), __decorateMetadata("design:type", String)], UIconButton.prototype, "target", void 0);
+__decorate([property({ type: String }), __decorateMetadata("design:type", String)], UIconButton.prototype, "rel", void 0);
+__decorate([property({ type: String }), __decorateMetadata("design:type", String)], UIconButton.prototype, "src", void 0);
+__decorate([property({ type: String }), __decorateMetadata("design:type", Object)], UIconButton.prototype, "lib", void 0);
+__decorate([property({ type: String }), __decorateMetadata("design:type", String)], UIconButton.prototype, "name", void 0);
+__decorate([property({
+	type: String,
+	attribute: "tooltip-placement"
+}), __decorateMetadata("design:type", Object)], UIconButton.prototype, "tooltipPlacement", void 0);
+__decorate([property({
+	type: Number,
+	attribute: "tooltip-offset"
+}), __decorateMetadata("design:type", Object)], UIconButton.prototype, "tooltipOffset", void 0);
+UIconButton = __decorate([customElement("u-icon-button")], UIconButton);
+//#endregion
+export { UIconButton };

package/dist/components/icon-button/UIconButton.styles.d.ts

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

package/dist/components/icon-button/UIconButton.styles.js

@@ -0,0 +1,24 @@
+import { css } from "lit";
+//#region src/components/icon-button/UIconButton.styles.ts
+var styles = css`
+  :host {
+    display: inline-block;
+    color: var(--u-icon-color);
+    font-size: 20px;
+  }
+
+  :host([variant="solid"]) {
+    color: #fff;
+  }
+  :host([variant="link"]) {
+    color: var(--u-blue-500);
+  }
+
+  u-button {
+    padding: 0.4em;
+    color: inherit;
+    font-size: inherit;
+  }
+`;
+//#endregion
+export { styles };