@koumoul/vjsf 3.0.0-alpha.1 → 3.0.0-alpha.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@koumoul/vjsf",
-  "version": "3.0.0-alpha.1",
+  "version": "3.0.0-alpha.2",
   "description": "Generate forms for the vuetify UI library (vuejs) based on annotated JSON schemas.",
   "scripts": {
     "test": "vitest",
@@ -28,6 +28,12 @@
         "types": "./types/components/*.d.ts"
       }
     },
+    "./composables/*": {
+      "import": {
+        "default": "./src/composables/*",
+        "types": "./types/composables/*.d.ts"
+      }
+    },
     "./compile": {
       "import": {
         "default": "./src/compile/index.js",
@@ -46,8 +52,7 @@
     "vuetify": "^3.4.2"
   },
   "dependencies": {
-    "@json-layout/core": "0.2.0",
-    "@json-layout/vocabulary": "0.2.0",
+    "@json-layout/core": "0.3.0",
     "@vueuse/core": "^10.5.0",
     "debug": "^4.3.4",
     "easymde": "^2.18.0",
@@ -57,13 +62,8 @@
   "devDependencies": {
     "@types/debug": "^4.1.8",
     "@types/ejs": "^3.1.2",
-    "relative-deps": "^1.0.7",
     "vitest": "^0.34.5",
     "vue": "^3.3.4",
     "vue-tsc": "^1.8.15"
-  },
-  "relativeDependencies": {
-    "@json-layout/core": "../../json-layout/core/",
-    "@json-layout/vocabulary": "../../json-layout/vocabulary/"
   }
 }

package/src/compile/index.js

@@ -37,7 +37,7 @@ function listComps (comps, layout) {
  * @param {string} baseImport
  * @returns {string}
  */
-export function compile (schema, baseImport = '@koumoul/vjsf/components') {
+export function compile (schema, baseImport = '@koumoul/vjsf') {
   const compiledLayout = compileLayout(schema, { code: true })
   const compiledLayoutCode = serializeCompiledLayout(compiledLayout)
   /** @type Set<string> */

package/src/compile/v-jsf-compiled.vue.ejs

@@ -5,10 +5,11 @@ import { StatefulLayout } from '@json-layout/core'
 import { ref, shallowRef, getCurrentInstance, useSlots } from 'vue'
 import { useElementSize } from '@vueuse/core'
 
-import { defaultOptions } from '<%- baseImport %>/options.js'
-import Tree from '<%- baseImport %>/tree.vue'
+import { defaultOptions } from '<%- baseImport %>/components/options.js'
+import Tree from '<%- baseImport %>/components/tree.vue'
+import { useVjsf, emits } from '<%- baseImport %>/composables/use-vjsf.js'
 <% comps.forEach(function(comp){ %>
-import <%= comp.replace(/-/g, '') %>Node from '<%- baseImport %>/nodes/<%= comp %>.vue'
+import <%= comp.replace(/-/g, '') %>Node from '<%- baseImport %>/components/nodes/<%= comp %>.vue'
 <% }); %>
 
 <%- compiledLayoutCode %>
@@ -21,55 +22,16 @@ if (!vueInstance?.appContext.app.component('vjsf-node-<%= comp %>')) {
 <% }); %>
 
 const props = defineProps(['modelValue', 'options'])
-const emit = defineEmits(['update:modelValue', 'update:state'])
-
-const statefulLayout = shallowRef(null)
-const stateTree = shallowRef(null)
-
-const el = ref(null)
-const { width } = useElementSize(el)
-
-const slots = useSlots()
-
-const fullOptions = computed(() => {
-  if (!width.value) return null
-  return {
-    ...defaultOptions,
-    ...props.options,
-    context: props.options.context ? JSON.parse(JSON.stringify(props.options.context)) : {},
-    width: Math.round(width.value),
-    vjsfSlots: { ...slots }
-  }
-})
-
-const initStatefulLayout = () => {
-  if (!fullOptions.value) return
-  const _statefulLayout = new StatefulLayout(compiledLayout, compiledLayout.skeletonTree, fullOptions.value, props.modelValue)
-  statefulLayout.value = _statefulLayout
-  stateTree.value = _statefulLayout.stateTree
-  _statefulLayout.events.on('update', () => {
-    stateTree.value = _statefulLayout.stateTree
-    emit('update:modelValue', _statefulLayout.data)
-    emit('update:state', _statefulLayout)
-  })
-  emit('update:state', _statefulLayout)
-}
-
-watch(fullOptions, (newOptions) => {
-  if (!newOptions) {
-    statefulLayout.value = null
-  } else if (statefulLayout.value) {
-    statefulLayout.value.options = newOptions
-  } else {
-    initStatefulLayout()
-  }
-})
-
-// case where data is updated from outside
-watch(() => props.modelValue, (newData) => {
-  if (statefulLayout.value && statefulLayout.value.data !== newData) statefulLayout.value.data = newData
-})
-
+const emit = defineEmits(Object.keys(emits))
+
+const { el, statefulLayout, stateTree } = useVjsf(
+  null,
+  computed(() => props.modelValue),
+  computed(() => props.options),
+  emit,
+  null,
+  compiledLayout
+)
 </script>
 
 <template>

package/src/components/nodes/combobox.vue

@@ -37,7 +37,6 @@ export default defineComponent({
       if (props.statefulLayout.stateTree === lastStateTree && props.statefulLayout.options.context === lastContext) return
       lastStateTree = props.statefulLayout.stateTree
       lastContext = props.statefulLayout.options.context ?? null
-      console.log('HAS ITEMS ?', hasItems.value)
       if (hasItems.value) {
         loading.value = true
         items.value = await props.statefulLayout.getItems(props.modelValue)
@@ -52,6 +51,7 @@ export default defineComponent({
     const fieldProps = computed(() => {
       const fieldProps = getInputProps(props.modelValue, props.statefulLayout)
       fieldProps.loading = loading.value
+      fieldProps.returnObject = false
       if (hasItems.value) fieldProps.items = items.value
       if (props.modelValue.options.readOnly) fieldProps.menuProps = { modelValue: false }
       if (props.modelValue.layout.multiple) {

package/src/components/nodes/list.vue

@@ -1,10 +1,13 @@
 <script setup>
+import { watch, computed, ref } from 'vue'
 import { VList, VListItem, VListItemAction, VBtn, VMenu, VIcon } from 'vuetify/components'
 import { isSection } from '@json-layout/core'
 import Node from '../node.vue'
 import clone from '../../utils/clone.js'
+import { moveArrayItem } from '../../utils/arrays.js'
+import useDnd from '../../composables/use-dnd.js'
 
-defineProps({
+const props = defineProps({
   modelValue: {
     /** @type import('vue').PropType<import('../types.js').VjsfListNode> */
     type: Object,
@@ -17,96 +20,177 @@ defineProps({
   }
 })
 
+/* use composable for drag and drop */
+const { activeDnd, sortableArray, draggable, itemBind, handleBind } = useDnd(props.modelValue.children, () => {
+  props.statefulLayout.input(props.modelValue, sortableArray.value.map((child) => child.data))
+})
+watch(() => props.modelValue.children, (array) => { sortableArray.value = array })
+
+/* manage hovered and edited items */
+const editedItem = computed(() => {
+  return props.statefulLayout.activeItems[props.modelValue.fullKey]
+})
+const hoveredItem = ref(1)
+const activeItem = computed(() => {
+  if (
+    props.modelValue.layout.listActions.includes('edit') &&
+    props.modelValue.layout.listEditMode === 'inline-single' &&
+    editedItem.value !== undefined
+  ) {
+    return editedItem.value
+  }
+  return hoveredItem.value
+})
+
+const buttonDensity = computed(() => {
+  if (props.modelValue.options.density === 'default') return 'comfortable'
+  return props.modelValue.options.density
+})
+
 </script>
 
 <template>
-  <v-list :density="modelValue.options.density">
-    <v-list-subheader v-if="modelValue.layout.title">
-      {{ modelValue.layout.title }}
-    </v-list-subheader>
-    <v-list-item
-      v-for="(child, childIndex) of modelValue.children"
-      :key="child.key"
-    >
-      <v-row>
-        <node
-          v-for="grandChild of isSection(child) ? child.children : [child]"
-          :key="grandChild.fullKey"
-          :model-value="/** @type import('../types.js').VjsfNode */(grandChild)"
-          :stateful-layout="statefulLayout"
-        />
-      </v-row>
-      <template #append>
-        <v-list-item-action
-          v-if="modelValue.layout.listActions.includes('edit') && modelValue.layout.listEditMode === 'inline-single'"
-          class="ml-1"
-        >
-          <v-btn
-            v-if="child.options.readOnly"
-            :title="modelValue.messages.edit"
-            icon="mdi-pencil"
-            variant="text"
-            color="primary"
-            :density="modelValue.options.density"
-            @click="statefulLayout.activateItem(modelValue, childIndex)"
-          />
-          <v-btn
-            v-else
-            :title="modelValue.messages.edit"
-            icon="mdi-pencil"
-            variant="flat"
-            color="primary"
-            :density="modelValue.options.density"
-            @click="statefulLayout.deactivateItem(modelValue)"
-          />
-        </v-list-item-action>
-        <v-list-item-action
-          v-if="modelValue.layout.listActions.includes('delete') || modelValue.layout.listActions.includes('duplicate')"
-          class="ml-1"
+  <v-sheet :elevation="1">
+    <v-list :density="modelValue.options.density">
+      <v-list-subheader v-if="modelValue.layout.title">
+        {{ modelValue.layout.title }}
+      </v-list-subheader>
+      <template
+        v-for="(child, childIndex) of sortableArray"
+        :key="props.modelValue.children.findIndex(c => c === child)"
+      >
+        <v-list-item
+          v-bind="itemBind(childIndex)"
+          :density="modelValue.options.density"
+          :draggable="draggable === childIndex"
+          :variant="editedItem === childIndex ? 'outlined' : 'flat'"
+          class="pa-1 vjsf-list-item"
+          @mouseenter="hoveredItem = childIndex"
+          @mouseleave="hoveredItem = -1"
         >
-          <v-menu location="bottom end">
-            <template #activator="{props: activatorProps}">
-              <v-btn
-                v-bind="activatorProps"
-                icon="mdi-dots-vertical"
-                variant="plain"
-                :density="modelValue.options.density"
-              />
-            </template>
-            <v-list :density="modelValue.options.density">
-              <v-list-item
-                v-if="modelValue.layout.listActions.includes('delete')"
-                base-color="warning"
-                @click="statefulLayout.input(modelValue, [...modelValue.data.slice(0, childIndex), ...modelValue.data.slice(childIndex + 1)])"
+          <v-row class="ma-0">
+            <node
+              v-for="grandChild of isSection(child) ? child.children : [child]"
+              :key="grandChild.fullKey"
+              :model-value="/** @type import('../types.js').VjsfNode */(grandChild)"
+              :stateful-layout="statefulLayout"
+            />
+          </v-row>
+          <template
+            v-if="activeItem === childIndex"
+            #append
+          >
+            <div>
+              <v-list-item-action
+                v-if="modelValue.layout.listActions.includes('edit') && modelValue.layout.listEditMode === 'inline-single'"
               >
-                <template #prepend>
-                  <v-icon icon="mdi-delete" />
-                </template>
-                {{ modelValue.messages.delete }}
-              </v-list-item>
-
-              <v-list-item
-                v-if="modelValue.layout.listActions.includes('duplicate')"
-                @click="statefulLayout.input(modelValue, [...modelValue.data.slice(0, childIndex), clone(child.data), ...modelValue.data.slice(childIndex)])"
+                <v-btn
+                  v-if="editedItem !== childIndex"
+                  :title="modelValue.messages.edit"
+                  icon="mdi-pencil"
+                  variant="text"
+                  color="primary"
+                  :density="buttonDensity"
+                  @click="statefulLayout.activateItem(modelValue, childIndex)"
+                />
+                <v-btn
+                  v-else
+                  :title="modelValue.messages.edit"
+                  icon="mdi-pencil"
+                  variant="flat"
+                  color="primary"
+                  :density="buttonDensity"
+                  @click="statefulLayout.deactivateItem(modelValue)"
+                />
+              </v-list-item-action>
+              <v-list-item-action
+                v-if="editedItem === undefined && modelValue.layout.listActions.includes('sort') && activeDnd"
+              >
+                <v-btn
+                  :title="modelValue.messages.sort"
+                  icon="mdi-arrow-up-down"
+                  variant="plain"
+                  :density="buttonDensity"
+                  v-bind="handleBind(childIndex)"
+                />
+              </v-list-item-action>
+              <v-list-item-action
+                v-if="editedItem === undefined && (modelValue.layout.listActions.includes('delete') || modelValue.layout.listActions.includes('duplicate') || modelValue.layout.listActions.includes('sort'))"
               >
-                <template #prepend>
-                  <v-icon icon="mdi-content-duplicate" />
-                </template>
-                {{ modelValue.messages.duplicate }}
-              </v-list-item>
-            </v-list>
-          </v-menu>
-        </v-list-item-action>
+                <v-menu location="bottom end">
+                  <template #activator="{props: activatorProps}">
+                    <v-btn
+                      v-bind="activatorProps"
+                      icon="mdi-dots-vertical"
+                      variant="plain"
+                      slim
+                      :density="buttonDensity"
+                    />
+                  </template>
+                  <v-list :density="modelValue.options.density">
+                    <v-list-item
+                      v-if="modelValue.layout.listActions.includes('delete')"
+                      base-color="warning"
+                      @click="statefulLayout.input(modelValue, [...modelValue.data.slice(0, childIndex), ...modelValue.data.slice(childIndex + 1)])"
+                    >
+                      <template #prepend>
+                        <v-icon icon="mdi-delete" />
+                      </template>
+                      {{ modelValue.messages.delete }}
+                    </v-list-item>
+                    <v-list-item
+                      v-if="modelValue.layout.listActions.includes('duplicate')"
+                      @click="statefulLayout.input(modelValue, [...modelValue.data.slice(0, childIndex), clone(child.data), ...modelValue.data.slice(childIndex)])"
+                    >
+                      <template #prepend>
+                        <v-icon icon="mdi-content-duplicate" />
+                      </template>
+                      {{ modelValue.messages.duplicate }}
+                    </v-list-item>
+                    <v-list-item
+                      v-if="modelValue.layout.listActions.includes('sort')"
+                      @click="statefulLayout.input(modelValue, moveArrayItem(modelValue.data, childIndex, childIndex - 1))"
+                    >
+                      <template #prepend>
+                        <v-icon icon="mdi-arrow-up" />
+                      </template>
+                      {{ modelValue.messages.up }}
+                    </v-list-item>
+                    <v-list-item
+                      v-if="modelValue.layout.listActions.includes('sort')"
+                      @click="statefulLayout.input(modelValue, moveArrayItem(modelValue.data, childIndex, childIndex + 1))"
+                    >
+                      <template #prepend>
+                        <v-icon icon="mdi-arrow-down" />
+                      </template>
+                      {{ modelValue.messages.down }}
+                    </v-list-item>
+                  </v-list>
+                </v-menu>
+              </v-list-item-action>
+            </div>
+          </template>
+        </v-list-item>
+        <v-divider v-if="childIndex < modelValue.children.length - 1" />
       </template>
-    </v-list-item>
-    <v-list-item v-if="!modelValue.options.readOnly && modelValue.layout.listActions.includes('add')">
-      <v-btn
-        color="primary"
-        :density="modelValue.options.density"
-        @click="statefulLayout.input(modelValue, (modelValue.data || []).concat([clone(modelValue.skeleton.childrenTrees?.[0]?.root.defaultData)]), (modelValue.data || []).length)"
-      >
-        {{ modelValue.messages.addItem }}
-      </v-btn>
-    </v-list-item>
-  </v-list>
+      <v-list-item v-if="!modelValue.options.readOnly && modelValue.layout.listActions.includes('add')">
+        <v-spacer />
+        <v-btn
+          color="primary"
+          :density="modelValue.options.density"
+          @click="statefulLayout.input(modelValue, (modelValue.data ?? []).concat([undefined]))"
+        >
+          {{ modelValue.messages.addItem }}
+        </v-btn>
+        <v-spacer />
+      </v-list-item>
+    </v-list>
+  </v-sheet>
 </template>
+
+<style>
+.vjsf-list-item .v-list-item__append {
+  height: 100%;
+  align-items: start;
+}
+</style>

package/src/components/nodes/markdown.vue

@@ -1,8 +1,10 @@
 <script>
-import { defineComponent, h, computed } from 'vue'
-import { VTextarea } from 'vuetify/components'
+import { defineComponent, h, computed, onMounted, ref, onUnmounted, watch } from 'vue'
+import { VInput, VLabel } from 'vuetify/components'
 import { getInputProps } from '../../utils/props.js'
 import { getCompSlots } from '../../utils/slots.js'
+// import 'easymde/dist/easymde.min.css'
+// import EasyMDE from 'easymde'
 
 export default defineComponent({
   props: {
@@ -18,12 +20,214 @@ export default defineComponent({
     }
   },
   setup (props) {
+    /** @type {import('vue').Ref<null | HTMLElement>} */
+    const element = ref(null)
+
     const fieldProps = computed(() => getInputProps(props.modelValue, props.statefulLayout))
-    const fieldSlots = computed(() => getCompSlots(props.modelValue, props.statefulLayout))
+    const fieldSlots = computed(() => {
+      const fieldSlots = getCompSlots(props.modelValue, props.statefulLayout)
+      fieldSlots.default = () => [
+        h('div', { style: 'width:100%' }, [
+          h(VLabel, { text: fieldProps.value.label }),
+          h('textarea', { ref: element })
+        ])
+      ]
+      return fieldSlots
+    })
+
+    /** @type {EasyMDE | null} */
+    let easymde = null
+
+    const initEasyMDE = async () => {
+      if (!element.value) throw new Error('component was not mounted for markdown editor')
+
+      // @ts-ignore
+      await import('easymde/dist/easymde.min.css')
+      const EasyMDE = (await import('easymde')).default
+
+      const messages = props.modelValue.messages
+
+      const config = {
+        element: element.value,
+        initialValue: props.modelValue.data ?? '',
+        renderingConfig: {},
+        status: false,
+        autoDownloadFontAwesome: false,
+        spellChecker: false,
+        minHeight: '300px',
+        insertTexts: {
+          link: [messages.mdeLink1, messages.mdeLink2],
+          image: [messages.mdeImg1, messages.mdeImg2],
+          table: [messages.mdeTable1, messages.mdeTable2],
+          horizontalRule: ['', '\n\n-----\n\n']
+        },
+        // cf https://github.com/Ionaru/easy-markdown-editor/blob/master/src/js/easymde.js#L1380
+        toolbar: [{
+          name: 'bold',
+          action: EasyMDE.toggleBold,
+          className: 'mdi mdi-format-bold',
+          title: messages.bold
+        }, {
+          name: 'italic',
+          action: EasyMDE.toggleItalic,
+          className: 'mdi mdi-format-italic',
+          title: messages.italic
+        }, {
+          name: 'heading',
+          action: EasyMDE.toggleHeadingSmaller,
+          className: 'mdi mdi-format-title',
+          title: messages.heading
+        }, /* {
+    name: 'heading-1',
+    action: EasyMDE.toggleHeading1,
+    className: 'mdi mdi-format-title',
+    title: 'Titre 1'
+  }, {
+    name: 'heading-2',
+    action: EasyMDE.toggleHeading2,
+    className: 'mdi mdi-format-title',
+    title: 'Titre 2'
+  }, {
+    name: 'heading-3',
+    action: EasyMDE.toggleHeading3,
+    className: 'mdi mdi-format-title',
+    title: 'Titre 3'
+  }, */
+        '|',
+        {
+          name: 'quote',
+          action: EasyMDE.toggleBlockquote,
+          className: 'mdi mdi-format-quote-open',
+          title: messages.quote
+        },
+        {
+          name: 'unordered-list',
+          action: EasyMDE.toggleUnorderedList,
+          className: 'mdi mdi-format-list-bulleted',
+          title: messages.unorderedList
+        },
+        {
+          name: 'ordered-list',
+          action: EasyMDE.toggleOrderedList,
+          className: 'mdi mdi-format-list-numbered',
+          title: messages.orderedList
+        },
+        '|',
+        {
+          name: 'link',
+          action: EasyMDE.drawLink,
+          className: 'mdi mdi-link',
+          title: messages.createLink
+        },
+        {
+          name: 'image',
+          action: EasyMDE.drawImage,
+          className: 'mdi mdi-image',
+          title: messages.insertImage
+        },
+        {
+          name: 'table',
+          action: EasyMDE.drawTable,
+          className: 'mdi mdi-table',
+          title: messages.createTable
+        },
+        '|',
+        {
+          name: 'preview',
+          action: EasyMDE.togglePreview,
+          className: 'mdi mdi-eye text-accent',
+          title: messages.preview,
+          noDisable: true
+        },
+        '|',
+        {
+          name: 'undo',
+          action: EasyMDE.undo,
+          className: 'mdi mdi-undo',
+          title: messages.undo,
+          noDisable: true
+        },
+        {
+          name: 'redo',
+          action: EasyMDE.redo,
+          className: 'mdi mdi-redo',
+          title: messages.redo,
+          noDisable: true
+        },
+        '|',
+        {
+          name: 'guide',
+          action: 'https://simplemde.com/markdown-guide',
+          className: 'mdi mdi-help-circle text-success',
+          title: messages.mdeGuide,
+          noDisable: true
+        }
+        ],
+        ...props.modelValue.options.easyMDEOptions
+      }
+
+      if (easymde) easymde.toTextArea()
+      // @ts-ignore
+      easymde = new EasyMDE(config)
+
+      let changed = false
+      easymde.codemirror.on('change', () => {
+        changed = true
+        if (easymde) props.statefulLayout.input(props.modelValue, easymde.value())
+      })
+      /** @type {ReturnType<typeof setTimeout> | null} */
+      let blurTimeout = null
+      easymde.codemirror.on('blur', () => {
+        // timeout to prevent triggering save when clicking on a menu button
+        blurTimeout = setTimeout(() => {
+          if (changed) props.statefulLayout.blur(props.modelValue)
+          changed = false
+        }, 500)
+      })
+      easymde.codemirror.on('focus', () => {
+        if (blurTimeout) clearTimeout(blurTimeout)
+      })
+    }
+
+    onMounted(initEasyMDE)
+
+    onUnmounted(() => {
+      if (easymde) easymde.toTextArea()
+    })
+
+    // update data from outside
+    watch(() => props.modelValue, () => {
+      if (easymde && (easymde.value() !== props.modelValue.data ?? '')) {
+        easymde.value(props.modelValue.data ?? '')
+      }
+    })
 
-    // @ts-ignore
-    return () => h(VTextarea, fieldProps.value, fieldSlots.value)
+    // update easymde config from outside
+    watch(() => [props.modelValue.messages, props.modelValue.options.easyMDEOptions], () => {
+      initEasyMDE()
+    })
+
+    return () => h(VInput, fieldProps.value, fieldSlots.value)
   }
 })
 
 </script>
+
+<style>
+.vjsf-node-markdown .v-input--density-compact .editor-toolbar {
+  padding: 0;
+}
+.vjsf-node-markdown .v-input--density-comfortable .editor-toolbar {
+  padding: 4px;
+}
+
+.vjsf-node-markdown .v-input--density-compact .CodeMirror-wrap {
+  padding-top: 2px;
+  padding-bottom: 2px;
+}
+.vjsf-node-markdown .v-input--density-comfortable .CodeMirror-wrap {
+  padding-top: 6px;
+  padding-bottom: 6px;
+}
+
+</style>

package/src/components/nodes/number-field.vue

@@ -19,7 +19,7 @@ export default defineComponent({
   },
   setup (props) {
     const fieldProps = computed(() => {
-      const fieldProps = getInputProps(props.modelValue, props.statefulLayout, ['step', 'min', 'max'])
+      const fieldProps = getInputProps(props.modelValue, props.statefulLayout, ['step', 'min', 'max', 'placeholder'])
       fieldProps.type = 'number'
       fieldProps['onUpdate:modelValue'] = (/** @type string */value) => props.statefulLayout.input(props.modelValue, value && Number(value))
       return fieldProps