vlite3 1.1.2 → 1.1.4

package/components/Form/FormField.vue.js

@@ -1,23 +1,25 @@
-import { defineComponent as E, computed as r, markRaw as H, openBlock as f, createBlock as m, mergeProps as c, toHandlers as L, createSlots as q, unref as P, withCtx as d, createVNode as N, createTextVNode as p, toDisplayString as h, createCommentVNode as U, resolveDynamicComponent as G } from "vue";
-import { resolveFieldType as J, isComponent as V, isAddonObject as g } from "./utils/form.utils.js";
+import { defineComponent as H, computed as o, markRaw as M, openBlock as c, createBlock as m, mergeProps as p, toHandlers as L, createSlots as q, unref as P, withCtx as s, createVNode as N, createTextVNode as b, toDisplayString as y, createCommentVNode as B, resolveDynamicComponent as G } from "vue";
+import { resolveFieldType as J, isComponent as R, isAddonObject as x } from "./utils/form.utils.js";
 import K from "../NumberInput.vue.js";
-import b from "../Button.vue.js";
-import { $t as M } from "../../utils/i18n.js";
-import y from "../Input.vue.js";
+import z from "../Button.vue.js";
+import { $t as Q } from "../../utils/i18n.js";
+import V from "../Input.vue.js";
 /* empty css            */
