Skip to content

Commit

Permalink
VaPagination rework (#2283)
Browse files Browse the repository at this point in the history
  • Loading branch information
aluarius committed Sep 13, 2022
1 parent 5753be7 commit 62adea4
Show file tree
Hide file tree
Showing 16 changed files with 751 additions and 293 deletions.
60 changes: 41 additions & 19 deletions packages/docs/src/locales/en/en.json
Expand Up @@ -123,7 +123,7 @@
"errorMessages": "Error messages for the component.",
"errorCount": "Number of error messages displayed.",
"stateful": "Add possibility to work with component without setting `v-model`.",
"color": "Color of the component (theme string or HEX string).",
"color": "Color of the component (theme string or `HEX` string).",
"textColor": "Text color (theme string or HEX string).",
"rules": "Validation rules <!-- TODO Add link -->.",
"to": "The target route of the link. [More info here](https://router.vuejs.org/api/#to \"Vue router docs\")[[target=_blank]].",
Expand Down Expand Up @@ -152,7 +152,7 @@
"activeButtonTextColor": "The color of the text of the active button (options supported by the theme or `HEX`).",
"indeterminate": "Same as native `indeterminate` - a state in which it's impossible to say whether the item is toggled `on` or `off`",
"indeterminateValue": "Overrides a state value that is not set.",
"borderColor": "Color css style `border` (theme supported options or `HEX`).",
"borderColor": "Color CSS style `border` (theme supported options or `HEX`).",
"clearableIcon": "Sets the cleaning button icon.",
"tabindex": "Sets the custom `tabindex`.",
"preset": "Named preset combination of component props.",
Expand Down Expand Up @@ -348,22 +348,24 @@
},
"VaPagination": {
"props": {
"value": "Current page (or item if `total` is issued) value",
"visiblePages": "The amount of displayed pages. (When set to 0 all pages are displayed)",
"pages": "The amount of pages",
"boundaryLinks": "Show controls to move to first and last page",
"boundaryNumbers": "Always show first and last page (will replace `boundary-links` if both used)",
"directionLinks": "Show buttons to move forward and backward",
"input": "Use HTML Input instead of buttons to control `va-pagination` state",
"hideOnSinglePage": "Component won't be displayed if only 1 page is available",
"flat": "Applies `flat` style",
"value": "Current page (or item if `total` is issued) value.",
"visiblePages": "The amount of displayed pages (when set to 0 all pages are displayed).",
"pages": "The amount of pages.",
"boundaryLinks": "Show controls to move to first and last page.",
"boundaryNumbers": "Always show first and last page (will replace `boundary-links` if both used).",
"directionLinks": "Show buttons to move forward and backward.",
"input": "Use HTML Input instead of buttons to control `va-pagination` state.",
"hideOnSinglePage": "Component won't be displayed if only 1 page is available.",
"total": "Set the amount of data pagination should iterate through. This prop should not be used with `pages` prop.",
"pageSize": "Set the amount of data to be displayed at 1 page. Used to calculate the length of pagination. This prop should not be used with `pages` prop.",
"boundaryIconLeft": "Set the icon name for left boundary icon",
"boundaryIconRight": "Set the icon name for right boundary icon",
"directionIconLeft": "Set the icon name for left direction icon",
"directionIconRight": "Set the icon name for right direction icon",
"size": "Specify size for component. \"small\", \"medium\", \"large\" sizes are available"
"boundaryIconLeft": "Set the icon name for left boundary icon.",
"boundaryIconRight": "Set the icon name for right boundary icon.",
"directionIconLeft": "Set the icon name for left direction icon.",
"directionIconRight": "Set the icon name for right direction icon.",
"size": "Specify size for component. `small`, `medium`, `large` sizes are available.",
"activePageColor": "Specifies color of the currently active page button.",
"gapped": "Enables gaps between page buttons.",
"buttonsPreset": "Value of the `preset` prop for passing it to the `VaButton` component ([read more](/ui-elements/button))."
}
},
"VaTabs": {
Expand Down Expand Up @@ -1963,7 +1965,7 @@
},
"color": {
"title": "Color",
"text": "Set different colors using `color` prop. You can either user theme string *HEX* color value."
"text": "Set different colors using `color` prop. You can either user theme string HEX color value."
},
"offset": {
"title": "Offset",
Expand Down Expand Up @@ -2073,11 +2075,11 @@
},
"colors": {
"title": "Color",
"text": "Set different colors using `color` prop. You can either user theme string *HEX* color value"
"text": "Set different colors using `color` prop. You can either user theme string HEX color value."
},
"sizes": {
"title": "Size",
"text": "Utilize `size` prop in order to make component fit your needs. Refer to *API* section for more in-depth explanation of how to use `size` prop."
"text": "Utilize `size` prop in order to make component fit your needs. Refer to API section for more in-depth explanation of how to use `size` prop."
},
"icons": {
"title": "Custom icons",
Expand All @@ -2094,6 +2096,26 @@
"totalAndPageSize": {
"title": "Using `total` and `page-size`",
"text": "You can provide `total` and `page-size` props to `va-pagination` component and let it calculate the length of pagination itself. The value of the component in this case would be equal to the number of the first item at the selected page."
},
"gapped": {
"title": "Gaps",
"text": "`gapped` prop allows you to add distance between pagination items."
},
"presets": {
"title": "Presets",
"text": "We provide several built-in style presets: `default`, `primary`, `secondary` (inherited from [VaButton](/ui-elements/button)). You can switch between them via `buttons-preset` prop."
},
"bordered": {
"title": "Borders",
"text": "Specifying `border-color` prop will add borders to the pagination items."
},
"activeColor": {
"title": "Active pagination button color",
"text": "You can specify color of the current pagination item via `active-page-color` prop."
},
"rounded": {
"title": "Rounded",
"text": "`rounded` prop makes your pagination items rounded."
}
},
"variables": "[GitHub Variables Page](https://github.com/epicmaxco/vuestic-ui/blob/develop/packages/ui/src/components/va-pagination/_variables.scss)[[target=_blank]]",
Expand Down
56 changes: 39 additions & 17 deletions packages/docs/src/locales/ru/ru.json
Expand Up @@ -115,14 +115,14 @@
"name": "Применяет `name` к внутреннему компоненту ввода, полезно для нативных форм",
"tag": "Заменяет тег html. Это полезно для семантики, а также для обеспечения корректной разметки в некоторых случаях (`ul > li` и `tr > td` и т.д.)",
"size": "Изменяет размер компонента. Доступны следющие опции: `\"small\"`, `\"medium\"`, `\"large\"`. Если вам нужна более тонкая настройка, вы можете указать число (будет использовано как `px`) или строковое значение (поддерживаются `rem` и `px`).",
"disabled": "Применяется стиль `disabled` и удаляются все эффекты взаимодействия с пользователем",
"disabled": "Применяется стиль `disabled` и удаляются все эффекты взаимодействия с пользователем.",
"readonly": "Выглядит как активный элемент, но ведет себя как неактивный (`disabled`). В основном используется для компонентов оберток",
"success": "Отображение компонента в состоянии `success`",
"error": "Отображение компонента в состоянии `error`",
"messages": "Описание сообщений для компонента",
"errorMessages": "Сообщения об ошибках для компонента",
"errorCount": "Количество отображаемых сообщений об ошибках",
"stateful": "Добавляет возможность работы с компонентом без настройки `v-model`",
"stateful": "Добавляет возможность работы с компонентом без настройки `v-model`.",
"color": "Цвет компонента (поддерживаемые темой варианты или `HEX`).",
"textColor": "Цвет текста (поддерживаемые темой варианты или `HEX`).",
"rules": "Правила валидации <!-- TODO Add link -->",
Expand All @@ -144,7 +144,7 @@
"square": "Убирает закругления углов",
"indicator": "Устанавливает стиль индикатора",
"icon": "Устанавливает иконку",
"rounded": "Добавляет закругления углов",
"rounded": "Добавляет закругления углов.",
"flat": "Убирает границы и фон",
"outline": "Убирает фон",
"gradient": "Добавляет градиент фона",
Expand Down Expand Up @@ -350,22 +350,24 @@
},
"VaPagination": {
"props": {
"value": "Значение компонента (текущая страница или элемент (если используется свойство `total`))",
"visiblePages": "Задает количество отображаемых страниц. (При значении 0 отображаются все страницы)",
"pages": "Задает количество страниц",
"boundaryLinks": "Задает отображение элементов управления для перехода к первой и последней странице",
"boundaryNumbers": "Задает постоянное отображение первой и последней страницы (заменяет свойство `boundary-links`, если используются)",
"directionLinks": "Задает отображение кнопок для перемещения вперед и назад",
"input": "Использовать поле ввода HTML вместо кнопок для управления состоянием `va-pagination`",
"hideOnSinglePage": "Задает скрытие компонента, если имеентся всего 1 страница",
"flat": "Применяет стиль `flat`",
"value": "Значение компонента (текущая страница или элемент, если используется свойство `total`).",
"visiblePages": "Задает количество отображаемых страниц (при значении 0 отображаются все страницы).",
"pages": "Задает количество страниц.",
"boundaryLinks": "Задает отображение элементов управления для перехода к первой и последней странице.",
"boundaryNumbers": "Задает постоянное отображение первой и последней страницы (заменяет свойство `boundary-links`, если используются).",
"directionLinks": "Задает отображение кнопок для перемещения вперед и назад.",
"input": "Использовать поле ввода HTML вместо кнопок для управления состоянием `va-pagination`.",
"hideOnSinglePage": "Задает скрытие компонента, если имеется всего 1 страница.",
"total": "Задает количество данных, которые должны повторяться при разбиении на страницы. Это свойство не должно использоваться со свойством `pages`.",
"pageSize": "Задает количество данных, отображаемых на 1 странице. Используется для расчета длины нумерации страниц. Это свойство не должно использоваться со свойством `pages`.",
"boundaryIconLeft": "Задает имя для иконки левой границы",
"boundaryIconRight": "Задает имя для иконки правой границы",
"directionIconLeft": "Задает имя для иконки перемещения влево",
"directionIconRight": "Задает имя для иконки перемещения вправо",
"size": "Задает размер компонента, доступные опции: `small`, `medium` (по умолчанию) и `large`"
"boundaryIconLeft": "Задает имя для иконки левой границы.",
"boundaryIconRight": "Задает имя для иконки правой границы.",
"directionIconLeft": "Задает имя для иконки перемещения влево.",
"directionIconRight": "Задает имя для иконки перемещения вправо.",
"size": "Задает размер компонента, доступные опции: `small`, `medium` (по умолчанию) и `large`.",
"activePageColor": "Устанавливает цвет активной кнопки пагинации.",
"gapped": "Добавляет пространство между кнопками пагинации.",
"buttonsPreset": "Значение свойства `preset` для передачи в компонент `VaButton` ([подробнее](/ui-elements/button))."
}
},
"VaTabs": {
Expand Down Expand Up @@ -1980,6 +1982,26 @@
"totalAndPageSize": {
"title": "Вычисляемая длина элементов",
"text": "Свойства `total` и `page-size` позволяют компоненту вычислить длину отображаемых элементов. Значение компонента в этом случае будет равно номеру первого элемента на выбранной странице."
},
"gapped": {
"title": "Пробелы",
"text": "Свойство `gapped` добавляет пространства между элементами пагинации."
},
"presets": {
"title": "Пресеты",
"text": "Мы предоставляем несколько встроенных стилевых решений: `default`, `primary`, `secondary` (наследуются от [VaButton](/ui-elements/button)). Вы можете переключаться между ними с помощью свойства `buttons-preset`."
},
"bordered": {
"title": "Границы",
"text": "Задав свойство `border-color`, вы активируете границы для элементов пагинации."
},
"activeColor": {
"title": "Цвет активного элемента",
"text": "Вы можете задать цвет текущего активного элемента с помощью свойства `active-page-color`."
},
"rounded": {
"title": "Закругления",
"text": "Свойство `rounded` сделает элементы пагинации круглыми."
}
},
"variables": "[Страница с переменными на GitHub](https://github.com/epicmaxco/vuestic-ui/blob/develop/packages/ui/src/components/va-pagination/_variables.scss)[[target=_blank]]",
Expand Down
@@ -0,0 +1,15 @@
<template>
<va-pagination v-model="value" :pages="10" :visible-pages="3" buttons-preset="default" gapped rounded active-page-color="warning" class="mb-4" />
<va-pagination v-model="value" :pages="10" :visible-pages="3" buttons-preset="primary" gapped rounded active-page-color="warning" class="mb-4" />
<va-pagination v-model="value" :pages="10" :visible-pages="3" buttons-preset="secondary" gapped rounded active-page-color="warning" />
</template>

