clickgo 3.16.28 → 4.0.0

package/dist/app/demo/form/control/switch/switch.js

@@ -1,53 +0,0 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || (function () {
-    var ownKeys = function(o) {
-        ownKeys = Object.getOwnPropertyNames || function (o) {
-            var ar = [];
-            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
-            return ar;
-        };
-        return ownKeys(o);
-    };
-    return function (mod) {
-        if (mod && mod.__esModule) return mod;
-        var result = {};
-        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
-        __setModuleDefault(result, mod);
-        return result;
-    };
-})();
-Object.defineProperty(exports, "__esModule", { value: true });
-const clickgo = __importStar(require("clickgo"));
-class default_1 extends clickgo.form.AbstractForm {
-    constructor() {
-        super(...arguments);
-        this.checked1 = false;
-        this.checked2 = false;
-        this.checked3 = false;
-        this.checked4 = 0;
-        this.checked5 = false;
-        this.disabled = false;
-        this.size = ['m'];
-    }
-    async onChange(e) {
-        e.preventDefault();
-        await clickgo.form.dialog('v: ' + (e.detail.value ? 'true' : 'false'));
-    }
-}
-exports.default = default_1;

package/dist/app/demo/form/control/switch/switch.xml

@@ -1,29 +0,0 @@
-<form title="Switch" width="300" height="300" padding="10">
-    <layout direction="v" gutter="10" style="flex: 1; width: 0;">
-        <label>Checked: {{checked1}}, {{checked2}}, {{checked3}}</label>
-        <layout gutter="10" align-v="center">
-            <switch v-model="checked1" :disabled="disabled" :size="size[0]"></switch>
-            <label style="flex: 1;">{{checked1 ? 'on' : 'off'}}</label>
-            <switch v-model="checked2" :disabled="disabled" :size="size[0]"></switch>
-            <label style="flex: 1;">{{checked2 ? 'true' : 'false'}}</label>
-        </layout>
-        <layout gutter="10" align-v="center">
-            <switch v-model="checked3" :disabled="disabled" :size="size[0]"></switch>
-            <label style="flex: 1;">{{checked3 ? 'ok' : 'no'}}</label>
-            <switch :disabled="disabled" @change="onChange" :size="size[0]"></switch>
-            <label style="flex: 1;">not</label>
-        </layout>
-        <layout gutter="10" align-v="center">
-            <switch v-model="checked4" :disabled="disabled" :map="{'true':0,'false':1}" :size="size[0]"></switch>
-            <label style="flex: 1;">{{checked4}}</label>
-            <switch v-model="checked5" :disabled="disabled" :size="size[0]">
-                <icon :name="checked5 ? 'sun' : 'moon'"></icon>
-            </switch>
-            <label style="flex: 1;">{{checked5 ? 'light' : 'dark'}}</label>
-        </layout>
-        <layout gutter="10" align-v="center">
-            <button @click="disabled = !disabled" style="flex: 1;">{{disabled ? 'Remove' : 'Set'}} disabled</button>
-            <select v-model="size" :data="['s', 'm', 'l']" style="flex: 1;"></select>
-        </layout>
-    </layout>
-</form>

package/dist/app/demo/form/control/tab/tab.js

@@ -1,102 +0,0 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || (function () {
-    var ownKeys = function(o) {
-        ownKeys = Object.getOwnPropertyNames || function (o) {
-            var ar = [];
-            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
-            return ar;
-        };
-        return ownKeys(o);
-    };
-    return function (mod) {
-        if (mod && mod.__esModule) return mod;
-        var result = {};
-        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
-        __setModuleDefault(result, mod);
-        return result;
-    };
-})();
-Object.defineProperty(exports, "__esModule", { value: true });
-const clickgo = __importStar(require("clickgo"));
-class default_1 extends clickgo.form.AbstractForm {
-    constructor() {
-        super(...arguments);
-        this.ntab = 'ok';
-        this.tabs = ['tab1', {
-                'label': 'haha',
-                'value': 'ok'
-            }];
-        this.tindex = 1;
-        this.tabPosition = 'top';
-        this.color = undefined;
-        this.size = undefined;
-        this.drag = false;
-        this.cclose = false;
-    }
-    async onClose(e) {
-        if (e.detail.index !== 10) {
-            await clickgo.form.dialog('Closed, index: ' + e.detail.index.toString() + ', value: ' + e.detail.value);
-            return;
-        }
-        e.preventDefault();
-        await clickgo.form.dialog('The tab can not be close.');
-    }
-    add() {
-        const len = this.tabs.length;
-        const val = 'tab' + (++this.tindex).toString();
-        if (len === 15) {
-            this.tabs.push({
-                'value': val,
-                'drag': false,
-                'close': false
-            });
-        }
-        else if (len === 16) {
-            this.tabs.push({
-                'value': val,
-                'drag': true,
-                'close': true
-            });
-        }
-        else {
-            this.tabs.push(val);
-        }
-    }
-    remove() {
-        if (this.tabs.length > 0) {
-            this.tabs.splice(this.tabs.length - 1);
-        }
-    }
-    position() {
-        switch (this.tabPosition) {
-            case 'top':
-                this.tabPosition = 'right';
-                break;
-            case 'right':
-                this.tabPosition = 'bottom';
-                break;
-            case 'bottom':
-                this.tabPosition = 'left';
-                break;
-            default:
-                this.tabPosition = 'top';
-        }
-    }
-}
-exports.default = default_1;

