@dative-gpi/foundation-shared-components 0.0.85 → 0.0.86

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.
Files changed (4) hide show
  1. package/components/autocompletes/FSAutocompleteOrganisation.vue +44 -10
  2. package/components/fields/FSAutocompleteField.vue +32 -72
  3. package/components/lists/FSDataTableUI.vue +178 -385
  4. package/package.json +4 -4
package/components/autocompletes/FSAutocompleteOrganisation.vue CHANGED
@@ -1,16 +1,22 @@
1
1
  <template>
2
2
  <FSAutocompleteField
3
- :loading="fetching"
3
+ :toggleSet="!$props.toggleSetDisabled && toggleSet"
4
+ :loading="loading"
4
5
  :items="organisations"
6
+ :modelValue="$props.modelValue"
7
+ @update:modelValue="onUpdate"
8
+ v-model:search="search"
5
9
  v-bind="$attrs" />
6
10
  </template>
7
11
  <script lang="ts">
8
- import { PropType, defineComponent, watch } from 'vue'
12
+ import { PropType, computed, defineComponent, watch } from 'vue'
9
13
  import _ from 'lodash';
10
14
 
11
15
  import { OrganisationFilters } from '@dative-gpi/foundation-shared-domain/models';
12
16
  import { useOrganisations } from '@dative-gpi/foundation-shared-services/composables';
13
17
 
18
+ import { useAutocomplete } from '../../composables';
19
+
14
20
  import FSAutocompleteField from '../fields/FSAutocompleteField.vue'
15
21
 
