btxui 1.0.2 → 1.0.3

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

@@ -1,167 +0,0 @@
-<template>
-    <b-view :styles="`fixed max t-0 l-0 trans-fast flex-${pos} ${matte? '': 'bg-none'} z${matteZIndex} alpha-0`"
-            :states="{
-                show: {
-                    style: 'alpha-1',
-                    state: visible
-                }
-            }"
-            >
-
-        <!--遮罩背景-->
-        <b-hot @on_click="matteClose === 'click' && $_close()"
-               @on_dblclick="matteClose === 'dblclick' && $_close()"
-               :forbid="matteClose? false: true"
-               :styles="`abs max t-0 l-0 bg-color-${matteColor}`">
-            <b-view styles="max bg-repeat" :bg-img="mattePattern"></b-view>
-        </b-hot>
-
-        <b-view :styles="`rel trans-fast bg-use ${max_pannel_styles} l-${offset.x} t-${offset.y} ${transition.out_styles}`"
-            :states="{
-                show: {
-                    style: `${matte? 'trans-delay-.4': ''} ${transition.in_styles}`,
-                    state: visible
-                }
-            }">
-
-            <!--关闭按钮-->
-            <b-hot v-if="closeBtn" @on_click="$_close" styles="abs flex-5 r-.4 t-.4 w-2 h-2 bg-color-neutral color-dark round z1"
-                hover="bg-color-red color-light">
-                <b-icon icon="close" />
-            </b-hot>
-
-            <slot/>
-        </b-view>
-    </b-view>
-</template>
-
-<script>
-    import BView from "@/components/BTXUI/core/b-view";
-    import BHot from "@/components/BTXUI/core/b-hot";
-    import BIcon from "@/components/BTXUI/core/b-icon";
-
-    const desc = ["该组件用于自定义弹窗交互操作。"],
-        extend = [],
-        dependent = ["b-icon", "b-hot", "b-view"],
-        api = null,
-        init_data = `{
-        visible: "（model）面板显示状态",
-        /* pos: "面板定位（基于视口九宫格定位: 1-9）" */,
-        /* offset: {
-            x: "水平方向位移样式值，默认单位 rem",
-            y: "垂直方向位移样式值，默认单位 rem",
-        } */,
-        /* transition: {
-            in_styles: "入场样式值",
-            out_styles: "出场样式值"
-        } */,
-        /* matte: "是否启用遮罩，默认不启用" */,
-        /* matteColor: "遮罩颜色" */,
-        /* mattePattern: "遮罩图案" */,
-        /* matteZIndex: "遮罩 z 轴层级，默认为 9" */,
-        /* closeBtn: "是否启用关闭按钮" */,
-        /* matteClose: "遮罩自身点击关闭面板：click 单击、dblclick 双击" */,
-        /* maxEnable: "{
-            width: "满屏弹窗宽度样式数值",
-            height: "满屏弹窗高度样式数值",
-            bg: "弹窗背景色样式色值",
-        }" */,
-    }`;
-
-    export default {
-        name: "pannel-wid",
-        introduce: { desc, extend, dependent, api, init_data },
-        components: {
-            BView,
-            BHot,
-            BIcon
-        },
-        model:{
-            prop: "visible",
-            event: "on_click"
-        },
-        props: {
-            pos: {
-                type: [Number, String],
-                required: false,
-                default: 5
-            },
-            offset: {
-                type: Object,
-                required: false,
-                default: ()=>{
-                    return {x:0, y:0}
-                }
-            },
-            transition: {
-                type: Object,
-                required: false,
-                default: ()=>{
-                    return {
-                        in_styles: "alpha-1 scale-1",
-                        out_styles: "alpha-0 scale-0"
-                    }
-                }
-            },
-            visible: {
-                type: Boolean,
-                required: false
-            },
-            matte: {
-                type: Boolean,
-                required: false
-            },
-            matteColor: {
-                type: String,
-                required: false
-            },
-            mattePattern: {
-                type: String,
-                required: false
-            },
-            matteZIndex: {
-                type: [String, Number],
-                required: false,
-                default: 9
-            },
-            closeBtn: {
-                type: Boolean,
-                required: false,
-            },
-            matteClose: {
-                type: String,
-                required: false,
-            },
-            maxEnable: {
-                type: Object,
-                required: false
-            }
-        },
-        data(){
-            return {
-
-                //满屏弹窗样式
-                max_pannel_styles: this.maxEnable? `w-${this.maxEnable.width} h-${this.maxEnable.height} bg-color-${this.maxEnable.bg}`: ''
-
-            }
-        },
-        watch: {
-
-            //含遮罩或全屏状态时禁止 body 滚动
-            visible(state){
-                if(this.matte || this.maxEnable){
-                    document.body.style.overflow = state === true? "hidden": "auto";
-                }
-            }
-
-        },
-        methods: {
-
-            //关闭面板
-            $_close(){
-                this.$emit("on_click", false);
-            },
-
-        }
-    }
-</script>

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

