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

39
resources/js/views/demos/components/swiper/DemoSwiperAutoplay.vue Normal file
View File

@@ -0,0 +1,39 @@
<script setup>
import { register } from 'swiper/element/bundle'
import swiper10 from '@images/banner/banner-10.jpg'
import swiper11 from '@images/banner/banner-11.jpg'
import swiper20 from '@images/banner/banner-20.jpg'
import swiper7 from '@images/banner/banner-7.jpg'
import swiper8 from '@images/banner/banner-8.jpg'
import swiper9 from '@images/banner/banner-9.jpg'
register()
</script>
<template>
<swiper-container
pagination="true"
navigation="true"
autoplay="true"
centered-slides="true"
events-prefix="swiper-"
>
<swiper-slide
v-for="swiperImg in
[
swiper7,
swiper8,
swiper9,
swiper10,
swiper11,
swiper20,
]"
:key="swiperImg"
>
<VImg
:src="swiperImg"
cover
/>
</swiper-slide>
</swiper-container>
</template>

27
resources/js/views/demos/components/swiper/DemoSwiperBasic.vue Normal file
View File

@@ -0,0 +1,27 @@
<script setup>
import { register } from 'swiper/element/bundle'
import swiper1 from '@images/banner/banner-1.jpg'
import swiper13 from '@images/banner/banner-13.jpg'
import swiper2 from '@images/banner/banner-2.jpg'
import swiper4 from '@images/banner/banner-4.jpg'
import swiper7 from '@images/banner/banner-7.jpg'
register()
</script>
<template>
<swiper-container events-prefix="swiper-">
<swiper-slide
v-for="swiperImg in [
swiper1,
swiper2,
swiper4,
swiper7,
swiper13,
]"
:key="swiperImg"
>
<VImg :src="swiperImg" />
</swiper-slide>
</swiper-container>
</template>

84
resources/js/views/demos/components/swiper/DemoSwiperCenteredSlidesOption1.vue Normal file
View File

@@ -0,0 +1,84 @@
<script setup>
import { register } from 'swiper/element/bundle'
register()
</script>
<template>
<!-- eslint-disable vue/attribute-hyphenation -->
<div class="swiper-centered-slide">
<swiper-container
navigation="true"
centered-slides="true"
space-between="30"
slides-per-view="1"
events-prefix="swiper-"
:injectStyles="[
`
.swiper-button-next, .swiper-button-prev{
background: rgb(var(--v-theme-primary)) !important;
color: #fff !important;
padding-inline: 0.45rem !important;
padding-block: 0.45rem !important;
inline-size: 1rem !important;
block-size: 1rem !important;
border-radius: 50%
}
`,
]"
:breakpoints="{
992: {
slidesPerView: 4,
spaceBetween: 30,
},
780: {
slidesPerView: 3,
spaceBetween: 30,
},
460: {
slidesPerView: 2,
spaceBetween: 20,
},
}"
>
<swiper-slide
v-for="{ icon, text } in [
{ icon: 'ri-github-fill', text: 'Getting Started' },
{ icon: 'ri-facebook-circle-line', text: 'Pricing & Plans' },
{ icon: 'ri-twitter-line', text: 'Sales Question' },
{ icon: 'ri-instagram-line', text: 'Usage Guidelines' },
{ icon: 'ri-gitlab-line', text: 'General Guide' },
]"
:key="text"
>
<VCard>
<VCardText>
<div class="d-flex flex-column align-center gap-y-3">
<VIcon
:icon="icon"
size="28"
/>
<span class="text-high-emphasis">{{ text }}</span>
</div>
</VCardText>
</VCard>
</swiper-slide>
</swiper-container>
</div>
</template>
<style lang="scss" scoped>
swiper-slide {
padding-block: 1rem;
&.swiper-slide-active {
.v-card {
border: 1px solid rgb(var(--v-theme-primary));
.v-icon {
color: rgb(var(--v-theme-primary));
}
}
}
}
</style>

65
resources/js/views/demos/components/swiper/DemoSwiperCenteredSlidesOption2.vue Normal file
View File

