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

feat: component 'Paginator'

parent a090a68e

src/common/interfaces/componentsProps.ts

+2 −0
Original line number Diff line number Diff line
@@ -18,10 +18,12 @@ import type { 
  ISelectOption,

  ISliderOptions,

  ITableColumn,

  ITableItem,

  ITreeItem,

} from '@interfaces/componentsProp';



export interface ITableProps {

  data?: ITableItem[][];

  columns: ITableColumn[];

  multipleSort?: boolean;

  gap?: string;

src/components/Paginator/Paginator.vue

+19 −2
Original line number Diff line number Diff line
@@ -67,16 +67,30 @@ watch(perPage, (cur, prev) => { 


<template>

  <section class="container">

    <PaginatorItem @click="current = 1" :color="color" :disable="isStartDisabled" class="paginatorItem">

    <PaginatorItem

      @click="current = 1"

      :textColor="textColor"

      :color="color"

      :disable="isStartDisabled"

      class="paginatorItem"

    >

      <ArrowDoubleLeftShortIcon :color="isStartDisabled ? '#aaa' : textColor" :size="iconSize" />

    </PaginatorItem>

    <PaginatorItem @click="current--" :color="color" :disable="isStartDisabled" class="paginatorItem">

    <PaginatorItem

      @click="current--"

      :textColor="textColor"

      :color="color"

      :disable="isStartDisabled"

      class="paginatorItem"

    >

      <ArrowLeftShortIcon :color="isStartDisabled ? '#aaa' : textColor" :size="iconSize" />

    </PaginatorItem>

    <PaginatorItem

      v-for="item of items"

      :key="item"

      @click="current = item"

      :textColor="textColor"

      :color="color"

      :active="current === item"

      class="paginatorItem"

    >
@@ -84,6 +98,7 @@ watch(perPage, (cur, prev) => { 
    </PaginatorItem>

    <PaginatorItem

      @click="isEndDisabled ? '' : current++"

      :textColor="textColor"

      :color="color"

      :disable="isEndDisabled"

      class="paginatorItem"
@@ -92,6 +107,7 @@ watch(perPage, (cur, prev) => { 
    </PaginatorItem>

    <PaginatorItem

      @click="isEndDisabled ? '' : (current = itemsLength)"

      :textColor="textColor"

      :color="color"

      :disable="isEndDisabled"

      class="paginatorItem"
@@ -102,6 +118,7 @@ watch(perPage, (cur, prev) => { 
      v-if="itemsPerPageOptions"

      v-model="perPage"

      :theme="theme"

      :darknessTheme="darknessTheme"

      :size="size"

      width="max-width"

      no-highlight

src/components/Paginator/PaginatorItem.vue

+10 −10
Original line number Diff line number Diff line
@@ -2,7 +2,8 @@ 
defineProps<{

  active?: boolean;

  disable?: boolean;

  color?: string;

  textColor: string;

  color: string;

}>();

</script>
@@ -36,6 +37,7 @@ defineProps<{ 
  align-items: center;

  cursor: pointer;

  line-height: 1.2;

  color: v-bind(textColor);

}

.item::before {

  content: '';
@@ -43,17 +45,15 @@ defineProps<{ 
  width: 100%;

  height: 100%;

  border-radius: 50%;

  top: 0;

  left: 0;

  z-index: -1;

  background-color: v-bind(color);

}

.item:hover > .bg {

  opacity: 1;

.item:hover > .bg:not(.active) {

  background-color: v-bind(textColor);

  opacity: 0.1;

}

.item:active > .bg {

.item:active > .bg:not(.active) {

  opacity: 0.2;

  background-color: black;

}

.bg {

  width: 120%;
@@ -63,18 +63,18 @@ defineProps<{ 
  left: 50%;

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

  padding: 10px;

  z-index: -2;

  z-index: -1;

  border-radius: 50%;

  background-color: transparent;

  opacity: 0;

  transition: all 0.2s ease;

}

.item > .active {

  background-color: black !important;

  background-color: v-bind(textColor) !important;

  opacity: 1;

}

.active + * {

  color: white;

  color: v-bind(color);

}

.disable {

  cursor: auto;