Commit 871cf5da authored by Дмитрий Малюгин's avatar Дмитрий Малюгин 🕓
Browse files

feat: start to add 'Paginator' for 'Table'

parent 3f775d3c

src/Playground.vue

+1 −1
Original line number Diff line number Diff line
@@ -137,7 +137,6 @@ const tableColumns: ITableColumn[] = [ 
    type: 'progressBar',

    options: {

      theme: 'red',

      width: '150px',

      size: 'small',

    },

  },
@@ -202,6 +201,7 @@ const pbValue = ref(0); 
    theme="black"

    stripedRows

    editable

    paginator

    :no-editing-settings="{

      cells: [[0, 0]],

    }"

src/common/interfaces/componentsProps.ts

+1 −0
Original line number Diff line number Diff line
@@ -36,6 +36,7 @@ export interface ITableProps { 
  darknessTheme?: TDarkness;

  darknessTextColor?: TDarkness;

  paginator?: boolean;

  paginatorOptions?: IPaginatorProps;

  editable?: boolean;

  noEditingSettings?: {

    columns?: number[];

src/components/Paginator/Paginator.vue

+4 −0
Original line number Diff line number Diff line
@@ -133,6 +133,8 @@ watch(perPage, (cur, prev) => { 
  display: flex;

  gap: calc(v-bind(fontSize) * 0.25);

  align-items: center;

  width: max-content;

  height: calc(v-bind(itemSize) * 1.2);

}

.paginatorItem {

  width: v-bind(itemSize);
@@ -142,5 +144,7 @@ watch(perPage, (cur, prev) => { 
.digital {

  font-size: v-bind(fontSize);

  font-weight: bold;

  position: relative;

  z-index: 100;

}

</style>

src/components/Paginator/PaginatorItem.vue

+1 −1
Original line number Diff line number Diff line
@@ -63,7 +63,7 @@ defineProps<{ 
  left: 50%;

  transform: translate(-50%, -50%);

  padding: 10px;

  z-index: -1;

  z-index: 5;

  border-radius: 50%;

  background-color: transparent;

  opacity: 0;

src/components/Table/Table.vue

+15 −1
Original line number Diff line number Diff line
@@ -5,6 +5,7 @@ import { convertThemeToColor, convertThemeToSecondaryColor, convertThemeToTextCo 
import { calcAdditionalHeight, calcGap, calcRows } from '@components/Table/helpers';

import TableHeader from '@components/Table/components/TableHeader.vue';

import TableCell from '@components/Table/components/TableCell.vue';

import Paginator from '@components/Paginator/Paginator.vue';



const props = withDefaults(defineProps<ITableProps>(), {

  size: 'normal',
@@ -17,6 +18,7 @@ const data = defineModel() as Ref<unknown[][]>; 
const emit = defineEmits(['updateData']);



const table = ref();

const currentPage = ref(1);

const columns = ref(props.columns);

const sortStateActive = ref<[number, string] | []>([]);

const indexColumnToFilter = ref<number>(0);
@@ -105,7 +107,7 @@ const updateData = (newValue: Ref<unknown>, rowIndex: number, columnIndex: numbe 
</script>



<template>

  <div>

  <div :style="`background-color: ${themeColor}; color: ${color}`">

    <table

      :class="{

        tableLines: showAllLines,
@@ -178,6 +180,14 @@ const updateData = (newValue: Ref<unknown>, rowIndex: number, columnIndex: numbe 
        </tr>

      </tbody>

    </table>

    <Paginator

      v-show="paginator"

      v-model="currentPage"

      :theme="theme"

      :total="data.length"

      v-bind="paginatorOptions"

      class="paginator"

    />

  </div>

</template>
@@ -213,6 +223,10 @@ tr::after { 
  justify-content: center;

  align-items: center;

}

.paginator {

  display: block;

  margin: 0 auto;

}

.leftBorder {

  border-left: 1px solid v-bind(secondaryColor);

}