@afeefa/vue-app 0.0.225 → 0.0.227
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1 +1 @@
|
|
1
|
-
0.0.
|
1
|
+
0.0.227
|
package/package.json
CHANGED
@@ -5,6 +5,7 @@
|
|
5
5
|
:items="items_"
|
6
6
|
:valueComparator="compareValues"
|
7
7
|
:style="cwm_widthStyle"
|
8
|
+
:multiple="multiple"
|
8
9
|
v-bind="{...$attrs, dense, outlined}"
|
9
10
|
v-on="$listeners"
|
10
11
|
/>
|
@@ -17,7 +18,7 @@ import { Model } from '@afeefa/api-resources-client'
|
|
17
18
|
import { ComponentWidthMixin } from './mixins/ComponentWidthMixin'
|
18
19
|
|
19
20
|
@Component({
|
20
|
-
props: ['validator', 'defaultValue', 'items', {dense: true, outlined: true}]
|
21
|
+
props: ['validator', 'defaultValue', 'items', {dense: true, outlined: true, multiple: false}]
|
21
22
|
})
|
22
23
|
export default class ASelect extends Mixins(ComponentWidthMixin) {
|
23
24
|
items_ = []
|
@@ -34,7 +35,11 @@ export default class ASelect extends Mixins(ComponentWidthMixin) {
|
|
34
35
|
const setValue = this.select.setValue
|
35
36
|
this.select.setValue = value => {
|
36
37
|
if (this.select.isClear) {
|
37
|
-
|
38
|
+
if (this.multiple) {
|
39
|
+
value = this.defaultValue || []
|
40
|
+
} else {
|
41
|
+
value = this.defaultValue || null
|
42
|
+
}
|
38
43
|
}
|
39
44
|
setValue(value)
|
40
45
|
}
|
@@ -98,6 +103,14 @@ export default class ASelect extends Mixins(ComponentWidthMixin) {
|
|
98
103
|
</script>
|
99
104
|
|
100
105
|
|
106
|
+
<style lang="scss">
|
107
|
+
.v-application .v-select-list .v-list-item__action {
|
108
|
+
margin: 0;
|
109
|
+
margin-right: .5rem;
|
110
|
+
}
|
111
|
+
|
112
|
+
</style>
|
113
|
+
|
101
114
|
<style lang="scss" scoped>
|
102
115
|
.v-text-field :deep(.v-input__icon--clear) { // always show clear icon, https://github.com/vuetifyjs/vuetify/pull/15876
|
103
116
|
opacity: 1;
|
@@ -5,7 +5,8 @@
|
|
5
5
|
:items="_items"
|
6
6
|
itemText="itemTitle"
|
7
7
|
itemValue="itemValue"
|
8
|
-
:
|
8
|
+
:multiple="filter.multiple"
|
9
|
+
:clearable="clearable"
|
9
10
|
:defaultValue="filter.defaultValue"
|
10
11
|
hide-details
|
11
12
|
v-bind="$attrs"
|
@@ -25,6 +26,10 @@ export default class ListFilterSelect extends Mixins(ListFilterMixin) {
|
|
25
26
|
items = null
|
26
27
|
|
27
28
|
created () {
|
29
|
+
if (this.filter.multiple && !this.filter.value) {
|
30
|
+
this.filter.value = []
|
31
|
+
}
|
32
|
+
|
28
33
|
if (this.filter.hasOptionsRequest()) {
|
29
34
|
this.items = this.loadRequestOptions()
|
30
35
|
} else if (this.filter.hasOptions()) {
|
@@ -32,6 +37,18 @@ export default class ListFilterSelect extends Mixins(ListFilterMixin) {
|
|
32
37
|
}
|
33
38
|
}
|
34
39
|
|
40
|
+
get clearable () {
|
41
|
+
if (this.multiple) {
|
42
|
+
return !!this.filter.value?.length
|
43
|
+
}
|
44
|
+
|
45
|
+
if (this.filter.hasDefaultValue()) {
|
46
|
+
return !this.filter.hasDefaultValueSet()
|
47
|
+
}
|
48
|
+
|
49
|
+
return !!this.filter.value
|
50
|
+
}
|
51
|
+
|
35
52
|
get _items () {
|
36
53
|
return this.$attrs.items || this.items || []
|
37
54
|
}
|
@@ -32,6 +32,8 @@
|
|
32
32
|
<div class="a-table-wrapper">
|
33
33
|
<a-table>
|
34
34
|
<a-table-header>
|
35
|
+
<div v-if="bulkselection" />
|
36
|
+
|
35
37
|
<div v-if="$has.icon">
|
36
38
|
<slot name="header-icon" />
|
37
39
|
</div>
|
@@ -39,29 +41,67 @@
|
|
39
41
|
<slot name="header-table" />
|
40
42
|
</a-table-header>
|
41
43
|
|
42
|
-
<
|
43
|
-
|
44
|
-
|
45
|
-
|
46
|
-
|
47
|
-
|
48
|
-
|
49
|
-
|
50
|
-
|
51
|
-
|
52
|
-
|
53
|
-
|
54
|
-
|
55
|
-
|
56
|
-
|
57
|
-
|
58
|
-
|
59
|
-
|
60
|
-
|
61
|
-
|
62
|
-
|
63
|
-
|
64
|
-
|
44
|
+
<template v-for="(model, index) in models_">
|
45
|
+
<a-table-row
|
46
|
+
:key="'model' + model.id"
|
47
|
+
v-flying-context-trigger="hasFlyingContext"
|
48
|
+
:class="[
|
49
|
+
getRowClasses(model),
|
50
|
+
{ hasSubModels: !!getSubModels(model).length }
|
51
|
+
]"
|
52
|
+
v-bind="getRowAttributes(model)"
|
53
|
+
v-on="getRowListeners(model)"
|
54
|
+
@click="emitFlyingContext(model)"
|
55
|
+
>
|
56
|
+
<div
|
57
|
+
v-if="bulkselection"
|
58
|
+
class="pr-2"
|
59
|
+
>
|
60
|
+
<a-checkbox
|
61
|
+
:value="isSelected(model)"
|
62
|
+
hide-details
|
63
|
+
class="pa-0"
|
64
|
+
@input="selectClient(model)"
|
65
|
+
/>
|
66
|
+
</div>
|
67
|
+
|
68
|
+
<v-icon
|
69
|
+
v-if="$has.icon"
|
70
|
+
:color="model.getIcon().color"
|
71
|
+
size="1.2rem"
|
72
|
+
v-text="model.getIcon().icon"
|
73
|
+
/>
|
74
|
+
|
75
|
+
<slot
|
76
|
+
name="model-table"
|
77
|
+
:model="model"
|
78
|
+
:index="index"
|
79
|
+
:filters="filters"
|
80
|
+
/>
|
81
|
+
</a-table-row>
|
82
|
+
|
83
|
+
<a-table-row
|
84
|
+
v-for="(subModel, subIndex) in getSubModels(model)"
|
85
|
+
:key="subModel.id"
|
86
|
+
small
|
87
|
+
:class="{
|
88
|
+
...getRowClasses(model),
|
89
|
+
last: subIndex === getSubModels(model).length - 1,
|
90
|
+
subModel: true
|
91
|
+
}"
|
92
|
+
>
|
93
|
+
<div v-if="bulkselection" />
|
94
|
+
|
95
|
+
<div v-if="$has.icon" />
|
96
|
+
|
97
|
+
<slot
|
98
|
+
name="subModel-table"
|
99
|
+
:model="subModel"
|
100
|
+
:index="subIndex"
|
101
|
+
:filters="filters"
|
102
|
+
/>
|
103
|
+
</a-table-row>
|
104
|
+
</template>
|
65
105
|
</a-table>
|
66
106
|
</div>
|
67
107
|
</template>
|
@@ -122,7 +162,17 @@ import { ListViewMixin } from '@a-vue/components/list/ListViewMixin'
|
|
122
162
|
import { LoadingEvent } from '@a-vue/events'
|
123
163
|
|
124
164
|
@Component({
|
125
|
-
props: [
|
165
|
+
props: [
|
166
|
+
'rowAttributes',
|
167
|
+
'rowClasses',
|
168
|
+
'rowListeners',
|
169
|
+
{
|
170
|
+
bulkselection: false,
|
171
|
+
getSubModels: {
|
172
|
+
default: () => model => []
|
173
|
+
}
|
174
|
+
}
|
175
|
+
]
|
126
176
|
})
|
127
177
|
export default class ListView extends Mixins(ListViewMixin) {
|
128
178
|
$hasOptions = ['icon', 'filters']
|
@@ -134,6 +184,20 @@ export default class ListView extends Mixins(ListViewMixin) {
|
|
134
184
|
scrollTopStart = null
|
135
185
|
scrollContainerY = null
|
136
186
|
|
187
|
+
selectedModels = []
|
188
|
+
|
189
|
+
isSelected (model) {
|
190
|
+
return this.selectedModels.includes(model)
|
191
|
+
}
|
192
|
+
|
193
|
+
selectClient (model) {
|
194
|
+
if (!this.isSelected(model)) {
|
195
|
+
this.selectedModels.push(model)
|
196
|
+
} else {
|
197
|
+
this.selectedModels = this.selectedModels.filter(m => m !== model)
|
198
|
+
}
|
199
|
+
}
|
200
|
+
|
137
201
|
@Watch('isLoading')
|
138
202
|
isLoadingChanged () {
|
139
203
|
if (this.events) {
|
@@ -308,4 +372,19 @@ filters-below:not(:empty) {
|
|
308
372
|
.a-table-row.clickable {
|
309
373
|
cursor: pointer;
|
310
374
|
}
|
375
|
+
|
376
|
+
:deep(.a-table-row.hasSubModels) > * {
|
377
|
+
padding-bottom: 0;
|
378
|
+
border: none;
|
379
|
+
}
|
380
|
+
|
381
|
+
:deep(.a-table-row.small.subModel) > * {
|
382
|
+
padding-top: 0;
|
383
|
+
color: gray;
|
384
|
+
}
|
385
|
+
|
386
|
+
:deep(.a-table-row.small.subModel):not(.last) > * {
|
387
|
+
border: none;
|
388
|
+
padding-bottom: 0;
|
389
|
+
}
|
311
390
|
</style>
|