btxui 1.0.1

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

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

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

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

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