btxui 1.0.1

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

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

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

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

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

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

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

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

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

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

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