@dative-gpi/foundation-shared-components 1.0.42 → 1.0.44

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 (6) hide show
  1. package/components/fields/FSAutocompleteField.vue +426 -433
  2. package/components/fields/FSGradientField.vue +9 -9
  3. package/components/fields/FSSelectField.vue +389 -400
  4. package/composables/useColors.ts +3 -2
  5. package/package.json +4 -4
  6. package/styles/components/fs_gradient_field.scss +11 -13
package/components/fields/FSSelectField.vue CHANGED
@@ -1,452 +1,441 @@
1
1
  <template>
2
- <template
2
+ <FSCol
3
3
  v-if="$props.loading"
4
4
  >
5
- <FSCol>
6
- <FSLoader
7
- v-if="!$props.hideHeader"
8
- variant="text-overline"
9
- />
10
- <FSLoader
11
- v-if="$props.loading"
12
- width="100%"
13
- :height="['40px', '36px']"
14
- />
15
- </FSCol>
16
- </template>
17
- <template
18
- v-else
5
+ <FSLoader
6
+ v-if="!$props.hideHeader"
7
+ variant="text-overline"
8
+ />
9
+ <FSLoader
10
+ v-if="$props.loading"
11
+ width="100%"
12
+ :height="['40px', '36px']"
13
+ />
14
+ </FSCol>
15
+ <FSCol
16
+ v-else-if="isExtraSmall"
19
17
  >
20
- <template
21
- v-if="isExtraSmall"
18
+ <FSTextField
19
+ :validationValue="$props.modelValue"
20
+ :description="$props.description"
21
+ :hideHeader="$props.hideHeader"
22
+ :clearable="$props.clearable"
23
+ :editable="$props.editable"
24
+ :required="$props.required"
25
+ :validateOn="validateOn"
26
+ :label="$props.label"
27
+ :rules="$props.rules"
28
+ :messages="messages"
29
+ :readonly="true"
30
+ :modelValue="mobileValue"
31
+ @click="openMobileOverlay"
32
+ v-bind="$attrs"
22
33
  >
23
- <FSCol>
24
- <FSTextField
25
- :validationValue="$props.modelValue"
26
- :description="$props.description"
27
- :hideHeader="$props.hideHeader"
28
- :clearable="$props.clearable"
29
- :editable="$props.editable"
30
- :required="$props.required"
31
- :validateOn="validateOn"
32
- :label="$props.label"
33
- :rules="$props.rules"
34
- :messages="messages"
35
- :readonly="true"
36
- :modelValue="mobileValue"
37
- @click="openMobileOverlay"
38
- v-bind="$attrs"
34
+ <template
35
+ v-for="(_, name) in $slots"
36
+ v-slot:[name]="slotData"
37
+ >
38
+ <slot
39
+ :name="name"
40
+ v-bind="slotData"
41
+ />
42
+ </template>
43
+ <template
44
+ #prepend-inner
45
+ >
46
+ <slot
47
+ v-if="selectedItem"
48
+ name="item-prepend"
49
+ v-bind="{ item: selectedItem }"
50
+ />
51
+ </template>
52
+ <template
53
+ #clear
54
+ >
55
+ <FSRow
56
+ :wrap="false"
39
57
  >
40
- <template
41
- v-for="(_, name) in $slots"
42
- v-slot:[name]="slotData"
43
- >
44
- <slot
45
- :name="name"
46
- v-bind="slotData"
47
- />
48
- </template>
49
- <template
50
- #prepend-inner
51
- >
52
- <slot
53
- v-if="selectedItem"
54
- name="item-prepend"
55
- v-bind="{ item: selectedItem }"
56
- />
57
- </template>
58
- <template
59
- #clear
60
- >
61
- <FSRow
62
- :wrap="false"
63
- >
64
- <slot
65
- v-if="selectedItem"
66
- name="item-append"
67
- v-bind="{ item: selectedItem }"
68
- />
69
- <slot
70
- name="clear"
71
- >
72
- <FSButton
73
- v-if="$props.clearable && $props.editable && !!$props.modelValue"
74
- icon="mdi-close"
75
- variant="icon"
76
- :color="ColorEnum.Dark"
77
- @click="onClear"
78
- />
79
- </slot>
80
- </FSRow>
81
- </template>
82
- <template
83
- #append-inner
58
+ <slot
59
+ v-if="selectedItem"
60
+ name="item-append"
61
+ v-bind="{ item: selectedItem }"
62
+ />
63
+ <slot
64
+ name="clear"
84
65
  >
