refactor(demo): refactor dialogs wrapper

- make single data wrapper using scoped slot

Author: MichaelGitArt

demo/src/components/Dialogs/StyledDialog/StyledDialogWrapper.vue renamed to demo/src/components/Dialog/DialogStateWrapper.vue

@@ -1,36 +1,40 @@
 <template>
   <div>
-    <StyledDialog v-model="model" />
+    <slot :model="model" :input="onInput" />
 
-    <Btn @click="open">
-      Styled
+    <Btn @click="onInput(true)">
+      {{ label }}
     </Btn>
   </div>
 </template>
 
 <script lang="ts">
 import { ref } from 'vue'
-
 import Btn from '@/components/UI/Btn/Btn.vue'
-import StyledDialog from './StyledDialog.vue'
 
 export default {
-  name: 'StyledDialogWrapper',
+  name: 'DialogStateWrapper',
   components: {
     Btn,
-    StyledDialog,
+  },
+
+  props: {
+    label: {
+      type: String,
+      required: true,
+    },
   },
 
   setup() {
     const model = ref(false)
 
-    const open = () => {
-      model.value = true
+    const onInput = (value: boolean) => {
+      model.value = value
     }
 
     return {
       model,
-      open,
+      onInput,
     }
   },
 }

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

@@ -44,6 +44,8 @@ export default defineComponent({
     },
   },
 
+  emits: ['update:modelValue'],
+
   setup(props, { emit }) {
     const value = useModelWrapper(props, emit)
 

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

@@ -1,22 +1,35 @@
 <template>
   <div class="flex wrap">
-    <BaseDialogWrapper class="mr-3" />
-    <StyledDialogWrapper />
+    <DialogStateWrapper
+      v-slot="{model, input}"
+      label="Base"
+      class="mr-3"
+    >
+      <BaseDialog :model-value="model" @update:model-value="input" />
+    </DialogStateWrapper>
+
+    <DialogStateWrapper
+      v-slot="{model, input}"
+      label="Styled"
+    >
+      <StyledDialog :model-value="model" @update:model-value="input" />
+    </DialogStateWrapper>
   </div>
 </template>
 
 <script lang="ts">
-import BaseDialogWrapper from '@/components/Dialogs/BaseDialog/BaseDialogWrapper.vue'
-import StyledDialogWrapper from '@/components/Dialogs/StyledDialog/StyledDialogWrapper.vue'
+import DialogStateWrapper from '@/components/Dialog/DialogStateWrapper.vue'
+import BaseDialog from '@/components/Dialogs/BaseDialog/BaseDialog.vue'
+import StyledDialog from '@/components/Dialogs/StyledDialog/StyledDialog.vue'
 
 export default {
   name: 'DialogLayout',
   components: {
-    BaseDialogWrapper,
-    StyledDialogWrapper,
+    DialogStateWrapper,
+    BaseDialog,
+    StyledDialog,
   },
 
-  setup() {
-  },
+  setup() {},
 }
 </script>