@finema/core 3.20.0 → 3.20.2

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 (56) hide show
  1. package/dist/module.json +1 -1
  2. package/dist/module.mjs +53 -60
  3. package/dist/runtime/components/App.d.vue.ts +2 -2
  4. package/dist/runtime/components/App.vue.d.ts +2 -2
  5. package/dist/runtime/components/Empty.d.vue.ts +1 -1
  6. package/dist/runtime/components/Empty.vue.d.ts +1 -1
  7. package/dist/runtime/components/FlexDeck/index.vue +79 -79
  8. package/dist/runtime/components/Form/FieldWrapper.d.vue.ts +2 -2
  9. package/dist/runtime/components/Form/FieldWrapper.vue +13 -13
  10. package/dist/runtime/components/Form/FieldWrapper.vue.d.ts +2 -2
  11. package/dist/runtime/components/Form/Fields.vue +13 -13
  12. package/dist/runtime/components/Form/InputCheckbox/index.vue +18 -18
  13. package/dist/runtime/components/Form/InputCheckboxGroup/index.vue +21 -21
  14. package/dist/runtime/components/Form/InputCurrency/index.vue +49 -49
  15. package/dist/runtime/components/Form/InputDateTime/index.vue +63 -63
  16. package/dist/runtime/components/Form/InputDateTimeRange/index.vue +56 -56
  17. package/dist/runtime/components/Form/InputNumber/index.vue +20 -20
  18. package/dist/runtime/components/Form/InputSelect/index.vue +110 -110
  19. package/dist/runtime/components/Form/InputSelectMultiple/index.vue +118 -118
  20. package/dist/runtime/components/Form/InputTags/index.d.vue.ts +2 -2
  21. package/dist/runtime/components/Form/InputTags/index.vue +54 -54
  22. package/dist/runtime/components/Form/InputTags/index.vue.d.ts +2 -2
  23. package/dist/runtime/components/Form/InputText/index.vue +86 -86
  24. package/dist/runtime/components/Form/InputTextarea/index.vue +18 -18
  25. package/dist/runtime/components/Form/InputTime/index.vue +38 -38
  26. package/dist/runtime/components/Form/InputToggle/index.vue +17 -17
  27. package/dist/runtime/components/Form/InputUploadDropzone/index.vue +30 -30
  28. package/dist/runtime/components/Form/InputUploadDropzoneAuto/index.vue +50 -50
  29. package/dist/runtime/components/Form/InputUploadDropzoneAutoMultiple/index.vue +50 -50
  30. package/dist/runtime/components/Form/InputUploadImageAuto/index.vue +50 -50
  31. package/dist/runtime/components/Form/InputWYSIWYG/EditorImageUploadNode.vue +18 -18
  32. package/dist/runtime/components/Form/InputWYSIWYG/EditorLinkPopover.vue +65 -65
  33. package/dist/runtime/components/Form/InputWYSIWYG/README.md +96 -96
  34. package/dist/runtime/components/Form/InputWYSIWYG/index.vue +41 -41
  35. package/dist/runtime/components/Form/fileState/EmptyState.vue +21 -21
  36. package/dist/runtime/components/Form/fileState/FailedState.vue +33 -33
  37. package/dist/runtime/components/Form/fileState/LoadingState.vue +24 -24
  38. package/dist/runtime/components/Form/fileState/MultipleFilesState.vue +75 -75
  39. package/dist/runtime/components/Form/fileState/PreviewModal.vue +23 -23
  40. package/dist/runtime/components/Form/index.vue +5 -5
  41. package/dist/runtime/components/Image.vue +28 -28
  42. package/dist/runtime/components/Log/index.vue +17 -17
  43. package/dist/runtime/components/Table/Base.d.vue.ts +4 -4
  44. package/dist/runtime/components/Table/Base.vue +117 -117
  45. package/dist/runtime/components/Table/Base.vue.d.ts +4 -4
  46. package/dist/runtime/components/Table/ColumnDate.vue +1 -1
  47. package/dist/runtime/components/Table/ColumnDateTime.vue +1 -1
  48. package/dist/runtime/components/Table/ColumnImage.vue +4 -4
  49. package/dist/runtime/components/Table/ColumnText.vue +10 -10
  50. package/dist/runtime/components/Table/Pagination.vue +62 -62
  51. package/dist/runtime/components/Table/Simple.vue +19 -19
  52. package/dist/runtime/components/Table/index.vue +33 -33
  53. package/dist/runtime/components/TeleportSafe.d.vue.ts +2 -2
  54. package/dist/runtime/components/TeleportSafe.vue.d.ts +2 -2
  55. package/dist/runtime/server/tsconfig.json +3 -3
  56. package/package.json +10 -10
