keanu-weblite/src/components/StickerPickerBottomSheet.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>