diff --git a/package.json b/package.json index 6acd9bce5986acb4bbec0c3f07bdb4eb47845ba8..ccd59a4e775343993eb52f9e2b9f99541c4f2747 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 a20867bbf460d7e8eaa4a01e1937d052063d8f7e..25839a445f7895985dad21dadccdf8501469c750 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 4c0d11738ca76f8746b10ed3539b1f7dbcc5b022..cd43cfa6119a513893680d5450664a9e72654d46 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 13c6a14e75e1e9bbf944b6a712a8830a669a25d6..3d214dded4c0fc7f1e081ddc86cae40f9c9acdc4 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;