@@ -1,56 +1,56 @@
1
1
  <template>
2
- <FieldWrapper
3
- v-bind="wrapperProps"
4
- :error-message="undefined"
5
- >
6
- <div
2
+ <FieldWrapper
3
+ v-bind="wrapperProps"
4
+ :error-message="undefined"
5
+ >
6
+ <div
7
7
  :class="['inline-flex w-full items-center -space-x-px rounded-lg ring-1', {
8
8
  'ring-error': wrapperProps.errorMessage,
9
9
  'ring-gray-300': !wrapperProps.errorMessage
10
- }]"
11
- >
12
- <p class="pl-3 text-lg">
13
- {{ currencySymbol }}
14
- </p>
15
- <InputNumber
16
- :model-value="value.value"
17
- :disabled="wrapperProps.disabled"
18
- :name="name"
19
- :placeholder="wrapperProps.placeholder"
20
- :autofocus="!!autoFocus"
21
- :readonly="readonly"
22
- :min="min"
23
- :max="max"
24
- :step="step"
25
- :format-options="formatOptions"
26
- :increment="false"
27
- :decrement="false"
28
- variant="none"
29
- @update:model-value="onAmountChange"
30
- />
31
- <Select
32
- :model-value="value.currency"
33
- :items="options"
34
- :disabled="wrapperProps.disabled"
35
- value-key="value"
36
- label-key="label"
37
- variant="none"
38
- size="xl"
39
- class="cursor-pointer"
40
- @update:model-value="onCurrencyChange"
41
- >
42
- <template #default="{ modelValue }">
43
- {{ options.find((item) => item.value === modelValue)?.label || modelValue }}
44
- </template>
45
- </Select>
46
- </div>
47
- <p
48
- v-if="wrapperProps.errorMessage"
49
- class="text-error mt-2"
50
- >
51
- {{ wrapperProps.errorMessage }}
52
- </p>
53
- </FieldWrapper>
10
+ }]"
11
+ >
12
+ <p class="pl-3 text-lg">
13
+ {{ currencySymbol }}
14
+ </p>
15
+ <InputNumber
16
+ :model-value="value.value"
17
+ :disabled="wrapperProps.disabled"
18
+ :name="name"
19
+ :placeholder="wrapperProps.placeholder"
20
+ :autofocus="!!autoFocus"
21
+ :readonly="readonly"
22
+ :min="min"
23
+ :max="max"
24
+ :step="step"
25
+ :format-options="formatOptions"
26
+ :increment="false"
27
+ :decrement="false"
28
+ variant="none"
29
+ @update:model-value="onAmountChange"
30
+ />
31
+ <Select
32
+ :model-value="value.currency"
33
+ :items="options"
34
+ :disabled="wrapperProps.disabled"
35
+ value-key="value"
36
+ label-key="label"
37
+ variant="none"
38
+ size="xl"
39
+ class="cursor-pointer"
40
+ @update:model-value="onCurrencyChange"
41
+ >
42
+ <template #default="{ modelValue }">
43
+ {{ options.find((item) => item.value === modelValue)?.label || modelValue }}
44
+ </template>
45
+ </Select>
46
+ </div>
47
+ <p
48
+ v-if="wrapperProps.errorMessage"
49
+ class="text-error mt-2"
50
+ >
51
+ {{ wrapperProps.errorMessage }}
52
+ </p>
53
+ </FieldWrapper>
54
54
  </template>