16
22
  export default defineComponent({
@@ -23,20 +29,48 @@ export default defineComponent({
23
29
  type: Object as PropType<OrganisationFilters>,
24
30
  required: false,
25
31
  default: null
32
+ },
33
+ modelValue: {
34
+ type: [Array, String] as PropType<string[] | string | null>,
35
+ required: false,
36
+ default: null
37
+ },
38
+ toggleSetDisabled: {
39
+ type: Boolean,
40
+ required: false,
41
+ default: false
26
42
  }
27
43
  },
28
- setup(props) {
29
- const { entities: organisations, fetching, getMany } = useOrganisations();
44
+ emit: ['update:modelValue'],
45
+ setup(props, { emit }) {
46
+ const { entities: organisations, fetching: fetchingOrganisations, getMany: getManyOrganisations } = useOrganisations();
47
+
48
+ const innerFetch = (search: string | null) => {
49
+ return getManyOrganisations({ ...props.organisationFilters, search: search ?? undefined });
50
+ };
51
+
52
+ const { toggleSet, search, init, onUpdate } = useAutocomplete(
53
+ organisations,
54
+ [() => props.organisationFilters],
55
+ emit,
56
+ innerFetch
57
+ );
58
+
59
+ const isSelected = (id: any) => {
60
+ return props.modelValue?.includes(id);
61
+ }
30
62
 
31
- watch(() => props.organisationFilters, async (newValue, oldValue) => {
32
- if (!_.isEqual(newValue, oldValue)) {
33
- await getMany(newValue);
34
- }
35
- }, { immediate: true });
63
+ const loading = computed((): boolean => {
64
+ return init.value && fetchingOrganisations.value;
65
+ });
36
66
 
37
67
  return {
38
68
  organisations,
39
- fetching
69
+ toggleSet,
70
+ loading,
71
+ search,
72
+ isSelected,
73
+ onUpdate
40
74
  }
41
75
  }
42
76
  })
package/components/fields/FSAutocompleteField.vue CHANGED
@@ -1,63 +1,44 @@
1
1
  <template>
2
2
  <FSCol>
3
- <slot
4
- v-if="!$props.hideHeader"
5
- name="label"
6
- >
7
- <FSRow
8
- :wrap="false"
9
- >
10
- <FSSpan
11
- v-if="$props.label"
3
+ <slot v-if="!$props.hideHeader"
4
+ name="label">
5
+ <FSRow :wrap="false">
6
+ <FSSpan v-if="$props.label"
12
7
  class="fs-autocomplete-field-label"
13
8
  font="text-overline"
14
- :style="style"
15
- >
9
+ :style="style">
16
10
  {{ $props.label }}
17
11
  </FSSpan>
18
- <FSSpan
19
- v-if="$props.label && $props.required"
12
+ <FSSpan v-if="$props.label && $props.required"
20
13
  class="fs-autocomplete-field-label"
21
14
  style="margin-left: -8px;"
22
15
  font="text-overline"
23
16
  :ellipsis="false"
24
- :style="style"
25
- >
17
+ :style="style">
26
18
  *
27
19
  </FSSpan>
28
- <v-spacer
29
- style="min-width: 40px;"
30
- />
31
- <FSSpan
32
- v-if="messages.length > 0"
20
+ <v-spacer style="min-width: 40px;" />
21
+ <FSSpan v-if="messages.length > 0"
33
22
  class="fs-autocomplete-field-messages"
34
23
  font="text-overline"
35
- :style="style"
36
- >
24
+ :style="style">
37
25
  {{ messages.join(", ") }}
38
26
  </FSSpan>
39
27
  </FSRow>
40
28
  </slot>
41
- <FSLoader
42
- v-if="$props.loading"
29
+ <FSLoader v-if="$props.loading"
43
30
  width="100%"
44
- :height="['40px', '36px']"
45
- />
46
- <template
47
- v-else
48
- >
49
- <FSToggleSet
50
- v-if="$props.toggleSet"
31
+ :height="['40px', '36px']" />
32
+ <template v-else>
33
+ <FSToggleSet v-if="$props.toggleSet"
51
34
  variant="slide"
52
35
  :multiple="$props.multiple"
53
36
  :values="$props.items"
54
37
  :rules="$props.rules"
55
38
  :modelValue="$props.modelValue"
56
39
  @update:modelValue="onUpdate"
57
- v-bind="$attrs"
58
- />
59
- <v-autocomplete
60
- v-else
40
+ v-bind="$attrs" />
41
+ <v-autocomplete v-else
61
42
  class="fs-autocomplete-field"
62
43
  variant="outlined"
63
44
  :menuIcon="null"
@@ -80,57 +61,36 @@
80
61
  @update:modelValue="onUpdate"
81
62
  @blur="blurred = true"
82
63
  v-model:search="innerSearch"
83
- v-bind="$attrs"
84
- >
85
- <template
86
- v-for="(_, name) in slots"
87
- v-slot:[name]="slotData"
88
- >
89
- <slot
90
- :name="name"
91
- v-bind="slotData"
92
- />
64
+ v-bind="$attrs">
65
+ <template v-for="(_, name) in slots"
66
+ v-slot:[name]="slotData">
67
+ <slot :name="name"
68
+ v-bind="slotData" />
93
69
  </template>
94
- <template
95
- #clear
96
- >
97
- <slot
98
- name="clear"
99
- >
100
- <FSButton
101
- v-if="$props.editable && $props.modelValue"
70
+ <template #clear>
71
+ <slot name="clear">
72
+ <FSButton v-if="$props.editable && $props.modelValue"
102
73
  icon="mdi-close"
103
74
  variant="icon"
104
75
  :color="ColorEnum.Dark"
105
- @click="$emit('update:modelValue', null)"
106
- />
76
+ @click="$emit('update:modelValue', null)" />
107
77
  </slot>
108
78
  </template>
109
- <template
110
- #append-inner
111
- >
112
- <slot
113
- name="append-inner"
114
- >
115
- <FSButton
116
- icon="mdi-chevron-down"
79
+ <template #append-inner>
80
+ <slot name="append-inner">
81
+ <FSButton icon="mdi-chevron-down"
117
82
  variant="icon"
118
83
  :editable="$props.editable"
119
- :color="ColorEnum.Dark"
120
- />
84
+ :color="ColorEnum.Dark" />
121
85
  </slot>
122
86
  </template>
123
87
  </v-autocomplete>
124
88
  </template>
125
- <slot
126
- name="description"
127
- >
128
- <FSSpan
129
- v-if="$props.description"
89
+ <slot name="description">
90
+ <FSSpan v-if="$props.description"
130
91
  class="fs-autocomplete-field-description"
131
92
  font="text-underline"
132
- :style="style"
133
- >
93
+ :style="style">
134
94
  {{ $props.description }}
135
95
  </FSSpan>
136
96
  </slot>
package/components/lists/FSDataTableUI.vue CHANGED
@@ -1,82 +1,51 @@
1
1
  <template>
2
- <FSCol
3
- gap="16px"
4
- >
5
- <FSRow
6
- align="bottom-center"
7
- >
8
- <template
9
- v-if="$props.showSearch"
10
- >
11
- <FSSearchField
12
- prependInnerIcon="mdi-magnify"
2
+ <FSCol gap="16px">
3
+ <FSRow align="bottom-center">
4
+ <template v-if="$props.showSearch">
5
+ <FSSearchField prependInnerIcon="mdi-magnify"
13
6
  :hideHeader="true"
14
- v-model="innerSearch"
15
- />
16
- <FSButton
7
+ v-model="innerSearch" />
8
+ <FSButton v-if="filterableHeaders.length > 0"
17
9
  prependIcon="mdi-filter-variant"
18
10
  :variant="showFilters ? 'full' : 'standard'"
19
- @click="showFilters = !showFilters"
20
- />
11
+ @click="showFilters = !showFilters" />
21
12
  </template>
22
- <slot
23
- name="toolbar"
24
- />
13
+ <slot name="toolbar" />
25
14
  <v-spacer />
26
- <FSOptionGroup
27
- v-if="!$props.disableTable && !$props.disableIterator"
15
+ <FSOptionGroup v-if="!$props.disableTable && !$props.disableIterator"
28
16
  :values="modeOptions"
29
17
  :required="true"
30
- v-model="innerMode"
31
- />
18
+ v-model="innerMode" />
32
19
  </FSRow>
33
- <FSRow
34
- v-if="showFiltersRow"
35
- >
36
- <template
37
- v-if="showFilters"
38
- >
39
- <FSFilterButton
40
- v-for="(header, index) in filterableHeaders"
20
+ <FSRow v-if="showFiltersRow">
21
+ <template v-if="showFilters">
22
+ <FSFilterButton v-for="(header, index) in filterableHeaders"
41
23
  :key="index"
42
24
  :header="header"
43
25
  :filters="filters[header.value]"
44
- @update:filter="(value) => toggleFilter(header.value, value)"
45
- >
46
- <template
47
- #default="{ filter }"
48
- >
49
- <slot
50
- :name="filterSlot(header)"
51
- v-bind="{ filter }"
52
- />
26
+ @update:filter="(value) => toggleFilter(header.value, value)">
27
+ <template #default="{ filter }">
28
+ <slot :name="filterSlot(header)"
29
+ v-bind="{ filter }" />
53
30
  </template>
54
31
  </FSFilterButton>
55
- <FSChip
56
- v-if="resetable"
32
+ <FSChip v-if="resetable"
57
33
  variant="standard"
58
34
  :label="$tr('ui.data-table.reset-filters', 'Reset')"
59
35
  :color="ColorEnum.Error"
60
36
  :editable="true"
61
- @click="resetFilter"
62
- />
37
+ @click="resetFilter" />
63
38
  </template>
64
- <FSHiddenButton
65
- v-if="innerMode === 'table' && hiddenHeaders.length > 0"
39
+ <FSHiddenButton v-if="innerMode === 'table' && hiddenHeaders.length > 0"
66
40
  :headers="hiddenHeaders"
67
41
  :color="$props.color"
68
- @update:show="(value) => updateHeader(value, 'hidden', false)"
69
- />
42
+ @update:show="(value) => updateHeader(value, 'hidden', false)" />
70
43
  </FSRow>
71
- <template
72
- v-if="innerMode === 'table'"
73
- >
74
- <v-data-table
75
- v-if="!isExtraSmall"
76
- selectStrategy="all"
44
+ <template v-if="innerMode === 'table'">
45
+ <v-data-table v-if="!isExtraSmall"
46
+ :selectStrategy="$props.singleSelect ? 'single' : 'all'"
77
47
  :itemValue="$props.itemValue"
78
48
  :showSelect="$props.showSelect"
79
- :singleSelect="$props.singleSelect"
80
49
  :headers="extraHeaders.concat(innerHeaders)"
81
50
  :groupBy="$props.groupBy ? [$props.groupBy] : []"
82
51
  :sortBy="innerSortBy ? [innerSortBy] : []"
@@ -96,115 +65,66 @@
96
65
  @dragover.prevent
97
66
  @drop:row="(event, row) => onDrop(event, row, 'tr.v-data-table__tr')"
98
67
  @dragover="onDragOver($event, 'tr.v-data-table__tr', 'tbody')"
99
- @dragleave="onDragLeave"
100
- >
101
- <template
102
- #no-data
103
- >
104
- <FSText
105
- font="text-overline"
106
- >
68
+ @dragleave="onDragLeave">
69
+ <template #no-data>
70
+ <FSText font="text-overline">
107
71
  {{ $tr("ui.data-table.empty", "No data") }}
108
72
  </FSText>
109
73
  </template>
110
- <template
111
- #header.data-table-select="props"
112
- >
113
- <FSRow
114
- v-if="!$props.singleSelect"
74
+ <template #header.data-table-select="props">
75
+ <FSRow v-if="!$props.singleSelect"
115
76
  class="fs-data-table-select"
116
77
  align="bottom-center"
117
- width="hug"
118
- >
119
- <FSCheckbox
120
- :indeterminate="props.someSelected && !props.allSelected"
78
+ width="hug">
79
+ <FSCheckbox :indeterminate="props.someSelected && !props.allSelected"
121
80
  :modelValue="props.allSelected"
122
- @update:modelValue="toggleSelectAll(props.allSelected)"
123
- />
81
+ @update:modelValue="toggleSelectAll(props.allSelected)" />
124
82
  </FSRow>
125
83
  </template>
126
- <template
127
- #item.data-table-select="props"
128
- >
129
- <FSRow
130
- class="fs-data-table-select"
84
+ <template #item.data-table-select="props">
85
+ <FSRow class="fs-data-table-select"
131
86
  align="bottom-center"
132
- width="hug"
133
- >
134
- <FSCheckbox
135
- :modelValue="innerValue.includes(props.item[$props.itemValue])"
136
- @update:modelValue="toggleSelect(props.item)"
137
- />
87
+ width="hug">
88
+ <FSCheckbox :modelValue="innerValue.includes(props.item[$props.itemValue])"
89
+ @update:modelValue="toggleSelect(props.item)" />
138
90
  </FSRow>
139
91
  </template>
140
- <template
141
- #item.data-table-draggable="props"
142
- >
143
- <FSDraggable
144
- elementSelector="tr.v-data-table__tr"
92
+ <template #item.data-table-draggable="props">
93
+ <FSDraggable elementSelector="tr.v-data-table__tr"
145
94
  :disabled="draggableDisabled"
146
95
  :item="props"
147
- @update:dragend="(event, dragged) => onDragEnd(event, dragged, 'tbody')"
148
- >
149
- <FSRow
150
- class="fs-data-table-draggable"
96
+ @update:dragend="(event, dragged) => onDragEnd(event, dragged, 'tbody')">
97
+ <FSRow class="fs-data-table-draggable"
151
98
  align="bottom-center"
152
- width="hug"
153
- >
154
- <FSIcon
155
- size="l"
156
- >
99
+ width="hug">
100
+ <FSIcon size="l">
157
101
  mdi-drag-vertical
158
102
  </FSIcon>
159
103
  </FSRow>
160
104
  </FSDraggable>
161
105
  </template>
162
- <template
163
- #header.data-table-group="props"
164
- >
165
- <slot
166
- name="header.data-table-group"
167
- v-bind="props"
168
- />
106
+ <template #header.data-table-group="props">
107
+ <slot name="header.data-table-group"
108
+ v-bind="props" />
169
109
  </template>
170
- <template
171
- #item.data-table-group="props"
172
- >
173
- <slot
174
- name="item.data-table-group"
175
- v-bind="props"
176
- />
110
+ <template #item.data-table-group="props">
111
+ <slot name="item.data-table-group"
112
+ v-bind="props" />
177
113
  </template>
178
- <template
179
- #group-header="props"
180
- >
181
- <template
182
- :ref="() => { if (!props.isGroupOpen(props.item)) { props.toggleGroup(props.item) } }"
183
- />
184
- <tr
185
- class="fs-data-table-group-header"
186
- >
114
+ <template #group-header="props">
115
+ <template :ref="() => { if (!props.isGroupOpen(props.item)) { props.toggleGroup(props.item) } }" />
116
+ <tr class="fs-data-table-group-header">
187
117
  <td />
188
- <td
189
- class="fs-data-table-group-header"
190
- :colspan="extraHeaders.concat(innerHeaders).length + 1"
191
- >
192
- <slot
193
- name="group-header"
194
- v-bind="props"
195
- >
196
- <FSCard
197
- padding="12px 16px"
198
- >
199
- <FSRow
200
- align="center-left"
201
- width="hug"
202
- >
118
+ <td class="fs-data-table-group-header"
119
+ :colspan="extraHeaders.concat(innerHeaders).length + 1">
120
+ <slot name="group-header"
121
+ v-bind="props">
122
+ <FSCard padding="12px 16px">
123
+ <FSRow align="center-left"
124
+ width="hug">
203
125
  <FSText>
204
- <slot
205
- name="group-header-title"
206
- v-bind="props"
207
- >
126
+ <slot name="group-header-title"
127
+ v-bind="props">
208
128
  {{ props.item.value }}
209
129
  </slot>
210
130
  </FSText>
@@ -214,98 +134,58 @@
214
134
  </td>
215
135
  </tr>
216
136
  </template>
217
- <template
218
- v-for="(header, index) in headersSlots"
219
- #[header.slotName]="props"
220
- >
221
- <slot
222
- :name="header.slotName"
223
- v-bind="props"
224
- >
225
- <FSRow
226
- align="center-left"
137
+ <template v-for="(header, index) in headersSlots"
138
+ #[header.slotName]="props">
139
+ <slot :name="header.slotName"
140
+ v-bind="props">
141
+ <FSRow align="center-left"
227
142
  :wrap="false"
228
- :key="index"
229
- >
230
- <slot
231
- :name="`${header.slotName}-prepend`"
232
- />
233
- <slot
234
- :name="`${header.slotName}-title`"
235
- >
143
+ :key="index">
144
+ <slot :name="`${header.slotName}-prepend`" />
145
+ <slot :name="`${header.slotName}-title`">
236
146
  <FSText>
237
147
  {{ header.text }}
238
148
  </FSText>
239
149
  </slot>
240
- <slot
241
- :name="`${header.slotName}-append`"
242
- />
150
+ <slot :name="`${header.slotName}-append`" />
243
151
  <v-spacer />
244
- <slot
245
- :name="`${header.slotName}-configuration`"
246
- >
247
- <FSHeaderButton
248
- :first="index === 0"
152
+ <slot :name="`${header.slotName}-configuration`">
153
+ <FSHeaderButton :first="index === 0"
249
154
  :last="index === headersSlots.length - 1"
250
155
  @update:hide="updateHeader(header, 'hidden', !header.hidden)"
251
156
  @update:left="updateHeader(header, 'index', -1)"
252
- @update:right="updateHeader(header, 'index', 1)"
253
- />
254
- <FSButton
255
- v-if="header.sortable"
157
+ @update:right="updateHeader(header, 'index', 1)" />
158
+ <FSButton v-if="header.sortable"
256
159
  variant="icon"
257
160
  :color="sortColor(header, props)"
258
- :icon="sortIcon(header, props)"
259
- />
161
+ :icon="sortIcon(header, props)" />
260
162
  </slot>
261
163
  </FSRow>
262
164
  </slot>
263
165
  </template>
264
- <template
265
- v-for="(item, index) in itemsSlots"
266
- #[item.slotName]="props"
267
- >
268
- <div
269
- class="fs-td-color"
270
- >
271
- <slot
272
- :name="item.slotName"
273
- v-bind="props"
274
- >
275
- <FSRow
276
- align="center-left"
277
- :key="index"
278
- >
279
- <FSSpan
280
- font="text-overline"
281
- >
166
+ <template v-for="(item, index) in itemsSlots"
167
+ #[item.slotName]="props">
168
+ <div class="fs-td-color">
169
+ <slot :name="item.slotName"
170
+ v-bind="props">
171
+ <FSRow align="center-left"
172
+ :key="index">
173
+ <FSSpan font="text-overline">
282
174
  {{ props.item[item.value] }}
283
175
  </FSSpan>
284
176
  </FSRow>
285
177
  </slot>
286
178
  </div>
287
179
  </template>
288
- <template
289
- #bottom
290
- >
291
- <FSRow
292
- class="fs-data-table-footer"
180
+ <template #bottom>
181
+ <FSRow class="fs-data-table-footer"
293
182
  align="center-right"
294
183
  padding="16px"
295
- gap="24px"
296
- >
297
- <template
298
- v-if="$props.modelValue.length"
299
- >
300
- <template
301
- v-if="$props.modelValue.length >= innerItems.length"
302
- >
303
- <FSRow
304
- gap="2px"
305
- >
306
- <FSText
307
- font="text-button"
308
- >
184
+ gap="24px">
185
+ <template v-if="$props.modelValue.length">
186
+ <template v-if="$props.modelValue.length >= innerItems.length">
187
+ <FSRow gap="2px">
188
+ <FSText font="text-button">
309
189
  {{ $tr("ui.data-table.all-selected-bold", "Warning:") }}
310
190
  </FSText>
311
191
  <FSText>
@@ -313,70 +193,50 @@
313
193
  </FSText>
314
194
  </FSRow>
315
195
  </template>
316
- <template
317
- v-else
318
- >
196
+ <template v-else>
319
197
  <FSText>
320
- {{ $tr("ui.data-table.some-selected", "{0} element(s) selected", $props.modelValue.length.toString()) }}
198
+ {{ $tr("ui.data-table.some-selected", "{0} element(s) selected", $props.modelValue.length.toString())
199
+ }}
321
200
  </FSText>
322
201
  </template>
323
202
  </template>
324
203
  <v-spacer />
325
- <FSRow
326
- align="center-right"
204
+ <FSRow align="center-right"
327
205
  width="hug"
328
- :wrap="false"
329
- >
330
- <FSText
331
- font="text-overline"
332
- >
206
+ :wrap="false">
207
+ <FSText font="text-overline">
333
208
  {{ $tr("ui.data-table.rows-per-page", "Rows per page") }}
334
209
  </FSText>
335
- <FSSelectField
336
- class="fs-data-table-rows-per-page"
210
+ <FSSelectField class="fs-data-table-rows-per-page"
337
211
  :clearable="false"
338
212
  :hideHeader="true"
339
213
  :items="rowsPerPageOptions"
340
- v-model="innerRowsPerPage"
341
- />
214
+ v-model="innerRowsPerPage" />
342
215
  </FSRow>
343
- <FSToggleSet
344
- v-if="innerRowsPerPage !== -1"
216
+ <FSToggleSet v-if="innerRowsPerPage !== -1"
345
217
  class="fs-data-table-pagination"
346
218
  variant="slide"
347
219
  :dash="pageOptions.length > 8"
348
220
  :values="pageOptions"
349
221
  :required="true"
350
- v-model="innerPage"
351
- />
222
+ v-model="innerPage" />
352
223
  </FSRow>
353
224
  </template>
354
- <template
355
- v-for="(_, name) in innerSlots"
356
- #[name]="props"
357
- >
358
- <slot
359
- :name="name"
360
- v-bind="props"
361
- />
225
+ <template v-for="(_, name) in innerSlots"
226
+ #[name]="props">
227
+ <slot :name="name"
228
+ v-bind="props" />
362
229
  </template>
363
230
  </v-data-table>
364
- <v-data-iterator
365
- v-else
231
+ <v-data-iterator v-else
366
232
  class="fs-data-table-iterator"
367
233
  :items="innerItems"
368
234
  :page="innerPage"
369
- :itemsPerPage="innerRowsPerPage"
370
- >
371
- <template
372
- #default="{ items }"
373
- >
374
- <FSCol
375
- class="fs-data-iterator-container"
376
- width="fill"
377
- >
378
- <FSDraggable
379
- v-for="(item, index) in items"
235
+ :itemsPerPage="innerRowsPerPage">
236
+ <template #default="{ items }">
237
+ <FSCol class="fs-data-iterator-container"
238
+ width="fill">
239
+ <FSDraggable v-for="(item, index) in items"
380
240
  elementSelector=".fs-draggable-item"
381
241
  :disabled="draggableDisabled"
382
242
  :item="item"
@@ -385,14 +245,10 @@
385
245
  @dragover="(event) => onDragOver(event, '.fs-draggable-item', '.fs-data-iterator-container')"
386
246
  @drop="(event) => onDrop(event, item, '.fs-draggable-item')"
387
247
  @dragleave="onDragLeave"
388
- @dragover.prevent
389
- >
390
- <slot
391
- name="item.iterator"
392
- v-bind="{ item, index }"
393
- >
394
- <FSDataIteratorItem
395
- v-if="item.type === 'item'"
248
+ @dragover.prevent>
249
+ <slot name="item.iterator"
250
+ v-bind="{ item, index }">
251
+ <FSDataIteratorItem v-if="item.type === 'item'"
396
252
  :itemColor="$props.rowColor ? $props.rowColor(item.raw) : ColorEnum.Background"
397
253
  :headers="innerHeaders.filter(h => !$props.sneakyHeaders.includes(h.value))"
398
254
  :showSelect="$props.showSelect"
@@ -401,65 +257,38 @@
401
257
  :item="item.raw"
402
258
  :key="index"
403
259
  :modelValue="innerValue.includes(item.raw[$props.itemValue])"
404
- @update:modelValue="toggleSelect"
405
- >
406
- <template
407
- #item.top="props"
408
- >
409
- <slot
410
- name="item.top"
411
- v-bind="props"
412
- />
260
+ @update:modelValue="toggleSelect">
261
+ <template #item.top="props">
262
+ <slot name="item.top"
263
+ v-bind="props" />
413
264
  </template>
414
- <template
415
- v-for="(item, index) in itemsSlots"
416
- #[item.slotName]="props"
417
- >
418
- <slot
419
- :name="item.slotName"
420
- v-bind="props"
421
- >
422
- <FSSpan
423
- font="text-overline"
424
- >
265
+ <template v-for="(item, index) in itemsSlots"
266
+ #[item.slotName]="props">
267
+ <slot :name="item.slotName"
268
+ v-bind="props">
269
+ <FSSpan font="text-overline">
425
270
  {{ props.item[item.value] }}
426
271
  </FSSpan>
427
272
  </slot>
428
273
  </template>
429
- <template
430
- #item.bottom="props"
431
- >
432
- <slot
433
- name="item.bottom"
434
- v-bind="props"
435
- />
274
+ <template #item.bottom="props">
275
+ <slot name="item.bottom"
276
+ v-bind="props" />
436
277
  </template>
437
278
  </FSDataIteratorItem>
438
279
  </slot>
439
280
  </FSDraggable>
440
281
  </FSCol>
441
282
  </template>
442
- <template
443
- #footer
444
- >
445
- <FSRow
446
- class="fs-data-table-footer"
283
+ <template #footer>
284
+ <FSRow class="fs-data-table-footer"
447
285
  align="center-right"
448
286
  padding="16px"
449
- gap="24px"
450
- >
451
- <template
452
- v-if="$props.modelValue.length"
453
- >
454
- <template
455
- v-if="$props.modelValue.length >= innerItems.length"
456
- >
457
- <FSRow
458
- gap="2px"
459
- >
460
- <FSText
461
- font="text-button"
462
- >
287
+ gap="24px">
288
+ <template v-if="$props.modelValue.length">
289
+ <template v-if="$props.modelValue.length >= innerItems.length">
290
+ <FSRow gap="2px">
291
+ <FSText font="text-button">
463
292
  {{ $tr("ui.data-table.all-selected-bold", "Warning:") }}
464
293
  </FSText>
465
294
  <FSText>
@@ -467,67 +296,47 @@
467
296
  </FSText>
468
297
  </FSRow>
469
298
  </template>
470
- <template
471
- v-else
472
- >
299
+ <template v-else>
473
300
  <FSText>
474
- {{ $tr("ui.data-table.some-selected", "{0} element(s) selected", $props.modelValue.length.toString()) }}
301
+ {{ $tr("ui.data-table.some-selected", "{0} element(s) selected", $props.modelValue.length.toString())
302
+ }}
475
303
  </FSText>
476
304
  </template>
477
305
  </template>
478
306
  <v-spacer />
479
- <FSRow
480
- align="center-right"
481
- :wrap="false"
482
- >
483
- <FSText
484
- font="text-overline"
485
- >
307
+ <FSRow align="center-right"
308
+ :wrap="false">
309
+ <FSText font="text-overline">
486
310
  {{ $tr("ui.data-table.rows-per-page", "Rows per page") }}
487
311
  </FSText>
488
- <FSRow
489
- width="120px"
490
- >
491
- <FSSelectField
492
- class="fs-data-table-rows-per-page"
312
+ <FSRow width="120px">
313
+ <FSSelectField class="fs-data-table-rows-per-page"
493
314
  :clearable="false"
494
315
  :hideHeader="true"
495
316
  :items="rowsPerPageOptions"
496
- v-model="innerRowsPerPage"
497
- />
317
+ v-model="innerRowsPerPage" />
498
318
  </FSRow>
499
319
  </FSRow>
500
- <FSToggleSet
501
- v-if="innerRowsPerPage !== -1"
320
+ <FSToggleSet v-if="innerRowsPerPage !== -1"
502
321
  class="fs-data-table-pagination"
503
322
  variant="slide"
504
323
  :dash="pageOptions.length > 8"
505
324
  :values="pageOptions"
506
325
  :required="true"
507
- v-model="innerPage"
508
- />
326
+ v-model="innerPage" />
509
327
  </FSRow>
510
328
  </template>
511
329
  </v-data-iterator>
512
330
  </template>
513
- <template
514
- v-else
515
- >
516
- <v-data-iterator
517
- class="fs-data-table-iterator"
331
+ <template v-else>
332
+ <v-data-iterator class="fs-data-table-iterator"
518
333
  :items="innerItems"
519
- :itemsPerPage="size"
520
- >
521
- <template
522
- #default="{ items }"
523
- >
524
- <FSRow
525
- width="hug"
334
+ :itemsPerPage="size">
335
+ <template #default="{ items }">
336
+ <FSRow width="hug"
526
337
  class="fs-data-iterator-container"
527
- :gap="$props.tileGap"
528
- >
529
- <FSDraggable
530
- v-for="(item, index) in items.filter((item) => item.type === 'item')"
338
+ :gap="$props.tileGap">
339
+ <FSDraggable v-for="(item, index) in items.filter((item) => item.type === 'item')"
531
340
  elementSelector=".fs-draggable-item"
532
341
  :disabled="draggableDisabled"
533
342
  :item="item"
@@ -536,14 +345,10 @@
536
345
  @dragover="(event) => onDragOver(event, '.fs-draggable-item', '.fs-data-iterator-container')"
537
346
  @drop="(event) => onDrop(event, item, '.fs-draggable-item')"
538
347
  @dragleave="onDragLeave"
539
- @dragover.prevent
540
- >
541
- <slot
542
- name="item.tile"
543
- v-bind="{ index, item: item.raw, toggleSelect }"
544
- >
545
- <FSDataIteratorItem
546
- :itemColor="$props.rowColor ? $props.rowColor(item.raw) : ColorEnum.Background"
348
+ @dragover.prevent>
349
+ <slot name="item.tile"
350
+ v-bind="{ index, item: item.raw, toggleSelect }">
351
+ <FSDataIteratorItem :itemColor="$props.rowColor ? $props.rowColor(item.raw) : ColorEnum.Background"
547
352
  :headers="innerHeaders.filter(h => !$props.sneakyHeaders.includes(h.value))"
548
353
  :showSelect="$props.showSelect"
549
354
  :itemTo="$props.itemTo"
@@ -551,38 +356,23 @@
551
356
  :item="item.raw"
552
357
  :key="index"
553
358
  :modelValue="innerValue.includes(item.raw[$props.itemValue])"
554
- @update:modelValue="toggleSelect"
555
- >
556
- <template
557
- #item.top="props"
558
- >
559
- <slot
560
- name="item.top"
561
- v-bind="props"
562
- />
359
+ @update:modelValue="toggleSelect">
360
+ <template #item.top="props">
361
+ <slot name="item.top"
362
+ v-bind="props" />
563
363
  </template>
564
- <template
565
- v-for="(item, index) in itemsSlots"
566
- #[item.slotName]="props"
567
- >
568
- <slot
569
- :name="item.slotName"
570
- v-bind="props"
571
- >
572
- <FSSpan
573
- font="text-overline"
574
- >
364
+ <template v-for="(item, index) in itemsSlots"
365
+ #[item.slotName]="props">
366
+ <slot :name="item.slotName"
367
+ v-bind="props">
368
+ <FSSpan font="text-overline">
575
369
  {{ props.item[item.value] }}
576
370
  </FSSpan>
577
371
  </slot>
578
372
  </template>
579
- <template
580
- #item.bottom="props"
581
- >
582
- <slot
583
- name="item.bottom"
584
- v-bind="props"
585
- />
373
+ <template #item.bottom="props">
374
+ <slot name="item.bottom"
375
+ v-bind="props" />
586
376
  </template>
587
377
  </FSDataIteratorItem>
588
378
  </slot>
@@ -591,9 +381,7 @@
591
381
  </template>
592
382
  </v-data-iterator>
593
383
  </template>
594
- <div
595
- class="fs-data-table-intersection"
596
- />
384
+ <div class="fs-data-table-intersection" />
597
385
  </FSCol>
598
386
  </template>
599
387
 
@@ -1003,7 +791,12 @@ export default defineComponent({
1003
791
  innerValue.value.splice(index, 1);
1004
792
  }
1005
793
  else {
1006
- innerValue.value.push(item[props.itemValue]);
794
+ if (props.singleSelect) {
795
+ innerValue.value = [item[props.itemValue]];
796
+ }
797
+ else {
798
+ innerValue.value.push(item[props.itemValue]);
799
+ }
1007
800
  }
1008
801
  emit("update:modelValue", innerValue.value);
1009
802
  };
@@ -1167,11 +960,11 @@ export default defineComponent({
1167
960
  return {
1168
961
  class: "fs-data-table-custom-row",
1169
962
  style: {
1170
- "--fs-data-table-row-border-size" : "1px",
1171
- "--fs-data-table-row-border-radius" : sizeToVar(props.rowBorderRadius),
963
+ "--fs-data-table-row-border-size": "1px",
964
+ "--fs-data-table-row-border-radius": sizeToVar(props.rowBorderRadius),
1172
965
  "--fs-data-table-row-background-color": rowColors.light,
1173
- "--fs-data-table-row-border-color" : rowColors.lightContrast,
1174
- "--fs-data-table-row-color" : rowColors.lightContrast
966
+ "--fs-data-table-row-border-color": rowColors.lightContrast,
967
+ "--fs-data-table-row-color": rowColors.lightContrast
1175
968
  }
1176
969
  };
1177
970
  }
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@dative-gpi/foundation-shared-components",
3
3
  "sideEffects": false,
4
- "version": "0.0.85",
4
+ "version": "0.0.86",
5
5
  "description": "",
6
6
  "publishConfig": {
7
7
  "access": "public"
@@ -10,8 +10,8 @@
10
10
  "author": "",
11
11
  "license": "ISC",
12
12
  "dependencies": {
13
- "@dative-gpi/foundation-shared-domain": "0.0.85",
14
- "@dative-gpi/foundation-shared-services": "0.0.85",
13
+ "@dative-gpi/foundation-shared-domain": "0.0.86",
14
+ "@dative-gpi/foundation-shared-services": "0.0.86",
15
15
  "@fontsource/montserrat": "^5.0.16",
16
16
  "@lexical/clipboard": "^0.12.5",
17
17
  "@lexical/history": "^0.12.5",
@@ -32,5 +32,5 @@
32
32
  "sass": "^1.69.5",
33
33
  "sass-loader": "^13.3.2"
34
34
  },
35
- "gitHead": "9c0b770f8b54cce1cd3aa7c25c91ad1a99b08862"
35
+ "gitHead": "ff4a752918cbf77980545c0056db4235bcb23a11"
36
36
  }