@live-change/frontend-auto-form 0.8.50 → 0.8.51

package/ArrayInput.vue

@@ -1,13 +1,49 @@
 <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 class="mb-4 border-bottom-1" v-for="(value, index) in modelValue">
+      <div class="flex flex-row align-items-center justify-content-between">
+
+        <div class="text-2xl">
+          {{ te(i18n.slice(0,-1)+':itemTitle')
+          ? t(i18n.slice(0,-1)+':itemTitle', { ...value, index: index+1 })
+          : `#${index + 1}` }}
+        </div>
+
+        <div class="flex flex-row">
+          <Button class="mx-1" icon="pi pi-plus" @click="insertItem(index)"
+                  style="transform: scale(0.9)"
+                  rounded
+                  severity="success"
+                  size="small"
+                  v-ripple
+                  aria-label="Insert before" />
+          <Button v-if="index > 0"
+                  style="transform: scale(0.9)"
+                  class="mx-1"
+                  icon="pi pi-arrow-up" @click="swapItem(index)"
+                  severity="secondary"
+                  rounded
+                  size="small"
+                  aria-label="Move up" />
+          <Button v-if="index < modelValue.length - 1"
+                  style="transform: scale(0.9)"
+                  class="mx-1"
+                  icon="pi pi-arrow-down" @click="swapItem(index + 1)"
+                  severity="secondary"
+                  rounded
+                  v-ripple
+                  size="small"
+                  aria-label="Move down" />
+          <Button class="mx-1"
+                  style="transform: scale(0.9)"
+                  icon="pi pi-trash" @click="removeItem(index)"
+                  severity="danger"
+                  rounded
+                  size="small"
+                  v-ripple
+                  :aria-label="`Remove  #${ index+1 }`" />
+        </div>
+
       </div>
       <auto-input :modelValue="value" :definition="definition.of"
                    @update:modelValue="value => updateItem(index, value)"
@@ -15,14 +51,17 @@
                   :i18n="i18n" />
     </div>
     <div>
-      <Button class="w-10rem" :label="t('autoform.addItem')" icon="pi pi-plus" @click="ev => insertItem()" />
+      <Button severity="success"
+              :label="te(i18n.slice(0,-1)+':addItem') ? t(i18n.slice(0,-1)+':addItem') : t('autoform.addItem')"
+              icon="pi pi-plus"
+              @click="ev => insertItem()" />
     </div>
   </div>
 </template>
 
 <script setup>
   import { useI18n } from 'vue-i18n'
-  const { t, n, d } = useI18n()
+  const { t, te,  n, d } = useI18n()
 
   import Button from "primevue/button";
   import AutoInput from "./AutoInput.vue"

package/AutoField.vue

@@ -13,7 +13,17 @@
                   :id="uid"
                   :i18n="i18n" />
     </slot>
-    <small v-if="validationResult" class="p-error">{{ t( 'errors.' + validationResult ) }}</small>
+    <div>
+      <small v-if="validationResult" class="p-error mt-1">
+        {{ (typeof validationResult === 'object')
+             ? t( 'errors.' + validationResult.error, validationResult.validator )
+             : t( 'errors.' + validationResult ) }}
+      </small>
+      <small v-if="maxLengthValidation" style="float: right" class="mt-1"
+             :class="{ 'p-error': props.modelValue?.length > maxLengthValidation.length }">
+        {{ t( 'info.maxLength', { maxLength: maxLengthValidation.length, length: props.modelValue?.length ?? 0 }) }}
+      </small>
+    </div>
   </div>
 </template>
 
@@ -97,11 +107,24 @@
   import { validateData } from "@live-change/vue3-components"
   const appContext = getCurrentInstance().appContext
   const validationResult = computed(() => {
-    const validationResult = validateData(definition.value, modelValue.value, 'validation', appContext)
-    const softValidationResult = validateData(definition.value, modelValue.value, 'softValidation', appContext)
+    const validationResult = validateData(definition.value, modelValue.value, 'validation', appContext,
+      props.propName, props.rootValue, true)
+    const softValidationResult = validateData(definition.value, modelValue.value, 'softValidation', appContext,
+      props.propName, props.rootValue, true)
     return validationResult || softValidationResult || error.value
   })
 
