@iyulab/components 0.3.0 → 1.0.0

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

package/dist/components/menu-item/UMenuItem.js

@@ -1,5 +1,162 @@
-import { UMenuItem } from './UMenuItem.component.js';
+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 { UDivider } from "../divider/UDivider.js";
+import "../popover/UPopover.js";
+import { styles } from "./UMenuItem.styles.js";
+import { customElement, property, state } from "lit/decorators.js";
+import { html } from "lit";
+import { live } from "lit/directives/live.js";
+//#region src/components/menu-item/UMenuItem.ts
+var _UMenuItem;
+var UMenuItem = class UMenuItem extends UElement {
+	static {
+		_UMenuItem = this;
+	}
+	constructor(..._args) {
+		super(..._args);
+		this.expanded = false;
+		this.disabled = false;
+		this.selected = false;
+		this.indicator = "highlight";
+		this.align = "left";
+		this.value = "";
+		this.inline = true;
+		this.leaf = true;
+		this.depth = 0;
+		this._parentItem = null;
+		this._childItems = [];
+		this.handleHeaderClick = (e) => {
+			e.stopPropagation();
+			if (this.disabled) return;
+			if (!this.leaf) {
+				this.expanded = !this.expanded;
+				return;
+			}
+			this.fire("pick", { detail: {
+				value: this.value,
+				selected: this.selected,
+				shiftKey: e.shiftKey,
+				metaKey: e.metaKey,
+				ctrlKey: e.ctrlKey
+			} });
+		};
+		this.handleSlotChange = (e) => {
+			const elements = e.target.assignedElements({ flatten: true });
+			for (const el of elements) if ((el instanceof _UMenuItem || el instanceof UDivider) && !el.hasAttribute("slot")) el.setAttribute("slot", "children");
+		};
+		this.handleChildrenSlotChange = (e) => {
+			this._childItems = e.target.assignedElements({ flatten: true }).filter((el) => el instanceof _UMenuItem);
+			this.leaf = this._childItems.length === 0;
+			this.propagate();
+		};
+	}
+	static {
+		this.styles = [super.styles, styles];
+	}
+	get parentItem() {
+		return this._parentItem;
+	}
+	get childItems() {
+		return this._childItems;
+	}
+	connectedCallback() {
+		super.connectedCallback();
+		this.setAttribute("role", "menuitem");
+		this.setAttribute("tabindex", this.disabled ? "-1" : "0");
+		if (this.parentElement instanceof _UMenuItem) {
+			this._parentItem = this.parentElement;
+			this.depth = this._parentItem.depth + 1;
+			if (!this.hasAttribute("slot")) this.setAttribute("slot", "children");
+		}
+	}
+	updated(changedProperties) {
+		super.updated(changedProperties);
+		if (changedProperties.has("disabled")) this.setAttribute("tabindex", this.disabled ? "-1" : "0");
+		if (changedProperties.has("expanded") && !this.expanded) this._childItems.forEach((c) => c.expanded = false);
+		if (changedProperties.has("depth") || changedProperties.has("inline")) this.style.setProperty("--menu-item-depth", String(this.inline ? this.depth : 0));
+	}
+	render() {
+		return html`
+      <div class="header" part="header"
+        @click=${this.handleHeaderClick}
+      >
+        <u-icon class="prefix-checker"
+          ?hidden=${this.indicator !== "check" || !this.selected}
+          lib="internal"
+          name="check-lg"
+        ></u-icon>
 
-UMenuItem.define("u-menu-item");
+        <slot name="prefix"></slot>
+        <div class="content" part="content">
+          <slot @slotchange=${this.handleSlotChange}></slot>
+        </div>
+        <slot name="suffix"></slot>
 
+        ${this.inline ? html`
+            <span class="suffix-toggler"
+              ?hidden=${this.leaf}
+              ?expanded=${this.expanded}
+            ></span>` : html`
+            <u-icon class="suffix-chevron"
+              ?hidden=${this.leaf}
+              lib="internal"
+              name="chevron-right"
+            ></u-icon>`}
+      </div>
+
+      ${this.inline ? html`
+          <div class="submenu" part="submenu"
+            ?hidden=${this.leaf}
+            ?open=${this.expanded}
+          >
+            <slot name="children" @slotchange=${this.handleChildrenSlotChange}></slot>
+          </div>` : html`
+          <u-popover class="popover" part="popover"
+            ?hidden=${this.leaf}
+            ?open=${live(this.expanded)}
+            for=".header"
+            trigger="hover"
+            placement="right-start"
+            offset="4"
+          >
+            <slot name="children" @slotchange=${this.handleChildrenSlotChange}></slot>
+          </u-popover>`}
+    `;
+	}
+	propagate() {
+		this._childItems.forEach((child) => {
+			child.inline = this.inline;
+			child.indicator = this.indicator;
+			child.align = this.align;
+		});
+	}
+};
+__decorate([property({
+	type: Boolean,
+	reflect: true
+}), __decorateMetadata("design:type", Boolean)], UMenuItem.prototype, "expanded", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true
+}), __decorateMetadata("design:type", Boolean)], UMenuItem.prototype, "disabled", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true
+}), __decorateMetadata("design:type", Boolean)], UMenuItem.prototype, "selected", void 0);
+__decorate([property({
+	type: String,
+	reflect: true
+}), __decorateMetadata("design:type", Object)], UMenuItem.prototype, "indicator", void 0);
+__decorate([property({
+	type: String,
+	reflect: true
+}), __decorateMetadata("design:type", Object)], UMenuItem.prototype, "align", void 0);
+__decorate([property({ type: String }), __decorateMetadata("design:type", String)], UMenuItem.prototype, "value", void 0);
+__decorate([state(), __decorateMetadata("design:type", Boolean)], UMenuItem.prototype, "inline", void 0);
+__decorate([state(), __decorateMetadata("design:type", Boolean)], UMenuItem.prototype, "leaf", void 0);
+__decorate([state(), __decorateMetadata("design:type", Number)], UMenuItem.prototype, "depth", void 0);
+UMenuItem = _UMenuItem = __decorate([customElement("u-menu-item")], UMenuItem);
+//#endregion
 export { UMenuItem };

