@live-change/frontend-auto-form 0.9.12 → 0.9.13

package/front/src/components/crud/ModelView.vue

@@ -1,10 +1,14 @@
 <template>
   <div>
-      <h4>identifiers</h4>
-      <pre>{{ identifiers }}</pre>
 
-      <h4>definition</h4>
-      <pre>{{ modelDefinition }}</pre>
+<!--    <h4>identifiers</h4>
+    <pre>{{ identifiers }}</pre>
+
+    <h4>definition</h4>
+    <pre>{{ modelDefinition }}</pre>
+
+    <h4>object</h4>
+    <pre>{{ object }}</pre>-->
 
     <div class="">
       Service <strong>{{ service }}</strong>
@@ -19,11 +23,15 @@
       />
     </div>
 
+    <AutoView :value="object" :root-value="object" :i18n="i18n" :attributes="attributes"
+              :definition="modelDefinition" />
+
   </div>
 </template>
 
 <script setup>
 
+  import AutoView from '../view/AutoView.vue'
 
   import { ref, computed, onMounted, defineProps, defineEmits, toRefs } from 'vue'
   import { RangeViewer, injectComponent } from "@live-change/vue3-components"
@@ -45,7 +53,7 @@
       type: Boolean,
       default: false
     },
-    options: {
+    attributes: {
       type: Object,
       default: () => ({})
     },
@@ -54,7 +62,7 @@
       default: ''
     }
   })
-  const { service, model, identifiers, draft, options, i18n } = toRefs(props)
+  const { service, model, identifiers, draft, attributes, i18n } = toRefs(props)
 
   const emit = defineEmits(['saved', 'draftSaved', 'draftDiscarded', 'saveError', 'created' ])
 
@@ -90,7 +98,6 @@
     viewDataPromise
   ])
 
-
 </script>
 
 <style scoped>

package/front/src/components/form/AutoField.vue

@@ -42,7 +42,7 @@
   import AutoInput from "./AutoInput.vue"
 
   import { inputs, types } from '../../config.js'
-  import { computed, getCurrentInstance, inject, toRefs, onMounted, ref } from 'vue'
+  import { computed, getCurrentInstance, inject, toRefs, onMounted, ref, useId } from 'vue'
 
   const isMounted = ref(false)
   onMounted(() => isMounted.value = true)
@@ -94,8 +94,7 @@
     }
   })
 
-  const instanceUid = getCurrentInstance().uid
-  const uid = computed(() => isMounted.value ? 'field_'+instanceUid.toFixed().padStart(6, '0') : undefined)
+  const uid = useId()
 
   const emit = defineEmits(['update:modelValue'])
 
@@ -105,6 +104,8 @@
     if(definition.value?.if) {
       if(definition.value?.if.function) {
         return eval(`(${definition.value.if.function})`)
+      } else {
+        throw new Error('Unknown if type' + JSON.stringify(definition.value.if))
       }
     }
     return false

package/front/src/components/form/AutoInput.vue

@@ -61,6 +61,8 @@
     if(definition.value?.if) {
       if(definition.value?.if.function) {
         return eval(`(${definition.value.if.function})`)
+      } else {
+        throw new Error('Unknown if type' + JSON.stringify(definition.value.if))
       }
     }
     return false

package/front/src/components/view/AutoView.vue

@@ -1,19 +1,11 @@
 <template>
-  <div v-if="definition" class="grid formgrid p-fluid mt-2 mb-2">
-    <auto-field-view v-for="property in propertiesList" :key="property"
-                :value="value?.[property]"
-                :definition="definition.properties[property]"
-                :label="property"
-                :rootValue="props.rootValue" :propName="(propName ? propName + '.' : '') + property"
-                :i18n="i18n"
-                class="col-12" />
-  </div>
+  <component v-if="viewComponent && visible" :is="viewComponent" v-bind="attributes" :i18n="i18n" />
 </template>
 
 <script setup>
-  //import AutoFieldView from "./AutoFieldView.vue"
+  import { injectComponent } from '@live-change/vue3-components'
 
-  import { computed, inject, getCurrentInstance, toRefs } from 'vue'
+  import { computed, inject, getCurrentInstance, toRefs, defineAsyncComponent } from 'vue'
 
   const props = defineProps({
     value: {},
@@ -37,16 +29,82 @@
       items: {
         type: String
       }
+    },
+    class: {},
+    style: {},
+    attributes: {
+      type: Object,
+      default: () => ({})
     }
   })
 
