owntone-server/web-src/src/components/IndexButtonList.vue

<template>
  <section>
    <nav class="buttons is-centered fd-is-square" style="margin-bottom: 16px">
      <a v-for="char in filtered_index" :key="char" class="button is-small" @click="nav(char)" v-text="char" />
    </nav>
  </section>
</template>

<script>
export default {
  name: 'IndexButtonList',
  props: ['index'],
  computed: {
    filtered_index() {
      if (!this.index) {
        return []
      }
      const specialChars = '!"#$%&\'()*+,-./:;<=>?@[\\]^`{|}~'
      return this.index.filter((c) => !specialChars.includes(c))
    }
  },
  methods: {
    nav: function (id) {
      this.$router.push({ hash: '#index_' + id })
    },

    scroll_to_top: function () {
      window.scrollTo({ top: 0, behavior: 'smooth' })
    }
  }
}
</script>

<style></style>