55
55
 
56
56
  <script setup>
@@ -1,74 +1,74 @@
1
1
  <template>
2
- <FieldWrapper v-bind="wrapperProps">
3
- <Datepicker
4
- :model-value="innerValue"
5
- :disabled="wrapperProps.disabled"
6
- :cancel-text="appConfig.core?.locale === 'th' ? '\u0E22\u0E01\u0E40\u0E25\u0E34\u0E01' : 'Cancel'"
7
- :select-text="appConfig.core?.locale === 'th' ? '\u0E15\u0E01\u0E25\u0E07' : 'Select'"
8
- :locale="appConfig.core?.locale"
9
- :enable-time-picker="!disabledTime"
10
- :auto-apply="autoApply && disabledTime"
11
- :placeholder="wrapperProps.placeholder"
12
- :format="format"
13
- :min-date="minDate"
14
- :max-date="maxDate"
15
- :min-time="minTime"
16
- :max-time="maxTime"
17
- :six-weeks="true"
18
- :start-time="startTime"
19
- :teleport="teleport"
20
- :required="required"
21
- :flow="flowCalendar"
22
- @update:model-value="onInput"
23
- >
24
- <template
25
- v-if="appConfig.core?.locale === 'th' && appConfig.core?.is_thai_year"
26
- #year="{ value }"
27
- >
28
- {{ value + 543 }}
29
- </template>
30
- <template
31
- v-if="appConfig.core?.locale === 'th' && appConfig.core?.is_thai_year"
32
- #year-overlay-value="{ value }"
33
- >
34
- {{ value + 543 }}
35
- </template>
36
- <template #dp-input="{ value: innerValue }">
37
- <Input
38
- v-if="!readMode"
39
- :trailing-icon="innerValue ? void 0 : 'i-heroicons-calendar-days'"
40
- type="text"
41
- :disabled="wrapperProps.disabled"
42
- :model-value="innerValue"
43
- :placeholder="wrapperProps.placeholder"
44
- :readonly="true"
2
+ <FieldWrapper v-bind="wrapperProps">
3
+ <Datepicker
4
+ :model-value="innerValue"
5
+ :disabled="wrapperProps.disabled"
6
+ :cancel-text="appConfig.core?.locale === 'th' ? '\u0E22\u0E01\u0E40\u0E25\u0E34\u0E01' : 'Cancel'"
7
+ :select-text="appConfig.core?.locale === 'th' ? '\u0E15\u0E01\u0E25\u0E07' : 'Select'"
8
+ :locale="appConfig.core?.locale"
9
+ :enable-time-picker="!disabledTime"
10
+ :auto-apply="autoApply && disabledTime"
11
+ :placeholder="wrapperProps.placeholder"
12
+ :format="format"
13
+ :min-date="minDate"
14
+ :max-date="maxDate"
15
+ :min-time="minTime"
16
+ :max-time="maxTime"
17
+ :six-weeks="true"
18
+ :start-time="startTime"
19
+ :teleport="teleport"
20
+ :required="required"
21
+ :flow="flowCalendar"
22
+ @update:model-value="onInput"
23
+ >
24
+ <template
25
+ v-if="appConfig.core?.locale === 'th' && appConfig.core?.is_thai_year"
26
+ #year="{ value }"
27
+ >
28
+ {{ value + 543 }}
29
+ </template>
30
+ <template
31
+ v-if="appConfig.core?.locale === 'th' && appConfig.core?.is_thai_year"
32
+ #year-overlay-value="{ value }"
33
+ >
34
+ {{ value + 543 }}
35
+ </template>
36
+ <template #dp-input="{ value: innerValue }">
37
+ <Input
38
+ v-if="!readMode"
39
+ :trailing-icon="innerValue ? void 0 : 'i-heroicons-calendar-days'"
40
+ type="text"
41
+ :disabled="wrapperProps.disabled"
42
+ :model-value="innerValue"
43
+ :placeholder="wrapperProps.placeholder"
44
+ :readonly="true"
45
45
  :ui="{
