btxui 1.0.1

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

@@ -0,0 +1,133 @@
+<template>
+    <pannel-wid v-bind="pannel_prams" v-model="pannelInfo.visible">
+        <b-view :styles="pannel_styles">
+            <b-view v-if="pannelTitle" styles="pad-l-2">
+                <b-view styles="line-b thick-1 pad-v-.7 line-neutral">{{pannelTitle}}</b-view>
+            </b-view>
+            <b-list styles="pad-2">
+                <form-wid ref="former" v-bind="formData" v-model="pannelInfo.selected" />
+            </b-list>
+        </b-view>
+    </pannel-wid>
+</template>
+
+<script>
+    import BView from "@/components/BTXUI/core/b-view";
+    import BList from "@/components/BTXUI/core/b-list";
+    import PannelWid from "@/components/BTXUI/pannel/pannel-wid";
+    import FormWid from "@/components/BTXUI/form/form-wid";
+
+    const desc = ["该组件用于自定义弹窗交互操作。"],
+        extend = [],
+        dependent = ["form-wid", "pannel-wid", "b-list", "b-view"],
+        api = {
+            methods: [
+                {
+                    name: "set_only_read",
+                    ef: "设置表单项只读",
+                    params: "name",
+                    return: "-"
+                },
+                {
+                    name: "set_write",
+                    ef: "设置表单项可写",
+                    params: "name",
+                    return: "-"
+                }
+            ]
+        },
+        init_data = `{
+        pannelInfo: "（model）{
+            visible: "面板显示状态",
+            selected: {
+                name（所选表单元素键名）: value（所选表单元素键值）,...
+            }
+        }",
+        formData: "(参照：form-wid 组件入参)",
+        /* pannelTitle: "面板标题" */,
+        /* pannelStyles: "面板样式" */,
+        /* pannelData: "(参照：pannel-wid 组件入参)" */,
+    }`;
+
+    export default {
+        name: "form-pannel-wid",
+        introduce: { desc, extend, dependent, api, init_data },
+        components: {
+            BView,
+            BList,
+            PannelWid,
+            FormWid
+        },
+        model: {
+            prop: "pannelInfo"
+        },
+        props: {
+            pannelInfo: {
+                type: Object,
+                required: true
+            },
+            formData: {
+                type: Object,
+                required: true
+            },
+            pannelTitle: {
+                type: String,
+                required: false,
+            },
+            pannelStyles: {
+                type: String,
+                required: false,
+                default: ""
+            },
+            pannelData: {
+                type: Object,
+                required: false
+            }
+        },
+        data(){
+            return {
+
+                //面板初始化样式
+                pannel_styles: `flex-column bg-color-light w-30 round-sm ${this.pannelStyles}`,
+
+                //面板初始化配置
+                pannel_prams: {
+                    matte: true,
+                    matteColor: "rgba(40,40,40,.7)",
+                    matteClose: "click",
+                    ...this.pannelData,
+                },
+
+            }
+        },
+        computed: {
+
+            //表单对象
+            former(){
+                return this.$refs.former;
+            }
+
+        },
+        methods: {
+
+            //设置表单项只读
+            set_only_read(name){
+                this.former.set_only_read(name);
+            },
+
+            //设置表单项可写
+            set_write(name){
+                this.former.set_write(name);
+            },
+
+        },
+        watch: {
+
+            //监听面板显示状态入参
+            "pannelInfo.visible"(val){
+                val === false && this.former.reset();
+            }
+
+        }
+    }
+</script>

package/components/BTXUI/imgsUpload/imgs-upload-wid.vue

