btxui 1.0.1

package/components/BTXUI/table/table-wid.vue

@@ -0,0 +1,324 @@
+<template>
+    <b-view :styles="`line thick-1 pleft round-sm no-scroll line-${colors.outline}`">
+        <!--表头-->
+        <b-view :styles="`flex-4 bold bg-color-${colors.thead}`">
+
+            <!--复选表头单元格-->
+            <b-view :styles="`flex-4 alpha-0 trans-fast w-0 thick-1 line-r line-${colors.line}`"
+                    :states="{
+                        show: {
+                            style: 'alpha-1 w-10 pad-l-1',
+                            state: checkbox_td_state
+                        }
+                    }">
+                <checkbox-wid id="selectAll" text="All" v-model="select_all_state" />
+            </b-view>
+
+            <b-view v-for="(th, n) of thead" :key="n"
+                    :styles="`pad-.7 thick-1 ${n>0? 'line-l': ''} line-${colors.line} ${$_set_td_width(thead[n])}`"
+                    v-html="th.title">
+            </b-view>
+        </b-view>
+
+        <!--表身-->
+        <component v-for="(tr, i) of tbody.slice(0, show_rows)"
+                   :key="i"
+                   :is="hover_tr_color? 'b-hot': 'b-view'"
+                   :styles="`flex line-t thick-1 line-${colors.line} bg-color-${i%2? colors.row.even: colors.row.odd}`"
+                   :hover="hover_tr_color? 'bg-color-' + hover_tr_color: ''"
+                   @on_click="$_click(i)">
+
+            <!--复选表身单元格-->
+            <b-view :styles="`flex-4 alpha-0 trans-fast w-0 thick-1 line-r line-${colors.line}`"
+                    :states="{
+                        show: {
+                            style: 'alpha-1 w-10 pad-l-1.4',
+                            state: checkbox_td_state
+                        }
+                    }">
+                <checkbox-wid :id="i" v-model="tbody_data[i]" />
+            </b-view>
+
+            <b-view v-for="(data, k) of tr"
+                    :key="k"
+                    :styles="`flex-4 pad-h-.7 pad-v-.4 thick-1 ${k>0? 'line-l': ''} line-${colors.line} ${k==0? 'bg-color-' + colors.row.head: ''} ${$_set_td_width(thead[k])}`" >
+
+                <!--单元格标签按钮-->
+                <tag-wid v-if="data.tag_data" :id="i" v-bind="data.tag_data" v-model="data.selected" @on_click="data.callback" />
+
+                <!--单元格图片-->
+                <b-img v-else-if="data.src"
+                       :key="`${i}-${k}-${Math.random() * 1000}`"
+                       :img="data.src"
+                       :defaultSrc="data.default_src"
+                       :styles="`round-sm w-${data.width || 'auto'} h-${data.height || 'auto'}`" />
+
+                <!--单元格文本-->
+                <b-text v-else v-html="data"></b-text>
+
+            </b-view>
+        </component>
+
+        <!--折叠按钮-->
+        <b-view v-if="collapse" styles="flex-2 pad-v-2">
+            <tag-wid v-bind="toggle_tag.data" v-model="toggle_tag.selected" />
+        </b-view>
+    </b-view>
+</template>
+
+<script>
+    import BView from "@/components/BTXUI/core/b-view"
+    import BImg from "@/components/BTXUI/core/b-img"
+    import BText from "@/components/BTXUI/core/b-text"
+    import BHot from "@/components/BTXUI/core/b-hot"
+    import TagWid from "@/components/BTXUI/tag/tag-wid"
+    import CheckboxWid from "@/components/BTXUI/checkbox/checkbox-wid"
+
+    const desc = ["该组件用于显示表格数据。"],
+        extend = [],
+        dependent = ["checkbox-wid", "tag-wid", "b-img", "b-hot", "b-text", "b-view"],
+        api = {
+            event: [
+                {
+                    name: "on_click",
+                    ef: "单元行点击触发",
+                    params: "row_index"
+                },
+                {
+                    name: "on_select",
+                    ef: "单元格复选框勾选触发",
+                    params: "selected_rows"
+                }
+            ],
+            methods: [
+                {
+                    name: "enable_row_select",
+                    ef: "开启单元行选择模式",
+                    params: "-",
+                    return: "-"
+                },
+                {
+                    name: "disable_row_select",
+                    ef: "关闭单元行选择模式",
+                    params: "-",
+                    return: "-"
+                },
+                {
+                    name: "enable_row_click",
+                    ef: "开启单元行点击模式",
+                    params: "-",
+                    return: "-"
+                },
+                {
+                    name: "disable_row_click",
+                    ef: "关闭单元行点击模式",
+                    params: "-",
+                    return: "-"
+                }
+            ]
+        },
+        init_data = `{
+        thead: "[
+            {
+                title: "标题文本"
+                grow: "自生长比率，默认为 1",
+                width: "单元格宽度，可缺省，效果优先级大于 grow"
+            },...
+        ]",
+        tbody: "[
+            [ "对应表头标题数据" | {
+                src: "图片地址",
+                default_src: "缺省图片地址",
+                width: "图片宽度，可缺省",
+                height: "图片高度，可缺省"
+            } | {
+                tag_data: "(参照：tag-wid 组件入参，id 字段无效，自动设置为行索引)",
+                selected: "默认选中状态"
+                callback: "点击回调函数"
+            },... ],...
+        ]",
+        /* colors: {
+            thead: "标题背景色",
+            row: {
+                head: "行首色",
+                odd: "奇数行色",
+                even: "偶数行色",
+                hover: "行悬停色，默认无效果"
+            },
+            line: "表格描边色",
+            outline: "表格轮廓色"
+        } */,
+        /* collapse: {
+            rows: "折叠显示单元行数目",
+            tag_data: "(参照：tag-wid 组件入参，id 字段无效，自动设置为随机数)"
+        } */,
+    }`;
+
+    export default {
+        name: "table-wid",
+        introduce: { desc, extend, dependent, api, init_data },
+        components: {
+            BView,
+            BImg,
+            BHot,
+            BText,
+            TagWid,
+            CheckboxWid
+        },
+        props: {
+            thead: {
+                type: Array,
+                required: true
+            },
+            tbody: {
+                type: Array,
+                required: true
+            },
+            colors: {
+                type: Object,
+                required: false,
+                default: ()=>{
+                    return {
+                        thead: "none",
+                        row: {
+                            head: "none",
+                            odd: "#f7f7f7",
+                            even: "none",
+                            hover: ""
+                        },
+                        line: "none",
+                        outline: "none"
+                    }
+                }
+            },
+            collapse: {
+                type: Object,
+                required: false
+            }
+        },
+        data(){
+            return {
+
+                //单元行悬停颜色
+                hover_tr_color: this.colors.row.hover,
+
+                //复选框单元格显示状态
+                checkbox_td_state: false,
+
+                //表身数据
+                tbody_data: this.tbody.map(()=>{
+                    return false;
+                }),
+
+                //全选状态
+                select_all_state: false,
+
+                //折叠按钮
+                toggle_tag: {
+                    data: {
+                        text: "展开表格",
+                        actText: "收起表格",
+                        colors: {
+                            normal: {
+                                bg: "rgba(170,170,170,.4)"
+                            },
+                            act: {
+                                bg: "blue"
+                            },
+                            hover: {
+                                bg: "neutral"
+                            },
+                        },
+                        ...(this.collapse? this.collapse.tag_data: {}),
+                        id: Math.floor(Math.random() * 1000),
+                        mode: "checkbox",
+                    },
+                    selected: false
+                }
+
+            }
+        },
+        computed: {
+
+            //表格显示单元行数
+            show_rows(){
+                if(!this.collapse) return this.tbody.length;
+                return this.toggle_tag.selected? this.tbody.length: this.collapse.rows;
+            }
+
+        },
+        methods: {
+
+            //开启单元行选择模式
+            enable_row_select(){
+                this.checkbox_td_state = true;
+            },
+
+            //关闭单元行选择模式
+            disable_row_select(){
+                this.checkbox_td_state = false;
+            },
+
+            //开启单元行点击模式
+            enable_row_click(){
+                this.hover_tr_color = this.colors.row.hover;
+            },
+
+            //关闭单元行点击模式
+            disable_row_click(){
+                this.hover_tr_color = "";
+            },
+
+            //处理单元行标题文本
+            $_format_tr_title(text){
+                return text.split("").join("<br>");
+            },
+
+            //单元行点击效果
+            $_click(index){
+                this.$emit("on_click", index);
+            },
+
+            //设置单元格宽度样式
+            $_set_td_width(item){
+                return item.width? `w-${item.width}`: `grow-${item.grow || 1}`
+            },
+
+            //数据验证
+            $_check_data(){
+                if(this.tbody[0]) this.thead.length !== this.tbody[0].length && console.warn("thead & tbody have different length!");
+            }
+
+        },
+        watch: {
+
+            //监测表格数据
+            tbody(val){
+                this.$_check_data();
+                this.tbody_data = val.map(()=>{
+                    return false;
+                })
+            },
+
+            //监测单元行选择
+            tbody_data(val){
+                this.$emit("on_select", val.reduce((total, select, i)=>{
+                    select && total.push(i);
+                    return total;
+                }, []));
+            },
+
+            //监测全选
+            select_all_state(state){
+                let select = state? true: false;
+                this.tbody_data = this.tbody_data.map(()=>{
+                    return select;
+                })
+            }
+
+        },
+        mounted(){
+            this.$_check_data();
+        }
+    }
+</script>

