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

refactor: 'Select'

parent 93199354

src/components/Select/Select.stories.ts

+1 −0
Original line number Diff line number Diff line
@@ -18,6 +18,7 @@ const meta: Meta = { 
    width: { control: 'text' },

    filtered: { control: 'boolean' },

    disabled: { control: 'boolean' },

    noHighlight: { control: 'boolean' },

    placeholder: { control: 'text' },

    name: { control: 'text' },

    openIcon: { control: 'select', options: Object.keys(iconsSet) },

src/components/Select/Select.vue

+17 −2
Original line number Diff line number Diff line
@@ -49,6 +49,10 @@ const pickOption = (value: string) => { 
};

const calcOptionColor = (color: TThemeColor | undefined, darknessColor: string | undefined, defaultColor: string) =>

  color ? convertThemeToColor(color, darknessColor ?? '500') : defaultColor;



document.querySelector('body').addEventListener('pointerup', (e: MouseEvent) => {

  if (isOpen.value && e.button === 0) isOpen.value = false;

});

</script>



<template>
@@ -59,9 +63,17 @@ const calcOptionColor = (color: TThemeColor | undefined, darknessColor: string | 
        {{ option.label ?? option.value }}

      </option>

    </select>

    <div class="list" :style="`background-color: ${backgroundColor}`">

    <div

      :class="[

        'list',

        {

          noHighlight,

        },

      ]"

      :style="`background-color: ${backgroundColor}`"

    >

      <button

        @click.prevent="!disabled ? (isOpen = !isOpen) : ''"

        @click="!disabled ? (isOpen = !isOpen) : ''"

        :class="[

          'button',

          {
@@ -257,4 +269,7 @@ const calcOptionColor = (color: TThemeColor | undefined, darknessColor: string | 
  background-color: #e1e7f1 !important;

  border-radius: 4px;

}

.noHighlight * {

  user-select: none;

}

</style>