btxui 1.0.2 → 1.0.3

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

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

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

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

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