@narrative.io/jsonforms-provider-protocols 1.1.0-beta.0 → 1.1.0-beta.2

package/dist/jsonforms-provider-protocols.css

@@ -3,6 +3,10 @@
   text-align: left;
 }
 
+[data-v-259a0a08] .p-multiselect-label {
+  text-align: left;
+}
+
 [data-v-ea538214] .p-dropdown-label {
   text-align: left;
 }

package/dist/vue/components/ProviderMultiSelect.vue.d.ts

@@ -0,0 +1,9 @@
+import type { ControlElement, JsonSchema } from "@jsonforms/core";
+type __VLS_Props = {
+    uischema: ControlElement;
+    schema: JsonSchema;
+    path: string;
+};
+declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;
+//# sourceMappingURL=ProviderMultiSelect.vue.d.ts.map

package/dist/vue/components/ProviderMultiSelect.vue.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ProviderMultiSelect.vue.d.ts","sourceRoot":"","sources":["../../../src/vue/components/ProviderMultiSelect.vue"],"names":[],"mappings":"AA8GA,OAAO,KAAK,EAAE,cAAc,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAMlE,KAAK,WAAW,GAAG;IACjB,QAAQ,EAAE,cAAc,CAAC;IACzB,MAAM,EAAE,UAAU,CAAC;IACnB,IAAI,EAAE,MAAM,CAAC;CACd,CAAC;;AAkLF,wBAEG"}

package/dist/vue/components/ProviderMultiSelect.vue.js

@@ -0,0 +1,8 @@
+import _sfc_main from "./ProviderMultiSelect.vue2.js";
+/* empty css                         */
+import _export_sfc from "../../_virtual/_plugin-vue_export-helper.js";
+const ProviderMultiSelect = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-259a0a08"]]);
+export {
+  ProviderMultiSelect as default
+};
+//# sourceMappingURL=ProviderMultiSelect.vue.js.map

package/dist/vue/components/ProviderMultiSelect.vue.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ProviderMultiSelect.vue.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}

package/dist/vue/components/ProviderMultiSelect.vue2.js

@@ -0,0 +1,95 @@
+import { defineComponent, computed, inject, createElementBlock, openBlock, createCommentVNode, createVNode, unref, toDisplayString } from "vue";
+import { useJsonFormsControl } from "@jsonforms/vue";
+import { useProvider } from "../composables/useProvider.js";
+import MultiSelect from "primevue/multiselect";
+const _hoisted_1 = { class: "flex flex-column gap-2" };
+const _hoisted_2 = {
+  key: 0,
+  class: "text-color text-left"
+};
+const _hoisted_3 = {
+  key: 1,
+  class: "text-color-secondary text-left"
+};
+const _hoisted_4 = {
+  key: 2,
+  class: "p-error",
+  role: "alert"
+};
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "ProviderMultiSelect",
+  props: {
+    uischema: {},
+    schema: {},
+    path: {}
+  },
+  setup(__props) {
+    const props = __props;
+    const { control, handleChange } = useJsonFormsControl(props);
+    const binding = computed(() => {
+      const provider = control.value.uischema?.options?.provider;
+      if (provider && typeof provider === "object" && !provider.load) {
+        return { ...provider, load: "mount" };
+      }
+      return provider;
+    });
+    const deps = computed(
+      () => control.value.schema?.["x-provider"]?.dependsOn ?? []
+    );
+    const depValues = computed(() => deps.value.map(() => null));
+    const injectedFormData = inject("formData", { value: {} });
+    const rootData = computed(() => injectedFormData.value || {});
+    const { items, loading, error } = useProvider(binding, {
+      data: rootData,
+      // Pass the reactive reference
+      path: control.value.path,
+      dependsOnValues: depValues.value
+    });
+    const sameSet = (a, b) => {
+      if (!Array.isArray(a) || !Array.isArray(b) || a.length !== b.length)
+        return false;
+      const s = new Set(b);
+      return a.every((v) => s.has(v));
+    };
+    const value = computed({
+      get() {
+        const curr = Array.isArray(control.value.data) ? control.value.data : [];
+        return [...curr];
+      },
+      set(val) {
+        const next = Array.isArray(val) ? [...val] : [];
+        const curr = Array.isArray(control.value.data) ? control.value.data : [];
+        if (!sameSet(curr, next)) handleChange(control.value.path, next);
+      }
+    });
+    const placeholder = computed(() => {
+      if (loading.value) return "Loading…";
+      const uischemaPlaceholder = control.value.uischema?.options?.placeholder;
+      return uischemaPlaceholder || "Select…";
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", _hoisted_1, [
+        unref(control).schema.title ? (openBlock(), createElementBlock("label", _hoisted_2, toDisplayString(unref(control).schema.title), 1)) : createCommentVNode("", true),
+        unref(control).description ? (openBlock(), createElementBlock("div", _hoisted_3, toDisplayString(unref(control).description), 1)) : createCommentVNode("", true),
+        createVNode(unref(MultiSelect), {
+          modelValue: value.value,
+          "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => value.value = $event),
+          class: "w-full",
+          options: unref(items),
+          "option-label": "label",
+          "option-value": "value",
+          "data-key": "value",
+          display: "chip",
+          placeholder: placeholder.value,
+          disabled: !unref(control).enabled || unref(loading),
+          "show-clear": true
+        }, null, 8, ["modelValue", "options", "placeholder", "disabled"]),
+        unref(error) ? (openBlock(), createElementBlock("small", _hoisted_4, "Failed to load: " + toDisplayString(unref(error)), 1)) : createCommentVNode("", true)
+      ]);
+    };
+  }
+});
+export {
+  _sfc_main as default
+};
+//# sourceMappingURL=ProviderMultiSelect.vue2.js.map

