@narrative.io/jsonforms-provider-protocols 1.1.0-beta.1 → 1.1.0-beta.10

package/src/vue/primevue/JfEnum.vue

@@ -1,12 +1,52 @@
+<script lang="ts">
+// Define props manually to avoid any potential circular dependency issues
+export default {
+  name: "JfEnum",
+  props: {
+    uischema: {
+      type: Object,
+      required: true,
+    },
+    schema: {
+      type: Object,
+      required: true,
+    },
+    path: {
+      type: String,
+      required: true,
+    },
+    enabled: {
+      type: Boolean,
+      default: undefined,
+    },
+    renderers: {
+      type: Array,
+      required: false,
+    },
+    cells: {
+      type: Array,
+      required: false,
+    },
+    config: {
+      type: Object,
+      required: false,
+    },
+  },
+};
+</script>
+
 <script setup lang="ts">
-import type { ControlElement, JsonSchema } from "@jsonforms/core";
-import { rendererProps, useJsonFormsControl } from "@jsonforms/vue";
-import { computed } from "vue";
+import type { JsonSchema } from "@jsonforms/core";
+import type { ControlProps } from "@jsonforms/vue";
+import { useJsonFormsControl } from "@jsonforms/vue";
+import { computed, ref, inject, getCurrentInstance } from "vue";
+import { useProvider } from "../composables/useProvider";
+import { useDerive } from "../composables/useDerive";
 import Dropdown from "primevue/dropdown";
 
-defineOptions({ name: "JfEnum" });
-
-const props = defineProps(rendererProps<ControlElement>());
+// Access props from the component instance
+const instance = getCurrentInstance()!;
+const props = instance.props as unknown as ControlProps;
 const { control, handleChange } = useJsonFormsControl(props);
 
 type Opt = { label: string; value: unknown };
@@ -26,14 +66,87 @@ const toOptions = (schema?: JsonSchema): Opt[] => {
   return [];
 };
 
-const placeholder = computed<string | undefined>(
+// Provider support
+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.uischema as { options?: { placeholder?: string } })?.options
-      ?.placeholder ?? control.value.description,
+    ((
+      (control.value.schema as Record<string, unknown>)?.[
+        "x-provider"
+      ] as Record<string, unknown>
+    )?.dependsOn as string[]) ?? [],
 );
