uview-ultra 4.5.46

package/libs/composable/useUltraUI.js

@@ -0,0 +1,201 @@
+import { getCurrentInstance, onBeforeUnmount, ref } from 'vue'
+import { deepMerge, $parent, sleep, isCompUnmounted } from '../function/index.js'
+import test from '../function/test.js'
+import route from '../util/route.js'
+
+// #ifdef APP-NVUE
+const dom = uni.requireNativePlugin('dom')
+// #endif
+
+export const commonProps = {
+    customStyle: {
+        type: [Object, String],
+        default: () => ({})
+    },
+    customClass: {
+        type: String,
+        default: ''
+    },
+    url: {
+        type: String,
+        default: ''
+    },
+    linkType: {
+        type: String,
+        default: 'navigateTo'
+    }
+}
+
+function getSlimUniU() {
+    if (typeof uni === 'undefined' || !uni.$u) return {}
+    // #ifndef APP-NVUE
+    return deepMerge(uni.$u, {
+        props: undefined,
+        http: undefined,
+        mixin: undefined
+    })
+    // #endif
+    // #ifdef APP-NVUE
+    return uni.$u
+    // #endif
+}
+
+export function useUltraUI(props = {}, parentData = null) {
+    const instance = getCurrentInstance()
+    const proxy = instance?.proxy || null
+    const parent = ref(null)
+    const children = ref([])
+    const $u = getSlimUniU()
+
+    function bem(name, fixed, change) {
+        const prefix = `up-${name}--`
+        const classes = {}
+        if (fixed) {
+            fixed.forEach((item) => {
+                classes[prefix + props[item]] = true
+            })
+        }
+        if (change) {
+            change.forEach((item) => {
+                if (props[item]) {
+                    classes[prefix + item] = props[item]
+                } else {
+                    delete classes[prefix + item]
+                }
+            })
+        }
+        return Object.keys(classes)
+            // #ifdef MP-ALIPAY || MP-TOUTIAO || MP-LARK
+            .join(' ')
+            // #endif
+    }
+
+    function openPage(urlKey = 'url') {
+        const url = props[urlKey]
+        if (url) {
+            route({ type: props.linkType, url })
+        }
+    }
+
+    function navTo(url = '', linkType = 'navigateTo') {
+        route({ type: linkType, url })
+    }
+
+    function $uGetRect(selector, all) {
+        // 卸载后不得再把组件交给原生查询，否则 APP 端会拿失效 nodeId 去查已删除的视图节点
+        if (isCompUnmounted(proxy)) {
+            return Promise.resolve(all ? [] : {
+                width: 0,
+                height: 0,
+                left: 0,
+                right: 0,
+                top: 0,
+                bottom: 0
+            })
+        }
+        return new Promise((resolve) => {
+            // #ifndef APP-NVUE
+            uni.createSelectorQuery()
+                .in(proxy)[all ? 'selectAll' : 'select'](selector)
+                .boundingClientRect((rect) => {
+                    // 页面被 tabbar 切走隐藏时节点查询会回调 null，
+                    // 此处必须兜底 resolve，否则 await 永不返回，调用方会被永久挂起
+                    if (all) {
+                        resolve(Array.isArray(rect) ? rect : [])
+                        return
+                    }
+                    resolve(rect || {
+                        width: 0,
+                        height: 0,
+                        left: 0,
+                        right: 0,
+                        top: 0,
+                        bottom: 0
+                    })
+                })
+                .exec()
+            // #endif
+
+            // #ifdef APP-NVUE
+            sleep(30).then(() => {
+                const selectorNvue = selector.substring(1)
+                const selectorRef = proxy?.$refs?.[selectorNvue]
+                if (!selectorRef) {
+                    resolve({
+                        with: 0,
+                        height: 0,
+                        left: 0,
+                        right: 0,
+                        top: 0,
+                        bottom: 0
+                    })
+                    return
+                }
+                dom.getComponentRect(selectorRef, res => {
+                    resolve(res.size)
+                })
+            })
+            // #endif
+        })
+    }
+
+    if (typeof uni !== 'undefined' && uni.$u) {
+        uni.$u.getRect = $uGetRect
+    }
+
+    function getParentData(parentName = '') {
+        if (!proxy) return null
+        parent.value = $parent.call(proxy, parentName)
+        const parentChildren = parent.value?.children
+        if (Array.isArray(parentChildren) && parentChildren.indexOf(proxy) === -1) {
+            parentChildren.push(proxy)
+        }
+        if (parent.value && parentData) {
+            const parentProps = typeof parent.value.getProps === 'function'
+                ? parent.value.getProps()
+                : parent.value
+            Object.keys(parentData).forEach((key) => {
+                parentData[key] = parentProps[key]
+            })
+        }
+        return parent.value
+    }
+
+    function preventEvent(e) {
+        e && typeof e.stopPropagation === 'function' && e.stopPropagation()
+    }
+
+    function noop(e) {
+        preventEvent(e)
+    }
+
+    onBeforeUnmount(() => {
+        // 本 hook 在 setup 期间最早注册，因此先于组件自身的 onBeforeUnmount 执行，
+        // 也早于 Vue 内部在 post-render 队列里异步置位的 isUnmounted，
+        // 异步回调据此拦截节点查询与交叉观察器
+        if (proxy) {
+            proxy.__upUnmounted = true
+        }
+        if (parent.value && test.array(parent.value.children)) {
+            const childrenList = parent.value.children
+            childrenList.forEach((child, index) => {
+                if (child === proxy) {
+                    childrenList.splice(index, 1)
+                }
+            })
+        }
+    })
+
+    return {
+        $u,
+        parent,
+        children,
+        bem,
+        openPage,
+        navTo,
+        $uGetRect,
+        getParentData,
+        preventEvent,
+        noop
+    }
+}

