@koumoul/vjsf 2.23.2 → 3.0.0-alpha.1

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

@@ -0,0 +1,34 @@
+<script>
+import { defineComponent, h, computed } from 'vue'
+import { VTextField } 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').VjsfNumberFieldNode> */
+      type: Object,
+      required: true
+    },
+    statefulLayout: {
+      /** @type import('vue').PropType<import('@json-layout/core').StatefulLayout> */
+      type: Object,
+      required: true
+    }
+  },
+  setup (props) {
+    const fieldProps = computed(() => {
+      const fieldProps = getInputProps(props.modelValue, props.statefulLayout, ['step', 'min', 'max'])
+      fieldProps.type = 'number'
+      fieldProps['onUpdate:modelValue'] = (/** @type string */value) => props.statefulLayout.input(props.modelValue, value && Number(value))
+      return fieldProps
+    })
+    const fieldSlots = computed(() => getCompSlots(props.modelValue, props.statefulLayout))
+
+    // @ts-ignore
+    return () => h(VTextField, fieldProps.value, fieldSlots.value)
+  }
+})
+
+</script>

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

@@ -0,0 +1,56 @@
+<script setup>
+import { VSelect } 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: Object,
+    required: true
+  },
+  statefulLayout: {
+    /** @type import('vue').PropType<import('@json-layout/core').StatefulLayout> */
+    type: Object,
+    required: true
+  }
+})
+
+/** @type import('vue').ShallowRef<import('@json-layout/core').SkeletonTree | undefined> */
+const activeChildTree = shallowRef(undefined)
+watch(() => props.modelValue, () => {
+  // we set the active oneOf child as the one whose schema validates on the current data
+  if (props.modelValue.fullKey in props.statefulLayout.activeItems) {
+    activeChildTree.value = props.modelValue.skeleton.childrenTrees?.[props.statefulLayout.activeItems[props.modelValue.fullKey]]
+  } else {
+    activeChildTree.value = undefined
+  }
+}, { immediate: true })
+
+const onChange = (/** @type import('@json-layout/core').SkeletonTree */childTree) => {
+  if (!props.modelValue.skeleton.childrenTrees) return
+  props.statefulLayout.activateItem(props.modelValue, props.modelValue.skeleton.childrenTrees.indexOf(childTree))
+}
+
+</script>
+
+<template>
+  <v-select
+    v-if="modelValue.skeleton.childrenTrees"
+    v-model="activeChildTree"
+    :items="modelValue.skeleton.childrenTrees"
+    item-title="title"
+    return-object
+    :error-messages="modelValue.validated ? modelValue.error : null"
+    @update:model-value="onChange"
+  />
+  <v-row v-if="modelValue.children?.[0]">
+    <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)"
+      :stateful-layout="statefulLayout"
+    />
+  </v-row>
+</template>

package/src/components/nodes/section.vue

@@ -0,0 +1,30 @@
+<script setup>
+import Node from '../node.vue'
+import SectionHeader from '../fragments/section-header.vue'
+
+defineProps({
+  modelValue: {
+    /** @type import('vue').PropType<import('../types.js').VjsfSectionNode> */
+    type: Object,
+    required: true
+  },
+  statefulLayout: {
+    /** @type import('vue').PropType<import('@json-layout/core').StatefulLayout> */
+    type: Object,
+    required: true
+  }
+})
+
+</script>
+
+<template>
+  <section-header :node="modelValue" />
+  <v-row :dense="modelValue.options?.density === 'compact' || modelValue.options?.density === 'comfortable'">
+    <node
+      v-for="child of modelValue.children"
+      :key="child.fullKey"
+      :model-value="/** @type import('../types.js').VjsfNode */(child)"
+      :stateful-layout="statefulLayout"
+    />
+  </v-row>
+</template>

package/src/components/nodes/select.vue

@@ -0,0 +1,79 @@
+<script>
+import { VSelect } from 'vuetify/components'
+import { defineComponent, h, computed, ref, shallowRef } from 'vue'
+import { getInputProps } from '../../utils/props.js'
+import { getCompSlots } from '../../utils/slots.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('@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, ['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('@json-layout/core').StateTree | null */
+    let lastStateTree = null
+    /** @type Record<string, any> | null */
+    let lastContext = null
+
+    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()
+    }
+
+    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

