btxui 1.0.2 → 1.0.3

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

@@ -1,146 +0,0 @@
-<template>
-    <b-view ref="tooltip" styles="fixed bg-none z9" v-show="visible">
-        <!--连线-->
-        <b-view :styles="`abs h-1px alpha-.5 shadow-sm color-rgba(40,40,40,.2) origin-left|center bg-${color_styles.bg} w-${line_len} rotate-${line_rotate}`"></b-view>
-
-        <!--文字内容-->
-        <b-view :styles="`rel pad-v-.7 pad-h-1.4 round-sm shadow line thick-1 color-neutral line-${color_styles.line} bg-${color_styles.bg} ${box_offset}`">
-            <b-text :styles="`color-${color_styles.text}`" v-html="text"></b-text>
-        </b-view>
-
-        <!--光标点-->
-        <b-view :styles="`abs alpha-.4 round w-1 h-1 l-f.5 t-f.5 bg-color-${color_styles.point}`"></b-view>
-    </b-view>
-</template>
-
-<script>
-    import BView from "@/components/BTXUI/core/b-view"
-    import BText from "@/components/BTXUI/core/b-text"
-
-    const desc = ["该组件用于悬浮显示 tooltip 提示框。"],
-        extend = [],
-        dependent = ["b-text", "b-view"],
-        api = {
-            methods: [
-                {
-                    name: "show",
-                    ef: "显示提示框",
-                    params: "text",
-                    return: "-"
-                },
-                {
-                    name: "hide",
-                    ef: "隐藏提示框",
-                    params: "-",
-                    return: "-"
-                },
-                {
-                    name: "set_pos",
-                    ef: "定位提示框",
-                    params: "x, y",
-                    return: "-"
-                }
-            ]
-        },
-        init_data = `{
-        /* colors: {
-            text: "文字颜色",
-            bg: "背景颜色",
-            line: "描边颜色",
-            point: "光标点颜色"
-        } */,
-        /* offset: {
-            x: "提示框水平偏移，默认：40",
-            y: "提示框垂直偏移，默认：-40",
-        }*/
-    }`;
-
-    export default {
-        name: "tooltip-wid",
-        introduce: { desc, extend, dependent, api, init_data },
-        components: {
-            BView,
-            BText
-        },
-        props: {
-            colors: {
-                type: Object,
-                required: false
-            },
-            offset: {
-                type: Object,
-                required: false,
-                default: ()=>{
-                    return {
-                        x: 40,
-                        y: -40
-                    }
-                }
-            },
-        },
-        data(){
-            const offset_x = this.offset.x,
-                offset_y = this.offset.y;
-
-            return {
-
-                //提示框显示状态
-                visible: false,
-
-                //提示内容
-                text: "",
-
-                //提示框偏移
-                box_offset: `l-${offset_x.toString().replace('-', 'f')}px t-${offset_y.toString().replace('-', 'f')}px`,
-
-                //连线旋转角度
-                line_rotate: (Math.atan2(offset_y + 4, offset_x + 4) * 180 / Math.PI).toString().replace("-", "f"),
-
-                //连线长度
-                line_len: Math.sqrt(Math.pow(offset_x, 2) + Math.pow(offset_y, 2)) + "px"
-
-            }
-        },
-        computed: {
-
-            //组件色彩风格
-            color_styles(){
-                return {
-                    line: "neutral",
-                    text: "dgray",
-                    bg: "light",
-                    point: "yellow",
-                    ...this.colors
-                }
-            },
-
-            //组件
-            tooltip(){
-                return this.$refs.tooltip;
-            }
-
-        },
-        methods: {
-
-            //显示提示框
-            show(text){
-                if(this.visible === false){
-                    this.visible = true;
-                    this.text = text;
-                }
-            },
-
-            //隐藏提示框
-            hide(){
-                if(this.visible === true) this.visible = false;
-            },
-
-            //位移提示框
-            set_pos(x, y){
-                this.tooltip.append_state(`l-${x}px t-${y}px`, "move");
-                this.tooltip.toggle_style("move");
-            }
-
-        }
-    }
-</script>

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

@@ -1,215 +0,0 @@
-<template>
-    <b-view styles="flex">
-        <btn-wid @on_click="$_upload" v-bind="btn_data" />
-        <input type="file" style="display: none" ref="uploader" @change="$_exe_upload" :multiple="multiple"/>
-    </b-view>
-</template>
-
-<script>
-    import BView from "@/components/BTXUI/core/b-view"
-    import BtnWid from "@/components/BTXUI/btn/btn-wid"
-
-    const desc = ["该组件用于文件上传操作，分为 “直接上传” 和 “间接（后续）上传” 2 类流程。", {
-            cover: "upload-wid.png",
-            title: "执行机制原理"
-        }],
-        extend = [],
-        dependent = ["btn-wid", "b-view"],
-        api = {
-            event: [
-                {
-                    name: "on_error",
-                    ef: "上传失败",
-                    params: "error_code"
-                },
-                {
-                    name: "on_change",
-                    ef: "上传文件改变",
-                    params: "files"
-                }
-            ]
-        },
-        init_data = `{
-        /* uploadApi: "直接上传接口" */,
-        /* formData: {
-            "其它数据字段": "数据值",...
-        } */,
-        /* remoteFileBaseURL: 上传文件地址根目录" */,
-        /* remoteFiles: "(model) 上传文件地址集" */,
-        /* type: "上传类型，数组格式，支持：jpg、png、text...，默认为所有类型" */,
-        /* size: "大小限制，默认：2M" */,
-        /* multiple: "是否多文件上传，默认 false" */,
-        /* btnData: "(参照：btn-wid 组件入参)" */
-    }`;
-
-    export default {
-        name: "upload-wid",
-        introduce: { desc, extend, dependent, api, init_data },
-        components: {
-            BtnWid,
-            BView
-        },
-        model: {
-            prop: "remoteFiles",
-            event: "on_success"
-        },
-        props: {
-            uploadApi: {
-                type: String,
-                required: false
-            },
-            formData: {
-                type: Object,
-                required: false
-            },
-            remoteFileBaseURL: {
-                type: String,
-                required: false,
-                default: '',
-            },
-            remoteFiles: {
-                type: [Array, String],
-                required: false,
-                default: ()=>[]
-            },
-            type: {
-                type: Array,
-                required: false
-            },
-            size: {
-                type: Number,
-                required: false,
-                default: 1024 * 1024 * 2
-            },
-            multiple: {
-                type: Boolean,
-                required: false
-            },
-            btnData: {
-                type: Object,
-                required: false
-            }
-        },
-        data(){
-            return {
-
-                //上传按钮
-                btn_data: {
-                    btnText: "上传",
-                    ...this.btnData,
-                },
-
-                //上传资源集合
-                upload_file: {
-                    files: null,
-                    form_data: new FormData(),
-                },
-
-            }
-        },
-        computed: {
-
-            //上传文件
-            remote_files(){
-                const files = this.remoteFiles;
-                const remoteFileBaseURL = this.remoteFileBaseURL;
-                if(!files) return null;
-                if(typeof(files) === "string") { // 单文件
-                    return [`${remoteFileBaseURL}${files}`]
-                } else { // 多文件
-                    return files.map(file => `${remoteFileBaseURL}${file}`);
-                }
-            },
-
-            //上传元素
-            uploader(){
-                return this.$refs.uploader;
-            }
-
-        },
-        methods: {
-
-            //发送上传数据
-            send_upload_data(){
-                for(let key in this.formData){
-                    this.upload_file.form_data.append(key, this.formData[key]);
-                }
-                this.$axios({
-                    method: 'post',
-                    url: this.uploadApi,
-                    data: this.upload_file.form_data,
-                    headers: {
-                        'Content-Type': 'multipart/form-data'
-                    }
-                }).then(res => {
-                    let datas = res.data.datas;
-                    if(datas){
-                        if(res.data.error > 0){ //上传数据有误
-                            this.$confirm.toast(res.data.datas, 2000, "fail");
-                            this.$emit("on_error", res.data.error);
-                        }else{ //上传成功
-                            this.uploader.value = "";
-                            this.remoteFiles.length = 0;
-                            datas.forEach(url=>{
-                                this.remoteFiles.push(`${url}?tmp=${Math.round(Math.random() * 1000)}`);
-                            })
-                            this.$emit("on_success", this.remoteFiles);
-                        }
-                    }else{
-                        this.$confirm.toast("上传服务有误!", 2000, "fail");
-                    }
-                })
-            },
-
-            //点击上传
-            $_upload(){
-                this.uploader.click();
-            },
-
-            //执行上传
-            $_exe_upload(e){
-                this.upload_file.files = e.currentTarget.files; //表单数据
-                this.$emit("on_change", this.upload_file.files);
-
-                //上传文件验证
-                if(this.$_size_check() || (this.type && this.$_type_check())){
-                    e.currentTarget.value = null;
-                    return;
-                };
-
-                //直接上传
-                if(this.uploadApi){
-                    for(let i=0; i<this.upload_file.files.length; i++){
-                        this.upload_file.form_data.append(`file_${i}`, this.upload_file.files[i]);
-                    }
-                    this.send_upload_data();
-                }
-            },
-
-            //类型检测
-            $_type_check(){
-                let type,
-                    name,
-                    result = [].some.call(this.upload_file.files, (file=>{
-                        name = file.name;
-                        type = name.split(".").pop();
-                        return !this.type.includes(type);
-                    }));
-                result && this.$confirm.toast(`${name} 类型有误!`, 2000, "fail");
-                return result;
-            },
-
-            //大小检测
-            $_size_check(){
-                let name,
-                    result = [].some.call(this.upload_file.files, (file=>{
-                        name = file.name;
-                        return file.size > this.size;
-                    }));
-                result && this.$confirm.toast(`${name} 尺寸超过限制!`, 2000, "fail");
-                return result;
-            }
-
-        }
-    }
-</script>

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

