From 3e47e8505fcb51dc80f5b020e162613838b8c99d 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: Mon, 20 Jan 2025 18:30:00 +0500
Subject: [PATCH] refactor: 'Rating', add 'offTheme' prop
---
src/common/interfaces/componentsProps.ts | 1 +
src/components/Rating/Rating.stories.ts | 22 ++++++++++++++++++++++
src/components/Rating/Rating.vue | 6 ++++--
3 files changed, 27 insertions(+), 2 deletions(-)
diff --git a/src/common/interfaces/componentsProps.ts b/src/common/interfaces/componentsProps.ts
index 81547c6..8355d0b 100644
--- a/src/common/interfaces/componentsProps.ts
+++ b/src/common/interfaces/componentsProps.ts
@@ -222,6 +222,7 @@ export interface IRatingProps {
size?: TSize;
gap?: string;
theme?: TThemeColor;
+ offTheme?: TThemeColor;
darknessTheme?: TDarkness;
}
diff --git a/src/components/Rating/Rating.stories.ts b/src/components/Rating/Rating.stories.ts
index 320ab67..825fe69 100644
--- a/src/components/Rating/Rating.stories.ts
+++ b/src/components/Rating/Rating.stories.ts
@@ -38,6 +38,26 @@ const meta: Meta = {
'black',
],
},
+ offTheme: {
+ control: 'select',
+ options: [
+ 'white',
+ 'blue',
+ 'sky',
+ 'cyan',
+ 'teal',
+ 'green',
+ 'yellow',
+ 'orange',
+ 'pink',
+ 'fuchsia',
+ 'purple',
+ 'indigo',
+ 'rose',
+ 'red',
+ 'black',
+ ],
+ },
},
args: {},
} satisfies Meta<typeof Rating>;
@@ -53,6 +73,8 @@ export const Simple: Story = {
export const Small: Story = {
args: {
size: 'small',
+ theme: 'yellow',
+ offTheme: 'black',
},
};
diff --git a/src/components/Rating/Rating.vue b/src/components/Rating/Rating.vue
index b202f46..453a9d2 100644
--- a/src/components/Rating/Rating.vue
+++ b/src/components/Rating/Rating.vue
@@ -16,10 +16,12 @@ const props = withDefaults(defineProps<IRatingProps>(), {
const value = defineModel({
default: 0,
}) as Ref<number>;
+
const onHoverIndex = ref();
const themeColor = computed(() => convertThemeToColor(props.theme, props.darknessTheme));
-const themeColorOnHover = computed(() => convertThemeToColor(props.theme, '200'));
+const offColor = computed(() => (props.offTheme ? convertThemeToColor(props.offTheme, props.darknessTheme) : null));
+const themeColorOnHover = computed(() => convertThemeToColor(props.offTheme ?? props.theme, '200'));
const iconSize = computed(() => {
const size = props.size;
if (size === 'normal') return '20px';
@@ -43,7 +45,7 @@ const onActiveClick = (index: number) => {
<component
class="icon absoluteIcon"
:is="iconsSet['Star']"
- :color="themeColor"
+ :color="offColor ?? themeColor"
@pointerenter="onHoverIndex = index"
@pointerleave="onHoverIndex = null"
:size="iconSize"
--
GitLab