@iyulab/components 0.1.6 → 0.1.8

package/dist/components/index.d.ts

@@ -1,20 +0,0 @@
-export * from './alert';
-export * from './button';
-export * from './context-menu';
-export * from './copy-button';
-export * from './dialog';
-export * from './divider';
-export * from './dropdown-menu';
-export * from './form';
-export * from './icon';
-export * from './icon-button';
-export * from './input';
-export * from './menu';
-export * from './menu-item';
-export * from './progress-bar';
-export * from './progress-ring';
-export * from './spinner';
-export * from './split-panel';
-export * from './tooltip';
-export * from './tree';
-export * from './tree-item';

package/dist/components/input/index.d.ts

@@ -1,7 +0,0 @@
-import { Input } from './Input.js';
-declare global {
-    interface HTMLElementTagNameMap {
-        "u-input": Input;
-    }
-}
-export { Input };

package/dist/components/input/index.js

@@ -1,5 +0,0 @@
-import { Input } from './Input.js';
-
-Input.define("u-input");
-
-export { Input };

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

@@ -1,25 +0,0 @@
-import { PropertyValues } from 'lit';
-import { BaseElement } from '../BaseElement.js';
-export declare class Menu extends BaseElement {
-    static styles: import('lit').CSSResultGroup[];
-    static dependencies: Record<string, typeof BaseElement>;
-    private items;
-    open: boolean;
-    selectable: boolean;
-    value: string;
-    connectedCallback(): void;
-    disconnectedCallback(): void;
-    protected updated(changedProperties: PropertyValues): void;
-    render(): import('lit-html').TemplateResult<1>;
-    show: () => Promise<void>;
-    hide: () => Promise<void>;
-    /** (추가) 첫 번째 활성 아이템 포커스 */
-    focusFirstItem: () => Promise<void>;
-    private updateOpenState;
-    private updateSelection;
-    private handleSlotChange;
-    private handleSelect;
-    /** 같은 레벨 다른 submenu 닫기 */
-    private handleSubmenuOpen;
-    private handleKeydown;
-}

package/dist/components/menu/Menu.js

