@ramathibodi/nuxt-commons 0.1.74 → 0.1.75
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 +115 -115
- package/dist/module.json +1 -1
- package/dist/runtime/components/Alert.vue +58 -58
- package/dist/runtime/components/BarcodeReader.vue +130 -130
- package/dist/runtime/components/ExportCSV.vue +110 -110
- package/dist/runtime/components/FileBtn.vue +79 -79
- package/dist/runtime/components/ImportCSV.vue +151 -151
- package/dist/runtime/components/MrzReader.vue +168 -168
- package/dist/runtime/components/SplitterPanel.vue +67 -67
- package/dist/runtime/components/TabsGroup.vue +39 -39
- package/dist/runtime/components/TextBarcode.vue +66 -66
- package/dist/runtime/components/device/IdCardButton.vue +95 -95
- package/dist/runtime/components/device/IdCardWebSocket.vue +207 -207
- package/dist/runtime/components/device/Scanner.vue +350 -350
- package/dist/runtime/components/dialog/Confirm.vue +112 -112
- package/dist/runtime/components/dialog/Host.vue +88 -88
- package/dist/runtime/components/dialog/Index.vue +84 -84
- package/dist/runtime/components/dialog/Loading.vue +51 -51
- package/dist/runtime/components/dialog/default/Confirm.vue +112 -112
- package/dist/runtime/components/dialog/default/Loading.vue +60 -60
- package/dist/runtime/components/dialog/default/Notify.vue +82 -82
- package/dist/runtime/components/dialog/default/Printing.vue +46 -46
- package/dist/runtime/components/dialog/default/VerifyUser.vue +144 -144
- package/dist/runtime/components/document/Form.vue +50 -50
- package/dist/runtime/components/document/TemplateBuilder.vue +536 -536
- package/dist/runtime/components/form/ActionPad.vue +156 -156
- package/dist/runtime/components/form/Birthdate.vue +116 -116
- package/dist/runtime/components/form/CheckboxGroup.vue +99 -99
- package/dist/runtime/components/form/CodeEditor.vue +45 -45
- package/dist/runtime/components/form/Date.vue +270 -270
- package/dist/runtime/components/form/DateTime.vue +220 -220
- package/dist/runtime/components/form/Dialog.vue +178 -178
- package/dist/runtime/components/form/EditPad.vue +157 -157
- package/dist/runtime/components/form/File.vue +295 -295
- package/dist/runtime/components/form/Hidden.vue +44 -44
- package/dist/runtime/components/form/Iterator.vue +538 -538
- package/dist/runtime/components/form/Login.vue +143 -143
- package/dist/runtime/components/form/Pad.vue +399 -399
- package/dist/runtime/components/form/SignPad.vue +226 -226
- package/dist/runtime/components/form/System.vue +34 -34
- package/dist/runtime/components/form/Table.vue +391 -391
- package/dist/runtime/components/form/TableData.vue +236 -236
- package/dist/runtime/components/form/Time.vue +177 -177
- package/dist/runtime/components/form/images/Capture.vue +245 -245
- package/dist/runtime/components/form/images/Edit.vue +133 -133
- package/dist/runtime/components/form/images/Field.vue +331 -331
- package/dist/runtime/components/form/images/Pad.vue +54 -54
- package/dist/runtime/components/label/Date.vue +37 -37
- package/dist/runtime/components/label/DateAgo.vue +102 -102
- package/dist/runtime/components/label/DateCount.vue +152 -152
- package/dist/runtime/components/label/Field.vue +111 -111
- package/dist/runtime/components/label/FormatMoney.vue +37 -37
- package/dist/runtime/components/label/Mask.vue +46 -46
- package/dist/runtime/components/label/Object.vue +21 -21
- package/dist/runtime/components/master/Autocomplete.vue +89 -89
- package/dist/runtime/components/master/Combobox.vue +88 -88
- package/dist/runtime/components/master/RadioGroup.vue +90 -90
- package/dist/runtime/components/master/Select.vue +70 -70
- package/dist/runtime/components/master/label.vue +55 -55
- package/dist/runtime/components/model/Autocomplete.vue +91 -91
- package/dist/runtime/components/model/Combobox.vue +90 -90
- package/dist/runtime/components/model/Pad.vue +114 -114
- package/dist/runtime/components/model/Select.vue +78 -84
- package/dist/runtime/components/model/Table.vue +370 -370
- package/dist/runtime/components/model/iterator.vue +497 -497
- package/dist/runtime/components/model/label.vue +58 -58
- package/dist/runtime/components/pdf/Print.vue +75 -75
- package/dist/runtime/components/pdf/View.vue +146 -146
- package/dist/runtime/composables/dialog.d.ts +1 -1
- package/dist/runtime/composables/graphql.d.ts +1 -1
- package/dist/runtime/composables/graphqlModel.d.ts +9 -9
- package/dist/runtime/composables/graphqlModelItem.d.ts +7 -7
- package/dist/runtime/composables/graphqlModelOperation.d.ts +6 -6
- package/dist/runtime/composables/userPermission.d.ts +1 -1
- package/dist/runtime/labs/Calendar.vue +99 -99
- package/dist/runtime/labs/form/EditMobile.vue +152 -152
- package/dist/runtime/labs/form/TextFieldMask.vue +43 -43
- package/dist/runtime/plugins/clientConfig.d.ts +1 -1
- package/dist/runtime/plugins/default.d.ts +1 -1
- package/dist/runtime/plugins/dialogManager.d.ts +1 -1
- package/dist/runtime/plugins/permission.d.ts +1 -1
- package/dist/runtime/types/alert.d.ts +11 -11
- package/dist/runtime/types/clientConfig.d.ts +13 -13
- package/dist/runtime/types/dialogManager.d.ts +35 -35
- package/dist/runtime/types/formDialog.d.ts +5 -5
- package/dist/runtime/types/graphqlOperation.d.ts +23 -23
- package/dist/runtime/types/menu.d.ts +31 -31
- package/dist/runtime/types/modules.d.ts +7 -7
- package/dist/runtime/types/permission.d.ts +13 -13
- package/package.json +131 -131
- package/scripts/enrich-vue-docs-from-ai.mjs +197 -197
- package/scripts/generate-ai-summary.mjs +321 -321
- package/scripts/generate-composables-md.mjs +129 -129
- package/scripts/postInstall.cjs +70 -70
- package/templates/.codegen/codegen.ts +32 -32
- package/templates/.codegen/plugin-schema-object.js +161 -161
|
@@ -1,112 +1,112 @@
|
|
|
1
|
-
<script lang="ts" setup>
|
|
2
|
-
/**
|
|
3
|
-
* DialogConfirm coordinates modal rendering and interactions for runtime dialog flows.
|
|
4
|
-
* This doc block is consumed by vue-docgen for generated API documentation.
|
|
5
|
-
*/
|
|
6
|
-
import { type Ref, ref, watch, computed } from 'vue'
|
|
7
|
-
import { isEqual, isUndefined, isEmpty } from 'lodash-es'
|
|
8
|
-
|
|
9
|
-
interface DialogProps {
|
|
10
|
-
title?: string // Title text displayed in the component header or dialog.
|
|
11
|
-
modelValue: boolean // Bound value for v-model synchronization with the parent component.
|
|
12
|
-
message?: string // main message body shown in UI
|
|
13
|
-
buttonTrueText?: string // label for the confirm/primary action
|
|
14
|
-
buttonFalseText?: string // label for the cancel/secondary action
|
|
15
|
-
type?: 'primary' | 'success' | 'warning' | 'info' | 'error' // visual variant controlling color and intent semantics
|
|
16
|
-
confirmData?: string // confirmation text that users must type before continue
|
|
17
|
-
width?: string // dialog/component width in CSS-compatible units
|
|
18
|
-
}
|
|
19
|
-
|
|
20
|
-
/**
|
|
21
|
-
* Public props accepted by DialogConfirm.
|
|
22
|
-
* Document each prop field with intent, defaults, and side effects for clear generated docs.
|
|
23
|
-
*/
|
|
24
|
-
const props = withDefaults(defineProps<DialogProps>(), {
|
|
25
|
-
title: 'ยืนยัน',
|
|
26
|
-
message: 'ยืนยันทำรายการนี้',
|
|
27
|
-
buttonTrueText: 'ตกลง',
|
|
28
|
-
buttonFalseText: 'ยกเลิก',
|
|
29
|
-
width: 'auto',
|
|
30
|
-
})
|
|
31
|
-
|
|
32
|
-
/**
|
|
33
|
-
* Custom events emitted by DialogConfirm.
|
|
34
|
-
* Parents can listen to these events to react to user actions and internal state changes.
|
|
35
|
-
*/
|
|
36
|
-
const emit = defineEmits<{
|
|
37
|
-
(e: 'update:result', value: boolean): void
|
|
38
|
-
(e: 'update:modelValue', value: boolean): void
|
|
39
|
-
}>()
|
|
40
|
-
|
|
41
|
-
const dialogVisible: Ref<boolean> = ref(false)
|
|
42
|
-
dialogVisible.value = props.modelValue
|
|
43
|
-
watch(
|
|
44
|
-
() => props.modelValue,
|
|
45
|
-
() => {
|
|
46
|
-
dialogVisible.value = props.modelValue
|
|
47
|
-
},
|
|
48
|
-
)
|
|
49
|
-
|
|
50
|
-
const txtConfirm = ref<string>()
|
|
51
|
-
|
|
52
|
-
const isDisabled = computed(() => {
|
|
53
|
-
if (isUndefined(props.confirmData)) return false
|
|
54
|
-
if (isEmpty(props.confirmData)) return true
|
|
55
|
-
return props.confirmData ? !isEqual(txtConfirm.value, props.confirmData) : false
|
|
56
|
-
})
|
|
57
|
-
|
|
58
|
-
const handleResult = (result: boolean) => {
|
|
59
|
-
dialogVisible.value = false
|
|
60
|
-
emit('update:modelValue', dialogVisible.value)
|
|
61
|
-
emit('update:result', result)
|
|
62
|
-
txtConfirm.value = ''
|
|
63
|
-
}
|
|
64
|
-
</script>
|
|
65
|
-
|
|
66
|
-
<template>
|
|
67
|
-
<v-row justify="center">
|
|
68
|
-
<v-dialog
|
|
69
|
-
v-model="dialogVisible"
|
|
70
|
-
persistent
|
|
71
|
-
:width="props.width"
|
|
72
|
-
>
|
|
73
|
-
<v-card>
|
|
74
|
-
<v-toolbar
|
|
75
|
-
:color="props.type"
|
|
76
|
-
:title="props.title"
|
|
77
|
-
/>
|
|
78
|
-
<v-card-text>{{ props.message }}</v-card-text>
|
|
79
|
-
<v-card-text v-if="props.confirmData">
|
|
80
|
-
<v-text-field
|
|
81
|
-
v-model="txtConfirm"
|
|
82
|
-
variant="underlined"
|
|
83
|
-
>
|
|
84
|
-
<template #label>
|
|
85
|
-
<slot
|
|
86
|
-
name="labelTextConfirm"
|
|
87
|
-
:text="props.confirmData"
|
|
88
|
-
/>
|
|
89
|
-
</template>
|
|
90
|
-
</v-text-field>
|
|
91
|
-
</v-card-text>
|
|
92
|
-
<v-card-actions>
|
|
93
|
-
<v-spacer />
|
|
94
|
-
<v-btn
|
|
95
|
-
variant="text"
|
|
96
|
-
@click="handleResult(false)"
|
|
97
|
-
>
|
|
98
|
-
{{ props.buttonFalseText }}
|
|
99
|
-
</v-btn>
|
|
100
|
-
<v-btn
|
|
101
|
-
:color="props.type"
|
|
102
|
-
variant="text"
|
|
103
|
-
:disabled="isDisabled"
|
|
104
|
-
@click="handleResult(true)"
|
|
105
|
-
>
|
|
106
|
-
{{ props.buttonTrueText }}
|
|
107
|
-
</v-btn>
|
|
108
|
-
</v-card-actions>
|
|
109
|
-
</v-card>
|
|
110
|
-
</v-dialog>
|
|
111
|
-
</v-row>
|
|
112
|
-
</template>
|
|
1
|
+
<script lang="ts" setup>
|
|
2
|
+
/**
|
|
3
|
+
* DialogConfirm coordinates modal rendering and interactions for runtime dialog flows.
|
|
4
|
+
* This doc block is consumed by vue-docgen for generated API documentation.
|
|
5
|
+
*/
|
|
6
|
+
import { type Ref, ref, watch, computed } from 'vue'
|
|
7
|
+
import { isEqual, isUndefined, isEmpty } from 'lodash-es'
|
|
8
|
+
|
|
9
|
+
interface DialogProps {
|
|
10
|
+
title?: string // Title text displayed in the component header or dialog.
|
|
11
|
+
modelValue: boolean // Bound value for v-model synchronization with the parent component.
|
|
12
|
+
message?: string // main message body shown in UI
|
|
13
|
+
buttonTrueText?: string // label for the confirm/primary action
|
|
14
|
+
buttonFalseText?: string // label for the cancel/secondary action
|
|
15
|
+
type?: 'primary' | 'success' | 'warning' | 'info' | 'error' // visual variant controlling color and intent semantics
|
|
16
|
+
confirmData?: string // confirmation text that users must type before continue
|
|
17
|
+
width?: string // dialog/component width in CSS-compatible units
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
/**
|
|
21
|
+
* Public props accepted by DialogConfirm.
|
|
22
|
+
* Document each prop field with intent, defaults, and side effects for clear generated docs.
|
|
23
|
+
*/
|
|
24
|
+
const props = withDefaults(defineProps<DialogProps>(), {
|
|
25
|
+
title: 'ยืนยัน',
|
|
26
|
+
message: 'ยืนยันทำรายการนี้',
|
|
27
|
+
buttonTrueText: 'ตกลง',
|
|
28
|
+
buttonFalseText: 'ยกเลิก',
|
|
29
|
+
width: 'auto',
|
|
30
|
+
})
|
|
31
|
+
|
|
32
|
+
/**
|
|
33
|
+
* Custom events emitted by DialogConfirm.
|
|
34
|
+
* Parents can listen to these events to react to user actions and internal state changes.
|
|
35
|
+
*/
|
|
36
|
+
const emit = defineEmits<{
|
|
37
|
+
(e: 'update:result', value: boolean): void
|
|
38
|
+
(e: 'update:modelValue', value: boolean): void
|
|
39
|
+
}>()
|
|
40
|
+
|
|
41
|
+
const dialogVisible: Ref<boolean> = ref(false)
|
|
42
|
+
dialogVisible.value = props.modelValue
|
|
43
|
+
watch(
|
|
44
|
+
() => props.modelValue,
|
|
45
|
+
() => {
|
|
46
|
+
dialogVisible.value = props.modelValue
|
|
47
|
+
},
|
|
48
|
+
)
|
|
49
|
+
|
|
50
|
+
const txtConfirm = ref<string>()
|
|
51
|
+
|
|
52
|
+
const isDisabled = computed(() => {
|
|
53
|
+
if (isUndefined(props.confirmData)) return false
|
|
54
|
+
if (isEmpty(props.confirmData)) return true
|
|
55
|
+
return props.confirmData ? !isEqual(txtConfirm.value, props.confirmData) : false
|
|
56
|
+
})
|
|
57
|
+
|
|
58
|
+
const handleResult = (result: boolean) => {
|
|
59
|
+
dialogVisible.value = false
|
|
60
|
+
emit('update:modelValue', dialogVisible.value)
|
|
61
|
+
emit('update:result', result)
|
|
62
|
+
txtConfirm.value = ''
|
|
63
|
+
}
|
|
64
|
+
</script>
|
|
65
|
+
|
|
66
|
+
<template>
|
|
67
|
+
<v-row justify="center">
|
|
68
|
+
<v-dialog
|
|
69
|
+
v-model="dialogVisible"
|
|
70
|
+
persistent
|
|
71
|
+
:width="props.width"
|
|
72
|
+
>
|
|
73
|
+
<v-card>
|
|
74
|
+
<v-toolbar
|
|
75
|
+
:color="props.type"
|
|
76
|
+
:title="props.title"
|
|
77
|
+
/>
|
|
78
|
+
<v-card-text>{{ props.message }}</v-card-text>
|
|
79
|
+
<v-card-text v-if="props.confirmData">
|
|
80
|
+
<v-text-field
|
|
81
|
+
v-model="txtConfirm"
|
|
82
|
+
variant="underlined"
|
|
83
|
+
>
|
|
84
|
+
<template #label>
|
|
85
|
+
<slot
|
|
86
|
+
name="labelTextConfirm"
|
|
87
|
+
:text="props.confirmData"
|
|
88
|
+
/>
|
|
89
|
+
</template>
|
|
90
|
+
</v-text-field>
|
|
91
|
+
</v-card-text>
|
|
92
|
+
<v-card-actions>
|
|
93
|
+
<v-spacer />
|
|
94
|
+
<v-btn
|
|
95
|
+
variant="text"
|
|
96
|
+
@click="handleResult(false)"
|
|
97
|
+
>
|
|
98
|
+
{{ props.buttonFalseText }}
|
|
99
|
+
</v-btn>
|
|
100
|
+
<v-btn
|
|
101
|
+
:color="props.type"
|
|
102
|
+
variant="text"
|
|
103
|
+
:disabled="isDisabled"
|
|
104
|
+
@click="handleResult(true)"
|
|
105
|
+
>
|
|
106
|
+
{{ props.buttonTrueText }}
|
|
107
|
+
</v-btn>
|
|
108
|
+
</v-card-actions>
|
|
109
|
+
</v-card>
|
|
110
|
+
</v-dialog>
|
|
111
|
+
</v-row>
|
|
112
|
+
</template>
|
|
@@ -1,88 +1,88 @@
|
|
|
1
|
-
<script setup lang="ts">
|
|
2
|
-
/**
|
|
3
|
-
* DialogHost coordinates modal rendering and interactions for runtime dialog flows.
|
|
4
|
-
* This doc block is consumed by vue-docgen for generated API documentation.
|
|
5
|
-
*/
|
|
6
|
-
import {shallowReactive, onMounted} from 'vue'
|
|
7
|
-
import {useDialog} from "../../composables/dialog"
|
|
8
|
-
import type {DialogOpenResult} from "../../types/dialogManager";
|
|
9
|
-
|
|
10
|
-
interface DialogEntry {
|
|
11
|
-
id: number
|
|
12
|
-
component: any
|
|
13
|
-
props: Record<string, any>
|
|
14
|
-
resolve: (val: any) => void
|
|
15
|
-
reject: (val: any) => void
|
|
16
|
-
}
|
|
17
|
-
|
|
18
|
-
const dialogs = shallowReactive<DialogEntry[]>([])
|
|
19
|
-
let idCounter = 0
|
|
20
|
-
|
|
21
|
-
function open(component: any, inputProps: Record<string, any> = {}) : DialogOpenResult {
|
|
22
|
-
const id = ++idCounter
|
|
23
|
-
|
|
24
|
-
const promise = new Promise<any>((resolve,reject) => {
|
|
25
|
-
const dialogProps = {
|
|
26
|
-
...inputProps,
|
|
27
|
-
modelValue: true,
|
|
28
|
-
'onUpdate:modelValue': (v: boolean) => {
|
|
29
|
-
if (!v) close(id, null)
|
|
30
|
-
},
|
|
31
|
-
onResolve: (val: any) => close(id, val),
|
|
32
|
-
onReject: (val: any) => closeWithReject(id, val)
|
|
33
|
-
}
|
|
34
|
-
|
|
35
|
-
dialogs.push({
|
|
36
|
-
id,
|
|
37
|
-
component,
|
|
38
|
-
props: dialogProps,
|
|
39
|
-
resolve,
|
|
40
|
-
reject
|
|
41
|
-
})
|
|
42
|
-
})
|
|
43
|
-
|
|
44
|
-
const closeInstance = (val?: any) => {
|
|
45
|
-
close(id,val)
|
|
46
|
-
}
|
|
47
|
-
|
|
48
|
-
const rejectInstance = (val?: any) => {
|
|
49
|
-
closeWithReject(id,val)
|
|
50
|
-
}
|
|
51
|
-
|
|
52
|
-
return { id, promise, closeInstance, rejectInstance}
|
|
53
|
-
}
|
|
54
|
-
|
|
55
|
-
function close(id: number, val: any) {
|
|
56
|
-
const index = dialogs.findIndex((d) => d.id === id)
|
|
57
|
-
if (index !== -1) {
|
|
58
|
-
dialogs[index].resolve(val)
|
|
59
|
-
dialogs.splice(index, 1)
|
|
60
|
-
}
|
|
61
|
-
}
|
|
62
|
-
|
|
63
|
-
function closeWithReject(id: number, val: any) {
|
|
64
|
-
const index = dialogs.findIndex((d) => d.id === id)
|
|
65
|
-
if (index !== -1) {
|
|
66
|
-
dialogs[index].reject(val)
|
|
67
|
-
dialogs.splice(index, 1)
|
|
68
|
-
}
|
|
69
|
-
}
|
|
70
|
-
|
|
71
|
-
onMounted(() => {
|
|
72
|
-
useDialog()?.setDialogHost(open, close)
|
|
73
|
-
})
|
|
74
|
-
|
|
75
|
-
defineExpose({ open, close })
|
|
76
|
-
</script>
|
|
77
|
-
<template>
|
|
78
|
-
<Teleport to="body">
|
|
79
|
-
<div>
|
|
80
|
-
<component
|
|
81
|
-
v-for="dialog in dialogs"
|
|
82
|
-
:key="dialog.id"
|
|
83
|
-
:is="dialog.component"
|
|
84
|
-
v-bind="dialog.props"
|
|
85
|
-
/>
|
|
86
|
-
</div>
|
|
87
|
-
</Teleport>
|
|
88
|
-
</template>
|
|
1
|
+
<script setup lang="ts">
|
|
2
|
+
/**
|
|
3
|
+
* DialogHost coordinates modal rendering and interactions for runtime dialog flows.
|
|
4
|
+
* This doc block is consumed by vue-docgen for generated API documentation.
|
|
5
|
+
*/
|
|
6
|
+
import {shallowReactive, onMounted} from 'vue'
|
|
7
|
+
import {useDialog} from "../../composables/dialog"
|
|
8
|
+
import type {DialogOpenResult} from "../../types/dialogManager";
|
|
9
|
+
|
|
10
|
+
interface DialogEntry {
|
|
11
|
+
id: number
|
|
12
|
+
component: any
|
|
13
|
+
props: Record<string, any>
|
|
14
|
+
resolve: (val: any) => void
|
|
15
|
+
reject: (val: any) => void
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
const dialogs = shallowReactive<DialogEntry[]>([])
|
|
19
|
+
let idCounter = 0
|
|
20
|
+
|
|
21
|
+
function open(component: any, inputProps: Record<string, any> = {}) : DialogOpenResult {
|
|
22
|
+
const id = ++idCounter
|
|
23
|
+
|
|
24
|
+
const promise = new Promise<any>((resolve,reject) => {
|
|
25
|
+
const dialogProps = {
|
|
26
|
+
...inputProps,
|
|
27
|
+
modelValue: true,
|
|
28
|
+
'onUpdate:modelValue': (v: boolean) => {
|
|
29
|
+
if (!v) close(id, null)
|
|
30
|
+
},
|
|
31
|
+
onResolve: (val: any) => close(id, val),
|
|
32
|
+
onReject: (val: any) => closeWithReject(id, val)
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
dialogs.push({
|
|
36
|
+
id,
|
|
37
|
+
component,
|
|
38
|
+
props: dialogProps,
|
|
39
|
+
resolve,
|
|
40
|
+
reject
|
|
41
|
+
})
|
|
42
|
+
})
|
|
43
|
+
|
|
44
|
+
const closeInstance = (val?: any) => {
|
|
45
|
+
close(id,val)
|
|
46
|
+
}
|
|
47
|
+
|
|
48
|
+
const rejectInstance = (val?: any) => {
|
|
49
|
+
closeWithReject(id,val)
|
|
50
|
+
}
|
|
51
|
+
|
|
52
|
+
return { id, promise, closeInstance, rejectInstance}
|
|
53
|
+
}
|
|
54
|
+
|
|
55
|
+
function close(id: number, val: any) {
|
|
56
|
+
const index = dialogs.findIndex((d) => d.id === id)
|
|
57
|
+
if (index !== -1) {
|
|
58
|
+
dialogs[index].resolve(val)
|
|
59
|
+
dialogs.splice(index, 1)
|
|
60
|
+
}
|
|
61
|
+
}
|
|
62
|
+
|
|
63
|
+
function closeWithReject(id: number, val: any) {
|
|
64
|
+
const index = dialogs.findIndex((d) => d.id === id)
|
|
65
|
+
if (index !== -1) {
|
|
66
|
+
dialogs[index].reject(val)
|
|
67
|
+
dialogs.splice(index, 1)
|
|
68
|
+
}
|
|
69
|
+
}
|
|
70
|
+
|
|
71
|
+
onMounted(() => {
|
|
72
|
+
useDialog()?.setDialogHost(open, close)
|
|
73
|
+
})
|
|
74
|
+
|
|
75
|
+
defineExpose({ open, close })
|
|
76
|
+
</script>
|
|
77
|
+
<template>
|
|
78
|
+
<Teleport to="body">
|
|
79
|
+
<div>
|
|
80
|
+
<component
|
|
81
|
+
v-for="dialog in dialogs"
|
|
82
|
+
:key="dialog.id"
|
|
83
|
+
:is="dialog.component"
|
|
84
|
+
v-bind="dialog.props"
|
|
85
|
+
/>
|
|
86
|
+
</div>
|
|
87
|
+
</Teleport>
|
|
88
|
+
</template>
|
|
@@ -1,84 +1,84 @@
|
|
|
1
|
-
<script lang="ts" setup>
|
|
2
|
-
/**
|
|
3
|
-
* DialogIndex coordinates modal rendering and interactions for runtime dialog flows.
|
|
4
|
-
* This doc block is consumed by vue-docgen for generated API documentation.
|
|
5
|
-
*/
|
|
6
|
-
import { computed } from 'vue'
|
|
7
|
-
|
|
8
|
-
interface DialogProps {
|
|
9
|
-
modelValue?: boolean // Bound value for v-model synchronization with the parent component.
|
|
10
|
-
title?: string // Title text displayed in the component header or dialog.
|
|
11
|
-
message?: string // main message body shown in UI
|
|
12
|
-
type?: 'success' | 'error' | 'warning' | 'info' // visual variant controlling color and intent semantics
|
|
13
|
-
width?: number | string // dialog/component width in CSS-compatible units
|
|
14
|
-
}
|
|
15
|
-
|
|
16
|
-
/**
|
|
17
|
-
* Public props accepted by DialogIndex.
|
|
18
|
-
* Document each prop field with intent, defaults, and side effects for clear generated docs.
|
|
19
|
-
*/
|
|
20
|
-
const props = defineProps<DialogProps>()
|
|
21
|
-
/**
|
|
22
|
-
* Custom events emitted by DialogIndex.
|
|
23
|
-
* Parents can listen to these events to react to user actions and internal state changes.
|
|
24
|
-
*/
|
|
25
|
-
const emit = defineEmits(['update:modelValue'])
|
|
26
|
-
|
|
27
|
-
const dialogIcon = computed(() => {
|
|
28
|
-
switch (props.type) {
|
|
29
|
-
case 'success':
|
|
30
|
-
return 'mdi mdi-check-circle'
|
|
31
|
-
case 'error':
|
|
32
|
-
return 'mdi mdi-alert-circle'
|
|
33
|
-
case 'warning':
|
|
34
|
-
return 'mdi mdi-alert'
|
|
35
|
-
case 'info':
|
|
36
|
-
return 'mdi mdi-information-variant-circle'
|
|
37
|
-
default:
|
|
38
|
-
return ''
|
|
39
|
-
}
|
|
40
|
-
})
|
|
41
|
-
</script>
|
|
42
|
-
|
|
43
|
-
<template>
|
|
44
|
-
<VDialog
|
|
45
|
-
:model-value="modelValue"
|
|
46
|
-
:width="width"
|
|
47
|
-
max-width="800"
|
|
48
|
-
@update:model-value="emit('update:modelValue', false)"
|
|
49
|
-
>
|
|
50
|
-
<VCard>
|
|
51
|
-
<VToolbar :color="type">
|
|
52
|
-
<VToolbarTitle>
|
|
53
|
-
<VIcon :icon="dialogIcon" />
|
|
54
|
-
{{ title }}
|
|
55
|
-
</VToolbarTitle>
|
|
56
|
-
<VBtn
|
|
57
|
-
icon="mdi mdi-close"
|
|
58
|
-
size="x-small"
|
|
59
|
-
@click="emit('update:modelValue', false)"
|
|
60
|
-
/>
|
|
61
|
-
</VToolbar>
|
|
62
|
-
<VCardText>
|
|
63
|
-
<slot>
|
|
64
|
-
{{ message }}
|
|
65
|
-
</slot>
|
|
66
|
-
</VCardText>
|
|
67
|
-
<VDivider />
|
|
68
|
-
<VCardActions>
|
|
69
|
-
<VBtn
|
|
70
|
-
:color="type"
|
|
71
|
-
block
|
|
72
|
-
class="ma-auto"
|
|
73
|
-
@click="emit('update:modelValue', false)"
|
|
74
|
-
>
|
|
75
|
-
ตกลง
|
|
76
|
-
</VBtn>
|
|
77
|
-
</VCardActions>
|
|
78
|
-
</VCard>
|
|
79
|
-
</VDialog>
|
|
80
|
-
</template>
|
|
81
|
-
|
|
82
|
-
<style lang="">
|
|
83
|
-
|
|
84
|
-
</style>
|
|
1
|
+
<script lang="ts" setup>
|
|
2
|
+
/**
|
|
3
|
+
* DialogIndex coordinates modal rendering and interactions for runtime dialog flows.
|
|
4
|
+
* This doc block is consumed by vue-docgen for generated API documentation.
|
|
5
|
+
*/
|
|
6
|
+
import { computed } from 'vue'
|
|
7
|
+
|
|
8
|
+
interface DialogProps {
|
|
9
|
+
modelValue?: boolean // Bound value for v-model synchronization with the parent component.
|
|
10
|
+
title?: string // Title text displayed in the component header or dialog.
|
|
11
|
+
message?: string // main message body shown in UI
|
|
12
|
+
type?: 'success' | 'error' | 'warning' | 'info' // visual variant controlling color and intent semantics
|
|
13
|
+
width?: number | string // dialog/component width in CSS-compatible units
|
|
14
|
+
}
|
|
15
|
+
|
|
16
|
+
/**
|
|
17
|
+
* Public props accepted by DialogIndex.
|
|
18
|
+
* Document each prop field with intent, defaults, and side effects for clear generated docs.
|
|
19
|
+
*/
|
|
20
|
+
const props = defineProps<DialogProps>()
|
|
21
|
+
/**
|
|
22
|
+
* Custom events emitted by DialogIndex.
|
|
23
|
+
* Parents can listen to these events to react to user actions and internal state changes.
|
|
24
|
+
*/
|
|
25
|
+
const emit = defineEmits(['update:modelValue'])
|
|
26
|
+
|
|
27
|
+
const dialogIcon = computed(() => {
|
|
28
|
+
switch (props.type) {
|
|
29
|
+
case 'success':
|
|
30
|
+
return 'mdi mdi-check-circle'
|
|
31
|
+
case 'error':
|
|
32
|
+
return 'mdi mdi-alert-circle'
|
|
33
|
+
case 'warning':
|
|
34
|
+
return 'mdi mdi-alert'
|
|
35
|
+
case 'info':
|
|
36
|
+
return 'mdi mdi-information-variant-circle'
|
|
37
|
+
default:
|
|
38
|
+
return ''
|
|
39
|
+
}
|
|
40
|
+
})
|
|
41
|
+
</script>
|
|
42
|
+
|
|
43
|
+
<template>
|
|
44
|
+
<VDialog
|
|
45
|
+
:model-value="modelValue"
|
|
46
|
+
:width="width"
|
|
47
|
+
max-width="800"
|
|
48
|
+
@update:model-value="emit('update:modelValue', false)"
|
|
49
|
+
>
|
|
50
|
+
<VCard>
|
|
51
|
+
<VToolbar :color="type">
|
|
52
|
+
<VToolbarTitle>
|
|
53
|
+
<VIcon :icon="dialogIcon" />
|
|
54
|
+
{{ title }}
|
|
55
|
+
</VToolbarTitle>
|
|
56
|
+
<VBtn
|
|
57
|
+
icon="mdi mdi-close"
|
|
58
|
+
size="x-small"
|
|
59
|
+
@click="emit('update:modelValue', false)"
|
|
60
|
+
/>
|
|
61
|
+
</VToolbar>
|
|
62
|
+
<VCardText>
|
|
63
|
+
<slot>
|
|
64
|
+
{{ message }}
|
|
65
|
+
</slot>
|
|
66
|
+
</VCardText>
|
|
67
|
+
<VDivider />
|
|
68
|
+
<VCardActions>
|
|
69
|
+
<VBtn
|
|
70
|
+
:color="type"
|
|
71
|
+
block
|
|
72
|
+
class="ma-auto"
|
|
73
|
+
@click="emit('update:modelValue', false)"
|
|
74
|
+
>
|
|
75
|
+
ตกลง
|
|
76
|
+
</VBtn>
|
|
77
|
+
</VCardActions>
|
|
78
|
+
</VCard>
|
|
79
|
+
</VDialog>
|
|
80
|
+
</template>
|
|
81
|
+
|
|
82
|
+
<style lang="">
|
|
83
|
+
|
|
84
|
+
</style>
|
|
@@ -1,51 +1,51 @@
|
|
|
1
|
-
<script setup lang="ts">
|
|
2
|
-
/**
|
|
3
|
-
* DialogLoading coordinates modal rendering and interactions for runtime dialog flows.
|
|
4
|
-
* This doc block is consumed by vue-docgen for generated API documentation.
|
|
5
|
-
*/
|
|
6
|
-
import { ref, watch } from 'vue'
|
|
7
|
-
|
|
8
|
-
interface DialogProps {
|
|
9
|
-
modelValue: boolean // Bound value for v-model synchronization with the parent component.
|
|
10
|
-
color?: string // Vuetify color name applied to the visual element.
|
|
11
|
-
}
|
|
12
|
-
/**
|
|
13
|
-
* Custom events emitted by DialogLoading.
|
|
14
|
-
* Parents can listen to these events to react to user actions and internal state changes.
|
|
15
|
-
*/
|
|
16
|
-
const emit = defineEmits(['update:modelValue'])
|
|
17
|
-
|
|
18
|
-
/**
|
|
19
|
-
* Public props accepted by DialogLoading.
|
|
20
|
-
* Document each prop field with intent, defaults, and side effects for clear generated docs.
|
|
21
|
-
*/
|
|
22
|
-
const props = defineProps<DialogProps>()
|
|
23
|
-
const dialogVisible = ref<boolean>(props.modelValue)
|
|
24
|
-
|
|
25
|
-
watch(() => props.modelValue, (newValue) => {
|
|
26
|
-
dialogVisible.value = newValue
|
|
27
|
-
})
|
|
28
|
-
|
|
29
|
-
watch(() => dialogVisible.value, (newValue) => {
|
|
30
|
-
emit('update:modelValue', newValue)
|
|
31
|
-
})
|
|
32
|
-
</script>
|
|
33
|
-
|
|
34
|
-
<template>
|
|
35
|
-
<v-dialog
|
|
36
|
-
v-model="dialogVisible"
|
|
37
|
-
persistent
|
|
38
|
-
max-width="500"
|
|
39
|
-
>
|
|
40
|
-
<v-card :color="props.color">
|
|
41
|
-
<v-card-text>
|
|
42
|
-
<v-row>
|
|
43
|
-
<v-col class="text-center">
|
|
44
|
-
<slot>กรุณารอสักครู่</slot>
|
|
45
|
-
</v-col>
|
|
46
|
-
</v-row>
|
|
47
|
-
</v-card-text>
|
|
48
|
-
<v-progress-linear indeterminate />
|
|
49
|
-
</v-card>
|
|
50
|
-
</v-dialog>
|
|
51
|
-
</template>
|
|
1
|
+
<script setup lang="ts">
|
|
2
|
+
/**
|
|
3
|
+
* DialogLoading coordinates modal rendering and interactions for runtime dialog flows.
|
|
4
|
+
* This doc block is consumed by vue-docgen for generated API documentation.
|
|
5
|
+
*/
|
|
6
|
+
import { ref, watch } from 'vue'
|
|
7
|
+
|
|
8
|
+
interface DialogProps {
|
|
9
|
+
modelValue: boolean // Bound value for v-model synchronization with the parent component.
|
|
10
|
+
color?: string // Vuetify color name applied to the visual element.
|
|
11
|
+
}
|
|
12
|
+
/**
|
|
13
|
+
* Custom events emitted by DialogLoading.
|
|
14
|
+
* Parents can listen to these events to react to user actions and internal state changes.
|
|
15
|
+
*/
|
|
16
|
+
const emit = defineEmits(['update:modelValue'])
|
|
17
|
+
|
|
18
|
+
/**
|
|
19
|
+
* Public props accepted by DialogLoading.
|
|
20
|
+
* Document each prop field with intent, defaults, and side effects for clear generated docs.
|
|
21
|
+
*/
|
|
22
|
+
const props = defineProps<DialogProps>()
|
|
23
|
+
const dialogVisible = ref<boolean>(props.modelValue)
|
|
24
|
+
|
|
25
|
+
watch(() => props.modelValue, (newValue) => {
|
|
26
|
+
dialogVisible.value = newValue
|
|
27
|
+
})
|
|
28
|
+
|
|
29
|
+
watch(() => dialogVisible.value, (newValue) => {
|
|
30
|
+
emit('update:modelValue', newValue)
|
|
31
|
+
})
|
|
32
|
+
</script>
|
|
33
|
+
|
|
34
|
+
<template>
|
|
35
|
+
<v-dialog
|
|
36
|
+
v-model="dialogVisible"
|
|
37
|
+
persistent
|
|
38
|
+
max-width="500"
|
|
39
|
+
>
|
|
40
|
+
<v-card :color="props.color">
|
|
41
|
+
<v-card-text>
|
|
42
|
+
<v-row>
|
|
43
|
+
<v-col class="text-center">
|
|
44
|
+
<slot>กรุณารอสักครู่</slot>
|
|
45
|
+
</v-col>
|
|
46
|
+
</v-row>
|
|
47
|
+
</v-card-text>
|
|
48
|
+
<v-progress-linear indeterminate />
|
|
49
|
+
</v-card>
|
|
50
|
+
</v-dialog>
|
|
51
|
+
</template>
|