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

package/src/vue/primevue/JfEnum.vue

@@ -0,0 +1,67 @@
+<script setup lang="ts">
+import type { ControlElement, JsonSchema } from "@jsonforms/core";
+import { rendererProps, useJsonFormsControl } from "@jsonforms/vue";
+import { computed } from "vue";
+import Dropdown from "primevue/dropdown";
+
+defineOptions({ name: "JfEnum" });
+
+const props = defineProps(rendererProps<ControlElement>());
+const { control, handleChange } = useJsonFormsControl(props);
+
+type Opt = { label: string; value: unknown };
+const toOptions = (schema?: JsonSchema): Opt[] => {
+  if (!schema) return [];
+  const s = schema as {
+    enum?: unknown[];
+    oneOf?: Array<{ title?: string; const: unknown }>;
+  };
+  if (Array.isArray(s.enum))
+    return s.enum.map((v: unknown) => ({ label: String(v), value: v }));
+  if (Array.isArray(s.oneOf))
+    return s.oneOf.map((o) => ({
+      label: o.title ?? String(o.const),
+      value: o.const,
+    }));
+  return [];
+};
+
+const placeholder = computed<string | undefined>(
+  () =>
+    (control.value.uischema as { options?: { placeholder?: string } })?.options
+      ?.placeholder ?? control.value.description,
+);
+
+const options = computed(() => toOptions(control.value.schema));
+const onSelect = (val: unknown) => handleChange(control.value.path, val);
+</script>
+
+<template>
+  <div class="flex flex-column gap-2">
+    <label v-if="control.label" class="text-color text-left">{{
+      control.label
+    }}</label>
+    <div v-if="control.description" class="text-color-secondary text-left">
+      {{ control.description }}
+    </div>
+    <Dropdown
+      class="w-full"
+      :options="options"
+      option-label="label"
+      option-value="value"
+      :model-value="control.data ?? null"
+      :placeholder="placeholder"
+      :disabled="!control.enabled"
+      :aria-invalid="!!control.errors || undefined"
+      :show-clear="true"
+      @update:model-value="onSelect"
+    />
+    <small v-if="control.errors" class="p-error">{{ control.errors }}</small>
+  </div>
+</template>
+
+<style scoped>
+:deep(.p-dropdown-label) {
+  text-align: left;
+}
+</style>

package/src/vue/primevue/JfEnumArray.vue

