helix-ui/docs/components/tabset/tabset-demo.js at 0be08cac69c40143061f4408f7018c62944dbd7d · HelixDesignSystem/helix-ui · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
import Util from '../../_util';

function getDefaultData (force = false) {
    let data = {
        nextID: 4,
        currentTab: 0,
        tabs: [
            { id: 1 },
            { id: 2 },
            { id: 3 },
        ],
        tabSize: 3,
    };

    if (force === true) {
        data.autoUpdate = false;
    }

    return data;
}

if (document.getElementById('vue-dynamicTabsetDemo')) {
    new Vue({
        el: '#vue-dynamicTabsetDemo',
        data: getDefaultData(true),
        updated: function () {
            // keep currentTab in bounds
            if (this.currentTab >= this.tabs.length) {
                this.currentTab = (this.tabs.length ? this.tabs.length - 1 : 0);
            }

            // keep correct tab/panel pair open when a "tab" is added
            if (this.autoUpdate) {
                this.update();
            }

            this.tabSize = this.tabs.length;
        },
        methods: {
            addTab: function (dir) {
                let id = this.nextID++;

                switch (dir) {
                    case 'start':
                        this.tabs.unshift({ id });
                        break;
                    case 'end':
                        this.tabs.push({ id });
                        break;
                    default:
                        // do nothing
                        break;
                }
            },
            removeTab: function (dir) {
                switch (dir) {
                    case 'start':
                        this.tabs.shift();
                        break;
                    case 'end':
                        this.tabs.pop();
                        break;
                    default:
                        // do nothing
                        break;
                }
            },
            onTabchange: function (evt) {
                this.currentTab = evt.target.currentTab;
            },
            reset: function () {
                Object.assign(this.$data, getDefaultData());

                // defer update to next event loop to avoid
                // conflicting with resetting this.$data
                setTimeout(this.update, 0);
            },
            update: function () {
                this.$refs.tabset.update();
            },
        },
        computed: {
            _tabs: function () {
                return this.tabs.map((tab, idx) => {
                    let html = `<hx-tab id="tab-${tab.id}"`;
                    if (idx === this.currentTab) {
                        html += ' current="true"';
                    }
                    html += '></hx-tab>';
                    return html;
                });
            },
            _tabpanels: function () {
                return this.tabs.map((tab, idx) => {
                    let html = `<hx-tabpanel id="panel-${tab.id}"`;
                    if (idx === this.currentTab) {
                        html += ' open';
                    }
                    html += '></hx-tabpanel>';
                    return html;
                });
            },
            _tablist: function () {
                return this._tabs.reduce((all, tab) => {
                    return `${all}\n    ${tab}`;
                }, '');
            },
            _tabcontent: function () {
                return this._tabpanels.reduce((all, panel) => {
                    return `${all}\n    ${panel}`;
                }, '');
            },
            // Indentation is intentional because `Util.snippet()`
            // isn't smart enough to re-indent HTML tags.
            snippet: function () {
                return Util.snippet(`
<hx-tabset current-tab="${this.currentTab}" tabsize="${this.tabSize}">
  <hx-tablist>
    ${this._tablist}
  </hx-tablist>
  <hx-tabcontent>
    ${this._tabcontent}
  </hx-tabcontent>
</hx-tabset>
                `);
            },
        },
    });
}