@finema/core 1.4.124 → 1.4.126
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 +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 -21
- package/dist/runtime/components/Form/InputCheckbox/types.d.ts +3 -1
- 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 +43 -36
- package/dist/runtime/components/Form/InputSelectMultiple/index.vue +52 -52
- 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/InputUploadDropzoneAuto/index.vue +341 -341
- 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/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/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/index.vue +53 -53
- package/dist/runtime/components/Form/index.vue +6 -6
- package/dist/runtime/components/Form/types.d.ts +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/Log.vue +6 -30
- package/dist/runtime/components/LogItem.vue +43 -0
- 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/package.json +95 -95
|
@@ -1,36 +1,36 @@
|
|
|
1
|
-
<template>
|
|
2
|
-
<img :src="getSrc" />
|
|
3
|
-
</template>
|
|
4
|
-
<script lang="ts" setup>
|
|
5
|
-
import { useImage } from '@vueuse/core'
|
|
6
|
-
import { computed } from 'vue'
|
|
7
|
-
|
|
8
|
-
const props = defineProps({
|
|
9
|
-
src: {
|
|
10
|
-
type: String,
|
|
11
|
-
required: true,
|
|
12
|
-
},
|
|
13
|
-
loadingSrc: {
|
|
14
|
-
type: String,
|
|
15
|
-
default: '',
|
|
16
|
-
},
|
|
17
|
-
errorSrc: {
|
|
18
|
-
type: String,
|
|
19
|
-
default: '',
|
|
20
|
-
},
|
|
21
|
-
})
|
|
22
|
-
|
|
23
|
-
const { isLoading, error } = useImage({ src: props.src })
|
|
24
|
-
|
|
25
|
-
const getSrc = computed(() => {
|
|
26
|
-
if (isLoading.value) {
|
|
27
|
-
return props.loadingSrc
|
|
28
|
-
}
|
|
29
|
-
|
|
30
|
-
if (error.value) {
|
|
31
|
-
return props.errorSrc
|
|
32
|
-
}
|
|
33
|
-
|
|
34
|
-
return props.src
|
|
35
|
-
})
|
|
36
|
-
</script>
|
|
1
|
+
<template>
|
|
2
|
+
<img :src="getSrc" />
|
|
3
|
+
</template>
|
|
4
|
+
<script lang="ts" setup>
|
|
5
|
+
import { useImage } from '@vueuse/core'
|
|
6
|
+
import { computed } from 'vue'
|
|
7
|
+
|
|
8
|
+
const props = defineProps({
|
|
9
|
+
src: {
|
|
10
|
+
type: String,
|
|
11
|
+
required: true,
|
|
12
|
+
},
|
|
13
|
+
loadingSrc: {
|
|
14
|
+
type: String,
|
|
15
|
+
default: '',
|
|
16
|
+
},
|
|
17
|
+
errorSrc: {
|
|
18
|
+
type: String,
|
|
19
|
+
default: '',
|
|
20
|
+
},
|
|
21
|
+
})
|
|
22
|
+
|
|
23
|
+
const { isLoading, error } = useImage({ src: props.src })
|
|
24
|
+
|
|
25
|
+
const getSrc = computed(() => {
|
|
26
|
+
if (isLoading.value) {
|
|
27
|
+
return props.loadingSrc
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
if (error.value) {
|
|
31
|
+
return props.errorSrc
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
return props.src
|
|
35
|
+
})
|
|
36
|
+
</script>
|
|
@@ -1,27 +1,27 @@
|
|
|
1
|
-
<template>
|
|
2
|
-
<div
|
|
3
|
-
v-if="isLoading"
|
|
4
|
-
:class="[
|
|
5
|
-
'flex w-full items-center justify-center',
|
|
6
|
-
$attrs.class,
|
|
7
|
-
{
|
|
8
|
-
'min-h-[200px]': !$attrs.class,
|
|
9
|
-
},
|
|
10
|
-
]"
|
|
11
|
-
>
|
|
12
|
-
<UIcon name="i-svg-spinners:180-ring-with-bg" class="text-primary text-4xl" dynamic />
|
|
13
|
-
</div>
|
|
14
|
-
<slot v-else />
|
|
15
|
-
</template>
|
|
16
|
-
<script lang="ts" setup>
|
|
17
|
-
defineOptions({
|
|
18
|
-
inheritAttrs: false,
|
|
19
|
-
})
|
|
20
|
-
|
|
21
|
-
defineProps({
|
|
22
|
-
isLoading: {
|
|
23
|
-
type: Boolean,
|
|
24
|
-
default: true,
|
|
25
|
-
},
|
|
26
|
-
})
|
|
27
|
-
</script>
|
|
1
|
+
<template>
|
|
2
|
+
<div
|
|
3
|
+
v-if="isLoading"
|
|
4
|
+
:class="[
|
|
5
|
+
'flex w-full items-center justify-center',
|
|
6
|
+
$attrs.class,
|
|
7
|
+
{
|
|
8
|
+
'min-h-[200px]': !$attrs.class,
|
|
9
|
+
},
|
|
10
|
+
]"
|
|
11
|
+
>
|
|
12
|
+
<UIcon name="i-svg-spinners:180-ring-with-bg" class="text-primary text-4xl" dynamic />
|
|
13
|
+
</div>
|
|
14
|
+
<slot v-else />
|
|
15
|
+
</template>
|
|
16
|
+
<script lang="ts" setup>
|
|
17
|
+
defineOptions({
|
|
18
|
+
inheritAttrs: false,
|
|
19
|
+
})
|
|
20
|
+
|
|
21
|
+
defineProps({
|
|
22
|
+
isLoading: {
|
|
23
|
+
type: Boolean,
|
|
24
|
+
default: true,
|
|
25
|
+
},
|
|
26
|
+
})
|
|
27
|
+
</script>
|
|
@@ -1,38 +1,17 @@
|
|
|
1
1
|
<template>
|
|
2
2
|
<TeleportSafe v-if="isDevEnv" to="#dev-logs">
|
|
3
|
-
<
|
|
4
|
-
|
|
5
|
-
:code="JSON.stringify(data)"
|
|
6
|
-
max-height="500"
|
|
7
|
-
:browser-window="true"
|
|
8
|
-
:indent="2"
|
|
9
|
-
lang="json"
|
|
10
|
-
highlightjs
|
|
11
|
-
>
|
|
12
|
-
<template #label>
|
|
13
|
-
<span v-if="title" class="font-semibold">{{ title }}</span>
|
|
14
|
-
</template>
|
|
15
|
-
</VCodeBlock>
|
|
16
|
-
|
|
17
|
-
<VCodeBlock
|
|
3
|
+
<LogItem v-if="typeof data !== 'undefined'" :data="data" :title="title" />
|
|
4
|
+
<LogItem
|
|
18
5
|
v-for="(item, index) in dataItems"
|
|
19
6
|
:key="index"
|
|
20
|
-
:
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
:indent="2"
|
|
24
|
-
lang="json"
|
|
25
|
-
highlightjs
|
|
26
|
-
>
|
|
27
|
-
<template #label>
|
|
28
|
-
<span v-if="title" class="font-semibold">{{ title }} #{{ index + 1 }} </span>
|
|
29
|
-
</template>
|
|
30
|
-
</VCodeBlock>
|
|
7
|
+
:data="item"
|
|
8
|
+
:title="`${title} #${index + 1}`"
|
|
9
|
+
/>
|
|
31
10
|
</TeleportSafe>
|
|
32
11
|
</template>
|
|
33
12
|
<script lang="ts" setup>
|
|
34
13
|
import { defineProps } from 'vue'
|
|
35
|
-
import
|
|
14
|
+
import LogItem from './LogItem.vue'
|
|
36
15
|
|
|
37
16
|
defineProps<{
|
|
38
17
|
data?: any
|
|
@@ -42,6 +21,3 @@ defineProps<{
|
|
|
42
21
|
|
|
43
22
|
const isDevEnv = process.env.NODE_ENV === 'development'
|
|
44
23
|
</script>
|
|
45
|
-
<style>
|
|
46
|
-
.hljs-string{white-space:break-spaces}
|
|
47
|
-
</style>
|
|
@@ -0,0 +1,43 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<div>
|
|
3
|
+
<div class="mb-2 flex items-center justify-between">
|
|
4
|
+
<p v-if="title" class="font-semibold">{{ title }}</p>
|
|
5
|
+
<Icon
|
|
6
|
+
class="cursor-pointer"
|
|
7
|
+
:name="isShow ? 'heroicons:minus' : 'heroicons:plus'"
|
|
8
|
+
@click="isShow = !isShow"
|
|
9
|
+
/>
|
|
10
|
+
</div>
|
|
11
|
+
<VCodeBlock
|
|
12
|
+
v-show="isShow"
|
|
13
|
+
:code="getCode"
|
|
14
|
+
max-height="500"
|
|
15
|
+
:browser-window="true"
|
|
16
|
+
:indent="2"
|
|
17
|
+
lang="json"
|
|
18
|
+
highlightjs
|
|
19
|
+
/>
|
|
20
|
+
</div>
|
|
21
|
+
</template>
|
|
22
|
+
<script lang="ts" setup>
|
|
23
|
+
import { defineProps, computed, ref } from 'vue'
|
|
24
|
+
import { VCodeBlock } from '@wdns/vue-code-block'
|
|
25
|
+
|
|
26
|
+
const props = defineProps<{
|
|
27
|
+
data?: any
|
|
28
|
+
title?: string
|
|
29
|
+
}>()
|
|
30
|
+
|
|
31
|
+
const isShow = ref(true)
|
|
32
|
+
|
|
33
|
+
const getCode = computed(() => {
|
|
34
|
+
try {
|
|
35
|
+
return JSON.stringify(props.data)
|
|
36
|
+
} catch (e) {
|
|
37
|
+
return JSON.stringify('{}')
|
|
38
|
+
}
|
|
39
|
+
})
|
|
40
|
+
</script>
|
|
41
|
+
<style>
|
|
42
|
+
.hljs-string{white-space:break-spaces}
|
|
43
|
+
</style>
|
|
@@ -1,146 +1,146 @@
|
|
|
1
|
-
<template>
|
|
2
|
-
<UModal
|
|
3
|
-
v-bind="attrs"
|
|
4
|
-
:model-value="modelValue"
|
|
5
|
-
:class="$props.class"
|
|
6
|
-
:overlay="overlay"
|
|
7
|
-
:transition="transition"
|
|
8
|
-
:prevent-close="preventClose"
|
|
9
|
-
:fullscreen="fullscreen"
|
|
10
|
-
:initial-focus="modalWrapper"
|
|
11
|
-
:ui="ui"
|
|
12
|
-
@update:model-value="$emit('update:modelValue', $event)"
|
|
13
|
-
>
|
|
14
|
-
<div
|
|
15
|
-
v-if="title"
|
|
16
|
-
:class="[ui.header, { 'flex items-center justify-between': !isHideCloseBtn }]"
|
|
17
|
-
>
|
|
18
|
-
<h1 class="text-lg font-semibold">{{ title }}</h1>
|
|
19
|
-
<Icon
|
|
20
|
-
v-if="!isHideCloseBtn"
|
|
21
|
-
name="i-heroicons-x-mark"
|
|
22
|
-
class="size-6 cursor-pointer opacity-50"
|
|
23
|
-
@click="close"
|
|
24
|
-
/>
|
|
25
|
-
</div>
|
|
26
|
-
|
|
27
|
-
<div
|
|
28
|
-
v-if="(!title && !isHideCloseBtn && preventClose) || fullscreen"
|
|
29
|
-
class="absolute right-0 m-4"
|
|
30
|
-
>
|
|
31
|
-
<Icon
|
|
32
|
-
v-if="!isHideCloseBtn"
|
|
33
|
-
name="i-heroicons-x-mark"
|
|
34
|
-
class="size-6 cursor-pointer opacity-50"
|
|
35
|
-
@click="close"
|
|
36
|
-
/>
|
|
37
|
-
</div>
|
|
38
|
-
|
|
39
|
-
<div ref="modalWrapper" :class="['overflow-y-auto', ui.innerWrapper]">
|
|
40
|
-
<slot />
|
|
41
|
-
</div>
|
|
42
|
-
</UModal>
|
|
43
|
-
</template>
|
|
44
|
-
|
|
45
|
-
<script lang="ts" setup>
|
|
46
|
-
import { type PropType, defineShortcuts, ref, toRef, watch } from '#imports'
|
|
47
|
-
import { useUI } from '#ui/composables/useUI'
|
|
48
|
-
import { modal } from '#core/ui.config'
|
|
49
|
-
import { useUiConfig } from '#core/composables/useConfig'
|
|
50
|
-
import type { Strategy } from '#ui/types'
|
|
51
|
-
|
|
52
|
-
const config = useUiConfig<typeof modal>(modal, 'modal')
|
|
53
|
-
|
|
54
|
-
const props = defineProps({
|
|
55
|
-
modelValue: {
|
|
56
|
-
type: Boolean,
|
|
57
|
-
default: false,
|
|
58
|
-
},
|
|
59
|
-
overlay: {
|
|
60
|
-
type: Boolean,
|
|
61
|
-
default: true,
|
|
62
|
-
},
|
|
63
|
-
transition: {
|
|
64
|
-
type: Boolean,
|
|
65
|
-
default: true,
|
|
66
|
-
},
|
|
67
|
-
preventClose: {
|
|
68
|
-
type: Boolean,
|
|
69
|
-
default: false,
|
|
70
|
-
},
|
|
71
|
-
fullscreen: {
|
|
72
|
-
type: Boolean,
|
|
73
|
-
default: false,
|
|
74
|
-
},
|
|
75
|
-
scrollable: {
|
|
76
|
-
type: Boolean,
|
|
77
|
-
default: false,
|
|
78
|
-
},
|
|
79
|
-
title: {
|
|
80
|
-
type: String,
|
|
81
|
-
default: '',
|
|
82
|
-
},
|
|
83
|
-
isHideCloseBtn: {
|
|
84
|
-
type: Boolean,
|
|
85
|
-
default: false,
|
|
86
|
-
},
|
|
87
|
-
size: {
|
|
88
|
-
type: String as PropType<keyof typeof modal.size>,
|
|
89
|
-
default: () => modal.default.size,
|
|
90
|
-
},
|
|
91
|
-
position: {
|
|
92
|
-
type: String as PropType<keyof typeof modal.position>,
|
|
93
|
-
default: () => modal.default.position,
|
|
94
|
-
},
|
|
95
|
-
fixHeightSize: {
|
|
96
|
-
type: String as PropType<keyof typeof modal.fixHeightSize>,
|
|
97
|
-
default: () => modal.default.fixHeightSize,
|
|
98
|
-
},
|
|
99
|
-
class: {
|
|
100
|
-
type: [String, Array, Object] as PropType<any>,
|
|
101
|
-
default: undefined,
|
|
102
|
-
},
|
|
103
|
-
ui: {
|
|
104
|
-
type: Object as PropType<Partial<typeof config & { strategy?: Strategy }>>,
|
|
105
|
-
default: undefined,
|
|
106
|
-
},
|
|
107
|
-
})
|
|
108
|
-
|
|
109
|
-
const emits = defineEmits(['update:modelValue'])
|
|
110
|
-
|
|
111
|
-
defineShortcuts({
|
|
112
|
-
escape: {
|
|
113
|
-
usingInput: true,
|
|
114
|
-
handler: () => {
|
|
115
|
-
if (props.preventClose) return
|
|
116
|
-
emits('update:modelValue', false)
|
|
117
|
-
},
|
|
118
|
-
},
|
|
119
|
-
})
|
|
120
|
-
|
|
121
|
-
const modalWrapper = ref<HTMLElement | null>(null)
|
|
122
|
-
|
|
123
|
-
const close = () => {
|
|
124
|
-
emits('update:modelValue', false)
|
|
125
|
-
}
|
|
126
|
-
|
|
127
|
-
const { ui, attrs } = useUI('modal', toRef(props, 'ui'), config, toRef(props, 'class'))
|
|
128
|
-
|
|
129
|
-
watch(
|
|
130
|
-
() => props.modelValue,
|
|
131
|
-
() => {
|
|
132
|
-
if (props.modelValue) {
|
|
133
|
-
const size = config.size[props.size]
|
|
134
|
-
const fixHeightSize = config.fixHeightSize[props.fixHeightSize]
|
|
135
|
-
const position = config.position[props.position]
|
|
136
|
-
|
|
137
|
-
ui.value.width = size
|
|
138
|
-
ui.value.container = position
|
|
139
|
-
|
|
140
|
-
if (props.scrollable) {
|
|
141
|
-
ui.value.height = fixHeightSize
|
|
142
|
-
}
|
|
143
|
-
}
|
|
144
|
-
}
|
|
145
|
-
)
|
|
146
|
-
</script>
|
|
1
|
+
<template>
|
|
2
|
+
<UModal
|
|
3
|
+
v-bind="attrs"
|
|
4
|
+
:model-value="modelValue"
|
|
5
|
+
:class="$props.class"
|
|
6
|
+
:overlay="overlay"
|
|
7
|
+
:transition="transition"
|
|
8
|
+
:prevent-close="preventClose"
|
|
9
|
+
:fullscreen="fullscreen"
|
|
10
|
+
:initial-focus="modalWrapper"
|
|
11
|
+
:ui="ui"
|
|
12
|
+
@update:model-value="$emit('update:modelValue', $event)"
|
|
13
|
+
>
|
|
14
|
+
<div
|
|
15
|
+
v-if="title"
|
|
16
|
+
:class="[ui.header, { 'flex items-center justify-between': !isHideCloseBtn }]"
|
|
17
|
+
>
|
|
18
|
+
<h1 class="text-lg font-semibold">{{ title }}</h1>
|
|
19
|
+
<Icon
|
|
20
|
+
v-if="!isHideCloseBtn"
|
|
21
|
+
name="i-heroicons-x-mark"
|
|
22
|
+
class="size-6 cursor-pointer opacity-50"
|
|
23
|
+
@click="close"
|
|
24
|
+
/>
|
|
25
|
+
</div>
|
|
26
|
+
|
|
27
|
+
<div
|
|
28
|
+
v-if="(!title && !isHideCloseBtn && preventClose) || fullscreen"
|
|
29
|
+
class="absolute right-0 m-4"
|
|
30
|
+
>
|
|
31
|
+
<Icon
|
|
32
|
+
v-if="!isHideCloseBtn"
|
|
33
|
+
name="i-heroicons-x-mark"
|
|
34
|
+
class="size-6 cursor-pointer opacity-50"
|
|
35
|
+
@click="close"
|
|
36
|
+
/>
|
|
37
|
+
</div>
|
|
38
|
+
|
|
39
|
+
<div ref="modalWrapper" :class="['overflow-y-auto', ui.innerWrapper]">
|
|
40
|
+
<slot />
|
|
41
|
+
</div>
|
|
42
|
+
</UModal>
|
|
43
|
+
</template>
|
|
44
|
+
|
|
45
|
+
<script lang="ts" setup>
|
|
46
|
+
import { type PropType, defineShortcuts, ref, toRef, watch } from '#imports'
|
|
47
|
+
import { useUI } from '#ui/composables/useUI'
|
|
48
|
+
import { modal } from '#core/ui.config'
|
|
49
|
+
import { useUiConfig } from '#core/composables/useConfig'
|
|
50
|
+
import type { Strategy } from '#ui/types'
|
|
51
|
+
|
|
52
|
+
const config = useUiConfig<typeof modal>(modal, 'modal')
|
|
53
|
+
|
|
54
|
+
const props = defineProps({
|
|
55
|
+
modelValue: {
|
|
56
|
+
type: Boolean,
|
|
57
|
+
default: false,
|
|
58
|
+
},
|
|
59
|
+
overlay: {
|
|
60
|
+
type: Boolean,
|
|
61
|
+
default: true,
|
|
62
|
+
},
|
|
63
|
+
transition: {
|
|
64
|
+
type: Boolean,
|
|
65
|
+
default: true,
|
|
66
|
+
},
|
|
67
|
+
preventClose: {
|
|
68
|
+
type: Boolean,
|
|
69
|
+
default: false,
|
|
70
|
+
},
|
|
71
|
+
fullscreen: {
|
|
72
|
+
type: Boolean,
|
|
73
|
+
default: false,
|
|
74
|
+
},
|
|
75
|
+
scrollable: {
|
|
76
|
+
type: Boolean,
|
|
77
|
+
default: false,
|
|
78
|
+
},
|
|
79
|
+
title: {
|
|
80
|
+
type: String,
|
|
81
|
+
default: '',
|
|
82
|
+
},
|
|
83
|
+
isHideCloseBtn: {
|
|
84
|
+
type: Boolean,
|
|
85
|
+
default: false,
|
|
86
|
+
},
|
|
87
|
+
size: {
|
|
88
|
+
type: String as PropType<keyof typeof modal.size>,
|
|
89
|
+
default: () => modal.default.size,
|
|
90
|
+
},
|
|
91
|
+
position: {
|
|
92
|
+
type: String as PropType<keyof typeof modal.position>,
|
|
93
|
+
default: () => modal.default.position,
|
|
94
|
+
},
|
|
95
|
+
fixHeightSize: {
|
|
96
|
+
type: String as PropType<keyof typeof modal.fixHeightSize>,
|
|
97
|
+
default: () => modal.default.fixHeightSize,
|
|
98
|
+
},
|
|
99
|
+
class: {
|
|
100
|
+
type: [String, Array, Object] as PropType<any>,
|
|
101
|
+
default: undefined,
|
|
102
|
+
},
|
|
103
|
+
ui: {
|
|
104
|
+
type: Object as PropType<Partial<typeof config & { strategy?: Strategy }>>,
|
|
105
|
+
default: undefined,
|
|
106
|
+
},
|
|
107
|
+
})
|
|
108
|
+
|
|
109
|
+
const emits = defineEmits(['update:modelValue'])
|
|
110
|
+
|
|
111
|
+
defineShortcuts({
|
|
112
|
+
escape: {
|
|
113
|
+
usingInput: true,
|
|
114
|
+
handler: () => {
|
|
115
|
+
if (props.preventClose) return
|
|
116
|
+
emits('update:modelValue', false)
|
|
117
|
+
},
|
|
118
|
+
},
|
|
119
|
+
})
|
|
120
|
+
|
|
121
|
+
const modalWrapper = ref<HTMLElement | null>(null)
|
|
122
|
+
|
|
123
|
+
const close = () => {
|
|
124
|
+
emits('update:modelValue', false)
|
|
125
|
+
}
|
|
126
|
+
|
|
127
|
+
const { ui, attrs } = useUI('modal', toRef(props, 'ui'), config, toRef(props, 'class'))
|
|
128
|
+
|
|
129
|
+
watch(
|
|
130
|
+
() => props.modelValue,
|
|
131
|
+
() => {
|
|
132
|
+
if (props.modelValue) {
|
|
133
|
+
const size = config.size[props.size]
|
|
134
|
+
const fixHeightSize = config.fixHeightSize[props.fixHeightSize]
|
|
135
|
+
const position = config.position[props.position]
|
|
136
|
+
|
|
137
|
+
ui.value.width = size
|
|
138
|
+
ui.value.container = position
|
|
139
|
+
|
|
140
|
+
if (props.scrollable) {
|
|
141
|
+
ui.value.height = fixHeightSize
|
|
142
|
+
}
|
|
143
|
+
}
|
|
144
|
+
}
|
|
145
|
+
)
|
|
146
|
+
</script>
|
|
@@ -1,22 +1,22 @@
|
|
|
1
|
-
<template>
|
|
2
|
-
<QrcodeVue :value="value" :level="level" :render-as="renderAs" class="size-[350px]" />
|
|
3
|
-
</template>
|
|
4
|
-
<script lang="ts" setup>
|
|
5
|
-
import QrcodeVue, { type RenderAs } from 'qrcode.vue'
|
|
6
|
-
import { type PropType } from 'vue'
|
|
7
|
-
|
|
8
|
-
defineProps({
|
|
9
|
-
value: {
|
|
10
|
-
type: String,
|
|
11
|
-
required: true,
|
|
12
|
-
},
|
|
13
|
-
level: {
|
|
14
|
-
type: String,
|
|
15
|
-
default: 'M',
|
|
16
|
-
},
|
|
17
|
-
renderAs: {
|
|
18
|
-
type: String as PropType<RenderAs>,
|
|
19
|
-
default: 'svg',
|
|
20
|
-
},
|
|
21
|
-
})
|
|
22
|
-
</script>
|
|
1
|
+
<template>
|
|
2
|
+
<QrcodeVue :value="value" :level="level" :render-as="renderAs" class="size-[350px]" />
|
|
3
|
+
</template>
|
|
4
|
+
<script lang="ts" setup>
|
|
5
|
+
import QrcodeVue, { type RenderAs } from 'qrcode.vue'
|
|
6
|
+
import { type PropType } from 'vue'
|
|
7
|
+
|
|
8
|
+
defineProps({
|
|
9
|
+
value: {
|
|
10
|
+
type: String,
|
|
11
|
+
required: true,
|
|
12
|
+
},
|
|
13
|
+
level: {
|
|
14
|
+
type: String,
|
|
15
|
+
default: 'M',
|
|
16
|
+
},
|
|
17
|
+
renderAs: {
|
|
18
|
+
type: String as PropType<RenderAs>,
|
|
19
|
+
default: 'svg',
|
|
20
|
+
},
|
|
21
|
+
})
|
|
22
|
+
</script>
|