@@ -0,0 +1,34 @@
+<script setup>
+import { VSlider } from 'vuetify/components'
+import { computed } from 'vue'
+import { getInputProps } from '../../utils/props.js'
+
+const props = defineProps({
+  modelValue: {
+    /** @type import('vue').PropType<import('../types.js').VjsfSliderNode> */
+    type: Object,
+    required: true
+  },
+  statefulLayout: {
+    /** @type import('vue').PropType<import('@json-layout/core').StatefulLayout> */
+    type: Object,
+    required: true
+  }
+})
+
+const fieldProps = computed(() => {
+  const fieldProps = getInputProps(props.modelValue, props.statefulLayout)
+  if ('step' in props.modelValue.layout) fieldProps.step = props.modelValue.layout.step
+  fieldProps.min = props.modelValue.layout.min
+  fieldProps.max = props.modelValue.layout.max
+  return fieldProps
+})
+</script>
+
+<template>
+  <v-slider
+    type="number"
+    v-bind="fieldProps"
+    @update:model-value="value => statefulLayout.input(modelValue, value && Number(value))"
+  />
+</template>

package/src/components/nodes/switch.vue

@@ -0,0 +1,29 @@
+<script setup>
+import { VSwitch } from 'vuetify/components'
+import { computed } from 'vue'
+import { getInputProps } from '../../utils/props.js'
+
+const props = defineProps({
+  modelValue: {
+    /** @type import('vue').PropType<import('../types.js').VjsfSwitchNode> */
+    type: Object,
+    required: true
+  },
+  statefulLayout: {
+    /** @type import('vue').PropType<import('@json-layout/core').StatefulLayout> */
+    type: Object,
+    required: true
+  }
+})
+
+const fieldProps = computed(() =>
+  getInputProps(props.modelValue, props.statefulLayout)
+)
+</script>
+
+<template>
+  <v-switch
+    v-bind="fieldProps"
+    @update:model-value="value => statefulLayout.input(modelValue, value)"
+  />
+</template>

package/src/components/nodes/tabs.vue

@@ -0,0 +1,63 @@
+<script setup>
+import { VTabs, VTab, VContainer } from 'vuetify/components'
+import { ref } from 'vue'
+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').VjsfTabsNode> */
+    type: Object,
+    required: true
+  },
+  statefulLayout: {
+    /** @type import('vue').PropType<import('@json-layout/core').StatefulLayout> */
+    type: Object,
+    required: true
+  }
+})
+
+const tab = ref(0)
+</script>
+
+<template>
+  <section-header :node="modelValue" />
+  <v-sheet border>
+    <v-tabs v-model="tab">
+      <v-tab
+        v-for="(child, i) of modelValue.children"
+        :key="child.key"
+        :value="i"
+        :density="modelValue.options.density"
+        :color="child.validated && (child.error || child.childError) ? 'error' : undefined"
+      >
+        <v-icon
+          v-if="child.validated && (child.error || child.childError)"
+          color="error"
+        >
+          mdi-alert
+        </v-icon>
+        {{ child.layout.title ?? child.layout.label }}
+      </v-tab>
+    </v-tabs>
+    <v-window v-model="tab">
+      <v-window-item
+        v-for="(child, i) of modelValue.children"
+        :key="child.key"
+        :value="i"
+      >
+        <v-container fluid>
+          <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>
+        </v-container>
+      </v-window-item>
+    </v-window>
+  </v-sheet>
+</template>

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

@@ -0,0 +1,29 @@
+<script>
+import { defineComponent, h, computed } from 'vue'
+import { VTextField } 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').VjsfTextFieldNode> */
+      type: Object,
+      required: true
+    },
+    statefulLayout: {
+      /** @type import('vue').PropType<import('@json-layout/core').StatefulLayout> */
+      type: Object,
+      required: true
+    }
+  },
+  setup (props) {
+    const fieldProps = computed(() => getInputProps(props.modelValue, props.statefulLayout))
+    const fieldSlots = computed(() => getCompSlots(props.modelValue, props.statefulLayout))
+
+    // @ts-ignore
+    return () => h(VTextField, fieldProps.value, fieldSlots.value)
+  }
+})
+
+</script>

