@finema/core 3.13.1 → 3.14.1

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 (77) hide show
  1. package/dist/module.json +1 -1
  2. package/dist/module.mjs +1 -1
  3. package/dist/runtime/components/FlexDeck/index.vue +79 -79
  4. package/dist/runtime/components/Form/FieldWrapper.vue +13 -13
  5. package/dist/runtime/components/Form/Fields.vue +13 -13
  6. package/dist/runtime/components/Form/InputCheckbox/index.d.vue.ts +5 -1
  7. package/dist/runtime/components/Form/InputCheckbox/index.vue +18 -18
  8. package/dist/runtime/components/Form/InputCheckbox/index.vue.d.ts +5 -1
  9. package/dist/runtime/components/Form/InputCheckboxGroup/index.d.vue.ts +5 -1
  10. package/dist/runtime/components/Form/InputCheckboxGroup/index.vue +21 -21
  11. package/dist/runtime/components/Form/InputCheckboxGroup/index.vue.d.ts +5 -1
  12. package/dist/runtime/components/Form/InputCurrency/index.d.vue.ts +5 -1
  13. package/dist/runtime/components/Form/InputCurrency/index.vue +49 -49
  14. package/dist/runtime/components/Form/InputCurrency/index.vue.d.ts +5 -1
  15. package/dist/runtime/components/Form/InputDateTime/index.d.vue.ts +5 -1
  16. package/dist/runtime/components/Form/InputDateTime/index.vue +155 -158
  17. package/dist/runtime/components/Form/InputDateTime/index.vue.d.ts +5 -1
  18. package/dist/runtime/components/Form/InputDateTimeRange/index.d.vue.ts +5 -1
  19. package/dist/runtime/components/Form/InputDateTimeRange/index.vue +56 -56
  20. package/dist/runtime/components/Form/InputDateTimeRange/index.vue.d.ts +5 -1
  21. package/dist/runtime/components/Form/InputMonth/index.d.vue.ts +5 -1
  22. package/dist/runtime/components/Form/InputMonth/index.vue.d.ts +5 -1
  23. package/dist/runtime/components/Form/InputNumber/index.d.vue.ts +5 -1
  24. package/dist/runtime/components/Form/InputNumber/index.vue +20 -20
  25. package/dist/runtime/components/Form/InputNumber/index.vue.d.ts +5 -1
  26. package/dist/runtime/components/Form/InputSearch/index.d.vue.ts +9 -1
  27. package/dist/runtime/components/Form/InputSearch/index.vue.d.ts +9 -1
  28. package/dist/runtime/components/Form/InputSelect/index.d.vue.ts +7 -1
  29. package/dist/runtime/components/Form/InputSelect/index.vue +46 -46
  30. package/dist/runtime/components/Form/InputSelect/index.vue.d.ts +7 -1
  31. package/dist/runtime/components/Form/InputSelectMultiple/index.d.vue.ts +7 -1
  32. package/dist/runtime/components/Form/InputSelectMultiple/index.vue +62 -62
  33. package/dist/runtime/components/Form/InputSelectMultiple/index.vue.d.ts +7 -1
  34. package/dist/runtime/components/Form/InputTags/index.d.vue.ts +11 -1
  35. package/dist/runtime/components/Form/InputTags/index.vue +54 -54
  36. package/dist/runtime/components/Form/InputTags/index.vue.d.ts +11 -1
  37. package/dist/runtime/components/Form/InputText/index.d.vue.ts +7 -1
  38. package/dist/runtime/components/Form/InputText/index.vue +85 -85
  39. package/dist/runtime/components/Form/InputText/index.vue.d.ts +7 -1
  40. package/dist/runtime/components/Form/InputTextarea/index.d.vue.ts +5 -1
  41. package/dist/runtime/components/Form/InputTextarea/index.vue +18 -18
  42. package/dist/runtime/components/Form/InputTextarea/index.vue.d.ts +5 -1
  43. package/dist/runtime/components/Form/InputTime/index.d.vue.ts +5 -1
  44. package/dist/runtime/components/Form/InputTime/index.vue +38 -38
  45. package/dist/runtime/components/Form/InputTime/index.vue.d.ts +5 -1
  46. package/dist/runtime/components/Form/InputToggle/index.d.vue.ts +5 -1
  47. package/dist/runtime/components/Form/InputToggle/index.vue +17 -17
  48. package/dist/runtime/components/Form/InputToggle/index.vue.d.ts +5 -1
  49. package/dist/runtime/components/Form/InputUploadDropzone/index.vue +30 -30
  50. package/dist/runtime/components/Form/InputUploadDropzoneAuto/index.vue +50 -50
  51. package/dist/runtime/components/Form/InputUploadDropzoneAutoMultiple/index.vue +50 -50
  52. package/dist/runtime/components/Form/InputUploadImageAuto/index.vue +50 -50
  53. package/dist/runtime/components/Form/InputWYSIWYG/EditorImageUploadNode.vue +18 -18
  54. package/dist/runtime/components/Form/InputWYSIWYG/EditorLinkPopover.vue +65 -65
  55. package/dist/runtime/components/Form/InputWYSIWYG/README.md +96 -96
  56. package/dist/runtime/components/Form/InputWYSIWYG/index.vue +41 -41
  57. package/dist/runtime/components/Form/fileState/EmptyState.vue +21 -21
  58. package/dist/runtime/components/Form/fileState/FailedState.vue +33 -33
  59. package/dist/runtime/components/Form/fileState/LoadingState.vue +24 -24
  60. package/dist/runtime/components/Form/fileState/MultipleFilesState.vue +75 -75
  61. package/dist/runtime/components/Form/fileState/PreviewModal.vue +23 -23
  62. package/dist/runtime/components/Form/index.vue +5 -5
  63. package/dist/runtime/components/Image.vue +28 -28
  64. package/dist/runtime/components/Log/index.vue +17 -17
  65. package/dist/runtime/components/Table/Base.d.vue.ts +8 -2
  66. package/dist/runtime/components/Table/Base.vue.d.ts +8 -2
  67. package/dist/runtime/components/Table/ColumnDate.vue +1 -1
  68. package/dist/runtime/components/Table/ColumnDateTime.vue +1 -1
  69. package/dist/runtime/components/Table/ColumnImage.vue +4 -4
  70. package/dist/runtime/components/Table/ColumnText.vue +10 -10
  71. package/dist/runtime/components/Table/Pagination.vue +56 -56
  72. package/dist/runtime/components/Table/Simple.vue +16 -16
  73. package/dist/runtime/components/Table/index.vue +30 -30
  74. package/dist/runtime/composables/loaderPage.js +29 -0
  75. package/dist/runtime/helpers/apiPageHelper.d.ts +1 -0
  76. package/dist/runtime/server/tsconfig.json +3 -3
  77. package/package.json +2 -2
