@iyulab/components 0.4.0 → 1.0.0

package/dist/components/tree-item/UTreeItem.js

@@ -1,5 +1,194 @@
-import { UTreeItem } from './UTreeItem.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 "../spinner/USpinner.js";
+import { styles } from "./UTreeItem.styles.js";
+import { customElement, property, state } from "lit/decorators.js";
+import { html } from "lit";
+//#region src/components/tree-item/UTreeItem.ts
+var _ref, _ref2, _UTreeItem;
+var UTreeItem = class UTreeItem extends UElement {
+	static {
+		_UTreeItem = this;
+	}
+	constructor(..._args) {
+		super(..._args);
+		this.disabled = false;
+		this.expanded = false;
+		this.selectable = false;
+		this.checkable = false;
+		this.loading = false;
+		this.trigger = "item";
+		this.value = "";
+		this.draggable = false;
+		this.droppable = false;
+		this.leaf = true;
+		this.depth = 0;
+		this.selected = false;
+		this.checked = false;
+		this.indeterminate = false;
+		this._parentItem = null;
+		this._childItems = [];
+		this.handleSlotChange = (e) => {
+			const elements = e.target.assignedElements({ flatten: true });
+			for (const el of elements) if (el instanceof _UTreeItem && !el.hasAttribute("slot")) el.setAttribute("slot", "children");
+		};
+		this.handleChildrenSlotChange = (e) => {
+			this._childItems = e.target.assignedElements({ flatten: true }).filter((el) => el instanceof _UTreeItem);
+			this.leaf = this._childItems.length === 0;
+			this.propagate();
+		};
+		this.handleHeaderClick = (e) => {
+			e.stopPropagation();
+			if (this.disabled) return;
+			if (this.selectable) this.fire("pick", { detail: {
+				value: this.value,
+				selected: this.selected,
+				shiftKey: e.shiftKey,
+				metaKey: e.metaKey,
+				ctrlKey: e.ctrlKey
+			} });
+			const isMultiple = this.selectable && (e.ctrlKey || e.metaKey || e.shiftKey);
+			if (this.trigger === "item" && !isMultiple) this.toggle();
+		};
+		this.handleToggleClick = (e) => {
+			e.stopPropagation();
+			this.toggle();
+		};
+		this.handleCheckboxClick = (e) => {
+			e.stopPropagation();
+			if (this.disabled) return;
+			this.fire("check");
+		};
+	}
+	static {
+		this.styles = [super.styles, styles];
+	}
+	get parentItem() {
+		return this._parentItem;
+	}
+	get childItems() {
+		return this._childItems;
+	}
+	connectedCallback() {
+		super.connectedCallback();
+		this.setAttribute("role", "treeitem");
+		this.setAttribute("tabindex", this.disabled ? "-1" : "0");
+		if (this.parentElement instanceof _UTreeItem) {
+			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("depth")) this.style.setProperty("--tree-item-depth", String(this.depth));
+	}
+	render() {
+		return html`
+      <div class="header" part="header"
+        ?selected=${this.selected}
+        @click=${this.handleHeaderClick}
+      >
+        <span class="prefix-toggler"
+          ?hidden=${this.leaf}
+          @click=${this.handleToggleClick}
+        >
+          ${this.loading ? html`<u-spinner></u-spinner>` : this.expanded ? this.collapseIcon || html`<u-icon lib="internal" name="chevron-down"></u-icon>` : this.expandIcon || html`<u-icon lib="internal" name="chevron-right"></u-icon>`}
+        </span>
 
-UTreeItem.define("u-tree-item");
+        <span class="prefix-checkbox"
+          ?hidden=${!this.checkable}  
+          ?checked=${this.checked}
+          ?indeterminate=${this.indeterminate}
+          @click=${this.handleCheckboxClick}
+        >
+          <u-icon lib="internal"
+            name=${this.indeterminate ? "dash-lg" : "check-lg"}
+          ></u-icon>
+        </span>
 
+        <slot name="prefix"></slot>
+        <div class="content" part="content">
+          <slot @slotchange=${this.handleSlotChange}></slot>
+        </div>
+        <slot name="suffix"></slot>
+      </div>
+
+      <div class="subtree" part="subtree" ?hidden=${!this.expanded || this.leaf}>
+        <slot name="children" @slotchange=${this.handleChildrenSlotChange}></slot>
+      </div>
+    `;
+	}
+	expand() {
+		if (this.disabled || this.leaf) return false;
+		if (this.fire("expand")) {
+			this.expanded = true;
+			return true;
+		}
+		return false;
+	}
+	collapse() {
+		if (this.disabled || this.leaf) return false;
+		if (this.fire("collapse")) {
+			this.expanded = false;
+			return true;
+		}
+		return false;
+	}
+	toggle() {
+		if (this.expanded) return this.collapse();
+		else return this.expand();
+	}
+	propagate() {
+		this._childItems.forEach((item) => {
+			item.selectable = this.selectable;
+			item.checkable = this.checkable;
+			item.trigger = this.trigger;
+			item.expandIcon = this.expandIcon?.cloneNode(true);
+			item.collapseIcon = this.collapseIcon?.cloneNode(true);
+		});
+	}
+};
+__decorate([property({
+	type: Boolean,
+	reflect: true
+}), __decorateMetadata("design:type", Boolean)], UTreeItem.prototype, "disabled", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true
+}), __decorateMetadata("design:type", Boolean)], UTreeItem.prototype, "expanded", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true
+}), __decorateMetadata("design:type", Boolean)], UTreeItem.prototype, "selectable", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true
+}), __decorateMetadata("design:type", Boolean)], UTreeItem.prototype, "checkable", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true
+}), __decorateMetadata("design:type", Boolean)], UTreeItem.prototype, "loading", void 0);
+__decorate([property({ type: String }), __decorateMetadata("design:type", Object)], UTreeItem.prototype, "trigger", void 0);
+__decorate([property({ type: String }), __decorateMetadata("design:type", String)], UTreeItem.prototype, "value", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true
+}), __decorateMetadata("design:type", Boolean)], UTreeItem.prototype, "draggable", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true
+}), __decorateMetadata("design:type", Boolean)], UTreeItem.prototype, "droppable", void 0);
+__decorate([state(), __decorateMetadata("design:type", Boolean)], UTreeItem.prototype, "leaf", void 0);
+__decorate([state(), __decorateMetadata("design:type", Number)], UTreeItem.prototype, "depth", void 0);
+__decorate([state(), __decorateMetadata("design:type", Boolean)], UTreeItem.prototype, "selected", void 0);
+__decorate([state(), __decorateMetadata("design:type", Boolean)], UTreeItem.prototype, "checked", void 0);
+__decorate([state(), __decorateMetadata("design:type", Boolean)], UTreeItem.prototype, "indeterminate", void 0);
+__decorate([state(), __decorateMetadata("design:type", typeof (_ref = typeof Node !== "undefined" && Node) === "function" ? _ref : Object)], UTreeItem.prototype, "expandIcon", void 0);
+__decorate([state(), __decorateMetadata("design:type", typeof (_ref2 = typeof Node !== "undefined" && Node) === "function" ? _ref2 : Object)], UTreeItem.prototype, "collapseIcon", void 0);
+UTreeItem = _UTreeItem = __decorate([customElement("u-tree-item")], UTreeItem);
+//#endregion
 export { UTreeItem };

