@live-change/frontend-auto-form 0.2.6 → 0.2.8

package/ArrayInput.vue

@@ -0,0 +1,108 @@
+<template>
+  <div>
+    <div class="mb-3" v-for="(value, index) in modelValue">
+      <div class="p-buttonset">
+        <Button class="" icon="pi pi-plus" @click="insertItem(index)"
+                label="Insert" />
+        <Button class="p-button-secondary" icon="pi pi-sync" @click="swapItem(index)"
+                label="Swap" />
+        <Button class="p-button-danger" icon="pi pi-trash" @click="removeItem(index)"
+                :label="`Remove  #${ index+1 }`" />
+      </div>
+      <auto-input :modelValue="value" :definition="definition.of"
+                   @update:modelValue="value => updateItem(index, value)"
+                  :rootValue="props.rootValue" :propName="props.propName + '.' + index" />
+    </div>
+    <div>
+      <Button label="Add item" icon="pi pi-plus" @click="insertItem" />
+    </div>
+  </div>
+</template>
+
+<script setup>
+  import Button from "primevue/button";
+  import AutoInput from "./AutoInput.vue"
+
+  import { inputs, types } from './config.js'
+  import { computed, getCurrentInstance } from 'vue'
+  import { toRefs } from '@vueuse/core'
+
+  const props = defineProps({
+    modelValue: {
+    },
+    definition: {
+      type: Object
+    },
+    properties: {
+      type: Object,
+      default: () => ({})
+    },
+    rootValue: {
+      type: Object,
+      default: () => ({})
+    },
+    propName: {
+      type: String,
+      default: ''
+    },
+  })
+
+  const emit = defineEmits(['update:modelValue'])
+
+  const { value, definition, modelValue } = toRefs(props)
+
+  import { defaultData } from "@live-change/vue3-components"
+
+  import { useToast } from 'primevue/usetoast'
+  const toast = useToast()
+  import { useConfirm } from 'primevue/useconfirm'
+  const confirm = useConfirm()
+
+  function insertItem(index) {
+    const data = modelValue.value || []
+    const item = defaultData(definition.value.of)
+    data.splice(index ?? data.length, 0, item) /// TODO: default value
+    emit('update:modelValue', data)
+    toast.add({ severity: 'info', summary: 'Item added', life: 1500 })
+  }
+  function updateItem(index, value) {
+    const data = modelValue.value || []
+    data[index] = value
+    emit('update:modelValue', data)
+  }
+  function removeItem(index) {
+    confirm.require({
+      target: event.currentTarget,
+      message: `Are you sure you want to remove this item?`,
+      icon: 'pi pi-info-circle',
+      acceptClass: 'p-button-danger',
+      accept: async () => {
+        const data = modelValue.value || []
+        data.splice(index, 1)
+        emit('update:modelValue', data)
+        toast.add({ severity: 'info', summary: 'Item removed', life: 1500 })
+      },
+      reject: () => {
+        toast.add({ severity:'error', summary: 'Rejected', detail: 'You have rejected', life: 3000 })
+      }
+    })
+  }
+  function swapItem(index) {
+    const data = modelValue.value || []
+    if(index === 0) {
+      const popped = data.pop()
+      data.push(data.shift())
+      data.unshift(popped)
+    } else {
+      const tmp = data[index]
+      data[index] = data[index-1]
+      data[index-1] = tmp
+    }
+    emit('update:modelValue', data)
+  }
+
+</script>
+
+<style scoped>
+
+</style>

package/AutoEditor.vue

@@ -0,0 +1,53 @@
+<template>
+  <div v-if="definition" class="grid formgrid p-fluid mt-2 mb-2">
+    <auto-field v-for="property in propertiesList" :key="property"
+                :modelValue="modelValue?.[property]"
+                @update:modelValue="value => updateModelProperty(property, value)"
+                :definition="definition.properties[property]"
+                :label="property"
+                :rootValue="props.rootValue" :propName="(propName ? propName + '.' : '') + property"
+                class="col-12" />
+  </div>
+</template>
+
+<script setup>
+  import AutoField from "./AutoField.vue"
+
+  import { computed, inject, getCurrentInstance } from 'vue'
+  import { toRefs } from '@vueuse/core'
+
+  const props = defineProps({
+    modelValue: {},
+    definition: {
+      type: Object
+    },
+    rootValue: {
+      type: Object,
+      default: () => ({})
+    },
+    propName: {
+      type: String,
+      default: ''
+    }
+  })
+
+  const { modelValue, definition } = toRefs(props)
+
+  const emit = defineEmits(['update:modelValue'])
+
+  const propertiesList = computed(() => Object.keys(props.definition.properties)
+    .filter(key => props.definition.properties[key]))
+
+  function updateModelProperty(property, value) {
+    const data = modelValue.value || {}
+    data[property] = value
+    console.log("UPDATE MODEL", data)
+    emit('update:modelValue', data)
+  }
+
+
+</script>
+
+<style scoped>
+
+</style>

