btxui 1.0.1

package/components/BTXUI/content/content-node-wid.vue

@@ -0,0 +1,114 @@
+<template>
+    <b-view styles="flex-column">
+        <template v-for="item of treeData">
+            <!--子级-->
+            <b-view v-if="item.sub_data" styles="mrg-b-2px">
+                <drawer-wid :ref="`drawer_${item.index_data.tag_data.id}`"
+                            :tag-data="item.index_data.tag_data"
+                            :spread="item.spread"
+                            :arrow-fixed="false"
+                            @on_title_enter="item.tooltip && $_show_tooltip(item.tooltip, $event)"
+                            @on_title_move="item.tooltip && $_move_tooltip($event)"
+                            @on_title_leave="item.tooltip && $_hide_tooltip()"
+                            @on_toggle="$_content_toggle">
+                    <b-view styles="pad-l-3 pad-t-4px">
+                        <!-- <content-node-wid :tree-data="item.sub_data"
+                                          :content-id="item.index_data.tag_data.id"
+                                          @on_tooltip_show="$_show_tooltip"
+                                          @on_tooltip_move="$_move_tooltip"
+                                          @on_tooltip_hide="$_hide_tooltip"
+                                          @on_select="$_item_select"
+                                          @on_toggle="$_drawer_resize" /> -->
+                    </b-view>
+                </drawer-wid>
+            </b-view>
+
+            <!--选项-->
+            <b-view v-else styles="mrg-b-2px" :key="item.index_data.tag_data.id">
+                <!--单选-->
+                <content-tag-wid v-if="item.index_data.tag_data.mode === 'radio'"
+                                 v-bind="item.index_data.tag_data"
+                                 v-model="item.index_data.selected"
+                                 @on_click="$_item_select"
+                                 @on_enter="item.tooltip && $_show_tooltip(item.tooltip, $event)"
+                                 @on_move="item.tooltip && $_move_tooltip($event)"
+                                 @on_leave="item.tooltip && $_hide_tooltip()" />
+
+                <!--多选-->
+                <content-checkbox-wid v-else-if="item.index_data.tag_data.mode === 'checkbox' && item.checkbox"
+                                      v-bind="item.index_data.tag_data"
+                                      v-model="item.index_data.selected"
+                                      @on_click="$_item_select"
+                                      @on_enter="item.tooltip && $_show_tooltip(item.tooltip, $event)"
+                                      @on_move="item.tooltip && $_move_tooltip($event)"
+                                      @on_leave="item.tooltip && $_hide_tooltip()" />
+                <b-view v-else
+                        :styles="`flex max-w pad-h-1.4 pad-v-.5 round-sm color-${item.index_data.tag_data.colors.normal.text} bg-color-${item.index_data.tag_data.colors.normal.bg}`">
+                    {{item.index_data.tag_data.text}}
+                </b-view>
+            </b-view>
+        </template>
+    </b-view>
+</template>
+
+<script>
+    import BView from "@/components/BTXUI/core/b-view";
+    import DrawerWid from "@/components/BTXUI/drawer/drawer-wid"
+    import ContentTagWid from "./content-tag-wid"
+    import ContentCheckboxWid from "./content-checkbox-wid"
+    // import ContentNodeWid from "./content-node-wid";
+
+    export default {
+        name: "content-node-wid",
+        components: {
+            DrawerWid,
+            ContentTagWid,
+            ContentCheckboxWid,
+            // ContentNodeWid,
+            BView,
+        },
+        props: {
+            treeData: {
+                required: true,
+                type: Array
+            },
+            contentId: {
+                required: false,
+                type: [String, Number]
+            },
+        },
+        methods: {
+
+            //透传数据选择
+            $_item_select(id, state){
+                this.$emit("on_select", id, state);
+            },
+
+            //透传子级展开状态
+            $_content_toggle(state){
+                this.$emit("on_toggle", state, this.contentId);
+            },
+
+            //重置下级内容高度
+            $_drawer_resize(state, content_id){
+                this.$refs[`drawer_${content_id}`][0].comp_height();
+            },
+
+            //显示浮框
+            $_show_tooltip(text){
+                this.$emit("on_tooltip_show", text);
+            },
+
+            //移动浮框
+            $_move_tooltip(e){
+                this.$emit("on_tooltip_move", e);
+            },
+
+            //隐藏浮框
+            $_hide_tooltip(){
+                this.$emit("on_tooltip_hide");
+            },
+
+        }
+    }
+</script>

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

