https://www.ast-inter.ru/local/vue-components/MoreExpandList/script.js

1Vue.component("more-expand-list", {
2    data: function() {
3        return {
4            showList: false,
5            selectedCode: this.currentCode
6        }
7    },
8    name: "MoreExpandList",
9    props: {
10        list: {
11            type: [Object, Array],
12            default: {}
13        },
14        currentCode: {
15            type: [Object, Array, String],
16            default: ""
17        }
18    },
19    methods: {
20        select: function(item) {
21            if(!this.showList) {
22                this.showList = true;
23            }
24            else {
25                this.selectedCode = item.code;
26                this.showList = false;
27                this.sortList();
28                this.$emit("click", item);
29            }
30        },
31        sortList: function() {
32            for(let index in this.list) {
33                if(this.list[index].code === this.selectedCode && index > 0) {
34                    let oldPosition = this.list[0];
35                    Vue.set(this.list, 0, this.list[index]);
36                    Vue.set(this.list, index, oldPosition);
37                }
38            }
39        }
40    },
41    created: function() {
42        this.sortList();
43        let $this = this;
44        document.addEventListener('click', function(e) {
45            if ($this.showList === true) {
46                let el = $this.$el;
47                let target = e.target;
48                if (el.contains(target) === false) {
49                    $this.showList = false
50                }
51            }
52        });
53    },
54    template:
55        '<div class="more-expand-wrap" :class="{active: showList === true}">' +
56
57            '<div class="more-expand-items">' +
58
59                '<div ' +
60                    'v-for="item in list" ' +
61                    '@click="select(item)" ' +
62                    ':class="{\'d-none\': !showList && item.code !== selectedCode}" ' +
63                    'class="more-expand-item">' +
64
65                    '<span>{{ item.name }}</span>' +
66
67                    '<svg v-if="item.code === selectedCode" class="more-expand-c" :class="{collapsed: showList}" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">' +
68                        '<path d="M1 5L8 11L15 5" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>' +
69                    '</svg>' +
70                '</div>' +
71
72            '</div>' +
73
74        '</div>'
75});