@iyulab/components 0.1.7 → 0.1.9

package/dist/components/button/{Button.js → UButton.component.js}

@@ -1,8 +1,8 @@
 import { html } from 'lit';
 import { property } from 'lit/decorators.js';
 import { BaseElement } from '../BaseElement.js';
-import { Spinner } from '../spinner/Spinner.js';
-import { styles } from './Button.styles.js';
+import { USpinner } from '../spinner/USpinner.component.js';
+import { styles } from './UButton.styles.js';
 
 var __defProp = Object.defineProperty;
 var __decorateClass = (decorators, target, key, kind) => {
@@ -13,7 +13,7 @@ var __decorateClass = (decorators, target, key, kind) => {
   if (result) __defProp(target, key, result);
   return result;
 };
-class Button extends BaseElement {
+class UButton extends BaseElement {
   constructor() {
     super(...arguments);
     this.disabled = false;
@@ -24,7 +24,7 @@ class Button extends BaseElement {
   }
   static {
     this.dependencies = {
-      "u-spinner": Spinner
+      "u-spinner": USpinner
     };
   }
   render() {
@@ -45,9 +45,9 @@ class Button extends BaseElement {
 }
 __decorateClass([
   property({ type: Boolean, reflect: true })
-], Button.prototype, "disabled");
+], UButton.prototype, "disabled");
 __decorateClass([
   property({ type: Boolean, reflect: true })
-], Button.prototype, "loading");
+], UButton.prototype, "loading");
 
-export { Button };
+export { UButton };

package/dist/components/button/UButton.d.ts

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

package/dist/components/button/UButton.js

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

package/dist/components/dialog/UDialog.component.d.ts

@@ -0,0 +1,15 @@
+import { BaseElement } from '../BaseElement.js';
+import { ModalElement } from '../ModalElement.js';
+/**
+ * Dialog 컴포넌트는 모달 대화상자를 제공합니다.
+ * 오버레이와 함께 화면 중앙에 표시되며, 헤더, 본문, 푸터 영역을 슬롯으로 제공합니다.
+ */
+export declare class UDialog extends ModalElement {
+    static styles: import('lit').CSSResultGroup[];
+    static dependencies: Record<string, typeof BaseElement>;
+    /** 타이틀 텍스트 */
+    heading: string;
+    render(): import('lit-html').TemplateResult<1>;
+    /** block시 진동 효과를 적용합니다. */
+    protected block(): Promise<void>;
+}

package/dist/components/dialog/UDialog.component.js

@@ -0,0 +1,65 @@
+import { html } from 'lit';
+import { property } from 'lit/decorators.js';
+import { ModalElement } from '../ModalElement.js';
+import { UIconButton } from '../icon-button/UIconButton.component.js';
+import { styles } from './UDialog.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 UDialog extends ModalElement {
+  constructor() {
+    super(...arguments);
+    this.heading = "";
+  }
+  static {
+    this.styles = [super.styles, styles];
+  }
+  static {
+    this.dependencies = {
+      "u-icon-button": UIconButton
+    };
+  }
+  render() {
+    return html`
+      <div class="dialog" part="base" ?open=${this.open}>
+        <div class="header" part="header" ?hidden=${!this.heading}>
+          <span class="title" part="title">
+            ${this.heading}
+          </span>
+          <u-icon-button class="close-btn" part="close-btn"
+            borderless  
+            lib="internal"
+            name="x-lg"
+            @click=${() => this.hide()}
+          ></u-icon-button>
+        </div>
+
+        <div class="content" part="content" scrollable>
+          <slot></slot>
+        </div>
+      </div>
+    `;
+  }
+  /** block시 진동 효과를 적용합니다. */
+  async block() {
+    await super.block();
+    const dialogEl = this.renderRoot.querySelector(".dialog");
+    if (!dialogEl) return;
+    dialogEl.setAttribute("shake", "");
+    setTimeout(() => {
+      dialogEl.removeAttribute("shake");
+    }, 500);
+  }
+}
+__decorateClass([
+  property({ type: String })
+], UDialog.prototype, "heading");
+
+export { UDialog };

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

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

package/dist/components/dialog/UDialog.js

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

package/dist/components/dialog/{Dialog.styles.js → UDialog.styles.js}