@@ -0,0 +1,85 @@
+<script setup lang="ts">
+import type { ControlElement, JsonSchema } from "@jsonforms/core";
+import { rendererProps, useJsonFormsControl } from "@jsonforms/vue";
+import { computed } from "vue";
+import MultiSelect from "primevue/multiselect";
+
+defineOptions({ name: "JfEnumArray" });
+
+const props = defineProps(rendererProps<ControlElement>());
+const { control, handleChange } = useJsonFormsControl(props);
+
+type Opt = { label: string; value: unknown };
+const toOptions = (schema?: JsonSchema): Opt[] => {
+  if (!schema) return [];
+  const s = schema as {
+    enum?: unknown[];
+    oneOf?: Array<{ title?: string; const: unknown }>;
+  };
+  if (Array.isArray(s.enum))
+    return s.enum.map((v: unknown) => ({ label: String(v), value: v }));
+  if (Array.isArray(s.oneOf))
+    return s.oneOf.map((o) => ({
+      label: o.title ?? String(o.const),
+      value: o.const,
+    }));
+  return [];
+};
+
+const options = computed(() =>
+  toOptions((control.value.schema as { items?: JsonSchema })?.items),
+);
+const placeholder = computed<string | undefined>(
+  () =>
+    (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[]) => {
+  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 model = computed<unknown[]>({
+  get() {
+    const curr = Array.isArray(control.value.data) ? control.value.data : [];
+    // return a fresh copy so PrimeMultiSelect 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);
+  },
+});
+</script>
+
+<template>
+  <div class="flex flex-column gap-2">
+    <label v-if="control.label" class="text-color text-left">{{
+      control.label
+    }}</label>
+    <div v-if="control.description" class="text-color-secondary text-left">
+      {{ control.description }}
+    </div>
+
+    <MultiSelect
+      v-model="model"
+      class="w-full"
+      :options="options"
+      option-label="label"
+      option-value="value"
+      data-key="value"
+      display="chip"
+      :disabled="!control.enabled"
+      :aria-invalid="!!control.errors || undefined"
+      :placeholder="placeholder"
+    />
+
+    <small v-if="control.errors" class="p-error">{{ control.errors }}</small>
+  </div>
+</template>

package/src/vue/primevue/JfNumber.vue

@@ -0,0 +1,42 @@
+<script setup lang="ts">
+import type { ControlElement } from "@jsonforms/core";
+import { rendererProps, useJsonFormsControl } from "@jsonforms/vue";
+import { computed } from "vue";
+import InputNumber from "primevue/inputnumber";
+
+defineOptions({ name: "JfNumber" });
+
+const props = defineProps(rendererProps<ControlElement>());
+const { control, handleChange } = useJsonFormsControl(props);
+
+const placeholder = computed<string | undefined>(
+  () =>
+    (control.value.uischema as { options?: { placeholder?: string } })?.options
+      ?.placeholder ?? control.value.description,
+);
+
+const onNumber = (val: number | null) =>
+  handleChange(control.value.path, val ?? undefined);
+</script>
+
+<template>
+  <div class="flex flex-column gap-2">
+    <label v-if="control.label" class="text-color text-left">{{
+      control.label
+    }}</label>
+    <div v-if="control.description" class="text-color-secondary text-left">
+      {{ control.description }}
+    </div>
+    <InputNumber
+      class="w-full"
+      input-class="w-full"
+      :use-grouping="false"
+      :model-value="typeof control.data === 'number' ? control.data : null"
+      :placeholder="placeholder"
+      :disabled="!control.enabled"
+      :aria-invalid="!!control.errors || undefined"
+      @update:model-value="onNumber"
+    />
+    <small v-if="control.errors" class="p-error">{{ control.errors }}</small>
+  </div>
+</template>

package/src/vue/primevue/JfText.vue

@@ -0,0 +1,47 @@
+<script setup lang="ts">
+import type { ControlElement } from "@jsonforms/core";
+import { rendererProps, useJsonFormsControl } from "@jsonforms/vue";
+import { computed } from "vue";
+import InputText from "primevue/inputtext";
+
+defineOptions({ name: "JfText" });
+
+const props = defineProps(rendererProps<ControlElement>());
+const { control, handleChange } = useJsonFormsControl(props);
+
+const placeholder = computed<string | undefined>(
+  () =>
+    (control.value.uischema as { options?: { placeholder?: string } })?.options
+      ?.placeholder ?? control.value.description,
+);
+
+function onInput(val: string | undefined) {
+  const newValue = val ?? "";
+  if ((control.value.data ?? "") !== newValue) {
+    handleChange(control.value.path, newValue);
+  }
+}
+</script>
+
+<template>
+  <div class="flex flex-column gap-2">
+    <label v-if="control.label" class="text-color text-left">{{
+      control.label
+    }}</label>
+    <div v-if="control.description" class="text-color-secondary text-left">
+      {{ control.description }}
+    </div>
+    <InputText
+      class="w-full"
+      :model-value="control.data ?? ''"
+      :disabled="!control.enabled"
+      :aria-invalid="!!control.errors || undefined"
+      :placeholder="placeholder"
+      autocapitalize="off"
+      autocomplete="off"
+      spellcheck="false"
+      @update:model-value="onInput"
+    />
+    <small v-if="control.errors" class="p-error">{{ control.errors }}</small>
+  </div>
+</template>

package/src/vue/primevue/JfTextArea.vue

@@ -0,0 +1,46 @@
+<script setup lang="ts">
+import type { ControlElement } from "@jsonforms/core";
+import { rendererProps, useJsonFormsControl } from "@jsonforms/vue";
+import { computed } from "vue";
+import Textarea from "primevue/textarea";
+
+defineOptions({ name: "JfTextArea" });
+
+const props = defineProps(rendererProps<ControlElement>());
+const { control, handleChange } = useJsonFormsControl(props);
+
+const placeholder = computed<string | undefined>(
+  () =>
+    (control.value.uischema as { options?: { placeholder?: string } })?.options
+      ?.placeholder ?? control.value.description,
+);
+
+function onInput(val: string | undefined) {
+  const newValue = val ?? "";
+  if ((control.value.data ?? "") !== newValue) {
+    handleChange(control.value.path, newValue);
+  }
+}
+</script>
+
+<template>
+  <div class="flex flex-column gap-2">
+    <label v-if="control.label" class="text-color text-left">{{
+      control.label
+    }}</label>
+    <div v-if="control.description" class="text-color-secondary text-left">
+      {{ control.description }}
+    </div>
+    <Textarea
+      class="w-full"
+      :model-value="control.data ?? ''"
+      :disabled="!control.enabled"
+      :aria-invalid="!!control.errors || undefined"
+      :placeholder="placeholder"
+      :rows="4"
+      :auto-resize="true"
+      @update:model-value="onInput"
+    />
+    <small v-if="control.errors" class="p-error">{{ control.errors }}</small>
+  </div>
+</template>

package/src/vue/primevue/index.ts

@@ -0,0 +1,99 @@
+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";
+
+// Auto-inject layout styles
+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);
+    }
+  }
+};
+
+// Inject styles when this module is imported
+injectLayoutStyles();
+
+import {
+  rankWith,
+  isStringControl,
+  or,
+  isNumberControl,
+  isIntegerControl,
+  and,
+  isControl,
+  schemaMatches,
+  isBooleanControl,
+} from "@jsonforms/core";
+
+// helpers for enum detection
+const isScalarEnum = (s?: object) => {
+  const schema = s as { type?: string; enum?: unknown[]; oneOf?: unknown[] };
+  return (
+    schema &&
+    schema.type !== "array" &&
+    (Array.isArray(schema.enum) || Array.isArray(schema.oneOf))
+  );
+};
+
+const isEnumArray = (s?: object) => {
+  const schema = s as {
+    type?: string;
+    items?: { enum?: unknown[]; oneOf?: unknown[] };
+  };
+  return (
+    schema?.type === "array" &&
+    (Array.isArray(schema.items?.enum) || Array.isArray(schema.items?.oneOf))
+  );
+};
+
+// helper for multiline detection
+const isMultilineString = (uischema: unknown, schema: unknown) => {
+  return (
+    isStringControl(uischema as never, schema as never, {} as never) &&
+    (uischema as { options?: { multi?: boolean } })?.options?.multi === true
+  );
+};
+
+// Give PrimeVue renderers a high base rank; vanilla commonly uses small ranks (2–5)
+const PRIME = 100;
+
+export const primevueRenderers = [
+  // Multiline text has higher priority than regular text
+  { tester: rankWith(PRIME + 4, isMultilineString), renderer: JfTextArea },
+  { tester: rankWith(PRIME + 3, isStringControl), renderer: JfText },
+  {
+    tester: rankWith(PRIME + 4, or(isNumberControl, isIntegerControl)),
+    renderer: JfNumber,
+  },
+  {
+    tester: rankWith(PRIME + 5, and(isControl, schemaMatches(isScalarEnum))),
+    renderer: JfEnum,
+  },
+  {
+    tester: rankWith(PRIME + 6, and(isControl, schemaMatches(isEnumArray))),
+    renderer: JfEnumArray,
+  },
+  { tester: rankWith(PRIME + 3, isBooleanControl), renderer: JfBoolean },
+];
+
+export { JfText, JfTextArea, JfNumber, JfEnum, JfEnumArray, JfBoolean };

package/src/vue/styles.css

@@ -0,0 +1,15 @@
+/* JSONForms PrimeVue Provider Protocols Layout Styles */
+
+/* Style the vanilla VerticalLayout to be centered with gaps */
+.vertical-layout {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 1rem;
+  width: 100%;
+}
+
+/* Style individual vertical layout items */
+.vertical-layout-item {
+  width: 100%;
+}