package/AutoField.vue

@@ -0,0 +1,137 @@
+<template>
+  <component v-if="fieldComponent && visible" :is="fieldComponent" v-bind="attributes"
+             @update:modelValue="value => emit('update:modelValue', value)" />
+  <div v-else-if="visible" class="field" :class="fieldClass" :style="fieldStyle">
+    <label :for="uid">{{ label }}</label>
+    <slot>
+      <auto-input :modelValue="modelValue" :definition="definition"
+                  :class="props.inputClass" :style="props.inputStyle"
+                  :attributes="props.inputAttributes"
+                  @update:modelValue="value => emit('update:modelValue', value)"
+                  :id="uid" />
+    </slot>
+    <small v-if="validationResult" class="p-error">{{ validationResult }}</small>
+  </div>
+</template>
+
+<script setup>
+
+  import AutoInput from "./AutoInput.vue"
+
+  import { inputs, types } from './config.js'
+  import { computed, getCurrentInstance } from 'vue'
+  import { toRefs } from '@vueuse/core'
+
+  const props = defineProps({
+    modelValue: {},
+    error: {
+      type: String
+    },
+    definition: {
+      type: Object
+    },
+    name: {
+      type: String
+    },
+    label: {
+      type: String
+    },
+    class: {},
+    style: {},
+    inputClass: {},
+    inputStyle: {},
+    attributes: {
+      type: Object,
+      default: () => ({})
+    },
+    inputAttributes: {
+      type: Object,
+      default: () => ({})
+    },
+    rootValue: {
+      type: Object,
+      default: () => ({})
+    },
+    propName: {
+      type: String,
+      default: ''
+    }
+  })
+
+  const uid = 'field_'+getCurrentInstance().uid.toFixed().padStart(6, '0')
+
+  const emit = defineEmits(['update:modelValue'])
+
+  const { error, definition, modelValue } = toRefs(props)
+
+  const definitionIf = computed(() => {
+    if(definition.value?.if) {
+      if(definition.value?.if.function) {
+        return eval(`(${definition.value.if.function})`)
+      }
+    }
+    return false
+  })
+
+  const visible = computed(() => {
+    if(!definition.value) return false
+    if(definitionIf.value) {
+      return definitionIf.value({
+        source: definition.value,
+        props: props.rootValue,
+        propName: props.propName
+      })
+    }
+    return true
+  })
+
+  import { validateData } from "@live-change/vue3-components"
+
+  const validationResult = computed(() => {
+    const validationResult = validateData(definition.value, modelValue.value, 'validation')
+    const softValidationResult = validateData(definition.value, modelValue.value, 'softValidation')
+    return validationResult || softValidationResult || error.value
+  })
+
+  const inputConfig = computed(() => {
+    if(definition.value.input) return inputs[definition.value.input]
+    if(definition.value.type) return types[definition.value.type]
+    return inputs.default
+  })
+
+  const label = computed(() => props.label || definition.value.label || props.name)
+
+  const fieldClass = computed(() => [inputConfig.value?.fieldClass, definition.value?.fieldClass, props.class, {
+    'p-invalid': !!error.value
+  }])
+  const fieldStyle = computed(() => [inputConfig.value?.fieldStyle, definition.value?.fieldStyle, props.style])
+
+  const configAttributes = computed(() => {
+    const attributes = inputConfig.value?.fieldAttributes
+    if(!attributes) return attributes
+    if(typeof attributes == 'function') return attributes(definition.value)
+    return attributes
+  })
+
+  const attributes = computed(() => ({
+    ...(configAttributes.value),
+    ...(props.attributes),
+    label: props.label,
+    modelValue: props.modelValue,
+    definition: props.definition,
+    class: fieldClass.value,
+    style: fieldStyle.value,
+    inputClass: [props.inputClass, { 'p-invalid': !!validationResult.value }],
+    inputStyle: props.inputStyle,
+    rootValue: props.rootValue,
+    propName: props.propName,
+  }))
+
+  const fieldComponent = computed(() => inputConfig.value?.fieldComponent)
+
+
+</script>
+
+<style scoped>
+
+</style>

package/AutoInput.vue

@@ -1,12 +1,16 @@
 <template>