@@ -1,134 +0,0 @@
-<template>
-    <b-view :styles="`max-w rel flex-4 round-lg bg-color-${colors.track} pad-r-${blockSize.width} h-${blockSize.height}`">
-
-        <!--刻度-->
-        <b-view v-if="tick" styles="rel t-.6 h-1.2"></b-view>
-
-        <!--轨道线-->
-        <b-view :styles="`rel max-w h-2px round-lg bg-color-neutral l-${blockSize.width / 2}`"></b-view>
-
-        <!--滑块-->
-        <b-drag :styles="`color-neutral round-lg line thick-1 line-${colors.normal.line} w-${blockSize.width} h-${blockSize.height} bg-color-${colors.normal.bg}`"
-                :drag-start="`shadow line-${colors.act.line} bg-color-${colors.act.bg}`"
-                @on_move="$_drag_move"
-                :free-drag="true"></b-drag>
-
-    </b-view>
-</template>
-
-<script>
-    import BView from "@/components/BTXUI/core/b-view"
-    import BDrag from "@/components/BTXUI/core/b-drag"
-    import BHot from "@/components/BTXUI/core/b-hot"
-
-    const desc = ["该组件用于实现区间值拖动选取。"],
-        extend = [],
-        dependent = ["b-drag", "b-view", "b-hot"],
-        api = null,
-        init_data = `{
-        curVal: "(model) 当前拖动数值",
-        min: "拖动区间最小值",
-        max: "拖动区间最大值",
-        /* step: "拖动步进值" */,
-        /* tick: "是否显示刻度，默认 false" */,
-        /* blockSize: {
-            width: "滑块宽度",
-            height: "滑块高度",
-        } */,
-        /* colors: {
-            normal: {
-                bg: "滑块颜色",
-                line: "滑块描边色"
-            },
-            act: {
-                bg: "滑块激活颜色",
-                line: "滑块激活描边色"
-            },
-            track: "轨道颜色"
-        } */
-    }`;
-
-    export default {
-        name: "range-wid",
-        introduce: { desc, extend, dependent, api, init_data },
-        components: {
-            BView,
-            BDrag,
-            BHot
-        },
-        model: {
-            prop: "curVal",
-            event: "on_drag"
-        },
-        props: {
-            curVal: {
-                type: Number,
-                required: true,
-            },
-            min: {
-                type: Number,
-                required: true,
-            },
-            max: {
-                type: Number,
-                required: true,
-            },
-            step: {
-                type: Number,
-                required: false
-            },
-            blockSize: {
-                type: Object,
-                required: false,
-                default: ()=>{
-                    return {
-                        width: 5,
-                        height: 2
-                    }
-                }
-            },
-            tick: {
-                type: Boolean,
-                required: false
-            },
-            colors: {
-                type: Object,
-                required: false,
-                default: ()=>{
-                    return {
-                        normal: {
-                            bg: "lgray",
-                            line: "mgray",
-                        },
-                        act: {
-                            bg: "light",
-                            line: "neutral",
-                        },
-                        track: "neutral",
-                    }
-                }
-            }
-        },
-        data(){
-            return {
-
-                //滑动长度
-                drag_len: 0,
-
-                //当前滑动距离
-                cur_drag_len: 0,
-
-            }
-        },
-        methods: {
-
-            //拖动
-            $_drag_move(cur_pos, limit_area){
-                const max = Math.round(this.max),
-                    min = Math.round(this.min);
-                this.$emit("on_drag", Math.round(max * cur_pos.x / limit_area.x) + min);
-            }
-
-        }
-    }
-</script>

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

