Skip to content
Snippets Groups Projects
Commit f2b696d1 authored by Дмитрий Малюгин's avatar Дмитрий Малюгин :clock4:
Browse files

fix: some bugs

parent cdac49ef
No related branches found
No related tags found
No related merge requests found
Pipeline #21148 passed
{
"name": "@d.malygin/UI_storybook",
"version": "1.0.17",
"version": "1.0.18",
"type": "module",
"scripts": {
"dev": "vite",
......
......@@ -213,6 +213,7 @@ export interface ISelectProps {
width?: string;
listHeight?: string;
placeholder?: string;
color?: TThemeColor;
openIcon?: TIcon;
size?: TSize;
fontSize?: string;
......
......@@ -16,6 +16,7 @@ const meta: Meta = {
},
argTypes: {
width: { control: 'text' },
listHeight: { control: 'text' },
filtered: { control: 'boolean' },
disabled: { control: 'boolean' },
noHighlight: { control: 'boolean' },
......@@ -47,6 +48,26 @@ const meta: Meta = {
'black',
],
},
color: {
control: 'select',
options: [
'white',
'blue',
'sky',
'cyan',
'teal',
'green',
'yellow',
'orange',
'pink',
'fuchsia',
'purple',
'indigo',
'rose',
'red',
'black',
],
},
openIconColor: {
control: 'select',
options: [
......
......@@ -55,7 +55,11 @@ const selectedTextWidth = computed(() => {
});
const fontSizeNumber = computed(() => fontSize.value.slice(0, -2));
const textColor = computed(() =>
props.disabled ? '#62708c' : convertThemeToTextColor(props.theme, props.darknessTheme ?? '700'),
props.disabled
? '#62708c'
: props.color
? convertThemeToColor(props.color, props.darknessTheme ?? '700')
: convertThemeToTextColor(props.theme, props.darknessTheme ?? '700'),
);
const borderColor = computed(() => (props.noBorder ? 'transparent' : textColor.value));
const backgroundColor = computed(() =>
......@@ -137,7 +141,7 @@ document.querySelector('body')!.addEventListener('pointerup', (e: MouseEvent) =>
},
]"
>
<div :style="`overflow: auto; height: ${listHeight ?? 'auto'}`">
<div :style="`overflow: auto; max-height: ${listHeight ?? 'auto'}`">
<div class="flex filter" v-if="filtered" @click="isOpen = true">
<input v-model="filter" type="text" /><SearchIcon :size="fontSizeNumber" color="#62708c" />
</div>
......
......@@ -167,11 +167,13 @@ export const Full: Story = {
['Ксюша', '32', 'Frontend', 'Russia', false, 'Married', 0, 30, 2],
['Ксюша', '32', 'Backend', 'Russia', false, 'Married', 0, 30, 2],
],
noEditingSettings: {
columns: [2],
rows: [3],
cells: [[0, 6]],
},
fontSize: '24px',
showAllLines: true,
border: 'fuchsia',
......@@ -181,5 +183,10 @@ export const Full: Story = {
center: true,
size: 'large',
editable: true,
paginator: true,
paginatorOptions: {
itemsPerPageOptions: [5, 10, 20, 40],
},
},
};
......@@ -27,15 +27,17 @@ const padding = computed(() => getValueFromSize(props.size, ['3px 7px', '5px 11p
</script>
<template>
<div
class="container"
:style="`border-radius: ${rounded ? fontSize : `calc(${fontSize} / 2)`}; gap: calc(${fontSize} / 2.5); border: ${['normal', 'small'].includes(size) ? '1px' : '2px'} solid ${borderColor}`"
>
<slot name="icon-left"></slot>
<component v-show="iconLeft" :is="iconsSet[iconLeft ?? 0]" :color="textColor" :size="fontSize.slice(0, -2)" />
<span class="text">{{ value }}</span>
<component v-show="iconRight" :is="iconsSet[iconRight ?? 0]" :color="textColor" :size="fontSize.slice(0, -2)" />
<slot name="icon-right"></slot>
<div>
<section
class="container"
:style="`border-radius: ${rounded ? fontSize : `calc(${fontSize} / 2)`}; gap: calc(${fontSize} / 2.5); border: ${['normal', 'small'].includes(size) ? '1px' : '2px'} solid ${borderColor}`"
>
<slot name="icon-left"></slot>
<component v-show="iconLeft" :is="iconsSet[iconLeft ?? 0]" :color="textColor" :size="fontSize.slice(0, -2)" />
<span class="text">{{ value }}</span>
<component v-show="iconRight" :is="iconsSet[iconRight ?? 0]" :color="textColor" :size="fontSize.slice(0, -2)" />
<slot name="icon-right"></slot>
</section>
</div>
</template>
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment