btxui 1.0.2 → 1.0.5

package/components/BTXUI/core/lib/Search.vue

@@ -1,60 +0,0 @@
-<script>
-    export default {
-        name: "Search",
-        /*
-        * init-data{
-        *   [* data-mode: "搜索模式: input、change"],
-        *   [* data-notic: "搜索提示"],
-        * }
-        * */
-        props: {
-            dataMode: {
-                type: String,
-                required: false
-            },
-            dataNotic: {
-                type: String,
-                required: false
-            }
-        },
-        data() {
-            return {
-
-                //搜索内容
-                search_text: "",
-
-                //input 模式搜索计时器
-                t: null,
-
-            }
-        },
-        methods: {
-
-            //清空输入内容
-            clear_text(){
-                this.search_text = "";
-            },
-
-            //搜索
-            $_search(e) {
-                if (this.dataMode === "input") { //input 模式（搜索缓冲时间间隔：1s）
-                    clearTimeout(this.t)
-                    this.t = setTimeout(() => {
-                        this.search_text = e.target.value;
-                        this.$emit("on_search", this.search_text);
-                    }, 1000)
-                } else { //change 模式
-                    this.$emit("on_search", this.search_text);
-                }
-            },
-
-            //修正 webview 软键盘偏移页面 bug
-            $_debug_webview(){
-                setTimeout(() => {
-                    window.scrollTo(0, 0);
-                }, 0);
-            }
-
-        }
-    }
-</script>

package/components/BTXUI/core/styles/doc.ts

@@ -1,55 +0,0 @@
-export default {
-    name: "b-style", 
-    desc: [
-        "BTX·UI 推荐使用组件取代全局样式作为前端视图层开发的基础，秉持组件复用而非样式复用可以让开发更为高效且易于管理。框架在组件分层设计上分为了 “基础组件”、“应用组件”、“主题组件”。",
-        "<code>b-style</code> 是样式处理的底层模块，所有基础组件均继承自该模块，可通过 <b>styles</b> 属性进行样式绑定，其样式规范，基于并扩展 BTX·UI 全局样式语法，因此可以像添加标签类属性那样进行样式设置，目的是为了让 web 和 webApp 在样式语法上尽可能的统一。",
-        {
-            cover: "b-style.png",
-            title: "样式解析机制原理"
-        },
-        "【exp】：",
-        "class 全局样式：<code>&lt;div class=\"pright fsize-1d5\"&gt;hello world&lt;/div&gt;</code>",
-        "styles 组件样式：<code>&lt;b-view styles=\"pright fsize-1.5\"&gt;hello world&lt;/b-view&gt;</code>",
-        "组件样式使用时需要注意两点：",
-        "<b>1.</b> 部分样式值添加顺序会影响样式优先级，比如添加上侧圆角样式，应该先设置尺寸，再设置方向，否则方向设置会被覆盖而无效。<br>【exp】：<code>&lt;b-view styles=\"round-sm round-t\"&gt;&lt;/b-view&gt;</code>",
-        "<b>2.</b> 部分样式值需要通过组件结构嵌套进行复合使用，比如同时添加模糊和低明度滤镜样式。<br>【exp】：<code>&lt;b-view styles=\"blur-sm\"&gt;&lt;b-view styles=\"dark-sm\"&gt;&lt;/b-view&gt;&lt;/b-view&gt;</code>"
-        ],
-    extend: [],
-    dependent: [], 
-    api: {
-        methods: [
-            {
-                name: "toggle_style",
-                ef: "切换状态样式",
-                params: "states",
-                return: "-"
-            },
-            {
-                name: "reset_style",
-                ef: "恢复原始样式",
-                params: "-",
-                return: "-"
-            },
-            {
-                name: "has_state",
-                ef: "判断是否具备某项样式状态",
-                params: "state",
-                return: "bool"
-            },
-            {
-                name: "append_state",
-                ef: "追加样式状态",
-                params: "styles, state",
-                return: "-"
-            }
-        ]
-    }, 
-    init_data: `{
-        /* styles: "样式值规范" */,
-        /* states: {
-            state: "样式状态",
-            style: "样式值规范"
-        }... */,
-        /* dynamic: "动态样式值规范" */
-    }` 
-};