46
46
  base: 'cursor-pointer select-none',
47
47
  trailingIcon: 'cursor-pointer'
48
- }"
49
- />
50
- <div
51
- v-else
52
- class="cursor-pointer rounded-md px-2 py-1 hover:bg-gray-100"
53
- :class="classReadMode"
54
- >
55
- {{ innerValue || "None" }}
56
- </div>
57
- </template>
58
- <template #clear-icon="{ clear }">
59
- <Icon
60
- v-if="clearable"
61
- :name="clearIcon"
48
+ }"
49
+ />
50
+ <div
51
+ v-else
52
+ class="cursor-pointer rounded-md px-2 py-1 hover:bg-gray-100"
53
+ :class="classReadMode"
54
+ >
55
+ {{ innerValue || "None" }}
56
+ </div>
57
+ </template>
58
+ <template #clear-icon="{ clear }">
59
+ <Icon
60
+ v-if="clearable"
61
+ :name="clearIcon"
62
62
  :class="
63
63
  theme.clearIcon({
64
64
  class: [ui?.clearIcon]
65
65
  })
66
- "
67
- @click.stop="clear"
68
- />
69
- </template>
70
- </Datepicker>
71
- </FieldWrapper>
66
+ "
67
+ @click.stop="clear"
68
+ />
69
+ </template>
70
+ </Datepicker>
71
+ </FieldWrapper>
72
72
  </template>
73
73
 
74
74
  <script setup>
@@ -1,65 +1,65 @@
1
1
  <template>
2
- <FieldWrapper v-bind="wrapperProps">
3
- <Datepicker
4
- ref="datepicker"
5
- v-model="innerValueRef"
6
- :teleport="teleport"
7
- :disabled="wrapperProps.disabled"
8
- :cancel-text="appConfig.core?.locale === 'th' ? '\u0E22\u0E01\u0E40\u0E25\u0E34\u0E01' : 'Cancel'"
9
- :select-text="appConfig.core?.locale === 'th' ? '\u0E15\u0E01\u0E25\u0E07' : 'Select'"
10
- :locale="appConfig.core?.locale"
11
- :format="format"
12
- :enable-time-picker="!disabledTime"
13
- :placeholder="wrapperProps.placeholder"
14
- :min-date="minDate"
15
- :max-date="maxDate"
16
- :min-time="minTime"
17
- :max-time="maxTime"
18
- :six-weeks="true"
19
- :start-time="startTime"
20
- :multi-calendars="!isDisabledMultiCalendar"
21
- :required="required"
22
- time-picker-inline
23
- range
24
- :flow="['calendar', 'time']"
25
- @update:model-value="onInput"
26
- >
27
- <template
28
- v-if="appConfig.core?.locale === 'th' && appConfig.core?.is_thai_year"
29
- #year="{ value }"
30
- >
31
- {{ value + 543 }}
32
- </template>
33
- <template
34
- v-if="appConfig.core?.locale === 'th' && appConfig.core?.is_thai_year"
35
- #year-overlay-value="{ value }"
36
- >
37
- {{ value + 543 }}
38
- </template>
39
- <template #dp-input="{ value: innerValue }">
40
- <Input
41
- :trailing-icon="innerValue ? void 0 : 'i-heroicons-calendar-days'"
42
- type="text"
43
- :model-value="innerValue"
44
- :placeholder="wrapperProps.placeholder"
45
- :readonly="true"
2
+ <FieldWrapper v-bind="wrapperProps">
3
+ <Datepicker
4
+ ref="datepicker"
5
+ v-model="innerValueRef"
6
+ :teleport="teleport"
7
+ :disabled="wrapperProps.disabled"
8
+ :cancel-text="appConfig.core?.locale === 'th' ? '\u0E22\u0E01\u0E40\u0E25\u0E34\u0E01' : 'Cancel'"
9
+ :select-text="appConfig.core?.locale === 'th' ? '\u0E15\u0E01\u0E25\u0E07' : 'Select'"
10
+ :locale="appConfig.core?.locale"
11
+ :format="format"
12
+ :enable-time-picker="!disabledTime"
13
+ :placeholder="wrapperProps.placeholder"
14
+ :min-date="minDate"
15
+ :max-date="maxDate"
16
+ :min-time="minTime"
17
+ :max-time="maxTime"
18
+ :six-weeks="true"
19
+ :start-time="startTime"
20
+ :multi-calendars="!isDisabledMultiCalendar"
21
+ :required="required"
22
+ time-picker-inline
23
+ range
24
+ :flow="['calendar', 'time']"
25
+ @update:model-value="onInput"
26
+ >
27
+ <template
28
+ v-if="appConfig.core?.locale === 'th' && appConfig.core?.is_thai_year"
29
+ #year="{ value }"
30
+ >
31
+ {{ value + 543 }}
32
+ </template>
33
+ <template
34
+ v-if="appConfig.core?.locale === 'th' && appConfig.core?.is_thai_year"
35
+ #year-overlay-value="{ value }"
36
+ >
37
+ {{ value + 543 }}
38
+ </template>
39
+ <template #dp-input="{ value: innerValue }">
40
+ <Input
41
+ :trailing-icon="innerValue ? void 0 : 'i-heroicons-calendar-days'"
42
+ type="text"
43
+ :model-value="innerValue"
44
+ :placeholder="wrapperProps.placeholder"
45
+ :readonly="true"
46
46
  :ui="{