package/components/BTXUI/tag/tag-wid.vue

@@ -0,0 +1,183 @@
+<template>
+    <b-hot @on_click="$_click"
+           @on_move="$emit('on_move', $event)"
+           @on_enter="$emit('on_enter', $event)"
+           @on_leave="$emit('on_leave', $event)"
+           :styles="`pad-h-1.4 pad-v-.4 round-sm mrg-r-.4 mrg-b-.4 line thick-1 line-${tag_colors.normal.line} color-${tag_colors.normal.text} bg-color-${tag_colors.normal.bg}`"
+           :states="{
+               act: {
+                   style: `line thick-1 line-${tag_colors.act.line} bg-color-${tag_colors.act.bg} color-${tag_colors.act.text}`,
+                   state: selected
+               }
+           }"
+           :hover="`line thick-1 line-${tag_colors.hover.line} bg-color-${tag_colors.hover.bg} color-${tag_colors.hover.text}`">
+        <b-text styles="scale-.9"
+                :states="{
+                    act: {
+                        style: 'scale-1',
+                        state: selected
+                    }
+                }"
+                v-html="tag_text" />
+    </b-hot>
+</template>
+
+<script>
+    import BHot from "@/components/BTXUI/core/b-hot"
+    import BText from "@/components/BTXUI/core/b-text"
+
+    let desc = ["该组件用于进行标签选择，分为 “单选” 和 “复选” 两种方式。“单选（once）” 仅限一次性点击，不可通过点击撤回；“复选（toggle）” 则可以反复进行点击切换。"],
+        extend = [],
+        dependent = ["b-hot"],
+        api = {
+            event: [
+                {
+                    name: "on_click",
+                    ef: "点击触发",
+                    params: "id, selected, event"
+                },
+                {
+                    name: "on_enter",
+                    ef: "鼠标移入或手指按下（悬停）",
+                    params: "event"
+                },
+                {
+                    name: "on_leave",
+                    ef: "鼠标移出或手指抬起",
+                    params: "event"
+                },
+                {
+                    name: "on_move",
+                    ef: "鼠标移动",
+                    params: "event"
+                }
+            ]
+        },
+        init_data = `{
+        id: "标签 id",
+        text: "标签未选中状态文字（支持富文本）",
+        selected: "（v-model）选中状态",
+        /* actText: "标签选中状态文字（支持富文本）" */,
+        /* colors: {
+            normal: {
+                text: "默认文字色样式色值",
+                bg: "默认背景色样式色值",
+                line: "默认边框色样式色值",
+            },
+            act: {
+                text: "激活文字色样式色值",
+                bg: "激活背景色样式色值",
+                line: "激活边框色样式色值",
+            },
+            hover: {
+                text: "悬停文字色样式色值",
+                bg: "悬停背景色样式色值",
+                line: "悬停边框色样式色值",
+            },
+        } */,
+        /* mode: "选择模式（默认"radio"：单选、"checkbox"：复选）" */,
+    }`;
+
+    export default {
+        name: "tag-wid",
+        introduce: { desc, extend, dependent, api, init_data },
+        components: {
+            BHot,
+            BText
+        },
+        model:{
+            prop: "selected",
+            event: "on_select"
+        },
+        props: {
+            id: {
+                type: [String, Number],
+                required: true
+            },
+            text: {
+                type: String,
+                required: true
+            },
+            selected: {
+                type: [Boolean, Number],
+                required: false
+            },
+            actText: {
+                type: String,
+                required: false
+            },
+            colors: {
+                type: Object,
+                required: false,
+                default: () => {
+                    return {
+                        normal:{},
+                        hover:{},
+                        act:{},
+                    }
+                }
+            },
+            mode: {
+                type: String,
+                required: false,
+                default: "radio"
+            }
+        },
+        data(){
+            return {
+
+                //色彩方案
+                tag_colors: {
+                    normal: {
+                        text: "dgray",
+                        bg: "light",
+                        line: "none",
+                        ...this.colors.normal
+                    },
+                    hover: {
+                        text: "blue",
+                        bg: "light",
+                        line: "none",
+                        ...this.colors.hover
+                    },
+                    act: {
+                        text: "light",
+                        bg: "blue",
+                        line: "none",
+                        ...this.colors.act
+                    },
+                },
+
+                //参数类型
+                data_type: typeof(this.selected)
+
+            }
+        },
+        computed: {
+
+            //标签文字
+            tag_text(){
+                return this.selected? (this.actText? this.actText: this.text): this.text;
+            }
+
+        },
+        methods: {
+
+            //点击事件
+            $_click(e){
+                let state;
+                e.stopPropagation();
+                if(this.mode === "checkbox"){ //复选
+                    state = !this.selected;
+                }else if(this.mode === "radio"){ //单选
+                    if(this.selected === true) return;
+                    state = true;
+                }
+                if(this.data_type === "number") state = state? 1: 0;
+                this.$emit("on_select", state);
+                this.$emit("on_click", this.id, state, e);
+            }
+
+        }
+    }
+</script>

