btxui 1.0.1

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

@@ -0,0 +1,128 @@
+<template>
+    <b-hot @on_click="$_click"
+           v-bind="hotData"
+           :styles="`flex-5 pad-h-1.4 pad-v-.4 line thick-1 ellipsis ${btnRound? 'round-lg': 'round-sm'} ${btnWidth? 'w-' + btnWidth: ''} color-${btn_color.normal.text} ${$_set_bg(btn_color.normal.bg)} line-${btn_color.normal.line}`"
+           :hover="`color-${btn_color.hover.text} ${$_set_bg(btn_color.hover.bg)} line-${btn_color.hover.line}`">
+
+        <!--图标-->
+        <b-icon v-if="iconData" v-bind="iconData" styles="mrg-r-.7" />
+
+        {{btnText}}
+    </b-hot>
+</template>
+
+<script>
+    import BHot from "@/components/BTXUI/core/b-hot";
+    import BIcon from "@/components/BTXUI/core/b-icon";
+
+    const desc = ["该组件用于实现按钮交互操作。"],
+        extend = [],
+        dependent = ["b-icon", "b-hot"],
+        api = {
+            event: [
+                {
+                    name: "on_click",
+                    ef: "点击触发",
+                    params: "-"
+                }
+            ]
+        },
+        init_data = `{
+        btnText: "按钮文字",
+        /* btnColor: {
+            normal: {
+                text: "默认文字色样式色值",
+                bg: "默认背景色样式色值",
+                line: "默认描边色样式色值",
+            },
+            hover: {
+                text: "悬停文字色样式色值",
+                bg: "悬停背景色样式色值",
+                line: "悬停描边色样式色值",
+            },
+        } */,
+        /* btnRound: "启用大圆角效果" */,
+        /* btnWidth: "按钮固定宽度" */,
+        /* hotData: "(参照：b-hot 组件入参)" */,
+        /* iconData: "(参照：b-icon 组件入参)" */
+    }`;
+
+    export default {
+        name: "btn-wid",
+        introduce: { desc, extend, dependent, api, init_data },
+        components: {
+            BHot,
+            BIcon
+        },
+        props: {
+            btnText: {
+                type: String,
+                required: true,
+            },
+            btnColor: {
+                type: Object,
+                required: false,
+                default: () => {
+                    return {
+                        normal:{},
+                        hover:{},
+                    }
+                }
+            },
+            btnRound: {
+                type: Boolean,
+                required: false
+            },
+            btnWidth: {
+                type: [String, Number],
+                required: false
+            },
+            hotData: {
+                type: Object,
+                required: false
+            },
+            iconData: {
+                type: Object,
+                required: false
+            }
+        },
+        data(){
+            return {
+
+                //按钮色彩风格
+                btn_color: {
+                    normal: {
+                        text: "dgray",
+                        bg: "lgray",
+                        line: "none",
+                        ...this.btnColor.normal
+                    },
+                    hover: {
+                        text: "blue",
+                        bg: "#e7e7e7",
+                        line: "none",
+                        ...this.btnColor.hover
+                    }
+                }
+
+            }
+        },
+        methods: {
+
+            //执行点击
+            $_click(){
+                this.$emit("on_click");
+            },
+
+            //设置背景样式
+            $_set_bg(color){
+                if(Array.isArray(color)){ //渐变色
+                    return `bg-gradient-left,${color.join(",")}`;
+                }else{ //纯色
+                    return `bg-color-${color}`;
+                }
+            }
+
+        }
+    }
+</script>

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