package/libs/composable/useUltraUI.uts

@@ -0,0 +1,184 @@
+import { ref, reactive } from 'vue'
+import { bem, upGetRect, getParentFunc } from '../function/index'
+import { array as testArray } from '../function/test.uts'
+
+export type UPUseUltraUIType = {
+	parent: Ref<ComponentPublicInstance|null>,
+	parentData: Ref<UTSJSONObject>,
+	children: Ref<ComponentPublicInstance[]>,
+	childrenRefs: Ref<string[]>,
+	openPage:(urlKey: string) => void,
+	getChildIndex: (ins: ComponentPublicInstance) => number,
+	getParent: (name: string, instance: ComponentPublicInstance) => ComponentPublicInstance|null,
+	addChild: (ins: ComponentPublicInstance) => void,
+	addChildRef: (str: string) => void,
+	getChildren: () => ComponentPublicInstance[],
+	getParentData: (parentName: string, instance: ComponentPublicInstance, refMode: boolean) => ComponentPublicInstance|null,
+	onComponentDestroy: (instance: ComponentPublicInstance) => void,
+	preventEvent: (e: UniEvent) => void,
+	noop: (e: UniEvent) => void,
+}
+
+// 定义组件公共属性和方法的组合式函数
+export function useUltraUI(parentDataInit: UTSJSONObject = {}): UPUseUltraUIType  {
+    // 定义响应式数据
+    const parent = ref<ComponentPublicInstance | null>(null)
+    const parentData = ref(parentDataInit) as Ref<UTSJSONObject>
+    const children = ref<ComponentPublicInstance[]>([])
+    const childrenRefs = ref<string[]>([])
+
+    // 跳转某一个页面
+    const openPage = function(urlKey: string): void {
+        // const url: string = this.$data?.[urlKey].toString()
+        // if (url != '') {
+        //     // h5官方回应：发行h5会自动摇树优化，所有使用uni的地方，都会被直接转换成具体的API调用 https://ask.dcloud.net.cn/question/161523?notification_id-1201922__rf-false__item_id-226372
+        //     // 使用封装的 route 进行跳转（直接调用方法），不使用 uni 对象
+        //     // route({ type: this.linkType, url })
+        //     // 执行类似uni.navigateTo的方法
+        //     uni[this.linkType]({
+        //         url
+        //     })
+        // }
+    }
+
+    // 获取子组件索引
+    const getChildIndex = function(ins: ComponentPublicInstance): number {
+        let index = -1
+        if (parent.value != null) {
+            (parent.value!!.$callMethod('getChildren') as ComponentPublicInstance[]).forEach((child: ComponentPublicInstance, idx: number) => {
+                if (child == ins) {
+                    index = idx
+                }
+            })
+        }
+        return index
+    }
+
+    // 获取父组件
+    const getParent = function(name: string, instance: ComponentPublicInstance): ComponentPublicInstance | null {
+        let parentTmp = getParentFunc(name, instance)
+        parent.value = parentTmp
+        return parentTmp
+    }
+
+    // 添加子组件
+    const addChild = function(ins: ComponentPublicInstance): void {
+        let exist = false
+        let childs: ComponentPublicInstance[] = children.value
+        childs.map((child: ComponentPublicInstance) => {
+            if (ins == child) {
+                exist = true
+            }
+        })
+        if (!exist) {
+            children.value.push(ins)
+        }
+    }
+
+    // 添加子组件引用
+    const addChildRef = function(str: string): void {
+        let index = childrenRefs.value.indexOf('str')
+        if (index <= -1) {
+            childrenRefs.value.push(str)
+        }
+    }
+	
+	const getChildren = function(): ComponentPublicInstance[] {
+		return children.value
+	}
+
+    // 获取父组件数据
+    const getParentData = function(parentName: string, instance: ComponentPublicInstance, refMode: boolean): ComponentPublicInstance|null {
+        // 避免在created中去定义parent变量
+        // 这里的本质原理是，通过获取父组件实例(也即类似up-radio的父组件up-radio-group的this)
+        // 将父组件this中对应的参数，赋值给本组件up-radio的this)的parentData对象中对应的属性
+        // 之所以需要这么做，是因为所有端中，头条小程序不支持通过this.parent.xxx去监听父组件参数的变化
+        // 此处并不会自动更新子组件的数据，而是依赖父组件up-radio-group去监听data的变化，手动调用更新子组件的方法去重新获取
+        // 注意不能赋值给parent,会导致与addChild中push冲突
+        let parentIns = getParent(parentName, instance)
+		// console.log('parentIns', parentIns)
+        // parent.value = parentIns
+        if (parentIns != null) {
+			let chds: ComponentPublicInstance[]|null = parentIns.$callMethod('getChildren') as ComponentPublicInstance[]
+            if (chds != null) {
+                // 如果父组件的children不存在本组件的实例，才将本实例添加到父组件的children中
+                if (refMode) {
+                    // if (Reflect.has(parentIns!, 'addChildRef')) {
+                        parentIns?.$callMethod('addChildRef', instance.$data['refstr'])
+                    // }
+                } else {
+                    // if (Reflect.has(parentIns, 'addChild')) {
+                        parentIns?.$callMethod('addChild', instance)
+                    // }
+                }
+            }
+            // 遍历parentData中的属性，将parent中的同名属性赋值给parentData
+            UTSJSONObject.keys(parentData.value).map((key: string) => {
+                // if (Reflect.has(parentIns!, 'getProps')) {
+                    const propsData = parentIns?.$callMethod('getProps') as UTSJSONObject
+                    // console.log(propsData)
+                    // console.log(key, '=', propsData)
+                    if (UTSJSONObject.keys(propsData).includes(key)) {
+                        parentData.value[key] = propsData?.[key]
+                    }
+                // }
+
+				// if (Reflect.has(parentIns!, 'getRefs')) {
+                    const refsData = parentIns?.$callMethod('getRefs') as UTSJSONObject
+                    if (UTSJSONObject.keys(refsData).includes(key)) {
+                        parentData.value[key] = refsData?.[key]
+                    }
+                // }
+            })
+        }
+        return parentIns
+    }
+
+    // 阻止事件冒泡
+    const preventEvent = function(e: UniEvent): void {
+        e.stopPropagation()
+    }
+
+    // 空操作
+    const noop = function(e: UniEvent): void {
+        preventEvent(e)
+    }
+
+    // 组件销毁时清理逻辑
+    const onComponentDestroy = function(instance: ComponentPublicInstance)  {
+        // 判断当前页面是否存在parent和children，一般在checkbox和checkbox-group父子联动的场景会有此情况
+        // 组件销毁时，移除子组件在父组件children数组中的实例，释放资源，避免数据混乱
+        if (parent.value != null) {
+            // 组件销毁时，移除父组件中的children数组中对应的实例
+            const childrenList = parent.value.$callMethod('getChildren') as ComponentPublicInstance[]
+			//if (childrenList != null) {
+				childrenList.map((child: ComponentPublicInstance, index: number) => {
+				    // 如果相等，则移除
+				    if (child === instance) {
+				        childrenList.splice(index, 1)
+				    }
+				})
+			//}
+        }
+    }
+
+    return {
+        // 响应式数据
+        parent,
+        parentData,
+        children,
+        childrenRefs,
+
+        // 方法
+        openPage,
+        getChildIndex,
+        getParent,
+        addChild,
+        addChildRef,
+        getParentData,
+		getChildren,
+        preventEvent,
+        noop,
+        onComponentDestroy
+    }
+}

