@finema/core 3.5.1 → 3.5.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 (37) hide show
  1. package/dist/module.json +1 -1
  2. package/dist/module.mjs +1 -1
  3. package/dist/runtime/components/Form/FieldWrapper.vue +13 -13
  4. package/dist/runtime/components/Form/Fields.vue +13 -13
  5. package/dist/runtime/components/Form/InputCheckbox/index.vue +18 -18
  6. package/dist/runtime/components/Form/InputCheckboxGroup/index.vue +21 -21
  7. package/dist/runtime/components/Form/InputCurrency/index.vue +49 -49
  8. package/dist/runtime/components/Form/InputDateTime/index.vue +53 -53
  9. package/dist/runtime/components/Form/InputDateTimeRange/index.vue +56 -56
  10. package/dist/runtime/components/Form/InputNumber/index.vue +20 -20
  11. package/dist/runtime/components/Form/InputSelect/index.vue +46 -46
  12. package/dist/runtime/components/Form/InputSelectMultiple/index.vue +62 -62
  13. package/dist/runtime/components/Form/InputTags/index.vue +54 -54
  14. package/dist/runtime/components/Form/InputTextarea/index.vue +18 -18
  15. package/dist/runtime/components/Form/InputTime/index.vue +38 -38
  16. package/dist/runtime/components/Form/InputToggle/index.vue +17 -17
  17. package/dist/runtime/components/Form/InputUploadDropzone/index.vue +30 -30
  18. package/dist/runtime/components/Form/InputUploadDropzoneAuto/index.vue +50 -50
  19. package/dist/runtime/components/Form/InputUploadDropzoneAutoMultiple/index.vue +50 -50
  20. package/dist/runtime/components/Form/InputUploadImageAuto/index.vue +50 -50
  21. package/dist/runtime/components/Form/fileState/EmptyState.vue +21 -21
  22. package/dist/runtime/components/Form/fileState/FailedState.vue +33 -33
  23. package/dist/runtime/components/Form/fileState/LoadingState.vue +24 -24
  24. package/dist/runtime/components/Form/fileState/MultipleFilesState.vue +75 -75
  25. package/dist/runtime/components/Form/fileState/PreviewModal.vue +23 -23
  26. package/dist/runtime/components/Form/fileState/useUploadStateMultiple.js +2 -2
  27. package/dist/runtime/components/Form/index.vue +5 -5
  28. package/dist/runtime/components/Image.vue +28 -28
  29. package/dist/runtime/components/Log/index.vue +17 -17
  30. package/dist/runtime/components/Table/ColumnDate.vue +1 -1
  31. package/dist/runtime/components/Table/ColumnDateTime.vue +1 -1
  32. package/dist/runtime/components/Table/ColumnImage.vue +4 -4
  33. package/dist/runtime/components/Table/ColumnText.vue +1 -1
  34. package/dist/runtime/components/Table/Pagination.vue +46 -46
  35. package/dist/runtime/components/Table/Simple.vue +17 -17
  36. package/dist/runtime/server/tsconfig.json +3 -3
  37. package/package.json +2 -2
@@ -1,56 +1,56 @@
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
- :leading-icon="options.find((item) => item.value === value)?.icon"
16
- :avatar="options.find((item) => item.value === value)?.avatar"
17
- @update:modelValue="onChange"
18
- @update:searchTerm="onSearch"
19
- >
20
- <template #default="{ modelValue, ui: selectMenuUi }">
21
- <Chip
22
- v-if="options.find((item) => item.value === modelValue)?.chip"
23
- v-bind="options.find((item) => item.value === modelValue)?.chip"
24
- inset
25
- standalone
26
- :size="selectMenuUi.itemLeadingChipSize()"
27
- :class="selectMenuUi.itemLeadingChip()"
28
- />
29
- <div
30
- 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
+ :leading-icon="options.find((item) => item.value === value)?.icon"
16
+ :avatar="options.find((item) => item.value === value)?.avatar"
17
+ @update:modelValue="onChange"
18
+ @update:searchTerm="onSearch"
19
+ >
20
+ <template #default="{ modelValue, ui: selectMenuUi }">
21
+ <Chip
22
+ v-if="options.find((item) => item.value === modelValue)?.chip"
23
+ v-bind="options.find((item) => item.value === modelValue)?.chip"
24
+ inset
25
+ standalone
26
+ :size="selectMenuUi.itemLeadingChipSize()"
27
+ :class="selectMenuUi.itemLeadingChip()"
28
+ />
29
+ <div
30
+ v-if="value"
31
31
  :class="theme.selectedWrapper({