@@ -0,0 +1,149 @@
+<template>
+    <b-view styles="flex">
+
+        <!--单图上传预览-->
+        <b-hot v-if="solo_cover" :styles="`flex bg-color-dgray alpha-.9 ${round}`"
+               key="solo"
+               hover="alpha-1"
+               @on_click="$_upload">
+            <b-img :styles="`w-${width} h-${height} ${round}`"
+                   :img="solo_cover" />
+        </b-hot>
+
+        <!--上传按钮-->
+        <b-hot v-else :styles="`flex-5 pcenter pad-2 bg-color-neutral alpha-.8 ${round} w-${width} h-${height}`"
+               hover="alpha-1"
+               @on_click="$_upload" >
+            <b-view>
+                <b-icon icon="add" styles="scale-1.5" />
+                <b-view v-if="notic" styles="alpha-.4 mrg-t-.7 fsize-.9">{{notic}}</b-view>
+            </b-view>
+        </b-hot>
+
+        <!--多图上传预览-->
+        <template v-if="previews.length > 1">
+            <b-img v-for="(img,index) of previews" :key="index"
+                   :styles="`mrg-l-1 w-${width} h-${height} ${round}`"
+                   :img="img" />
+        </template>
+
+        <input type="file" style="display: none" ref="uploader" @change="$_exe_upload" :multiple="multiple"/>
+    </b-view>
+</template>
+
+<script>
+    import UploadWid from "@/components/BTXUI/upload/upload-wid"
+    import BView from "@/components/BTXUI/core/b-view"
+    import BHot from "@/components/BTXUI/core/b-hot"
+    import BImg from "@/components/BTXUI/core/b-img"
+    import BIcon from "@/components/BTXUI/core/b-icon"
+
+    const desc = ["该组件用于图片上传操作，支持预览功能。"],
+        extend = ["upload-wid"],
+        dependent = ["b-icon", "b-img", "b-hot", "b-view"],
+        api = {
+            extend: "继承自：<code>upload-wid</code> 组件",
+            methods: [
+                {
+                    name: "clear_preview",
+                    ef: "清除预览图",
+                    params: "-",
+                    return: "-"
+                }
+            ]
+        },
+        init_data = `{
+        "继承自：upload-wid 组件入参。type、btnData 入参无效",
+        /* notic: "提示文字" */,
+        /* height: "热点区域高度" */,
+        /* width: "热点区域宽度" */,
+        /* round: "热点区域圆角" */
+    }`;
+
+    export default {
+        extends: UploadWid,
+        name: "imgs-upload-wid",
+        introduce: { desc, extend, dependent, api, init_data },
+        components: {
+            BView,
+            BHot,
+            BImg,
+            BIcon
+        },
+        props: {
+            notic: {
+                type: String,
+                required: false
+            },
+            width: {
+                type: [Number, String],
+                required: false,
+                default: 8
+            },
+            height: {
+                type: [Number, String],
+                required: false,
+                default: 5
+            },
+            round: {
+                type: String,
+                required: false,
+                default: "round-sm"
+            },
+            type: {
+                type: Array,
+                required: false,
+                default: ()=>["png", "jpg", "jpeg", "gif", "svg"]
+            }
+        },
+        data(){
+            return {
+
+                //预览图源
+                img_res: null
+
+            }
+        },
+        computed: {
+
+            //预览图
+            previews(){
+                const img_res = this.img_res,
+                    remote_files = this.remote_files;
+                return img_res? img_res: (remote_files || []);
+            },
+
+            //单预览图
+            solo_cover(){
+                return this.multiple? false: this.previews[0];
+            },
+
+        },
+        watch: {
+
+            //监听上传文件进行预览
+            "upload_file.files"(){
+                if(!this.uploadApi){
+                    this.img_res = [];
+                    [].forEach.call(this.upload_file.files, file=>{
+                        const file_reader = new FileReader();
+                        file_reader.onload = (res)=>{
+                            this.img_res.push(res.target.result);
+                        }
+                        file_reader.readAsDataURL(file);
+                    })
+                }
+            },
+
+        },
+        methods: {
+
+            //清除预览图
+            clear_preview(){
+                this.img_res = null;
+                this.uploader.value = "";
+            }
+
+        }
+    }
+</script>

package/components/BTXUI/index.js