package/components/BTXUI/core/styles/index.vue

@@ -1,98 +0,0 @@
-<template>
-    <slot/>
-</template>
-<script setup lang="ts">
-    import prestyles from "./prestyles.ts"
-    import theme from "./theme.ts"
-    import { onMounted, computed, reactive } from "vue"
-
-    const props = defineProps<{
-        // 样式集
-        class?: string,
-    }>()
-
-    // 全局样式 id
-    const GLOBAL_STYLE_NAME = "BTXUIGlobal"; 
-
-    // 全局样式对象
-    const $style = ref();
-
-    // 全局样式类映射表
-    const styleMap = computed(() => {
-        const list = [];
-        for(let item of $style.value.sheet.rules) {
-            list.push(item.selectorText.substr(1)); 
-        }
-        return list;
-    })
-
-    // 设置全局 style
-    const initStyle = () => {
-        let $_style = document.head.querySelector(`#${ GLOBAL_STYLE_NAME }`);
-        if(!$_style) {
-            $_style = document.createElement("style");
-            $_style.setAttribute("type", "text/css");
-            $_style.setAttribute("id", GLOBAL_STYLE_NAME);
-            document.head.appendChild($_style);
-        }
-        $style.value = $_style;
-    }
-
-    // 分解样式集
-    const styles = reactive({}) as any;
-    const validValue = (val: any) => {
-        if(!isNaN(val*1)) return val; // 数值判断
-        if(theme.colors[val]) return theme.colors[val]; // 颜色判断
-        return false;
-    }
-    const parseStyle = (rule: any) => {
-        // 使用预置样式
-        let style = prestyles[rule];
-        if(style) return style;
-        
-        const rules = rule.split("-"); 
-        const dirs = {
-            l: "left",
-            t: "top",
-            r: "right",
-            b: "bottom",
-        };
-        let [r1, r2, r3, r4] = rules;
-        
-        // 设置多段样式
-        style = prestyles[r1];
-        if(style) {
-            // property-value[-unit]：
-            // 【exp】：mrg-5 | mrg-5-px => mrg: 5rem; | mrg: 5px;
-            let value = validValue(r2);
-            if(value) return `${ style.pro }: ${ value }${ r3 || style.unit || "" }`;
-
-            // property[-direction]-value[-unit]：
-            // 【exp】：mrg-l-5 | mrg-l-5-px => margin-left: 5rem; | margin-left: 5px;
-            value = validValue(r3);    
-            if(value) return `${ style.pro }-${ dirs[<"l"|"t"|"r"|"b">r2] || r2 }: ${ value }${ r4 || style.unit || "" }`;
-        }
-    }
-    const parseStyles = () => { 
-        if(!props.class) return;
-        props.class.split(" ").forEach((rule: string) => {
-            if(!styleMap.value.includes(rule)) {  
-                styleMap.value.push(rule);
-                styles[rule] = parseStyle(rule); 
-            }
-        })
-    }
-
-    // 设置全局类
-    const setStyle = () => {  
-        Object.keys(styles).forEach(key => {
-            $style.value.sheet.addRule(`.${ key }`, styles[key]);
-        }) 
-    }
-
-    onMounted(() => {
-        initStyle();
-        parseStyles();
-        setStyle();
-    })
-</script>

package/components/BTXUI/core/styles/prestyles.ts

