btxui 1.0.1 → 1.0.3

package/components/BTXUI/core/styles/theme.ts

@@ -1,29 +0,0 @@
-interface Colors {
-    [key:string]: string
-}
-
-export default {
-
-    // 预置主题色
-    colors: <Colors>{
-        none: "transparent",
-        main: "#051c24",
-        sub: "#b4967a",
-        light: "#fff",
-        lgray: "#eee",
-        mgray: "#a7a7a7",
-        dgray: "#373737",
-        dark: "#111",
-        blue: "#4085f3",
-        green: "#02b9a1",
-        yellow: "#fdba00",
-        red: "#ec4334",
-        neutral: "rgba(134,134,134,.17)",
-    },
-
-    // 追加或覆盖主题色
-    append(colors: any){
-        this.colors = { ...this.colors, ...colors }
-    }
-
-}

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

@@ -1,165 +0,0 @@
-<template>
-    <b-view styles="max-w">
-        <!--标题-->
-        <title-tag-wid v-bind="tagData"
-                       :icon-data="iconData"
-                       :arrow-fixed="arrowFixed"
-                       :checkbox="checkbox"
-                       v-model="tag_spread"
-                       @on_move="$emit('on_title_move', $event)"
-                       @on_enter="$emit('on_title_enter', $event)"
-                       @on_leave="$emit('on_title_leave', $event)" />
-
-        <!--内容-->
-        <b-view styles="rel no-scroll trans-fast t-f2px alpha-0" ref="cont"
-                @on_transitionend="$_set_state"
-                :dynamic="`h-${cont_height} ${cont_show}`"
-                :states="{
-                    spread: {
-                        style: 'alpha-1',
-                        state: tag_spread
-                    }
-                }">
-            <slot />
-        </b-view>
-    </b-view>
-</template>
-
-<script>
-    import BView from "@/components/BTXUI/core/b-view"
-    import TitleTagWid from "./title-tag-wid"
-
-    const desc = ["该组件用于实现内容的展开与收起。"],
-        extend = [],
-        dependent = ["title-tag-wid", "b-view"],
-        api = {
-            methods: [
-                {
-                    name: "comp_height",
-                    ef: "设置内容高度",
-                    params: "-",
-                    return: "-"
-                }
-            ],
-            event: [
-                {
-                    name: "on_toggle",
-                    ef: "折叠、展开切换",
-                    params: "spread"
-                },
-                {
-                    name: "on_title_move",
-                    ef: "标题区域鼠标移动",
-                    params: "event"
-                },
-                {
-                    name: "on_title_enter",
-                    ef: "标题区域鼠标移入或手指按下（悬停）",
-                    params: "event"
-                },
-                {
-                    name: "on_title_leave",
-                    ef: "标题区域鼠标移出或手指抬起",
-                    params: "event"
-                }
-            ]
-        },
-        init_data = `{
-        tagData: "(参照：tag-wid 组件入参)",
-        /* spread: "展开状态，默认关闭" */,
-        /* iconData: "(参照：b-icon 组件入参)" */,
-        /* arrowFixed: "下拉图标位置固定右侧，默认 true" */,
-        /* checkbox: "启用复选框，默认 false" */,
-    }`;
-
-    export default {
-        name: "drawer-wid",
-        introduce: { desc, extend, dependent, api, init_data },
-        components: {
-            BView,
-            TitleTagWid
-        },
-        props: {
-            tagData: {
-                type: Object,
-                required: true,
-            },
-            iconData: {
-                type: Object,
-                required: false
-            },
-            spread: {
-                type: Boolean,
-                required: false
-            },
-            arrowFixed: {
-                type: Boolean,
-                required: false,
-                default: true
-            },
-            checkbox: {
-                type: Boolean,
-                required: false
-            }
-        },
-        data(){
-            return {
-
-                //抽屉展开状态
-                tag_spread: this.spread,
-
-                //内容区高度
-                cont_height: "",
-
-                //内容显示状态
-                cont_show: ""
-
-            }
-        },
-        computed: {
-
-            //内容区域
-            cont(){
-                return this.$refs.cont;
-            }
-
-        },
-        watch: {
-
-            //监听抽屉展开状态
-            tag_spread(val){
-                if(val) this.cont_show = "show";
-                this.$nextTick(()=>{
-                    this.cont_height = val? `${this.cont.$el.scrollHeight + 1}px`: 0;
-                    this.$emit("on_toggle", val);
-                })
-            },
-
-        },
-        methods: {
-
-            //设置内容高度
-            comp_height(){
-                if(this.tag_spread){
-                    this.cont_height = "auto";
-                    this.cont_show = "show";
-                    setTimeout(()=>{
-                        this.cont_height = `${this.cont.$el.scrollHeight + 1}px`;
-                    }, 500)
-                }else{
-                    this.cont_height = 0;
-                    this.cont_show = "hide";
-                }
-            },
-
-            //设置显示状态
-            $_set_state(e){
-                if(e.propertyName === "height" && this.cont_height === 0) this.cont_show = "hide";
-            }
-
-        },
-        mounted(){
-            this.comp_height();
-        }
-    }
-</script>

package/components/BTXUI/drawer/title-tag-wid.vue

@@ -1,114 +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-4 pad-v-.7 pad-h-1.4 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-view v-if="checkbox" styles="mrg-r-1">
-            <checkbox-wid :id="id" v-model="item_selected" />
-        </b-view>
-
-        <!--标题文字-->
-        <b-view styles="flex-4 grow-1">
-            <b-icon v-if="iconData" v-bind="iconData" styles="mrg-r-1 scale-1.5" />
-            <b-text v-html="tag_text"></b-text>
-            <b-icon v-if="!arrowFixed"
-                    icon="arrow-right"
-                    styles="mrg-l-1.5 trans-fast alpha-.6"
-                    :states="{
-                    act: {
-                        style: 'rotate-90',
-                        state: selected
-                    }
-                }" />
-        </b-view>
-
-        <!--下拉箭头-->
-        <b-icon v-if="arrowFixed"
-                icon="arrow-right"
-                styles="trans-fast alpha-.6"
-                :states="{
-                    act: {
-                        style: 'rotate-90',
-                        state: selected
-                    }
-                }" />
-    </b-hot>
-</template>
-
-<script>
-    import BHot from "@/components/BTXUI/core/b-hot"
-    import BText from "@/components/BTXUI/core/b-text"
-    import BView from "@/components/BTXUI/core/b-view"
-    import BIcon from "@/components/BTXUI/core/b-icon"
-    import TagWid from "@/components/BTXUI/tag/tag-wid"
-    import CheckboxWid from "@/components/BTXUI/checkbox/checkbox-wid"
-
-    export default {
-        extends: TagWid,
-        name: "title-tag-wid",
-        components: {
-            BHot,
-            BText,
-            BIcon,
-            BView,
-            CheckboxWid
-        },
-        props: {
-            iconData: {
-                type: Object,
-                required: false
-            },
-            mode: {
-                type: String,
-                required: false,
-                default: "checkbox"
-            },
-            arrowFixed: {
-                type: Boolean,
-                required: false,
-                default: true
-            },
-            checkbox: {
-                type: Boolean,
-                required: false
-            }
-        },
-        data(){
-            return {
-
-                //色彩方案
-                tag_colors: {
-                    normal: {
-                        text: "dgray",
-                        bg: "none",
-                        ...this.colors.normal
-                    },
-                    hover: {
-                        text: "blue",
-                        bg: "none",
-                        ...this.colors.hover
-                    },
-                    act: {
-                        text: "dark",
-                        bg: "none",
-                        ...this.colors.act
-                    },
-                },
-
-                //选中状态
-                item_selected: false
-
-            }
-        }
-    }
-</script>

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

@@ -1,57 +0,0 @@
-<template>
-    <b-view styles="rel color-rgba(70,70,70,.2) z2">
-        <!--热点区-->
-        <b-hot styles="flex-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-#777"
-                    :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 SelectWid from "@/components/BTXUI/select/select-wid";
-
-    export default {
-        extends: SelectWid,
-        name: "form-select-wid"
-    };
-</script>

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

