mirror of
https://github.com/Ocelot-Social-Community/Ocelot-Social.git
synced 2025-12-13 07:46:06 +00:00
100 lines
2.4 KiB
Vue
100 lines
2.4 KiB
Vue
<template>
|
|
<div class="Sliders">
|
|
<!-- <h2 class="subTitle">{{ $t('login.login') + ' XXX' }}</h2> -->
|
|
<slot :name="sliderData.activeSliderName" />
|
|
<ds-flex>
|
|
<ds-flex-item>
|
|
<div
|
|
v-for="slider in sliderData.sliders"
|
|
:key="slider.name"
|
|
class="selection-button"
|
|
:class="['Sliders__component-selection']"
|
|
>
|
|
<base-button
|
|
:class="[sliderIndexByName(slider.name) >= sliderIndex && '--disabled']"
|
|
style="float: left"
|
|
:icon="slider.validated && slider.confirmed && 'check'"
|
|
:circle="true"
|
|
size="small"
|
|
type="submit"
|
|
filled
|
|
:loading="false"
|
|
:disabled="!(slider.confirmed || sliderIndexByName(slider.name) === sliderIndex)"
|
|
@click="sliderData.sliderSelectorCallback(slider.name)"
|
|
/>
|
|
</div>
|
|
</ds-flex-item>
|
|
<ds-flex-item>
|
|
<base-button
|
|
style="float: right"
|
|
:icon="(sliderIndex < sliderData.sliders.length - 1 && 'arrow-right') || (sliderIndex === sliderData.sliders.length - 1 && 'check')"
|
|
type="submit"
|
|
filled
|
|
:loading="false"
|
|
:disabled="sliderData.button.disabled"
|
|
@click="sliderData.button.callback"
|
|
>
|
|
{{ sliderData.button.title }}
|
|
</base-button>
|
|
</ds-flex-item>
|
|
</ds-flex>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: 'ComponentSlider',
|
|
props: {
|
|
sliderData: { type: Object, required: true },
|
|
},
|
|
computed: {
|
|
sliderIndex() {
|
|
return this.sliderIndexByName(this.sliderData.activeSliderName)
|
|
},
|
|
},
|
|
methods: {
|
|
sliderIndexByName(name) {
|
|
return this.sliderData.sliders.findIndex((slider) => slider.name === name)
|
|
},
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
// Wolle .pointer {
|
|
// cursor: pointer;
|
|
// }
|
|
|
|
.Sliders {
|
|
// Wolle position: relative;
|
|
// background-color: #fff;
|
|
// height: 100%;
|
|
// display: flex;
|
|
// margin: 0;
|
|
// padding: 0;
|
|
// list-style: none;
|
|
|
|
&__component-selection {
|
|
padding-right: 10px;
|
|
|
|
// text-align: center;
|
|
// height: 100%;
|
|
// flex-grow: 1;
|
|
|
|
// &:hover {
|
|
// border-bottom: 2px solid #c9c6ce;
|
|
// }
|
|
|
|
// &.--active {
|
|
// border-bottom: 2px solid #17b53f;
|
|
// }
|
|
&.--disabled {
|
|
opacity: $opacity-disabled;
|
|
// &:hover {
|
|
// border-bottom: none;
|
|
// }
|
|
}
|
|
}
|
|
}
|
|
</style>
|