allow webcomponent to use properties

Author: kchobantonov

packages/example/src/components/VuetifyJsonFormsWrapper.vue

@@ -1,34 +1,68 @@
-<script setup lang="ts">
-import { ref, useAttrs } from 'vue';
+<script lang="ts">
+import { defineComponent, ref, h, useAttrs, watch, nextTick } from 'vue';
+import { VProgressLinear } from 'vuetify/components';
 import { useScriptTag } from '@vueuse/core';
 
-const location = './js/vuetify-json-forms.js';
-const loading = ref(true);
+export default defineComponent({
+  name: 'VuetifyJsonFormsWrapper',
+  components: { VProgressLinear },
+  setup(_, { slots }) {
+    const attrs = useAttrs(); // collect all props/attrs
+    const loading = ref(true);
+    const elRef = ref<HTMLElement | null>(null);
 
-// Disable automatic inheritance of attributes
-defineOptions({
-  inheritAttrs: false,
-});
+    // Helper: assign props to the web component only if they differ
+    const assignProps = (el: HTMLElement, props: Record<string, any>) => {
+      Object.entries(props).forEach(([key, value]) => {
+        if ((el as any)[key] !== value) (el as any)[key] = value;
+      });
+    };
+
+    // Load the web component dynamically using useScriptTag
+    useScriptTag(
+      './js/vuetify-json-forms.js',
+      async () => {
+        loading.value = false;
+
+        // Wait for DOM update to ensure the web component is mounted
+        await nextTick();
+
+        if (elRef.value) {
+          assignProps(elRef.value, attrs);
+        }
+      },
+      { type: 'module' },
+    );
 
-// Get $attrs manually
-const attrs = useAttrs();
+    // Watch for prop changes and update the web component dynamically
+    watch(
+      () => ({ ...attrs }),
+      (newAttrs) => {
+        if (!elRef.value) return;
+        assignProps(elRef.value, newAttrs);
+      },
+      { deep: true },
+    );
 
-useScriptTag(
-  location,
-  // on script tag loaded.
-  (_el: HTMLScriptElement) => {
-    loading.value = false;
+    return () => {
+      if (loading.value) {
+        return h(VProgressLinear, {
+          indeterminate: true,
+          rounded: true,
+          height: 6,
+        });
+      }
+
+      return h(
+        'vuetify-json-forms',
+        { ref: elRef },
+        Object.keys(slots).length
+          ? Object.fromEntries(
+              Object.entries(slots).map(([name, slotFn]) => [name, slotFn]),
+            )
+          : undefined,
+      );
+    };
   },
-  { type: 'module' },
-);
+});
 </script>
-
-<template>
-  <v-progress-linear
-    v-if="loading"
-    indeterminate
-    rounded
-    height="6"
-  ></v-progress-linear>
-  <vuetify-json-forms v-else v-bind="attrs"></vuetify-json-forms>
-</template>

packages/example/src/core/types.ts

@@ -1,11 +1,10 @@
 import type { ActionEvent } from '@chobantonov/jsonforms-vuetify-renderers';
 import type {
-  JsonFormsCellRendererRegistryEntry,
-  JsonFormsRendererRegistryEntry,
   JsonFormsUISchemaRegistryEntry,
   JsonSchema,
   UISchemaElement,
 } from '@jsonforms/core';
+import type { StateProps } from '@jsonforms/examples';
 
 export type ExampleDescription = {
   name: string;
@@ -20,19 +19,7 @@ export type ExampleInputDescription = {
   uischemas?: JsonFormsUISchemaRegistryEntry[];
   data?: any;
   i18n?: Record<string, any>;
-  renderers?: JsonFormsRendererRegistryEntry[];
-  actions?: { label: string; apply: (props: StateProps) => any }[];
+  actions?: { label: string; apply: (props: StateProps) => StateProps }[];
   onHandleAction?: (event: ActionEvent) => void;
   config?: Record<string, any>;
 };
-
-export interface StateProps {
-  data: any;
-  schema?: JsonSchema;
-  uischema?: UISchemaElement;
-  renderers: JsonFormsRendererRegistryEntry[];
-  cells?: JsonFormsCellRendererRegistryEntry[];
-  config?: any;
-  uischemas?: JsonFormsUISchemaRegistryEntry[];
-  readonly?: boolean;
-}

packages/example/src/examples/custom-renderer/CustomArrayRenderer.vue

@@ -1,22 +1,21 @@
 <template>
   <array-layout-renderer v-bind="$props">
-    <template v-slot:toolbar-elements>{{ null }}</template>
-    <template v-slot:actions="actionsProps">
+    <template v-slot:toolbar-elements="actionsProps">
       <v-tooltip bottom>
         <template v-slot:activator="{ props }">
           <v-btn
             color="primary"
             rounded
-            :aria-label="actionsProps.labels.add"
+            :aria-label="actionsProps.control.translations.addAriaLabel"
             v-bind="props"
             :class="actionsProps.styles.arrayList.addButton"
             :disabled="actionsProps.addDisabled"
             @click="actionsProps.addClick"
           >
-            <v-icon>$plus</v-icon> {{ actionsProps.labels.add }}
+            Custom Add
           </v-btn>
         </template>
-        {{ actionsProps.labels.add }}
+        {{ actionsProps.control.translations.addTooltip }}
       </v-tooltip>
     </template>
   </array-layout-renderer>

packages/example/src/examples/custom-renderer/index.ts

@@ -4,12 +4,42 @@ import { entry as customArrayRendererEntry } from './CustomArrayRenderer.vue';
 import data from './data.json';
 import schema from './schema.json';
 import uischema from './uischema.json';
+import type { StateProps } from '@jsonforms/examples';
+
+const actions = [
+  {
+    label: 'Register Custom Renderer',
+    apply: (props: StateProps) => {
+      const alreadyRegistered = props.renderers.some(
+        (r) => r === customArrayRendererEntry,
+      );
+
+      return {
+        ...props,
+        renderers: alreadyRegistered
+          ? props.renderers
+          : [...props.renderers, customArrayRendererEntry],
+      };
+    },
+  },
+  {
+    label: 'Deregister Custom Renderer',
+    apply: (props: StateProps) => {
+      return {
+        ...props,
+        renderers: [
+          ...props.renderers.filter((r) => r !== customArrayRendererEntry),
+        ],
+      };
+    },
+  },
+];
 
 export const input: ExampleInputDescription = {
   schema,
   uischema,
   data,
-  renderers: [customArrayRendererEntry],
+  actions,
 };
 
 registerExamples([

packages/example/src/examples/multi-enum/index.ts

@@ -8,7 +8,7 @@ export const input: ExampleInputDescription = { schema, uischema, data };
 
 registerExamples([
   {
-    name: 'multi-array',
+    name: 'multi-enum',
     label: 'Multi Enum',
     input,
   },