-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: Available reused SectionCardCarousel
- Loading branch information
1 parent
1050bf0
commit 14bd1db
Showing
5 changed files
with
205 additions
and
105 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
60 changes: 60 additions & 0 deletions
60
src/templates/sectioncardcarousel/SectionCardCarousel.d.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,60 @@ | ||
| /** | ||
| * | ||
| * SectionCardCarousel | ||
| * | ||
| * | ||
| * @module `sectioncardcarousel` | ||
| */ | ||
| import { VNode } from 'vue'; | ||
| import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers'; | ||
|
|
||
| // type BigNumbers = { | ||
| // justify: "center" | "start" | ||
| // items: Array<{ | ||
| // icon: string, | ||
| // title: string, | ||
| // description: string | ||
| // }> | ||
| // } | ||
|
|
||
| /** | ||
| * Defines valid properties in SectionCardCarousel component. | ||
| */ | ||
| export interface SSectionCardCarouselProps { | ||
| // data: BigNumbers; | ||
| // title: string; | ||
| // overline: string; | ||
| } | ||
|
|
||
| /** | ||
| * Defines valid slots in SSectionCardCarousel component. | ||
| */ | ||
| export interface SSectionCardCarouselSlots { | ||
| /** | ||
| * Content can easily be customized with the default slot instead of using the built-in modes. | ||
| */ | ||
| default(): VNode[]; | ||
| } | ||
|
|
||
| /** | ||
| * Defines valid emits in SSectionCardCarousel component. | ||
| */ | ||
| export interface SSectionCardCarouselEmits { | ||
| /** | ||
| * Triggered when an error occurs | ||
| */ | ||
| error(event: Event): void; | ||
| } | ||
|
|
||
| /** | ||
| * @group Component | ||
| */ | ||
| declare class SSectionCardCarousel extends ClassComponent<SSectionCardCarouselProps, SSectionCardCarouselSlots, SSectionCardCarouselEmits> { } | ||
|
|
||
| declare module 'vue' { | ||
| export interface GlobalComponents { | ||
| SSectionCardCarousel: GlobalComponentConstructor<SSectionCardCarousel>; | ||
| } | ||
| } | ||
|
|
||
| export default SSectionCardCarousel; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,67 @@ | ||
| <template> | ||
| <ContentSection | ||
| :title="title" | ||
| :overline="overline" | ||
| position="center" | ||
| titleTag="h2" | ||
| isContentCentralized | ||
| > | ||
| <template #main> | ||
| <Carousel | ||
| :value="cards" | ||
| :numVisible="4" | ||
| :numScroll="1" | ||
| :circular="true" | ||
| :autoplayInterval="5000" | ||
| :responsiveOptions="responsiveOptions" | ||
| :showIndicators="false" | ||
| > | ||
| <template #item="slotProps"> | ||
| <div class="px-3 h-full"> | ||
| <CardBaseClickable | ||
| grid | ||
| :spacing="spacing" | ||
| :link="slotProps.data.link" | ||
| :action="slotProps.data.action" | ||
| > | ||
| <template #content> | ||
| <CardTitle> | ||
| {{ slotProps.data.title }} | ||
| </CardTitle> | ||
| <template v-if="slotProps.data.description"> | ||
| <CardDescription> | ||
| {{ slotProps.data.description }} | ||
| </CardDescription> | ||
| </template> | ||
| </template> | ||
| </CardBaseClickable> | ||
| </div> | ||
| </template> | ||
| </Carousel> | ||
| </template> | ||
| </ContentSection> | ||
| </template> | ||
|
|
||
| <script setup> | ||
| import Carousel from 'primevue/carousel' | ||
| import ContentSection from '../contentsection' | ||
| import CardBaseClickable from '../cardbaseclickable' | ||
| import CardTitle from '../cardtitle' | ||
| import CardDescription from '../carddescription' | ||
| defineProps({ | ||
| overline: { | ||
| type: String | ||
| }, | ||
| title: { | ||
| type: String, | ||
| required: true | ||
| }, | ||
| cards: { | ||
| type: Array | ||
| }, | ||
| responsiveOptions: { | ||
| type: Array | ||
| } | ||
| }) | ||
| </script> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,7 @@ | ||
| { | ||
| "main": "./sectioncardcarousel.js", | ||
| "types": "./SectionCardCarousel.d.ts", | ||
| "browser": { | ||
| "./sfc": "./SectionCardCarousel.vue" | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,2 @@ | ||
| import SectionCardCarousel from './SectionCardCarousel.vue'; | ||
| export default SectionCardCarousel; |