package/dist/vue/components/ProviderMultiSelect.vue2.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ProviderMultiSelect.vue2.js","sources":["../../../src/vue/components/ProviderMultiSelect.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { ControlElement, JsonSchema } from \"@jsonforms/core\";\nimport { useJsonFormsControl } from \"@jsonforms/vue\";\nimport { computed, inject } from \"vue\";\nimport { useProvider } from \"../composables/useProvider\";\nimport MultiSelect from \"primevue/multiselect\";\n\nconst props = defineProps<{\n  uischema: ControlElement;\n  schema: JsonSchema;\n  path: string;\n}>();\nconst { control, handleChange } = useJsonFormsControl(props);\n\nconst binding = computed(() => {\n  const provider = control.value.uischema?.options?.provider;\n  // Ensure load property is set to 'mount' by default\n  if (provider && typeof provider === \"object\" && !provider.load) {\n    return { ...provider, load: \"mount\" };\n  }\n  return provider;\n});\n\nconst deps = computed(\n  () =>\n    ((\n      (control.value.schema as Record<string, unknown>)?.[\n        \"x-provider\"\n      ] as Record<string, unknown>\n    )?.dependsOn as string[]) ?? [],\n);\nconst depValues = computed(() => deps.value.map(() => null)); // you can resolve actual values via control.value.data & pointers\n\n// Get the root form data from JSONForms context for template URL resolution\nconst injectedFormData = inject<{ value: unknown }>(\"formData\", { value: {} });\nconst rootData = computed(() => injectedFormData.value || {});\n\nconst { items, loading, error } = useProvider(binding, {\n  data: rootData, // Pass the reactive reference\n  path: control.value.path,\n  dependsOnValues: depValues.value,\n});\n\n// Provider will automatically reload when rootData changes due to reactive cache key\n\n// order-insensitive shallow equality for primitive arrays\nconst sameSet = (a: unknown[], b: unknown[]) => {\n  if (!Array.isArray(a) || !Array.isArray(b) || a.length !== b.length)\n    return false;\n  const s = new Set(b);\n  return a.every((v) => s.has(v));\n};\n\n// v-model with guard to avoid recursive updates\nconst value = computed({\n  get() {\n    const curr = Array.isArray(control.value.data) ? control.value.data : [];\n    // return a fresh copy so MultiSelect can't mutate JSONForms' array in place\n    return [...curr];\n  },\n  set(val) {\n    const next = Array.isArray(val) ? [...val] : [];\n    const curr = Array.isArray(control.value.data) ? control.value.data : [];\n    if (!sameSet(curr, next)) handleChange(control.value.path, next);\n  },\n});\n\nconst placeholder = computed(() => {\n  if (loading.value) return \"Loading…\";\n  // Check for placeholder in uischema options\n  const uischemaPlaceholder = (\n    control.value.uischema as { options?: { placeholder?: string } }\n  )?.options?.placeholder;\n  return uischemaPlaceholder || \"Select…\";\n});\n</script>\n\n<template>\n  <div class=\"flex flex-column gap-2\">\n    <label v-if=\"control.schema.title\" class=\"text-color text-left\">{{\n      control.schema.title\n    }}</label>\n    <div v-if=\"control.description\" class=\"text-color-secondary text-left\">\n      {{ control.description }}\n    </div>\n    <MultiSelect\n      v-model=\"value\"\n      class=\"w-full\"\n      :options=\"items\"\n      option-label=\"label\"\n      option-value=\"value\"\n      data-key=\"value\"\n      display=\"chip\"\n      :placeholder=\"placeholder\"\n      :disabled=\"!control.enabled || loading\"\n      :show-clear=\"true\"\n    />\n    <small v-if=\"error\" class=\"p-error\" role=\"alert\"\n      >Failed to load: {{ error }}</small\n    >\n  </div>\n</template>\n\n<style scoped>\n:deep(.p-multiselect-label) {\n  text-align: left;\n}\n</style>\n"],"names":["_openBlock","_createElementBlock","_unref","_toDisplayString","_createVNode"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAOA,UAAM,QAAQ;AAKd,UAAM,EAAE,SAAS,iBAAiB,oBAAoB,KAAK;AAE3D,UAAM,UAAU,SAAS,MAAM;AAC7B,YAAM,WAAW,QAAQ,MAAM,UAAU,SAAS;AAElD,UAAI,YAAY,OAAO,aAAa,YAAY,CAAC,SAAS,MAAM;AAC9D,eAAO,EAAE,GAAG,UAAU,MAAM,QAAA;AAAA,MAC9B;AACA,aAAO;AAAA,IACT,CAAC;AAED,UAAM,OAAO;AAAA,MACX,MAEK,QAAQ,MAAM,SACb,YACF,GACC,aAA0B,CAAA;AAAA,IAAC;AAElC,UAAM,YAAY,SAAS,MAAM,KAAK,MAAM,IAAI,MAAM,IAAI,CAAC;AAG3D,UAAM,mBAAmB,OAA2B,YAAY,EAAE,OAAO,CAAA,GAAI;AAC7E,UAAM,WAAW,SAAS,MAAM,iBAAiB,SAAS,CAAA,CAAE;AAE5D,UAAM,EAAE,OAAO,SAAS,MAAA,IAAU,YAAY,SAAS;AAAA,MACrD,MAAM;AAAA;AAAA,MACN,MAAM,QAAQ,MAAM;AAAA,MACpB,iBAAiB,UAAU;AAAA,IAAA,CAC5B;AAKD,UAAM,UAAU,CAAC,GAAc,MAAiB;AAC9C,UAAI,CAAC,MAAM,QAAQ,CAAC,KAAK,CAAC,MAAM,QAAQ,CAAC,KAAK,EAAE,WAAW,EAAE;AAC3D,eAAO;AACT,YAAM,IAAI,IAAI,IAAI,CAAC;AACnB,aAAO,EAAE,MAAM,CAAC,MAAM,EAAE,IAAI,CAAC,CAAC;AAAA,IAChC;AAGA,UAAM,QAAQ,SAAS;AAAA,MACrB,MAAM;AACJ,cAAM,OAAO,MAAM,QAAQ,QAAQ,MAAM,IAAI,IAAI,QAAQ,MAAM,OAAO,CAAA;AAEtE,eAAO,CAAC,GAAG,IAAI;AAAA,MACjB;AAAA,MACA,IAAI,KAAK;AACP,cAAM,OAAO,MAAM,QAAQ,GAAG,IAAI,CAAC,GAAG,GAAG,IAAI,CAAA;AAC7C,cAAM,OAAO,MAAM,QAAQ,QAAQ,MAAM,IAAI,IAAI,QAAQ,MAAM,OAAO,CAAA;AACtE,YAAI,CAAC,QAAQ,MAAM,IAAI,EAAG,cAAa,QAAQ,MAAM,MAAM,IAAI;AAAA,MACjE;AAAA,IAAA,CACD;AAED,UAAM,cAAc,SAAS,MAAM;AACjC,UAAI,QAAQ,MAAO,QAAO;AAE1B,YAAM,sBACJ,QAAQ,MAAM,UACb,SAAS;AACZ,aAAO,uBAAuB;AAAA,IAChC,CAAC;;AAIC,aAAAA,UAAA,GAAAC,mBAsBM,OAtBN,YAsBM;AAAA,QArBSC,MAAA,OAAA,EAAQ,OAAO,SAA5BF,aAAAC,mBAEU,SAFV,YAEUE,gBADRD,eAAQ,OAAO,KAAK,GAAA,CAAA;QAEXA,MAAA,OAAA,EAAQ,eAAnBF,UAAA,GAAAC,mBAEM,OAFN,YAEME,gBADDD,MAAA,OAAA,EAAQ,WAAW,GAAA,CAAA;QAExBE,YAWEF,MAAA,WAAA,GAAA;AAAA,sBAVS,MAAA;AAAA,uEAAA,MAAK,QAAA;AAAA,UACd,OAAM;AAAA,UACL,SAASA,MAAA,KAAA;AAAA,UACV,gBAAa;AAAA,UACb,gBAAa;AAAA,UACb,YAAS;AAAA,UACT,SAAQ;AAAA,UACP,aAAa,YAAA;AAAA,UACb,UAAQ,CAAGA,MAAA,OAAA,EAAQ,WAAWA,MAAA,OAAA;AAAA,UAC9B,cAAY;AAAA,QAAA;QAEFA,MAAA,KAAA,KAAbF,aAAAC,mBAEC,SAFD,YACG,qCAAmBC,MAAA,KAAA,CAAK,GAAA,CAAA;;;;;"}

package/dist/vue/index.d.ts

@@ -1,6 +1,7 @@
 import type { UISchemaElement } from "@jsonforms/core";
 import ProviderAutocomplete from "./components/ProviderAutocomplete.vue";
 import ProviderSelect from "./components/ProviderSelect.vue";
+import ProviderMultiSelect from "./components/ProviderMultiSelect.vue";
 export declare const providerRenderers: {
     tester: (uischema: UISchemaElement, schema: import("@jsonforms/core").JsonSchema, context: import("@jsonforms/core").TesterContext) => number;
     renderer: import("vue").DefineComponent<{
@@ -14,7 +15,7 @@ export declare const providerRenderers: {
     }> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 }[];
 export { primevueRenderers } from "./primevue";
-export { ProviderAutocomplete, ProviderSelect };
+export { ProviderAutocomplete, ProviderSelect, ProviderMultiSelect };
 export { useProvider } from "./composables/useProvider";
 export * from "./testers";
 export * from "./primevue";

package/dist/vue/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/vue/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AASvD,OAAO,oBAAoB,MAAM,uCAAuC,CAAC;AACzE,OAAO,cAAc,MAAM,iCAAiC,CAAC;AA0B7D,eAAO,MAAM,iBAAiB;;;;;;;;;;;GAG7B,CAAC;AAGF,OAAO,EAAE,iBAAiB,EAAE,MAAM,YAAY,CAAC;AAG/C,OAAO,EAAE,oBAAoB,EAAE,cAAc,EAAE,CAAC;AAChD,OAAO,EAAE,WAAW,EAAE,MAAM,2BAA2B,CAAC;AACxD,cAAc,WAAW,CAAC;AAC1B,cAAc,YAAY,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/vue/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AASvD,OAAO,oBAAoB,MAAM,uCAAuC,CAAC;AACzE,OAAO,cAAc,MAAM,iCAAiC,CAAC;AAC7D,OAAO,mBAAmB,MAAM,sCAAsC,CAAC;AAgDvE,eAAO,MAAM,iBAAiB;;;;;;;;;;;GAI7B,CAAC;AAGF,OAAO,EAAE,iBAAiB,EAAE,MAAM,YAAY,CAAC;AAG/C,OAAO,EAAE,oBAAoB,EAAE,cAAc,EAAE,mBAAmB,EAAE,CAAC;AACrE,OAAO,EAAE,WAAW,EAAE,MAAM,2BAA2B,CAAC;AACxD,cAAc,WAAW,CAAC;AAC1B,cAAc,YAAY,CAAC"}

package/dist/vue/index.js

@@ -1,6 +1,7 @@
 import { rankWith, and, or, isStringControl, isNumberControl, isIntegerControl } from "@jsonforms/core";
 import _sfc_main from "./components/ProviderAutocomplete.vue.js";
 import ProviderSelect from "./components/ProviderSelect.vue.js";
+import ProviderMultiSelect from "./components/ProviderMultiSelect.vue.js";
 import { primevueRenderers } from "./primevue/index.js";
 import { useProvider } from "./composables/useProvider.js";
 import { providerTester } from "./testers.js";
@@ -31,9 +32,25 @@ const providerAutocompleteTester = rankWith(
     (uischema) => uischema?.options?.autocomplete === true
   )
 );
+const isArrayControl = (uischema, schema) => {
+  const controlSchema = uischema;
+  if (controlSchema.type !== "Control" || !controlSchema.scope) {
+    return false;
+  }
+  const rootSchema = schema;
+  const propertyPath = controlSchema.scope.replace("#/properties/", "");
+  const propertySchema = rootSchema?.properties?.[propertyPath];
+  return propertySchema?.type === "array";
+};
+const providerMultiSelectTester = rankWith(
+  108,
+  // Highest priority for array controls with providers
+  and(isArrayControl, hasProvider)
+);
 const providerRenderers = [
-  { tester: providerSelectTester, renderer: ProviderSelect },
-  { tester: providerAutocompleteTester, renderer: _sfc_main }
+  { tester: providerMultiSelectTester, renderer: ProviderMultiSelect },
+  { tester: providerAutocompleteTester, renderer: _sfc_main },
+  { tester: providerSelectTester, renderer: ProviderSelect }
 ];
 export {
   default6 as JfBoolean,
@@ -43,6 +60,7 @@ export {
   default2 as JfText,
   default3 as JfTextArea,
   _sfc_main as ProviderAutocomplete,
+  ProviderMultiSelect,
   ProviderSelect,
   primevueRenderers,
   providerRenderers,

package/dist/vue/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../src/vue/index.ts"],"sourcesContent":["import type { UISchemaElement } from \"@jsonforms/core\";\nimport {\n  and,\n  isIntegerControl,\n  isNumberControl,\n  isStringControl,\n  or,\n  rankWith,\n} from \"@jsonforms/core\";\nimport ProviderAutocomplete from \"./components/ProviderAutocomplete.vue\";\nimport ProviderSelect from \"./components/ProviderSelect.vue\";\n\n// Custom tester that checks if provider option exists (as object or boolean)\nconst hasProvider = (uischema: UISchemaElement) => {\n  return uischema?.options?.provider !== undefined;\n};\n\n// Create specific testers for each component type\nconst providerSelectTester = rankWith(\n  106, // Higher than PrimeVue base (100) to ensure providers take precedence\n  and(\n    or(isStringControl, isNumberControl, isIntegerControl),\n    hasProvider,\n    (uischema) => !uischema?.options?.autocomplete,\n  ),\n);\n\nconst providerAutocompleteTester = rankWith(\n  107, // Higher than PrimeVue base (100) to ensure providers take precedence\n  and(\n    or(isStringControl, isNumberControl, isIntegerControl),\n    hasProvider,\n    (uischema) => uischema?.options?.autocomplete === true,\n  ),\n);\n\nexport const providerRenderers = [\n  { tester: providerSelectTester, renderer: ProviderSelect },\n  { tester: providerAutocompleteTester, renderer: ProviderAutocomplete },\n];\n\n// Export PrimeVue renderers (styles are auto-injected)\nexport { primevueRenderers } from \"./primevue\";\n\n// Export individual components\nexport { ProviderAutocomplete, ProviderSelect };\nexport { useProvider } from \"./composables/useProvider\";\nexport * from \"./testers\";\nexport * from \"./primevue\";\n"],"names":["ProviderAutocomplete"],"mappings":";;;;;;;;;;;;AAaA,MAAM,cAAc,CAAC,aAA8B;AACjD,SAAO,UAAU,SAAS,aAAa;AACzC;AAGA,MAAM,uBAAuB;AAAA,EAC3B;AAAA;AAAA,EACA;AAAA,IACE,GAAG,iBAAiB,iBAAiB,gBAAgB;AAAA,IACrD;AAAA,IACA,CAAC,aAAa,CAAC,UAAU,SAAS;AAAA,EAAA;AAEtC;AAEA,MAAM,6BAA6B;AAAA,EACjC;AAAA;AAAA,EACA;AAAA,IACE,GAAG,iBAAiB,iBAAiB,gBAAgB;AAAA,IACrD;AAAA,IACA,CAAC,aAAa,UAAU,SAAS,iBAAiB;AAAA,EAAA;AAEtD;AAEO,MAAM,oBAAoB;AAAA,EAC/B,EAAE,QAAQ,sBAAsB,UAAU,eAAA;AAAA,EAC1C,EAAE,QAAQ,4BAA4B,UAAUA,UAAA;AAClD;"}
+{"version":3,"file":"index.js","sources":["../../src/vue/index.ts"],"sourcesContent":["import type { UISchemaElement } from \"@jsonforms/core\";\nimport {\n  and,\n  isIntegerControl,\n  isNumberControl,\n  isStringControl,\n  or,\n  rankWith,\n} from \"@jsonforms/core\";\nimport ProviderAutocomplete from \"./components/ProviderAutocomplete.vue\";\nimport ProviderSelect from \"./components/ProviderSelect.vue\";\nimport ProviderMultiSelect from \"./components/ProviderMultiSelect.vue\";\n\n// Custom tester that checks if provider option exists (as object or boolean)\nconst hasProvider = (uischema: UISchemaElement) => {\n  return uischema?.options?.provider !== undefined;\n};\n\n// Create specific testers for each component type\nconst providerSelectTester = rankWith(\n  106, // Higher than PrimeVue base (100) to ensure providers take precedence\n  and(\n    or(isStringControl, isNumberControl, isIntegerControl),\n    hasProvider,\n    (uischema) => !uischema?.options?.autocomplete,\n  ),\n);\n\nconst providerAutocompleteTester = rankWith(\n  107, // Higher than PrimeVue base (100) to ensure providers take precedence\n  and(\n    or(isStringControl, isNumberControl, isIntegerControl),\n    hasProvider,\n    (uischema) => uischema?.options?.autocomplete === true,\n  ),\n);\n\n// Custom array tester - check both uischema control type and schema type\nconst isArrayControl = (uischema: UISchemaElement, schema: unknown) => {\n  const controlSchema = uischema as { type: string; scope?: string };\n  if (controlSchema.type !== \"Control\" || !controlSchema.scope) {\n    return false;\n  }\n\n  // Extract the property schema from the root schema\n  const rootSchema = schema as { properties?: Record<string, unknown> };\n  const propertyPath = controlSchema.scope.replace(\"#/properties/\", \"\");\n  const propertySchema = rootSchema?.properties?.[propertyPath] as {\n    type?: string;\n  };\n\n  return propertySchema?.type === \"array\";\n};\n\nconst providerMultiSelectTester = rankWith(\n  108, // Highest priority for array controls with providers\n  and(isArrayControl, hasProvider),\n);\n\nexport const providerRenderers = [\n  { tester: providerMultiSelectTester, renderer: ProviderMultiSelect },\n  { tester: providerAutocompleteTester, renderer: ProviderAutocomplete },\n  { tester: providerSelectTester, renderer: ProviderSelect },\n];\n\n// Export PrimeVue renderers (styles are auto-injected)\nexport { primevueRenderers } from \"./primevue\";\n\n// Export individual components\nexport { ProviderAutocomplete, ProviderSelect, ProviderMultiSelect };\nexport { useProvider } from \"./composables/useProvider\";\nexport * from \"./testers\";\nexport * from \"./primevue\";\n"],"names":["ProviderAutocomplete"],"mappings":";;;;;;;;;;;;;AAcA,MAAM,cAAc,CAAC,aAA8B;AACjD,SAAO,UAAU,SAAS,aAAa;AACzC;AAGA,MAAM,uBAAuB;AAAA,EAC3B;AAAA;AAAA,EACA;AAAA,IACE,GAAG,iBAAiB,iBAAiB,gBAAgB;AAAA,IACrD;AAAA,IACA,CAAC,aAAa,CAAC,UAAU,SAAS;AAAA,EAAA;AAEtC;AAEA,MAAM,6BAA6B;AAAA,EACjC;AAAA;AAAA,EACA;AAAA,IACE,GAAG,iBAAiB,iBAAiB,gBAAgB;AAAA,IACrD;AAAA,IACA,CAAC,aAAa,UAAU,SAAS,iBAAiB;AAAA,EAAA;AAEtD;AAGA,MAAM,iBAAiB,CAAC,UAA2B,WAAoB;AACrE,QAAM,gBAAgB;AACtB,MAAI,cAAc,SAAS,aAAa,CAAC,cAAc,OAAO;AAC5D,WAAO;AAAA,EACT;AAGA,QAAM,aAAa;AACnB,QAAM,eAAe,cAAc,MAAM,QAAQ,iBAAiB,EAAE;AACpE,QAAM,iBAAiB,YAAY,aAAa,YAAY;AAI5D,SAAO,gBAAgB,SAAS;AAClC;AAEA,MAAM,4BAA4B;AAAA,EAChC;AAAA;AAAA,EACA,IAAI,gBAAgB,WAAW;AACjC;AAEO,MAAM,oBAAoB;AAAA,EAC/B,EAAE,QAAQ,2BAA2B,UAAU,oBAAA;AAAA,EAC/C,EAAE,QAAQ,4BAA4B,UAAUA,UAAA;AAAA,EAChD,EAAE,QAAQ,sBAAsB,UAAU,eAAA;AAC5C;"}

package/dist/vue/primevue/JfNumber.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"JfNumber.vue.d.ts","sourceRoot":"","sources":["../../../src/vue/primevue/JfNumber.vue"],"names":[],"mappings":"AA4CA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA6HtD,wBAEG"}
+{"version":3,"file":"JfNumber.vue.d.ts","sourceRoot":"","sources":["../../../src/vue/primevue/JfNumber.vue"],"names":[],"mappings":"AAoFA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA8KtD,wBAEG"}