package/dist/app/demo/form/control/tab/tab.xml

@@ -1,22 +0,0 @@
-<form title="Tab" width="400" height="450" min-width="300" min-height="400" padding="10" direction="v">
-    <label>Now tab: {{ntab}}.</label>
-    <tab v-model="ntab" v-model:tabs="tabs" :tabPosition="tabPosition" :drag="drag" :close="cclose" @close="onClose" style="margin-top: 10px; flex: 1; height: 0;" :style="{'font-size': size, 'color': color}">
-        <!-- 默认 -->
-        <layout direction="v" style="padding: 10px;">
-            <button v-if="ntab === 'tab2'">Test button</button>
-            <label v-else>The tab's value is "{{ntab}}";</label>
-        </layout>
-    </tab>
-    <layout gutter="10" style="margin-top: 10px;">
-        <button @click="add" style="flex: 1; width: 0;">Add</button>
-        <button @click="remove" style="flex: 1; width: 0;">Remove</button>
-        <button @click="position" style="flex: 1; width: 0;">Position</button>
-        <button @click="ntab = 'tab2'" style="flex: 1; width: 0;">Tab2</button>
-    </layout>
-    <layout gutter="10" style="margin-top: 10px;">
-        <button @click="color = color ? undefined : 'red'" style="flex: 1; width: 0;">{{color ? '' : '!'}}red</button>
-        <button @click="size = size ? undefined : '18px'" style="flex: 1; width: 0;">{{size ? '' : '!'}}18px</button>
-        <button @click="drag = !drag" style="flex: 1; width: 0;">{{drag ? '' : '!'}}drag</button>
-        <button @click="cclose = !cclose" style="flex: 1; width: 0;">{{cclose ? '' : '!'}}close</button>
-    </layout>
-</form>

package/dist/app/demo/form/control/table/table.js

