Merge pull request #38 from webdevnerdstuff/issue-31

Issue 31

Author: webdevnerdstuff

.husky/pre-commit

@@ -1,4 +1,3 @@
 #!/usr/bin/env sh
-. "$(dirname -- "$0")/_/husky.sh"
 
 npx lint-staged && npm run test:build

CHANGELOG.md

@@ -1,6 +1,15 @@
 # Change Log
 All notable changes to the "vuetify-resize-drawer" plugin will be documented in this file.
 
+## v3.2.0
+2024-10-14
+[main] (@webdevnerdstuff)
+* Adding `bottom` and `top` location support
+* Fix issue with handle mouse position
+* Change `width-snap-back` prop to `snap-back` (`width-snap-back` is backwards compatible)
+* Add `max-height` and `min-height` props
+* Update packages
+
 ## v3.1.6
 2024-03-14
 [main] (@webdevnerdstuff)

dist/VResizeDrawer-CJUYR-yg.mjs renamed to dist/VResizeDrawer-4DGmo2jm.mjs

@@ -1,7 +1,7 @@
 import o from "./vuetify-resize-drawer.es.js";
 /**
  * @name @wdns/vuetify-resize-drawer
- * @version 3.1.6
+ * @version 3.2.0
  * @description The vuetify-resize-drawer component extends the functionality of the v-navigation-drawer so that it is resizable by the user.
  * @author WebDevNerdStuff & Bunnies... lots and lots of bunnies! <webdevnerdstuff@gmail.com> (https://webdevnerdstuff.com)
  * @copyright Copyright 2024, WebDevNerdStuff

dist/VResizeDrawer-gMyz5eO6.js renamed to dist/VResizeDrawer-BHbwTRMl.js

@@ -1,6 +1,6 @@
 "use strict";/**
  * @name @wdns/vuetify-resize-drawer
- * @version 3.1.6
+ * @version 3.2.0
  * @description The vuetify-resize-drawer component extends the functionality of the v-navigation-drawer so that it is resizable by the user.
  * @author WebDevNerdStuff & Bunnies... lots and lots of bunnies! <webdevnerdstuff@gmail.com> (https://webdevnerdstuff.com)
  * @copyright Copyright 2024, WebDevNerdStuff

dist/plugin/VResizeDrawer.vue.d.ts

@@ -1,3 +1,4 @@
-import { UseConvertToUnit } from '../types';
+import { Props, UseConvertToUnit } from '../types';
 export declare const useConvertToUnit: UseConvertToUnit;
 export declare const useConvertToNumber: (val: string | number) => number;
+export declare const useUnitToPx: (valueWithUnit: Props["handleIconSize"]) => number;

dist/plugin/composables/helpers.d.ts

@@ -1,4 +1,11 @@
 import { UseDrawerStyles, UseHandleContainerStyles, UseHandleIconStyles } from '../types';
+export declare const iconSizes: {
+    default: string;
+    large: string;
+    small: string;
+    'x-large': string;
+    'x-small': string;
+};
 export declare const useDrawerStyles: UseDrawerStyles;
 export declare const useHandleContainerStyles: UseHandleContainerStyles;
 export declare const useHandleIconStyles: UseHandleIconStyles;

dist/plugin/composables/styles.d.ts

@@ -1,7 +1,6 @@
-import type { App } from 'vue';
-import type { GlobalOptions } from './types';
-import './styles/main.scss';
-import VResizeDrawer from './VResizeDrawer.vue';
+import { App } from 'vue';
+import { GlobalOptions } from './types';
+import { default as VResizeDrawer } from './VResizeDrawer.vue';
 export declare const globalOptions: unique symbol;
 export declare function createVResizeDrawer(options?: GlobalOptions): {
     install: (app: App) => void;

dist/plugin/index.d.ts

@@ -1,15 +1,16 @@
 import { CSSProperties, MaybeRef } from 'vue';
-import type { IconOptions, ThemeInstance } from 'vuetify';
-import VResizeDrawer from '../VResizeDrawer.vue';
-import type { VNavigationDrawer } from 'vuetify/components';
+import { IconOptions, ThemeInstance } from 'vuetify';
+import { default as VResizeDrawer } from '../VResizeDrawer.vue';
+import { VIcon, VNavigationDrawer } from 'vuetify/components';
 export * from '../index';
 export type Classes = {
     [key: string]: boolean | undefined;
 };
 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' | undefined;
+export type DrawerLocations = 'bottom' | 'end' | 'start' | 'left' | 'right' | 'top' | undefined;
+type Height = number | string | undefined;
 export type HEXColor = string;
 export type HSLColor = [number, number, number];
 export type RGBColor = [number, number, number];
@@ -20,19 +21,23 @@ export interface Props {
     handleBorderWidth?: number | string;
     handleColor?: string | undefined;
     handleIcon?: string | undefined;
-    handleIconSize?: string | undefined;
+    handleIconSize?: VIcon['size'];
     handlePosition?: HandlePositions;
-    height?: number | string | undefined;
+    height?: Height;
     image?: VNavigationDrawer['image'];
     location?: DrawerLocations;
+    maxHeight?: Height;
     maxWidth?: VNavigationDrawer['width'];
+    minHeight?: Height;
     minWidth?: VNavigationDrawer['width'];
     modelValue?: VNavigationDrawer['modelValue'];
     name?: VNavigationDrawer['name'];
     rail?: VNavigationDrawer['rail'];
     railWidth?: VNavigationDrawer['railWidth'];
     resizable?: boolean | undefined;
+    saveHeight?: boolean | undefined;
     saveWidth?: boolean | undefined;
+    snapBack?: boolean | undefined;
     storageName?: string | undefined;
     storageType?: StorageType;
     tag?: VNavigationDrawer['tag'];
@@ -53,10 +58,11 @@ export interface UseConvertToUnit {
 export interface UseSetStorage {
     (options: {
         action?: string;
+        resizedAmount?: MaybeRef<string | number | undefined>;
         resizedWidth?: MaybeRef<string | number | undefined>;
         storageType?: StorageType;
         storageName?: Props['storageName'];
-        saveWidth?: Props['saveWidth'];
+        saveAmount?: Props['saveWidth'] | Props['saveHeight'];
         rail?: Props['rail'];
     }): void;
 }
@@ -89,19 +95,24 @@ export interface UseHandleIconClasses {
 export interface UseDrawerStyles {
     (options: {
         isMouseDown?: MaybeRef<boolean>;
+        location?: Props['location'];
+        maxHeight?: Props['maxHeight'];
+        minHeight?: Props['minHeight'];
         maxWidth?: Props['maxWidth'];
         minWidth?: Props['minWidth'];
         rail?: Props['rail'];
         railWidth?: Props['railWidth'];
-        resizedWidth: MaybeRef<string | number | undefined>;
-        widthSnapBack?: Props['widthSnapBack'];
+        resizedAmount: MaybeRef<string | number | undefined>;
+        snapBack?: Props['snapBack'];
     }): CSSProperties;
 }
 export interface UseHandleContainerStyles {
     (options: {
         borderWidth?: Props['handleBorderWidth'];
         handleColor?: Props['handleColor'];
         iconSize?: Props['handleIconSize'];
+        iconSizeUnit?: number;
+        location?: Props['location'];
         position?: Props['handlePosition'];
         theme: ThemeInstance;
     }): CSSProperties;

dist/plugin/types/index.d.ts

@@ -76,8 +76,62 @@
 			}
 		}
 	}
+
+	&--bottom {
+		transition: min-height 0.3s;
+
+		.v-resize-drawer--handle-container {
+			&-position {
+				&-center {
+					left: 50%;
+					top: 0;
+					transform: translateX(-50%);
+				}
+
+				&-border {
+					cursor: row-resize;
+					left: 0%;
+					top: 0 !important;
+					width: 100% !important;
+				}
+			}
+		}
+	}
+
+	&--top {
+		top: 0 !important;
+		transition: min-height 0.3s;
+
+		.v-resize-drawer--handle-container {
+			&-position {
+				&-center {
+					bottom: 1px;
+					left: 50%;
+					top: unset;
+					transform: translateX(-50%);
+				}
+
+				&-border {
+					bottom: 0 !important;
+					cursor: row-resize;
+					left: 0%;
+					top: unset;
+					width: 100% !important;
+				}
+			}
+		}
+	}
+
+	&--bottom,
+	&--top {
+		.v-navigation-drawer__content {
+			flex: 1 1 auto;
+			position: relative;
+		}
+	}
 }
 
+
 @container v-resize-drawer (width > #{map.get(settings.$grid-breakpoints, 'xs')}) and (max-width: #{map.get(settings.$grid-breakpoints, 'sm') - 0.02}) {
 	.v-col {
 		&-xs-12 {