@@ -0,0 +1,65 @@
<script setup>
import { register } from 'swiper/element/bundle'
register()
</script>
<template>
<swiper-container
centered-slides="true"
space-between="30"
slides-per-view="1"
events-prefix="swiper-"
:breakpoints="{
992: {
slidesPerView: 4,
spaceBetween: 30,
},
780: {
slidesPerView: 3,
spaceBetween: 30,
},
460: {
slidesPerView: 2,
spaceBetween: 30,
},
}"
>
<swiper-slide
v-for="{ icon, text } in [
{ icon: 'ri-github-fill', text: 'Getting Started' },
{ icon: 'ri-facebook-circle-line', text: 'Pricing & Plans' },
{ icon: 'ri-twitter-line', text: 'Sales Question' },
{ icon: 'ri-instagram-line', text: 'Usage Guidelines' },
{ icon: 'ri-gitlab-line', text: 'General Guide' },
]"
:key="text"
>
<VCard class="bg-default">
<VCardText>
<div class="d-flex align-center gap-x-3">
<VIcon
:icon="icon"
size="28"
/>
<span class="font-weight-medium">{{ text }}</span>
</div>
</VCardText>
</VCard>
</swiper-slide>
</swiper-container>
</template>
<style lang="scss" scoped>
swiper-slide {
padding-block: 1rem;
&.swiper-slide-active {
.v-card {
border: 1px solid rgb(var(--v-theme-primary));
background: rgb(var(--v-theme-primary));
color: rgb(var(--v-theme-on-primary));
}
}
}
</style>

56
resources/js/views/demos/components/swiper/DemoSwiperCoverflowEffect.vue Normal file
View File

@@ -0,0 +1,56 @@
<script setup>
import { register } from 'swiper/element/bundle'
import swiper31 from '@images/banner/banner-31.jpg'
import swiper32 from '@images/banner/banner-32.jpg'
import swiper33 from '@images/banner/banner-33.jpg'
import swiper34 from '@images/banner/banner-34.jpg'
import swiper35 from '@images/banner/banner-35.jpg'
import swiper36 from '@images/banner/banner-36.jpg'
import swiper37 from '@images/banner/banner-37.jpg'
import swiper38 from '@images/banner/banner-38.jpg'
import swiper39 from '@images/banner/banner-39.jpg'
register()
</script>
<template>
<swiper-container
pagination="true"
effect="coverflow"
grab-cursor="true"
centered-slides="true"
slides-per-view="auto"
coverflow-effect-rotate="50"
coverflow-effect-stretch="0"
coverflow-effect-depth="100"
coverflow-effect-modifier="1"
coverflow-effect-slide-shadows="true"
events-prefix="swiper-"
>
<swiper-slide
v-for="swiperImg in [
swiper31,
swiper32,
swiper33,
swiper34,
swiper35,
swiper36,
swiper37,
swiper38,
swiper39,
]"
:key="swiperImg"
>
<VImg :src="swiperImg" />
</swiper-slide>
</swiper-container>
</template>
<style lang="scss" scoped>
swiper-slide {
background-position: center;
background-size: cover;
block-size: 300px;
inline-size: 300px;
}
</style>

49
resources/js/views/demos/components/swiper/DemoSwiperCubeEffect.vue Normal file
View File

@@ -0,0 +1,49 @@
<script setup>
import { register } from 'swiper/element/bundle'
import swiper21 from '@images/banner/banner-21.jpg'
import swiper23 from '@images/banner/banner-23.jpg'
import swiper24 from '@images/banner/banner-24.jpg'
import swiper32 from '@images/banner/banner-32.jpg'
register()
</script>
<template>
<swiper-container
pagination="true"
centered-slides="true"
effect="cube"
grab-cursor="true"
cube-effect-shadow="true"
cube-effect-slide-shadows="true"
cube-effect-shadow-scale="0.94"
events-prefix="swiper-"
>
<swiper-slide
v-for="swiperImg in [
swiper21,
swiper32,
swiper23,
swiper24,
]"
:key="swiperImg"
>
<VImg :src="swiperImg" />
</swiper-slide>
</swiper-container>
</template>
<style lang="scss" scoped>
swiper-slide {
background-position: center;
background-size: cover;
block-size: 250px;
inline-size: 250px;
}
swiper-container {
margin: auto;
block-size: 250px;
inline-size: 250px;
}
</style>

33
resources/js/views/demos/components/swiper/DemoSwiperFade.vue Normal file
View File

