@iyulab/components 0.4.0 → 1.0.0

package/dist/components/input/UInput.styles.js

@@ -1,43 +1,20 @@
-import { css } from 'lit';
+import { css } from "lit";
+//#region src/components/input/UInput.styles.ts
+var styles = css`
+  :host {
+    --input-popover-min-width: 100%;
+    --input-popover-max-width: 80vw;
+    --input-popover-min-height: 0px;
+    --input-popover-max-height: 50vh;
+  }
 
-const styles = css`
   :host {
+    position: relative;
     display: inline-block;
     color: var(--u-txt-color);
     font-size: inherit;
     font-family: var(--u-font-base);
   }
-  :host([disabled]) {
-    opacity: 0.6;
-    cursor: not-allowed;
-  }
-
-  /* 헤더 영역 */
-  .header {
-    display: flex;
-    flex-direction: row;
-    justify-content: flex-start;
-    align-items: center;
-    margin-bottom: 0.5em;
-    font-size: 0.8em;
-    user-select: none;
-  }
-  .header .required {
-    color: var(--u-red-600);
-    margin-right: 0.25em;
-  }
-  .header .label {
-    font-weight: 500;
-    line-height: 1.25;
-    cursor: pointer;
-  }
-  .header .helper u-icon {
-    margin-left: 0.5em;
-    cursor: help;
-  }
-  .header .helper u-tooltip {
-    font-size: 0.6em;
-  }
 
   /* 입력 래퍼 */
   .container {
@@ -51,28 +28,89 @@ const styles = css`
     transition: border-color 0.2s ease, box-shadow 0.2s ease;
     overflow: hidden;
   }
-  .container[readonly],
-  .container[disabled] {
+  :host([readonly]) .container,
+  :host([disabled]) .container {
     border-color: var(--u-border-color-weak);
     background-color: var(--u-bg-color-disabled);
   }
-  .container:not([readonly]):not([disabled]):hover {
-    box-shadow: 
-      0 0 0 1px var(--u-input-border-color-hover),
-      0 0 0 3px rgba(59, 130, 246, 0.12);
+  :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: none;
+    border-radius: 0.25em 0.25em 0 0;
+    border-bottom: 2px solid var(--u-input-border-color);
+    background-color: var(--u-neutral-200);
+  }
+  :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);
   }
-  .container:not([readonly]):not([disabled]):focus-within {
-    box-shadow:
-      0 0 0 1px var(--u-input-border-color-focus),
-      0 0 0 3px rgba(59, 130, 246, 0.22);
+  :host([variant="filled"]:not([readonly]):not([disabled])) .container:focus-within {
+    box-shadow: none;
+    border-bottom-color: var(--u-input-border-color-focus);
   }
-  .container:not([readonly]):not([disabled])[invalid] {
-    box-shadow:
-      0 0 0 1px var(--u-input-border-color-invalid),
-      0 0 0 3px rgba(220, 38, 38, 0.12);
+  :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 {
+    padding-left: 0;
+    padding-right: 0;
+    border: none;
+    border-radius: 0;
+    border-bottom: 1px solid var(--u-input-border-color);
+    background-color: transparent;
+  }
+  :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;
+  }
+
+  /* 네이티브 input */
   input {
     all: unset;
     flex: 1 0 auto;
@@ -89,62 +127,58 @@ const styles = css`
   input:read-only {
     cursor: default;
   }
+  input:focus-visible {
+    outline: none;
+  }
+  input[type="search"]::-webkit-search-cancel-button {
+    -webkit-appearance: none;
+    appearance: none;
+  }
+  input[type="number"] {
+    -moz-appearance: textfield;
+  }
+  input[type="number"]::-webkit-inner-spin-button,
+  input[type="number"]::-webkit-outer-spin-button {
+    -webkit-appearance: none;
+    margin: 0;
+  }
 
   /* 슬롯에 내용이 있을 때 gap 적용 */
   ::slotted([slot="prefix"]) {
-    margin-right: 0.5em;
+    margin-right: 0.25em;
   }
   ::slotted([slot="suffix"]) {
-    margin-left: 0.5em;
+    margin-left: 0.25em;
   }
 
   /* 아이콘 영역 (clear, password toggle 등) */
-  .icon {
+  .suffix-item {
+    margin-left: 0.25em;
     color: var(--u-icon-color);
     font-size: 1em;
     transition: color 0.2s ease;
     cursor: pointer;
   }
-  .icon:hover {
+  .suffix-item:hover {
     color: var(--u-icon-color-hover);
   }
-  .icon:active {
+  .suffix-item:active {
     color: var(--u-icon-color-active);
   }
 
-  /* 접두/접미 아이콘 간격 */
-  .icon.prefix {
-    margin-right: 0.5em;
-  }
-  .icon.suffix {
-    margin-left: 0.5em;
-  }
-
-  /* 유효성 검사 에러 메시지 */
-  .validation-message {
-    margin-top: 0.5em;
-    color: var(--u-red-600);
-    font-size: 0.75em;
-    line-height: 1.2;
-  }
-
-  /* 설명 텍스트 */
-  .description {
-    margin-top: 0.5em;
-    color: var(--u-txt-color-weak);
-    font-size: 0.75em;
-    line-height: 1.2;
-  }
-
-  /* input 기본 제공 스타일 초기화 */
-  input[type="number"] {
-    -moz-appearance: textfield;
-  }
-  input[type="number"]::-webkit-inner-spin-button,
-  input[type="number"]::-webkit-outer-spin-button {
-    -webkit-appearance: none;
-    margin: 0;
+  u-popover {
+    min-width: var(--input-popover-min-width);
+    max-width: var(--input-popover-max-width);
+    min-height: var(--input-popover-min-height);
+    max-height: var(--input-popover-max-height);
+    padding: 4px;
+    border: 1px solid var(--u-border-color);
+    border-radius: 6px;
+    background-color: var(--u-panel-bg-color);
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
+    overflow-x: auto;
+    overflow-y: auto;
   }
 `;
-
+//#endregion
 export { styles };

package/dist/components/menu/UMenu.d.ts

@@ -1,8 +1,46 @@
-import { UMenu } from './UMenu.component.js';
+import { PropertyValues } from 'lit';
+import { UElement } from '../UElement.js';
+import { UMenuItem, MenuItemIndicator, MenuItemAlign } from '../menu-item/UMenuItem.js';
+export type MenuSelection = 'none' | 'single' | 'multiple';
+/**
+ * 메뉴 아이템의 선택, 키보드 탐색, 속성 전파를 관리하는 메뉴 컴포넌트입니다.
+ *
+ * @slot - 메뉴 아이템 (u-menu-item, u-divider)
+ *
+ * @cssprop --menu-indent-size - 하위 메뉴 아이템의 들여쓰기 크기 (기본값: 20px)
+ *
+ * @event change - 선택된 아이템이 변경될 때 발생
+ */
+export declare class UMenu extends UElement {
+    static styles: import('lit').CSSResultGroup[];
+    /** 테두리 없는 여부 */
+    borderless: boolean;
+    /** 선택 모드 */
+    selection: MenuSelection;
+    /** 키보드 탐색 시 순환 여부 */
+    loop: boolean;
+    /** 아이템의 인라인(가로) 모드 여부 */
+    inline: boolean;
+    /** 선택된 아이템 표시 방식 */
+    indicator: MenuItemIndicator;
+    /** 아이템 텍스트 정렬 방식 */
+    align: MenuItemAlign;
+    private _items;
+    get items(): readonly UMenuItem[];
+    get selectedItems(): UMenuItem[];
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    protected willUpdate(changedProperties: PropertyValues): void;
+    render(): import('lit-html').TemplateResult<1>;
+    getItems(fn: (item: UMenuItem) => boolean): UMenuItem[];
+    mapItems(fn: (item: UMenuItem) => void): void;
+    private propagate;
+    private handleSlotChange;
+    private handlePick;
+    private handleKeydown;
+}
 declare global {
     interface HTMLElementTagNameMap {
         'u-menu': UMenu;
     }
 }
-export { UMenu };
-export type { MenuType, MenuMode } from './UMenu.component.js';

package/dist/components/menu/UMenu.js

@@ -1,5 +1,179 @@
-import { UMenu } from './UMenu.component.js';
-
-UMenu.define("u-menu");
-
+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 { UMenuItem } from "../menu-item/UMenuItem.js";
+import { styles } from "./UMenu.styles.js";
+import { customElement, property } from "lit/decorators.js";
+import { html } from "lit";
+//#region src/components/menu/UMenu.ts
+var UMenu = class UMenu extends UElement {
+	constructor(..._args) {
+		super(..._args);
+		this.borderless = false;
+		this.selection = "none";
+		this.loop = false;
+		this.inline = false;
+		this.indicator = "highlight";
+		this.align = "left";
+		this._items = [];
+		this.handleSlotChange = (e) => {
+			this._items = e.target.assignedElements({ flatten: true }).filter((el) => el instanceof UMenuItem);
+			this.propagate();
+		};
+		this.handlePick = (e) => {
+			if (this.selection === "none") return;
+			e.stopPropagation();
+			const item = e.composedPath().find((el) => el instanceof UMenuItem);
+			if (!item) return;
+			if (this.selection === "single") {
+				this.mapItems((i) => i.selected = false);
+				item.selected = true;
+			} else if (this.selection === "multiple") item.selected = !item.selected;
+			this.dispatchEvent(new Event("change", {
+				bubbles: true,
+				composed: true
+			}));
+		};
+		this.handleKeydown = (e) => {
+			const focused = e.composedPath().find((el) => el instanceof UMenuItem);
+			if (!focused) return;
+			const items = this.inline ? this.getItems((item) => {
+				if (item.disabled) return false;
+				let current = item.parentItem;
+				while (current) {
+					if (!current.expanded) return false;
+					current = current.parentItem;
+				}
+				return true;
+			}) : this.getItems((item) => {
+				if (item.disabled) return false;
+				if (focused?.parentItem) return item.parentItem === focused.parentItem;
+				return item.parentItem === null;
+			});
+			if (items.length === 0) return;
+			const current = items.indexOf(focused);
+			if (current === -1) return;
+			switch (e.key) {
+				case "ArrowDown":
+					e.preventDefault();
+					(current < items.length - 1 ? items[current + 1] : this.loop ? items[0] : void 0)?.focus();
+					break;
+				case "ArrowUp":
+					e.preventDefault();
+					(current > 0 ? items[current - 1] : this.loop ? items[items.length - 1] : void 0)?.focus();
+					break;
+				case "Home":
+					e.preventDefault();
+					items[0]?.focus();
+					break;
+				case "End":
+					e.preventDefault();
+					items[items.length - 1]?.focus();
+					break;
+				case "Enter":
+				case " ": {
+					e.preventDefault();
+					e.stopPropagation();
+					const header = focused.shadowRoot?.querySelector(".header");
+					if (header) header.click();
+					break;
+				}
+				case "ArrowRight":
+					e.preventDefault();
+					if (!focused.leaf) if (!focused.expanded) focused.expanded = true;
+					else focused.childItems.find((c) => !c.disabled)?.focus();
+					break;
+				case "ArrowLeft":
+					e.preventDefault();
+					if (!focused.leaf && focused.expanded) focused.expanded = false;
+					else if (focused.parentItem) focused.parentItem.focus();
+					break;
+			}
+		};
+	}
+	static {
+		this.styles = [super.styles, styles];
+	}
+	get items() {
+		return this._items;
+	}
+	get selectedItems() {
+		return this.getItems((item) => item.selected);
+	}
+	connectedCallback() {
+		super.connectedCallback();
+		this.setAttribute("role", "menu");
+		this.addEventListener("pick", this.handlePick);
+		this.addEventListener("keydown", this.handleKeydown);
+	}
+	disconnectedCallback() {
+		this.removeEventListener("pick", this.handlePick);
+		this.removeEventListener("keydown", this.handleKeydown);
+		super.disconnectedCallback();
+	}
+	willUpdate(changedProperties) {
+		super.willUpdate(changedProperties);
+		if ([
+			"indicator",
+			"align",
+			"inline"
+		].some((k) => changedProperties.has(k))) this.propagate();
+	}
+	render() {
+		return html`<slot @slotchange=${this.handleSlotChange}></slot>`;
+	}
+	getItems(fn) {
+		const result = [];
+		const filter = (items) => {
+			for (const item of items) {
+				if (fn(item)) result.push(item);
+				if (item.childItems.length > 0) filter(item.childItems);
+			}
+		};
+		filter(this.items);
+		return result;
+	}
+	mapItems(fn) {
+		const map = (items) => {
+			for (const item of items) {
+				fn(item);
+				if (item.childItems.length > 0) map(item.childItems);
+			}
+		};
+		map(this.items);
+	}
+	propagate() {
+		this._items.forEach((item) => {
+			item.inline = this.inline;
+			item.indicator = this.indicator;
+			item.align = this.align;
+		});
+	}
+};
+__decorate([property({
+	type: Boolean,
+	reflect: true
+}), __decorateMetadata("design:type", Boolean)], UMenu.prototype, "borderless", void 0);
+__decorate([property({
+	type: String,
+	reflect: true
+}), __decorateMetadata("design:type", Object)], UMenu.prototype, "selection", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true
+}), __decorateMetadata("design:type", Boolean)], UMenu.prototype, "loop", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true
+}), __decorateMetadata("design:type", Boolean)], UMenu.prototype, "inline", void 0);
+__decorate([property({
+	type: String,
+	reflect: true
+}), __decorateMetadata("design:type", Object)], UMenu.prototype, "indicator", void 0);
+__decorate([property({
+	type: String,
+	reflect: true
+}), __decorateMetadata("design:type", Object)], UMenu.prototype, "align", void 0);
+UMenu = __decorate([customElement("u-menu")], UMenu);
+//#endregion
 export { UMenu };

package/dist/components/menu/UMenu.styles.js

@@ -1,39 +1,25 @@
-import { css } from 'lit';
+import { css } from "lit";
+//#region src/components/menu/UMenu.styles.ts
+var styles = css`
+  :host {
+    --menu-indent-size: 20px;
+  }
 
-const styles = css`
-  /* 공통 스타일 */
   :host {
     display: flex;
     flex-direction: column;
-    align-items: stretch;
-    justify-content: flex-start;
-    padding: 8px 0px;
+    padding: 4px;
+    min-width: 160px;
     border: 1px solid var(--u-border-color);
-    border-radius: 4px;
-    background: var(--u-panel-bg-color);
+    border-radius: 6px;
+    background-color: var(--u-panel-bg-color);
   }
-
-  /* default 타입: 일반 메뉴 (항상 표시, 문서 흐름에 포함) */
-  :host([type="default"]) {
-    position: relative;
-    z-index: inherit;
-    top: unset;
-    left: unset;
-    opacity: 1;
-  }
-
-  /* dropdown/contextmenu 타입: 플로팅 메뉴 */
-  :host([type="dropdown"]),
-  :host([type="contextmenu"]),
-  :host([type="submenu"]) {
-    transform: scale(0.9);
-    transition: transform 0.2s ease;
-  }
-  :host([type="dropdown"][visible]),
-  :host([type="contextmenu"][visible]),
-  :host([type="submenu"][visible]) {
-    transform: scale(1);
+  :host([borderless]) {
+    padding: 0;
+    border: none;
+    border-radius: 0;
+    background-color: transparent;
   }
 `;
-
+//#endregion
 export { styles };

package/dist/components/menu-item/UMenuItem.d.ts

@@ -1,7 +1,53 @@
-import { UMenuItem } from './UMenuItem.component.js';
+import { PropertyValues } from 'lit';
+import { UElement } from '../UElement.js';
+export type MenuItemIndicator = 'highlight' | 'check';
+export type MenuItemAlign = 'left' | 'center' | 'right';
+/**
+ * 메뉴 내에서 개별 항목을 나타내는 컴포넌트입니다.
+ *
+ * @slot - 기본 슬롯 (라벨 텍스트)
+ * @slot prefix - 라벨 앞에 표시하는 아이콘 등
+ * @slot suffix - 라벨 뒤에 표시하는 추가 콘텐츠
+ * @slot children - 하위 메뉴 아이템
+ *
+ * @csspart header - 아이템의 헤더 영역
+ * @csspart content - 아이템의 라벨 텍스트 영역
+ * @csspart submenu - 인라인 모드에서 하위 메뉴 컨테이너
+ * @csspart popover - 팝오버 모드에서 하위 메뉴 컨테이너
+ *
+ * @event pick - 아이템 선택 시 발생 (하위 메뉴가 없는 경우)
+ */
+export declare class UMenuItem extends UElement {
+    static styles: import('lit').CSSResultGroup[];
+    /** 서브메뉴 확장 여부 */
+    expanded: boolean;
+    /** 비활성화 여부 */
+    disabled: boolean;
+    /** 선택 여부 */
+    selected: boolean;
+    /** 선택된 아이템 표시 방식 */
+    indicator: MenuItemIndicator;
+    /** 아이템 텍스트 정렬 방식 */
+    align: MenuItemAlign;
+    /** 아이템의 고유 값 */
+    value: string;
+    inline: boolean;
+    leaf: boolean;
+    depth: number;
+    private _parentItem;
+    get parentItem(): UMenuItem | null;
+    private _childItems;
+    get childItems(): readonly UMenuItem[];
+    connectedCallback(): void;
+    protected updated(changedProperties: PropertyValues): void;
+    render(): import('lit-html').TemplateResult<1>;
+    private propagate;
+    private handleHeaderClick;
+    private handleSlotChange;
+    private handleChildrenSlotChange;
+}
 declare global {
     interface HTMLElementTagNameMap {
         'u-menu-item': UMenuItem;
     }
 }
-export { UMenuItem };