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

package/dist/vue/primevue/JfTextArea.vue.d.ts

@@ -0,0 +1,75 @@
+import type { ControlElement } from "@jsonforms/core";
+declare const _default: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    schema: {
+        required: true;
+        type: import("vue").PropType<import("@jsonforms/core").JsonSchema>;
+    };
+    uischema: {
+        required: true;
+        type: import("vue").PropType<ControlElement>;
+    };
+    path: {
+        required: true;
+        type: StringConstructor;
+    };
+    enabled: {
+        required: false;
+        type: BooleanConstructor;
+        default: undefined;
+    };
+    renderers: {
+        required: boolean;
+        type: import("vue").PropType<import("@jsonforms/core").JsonFormsRendererRegistryEntry[]>;
+        default: undefined;
+    };
+    cells: {
+        required: boolean;
+        type: import("vue").PropType<import("@jsonforms/core").JsonFormsCellRendererRegistryEntry[]>;
+        default: undefined;
+    };
+    config: {
+        required: boolean;
+        type: ObjectConstructor;
+        default: undefined;
+    };
+}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    schema: {
+        required: true;
+        type: import("vue").PropType<import("@jsonforms/core").JsonSchema>;
+    };
+    uischema: {
+        required: true;
+        type: import("vue").PropType<ControlElement>;
+    };
+    path: {
+        required: true;
+        type: StringConstructor;
+    };
+    enabled: {
+        required: false;
+        type: BooleanConstructor;
+        default: undefined;
+    };
+    renderers: {
+        required: boolean;
+        type: import("vue").PropType<import("@jsonforms/core").JsonFormsRendererRegistryEntry[]>;
+        default: undefined;
+    };
+    cells: {
+        required: boolean;
+        type: import("vue").PropType<import("@jsonforms/core").JsonFormsCellRendererRegistryEntry[]>;
+        default: undefined;
+    };
+    config: {
+        required: boolean;
+        type: ObjectConstructor;
+        default: undefined;
+    };
+}>> & Readonly<{}>, {
+    enabled: boolean;
+    renderers: import("@jsonforms/core").JsonFormsRendererRegistryEntry[];
+    cells: import("@jsonforms/core").JsonFormsCellRendererRegistryEntry[];
+    config: Record<string, any>;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+export default _default;
+//# sourceMappingURL=JfTextArea.vue.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"JfTextArea.vue.d.ts","sourceRoot":"","sources":["../../../src/vue/primevue/JfTextArea.vue"],"names":[],"mappings":"AAgDA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAiItD,wBAEG"}

package/dist/vue/primevue/JfTextArea.vue.js

@@ -0,0 +1,55 @@
+import { defineComponent, computed, createElementBlock, openBlock, createCommentVNode, createVNode, unref, toDisplayString } from "vue";
+import { rendererProps, useJsonFormsControl } from "@jsonforms/vue";
+import Textarea from "primevue/textarea";
+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"
+};
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  ...{ name: "JfTextArea" },
+  __name: "JfTextArea",
+  props: rendererProps(),
+  setup(__props) {
+    const props = __props;
+    const { control, handleChange } = useJsonFormsControl(props);
+    const placeholder = computed(
+      () => control.value.uischema?.options?.placeholder ?? control.value.description
+    );
+    function onInput(val) {
+      const newValue = val ?? "";
+      if ((control.value.data ?? "") !== newValue) {
+        handleChange(control.value.path, newValue);
+      }
+    }
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", _hoisted_1, [
+        unref(control).label ? (openBlock(), createElementBlock("label", _hoisted_2, toDisplayString(unref(control).label), 1)) : createCommentVNode("", true),
+        unref(control).description ? (openBlock(), createElementBlock("div", _hoisted_3, toDisplayString(unref(control).description), 1)) : createCommentVNode("", true),
+        createVNode(unref(Textarea), {
+          class: "w-full",
+          "model-value": unref(control).data ?? "",
+          disabled: !unref(control).enabled,
+          "aria-invalid": !!unref(control).errors || void 0,
+          placeholder: placeholder.value,
+          rows: 4,
+          "auto-resize": true,
+          "onUpdate:modelValue": onInput
+        }, null, 8, ["model-value", "disabled", "aria-invalid", "placeholder"]),
+        unref(control).errors ? (openBlock(), createElementBlock("small", _hoisted_4, toDisplayString(unref(control).errors), 1)) : createCommentVNode("", true)
+      ]);
+    };
+  }
+});
+export {
+  _sfc_main as default
+};
+//# sourceMappingURL=JfTextArea.vue.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"JfTextArea.vue.js","sources":["../../../src/vue/primevue/JfTextArea.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { ControlElement } from \"@jsonforms/core\";\nimport { rendererProps, useJsonFormsControl } from \"@jsonforms/vue\";\nimport { computed } from \"vue\";\nimport Textarea from \"primevue/textarea\";\n\ndefineOptions({ name: \"JfTextArea\" });\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\nfunction onInput(val: string | undefined) {\n  const newValue = val ?? \"\";\n  if ((control.value.data ?? \"\") !== newValue) {\n    handleChange(control.value.path, newValue);\n  }\n}\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    <Textarea\n      class=\"w-full\"\n      :model-value=\"control.data ?? ''\"\n      :disabled=\"!control.enabled\"\n      :aria-invalid=\"!!control.errors || undefined\"\n      :placeholder=\"placeholder\"\n      :rows=\"4\"\n      :auto-resize=\"true\"\n      @update:model-value=\"onInput\"\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,aAAS,QAAQ,KAAyB;AACxC,YAAM,WAAW,OAAO;AACxB,WAAK,QAAQ,MAAM,QAAQ,QAAQ,UAAU;AAC3C,qBAAa,QAAQ,MAAM,MAAM,QAAQ;AAAA,MAC3C;AAAA,IACF;;AAIE,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,QAAA,GAAA;AAAA,UARA,OAAM;AAAA,UACL,eAAaA,MAAA,OAAA,EAAQ,QAAI;AAAA,UACzB,UAAQ,CAAGA,MAAA,OAAA,EAAQ;AAAA,UACnB,gBAAY,CAAA,CAAIA,MAAA,OAAA,EAAQ,UAAU;AAAA,UAClC,aAAa,YAAA;AAAA,UACb,MAAM;AAAA,UACN,eAAa;AAAA,UACb,uBAAoB;AAAA,QAAA;QAEVA,MAAA,OAAA,EAAQ,UAArBF,UAAA,GAAAC,mBAAyE,SAAzE,YAAyEE,gBAAzBD,MAAA,OAAA,EAAQ,MAAM,GAAA,CAAA;;;;;"}