@@ -1,324 +0,0 @@
-<template>
-    <b-view>
-        <!--表单项-->
-        <b-view v-for="(item, index) of formData" :key="index"
-                styles="flex-4 mrg-b-1"
-                :states="{
-                        column: {
-                            style: 'flex flex-column mrg-b-1.4',
-                            state: layout.title_wrap
-                        }
-                    }">
-
-            <!--标题区-->
-            <b-view styles="flex-4"
-                    :states="{
-                        fixed_title_width: {
-                            style: `w-${layout.title_width}`,
-                            state: layout.title_width
-                        },
-                        column: {
-                            style: 'mrg-b-.7',
-                            state: layout.title_wrap
-                        }
-                    }">
-                <b-icon v-if="item.icon" :icon="item.icon"
-                        styles="mrg-r-1 fsize-1.4"/>
-                <b-text v-if="item.text"
-                        styles="mrg-r-1"
-                        v-html="item.text" />
-            </b-view>
-
-            <!--输入型表单元素-->
-            <b-view v-if="item.input_data"
-                    :styles="`no-scroll round-sm ${layout.title_wrap? '': 'grow-1'}`">
-                <component :is="item.input_data.type === 'textarea'? 'b-textarea': 'b-input'"
-                           :styles="`fsize-1.1 pad-v-.5 pad-h-1 round-sm thick-1 ${baseLine? 'round-t line-b': 'line'}`"
-                           :dynamic="item.input_data.readonly? 'bg-color-none line-none': item_colors.normal"
-                           ref="input"
-                           v-bind="{...item.input_data, focus: item_colors.focus}"
-                           v-model="selected[item.input_data.name]"
-                           @on_check="$_record_inp_check" />
-            </b-view>
-
-            <!--图片上传表单元素-->
-            <imgs-upload-wid v-if="item.imgs"
-                             v-bind="item.imgs.imgs_upload_data"
-                             v-model="selected[item.imgs.name]"
-                             ref="imgs_upload"
-                             @on_change="files => { $_append_file(files, item.imgs.name) }"/>
-
-            <!--下拉框表单元素-->
-            <b-view v-if="item.select"
-                    :styles="`grow-1 pad-v-.5 pad-h-1 round-sm thick-1 ${item_colors.normal} ${baseLine? 'round-t line-b': 'line'}`">
-                <form-select-wid v-bind="item.select.select_data" v-model="selected[item.select.name]" />
-            </b-view>
-
-        </b-view>
-
-        <b-view v-if="submit" :styles="`mrg-t-2.4 flex-${btn_align}`">
-            <!--提交按钮-->
-            <b-view styles="mrg-r-1">
-                <btn-wid @on_click="$_submit" v-bind="submit.btn_data" />
-            </b-view>
-
-            <!--重置按钮-->
-            <b-view>
-                <btn-wid v-if="submit.reset" @on_click="reset" v-bind="reset_btn" />
-            </b-view>
-        </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 BInput from "@/components/BTXUI/core/b-input";
-    import BTextarea from "@/components/BTXUI/core/b-textarea";
-    import BtnWid from "@/components/BTXUI/btn/btn-wid";
-    import ImgsUploadWid from "@/components/BTXUI/imgsUpload/imgs-upload-wid";
-    import FormSelectWid from "./form-select-wid";
-
-    const desc = ["该组件用于表单构建及操作。"],
-        extend = [],
-        dependent = ["imgs-upload-wid", "form-select-wid", "btn-wid", "b-textarea", "b-input", "b-icon", "b-hot", "b-text", "b-view"],
-        api = {
-            methods: [
-                {
-                    name: "reset",
-                    ef: "重置表单",
-                    params: "-",
-                    return: "-"
-                },
-                {
-                    name: "set_only_read",
-                    ef: "设置表单项只读",
-                    params: "name",
-                    return: "-"
-                },
-                {
-                    name: "set_write",
-                    ef: "设置表单项可写",
-                    params: "name",
-                    return: "-"
-                }
-            ]
-        },
-        init_data = `{
-        selected: "（model）{
-            'name（所选表单元素键名）': 'value（所选表单元素键值）',...
-        }",
-        formData: [
-            {
-                text: "表单元素字段，可缺省",
-                icon: "表单元素图标，可缺省",
-                select: {
-                    name: "下拉数据键名",
-                    select_data: "(参照：select-wid 组件入参)"
-                },
-                imgs: {
-                    name: "图片数据键名",
-                    imgs_upload_data: "(参照：imgs-upload-wid 组件入参。推荐使用后续上传)"
-                }
-                input_data: "(参照：b-input 组件入参)"
-            },...
-        ],
-        /* layout: {
-            title_width: "表单元素标题宽度，默认单位 rem",
-            title_wrap: "表单元素标题是否折行",
-        } */,
-        /* submit: {
-            align: "对齐方式：默认 left、center、right",
-            callback(selected, check_result, form_data){
-                "提交回调函数..."
-            },
-            reset: "启用重置按钮，可缺省",
-            btn_data: "(参照：btn-wid 组件入参)"
-        } */,
-        /* colors: {
-            normal: {
-                text: "常规状态文字颜色",
-                bg: "常规状态背景颜色",
-                line: "常规状态描边颜色",
-            },
-            focus: {
-                text: "激活状态文字颜色",
-                bg: "激活状态背景颜色"
-                line: "激活状态描边颜色",
-            }
-        } */,
-        /* baseLine: "基线模式，默认 false" */,
-    }`;
-
-    export default {
-        name: "form-wid",
-        introduce: { desc, extend, dependent, api, init_data },
-        components: {
-            BView,
-            BText,
-            BHot,
-            BIcon,
-            BTextarea,
-            BInput,
-            BtnWid,
-            FormSelectWid,
-            ImgsUploadWid
-        },
-        model: {
-            prop: "selected",
-            event: "on_reset"
-        },
-        props: {
-            formData: {
-                type: Array,
-                required: true
-            },
-            selected: {
-                type: Object,
-                required: true
-            },
-            layout: {
-                type: Object,
-                required: false,
-                default: ()=>{
-                    return {title_width: "", title_wrap: false}
-                }
-            },
-            submit: {
-                type: Object,
-                required: false
-            },
-            colors: {
-                type: Object,
-                required: false,
-                default: () => {
-                    return {
-                        normal: {},
-                        focus: {}
-                    }
-                }
-            },
-            baseLine: {
-                type: Boolean,
-                required: false
-            },
-        },
-        data(){
-            return {
-
-                //初始选择
-                ori_selected: {...this.selected},
-
-                //表单验证结果
-                check_result: {},
-
-                //重置按钮
-                reset_btn: this.submit? { ...this.submit.btn_data, btnText: "重置" }: null,
-
-                //按钮水平对齐
-                btn_align: this.submit? (()=>{
-                    switch(this.submit.align){
-                        case "right": return 3;
-                            break;
-                        case "center": return 2;
-                            break;
-                        default: return 1;
-                    }
-                })(): null,
-
-                //formData
-                form_data: new FormData(),
-
-            }
-        },
-        computed: {
-
-            // 输入型表单项集合
-            inputs(){
-                return this.$refs.input;
-            },
-
-            // 表单项颜色风格
-            item_colors(){
-                var {text, bg, line} = {
-                        text: "dgray",
-                        bg: "neutral",
-                        line: "none",
-                        ...this.colors.normal
-                    },
-                    normal = `color-${text} bg-color-${bg} line-${line}`,
-                    {text, bg, line} = {
-                        text: "dgray",
-                        bg: "rgba(134,134,134,.24);",
-                        line: "none",
-                        ...this.colors.focus
-                    },
-                    focus = `color-${text} bg-color-${bg} line-${line}`;
-                return { normal, focus }
-            }
-
-        },
-        methods: {
-
-            // 重置表单
-            reset(){
-                const imgs_upload = this.$refs.imgs_upload;
-                this.$emit("on_reset", {...this.ori_selected});
-                imgs_upload && imgs_upload.forEach(wid=>{
-                    wid.clear_preview();
-                })
-            },
-
-            // 设置表单项只读
-            set_only_read(name){
-                this.$_set_readonly(name, true);
-            },
-
-            // 设置表单项可写
-            set_write(name){
-                this.$_set_readonly(name, false);
-            },
-
-            // 设置 readonly 属性
-            $_set_readonly(name, state){
-                this.$set(this.formData.find(item => {
-                    const {input_data} = item;
-                    return input_data && input_data.name === name;
-                }).input_data, "readonly", state);
-            },
-
-            // 记录表单项验证结果
-            $_record_inp_check(result){
-                if(!result) return;
-                let res = this.check_result;
-                if(!result.pass){ // 验证有误，记录
-                    res[result.name] = result.notic;
-                }else { // 验证无误，移除记录
-                    delete res[result.name];
-                }
-            },
-
-            // 提交表单
-            $_submit(){
-                this.inputs && this.inputs.forEach((inp)=>{ // 输入型表单验证
-                    this.$_record_inp_check(inp.check());
-                })
-                for(let pro in this.selected){
-                    this.form_data.append(pro, this.selected[pro]);
-                }
-                this.submit && this.submit.callback(this.selected, this.check_result, this.form_data);
-                this.form_data = new FormData();
-            },
-
-            // 添加上传文件数据
-            $_append_file(files, key){
-                for(let i=0; i<files.length; i++){
-                    this.form_data.append(`${key}_${i}`, files[i]);
-                }
-            }
-
-        }
-    }
-</script>