feat(demo): upgrade to [email protected]

Author: MichaelGitArt

demo/package.json

@@ -8,7 +8,7 @@
   "license": "MIT",
   "dependencies": {
     "@vueuse/core": "^5.2.0",
-    "gitart-vue-dialog": "0.2.0-alpha.4",
+    "gitart-vue-dialog": "0.2.0",
     "vue": "3.2.4"
   },
   "devDependencies": {

demo/src/App.vue

@@ -59,6 +59,7 @@ export default defineComponent({
 :root {
   --g-dialog-content-bg: #f9fafb;
   --g-dialog-content-border-radius: 6px;
+  --g-dialog-overlay-bg: rgba(33, 33, 33, 0.55);
 }
 
 .app {

demo/src/components/Dialogs/FullscreenDialog/FullscreenDialog.vue

@@ -2,9 +2,9 @@
   <GDialog
     v-model="value"
     fullscreen
+    transition="custom-slide-up-transition"
   >
     <div
-      bg="gray-50"
       min-h="full"
     >
       <DialogToolbar @close="onClose">
@@ -77,3 +77,18 @@ export default defineComponent({
   },
 })
 </script>
+
+<style lang="scss">
+.custom-slide-up-transition {
+  opacity: 0;
+
+  &-enter-from {
+    transform: translate(0, 40%);
+    opacity: 0;
+  }
+
+  &-leave-to {
+    opacity: 0;
+  }
+}
+</style>

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

@@ -2,30 +2,24 @@
   <GDialog
     v-model="value"
     max-width="400"
-    height="600"
+    height="600px"
     scrollable
   >
+    <DialogToolbar @close="onClose">
+      <h4>
+        Scroll Dialog
+      </h4>
+    </DialogToolbar>
+
     <div
-      flex="~ col"
-      bg="gray-50"
-      border="rounded"
+      p="x-5 y-4"
+      overflow="auto"
     >
-      <DialogToolbar @close="onClose">
-        <h4>
-          Scroll Dialog
-        </h4>
-      </DialogToolbar>
-
-      <div
-        p="x-5 y-4"
-        overflow="auto"
-      >
-        <p v-for="item in 8" :key="item">
-          Lorem, ipsum dolor sit amet consectetur adipisicing elit. Totam quisquam iste assumenda
-          voluptates optio dolorum facere, corrupti adipisci ex possimus,
-          quis sunt. Quis dolorum voluptatibus ab quasi, nemo rem? Culpa!
-        </p>
-      </div>
+      <p v-for="item in 8" :key="item">
+        Lorem, ipsum dolor sit amet consectetur adipisicing elit. Totam quisquam iste assumenda
+        voluptates optio dolorum facere, corrupti adipisci ex possimus,
+        quis sunt. Quis dolorum voluptatibus ab quasi, nemo rem? Culpa!
+      </p>
     </div>
   </GDialog>
 </template>

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

@@ -1,23 +1,20 @@
 <template>
   <GDialog
     v-model="value"
+    transition="custom-rotate-transition"
+    overlay-background="rgba(143, 108, 249, 0.4)"
     :max-width="400"
   >
-    <div
-      bg="gray-50"
-      border="rounded"
-    >
-      <DialogToolbar @close="onClose">
-        <h4>
-          Styled Dialog
-        </h4>
-      </DialogToolbar>
-
-      <div p="x-5 y-4">
-        <p>
-          Some content
-        </p>
-      </div>
+    <DialogToolbar @close="onClose">
+      <h4>
+        Styled Dialog
+      </h4>
+    </DialogToolbar>
+
+    <div p="x-5 y-4">
+      <p>
+        Some content
+      </p>
     </div>
   </GDialog>
 </template>
@@ -59,3 +56,22 @@ export default defineComponent({
   },
 })
 </script>
+
+<style lang="scss" >
+.custom-rotate-transition {
+  &-enter-active,
+  &-leave-active {
+    transition-timing-function: linear;
+  }
+
+  &-enter-from {
+    transform: translate(0, 30px) rotate(12deg);
+    opacity: 0;
+  }
+
+  &-leave-to {
+    transform: translate(0, 30px) rotate(4deg);
+    opacity: 0;
+  }
+}
+</style>

demo/src/components/Interface/TheFooter.vue

@@ -6,7 +6,7 @@
     text="xs gray-400"
   >
     <span>
-      [email protected]-alpha.4
+      [email protected]
     </span>
 
     <span m="l-auto">

demo/yarn.lock

@@ -479,10 +479,10 @@ get-intrinsic@^1.0.2:
     has "^1.0.3"
     has-symbols "^1.0.1"
 
-[email protected]-alpha.4:
-  version "0.2.0-alpha.4"
-  resolved "https://registry.yarnpkg.com/gitart-vue-dialog/-/gitart-vue-dialog-0.2.0-alpha.4.tgz#6bb5cf0361fb4f13ae0edf9852fe5d5e836e3b8f"
-  integrity sha512-HOoeyS2icve0bnBFTkMBocdpUagkVSEXDZ7KzWpeewFWgzzn7yP+zOhZAayfOVSBCBRkaPQcjjYAdNywe7EKfg==
+[email protected]:
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/gitart-vue-dialog/-/gitart-vue-dialog-0.2.0.tgz#1775f2fedb715587e9c00ca5b8ba4a55d94c9c18"
+  integrity sha512-F9D5VYESUa52xbDIz42GmWBbgruh86/GDmjBnrQb3zmLAH1osLbi/JfvCAvi4V39lBtRWbk1zc1XNRiC+5uB2Q==
 
 glob-parent@^5.1.2:
   version "5.1.2"