feat: upgrade demo

Author: MichaelGitArt

demo/package.json

@@ -1,19 +1,20 @@
 {
-  "name": "my-vue-app",
-  "version": "0.0.0",
+  "name": "gitart-vue-dialog-demo",
+  "version": "0.0.1",
   "scripts": {
     "dev": "vite",
     "build": "vue-tsc --noEmit && vite build"
   },
   "dependencies": {
-    "bootstrap-reboot": "^4.5.6",
     "vue": "^3.0.5"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^1.3.0",
     "@vue/compiler-sfc": "^3.0.5",
     "typescript": "^4.3.2",
     "vite": "^2.4.4",
-    "vue-tsc": "^0.2.2"
+    "vite-plugin-windicss": "^1.2.7",
+    "vue-tsc": "^0.2.2",
+    "windicss": "^3.1.6"
   }
 }

demo/src/App.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="app">
+  <div class="app p-3">
     <DialogLayout />
   </div>
 </template>

demo/src/components/Dialog/DialogCard.vue

@@ -0,0 +1,41 @@
+<template>
+  <div
+    class="flex justify-between items-center"
+    p="y-3 x-5"
+    shadow="lg"
+  >
+    <slot />
+
+    <div
+      class="w-8 h-8 flex items-center justify-center cursor-pointer"
+      text="red-500"
+      bg="gray-200 hover:gray-300"
+      p="a-2"
+
+      @click="onClose"
+    >
+      X
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue'
+
+export default defineComponent({
+  name: 'DialogToolbar',
+
+  emits: ['close'],
+
+  setup(_, { emit }) {
+    const onClose = () => {
+      emit('close')
+    }
+
+    return {
+      onClose,
+    }
+
+  },
+})
+</script>

demo/src/components/Dialog/DialogToolbar.vue

@@ -4,9 +4,9 @@
     :max-width="400"
     :depressed="depressed"
   >
-    <p>
+    <h4 class="mb-3 text-lg font-medium">
       Base component
-    </p>
+    </h4>
 
     <BooleanSwitch
       v-model="depressed"

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

@@ -1,18 +1,23 @@
 <template>
-  <BaseDialog v-model="model" />
-  <button @click="open">
-    BaseDialog
-  </button>
+  <div>
+    <BaseDialog v-model="model" />
+    <Btn @click="open">
+      BaseDialog
+    </Btn>
+  </div>
 </template>
 
 <script lang="ts">
 import { ref } from 'vue'
+import Btn from '@/components/UI/Btn/Btn.vue'
+
 import BaseDialog from './BaseDialog.vue'
 
 export default {
   name: 'BaseDialogWrapper',
   components: {
     BaseDialog,
+    Btn,
   },
 
   setup() {

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

@@ -3,11 +3,22 @@
     v-model="value"
     :max-width="400"
   >
-    <DialogCard>
-      <p>
-        StyledDialogWrapper
-      </p>
-    </DialogCard>
+    <div
+      bg="gray-50"
+      border="rounded"
+    >
+      <DialogToolbar @close="onClose">
+        <h4 class="text-lg font-medium">
+          Styled Dialog
+        </h4>
+      </DialogToolbar>
+
+      <div p="x-5 y-4">
+        <p>
+          StyledDialogWrapper
+        </p>
+      </div>
+    </div>
   </GDialog>
 </template>
 
@@ -17,13 +28,13 @@ import { GDialog } from 'plugin/index.js'
 
 import { useModelWrapper } from '@/composables/modelWrapper'
 
-import DialogCard from '@/components/Dialog/DialogCard.vue'
+import DialogToolbar from '@/components/Dialog/DialogToolbar.vue'
 
 export default defineComponent({
   name: 'BaseDialog',
   components: {
     GDialog,
-    DialogCard,
+    DialogToolbar,
   },
 
   props: {
@@ -36,8 +47,13 @@ export default defineComponent({
   setup(props, { emit }) {
     const value = useModelWrapper(props, emit)
 
+    const onClose = () => {
+      value.value = false
+    }
+
     return {
       value,
+      onClose,
     }
   },
 })

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

@@ -1,18 +1,23 @@
 <template>
-  <StyledDialog v-model="model" />
+  <div>
+    <StyledDialog v-model="model" />
 
-  <button @click="open">
-    StyledDialog
-  </button>
+    <Btn @click="open">
+      StyledDialog
+    </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',
   components: {
+    Btn,
     StyledDialog,
   },
 

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

@@ -1,14 +1,11 @@
 <template>
-  <div>
-    <BaseDialogWrapper />
-  </div>
-
-  <div>
+  <div class="flex wrap">
+    <BaseDialogWrapper class="mr-3" />
     <StyledDialogWrapper />
   </div>
 </template>
 
-<script>
+<script lang="ts">
 import BaseDialogWrapper from '@/components/Dialogs/BaseDialog/BaseDialogWrapper.vue'
 import StyledDialogWrapper from '@/components/Dialogs/StyledDialog/StyledDialogWrapper.vue'
 

demo/src/components/Layout/DialogLayout.vue

@@ -0,0 +1,23 @@
+<template>
+  <button
+    bg="green-600 hover:green-500 focus:green-500"
+    text="sm white"
+    font="mono light"
+    p="y-2 x-4"
+    border="3 rounded green-600 hover:green-500 focus:green-600"
+    outline="none"
+    class="focus:outline-none"
+
+    v-bind="$attrs"
+  >
+    <slot />
+  </button>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue'
+
+export default defineComponent({
+  name: 'Btn',
+})
+</script>