btxui 1.0.1

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

@@ -0,0 +1,258 @@
+<template>
+    <div :style="{...computed_style, cursor: 'move', visibility: drag_state? 'hidden': 'visible', position: freeDrag? 'absolute': '', left: `${move_pos.x}px`, top: `${move_pos.y}px`}"
+         :draggable="!freeDrag"
+         @mousedown = "$_act_target" @touchstart = "$_act_target">
+        <div :style="{pointerEvents: `${drag_state? 'auto': 'none'}`}">
+            <slot/>
+        </div>
+    </div>
+</template>
+
+<script>
+
+    let desc = ["该组件用于包裹元素以实现拖拽效果。"],
+        extend = ["b-style"],
+        dependent = [],
+        api = {
+            event: [
+                {
+                    name: "on_drag_start",
+                    ef: "开始拖拽",
+                    params: "event"
+                },
+                {
+                    name: "on_drag_move",
+                    ef: "拖拽移动",
+                    params: "event"
+                },
+                {
+                    name: "on_drag_end",
+                    ef: "结束拖拽",
+                    params: "event"
+                },
+                {
+                    name: "on_drag_over",
+                    ef: "拖拽预备放入",
+                    params: "event"
+                },
+                {
+                    name: "on_drag_leave",
+                    ef: "拖拽离开容器",
+                    params: "event"
+                },
+                {
+                    name: "on_drop",
+                    ef: "完成放入",
+                    params: "{you, me}, event"
+                },
+                {
+                    name: "on_move",
+                    ef: "拖动位移",
+                    params: "move_pos, move_area"
+                }
+            ]
+        },
+        init_data = `{
+        /* styles: "(参照：b-style 组件入参)" */,
+        /* dataInfo: "绑定数据，缺省则传递元素自身" */,
+        /* dragStart: "拖拽起始状态样式值" */,
+        /* dragOver: "拖拽预备放入状态样式值" */,
+        /* freeDrag: "自由拖动，默认为 false" */,
+    }`;
+
+    export default {
+        name: "b-drag",
+        introduce: { desc, extend, dependent, api, init_data },
+        props: {
+            dataInfo: {
+                type: Object,
+                required: false,
+                default: ()=>{
+                    return {}
+                }
+            },
+            dragStart: {
+                type: String,
+                required: false,
+                default: ""
+            },
+            dragOver: {
+                type: String,
+                required: false,
+                default: "bg-color-neutral color-rgba(20,20,20,.7) round-sm"
+            },
+            freeDrag: {
+                type: Boolean,
+                required: false
+            },
+        },
+        data(){
+            return {
+
+                //拖拽状态
+                drag_state: false,
+
+                //拖动状态
+                move_state: false,
+
+                //自由拖动当前位置
+                move_cur_pos: null,
+
+                //自由拖动显示位置
+                move_pos: {
+                    x: "auto",
+                    y: "auto"
+                },
+
+                //自由拖动起始点位置
+                move_start_point_pos: {
+                    x: 0,
+                    y: 0
+                },
+
+                //自由拖动区域限制
+                move_area: null
+
+            }
+        },
+        methods: {
+
+            //事件绑定
+            $_bind_event(){
+                const $el = this.$el;
+                if(this.freeDrag){ //自由拖动
+                    $el.ontouchmove = this.$_free_move;
+                    $el.onmouseup = this.$_free_move_end;
+                    $el.ontouchend = this.$_free_move_end;
+                }else { //拖拽事件
+                    $el.ondragstart = this.$_drag_start;
+                    $el.ondrag = this.$_drag_move;
+                    $el.ondragend = this.$_drag_end;
+                    $el.ondragover = this.$_drag_over;
+                    $el.ondragleave = this.$_drag_leave;
+                    $el.ondrop = this.$_drop;
+                }
+            },
+
+            //按下（激活）拖拽目标
+            $_act_target(e){
+                this.toggle_style('drag_start');
+                if(this.freeDrag){
+                    e.preventDefault();
+                    const $el = this.$el,
+                        $offset_parent = $el.offsetParent;
+                    if(!this.move_cur_pos) {
+                        this.move_pos = this.move_cur_pos = {
+                            x: $el.offsetLeft,
+                            y: $el.offsetTop
+                        };
+                    }
+                    if(!this.move_area) this.move_area = {
+                        x: $offset_parent.clientWidth - $el.offsetWidth,
+                        y: $offset_parent.clientHeight - $el.offsetHeight
+                    }
+                    this.move_start_point_pos = {
+                        x: e.screenX,
+                        y: e.screenY
+                    }
+
+                    //动态事件绑定
+                    if(!$offset_parent.onmousemove) $offset_parent.onmousemove = this.$_free_move;
+                    if(!$offset_parent.onmouseleave) $offset_parent.onmouseleave = this.$_free_move_end;
+
+                    this.move_state = true;
+                }
+            },
+
+            //拖拽开始
+            $_drag_start(e){
+                this.$emit("on_drag_start", e);
+                e.dataTransfer.setData("info", e.target.dataset.info);
+            },
+
+            //拖拽移动
+            $_drag_move(e){
+                e.preventDefault();
+                this.drag_state = true;
+            },
+
+            //拖拽结束
+            $_drag_end(e){
+                this.drag_state = false;
+                this.$emit("on_drag_end", e);
+                this.reset_style();
+            },
+
+            //拖拽预备放入
+            $_drag_over(e){
+                e.preventDefault();
+                this.$emit("on_drag_over", e);
+                this.toggle_style("drag_over");
+            },
+
+            //拖拽离开容器
+            $_drag_leave(e){
+                this.$emit("on_drag_leave", e);
+                this.reset_style();
+            },
+
+            //完成放入
+            $_drop(e){
+                this.$emit("on_drop", {
+                    you: JSON.parse(e.dataTransfer.getData("info")),
+                    me: JSON.parse(this.$el.dataset.info)
+                }, e);
+                this.reset_style();
+            },
+
+            //自由拖动
+            $_free_move(e){
+                if(this.move_state){
+                    const orig_pos = this.move_start_point_pos,
+                        cur_pos = this.move_cur_pos,
+                        rel_x = e.screenX - orig_pos.x,
+                        rel_y = e.screenY - orig_pos.y,
+                        move_area = this.move_area;
+                    let move_pos_x = cur_pos.x + rel_x,
+                        move_pos_y = cur_pos.y + rel_y;
+
+                    //区域限制
+                    if(move_pos_x < 0) move_pos_x = 0;
+                    if(move_pos_y < 0) move_pos_y = 0;
+                    if(move_pos_x > move_area.x) move_pos_x = move_area.x;
+                    if(move_pos_y > move_area.y) move_pos_y = move_area.y;
+
+                    this.move_pos = {
+                        x: move_pos_x,
+                        y: move_pos_y,
+                    }
+                    this.$emit("on_move", this.move_pos, move_area);
+                }
+            },
+
+            //自由拖动结束
+            $_free_move_end(){
+                if(this.move_state){
+                    this.reset_style();
+                    this.move_state = false;
+                    this.move_cur_pos = this.move_pos;
+                }
+            },
+
+        },
+        watch: {
+
+            //数据更新
+            dataInfo(){
+                this.$el.dataset.info = JSON.stringify(this.dataInfo);
+            }
+
+        },
+        mounted(){
+            this.append_state(this.dragStart, "drag_start");
+            this.append_state(this.dragOver, "drag_over");
+            this.$el.dataset.info = JSON.stringify(this.dataInfo);
+            this.$_bind_event();
+        }
+    }
+</script>

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