package/dist/vue/primevue/JfNumber.vue.js

@@ -21,9 +21,37 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
   setup(__props) {
     const props = __props;
     const { control, handleChange } = useJsonFormsControl(props);
+    const options = computed(
+      () => control.value.uischema?.options ?? {}
+    );
     const placeholder = computed(
-      () => control.value.uischema?.options?.placeholder ?? control.value.description
+      () => options.value.placeholder ?? control.value.description
+    );
+    const mode = computed(() => {
+      if (options.value.currency) return "currency";
+      if (options.value.decimal || typeof options.value.precision === "number")
+        return "decimal";
+      return void 0;
+    });
+    const currency = computed(
+      () => typeof options.value.currency === "string" ? options.value.currency : "USD"
     );
+    const minFractionDigits = computed(() => {
+      if (mode.value === "currency") return 2;
+      if (typeof options.value.precision === "number")
+        return options.value.precision;
+      return void 0;
+    });
+    const maxFractionDigits = computed(() => {
+      if (mode.value === "currency") return 2;
+      if (typeof options.value.precision === "number")
+        return options.value.precision;
+      return void 0;
+    });
+    const useGrouping = computed(() => {
+      if (mode.value === "currency") return true;
+      return options.value.useGrouping === true;
+    });
     const onNumber = (val) => handleChange(control.value.path, val ?? void 0);
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", _hoisted_1, [
@@ -32,13 +60,17 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         createVNode(unref(InputNumber), {
           class: "w-full",
           "input-class": "w-full",
-          "use-grouping": false,
+          "use-grouping": useGrouping.value,
+          mode: mode.value,
+          currency: currency.value,
+          "min-fraction-digits": minFractionDigits.value,
+          "max-fraction-digits": maxFractionDigits.value,
           "model-value": typeof unref(control).data === "number" ? unref(control).data : null,
           placeholder: placeholder.value,
           disabled: !unref(control).enabled,
           "aria-invalid": !!unref(control).errors || void 0,
           "onUpdate:modelValue": onNumber
-        }, null, 8, ["model-value", "placeholder", "disabled", "aria-invalid"]),
+        }, null, 8, ["use-grouping", "mode", "currency", "min-fraction-digits", "max-fraction-digits", "model-value", "placeholder", "disabled", "aria-invalid"]),
         unref(control).errors ? (openBlock(), createElementBlock("small", _hoisted_4, toDisplayString(unref(control).errors), 1)) : createCommentVNode("", true)
       ]);
     };