package/dist/vue/primevue/JfTextArea.vue2.js

@@ -0,0 +1,5 @@
+import _sfc_main from "./JfTextArea.vue.js";
+export {
+  _sfc_main as default
+};
+//# sourceMappingURL=JfTextArea.vue2.js.map

package/dist/vue/primevue/JfTextArea.vue2.js.map

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

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

@@ -0,0 +1,83 @@
+import JfText from "./JfText.vue";
+import JfTextArea from "./JfTextArea.vue";
+import JfNumber from "./JfNumber.vue";
+import JfEnum from "./JfEnum.vue";
+import JfEnumArray from "./JfEnumArray.vue";
+import JfBoolean from "./JfBoolean.vue";
+export declare const primevueRenderers: {
+    tester: (uischema: import("@jsonforms/core").UISchemaElement, schema: import("@jsonforms/core").JsonSchema, context: import("@jsonforms/core").TesterContext) => number;
+    renderer: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+        schema: {
+            required: true;
+            type: import("vue").PropType<import("@jsonforms/core").JsonSchema>;
+        };
+        uischema: {
+            required: true;
+            type: import("vue").PropType<import("@jsonforms/core").ControlElement>;
+        };
+        path: {
+            required: true;
+            type: StringConstructor;
+        };
+        enabled: {
+            required: false;
+            type: BooleanConstructor;
+            default: undefined;
+        };
+        renderers: {
+            required: boolean;
+            type: import("vue").PropType<import("@jsonforms/core").JsonFormsRendererRegistryEntry[]>;
+            default: undefined;
+        };
+        cells: {
+            required: boolean;
+            type: import("vue").PropType<import("@jsonforms/core").JsonFormsCellRendererRegistryEntry[]>;
+            default: undefined;
+        };
+        config: {
+            required: boolean;
+            type: ObjectConstructor;
+            default: undefined;
+        };
+    }>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+        schema: {
+            required: true;
+            type: import("vue").PropType<import("@jsonforms/core").JsonSchema>;
+        };
+        uischema: {
+            required: true;
+            type: import("vue").PropType<import("@jsonforms/core").ControlElement>;
+        };
+        path: {
+            required: true;
+            type: StringConstructor;
+        };
+        enabled: {
+            required: false;
+            type: BooleanConstructor;
+            default: undefined;
+        };
+        renderers: {
+            required: boolean;
+            type: import("vue").PropType<import("@jsonforms/core").JsonFormsRendererRegistryEntry[]>;
+            default: undefined;
+        };
+        cells: {
+            required: boolean;
+            type: import("vue").PropType<import("@jsonforms/core").JsonFormsCellRendererRegistryEntry[]>;
+            default: undefined;
+        };
+        config: {
+            required: boolean;
+            type: ObjectConstructor;
+            default: undefined;
+        };
+    }>> & Readonly<{}>, {
+        enabled: boolean;
+        renderers: import("@jsonforms/core").JsonFormsRendererRegistryEntry[];
+        cells: import("@jsonforms/core").JsonFormsCellRendererRegistryEntry[];
+        config: Record<string, any>;
+    }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+}[];
+export { JfText, JfTextArea, JfNumber, JfEnum, JfEnumArray, JfBoolean };
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/vue/primevue/index.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,MAAM,cAAc,CAAC;AAClC,OAAO,UAAU,MAAM,kBAAkB,CAAC;AAC1C,OAAO,QAAQ,MAAM,gBAAgB,CAAC;AACtC,OAAO,MAAM,MAAM,cAAc,CAAC;AAClC,OAAO,WAAW,MAAM,mBAAmB,CAAC;AAC5C,OAAO,SAAS,MAAM,iBAAiB,CAAC;AA0ExC,eAAO,MAAM,iBAAiB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiB7B,CAAC;AAEF,OAAO,EAAE,MAAM,EAAE,UAAU,EAAE,QAAQ,EAAE,MAAM,EAAE,WAAW,EAAE,SAAS,EAAE,CAAC"}