-  const { value, definition, propName, visibleProperties } = toRefs(props)
+  const { value, definition, propName, rootValue, visibleProperties } = toRefs(props)
+
+  const definitionIf = computed(() => {
+    if(definition.value?.if) {
+      if(definition.value?.if.function) {
+        return eval(`(${definition.value.if.function})`)
+      } else {
+        throw new Error('Unknown if type' + JSON.stringify(definition.value.if))
+      }
+    }
+    return false
+  })
+
+  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,
+        propName: props.propName
+      })
+    }
+    return true
+  })
+
+  const viewFilter = computed(() => {
+    const filter = definition?.view?.componentFilter
+    if(filter) {
+      if(filter.function) {
+        return eval(`(${filter.function})`)
+      } else {
+        throw new Error('Unknown filter type' + JSON.stringify(filter))
+      }
+    }
+    return undefined
+  })
+
+  const viewComponent = computed(() => {
+    const type = definition.value.type ?? 'Object'
+    const defaultComponent = (type === 'Object')
+      ? defineAsyncComponent(() => import('./ObjectView.vue'))
+      : defineAsyncComponent(() => import('./JsonView.vue'))
+    return injectComponent(definition.value?.view?.componentRequest ?? {
+      ...(definition.value?.view?.componentRequestProperties),
+      name: 'AutoView',
+      type,
+      view: definition?.view?.name ?? definition?.view,
+      filter: viewFilter.value
+    }, defaultComponent)
+  })
+
+  const viewClass = computed(() => [definition.value?.view?.class, props.class])
+  const viewStyle = computed(() => [definition.value?.view?.style, props.style])
 
-  const propertiesList = computed(() =>
-    visibleProperties.value ??
-    props.definition.visibleProperties ??
-    Object.keys(props.definition.properties).filter(key => props.definition.properties[key])
-  )
+  const attributes = computed(() => ({
+    visibleProperties: visibleProperties.value,
+    i18n: i18n.value,
+    ...(definition.value?.view?.attributes),
+    ...(props.attributes),
+    value: value.value,
+    definition: definition.value,
+    class: viewClass.value,
+    style: viewStyle.value,
+    rootValue: rootValue.value,
+    propName: propName.value,
+  }))
 
 </script>
 

package/front/src/components/view/AutoViewField.vue

@@ -0,0 +1,120 @@
+<template>
+  <component v-if="fieldComponent && visible" :is="fieldComponent" v-bind="attributes" :i18n="i18n" />
+</template>
+
+<script setup>
+  import { injectComponent } from '@live-change/vue3-components'
+
+  import { computed, inject, getCurrentInstance, toRefs } from 'vue'
+  import DefaultFieldView from './DefaultFieldView.vue'
+
+  const props = defineProps({
+    name: {
+      type: String
+    },
+    label: {
+      type: String
+    },
+    value: {},
+    definition: {
+      type: Object
+    },
+    rootValue: {
+      type: Object,
+      default: () => ({})
+    },
+    propName: {
+      type: String,
+      default: ''
+    },
+    i18n: {
+      type: String,
+      default: ''
+    },
+    visibleProperties: {
+      type: Array,
+      items: {
+        type: String
+      }
+    },
+    class: {},
+    style: {},
+    attributes: {
+      type: Object,
+      default: () => ({})
+    }
+  })
+
+  const { value, definition, propName, rootValue, label, name } = toRefs(props)
+
+  const definitionIf = computed(() => {
+    if(definition.value?.if) {
+      if(definition.value?.if.function) {
+        return eval(`(${definition.value.if.function})`)
+      } else {
+        throw new Error('Unknown if type' + JSON.stringify(definition.value.if))
+      }
+    }
+    return false
+  })
+
+  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,
+        propName: props.propName
+      })
+    }
+    return true
+  })
+
+  const fieldFilter = computed(() => {
+    const filter = definition?.view?.fieldComponentFilter
+    if(filter) {
+      if(filter.function) {
+        return eval(`(${filter.function})`)
+      } else {
+        throw new Error('Unknown filter type' + JSON.stringify(filter))
+      }
+    }
+    return undefined
+  })
+
+  const fieldComponent = computed(() => injectComponent(definition.value?.view?.fieldComponentRequest ?? {
+    ...(definition.value?.view?.fieldComponentRequestProperties),
+    name: 'AutoFieldView',
+    type: definition.type ?? 'Object',
+    view: definition?.view?.name ?? definition?.view,
+    filter: fieldFilter.value
+  }, DefaultFieldView))
+
+  const fieldClass = computed(() => [definition.value?.view?.fieldClass, props.class])
+  const fieldStyle = computed(() => [definition.value?.view?.fieldStyle, props.style])
+
+  const viewClass = computed(() => [definition.value?.view?.class, props.viewClass])
+  const viewStyle = computed(() => [definition.value?.view?.style, props.viewStyle])
+
+  const attributes = computed(() => ({
+    i18n: i18n.value,
+    name: name.value,
+    label: label.value,
+    ...(definition.value?.view?.attributes),
+    ...(props.attributes),
+    value: value.value,
+    definition: definition.value,
+    class: fieldClass.value,
+    style: fieldStyle.value,
+    viewClass: viewClass.value,
+    viewStyle: viewStyle.value,
+    rootValue: rootValue.value,
+    propName: propName.value,
+  }))
+
+</script>
+
+<style scoped>
+
+</style>

