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

fix: 'Checkbox'

parent 284855c1

src/components/Checkbox/Checkbox.stories.ts

+1 −0
Original line number Diff line number Diff line
@@ -14,6 +14,7 @@ const meta: Meta = { 
    },

  },

  argTypes: {

    active: { control: 'boolean' },

    invalid: { control: 'boolean' },

    disabled: { control: 'boolean' },

    label: { control: 'text' },

src/components/Checkbox/Checkbox.vue

+10 −4
Original line number Diff line number Diff line 
<script setup lang="ts">

import type { ICheckboxProps } from '@interfaces/componentsProps';

import { computed } from 'vue';

import { computed, watch } from 'vue';

import { convertThemeToColor, convertThemeToTextColor } from '@helpers/common';

import CheckMarkIcon from '@icons/Mono/CheckMarkIcon.vue';
@@ -19,7 +19,7 @@ const props = withDefaults(defineProps<ICheckboxProps>(), { 
  darknessBorder: '500',

});

const active = defineModel();

// watch(, () => {});



const themeColor = computed(() => convertThemeToColor(props.theme, props.darknessTheme));

const activeThemeColor = computed(() => convertThemeToColor(props.activeTheme, props.darknessActiveTheme));

const iconColor = computed(() =>
@@ -46,6 +46,12 @@ const gap = computed(() => { 
});

const borderWidth = computed(() => (props.size === 'large' || props.size === 'huge' ? 2 : 1));

const borderRadius = computed(() => `${elSize.value / 7 - borderWidth.value}px`);



const activeProp = computed(() => props.active);



watch(activeProp, () => (active.value = activeProp.value), {

  immediate: true,

});

</script>



<template>
@@ -60,7 +66,7 @@ const borderRadius = computed(() => `${elSize.value / 7 - borderWidth.value}px`) 
  >

    <div class="main" :style="`width: ${elSize}px; height: ${elSize}px; border: ${borderWidth}px solid ${borderColor}`">

      <input

        :style="`width: ${elSize}px; height: ${elSize}px; position: absolute; z-index: 100; cursor: ${disabled ? 'initial' : 'pointer'}`"

        :style="`width: ${elSize}px; height: ${elSize}px; position: absolute; top: 0; left: 0; z-index: 100; cursor: ${disabled ? 'initial' : 'pointer'}`"

        v-model="active"

        type="checkbox"

        :name="name"
@@ -77,7 +83,7 @@ const borderRadius = computed(() => `${elSize.value / 7 - borderWidth.value}px`) 
        ]"

      >

        <CheckMarkIcon

          :style="`transition: all 0.3s ease-in-out; opacity: ${active ? 1 : 0}; position: absolute;`"

          :style="`transition: all 0.3s ease-in-out; opacity: ${active ? 1 : 0}; position: absolute; top: 0; left: 0`"

          :color="iconColor"

          :size="elSize"

        />

src/components/Select/Select.stories.ts

+36 −3
Original line number Diff line number Diff line
@@ -138,10 +138,43 @@ export const Full: Story = { 
    ],



    groups: [

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

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

      {

        name: 'Group',

        background: 'white',

        iconLeft: 'Archive',



        items: [

          {

            value: 'First',

            iconLeft: 'At',

            color: 'purple',

            darknessColor: '800',

            group: 'Group',

          },

          {

            value: 'Second',

            iconRightColor: 'red',

            iconRight: 'Age18',

            group: 'Group',

          },

        ],

      },

      {

        name: 'Group 2',

        background: 'red',

        iconLeft: 'Badge',



        items: [

          {

            iconLeft: 'Calendar',

            value: 'Third',

            iconRight: 'CheckMark',

            group: 'Group 2',

          },

        ],

      },

    ],

    selected: 'First',

    placeholder: 'Select a city',

    size: 'normal',

    width: '250px',