btxui 1.0.2 → 1.0.3

package/components/BTXUI/core/b-input.vue

@@ -1,198 +0,0 @@
-<template>
-    <input :style="computed_style" :type="type" :name="name" :readonly="readonly"
-           @focus="$_focus"
-           @blur="$_blur"
-           @change="$_check"
-           @keyup.enter="$_enter"
-           v-model="value"
-           autocomplete="off" />
-</template>
-
-<script>
-
-    let desc = ["该组件用于实现输入型表单元素。"],
-        extend = ["b-style"],
-        dependent = [],
-        api = {
-            methods: [
-                {
-                    name: "check",
-                    ef: "表单验证",
-                    params: "-",
-                    return: "{name:'表单项属性', notic:'报错提示', pass:'是否通过'}"
-                }
-            ],
-            event: [
-                {
-                    name: "on_check",
-                    ef: "表单输入变化",
-                    params: "{name:'表单项属性', notic:'报错提示', pass:'是否通过'}",
-                },
-                {
-                    name: "on_focus",
-                    ef: "表单聚焦",
-                    params: "-",
-                },
-                {
-                    name: "on_blur",
-                    ef: "表单失焦",
-                    params: "-",
-                },
-                {
-                    name: "on_enter",
-                    ef: "聚焦时键盘按下回车",
-                    params: "text、event",
-                }
-            ]
-        },
-        init_data = `{
-        type: "表单元素类型（text：单行文本、password：密码、textarea：多行文本）",
-        name: "表单元素数据键名",
-        /* styles: "(参照：b-style 组件入参)" */,
-        /* inpVal: "(model) 表单输入内容" */,
-        /* maxlength: "字符数上限（限输入型表单元素）" */,
-        /* placeholder: "输入提示（限输入型表单元素）" */,
-        /* readonly: "只读，默认 false" */,
-        /* rule: {
-            type: "自定义正则验证，或预置正则验证（包括：required、tel、email、url、uname、zh、uid）",
-            notic: "验证报错提示"
-        } */,
-        /* focus: "激活样式值" */,
-    }`;
-
-    export default {
-        name: "b-input",
-        introduce: { desc, extend, dependent, api, init_data },
-        model: {
-            prop: "inpVal",
-            event: "on_input"
-        },
-        props: {
-            type: {
-                type: String,
-                required: true,
-            },
-            name: {
-                type: String,
-                required: true,
-            },
-            inpVal: {
-                type: [String, Number],
-                required: false,
-                default: ""
-            },
-            readonly: {
-                type: Boolean,
-                required: false,
-            },
-            rule: {
-                type: Object,
-                required: false,
-            },
-            focus: {
-                type: String,
-                required: false,
-                default: "color-dark bg-color-rgba(134,134,134,.24)"
-            }
-        },
-        data(){
-            return {
-
-                //输入文字
-                value: this.inpVal,
-
-                //预置正则
-                preset_rules: {
-                    required: {
-                        regexp: /[\w\.\-_\u4e00-\u9fa5]+/,
-                        notic: "输入内容为空!"
-                    },
-                    tel: {
-                        regexp: /^1[3-9]\d{9}$/,
-                        notic: "手机号格式有误!"
-                    },
-                    email: {
-                        regexp: /^[\w\.]+@(\w+\.)+(com|net|org|wiki|cn|cc)$/,
-                        notic: "邮箱格式有误!"
-                    },
-                    url: {
-                        regexp: /^((http|https):\/\/)?(wwww\.)?(\w+\.)+(com|net|org|wiki|cn|cc)$/,
-                        notic: "url 格式有误!"
-                    },
-                    uname: {
-                        regexp: /^[\w_]+$/,
-                        notic: "请输入英文字母、数字或下划线!"
-                    },
-                    zh: {
-                        regexp: /^[\u4e00-\u9fa5]+$/,
-                        notic: "请输入中文字符!"
-                    },
-                    uid: {
-                        regexp: /^\d{15}(\d{2}[0-9x])?$/i,
-                        notic: "身份证号输入有误!"
-                    }
-                },
-
-            }
-        },
-        watch: {
-
-            //监听输入
-            inpVal(val){
-                this.value = val;
-            },
-
-            //监听输出
-            value(val){
-                this.$emit("on_input", val? val.trim(): "");
-            }
-
-        },
-        methods: {
-
-            //执行验证
-            check(){
-                let rule = this.rule;
-                if(rule){
-                    let pre_rule = this.preset_rules[rule.type],
-                        regexp = pre_rule? pre_rule.regexp: rule.type,
-                        pre_notic = pre_rule? pre_rule.notic: "输入格式有误!",
-                        val = this.inpVal;
-                    return {
-                        name: this.name,
-                        notic: rule.notic || pre_notic,
-                        pass: regexp.test(val)
-                    };
-                }
-            },
-
-            //输入验证
-            $_check(){
-                this.$emit("on_check", this.check());
-            },
-
-            //表单聚焦
-            $_focus(){
-                if(this.readonly) return;
-                this.toggle_style("focus");
-                this.$emit("on_focus");
-            },
-
-            //表单失焦
-            $_blur(){
-                if(this.readonly) return;
-                this.reset_style();
-                this.$emit("on_blur");
-            },
-
-            //表单回车
-            $_enter(e){
-                this.$emit("on_enter", this.inpVal, e);
-            },
-
-        },
-        mounted(){
-            this.append_state(this.focus, "focus");
-        }
-    }
-</script>

