@finema/core 1.4.90 → 1.4.92
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 +63 -63
- package/dist/module.json +1 -1
- package/dist/module.mjs +3 -2
- package/dist/runtime/components/Alert.vue +48 -48
- package/dist/runtime/components/Avatar.vue +27 -27
- package/dist/runtime/components/Badge.vue +53 -53
- package/dist/runtime/components/Breadcrumb.vue +44 -44
- package/dist/runtime/components/Button/Group.vue +37 -37
- package/dist/runtime/components/Button/index.vue +76 -76
- 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 +168 -160
- 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/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/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 +205 -158
- package/dist/runtime/components/Form/InputUploadDropzoneAuto/index.vue +349 -243
- package/dist/runtime/components/Form/InputUploadDropzoneAuto/types.d.ts +3 -0
- package/dist/runtime/components/Form/InputUploadDropzoneAutoMultiple/Item.vue +282 -0
- package/dist/runtime/components/Form/InputUploadDropzoneAutoMultiple/index.vue +117 -0
- package/dist/runtime/components/Form/InputUploadDropzoneAutoMultiple/types.d.ts +22 -0
- package/dist/runtime/components/Form/InputUploadDropzoneAutoMultiple/types.mjs +0 -0
- package/dist/runtime/components/Form/InputUploadFileClassic/index.vue +101 -101
- package/dist/runtime/components/Form/InputUploadFileClassicAuto/index.vue +174 -174
- package/dist/runtime/components/Form/index.vue +6 -6
- package/dist/runtime/components/Form/types.d.ts +4 -2
- package/dist/runtime/components/Form/types.mjs +1 -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/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/componentHelper.d.ts +9 -0
- package/dist/runtime/helpers/componentHelper.mjs +30 -0
- package/dist/runtime/ui.config/uploadFileDropzone.d.ts +36 -13
- package/dist/runtime/ui.config/uploadFileDropzone.mjs +42 -19
- package/dist/runtime/utils/StringHelper.d.ts +1 -0
- package/dist/runtime/utils/StringHelper.mjs +6 -0
- package/package.json +88 -88
|
@@ -1,76 +1,76 @@
|
|
|
1
|
-
<template>
|
|
2
|
-
<UButton v-bind="$props">
|
|
3
|
-
<template #leading><slot name="leading" :disabled="disabled" :loading="loading" /></template>
|
|
4
|
-
<slot />
|
|
5
|
-
<template #trailing><slot name="trailing" :disabled="disabled" :loading="loading" /></template>
|
|
6
|
-
</UButton>
|
|
7
|
-
</template>
|
|
8
|
-
|
|
9
|
-
<script lang="ts" setup>
|
|
10
|
-
import { type button } from '#ui/ui.config'
|
|
11
|
-
import { UButton } from '#components'
|
|
12
|
-
import type { ButtonColor, ButtonSize, ButtonVariant } from '#ui/types/button'
|
|
13
|
-
import type { PropType } from 'vue'
|
|
14
|
-
|
|
15
|
-
defineProps({
|
|
16
|
-
...UButton.props,
|
|
17
|
-
label: {
|
|
18
|
-
type: String,
|
|
19
|
-
},
|
|
20
|
-
type: {
|
|
21
|
-
type: String as PropType<'button' | 'submit' | 'reset'>,
|
|
22
|
-
},
|
|
23
|
-
block: {
|
|
24
|
-
type: Boolean,
|
|
25
|
-
},
|
|
26
|
-
loading: {
|
|
27
|
-
type: Boolean,
|
|
28
|
-
},
|
|
29
|
-
disabled: {
|
|
30
|
-
type: Boolean,
|
|
31
|
-
},
|
|
32
|
-
padded: {
|
|
33
|
-
type: Boolean,
|
|
34
|
-
default: true,
|
|
35
|
-
},
|
|
36
|
-
size: {
|
|
37
|
-
type: String as PropType<ButtonSize>,
|
|
38
|
-
},
|
|
39
|
-
color: {
|
|
40
|
-
type: String as PropType<ButtonColor>,
|
|
41
|
-
},
|
|
42
|
-
variant: {
|
|
43
|
-
type: String as PropType<ButtonVariant>,
|
|
44
|
-
},
|
|
45
|
-
loadingIcon: {
|
|
46
|
-
type: String,
|
|
47
|
-
},
|
|
48
|
-
icon: {
|
|
49
|
-
type: String,
|
|
50
|
-
},
|
|
51
|
-
leadingIcon: {
|
|
52
|
-
type: String,
|
|
53
|
-
},
|
|
54
|
-
trailingIcon: {
|
|
55
|
-
type: String,
|
|
56
|
-
},
|
|
57
|
-
trailing: {
|
|
58
|
-
type: Boolean,
|
|
59
|
-
},
|
|
60
|
-
leading: {
|
|
61
|
-
type: Boolean,
|
|
62
|
-
},
|
|
63
|
-
square: {
|
|
64
|
-
type: Boolean,
|
|
65
|
-
},
|
|
66
|
-
truncate: {
|
|
67
|
-
type: Boolean,
|
|
68
|
-
},
|
|
69
|
-
class: {
|
|
70
|
-
type: [String, Array, Object] as PropType<any>,
|
|
71
|
-
},
|
|
72
|
-
ui: {
|
|
73
|
-
type: Object as PropType<Partial<typeof button & { strategy?: Strategy }>>,
|
|
74
|
-
},
|
|
75
|
-
})
|
|
76
|
-
</script>
|
|
1
|
+
<template>
|
|
2
|
+
<UButton v-bind="$props">
|
|
3
|
+
<template #leading><slot name="leading" :disabled="disabled" :loading="loading" /></template>
|
|
4
|
+
<slot />
|
|
5
|
+
<template #trailing><slot name="trailing" :disabled="disabled" :loading="loading" /></template>
|
|
6
|
+
</UButton>
|
|
7
|
+
</template>
|
|
8
|
+
|
|
9
|
+
<script lang="ts" setup>
|
|
10
|
+
import { type button } from '#ui/ui.config'
|
|
11
|
+
import { UButton } from '#components'
|
|
12
|
+
import type { ButtonColor, ButtonSize, ButtonVariant } from '#ui/types/button'
|
|
13
|
+
import type { PropType } from 'vue'
|
|
14
|
+
|
|
15
|
+
defineProps({
|
|
16
|
+
...UButton.props,
|
|
17
|
+
label: {
|
|
18
|
+
type: String,
|
|
19
|
+
},
|
|
20
|
+
type: {
|
|
21
|
+
type: String as PropType<'button' | 'submit' | 'reset'>,
|
|
22
|
+
},
|
|
23
|
+
block: {
|
|
24
|
+
type: Boolean,
|
|
25
|
+
},
|
|
26
|
+
loading: {
|
|
27
|
+
type: Boolean,
|
|
28
|
+
},
|
|
29
|
+
disabled: {
|
|
30
|
+
type: Boolean,
|
|
31
|
+
},
|
|
32
|
+
padded: {
|
|
33
|
+
type: Boolean,
|
|
34
|
+
default: true,
|
|
35
|
+
},
|
|
36
|
+
size: {
|
|
37
|
+
type: String as PropType<ButtonSize>,
|
|
38
|
+
},
|
|
39
|
+
color: {
|
|
40
|
+
type: String as PropType<ButtonColor>,
|
|
41
|
+
},
|
|
42
|
+
variant: {
|
|
43
|
+
type: String as PropType<ButtonVariant>,
|
|
44
|
+
},
|
|
45
|
+
loadingIcon: {
|
|
46
|
+
type: String,
|
|
47
|
+
},
|
|
48
|
+
icon: {
|
|
49
|
+
type: String,
|
|
50
|
+
},
|
|
51
|
+
leadingIcon: {
|
|
52
|
+
type: String,
|
|
53
|
+
},
|
|
54
|
+
trailingIcon: {
|
|
55
|
+
type: String,
|
|
56
|
+
},
|
|
57
|
+
trailing: {
|
|
58
|
+
type: Boolean,
|
|
59
|
+
},
|
|
60
|
+
leading: {
|
|
61
|
+
type: Boolean,
|
|
62
|
+
},
|
|
63
|
+
square: {
|
|
64
|
+
type: Boolean,
|
|
65
|
+
},
|
|
66
|
+
truncate: {
|
|
67
|
+
type: Boolean,
|
|
68
|
+
},
|
|
69
|
+
class: {
|
|
70
|
+
type: [String, Array, Object] as PropType<any>,
|
|
71
|
+
},
|
|
72
|
+
ui: {
|
|
73
|
+
type: Object as PropType<Partial<typeof button & { strategy?: Strategy }>>,
|
|
74
|
+
},
|
|
75
|
+
})
|
|
76
|
+
</script>
|
|
@@ -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,13 +1,13 @@
|
|
|
1
|
-
<template>
|
|
2
|
-
<NuxtLoadingIndicator :color="color" />
|
|
3
|
-
<Dialog />
|
|
4
|
-
<UNotifications />
|
|
5
|
-
</template>
|
|
6
|
-
<script lang="ts" setup>
|
|
7
|
-
defineProps({
|
|
8
|
-
color: {
|
|
9
|
-
type: String,
|
|
10
|
-
default: '#3675FB',
|
|
11
|
-
},
|
|
12
|
-
})
|
|
13
|
-
</script>
|
|
1
|
+
<template>
|
|
2
|
+
<NuxtLoadingIndicator :color="color" />
|
|
3
|
+
<Dialog />
|
|
4
|
+
<UNotifications />
|
|
5
|
+
</template>
|
|
6
|
+
<script lang="ts" setup>
|
|
7
|
+
defineProps({
|
|
8
|
+
color: {
|
|
9
|
+
type: String,
|
|
10
|
+
default: '#3675FB',
|
|
11
|
+
},
|
|
12
|
+
})
|
|
13
|
+
</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>
|