@@ -1,471 +0,0 @@
-interface Prestyles {
-    [key:string]: any
-}
-
-export default <Prestyles>{
-
-    //预置样式-----------------------------------------------------------------------------------
-
-    //重置初始字号及行高
-    "resize": `font-size: 1rem; lineHeight: 1.5;`,
-
-    //文字加粗
-    "bold": `font-weight: bold;`,
-
-    //隐藏显示
-    "show": `display: "block";`,
-    "hide": `display: "none";`,
-
-    //布局
-    "flex": `display: "flex"; justifyContent: "flex-start"; alignItems: "stretch";`,
-    "flex-column": `display: "flex"; flexDirection: "column";`,
-    "flex-1": `display: "flex"; justifyContent: "flex-start"; alignItems: "flex-start";`,
-    "flex-2": `display: "flex"; justifyContent: "center"; alignItems: "flex-start";`,
-    "flex-3": `display: "flex"; justifyContent: "flex-end"; alignItems: "flex-start";`,
-    "flex-4": `display: "flex"; justifyContent: "flex-start"; alignItems: "center"`,
-    "flex-5": {
-        display: "flex",
-        justifyContent: "center",
-        alignItems: "center",
-    },
-    "flex-6": {
-        display: "flex",
-        justifyContent: "flex-end",
-        alignItems: "center",
-    },
-    "flex-7": {
-        display: "flex",
-        justifyContent: "flex-start",
-        alignItems: "flex-end",
-    },
-    "flex-8": {
-        display: "flex",
-        justifyContent: "center",
-        alignItems: "flex-end",
-    },
-    "flex-9": {
-        display: "flex",
-        justifyContent: "flex-end",
-        alignItems: "flex-end",
-    },
-    "flex-between": {
-        display: "flex",
-        justifyContent: "space-between",
-        alignItems: "center"
-    },
-    "flex-around": {
-        display: "flex",
-        justifyContent: "space-around",
-        alignItems: "center"
-    },
-    "grid": {
-        display: "flex",
-        flexWrap: "wrap",
-        alignContent: "flex-start"
-    },
-    "max-h": {
-        height: "100%",
-    },
-    "max-w": {
-        width: "100%",
-    },
-    "max": {
-        height: "100%",
-        width: "100%",
-    },
-    "max-screen": {
-        height: "100%",
-        width: "100%",
-        position: "fixed",
-        left: 0,
-        top: 0
-    },
-    "item": {
-        breakInside: "avoid",
-        mozPageBreakInside: "avoid",
-        webkitColumnBreakInside: "avoid"
-    },
-    "fixed": { position: "fixed" },
-    "rel": { position: "relative" },
-    "abs": { position: "absolute" },
-    "z-1": { zIndex: -1 },
-    "z0": { zIndex: 0 },
-    "z1": { zIndex: 1 },
-    "z2": { zIndex: 2 },
-    "z3": { zIndex: 3 },
-    "z4": { zIndex: 4 },
-    "z5": { zIndex: 5 },
-    "z6": { zIndex: 6 },
-    "z7": { zIndex: 7 },
-    "z8": { zIndex: 8 },
-    "z9": { zIndex: 9 },
-    "z10": { zIndex: 10 },
-
-    //溢出处理
-    "no-scroll": { overflow: "hidden" },
-    "over-show": { overflow: "visible" },
-    "over-scroll": { overflow: "scroll" },
-    "over-hide": { overflow: "hidden" },
-
-    // 背景
-    "bg-repeat": { backgroundRepeat: "repeat" },
-    "bg-repeat-x": { backgroundRepeat: "repeat-x" },
-    "bg-repeat-y": { backgroundRepeat: "repeat-y" },
-    // size
-    "bg-size-cover": `background-size: cover;`,
-    "bg-size-contain": `background-size: contain;`,
-    "bg-size-max": `background-size: 100% 100%;`,
-    "bg-size-max-h": `background-size: auto 100%;`,
-    "bg-size-max-w": `background-size: 100% auto;`,
-
-    "bg-pos-1": { backgroundPosition: "left top" },
-    "bg-pos-2": { backgroundPosition: "center top" },
-    "bg-pos-3": { backgroundPosition: "right top" },
-    "bg-pos-4": { backgroundPosition: "left center" },
-    "bg-pos-5": { backgroundPosition: "center center" },
-    "bg-pos-6": { backgroundPosition: "right center" },
-    "bg-pos-7": { backgroundPosition: "left bottom" },
-    "bg-pos-8": { backgroundPosition: "center bottom" },
-    "bg-pos-9": { backgroundPosition: "right bottom" },
-
-    //圆角
-    "round": `border-radius: 50%;`,
-    "round-lg": `borderRadius: 24px;`,
-    "round-md": `border-radius: 10px;`,
-    "round-sm": `borderRadius: 4px;`,
-    "round-t": `borderBottomRightRadius: 0; borderBottomLeftRadius: 0;`,
-    "round-b": `borderTopRightRadius: 0; borderTopLeftRadius: 0;`,
-    "round-l": `borderTopRightRadius: 0; borderBottomRightRadius: 0;`,
-    "round-r": `borderTopLeftRadius: 0; borderBottomLeftRadius: 0;`,
-
-    //描边
-    "line": `borderStyle: solid;`,
-    "dashed": `borderStyle: dashed;`,
-    "line-l": `borderLeftStyle: solid;`,
-    "line-r": `borderRightStyle: solid;`,
-    "line-t": `borderTopStyle: solid;`,
-    "line-b": `borderBottomStyle: solid;`,
-    "dashed-l": `borderLeftStyle: dashed;`,
-    "dashed-r": `borderRightStyle: dashed;`,
-    "dashed-t": `borderTopStyle: dashed;`,
-    "dashed-b": `borderBottomStyle: dashed;`,
-    "line-outside": `backgroundClip: padding-box;`,
-
-    //文字描边
-    "text-line": {
-        textShadow: "1px 0 0 rgba(200, 200, 200, .5), -1px 0 0 rgba(200, 200, 200, .5), 0 1px 0 rgba(200, 200, 200, .5), 0 -1px 0 rgba(200, 200, 200, .5)"
-    },
-
-    //单行省略文本
-    "ellipsis": {
-        overflow: "hidden",
-        textOverflow: "ellipsis",
-        whiteSpace: "nowrap"
-    },
-
-    //阴影
-    "shadow": { boxShadow: "0 4px 17px" },
-    "shadow-sm": { boxShadow: "0 2px 4px" },
-    "shadow-lg": { boxShadow: "0 14px 40px" },
-    "shadow-relief": { boxShadow: "1px 1px 0 rgba(0,0,0,.7) inset, 1px 1px 0 rgba(255,255,255,.4)" },
-
-    //过渡动画
-    "trans": { transition: "all .7s" },
-    "trans-fast": { transition: "all .4s" },
-    "trans-slow": { transition: "all 1.4s" },
-    "trans-no": { transition: "none" },
-
-    //模糊滤镜
-    "blur-no": { filter: "blur(0px)" },
-    "blur-sm": { filter: "blur(2px)" },
-    "blur-md": { filter: "blur(7px)" },
-    "blur-lg": { filter: "blur(17px)" },
-
-    //明度滤镜
-    "dark-no": { filter: "brightness(100%)" },
-    "dark-sm": { filter: "brightness(80%)" },
-    "dark-md": { filter: "brightness(50%)" },
-    "dark-lg": { filter: "brightness(20%)" },
-
-    // 纯度滤镜
-    "gray-no": `filter: grayscale(0%);`,
-    "gray-sm": `filter: grayscale(40%);`,
-    "gray-md": `filter: grayscale(70%);`,
-    "gray-lg": `filter: grayscale(100%);`,
-
-    // 特殊
-    "bg-none": `pointerEvents: none;`,
-    "bg-use": `pointerEvents: auto;`,
-    "touch-none": `touchAction: none;`,
-
-    // 二段赋值-----------------------------------------------------------------------------------
-
-    // 文本对齐
-    "p": {
-        pro: "text-align"
-    },
-
-    // 文字颜色
-    "color": {
-        pro: "color"
-    },
-
-    // 背景色
-    "bg": {
-        pro: "background"
-    },
-
-    // 宽度
-    "w": {
-        pro: "width",
-        unit: "rem"
-    },
-
-    // 高度
-    "h": {
-        pro: "height",
-        unit: "rem"
-    },
-
-    // 内边距
-    "pad": {
-        pro: "padding",
-        unit: "rem"
-    },
-
-    // 外边距
-    "mrg": {
-        pro: "margin",
-        unit: "rem"
-    },
-
-        "rule_2": {
-
-            //字体
-            "font": {
-                pro: "fontFamily"
-            },
-
-            //字号
-            "fsize": {
-                pro: "fontSize",
-                unit: "em"
-            },
-
-            //行高
-            "lh": {
-                pro: "lineHeight",
-            },
-
-            //字符间距
-            "lspace": {
-                pro: "letterSpacing",
-                unit: "rem"
-            },
-
-            //不透明度
-            "alpha": {
-                pro: "opacity",
-                extra: {
-                    visibility: "visible"
-                },
-                escape: {
-                    "0": {
-                        visibility: "hidden"
-                    },
-                }
-            },
-
-            //描边颜色
-            "line": {
-                pro: "borderColor"
-            },
-
-            //自生长比率
-            "grow": {
-                pro: "flexGrow",
-                extra: {
-                    flexBasis: 0
-                },
-            },
-
-            //弹性布局项目排序
-            "order": {
-                pro: "order"
-            },
-
-            //多列布局容器
-            "column": {
-                pro: "columnCount",
-                extra: {
-                    columnGap: 0
-                },
-            },
-
-            //最大宽
-            "rw": {
-                pro: "maxWidth",
-                unit: "rem"
-            },
-
-            //最小宽
-            "lw": {
-                pro: "minWidth",
-                unit: "rem"
-            },
-
-            //最大高
-            "th": {
-                pro: "maxHeight",
-                unit: "rem"
-            },
-
-            //最小高
-            "bh": {
-                pro: "minHeight",
-                unit: "rem"
-            },
-
-            //基于容器左侧水平位移
-            "l": {
-                pro: "left",
-                unit: "rem"
-            },
-
-            //基于容器右侧水平位移
-            "r": {
-                pro: "right",
-                unit: "rem"
-            },
-
-            //基于容器上侧垂直位移
-            "t": {
-                pro: "top",
-                unit: "rem"
-            },
-
-            //基于容器下侧垂直位移
-            "b": {
-                pro: "bottom",
-                unit: "rem"
-            },
-
-            //水平位移
-            "translateX": {
-                pro: "transform",
-                tmp: "translateX(%{}%)",
-                unit: "%"
-            },
-
-            //垂直位移
-            "translateY": {
-                pro: "transform",
-                tmp: "translateY(%{}%)",
-                unit: "%"
-            },
-
-            //放缩
-            "scale": {
-                pro: "transform",
-                tmp: "scale(%{}%)"
-            },
-
-            //旋转
-            "rotate": {
-                pro: "transform",
-                tmp: "rotate(%{}%)",
-                unit: "deg"
-            },
-
-            //变形
-            "transform": {
-                pro: "transform",
-            },
-
-            //变形中心点
-            "origin": {
-                pro: "transformOrigin"
-            },
-
-            //描边粗细
-            "thick": {
-                pro: "borderWidth",
-                unit: "px"
-            },
-
-            //过渡动画延迟
-            "trans": {
-                pro: "transition"
-            },
-
-        },
-
-            //三段赋值-----------------------------------------------------------------------------------
-
-            "rule_3": {
-
-                //左侧
-                "l": {
-                    pro: ["Left"],
-                    unit: "rem"
-                },
-
-                //右侧
-                "r": {
-                    pro: ["Right"],
-                    unit: "rem"
-                },
-
-                //上侧
-                "t": {
-                    pro: ["Top"],
-                    unit: "rem"
-                },
-
-                //下侧
-                "b": {
-                    pro: ["Bottom"],
-                    unit: "rem"
-                },
-
-                //垂直方向
-                "v": {
-                    pro: ["Top", "Bottom"],
-                    unit: "rem"
-                },
-
-                //水平方向
-                "h": {
-                    pro: ["Left", "Right"],
-                    unit: "rem"
-                },
-
-                //背景颜色
-                "gradient": {
-                    pro: ["Image"],
-                    tmp: "-webkit-linear-gradient(%{}%)"
-                },
-
-                //背景颜色
-                "color": {
-                    pro: ["Color"],
-                },
-
-                //背景尺寸
-                "size": {
-                    pro: ["Size"],
-                },
-
-                //背景定位
-                "pos": {
-                    pro: ["Position"],
-                },
-
-                //过渡动画延迟
-                "delay": {
-                    pro: ["Delay"],
-                    unit: "s"
-                },
-            }
-
-}