@@ -1,166 +0,0 @@
-<template>
-    <b-view styles="rel">
-        <b-grid v-bind="grid_data">
-            <b-view v-for="img of show_imgs" :id="img.item_id" :key="img.item_id"
-                    ref="item"
-                    :styles="`abs mrg-b-0 pad-7px trans-fast t-${img.item_top} l-${img.item_left}`">
-                <b-img styles="flex round-sm round-t" :img="img.src" :title="img.title" />
-                <b-view styles="pad-1">
-                    hello world
-                </b-view>
-            </b-view>
-        </b-grid>
-    </b-view>
-</template>
-
-<script>
-    import BView from "@/components/BTXUI/core/b-view"
-    import BImg from "@/components/BTXUI/core/b-img"
-    import BGrid from "@/components/BTXUI/core/b-grid"
-
-    const desc = ["该组件用于瀑布流方式展示内容。"],
-        extend = [],
-        dependent = ["b-img", "b-view", "b-grid"],
-        api = null,
-        init_data = `{
-        /* uploadApi: "直接上传接口" */,
-        /* remoteFiles: "(model) 上传文件地址集" */,
-    }`;
-
-    export default {
-        name: "waterfall-wid",
-        introduce: { desc, extend, dependent, api, init_data },
-        components: {
-            BView,
-            BImg,
-            BGrid
-        },
-        props: ["init-data"],
-        data(){
-            return {
-
-                //网格参数
-                grid_data: {
-                    colData: {
-                        common_plan: "col-3 col-4-m col-6-s"
-                    }
-                },
-
-                /*图片公共根路径*/
-                common_path_root: "",
-
-                /*全部图片*/
-                imgs: [],
-
-                /*显示图片*/
-                show_imgs: [],
-
-                //细分列数（最多 4 列）
-                cols: 4,
-
-                /*瀑布流定位计算数据结构*/
-                pos_data: null,
-
-                /*重置大小定时器*/
-                resize_t: null
-
-            }
-        },
-        computed: {
-
-            //响应式宽度
-            cols(val){
-                return `col-${12 / this.cols}`;
-            }
-
-        },
-        methods: {
-
-            /*加载图片*/
-            load_img(index){
-                let img = this.imgs[index];
-                if(!img) return;
-                let $img = new Image(),
-                    pos;
-                $img.onload = ()=>{
-                    pos = this._computed_pos_data();
-                    this.show_imgs.push({
-                        title: img.title,
-                        src: $img.src,
-                        item_left: pos.min_top_index * 1/this.cols * 100 + "%",
-                        item_top: pos.min_top + "px",
-                        item_id: img.id
-                    });
-                    this.$nextTick(()=>{
-                        this.pos_data[pos.min_top_index] += this.$el.querySelector("#" + img.id).clientHeight;
-                        this.load_img(++index);
-                    })
-                }
-                $img.src = this.common_path_root + img.src;
-            },
-
-            /*追加显示图片*/
-            append_imgs(imgs){
-                let start_index = this.imgs.length;
-                this.imgs = this.imgs.concat(imgs);
-                this.load_img(start_index);
-            },
-
-            /*列设置*/
-            set_cols(num){
-                this.cols = Math.max(Math.min(num, 5), 2);
-                this._resize();
-            },
-
-            //【内部方法】---------------------------------------------------------------------
-
-            /*基于列数设置瀑布流定位计算数据结构*/
-            _reset_pos_data(){
-                this.pos_data = [];
-                for(let i=0; i<this.cols; i++){
-                    this.pos_data.push(0);
-                }
-            },
-
-            /*resize*/
-            _resize(){
-                clearTimeout(this.resize_t);
-                let pos;
-                this.resize_t = setTimeout(()=>{
-                    this._reset_pos_data();
-                    this.$refs.item.forEach(($item, i) => {
-                        pos = this._computed_pos_data();
-                        this.show_imgs[i].item_top = pos.min_top + "px";
-                        this.show_imgs[i].item_left = pos.min_top_index * 1/this.cols * 100 + "%";
-                        this.pos_data[pos.min_top_index] += $item.$el.clientHeight;
-                    })
-                }, 1000)
-            },
-
-            /*瀑布流定位计算*/
-            _computed_pos_data(){
-                let min_top = this.pos_data[0],
-                    min_top_index = 0;
-                this.pos_data.forEach((pos, i) => {
-                    if(pos < min_top){
-                        min_top = pos;
-                        min_top_index = i;
-                    }
-                })
-                return {
-                    min_top,
-                    min_top_index
-                }
-            },
-
-        },
-        mounted(){
-            window.onresize = this._resize;
-            this.common_path_root = this.initData.common_path_root;
-            this.imgs = this.initData.imgs;
-            this.cols = this.initData.cols || 2;
-            this._reset_pos_data();
-            this.load_img(0);
-        }
-    }
-</script>