85
66
  <FSButton
86
- icon="mdi-chevron-down"
67
+ v-if="$props.clearable && $props.editable && !!$props.modelValue"
68
+ icon="mdi-close"
87
69
  variant="icon"
88
- :editable="$props.editable"
89
70
  :color="ColorEnum.Dark"
90
- @click="openMobileOverlay"
71
+ @click="onClear"
91
72
  />
92
- </template>
93
- </FSTextField>
94
- <FSSlideGroup
95
- v-if="$props.multiple && Array.isArray($props.modelValue)"
96
- >
97
- <FSCard
98
- v-for="(item, index) in $props.items.filter((item: any) => $props.modelValue.includes(item[$props.itemValue!]))"
99
- variant="standard"
100
- :height="['40px', '36px']"
101
- :color="ColorEnum.Light"
102
- :border="false"
103
- :key="index"
104
- >
105
- <FSRow
106
- align="center-left"
107
- padding="0 8px"
108
- :wrap="false"
109
- >
110
- <slot
111
- name="item-prepend"
112
- v-bind="{ item }"
113
- />
114
- <FSSpan>
115
- {{ item[$props.itemTitle!] }}
116
- </FSSpan>
117
- <slot
118
- name="item-append"
119
- v-bind="{ item }"
120
- />
121
- <FSButton
122
- icon="mdi-close"
123
- variant="icon"
124
- :color="ColorEnum.Dark"
125
- @click="() => onCheckboxChange(item[$props.itemValue!])"
126
- />
127
- </FSRow>
128
- </FSCard>
129
- </FSSlideGroup>
130
- </FSCol>
131
- <FSDialogMenu
132
- v-model="dialog"
73
+ </slot>
74
+ </FSRow>
75
+ </template>
76
+ <template
77
+ #append-inner
133
78
  >
134
- <template
135
- #body
136
- >
137
- <FSFadeOut
138
- :maxHeight="maxHeight"
139
- >
140
- <FSCol
141
- gap="12px"
142
- >
143
- <FSRow
144
- v-for="(item, index) in $props.items"
145
- :key="index"
146
- >
147
- <FSCheckbox
148
- v-if="$props.multiple"
149
- :label="item[$props.itemTitle!]"
150
- :editable="$props.editable"
151
- :modelValue="$props.modelValue?.includes(item[$props.itemValue!])"
152
- @update:modelValue="() => onCheckboxChange(item[$props.itemValue!])"
153
- >
154
- <template
155
- #label="{ font }"
156
- >
157
- <FSRow
158
- align="center-left"
159
- :wrap="false"
160
- >
161
- <slot
162
- name="item-prepend"
163
- v-bind="{ item }"
164
- />
165
- <FSSpan
166
- :font="font"
167
- >
168
- {{ item[$props.itemTitle!] }}
169
- </FSSpan>
170
- </FSRow>
171
- </template>
172
- </FSCheckbox>
173
- <FSRadio
174
- v-else
175
- :selected="$props.modelValue === item[$props.itemValue!]"
176
- :label="item[$props.itemTitle!]"
177
- :editable="$props.editable"
178
- :item="item"
179
- :modelValue="item[$props.itemValue!]"
180
- @update:modelValue="() => onRadioChange(item[$props.itemValue!])"
181
- >
182
- <template
183
- #label="{ font }"
184
- >
185
- <FSRow
186
- align="center-left"
187
- :wrap="false"
188
- >
189
- <slot
190
- name="item-prepend"
191
- v-bind="{ item }"
192
- />
193
- <FSSpan
194
- :font="font"
195
- >
196
- {{ item[$props.itemTitle!] }}
197
- </FSSpan>
198
- </FSRow>
199
- </template>
200
- </FSRadio>
201
- <FSRow
202
- align="center-right"
203
- >
204
- <slot
205
- name="item-append"
206
- v-bind="{ item }"
207
- />
208
- </FSRow>
209
- </FSRow>
210
- </FSCol>
211
- </FSFadeOut>
212
- <FSRow
213
- v-if="!$props.items || $props.items.length === 0"
214
- padding="4px 3px"
215
- >
216
- <FSSpan>
217
- {{ $tr("ui.select-field.no-data", "No data") }}
218
- </FSSpan>
219
- </FSRow>
220
- </template>
221
- </FSDialogMenu>
222
- </template>
223
- <template
224
- v-else
79
+ <FSButton
80
+ icon="mdi-chevron-down"
81
+ variant="icon"
82
+ :editable="$props.editable"
83
+ :color="ColorEnum.Dark"
84
+ @click="openMobileOverlay"
85
+ />
86
+ </template>
87
+ </FSTextField>
88
+ <FSSlideGroup
89
+ v-if="$props.multiple && Array.isArray($props.modelValue)"
225
90
  >