@@ -0,0 +1,83 @@
+import Vue from "vue"
+
+//基础组件
+import BGrid from "./core/b-grid"
+import BHot from "./core/b-hot"
+import BDrag from "./core/b-drag"
+import BIcon from "./core/b-icon"
+import BImg from "./core/b-img"
+import BInput from "./core/b-input"
+import BList from "./core/b-list"
+import BText from "./core/b-text"
+import BTextarea from "./core/b-textarea"
+import BView from "./core/b-view"
+import BVideo from "./core/b-video"
+import BWebview from "./core/b-webview"
+
+//应用组件
+import BtnWid from "./btn/btn-wid"
+import CheckboxWid from "./checkbox/checkbox-wid"
+import ContentWid from "./content/content-wid"
+import CarouselWid from "./carousel/carousel-wid"
+import DrawerWid from "./drawer/drawer-wid"
+import FormWid from "./form/form-wid"
+import FormPannelWid from "./formPannel/form-pannel-wid"
+import ImgsUploadWid from "./imgsUpload/imgs-upload-wid"
+import PageFlipWid from "./pageFlip/page-flip-wid"
+import PannelWid from "./pannel/pannel-wid"
+import SelectWid from "./select/select-wid"
+import SliderWid from "./slider/slider-wid"
+import RangeWid from "./range/range-wid"
+import SearchWid from "./search/search-wid"
+import TabWid from "./tab/tab-wid"
+import TableWid from "./table/table-wid"
+import TagWid from "./tag/tag-wid"
+import TagsWid from "./tags/tags-wid"
+import TooltipWid from "./tooltip/tooltip-wid"
+import UploadWid from "./upload/upload-wid"
+import AppWid from "./app/app-wid"
+
+const components = {
+    core: [
+        BGrid,
+        BHot,
+        BDrag,
+        BIcon,
+        BImg,
+        BInput,
+        BList,
+        BText,
+        BTextarea,
+        BView,
+        BVideo,
+        BWebview
+    ],
+    wids: [
+        BtnWid,
+        CheckboxWid,
+        ContentWid,
+        CarouselWid,
+        DrawerWid,
+        FormWid,
+        FormPannelWid,
+        ImgsUploadWid,
+        PageFlipWid,
+        PannelWid,
+        SelectWid,
+        SliderWid,
+        RangeWid,
+        SearchWid,
+        TabWid,
+        TableWid,
+        TagWid,
+        TagsWid,
+        TooltipWid,
+        UploadWid,
+        AppWid,
+    ]
+};
+
+//加载核心组件
+[...components.core, ...components.wids].forEach((wid)=>{
+    Vue.component(wid.name, wid);
+})

package/components/BTXUI/pageFlip/page-flip-wid.vue