@@ -1,168 +0,0 @@
-import { html } from 'lit';
-import { queryAssignedElements, property } from 'lit/decorators.js';
-import { BaseElement } from '../BaseElement.js';
-import { MenuItem } from '../menu-item/MenuItem.js';
-import { styles } from './Menu.styles.js';
-
-var __defProp = Object.defineProperty;
-var __decorateClass = (decorators, target, key, kind) => {
-  var result = void 0 ;
-  for (var i = decorators.length - 1, decorator; i >= 0; i--)
-    if (decorator = decorators[i])
-      result = (decorator(target, key, result) ) || result;
-  if (result) __defProp(target, key, result);
-  return result;
-};
-class Menu extends BaseElement {
-  constructor() {
-    super(...arguments);
-    this.open = false;
-    this.selectable = false;
-    this.value = "";
-    this.show = async () => {
-      await this.updateComplete;
-      requestAnimationFrame(() => this.open = true);
-    };
-    this.hide = async () => {
-      await this.updateComplete;
-      requestAnimationFrame(() => this.open = false);
-    };
-    /** (추가) 첫 번째 활성 아이템 포커스 */
-    this.focusFirstItem = async () => {
-      await this.updateComplete;
-      const enabled = (this.items || []).filter((i) => !i.disabled);
-      if (enabled.length) enabled[0].focus();
-    };
-    this.handleSlotChange = () => {
-      if (this.selectable && this.value) this.updateSelection();
-    };
-    this.handleSelect = (e) => {
-      const event = e;
-      const menuItem = e.target;
-      if (this.selectable && menuItem) {
-        this.value = menuItem.value || event.detail?.value || "";
-        this.updateSelection();
-      }
-    };
-    /** 같은 레벨 다른 submenu 닫기 */
-    this.handleSubmenuOpen = (e) => {
-      const openedItem = e.detail?.item;
-      if (!openedItem) return;
-      (this.items || []).forEach((item) => {
-        if (item !== openedItem) item.closeSubmenu?.();
-      });
-    };
-    this.handleKeydown = async (e) => {
-      const items = (this.items || []).filter((item) => !item.disabled);
-      if (items.length === 0) return;
-      const currentIndex = items.findIndex((item) => item === e.target);
-      let nextIndex = currentIndex;
-      switch (e.key) {
-        case "ArrowDown":
-          e.preventDefault();
-          nextIndex = (currentIndex + 1) % items.length;
-          items[nextIndex].focus();
-          break;
-        case "ArrowUp":
-          e.preventDefault();
-          nextIndex = currentIndex - 1 < 0 ? items.length - 1 : currentIndex - 1;
-          items[nextIndex].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();
-          if (currentIndex >= 0) items[currentIndex].click();
-          break;
-        case "ArrowLeft": {
-          const parentItem = this.parentElement;
-          if (parentItem?.tagName?.toLowerCase() === "u-menu-item") {
-            e.preventDefault();
-            parentItem.closeSubmenu?.();
-            parentItem.focus?.();
-          }
-          break;
-        }
-        case "Escape": {
-          e.preventDefault();
-          const parentItem = this.parentElement;
-          if (parentItem?.tagName?.toLowerCase() === "u-menu-item") {
-            parentItem.closeSubmenu?.();
-            parentItem.focus?.();
-          } else {
-            this.emit("u-request-close");
-            await this.hide();
-          }
-          break;
-        }
-      }
-    };
-  }
-  static {
-    this.styles = [super.styles, styles];
-  }
-  static {
-    this.dependencies = {
-      "u-menu-item": MenuItem
-    };
-  }
-  connectedCallback() {
-    super.connectedCallback();
-    this.setAttribute("role", "menu");
-    this.addEventListener("u-select", this.handleSelect);
-    this.addEventListener("keydown", this.handleKeydown);
-    this.addEventListener("u-submenu-open", this.handleSubmenuOpen);
-  }
-  disconnectedCallback() {
-    this.removeEventListener("u-select", this.handleSelect);
-    this.removeEventListener("keydown", this.handleKeydown);
-    this.removeEventListener("u-submenu-open", this.handleSubmenuOpen);
-    super.disconnectedCallback();
-  }
-  updated(changedProperties) {
-    super.updated(changedProperties);
-    if (changedProperties.has("value") && this.selectable) {
-      this.updateSelection();
-    }
-    if (changedProperties.has("open")) {
-      this.updateOpenState(this.open);
-    }
-  }
-  render() {
-    return html`
-      <div class="container">
-        <slot @slotchange=${this.handleSlotChange}></slot>
-      </div>
-    `;
-  }
-  updateOpenState(open) {
-    if (open) this.emit("u-show");
-    else this.emit("u-hide");
-  }
-  updateSelection() {
-    (this.items || []).forEach((item) => {
-      item.selected = item.value === this.value;
-    });
-  }
-}
-__decorateClass([
-  queryAssignedElements({ selector: "u-menu-item" })
-], Menu.prototype, "items");
-__decorateClass([
-  property({ type: Boolean, reflect: true })
-], Menu.prototype, "open");
-__decorateClass([
-  property({ type: Boolean })
-], Menu.prototype, "selectable");
-__decorateClass([
-  property({ type: String })
-], Menu.prototype, "value");
-
-export { Menu };

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

@@ -1,21 +0,0 @@
-import { css } from 'lit';
-
-const styles = css`
-  :host {
-    display: none;
-    min-width: 180px;
-    padding: 6px;
-    border-radius: 8px;
-    background: var(--u-menu-bg, #fff);
-    box-shadow: 0 10px 24px rgba(0,0,0,0.18);
-  }
-  :host([open]) {
-    display: block;
-  }
-
-  .container {
-    display: block;
-  }
-`;
-
-export { styles };

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

@@ -1,7 +0,0 @@
-import { Menu } from './Menu.js';
-declare global {
-    interface HTMLElementTagNameMap {
-        'u-menu': Menu;
-    }
-}
-export { Menu };

package/dist/components/menu/index.js

@@ -1,5 +0,0 @@
-import { Menu } from './Menu.js';
-
-Menu.define("u-menu");
-
-export { Menu };

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

