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

fix: problems in 'Button' and 'SelectButton'

parent 67c406c5

src/common/interfaces/componentsProps.ts

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

src/stories/components/Button/Button.vue

+3 −3
Original line number Diff line number Diff line
@@ -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;

src/stories/components/SelectButton/SelectButton.stories.ts

+21 −0
Original line number Diff line number Diff line
@@ -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: [

src/stories/components/SelectButton/SelectButton.vue

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