package/components/BTXUI/core/b-list.vue

@@ -1,276 +0,0 @@
-<template>
-    <b-view :styles="`rel grow-1 max ${styles} over-hide`">
-
-        <!--置顶按钮-->
-        <b-hot :styles="`abs w-3.7 h-3.7 transform-rotate(180deg) z2 round flex-5 line thick-2 line-neutral trans-fast fsize-1.7 r-${go_top_btn.pos.right} b-${go_top_btn.pos.bottom} color-${go_top_btn.colors.normal.icon} bg-color-${go_top_btn.colors.normal.bg}`"
-               :hover="`line-none color-${go_top_btn.colors.hover.icon} bg-color-${go_top_btn.colors.hover.bg}`"
-               :states="{
-                   hide: {
-                       state: top_btn_hide,
-                       style: 'b-f5'
-                   }
-               }"
-               @on_click="reset">
-            <b-icon icon="xiala" />
-        </b-hot>
-
-        <!--滚动区域-->
-        <b-view styles="max"
-                ref="list"
-                :states="{
-                    scroll_x: {
-                        style: 'over-scroll no-wrap',
-                        state: scroll === 'x'
-                    },
-                    scroll_y: {
-                        style: 'over-scroll',
-                        state: scroll === 'y'
-                    },
-                    scroll_hide: {
-                        style: 'over-hide',
-                        state: scroll === 'hide'
-                    }
-                }"
-                @on_touchmove="$_touch_move"
-                :class="scroll_class">
-            <slot />
-        </b-view>
-
-    </b-view>
-</template>
-
-<script>
-    import ChapterLink from "./lib/ChapterLink"
-    import BView from "./b-view"
-    import BHot from "./b-hot"
-    import BIcon from "./b-icon"
-
-    const desc = ["该组件用于实现长内容的溢出滚动及隐藏效果，此外还具备滚动条定位监听及懒加载接口。"],
-        extend = [],
-        dependent = ["ChapterLink", "b-view", "b-hot", "b-icon"],
-        api = {
-            methods: [
-                {
-                    name: "reset",
-                    ef: "重置定位",
-                    params: "-",
-                    return: "-"
-                }
-            ],
-            event: [
-                {
-                    name: "on_to_top",
-                    ef: "滚动置顶",
-                    params: "spread"
-                },
-                {
-                    name: "on_to_bottom",
-                    ef: "滚动置底",
-                    params: "event"
-                },
-                {
-                    name: "on_scroll",
-                    ef: "滚动",
-                    params: "{dir:scroll_direction, left:scroll_left, top:scroll_top}"
-                }
-            ]
-        },
-        init_data = `{
-        /* styles: "(参照：b-style 组件入参)" */,
-        /* wide: "加宽滚动条，默认 false" */,
-        /* scroll: "溢出滚动。y：垂直溢出滚动（默认）；x：水平溢出滚动；hide：溢出隐藏" */,
-        /* goTopBtn: {
-            show_distance: "按钮显示时距离视口顶部的距离，默认为：false 不显示；可基于容器高度进行倍数设置：'1scr（即 1 屏的高度）'，也支持具体数值",
-            response_direction: "按钮基于滑动方向响应式显示，默认关闭",
-            pos: {
-                right: "距离右侧距离，默认 1rem",
-                bottom: "距离底部距离，默认 2rem"
-            },
-            colors: {
-                normal: {
-                    icon: "常规状态图标色，默认 #777",
-                    bg: "常规状态背景色，默认 dark",
-                },
-                hover: {
-                    icon: "悬停状态图标色，默认 light",
-                    bg: "悬停状态背景色，默认 rgba(0,0,0,.6)",
-                }
-            }
-        } */
-    }`;
-
-    let orig_scroll_pos = {x:0, y:0}; //滚动原始定位
-
-    export default {
-        name: "b-list",
-        introduce: { desc, extend, dependent, api, init_data },
-        components: {
-            BView,
-            BHot,
-            BIcon
-        },
-        props: {
-            styles: {
-                type: String,
-                required: false
-            },
-            scroll: {
-                type: String,
-                required: false,
-                default: "y"
-            },
-            wide: {
-                type: Boolean,
-                required: false
-            },
-            goTopBtn: {
-                type: Object,
-                required: false,
-                default: ()=>{
-                    return {}
-                }
-            }
-        },
-        watch: {
-
-            //监听路由
-            $route(){
-                this.reset();
-            }
-
-        },
-        data(){
-            return {
-
-                //定位器
-                chapter_link: new ChapterLink(0),
-
-                //触控滑动方向
-                touch_move_dir: "v",
-
-                //置顶按钮隐藏状态
-                top_btn_hide: true,
-
-                //置顶按钮显示，距离容器顶部距离
-                show_distance: 0
-
-            }
-        },
-        computed: {
-
-            //滚动容器
-            $list(){
-                return this.$refs.list.$el;
-            },
-
-            //溢出样式
-            scroll_class(){
-                switch(this.scroll){
-                    case "x":
-                        return "auto-h-scroll no-wrap";
-                        break;
-                    case "y":
-                        return this.wide? "wide-auto-scroll": "auto-scroll";
-                        break;
-                    case "hide":
-                        return "over-hide";
-                }
-            },
-
-            //置顶按钮配置
-            go_top_btn(){
-                return {
-                    show_distance: false,
-                    response_direction: false,
-                    pos: {
-                        right: "1",
-                        bottom: "2"
-                    },
-                    colors: {
-                        normal: {
-                            icon: "#777",
-                            bg: "dark",
-                        },
-                        hover: {
-                            icon: "light",
-                            bg: "rgba(0,0,0,.6)",
-                        }
-                    },
-                    ...this.goTopBtn
-                }
-            }
-
-        },
-        methods: {
-
-            //重置定位
-            reset(){
-                this.chapter_link.go_top(this.$list, 0);
-            },
-
-            //滚动定位监听
-            $_watch_pos(){
-                this.$list.onscroll = (e)=>{
-                    const st = e.target.scrollTop,
-                        sl = e.target.scrollLeft,
-                        h_offset = sl - orig_scroll_pos.x,
-                        v_offset = st - orig_scroll_pos.y;
-                    let dir;
-                    if(Math.abs(h_offset) >= Math.abs(v_offset)){ //水平方向
-                        e.stopPropagation();
-                        dir = h_offset >= 0? "l2r": "r2l";
-                    }else { //垂直方向
-                        dir = v_offset >= 0? "t2b": "b2t";
-                    }
-                    orig_scroll_pos.x = sl;
-                    orig_scroll_pos.y = st;
-                    this.$emit("on_scroll", {dir, left:sl, top:st});
-
-                    st === 0 && this.$emit("on_to_top", e); //滚动置顶
-                    st === e.target.scrollHeight - e.target.offsetHeight && this.$emit("on_to_bottom", e); //滚动置底
-                    this.go_top_btn.show_distance && this.$_set_top_btn(dir, st); //设置置顶按钮
-                }
-            },
-
-            //触控移动
-            $_touch_move(e){
-                this.scroll === "x" && e.stopPropagation();
-            },
-
-            //设置置顶按钮显示，距离容器顶部距离
-            $_set_show_distance(){
-                const show_distance = this.go_top_btn.show_distance;
-                if(!show_distance) return;
-                const distance = this.go_top_btn.show_distance.split("scr");
-                if(distance.length > 1){ //基于容器高度的倍数
-                    this.show_distance = distance[0] * this.$el.clientHeight;
-                }else { //具体值
-                    this.show_distance = distance[0];
-                }
-            },
-
-            //设置置顶按钮
-            $_set_top_btn(dir, top){
-                if(top > this.show_distance) { //显示
-                    this.top_btn_hide = false;
-                    if(this.go_top_btn.response_direction){ //滚动方向响应显示状态
-                        if(dir === "b2t"){
-                            this.top_btn_hide = false;
-                        }else {
-                            this.top_btn_hide = true;
-                        }
-                    }
-                }else { //隐藏
-                    this.top_btn_hide = true;
-                }
-            },
-
-        },
-        mounted(){
-            this.$_watch_pos();
-            setTimeout(()=>{
-                this.$_set_show_distance();
-            }, 1000);
-        }
-    }
-</script>

