@oneb/ui-vue 0.3.31 → 0.4.0

package/dist/form/index.js

@@ -1,606 +1,98 @@
-import { inject as P, computed as s, defineComponent as V, provide as D, openBlock as a, createElementBlock as t, withModifiers as R, renderSlot as C, unref as i, createElementVNode as c, createTextVNode as U, toDisplayString as h, Fragment as O, renderList as I, createCommentVNode as v, ref as M, onMounted as W, normalizeClass as $, createBlock as B, resolveDynamicComponent as X, createVNode as K, withCtx as Y } from "vue";
-import { r as Z } from "../XMarkIcon-51ef0691.js";
-const x = {
-  id: {
-    type: String,
-    required: !1
-  },
-  validation: {
-    type: Object,
-    required: !1
-  }
-}, _ = {
-  id: {
-    type: String,
-    required: !1
-  },
-  label: {
-    type: String,
-    required: !1
-  },
-  name: {
-    type: String,
-    required: !1
-  },
-  required: {
-    required: !1,
-    type: Boolean,
-    default: !1
-  },
-  hint: {
-    type: String,
-    required: !1,
-    default: ""
-  },
-  errors: {
-    type: Array,
-    required: !1
-  }
-}, ee = {
-  name: {
-    type: String,
-    required: !1
-  },
-  errors: {
-    type: Array,
-    required: !1
-  }
-}, re = {
-  label: {
-    type: String,
-    required: !1
-  }
-}, ae = {
-  /** Unique identifier for the input element */
-  id: {
-    type: String,
-    required: !1
-  },
-  /** Name attribute for form submission */
-  name: {
-    type: String,
-    required: !1
-  },
-  /** Placeholder text displayed when input is empty */
-  placeholder: {
-    type: String,
-    default: ""
-  },
-  /** Icon component to display at the start of the input */
-  icon: {
-    type: [Function, Object]
-  },
-  /** Type of input field */
-  type: {
-    type: String,
-    default: "text"
-  },
-  /** Additional CSS classes to apply to the input element */
-  inputClass: {
-    required: !1,
-    type: [Array, String]
-  },
-  /** Current value of the input (v-model) */
-  modelValue: {
-    required: !1,
-    type: [String, Number, Array, Boolean, Object, null]
-  },
-  /** Auto-focus the input when component mounts */
-  autofocus: {
-    type: Boolean,
-    default: !1
-  },
-  /** Mark input as required (adds asterisk to label) */
-  required: {
-    type: Boolean,
-    default: !1
-  },
-  /** Disable the input field */
-  disabled: {
-    type: Boolean,
-    default: !1
-  },
-  /** Make the input read-only */
-  readonly: {
-    type: Boolean,
-    default: !1
-  },
-  /** Show clear button when input has value */
-  clearable: {
-    type: Boolean,
-    default: !1
-  },
-  /** Use rounded styling (full rounded borders) */
-  rounded: {
-    type: Boolean,
-    default: !1
-  },
-  /** Use large size styling */
-  large: {
-    type: Boolean,
-    default: !1
-  },
-  /** Mark input as invalid (shows error styling) */
-  invalid: {
-    type: Boolean,
-    required: !1,
-    default: !1
-  },
-  /** Options array for select and radio inputs */
-  options: {
-    type: Array,
-    required: !1,
-    default: []
-  },
-  /** HTML autocomplete attribute value */
-  autocomplete: {
-    type: String,
-    required: !1,
-    default: ""
-  },
-  /** Maximum length of text input */
-  maxlength: {
-    type: Number,
-    required: !1
-  },
-  /** Minimum length of text input */
-  minlength: {
-    type: Number,
-    required: !1
-  },
-  /** Minimum value for number/date inputs */
-  min: {
-    type: [Number, String],
-    required: !1
-  },
-  /** Maximum value for number/date inputs */
-  max: {
-    type: [Number, String],
-    required: !1
-  },
-  /** Step increment for number/range inputs */
-  step: {
-    type: [Number, String],
-    required: !1
-  },
-  /** Validation pattern (regex) for text inputs */
-  pattern: {
-    type: String,
-    required: !1
-  },
-  /** Number of rows for textarea */
-  rows: {
-    type: Number,
-    default: 3
-  },
-  /** Number of columns for textarea */
-  cols: {
-    type: Number,
-    required: !1
-  },
-  /** Allow textarea to be resized */
-  resize: {
-    type: String,
-    default: "vertical"
-  },
-  /** Spellcheck attribute for text inputs */
-  spellcheck: {
-    type: Boolean,
-    required: !1
-  },
-  /** Input mode for mobile keyboards */
-  inputmode: {
-    type: String,
-    required: !1
-  },
-  /** Tab index for keyboard navigation */
-  tabindex: {
-    type: Number,
-    required: !1
-  },
-  /** Aria label for accessibility */
-  ariaLabel: {
-    type: String,
-    required: !1
-  },
-  /** Aria described by for accessibility */
-  ariaDescribedby: {
-    type: String,
-    required: !1
-  }
-}, T = () => P(
-  "BaseForm",
-  () => ({
-    formId: s(() => {
-    }),
-    validation: s(() => {
-    })
-  }),
-  !0
-), j = () => P(
-  "BaseFormField",
-  () => ({
-    inputId: s(() => {
-    }),
-    inputName: s(() => {
-    }),
-    hasError: s(() => !1)
-  }),
-  !0
-), le = ["id"], Ve = /* @__PURE__ */ V({
+import { defineComponent as u, provide as v, computed as l, openBlock as n, createElementBlock as a, withModifiers as b, renderSlot as m, unref as $, createElementVNode as y, createTextVNode as k, toDisplayString as d, Fragment as g, renderList as O, createCommentVNode as c, createBlock as _, withCtx as N, createVNode as B } from "vue";
+import { f as I, a as x, i as F, b as E, c as h, d as L, _ as P } from "../OneFormInput.vue_vue_type_script_setup_true_lang-b89117e7.js";
+import "../XMarkIcon-51ef0691.js";
+const S = ["id"], A = /* @__PURE__ */ u({
   __name: "OneForm",
-  props: x,
+  props: I,
   emits: ["submit"],
-  setup(m, { emit: l }) {
-    const d = m, r = l;
-    D("BaseForm", {
-      formId: s(() => d.id),
-      validation: s(() => d.validation)
+  setup(i, { emit: e }) {
+    const t = i, o = e;
+    v("BaseForm", {
+      formId: l(() => t.id),
+      validation: l(() => t.validation)
     });
-    const n = () => {
-      r("submit");
+    const s = () => {
+      o("submit");
     };
-    return (o, f) => (a(), t("form", {
-      onSubmit: R(n, ["prevent"]),
-      id: o.id,
+    return (r, p) => (n(), a("form", {
+      onSubmit: b(s, ["prevent"]),
+      id: r.id,
       class: "space-y-3"
     }, [
-      C(o.$slots, "default")
-    ], 40, le));
+      m(r.$slots, "default")
+    ], 40, S));
   }
-}), ne = ["for"], te = /* @__PURE__ */ V({
+}), V = ["for"], j = /* @__PURE__ */ u({
   __name: "OneFormLabel",
-  props: re,
-  setup(m) {
-    const { inputId: l } = j();
-    return (d, r) => (a(), t("label", {
-      for: i(l),
+  props: x,
+  setup(i) {
+    const { inputId: e } = F();
+    return (t, o) => (n(), a("label", {
+      for: $(e),
       class: "text-sm font-medium text-primary-content select-none flex justify-between"
     }, [
-      c("span", null, [
-        C(d.$slots, "default", {}, () => [
-          U(h(d.label), 1)
+      y("span", null, [
+        m(t.$slots, "default", {}, () => [
+          k(d(t.label), 1)
         ])
       ]),
-      C(d.$slots, "right")
-    ], 8, ne));
+      m(t.$slots, "right")
+    ], 8, V));
   }
-}), oe = {
+}), w = {
   key: 0,
   class: "text-danger-content text-xs space-y-1"
-}, se = /* @__PURE__ */ V({
+}, C = /* @__PURE__ */ u({
   __name: "OneFormFeedback",
-  props: ee,
-  setup(m) {
-    const l = m, { validation: d } = T(), { inputName: r } = j(), n = s(() => r.value == null && l.name == null ? l.errors ?? [] : d.value == null ? l.errors ?? [] : (d.value ?? {})[l.name || r.value] ?? l.errors ?? []);
-    return (o, f) => n.value.length > 0 ? (a(), t("div", oe, [
-      (a(!0), t(O, null, I(n.value, (y) => (a(), t("div", { key: y }, h(y), 1))), 128))
-    ])) : v("", !0);
-  }
-});
-function de(m, l) {
-  return a(), t("svg", {
-    xmlns: "http://www.w3.org/2000/svg",
-    fill: "none",
-    viewBox: "0 0 24 24",
-    "stroke-width": "1.8",
-    stroke: "currentColor",
-    "aria-hidden": "true"
-  }, [
-    c("path", {
-      "stroke-linecap": "round",
-      "stroke-linejoin": "round",
-      d: "M2.036 12.322a1.012 1.012 0 010-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178z"
-    }),
-    c("path", {
-      "stroke-linecap": "round",
-      "stroke-linejoin": "round",
-      d: "M15 12a3 3 0 11-6 0 3 3 0 016 0z"
-    })
-  ]);
-}
-function ie(m, l) {
-  return a(), t("svg", {
-    xmlns: "http://www.w3.org/2000/svg",
-    fill: "none",
-    viewBox: "0 0 24 24",
-    "stroke-width": "1.8",
-    stroke: "currentColor",
-    "aria-hidden": "true"
-  }, [
-    c("path", {
-      "stroke-linecap": "round",
-      "stroke-linejoin": "round",
-      d: "M3.98 8.223A10.477 10.477 0 001.934 12C3.226 16.338 7.244 19.5 12 19.5c.993 0 1.953-.138 2.863-.395M6.228 6.228A10.45 10.45 0 0112 4.5c4.756 0 8.773 3.162 10.065 7.498a10.523 10.523 0 01-4.293 5.774M6.228 6.228L3 3m3.228 3.228l3.65 3.65m7.894 7.894L21 21m-3.228-3.228l-3.65-3.65m0 0a3 3 0 10-4.243-4.243m4.242 4.242L9.88 9.88"
-    })
-  ]);
-}
-const ue = ["id", "disabled", "tabindex"], pe = ["selected"], me = ["selected", "value"], ce = ["name", "id", "value", "rows", "cols", "maxlength", "minlength", "spellcheck", "placeholder", "disabled", "readonly", "tabindex", "aria-label", "aria-describedby"], ye = {
-  key: 2,
-  class: "flex w-full space-x-3 items-center"
-}, fe = ["type", "name", "id", "disabled", "readonly", "tabindex", "aria-label", "aria-describedby", "checked"], be = ["for"], he = {
-  key: 3,
-  class: "w-full space-y-1"
-}, ve = ["name", "id", "value", "disabled", "readonly", "tabindex", "checked"], ge = ["for"], ke = {
-  key: 4,
-  class: "relative"
-}, we = { class: "absolute p-2 px-3 rounded-md h-full flex items-center select-none pointer-events-none" }, qe = ["type", "name", "id", "value", "placeholder", "disabled", "readonly", "maxlength", "minlength", "min", "max", "step", "pattern", "spellcheck", "inputmode", "tabindex", "autocomplete", "aria-label", "aria-describedby"], Fe = /* @__PURE__ */ V({
-  __name: "OneFormInput",
-  props: ae,
-  emits: ["update:modelValue", "focus", "blur", "change", "input", "keydown", "keyup", "keypress", "clear", "toggle-password"],
-  setup(m, { expose: l, emit: d }) {
-    const r = m, n = d, { inputId: o, inputName: f, hasError: y } = j(), u = M(null), g = M(!1);
-    W(() => {
-      r.autofocus && u.value && u.value.focus();
-    });
-    const G = s(() => r.modelValue != null && r.modelValue !== ""), b = s(() => {
-      if (r.id)
-        return r.id;
-      const e = (o == null ? void 0 : o.value) || "";
-      return r.name ? `${e}-${r.name}` : e || "";
-    }), H = () => {
-      n("update:modelValue", ""), n("clear"), L();
-    }, J = () => {
-      g.value = !g.value, n("toggle-password", g.value);
-    }, L = () => {
-      if (u.value) {
-        const e = Array.isArray(u.value) ? u.value[0] : u.value;
-        e == null || e.focus();
-      }
-    }, Q = s(() => {
-      const e = {
-        "shadow-sm": r.type !== "range",
-        "border-danger-base": y.value || r.invalid,
-        "pl-10": r.icon != null,
-        "pr-10": r.type === "password",
-        "rounded-full": r.rounded,
-        "rounded-md": !r.rounded,
-        "text-lg": r.large,
-        "py-2.5": r.large,
-        "py-2": !r.large
-      };
-      return r.inputClass != null && (typeof r.inputClass == "string" ? e[r.inputClass] = !0 : r.inputClass instanceof Array && r.inputClass.forEach((S) => {
-        e[S] = !0;
-      })), e;
-    }), k = (e) => {
-      const S = e.target;
-      if (r.type === "checkbox") {
-        const p = S.checked;
-        n("update:modelValue", p), n("input", e);
-      } else
-        n("update:modelValue", S.value), n("input", e);
-    }, w = (e) => n("focus", e), q = (e) => n("blur", e), F = (e) => n("change", e), N = (e) => n("keydown", e), z = (e) => n("keyup", e), E = (e) => n("keypress", e);
-    return l({
-      focus: L
-    }), (e, S) => e.type === "select" ? (a(), t("select", {
-      key: 0,
-      id: b.value,
-      ref_key: "inputElement",
-      ref: u,
-      class: $(["border border-primary-stroke px-3 w-full", {
-        "border-danger-base": i(y) || e.invalid,
-        "text-secondary-content": e.modelValue === "" || e.modelValue == null,
-        "rounded-full": e.rounded,
-        "rounded-md": !e.rounded,
-        "text-lg": e.large,
-        "py-2.5": e.large,
-        "py-2": !e.large
-      }]),
-      disabled: e.disabled,
-      tabindex: e.tabindex,
-      onInput: k,
-      onFocus: w,
-      onBlur: q,
-      onChange: F,
-      onKeydown: N,
-      onKeyup: z,
-      onKeypress: E
-    }, [
-      e.placeholder ? (a(), t("option", {
-        key: 0,
-        selected: e.modelValue === "" || e.modelValue == null,
-        disabled: "",
-        hidden: ""
-      }, h(e.placeholder), 9, pe)) : v("", !0),
-      (a(!0), t(O, null, I(e.options, (p) => (a(), t("option", {
-        selected: p.key === e.modelValue,
-        key: p.key,
-        value: p.key
-      }, h(p.value), 9, me))), 128))
-    ], 42, ue)) : e.type === "textarea" ? (a(), t("textarea", {
-      key: 1,
-      name: e.name || i(f),
-      id: b.value,
-      value: e.modelValue,
-      rows: e.rows,
-      cols: e.cols,
-      maxlength: e.maxlength,
-      minlength: e.minlength,
-      spellcheck: e.spellcheck,
-      placeholder: e.placeholder,
-      disabled: e.disabled,
-      readonly: e.readonly,
-      tabindex: e.tabindex,
-      "aria-label": e.ariaLabel,
-      "aria-describedby": e.ariaDescribedby,
-      onInput: k,
-      onFocus: w,
-      onBlur: q,
-      onChange: F,
-      onKeydown: N,
-      onKeyup: z,
-      onKeypress: E,
-      class: $(["border border-primary-stroke px-3 w-full placeholder-gray-400", {
-        "border-danger-base": i(y),
-        "rounded-3xl": e.rounded,
-        "rounded-md": !e.rounded,
-        "text-lg": e.large,
-        "py-2.5": e.large,
-        "py-2": !e.large,
-        "resize-none": e.resize === "none",
-        "resize-both": e.resize === "both",
-        "resize-x": e.resize === "horizontal",
-        "resize-y": e.resize === "vertical"
-      }]),
-      ref_key: "inputElement",
-      ref: u
-    }, null, 42, ce)) : e.type === "checkbox" ? (a(), t("div", ye, [
-      c("input", {
-        type: e.type,
-        name: e.name || i(f),
-        id: b.value,
-        value: !0,
-        disabled: e.disabled,
-        readonly: e.readonly,
-        tabindex: e.tabindex,
-        "aria-label": e.ariaLabel,
-        "aria-describedby": e.ariaDescribedby,
-        checked: e.modelValue === !0,
-        onInput: k,
-        onFocus: w,
-        onBlur: q,
-        onChange: F,
-        class: $(["rounded-md border border-primary-stroke px-2 py-2 shadow-sm", {
-          "border-danger-base": i(y) || e.invalid
-        }]),
-        ref_key: "inputElement",
-        ref: u
-      }, null, 42, fe),
-      c("label", {
-        for: b.value,
-        class: "text-primary-content select-none"
-      }, h(e.placeholder), 9, be)
-    ])) : e.type === "radio" ? (a(), t("div", he, [
-      (a(!0), t(O, null, I(e.options, (p, A) => (a(), t("div", {
-        key: p.key,
-        class: "flex w-full space-x-3 items-center"
-      }, [
-        c("input", {
-          type: "radio",
-          name: e.name || i(f),
-          id: `${b.value}-${A}`,
-          value: p.key,
-          disabled: e.disabled,
-          readonly: e.readonly,
-          tabindex: e.tabindex,
-          checked: p.key === e.modelValue,
-          onInput: k,
-          onFocus: w,
-          onBlur: q,
-          onChange: F,
-          class: $(["rounded-md border border-primary-stroke px-3 py-2 shadow-sm", {
-            "border-danger-base": i(y) || e.invalid
-          }]),
-          ref_for: !0,
-          ref_key: "inputElement",
-          ref: u
-        }, null, 42, ve),
-        c("label", {
-          for: `${b.value}-${A}`,
-          class: "text-primary-content select-none"
-        }, h(p.value), 9, ge)
-      ]))), 128))
-    ])) : (a(), t("div", ke, [
-      c("div", we, [
-        e.icon ? (a(), B(X(e.icon), {
-          key: 0,
-          class: "w-5 h-5 text-primary-content"
-        })) : v("", !0)
-      ]),
-      c("input", {
-        type: g.value ? "text" : e.type,
-        name: e.name || i(f),
-        id: b.value,
-        value: e.modelValue,
-        placeholder: e.placeholder,
-        disabled: e.disabled,
-        readonly: e.readonly,
-        maxlength: e.maxlength,
-        minlength: e.minlength,
-        min: e.min,
-        max: e.max,
-        step: e.step,
-        pattern: e.pattern,
-        spellcheck: e.spellcheck,
-        inputmode: e.inputmode,
-        tabindex: e.tabindex,
-        autocomplete: e.autocomplete,
-        "aria-label": e.ariaLabel,
-        "aria-describedby": e.ariaDescribedby,
-        onInput: k,
-        onFocus: w,
-        onBlur: q,
-        onChange: F,
-        onKeydown: N,
-        onKeyup: z,
-        onKeypress: E,
-        class: $(["border border-primary-stroke w-full px-3 placeholder-gray-400 disabled:bg-gray-50", Q.value]),
-        ref_key: "inputElement",
-        ref: u
-      }, null, 42, qe),
-      e.clearable && G.value ? (a(), t("div", {
-        key: 0,
-        onClick: H,
-        class: "absolute p-2 px-3 rounded-md h-full flex items-center right-0 top-0 hover:cursor-pointer select-none"
-      }, [
-        K(i(Z), { class: "w-5 h-5 text-secondary-content hover:text-primary-base" })
-      ])) : e.type === "password" ? (a(), t("div", {
-        key: 1,
-        onClick: J,
-        class: "absolute p-2 px-3 rounded-md h-full flex items-center right-0 top-0 hover:cursor-pointer select-none"
-      }, [
-        g.value ? (a(), B(i(ie), {
-          key: 0,
-          class: "w-5 h-5 text-primary-content hover:text-primary-base"
-        })) : (a(), B(i(de), {
-          key: 1,
-          class: "w-5 h-5 text-secondary-content hover:text-primary-base"
-        }))
-      ])) : v("", !0)
-    ]));
+  props: E,
+  setup(i) {
+    const e = i, { validation: t } = h(), { inputName: o } = F(), s = l(() => o.value == null && e.name == null ? e.errors ?? [] : t.value == null ? e.errors ?? [] : (t.value ?? {})[e.name || o.value] ?? e.errors ?? []);
+    return (r, p) => s.value.length > 0 ? (n(), a("div", w, [
+      (n(!0), a(g, null, O(s.value, (f) => (n(), a("div", { key: f }, d(f), 1))), 128))
+    ])) : c("", !0);
   }
-}), Se = { class: "space-y-1" }, $e = {
+}), D = { class: "space-y-1" }, M = {
   key: 2,
   class: "text-xs text-secondary-content select-none"
-}, Ne = /* @__PURE__ */ V({
+}, G = /* @__PURE__ */ u({
   __name: "OneFormField",
-  props: _,
-  setup(m) {
-    const l = m, { formId: d, validation: r } = T(), n = s(() => l.errors != null && l.errors.length > 0 ? !0 : l.name == null ? !1 : (r.value ?? {})[l.name] != null);
-    return D("BaseFormField", {
-      inputId: s(() => {
-        const o = d.value || "form";
-        if (l.id != null)
-          return `${o}-${l.id}`;
-        if (l.name != null)
-          return `${o}-field-${l.name}`;
+  props: L,
+  setup(i) {
+    const e = i, { formId: t, validation: o } = h(), s = l(() => e.errors != null && e.errors.length > 0 ? !0 : e.name == null ? !1 : (o.value ?? {})[e.name] != null);
+    return v("BaseFormField", {
+      inputId: l(() => {
+        const r = t.value || "form";
+        if (e.id != null)
+          return `${r}-${e.id}`;
+        if (e.name != null)
+          return `${r}-field-${e.name}`;
       }),
-      inputName: s(() => l.name),
-      hasError: n
-    }), (o, f) => (a(), t("div", Se, [
-      o.label ? (a(), B(te, {
+      inputName: l(() => e.name),
+      hasError: s
+    }), (r, p) => (n(), a("div", D, [
+      r.label ? (n(), _(j, {
         key: 0,
-        label: o.label
+        label: r.label
       }, {
-        right: Y(() => [
-          C(o.$slots, "right")
+        right: N(() => [
+          m(r.$slots, "right")
         ]),
         _: 3
-      }, 8, ["label"])) : v("", !0),
-      C(o.$slots, "default", {}, () => [
-        K(Fe)
+      }, 8, ["label"])) : c("", !0),
+      m(r.$slots, "default", {}, () => [
+        B(P)
       ]),
-      n.value ? (a(), B(se, {
+      s.value ? (n(), _(C, {
         key: 1,
-        errors: o.errors
-      }, null, 8, ["errors"])) : o.hint.length > 0 ? (a(), t("p", $e, h(o.hint), 1)) : v("", !0)
+        errors: r.errors
+      }, null, 8, ["errors"])) : r.hint.length > 0 ? (n(), a("p", M, d(r.hint), 1)) : c("", !0)
     ]));
   }
 });
 export {
-  Ve as OneForm,
-  se as OneFormFeedback,
-  Ne as OneFormField,
-  Fe as OneFormInput,
-  te as OneFormLabel
+  A as OneForm,
+  C as OneFormFeedback,
+  G as OneFormField,
+  P as OneFormInput,
+  j as OneFormLabel
 };