refactor: upgrade demo

Author: MichaelGitArt

src/App.vue

@@ -1,87 +1,17 @@
 <template>
   <div class="app">
-    <GDialog v-model="dialogState" max-width="400">
-      <div class="text-box">
-        <div>
-          Header
-        </div>
-        <p v-for="i in 6" :key="i">
-          Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptas porro
-          aliquid sunt expedita possimus ipsam nihil magni eos quam beatae
-          repellat neque totam quidem reiciendis, incidunt commodi sequi, minus
-          accusantium?
-        </p>
-        <div>
-          Footer
-        </div>
-      </div>
-    </GDialog>
-
-    <GDialog
-      v-model="dialogState2"
-      max-width="400"
-      scrollable
-    >
-      <div class="text-box scrollable">
-        <div>
-          Header
-        </div>
-        <div class="scrollable-content">
-          <p v-for="i in 6" :key="i">
-            Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptas
-            porro aliquid sunt expedita possimus ipsam nihil magni eos quam beatae
-            repellat neque totam quidem reiciendis, incidunt commodi sequi, minus
-            accusantium?
-          </p>
-        </div>
-        <div>
-          Footer
-        </div>
-      </div>
-    </GDialog>
-
-    <button @click="onClick">
-      Simple
-    </button>
-    <hr>
-    <button @click="dialogState2 = true">
-      Scrollable
-    </button>
-    <hr>
-    <button @click="onOpenBoth">
-      both
-    </button>
+    <DialogLayout />
   </div>
 </template>
 
 <script lang="ts">
 import { defineComponent } from 'vue'
-
-import QLib from '@/gitart-vue-dialog/index'
+import DialogLayout from './components/Layout/DialogLayout.vue'
 
 export default defineComponent({
   name: 'App',
   components: {
-    GDialog: QLib.GDialog,
-  },
-
-  data: () => ({
-    dialogState: false,
-    dialogState2: false,
-  }),
-
-  methods: {
-    onClick() {
-      console.log('set true')
-      this.dialogState = true
-    },
-    onOpenBoth() {
-      console.log('set true')
-      this.dialogState = true
-      setTimeout(() => {
-        this.dialogState2 = true
-      }, 2200)
-    },
+    DialogLayout,
   },
 })
 </script>