226
- <FSBaseField
227
- :description="$props.description"
228
- :hideHeader="$props.hideHeader"
229
- :required="$props.required"
230
- :editable="$props.editable"
231
- :label="$props.label"
232
- :messages="messages"
91
+ <FSCard
92
+ v-for="(item, index) in $props.items.filter((item: any) => $props.modelValue.includes(item[$props.itemValue!]))"
93
+ variant="standard"
94
+ :height="['40px', '36px']"
95
+ :color="ColorEnum.Light"
96
+ :border="false"
97
+ :key="index"
233
98
  >
234
- <FSToggleSet
235
- v-if="$props.toggleSet"
236
- :editable="$props.editable"
237
- :multiple="$props.multiple"
238
- :required="$props.required"
239
- :values="$props.items"
240
- :rules="$props.rules"
241
- :modelValue="$props.modelValue"
242
- @update:modelValue="$emit('update:modelValue', $event)"
243
- v-bind="$attrs"
99
+ <FSRow
100
+ align="center-left"
101
+ padding="0 8px"
102
+ :wrap="false"
244
103
  >
245
- <template
246
- v-for="(_, name) in toggleSetSlots"
247
- v-slot:[name]="slotData"
248
- >
249
- <slot
250
- :name="`toggle-set-${name}`"
251
- v-bind="slotData"
252
- />
253
- </template>
254
- </FSToggleSet>
255
- <FSCol
256
- v-else
104
+ <slot
105
+ name="item-prepend"
106
+ v-bind="{ item }"
107
+ />
108
+ <FSSpan>
109
+ {{ item[$props.itemTitle!] }}
110
+ </FSSpan>
111
+ <slot
112
+ name="item-append"
113
+ v-bind="{ item }"
114
+ />
115
+ <FSButton
116
+ icon="mdi-close"
117
+ variant="icon"
118
+ :color="ColorEnum.Dark"
119
+ @click="() => onCheckboxChange(item[$props.itemValue!])"
120
+ />
121
+ </FSRow>
122
+ </FSCard>
123
+ </FSSlideGroup>
124
+ <FSDialogMenu
125
+ v-model="dialog"
126
+ >
127
+ <template
128
+ #body
129
+ >
130
+ <FSFadeOut
131
+ :maxHeight="maxHeight"
257
132
  >
258
- <v-select
259
- class="fs-select-field"
260
- variant="outlined"
261
- :clearable="$props.clearable && $props.editable && !!$props.modelValue"
262
- :itemTitle="$props.itemTitle"
263
- :itemValue="$props.itemValue"
264
- :readonly="!$props.editable"
265
- :multiple="$props.multiple"
266
- :validateOn="validateOn"
267
- :persistentClear="true"
268
- :listProps="listStyle"
269
- :returnObject="false"
270
- :items="$props.items"
271
- :rules="$props.rules"
272
- :hideDetails="true"
273
- :menuIcon="null"
274
- :style="style"
275
- :modelValue="$props.modelValue"
276
- @update:modelValue="onSingleChange"
277
- v-bind="$attrs"
133
+ <FSCol
134
+ gap="12px"
278
135
  >
279
- <template
280
- v-for="(_, name) in selectSlots"
281
- v-slot:[name]="slotData"
282
- >
283
- <slot
284
- :name="`select-${name}`"
285
- v-bind="slotData"
286
- />
287
- </template>
288
- <template
289
- #item="{ props, item }"
136
+ <FSRow
137
+ v-for="(item, index) in $props.items"
138
+ :key="index"
290
139
  >
291
- <v-list-item
292
- v-bind="{ ...props, title: '' }"
140
+ <FSCheckbox
141
+ v-if="$props.multiple"
142
+ :label="item[$props.itemTitle!]"
143
+ :editable="$props.editable"
144
+ :modelValue="$props.modelValue?.includes(item[$props.itemValue!])"
145
+ @update:modelValue="() => onCheckboxChange(item[$props.itemValue!])"
293
146
  >