@@ -1,80 +0,0 @@
-<template>
-    <b-view :styles="`flex-4 round-lg pad-v-.7 pad-h-1.4 bg-color-${colors.bg} color-${colors.text} ${colors.line? 'thick-1 line line-' + colors.line: ''}`">
-        <b-icon v-if="icon === 'left'" icon="sousuo" styles="mrg-r-1 scale-1.7" />
-        <b-input type="text" name="keyword" :placeholder="notic" focus="bg-color-none" v-model="search_text" />
-        <b-icon v-if="icon === 'right'" icon="sousuo" styles="mrg-l-1 scale-1.7" />
-    </b-view>
-</template>
-
-<script>
-    import BView from "@/components/BTXUI/core/b-view"
-    import BIcon from "@/components/BTXUI/core/b-icon"
-    import BInput from "@/components/BTXUI/core/b-input"
-
-    const desc = ["该组件用于搜索栏构建及操作。"],
-        extend = [],
-        dependent = ["b-input", "b-icon", "b-view"],
-        api = {
-            event: [
-                {
-                    name: "on_search",
-                    ef: "搜索字符串",
-                    params: "search_text"
-                }
-            ]
-        },
-        init_data = `{
-        /* notic: "提示文字" */,
-        /* icon: "搜索图标显示：left（默认）、right、none" */,
-        /* colors: {
-            text: "常规状态文字颜色",
-            bg: "常规状态背景颜色",
-            line: "常规状态描边颜色"
-        } */
-    }`;
-
-    export default {
-        name: "search-wid",
-        introduce: { desc, extend, dependent, api, init_data },
-        components: {
-            BView,
-            BInput,
-            BIcon,
-        },
-        props: {
-            notic: {
-                type: String,
-                required: false,
-            },
-            icon: {
-                type: String,
-                required: false,
-                default: "left"
-            },
-            colors: {
-                type: Object,
-                required: false,
-                default: ()=>{
-                    return {
-                        text: "dgray",
-                        bg: "neutral",
-                        line: "neutral"
-                    }
-                }
-            }
-        },
-        data(){
-            return {
-
-                //搜索内容
-                search_text: ""
-
-            }
-        },
-        watch: {
-            search_text(val){
-                this.$emit("on_search", val);
-            }
-        }
-    }
-</script>

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