32
32
  class: [ui?.selectedWrapper]
33
- })"
34
- >
35
- <span
33
+ })"
34
+ >
35
+ <span
36
36
  :class="theme.selectedLabel({
37
37
  class: [ui?.selectedLabel]
38
- })"
39
- >
40
- {{ options.find((item) => item.value === modelValue)?.label || modelValue }}
41
- </span>
42
- <Icon
43
- v-if="clearable"
44
- :name="clearIcon"
38
+ })"
39
+ >
40
+ {{ options.find((item) => item.value === modelValue)?.label || modelValue }}
41
+ </span>
42
+ <Icon
43
+ v-if="clearable"
44
+ :name="clearIcon"
45
45
  :class="theme.clearIcon({
46
46
  class: [ui?.clearIcon]
47
- })"
48
- @click.stop="onChange(void 0)"
49
- />
50
- </div>
51
- </template>
52
- </SelectMenu>
53
- </FieldWrapper>
47
+ })"
48
+ @click.stop="onChange(void 0)"
49
+ />
50
+ </div>
51
+ </template>
52
+ </SelectMenu>
53
+ </FieldWrapper>
54
54
  </template>
55
55
 
56
56
  <script setup>
@@ -1,76 +1,76 @@
1
1
  <template>
2
- <FieldWrapper v-bind="wrapperProps">
3
- <SelectMenu
4
- :model-value="value"
5
- :items="options"
6
- multiple
7
- :placeholder="wrapperProps.placeholder"
8
- :disabled="wrapperProps.disabled"
9
- :loading="loading"
10
- :search-input="searchInput"
11
- :selected-icon="selectedIcon"
12
- value-key="value"
13
- label-key="label"
14
- :icon="icon"
15
- :ui="ui"
16
- :ignore-filter="!!$attrs.onSearch"
17
- @update:model-value="onChange"
18
- @update:searchTerm="onSearch"
19
- >
20
- <template #default="{ modelValue, ui: selectMenuUi }">
21
- <div
22
- v-if="!ArrayHelper.isEmpty(value)"
2
+ <FieldWrapper v-bind="wrapperProps">
3
+ <SelectMenu
4
+ :model-value="value"
5
+ :items="options"
6
+ multiple
7
+ :placeholder="wrapperProps.placeholder"
8
+ :disabled="wrapperProps.disabled"
9
+ :loading="loading"
10
+ :search-input="searchInput"
11
+ :selected-icon="selectedIcon"
12
+ value-key="value"
13
+ label-key="label"
14
+ :icon="icon"
15
+ :ui="ui"
16
+ :ignore-filter="!!$attrs.onSearch"
17
+ @update:model-value="onChange"
18
+ @update:searchTerm="onSearch"
19
+ >
20
+ <template #default="{ modelValue, ui: selectMenuUi }">
21
+ <div
22
+ v-if="!ArrayHelper.isEmpty(value)"
23
23
  :class="theme.tagsWrapper({
24
24
  class: [ui?.tagsWrapper]
25
- })"
26
- >
27
- <div
28
- v-for="_value in ArrayHelper.toArray(modelValue)"
29
- :key="_value"
25
+ })"
26
+ >
27
+ <div
28
+ v-for="_value in ArrayHelper.toArray(modelValue)"
29
+ :key="_value"
30
30
  :class="theme.tagsItem({
