Skip to content

Commit 95a08c7

Browse files
szczepanmasnyszczepanmasny
authored
Merge pull request #79 from what-crud/29-add_multiselect_field_type
29 add multiselect field type
2 parents afa35ae + 7577165 commit 95a08c7

File tree

16 files changed

+881
-404
lines changed

16 files changed

+881
-404
lines changed

‎README.md

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
<h1 align="center">Vue CRUD</h1>
55
<div align="center">
66
<a><img alt="license" src="https://img.shields.io/badge/license-MIT-brightgreen.svg"></a>
7-
<a><img alt="version" src="https://img.shields.io/badge/version-v0.15.0-yellow.svg"></a>
7+
<a><img alt="version" src="https://img.shields.io/badge/version-v0.15.1-yellow.svg"></a>
88
<a><img alt="build" src="https://travis-ci.org/what-crud/vue-crud.svg?branch=master"></a>
99
<a><img alt="PRs" src="https://img.shields.io/badge/PRs-welcome-brightgreen.svg"></a>
1010
</div>
@@ -78,7 +78,8 @@ The record creation / editing form supports the following types of fields:
7878
* Timepicker,
7979
* Checkbox,
8080
* Files,
81-
* **NEW!** Dynamic (user can select field type separately for each record)
81+
* **NEW!** Dynamic (user can select field type separately for each record),
82+
* **NEW!** Custom (with slots)
8283

8384
## Support for mobile devices
8485

‎docs/.vuepress/config.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -130,6 +130,7 @@ module.exports = {
130130
'/guide/crud/custom-configuration',
131131
'/guide/crud/field-options',
132132
'/guide/crud/items-view',
133+
'/guide/crud/item-details',
133134
'/guide/crud/extended-details',
134135
'/guide/crud/item-elements',
135136
]

‎docs/guide/crud/item-details.md

Lines changed: 118 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,118 @@
1+
# Item details
2+
3+
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.
4+
You can achieve it using the slots:
5+
6+
``` html
7+
<template>
8+
<crud
9+
:prefix="prefix"
10+
:path="path"
11+
:page-title="pageTitle"
12+
:fields-info="fieldsInfo"
13+
:details-title="$t('detailsTitle')"
14+
>
15+
16+
<!-- Example of slot usage: -->
17+
<template #item-details-under-fields>
18+
Lorem ipsum...
19+
</template>
20+
21+
</crud>
22+
</template>
23+
```
24+
25+
## Slots
26+
27+
### **item-details-title**
28+
29+
Slot for dialog title.
30+
31+
Slot scope: { title }
32+
33+
Default template:
34+
35+
```html
36+
<v-card-title
37+
class="headline"
38+
>
39+
{{ details.action == 'multiedit' ? $t('global.details.multipleUpdateTitle') : title }}
40+
</v-card-title>
41+
```
42+
43+
Example:
44+
```html
45+
<template #item-details-title="{ title }">
46+
{{ title }}
47+
</template>
48+
```
49+
50+
### **item-details-over-fields**
51+
52+
Slot for content over the item fields.
53+
54+
Slot scope: {}
55+
56+
Example:
57+
```html
58+
<template #item-details-over-fields>
59+
Lorem ipsum...
60+
</template>
61+
```
62+
63+
### **item-details-field:[name]**
64+
65+
Dynamic slot for selected field.
66+
67+
Slot scope: {
68+
value,
69+
fieldType,
70+
field,
71+
reload,
72+
rules,
73+
changeValue,
74+
}
75+
76+
Example:
77+
```html
78+
<template #item-details-field:name="{ value, changeValue }">
79+
<input
80+
style="border: 1px solid black"
81+
v-model="value"
82+
@change="changeValue(value)"
83+
/>
84+
</template>
85+
<template #item-details-field:code="{ value, changeValue }">
86+
<input
87+
style="border: 1px solid black; color: white; background-color: red;"
88+
v-model="value"
89+
@change="changeValue(value)"
90+
/>
91+
</template>
92+
```
93+
94+
### **item-details-under-fields**
95+
96+
Slot for content under the item fields.
97+
98+
Slot scope: {}
99+
100+
Example:
101+
```html
102+
<template #item-details-under-fields>
103+
Lorem ipsum...
104+
</template>
105+
```
106+
107+
### **item-details-custom-actions**
108+
109+
Slot for custom actions.
110+
111+
Slot scope: {}
112+
113+
Example:
114+
```html
115+
<template #item-details-custom-actions>
116+
<button>Custom action</button>
117+
</template>
118+
```

‎docs/guide/essentials/introduction.md

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -71,7 +71,8 @@ The record creation / editing form supports the following types of fields:
7171
* Timepicker,
7272
* Checkbox,
7373
* Files,
74-
* **NEW!** Dynamic (user can select field type separately for each record)
74+
* **NEW!** Dynamic (user can select field type separately for each record),
75+
* **NEW!** Custom (with slots)
7576

7677
## Support for mobile devices
7778

‎package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "vue-crud",
3-
"version": "0.15.0",
3+
"version": "0.15.1",
44
"description": "Vue CRUD",
55
"author": "Szczepan Masny <[email protected]>",
66
"license": "MIT",

