@drax/crud-vue 0.8.5 → 0.8.9

package/package.json

@@ -3,7 +3,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "version": "0.8.5",
+  "version": "0.8.9",
   "type": "module",
   "main": "./src/index.ts",
   "module": "./src/index.ts",
@@ -64,5 +64,5 @@
     "vue-tsc": "^2.0.11",
     "vuetify": "^3.7.1"
   },
-  "gitHead": "df40172e28cb654c26d622d16d6aef53e2db8a78"
+  "gitHead": "f2dabb089baefb07ef5ae752acaa142e7cb235c2"
 }

package/src/components/Crud.vue

@@ -75,7 +75,14 @@ onBeforeMount(() => {
             :readonly="operation === 'delete'"
             @submit="onSubmit"
             @cancel="onCancel"
-        />
+        >
+
+          <template v-for="ifield in entity.fields" :key="ifield.name" v-slot:[`field.${ifield.name}`]="{field}">
+            <slot :name="`field.${ifield.name}`" v-bind="{field}">
+            </slot>
+          </template>
+
+        </crud-form>
       </slot>
 
     </crud-dialog>

package/src/components/CrudForm.vue

@@ -93,18 +93,21 @@ const {
               :lg="field.lg ? field.lg : 12"
               :xl="field.xl ? field.xl : 12"
           >
-            <crud-form-field
-                :field="field"
-                :entity="entity"
-                v-model="valueModel[field.name]"
-                :clearable="false"
-                :readonly="readonly"
-                :variant="variant"
-                :prepend-inner-icon="field?.prependInnerIcon"
-                :prepend-icon="field?.prependIcon"
-                :append-icon="field?.appendIcon"
-                :append-inner-icon="field?.appendInnerIcon"
-            />
+            <slot :name="`field.${field.name}`" v-bind="{field}">
+              <crud-form-field
+                  :field="field"
+                  :entity="entity"
+                  v-model="valueModel[field.name]"
+                  :clearable="false"
+                  :readonly="readonly"
+                  :variant="variant"
+                  :prepend-inner-icon="field?.prependInnerIcon"
+                  :prepend-icon="field?.prependIcon"
+                  :append-icon="field?.appendIcon"
+                  :append-inner-icon="field?.appendInnerIcon"
+              />
+            </slot>
+
           </v-col>
         </v-row>
       </v-card-text>

package/src/components/CrudFormList.vue

@@ -13,18 +13,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;
 }
 
@@ -43,45 +49,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">{{ field.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>