Skip to content

Commit 902bcbd

Browse files
Michael.KryvoruchkoMichael.Kryvoruchko
Michael.Kryvoruchko
authored and
Michael.Kryvoruchko
committed
feat: upgrade to 2.4.0. add example for the close-on-back
1 parent 69f2511 commit 902bcbd

File tree

4 files changed

+85
-66
lines changed

4 files changed

+85
-66
lines changed

‎package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@
1818
"dependencies": {
1919
"@types/node": "^17.0.17",
2020
"@vueuse/core": "^7.6.1",
21-
"gitart-vue-dialog": "2.0.3",
21+
"gitart-vue-dialog": "^2.4.0",
2222
"vue": "^3.2.30"
2323
},
2424
"devDependencies": {

‎src/components/Layout/NestingDialogLayout.vue

+79-61
Original file line numberDiff line numberDiff line change
@@ -4,67 +4,82 @@
44
Nested Dialogs
55
</h3>
66

7-
<GDialog
8-
v-model="dialogs.first"
9-
max-width="400"
10-
>
11-
<DialogToolbar @close="dialogs.first = false" />
12-
13-
<div p="x-5 y-4">
14-
<h3 m="b-4">
15-
First Dialog
16-
</h3>
17-
18-
<p m="b-3">
19-
Lorem ipsum dolor sit amet consectetur adipisicing elit. Eos quas aliquid, voluptates voluptas commodi inventore.
20-
</p>
21-
22-
<Btn m="r-2" @click="dialogs.second = true">
23-
Second
24-
</Btn>
25-
26-
<Btn m="r-2" @click="dialogs.third = true">
27-
Third
28-
</Btn>
29-
</div>
30-
</GDialog>
31-
32-
<GDialog
33-
v-model="dialogs.second"
34-
fullscreen
35-
>
36-
<DialogToolbar @close="dialogs.second = false" />
37-
38-
<div p="x-5 y-4">
39-
<h3 m="b-4">
40-
Second Dialog
41-
</h3>
42-
43-
<p m="b-3">
44-
Lorem ipsum dolor sit amet consectetur adipisicing elit. Suscipit, sit.
45-
</p>
46-
47-
<Btn m="r-2" @click="dialogs.third = true">
48-
Third
49-
</Btn>
50-
</div>
51-
</GDialog>
52-
53-
<GDialog
54-
v-model="dialogs.third"
55-
max-width="500"
56-
>
57-
<DialogToolbar @close="dialogs.third = false" />
58-
59-
<div p="x-5 y-4">
60-
<h3 m="b-4">
61-
Third Dialog
62-
</h3>
63-
<p m="b-3">
64-
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio iusto aperiam quasi recusandae nulla officia quibusdam libero et alias minus?
65-
</p>
66-
</div>
67-
</GDialog>
7+
<label class="flex mb-2">
8+
<input
9+
v-model="closeOnBack"
10+
type="checkbox"
11+
>
12+
<span class="font-semibold ml-2">
13+
Close on Back
14+
</span>
15+
</label>
16+
17+
<div :key="closeOnBack ? '1' : '2'">
18+
<GDialog
19+
v-model="dialogs.first"
20+
max-width="400"
21+
:close-on-back="closeOnBack"
22+
>
23+
<DialogToolbar @close="dialogs.first = false" />
24+
25+
<div p="x-5 y-4">
26+
<h3 m="b-4">
27+
First Dialog
28+
</h3>
29+
30+
<p m="b-3">
31+
Lorem ipsum dolor sit amet consectetur adipisicing elit. Eos quas aliquid, voluptates voluptas commodi inventore.
32+
</p>
33+
34+
<Btn m="r-2" @click="dialogs.second = true">
35+
Second
36+
</Btn>
37+
38+
<Btn m="r-2" @click="dialogs.third = true">
39+
Third
40+
</Btn>
41+
</div>
42+
</GDialog>
43+
44+
<GDialog
45+
v-model="dialogs.second"
46+
fullscreen
47+
:close-on-back="closeOnBack"
48+
>
49+
<DialogToolbar @close="dialogs.second = false" />
50+
51+
<div p="x-5 y-4">
52+
<h3 m="b-4">
53+
Second Dialog
54+
</h3>
55+
56+
<p m="b-3">
57+
Lorem ipsum dolor sit amet consectetur adipisicing elit. Suscipit, sit.
58+
</p>
59+
60+
<Btn m="r-2" @click="dialogs.third = true">
61+
Third
62+
</Btn>
63+
</div>
64+
</GDialog>
65+
66+
<GDialog
67+
v-model="dialogs.third"
68+
max-width="500"
69+
:close-on-back="closeOnBack"
70+
>
71+
<DialogToolbar @close="dialogs.third = false" />
72+
73+
<div p="x-5 y-4">
74+
<h3 m="b-4">
75+
Third Dialog
76+
</h3>
77+
<p m="b-3">
78+
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio iusto aperiam quasi recusandae nulla officia quibusdam libero et alias minus?
79+
</p>
80+
</div>
81+
</GDialog>
82+
</div>
6883

6984
<Btn
7085
m="r-2"
@@ -102,13 +117,16 @@ export default defineComponent({
102117
},
103118
104119
setup() {
120+
const closeOnBack = ref(false)
121+
105122
const dialogs = reactive({
106123
first: false,
107124
second: false,
108125
third: false,
109126
})
110127
111128
return {
129+
closeOnBack,
112130
dialogs,
113131
}
114132
},

‎tsconfig.json

+1
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,7 @@
2020
"outDir": "./dist",
2121
"downlevelIteration": true,
2222
"strict": true,
23+
"jsx": "preserve",
2324
"noImplicitReturns": true,
2425
"noUnusedLocals": true,
2526
"moduleResolution": "node",

‎yarn.lock

+4-4
Original file line numberDiff line numberDiff line change
@@ -1586,10 +1586,10 @@ get-symbol-description@^1.0.0:
15861586
call-bind "^1.0.2"
15871587
get-intrinsic "^1.1.1"
15881588

1589-
gitart-vue-dialog@2.0.3:
1590-
version "2.0.3"
1591-
resolved "https://registry.yarnpkg.com/gitart-vue-dialog/-/gitart-vue-dialog-2.0.3.tgz#46f007031ef81f26ad246ea3bf529f7d92b482a0"
1592-
integrity sha512-ke2biieP50I41Mfmxhp0ii/qh0xa7Hsn8Q2/oTg7SdnRk21jICECSDQwMtcHv9OWhfyZVq2E3VT5BaOfAwr7iQ==
1589+
gitart-vue-dialog@^2.4.0:
1590+
version "2.4.0"
1591+
resolved "https://registry.yarnpkg.com/gitart-vue-dialog/-/gitart-vue-dialog-2.4.0.tgz#27029132dfe7f5c6d7535571de82d3511bcbb12b"
1592+
integrity sha512-ko7q7ftZ8gJ0gOsL6/9NYlSyc1DEI2Ez32kXmRfO64mreYMD6z2U4eporL/lz1kBP9XtgORVBJcvXDeJDL/94g==
15931593

15941594
glob-parent@^5.1.2, glob-parent@~5.1.2:
15951595
version "5.1.2"

0 commit comments

Comments
 (0)