47
47
  base: 'cursor-pointer select-none',
48
48
  trailingIcon: 'cursor-pointer'
49
- }"
50
- />
51
- </template>
52
- <template #clear-icon="{ clear }">
53
- <Icon
54
- :name="clearIcon"
49
+ }"
50
+ />
51
+ </template>
52
+ <template #clear-icon="{ clear }">
53
+ <Icon
54
+ :name="clearIcon"
55
55
  :class="theme.clearIcon({
56
56
  class: [ui?.clearIcon]
57
- })"
58
- @click.stop="clear"
59
- />
60
- </template>
61
- </Datepicker>
62
- </FieldWrapper>
57
+ })"
58
+ @click.stop="clear"
59
+ />
60
+ </template>
61
+ </Datepicker>
62
+ </FieldWrapper>
63
63
  </template>
64
64
 
65
65
  <script setup>
@@ -1,24 +1,24 @@
1
1
  <template>
2
- <FieldWrapper v-bind="wrapperProps">
3
- <InputNumber
4
- :model-value="value"
5
- :disabled="wrapperProps.disabled"
6
- :name="name"
7
- :placeholder="wrapperProps.placeholder"
8
- :autofocus="!!autoFocus"
9
- :readonly="readonly"
10
- :orientation="orientation"
11
- :increment="increment"
12
- :decrement="decrement"
13
- :min="min"
14
- :max="max"
15
- :step="step"
16
- :disable-wheel-change="disableWheelChange"
17
- :format-options="formatOptions"
18
- :ui="ui"
19
- @update:model-value="onChange"
20
- />
21
- </FieldWrapper>
2
+ <FieldWrapper v-bind="wrapperProps">
3
+ <InputNumber
4
+ :model-value="value"
5
+ :disabled="wrapperProps.disabled"
6
+ :name="name"
7
+ :placeholder="wrapperProps.placeholder"
8
+ :autofocus="!!autoFocus"
9
+ :readonly="readonly"
10
+ :orientation="orientation"
11
+ :increment="increment"
12
+ :decrement="decrement"
13
+ :min="min"
14
+ :max="max"
15
+ :step="step"
16
+ :disable-wheel-change="disableWheelChange"
17
+ :format-options="formatOptions"
18
+ :ui="ui"
19
+ @update:model-value="onChange"
20
+ />
21
+ </FieldWrapper>
22
22
  </template>
23
23
 
24
24
  <script setup>
@@ -1,135 +1,135 @@
1
1
  <template>
