btxui 1.0.2 → 1.0.3

package/pages/example/app_wid/content_wid_demo.vue

@@ -1,369 +0,0 @@
-<template>
-    <article>
-        <header-info v-bind="header_info" />
-
-        <!--基础渲染-->
-        <section>
-            <h5>基础渲染</h5>
-            <p>组件初始化数据会将树形结构数据转换为平级索引结构数据（index_data），以便于后续的快速选取操作，默认为单选效果；通过数据字段 <code>spread</code> 可以默认展开子级；通过数据字段 <code>spread_fixed</code> 可以强制展开子级，禁止收起；通过数据字段 <code>selected</code> 可用于初始化默认选择数据。</p>
-            <div class="resize">
-                <content-wid v-bind="data_1.props" @on_select="$_select_1" />
-            </div>
-            <p>当前选择数据：
-                <code v-if="data_1.selected">{{data_1.selected}}</code>
-                <span v-else class="alpha-d4">暂无</span>
-            </p>
-            <hr>
-            <p></p>
-        </section>
-
-        <!--自定义样式-->
-        <section>
-            <h5>自定义样式</h5>
-            <p>数据字段 <code>text</code> 支持富文本以实现自定义样式扩展；通过 <code>colors</code> 属性可以定义组件项目色彩方案。</p>
-            <div class="resize pad-d5 bg-color-dgray round-sm">
-                <content-wid v-bind="data_2.props" @on_select="$_select_2" />
-            </div>
-            <p>当前选择数据：
-                <code v-if="data_2.selected">{{data_2.selected}}</code>
-                <span v-else class="alpha-d4">暂无</span>
-            </p>
-            <hr>
-            <p></p>
-        </section>
-
-        <!--复选操作-->
-        <section>
-            <h5>复选操作</h5>
-            <p>通过 <code>mode</code> 属性可以设置复选模式，之后可通过数据字段 <code>checkbox</code> 启用复选框，在复选模式下，若数据项未设置 checkbox，则显示为普通文本；通过数据字段 <code>selected</code> 可用于初始化默认选择数据。</p>
-            <div class="resize pad-d5 bg-color-lgray round-sm">
-                <content-wid v-bind="data_3.props" @on_select="$_select_3" />
-            </div>
-            <p>当前选择数据：
-                <template v-if="data_3.selected.length">
-                    <code v-for="data of data_3.selected">{{data}}</code>
-                </template>
-                <span v-else class="alpha-d4">暂无</span>
-            </p>
-            <hr>
-            <p></p>
-        </section>
-
-        <!--提示浮框-->
-        <section>
-            <h5>提示浮框</h5>
-            <p>数据字段 <code>tooltip</code> 支持富文本以实现悬停提示文本；通过 <code>tooltipData</code> 属性可以设置提示框色彩风格及定位。</p>
-            <div class="resize pad-d5 bg-color-lgray round-sm">
-                <content-wid v-bind="data_4.props" />
-            </div>
-        </section>
-    </article>
-</template>
-
-<script>
-    import HeaderInfo from "@/components/header-info"
-    import ContentWid from "@/components/BTXUI/content/content-wid"
-
-    export default {
-        name: "content_wid_demo",
-        components: {
-            HeaderInfo,
-            ContentWid
-        },
-        data(){
-            return {
-
-                //初始化入参
-                header_info: {
-                    name: ContentWid.name,
-                    ...ContentWid.introduce,
-                },
-
-                data_1: {
-                    props: {
-                        dataTree: [
-                            {
-                                id: "html_1",
-                                text: "html",
-                                children: [
-                                    {
-                                        id: "div_1_1",
-                                        text: "div 标签",
-                                        selected: true
-                                    },
-                                    {
-                                        id: "span_1_2",
-                                        text: "span 标签",
-                                    },
-                                    {
-                                        id: "a_1_3",
-                                        text: "a 标签",
-                                    },
-                                ]
-                            },
-                            {
-                                id: "css_2",
-                                text: "css",
-                                spread: true,
-                                children: [
-                                    {
-                                        id: "color_2_1",
-                                        text: "color 文字颜色",
-                                    },
-                                    {
-                                        id: "background_2_2",
-                                        text: "background 背景样式",
-                                    },
-                                ]
-                            },
-                            {
-                                id: "javascript_3",
-                                text: "javascript",
-                                spread_fixed: true,
-                                children: [
-                                    {
-                                        id: "OOP_3_1",
-                                        text: "面向对象编程",
-                                    },
-                                    {
-                                        id: "ES6_3_2",
-                                        text: "ES6 语法",
-                                    },
-                                ]
-                            },
-                            {
-                                id: "php_4",
-                                text: "php"
-                            },
-                            {
-                                id: "python_5",
-                                text: "python"
-                            }
-                        ]
-                    },
-                    selected: "div_1_1"
-                },
-
-                data_2: {
-                    props: {
-                        dataTree: [
-                            {
-                                id: "html_1",
-                                text: "<b style='font-size: 17px'>html</b>",
-                                children: [
-                                    {
-                                        id: "div_1_1",
-                                        text: "div 标签",
-                                    },
-                                    {
-                                        id: "span_1_2",
-                                        text: "span 标签",
-                                    },
-                                    {
-                                        id: "a_1_3",
-                                        text: "a 标签",
-                                    },
-                                ]
-                            },
-                            {
-                                id: "css_2",
-                                text: "<b style='color: orange'>css</b>",
-                                spread: true,
-                                children: [
-                                    {
-                                        id: "color_2_1",
-                                        text: "color 文字颜色",
-                                        children: [
-                                            {
-                                                id: "color_3_1",
-                                                text: "red 玫红",
-                                            },
-                                            {
-                                                id: "color_3_2",
-                                                text: "yellow 橙黄",
-                                            },
-                                        ]
-                                    },
-                                    {
-                                        id: "background_2_2",
-                                        text: "<b style='color: #02b9a1'>background</b> 背景样式",
-                                    },
-                                ]
-                            }
-                        ],
-                        colors: {
-                            normal: {
-                                text: "mgray",
-                                bg: "neutral",
-                            },
-                            act: {
-                                text: "blue",
-                                bg: "rgba(20,20,20,.4)",
-                            },
-                            hover: {
-                                text: "lgray",
-                                bg: "rgba(134,134,134,.24)",
-                            }
-                        }
-                    },
-                    selected: ""
-                },
-
-                data_3: {
-                    props: {
-                        dataTree: [
-                            {
-                                id: "html_1",
-                                text: "html",
-                                checkbox: true,
-                                children: [
-                                    {
-                                        id: "div_1_1",
-                                        text: "div 标签",
-                                        selected: true,
-                                        checkbox: true
-                                    },
-                                    {
-                                        id: "span_1_2",
-                                        text: "span 标签",
-                                        checkbox: true
-                                    },
-                                    {
-                                        id: "a_1_3",
-                                        text: "a 标签"
-                                    },
-                                ]
-                            },
-                            {
-                                id: "css_2",
-                                text: "css",
-                                children: [
-                                    {
-                                        id: "color_2_1",
-                                        text: "color 文字颜色",
-                                        selected: true,
-                                        checkbox: true,
-                                        children: [
-                                            {
-                                                id: "color_3_1",
-                                                text: "red 玫红",
-                                                checkbox: true
-                                            },
-                                            {
-                                                id: "color_3_2",
-                                                text: "yellow 橙黄",
-                                                checkbox: true
-                                            },
-                                        ]
-                                    },
-                                    {
-                                        id: "background_2_2",
-                                        text: "background 背景样式"
-                                    },
-                                ]
-                            },
-                            {
-                                id: "javascript_3",
-                                text: "javascript"
-                            },
-                        ],
-                        mode: "checkbox",
-                        colors: {
-                            normal: {
-                                text: "dgray",
-                                bg: "light",
-                            },
-                            act: {
-                                text: "light",
-                                bg: "blue",
-                            },
-                            hover: {
-                                text: "dark",
-                                bg: "neutral",
-                            }
-                        },
-                    },
-                    selected: ["div_1_1", "color_2_1"]
-                },
-
-                data_4: {
-                    props: {
-                        dataTree: [
-                            {
-                                id: "css_2",
-                                text: "css",
-                                spread: true,
-                                tooltip: "<span class='color-red bold'>展示相关 css 样式值</span>",
-                                children: [
-                                    {
-                                        id: "color_2_1",
-                                        text: "color 文字颜色",
-                                        children: [
-                                            {
-                                                id: "color_3_1",
-                                                text: "red 玫红",
-                                                tooltip: "【色值】：#ec4334;"
-                                            },
-                                            {
-                                                id: "color_3_2",
-                                                text: "yellow 橙黄"
-                                            },
-                                        ]
-                                    },
-                                    {
-                                        id: "background_2_2",
-                                        text: "background 背景样式",
-                                        tooltip: "<span class='color-blue bold'>【exp】</span>：background: red;"
-                                    },
-                                ]
-                            }
-                        ],
-                        colors: {
-                            normal: {
-                                text: "dgray",
-                                bg: "neutral",
-                            },
-                            act: {
-                                text: "light",
-                                bg: "blue",
-                            },
-                            hover: {
-                                text: "dark",
-                                bg: "rgba(134,134,134,.24)",
-                            }
-                        },
-                        tooltipData: {
-                            colors: {
-                                text: "#ddd",
-                                bg: "dgray",
-                                line: "dark",
-                                point: "blue"
-                            },
-                            offset: {
-                                x: -40,
-                                y: -70
-                            }
-                        }
-                    }
-                },
-
-            }
-        },
-        methods: {
-
-            $_select_1(id){
-                this.data_1.selected = id;
-            },
-
-            $_select_2(id){
-                this.data_2.selected = id;
-            },
-
-            //数据选择
-            $_select_3(ids){
-                this.data_3.selected = ids;
-            }
-
-        }
-    }
-</script>

