audiobookshelf/client/components/ui/MediaCategoryPicker.vue

<template>
  <div class="relative w-full h-9" v-click-outside="clickOutsideObj">
    <p class="text-sm font-semibold">{{ label }}</p>

    <button type="button" :disabled="disabled" class="relative h-full w-full border border-gray-600 rounded shadow-sm pl-3 pr-3 text-left focus:outline-none cursor-pointer bg-primary text-gray-100 hover:text-gray-200" aria-haspopup="listbox" aria-expanded="true" @click.stop.prevent="clickShowMenu">
      <span class="flex items-center">
        <widgets-library-icon :icon="selected" class="mr-2" />
        <span class="block truncate text-sm">{{ selectedName }}</span>
      </span>
      <span class="ml-3 absolute inset-y-0 right-0 flex items-center pr-2 pointer-events-none">
        <span class="material-icons text-gray-100">expand_more</span>
      </span>
    </button>

    <transition name="menu">
      <ul v-show="showMenu" class="absolute z-10 -mt-px w-full bg-primary border border-black-200 shadow-lg max-h-56 rounded-b-md py-1 ring-1 ring-black ring-opacity-5 overflow-auto focus:outline-none sm:text-sm" tabindex="-1" role="listbox">
        <template v-for="type in types">
          <li :key="type.id" class="text-gray-100 select-none relative py-2 cursor-pointer hover:bg-black-400" id="listbox-option-0" role="option" @click="select(type)">
            <div class="flex items-center px-3">
              <widgets-library-icon :icon="type.id" class="mr-2" />
              <span class="font-normal block truncate font-sans text-sm">{{ type.name }}</span>
            </div>
          </li>
        </template>
      </ul>
    </transition>
  </div>
</template>

<script>
export default {
  props: {
    value: String,
    disabled: Boolean,
    label: {
      type: String,
      default: 'Media Category'
    }
  },
  data() {
    return {
      clickOutsideObj: {
        handler: this.clickedOutside,
        events: ['mousedown'],
        isActive: true
      },
      showMenu: false,
      types: [
        {
          id: 'default',
          name: 'Default'
        },
        {
          id: 'audiobook',
          name: 'Audiobooks'
        },
        {
          id: 'book',
          name: 'Books'
        },
        {
          id: 'podcast',
          name: 'Podcasts'
        },
        {
          id: 'comic',
          name: 'Comics'
        }
      ]
    }
  },
  computed: {
    selected: {
      get() {
        return this.value || 'default'
      },
      set(val) {
        this.$emit('input', val)
      }
    },
    selectedItem() {
      return this.types.find((t) => t.id === this.selected)
    },
    selectedName() {
      return this.selectedItem ? this.selectedItem.name : 'Default'
    }
  },
  methods: {
    clickShowMenu() {
      if (this.disabled) return
      this.showMenu = !this.showMenu
    },
    clickedOutside() {
      this.showMenu = false
    },
    select(type) {
      if (this.disabled) return
      this.selected = type.id
      this.showMenu = false
    }
  },
  mounted() {}
}
</script>