@iyulab/components 0.4.0 → 1.0.1

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

package/dist/components/option/UOption.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 "../icon/UIcon.js";
+import { styles } from "./UOption.styles.js";
+import { customElement, property } from "lit/decorators.js";
+import { html, nothing } from "lit";
+//#region src/components/option/UOption.ts
+var UOption = class UOption extends UElement {
+	constructor(..._args) {
+		super(..._args);
+		this.disabled = false;
+		this.selected = false;
+		this.value = "";
+	}
+	static {
+		this.styles = [super.styles, styles];
+	}
+	connectedCallback() {
+		super.connectedCallback();
+		this.setAttribute("role", "option");
+		this.setAttribute("tabindex", this.disabled ? "-1" : "0");
+	}
+	render() {
+		return html`
+      ${this.renderMarker()}
+      <slot name="prefix"></slot>
+      <div class="content" part="content">
+        <slot></slot>
+      </div>
+      <slot name="suffix"></slot>
+    `;
+	}
+	getText() {
+		return this.renderRoot.querySelector("slot:not([name])")?.assignedNodes({ flatten: true }).map((n) => n.textContent?.trim()).filter(Boolean).join("") || this.value;
+	}
+	renderMarker() {
+		if (this.marker === "radio") return html`<span class="radio-marker" part="radio-marker"></span>`;
+		if (this.marker === "check") return html`
+        <u-icon class="check-marker" part="check-marker"
+          ?hidden=${!this.selected}
+          lib="internal"
+          name="check-lg"
+        ></u-icon>
+      `;
+		return nothing;
+	}
+};
+__decorate([property({
+	type: Boolean,
+	reflect: true
+}), __decorateMetadata("design:type", Boolean)], UOption.prototype, "disabled", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true
+}), __decorateMetadata("design:type", Boolean)], UOption.prototype, "selected", void 0);
+__decorate([property({
+	type: String,
+	reflect: true
+}), __decorateMetadata("design:type", Object)], UOption.prototype, "marker", void 0);
+__decorate([property({ type: String }), __decorateMetadata("design:type", String)], UOption.prototype, "value", void 0);
+UOption = __decorate([customElement("u-option")], UOption);
+//#endregion
+export { UOption };

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

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

package/dist/components/option/UOption.styles.js

@@ -0,0 +1,132 @@
+import { css } from "lit";
+//#region src/components/option/UOption.styles.ts
+var styles = css`
+  :host {
+    --option-color-interactive: inherit;
+    --option-border-color-interactive: var(--u-border-color-hover);
+    --option-background-color-interactive: var(--u-bg-color-hover);
+
+    --option-color-active: inherit;
+    --option-border-color-active: var(--u-blue-600);
+    --option-background-color-active: var(--u-blue-100);
+
+    --option-color-active-interactive: inherit;
+    --option-border-color-active-interactive: var(--u-blue-600);
+    --option-background-color-active-interactive: var(--u-blue-200);
+  }
+
+  :host {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    padding: 0.25em 0.5em;
+    transition: background-color 0.15s ease, color 0.15s ease;
+    user-select: none;
+    cursor: pointer;
+  }
+  :host(:focus-visible) {
+    outline: none;
+  }
+  :host([disabled]) {
+    opacity: 0.5;
+    pointer-events: none;
+  }
+
+  :host(:not([disabled]):hover),
+  :host(:not([disabled]):focus-visible) {
+    color: var(--option-color-interactive);
+    border-color: var(--option-border-color-interactive);
+    background-color: var(--option-background-color-interactive);
+  }
+  :host([selected]) {
+    font-weight: 600;
+    color: var(--option-color-active);
+    border-color: var(--option-border-color-active);
+    background-color: var(--option-background-color-active);
+  }
+  :host([selected]:hover),
+  :host([selected]:focus-visible) {
+    color: var(--option-color-active-interactive);
+    border-color: var(--option-border-color-active-interactive);
+    background-color: var(--option-background-color-active-interactive);
+  }
+
+  :host([marker="radio"]:not([disabled]):hover),
+  :host([marker="radio"]:not([disabled]):focus-visible) {
+    color: inherit;
+    border-color: transparent;
+    background-color: transparent;
+  }
+  :host([marker="radio"][selected]) {
+    font-weight: inherit;
+    color: inherit;
+    border-color: transparent;
+    background-color: transparent;
+  }
+  :host([marker="radio"][selected]:hover),
+  :host([marker="radio"][selected]:focus-visible) {
+    color: inherit;
+    border-color: transparent;
+    background-color: transparent;
+  }
+
+  .content {
+    line-height: 1.5;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  /* 라디오 마커 (원형) */
+  .radio-marker {
+    flex-shrink: 0;
+    margin-right: 0.5em;
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 1.25em;
+    height: 1.25em;
+    border: 2px solid var(--u-neutral-400);
+    border-radius: 50%;
+    background-color: var(--u-bg-color);
+    transition: border-color 0.2s ease, background-color 0.2s ease;
+  }
+  :host([marker="radio"]:not([disabled]):hover) .radio-marker,
+  :host([marker="radio"]:not([disabled]):focus-visible) .radio-marker {
+    border-color: var(--option-border-color-interactive);
+  }
+  :host([marker="radio"][selected]) .radio-marker {
+    border-color: var(--option-border-color-active);
+    background-color: var(--option-background-color-active);
+  }
+  :host([marker="radio"][selected]:hover) .radio-marker,
+  :host([marker="radio"][selected]:focus-visible) .radio-marker {
+    border-color: var(--option-border-color-active-interactive);
+    background-color: var(--option-background-color-active-interactive);
+  }
+
+  /* 라디오 마커 내부 원 */
+  .radio-marker::after {
+    content: '';
+    display: block;
+    width: 0.45em;
+    height: 0.45em;
+    border-radius: 50%;
+    background-color: var(--option-color-active);
+    transform: scale(0);
+    transition: transform 0.15s ease;
+  }
+  :host([marker="radio"][selected]) .radio-marker::after {
+    transform: scale(1);
+  }
+
+  /* 체크 아이콘 */
+  .check-marker {
+    flex-shrink: 0;
+    margin-right: 0.5em;
+    color: var(--option-color-active);
+  }
+`;
+//#endregion
+export { styles };

