Skip to content

Commit 6cfbbe0

Browse files
webdevnerdstuffwebdevnerdstuff
committed
Adding in top/bottom support
1 parent 2c0ba96 commit 6cfbbe0

File tree

11 files changed

+333
-121
lines changed

11 files changed

+333
-121
lines changed

‎src/plugin/VResizeDrawer.vue

Lines changed: 159 additions & 78 deletions
Large diffs are not rendered by default.

‎src/plugin/composables/__tests__/__snapshots__/classes.test.ts.snap

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@ exports[`Classes Composable > useDrawerClasses > should return class object 1`]
1313
"v-navigation-drawer--right": false,
1414
"v-navigation-drawer--temporary": false,
1515
"v-resize-drawer": true,
16+
"v-resize-drawer--start": false,
1617
}
1718
`;
1819

‎src/plugin/composables/__tests__/storage.test.ts

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -66,7 +66,7 @@ describe('Storage Composable', () => {
6666
useGetStorage('local', storageName);
6767

6868
expect(window.localStorage.getItem).toHaveBeenCalled();
69-
expect(window.localStorage.getItem(storageName)).toMatchInlineSnapshot(`"100px"`);
69+
expect(window.localStorage.getItem(storageName)).toMatchInlineSnapshot(`"undefined"`);
7070
});
7171

7272
test('useSetStorage & useGetStorage - action set', () => {
@@ -84,7 +84,7 @@ describe('Storage Composable', () => {
8484
useGetStorage('local', storageName);
8585

8686
expect(window.localStorage.getItem).toHaveBeenCalled();
87-
expect(window.localStorage.getItem(storageName)).toMatchInlineSnapshot(`"100px"`);
87+
expect(window.localStorage.getItem(storageName)).toMatchInlineSnapshot(`"undefined"`);
8888
});
8989

9090
test('useGetStorage that has not been set, and return null value', () => {
@@ -137,7 +137,7 @@ describe('Storage Composable', () => {
137137
useGetStorage('session', storageName);
138138

139139
expect(window.sessionStorage.getItem).toHaveBeenCalled();
140-
expect(window.sessionStorage.getItem(storageName)).toMatchInlineSnapshot(`"100px"`);
140+
expect(window.sessionStorage.getItem(storageName)).toMatchInlineSnapshot(`"undefined"`);
141141
});
142142

143143
test('useSetStorage & useGetStorage - action set', () => {
@@ -155,7 +155,7 @@ describe('Storage Composable', () => {
155155
useGetStorage('session', storageName);
156156

157157
expect(window.sessionStorage.getItem).toHaveBeenCalled();
158-
expect(window.sessionStorage.getItem(storageName)).toMatchInlineSnapshot(`"100px"`);
158+
expect(window.sessionStorage.getItem(storageName)).toMatchInlineSnapshot(`"undefined"`);
159159
});
160160

161161
test('useGetStorage that has not been set, and return null value', () => {
@@ -178,7 +178,7 @@ describe('Storage Composable', () => {
178178
useGetStorage('session', storageName);
179179

180180
expect(window.sessionStorage.getItem).toHaveBeenCalled();
181-
expect(window.sessionStorage.getItem(storageName)).toMatchInlineSnapshot(`"100px"`);
181+
expect(window.sessionStorage.getItem(storageName)).toMatchInlineSnapshot(`"undefined"`);
182182
});
183183
});
184184
});

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

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@ describe('Styles Composable', () => {
2424
expect(data).toMatchInlineSnapshot(`
2525
{
2626
"transitionDuration": ".2s",
27-
"width": "300px",
27+
"width": undefined,
2828
}
2929
`);
3030
});
@@ -42,7 +42,7 @@ describe('Styles Composable', () => {
4242
expect(data).toMatchInlineSnapshot(`
4343
{
4444
"transitionDuration": "0s",
45-
"width": "256px",
45+
"width": undefined,
4646
}
4747
`);
4848
});
@@ -142,8 +142,9 @@ describe('Styles Composable', () => {
142142
expect(data).toMatchInlineSnapshot(`
143143
{
144144
"backgroundColor": "transparent",
145-
"height": "1em",
146-
"width": "1em",
145+
"height": "100%",
146+
"transform": undefined,
147+
"width": "undefinedpx",
147148
}
148149
`);
149150
});

‎src/plugin/composables/classes.ts

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,14 +9,21 @@ import {
99
export const useDrawerClasses: UseDrawerClasses = (options) => {
1010
const { absolute = false, expandOnHover, floating, isMouseover, location, rail, railWidth, temporary } = options;
1111

12+
let isLeft = location === 'left' || location === 'start' || typeof location === 'undefined';
13+
14+
if (location === 'top' || location === 'bottom') {
15+
isLeft = false;
16+
}
17+
1218
return {
1319
[`${componentName}`]: true,
20+
[`${componentName}--${location}`]: location === 'bottom' || location === 'top',
1421
'v-navigation-drawer--absolute': absolute ?? false,
1522
'v-navigation-drawer--custom-rail': Number(railWidth) !== 56,
1623
'v-navigation-drawer--fixed': !absolute,
1724
'v-navigation-drawer--floating': floating,
1825
'v-navigation-drawer--is-mouseover': unref(isMouseover),
19-
'v-navigation-drawer--left': location === 'left' || location === 'start' || typeof location === 'undefined',
26+
'v-navigation-drawer--left': isLeft,
2027
'v-navigation-drawer--open-on-hover': expandOnHover,
2128
'v-navigation-drawer--rail': rail ?? false,
2229
'v-navigation-drawer--right': location === 'right' || location === 'end',

‎src/plugin/composables/helpers.ts

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import {
2+
Props,
23
UseConvertToUnit,
34
} from '@/plugin/types';
45

@@ -70,3 +71,30 @@ export const useConvertToNumber = (val: string | number): number => {
7071

7172
return drawerWidth;
7273
};
74+
75+
76+
/*
77+
* Converts a unit to px.
78+
*/
79+
export const useUnitToPx = (valueWithUnit: Props['handleIconSize']): number => {
80+
if (!valueWithUnit) return 0;
81+
82+
// Create a temporary element for calculating the value
83+
const tempElement = document.createElement('div');
84+
tempElement.style.position = 'absolute';
85+
tempElement.style.visibility = 'hidden';
86+
tempElement.style.width = valueWithUnit as string;
87+
88+
// Append the temporary element to the specified parent or body
89+
const targetParent = document.body;
90+
targetParent.appendChild(tempElement);
91+
92+
// Get the computed width in px
93+
const computedValue = getComputedStyle(tempElement).width;
94+
95+
// Remove the temporary element after calculation
96+
targetParent.removeChild(tempElement);
97+
98+
// Return the numeric px value
99+
return parseFloat(computedValue);
100+
};

‎src/plugin/composables/storage.ts

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -15,26 +15,26 @@ export function useGetStorage(storageType: string, storageName: string): string
1515

1616

1717
export const useSetStorage: UseSetStorage = (options) => {
18-
const { action = 'update', rail, resizedWidth, saveWidth, storageName, storageType } = options;
18+
const { action = 'update', rail, resizedAmount, saveAmount, storageName, storageType } = options;
1919

20-
if (!saveWidth || rail) {
20+
if (rail && !saveAmount) {
2121
return;
2222
}
2323

24-
let width = resizedWidth;
25-
width = width ?? undefined;
24+
let amount = resizedAmount;
25+
amount = amount ?? undefined;
2626

2727
if (action === 'set') {
28-
width = useGetStorage(storageType as string, storageName as string) ?? '';
29-
width = width || resizedWidth;
28+
amount = useGetStorage(storageType as string, storageName as string) ?? '';
29+
amount = amount || resizedAmount;
3030
}
3131

3232
if (storageType === 'local') {
33-
localStorage.setItem(storageName as string, String(width));
33+
localStorage.setItem(storageName as string, String(amount));
3434
}
3535

3636
if (storageType === 'session') {
37-
sessionStorage.setItem(storageName as string, String(width));
37+
sessionStorage.setItem(storageName as string, String(amount));
3838
}
3939

4040
return;

‎src/plugin/composables/styles.ts

Lines changed: 46 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ import { useConvertToUnit } from '@composables/helpers';
77
import { useGetColor } from '@composables/colors';
88

99

10-
const iconSizes = {
10+
export const iconSizes = {
1111
default: '1.5em',
1212
large: '1.75em',
1313
small: '1.25em',
@@ -18,49 +18,77 @@ const iconSizes = {
1818

1919
// -------------------------------------------------- Drawer //
2020
export const useDrawerStyles: UseDrawerStyles = (options) => {
21-
const { isMouseDown, maxWidth, minWidth, rail, railWidth, resizedWidth, widthSnapBack } = options;
21+
const { isMouseDown, location, maxWidth, minWidth, rail, railWidth, resizedAmount, widthSnapBack } = options;
2222

2323
if (rail) {
2424
return {};
2525
}
2626

27-
let widthValue = rail ? railWidth : unref(resizedWidth);
27+
let mountValue = rail ? railWidth : unref(resizedAmount);
2828

2929
if (!widthSnapBack) {
30-
if (parseInt(widthValue as string) >= parseInt(maxWidth as string)) {
31-
widthValue = parseInt(maxWidth as string);
30+
if (parseInt(mountValue as string) >= parseInt(maxWidth as string)) {
31+
mountValue = parseInt(maxWidth as string);
3232
}
3333

34-
if (parseInt(widthValue as string) <= parseInt(minWidth as string)) {
35-
widthValue = parseInt(minWidth as string);
34+
if (parseInt(mountValue as string) <= parseInt(minWidth as string)) {
35+
mountValue = parseInt(minWidth as string);
3636
}
3737
}
3838

39-
return {
40-
transitionDuration: unref(isMouseDown) ? '0s' : '.2s',
41-
width: useConvertToUnit({ value: widthValue as string }) as string,
42-
};
39+
let response = {};
40+
41+
if (location === 'top' || location === 'bottom') {
42+
response = {
43+
minHeight: `${useConvertToUnit({ value: mountValue as string }) as string} !important`,
44+
transitionDuration: unref(isMouseDown) ? '0s' : '.2s',
45+
width: '100%',
46+
};
47+
}
48+
else {
49+
response = {
50+
transitionDuration: unref(isMouseDown) ? '0s' : '.2s',
51+
width: useConvertToUnit({ value: mountValue as string }) as string,
52+
};
53+
}
54+
55+
return response;
4356
};
4457

4558

4659
// -------------------------------------------------- Handle //
4760
export const useHandleContainerStyles: UseHandleContainerStyles = (options) => {
48-
const { borderWidth, handleColor, iconSize, position, theme } = options;
61+
const { borderWidth, handleColor, iconSizeUnit, location, position, theme } = options;
62+
63+
const transform = `translateX(-50%) ${location === 'top' ? 'rotate(90deg)' : 'rotate(-90deg)'}`;
64+
let height = '100%';
65+
let width = '100%';
66+
67+
if (location === 'bottom' || location === 'top') {
68+
height = `${iconSizeUnit}px`;
69+
70+
if (position === 'border') {
71+
height = useConvertToUnit({ value: borderWidth as string }) as string;
72+
}
73+
}
74+
else {
75+
width = useConvertToUnit({ value: borderWidth as string }) as string;
76+
}
77+
4978

5079
if (position === 'border') {
5180
return {
5281
backgroundColor: useGetColor(handleColor as string, theme),
53-
height: '100%',
54-
width: useConvertToUnit({ value: borderWidth as string }) as string,
82+
height,
83+
width,
5584
};
5685
}
5786

58-
const dimensions = iconSizes[iconSize as string];
59-
6087
return {
6188
backgroundColor: 'transparent',
62-
height: dimensions,
63-
width: dimensions,
89+
height: height,
90+
transform: location === 'top' || location === 'bottom' ? transform : undefined,
91+
width: `${iconSizeUnit}px`,
6492
};
6593
};
6694

‎src/plugin/styles/main.scss

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -76,8 +76,61 @@
7676
}
7777
}
7878
}
79+
80+
&--bottom {
81+
transition: min-height 0.3s;
82+
83+
.v-resize-drawer--handle-container {
84+
&-position {
85+
&-center {
86+
left: 50%;
87+
top: 0;
88+
transform: translateX(-50%);
89+
}
90+
91+
&-border {
92+
cursor: row-resize;
93+
left: 0%;
94+
top: 0 !important;
95+
width: 100% !important;
96+
}
97+
}
98+
}
99+
}
100+
101+
&--top {
102+
transition: min-height 0.3s;
103+
104+
.v-resize-drawer--handle-container {
105+
&-position {
106+
&-center {
107+
bottom: 1px;
108+
left: 50%;
109+
top: unset;
110+
transform: translateX(-50%);
111+
}
112+
113+
&-border {
114+
bottom: 0 !important;
115+
cursor: row-resize;
116+
left: 0%;
117+
top: unset;
118+
width: 100% !important;
119+
}
120+
}
121+
}
122+
}
123+
124+
&--bottom,
125+
&--top {
126+
.v-navigation-drawer__content {
127+
flex: 1 1 auto;
128+
position: relative;
129+
}
130+
}
79131
}
80132

133+
81134
@container v-resize-drawer (width > #{map.get(settings.$grid-breakpoints, 'xs')}) and (max-width: #{map.get(settings.$grid-breakpoints, 'sm') - 0.02}) {
82135
.v-col {
83136
&-xs-12 {

0 commit comments

Comments
 (0)