mirror of
https://github.com/YunoHost/yunohost-admin.git
synced 2024-09-03 20:06:15 +02:00
98 lines
2.1 KiB
Vue
98 lines
2.1 KiB
Vue
<template lang="html">
|
|
<div class="selectize-zone">
|
|
<div id="selected-items" v-if="selected.length > 0">
|
|
<b-button-group size="sm" v-for="item in filteredSelected" :key="item">
|
|
<b-button :to="itemRoute ? {name: itemRoute, params: {name: item}} : null" class="item-btn btn-light btn-outline-dark">
|
|
<icon :iname="itemIcon" /> {{ item | filter(format) }}
|
|
</b-button>
|
|
<b-button
|
|
v-if="!removable || removable(item)"
|
|
class="remove-btn btn-outline-dark" variant="warning"
|
|
@click="onRemove(item)"
|
|
>
|
|
<icon :title="$t('delete')" iname="minus" />
|
|
</b-button>
|
|
</b-button-group>
|
|
</div>
|
|
|
|
<base-selectize
|
|
v-if="choices.length"
|
|
:choices="choices"
|
|
:format="format"
|
|
:label="label"
|
|
@selected="$emit('change', { ...$event, action: 'add' })"
|
|
/>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import BaseSelectize from '@/components/BaseSelectize'
|
|
|
|
export default {
|
|
name: 'ZoneSelectize',
|
|
|
|
props: {
|
|
itemIcon: { type: String, default: null },
|
|
itemRoute: { type: String, default: null },
|
|
selected: { type: Array, required: true },
|
|
// needed by SelectizeBase
|
|
choices: { type: Array, required: true },
|
|
label: { type: String, default: null },
|
|
format: { type: Function, default: null },
|
|
removable: { type: Function, default: null }
|
|
},
|
|
|
|
data: () => ({
|
|
visible: false,
|
|
search: '',
|
|
focusedIndex: 0
|
|
}),
|
|
|
|
computed: {
|
|
filteredSelected () {
|
|
return [...this.selected].sort()
|
|
}
|
|
},
|
|
|
|
methods: {
|
|
onRemove (item) {
|
|
this.$emit('change', { item, index: this.selected.indexOf(item), action: 'remove' })
|
|
}
|
|
},
|
|
|
|
filters: {
|
|
filter: function (text, func) {
|
|
if (func) return func(text)
|
|
else return text
|
|
}
|
|
},
|
|
|
|
components: {
|
|
BaseSelectize
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
#selected-items {
|
|
margin-bottom: .75rem;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
|
|
.btn-group {
|
|
margin-right: .5rem;
|
|
margin-bottom: .5rem;
|
|
|
|
.item-btn {
|
|
.icon {
|
|
margin-right: .25rem;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.fa-minus {
|
|
position: relative;
|
|
top: 1px;
|
|
}
|
|
</style>
|