package/dist/components/menu-item/UMenuItem.styles.js

@@ -1,65 +1,151 @@
-import { css } from 'lit';
-
-const styles = css`
+import { css } from "lit";
+//#region src/components/menu-item/UMenuItem.styles.ts
+var styles = css`
   :host {
-    --selected-color: var(--u-txt-color-inverse, #ffffff);
-    --selected-bg-color: var(--u-blue-600, #0078d4);
+    --menu-item-depth: 0;
   }
 
   :host {
     position: relative;
+    display: block;
+  }
+  :host(:focus-visible) {
+    outline: none;
+  }
+  :host([disabled]) {
+    opacity: 0.5;
+    pointer-events: none;
+  }
+
+  .header {
     display: flex;
     flex-direction: row;
     align-items: center;
-    padding: 0.5em 1em;
+    padding: 0.25em 0.5em;
+    padding-left: calc(var(--menu-indent-size) * var(--menu-item-depth) + 0.5em);
     background-color: transparent;
-    transition: background-color 0.15s ease;
+    transition: background-color 0.15s ease, color 0.15s ease;
     user-select: none;
     cursor: pointer;
   }
-  :host([disabled]) {
-    opacity: 0.5;
-    pointer-events: none;
-    cursor: not-allowed;
+
+  /* align */
+  :host([align="left"]) .header { 
+    justify-content: flex-start; 
+  }
+  :host([align="center"]) .header { 
+    justify-content: center; 
   }
-  :host([selected]) {
-    color: var(--selected-color);
-    background-color: var(--selected-bg-color);
+  :host([align="right"]) .header { 
+    justify-content: flex-end; 
   }
-  :host(:not([disabled]):not([selected]):hover),
-  :host(:not([disabled]):not([selected]):focus-visible) {
+
+  /* hover & focus */
+  :host(:not([disabled])) .header:hover,
+  :host(:not([disabled]):focus-visible) .header {
     background-color: var(--u-bg-color-hover);
   }
 
-  /* 라벨 영역 */
-  .label {
-    flex: 1 1 auto;
+  /* indicator: highlight */
+  :host([selected][indicator="highlight"]) .header {
+    font-weight: 600;
+    color: var(--u-blue-700);
+    background-color: var(--u-blue-100);
+  }
+  :host([selected][indicator="highlight"]) .header:hover,
+  :host([selected][indicator="highlight"]:focus-visible) .header {
+    background-color: var(--u-blue-200);
+  }
+
+  .prefix-checker {
+    margin-right: 0.25em;
+    font-size: 1em;
+  }
+
+  .suffix-toggler {
+    flex-shrink: 0;
+    position: relative;
+    display: inline-block;
+    margin-left: 0.25em;
+    width: 1em;
+    height: 1em;
+  }
+  .suffix-toggler::before,
+  .suffix-toggler::after {
+    content: '';
+    position: absolute;
+    border-radius: 1px;
+    background-color: currentColor;
+    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
+  }
+  /* 기본: 위 방향 chevron (∧) */
+  .suffix-toggler::before {
+    width: 0.5em;
+    height: 0.1em;
+    top: 50%;
+    left: 50%;
+    transform: translate(-75%, -25%) rotate(45deg);
+  }
+  .suffix-toggler::after {
+    width: 0.5em;
+    height: 0.1em;
+    top: 50%;
+    left: 50%;
+    transform: translate(-25%, -25%) rotate(-45deg);
+  }
+  /* expanded 상태: 아래 방향 chevron (∨) */
+  .suffix-toggler[expanded]::before {
+    transform: translate(-75%, 25%) rotate(-45deg);
+  }
+  .suffix-toggler[expanded]::after {
+    transform: translate(-25%, 25%) rotate(45deg);
+  }
+
+  .suffix-chevron {
     font-size: 1em;
+    margin-left: 0.25em;
+  }
+
+  ::slotted([slot="prefix"]) {
+    margin-right: 0.25em;
+  }
+  ::slotted([slot="suffix"]) {
+    margin-left: 0.25em;
+  }
+
+  .content {
+    flex: 1 1 auto;
     line-height: 1.5;
+    display: inline-block;
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
   }
 
-  /* prefix/suffix 슬롯 */
-  ::slotted([slot="prefix"]) {
-    margin-right: 0.5em;
+  /* inline submenu */
+  .submenu {
+    display: none;
   }
-  ::slotted([slot="suffix"]) {
-    margin-left: 0.5em;
+  .submenu[open] {
+    display: block;
   }
 
-  /* 아이콘 공통 스타일 */
-  .icon {
-    color: var(--u-txt-color);
-    font-size: 0.75em;
-  }
-  .icon.prefix {
-    margin-right: 0.5em;
+  /* floating submenu (popover) */
+  .popover {
+    display: flex;
+    flex-direction: column;
+    padding: 4px;
+    border: 1px solid var(--u-border-color);
+    border-radius: 4px;
+    background-color: var(--u-panel-bg-color);
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+    transform: scale(0.8);
+    transition: opacity 0.2s ease, visibility 0s 0.2s, transform 0.2s ease;
   }
-  .icon.suffix {
-    margin-left: 0.5em;
+  .popover[open] {
+    transform: scale(1);
+    transition-delay: 0s;
   }
 `;
-
+//#endregion
 export { styles };

package/dist/components/option/UOption.d.ts

@@ -0,0 +1,42 @@
+import { UElement } from '../UElement.js';
+export type OptionMarker = 'radio' | 'check';
+/**
+ * 선택 가능한 항목을 나타내는 컴포넌트입니다.
+ * USelect, URadio, UInput(combobox)의 자식으로 사용됩니다.
+ *
+ * @slot - 옵션 라벨 텍스트
+ * @slot prefix - 라벨 앞에 표시되는 아이콘 등
+ * @slot suffix - 라벨 뒤에 표시되는 추가 콘텐츠
+ *
+ * @csspart content - 콘텐츠 영역
+ *
+ * @cssprop --option-color-interactive - 호버/포커스 시 텍스트 색상
+ * @cssprop --option-border-color-interactive - 호버/포커스 시 테두리 색상
+ * @cssprop --option-background-color-interactive - 호버/포커스 시 배경 색상
+ * @cssprop --option-color-active - 선택된 상태의 텍스트 색상
+ * @cssprop --option-border-color-active - 선택된 상태의 테두리 색상
+ * @cssprop --option-background-color-active - 선택된 상태의 배경 색상
+ * @cssprop --option-color-active-interactive - 선택된 상태에서 호버/포커스 시 텍스트 색상
+ * @cssprop --option-border-color-active-interactive - 선택된 상태에서 호버/포커스 시 테두리 색상
+ * @cssprop --option-background-color-active-interactive - 선택된 상태에서 호버/포커스 시 배경 색상
+ */
+export declare class UOption extends UElement {
+    static styles: import('lit').CSSResultGroup[];
+    /** 비활성화 여부 */
+    disabled: boolean;
+    /** 선택 여부 */
+    selected: boolean;
+    /** 옵션 마커 유형. 'radio'는 원형, 'check'는 체크 모양의 마커를 표시합니다. */
+    marker?: OptionMarker;
+    /** 옵션 고유값 */
+    value: string;
+    connectedCallback(): void;
+    render(): import('lit-html').TemplateResult<1>;
+    getText(): string;
+    private renderMarker;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'u-option': UOption;
+    }
+}