294
- <FSRow
295
- align="center-left"
296
- :wrap="false"
147
+ <template
148
+ #label="{ font }"
297
149
  >
298
- <FSCheckbox
299
- v-if="$props.multiple"
300
- :modelValue="$props.modelValue?.includes(item.raw[$props.itemValue!])"
301
- @click="props.onClick"
302
- >
303
- <template
304
- #label="{ font }"
305
- >
306
- <slot
307
- name="item-prepend"
308
- v-bind="{ item: item.raw }"
309
- />
310
- <FSSpan
311
- :font="font"
312
- >
313
- {{ item.raw[$props.itemTitle!] }}
314
- </FSSpan>
315
- </template>
316
- </FSCheckbox>
317
- <template
318
- v-else
150
+ <FSRow
151
+ align="center-left"
152
+ :wrap="false"
319
153
  >
320
154
  <slot
321
155
  name="item-prepend"
322
- v-bind="{ item: item.raw }"
156
+ v-bind="{ item }"
323
157
  />
324
158
  <FSSpan
325
- :font="$props.modelValue === item.raw[$props.itemTitle!] ? 'text-button' : 'text-body'"
159
+ :font="font"
326
160
  >
327
- {{ item.raw[$props.itemTitle!] }}
161
+ {{ item[$props.itemTitle!] }}
328
162
  </FSSpan>
329
- </template>
163
+ </FSRow>
164
+ </template>
165
+ </FSCheckbox>
166
+ <FSRadio
167
+ v-else
168
+ :selected="$props.modelValue === item[$props.itemValue!]"
169
+ :label="item[$props.itemTitle!]"
170
+ :editable="$props.editable"
171
+ :item="item"
172
+ :modelValue="item[$props.itemValue!]"
173
+ @update:modelValue="() => onRadioChange(item[$props.itemValue!])"
174
+ >
175
+ <template
176
+ #label="{ font }"
177
+ >
330
178
  <FSRow
331
- align="center-right"
179
+ align="center-left"
180
+ :wrap="false"
332
181
  >
333
182
  <slot
334
- name="item-append"
335
- v-bind="{ item: item.raw }"
183
+ name="item-prepend"
184
+ v-bind="{ item }"
336
185
  />
186
+ <FSSpan
187
+ :font="font"
188
+ >
189
+ {{ item[$props.itemTitle!] }}
190
+ </FSSpan>
337
191
  </FSRow>
338
- </FSRow>
339
- </v-list-item>
340
- </template>
341
- <template
342
- #prepend-inner
343
- >
344
- <slot
345
- v-if="selectedItem"
346
- name="item-prepend"
347
- v-bind="{ item: selectedItem }"
348
- />
349
- </template>
350
- <template
351
- v-if="$props.multiple"
352
- #selection="{ index }"
353
- >
354
- <FSSpan
355
- v-if="index === $props.modelValue.length - 1"
356
- >
357
- {{ $props.placeholder }}
358
- </FSSpan>
359
- </template>
360
- <template
361
- #clear
362
- >
192
+ </template>
193
+ </FSRadio>
363
194
  <FSRow
364
- :wrap="false"
195
+ align="center-right"
365
196
  >
366
197
  <slot
367
- v-if="selectedItem"
368
198
  name="item-append"
369
- v-bind="{ item: selectedItem }"
370
- />
371
- <slot
372
- name="clear"
373
- >
374
- <FSButton
375
- v-if="$props.clearable && $props.editable && !!$props.modelValue"
376
- icon="mdi-close"
377
- variant="icon"
378
- :color="ColorEnum.Dark"
379
- @click="onClear"
380
- />
381
- </slot>
382
- </FSRow>
383
- </template>
384
- <template
385
- #append-inner
386
- >
387
- <slot
388
- name="append-inner"
389
- >
390
- <FSButton
391
- icon="mdi-chevron-down"
392
- variant="icon"
393
- :editable="$props.editable"
394
- :color="ColorEnum.Dark"
199
+ v-bind="{ item }"
395
200
  />
396
- </slot>
397
- </template>
398
- <template
399
- #no-data
400
- >
401
- <FSRow
402
- v-if="!$props.items || $props.items.length === 0"
403
- padding="15px"
404
- >
405
- <FSSpan>
406
- {{ $tr("ui.select-field.no-data", "No data") }}
407
- </FSSpan>
408
201
  </FSRow>