@@ -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,4 +1,8 @@
1
1
  import type { ITextareaFieldProps } from '#core/components/Form/InputTextarea/types';
2
- declare const __VLS_export: import("vue").DefineComponent<ITextareaFieldProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, any, string, import("vue").PublicProps, any, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
2
+ declare const __VLS_export: import("vue").DefineComponent<ITextareaFieldProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
3
+ change: (...args: any[]) => void;
4
+ }, string, import("vue").PublicProps, Readonly<ITextareaFieldProps> & Readonly<{
5
+ onChange?: ((...args: any[]) => any) | undefined;
6
+ }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
3
7
  declare const _default: typeof __VLS_export;
4
8
  export default _default;
@@ -1,6 +1,10 @@
1
1
  import '@vuepic/vue-datepicker/dist/main.css';
2
2
  import type { ITimeFieldProps } from '#core/components/Form/InputTime/types';
3
- declare const __VLS_export: import("vue").DefineComponent<ITimeFieldProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, any, string, import("vue").PublicProps, any, {
3
+ declare const __VLS_export: import("vue").DefineComponent<ITimeFieldProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
4
+ change: (...args: any[]) => void;
5
+ }, string, import("vue").PublicProps, Readonly<ITimeFieldProps> & Readonly<{
6
+ onChange?: ((...args: any[]) => any) | undefined;
7
+ }>, {
4
8
  clearIcon: string;
5
9
  teleport: boolean | string | HTMLElement;
6
10
  enableSeconds: boolean;
@@ -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,6 +1,10 @@
1
1
  import '@vuepic/vue-datepicker/dist/main.css';
2
2
  import type { ITimeFieldProps } from '#core/components/Form/InputTime/types';
3
- declare const __VLS_export: import("vue").DefineComponent<ITimeFieldProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, any, string, import("vue").PublicProps, any, {
3
+ declare const __VLS_export: import("vue").DefineComponent<ITimeFieldProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
4
+ change: (...args: any[]) => void;
5
+ }, string, import("vue").PublicProps, Readonly<ITimeFieldProps> & Readonly<{
6
+ onChange?: ((...args: any[]) => any) | undefined;
7
+ }>, {
4
8
  clearIcon: string;
5
9
  teleport: boolean | string | HTMLElement;
6
10
  enableSeconds: boolean;
@@ -1,4 +1,8 @@
1
1
  import type { IToggleFieldProps } from '#core/components/Form/InputToggle/types';
2
- declare const __VLS_export: import("vue").DefineComponent<IToggleFieldProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, any, string, import("vue").PublicProps, any, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
2
+ declare const __VLS_export: import("vue").DefineComponent<IToggleFieldProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
3
+ change: (...args: any[]) => void;
4
+ }, string, import("vue").PublicProps, Readonly<IToggleFieldProps> & Readonly<{
5
+ onChange?: ((...args: any[]) => any) | undefined;
6
+ }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
3
7
  declare const _default: typeof __VLS_export;
4
8
  export default _default;
@@ -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,4 +1,8 @@
1
1
  import type { IToggleFieldProps } from '#core/components/Form/InputToggle/types';
2
- declare const __VLS_export: import("vue").DefineComponent<IToggleFieldProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, any, string, import("vue").PublicProps, any, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
2
+ declare const __VLS_export: import("vue").DefineComponent<IToggleFieldProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
3
+ change: (...args: any[]) => void;
4
+ }, string, import("vue").PublicProps, Readonly<IToggleFieldProps> & Readonly<{
5
+ onChange?: ((...args: any[]) => any) | undefined;
6
+ }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
3
7
  declare const _default: typeof __VLS_export;
