From 001844bf7bd32f48f4b8dd41ae3e487b7612d50d 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: Mon, 24 Feb 2025 18:33:58 +0500
Subject: [PATCH] refactor: a few components
---
package.json | 2 +-
src/components/Button/Button.vue | 62 ++++++++++++++-------------
src/components/Checkbox/Checkbox.vue | 1 +
src/components/TreeList/TreeItems.vue | 1 +
4 files changed, 35 insertions(+), 31 deletions(-)
diff --git a/package.json b/package.json
index 6acd9bc..ccd59a4 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
{
"name": "@d.malygin/UI_storybook",
- "version": "1.0.8",
+ "version": "1.0.9",
"type": "module",
"scripts": {
"dev": "vite",
diff --git a/src/components/Button/Button.vue b/src/components/Button/Button.vue
index a20867b..25839a4 100644
--- a/src/components/Button/Button.vue
+++ b/src/components/Button/Button.vue
@@ -49,41 +49,43 @@ const buttonPadding = computed(() => {
</script>
<template>
- <button
- :class="[
- 'button',
- {
- 'flex-column': iconPos === 'top' || iconPos === 'bottom',
- border: borderColor,
- },
- ]"
- :style="`padding: ${buttonPadding}; width: ${width}`"
- >
- <span :style="`background-color: ${themeColor}`" class="background"></span>
- <span
- v-if="label || !iconOnly"
- :style="`color: ${color}; font-size: ${textSize}`"
+ <div>
+ <button
:class="[
- 'text',
+ 'button',
{
- bold: textStyle === 'bold',
- italic: textStyle === 'italic',
+ 'flex-column': iconPos === 'top' || iconPos === 'bottom',
+ border: borderColor,
},
]"
- >{{ label ? label : !iconOnly ? 'Button' : '' }}</span
+ :style="`padding: ${buttonPadding}; width: ${width}`"
>
- <span
- v-if="$slots.default"
- :class="[
- 'icon',
- {
- 'order-1': iconPos === 'left' || iconPos === 'top',
- },
- ]"
- >
- <slot />
- </span>
- </button>
+ <span :style="`background-color: ${themeColor}`" class="background"></span>
+ <span
+ v-if="label || !iconOnly"
+ :style="`color: ${color}; font-size: ${textSize}`"
+ :class="[
+ 'text',
+ {
+ bold: textStyle === 'bold',
+ italic: textStyle === 'italic',
+ },
+ ]"
+ >{{ label ? label : !iconOnly ? 'Button' : '' }}</span
+ >
+ <span
+ v-if="$slots.default"
+ :class="[
+ 'icon',
+ {
+ 'order-1': iconPos === 'left' || iconPos === 'top',
+ },
+ ]"
+ >
+ <slot />
+ </span>
+ </button>
+ </div>
</template>
<style scoped>
diff --git a/src/components/Checkbox/Checkbox.vue b/src/components/Checkbox/Checkbox.vue
index 4c0d117..cd43cfa 100644
--- a/src/components/Checkbox/Checkbox.vue
+++ b/src/components/Checkbox/Checkbox.vue
@@ -101,6 +101,7 @@ const borderRadius = computed(() => `${elSize.value / 7 - borderWidth.value}px`)
gap: v-bind(gap);
box-sizing: content-box;
width: max-content;
+ height: max-content;
}
.main {
position: relative;
diff --git a/src/components/TreeList/TreeItems.vue b/src/components/TreeList/TreeItems.vue
index 13c6a14..3d214dd 100644
--- a/src/components/TreeList/TreeItems.vue
+++ b/src/components/TreeList/TreeItems.vue
@@ -109,6 +109,7 @@ const emit = defineEmits(['toggleIsOpen', 'onClick']);
padding: 4px 5px;
background-color: v-bind(themeColor);
word-break: break-word;
+ transition: filter 0.3s ease;
}
.openButton {
margin-right: 10px;
--
GitLab