btxui 1.0.1 → 1.0.3

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

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

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

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

@@ -1,76 +0,0 @@
-<!--
- * @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

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