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

refactor: 'Rating', add 'offTheme' prop

parent 69fb3dc1

src/common/interfaces/componentsProps.ts

+1 −0
Original line number Diff line number Diff line
@@ -222,6 +222,7 @@ export interface IRatingProps { 
  size?: TSize;

  gap?: string;

  theme?: TThemeColor;

  offTheme?: TThemeColor;

  darknessTheme?: TDarkness;

}

src/components/Rating/Rating.stories.ts

+22 −0
Original line number Diff line number Diff line
@@ -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',

  },

};

src/components/Rating/Rating.vue

+4 −2
Original line number Diff line number Diff line
@@ -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"