31
31
  class: [ui?.tagsItem]
32
- })"
33
- >
34
- <Chip
35
- v-if="options.find((item) => item.value === _value)?.chip"
36
- v-bind="options.find((item) => item.value === _value)?.chip"
37
- inset
38
- standalone
39
- :size="selectMenuUi.itemLeadingChipSize()"
40
- class="p-1"
41
- />
42
- <Icon
43
- v-if="options.find((item) => item.value === _value)?.icon"
44
- :name="options.find((item) => item.value === _value)?.icon"
45
- class="size-4"
46
- />
47
- <Avatar
48
- v-if="options.find((item) => item.value === _value)?.avatar"
49
- v-bind="options.find((item) => item.value === _value)?.avatar"
50
- :class="selectMenuUi.itemLeadingAvatar()"
51
- size="2xs"
52
- />
53
- <div
32
+ })"
33
+ >
34
+ <Chip
35
+ v-if="options.find((item) => item.value === _value)?.chip"
36
+ v-bind="options.find((item) => item.value === _value)?.chip"
37
+ inset
38
+ standalone
39
+ :size="selectMenuUi.itemLeadingChipSize()"
40
+ class="p-1"
41
+ />
42
+ <Icon
43
+ v-if="options.find((item) => item.value === _value)?.icon"
44
+ :name="options.find((item) => item.value === _value)?.icon"
45
+ class="size-4"
46
+ />
47
+ <Avatar
48
+ v-if="options.find((item) => item.value === _value)?.avatar"
49
+ v-bind="options.find((item) => item.value === _value)?.avatar"
50
+ :class="selectMenuUi.itemLeadingAvatar()"
51
+ size="2xs"
52
+ />
53
+ <div
54
54
  :class="theme.tagsItemText({
55
55
  class: [ui?.tagsItemText]
56
- })"
57
- >
58
- {{ options.find((item) => item.value === _value)?.label || _value }}
59
- <Icon
56
+ })"
57
+ >
58
+ {{ options.find((item) => item.value === _value)?.label || _value }}
59
+ <Icon
60
60
  :name="theme.tagsItemDeleteIcon({
61
61
  class: [ui?.tagsItemDeleteIcon]
62
- })"
62
+ })"
63
63
  :class="theme.tagsItemDelete({
64
64
  class: [ui?.tagsItemDelete]
65
- })"
66
- @click.stop="handleDelete(_value)"
67
- />
68
- </div>
69
- </div>
70
- </div>
71
- </template>
72
- </SelectMenu>
73
- </FieldWrapper>
65
+ })"
66
+ @click.stop="handleDelete(_value)"
67
+ />
68
+ </div>
69
+ </div>
70
+ </div>
71
+ </template>
72
+ </SelectMenu>
73
+ </FieldWrapper>
74
74
  </template>
75
75
 
76
76
  <script setup>
@@ -1,63 +1,63 @@
1
1
  <template>