+const depValues = computed(() => {
+  return deps.value.map((dep) => {
+    // Resolve dependency value from form data using JSON pointer-like path
+    const path = dep.startsWith("#/") ? dep.slice(2) : dep;
+    const keys = path.replace(/\//g, ".").split(".");
+    let value: unknown = rootData.value;
+    for (const key of keys) {
+      if (value && typeof value === "object" && key in value) {
+        value = (value as Record<string, unknown>)[key];
+      } else {
+        return null;
+      }
+    }
+    return value;
+  });
+});
+
+// Get the root form data from JSONForms context for template URL resolution
+const injectedFormData = inject<{ value: unknown }>("formData", { value: {} });
+const rootData = computed(() => injectedFormData.value || {});
+
+// Use provider if available, otherwise fall back to schema enum/oneOf
+const {
+  items: providerItems,
+  loading,
+  error,
+} = useProvider(binding, {
+  data: rootData,
+  path: control.value.path,
+  dependsOnValues: depValues.value,
+});
+
+const placeholder = computed<string | undefined>(() => {
+  if (loading.value) return "Loading…";
+  return (
+    (control.value.uischema as { options?: { placeholder?: string } })?.options
+      ?.placeholder ?? control.value.description
+  );
+});
+
+const options = computed(() => {
+  // Use provider items if available, otherwise fall back to schema enum/oneOf
+  if (binding.value && providerItems.value.length > 0) {
+    return providerItems.value;
+  }
+  return toOptions(control.value.schema);
+});
+
+// Add derive functionality
+useDerive({ control, handleChange });
+
+// Track user interaction
+const hasInteracted = ref(false);
+
+const showErrors = computed(() => hasInteracted.value && control.value.errors);
 
-const options = computed(() => toOptions(control.value.schema));
-const onSelect = (val: unknown) => handleChange(control.value.path, val);
+const onSelect = (val: unknown) => {
+  handleChange(control.value.path, val);
+};
+
+const onBlur = () => {
+  hasInteracted.value = true;
+};
 </script>
 
 <template>
@@ -51,17 +164,15 @@ const onSelect = (val: unknown) => handleChange(control.value.path, val);
       option-value="value"
       :model-value="control.data ?? null"
       :placeholder="placeholder"
-      :disabled="!control.enabled"
-      :aria-invalid="!!control.errors || undefined"
+      :disabled="!control.enabled || loading"
+      :aria-invalid="!!showErrors || undefined"
       :show-clear="true"
       @update:model-value="onSelect"
+      @blur="onBlur"
     />
-    <small v-if="control.errors" class="p-error">{{ control.errors }}</small>
+    <small v-if="error" class="p-error" role="alert"
+      >Failed to load: {{ error }}</small
+    >
+    <small v-else-if="showErrors" class="p-error">{{ control.errors }}</small>
   </div>
 </template>
-
-<style scoped>
-:deep(.p-dropdown-label) {
-  text-align: left;
-}
-</style>

package/src/vue/primevue/JfEnumArray.vue

@@ -1,12 +1,51 @@
+<script lang="ts">
+export default {
+  name: "JfEnumArray",
+  props: {
+    uischema: {
+      type: Object,
+      required: true,
+    },
+    schema: {
+      type: Object,
+      required: true,
+    },
+    path: {
+      type: String,
+      required: true,
+    },
+    enabled: {
+      type: Boolean,
+      default: undefined,
+    },
+    renderers: {
+      type: Array,
+      required: false,
+    },
+    cells: {
+      type: Array,
+      required: false,
+    },
+    config: {
+      type: Object,
+      required: false,
+    },
+  },
+};
+</script>
+
 <script setup lang="ts">
-import type { ControlElement, JsonSchema } from "@jsonforms/core";
-import { rendererProps, useJsonFormsControl } from "@jsonforms/vue";
-import { computed } from "vue";
+import type { JsonSchema } from "@jsonforms/core";
+import type { ControlProps } from "@jsonforms/vue";
+import { useJsonFormsControl } from "@jsonforms/vue";
+import { computed, inject, getCurrentInstance } from "vue";
+import { useProvider } from "../composables/useProvider";
+import { useDerive } from "../composables/useDerive";
 import MultiSelect from "primevue/multiselect";
 
-defineOptions({ name: "JfEnumArray" });
-
-const props = defineProps(rendererProps<ControlElement>());
+// Access props from the component instance
+const instance = getCurrentInstance()!;
+const props = instance.props as unknown as ControlProps;
 const { control, handleChange } = useJsonFormsControl(props);
 
 type Opt = { label: string; value: unknown };
@@ -26,14 +65,74 @@ const toOptions = (schema?: JsonSchema): Opt[] => {
   return [];
 };
 
-const options = computed(() =>
-  toOptions((control.value.schema as { items?: JsonSchema })?.items),
-);
-const placeholder = computed<string | undefined>(
+// Provider support
+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.uischema as { options?: { placeholder?: string } })?.options
-      ?.placeholder ?? control.value.description,
+    ((
+      (control.value.schema as Record<string, unknown>)?.[
+        "x-provider"
+      ] as Record<string, unknown>
+    )?.dependsOn as string[]) ?? [],
 );
