@krds.ui/vue 0.0.3

package/dist/krds-vue.es.js

@@ -0,0 +1,1417 @@
+import { defineComponent as b, computed as v, h as d, ref as B, onMounted as fe, onBeforeUnmount as ve, createElementBlock as x, openBlock as D, createElementVNode as o, normalizeClass as $, withDirectives as q, unref as C, toDisplayString as F, Fragment as O, renderList as T, vShow as L, createBlock as he, withCtx as ye, createTextVNode as ge, watch as me } from "vue";
+const U = b({
+  name: "KrdsButton",
+  props: {
+    type: {
+      type: String,
+      default: "button"
+    },
+    size: {
+      type: String,
+      default: void 0
+    },
+    variant: {
+      type: String,
+      default: "primary"
+    },
+    icon: {
+      type: Boolean,
+      default: !1
+    },
+    border: {
+      type: Boolean,
+      default: !1
+    },
+    pure: {
+      type: Boolean,
+      default: !1
+    },
+    disabled: {
+      type: Boolean,
+      default: !1
+    },
+    class: {
+      type: String,
+      default: void 0
+    }
+  },
+  emits: ["click"],
+  setup(e, { emit: s, slots: a }) {
+    const l = v(() => {
+      const t = ["krds-btn"];
+      return e.icon && t.push("icon"), e.border && t.push("border"), e.pure && t.push("pure"), e.variant && !e.icon && t.push(e.variant), e.size && t.push(e.size), e.class && t.push(e.class), t;
+    }), i = (t) => {
+      e.disabled || s("click", t);
+    };
+    return () => d(
+      "button",
+      {
+        type: e.type,
+        class: l.value,
+        disabled: e.disabled,
+        onClick: i
+      },
+      a.default?.()
+    );
+  }
+}), pe = b({
+  name: "KrdsButtonGroup",
+  props: {},
+  setup(e, { slots: s }) {
+    return () => d(
+      "div",
+      {
+        class: "btn-group"
+      },
+      s.default?.()
+    );
+  }
+}), be = b({
+  name: "KrdsIcon",
+  props: {
+    name: {
+      type: String,
+      required: !0
+    },
+    class: {
+      type: String,
+      default: void 0
+    }
+  },
+  setup(e) {
+    return () => d("i", {
+      class: ["svg-icon", e.name, e.class].filter(Boolean).join(" ")
+    });
+  }
+}), ke = b({
+  name: "KrdsLink",
+  props: {
+    href: {
+      type: String,
+      default: "#!"
+    },
+    target: {
+      type: String,
+      default: void 0
+    },
+    title: {
+      type: String,
+      default: void 0
+    },
+    size: {
+      type: String,
+      default: void 0
+    },
+    link: {
+      type: Boolean,
+      default: !0
+    },
+    basic: {
+      type: Boolean,
+      default: !1
+    },
+    pure: {
+      type: Boolean,
+      default: !1
+    },
+    class: {
+      type: String,
+      default: void 0
+    }
+  },
+  emits: ["click"],
+  setup(e, { emit: s, slots: a }) {
+    const l = v(() => {
+      const n = ["krds-btn"];
+      return e.size && n.push(e.size), e.link && n.push("link"), e.basic && n.push("basic"), e.pure && n.push("pure"), e.class && n.push(e.class), n;
+    }), i = v(() => {
+      const n = {
+        href: e.href,
+        class: l.value
+      };
+      return e.target && (n.target = e.target), e.title && (n.title = e.title), e.target === "_blank" && (n.rel = "noopener noreferrer"), n;
+    }), t = (n) => {
+      s("click", n);
+    };
+    return () => d(
+      "a",
+      {
+        ...i.value,
+        onClick: t
+      },
+      a.default?.()
+    );
+  }
+}), Se = b({
+  name: "KrdsInput",
+  props: {
+    modelValue: {
+      type: [String, Number],
+      default: void 0
+    },
+    type: {
+      type: String,
+      default: "text"
+    },
+    size: {
+      type: String,
+      default: void 0
+    },
+    placeholder: {
+      type: String,
+      default: void 0
+    },
+    maxlength: {
+      type: Number,
+      default: void 0
+    },
+    minlength: {
+      type: Number,
+      default: void 0
+    },
+    max: {
+      type: Number,
+      default: void 0
+    },
+    min: {
+      type: Number,
+      default: void 0
+    },
+    step: {
+      type: Number,
+      default: void 0
+    },
+    autocomplete: {
+      type: String,
+      default: void 0
+    },
+    autofocus: {
+      type: Boolean,
+      default: !1
+    },
+    name: {
+      type: String,
+      default: void 0
+    },
+    required: {
+      type: Boolean,
+      default: !1
+    },
+    readonly: {
+      type: Boolean,
+      default: !1
+    },
+    disabled: {
+      type: Boolean,
+      default: !1
+    },
+    error: {
+      type: String,
+      default: void 0
+    },
+    state: {
+      type: String,
+      default: "default"
+    },
+    icon: {
+      type: Boolean,
+      default: !1
+    },
+    class: {
+      type: String,
+      default: void 0
+    },
+    id: {
+      type: String,
+      default: void 0
+    }
+  },
+  emits: ["update:modelValue", "input", "change", "focus", "blur", "keydown", "keyup"],
+  setup(e, { emit: s, slots: a }) {
+    const l = v(() => {
+      const r = ["krds-input"];
+      return e.size && r.push(e.size), e.class && r.push(e.class), r;
+    }), i = (r) => {
+      const V = r.target, _ = e.type === "number" ? Number(V.value) : V.value;
+      s("update:modelValue", _), s("input", r);
+    }, t = (r) => {
+      s("change", r);
+    }, n = (r) => {
+      s("focus", r);
+    }, y = (r) => {
+      s("blur", r);
+    }, g = (r) => {
+      s("keydown", r);
+    }, p = (r) => {
+      s("keyup", r);
+    }, k = v(() => {
+      const r = {
+        type: e.type,
+        class: l.value,
+        value: e.modelValue,
+        placeholder: e.placeholder,
+        name: e.name,
+        id: e.id,
+        required: e.required,
+        readonly: e.readonly,
+        disabled: e.disabled,
+        autocomplete: e.autocomplete,
+        autofocus: e.autofocus,
+        onInput: i,
+        onChange: t,
+        onFocus: n,
+        onBlur: y,
+        onKeydown: g,
+        onKeyup: p
+      };
+      return e.maxlength !== void 0 && (r.maxlength = e.maxlength), e.minlength !== void 0 && (r.minlength = e.minlength), e.type === "number" && (e.max !== void 0 && (r.max = e.max), e.min !== void 0 && (r.min = e.min), e.step !== void 0 && (r.step = e.step)), r;
+    }), z = v(() => {
+      const r = ["form-conts"];
+      return e.state !== "default" && r.push(`is-${e.state}`), e.icon && r.push("btn-ico-wrap"), r;
+    });
+    return () => {
+      const r = [d("input", k.value)];
+      return a.default && r.push(...a.default()), d("div", { class: z.value }, r);
+    };
+  }
+}), Ce = b({
+  name: "KrdsFormLabel",
+  props: {
+    for: {
+      type: String,
+      default: void 0
+    },
+    class: {
+      type: String,
+      default: void 0
+    },
+    style: {
+      type: [String, Object],
+      default: void 0
+    },
+    id: {
+      type: String,
+      default: void 0
+    }
+  },
+  emits: ["click"],
+  setup(e, { emit: s, slots: a }) {
+    const l = (i) => {
+      s("click", i);
+    };
+    return () => d("div", { class: "form-tit" }, [
+      d(
+        "label",
+        {
+          for: e.for,
+          id: e.id,
+          class: e.class,
+          style: e.style,
+          onClick: l
+        },
+        a.default?.()
+      )
+    ]);
+  }
+}), we = b({
+  name: "KrdsFormHint",
+  props: {
+    type: {
+      type: String,
+      default: "hint"
+    },
+    class: {
+      type: String,
+      default: void 0
+    },
+    style: {
+      type: [String, Object],
+      default: void 0
+    },
+    id: {
+      type: String,
+      default: void 0
+    }
+  },
+  emits: ["click"],
+  setup(e, { emit: s, slots: a }) {
+    const l = (t) => {
+      s("click", t);
+    }, i = () => {
+      let t;
+      switch (e.type) {
+        case "error":
+          t = "form-hint-invalid";
+          break;
+        case "success":
+          t = "form-hint-success";
+          break;
+        case "information":
+          t = "form-hint-information";
+          break;
+        default:
+          t = "form-hint";
+          break;
+      }
+      return e.class ? `${t} ${e.class}` : t;
+    };
+    return () => d(
+      "p",
+      {
+        id: e.id,
+        class: i(),
+        style: e.style,
+        onClick: l
+      },
+      a.default?.()
+    );
+  }
+}), De = b({
+  name: "KrdsFormGroup",
+  props: {
+    class: {
+      type: String,
+      default: void 0
+    },
+    style: {
+      type: [String, Object],
+      default: void 0
+    },
+    id: {
+      type: String,
+      default: void 0
+    }
+  },
+  setup(e, { slots: s }) {
+    const a = v(() => {
+      const l = ["form-group"];
+      return e.class && l.push(e.class), l;
+    });
+    return () => d(
+      "div",
+      {
+        id: e.id,
+        class: a.value,
+        style: e.style
+      },
+      s.default?.()
+    );
+  }
+});
+function Be(e, s) {
+  const a = /* @__PURE__ */ new Date(), l = B(e || a.getFullYear()), i = B(s || a.getMonth() + 1), t = B(null), n = B(null), y = B(null), g = v(() => {
+    const m = a.getFullYear(), w = [];
+    for (let K = m - 10; K <= m + 10; K++)
+      w.push(K);
+    return w;
+  }), p = v(() => Array.from({ length: 12 }, (m, w) => w + 1)), k = () => {
+    t.value = null, n.value = null;
+  }, z = () => {
+    i.value === 1 ? (i.value = 12, l.value -= 1) : i.value -= 1;
+  }, r = () => {
+    i.value === 12 ? (i.value = 1, l.value += 1) : i.value += 1;
+  }, V = (m, w = !1) => {
+    if (w)
+      t.value = m, n.value = m;
+    else if (!t.value || t.value && n.value)
+      t.value = m, n.value = null;
+    else {
+      const K = new Date(t.value.replace(/\./g, "-"));
+      new Date(m.replace(/\./g, "-")) < K ? (t.value = m, n.value = null) : n.value = m;
+    }
+  };
+  return {
+    // State
+    currentYear: l,
+    currentMonth: i,
+    selectedStartDate: t,
+    selectedEndDate: n,
+    activeDateSelector: y,
+    // Computed
+    yearOptions: g,
+    monthOptions: p,
+    // Methods
+    clearDateSelection: k,
+    prevMonth: z,
+    nextMonth: r,
+    handleDateSelection: V,
+    selectToday: () => {
+      const m = `${a.getFullYear()}.${String(a.getMonth() + 1).padStart(2, "0")}.${String(a.getDate()).padStart(2, "0")}`;
+      V(m, !0);
+    },
+    isDateInSelectedRange: (m) => {
+      if (!t.value || !n.value)
+        return { isInRange: !1, isStart: !1, isEnd: !1 };
+      const w = new Date(m.replace(/\./g, "-")), K = new Date(t.value.replace(/\./g, "-")), I = new Date(n.value.replace(/\./g, "-")), E = m === t.value, P = m === n.value;
+      return { isInRange: w >= K && w <= I, isStart: E, isEnd: P };
+    }
+  };
+}
+function _e(e, s, a = {}) {
+  let l = null;
+  const i = typeof a == "string" ? { ignore: a } : a, { ignore: t, event: n = "click" } = i, y = () => {
+    l = (p) => {
+      const k = p.target;
+      e.value?.contains(k) || t && k.closest(t) || s();
+    }, document.addEventListener(n, l);
+  }, g = () => {
+    if (l) {
+      const p = typeof a == "string" ? "click" : a.event || "click";
+      document.removeEventListener(p, l), l = null;
+    }
+  };
+  return fe(() => {
+    y();
+  }), ve(() => {
+    g();
+  }), {
+    setupGlobalListeners: y,
+    removeGlobalListeners: g
+  };
+}
+const Ke = { class: "form-conts" }, xe = { class: "calendar-input" }, ze = ["id", "name", "placeholder", "value", "readonly", "disabled", "required", "autofocus"], Ve = ["disabled", "aria-expanded"], Ie = { class: "calendar-head" }, Me = { class: "calendar-switch-wrap" }, $e = { class: "calendar-drop-down" }, Fe = ["aria-expanded"], Ne = { class: "calendar-select calendar-year-wrap" }, Oe = { class: "sel year" }, Te = ["onClick"], Ee = { class: "calendar-drop-down" }, Pe = ["aria-expanded"], Re = { class: "calendar-select calendar-mon-wrap" }, qe = { class: "sel month" }, Le = ["onClick"], Ye = { class: "calendar-body" }, Ae = { class: "calendar-table-wrap" }, je = { class: "calendar-tbl" }, Ge = ["data-date"], We = ["aria-pressed", "onClick"], He = { class: "calendar-footer" }, Ue = { class: "calendar-btn-wrap" }, Je = /* @__PURE__ */ b({
+  __name: "KrdsDateInput",
+  props: {
+    modelValue: { default: void 0 },
+    size: { default: "medium" },
+    placeholder: { default: "YYYY.MM.DD" },
+    disabled: { type: Boolean, default: !1 },
+    readonly: { type: Boolean, default: !1 },
+    autofocus: { type: Boolean, default: !1 },
+    eventDates: { default: () => [] },
+    holidays: { default: () => [] },
+    initialYear: { default: void 0 },
+    initialMonth: { default: void 0 },
+    name: { default: void 0 },
+    required: { type: Boolean, default: !1 },
+    class: { default: void 0 },
+    style: {},
+    id: { default: void 0 }
+  },
+  emits: ["update:modelValue", "input", "change", "focus", "blur"],
+  setup(e, { emit: s }) {
+    const a = e, l = s, i = B(), t = B(), n = B(!1), y = B(null), {
+      currentYear: g,
+      currentMonth: p,
+      selectedStartDate: k,
+      selectedEndDate: z,
+      yearOptions: r,
+      monthOptions: V,
+      prevMonth: _,
+      nextMonth: f,
+      handleDateSelection: m,
+      selectToday: w,
+      isDateInSelectedRange: K
+    } = Be(a.initialYear, a.initialMonth), I = () => {
+      n.value && t.value?.focus(), n.value = !1, y.value = null;
+    };
+    _e(i, I, ".calendar-conts");
+    const E = v(() => {
+      const u = ["krds-input", "datepicker", "cal"];
+      return a.size && u.push(a.size), a.class && u.push(a.class), u;
+    }), P = v(() => ["form-conts", "calendar-conts"]), Y = v(() => ({
+      "krds-calendar-area": !0,
+      active: n.value
+    })), X = v(() => {
+      const u = g.value, c = p.value, h = new Date(u, c - 1, 1), N = new Date(h);
+      N.setDate(N.getDate() - h.getDay());
+      const M = [], S = new Date(N);
+      for (let R = 0; R < 6; R++) {
+        const j = [];
+        for (let G = 0; G < 7; G++) {
+          const ce = `${S.getFullYear()}.${String(S.getMonth() + 1).padStart(2, "0")}.${String(S.getDate()).padStart(2, "0")}`, W = S.getDay();
+          j.push({
+            day: S.getDate(),
+            dateString: ce,
+            isCurrentMonth: S.getMonth() === c - 1,
+            isToday: S.toDateString() === (/* @__PURE__ */ new Date()).toDateString(),
+            isPrevMonth: S.getMonth() < c - 1 || S.getMonth() === 11 && c === 1,
+            isNextMonth: S.getMonth() > c - 1 || S.getMonth() === 0 && c === 12,
+            isSunday: W === 0,
+            isSaturday: W === 6
+          }), S.setDate(S.getDate() + 1);
+        }
+        M.push(j);
+      }
+      return M;
+    }), Z = (u) => {
+      const c = [];
+      if (u.isPrevMonth && c.push("old"), u.isNextMonth && c.push("new"), u.isToday && c.push("today"), u.isSunday && c.push("day-off"), a.holidays?.includes(u.dateString) && c.push("day-off"), a.eventDates?.includes(u.dateString) && c.push("day-event"), u.isCurrentMonth) {
+        const h = K(u.dateString);
+        h.isInRange && (c.push("period"), h.isStart && c.push("start"), h.isEnd && c.push("end"));
+      }
+      return c;
+    }, ee = v(() => [
+      {
+        id: "get-today",
+        label: "오늘",
+        class: "text",
+        variant: void 0,
+        size: "small",
+        handler: w
+      },
+      {
+        id: "cancel-btn",
+        label: "취소",
+        class: void 0,
+        variant: "tertiary",
+        size: "small",
+        handler: I
+      },
+      {
+        id: "confirm-btn",
+        label: "확인",
+        class: void 0,
+        variant: "primary",
+        size: "small",
+        handler: le
+      }
+    ]), A = (u) => {
+      y.value === u ? y.value = null : y.value = u;
+    }, te = (u) => {
+      g.value = u, y.value = null;
+    }, ae = (u) => {
+      p.value = u, y.value = null;
+    }, le = () => {
+      if (k.value) {
+        if (z.value && k.value !== z.value) {
+          const u = `${k.value} ~ ${z.value}`;
+          l("update:modelValue", u);
+        } else
+          l("update:modelValue", k.value);
+        I();
+      }
+    }, ne = () => {
+      n.value = !0, y.value = null, setTimeout(() => {
+        i.value?.querySelector(".calendar-wrap")?.focus();
+      }, 50);
+    }, se = () => {
+      n.value ? I() : ne();
+    }, ue = (u) => {
+      u.code === "Escape" && (y.value ? y.value = null : n.value && I());
+    }, oe = (u) => {
+      const c = u.target;
+      l("update:modelValue", c.value), l("input", u);
+    }, ie = (u) => {
+      l("change", u);
+    }, de = (u) => {
+      l("focus", u);
+    }, re = (u) => {
+      l("blur", u);
+    };
+    return (u, c) => (D(), x("div", Ke, [
+      o("div", {
+        class: $(P.value)
+      }, [
+        o("div", xe, [
+          o("input", {
+            id: u.id,
+            name: u.name,
+            class: $(E.value),
+            placeholder: u.placeholder,
+            value: u.modelValue,
+            readonly: u.readonly,
+            disabled: u.disabled,
+            required: u.required,
+            autofocus: u.autofocus,
+            type: "text",
+            onInput: oe,
+            onChange: ie,
+            onFocus: de,
+            onBlur: re
+          }, null, 42, ze),
+          o("button", {
+            ref_key: "datePickerButtonRef",
+            ref: t,
+            class: $(`krds-btn ${u.size || "medium"} icon form-btn-datepicker`),
+            disabled: u.disabled,
+            "aria-expanded": n.value,
+            type: "button",
+            onClick: se
+          }, [...c[4] || (c[4] = [
+            o("span", { class: "sr-only" }, "달력 열기", -1),
+            o("i", { class: "svg-icon ico-calendar" }, null, -1)
+          ])], 10, Ve)
+        ]),
+        o("div", {
+          ref_key: "datePickerAreaRef",
+          ref: i,
+          class: $(Y.value)
+        }, [
+          q(o("div", {
+            class: "calendar-wrap bottom",
+            "aria-label": "달력",
+            tabindex: "0",
+            onKeydown: ue
+          }, [
+            o("div", Ie, [
+              o("button", {
+                type: "button",
+                class: "btn-cal-move prev",
+                onClick: c[0] || (c[0] = //@ts-ignore
+                (...h) => C(_) && C(_)(...h))
+              }, [...c[5] || (c[5] = [
+                o("span", { class: "sr-only" }, "이전 달", -1)
+              ])]),
+              o("div", Me, [
+                o("div", $e, [
+                  o("button", {
+                    type: "button",
+                    class: "btn-cal-switch year",
+                    "aria-label": "연도 선택",
+                    "aria-expanded": y.value === "year",
+                    onClick: c[1] || (c[1] = (h) => A("year"))
+                  }, F(C(g)) + "년 ", 9, Fe),
+                  q(o("div", Ne, [
+                    o("ul", Oe, [
+                      (D(!0), x(O, null, T(C(r), (h) => (D(), x("li", { key: h }, [
+                        o("button", {
+                          type: "button",
+                          class: $({ active: h === C(g) }),
+                          onClick: (N) => te(h)
+                        }, F(h) + "년", 11, Te)
+                      ]))), 128))
+                    ])
+                  ], 512), [
+                    [L, y.value === "year"]
+                  ])
+                ]),
+                o("div", Ee, [
+                  o("button", {
+                    type: "button",
+                    class: "btn-cal-switch month",
+                    "aria-label": "월 선택",
+                    "aria-expanded": y.value === "month",
+                    onClick: c[2] || (c[2] = (h) => A("month"))
+                  }, F(C(p).toString().padStart(2, "0")) + "월 ", 9, Pe),
+                  q(o("div", Re, [
+                    o("ul", qe, [
+                      (D(!0), x(O, null, T(C(V), (h) => (D(), x("li", { key: h }, [
+                        o("button", {
+                          type: "button",
+                          class: $({ active: h === C(p) }),
+                          onClick: (N) => ae(h)
+                        }, F(h.toString().padStart(2, "0")) + "월 ", 11, Le)
+                      ]))), 128))
+                    ])
+                  ], 512), [
+                    [L, y.value === "month"]
+                  ])
+                ])
+              ]),
+              o("button", {
+                type: "button",
+                class: "btn-cal-move next",
+                onClick: c[3] || (c[3] = //@ts-ignore
+                (...h) => C(f) && C(f)(...h))
+              }, [...c[6] || (c[6] = [
+                o("span", { class: "sr-only" }, "다음 달", -1)
+              ])])
+            ]),
+            o("div", Ye, [
+              o("div", Ae, [
+                o("table", je, [
+                  o("caption", null, F(C(g)) + "년 " + F(C(p).toString().padStart(2, "0")) + "월", 1),
+                  c[7] || (c[7] = o("thead", null, [
+                    o("tr", null, [
+                      o("th", null, "일"),
+                      o("th", null, "월"),
+                      o("th", null, "화"),
+                      o("th", null, "수"),
+                      o("th", null, "목"),
+                      o("th", null, "금"),
+                      o("th", null, "토")
+                    ])
+                  ], -1)),
+                  o("tbody", null, [
+                    (D(!0), x(O, null, T(X.value, (h, N) => (D(), x("tr", { key: N }, [
+                      (D(!0), x(O, null, T(h, (M, S) => (D(), x("td", {
+                        key: S,
+                        class: $(Z(M)),
+                        "data-date": M.dateString
+                      }, [
+                        o("button", {
+                          type: "button",
+                          class: "btn-set-date",
+                          "aria-pressed": C(K)(M.dateString).isInRange ? "true" : "false",
+                          onClick: (R) => C(m)(M.dateString)
+                        }, [
+                          o("span", null, F(M.day), 1)
+                        ], 8, We)
+                      ], 10, Ge))), 128))
+                    ]))), 128))
+                  ])
+                ])
+              ])
+            ]),
+            o("div", He, [
+              o("div", Ue, [
+                (D(!0), x(O, null, T(ee.value, (h) => (D(), he(C(U), {
+                  id: h.id,
+                  key: h.id,
+                  class: $(h.class),
+                  variant: h.variant,
+                  size: h.size,
+                  onClick: h.handler
+                }, {
+                  default: ye(() => [
+                    ge(F(h.label), 1)
+                  ]),
+                  _: 2
+                }, 1032, ["id", "class", "variant", "size", "onClick"]))), 128))
+              ])
+            ])
+          ], 544), [
+            [L, n.value]
+          ])
+        ], 2)
+      ], 2)
+    ]));
+  }
+}), Qe = b({
+  name: "KrdsTextarea",
+  props: {
+    modelValue: {
+      type: String,
+      default: ""
+    },
+    size: {
+      type: String,
+      default: void 0
+    },
+    placeholder: {
+      type: String,
+      default: void 0
+    },
+    maxlength: {
+      type: Number,
+      default: void 0
+    },
+    minlength: {
+      type: Number,
+      default: void 0
+    },
+    rows: {
+      type: Number,
+      default: 4
+    },
+    cols: {
+      type: Number,
+      default: void 0
+    },
+    autofocus: {
+      type: Boolean,
+      default: !1
+    },
+    name: {
+      type: String,
+      default: void 0
+    },
+    required: {
+      type: Boolean,
+      default: !1
+    },
+    readonly: {
+      type: Boolean,
+      default: !1
+    },
+    disabled: {
+      type: Boolean,
+      default: !1
+    },
+    showCount: {
+      type: Boolean,
+      default: !0
+    },
+    resize: {
+      type: String,
+      default: "vertical"
+    },
+    // BaseFormProps에서 상속
+    class: {
+      type: String,
+      default: void 0
+    },
+    style: {
+      type: [String, Object],
+      default: void 0
+    },
+    id: {
+      type: String,
+      default: void 0
+    }
+  },
+  emits: ["update:modelValue", "input", "change", "focus", "blur", "keydown", "keyup"],
+  setup(e, { emit: s }) {
+    const a = B(0);
+    me(
+      () => e.modelValue,
+      (f) => {
+        a.value = (f || "").length;
+      },
+      { immediate: !0 }
+    );
+    const l = v(() => {
+      const f = ["krds-input"];
+      return e.size && f.push(e.size), e.class && f.push(e.class), f;
+    }), i = v(() => {
+      const f = {};
+      return e.resize && (f.resize = e.resize), f;
+    }), t = (f) => {
+      const w = f.target.value;
+      a.value = w.length, s("update:modelValue", w), s("input", f);
+    }, n = (f) => {
+      s("change", f);
+    }, y = (f) => {
+      s("focus", f);
+    }, g = (f) => {
+      s("blur", f);
+    }, p = (f) => {
+      s("keydown", f);
+    }, k = (f) => {
+      s("keyup", f);
+    }, z = v(() => {
+      const f = {
+        class: l.value,
+        style: i.value,
+        value: e.modelValue,
+        placeholder: e.placeholder,
+        name: e.name,
+        id: e.id,
+        required: e.required,
+        readonly: e.readonly,
+        disabled: e.disabled,
+        autofocus: e.autofocus,
+        rows: e.rows,
+        cols: e.cols,
+        onInput: t,
+        onChange: n,
+        onFocus: y,
+        onBlur: g,
+        onKeydown: p,
+        onKeyup: k
+      };
+      return e.maxlength !== void 0 && (f.maxlength = e.maxlength), e.minlength !== void 0 && (f.minlength = e.minlength), f;
+    }), r = v(() => ["form-conts"]), V = v(() => ["textarea-wrap"]), _ = v(() => {
+      if (!e.showCount) return null;
+      const f = a.value, m = e.maxlength;
+      return {
+        current: f,
+        max: m || ""
+      };
+    });
+    return () => {
+      const f = [d("textarea", z.value)];
+      return _.value && f.push(
+        d("p", { class: "textarea-count" }, [
+          d("span", { class: "count-now" }, _.value.current),
+          d("span", { class: "count-total" }, _.value.max ? `/${_.value.max}` : "")
+        ])
+      ), d("div", { class: r.value }, [d("div", { class: V.value }, f)]);
+    };
+  }
+}), Xe = b({
+  name: "KrdsFileUpload",
+  props: {
+    modelValue: {
+      type: Array,
+      default: () => []
+    },
+    size: {
+      type: String,
+      default: "medium"
+    },
+    accept: {
+      type: String,
+      default: void 0
+    },
+    maxFiles: {
+      type: Number,
+      default: 10
+    },
+    maxFileSize: {
+      type: Number,
+      default: 20 * 1024 * 1024
+      // 20MB
+    },
+    multiple: {
+      type: Boolean,
+      default: !0
+    },
+    disabled: {
+      type: Boolean,
+      default: !1
+    },
+    dragAndDrop: {
+      type: Boolean,
+      default: !0
+    },
+    title: {
+      type: String,
+      default: "타이틀영역"
+    },
+    description: {
+      type: String,
+      default: "컨텐츠 영역"
+    },
+    placeholder: {
+      type: String,
+      default: "첨부할 파일을 여기에 끌어다 놓거나, 파일 선택 버튼을 눌러 파일을 직접 선택해주세요."
+    },
+    showPreview: {
+      type: Boolean,
+      default: !0
+    },
+    showDownload: {
+      type: Boolean,
+      default: !0
+    },
+    showPreviewButton: {
+      type: Boolean,
+      default: !0
+    },
+    showClearAll: {
+      type: Boolean,
+      default: !0
+    },
+    // BaseFormProps에서 상속
+    name: {
+      type: String,
+      default: void 0
+    },
+    required: {
+      type: Boolean,
+      default: !1
+    },
+    readonly: {
+      type: Boolean,
+      default: !1
+    },
+    class: {
+      type: String,
+      default: void 0
+    },
+    style: {
+      type: [String, Object],
+      default: void 0
+    },
+    id: {
+      type: String,
+      default: void 0
+    }
+  },
+  emits: [
+    "update:modelValue",
+    "file-added",
+    "file-removed",
+    "file-error",
+    "upload-start",
+    "upload-progress",
+    "upload-complete",
+    "upload-error",
+    "clear-all",
+    "download",
+    "preview"
+  ],
+  setup(e, { emit: s }) {
+    B(!1), v(() => {
+      const l = ["krds-file-upload", "line"];
+      return e.class && l.push(e.class), l;
+    });
+    const a = v(() => e.modelValue?.length || 0);
+    return v(() => !e.disabled && a.value < e.maxFiles), () => null;
+  }
+}), Ze = b({
+  name: "KrdsBadge",
+  props: {
+    type: {
+      type: String,
+      default: "outline"
+    },
+    color: {
+      type: String,
+      default: "primary"
+    },
+    size: {
+      type: String,
+      default: "large"
+    },
+    number: {
+      type: Boolean,
+      default: !1
+    },
+    class: {
+      type: String,
+      default: void 0
+    }
+  },
+  emits: ["click"],
+  setup(e, { emit: s, slots: a }) {
+    const l = v(() => {
+      const t = ["krds-badge"];
+      return t.push(`${e.type}-${e.color}`), e.size && t.push(e.size), e.number && t.push("number"), e.class && t.push(e.class), t;
+    }), i = (t) => {
+      s("click", t);
+    };
+    return () => d(
+      "span",
+      {
+        type: e.type,
+        color: e.color,
+        size: e.size,
+        number: e.number,
+        class: l.value,
+        onClick: i
+      },
+      a.default?.()
+    );
+  }
+}), et = b({
+  name: "KrdsTag",
+  props: {
+    link: {
+      type: Boolean,
+      default: !1
+    },
+    href: {
+      type: String,
+      default: "#"
+    },
+    target: {
+      type: String,
+      default: void 0
+    },
+    rel: {
+      type: String,
+      default: void 0
+    },
+    class: {
+      type: String,
+      default: void 0
+    }
+  },
+  emits: ["remove"],
+  setup(e, { emit: s, slots: a }) {
+    const l = v(() => {
+      const n = ["krds-btn-tag"];
+      return e.link && n.push("link"), e.class && n.push(e.class), n;
+    }), i = (n) => {
+      s("remove", n);
+    }, t = () => d(
+      "button",
+      {
+        type: "button",
+        class: "btn-delete",
+        onClick: i
+      },
+      [d("span", { class: "sr-only" }, "삭제")]
+    );
+    return () => {
+      const n = [], y = a.default?.();
+      if (y && n.push(y), e.link || n.push(t()), e.link) {
+        const g = {
+          href: e.href,
+          class: l.value
+        };
+        return e.target && (g.target = e.target), e.rel && (g.rel = e.rel), d("a", g, n);
+      }
+      return d(
+        "span",
+        {
+          class: l.value
+        },
+        n
+      );
+    };
+  }
+}), tt = b({
+  name: "KrdsTagGroup",
+  props: {
+    size: {
+      type: String,
+      default: "medium"
+    },
+    class: {
+      type: String,
+      default: void 0
+    }
+  },
+  setup(e, { slots: s }) {
+    const a = v(() => {
+      const l = ["krds-tag-wrap"];
+      return e.size && l.push(e.size), e.class && l.push(e.class), l;
+    });
+    return () => d(
+      "div",
+      {
+        class: a.value
+      },
+      s.default?.()
+    );
+  }
+}), at = b({
+  name: "KrdsMasthead",
+  props: {
+    class: {
+      type: String,
+      default: void 0
+    }
+  },
+  emits: ["click"],
+  setup(e, { emit: s, slots: a }) {
+    const l = v(() => {
+      const t = [""];
+      return e.class && t.push(e.class), t;
+    }), i = (t) => {
+      s("click", t);
+    };
+    return () => d(
+      "div",
+      {
+        id: "krds-masthead",
+        class: l.value,
+        onClick: i
+      },
+      [
+        d("div", { class: "toggle-wrap" }, [
+          d("div", { class: "toggle-head" }, [d("div", { class: "inner" }, [d("span", { class: "nuri-txt" }, a.default?.())])])
+        ])
+      ]
+    );
+  }
+});
+let lt = 0;
+function J(e = "krds") {
+  return `${e}-${++lt}`;
+}
+function Q(...e) {
+  return e.filter(Boolean).join(" ");
+}
+const nt = b({
+  name: "KrdsToggleSwitch",
+  props: {
+    modelValue: {
+      type: Boolean,
+      default: !1
+    },
+    disabled: {
+      type: Boolean,
+      default: !1
+    },
+    label: {
+      type: String,
+      default: void 0
+    },
+    size: {
+      type: String,
+      default: "medium",
+      validator: (e) => ["medium", "large"].includes(e)
+    },
+    name: {
+      type: String,
+      default: void 0
+    },
+    required: {
+      type: Boolean,
+      default: !1
+    },
+    readonly: {
+      type: Boolean,
+      default: !1
+    },
+    class: {
+      type: String,
+      default: void 0
+    },
+    id: {
+      type: String,
+      default: void 0
+    }
+  },
+  emits: ["update:modelValue", "change"],
+  setup(e, { emit: s, attrs: a }) {
+    const l = v(() => e.modelValue), i = v(() => Q("krds-form-toggle-switch", e.size, e.class)), t = (y) => {
+      if (e.disabled)
+        return;
+      const p = y.target.checked;
+      s("update:modelValue", p), s("change", p);
+    }, n = v(() => e.id || J("toggle-switch"));
+    return () => d(
+      "div",
+      {
+        class: i.value
+      },
+      [
+        d("input", {
+          type: "checkbox",
+          id: n.value,
+          name: e.name,
+          checked: l.value,
+          disabled: e.disabled,
+          onChange: t,
+          ...a
+        }),
+        d(
+          "label",
+          {
+            for: n.value
+          },
+          [
+            d(
+              "span",
+              {
+                class: "switch-toggle"
+              },
+              [d("i")]
+            ),
+            e.label || ""
+          ]
+        )
+      ]
+    );
+  }
+}), st = b({
+  name: "KrdsCheckArea",
+  props: {
+    class: {
+      type: String,
+      default: void 0
+    }
+  },
+  setup(e, { slots: s }) {
+    return () => {
+      const a = ["krds-check-area"];
+      return e.class && a.push(e.class), d(
+        "div",
+        {
+          class: a
+        },
+        s.default?.()
+      );
+    };
+  }
+}), ut = b({
+  name: "KrdsCheckbox",
+  props: {
+    modelValue: {
+      type: Boolean,
+      default: !1
+    },
+    disabled: {
+      type: Boolean,
+      default: !1
+    },
+    size: {
+      type: String,
+      default: "medium",
+      validator: (e) => ["medium", "large"].includes(e)
+    },
+    chip: {
+      type: Boolean,
+      default: !1
+    },
+    class: {
+      type: String,
+      default: void 0
+    },
+    id: {
+      type: String,
+      default: void 0
+    }
+  },
+  emits: ["update:modelValue", "change"],
+  slots: Object,
+  setup(e, { emit: s, attrs: a, slots: l }) {
+    const i = v(() => e.modelValue), t = v(() => {
+      const g = e.chip ? "krds-form-chip" : "krds-form-check";
+      return Q(g, e.size, e.class);
+    }), n = (g) => {
+      if (e.disabled)
+        return;
+      const k = g.target.checked;
+      s("update:modelValue", k), s("change", k);
+    }, y = v(() => e.id || J("checkbox"));
+    return () => {
+      const g = [
+        d("input", {
+          type: "checkbox",
+          id: y.value,
+          checked: i.value,
+          disabled: e.disabled,
+          onChange: n,
+          ...a
+        }),
+        d(
+          "label",
+          {
+            for: y.value
+          },
+          l.default?.()
+        )
+      ];
+      return l.description && !e.chip && g.push(d("div", { class: "krds-form-check-cnt" }, d("p", { class: "krds-form-check-p" }, l.description()))), d(
+        "div",
+        {
+          class: t.value
+        },
+        g
+      );
+    };
+  }
+}), H = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+  __proto__: null,
+  KrdsBadge: Ze,
+  KrdsButton: U,
+  KrdsButtonGroup: pe,
+  KrdsCheckArea: st,
+  KrdsCheckbox: ut,
+  KrdsDateInput: Je,
+  KrdsFileUpload: Xe,
+  KrdsFormGroup: De,
+  KrdsFormHint: we,
+  KrdsFormLabel: Ce,
+  KrdsIcon: be,
+  KrdsInput: Se,
+  KrdsLink: ke,
+  KrdsMasthead: at,
+  KrdsTag: et,
+  KrdsTagGroup: tt,
+  KrdsTextarea: Qe,
+  KrdsToggleSwitch: nt
+}, Symbol.toStringTag, { value: "Module" })), it = {
+  install(e, s = {}) {
+    e.provide("krds:config", s);
+    const a = s.components || Object.keys(H);
+    a.forEach((l) => {
+      const i = H[l];
+      i && e.component(l, i);
+    }), e.config.globalProperties.$krds = {
+      version: "__VERSION__"
+    }, process.env.NODE_ENV !== "production" && console.log(`[KRDS Vue] v__VERSION__ 설치 완료 - 컴포넌트: ${a.length}개`);
+  }
+}, dt = "__VERSION__";
+export {
+  Ze as KrdsBadge,
+  U as KrdsButton,
+  pe as KrdsButtonGroup,
+  st as KrdsCheckArea,
+  ut as KrdsCheckbox,
+  Je as KrdsDateInput,
+  Xe as KrdsFileUpload,
+  De as KrdsFormGroup,
+  we as KrdsFormHint,
+  Ce as KrdsFormLabel,
+  be as KrdsIcon,
+  Se as KrdsInput,
+  ke as KrdsLink,
+  at as KrdsMasthead,
+  et as KrdsTag,
+  tt as KrdsTagGroup,
+  Qe as KrdsTextarea,
+  nt as KrdsToggleSwitch,
+  Q as classNames,
+  it as default,
+  J as generateId,
+  dt as version
+};
+//# sourceMappingURL=krds-vue.es.js.map