@iyulab/components 0.1.0 → 0.1.2

package/dist/components/dialog/Dialog.js

@@ -1,41 +1,69 @@
-import { html as p } from "lit";
-import { query as d, property as a } from "lit/decorators.js";
-import { BaseElement as h } from "../BaseElement.js";
-import { styles as c } from "./Dialog.styles.js";
-var y = Object.defineProperty, s = (i, e, n, u) => {
-  for (var t = void 0, l = i.length - 1, r; l >= 0; l--)
-    (r = i[l]) && (t = r(e, n, t) || t);
-  return t && y(e, n, t), t;
+import { html } from 'lit';
+import { query, property } from 'lit/decorators.js';
+import { BaseElement } from '../BaseElement.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 o extends h {
+class Dialog extends BaseElement {
   constructor() {
-    super(...arguments), this.open = !1, this.closeOnOverlayClick = !0, this.closeOnEscape = !0, this.show = async () => {
-      this.open = !0, await this.updateComplete;
-    }, this.hide = async () => {
-      await this.updateComplete, this.open = !1;
-    }, this.handleOverlayClick = (e) => {
-      this.closeOnOverlayClick && e.target === this.overlayEl && this.hide();
-    }, this.handleKeyDown = (e) => {
-      this.closeOnEscape && e.key === "Escape" && this.open && (e.preventDefault(), this.hide());
+    super(...arguments);
+    this.open = false;
+    this.closeOnOverlayClick = true;
+    this.closeOnEscape = true;
+    /** 다이얼로그를 표시합니다 */
+    this.show = async () => {
+      this.open = true;
+      await this.updateComplete;
+    };
+    /** 다이얼로그를 숨깁니다 */
+    this.hide = async () => {
+      await this.updateComplete;
+      this.open = false;
+    };
+    /** 오버레이 클릭 핸들러 */
+    this.handleOverlayClick = (e) => {
+      if (this.closeOnOverlayClick && e.target === this.overlayEl) {
+        this.hide();
+      }
+    };
+    /** 키보드 이벤트 핸들러 */
+    this.handleKeyDown = (e) => {
+      if (this.closeOnEscape && e.key === "Escape" && this.open) {
+        e.preventDefault();
+        this.hide();
+      }
     };
   }
   static {
-    this.styles = [super.styles, c];
+    this.styles = [super.styles, styles];
   }
   static {
     this.dependencies = {};
   }
   connectedCallback() {
-    super.connectedCallback(), window.addEventListener("keydown", this.handleKeyDown);
+    super.connectedCallback();
+    window.addEventListener("keydown", this.handleKeyDown);
   }
   disconnectedCallback() {
-    window.removeEventListener("keydown", this.handleKeyDown), super.disconnectedCallback();
+    window.removeEventListener("keydown", this.handleKeyDown);
+    super.disconnectedCallback();
   }
-  updated(e) {
-    super.updated(e), e.has("open") && this.updateOpenState(this.open);
+  updated(changedProperties) {
+    super.updated(changedProperties);
+    if (changedProperties.has("open")) {
+      this.updateOpenState(this.open);
+    }
   }
   render() {
-    return p`
+    return html`
       <div class="overlay" part="overlay"
         ?hidden=${!this.open}
         @click=${this.handleOverlayClick}>
@@ -45,22 +73,27 @@ class o extends h {
       </div>
     `;
   }
-  updateOpenState(e) {
-    e ? (document.body.style.overflow = "hidden", this.emit("u-show")) : (document.body.style.overflow = "", this.emit("u-hide"));
+  updateOpenState(open) {
+    if (open) {
+      document.body.style.overflow = "hidden";
+      this.emit("u-show");
+    } else {
+      document.body.style.overflow = "";
+      this.emit("u-hide");
+    }
   }
 }
-s([
-  d(".overlay")
-], o.prototype, "overlayEl");
-s([
-  a({ type: Boolean, reflect: !0 })
-], o.prototype, "open");
-s([
-  a({ type: Boolean })
-], o.prototype, "closeOnOverlayClick");
-s([
-  a({ type: Boolean })
-], o.prototype, "closeOnEscape");
-export {
-  o as Dialog
-};
+__decorateClass([
+  query(".overlay")
+], Dialog.prototype, "overlayEl");
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], Dialog.prototype, "open");
+__decorateClass([
+  property({ type: Boolean })
+], Dialog.prototype, "closeOnOverlayClick");
+__decorateClass([
+  property({ type: Boolean })
+], Dialog.prototype, "closeOnEscape");
+
+export { Dialog };

package/dist/components/dialog/Dialog.styles.js

@@ -1,5 +1,6 @@
-import { css as o } from "lit";
-const r = o`
+import { css } from 'lit';
+
+const styles = css`
   :host {
     display: inline-block;
   }
@@ -27,6 +28,5 @@ const r = o`
     overflow: hidden;
   }
 `;
-export {
-  r as styles
-};
+
+export { styles };

package/dist/components/form/Form.js

@@ -1,53 +1,72 @@
-import { html as u } from "lit";
-import { property as i } from "lit/decorators.js";
-import { arrayAttributeConverter as d } from "../../internals/attribute-converters.js";
-import { BaseElement as p } from "../BaseElement.js";
-import { Input as h } from "../input/Input.js";
-import { styles as f } from "./Form.styles.js";
-var m = Object.defineProperty, a = (t, n, r, s) => {
-  for (var e = void 0, o = t.length - 1, c; o >= 0; o--)
-    (c = t[o]) && (e = c(n, r, e) || e);
-  return e && m(n, r, e), e;
+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';
+
+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 l extends p {
+class Form extends BaseElement {
   constructor() {
-    super(...arguments), this.includes = [], this.excludes = [], this.handleChange = (n) => {
-      const r = n.target, s = r.name, e = r.value;
-      s && this.includes.includes(s) && (this.excludes.includes(s) || this.context && typeof this.context == "object" && (this.context[s] = e));
+    super(...arguments);
+    this.includes = [];
+    this.excludes = [];
+    /** 입력 요소의 변경 이벤트를 처리합니다. */
+    this.handleChange = (e) => {
+      const input = e.target;
+      const name = input.name;
+      const value = input.value;
+      if (!name) return;
+      if (!this.includes.includes(name)) return;
+      if (this.excludes.includes(name)) return;
+      if (this.context && typeof this.context === "object") {
+        this.context[name] = value;
+      }
     };
   }
   static {
-    this.styles = [super.styles, f];
+    this.styles = [super.styles, styles];
   }
   static {
     this.dependencies = {};
   }
   connectedCallback() {
-    super.connectedCallback(), this.addEventListener("change", this.handleChange);
+    super.connectedCallback();
+    this.addEventListener("change", this.handleChange);
   }
   disconnectedCallback() {
-    this.removeEventListener("change", this.handleChange), super.disconnectedCallback();
+    this.removeEventListener("change", this.handleChange);
+    super.disconnectedCallback();
   }
   render() {
-    return u`
+    return html`
       <slot></slot>
     `;
   }
   /** 폼 내의 모든 입력 요소를 검증합니다. */
   validate() {
-    const r = this.shadowRoot?.querySelector("slot")?.assignedElements({ flatten: !0 }).filter((e) => e instanceof h) || [];
-    return Array.from(r).every((e) => e.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());
+    return isValid;
   }
 }
-a([
-  i({ type: Array, converter: d((t) => t) })
-], l.prototype, "includes");
-a([
-  i({ type: Array, converter: d((t) => t) })
-], l.prototype, "excludes");
-a([
-  i({ type: Object, attribute: !1 })
-], l.prototype, "context");
-export {
-  l as Form
-};
+__decorateClass([
+  property({ type: Array, converter: arrayAttributeConverter((v) => v) })
+], Form.prototype, "includes");
+__decorateClass([
+  property({ type: Array, converter: arrayAttributeConverter((v) => v) })
+], Form.prototype, "excludes");
+__decorateClass([
+  property({ type: Object, attribute: false })
+], Form.prototype, "context");
+
+export { Form };

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

@@ -1,5 +1,6 @@
-import { css as t } from "lit";
-const e = t`
+import { css } from 'lit';
+
+const styles = css`
   :host {
     width: 100%;
     display: flex;
@@ -13,6 +14,5 @@ const e = t`
     width: 100%;
   }
 `;
-export {
-  e as styles
-};
+
+export { styles };

package/dist/components/icon/Icon.js

@@ -1,63 +1,80 @@
-import { nothing as n } from "lit";
-import { property as l } from "lit/decorators.js";
-import { unsafeHTML as c } from "lit/directives/unsafe-html.js";
-import { until as u } from "lit/directives/until.js";
-import { BaseElement as d } from "../BaseElement.js";
-import { icons as h } from "../../internals/icons.js";
-import { styles as v } from "./Icon.styles.js";
-var y = Object.defineProperty, p = (m, e, s, r) => {
-  for (var t = void 0, i = m.length - 1, f; i >= 0; i--)
-    (f = m[i]) && (t = f(e, s, t) || t);
-  return t && y(e, s, t), t;
+import { nothing } from 'lit';
+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 { styles } from './Icon.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;
 };
-const a = class o extends d {
+const _Icon = class _Icon extends BaseElement {
   constructor() {
-    super(...arguments), this.remote = !1;
+    super(...arguments);
+    this.remote = false;
   }
   static {
-    this.styles = [super.styles, v];
+    this.styles = [super.styles, styles];
   }
   static {
     this.dependencies = {};
   }
   static {
+    /** 
+     * 아이콘을 외부에서 불러올 때 사용되는 기본 경로를 설정합니다.
+     * @default '/assets/icons/'
+     */
     this.remoteBaseUrl = "/assets/icons/";
   }
   render() {
-    return this.name ? u(this.load(this.name).then((e) => this.validate(e) ? c(e) : n), n) : n;
+    if (!this.name) return nothing;
+    return until(this.load(this.name).then((html) => {
+      if (!this.validate(html)) return nothing;
+      return unsafeHTML(html);
+    }), nothing);
   }
   /**
    * 아이콘의 HTML 콘텐츠를 가져옵니다.
    * 외부 아이콘 경로를 사용하거나, 내부 레지스트리에서 아이콘을 찾습니다.
    * @param name 아이콘 이름
    */
-  async load(e) {
+  async load(name) {
     if (this.remote) {
-      const s = o.remoteBaseUrl.endsWith("/") ? `${o.remoteBaseUrl}${e}.svg` : `${o.remoteBaseUrl}/${e}.svg`;
+      const remoteUrl = _Icon.remoteBaseUrl.endsWith("/") ? `${_Icon.remoteBaseUrl}${name}.svg` : `${_Icon.remoteBaseUrl}/${name}.svg`;
       try {
-        const r = await fetch(s);
-        return r.ok ? (await r.text())?.trim() : void 0;
-      } catch (r) {
-        console.error(r);
-        return;
+        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 h.get(e)?.trim();
+    } else {
+      return icons.get(name)?.trim();
+    }
   }
   /**
    * SVG 콘텐츠가 유효한 HTML인지 검사합니다.
    */
-  validate(e) {
-    return !(!e || !e.endsWith("</svg>"));
+  validate(html) {
+    if (!html) return false;
+    if (!html.endsWith("</svg>")) return false;
+    return true;
   }
 };
-p([
-  l({ type: Boolean })
-], a.prototype, "remote");
-p([
-  l({ type: String })
-], a.prototype, "name");
-let w = a;
-export {
-  w as Icon
-};
+__decorateClass([
+  property({ type: Boolean })
+], _Icon.prototype, "remote");
+__decorateClass([
+  property({ type: String })
+], _Icon.prototype, "name");
+let Icon = _Icon;
+
+export { Icon };

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

@@ -1,5 +1,6 @@
-import { css as o } from "lit";
-const e = o`
+import { css } from 'lit';
+
+const styles = css`
   :host {
     display: inline-flex;
     font-size: inherit;
@@ -12,6 +13,5 @@ const e = o`
     fill: currentColor;
   }
 `;
-export {
-  e as styles
-};
+
+export { styles };

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

@@ -1,51 +1,59 @@
-import { html as n } from "lit";
-import { property as t } from "lit/decorators.js";
-import { ifDefined as m } from "lit/directives/if-defined.js";
-import { BaseElement as d } from "../BaseElement.js";
-import { Spinner as f } from "../spinner/Spinner.js";
-import { Icon as u } from "../icon/Icon.js";
-import { styles as c } from "./IconButton.styles.js";
-var y = Object.defineProperty, r = (s, p, l, h) => {
-  for (var e = void 0, i = s.length - 1, a; i >= 0; i--)
-    (a = s[i]) && (e = a(p, l, e) || e);
-  return e && y(p, l, e), e;
+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';
+import { styles } from './IconButton.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 o extends d {
+class IconButton extends BaseElement {
   constructor() {
-    super(...arguments), this.borderless = !1, this.disabled = !1, this.loading = !1, this.remote = !1;
+    super(...arguments);
+    this.borderless = false;
+    this.disabled = false;
+    this.loading = false;
+    this.remote = false;
   }
   static {
-    this.styles = [super.styles, c];
+    this.styles = [super.styles, styles];
   }
   static {
     this.dependencies = {
-      "u-spinner": f,
-      "u-icon": u
+      "u-spinner": Spinner,
+      "u-icon": Icon
     };
   }
   render() {
-    return n`
+    return html`
       <button part="base" ?disabled=${this.disabled || this.loading}>
-        ${this.loading ? n`<u-spinner></u-spinner>` : n`<u-icon ?remote=${this.remote} name=${m(this.name)}></u-icon>`}
+        ${this.loading ? html`<u-spinner></u-spinner>` : html`<u-icon ?remote=${this.remote} name=${ifDefined(this.name)}></u-icon>`}
       </button>
     `;
   }
 }
-r([
-  t({ type: Boolean, reflect: !0 })
-], o.prototype, "borderless");
-r([
-  t({ type: Boolean, reflect: !0 })
-], o.prototype, "disabled");
-r([
-  t({ type: Boolean, reflect: !0 })
-], o.prototype, "loading");
-r([
-  t({ type: Boolean })
-], o.prototype, "remote");
-r([
-  t({ type: String })
-], o.prototype, "name");
-export {
-  o as IconButton
-};
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], IconButton.prototype, "borderless");
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], IconButton.prototype, "disabled");
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], IconButton.prototype, "loading");
+__decorateClass([
+  property({ type: Boolean })
+], IconButton.prototype, "remote");
+__decorateClass([
+  property({ type: String })
+], IconButton.prototype, "name");
+
+export { IconButton };

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

@@ -1,5 +1,6 @@
-import { css as o } from "lit";
-const e = o`
+import { css } from 'lit';
+
+const styles = css`
   :host {
     position: relative;
     display: inline-flex;
@@ -64,6 +65,5 @@ const e = o`
     color: inherit;
   }
 `;
-export {
-  e as styles
-};
+
+export { styles };