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

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

@@ -0,0 +1,233 @@
+<script>
+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: {
+    modelValue: {
+      /** @type import('vue').PropType<import('../types.js').VjsfTextareaNode> */
+      type: Object,
+      required: true
+    },
+    statefulLayout: {
+      /** @type import('vue').PropType<import('@json-layout/core').StatefulLayout> */
+      type: Object,
+      required: true
+    }
+  },
+  setup (props) {
+    /** @type {import('vue').Ref<null | HTMLElement>} */
+    const element = ref(null)
+
+    const fieldProps = computed(() => getInputProps(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 ?? '')
+      }
+    })
+
+    // 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-combobox.vue

@@ -0,0 +1,73 @@
+<script>
+import { defineComponent, h, computed, shallowRef, ref } from 'vue'
+import { VCombobox } from 'vuetify/components'
+import { getInputProps } from '../../utils/props.js'
+import { getCompSlots } from '../../utils/slots.js'
+
+export default defineComponent({
+  props: {
+    modelValue: {
+      /** @type import('vue').PropType<import('../types.js').VjsfComboboxNode> */
+      type: Object,
+      required: true
+    },
+    statefulLayout: {
+      /** @type import('vue').PropType<import('@json-layout/core').StatefulLayout> */
+      type: Object,
+      required: true
+    }
+  },
+  setup (props) {
+    /** @type import('vue').Ref<import('@json-layout/vocabulary').SelectItems> */
+    const items = shallowRef(props.modelValue.layout.items ?? [])
+    /** @type import('vue').Ref<boolean> */
+    const loading = ref(false)
+
+    /** @type import('@json-layout/core').StateTree | null */
+    let lastStateTree = null
+    /** @type Record<string, any> | null */
+    let lastContext = null
+
+    const hasItems = computed(() => {
+      return !!(props.modelValue.layout.items || props.modelValue.layout.getItems)
+    })
+
+    const refresh = async () => {
+      if (props.modelValue.layout.items) return
+      if (props.statefulLayout.stateTree === lastStateTree && props.statefulLayout.options.context === lastContext) return
+      lastStateTree = props.statefulLayout.stateTree
+      lastContext = props.statefulLayout.options.context ?? null
+      if (hasItems.value) {
+        loading.value = true
+        items.value = await props.statefulLayout.getItems(props.modelValue)
+        loading.value = false
+      }
+    }
+
+    if (!props.modelValue.layout.items) {
+      refresh()
+    }
+
+    const fieldProps = computed(() => {
+      const fieldProps = getInputProps(props.modelValue, props.statefulLayout, ['step', 'min', 'max'])
+      fieldProps.type = 'number'
+      fieldProps.loading = loading.value
+      if (hasItems.value) fieldProps.items = items.value
+      if (props.modelValue.options.readOnly) fieldProps.menuProps = { modelValue: false }
+      if (props.modelValue.layout.multiple) {
+        fieldProps.multiple = true
+        fieldProps.chips = true
+        fieldProps.closableChips = true
+      }
+      fieldProps['onUpdate:menu'] = () => refresh()
+      fieldProps['onUpdate:modelValue'] = (/** @type string[] */value) => props.statefulLayout.input(props.modelValue, value && value.map(Number))
+      return fieldProps
+    })
+    const fieldSlots = computed(() => getCompSlots(props.modelValue, props.statefulLayout))
+
+    // @ts-ignore
+    return () => h(VCombobox, fieldProps.value, fieldSlots.value)
+  }
+})
+
+</script>

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

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