@@ -0,0 +1,25 @@
+<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="`flex max-w pad-h-1.4 pad-v-.5 round-sm color-${tag_colors.normal.text} bg-color-${tag_colors.normal.bg}`"
+           :states="{
+               act: {
+                   style: `bg-color-${tag_colors.act.bg} color-${tag_colors.act.text}`,
+                   state: selected
+               }
+           }"
+           :hover="`bg-color-${tag_colors.hover.bg} color-${tag_colors.hover.text}`">
+        <b-text v-html="tag_text" />
+    </b-hot>
+</template>
+
+<script>
+    import TagWid from "@/components/BTXUI/tag/tag-wid"
+
+    export default {
+        extends: TagWid,
+        name: "content-tag-wid"
+    }
+</script>

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

@@ -0,0 +1,254 @@
+<template>
+    <b-view>
+        <!--提示框组件-->
+        <tooltip-wid ref="tooltip" v-bind="tooltipData" />
+
+        <!--目录结构组件-->
+        <content-node-wid :tree-data="tree_data"
+                          @on_select="$_select"
+                          @on_tooltip_show="$_show_tooltip"
+                          @on_tooltip_move="$_move_tooltip"
+                          @on_tooltip_hide="$_hide_tooltip" />
+    </b-view>
+</template>
+
+<script>
+    import BView from "@/components/BTXUI/core/b-view"
+    import TooltipWid from "@/components/BTXUI/tooltip/tooltip-wid"
+    import ContentNodeWid from "./content-node-wid"
+
+    const desc = ["该组件用于处理树形结构数据的可视化及交互操作。"],
+        extend = [],
+        dependent = ["tooltip-wid", "content-node-wid", "b-view"],
+        api = {
+            methods: [
+                {
+                    name: "clear_selected",
+                    ef: "清空所选数据",
+                    params: "-",
+                    return: "-"
+                }
+            ],
+            event: [
+                {
+                    name: "on_select",
+                    ef: "执行数据项点选",
+                    params: "selected_data_id"
+                }
+            ]
+        },
+        init_data = `{
+        dataTree: [
+            {
+                id: "数据标识",
+                text: "数据标题",
+                tooltip: "悬停提示文本（支持超文本），缺省无提示",
+                checkbox: "是否显示复选框，缺省仅显示文字",
+                selected: "是否选中，缺省不选中",
+                children: "嵌套结构，可缺省",
+                spread: "是否展开子级，缺省关闭",
+                spread_fixed: "展开固定，禁止层级塌陷，缺省关闭",
+            },...
+        ],
+        /* mode: "选择模式（默认"radio"：单选、"checkbox"：复选）" */,
+        /* colors: "(参照：tag-wid 组件 colors 入参)" */,
+        /* tooltipData: "(参照：tooltip-wid 组件入参)" */,
+    }`;
+
+    export default {
+        name: "content-wid",
+        introduce: { desc, extend, dependent, api, init_data },
+        components: {
+            BView,
+            ContentNodeWid,
+            TooltipWid
+        },
+        props: {
+            dataTree: {
+                required: true,
+                type: Array
+            },
+            mode: {
+                required: false,
+                type: String,
+                default: "radio"
+            },
+            colors: {
+                required: false,
+                type: Object,
+                default: ()=>{
+                    return {
+                        normal: {
+                            text: "dgray",
+                            bg: "none",
+                            line: "none",
+                        },
+                        act: {
+                            text: "blue",
+                            bg: "none",
+                            line: "none",
+                        },
+                        hover: {
+                            text: "blue",
+                            bg: "none",
+                            line: "none",
+                        }
+                    }
+                }
+            },
+            tooltipData: {
+                required: false,
+                type: Object
+            }
+        },
+        data(){
+            return {
+
+                //单选数据
+                selected_data: "",
+
+                //多选数据
+                selected_datas: [],
+
+                //树形数据（视图渲染）
+                tree_data: [],
+
+                //展开数据（多级关联选择）
+                spread_data: [],
+
+                //索引数据（操作数据）
+                index_data: {}
+
+            }
+        },
+        computed: {
+
+            //悬浮提示框
+            tooltip(){
+                return this.$refs.tooltip;
+            }
+
+        },
+        methods: {
+
+            //清空所选数据
+            clear_selected(){
+                const reset_ids = [];
+                if(this.mode === "radio") { //单选模式
+                    this.selected_data && reset_ids.push(this.selected_data);
+                    this.selected_data = "";
+                }else { //多选模式
+                    this.selected_datas.forEach(id => {
+                        reset_ids.push(id);
+                    })
+                    this.selected_datas = [];
+                }
+                reset_ids.forEach(id => {
+                    this.index_data[id].selected = false;
+                })
+            },
+
+            //初始化数据
+            $_init_data(){
+                this.tree_data = this.$_gen_data(this.dataTree);
+            },
+
+            //构造数据
+            $_gen_data(tree_data, id_prefix=""){
+                return tree_data.map((data, i)=>{
+                    let {id, text, tooltip, checkbox, children, selected, spread, spread_fixed} = data,
+                        mode = this.mode,
+                        colors = {...this.colors},
+                        _id = id_prefix? `${id_prefix}_${i}`: i,
+                        sub_data;
+
+                    //初始化数据
+                    if(selected){
+                        if(mode === "checkbox" && checkbox){ //复选模式
+                            this.selected_datas.push(id)
+                        }else if(mode === "radio"){
+                            this.selected_data = id;
+                        }
+                    }
+
+                    //下级折叠处理
+                    if(children){
+                        colors.act = {
+                            text: colors.normal.text,
+                            bg: colors.normal.bg,
+                            line: colors.normal.line
+                        }
+                        if(spread_fixed){ //强制展开
+                            spread = true;
+                            mode = "radio"
+                        }else{
+                            mode = "checkbox"
+                        }
+                    }
+
+                    const tag_data = {
+                        ...data,
+                        mode,
+                        colors
+                    }, index_data = {
+                        _id,
+                        tag_data,
+                        selected,
+                    };
+                    this.index_data[id] = index_data;
+                    this.spread_data.push(index_data);
+
+                    //下级递归数据处理
+                    if(children) sub_data = this.$_gen_data(children, _id);
+
+                    return {
+                        index_data,
+                        spread,
+                        tooltip,
+                        checkbox,
+                        sub_data
+                    }
+                })
+            },
+
+            //执行选择
+            $_select(id, state){
+                if(this.mode === "radio"){ //单选数据
+                    if(this.selected_data){
+                        this.index_data[this.selected_data].selected = false;
+                    }
+                    this.selected_data = id;
+                    this.$emit("on_select", this.selected_data);
+                }else if(this.mode === "checkbox"){ //多选数据
+                    if(state){ //添加
+                        this.selected_datas.push(id);
+                    }else{ //移除
+                        this.selected_datas.splice(this.selected_datas.findIndex((val)=>{
+                            return val === id;
+                        }), 1);
+                    }
+                    this.$emit("on_select", this.selected_datas);
+                }
+            },
+
+            //显示浮框
+            $_show_tooltip(text){
+                this.tooltip.show(text);
+            },
+
+            //移动浮框
+            $_move_tooltip(e){
+                this.tooltip.set_pos(e.pageX, e.pageY);
+            },
+
+            //隐藏浮框
+            $_hide_tooltip(){
+                this.tooltip.hide();
+            },
+
+        },
+        mounted(){
+            this.$_init_data();
+        }
+    }
+</script>