@@ -0,0 +1,138 @@
+<template>
+    <b-view styles="no-scroll"
+            @on_touchstart="pause"
+            @on_touchend="play"
+            @on_leave="play"
+            @on_enter="pause">
+        <b-view styles="flex"
+                :dynamic="`w-${item_box_width}px translateX-f${offset}px`">
+            <b-view v-for="(item,i) of play_items" :key="i"
+                    :styles="`pad-h-${rule / 2}px`"
+                    :dynamic="`w-${item_width}px`">
+                <slot :name="item.id" />
+            </b-view>
+        </b-view>
+    </b-view>
+</template>
+
+<script>
+    import BView from "@/components/BTXUI/core/b-view"
+
+    const desc = ["该组件用于实现自定义元素的走马灯效果。"],
+        extend = [],
+        dependent = ["b-view"],
+        api = {
+            methods: [
+                {
+                    name: "play",
+                    ef: "播放走马灯",
+                    params: "-",
+                    return: "-"
+                },
+                {
+                    name: "pause",
+                    ef: "暂停走马灯",
+                    params: "-",
+                    return: "-"
+                }
+            ]
+        },
+        init_data = `{
+        items: [
+            {
+                id: "数据标识",...
+            },...
+        ],
+        /* visiableCount: "项目可见数量，默认为 3" */,
+        /* rule: "项目间距" */,
+        /* speed: "播放速度" */
+    }`;
+
+    export default {
+        name: "carousel-wid",
+        introduce: { desc, extend, dependent, api, init_data },
+        components: {
+            BView
+        },
+        props: {
+            items: {
+                required: true,
+                type: Array
+            },
+            visiableCount: {
+                required: false,
+                type: Number,
+                default: 3
+            },
+            rule: {
+                required: false,
+                type: Number,
+                default: 0
+            },
+            speed: {
+                required: false,
+                type: Number,
+                default: 1
+            },
+        },
+        data(){
+            return {
+
+                //播放项目
+                play_items: this.items,
+
+                //播放器宽度
+                player_width: 0,
+
+                //项目宽度
+                item_width: 0,
+
+                //项目容器宽度
+                item_box_width: 0,
+
+                //播放状态
+                play_state: true,
+
+                //水平位移
+                offset: 0,
+
+            }
+        },
+        methods: {
+
+            //暂停
+            pause(){
+                this.play_state = false;
+            },
+
+            //播放
+            play(){
+                this.play_state = true;
+                this.$_play();
+            },
+
+            //执行播放
+            $_play(){
+                if(!this.play_state) return false;
+                let speed = this.offset += this.speed;
+                if(speed >= this.item_width){
+                    this.play_items.push(this.play_items.shift());
+                    this.offset = 0;
+                }
+                requestAnimationFrame(this.$_play);
+            },
+
+            //初始化数据
+            $_init_data(){
+                this.player_width = this.$el.clientWidth;
+                this.item_width = this.player_width / this.visiableCount;
+                this.item_box_width = this.item_width * this.play_items.length;
+                this.play_items.length > this.visiableCount && this.$_play();
+            },
+
+        },
+        mounted(){
+            this.$_init_data();
+        }
+    }
+</script>

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

@@ -0,0 +1,72 @@
+<template>
+    <b-hot :styles="`flex-4 bg-color-neutral round-sm ${tag_text? 'pad-r-1 pad-v-.4 pad-l-.4': ''}`"
+           hover="bg-color-rgba(134,134,134,.24)"
+           :states="{
+                act: {
+                    style: 'color-blue',
+                    state: selected
+                }
+            }"
+           @on_click="$_click">
+
+        <!--选框-->
+        <b-view styles="w-1.7 h-1.7 bg-color-neutral round-sm flex-5"
+                :states="{
+                    act: {
+                        style: 'bg-color-blue color-light',
+                        state: selected
+                    }
+                }">
+            <b-icon icon="success" styles="alpha-.3"
+                    :states="{
+                        act: {
+                            style: 'alpha-1',
+                            state: selected
+                        }
+                    }"/>
+        </b-view>
+
+        <!--文字-->
+        <b-view v-if="tag_text" styles="mrg-l-1 ellipsis">
+            {{tag_text}}
+        </b-view>
+
+    </b-hot>
+</template>
+
+<script>
+    import TagWid from "@/components/BTXUI/tag/tag-wid"
+    import BHot from "@/components/BTXUI/core/b-hot"
+    import BView from "@/components/BTXUI/core/b-view"
+    import BIcon from "@/components/BTXUI/core/b-icon"
+
+    let desc = ["该组件用于复选框切换选择操作。"],
+        extend = ["tag-wid"],
+        dependent = ["b-hot", "b-icon", "b-view"],
+        api = {
+            extend: "继承自：<code>tag-wid</code> 组件"
+        },
+        init_data = "继承自：tag-wid 组件入参。text 为非必须参数，colors、mode 入参无效";
+
+    export default {
+        extends: TagWid,
+        name: "checkbox-wid",
+        introduce: { desc, extend, dependent, api, init_data },
+        components: {
+            BView,
+            BHot,
+            BIcon
+        },
+        props: {
+            text: {
+                type: String,
+                required: false
+            },
+            mode: {
+                type: String,
+                required: false,
+                default: "checkbox"
+            },
+        }
+    }
+</script>

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