@@ -0,0 +1,84 @@
+<template>
+    <b-view :styles="`${styles} rel`">
+        <!--容器描边-->
+        <b-view styles="abs max bg-none z1 t-0 l-0"
+                :states="{
+                    line: {
+                        style: `line line-${outlineColor} thick-${line[1] + 1}`,
+                        state: outlineColor
+                    }
+                }">
+        </b-view>
+
+        <!--网格-->
+        <b-view styles="grid">
+            <b-view v-for="(item,i) of colData.items" :key="i"
+                    :class="colData.common_plan || item.plan"
+                    :styles="`rel line-b line-r line-${line[0]} thick-${line[1]} h-${gridHeight} pad-${gap}`">
+                <slot :name="item.id || item.Id" />
+            </b-view>
+        </b-view>
+    </b-view>
+</template>
+
+<script>
+    import BView from "./b-view";
+
+    let desc = ["该组件可用于实现响应式栅格布局。"],
+        extend = [],
+        dependent = ["b-view"],
+        api = null,
+        init_data = `{
+        colData: {
+            items: [
+                {
+                    id|Id: "单元格 id",
+                    plan: "局部栅格方案，可参考栅格系统全局样式 .col-*",
+                    ....
+                },...
+            ],
+            common_plan: "公共栅格方案，可参考栅格系统全局样式 .col-*"
+        },
+        /* styles: "(参照：b-style 组件入参)" */,
+        /* gridHeight: "栅格固定高度" */,
+        /* gap: "栅格内边距，默认为 0" */,
+        /* line: ["网格描边颜色", "网格描边粗细"] */,
+        /* outlineColor: "容器描边色" */,
+    }`;
+
+    export default {
+        name: "b-grid",
+        introduce: { desc, extend, dependent, api, init_data },
+        components: {
+            BView
+        },
+        props: {
+            colData: {
+                type: Object,
+                required: true
+            },
+            styles: {
+                type: String,
+                required: false
+            },
+            gap: {
+                type: [Number, String],
+                required: false,
+                default: 0
+            },
+            gridHeight: {
+                type: [Number, String],
+                required: false
+            },
+            line: {
+                type: Array,
+                required: false,
+                default: () => ["none", 0]
+            },
+            outlineColor: {
+                type: String,
+                required: false
+            },
+        }
+    }
+</script>

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