package/libs/config/color.js

@@ -0,0 +1,19 @@
+// 为了让用户能够自定义主题，会逐步弃用此文件，各颜色通过css提供
+// 为了给某些特殊场景使用和向后兼容，无需删除此文件(2020-06-20)
+const color = {
+    primary: '#3c9cff',
+    info: '#909399',
+    default: '#909399',
+    warning: '#f9ae3d',
+    error: '#f56c6c',
+    success: '#5ac725',
+    mainColor: '#303133',
+    contentColor: '#606266',
+    tipsColor: '#909399',
+    lightColor: '#c0c4cc',
+    borderColor: '#e4e7ed',
+    bgColor: '#f3f4f6',
+    disabledColor: '#c8c9cc'
+}
+
+export default color

package/libs/config/color.uts

@@ -0,0 +1,17 @@
+// 为了让用户能够自定义主题，会逐步弃用此文件，各颜色通过css提供
+// 为了给某些特殊场景使用和向后兼容，无需删除此文件(2020-06-20)
+const color = {
+    primary: '#3c9cff',
+    info: '#909399',
+    default: '#909399',
+    warning: '#f9ae3d',
+    error: '#f56c6c',
+    success: '#5ac725',
+    mainColor: '#303133',
+    contentColor: '#606266',
+    tipsColor: '#909399',
+    lightColor: '#c0c4cc',
+    borderColor: '#e4e7ed'
+} as UTSJSONObject
+
+export default color