2
- <FieldWrapper v-bind="wrapperProps">
3
- <Popover
4
- v-model:open="showSuggestions"
5
- :dismissible="false"
6
- :ui="{ content: 'w-(--reka-popper-anchor-width)' }"
7
- >
8
- <template #anchor>
9
- <InputTags
10
- :model-value="value"
11
- :disabled="wrapperProps.disabled"
12
- :leading-icon="leadingIcon"
13
- :max-length="maxLength"
14
- :variant="variant"
15
- :delete-icon="deleteIcon"
16
- :size="size"
17
- :trailing-icon="trailingIcon"
18
- :loading="loading"
19
- :loading-icon="loadingIcon"
20
- :name="name"
21
- :placeholder="wrapperProps.placeholder"
22
- :autofocus="!!autoFocus"
23
- :icon="icon"
24
- :readonly="readonly"
25
- :ui="ui"
26
- @update:model-value="onChange"
27
- @addTag="onAdd"
28
- @removeTag="onRemove"
29
- @focus="onFocus"
30
- @blur="onBlur"
31
- @keydown="onKeydown"
32
- @input="onInput"
33
- />
34
- </template>
35
-
36
- <template #content>
37
- <div
38
- v-if="showSuggestions && filteredSuggestions.length > 0"
39
- ref="suggestionsContainerRef"
40
- :class="theme.suggestionsContainer()"
41
- >
42
- <div
43
- v-for="(suggestion, index) in filteredSuggestions"
44
- :key="suggestion"
45
- :ref="(el) => setSuggestionItemRef(el, index)"
2
+ <FieldWrapper v-bind="wrapperProps">
3
+ <Popover
4
+ v-model:open="showSuggestions"
5
+ :dismissible="false"
6
+ :ui="{ content: 'w-(--reka-popper-anchor-width)' }"
7
+ >
8
+ <template #anchor>
9
+ <InputTags
10
+ :model-value="value"
11
+ :disabled="wrapperProps.disabled"
12
+ :leading-icon="leadingIcon"
13
+ :max-length="maxLength"
14
+ :variant="variant"
15
+ :delete-icon="deleteIcon"
16
+ :size="size"
17
+ :trailing-icon="trailingIcon"
18
+ :loading="loading"
19
+ :loading-icon="loadingIcon"
20
+ :name="name"
21
+ :placeholder="wrapperProps.placeholder"
22
+ :autofocus="!!autoFocus"
23
+ :icon="icon"
24
+ :readonly="readonly"
25
+ :ui="ui"
26
+ @update:model-value="onChange"
27
+ @addTag="onAdd"
28
+ @removeTag="onRemove"
29
+ @focus="onFocus"
30
+ @blur="onBlur"
31
+ @keydown="onKeydown"
32
+ @input="onInput"
33
+ />
34
+ </template>
35
+
36
+ <template #content>
37
+ <div
38
+ v-if="showSuggestions && filteredSuggestions.length > 0"
39
+ ref="suggestionsContainerRef"
40
+ :class="theme.suggestionsContainer()"
41
+ >
42
+ <div
43
+ v-for="(suggestion, index) in filteredSuggestions"
44
+ :key="suggestion"
45
+ :ref="(el) => setSuggestionItemRef(el, index)"
46
46
  :class="[
47
47
  theme.suggestionItem(),
48
48
  {
49
49
  [theme.suggestionItemActive()]: index === selectedSuggestionIndex
50
50
  }
51
- ]"
52
- @mousedown.prevent="selectSuggestion(suggestion, index)"
53
- @mouseenter="selectedSuggestionIndex = index"
54
- >
55
- {{ suggestion }}
56
- </div>
57
- </div>
58
- </template>
59
- </Popover>
60
- </FieldWrapper>
51
+ ]"
52
+ @mousedown.prevent="selectSuggestion(suggestion, index)"
53
+ @mouseenter="selectedSuggestionIndex = index"
54
+ >
55
+ {{ suggestion }}
56
+ </div>
57
+ </div>
58
+ </template>
59
+ </Popover>
60
+ </FieldWrapper>
61
61
  </template>
62
62
 
63
63
  <script setup>
@@ -1,22 +1,22 @@
1
1
  <template>
