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

package/src/components/node.vue

@@ -1,30 +1,50 @@
 <script setup>
-import nodeSlot from './fragments/node-slot.vue'
+import { computed } from 'vue'
+import { useTheme } from 'vuetify'
+import { VCol } from 'vuetify/components'
+import NodeSlot from './fragments/node-slot.vue'
+import HelpMessage from './fragments/help-message.vue'
 
-defineProps({
+const props = defineProps({
   modelValue: {
-    /** @type import('vue').PropType<import('./types.js').VjsfNode> */
+    /** @type import('vue').PropType<import('../types.js').VjsfNode> */
     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
   }
 })
 
-/** @type Record<import('./types.js').Density, string> */
+/** @type Record<import('../types.js').Density, string> */
 const beforeAfterClasses = {
   compact: 'my-1',
   comfortable: 'my-2',
   default: 'my-3'
 }
+
+const theme = useTheme()
+
+const nodeClasses = computed(() => {
+  let classes = `vjsf-node vjsf-node-${props.modelValue.layout.comp} vjsf-density-${props.modelValue.options.density}`
+  if (props.modelValue.options.readOnly) classes += ' vjsf-readonly'
+  if (props.modelValue.options.summary) classes += ' vjsf-summary'
+  if (theme.current.value.dark) classes += ' vjsf-dark'
+  return classes
+})
+
+if (!props.statefulLayout.options.nodeComponents[props.modelValue.layout.comp]) {
+  console.error(`vjsf: missing component to render vjsf node "${props.modelValue.layout.comp}", maybe you forgot to register a component from a plugin ?`)
+}
+
 </script>
 
 <template>
   <v-col
     :cols="modelValue.cols"
+    :class="nodeClasses"
   >
     <node-slot
       v-if="modelValue.layout.slots?.before"
@@ -32,9 +52,14 @@ const beforeAfterClasses = {
       :layout-slot="modelValue.layout.slots?.before"
       :node="modelValue"
       :stateful-layout="statefulLayout"
-      :class="beforeAfterClasses[/** @type import('./types.js').VjsfOptions */(modelValue.options).density]"
+      :class="beforeAfterClasses[modelValue.options.density]"
     />
 
+    <help-message
+      v-if="modelValue.layout.help"
+      :node="modelValue"
+      :class="beforeAfterClasses[modelValue.options.density]"
+    />
     <node-slot
       v-if="modelValue.layout.slots?.component"
       key="component"
@@ -43,18 +68,19 @@ const beforeAfterClasses = {
       :stateful-layout="statefulLayout"
     />
     <component
-      :is="`vjsf-node-${modelValue.layout.comp}`"
-      v-else-if="modelValue.layout.comp !== 'none'"
+      :is="props.statefulLayout.options.nodeComponents[modelValue.layout.comp]"
+      v-else-if="modelValue.layout.comp !== 'none' "
       :model-value="modelValue"
       :stateful-layout="statefulLayout"
     />
+
     <node-slot
       v-if="modelValue.layout.slots?.after"
       key="after"
       :layout-slot="modelValue.layout.slots?.after"
       :node="modelValue"
       :stateful-layout="statefulLayout"
-      :class="beforeAfterClasses[/** @type import('./types.js').VjsfOptions */(modelValue.options).density]"
+      :class="beforeAfterClasses[modelValue.options.density]"
     />
   </v-col>
 </template>

package/src/components/nodes/autocomplete.vue

@@ -0,0 +1,88 @@
+<script>
+import { VAutocomplete } from 'vuetify/components'
+import { defineComponent, computed, ref, shallowRef, h } 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
+    }
+  },
+  setup (props) {
+    /** @type import('vue').ShallowRef<import('@json-layout/vocabulary').SelectItems> */
+    const items = shallowRef([])
+    /** @type import('vue').Ref<boolean> */
+    const loading = ref(false)
+    /** @type import('vue').Ref<string> */
+    const search = ref('')
+
+    const fieldProps = computed(() => {
+      const fieldProps = getInputProps(props.modelValue, props.statefulLayout, ['multiple'])
+      if (props.modelValue.options.readOnly) fieldProps.menuProps = { modelValue: false }
+      fieldProps.noFilter = true
+      fieldProps['onUpdate:search'] = (/** @type string */searchValue) => {
+        search.value = searchValue
+        refresh()
+      }
+      fieldProps['onUpdate:menu'] = refresh
+      fieldProps.items = items.value
+      fieldProps.loading = loading.value
+      return fieldProps
+    })
+
+    /** @type import('@json-layout/core').StateTree | null */
+    let lastStateTree = null
+    /** @type Record<string, any> | null */
+    let lastContext = null
+    /** @type string */
+    let lastSearch = ''
+
+    const refresh = async () => {
+      if (props.statefulLayout.stateTree === lastStateTree && props.statefulLayout.options.context === lastContext && search.value === lastSearch) return
+      loading.value = true
+      items.value = await props.statefulLayout.getItems(props.modelValue, search.value)
+      lastStateTree = props.statefulLayout.stateTree
+      lastContext = props.statefulLayout.options.context ?? null
+      lastSearch = search.value
+      loading.value = false
+    }
+
+    if (!props.modelValue.layout.items) {
+      refresh()
+    }
+
+    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(VAutocomplete, fieldProps.value, fieldSlots.value)
+  }
+})
+
+</script>

