Skip to content
This repository was archived by the owner on Jan 9, 2022. It is now read-only.

Commit faf9313

Browse files
MichaelGitArtMichaelGitArt
committed
feat(demo): upgrade to 0.2.0-alpha.1
- add new dialog. ProfilePhotoDialog - upgrade button grid. make wrapping
1 parent d33e7fd commit faf9313

File tree

17 files changed

+259
-50
lines changed

17 files changed

+259
-50
lines changed

‎demo/assets/img/profile.jpg

10.2 KB
Loading

‎demo/package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@
88
"license": "MIT",
99
"dependencies": {
1010
"@vueuse/core": "^5.2.0",
11-
"gitart-vue-dialog": "0.0.15",
11+
"gitart-vue-dialog": "0.2.0-alpha.1",
1212
"vue": "3.2.0-beta.7"
1313
},
1414
"devDependencies": {

‎demo/src/App.vue

Lines changed: 22 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -7,46 +7,44 @@
77
<div
88
class="container"
99
bg="white"
10-
p="y-8 x-6"
10+
p="t-8 b-4 x-6"
1111
m="x-auto"
1212
border="rounded"
1313
>
14-
<div
15-
class="flex items-end"
16-
m="b-8"
17-
>
18-
<h1
19-
m="r-4"
20-
>
21-
Vue Dialog
22-
</h1>
23-
24-
<a
25-
m="r-2"
26-
href="https://www.npmjs.com/package/gitart-vue-dialog"
27-
target="_blank"
28-
>
29-
npm
30-
</a>
31-
32-
<a href="https://github.com/MichaelGitArt/gitart-vue-dialog" target="_blank">
33-
github
34-
</a>
14+
<TheHeader m="b-4" />
15+
16+
<div p="y-3">
17+
<DialogLayout />
18+
</div>
19+
20+
<div p="y-3">
21+
<ProgrammaticalDialogLayout />
3522
</div>
3623

37-
<DialogLayout />
24+
<TheFooter m="t-4" />
3825
</div>
3926
</div>
27+
<GDialogRoot />
4028
</template>
4129

4230
<script lang="ts">
4331
import { defineComponent } from 'vue'
44-
import DialogLayout from './components/Layout/DialogLayout.vue'
32+
import { GDialogRoot } from 'plugin'
33+
34+
import TheHeader from '@/components/Layout/TheHeader.vue'
35+
import TheFooter from '@/components/Layout/TheFooter.vue'
36+
37+
import DialogLayout from '@/components/Layout/DialogLayout.vue'
38+
import ProgrammaticalDialogLayout from '@/components/Layout/ProgrammaticalDialogLayout.vue'
4539
4640
export default defineComponent({
4741
name: 'App',
4842
components: {
43+
GDialogRoot,
44+
TheHeader,
45+
TheFooter,
4946
DialogLayout,
47+
ProgrammaticalDialogLayout,
5048
},
5149
})
5250
</script>

‎demo/src/components/Dialogs/BaseDialog/BaseDialog.vue

Lines changed: 11 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -18,11 +18,15 @@
1818
<script lang="ts">
1919
import { ref, defineComponent } from 'vue'
2020
import { useVModel } from '@vueuse/core'
21-
2221
import { GDialog } from 'plugin'
2322
2423
import BooleanSwitch from '@/components/PropControls/BooleanSwitch/BooleanSwitch.vue'
2524
25+
export interface IBaseDialogProps {
26+
modelValue: boolean
27+
lorem: boolean
28+
}
29+
2630
export default defineComponent({
2731
name: 'BaseDialog',
2832
components: {
@@ -35,9 +39,14 @@ export default defineComponent({
3539
type: Boolean,
3640
default: false,
3741
},
42+
43+
lorem: {
44+
type: Boolean,
45+
required: true,
46+
},
3847
},
3948
40-
setup(props, { emit }) {
49+
setup(props: IBaseDialogProps, { emit }) {
4150
const depressed = ref(false)
4251
const value = useVModel(props, 'modelValue', emit)
4352

‎demo/src/components/Dialogs/ProfilePhotoDialog/ProfilePhotoDialog.vue

Lines changed: 63 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,63 @@
1+
<template>
2+
<GDialog
3+
v-model="value"
4+
content-class="profile-dialog-wrapper"
5+
width="300"
6+
height="300"
7+
>
8+
<div class="profile-dialog">
9+
<img src="/assets/img/profile.jpg" alt="Profile">
10+
</div>
11+
</GDialog>
12+
</template>
13+
14+
<script lang="ts">
15+
import { defineComponent } from 'vue'
16+
import { useVModel } from '@vueuse/core'
17+
import { GDialog } from 'plugin'
18+
19+
export default defineComponent({
20+
name: 'ProfilePhotoDialog',
21+
components: {
22+
GDialog,
23+
},
24+
25+
props: {
26+
modelValue: {
27+
type: Boolean,
28+
default: false,
29+
},
30+
},
31+
32+
setup(props, { emit }) {
33+
const value = useVModel(props, 'modelValue', emit)
34+
35+
return {
36+
value,
37+
}
38+
},
39+
})
40+
</script>
41+
42+
<style lang="scss" scoped>
43+
::v-global(.profile-dialog-wrapper) { /* stylelint-disable-line selector-pseudo-element-no-unknown */
44+
border-radius: 50%;
45+
}
46+
47+
.profile-dialog {
48+
height: 100%;
49+
display: flex;
50+
justify-content: center;
51+
align-items: center;
52+
// padding: 10px;
53+
background-color: #fff;
54+
// overflow: auto;
55+
56+
img {
57+
max-height: 100%;
58+
max-width: 100%;
59+
width: 100%;
60+
object-fit: cover;
61+
}
62+
}
63+
</style>

‎demo/src/components/Dialogs/ScrollDialog/ScrollDialog.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -38,7 +38,7 @@ import { GDialog } from 'plugin'
3838
import DialogToolbar from '@/components/Dialog/DialogToolbar.vue'
3939
4040
export default defineComponent({
41-
name: 'BaseDialog',
41+
name: 'ScrollDialogCompoenent',
4242
components: {
4343
GDialog,
4444
DialogToolbar,

‎demo/src/components/Dialogs/StyledDialog/StyledDialog.vue

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,6 @@
2525
<script lang="ts">
2626
import { defineComponent } from 'vue'
2727
import { useVModel } from '@vueuse/core'
28-
2928
import { GDialog } from 'plugin'
3029
3130
import DialogToolbar from '@/components/Dialog/DialogToolbar.vue'

‎demo/src/components/Layout/ButtonGrid.vue

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
<template>
2+
<div class="button-grid">
3+
<slot />
4+
</div>
5+
</template>
6+
7+
<script lang="ts">
8+
export default {
9+
name: 'ButtonGrid',
10+
}
11+
</script>
12+
13+
<style lang="scss" scoped>
14+
.button-grid {
15+
display: flex;
16+
flex-wrap: wrap;
17+
gap: 0.6em;
18+
}
19+
</style>

‎demo/src/components/Layout/DialogLayout.vue

Lines changed: 25 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,45 +1,58 @@
11
<template>
2-
<div
3-
grid="inline gap-3 auto-cols-auto flow-col"
4-
>
2+
<ButtonGrid>
53
<DialogStateWrapper
64
v-slot="{model, input}"
75
label="Base"
86
>
9-
<BaseDialog :model-value="model" @update:model-value="input" />
7+
<BaseDialog
8+
:model-value="model"
9+
lorem
10+
@update:model-value="input"
11+
/>
1012
</DialogStateWrapper>
1113

1214
<DialogStateWrapper
1315
v-slot="{model, input}"
1416
label="Styled"
1517
>
16-
<StyledDialog :model-value="model" @update:model-value="input" />
18+
<StyledDialog
19+
:model-value="model"
20+
@update:model-value="input"
21+
/>
1722
</DialogStateWrapper>
1823

1924
<DialogStateWrapper
2025
v-slot="{model, input}"
2126
label="Scroll"
2227
>
23-
<ScrollDialog :model-value="model" @update:model-value="input" />
28+
<ScrollDialog
29+
:model-value="model"
30+
@update:model-value="input"
31+
/>
2432
</DialogStateWrapper>
25-
</div>
33+
</ButtonGrid>
2634
</template>
2735

2836
<script lang="ts">
37+
import { defineAsyncComponent, defineComponent } from 'vue'
38+
2939
import DialogStateWrapper from '@/components/Dialog/DialogStateWrapper.vue'
30-
import BaseDialog from '@/components/Dialogs/BaseDialog/BaseDialog.vue'
31-
import StyledDialog from '@/components/Dialogs/StyledDialog/StyledDialog.vue'
32-
import ScrollDialog from '@/components/Dialogs/ScrollDialog/ScrollDialog.vue'
40+
import ButtonGrid from '@/components/Layout/ButtonGrid.vue'
41+
42+
const BaseDialog = defineAsyncComponent(() => import('@/components/Dialogs/BaseDialog/BaseDialog.vue'))
43+
const StyledDialog = defineAsyncComponent(() => import('@/components/Dialogs/StyledDialog/StyledDialog.vue'))
44+
const ScrollDialog = defineAsyncComponent(() => import('@/components/Dialogs/ScrollDialog/ScrollDialog.vue'))
3345
34-
export default {
46+
export default defineComponent({
3547
name: 'DialogLayout',
3648
components: {
3749
DialogStateWrapper,
50+
ButtonGrid,
3851
BaseDialog,
3952
StyledDialog,
4053
ScrollDialog,
4154
},
4255
4356
setup() {},
44-
}
57+
})
4558
</script>

‎demo/src/components/Layout/ProgrammaticalDialogLayout.vue

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
<template>
2+
<ButtonGrid>
3+
<Btn @click="onOpenProfilePhotoDialog">
4+
Profile Photo (Programmatical, Async)
5+
</Btn>
6+
7+
<Btn @click="onOpenScrollDialog">
8+
Scroll Dialog (Programmatical)
9+
</Btn>
10+
</ButtonGrid>
11+
</template>
12+
13+
<script lang="ts">
14+
import { defineAsyncComponent, defineComponent, inject } from 'vue'
15+
import { DialogMethodsKey } from 'plugin'
16+
17+
import Btn from '@/components/UI/Btn/Btn.vue'
18+
import ScrollDialog from '@/components/Dialogs/ScrollDialog/ScrollDialog.vue'
19+
20+
import ButtonGrid from '@/components/Layout/ButtonGrid.vue'
21+
22+
const ProfilePhotoDialog = defineAsyncComponent(() => import('@/components/Dialogs/ProfilePhotoDialog/ProfilePhotoDialog.vue'))
23+
24+
export default defineComponent({
25+
name: 'ProgrammaticalDialogLayout',
26+
components: {
27+
Btn,
28+
ButtonGrid,
29+
},
30+
31+
setup() {
32+
const $dialog = inject(DialogMethodsKey)
33+
34+
const onOpenProfilePhotoDialog = () => {
35+
$dialog?.add({
36+
component: ProfilePhotoDialog,
37+
})
38+
}
39+
40+
const onOpenScrollDialog = () => {
41+
$dialog?.add({
42+
component: ScrollDialog,
43+
})
44+
}
45+
46+
return {
47+
onOpenProfilePhotoDialog,
48+
onOpenScrollDialog,
49+
}
50+
},
51+
})
52+
</script>

0 commit comments

Comments
 (0)