2
- <FieldWrapper v-bind="wrapperProps">
3
- <Textarea
4
- :model-value="value"
5
- :disabled="wrapperProps.disabled"
6
- :name="name"
7
- :resize="resize"
8
- :placeholder="wrapperProps.placeholder"
9
- :autofocus="!!autoFocus"
10
- :autoresize="autoresize"
11
- :rows="rows"
12
- :maxrows="maxrows"
13
- :loading="loading"
14
- :loading-icon="loadingIcon"
15
- :readonly="readonly"
16
- :ui="ui"
17
- @update:model-value="onChange"
18
- />
19
- </FieldWrapper>
2
+ <FieldWrapper v-bind="wrapperProps">
3
+ <Textarea
4
+ :model-value="value"
5
+ :disabled="wrapperProps.disabled"
6
+ :name="name"
7
+ :resize="resize"
8
+ :placeholder="wrapperProps.placeholder"
9
+ :autofocus="!!autoFocus"
10
+ :autoresize="autoresize"
11
+ :rows="rows"
12
+ :maxrows="maxrows"
13
+ :loading="loading"
14
+ :loading-icon="loadingIcon"
15
+ :readonly="readonly"
16
+ :ui="ui"
17
+ @update:model-value="onChange"
18
+ />
19
+ </FieldWrapper>
20
20
  </template>
21
21
 
22
22
  <script setup>
@@ -1,47 +1,47 @@
1
1
  <template>
2
- <FieldWrapper v-bind="wrapperProps">
3
- <Datepicker
4
- v-model="innerValue"
5
- :teleport="teleport"
6
- :disabled="wrapperProps.disabled"
7
- :cancel-text="appConfig.core?.locale === 'th' ? '\u0E22\u0E01\u0E40\u0E25\u0E34\u0E01' : 'Cancel'"
8
- :select-text="appConfig.core?.locale === 'th' ? '\u0E15\u0E01\u0E25\u0E07' : 'Select'"
9
- :locale="appConfig.core?.locale"
10
- time-picker
11
- :placeholder="wrapperProps.placeholder"
12
- :format="format"
13
- :min-time="minTime"
14
- :max-time="maxTime"
15
- :start-time="startTime"
16
- :required="required"
17
- :enable-seconds="enableSeconds"
18
- @update:model-value="onChange"
19
- >
20
- <template #dp-input="{ value: innerValue }">
21
- <Input
22
- :trailing-icon="innerValue ? void 0 : 'i-heroicons-clock'"
23
- type="text"
24
- :disabled="wrapperProps.disabled"
25
- :model-value="innerValue"
26
- :placeholder="wrapperProps.placeholder"
27
- :readonly="true"
2
+ <FieldWrapper v-bind="wrapperProps">
3
+ <Datepicker
4
+ v-model="innerValue"
5
+ :teleport="teleport"
6
+ :disabled="wrapperProps.disabled"
7
+ :cancel-text="appConfig.core?.locale === 'th' ? '\u0E22\u0E01\u0E40\u0E25\u0E34\u0E01' : 'Cancel'"
8
+ :select-text="appConfig.core?.locale === 'th' ? '\u0E15\u0E01\u0E25\u0E07' : 'Select'"
9
+ :locale="appConfig.core?.locale"
10
+ time-picker
11
+ :placeholder="wrapperProps.placeholder"
12
+ :format="format"
13
+ :min-time="minTime"
14
+ :max-time="maxTime"
15
+ :start-time="startTime"
16
+ :required="required"
17
+ :enable-seconds="enableSeconds"
18
+ @update:model-value="onChange"
19
+ >
20
+ <template #dp-input="{ value: innerValue }">
21
+ <Input
22
+ :trailing-icon="innerValue ? void 0 : 'i-heroicons-clock'"
23
+ type="text"
24
+ :disabled="wrapperProps.disabled"
25
+ :model-value="innerValue"
26
+ :placeholder="wrapperProps.placeholder"
27
+ :readonly="true"
28
28
  :ui="{
29
29
  base: 'cursor-pointer select-none',
30
30
  trailingIcon: 'cursor-pointer'
31
- }"
32
- />
33
- </template>
34
- <template #clear-icon="{ clear }">
35
- <Icon
36
- :name="clearIcon"
31
+ }"
32
+ />
33
+ </template>
34
+ <template #clear-icon="{ clear }">
35
+ <Icon
36
+ :name="clearIcon"
37
37
  :class="theme.clearIcon({
