feat: remove absolute path alias. add disabling scroll

Author: MichaelGitArt

src/components/GDialog.vue

@@ -30,13 +30,17 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, computed, ref } from 'vue'
+import {
+  defineComponent, computed, ref, watch,
+} from 'vue'
 
-import { useStackable } from '@/composable/stackable'
-import { useLazyActivation } from '@/composable/lazyActivation'
+import { useStackable } from '../composable/stackable'
+import { useLazyActivation } from '../composable/lazyActivation'
 
-import GDialogOverlay from '@/components/GDialogOverlay.vue'
-import GDialogContent from '@/components/GDialogContent.vue'
+import { disableScroll, enableScroll } from '../helper/scroll.helper'
+
+import GDialogOverlay from './GDialogOverlay.vue'
+import GDialogContent from './GDialogContent.vue'
 
 export default defineComponent({
   name: 'GDialog',
@@ -97,6 +101,14 @@ export default defineComponent({
       type: Boolean,
       default: false,
     },
+
+    /**
+     * hide scrollbar after opening the dialog
+     */
+    hideScrollbar: {
+      type: Boolean,
+      default: false,
+    },
   },
 
   emits: ['update:modelValue'],
@@ -131,6 +143,14 @@ export default defineComponent({
       zIndex: activeZIndex.value,
     }))
 
+    watch(isActive, (active) => {
+      if(active) {
+        disableScroll(props.hideScrollbar)
+      } else {
+        enableScroll()
+      }
+    })
+
     return {
       onClickOutside,
       activatedOnce,

src/components/GDialogContent.vue

@@ -6,7 +6,7 @@
 
 <script lang="ts">
 import { computed, defineComponent } from 'vue'
-import { useWidthStyle } from '@/composable/widthStyle'
+import { useWidthStyle } from '../composable/widthStyle'
 
 export default defineComponent({
   name: 'GDialogContent',

src/components/GDialogOverlay.vue

@@ -11,7 +11,9 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent } from 'vue'
+import {
+  computed, defineComponent,
+} from 'vue'
 
 export default defineComponent({
   name: 'GDialogOverlay',
@@ -38,7 +40,6 @@ export default defineComponent({
     const styles = computed(() => ({
       zIndex: props.activeZIndex - 1,
     }))
-
     const classes = computed(() => [
       'q-dialog-overlay',
       {

src/composable/stackable.ts

@@ -3,7 +3,7 @@ import {
 } from 'vue'
 
 // helpers
-import { getZIndex } from '@/helper'
+import { getZIndex } from '../helper'
 
 interface IUseStackableParams {
   activeElSelector: string

src/composable/widthStyle.ts

@@ -1,7 +1,7 @@
 import { computed } from 'vue'
 
 // helpers
-import { convertToUnit } from '@/helper'
+import { convertToUnit } from '../helper'
 
 export interface WidthProps {
   maxWidth?: number | string

src/helper/scroll.helper.ts

@@ -14,29 +14,19 @@ export const getScrollbarWidth = () => {
   return scrollbarWidth
 }
 
-/**
- *
- * @param {boolean} hideScroll
- */
-const disableScroll = (hideScroll = false) => {
-  if (hideScroll) {
+export const disableScroll = (hideScrollbar = false) => {
+  if (hideScrollbar) {
+    disableBodyScroll(document.body)
+  } else {
     const scrollWidth = getScrollbarWidth()
     disableBodyScroll(document.body)
     if (scrollWidth > 0) {
       document.body.style.paddingRight = scrollWidth + 'px'
     }
-  } else {
-    disableBodyScroll(document.body)
   }
 }
 
-const enableScroll = () => {
+export const enableScroll = () => {
   enableBodyScroll(document.body)
   document.body.style.paddingRight = '0'
 }
-
-export default {
-  getScrollbarWidth,
-  disableScroll,
-  enableScroll,
-}

src/index.ts

@@ -1,4 +1,4 @@
-import GDialogComponent from '@/components/GDialog.vue'
+import GDialogComponent from './components/GDialog.vue'
 
 export const GDialog = GDialogComponent
 export default {

tsconfig.json

@@ -11,9 +11,6 @@
     "resolveJsonModule": true,
     "esModuleInterop": true,
     "lib": ["esnext", "dom"],
-    "paths": {
-      "@/*": ["./src/*"],
-    }
   },
   "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"]
 }

vite.config.ts

@@ -11,11 +11,6 @@ export default defineConfig({
       allow: ['..'],
     },
   },
-  resolve: {
-    alias: {
-      '@': resolvePath('/src'),
-    },
-  },
   build: {
     lib: {
       entry: resolvePath('src/index.ts'),