TelemedPro/hgh_admin
8
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

first commit

Browse Source
This commit is contained in:
Inshal
2024-05-29 22:34:28 +05:00
commit e63fc41a20
1470 changed files with 174828 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
resources/js/views/demos/components/pagination/DemoPaginationBasic.vue Normal file
View File

@@ -0,0 +1,10 @@
<script setup>
const currentPage = ref(1)
</script>
<template>
<VPagination
v-model="currentPage"
:length="5"
/>
</template>

11
resources/js/views/demos/components/pagination/DemoPaginationCircle.vue Normal file
View File

@@ -0,0 +1,11 @@
<script setup>
const currentPage = ref(1)
</script>
<template>
<VPagination
v-model="currentPage"
:length="5"
rounded="circle"
/>
</template>

25
resources/js/views/demos/components/pagination/DemoPaginationColor.vue Normal file
View File

@@ -0,0 +1,25 @@
<script setup>
const pageSuccess = ref(1)
const pageError = ref(2)
const pageInfo = ref(3)
</script>
<template>
<div class="d-flex flex-column gap-6">
<VPagination
v-model="pageSuccess"
:length="7"
color="success"
/>
<VPagination
v-model="pageError"
:length="7"
color="error"
/>
<VPagination
v-model="pageInfo"
:length="7"
color="info"
/>
</div>
</template>

6
resources/js/views/demos/components/pagination/DemoPaginationDisabled.vue Normal file
View File

@@ -0,0 +1,6 @@
<template>
<VPagination
:length="5"
disabled
/>
</template>

12
resources/js/views/demos/components/pagination/DemoPaginationIcons.vue Normal file
View File

@@ -0,0 +1,12 @@
<script setup>
const currentPage = ref(1)
</script>
<template>
<VPagination
v-model="currentPage"
:length="5"
prev-icon="ri-arrow-left-s-fill"
next-icon="ri-arrow-right-s-fill"
/>
</template>

10
resources/js/views/demos/components/pagination/DemoPaginationLength.vue Normal file
View File

@@ -0,0 +1,10 @@
<script setup>
const currentPage = ref(1)
</script>
<template>
<VPagination
v-model="currentPage"
:length="15"
/>
</template>

11
resources/js/views/demos/components/pagination/DemoPaginationOutline.vue Normal file
View File

@@ -0,0 +1,11 @@
<script setup>
const currentPage = ref(1)
</script>
<template>
<VPagination
v-model="currentPage"
variant="outlined"
:length="5"
/>
</template>

12
resources/js/views/demos/components/pagination/DemoPaginationOutlineCircle.vue Normal file
View File

@@ -0,0 +1,12 @@
<script setup>
const currentPage = ref(1)
</script>
<template>
<VPagination
v-model="currentPage"
variant="outlined"
:length="5"
rounded="circle"
/>
</template>

24
resources/js/views/demos/components/pagination/DemoPaginationSize.vue Normal file
View File

@@ -0,0 +1,24 @@
<script setup>
const xSmallPagination = ref(1)
const smallPagination = ref(2)
const largePagination = ref(3)
</script>
<template>
<div class="d-flex flex-column gap-6">
<VPagination
v-model="xSmallPagination"
:length="7"
size="small"
/>
<VPagination
v-model="smallPagination"
:length="7"
/>
<VPagination
v-model="largePagination"
:length="7"
size="large"
/>
</div>
</template>

11
resources/js/views/demos/components/pagination/DemoPaginationTotalVisible.vue Normal file
View File

@@ -0,0 +1,11 @@
<script setup>
const currentPage = ref(1)
</script>
<template>
<VPagination
v-model="currentPage"
:length="15"
:total-visible="$vuetify.display.mdAndUp ? 4 : $vuetify.display.sm ? 2 : 1 "
/>
</template>

284
resources/js/views/demos/components/pagination/demoCodePagination.js Normal file
View File