@@ -1,218 +0,0 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || (function () {
-    var ownKeys = function(o) {
-        ownKeys = Object.getOwnPropertyNames || function (o) {
-            var ar = [];
-            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
-            return ar;
-        };
-        return ownKeys(o);
-    };
-    return function (mod) {
-        if (mod && mod.__esModule) return mod;
-        var result = {};
-        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
-        __setModuleDefault(result, mod);
-        return result;
-    };
-})();
-Object.defineProperty(exports, "__esModule", { value: true });
-const clickgo = __importStar(require("clickgo"));
-class default_1 extends clickgo.form.AbstractForm {
-    constructor() {
-        super(...arguments);
-        this.loadFirst = false;
-        this.val = [];
-        this.data = [];
-        this.adaptation = false;
-        this.disabled = false;
-        this.must = true;
-        this.multi = false;
-        this.ctrl = true;
-        this.bottom = false;
-        this.top = false;
-        this.selection = false;
-        this.gesture = false;
-        this.selectionArea = {};
-        this.scroll = 'auto';
-        this.sort = undefined;
-        this.index = false;
-        this.split = false;
-        this.virtual = false;
-        this.slot = false;
-        this.fixed = ['undefined'];
-        this.mode = ['default'];
-        this.checkinfo = {
-            'total': 0,
-            'selected': 0
-        };
-        this.sortinfo = {
-            'index': -1,
-            'sort': 'desc'
-        };
-    }
-    refreshCheckinfo() {
-        this.checkinfo.total = 0;
-        this.checkinfo.selected = 0;
-        for (const item of this.data) {
-            if (item.check === undefined) {
-                continue;
-            }
-            ++this.checkinfo.total;
-            if (item.check) {
-                ++this.checkinfo.selected;
-            }
-        }
-    }
-    onHeaderCheck(e) {
-        if (e.detail.value && !e.detail.indeterminate) {
-            for (const item of this.data) {
-                if (item.check === undefined) {
-                    continue;
-                }
-                item.check = false;
-            }
-            this.checkinfo.selected = 0;
-            return;
-        }
-        for (const item of this.data) {
-            if (item.check === undefined) {
-                continue;
-            }
-            item.check = true;
-        }
-        this.checkinfo.selected = this.checkinfo.total;
-    }
-    get sizes() {
-        const rtn = {};
-        for (let i = 0; i < this.data.length; ++i) {
-            if (this.data[i].control === 'split') {
-                rtn[i] = 3;
-                continue;
-            }
-        }
-        return rtn;
-    }
-    async onGesture(dir) {
-        await clickgo.form.dialog('onGesture: ' + dir);
-    }
-    onSelect(area) {
-        this.selectionArea = area;
-    }
-    onSort(e) {
-        this.sortinfo.index = e.detail.index;
-        this.sortinfo.sort = e.detail.sort;
-        this.refreshSort();
-    }
-    refreshSort() {
-        if (this.sortinfo.index === -1) {
-            return;
-        }
-        if (this.sortinfo.index === (this.index ? 1 : 0)) {
-            this.data.sort((a, b) => {
-                const aname = a.name ?? 'name';
-                const bname = b.name ?? 'name';
-                if (this.sortinfo.sort === 'asc') {
-                    return aname.localeCompare(bname);
-                }
-                else {
-                    return bname.localeCompare(aname);
-                }
-            });
-            return;
-        }
-        this.data.sort((a, b) => {
-            const atype = a.type ?? 0;
-            const btype = b.type ?? 0;
-            if (this.sortinfo.sort === 'asc') {
-                return atype - btype;
-            }
-            else {
-                return btype - atype;
-            }
-        });
-    }
-    async showIndex() {
-        await clickgo.form.dialog('Index is ' + this.val[0].toString() + '.');
-    }
-    scrollChange() {
-        switch (this.scroll) {
-            case 'auto': {
-                this.scroll = 'visible';
-                break;
-            }
-            case 'visible': {
-                this.scroll = 'hidden';
-                break;
-            }
-            default: {
-                this.scroll = 'auto';
-            }
-        }
-    }
-    sortChange() {
-        switch (this.sort) {
-            case true: {
-                this.sort = false;
-                break;
-            }
-            case false: {
-                this.sort = undefined;
-                break;
-            }
-            default: {
-                this.sort = true;
-            }
-        }
-    }
-    load() {
-        this.data = [
-            {
-                'check': false,
-                'type': 0,
-                'name': 'Appraise',
-                'bottom': false,
-                'leftline': 'info'
-            },
-            {
-                'check': false,
-                'type': 0,
-                'name': 'Card',
-                'bottom': false,
-                'leftline': 'info'
-            },
-            {
-                'check': false,
-                'type': 0,
-                'name': 'Appraise2',
-                'disabled': true
-            },
-            {
-                'control': 'split'
-            },
-            {
-                'check': false,
-                'type': 1,
-                'bottom': true
-            }
-        ];
-        this.loadFirst = true;
-    }
-}
-exports.default = default_1;

package/dist/app/demo/form/control/table/table.xml

