@finema/core 1.4.152 → 1.4.154
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.
- package/README.md +60 -60
- package/dist/module.json +1 -5
- package/dist/module.mjs +10 -2
- package/dist/runtime/components/Alert.vue +48 -48
- package/dist/runtime/components/Avatar.vue +27 -27
- package/dist/runtime/components/Badge.vue +11 -11
- package/dist/runtime/components/Breadcrumb.vue +44 -44
- package/dist/runtime/components/Button/Group.vue +37 -37
- package/dist/runtime/components/Button/index.vue +75 -75
- package/dist/runtime/components/Card.vue +38 -38
- package/dist/runtime/components/Core.vue +37 -37
- package/dist/runtime/components/Dialog/index.vue +108 -108
- package/dist/runtime/components/Dropdown/index.vue +70 -70
- package/dist/runtime/components/FlexDeck/Base.vue +143 -143
- package/dist/runtime/components/FlexDeck/index.vue +68 -68
- package/dist/runtime/components/Form/FieldWrapper.vue +23 -23
- package/dist/runtime/components/Form/Fields.vue +230 -230
- package/dist/runtime/components/Form/InputCheckbox/index.vue +28 -28
- package/dist/runtime/components/Form/InputDateTime/index.vue +60 -60
- package/dist/runtime/components/Form/InputDateTimeRange/date_range_time_field.types.d.ts +1 -1
- package/dist/runtime/components/Form/InputDateTimeRange/index.vue +83 -83
- package/dist/runtime/components/Form/InputNumber/index.vue +27 -27
- package/dist/runtime/components/Form/InputRadio/index.vue +27 -27
- package/dist/runtime/components/Form/InputSelect/index.vue +45 -45
- package/dist/runtime/components/Form/InputSelectMultiple/index.vue +54 -54
- package/dist/runtime/components/Form/InputStatic/index.vue +16 -16
- package/dist/runtime/components/Form/InputTags/index.vue +145 -145
- package/dist/runtime/components/Form/InputText/index.vue +67 -67
- package/dist/runtime/components/Form/InputTextarea/index.vue +25 -25
- package/dist/runtime/components/Form/InputToggle/index.vue +14 -14
- package/dist/runtime/components/Form/InputUploadDropzone/index.vue +206 -206
- package/dist/runtime/components/Form/InputUploadDropzone/types.d.ts +1 -1
- package/dist/runtime/components/Form/InputUploadDropzoneAuto/index.vue +342 -342
- package/dist/runtime/components/Form/InputUploadDropzoneAuto/types.d.ts +1 -1
- package/dist/runtime/components/Form/InputUploadDropzoneAutoMultiple/ItemUpload.vue +241 -241
- package/dist/runtime/components/Form/InputUploadDropzoneAutoMultiple/ItemView.vue +89 -89
- package/dist/runtime/components/Form/InputUploadDropzoneAutoMultiple/index.vue +164 -164
- package/dist/runtime/components/Form/InputUploadDropzoneAutoMultiple/types.d.ts +1 -1
- package/dist/runtime/components/Form/InputUploadDropzoneImageAutoMultiple/ItemUpload.vue +161 -161
- package/dist/runtime/components/Form/InputUploadDropzoneImageAutoMultiple/ItemView.vue +64 -64
- package/dist/runtime/components/Form/InputUploadDropzoneImageAutoMultiple/index.vue +172 -172
- package/dist/runtime/components/Form/InputUploadDropzoneImageAutoMultiple/types.d.ts +1 -1
- package/dist/runtime/components/Form/InputUploadFileClassic/index.vue +95 -95
- package/dist/runtime/components/Form/InputUploadFileClassicAuto/index.vue +151 -151
- package/dist/runtime/components/Form/InputUploadFileClassicAuto/types.d.ts +1 -1
- package/dist/runtime/components/Form/InputUploadImageAuto/index.vue +219 -219
- package/dist/runtime/components/Form/InputUploadImageAuto/types.d.ts +1 -1
- package/dist/runtime/components/Form/InputWYSIWYG/index.vue +53 -53
- package/dist/runtime/components/Form/index.vue +6 -6
- package/dist/runtime/components/Icon.vue +23 -23
- package/dist/runtime/components/Image.vue +36 -36
- package/dist/runtime/components/Loader.vue +27 -27
- package/dist/runtime/components/Modal/index.vue +146 -146
- package/dist/runtime/components/QRCode.vue +22 -22
- package/dist/runtime/components/SimplePagination.vue +96 -96
- package/dist/runtime/components/Slideover/index.vue +110 -110
- package/dist/runtime/components/Table/Base.vue +139 -139
- package/dist/runtime/components/Table/ColumnDate.vue +16 -16
- package/dist/runtime/components/Table/ColumnDateTime.vue +18 -18
- package/dist/runtime/components/Table/ColumnImage.vue +15 -15
- package/dist/runtime/components/Table/ColumnNumber.vue +14 -14
- package/dist/runtime/components/Table/ColumnText.vue +25 -25
- package/dist/runtime/components/Table/Simple.vue +69 -69
- package/dist/runtime/components/Table/index.vue +65 -65
- package/dist/runtime/components/Tabs/index.vue +64 -64
- package/dist/runtime/components/TeleportSafe.vue +40 -40
- package/dist/runtime/composables/loaderList.d.ts +2 -2
- package/dist/runtime/composables/{loaderList.js → loaderList.mjs} +2 -2
- package/dist/runtime/composables/loaderObject.d.ts +1 -1
- package/dist/runtime/composables/{loaderObject.js → loaderObject.mjs} +2 -2
- package/dist/runtime/composables/loaderPage.d.ts +1 -1
- package/dist/runtime/composables/{loaderPage.js → loaderPage.mjs} +3 -3
- package/dist/runtime/composables/useConfig.d.ts +1 -1
- package/dist/runtime/composables/useForm.d.ts +1 -1
- package/dist/runtime/composables/useTable.d.ts +2 -2
- package/dist/runtime/composables/{useTable.js → useTable.mjs} +1 -1
- package/dist/runtime/composables/{useUpload.js → useUpload.mjs} +1 -1
- package/dist/runtime/helpers/{apiListHelper.js → apiListHelper.mjs} +1 -1
- package/dist/runtime/helpers/{apiObjectHelper.js → apiObjectHelper.mjs} +1 -1
- package/dist/runtime/helpers/apiPageHelper.d.ts +1 -1
- package/dist/runtime/helpers/{apiPageHelper.js → apiPageHelper.mjs} +4 -4
- package/dist/runtime/ui.config/index.d.ts +16 -16
- package/dist/runtime/ui.config/index.mjs +16 -0
- package/dist/runtime/ui.config/{uploadDropzoneImage.js → uploadDropzoneImage.mjs} +1 -1
- package/dist/runtime/utils/ArrayHelper.d.ts +1 -1
- package/dist/runtime/utils/{ArrayHelper.spec.js → ArrayHelper.spec.mjs} +1 -1
- package/dist/runtime/utils/{FileHelper.spec.js → FileHelper.spec.mjs} +1 -1
- package/dist/runtime/utils/ObjectHelper.d.ts +2 -2
- package/dist/runtime/utils/{ObjectHelper.js → ObjectHelper.mjs} +2 -2
- package/dist/runtime/utils/{ObjectHelper.spec.js → ObjectHelper.spec.mjs} +1 -1
- package/dist/runtime/utils/ParamHelper.d.ts +1 -1
- package/dist/runtime/utils/{ParamHelper.spec.js → ParamHelper.spec.mjs} +1 -1
- package/dist/runtime/utils/{StringHelper.spec.js → StringHelper.spec.mjs} +1 -1
- package/dist/runtime/utils/{TimeHelper.spec.js → TimeHelper.spec.mjs} +1 -1
- package/dist/runtime/utils/{TimeHelper.thai.spec.js → TimeHelper.thai.spec.mjs} +1 -1
- package/dist/types.d.mts +16 -1
- package/dist/types.d.ts +16 -1
- package/package.json +92 -93
- package/dist/runtime/ui.config/index.js +0 -16
- /package/dist/runtime/components/Dropdown/{types.js → types.mjs} +0 -0
- /package/dist/runtime/components/FlexDeck/{types.js → types.mjs} +0 -0
- /package/dist/runtime/components/Form/InputCheckbox/{types.js → types.mjs} +0 -0
- /package/dist/runtime/components/Form/InputDateTime/{date_time_field.types.js → date_time_field.types.mjs} +0 -0
- /package/dist/runtime/components/Form/InputDateTimeRange/{date_range_time_field.types.js → date_range_time_field.types.mjs} +0 -0
- /package/dist/runtime/components/Form/InputNumber/{types.js → types.mjs} +0 -0
- /package/dist/runtime/components/Form/InputRadio/{types.js → types.mjs} +0 -0
- /package/dist/runtime/components/Form/InputSelect/{types.js → types.mjs} +0 -0
- /package/dist/runtime/components/Form/InputSelectMultiple/{types.js → types.mjs} +0 -0
- /package/dist/runtime/components/Form/InputStatic/{types.js → types.mjs} +0 -0
- /package/dist/runtime/components/Form/InputTags/{types.js → types.mjs} +0 -0
- /package/dist/runtime/components/Form/InputText/{types.js → types.mjs} +0 -0
- /package/dist/runtime/components/Form/InputTextarea/{types.js → types.mjs} +0 -0
- /package/dist/runtime/components/Form/InputToggle/{types.js → types.mjs} +0 -0
- /package/dist/runtime/components/Form/InputUploadDropzone/{types.js → types.mjs} +0 -0
- /package/dist/runtime/components/Form/InputUploadDropzoneAuto/{types.js → types.mjs} +0 -0
- /package/dist/runtime/components/Form/InputUploadDropzoneAutoMultiple/{types.js → types.mjs} +0 -0
- /package/dist/runtime/components/Form/InputUploadDropzoneImageAutoMultiple/{types.js → types.mjs} +0 -0
- /package/dist/runtime/components/Form/InputUploadFileClassic/{types.js → types.mjs} +0 -0
- /package/dist/runtime/components/Form/InputUploadFileClassicAuto/{types.js → types.mjs} +0 -0
- /package/dist/runtime/components/Form/InputUploadImageAuto/{types.js → types.mjs} +0 -0
- /package/dist/runtime/components/Form/InputWYSIWYG/{types.js → types.mjs} +0 -0
- /package/dist/runtime/components/Form/{types.js → types.mjs} +0 -0
- /package/dist/runtime/components/Table/{types.js → types.mjs} +0 -0
- /package/dist/runtime/composables/{useApp.js → useApp.mjs} +0 -0
- /package/dist/runtime/composables/{useConfig.js → useConfig.mjs} +0 -0
- /package/dist/runtime/composables/{useDialog.js → useDialog.mjs} +0 -0
- /package/dist/runtime/composables/{useFlexDeck.js → useFlexDeck.mjs} +0 -0
- /package/dist/runtime/composables/{useForm.js → useForm.mjs} +0 -0
- /package/dist/runtime/composables/{useNotification.js → useNotification.mjs} +0 -0
- /package/dist/runtime/composables/{useWatch.js → useWatch.mjs} +0 -0
- /package/dist/runtime/{core.config.js → core.config.mjs} +0 -0
- /package/dist/runtime/helpers/{componentHelper.js → componentHelper.mjs} +0 -0
- /package/dist/runtime/lib/{Requester.js → Requester.mjs} +0 -0
- /package/dist/runtime/{plugin.js → plugin.mjs} +0 -0
- /package/dist/runtime/{quill.plugin.js → quill.plugin.mjs} +0 -0
- /package/dist/runtime/types/{common.js → common.mjs} +0 -0
- /package/dist/runtime/types/{config.js → config.mjs} +0 -0
- /package/dist/runtime/types/{lib.js → lib.mjs} +0 -0
- /package/dist/runtime/ui.config/{alert.js → alert.mjs} +0 -0
- /package/dist/runtime/ui.config/{badge.js → badge.mjs} +0 -0
- /package/dist/runtime/ui.config/{breadcrumb.js → breadcrumb.mjs} +0 -0
- /package/dist/runtime/ui.config/{button.js → button.mjs} +0 -0
- /package/dist/runtime/ui.config/{buttonGroup.js → buttonGroup.mjs} +0 -0
- /package/dist/runtime/ui.config/{card.js → card.mjs} +0 -0
- /package/dist/runtime/ui.config/{checkbox.js → checkbox.mjs} +0 -0
- /package/dist/runtime/ui.config/{formGroup.js → formGroup.mjs} +0 -0
- /package/dist/runtime/ui.config/{icon.js → icon.mjs} +0 -0
- /package/dist/runtime/ui.config/{input.js → input.mjs} +0 -0
- /package/dist/runtime/ui.config/{modal.js → modal.mjs} +0 -0
- /package/dist/runtime/ui.config/{notification.js → notification.mjs} +0 -0
- /package/dist/runtime/ui.config/{pagination.js → pagination.mjs} +0 -0
- /package/dist/runtime/ui.config/{select.js → select.mjs} +0 -0
- /package/dist/runtime/ui.config/{selectMenu.js → selectMenu.mjs} +0 -0
- /package/dist/runtime/ui.config/{slideover.js → slideover.mjs} +0 -0
- /package/dist/runtime/ui.config/{table.js → table.mjs} +0 -0
- /package/dist/runtime/ui.config/{tabs.js → tabs.mjs} +0 -0
- /package/dist/runtime/ui.config/{tags.js → tags.mjs} +0 -0
- /package/dist/runtime/ui.config/{textarea.js → textarea.mjs} +0 -0
- /package/dist/runtime/ui.config/{toggle.js → toggle.mjs} +0 -0
- /package/dist/runtime/ui.config/{uploadFileDropzone.js → uploadFileDropzone.mjs} +0 -0
- /package/dist/runtime/ui.config/{uploadFileInputClassicAuto.js → uploadFileInputClassicAuto.mjs} +0 -0
- /package/dist/runtime/ui.config/{uploadImage.js → uploadImage.mjs} +0 -0
- /package/dist/runtime/utils/{ArrayHelper.js → ArrayHelper.mjs} +0 -0
- /package/dist/runtime/utils/{FileHelper.js → FileHelper.mjs} +0 -0
- /package/dist/runtime/utils/{ParamHelper.js → ParamHelper.mjs} +0 -0
- /package/dist/runtime/utils/{StringHelper.js → StringHelper.mjs} +0 -0
- /package/dist/runtime/utils/{TimeHelper.js → TimeHelper.mjs} +0 -0
- /package/dist/runtime/utils/{lodash.js → lodash.mjs} +0 -0
|
@@ -1,25 +1,25 @@
|
|
|
1
|
-
<template>{{ getValue }}</template>
|
|
2
|
-
<script lang="ts" setup>
|
|
3
|
-
import { computed } from 'vue'
|
|
4
|
-
import { type IColumn } from '#core/components/Table/types'
|
|
5
|
-
import { StringHelper } from '#imports'
|
|
6
|
-
|
|
7
|
-
const props = defineProps<{
|
|
8
|
-
value: any
|
|
9
|
-
row: any
|
|
10
|
-
column: IColumn<{
|
|
11
|
-
max?: number
|
|
12
|
-
}>
|
|
13
|
-
}>()
|
|
14
|
-
|
|
15
|
-
const getValue = computed<string>(() => {
|
|
16
|
-
const value = props.value
|
|
17
|
-
const max = props.column.props?.max
|
|
18
|
-
|
|
19
|
-
if (max) {
|
|
20
|
-
return StringHelper.truncate(value, max)
|
|
21
|
-
}
|
|
22
|
-
|
|
23
|
-
return value ?? '-'
|
|
24
|
-
})
|
|
25
|
-
</script>
|
|
1
|
+
<template>{{ getValue }}</template>
|
|
2
|
+
<script lang="ts" setup>
|
|
3
|
+
import { computed } from 'vue'
|
|
4
|
+
import { type IColumn } from '#core/components/Table/types'
|
|
5
|
+
import { StringHelper } from '#imports'
|
|
6
|
+
|
|
7
|
+
const props = defineProps<{
|
|
8
|
+
value: any
|
|
9
|
+
row: any
|
|
10
|
+
column: IColumn<{
|
|
11
|
+
max?: number
|
|
12
|
+
}>
|
|
13
|
+
}>()
|
|
14
|
+
|
|
15
|
+
const getValue = computed<string>(() => {
|
|
16
|
+
const value = props.value
|
|
17
|
+
const max = props.column.props?.max
|
|
18
|
+
|
|
19
|
+
if (max) {
|
|
20
|
+
return StringHelper.truncate(value, max)
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
return value ?? '-'
|
|
24
|
+
})
|
|
25
|
+
</script>
|
|
@@ -1,69 +1,69 @@
|
|
|
1
|
-
<template>
|
|
2
|
-
<Base
|
|
3
|
-
v-bind="$attrs"
|
|
4
|
-
:columns="options.columns"
|
|
5
|
-
:raw-data="itemsByPage"
|
|
6
|
-
:status="options.status"
|
|
7
|
-
:page-options="pageOptions"
|
|
8
|
-
:is-simple-pagination="isShowSimplePagination"
|
|
9
|
-
:is-hide-bottom-pagination="options.isHideBottomPagination"
|
|
10
|
-
@page-change="onPageChange"
|
|
11
|
-
>
|
|
12
|
-
<template v-for="(_, slot) of $slots" #[slot]="slotProps">
|
|
13
|
-
<slot :name="slot" v-bind="slotProps || {}" />
|
|
14
|
-
</template>
|
|
15
|
-
</Base>
|
|
16
|
-
</template>
|
|
17
|
-
<script lang="ts" setup>
|
|
18
|
-
import { computed, type PropType, ref } from 'vue'
|
|
19
|
-
import { type ISimpleTableOptions } from '#core/components/Table/types'
|
|
20
|
-
import Base from '#core/components/Table/Base.vue'
|
|
21
|
-
import { initPageOptions } from '#core/composables/loaderPage'
|
|
22
|
-
import { useCoreConfig } from '#core/composables/useConfig'
|
|
23
|
-
|
|
24
|
-
defineSlots<{
|
|
25
|
-
'empty-state': () => any
|
|
26
|
-
'loading-state': () => any
|
|
27
|
-
}>()
|
|
28
|
-
|
|
29
|
-
const props = defineProps({
|
|
30
|
-
options: { type: Object as PropType<ISimpleTableOptions>, required: true },
|
|
31
|
-
})
|
|
32
|
-
|
|
33
|
-
const currentPage = ref(1)
|
|
34
|
-
const coreConfig = useCoreConfig()
|
|
35
|
-
const isShowSimplePagination = computed(
|
|
36
|
-
(): boolean => props.options.isSimplePagination ?? coreConfig.is_simple_pagination
|
|
37
|
-
)
|
|
38
|
-
|
|
39
|
-
const pageOptions = computed(() => {
|
|
40
|
-
if (!props.options?.limit) {
|
|
41
|
-
return undefined
|
|
42
|
-
}
|
|
43
|
-
|
|
44
|
-
return {
|
|
45
|
-
...initPageOptions({
|
|
46
|
-
limit: props.options.limit,
|
|
47
|
-
primary: props.options.primary,
|
|
48
|
-
}),
|
|
49
|
-
totalCount: props.options.rawData.length,
|
|
50
|
-
totalPage: Math.ceil(props.options.rawData.length / props.options.limit),
|
|
51
|
-
currentPage: currentPage.value,
|
|
52
|
-
}
|
|
53
|
-
})
|
|
54
|
-
|
|
55
|
-
const onPageChange = (page: number) => {
|
|
56
|
-
currentPage.value = page
|
|
57
|
-
}
|
|
58
|
-
|
|
59
|
-
const itemsByPage = computed(() => {
|
|
60
|
-
if (!pageOptions.value) {
|
|
61
|
-
return props.options?.rawData
|
|
62
|
-
}
|
|
63
|
-
|
|
64
|
-
const start = (pageOptions.value.currentPage - 1) * pageOptions.value.limit
|
|
65
|
-
const end = start + pageOptions.value.limit
|
|
66
|
-
|
|
67
|
-
return props.options?.rawData.slice(start, end)
|
|
68
|
-
})
|
|
69
|
-
</script>
|
|
1
|
+
<template>
|
|
2
|
+
<Base
|
|
3
|
+
v-bind="$attrs"
|
|
4
|
+
:columns="options.columns"
|
|
5
|
+
:raw-data="itemsByPage"
|
|
6
|
+
:status="options.status"
|
|
7
|
+
:page-options="pageOptions"
|
|
8
|
+
:is-simple-pagination="isShowSimplePagination"
|
|
9
|
+
:is-hide-bottom-pagination="options.isHideBottomPagination"
|
|
10
|
+
@page-change="onPageChange"
|
|
11
|
+
>
|
|
12
|
+
<template v-for="(_, slot) of $slots" #[slot]="slotProps">
|
|
13
|
+
<slot :name="slot" v-bind="slotProps || {}" />
|
|
14
|
+
</template>
|
|
15
|
+
</Base>
|
|
16
|
+
</template>
|
|
17
|
+
<script lang="ts" setup>
|
|
18
|
+
import { computed, type PropType, ref } from 'vue'
|
|
19
|
+
import { type ISimpleTableOptions } from '#core/components/Table/types'
|
|
20
|
+
import Base from '#core/components/Table/Base.vue'
|
|
21
|
+
import { initPageOptions } from '#core/composables/loaderPage'
|
|
22
|
+
import { useCoreConfig } from '#core/composables/useConfig'
|
|
23
|
+
|
|
24
|
+
defineSlots<{
|
|
25
|
+
'empty-state': () => any
|
|
26
|
+
'loading-state': () => any
|
|
27
|
+
}>()
|
|
28
|
+
|
|
29
|
+
const props = defineProps({
|
|
30
|
+
options: { type: Object as PropType<ISimpleTableOptions>, required: true },
|
|
31
|
+
})
|
|
32
|
+
|
|
33
|
+
const currentPage = ref(1)
|
|
34
|
+
const coreConfig = useCoreConfig()
|
|
35
|
+
const isShowSimplePagination = computed(
|
|
36
|
+
(): boolean => props.options.isSimplePagination ?? coreConfig.is_simple_pagination
|
|
37
|
+
)
|
|
38
|
+
|
|
39
|
+
const pageOptions = computed(() => {
|
|
40
|
+
if (!props.options?.limit) {
|
|
41
|
+
return undefined
|
|
42
|
+
}
|
|
43
|
+
|
|
44
|
+
return {
|
|
45
|
+
...initPageOptions({
|
|
46
|
+
limit: props.options.limit,
|
|
47
|
+
primary: props.options.primary,
|
|
48
|
+
}),
|
|
49
|
+
totalCount: props.options.rawData.length,
|
|
50
|
+
totalPage: Math.ceil(props.options.rawData.length / props.options.limit),
|
|
51
|
+
currentPage: currentPage.value,
|
|
52
|
+
}
|
|
53
|
+
})
|
|
54
|
+
|
|
55
|
+
const onPageChange = (page: number) => {
|
|
56
|
+
currentPage.value = page
|
|
57
|
+
}
|
|
58
|
+
|
|
59
|
+
const itemsByPage = computed(() => {
|
|
60
|
+
if (!pageOptions.value) {
|
|
61
|
+
return props.options?.rawData
|
|
62
|
+
}
|
|
63
|
+
|
|
64
|
+
const start = (pageOptions.value.currentPage - 1) * pageOptions.value.limit
|
|
65
|
+
const end = start + pageOptions.value.limit
|
|
66
|
+
|
|
67
|
+
return props.options?.rawData.slice(start, end)
|
|
68
|
+
})
|
|
69
|
+
</script>
|
|
@@ -1,65 +1,65 @@
|
|
|
1
|
-
<template>
|
|
2
|
-
<div>
|
|
3
|
-
<div v-if="options.isEnabledSearch" class="mb-4 flex justify-end">
|
|
4
|
-
<UInput
|
|
5
|
-
v-model="q"
|
|
6
|
-
icon="i-heroicons-magnifying-glass"
|
|
7
|
-
:placeholder="options.searchPlaceholder || 'ค้นหา....'"
|
|
8
|
-
/>
|
|
9
|
-
</div>
|
|
10
|
-
<Base
|
|
11
|
-
v-bind="$attrs"
|
|
12
|
-
:columns="options.columns"
|
|
13
|
-
:raw-data="options.rawData"
|
|
14
|
-
:status="options.status"
|
|
15
|
-
:page-options="options.pageOptions"
|
|
16
|
-
:is-simple-pagination="isShowSimplePagination"
|
|
17
|
-
:is-hide-bottom-pagination="options.isHideBottomPagination"
|
|
18
|
-
@page-change="onPageChange"
|
|
19
|
-
>
|
|
20
|
-
<template v-for="(_, slot) of $slots" #[slot]="slotProps">
|
|
21
|
-
<slot :name="slot" v-bind="slotProps || {}" />
|
|
22
|
-
</template>
|
|
23
|
-
</Base>
|
|
24
|
-
</div>
|
|
25
|
-
</template>
|
|
26
|
-
<script lang="ts" setup>
|
|
27
|
-
import { type PropType } from 'vue'
|
|
28
|
-
import { type ITableOptions } from '#core/components/Table/types'
|
|
29
|
-
import { _debounce, computed, ref, watch } from '#imports'
|
|
30
|
-
import { useCoreConfig } from '#core/composables/useConfig'
|
|
31
|
-
import Base from '#core/components/Table/Base.vue'
|
|
32
|
-
|
|
33
|
-
defineSlots<{
|
|
34
|
-
'empty-state': () => any
|
|
35
|
-
'loading-state': () => any
|
|
36
|
-
}>()
|
|
37
|
-
|
|
38
|
-
const emits = defineEmits<{
|
|
39
|
-
(event: 'pageChange', page: number): void
|
|
40
|
-
(event: 'search', q: string): void
|
|
41
|
-
}>()
|
|
42
|
-
|
|
43
|
-
const props = defineProps({
|
|
44
|
-
options: { type: Object as PropType<ITableOptions>, required: true },
|
|
45
|
-
})
|
|
46
|
-
|
|
47
|
-
const coreConfig = useCoreConfig()
|
|
48
|
-
|
|
49
|
-
const q = ref(props.options?.pageOptions.search ?? '')
|
|
50
|
-
|
|
51
|
-
const isShowSimplePagination = computed(
|
|
52
|
-
(): boolean => props.options.isSimplePagination ?? coreConfig.is_simple_pagination
|
|
53
|
-
)
|
|
54
|
-
|
|
55
|
-
watch(
|
|
56
|
-
q,
|
|
57
|
-
_debounce((value) => {
|
|
58
|
-
emits('search', value)
|
|
59
|
-
}, 500)
|
|
60
|
-
)
|
|
61
|
-
|
|
62
|
-
const onPageChange = (page: number) => {
|
|
63
|
-
emits('pageChange', page)
|
|
64
|
-
}
|
|
65
|
-
</script>
|
|
1
|
+
<template>
|
|
2
|
+
<div>
|
|
3
|
+
<div v-if="options.isEnabledSearch" class="mb-4 flex justify-end">
|
|
4
|
+
<UInput
|
|
5
|
+
v-model="q"
|
|
6
|
+
icon="i-heroicons-magnifying-glass"
|
|
7
|
+
:placeholder="options.searchPlaceholder || 'ค้นหา....'"
|
|
8
|
+
/>
|
|
9
|
+
</div>
|
|
10
|
+
<Base
|
|
11
|
+
v-bind="$attrs"
|
|
12
|
+
:columns="options.columns"
|
|
13
|
+
:raw-data="options.rawData"
|
|
14
|
+
:status="options.status"
|
|
15
|
+
:page-options="options.pageOptions"
|
|
16
|
+
:is-simple-pagination="isShowSimplePagination"
|
|
17
|
+
:is-hide-bottom-pagination="options.isHideBottomPagination"
|
|
18
|
+
@page-change="onPageChange"
|
|
19
|
+
>
|
|
20
|
+
<template v-for="(_, slot) of $slots" #[slot]="slotProps">
|
|
21
|
+
<slot :name="slot" v-bind="slotProps || {}" />
|
|
22
|
+
</template>
|
|
23
|
+
</Base>
|
|
24
|
+
</div>
|
|
25
|
+
</template>
|
|
26
|
+
<script lang="ts" setup>
|
|
27
|
+
import { type PropType } from 'vue'
|
|
28
|
+
import { type ITableOptions } from '#core/components/Table/types'
|
|
29
|
+
import { _debounce, computed, ref, watch } from '#imports'
|
|
30
|
+
import { useCoreConfig } from '#core/composables/useConfig'
|
|
31
|
+
import Base from '#core/components/Table/Base.vue'
|
|
32
|
+
|
|
33
|
+
defineSlots<{
|
|
34
|
+
'empty-state': () => any
|
|
35
|
+
'loading-state': () => any
|
|
36
|
+
}>()
|
|
37
|
+
|
|
38
|
+
const emits = defineEmits<{
|
|
39
|
+
(event: 'pageChange', page: number): void
|
|
40
|
+
(event: 'search', q: string): void
|
|
41
|
+
}>()
|
|
42
|
+
|
|
43
|
+
const props = defineProps({
|
|
44
|
+
options: { type: Object as PropType<ITableOptions>, required: true },
|
|
45
|
+
})
|
|
46
|
+
|
|
47
|
+
const coreConfig = useCoreConfig()
|
|
48
|
+
|
|
49
|
+
const q = ref(props.options?.pageOptions.search ?? '')
|
|
50
|
+
|
|
51
|
+
const isShowSimplePagination = computed(
|
|
52
|
+
(): boolean => props.options.isSimplePagination ?? coreConfig.is_simple_pagination
|
|
53
|
+
)
|
|
54
|
+
|
|
55
|
+
watch(
|
|
56
|
+
q,
|
|
57
|
+
_debounce((value) => {
|
|
58
|
+
emits('search', value)
|
|
59
|
+
}, 500)
|
|
60
|
+
)
|
|
61
|
+
|
|
62
|
+
const onPageChange = (page: number) => {
|
|
63
|
+
emits('pageChange', page)
|
|
64
|
+
}
|
|
65
|
+
</script>
|
|
@@ -1,64 +1,64 @@
|
|
|
1
|
-
<template>
|
|
2
|
-
<UTabs
|
|
3
|
-
v-bind="attrs"
|
|
4
|
-
:model-value="modelValue"
|
|
5
|
-
:class="$props.class"
|
|
6
|
-
:items="items"
|
|
7
|
-
:orientation="orientation"
|
|
8
|
-
:default-index="defaultIndex"
|
|
9
|
-
:ui="ui"
|
|
10
|
-
@change="change"
|
|
11
|
-
>
|
|
12
|
-
<template #default="{ item, index, selected }">
|
|
13
|
-
<slot name="default" :item="item" :index="index" :selected="selected" />
|
|
14
|
-
</template>
|
|
15
|
-
|
|
16
|
-
<template #item="{ item, index, selected }">
|
|
17
|
-
<slot name="item" :item="item" :index="index" :selected="selected" />
|
|
18
|
-
</template>
|
|
19
|
-
</UTabs>
|
|
20
|
-
</template>
|
|
21
|
-
|
|
22
|
-
<script setup lang="ts">
|
|
23
|
-
import { useUiConfig, type PropType, useUI, toRef } from '#imports'
|
|
24
|
-
import { tabs } from '#core/ui.config'
|
|
25
|
-
import type { Strategy, TabItem } from '#ui/types'
|
|
26
|
-
|
|
27
|
-
const config = useUiConfig<typeof tabs>(tabs, 'tabs')
|
|
28
|
-
|
|
29
|
-
const props = defineProps({
|
|
30
|
-
modelValue: {
|
|
31
|
-
type: Number,
|
|
32
|
-
default: undefined,
|
|
33
|
-
},
|
|
34
|
-
items: {
|
|
35
|
-
type: Array as PropType<TabItem[]>,
|
|
36
|
-
default: () => [],
|
|
37
|
-
},
|
|
38
|
-
orientation: {
|
|
39
|
-
type: String as PropType<'horizontal' | 'vertical'>,
|
|
40
|
-
default: 'horizontal',
|
|
41
|
-
validator: (value: string) => ['horizontal', 'vertical'].includes(value),
|
|
42
|
-
},
|
|
43
|
-
defaultIndex: {
|
|
44
|
-
type: Number,
|
|
45
|
-
default: 0,
|
|
46
|
-
},
|
|
47
|
-
class: {
|
|
48
|
-
type: [String, Object, Array] as PropType<any>,
|
|
49
|
-
default: () => '',
|
|
50
|
-
},
|
|
51
|
-
ui: {
|
|
52
|
-
type: Object as PropType<Partial<typeof config> & { strategy?: Strategy }>,
|
|
53
|
-
default: () => ({}),
|
|
54
|
-
},
|
|
55
|
-
})
|
|
56
|
-
|
|
57
|
-
const emits = defineEmits(['update:modelValue', 'change'])
|
|
58
|
-
|
|
59
|
-
const change = (index: number) => {
|
|
60
|
-
emits('change', index)
|
|
61
|
-
}
|
|
62
|
-
|
|
63
|
-
const { ui, attrs } = useUI('tabs', toRef(props, 'ui'), config, toRef(props, 'class'))
|
|
64
|
-
</script>
|
|
1
|
+
<template>
|
|
2
|
+
<UTabs
|
|
3
|
+
v-bind="attrs"
|
|
4
|
+
:model-value="modelValue"
|
|
5
|
+
:class="$props.class"
|
|
6
|
+
:items="items"
|
|
7
|
+
:orientation="orientation"
|
|
8
|
+
:default-index="defaultIndex"
|
|
9
|
+
:ui="ui"
|
|
10
|
+
@change="change"
|
|
11
|
+
>
|
|
12
|
+
<template #default="{ item, index, selected }">
|
|
13
|
+
<slot name="default" :item="item" :index="index" :selected="selected" />
|
|
14
|
+
</template>
|
|
15
|
+
|
|
16
|
+
<template #item="{ item, index, selected }">
|
|
17
|
+
<slot name="item" :item="item" :index="index" :selected="selected" />
|
|
18
|
+
</template>
|
|
19
|
+
</UTabs>
|
|
20
|
+
</template>
|
|
21
|
+
|
|
22
|
+
<script setup lang="ts">
|
|
23
|
+
import { useUiConfig, type PropType, useUI, toRef } from '#imports'
|
|
24
|
+
import { tabs } from '#core/ui.config'
|
|
25
|
+
import type { Strategy, TabItem } from '#ui/types'
|
|
26
|
+
|
|
27
|
+
const config = useUiConfig<typeof tabs>(tabs, 'tabs')
|
|
28
|
+
|
|
29
|
+
const props = defineProps({
|
|
30
|
+
modelValue: {
|
|
31
|
+
type: Number,
|
|
32
|
+
default: undefined,
|
|
33
|
+
},
|
|
34
|
+
items: {
|
|
35
|
+
type: Array as PropType<TabItem[]>,
|
|
36
|
+
default: () => [],
|
|
37
|
+
},
|
|
38
|
+
orientation: {
|
|
39
|
+
type: String as PropType<'horizontal' | 'vertical'>,
|
|
40
|
+
default: 'horizontal',
|
|
41
|
+
validator: (value: string) => ['horizontal', 'vertical'].includes(value),
|
|
42
|
+
},
|
|
43
|
+
defaultIndex: {
|
|
44
|
+
type: Number,
|
|
45
|
+
default: 0,
|
|
46
|
+
},
|
|
47
|
+
class: {
|
|
48
|
+
type: [String, Object, Array] as PropType<any>,
|
|
49
|
+
default: () => '',
|
|
50
|
+
},
|
|
51
|
+
ui: {
|
|
52
|
+
type: Object as PropType<Partial<typeof config> & { strategy?: Strategy }>,
|
|
53
|
+
default: () => ({}),
|
|
54
|
+
},
|
|
55
|
+
})
|
|
56
|
+
|
|
57
|
+
const emits = defineEmits(['update:modelValue', 'change'])
|
|
58
|
+
|
|
59
|
+
const change = (index: number) => {
|
|
60
|
+
emits('change', index)
|
|
61
|
+
}
|
|
62
|
+
|
|
63
|
+
const { ui, attrs } = useUI('tabs', toRef(props, 'ui'), config, toRef(props, 'class'))
|
|
64
|
+
</script>
|
|
@@ -1,40 +1,40 @@
|
|
|
1
|
-
<template>
|
|
2
|
-
<Teleport v-if="isShow" :to="target" :disabled="!target || disabled">
|
|
3
|
-
<slot />
|
|
4
|
-
</Teleport>
|
|
5
|
-
</template>
|
|
6
|
-
|
|
7
|
-
<script setup lang="ts">
|
|
8
|
-
import { onBeforeUnmount, onMounted, ref } from 'vue'
|
|
9
|
-
|
|
10
|
-
const props = defineProps<{ to: string; disabled?: boolean }>()
|
|
11
|
-
|
|
12
|
-
const target = ref<Element | null>(null)
|
|
13
|
-
const isShow = ref(false)
|
|
14
|
-
|
|
15
|
-
onBeforeUnmount(() => {
|
|
16
|
-
isShow.value = false
|
|
17
|
-
})
|
|
18
|
-
|
|
19
|
-
onMounted(() => {
|
|
20
|
-
isShow.value = true
|
|
21
|
-
|
|
22
|
-
const observer = new MutationObserver((mutationList, observer) => {
|
|
23
|
-
for (const mutation of mutationList) {
|
|
24
|
-
if (mutation.type !== 'childList') continue
|
|
25
|
-
const el = document.querySelector(props.to)
|
|
26
|
-
if (!el) continue
|
|
27
|
-
target.value = el
|
|
28
|
-
observer.disconnect()
|
|
29
|
-
|
|
30
|
-
break
|
|
31
|
-
}
|
|
32
|
-
})
|
|
33
|
-
|
|
34
|
-
observer.observe(document, { childList: true, subtree: true })
|
|
35
|
-
|
|
36
|
-
return () => {
|
|
37
|
-
observer.disconnect()
|
|
38
|
-
}
|
|
39
|
-
})
|
|
40
|
-
</script>
|
|
1
|
+
<template>
|
|
2
|
+
<Teleport v-if="isShow" :to="target" :disabled="!target || disabled">
|
|
3
|
+
<slot />
|
|
4
|
+
</Teleport>
|
|
5
|
+
</template>
|
|
6
|
+
|
|
7
|
+
<script setup lang="ts">
|
|
8
|
+
import { onBeforeUnmount, onMounted, ref } from 'vue'
|
|
9
|
+
|
|
10
|
+
const props = defineProps<{ to: string; disabled?: boolean }>()
|
|
11
|
+
|
|
12
|
+
const target = ref<Element | null>(null)
|
|
13
|
+
const isShow = ref(false)
|
|
14
|
+
|
|
15
|
+
onBeforeUnmount(() => {
|
|
16
|
+
isShow.value = false
|
|
17
|
+
})
|
|
18
|
+
|
|
19
|
+
onMounted(() => {
|
|
20
|
+
isShow.value = true
|
|
21
|
+
|
|
22
|
+
const observer = new MutationObserver((mutationList, observer) => {
|
|
23
|
+
for (const mutation of mutationList) {
|
|
24
|
+
if (mutation.type !== 'childList') continue
|
|
25
|
+
const el = document.querySelector(props.to)
|
|
26
|
+
if (!el) continue
|
|
27
|
+
target.value = el
|
|
28
|
+
observer.disconnect()
|
|
29
|
+
|
|
30
|
+
break
|
|
31
|
+
}
|
|
32
|
+
})
|
|
33
|
+
|
|
34
|
+
observer.observe(document, { childList: true, subtree: true })
|
|
35
|
+
|
|
36
|
+
return () => {
|
|
37
|
+
observer.disconnect()
|
|
38
|
+
}
|
|
39
|
+
})
|
|
40
|
+
</script>
|
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
import { type IListLoaderOptions } from '../helpers/apiListHelper
|
|
2
|
-
import { type IUseListLoader } from '../helpers/apiObjectHelper
|
|
1
|
+
import { type IListLoaderOptions } from '../helpers/apiListHelper';
|
|
2
|
+
import { type IUseListLoader } from '../helpers/apiObjectHelper';
|
|
3
3
|
export declare const useListLoader: <T = any, O = Record<string, any>>(loaderOptions: IListLoaderOptions<T, O>) => IUseListLoader<T, O>;
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import { ref } from "vue";
|
|
2
|
-
import { ObjectHelper } from "../utils/ObjectHelper.
|
|
2
|
+
import { ObjectHelper } from "../utils/ObjectHelper.mjs";
|
|
3
3
|
import {
|
|
4
4
|
apiListHelper
|
|
5
|
-
} from "../helpers/apiListHelper.
|
|
5
|
+
} from "../helpers/apiListHelper.mjs";
|
|
6
6
|
export const useListLoader = (loaderOptions) => {
|
|
7
7
|
const status = ref(ObjectHelper.createStatus());
|
|
8
8
|
const items = ref([]);
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import { type IObjectLoaderOptions, type IUseObjectLoader } from '../helpers/apiObjectHelper
|
|
1
|
+
import { type IObjectLoaderOptions, type IUseObjectLoader } from '../helpers/apiObjectHelper';
|
|
2
2
|
export declare const useObjectLoader: <T = any, B = any, O = Record<string, any>>(loaderOptions: IObjectLoaderOptions<T, B, O>) => IUseObjectLoader<T, B, O>;
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import { ref } from "vue";
|
|
2
|
-
import { ObjectHelper } from "../utils/ObjectHelper.
|
|
2
|
+
import { ObjectHelper } from "../utils/ObjectHelper.mjs";
|
|
3
3
|
import {
|
|
4
4
|
apiObjectHelper
|
|
5
|
-
} from "../helpers/apiObjectHelper.
|
|
5
|
+
} from "../helpers/apiObjectHelper.mjs";
|
|
6
6
|
export const useObjectLoader = (loaderOptions) => {
|
|
7
7
|
const status = ref(ObjectHelper.createStatus());
|
|
8
8
|
const data = ref(null);
|
|
@@ -1,13 +1,13 @@
|
|
|
1
1
|
import { ref } from "vue";
|
|
2
|
-
import { ObjectHelper } from "../utils/ObjectHelper.
|
|
2
|
+
import { ObjectHelper } from "../utils/ObjectHelper.mjs";
|
|
3
3
|
import {
|
|
4
4
|
apiAddHelper,
|
|
5
5
|
apiDeleteHelper,
|
|
6
6
|
apiFetchHelper,
|
|
7
7
|
apiFindHelper,
|
|
8
8
|
updateHelper
|
|
9
|
-
} from "../helpers/apiPageHelper.
|
|
10
|
-
import { useCoreConfig } from "./useConfig.
|
|
9
|
+
} from "../helpers/apiPageHelper.mjs";
|
|
10
|
+
import { useCoreConfig } from "./useConfig.mjs";
|
|
11
11
|
export const initPageOptions = (options) => ({
|
|
12
12
|
currentPageCount: 0,
|
|
13
13
|
currentPage: 1,
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { type ComputedRef } from 'vue';
|
|
2
2
|
import { type FieldContext, type FieldOptions } from 'vee-validate';
|
|
3
|
-
import { type IFieldProps, type IFormField } from '../components/Form/types
|
|
3
|
+
import { type IFieldProps, type IFormField } from '../components/Form/types';
|
|
4
4
|
interface IFieldContext<TValue> extends FieldContext<TValue> {
|
|
5
5
|
wrapperProps: ComputedRef<IFieldProps>;
|
|
6
6
|
}
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import { type ComputedRef } from 'vue';
|
|
2
2
|
import { type Store } from 'pinia';
|
|
3
3
|
import { type IStatus } from '#imports';
|
|
4
|
-
import { type IColumn, type ISimpleTableOptions, type ITableOptions } from '../components/Table/types
|
|
5
|
-
import { type IUsePageLoader } from '../helpers/apiPageHelper
|
|
4
|
+
import { type IColumn, type ISimpleTableOptions, type ITableOptions } from '../components/Table/types';
|
|
5
|
+
import { type IUsePageLoader } from '../helpers/apiPageHelper';
|
|
6
6
|
export interface IUseTable<T = object> {
|
|
7
7
|
repo: IUsePageLoader<T> | Store<any, any>;
|
|
8
8
|
columns: () => IColumn[];
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { get } from "@vueuse/core";
|
|
2
2
|
import { computed, ObjectHelper } from "#imports";
|
|
3
|
-
import { useCoreConfig } from "./useConfig.
|
|
3
|
+
import { useCoreConfig } from "./useConfig.mjs";
|
|
4
4
|
export const useTable = (options) => computed(() => {
|
|
5
5
|
return createTableOptions(
|
|
6
6
|
options.repo,
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { ObjectHelper } from "../utils/ObjectHelper.
|
|
1
|
+
import { ObjectHelper } from "../utils/ObjectHelper.mjs";
|
|
2
2
|
import { ParamHelper } from "#imports";
|
|
3
3
|
import { NewRequester } from "#core/lib/Requester";
|
|
4
4
|
export const apiListHelper = async (state, onUpdateStatus, onUpdateOptions, onUpdateItems, opts) => {
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { ObjectHelper } from "../utils/ObjectHelper.
|
|
1
|
+
import { ObjectHelper } from "../utils/ObjectHelper.mjs";
|
|
2
2
|
import { ParamHelper } from "#core/utils/ParamHelper";
|
|
3
3
|
import { NewRequester } from "#core/lib/Requester";
|
|
4
4
|
export const apiObjectHelper = async (state, onUpdateStatus, onUpdateOptions, onUpdateData, data, opts) => {
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { type IAPIAddState, type IAPIDeleteState, type IAPIFetchState, type IAPIFindState, type IAPIOptions, type IAPIUpdateState, type IPageOptions, type IStatus } from '../types/lib
|
|
1
|
+
import { type IAPIAddState, type IAPIDeleteState, type IAPIFetchState, type IAPIFindState, type IAPIOptions, type IAPIUpdateState, type IPageOptions, type IStatus } from '../types/lib';
|
|
2
2
|
import type { AxiosRequestConfig } from 'axios';
|
|
3
3
|
import type { Ref, UnwrapRef } from 'vue';
|
|
4
4
|
export interface IPageFetchLoaderOptions<D = Record<string, any>> {
|