@koumoul/vjsf 2.12.0-beta.8 → 2.12.1

package/lib/VJsf.js

@@ -28,8 +28,12 @@ import {
   VIcon,
   VInput,
   VRow,
+  VList,
+  VListItem,
   VListItemContent,
+  VListItemIcon,
   VListItemTitle,
+  VListItemAction,
   VMenu,
   VRadio,
   VRadioGroup,
@@ -80,8 +84,12 @@ export default {
     VIcon,
     VInput,
     VRow,
+    VList,
+    VListItem,
     VListItemContent,
+    VListItemIcon,
     VListItemTitle,
+    VListItemAction,
     VMenu,
     VRadio,
     VRadioGroup,

package/lib/VJsfNoDeps.js

@@ -50,7 +50,8 @@ export default {
     modelKey: { type: [String, Number], default: 'root' },
     parentKey: { type: String, default: '' },
     required: { type: Boolean, default: false },
-    sectionDepth: { type: Number, default: 0 }
+    sectionDepth: { type: Number, default: 0 },
+    sharedData: { type: Object, default: () => ({}) }
   },
   data() {
     return {
@@ -395,7 +396,7 @@ export default {
     },
     input(value, initial = false, fastForward = true) {
       if (Array.isArray(value) && this.separator) value = value.join(this.separator)
-      if (value === null || value === undefined || (value === '' && this.fullSchema.default !== '')) {
+      if (value === null || value === undefined) {
         if (this.fullSchema.nullable) {
           if (this.value !== null) {
             this.changed = true

package/lib/mixins/EditableArray.js

@@ -105,7 +105,8 @@ export default {
           options: { ...this.fullOptions, hideReadOnly: false },
           optionsRoot: this.initialOptions,
           sectionDepth: this.sectionDepth + 1,
-          separateValidation: false
+          separateValidation: false,
+          sharedData: this.sharedData
         },
         ref: modelKey,
         scopedSlots: this.childScopedSlots(this.fullSchema.key)
@@ -173,7 +174,8 @@ export default {
           options,
           optionsRoot: this.initialOptions,
           sectionDepth: this.sectionDepth + 1,
-          separateValidation: this.fullOptions.editMode !== 'inline'
+          separateValidation: this.fullOptions.editMode !== 'inline',
+          sharedData: this.sharedData
         },
         scopedSlots: this.childScopedSlots(this.fullSchema.key),
         ref: 'item-' + i,
@@ -195,6 +197,110 @@ export default {
         }
       }, this.childSlots(h, this.fullSchema.key))
     },
+    renderArrayItemMenu(h, item, header, isCurrentInlineEdit) {
+      if (this.disabled || this.fromUrl || this.fullSchema.fromData) return
+      const menuItems = []
+
+      for (const operation of this.fullOptions.arrayOperations) {
+        if (operation === 'duplicate') {
+          menuItems.push({
+            title: this.fullOptions.messages.duplicate,
+            color: 'default',
+            icon: this.fullOptions.icons.duplicate,
+            disabled: false,
+            on: { click: () => {
+              const index = this.value.findIndex(i => i === item)
+              const value = [...this.value]
+              value.splice(index, 0, { ...item })
+              this.input(value)
+              this.change()
+              this.shouldValidate = true
+              header.componentInstance.validate()
+            } }
+          })
+        }
+
+        if (operation === 'delete') {
+          menuItems.push({
+            title: this.fullOptions.messages.delete,
+            color: 'warning',
+            icon: this.fullOptions.icons.delete,
+            disabled: isCurrentInlineEdit,
+            on: { click: () => {
+              const value = this.value.filter(i => i !== item)
+              this.input(value)
+              this.change()
+              this.shouldValidate = true
+              header.componentInstance.validate()
+            } }
+          })
+        }
+
+        if (operation === 'copy' && this.fullSchema['x-arrayGroup']) {
+          menuItems.push({
+            title: this.fullOptions.messages.copy,
+            color: 'default',
+            icon: this.fullOptions.icons.copy,
+            disabled: false,
+            on: { click: () => {
+              this.$set(this.sharedData, 'clipboard_' + this.fullSchema['x-arrayGroup'], item)
+            } }
+          })
+        }
+
+        if (operation === 'paste' && this.fullSchema['x-arrayGroup']) {
+          menuItems.push({
+            title: this.fullOptions.messages.paste,
+            color: 'primary',
+            icon: this.fullOptions.icons.paste,
+            disabled: !(this.sharedData['clipboard_' + this.fullSchema['x-arrayGroup']]),
+            on: { click: () => {
+              if (this.fullOptions.editMode === 'inline') {
+                this.editabledArrayProp.editItem = null
+                this.editabledArrayProp.currentDialog = null
+              }
+              const index = this.value.findIndex(i => i === item)
+              const value = [...this.value]
+              value[index] = this.sharedData['clipboard_' + this.fullSchema['x-arrayGroup']]
+              this.input(value)
+              this.change()
+              this.shouldValidate = true
+              header.componentInstance.validate()
+            } }
+          })
+        }
+      }
+
+      if (!menuItems.length) return
+
+      // if there is only one item, do not create a menu but instead a single button
+      if (menuItems.length === 1) {
+        return h('v-btn', {
+          props: { icon: true, disabled: menuItems[0].disabled },
+          on: menuItems[0].on,
+          attrs: { title: menuItems[0].title },
+          class: 'ml-1'
+        }, [h('v-icon', { props: { color: menuItems[0].color } }, [menuItems[0].icon])])
+      }
+      return h('v-menu', {
+        props: { offsetY: true, left: true },
+        scopedSlots: {
+          activator: ({ on }) => h('v-btn', {
+            props: { icon: true },
+            attrs: { title: this.fullOptions.messages.openMenu },
+            class: 'ml-1',
+            on
+          }, [h('v-icon', this.fullOptions.icons.arrayMenu)]),
+          default: () => h('v-list', { class: 'pa-0', props: { dense: true } }, menuItems.map(menuItem => h('v-list-item', {
+            on: menuItem.on,
+            props: { disabled: menuItem.disabled }
+          }, [
+            h('v-list-item-icon', { class: 'mr-2' }, [h('v-icon', { props: { color: menuItem.color, small: true } }, [menuItem.icon])]),
+            h('v-list-item-content', {}, [h('v-list-item-title', {}, [menuItem.title])])
+          ])))
+        }
+      })
+    },
     renderEditableArray(h) {
       if (!this.isEditableArray) return
       const headerChildren = []
@@ -207,13 +313,15 @@ export default {
         }
       }
       const header = h('v-input', {
-        class: 'mt-2 pr-1 vjsf-array-header',
+        class: 'mt-2 mb-3 pr-1 vjsf-array-header',
         props: { label: this.label, rules: this.rules, value: this.value, validateOnBlur: !this.shouldValidate, hideDetails: 'auto' }
       }, headerChildren)
 
-      let list
+      const sortable = !this.fullOptions.disableSorting && !this.fullSchema.readOnly
+
+      let listItems
       if (this.value && this.value.length) {
-        const listItems = this.value.filter(item => !!item).map((item, i) => {
+        listItems = this.value.filter(item => !!item).map((item, i) => {
           let editAction
           const isCurrentInlineEdit = this.fullOptions.editMode === 'inline' && this.editabledArrayProp.currentDialog === i
           if (!this.disabled && this.fullOptions.arrayOperations.includes('update')) {
@@ -224,20 +332,7 @@ export default {
             }
           }
 
-          let deleteAction
-          if (!this.disabled && !this.fromUrl && !this.fullSchema.fromData && this.fullOptions.arrayOperations.includes('delete')) {
-            deleteAction = h('v-btn', { props: { icon: true, color: 'warning', disabled: isCurrentInlineEdit },
-              attrs: { id: this.fullOptions.idPrefix + this.dashKey + '-' + i + '--delete-button' },
-              class: { 'vjsf-array-delete-button': true },
-              on: { click: () => {
-                const value = this.value.filter(i => i !== item)
-                this.input(value)
-                this.change()
-                this.shouldValidate = true
-                header.componentInstance.validate()
-              } } }, [h('v-icon', this.fullOptions.icons.delete)])
-          }
-          const actions = h('v-card-actions', { class: 'pa-0' }, [h('v-spacer'), editAction, deleteAction])
+          const actions = h('v-card-actions', { class: 'pa-0' }, [h('v-spacer'), editAction, this.renderArrayItemMenu(h, item, header, isCurrentInlineEdit)])
 
           let itemChild, cardStyle, itemKey
           if (isCurrentInlineEdit) {
@@ -245,12 +340,8 @@ export default {
             itemKey = 'item-edit-' + i
           } else {
             itemChild = this.renderArrayItemRO(h, item, i)
-            itemKey = this.cached(`item-key-${i}`, { item }, () => {
-              return `${i}-${new Date().getTime()}`
-            })
-            if (!this.fullOptions.disableSorting) {
-              cardStyle = 'cursor: move;'
-            }
+            itemKey = this.cached(`item-key-${i}`, { item }, () => `${i}-${new Date().getTime()}`)
+            if (sortable) cardStyle = 'cursor: move;'
           }
 
           const titleClass = 'py-2 pr-2 ' + this.fullOptions.arrayItemsTitlesClasses[this.sectionDepth] || this.fullOptions.arrayItemsTitlesClasses[this.fullOptions.arrayItemsTitlesClasses.length - 1]
@@ -291,7 +382,7 @@ export default {
             })
           }
 
-          let itemClass = 'pa-2 vjsf-array-item'
+          let itemClass = 'py-1 vjsf-array-item'
           if (isCurrentInlineEdit) itemClass += ' vjsf-array-item-active'
           return h('v-col', { props: this.fullOptions.arrayItemColProps, class: itemClass, key: itemKey }, [
             h('v-card', {
@@ -301,18 +392,26 @@ export default {
             }, cardChildren)
           ])
         })
-        const noSort = this.fullOptions.disableSorting
-        list = noSort ? h('v-row', { class: 'pt-2 vjsf-array' }, listItems) : h('draggable', {
-          props: { value: this.value },
-          class: 'row pt-2 vjsf-array',
-          on: { input: (value) => {
+      }
+
+      let newValue
+      const list = !sortable ? h('v-row', { class: 'vjsf-array' }, listItems) : h('draggable', {
+        props: { value: this.value },
+        attrs: { group: this.fullSchema['x-arrayGroup'] || this.fullKey, ...this.fullOptions.sortableOptions },
+        class: 'row draggable vjsf-array',
+        on: {
+          change: async (evt) => {
+            if (evt.added) await this.$nextTick()
             this.editabledArrayProp.editItem = null
             this.editabledArrayProp.currentDialog = null
-            this.input(value)
+            this.input(newValue)
             this.change()
             this.shouldValidate = true
-          } } }, listItems)
-      }
+          },
+          input: async (value) => {
+            newValue = value
+          }
+        } }, listItems)
 
       return [header, list]
     }

package/lib/mixins/ObjectContainer.js

@@ -144,7 +144,6 @@ export default {
               h('v-card-text', { class: { 'pa-0': true } }, [childProp]),
               isLast ? null : h('v-card-actions', { class: { 'px-0': true } }, [h('v-btn', { props: { color: 'primary' },
                 on: { click: () => {
-                  console.log(childProp)
                   if (childProp.componentInstance.validate(true)) {
                     this.currentStep += 1
                   }
@@ -191,7 +190,8 @@ export default {
           required: forceRequired || !!(this.fullSchema.required && this.fullSchema.required.includes(schema.key)),
           options: { ...this.fullOptions, autofocus: this.fullOptions.autofocus && this.objectContainerChildrenCount === 1 },
           optionsRoot: this.initialOptions,
-          sectionDepth
+          sectionDepth,
+          sharedData: this.sharedData
         },
         class: this.fullOptions.childrenClass,
         scopedSlots: this.childScopedSlots(modelKey),

package/lib/mixins/SelectProperty.js

@@ -345,6 +345,10 @@ export default {
 
       if (this.openEndedSelect) {
         tag = 'v-combobox'
+        if (!props.multiple) {
+          props.hideSelected = true
+          on.input = value => this.input(value || '')
+        }
       }
 
       tag = this.customTag ? this.customTag : tag

package/lib/utils/options.js

@@ -1,4 +1,4 @@
-import { mdiCalendar, mdiClock, mdiInformation, mdiPlus, mdiPencil, mdiDelete } from '@mdi/js'
+import { mdiCalendar, mdiClock, mdiInformation, mdiPlus, mdiPencil, mdiDelete, mdiDotsVertical, mdiContentDuplicate, mdiContentCopy, mdiContentPaste } from '@mdi/js'
 
 export const defaultOptions = {
   locale: '',
@@ -45,13 +45,14 @@ export const defaultOptions = {
   filesAsDataUrl: false,
   hideTooltips: false,
   disableSorting: false,
+  sortableOptions: {},
   context: {},
   rules: {},
   initialValidation: 'defined',
   idPrefix: '',
   markdownit: {},
   editMode: 'dialog',
-  arrayOperations: ['create', 'update', 'delete'],
+  arrayOperations: ['create', 'update', 'duplicate', 'copy', 'paste', 'delete'],
   autofocus: false,
   httpOptions: {},
   selectAll: false,
@@ -94,7 +95,12 @@ export const localizedMessages = {
     undo: 'Undo',
     redo: 'Redo',
     selectAll: 'Select all',
-    stepperContinue: 'continue'
+    stepperContinue: 'continue',
+    openMenu: 'open menu',
+    delete: 'delete',
+    duplicate: 'duplicate',
+    copy: 'copy',
+    paste: 'paste'
   },
   fr: {
     required: 'Cette information est obligatoire',
@@ -129,7 +135,12 @@ export const localizedMessages = {
     undo: 'Défaire',
     redo: 'Refaire',
     selectAll: 'Tout sélectionner',
-    stepperContinue: 'continuer'
+    stepperContinue: 'continuer',
+    openMenu: 'ouvrir le menu',
+    delete: 'supprimer',
+    duplicate: 'dupliquer',
+    copy: 'copier',
+    paste: 'coller'
   },
   es: {
     required: 'Esta información es requerida',
@@ -234,7 +245,11 @@ export const iconSets = {
     info: mdiInformation,
     add: mdiPlus,
     edit: mdiPencil,
-    delete: mdiDelete
+    delete: mdiDelete,
+    arrayMenu: mdiDotsVertical,
+    duplicate: mdiContentDuplicate,
+    copy: mdiContentCopy,
+    paste: mdiContentPaste
   },
   mdi: {
     calendar: 'mdi-calendar',
@@ -242,7 +257,11 @@ export const iconSets = {
     info: 'mdi-information',
     add: 'mdi-plus',
     edit: 'mdi-pencil',
-    delete: 'mdi-delete'
+    delete: 'mdi-delete',
+    arrayMenu: 'mdi-dots-vertical',
+    duplicate: 'mdi-plus-circle-multiple-outline',
+    copy: 'mdi-content-copy',
+    paste: 'mdi-content-paste'
   },
   md: {
     calendar: 'event',
@@ -250,7 +269,11 @@ export const iconSets = {
     info: 'info',
     add: 'add',
     edit: 'create',
-    delete: 'delete'
+    delete: 'delete',
+    arrayMenu: 'more_vert',
+    duplicate: 'control_point_duplicate',
+    copy: 'copy',
+    paste: 'paste'
   },
   fa: {
     calendar: 'fa-calendar',
@@ -258,6 +281,10 @@ export const iconSets = {
     info: 'fa-info',
     add: 'fa-plus',
     edit: 'fa-edit',
-    delete: 'fa-trash'
+    delete: 'fa-trash',
+    arrayMenu: 'fa-ellipsis-vertical',
+    duplicate: 'fa-layer-plus',
+    copy: 'fa-copy',
+    paste: 'fa-paste'
   }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@koumoul/vjsf",
-  "version": "2.12.0-beta.8",
+  "version": "2.12.1",
   "description": "Generate forms for the vuetify UI library (vuejs) based on annotated JSON schemas.",
   "main": "dist/main.js",
   "scripts": {

package/test-apps/compiled/README.me

@@ -1,10 +0,0 @@
-# VJSF - test apps - compiled
-
-This page tests loading vjsf and all dependencies from compiled sources.
-
-```
-npm install
-(cd ../.. && npm run build)
-ln -s ../../dist dist
-npm start
-```

package/test-apps/compiled/index.html

@@ -1,85 +0,0 @@
-<html>
-  <head>
-    <title>VJSF - test apps - compiled</title>
-
-    <link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
-    <link href="https://cdn.jsdelivr.net/npm/@mdi/font@6.x/css/materialdesignicons.min.css" rel="stylesheet">
-    <link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet">
-    <link href="/dist/main.css" rel="stylesheet">
-  </head>
-  <body>
-    <div id="app">
-      <v-app>
-        <v-main>
-          <v-container>
-            <h1>VJSF - Test app - Compiled</h1>
-
-            <h2>Very basic form</h2>
-            <v-form v-model="form1.valid">
-              <v-jsf :schema="form1.schema" :options="form1.options" v-model="form1.model"></v-jsf>
-            </v-form>
-            valid={{form1.valid}}, model={{form1.model}}
-
-            <h2>Form with draggable array elements</h2>
-            <v-form v-model="form2.valid">
-              <v-jsf :schema="form2.schema" :options="form2.options" v-model="form2.model"></v-jsf>
-            </v-form>
-            valid={{form2.valid}}, model={{form2.model}}
-          </v-container>
-          
-        </v-main>
-      </v-app>
-    </div>
-
-    <script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
-    <script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script>
-    <script src="/dist/main.js"></script>
-    <script src="/dist/third-party.js"></script>
-    <script>
-      Vue.component('VJsf', VJsf.default)
-      new Vue({
-        el: '#app',
-        vuetify: new Vuetify(),
-        data() {
-          return {
-            form1: {
-              valid: null,
-              schema: {
-                type: 'object',
-                properties: {
-                  stringProp: { type: 'string', title: `I'm a string`, description: 'This description is used as a help message.' }
-                }
-              },
-              options: {},
-              model: {}
-            },
-            form2: {
-              valid: null,
-              schema: {
-                type: 'object',
-                properties: {
-                  arrayProp: {
-                    type: 'array',
-                    items: {
-                      type: 'object',
-                      properties: {
-                        stringProp: { type: 'string', title: `I'm a string` }
-                      }
-                    }
-                  }
-                }
-              },
-              options: {},
-              model: {
-                arrayProp: [
-                  {stringProp: 'value 1'},
-                  {stringProp: 'value 2'}
-                ]
-              }
-            }
-          }
-        }
-      })
-    </script>
-  </body>
-</html>