@iyulab/components 0.1.7 → 0.1.9

package/dist/components/copy-button/CopyButton.js

@@ -1,69 +0,0 @@
-import { html } from 'lit';
-import { state, property } from 'lit/decorators.js';
-import { BaseElement } from '../BaseElement.js';
-import { IconButton } from '../icon-button/IconButton.js';
-import { styles } from './CopyButton.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 CopyButton extends BaseElement {
-  constructor() {
-    super(...arguments);
-    this.copied = false;
-    this.borderless = false;
-    this.disabled = false;
-    this.value = "";
-    /** 복사 버튼 클릭 핸들러 */
-    this.handleButtonClick = async () => {
-      try {
-        await navigator.clipboard.writeText(this.value);
-        this.copied = true;
-        this.emit("u-copy", { value: this.value });
-        setTimeout(() => this.copied = false, 2e3);
-      } catch (error) {
-        console.error("Failed to copy text: ", error);
-      }
-    };
-  }
-  static {
-    this.styles = [super.styles, styles];
-  }
-  static {
-    this.dependencies = {
-      "u-icon-button": IconButton
-    };
-  }
-  render() {
-    return html`
-      <u-icon-button part="base"
-        ?copied=${this.copied}
-        .borderless=${this.borderless}
-        .disabled=${this.disabled || this.copied}
-        .library=${"internal"}
-        .name=${this.copied ? "check-lg" : "copy"}
-        @click=${this.handleButtonClick}>
-      </u-icon-button>
-    `;
-  }
-}
-__decorateClass([
-  state()
-], CopyButton.prototype, "copied");
-__decorateClass([
-  property({ type: Boolean })
-], CopyButton.prototype, "borderless");
-__decorateClass([
-  property({ type: Boolean })
-], CopyButton.prototype, "disabled");
-__decorateClass([
-  property({ type: String })
-], CopyButton.prototype, "value");
-
-export { CopyButton };

package/dist/components/copy-button/CopyButton.styles.js

@@ -1,17 +0,0 @@
-import { css } from 'lit';
-
-const styles = css`
-  :host {
-    display: inline-block;
-    font-size: 16px;
-  }
-
-  u-icon-button {
-    font-size: inherit;
-  }
-  u-icon-button[copied] {
-    color: var(--u-green-600, #16a34a);
-  }
-`;
-
-export { styles };

package/dist/components/copy-button/index.d.ts

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

package/dist/components/copy-button/index.js

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

package/dist/components/dialog/Dialog.d.ts

@@ -1,37 +0,0 @@
-import { PropertyValues } from 'lit';
-import { BaseElement } from '../BaseElement.js';
-/**
- * Dialog 컴포넌트는 모달 대화상자를 제공합니다.
- * 오버레이와 함께 화면 중앙에 표시되며, 헤더, 본문, 푸터 영역을 슬롯으로 제공합니다.
- */
-export declare class Dialog extends BaseElement {
-    static styles: import('lit').CSSResultGroup[];
-    static dependencies: Record<string, typeof BaseElement>;
-    dialogEl: HTMLDivElement;
-    /** 모달 모드 활성화 (배경 차단 및 포커스 트랩) */
-    modal: boolean;
-    /** 다이얼로그가 열려있는지 여부 */
-    open: boolean;
-    /** 이벤트에 의한 다이얼로그 닫기 허용 여부 */
-    closable: boolean;
-    /** 타이틀 텍스트 */
-    heading: string;
-    connectedCallback(): void;
-    disconnectedCallback(): void;
-    protected updated(changedProperties: PropertyValues): void;
-    render(): import('lit-html').TemplateResult<1>;
-    /** 다이얼로그를 표시합니다 */
-    show: () => Promise<void>;
-    /** 다이얼로그를 숨깁니다 */
-    hide: () => Promise<void>;
-    /** 패널을 흔드는 애니메이션을 재생합니다 */
-    private shake;
-    /** 오버레이 클릭 핸들러 */
-    private handleBackdropClick;
-    /** 키보드 이벤트 핸들러 */
-    private handleKeydown;
-    /** 포커스 트랩 핸들러 */
-    private handleFocusin;
-    private updateOpenState;
-    private updateModalState;
-}

package/dist/components/dialog/Dialog.js