package/front/src/components/view/DefaultFieldView.vue

@@ -0,0 +1,82 @@
+<template>
+  <div class="field" :class="fieldClass" :style="fieldStyle">
+    <slot name="label"
+          v-bind="{ uid, value, definition, viewClass, viewStyle, attributes, propName, rootValue, i18n }">
+      <label :for="uid">{{ t( label ) }}</label>
+    </slot>
+    <slot v-bind="{ uid, value, definition, viewClass, viewStyle, attributes, propName, rootValue, i18n }">
+      <AutoView :value="value" :definition="definition"
+                :class="viewClass" :style="viewStyle"
+                :attributes="attributes"
+                :propName="propName"
+                :rootValue="rootValue"
+                :id="uid"
+                :i18n="i18n" />
+    </slot>
+  </div>
+</template>
+
+<script setup>
+
+  import AutoView from "./AutoView.vue"
+
+  import { computed, getCurrentInstance, inject, toRefs, onMounted, ref, useId } from 'vue'
+
+  const isMounted = ref(false)
+  onMounted(() => isMounted.value = true)
+
+  import { useI18n } from 'vue-i18n'
+  const { t, rt } = useI18n()
+
+  const props = defineProps({
+    value: {},
+    definition: {
+      type: Object
+    },
+    name: {
+      type: String
+    },
+    label: {
+      type: String
+    },
+    class: {},
+    style: {},
+    viewClass: {},
+    viewStyle: {},
+    attributes: {
+      type: Object,
+      default: () => ({})
+    },
+    rootValue: {
+      type: Object,
+      default: () => ({})
+    },
+    propName: {
+      type: String,
+      default: ''
+    },
+    i18n: {
+      type: String,
+      default: ''
+    },
+  })
+
+  const instanceUid = getCurrentInstance().uid
+  const uid = useId()
+
+  const emit = defineEmits(['update:modelValue'])
+
+  const { error, definition, value } = toRefs(props)
+
+  const label = computed(() => props.i18n + (props.label || definition.value.label || props.name))
+
+  const viewClass = computed(() => [definition.value?.view?.class, props.viewClass])
+  const viewStyle = computed(() => [definition.value?.view?.style, props.viewStyle])
+  const fieldClass = computed(() => [definition.value?.view?.class, props.class])
+  const fieldStyle = computed(() => [definition.value?.view?.style, props.style])
+
+</script>
+
+<style scoped>
+
+</style>

package/front/src/components/view/JsonView.vue

@@ -0,0 +1,39 @@
+<template>
+  <div>
+    <pre>{{ JSON.stringify(value, null, 2) }}</pre>
+  </div>
+</template>
+
+<script setup>
+  import AutoViewField from "./AutoViewField.vue"
+
+  import { computed, inject, getCurrentInstance, toRefs } from 'vue'
+
+  const props = defineProps({
+    value: {},
+    definition: {
+      type: Object
+    },
+    rootValue: {
+      type: Object,
+      default: () => ({})
+    },
+    propName: {
+      type: String,
+      default: ''
+    },
+    class: {},
+    style: {},
+    i18n: {
+      type: String,
+      default: ''
+    },
+  })
+
+  const { value, definition, propName } = toRefs(props)
+
+</script>
+
+<style scoped>
+
+</style>

package/front/src/components/view/ObjectView.vue

@@ -0,0 +1,60 @@
+<template>
+  <div v-if="definition" class="grid formgrid p-fluid mt-2 mb-2">
+    <AutoViewField v-for="property in propertiesList" :key="property"
+                :value="value?.[property]"
+                :definition="definition.properties[property]"
+                :label="property"
+                :name="property"
+                :rootValue="props.rootValue" :propName="(propName ? propName + '.' : '') + property"
+                :i18n="i18n"
+                class="col-12" />
+  </div>
+</template>
+
+<script setup>
+  import AutoViewField from "./AutoViewField.vue"
+
+  import { computed, inject, getCurrentInstance, toRefs } from 'vue'
+
+  const props = defineProps({
+    value: {},
+    definition: {
+      type: Object
+    },
+    rootValue: {
+      type: Object,
+      default: () => ({})
+    },
+    propName: {
+      type: String,
+      default: ''
+    },
+    class: {},
+    style: {},
+    i18n: {
+      type: String,
+      default: ''
+    },
+    visibleProperties: {
+      type: Array,
+      items: {
+        type: String
+      }
+    }
+  })
+
+  const { value, definition, propName, visibleProperties } = toRefs(props)
+
+  const propertiesList = computed(() =>
+    visibleProperties.value ??
+    props.definition.visibleProperties ??
+    (definition.value.properties
+        ? Object.keys(definition.value.properties).filter(key => props.definition.properties[key])
+        : [])
+  )
+
+</script>
+
+<style scoped>
+
+</style>

package/package.json

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