package/libs/config/config.js

@@ -0,0 +1,48 @@
+const version = '4'
+
+// 开发环境才提示，生产环境不会提示
+if (process.env.NODE_ENV === 'development') {
+	console.log(`\n %c uview-plus V${version} %c https://ijry.github.io/uview-plus/ \n\n`, 'color: #ffffff; background: #3c9cff; padding:5px 0;', 'color: #3c9cff;background: #ffffff; padding:5px 0;');
+}
+
+export default {
+    v: version,
+    version,
+    // 主题名称
+    type: [
+        'primary',
+        'success',
+        'info',
+        'error',
+        'warning'
+    ],
+    // 颜色部分，本来可以通过scss的:export导出供js使用，但是奈何nvue不支持
+    color: {
+        'up-primary': '#2979ff',
+        'up-warning': '#ff9900',
+        'up-success': '#19be6b',
+        'up-error': '#fa3534',
+        'up-info': '#909399',
+        'up-main-color': '#303133',
+        'up-content-color': '#606266',
+        'up-tips-color': '#909399',
+        'up-light-color': '#c0c4cc',
+        'up-border-color': '#dadbde',
+        'up-bg-color': '#f3f4f6',
+        'up-disabled-color': '#c8c9cc',
+    },
+    iconUrl: 'https://at.alicdn.com/t/font_2225171_8kdcwk4po24.ttf',
+    customIcon: {
+        family: '',
+        url: ''
+    },
+    customIcons: {},
+    loadFontOnce: false,
+    interceptor: {
+        navbarLeftClick: null
+    },
+	// 默认单位，可以通过配置为rpx，那么在用于传入组件大小参数为数值时，就默认为rpx
+	unit: 'px',
+    themeMode: 'light',
+    nativeThemeSync: false
+}

package/libs/config/config.uts

@@ -0,0 +1,33 @@
+let version = '4'
+
+// 开发环境才提示，生产环境不会提示
+// if (process.env.NODE_ENV === 'development') {
+// 	console.log(`\n %c uview-plus V${version} %c https://ijry.github.io/uview-plus/ \n\n`, 'color: #ffffff; background: #3c9cff; padding:5px 0;', 'color: #3c9cff;background: #ffffff; padding:5px 0;');
+// }
+
+export default {
+    v: '4',
+    version: '4',
+    // 主题名称
+    type: [
+        'primary',
+        'success',
+        'info',
+        'error',
+        'warning'
+    ],
+    // 颜色部分，本来可以通过scss的:export导出供js使用，但是奈何nvue不支持
+    color: {
+        'up-primary': '#2979ff',
+        'up-warning': '#ff9900',
+        'up-success': '#19be6b',
+        'up-error': '#fa3534',
+        'up-info': '#909399',
+        'up-main-color': '#303133',
+        'up-content-color': '#606266',
+        'up-tips-color': '#909399',
+        'up-light-color': '#c0c4cc'
+    },
+	// 默认单位，可以通过配置为rpx，那么在用于传入组件大小参数为数值时，就默认为rpx
+	unit: 'px'
+} as UTSJSONObject