package/dist/vue/primevue/JfNumber.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"JfNumber.vue.js","sources":["../../../src/vue/primevue/JfNumber.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { ControlElement } from \"@jsonforms/core\";\nimport { rendererProps, useJsonFormsControl } from \"@jsonforms/vue\";\nimport { computed } from \"vue\";\nimport InputNumber from \"primevue/inputnumber\";\n\ndefineOptions({ name: \"JfNumber\" });\n\nconst props = defineProps(rendererProps<ControlElement>());\nconst { control, handleChange } = useJsonFormsControl(props);\n\nconst placeholder = computed<string | undefined>(\n  () =>\n    (control.value.uischema as { options?: { placeholder?: string } })?.options\n      ?.placeholder ?? control.value.description,\n);\n\nconst onNumber = (val: number | null) =>\n  handleChange(control.value.path, val ?? undefined);\n</script>\n\n<template>\n  <div class=\"flex flex-column gap-2\">\n    <label v-if=\"control.label\" class=\"text-color text-left\">{{\n      control.label\n    }}</label>\n    <div v-if=\"control.description\" class=\"text-color-secondary text-left\">\n      {{ control.description }}\n    </div>\n    <InputNumber\n      class=\"w-full\"\n      input-class=\"w-full\"\n      :use-grouping=\"false\"\n      :model-value=\"typeof control.data === 'number' ? control.data : null\"\n      :placeholder=\"placeholder\"\n      :disabled=\"!control.enabled\"\n      :aria-invalid=\"!!control.errors || undefined\"\n      @update:model-value=\"onNumber\"\n    />\n    <small v-if=\"control.errors\" class=\"p-error\">{{ control.errors }}</small>\n  </div>\n</template>\n"],"names":["_openBlock","_createElementBlock","_unref","_toDisplayString","_createVNode"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAQA,UAAM,QAAQ;AACd,UAAM,EAAE,SAAS,iBAAiB,oBAAoB,KAAK;AAE3D,UAAM,cAAc;AAAA,MAClB,MACG,QAAQ,MAAM,UAAqD,SAChE,eAAe,QAAQ,MAAM;AAAA,IAAA;AAGrC,UAAM,WAAW,CAAC,QAChB,aAAa,QAAQ,MAAM,MAAM,OAAO,MAAS;;AAIjD,aAAAA,UAAA,GAAAC,mBAkBM,OAlBN,YAkBM;AAAA,QAjBSC,MAAA,OAAA,EAAQ,SAArBF,UAAA,GAAAC,mBAEU,SAFV,YAEUE,gBADRD,MAAA,OAAA,EAAQ,KAAK,GAAA,CAAA;QAEJA,MAAA,OAAA,EAAQ,eAAnBF,UAAA,GAAAC,mBAEM,OAFN,YAEME,gBADDD,MAAA,OAAA,EAAQ,WAAW,GAAA,CAAA;QAExBE,YASEF,MAAA,WAAA,GAAA;AAAA,UARA,OAAM;AAAA,UACN,eAAY;AAAA,UACX,gBAAc;AAAA,UACd,sBAAoBA,MAAA,OAAA,EAAQ,SAAI,WAAgBA,MAAA,OAAA,EAAQ,OAAI;AAAA,UAC5D,aAAa,YAAA;AAAA,UACb,UAAQ,CAAGA,MAAA,OAAA,EAAQ;AAAA,UACnB,gBAAY,CAAA,CAAIA,MAAA,OAAA,EAAQ,UAAU;AAAA,UAClC,uBAAoB;AAAA,QAAA;QAEVA,MAAA,OAAA,EAAQ,UAArBF,UAAA,GAAAC,mBAAyE,SAAzE,YAAyEE,gBAAzBD,MAAA,OAAA,EAAQ,MAAM,GAAA,CAAA;;;;;"}
+{"version":3,"file":"JfNumber.vue.js","sources":["../../../src/vue/primevue/JfNumber.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { ControlElement } from \"@jsonforms/core\";\nimport { rendererProps, useJsonFormsControl } from \"@jsonforms/vue\";\nimport { computed } from \"vue\";\nimport InputNumber from \"primevue/inputnumber\";\n\ndefineOptions({ name: \"JfNumber\" });\n\nconst props = defineProps(rendererProps<ControlElement>());\nconst { control, handleChange } = useJsonFormsControl(props);\n\nconst options = computed(\n  () =>\n    (control.value.uischema as { options?: Record<string, unknown> })\n      ?.options ?? {},\n);\n\nconst placeholder = computed<string | undefined>(\n  () => (options.value.placeholder as string) ?? control.value.description,\n);\n\n// Currency and decimal configuration\nconst mode = computed(() => {\n  if (options.value.currency) return \"currency\";\n  if (options.value.decimal || typeof options.value.precision === \"number\")\n    return \"decimal\";\n  return undefined;\n});\n\nconst currency = computed(() =>\n  typeof options.value.currency === \"string\" ? options.value.currency : \"USD\",\n);\n\nconst minFractionDigits = computed(() => {\n  if (mode.value === \"currency\") return 2;\n  if (typeof options.value.precision === \"number\")\n    return options.value.precision;\n  return undefined;\n});\n\nconst maxFractionDigits = computed(() => {\n  if (mode.value === \"currency\") return 2;\n  if (typeof options.value.precision === \"number\")\n    return options.value.precision;\n  return undefined;\n});\n\nconst useGrouping = computed(() => {\n  // Enable grouping for currency by default, or if explicitly set\n  if (mode.value === \"currency\") return true;\n  return options.value.useGrouping === true;\n});\n\nconst onNumber = (val: number | null) =>\n  handleChange(control.value.path, val ?? undefined);\n</script>\n\n<template>\n  <div class=\"flex flex-column gap-2\">\n    <label v-if=\"control.label\" class=\"text-color text-left\">{{\n      control.label\n    }}</label>\n    <div v-if=\"control.description\" class=\"text-color-secondary text-left\">\n      {{ control.description }}\n    </div>\n    <InputNumber\n      class=\"w-full\"\n      input-class=\"w-full\"\n      :use-grouping=\"useGrouping\"\n      :mode=\"mode\"\n      :currency=\"currency\"\n      :min-fraction-digits=\"minFractionDigits\"\n      :max-fraction-digits=\"maxFractionDigits\"\n      :model-value=\"typeof control.data === 'number' ? control.data : null\"\n      :placeholder=\"placeholder\"\n      :disabled=\"!control.enabled\"\n      :aria-invalid=\"!!control.errors || undefined\"\n      @update:model-value=\"onNumber\"\n    />\n    <small v-if=\"control.errors\" class=\"p-error\">{{ control.errors }}</small>\n  </div>\n</template>\n"],"names":["_openBlock","_createElementBlock","_unref","_toDisplayString","_createVNode"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAQA,UAAM,QAAQ;AACd,UAAM,EAAE,SAAS,iBAAiB,oBAAoB,KAAK;AAE3D,UAAM,UAAU;AAAA,MACd,MACG,QAAQ,MAAM,UACX,WAAW,CAAA;AAAA,IAAC;AAGpB,UAAM,cAAc;AAAA,MAClB,MAAO,QAAQ,MAAM,eAA0B,QAAQ,MAAM;AAAA,IAAA;AAI/D,UAAM,OAAO,SAAS,MAAM;AAC1B,UAAI,QAAQ,MAAM,SAAU,QAAO;AACnC,UAAI,QAAQ,MAAM,WAAW,OAAO,QAAQ,MAAM,cAAc;AAC9D,eAAO;AACT,aAAO;AAAA,IACT,CAAC;AAED,UAAM,WAAW;AAAA,MAAS,MACxB,OAAO,QAAQ,MAAM,aAAa,WAAW,QAAQ,MAAM,WAAW;AAAA,IAAA;AAGxE,UAAM,oBAAoB,SAAS,MAAM;AACvC,UAAI,KAAK,UAAU,WAAY,QAAO;AACtC,UAAI,OAAO,QAAQ,MAAM,cAAc;AACrC,eAAO,QAAQ,MAAM;AACvB,aAAO;AAAA,IACT,CAAC;AAED,UAAM,oBAAoB,SAAS,MAAM;AACvC,UAAI,KAAK,UAAU,WAAY,QAAO;AACtC,UAAI,OAAO,QAAQ,MAAM,cAAc;AACrC,eAAO,QAAQ,MAAM;AACvB,aAAO;AAAA,IACT,CAAC;AAED,UAAM,cAAc,SAAS,MAAM;AAEjC,UAAI,KAAK,UAAU,WAAY,QAAO;AACtC,aAAO,QAAQ,MAAM,gBAAgB;AAAA,IACvC,CAAC;AAED,UAAM,WAAW,CAAC,QAChB,aAAa,QAAQ,MAAM,MAAM,OAAO,MAAS;;AAIjD,aAAAA,UAAA,GAAAC,mBAsBM,OAtBN,YAsBM;AAAA,QArBSC,MAAA,OAAA,EAAQ,SAArBF,UAAA,GAAAC,mBAEU,SAFV,YAEUE,gBADRD,MAAA,OAAA,EAAQ,KAAK,GAAA,CAAA;QAEJA,MAAA,OAAA,EAAQ,eAAnBF,UAAA,GAAAC,mBAEM,OAFN,YAEME,gBADDD,MAAA,OAAA,EAAQ,WAAW,GAAA,CAAA;QAExBE,YAaEF,MAAA,WAAA,GAAA;AAAA,UAZA,OAAM;AAAA,UACN,eAAY;AAAA,UACX,gBAAc,YAAA;AAAA,UACd,MAAM,KAAA;AAAA,UACN,UAAU,SAAA;AAAA,UACV,uBAAqB,kBAAA;AAAA,UACrB,uBAAqB,kBAAA;AAAA,UACrB,sBAAoBA,MAAA,OAAA,EAAQ,SAAI,WAAgBA,MAAA,OAAA,EAAQ,OAAI;AAAA,UAC5D,aAAa,YAAA;AAAA,UACb,UAAQ,CAAGA,MAAA,OAAA,EAAQ;AAAA,UACnB,gBAAY,CAAA,CAAIA,MAAA,OAAA,EAAQ,UAAU;AAAA,UAClC,uBAAoB;AAAA,QAAA;QAEVA,MAAA,OAAA,EAAQ,UAArBF,UAAA,GAAAC,mBAAyE,SAAzE,YAAyEE,gBAAzBD,MAAA,OAAA,EAAQ,MAAM,GAAA,CAAA;;;;;"}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@narrative.io/jsonforms-provider-protocols",
-	"version": "1.1.0-beta.0",
+	"version": "1.1.0-beta.2",
 	"description": "Dynamic data provider capabilities for JSONForms with Vue 3 integration",
 	"type": "module",
 	"author": "Narrative I/O",

package/src/vue/components/ProviderMultiSelect.vue

@@ -0,0 +1,108 @@
+<script setup lang="ts">
+import type { ControlElement, JsonSchema } from "@jsonforms/core";
+import { useJsonFormsControl } from "@jsonforms/vue";
+import { computed, inject } from "vue";
+import { useProvider } from "../composables/useProvider";
+import MultiSelect from "primevue/multiselect";
+
+const props = defineProps<{
+  uischema: ControlElement;
+  schema: JsonSchema;
+  path: string;
+}>();
+const { control, handleChange } = useJsonFormsControl(props);
+
+const binding = computed(() => {
+  const provider = control.value.uischema?.options?.provider;
+  // Ensure load property is set to 'mount' by default
+  if (provider && typeof provider === "object" && !provider.load) {
+    return { ...provider, load: "mount" };
+  }
+  return provider;
+});
+
+const deps = computed(
+  () =>
+    ((
+      (control.value.schema as Record<string, unknown>)?.[
+        "x-provider"
+      ] as Record<string, unknown>
+    )?.dependsOn as string[]) ?? [],
+);
+const depValues = computed(() => deps.value.map(() => null)); // you can resolve actual values via control.value.data & pointers
+
+// Get the root form data from JSONForms context for template URL resolution
+const injectedFormData = inject<{ value: unknown }>("formData", { value: {} });
+const rootData = computed(() => injectedFormData.value || {});
+
+const { items, loading, error } = useProvider(binding, {
+  data: rootData, // Pass the reactive reference
+  path: control.value.path,
+  dependsOnValues: depValues.value,
+});
+
+// Provider will automatically reload when rootData changes due to reactive cache key
+
+// order-insensitive shallow equality for primitive arrays
+const sameSet = (a: unknown[], b: unknown[]) => {
+  if (!Array.isArray(a) || !Array.isArray(b) || a.length !== b.length)
+    return false;
+  const s = new Set(b);
+  return a.every((v) => s.has(v));
+};
+
+// v-model with guard to avoid recursive updates
+const value = computed({
+  get() {
+    const curr = Array.isArray(control.value.data) ? control.value.data : [];
+    // return a fresh copy so MultiSelect can't mutate JSONForms' array in place
+    return [...curr];
+  },
+  set(val) {
+    const next = Array.isArray(val) ? [...val] : [];
+    const curr = Array.isArray(control.value.data) ? control.value.data : [];
+    if (!sameSet(curr, next)) handleChange(control.value.path, next);
+  },
+});
+
+const placeholder = computed(() => {
+  if (loading.value) return "Loading…";
+  // Check for placeholder in uischema options
+  const uischemaPlaceholder = (
+    control.value.uischema as { options?: { placeholder?: string } }
+  )?.options?.placeholder;
+  return uischemaPlaceholder || "Select…";
+});
+</script>
+
+<template>
+  <div class="flex flex-column gap-2">
+    <label v-if="control.schema.title" class="text-color text-left">{{
+      control.schema.title
+    }}</label>
+    <div v-if="control.description" class="text-color-secondary text-left">
+      {{ control.description }}
+    </div>
+    <MultiSelect
+      v-model="value"
+      class="w-full"
+      :options="items"
+      option-label="label"
+      option-value="value"
+      data-key="value"
+      display="chip"
+      :placeholder="placeholder"
+      :disabled="!control.enabled || loading"
+      :show-clear="true"
+    />
+    <small v-if="error" class="p-error" role="alert"
+      >Failed to load: {{ error }}</small
+    >
+  </div>
+</template>
+
+<style scoped>
+:deep(.p-multiselect-label) {
+  text-align: left;
+}
+</style>

package/src/vue/index.ts

@@ -9,6 +9,7 @@ import {
 } from "@jsonforms/core";
 import ProviderAutocomplete from "./components/ProviderAutocomplete.vue";
 import ProviderSelect from "./components/ProviderSelect.vue";
+import ProviderMultiSelect from "./components/ProviderMultiSelect.vue";
 
 // Custom tester that checks if provider option exists (as object or boolean)
 const hasProvider = (uischema: UISchemaElement) => {
@@ -34,16 +35,39 @@ const providerAutocompleteTester = rankWith(
   ),
 );
 
+// Custom array tester - check both uischema control type and schema type
+const isArrayControl = (uischema: UISchemaElement, schema: unknown) => {
+  const controlSchema = uischema as { type: string; scope?: string };
+  if (controlSchema.type !== "Control" || !controlSchema.scope) {
+    return false;
+  }
+
+  // Extract the property schema from the root schema
+  const rootSchema = schema as { properties?: Record<string, unknown> };
+  const propertyPath = controlSchema.scope.replace("#/properties/", "");
+  const propertySchema = rootSchema?.properties?.[propertyPath] as {
+    type?: string;
+  };
+
+  return propertySchema?.type === "array";
+};
+
+const providerMultiSelectTester = rankWith(
+  108, // Highest priority for array controls with providers
+  and(isArrayControl, hasProvider),
+);
+
 export const providerRenderers = [
-  { tester: providerSelectTester, renderer: ProviderSelect },
+  { tester: providerMultiSelectTester, renderer: ProviderMultiSelect },
   { tester: providerAutocompleteTester, renderer: ProviderAutocomplete },
+  { tester: providerSelectTester, renderer: ProviderSelect },
 ];
 
 // Export PrimeVue renderers (styles are auto-injected)
 export { primevueRenderers } from "./primevue";
 
 // Export individual components
-export { ProviderAutocomplete, ProviderSelect };
+export { ProviderAutocomplete, ProviderSelect, ProviderMultiSelect };
 export { useProvider } from "./composables/useProvider";
 export * from "./testers";
 export * from "./primevue";

package/src/vue/primevue/JfNumber.vue

@@ -9,12 +9,48 @@ defineOptions({ name: "JfNumber" });
 const props = defineProps(rendererProps<ControlElement>());
 const { control, handleChange } = useJsonFormsControl(props);
 
-const placeholder = computed<string | undefined>(
+const options = computed(
   () =>
-    (control.value.uischema as { options?: { placeholder?: string } })?.options
-      ?.placeholder ?? control.value.description,
+    (control.value.uischema as { options?: Record<string, unknown> })
+      ?.options ?? {},
+);
+
+const placeholder = computed<string | undefined>(
+  () => (options.value.placeholder as string) ?? control.value.description,
+);
+
+// Currency and decimal configuration
+const mode = computed(() => {
+  if (options.value.currency) return "currency";
+  if (options.value.decimal || typeof options.value.precision === "number")
+    return "decimal";
+  return undefined;
+});
+
+const currency = computed(() =>
+  typeof options.value.currency === "string" ? options.value.currency : "USD",
 );
 
+const minFractionDigits = computed(() => {
+  if (mode.value === "currency") return 2;
+  if (typeof options.value.precision === "number")
+    return options.value.precision;
+  return undefined;
+});
+
+const maxFractionDigits = computed(() => {
+  if (mode.value === "currency") return 2;
+  if (typeof options.value.precision === "number")
+    return options.value.precision;
+  return undefined;
+});
+
+const useGrouping = computed(() => {
+  // Enable grouping for currency by default, or if explicitly set
+  if (mode.value === "currency") return true;
+  return options.value.useGrouping === true;
+});
+
 const onNumber = (val: number | null) =>
   handleChange(control.value.path, val ?? undefined);
 </script>
@@ -30,7 +66,11 @@ const onNumber = (val: number | null) =>
     <InputNumber
       class="w-full"
       input-class="w-full"
-      :use-grouping="false"
+      :use-grouping="useGrouping"
+      :mode="mode"
+      :currency="currency"
+      :min-fraction-digits="minFractionDigits"
+      :max-fraction-digits="maxFractionDigits"
       :model-value="typeof control.data === 'number' ? control.data : null"
       :placeholder="placeholder"
       :disabled="!control.enabled"