diff --git a/src/common/interfaces/componentsProps.ts b/src/common/interfaces/componentsProps.ts index 6bd4b15278ce840a324463249000f2bb808c9a22..3c788be6516d270b88092acb754243dfd6435320 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 77902ce71d86e72e40423229730c5c296ee22ca0..f5726515f0a84871c2284d58ddae4f2e9dab7490 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 c595d4a8c27833bb922fe7e833420cf41f70ee02..e82e91bb1f606445befb95ff3bcdfe5b360b2d99 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 {