package/components/BTXUI/core/b-text/doc.ts

@@ -1,9 +0,0 @@
-export default {
-    name: "b-text", 
-    desc: ["该组件用于标记富文本片段，相当于 html 中 span 的作用，可以接收 <code>class</code> 属性来应用框架样式体系。"],
-    extend: ["b-style"],
-    dependent: [], 
-    initData: [
-        ["class", "string", "参照：styles 组件入参"]
-    ] 
-};

package/components/BTXUI/core/b-text/index.vue

@@ -1,16 +0,0 @@
-<template>
-    <styles :class="class">
-        <span :class="class">
-            <slot/>
-        </span>
-    </styles>
-</template>
-
-<script setup lang="ts">
-    import styles from "@/components/BTXUI/core/styles/index.vue"
-
-    defineProps<{
-        // 样式集
-        class?: string
-    }>()
-</script>

package/components/BTXUI/core/b-textarea.vue

@@ -1,58 +0,0 @@
-<template>
-    <textarea :style="computed_style" :type="type" :name="name"
-              class="auto-scroll"
-              @focus="$_focus"
-              @blur="$_blur"
-              @change="$_check"
-              v-model="value"
-              autocomplete="off"
-              :rows="rows"/>
-</template>
-
-<script>
-    import BInput from "./b-input";
-
-    let desc = ["该组件用于实现多行输入型表单元素。"],
-        extend = ["b-input"],
-        dependent = [],
-        api = {
-            extend: "继承自：<code>b-input</code> 组件",
-            methods: [
-                {
-                    name: "to_html",
-                    ef: "将换行符转换为 html <br> 标签",
-                    params: "-",
-                    return: "html_str"
-                }
-            ]
-        },
-        init_data = `{
-        "(继承自：b-input 组件入参，type 入参无效)",
-        /* rows: "显示最大行数，默认 7 行" */
-    }`;
-
-    export default {
-        extends: BInput,
-        name: "b-textarea",
-        introduce: { desc, extend, dependent, api, init_data },
-        props: {
-            type: {
-                type: String,
-                required: false,
-            },
-            rows: {
-                type: Number,
-                required: false,
-                default: 7
-            }
-        },
-        methods: {
-
-            //将换行符转换为 html <br> 标签
-            to_html(){
-                return this.inpVal.replace(/[\n\r]/g, "<br>")
-            }
-
-        }
-    }
-</script>

