Fixing some issues with mobile

Author: webdevnerdstuff

src/plugin/VResizeDrawer.vue

@@ -220,7 +220,7 @@ const drawerStyles = computed(() => useDrawerStyles({
 	rail: settings.value.rail,
 	railWidth: settings.value.railWidth,
 	resizedAmount: resizedAmount.value,
-	widthSnapBack: settings.value.widthSnapBack,
+	snapBack: settings.value.snapBack || settings.value.widthSnapBack,
 }));
 
 const drawerWidth = computed<string | number | undefined>(() => {
@@ -279,7 +279,6 @@ const isAllowedHandlePosition = computed<boolean>(() => {
 });
 
 
-
 // -------------------------------------------------- Handle Icon //
 const handleIconStyles = computed(() => useHandleIconStyles({
 	color: props.handleColor,
@@ -352,7 +351,7 @@ function drawerResizeEvent(e: MouseEvent | TouchEvent, amount: number): void {
 	}
 
 	if (settings.value.location === 'bottom') {
-		amountValue = document.body.scrollHeight - amountValue + (iconSizeUnit.value / 2);
+		amountValue = window.innerHeight - amountValue + (iconSizeUnit.value / 2);
 	}
 
 	resizedAmount.value = useConvertToUnit({ value: amountValue }) || undefined;
@@ -488,7 +487,6 @@ function handleStart(e: MouseEvent | TouchEvent, eventOffsetX: number): void {
 		offsetX = settings.value.handleBorderWidth as number || 1;
 	}
 
-
 	handleEvents.mouseUp = false;
 
 	if (eventOffsetX < offsetX) {
@@ -517,11 +515,14 @@ function handleStart(e: MouseEvent | TouchEvent, eventOffsetX: number): void {
 
 function handleMouseDown(e: MouseEvent): void {
 	const offset = isTopOrBottom.value ? e.offsetY : e.offsetX;
+
 	handleStart(e, offset);
 }
 
 function handleTouchstart(e: TouchEvent): void {
-	const client = (isTopOrBottom.value ? e.touches[0]?.radiusY : e.touches[0]?.radiusX) ?? 0;
+	let client = (isTopOrBottom.value ? e.touches[0]?.radiusY : e.touches[0]?.radiusX) ?? 0;
+	client = client / 2;
+
 	handleStart(e, client);
 }
 

src/plugin/composables/__tests__/styles.test.ts

@@ -142,7 +142,7 @@ describe('Styles Composable', () => {
 			expect(data).toMatchInlineSnapshot(`
 				{
 				  "backgroundColor": "transparent",
-				  "height": "100%",
+				  "height": "undefinedpx",
 				  "transform": undefined,
 				  "width": "undefinedpx",
 				}

src/plugin/composables/helpers.ts

@@ -79,6 +79,12 @@ export const useConvertToNumber = (val: string | number): number => {
 export const useUnitToPx = (valueWithUnit: Props['handleIconSize']): number => {
 	if (!valueWithUnit) return 0;
 
+
+	// check if string valueWithUnit contains px
+	if (typeof valueWithUnit === 'number') {
+		return valueWithUnit;
+	}
+
 	// Create a temporary element for calculating the value
 	const tempElement = document.createElement('div');
 	tempElement.style.position = 'absolute';

src/plugin/composables/styles.ts

@@ -18,15 +18,15 @@ export const iconSizes = {
 
 // -------------------------------------------------- Drawer //
 export const useDrawerStyles: UseDrawerStyles = (options) => {
-	const { isMouseDown, location, maxWidth, minWidth, rail, railWidth, resizedAmount, widthSnapBack } = options;
+	const { isMouseDown, location, maxWidth, minWidth, rail, railWidth, resizedAmount, snapBack } = options;
 
 	if (rail) {
 		return {};
 	}
 
 	let mountValue = rail ? railWidth : unref(resizedAmount);
 
-	if (!widthSnapBack) {
+	if (!snapBack) {
 		if (parseInt(mountValue as string) >= parseInt(maxWidth as string)) {
 			mountValue = parseInt(maxWidth as string);
 		}
@@ -40,6 +40,7 @@ export const useDrawerStyles: UseDrawerStyles = (options) => {
 
 	if (location === 'top' || location === 'bottom') {
 		response = {
+			maxHeight: `${useConvertToUnit({ value: mountValue as string }) as string} !important`,
 			minHeight: `${useConvertToUnit({ value: mountValue as string }) as string} !important`,
 			transitionDuration: unref(isMouseDown) ? '0s' : '.2s',
 			width: '100%',
@@ -61,22 +62,18 @@ export const useHandleContainerStyles: UseHandleContainerStyles = (options) => {
 	const { borderWidth, handleColor, iconSizeUnit, location, position, theme } = options;
 
 	const transform = `translateX(-50%) ${location === 'top' ? 'rotate(90deg)' : 'rotate(-90deg)'}`;
-	let height = '100%';
-	let width = '100%';
+	let height = `${iconSizeUnit}px`;
+	let width = `${iconSizeUnit}px`;
 
-	if (location === 'bottom' || location === 'top') {
-		height = `${iconSizeUnit}px`;
-
-		if (position === 'border') {
+	if (position === 'border') {
+		if (location === 'bottom' || location === 'top') {
 			height = useConvertToUnit({ value: borderWidth as string }) as string;
 		}
-	}
-	else {
-		width = useConvertToUnit({ value: borderWidth as string }) as string;
-	}
-
+		else {
+			height = '100%';
+			width = useConvertToUnit({ value: borderWidth as string }) as string;
+		}
 
-	if (position === 'border') {
 		return {
 			backgroundColor: useGetColor(handleColor as string, theme),
 			height,
@@ -88,7 +85,7 @@ export const useHandleContainerStyles: UseHandleContainerStyles = (options) => {
 		backgroundColor: 'transparent',
 		height: height,
 		transform: location === 'top' || location === 'bottom' ? transform : undefined,
-		width: `${iconSizeUnit}px`,
+		width,
 	};
 };
 

src/plugin/styles/main.scss

@@ -99,6 +99,7 @@
 	}
 
 	&--top {
+		top: 0 !important;
 		transition: min-height 0.3s;
 
 		.v-resize-drawer--handle-container {

src/plugin/types/index.ts

@@ -21,7 +21,7 @@ export type Classes = {
 export type EmitEventNames = 'handle:click' | 'handle:dblclick' | 'handle:drag' | 'handle:mousedown' | 'handle:mouseup' | 'handle:touchend' | 'handle:touchmove' | 'handle:touchstart';
 export type StorageType = 'local' | 'session';
 export type HandlePositions = 'bottom' | 'border' | 'center' | 'top';
-export type DrawerLocations = 'end' | 'start' | 'left' | 'right' | 'top' | 'bottom' | undefined;
+export type DrawerLocations = 'bottom' | 'end' | 'start' | 'left' | 'right' | 'top' | undefined;
 
 type Height = number | string | undefined;
 
@@ -55,6 +55,7 @@ export interface Props {
 	resizable?: boolean | undefined;
 	saveHeight?: boolean | undefined;
 	saveWidth?: boolean | undefined;
+	snapBack?: boolean | undefined;
 	storageName?: string | undefined;
 	storageType?: StorageType;
 	tag?: VNavigationDrawer['tag'];
@@ -144,7 +145,7 @@ export interface UseDrawerStyles {
 			rail?: Props['rail'],
 			railWidth?: Props['railWidth'],
 			resizedAmount: MaybeRef<string | number | undefined>,
-			widthSnapBack?: Props['widthSnapBack'],
+			snapBack?: Props['snapBack'],
 		}
 	): CSSProperties;
 }

src/plugin/utils/props.ts

@@ -20,11 +20,11 @@ export const AllProps: Props = {
 	railWidth: 8,
 	resizable: true,
 	saveWidth: true,
+	snapBack: true,
 	storageName: `${componentName}-width`,
 	storageType: 'local',
 	tag: 'nav',
 	theme: undefined,
 	touchless: false,
 	width: 256,
-	widthSnapBack: true,
 };