Merge pull request #79 from what-crud/29-add_multiselect_field_type

29 add multiselect field type
what-crud · Nov 14, 2019 · 95a08c7 · 95a08c7
2 parents afa35ae + 7577165
commit 95a08c7
Show file tree

Hide file tree

Showing 16 changed files with 881 additions and 404 deletions.
diff --git a/README.md b/README.md
@@ -4,7 +4,7 @@
 <h1 align="center">Vue CRUD</h1>
 <div align="center">
   <a><img alt="license" src="https://img.shields.io/badge/license-MIT-brightgreen.svg"></a>
-  <a><img alt="version" src="https://img.shields.io/badge/version-v0.15.0-yellow.svg"></a>
+  <a><img alt="version" src="https://img.shields.io/badge/version-v0.15.1-yellow.svg"></a>
   <a><img alt="build" src="https://travis-ci.org/what-crud/vue-crud.svg?branch=master"></a>
   <a><img alt="PRs" src="https://img.shields.io/badge/PRs-welcome-brightgreen.svg"></a>
 </div>
@@ -78,7 +78,8 @@ The record creation / editing form supports the following types of fields:
 * Timepicker,
 * Checkbox,
 * Files,
-* **NEW!** Dynamic (user can select field type separately for each record)
+* **NEW!** Dynamic (user can select field type separately for each record),
+* **NEW!** Custom (with slots)
 
 ## Support for mobile devices
 

diff --git a/docs/.vuepress/config.js b/docs/.vuepress/config.js
@@ -130,6 +130,7 @@ module.exports = {
             '/guide/crud/custom-configuration',
             '/guide/crud/field-options',
             '/guide/crud/items-view',
+            '/guide/crud/item-details',
             '/guide/crud/extended-details',
             '/guide/crud/item-elements',
           ]

diff --git a/docs/guide/crud/item-details.md b/docs/guide/crud/item-details.md
@@ -0,0 +1,118 @@
+# Item details
+
+Item details form is a modal dialog that shows when user click for create or edit selected item. This component is an integral part of `crud` component but you can customize it if you wish. 
+You can achieve it using the slots:
+
+``` html
+<template>
+  <crud
+    :prefix="prefix"
+    :path="path"
+    :page-title="pageTitle"
+    :fields-info="fieldsInfo"
+    :details-title="$t('detailsTitle')"
+  >
+
+    <!-- Example of slot usage: -->
+    <template #item-details-under-fields>
+      Lorem ipsum...
+    </template>
+
+  </crud>
+</template>
+```
+
+## Slots
+
+### **item-details-title**
+
+Slot for dialog title.
+
+Slot scope: { title }
+
+Default template:
+
+```html
+<v-card-title
+    class="headline"
+>
+    {{ details.action == 'multiedit' ? $t('global.details.multipleUpdateTitle') : title }}
+</v-card-title>
+```
+
+Example:
+```html
+<template #item-details-title="{ title }">
+    {{ title }}
+</template>
+```
+
+### **item-details-over-fields**
+
+Slot for content over the item fields.
+
+Slot scope: {}
+
+Example:
+```html
+<template #item-details-over-fields>
+    Lorem ipsum...
+</template>
+```
+
+### **item-details-field:[name]**
+
+Dynamic slot for selected field.
+
+Slot scope: {
+    value,
+    fieldType,
+    field,
+    reload,
+    rules,
+    changeValue,
+}
+
+Example:
+```html
+<template #item-details-field:name="{ value, changeValue }">
+    <input
+        style="border: 1px solid black"
+        v-model="value"
+        @change="changeValue(value)"
+    />
+</template>
+<template #item-details-field:code="{ value, changeValue }">
+    <input
+        style="border: 1px solid black; color: white; background-color: red;"
+        v-model="value"
+        @change="changeValue(value)"
+    />
+</template>
+```
+
+### **item-details-under-fields**
+
+Slot for content under the item fields.
+
+Slot scope: {}
+
+Example:
+```html
+<template #item-details-under-fields>
+    Lorem ipsum...
+</template>
+```
+
+### **item-details-custom-actions**
+
+Slot for custom actions.
+
+Slot scope: {}
+
+Example:
+```html
+<template #item-details-custom-actions>
+    <button>Custom action</button>
+</template>
+```
diff --git a/docs/guide/essentials/introduction.md b/docs/guide/essentials/introduction.md
@@ -71,7 +71,8 @@ The record creation / editing form supports the following types of fields:
 * Timepicker,
 * Checkbox,
 * Files,