4
8
  export default _default;
@@ -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>
@@ -1,54 +1,54 @@
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
- <!-- Loading State -->
19
- <LoadingState
20
- v-if="uploadState.isUploading.value"
21
- :theme="theme"
22
- :selected-file="uploadState.selectedFile.value"
23
- :percent="uploadState.percent.value"
24
- :uploading-label="uploadingLabel"
25
- />
26
-
27
- <!-- Success State -->
28
- <SuccessState
29
- v-if="uploadState.isSuccess.value"
30
- :theme="theme"
31
- :value="value"
32
- :disabled="wrapperProps.disabled"
33
- :readonly="wrapperProps.readonly"
34
- @preview="uploadState.handlePreview"
35
- @download="handleDownloadFile"
36
- @delete="uploadState.handleDeleteFile"
37
- />
38
-
39
- <!-- Failed State -->
40
- <FailedState
41
- v-if="uploadState.isError.value"
42
- :theme="theme"
43
- :selected-file="uploadState.selectedFile.value"
44
- :upload-failed-label="uploadFailedLabel"
45
- :retry-label="retryLabel"
46
- @retry="uploadState.handleRetryUpload"
47
- @delete="uploadState.handleDeleteFile"
48
- />
49
- </div>
50
- </div>
51
- </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
+ <!-- Loading State -->
19
+ <LoadingState
20
+ v-if="uploadState.isUploading.value"
21
+ :theme="theme"
22
+ :selected-file="uploadState.selectedFile.value"
23
+ :percent="uploadState.percent.value"
24
+ :uploading-label="uploadingLabel"
25
+ />
26
+
27
+ <!-- Success State -->
28
+ <SuccessState
29
+ v-if="uploadState.isSuccess.value"
30
+ :theme="theme"
31
+ :value="value"
32
+ :disabled="wrapperProps.disabled"
33
+ :readonly="wrapperProps.readonly"
34
+ @preview="uploadState.handlePreview"
35
+ @download="handleDownloadFile"
36
+ @delete="uploadState.handleDeleteFile"
37
+ />
38
+
39
+ <!-- Failed State -->
40
+ <FailedState
41
+ v-if="uploadState.isError.value"
42
+ :theme="theme"
43
+ :selected-file="uploadState.selectedFile.value"
44
+ :upload-failed-label="uploadFailedLabel"
45
+ :retry-label="retryLabel"
46
+ @retry="uploadState.handleRetryUpload"
47
+ @delete="uploadState.handleDeleteFile"
48
+ />
49
+ </div>
50
+ </div>
51
+ </FieldWrapper>
52
52
  </template>