@@ -0,0 +1,206 @@
+<template>
+    <b-view :styles="`flex-${align_style}`">
+        <b-hot :styles="`round w-4 h-4 flex-5 fsize-1.4 mrg-r-1.4 bg-color-${colors.bg} color-${colors.text}`"
+               :hover="`bg-color-${colors.hover}`"
+               @on_click="prev">
+            <b-icon icon="arrow-left" />
+        </b-hot>
+
+        <!--页码-->
+        <b-text styles="alpha-.5" v-show="pages[0] > 1">...</b-text>
+        <b-hot v-for="page of pages"
+               :styles="`pad-h-.6 fsize-1.3 color-${colors.text}`"
+               :states="{
+                    act: {
+                        state: page === cur_page,
+                        style: `color-${colors.act}`
+                    }
+               }"
+               :hover="`color-${colors.hover}`"
+               @on_click="flip(page)"
+               :key="page">
+            {{page}}
+        </b-hot>
+        <b-text styles="alpha-.5" v-show="pages[pages.length - 1] < total">...</b-text>
+
+        <b-hot :styles="`round w-4 h-4 flex-5 fsize-1.4 mrg-l-1.4 bg-color-${colors.bg} color-${colors.text}`"
+               :hover="`bg-color-${colors.hover}`"
+               @on_click="next">
+            <b-icon icon="arrow-right" />
+        </b-hot>
+    </b-view>
+</template>
+
+<script>
+    import BView from "@/components/BTXUI/core/b-view";
+    import BHot from "@/components/BTXUI/core/b-hot";
+    import BText from "@/components/BTXUI/core/b-text";
+    import BIcon from "@/components/BTXUI/core/b-icon";
+
+    const desc = ["该组件用于实现分页导航按钮。"],
+        extend = [],
+        dependent = ["b-icon", "b-hot", "b-view", "b-text"],
+        api = {
+            methods: [
+                {
+                    name: "next",
+                    ef: "向后翻页",
+                    params: "-",
+                    return: "-"
+                },
+                {
+                    name: "prev",
+                    ef: "向前翻页",
+                    params: "-",
+                    return: "-"
+                },
+                {
+                    name: "flip",
+                    ef: "指定页码翻页",
+                    params: "page",
+                    return: "-"
+                }
+            ],
+            event: [
+                {
+                    name: "on_flip",
+                    ef: "点击分页",
+                    params: "cur_page"
+                }
+            ]
+        },
+        init_data = `{
+        total: "总页数",
+        /* curPage: "当前页，默认为 1" */,
+        /* limit: "页码显示限制，默认为 4" */,
+        /* colors: {
+            bg: "按钮颜色",
+            text: "文字及图标颜色",
+            hover: "悬停状态按钮颜色及文字、图标颜色",
+            act: "页码激活颜色"
+        } */,
+        /* align: "水平对齐方式，默认 center" */,
+    }`;
+
+    export default {
+        name: "page-flip-wid",
+        introduce: { desc, extend, dependent, api, init_data },
+        components: {
+            BView,
+            BText,
+            BIcon,
+            BHot
+        },
+        props: {
+            total: {
+                type: Number,
+                required: true
+            },
+            curPage: {
+                type: Number,
+                required: false,
+                default: 1
+            },
+            limit: {
+                type: Number,
+                required: false,
+                default: 4
+            },
+            colors: {
+                type: Object,
+                required: false,
+                default: ()=>{
+                    return {
+                        bg: "neutral",
+                        text: "dgray",
+                        hover: "mgray",
+                        act: "blue",
+                    }
+                }
+            },
+            align: {
+                type: String,
+                required: false,
+                default: "center"
+            },
+        },
+        data(){
+            return {
+
+                //当前页
+                cur_page: this.$_set_page(this.curPage),
+
+            }
+        },
+        computed: {
+
+            //显示页码
+            pages(){
+                //场景：1.不足 limit；2.等于 limit；3.超过 limit，后续；4.超过 limit，前续；5.超过 limit，前后续
+                const pages = [];
+                if(this.total !== Infinity){
+                    const cur_page = this.cur_page,
+                        limit = this.limit,
+                        rem = cur_page % limit,
+                        pos = rem > 0? rem: limit,
+                        before = Math.max(1, cur_page - pos + 1),
+                        after = Math.min(cur_page + limit - pos, this.total);
+                    for(let i=before; i<=after; i++) pages.push(i)
+                }
+                return pages;
+            },
+
+            //对齐样式
+            align_style(){
+                let val;
+                switch(this.align){
+                    case "left": val = 4;
+                        break;
+                    case "right": val = 6;
+                        break;
+                    default: val = 5;
+                }
+                return val
+            }
+
+        },
+        methods: {
+
+            //向后翻页
+            next(){
+                this.flip(this.cur_page + 1);
+            },
+
+            //向前翻页
+            prev(){
+                this.flip(this.cur_page - 1);
+            },
+
+            //翻页
+            flip(page){
+                const cur_page = this.$_set_page(page);
+                if(cur_page !== this.cur_page){
+                    this.cur_page = cur_page;
+                    this.$emit("on_flip", this.cur_page)
+                }
+            },
+
+            //设置当前页
+            $_set_page(page){
+                return Math.min(Math.max(1, isNaN(page)? 1: page), this.total);
+            }
+
+        },
+        watch: {
+
+            total(){
+                this.cur_page = this.$_set_page(this.curPage)
+            },
+
+            curPage(){
+                this.cur_page = this.$_set_page(this.curPage)
+            }
+
+        }
+    }
+</script>