jaro/flowbite-vue
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Components renaming (#225)

Browse Source 
* refactor: eslint config adjusted for better diff's

* refactor: stricter linting
 + dependencies updated

* refactoring: paragraph component
 - component
 - docs

* refactoring: heading component
 - component
 - docs

* Update docs/components/heading.md

Co-authored-by: Ilya Artamonov <ilya.sosidka@gmail.com>

* refactoring: link component
 - component
 - docs

* refactoring: image component
 - component
 - docs

* refactoring: alert component
 - component
 - docs

* refactoring: avatar component
 - component
 - docs

* refactoring: removed unnecessary code
    - component names come from the file name

* refactoring: breadcrumb component
 - component
 - docs

* refactoring: accordion component
 - component
 - docs

* refactoring: buttom component
 - component
 - docs

* refactoring: badge component
 - component
 - docs

* refactoring: card component
 - component
 - docs

* refactoring: order of components in docs updated

* refactoring: unnecessary semicolons removed

* refactoring: button group component
 - component
 - docs

* refactoring: carousel component
 - component
 - docs

* refactoring: dropdown component
 - component
 - docs

* refactoring: footer component
 - component
 - docs

* refactoring:list-group component
 - component
 - docs

* refactoring: modal component
 - component
 - docs

* refactoring: navbar component
 - component
 - docs

* refactoring: pagination component
 - component
 - docs

* refactoring: progress component
 - component
 - docs

* refactoring: rating component
 - component
 - docs

* refactoring: spinner component
 - component
 - docs

* refactoring: table component
 - component
 - docs

* refactoring: tabs component
 - component
 - docs

* feat: Updated pagination examples

* lint: Lister fixes

* feat: Sidebar component and some fixes

* feat: Input component

* feat: Some fixes

* feat: Some fixes

* chore: update deps

* refactor: removed old Modal component

* refactor: radio component and some fixes

* fix: fixed path error

* refactor: Range component

* refactoring: timeline component
 - component
 - docs

* refactor: Select component

* refactoring: toast component
 - component
 - docs

* refactoring: tooltip component
 - component
 - docs

* refactoring: sidebar component
 - component
 - docs

* refactoring: input component
 - component
 - docs

* refactoring: fileInput component
 - component
 - docs

* refactoring: select component
 - component
 - docs

* refactoring: textarea component
 - component
 - docs

* refactoring: checkbox component
 - component
 - docs

* refactoring: radio component
 - component
 - docs

* refactoring: toggle component
 - component
 - docs

* refactoring: range component
 - component
 - docs

* local configs linted

* documentation quick start updated

* flowbite-themable refactored to fit new linters and style guide

* random linter fixes

* refactoring: toast-provider component
 - component
 - docs

* final linter fixes

* lint: Linter fixes

* fix: Fixed types

* fix: Fixed card component

* docs: Updated card examples

* fix: Fixed tabs

* refactor: Heading component refactoring

* Fwb rename - few fixes after component review (#237)

* fix: button documentation

* fix: model type in range examples

* chore: Toast marked as WIP

---------

Co-authored-by: Sqrcz <naorniakowski@slashlab.pl>
Co-authored-by: Sqrcz <naorniakowski@gmail.com>
This commit is contained in:
Ilya Artamonov
2023-10-23 18:23:14 +03:00
committed by GitHub
parent ea6fcf1a4c
commit d316cf3a12
600 changed files with 16349 additions and 10239 deletions
Download Patch File Download Diff File Expand all files Collapse all files

50
docs/components/pagination.md
View File

@@ -1,11 +1,11 @@
<script setup>
import PaginationExample from './pagination/examples/PaginationExample.vue';
import PaginationNavigationExample from './pagination/examples/PaginationNavigationExample.vue';
import PaginationTableExample from './pagination/examples/PaginationTableExample.vue';
import PaginationWithIconsExample from './pagination/examples/PaginationWithIconsExample.vue';
import PaginationWithCustomTextExample from './pagination/examples/PaginationWithCustomTextExample.vue';
import PaginationWithCustomSlice from './pagination/examples/PaginationWithCustomSlice.vue';
import PaginationSlotsExample from './pagination/examples/PaginationSlotsExample.vue';
import PaginationExample from './pagination/examples/FwbPaginationExample.vue';
import PaginationNavigationExample from './pagination/examples/FwbPaginationExampleNavigation.vue';
import PaginationTableExample from './pagination/examples/FwbPaginationExampleTable.vue';
import PaginationWithIconsExample from './pagination/examples/FwbPaginationExampleWithIcons.vue';
import PaginationWithCustomTextExample from './pagination/examples/FwbPaginationExampleWithCustomText.vue';
import PaginationWithCustomSlice from './pagination/examples/FwbPaginationExampleWithCustomSlice.vue';
import PaginationSlotsExample from './pagination/examples/FwbPaginationExampleSlots.vue';
</script>
# Vue Pagination - Flowbite
#### Use the Tailwind CSS pagination element to indicate a series of content across various pages based on multiple styles and sizes
@@ -18,14 +18,14 @@ Use the following list of pagination items based on two sizes powered by Tailwin
```vue
<script setup>
import { Pagination } from 'flowbite-vue'
import { FwbPagination } from 'flowbite-vue'
import { ref } from 'vue'
const currentPage = ref(1)
</script>
<template>
<Pagination v-model="currentPage" :total-items="100"></Pagination>
<Pagination v-model="currentPage" :total-items="100" large></Pagination>
<fwb-pagination v-model="currentPage" :total-items="100"></fwb-pagination>
<fwb-pagination v-model="currentPage" :total-items="100" large></fwb-pagination>
</template>
```
@@ -36,13 +36,13 @@ The following pagination component example shows how you can use SVG icons inste
```vue
<script setup>
import { Pagination } from 'flowbite-vue'
import { FwbPagination } from 'flowbite-vue'
import { ref } from 'vue'
const currentPage = ref(1)
</script>
<template>
<Pagination v-model="currentPage" :total-pages="100" show-icons></Pagination>
<fwb-pagination v-model="currentPage" :total-pages="100" show-icons></fwb-pagination>
</template>
```
@@ -57,13 +57,13 @@ This prop means left side and right side pages row slicing. In the example it ha
```vue
<script setup>
import { Pagination } from 'flowbite-vue'
import { FwbPagination } from 'flowbite-vue'
import { ref } from 'vue'
const currentPage = ref(1)
</script>
<template>
<Pagination v-model="currentPage" :total-pages="100" :slice-length="4"></Pagination>
<fwb-pagination v-model="currentPage" :total-pages="100" :slice-length="4"></fwb-pagination>
</template>
```
@@ -73,14 +73,14 @@ const currentPage = ref(1)
```vue
<script setup>
import { Pagination } from 'flowbite-vue'
import { FwbPagination } from 'flowbite-vue'
import { ref } from 'vue'
const currentPage = ref(1)
</script>
<template>
<div class="flex items-center justify-center text-center">
<Pagination v-model="currentPage" :total-pages="10" :layout="'navigation'"></Pagination>
<fwb-pagination v-model="currentPage" :total-pages="10" :layout="'navigation'"></fwb-pagination>
</div>
</template>
```
@@ -88,7 +88,7 @@ const currentPage = ref(1)
<PaginationNavigationExample />
## Pagination with table layout
To use that layout you have to pass required props:
To use that layout you have to pass required props:
- `per-page`: it's items count displayed on each page.
- `total-items`: it's the total items count.
@@ -96,15 +96,15 @@ And there you don't need to use `total-pages` prop.
```vue
<script setup>
import { Pagination } from 'flowbite-vue'
import { FwbPagination } from 'flowbite-vue'
import { ref } from 'vue'
const currentPage = ref(1)
</script>
<template>
<div class="flex items-center justify-center text-center">
<Pagination v-model="currentPage" :layout="'table'" :per-page="20" :total-items="998" class="mb-2" />
<Pagination v-model="currentPage" :layout="'table'" :per-page="20" :total-items="998" large />
<fwb-pagination v-model="currentPage" :layout="'table'" :per-page="20" :total-items="998" class="mb-2" />
<fwb-pagination v-model="currentPage" :layout="'table'" :per-page="20" :total-items="998" large />
</div>
</template>
```
@@ -115,13 +115,13 @@ const currentPage = ref(1)
```vue
<script setup>
import { Pagination } from 'flowbite-vue'
import { FwbPagination } from 'flowbite-vue'
import { ref } from 'vue'
const currentPage = ref(1)
</script>
<template>
<Pagination v-model="currentPage" :total-pages="100" previous-label="<<<" next-label=">>>"></Pagination>
<fwb-pagination v-model="currentPage" :total-pages="100" previous-label="<<<" next-label=">>>"></fwb-pagination>
</template>
```
<PaginationWithCustomTextExample />
@@ -133,13 +133,13 @@ const currentPage = ref(1)
```vue
<script setup>
import { Pagination } from 'flowbite-vue'
import { FwbPagination } from 'flowbite-vue'
import { ref } from 'vue'
const currentPage = ref(1)
</script>
<template>
<Pagination v-model="currentPage" :total-items="100" :show-labels="false">
<fwb-pagination v-model="currentPage" :total-items="100" :show-labels="false">
<template #prev-icon>⬅️</template>
<template #next-icon>➡️</template>
<template v-slot:page-button="{ page, setPage }">
@@ -150,7 +150,7 @@ const currentPage = ref(1)
{{ page }}
</button>
</template>
</Pagination>
</fwb-pagination>
Current page: {{ currentPage }}
</template>
```