@@ -1,36 +0,0 @@
-import { PropertyValues } from 'lit';
-import { BaseElement } from '../BaseElement.js';
-export declare class MenuItem extends BaseElement {
-    static styles: import('lit').CSSResultGroup[];
-    static dependencies: Record<string, typeof BaseElement>;
-    disabled: boolean;
-    selected: boolean;
-    checked: boolean;
-    checkable: boolean;
-    value: string;
-    private submenuOpen;
-    private containerEl;
-    private submenuList;
-    private submenuCleanup;
-    private closeTimer;
-    private get submenu();
-    connectedCallback(): void;
-    disconnectedCallback(): void;
-    protected updated(changed: PropertyValues): void;
-    private updateRole;
-    render(): import('lit-html').TemplateResult<1>;
-    private renderPrefixItem;
-    /** 외부에서 호출 가능하게(부모 menu가 형제 submenu 닫을 때 사용) */
-    closeSubmenu: () => Promise<void>;
-    private openSubmenu;
-    private onSubmenuSelect;
-    private scheduleCloseSubmenu;
-    private stopSubmenuAutoUpdate;
-    private positionSubmenu;
-    private onPointerEnter;
-    private onPointerLeave;
-    private onFocusIn;
-    private onFocusOut;
-    private handleKeydown;
-    private handleClick;
-}

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