@@ -0,0 +1,279 @@
+<template>
+    <pannel-wid v-model="visible" v-bind="pannel_data">
+        <b-view :styles="`round-sm pcenter fsize-1.1 shadow color-rgba(24,24,24,.34) bg-color-${wid_colors.pannel}`">
+            <b-view :styles="`flex-column flex-5 pad-v-2.5 pad-h-4 color-${wid_colors.text}`">
+                <!--图标-->
+                <b-view styles="mrg-b-1 flex-2" v-if="pannel.state">
+                    <b-view styles="w-3.2 h-3.2 round fsize-1.7 flex-5"
+                            :states="{
+                                success: {
+                                    style: `bg-color-${wid_colors.success}`,
+                                    state: pannel.state === 'success'
+                                },
+                                fail: {
+                                    style: `bg-color-${wid_colors.fail}`,
+                                    state: pannel.state === 'fail'
+                                },
+                                notic: {
+                                    style: `bg-color-${wid_colors.notic}`,
+                                    state: pannel.state === 'notic'
+                                },
+                                loading: {
+                                    style: `bg-color-${wid_colors.loading}`,
+                                    state: pannel.state === 'loading'
+                                },
+                            }">
+                        <b-icon :icon="pannel_icon" />
+                    </b-view>
+                </b-view>
+
+                <!--文字-->
+                <b-view styles="alpha-.9" v-html="pannel.text"></b-view>
+            </b-view>
+
+            <!--按钮-->
+            <b-view v-if="pannel.mode !== 'toast'" :styles="`flex pad-3px color-${wid_colors.text}`">
+                <!--alert-->
+                <template v-if="pannel.mode === 'alert'">
+                    <b-hot key="a" @on_click="$_close()"
+                           styles="bg-color-neutral round-sm pad-h-1.2 pad-v-.7 grow-1"
+                           hover="bg-color-rgba(134,134,134,0.24)">
+                        {{btn_cname[0]}}
+                    </b-hot>
+                </template>
+
+                <!--confirm-->
+                <template v-else-if="pannel.mode === 'confirm'">
+                    <b-hot key="b" @on_click="$_click('ok')"
+                           styles="bg-color-neutral round-sm round-l pad-h-1.2 pad-v-.7 grow-1 mrg-r-1px"
+                           hover="bg-color-rgba(134,134,134,0.24)">
+                        {{btn_cname[0]}}
+                    </b-hot>
+                    <b-hot @on_click="$_click('cancel')"
+                           styles="bg-color-neutral round-sm round-r pad-h-1.2 pad-v-.7 grow-1"
+                           hover="bg-color-rgba(134,134,134,0.24)">
+                        {{btn_cname[1]}}
+                    </b-hot>
+                </template>
+            </b-view>
+        </b-view>
+    </pannel-wid>
+</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";
+    import PannelWid from "@/components/BTXUI/pannel/pannel-wid";
+
+    const desc = ["该组件用于显示弹窗提示。", "通常在入口页进行全局实例化绑定，之后可通过相关 API 进行使用：<code>this.$confirm['method']()</code>。"],
+        extend = [],
+        dependent = ["pannel-wid", "b-icon", "b-hot", "b-view"],
+        api = {
+            methods: [
+                {
+                    name: "toast",
+                    ef: "显示提示弹窗",
+                    params: "text, <span class=\"alpha-d7\">[duration=2000, state=\"\"]</span>",
+                    return: "-"
+                },
+                {
+                    name: "alert",
+                    ef: "显示警示弹窗",
+                    params: "text, <span class=\"alpha-d7\">[state=\"\", btn_cname=\"确认\"]</span>",
+                    return: "-"
+                },
+                {
+                    name: "confirm",
+                    ef: "显示确认弹窗",
+                    params: "text, <span class=\"alpha-d7\">[success=null, error=null, state=\"\", btn_cname=[\"确认,取消\"]]</span>",
+                    return: "-"
+                },
+                {
+                    name: "prograss",
+                    ef: "显示加载弹窗",
+                    params: "text, <span class=\"alpha-d7\">[result=false]</span>",
+                    return: "-"
+                }
+            ]
+        },
+        init_data = `{
+        /* colors: {
+            matte: "遮罩颜色",
+            text: "文字颜色（同时支持富文本）",
+            pannel: "面板颜色",
+            suucees: "成功提示图标背景色",
+            fail: "失败提示图标背景色",
+            notic: "信息提示图标背景色",
+            loading: "加载提示图标背景色"
+        } */
+    }`;
+
+    export default {
+        name: "confirm-wid",
+        introduce: { desc, extend, dependent, api, init_data },
+        components: {
+            PannelWid,
+            BView,
+            BHot,
+            BIcon
+        },
+        props: {
+            colors: {
+                type: Object,
+                required: false
+            },
+        },
+        data() {
+            return {
+
+                //组件配色
+                wid_colors: {
+                    text: "dgray",
+                    pannel: "light",
+                    success: "#e6fff2",
+                    fail: "#f9f2f4",
+                    notic: "#e6f5ff",
+                    loading: "lgray",
+                    ...this.colors
+                },
+
+                //pannel-wid 入参
+                pannel_data: {
+                    matte: true,
+                    matteColor: this.colors.matte,
+                    matteZIndex: 10
+                },
+
+                //弹窗显示状态
+                visible: false,
+
+                //弹窗状态
+                pannel: {
+                    mode: "",
+                    text: "",
+                    state: "",
+                    close_t: null,
+                },
+
+                //按钮别名
+                btn_cname: null,
+
+                //点击回调
+                callbacks: {
+                    ok: null,
+                    cancel: null
+                },
+
+            }
+        },
+        computed: {
+
+            //面板图标
+            pannel_icon(){
+                let state = this.pannel.state;
+                return (state === "success" || state === "fail" || state === "notic" || state === "loading")? `ani_${state}`: state;
+            }
+
+        },
+        methods: {
+
+            //提示弹窗
+            toast(text, duration=2000, state="") {
+                this.$_show();
+                this.pannel = {
+                    mode: "toast",
+                    state,
+                    text
+                }
+                setTimeout(() => {
+                    this.$_close();
+                }, duration)
+            },
+
+            //警示弹窗
+            alert(text, state="", btn_cname="确认") {
+                this.$_show();
+                this.pannel = {
+                    mode: "alert",
+                    state,
+                    text
+                }
+                this.btn_cname = [btn_cname];
+                this.$_bind_keyboard_event();
+            },
+
+            //确认弹窗
+            confirm(text, success=null, error=null, state="", btn_cname=["确认","取消"]) {
+                this.$_show();
+                this.pannel = {
+                    mode: "confirm",
+                    text,
+                    state
+                }
+                this.btn_cname = btn_cname;
+                this.callbacks.ok = success;
+                this.callbacks.cancel = error;
+                this.$_bind_keyboard_event();
+            },
+
+            //加载弹窗
+            prograss(text, result=false) {
+                if(result === true){ //直接关闭
+                    this.toast("", 0);
+                } else if(typeof(result) === "string") { //状态关闭
+                    this.toast(text, 2000, result);
+                } else { //开启弹窗
+                    this.$_show();
+                    this.pannel = {
+                        mode: "toast",
+                        state: "loading",
+                        text
+                    }
+                }
+            },
+
+            //关闭窗口
+            $_close(callback) {
+                callback && callback();
+                this.visible = false;
+                this.$_cancel_bind_keyboard_event();
+            },
+
+            //显示窗口
+            $_show() {
+                this.visible = true;
+            },
+
+            //执行点击操作
+            $_click(operate) {
+                this.$_close(this.callbacks[operate]);
+            },
+
+            //绑定键盘事件
+            $_bind_keyboard_event() {
+                window.focus();
+                window.addEventListener("keyup", this.$_keyboard_enter);
+            },
+
+            //回车输入
+            $_keyboard_enter(e) {
+                if (e.key === "Enter") {
+                    this.$_close(this.callbacks.ok);
+                }
+            },
+
+            //销毁键盘事件
+            $_cancel_bind_keyboard_event() {
+                window.removeEventListener("keyup", this.$_keyboard_enter);
+            }
+
+        },
+        mounted() {
+            // this.$root.__proto__.$confirm = this; // 扩展为全局工具组件
+        },
+        beforeDestroy() {
+            this.$_close();
+        }
+    }
+</script>