@@ -0,0 +1,171 @@
+<template>
+    <a @click="$_click" @dblclick="$_dblclick"
+       @touchstart="$_enter" @touchend="$_leave"
+       @mousemove="$emit('on_move', $event)"
+       :href="url"
+       :target="target"
+       :download="download"
+       :style="computed_style" >
+        <slot />
+    </a>
+</template>
+
+<script>
+    import ChapterLink from "./lib/ChapterLink"
+
+    let desc = ["该组件用于实现热点交互操作。"],
+        extend = ["b-style"],
+        dependent = ["ChapterLink"],
+        api = {
+            event: [
+                {
+                    name: "on_click",
+                    ef: "左键单击",
+                    params: "event",
+                },
+                {
+                    name: "on_dblclick",
+                    ef: "左键双击",
+                    params: "event",
+                },
+                {
+                    name: "on_enter",
+                    ef: "鼠标移入或手指按下（悬停）",
+                    params: "event",
+                },
+                {
+                    name: "on_leave",
+                    ef: "鼠标移出或手指抬起",
+                    params: "event",
+                },
+                {
+                    name: "on_move",
+                    ef: "鼠标移动",
+                    params: "event",
+                }
+            ]
+        },
+        init_data = `{
+        /* styles: "(参照：b-style 组件入参)" */,
+        /* link: "外部链接 | 组件路由 | 手机拨号 | {
+            chapter_id: "内部链接元素 id",
+            chapter_link_data: "(参照：ChapterLink 类构造函数)"
+        } | {
+            download: "下载文件名",
+            res: "下载资源地址"
+        }" */,
+        /* hover: "悬停样式值" */,
+        /* forbid: "鼠标点击事件及链接禁用，默认 false，不禁用" */,
+        /* newFrame: "强制开启新窗口，默认 false" */,
+    }`;
+
+    export default {
+        name: "b-hot",
+        introduce: { desc, extend, dependent, api, init_data },
+        props: {
+            link: {
+                type: [String, Object],
+                required: false
+            },
+            hover: {
+                type: String,
+                required: false
+            },
+            forbid: {
+                type: Boolean,
+                required: false
+            },
+            newFrame: {
+                type: Boolean,
+                required: false
+            },
+        },
+        data(){
+            return {
+
+                //链接开启方式
+                target: this.newFrame? "_blank": null,
+
+                //下载地址
+                download: null,
+
+                //内链控制器
+                chapter_link: this.$_init_chapter_link(),
+
+            }
+        },
+        computed: {
+
+            //链接地址
+            url(){
+                if(this.forbid) return false; //禁用效果
+                let link = this.link;
+                if(!link) return "javascript:;"
+                if(typeof(link) === "string"){
+                    if(link.search("http") === 0){ //外部链接
+                        this.target = "_blank";
+                        return link;
+                    }else if(link.search("/") === 0){ //组件路由
+                        return (this.$router.mode === "history"? "": "#") + link;
+                    }else if(link.search(/^(tel|mailto):/) === 0){ //手机拨号 | 邮件
+                        return link;
+                    }
+                } else{
+                    if(link.download){ //文件下载
+                        this.download = link.download;
+                        return link.res;
+                    }else { //内部链接
+                        return `#${this.$route.path}`;
+                    }
+                }
+            },
+
+        },
+        methods: {
+
+            //初始化内链控制器
+            $_init_chapter_link(){
+                if(this.link && this.link.chapter_id){
+                    let {ani_speed, offset, callback} = this.link.chapter_link_data || {};
+                    return new ChapterLink(ani_speed, offset, callback);
+                }else {
+                    return null;
+                }
+            },
+
+            //执行点击
+            $_click(e){
+                e.stopPropagation();
+                !this.forbid && this.$emit("on_click", e);
+                this.chapter_link && this.chapter_link.go_chapter(this.link.chapter_id); //内部链接
+            },
+
+            //执行双击
+            $_dblclick(e){
+                e.stopPropagation();
+                !this.forbid && this.$emit("on_dblclick", e);
+                this.target && this.reset_style();
+            },
+
+            //鼠标移入|触控开始
+            $_enter(e){
+                !this.cur_states.length && this.toggle_style("hover"); //仅限默认状态下
+                this.$emit("on_enter", e);
+            },
+
+            //鼠标移出|触控结束
+            $_leave(e){
+                this.cur_states[0] === "hover" && this.reset_style(); //仅限 hover 状态下
+                this.$emit("on_leave", e);
+            },
+
+        },
+        mounted(){
+            if(document.createElement("div").ontouchstart !== null) {
+                this.$el.onmouseenter = this.$_enter;
+                this.$el.onmouseleave = this.$_leave;
+            }
+            this.append_state(this.hover, "hover");
+        }
+    }
+</script>

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