package/src/components/nodes/textarea.vue

@@ -0,0 +1,29 @@
+<script>
+import { defineComponent, h, computed } from 'vue'
+import { VTextarea } 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').VjsfTextareaNode> */
+      type: Object,
+      required: true
+    },
+    statefulLayout: {
+      /** @type import('vue').PropType<import('@json-layout/core').StatefulLayout> */
+      type: Object,
+      required: true
+    }
+  },
+  setup (props) {
+    const fieldProps = computed(() => getInputProps(props.modelValue, props.statefulLayout))
+    const fieldSlots = computed(() => getCompSlots(props.modelValue, props.statefulLayout))
+
+    // @ts-ignore
+    return () => h(VTextarea, fieldProps.value, fieldSlots.value)
+  }
+})
+
+</script>

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

@@ -0,0 +1,7 @@
+<script setup>
+
+</script>
+
+<template>
+  TODO time
+</template>

package/src/components/nodes/vertical-tabs.vue

@@ -0,0 +1,70 @@
+<script setup>
+import { isSection } from '@json-layout/core'
+import { VTabs, VTab, VContainer } from 'vuetify/components'
+import { ref } from 'vue'
+import Node from '../node.vue'
+import SectionHeader from '../fragments/section-header.vue'
+
+defineProps({
+  modelValue: {
+    /** @type import('vue').PropType<import('../types.js').VjsfVerticalTabsNode> */
+    type: Object,
+    required: true
+  },
+  statefulLayout: {
+    /** @type import('vue').PropType<import('@json-layout/core').StatefulLayout> */
+    type: Object,
+    required: true
+  }
+})
+
+const tab = ref(0)
+</script>
+
+<template>
+  <section-header :node="modelValue" />
+  <v-sheet border>
+    <div class="d-flex flex-row">
+      <v-tabs
+        v-model="tab"
+        direction="vertical"
+      >
+        <v-tab
+          v-for="(child, i) of modelValue.children"
+          :key="child.key"
+          :value="i"
+          :color="child.validated && (child.error || child.childError) ? 'error' : undefined"
+        >
+          <v-icon
+            v-if="child.validated && (child.error || child.childError)"
+            color="error"
+          >
+            mdi-alert
+          </v-icon>
+          {{ child.layout.title ?? child.layout.label }}
+        </v-tab>
+      </v-tabs>
+      <v-window
+        v-model="tab"
+        class="flex-fill"
+      >
+        <v-window-item
+          v-for="(child, i) of modelValue.children"
+          :key="child.key"
+          :value="i"
+        >
+          <v-container fluid>
+            <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>
+          </v-container>
+        </v-window-item>
+      </v-window>
+    </div>
+  </v-sheet>
+</template>

package/src/components/options.js

@@ -0,0 +1,25 @@
+/** @type import("./types.js").PartialVjsfOptions */
+export const defaultOptions = {
+  // matches the density prop found in many vuetify components
+  density: 'default',
+  titleDepth: 2,
+  fieldProps: {},
+  fieldPropsCompact: {
+    density: 'compact',
+    hideDetails: 'auto'
+  },
+  fieldPropsComfortable: {
+    density: 'comfortable'
+  },
+  fieldPropsReadOnly: { hideDetails: 'auto', variant: 'plain' },
+  textfieldProps: {},
+  textfieldPropsReadOnly: {},
+  textareaProps: {},
+  textareaPropsReadOnly: {},
+  // it is not very common to show an error below checkboxes and switches and without hide-details=auto they take a lot of space
+  checkboxProps: { hideDetails: 'auto' },
+  checkboxPropsReadOnly: {},
+  switchProps: { hideDetails: 'auto' },
+  switchPropsReadOnly: {},
+  errorAlertProps: { type: 'error', variant: 'tonal' }
+}

package/src/components/tree.vue