-* **NEW!** Dynamic (user can select field type separately for each record)
+* **NEW!** Dynamic (user can select field type separately for each record),
+* **NEW!** Custom (with slots)
 
 ## Support for mobile devices
 

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "vue-crud",
-  "version": "0.15.0",
+  "version": "0.15.1",
   "description": "Vue CRUD",
   "author": "Szczepan Masny <szczepanmasny@gmail.com>",
   "license": "MIT",

diff --git a/src/utils/crud/components/Crud.vue b/src/utils/crud/components/Crud.vue
@@ -26,13 +26,70 @@
         :title="detailsTitle"
         :details-fields="detailsFields"
         :width="itemDetailsWidth"
-      ></item-details>
+      >
+        <!-- slot for item details title -->
+        <template #title="{ title }">
+          <slot
+            name="item-details-title"
+            :title="title"
+          />
+        </template>
+
+        <!-- slot over fields -->
+        <template #over-fields>
+          <slot name="item-details-over-fields"/>
+        </template>
+
+        <!-- slots for fields -->
+        <template
+          v-for="field in detailsFields"
+          #[`field:${field.name}`]="{
+            value,
+            fieldType,
+            field,
+            reload,
+            rules,
+            changeValue,
+          }"
+        >
+          <slot
+            :name="`item-details-field:${field.name}`"
+            :value="value"
+            :field-type="fieldType"
+            :field="field"
+            :reload="reload"
+            :rules="rules"
+            :change-value="changeValue"
+          />
+        </template>
+
+        <!-- slot under fields -->
+        <template #under-fields>
+          <slot name="item-details-under-fields"/>
+        </template>
+
+        <!-- slot for custom actions -->
+        <template #custom-actions>
+          <slot name="item-details-custom-actions"/>
+        </template>
+
+      </item-details>
       <item-elements></item-elements>
       <image-container></image-container>
     </div>
     <div class="details-loader-container">
-      <v-layout v-if="detailsLoading" class="details-loader" justify-center align-center>
-        <v-progress-circular indeterminate :size="100" :width="3" color="primary"></v-progress-circular>
+      <v-layout
+        v-if="detailsLoading"
+        class="details-loader"
+        justify-center
+        align-center
+      >
+        <v-progress-circular
+          indeterminate
+          :size="100"
+          :width="3"
+          color="primary"
+        ></v-progress-circular>
       </v-layout>
     </div>
   </div>
@@ -103,7 +160,7 @@ export default {
     },
     itemElements: {
       type: Object,
-      default: () => {},
+      default: () => { },
     },
     watchForCreation: {
       type: Boolean,
@@ -272,17 +329,17 @@ export default {
 </script>
 
 <style scoped>
-  .details-loader-container {
-    position: absolute;
-    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%;
-    display: inline-block;
-  }
+.details-loader-container {
+  position: absolute;
+  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%;
+  display: inline-block;
+}
 </style>
diff --git a/src/utils/crud/components/ItemDetails.vue b/src/utils/crud/components/ItemDetails.vue
@@ -6,13 +6,19 @@
     no-click-animation
   >
     <v-card>
-      <v-card-title
-        class="headline"
+      <slot
+        name="title"
+        :title="title"
       >
-        {{ details.action == 'multiedit' ? $t('global.details.multipleUpdateTitle') : title }}
-      </v-card-title>
+        <v-card-title
+          class="headline"
+        >
+          {{ details.action == 'multiedit' ? $t('global.details.multipleUpdateTitle') : title }}
+        </v-card-title>
+      </slot>
       <v-form v-model="details.formValid">
         <v-card-text class="details-list">
+          <slot name="over-fields" />
           <div
             v-for="(field, i) in fields"
             :key="i"
@@ -34,13 +40,36 @@
                   :field-value="field.value"
                   :reload="reload"
                   @valueChanged="valueChanged"
-                />
+                >
+                  <template
+                    #default="{
+                      value,
+                      fieldType,
+                      field,
+                      reload,
+                      rules,
+                      changeValue,
+                    }"
+                  >
+                    <slot
+                      :name="`field:${field.name}`"
+                      :value="value"
+                      :field-type="fieldType"
+                      :field="field"
+                      :reload="reload"
+                      :rules="rules"
+                      :change-value="changeValue"
+                    />
+                  </template>
+                </item-details-field>
               </v-flex>
             </v-layout>
           </div>
+          <slot name="under-fields" />
         </v-card-text>
         <v-card-actions>
           <v-spacer></v-spacer>
+          <slot name="custom-actions" />
           <v-btn color="black" text @click.native="close()">{{ $t('global.details.buttons.close') }}</v-btn>
           <v-btn
             :disabled="!details.formValid"