@afeefa/vue-app 0.0.316 → 0.0.318
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.318
|
package/package.json
CHANGED
|
@@ -251,13 +251,22 @@ export default class ADatePicker extends Mixins(ComponentWidthMixin, UsesPositio
|
|
|
251
251
|
: value.substr(4, 4))
|
|
252
252
|
value = `${day.padStart(2, '0')}.${month.padStart(2, '0')}.${year}`
|
|
253
253
|
} else {
|
|
254
|
-
//
|
|
255
|
-
const
|
|
256
|
-
if (
|
|
257
|
-
const day =
|
|
258
|
-
const month =
|
|
259
|
-
const year =
|
|
254
|
+
// accept D.M. without year and expand to current year (covers inputs like '1.7.')
|
|
255
|
+
const mNoYear = value.match(/^(\d{1,2})\.(\d{1,2})\.$/)
|
|
256
|
+
if (mNoYear) {
|
|
257
|
+
const day = mNoYear[1].padStart(2, '0')
|
|
258
|
+
const month = mNoYear[2].padStart(2, '0')
|
|
259
|
+
const year = new Date().getFullYear().toString()
|
|
260
260
|
value = `${day}.${month}.${year}`
|
|
261
|
+
} else {
|
|
262
|
+
// also accept DD.MM.YY and expand to YYYY (covers inputs like '1.2.20')
|
|
263
|
+
const m = value.match(/^(\d{1,2})\.(\d{1,2})\.(\d{2})$/)
|
|
264
|
+
if (m) {
|
|
265
|
+
const day = m[1].padStart(2, '0')
|
|
266
|
+
const month = m[2].padStart(2, '0')
|
|
267
|
+
const year = (2000 + parseInt(m[3], 10)).toString()
|
|
268
|
+
value = `${day}.${month}.${year}`
|
|
269
|
+
}
|
|
261
270
|
}
|
|
262
271
|
}
|
|
263
272
|
|
|
@@ -1,223 +0,0 @@
|
|
|
1
|
-
<template>
|
|
2
|
-
<div>
|
|
3
|
-
<a-table
|
|
4
|
-
v-if="selectedItems.length"
|
|
5
|
-
:style="selectedWidthStyle"
|
|
6
|
-
>
|
|
7
|
-
<a-table-header
|
|
8
|
-
v-if="hasHeader"
|
|
9
|
-
small
|
|
10
|
-
>
|
|
11
|
-
<div
|
|
12
|
-
v-for="(column, index) in selectedColumns"
|
|
13
|
-
:key="index"
|
|
14
|
-
>
|
|
15
|
-
{{ column.header }}
|
|
16
|
-
</div>
|
|
17
|
-
</a-table-header>
|
|
18
|
-
|
|
19
|
-
<a-table-row
|
|
20
|
-
v-for="(item, index) in selectedItems"
|
|
21
|
-
:key="item.id"
|
|
22
|
-
:selected="isClicked(item)"
|
|
23
|
-
>
|
|
24
|
-
<template v-for="(column, index2) in selectedColumns">
|
|
25
|
-
<v-icon
|
|
26
|
-
v-if="column.icon"
|
|
27
|
-
:key="'icon' + index2"
|
|
28
|
-
:color="column.icon.color"
|
|
29
|
-
class="selectedIcon"
|
|
30
|
-
size="1.5rem"
|
|
31
|
-
v-text="column.icon.icon"
|
|
32
|
-
/>
|
|
33
|
-
|
|
34
|
-
<div
|
|
35
|
-
v-else
|
|
36
|
-
:key="'text' + index2"
|
|
37
|
-
class="selectedContent"
|
|
38
|
-
>
|
|
39
|
-
{{ column.text(item) }}
|
|
40
|
-
</div>
|
|
41
|
-
</template>
|
|
42
|
-
|
|
43
|
-
<div>
|
|
44
|
-
<a-context-menu
|
|
45
|
-
:ref="'editItem' + index"
|
|
46
|
-
@open="clickedItem = item"
|
|
47
|
-
@close="clickedItem = null"
|
|
48
|
-
>
|
|
49
|
-
<a-context-menu-item @click="removeItem(item, index)">
|
|
50
|
-
<v-icon>$trashCanIcon</v-icon>
|
|
51
|
-
Löschen
|
|
52
|
-
</a-context-menu-item>
|
|
53
|
-
</a-context-menu>
|
|
54
|
-
</div>
|
|
55
|
-
</a-table-row>
|
|
56
|
-
</a-table>
|
|
57
|
-
|
|
58
|
-
<div v-else>
|
|
59
|
-
{{ isEmptyText }}
|
|
60
|
-
</div>
|
|
61
|
-
|
|
62
|
-
<a-search-select
|
|
63
|
-
:listAction="selectableConfig.listAction"
|
|
64
|
-
:selectedItems="selectableSelectedItems"
|
|
65
|
-
:width="selectableWidth"
|
|
66
|
-
@select="addItem"
|
|
67
|
-
>
|
|
68
|
-
<template #activator>
|
|
69
|
-
<a-icon-button
|
|
70
|
-
small
|
|
71
|
-
icon="$plusIcon"
|
|
72
|
-
:text="selectableConfig.addButtonTitle || 'Hinzufügen'"
|
|
73
|
-
class="mt-4"
|
|
74
|
-
/>
|
|
75
|
-
</template>
|
|
76
|
-
|
|
77
|
-
<template #filters>
|
|
78
|
-
<a-row gap="4">
|
|
79
|
-
<list-filter-search
|
|
80
|
-
:focus="true"
|
|
81
|
-
maxWidth="100%"
|
|
82
|
-
label="Suche Berater:in"
|
|
83
|
-
/>
|
|
84
|
-
|
|
85
|
-
<list-filter-page
|
|
86
|
-
:has="{page_size: false, page_number: true}"
|
|
87
|
-
:totalVisible="0"
|
|
88
|
-
/>
|
|
89
|
-
</a-row>
|
|
90
|
-
</template>
|
|
91
|
-
|
|
92
|
-
<template #row="{ model, on }">
|
|
93
|
-
<template
|
|
94
|
-
v-for="(column, index) in selectableColumns"
|
|
95
|
-
v-on="on"
|
|
96
|
-
>
|
|
97
|
-
<v-icon
|
|
98
|
-
v-if="column.icon"
|
|
99
|
-
:key="'icon' + index"
|
|
100
|
-
:color="column.icon.color"
|
|
101
|
-
class="selectableIcon"
|
|
102
|
-
size="1.5rem"
|
|
103
|
-
v-on="on"
|
|
104
|
-
v-text="column.icon.icon"
|
|
105
|
-
/>
|
|
106
|
-
|
|
107
|
-
<div
|
|
108
|
-
v-else
|
|
109
|
-
:key="'text' + index"
|
|
110
|
-
class="selectableContent"
|
|
111
|
-
v-on="on"
|
|
112
|
-
>
|
|
113
|
-
{{ column.text(model) }}
|
|
114
|
-
</div>
|
|
115
|
-
</template>
|
|
116
|
-
</template>
|
|
117
|
-
</a-search-select>
|
|
118
|
-
</div>
|
|
119
|
-
</template>
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
<script>
|
|
123
|
-
import { Component, Vue } from '@a-vue'
|
|
124
|
-
|
|
125
|
-
@Component({
|
|
126
|
-
props: [
|
|
127
|
-
'value',
|
|
128
|
-
'selectedConfig',
|
|
129
|
-
'selectedWidth',
|
|
130
|
-
'selectableConfig',
|
|
131
|
-
'selectableWidth'
|
|
132
|
-
]
|
|
133
|
-
})
|
|
134
|
-
export default class SearchSelectFormField extends Vue {
|
|
135
|
-
clickedItem = null
|
|
136
|
-
|
|
137
|
-
get hasHeader () {
|
|
138
|
-
return this.selectedColumns.some(c => !!c.header)
|
|
139
|
-
}
|
|
140
|
-
|
|
141
|
-
get selectedItems () {
|
|
142
|
-
return this.value
|
|
143
|
-
}
|
|
144
|
-
|
|
145
|
-
get selectableSelectedItems () {
|
|
146
|
-
return this.value.map(this.selectedConfig.selectedToSelectableItem)
|
|
147
|
-
}
|
|
148
|
-
|
|
149
|
-
get isEmptyText () {
|
|
150
|
-
return this.selectedConfig.isEmptyText
|
|
151
|
-
}
|
|
152
|
-
|
|
153
|
-
isClicked (selectedItem) {
|
|
154
|
-
return selectedItem === this.clickedItem
|
|
155
|
-
}
|
|
156
|
-
|
|
157
|
-
get selectedColumns () {
|
|
158
|
-
return this.selectedConfig.columns
|
|
159
|
-
}
|
|
160
|
-
|
|
161
|
-
get selectableColumns () {
|
|
162
|
-
return this.selectableConfig.columns
|
|
163
|
-
}
|
|
164
|
-
|
|
165
|
-
addItem (selectableItem) {
|
|
166
|
-
const selectedItem = this.selectedConfig.newSelectedItem(selectableItem)
|
|
167
|
-
const selectedItems = [...this.value, selectedItem]
|
|
168
|
-
if (this.$listeners.add) {
|
|
169
|
-
this.$emit('add', selectedItems)
|
|
170
|
-
} else {
|
|
171
|
-
this.$emit('input', selectedItems)
|
|
172
|
-
}
|
|
173
|
-
}
|
|
174
|
-
|
|
175
|
-
async removeItem (selectedItem, rowIndex) {
|
|
176
|
-
const removeDialog = this.selectedConfig.removeDialog(selectedItem)
|
|
177
|
-
const dialog = {
|
|
178
|
-
anchor: this.$refs['editItem' + rowIndex], // is array [component]
|
|
179
|
-
...removeDialog,
|
|
180
|
-
yesButton: 'Löschen',
|
|
181
|
-
yesColor: 'red white--text'
|
|
182
|
-
}
|
|
183
|
-
|
|
184
|
-
const selectedItems = this.value.filter(i => i !== selectedItem)
|
|
185
|
-
if (this.$listeners.remove) {
|
|
186
|
-
this.$emit('remove', selectedItems, dialog)
|
|
187
|
-
} else {
|
|
188
|
-
this.$emit('input', selectedItems)
|
|
189
|
-
}
|
|
190
|
-
}
|
|
191
|
-
|
|
192
|
-
get selectedWidthStyle () {
|
|
193
|
-
if (!this.selectedWidth) {
|
|
194
|
-
return ''
|
|
195
|
-
}
|
|
196
|
-
|
|
197
|
-
let width = this.selectedWidth
|
|
198
|
-
if (!isNaN(width)) {
|
|
199
|
-
width = width + 'px'
|
|
200
|
-
}
|
|
201
|
-
return `width: ${width};`
|
|
202
|
-
}
|
|
203
|
-
}
|
|
204
|
-
</script>
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
<style scoped lang="scss">
|
|
208
|
-
.selectedIcon:deep() {
|
|
209
|
-
padding-right: .3rem !important;
|
|
210
|
-
}
|
|
211
|
-
|
|
212
|
-
.selectableIcon:deep() {
|
|
213
|
-
padding-right: 2rem !important;
|
|
214
|
-
}
|
|
215
|
-
|
|
216
|
-
.selectedContent:deep() {
|
|
217
|
-
width: 100%;
|
|
218
|
-
}
|
|
219
|
-
|
|
220
|
-
.selectableContent:deep() {
|
|
221
|
-
width: 100%;
|
|
222
|
-
}
|
|
223
|
-
</style>
|