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

refactor: 'Checkbox', 'Knob', 'ProgressBar', 'Rating' and 'Select' for 'Table' work

parent f231e41f

src/components/Checkbox/Checkbox.vue

+8 −5
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,6 +19,13 @@ const props = withDefaults(defineProps<ICheckboxProps>(), { 
  darknessBorder: '500',

});

const active = defineModel();

const emit = defineEmits(['update']);



if (props.active) {

  active.value = props.active;

}



watch(active, () => emit('update', active));



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

const activeThemeColor = computed(() => convertThemeToColor(props.activeTheme, props.darknessActiveTheme));
@@ -46,10 +53,6 @@ const gap = computed(() => { 
});

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

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



if (props.active) {

  active.value = props.active;

}

</script>



<template>

src/components/Knob/Knob.vue

+11 −3
Original line number Diff line number Diff line 
<script setup lang="ts">

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

import { computed, ref, type Ref } from 'vue';

import { computed, ref, type Ref, watch } from 'vue';

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

import { calcCenter, calcStart, calcNewValue, calcThemeColor, calcContainerSize } from '@components/Knob/helpers';

import Button from '@components/Button/Button.vue';
@@ -25,13 +25,20 @@ const props = withDefaults(defineProps<IKnobProps>(), { 
const value = defineModel<number>({

  default: 0,

}) as Ref<number>;

const emit = defineEmits(['update']);



if (props.value) {

  value.value = props.value;

}

watch(value, () => emit('update', value));



const isClickHold = ref<boolean>(false);

const container = ref();



const degreesTotal = computed(() => 360 - 90);

const length = computed(() => props.max - props.min);

const center = computed(() => calcCenter(document.querySelector('.container')!));

const start = computed(() => calcStart(document.querySelector('.container')!));

const center = computed(() => calcCenter(container.value));

const start = computed(() => calcStart(container.value));

const containerSize = computed(() => calcContainerSize(props.size));

const buttonSize = computed(() => {

  const size = props.size;
@@ -95,6 +102,7 @@ const onPointerDown = ($event: MouseEvent) => { 
    @pointermove="isClickHold ? setNewValue($event) : ''"

    @pointerup="isClickHold = false"

    class="container containerSize"

    ref="container"

  >

    <div class="background"></div>

    <span

src/components/ProgressBar/ProgressBar.vue

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

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

import { computed, ref, type Ref } from 'vue';

import { computed, ref, type Ref, watch } from 'vue';

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



const props = withDefaults(defineProps<IProgressBarProps>(), {
@@ -15,10 +15,13 @@ const props = withDefaults(defineProps<IProgressBarProps>(), { 
  labelAfter: '%',

});

const value = defineModel() as Ref<number>;

const emit = defineEmits(['update']);



if (props.value) {

  value.value = props.value;

}

watch(value, () => emit('update', value));



const active = computed(() => `${(value.value / props.max) * 100}%`);

const activeColor = computed(() => {

  if (props.gradient) return `linear-gradient(to right, ${props.gradient.join(',')})`;

src/components/Rating/Rating.vue

+7 −1
Original line number Diff line number Diff line 
<script setup lang="ts">

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

import { computed, type Ref, ref } from 'vue';

import { computed, type Ref, ref, watch } from 'vue';

import { iconsSet } from '@/common/constants/icons';

import StarFilledIcon from '@icons/Mono/StarFilledIcon.vue';

import { convertThemeToColor } from '@helpers/common';
@@ -16,6 +16,12 @@ const props = withDefaults(defineProps<IRatingProps>(), { 
const value = defineModel({

  default: 0,

}) as Ref<number>;

const emit = defineEmits(['update']);



if (props.value) {

  value.value = props.value;

}

watch(value, () => emit('update', value));



const onHoverIndex = ref();

src/components/Select/Select.vue

+7 −3
Original line number Diff line number Diff line 
<script setup lang="ts">

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

import { computed, ref } from 'vue';

import { computed, ref, watch } from 'vue';

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

import { iconsSet } from '@/common/constants/icons';

import type { TThemeColor } from '@interfaces/common';
@@ -20,13 +20,17 @@ const props = withDefaults(defineProps<ISelectProps>(), { 
  openIcon: 'ArrowShortDown',

});

const selected = defineModel();

const isOpen = ref<boolean>(false);

const filter = ref<string>('');

const emit = defineEmits(['update']);



if (props.selected) {

  selected.value = props.selected;

}



watch(selected, () => emit('update', selected));



const isOpen = ref<boolean>(false);

const filter = ref<string>('');



const optionsGroups = computed(() => getOptionsGroups(props.options, props.groups, filter.value));

const optionsNoGroup = computed(() =>

  props.options.filter(