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

package/ArrayInput.vue

@@ -11,7 +11,8 @@
       </div>
       <auto-input :modelValue="value" :definition="definition.of"
                    @update:modelValue="value => updateItem(index, value)"
-                  :rootValue="props.rootValue" :propName="props.propName + '.' + index" />
+                  :rootValue="props.rootValue" :propName="props.propName + '.' + index"
+                  :i18n="i18n" />
     </div>
     <div>
       <Button label="Add item" icon="pi pi-plus" @click="insertItem" />
@@ -45,6 +46,10 @@
       type: String,
       default: ''
     },
+    i18n: {
+      type: String,
+      default: ''
+    }
   })
 
   const emit = defineEmits(['update:modelValue'])

package/AutoEditor.vue

@@ -6,6 +6,7 @@
                 :definition="definition.properties[property]"
                 :label="property"
                 :rootValue="props.rootValue" :propName="(propName ? propName + '.' : '') + property"
+                :i18n="i18n"
                 class="col-12" />
   </div>
 </template>
@@ -28,10 +29,14 @@
     propName: {
       type: String,
       default: ''
+    },
+    i18n: {
+      type: String,
+      default: ''
     }
   })
 
-  const { modelValue, definition } = toRefs(props)
+  const { modelValue, definition, propName } = toRefs(props)
 
   const emit = defineEmits(['update:modelValue'])
 

package/AutoField.vue

@@ -1,16 +1,19 @@
 <template>
   <component v-if="fieldComponent && visible" :is="fieldComponent" v-bind="attributes"
-             @update:modelValue="value => emit('update:modelValue', value)" />
+             @update:modelValue="value => emit('update:modelValue', value)" :i18n="i18n" />
   <div v-else-if="visible" class="field" :class="fieldClass" :style="fieldStyle">
-    <label :for="uid">{{ label }}</label>
+    <label :for="uid">{{ t( label ) }}</label>
     <slot>
       <auto-input :modelValue="modelValue" :definition="definition"
                   :class="props.inputClass" :style="props.inputStyle"
                   :attributes="props.inputAttributes"
+                  :propName="props.propName"
+                  :rootValue="props.rootValue"
                   @update:modelValue="value => emit('update:modelValue', value)"
-                  :id="uid" />
+                  :id="uid"
+                  :i18n="i18n" />
     </slot>
-    <small v-if="validationResult" class="p-error">{{ validationResult }}</small>
+    <small v-if="validationResult" class="p-error">{{ t( 'errors.' + validationResult ) }}</small>
   </div>
 </template>
 
@@ -22,6 +25,9 @@
   import { computed, getCurrentInstance } from 'vue'
   import { toRefs } from '@vueuse/core'
 
+  import { useI18n } from 'vue-i18n'
+  const { t } = useI18n()
+
   const props = defineProps({
     modelValue: {},
     error: {
@@ -55,6 +61,10 @@
     propName: {
       type: String,
       default: ''
+    },
+    i18n: {
+      type: String,
+      default: ''
     }
   })
 
@@ -99,7 +109,7 @@
     return inputs.default
   })
 