@@ -0,0 +1,76 @@
+<!--
+ * @Author: btxstudio btxstudio@163.com
+ * @Date: 2023-10-28 13:53:44
+ * @LastEditors: btxstudio btxstudio@163.com
+ * @LastEditTime: 2023-11-22 15:44:47
+ * @FilePath: \BTXUI\components\BTXUI\core\b-icon.vue
+ * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
+-->
+<template>
+    <!--动态图标-->
+    <b-view v-if="icon && icon.search('ani_') === 0" :style="computed_style">
+        <!--success-->
+        <ani-success v-if="icon === 'ani_success'" key="success" />
+
+        <!--fail-->
+        <ani-fail v-if="icon === 'ani_fail'" key="fail" />
+
+        <!--notic-->
+        <ani-notic v-if="icon === 'ani_notic'" key="notic" />
+
+        <!--loading-->
+        <ani-loading v-if="icon === 'ani_loading'" key="loading"  />
+    </b-view>
+
+    <!--字体图标-->
+    <i v-else-if="icon" :class="`ico-${icon}`" :style="computed_style"></i>
+
+    <!--图片图标-->
+    <b-view v-else-if="bgImg" :bg-img="bgImg" :style="computed_style" />
+</template>
+
+<script>
+    import BView from "./b-view";
+    import BText from "./b-text";
+    import AniSuccess from "./anis/ani-success";
+    import AniFail from "./anis/ani-fail";
+    import AniNotic from "./anis/ani-notic";
+    import AniLoading from "./anis/ani-loading";
+
+    let desc = ["该组件用于显示图标，包括 “字体图标”、“图片图标”、“css 动画图标”。"],
+        extend = ["b-style"],
+        dependent = ["b-view", "b-text", "ani-success", "ani-fail", "ani-notic", "ani-loading"],
+        api = null,
+        init_data = `{
+        /* styles: "(参照：b-style 组件入参)" */,
+        /* icon: "字体图标名（无需 ico 前缀）| 动态图标（ani_success、ani_fail、ani_notic）" */,
+        /* bgImg: "图片地址" */,
+    }`;
+
+    export default {
+        name: "b-icon",
+        introduce: { desc, extend, dependent, api, init_data },
+        components: {
+            BView,
+            BText,
+            AniSuccess,
+            AniFail,
+            AniNotic,
+            AniLoading
+        },
+        props: {
+            icon: {
+                type: String,
+                required: false
+            },
+            imgData: {
+                type: Object,
+                required: false
+            },
+            bgImg: {
+                type: String,
+                required: false
+            }
+        }
+    }
+</script>

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

@@ -0,0 +1,84 @@
+<template>
+    <img :src="src" :style="{...computed_style, objectFit: objFit}" :alt="alt">
+</template>
+
+<script>
+
+    let desc = ["该组件用于实现图片显示。"],
+        extend = ["b-style"],
+        dependent = [],
+        api = {
+            event: [
+                {
+                    name: "on_load",
+                    ef: "图片加载完成",
+                    params: "-",
+                }
+            ]
+        },
+        init_data = `{
+        img: "图像资源",
+        /* styles: "(参照：b-style 组件入参)" */,
+        /* objFit: "object-fit 样式值，默认：cover" */,
+        /* defaultSrc: "默认图，加载失败或初始加载时显示" */,
+        /* alt: "图片说明提示" */
+    }`;
+
+    export default {
+        name: "b-img",
+        introduce: { desc, extend, dependent, api, init_data },
+        props: {
+            img: {
+                type: String,
+                required: false
+            },
+            objFit: {
+                type: String,
+                required: false,
+                default: "cover"
+            },
+            defaultSrc: {
+                type: String,
+                required: false
+            },
+            alt: {
+                type: String,
+                required: false
+            }
+        },
+        data(){
+            return {
+
+                //图像显示地址
+                src: this.defaultSrc,
+
+            }
+        },
+        watch: {
+
+            //监听图像源
+            img(){
+                this.$_load();
+            }
+
+        },
+        methods: {
+
+            //图像源加载
+            $_load(){
+                if(this.img && (this.img.match(/\.(jpg|png|gif|jpeg)/) || this.img.search("data:image/png;base64") === 0)){
+                    const img = new Image();
+                    img.onload = ()=>{
+                        this.src = this.img;
+                        this.$emit("on_load");
+                    }
+                    img.src = this.img;
+                }
+            }
+
+        },
+        mounted(){
+            this.$_load();
+        }
+    }
+</script>