@@ -2,25 +2,9 @@ import { css } from 'lit';
 
 const styles = css`
   :host {
-    position: fixed;
-    z-index: 9999;
-    top: 0;
-    bottom: 0;
-    left: 0;
-    right: 0;
     display: flex;
     align-items: center;
     justify-content: center;
-    background: transparent;
-    visibility: hidden;
-    pointer-events: none;
-  }
-  :host([open]) {
-    visibility: visible;
-    pointer-events: auto;
-  }
-  :host([modal]) {
-    background: var(--u-overlay-bg-color);
   }
 
   .dialog {
@@ -31,11 +15,17 @@ const styles = css`
     padding: 20px;
     border: 1px solid var(--u-border-color);
     border-radius: 6px;
-    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
     background: var(--u-panel-bg-color);
-    overflow: auto;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
+    opacity: 0;
+    transform: scale(0.9);
+    transition: opacity 0.3s ease, transform 0.3s ease;
+  }
+  .dialog[open] {
+    opacity: 1;
+    transform: scale(1);
   }
-  .dialog.shake {
+  .dialog[shake] {
     animation: shake 0.5s cubic-bezier(0.36, 0.07, 0.19, 0.97);
   }
 
@@ -52,16 +42,11 @@ const styles = css`
     font-weight: 600;
   }
 
-  /* 페이드 인 및 스케일 업 애니메이션 */
-  @keyframes fadeout {
-    0% {
-      opacity: 0;
-      transform: scale(0.9);
-    }
-    100% {
-      opacity: 1;
-      transform: scale(1);
-    }
+  .content {
+    display: block;
+    max-width: calc(90vw - 40px);
+    max-height: calc(90vh - 100px);
+    overflow: auto;
   }
 
   /* 진동 애니메이션 */

package/dist/components/divider/{Divider.d.ts → UDivider.component.d.ts}

@@ -3,7 +3,7 @@ import { BaseElement } from '../BaseElement.js';
 /**
  * Divider 컴포넌트는 엘리먼트 사이에 움직임이 가능한 구분선을 제공합니다.
  */
-export declare class Divider extends BaseElement {
+export declare class UDivider extends BaseElement {
     static styles: import('lit').CSSResultGroup[];
     static dependencies: Record<string, typeof BaseElement>;
     /** 마지막 마우스 포인터 위치를 저장합니다. */

package/dist/components/divider/{Divider.js → UDivider.component.js}

@@ -1,7 +1,7 @@
 import { html, nothing } from 'lit';
 import { state, property } from 'lit/decorators.js';
 import { BaseElement } from '../BaseElement.js';
-import { styles } from './Divider.styles.js';
+import { styles } from './UDivider.styles.js';
 
 var __defProp = Object.defineProperty;
 var __decorateClass = (decorators, target, key, kind) => {
@@ -12,7 +12,7 @@ var __decorateClass = (decorators, target, key, kind) => {
   if (result) __defProp(target, key, result);
   return result;
 };
-class Divider extends BaseElement {
+class UDivider extends BaseElement {
   constructor() {
     super(...arguments);
     /** 마지막 마우스 포인터 위치를 저장합니다. */
@@ -78,12 +78,12 @@ class Divider extends BaseElement {
 }
 __decorateClass([
   state()
-], Divider.prototype, "moving");
+], UDivider.prototype, "moving");
 __decorateClass([
   property({ type: String, reflect: true })
-], Divider.prototype, "orientation");
+], UDivider.prototype, "orientation");
 __decorateClass([
   property({ type: Boolean, reflect: true })
-], Divider.prototype, "movable");
+], UDivider.prototype, "movable");
 
-export { Divider };
+export { UDivider };

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

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

package/dist/components/divider/UDivider.js

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

package/dist/components/drawer/UDrawer.component.d.ts

@@ -0,0 +1,16 @@
+import { BaseElement } from '../BaseElement.js';
+import { ModalElement } from '../ModalElement.js';
+export type DrawerPlacement = 'left' | 'right' | 'top' | 'bottom';
+/**
+ * Drawer 컴포넌트는 화면 가장자리에서 슬라이드하여 나타나는 패널을 제공합니다.
+ * 네비게이션, 설정 패널, 상세 정보 표시 등에 사용됩니다.
+ */
+export declare class UDrawer extends ModalElement {
+    static styles: import('lit').CSSResultGroup[];
+    static dependencies: Record<string, typeof BaseElement>;
+    /** 드로어가 나타나는 위치 */
+    placement: DrawerPlacement;
+    /** 타이틀 텍스트 */
+    heading: string;
+    render(): import('lit-html').TemplateResult<1>;
+}

package/dist/components/drawer/UDrawer.component.js

@@ -0,0 +1,59 @@
+import { html } from 'lit';
+import { property } from 'lit/decorators.js';
+import { ModalElement } from '../ModalElement.js';
+import { UIconButton } from '../icon-button/UIconButton.component.js';
+import { styles } from './UDrawer.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 UDrawer extends ModalElement {
+  constructor() {
+    super(...arguments);
+    this.placement = "left";
+    this.heading = "";
+  }
+  static {
+    this.styles = [super.styles, styles];
+  }
+  static {
+    this.dependencies = {
+      "u-icon-button": UIconButton
+    };
+  }
+  render() {
+    return html`
+      <div class="drawer" part="base" ?open=${this.open} placement=${this.placement}>
+        <div class="header" part="header" ?hidden=${!this.heading}>
+          <span class="title" part="title">
+            ${this.heading}
+          </span>
+          <u-icon-button class="close-btn" part="close-btn"
+            borderless  
+            lib="internal" 
+            name="x-lg"
+            @click=${() => this.hide()}
+          ></u-icon-button>
+        </div>
+
+        <div class="content" part="content" scrollable>
+          <slot></slot>
+        </div>
+      </div>
+    `;
+  }
+}
+__decorateClass([
+  property({ type: String, reflect: true })
+], UDrawer.prototype, "placement");
+__decorateClass([
+  property({ type: String })
+], UDrawer.prototype, "heading");
+
+export { UDrawer };

package/dist/components/drawer/UDrawer.d.ts

@@ -0,0 +1,8 @@
+import { UDrawer } from './UDrawer.component.js';
+declare global {
+    interface HTMLElementTagNameMap {
+        'u-drawer': UDrawer;
+    }
+}
+export { UDrawer };
+export type { DrawerPlacement } from './UDrawer.component.js';

package/dist/components/drawer/UDrawer.js

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

package/dist/components/drawer/UDrawer.styles.js

@@ -0,0 +1,82 @@
+import { css } from 'lit';
+
+const styles = css`
+  :host {
+    display: flex;
+    align-items: stretch;
+  }
+  :host([placement="left"]) {
+    flex-direction: row;
+    justify-content: flex-start;
+  }
+  :host([placement="right"]) {
+    flex-direction: row;
+    justify-content: flex-end;
+  }
+  :host([placement="top"]) {
+    flex-direction: column;
+    justify-content: flex-start;
+  }
+  :host([placement="bottom"]) {
+    flex-direction: column;
+    justify-content: flex-end;
+  }
+
+  .drawer {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    max-width: 100vw;
+    max-height: 100vh;
+    padding: 20px;
+    background: var(--u-panel-bg-color);
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
+    transition: transform 0.3s ease;
+  }
+  .drawer[placement="left"] {
+    border-right: 1px solid var(--u-border-color);
+    transform: translateX(-100%);
+  }
+  .drawer[placement="right"] {
+    border-left: 1px solid var(--u-border-color);
+    transform: translateX(100%);
+  }
+  .drawer[placement="top"] {
+    border-bottom: 1px solid var(--u-border-color);
+    transform: translateY(-100%);
+  }
+  .drawer[placement="bottom"] {
+    border-top: 1px solid var(--u-border-color);
+    transform: translateY(100%);
+  }
+  .drawer[open][placement="left"],
+  .drawer[open][placement="right"] {
+    transform: translateX(0);
+  }
+  .drawer[open][placement="top"],
+  .drawer[open][placement="bottom"] {
+    transform: translateY(0);
+  }
+
+  .header {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+    font-size: 20px;
+    margin-bottom: 20px;
+  }
+  .header .title {
+    line-height: 1.2;
+    font-weight: 600;
+  }
+
+  .content {
+    display: block;
+    max-width: calc(100vw - 40px);
+    max-height: calc(100vh - 100px);
+    overflow: auto;
+  }
+`;
+
+export { styles };

package/dist/components/form/{Form.d.ts → UForm.component.d.ts}

@@ -3,7 +3,7 @@ import { BaseElement } from '../BaseElement.js';
  * Form 컴포넌트는 여러 입력 요소를 그룹화하고 관리하는 폼 컨테이너입니다.
  * 폼 내의 입력 요소들의 값 변경을 감지하고, 포함 및 제외 규칙에 따라 폼 컨텍스트에 데이터를 자동으로 업데이트합니다.
  */
-export declare class Form extends BaseElement {
+export declare class UForm extends BaseElement {
     static styles: import('lit').CSSResultGroup[];
     static dependencies: Record<string, typeof BaseElement>;
     /** 포함할 입력 요소의 name 속성 목록입니다. */
@@ -20,5 +20,5 @@ export declare class Form extends BaseElement {
      */
     validate(): boolean;
     /** 입력 요소의 변경 이벤트를 처리합니다. */
-    private handleChange;
+    private handleInputChange;
 }

package/dist/components/form/{Form.js → UForm.component.js}

@@ -2,8 +2,8 @@ import { html } from 'lit';
 import { property } from 'lit/decorators.js';
 import { arrayAttributeConverter } from '../../internals/attribute-converters.js';
 import { BaseElement } from '../BaseElement.js';
-import { Input } from '../input/Input.js';
-import { styles } from './Form.styles.js';
+import { UInput } from '../input/UInput.component.js';
+import { styles } from './UForm.styles.js';
 
 var __defProp = Object.defineProperty;
 var __decorateClass = (decorators, target, key, kind) => {
@@ -14,13 +14,13 @@ var __decorateClass = (decorators, target, key, kind) => {
   if (result) __defProp(target, key, result);
   return result;
 };
-class Form extends BaseElement {
+class UForm extends BaseElement {
   constructor() {
     super(...arguments);
     this.includes = [];
     this.excludes = [];
     /** 입력 요소의 변경 이벤트를 처리합니다. */
-    this.handleChange = (e) => {
+    this.handleInputChange = (e) => {
       const input = e.target;
       const name = input.name;
       const value = input.value;
@@ -40,10 +40,10 @@ class Form extends BaseElement {
   }
   connectedCallback() {
     super.connectedCallback();
-    this.addEventListener("change", this.handleChange);
+    this.addEventListener("change", this.handleInputChange);
   }
   disconnectedCallback() {
-    this.removeEventListener("change", this.handleChange);
+    this.removeEventListener("change", this.handleInputChange);
     super.disconnectedCallback();
   }
   render() {
@@ -56,19 +56,21 @@ class Form extends BaseElement {
    */
   validate() {
     const slot = this.shadowRoot?.querySelector("slot");
-    const inputEls = slot?.assignedElements({ flatten: true }).filter((el) => el instanceof Input) || [];
-    const isValid = Array.from(inputEls).every((input) => input.validate());
+    const elements = slot?.assignedElements({ flatten: true }).filter((el) => el instanceof UInput);
+    if (!elements) return true;
+    if (elements.length === 0) return true;
+    const isValid = Array.from(elements).every((input) => input.validate());
     return isValid;
   }
 }
 __decorateClass([
   property({ type: Array, converter: arrayAttributeConverter((v) => v) })
-], Form.prototype, "includes");
+], UForm.prototype, "includes");
 __decorateClass([
   property({ type: Array, converter: arrayAttributeConverter((v) => v) })
-], Form.prototype, "excludes");
+], UForm.prototype, "excludes");
 __decorateClass([
   property({ type: Object, attribute: false })
-], Form.prototype, "context");
+], UForm.prototype, "context");
 
-export { Form };
+export { UForm };

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

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

package/dist/components/form/UForm.js

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

package/dist/components/icon/{Icon.d.ts → UIcon.component.d.ts}

@@ -1,18 +1,19 @@
 import { BaseElement } from '../BaseElement.js';
+export type IconLibrary = "internal" | "default" | (string & {});
 /**
  * 아이콘 컴포넌트입니다. SVG 아이콘을 이름으로 불러와서 렌더링합니다.
  */
-export declare class Icon extends BaseElement {
+export declare class UIcon extends BaseElement {
     static styles: import('lit').CSSResultGroup[];
     static dependencies: Record<string, typeof BaseElement>;
     /**
      * 사용할 아이콘 라이브러리를 지정합니다.
+     * - 기본 내장 라이브러리: `internal`, `default`
+     * - 사용자 확장 라이브러리: `icons.register()`로 등록한 라이브러리 이름
      *
-     * - 기본 내장: "internal" | "default"
-     * - 사용자 확장 라이브러리: icons.register()로 등록한 라이브러리 이름
      * @default "default"
      */
-    library: "internal" | "default" | (string & {});
+    lib: IconLibrary;
     /**
      * 사용할 아이콘의 이름을 지정합니다.
      */

package/dist/components/icon/{Icon.js → UIcon.component.js}

@@ -4,7 +4,7 @@ import { unsafeHTML } from 'lit/directives/unsafe-html.js';
 import { until } from 'lit/directives/until.js';
 import { BaseElement } from '../BaseElement.js';
 import { icons } from '../../utilities/icons.js';
-import { styles } from './Icon.styles.js';
+import { styles } from './UIcon.styles.js';
 
 var __defProp = Object.defineProperty;
 var __decorateClass = (decorators, target, key, kind) => {
@@ -15,10 +15,10 @@ var __decorateClass = (decorators, target, key, kind) => {
   if (result) __defProp(target, key, result);
   return result;
 };
-class Icon extends BaseElement {
+class UIcon extends BaseElement {
   constructor() {
     super(...arguments);
-    this.library = "default";
+    this.lib = "default";
   }
   static {
     this.styles = [super.styles, styles];
@@ -27,9 +27,8 @@ class Icon extends BaseElement {
     this.dependencies = {};
   }
   render() {
-    if (!this.name) return nothing;
-    console.log(this.library, this.name, "icon render");
-    return until(icons.resolve(this.library, this.name).then((html) => {
+    if (!this.lib || !this.name) return nothing;
+    return until(icons.resolve(this.lib, this.name).then((html) => {
       return this.validate(html) ? unsafeHTML(html) : nothing;
     }), nothing);
   }
@@ -49,10 +48,10 @@ class Icon extends BaseElement {
   }
 }
 __decorateClass([
-  property({ type: String, attribute: "lib" })
-], Icon.prototype, "library");
+  property({ type: String })
+], UIcon.prototype, "lib");
 __decorateClass([
   property({ type: String })
-], Icon.prototype, "name");
+], UIcon.prototype, "name");
 
-export { Icon };
+export { UIcon };

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

@@ -0,0 +1,8 @@
+import { UIcon } from './UIcon.component.js';
+declare global {
+    interface HTMLElementTagNameMap {
+        "u-icon": UIcon;
+    }
+}
+export { UIcon };
+export type { IconLibrary } from './UIcon.component.js';

package/dist/components/icon/UIcon.js

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

package/dist/components/icon-button/{IconButton.d.ts → UIconButton.component.d.ts}

@@ -1,8 +1,9 @@
 import { BaseElement } from '../BaseElement.js';
+import { IconLibrary } from '../icon/UIcon.component.js';
 /**
  * IconButton 컴포넌트는 아이콘만 표시하는 버튼입니다.
  */
-export declare class IconButton extends BaseElement {
+export declare class UIconButton extends BaseElement {
     static styles: import('lit').CSSResultGroup[];
     static dependencies: Record<string, typeof BaseElement>;
     /** 경계선이 없는 스타일을 적용합니다. */
@@ -12,7 +13,7 @@ export declare class IconButton extends BaseElement {
     /** 버튼이 로딩 상태인지 여부를 설정합니다. 로딩 중에는 버튼이 비활성화되고 스피너가 표시됩니다. */
     loading: boolean;
     /** 아이콘 라이브러리를 지정합니다. */
-    library: "internal" | "default" | (string & {});
+    lib: IconLibrary;
     /** 아이콘의 이름을 지정합니다. */
     name?: string;
     render(): import('lit-html').TemplateResult<1>;