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

fix: errors in components

parent b106aed3

package.json

+1 −1
Original line number Diff line number Diff line 
{

  "name": "@d.malygin/UI_storybook",

  "version": "1.0.7",

  "version": "1.0.8",

  "type": "module",

  "scripts": {

    "dev": "vite",

src/common/interfaces/componentsProps.ts

+4 −0
Original line number Diff line number Diff line
@@ -170,6 +170,9 @@ export interface IModalProps { 
  dismissible?: boolean;

  closeIcon?: TIcon;

  headerDivider?: boolean;

  headerHeight?: string;

  headerAllowWrap?: boolean;

  paddingRightOnActive?: string;

}



export interface IPopupProps {
@@ -300,6 +303,7 @@ export interface IRatingProps { 
}



export interface ITSProps {

  active?: boolean;

  size?: TSize;

  theme?: TThemeColorNoWhite;

  negativeTheme?: TThemeColor;

src/components/Drawer/Drawer.vue

+7 −14
Original line number Diff line number Diff line
@@ -24,24 +24,17 @@ const props = withDefaults(defineProps<IDrawerProps>(), { 
});

const body = document.querySelector('body')!;

const emit = defineEmits(['onClose']);

const visible = defineModel<boolean>('visible', {

  set(value) {

    if (!value) {

      (window as CustomWindow).blockPopupActions = false;

      body.style.overflow = 'auto';

      body.style.paddingRight = '0';

      body.style.marginRight = '0';

      emit('onClose');

    }

    return value;

  },

}) as Ref<boolean>;

const visible = defineModel<boolean>('visible') as Ref<boolean>;

watch(visible, () => {

  if (visible.value) {

    (window as CustomWindow).blockPopupActions = true;

    body.style.overflow = 'hidden';

    body.style.overflowY = 'hidden';

    body.style.paddingRight = props.paddingRightOnActive;

    body.style.marginRight = `-${props.paddingRightOnActive}`;

  } else {

    (window as CustomWindow).blockPopupActions = false;

    body.style.overflowY = 'auto';

    body.style.paddingRight = '0';

    emit('onClose');

  }

});

const dividerHeaderTop = computed(() => `calc(${props.headerHeight} + 20px + 8px`);

src/components/Modal/Modal.vue

+13 −15
Original line number Diff line number Diff line
@@ -16,30 +16,28 @@ const props = withDefaults(defineProps<IModalProps>(), { 
  darknessTheme: '500',

  darknessTextColor: '500',

  width: '30%',

  height: '30%',

  height: 'max-content',

  headerHeight: 'max-content',

  paddingRightOnActive: '14px',

  headerDivider: false,

  closeIcon: 'Cross',

});

const body = document.querySelector('body')!;

const emit = defineEmits(['onClose']);

const visible = defineModel('visible', {

  set(value) {

    if (!value) {

      (window as CustomWindow).blockPopupActions = false;

      body.style.overflow = 'auto';

      body.style.paddingRight = '0';

      emit('onClose');

    }

    return value;

  },

});

const visible = defineModel('visible');

watch(visible, () => {

  if (visible.value) {

    (window as CustomWindow).blockPopupActions = true;

    body.style.overflow = 'hidden';

    body.style.paddingRight = '14px';

    body.style.paddingRight = props.paddingRightOnActive;

  } else {

    (window as CustomWindow).blockPopupActions = false;

    body.style.overflow = 'auto';

    body.style.paddingRight = '0';

    emit('onClose');

  }

});

const headerWhiteSpace = computed(() => (props.headerAllowWrap ? 'normal' : 'nowrap'));

const themeColor = computed(() => convertThemeToColor(props.theme, props.darknessTheme));

const secondaryColor = computed(() => convertThemeToSecondaryColor(props.theme, props.darknessTheme));

const color = computed(() =>
@@ -83,7 +81,7 @@ document.addEventListener('keydown', onKeydown); 
      ]"

    >

      <header class="modalHeader">

        <div class="headerContent">

        <div class="headerContent" :style="`height: ${headerHeight}`">

          <slot name="header" />

        </div>

        <button class="buttonClose" @click.prevent="visible = false">
@@ -147,7 +145,7 @@ document.addEventListener('keydown', onKeydown); 
.headerContent {

  font-weight: bold;

  overflow: auto;

  white-space: nowrap;

  white-space: v-bind(headerWhiteSpace);

}

.main {

  padding-right: 5px;

src/components/SelectButton/SelectButton.vue

+1 −1
Original line number Diff line number Diff line
@@ -79,7 +79,7 @@ const calcItemColor = (item: ISBOption) => { 
  }

};

const calcBGColorItem = (item: ISBOption) => {

  return (value.value && value.value === item.value) || String(value.value) === item.label

  return ((value.value ?? false) && value.value === item.value) || String(value.value) === item.label

    ? activeBGColorComputed.value

    : item.backgroundColor

      ? convertThemeToColor(item.backgroundColor, item.darknessBackgroundColor ?? '500')