+const depValues = computed(() => {
+  return deps.value.map((dep) => {
+    // Resolve dependency value from form data using JSON pointer-like path
+    const path = dep.startsWith("#/") ? dep.slice(2) : dep;
+    const keys = path.replace(/\//g, ".").split(".");
+    let value: unknown = rootData.value;
+    for (const key of keys) {
+      if (value && typeof value === "object" && key in value) {
+        value = (value as Record<string, unknown>)[key];
+      } else {
+        return null;
+      }
+    }
+    return value;
+  });
+});
+
+// Get the root form data from JSONForms context for template URL resolution
+const injectedFormData = inject<{ value: unknown }>("formData", { value: {} });
+const rootData = computed(() => injectedFormData.value || {});
+
+// Use provider if available, otherwise fall back to schema enum/oneOf
+const {
+  items: providerItems,
+  loading,
+  error,
+} = useProvider(binding, {
+  data: rootData,
+  path: control.value.path,
+  dependsOnValues: depValues.value,
+});
+
+const options = computed(() => {
+  // Use provider items if available, otherwise fall back to schema enum/oneOf
+  if (binding.value && providerItems.value.length > 0) {
+    return providerItems.value;
+  }
+  return toOptions((control.value.schema as { items?: JsonSchema })?.items);
+});
+
+// Add derive functionality
+useDerive({ control, handleChange });
+
+const placeholder = computed<string | undefined>(() => {
+  if (loading.value) return "Loading…";
+  return (
+    (control.value.uischema as { options?: { placeholder?: string } })?.options
+      ?.placeholder ?? control.value.description
+  );
+});
 
 // order-insensitive shallow equality for primitive enums
 const sameSet = (a: unknown[], b: unknown[]) => {
@@ -75,11 +174,16 @@ const model = computed<unknown[]>({
       option-value="value"
       data-key="value"
       display="chip"
-      :disabled="!control.enabled"
+      :disabled="!control.enabled || loading"
       :aria-invalid="!!control.errors || undefined"
       :placeholder="placeholder"
     />
 
-    <small v-if="control.errors" class="p-error">{{ control.errors }}</small>
+    <small v-if="error" class="p-error" role="alert"
+      >Failed to load: {{ error }}</small
+    >
+    <small v-else-if="control.errors" class="p-error">{{
+      control.errors
+    }}</small>
   </div>
 </template>

package/src/vue/primevue/JfNumber.vue

@@ -1,22 +1,108 @@
+<script lang="ts">
+export default {
+  name: "JfNumber",
+  props: {
+    uischema: {
+      type: Object,
+      required: true,
+    },
+    schema: {
+      type: Object,
+      required: true,
+    },
+    path: {
+      type: String,
+      required: true,
+    },
+    enabled: {
+      type: Boolean,
+      default: undefined,
+    },
+    renderers: {
+      type: Array,
+      required: false,
+    },
+    cells: {
+      type: Array,
+      required: false,
+    },
+    config: {
+      type: Object,
+      required: false,
+    },
+  },
+};
+</script>
+
 <script setup lang="ts">
-import type { ControlElement } from "@jsonforms/core";
-import { rendererProps, useJsonFormsControl } from "@jsonforms/vue";
-import { computed } from "vue";
+import type { ControlProps } from "@jsonforms/vue";
+import { useJsonFormsControl } from "@jsonforms/vue";
+import { computed, ref, getCurrentInstance } from "vue";
+import { useDerive } from "../composables/useDerive";
 import InputNumber from "primevue/inputnumber";
 
-defineOptions({ name: "JfNumber" });
-
-const props = defineProps(rendererProps<ControlElement>());
+// Access props from the component instance
+const instance = getCurrentInstance()!;
+const props = instance.props as unknown as ControlProps;
 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 onNumber = (val: number | null) =>
+const placeholder = computed<string | undefined>(
+  () => (options.value.placeholder as string) ?? control.value.description,
+);
+
+// Add derive functionality
+useDerive({ control, handleChange });
+
+// 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;
+});
+
+// Track user interaction
+const hasInteracted = ref(false);
+
+const showErrors = computed(() => hasInteracted.value && control.value.errors);
+
+const onNumber = (val: number | null) => {
   handleChange(control.value.path, val ?? undefined);
+};
+
+const onBlur = () => {
+  hasInteracted.value = true;
+};
 </script>
 
 <template>
@@ -30,13 +116,18 @@ 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"
-      :aria-invalid="!!control.errors || undefined"
+      :aria-invalid="!!showErrors || undefined"
       @update:model-value="onNumber"
+      @blur="onBlur"
     />
-    <small v-if="control.errors" class="p-error">{{ control.errors }}</small>
+    <small v-if="showErrors" class="p-error">{{ control.errors }}</small>
   </div>
 </template>

package/src/vue/primevue/JfText.vue

@@ -1,26 +1,150 @@
+<script lang="ts">
+export default {
+  name: "JfText",
+  props: {
+    uischema: {
+      type: Object,
+      required: true,
+    },
+    schema: {
+      type: Object,
+      required: true,
+    },
+    path: {
+      type: String,
+      required: true,
+    },
+    enabled: {
+      type: Boolean,
+      default: undefined,
+    },
+    renderers: {
+      type: Array,
+      required: false,
+    },
+    cells: {
+      type: Array,
+      required: false,
+    },
+    config: {
+      type: Object,
+      required: false,
+    },
+  },
+};
+</script>
+
 <script setup lang="ts">
-import type { ControlElement } from "@jsonforms/core";
-import { rendererProps, useJsonFormsControl } from "@jsonforms/vue";
-import { computed } from "vue";
+import type { ControlProps } from "@jsonforms/vue";
+import { useJsonFormsControl } from "@jsonforms/vue";
+import { computed, ref, inject, watch, getCurrentInstance } from "vue";
+import { useProvider } from "../composables/useProvider";
+import { useDerive } from "../composables/useDerive";
 import InputText from "primevue/inputtext";
+import AutoComplete from "primevue/autocomplete";
 
-defineOptions({ name: "JfText" });
-
-const props = defineProps(rendererProps<ControlElement>());
+// Access props from the component instance
+const instance = getCurrentInstance()!;
+const props = instance.props as unknown as ControlProps;
 const { control, handleChange } = useJsonFormsControl(props);
 
-const placeholder = computed<string | undefined>(
+// Provider support for autocomplete functionality
+const binding = computed(() => {
+  const provider = control.value.uischema?.options?.provider;
+  // Ensure load property is set to 'query' by default for autocomplete
+  if (provider && typeof provider === "object" && !provider.load) {
+    return { ...provider, load: "query" };
+  }
+  return provider;
+});
+
+const deps = computed(
   () =>
-    (control.value.uischema as { options?: { placeholder?: string } })?.options
-      ?.placeholder ?? control.value.description,
+    ((
+      (control.value.schema as Record<string, unknown>)?.[
+        "x-provider"
+      ] as Record<string, unknown>
+    )?.dependsOn as string[]) ?? [],
 );
+const depValues = computed(() => {
+  return deps.value.map((dep) => {
+    // Resolve dependency value from form data using JSON pointer-like path
+    const path = dep.startsWith("#/") ? dep.slice(2) : dep;
+    const keys = path.replace(/\//g, ".").split(".");
+    let value: unknown = rootData.value;
+    for (const key of keys) {
+      if (value && typeof value === "object" && key in value) {
+        value = (value as Record<string, unknown>)[key];
+      } else {
+        return null;
+      }
+    }
+    return value;
+  });
+});
+
+// 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 query = ref("");
+const { items, loading, error, reload } = useProvider(binding, {
+  data: rootData,
+  path: control.value.path,
+  uiQuery: query.value,
+  dependsOnValues: depValues.value,
+});
+
+watch(query, () => {
+  if (binding.value?.load === "query") reload();
+});
+
+const placeholder = computed<string | undefined>(() => {
+  if (loading.value) return "Loading…";
+  return (
+    (control.value.uischema as { options?: { placeholder?: string } })?.options
+      ?.placeholder ?? control.value.description
+  );
+});
+
+const isAutocomplete = computed(() => !!binding.value);
+
+// Add derive functionality
+useDerive({ control, handleChange });
+
+// Track user interaction
+const hasInteracted = ref(false);
+const hasFocused = ref(false);
+
+const showErrors = computed(() => hasInteracted.value && control.value.errors);
 
 function onInput(val: string | undefined) {
-  const newValue = val ?? "";
-  if ((control.value.data ?? "") !== newValue) {
+  // Convert empty strings to undefined for proper required field validation
+  const newValue = val && val.trim() !== "" ? val : undefined;
+  if (control.value.data !== newValue) {
     handleChange(control.value.path, newValue);
   }
 }
+
+function onBlur() {
+  if (hasFocused.value) {
+    hasInteracted.value = true;
+  }
+}
+
+function onFocus() {
+  hasFocused.value = true;
+}
+
+// Autocomplete specific handlers
+const onComplete = (event: { query: string }) => {
+  query.value = event.query;
+};
+
+const onSelect = (event: { value?: { value?: unknown } | unknown }) => {
+  const newValue = (event.value as { value?: unknown })?.value ?? event.value;
+  handleChange(control.value.path, newValue);
+};
 </script>
 
 <template>
@@ -31,17 +155,36 @@ function onInput(val: string | undefined) {
     <div v-if="control.description" class="text-color-secondary text-left">
       {{ control.description }}
     </div>
+    <AutoComplete
+      v-if="isAutocomplete"
+      class="w-full"
+      :model-value="control.data ?? ''"
+      :suggestions="items"
+      option-label="label"
+      :placeholder="placeholder"
+      :disabled="!control.enabled"
+      :aria-invalid="!!showErrors || undefined"
+      @complete="onComplete"
+      @item-select="onSelect"
+      @update:model-value="onInput"
+      @blur="onBlur"
+      @focus="onFocus"
+    />
     <InputText
+      v-else
       class="w-full"
       :model-value="control.data ?? ''"
       :disabled="!control.enabled"
-      :aria-invalid="!!control.errors || undefined"
+      :aria-invalid="!!showErrors || undefined"
       :placeholder="placeholder"
       autocapitalize="off"
       autocomplete="off"
       spellcheck="false"
       @update:model-value="onInput"
+      @blur="onBlur"
+      @focus="onFocus"
     />
-    <small v-if="control.errors" class="p-error">{{ control.errors }}</small>
+    <small v-if="error" class="p-error" role="alert">Failed: {{ error }}</small>
+    <small v-else-if="showErrors" class="p-error">{{ control.errors }}</small>
   </div>
 </template>