409
- </template>
410
- </v-select>
411
- <FSSlideGroup
412
- v-if="$props.multiple && Array.isArray($props.modelValue)"
202
+ </FSRow>
203
+ </FSCol>
204
+ </FSFadeOut>
205
+ <FSRow
206
+ v-if="!$props.items || $props.items.length === 0"
207
+ padding="4px 3px"
208
+ >
209
+ <FSSpan>
210
+ {{ $tr("ui.select-field.no-data", "No data") }}
211
+ </FSSpan>
212
+ </FSRow>
213
+ </template>
214
+ </FSDialogMenu>
215
+ </FSCol>
216
+ <FSBaseField
217
+ v-else
218
+ :description="$props.description"
219
+ :hideHeader="$props.hideHeader"
220
+ :required="$props.required"
221
+ :editable="$props.editable"
222
+ :label="$props.label"
223
+ :messages="messages"
224
+ >
225
+ <FSToggleSet
226
+ v-if="$props.toggleSet"
227
+ :editable="$props.editable"
228
+ :multiple="$props.multiple"
229
+ :required="$props.required"
230
+ :values="$props.items"
231
+ :rules="$props.rules"
232
+ :modelValue="$props.modelValue"
233
+ @update:modelValue="$emit('update:modelValue', $event)"
234
+ v-bind="$attrs"
235
+ >
236
+ <template
237
+ v-for="(_, name) in toggleSetSlots"
238
+ v-slot:[name]="slotData"
239
+ >
240
+ <slot
241
+ :name="`toggle-set-${name}`"
242
+ v-bind="slotData"
243
+ />
244
+ </template>
245
+ </FSToggleSet>
246
+ <FSCol
247
+ v-else
248
+ >
249
+ <v-select
250
+ class="fs-select-field"
251
+ variant="outlined"
252
+ :clearable="$props.clearable && $props.editable && !!$props.modelValue"
253
+ :itemTitle="$props.itemTitle"
254
+ :itemValue="$props.itemValue"
255
+ :readonly="!$props.editable"
256
+ :multiple="$props.multiple"
257
+ :validateOn="validateOn"
258
+ :persistentClear="true"
259
+ :listProps="listStyle"
260
+ :returnObject="false"
261
+ :items="$props.items"
262
+ :rules="$props.rules"
263
+ :hideDetails="true"
264
+ :menuIcon="null"
265
+ :style="style"
266
+ :modelValue="$props.modelValue"
267
+ @update:modelValue="onSingleChange"
268
+ v-bind="$attrs"
269
+ >
270
+ <template
271
+ v-for="(_, name) in selectSlots"
272
+ v-slot:[name]="slotData"
273
+ >
274
+ <slot
275
+ :name="`select-${name}`"
276
+ v-bind="slotData"
277
+ />
278
+ </template>
279
+ <template
280
+ #item="{ props, item }"
281
+ >
282
+ <v-list-item
283
+ v-bind="{ ...props, title: '' }"
413
284
  >
414
- <FSCard
415
- v-for="(item, index) in $props.items.filter((item: any) => $props.modelValue.includes(item[$props.itemValue!]))"
416
- variant="standard"
417
- :height="['40px', '36px']"
418
- :color="ColorEnum.Light"
419
- :border="false"
420
- :key="index"
285
+ <FSRow
286
+ align="center-left"
287
+ :wrap="false"
421
288
  >
422
- <FSRow
423
- align="center-left"
424
- padding="0 8px"
289
+ <FSCheckbox
290
+ v-if="$props.multiple"
291
+ :modelValue="$props.modelValue?.includes(item.raw[$props.itemValue!])"
292
+ @click="props.onClick"
293
+ >
294
+ <template
295
+ #label="{ font }"
296
+ >
297
+ <slot
298
+ name="item-prepend"
299
+ v-bind="{ item: item.raw }"
300
+ />
301
+ <FSSpan
302
+ :font="font"
303
+ >
304
+ {{ item.raw[$props.itemTitle!] }}
305
+ </FSSpan>
306
+ </template>
307
+ </FSCheckbox>
308
+ <template
309
+ v-else
425
310
  >
426
311
  <slot
427
312
  name="item-prepend"
428
- v-bind="{ item }"
313
+ v-bind="{ item: item.raw }"
429
314
  />
