From cdac49efbfa16cea33407a8546f020202bdc3f6f 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: Sat, 1 Mar 2025 12:01:24 +0500
Subject: [PATCH] fix: Select and Table
---
package.json | 2 +-
src/common/interfaces/componentsProps.ts | 1 +
src/components/Select/Select.vue | 6 +-
src/components/Table/Table.vue | 186 ++++++++++++-----------
4 files changed, 101 insertions(+), 94 deletions(-)
diff --git a/package.json b/package.json
index 4c5ebf4..27928c2 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
{
"name": "@d.malygin/UI_storybook",
- "version": "1.0.16",
+ "version": "1.0.17",
"type": "module",
"scripts": {
"dev": "vite",
diff --git a/src/common/interfaces/componentsProps.ts b/src/common/interfaces/componentsProps.ts
index c70f377..2c4417f 100644
--- a/src/common/interfaces/componentsProps.ts
+++ b/src/common/interfaces/componentsProps.ts
@@ -211,6 +211,7 @@ export interface ISelectProps {
groups?: ISelectGroup[];
selected?: string;
width?: string;
+ listHeight?: string;
placeholder?: string;
openIcon?: TIcon;
size?: TSize;
diff --git a/src/components/Select/Select.vue b/src/components/Select/Select.vue
index b376de3..ec2fdd8 100644
--- a/src/components/Select/Select.vue
+++ b/src/components/Select/Select.vue
@@ -117,7 +117,7 @@ document.querySelector('body')!.addEventListener('pointerup', (e: MouseEvent) =>
}; font-weight: 600`"
>
<slot :name="`icon-left-${selectedOption?.value}`"></slot>
- <span class="text" :style="`font-size: ${fontSize}; width: ${selectedTextWidth}`">{{
+ <span class="text" :style="`font-size: ${fontSize}; color: inherit; width: ${selectedTextWidth}`">{{
selected ?? placeholder
}}</span>
<slot :name="`icon-right-${selectedOption?.value}`"></slot>
@@ -137,7 +137,7 @@ document.querySelector('body')!.addEventListener('pointerup', (e: MouseEvent) =>
},
]"
>
- <div style="overflow: hidden">
+ <div :style="`overflow: auto; 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>
@@ -234,6 +234,7 @@ document.querySelector('body')!.addEventListener('pointerup', (e: MouseEvent) =>
gap: 5px;
}
.options {
+ pointer-events: none;
position: absolute;
z-index: 1;
top: 101%;
@@ -248,6 +249,7 @@ document.querySelector('body')!.addEventListener('pointerup', (e: MouseEvent) =>
opacity 0.1s ease-in-out;
}
.optionsOpened {
+ pointer-events: auto;
grid-template-rows: 1fr;
opacity: 1;
z-index: 5000;
diff --git a/src/components/Table/Table.vue b/src/components/Table/Table.vue
index 59295d5..329c2fa 100644
--- a/src/components/Table/Table.vue
+++ b/src/components/Table/Table.vue
@@ -117,101 +117,105 @@ const updateData = (newValue: Ref<unknown>, rowIndex: number, columnIndex: numbe
</script>
<template>
- <table
- :class="{
- tableLines: showAllLines,
- }"
- :style="`background-color: ${themeColor}; color: ${color}`"
- class="table"
- ref="table"
- >
- <thead>
- <TableHeader
- v-model:filterValue="filterValue"
- v-model:isFilterPopup="isFilterPopup"
- v-model:isRegisterSensitive="isRegisterSensitive"
- :table="table"
- :columns="columns"
- :sortState="sortState"
- :indexColumnToFilter="indexColumnToFilter"
- :types="types"
- :initGap="initGap"
- :additionalHeightFromSize="additionalHeightFromSize"
- :theme="theme"
- :themeColor="themeColor"
- :secondaryColor="secondaryColor"
- :color="color"
- :showAllLines="!!showAllLines"
- :center="!!center"
- :fontSize="fontSize"
- :isEditMode="isEditMode"
- @changeColumnSortMode="changeColumnSortMode"
- @setFilter="setFilter"
- @cancelFilter="cancelFilter"
- />
- </thead>
- <tbody>
- <tr
- v-for="(row, rowIndex) of rows"
- :key="rowIndex"
- :class="{
- noEdit:
- !isEditMode ||
- (noEditingSettings?.rows && noEditingSettings?.rows.find((i) => data?.[i]?.join('') === row.join(''))),
- }"
- >
- <td
- v-for="(item, columnIndex) of row"
- :key="columnIndex"
- @click="
- handlers ? handlers.find((i) => i.cell?.[0] === rowIndex && i.cell?.[1] === columnIndex)?.handler?.() : null
- "
+ <section>
+ <table
+ :class="{
+ tableLines: showAllLines,
+ }"
+ :style="`background-color: ${themeColor}; color: ${color}`"
+ class="table"
+ ref="table"
+ >
+ <thead>
+ <TableHeader
+ v-model:filterValue="filterValue"
+ v-model:isFilterPopup="isFilterPopup"
+ v-model:isRegisterSensitive="isRegisterSensitive"
+ :table="table"
+ :columns="columns"
+ :sortState="sortState"
+ :indexColumnToFilter="indexColumnToFilter"
+ :types="types"
+ :initGap="initGap"
+ :additionalHeightFromSize="additionalHeightFromSize"
+ :theme="theme"
+ :themeColor="themeColor"
+ :secondaryColor="secondaryColor"
+ :color="color"
+ :showAllLines="!!showAllLines"
+ :center="!!center"
+ :fontSize="fontSize"
+ :isEditMode="isEditMode"
+ @changeColumnSortMode="changeColumnSortMode"
+ @setFilter="setFilter"
+ @cancelFilter="cancelFilter"
+ />
+ </thead>
+ <tbody>
+ <tr
+ v-for="(row, rowIndex) of rows"
+ :key="rowIndex"
:class="{
- leftBorder: showAllLines,
- darkRow: stripedRows && !(rowIndex % 2),
- noEdit: !isEditMode || (noEditingSettings?.columns && ~noEditingSettings.columns?.indexOf(columnIndex)),
- pointer: handlers && handlers?.find((i) => i.cell?.[0] === rowIndex && i.cell?.[1] === columnIndex),
+ noEdit:
+ !isEditMode ||
+ (noEditingSettings?.rows && noEditingSettings?.rows.find((i) => data?.[i]?.join('') === row.join(''))),
}"
- :style="`padding: calc(${initGap} / 2 + ${additionalHeightFromSize}) ${initGap}`"
>
- <TableCell
- :item="item"
- :types="types"
- :column="columns[columnIndex]"
- :rowIndex="rowIndex"
- :columnIndex="columnIndex"
- :center="center"
- :isEditMode="isEditMode"
- :noEditingSettings="noEditingSettings?.cells"
- :fontSize="fontSize"
- :initGap="initGap"
- :knobWidth="knobWidth"
- :noEdit="
- handlers ? !!handlers?.find((i) => i.cell?.[0] === rowIndex && i.cell?.[1] === columnIndex) : false
+ <td
+ v-for="(item, columnIndex) of row"
+ :key="columnIndex"
+ @click="
+ handlers
+ ? handlers.find((i) => i.cell?.[0] === rowIndex && i.cell?.[1] === columnIndex)?.handler?.()
+ : null
"
- :theme="theme"
- @updateData="updateData"
- />
- </td>
- </tr>
- </tbody>
- </table>
- <div class="paginatorContainer">
- <section v-if="editable" class="editMenu">
- <p class="editText">Edit mode:</p>
- <ToggleSwitch v-model="isEditMode" negativeTheme="red" />
- </section>
- <Paginator
- v-show="paginator"
- v-model:current="currentPage"
- v-model:itemsPerPage="itemsPerPage"
- :theme="theme"
- :total="data.length"
- :itemsPerPageOptions="[2, 5]"
- v-bind="paginatorOptions"
- class="paginator"
- />
- </div>
+ :class="{
+ leftBorder: showAllLines,
+ darkRow: stripedRows && !(rowIndex % 2),
+ noEdit: !isEditMode || (noEditingSettings?.columns && ~noEditingSettings.columns?.indexOf(columnIndex)),
+ pointer: handlers && handlers?.find((i) => i.cell?.[0] === rowIndex && i.cell?.[1] === columnIndex),
+ }"
+ :style="`padding: calc(${initGap} / 2 + ${additionalHeightFromSize}) ${initGap}`"
+ >
+ <TableCell
+ :item="item"
+ :types="types"
+ :column="columns[columnIndex]"
+ :rowIndex="rowIndex"
+ :columnIndex="columnIndex"
+ :center="center"
+ :isEditMode="isEditMode"
+ :noEditingSettings="noEditingSettings?.cells"
+ :fontSize="fontSize"
+ :initGap="initGap"
+ :knobWidth="knobWidth"
+ :noEdit="
+ handlers ? !!handlers?.find((i) => i.cell?.[0] === rowIndex && i.cell?.[1] === columnIndex) : false
+ "
+ :theme="theme"
+ @updateData="updateData"
+ />
+ </td>
+ </tr>
+ </tbody>
+ </table>
+ <div class="paginatorContainer">
+ <section v-if="editable" class="editMenu">
+ <p class="editText">Edit mode:</p>
+ <ToggleSwitch v-model="isEditMode" negativeTheme="red" />
+ </section>
+ <Paginator
+ v-show="paginator"
+ v-model:current="currentPage"
+ v-model:itemsPerPage="itemsPerPage"
+ :theme="theme"
+ :total="data.length"
+ :itemsPerPageOptions="[2, 5]"
+ v-bind="paginatorOptions"
+ class="paginator"
+ />
+ </div>
+ </section>
</template>
<style scoped>
--
GitLab