feat: upgrade

Author: MichaelGitArt

package.json

@@ -6,7 +6,9 @@
     "build": "vue-tsc --noEmit && vite build",
     "serve": "vite preview"
   },
-  "files": ["dist"],
+  "files": [
+    "dist"
+  ],
   "main": "./dist/gitart-vue-dialog.umd.js",
   "module": "./dist/gitart-vue-dialog.es.js",
   "exports": {
@@ -16,6 +18,7 @@
     }
   },
   "dependencies": {
+    "@vueuse/core": "^5.1.3",
     "body-scroll-lock": "^4.0.0-beta.0",
     "vue": "^3.0.5"
   },

src/gitart-vue-dialog/components/GDialog.vue

@@ -3,7 +3,8 @@
     <Teleport to="body">
       <GDialogOverlay
         @click="onClickOutside"
-        :value="isActive"
+        :active="isActive"
+        :deactivating="deactivating"
         :activeZIndex="activeZIndex"
       />
 
@@ -91,7 +92,7 @@ export default defineComponent({
       }
     };
 
-    const { activatedOnce, active: isActive } = useLazyActivation(
+    const { activatedOnce, active: isActive, deactivating } = useLazyActivation(
       computed(() => props.modelValue)
     );
 
@@ -119,6 +120,7 @@ export default defineComponent({
       activatedOnce,
       activeZIndex,
       isActive,
+      deactivating,
       classes,
       styles,
       frame,

src/gitart-vue-dialog/components/GDialogOverlay.vue

@@ -1,6 +1,6 @@
 <template>
   <Transition name="fade">
-    <template v-if="value">
+    <template v-if="active">
       <div :class="classes" :style="styles" @click="onClick" />
     </template>
   </Transition>
@@ -12,7 +12,12 @@ import { computed, defineComponent } from '@vue/runtime-core';
 export default defineComponent({
   name: 'GDialogOverlay',
   props: {
-    value: {
+    active: {
+      type: Boolean,
+      required: true,
+    },
+
+    deactivating: {
       type: Boolean,
       required: true,
     },
@@ -33,7 +38,7 @@ export default defineComponent({
     const classes = computed(() => [
       'q-dialog-overlay',
       {
-        'q-dialog-overlay--active': props.value,
+        'q-dialog-overlay--active': props.active && !props.deactivating,
       },
     ]);
 
@@ -76,7 +81,7 @@ export default defineComponent({
   }
 
   &-leave-active {
-    transition: all 20.2s cubic-bezier(1, 0.5, 0.8, 1);
+    transition: all 0.2s cubic-bezier(1, 0.5, 0.8, 1);
   }
 
   &-enter-from,

src/gitart-vue-dialog/composable/lazyActivation.js renamed to src/gitart-vue-dialog/composable/lazyActivation.ts

@@ -1,12 +1,25 @@
+import { Ref } from 'vue';
+
 import { nextTick, ref, watch } from 'vue';
 
-export const useLazyActivation = baseState => {
+export const useLazyActivation = (baseState: Ref<boolean>) => {
   const activatedOnce = ref(baseState.value);
   const active = ref(baseState.value);
+  const deactivating = ref(false)
 
   watch(
     () => baseState.value,
     value => {
+      if(!value){
+        deactivating.value = true
+        nextTick(() => {
+          active.value = value;
+          deactivating.value = false
+        });
+
+        return;
+      }
+      
       if (activatedOnce.value) {
         active.value = value;
         return;
@@ -22,5 +35,6 @@ export const useLazyActivation = baseState => {
   return {
     activatedOnce,
     active,
+    deactivating,
   };
 };

src/gitart-vue-dialog/composable/stackable.ts

@@ -2,7 +2,9 @@
 import { Ref, ComputedRef } from 'vue';
 
 import { computed } from 'vue';
-import { getZIndex } from '../helper';
+
+// helpers
+import { getZIndex } from '@/gitart-vue-dialog/helper';
 
 interface IUseStackableParams {
   activeElSelector: string;

src/gitart-vue-dialog/composable/widthStyle.js

@@ -0,0 +1,29 @@
+import { computed } from 'vue';
+
+// helpers
+import { convertToUnit } from '@/gitart-vue-dialog/helper';
+
+export interface WidthProps {
+  maxWidth?: number | string;
+  width?: number | string;
+}
+
+export const useWidthStyle = (props: WidthProps) => {
+  const widthStyles = computed(() => {
+    return {
+      maxWidth:
+        props.maxWidth === 'none'
+          ? undefined
+          : convertToUnit(props.maxWidth),
+
+      width:
+        props.width === 'auto'
+          ? undefined
+          : convertToUnit(props.width),
+    };
+  });
+
+  return {
+    widthStyles,
+  };
+};

src/gitart-vue-dialog/composable/widthStyle.ts

@@ -27,7 +27,7 @@ const windowWidthWithoutScrollbar = () => {
  * @param {string} unit
  * @returns {string | undefined}
  */
-const convertToUnit = (str, unit = 'px') => {
+export const convertToUnit = (str, unit = 'px') => {
   if (str == null || str === '') {
     return undefined;
   } else if (isNaN(+str)) {

src/gitart-vue-dialog/helper/index.js

@@ -114,6 +114,21 @@
   resolved "https://registry.yarnpkg.com/@vue/shared/-/shared-3.1.4.tgz#c14c461ec42ea2c1556e86f60b0354341d91adc3"
   integrity sha512-6O45kZAmkLvzGLToBxEz4lR2W6kXohCtebV2UxjH9GXjd8X9AhEn68FN9eNanFtWNzvgw1hqd6HkPRVQalqf7Q==
 
+"@vueuse/core@^5.1.3":
+  version "5.1.3"
+  resolved "https://registry.yarnpkg.com/@vueuse/core/-/core-5.1.3.tgz#a9edda9202513423a27fbac896dd7bc918d1ac6c"
+  integrity sha512-5CmF/epSo9L1Obz3A37UJOpDdno0BDw46zyXq0DHgvzEwL6gPb9GgJZcy4Hm5YSjQYIeQPo35uO8qsZyIjEZog==
+  dependencies:
+    "@vueuse/shared" "5.1.3"
+    vue-demi "*"
+
+"@vueuse/[email protected]":
+  version "5.1.3"
+  resolved "https://registry.yarnpkg.com/@vueuse/shared/-/shared-5.1.3.tgz#11faa3a1a2b4d3dc41eac7a825900a8894efe95e"
+  integrity sha512-p8n/69QMtSsLN5rri9c3sN5QJJXWA7cm9chgo3DowTBRYLBni1I9kGY2nz299Tur6XEFuf+63E5TvMTJVJeHHw==
+  dependencies:
+    vue-demi "*"
+
 anymatch@~3.1.2:
   version "3.1.2"
   resolved "https://registry.yarnpkg.com/anymatch/-/anymatch-3.1.2.tgz#c0557c096af32f106198f4f4e2a383537e378716"
@@ -708,6 +723,11 @@ vite@^2.4.0:
   optionalDependencies:
     fsevents "~2.3.2"
 
+vue-demi@*:
+  version "0.10.1"
+  resolved "https://registry.yarnpkg.com/vue-demi/-/vue-demi-0.10.1.tgz#229b81395510f02f4ee255344557a12cc0120930"
+  integrity sha512-L6Oi+BvmMv6YXvqv5rJNCFHEKSVu7llpWWJczqmAQYOdmPPw5PNYoz1KKS//Fxhi+4QP64dsPjtmvnYGo1jemA==
+
 vue-tsc@^0.0.24:
   version "0.0.24"
   resolved "https://registry.yarnpkg.com/vue-tsc/-/vue-tsc-0.0.24.tgz#0cd90db679f53ea1694254b8663fdb3d624a0872"