package/components/BTXUI/core/anis/ani-fail.vue

@@ -0,0 +1,46 @@
+<template>
+    <b-view styles="flex-5 t-f3">
+        <b-text class="ani-fail-part1" styles="w-3px h-1.7 rel l-2px bg-color-red round-sm"></b-text>
+        <b-text class="ani-fail-part2" styles="w-3px h-1.7 rel r-1px bg-color-red round-sm"></b-text>
+    </b-view>
+</template>
+
+<script>
+    import BView from "../b-view";
+    import BText from "../b-text";
+
+    export default {
+        name: "ani-fail",
+        components: {
+            BView,
+            BText,
+        }
+    }
+</script>
+
+<style scoped>
+    .ani-fail-part1{
+        animation: ani_fail_part1 .3s .7s;
+        animation-fill-mode: both;
+    }
+    .ani-fail-part2{
+        animation: ani_fail_part2 .5s 1s;
+        animation-fill-mode: both;
+    }
+    @keyframes ani_fail_part1 {
+        from {
+            transform: scale(0) rotate(45deg);
+        }
+        to {
+            transform: scale(1) rotate(45deg);
+        }
+    }
+    @keyframes ani_fail_part2 {
+        from {
+            transform: scale(0) rotate(-45deg);
+        }
+        to {
+            transform: scale(1) rotate(-45deg);
+        }
+    }
+</style>