-  <component v-if="inputConfig" :is="inputConfig.component" v-bind="properties" @update:modelValue="updateValue"
-             :class="props.class" :style="props.style"  />
-  <div v-else class="font-bold text-red-600">No input found for definition {{ JSON.stringify(definition) }}</div>
+  <component v-if="inputConfig && visible" :is="inputConfig.component" v-bind="attributes"
+             @update:modelValue="updateValue" :class="inputClass" :style="inputStyle" />
+  <div v-else-if="visible" class="font-bold text-red-600">
+    No input found for definition:
+    <pre style="white-space: pre-wrap; word-wrap: break-word;">{{ JSON.stringify(definition, null, "  ") }}</pre>
+  </div>
 </template>
 
 <script setup>
   import { inputs, types } from './config.js'
   import { computed, inject } from 'vue'
+  import { toRefs } from '@vueuse/core'
 
   const props = defineProps({
     modelValue: {
@@ -14,42 +18,74 @@
     definition: {
       type: Object
     },
-    name: {
-      type: String
-    },
-    class: {
-      type: String
-    },
-    style: {
-      type: String
-    },
+    class: {},
+    style: {},
     properties: {
       type: Object,
       default: () => ({})
+    },
+    rootValue: {
+      type: Object,
+      default: () => ({})
+    },
+    propName: {
+      type: String,
+      default: ''
     }
   })
 
   const emit = defineEmits(['update:modelValue'])
 
-  const form = inject('form')
+  const { definition, modelValue } = toRefs(props)
 
-  const value = computed(() => props.name ? form.getFieldValue(props.name) : props.modelValue)
-  const definition = computed(() => props.name ? form.getFieldDefinition(props.name) : props.definition)
   const inputConfig = computed(() => {
-    console.log("definition", definition.value)
     if(definition.value.input) return inputs[definition.value.input]
     if(definition.value.type) return types[definition.value.type]
     return inputs.default
   })
 
-  const properties = computed(() => ({
-    ...(inputConfig.value.properties),
-    ...(props.properties),
-    modelValue: value.value
+  const definitionIf = computed(() => {
+    if(definition.value?.if) {
+      if(definition.value?.if.function) {
+        return eval(`(${definition.value.if.function})`)
+      }
+    }
+    return false
+  })
+
+  const visible = computed(() => {
+    if(!definition.value) return false
+    if(definitionIf.value) {
+      return definitionIf.value({
+        source: definition.value,
+        props: props.rootValue,
+        propName: props.propName
+      })
+    }
+    return true
+  })
+
+  const configAttributes = computed(() => {
+    const attributes = inputConfig.value?.attributes
+    if(!attributes) return attributes
+    if(typeof attributes == 'function') return attributes(definition.value)
+    return attributes
+  })
+
+  const attributes = computed(() => ({
+    ...(configAttributes.value),
+    ...(props.attributes),
+    ...(definition.value.inputAttributes),
+    modelValue: modelValue.value,
+    definition: definition.value,
+    rootValue: props.rootValue,
+    propName: props.propName
   }))
 
+  const inputClass = computed(() => [inputConfig.value?.inputClass, definition.value?.inputClass, props.class])
+  const inputStyle = computed(() => [inputConfig.value?.inputStyle, definition.value?.inputStyle, props.style])
+
   function updateValue(value) {
-    if(props.name) form.setFieldValue(props.name, value)
     emit('update:modelValue', value)
   }
 

package/GroupField.vue

@@ -0,0 +1,96 @@
+<template>
+  <div v-if="visible" class="pl-3 border-left-3 border-400 mb-3" :class="fieldClass" :style="fieldStyle">
+    <h3>{{ label }}:</h3>
+    <auto-input :modelValue="modelValue" :definition="definition" :name="props.name"
+                 :class="props.inputClass" :style="props.inputStyle"
+                 :properties="props.inputAttributes"
+                 :rootValue="props.rootValue" :propName="props.propName"
+                 @update:modelValue="value => emit('update:modelValue', value)" />
+  </div>
+</template>
+
+<script setup>
+  import AutoInput from "./AutoInput.vue"
+  import {inputs, types} from "./config";
+  import { computed, inject } from 'vue'
+  import { toRefs } from '@vueuse/core'
+
+  const props = defineProps({
+    modelValue: {},
+    error: {
+      type: String
+    },
+    definition: {
+      type: Object
+    },
+    name: {
+      type: String
+    },
+    label: {
+      type: String
+    },
+    class: {},
+    style: {},
+    inputClass: {},
+    inputStyle: {},
+    attributes: {
+      type: Object,
+      default: () => ({})
+    },
+    inputAttributes: {
+      type: Object,
+      default: () => ({})
+    },
+    rootValue: {
+      type: Object,
+      default: () => ({})
+    },
+    propName: {
+      type: String,
+      default: ''
+    }
+  })
+
+  const emit = defineEmits(['update:modelValue'])
+
+  const { error, definition, modelValue } = toRefs(props)
+
+  const definitionIf = computed(() => {
+    if(definition.value?.if) {
+      if(definition.value?.if.function) {
+        return eval(`(${definition.value.if.function})`)
+      }
+    }
+    return false
+  })
+
+  const visible = computed(() => {
+    if(!definition.value) return false
+    if(definitionIf.value) {
+      return definitionIf.value({
+        source: definition.value,
+        props: props.rootValue,
+        propName: props.propName
+      })
+    }
+    return true
+  })
+
+  const inputConfig = computed(() => {
+    if(definition.value?.input) return inputs[definition.value.input]
+    if(definition.value?.type) return types[definition.value.type]
+    return inputs.default
+  })
+
+  const label = computed(() => props.label || definition.value?.label || props.name)
+
+  const fieldClass = computed(() => [inputConfig.value?.fieldClass, definition.value?.fieldClass, props.class, {
+    'p-invalid': !!error.value
+  }])
+  const fieldStyle = computed(() => [inputConfig.value?.fieldStyle, definition.value?.fieldStyle, props.style])
+
+</script>
+
+<style scoped>
+
+</style>

package/ObjectInput.vue

@@ -0,0 +1,30 @@
+<template>
+  <div>
+
+  </div>
+</template>
+
+<script setup>
+
+
+  const props = defineProps({
+    modelValue: {
+    },
+    definition: {
+      type: Object
+    },
+    properties: {
+      type: Object,
+      default: () => ({})
+    }
+  })
+
+  const emit = defineEmits(['update:modelValue'])
+
+  const { value, definition, modelValue } = toRefs(props)
+
+</script>
+
+<style scoped>
+
+</style>

package/config.js

@@ -5,20 +5,39 @@ export const inputs = {
 export const types = {
 }
 
-export function input(src, params) {
+export function input(src, config) {
   return {
-    component: defineAsyncComponent(src),
-    params,
-    with(params) {
-      return { component: this.component, params }
+    component: src && defineAsyncComponent(src),
+    ...config,
+    with(config) {
+      return { component: this.component, ...config }
     }
   }
 }
 
 types.String = inputs.decimal = input( () => import('primevue/inputtext'))
+inputs.textarea = input(() => import('primevue/textarea'), { attributes: { autoResize: true } })
+
 inputs.password = input(() => import('primevue/password'))
 
 const number = input(() => import('primevue/inputnumber'))
 inputs.integer = number
-types.Number = inputs.decimal = number.with({ mode: 'decimal' })
+types.Number = inputs.decimal = number.with({ attributes: { mode: 'decimal' } })
+
+types.Object = inputs.object = input(() => import('./AutoEditor.vue'), {
+  fieldComponent: defineAsyncComponent(() => import('./GroupField.vue'))
+})
+
+types.Array = inputs.list = input(() => import('./ArrayInput.vue'), {
+  fieldComponent: defineAsyncComponent(() => import('./GroupField.vue'))
+})
+
+types.Date = inputs.datetime = input(() => import('primevue/calendar'), { attributes: { showTime: true } })
+
+inputs.select = input(() => import('primevue/dropdown'), {
+  attributes: (definition) => ({ options: definition.options })
+})
 
+inputs.duration = input(() => import('primevue/inputmask'), {
+  attributes: { mask: '99:99:99' }
+})

package/index.js

@@ -1,6 +1,8 @@
 import AutoInput from './AutoInput.vue'
+import AutoField from './AutoField.vue'
+import AutoEditor from './AutoEditor.vue'
 
-export { AutoInput }
+export { AutoInput, AutoField, AutoEditor }
 
-import inputConfig from './config.js'
+import * as inputConfig from './config.js'
 export { inputConfig }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@live-change/frontend-auto-form",
-  "version": "0.2.6",
+  "version": "0.2.8",
   "scripts": {
     "memDev": "lcli memDev --enableSessions --initScript ./init.js --dbAccess",
     "localDevInit": "rm tmp.db; lcli localDev --enableSessions --initScript ./init.js",
@@ -28,8 +28,8 @@
     "@live-change/framework": "0.7.4",
     "@live-change/image-service": "0.3.2",
     "@live-change/session-service": "0.3.2",
-    "@live-change/vue3-components": "0.2.15",
-    "@live-change/vue3-ssr": "0.2.15",
+    "@live-change/vue3-components": "0.2.16",
+    "@live-change/vue3-ssr": "0.2.16",
     "@tiptap/extension-highlight": "^2.0.0-beta.33",
     "@tiptap/extension-underline": "2.0.0-beta.23",
     "@tiptap/starter-kit": "^2.0.0-beta.185",
@@ -66,5 +66,5 @@
   "author": "",
   "license": "ISC",
   "description": "",
-  "gitHead": "323185f6d910912093b3c92df102d0f938cef367"
+  "gitHead": "72bd46680370e7804b168fec5dde28de205487e0"
 }