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

feat: start component 'Paginator'

parent b284e6e4

src/App.vue

+5 −1
Original line number Diff line number Diff line
@@ -108,9 +108,11 @@ import UserIcon from '@icons/Mono/UserIcon.vue'; 
import ArrowsVerticalIcon from '@icons/Mono/ArrowsVerticalIcon.vue';

import TriangleIcon from '@icons/Mono/TriangleIcon.vue';

import Playground from '@/Playground.vue';

import ArrowShortDownIcon from '@icons/Mono/ArrowShortDownIcon.vue';

import ArrowShortDownIcon from '@icons/Mono/ArrowDownShortIcon.vue';

import StarIcon from '@icons/Mono/StarIcon.vue';

import StarFilledIcon from '@icons/Mono/StarFilledIcon.vue';

import ArrowLeftShortIcon from '@icons/Mono/ArrowLeftShortIcon.vue';

import ArrowDoubleLeftShortIcon from '@icons/Mono/ArrowDoubleLeftShortIcon.vue';



const gentleIcons = {

  Age18Icon,
@@ -122,6 +124,8 @@ const gentleIcons = { 
  AnchorIcon,

  AnchorLinkIcon,

  ArchiveIcon,

  ArrowLeftShortIcon,

  ArrowDoubleLeftShortIcon,

  ArrowForwardIcon,

  ArrowLeftIcon,

  ArrowRightIcon,

src/common/constants/icons.ts

+1 −1
Original line number Diff line number Diff line
@@ -107,7 +107,7 @@ import SortHorizontalIcon from '@icons/Mono/SortHorizontalIcon.vue'; 
import SortDownIcon from '@icons/Mono/SortDownIcon.vue';

import SortUpIcon from '@icons/Mono/SortUpIcon.vue';

import SortVerticalIcon from '@icons/Mono/SortVerticalIcon.vue';

import ArrowShortDownIcon from '@icons/Mono/ArrowShortDownIcon.vue';

import ArrowShortDownIcon from '@icons/Mono/ArrowDownShortIcon.vue';

import SearchIcon from '@icons/Mono/SearchIcon.vue';

import StarIcon from '@icons/Mono/StarIcon.vue';

import StarFilledIcon from '@icons/Mono/StarFilledIcon.vue';

src/common/interfaces/componentsProps.ts

+7 −0
Original line number Diff line number Diff line
@@ -56,6 +56,13 @@ export interface ITIProps { 
  themeColor: string;

}



export interface IPaginatorProps {

  value?: number;

  total?: number;

  itemsPerPage?: number;

  size?: TSize;

}



export interface IMDProps {

  items: IMDItemProps[];

  size?: TSize;

src/components/Paginator/Paginator.stories.ts

0 → 100644
+84 −0
Original line number Diff line number Diff line 
import type { Meta, StoryObj } from '@storybook/vue3';



import Paginator from './Paginator.vue';



const meta: Meta = {

  title: 'Components/Paginator',

  component: Paginator,

  tags: ['autodocs'],

  parameters: {

    docs: {

      description: {

        component: 'A component to display data in paged format and provide navigation between pages.',

      },

    },

  },

  argTypes: {

    value: { control: 'number' },

    max: { control: 'number' },

    width: { control: 'text' },

    height: { control: 'text' },

    labelBefore: { control: 'text' },

    labelAfter: { control: 'text' },

    showLabel: { control: 'boolean' },

    noBorder: { control: 'boolean' },

    size: { control: 'select', options: ['small', 'normal', 'large', 'huge'] },

    fontSize: { control: 'text' },

    colorGaps: { control: 'object' },

    colorInactiveGaps: { control: 'object' },

    darknessTheme: { control: 'select', options: ['100', '200', '300', '400', '500', '600', '700', '800', '900'] },

    darknessInactiveTheme: {

      control: 'select',

      options: ['100', '200', '300', '400', '500', '600', '700', '800', '900'],

    },

    theme: {

      control: 'select',

      options: [

        'white',

        'blue',

        'sky',

        'cyan',

        'teal',

        'green',

        'yellow',

        'orange',

        'pink',

        'fuchsia',

        'purple',

        'indigo',

        'rose',

        'red',

        'black',

      ],

    },

    inactiveTheme: {

      control: 'select',

      options: [

        'white',

        'blue',

        'sky',

        'cyan',

        'teal',

        'green',

        'yellow',

        'orange',

        'pink',

        'fuchsia',

        'purple',

        'indigo',

        'rose',

        'red',

        'black',

      ],

    },

  },

  args: {},

} satisfies Meta<typeof Paginator>;



export default meta;



type Story = StoryObj<typeof meta>;



export const Simple: Story = {

  args: {},

};

src/components/Paginator/Paginator.vue

0 → 100644
+55 −0
Original line number Diff line number Diff line 
<script setup lang="ts">

import ArrowDoubleLeftShortIcon from '@icons/Mono/ArrowDoubleLeftShortIcon.vue';

import ArrowLeftShortIcon from '@icons/Mono/ArrowLeftShortIcon.vue';

import type { IPaginatorProps } from '@interfaces/componentsProps';

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

import { computed, ref } from 'vue';



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

  total: 10,

  size: 'normal',

  theme: 'black',

  darknessTheme: '500',

});



const current = ref<number | undefined>(props.value);



const items = computed(() => {

  if (!current.value) return [1, 2, 3, 4, 5];

  const start = Math.floor(current.value / 5);

  return [start + 1, start + 2, start + 3, start + 4, start + 5];

});

const iconSize = computed(() => {

  const size = props.size;

  if (size === 'normal') return '20';

  if (size === 'large') return '25';

  if (size === 'huge') return '30';

  return '15';

});

const itemSize = computed(() => `${+iconSize.value * 1.5}px`);

</script>



<template>

  <section class="container">

    <PaginatorItem class="paginatorItem">

      <ArrowDoubleLeftShortIcon :size="iconSize" />

    </PaginatorItem>

    <PaginatorItem class="paginatorItem">

      <ArrowLeftShortIcon :size="iconSize" />

    </PaginatorItem>

    <PaginatorItem v-for="item of items" :key="item" class="paginatorItem">

      {{ item }}

    </PaginatorItem>

  </section>

</template>



<style scoped>

.container {

  display: flex;

  gap: 5px;

}

.paginatorItem {

  width: v-bind(itemSize);

  height: v-bind(itemSize);

}

</style>