@koumoul/vjsf 2.22.0 → 3.0.0-alpha.0

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

@@ -0,0 +1,45 @@
+<script setup>
+import TextFieldMenu from '../fragments/text-field-menu.vue'
+import { VDatePicker } from 'vuetify/labs/VDatePicker'
+import { useDate } from 'vuetify/labs/date'
+import { computed } from 'vue'
+import { getCompProps } from '../../utils/props.js'
+import { getDateTimeParts } from '../../utils/dates.js'
+
+const props = defineProps({
+  modelValue: {
+    /** @type import('vue').PropType<import('../types.js').VjsfDatePickerNode> */
+    type: Object,
+    required: true
+  },
+  statefulLayout: {
+    /** @type import('vue').PropType<import('@json-layout/core').StatefulLayout> */
+    type: Object,
+    required: true
+  }
+})
+
+const vDate = useDate()
+
+const datePickerProps = computed(() => {
+  const datePickerProps = getCompProps(props.modelValue, 'datePicker', true)
+  datePickerProps.hideActions = true
+  if (props.modelValue.data) datePickerProps.modelValue = new Date(props.modelValue.data)
+  return datePickerProps
+})
+</script>
+
+<template>
+  <text-field-menu
+    :model-value="modelValue"
+    :stateful-layout="statefulLayout"
+    :formatted-value="modelValue.data && vDate.format(modelValue.data, 'fullDateWithWeekday')"
+  >
+    <template #default="{close}">
+      <v-date-picker
+        v-bind="datePickerProps"
+        @update:model-value="value => {statefulLayout.input(modelValue, value && getDateTimeParts(/** @type Date */(/** @type unknown */(value)))[0]); close()}"
+      />
+    </template>
+  </text-field-menu>
+</template>

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

@@ -0,0 +1,20 @@
+<script setup>
+
+defineProps({
+  modelValue: {
+    /** @type import('vue').PropType<import('../types.js').VjsfDateTimePickerNode> */
+    type: Object,
+    required: true
+  },
+  statefulLayout: {
+    /** @type import('vue').PropType<import('@json-layout/core').StatefulLayout> */
+    type: Object,
+    required: true
+  }
+})
+
+</script>
+
+<template>
+  TODO date-time
+</template>

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

@@ -0,0 +1,52 @@
+<script setup>
+import { VExpansionPanels, VExpansionPanel, VExpansionPanelTitle, VContainer } 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: Object,
+    required: true
+  },
+  statefulLayout: {
+    /** @type import('vue').PropType<import('@json-layout/core').StatefulLayout> */
+    type: Object,
+    required: true
+  }
+})
+
+</script>
+
+<template>
+  <section-header :node="modelValue" />
+  <v-expansion-panels>
+    <v-expansion-panel
+      v-for="(child, i) of modelValue.children"
+      :key="child.key"
+      :value="i"
+    >
+      <v-expansion-panel-title>
+        <v-icon
+          v-if="child.validated && (child.error || child.childError)"
+          color="error"
+          class="mr-2"
+        >
+          mdi-alert
+        </v-icon>
+        {{ child.layout.title ?? child.layout.label }}
+      </v-expansion-panel-title>
+      <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-expansion-panel>
+  </v-expansion-panels>
+</template>

package/src/components/nodes/list.vue

@@ -0,0 +1,112 @@
+<script setup>
+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'
+
+defineProps({
+  modelValue: {
+    /** @type import('vue').PropType<import('../types.js').VjsfListNode> */
+    type: Object,
+    required: true
+  },
+  statefulLayout: {
+    /** @type import('vue').PropType<import('@json-layout/core').StatefulLayout> */
+    type: Object,
+    required: true
+  }
+})
+
+</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-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)])"
+              >
+                <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>
+          </v-menu>
+        </v-list-item-action>
+      </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>
+</template>

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

@@ -0,0 +1,35 @@
+<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)
+      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
+    })
+    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,59 @@
+<script setup>
+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
+  },
+  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 (props.modelValue.options.readOnly) fieldProps.menuProps = { modelValue: false }
+  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()
+}
+
+</script>
+
+<template>
+  <v-select
+    v-bind="fieldProps"
+    :loading="loading"
+    :items="items"
+    @update:model-value="value => statefulLayout.input(modelValue, value)"
+    @update:menu="refresh"
+  />
+</template>

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>