@@ -1,97 +0,0 @@
-<form width="500" height="500" title="Table" padding="10">
-    <layout direction="v" gutter="10" style="flex: 1; width: 0;">
-        <label>Value: {{val}}</label>
-        <table :data="data" :style="{'flex': adaptation ? undefined : '1'}" v-model="val" :disabled="disabled" :must="must" :multi="multi" :ctrl="ctrl" :selection="selection" :gesture="gesture ? ['top', 'bottom'] : []" :split="split" @gesture="onGesture" :scroll="scroll" :sizes="sizes" :sort="sort" :virtual="virtual" :mode="mode[0]" :fixed="fixed[0]==='undefined'?undefined:fixed[0]" @select="onSelect" @sort="onSort">
-            <template v-slot="d">
-                <table-item v-if="index" width="100" sort="false" align-h="center" align-v="center">
-                    <arrow v-if="bottom" v-model="d.row.bottom"></arrow>
-                    <check v-model="d.row.check" @changed="refreshCheckinfo">{{d.index}}</check>
-                </table-item>
-                <table-item label="name" minWidth="150">{{d.row.name ?? 'name'}}</table-item>
-                <table-item label="size" width="80" align-v="center" align-h="center">{{d.row.type ?? '0'}}</table-item>
-                <table-item label="col" width="150" direction="v" gutter="5" sort="false">
-                    <label>line1</label>
-                    <layout gutter="5">
-                        <button>line2</button>
-                        <button v-if="bottom" @click="d.row.bottom = d.row.bottom ? false : true">{{d.row.bottom ? 'close' : 'open'}}</button>
-                    </layout>
-                </table-item>
-            </template>
-            <template v-slot:pop>
-                <menulist>
-                    <menulist-item alt="S" @click="showIndex">Show select</menulist-item>
-                </menulist>
-            </template>
-            <template v-if="slot" v-slot:label="d">
-                <layout align-h="center" style="flex: 1;">
-                    <check :modelValue="checkinfo.selected > 0" @change="onHeaderCheck" :indeterminate="checkinfo.selected > 0 && checkinfo.selected < checkinfo.total">index</check>
-                </layout>
-            </template>
-            <!-- top -->
-            <template v-if="top" v-slot:top="d">index: {{d.index}}</template>
-            <!-- bottom -->
-            <template v-if="bottom" v-slot:bottom="d">
-                <desc v-if="d.index !== 1" style="flex: 1;">
-                    <desc-row>
-                        <desc-head>HEAD1</desc-head>
-                        <desc-head>HEAD2</desc-head>
-                        <desc-head>HEAD3</desc-head>
-                        <desc-head>HEAD4</desc-head>
-                        <desc-head>HEAD8</desc-head>
-                        <desc-head>HEAD9</desc-head>
-                    </desc-row>
-                    <desc-row>
-                        <desc-head>HEAD5</desc-head>
-                        <desc-cell>CELL1</desc-cell>
-                        <desc-head>HEAD6</desc-head>
-                        <desc-cell>CELL2</desc-cell>
-                        <desc-head>HEAD10</desc-head>
-                        <desc-cell>CELL3</desc-cell>
-                    </desc-row>
-                    <desc-row>
-                        <desc-head>HEAD7</desc-head>
-                        <desc-cell colspan="5">CELL1</desc-cell>
-                    </desc-row>
-                </desc>
-                <table v-else :data="[{'name':'a','size':'12'},{'name':'b','size':'14'}]" style="flex: 1;">
-                    <table-item label="name">{{d.row.name ?? 'name'}}</table-item>
-                    <table-item label="size">{{d.row.size ?? 'size'}}</table-item>
-                </table>
-            </template>
-        </table>
-        <template v-if="loadFirst">
-            <layout gutter="10">
-                <button style="flex: 1;" @click="data.splice(-2, 0, {'type': 0, 'name': 'Card' + data.length, 'disabled': false});refreshSort()">Add</button>
-                <button style="flex: 1;" @click="data.splice(-3, 1);refreshSort()">Remove</button>
-                <button style="flex: 1;" @click="scrollChange">Scroll {{scroll}}</button>
-                <button style="flex: 1;" @click="adaptation = !adaptation">{{adaptation ? '' : '!'}}adaptation</button>
-            </layout>
-            <layout gutter="10">
-                <button style="flex: 1;" @click="sortChange">sort {{sort ? 'true' : (sort === false ? 'false' : 'undefined')}}</button>
-                <button style="flex: 1;" @click="selection = !selection">{{selection ? '' : '!'}}selection</button>
-                <button style="flex: 1;" @click="gesture = !gesture">{{gesture ? '' : '!'}}gesture</button>
-                <button style="flex: 1;" @click="split = !split">{{split ? '' : '!'}}split</button>
-            </layout>
-            <layout gutter="10">
-                <button style="flex: 1;" @click="disabled = !disabled">{{disabled ? '' : '!'}}disabled</button>
-                <button style="flex: 1;" @click="multi = !multi">{{multi ? '' : '!'}}multi</button>
-                <button style="flex: 1;" @click="ctrl = !ctrl">{{ctrl ? '' : '!'}}ctrl</button>
-                <button style="flex: 1;" @click="bottom = !bottom">{{bottom ? '' : '!'}}bottom</button>
-            </layout>
-            <layout gutter="10">
-                <button style="flex: 1;" @click="must = !must">{{must ? '' : '!'}}must</button>
-                <button style="flex: 1;" @click="index = !index">{{index ? '' : '!'}}index</button>
-                <button style="flex: 1;" @click="virtual = !virtual">{{virtual ? '' : '!'}}virtual</button>
-                <button style="flex: 1;" @click="slot = !slot">{{slot ? '' : '!'}}slot</button>
-            </layout>
-            <layout gutter="10" align-v="center">
-                <label>fixed</label>
-                <select v-model="fixed" :data="['undefined', 'left', 'right', 'both']" style="flex: 1;"></select>
-                <label>mode</label>
-                <select v-model="mode" :data="['default','view', 'iview']" style="flex: 1;"></select>
-                <button style="flex: 1;" @click="top = !top">{{top ? '' : '!'}}top</button>
-            </layout>
-        </template>
-        <button v-else @click="load">Load</button>
-    </layout>
-</form>

