vuetify 3.6.0-alpha.2 → 3.6.0

package/lib/components/VNavigationDrawer/VNavigationDrawer.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"VNavigationDrawer.mjs","names":["VDefaultsProvider","VImg","useSticky","useTouch","useRtl","makeBorderProps","useBorder","useBackgroundColor","makeComponentProps","provideDefaults","makeDelayProps","useDelay","makeDisplayProps","useDisplay","makeElevationProps","useElevation","makeLayoutItemProps","useLayoutItem","useProxiedModel","makeRoundedProps","useRounded","useRouter","useScopeId","useSsrBoot","makeTagProps","makeThemeProps","provideTheme","useToggleScope","computed","nextTick","ref","shallowRef","toRef","Transition","watch","genericComponent","propsFactory","toPhysical","useRender","locations","makeVNavigationDrawerProps","color","String","disableResizeWatcher","Boolean","disableRouteWatcher","expandOnHover","floating","modelValue","type","default","permanent","rail","railWidth","Number","scrim","image","temporary","touchless","width","location","validator","value","includes","sticky","tag","VNavigationDrawer","name","props","emits","val","setup","_ref","attrs","emit","slots","isRtl","themeClasses","borderClasses","backgroundColorClasses","backgroundColorStyles","elevationClasses","displayClasses","mobile","roundedClasses","router","isActive","v","ssrBootStyles","scopeId","rootEl","isHovering","runOpenDelay","runCloseDelay","isTemporary","isSticky","currentRoute","isDragging","dragProgress","dragStyles","position","layoutSize","size","layoutItemStyles","layoutItemScrimStyles","layoutIsReady","id","order","parseInt","elementSize","active","disableTransitions","absolute","isStuck","stickyStyles","scrimColor","scrimStyles","opacity","transition","undefined","VList","bgColor","hasImage","_createVNode","_Fragment","_mergeProps","class","style","alt","cover","height","src","prepend","append","onClick","then"],"sources":["../../../src/components/VNavigationDrawer/VNavigationDrawer.tsx"],"sourcesContent":["// Styles\nimport './VNavigationDrawer.sass'\n\n// Components\nimport { VDefaultsProvider } from '@/components/VDefaultsProvider'\nimport { VImg } from '@/components/VImg'\n\n// Composables\nimport { useSticky } from './sticky'\nimport { useTouch } from './touch'\nimport { useRtl } from '@/composables'\nimport { makeBorderProps, useBorder } from '@/composables/border'\nimport { useBackgroundColor } from '@/composables/color'\nimport { makeComponentProps } from '@/composables/component'\nimport { provideDefaults } from '@/composables/defaults'\nimport { makeDelayProps, useDelay } from '@/composables/delay'\nimport { makeDisplayProps, useDisplay } from '@/composables/display'\nimport { makeElevationProps, useElevation } from '@/composables/elevation'\nimport { makeLayoutItemProps, useLayoutItem } from '@/composables/layout'\nimport { useProxiedModel } from '@/composables/proxiedModel'\nimport { makeRoundedProps, useRounded } from '@/composables/rounded'\nimport { useRouter } from '@/composables/router'\nimport { useScopeId } from '@/composables/scopeId'\nimport { useSsrBoot } from '@/composables/ssrBoot'\nimport { makeTagProps } from '@/composables/tag'\nimport { makeThemeProps, provideTheme } from '@/composables/theme'\nimport { useToggleScope } from '@/composables/toggleScope'\n\n// Utilities\nimport { computed, nextTick, ref, shallowRef, toRef, Transition, watch } from 'vue'\nimport { genericComponent, propsFactory, toPhysical, useRender } from '@/util'\n\n// Types\nimport type { PropType } from 'vue'\n\nexport type VNavigationDrawerImageSlot = {\n  image: string | undefined\n}\n\nexport type VNavigationDrawerSlots = {\n  default: never\n  prepend: never\n  append: never\n  image: VNavigationDrawerImageSlot\n}\n\nconst locations = ['start', 'end', 'left', 'right', 'top', 'bottom'] as const\n\nexport const makeVNavigationDrawerProps = propsFactory({\n  color: String,\n  disableResizeWatcher: Boolean,\n  disableRouteWatcher: Boolean,\n  expandOnHover: Boolean,\n  floating: Boolean,\n  modelValue: {\n    type: Boolean as PropType<boolean | null>,\n    default: null,\n  },\n  permanent: Boolean,\n  rail: {\n    type: Boolean as PropType<boolean | null>,\n    default: null,\n  },\n  railWidth: {\n    type: [Number, String],\n    default: 56,\n  },\n  scrim: {\n    type: [Boolean, String],\n    default: true,\n  },\n  image: String,\n  temporary: Boolean,\n  touchless: Boolean,\n  width: {\n    type: [Number, String],\n    default: 256,\n  },\n  location: {\n    type: String as PropType<typeof locations[number]>,\n    default: 'start',\n    validator: (value: any) => locations.includes(value),\n  },\n  sticky: Boolean,\n\n  ...makeBorderProps(),\n  ...makeComponentProps(),\n  ...makeDelayProps(),\n  ...makeDisplayProps(),\n  ...makeElevationProps(),\n  ...makeLayoutItemProps(),\n  ...makeRoundedProps(),\n  ...makeTagProps({ tag: 'nav' }),\n  ...makeThemeProps(),\n}, 'VNavigationDrawer')\n\nexport const VNavigationDrawer = genericComponent<VNavigationDrawerSlots>()({\n  name: 'VNavigationDrawer',\n\n  props: makeVNavigationDrawerProps(),\n\n  emits: {\n    'update:modelValue': (val: boolean) => true,\n    'update:rail': (val: boolean) => true,\n  },\n\n  setup (props, { attrs, emit, slots }) {\n    const { isRtl } = useRtl()\n    const { themeClasses } = provideTheme(props)\n    const { borderClasses } = useBorder(props)\n    const { backgroundColorClasses, backgroundColorStyles } = useBackgroundColor(toRef(props, 'color'))\n    const { elevationClasses } = useElevation(props)\n    const { displayClasses, mobile } = useDisplay(props)\n    const { roundedClasses } = useRounded(props)\n    const router = useRouter()\n    const isActive = useProxiedModel(props, 'modelValue', null, v => !!v)\n    const { ssrBootStyles } = useSsrBoot()\n    const { scopeId } = useScopeId()\n\n    const rootEl = ref<HTMLElement>()\n    const isHovering = shallowRef(false)\n\n    const { runOpenDelay, runCloseDelay } = useDelay(props, value => {\n      isHovering.value = value\n    })\n\n    const width = computed(() => {\n      return (props.rail && props.expandOnHover && isHovering.value)\n        ? Number(props.width)\n        : Number(props.rail ? props.railWidth : props.width)\n    })\n    const location = computed(() => {\n      return toPhysical(props.location, isRtl.value) as 'left' | 'right' | 'bottom'\n    })\n    const isTemporary = computed(() => !props.permanent && (mobile.value || props.temporary))\n    const isSticky = computed(() =>\n      props.sticky &&\n      !isTemporary.value &&\n      location.value !== 'bottom'\n    )\n\n    useToggleScope(() => props.expandOnHover && props.rail != null, () => {\n      watch(isHovering, val => emit('update:rail', !val))\n    })\n\n    useToggleScope(() => !props.disableResizeWatcher, () => {\n      watch(isTemporary, val => !props.permanent && (nextTick(() => isActive.value = !val)))\n    })\n\n    useToggleScope(() => !props.disableRouteWatcher && !!router, () => {\n      watch(router!.currentRoute, () => isTemporary.value && (isActive.value = false))\n    })\n\n    watch(() => props.permanent, val => {\n      if (val) isActive.value = true\n    })\n\n    if (props.modelValue == null && !isTemporary.value) {\n      isActive.value = props.permanent || !mobile.value\n    }\n\n    const { isDragging, dragProgress, dragStyles } = useTouch({\n      isActive,\n      isTemporary,\n      width,\n      touchless: toRef(props, 'touchless'),\n      position: location,\n    })\n\n    const layoutSize = computed(() => {\n      const size = isTemporary.value ? 0\n        : props.rail && props.expandOnHover ? Number(props.railWidth)\n        : width.value\n\n      return isDragging.value ? size * dragProgress.value : size\n    })\n    const { layoutItemStyles, layoutItemScrimStyles, layoutIsReady } = useLayoutItem({\n      id: props.name,\n      order: computed(() => parseInt(props.order, 10)),\n      position: location,\n      layoutSize,\n      elementSize: width,\n      active: computed(() => isActive.value || isDragging.value),\n      disableTransitions: computed(() => isDragging.value),\n      absolute: computed(() =>\n        // eslint-disable-next-line @typescript-eslint/no-use-before-define\n        props.absolute || (isSticky.value && typeof isStuck.value !== 'string')\n      ),\n    })\n\n    const { isStuck, stickyStyles } = useSticky({ rootEl, isSticky, layoutItemStyles })\n\n    const scrimColor = useBackgroundColor(computed(() => {\n      return typeof props.scrim === 'string' ? props.scrim : null\n    }))\n    const scrimStyles = computed(() => ({\n      ...isDragging.value ? {\n        opacity: dragProgress.value * 0.2,\n        transition: 'none',\n      } : undefined,\n      ...layoutItemScrimStyles.value,\n    }))\n\n    provideDefaults({\n      VList: {\n        bgColor: 'transparent',\n      },\n    })\n\n    useRender(() => {\n      const hasImage = (slots.image || props.image)\n\n      return (\n        <>\n          <props.tag\n            ref={ rootEl }\n            onMouseenter={ runOpenDelay }\n            onMouseleave={ runCloseDelay }\n            class={[\n              'v-navigation-drawer',\n              `v-navigation-drawer--${location.value}`,\n              {\n                'v-navigation-drawer--expand-on-hover': props.expandOnHover,\n                'v-navigation-drawer--floating': props.floating,\n                'v-navigation-drawer--is-hovering': isHovering.value,\n                'v-navigation-drawer--rail': props.rail,\n                'v-navigation-drawer--temporary': isTemporary.value,\n                'v-navigation-drawer--active': isActive.value,\n                'v-navigation-drawer--sticky': isSticky.value,\n              },\n              themeClasses.value,\n              backgroundColorClasses.value,\n              borderClasses.value,\n              displayClasses.value,\n              elevationClasses.value,\n              roundedClasses.value,\n              props.class,\n            ]}\n            style={[\n              backgroundColorStyles.value,\n              layoutItemStyles.value,\n              dragStyles.value,\n              ssrBootStyles.value,\n              stickyStyles.value,\n              props.style,\n            ]}\n            { ...scopeId }\n            { ...attrs }\n          >\n            { hasImage && (\n              <div key=\"image\" class=\"v-navigation-drawer__img\">\n                { !slots.image ? (\n                  <VImg\n                    key=\"image-img\"\n                    alt=\"\"\n                    cover\n                    height=\"inherit\"\n                    src={ props.image }\n                  />\n                ) : (\n                  <VDefaultsProvider\n                    key=\"image-defaults\"\n                    disabled={ !props.image }\n                    defaults={{\n                      VImg: {\n                        alt: '',\n                        cover: true,\n                        height: 'inherit',\n                        src: props.image,\n                      },\n                    }}\n                    v-slots:default={ slots.image }\n                  />\n                )}\n              </div>\n            )}\n\n            { slots.prepend && (\n              <div class=\"v-navigation-drawer__prepend\">\n                { slots.prepend?.() }\n              </div>\n            )}\n\n            <div class=\"v-navigation-drawer__content\">\n              { slots.default?.() }\n            </div>\n\n            { slots.append && (\n              <div class=\"v-navigation-drawer__append\">\n                { slots.append?.() }\n              </div>\n            )}\n          </props.tag>\n\n          <Transition name=\"fade-transition\">\n            { isTemporary.value && (isDragging.value || isActive.value) && !!props.scrim && (\n              <div\n                class={['v-navigation-drawer__scrim', scrimColor.backgroundColorClasses.value]}\n                style={[scrimStyles.value, scrimColor.backgroundColorStyles.value]}\n                onClick={ () => isActive.value = false }\n                { ...scopeId }\n              />\n            )}\n          </Transition>\n        </>\n      )\n    })\n\n    return layoutIsReady.then(() => ({ isStuck }))\n  },\n})\n\nexport type VNavigationDrawer = InstanceType<typeof VNavigationDrawer>\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"VNavigationDrawer.mjs","names":["VDefaultsProvider","VImg","useSticky","useTouch","useRtl","makeBorderProps","useBorder","useBackgroundColor","makeComponentProps","provideDefaults","makeDelayProps","useDelay","makeDisplayProps","useDisplay","makeElevationProps","useElevation","makeLayoutItemProps","useLayoutItem","useProxiedModel","makeRoundedProps","useRounded","useRouter","useScopeId","useSsrBoot","makeTagProps","makeThemeProps","provideTheme","useToggleScope","computed","nextTick","ref","shallowRef","toRef","Transition","watch","genericComponent","propsFactory","toPhysical","useRender","locations","makeVNavigationDrawerProps","color","String","disableResizeWatcher","Boolean","disableRouteWatcher","expandOnHover","floating","modelValue","type","default","permanent","rail","railWidth","Number","scrim","image","temporary","persistent","touchless","width","location","validator","value","includes","sticky","tag","VNavigationDrawer","name","props","emits","val","setup","_ref","attrs","emit","slots","isRtl","themeClasses","borderClasses","backgroundColorClasses","backgroundColorStyles","elevationClasses","displayClasses","mobile","roundedClasses","router","isActive","v","ssrBootStyles","scopeId","rootEl","isHovering","runOpenDelay","runCloseDelay","isPersistent","isTemporary","isSticky","currentRoute","isDragging","dragProgress","el","position","layoutSize","size","elementSize","layoutItemStyles","layoutItemScrimStyles","layoutIsReady","id","order","parseInt","active","disableTransitions","absolute","isStuck","stickyStyles","scrimColor","scrimStyles","opacity","transition","undefined","VList","bgColor","hasImage","_createVNode","_Fragment","_mergeProps","class","style","height","alt","cover","src","prepend","append","onClick","then"],"sources":["../../../src/components/VNavigationDrawer/VNavigationDrawer.tsx"],"sourcesContent":["// Styles\nimport './VNavigationDrawer.sass'\n\n// Components\nimport { VDefaultsProvider } from '@/components/VDefaultsProvider'\nimport { VImg } from '@/components/VImg'\n\n// Composables\nimport { useSticky } from './sticky'\nimport { useTouch } from './touch'\nimport { useRtl } from '@/composables'\nimport { makeBorderProps, useBorder } from '@/composables/border'\nimport { useBackgroundColor } from '@/composables/color'\nimport { makeComponentProps } from '@/composables/component'\nimport { provideDefaults } from '@/composables/defaults'\nimport { makeDelayProps, useDelay } from '@/composables/delay'\nimport { makeDisplayProps, useDisplay } from '@/composables/display'\nimport { makeElevationProps, useElevation } from '@/composables/elevation'\nimport { makeLayoutItemProps, useLayoutItem } from '@/composables/layout'\nimport { useProxiedModel } from '@/composables/proxiedModel'\nimport { makeRoundedProps, useRounded } from '@/composables/rounded'\nimport { useRouter } from '@/composables/router'\nimport { useScopeId } from '@/composables/scopeId'\nimport { useSsrBoot } from '@/composables/ssrBoot'\nimport { makeTagProps } from '@/composables/tag'\nimport { makeThemeProps, provideTheme } from '@/composables/theme'\nimport { useToggleScope } from '@/composables/toggleScope'\n\n// Utilities\nimport { computed, nextTick, ref, shallowRef, toRef, Transition, watch } from 'vue'\nimport { genericComponent, propsFactory, toPhysical, useRender } from '@/util'\n\n// Types\nimport type { PropType } from 'vue'\n\nexport type VNavigationDrawerImageSlot = {\n  image: string | undefined\n}\n\nexport type VNavigationDrawerSlots = {\n  default: never\n  prepend: never\n  append: never\n  image: VNavigationDrawerImageSlot\n}\n\nconst locations = ['start', 'end', 'left', 'right', 'top', 'bottom'] as const\n\nexport const makeVNavigationDrawerProps = propsFactory({\n  color: String,\n  disableResizeWatcher: Boolean,\n  disableRouteWatcher: Boolean,\n  expandOnHover: Boolean,\n  floating: Boolean,\n  modelValue: {\n    type: Boolean as PropType<boolean | null>,\n    default: null,\n  },\n  permanent: Boolean,\n  rail: {\n    type: Boolean as PropType<boolean | null>,\n    default: null,\n  },\n  railWidth: {\n    type: [Number, String],\n    default: 56,\n  },\n  scrim: {\n    type: [Boolean, String],\n    default: true,\n  },\n  image: String,\n  temporary: Boolean,\n  persistent: Boolean,\n  touchless: Boolean,\n  width: {\n    type: [Number, String],\n    default: 256,\n  },\n  location: {\n    type: String as PropType<typeof locations[number]>,\n    default: 'start',\n    validator: (value: any) => locations.includes(value),\n  },\n  sticky: Boolean,\n\n  ...makeBorderProps(),\n  ...makeComponentProps(),\n  ...makeDelayProps(),\n  ...makeDisplayProps(),\n  ...makeElevationProps(),\n  ...makeLayoutItemProps(),\n  ...makeRoundedProps(),\n  ...makeTagProps({ tag: 'nav' }),\n  ...makeThemeProps(),\n}, 'VNavigationDrawer')\n\nexport const VNavigationDrawer = genericComponent<VNavigationDrawerSlots>()({\n  name: 'VNavigationDrawer',\n\n  props: makeVNavigationDrawerProps(),\n\n  emits: {\n    'update:modelValue': (val: boolean) => true,\n    'update:rail': (val: boolean) => true,\n  },\n\n  setup (props, { attrs, emit, slots }) {\n    const { isRtl } = useRtl()\n    const { themeClasses } = provideTheme(props)\n    const { borderClasses } = useBorder(props)\n    const { backgroundColorClasses, backgroundColorStyles } = useBackgroundColor(toRef(props, 'color'))\n    const { elevationClasses } = useElevation(props)\n    const { displayClasses, mobile } = useDisplay(props)\n    const { roundedClasses } = useRounded(props)\n    const router = useRouter()\n    const isActive = useProxiedModel(props, 'modelValue', null, v => !!v)\n    const { ssrBootStyles } = useSsrBoot()\n    const { scopeId } = useScopeId()\n\n    const rootEl = ref<HTMLElement>()\n    const isHovering = shallowRef(false)\n\n    const { runOpenDelay, runCloseDelay } = useDelay(props, value => {\n      isHovering.value = value\n    })\n\n    const width = computed(() => {\n      return (props.rail && props.expandOnHover && isHovering.value)\n        ? Number(props.width)\n        : Number(props.rail ? props.railWidth : props.width)\n    })\n    const location = computed(() => {\n      return toPhysical(props.location, isRtl.value) as 'left' | 'right' | 'bottom'\n    })\n    const isPersistent = computed(() => props.persistent)\n    const isTemporary = computed(() => !props.permanent && (mobile.value || props.temporary))\n    const isSticky = computed(() =>\n      props.sticky &&\n      !isTemporary.value &&\n      location.value !== 'bottom'\n    )\n\n    useToggleScope(() => props.expandOnHover && props.rail != null, () => {\n      watch(isHovering, val => emit('update:rail', !val))\n    })\n\n    useToggleScope(() => !props.disableResizeWatcher, () => {\n      watch(isTemporary, val => !props.permanent && (nextTick(() => isActive.value = !val)))\n    })\n\n    useToggleScope(() => !props.disableRouteWatcher && !!router, () => {\n      watch(router!.currentRoute, () => isTemporary.value && (isActive.value = false))\n    })\n\n    watch(() => props.permanent, val => {\n      if (val) isActive.value = true\n    })\n\n    if (props.modelValue == null && !isTemporary.value) {\n      isActive.value = props.permanent || !mobile.value\n    }\n\n    const { isDragging, dragProgress } = useTouch({\n      el: rootEl,\n      isActive,\n      isTemporary,\n      width,\n      touchless: toRef(props, 'touchless'),\n      position: location,\n    })\n\n    const layoutSize = computed(() => {\n      const size = isTemporary.value ? 0\n        : props.rail && props.expandOnHover ? Number(props.railWidth)\n        : width.value\n\n      return isDragging.value ? size * dragProgress.value : size\n    })\n    const elementSize = computed(() => ['top', 'bottom'].includes(props.location) ? 0 : width.value)\n    const { layoutItemStyles, layoutItemScrimStyles, layoutIsReady } = useLayoutItem({\n      id: props.name,\n      order: computed(() => parseInt(props.order, 10)),\n      position: location,\n      layoutSize,\n      elementSize,\n      active: computed(() => isActive.value || isDragging.value),\n      disableTransitions: computed(() => isDragging.value),\n      absolute: computed(() =>\n        // eslint-disable-next-line @typescript-eslint/no-use-before-define\n        props.absolute || (isSticky.value && typeof isStuck.value !== 'string')\n      ),\n    })\n\n    const { isStuck, stickyStyles } = useSticky({ rootEl, isSticky, layoutItemStyles })\n\n    const scrimColor = useBackgroundColor(computed(() => {\n      return typeof props.scrim === 'string' ? props.scrim : null\n    }))\n    const scrimStyles = computed(() => ({\n      ...isDragging.value ? {\n        opacity: dragProgress.value * 0.2,\n        transition: 'none',\n      } : undefined,\n      ...layoutItemScrimStyles.value,\n    }))\n\n    provideDefaults({\n      VList: {\n        bgColor: 'transparent',\n      },\n    })\n\n    useRender(() => {\n      const hasImage = (slots.image || props.image)\n\n      return (\n        <>\n          <props.tag\n            ref={ rootEl }\n            onMouseenter={ runOpenDelay }\n            onMouseleave={ runCloseDelay }\n            class={[\n              'v-navigation-drawer',\n              `v-navigation-drawer--${location.value}`,\n              {\n                'v-navigation-drawer--expand-on-hover': props.expandOnHover,\n                'v-navigation-drawer--floating': props.floating,\n                'v-navigation-drawer--is-hovering': isHovering.value,\n                'v-navigation-drawer--rail': props.rail,\n                'v-navigation-drawer--temporary': isTemporary.value,\n                'v-navigation-drawer--persistent': isPersistent.value,\n                'v-navigation-drawer--active': isActive.value,\n                'v-navigation-drawer--sticky': isSticky.value,\n              },\n              themeClasses.value,\n              backgroundColorClasses.value,\n              borderClasses.value,\n              displayClasses.value,\n              elevationClasses.value,\n              roundedClasses.value,\n              props.class,\n            ]}\n            style={[\n              backgroundColorStyles.value,\n              layoutItemStyles.value,\n              ssrBootStyles.value,\n              stickyStyles.value,\n              props.style,\n              ['top', 'bottom'].includes(location.value) ? { height: 'auto' } : {},\n            ]}\n            { ...scopeId }\n            { ...attrs }\n          >\n            { hasImage && (\n              <div key=\"image\" class=\"v-navigation-drawer__img\">\n                { !slots.image ? (\n                  <VImg\n                    key=\"image-img\"\n                    alt=\"\"\n                    cover\n                    height=\"inherit\"\n                    src={ props.image }\n                  />\n                ) : (\n                  <VDefaultsProvider\n                    key=\"image-defaults\"\n                    disabled={ !props.image }\n                    defaults={{\n                      VImg: {\n                        alt: '',\n                        cover: true,\n                        height: 'inherit',\n                        src: props.image,\n                      },\n                    }}\n                    v-slots:default={ slots.image }\n                  />\n                )}\n              </div>\n            )}\n\n            { slots.prepend && (\n              <div class=\"v-navigation-drawer__prepend\">\n                { slots.prepend?.() }\n              </div>\n            )}\n\n            <div class=\"v-navigation-drawer__content\">\n              { slots.default?.() }\n            </div>\n\n            { slots.append && (\n              <div class=\"v-navigation-drawer__append\">\n                { slots.append?.() }\n              </div>\n            )}\n          </props.tag>\n\n          <Transition name=\"fade-transition\">\n            { isTemporary.value && (isDragging.value || isActive.value) && !!props.scrim && (\n              <div\n                class={['v-navigation-drawer__scrim', scrimColor.backgroundColorClasses.value]}\n                style={[scrimStyles.value, scrimColor.backgroundColorStyles.value]}\n                onClick={ () => {\n                  if (isPersistent.value) return\n                  isActive.value = false\n                }}\n                { ...scopeId }\n              />\n            )}\n          </Transition>\n        </>\n      )\n    })\n\n    return layoutIsReady.then(() => ({ isStuck }))\n  },\n})\n\nexport type VNavigationDrawer = InstanceType<typeof VNavigationDrawer>\n"],"mappings":"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","ignoreList":[]}

package/lib/components/VNavigationDrawer/VNavigationDrawer.sass

@@ -1,93 +1,99 @@
 @use '../../styles/tools'
 @use './variables' as *
 
-.v-navigation-drawer
-  -webkit-overflow-scrolling: $navigation-drawer-overflow-scrolling
-  background: $navigation-drawer-background
-  display: flex
-  flex-direction: column
-  height: $navigation-drawer-height
-  max-width: 100%
-  pointer-events: auto
-  transition-duration: $navigation-drawer-transition-duration
-  transition-property: $navigation-drawer-transition-property
-  transition-timing-function: $navigation-drawer-transition-timing-function
-  position: absolute
-
-  @include tools.border($navigation-drawer-border...)
-  @include tools.elevation($navigation-drawer-elevation)
-  @include tools.rounded($navigation-drawer-border-radius)
-  @include tools.theme($navigation-drawer-theme...)
-
-  &--rounded
-    @include tools.rounded($navigation-drawer-rounded-border-radius)
-
-  &--top
+@include tools.layer('components')
+  .v-navigation-drawer
+    -webkit-overflow-scrolling: $navigation-drawer-overflow-scrolling
+    background: $navigation-drawer-background
+    display: flex
+    flex-direction: column
+    height: $navigation-drawer-height
+    max-width: 100%
+    pointer-events: auto
+    transition-duration: $navigation-drawer-transition-duration
+    transition-property: $navigation-drawer-transition-property
+    transition-timing-function: $navigation-drawer-transition-timing-function
+    position: absolute
+
+    @include tools.border($navigation-drawer-border...)
+    @include tools.elevation($navigation-drawer-elevation)
+    @include tools.rounded($navigation-drawer-border-radius)
+    @include tools.theme($navigation-drawer-theme...)
+
+    &--rounded
+      @include tools.rounded($navigation-drawer-rounded-border-radius)
+
+    &--top,
+    &--bottom
+      max-height: -webkit-fill-available
+      overflow-y: auto
+
+    &--top
+      top: 0
+      border-bottom-width: $navigation-drawer-border-thin-width
+
+    &--bottom
+      left: 0
+      border-top-width: $navigation-drawer-border-thin-width
+
+    &--left
+      top: 0
+      left: 0
+      right: auto
+      border-right-width: $navigation-drawer-border-thin-width
+
+    &--right
+      top: 0
+      left: auto
+      right: 0
+      border-left-width: $navigation-drawer-border-thin-width
+
+    &--floating
+      border: none
+
+    &--temporary.v-navigation-drawer--active
+      @include tools.elevation($navigation-drawer-temporary-elevation)
+
+    &--sticky
+      height: auto
+      transition: box-shadow, transform, visibility, width, height, left, right
+
+    .v-list
+      overflow: hidden
+
+  .v-navigation-drawer__content
+    flex: 0 1 auto
+    height: $navigation-drawer-content-height
+    max-width: 100%
+    overflow-x: $navigation-drawer-content-overflow-x
+    overflow-y: $navigation-drawer-content-overflow-y
+
+  .v-navigation-drawer__img
+    height: 100%
+    left: 0
+    position: absolute
     top: 0
-    border-bottom-width: $navigation-drawer-border-thin-width
+    width: 100%
+    z-index: -1
 
-  &--bottom
-    left: 0
-    border-top-width: $navigation-drawer-border-thin-width
+    // TODO: remove in v4
+    img:not(.v-img__img)
+      height: $navigation-drawer-img-height
+      object-fit: $navigation-drawer-img-object-fit
+      width: $navigation-drawer-img-width
 
-  &--left
+  .v-navigation-drawer__scrim
+    position: absolute
     top: 0
     left: 0
-    right: auto
-    border-right-width: $navigation-drawer-border-thin-width
-
-  &--right
-    top: 0
-    left: auto
-    right: 0
-    border-left-width: $navigation-drawer-border-thin-width
-
-  &--floating
-    border: none
-
-  &--temporary.v-navigation-drawer--active
-    @include tools.elevation($navigation-drawer-temporary-elevation)
-
-  &--sticky
-    height: auto
-    transition: box-shadow, transform, visibility, width, height, left, right
-
-  .v-list
+    width: 100%
+    height: 100%
+    background: black
+    opacity: $navigation-drawer-scrim-opacity
+    transition: opacity $navigation-drawer-transition-duration $navigation-drawer-transition-timing-function
+    z-index: 1
+
+  .v-navigation-drawer__prepend,
+  .v-navigation-drawer__append
+    flex: none
     overflow: hidden
-
-.v-navigation-drawer__content
-  flex: 0 1 auto
-  height: $navigation-drawer-content-height
-  max-width: 100%
-  overflow-x: $navigation-drawer-content-overflow-x
-  overflow-y: $navigation-drawer-content-overflow-y
-
-.v-navigation-drawer__img
-  height: 100%
-  left: 0
-  position: absolute
-  top: 0
-  width: 100%
-  z-index: -1
-
-  // TODO: remove in v4
-  img:not(.v-img__img)
-    height: $navigation-drawer-img-height
-    object-fit: $navigation-drawer-img-object-fit
-    width: $navigation-drawer-img-width
-
-.v-navigation-drawer__scrim
-  position: absolute
-  top: 0
-  left: 0
-  width: 100%
-  height: 100%
-  background: black
-  opacity: $navigation-drawer-scrim-opacity
-  transition: opacity $navigation-drawer-transition-duration $navigation-drawer-transition-timing-function
-  z-index: 1
-
-.v-navigation-drawer__prepend,
-.v-navigation-drawer__append
-  flex: none
-  overflow: hidden

package/lib/components/VNavigationDrawer/index.d.mts

@@ -17,6 +17,7 @@ declare const VNavigationDrawer: {
         style: vue.StyleValue;
         width: string | number;
         tag: string;
+        mobile: boolean;
         order: string | number;
         absolute: boolean;
         sticky: boolean;
@@ -24,6 +25,7 @@ declare const VNavigationDrawer: {
         tile: boolean;
         floating: boolean;
         location: "left" | "right" | "end" | "top" | "bottom" | "start";
+        persistent: boolean;
         scrim: string | boolean;
         touchless: boolean;
         disableResizeWatcher: boolean;
@@ -75,6 +77,7 @@ declare const VNavigationDrawer: {
         style: vue.StyleValue;
         width: string | number;
         tag: string;
+        mobile: boolean;
         order: string | number;
         absolute: boolean;
         sticky: boolean;
@@ -82,6 +85,7 @@ declare const VNavigationDrawer: {
         tile: boolean;
         floating: boolean;
         location: "left" | "right" | "end" | "top" | "bottom" | "start";
+        persistent: boolean;
         scrim: string | boolean;
         touchless: boolean;
         disableResizeWatcher: boolean;
@@ -128,6 +132,7 @@ declare const VNavigationDrawer: {
         style: vue.StyleValue;
         width: string | number;
         tag: string;
+        mobile: boolean;
         order: string | number;
         absolute: boolean;
         sticky: boolean;
@@ -136,6 +141,7 @@ declare const VNavigationDrawer: {
         tile: boolean;
         floating: boolean;
         location: "left" | "right" | "end" | "top" | "bottom" | "start";
+        persistent: boolean;
         scrim: string | boolean;
         touchless: boolean;
         disableResizeWatcher: boolean;
@@ -169,6 +175,7 @@ declare const VNavigationDrawer: {
         style: vue.StyleValue;
         width: string | number;
         tag: string;
+        mobile: boolean;
         order: string | number;
         absolute: boolean;
         sticky: boolean;
@@ -176,6 +183,7 @@ declare const VNavigationDrawer: {
         tile: boolean;
         floating: boolean;
         location: "left" | "right" | "end" | "top" | "bottom" | "start";
+        persistent: boolean;
         scrim: string | boolean;
         touchless: boolean;
         disableResizeWatcher: boolean;
@@ -224,6 +232,7 @@ declare const VNavigationDrawer: {
         style: vue.StyleValue;
         width: string | number;
         tag: string;
+        mobile: boolean;
         order: string | number;
         absolute: boolean;
         sticky: boolean;
@@ -232,6 +241,7 @@ declare const VNavigationDrawer: {
         tile: boolean;
         floating: boolean;
         location: "left" | "right" | "end" | "top" | "bottom" | "start";
+        persistent: boolean;
         scrim: string | boolean;
         touchless: boolean;
         disableResizeWatcher: boolean;
@@ -249,6 +259,7 @@ declare const VNavigationDrawer: {
     style: vue.StyleValue;
     width: string | number;
     tag: string;
+    mobile: boolean;
     order: string | number;
     absolute: boolean;
     sticky: boolean;
@@ -256,6 +267,7 @@ declare const VNavigationDrawer: {
     tile: boolean;
     floating: boolean;
     location: "left" | "right" | "end" | "top" | "bottom" | "start";
+    persistent: boolean;
     scrim: string | boolean;
     touchless: boolean;
     disableResizeWatcher: boolean;
@@ -307,6 +319,7 @@ declare const VNavigationDrawer: {
     style: vue.StyleValue;
     width: string | number;
     tag: string;
+    mobile: boolean;
     order: string | number;
     absolute: boolean;
     sticky: boolean;
@@ -315,6 +328,7 @@ declare const VNavigationDrawer: {
     tile: boolean;
     floating: boolean;
     location: "left" | "right" | "end" | "top" | "bottom" | "start";
+    persistent: boolean;
     scrim: string | boolean;
     touchless: boolean;
     disableResizeWatcher: boolean;
@@ -363,6 +377,10 @@ declare const VNavigationDrawer: {
         type: (StringConstructor | NumberConstructor)[];
         validator(v: any): boolean;
     };
+    mobile: {
+        type: BooleanConstructor;
+        default: null;
+    };
     mobileBreakpoint: PropType<number | DisplayBreakpoint>;
     closeDelay: (StringConstructor | NumberConstructor)[];
     openDelay: (StringConstructor | NumberConstructor)[];
@@ -396,6 +414,7 @@ declare const VNavigationDrawer: {
     };
     image: StringConstructor;
     temporary: BooleanConstructor;
+    persistent: BooleanConstructor;
     touchless: BooleanConstructor;
     width: {
         type: (StringConstructor | NumberConstructor)[];
@@ -433,6 +452,10 @@ declare const VNavigationDrawer: {
         type: (StringConstructor | NumberConstructor)[];
         validator(v: any): boolean;
     };
+    mobile: {
+        type: BooleanConstructor;
+        default: null;
+    };
     mobileBreakpoint: PropType<number | DisplayBreakpoint>;
     closeDelay: (StringConstructor | NumberConstructor)[];
     openDelay: (StringConstructor | NumberConstructor)[];
@@ -466,6 +489,7 @@ declare const VNavigationDrawer: {
     };
     image: StringConstructor;
     temporary: BooleanConstructor;
+    persistent: BooleanConstructor;
     touchless: BooleanConstructor;
     width: {
         type: (StringConstructor | NumberConstructor)[];

package/lib/components/VNavigationDrawer/touch.mjs

@@ -1,11 +1,13 @@
 // Composables
+import { useToggleScope } from "../../composables/toggleScope.mjs";
 import { useVelocity } from "../../composables/touch.mjs"; // Utilities
-import { computed, onBeforeUnmount, onMounted, shallowRef } from 'vue';
+import { computed, onBeforeUnmount, onMounted, onScopeDispose, shallowRef, watchEffect } from 'vue';
 
 // Types
 
 export function useTouch(_ref) {
   let {
+    el,
     isActive,
     isTemporary,
     width,
@@ -55,10 +57,10 @@ export function useTouch(_ref) {
     const inTouchZone = position.value === 'left' ? touchX < touchZone : position.value === 'right' ? touchX > document.documentElement.clientWidth - touchZone : position.value === 'top' ? touchY < touchZone : position.value === 'bottom' ? touchY > document.documentElement.clientHeight - touchZone : oops();
     const inElement = isActive.value && (position.value === 'left' ? touchX < width.value : position.value === 'right' ? touchX > document.documentElement.clientWidth - width.value : position.value === 'top' ? touchY < width.value : position.value === 'bottom' ? touchY > document.documentElement.clientHeight - width.value : oops());
     if (inTouchZone || inElement || isActive.value && isTemporary.value) {
-      maybeDragging = true;
       start = [touchX, touchY];
       offset.value = getOffset(isHorizontal.value ? touchX : touchY, isActive.value);
       dragProgress.value = getProgress(isHorizontal.value ? touchX : touchY);
+      maybeDragging = offset.value > -20 && offset.value < 80;
       endTouch(e);
       addMovement(e);
     }
@@ -118,6 +120,18 @@ export function useTouch(_ref) {
       transition: 'none'
     } : undefined;
   });
+  useToggleScope(isDragging, () => {
+    const transform = el.value?.style.transform ?? null;
+    const transition = el.value?.style.transition ?? null;
+    watchEffect(() => {
+      el.value?.style.setProperty('transform', dragStyles.value?.transform || 'none');
+      el.value?.style.setProperty('transition', dragStyles.value?.transition || null);
+    });
+    onScopeDispose(() => {
+      el.value?.style.setProperty('transform', transform);
+      el.value?.style.setProperty('transition', transition);
+    });
+  });
   return {
     isDragging,
     dragProgress,

package/lib/components/VNavigationDrawer/touch.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"touch.mjs","names":["useVelocity","computed","onBeforeUnmount","onMounted","shallowRef","useTouch","_ref","isActive","isTemporary","width","touchless","position","window","addEventListener","onTouchstart","passive","onTouchmove","onTouchend","removeEventListener","isHorizontal","includes","value","addMovement","endTouch","getVelocity","maybeDragging","isDragging","dragProgress","offset","start","getOffset","pos","active","document","documentElement","clientWidth","clientHeight","oops","getProgress","limit","arguments","length","undefined","progress","Math","max","min","e","touchX","changedTouches","clientX","touchY","clientY","touchZone","inTouchZone","inElement","cancelable","dx","abs","dy","thresholdMet","preventDefault","velocity","identifier","vx","x","vy","y","direction","left","right","top","bottom","dragStyles","transform","transition","Error"],"sources":["../../../src/components/VNavigationDrawer/touch.ts"],"sourcesContent":["// Composables\nimport { useVelocity } from '@/composables/touch'\n\n// Utilities\nimport { computed, onBeforeUnmount, onMounted, shallowRef } from 'vue'\n\n// Types\nimport type { Ref } from 'vue'\n\nexport function useTouch ({ isActive, isTemporary, width, touchless, position }: {\n  isActive: Ref<boolean>\n  isTemporary: Ref<boolean>\n  width: Ref<number>\n  touchless: Ref<boolean>\n  position: Ref<'left' | 'right' | 'top' | 'bottom'>\n}) {\n  onMounted(() => {\n    window.addEventListener('touchstart', onTouchstart, { passive: true })\n    window.addEventListener('touchmove', onTouchmove, { passive: false })\n    window.addEventListener('touchend', onTouchend, { passive: true })\n  })\n\n  onBeforeUnmount(() => {\n    window.removeEventListener('touchstart', onTouchstart)\n    window.removeEventListener('touchmove', onTouchmove)\n    window.removeEventListener('touchend', onTouchend)\n  })\n\n  const isHorizontal = computed(() => ['left', 'right'].includes(position.value))\n\n  const { addMovement, endTouch, getVelocity } = useVelocity()\n  let maybeDragging = false\n  const isDragging = shallowRef(false)\n  const dragProgress = shallowRef(0)\n  const offset = shallowRef(0)\n  let start: [number, number] | undefined\n\n  function getOffset (pos: number, active: boolean): number {\n    return (\n      position.value === 'left' ? pos\n      : position.value === 'right' ? document.documentElement.clientWidth - pos\n      : position.value === 'top' ? pos\n      : position.value === 'bottom' ? document.documentElement.clientHeight - pos\n      : oops()\n    ) - (active ? width.value : 0)\n  }\n\n  function getProgress (pos: number, limit = true): number {\n    const progress = (\n      position.value === 'left' ? (pos - offset.value) / width.value\n      : position.value === 'right' ? (document.documentElement.clientWidth - pos - offset.value) / width.value\n      : position.value === 'top' ? (pos - offset.value) / width.value\n      : position.value === 'bottom' ? (document.documentElement.clientHeight - pos - offset.value) / width.value\n      : oops()\n    )\n    return limit ? Math.max(0, Math.min(1, progress)) : progress\n  }\n\n  function onTouchstart (e: TouchEvent) {\n    if (touchless.value) return\n\n    const touchX = e.changedTouches[0].clientX\n    const touchY = e.changedTouches[0].clientY\n\n    const touchZone = 25\n    const inTouchZone: boolean =\n      position.value === 'left' ? touchX < touchZone\n      : position.value === 'right' ? touchX > document.documentElement.clientWidth - touchZone\n      : position.value === 'top' ? touchY < touchZone\n      : position.value === 'bottom' ? touchY > document.documentElement.clientHeight - touchZone\n      : oops()\n\n    const inElement: boolean = isActive.value && (\n      position.value === 'left' ? touchX < width.value\n      : position.value === 'right' ? touchX > document.documentElement.clientWidth - width.value\n      : position.value === 'top' ? touchY < width.value\n      : position.value === 'bottom' ? touchY > document.documentElement.clientHeight - width.value\n      : oops()\n    )\n\n    if (\n      inTouchZone ||\n      inElement ||\n      (isActive.value && isTemporary.value)\n    ) {\n      maybeDragging = true\n      start = [touchX, touchY]\n\n      offset.value = getOffset(isHorizontal.value ? touchX : touchY, isActive.value)\n      dragProgress.value = getProgress(isHorizontal.value ? touchX : touchY)\n\n      endTouch(e)\n      addMovement(e)\n    }\n  }\n\n  function onTouchmove (e: TouchEvent) {\n    const touchX = e.changedTouches[0].clientX\n    const touchY = e.changedTouches[0].clientY\n\n    if (maybeDragging) {\n      if (!e.cancelable) {\n        maybeDragging = false\n        return\n      }\n\n      const dx = Math.abs(touchX - start![0])\n      const dy = Math.abs(touchY - start![1])\n\n      const thresholdMet = isHorizontal.value\n        ? dx > dy && dx > 3\n        : dy > dx && dy > 3\n\n      if (thresholdMet) {\n        isDragging.value = true\n        maybeDragging = false\n      } else if ((isHorizontal.value ? dy : dx) > 3) {\n        maybeDragging = false\n      }\n    }\n\n    if (!isDragging.value) return\n\n    e.preventDefault()\n    addMovement(e)\n\n    const progress = getProgress(isHorizontal.value ? touchX : touchY, false)\n    dragProgress.value = Math.max(0, Math.min(1, progress))\n\n    if (progress > 1) {\n      offset.value = getOffset(isHorizontal.value ? touchX : touchY, true)\n    } else if (progress < 0) {\n      offset.value = getOffset(isHorizontal.value ? touchX : touchY, false)\n    }\n  }\n\n  function onTouchend (e: TouchEvent) {\n    maybeDragging = false\n\n    if (!isDragging.value) return\n\n    addMovement(e)\n\n    isDragging.value = false\n\n    const velocity = getVelocity(e.changedTouches[0].identifier)\n    const vx = Math.abs(velocity.x)\n    const vy = Math.abs(velocity.y)\n    const thresholdMet = isHorizontal.value\n      ? vx > vy && vx > 400\n      : vy > vx && vy > 3\n\n    if (thresholdMet) {\n      isActive.value = velocity.direction === ({\n        left: 'right',\n        right: 'left',\n        top: 'down',\n        bottom: 'up',\n      }[position.value] || oops())\n    } else {\n      isActive.value = dragProgress.value > 0.5\n    }\n  }\n\n  const dragStyles = computed(() => {\n    return isDragging.value ? {\n      transform:\n        position.value === 'left' ? `translateX(calc(-100% + ${dragProgress.value * width.value}px))`\n        : position.value === 'right' ? `translateX(calc(100% - ${dragProgress.value * width.value}px))`\n        : position.value === 'top' ? `translateY(calc(-100% + ${dragProgress.value * width.value}px))`\n        : position.value === 'bottom' ? `translateY(calc(100% - ${dragProgress.value * width.value}px))`\n        : oops(),\n      transition: 'none',\n    } : undefined\n  })\n\n  return {\n    isDragging,\n    dragProgress,\n    dragStyles,\n  }\n}\n\nfunction oops (): never {\n  throw new Error()\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"touch.mjs","names":["useToggleScope","useVelocity","computed","onBeforeUnmount","onMounted","onScopeDispose","shallowRef","watchEffect","useTouch","_ref","el","isActive","isTemporary","width","touchless","position","window","addEventListener","onTouchstart","passive","onTouchmove","onTouchend","removeEventListener","isHorizontal","includes","value","addMovement","endTouch","getVelocity","maybeDragging","isDragging","dragProgress","offset","start","getOffset","pos","active","document","documentElement","clientWidth","clientHeight","oops","getProgress","limit","arguments","length","undefined","progress","Math","max","min","e","touchX","changedTouches","clientX","touchY","clientY","touchZone","inTouchZone","inElement","cancelable","dx","abs","dy","thresholdMet","preventDefault","velocity","identifier","vx","x","vy","y","direction","left","right","top","bottom","dragStyles","transform","transition","style","setProperty","Error"],"sources":["../../../src/components/VNavigationDrawer/touch.ts"],"sourcesContent":["// Composables\nimport { useToggleScope } from '@/composables/toggleScope'\nimport { useVelocity } from '@/composables/touch'\n\n// Utilities\nimport { computed, onBeforeUnmount, onMounted, onScopeDispose, shallowRef, watchEffect } from 'vue'\n\n// Types\nimport type { Ref } from 'vue'\n\nexport function useTouch ({\n  el,\n  isActive,\n  isTemporary,\n  width,\n  touchless,\n  position,\n}: {\n  el: Ref<HTMLElement | undefined>\n  isActive: Ref<boolean>\n  isTemporary: Ref<boolean>\n  width: Ref<number>\n  touchless: Ref<boolean>\n  position: Ref<'left' | 'right' | 'top' | 'bottom'>\n}) {\n  onMounted(() => {\n    window.addEventListener('touchstart', onTouchstart, { passive: true })\n    window.addEventListener('touchmove', onTouchmove, { passive: false })\n    window.addEventListener('touchend', onTouchend, { passive: true })\n  })\n\n  onBeforeUnmount(() => {\n    window.removeEventListener('touchstart', onTouchstart)\n    window.removeEventListener('touchmove', onTouchmove)\n    window.removeEventListener('touchend', onTouchend)\n  })\n\n  const isHorizontal = computed(() => ['left', 'right'].includes(position.value))\n\n  const { addMovement, endTouch, getVelocity } = useVelocity()\n  let maybeDragging = false\n  const isDragging = shallowRef(false)\n  const dragProgress = shallowRef(0)\n  const offset = shallowRef(0)\n  let start: [number, number] | undefined\n\n  function getOffset (pos: number, active: boolean): number {\n    return (\n      position.value === 'left' ? pos\n      : position.value === 'right' ? document.documentElement.clientWidth - pos\n      : position.value === 'top' ? pos\n      : position.value === 'bottom' ? document.documentElement.clientHeight - pos\n      : oops()\n    ) - (active ? width.value : 0)\n  }\n\n  function getProgress (pos: number, limit = true): number {\n    const progress = (\n      position.value === 'left' ? (pos - offset.value) / width.value\n      : position.value === 'right' ? (document.documentElement.clientWidth - pos - offset.value) / width.value\n      : position.value === 'top' ? (pos - offset.value) / width.value\n      : position.value === 'bottom' ? (document.documentElement.clientHeight - pos - offset.value) / width.value\n      : oops()\n    )\n    return limit ? Math.max(0, Math.min(1, progress)) : progress\n  }\n\n  function onTouchstart (e: TouchEvent) {\n    if (touchless.value) return\n\n    const touchX = e.changedTouches[0].clientX\n    const touchY = e.changedTouches[0].clientY\n\n    const touchZone = 25\n    const inTouchZone: boolean =\n      position.value === 'left' ? touchX < touchZone\n      : position.value === 'right' ? touchX > document.documentElement.clientWidth - touchZone\n      : position.value === 'top' ? touchY < touchZone\n      : position.value === 'bottom' ? touchY > document.documentElement.clientHeight - touchZone\n      : oops()\n\n    const inElement: boolean = isActive.value && (\n      position.value === 'left' ? touchX < width.value\n      : position.value === 'right' ? touchX > document.documentElement.clientWidth - width.value\n      : position.value === 'top' ? touchY < width.value\n      : position.value === 'bottom' ? touchY > document.documentElement.clientHeight - width.value\n      : oops()\n    )\n\n    if (\n      inTouchZone ||\n      inElement ||\n      (isActive.value && isTemporary.value)\n    ) {\n      start = [touchX, touchY]\n\n      offset.value = getOffset(isHorizontal.value ? touchX : touchY, isActive.value)\n      dragProgress.value = getProgress(isHorizontal.value ? touchX : touchY)\n\n      maybeDragging = offset.value > -20 && offset.value < 80\n      endTouch(e)\n      addMovement(e)\n    }\n  }\n\n  function onTouchmove (e: TouchEvent) {\n    const touchX = e.changedTouches[0].clientX\n    const touchY = e.changedTouches[0].clientY\n\n    if (maybeDragging) {\n      if (!e.cancelable) {\n        maybeDragging = false\n        return\n      }\n\n      const dx = Math.abs(touchX - start![0])\n      const dy = Math.abs(touchY - start![1])\n\n      const thresholdMet = isHorizontal.value\n        ? dx > dy && dx > 3\n        : dy > dx && dy > 3\n\n      if (thresholdMet) {\n        isDragging.value = true\n        maybeDragging = false\n      } else if ((isHorizontal.value ? dy : dx) > 3) {\n        maybeDragging = false\n      }\n    }\n\n    if (!isDragging.value) return\n\n    e.preventDefault()\n    addMovement(e)\n\n    const progress = getProgress(isHorizontal.value ? touchX : touchY, false)\n    dragProgress.value = Math.max(0, Math.min(1, progress))\n\n    if (progress > 1) {\n      offset.value = getOffset(isHorizontal.value ? touchX : touchY, true)\n    } else if (progress < 0) {\n      offset.value = getOffset(isHorizontal.value ? touchX : touchY, false)\n    }\n  }\n\n  function onTouchend (e: TouchEvent) {\n    maybeDragging = false\n\n    if (!isDragging.value) return\n\n    addMovement(e)\n\n    isDragging.value = false\n\n    const velocity = getVelocity(e.changedTouches[0].identifier)\n    const vx = Math.abs(velocity.x)\n    const vy = Math.abs(velocity.y)\n    const thresholdMet = isHorizontal.value\n      ? vx > vy && vx > 400\n      : vy > vx && vy > 3\n\n    if (thresholdMet) {\n      isActive.value = velocity.direction === ({\n        left: 'right',\n        right: 'left',\n        top: 'down',\n        bottom: 'up',\n      }[position.value] || oops())\n    } else {\n      isActive.value = dragProgress.value > 0.5\n    }\n  }\n\n  const dragStyles = computed(() => {\n    return isDragging.value ? {\n      transform:\n        position.value === 'left' ? `translateX(calc(-100% + ${dragProgress.value * width.value}px))`\n        : position.value === 'right' ? `translateX(calc(100% - ${dragProgress.value * width.value}px))`\n        : position.value === 'top' ? `translateY(calc(-100% + ${dragProgress.value * width.value}px))`\n        : position.value === 'bottom' ? `translateY(calc(100% - ${dragProgress.value * width.value}px))`\n        : oops(),\n      transition: 'none',\n    } : undefined\n  })\n\n  useToggleScope(isDragging, () => {\n    const transform = el.value?.style.transform ?? null\n    const transition = el.value?.style.transition ?? null\n\n    watchEffect(() => {\n      el.value?.style.setProperty('transform', dragStyles.value?.transform || 'none')\n      el.value?.style.setProperty('transition', dragStyles.value?.transition || null)\n    })\n\n    onScopeDispose(() => {\n      el.value?.style.setProperty('transform', transform)\n      el.value?.style.setProperty('transition', transition)\n    })\n  })\n\n  return {\n    isDragging,\n    dragProgress,\n    dragStyles,\n  }\n}\n\nfunction oops (): never {\n  throw new Error()\n}\n"],"mappings":"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","ignoreList":[]}