+  function findValidation(name) {
+    if(definition.value.softValidation)
+      for(const validator of definition.value.softValidation)
+        if(validator.name === name) return validator
+    if(definition.value.validation)
+      for(const validator of definition.value.validation)
+        if(validator.name === name) return validator
+  }
+
+  const maxLengthValidation = computed(() => findValidation('maxLength')?.params)
+
   const config = inject('auto-form', {
     inputs: {},
     types: {}

package/AutoInput.vue

@@ -11,6 +11,7 @@
 <script setup>
   import { inputs, types } from './config.js'
   import { computed, inject, toRefs } from 'vue'
+  import deepmerge from 'deepmerge';
 
   const props = defineProps({
     modelValue: {
@@ -47,12 +48,13 @@
     types: {}
   })
   const inputConfig = computed(() => {
-    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),
-      ...definition?.autoForm?.config, // possible to modify config per input
-    }
+    let baseConfig
+    if(definition.value.input && !baseConfig) baseConfig =
+      config.inputs?.[definition.value.input] ?? inputs[definition.value.input]
+    if(definition.value.type && !baseConfig) baseConfig =
+      config.types?.[definition.value.type] ?? types[definition.value.type]
+    if(!baseConfig) baseConfig = config.inputs?.default ?? inputs.default
+    return deepmerge(baseConfig, definition.value?.inputConfig ?? {}) // possible to modify config per input
   })
 
   const definitionIf = computed(() => {

package/Calendar.vue

@@ -0,0 +1,263 @@
+<template>
+  <PrimeVueCalendar v-bind="props" v-model="convertedDate" />
+</template>
+
+<script setup>
+  import PrimeVueCalendar from 'primevue/calendar'
+
+  import { defineProps, defineModel, computed } from 'vue'
+
+  const model = defineModel({
+  })
+
+  const convertedDate = computed({ // convert from iso to Date
+    get: () => model.value ? new Date(model.value) : null,
+    set: val => model.value = val ? new Date(val) : null
+  })
+
+  const props = defineProps({
+    selectionMode: {
+      type: String,
+      default: 'single'
+    },
+    dateFormat: {
+      type: String,
+      default: null
+    },
+    inline: {
+      type: Boolean,
+      default: false
+    },
+    showOtherMonths: {
+      type: Boolean,
+      default: true
+    },
+    selectOtherMonths: {
+      type: Boolean,
+      default: false
+    },
+    showIcon: {
+      type: Boolean,
+      default: false
+    },
+    iconDisplay: {
+      type: String,
+      default: 'button'
+    },
+    icon: {
+      type: String,
+      default: undefined
+    },
+    prevIcon: {
+      type: String,
+      default: undefined
+    },
+    nextIcon: {
+      type: String,
+      default: undefined
+    },
+    incrementIcon: {
+      type: String,
+      default: undefined
+    },
+    decrementIcon: {
+      type: String,
+      default: undefined
+    },
+    numberOfMonths: {
+      type: Number,
+      default: 1
+    },
+    responsiveOptions: Array,
+    breakpoint: {
+      type: String,
+      default: '769px'
+    },
+    view: {
+      type: String,
+      default: 'date'
+    },
+    minDate: {
+      type: Date,
+      value: null
+    },
+    maxDate: {
+      type: Date,
+      value: null
+    },
+    disabledDates: {
+      type: Array,
+      value: null
+    },
+    disabledDays: {
+      type: Array,
+      value: null
+    },
+    maxDateCount: {
+      type: Number,
+      value: null
+    },
+    showOnFocus: {
+      type: Boolean,
+      default: true
+    },
+    autoZIndex: {
+      type: Boolean,
+      default: true
+    },
+    baseZIndex: {
+      type: Number,
+      default: 0
+    },
+    showButtonBar: {
+      type: Boolean,
+      default: false
+    },
+    shortYearCutoff: {
+      type: String,
+      default: '+10'
+    },
+    showTime: {
+      type: Boolean,
+      default: false
+    },
+    timeOnly: {
+      type: Boolean,
+      default: false
+    },
+    hourFormat: {
+      type: String,
+      default: '24'
+    },
+    stepHour: {
+      type: Number,
+      default: 1
+    },
+    stepMinute: {
+      type: Number,
+      default: 1
+    },
+    stepSecond: {
+      type: Number,
+      default: 1
+    },
+    showSeconds: {
+      type: Boolean,
+      default: false
+    },
+    hideOnDateTimeSelect: {
+      type: Boolean,
+      default: false
+    },
+    hideOnRangeSelection: {
+      type: Boolean,
+      default: false
+    },
+    timeSeparator: {
+      type: String,
+      default: ':'
+    },
+    showWeek: {
+      type: Boolean,
+      default: false
+    },
+    manualInput: {
+      type: Boolean,
+      default: true
+    },
+    appendTo: {
+      type: [String, Object],
+      default: 'body'
+    },
+    variant: {
+      type: String,
+      default: null
+    },
+    invalid: {
+      type: Boolean,
+      default: false
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    readonly: {
+      type: Boolean,
+      default: false
+    },
+    placeholder: {
+      type: String,
+      default: null
+    },
+    name: {
+      type: String,
+      default: null
+    },
+    id: {
+      type: String,
+      default: null
+    },
+    inputId: {
+      type: String,
+      default: null
+    },
+    inputClass: {
+      type: [String, Object],
+      default: null
+    },
+    inputStyle: {
+      type: Object,
+      default: null
+    },
+    panelClass: {
+      type: [String, Object],
+      default: null
+    },
+    panelStyle: {
+      type: Object,
+      default: null
+    },
+    todayButtonProps: {
+      type: Object,
+      default() {
+        return { severity: 'secondary', text: true, size: 'small' };
+      }
+    },
+    clearButtonProps: {
+      type: Object,
+      default() {
+        return { severity: 'secondary', text: true, size: 'small' };
+      }
+    },
+    navigatorButtonProps: {
+      type: Object,
+      default() {
+        return { severity: 'secondary', text: true, rounded: true };
+      }
+    },
+    timepickerButtonProps: {
+      type: Object,
+      default() {
+        return { severity: 'secondary', text: true, rounded: true };
+      }
+    },
+    fluid: {
+      type: Boolean,
+      default: null
+    },
+    ariaLabelledby: {
+      type: String,
+      default: null
+    },
+    ariaLabel: {
+      type: String,
+      default: null
+    }
+  })
+
+
+</script>
+
+<style scoped>
+
+</style>

package/GroupField.vue

@@ -1,5 +1,5 @@
 <template>
-  <div v-if="visible" class="pl-3 border-left-3 border-400 mb-3" :class="fieldClass" :style="fieldStyle">
+  <div v-if="visible" class="pl-5 mb-3" :class="fieldClass" :style="fieldStyle">
     <h3>{{ t( i18n + label + ':title' ) }}</h3>
     <auto-input :modelValue="modelValue" :definition="definition" :name="props.name"
                  :class="props.inputClass" :style="props.inputStyle"

package/config.js

@@ -33,7 +33,7 @@ types.Array = inputs.list = input(() => import('./ArrayInput.vue'), {
   fieldComponent: defineAsyncComponent(() => import('./GroupField.vue'))
 })
 
-types.Date = inputs.datetime = input(() => import('primevue/calendar'), { attributes: { showTime: true } })
+types.Date = inputs.datetime = input(() => import('./Calendar.vue'), { attributes: { showTime: true } })
 
 inputs.select = input(() => import('primevue/dropdown'), {
   attributes: (config) => {
@@ -68,3 +68,7 @@ inputs.multiselect = input(() => import('primevue/multiselect'), {
 inputs.duration = input(() => import('primevue/inputmask'), {
   attributes: { mask: '99:99:99' }
 })
+
+types.Image = inputs.image = input(
+  async () => (await import('@live-change/image-frontend')).ImageInput
+)

package/locales/en.json

@@ -1,5 +1,14 @@
 {
   "errors": {
-    "empty": "This field is required."
+    "empty": "This field is required.",
+    "tooShort": "Too short, minimum {length} characters.",
+    "tooLong": "Too long, maximum {length} characters."
+  },
+  "info": {
+    "minLength": "Minimum length - {minLength} characters.",
+    "maxLength": "{length} / {maxLength}"
+  },
+  "autoform": {
+    "addItem": "Add next item"
   }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@live-change/frontend-auto-form",
-  "version": "0.8.50",
+  "version": "0.8.51",
   "scripts": {
     "memDev": "node server/start.js memDev --enableSessions --initScript ./init.js --dbAccess",
     "localDevInit": "rm tmp.db; lcli localDev --enableSessions --initScript ./init.js",
@@ -22,15 +22,16 @@
   "type": "module",
   "dependencies": {
     "@fortawesome/fontawesome-free": "^6.5.2",
-    "@live-change/cli": "^0.8.50",
-    "@live-change/dao": "^0.8.50",
-    "@live-change/dao-vue3": "^0.8.50",
-    "@live-change/dao-websocket": "^0.8.50",
-    "@live-change/framework": "^0.8.50",
-    "@live-change/image-service": "^0.8.50",
-    "@live-change/session-service": "^0.8.50",
-    "@live-change/vue3-components": "^0.8.50",
-    "@live-change/vue3-ssr": "^0.8.50",
+    "@live-change/cli": "^0.8.51",
+    "@live-change/dao": "^0.8.51",
+    "@live-change/dao-vue3": "^0.8.51",
+    "@live-change/dao-websocket": "^0.8.51",
+    "@live-change/framework": "^0.8.51",
+    "@live-change/image-frontend": "^0.8.51",
+    "@live-change/image-service": "^0.8.51",
+    "@live-change/session-service": "^0.8.51",
+    "@live-change/vue3-components": "^0.8.51",
+    "@live-change/vue3-ssr": "^0.8.51",
     "@vueuse/core": "^10.11.0",
     "codeceptjs-assert": "^0.0.5",
     "compression": "^1.7.4",
@@ -51,7 +52,7 @@
     "vue3-scroll-border": "0.1.6"
   },
   "devDependencies": {
-    "@live-change/codeceptjs-helper": "^0.8.50",
+    "@live-change/codeceptjs-helper": "^0.8.51",
     "codeceptjs": "^3.5.12",
     "generate-password": "1.7.1",
     "playwright": "^1.41.2",
@@ -62,5 +63,5 @@
   "author": "Michał Łaszczewski <michal@laszczewski.pl>",
   "license": "ISC",
   "description": "",
-  "gitHead": "c967d5304bdac5150a6272c8d7cbe8974d7c25e6"
+  "gitHead": "ba8da813894eeb717223aa8d5e364649e4ac0347"
 }