From 3eeb125e87eefff7c7a9a46eb3e40f0150633957 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=D0=94=D0=BC=D0=B8=D1=82=D1=80=D0=B8=D0=B9=20=D0=9C=D0=B0?=
=?UTF-8?q?=D0=BB=D1=8E=D0=B3=D0=B8=D0=BD?= <d.malygin@iqdev.digital>
Date: Sat, 22 Feb 2025 12:01:32 +0500
Subject: [PATCH] refactor: Drawer
---
src/common/interfaces/componentsProps.ts | 2 ++
src/components/Drawer/Drawer.stories.ts | 2 ++
src/components/Drawer/Drawer.vue | 13 +++++++++----
3 files changed, 13 insertions(+), 4 deletions(-)
diff --git a/src/common/interfaces/componentsProps.ts b/src/common/interfaces/componentsProps.ts
index 6bd4b15..3c788be 100644
--- a/src/common/interfaces/componentsProps.ts
+++ b/src/common/interfaces/componentsProps.ts
@@ -155,6 +155,8 @@ export interface IDrawerProps {
closeIcon?: TIcon;
headerDivider?: boolean;
footerDivider?: boolean;
+ headerHeight?: string;
+ paddingRightOnActive?: string;
}
export interface IModalProps {
diff --git a/src/components/Drawer/Drawer.stories.ts b/src/components/Drawer/Drawer.stories.ts
index 77902ce..f572651 100644
--- a/src/components/Drawer/Drawer.stories.ts
+++ b/src/components/Drawer/Drawer.stories.ts
@@ -26,6 +26,8 @@ const meta: Meta = {
closeIcon: { control: 'select', options: Object.keys(iconsSet) },
headerDivider: { control: 'boolean' },
footerDivider: { control: 'boolean' },
+ headerHeight: { control: 'text' },
+ paddingRightOnActive: { control: 'text' },
darknessTheme: { control: 'select', options: ['100', '200', '300', '400', '500', '600', '700', '800', '900'] },
darknessTextColor: { control: 'select', options: ['100', '200', '300', '400', '500', '600', '700', '800', '900'] },
theme: {
diff --git a/src/components/Drawer/Drawer.vue b/src/components/Drawer/Drawer.vue
index c595d4a..e82e91b 100644
--- a/src/components/Drawer/Drawer.vue
+++ b/src/components/Drawer/Drawer.vue
@@ -15,8 +15,10 @@ const props = withDefaults(defineProps<IDrawerProps>(), {
modal: true,
dismissible: true,
theme: 'white',
+ headerHeight: '37px',
darknessTheme: '500',
closeIcon: 'Cross',
+ paddingRightOnActive: '14px',
headerDivider: false,
footerDivider: false,
});
@@ -28,6 +30,7 @@ const visible = defineModel<boolean>('visible', {
(window as CustomWindow).blockPopupActions = false;
body.style.overflow = 'auto';
body.style.paddingRight = '0';
+ body.style.marginRight = '0';
emit('onClose');
}
return value;
@@ -37,9 +40,11 @@ watch(visible, () => {
if (visible.value) {
(window as CustomWindow).blockPopupActions = true;
body.style.overflow = 'hidden';
- body.style.paddingRight = '14px';
+ body.style.paddingRight = props.paddingRightOnActive;
+ body.style.marginRight = `-${props.paddingRightOnActive}`;
}
});
+const dividerHeaderTop = computed(() => `calc(${props.headerHeight} + 20px + 8px`);
const themeColor = computed(() => convertThemeToColor(props.theme, props.darknessTheme));
const secondaryColor = computed(() => convertThemeToSecondaryColor(props.theme, props.darknessTheme));
const color = computed(() =>
@@ -158,8 +163,8 @@ const drawerWidth = computed(() => {
font-size: 32px;
width: calc(100% - 30px);
margin-bottom: 10px;
- min-height: 37px;
- height: 37px;
+ min-height: v-bind(headerHeight);
+ height: v-bind(headerHeight);
overflow: auto;
}
.main {
@@ -179,7 +184,7 @@ const drawerWidth = computed(() => {
.divider-header {
position: absolute;
left: 20px;
- top: 65px;
+ top: v-bind(dividerHeaderTop);
width: calc(100% - 40px);
}
.buttonClose {
--
GitLab