@iyulab/components 0.1.3 → 0.1.5

package/dist/components/button/Button.styles.js

@@ -9,31 +9,29 @@ const styles = css`
     font-weight: 500;
     line-height: 1.5;
     padding: 0.5em 1em;
-    background-color: var(--u-bg-color);
     border: 1px solid var(--u-border-color);
     border-radius: 6px;
+    background-color: var(--u-bg-color);
 
     transition: all 0.2s ease;
+    overflow: hidden;
     user-select: none;
     cursor: pointer;
   }
-  :host([loading]),
-  :host([disabled]) {
-    pointer-events: none;
-  }
-  :host([disabled]) {
-    color: var(--u-text-color-disabled);
-  }
   :host(:hover) {
-    color: var(--u-text-color-hover);
+    color: var(--u-txt-color-hover);
     background-color: var(--u-bg-color-hover);
-    border-color: var(--u-border-color-strong);
   }
   :host(:active) {
-    color: var(--u-text-color-active);
+    color: var(--u-txt-color-active);
     background-color: var(--u-bg-color-active);
     transform: translateY(1px);
   }
+  :host([loading]),
+  :host([disabled]) {
+    color: var(--u-txt-color-disabled);
+    pointer-events: none;
+  }
 
   button {
     all: unset;
@@ -49,21 +47,16 @@ const styles = css`
   }
 
   slot {
-    flex: 1 1 auto;
+    flex: 1 0 auto;
     min-width: 0;
     display: inline-flex;
-    align-items: center;
     justify-content: center;
   }
