76 lines
No EOL
1.7 KiB
Vue
76 lines
No EOL
1.7 KiB
Vue
<template>
|
|
<BottomSheet ref="sheet" class="sticker-picker">
|
|
<v-tabs
|
|
v-model="currentStickerPack"
|
|
centered
|
|
class="tabs"
|
|
show-arrows
|
|
slider-color="primary"
|
|
>
|
|
<v-tab v-for="(pack,ipack) in packs" :key="'pack-' + ipack" :value="'pack-' + ipack">
|
|
{{ pack }}
|
|
</v-tab>
|
|
</v-tabs>
|
|
<v-tabs-window v-model="currentStickerPack">
|
|
<v-window-item v-for="(pack,ipack) in packs" :key="'pack-content-' + ipack" :value="'pack-' + ipack">
|
|
<v-card variant="flat">
|
|
<v-container fluid>
|
|
<v-row>
|
|
<v-col cols="2" v-for="sticker in stickersInPack(pack)" :key="pack + sticker.name">
|
|
<v-img @click="selectSticker(pack, sticker)" :src="sticker.image" contain />
|
|
</v-col>
|
|
</v-row>
|
|
</v-container>
|
|
</v-card>
|
|
</v-window-item>
|
|
</v-tabs-window>
|
|
</BottomSheet>
|
|
</template>
|
|
|
|
<script>
|
|
import BottomSheet from "./BottomSheet";
|
|
import stickers from '../plugins/stickers';
|
|
|
|
export default {
|
|
components: {
|
|
BottomSheet,
|
|
},
|
|
data() {
|
|
return {
|
|
currentStickerPack: 'pack-0',
|
|
packs: [],
|
|
};
|
|
},
|
|
mounted() {},
|
|
methods: {
|
|
open() {
|
|
this.packs = stickers.getPacks();
|
|
this.$refs.sheet.open();
|
|
},
|
|
stickersInPack(pack) {
|
|
return stickers.stickersInPack(pack);
|
|
},
|
|
selectSticker(pack, sticker) {
|
|
this.$refs.sheet.close();
|
|
this.$emit('selectSticker', stickers.getStickerShortcode(pack, sticker));
|
|
}
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
@use "@/assets/css/chat.scss" as *;
|
|
</style>
|
|
|
|
<style lang="scss">
|
|
.sticker-picker {
|
|
z-index: 10;
|
|
|
|
.tabs {
|
|
position: sticky;
|
|
top: 0px;
|
|
z-index: 1;
|
|
background: white;
|
|
}
|
|
}
|
|
</style> |