@@ -0,0 +1,33 @@
<script setup>
import { register } from 'swiper/element/bundle'
import swiper16 from '@images/banner/banner-16.jpg'
import swiper17 from '@images/banner/banner-17.jpg'
import swiper18 from '@images/banner/banner-18.jpg'
import swiper19 from '@images/banner/banner-19.jpg'
import swiper20 from '@images/banner/banner-20.jpg'
register()
</script>
<template>
<swiper-container
space-between="30"
pagination="true"
navigation="true"
effect="fade"
events-prefix="swiper-"
>
<swiper-slide
v-for="swiperImg in [
swiper20,
swiper19,
swiper18,
swiper17,
swiper16,
]"
:key="swiperImg"
>
<VImg :src="swiperImg" />
</swiper-slide>
</swiper-container>
</template>

88
resources/js/views/demos/components/swiper/DemoSwiperGallery.vue Normal file
View File

@@ -0,0 +1,88 @@
<script setup>
import { register } from 'swiper/element/bundle'
import swiper11 from '@images/banner/banner-11.jpg'
import swiper12 from '@images/banner/banner-12.jpg'
import swiper13 from '@images/banner/banner-13.jpg'
import swiper15 from '@images/banner/banner-15.jpg'
import swiper16 from '@images/banner/banner-16.jpg'
register()
</script>
<template>
<swiper-container
class="mySwiper"
thumbs-swiper=".mySwiper2"
loop="true"
space-between="10"
navigation="true"
centered-slides="true"
events-prefix="swiper-"
>
<swiper-slide
v-for="swiperImg in [
swiper11,
swiper12,
swiper13,
swiper15,
swiper16,
swiper11,
swiper12,
swiper13,
]"
:key="swiperImg"
>
<VImg
:src="swiperImg"
cover
/>
</swiper-slide>
</swiper-container>
<swiper-container
class="mySwiper2"
loop="true"
free-mode="true"
events-prefix="swiper-"
slides-per-view="4"
>
<swiper-slide
v-for="swiperImg in [
swiper11,
swiper12,
swiper13,
swiper15,
swiper16,
swiper11,
swiper12,
swiper13,
]"
:key="swiperImg"
>
<VImg
:src="swiperImg"
cover
/>
</swiper-slide>
</swiper-container>
</template>
<style lang="scss" scoped>
swiper-container {
background-color: #000;
}
.mySwiper2 {
swiper-slide {
border: 5px solid black;
block-size: 100%;
inline-size: 25%;
opacity: 0.4;
}
.swiper-slide-thumb-active {
opacity: 1;
}
}
</style>

46
resources/js/views/demos/components/swiper/DemoSwiperGrid.vue Normal file
View File

@@ -0,0 +1,46 @@
<script setup>
import { register } from 'swiper/element/bundle'
import swiper26 from '@images/banner/banner-26.jpg'
import swiper28 from '@images/banner/banner-28.jpg'
import swiper29 from '@images/banner/banner-29.jpg'
import swiper30 from '@images/banner/banner-30.jpg'
import swiper31 from '@images/banner/banner-31.jpg'
import swiper32 from '@images/banner/banner-32.jpg'
import swiper33 from '@images/banner/banner-33.jpg'
import swiper34 from '@images/banner/banner-34.jpg'
import swiper35 from '@images/banner/banner-35.jpg'
import swiper39 from '@images/banner/banner-39.jpg'
register()
</script>
<template>
<swiper-container
slides-per-view="4"
grid-fill="rows"
space-between="30"
grid-rows="2"
pagination-clickable="true"
events-prefix="swiper-"
>
<swiper-slide
v-for="swiperImg in [
swiper26,
swiper39,
swiper28,
swiper29,
swiper30,
swiper31,
swiper32,
swiper33,
swiper34,
swiper35,
swiper26,
swiper39,
]"
:key="swiperImg"
>
<VImg :src="swiperImg" />
</swiper-slide>
</swiper-container>
</template>

39
resources/js/views/demos/components/swiper/DemoSwiperLazyLoading.vue Normal file
View File