<script>
export default {
data () {
return {
value: 3,
}
},
}
</script>
@@ -0,0 +1,15 @@
<template>
<va-pagination v-model="value" :pages="10" :visible-pages="3" buttons-preset="default" gapped border-color="primary" class="mb-4" />
<va-pagination v-model="value" :pages="10" :visible-pages="3" buttons-preset="primary" gapped border-color="primary" class="mb-4" />
<va-pagination v-model="value" :pages="10" :visible-pages="3" buttons-preset="secondary" gapped border-color="primary" />
</template>

<script>
export default {
data () {
return {
value: 3,
}
},
}
</script>
@@ -0,0 +1,15 @@
<template>
<va-pagination v-model="value" :pages="10" :visible-pages="3" buttons-preset="default" gapped class="mb-4" />
<va-pagination v-model="value" :pages="10" :visible-pages="3" buttons-preset="primary" gapped class="mb-4" />
<va-pagination v-model="value" :pages="10" :visible-pages="3" buttons-preset="secondary" gapped />
</template>

<script>
export default {
data () {
return {
value: 3,
}
},
}
</script>
@@ -0,0 +1,15 @@
<template>
<va-pagination v-model="value" :pages="10" :visible-pages="3" buttons-preset="default" class="mb-4" />
<va-pagination v-model="value" :pages="10" :visible-pages="3" buttons-preset="primary" class="mb-4" />
<va-pagination v-model="value" :pages="10" :visible-pages="3" buttons-preset="secondary" />
</template>