@@ -1,267 +0,0 @@
-import { nothing, html } from 'lit';
-import { property, state, query, queryAssignedElements } from 'lit/decorators.js';
-import { autoUpdate, computePosition, offset, flip, shift } from '@floating-ui/dom';
-import { BaseElement } from '../BaseElement.js';
-import { styles } from './MenuItem.styles.js';
-
-var __defProp = Object.defineProperty;
-var __decorateClass = (decorators, target, key, kind) => {
-  var result = void 0 ;
-  for (var i = decorators.length - 1, decorator; i >= 0; i--)
-    if (decorator = decorators[i])
-      result = (decorator(target, key, result) ) || result;
-  if (result) __defProp(target, key, result);
-  return result;
-};
-class MenuItem extends BaseElement {
-  constructor() {
-    super(...arguments);
-    this.disabled = false;
-    this.selected = false;
-    this.checked = false;
-    this.checkable = false;
-    this.value = "";
-    this.submenuOpen = false;
-    this.submenuCleanup = null;
-    this.closeTimer = null;
-    /** 외부에서 호출 가능하게(부모 menu가 형제 submenu 닫을 때 사용) */
-    this.closeSubmenu = async () => {
-      const sm = this.submenu;
-      if (!sm) return;
-      this.stopSubmenuAutoUpdate();
-      if (this.closeTimer) window.clearTimeout(this.closeTimer);
-      this.submenuOpen = false;
-      this.setAttribute("aria-expanded", "false");
-      await sm.hide();
-    };
-    this.openSubmenu = async (focusFirst = false) => {
-      const sm = this.submenu;
-      if (!sm || this.disabled) return;
-      if (this.closeTimer) {
-        window.clearTimeout(this.closeTimer);
-        this.closeTimer = null;
-      }
-      this.submenuOpen = true;
-      this.setAttribute("aria-expanded", "true");
-      this.emit("u-submenu-open", { item: this });
-      await sm.show();
-      await this.positionSubmenu();
-      this.stopSubmenuAutoUpdate();
-      this.submenuCleanup = autoUpdate(this.containerEl, sm, () => {
-        this.positionSubmenu();
-      });
-      sm.addEventListener("u-select", this.onSubmenuSelect, { once: true });
-      if (focusFirst) {
-        await sm.focusFirstItem?.();
-      }
-    };
-    this.onSubmenuSelect = () => {
-      this.closeSubmenu();
-    };
-    this.scheduleCloseSubmenu = () => {
-      if (!this.submenu) return;
-      if (this.closeTimer) window.clearTimeout(this.closeTimer);
-      this.closeTimer = window.setTimeout(() => this.closeSubmenu(), 150);
-    };
-    this.positionSubmenu = async () => {
-      const sm = this.submenu;
-      if (!sm) return;
-      const pos = await computePosition(this.containerEl, sm, {
-        strategy: "fixed",
-        placement: "right-start",
-        middleware: [
-          offset(6),
-          flip(),
-          shift({ padding: 8 })
-        ]
-      });
-      Object.assign(sm.style, {
-        position: "fixed",
-        left: `${pos.x}px`,
-        top: `${pos.y}px`,
-        zIndex: "1001",
-        transformOrigin: (() => {
-          switch (pos.placement) {
-            case "left":
-            case "left-start":
-            case "left-end":
-              return "right center";
-            case "right":
-            case "right-start":
-            case "right-end":
-              return "left center";
-            case "top":
-            case "top-start":
-            case "top-end":
-              return "center bottom";
-            default:
-              return "center top";
-          }
-        })()
-      });
-    };
-    this.onPointerEnter = () => {
-      if (this.submenu) this.openSubmenu(false);
-    };
-    this.onPointerLeave = (e) => {
-      const sm = this.submenu;
-      if (!sm) return;
-      const next = e.relatedTarget;
-      if (next && (this.contains(next) || sm.contains(next))) return;
-      this.scheduleCloseSubmenu();
-    };
-    this.onFocusIn = () => {
-      if (this.submenu) this.openSubmenu(false);
-    };
-    this.onFocusOut = (e) => {
-      const sm = this.submenu;
-      if (!sm) return;
-      const next = e.relatedTarget;
-      if (next && (this.contains(next) || sm.contains(next))) return;
-      this.scheduleCloseSubmenu();
-    };
-    this.handleKeydown = async (e) => {
-      if (!this.submenu) return;
-      if (e.key === "ArrowRight" || e.key === "Enter" || e.key === " ") {
-        e.preventDefault();
-        await this.openSubmenu(true);
-      }
-    };
-    this.handleClick = async (e) => {
-      if (this.disabled) {
-        e.preventDefault();
-        e.stopPropagation();
-        return;
-      }
-      if (this.submenu) {
-        e.preventDefault();
-        e.stopPropagation();
-        if (this.submenuOpen) await this.closeSubmenu();
-        else await this.openSubmenu(true);
-        return;
-      }
-      if (this.checkable) {
-        this.checked = !this.checked;
-        this.emit("u-check", { checked: this.checked });
-      } else {
-        this.emit("u-select", { value: this.value });
-      }
-    };
-  }
-  static {
-    this.styles = [super.styles, styles];
-  }
-  static {
-    this.dependencies = {};
-  }
-  get submenu() {
-    return this.submenuList?.[0];
-  }
-  connectedCallback() {
-    super.connectedCallback();
-    this.setAttribute("tabindex", this.disabled ? "-1" : "0");
-    this.updateRole();
-    this.addEventListener("keydown", this.handleKeydown);
-    this.addEventListener("pointerenter", this.onPointerEnter);
-    this.addEventListener("pointerleave", this.onPointerLeave);
-    this.addEventListener("focusin", this.onFocusIn);
-    this.addEventListener("focusout", this.onFocusOut);
-  }
-  disconnectedCallback() {
-    this.removeEventListener("keydown", this.handleKeydown);
-    this.removeEventListener("pointerenter", this.onPointerEnter);
-    this.removeEventListener("pointerleave", this.onPointerLeave);
-    this.removeEventListener("focusin", this.onFocusIn);
-    this.removeEventListener("focusout", this.onFocusOut);
-    this.stopSubmenuAutoUpdate();
-    if (this.closeTimer) window.clearTimeout(this.closeTimer);
-    super.disconnectedCallback();
-  }
-  updated(changed) {
-    super.updated(changed);
-    if (changed.has("disabled")) {
-      this.setAttribute("tabindex", this.disabled ? "-1" : "0");
-      this.setAttribute("aria-disabled", this.disabled ? "true" : "false");
-      if (this.disabled) this.closeSubmenu();
-    }
-    if (changed.has("checked")) {
-      this.setAttribute("aria-checked", this.checked ? "true" : "false");
-    }
-    if (changed.has("checkable")) {
-      this.updateRole();
-    }
-  }
-  updateRole() {
-    const hasSubmenu = !!this.submenu;
-    if (this.checkable) {
-      this.setAttribute("role", "menuitemcheckbox");
-      this.setAttribute("aria-checked", this.checked ? "true" : "false");
-    } else {
-      this.setAttribute("role", "menuitem");
-    }
-    if (hasSubmenu) {
-      this.setAttribute("aria-haspopup", "menu");
-      this.setAttribute("aria-expanded", this.submenuOpen ? "true" : "false");
-    } else {
-      this.removeAttribute("aria-haspopup");
-      this.removeAttribute("aria-expanded");
-    }
-  }
-  render() {
-    const hasSubmenu = !!this.submenu;
-    return html`
-      <div class="container" @click=${this.handleClick}>
-        ${this.renderPrefixItem()}
-        <slot name="prefix"></slot>
-
-        <span class="content">
-          <slot></slot>
-        </span>
-
-        <slot name="suffix"></slot>
-        ${hasSubmenu ? html`<span class="submenu-indicator">›</span>` : nothing}
-      </div>
-
-      <!-- Shoelace 방식 그대로 -->
-      <slot name="submenu"></slot>
-    `;
-  }
-  renderPrefixItem() {
-    if (this.checkable) {
-      return html`<span class="checker" ?checked=${this.checked}>✓</span>`;
-    }
-    return nothing;
-  }
-  stopSubmenuAutoUpdate() {
-    if (this.submenuCleanup) {
-      this.submenuCleanup();
-      this.submenuCleanup = null;
-    }
-  }
-}
-__decorateClass([
-  property({ type: Boolean, reflect: true })
-], MenuItem.prototype, "disabled");
-__decorateClass([
-  property({ type: Boolean, reflect: true })
-], MenuItem.prototype, "selected");
-__decorateClass([
-  property({ type: Boolean, reflect: true })
-], MenuItem.prototype, "checked");
-__decorateClass([
-  property({ type: Boolean })
-], MenuItem.prototype, "checkable");
-__decorateClass([
-  property({ type: String })
-], MenuItem.prototype, "value");
-__decorateClass([
-  state()
-], MenuItem.prototype, "submenuOpen");
-__decorateClass([
-  query(".container")
-], MenuItem.prototype, "containerEl");
-__decorateClass([
-  queryAssignedElements({ slot: "submenu", selector: "u-menu" })
-], MenuItem.prototype, "submenuList");
-
-export { MenuItem };

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