package/dist/vue/primevue/index.js

@@ -0,0 +1,71 @@
+import _sfc_main$1 from "./JfText.vue.js";
+import _sfc_main from "./JfTextArea.vue.js";
+import _sfc_main$2 from "./JfNumber.vue.js";
+import JfEnum from "./JfEnum.vue.js";
+import _sfc_main$3 from "./JfEnumArray.vue.js";
+import _sfc_main$4 from "./JfBoolean.vue.js";
+import { rankWith, isStringControl, or, isNumberControl, isIntegerControl, and, isControl, schemaMatches, isBooleanControl } from "@jsonforms/core";
+const injectLayoutStyles = () => {
+  if (typeof window !== "undefined" && typeof document !== "undefined") {
+    if (!document.getElementById("jsonforms-primevue-styles")) {
+      const style = document.createElement("style");
+      style.id = "jsonforms-primevue-styles";
+      style.textContent = `
+/* JSONForms PrimeVue Provider Protocols Layout Styles */
+.vertical-layout {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 1rem;
+  width: 100%;
+}
+
+.vertical-layout-item {
+  width: 100%;
+}
+      `;
+      document.head.appendChild(style);
+    }
+  }
+};
+injectLayoutStyles();
+const isScalarEnum = (s) => {
+  const schema = s;
+  return schema && schema.type !== "array" && (Array.isArray(schema.enum) || Array.isArray(schema.oneOf));
+};
+const isEnumArray = (s) => {
+  const schema = s;
+  return schema?.type === "array" && (Array.isArray(schema.items?.enum) || Array.isArray(schema.items?.oneOf));
+};
+const isMultilineString = (uischema, schema) => {
+  return isStringControl(uischema, schema, {}) && uischema?.options?.multi === true;
+};
+const PRIME = 100;
+const primevueRenderers = [
+  // Multiline text has higher priority than regular text
+  { tester: rankWith(PRIME + 4, isMultilineString), renderer: _sfc_main },
+  { tester: rankWith(PRIME + 3, isStringControl), renderer: _sfc_main$1 },
+  {
+    tester: rankWith(PRIME + 4, or(isNumberControl, isIntegerControl)),
+    renderer: _sfc_main$2
+  },
+  {
+    tester: rankWith(PRIME + 5, and(isControl, schemaMatches(isScalarEnum))),
+    renderer: JfEnum
+  },
+  {
+    tester: rankWith(PRIME + 6, and(isControl, schemaMatches(isEnumArray))),
+    renderer: _sfc_main$3
+  },
+  { tester: rankWith(PRIME + 3, isBooleanControl), renderer: _sfc_main$4 }
+];
+export {
+  _sfc_main$4 as JfBoolean,
+  JfEnum,
+  _sfc_main$3 as JfEnumArray,
+  _sfc_main$2 as JfNumber,
+  _sfc_main$1 as JfText,
+  _sfc_main as JfTextArea,
+  primevueRenderers
+};
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../src/vue/primevue/index.ts"],"sourcesContent":["import JfText from \"./JfText.vue\";\nimport JfTextArea from \"./JfTextArea.vue\";\nimport JfNumber from \"./JfNumber.vue\";\nimport JfEnum from \"./JfEnum.vue\";\nimport JfEnumArray from \"./JfEnumArray.vue\";\nimport JfBoolean from \"./JfBoolean.vue\";\n\n// Auto-inject layout styles\nconst injectLayoutStyles = () => {\n  if (typeof window !== \"undefined\" && typeof document !== \"undefined\") {\n    if (!document.getElementById(\"jsonforms-primevue-styles\")) {\n      const style = document.createElement(\"style\");\n      style.id = \"jsonforms-primevue-styles\";\n      style.textContent = `\n/* JSONForms PrimeVue Provider Protocols Layout Styles */\n.vertical-layout {\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  gap: 1rem;\n  width: 100%;\n}\n\n.vertical-layout-item {\n  width: 100%;\n}\n      `;\n      document.head.appendChild(style);\n    }\n  }\n};\n\n// Inject styles when this module is imported\ninjectLayoutStyles();\n\nimport {\n  rankWith,\n  isStringControl,\n  or,\n  isNumberControl,\n  isIntegerControl,\n  and,\n  isControl,\n  schemaMatches,\n  isBooleanControl,\n} from \"@jsonforms/core\";\n\n// helpers for enum detection\nconst isScalarEnum = (s?: object) => {\n  const schema = s as { type?: string; enum?: unknown[]; oneOf?: unknown[] };\n  return (\n    schema &&\n    schema.type !== \"array\" &&\n    (Array.isArray(schema.enum) || Array.isArray(schema.oneOf))\n  );\n};\n\nconst isEnumArray = (s?: object) => {\n  const schema = s as {\n    type?: string;\n    items?: { enum?: unknown[]; oneOf?: unknown[] };\n  };\n  return (\n    schema?.type === \"array\" &&\n    (Array.isArray(schema.items?.enum) || Array.isArray(schema.items?.oneOf))\n  );\n};\n\n// helper for multiline detection\nconst isMultilineString = (uischema: unknown, schema: unknown) => {\n  return (\n    isStringControl(uischema as never, schema as never, {} as never) &&\n    (uischema as { options?: { multi?: boolean } })?.options?.multi === true\n  );\n};\n\n// Give PrimeVue renderers a high base rank; vanilla commonly uses small ranks (2–5)\nconst PRIME = 100;\n\nexport const primevueRenderers = [\n  // Multiline text has higher priority than regular text\n  { tester: rankWith(PRIME + 4, isMultilineString), renderer: JfTextArea },\n  { tester: rankWith(PRIME + 3, isStringControl), renderer: JfText },\n  {\n    tester: rankWith(PRIME + 4, or(isNumberControl, isIntegerControl)),\n    renderer: JfNumber,\n  },\n  {\n    tester: rankWith(PRIME + 5, and(isControl, schemaMatches(isScalarEnum))),\n    renderer: JfEnum,\n  },\n  {\n    tester: rankWith(PRIME + 6, and(isControl, schemaMatches(isEnumArray))),\n    renderer: JfEnumArray,\n  },\n  { tester: rankWith(PRIME + 3, isBooleanControl), renderer: JfBoolean },\n];\n\nexport { JfText, JfTextArea, JfNumber, JfEnum, JfEnumArray, JfBoolean };\n"],"names":["JfTextArea","JfText","JfNumber","JfEnumArray","JfBoolean"],"mappings":";;;;;;;AAQA,MAAM,qBAAqB,MAAM;AAC/B,MAAI,OAAO,WAAW,eAAe,OAAO,aAAa,aAAa;AACpE,QAAI,CAAC,SAAS,eAAe,2BAA2B,GAAG;AACzD,YAAM,QAAQ,SAAS,cAAc,OAAO;AAC5C,YAAM,KAAK;AACX,YAAM,cAAc;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAcpB,eAAS,KAAK,YAAY,KAAK;AAAA,IACjC;AAAA,EACF;AACF;AAGA,mBAAA;AAeA,MAAM,eAAe,CAAC,MAAe;AACnC,QAAM,SAAS;AACf,SACE,UACA,OAAO,SAAS,YACf,MAAM,QAAQ,OAAO,IAAI,KAAK,MAAM,QAAQ,OAAO,KAAK;AAE7D;AAEA,MAAM,cAAc,CAAC,MAAe;AAClC,QAAM,SAAS;AAIf,SACE,QAAQ,SAAS,YAChB,MAAM,QAAQ,OAAO,OAAO,IAAI,KAAK,MAAM,QAAQ,OAAO,OAAO,KAAK;AAE3E;AAGA,MAAM,oBAAoB,CAAC,UAAmB,WAAoB;AAChE,SACE,gBAAgB,UAAmB,QAAiB,CAAA,CAAW,KAC9D,UAAgD,SAAS,UAAU;AAExE;AAGA,MAAM,QAAQ;AAEP,MAAM,oBAAoB;AAAA;AAAA,EAE/B,EAAE,QAAQ,SAAS,QAAQ,GAAG,iBAAiB,GAAG,UAAUA,UAAA;AAAA,EAC5D,EAAE,QAAQ,SAAS,QAAQ,GAAG,eAAe,GAAG,UAAUC,YAAA;AAAA,EAC1D;AAAA,IACE,QAAQ,SAAS,QAAQ,GAAG,GAAG,iBAAiB,gBAAgB,CAAC;AAAA,IACjE,UAAUC;AAAAA,EAAA;AAAA,EAEZ;AAAA,IACE,QAAQ,SAAS,QAAQ,GAAG,IAAI,WAAW,cAAc,YAAY,CAAC,CAAC;AAAA,IACvE,UAAU;AAAA,EAAA;AAAA,EAEZ;AAAA,IACE,QAAQ,SAAS,QAAQ,GAAG,IAAI,WAAW,cAAc,WAAW,CAAC,CAAC;AAAA,IACtE,UAAUC;AAAAA,EAAA;AAAA,EAEZ,EAAE,QAAQ,SAAS,QAAQ,GAAG,gBAAgB,GAAG,UAAUC,YAAA;AAC7D;"}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@narrative.io/jsonforms-provider-protocols",
-	"version": "1.0.3",
+	"version": "1.1.0-beta.0",
 	"description": "Dynamic data provider capabilities for JSONForms with Vue 3 integration",
 	"type": "module",
 	"author": "Narrative I/O",
