btxui 1.0.1

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

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

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

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

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

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