430
- <FSSpan>
431
- {{ item[$props.itemTitle!] }}
315
+ <FSSpan
316
+ :font="$props.modelValue === item.raw[$props.itemTitle!] ? 'text-button' : 'text-body'"
317
+ >
318
+ {{ item.raw[$props.itemTitle!] }}
432
319
  </FSSpan>
320
+ </template>
321
+ <FSRow
322
+ align="center-right"
323
+ >
433
324
  <slot
434
325
  name="item-append"
435
- v-bind="{ item }"
436
- />
437
- <FSButton
438
- icon="mdi-close"
439
- variant="icon"
440
- :color="ColorEnum.Dark"
441
- @click="() => onCheckboxChange(item[$props.itemValue!])"
326
+ v-bind="{ item: item.raw }"
442
327
  />
443
328
  </FSRow>
444
- </FSCard>
445
- </FSSlideGroup>
446
- </FSCol>
447
- </FSBaseField>
448
- </template>
449
- </template>
329
+ </FSRow>
330
+ </v-list-item>
331
+ </template>
332
+ <template
333
+ #prepend-inner
334
+ >
335
+ <slot
336
+ v-if="selectedItem"
337
+ name="item-prepend"
338
+ v-bind="{ item: selectedItem }"
339
+ />
340
+ </template>
341
+ <template
342
+ v-if="$props.multiple"
343
+ #selection="{ index }"
344
+ >
345
+ <FSSpan
346
+ v-if="index === $props.modelValue.length - 1"
347
+ >
348
+ {{ $props.placeholder }}
349
+ </FSSpan>
350
+ </template>
351
+ <template
352
+ #clear
353
+ >
354
+ <FSRow
355
+ :wrap="false"
356
+ >
357
+ <slot
358
+ v-if="selectedItem"
359
+ name="item-append"
360
+ v-bind="{ item: selectedItem }"
361
+ />
362
+ <slot
363
+ name="clear"
364
+ >
365
+ <FSButton
366
+ v-if="$props.clearable && $props.editable && !!$props.modelValue"
367
+ icon="mdi-close"
368
+ variant="icon"
369
+ :color="ColorEnum.Dark"
370
+ @click="onClear"
371
+ />
372
+ </slot>
373
+ </FSRow>
374
+ </template>
375
+ <template
376
+ #append-inner
377
+ >
378
+ <slot
379
+ name="append-inner"
380
+ >
381
+ <FSButton
382
+ icon="mdi-chevron-down"
383
+ variant="icon"
384
+ :editable="$props.editable"
385
+ :color="ColorEnum.Dark"
386
+ />
387
+ </slot>
388
+ </template>
389
+ <template
390
+ #no-data
391
+ >
392
+ <FSRow
393
+ v-if="!$props.items || $props.items.length === 0"
394
+ padding="15px"
395
+ >
396
+ <FSSpan>
397
+ {{ $tr("ui.select-field.no-data", "No data") }}
398
+ </FSSpan>
399
+ </FSRow>
400
+ </template>
401
+ </v-select>
402
+ <FSSlideGroup
403
+ v-if="$props.multiple && Array.isArray($props.modelValue)"
404
+ >
405
+ <FSCard
406
+ v-for="(item, index) in $props.items.filter((item: any) => $props.modelValue.includes(item[$props.itemValue!]))"
407
+ variant="standard"
408
+ :height="['40px', '36px']"
409
+ :color="ColorEnum.Light"
410
+ :border="false"
411
+ :key="index"
412
+ >
413
+ <FSRow
414
+ align="center-left"
415
+ padding="0 8px"
416
+ >
417
+ <slot
418
+ name="item-prepend"
419
+ v-bind="{ item }"
420
+ />
421
+ <FSSpan>
422
+ {{ item[$props.itemTitle!] }}
423
+ </FSSpan>
424
+ <slot
425
+ name="item-append"
426
+ v-bind="{ item }"
427
+ />
428
+ <FSButton
429
+ icon="mdi-close"
430
+ variant="icon"
431
+ :color="ColorEnum.Dark"
432
+ @click="() => onCheckboxChange(item[$props.itemValue!])"
433
+ />
434
+ </FSRow>
435
+ </FSCard>
436
+ </FSSlideGroup>
437
+ </FSCol>
438
+ </FSBaseField>
450
439
  </template>
451
440
 
452
441
  <script lang="ts">