28 add slots for table fields

Author: szczepanmasny

src/utils/crud/components/ChildrenTable.vue

@@ -73,10 +73,16 @@
             @doubleClick="resolveRowDoubleClick"
           />
           <span v-else>
-            <list-item-field
+            <slot
+              :name="`field:${header.value}`"
               :value="item[header.value]"
-              :text-mode="textMode(item, header.value)"
-            />
+              :item="item"
+            >
+              <list-item-field
+                :value="item[header.value]"
+                :text-mode="textMode(item, header.value)"
+              />
+            </slot>
           </span>
         </span>
       </template>
@@ -170,7 +176,7 @@ export default {
     },
     itemElements: {
       type: Object,
-      default: () => {},
+      default: () => { },
     },
     meta: {
       type: Array,
@@ -278,15 +284,15 @@ export default {
 }
 .details-loader-container {
   position: absolute;
-  top:200px;
+  top: 200px;
   text-align: center;
   width: 100%;
 }
 .details-loader {
-  height:100px !important;
-  width:100px;
-  background-color:rgba(255, 255, 255, 0.6);
-  border-radius:100%;
+  height: 100px !important;
+  width: 100px;
+  background-color: rgba(255, 255, 255, 0.6);
+  border-radius: 100%;
   display: inline-block;
 }
 </style>

src/utils/crud/components/Crud.vue

@@ -21,7 +21,19 @@
         :select-many-mode="selectManyMode"
         :update-many-mode="updateManyMode"
         :remove-many-mode="removeManyMode"
-      ></component>
+      >
+        <!-- slots for fields -->
+        <template
+          v-for="field in tableFields"
+          #[`field:${field.name}`]="{ value, item }"
+        >
+          <slot
+            :name="`list-item-field:${field.name}`"
+            :item="item"
+            :value="value"
+          />
+        </template>
+      </component>
       <item-details
         :title="detailsTitle"
         :details-fields="detailsFields"

src/utils/crud/components/CrudTableClientMode.vue

@@ -69,10 +69,16 @@
             @doubleClick="resolveRowDoubleClick"
           />
           <span v-else>
-            <list-item-field
+            <slot
+              :name="`field:${header.value}`"
               :value="item[header.value]"
-              :text-mode="textMode(item, header.value)"
-            />
+              :item="item"
+            >
+              <list-item-field
+                :value="item[header.value]"
+                :text-mode="textMode(item, header.value)"
+              />
+            </slot>
           </span>
         </span>
       </template>

src/utils/crud/components/CrudTableServerMode.vue

@@ -71,10 +71,16 @@
             @doubleClick="resolveRowDoubleClick"
           />
           <span v-else>
-            <list-item-field
+            <slot
+              :name="`field:${header.value}`"
               :value="item[header.value]"
-              :text-mode="textMode(item, header.value)"
-            />
+              :item="item"
+            >
+              <list-item-field
+                :value="item[header.value]"
+                :text-mode="textMode(item, header.value)"
+              />
+            </slot>
           </span>
         </span>
       </template>

src/utils/crud/components/CrudTreeClientMode.vue

@@ -129,10 +129,16 @@
             </v-col>
             <v-col>
               <span class="tree-item__field-value">
-                <list-item-field
-                  :value="field.value"
-                  :text-mode="textMode(item, key)"
-                />
+                <slot
+                  :name="`field:${header.value}`"
+                  :value="item[header.value]"
+                  :item="item"
+                >
+                  <list-item-field
+                    :value="item[header.value]"
+                    :text-mode="textMode(item, header.value)"
+                  />
+                </slot>
               </span>
             </v-col>
           </v-row>