@iyulab/components 0.4.0 → 1.0.0

package/dist/components/drawer/UDrawer.js

@@ -1,5 +1,55 @@
-import { UDrawer } from './UDrawer.component.js';
-
-UDrawer.define("u-drawer");
-
+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 { UOverlayElement } from "../UOverlayElement.js";
+import "../button/UButton.js";
+import { styles } from "./UDrawer.styles.js";
+import { customElement, property, state } from "lit/decorators.js";
+import { html } from "lit";
+//#region src/components/drawer/UDrawer.ts
+var UDrawer = class UDrawer extends UOverlayElement {
+	constructor(..._args) {
+		super(..._args);
+		this.closable = false;
+		this.placement = "left";
+		this.hasHeader = false;
+	}
+	static {
+		this.styles = [super.styles, styles];
+	}
+	render() {
+		return html`
+      <div class="panel" part="panel">
+        <div class="header" part="header"
+          ?hidden=${!this.hasHeader && !this.closable}>
+          <slot name="header" @slotchange=${this.handleHeaderSlotChange}></slot>
+          <u-button class="close-btn" part="close-btn"
+            variant="ghost"
+            ?hidden=${!this.closable}
+            @click=${() => this.requestClose("button")}>
+            <u-icon lib="internal" name="x-lg"></u-icon>
+          </u-button>
+        </div>
+        <div class="body" part="body">
+          <slot></slot>
+        </div>
+        <slot name="footer"></slot>
+      </div>
+    `;
+	}
+	handleHeaderSlotChange(e) {
+		this.hasHeader = e.target.assignedNodes({ flatten: true }).length > 0;
+	}
+};
+__decorate([property({
+	type: Boolean,
+	reflect: true
+}), __decorateMetadata("design:type", Object)], UDrawer.prototype, "closable", void 0);
+__decorate([property({
+	type: String,
+	reflect: true
+}), __decorateMetadata("design:type", Object)], UDrawer.prototype, "placement", void 0);
+__decorate([state(), __decorateMetadata("design:type", Object)], UDrawer.prototype, "hasHeader", void 0);
+UDrawer = __decorate([customElement("u-drawer")], UDrawer);
+//#endregion
 export { UDrawer };

package/dist/components/drawer/UDrawer.styles.js

@@ -1,82 +1,89 @@
-import { css } from 'lit';
+import { css } from "lit";
+//#region src/components/drawer/UDrawer.styles.ts
+var styles = css`
+  /* ── Placement에 따른 정렬 ──────────────── */
+  :host([placement="left"])   { justify-content: flex-start; }
+  :host([placement="right"])  { justify-content: flex-end; }
+  :host([placement="top"])    { flex-direction: column; justify-content: flex-start; }
+  :host([placement="bottom"]) { flex-direction: column; justify-content: flex-end; }
 
-const styles = css`
-  :host {
-    display: flex;
-    align-items: stretch;
-  }
-  :host([placement="left"]) {
-    flex-direction: row;
-    justify-content: flex-start;
-  }
-  :host([placement="right"]) {
-    flex-direction: row;
-    justify-content: flex-end;
+  /* 좌우: 높이 100% */
+  :host([placement="left"]) .panel,
+  :host([placement="right"]) .panel {
+    height: 100%;
+    max-width: 100%;
   }
-  :host([placement="top"]) {
-    flex-direction: column;
-    justify-content: flex-start;
-  }
-  :host([placement="bottom"]) {
-    flex-direction: column;
-    justify-content: flex-end;
+  /* 상하: 너비 100% */
+  :host([placement="top"]) .panel,
+  :host([placement="bottom"]) .panel {
+    width: 100%;
+    max-height: 100%;
   }
 
-  .drawer {
-    position: relative;
+  /* placement별 border */
+  :host([placement="left"]) .panel   { border-right: 1px solid var(--u-border-color); }
+  :host([placement="right"]) .panel  { border-left: 1px solid var(--u-border-color); }
+  :host([placement="top"]) .panel    { border-bottom: 1px solid var(--u-border-color); }
+  :host([placement="bottom"]) .panel { border-top: 1px solid var(--u-border-color); }
+
+  /* 닫힌 상태 */
+  :host([placement="left"]) .panel   { transform: translateX(-100%); }
+  :host([placement="right"]) .panel  { transform: translateX(100%); }
+  :host([placement="top"]) .panel    { transform: translateY(-100%); }
+  :host([placement="bottom"]) .panel { transform: translateY(100%); }
+
+  /* 열린 상태 */
+  :host([open][placement="left"]) .panel,
+  :host([open][placement="right"]) .panel  { transform: translateX(0); }
+  :host([open][placement="top"]) .panel,
+  :host([open][placement="bottom"]) .panel { transform: translateY(0); }
+
+  .panel {
     display: flex;
     flex-direction: column;
-    max-width: 100vw;
-    max-height: 100vh;
-    padding: 20px;
     background: var(--u-panel-bg-color);
-    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
+    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
+    pointer-events: auto;
     transition: transform 0.3s ease;
   }
-  .drawer[placement="left"] {
-    border-right: 1px solid var(--u-border-color);
-    transform: translateX(-100%);
-  }
-  .drawer[placement="right"] {
-    border-left: 1px solid var(--u-border-color);
-    transform: translateX(100%);
-  }
-  .drawer[placement="top"] {
-    border-bottom: 1px solid var(--u-border-color);
-    transform: translateY(-100%);
-  }
-  .drawer[placement="bottom"] {
-    border-top: 1px solid var(--u-border-color);
-    transform: translateY(100%);
-  }
-  .drawer[open][placement="left"],
-  .drawer[open][placement="right"] {
-    transform: translateX(0);
-  }
-  .drawer[open][placement="top"],
-  .drawer[open][placement="bottom"] {
-    transform: translateY(0);
-  }
 
   .header {
+    flex-shrink: 0;
+    position: relative;
     display: flex;
-    flex-direction: row;
     align-items: center;
     justify-content: space-between;
-    font-size: 20px;
-    margin-bottom: 20px;
-  }
-  .header .title {
-    line-height: 1.2;
+    gap: 8px;
+    padding: 12px 16px;
+    font-size: 18px;
     font-weight: 600;
+    line-height: 1.3;
+    border-bottom: 1px solid var(--u-border-color);
+  }
+  .header .close-btn {
+    flex-shrink: 0;
+    padding: 4px;
+    font-size: inherit;
+    border-radius: 4px;
   }
 
-  .content {
+  .body {
+    flex: 1 1 auto;
+    min-height: 0;
     display: block;
-    max-width: calc(100vw - 40px);
-    max-height: calc(100vh - 100px);
+    padding: 16px;
     overflow: auto;
   }
-`;
 
+  ::slotted([slot="footer"]) {
+    flex-shrink: 0;
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    gap: 8px;
+    padding: 12px 16px;
+    border-top: 1px solid var(--u-border-color);
+  }
+`;
+//#endregion
 export { styles };

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