@drax/crud-vue 0.8.6 → 0.8.11

package/package.json

@@ -3,7 +3,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "version": "0.8.6",
+  "version": "0.8.11",
   "type": "module",
   "main": "./src/index.ts",
   "module": "./src/index.ts",
@@ -25,7 +25,7 @@
   },
   "dependencies": {
     "@drax/common-front": "^0.8.3",
-    "@drax/crud-front": "^0.8.3",
+    "@drax/crud-front": "^0.8.11",
     "@drax/crud-share": "^0.8.5",
     "@drax/media-vue": "^0.8.3"
   },
@@ -64,5 +64,5 @@
     "vue-tsc": "^2.0.11",
     "vuetify": "^3.7.1"
   },
-  "gitHead": "79384008896aa7228c451b260e398a7990a2c5a6"
+  "gitHead": "4ba79d10dcadfa6756f4412fff37cec1fe9a0caf"
 }

package/src/components/CrudFilters.vue

@@ -74,6 +74,7 @@ const emit = defineEmits(['filter', 'clear','updateValue'])
                 :field="filter"
                 :entity="entity"
                 v-model="valueModel[index].value"
+                :multiple="filter?.multiple"
                 :clearable="true"
                 density="compact"
                 variant="outlined"

package/src/components/CrudFormField.vue

@@ -25,6 +25,7 @@ const {index, entity, field, disableRules, parentField} = defineProps({
   readonly: {type: Boolean, default: false},
   hideDetails: {type: Boolean, default: false},
   singleLine: {type: Boolean, default: false},
+  multiple: {type: Boolean, default: false},
   clearable: {type: Boolean, default: false},
   disableRules: {type: Boolean, default: false},
   parentField: {type: String, default: null, required: false},
@@ -154,6 +155,7 @@ defineEmits(['updateValue'])
         :append-icon="appendIcon"
         :prepend-inner-icon="prependInnerIcon"
         :append-inner-icon="appendInnerIcon"
+
     >
     </v-combobox>
 

package/src/components/CrudFormList.vue

@@ -1,11 +1,13 @@
 <script setup lang="ts">
-import type {PropType} from "vue";
+import {computed, type PropType} from "vue";
 import CrudFormField from "./CrudFormField.vue";
 import type {IEntityCrud, IEntityCrudField} from "@drax/crud-share";
+import {useI18n} from "vue-i18n";
 
+const {t, te} = useI18n()
 const valueModel = defineModel({type: Array, default: () => []});
 
-const {field} = defineProps({
+const {field, entity} = defineProps({
   entity: {type: Object as PropType<IEntityCrud>, required: true},
   field: {type: Object as PropType<IEntityCrudField>, required: true},
   readonly: {type: Boolean, default: false},
@@ -13,18 +15,24 @@ const {field} = defineProps({
   singleLine: {type: Boolean, default: false},
   clearable: {type: Boolean, default: true},
   density: {type: String as PropType<'comfortable' | 'compact' | 'default'>, default: 'default'},
-  variant: {type: String as PropType<'underlined' | 'outlined' | 'filled' | 'solo' | 'solo-inverted' | 'solo-filled' | 'plain'>, default: 'filled'},
+  variant: {
+    type: String as PropType<'underlined' | 'outlined' | 'filled' | 'solo' | 'solo-inverted' | 'solo-filled' | 'plain'>,
+    default: 'filled'
+  },
 })
 
 function newItem() {
-  return field.objectFields ? field.objectFields.reduce((acc, field) => ({...acc, [field.name]: field.default }), {}) : []
+  return field.objectFields ? field.objectFields.reduce((acc, field) => ({
+    ...acc,
+    [field.name]: field.default
+  }), {}) : []
 }
 
-function getField(key: string):IEntityCrudField|undefined {
+function getField(key: string): IEntityCrudField | undefined {
   return field.objectFields ? field.objectFields.find(field => field.name === key) : undefined;
 }
 
-function hasField(key: string):boolean {
+function hasField(key: string): boolean {
   return field.objectFields ? field.objectFields.some(field => field.name === key) : false;
 }
 
@@ -36,6 +44,11 @@ function removeItem(index: number) {
   valueModel.value.splice(index, 1);
 }
 
+const label = computed(() => {
+  const i18n = `${entity.name.toLowerCase()}.field.${field.label ? field.label : field.name}`
+  return te(i18n) ? t(i18n) : field.label
+})
+
 defineEmits(['updateValue'])
 
 </script>
@@ -43,45 +56,50 @@ defineEmits(['updateValue'])
 <template>
   <v-card class="mt-3" variant="flat" border>
 
-    <v-card-title class="text-h5">{{field.label}}</v-card-title>
+    <v-card-title class="text-h5">{{ label }}</v-card-title>
     <v-card-text>
-      <v-row>
-        <v-col cols="12" v-for="(item,index) in valueModel" :key="index" >
-          <v-row dense align="center">
-            <v-col cols="11">
-              <template v-for="key in Object.keys(item as Record<string, any>)" :key="key">
-                <crud-form-field
-                    v-if="hasField(key)"
-                    :entity="entity"
-                    :field="getField(key)"
-                    v-model="(valueModel[index] as any)[key]"
-                    :readonly="readonly"
-                    :parentField="field.name"
-                    :index="index"
-                    :density="density"
-                    :variant="variant"
-                    :clearable="clearable"
-                    :hide-details="hideDetails"
-                    :single-line="singleLine"
-                    @updateValue="$emit('updateValue')"
-                />
-              </template>
-
-            </v-col>
-            <v-col cols="1">
-              <v-btn v-if="!readonly" icon @click="removeItem(index)" small class="text-red text--darken-3">
+      <v-expansion-panels>
+        <v-expansion-panel v-for="(item,index) in valueModel" :key="index">
+
+          <v-expansion-panel-title>
+            {{ index }} - {{valueModel[index][Object.keys(valueModel[index] as any)[0]]}}
+
+            <template v-slot:actions="{expanded}">
+              <v-icon>{{expanded ? "mdi-menu-down" : "mdi-menu-up"}}</v-icon>
+
+              <v-btn v-if="!readonly" variant="text" @click="removeItem(index)" density="compact"  class="text-red text--darken-3">
                 <v-icon>mdi-close</v-icon>
               </v-btn>
-            </v-col>
-          </v-row>
-          <v-divider></v-divider>
-
-        </v-col>
-        <v-btn  icon @click="addItem" class="text-blue text--darken-3">
+            </template>
+
+          </v-expansion-panel-title>
+
+          <v-expansion-panel-text>
+            <template v-for="key in Object.keys(item as Record<string, any>)" :key="key">
+              <crud-form-field
+                  v-if="hasField(key)"
+                  :entity="entity"
+                  :field="getField(key)"
+                  v-model="(valueModel[index] as any)[key]"
+                  :readonly="readonly"
+                  :parentField="field.name"
+                  :index="index"
+                  :density="density"
+                  :variant="variant"
+                  :clearable="clearable"
+                  :hide-details="hideDetails"
+                  :single-line="singleLine"
+                  @updateValue="$emit('updateValue')"
+              />
+            </template>
+          </v-expansion-panel-text>
+
+        </v-expansion-panel>
+        <v-btn icon @click="addItem" class="text-blue text--darken-3">
           <v-icon>mdi-plus</v-icon>
         </v-btn>
 
-      </v-row>
+      </v-expansion-panels>
     </v-card-text>