From 234f5762a792ec72a595ac283628e04521317c3a 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, 22 Dec 2024 12:07:33 +0500
Subject: [PATCH] fix: component's colors functional
---
src/App.vue | 5 ++-
src/common/helpers/common.ts | 4 +--
src/common/interfaces/componentsProps.ts | 3 +-
.../components/Drawer/Drawer.stories.ts | 1 +
src/stories/components/Modal/Modal.stories.ts | 21 +++++++++++
src/stories/components/Modal/Modal.vue | 1 +
src/stories/components/Popup/Popup.stories.ts | 21 -----------
src/stories/components/Popup/Popup.vue | 9 ++---
.../SelectButton/SelectButton.stories.ts | 25 ++-----------
.../components/SelectButton/SelectButton.vue | 35 +++++++++++++++----
.../components/TreeList/TreeList.stories.ts | 4 +--
11 files changed, 66 insertions(+), 63 deletions(-)
diff --git a/src/App.vue b/src/App.vue
index 21513ee..c8ef7e7 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -325,7 +325,8 @@ const sliderValue = ref(1);
{
label: 'font-family',
theme: 'green',
- color: 'white',
+ color: 'red',
+ darknessColor: '500',
link: 'https://developer.mozilla.org/en-US/docs/Web/CSS/font-family',
linkBlank: true,
textStyle: 'bold',
@@ -333,6 +334,8 @@ const sliderValue = ref(1);
{
label: 'Second',
theme: 'red',
+ color: 'sky',
+ darknessColor: '500',
darknessTheme: '600',
textStyle: 'italic',
},
diff --git a/src/common/helpers/common.ts b/src/common/helpers/common.ts
index 4fc18fd..aa4659a 100644
--- a/src/common/helpers/common.ts
+++ b/src/common/helpers/common.ts
@@ -32,8 +32,8 @@ export const convertThemeToColor = (theme: TThemeColor, darkness: TDarkness | st
*/
export const convertThemeToSecondaryColor = (theme: TThemeColor, darkness: TDarkness | string = '500') => {
return theme === 'white' || theme === 'black'
- ? convertWhiteOrBlackToColor(theme, darkness)
- : convertThemeToColor(theme, String(100 + ((darkness + 600) % 900)));
+ ? convertWhiteOrBlackToColor(theme, darkness as TDarkness)
+ : convertThemeToColor(theme, String(100 + ((+darkness + 600) % 900)));
};
export const convertThemeToTextColor = (theme: TThemeColor, darkness: TDarkness | string = '500') => {
diff --git a/src/common/interfaces/componentsProps.ts b/src/common/interfaces/componentsProps.ts
index 0fae7b9..8812742 100644
--- a/src/common/interfaces/componentsProps.ts
+++ b/src/common/interfaces/componentsProps.ts
@@ -81,6 +81,7 @@ export interface IDrawerProps {
theme?: TThemeColor;
textColor?: TThemeColor;
darknessTheme?: TDarkness;
+ darknessTextColor?: TDarkness;
modal?: boolean;
dismissible?: boolean;
closeIcon?: TIcons;
@@ -90,9 +91,7 @@ export interface IDrawerProps {
export interface IModalProps {
theme?: TThemeColor;
- textColor?: TThemeColor;
darknessTheme?: TDarkness;
- darknessTextColor?: TDarkness;
width?: string;
height?: string;
position?: TExpandedPosition;
diff --git a/src/stories/components/Drawer/Drawer.stories.ts b/src/stories/components/Drawer/Drawer.stories.ts
index e520f80..f4320b6 100644
--- a/src/stories/components/Drawer/Drawer.stories.ts
+++ b/src/stories/components/Drawer/Drawer.stories.ts
@@ -27,6 +27,7 @@ const meta: Meta = {
headerDivider: { control: 'boolean' },
footerDivider: { control: 'boolean' },
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: {
control: 'select',
options: [
diff --git a/src/stories/components/Modal/Modal.stories.ts b/src/stories/components/Modal/Modal.stories.ts
index 0d39eaa..6ac70ab 100644
--- a/src/stories/components/Modal/Modal.stories.ts
+++ b/src/stories/components/Modal/Modal.stories.ts
@@ -28,6 +28,7 @@ const meta: Meta = {
options: ['top', 'right', 'bottom', 'left', 'topLeft', 'topRight', 'bottomLeft', 'bottomRight'],
},
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: {
control: 'select',
options: [
@@ -48,6 +49,26 @@ const meta: Meta = {
'black',
],
},
+ textColor: {
+ control: 'select',
+ options: [
+ 'white',
+ 'blue',
+ 'sky',
+ 'cyan',
+ 'teal',
+ 'green',
+ 'yellow',
+ 'orange',
+ 'pink',
+ 'fuchsia',
+ 'purple',
+ 'indigo',
+ 'rose',
+ 'red',
+ 'black',
+ ],
+ },
},
args: {},
} satisfies Meta<typeof Modal>;
diff --git a/src/stories/components/Modal/Modal.vue b/src/stories/components/Modal/Modal.vue
index db55212..74cd2c4 100644
--- a/src/stories/components/Modal/Modal.vue
+++ b/src/stories/components/Modal/Modal.vue
@@ -9,6 +9,7 @@ const props = withDefaults(defineProps<IModalProps>(), {
dismissible: false,
theme: 'white',
darknessTheme: '500',
+ darknessTextColor: '500',
width: '30%',
height: '30%',
headerDivider: false,
diff --git a/src/stories/components/Popup/Popup.stories.ts b/src/stories/components/Popup/Popup.stories.ts
index a2bf63b..20cdd34 100644
--- a/src/stories/components/Popup/Popup.stories.ts
+++ b/src/stories/components/Popup/Popup.stories.ts
@@ -21,7 +21,6 @@ const meta: Meta = {
maxHeight: { control: 'text' },
padding: { 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: {
control: 'select',
options: [
@@ -42,26 +41,6 @@ const meta: Meta = {
'black',
],
},
- textColor: {
- control: 'select',
- options: [
- 'white',
- 'blue',
- 'sky',
- 'cyan',
- 'teal',
- 'green',
- 'yellow',
- 'orange',
- 'pink',
- 'fuchsia',
- 'purple',
- 'indigo',
- 'rose',
- 'red',
- 'black',
- ],
- },
},
args: {},
} satisfies Meta<typeof Popup>;
diff --git a/src/stories/components/Popup/Popup.vue b/src/stories/components/Popup/Popup.vue
index 0df4d53..8b107ba 100644
--- a/src/stories/components/Popup/Popup.vue
+++ b/src/stories/components/Popup/Popup.vue
@@ -1,7 +1,7 @@
<script setup lang="ts">
import type { IPopupProps } from '@interfaces/componentsProps';
import { computed, ref } from 'vue';
-import { convertThemeToColor, convertThemeToSecondaryColor, convertThemeToTextColor } from '@helpers/common';
+import { convertThemeToColor, convertThemeToSecondaryColor } from '@helpers/common';
const props = withDefaults(defineProps<IPopupProps>(), {
parentSelector: 'body',
@@ -15,11 +15,6 @@ const props = withDefaults(defineProps<IPopupProps>(), {
const active = defineModel<boolean>('active');
const themeColor = computed(() => convertThemeToColor(props.theme, props.darknessTheme));
const secondaryColor = computed(() => convertThemeToSecondaryColor(props.theme, props.darknessTheme));
-const color = computed(() =>
- props.textColor
- ? convertThemeToColor(props.textColor, props.darknessTextColor)
- : convertThemeToTextColor(props.theme, props.darknessTheme),
-);
const top = ref();
const left = ref();
@@ -52,7 +47,7 @@ document.addEventListener('pointerdown', (e) => {
oncontextmenu="return false"
id="popup"
@pointerdown.stop=""
- :style="`top: ${top}px; left: ${left}px; opacity: ${active ? 1 : 0}; pointer-events: ${active ? 'auto' : 'none'}; padding: ${padding}; color: ${color}`"
+ :style="`top: ${top}px; left: ${left}px; opacity: ${active ? 1 : 0}; pointer-events: ${active ? 'auto' : 'none'}; padding: ${padding}`"
>
<div :style="`max-width: ${maxWidth}; max-height: ${maxHeight}; overflow: auto; padding-right: 5px`">
<slot />
diff --git a/src/stories/components/SelectButton/SelectButton.stories.ts b/src/stories/components/SelectButton/SelectButton.stories.ts
index bb6a4ba..4dc87e4 100644
--- a/src/stories/components/SelectButton/SelectButton.stories.ts
+++ b/src/stories/components/SelectButton/SelectButton.stories.ts
@@ -85,26 +85,6 @@ const meta: Meta = {
'black',
],
},
- border: {
- control: 'select',
- options: [
- 'white',
- 'blue',
- 'sky',
- 'cyan',
- 'teal',
- 'green',
- 'yellow',
- 'orange',
- 'pink',
- 'fuchsia',
- 'purple',
- 'indigo',
- 'rose',
- 'red',
- 'black',
- ],
- },
disabled: { control: 'boolean' },
},
args: {},
@@ -136,22 +116,23 @@ export const LargeFull: Story = {
{
label: 'First',
color: 'white',
+ darknessColor: '900',
backgroundColor: 'black',
},
{
label: 'Second',
color: 'red',
activeColor: 'blue',
+ darknessColor: '700',
backgroundColor: 'yellow',
},
{
label: 'Third',
activeColor: 'green',
+ darknessColor: '700',
backgroundColor: 'purple',
},
],
-
- border: 'sky',
activeBackgroundColor: 'red',
rounded: true,
disabled: false,
diff --git a/src/stories/components/SelectButton/SelectButton.vue b/src/stories/components/SelectButton/SelectButton.vue
index 47032e0..9308fb0 100644
--- a/src/stories/components/SelectButton/SelectButton.vue
+++ b/src/stories/components/SelectButton/SelectButton.vue
@@ -2,6 +2,7 @@
import { computed } from 'vue';
import type { ISBProps } from '@interfaces/componentsProps';
import { convertThemeToSecondaryColor, convertThemeToColor, convertThemeToTextColor } from '@helpers/common';
+import type { ISBOption } from '@interfaces/componentsProp';
const props = withDefaults(defineProps<ISBProps>(), {
size: 'normal',
@@ -19,10 +20,8 @@ const color = computed(() =>
? convertThemeToColor(props.textColor, props.darknessTextColor)
: convertThemeToTextColor(props.theme, props.darknessTheme),
);
-const activeBackgroundColorComputed = computed(() =>
- props.activeBackgroundColor
- ? convertThemeToColor(props.activeBackgroundColor, props.darknessActiveBackgroundColor)
- : '',
+const activeBGColorComputed = computed(() =>
+ convertThemeToColor(props.activeBackgroundColor, props.darknessActiveBackgroundColor),
);
const borderColor = computed(() => convertThemeToSecondaryColor(props.theme, props.darknessTheme));
const textSize = computed(() => {
@@ -58,6 +57,30 @@ const buttonHeight = computed(() => {
}
return '40px';
});
+const calcItemColor = (item: ISBOption) => {
+ if ((item.value && value.value === item.value) || String(value.value) === item.label) {
+ const activeColor = item.activeColor;
+ if (!activeColor) {
+ return color.value;
+ } else {
+ return convertThemeToColor(activeColor, item.darknessActiveColor ?? '500');
+ }
+ } else {
+ const itemColor = item.color;
+ if (!itemColor) {
+ return color.value;
+ } else {
+ return convertThemeToColor(itemColor, item.darknessColor ?? '500');
+ }
+ }
+};
+const calcBGColorItem = (item: ISBOption) => {
+ return (value.value && value.value === item.value) || String(value.value) === item.label
+ ? activeBGColorComputed.value
+ : item.backgroundColor
+ ? convertThemeToColor(item.backgroundColor, item.darknessBackgroundColor ?? '500')
+ : themeColor.value;
+};
</script>
<template>
@@ -89,7 +112,7 @@ const buttonHeight = computed(() => {
"
>
<span
- :style="`background-color: ${activeBackgroundColorComputed && ((value && value === item.value) || value === item.label) ? activeBackgroundColorComputed : (convertThemeToColor(item.backgroundColor, item.darknessBackgroundColor ?? '500') ?? themeColor)}`"
+ :style="`background-color: ${calcBGColorItem(item)}`"
:class="[
'background',
{
@@ -102,7 +125,7 @@ const buttonHeight = computed(() => {
></span>
<span
v-if="!item.isLabelHidden"
- :style="`color: ${(item.value && value === item.value) || value === item.label ? (convertThemeToColor(item.activeColor, item.darknessActiveColor ?? '500') ?? color) : (convertThemeToColor(item.color, item.darknessColor ?? '500') ?? color)}; font-size: ${textSize}`"
+ :style="`color: ${calcItemColor(item)}; font-size: ${textSize}`"
:class="[
{
bold: item.textStyle === 'bold',
diff --git a/src/stories/components/TreeList/TreeList.stories.ts b/src/stories/components/TreeList/TreeList.stories.ts
index 7a587bb..cf724bc 100644
--- a/src/stories/components/TreeList/TreeList.stories.ts
+++ b/src/stories/components/TreeList/TreeList.stories.ts
@@ -125,8 +125,8 @@ export const Full: Story = {
color: 'red',
iconAfter: 'DiceIcon',
iconColor: 'red',
- darknessColor: 400,
- darknessIconColor: 400,
+ darknessColor: '300',
+ darknessIconColor: '700',
children: [
{
label: '1-1-1-1',
--
GitLab