SOURCE

 let categories = [
	{
		name: "chart",
		icon: "chart-pie",
		title: "图表",
		children: [
			{
				name: "chart-pie",
				icon: "text",
				title: "饼图",
			},
			{
				name: "chart-line",
				icon: "text",
				title: "折线图",
			},
			{
				name: "chart-bar",
				icon: "text",
				title: "柱状图",
			},
			{
				name: "chart-map",
				icon: "text",
				title: "地图",
			},
			{
				name: "chart-radar",
				icon: "text",
				title: "雷达图",
			},
		]
	}, {
		name: "text",
		icon: "text",
		title: "文本",
		children: [
			{
				name: "text-normal",
				icon: "text",
				title: "文本",
			},
			{
				name: "text-link",
				icon: "text",
				title: "链接",
			},
			{
				name: "text-swiper",
				icon: "text",
				title: "轮播",
			},
			{
				name: "text-datetime",
				icon: "text",
				title: "时间日期",
			},
			{
				name: "text-timer",
				icon: "text",
				title: "倒计时",
			},
			{
				name: "text-counter",
				icon: "text",
				title: "计数器",
			},
			{
				name: "text-caption",
				icon: "text",
				title: "标题",
			},
			{
				name: "text-list",
				icon: "text",
				title: "列表",
			}
		]
	}, {
		name: "image",
		icon: "image",
		title: "图片",
		children: [
			{
				name: "image-normal",
				icon: "text",
				title: "image",
			}
		]
	}, {
		name: "icon",
		icon: "icon",
		title: "图标",
		children: [
			{
				name: "icon-fb",
				icon: "icon",
				title: "系统图标",
			},
			{
				name: "icon-fa",
				icon: "icon",
				title: "fa图标",
			},
			{
				name: "icon-ali",
				icon: "icon",
				title: "ali图标",
			}
		]
	}, {
		name: "shape",
		icon: "shape",
		title: "图形",
		children: [
			{
				name: "shape-rect",
				icon: "text",
				title: "矩形",
			},
			{
				name: "shape-circle",
				icon: "text",
				title: "圆型",
			},
			{
				name: "shape-line",
				icon: "text",
				title: "直线",
			},
		]
	}, {
		name: "other",
		icon: "material",
		title: "其他",
		children: [
			{
				name: "other-iframe",
				icon: "text",
				title: "iframe",
			},
			{
				name: "other-progressbar",
				icon: "text",
				title: "progressbar",
			},
			{
				name: "other-progresscircle",
				icon: "text",
				title: "progresscircle",
			},
			{
				name: "other-tabs",
				icon: "text",
				title: "tabs",
			}
		]
	}, {
		name: "3td",
		icon: "material",
		title: "自定义",
		children: [
			{
				name: "3td-normal",
				icon: "text",
				title: "自定义",
			}
		]
	},
]


let components = [

	{
		title: "文本1",
		type: "text-normal",
		component: "sc-text"
	},
	{
		title: "文本2",
		type: "text-normal",
		component: "sc-text"
	},
	{
		title: "文本3",
		type: "text-normal",
		component: "sc-text"
	},
	{
		title: "link",
		type: "text-link",
		component: "sc-text"
	},
	{
		title: "flip-number",
		type: "text-normal",
		component: "sc-text"
	},
	{
		title: "decorate-item",
		type: "text-normal",
		component: "sc-text"
	}

]


_.each(components, (component) => {
	_.each(categories, (category) => {
		_.each(category.children, (subCategory) => {
			if (!subCategory.children) {
				subCategory.children = [];
			}
			if (subCategory.name === component.type) {
				subCategory.children.push(component);
			}
		});
	});
});



// 图层容器
Yox.component("layer-wrapper", {
    model: "config",
    template: `
        <li class="layer-wrapper" on-click="layerWrapperClick">
            <$component {{...this}} model="config" />
        </li>
    `,
    events: {
        layerWrapperClick(event, data){
            event.stop();
            this.fire("active", {
                index: this.get("index")
            })
        }
    }
});

// 图层元件
Yox.component("layer-text", {
    model: "config",
    template: `
        <div>
            <a 
                href='javascript:;'
            >layer-text: {{config.pk.value}} index: {{index}}</a>
        </div>
    `
});

////////////////////

// 属性容器
Yox.component("config-input", {
    model: "value",
    template: `
        <div>
            {{component}} {{value}}
            <br>
            <$component model="value" {{...this}} />
        </div>
    `,
    watchers: {
        value: function(val, old, kp){
            console.log(val, old, kp)
        }
    }
});
// // 属性输入元件
Yox.component("el-input", {
    model: "value",
    template: `
        <div>
            <input model="value" />
        </div>
    `,
    watchers: {
        value: function(val, old, kp){
            console.log(val, old, kp)
        }
    }
});
// // 属性选择元件
// Yox.component("el-select", {
//     template: `
//         <div>
//             <select>
//                 <option value="1111">1111</option> 
//                 <option value="2222">2222</option>   
//             </select>
//         </div>
//     `
// });



/////


let app = new Yox({
    el: "#app",
    template: `
        <div>
        <h3>{{version}}</h3>

            <div>
                <div>Select Category {{currentIndex}}</div>
                <div>
                    {{#each categories:index}}
                        <Button on-click="set('currentIndex', index)">{{title}}</Button>
                    {{/each}} 
                </div>

            </div>

            <hr>

             <div>
                  {{#each categories[currentIndex].children:index}}
                    <Collapse accordion="{{ true }}">
                        <CollapseItem name="{{name}}" title="{{title}}">
                            <ul>
                                {{#each this.children}}
                                    <li>
                                        <div class="component-preview--title">
                                            <span>{{title}}</span>
                                        </div>
                                    </li>
                                {{/each}}
                            </ul>
                        </CollapseItem>
                    </Collapse>
                {{/each}}
                </div>
        </div>
    `,

    data(){

        return {

            version: Yox.version,

            currentIndex: 0,

            categories: categories

        }
    },

    events: {

       
        
    }

});

<div id="app"></div>
<link rel="stylesheet" href="//unpkg.com/bell-ui@0.12.0/dist/bell-ui.css">
<script src="//unpkg.com/yox@1.0.0-alpha.121/dist/standard/dev/yox.js"></script>
<script src="//unpkg.com/bell-ui@0.12.0/dist/bell-ui.js"></script>

<script src="//unpkg.com/lodash@4.17.15/lodash.js"></script>