@antify/ui 3.3.2 → 4.0.0
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.
|
@@ -1,6 +1,8 @@
|
|
|
1
1
|
<script lang="ts" setup>
|
|
2
2
|
import {
|
|
3
|
-
ref,
|
|
3
|
+
ref,
|
|
4
|
+
useSlots,
|
|
5
|
+
onMounted,
|
|
4
6
|
} from 'vue';
|
|
5
7
|
import {
|
|
6
8
|
faXmark,
|
|
@@ -9,12 +11,10 @@ import AntButton from './AntButton.vue';
|
|
|
9
11
|
import AntSkeleton from './AntSkeleton.vue';
|
|
10
12
|
|
|
11
13
|
const emit = defineEmits([
|
|
12
|
-
'update:open',
|
|
13
14
|
'close',
|
|
14
15
|
]);
|
|
15
16
|
const props = withDefaults(defineProps<{
|
|
16
17
|
title: string;
|
|
17
|
-
open: boolean;
|
|
18
18
|
fullscreen?: boolean;
|
|
19
19
|
padding?: boolean;
|
|
20
20
|
skeleton?: boolean;
|
|
@@ -23,31 +23,35 @@ const props = withDefaults(defineProps<{
|
|
|
23
23
|
padding: false,
|
|
24
24
|
skeleton: false,
|
|
25
25
|
});
|
|
26
|
-
const openModal = ref(
|
|
27
|
-
const openBackground = ref(
|
|
28
|
-
|
|
29
|
-
watch(() => props.open, (val) => {
|
|
30
|
-
function onKeydown(e: KeyboardEvent) {
|
|
31
|
-
if (e.key === 'Escape') {
|
|
32
|
-
closeModal();
|
|
33
|
-
}
|
|
34
|
-
}
|
|
26
|
+
const openModal = ref(false);
|
|
27
|
+
const openBackground = ref(false);
|
|
35
28
|
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
document.addEventListener('keydown', onKeydown);
|
|
40
|
-
} else {
|
|
41
|
-
openModal.value = false;
|
|
42
|
-
setTimeout(() => openBackground.value = false, props.fullscreen ? 0 : 100);
|
|
43
|
-
document.removeEventListener('keydown', onKeydown);
|
|
29
|
+
function onKeydown(e: KeyboardEvent) {
|
|
30
|
+
if (e.key === 'Escape') {
|
|
31
|
+
closeModal();
|
|
44
32
|
}
|
|
45
|
-
}
|
|
33
|
+
}
|
|
46
34
|
|
|
47
35
|
function closeModal() {
|
|
48
|
-
|
|
49
|
-
|
|
36
|
+
openModal.value = false;
|
|
37
|
+
|
|
38
|
+
setTimeout(() => openBackground.value = false, props.fullscreen ? 0 : 100);
|
|
39
|
+
document.removeEventListener('keydown', onKeydown);
|
|
40
|
+
|
|
41
|
+
setTimeout(
|
|
42
|
+
() => {
|
|
43
|
+
emit('close');
|
|
44
|
+
},
|
|
45
|
+
// Wait finishing the close animation
|
|
46
|
+
400,
|
|
47
|
+
);
|
|
50
48
|
}
|
|
49
|
+
|
|
50
|
+
onMounted(() => {
|
|
51
|
+
openBackground.value = true;
|
|
52
|
+
setTimeout(() => openModal.value = true, props.fullscreen ? 0 : 100);
|
|
53
|
+
document.addEventListener('keydown', onKeydown);
|
|
54
|
+
});
|
|
51
55
|
</script>
|
|
52
56
|
|
|
53
57
|
<template>
|
|
@@ -28,12 +28,7 @@ const Docs = exports.Docs = {
|
|
|
28
28
|
AntKeycap: _AntKeycap.default
|
|
29
29
|
},
|
|
30
30
|
setup() {
|
|
31
|
-
const open = (0, _vue.
|
|
32
|
-
// @ts-ignore
|
|
33
|
-
get: () => args.open,
|
|
34
|
-
// @ts-ignore
|
|
35
|
-
set: val => args.open = val
|
|
36
|
-
});
|
|
31
|
+
const open = (0, _vue.ref)(false);
|
|
37
32
|
return {
|
|
38
33
|
args,
|
|
39
34
|
open
|
|
@@ -60,7 +55,11 @@ const Docs = exports.Docs = {
|
|
|
60
55
|
</div>
|
|
61
56
|
<AntButton @click="() => open = true" state="primary">Open Modal</AntButton>
|
|
62
57
|
|
|
63
|
-
<AntModal
|
|
58
|
+
<AntModal
|
|
59
|
+
v-if="open"
|
|
60
|
+
v-bind="args"
|
|
61
|
+
@close="open = false"
|
|
62
|
+
>
|
|
64
63
|
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, <br/>
|
|
65
64
|
sed diam nonumy eirmod tempor invidunt <br/>
|
|
66
65
|
ut labore et dolore magna aliquyam erat, <br/>
|
|
@@ -83,15 +82,13 @@ const Docs = exports.Docs = {
|
|
|
83
82
|
`
|
|
84
83
|
}),
|
|
85
84
|
args: {
|
|
86
|
-
title: "Lorem ipsum dolor"
|
|
87
|
-
open: false
|
|
85
|
+
title: "Lorem ipsum dolor"
|
|
88
86
|
}
|
|
89
87
|
};
|
|
90
88
|
const Fullscreen = exports.Fullscreen = {
|
|
91
89
|
render: Docs.render,
|
|
92
90
|
args: {
|
|
93
91
|
...Docs.args,
|
|
94
|
-
open: true,
|
|
95
92
|
fullscreen: true
|
|
96
93
|
}
|
|
97
94
|
};
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import AntModal from "../AntModal.vue";
|
|
2
2
|
import AntButton from "../AntButton.vue";
|
|
3
3
|
import {
|
|
4
|
-
|
|
4
|
+
ref
|
|
5
5
|
} from "vue";
|
|
6
6
|
import AntKeycap from "../AntKeycap.vue";
|
|
7
7
|
const meta = {
|
|
@@ -23,12 +23,7 @@ export const Docs = {
|
|
|
23
23
|
AntKeycap
|
|
24
24
|
},
|
|
25
25
|
setup() {
|
|
26
|
-
const open =
|
|
27
|
-
// @ts-ignore
|
|
28
|
-
get: () => args.open,
|
|
29
|
-
// @ts-ignore
|
|
30
|
-
set: (val) => args.open = val
|
|
31
|
-
});
|
|
26
|
+
const open = ref(false);
|
|
32
27
|
return {
|
|
33
28
|
args,
|
|
34
29
|
open
|
|
@@ -55,7 +50,11 @@ export const Docs = {
|
|
|
55
50
|
</div>
|
|
56
51
|
<AntButton @click="() => open = true" state="primary">Open Modal</AntButton>
|
|
57
52
|
|
|
58
|
-
<AntModal
|
|
53
|
+
<AntModal
|
|
54
|
+
v-if="open"
|
|
55
|
+
v-bind="args"
|
|
56
|
+
@close="open = false"
|
|
57
|
+
>
|
|
59
58
|
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, <br/>
|
|
60
59
|
sed diam nonumy eirmod tempor invidunt <br/>
|
|
61
60
|
ut labore et dolore magna aliquyam erat, <br/>
|
|
@@ -78,15 +77,13 @@ export const Docs = {
|
|
|
78
77
|
`
|
|
79
78
|
}),
|
|
80
79
|
args: {
|
|
81
|
-
title: "Lorem ipsum dolor"
|
|
82
|
-
open: false
|
|
80
|
+
title: "Lorem ipsum dolor"
|
|
83
81
|
}
|
|
84
82
|
};
|
|
85
83
|
export const Fullscreen = {
|
|
86
84
|
render: Docs.render,
|
|
87
85
|
args: {
|
|
88
86
|
...Docs.args,
|
|
89
|
-
open: true,
|
|
90
87
|
fullscreen: true
|
|
91
88
|
}
|
|
92
89
|
};
|