feat(vue-vuetify): improve mixed and additional property editors

packages/vue-vuetify/README.md

@@ -14,7 +14,7 @@ The renderers are in a preview state.
 Install JSON Forms Core, Vue 3 and Vue 3 Vuetify Renderers.
 
 ```bash
-npm i --save @jsonforms/core @jsonforms/vue @jsonforms/vue-vuetify
+npm i --save @jsonforms/core @jsonforms/vue @jsonforms/vue-vuetify splitpanes
 ```
 
 Also add the packages to the transpile dependencies in the `vite.config.js` file:
@@ -128,6 +128,44 @@ For more information on how JSON Forms can be configured, please see the [README
 
 ## Customization
 
+### Empty property names
+
+`allowEmptyPropertyNames` controls whether Additional Properties can add or rename
+properties to empty or whitespace-only names, and whether the Mixed renderer can
+rename tree properties to those names. It defaults to `false`: names for which
+`name.trim().length === 0` are rejected.
+
+Enable it globally through the JSON Forms `config` prop:
+
+```js
+const config = { allowEmptyPropertyNames: true };
+```
+
+Or set it for an object control through `uischema.options`:
+
+```json
+{
+  "type": "Control",
+  "scope": "#/properties/settings",
+  "options": {
+    "allowEmptyPropertyNames": true
+  }
+}
+```
+
+The UI-schema option takes precedence over global config, including an explicit
+`false` overriding global `true`.
+
+Accepted names are preserved exactly; trimming is only used to check whether a
+name is blank. Schema constraints such as `propertyNames.minLength` and duplicate
+name checks still apply when the option is enabled. Having a `propertyNames`
+schema does not automatically enable empty names.
+
+Existing empty or whitespace-only keys remain visible and editable, and can be
+deleted or renamed to a permitted name, subject to the usual permissions and
+schema restrictions. This option controls property **names**, not how empty
+property **values** are stored or cleared.
+
 ### Prepend and Append Slots
 
 All control renderers now support `prepend` and `append` slots, allowing you to add custom content before or after input fields without creating entirely custom renderers.

packages/vue-vuetify/dev/components/ExampleSettings.vue

@@ -464,6 +464,22 @@ const layouts = appstoreLayouts.map((value: AppstoreLayouts) => ({
           </v-tooltip>
         </v-col>
       </v-row>
+      <v-row>
+        <v-col>
+          <v-tooltip location="bottom">
+            <template v-slot:activator="{ props }">
+              <v-switch
+                v-model="appStore.jsonforms.config.allowEmptyPropertyNames"
+                label="Allow Empty Property Names"
+                v-bind="props"
+              ></v-switch>
+            </template>
+            Allow adding or renaming properties to empty or whitespace-only
+            names. Schema constraints still apply; UI-schema options override
+            this setting.
+          </v-tooltip>
+        </v-col>
+      </v-row>
     </v-container>
 
     <v-divider />

packages/vue-vuetify/dev/store/index.ts

@@ -35,6 +35,7 @@ const appstore = reactive({
       enableFilterErrorsBeforeTouch: false,
       filterErrorKeywordsBeforeTouch: ['required'],
       allowAdditionalPropertiesIfMissing: false,
+      allowEmptyPropertyNames: false,
     },
     locale: useLocalStorage('vuetify-example-locale', 'en'),
   },

packages/vue-vuetify/dev/views/ExampleView.vue

@@ -29,8 +29,7 @@ import examples from '../examples';
 import { useAppStore } from '../store';
 import { createAjv } from '../validate';
 
-import { Pane, Splitpanes } from 'splitpanes';
-import 'splitpanes/dist/splitpanes.css';
+import { VPane, VSplitpanes } from '../../src/components';
 import { getCustomRenderersForExample } from '../renderers';
 
 const { extendedVuetifyRenderers } = await import('../../src');
@@ -332,12 +331,11 @@ const handleAction = (action: Action) => {
               </v-card-title>
               <v-divider class="mx-4"></v-divider>
               <div class="json-forms">
-                <splitpanes
-                  :class="['default-theme', 'splitpanes-vuetify']"
-                  :rtl="appStore.rtl"
+                <v-splitpanes
+                  class="splitpanes-vuetify"
                   v-if="appStore.layout === 'demo-and-data'"
                 >
-                  <pane min-size="20">
+                  <v-pane min-size="20">
                     <v-card>
                       <v-card-title>
                         <v-toolbar flat>
@@ -348,8 +346,8 @@ const handleAction = (action: Action) => {
                       <v-divider class="mx-4"></v-divider>
                       <example-form :state="state" @jsfchange="onChange" />
                     </v-card>
-                  </pane>
-                  <pane>
+                  </v-pane>
+                  <v-pane>
                     <v-card>
                       <v-card-title>
                         <v-toolbar flat>
@@ -389,8 +387,8 @@ const handleAction = (action: Action) => {
                         :editorBeforeMount="registerValidations"
                       ></monaco-editor>
                     </v-card>
-                  </pane>
-                </splitpanes>
+                  </v-pane>
+                </v-splitpanes>
 
                 <example-form :state="state" @jsfchange="onChange" v-else />
               </div>
@@ -509,28 +507,3 @@ const handleAction = (action: Action) => {
     </div>
   </div>
 </template>
-<style lang="scss" scoped>
-:deep(.default-theme) {
-  &.splitpanes--vertical > .splitpanes__splitter,
-  .splitpanes--vertical > .splitpanes__splitter {
-    border-left: 1px solid rgb(var(--v-theme-on-surface-variant));
-  }
-
-  &.splitpanes--horizontal > .splitpanes__splitter,
-  .splitpanes--horizontal > .splitpanes__splitter {
-    border-top: 1px solid rgb(var(--v-theme-on-surface-variant));
-  }
-
-  .splitpanes__splitter {
-    background-color: rgb(var(--v-theme-surface));
-    &:before,
-    &:after {
-      background-color: rgb(var(--v-theme-on-surface-variant));
-    }
-    &:hover:before,
-    &:hover:after {
-      background-color: rgb(var(--v-theme-on-surface-variant));
-    }
-  }
-}
-</style>

packages/vue-vuetify/package.json

@@ -59,7 +59,7 @@
     "doc": "typedoc --tsconfig tsconfig.typedoc.json --name 'JSON Forms Vue Vuetify Renderers' --out docs --entryPoints 'src/**/*.ts' 'lib/index.d.ts'",
     "test": "vitest --watch=false",
     "build-only": "cross-env NODE_OPTIONS=\"--max-old-space-size=4096\" vite build",
-    "type-check": "vue-tsc -p tsconfig.lib.json"
+    "type-check": "vue-tsc -p tsconfig.lib.json && vue-tsc --noEmit -p tsconfig.vitest.json"
   },
   "peerDependencies": {
     "@jsonforms/core": "3.9.0-alpha.1",
@@ -68,6 +68,7 @@
     "dayjs": "^1.10.6",
     "lodash": "^4.17.21",
     "maska": "^2.1.11",
+    "splitpanes": "^3.1.5",
     "vue": "^3.5.0",
     "vuetify": "^3.11.0"
   },