38
38
  class: [ui?.clearIcon]
39
- })"
40
- @click.stop="clear"
41
- />
42
- </template>
43
- </Datepicker>
44
- </FieldWrapper>
39
+ })"
40
+ @click.stop="clear"
41
+ />
42
+ </template>
43
+ </Datepicker>
44
+ </FieldWrapper>
45
45
  </template>
46
46
 
47
47
  <script setup>
@@ -1,21 +1,21 @@
1
1
  <template>
2
- <FieldWrapper
3
- v-bind="wrapperProps"
4
- label=""
5
- description=""
6
- >
7
- <Switch
8
- :model-value="value"
9
- :disabled="wrapperProps.disabled"
10
- :name="name"
11
- :ui="ui"
12
- :label="label"
13
- :description="description"
14
- :loading="loading"
15
- :loading-icon="loadingIcon"
16
- @update:modelValue="onChange"
17
- />
18
- </FieldWrapper>
2
+ <FieldWrapper
3
+ v-bind="wrapperProps"
4
+ label=""
5
+ description=""
6
+ >
7
+ <Switch
8
+ :model-value="value"
9
+ :disabled="wrapperProps.disabled"
10
+ :name="name"
11
+ :ui="ui"
12
+ :label="label"
13
+ :description="description"
14
+ :loading="loading"
15
+ :loading-icon="loadingIcon"
16
+ @update:modelValue="onChange"
17
+ />
18
+ </FieldWrapper>
19
19
  </template>
20
20
 
21
21
  <script setup>
@@ -1,34 +1,34 @@
1
1
  <template>
2
- <FieldWrapper v-bind="wrapperProps">
3
- <div
4
- ref="dropzoneRef"
5
- :class="theme.base()"
6
- >
7
- <div :class="theme.wrapper()">
8
- <!-- Empty State -->
9
- <EmptyState
10
- v-if="uploadState.isEmpty.value"
11
- :theme="theme"
12
- :select-file-label="selectFileLabel"
13
- :select-file-sub-label="selectFileSubLabel"
14
- :placeholder="placeholder"
15
- @open-file="uploadState.handleOpenFile"
16
- />
17
-
18
- <!-- Success State -->
19
- <SuccessState
20
- v-if="uploadState.isSuccess.value"
21
- :theme="theme"
22
- :value="value"
23
- :disabled="wrapperProps.disabled"
24
- :readonly="wrapperProps.readonly"
25
- @preview="uploadState.handlePreview"
26
- @download="handleDownloadFile"
27
- @delete="uploadState.handleDeleteFile"
28
- />
29
- </div>
30
- </div>
31
- </FieldWrapper>
2
+ <FieldWrapper v-bind="wrapperProps">
3
+ <div
4
+ ref="dropzoneRef"
5
+ :class="theme.base()"
6
+ >
7
+ <div :class="theme.wrapper()">
8
+ <!-- Empty State -->
9
+ <EmptyState
10
+ v-if="uploadState.isEmpty.value"
11
+ :theme="theme"
12
+ :select-file-label="selectFileLabel"
13
+ :select-file-sub-label="selectFileSubLabel"
14
+ :placeholder="placeholder"
15
+ @open-file="uploadState.handleOpenFile"
16
+ />
17
+
18
+ <!-- Success State -->
19
+ <SuccessState
20
+ v-if="uploadState.isSuccess.value"
21
+ :theme="theme"
22
+ :value="value"
23
+ :disabled="wrapperProps.disabled"
24
+ :readonly="wrapperProps.readonly"
25
+ @preview="uploadState.handlePreview"
26
+ @download="handleDownloadFile"
27
+ @delete="uploadState.handleDeleteFile"
28
+ />
29
+ </div>
30
+ </div>
31
+ </FieldWrapper>
32
32
  </template>
33
33
 
34
34
  <script setup>