package/components/BTXUI/core/anis/ani-loading.vue

@@ -0,0 +1,32 @@
+<template>
+    <b-view styles="flex-5 t-f3">
+        <b-view class="ani-loading" styles="rel w-2.2 h-2.2 round"></b-view>
+    </b-view>
+</template>
+
+<script>
+    import BView from "../b-view";
+
+    export default {
+        name: "ani-loading",
+        components: {
+            BView,
+        }
+    }
+</script>
+
+<style scoped>
+    .ani-loading {
+        animation: ani_rotate 1s linear infinite;
+        border: 3px solid #ddd;
+        border-left-color: #4085f3;
+    }
+    @keyframes ani_rotate {
+        from {
+            transform: rotate(0deg);
+        }
+        to {
+            transform: rotate(360deg);
+        }
+    }
+</style>

package/components/BTXUI/core/anis/ani-notic.vue

@@ -0,0 +1,47 @@
+<template>
+    <b-view styles="flex-5 t-f3 rotate-90">
+        <b-text class="ani-notic-part1" styles="w-3px h-3px bg-color-blue round"></b-text>
+        <b-text class="ani-notic-part2" styles="w-1.3 h-3px mrg-l-4px bg-color-blue round-sm"></b-text>
+    </b-view>
+</template>
+
+<script>
+    import BView from "../b-view";
+    import BText from "../b-text";
+
+    export default {
+        name: "ani-notic",
+        components: {
+            BView,
+            BText,
+        }
+    }
+</script>
+
+<style scoped>
+    .ani-notic-part1{
+        animation: ani_notic_part1 .3s .7s;
+        animation-fill-mode: both;
+    }
+    .ani-notic-part2{
+        animation: ani_notic_part2 .5s 1s;
+        animation-fill-mode: both;
+        transform-origin: left;
+    }
+    @keyframes ani_notic_part1 {
+        from {
+            transform: scale(0);
+        }
+        to {
+            transform: scale(1);
+        }
+    }
+    @keyframes ani_notic_part2 {
+        from {
+            transform: scaleX(0);
+        }
+        to {
+            transform: scaleX(1);
+        }
+    }
+</style>

package/components/BTXUI/core/anis/ani-success.vue

@@ -0,0 +1,48 @@
+<template>
+    <b-view styles="flex-5 transform-translateY(.9rem)rotate(45deg)">
+        <b-text class="ani-success-part1" styles="w-1 h-3px bg-color-green round-sm"></b-text>
+        <b-text class="ani-success-part2" styles="w-1.7 h-3px bg-color-green round-sm rel t-1px l-f1px"></b-text>
+    </b-view>
+</template>
+
+<script>
+    import BView from "../b-view";
+    import BText from "../b-text";
+
+    export default {
+        name: "ani-success",
+        components: {
+            BView,
+            BText,
+        }
+    }
+</script>
+
+<style scoped>
+    .ani-success-part1{
+        animation: ani_success_part1 .3s .7s;
+        animation-fill-mode: both;
+        transform-origin: left;
+    }
+    .ani-success-part2{
+        animation: ani_success_part2 .5s 1s;
+        animation-fill-mode: both;
+        transform-origin: left;
+    }
+    @keyframes ani_success_part1 {
+        from {
+            transform: scaleX(0);
+        }
+        to {
+            transform: scaleX(1);
+        }
+    }
+    @keyframes ani_success_part2 {
+        from {
+            transform: scaleY(0) rotate(-90deg);
+        }
+        to {
+            transform: scaleY(1) rotate(-90deg);
+        }
+    }
+</style>