<script>
export default {
data () {
return {
value: 3,
}
},
}
</script>
@@ -0,0 +1,15 @@
<template>
<va-pagination v-model="value" :pages="10" :visible-pages="3" buttons-preset="default" rounded gapped border-color="primary" class="mb-4" />
<va-pagination v-model="value" :pages="10" :visible-pages="3" buttons-preset="primary" rounded gapped border-color="primary" class="mb-4" />
<va-pagination v-model="value" :pages="10" :visible-pages="3" buttons-preset="secondary" rounded gapped border-color="primary" />
</template>

<script>
export default {
data () {
return {
value: 3,
}
},
}
</script>
@@ -1,10 +1,12 @@
<template>
<va-pagination
:visible-pages="7"
v-model="value"
class="mb-3"
:visible-pages="7"
:total="100"
boundary-numbers
:direction-links="false"
:page-size="10"
boundary-numbers
/>
Current value: {{ value }}
</template>
Expand Down
@@ -1,9 +1,23 @@
<template>
<va-pagination
v-model="value"
class="mb-3"
:pages="20"
input
/>
<va-pagination
v-model="value"
class="mb-3"
:pages="20"
input
buttons-preset="default"
/>
<va-pagination
v-model="value"
:pages="20"
input
buttons-preset="secondary"
/>
</template>

<script>
Expand Down

0 comments on commit 62adea4

Please sign in to comment.