@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,38 +1,38 @@
|
|
|
1
|
-
<template>
|
|
2
|
-
<UCard v-bind="attrs" :class="$props.class" :as="as" :ui="ui">
|
|
3
|
-
<template #header>
|
|
4
|
-
<slot name="header" />
|
|
5
|
-
</template>
|
|
6
|
-
|
|
7
|
-
<slot />
|
|
8
|
-
|
|
9
|
-
<template #footer>
|
|
10
|
-
<slot name="footer" />
|
|
11
|
-
</template>
|
|
12
|
-
</UCard>
|
|
13
|
-
</template>
|
|
14
|
-
|
|
15
|
-
<script setup lang="ts">
|
|
16
|
-
import { useUiConfig, type PropType, useUI, toRef } from '#imports'
|
|
17
|
-
import { card } from '#core/ui.config'
|
|
18
|
-
import type { Strategy } from '#ui/types'
|
|
19
|
-
|
|
20
|
-
const config = useUiConfig<typeof card>(card, 'card')
|
|
21
|
-
|
|
22
|
-
const props = defineProps({
|
|
23
|
-
as: {
|
|
24
|
-
type: String,
|
|
25
|
-
default: 'div',
|
|
26
|
-
},
|
|
27
|
-
class: {
|
|
28
|
-
type: [String, Object, Array] as PropType<any>,
|
|
29
|
-
default: () => '',
|
|
30
|
-
},
|
|
31
|
-
ui: {
|
|
32
|
-
type: Object as PropType<Partial<typeof config> & { strategy?: Strategy }>,
|
|
33
|
-
default: () => ({}),
|
|
34
|
-
},
|
|
35
|
-
})
|
|
36
|
-
|
|
37
|
-
const { ui, attrs } = useUI('card', toRef(props, 'ui'), config, toRef(props, 'class'))
|
|
38
|
-
</script>
|
|
1
|
+
<template>
|
|
2
|
+
<UCard v-bind="attrs" :class="$props.class" :as="as" :ui="ui">
|
|
3
|
+
<template #header>
|
|
4
|
+
<slot name="header" />
|
|
5
|
+
</template>
|
|
6
|
+
|
|
7
|
+
<slot />
|
|
8
|
+
|
|
9
|
+
<template #footer>
|
|
10
|
+
<slot name="footer" />
|
|
11
|
+
</template>
|
|
12
|
+
</UCard>
|
|
13
|
+
</template>
|
|
14
|
+
|
|
15
|
+
<script setup lang="ts">
|
|
16
|
+
import { useUiConfig, type PropType, useUI, toRef } from '#imports'
|
|
17
|
+
import { card } from '#core/ui.config'
|
|
18
|
+
import type { Strategy } from '#ui/types'
|
|
19
|
+
|
|
20
|
+
const config = useUiConfig<typeof card>(card, 'card')
|
|
21
|
+
|
|
22
|
+
const props = defineProps({
|
|
23
|
+
as: {
|
|
24
|
+
type: String,
|
|
25
|
+
default: 'div',
|
|
26
|
+
},
|
|
27
|
+
class: {
|
|
28
|
+
type: [String, Object, Array] as PropType<any>,
|
|
29
|
+
default: () => '',
|
|
30
|
+
},
|
|
31
|
+
ui: {
|
|
32
|
+
type: Object as PropType<Partial<typeof config> & { strategy?: Strategy }>,
|
|
33
|
+
default: () => ({}),
|
|
34
|
+
},
|
|
35
|
+
})
|
|
36
|
+
|
|
37
|
+
const { ui, attrs } = useUI('card', toRef(props, 'ui'), config, toRef(props, 'class'))
|
|
38
|
+
</script>
|
|
@@ -1,37 +1,37 @@
|
|
|
1
|
-
<template>
|
|
2
|
-
<NuxtLoadingIndicator :color="color" />
|
|
3
|
-
<Dialog />
|
|
4
|
-
<UNotifications />
|
|
5
|
-
<div v-if="isDevEnv" class="fixed bottom-4 right-4 z-50">
|
|
6
|
-
<div class="flex flex-col items-end justify-end">
|
|
7
|
-
<div
|
|
8
|
-
v-show="isShowDevTools"
|
|
9
|
-
class="max-w-screen mb-4 h-[750px] max-h-screen w-[600px] overflow-auto rounded-lg border bg-white opacity-80 shadow-2xl"
|
|
10
|
-
>
|
|
11
|
-
<p class="p-3 text-lg font-semibold">Debug Tools</p>
|
|
12
|
-
<hr />
|
|
13
|
-
<div id="dev-logs" class="flex flex-col space-y-3 p-3" />
|
|
14
|
-
</div>
|
|
15
|
-
<Button
|
|
16
|
-
:icon="isShowDevTools ? 'heroicons:x-mark' : 'heroicons:information-circle'"
|
|
17
|
-
color="info"
|
|
18
|
-
square
|
|
19
|
-
:ui="{ rounded: 'rounded-full' }"
|
|
20
|
-
@click="isShowDevTools = !isShowDevTools"
|
|
21
|
-
/>
|
|
22
|
-
</div>
|
|
23
|
-
</div>
|
|
24
|
-
</template>
|
|
25
|
-
<script lang="ts" setup>
|
|
26
|
-
import { ref } from 'vue'
|
|
27
|
-
|
|
28
|
-
defineProps({
|
|
29
|
-
color: {
|
|
30
|
-
type: String,
|
|
31
|
-
default: '#3675FB',
|
|
32
|
-
},
|
|
33
|
-
})
|
|
34
|
-
|
|
35
|
-
const isShowDevTools = ref(false)
|
|
36
|
-
const isDevEnv = process.env.NODE_ENV === 'development'
|
|
37
|
-
</script>
|
|
1
|
+
<template>
|
|
2
|
+
<NuxtLoadingIndicator :color="color" />
|
|
3
|
+
<Dialog />
|
|
4
|
+
<UNotifications />
|
|
5
|
+
<div v-if="isDevEnv" class="fixed bottom-4 right-4 z-50">
|
|
6
|
+
<div class="flex flex-col items-end justify-end">
|
|
7
|
+
<div
|
|
8
|
+
v-show="isShowDevTools"
|
|
9
|
+
class="max-w-screen mb-4 h-[750px] max-h-screen w-[600px] overflow-auto rounded-lg border bg-white opacity-80 shadow-2xl"
|
|
10
|
+
>
|
|
11
|
+
<p class="p-3 text-lg font-semibold">Debug Tools</p>
|
|
12
|
+
<hr />
|
|
13
|
+
<div id="dev-logs" class="flex flex-col space-y-3 p-3" />
|
|
14
|
+
</div>
|
|
15
|
+
<Button
|
|
16
|
+
:icon="isShowDevTools ? 'heroicons:x-mark' : 'heroicons:information-circle'"
|
|
17
|
+
color="info"
|
|
18
|
+
square
|
|
19
|
+
:ui="{ rounded: 'rounded-full' }"
|
|
20
|
+
@click="isShowDevTools = !isShowDevTools"
|
|
21
|
+
/>
|
|
22
|
+
</div>
|
|
23
|
+
</div>
|
|
24
|
+
</template>
|
|
25
|
+
<script lang="ts" setup>
|
|
26
|
+
import { ref } from 'vue'
|
|
27
|
+
|
|
28
|
+
defineProps({
|
|
29
|
+
color: {
|
|
30
|
+
type: String,
|
|
31
|
+
default: '#3675FB',
|
|
32
|
+
},
|
|
33
|
+
})
|
|
34
|
+
|
|
35
|
+
const isShowDevTools = ref(false)
|
|
36
|
+
const isDevEnv = process.env.NODE_ENV === 'development'
|
|
37
|
+
</script>
|
|
@@ -1,108 +1,108 @@
|
|
|
1
|
-
<template>
|
|
2
|
-
<Modal
|
|
3
|
-
v-if="dialog.meta?.type"
|
|
4
|
-
v-model="dialog.isShow"
|
|
5
|
-
:ui="{
|
|
6
|
-
innerWrapper: 'p-6',
|
|
7
|
-
}"
|
|
8
|
-
is-hide-close-btn
|
|
9
|
-
prevent-close
|
|
10
|
-
>
|
|
11
|
-
<UNotification
|
|
12
|
-
:ui="{
|
|
13
|
-
padding: '',
|
|
14
|
-
shadow: '',
|
|
15
|
-
ring: '',
|
|
16
|
-
icon: {
|
|
17
|
-
base: 'flex-shrink-0 w-10 h-10',
|
|
18
|
-
},
|
|
19
|
-
}"
|
|
20
|
-
:icon="getIcon"
|
|
21
|
-
:description="dialog.meta?.description"
|
|
22
|
-
:timeout="0"
|
|
23
|
-
:title="dialog.meta?.title"
|
|
24
|
-
:color="getColor"
|
|
25
|
-
close-button=""
|
|
26
|
-
/>
|
|
27
|
-
<div :class="[uiConfig.actionGroup.wrapper]">
|
|
28
|
-
<Button
|
|
29
|
-
v-if="dialog.meta?.isShowCancelBtn"
|
|
30
|
-
:color="uiConfig.actionGroup.cancelColor"
|
|
31
|
-
:variant="uiConfig.actionGroup.cancelVariant"
|
|
32
|
-
type="button"
|
|
33
|
-
@click="dialog.closeDialogCancel"
|
|
34
|
-
>
|
|
35
|
-
{{ dialog.meta?.cancelText || 'ยกเลิก' }}
|
|
36
|
-
</Button>
|
|
37
|
-
<Button
|
|
38
|
-
:color="uiConfig.actionGroup.confirmColor"
|
|
39
|
-
:variant="uiConfig.actionGroup.confirmVariant"
|
|
40
|
-
:class="[
|
|
41
|
-
{
|
|
42
|
-
'btn-success': dialog.meta?.type === DialogType.SUCCESS,
|
|
43
|
-
'btn-danger': dialog.meta?.type === DialogType.ERROR,
|
|
44
|
-
'btn-info': dialog.meta?.type === DialogType.INFO,
|
|
45
|
-
'btn-warning': dialog.meta?.type === DialogType.WARNING,
|
|
46
|
-
'mr-3': dialog.meta.isShowCancelBtn,
|
|
47
|
-
},
|
|
48
|
-
]"
|
|
49
|
-
@click="dialog.closeDialogProceed"
|
|
50
|
-
>
|
|
51
|
-
{{ dialog.meta?.confirmText || 'ตกลง' }}
|
|
52
|
-
</Button>
|
|
53
|
-
</div>
|
|
54
|
-
</Modal>
|
|
55
|
-
</template>
|
|
56
|
-
<script lang="tsx" setup>
|
|
57
|
-
import { DialogType, useDialog } from '#core/composables/useDialog'
|
|
58
|
-
import { computed } from 'vue'
|
|
59
|
-
import { useUiConfig } from '#core/composables/useConfig'
|
|
60
|
-
import { notification } from '#core/ui.config/notification'
|
|
61
|
-
|
|
62
|
-
const dialog = useDialog()
|
|
63
|
-
const uiConfig = useUiConfig<typeof notification>(notification, 'notification')
|
|
64
|
-
|
|
65
|
-
const getColor = computed(() => {
|
|
66
|
-
if (dialog.meta?.type === DialogType.SUCCESS) {
|
|
67
|
-
return 'success'
|
|
68
|
-
}
|
|
69
|
-
|
|
70
|
-
if (dialog.meta?.type === DialogType.ERROR) {
|
|
71
|
-
return 'danger'
|
|
72
|
-
}
|
|
73
|
-
|
|
74
|
-
if (dialog.meta?.type === DialogType.INFO) {
|
|
75
|
-
return 'info'
|
|
76
|
-
}
|
|
77
|
-
|
|
78
|
-
if (dialog.meta?.type === DialogType.WARNING) {
|
|
79
|
-
return 'warning'
|
|
80
|
-
}
|
|
81
|
-
|
|
82
|
-
return ''
|
|
83
|
-
})
|
|
84
|
-
|
|
85
|
-
const getIcon = computed(() => {
|
|
86
|
-
if (dialog.meta?.isHideIcon) {
|
|
87
|
-
return ''
|
|
88
|
-
}
|
|
89
|
-
|
|
90
|
-
if (dialog.meta?.type === DialogType.SUCCESS) {
|
|
91
|
-
return 'i-heroicons-check-circle'
|
|
92
|
-
}
|
|
93
|
-
|
|
94
|
-
if (dialog.meta?.type === DialogType.ERROR) {
|
|
95
|
-
return 'i-heroicons-x-circle'
|
|
96
|
-
}
|
|
97
|
-
|
|
98
|
-
if (dialog.meta?.type === DialogType.INFO) {
|
|
99
|
-
return 'i-heroicons-information-circle'
|
|
100
|
-
}
|
|
101
|
-
|
|
102
|
-
if (dialog.meta?.type === DialogType.WARNING) {
|
|
103
|
-
return 'i-heroicons-exclamation-circle'
|
|
104
|
-
}
|
|
105
|
-
|
|
106
|
-
return ''
|
|
107
|
-
})
|
|
108
|
-
</script>
|
|
1
|
+
<template>
|
|
2
|
+
<Modal
|
|
3
|
+
v-if="dialog.meta?.type"
|
|
4
|
+
v-model="dialog.isShow"
|
|
5
|
+
:ui="{
|
|
6
|
+
innerWrapper: 'p-6',
|
|
7
|
+
}"
|
|
8
|
+
is-hide-close-btn
|
|
9
|
+
prevent-close
|
|
10
|
+
>
|
|
11
|
+
<UNotification
|
|
12
|
+
:ui="{
|
|
13
|
+
padding: '',
|
|
14
|
+
shadow: '',
|
|
15
|
+
ring: '',
|
|
16
|
+
icon: {
|
|
17
|
+
base: 'flex-shrink-0 w-10 h-10',
|
|
18
|
+
},
|
|
19
|
+
}"
|
|
20
|
+
:icon="getIcon"
|
|
21
|
+
:description="dialog.meta?.description"
|
|
22
|
+
:timeout="0"
|
|
23
|
+
:title="dialog.meta?.title"
|
|
24
|
+
:color="getColor"
|
|
25
|
+
close-button=""
|
|
26
|
+
/>
|
|
27
|
+
<div :class="[uiConfig.actionGroup.wrapper]">
|
|
28
|
+
<Button
|
|
29
|
+
v-if="dialog.meta?.isShowCancelBtn"
|
|
30
|
+
:color="uiConfig.actionGroup.cancelColor"
|
|
31
|
+
:variant="uiConfig.actionGroup.cancelVariant"
|
|
32
|
+
type="button"
|
|
33
|
+
@click="dialog.closeDialogCancel"
|
|
34
|
+
>
|
|
35
|
+
{{ dialog.meta?.cancelText || 'ยกเลิก' }}
|
|
36
|
+
</Button>
|
|
37
|
+
<Button
|
|
38
|
+
:color="uiConfig.actionGroup.confirmColor"
|
|
39
|
+
:variant="uiConfig.actionGroup.confirmVariant"
|
|
40
|
+
:class="[
|
|
41
|
+
{
|
|
42
|
+
'btn-success': dialog.meta?.type === DialogType.SUCCESS,
|
|
43
|
+
'btn-danger': dialog.meta?.type === DialogType.ERROR,
|
|
44
|
+
'btn-info': dialog.meta?.type === DialogType.INFO,
|
|
45
|
+
'btn-warning': dialog.meta?.type === DialogType.WARNING,
|
|
46
|
+
'mr-3': dialog.meta.isShowCancelBtn,
|
|
47
|
+
},
|
|
48
|
+
]"
|
|
49
|
+
@click="dialog.closeDialogProceed"
|
|
50
|
+
>
|
|
51
|
+
{{ dialog.meta?.confirmText || 'ตกลง' }}
|
|
52
|
+
</Button>
|
|
53
|
+
</div>
|
|
54
|
+
</Modal>
|
|
55
|
+
</template>
|
|
56
|
+
<script lang="tsx" setup>
|
|
57
|
+
import { DialogType, useDialog } from '#core/composables/useDialog'
|
|
58
|
+
import { computed } from 'vue'
|
|
59
|
+
import { useUiConfig } from '#core/composables/useConfig'
|
|
60
|
+
import { notification } from '#core/ui.config/notification'
|
|
61
|
+
|
|
62
|
+
const dialog = useDialog()
|
|
63
|
+
const uiConfig = useUiConfig<typeof notification>(notification, 'notification')
|
|
64
|
+
|
|
65
|
+
const getColor = computed(() => {
|
|
66
|
+
if (dialog.meta?.type === DialogType.SUCCESS) {
|
|
67
|
+
return 'success'
|
|
68
|
+
}
|
|
69
|
+
|
|
70
|
+
if (dialog.meta?.type === DialogType.ERROR) {
|
|
71
|
+
return 'danger'
|
|
72
|
+
}
|
|
73
|
+
|
|
74
|
+
if (dialog.meta?.type === DialogType.INFO) {
|
|
75
|
+
return 'info'
|
|
76
|
+
}
|
|
77
|
+
|
|
78
|
+
if (dialog.meta?.type === DialogType.WARNING) {
|
|
79
|
+
return 'warning'
|
|
80
|
+
}
|
|
81
|
+
|
|
82
|
+
return ''
|
|
83
|
+
})
|
|
84
|
+
|
|
85
|
+
const getIcon = computed(() => {
|
|
86
|
+
if (dialog.meta?.isHideIcon) {
|
|
87
|
+
return ''
|
|
88
|
+
}
|
|
89
|
+
|
|
90
|
+
if (dialog.meta?.type === DialogType.SUCCESS) {
|
|
91
|
+
return 'i-heroicons-check-circle'
|
|
92
|
+
}
|
|
93
|
+
|
|
94
|
+
if (dialog.meta?.type === DialogType.ERROR) {
|
|
95
|
+
return 'i-heroicons-x-circle'
|
|
96
|
+
}
|
|
97
|
+
|
|
98
|
+
if (dialog.meta?.type === DialogType.INFO) {
|
|
99
|
+
return 'i-heroicons-information-circle'
|
|
100
|
+
}
|
|
101
|
+
|
|
102
|
+
if (dialog.meta?.type === DialogType.WARNING) {
|
|
103
|
+
return 'i-heroicons-exclamation-circle'
|
|
104
|
+
}
|
|
105
|
+
|
|
106
|
+
return ''
|
|
107
|
+
})
|
|
108
|
+
</script>
|
|
@@ -1,70 +1,70 @@
|
|
|
1
|
-
<template>
|
|
2
|
-
<UDropdown
|
|
3
|
-
v-bind="attrs"
|
|
4
|
-
:class="$props.class"
|
|
5
|
-
:items="items"
|
|
6
|
-
:mode="mode"
|
|
7
|
-
:open-delay="openDelay"
|
|
8
|
-
:close-delay="closeDelay"
|
|
9
|
-
:popper="{ placement: placement, arrow: arrow, offsetDistance: offset }"
|
|
10
|
-
:ui="ui"
|
|
11
|
-
>
|
|
12
|
-
<slot />
|
|
13
|
-
|
|
14
|
-
<template v-for="(_, slot) of $slots" #[slot]="slotProps">
|
|
15
|
-
<slot :name="slot" v-bind="slotProps || {}" />
|
|
16
|
-
</template>
|
|
17
|
-
</UDropdown>
|
|
18
|
-
</template>
|
|
19
|
-
|
|
20
|
-
<script lang="ts" setup>
|
|
21
|
-
import { type PropType, useUiConfig, useUI, toRef } from '#imports'
|
|
22
|
-
import { dropdown } from '#ui/ui.config'
|
|
23
|
-
import { DropdownPlacementArray, type DropdownPlacement } from './types'
|
|
24
|
-
import type { DropdownItem, Strategy } from '#ui/types'
|
|
25
|
-
|
|
26
|
-
const config = useUiConfig<typeof dropdown>(dropdown, 'dropdown')
|
|
27
|
-
|
|
28
|
-
const props = defineProps({
|
|
29
|
-
items: {
|
|
30
|
-
type: Array as PropType<DropdownItem[][]>,
|
|
31
|
-
default: () => [],
|
|
32
|
-
},
|
|
33
|
-
mode: {
|
|
34
|
-
type: String as PropType<'click' | 'hover'>,
|
|
35
|
-
default: 'click',
|
|
36
|
-
validator: (value: string) => ['click', 'hover'].includes(value),
|
|
37
|
-
},
|
|
38
|
-
arrow: {
|
|
39
|
-
type: Boolean,
|
|
40
|
-
default: false,
|
|
41
|
-
},
|
|
42
|
-
offset: {
|
|
43
|
-
type: Number,
|
|
44
|
-
default: 10,
|
|
45
|
-
},
|
|
46
|
-
openDelay: {
|
|
47
|
-
type: Number,
|
|
48
|
-
default: 0,
|
|
49
|
-
},
|
|
50
|
-
closeDelay: {
|
|
51
|
-
type: Number,
|
|
52
|
-
default: 0,
|
|
53
|
-
},
|
|
54
|
-
placement: {
|
|
55
|
-
type: String as PropType<DropdownPlacement>,
|
|
56
|
-
default: 'bottom-start',
|
|
57
|
-
validator: (value: DropdownPlacement) => DropdownPlacementArray.includes(value),
|
|
58
|
-
},
|
|
59
|
-
class: {
|
|
60
|
-
type: [String, Array, Object] as PropType<any>,
|
|
61
|
-
default: () => '',
|
|
62
|
-
},
|
|
63
|
-
ui: {
|
|
64
|
-
type: Object as PropType<Partial<typeof config & { strategy?: Strategy }>>,
|
|
65
|
-
default: () => ({}),
|
|
66
|
-
},
|
|
67
|
-
})
|
|
68
|
-
|
|
69
|
-
const { ui, attrs } = useUI('dropdown', toRef(props, 'ui'), config, toRef(props, 'class'))
|
|
70
|
-
</script>
|
|
1
|
+
<template>
|
|
2
|
+
<UDropdown
|
|
3
|
+
v-bind="attrs"
|
|
4
|
+
:class="$props.class"
|
|
5
|
+
:items="items"
|
|
6
|
+
:mode="mode"
|
|
7
|
+
:open-delay="openDelay"
|
|
8
|
+
:close-delay="closeDelay"
|
|
9
|
+
:popper="{ placement: placement, arrow: arrow, offsetDistance: offset }"
|
|
10
|
+
:ui="ui"
|
|
11
|
+
>
|
|
12
|
+
<slot />
|
|
13
|
+
|
|
14
|
+
<template v-for="(_, slot) of $slots" #[slot]="slotProps">
|
|
15
|
+
<slot :name="slot" v-bind="slotProps || {}" />
|
|
16
|
+
</template>
|
|
17
|
+
</UDropdown>
|
|
18
|
+
</template>
|
|
19
|
+
|
|
20
|
+
<script lang="ts" setup>
|
|
21
|
+
import { type PropType, useUiConfig, useUI, toRef } from '#imports'
|
|
22
|
+
import { dropdown } from '#ui/ui.config'
|
|
23
|
+
import { DropdownPlacementArray, type DropdownPlacement } from './types'
|
|
24
|
+
import type { DropdownItem, Strategy } from '#ui/types'
|
|
25
|
+
|
|
26
|
+
const config = useUiConfig<typeof dropdown>(dropdown, 'dropdown')
|
|
27
|
+
|
|
28
|
+
const props = defineProps({
|
|
29
|
+
items: {
|
|
30
|
+
type: Array as PropType<DropdownItem[][]>,
|
|
31
|
+
default: () => [],
|
|
32
|
+
},
|
|
33
|
+
mode: {
|
|
34
|
+
type: String as PropType<'click' | 'hover'>,
|
|
35
|
+
default: 'click',
|
|
36
|
+
validator: (value: string) => ['click', 'hover'].includes(value),
|
|
37
|
+
},
|
|
38
|
+
arrow: {
|
|
39
|
+
type: Boolean,
|
|
40
|
+
default: false,
|
|
41
|
+
},
|
|
42
|
+
offset: {
|
|
43
|
+
type: Number,
|
|
44
|
+
default: 10,
|
|
45
|
+
},
|
|
46
|
+
openDelay: {
|
|
47
|
+
type: Number,
|
|
48
|
+
default: 0,
|
|
49
|
+
},
|
|
50
|
+
closeDelay: {
|
|
51
|
+
type: Number,
|
|
52
|
+
default: 0,
|
|
53
|
+
},
|
|
54
|
+
placement: {
|
|
55
|
+
type: String as PropType<DropdownPlacement>,
|
|
56
|
+
default: 'bottom-start',
|
|
57
|
+
validator: (value: DropdownPlacement) => DropdownPlacementArray.includes(value),
|
|
58
|
+
},
|
|
59
|
+
class: {
|
|
60
|
+
type: [String, Array, Object] as PropType<any>,
|
|
61
|
+
default: () => '',
|
|
62
|
+
},
|
|
63
|
+
ui: {
|
|
64
|
+
type: Object as PropType<Partial<typeof config & { strategy?: Strategy }>>,
|
|
65
|
+
default: () => ({}),
|
|
66
|
+
},
|
|
67
|
+
})
|
|
68
|
+
|
|
69
|
+
const { ui, attrs } = useUI('dropdown', toRef(props, 'ui'), config, toRef(props, 'class'))
|
|
70
|
+
</script>
|