feat: Vue Vuetify improvements (#2408)

* add arrayList.title missed from the migration
* add additional customizations for array renderers
* fix one tab disable property

Author: kchobantonov

packages/vue-vuetify/src/complex/AllOfRenderer.vue

@@ -16,6 +16,7 @@
           :schema="control.schema"
           combinatorKeyword="allOf"
           :path="path"
+          :rootSchema="control.rootSchema"
         />
         <dispatch-renderer
           v-for="(allOfRenderInfo, allOfIndex) in allOfRenderInfos"

packages/vue-vuetify/src/complex/AnyOfRenderer.vue

@@ -4,6 +4,7 @@
       :schema="control.schema"
       combinatorKeyword="anyOf"
       :path="path"
+      :rootSchema="control.rootSchema"
     />
 
     <v-tabs v-model="selectedIndex">

packages/vue-vuetify/src/complex/ArrayControlRenderer.vue

@@ -1,7 +1,19 @@
 <template>
-  <v-card v-if="control.visible" :class="styles.arrayList.root" elevation="0">
-    <v-card-title>
-      <v-toolbar flat :class="styles.arrayList.toolbar">
+  <v-card
+    v-if="control.visible"
+    :class="styles.arrayList.root"
+    elevation="0"
+    v-bind="vuetifyProps('v-card')"
+  >
+    <v-card-title
+      :class="styles.arrayList.title"
+      v-bind="vuetifyProps('v-card-title')"
+    >
+      <v-toolbar
+        flat
+        :class="styles.arrayList.toolbar"
+        v-bind="vuetifyProps('v-toolbar')"
+      >
         <v-toolbar-title :class="styles.arrayList.label">{{
           computedLabel
         }}</v-toolbar-title>
@@ -36,7 +48,7 @@
         </v-tooltip>
       </v-toolbar>
     </v-card-title>
-    <v-card-text>
+    <v-card-text v-bind="vuetifyProps('v-card-text')">
       <v-container justify-space-around align-content-center>
         <v-row justify="center">
           <v-table

packages/vue-vuetify/src/complex/ObjectRenderer.vue

@@ -20,11 +20,8 @@
 import {
   Generate,
   findUISchema,
-  isObjectControl,
-  rankWith,
   type ControlElement,
   type GroupLayout,
-  type JsonFormsRendererRegistryEntry,
   type UISchemaElement,
 } from '@jsonforms/core';
 import {
@@ -76,7 +73,12 @@ const controlRenderer = defineComponent({
     },
     detailUiSchema(): UISchemaElement {
       const uiSchemaGenerator = () => {
-        const uiSchema = Generate.uiSchema(this.control.schema, 'Group');
+        const uiSchema = Generate.uiSchema(
+          this.control.schema,
+          'Group',
+          undefined,
+          this.control.rootSchema,
+        );
         if (isEmpty(this.control.path)) {
           uiSchema.type = 'VerticalLayout';
         } else {

packages/vue-vuetify/src/complex/OneOfRenderer.vue

@@ -4,6 +4,7 @@
       :schema="control.schema"
       combinatorKeyword="oneOf"
       :path="path"
+      :rootSchema="control.rootSchema"
     />
 
     <v-select

packages/vue-vuetify/src/complex/OneOfTabRenderer.vue

@@ -4,9 +4,14 @@
       :schema="control.schema"
       combinatorKeyword="oneOf"
       :path="path"
+      :rootSchema="control.rootSchema"
     />
 
-    <v-tabs v-model="selectIndex" @update:model-value="handleTabChange">
+    <v-tabs
+      v-model="selectIndex"
+      @update:model-value="handleTabChange"
+      :disabled="!control.enabled"
+    >
       <v-tab
         v-for="(oneOfRenderInfo, oneOfIndex) in oneOfRenderInfos"
         :key="`${control.path}-${oneOfIndex}`"

packages/vue-vuetify/src/complex/components/AdditionalProperties.vue

@@ -227,7 +227,12 @@ export default defineComponent({
 
       if (propSchema) {
         if (propSchema.type === 'object' || propSchema.type === 'array') {
-          propUiSchema = Generate.uiSchema(propSchema, 'Group');
+          propUiSchema = Generate.uiSchema(
+            propSchema,
+            'Group',
+            undefined,
+            control.value.rootSchema,
+          );
           (propUiSchema as GroupLayout).label =
             propSchema.title ?? startCase(propName);
         } else {

packages/vue-vuetify/src/complex/components/CombinatorProperties.vue

@@ -23,6 +23,7 @@ interface CombinatorProps {
   schema: JsonSchema;
   combinatorKeyword: 'oneOf' | 'anyOf' | 'allOf';
   path: string;
+  rootSchema: JsonSchema;
 }
 
 export default defineComponent({
@@ -43,6 +44,10 @@ export default defineComponent({
       type: String,
       required: true,
     },
+    rootSchema: {
+      type: Object as PropType<JsonSchema>,
+      required: true,
+    },
   },
   setup(props: CombinatorProps) {
     const otherProps: JsonSchema = omit(
@@ -52,6 +57,8 @@ export default defineComponent({
     const foundUISchema: UISchemaElement = Generate.uiSchema(
       otherProps,
       'VerticalLayout',
+      undefined,
+      props.rootSchema,
     );
 
     const isLayout = (uischema: UISchemaElement): uischema is Layout =>

packages/vue-vuetify/src/layouts/ArrayLayoutRenderer.vue

@@ -1,7 +1,18 @@
 <template>
-  <v-card v-if="control.visible" :class="styles.arrayList.root">
-    <v-card-title>
-      <v-toolbar flat :class="styles.arrayList.toolbar">
+  <v-card
+    v-if="control.visible"
+    :class="styles.arrayList.root"
+    v-bind="vuetifyProps('v-card')"
+  >
+    <v-card-title
+      :class="styles.arrayList.title"
+      v-bind="vuetifyProps('v-card-title')"
+    >
+      <v-toolbar
+        flat
+        :class="styles.arrayList.toolbar"
+        v-bind="vuetifyProps('v-toolbar')"
+      >
         <v-toolbar-title :class="styles.arrayList.label">{{
           computedLabel
         }}</v-toolbar-title>
@@ -45,7 +56,7 @@
         </slot>
       </v-toolbar>
     </v-card-title>
-    <v-card-text>
+    <v-card-text v-bind="vuetifyProps('v-card-text')">
       <v-container
         justify-space-around
         align-content-center
@@ -196,7 +207,11 @@
         {{ control.translations.noDataMessage }}
       </v-container>
     </v-card-text>
-    <v-card-actions v-if="$slots.actions" class="pb-8">
+    <v-card-actions
+      v-if="$slots.actions"
+      class="pb-8"
+      v-bind="vuetifyProps('v-card-actions')"
+    >
       <slot
         name="actions"
         :addClass="styles.arrayList.addButton"

packages/vue-vuetify/src/layouts/CategorizationRenderer.vue

@@ -73,14 +73,7 @@
 </template>
 
 <script lang="ts">
-import {
-  and,
-  categorizationHasCategory,
-  isCategorization,
-  rankWith,
-  type JsonFormsRendererRegistryEntry,
-  type Layout,
-} from '@jsonforms/core';
+import { type Layout } from '@jsonforms/core';
 import {
   DispatchRenderer,
   rendererProps,

packages/vue-vuetify/src/styles/defaultStyles.ts

@@ -23,6 +23,7 @@ export const defaultStyles: Styles = {
   arrayList: {
     root: 'array-list',
     toolbar: 'array-list-toolbar',
+    title: 'array-list-title',
     validationIcon: 'array-list-validation',
     addButton: 'array-list-add',
     label: 'array-list-label',

packages/vue-vuetify/src/styles/styles.ts

@@ -37,6 +37,7 @@ export interface Styles {
   arrayList: {
     root?: string;
     toolbar?: string;
+    title?: string;
     validationIcon?: string;
     container?: string;
     addButton?: string;

packages/vue-vuetify/tests/unit/complex/__snapshots__/ArrayControlRenderer.spec.ts.snap

@@ -21,7 +21,7 @@ exports[`ArrayControlRenderer.vue > should render component and match snapshot 1
       </div>
       <!---->
       <!---->
-      <div data-v-4896f876="" class="v-card-title">
+      <div data-v-4896f876="" class="v-card-title array-list-title">
         <header data-v-4896f876="" class="v-toolbar v-toolbar--flat v-toolbar--density-default v-theme--light v-locale--is-ltr array-list-toolbar">
           <!---->
           <div class="v-toolbar__content" style="height: 64px;">

packages/vue-vuetify/tests/unit/layout/__snapshots__/ArrayLayoutRenderer.spec.ts.snap

@@ -21,7 +21,7 @@ exports[`ArrayLayoutRenderer.vue > should render component and match snapshot 1`
       </div>
       <!---->
       <!---->
-      <div data-v-5f91636e="" class="v-card-title">
+      <div data-v-5f91636e="" class="v-card-title array-list-title">
         <header data-v-5f91636e="" class="v-toolbar v-toolbar--flat v-toolbar--density-default v-theme--light v-locale--is-ltr array-list-toolbar">
           <!---->
           <div class="v-toolbar__content" style="height: 64px;">