@iyulab/components 0.1.4 → 0.1.6

package/dist/components/form/Form.js

@@ -51,7 +51,9 @@ class Form extends BaseElement {
       <slot></slot>
     `;
   }
-  /** 폼 내의 모든 입력 요소를 검증합니다. */
+  /** 
+   * 폼 내의 모든 입력 요소를 검증합니다. 
+   */
   validate() {
     const slot = this.shadowRoot?.querySelector("slot");
     const inputEls = slot?.assignedElements({ flatten: true }).filter((el) => el instanceof Input) || [];

package/dist/components/form/Form.styles.js

@@ -12,6 +12,7 @@ const styles = css`
 
   :host * {
     width: 100%;
+    font-size: inherit;
   }
 `;
 

package/dist/components/form/index.js

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

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

@@ -6,24 +6,18 @@ export declare class Icon extends BaseElement {
     static styles: import('lit').CSSResultGroup[];
     static dependencies: Record<string, typeof BaseElement>;
     /**
-     * 아이콘을 원격 경로에서 로드할지 여부입니다.
-     * - `false`(기본): 번들된 내부 아이콘 레지스트리(`iconBundle`)에서 아이콘을 찾습니다.
-     * - `true`       : `getBaseUrl()`을 기준으로 원격 SVG 파일을 fetch 합니다.
-     * @default false
+     * 사용할 아이콘 라이브러리를 지정합니다.
+     *
+     * - 기본 내장: "internal" | "default"
+     * - 사용자 확장 라이브러리: icons.register()로 등록한 라이브러리 이름
+     * @default "default"
      */
-    remote: boolean;
+    library: "internal" | "default" | (string & {});
     /**
      * 사용할 아이콘의 이름을 지정합니다.
-     * @description 외부에서 불러오는 SVG 아이콘인 경우, 이름은 파일명(확장자 제외)이어야 합니다.
      */
     name?: string;
     render(): import('lit-html/directive.js').DirectiveResult<typeof import('lit-html/directives/until.js').UntilDirective>;
-    /**
-     * 아이콘의 HTML 콘텐츠를 가져옵니다.
-     * 외부 아이콘 경로를 사용하거나, 내부 레지스트리에서 아이콘을 찾습니다.
-     * @param name 아이콘 이름
-     */
-    private load;
     /**
      * SVG 콘텐츠가 유효한 HTML인지 검사합니다.
      */

package/dist/components/icon/Icon.js

@@ -3,7 +3,7 @@ import { property } from 'lit/decorators.js';
 import { unsafeHTML } from 'lit/directives/unsafe-html.js';
 import { until } from 'lit/directives/until.js';
 import { BaseElement } from '../BaseElement.js';
-import { getBaseUrl, iconBundle } from '../../internals/icon-helpers.js';
+import { icons } from '../../utilities/icons.js';
 import { styles } from './Icon.styles.js';
 
 var __defProp = Object.defineProperty;
@@ -18,7 +18,7 @@ var __decorateClass = (decorators, target, key, kind) => {
 class Icon extends BaseElement {
   constructor() {
     super(...arguments);
-    this.remote = false;
+    this.library = "default";
   }
   static {
     this.styles = [super.styles, styles];
@@ -28,44 +28,29 @@ class Icon extends BaseElement {
   }
   render() {
     if (!this.name) return nothing;
-    return until(this.load(this.name).then((html) => {
-      if (!this.validate(html)) return nothing;
-      return unsafeHTML(html);
+    console.log(this.library, this.name, "icon render");
+    return until(icons.resolve(this.library, this.name).then((html) => {
+      return this.validate(html) ? unsafeHTML(html) : nothing;
     }), nothing);
   }
-  /**
-   * 아이콘의 HTML 콘텐츠를 가져옵니다.
-   * 외부 아이콘 경로를 사용하거나, 내부 레지스트리에서 아이콘을 찾습니다.
-   * @param name 아이콘 이름
-   */
-  async load(name) {
-    if (this.remote) {
-      const baseUrl = getBaseUrl();
-      const remoteUrl = baseUrl.endsWith("/") ? `${baseUrl}${name}.svg` : `${baseUrl}/${name}.svg`;
-      try {
-        const response = await fetch(remoteUrl);
-        if (!response.ok) return void 0;
-        return (await response.text())?.trim();
-      } catch (error) {
-        console.error(error);
-        return void 0;
-      }
-    } else {
-      return iconBundle.get(name)?.trim();
-    }
-  }
   /**
    * SVG 콘텐츠가 유효한 HTML인지 검사합니다.
    */
   validate(html) {
     if (!html) return false;
-    if (!html.endsWith("</svg>")) return false;
-    return true;
+    const trimmed = html.trim();
+    try {
+      const doc = new DOMParser().parseFromString(trimmed, "image/svg+xml");
+      if (doc.querySelector("parsererror")) return false;
+      return doc.documentElement?.tagName.toLowerCase() === "svg";
+    } catch {
+      return false;
+    }
   }
 }
 __decorateClass([
-  property({ type: Boolean })
-], Icon.prototype, "remote");
+  property({ type: String, attribute: "lib" })
+], Icon.prototype, "library");
 __decorateClass([
   property({ type: String })
 ], Icon.prototype, "name");

package/dist/components/icon/Icon.styles.js

@@ -3,8 +3,8 @@ import { css } from 'lit';
 const styles = css`
   :host {
     display: inline-flex;
-    font-size: inherit;
     color: var(--u-icon-color, currentColor);
+    font-size: inherit;
   }
 
   svg {

package/dist/components/icon/index.js

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

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

@@ -5,14 +5,14 @@ import { BaseElement } from '../BaseElement.js';
 export declare class IconButton extends BaseElement {
     static styles: import('lit').CSSResultGroup[];
     static dependencies: Record<string, typeof BaseElement>;
-    /** 경계선이 없는 버튼 스타일을 적용합니다. */
+    /** 경계선이 없는 스타일을 적용합니다. */
     borderless: boolean;
     /** 버튼이 비활성화 상태인지 여부를 설정합니다. 비활성화된 버튼은 클릭할 수 없습니다. */
     disabled: boolean;
     /** 버튼이 로딩 상태인지 여부를 설정합니다. 로딩 중에는 버튼이 비활성화되고 스피너가 표시됩니다. */
     loading: boolean;
-    /** 아이콘을 외부에서 불러와야 하는지 여부를 설정합니다. */
-    remote: boolean;
+    /** 아이콘 라이브러리를 지정합니다. */
+    library: "internal" | "default" | (string & {});
     /** 아이콘의 이름을 지정합니다. */
     name?: string;
     render(): import('lit-html').TemplateResult<1>;

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

@@ -1,6 +1,5 @@
 import { html } from 'lit';
 import { property } from 'lit/decorators.js';
-import { ifDefined } from 'lit/directives/if-defined.js';
 import { BaseElement } from '../BaseElement.js';
 import { Spinner } from '../spinner/Spinner.js';
 import { Icon } from '../icon/Icon.js';
@@ -21,7 +20,7 @@ class IconButton extends BaseElement {
     this.borderless = false;
     this.disabled = false;
     this.loading = false;
-    this.remote = false;
+    this.library = "default";
   }
   static {
     this.styles = [super.styles, styles];
@@ -34,8 +33,9 @@ class IconButton extends BaseElement {
   }
   render() {
     return html`
-      <button part="base" ?disabled=${this.disabled || this.loading}>
-        ${this.loading ? html`<u-spinner></u-spinner>` : html`<u-icon ?remote=${this.remote} name=${ifDefined(this.name)}></u-icon>`}
+      <button part="base"
+        ?disabled=${this.disabled || this.loading}>
+        ${this.loading ? html`<u-spinner></u-spinner>` : html`<u-icon .library=${this.library} .name=${this.name}></u-icon>`}
       </button>
     `;
   }
@@ -50,8 +50,8 @@ __decorateClass([
   property({ type: Boolean, reflect: true })
 ], IconButton.prototype, "loading");
 __decorateClass([
-  property({ type: Boolean })
-], IconButton.prototype, "remote");
+  property({ type: String, attribute: "lib" })
+], IconButton.prototype, "library");
 __decorateClass([
   property({ type: String })
 ], IconButton.prototype, "name");

package/dist/components/icon-button/IconButton.styles.js

@@ -6,63 +6,48 @@ const styles = css`
     display: inline-flex;
     
     font-size: 16px;
-    color: var(--u-icon-color);
     padding: 0.5em;
-    background-color: var(--u-bg-color);
+    color: var(--u-icon-color);
     border: 1px solid var(--u-border-color);
     border-radius: 6px;
+    background-color: var(--u-bg-color);
 
     transition: all 0.2s ease;
     user-select: none;
     cursor: pointer;
   }
-  :host([borderless]) {
-    border: none;
-    background-color: transparent;
-  }
-  :host([borderless]:hover) {
-    border: none;
-    background-color: transparent;
-  }
-  :host([borderless]:active) {
-    border: none;
-    background-color: transparent;
-  }
-  :host([loading]),
-  :host([disabled]) {
-    pointer-events: none;
-  }
-  :host([disabled]) {
-    opacity: 0.6;
-    color: var(--u-icon-color-disabled);
-  }
   :host(:hover) {
     color: var(--u-icon-color-hover);
     background-color: var(--u-bg-color-hover);
-    border-color: var(--u-border-color-strong);
   }
   :host(:active) {
     color: var(--u-icon-color-active);
     background-color: var(--u-bg-color-active);
     transform: translateY(1px);
   }
+  :host([borderless]) {
+    border: none;
+    background-color: transparent;
+  }
+  :host([loading]),
+  :host([disabled]) {
+    color: var(--u-icon-color-disabled);
+    pointer-events: none;
+  }
 
   button {
     all: unset;
     display: inline-flex;
-    align-items: center;
-    justify-content: center;
   }
   button:focus-visible {
     outline: 2px solid var(--u-blue-500, #3b82f6);
     outline-offset: 2px;
-    border-radius: inherit;
   }
 
-  u-icon,
-  u-spinner {
-    font-size: inherit;
+  u-spinner,
+  u-icon {
     color: inherit;
+    font-size: inherit;
   }
 `;
 

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

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

package/dist/components/index.d.ts

@@ -1,14 +1,16 @@
 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 './panel';
+export * from './menu-item';
 export * from './progress-bar';
 export * from './progress-ring';
 export * from './spinner';

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

@@ -1,5 +1,7 @@
 import { PropertyValues } from 'lit';
 import { BaseElement } from '../BaseElement.js';
+/** 지원하는 input 타입 */
+type InputType = ('text' | 'password' | 'email' | 'tel' | 'url' | 'search' | 'number' | 'date' | 'time' | 'datetime-local' | 'month' | 'week');
 /**
  * Input 컴포넌트는 사용자 입력을 받는 텍스트 입력 필드입니다.
  * prefix, suffix 슬롯과 라벨, 도움말, 유효성 검사 등의 기능을 제공합니다.
@@ -7,23 +9,23 @@ import { BaseElement } from '../BaseElement.js';
 export declare class Input extends BaseElement {
     static styles: import('lit').CSSResultGroup[];
     static dependencies: Record<string, typeof BaseElement>;
-    input: HTMLInputElement;
-    /** password type인 경우 비밀번호 표시/숨김 상태 */
-    showPassword: boolean;
+    inputEl: HTMLInputElement;
     /** 유효성 검사 실패 여부 */
     isInvalid: boolean;
     /** 현재 표시할 유효성 검사 메시지 */
     currentValidationMessage: string;
+    /** password type인 경우 비밀번호 표시/숨김 상태 */
+    showPassword: boolean;
     /** input 요소의 type 속성 */
-    type: 'text' | 'email' | 'password' | 'search' | 'tel' | 'url' | 'number';
+    type: InputType;
     /** 필수 입력 여부 */
     required: boolean;
+    /** 읽기 전용 여부 */
+    readonly: boolean;
     /** 비활성화 여부 */
     disabled: boolean;
     /** 클리어 버튼 표시 여부 */
     clearable: boolean;
-    /** 읽기 전용 여부 */
-    readonly: boolean;
     /** input 요소의 name 속성 */
     name?: string;
     /** 라벨 텍스트 */
@@ -50,8 +52,6 @@ export declare class Input extends BaseElement {
     validationMessage?: string;
     protected updated(changedProperties: PropertyValues): void;
     render(): import('lit-html').TemplateResult<1>;
-    /** 라벨 영역을 렌더링합니다. */
-    private renderHeader;
     /** 유효성 검사를 수행합니다. */
     validate(): boolean;
     /** 입력값을 초기화합니다. */
@@ -63,11 +63,12 @@ export declare class Input extends BaseElement {
     /** input 이벤트 핸들러 */
     private handleInput;
     /** change 이벤트 핸들러 */
-    private handleChange;
+    private handleInputChange;
     /** blur 이벤트 핸들러 */
-    private handleBlur;
-    /** 클리어 버튼 클릭 핸들러 */
-    private handleClear;
+    private handleInputBlur;
     /** 비밀번호 표시/숨김 토글 핸들러 */
-    private handlePasswordToggle;
+    private handlePasswordTogglerClick;
+    /** 클리어 버튼 클릭 핸들러 */
+    private handleClearBtnClick;
 }
+export {};

package/dist/components/input/Input.js

@@ -1,4 +1,4 @@
-import { html, nothing } from 'lit';
+import { nothing, html } from 'lit';
 import { query, state, property } from 'lit/decorators.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { live } from 'lit/directives/live.js';
@@ -19,14 +19,14 @@ var __decorateClass = (decorators, target, key, kind) => {
 class Input extends BaseElement {
   constructor() {
     super(...arguments);
-    this.showPassword = false;
     this.isInvalid = false;
     this.currentValidationMessage = "";
+    this.showPassword = false;
     this.type = "text";
     this.required = false;
+    this.readonly = false;
     this.disabled = false;
     this.clearable = false;
-    this.readonly = false;
     this.spellcheck = false;
     this.value = "";
     /** input 이벤트 핸들러 */
@@ -40,26 +40,28 @@ class Input extends BaseElement {
       this.emit("u-input", { value: this.value });
     };
     /** change 이벤트 핸들러 */
-    this.handleChange = (e) => {
+    this.handleInputChange = (e) => {
       const input = e.target;
       this.value = input.value;
       this.emit("u-change", { value: this.value });
     };
     /** blur 이벤트 핸들러 */
-    this.handleBlur = () => {
+    this.handleInputBlur = () => {
       this.validate();
     };
-    /** 클리어 버튼 클릭 핸들러 */
-    this.handleClear = (e) => {
-      e.stopPropagation();
-      this.clear();
-    };
     /** 비밀번호 표시/숨김 토글 핸들러 */
-    this.handlePasswordToggle = (e) => {
+    this.handlePasswordTogglerClick = (e) => {
+      e.preventDefault();
       e.stopPropagation();
       this.showPassword = !this.showPassword;
       this.focus();
     };
+    /** 클리어 버튼 클릭 핸들러 */
+    this.handleClearBtnClick = (e) => {
+      e.preventDefault();
+      e.stopPropagation();
+      this.clear();
+    };
   }
   static {
     this.styles = [super.styles, styles];
@@ -72,21 +74,34 @@ class Input extends BaseElement {
   }
   updated(changedProperties) {
     super.updated(changedProperties);
-    if (changedProperties.has("value") && this.input) {
-      if (this.input.value !== this.value) {
-        this.input.value = this.value;
+    if (changedProperties.has("value") && this.inputEl) {
+      if (this.inputEl.value !== this.value) {
+        this.inputEl.value = this.value;
       }
     }
   }
   render() {
     return html`
-      ${this.renderHeader()}
+      <div class="header" ?hidden=${!this.label}>
+        ${this.required ? html`<span class="required-mark">*</span>` : nothing}
+      
+        <label class="label" @click=${this.focus}>
+          ${this.label}
+        </label>
+        
+        ${this.labelhelp ? html`
+            <u-icon class="help-icon" lib="internal" name="info-circle-fill"></u-icon>
+            <u-tooltip class="help-tooltip" trigger-selectors=".help-icon" placement="right-end">
+              ${this.labelhelp}
+            </u-tooltip>` : nothing}
+      </div>
       
       <div class="container"
         ?invalid=${this.isInvalid}
         ?disabled=${this.disabled}
         ?readonly=${this.readonly}>
-        <slot name="prefix" class="prefix"></slot>
+
+        <slot name="prefix"></slot>
         
         <input part="input"
           type=${this.type === "password" && this.showPassword ? "text" : this.type}
@@ -94,33 +109,37 @@ class Input extends BaseElement {
           ?required=${this.required}
           ?disabled=${this.disabled}
           ?readonly=${this.readonly}
-          placeholder=${ifDefined(this.placeholder)}
           minlength=${ifDefined(this.minlength)}
           maxlength=${ifDefined(this.maxlength)}
           spellcheck=${this.spellcheck}
           autocomplete=${ifDefined(this.autocomplete)}
+          placeholder=${ifDefined(this.placeholder)}
           pattern=${ifDefined(this.pattern)}
           .value=${live(this.value)}
           @input=${this.handleInput}
-          @change=${this.handleChange}
-          @blur=${this.handleBlur}
+          @change=${this.handleInputChange}
+          @blur=${this.handleInputBlur}
         />
         
-        <slot name="suffix" class="suffix"></slot>
+        <slot name="suffix"></slot>
         
-        <div class="tools">
-          <u-icon class="tool" name=${this.showPassword ? "eye-slash" : "eye"}
+        <div class="suffix-items">
+          <u-icon
+            lib="internal"
+            name=${this.showPassword ? "eye-slash" : "eye"}
             ?hidden=${this.type !== "password" || this.disabled || this.readonly}
-            @click=${this.handlePasswordToggle}
+            @click=${this.handlePasswordTogglerClick}
           ></u-icon>
-          <u-icon class="tool" name="x-lg"
+          <u-icon
+            lib="internal"
+            name="x-lg"
             ?hidden=${!this.clearable || !this.value || this.disabled || this.readonly}
-            @click=${this.handleClear}
+            @click=${this.handleClearBtnClick}
           ></u-icon>
         </div>
       </div>
 
-      <div class="validation-error" role="alert" ?hidden=${!this.currentValidationMessage}>
+      <div class="validation-message" ?hidden=${!this.currentValidationMessage}>
         ${this.currentValidationMessage}
       </div>
 
@@ -129,30 +148,13 @@ class Input extends BaseElement {
       </div>
     `;
   }
-  /** 라벨 영역을 렌더링합니다. */
-  renderHeader() {
-    if (!this.label) return nothing;
-    return html`
-      <div class="header">
-        <label class="label" @click=${this.focus}>
-          ${this.label}
-          ${this.required ? html`<span class="required-mark">*</span>` : ""}
-        </label>
-        
-        ${this.labelhelp ? html`
-          <u-icon class="help-icon" name="info-circle-fill"></u-icon>
-          <u-tooltip trigger-selectors=".help-icon" placement="right-end">${this.labelhelp}</u-tooltip>
-        ` : nothing}
-      </div>
-    `;
-  }
   /** 유효성 검사를 수행합니다. */
   validate() {
-    if (!this.input) return true;
-    const isValid = this.input.checkValidity();
+    if (!this.inputEl) return true;
+    const isValid = this.inputEl.checkValidity();
     this.isInvalid = !isValid;
     if (!isValid) {
-      this.currentValidationMessage = this.validationMessage || this.input.validationMessage;
+      this.currentValidationMessage = this.validationMessage || this.inputEl.validationMessage;
     } else {
       this.currentValidationMessage = "";
     }
@@ -164,29 +166,28 @@ class Input extends BaseElement {
     this.isInvalid = false;
     this.currentValidationMessage = "";
     this.focus();
-    this.emit("u-clear");
   }
   /** 입력 필드에 포커스를 설정합니다. */
   focus() {
-    this.input?.focus();
+    this.inputEl?.focus();
   }
   /** 입력 필드의 포커스를 해제합니다. */
   blur() {
-    this.input?.blur();
+    this.inputEl?.blur();
   }
 }
 __decorateClass([
   query("input")
-], Input.prototype, "input");
-__decorateClass([
-  state()
-], Input.prototype, "showPassword");
+], Input.prototype, "inputEl");
 __decorateClass([
   state()
 ], Input.prototype, "isInvalid");
 __decorateClass([
   state()
 ], Input.prototype, "currentValidationMessage");
+__decorateClass([
+  state()
+], Input.prototype, "showPassword");
 __decorateClass([
   property({ type: String, reflect: true })
 ], Input.prototype, "type");
@@ -195,13 +196,13 @@ __decorateClass([
 ], Input.prototype, "required");
 __decorateClass([
   property({ type: Boolean, reflect: true })
-], Input.prototype, "disabled");
+], Input.prototype, "readonly");
 __decorateClass([
   property({ type: Boolean, reflect: true })
-], Input.prototype, "clearable");
+], Input.prototype, "disabled");
 __decorateClass([
   property({ type: Boolean, reflect: true })
-], Input.prototype, "readonly");
+], Input.prototype, "clearable");
 __decorateClass([
   property({ type: String })
 ], Input.prototype, "name");