@live-change/frontend-auto-form 0.3.1 → 0.3.3

package/ArrayInput.vue

@@ -15,18 +15,20 @@
                   :i18n="i18n" />
     </div>
     <div>
-      <Button label="Add item" icon="pi pi-plus" @click="insertItem" />
+      <Button class="w-10rem" :label="t('autoform.addItem')" icon="pi pi-plus" @click="insertItem" />
     </div>
   </div>
 </template>
 
 <script setup>
+  import { useI18n } from 'vue-i18n'
+  const { t, n, d } = useI18n()
+
   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'
+  import { computed, getCurrentInstance, toRefs } from 'vue'
 
   const props = defineProps({
     modelValue: {

package/AutoEditor.vue

@@ -14,8 +14,7 @@
 <script setup>
   import AutoField from "./AutoField.vue"
 
-  import { computed, inject, getCurrentInstance } from 'vue'
-  import { toRefs } from '@vueuse/core'
+  import { computed, inject, getCurrentInstance, toRefs } from 'vue'
 
   const props = defineProps({
     modelValue: {},
@@ -46,7 +45,7 @@
   function updateModelProperty(property, value) {
     const data = modelValue.value || {}
     data[property] = value
-    console.log("UPDATE MODEL", data)
+    //console.log("UPDATE MODEL", data)
     emit('update:modelValue', data)
   }
 

package/AutoField.vue

@@ -22,11 +22,10 @@
   import AutoInput from "./AutoInput.vue"
 
   import { inputs, types } from './config.js'
-  import { computed, getCurrentInstance } from 'vue'
-  import { toRefs } from '@vueuse/core'
+  import { computed, getCurrentInstance, inject, toRefs } from 'vue'
 
   import { useI18n } from 'vue-i18n'
-  const { t } = useI18n()
+  const { t, rt } = useI18n()
 
   const props = defineProps({
     modelValue: {},
@@ -96,17 +95,21 @@
   })
 
   import { validateData } from "@live-change/vue3-components"
-
+  const appContext = getCurrentInstance().appContext
   const validationResult = computed(() => {
-    const validationResult = validateData(definition.value, modelValue.value, 'validation')
-    const softValidationResult = validateData(definition.value, modelValue.value, 'softValidation')
+    const validationResult = validateData(definition.value, modelValue.value, 'validation', appContext)
+    const softValidationResult = validateData(definition.value, modelValue.value, 'softValidation', appContext)
     return validationResult || softValidationResult || error.value
   })
 
+  const config = inject('auto-form', {
+    inputs: {},
+    types: {}
+  })
   const inputConfig = computed(() => {
-    if(definition.value.input) return inputs[definition.value.input]
-    if(definition.value.type) return types[definition.value.type]
-    return inputs.default
+    if(definition.value.input) return config.inputs?.[definition.value.input] ?? inputs[definition.value.input]
+    if(definition.value.type) return config.types?.[definition.value.type] ?? types[definition.value.type]
+    return config.inputs?.default ?? inputs.default
   })
 
   const label = computed(() => props.i18n + (props.label || definition.value.label || props.name))

package/AutoInput.vue

@@ -3,14 +3,14 @@
              @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>
+    <pre style="white-space: pre-wrap; word-wrap: break-word;"
+      >{{propName}}: {{ 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'
+  import { computed, inject, toRefs } from 'vue'
 
   const props = defineProps({
     modelValue: {
@@ -42,10 +42,14 @@
 
   const { definition, modelValue, propName } = toRefs(props)
 
+  const config = inject('auto-form', {
+    inputs: {},
+    types: {}
+  })
   const inputConfig = computed(() => {
-    if(definition.value.input) return inputs[definition.value.input]
-    if(definition.value.type) return types[definition.value.type]
-    return inputs.default
+    if(definition.value.input) return config.inputs?.[definition.value.input] ?? inputs[definition.value.input]
+    if(definition.value.type) return config.types?.[definition.value.type] ?? types[definition.value.type]
+    return config.inputs?.default ?? inputs.default
   })
 
   const definitionIf = computed(() => {
@@ -60,7 +64,7 @@
   const visible = computed(() => {
     if(!definition.value) return false
     if(definitionIf.value) {
-      console.log("DIF", propName.value, definitionIf.value, 'IN', props.rootValue)
+      //console.log("DIF", propName.value, definitionIf.value, 'IN', props.rootValue)
       return definitionIf.value({
         source: definition.value,
         props: props.rootValue,
@@ -71,21 +75,22 @@
   })
 
   import { useI18n } from 'vue-i18n'
-  const { t, d, n } = useI18n()
+  const { rt, t, d, n, te } = useI18n()
 
   const configAttributes = computed(() => {
     const attributes = inputConfig.value?.attributes
     if(!attributes) return attributes
     if(typeof attributes == 'function') {
       const fieldName = props.propName.split('.').pop()
-      console.log("PROPS", JSON.stringify(props))
-      console.log("PROPNAME", propName.value)
+      //console.log("PROPS", JSON.stringify(props))
+      //console.log("PROPNAME", propName.value)
       return attributes({
         definition: definition.value,
         i18n: props.i18n + fieldName,
         propName: props.propName,
         fieldName,
-        t, d, n
+        rootValue: props.rootValue,
+        t, d, n, rt, te
       })
     }
     return attributes

package/GroupField.vue

@@ -7,14 +7,14 @@
                  :rootValue="props.rootValue" :propName="props.propName"
                  @update:modelValue="value => emit('update:modelValue', value)"
                 :i18n="props.i18n + props.propName.split('.').pop() + '.'" />
+    <small v-if="typeof validationResult == 'string'" class="p-error">{{ t( 'errors.' + validationResult ) }}</small>
   </div>
 </template>
 
 <script setup>
   import AutoInput from "./AutoInput.vue"
-  import {inputs, types} from "./config";
-  import { computed, inject } from 'vue'
-  import { toRefs } from '@vueuse/core'
+  import { inputs, types } from "./config";
+  import { computed, inject, toRefs, getCurrentInstance } from 'vue'
 
   import { useI18n } from 'vue-i18n'
   const { t } = useI18n()
@@ -90,6 +90,18 @@
     return inputs.default
   })
 
+  import { validateData } from "@live-change/vue3-components"
+
+  const appContext = getCurrentInstance().appContext
+
+  const validationResult = computed(() => {
+    console.log('validation', definition.value, modelValue.value)
+    const validationResult = validateData(definition.value, modelValue.value, 'validation', appContext)
+    const softValidationResult = validateData(definition.value, modelValue.value, 'softValidation', appContext)
+    console.log('validationResult', validationResult, softValidationResult, error.value)
+    return validationResult || softValidationResult || error.value
+  })
+
   const label = computed(() => props.label || definition.value?.label || props.name)
 
   const fieldClass = computed(() => [inputConfig.value?.fieldClass, definition.value?.fieldClass, props.class, {

package/config.js

@@ -1,5 +1,6 @@
 import { defineAsyncComponent } from 'vue'
 
+
 export const inputs = {
 }
 export const types = {
@@ -36,11 +37,30 @@ types.Date = inputs.datetime = input(() => import('primevue/calendar'), { attrib
 
 inputs.select = input(() => import('primevue/dropdown'), {
   attributes: (config) => {
-    const { definition, i18n, t } = config
-    console.log("SELECT", config)
+    const { definition, i18n, t, te } = config
+   // console.log("SELECT", config)
     return {
       options: definition.options,
-      optionLabel: option => t(i18n + ':options.' + option)
+      optionLabel: option => {
+        const i18nId = i18n + ':options.' + option
+        if(te(i18nId)) return t(i18nId)
+        return t(option)
+      }
+    }
+  }
+})
+
+inputs.multiselect = input(() => import('primevue/multiselect'), {
+  attributes: (config) => {
+    const { definition, i18n, t, te } = config
+    console.log("MULTISELECT", config)
+    return {
+      options: definition.of.options ?? definition.options,
+      optionLabel: option => {
+        const i18nId = i18n + ':options.' + option
+        if(te(i18nId)) return t(i18nId)
+        return t(option)
+      }
     }
   }
 })

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@live-change/frontend-auto-form",
-  "version": "0.3.1",
+  "version": "0.3.3",
   "scripts": {
     "memDev": "lcli memDev --enableSessions --initScript ./init.js --dbAccess",
     "localDevInit": "rm tmp.db; lcli localDev --enableSessions --initScript ./init.js",
@@ -21,15 +21,15 @@
   },
   "dependencies": {
     "@fortawesome/fontawesome-free": "^6.4.2",
-    "@live-change/cli": "0.7.32",
-    "@live-change/dao": "0.5.21",
-    "@live-change/dao-vue3": "0.5.21",
-    "@live-change/dao-websocket": "0.5.21",
-    "@live-change/framework": "0.7.32",
-    "@live-change/image-service": "0.3.30",
-    "@live-change/session-service": "0.3.30",
-    "@live-change/vue3-components": "0.2.29",
-    "@live-change/vue3-ssr": "0.2.29",
+    "@live-change/cli": "0.7.34",
+    "@live-change/dao": "0.5.22",
+    "@live-change/dao-vue3": "0.5.22",
+    "@live-change/dao-websocket": "0.5.22",
+    "@live-change/framework": "0.7.34",
+    "@live-change/image-service": "0.3.32",
+    "@live-change/session-service": "0.3.32",
+    "@live-change/vue3-components": "0.2.30",
+    "@live-change/vue3-ssr": "0.2.30",
     "@vueuse/core": "^10.4.1",
     "codeceptjs-assert": "^0.0.5",
     "compression": "^1.7.4",
@@ -50,7 +50,7 @@
     "vue3-scroll-border": "0.1.5"
   },
   "devDependencies": {
-    "@live-change/codeceptjs-helper": "0.7.32",
+    "@live-change/codeceptjs-helper": "0.7.34",
     "@wdio/selenium-standalone-service": "^8.15.0",
     "codeceptjs": "^3.5.4",
     "generate-password": "1.7.0",
@@ -62,5 +62,5 @@
   "author": "",
   "license": "ISC",
   "description": "",
-  "gitHead": "5e3d6a0e0a8b9ab07d430d3a72ecc719be660738"
+  "gitHead": "dff1aa7df92ffd7c5b63c12ef4d1b4dadefe3a06"
 }