package/dist/components/panel/UPanel.d.ts

@@ -0,0 +1,22 @@
+import { UElement } from '../UElement.js';
+/**
+ * 콘텐츠를 담는 기본 패널 컴포넌트입니다.
+ * 이 패널은 value 기반으로 매칭하여 사용하거나 독립적으로 사용합니다.
+ *
+ * @slot - 패널 내부 콘텐츠
+ */
+export declare class UPanel extends UElement {
+    static styles: import('lit').CSSResultGroup[];
+    /** 패널 비활성화 여부 */
+    disabled: boolean;
+    /** 패널 접기 가능 여부 */
+    collapsible: boolean;
+    /** 패널 고유값 (매칭 시 사용) */
+    value: string;
+    render(): import('lit-html').TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'u-panel': UPanel;
+    }
+}

package/dist/components/panel/UPanel.js

@@ -0,0 +1,36 @@
+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 "./UPanel.styles.js";
+import { customElement, property } from "lit/decorators.js";
+import { html } from "lit";
+//#region src/components/panel/UPanel.ts
+var UPanel = class UPanel extends UElement {
+	constructor(..._args) {
+		super(..._args);
+		this.disabled = false;
+		this.collapsible = false;
+		this.value = "";
+	}
+	static {
+		this.styles = [super.styles, styles];
+	}
+	render() {
+		return html`<slot></slot>`;
+	}
+};
+__decorate([property({
+	type: Boolean,
+	reflect: true
+}), __decorateMetadata("design:type", Object)], UPanel.prototype, "disabled", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true
+}), __decorateMetadata("design:type", Object)], UPanel.prototype, "collapsible", void 0);
+__decorate([property({
+	type: String,
+	reflect: true
+}), __decorateMetadata("design:type", Object)], UPanel.prototype, "value", void 0);
+UPanel = __decorate([customElement("u-panel")], UPanel);
+//#endregion
+export { UPanel };

package/dist/components/panel/UPanel.styles.d.ts

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

package/dist/components/panel/UPanel.styles.js

@@ -0,0 +1,14 @@
+import { css } from "lit";
+//#region src/components/panel/UPanel.styles.ts
+var styles = css`
+  :host {
+    display: block;
+    overflow: auto;
+  }
+  :host([disabled]) {
+    pointer-events: none;
+    opacity: 0.5;
+  }
+`;
+//#endregion
+export { styles };