package/components/BTXUI/tags/tags-wid.vue

@@ -0,0 +1,121 @@
+<template>
+    <b-view :styles="column? 'flex-column': 'flex'">
+        <tag-wid v-for="item of tag_list" :key="item.id"
+                    @on_click="$_click"
+                    :id="item.id"
+                    :text="item.text"
+                    v-bind="tag_data"
+                    v-model="item.selected" />
+    </b-view>
+</template>
+
+<script>
+    import BView from "@/components/BTXUI/core/b-view"
+    import TagWid from "@/components/BTXUI/tag/tag-wid"
+
+    let desc = ["该组件用于进行单选及复选操作。"],
+        extend = [],
+        dependent = ["tag-wid", "b-view"],
+        api = {
+            event: [
+                {
+                    name: "on_click",
+                    ef: "点击触发",
+                    params: "selected"
+                }
+            ]
+        },
+        init_data = `{
+        value: "（v-model）当前标签 id 列表",
+        tagList: "[
+            {
+                id: "标签 id",
+                text: "标签文字",
+            },...
+        ]",
+        /* colors: "(参照：tag-wid 组件 colors 参数)" */,
+        /* mode: "(参照：tag-wid 组件 mode 参数)" */,
+        /* column: "纵向排列，默认 false" */,
+    }`;
+
+    export default {
+        name: "tags-wid",
+        introduce: { desc, extend, dependent, api, init_data },
+        components: {
+            BView,
+            TagWid
+        },
+        model:{
+            prop: "value",
+            event: "on_select"
+        },
+        props: {
+            value: {
+                type: Array,
+                required: true
+            },
+            tagList: {
+                type: Array,
+                required: true
+            },
+            colors: {
+                type: Object,
+                required: false,
+                default: () => {
+                    return {
+                        normal:{},
+                        hover:{},
+                        act:{},
+                    }
+                }
+            },
+            mode: {
+                type: String,
+                required: false,
+                default: "radio"
+            },
+            column: {
+                type: Boolean,
+                required: false
+            },
+        },
+        data(){
+            return {
+
+                //标签数据
+                tag_data: {
+                    colors: this.colors,
+                    mode: this.mode
+                }
+
+            }
+        },
+        computed: {
+
+            //标签数据列表
+            tag_list(){
+                return this.tagList.map(item=>{
+                    return {
+                        ...item,
+                        selected: this.value.includes(item.id)
+                    };
+                })
+            }
+
+        },
+        methods: {
+
+            //点击事件
+            $_click(id){
+                if(this.mode === "checkbox"){ //多选
+                    let index = this.value.indexOf(id);
+                    index === -1? this.value.push(id): this.value.splice(index, 1);
+                }else if(this.mode === "radio"){ //单选
+                    this.$emit("on_select", [id]);
+                }
+                this.$emit("on_click", this.value);
+            },
+
+        }
+    }
+</script>