package/components/header-info.vue

@@ -1,167 +0,0 @@
-<template>
-    <section>
-        <div>
-            <h5><code>{{ name }}</code></h5>
-            <template v-for="item of desc">
-                <!--图片-->
-                <div v-if="(item as Desc).cover">
-                    <img :src="require(`@/assets/img/mechanism/${(item as Desc).cover}`)"
-                         class="round-sm"/>
-                    <div class="pcenter">
-                        <span class="line-b thick-1 line-lgray pad-b-d5 fsize-d9">{{(item as Desc).title}}</span>
-                    </div>
-                </div>
-
-                <!--文字-->
-                <p v-else v-html="item"></p>
-            </template>
-            <p v-if="extend.length">组件继承：<code v-for="ext of extend">{{ ext }}</code></p>
-            <p v-if="dependent.length">组件依赖：<code v-for="dep of dependent">{{ dep }}</code></p>
-            <p>组件初始化入参：</p>
-            <table class="table">
-                <thead>
-                <tr>
-                    <th>属性</th>
-                    <th>类型</th>
-                    <th>说明</th>
-                </tr>
-                </thead>
-                <tbody>
-                <tr v-for="item of initData">
-                    <td class="bold">
-                        {{ item[0] }}
-                    </td>
-                    <td>
-                        <code>{{ item[1] }}</code>
-                    </td>
-                    <td>
-                        {{ item[2] }}
-                    </td>
-                </tr>
-                </tbody>
-            </table>
-            <hr>
-        </div>
-
-        <div v-if="api">
-            <h5>组件 API：</h5>
-
-            <!--属性-->
-            <table v-if="api.props" class="table">
-                <thead>
-                <tr>
-                    <th>属性</th>
-                    <th>意义</th>
-                </tr>
-                </thead>
-                <tbody>
-                <tr v-for="prop of api.props">
-                    <td>
-                        <code>{{prop.name}}</code>
-                    </td>
-                    <td>{{prop.ef}}</td>
-                </tr>
-                </tbody>
-            </table>
-
-            <!--方法-->
-            <table v-if="api.methods" class="table">
-                <thead>
-                <tr>
-                    <th class="ellipsis">方法</th>
-                    <th class="ellipsis">效果</th>
-                    <th class="ellipsis">参数</th>
-                    <th class="ellipsis">返回值</th>
-                </tr>
-                </thead>
-                <tbody>
-                <tr v-for="method of api.methods">
-                    <td>
-                        <code>{{ method.name }}</code>
-                    </td>
-                    <td>{{ method.ef }}</td>
-                    <td v-html="method.params"></td>
-                    <td>
-                        <code v-if="method.return !== '-'">{{ method.return }}</code>
-                        <span v-else>-</span>
-                    </td>
-                </tr>
-                </tbody>
-            </table>
-
-            <!--事件-->
-            <table v-if="api.event" class="table">
-                <thead>
-                <tr>
-                    <th>事件</th>
-                    <th>触发</th>
-                    <th>回调参数</th>
-                </tr>
-                </thead>
-                <tbody>
-                <tr v-for="event of api.event">
-                    <td>
-                        <code>{{ event.name }}</code>
-                    </td>
-                    <td>{{ event.ef }}</td>
-                    <td>
-                        <code v-if="event.name !== '-'">{{ event.params }}</code>
-                        <span v-else>-</span>
-                    </td>
-                </tr>
-                </tbody>
-            </table>
-
-            <!--继承文字-->
-            <div v-if="api.extend">
-                <p v-html="api.extend"></p>
-                <hr>
-            </div>
-
-        </div>
-        <p></p>
-    </section>
-</template>
-
-<script setup lang="ts">
-    type Desc = {
-        cover: string,
-        title: string
-    }
-    defineProps<{
-        // 组件名
-        name: string,
-
-        // 组件介绍
-        desc: Array<string | Desc>,
-
-        // 组件继承
-        extend: Array<string>,
-
-        // 组件依赖
-        dependent: Array<string>,
-
-        // API
-        api?: {
-            extend: string,
-            props: Array<{
-                name: string,
-                ef: string
-            }>,
-            event: Array<{
-                name: string,
-                ef: string,
-                params: string
-            }>,
-            methods: Array<{
-                name: string,
-                ef: string,
-                params: string,
-                return: string
-            }>
-        },
-
-        // 组件初始化入参
-        initData?: Array<Array<string>>,
-    }>()
-</script>

package/composables/@types.ts

@@ -1,4 +0,0 @@
-export interface StaticArticles {
-    title: string,
-    content: string
-}