btxui 1.0.1 → 1.0.3

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

@@ -1,114 +0,0 @@
-<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

@@ -1,25 +0,0 @@
-<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

@@ -1,254 +0,0 @@
-<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

@@ -1,46 +0,0 @@
-<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

@@ -1,32 +0,0 @@
-<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

@@ -1,47 +0,0 @@
-<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

@@ -1,48 +0,0 @@
-<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>