aboutsummaryrefslogtreecommitdiff
path: root/viewer/src/components
diff options
context:
space:
mode:
Diffstat (limited to 'viewer/src/components')
-rw-r--r--viewer/src/components/LdTagInput.vue40
1 files changed, 40 insertions, 0 deletions
diff --git a/viewer/src/components/LdTagInput.vue b/viewer/src/components/LdTagInput.vue
new file mode 100644
index 0000000..4edc1ce
--- /dev/null
+++ b/viewer/src/components/LdTagInput.vue
@@ -0,0 +1,40 @@
1<template>
2 <b-taginput
3 v-model="$uiStore.currentTags"
4 :placeholder="$t('tagInput.placeholder')"
5 autocomplete
6 :data="filteredTags"
7 field="tag"
8 type="is-black"
9 size="is-large"
10 class="panelTagInput"
11 @typing="getFilteredTags"
12 >
13 <template slot-scope="props">{{props.option.tag}} ({{props.option.items.length}})</template>
14 <template slot="empty">{{$t('tagInput.nomatch')}}</template>
15 </b-taginput>
16</template>
17
18<script lang="ts">
19import { Component, Vue } from "vue-property-decorator";
20
21@Component
22export default class LdTagInput extends Vue {
23 filteredTags: Tag.Node[] = [];
24
25 getFilteredTags(filter: string) {
26 const tags = this.$galleryStore.tags;
27 if (tags && filter)
28 this.filteredTags = Object.values(tags)
29 .filter(node => node.tag.includes(filter))
30 .sort((a, b) => b.items.length - a.items.length);
31 else this.filteredTags = [];
32 }
33}
34</script>
35
36<style lang="scss">
37.panelTagInput .autocomplete .dropdown-content {
38 max-height: 300px;
39}
40</style>