@@ -0,0 +1,284 @@
export const basic = { ts: `<script lang="ts" setup>
const currentPage = ref(1)
</script>
<template>
<VPagination
v-model="currentPage"
:length="5"
/>
</template>
`, js: `<script setup>
const currentPage = ref(1)
</script>
<template>
<VPagination
v-model="currentPage"
:length="5"
/>
</template>
` }
export const circle = { ts: `<script lang="ts" setup>
const currentPage = ref(1)
</script>
<template>
<VPagination
v-model="currentPage"
:length="5"
rounded="circle"
/>
</template>
`, js: `<script setup>
const currentPage = ref(1)
</script>
<template>
<VPagination
v-model="currentPage"
:length="5"
rounded="circle"
/>
</template>
` }
export const color = { ts: `<script setup lang="ts">
const pageSuccess = ref(1)
const pageError = ref(2)
const pageInfo = ref(3)
</script>
<template>
<div class="d-flex flex-column gap-6">
<VPagination
v-model="pageSuccess"
:length="7"
color="success"
/>
<VPagination
v-model="pageError"
:length="7"
color="error"
/>
<VPagination
v-model="pageInfo"
:length="7"
color="info"
/>
</div>
</template>
`, js: `<script setup>
const pageSuccess = ref(1)
const pageError = ref(2)
const pageInfo = ref(3)
</script>
<template>
<div class="d-flex flex-column gap-6">
<VPagination
v-model="pageSuccess"
:length="7"
color="success"
/>
<VPagination
v-model="pageError"
:length="7"
color="error"
/>
<VPagination
v-model="pageInfo"
:length="7"
color="info"
/>
</div>
</template>
` }
export const disabled = { ts: `<template>
<VPagination
:length="5"
disabled
/>
</template>
`, js: `<template>
<VPagination
:length="5"
disabled
/>
</template>
` }
export const icons = { ts: `<script lang="ts" setup>
const currentPage = ref(1)
</script>
<template>
<VPagination
v-model="currentPage"
:length="5"
prev-icon="ri-arrow-left-s-fill"
next-icon="ri-arrow-right-s-fill"
/>
</template>
`, js: `<script setup>
const currentPage = ref(1)
</script>
<template>
<VPagination
v-model="currentPage"
:length="5"
prev-icon="ri-arrow-left-s-fill"
next-icon="ri-arrow-right-s-fill"
/>
</template>
` }
export const length = { ts: `<script lang="ts" setup>
const currentPage = ref(1)
</script>
<template>
<VPagination
v-model="currentPage"
:length="15"
/>
</template>
`, js: `<script setup>
const currentPage = ref(1)
</script>
<template>
<VPagination
v-model="currentPage"
:length="15"
/>
</template>
` }
export const outline = { ts: `<script setup lang="ts">
const currentPage = ref(1)
</script>
<template>
<VPagination
v-model="currentPage"
variant="outlined"
:length="5"
/>
</template>
`, js: `<script setup>
const currentPage = ref(1)
</script>
<template>
<VPagination
v-model="currentPage"
variant="outlined"
:length="5"
/>
</template>
` }
export const outlineCircle = { ts: `<script setup lang="ts">
const currentPage = ref(1)
</script>
<template>
<VPagination
v-model="currentPage"
variant="outlined"
:length="5"
rounded="circle"
/>
</template>
`, js: `<script setup>
const currentPage = ref(1)
</script>
<template>
<VPagination
v-model="currentPage"
variant="outlined"
:length="5"
rounded="circle"
/>
</template>
` }
export const size = { ts: `<script setup lang="ts">
const xSmallPagination = ref(1)
const smallPagination = ref(2)
const largePagination = ref(3)
</script>
<template>
<div class="d-flex flex-column gap-6">
<VPagination
v-model="xSmallPagination"
:length="7"
size="small"
/>
<VPagination
v-model="smallPagination"
:length="7"
/>
<VPagination
v-model="largePagination"
:length="7"
size="large"
/>
</div>
</template>
`, js: `<script setup>
const xSmallPagination = ref(1)
const smallPagination = ref(2)
const largePagination = ref(3)
</script>
<template>
<div class="d-flex flex-column gap-6">
<VPagination
v-model="xSmallPagination"
:length="7"
size="small"
/>
<VPagination
v-model="smallPagination"
:length="7"
/>
<VPagination
v-model="largePagination"
:length="7"
size="large"
/>
</div>
</template>
` }
export const totalVisible = { ts: `<script lang="ts" setup>
const currentPage = ref(1)
</script>
<template>
<VPagination
v-model="currentPage"
:length="15"
:total-visible="$vuetify.display.mdAndUp ? 4 : $vuetify.display.sm ? 2 : 1 "
/>
</template>
`, js: `<script setup>
const currentPage = ref(1)
</script>
<template>
<VPagination
v-model="currentPage"
:length="15"
:total-visible="$vuetify.display.mdAndUp ? 4 : $vuetify.display.sm ? 2 : 1 "
/>
</template>
` }