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

refactor: 'Select'

parent 0adb2ed1

src/stories/components/Select/Select.stories.ts

+3 −0
Original line number Diff line number Diff line
@@ -154,10 +154,12 @@ export const Full: Story = { 
        value: 'Sssss',

      },

    ],



    groups: [

      { name: 'Group', background: 'white', iconLeft: 'Archive' },

      { name: 'Group 2', background: 'red', iconLeft: 'Badge' },

    ],



    placeholder: 'Select a city',

    size: 'normal',

    width: '250px',
@@ -166,5 +168,6 @@ export const Full: Story = { 
    darknessTheme: '700',

    darknessBackground: '200',

    openIconColor: 'sky',

    filtered: true,

  },

};

src/stories/components/Select/Select.vue

+11 −4
Original line number Diff line number Diff line
@@ -72,7 +72,13 @@ const calcOptionColor = (color: TThemeColor | undefined, darknessColor: string | 
      >

        <SelectItem

          class="selected"

          :style="`color: ${selected ? calcOptionColor(selectedOption?.color, selectedOption?.darknessColor, textColor) : placeholderColor ? convertThemeToColor(placeholderColor, '700') : '#62708c'}; font-weight: 600`"

          :style="`color: ${

            selected

              ? calcOptionColor(selectedOption?.color, selectedOption?.darknessColor, textColor)

              : placeholderColor

                ? convertThemeToColor(placeholderColor, '700')

                : '#62708c'

          }; font-weight: 600`"

          :option="selectedOption"

          :fontSizeNumber="fontSizeNumber"

          :textColor="textColor"
@@ -104,19 +110,20 @@ const calcOptionColor = (color: TThemeColor | undefined, darknessColor: string | 
            <h3

              class="flexNoHover groupHeader"

              :style="`color: ${calcOptionColor(group.nameColor, darknessTheme, textColor)};

            background-color: ${calcOptionColor(group.background, group.background === 'white' ? '500' : '200', backgroundColor)}; font-size: calc(${fontSize} * 0.8); padding: calc(${padding} * 0.8)`"

              background-color: ${calcOptionColor(group.background, group.background === 'white' ? '500' : '200', backgroundColor)};

              font-size: calc(${fontSize} * 0.8); padding: calc(${padding} * 0.8)`"

            >

              <component

                v-if="group?.iconLeft"

                :is="iconsSet[group?.iconLeft]"

                :size="fontSizeNumber"

                :color="calcOptionColor(group?.iconLeftColor, darknessTheme, textColor)"

                :color="calcOptionColor(group?.iconLeftColor ?? group.nameColor, darknessTheme, textColor)"

              />{{ group.name }}

              <component

                v-if="group?.iconRight"

                :is="iconsSet[group?.iconRight]"

                :size="fontSizeNumber"

                :color="calcOptionColor(group?.iconRightColor, darknessTheme, textColor)"

                :color="calcOptionColor(group?.iconRightColor ?? group.nameColor, darknessTheme, textColor)"

              />

            </h3>

            <SelectItem