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

package/src/components/nodes/list.vue

@@ -1,112 +1,198 @@
 <script setup>
-import { VList, VListItem, VListItemAction, VBtn, VMenu, VIcon } from 'vuetify/components'
-import { isSection } from '@json-layout/core'
+import { watch, computed, ref } from 'vue'
+import { VList, VListItem, VListItemAction, VBtn, VMenu, VIcon, VSheet, VSpacer, VDivider, VRow, VListSubheader } from 'vuetify/components'
+import { isSection, clone } from '@json-layout/core'
 import Node from '../node.vue'
-import clone from '../../utils/clone.js'
+import { moveArrayItem } from '../../utils/index.js'
+import useDnd from '../../composables/use-dnd.js'
 
-defineProps({
+const props = defineProps({
   modelValue: {
-    /** @type import('vue').PropType<import('../types.js').VjsfListNode> */
+    /** @type import('vue').PropType<import('../../types.js').VjsfListNode> */
     type: Object,
     required: true
   },
   statefulLayout: {
-    /** @type import('vue').PropType<import('@json-layout/core').StatefulLayout> */
+    /** @type import('vue').PropType<import('../../types.js').VjsfStatefulLayout> */
     type: Object,
     required: true
   }
 })
 
+/* use composable for drag and drop */
+const { activeDnd, sortableArray, draggable, hovered, dragging, 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 menuOpened = ref(-1)
+const activeItem = computed(() => {
+  if (
+    props.modelValue.layout.listActions.includes('edit') &&
+    props.modelValue.layout.listEditMode === 'inline-single' &&
+    editedItem.value !== undefined
+  ) {
+    return editedItem.value
+  }
+  if (dragging.value !== -1) return -1
+  if (menuOpened.value !== -1) return menuOpened.value
+  return hovered.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"
         >
-          <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"
+                  @update:model-value="value => {menuOpened = value ? childIndex : -1}"
+                >
+                  <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/number-combobox.vue

@@ -0,0 +1,72 @@
+<script>
+import { defineComponent, h, computed, shallowRef, ref } from 'vue'
+import { VCombobox } from 'vuetify/components'
+import { getInputProps, getCompSlots } from '../../utils/index.js'
+
+export default defineComponent({
+  props: {
+    modelValue: {
+      /** @type import('vue').PropType<import('../../types.js').VjsfComboboxNode> */
+      type: Object,
+      required: true
+    },
+    statefulLayout: {
+      /** @type import('vue').PropType<import('../../types.js').VjsfStatefulLayout> */
+      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

@@ -1,27 +1,25 @@
 <script>
 import { defineComponent, h, computed } from 'vue'
 import { VTextField } from 'vuetify/components'
-import { getInputProps } from '../../utils/props.js'
-import { getCompSlots } from '../../utils/slots.js'
+import { getInputProps, getCompSlots } from '../../utils/index.js'
 
 export default defineComponent({
   props: {
     modelValue: {
-      /** @type import('vue').PropType<import('../types.js').VjsfNumberFieldNode> */
+      /** @type import('vue').PropType<import('../../types.js').VjsfNumberFieldNode> */
       type: Object,
       required: true
     },
     statefulLayout: {
-      /** @type import('vue').PropType<import('@json-layout/core').StatefulLayout> */
+      /** @type import('vue').PropType<import('../../types.js').VjsfStatefulLayout> */
       type: Object,
       required: true
     }
   },
   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
     })

package/src/components/nodes/one-of-select.vue

@@ -1,17 +1,17 @@
 <script setup>
-import { VSelect } from 'vuetify/components'
+import { VSelect, VRow } from 'vuetify/components'
 import { shallowRef, watch } from 'vue'
 import { isSection } from '@json-layout/core'
 import Node from '../node.vue'
 
 const props = defineProps({
   modelValue: {
-    /** @type import('vue').PropType<import('../types.js').VjsfOneOfSelectNode> */
+    /** @type import('vue').PropType<import('../../types.js').VjsfOneOfSelectNode> */
     type: Object,
     required: true
   },
   statefulLayout: {
-    /** @type import('vue').PropType<import('@json-layout/core').StatefulLayout> */
+    /** @type import('vue').PropType<import('../../types.js').VjsfStatefulLayout> */
     type: Object,
     required: true
   }
@@ -49,7 +49,7 @@ const onChange = (/** @type import('@json-layout/core').SkeletonTree */childTree
     <node
       v-for="grandChild of isSection(modelValue.children?.[0]) ? modelValue.children?.[0].children : modelValue.children"
       :key="grandChild.fullKey"
-      :model-value="/** @type import('../types.js').VjsfNode */(grandChild)"
+      :model-value="/** @type import('../../types.js').VjsfNode */(grandChild)"
       :stateful-layout="statefulLayout"
     />
   </v-row>

package/src/components/nodes/section.vue

@@ -1,15 +1,16 @@
 <script setup>
+import { VRow } from 'vuetify/components'
 import Node from '../node.vue'
 import SectionHeader from '../fragments/section-header.vue'
 
 defineProps({
   modelValue: {
-    /** @type import('vue').PropType<import('../types.js').VjsfSectionNode> */
+    /** @type import('vue').PropType<import('../../types.js').VjsfSectionNode> */
     type: Object,
     required: true
   },
   statefulLayout: {
-    /** @type import('vue').PropType<import('@json-layout/core').StatefulLayout> */
+    /** @type import('vue').PropType<import('../../types.js').VjsfStatefulLayout> */
     type: Object,
     required: true
   }
@@ -23,7 +24,7 @@ defineProps({
     <node
       v-for="child of modelValue.children"
       :key="child.fullKey"
-      :model-value="/** @type import('../types.js').VjsfNode */(child)"
+      :model-value="/** @type import('../../types.js').VjsfNode */(child)"
       :stateful-layout="statefulLayout"
     />
   </v-row>

package/src/components/nodes/select.vue

@@ -1,59 +1,78 @@
-<script setup>
+<script>
 import { VSelect } from 'vuetify/components'
-import { computed, ref } from 'vue'
-import { getInputProps } from '../../utils/props.js'
-
-const props = defineProps({
-  modelValue: {
-    /** @type import('vue').PropType<import('../types.js').VjsfSelectNode> */
-    type: Object,
-    required: true
+import { defineComponent, h, computed, ref, shallowRef } from 'vue'
+import { getInputProps, getCompSlots } from '../../utils/index.js'
+import SelectItem from '../fragments/select-item.vue'
+import SelectSelection from '../fragments/select-selection.vue'
+
+export default defineComponent({
+  props: {
+    modelValue: {
+    /** @type import('vue').PropType<import('../../types.js').VjsfSelectNode> */
+      type: Object,
+      required: true
+    },
+    statefulLayout: {
+    /** @type import('vue').PropType<import('../../types.js').VjsfStatefulLayout> */
+      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([])
+    /** @type import('vue').Ref<boolean> */
+    const loading = ref(false)
 
-const fieldProps = computed(() => {
-  const fieldProps = getInputProps(props.modelValue, props.statefulLayout)
-  if (props.modelValue.options.readOnly) fieldProps.menuProps = { modelValue: false }
-  return fieldProps
-})
+    const fieldProps = computed(() => {
+      const fieldProps = getInputProps(props.modelValue, props.statefulLayout, ['multiple'])
+      if (props.modelValue.options.readOnly) fieldProps.menuProps = { modelValue: false }
+      fieldProps.loading = loading.value
+      fieldProps.items = items.value
+      fieldProps['onUpdate:menu'] = refresh
+      return fieldProps
+    })
 
-/** @type import('vue').Ref<import('@json-layout/vocabulary').SelectItems> */
-const items = ref(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 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
-  loading.value = true
-  items.value = await props.statefulLayout.getSelectItems(props.modelValue)
-  loading.value = false
-}
-
-if (!props.modelValue.layout.items) {
-  refresh()
-}
+    /** @type import('@json-layout/core').StateTree | null */
+    let lastStateTree = null
+    /** @type Record<string, any> | null */
+    let lastContext = null
 
-</script>
+    const refresh = async () => {
+      if (props.statefulLayout.stateTree === lastStateTree && props.statefulLayout.options.context === lastContext) return
+      lastStateTree = props.statefulLayout.stateTree
+      lastContext = props.statefulLayout.options.context ?? null
+      loading.value = true
+      items.value = await props.statefulLayout.getItems(props.modelValue)
+      loading.value = false
+    }
+
+    if (!props.modelValue.layout.items) {
+      refresh()
+    }
 
-<template>
-  <v-select
-    v-bind="fieldProps"
-    :loading="loading"
-    :items="items"
-    @update:model-value="value => statefulLayout.input(modelValue, value)"
-    @update:menu="refresh"
-  />
-</template>
+    const fieldSlots = computed(() => {
+      const slots = getCompSlots(props.modelValue, props.statefulLayout)
+      if (!slots.item) {
+        slots.item = (/** @type {any} */ context) => h(SelectItem, {
+          multiple: props.modelValue.layout.multiple,
+          itemProps: context.props,
+          item: context.item.raw
+        })
+      }
+      if (!slots.selection) {
+        slots.selection = (/** @type {any} */ context) => h(SelectSelection, {
+          multiple: props.modelValue.layout.multiple,
+          last: props.modelValue.layout.multiple && context.index === props.modelValue.data.length - 1,
+          item: context.item.raw
+        })
+      }
+      return slots
+    })
+
+    // @ts-ignore
+    return () => h(VSelect, fieldProps.value, fieldSlots.value)
+  }
+})
+
+</script>

package/src/components/nodes/slider.vue

@@ -1,16 +1,16 @@
 <script setup>
 import { VSlider } from 'vuetify/components'
 import { computed } from 'vue'
-import { getInputProps } from '../../utils/props.js'
+import { getInputProps } from '../../utils/index.js'
 
 const props = defineProps({
   modelValue: {
-    /** @type import('vue').PropType<import('../types.js').VjsfSliderNode> */
+    /** @type import('vue').PropType<import('../../types.js').VjsfSliderNode> */
     type: Object,
     required: true
   },
   statefulLayout: {
-    /** @type import('vue').PropType<import('@json-layout/core').StatefulLayout> */
+    /** @type import('vue').PropType<import('../../types.js').VjsfStatefulLayout> */
     type: Object,
     required: true
   }