@@ -0,0 +1,39 @@
<script setup>
import { register } from 'swiper/element/bundle'
import swiper20 from '@images/banner/banner-20.jpg'
import swiper4 from '@images/banner/banner-4.jpg'
import swiper5 from '@images/banner/banner-5.jpg'
import swiper7 from '@images/banner/banner-7.jpg'
import swiper8 from '@images/banner/banner-8.jpg'
import swiper9 from '@images/banner/banner-9.jpg'
register()
</script>
<template>
<swiper-container
pagination-clickable="true"
autoplay="true"
navigation="true"
events-prefix="swiper-"
>
<swiper-slide
v-for="swiperImg in [
swiper4,
swiper5,
swiper9,
swiper7,
swiper8,
swiper20,
]"
:key="swiperImg"
lazy="true"
>
<VImg
:src="swiperImg"
cover
loading="lazy"
/>
</swiper-slide>
</swiper-container>
</template>

32
resources/js/views/demos/components/swiper/DemoSwiperMultipleSlidesPerView.vue Normal file
View File

@@ -0,0 +1,32 @@
<script setup>
import { register } from 'swiper/element/bundle'
import swiper31 from '@images/banner/banner-31.jpg'
import swiper32 from '@images/banner/banner-32.jpg'
import swiper33 from '@images/banner/banner-33.jpg'
import swiper34 from '@images/banner/banner-34.jpg'
import swiper35 from '@images/banner/banner-35.jpg'
register()
</script>
<template>
<swiper-container
pagination="true"
slides-per-view="3"
space-between="25"
events-prefix="swiper-"
>
<swiper-slide
v-for="swiperImg in [
swiper31,
swiper32,
swiper33,
swiper34,
swiper35,
]"
:key="swiperImg"
>
<VImg :src="swiperImg" />
</swiper-slide>
</swiper-container>
</template>

30
resources/js/views/demos/components/swiper/DemoSwiperNavigation.vue Normal file
View File

@@ -0,0 +1,30 @@
<script setup>
import { register } from 'swiper/element/bundle'
import swiper14 from '@images/banner/banner-14.jpg'
import swiper2 from '@images/banner/banner-2.jpg'
import swiper3 from '@images/banner/banner-3.jpg'
import swiper4 from '@images/banner/banner-4.jpg'
import swiper7 from '@images/banner/banner-7.jpg'
register()
</script>
<template>
<swiper-container
navigation="true"
events-prefix="swiper-"
>
<swiper-slide
v-for="swiperImg in [
swiper7,
swiper4,
swiper14,
swiper3,
swiper2,
]"
:key="swiperImg"
>
<VImg :src="swiperImg" />
</swiper-slide>
</swiper-container>
</template>

30
resources/js/views/demos/components/swiper/DemoSwiperPagination.vue Normal file
View File

@@ -0,0 +1,30 @@
<script setup>
import { register } from 'swiper/element/bundle'
import swiper8 from '@images/banner/banner-8.jpg'
import swiper9 from '@images/banner/banner-9.jpg'
import swiper12 from '@images/banner/banner-12.jpg'
import swiper20 from '@images/banner/banner-20.jpg'
import swiper7 from '@images/banner/banner-7.jpg'
register()
</script>
<template>
<swiper-container
pagination="true"
events-prefix="swiper-"
>
<swiper-slide
v-for="swiperImg in [
swiper12,
swiper9,
swiper8,
swiper7,
swiper20,
]"
:key="swiperImg"
>
<VImg :src="swiperImg" />
</swiper-slide>
</swiper-container>
</template>

31
resources/js/views/demos/components/swiper/DemoSwiperProgress.vue Normal file
View File

@@ -0,0 +1,31 @@
<script setup>
import { register } from 'swiper/element/bundle'
import swiper5 from '@images/banner/banner-5.jpg'
import swiper8 from '@images/banner/banner-8.jpg'
import swiper20 from '@images/banner/banner-20.jpg'
import swiper4 from '@images/banner/banner-4.jpg'
import swiper7 from '@images/banner/banner-7.jpg'
register()
</script>
<template>
<swiper-container
navigation="true"
pagination-type="progressbar"
events-prefix="swiper-"
>
<swiper-slide
v-for="swiperImg in [
swiper8,
swiper7,
swiper20,
swiper4,
swiper5,
]"
:key="swiperImg"
>
<VImg :src="swiperImg" />
</swiper-slide>
</swiper-container>
</template>

58
resources/js/views/demos/components/swiper/DemoSwiperResponsiveBreakpoints.vue Normal file
View File