@@ -64,7 +64,11 @@
 		"test:watch": "bun test --watch",
 		"lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix",
 		"lint:check": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts",
-		"format": "prettier --write src/"
+		"format": "prettier --write src/",
+		"demo": "cd demo && npm start",
+		"demo:install": "cd demo && npm install",
+		"demo:dev": "cd demo && npm run dev",
+		"demo:api": "cd demo && npm run api"
 	},
 	"devDependencies": {
 		"@commitlint/config-conventional": "^19.8.1",
@@ -83,6 +87,7 @@
 		"eslint-plugin-vue": "^10.4.0",
 		"globals": "^16.3.0",
 		"prettier": "^3.6.2",
+		"primevue": "^4.3.8",
 		"typescript": "^5.9.2",
 		"typescript-eslint": "^8.41.0",
 		"vite": "^7.1.3",

package/src/protocols/rest_api.ts

@@ -83,7 +83,14 @@ export const RestApiProtocol = (): Protocol<RestApiCfg> => ({
     let cursor: unknown = null;
     let page = 0;
     do {
-      const url = new URL(renderTpl(cfg.url, { data: ctx.data, ui: ctx.ui }));
+      const renderedUrl = renderTpl(cfg.url, { data: ctx.data, ui: ctx.ui });
+
+      // Check if URL has unresolved template variables (empty string after template rendering)
+      if (cfg.url.includes("{{") && renderedUrl.endsWith("/")) {
+        return { items: [], ttl: 0 };
+      }
+
+      const url = new URL(renderedUrl);
       const q = renderObj(cfg.query ?? {}, {
         data: ctx.data,
         ui: ctx.ui,

package/src/vue/components/ProviderAutocomplete.vue

@@ -3,6 +3,7 @@ import type { ControlElement, JsonSchema } from "@jsonforms/core";
 import { useJsonFormsControl } from "@jsonforms/vue";
 import { computed, ref, watch } from "vue";
 import { useProvider } from "../composables/useProvider";
+import AutoComplete from "primevue/autocomplete";
 
 const props = defineProps<{
   uischema: ControlElement;
@@ -19,6 +20,7 @@ const binding = computed(() => {
   }
   return provider;
 });
+
 const query = ref("");
 const { items, loading, error, reload } = useProvider(binding, {
   data: control.value.data,
@@ -34,21 +36,38 @@ const value = computed({
   get: () => control.value.data,
   set: (v) => handleChange(control.value.path, v),
 });
+
+const placeholder = computed(() =>
+  loading.value ? "Loading…" : "Type to search…",
+);
+
+const onComplete = (event: { query: string }) => {
+  query.value = event.query;
+};
+
+const onSelect = (event: { value?: { value?: unknown } | unknown }) => {
+  value.value = (event.value as { value?: unknown })?.value ?? event.value;
+};
 </script>
 
 <template>
-  <div class="provider-autocomplete">
-    <label>{{ control.schema.title }}</label>
-    <input
-      v-model="query"
-      :placeholder="loading ? 'Loading…' : 'Type to search…'"
-      type="text"
+  <div class="flex flex-column gap-1">
+    <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>
+    <AutoComplete
+      v-model="value"
+      class="w-full"
+      :suggestions="items"
+      option-label="label"
+      :placeholder="placeholder"
+      :disabled="!control.enabled"
+      @complete="onComplete"
+      @item-select="onSelect"
     />
-    <ul v-if="items.length">
-      <li v-for="it in items" :key="String(it.value)" @click="value = it.value">
-        {{ it.label }}
-      </li>
-    </ul>
-    <small v-if="error" role="alert">Failed: {{ error }}</small>
+    <small v-if="error" class="p-error" role="alert">Failed: {{ error }}</small>
   </div>
 </template>

package/src/vue/components/ProviderSelect.vue

@@ -1,8 +1,9 @@
 <script setup lang="ts">
 import type { ControlElement, JsonSchema } from "@jsonforms/core";
 import { useJsonFormsControl } from "@jsonforms/vue";
-import { computed, watch } from "vue";
+import { computed, inject } from "vue";
 import { useProvider } from "../composables/useProvider";
+import Dropdown from "primevue/dropdown";
 
 const props = defineProps<{
   uischema: ControlElement;
@@ -30,41 +31,59 @@ const deps = computed(
 );
 const depValues = computed(() => deps.value.map(() => null)); // you can resolve actual values via control.value.data & pointers
 
-const { items, loading, error, reload } = useProvider(binding, {
-  data: control.value.data,
+// 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,
 });
 
-watch(
-  () => control.value.data,
-  () => {
-    // if dependsOn changed → reload
-    reload();
-  },
-);
+// Provider will automatically reload when rootData changes due to reactive cache key
 
 const value = computed({
   get: () => control.value.data,
   set: (v) => handleChange(control.value.path, v),
 });
+
+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="provider-select">
-    <label>{{ control.schema.title }}</label>
-    <select v-model="value">
-      <option value="" disabled>{{ loading ? "Loading…" : "Select…" }}</option>
-      <option v-for="it in items" :key="String(it.value)" :value="it.value">
-        {{ it.label }}
-      </option>
-    </select>
-    <small v-if="error" role="alert">Failed to load: {{ error }}</small>
+  <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>
+    <Dropdown
+      v-model="value"
+      class="w-full"
+      :options="items"
+      option-label="label"
+      option-value="value"
+      :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>
-.provider-select select {
-  min-width: 16rem;
+:deep(.p-dropdown-label) {
+  text-align: left;
 }
 </style>

package/src/vue/composables/useProvider.ts

@@ -23,7 +23,7 @@ export function useProvider(
     | Ref<ProviderBinding>
     | ComputedRef<ProviderBinding>,
   ctxBits: {
-    data: unknown;
+    data: unknown | Ref<unknown> | ComputedRef<unknown>;
     path: string;
     dependsOnValues?: unknown[];
     uiQuery?: string;
@@ -46,6 +46,7 @@ export function useProvider(
       b: unref(binding),
       d: ctxBits.dependsOnValues ?? [],
       q: ctxBits.uiQuery ?? "",
+      data: unref(ctxBits.data), // Include data in cache key for reactivity
     }),
   );
 
@@ -68,7 +69,7 @@ export function useProvider(
         );
       }
       const out = await driver.resolve(bindingValue.config ?? {}, {
-        data: ctxBits.data,
+        data: unref(ctxBits.data),
         path: ctxBits.path,
         ui: { query: ctxBits.uiQuery },
         signal: ac.signal,

package/src/vue/index.ts

@@ -17,7 +17,7 @@ const hasProvider = (uischema: UISchemaElement) => {
 
 // Create specific testers for each component type
 const providerSelectTester = rankWith(
-  6,
+  106, // Higher than PrimeVue base (100) to ensure providers take precedence
   and(
     or(isStringControl, isNumberControl, isIntegerControl),
     hasProvider,
@@ -26,7 +26,7 @@ const providerSelectTester = rankWith(
 );
 
 const providerAutocompleteTester = rankWith(
-  7,
+  107, // Higher than PrimeVue base (100) to ensure providers take precedence
   and(
     or(isStringControl, isNumberControl, isIntegerControl),
     hasProvider,
@@ -39,6 +39,11 @@ export const providerRenderers = [
   { tester: providerAutocompleteTester, renderer: ProviderAutocomplete },
 ];
 
+// Export PrimeVue renderers (styles are auto-injected)
+export { primevueRenderers } from "./primevue";
+
+// Export individual components
 export { ProviderAutocomplete, ProviderSelect };
 export { useProvider } from "./composables/useProvider";
 export * from "./testers";
+export * from "./primevue";

package/src/vue/primevue/JfBoolean.vue

@@ -0,0 +1,26 @@
+<script setup lang="ts">
+import type { ControlElement } from "@jsonforms/core";
+import { rendererProps, useJsonFormsControl } from "@jsonforms/vue";
+import Checkbox from "primevue/checkbox";
+
+defineOptions({ name: "JfBoolean" });
+
+const props = defineProps(rendererProps<ControlElement>());
+const { control, handleChange } = useJsonFormsControl(props);
+
+const onToggle = (val: boolean) => handleChange(control.value.path, val);
+</script>
+
+<template>
+  <div class="flex items-center gap-2">
+    <Checkbox
+      :binary="true"
+      :model-value="!!control.data"
+      :disabled="!control.enabled"
+      :aria-invalid="!!control.errors || undefined"
+      @update:model-value="onToggle"
+    />
+    <label v-if="control.label">{{ control.label }}</label>
+    <small v-if="control.errors" class="p-error">{{ control.errors }}</small>
+  </div>
+</template>