@@ -1,70 +0,0 @@
-import { css } from 'lit';
-
-const styles = css`
-  :host {
-    display: block;
-
-    --selected-color: var(--u-blue-600, #0066cc);
-    --selected-bg-color: var(--u-blue-50, #e8f4f8);
-  }
-  :host([disabled]) {
-    opacity: 0.5;
-    pointer-events: none;
-    cursor: not-allowed;
-  }
-  :host([disabled]) .container {
-    cursor: not-allowed;
-    pointer-events: none;
-  }
-  :host(:not([disabled])) .container:hover {
-    background-color: var(--u-bg-color-hover, #f5f5f5);
-  }
-  :host([selected]) .container {
-    color: var(--selected-color, #0066cc);
-    background-color: var(--selected-bg-color, #e8f4f8);
-  }
-
-  .container {
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    gap: 8px;
-    padding: 8px 12px;
-    line-height: 1.5;
-    border-radius: 4px;
-    background-color: transparent;
-    transition: background-color 0.2s ease;
-    user-select: none;
-    cursor: pointer;
-  }
-
-  .checker {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    opacity: 0;
-    width: 1em;
-    font-size: 0.75em;
-    font-weight: bold;
-    color: var(--u-blue-600, #0066cc);
-    transition: opacity 0.2s ease;
-  }
-  .checker[checked] {
-    opacity: 1;
-  }
-
-  .content {
-    flex: 1;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
-
-  .submenu-indicator {
-    margin-left: 8px;
-    opacity: 0.7;
-    user-select: none;
-  }
-`;
-
-export { styles };

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

@@ -1,7 +0,0 @@
-import { MenuItem } from './MenuItem.js';
-declare global {
-    interface HTMLElementTagNameMap {
-        'u-menu-item': MenuItem;
-    }
-}
-export { MenuItem };

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

@@ -1,5 +0,0 @@
-import { MenuItem } from './MenuItem.js';
-
-MenuItem.define("u-menu-item");
-
-export { MenuItem };

package/dist/components/progress-bar/index.d.ts

@@ -1,7 +0,0 @@
-import { ProgressBar } from './ProgressBar';
-declare global {
-    interface HTMLElementTagNameMap {
-        'u-progress-bar': ProgressBar;
-    }
-}
-export { ProgressBar };

package/dist/components/progress-bar/index.js

@@ -1,5 +0,0 @@
-import { ProgressBar } from './ProgressBar.js';
-
-ProgressBar.define("u-progress-bar");
-
-export { ProgressBar };

package/dist/components/progress-ring/index.d.ts

@@ -1,7 +0,0 @@
-import { ProgressRing } from './ProgressRing.js';
-declare global {
-    interface HTMLElementTagNameMap {
-        'u-progress-ring': ProgressRing;
-    }
-}
-export { ProgressRing };

package/dist/components/progress-ring/index.js

@@ -1,5 +0,0 @@
-import { ProgressRing } from './ProgressRing.js';
-
-ProgressRing.define("u-progress-ring");
-
-export { ProgressRing };