@@ -0,0 +1,58 @@
<script setup>
import { register } from 'swiper/element/bundle'
import swiper31 from '@images/banner/banner-31.jpg'
import swiper32 from '@images/banner/banner-32.jpg'
import swiper33 from '@images/banner/banner-33.jpg'
import swiper34 from '@images/banner/banner-34.jpg'
import swiper35 from '@images/banner/banner-35.jpg'
import swiper36 from '@images/banner/banner-36.jpg'
import swiper37 from '@images/banner/banner-37.jpg'
import swiper38 from '@images/banner/banner-38.jpg'
import swiper39 from '@images/banner/banner-39.jpg'
register()
</script>
<template>
<swiper-container
pagination-clickable="true"
slides-per-view="5"
space-between="50"
events-prefix="swiper-"
:breakpoints="{
1024: {
slidesPerView: 4,
spaceBetween: 40,
},
768: {
slidesPerView: 3,
spaceBetween: 30,
},
640: {
slidesPerView: 2,
spaceBetween: 20,
},
320: {
slidesPerView: 1,
spaceBetween: 10,
},
}"
>
<swiper-slide
v-for="swiperImg in [
swiper31,
swiper32,
swiper33,
swiper34,
swiper35,
swiper36,
swiper37,
swiper38,
swiper39,
]"
:key="swiperImg"
>
<VImg :src="swiperImg" />
</swiper-slide>
</swiper-container>
</template>

123
resources/js/views/demos/components/swiper/DemoSwiperVirtualSlides.vue Normal file
View File

@@ -0,0 +1,123 @@
<script setup>
import { register } from 'swiper/element/bundle'
register()
const slides = Array.from({ length: 500 }, (_, index) => `Slides ${ index + 1 }`)
const swiperEl = ref(null)
const prependNumber = ref(1)
const appendNumber = ref(500)
const toSlide = index => {
swiperEl.value?.swiper.slideTo(index - 1)
}
const prependSlide = () => {
swiperEl.value?.swiper.prependSlide([
`<swiper-slide>Slide ${ --prependNumber.value } </swiper-slide>`,
`<swiper-slide>Slide ${ --prependNumber.value } </swiper-slide>`,
])
}
const appendSlide = () => {
swiperEl.value?.swiper.appendSlide([`<swiper-slide>Slide ${ ++appendNumber.value } </swiper-slide>`])
}
</script>
<template>
<section class="swiper-virtual">
<swiper-container
ref="swiperEl"
virtual="true"
:slides="slides"
navigation="true"
slides-per-view="5"
space-between="50"
free-mode="true"
events-prefix="swiper-"
:breakpoints="{
1024: {
slidesPerView: 4,
spaceBetween: 40,
},
768: {
slidesPerView: 3,
spaceBetween: 30,
},
640: {
slidesPerView: 2,
spaceBetween: 20,
},
320: {
slidesPerView: 1,
spaceBetween: 10,
},
}"
>
<swiper-slide
v-for="(item, index) in slides"
:key="index"
>
{{ item }}
</swiper-slide>
</swiper-container>
<div class="d-flex justify-center gap-4 flex-wrap">
<VBtn
variant="outlined"
color="primary"
@click.prevent="prependSlide"
>
Prepend 2 Slides
</VBtn>
<VBtn
variant="outlined"
color="primary"
@click.prevent="toSlide(1)"
>
Slide 1
</VBtn>
<VBtn
variant="outlined"
color="primary"
@click.prevent="toSlide(250)"
>
Slide 250
</VBtn>
<VBtn
variant="outlined"
color="primary"
@click.prevent="toSlide(500)"
>
Slide 500
</VBtn>
<VBtn
variant="outlined"
color="primary"
@click.prevent="appendSlide"
>
Append Slide
</VBtn>
</div>
</section>
</template>
<style lang="scss">
.swiper-virtual {
swiper-slide {
display: flex;
align-items: center;
justify-content: center;
background: #eee;
font-size: 18px;
text-align: center;
}
swiper-container {
block-size: 300px;
inline-size: 100%;
margin-block: 20px;
margin-inline: auto;
}
}
</style>

1699
resources/js/views/demos/components/swiper/demoCodeSwiper.js Normal file
View File

File diff suppressed because it is too large Load Diff