-import Q from "../Switch.vue.js";
-import W from "../CheckBox.vue.js";
-import X from "../FilePicker/FilePicker.vue.js";
-import Y from "../AvatarUploader/AvatarUploader.vue.js";
-import Z from "../ThumbnailSelector/ThumbnailSelector.vue.js";
-import k from "../Dropdown/Dropdown.vue.js";
-import _ from "../MultiSelect/MultiSelect.vue.js";
-import ee from "../DatePicker.vue.js";
-import ae from "../DateRangePicker.vue.js";
-import le from "../ColorPicker/ColorPicker.vue.js";
-import te from "../IconPicker.vue.js";
-import ie from "./CustomFields.vue.js";
-const ke = /* @__PURE__ */ E({
+import W from "../Switch.vue.js";
+import X from "../CheckBox.vue.js";
+import Y from "../FilePicker/FilePicker.vue.js";
+import Z from "../AvatarUploader/AvatarUploader.vue.js";
+import _ from "../ThumbnailSelector/ThumbnailSelector.vue.js";
+import ee from "../TagInput/TagInput.vue.js";
+import w from "../Dropdown/Dropdown.vue.js";
+import ae from "../MultiSelect/MultiSelect.vue.js";
+import le from "../DatePicker.vue.js";
+import ie from "../DateRangePicker.vue.js";
+import te from "../ColorPicker/ColorPicker.vue.js";
+import ne from "../IconPicker.vue.js";
+import re from "./CustomFields.vue.js";
+import de from "../ChoiceBox/ChoiceBox.vue.js";
+const Pe = /* @__PURE__ */ H({
   __name: "FormField",
   props: {
     field: {},
@@ -36,21 +38,21 @@ const ke = /* @__PURE__ */ E({
     loading: { type: Boolean, default: !1 }
   },
   emits: ["change", "addonChange", "addonAction"],
-  setup(t, { emit: B }) {
-    const e = t, v = B, o = (a, l) => {
+  setup(i, { emit: U }) {
+    const e = i, v = U, d = (a, l) => {
       v("change", { value: a, data: l });
-    }, R = (a) => {
+    }, S = (a) => {
       v("change", { value: a });
-    }, u = r(() => J(e.field, {
+    }, u = o(() => J(e.field, {
       values: e.values,
       globalValues: e.values,
       isUpdate: e.isUpdate
-    })), x = r(
+    })), k = o(
       () => u.value === "number" && e.field.isSensitiveField === !0
-    ), I = r(() => {
+    ), T = o(() => {
       const a = u.value;
-      if (V(a))
-        return H(a);
+      if (R(a))
+        return M(a);
       switch (a) {
         case "text":
         case "email":
@@ -59,53 +61,57 @@ const ke = /* @__PURE__ */ E({
         case "url":
         case "search":
         case "textarea":
-          return y;
+          return V;
         case "number":
-          return x.value ? y : K;
+          return k.value ? V : K;
         case "switch":
-          return Q;
-        case "check":
           return W;
+        case "check":
+          return X;
         case "select":
-          return k;
+          return w;
         case "multiSelect":
-          return _;
+          return ae;
+        case "choiceBox":
+          return de;
         case "date":
         case "time":
-          return ee;
+          return le;
         case "dateRangePicker":
-          return ae;
+          return ie;
         case "file":
         case "fileUploader":
-          return X;
-        case "avatarUpload":
           return Y;
+        case "avatarUpload":
+          return Z;
         case "color":
-          return le;
-        case "iconPicker":
           return te;
+        case "iconPicker":
+          return ne;
         case "customFields":
-          return ie;
+          return re;
         case "thumbnailSelector":
-          return Z;
+          return _;
+        case "tags":
+          return ee;
         default:
-          return y;
+          return V;
       }
-    }), w = r(() => {
-      const a = u.value, { disabled: l, readonly: i, ...D } = e.field, n = {
-        ...D,
+    }), A = o(() => {
+      const a = u.value, { disabled: l, readonly: n, ...g } = e.field, t = {
+        ...g,
         disabled: e.disabled || l === !0,
-        readonly: e.readonly || i === !0,
+        readonly: e.readonly || n === !0,
         ...e.field.props || {},
         label: "",
         labelI18n: ""
-      }, $ = e.field.placeholderI18n ? M(e.field.placeholderI18n) : e.field.placeholder, z = e.variant === "floating" && e.label && !e.floatingActive, s = z ? "" : $;
+      }, h = e.field.placeholderI18n ? Q(e.field.placeholderI18n) : e.field.placeholder, I = e.variant === "floating" && e.label && !e.floatingActive, f = I ? "" : h;
       if (a === "text" || a === "email" || a === "password" || a === "tel" || a === "url" || a === "search" || a === "textarea" || !a)
         return {
-          ...n,
+          ...t,
           modelValue: e.value ?? "",
           type: a || "text",
-          placeholder: s,
+          placeholder: f,
           label: e.label,
           icon: e.field.icon,
           iconRight: e.field.iconRight,
@@ -121,14 +127,14 @@ const ke = /* @__PURE__ */ E({
           rows: a === "textarea" ? e.field.props?.rows || 3 : void 0,
           class: `${e.field.className || ""}`
         };
-      if (a === "number" && x.value)
+      if (a === "number" && k.value)
         return {
-          ...n,
+          ...t,
           // Convert numeric value to string so Input.vue (string-based) displays it correctly
           modelValue: e.value !== void 0 && e.value !== null ? String(e.value) : "",
           // 'password' activates the eye-toggle inside Input.vue
           type: "password",
-          placeholder: s,
+          placeholder: f,
           label: e.label,
           variant: e.variant,
           size: e.size,
@@ -140,7 +146,7 @@ const ke = /* @__PURE__ */ E({
         };
       if (a === "number")
         return {
-          ...n,
+          ...t,
           modelValue: e.value ?? void 0,
           min: e.field.min,
           max: e.field.max,
@@ -149,78 +155,108 @@ const ke = /* @__PURE__ */ E({
           mode: e.field.props?.mode ?? (e.variant === "transparent" ? "ghost" : "outline"),
           size: e.size,
           rounded: e.rounded,
-          placeholder: s,
+          placeholder: f,
           class: e.field.className
         };
-      if (a === "switch")
+      if (a === "switch") {
+        const { variant: r, size: oe, rounded: se, error: ue, switchVariant: fe, ...E } = t;
         return {
-          ...n,
+          ...E,
           modelValue: !!e.value,
-          size: "sm",
-          label: ""
-          // Label handled externally
+          label: e.field.label,
+          labelI18n: e.field.labelI18n,
+          description: e.field.props?.description,
+          descriptionI18n: e.field.props?.descriptionI18n,
+          // Default to 'card' inside forms unless explicitly overridden via field.props.switchVariant
+          variant: e.field.props?.switchVariant ?? "card"
         };
+      }
       if (a === "check")
         return {
-          ...n,
+          ...t,
           modelValue: !!e.value,
           label: ""
           // Label handled externally
         };
       if (a === "select")
         return {
-          ...n,
+          ...t,
           modelValue: e.value,
           options: e.field.options || [],
-          placeholder: s,
+          placeholder: f,
           selectable: !0,
           closeOnSelect: !0,
           triggerProps: {
             variant: e.variant === "floating" ? "outline-floating" : e.variant || "outline",
             size: e.size,
-            ...z ? { text: "​" } : {}
+            ...I ? { text: "​" } : {}
           }
         };
       if (a === "multiSelect")
         return {
-          ...n,
+          ...t,
           modelValue: Array.isArray(e.value) ? e.value : [],
           options: e.field.options || [],
-          placeholder: $,
+          placeholder: h,
           variant: e.variant,
           size: e.size,
           rounded: e.rounded
         };
+      if (a === "choiceBox")
+        return {
+          ...t,
+          modelValue: e.value,
+          title: e.label,
+          titleI18n: e.field.labelI18n,
+          description: e.field.props?.description,
+          descriptionI18n: e.field.props?.descriptionI18n,
+          options: (e.field.options || []).map((r) => ({
+            id: r.value ?? r.label,
+            title: r.label,
+            titleI18n: r.labelI18n,
+            description: r.description || r.subtitle,
+            descriptionI18n: r.descriptionI18n || r.subtitleI18n,
+            icon: r.icon,
+            disabled: r.disabled,
+            badge: r.badge || r.data?.badge,
+            badgeI18n: r.badgeI18n || r.data?.badgeI18n,
+            data: r.data
+          })),
+          multiple: e.field.props?.multiple || !1,
+          grid: e.field.props?.grid || 1,
+          gap: e.field.props?.gap || 4,
+          class: e.field.className
+        };
       if (a === "date" || a === "time")
         return {
-          ...n,
+          ...t,
           modelValue: e.value,
           mode: a === "time" ? "time" : "date",
-          placeholder: s,
+          placeholder: f,
           btnProps: {
             variant: e.variant === "floating" ? "outline-floating" : e.variant || "outline",
             size: e.size,
             class: "px-3!",
-            ...z ? { text: "​" } : {}
+            ...I ? { text: "​" } : {}
           }
         };
       if (a === "dateRangePicker")
         return {
-          ...n,
+          ...t,
           modelValue: e.value,
           variant: e.variant === "floating" ? "outline-floating" : e.variant || "outline",
           size: e.size
         };
       if (a === "fileUploader" || a === "file")
         return {
-          ...n,
+          ...t,
           modelValue: e.value,
           multiSelect: e.field.props?.multiple || !1,
           maxFiles: e.field.maxFiles || e.field.props?.maxFiles,
           fileTypes: e.field.props?.accept ? e.field.props.accept.split(",") : [],
           returnFormat: "base64",
           variant: a === "file" ? "input" : "dropzone",
-          placeholder: s,
+          placeholder: f,
           size: e.size,
           rounded: e.rounded,
           maxSize: e.field.maxFileSize ? e.field.maxFileSize * 1024 * 1024 : void 0,
@@ -230,25 +266,36 @@ const ke = /* @__PURE__ */ E({
       if (a === "avatarUpload")
         return {
           size: "2xl",
-          ...n,
+          ...t,
           modelValue: e.value,
           editable: !e.readonly,
           maxSize: e.field.maxFileSize ? e.field.maxFileSize * 1024 * 1024 : void 0,
           loading: e.loading
         };
+      if (a === "tags")
+        return {
+          ...t,
+          modelValue: Array.isArray(e.value) ? e.value : [],
+          placeholder: f,
+          variant: e.variant,
+          size: e.size,
+          rounded: e.rounded,
+          maxTags: e.field.props?.maxTags,
+          class: e.field.className
+        };
       if (a === "color")
         return {
-          ...n,
+          ...t,
           modelValue: e.value || "#000000"
         };
       if (a === "iconPicker")
         return {
-          ...n,
+          ...t,
           value: e.value || "lucide:smile"
         };
       if (a === "customFields")
         return {
-          ...n,
+          ...t,
           name: e.field.name,
           label: e?.field?.label,
           labelI18n: e?.field?.labelI18n,
@@ -264,165 +311,174 @@ const ke = /* @__PURE__ */ E({
           isUpdate: e.isUpdate
         };
       if (a === "thumbnailSelector") {
-        const S = e.value && typeof e.value == "object" ? e.value : { images: [], thumbnail: null };
+        const r = e.value && typeof e.value == "object" ? e.value : { images: [], thumbnail: null };
         return {
-          ...n,
-          images: Array.isArray(S.images) ? S.images : [],
-          thumbnail: S.thumbnail ?? null,
+          ...t,
+          images: Array.isArray(r.images) ? r.images : [],
+          thumbnail: r.thumbnail ?? null,
           disabled: e.disabled || l === !0,
           loading: e.loading,
           maxSize: e.field.maxFileSize,
           label: e.field.label
         };
       }
-      return V(a) ? {
-        ...n,
+      return R(a) ? {
+        ...t,
         value: e.value,
         values: e.values
-      } : n;
-    }), F = r(() => {
+      } : t;
+    }), F = o(() => {
       const a = u.value;
       return a === "text" || a === "email" || a === "password" || a === "tel" || a === "url" || a === "search" || a === "textarea" || a === "switch" || a === "check" || !a ? {
-        "update:modelValue": R
-      } : a === "number" && x.value ? {
+        "update:modelValue": S
+      } : a === "number" && k.value ? {
         "update:modelValue": (l) => {
-          const i = l === "" ? void 0 : Number(l);
-          v("change", { value: isNaN(i) ? void 0 : i });
+          const n = l === "" ? void 0 : Number(l);
+          v("change", { value: isNaN(n) ? void 0 : n });
         }
       } : a === "number" ? {
-        "update:modelValue": R
+        "update:modelValue": S
       } : a === "select" ? {
         onSelect: (l) => {
-          o(l.value, l.data);
+          d(l.value, l.data);
         }
       } : a === "multiSelect" ? {
-        change: (l) => o(l)
+        change: (l) => d(l)
+      } : a === "choiceBox" ? {
+        change: (l) => {
+          const n = e.field.props?.multiple;
+          let g = null;
+          n && Array.isArray(l) ? g = l.map((t) => e.field.options?.find((h) => (h.value ?? h.label) === t)?.data) : g = e.field.options?.find((t) => (t.value ?? t.label) === l)?.data, d(l, g);
+        }
       } : a === "date" || a === "time" || a === "dateRangePicker" ? {
-        change: (l) => o(l)
+        change: (l) => d(l)
       } : a === "fileUploader" || a === "file" ? {
         change: (l) => {
-          o(l);
+          d(l);
         },
         "update:modelValue": (l) => {
-          o(l);
+          d(l);
         }
       } : a === "avatarUpload" ? {
         change: (l) => {
-          o(l);
+          d(l);
         },
         "update:modelValue": (l) => {
-          o(l);
+          d(l);
         }
+      } : a === "tags" ? {
+        "update:modelValue": S,
+        change: (l) => d(l)
       } : a === "color" ? {
-        change: (l) => o(l)
+        change: (l) => d(l)
       } : a === "iconPicker" ? {
-        onSelect: (l) => o(l)
+        onSelect: (l) => d(l)
       } : a === "customFields" ? {
-        change: (l) => o(l)
+        change: (l) => d(l)
       } : a === "thumbnailSelector" ? {
         change: (l) => {
-          o(l);
+          d(l);
         },
         "update:images": (l) => {
-          const i = e.value && typeof e.value == "object" ? e.value : { images: [], thumbnail: null };
-          o({ ...i, images: l });
+          const n = e.value && typeof e.value == "object" ? e.value : { images: [], thumbnail: null };
+          d({ ...n, images: l });
         },
         "update:thumbnail": (l) => {
-          const i = e.value && typeof e.value == "object" ? e.value : { images: [], thumbnail: null };
-          o({ ...i, thumbnail: l });
+          const n = e.value && typeof e.value == "object" ? e.value : { images: [], thumbnail: null };
+          d({ ...n, thumbnail: l });
         }
-      } : V(a) ? {
+      } : R(a) ? {
         onChange: (l) => {
-          o(l.value, l.data);
+          d(l.value, l.data);
         }
       } : {};
-    }), T = r(() => g(e.field.addonLeft) || g(e.field.addonRight)), j = r(() => {
+    }), j = o(() => x(e.field.addonLeft) || x(e.field.addonRight)), O = o(() => {
       const a = u.value;
       return a === "text" || a === "email" || a === "password" || a === "tel" || a === "url" || a === "search" || !a;
-    }), O = r(() => T.value && j.value), A = (a, l) => {
+    }), D = o(() => j.value && O.value), $ = (a, l) => {
       v("addonChange", a.name, { value: l.value });
     }, C = (a) => {
       a.action && v("addonAction", a.action);
     };
-    return (a, l) => O.value ? (f(), m(y, c({ key: 0 }, {
-      ...w.value,
-      ...t.field?.props || {}
+    return (a, l) => D.value ? (c(), m(V, p({ key: 0 }, {
+      ...A.value,
+      ...i.field?.props || {}
     }, L(F.value)), q({ _: 2 }, [
-      P(g)(t.field.addonLeft) ? {
+      P(x)(i.field.addonLeft) ? {
         name: "addon-left",
-        fn: d(() => [
-          t.field.addonLeft.type === "select" ? (f(), m(k, c({
+        fn: s(() => [
+          i.field.addonLeft.type === "select" ? (c(), m(w, p({
             key: 0,
-            modelValue: t.field.addonLeft.name ? t.values[t.field.addonLeft.name] : void 0,
-            options: t.field.addonLeft.options || []
-          }, t.field.addonLeft.props || {}, {
-            onOnSelect: l[0] || (l[0] = (i) => A(t.field.addonLeft, i))
+            modelValue: i.field.addonLeft.name ? i.values[i.field.addonLeft.name] : void 0,
+            options: i.field.addonLeft.options || []
+          }, i.field.addonLeft.props || {}, {
+            onOnSelect: l[0] || (l[0] = (n) => $(i.field.addonLeft, n))
           }), {
-            trigger: d(({ selectedLabel: i }) => [
-              N(b, { variant: "outline" }, {
-                default: d(() => [
-                  p(h(i), 1)
+            trigger: s(({ selectedLabel: n }) => [
+              N(z, { variant: "outline" }, {
+                default: s(() => [
+                  b(y(n), 1)
                 ]),
                 _: 2
               }, 1024)
             ]),
             _: 1
-          }, 16, ["modelValue", "options"])) : t.field.addonLeft.type === "button" ? (f(), m(b, c({
+          }, 16, ["modelValue", "options"])) : i.field.addonLeft.type === "button" ? (c(), m(z, p({
             key: 1,
             variant: "outline"
-          }, t.field.addonLeft.props || {}, {
-            onClick: l[1] || (l[1] = (i) => C(t.field.addonLeft))
+          }, i.field.addonLeft.props || {}, {
+            onClick: l[1] || (l[1] = (n) => C(i.field.addonLeft))
           }), {
-            default: d(() => [
-              p(h(t.field.addonLeft.text), 1)
+            default: s(() => [
+              b(y(i.field.addonLeft.text), 1)
             ]),
             _: 1
-          }, 16)) : U("", !0)
+          }, 16)) : B("", !0)
         ]),
         key: "0"
       } : void 0,
-      P(g)(t.field.addonRight) ? {
+      P(x)(i.field.addonRight) ? {
         name: "addon-right",
-        fn: d(() => [
-          t.field.addonRight.type === "select" ? (f(), m(k, c({
+        fn: s(() => [
+          i.field.addonRight.type === "select" ? (c(), m(w, p({
             key: 0,
-            modelValue: t.field.addonRight.name ? t.values[t.field.addonRight.name] : void 0,
-            options: t.field.addonRight.options || []
-          }, t.field.addonRight.props || {}, {
-            onOnSelect: l[2] || (l[2] = (i) => A(t.field.addonRight, i))
+            modelValue: i.field.addonRight.name ? i.values[i.field.addonRight.name] : void 0,
+            options: i.field.addonRight.options || []
+          }, i.field.addonRight.props || {}, {
+            onOnSelect: l[2] || (l[2] = (n) => $(i.field.addonRight, n))
           }), {
-            trigger: d(({ selectedLabel: i }) => [
-              N(b, { variant: "outline" }, {
-                default: d(() => [
-                  p(h(i), 1)
+            trigger: s(({ selectedLabel: n }) => [
+              N(z, { variant: "outline" }, {
+                default: s(() => [
+                  b(y(n), 1)
                 ]),
                 _: 2
               }, 1024)
             ]),
             _: 1
-          }, 16, ["modelValue", "options"])) : t.field.addonRight.type === "button" ? (f(), m(b, c({
+          }, 16, ["modelValue", "options"])) : i.field.addonRight.type === "button" ? (c(), m(z, p({
             key: 1,
             variant: "outline"
-          }, t.field.addonRight.props || {}, {
-            onClick: l[3] || (l[3] = (i) => C(t.field.addonRight))
+          }, i.field.addonRight.props || {}, {
+            onClick: l[3] || (l[3] = (n) => C(i.field.addonRight))
           }), {
-            default: d(() => [
-              p(h(t.field.addonRight.text), 1)
+            default: s(() => [
+              b(y(i.field.addonRight.text), 1)
             ]),
             _: 1
-          }, 16)) : U("", !0)
+          }, 16)) : B("", !0)
         ]),
         key: "1"
       } : void 0
-    ]), 1040)) : (f(), m(G(I.value), c({
+    ]), 1040)) : (c(), m(G(T.value), p({
       key: 1,
-      class: ["switch", "check"].includes(u.value) ? "" : "w-full"
+      class: u.value === "check" || u.value === "switch" && i.field.props?.switchVariant === "basic" ? "" : "w-full"
     }, {
-      ...w.value,
-      ...t.field?.props || {}
+      ...A.value,
+      ...i.field?.props || {}
     }, L(F.value)), null, 16, ["class"]));
   }
 });
 export {
-  ke as default
+  Pe as default
 };

package/components/Form/FormFields.vue.js

@@ -1,7 +1,7 @@
 import o from "./FormFields.vue2.js";
 /* empty css                */
 import r from "../../_virtual/_plugin-vue_export-helper.js";
-const s = /* @__PURE__ */ r(o, [["__scopeId", "data-v-68340bbc"]]);
+const e = /* @__PURE__ */ r(o, [["__scopeId", "data-v-3e65ff52"]]);
 export {
-  s as default
+  e as default
 };