@@ -0,0 +1,26 @@
+<script setup>
+import { VRow } from 'vuetify/components'
+import Node from './node.vue'
+
+defineProps({
+  modelValue: {
+    /** @type import('vue').PropType<import('@json-layout/core').StateTree> */
+    type: Object,
+    required: true
+  },
+  statefulLayout: {
+    /** @type import('vue').PropType<import('@json-layout/core').StatefulLayout> */
+    type: Object,
+    required: true
+  }
+})
+</script>
+
+<template>
+  <v-row class="vjsf-tree">
+    <node
+      :stateful-layout="statefulLayout"
+      :model-value="/** @type import('./types.js').VjsfNode */(modelValue.root)"
+    />
+  </v-row>
+</template>

package/src/components/types.ts

@@ -0,0 +1,63 @@
+import {
+  StatefulLayoutOptions,
+  StateNode,
+  CheckboxNode,
+  ColorPickerNode,
+  DatePickerNode,
+  DateTimePickerNode,
+  TabsNode,
+  ExpansionPanelsNode,
+  ListNode,
+  NumberFieldNode,
+  OneOfSelectNode,
+  SectionNode,
+  SelectNode,
+  SliderNode,
+  SwitchNode,
+  TextFieldNode,
+  TextareaNode,
+  VerticalTabsNode,
+  ComboboxNode,
+  CompileOptions
+} from '@json-layout/core'
+
+export type Density = 'default' | 'comfortable' | 'compact'
+
+export type VjsfOptions = StatefulLayoutOptions & CompileOptions & {
+  density: Density,
+  fieldProps: Record<string, unknown>,
+  fieldPropsCompact: Record<string, unknown>,
+  fieldPropsComfortable: Record<string, unknown>,
+  fieldPropsReadOnly: Record<string, unknown>,
+  textfieldProps: Record<string, unknown>,
+  textfieldPropsReadOnly: Record<string, unknown>,
+  textareaProps: Record<string, unknown>,
+  textareaPropsReadOnly: Record<string, unknown>,
+  checkboxProps: Record<string, unknown>,
+  checkboxPropsReadOnly: Record<string, unknown>,
+  switchProps: Record<string, unknown>,
+  switchPropsReadOnly: Record<string, unknown>,
+  errorAlertProps: Record<string, unknown>,
+  vjsfSlots: Record<string, () => unknown>,
+}
+
+export type PartialVjsfOptions = Partial<Omit<VjsfOptions, 'width'>>
+
+export type VjsfNode = Omit<StateNode, 'options'> & {options: VjsfOptions}
+export type VjsfTabsNode = Omit<TabsNode, 'options'> & {options: VjsfOptions}
+export type VjsfCheckboxNode = Omit<CheckboxNode, 'options'> & {options: VjsfOptions}
+export type VjsfColorPickerNode = Omit<ColorPickerNode, 'options'> & {options: VjsfOptions}
+export type VjsfDatePickerNode = Omit<DatePickerNode, 'options'> & {options: VjsfOptions}
+export type VjsfDateTimePickerNode = Omit<DateTimePickerNode, 'options'> & {options: VjsfOptions}
+export type VjsfExpansionPanelsNode = Omit<ExpansionPanelsNode, 'options'> & {options: VjsfOptions}
+export type VjsfListNode = Omit<ListNode, 'options'> & {options: VjsfOptions}
+export type VjsfNumberFieldNode = Omit<NumberFieldNode, 'options'> & {options: VjsfOptions}
+export type VjsfOneOfSelectNode = Omit<OneOfSelectNode, 'options'> & {options: VjsfOptions}
+export type VjsfSectionNode = Omit<SectionNode, 'options'> & {options: VjsfOptions}
+export type VjsfSelectNode = Omit<SelectNode, 'options'> & {options: VjsfOptions}
+export type VjsfSliderNode = Omit<SliderNode, 'options'> & {options: VjsfOptions}
+export type VjsfSwitchNode = Omit<SwitchNode, 'options'> & {options: VjsfOptions}
+export type VjsfTextFieldNode = Omit<TextFieldNode, 'options'> & {options: VjsfOptions}
+export type VjsfTextareaNode = Omit<TextareaNode, 'options'> & {options: VjsfOptions}
+export type VjsfVerticalTabsNode = Omit<VerticalTabsNode, 'options'> & {options: VjsfOptions}
+export type VjsfComboboxNode = Omit<ComboboxNode, 'options'> & {options: VjsfOptions}