How to use the san.Component function in san

/**
 * @file 表格 - thead
 * @author errorrik
 * @author jinzhubaofu 
 */

import san from 'san';

export default class THead extends san.Component {

    static template = `
        
    `;

    static messages = {
        'UI:tr-inited'(e) {
            let tr = e.target;
            tr.data.set('pos', 'thead');
            tr.data.set('tableSelectable', this.data.get('tableSelectable'));
            this.tr = tr;
        }
    };

    inited() {
        this.dispatch('UI:thead-inited');

/**
 * @file 表格
 * @author errorrik
 * @author jinzhubaofu 
 */

import san, {DataTypes} from 'san';
import {create} from '../common/util/cx';

const cx = create('table');

export default class Table extends san.Component {
    static template = `
        <table class="{{className}}">
            
            
            
        </table>
    `;

    static messages = {
        'UI:tbody-inited'(e) {
            this.tbody = e.target;
            e.target.data.set('tableSelectable', this.data.get('selectable'));
        },
        'UI:thead-inited'(e) {
            this.thead = e.target;
            e.target.data.set('tableSelectable', this.data.get('selectable'));

import san from 'san';
import cx from 'classnames';

function getMaxValue(type) {
    switch (type) {
        case '12hour':
            return 12;
        case '24hour':
            return 24;
        case 'minute':
            return 60;
    }
}

export default class Clock extends san.Component {

    static template = `
        <div class="sm-time-picker-clock">
            <div style="pointer-events: none">
                <b style="{{pointerStyle}}" class="{{pointerClassName}}">
                <i style="{{numberStyle[i]}}" class="{{numberClassName[i]}}">
                    {{item.text}}
                </i>
            </b></div><b style="{{pointerStyle}}" class="{{pointerClassName}}">
        </b></div><b style="{{pointerStyle}}" class="{{pointerClassName}}">
    `;</b>

/**
 * @file 表格
 * @author errorrik
 * @author jinzhubaofu 
 */

import san from 'san';
import TR from './TR';

export default class TBody extends san.Component {

    static template = `
        
            
        
    `;

    static messages = {
        'UI:tr-inited'(e) {
            let tr = e.target;
            tr.data.set('pos', 'tbody');
            tr.data.set('tableSelectable', this.data.get('tableSelectable'));
        },

        'UI:table-select-item'(e) {
            let selectable = this.data.get('tableSelectable');

/**
 * @file 表格 - tfoot
 * @author errorrik
 * @author jinzhubaofu 
 */

import san from 'san';

export default class TFoot extends san.Component {

    static template = `
        
    `;

    static messages = {
        'UI:tr-inited'(e) {
            let tr = e.target;
            tr.data.set('pos', 'tfoot');
            tr.data.set('tableSelectable', this.data.get('tableSelectable'));
        }
    };

    inited() {
        this.dispatch('UI:tfoot-inited');
    }

/**
 * @file san-mui/Carousel
 * @author solvan 
 */

import san from 'san';
import {create} from '../common/util/cx';
import {IconButton, Button} from '../Button';
import {throttle} from '../common/util/throttle';

const cx = create('carousel');
export default class Carousel extends san.Component {

    static template = `
        <div class="{{computedClassName}}">
            <div style="height: {{height}}px" class="${cx.getPartClassName('container')}">
                
                    {{prevIcon}}
                
</div></div>

/**
 * @file 表格 - th
 * @author errorrik
 * @author jinzhubaofu 
 */

import san from 'san';

export default class TH extends san.Component {
    static template = `
        
    `;
}

/**
 * @file san-mui/Carousel
 * @author solvan 
 */

import san from 'san';
import {create} from '../common/util/cx';

const cx = create('carousel-item');

export default class CarouselItem extends san.Component {

    static template = `

        <div style="transform: translateX({{translate}}px);
            -webkit-transform: translateX({{translate}}px);" class="{{computedClassName}} {{active ? 'is-active' : '' }}">
            
            <div class="${cx.getPartClassName('text-mask')}">
                
            </div>
        </div>

    `;
    static computed = {

/**
 * @file ExpansionPanel
 * @author leon 
 */

import san, {DataTypes} from 'san';
import {create} from '../common/util/cx';
import css from '../common/util/css';
import {IconButton} from '../Button';

const cx = create('expansion-panel');

export default class ExpansionPanel extends san.Component {

    static template = `
        <div class="{{computedClassName}}">
            <div class="${cx.getPartClassName('header')}">
                <div class="${cx.getPartClassName('title')}">
                    {{title}}
                </div>
                <div class="${cx.getPartClassName('description')}">
                    {{description}}
                </div>
                
                    {{icon}}
                
            </div></div>

this.slot('count')[0].children.forEach(children => {
            if (children instanceof san.Component) {
                children.data.set('class', scrollNumberPrefixCls + '-custom-component');
            }
        });
    },