package/src/components/nodes/checkbox.vue

@@ -1,16 +1,16 @@
 <script setup>
 import { VCheckbox } 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').VjsfCheckboxNode> */
+    /** @type import('vue').PropType<import('../../types.js').VjsfCheckboxNode> */
     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
   }

package/src/components/nodes/color-picker.vue

@@ -2,16 +2,16 @@
 import TextFieldMenu from '../fragments/text-field-menu.vue'
 import { VColorPicker } from 'vuetify/components'
 import { computed } from 'vue'
-import { getCompProps } from '../../utils/props.js'
+import { getCompProps } from '../../utils/index.js'
 
 const props = defineProps({
   modelValue: {
-    /** @type import('vue').PropType<import('../types.js').VjsfColorPickerNode> */
+    /** @type import('vue').PropType<import('../../types.js').VjsfColorPickerNode> */
     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
   }

package/src/components/nodes/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)
+      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) {
+        fieldProps.multiple = true
+        fieldProps.chips = true
+        fieldProps.closableChips = true
+      }
+      fieldProps['onUpdate:menu'] = () => refresh()
+      return fieldProps
+    })
+
+    const fieldSlots = computed(() => getCompSlots(props.modelValue, props.statefulLayout))
+
+    // @ts-ignore
+    return () => h(VCombobox, fieldProps.value, fieldSlots.value)
+  }
+})
+
+</script>

package/src/components/nodes/date-picker.vue

@@ -1,19 +1,18 @@
 <script setup>
 import TextFieldMenu from '../fragments/text-field-menu.vue'
-import { VDatePicker } from 'vuetify/labs/VDatePicker'
-import { useDate } from 'vuetify/labs/date'
+import { VDatePicker } from 'vuetify/components/VDatePicker'
+import { useDate } from 'vuetify'
 import { computed } from 'vue'
-import { getCompProps } from '../../utils/props.js'
-import { getDateTimeParts } from '../../utils/dates.js'
+import { getCompProps, getDateTimeParts } from '../../utils/index.js'
 
 const props = defineProps({
   modelValue: {
-    /** @type import('vue').PropType<import('../types.js').VjsfDatePickerNode> */
+    /** @type import('vue').PropType<import('../../types.js').VjsfDatePickerNode> */
     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
   }

package/src/components/nodes/date-time-picker.vue

@@ -2,12 +2,12 @@
 
 defineProps({
   modelValue: {
-    /** @type import('vue').PropType<import('../types.js').VjsfDateTimePickerNode> */
+    /** @type import('vue').PropType<import('../../types.js').VjsfDateTimePickerNode> */
     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
   }

package/src/components/nodes/expansion-panels.vue

@@ -1,17 +1,17 @@
 <script setup>
-import { VExpansionPanels, VExpansionPanel, VExpansionPanelTitle, VContainer } from 'vuetify/components'
+import { VExpansionPanels, VExpansionPanel, VExpansionPanelTitle, VContainer, VRow, VIcon } from 'vuetify/components'
 import { isSection } from '@json-layout/core'
 import Node from '../node.vue'
 import SectionHeader from '../fragments/section-header.vue'
 
 defineProps({
   modelValue: {
-    /** @type import('vue').PropType<import('../types.js').VjsfExpansionPanelsNode> */
+    /** @type import('vue').PropType<import('../../types.js').VjsfExpansionPanelsNode> */
     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
   }
@@ -42,7 +42,7 @@ defineProps({
           <node
             v-for="grandChild of isSection(child) ? child.children : [child]"
             :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/file-input.vue

@@ -0,0 +1,43 @@
+<script>
+import { defineComponent, h, computed } from 'vue'
+import { VFileInput } from 'vuetify/components'
+import { getInputProps, getCompSlots } from '../../utils/index.js'
+
+export default defineComponent({
+  props: {
+    modelValue: {
+      /** @type import('vue').PropType<import('../../types.js').VjsfFileInputNode> */
+      type: Object,
+      required: true
+    },
+    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, ['placeholder', 'accept'])
+      if (props.modelValue.layout.multiple) {
+        fieldProps.multiple = true
+      } else {
+        fieldProps.modelValue = props.modelValue.data ? [props.modelValue.data] : props.modelValue.data
+        fieldProps['onUpdate:modelValue'] = (/** @type string */value) => props.statefulLayout.input(props.modelValue, Array.isArray(value) ? value[0] : value)
+      }
+      return fieldProps
+    })
+    const fieldSlots = computed(() => getCompSlots(props.modelValue, props.statefulLayout))
+
+    // @ts-ignore
+    return () => h(VFileInput, fieldProps.value, fieldSlots.value)
+  }
+})
+
+</script>
+
+<style>
+.vjsf-node-text-field.vjsf-readonly.vjsf-summary input {
+  text-overflow: ellipsis;
+}
+</style>