‎src/utils/crud/components/Crud.vue

Lines changed: 74 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -26,13 +26,70 @@
2626
:title="detailsTitle"
2727
:details-fields="detailsFields"
2828
:width="itemDetailsWidth"
29-
></item-details>
29+
>
30+
<!-- slot for item details title -->
31+
<template #title="{ title }">
32+
<slot
33+
name="item-details-title"
34+
:title="title"
35+
/>
36+
</template>
37+
38+
<!-- slot over fields -->
39+
<template #over-fields>
40+
<slot name="item-details-over-fields"/>
41+
</template>
42+
43+
<!-- slots for fields -->
44+
<template
45+
v-for="field in detailsFields"
46+
#[`field:${field.name}`]="{
47+
value,
48+
fieldType,
49+
field,
50+
reload,
51+
rules,
52+
changeValue,
53+
}"
54+
>
55+
<slot
56+
:name="`item-details-field:${field.name}`"
57+
:value="value"
58+
:field-type="fieldType"
59+
:field="field"
60+
:reload="reload"
61+
:rules="rules"
62+
:change-value="changeValue"
63+
/>
64+
</template>
65+
66+
<!-- slot under fields -->
67+
<template #under-fields>
68+
<slot name="item-details-under-fields"/>
69+
</template>
70+
71+
<!-- slot for custom actions -->
72+
<template #custom-actions>
73+
<slot name="item-details-custom-actions"/>
74+
</template>
75+
76+
</item-details>
3077
<item-elements></item-elements>
3178
<image-container></image-container>
3279
</div>
3380
<div class="details-loader-container">
34-
<v-layout v-if="detailsLoading" class="details-loader" justify-center align-center>
35-
<v-progress-circular indeterminate :size="100" :width="3" color="primary"></v-progress-circular>
81+
<v-layout
82+
v-if="detailsLoading"
83+
class="details-loader"
84+
justify-center
85+
align-center
86+
>
87+
<v-progress-circular
88+
indeterminate
89+
:size="100"
90+
:width="3"
91+
color="primary"
92+
></v-progress-circular>
3693
</v-layout>
3794
</div>
3895
</div>
@@ -103,7 +160,7 @@ export default {
103160
},
104161
itemElements: {
105162
type: Object,
106-
default: () => {},
163+
default: () => { },
107164
},
108165
watchForCreation: {
109166
type: Boolean,
@@ -272,17 +329,17 @@ export default {
272329
</script>
273330

274331
<style scoped>
275-
.details-loader-container {
276-
position: absolute;
277-
top:200px;
278-
text-align: center;
279-
width: 100%;
280-
}
281-
.details-loader {
282-
height:100px !important;
283-
width:100px;
284-
background-color:rgba(255, 255, 255, 0.6);
285-
border-radius:100%;
286-
display: inline-block;
287-
}
332+
.details-loader-container {
333+
position: absolute;
334+
top: 200px;
335+
text-align: center;
336+
width: 100%;
337+
}
338+
.details-loader {
339+
height: 100px !important;
340+
width: 100px;
341+
background-color: rgba(255, 255, 255, 0.6);
342+
border-radius: 100%;
343+
display: inline-block;
344+
}
288345
</style>

‎src/utils/crud/components/ItemDetails.vue

Lines changed: 34 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -6,13 +6,19 @@
66
no-click-animation
77
>
88
<v-card>
9-
<v-card-title
10-
class="headline"
9+
<slot
10+
name="title"
11+
:title="title"
1112
>
12-
{{ details.action == 'multiedit' ? $t('global.details.multipleUpdateTitle') : title }}
13-
</v-card-title>
13+
<v-card-title
14+
class="headline"
15+
>
16+
{{ details.action == 'multiedit' ? $t('global.details.multipleUpdateTitle') : title }}
17+
</v-card-title>
18+
</slot>
1419
<v-form v-model="details.formValid">
1520
<v-card-text class="details-list">
21+
<slot name="over-fields" />
1622
<div
1723
v-for="(field, i) in fields"
1824
:key="i"
@@ -34,13 +40,36 @@
3440
:field-value="field.value"
3541
:reload="reload"
3642
@valueChanged="valueChanged"
37-
/>
43+
>
44+
<template
45+
#default="{
46+
value,
47+
fieldType,
48+
field,
49+
reload,
50+
rules,
51+
changeValue,
52+
}"
53+
>
54+
<slot
55+
:name="`field:${field.name}`"
56+
:value="value"
57+
:field-type="fieldType"
58+
:field="field"
59+
:reload="reload"
60+
:rules="rules"
61+
:change-value="changeValue"
62+
/>
63+
</template>
64+
</item-details-field>
3865
</v-flex>
3966
</v-layout>
4067
</div>
68+
<slot name="under-fields" />
4169
</v-card-text>
4270
<v-card-actions>
4371
<v-spacer></v-spacer>
72+
<slot name="custom-actions" />
4473
<v-btn color="black" text @click.native="close()">{{ $t('global.details.buttons.close') }}</v-btn>
4574
<v-btn
4675
:disabled="!details.formValid"

0 commit comments

Comments
 (0)