@@ -1,160 +0,0 @@
-import { nothing, html } from 'lit';
-import { query, property } from 'lit/decorators.js';
-import { BaseElement } from '../BaseElement.js';
-import { IconButton } from '../icon-button/IconButton.js';
-import { styles } from './Dialog.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 Dialog extends BaseElement {
-  constructor() {
-    super(...arguments);
-    this.modal = true;
-    this.open = false;
-    this.closable = true;
-    this.heading = "";
-    /** 다이얼로그를 표시합니다 */
-    this.show = async () => {
-      await this.updateComplete;
-      requestAnimationFrame(() => {
-        this.open = true;
-      });
-    };
-    /** 다이얼로그를 숨깁니다 */
-    this.hide = async () => {
-      await this.updateComplete;
-      requestAnimationFrame(() => {
-        this.open = false;
-      });
-    };
-    /** 오버레이 클릭 핸들러 */
-    this.handleBackdropClick = (e) => {
-      if (e.target === this) {
-        if (this.closable) {
-          this.hide();
-        } else {
-          this.shake();
-        }
-      }
-    };
-    /** 키보드 이벤트 핸들러 */
-    this.handleKeydown = (e) => {
-      if (e.key === "Escape" && this.open) {
-        e.preventDefault();
-        if (this.closable) {
-          this.hide();
-        } else {
-          this.shake();
-        }
-      }
-    };
-    /** 포커스 트랩 핸들러 */
-    this.handleFocusin = (e) => {
-      if (!this.modal || !this.open) return;
-      const target = e.target;
-      if (!this.contains(target)) {
-        e.preventDefault();
-        this.dialogEl.focus();
-      }
-    };
-  }
-  static {
-    this.styles = [super.styles, styles];
-  }
-  static {
-    this.dependencies = {
-      "u-icon-button": IconButton
-    };
-  }
-  connectedCallback() {
-    super.connectedCallback();
-    this.addEventListener("click", this.handleBackdropClick);
-  }
-  disconnectedCallback() {
-    window.removeEventListener("keydown", this.handleKeydown);
-    window.removeEventListener("focusin", this.handleFocusin);
-    super.disconnectedCallback();
-  }
-  updated(changedProperties) {
-    super.updated(changedProperties);
-    if (changedProperties.has("open")) {
-      this.updateOpenState(this.open);
-    }
-    if (changedProperties.has("modal")) {
-      this.updateModalState(this.modal);
-    }
-  }
-  render() {
-    return html`
-      <div class="dialog scrollable" part="base" tabindex="-1">
-        
-        ${this.heading ? html`
-            <div class="header" part="header">
-              <span class="title" part="title">
-                ${this.heading}
-              </span>
-              <u-icon-button class="close-btn" part="close-btn"
-                lib="internal" 
-                name="x-lg"
-                borderless
-                @click=${() => this.hide()}
-              ></u-icon-button>
-            </div>` : nothing}
-
-        <slot></slot>
-      
-      </div>
-    `;
-  }
-  /** 패널을 흔드는 애니메이션을 재생합니다 */
-  shake() {
-    this.dialogEl.classList.add("shake");
-    setTimeout(() => {
-      this.dialogEl.classList.remove("shake");
-    }, 500);
-  }
-  updateOpenState(open) {
-    if (open) {
-      this.emit("u-show");
-      document.body.style.overflow = this.modal ? "hidden" : "";
-    } else {
-      this.emit("u-hide");
-      document.body.style.overflow = "";
-    }
-  }
-  updateModalState(modal) {
-    if (modal) {
-      window.addEventListener("keydown", this.handleKeydown);
-      window.addEventListener("focusin", this.handleFocusin);
-      document.body.style.overflow = this.open ? "hidden" : "";
-    } else {
-      window.removeEventListener("keydown", this.handleKeydown);
-      window.removeEventListener("focusin", this.handleFocusin);
-      document.body.style.overflow = "";
-    }
-  }
-}
-__decorateClass([
-  query(".dialog")
-], Dialog.prototype, "dialogEl");
-__decorateClass([
-  property({ type: Boolean, reflect: true })
-], Dialog.prototype, "modal");
-__decorateClass([
-  property({ type: Boolean, reflect: true })
-], Dialog.prototype, "open");
-__decorateClass([
-  property({ type: Boolean })
-], Dialog.prototype, "closable");
-__decorateClass([
-  property({ type: String })
-], Dialog.prototype, "heading");
-
-export { Dialog };

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

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

package/dist/components/dialog/index.js

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

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

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

package/dist/components/divider/index.js

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

package/dist/components/dropdown-menu/DropdownMenu.d.ts

@@ -1,27 +0,0 @@
-import { PropertyValues } from 'lit';
-import { BaseElement } from '../BaseElement.js';
-import { FloatingElement } from '../FloatingElement.js';
-export declare class DropdownMenu extends FloatingElement {
-    static styles: import('lit').CSSResultGroup[];
-    static dependencies: Record<string, typeof BaseElement>;
-    closeOnSelect: boolean;
-    closeOnCheck: boolean;
-    private onDocPointerDown;
-    private onWindowBlur;
-    private get menu();
-    connectedCallback(): void;
-    disconnectedCallback(): void;
-    protected updated(changed: PropertyValues): void;
-    render(): import('lit-html').TemplateResult<1>;
-    show: () => Promise<void>;
-    hide: () => Promise<void>;
-    private attachAnchor;
-    private detachAnchor;
-    private onTriggerPointerDown;
-    private onTriggerKeydown;
-    private onSelect;
-    private onCheck;
-    private onRequestClose;
-    private attachDismiss;
-    private detachDismiss;
-}

package/dist/components/dropdown-menu/DropdownMenu.js