-  slot[name="prefix"],
-  slot[name="suffix"] {
-    flex: 0 0 auto;
-  }
-  /* 슬롯에 내용이 있을 때만 gap 적용 */
-  slot[name="prefix"]:not(:empty) {
+  /* 슬롯에 내용이 있을 때 gap 적용 */
+  ::slotted([slot="prefix"]) {
     margin-right: 0.5em;
   }
-  slot[name="suffix"]:not(:empty) {
+  ::slotted([slot="suffix"]) {
     margin-left: 0.5em;
   }
 

package/dist/components/button/index.js

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

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

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

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

@@ -5,11 +5,15 @@ import { BaseElement } from '../BaseElement.js';
 export declare class CopyButton extends BaseElement {
     static styles: import('lit').CSSResultGroup[];
     static dependencies: Record<string, typeof BaseElement>;
-    /** 버튼의 테두리 유무를 설정합니다. 기본값은 true로, 테두리가 없습니다. */
+    /** 버튼의 복사 상태를 설정합니다. 복사가 완료되면 true로 변경됩니다. */
+    copied: boolean;
+    /** 버튼의 테두리 유무를 설정합니다. 기본값은 false입니다. */
     borderless: boolean;
     /** 버튼이 비활성화 상태인지 여부를 설정합니다. 비활성화된 버튼은 클릭할 수 없습니다. */
     disabled: boolean;
-    /** 버튼의 복사 상태를 설정합니다. 복사가 완료되면 true로 변경됩니다. */
-    copied: boolean;
+    /** 복사할 텍스트를 설정합니다. */
+    value: string;
     render(): import('lit-html').TemplateResult<1>;
+    /** 복사 버튼 클릭 핸들러 */
+    private handleButtonClick;
 }

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

@@ -0,0 +1,69 @@
+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

@@ -0,0 +1,17 @@
+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.js

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

package/dist/components/dialog/index.js

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

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

@@ -0,0 +1,25 @@
+import { nothing } from 'lit';
+import { BaseElement } from '../BaseElement.js';
+/**
+ * Divider 컴포넌트는 엘리먼트 사이에 움직임이 가능한 구분선을 제공합니다.
+ */
+export declare class Divider extends BaseElement {
+    static styles: import('lit').CSSResultGroup[];
+    static dependencies: Record<string, typeof BaseElement>;
+    /** 마지막 마우스 위치를 저장합니다. */
+    private position;
+    /** 분할선이 움직이는지 여부를 나타냅니다. */
+    moving: boolean;
+    /** 분할 방향을 설정합니다. */
+    orientation: 'horizontal' | 'vertical';
+    /** 분할선을 움직일 수 있는지 여부를 설정합니다. */
+    movable: boolean;
+    disconnectedCallback(): void;
+    render(): typeof nothing | import('lit-html').TemplateResult<1>;
+    /** 마우스 다운 이벤트 핸들러 */
+    private handleMouseDown;
+    /** 마우스 무브 이벤트 핸들러 */
+    private handleMouseMove;
+    /** 마우스 업 이벤트 핸들러 */
+    private handleMouseUp;
+}

package/dist/components/divider/Divider.js

@@ -0,0 +1,89 @@
+import { html, nothing } from 'lit';
+import { state, property } from 'lit/decorators.js';
+import { BaseElement } from '../BaseElement.js';
+import { styles } from './Divider.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 Divider extends BaseElement {
+  constructor() {
+    super(...arguments);
+    /** 마지막 마우스 위치를 저장합니다. */
+    this.position = 0;
+    this.moving = false;
+    this.orientation = "horizontal";
+    this.movable = false;
+    /** 마우스 다운 이벤트 핸들러 */
+    this.handleMouseDown = (e) => {
+      e.preventDefault();
+      this.moving = true;
+      this.position = this.orientation === "horizontal" ? e.clientX : e.clientY;
+      this.emit("u-movestart");
+      document.addEventListener("mousemove", this.handleMouseMove);
+      document.addEventListener("mouseup", this.handleMouseUp);
+      document.body.style.userSelect = "none";
+      document.body.style.cursor = this.orientation === "horizontal" ? "col-resize" : "row-resize";
+    };
+    /** 마우스 무브 이벤트 핸들러 */
+    this.handleMouseMove = (e) => {
+      if (!this.moving) return;
+      e.preventDefault();
+      const position = this.orientation === "horizontal" ? e.clientX : e.clientY;
+      const delta = position - this.position;
+      this.emit("u-move", { delta });
+      this.position = position;
+    };
+    /** 마우스 업 이벤트 핸들러 */
+    this.handleMouseUp = (_) => {
+      if (!this.moving) return;
+      this.moving = false;
+      this.emit("u-moveend");
+      document.removeEventListener("mousemove", this.handleMouseMove);
+      document.removeEventListener("mouseup", this.handleMouseUp);
+      document.body.style.userSelect = "";
+      document.body.style.cursor = "";
+    };
+  }
+  static {
+    this.styles = [super.styles, styles];
+  }
+  static {
+    this.dependencies = {};
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    document.removeEventListener("mousemove", this.handleMouseMove);
+    document.removeEventListener("mouseup", this.handleMouseUp);
+  }
+  render() {
+    if (this.movable) {
+      return html`
+        <div class="handler" 
+          ?moving=${this.moving}
+          orientation=${this.orientation}
+          @mousedown=${this.handleMouseDown}
+        ></div>
+      `;
+    } else {
+      return nothing;
+    }
+  }
+}
+__decorateClass([
+  state()
+], Divider.prototype, "moving");
+__decorateClass([
+  property({ type: String, reflect: true })
+], Divider.prototype, "orientation");
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], Divider.prototype, "movable");
+
+export { Divider };

package/dist/components/{split-panel/Splitter.styles.js → divider/Divider.styles.js}

