Commit 3eeb125e authored by Дмитрий Малюгин's avatar Дмитрий Малюгин 🕓
Browse files

refactor: Drawer

parent ebb6a499

src/common/interfaces/componentsProps.ts

+2 −0
Original line number Diff line number Diff line
@@ -155,6 +155,8 @@ export interface IDrawerProps { 
  closeIcon?: TIcon;

  headerDivider?: boolean;

  footerDivider?: boolean;

  headerHeight?: string;

  paddingRightOnActive?: string;

}



export interface IModalProps {

src/components/Drawer/Drawer.stories.ts

+2 −0
Original line number Diff line number Diff line
@@ -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: {

src/components/Drawer/Drawer.vue

+9 −4
Original line number Diff line number Diff line
@@ -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 {