@iyulab/components 0.1.7 → 0.1.8

package/dist/components/context-menu/ContextMenu.js

@@ -1,148 +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 './ContextMenu.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 ContextMenu extends FloatingElement {
-  constructor() {
-    super(...arguments);
-    this.preventNative = true;
-    this.closeOnSelect = true;
-    this.closeOnCheck = false;
-    this.onContextMenu = async (e) => {
-      if (this.preventNative) e.preventDefault();
-      this.menu && (this.menu.open = true);
-      const virtual = {
-        getBoundingClientRect: () => ({
-          x: e.clientX,
-          y: e.clientY,
-          top: e.clientY,
-          left: e.clientX,
-          right: e.clientX,
-          bottom: e.clientY,
-          width: 0,
-          height: 0,
-          toJSON() {
-            return {};
-          }
-        })
-      };
-      await super.show(virtual);
-      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.onDocPointerDown = (e) => {
-      if (!this.visible) return;
-      const path = e.composedPath();
-      if (path.includes(this)) return;
-      this.hide();
-    };
-    this.onWindowBlur = () => {
-      if (this.visible) this.hide();
-    };
-    this.onWindowScrollOrResize = () => {
-      if (this.visible) this.hide();
-    };
-    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.strategy = "fixed";
-    this.placement ||= "bottom-start";
-    this.distance ||= 4;
-    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();
-    }
-  }
-  render() {
-    return html`<slot></slot>`;
-  }
-  /** 컨텍스트 메뉴는 Virtual anchor를 쓰므로 autoUpdate는 꺼버림 */
-  autoPosition(_enable) {
-  }
-  attachAnchor(target) {
-    if (!target) return;
-    target.addEventListener("contextmenu", this.onContextMenu);
-  }
-  detachAnchor(target) {
-    if (!target) return;
-    target.removeEventListener("contextmenu", this.onContextMenu);
-  }
-  attachDismiss() {
-    document.addEventListener("pointerdown", this.onDocPointerDown, true);
-    window.addEventListener("blur", this.onWindowBlur);
-    window.addEventListener("scroll", this.onWindowScrollOrResize, true);
-    window.addEventListener("resize", this.onWindowScrollOrResize);
-  }
-  detachDismiss() {
-    document.removeEventListener("pointerdown", this.onDocPointerDown, true);
-    window.removeEventListener("blur", this.onWindowBlur);
-    window.removeEventListener("scroll", this.onWindowScrollOrResize, true);
-    window.removeEventListener("resize", this.onWindowScrollOrResize);
-  }
-}
-__decorateClass([
-  property({ type: Boolean })
-], ContextMenu.prototype, "preventNative");
-__decorateClass([
-  property({ type: Boolean })
-], ContextMenu.prototype, "closeOnSelect");
-__decorateClass([
-  property({ type: Boolean })
-], ContextMenu.prototype, "closeOnCheck");
-
-export { ContextMenu };

package/dist/components/context-menu/ContextMenu.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;
-    transform: scale(1);
-  }
-`;
-
-export { styles };

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

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

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

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

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