package/dist/components/tree-item/UTreeItem.styles.js

@@ -1,71 +1,130 @@
-import { css } from 'lit';
-
-const styles = css`
+import { css } from "lit";
+//#region src/components/tree-item/UTreeItem.styles.ts
+var styles = css`
   :host {
-    --indent-level: 0;
-    --indent-size: 20px;
+    --tree-item-depth: 0;
   }
 
   :host {
     display: block;
   }
+  :host(:focus-visible) {
+    outline: none;
+  }
   :host([disabled]) {
     opacity: 0.5;
     pointer-events: none;
-    cursor: not-allowed;
-  }
-  :host([disabled]) .header {
-    cursor: not-allowed;
-    pointer-events: none;
   }
 
+  /* ── header ── */
   .header {
     display: flex;
     flex-direction: row;
     align-items: center;
-    gap: 6px;
-    padding: 6px 8px;
-    padding-left: calc(var(--indent-level, 0) * var(--indent-size));
-    line-height: 1.5;
-    border-radius: 4px;
-    background-color: transparent;
-    transition: background-color 0.2s ease;
+    padding: 4px 8px;
+    padding-left: calc(
+      var(--tree-indent-size) * var(--tree-item-depth)
+      + var(--tree-indent-guide-offset)
+    );
+    transition: background-color 0.15s ease, color 0.15s ease;
     user-select: none;
     cursor: pointer;
   }