package/components/BTXUI/core/b-video.vue

@@ -1,35 +0,0 @@
-<template>
-    <video :style="computed_style" muted
-           :src="video"></video>
-</template>
-
-<script>
-
-    let desc = ["该组件用于实现视频播放器。"],
-        extend = ["b-style"],
-        dependent = [],
-        api = null,
-        init_data = `{
-        video: "视频资源",
-        /* styles: "(参照：b-style 组件入参)" */,
-    }`;
-
-    export default {
-        name: "b-video",
-        introduce: { desc, extend, dependent, api, init_data },
-        props: {
-            video: {
-                type: String,
-                required: true
-            },
-        },
-        methods: {
-
-            //播放
-            play(){
-                this.$el.play();
-            }
-
-        }
-    }
-</script>

package/components/BTXUI/core/b-view/doc.ts

@@ -1,10 +0,0 @@
-export default {
-    name: "b-view", 
-    desc: ["该组件是用于布局的基础组件，相当于 html 中 div 的作用，可以接收 <code>class</code> 属性来应用框架样式体系。"],
-    extend: ["b-style"],
-    dependent: [], 
-    initData: [
-        ["class", "string", "参照：styles 组件入参"],
-        ["bgImg", "string", "背景图地址"]
-    ] 
-};

package/components/BTXUI/core/b-view/index.vue