53
53
 
54
54
  <script setup>
@@ -1,54 +1,54 @@
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
- :theme="theme"
11
- :select-file-label="selectFileLabel"
12
- :select-file-sub-label="selectFileSubLabel"
13
- :placeholder="placeholder"
14
- @open-file="uploadState.handleOpenFile"
15
- />
16
- </div>
17
- </div>
18
- <!-- Multiple Files State -->
19
- <MultipleFilesState
20
- v-if="!uploadState.isEmpty.value"
21
- :theme="theme"
22
- :file-items="uploadState.fileItems.value"
23
- :disabled="wrapperProps.disabled"
24
- :readonly="wrapperProps.readonly"
25
- :upload-failed-label="uploadFailedLabel"
26
- :retry-label="retryLabel"
27
- @preview="uploadState.handlePreview"
28
- @download="handleDownloadFile"
29
- @delete="uploadState.handleDeleteFile"
30
- @retry="uploadState.handleRetryUpload"
31
- />
32
-
33
- <!-- Success State -->
34
- <div
35
- v-for="(item, index) in value"
36
- :key="index"
37
- :class="theme.multipleFilesWrapper()"
38
- >
39
- <div :class="theme.fileItemWrapper()">
40
- <SuccessState
41
- :theme="theme"
42
- :value="item"
43
- :disabled="wrapperProps.disabled"
44
- :readonly="wrapperProps.readonly"
45
- @preview="uploadState.handlePreview(item)"
46
- @download="handleDownloadFile(item)"
47
- @delete="handleDeleteFile(index, item)"
48
- />
49
- </div>
50
- </div>
51
- </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
+ :theme="theme"
11
+ :select-file-label="selectFileLabel"
12
+ :select-file-sub-label="selectFileSubLabel"
13
+ :placeholder="placeholder"
14
+ @open-file="uploadState.handleOpenFile"
15
+ />
16
+ </div>
17
+ </div>
18
+ <!-- Multiple Files State -->
19
+ <MultipleFilesState
20
+ v-if="!uploadState.isEmpty.value"
21
+ :theme="theme"
22
+ :file-items="uploadState.fileItems.value"
23
+ :disabled="wrapperProps.disabled"
24
+ :readonly="wrapperProps.readonly"
25
+ :upload-failed-label="uploadFailedLabel"
26
+ :retry-label="retryLabel"
27
+ @preview="uploadState.handlePreview"
28
+ @download="handleDownloadFile"
29
+ @delete="uploadState.handleDeleteFile"
30
+ @retry="uploadState.handleRetryUpload"
31
+ />
32
+
33
+ <!-- Success State -->
34
+ <div
35
+ v-for="(item, index) in value"
36
+ :key="index"
37
+ :class="theme.multipleFilesWrapper()"
38
+ >
39
+ <div :class="theme.fileItemWrapper()">
40
+ <SuccessState
41
+ :theme="theme"
42
+ :value="item"
43
+ :disabled="wrapperProps.disabled"
44
+ :readonly="wrapperProps.readonly"
45
+ @preview="uploadState.handlePreview(item)"
46
+ @download="handleDownloadFile(item)"
47
+ @delete="handleDeleteFile(index, item)"
48
+ />
49
+ </div>
50
+ </div>
51
+ </FieldWrapper>
52
52
  </template>
