@finema/core 1.4.115 → 1.4.116
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 -1
- package/dist/module.mjs +1 -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 +13 -13
- 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 +90 -90
- package/dist/runtime/components/FlexDeck/index.vue +66 -66
- package/dist/runtime/components/Form/FieldWrapper.vue +23 -23
- package/dist/runtime/components/Form/Fields.vue +222 -222
- package/dist/runtime/components/Form/InputCheckbox/index.vue +21 -21
- package/dist/runtime/components/Form/InputDateTime/index.vue +60 -60
- 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 +36 -36
- package/dist/runtime/components/Form/InputStatic/index.vue +16 -16
- package/dist/runtime/components/Form/InputTags/index.vue +145 -134
- 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/InputUploadDropzoneAuto/index.vue +341 -333
- package/dist/runtime/components/Form/InputUploadDropzoneAuto/types.d.ts +2 -1
- package/dist/runtime/components/Form/InputUploadDropzoneAutoMultiple/{Item.vue → ItemUpload.vue} +241 -260
- package/dist/runtime/components/Form/InputUploadDropzoneAutoMultiple/ItemView.vue +89 -0
- package/dist/runtime/components/Form/InputUploadDropzoneAutoMultiple/index.vue +164 -140
- package/dist/runtime/components/Form/InputUploadDropzoneAutoMultiple/types.d.ts +4 -3
- package/dist/runtime/components/Form/InputUploadDropzoneImageAutoMultiple/{item.vue → ItemUpload.vue} +161 -179
- package/dist/runtime/components/Form/InputUploadDropzoneImageAutoMultiple/ItemView.vue +64 -0
- package/dist/runtime/components/Form/InputUploadDropzoneImageAutoMultiple/index.vue +172 -148
- package/dist/runtime/components/Form/InputUploadDropzoneImageAutoMultiple/types.d.ts +4 -3
- package/dist/runtime/components/Form/InputUploadFileClassic/index.vue +95 -95
- package/dist/runtime/components/Form/InputUploadFileClassicAuto/index.vue +151 -143
- package/dist/runtime/components/Form/InputUploadFileClassicAuto/types.d.ts +2 -1
- package/dist/runtime/components/Form/InputUploadImageAuto/index.vue +219 -222
- package/dist/runtime/components/Form/InputUploadImageAuto/types.d.ts +2 -1
- package/dist/runtime/components/Form/InputWYSIWYG/index.vue +53 -53
- package/dist/runtime/components/Form/index.vue +6 -6
- package/dist/runtime/components/Form/types.d.ts +6 -0
- 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/helpers/apiListHelper.d.ts +0 -1
- package/dist/runtime/helpers/apiObjectHelper.d.ts +0 -1
- package/dist/runtime/helpers/apiPageHelper.d.ts +0 -1
- package/dist/runtime/helpers/componentHelper.d.ts +6 -0
- package/dist/runtime/helpers/componentHelper.mjs +15 -0
- package/package.json +92 -92
|
@@ -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>
|
|
@@ -3,6 +3,7 @@ export declare const checkMaxSize: (file: File, acceptFileSize?: number) => bool
|
|
|
3
3
|
export declare const checkFileType: (file: File, acceptFileType: string | string[]) => boolean;
|
|
4
4
|
export declare const generateURL: (file: File) => string;
|
|
5
5
|
export declare const isImage: (file: File) => boolean;
|
|
6
|
+
export declare const isImageFromPath: (path?: string) => boolean;
|
|
6
7
|
export declare const useFileAllocate: (selectedFile: Ref<File | undefined | null>, props: {
|
|
7
8
|
accept?: string | string[];
|
|
8
9
|
maxSize?: number;
|
|
@@ -15,6 +16,11 @@ export declare const useFileAllocate: (selectedFile: Ref<File | undefined | null
|
|
|
15
16
|
isAcceptFileUseMb: any;
|
|
16
17
|
acceptFile: any;
|
|
17
18
|
};
|
|
19
|
+
export declare const useFileSize: (size?: number) => {
|
|
20
|
+
isSelectedFileUseMb: any;
|
|
21
|
+
selectedFileSizeKb: any;
|
|
22
|
+
selectedFileSizeMb: any;
|
|
23
|
+
};
|
|
18
24
|
export declare const useFileProgress: () => {
|
|
19
25
|
percent: any;
|
|
20
26
|
onUploadProgress: (progressEvent: ProgressEvent) => void;
|
|
@@ -38,6 +38,11 @@ export const generateURL = (file) => {
|
|
|
38
38
|
export const isImage = (file) => {
|
|
39
39
|
return file.type.startsWith("image/");
|
|
40
40
|
};
|
|
41
|
+
export const isImageFromPath = (path = "") => {
|
|
42
|
+
const imageExtensions = [".jpg", ".jpeg", ".png", ".gif", ".bmp", ".webp"];
|
|
43
|
+
const extension = path.toLowerCase().substring(path.lastIndexOf("."));
|
|
44
|
+
return imageExtensions.includes(extension);
|
|
45
|
+
};
|
|
41
46
|
export const useFileAllocate = (selectedFile, props) => {
|
|
42
47
|
const selectedFileSizeKb = computed(() => ((selectedFile.value?.size || 0) / 1e3).toFixed(2));
|
|
43
48
|
const selectedFileSizeMb = computed(
|
|
@@ -60,6 +65,16 @@ export const useFileAllocate = (selectedFile, props) => {
|
|
|
60
65
|
acceptFile
|
|
61
66
|
};
|
|
62
67
|
};
|
|
68
|
+
export const useFileSize = (size = 0) => {
|
|
69
|
+
const isSelectedFileUseMb = computed(() => size / 1e3 > 1024);
|
|
70
|
+
const selectedFileSizeKb = computed(() => (size / 1e3).toFixed(2));
|
|
71
|
+
const selectedFileSizeMb = computed(() => (size / 1e3 / 1e3).toFixed(2));
|
|
72
|
+
return {
|
|
73
|
+
isSelectedFileUseMb,
|
|
74
|
+
selectedFileSizeKb,
|
|
75
|
+
selectedFileSizeMb
|
|
76
|
+
};
|
|
77
|
+
};
|
|
63
78
|
export const useFileProgress = () => {
|
|
64
79
|
const percent = ref(0);
|
|
65
80
|
const onUploadProgress = (progressEvent) => {
|