@@ -1,20 +0,0 @@
-<template>
-    <styles :class="class">
-        <div :class="class"
-            :style="{backgroundImage: `url(${ bgImg })`}">
-            <slot/>
-        </div>
-    </styles>
-</template>
-
-<script setup lang="ts">
-    import styles from "@/components/BTXUI/core/styles/index.vue"
-
-    defineProps<{
-        // 样式集
-        class?: string,
-        
-        // 背景图
-        bgImg?: string,
-    }>()
-</script>

package/components/BTXUI/core/b-webview.vue

@@ -1,20 +0,0 @@
-<template>
-    <iframe width="100%" height="100%" frameborder="0" :src="src"></iframe>
-</template>
-
-<script>
-    export default {
-        name: "b-webview",
-        /*
-        * init-data{
-        *   src: "web 地址",
-        * }
-        * */
-        props: {
-            src: {
-                type: String,
-                required: true
-            },
-        }
-    }
-</script>

package/components/BTXUI/core/lib/ChapterLink.js

@@ -1,49 +0,0 @@
-class ChapterLink {
-    constructor(ani_speed=.2, offset=0, callback=null){
-        this.ani_speed = ani_speed;             //平移动画缓动速率：0 - 1，默认：0.2，0 为硬切换"
-        this.offset = offset;                   //位移偏移
-        this.callback = callback;               //滚动完成回调函数
-    }
-
-    //跳转指定 dom 章节
-    go_chapter(id){
-        let $chapter = document.querySelector("#" + id);
-        $chapter && this.go_top($chapter.offsetParent, $chapter.offsetTop + this.offset);
-    }
-
-    //跳转指定位置
-    go_top($box, top){
-        top = Math.min(Math.max(0, top), $box.scrollHeight - $box.offsetHeight); //校正滚动范围
-        if($box.nodeName === "BODY") $box = document.documentElement;
-        if(this.ani_speed > 0){ //平滑跳转
-            let offset;
-            this.$_stop_scroll();
-            ChapterLink.t = setInterval(()=>{
-                offset = (top - $box.scrollTop) * this.ani_speed;
-                if(offset === 0){
-                    this.$_scroll_over();
-                    return;
-                }
-                if(Math.abs(offset) < 1) offset = offset < 0? -1: 1;
-                $box.scrollTop += offset;
-            }, 17);
-        }else { //硬跳转
-            $box.scrollTop = top;
-        }
-    }
-
-    //终止滚动
-    $_stop_scroll(){
-        clearInterval(ChapterLink.t);
-    }
-
-    //滚动停止
-    $_scroll_over(){
-        this.$_stop_scroll();
-        this.callback && this.callback();
-    }
-}
-
-ChapterLink.t = null; //滚动计时器
-
-export default ChapterLink