feat: upgrade demo

Author: MichaelGitArt

demo/src/App.vue

@@ -1,6 +1,41 @@
 <template>
-  <div class="app p-3">
-    <DialogLayout />
+  <div
+    class="app"
+    p="x-5 y-12"
+    gradient="to-r from-purple-400 via-pink-500 to-red-500"
+  >
+    <div
+      class="container"
+      bg="white"
+      p="y-8 x-6"
+      m="x-auto"
+      border="rounded"
+    >
+      <div
+        class="flex items-end"
+        m="b-8"
+      >
+        <h1
+          m="r-4"
+        >
+          Vue Dialog
+        </h1>
+
+        <a
+          m="r-2"
+          href="https://www.npmjs.com/package/gitart-vue-dialog"
+          target="_blank"
+        >
+          npm
+        </a>
+
+        <a href="https://github.com/MichaelGitArt/gitart-vue-dialog" target="_blank">
+          github
+        </a>
+      </div>
+
+      <DialogLayout />
+    </div>
   </div>
 </template>
 

demo/src/components/Dialog/DialogToolbar.vue

@@ -1,14 +1,22 @@
 <template>
   <div
-    class="flex justify-between items-center"
+    class="flex"
+    justify="between"
+    items="center"
     p="y-3 x-5"
-    shadow="lg"
+    :shadow="shadow ? 'lg' : ''"
   >
     <slot />
 
     <div
-      class="w-8 h-8 flex items-center justify-center cursor-pointer"
+      class="flex transition"
+      cursor="pointer"
+      h="8"
+      w="8"
+      justify="center"
+      items="center"
       text="red-500"
+      border="rounded-full"
       bg="gray-200 hover:gray-300"
       p="a-2"
 
@@ -25,6 +33,13 @@ import { defineComponent } from 'vue'
 export default defineComponent({
   name: 'DialogToolbar',
 
+  props: {
+    shadow: {
+      type: Boolean,
+      default: true,
+    },
+  },
+
   emits: ['close'],
 
   setup(_, { emit }) {

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

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

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

@@ -2,7 +2,7 @@
   <div>
     <BaseDialog v-model="model" />
     <Btn @click="open">
-      BaseDialog
+      Base
     </Btn>
   </div>
 </template>

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

@@ -8,7 +8,7 @@
       border="rounded"
     >
       <DialogToolbar @close="onClose">
-        <h4 class="text-lg font-medium">
+        <h4>
           Styled Dialog
         </h4>
       </DialogToolbar>

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

@@ -3,7 +3,7 @@
     <StyledDialog v-model="model" />
 
     <Btn @click="open">
-      StyledDialog
+      Styled
     </Btn>
   </div>
 </template>

demo/src/scss/main.scss

@@ -1 +1 @@
-@import 'plugin-css'
+@import 'plugin-css';

demo/src/scss/plugin-css-placeholder.css

@@ -5,11 +5,11 @@ import WindiCSS from 'vite-plugin-windicss'
 
 export default ({ mode }: { mode: 'production'| 'development' }) => {
   const dialogPlugin = mode === 'development'
-    ? path.resolve(__dirname, '../dist/index.js')
+    ? path.resolve(__dirname, '../src/index.ts')
     : 'gitart-vue-dialog'
 
   const dialogPluginCss = mode === 'development'
-    ? path.resolve(__dirname, '../dist/style.css')
+    ? path.resolve(__dirname, './src/scss/plugin-css-placeholder.css')
     : 'gitart-vue-dialog/dist/style.css'
 
   return defineConfig({

demo/vite.config.ts

@@ -1,5 +1,6 @@
 // windi.config.js
 import { defineConfig } from 'windicss/helpers'
+import plugin from 'windicss/plugin'
 
 export default defineConfig({
   attributify: true,
@@ -9,4 +10,37 @@ export default defineConfig({
       '.git/**/*',
     ],
   },
+
+  plugins: [
+    plugin(({ addBase, theme }) => {
+      addBase({
+        'h1': {
+          fontSize: theme('fontSize.3xl'),
+          fontWeight: theme('fontWeight.semibold'),
+        },
+        'h2': {
+          fontSize: theme('fontSize.2xl'),
+          fontWeight: theme('fontWeight.semibold'),
+        },
+        'h3': {
+          fontSize: theme('fontSize.xl'),
+          fontWeight: theme('fontWeight.semibold'),
+        },
+        'h4': {
+          fontSize: theme('fontSize.lg'),
+          fontWeight: theme('fontWeight.medium'),
+        },
+        'h5': {
+          fontSize: theme('fontSize.md'),
+          fontWeight: theme('fontWeight.medium'),
+        },
+        'a': {
+          textDecoration: 'underline',
+        },
+        'a:hover': {
+          textDecoration: 'none',
+        },
+      })
+    }),
+  ],
 })