@@ -1,42 +1,54 @@
 import { css } from 'lit';
 
 const styles = css`
+  :host {
+    --divider-size: 2px;
+    --handler-size: 4px;
+    --handler-color: var(--u-blue-500, #3b82f6);
+  }
+
   :host {
     position: relative;
     display: block;
     flex-shrink: 0;
     background-color: var(--u-neutral-200, #e5e7eb);
-    transition: background-color 0.2s ease;
-
-    --splitter-size: 2px;
-    --handler-size: 6px;
-    --handler-color: var(--u-blue-500, #3b82f6);
   }
   :host([orientation="horizontal"]) {
-    width: var(--splitter-size, 2px);
+    width: var(--divider-size, 2px);
     height: 100%;
     cursor: col-resize;
   }
   :host([orientation="vertical"]) {
     width: 100%;
-    height: var(--splitter-size, 2px);
+    height: var(--divider-size, 2px);
     cursor: row-resize;
   }
 
   .handler {
     position: absolute;
     z-index: 100;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
     display: block;
-    width: 300%;
-    height: 300%;
     background-color: var(--handler-color, #3b82f6);
     opacity: 0;
     transition: opacity 0.2s ease;
   }
-  .handler[dragging],
+  .handler[orientation="horizontal"] {
+    top: 0;
+    bottom: 0;
+    left: 50%;
+    transform: translateX(-50%);
+    width: var(--handler-size, 4px);
+    height: 100%;
+  }
+  .handler[orientation="vertical"] {
+    left: 0;
+    right: 0;
+    top: 50%;
+    transform: translateY(-50%);
+    width: 100%;
+    height: var(--handler-size, 4px);
+  }
+  .handler[moving],
   .handler:hover {
     opacity: 1;
   }

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

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

package/dist/components/divider/index.js

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

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

@@ -15,7 +15,9 @@ export declare class Form extends BaseElement {
     connectedCallback(): void;
     disconnectedCallback(): void;
     render(): import('lit-html').TemplateResult<1>;
-    /** 폼 내의 모든 입력 요소를 검증합니다. */
+    /**
+     * 폼 내의 모든 입력 요소를 검증합니다.
+     */
     validate(): boolean;
     /** 입력 요소의 변경 이벤트를 처리합니다. */
     private handleChange;

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,28 +6,18 @@ export declare class Icon extends BaseElement {
     static styles: import('lit').CSSResultGroup[];
     static dependencies: Record<string, typeof BaseElement>;
     /**
-     * 아이콘을 외부에서 불러올 때 사용되는 기본 경로를 설정합니다.
-     * @default '/assets/icons/'
+     * 사용할 아이콘 라이브러리를 지정합니다.
+     *
+     * - 기본 내장: "internal" | "default"
+     * - 사용자 확장 라이브러리: icons.register()로 등록한 라이브러리 이름
+     * @default "default"
      */
-    static remoteBaseUrl: string;
-    /**
-     * 아이콘을 외부에서 로드할때 사용하는 설정입니다.
-     * @see {@link Icon.remoteBaseUrl}에서 외부 기본 경로를 설정할 수 있습니다.
-     * @default false
-     */
-    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 { icons } from '../../internals/icons.js';
+import { icons } from '../../utilities/icons.js';
 import { styles } from './Icon.styles.js';
 
 var __defProp = Object.defineProperty;
@@ -15,10 +15,10 @@ var __decorateClass = (decorators, target, key, kind) => {
   if (result) __defProp(target, key, result);
   return result;
 };
-const _Icon = class _Icon extends BaseElement {
+class Icon extends BaseElement {
   constructor() {
     super(...arguments);
-    this.remote = false;
+    this.library = "default";
   }
   static {
     this.styles = [super.styles, styles];
@@ -26,55 +26,32 @@ const _Icon = class _Icon extends BaseElement {
   static {
     this.dependencies = {};
   }
-  static {
-    /** 
-     * 아이콘을 외부에서 불러올 때 사용되는 기본 경로를 설정합니다.
-     * @default '/assets/icons/'
-     */
-    this.remoteBaseUrl = "/assets/icons/";
-  }
   render() {
     if (!this.name) return nothing;
-    return until(this.load(this.name).then((html) => {
-      if (!this.validate(html)) return nothing;
-      return unsafeHTML(html);
+    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 remoteUrl = _Icon.remoteBaseUrl.endsWith("/") ? `${_Icon.remoteBaseUrl}${name}.svg` : `${_Icon.remoteBaseUrl}/${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 icons.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");
-let Icon = _Icon;
+], Icon.prototype, "name");
 
 export { Icon };

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");