<commit_before>/**
 * @file Tabs
 * @author leon <<EMAIL>>
 */

import san from 'san';
import css from '../common/util/css';
import {TAB_INIT, TAB_ACTIVE, TAB_DISPOSE} from './constant';

export default san.defineComponent({

    template: `
        <div class="sm-tabs">
            <slot />
            <div class="sm-tabs-bar" style="{{barStyle}}"/>
        </div>
    `,

    initData() {
        return {
            items: []
        };
    },

    computed: {
        barStyle() {

            let items = this.data.get('items');
            let value = this.data.get('value');
            let total = items.length;
            let activeIndex = items.findIndex(
                item => item.data.get('value') === value
            );

            if (activeIndex < 0) {
                activeIndex = 0;
            }

            return css({
                transform: `translateX(${activeIndex * 100}%)`,
                width: `${1 / total * 100}%`
            });

        }
    },

    messages: {
        [TAB_INIT]({target}) {
            this.data.push('items', target);
        },
        [TAB_ACTIVE]({target}) {
            this.data.get('items').forEach(child => {
                let active = child === target;
                child.data.set('active', active);
                if (active) {
                    this.data.set('value', target.data.get('value'));
                }
            });
        },
        [TAB_DISPOSE]({target}) {
            this.data.remove('items', target);
        }
    }

});<commit_msg>item data when tab dispatch message<commit_after>/**
 * @file Tabs
 * @author leon <<EMAIL>>
 */

import san from 'san';
import css from '../common/util/css';
import {TAB_INIT, TAB_ACTIVE, TAB_DISPOSE} from './constant';

export default san.defineComponent({

    template: `
        <div class="sm-tabs">
            <slot />
            <div class="sm-tabs-bar" style="{{barStyle}}"/>
        </div>
    `,

    initData() {
        return {
            items: []
        };
    },

    inited() {
        this.items = [];
    },

    disposed() {
        this.items = null;
    },

    addItem(itemComponent) {
        this.items.push(itemComponent);
        this.data.push('items', itemComponent.data.get('value'));
    },

    removeItem(itemComponent) {
        this.items = this.items.filter(item => item === itemComponent);
        this.data.remove('items', itemComponent.data.get('value'));
    },

    computed: {
        barStyle() {

            let items = this.data.get('items');
            let value = this.data.get('value');
            let total = items.length;
            let activeIndex = items.findIndex(
                item => item === value
            );

            if (activeIndex < 0) {
                activeIndex = 0;
            }

            return css({
                transform: `translateX(${activeIndex * 100}%)`,
                width: `${1 / total * 100}%`
            });

        }
    },

    messages: {
        [TAB_INIT]({target}) {
            this.addItem(target);
        },

        [TAB_ACTIVE]({target}) {
            this.data.get('items').forEach(child => {
                let active = child === target;
                child.data.set('active', active);
                if (active) {
                    this.data.set('value', target.data.get('value'));
                }
            });
        },

        [TAB_DISPOSE]({target}) {
            this.removeItem(target);
        }
    }

});
{'fraction_non_alphanumeric': 0.15969036697247707, 'fraction_numerical': 0.005160550458715597, 'mean_word_length': 1.4415675297410777, 'pattern_counts': {'":': 0, '<': 17, '<?xml version=': 0, '>': 20, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '1254657', 'n_tokens_mistral': 1036, 'n_tokens_neox': 971, 'n_words': 187}