-  :host(:not([disabled])) .header:hover {
-    background-color: var(--u-bg-color-hover, #f5f5f5);
+  :host(:not([disabled])[trigger="item"]) .header:hover,
+  :host(:not([disabled])[trigger="item"]:focus-visible) .header {
+    background-color: var(--u-bg-color-hover);
   }
-  :host([selected]) .header {
-    color: var(--u-blue-600, #0066cc);
-    background-color: var(--u-blue-0, #e8f4f8);
+  .header[selected] {
+    color: var(--u-blue-700);
+    font-weight: 600;
+    background-color: var(--u-blue-100);
   }
 
-  .expand-icon {
-    transition: transform 0.2s ease, color 0.2s ease;
-    cursor: pointer;
+  ::slotted([slot="prefix"]) {
+    margin-right: 0.2em;
   }
-  
-  slot[name="prefix"],
-  slot[name="suffix"] {
+  ::slotted([slot="suffix"]) {
+    margin-left: 0.2em;
+  }
+
+  /* ── content ── */
+  .content {
+    flex: 1;
+    min-width: 0;
+    line-height: 1.5;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  /* ── toggler ── */
+  .prefix-toggler {
+    flex-shrink: 0;
+    margin-right: 4px;
     display: inline-flex;
     align-items: center;
     justify-content: center;
+    width: 18px;
+    height: 18px;
+    border-radius: 3px;
   }
-  
-  .label {
-    flex: 1;
+  .prefix-toggler u-icon {
+    font-size: 12px;
+  }
+  :host(:not([disabled])[trigger="icon"]) .prefix-toggler:hover,
+  :host(:not([disabled])[trigger="icon"]:focus-visible) .prefix-toggler {
+    background-color: var(--u-bg-color-hover);
+  }
+
+  /* ── checkbox ── */
+  .prefix-checkbox {
+    flex-shrink: 0;
+    margin-right: 4px;
     display: inline-flex;
     align-items: center;
-    justify-content: flex-start;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
+    justify-content: center;
+    width: 16px;
+    height: 16px;
+    border-radius: 3px;
+    border: 1.5px solid var(--u-input-border-color);
+    background-color: transparent;
+    transition: background-color 0.15s ease, border-color 0.15s ease;
+    cursor: pointer;
+  }
+  .prefix-checkbox u-icon {
+    visibility: hidden;
+    font-size: 12px;
+    color: #fff;
+  }
+  .prefix-checkbox[checked],
+  .prefix-checkbox[indeterminate] {
+    border-color: var(--u-blue-600);
+    background-color: var(--u-blue-600);
+  }
+  .prefix-checkbox[checked] u-icon,
+  .prefix-checkbox[indeterminate] u-icon {
+    visibility: visible;
   }
 
-  .children {
+  /* ── children ── */
+  .subtree {
     display: block;
+    position: relative;
   }
-`;
 
+  .subtree::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: calc(
+      var(--tree-indent-size) * (var(--tree-item-depth) + 1)
+    );
+    border-left: var(--tree-indent-guide-width)
+                 var(--tree-indent-guide-style)
+                 var(--tree-indent-guide-color);
+    pointer-events: none;
+  }
+`;
+//#endregion
 export { styles };

package/dist/events/CheckEvent.d.ts

@@ -0,0 +1,7 @@
+export type CheckEventDetail = unknown;
+export type CheckEvent = CustomEvent<CheckEventDetail>;
+declare global {
+    interface GlobalEventHandlersEventMap {
+        'check': CheckEvent;
+    }
+}

package/dist/events/CollapseEvent.d.ts

@@ -0,0 +1,7 @@
+export type CollapseEventDetail = unknown;
+export type CollapseEvent = CustomEvent<CollapseEventDetail>;
+declare global {
+    interface GlobalEventHandlersEventMap {
+        'collapse': CollapseEvent;
+    }
+}

package/dist/events/ExpandEvent.d.ts

@@ -0,0 +1,7 @@
+export type ExpandEventDetail = unknown;
+export type ExpandEvent = CustomEvent<ExpandEventDetail>;
+declare global {
+    interface GlobalEventHandlersEventMap {
+        'expand': ExpandEvent;
+    }
+}

package/dist/events/HideEvent.d.ts

@@ -0,0 +1,7 @@
+export type HideEventDetail = unknown;
+export type HideEvent = CustomEvent<HideEventDetail>;
+declare global {
+    interface GlobalEventHandlersEventMap {
+        'hide': HideEvent;
+    }
+}

package/dist/events/NavigateEvent.d.ts

@@ -0,0 +1,7 @@
+export type NavigateEventDetail = unknown;
+export type NavigateEvent = CustomEvent<NavigateEventDetail>;
+declare global {
+    interface GlobalEventHandlersEventMap {
+        'navigate': NavigateEvent;
+    }
+}

package/dist/events/PickEvent.d.ts

@@ -0,0 +1,18 @@
+export interface PickEventDetail {
+    /** 아이템의 고유값 */
+    value: string;
+    /** 클릭 후 선택 상태 */
+    selected: boolean;
+    /** Shift 키 누름 여부 (범위 선택) */
+    shiftKey: boolean;
+    /** Meta/Cmd 키 누름 여부 (Mac 다중 개별 선택) */
+    metaKey: boolean;
+    /** Ctrl 키 누름 여부 (Windows/Linux 다중 개별 선택) */
+    ctrlKey: boolean;
+}
+export type PickEvent = CustomEvent<PickEventDetail>;
+declare global {
+    interface GlobalEventHandlersEventMap {
+        'pick': PickEvent;
+    }
+}

package/dist/events/RemoveEvent.d.ts

@@ -0,0 +1,7 @@
+export type RemoveEventDetail = unknown;
+export type RemoveEvent = CustomEvent<RemoveEventDetail>;
+declare global {
+    interface GlobalEventHandlersEventMap {
+        'remove': RemoveEvent;
+    }
+}

package/dist/events/ShiftEvent.d.ts

@@ -0,0 +1,16 @@
+export interface ShiftEventDetail {
+    /** 이동된 구분선의 인덱스 */
+    index: number;
+    /** 현재 패널 크기 비율 배열 (퍼센트, 합계 100) */
+    ratio: number[];
+}
+export type UShiftEvent = CustomEvent<ShiftEventDetail>;
+export type UShiftStartEvent = CustomEvent<ShiftEventDetail>;
+export type UShiftEndEvent = CustomEvent<ShiftEventDetail>;
+declare global {
+    interface GlobalEventHandlersEventMap {
+        'shift': UShiftEvent;
+        'shift-start': UShiftStartEvent;
+        'shift-end': UShiftEndEvent;
+    }
+}

package/dist/events/ShowEvent.d.ts

@@ -0,0 +1,7 @@
+export type ShowEventDetail = unknown;
+export type ShowEvent = CustomEvent<ShowEventDetail>;
+declare global {
+    interface GlobalEventHandlersEventMap {
+        'show': ShowEvent;
+    }
+}

package/dist/index.d.ts

@@ -1,37 +1,64 @@
+export * from './components/UFormControlElement.js';
+export * from './components/UDataElement.js';
 export * from './components/UElement.js';
 export * from './components/UFloatingElement.js';
-export * from './components/UJsonElement.js';
-export * from './components/UModalElement.js';
+export * from './components/UOverlayElement.js';
 export * from './components/alert/UAlert.js';
+export * from './components/avatar/UAvatar.js';
+export * from './components/badge/UBadge.js';
+export * from './components/breadcrumb/UBreadcrumb.js';
+export * from './components/breadcrumb-item/UBreadcrumbItem.js';
 export * from './components/button/UButton.js';
+export * from './components/button-group/UButtonGroup.js';
 export * from './components/card/UCard.js';
 export * from './components/carousel/UCarousel.js';
+export * from './components/checkbox/UCheckbox.js';
+export * from './components/chip/UChip.js';
 export * from './components/dialog/UDialog.js';
 export * from './components/divider/UDivider.js';
 export * from './components/drawer/UDrawer.js';
+export * from './components/field/UField.js';
 export * from './components/form/UForm.js';
 export * from './components/icon/UIcon.js';
+export * from './components/icon-button/UIconButton.js';
 export * from './components/input/UInput.js';
 export * from './components/menu/UMenu.js';
 export * from './components/menu-item/UMenuItem.js';
+export * from './components/option/UOption.js';
+export * from './components/panel/UPanel.js';
+export * from './components/popover/UPopover.js';
 export * from './components/progress-bar/UProgressBar.js';
 export * from './components/progress-ring/UProgressRing.js';
+export * from './components/radio/URadio.js';
+export * from './components/rating/URating.js';
+export * from './components/select/USelect.js';
 export * from './components/skeleton/USkeleton.js';
+export * from './components/slider/USlider.js';
 export * from './components/spinner/USpinner.js';
 export * from './components/split-panel/USplitPanel.js';
+export * from './components/switch/USwitch.js';
+export * from './components/tab/UTab.js';
+export * from './components/tab-panel/UTabPanel.js';
 export * from './components/tag/UTag.js';
+export * from './components/textarea/UTextarea.js';
 export * from './components/tooltip/UTooltip.js';
 export * from './components/tree/UTree.js';
 export * from './components/tree-item/UTreeItem.js';
-export * from './events/UChangeEvent';
-export * from './events/UHideEvent';
-export * from './events/UInputEvent';
-export * from './events/UResizeEvent';
-export * from './events/USelectEvent';
-export * from './events/UShowEvent';
+export * from './events/CheckEvent';
+export * from './events/CollapseEvent';
+export * from './events/ExpandEvent';
+export * from './events/HideEvent';
+export * from './events/NavigateEvent';
+export * from './events/PickEvent';
+export * from './events/RemoveEvent';
+export * from './events/ShiftEvent';
+export * from './events/ShowEvent';
 export * from './utilities/BrowserStorage.js';
+export * from './utilities/converters.js';
+export * from './utilities/Dialog.js';
 export * from './utilities/elements.js';
-export * from './utilities/IconRegistry.js';
-export * from './utilities/Notifier.js';
+export * from './utilities/icons.js';
+export * from './utilities/OverlayManager.js';
 export * from './utilities/sanitizers.js';
 export * from './utilities/Theme.js';
+export * from './utilities/Toast.js';