@@ -1,186 +0,0 @@
-<template>
-    <b-view styles="rel color-rgba(70,70,70,.2) z2">
-        <!--热点区-->
-        <b-hot styles="flex-4 round-lg line thick-1 pad-v-.5 pad-h-1.4" @on_click="$_toggle_options">
-            <b-text v-if="selected_text" :styles="`grow-1 color-${option_color.text}`" key="val">
-                {{selected_text}}
-            </b-text>
-            <b-text v-else :styles="`alpha-.7 grow-1 color-${option_color.text}`" key="notic">
-                {{placeholder}}
-            </b-text>
-            <b-icon icon="arrow-right"
-                    styles="trans-fast color-#aaa"
-                    :states="{
-                        spread: {
-                            state: spread,
-                            style: 'rotate-90'
-                        }
-                    }" />
-        </b-hot>
-
-        <!--下拉区-->
-        <b-view :styles="`abs transform-translateY(f1.5rem) alpha-0 round-sm mrg-t-1 shadow-lg max-w no-scroll bg-color-${option_color.normal.bg}`"
-            :states="{
-                spread: {
-                    state: spread,
-                    style: 'trans-fast alpha-1 transform-translateY(0)'
-                }
-            }">
-            <b-list :styles="`color-${option_color.normal.text} h-${rows? Math.min(rows, listData.length) * 2.7: 'auto'}`">
-                <b-hot v-for="(item,index) of listData" :key="index"
-                       @on_click="$_select(item.val)"
-                       styles="flex pad-h-1"
-                       :states="{
-                            selected: {
-                                state: selected === item.val,
-                                style: `color-${option_color.act.text} bg-color-${option_color.act.bg}`
-                            }
-                        }"
-                       :hover="`color-${option_color.hover.text} bg-color-${option_color.hover.bg}`">
-                    <b-view :styles="`flex-4 grow-1 h-2.7 ${index>0? 'line-t thick-1 line-neutral': ''}`">
-                        <b-text styles="bold mrg-r-1">·</b-text>
-                        <b-text>{{item.text}}</b-text>
-                    </b-view>
-                </b-hot>
-            </b-list>
-        </b-view>
-    </b-view>
-</template>
-
-<script>
-    import BView from "@/components/BTXUI/core/b-view";
-    import BText from "@/components/BTXUI/core/b-text";
-    import BHot from "@/components/BTXUI/core/b-hot";
-    import BIcon from "@/components/BTXUI/core/b-icon";
-    import BList from "@/components/BTXUI/core/b-list";
-
-    const desc = ["该组件用于实现表单项的下拉选择。"],
-        extend = [],
-        dependent = ["b-list", "b-icon", "b-text", "b-hot", "b-view"],
-        api = null,
-        init_data = `{
-        listData: [
-            {
-                text: "文本显示",
-                val: "实际传值",
-            }...
-        ],
-        /* selected: "（model）所选数据值" */,
-        /* placeholder: "选择提示" */,
-        /* rows: "显示" */,
-        /* colors: {
-            text: "显示所选文字颜色",
-            normal: {
-                text: "默认文字色",
-                bg: "默认背景色"
-            },
-            hover: {
-                text: "悬停文字色",
-                bg: "悬停背景色"
-            },
-            act: {
-                text: "激活文字色",
-                bg: "激活背景色"
-            }
-        } */,
-    }`;
-
-    export default {
-        name: "select-wid",
-        introduce: { desc, extend, dependent, api, init_data },
-        components: {
-            BView,
-            BText,
-            BHot,
-            BIcon,
-            BList
-        },
-        model: {
-            prop: "selected",
-            event: "on_select"
-        },
-        props: {
-            listData: {
-                type: Array,
-                required: true
-            },
-            selected: {
-                type: String,
-                required: false
-            },
-            placeholder: {
-                type: String,
-                required: false
-            },
-            rows: {
-                type: Number,
-                required: false
-            },
-            colors: {
-                type: Object,
-                required: false
-            }
-        },
-        computed: {
-
-            //所选项文字
-            selected_text(){
-                let selected = this.listData.find(item=>{
-                    return item.val === this.selected
-                });
-                if(selected) return selected.text;
-            }
-
-        },
-        data() {
-            return {
-
-                //展开状态
-                spread: false,
-
-                //下拉项颜色
-                option_color: {
-                    text: "dgray",
-                    normal: {
-                        text: "mgray",
-                        bg: "light"
-                    },
-                    hover: {
-                        text: "dgray",
-                        bg: "#f4f4f4"
-                    },
-                    act: {
-                        text: "blue",
-                        bg: "light"
-                    },
-                    ...this.colors
-                }
-
-            };
-        },
-        methods: {
-
-            //切换面板显示
-            $_toggle_options() {
-                this[(this.spread ? "hide" : "show") + "_options"]();
-            },
-
-            //显示切换面板
-            show_options() {
-                this.spread = true;
-            },
-
-            //隐藏切换面板
-            hide_options() {
-                this.spread = false;
-            },
-
-            //下拉选择
-            $_select(data) {
-                this.hide_options();
-                this.$emit("on_select", data);
-            },
-
-        }
-    };
-</script>