package/dist/app/demo/form/control/tag/tag.js

@@ -1,44 +0,0 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || (function () {
-    var ownKeys = function(o) {
-        ownKeys = Object.getOwnPropertyNames || function (o) {
-            var ar = [];
-            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
-            return ar;
-        };
-        return ownKeys(o);
-    };
-    return function (mod) {
-        if (mod && mod.__esModule) return mod;
-        var result = {};
-        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
-        __setModuleDefault(result, mod);
-        return result;
-    };
-})();
-Object.defineProperty(exports, "__esModule", { value: true });
-const clickgo = __importStar(require("clickgo"));
-class default_1 extends clickgo.form.AbstractForm {
-    constructor() {
-        super(...arguments);
-        this.list = [];
-        this.vclose = false;
-    }
-}
-exports.default = default_1;

package/dist/app/demo/form/control/tag/tag.xml

@@ -1,52 +0,0 @@
-<form width="550" height="500" title="Tag" padding="10">
-    <layout direction="v" gutter="10" style="flex: 1;">
-        <label>Default:</label>
-        <layout gutter="10">
-            <tag :close="vclose">Default</tag>
-            <tag :close="vclose" type="primary">Primary</tag>
-            <tag :close="vclose" type="info">Info</tag>
-            <tag :close="vclose" type="warning">Warning</tag>
-            <tag :close="vclose" type="danger">Danger</tag>
-            <tag :close="vclose" type="cg">Cg</tag>
-        </layout>
-        <label>Plain:</label>
-        <layout gutter="10">
-            <tag :close="vclose" plain>Default</tag>
-            <tag :close="vclose" type="primary" plain>Primary</tag>
-            <tag :close="vclose" type="info" plain>Info</tag>
-            <tag :close="vclose" type="warning" plain>Warning</tag>
-            <tag :close="vclose" type="danger" plain>Danger</tag>
-            <tag :close="vclose" type="cg" plain>Cg</tag>
-        </layout>
-        <label>Size:</label>
-        <layout gutter="10" align-v="center">
-            <tag :close="vclose" type="primary" plain size="xl">xl</tag>
-            <tag :close="vclose" type="primary" plain size="l">l</tag>
-            <tag :close="vclose" type="primary" plain size="m">m</tag>
-            <tag :close="vclose" type="primary" plain size="s">s</tag>
-        </layout>
-        <layout gutter="10" align-v="center">
-            <tag :close="vclose" type="primary" plain size="xlh">xlh</tag>
-            <tag :close="vclose" type="primary" plain size="lh">lh</tag>
-            <tag :close="vclose" type="primary" plain size="mh">mh</tag>
-        </layout>
-        <layout gutter="10" align-v="center">
-            <tag :close="vclose" type="primary" plain rsize="m">rsize m</tag>
-            <tag :close="vclose" type="primary" plain rsize="l">rsize l</tag>
-            <tag :close="vclose" type="primary" plain rsize="xl">rsize xl</tag>
-        </layout>
-        <label>Event:</label>
-        <layout gutter="10" align-v="center">
-            <tag :close="vclose" v-for="item, index of list" type="cg" rsize="xl" size="lh" plain @close="list.splice(index, 1)">{{item}}</tag>
-            <button v-if="list.length < 6" @click="list.push('tag' + list.length)">Add</button>
-        </layout>
-        <label>Inline:</label>
-        <layout gutter="10" align-v="center">
-            <label>label</label>
-            <tag inline>abc</tag>
-        </layout>
-        <layout gutter="10">
-            <button @click="vclose = !vclose" style="flex: 1;">{{vclose ? '' : '!'}}close</button>
-        </layout>
-    </layout>
-</form>