https://www.mentza.com/assets/channel_dropdown-8c32a54c.js

1// app/typescript/channel_dropdown.ts
2import Multiselect from "vue-multiselect";
3import { defineComponent, ref, watch } from "vue";
4var ChannelDropdown = defineComponent({
5  name: "ChannelDropdown",
6  components: {
7    Multiselect
8  },
9  props: {
10    modelValue: {
11      type: Array,
12      default: () => []
13    }
14  },
15  setup(props, { emit }) {
16    const selectedChannels = ref(props.modelValue);
17    const channels = ref([]);
18    const isLoading = ref(false);
19    watch(() => props.modelValue, (newValue) => {
20      selectedChannels.value = newValue;
21    }, { deep: true });
22    watch(selectedChannels, (newValue) => {
23      emit("update:modelValue", newValue);
24    }, { deep: true });
25    const limitText = (count) => {
26      return `and ${count} other channels`;
27    };
28    const fetchChannels = (query) => {
29      isLoading.value = true;
30      const fixedUrl = `/admin/channel_dropdown?q=${query}`;
31      fetch(fixedUrl).then((response) => response.json()).then((data) => {
32        channels.value = data.results;
33        isLoading.value = false;
34      }).catch(() => {
35        isLoading.value = false;
36      });
37    };
38    const clearAll = () => {
39      selectedChannels.value = [];
40    };
41    return {
42      selectedChannels,
43      channels,
44      isLoading,
45      limitText,
46      fetchChannels,
47      clearAll
48    };
49  },
50  template: `
51    <div>
52      <multiselect
53        v-model="selectedChannels"
54        id="channel-dropdown"
55        label="text"
56        track-by="id"
57        placeholder="Type to search"
58        open-direction="bottom"
59        :blockKeys="['Delete']"
60        :options="channels"
61        :multiple="true"
62        :searchable="true"
63        :loading="isLoading"
64        :internal-search="false"
65        :clear-on-select="true"
66        :close-on-select="false"
67        :options-limit="300"
68        :limit="300"
69        :limit-text="limitText"
70        :max-height="600"
71        :show-no-results="true"
72        :hide-selected="true"
73        @search-change="fetchChannels"
74      >
75        <template #tag="{ option, remove }">
76          <span class="custom__tag">
77            <span>{{ option.text }}</span>
78            <span class="custom__remove" @click="remove(option)">❌</span>
79          </span>
80        </template>
81        <template #clear="props">
82          <div class="multiselect__clear" v-if="selectedChannels.length" @mousedown.prevent.stop="clearAll()">
83          </div>
84        </template>
85        <template #noResult>
86          <span>No results found</span>
87        </template>
88      </multiselect>
89    </div>
90  `
91});
92var channel_dropdown_default = ChannelDropdown;
93export {
94  channel_dropdown_default as default
95};