@@ -1,135 +0,0 @@
-import { html } from 'lit';
-import { property } from 'lit/decorators.js';
-import { FloatingElement } from '../FloatingElement.js';
-import { Menu } from '../menu/Menu.js';
-import { MenuItem } from '../menu-item/MenuItem.js';
-import { styles } from './DropdownMenu.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 DropdownMenu extends FloatingElement {
-  constructor() {
-    super(...arguments);
-    this.closeOnSelect = true;
-    this.closeOnCheck = false;
-    this.onDocPointerDown = (e) => {
-      if (!this.visible) return;
-      const path = e.composedPath();
-      if (path.includes(this)) return;
-      if (this.anchor && path.includes(this.anchor)) return;
-      this.hide();
-    };
-    this.onWindowBlur = () => {
-      if (this.visible) this.hide();
-    };
-    this.show = async () => {
-      this.menu && (this.menu.open = true);
-      await super.show();
-      await this.menu?.focusFirstItem?.();
-    };
-    this.hide = async () => {
-      await super.hide();
-      this.menu && (this.menu.open = false);
-      this.querySelectorAll("u-menu-item").forEach((i) => i.closeSubmenu?.());
-    };
-    this.onTriggerPointerDown = async (e) => {
-      if (e.button !== 0) return;
-      if (this.visible) await this.hide();
-      else await this.show();
-    };
-    this.onTriggerKeydown = async (e) => {
-      if (e.key === "ArrowDown" || e.key === "Enter" || e.key === " ") {
-        e.preventDefault();
-        if (!this.visible) await this.show();
-      }
-    };
-    this.onSelect = async () => {
-      if (this.closeOnSelect) await this.hide();
-    };
-    this.onCheck = async () => {
-      if (this.closeOnCheck) await this.hide();
-    };
-    this.onRequestClose = async () => {
-      await this.hide();
-    };
-  }
-  static {
-    this.styles = [super.styles, styles];
-  }
-  static {
-    this.dependencies = {
-      "u-menu": Menu,
-      "u-menu-item": MenuItem
-    };
-  }
-  get menu() {
-    return this.querySelector("u-menu");
-  }
-  connectedCallback() {
-    super.connectedCallback();
-    this.placement ||= "bottom-start";
-    this.distance ||= 6;
-    this.addEventListener("u-select", this.onSelect);
-    this.addEventListener("u-check", this.onCheck);
-    this.addEventListener("u-request-close", this.onRequestClose);
-  }
-  disconnectedCallback() {
-    this.detachAnchor(this.anchor);
-    this.detachDismiss();
-    this.removeEventListener("u-select", this.onSelect);
-    this.removeEventListener("u-check", this.onCheck);
-    this.removeEventListener("u-request-close", this.onRequestClose);
-    super.disconnectedCallback();
-  }
-  updated(changed) {
-    super.updated(changed);
-    if (changed.has("anchor")) {
-      this.detachAnchor(changed.get("anchor"));
-      this.attachAnchor(this.anchor);
-    }
-    if (changed.has("visible")) {
-      if (this.visible) this.attachDismiss();
-      else this.detachDismiss();
-      if (this.anchor) {
-        this.anchor.setAttribute("aria-expanded", this.visible ? "true" : "false");
-      }
-    }
-  }
-  render() {
-    return html`<slot></slot>`;
-  }
-  attachAnchor(target) {
-    if (!target) return;
-    target.setAttribute("aria-haspopup", "menu");
-    target.addEventListener("pointerdown", this.onTriggerPointerDown);
-    target.addEventListener("keydown", this.onTriggerKeydown);
-  }
-  detachAnchor(target) {
-    if (!target) return;
-    target.removeEventListener("pointerdown", this.onTriggerPointerDown);
-    target.removeEventListener("keydown", this.onTriggerKeydown);
-  }
-  attachDismiss() {
-    document.addEventListener("pointerdown", this.onDocPointerDown, true);
-    window.addEventListener("blur", this.onWindowBlur);
-  }
-  detachDismiss() {
-    document.removeEventListener("pointerdown", this.onDocPointerDown, true);
-    window.removeEventListener("blur", this.onWindowBlur);
-  }
-}
-__decorateClass([
-  property({ type: Boolean })
-], DropdownMenu.prototype, "closeOnSelect");
-__decorateClass([
-  property({ type: Boolean })
-], DropdownMenu.prototype, "closeOnCheck");
-
-export { DropdownMenu };

package/dist/components/dropdown-menu/DropdownMenu.styles.js

@@ -1,15 +0,0 @@
-import { css } from 'lit';
-
-const styles = css`
-  :host {
-    opacity: 0;
-    transform: scale(0.98);
-    transition: opacity 0.12s ease, transform 0.12s ease;
-  }
-  :host([visible]) {
-    opacity: 1;        /* FloatingElement의 0.8을 덮어씀 */
-    transform: scale(1);
-  }
-`;
-
-export { styles };

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

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

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

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

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

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

package/dist/components/form/index.js

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

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

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

package/dist/components/icon/index.js

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

package/dist/components/icon-button/index.d.ts

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

package/dist/components/icon-button/index.js

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

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