btxui 1.0.1

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

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

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

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

@@ -0,0 +1,471 @@
+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"
+                },
+            }
+
+}