From 089f7ce8856bb2667ba5b6781e57b7fc1c003825 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: Sun, 23 Feb 2025 14:13:05 +0500
Subject: [PATCH] fix: errors in components
---
package.json | 2 +-
src/common/interfaces/componentsProps.ts | 4 +++
src/components/Drawer/Drawer.vue | 21 +++++---------
src/components/Modal/Modal.vue | 28 +++++++++----------
src/components/SelectButton/SelectButton.vue | 2 +-
.../ToggleSwitch/ToggleSwitch.stories.ts | 1 +
src/components/ToggleSwitch/ToggleSwitch.vue | 10 ++++++-
7 files changed, 36 insertions(+), 32 deletions(-)
diff --git a/package.json b/package.json
index 1d11dd0..6acd9bc 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
{
"name": "@d.malygin/UI_storybook",
- "version": "1.0.7",
+ "version": "1.0.8",
"type": "module",
"scripts": {
"dev": "vite",
diff --git a/src/common/interfaces/componentsProps.ts b/src/common/interfaces/componentsProps.ts
index 3c788be..c70f377 100644
--- a/src/common/interfaces/componentsProps.ts
+++ b/src/common/interfaces/componentsProps.ts
@@ -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;
diff --git a/src/components/Drawer/Drawer.vue b/src/components/Drawer/Drawer.vue
index e82e91b..c050e1d 100644
--- a/src/components/Drawer/Drawer.vue
+++ b/src/components/Drawer/Drawer.vue
@@ -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`);
diff --git a/src/components/Modal/Modal.vue b/src/components/Modal/Modal.vue
index a5b8f32..7fe65f9 100644
--- a/src/components/Modal/Modal.vue
+++ b/src/components/Modal/Modal.vue
@@ -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;
diff --git a/src/components/SelectButton/SelectButton.vue b/src/components/SelectButton/SelectButton.vue
index ec3531d..e0a6180 100644
--- a/src/components/SelectButton/SelectButton.vue
+++ b/src/components/SelectButton/SelectButton.vue
@@ -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')
diff --git a/src/components/ToggleSwitch/ToggleSwitch.stories.ts b/src/components/ToggleSwitch/ToggleSwitch.stories.ts
index 1d3a681..c2b6362 100644
--- a/src/components/ToggleSwitch/ToggleSwitch.stories.ts
+++ b/src/components/ToggleSwitch/ToggleSwitch.stories.ts
@@ -14,6 +14,7 @@ const meta: Meta = {
},
},
argTypes: {
+ active: { control: 'boolean' },
size: { control: 'select', options: ['small', 'normal', 'large', 'huge'] },
negativeTheme: {
control: 'select',
diff --git a/src/components/ToggleSwitch/ToggleSwitch.vue b/src/components/ToggleSwitch/ToggleSwitch.vue
index 79578be..c4cf21e 100644
--- a/src/components/ToggleSwitch/ToggleSwitch.vue
+++ b/src/components/ToggleSwitch/ToggleSwitch.vue
@@ -1,5 +1,5 @@
<script setup lang="ts">
-import { computed, type Ref } from 'vue';
+import { computed, type Ref, watch } from 'vue';
import type { ITSProps } from '../../common/interfaces/componentsProps';
import { convertThemeToColor } from '../../common/helpers/common';
@@ -11,6 +11,14 @@ const props = withDefaults(defineProps<ITSProps>(), {
darknessNegativeTheme: '500',
});
const active = defineModel() as Ref<boolean>;
+const emit = defineEmits(['update']);
+
+if (props.active) {
+ active.value = props.active;
+}
+const propActive = computed(() => props.active);
+watch(propActive, () => (active.value = propActive.value));
+watch(active, () => emit('update', active));
const themeColor = computed(() => convertThemeToColor(props.theme, props.darknessTheme));
const inactiveColor = computed(() => convertThemeToColor(props.negativeTheme, props.darknessNegativeTheme));
--
GitLab