btxui 1.0.2 → 1.0.3

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

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

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

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

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

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