53
53
 
54
54
  <script setup>
@@ -1,54 +1,54 @@
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
- <!-- Loading State -->
19
- <LoadingState
20
- v-if="uploadState.isUploading.value"
21
- :theme="theme"
22
- :selected-file="uploadState.selectedFile.value"
23
- :percent="uploadState.percent.value"
24
- :uploading-label="uploadingLabel"
25
- />
26
-
27
- <!-- Success State -->
28
- <SuccessState
29
- v-if="uploadState.isSuccess.value"
30
- :theme="theme"
31
- :value="value"
32
- :disabled="wrapperProps.disabled"
33
- :readonly="wrapperProps.readonly"
34
- @preview="uploadState.handlePreview"
35
- @download="handleDownloadFile"
36
- @delete="uploadState.handleDeleteFile"
37
- />
38
-
39
- <!-- Failed State -->
40
- <FailedState
41
- v-if="uploadState.isError.value"
42
- :theme="theme"
43
- :selected-file="uploadState.selectedFile.value"
44
- :upload-failed-label="uploadFailedLabel"
45
- :retry-label="retryLabel"
46
- @retry="uploadState.handleRetryUpload"
47
- @delete="uploadState.handleDeleteFile"
48
- />
49
- </div>
50
- </div>
51
- </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
+ <!-- Loading State -->
19
+ <LoadingState
20
+ v-if="uploadState.isUploading.value"
21
+ :theme="theme"
22
+ :selected-file="uploadState.selectedFile.value"
23
+ :percent="uploadState.percent.value"
24
+ :uploading-label="uploadingLabel"
25
+ />
26
+
27
+ <!-- Success State -->
28
+ <SuccessState
29
+ v-if="uploadState.isSuccess.value"
30
+ :theme="theme"
31
+ :value="value"
32
+ :disabled="wrapperProps.disabled"
33
+ :readonly="wrapperProps.readonly"
34
+ @preview="uploadState.handlePreview"
35
+ @download="handleDownloadFile"
36
+ @delete="uploadState.handleDeleteFile"
37
+ />
38
+
39
+ <!-- Failed State -->
40
+ <FailedState
41
+ v-if="uploadState.isError.value"
42
+ :theme="theme"
43
+ :selected-file="uploadState.selectedFile.value"
44
+ :upload-failed-label="uploadFailedLabel"
45
+ :retry-label="retryLabel"
46
+ @retry="uploadState.handleRetryUpload"
47
+ @delete="uploadState.handleDeleteFile"
48
+ />
49
+ </div>
50
+ </div>
51
+ </FieldWrapper>
52
52
  </template>
53
53
 
54
54
  <script setup>
@@ -1,22 +1,22 @@
1
1
  <template>
2
- <NodeViewWrapper>
3
- <FileUpload
4
- v-model="file"
5
- accept="image/*"
6
- label="Upload an image"
7
- description="SVG, PNG, JPG or GIF"
8
- :preview="false"
9
- class="min-h-48"
10
- >
11
- <template #leading>
12
- <Avatar
13
- :icon="loading ? 'i-lucide-loader-circle' : 'i-lucide-image'"
14
- size="xl"
15
- :ui="{ icon: [loading && 'animate-spin'] }"
16
- />
17
- </template>
18
- </FileUpload>
19
- </NodeViewWrapper>
2
+ <NodeViewWrapper>
3
+ <FileUpload
4
+ v-model="file"
5
+ accept="image/*"
6
+ label="Upload an image"
7
+ description="SVG, PNG, JPG or GIF"
8
+ :preview="false"
9
+ class="min-h-48"
10
+ >
11
+ <template #leading>
12
+ <Avatar
13
+ :icon="loading ? 'i-lucide-loader-circle' : 'i-lucide-image'"
14
+ size="xl"
15
+ :ui="{ icon: [loading && 'animate-spin'] }"
16
+ />
17
+ </template>
18
+ </FileUpload>
19
+ </NodeViewWrapper>
20
20
  </template>
21
21
 
22
22
  <script setup>