@@ -90,22 +20,4 @@ export default defineComponent({
 .app {
   height: 2000px;
 }
-
-.text-box {
-  background: rgb(248, 248, 248);
-  box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
-  font-size: 20px;
-  border-radius: 4px;
-}
-
-.scrollable {
-  max-height: 100%;
-  max-width: 100%;
-  display: flex;
-  flex-direction: column;
-}
-
-.scrollable-content {
-  overflow: auto;
-}
 </style>

src/components/Dialog/DialogCard.vue

@@ -0,0 +1,19 @@
+<template>
+  <div class="dialog-card">
+    <slot />
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'DialogCard',
+}
+</script>
+
+<style lang="scss" scoped>
+.dialog-card {
+  background: rgb(248, 248, 248);
+  border-radius: 4px;
+  padding: 20px 30px;
+}
+</style>

src/components/Dialog/DialogToolbar.vue

@@ -0,0 +1,50 @@
+<template>
+  <GDialog
+    v-model="value"
+    :max-width="400"
+    :depressed="depressed"
+  >
+    <p>
+      Base component
+    </p>
+
+    <BooleanSwitch
+      v-model="depressed"
+      label="depressed (without box-shadow)"
+    />
+  </GDialog>
+</template>
+
+<script>
+import { ref } from 'vue'
+import { GDialog } from '@/gitart-vue-dialog'
+
+import { useModelWrapper } from '@/composables/modelWrapper'
+
+import BooleanSwitch from '@/components/PropControls/BooleanSwitch/BooleanSwitch.vue'
+
+export default {
+  name: 'BaseDialog',
+  components: {
+    GDialog,
+    BooleanSwitch,
+  },
+
+  props: {
+    modelValue: {
+      type: Boolean,
+      default: false,
+    },
+  },
+
+  setup(props, { emit }) {
+    const depressed = ref(false)
+    const value = useModelWrapper(props, emit)
+
+    return {
+      depressed,
+      value,
+    }
+  },
+}
+</script>

src/components/Dialogs/BaseDialog/BaseDialog.vue

@@ -0,0 +1,32 @@
+<template>
+  <BaseDialog v-model="model" />
+
+  <button @click="open">
+    BaseDialog
+  </button>
+</template>
+
+<script>
+import { ref } from 'vue'
+import BaseDialog from './BaseDialog.vue'
+
+export default {
+  name: 'BaseDialogWrapper',
+  components: {
+    BaseDialog,
+  },
+
+  setup() {
+    const model = ref(false)
+
+    const open = () => {
+      model.value = true
+    }
+
+    return {
+      model,
+      open,
+    }
+  },
+}
+</script>

src/components/Dialogs/BaseDialog/BaseDialogWrapper.vue

@@ -0,0 +1,43 @@
+<template>
+  <GDialog
+    v-model="value"
+    :max-width="400"
+  >
+    <DialogCard>
+      <p>
+        StyledDialogWrapper
+      </p>
+    </DialogCard>
+  </GDialog>
+</template>
+
+<script>
+import { GDialog } from '@/gitart-vue-dialog'
+
+import { useModelWrapper } from '@/composables/modelWrapper'
+
+import DialogCard from '@/components/Dialog/DialogCard.vue'
+
+export default {
+  name: 'BaseDialog',
+  components: {
+    GDialog,
+    DialogCard,
+  },
+
+  props: {
+    modelValue: {
+      type: Boolean,
+      default: false,
+    },
+  },
+
+  setup(props, { emit }) {
+    const value = useModelWrapper(props, emit)
+
+    return {
+      value,
+    }
+  },
+}
+</script>

src/components/Dialogs/StyledDialog/StyledDialog.vue

@@ -0,0 +1,32 @@
+<template>
+  <StyledDialog v-model="model" />
+
+  <button @click="open">
+    StyledDialog
+  </button>
+</template>
+
+<script>
+import { ref } from 'vue'
+import StyledDialog from './StyledDialog.vue'
+
+export default {
+  name: 'StyledDialogWrapper',
+  components: {
+    StyledDialog,
+  },
+
+  setup() {
+    const model = ref(false)
+
+    const open = () => {
+      model.value = true
+    }
+
+    return {
+      model,
+      open,
+    }
+  },
+}
+</script>

src/components/Dialogs/StyledDialog/StyledDialogWrapper.vue

@@ -0,0 +1,25 @@
+<template>
+  <div>
+    <BaseDialogWrapper />
+  </div>
+
+  <div>
+    <StyledDialogWrapper />
+  </div>
+</template>
+
+<script>
+import BaseDialogWrapper from '@/components/Dialogs/BaseDialog/BaseDialogWrapper.vue'
+import StyledDialogWrapper from '@/components/Dialogs/StyledDialog/StyledDialogWrapper.vue'
+
+export default {
+  name: 'DialogLayout',
+  components: {
+    BaseDialogWrapper,
+    StyledDialogWrapper,
+  },
+
+  setup() {
+  },
+}
+</script>

src/components/Layout/DialogLayout.vue

@@ -0,0 +1,49 @@
+<template>
+  <RadioGroup v-model="value">
+    {{ label }}
+    <Radio
+      :value="true"
+      label="True"
+    />
+
+    <Radio
+      :value="false"
+      label="False"
+    />
+  </RadioGroup>
+</template>
+
+<script lang="ts">
+import { useModelWrapper } from '@/composables/modelWrapper'
+
+import Radio from '@/components/UI/Radio/Radio.vue'
+import RadioGroup from '@/components/UI/RadioGroup/RadioGroup.vue'
+
+export default {
+  name: 'BooleanSwitch',
+  components: {
+    Radio,
+    RadioGroup,
+  },
+
+  props: {
+    modelValue: {
+      type: Boolean,
+      default: false,
+    },
+
+    label: {
+      type: String,
+      default: null,
+    },
+  },
+
+  setup(props, { emit }) {
+    const value = useModelWrapper(props, emit)
+
+    return {
+      value,
+    }
+  },
+}
+</script>

src/components/PropControls/BooleanSwitch/BooleanSwitch.vue

@@ -0,0 +1,14 @@
+import { computed } from 'vue'
+
+interface modelWrapperProps {
+  modelValue: boolean
+}
+
+type modelWrapperEmitter = (event: 'update:modelValue', value: boolean) => void
+
+export function useModelWrapper(props: modelWrapperProps, emit: modelWrapperEmitter) {
+  return computed({
+    get: () => props.modelValue,
+    set: (value) => emit('update:modelValue', value),
+  })
+}