2
- <FieldWrapper v-bind="wrapperProps">
3
- <SelectMenu
4
- :model-value="value"
5
- :items="options"
6
- :placeholder="wrapperProps.placeholder"
7
- :disabled="wrapperProps.disabled"
8
- :loading="loading"
9
- :search-input="searchInput ?? void 0"
10
- :selected-icon="selectedIcon"
11
- value-key="value"
12
- label-key="label"
13
- :icon="icon"
14
- :ui="ui"
15
- :variant="variant"
16
- :ignore-filter="ignoreFilter"
17
- :leading-icon="options.find((item2) => item2.value === value)?.icon"
18
- :avatar="options.find((item2) => item2.value === value)?.avatar"
19
- @update:modelValue="onChange"
20
- @update:searchTerm="onSearch"
21
- >
22
- <template #default="{ modelValue, ui: selectMenuUi }">
23
- <Chip
24
- v-if="options.find((item2) => item2.value === modelValue)?.chip"
25
- v-bind="options.find((item2) => item2.value === modelValue)?.chip"
26
- inset
27
- standalone
28
- :size="selectMenuUi.itemLeadingChipSize()"
29
- :class="selectMenuUi.itemLeadingChip()"
30
- />
31
- <div
32
- v-if="value"
2
+ <FieldWrapper v-bind="wrapperProps">
3
+ <SelectMenu
4
+ :model-value="value"
5
+ :items="options"
6
+ :placeholder="wrapperProps.placeholder"
7
+ :disabled="wrapperProps.disabled"
8
+ :loading="loading"
9
+ :search-input="searchInput ?? void 0"
10
+ :selected-icon="selectedIcon"
11
+ value-key="value"
12
+ label-key="label"
13
+ :icon="icon"
14
+ :ui="ui"
15
+ :variant="variant"
16
+ :ignore-filter="ignoreFilter"
17
+ :leading-icon="options.find((item2) => item2.value === value)?.icon"
18
+ :avatar="options.find((item2) => item2.value === value)?.avatar"
19
+ @update:modelValue="onChange"
20
+ @update:searchTerm="onSearch"
21
+ >
22
+ <template #default="{ modelValue, ui: selectMenuUi }">
23
+ <Chip
24
+ v-if="options.find((item2) => item2.value === modelValue)?.chip"
25
+ v-bind="options.find((item2) => item2.value === modelValue)?.chip"
26
+ inset
27
+ standalone
28
+ :size="selectMenuUi.itemLeadingChipSize()"
29
+ :class="selectMenuUi.itemLeadingChip()"
30
+ />
31
+ <div
32
+ v-if="value"
33
33
  :class="
34
34
  theme.selectedWrapper({
35
35
  class: [ui?.selectedWrapper]
36
36
  })
37
- "
38
- >
39
- <div class="flex min-w-0 flex-1 items-center gap-x-2 overflow-hidden">
40
- <component
41
- :is="selectedOption.component"
37
+ "
38
+ >
39
+ <div class="flex min-w-0 flex-1 items-center gap-x-2 overflow-hidden">
40
+ <component
41
+ :is="selectedOption.component"
42
42
  v-if="
43
43
  componentPosition === 'leading' && selectedOption?.component
44
- "
45
- v-bind="selectedOption.componentProps"
46
- />
47
- <span
44
+ "
45
+ v-bind="selectedOption.componentProps"
46
+ />
47
+ <span
48
48
  :class="[
49
49
  'min-w-0 flex-1',
50
50
  theme.selectedLabel({
51
51
  class: [ui?.selectedLabel]
52
52
  })
53
- ]"
54
- >
55
- <span
53
+ ]"
54
+ >
55
+ <span
56
56
  :class="[
57
57
  props.selectedLabelLines && props.selectedLabelLines > 1 ? 'block min-w-0 break-words whitespace-normal' : 'block min-w-0 truncate'