package/components/BTXUI/content/content-checkbox-wid.vue

@@ -0,0 +1,44 @@
+<template>
+    <b-hot :styles="`flex-4 bg-color-neutral round-sm ${tag_text? 'pad-r-1 pad-v-.4 pad-l-.4': ''} color-${tag_colors.normal.text} bg-color-${tag_colors.normal.bg}`"
+           :hover="`bg-color-${tag_colors.hover.bg} color-${tag_colors.hover.text}`"
+           :states="{
+               act: {
+                   style: `bg-color-${tag_colors.act.bg} color-${tag_colors.act.text}`,
+                   state: selected
+               }
+           }"
+           @on_click="$_click">
+
+        <!--选框-->
+        <b-view styles="w-1.7 h-1.7 bg-color-neutral round-sm flex-5"
+                :states="{
+                    act: {
+                        style: `bg-color-${tag_colors.act.text} color-${tag_colors.act.bg}`,
+                        state: selected
+                    }
+                }">
+            <b-icon icon="success" styles="alpha-.3"
+                    :states="{
+                        act: {
+                            style: 'alpha-1',
+                            state: selected
+                        }
+                    }"/>
+        </b-view>
+
+        <!--文字-->
+        <b-view v-if="tag_text" styles="mrg-l-1">
+            {{tag_text}}
+        </b-view>
+
+    </b-hot>
+</template>
+
+<script>
+    import CheckboxWid from "@/components/BTXUI/checkbox/checkbox-wid"
+
+    export default {
+        extends: CheckboxWid,
+        name: "content-checkbox-wid"
+    }
+</script>