From 1cdfe71d3cafbbe6b4a519d0c1f79538586a54a4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=D0=94=D0=BC=D0=B8=D1=82=D1=80=D0=B8=D0=B9=20=D0=9C=D0=B0?=
=?UTF-8?q?=D0=BB=D1=8E=D0=B3=D0=B8=D0=BD?= <d.malygin@iqdev.digital>
Date: Wed, 22 Jan 2025 18:30:15 +0500
Subject: [PATCH] fix: 'Checkbox'
---
src/components/Checkbox/Checkbox.stories.ts | 1 +
src/components/Checkbox/Checkbox.vue | 14 +++++---
src/components/Select/Select.stories.ts | 39 +++++++++++++++++++--
3 files changed, 47 insertions(+), 7 deletions(-)
diff --git a/src/components/Checkbox/Checkbox.stories.ts b/src/components/Checkbox/Checkbox.stories.ts
index 6e74748..e8ee599 100644
--- a/src/components/Checkbox/Checkbox.stories.ts
+++ b/src/components/Checkbox/Checkbox.stories.ts
@@ -14,6 +14,7 @@ const meta: Meta = {
},
},
argTypes: {
+ active: { control: 'boolean' },
invalid: { control: 'boolean' },
disabled: { control: 'boolean' },
label: { control: 'text' },
diff --git a/src/components/Checkbox/Checkbox.vue b/src/components/Checkbox/Checkbox.vue
index b122426..38bb037 100644
--- a/src/components/Checkbox/Checkbox.vue
+++ b/src/components/Checkbox/Checkbox.vue
@@ -1,6 +1,6 @@
<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"
/>
diff --git a/src/components/Select/Select.stories.ts b/src/components/Select/Select.stories.ts
index 427a2b3..8e2ba8d 100644
--- a/src/components/Select/Select.stories.ts
+++ b/src/components/Select/Select.stories.ts
@@ -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',
--
GitLab