generated from it-at-m/oss-repository-en-template
-
Notifications
You must be signed in to change notification settings - Fork 0
✨ 272 slider component #357
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Merged
Merged
Changes from all commits
Commits
Show all changes
23 commits
Select commit
Hold shift + click to select a range
74f4bcc
272: add slider component
lehju 8735d73
Merge branch 'beta' into 272-slider-component
lehju 66902b5
272: add slider component
lehju f81db75
272: format code
lehju cc4033e
272: add emit and accessibility
lehju 50b1658
272: format code
lehju 6113881
272: delete console log
lehju 3d25c44
Merge branch 'beta' into 272-slider-component
lehju e46799e
272: disable vertical scroll
lehju 0b94b2e
272: format code
lehju db65b8b
272: change package-lock.json
lehju 70cb296
:green_heart: use fork of vue-splide to fix ts-errors
FabianWilms e6ebb92
Merge branch 'beta' into 272-slider-component
langehm 1fa0e1b
replaced buttons with muc-buttons
langehm ede40a3
using templateRef to access ref
langehm 763e171
using templateRef to access ref
langehm f7ba07b
Merge remote-tracking branch 'origin/272-slider-component' into 272-s…
langehm 858ab60
272: pr feedback
lehju 5f2cfda
272: format code
lehju dc00194
Merge branch 'beta' into 272-slider-component
lehju 0eedb08
272: adjust package-lock.json
lehju 0cfeb05
272: format code
lehju e39aa6a
272: rename SliderOptions.ts in MucSliderOptions.ts
lehju File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
There are no files selected for viewing
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Oops, something went wrong.
This file contains hidden or 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
This file contains hidden or 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,39 @@ | ||
import MucCard from "../Card/MucCard.vue"; | ||
import MucSlider from "./MucSlider.vue"; | ||
import MucSliderItem from "./MucSliderItem.vue"; | ||
|
||
export default { | ||
components: { MucSliderItem, MucSlider }, | ||
component: MucSlider, | ||
title: "MucSlider", | ||
tags: ["autodocs"], | ||
parameters: { | ||
docs: { | ||
description: { | ||
component: `A wrapping layout to show elements in a carousel and slide them, for example [MucCards](/docs/muccard--docs). | ||
|
||
🔗 Patternlab-Docs (https://patternlab.muenchen.space/?p=components-slider-quote) | ||
`, | ||
}, | ||
}, | ||
}, | ||
}; | ||
|
||
export const Template = () => ({ | ||
components: { MucCard, MucSlider, MucSliderItem }, | ||
template: ` | ||
<MucSlider> | ||
<MucSliderItem v-for="index in 5" :key="index"> | ||
<MucCard | ||
title="Lorem Ipsum" | ||
tagline="Dolor" | ||
> | ||
<template #content> | ||
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et | ||
dolore magna aliquyam erat, sed diam voluptua. | ||
</template> | ||
</MucCard> | ||
</MucSliderItem> | ||
</MucSlider> | ||
`, | ||
}); |
This file contains hidden or 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,130 @@ | ||
<template> | ||
<div | ||
class="m-component m-component-slider-comment" | ||
style="overflow: hidden" | ||
> | ||
<div class="container"> | ||
<div class="m-component__grid"> | ||
<div class="m-component__column"> | ||
<section | ||
class="m-slider m-slider--visible-preview" | ||
aria-label="Slider mit Elementen" | ||
data-m-slider-splide="m-slider-comment" | ||
> | ||
<button | ||
v-if="showBackArrow" | ||
aria-label="Vorheriges Element" | ||
class="previous-button is-control" | ||
@click="prevSlide" | ||
> | ||
<svg class="icon"> | ||
<use xlink:href="#icon-arrow-left"></use> | ||
</svg> | ||
langehm marked this conversation as resolved.
Show resolved
Hide resolved
|
||
</button> | ||
<Splide | ||
:options="mucSliderOptions" | ||
aria-label="Dies ist ein Karussell mit rotierenden Elementen. Verwenden Sie | ||
die Pfeiltaste links und rechts oder die Buttons um zu navigieren." | ||
ref="splide" | ||
> | ||
<slot /> | ||
</Splide> | ||
<button | ||
v-if="showNextArrow" | ||
aria-label="Nächstes Element" | ||
class="next-button is-control" | ||
@click="nextSlide" | ||
> | ||
<svg class="icon"> | ||
<use xlink:href="#icon-arrow-right"></use> | ||
</svg> | ||
</button> | ||
langehm marked this conversation as resolved.
Show resolved
Hide resolved
|
||
</section> | ||
</div> | ||
</div> | ||
</div> | ||
</div> | ||
</template> | ||
|
||
<script setup lang="ts"> | ||
import { Splide } from "@splidejs/vue-splide"; | ||
import { computed, onMounted, ref, useTemplateRef } from "vue"; | ||
|
||
import { mucSliderOptions } from "./MucSliderOptions"; | ||
|
||
defineSlots<{ | ||
/** | ||
* MucSliderItems can be put into this slot. | ||
*/ | ||
default(): any; | ||
}>(); | ||
|
||
const emit = defineEmits<{ | ||
/** | ||
* Triggered when an item is clicked. | ||
* @param id of the clicked item | ||
*/ | ||
changeSlide: [index: number]; | ||
}>(); | ||
|
||
const splide = useTemplateRef("splide"); | ||
|
||
/** | ||
* Index of the current silde | ||
*/ | ||
const currentSlide = ref<number>(0); | ||
|
||
/** | ||
* Length of the splide | ||
*/ | ||
const splideLength = ref<number>(0); | ||
|
||
/** | ||
* Set next slide | ||
*/ | ||
const nextSlide = () => { | ||
if (splide.value) { | ||
splide.value.go(">"); | ||
} | ||
}; | ||
|
||
/** | ||
* Set previous slide | ||
*/ | ||
const prevSlide = () => { | ||
if (splide.value) { | ||
splide.value.go("<"); | ||
} | ||
}; | ||
|
||
/** | ||
* Computed property set back button | ||
*/ | ||
const showBackArrow = computed(() => currentSlide.value > 0); | ||
|
||
/** | ||
* Computed property set next button | ||
*/ | ||
const showNextArrow = computed( | ||
() => currentSlide.value < splideLength.value - 1 | ||
); | ||
|
||
onMounted(() => { | ||
if (splide.value && splide.value.splide) { | ||
splideLength.value = splide.value.length; | ||
splide.value.splide.on("move", () => { | ||
if (splide.value) { | ||
currentSlide.value = splide.value.splide!.index; | ||
emit("changeSlide", splide.value.splide!.index); | ||
} | ||
}); | ||
} | ||
}); | ||
</script> | ||
|
||
<style scoped> | ||
.m-component-slider-comment { | ||
padding-right: 1.8rem; | ||
padding-left: 1.8rem; | ||
} | ||
</style> |
This file contains hidden or 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,16 @@ | ||
<template> | ||
<SplideSlide> | ||
<slot /> | ||
</SplideSlide> | ||
</template> | ||
|
||
<script setup lang="ts"> | ||
import { SplideSlide } from "@splidejs/vue-splide"; | ||
|
||
defineSlots<{ | ||
/** | ||
* Elements can be put into this slot. | ||
*/ | ||
default(): any; | ||
}>(); | ||
</script> |
This file contains hidden or 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,33 @@ | ||
import type { Options } from "@splidejs/splide"; | ||
|
||
export const mucSliderOptions: Options = { | ||
autoplay: false, | ||
keyboard: true, | ||
slideFocus: true, | ||
lazyLoad: false, | ||
arrows: false, | ||
perMove: 1, | ||
gap: "0", | ||
type: "slide", | ||
perPage: 1, | ||
pagination: false, | ||
speed: 350, | ||
drag: true, | ||
swipe: true, | ||
swipeThreshold: 50, | ||
mediaQuery: "min", | ||
breakpoints: { | ||
1: { | ||
perPage: 1, | ||
gap: "1.5rem", | ||
}, | ||
768: { | ||
perPage: 1, | ||
gap: "1.5rem", | ||
}, | ||
1200: { | ||
perPage: 1, | ||
gap: "2rem", | ||
}, | ||
}, | ||
}; |
This file contains hidden or 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,4 @@ | ||
import MucSlider from "./MucSlider.vue"; | ||
import MucSliderItem from "./MucSliderItem.vue"; | ||
|
||
export { MucSlider, MucSliderItem }; |
This file contains hidden or 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
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Uh oh!
There was an error while loading. Please reload this page.