From 07695a3bc532ab3866bb17ee1ee0712a702d4334 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: Thu, 19 Dec 2024 13:54:58 +0500
Subject: [PATCH] fix: problems in 'Button' and 'SelectButton'
---
src/common/interfaces/componentsProps.ts | 2 ++
src/stories/components/Button/Button.vue | 6 +++---
.../SelectButton/SelectButton.stories.ts | 21 +++++++++++++++++++
.../components/SelectButton/SelectButton.vue | 13 +++++++++---
4 files changed, 36 insertions(+), 6 deletions(-)
diff --git a/src/common/interfaces/componentsProps.ts b/src/common/interfaces/componentsProps.ts
index c80425a..75c672d 100644
--- a/src/common/interfaces/componentsProps.ts
+++ b/src/common/interfaces/componentsProps.ts
@@ -95,8 +95,10 @@ export interface ISBProps {
options: ISBOption[];
size?: TSize;
rounded?: boolean;
+ theme?: TThemeColor;
activeBackgroundColor?: TThemeColor;
border?: TThemeColor;
+ darknessTheme?: TDarkness;
darknessActiveBackgroundColor?: TDarkness;
darknessBorder?: TDarkness;
disabled?: boolean;
diff --git a/src/stories/components/Button/Button.vue b/src/stories/components/Button/Button.vue
index 18a88d5..c1057fd 100644
--- a/src/stories/components/Button/Button.vue
+++ b/src/stories/components/Button/Button.vue
@@ -92,11 +92,12 @@ const width = computed(() => (props.width ? `${props.width}px` : 'max-content'))
justify-content: center;
align-items: center;
user-select: none;
+ transition: filter 0.2s ease-in-out;
}
-.button:hover .background {
+.button:hover {
filter: brightness(90%);
}
-.button:active .background {
+.button:active {
filter: brightness(75%);
}
.background {
@@ -106,7 +107,6 @@ const width = computed(() => (props.width ? `${props.width}px` : 'max-content'))
top: 0;
left: 0;
border-radius: 5px;
- transition: filter 0.2s ease-in-out;
}
.text {
position: relative;
diff --git a/src/stories/components/SelectButton/SelectButton.stories.ts b/src/stories/components/SelectButton/SelectButton.stories.ts
index 196bfc6..1187959 100644
--- a/src/stories/components/SelectButton/SelectButton.stories.ts
+++ b/src/stories/components/SelectButton/SelectButton.stories.ts
@@ -27,6 +27,27 @@ const meta: Meta = {
control: 'select',
options: [100, 200, 300, 400, 500, 600, 700, 800, 900],
},
+ darknessTheme: { control: 'select', options: [100, 200, 300, 400, 500, 600, 700, 800, 900] },
+ theme: {
+ control: 'select',
+ options: [
+ 'white',
+ 'blue',
+ 'sky',
+ 'cyan',
+ 'teal',
+ 'green',
+ 'yellow',
+ 'orange',
+ 'pink',
+ 'fuchsia',
+ 'purple',
+ 'indigo',
+ 'rose',
+ 'red',
+ 'black',
+ ],
+ },
activeBackgroundColor: {
control: 'select',
options: [
diff --git a/src/stories/components/SelectButton/SelectButton.vue b/src/stories/components/SelectButton/SelectButton.vue
index 31e8bb7..a067929 100644
--- a/src/stories/components/SelectButton/SelectButton.vue
+++ b/src/stories/components/SelectButton/SelectButton.vue
@@ -5,13 +5,21 @@ import { convertThemeToColor } from '@helpers/common';
const props = withDefaults(defineProps<ISBProps>(), {
size: 'normal',
+ theme: 'white',
activeBackgroundColor: 'sky',
+ darknessTheme: 500,
darknessActiveBackgroundColor: 500,
darknessBorder: 500,
});
const emit = defineEmits(['onClick']);
const value = defineModel<never>('value');
+const themeColor = computed(() => convertThemeToColor(props.theme, props.darknessTheme));
+const textColor = computed(() => {
+ if (props.theme === 'white' || (props.darknessTheme <= 600 && props.theme !== 'black'))
+ return '#000000';
+ return '#ffffff';
+});
const activeBackgroundColorComputed = computed(() =>
props.activeBackgroundColor
? convertThemeToColor(props.activeBackgroundColor, props.darknessActiveBackgroundColor)
@@ -84,7 +92,7 @@ const buttonHeight = computed(() => {
"
>
<span
- :style="`background-color: ${activeBackgroundColorComputed && ((value && value === item.value) || value === item.label) ? activeBackgroundColorComputed : convertThemeToColor(item.backgroundColor ?? 'white', item.darknessBackgroundColor ?? 500)}`"
+ :style="`background-color: ${activeBackgroundColorComputed && ((value && value === item.value) || value === item.label) ? activeBackgroundColorComputed : (convertThemeToColor(item.backgroundColor, item.darknessBackgroundColor ?? 500) ?? themeColor)}`"
:class="[
'background',
{
@@ -97,9 +105,8 @@ const buttonHeight = computed(() => {
></span>
<span
v-if="!item.isLabelHidden"
- :style="`color: ${(item.value && value === item.value) || value === item.label ? convertThemeToColor(item.activeColor ?? 'black', item.darknessActiveColor ?? 500) : convertThemeToColor(item.color ?? 'black', item.darknessColor ?? 500)}; font-size: ${textSize}`"
+ :style="`color: ${(item.value && value === item.value) || value === item.label ? (convertThemeToColor(item.activeColor, item.darknessActiveColor ?? 500) ?? textColor) : (convertThemeToColor(item.color, item.darknessColor ?? 500) ?? textColor)}; font-size: ${textSize}`"
:class="[
- 'text',
{
bold: item.textStyle === 'bold',
italic: item.textStyle === 'italic',
--
GitLab