@thl-ui/vue 0.0.0-stage → 0.1.1

package/dist/components/form.js

@@ -0,0 +1,1212 @@
+import { defineComponent as g, h as a, ref as S, watch as A, onMounted as N, computed as U, inject as J, onBeforeUnmount as O, onUpdated as Z, provide as ee, nextTick as ae } from "vue";
+import { bem as x, addMonths as E, weekdayNames as le, monthGrid as te, isSameDay as z, cx as V, isBetween as ne, parseISODate as D, toISODate as B, presetRanges as oe, uid as R, stepValue as I, roundToStep as re, createSelect as ie, clickOutside as K, percentOf as M, clamp as j, createUpload as se, formatBytes as ue, validate as de, linkFieldLabel as ce, valueFromPosition as me } from "@thl-ui/core";
+import { usePrefix as f, useI18n as $, useThlContext as pe, useDefaults as G, useStore as W } from "../context.js";
+import { icon as w, any as k, str as X } from "./util.js";
+import { ThlButton as _ } from "./basic.js";
+const Y = /* @__PURE__ */ Symbol("thl-form"), xe = /* @__PURE__ */ g({
+  name: "ThlForm",
+  props: {
+    layout: X("vertical"),
+    bordered: Boolean,
+    values: { type: Object, default: () => ({}) }
+  },
+  emits: ["submit"],
+  setup(e, { slots: s, emit: t, expose: o }) {
+    const i = f(), l = /* @__PURE__ */ new Map(), d = S(!1);
+    ee(Y, {
+      register: (n, r) => (l.set(n, r), () => l.delete(n)),
+      values: U(() => e.values),
+      submitted: d
+    });
+    const v = () => {
+      let n = !0;
+      return l.forEach((r) => {
+        r.validate() && (n = !1);
+      }), n;
+    };
+    return o({
+      validate: v,
+      reset: () => {
+        d.value = !1, l.forEach((n) => n.reset());
+      }
+    }), () => a(
+      "form",
+      {
+        novalidate: !0,
+        class: x("form", i.value)({ horizontal: e.layout === "horizontal", bordered: e.bordered }),
+        onSubmit: (n) => {
+          n.preventDefault(), d.value = !0, t("submit", v(), n);
+        },
+        onReset: () => {
+          d.value = !1, l.forEach((n) => n.reset());
+        }
+      },
+      s.default?.()
+    );
+  }
+}), Te = /* @__PURE__ */ g({
+  name: "ThlField",
+  props: {
+    label: String,
+    help: String,
+    error: String,
+    required: Boolean,
+    name: String,
+    value: k(),
+    rules: Array,
+    status: String,
+    for: String
+  },
+  setup(e, { slots: s }) {
+    const t = f(), { t: o } = $(), i = J(Y, null), l = R("field"), d = S(null), v = () => d.value = de(e.value, e.rules ?? [], i?.values.value);
+    let n;
+    N(() => {
+      i && e.name && (n = i.register(e.name, { validate: v, reset: () => d.value = null }));
+    }), O(() => n?.()), A(
+      () => e.value,
+      () => {
+        i?.submitted.value && e.name && v();
+      }
+    );
+    const r = S(), c = S();
+    let u = { describedBy: void 0, invalid: !1 };
+    const m = () => ce(r.value, c.value, { id: e.for ?? `${l}-input`, ...u });
+    return N(m), Z(m), () => {
+      const p = x("field", t.value), b = e.error ?? (d.value ? o(d.value.key, d.value.params) : void 0), T = e.for ?? `${l}-input`, y = b ? `${l}-err` : e.help ? `${l}-help` : void 0;
+      return u = { describedBy: y, invalid: !!b }, a(
+        "div",
+        { class: V(p(), { "has-error": !!b || e.status === "error", "has-success": e.status === "success", "has-warning": e.status === "warning" }) },
+        [
+          e.label ? a("label", { ref: c, class: V(p("label"), e.required && `${p("label")}--required`), for: T }, e.label) : null,
+          a("div", { ref: r }, [
+            s.default?.({ id: T, describedBy: y, invalid: !!b }),
+            b ? a("div", { id: `${l}-err`, class: p("error"), role: "alert" }, b) : e.help ? a("div", { id: `${l}-help`, class: p("help") }, e.help) : null
+          ])
+        ]
+      );
+    };
+  }
+}), we = /* @__PURE__ */ g({
+  name: "ThlFormActions",
+  setup(e, { slots: s }) {
+    const t = f();
+    return () => a("div", { class: `${t.value}-form__actions` }, s.default?.());
+  }
+}), $e = /* @__PURE__ */ g({
+  name: "ThlInput",
+  inheritAttrs: !1,
+  props: { modelValue: k(), size: String, variant: String, rounded: Boolean, invalid: Boolean },
+  emits: ["update:modelValue"],
+  setup(e, { attrs: s, emit: t, expose: o }) {
+    const i = f(), l = G("Input", e), d = S();
+    return o({ focus: () => d.value?.focus(), el: d }), () => a("input", {
+      ...s,
+      ref: d,
+      value: e.modelValue ?? "",
+      "aria-invalid": e.invalid || void 0,
+      class: V(
+        x(
+          "input",
+          i.value
+        )({
+          size: l.value.size !== "md" ? l.value.size : void 0,
+          [l.value.variant ?? ""]: !!l.value.variant && l.value.variant !== "default",
+          rounded: e.rounded
+        }),
+        s.class
+      ),
+      onInput: (v) => t("update:modelValue", v.target.value)
+    });
+  }
+}), Ce = /* @__PURE__ */ g({
+  name: "ThlTextarea",
+  inheritAttrs: !1,
+  props: { modelValue: String, variant: String },
+  emits: ["update:modelValue"],
+  setup(e, { attrs: s, emit: t }) {
+    const o = f();
+    return () => a("textarea", {
+      ...s,
+      value: e.modelValue ?? "",
+      class: V(x("input", o.value)({ textarea: !0, [e.variant ?? ""]: !!e.variant && e.variant !== "default" }), s.class),
+      onInput: (i) => t("update:modelValue", i.target.value)
+    });
+  }
+}), De = /* @__PURE__ */ g({
+  name: "ThlNativeSelect",
+  inheritAttrs: !1,
+  props: { modelValue: k(), options: Array, size: String },
+  emits: ["update:modelValue"],
+  setup(e, { attrs: s, emit: t, slots: o }) {
+    const i = f();
+    return () => a(
+      "select",
+      {
+        ...s,
+        value: e.modelValue,
+        class: V(x("input", i.value)({ size: e.size && e.size !== "md" ? e.size : void 0 }), s.class),
+        onChange: (l) => t("update:modelValue", l.target.value)
+      },
+      [...(e.options ?? []).map((l) => a("option", { key: l.value, value: l.value, selected: l.value === e.modelValue }, l.label)), o.default?.()]
+    );
+  }
+}), Ae = /* @__PURE__ */ g({
+  name: "ThlInputGroup",
+  props: { prepend: String, append: String },
+  setup(e, { slots: s }) {
+    const t = f(), o = (i) => i ? a("span", { class: `${t.value}-input-group__addon` }, i) : null;
+    return () => a("div", { class: `${t.value}-input-group` }, [
+      s.prepend ? s.prepend() : o(e.prepend),
+      s.default?.(),
+      s.append ? s.append() : o(e.append)
+    ]);
+  }
+}), Be = /* @__PURE__ */ g({
+  name: "ThlFloatingLabel",
+  props: { label: { type: String, required: !0 }, for: { type: String, required: !0 } },
+  setup(e, { slots: s }) {
+    const t = f();
+    return () => a("div", { class: `${t.value}-float` }, [s.default?.(), a("label", { for: e.for, class: `${t.value}-float__label` }, e.label)]);
+  }
+}), ve = /* @__PURE__ */ g({
+  name: "ThlCheckbox",
+  inheritAttrs: !1,
+  props: {
+    modelValue: k(),
+    value: k(),
+    color: String,
+    label: String,
+    indeterminate: Boolean,
+    skin: String,
+    disabled: Boolean
+  },
+  emits: ["update:modelValue", "change"],
+  setup(e, { attrs: s, slots: t, emit: o }) {
+    const i = f(), l = S();
+    A(
+      () => e.indeterminate,
+      (n) => {
+        l.value && (l.value.indeterminate = n);
+      },
+      { flush: "post" }
+    ), N(() => {
+      l.value && (l.value.indeterminate = e.indeterminate);
+    });
+    const d = U(() => Array.isArray(e.modelValue) ? e.modelValue.includes(e.value) : !!e.modelValue), v = (n) => {
+      const r = n.target.checked, c = Array.isArray(e.modelValue) ? r ? [...e.modelValue, e.value] : e.modelValue.filter((u) => u !== e.value) : r;
+      o("update:modelValue", c), o("change", r);
+    };
+    return () => {
+      const n = x("check", i.value);
+      return a(
+        "label",
+        {
+          class: V(n({ [e.color ?? ""]: !!e.color, [e.skin ?? ""]: !!e.skin && e.skin !== "default" }), { "is-disabled": e.disabled }, s.class)
+        },
+        [
+          a("input", {
+            ...s,
+            class: n("input"),
+            ref: l,
+            type: "checkbox",
+            checked: d.value,
+            disabled: e.disabled,
+            "aria-checked": e.indeterminate ? "mixed" : void 0,
+            onChange: v
+          }),
+          a("span", { class: n("box"), "aria-hidden": "true" }),
+          e.label || t.default ? a("span", t.default ? t.default() : e.label) : null
+        ]
+      );
+    };
+  }
+}), be = /* @__PURE__ */ g({
+  name: "ThlRadio",
+  inheritAttrs: !1,
+  props: { modelValue: k(), value: k(), color: String, label: String, skin: String, disabled: Boolean, name: String },
+  emits: ["update:modelValue"],
+  setup(e, { attrs: s, slots: t, emit: o }) {
+    const i = f();
+    return () => {
+      const l = x("check", i.value);
+      return a(
+        "label",
+        { class: V(l({ radio: !0, [e.color ?? ""]: !!e.color, [e.skin ?? ""]: !!e.skin && e.skin !== "default" }), { "is-disabled": e.disabled }) },
+        [
+          a("input", {
+            ...s,
+            type: "radio",
+            name: e.name,
+            class: l("input"),
+            checked: e.modelValue === e.value,
+            disabled: e.disabled,
+            onChange: () => o("update:modelValue", e.value)
+          }),
+          a("span", { class: l("box"), "aria-hidden": "true" }),
+          e.label || t.default ? a("span", t.default ? t.default() : e.label) : null
+        ]
+      );
+    };
+  }
+}), _e = /* @__PURE__ */ g({
+  name: "ThlCheckboxGroup",
+  props: {
+    modelValue: { type: Array, default: () => [] },
+    options: { type: Array, required: !0 },
+    color: String,
+    vertical: Boolean
+  },
+  emits: ["update:modelValue"],
+  setup(e, { emit: s }) {
+    const t = f();
+    return () => a(
+      "div",
+      { role: "group", class: x("check-group", t.value)({ vertical: e.vertical }) },
+      e.options.map(
+        (o) => a(ve, {
+          key: String(o.value),
+          modelValue: e.modelValue,
+          value: o.value,
+          label: o.label,
+          color: e.color,
+          disabled: o.disabled,
+          "onUpdate:modelValue": (i) => s("update:modelValue", i)
+        })
+      )
+    );
+  }
+}), ze = /* @__PURE__ */ g({
+  name: "ThlRadioGroup",
+  props: {
+    modelValue: k(),
+    options: { type: Array, required: !0 },
+    color: String,
+    vertical: Boolean,
+    name: String
+  },
+  emits: ["update:modelValue"],
+  setup(e, { emit: s }) {
+    const t = f(), o = R("radio");
+    return () => a(
+      "div",
+      { role: "radiogroup", class: x("check-group", t.value)({ vertical: e.vertical }) },
+      e.options.map(
+        (i) => a(be, {
+          key: String(i.value),
+          name: e.name ?? o,
+          modelValue: e.modelValue,
+          value: i.value,
+          label: i.label,
+          color: e.color,
+          disabled: i.disabled,
+          "onUpdate:modelValue": (l) => s("update:modelValue", l)
+        })
+      )
+    );
+  }
+}), Le = /* @__PURE__ */ g({
+  name: "ThlSwitch",
+  inheritAttrs: !1,
+  props: { modelValue: Boolean, color: String, size: String, label: String, disabled: Boolean },
+  emits: ["update:modelValue"],
+  setup(e, { attrs: s, emit: t }) {
+    const o = f();
+    return () => {
+      const i = x("switch", o.value);
+      return a("label", { class: i({ [e.color ?? ""]: !!e.color, size: e.size && e.size !== "md" ? e.size : void 0 }) }, [
+        a("input", {
+          ...s,
+          type: "checkbox",
+          role: "switch",
+          class: i("input"),
+          checked: e.modelValue,
+          disabled: e.disabled,
+          onChange: (l) => t("update:modelValue", l.target.checked)
+        }),
+        a("span", { class: i("track"), "aria-hidden": "true" }),
+        e.label ? a("span", e.label) : null
+      ]);
+    };
+  }
+}), Ie = /* @__PURE__ */ g({
+  name: "ThlNumberInput",
+  props: {
+    modelValue: k(),
+    min: Number,
+    max: Number,
+    step: { type: Number, default: 1 },
+    prefix: String,
+    suffix: String,
+    disabled: Boolean,
+    id: String,
+    size: String
+  },
+  emits: ["update:modelValue"],
+  setup(e, { emit: s }) {
+    const t = f(), { t: o } = $(), i = (l) => s("update:modelValue", j(l, e.min, e.max));
+    return () => {
+      const l = x("number", t.value), d = e.modelValue ?? 0, v = { step: e.step, min: e.min, max: e.max };
+      return a("div", { class: l() }, [
+        e.prefix ? a("span", { class: `${t.value}-input-group__addon` }, e.prefix) : null,
+        a(
+          "button",
+          {
+            type: "button",
+            class: l("btn"),
+            tabindex: -1,
+            "aria-label": "-",
+            disabled: e.disabled || e.min !== void 0 && d <= e.min,
+            onClick: () => i(I(d, -1, v))
+          },
+          w("minus")
+        ),
+        a("input", {
+          id: e.id,
+          type: "number",
+          inputmode: "decimal",
+          class: x("input", t.value)({ size: e.size && e.size !== "md" ? e.size : void 0 }),
+          value: e.modelValue ?? "",
+          min: e.min,
+          max: e.max,
+          step: e.step,
+          disabled: e.disabled,
+          "aria-label": o("validation.number"),
+          onInput: (n) => {
+            const r = n.target.value;
+            s("update:modelValue", r === "" ? null : Number(r));
+          },
+          onBlur: () => e.modelValue != null && i(re(e.modelValue, e.step, e.min ?? 0)),
+          onKeydown: (n) => {
+            n.key === "ArrowUp" && (n.preventDefault(), i(I(d, 1, v))), n.key === "ArrowDown" && (n.preventDefault(), i(I(d, -1, v)));
+          }
+        }),
+        a(
+          "button",
+          {
+            type: "button",
+            class: l("btn"),
+            tabindex: -1,
+            "aria-label": "+",
+            disabled: e.disabled || e.max !== void 0 && d >= e.max,
+            onClick: () => i(I(d, 1, v))
+          },
+          w("plus")
+        ),
+        e.suffix ? a("span", { class: `${t.value}-input-group__addon` }, e.suffix) : null
+      ]);
+    };
+  }
+}), Ne = /* @__PURE__ */ g({
+  name: "ThlSlider",
+  props: {
+    modelValue: { type: [Number, Array], required: !0 },
+    min: { type: Number, default: 0 },
+    max: { type: Number, default: 100 },
+    step: { type: Number, default: 1 },
+    color: String,
+    disabled: Boolean,
+    showTip: { type: Boolean, default: !0 },
+    showScale: Boolean,
+    format: { type: Function, default: String },
+    ariaLabel: String
+  },
+  emits: ["update:modelValue"],
+  setup(e, { emit: s }) {
+    const t = f(), { t: o } = $(), i = S(), l = (n) => {
+      const r = i.value, c = r.getBoundingClientRect(), u = (n - c.left) / c.width;
+      return me(getComputedStyle(r).direction === "rtl" ? 1 - u : u, { min: e.min, max: e.max, step: e.step });
+    }, d = (n, r) => {
+      if (!Array.isArray(e.modelValue)) return s("update:modelValue", r);
+      const c = [...e.modelValue];
+      c[n] = r, c[0] > c[1] && c.reverse(), s("update:modelValue", c);
+    }, v = (n) => (r) => {
+      if (e.disabled) return;
+      r.target.setPointerCapture?.(r.pointerId);
+      const c = (m) => d(n, l(m.clientX)), u = () => {
+        window.removeEventListener("pointermove", c), window.removeEventListener("pointerup", u);
+      };
+      window.addEventListener("pointermove", c), window.addEventListener("pointerup", u);
+    };
+    return () => {
+      const n = x("slider", t.value), r = Array.isArray(e.modelValue) ? e.modelValue : [e.modelValue], c = Array.isArray(e.modelValue), u = c ? M(r[0], e.min, e.max) : 0, m = M(r[r.length - 1], e.min, e.max);
+      return a("div", { class: V(n({ [e.color ?? ""]: !!e.color }), { "is-disabled": e.disabled }) }, [
+        a(
+          "div",
+          {
+            ref: i,
+            class: n("rail"),
+            onPointerdown: (p) => {
+              if (e.disabled || p.target !== p.currentTarget) return;
+              const b = l(p.clientX);
+              d(c ? Math.abs(b - r[0]) <= Math.abs(b - r[1]) ? 0 : 1 : 0, b);
+            }
+          },
+          [
+            a("div", { class: n("fill"), style: { insetInlineStart: `${u}%`, width: `${m - u}%` } }),
+            ...r.map(
+              (p, b) => a(
+                "div",
+                {
+                  key: b,
+                  role: "slider",
+                  tabindex: e.disabled ? -1 : 0,
+                  "aria-valuemin": e.min,
+                  "aria-valuemax": e.max,
+                  "aria-valuenow": p,
+                  "aria-valuetext": e.format(p),
+                  "aria-label": e.ariaLabel ?? (r.length > 1 ? o(b === 0 ? "common.min" : "common.max") : o("common.value")),
+                  class: n("thumb"),
+                  style: { insetInlineStart: `${M(p, e.min, e.max)}%` },
+                  onPointerdown: v(b),
+                  onKeydown: (T) => {
+                    const y = T.key;
+                    let C = p;
+                    if (y === "ArrowRight" || y === "ArrowUp") C = p + e.step;
+                    else if (y === "ArrowLeft" || y === "ArrowDown") C = p - e.step;
+                    else if (y === "Home") C = e.min;
+                    else if (y === "End") C = e.max;
+                    else if (y === "PageUp") C = p + e.step * 10;
+                    else if (y === "PageDown") C = p - e.step * 10;
+                    else return;
+                    T.preventDefault(), d(b, j(C, e.min, e.max));
+                  }
+                },
+                e.showTip ? a("span", { class: n("tip") }, e.format(p)) : void 0
+              )
+            )
+          ]
+        ),
+        e.showScale ? a("div", { class: n("scale") }, [a("span", e.format(e.min)), a("span", e.format(Math.round((e.min + e.max) / 2))), a("span", e.format(e.max))]) : null
+      ]);
+    };
+  }
+}), he = /* @__PURE__ */ g({
+  name: "ThlSelect",
+  props: {
+    modelValue: k(),
+    options: { type: Array, required: !0 },
+    multiple: Boolean,
+    searchable: { type: Boolean, default: void 0 },
+    clearable: { type: Boolean, default: void 0 },
+    creatable: Boolean,
+    placeholder: String,
+    disabled: Boolean,
+    id: String,
+    max: Number
+  },
+  emits: ["update:modelValue", "change"],
+  setup(e, { emit: s }) {
+    const t = f(), { t: o } = $(), i = G("Select", e), l = ie({
+      options: e.options,
+      value: e.modelValue,
+      multiple: e.multiple,
+      creatable: e.creatable,
+      max: e.max,
+      onChange: (u) => {
+        s("update:modelValue", u), s("change", u);
+      }
+    });
+    A(
+      () => e.options,
+      (u) => l.setOptions(u)
+    ), A(
+      () => e.modelValue,
+      (u) => l.setValue(u)
+    );
+    const d = W(l.state), v = S(), n = S(), r = R("listbox");
+    let c = null;
+    return A(
+      () => d.value.open,
+      (u) => {
+        c?.(), c = u ? K([v.value], l.close) : null;
+      }
+    ), O(() => c?.()), () => {
+      const u = x("select", t.value), m = l.selectedOptions(), p = l.filtered(), b = d.value, T = i.value.searchable || e.multiple || e.creatable, y = e.placeholder ?? o("select.placeholder");
+      let C;
+      const q = [];
+      return p.forEach((h, L) => {
+        h.group && h.group !== C && q.push(a("li", { key: `g-${h.group}`, class: u("group"), role: "presentation" }, h.group)), C = h.group;
+        const F = l.isSelected(h.value);
+        q.push(
+          a(
+            "li",
+            {
+              key: String(h.value),
+              id: `${r}-${L}`,
+              role: "option",
+              "aria-selected": F,
+              "aria-disabled": h.disabled,
+              class: V(u("option"), { "is-highlighted": L === b.highlighted, "is-selected": F, "is-disabled": h.disabled }),
+              onMousedown: (Q) => Q.preventDefault(),
+              onClick: () => l.select(h.value)
+            },
+            [h.label, F ? w("check") : null]
+          )
+        );
+      }), a("div", { ref: v, class: V(u(), { "is-disabled": e.disabled }) }, [
+        a(
+          "div",
+          {
+            class: V(u("control"), { "is-focused": b.open }),
+            onClick: () => {
+              e.disabled || (l.open(), n.value?.focus());
+            }
+          },
+          [
+            ...e.multiple ? m.map(
+              (h) => a("span", { key: String(h.value), class: u("tag") }, [
+                h.label,
+                a(
+                  "button",
+                  {
+                    type: "button",
+                    "aria-label": `${o("common.remove")} ${h.label}`,
+                    onClick: (L) => {
+                      L.stopPropagation(), l.remove(h.value);
+                    }
+                  },
+                  "×"
+                )
+              ])
+            ) : [],
+            !e.multiple && m[0] && !b.query ? a("span", { class: u("value") }, m[0].label) : null,
+            !m.length && !b.query && !T ? a("span", { class: u("placeholder") }, y) : null,
+            T ? a("input", {
+              ref: n,
+              id: e.id,
+              class: u("search"),
+              value: b.query,
+              disabled: e.disabled,
+              role: "combobox",
+              "aria-expanded": b.open,
+              "aria-controls": r,
+              "aria-autocomplete": "list",
+              "aria-activedescendant": b.open && b.highlighted >= 0 ? `${r}-${b.highlighted}` : void 0,
+              placeholder: m.length ? "" : y,
+              onInput: (h) => l.setQuery(h.target.value),
+              onKeydown: (h) => l.onKeyDown(h)
+            }) : a(
+              "button",
+              {
+                type: "button",
+                id: e.id,
+                class: `${t.value}-sr-only`,
+                role: "combobox",
+                "aria-expanded": b.open,
+                "aria-controls": r,
+                "aria-label": m[0]?.label ?? y,
+                "data-thl-auto-label": "",
+                onKeydown: (h) => l.onKeyDown(h)
+              },
+              m[0]?.label ?? y
+            ),
+            a("span", { class: u("indicators") }, [
+              i.value.clearable && m.length ? a(
+                "button",
+                {
+                  type: "button",
+                  "aria-label": o("common.clear"),
+                  onClick: (h) => {
+                    h.stopPropagation(), l.clear();
+                  }
+                },
+                w("x")
+              ) : null,
+              w("chevron-down")
+            ])
+          ]
+        ),
+        b.open ? a(
+          "ul",
+          { id: r, role: "listbox", "aria-multiselectable": e.multiple || void 0, class: u("menu") },
+          p.length === 0 ? [
+            e.creatable && b.query ? a("li", { class: u("option"), onClick: () => l.create() }, `${o("select.addTag")}: “${b.query}”`) : a("li", { class: u("empty") }, o("select.noOptions"))
+          ] : q
+        ) : null
+      ]);
+    };
+  }
+}), Ee = /* @__PURE__ */ g({
+  name: "ThlTagsInput",
+  props: { modelValue: { type: Array, default: () => [] }, placeholder: String, id: String },
+  emits: ["update:modelValue"],
+  setup(e, { emit: s }) {
+    return () => a(he, {
+      id: e.id,
+      options: e.modelValue.map((t) => ({ label: t, value: t })),
+      modelValue: e.modelValue,
+      multiple: !0,
+      creatable: !0,
+      placeholder: e.placeholder,
+      "onUpdate:modelValue": (t) => s("update:modelValue", t)
+    });
+  }
+});
+function P() {
+  const e = S(!1), s = S();
+  let t = null;
+  const o = (i) => i.key === "Escape" && (e.value = !1);
+  return A(e, async (i) => {
+    t?.(), t = null, document.removeEventListener("keydown", o), i && (await ae(), t = K([s.value], () => e.value = !1), document.addEventListener("keydown", o));
+  }), O(() => {
+    t?.(), document.removeEventListener("keydown", o);
+  }), { open: e, root: s };
+}
+const H = /* @__PURE__ */ g({
+  name: "ThlCalendarGrid",
+  props: {
+    month: { type: Date, required: !0 },
+    selected: k(),
+    rangeStart: k(),
+    rangeEnd: k(),
+    hover: k(),
+    min: k(),
+    max: k()
+  },
+  emits: ["update:month", "select", "hover"],
+  setup(e, { emit: s }) {
+    const t = f(), { t: o, d: i, intlLocale: l } = $(), d = pe();
+    return () => {
+      const v = d.config.value.components.DatePicker?.weekStartsOn ?? 1, n = l(), r = x("calendar-grid", t.value), c = e.rangeEnd ?? e.hover;
+      return a("div", { class: r() }, [
+        a("div", { class: r("head") }, [
+          a(
+            "button",
+            { type: "button", onClick: () => s("update:month", E(e.month, -1)), "aria-label": o("common.previous") },
+            w("chevron-left")
+          ),
+          a("span", { "aria-live": "polite" }, new Intl.DateTimeFormat(n, { month: "long", year: "numeric" }).format(e.month)),
+          a("button", { type: "button", onClick: () => s("update:month", E(e.month, 1)), "aria-label": o("common.next") }, w("chevron-right"))
+        ]),
+        a("table", { role: "grid" }, [
+          a(
+            "thead",
+            a(
+              "tr",
+              le(n, v, "short").map((u) => a("th", { key: u, scope: "col" }, u))
+            )
+          ),
+          a(
+            "tbody",
+            te(e.month.getFullYear(), e.month.getMonth(), v).map(
+              (u, m) => a(
+                "tr",
+                { key: m },
+                u.map((p) => {
+                  const b = e.min && p.date < e.min || e.max && p.date > e.max, T = z(p.date, e.selected) || z(p.date, e.rangeStart) || z(p.date, e.rangeEnd);
+                  return a(
+                    "td",
+                    { key: p.key },
+                    a(
+                      "button",
+                      {
+                        type: "button",
+                        disabled: !!b,
+                        "aria-pressed": T,
+                        "aria-label": i(p.date, { dateStyle: "full" }),
+                        class: V(r("day"), {
+                          "is-outside": !p.inMonth,
+                          "is-today": p.today,
+                          "is-selected": T,
+                          "is-in-range": !T && !!e.rangeStart && ne(p.date, e.rangeStart, c)
+                        }),
+                        onClick: () => s("select", p.date),
+                        onMouseenter: () => s("hover", p.date)
+                      },
+                      p.date.getDate()
+                    )
+                  );
+                })
+              )
+            )
+          )
+        ])
+      ]);
+    };
+  }
+}), Pe = /* @__PURE__ */ g({
+  name: "ThlDatePicker",
+  props: {
+    modelValue: k(),
+    placeholder: String,
+    min: String,
+    max: String,
+    id: String,
+    disabled: Boolean,
+    clearable: { type: Boolean, default: !0 },
+    inline: Boolean
+  },
+  emits: ["update:modelValue"],
+  setup(e, { emit: s }) {
+    const t = f(), { t: o, d: i } = $(), { open: l, root: d } = P(), v = S(D(e.modelValue) ?? /* @__PURE__ */ new Date());
+    return A(
+      () => e.modelValue,
+      (n) => {
+        const r = D(n);
+        r && (v.value = r);
+      }
+    ), () => {
+      const n = D(e.modelValue), r = a(H, {
+        month: v.value,
+        selected: n,
+        min: D(e.min) ?? void 0,
+        max: D(e.max) ?? void 0,
+        "onUpdate:month": (c) => v.value = c,
+        onSelect: (c) => {
+          s("update:modelValue", B(c)), l.value = !1;
+        }
+      });
+      return e.inline ? a("div", { class: `${t.value}-card ${t.value}-p-3`, style: { display: "inline-block" } }, r) : a("div", { ref: d, class: `${t.value}-picker` }, [
+        a("div", { class: `${t.value}-input-group` }, [
+          a("input", {
+            id: e.id,
+            readonly: !0,
+            class: `${t.value}-input`,
+            value: n ? i(n) : "",
+            placeholder: e.placeholder ?? o("datepicker.selectDate"),
+            disabled: e.disabled,
+            role: "combobox",
+            "aria-haspopup": "dialog",
+            "aria-expanded": String(l.value),
+            "aria-label": e.placeholder ?? o("datepicker.selectDate"),
+            onClick: () => !e.disabled && (l.value = !0)
+          }),
+          a(_, { "aria-label": o("datepicker.selectDate"), disabled: e.disabled, onClick: () => l.value = !l.value }, () => w("calendar"))
+        ]),
+        l.value ? a("div", { class: `${t.value}-picker__panel`, role: "dialog", style: { flexDirection: "column" } }, [
+          r,
+          a("div", { class: `${t.value}-picker__footer` }, [
+            a(
+              _,
+              {
+                size: "sm",
+                onClick: () => {
+                  s("update:modelValue", B(/* @__PURE__ */ new Date())), l.value = !1;
+                }
+              },
+              () => o("datepicker.today")
+            ),
+            e.clearable ? a(
+              _,
+              {
+                size: "sm",
+                variant: "link",
+                onClick: () => {
+                  s("update:modelValue", null), l.value = !1;
+                }
+              },
+              () => o("datepicker.clear")
+            ) : null
+          ])
+        ]) : null
+      ]);
+    };
+  }
+}), qe = /* @__PURE__ */ g({
+  name: "ThlDateRangePicker",
+  props: {
+    modelValue: { type: Array, default: () => [null, null] },
+    id: String,
+    presets: { type: Boolean, default: !0 }
+  },
+  emits: ["update:modelValue"],
+  setup(e, { emit: s }) {
+    const t = f(), { t: o, d: i } = $(), { open: l, root: d } = P(), v = S(D(e.modelValue[0]) ?? /* @__PURE__ */ new Date()), n = S(null), r = S(null), c = (u) => {
+      if (!n.value) {
+        n.value = u;
+        return;
+      }
+      const [m, p] = u < n.value ? [u, n.value] : [n.value, u];
+      s("update:modelValue", [B(m), B(p)]), n.value = null, l.value = !1;
+    };
+    return () => {
+      const [u, m] = [D(e.modelValue[0]), D(e.modelValue[1])], p = {
+        rangeStart: n.value ?? u,
+        rangeEnd: n.value ? null : m,
+        hover: n.value ? r.value : null,
+        onSelect: c,
+        onHover: (b) => r.value = b
+      };
+      return a("div", { ref: d, class: `${t.value}-picker` }, [
+        a("div", { class: `${t.value}-input-group` }, [
+          a("span", { class: `${t.value}-input-group__addon` }, w("calendar")),
+          a("input", {
+            id: e.id,
+            readonly: !0,
+            class: `${t.value}-input`,
+            value: u && m ? `${i(u)} – ${i(m)}` : "",
+            placeholder: `${o("datepicker.startDate")} – ${o("datepicker.endDate")}`,
+            onClick: () => l.value = !0,
+            role: "combobox",
+            "aria-haspopup": "dialog",
+            "aria-expanded": String(l.value),
+            "aria-label": `${o("datepicker.startDate")} – ${o("datepicker.endDate")}`
+          })
+        ]),
+        l.value ? a("div", { class: `${t.value}-picker__panel`, role: "dialog" }, [
+          e.presets ? a(
+            "ul",
+            { class: `${t.value}-picker__ranges` },
+            Object.entries(oe()).map(
+              ([b, [T, y]]) => a(
+                "li",
+                { key: b },
+                a(
+                  "button",
+                  {
+                    type: "button",
+                    class: V({ "is-active": z(T, u) && z(y, m) }),
+                    onClick: () => {
+                      s("update:modelValue", [B(T), B(y)]), l.value = !1;
+                    }
+                  },
+                  o(`datepicker.ranges.${b}`)
+                )
+              )
+            )
+          ) : null,
+          a("div", { style: { display: "flex", gap: "16px", flexWrap: "wrap" } }, [
+            a(H, { month: v.value, "onUpdate:month": (b) => v.value = b, ...p }),
+            a(H, { month: E(v.value, 1), "onUpdate:month": (b) => v.value = E(b, -1), ...p })
+          ])
+        ]) : null
+      ]);
+    };
+  }
+}), Fe = /* @__PURE__ */ g({
+  name: "ThlTimePicker",
+  props: { modelValue: k(), step: { type: Number, default: 5 }, id: String, placeholder: String },
+  emits: ["update:modelValue"],
+  setup(e, { emit: s }) {
+    const t = f(), { t: o, d: i } = $(), { open: l, root: d } = P(), v = (n, r) => s("update:modelValue", `${String(n).padStart(2, "0")}:${String(r).padStart(2, "0")}`);
+    return () => {
+      const [n, r] = (e.modelValue ?? "").split(":").map(Number);
+      return a("div", { ref: d, class: `${t.value}-picker` }, [
+        a("div", { class: `${t.value}-input-group` }, [
+          a("input", {
+            id: e.id,
+            readonly: !0,
+            class: `${t.value}-input`,
+            value: e.modelValue ? i(new Date(2e3, 0, 1, n, r), { hour: "numeric", minute: "2-digit" }) : "",
+            placeholder: e.placeholder ?? o("datepicker.selectTime"),
+            role: "combobox",
+            "aria-haspopup": "dialog",
+            "aria-expanded": String(l.value),
+            "aria-label": e.placeholder ?? o("datepicker.selectTime"),
+            onClick: () => l.value = !0
+          }),
+          a(_, { "aria-label": o("datepicker.selectTime"), onClick: () => l.value = !l.value }, () => w("clock"))
+        ]),
+        l.value ? a("div", { class: `${t.value}-picker__panel`, style: { minWidth: 0, flexDirection: "column" } }, [
+          a("div", { class: `${t.value}-time-list` }, [
+            a(
+              "ul",
+              { "aria-label": "hours" },
+              Array.from(
+                { length: 24 },
+                (c, u) => a(
+                  "li",
+                  { key: u },
+                  a(
+                    "button",
+                    { type: "button", class: V({ "is-selected": u === n }), onClick: () => v(u, Number.isNaN(r) ? 0 : r) },
+                    String(u).padStart(2, "0")
+                  )
+                )
+              )
+            ),
+            a(
+              "ul",
+              { "aria-label": "minutes" },
+              Array.from({ length: 60 / e.step }, (c, u) => u * e.step).map(
+                (c) => a(
+                  "li",
+                  { key: c },
+                  a(
+                    "button",
+                    {
+                      type: "button",
+                      class: V({ "is-selected": c === r }),
+                      onClick: () => {
+                        v(Number.isNaN(n) ? 0 : n, c), l.value = !1;
+                      }
+                    },
+                    String(c).padStart(2, "0")
+                  )
+                )
+              )
+            )
+          ]),
+          a(
+            "div",
+            { class: `${t.value}-picker__footer` },
+            a(
+              _,
+              {
+                size: "sm",
+                onClick: () => {
+                  const c = /* @__PURE__ */ new Date();
+                  v(c.getHours(), c.getMinutes()), l.value = !1;
+                }
+              },
+              () => o("datepicker.now")
+            )
+          )
+        ]) : null
+      ]);
+    };
+  }
+}), ge = [
+  "#0283cc",
+  "#00bbd9",
+  "#2ecc71",
+  "#ffb136",
+  "#e74a25",
+  "#4a23ad",
+  "#282f32",
+  "#8d9498",
+  "#0078bc",
+  "#25bf67",
+  "#f2a225",
+  "#d93c17",
+  "#693fd5",
+  "#4b555b",
+  "#e5ebec",
+  "#ffffff"
+], Me = /* @__PURE__ */ g({
+  name: "ThlColorPicker",
+  props: { modelValue: { type: String, default: "#0283cc" }, id: String, palette: { type: Array, default: () => ge } },
+  emits: ["update:modelValue"],
+  setup(e, { emit: s }) {
+    const t = f(), { t: o } = $(), { open: i, root: l } = P();
+    return () => a("div", { ref: l, class: `${t.value}-picker` }, [
+      a("div", { class: `${t.value}-input-group` }, [
+        a("span", { class: `${t.value}-input-group__addon` }, a("span", { class: `${t.value}-color-swatch`, style: { background: e.modelValue } })),
+        a("input", {
+          id: e.id,
+          class: `${t.value}-input`,
+          value: e.modelValue,
+          "aria-label": o("common.color"),
+          spellcheck: !1,
+          onInput: (d) => s("update:modelValue", d.target.value),
+          onFocus: () => i.value = !0
+        }),
+        a("input", {
+          type: "color",
+          value: e.modelValue,
+          "aria-label": o("common.color"),
+          onInput: (d) => s("update:modelValue", d.target.value),
+          style: { width: "44px", height: "auto", border: "1px solid var(--thl-border-color)", padding: "2px", background: "var(--thl-surface)" }
+        })
+      ]),
+      i.value ? a(
+        "div",
+        { class: `${t.value}-picker__panel`, style: { minWidth: 0 } },
+        a(
+          "div",
+          { class: `${t.value}-color-palette` },
+          e.palette.map(
+            (d) => a("button", {
+              key: d,
+              type: "button",
+              "aria-label": d,
+              class: V({ "is-selected": d.toLowerCase() === e.modelValue.toLowerCase() }),
+              style: { background: d },
+              onClick: () => {
+                s("update:modelValue", d), i.value = !1;
+              }
+            })
+          )
+        )
+      ) : null
+    ]);
+  }
+}), He = /* @__PURE__ */ g({
+  name: "ThlUpload",
+  props: {
+    accept: String,
+    maxSize: Number,
+    multiple: { type: Boolean, default: void 0 },
+    maxFiles: Number,
+    request: Function,
+    variant: X("list"),
+    hint: String
+  },
+  emits: ["change"],
+  setup(e, { emit: s }) {
+    const t = f(), { t: o } = $(), i = G("Upload", e), l = U(() => i.value.multiple ?? e.variant === "list"), d = se({
+      accept: i.value.accept,
+      maxSize: i.value.maxSize,
+      multiple: l.value,
+      maxFiles: e.maxFiles,
+      request: e.request,
+      onChange: (r) => s("change", r)
+    }), v = W(d.state), n = S();
+    return () => {
+      const r = x("upload", t.value), c = v.value, u = e.variant === "single" ? c.files[0] : void 0;
+      return a("div", { class: r() }, [
+        a(
+          "div",
+          {
+            role: "button",
+            tabindex: 0,
+            class: V(r("zone"), { "is-dragging": c.dragging }),
+            onClick: () => n.value?.click(),
+            onKeydown: (m) => {
+              (m.key === "Enter" || m.key === " ") && (m.preventDefault(), n.value?.click());
+            },
+            onDragenter: d.dragHandlers.onDragEnter,
+            onDragover: d.dragHandlers.onDragOver,
+            onDragleave: d.dragHandlers.onDragLeave,
+            onDrop: d.dragHandlers.onDrop
+          },
+          [
+            ...u ? [
+              a("div", { class: r("preview") }, [
+                u.preview ? a("img", { src: u.preview, alt: u.name }) : w("file", { class: r("icon") }),
+                a("div", { class: r("name") }, u.name),
+                a("small", o("upload.replace"))
+              ])
+            ] : [
+              w("cloud-upload", { class: r("icon") }),
+              a("div", e.variant === "single" ? o("upload.dropHere") : o("upload.dropMultiple")),
+              e.hint ? a("small", e.hint) : null
+            ],
+            a("input", {
+              ref: n,
+              type: "file",
+              class: r("input"),
+              accept: i.value.accept,
+              multiple: l.value,
+              tabindex: -1,
+              "aria-hidden": "true",
+              onChange: (m) => {
+                const p = m.target;
+                p.files && d.add(p.files), p.value = "";
+              }
+            })
+          ]
+        ),
+        c.errors.length ? a(
+          "div",
+          { class: r("errors"), role: "alert" },
+          c.errors.map((m, p) => a("div", { key: p }, o(m.key, m.params)))
+        ) : null,
+        e.variant === "list" && c.files.length ? a(
+          "ul",
+          { class: r("list") },
+          c.files.map(
+            (m) => a("li", { key: m.id, class: V(r("file"), { "is-error": m.status === "error" }) }, [
+              m.preview ? a("img", { src: m.preview, alt: "" }) : w("file-text", { size: 40 }),
+              a("div", { class: r("name"), title: m.name }, m.name),
+              a(
+                "div",
+                { class: r("meta") },
+                `${ue(m.size)} · ${m.status === "uploading" ? `${m.progress}%` : m.status === "done" ? o("upload.uploaded") : m.status === "error" ? o("upload.failed") : ""}`
+              ),
+              m.status === "uploading" ? a(
+                "div",
+                { class: `${t.value}-progress ${t.value}-progress--size-xs`, style: { margin: "6px 0 0" } },
+                a("div", { class: `${t.value}-progress__bar`, style: { width: `${m.progress}%` } })
+              ) : null,
+              a("button", { type: "button", class: r("remove"), onClick: () => d.remove(m.id), "aria-label": `${o("upload.remove")} ${m.name}` }, "×")
+            ])
+          )
+        ) : null,
+        u ? a(
+          "div",
+          { class: `${t.value}-mt-2` },
+          a(_, { size: "sm", variant: "danger", outline: !0, onClick: () => d.clear() }, () => o("upload.remove"))
+        ) : null
+      ]);
+    };
+  }
+}), Ue = /* @__PURE__ */ g({
+  name: "ThlEditor",
+  props: { modelValue: { type: String, default: "" }, placeholder: String, minHeight: Number, ariaLabel: String },
+  emits: ["update:modelValue"],
+  setup(e, { emit: s }) {
+    const t = f(), { t: o } = $(), i = S();
+    N(() => {
+      i.value && (i.value.innerHTML = e.modelValue);
+    }), A(
+      () => e.modelValue,
+      (v) => {
+        i.value && i.value.innerHTML !== v && (i.value.innerHTML = v);
+      }
+    );
+    const l = (v, n) => {
+      document.execCommand(v, !1, n), i.value?.focus(), s("update:modelValue", i.value?.innerHTML ?? "");
+    }, d = [
+      ["bold", "bold"],
+      ["italic", "italic"],
+      ["underline", "underline"],
+      ["list", "insertUnorderedList"],
+      ["list-ordered", "insertOrderedList"],
+      ["quote", "formatBlock", "blockquote"],
+      ["link", "createLink"],
+      ["undo-2", "undo"],
+      ["redo-2", "redo"]
+    ];
+    return () => {
+      const v = x("editor", t.value);
+      return a("div", { class: v() }, [
+        a(
+          "div",
+          { class: v("toolbar"), role: "toolbar", "aria-label": o("common.editor") },
+          d.map(
+            ([n, r, c]) => a(
+              "button",
+              {
+                key: r + (c ?? ""),
+                type: "button",
+                "aria-label": r,
+                onMousedown: (u) => u.preventDefault(),
+                onClick: () => l(r, r === "createLink" ? window.prompt("URL") ?? void 0 : c)
+              },
+              w(n)
+            )
+          )
+        ),
+        a("div", {
+          ref: i,
+          class: v("content"),
+          contenteditable: "true",
+          role: "textbox",
+          "aria-multiline": "true",
+          "aria-label": e.ariaLabel ?? e.placeholder ?? o("common.editor"),
+          "data-placeholder": e.placeholder,
+          style: { minHeight: e.minHeight ? `${e.minHeight}px` : void 0 },
+          onInput: (n) => s("update:modelValue", n.target.innerHTML)
+        })
+      ]);
+    };
+  }
+});
+export {
+  H as ThlCalendarGrid,
+  ve as ThlCheckbox,
+  _e as ThlCheckboxGroup,
+  Me as ThlColorPicker,
+  Pe as ThlDatePicker,
+  qe as ThlDateRangePicker,
+  Ue as ThlEditor,
+  Te as ThlField,
+  Be as ThlFloatingLabel,
+  xe as ThlForm,
+  we as ThlFormActions,
+  $e as ThlInput,
+  Ae as ThlInputGroup,
+  De as ThlNativeSelect,
+  Ie as ThlNumberInput,
+  be as ThlRadio,
+  ze as ThlRadioGroup,
+  he as ThlSelect,
+  Ne as ThlSlider,
+  Le as ThlSwitch,
+  Ee as ThlTagsInput,
+  Ce as ThlTextarea,
+  Fe as ThlTimePicker,
+  He as ThlUpload
+};
+//# sourceMappingURL=form.js.map