@finema/core 1.4.201 → 1.4.203
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.d.mts +1 -0
- package/dist/module.d.ts +1 -0
- package/dist/module.json +1 -1
- package/dist/module.mjs +2 -1
- 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 +45 -45
- 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 +152 -152
- 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 +61 -61
- 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 +141 -141
- package/dist/runtime/components/Form/InputText/index.vue +68 -68
- package/dist/runtime/components/Form/InputTextarea/index.vue +25 -25
- package/dist/runtime/components/Form/InputToggle/index.vue +27 -27
- package/dist/runtime/components/Form/InputUploadDropzone/index.vue +206 -206
- package/dist/runtime/components/Form/InputUploadDropzoneAuto/index.vue +342 -342
- 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 +170 -170
- 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 +178 -178
- 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/InputUploadImageAuto/index.vue +219 -219
- package/dist/runtime/components/Form/InputWYSIWYG/UploadImageForm.vue +55 -55
- package/dist/runtime/components/Form/InputWYSIWYG/index.vue +228 -228
- 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 +153 -153
- 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 +29 -29
- 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/core.config.d.ts +1 -0
- package/dist/runtime/core.config.mjs +2 -1
- package/dist/runtime/ui.config/notifications.d.ts +3 -0
- package/dist/runtime/ui.config/notifications.mjs +3 -0
- package/dist/runtime/utils/TimeHelper.mjs +15 -10
- package/dist/runtime/utils/TimeHelper.spec.mjs +11 -4
- package/dist/runtime/utils/TimeHelper.thai.spec.mjs +2 -1
- package/package.json +102 -101
- package/dist/runtime/components/Form/InputDateTime/index.vue~ +0 -61
- package/dist/runtime/ui.config/table.ts~ +0 -48
|
@@ -1,29 +1,29 @@
|
|
|
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
|
-
if (typeof value === 'string') {
|
|
24
|
-
return value || '-'
|
|
25
|
-
}
|
|
26
|
-
|
|
27
|
-
return value ?? '-'
|
|
28
|
-
})
|
|
29
|
-
</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
|
+
if (typeof value === 'string') {
|
|
24
|
+
return value || '-'
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
return value ?? '-'
|
|
28
|
+
})
|
|
29
|
+
</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,6 +1,7 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { addYears, format, formatISO, isDate, isValid, parse } from "date-fns";
|
|
2
2
|
import * as locales from "date-fns/locale";
|
|
3
3
|
import { useCoreConfig } from "#core/composables/useConfig";
|
|
4
|
+
import { formatInTimeZone } from "date-fns-tz";
|
|
4
5
|
const dateFormat = useCoreConfig().date_format_system;
|
|
5
6
|
const dateFormatDisplay = useCoreConfig().date_format;
|
|
6
7
|
const dateTimeFormat = useCoreConfig().date_time_format_system;
|
|
@@ -8,6 +9,10 @@ const dateTimeFormatDisplay = useCoreConfig().date_time_format;
|
|
|
8
9
|
const timeFormat = useCoreConfig().time_format;
|
|
9
10
|
const isThaiYear = useCoreConfig().is_thai_year;
|
|
10
11
|
const isThaiMonth = useCoreConfig().is_thai_month;
|
|
12
|
+
const timeZone = useCoreConfig().time_zone;
|
|
13
|
+
const getTime = (time) => {
|
|
14
|
+
return isDate(time) ? time : new Date(time);
|
|
15
|
+
};
|
|
11
16
|
export class TimeHelper {
|
|
12
17
|
static thaiFormat = (dateStr, formatStr) => {
|
|
13
18
|
let newDateStr = dateStr;
|
|
@@ -18,13 +23,13 @@ export class TimeHelper {
|
|
|
18
23
|
if (isThaiMonth) {
|
|
19
24
|
options.locale = locales.th;
|
|
20
25
|
}
|
|
21
|
-
return
|
|
26
|
+
return formatInTimeZone(newDateStr, timeZone, formatStr, options);
|
|
22
27
|
};
|
|
23
28
|
static displayDate = (time) => {
|
|
24
29
|
if (!time) {
|
|
25
30
|
return time;
|
|
26
31
|
}
|
|
27
|
-
const parsedTime =
|
|
32
|
+
const parsedTime = getTime(time);
|
|
28
33
|
const newTime = TimeHelper.thaiFormat(parsedTime, dateFormatDisplay);
|
|
29
34
|
return isValid(parsedTime) ? newTime : time;
|
|
30
35
|
};
|
|
@@ -32,7 +37,7 @@ export class TimeHelper {
|
|
|
32
37
|
if (!time) {
|
|
33
38
|
return time;
|
|
34
39
|
}
|
|
35
|
-
const parsedTime =
|
|
40
|
+
const parsedTime = getTime(time);
|
|
36
41
|
const newTime = TimeHelper.thaiFormat(parsedTime, dateTimeFormatDisplay);
|
|
37
42
|
return isValid(parsedTime) ? newTime : time;
|
|
38
43
|
};
|
|
@@ -43,8 +48,8 @@ export class TimeHelper {
|
|
|
43
48
|
endDate
|
|
44
49
|
};
|
|
45
50
|
}
|
|
46
|
-
const parsedStartDate =
|
|
47
|
-
const parsedEndDate =
|
|
51
|
+
const parsedStartDate = getTime(startDate);
|
|
52
|
+
const parsedEndDate = getTime(endDate);
|
|
48
53
|
const newStartDate = TimeHelper.thaiFormat(parsedStartDate, dateFormatDisplay);
|
|
49
54
|
const newEndDate = TimeHelper.thaiFormat(parsedEndDate, dateFormatDisplay);
|
|
50
55
|
return {
|
|
@@ -57,8 +62,8 @@ export class TimeHelper {
|
|
|
57
62
|
return time;
|
|
58
63
|
}
|
|
59
64
|
try {
|
|
60
|
-
const parsedTime =
|
|
61
|
-
const newTime =
|
|
65
|
+
const parsedTime = getTime(time);
|
|
66
|
+
const newTime = formatInTimeZone(parsedTime, "Zulu", dateTimeFormat);
|
|
62
67
|
return isValid(parsedTime) ? newTime : time;
|
|
63
68
|
} catch (e) {
|
|
64
69
|
return time.toString();
|
|
@@ -69,8 +74,8 @@ export class TimeHelper {
|
|
|
69
74
|
return time;
|
|
70
75
|
}
|
|
71
76
|
try {
|
|
72
|
-
const parsedTime =
|
|
73
|
-
const newTime =
|
|
77
|
+
const parsedTime = getTime(time);
|
|
78
|
+
const newTime = formatInTimeZone(parsedTime, timeZone, dateTimeFormat);
|
|
74
79
|
return isValid(parsedTime) ? newTime : time;
|
|
75
80
|
} catch (e) {
|
|
76
81
|
return time.toString();
|