58
- ]"
59
- :style="selectedLabelStyle"
60
- >
61
- {{ selectedOption?.label ?? modelValue }}
62
- </span>
63
- </span>
64
- <component
65
- :is="selectedOption.component"
58
+ ]"
59
+ :style="selectedLabelStyle"
60
+ >
61
+ {{ selectedOption?.label ?? modelValue }}
62
+ </span>
63
+ </span>
64
+ <component
65
+ :is="selectedOption.component"
66
66
  v-if="
67
67
  componentPosition === 'trailing' && selectedOption?.component
68
- "
69
- v-bind="selectedOption.componentProps"
70
- />
71
- </div>
72
- <Icon
73
- v-if="clearable"
74
- :name="clearIcon"
68
+ "
69
+ v-bind="selectedOption.componentProps"
70
+ />
71
+ </div>
72
+ <Icon
73
+ v-if="clearable"
74
+ :name="clearIcon"
75
75
  :class="
76
76
  theme.clearIcon({
77
77
  class: [ui?.clearIcon]
78
78
  })
79
- "
80
- @click.stop="onChange(void 0)"
81
- />
82
- </div>
83
- </template>
84
-
85
- <template #item="{ item }">
86
- <div
87
- v-if="item?.type === 'separator'"
88
- class="my-1 h-px bg-gray-200"
89
- />
90
- <div
91
- v-else
92
- class="flex min-w-0 items-center gap-x-2"
93
- >
94
- <Chip
95
- v-if="item?.chip"
96
- v-bind="item.chip"
97
- inset
98
- standalone
99
- size="2xs"
100
- />
101
- <Icon
102
- v-if="item?.icon"
103
- :name="item.icon"
104
- class="size-4"
105
- />
106
- <Avatar
107
- v-if="item?.avatar"
108
- v-bind="item.avatar"
109
- size="2xs"
110
- />
111
- <component
112
- :is="item?.component"
113
- v-if="componentPosition === 'leading' && item?.component"
114
- v-bind="item?.componentProps"
115
- />
116
- <span
79
+ "
80
+ @click.stop="onChange(void 0)"
81
+ />
82
+ </div>
83
+ </template>
84
+
85
+ <template #item="{ item }">
86
+ <div
87
+ v-if="item?.type === 'separator'"
88
+ class="my-1 h-px bg-gray-200"
89
+ />
90
+ <div
91
+ v-else
92
+ class="flex min-w-0 items-center gap-x-2"
93
+ >
94
+ <Chip
95
+ v-if="item?.chip"
96
+ v-bind="item.chip"
97
+ inset
98
+ standalone
99
+ size="2xs"
100
+ />
101
+ <Icon
102
+ v-if="item?.icon"
103
+ :name="item.icon"
104
+ class="size-4"
105
+ />
106
+ <Avatar
107
+ v-if="item?.avatar"
108
+ v-bind="item.avatar"
109
+ size="2xs"
110
+ />
111
+ <component
112
+ :is="item?.component"
113
+ v-if="componentPosition === 'leading' && item?.component"
114
+ v-bind="item?.componentProps"
115
+ />
116
+ <span
117
117
  :class="[
118
118
  props.menuLabelLines && props.menuLabelLines > 1 ? 'min-w-0 break-words whitespace-normal' : 'truncate'
119
- ]"
120
- :style="menuLabelStyle"
121
- >
122
- {{ item?.label ?? item?.value }}
123
- </span>
124
- <component
125
- :is="item?.component"
126
- v-if="componentPosition === 'trailing' && item?.component"
127
- v-bind="item?.componentProps"
128
- />
129
- </div>
130
- </template>
131
- </SelectMenu>
132
- </FieldWrapper>
119
+ ]"
120
+ :style="menuLabelStyle"
121
+ >
122
+ {{ item?.label ?? item?.value }}
123
+ </span>
124
+ <component
125
+ :is="item?.component"
126
+ v-if="componentPosition === 'trailing' && item?.component"
127
+ v-bind="item?.componentProps"
128
+ />
129
+ </div>
130
+ </template>
131
+ </SelectMenu>
132
+ </FieldWrapper>
133
133
  </template>
134
134
 
135
135
  <script setup>