-  const label = computed(() => props.label || definition.value.label || props.name)
+  const label = computed(() => props.i18n + (props.label || definition.value.label || props.name))
 
   const fieldClass = computed(() => [inputConfig.value?.fieldClass, definition.value?.fieldClass, props.class, {
     'p-invalid': !!error.value

package/AutoInput.vue

@@ -31,12 +31,16 @@
     propName: {
       type: String,
       default: ''
+    },
+    i18n: {
+      type: String,
+      default: ''
     }
   })
 
   const emit = defineEmits(['update:modelValue'])
 
-  const { definition, modelValue } = toRefs(props)
+  const { definition, modelValue, propName } = toRefs(props)
 
   const inputConfig = computed(() => {
     if(definition.value.input) return inputs[definition.value.input]
@@ -56,6 +60,7 @@
   const visible = computed(() => {
     if(!definition.value) return false
     if(definitionIf.value) {
+      console.log("DIF", propName.value, definitionIf.value, 'IN', props.rootValue)
       return definitionIf.value({
         source: definition.value,
         props: props.rootValue,
@@ -65,10 +70,24 @@
     return true
   })
 
+  import { useI18n } from 'vue-i18n'
+  const { t, d, n } = useI18n()
+
   const configAttributes = computed(() => {
     const attributes = inputConfig.value?.attributes
     if(!attributes) return attributes
-    if(typeof attributes == 'function') return attributes(definition.value)
+    if(typeof attributes == 'function') {
+      const fieldName = props.propName.split('.').pop()
+      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
+      })
+    }
     return attributes
   })
 
@@ -79,7 +98,8 @@
     modelValue: modelValue.value,
     definition: definition.value,
     rootValue: props.rootValue,
-    propName: props.propName
+    propName: props.propName,
+    i18n: props.i18n
   }))
 
   const inputClass = computed(() => [inputConfig.value?.inputClass, definition.value?.inputClass, props.class])

package/GroupField.vue

@@ -1,11 +1,12 @@
 <template>
   <div v-if="visible" class="pl-3 border-left-3 border-400 mb-3" :class="fieldClass" :style="fieldStyle">
-    <h3>{{ label }}:</h3>
+    <h3>{{ t( i18n + label + ':title' ) }}</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)" />
+                 @update:modelValue="value => emit('update:modelValue', value)"
+                :i18n="props.i18n + props.propName.split('.').pop() + '.'" />
   </div>
 </template>
 
@@ -15,6 +16,9 @@
   import { computed, inject } from 'vue'
   import { toRefs } from '@vueuse/core'
 
+  import { useI18n } from 'vue-i18n'
+  const { t } = useI18n()
+
   const props = defineProps({
     modelValue: {},
     error: {
@@ -48,6 +52,10 @@
     propName: {
       type: String,
       default: ''
+    },
+    i18n: {
+      type: String,
+      default: ''
     }
   })
 

package/config.js

@@ -35,7 +35,14 @@ types.Array = inputs.list = input(() => import('./ArrayInput.vue'), {
 types.Date = inputs.datetime = input(() => import('primevue/calendar'), { attributes: { showTime: true } })
 
 inputs.select = input(() => import('primevue/dropdown'), {
-  attributes: (definition) => ({ options: definition.options })
+  attributes: (config) => {
+    const { definition, i18n, t } = config
+    console.log("SELECT", config)
+    return {
+      options: definition.options,
+      optionLabel: option => t(i18n + ':options.' + option)
+    }
+  }
 })
 
 inputs.duration = input(() => import('primevue/inputmask'), {

package/index.js

@@ -6,3 +6,7 @@ export { AutoInput, AutoField, AutoEditor }
 
 import * as inputConfig from './config.js'
 export { inputConfig }
+
+import en from "./locales/en.json"
+const locales = { en }
+export { locales }

package/locales/en.json

@@ -0,0 +1,5 @@
+{
+  "errors": {
+    "empty": "This field is required."
+  }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@live-change/frontend-auto-form",
-  "version": "0.2.8",
+  "version": "0.2.9",
   "scripts": {
     "memDev": "lcli memDev --enableSessions --initScript ./init.js --dbAccess",
     "localDevInit": "rm tmp.db; lcli localDev --enableSessions --initScript ./init.js",
@@ -20,7 +20,7 @@
     "debug": "node --inspect-brk server"
   },
   "dependencies": {
-    "@fortawesome/fontawesome-free": "^6.1.1",
+    "@fortawesome/fontawesome-free": "^6.2.0",
     "@live-change/cli": "0.7.4",
     "@live-change/dao": "0.5.8",
     "@live-change/dao-vue3": "0.5.8",
@@ -66,5 +66,5 @@
   "author": "",
   "license": "ISC",
   "description": "",
-  "gitHead": "72bd46680370e7804b168fec5dde28de205487e0"
+  "gitHead": "703c9723562ade7b2420e1b25b28ced51a96db09"
 }