package/pages/example/app_wid/drawer_wid_demo.vue

@@ -1,155 +0,0 @@
-<template>
-    <article>
-        <header-info v-bind="header_info" />
-
-        <!--基础使用-->
-        <section>
-            <h5>基础使用</h5>
-            <p>通过 <code>spread</code> 属性可以初始化组件展开状态。组件交互区域继承自 <b>tag-wid</b> ，可参考相关入参：<code>tagData</code>。</p>
-            <div class="resize grid">
-                <div class="col-6 pad-r-3 line-r thick-1 line-lgray">
-                    <drawer-wid v-bind="data_1">
-                        <div class="bg-color-lgray pad-2 round-sm round-b">
-                            <h5>hello javascript</h5>
-                            <p>When it comes to a secure website and passwords it is all in your hands to create a password that a hacker simply cannot crack.</p>
-                            <div class="pright alpha-d5">—— btxstudio</div>
-                        </div>
-                    </drawer-wid>
-                </div>
-                <div class="col-6 pad-l-3">
-                    <drawer-wid v-bind="data_1" :spread="true">
-                        <div class="bg-color-lgray pad-2 round-sm round-b">
-                            <h5>hello javascript</h5>
-                            <p>When it comes to a secure website and passwords it is all in your hands to create a password that a hacker simply cannot crack.</p>
-                            <div class="pright alpha-d5">—— btxstudio</div>
-                        </div>
-                    </drawer-wid>
-                </div>
-            </div>
-            <hr>
-            <p></p>
-        </section>
-
-        <!--风格化-->
-        <section>
-            <h5>风格化</h5>
-            <p>组件 <code>tagData</code> 属性 <b>text</b> 字段支持富文本；<b>colors</b> 字段可设置配色风格；<code>iconData</code> 属性可设置 "抽屉" 图标；<code>arrowFixed</code> 属性可设置 "下拉箭头" 图标位置。</p>
-            <div class="resize flex">
-                <drawer-wid v-bind="data_2">
-                    <div class="bg-color-lgray pad-2 round-sm round-b line-t thick-1 line-light">
-                        <h5>hello javascript</h5>
-                        <p>When it comes to a secure website and passwords it is all in your hands to create a password that a hacker simply cannot crack.</p>
-                        <div class="pright alpha-d5">—— btxstudio</div>
-                    </div>
-                </drawer-wid>
-            </div>
-            <hr>
-            <p></p>
-        </section>
-
-        <!--启用复选框-->
-        <section>
-            <h5>启用复选框</h5>
-            <p>组件 <code>checkbox</code> 属性可以启用标签复选框。</p>
-            <div class="resize flex-column bg-color-lgray">
-                <drawer-wid v-bind="data" v-for="(data,i) of data_3.list" :key="i">
-                    <div class="bg-color-dgray color-mgray pad-2 round-sm round-b line-t thick-1 line-light">
-                        <h5>hello {{data.tagData.text}}</h5>
-                        <p>When it comes to a secure website and passwords it is all in your hands to create a password that a hacker simply cannot crack.</p>
-                        <div class="pright alpha-d5">—— btxstudio</div>
-                    </div>
-                </drawer-wid>
-            </div>
-            <p>当前选择数据：
-                <template v-if="data_3.selected.length">
-                    <code v-for="data of data_3.selected">{{data}}</code>
-                </template>
-                <span v-else class="alpha-d4">暂无</span>
-            </p>
-        </section>
-
-    </article>
-</template>
-
-<script>
-    import HeaderInfo from "@/components/header-info"
-    import DrawerWid from "@/components/BTXUI/drawer/drawer-wid"
-
-    export default {
-        name: "drawer_wid_demo",
-        components: {
-            HeaderInfo,
-            DrawerWid
-        },
-        data(){
-            return {
-
-                //初始化入参
-                header_info: {
-                    name: DrawerWid.name,
-                    ...DrawerWid.introduce,
-                },
-
-                data_1: {
-                    tagData: {
-                        id: "a",
-                        text: "商品详情",
-                    }
-                },
-
-                data_2: {
-                    tagData: {
-                        id: "a",
-                        text: "<b class='fsize-1d4 color-dgray'>IT</b> / 官方评论",
-                        colors: {
-                            normal: {
-                                text: "dgray",
-                                bg: "lgray",
-                            },
-                            act: {
-                                text: "blue",
-                                bg: "#f4f4f4",
-                            },
-                            hover: {
-                                text: "dark",
-                                bg: "#ddd",
-                            },
-                        }
-                    },
-                    iconData: {
-                        icon: "data"
-                    },
-                    arrowFixed: false
-                },
-
-                data_3: {
-                    list: [
-                        {
-                            tagData: {
-                                id: "a",
-                                text: "HTML + CSS",
-                            },
-                            checkbox: true
-                        },
-                        {
-                            tagData: {
-                                id: "b",
-                                text: "PHP + Mysql",
-                            },
-                            checkbox: true
-                        },
-                        {
-                            tagData: {
-                                id: "c",
-                                text: "Node.js + Mongodb",
-                            },
-                            checkbox: true
-                        }
-                    ],
-                    selected: []
-                },
-
-            }
-        }
-    }
-</script>