mirror of https://github.com/mashirozx/sakura.git
127 lines
3.4 KiB
Vue
127 lines
3.4 KiB
Vue
<template>
|
|
<div class="layout mdc-card mdc-card--outlined">
|
|
<div class="tab-bar__wrapper">
|
|
<TabBar v-model:current="currentTabIndex" :items="tabs"></TabBar>
|
|
</div>
|
|
<Swiper
|
|
class="tab-page__wrapper"
|
|
:slidesPerView="1"
|
|
:spaceBetween="50"
|
|
:allowTouchMove="false"
|
|
:autoHeight="true"
|
|
@swiper="handleSwiperEvent"
|
|
>
|
|
<SwiperSlide
|
|
class="tab-page__container"
|
|
v-for="(tabKey, tabKeyIndex) in tabKeys"
|
|
:key="tabKeyIndex"
|
|
>
|
|
<div class="tab-page__content">
|
|
<h1 class="row__wrapper--title">{{ options[tabKey].title }}</h1>
|
|
<p class="row__wrapper--desc" v-if="options[tabKey].desc"> {{ options[tabKey].desc }} </p>
|
|
<div
|
|
class="row__wrapper--options"
|
|
v-for="(option, optionIndex) in options[tabKey].options"
|
|
:key="optionIndex"
|
|
>
|
|
<OptionItem :option="option"></OptionItem>
|
|
</div>
|
|
</div>
|
|
</SwiperSlide>
|
|
</Swiper>
|
|
<div class="buttons__wrapper">
|
|
<NormalButton icon="fas fa-save" context="Save" :contained="true"></NormalButton>
|
|
<NormalButton icon="fas fa-upload" context="Import" :contained="true"></NormalButton>
|
|
<NormalButton icon="fas fa-download" context="Export" :contained="true"></NormalButton>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts">
|
|
import {
|
|
defineComponent,
|
|
ref,
|
|
Ref,
|
|
watch,
|
|
nextTick,
|
|
watchEffect,
|
|
onMounted,
|
|
onBeforeUnmount,
|
|
} from 'vue'
|
|
import { Swiper, SwiperSlide } from 'swiper/vue'
|
|
import { Swiper as SwiperInterface } from 'swiper'
|
|
import { useInjector } from '@/hooks'
|
|
import store from './store'
|
|
import options from '@/admin/options'
|
|
import TabBar from '@/components/tabBar/TabBar.vue'
|
|
import OptionItem from './OptionItem.vue'
|
|
import NormalButton from '@/components/buttons/NormalButton.vue'
|
|
|
|
export default defineComponent({
|
|
components: { TabBar, Swiper, SwiperSlide, OptionItem, NormalButton },
|
|
setup() {
|
|
// UI controllers
|
|
const currentTabIndex: Ref<number> = ref(0)
|
|
const swiperRef: Ref<SwiperInterface | null> = ref(null)
|
|
const tabKeys = Object.keys(options)
|
|
const tabs = tabKeys.map((key) => {
|
|
return { context: options[key].title, icon: options[key].icon }
|
|
})
|
|
const handleSwiperEvent = (swiper: SwiperInterface) => {
|
|
swiperRef.value = swiper
|
|
}
|
|
|
|
watch(currentTabIndex, (current) => swiperRef.value?.slideTo(current))
|
|
|
|
const updateAutoHeight = () => swiperRef.value?.updateAutoHeight(0)
|
|
|
|
// nextTick(() => updateAutoHeight())
|
|
// watchEffect(() => updateAutoHeight())
|
|
|
|
onMounted(() => {
|
|
const timer = setInterval(() => updateAutoHeight(), 100)
|
|
onBeforeUnmount(() => clearInterval(timer))
|
|
})
|
|
|
|
// data controllers
|
|
const { config, setConfig } = useInjector(store)
|
|
|
|
return { currentTabIndex, tabKeys, tabs, options, handleSwiperEvent }
|
|
},
|
|
})
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
::v-deep() {
|
|
@import 'swiper/swiper';
|
|
}
|
|
|
|
.layout {
|
|
width: 100%;
|
|
overflow: hidden;
|
|
> .tab-bar__wrapper {
|
|
width: 100%;
|
|
border-bottom: 1px solid rgba(0, 0, 0, 0.12);
|
|
}
|
|
> .tab-page__wrapper {
|
|
width: 100%;
|
|
.tab-page__container {
|
|
width: 100%;
|
|
.tab-page__content {
|
|
width: calc(100% - 24px);
|
|
padding: 12px;
|
|
}
|
|
}
|
|
}
|
|
> .buttons__wrapper {
|
|
display: flex;
|
|
flex-flow: row wrap;
|
|
justify-content: flex-start;
|
|
align-items: center;
|
|
gap: 12px;
|
|
padding: 12px;
|
|
width: calc(100% - 24px);
|
|
}
|
|
}
|
|
</style>
|