@iyulab/components 0.1.0 → 0.1.1

package/dist/components/input/Input.js

@@ -1,46 +1,85 @@
-import { html as o, nothing as u } from "lit";
-import { query as c, state as p, property as s } from "lit/decorators.js";
-import { ifDefined as r } from "lit/directives/if-defined.js";
-import { live as y } from "lit/directives/live.js";
-import { BaseElement as v } from "../BaseElement.js";
-import { Icon as f } from "../icon/Icon.js";
-import { Tooltip as g } from "../tooltip/Tooltip.js";
-import { styles as m } from "./Input.styles.js";
-var $ = Object.defineProperty, t = (n, i, a, b) => {
-  for (var l = void 0, h = n.length - 1, d; h >= 0; h--)
-    (d = n[h]) && (l = d(i, a, l) || l);
-  return l && $(i, a, l), l;
+import { html, nothing } 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';
+import { BaseElement } from '../BaseElement.js';
+import { Icon } from '../icon/Icon.js';
+import { Tooltip } from '../tooltip/Tooltip.js';
+import { styles } from './Input.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 e extends v {
+class Input extends BaseElement {
   constructor() {
-    super(...arguments), this.showPassword = !1, this.isInvalid = !1, this.currentValidationMessage = "", this.type = "text", this.required = !1, this.disabled = !1, this.clearable = !1, this.readonly = !1, this.spellcheck = !1, this.value = "", this.handleInput = (i) => {
-      const a = i.target;
-      this.value = a.value, this.isInvalid && (this.isInvalid = !1, this.currentValidationMessage = ""), this.emit("u-input", { value: this.value });
-    }, this.handleChange = (i) => {
-      const a = i.target;
-      this.value = a.value, this.emit("u-change", { value: this.value });
-    }, this.handleBlur = () => {
+    super(...arguments);
+    this.showPassword = false;
+    this.isInvalid = false;
+    this.currentValidationMessage = "";
+    this.type = "text";
+    this.required = false;
+    this.disabled = false;
+    this.clearable = false;
+    this.readonly = false;
+    this.spellcheck = false;
+    this.value = "";
+    /** input 이벤트 핸들러 */
+    this.handleInput = (e) => {
+      const input = e.target;
+      this.value = input.value;
+      if (this.isInvalid) {
+        this.isInvalid = false;
+        this.currentValidationMessage = "";
+      }
+      this.emit("u-input", { value: this.value });
+    };
+    /** change 이벤트 핸들러 */
+    this.handleChange = (e) => {
+      const input = e.target;
+      this.value = input.value;
+      this.emit("u-change", { value: this.value });
+    };
+    /** blur 이벤트 핸들러 */
+    this.handleBlur = () => {
       this.validate();
-    }, this.handleClear = (i) => {
-      i.stopPropagation(), this.clear();
-    }, this.handlePasswordToggle = (i) => {
-      i.stopPropagation(), this.showPassword = !this.showPassword, this.focus();
+    };
+    /** 클리어 버튼 클릭 핸들러 */
+    this.handleClear = (e) => {
+      e.stopPropagation();
+      this.clear();
+    };
+    /** 비밀번호 표시/숨김 토글 핸들러 */
+    this.handlePasswordToggle = (e) => {
+      e.stopPropagation();
+      this.showPassword = !this.showPassword;
+      this.focus();
     };
   }
   static {
-    this.styles = [super.styles, m];
+    this.styles = [super.styles, styles];
   }
   static {
     this.dependencies = {
-      "u-icon": f,
-      "u-tooltip": g
+      "u-icon": Icon,
+      "u-tooltip": Tooltip
     };
   }
-  updated(i) {
-    super.updated(i), i.has("value") && this.input && this.input.value !== this.value && (this.input.value = this.value);
+  updated(changedProperties) {
+    super.updated(changedProperties);
+    if (changedProperties.has("value") && this.input) {
+      if (this.input.value !== this.value) {
+        this.input.value = this.value;
+      }
+    }
   }
   render() {
-    return o`
+    return html`
       ${this.renderHeader()}
       
       <div class="container"
@@ -51,17 +90,17 @@ class e extends v {
         
         <input part="input"
           type=${this.type === "password" && this.showPassword ? "text" : this.type}
-          name=${r(this.name)}
+          name=${ifDefined(this.name)}
           ?required=${this.required}
           ?disabled=${this.disabled}
           ?readonly=${this.readonly}
-          placeholder=${r(this.placeholder)}
-          minlength=${r(this.minlength)}
-          maxlength=${r(this.maxlength)}
+          placeholder=${ifDefined(this.placeholder)}
+          minlength=${ifDefined(this.minlength)}
+          maxlength=${ifDefined(this.maxlength)}
           spellcheck=${this.spellcheck}
-          autocomplete=${r(this.autocomplete)}
-          pattern=${r(this.pattern)}
-          .value=${y(this.value)}
+          autocomplete=${ifDefined(this.autocomplete)}
+          pattern=${ifDefined(this.pattern)}
+          .value=${live(this.value)}
           @input=${this.handleInput}
           @change=${this.handleChange}
           @blur=${this.handleBlur}
@@ -92,29 +131,40 @@ class e extends v {
   }
   /** 라벨 영역을 렌더링합니다. */
   renderHeader() {
-    return this.label ? o`
+    if (!this.label) return nothing;
+    return html`
       <div class="header">
         <label class="label" @click=${this.focus}>
           ${this.label}
-          ${this.required ? o`<span class="required-mark">*</span>` : ""}
+          ${this.required ? html`<span class="required-mark">*</span>` : ""}
         </label>
         
-        ${this.labelhelp ? o`
+        ${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>
-        ` : u}
+        ` : nothing}
       </div>
-    ` : u;
+    `;
   }
   /** 유효성 검사를 수행합니다. */
   validate() {
-    if (!this.input) return !0;
-    const i = this.input.checkValidity();
-    return this.isInvalid = !i, i ? this.currentValidationMessage = "" : this.currentValidationMessage = this.validationMessage || this.input.validationMessage, i;
+    if (!this.input) return true;
+    const isValid = this.input.checkValidity();
+    this.isInvalid = !isValid;
+    if (!isValid) {
+      this.currentValidationMessage = this.validationMessage || this.input.validationMessage;
+    } else {
+      this.currentValidationMessage = "";
+    }
+    return isValid;
   }
   /** 입력값을 초기화합니다. */
   clear() {
-    this.value = "", this.isInvalid = !1, this.currentValidationMessage = "", this.focus(), this.emit("u-clear");
+    this.value = "";
+    this.isInvalid = false;
+    this.currentValidationMessage = "";
+    this.focus();
+    this.emit("u-clear");
   }
   /** 입력 필드에 포커스를 설정합니다. */
   focus() {
@@ -125,69 +175,68 @@ class e extends v {
     this.input?.blur();
   }
 }
-t([
-  c("input")
-], e.prototype, "input");
-t([
-  p()
-], e.prototype, "showPassword");
-t([
-  p()
-], e.prototype, "isInvalid");
-t([
-  p()
-], e.prototype, "currentValidationMessage");
-t([
-  s({ type: String, reflect: !0 })
-], e.prototype, "type");
-t([
-  s({ type: Boolean, reflect: !0 })
-], e.prototype, "required");
-t([
-  s({ type: Boolean, reflect: !0 })
-], e.prototype, "disabled");
-t([
-  s({ type: Boolean, reflect: !0 })
-], e.prototype, "clearable");
-t([
-  s({ type: Boolean, reflect: !0 })
-], e.prototype, "readonly");
-t([
-  s({ type: String })
-], e.prototype, "name");
-t([
-  s({ type: String })
-], e.prototype, "label");
-t([
-  s({ type: String })
-], e.prototype, "labelhelp");
-t([
-  s({ type: String })
-], e.prototype, "placeholder");
-t([
-  s({ type: String })
-], e.prototype, "description");
-t([
-  s({ type: Number })
-], e.prototype, "minlength");
-t([
-  s({ type: Number })
-], e.prototype, "maxlength");
-t([
-  s({ type: Boolean })
-], e.prototype, "spellcheck");
-t([
-  s({ type: String })
-], e.prototype, "autocomplete");
-t([
-  s({ type: String })
-], e.prototype, "value");
-t([
-  s({ type: String })
-], e.prototype, "pattern");
-t([
-  s({ type: String })
-], e.prototype, "validationMessage");
-export {
-  e as Input
-};
+__decorateClass([
+  query("input")
+], Input.prototype, "input");
+__decorateClass([
+  state()
+], Input.prototype, "showPassword");
+__decorateClass([
+  state()
+], Input.prototype, "isInvalid");
+__decorateClass([
+  state()
+], Input.prototype, "currentValidationMessage");
+__decorateClass([
+  property({ type: String, reflect: true })
+], Input.prototype, "type");
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], Input.prototype, "required");
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], Input.prototype, "disabled");
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], Input.prototype, "clearable");
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], Input.prototype, "readonly");
+__decorateClass([
+  property({ type: String })
+], Input.prototype, "name");
+__decorateClass([
+  property({ type: String })
+], Input.prototype, "label");
+__decorateClass([
+  property({ type: String })
+], Input.prototype, "labelhelp");
+__decorateClass([
+  property({ type: String })
+], Input.prototype, "placeholder");
+__decorateClass([
+  property({ type: String })
+], Input.prototype, "description");
+__decorateClass([
+  property({ type: Number })
+], Input.prototype, "minlength");
+__decorateClass([
+  property({ type: Number })
+], Input.prototype, "maxlength");
+__decorateClass([
+  property({ type: Boolean })
+], Input.prototype, "spellcheck");
+__decorateClass([
+  property({ type: String })
+], Input.prototype, "autocomplete");
+__decorateClass([
+  property({ type: String })
+], Input.prototype, "value");
+__decorateClass([
+  property({ type: String })
+], Input.prototype, "pattern");
+__decorateClass([
+  property({ type: String })
+], Input.prototype, "validationMessage");
+
+export { Input };

package/dist/components/input/Input.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;
     font-size: inherit;
@@ -144,6 +145,5 @@ const r = o`
     margin: 0;
   }
 `;
-export {
-  r as styles
-};
+
+export { styles };

package/dist/components/menu/Menu.js

@@ -1,103 +1,153 @@
-import { html as c } from "lit";
-import { queryAssignedElements as u, property as o } from "lit/decorators.js";
-import { BaseElement as d } from "../BaseElement.js";
-import { MenuItem as p } from "../menu-item/MenuItem.js";
-import { styles as m } from "./Menu.styles.js";
-var f = Object.defineProperty, i = (r, e, t, n) => {
-  for (var s = void 0, a = r.length - 1, h; a >= 0; a--)
-    (h = r[a]) && (s = h(e, t, s) || s);
-  return s && f(e, t, s), s;
+import { html } from 'lit';
+import { queryAssignedElements, property } from 'lit/decorators.js';
+import { BaseElement } from '../BaseElement.js';
+import { MenuItem } from '../menu-item/MenuItem.js';
+import { styles } from './Menu.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 d {
+class Menu extends BaseElement {
   constructor() {
-    super(...arguments), this.open = !1, this.selectable = !1, this.value = "", this.show = async () => {
-      await this.updateComplete, requestAnimationFrame(() => {
-        this.open = !0;
+    super(...arguments);
+    this.open = false;
+    this.selectable = false;
+    this.value = "";
+    /** 메뉴를 표시합니다. */
+    this.show = async () => {
+      await this.updateComplete;
+      requestAnimationFrame(() => {
+        this.open = true;
       });
-    }, this.hide = async () => {
-      await this.updateComplete, requestAnimationFrame(() => {
-        this.open = !1;
+    };
+    /** 메뉴를 숨깁니다. */
+    this.hide = async () => {
+      await this.updateComplete;
+      requestAnimationFrame(() => {
+        this.open = false;
       });
-    }, this.handleSlotChange = () => {
-      this.selectable && this.value && this.updateSelection();
-    }, this.handleSelect = (e) => {
-      const t = e, n = e.target;
-      this.selectable && n && (this.value = n.value || t.detail?.value || "", this.updateSelection());
-    }, this.handleKeydown = (e) => {
-      const t = this.items.filter((a) => !a.disabled);
-      if (t.length === 0) return;
-      const n = t.findIndex((a) => a === e.target);
-      let s = n;
+    };
+    /** 슬롯 변경 이벤트를 처리합니다. */
+    this.handleSlotChange = () => {
+      if (this.selectable && this.value) {
+        this.updateSelection();
+      }
+    };
+    /** 메뉴 항목 선택 이벤트를 처리합니다. */
+    this.handleSelect = (e) => {
+      const event = e;
+      const menuItem = e.target;
+      if (this.selectable && menuItem) {
+        this.value = menuItem.value || event.detail?.value || "";
+        this.updateSelection();
+      }
+    };
+    /** 키보드 네비게이션을 처리합니다. */
+    this.handleKeydown = (e) => {
+      const items = this.items.filter((item) => !item.disabled);
+      if (items.length === 0) return;
+      const currentIndex = items.findIndex((item) => item === e.target);
+      let nextIndex = currentIndex;
       switch (e.key) {
         case "ArrowDown":
-          e.preventDefault(), s = (n + 1) % t.length, t[s].focus();
+          e.preventDefault();
+          nextIndex = (currentIndex + 1) % items.length;
+          items[nextIndex].focus();
           break;
         case "ArrowUp":
-          e.preventDefault(), s = n - 1 < 0 ? t.length - 1 : n - 1, t[s].focus();
+          e.preventDefault();
+          nextIndex = currentIndex - 1 < 0 ? items.length - 1 : currentIndex - 1;
+          items[nextIndex].focus();
           break;
         case "Home":
-          e.preventDefault(), t[0].focus();
+          e.preventDefault();
+          items[0].focus();
           break;
         case "End":
-          e.preventDefault(), t[t.length - 1].focus();
+          e.preventDefault();
+          items[items.length - 1].focus();
           break;
         case "Enter":
         case " ":
-          e.preventDefault(), n >= 0 && t[n].click();
+          e.preventDefault();
+          if (currentIndex >= 0) {
+            items[currentIndex].click();
+          }
           break;
         case "Escape":
-          e.preventDefault(), this.hide();
+          e.preventDefault();
+          this.hide();
           break;
       }
     };
   }
   static {
-    this.styles = [super.styles, m];
+    this.styles = [super.styles, styles];
   }
   static {
     this.dependencies = {
-      "u-menu-item": p
+      "u-menu-item": MenuItem
     };
   }
   connectedCallback() {
-    super.connectedCallback(), this.setAttribute("role", "menu"), this.addEventListener("u-select", this.handleSelect), this.addEventListener("keydown", this.handleKeydown);
+    super.connectedCallback();
+    this.setAttribute("role", "menu");
+    this.addEventListener("u-select", this.handleSelect);
+    this.addEventListener("keydown", this.handleKeydown);
   }
   disconnectedCallback() {
-    this.removeEventListener("u-select", this.handleSelect), this.removeEventListener("keydown", this.handleKeydown), super.disconnectedCallback();
+    this.removeEventListener("u-select", this.handleSelect);
+    this.removeEventListener("keydown", this.handleKeydown);
+    super.disconnectedCallback();
   }
-  updated(e) {
-    super.updated(e), e.has("value") && this.selectable && this.updateSelection(), e.has("open") && this.updateOpenState(this.open);
+  updated(changedProperties) {
+    super.updated(changedProperties);
+    if (changedProperties.has("value") && this.selectable) {
+      this.updateSelection();
+    }
+    if (changedProperties.has("open")) {
+      this.updateOpenState(this.open);
+    }
   }
   render() {
-    return c`
+    return html`
       <div class="container">
         <slot @slotchange=${this.handleSlotChange}></slot>
       </div>
     `;
   }
   /** open 상태가 변경될 때 호출됩니다. */
-  updateOpenState(e) {
-    e ? this.emit("u-show") : this.emit("u-hide");
+  updateOpenState(open) {
+    if (open) {
+      this.emit("u-show");
+    } else {
+      this.emit("u-hide");
+    }
   }
   /** 선택 상태를 업데이트합니다. */
   updateSelection() {
-    this.items.forEach((e) => {
-      e.selected = e.value === this.value;
+    this.items.forEach((item) => {
+      item.selected = item.value === this.value;
     });
   }
 }
-i([
-  u({ selector: "u-menu-item" })
-], l.prototype, "items");
-i([
-  o({ type: Boolean, reflect: !0 })
-], l.prototype, "open");
-i([
-  o({ type: Boolean })
-], l.prototype, "selectable");
-i([
-  o({ type: String })
-], l.prototype, "value");
-export {
-  l as Menu
-};
+__decorateClass([
+  queryAssignedElements({ selector: "u-menu-item" })
+], Menu.prototype, "items");
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], Menu.prototype, "open");
+__decorateClass([
+  property({ type: Boolean })
+], Menu.prototype, "selectable");
+__decorateClass([
+  property({ type: String })
+], Menu.prototype, "value");
+
+export { Menu };

package/dist/components/menu/Menu.styles.js

@@ -1,5 +1,6 @@
-import { css as o } from "lit";
-const t = o`
+import { css } from 'lit';
+
+const styles = css`
   :host {
     display: block;
     width: max-content;
@@ -28,6 +29,5 @@ const t = o`
     overflow: auto;
   }
 `;
-export {
-  t as styles
-};
+
+export { styles };