uview-pro 0.2.4 → 0.3.0

package/components/u-waterfall/types.ts

@@ -1,10 +1,12 @@
 import type { ExtractPropTypes, PropType } from 'vue';
+import { baseProps } from '../common/props';
 
 /**
  * WaterfallProps waterfall props 类型定义
  * @description 瀑布流组件，支持数据、间隔、idKey
  */
 export const WaterfallProps = {
+    ...baseProps,
     /** 瀑布流数据数组，必填 */
     modelValue: { type: Array as PropType<any[]>, required: true, default: () => [] },
     /** 新增数据的动画间隔，单位ms */

package/components/u-waterfall/u-waterfall.vue

@@ -1,5 +1,5 @@
 <template>
-    <view class="u-waterfall">
+    <view class="u-waterfall" :class="customClass" :style="$u.toStyle(customStyle)">
         <view id="u-left-column" class="u-column">
             <slot name="left" :leftList="leftList"></slot>
         </view>
@@ -8,13 +8,25 @@
         </view>
     </view>
 </template>
+
+<script lang="ts">
+export default {
+    name: 'u-waterfall',
+    options: {
+        addGlobalClass: true,
+        // #ifndef MP-TOUTIAO
+        virtualHost: true,
+        // #endif
+        styleIsolation: 'shared'
+    }
+};
+</script>
+
 <script setup lang="ts">
 import { ref, computed, watch, onMounted, getCurrentInstance } from 'vue';
 import { $u } from '../..';
 import { WaterfallProps } from './types';
 
-defineOptions({ name: 'u-waterfall' });
-
 /**
  * waterfall 瀑布流
  * @description 这是一个瀑布流形式的组件，内容分为左右两列，结合uView的懒加载组件效果更佳。相较于某些只是奇偶数左右分别，或者没有利用vue作用域插槽的做法，uView的瀑布流实现了真正的 组件化，搭配LazyLoad 懒加载和loadMore 加载更多组件，让您开箱即用，眼前一亮。

package/libs/hooks/index.ts

@@ -1,3 +1,4 @@
-export * from './useComponent';
+// export * from './useComponent';
 export * from './useEmitter';
 export * from './useRect';
+export * from './useCompRelation';

package/libs/hooks/useCompRelation.ts

@@ -0,0 +1,364 @@
+// utils/useComponent.ts
+import { ref, reactive, getCurrentInstance, onUnmounted, nextTick, computed, watch, onMounted } from 'vue';
+import { logger } from '../util/logger';
+
+// 类型定义
+interface ParentContext {
+    name: string;
+    addChild: (child: ChildContext) => void;
+    removeChild: (childId: string) => void;
+    broadcast: (event: string, data?: any) => void;
+    getChildren: () => ChildContext[];
+    getExposed: () => Record<string, any>;
+    getChildExposed: (childId: string) => Record<string, any>;
+    getChildrenExposed: () => Array<{ id: string; name: string; exposed: Record<string, any> }>;
+}
+
+interface ChildContext {
+    id: string;
+    name: string;
+    emitToParent: (event: string, data?: any) => void;
+    getParentExposed: () => Record<string, any>;
+    getInstance: () => any;
+    getExposed: () => Record<string, any>;
+}
+
+// 符号定义
+const PARENT_CONTEXT_SYMBOL = Symbol('parent_context');
+const CHILDREN_CONTEXT_SYMBOL = Symbol('children_context');
+
+/**
+ * 生成实例唯一ID
+ */
+function generateInstanceId(componentName: string): string {
+    return `${componentName}_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`;
+}
+
+/**
+ * 查找父组件实例
+ */
+function findParentInstance(name: string, instance: any): any {
+    if (!instance) return null;
+
+    let parent = instance.parent;
+    while (parent) {
+        const parentName = parent.type?.name || parent.type?.__name;
+        if (parentName === name) {
+            return parent;
+        }
+        parent = parent.parent;
+    }
+    return null;
+}
+
+/**
+ * 获取父组件上下文
+ */
+function getParentContext(name: string, instance: any): ParentContext | null {
+    const parentInstance = findParentInstance(name, instance);
+    if (parentInstance) {
+        return parentInstance.proxy?.[PARENT_CONTEXT_SYMBOL] || null;
+    }
+    return null;
+}
+
+/**
+ * 父组件 Hook
+ */
+export function useParent(componentName?: string) {
+    const instance = getCurrentInstance();
+    if (!instance) {
+        throw new Error('useParent must be called within setup function');
+    }
+
+    // 使用组件名称作为默认名称
+    const name = componentName || instance.type.name || instance.type.__name;
+    if (!name) {
+        throw new Error('Component name is required for useParent. Either provide a name or set component name.');
+    }
+
+    const children = reactive<ChildContext[]>([]);
+    const childrenMap = new Map<string, ChildContext>();
+
+    // 父组件上下文
+    const parentContext: ParentContext = {
+        name,
+
+        addChild(child: ChildContext) {
+            if (!childrenMap.has(child.id)) {
+                childrenMap.set(child.id, child);
+                children.push(child);
+                logger.log(`Parent ${name} added child: ${child.name} (${child.id})`);
+            }
+        },
+
+        removeChild(childId: string) {
+            if (childrenMap.has(childId)) {
+                const child = childrenMap.get(childId)!;
+                childrenMap.delete(childId);
+                const index = children.findIndex(c => c.id === childId);
+                if (index > -1) {
+                    children.splice(index, 1);
+                }
+                logger.log(`Parent ${name} removed child: ${childId}`);
+            }
+        },
+
+        broadcast(event: string, data?: any) {
+            logger.log(`Parent ${name} broadcasting event: ${event} to ${childrenMap.size} children`);
+            childrenMap.forEach(child => {
+                const exposed = child.getExposed();
+                if (exposed && typeof exposed[event] === 'function') {
+                    try {
+                        exposed[event](data);
+                    } catch (error) {
+                        logger.warn(`Error calling child method ${event}:`, error);
+                    }
+                }
+            });
+        },
+
+        getChildren() {
+            return Array.from(childrenMap.values());
+        },
+
+        getExposed() {
+            return instance.exposed || {};
+        },
+
+        getChildExposed(childId: string) {
+            const child = childrenMap.get(childId);
+            if (child && child.getExposed) {
+                return child.getExposed();
+            }
+            logger.warn(`Child ${childId} not found or does not have getExposed method`);
+            return {};
+        },
+
+        getChildrenExposed() {
+            return Array.from(childrenMap.values())
+                .filter(child => child.getExposed)
+                .map(child => {
+                    const exposed = child.getExposed();
+                    return {
+                        id: child.id,
+                        name: child.name,
+                        exposed: exposed
+                    };
+                })
+                .filter(item => Object.keys(item.exposed).length > 0);
+        }
+    };
+
+    // 在组件实例上存储父组件上下文
+    if (instance.proxy) {
+        instance.proxy[PARENT_CONTEXT_SYMBOL] = parentContext;
+    }
+
+    // 组件卸载时清理
+    onUnmounted(() => {
+        // 清理所有子组件引用
+        childrenMap.forEach((child, childId) => {
+            parentContext.removeChild(childId);
+        });
+        if (instance.proxy) {
+            delete instance.proxy[PARENT_CONTEXT_SYMBOL];
+        }
+        logger.log(`Parent ${name} unmounted and cleaned up`);
+    });
+
+    return {
+        parentName: name,
+        children,
+        broadcast: parentContext.broadcast,
+        getChildren: parentContext.getChildren,
+        getChildExposed: parentContext.getChildExposed,
+        getChildrenExposed: parentContext.getChildrenExposed,
+        getExposed: parentContext.getExposed
+    };
+}
+
+/**
+ * 子组件 Hook
+ */
+export function useChildren(componentName?: string, parentName?: string) {
+    const instance = getCurrentInstance();
+    if (!instance) {
+        throw new Error('useChildren must be called within setup function');
+    }
+
+    // 使用组件名称作为默认名称
+    const name = componentName || instance.type.name || instance.type.__name;
+    if (!name) {
+        throw new Error('Component name is required for useChildren. Either provide a name or set component name.');
+    }
+
+    const instanceId = generateInstanceId(name);
+    const parentRef = ref<ParentContext | null>(null);
+    const parentExposed = ref<Record<string, any>>({});
+
+    // 获取父组件暴露内容
+    const getParentExposed = (): Record<string, any> => {
+        if (parentRef.value) {
+            const exposed = parentRef.value.getExposed();
+            parentExposed.value = exposed;
+            return exposed;
+        }
+        return {};
+    };
+
+    // 获取子组件exposed内容
+    const getExposed = (): Record<string, any> => {
+        return instance.exposed || {};
+    };
+
+    // 查找父组件
+    const findParent = (): ParentContext | null => {
+        // 如果指定了父组件名称，使用精确查找
+        if (parentName) {
+            return getParentContext(parentName, instance);
+        }
+
+        // 否则查找最近的父组件上下文
+        let current = instance.parent;
+        while (current) {
+            const context = current.proxy?.[PARENT_CONTEXT_SYMBOL];
+            if (context) {
+                return context;
+            }
+            current = current.parent;
+        }
+        return null;
+    };
+
+    // 链接到父组件
+    const linkParent = (): boolean => {
+        const parent = findParent();
+        if (parent) {
+            parentRef.value = parent;
+            parent.addChild(childContext);
+            getParentExposed();
+            logger.log(`Child ${name} linked to parent ${parent.name}`);
+            return true;
+        }
+        return false;
+    };
+
+    // 向父组件发送事件
+    const emitToParent = (event: string, data?: any) => {
+        if (parentRef.value) {
+            const exposed = parentRef.value.getExposed();
+            if (exposed && typeof exposed[event] === 'function') {
+                try {
+                    exposed[event](data, instanceId, name);
+                } catch (error) {
+                    logger.warn(`Error calling parent method ${event}:`, error);
+                }
+            } else {
+                logger.warn(`Parent method ${event} not found or not a function`);
+            }
+        } else {
+            logger.warn(`No parent found to emit event: ${event}`);
+        }
+    };
+
+    // 子组件上下文
+    const childContext: ChildContext = {
+        id: instanceId,
+        name,
+        emitToParent,
+        getParentExposed,
+        getInstance() {
+            return instance;
+        },
+        getExposed
+    };
+
+    logger.log(`Child ${name} registered, looking for parent`);
+
+    onMounted(() => {
+        // 立即尝试连接父组件
+        let connected = linkParent();
+        nextTick(() => {
+            // 如果未连接成功，500ms后重试一次
+            if (!connected) {
+                setTimeout(() => {
+                    linkParent();
+                }, 500);
+            }
+        });
+    });
+
+    // 组件卸载时清理
+    onUnmounted(() => {
+        if (parentRef.value) {
+            parentRef.value.removeChild(instanceId);
+        }
+        logger.log(`Child ${name} unmounted`);
+    });
+
+    return {
+        childId: instanceId,
+        childName: name,
+        parent: parentRef,
+        emitToParent,
+        getParentExposed,
+        parentExposed: computed(() => parentExposed.value),
+        getExposed
+    };
+}
+
+/**
+ * 检查父组件是否存在
+ */
+export function hasParent(parentName?: string): boolean {
+    const instance = getCurrentInstance();
+    if (!instance) return false;
+
+    if (parentName) {
+        return getParentContext(parentName, instance) !== null;
+    }
+
+    // 查找最近的父组件上下文
+    let current = instance.parent;
+    while (current) {
+        const context = current.proxy?.[PARENT_CONTEXT_SYMBOL];
+        if (context) {
+            return true;
+        }
+        current = current.parent;
+    }
+    return false;
+}
+
+/**
+ * 获取父组件上下文
+ */
+export function getParentContextByName(parentName: string): ParentContext | null {
+    const instance = getCurrentInstance();
+    if (!instance) return null;
+    return getParentContext(parentName, instance);
+}
+
+/**
+ * 热更新清理函数
+ */
+export function cleanupComponentRelations(): void {
+    logger.log('Cleaning up component relations for hot reload');
+    // 由于使用组件实例存储，热更新时会自动重新建立关系
+}
+
+// 热更新处理
+if (import.meta.hot) {
+    import.meta.hot.accept(() => {
+        logger.log('Hot reload detected, relations will be automatically reconnected');
+    });
+}
+
+export default {
+    useParent,
+    useChildren,
+    hasParent,
+    getParentContextByName,
+    cleanupComponentRelations
+};

package/libs/index.ts

@@ -165,49 +165,66 @@ export function addStyle(
  * @param {object | object[]} styles 外部传入的样式对象或数组
  * @returns {string} 格式化后的 CSS 样式字符串
  */
-export function toStyle(styles: Record<string, any> | Record<string, any>[] | string): string {
-    // 如果 styles 是字符串类型
-    if (test.string(styles)) {
-        // 如果是字符串且不为空，确保末尾有分号
-        return styles ? (styles.endsWith(';') ? styles : styles + ';') : '';
+export function toStyle(...styles: Array<Record<string, any> | string | null | undefined>): string {
+    // 支持多参数：每个参数可以是 object 或 string，后面的参数优先级更高，会覆盖同名样式
+    // 如果传入单个数组（兼容旧调用），解构展开
+    if (styles.length === 1 && Array.isArray(styles[0])) {
+        styles = (styles[0] as any[]).slice();
     }
-    // 如果 styles 是数组类型
-    if (test.array(styles)) {
-        // 使用过滤函数去除空值和 null 值的元素
-        // 对每个非空元素递归调用 objToStyle，然后通过分号连接
-        const result = styles
-            .filter(function (item) {
-                return item != null && item !== '';
-            })
-            .map(function (item) {
-                return toStyle(item);
-            })
-            .join(';');
 
-        // 如果结果不为空，确保末尾有分号
-        return result ? (result.endsWith(';') ? result : result + ';') : '';
-    }
-    // 如果 styles 是对象类型
-    if (test.object(styles)) {
-        // 使用 Object.keys 获取所有属性名
-        // 使用过滤函数去除值为 null 或空字符串的属性
-        // 对每个属性名和属性值进行格式化，通过分号连接
-        const result = Object.keys(styles)
-            .filter(function (key) {
-                return styles[key] != null && styles[key] !== '';
-            })
-            .map(function (key) {
-                // 使用 kebabCase 函数将属性名转换为 kebab-case 格式
-                // 将属性名和属性值格式化为 CSS 样式的键值对
-                return [kebabCase(key), styles[key]].join(':');
-            })
-            .join(';');
+    // 用于合并样式的 Map，key 使用 kebab-case
+    const map = new Map<string, any>();
+
+    const processString = (str: string) => {
+        if (!str) return;
+        // 移除可能的末尾分号，再按分号分割
+        const parts = str.split(';');
+        for (let part of parts) {
+            part = part.trim();
+            if (!part) continue;
+            const idx = part.indexOf(':');
+            if (idx === -1) continue;
+            const key = trim(part.slice(0, idx));
+            const val = trim(part.slice(idx + 1));
+            if (key === '' || val === '') continue;
+            const k = kebabCase(key);
+            map.set(k, val);
+        }
+    };
+
+    const processObject = (obj: Record<string, any>) => {
+        if (!obj) return;
+        Object.keys(obj).forEach(key => {
+            const val = obj[key];
+            if (val == null || val === '') return;
+            const k = kebabCase(key);
+            map.set(k, val);
+        });
+    };
 
-        // 如果结果不为空，确保末尾有分号
-        return result ? (result.endsWith(';') ? result : result + ';') : '';
+    for (const item of styles) {
+        if (item == null || item === '') continue;
+        if (test.string(item)) {
+            processString(item as string);
+        } else if (test.array(item)) {
+            // 若传入数组作为参数，递归处理数组元素
+            (item as any[]).forEach(el => {
+                if (test.string(el)) processString(el as string);
+                else if (test.object(el)) processObject(el as Record<string, any>);
+            });
+        } else if (test.object(item)) {
+            processObject(item as Record<string, any>);
+        }
     }
-    // 如果 styles 不是对象也不是数组，则直接返回
-    return '';
+
+    if (map.size === 0) return '';
+
+    // 按插入顺序构造样式字符串，值转成字符串
+    const result = Array.from(map.entries())
+        .map(([k, v]) => `${k}:${String(v)}`)
+        .join(';');
+
+    return result ? (result.endsWith(';') ? result : result + ';') : '';
 }
 
 /**

package/package.json

@@ -2,7 +2,7 @@
     "id": "uview-pro",
     "name": "uview-pro",
     "displayName": "【Vue3重构版】uView Pro｜基于Vue3+TS全面重构的70+精选UI组件库",
-    "version": "0.2.4",
+    "version": "0.3.0",
     "description": "uView Pro，是全面支持Vue3的uni-app生态框架，70+精选组件已使用TypeScript重构，已全面支持uni-app Vue3.0",
     "main": "index.ts",
     "module": "index.ts",

package/readme.md

@@ -38,10 +38,10 @@
 
 <table class="table">
     <tr>
-        <td><img src="https://ik.imagekit.io/anyup/images/social/qr_uview_pro_wx.jpg" width="200" height="200" ></td>
-        <td><img src="https://ik.imagekit.io/anyup/images/social/qr_uview_pro_alipay.png" width="200" height="200" ></td>
-        <td><img src="https://ik.imagekit.io/anyup/images/social/qr_uview_pro_h5.png" width="200" height="200" ></td>
-        <td><img src="https://ik.imagekit.io/anyup/images/social/qr_uview_pro_android.png" width="200" height="200" ></td>
+        <td><img src="https://ik.imagekit.io/anyup/images/social/qr_uview_pro_wx.jpg" width="150" height="150" ></td>
+        <td><img src="https://ik.imagekit.io/anyup/images/social/qr_uview_pro_alipay.png" width="150" height="150" ></td>
+        <td><img src="https://ik.imagekit.io/anyup/images/social/qr_uview_pro_h5.png" width="150" height="150" ></td>
+        <td><img src="https://ik.imagekit.io/anyup/images/social/qr_uview_pro_android.png" width="150" height="150" ></td>
     </tr>
     <tr>
         <td align="center"><strong>微信小程序</strong><br>（微信扫码）</td>
@@ -73,7 +73,7 @@ pnpm dev
 
 <table class="table">
     <tr>
-        <td><img src="https://ik.imagekit.io/anyup/images/social/weixin-chat.png?updatedAt=1759853787761" width="250" height="345" ></td>
+        <td><img src="https://ik.imagekit.io/anyup/images/social/weixin-chat.png?updatedAt=1760233880982" width="250" height="345" ></td>
         <td><img src="https://ik.imagekit.io/anyup/images/social/qq-chat.png" width="250" height="345" ></td>
     </tr>
     <tr>
@@ -212,7 +212,7 @@ export function createApp() {
 
 <table class="table">
     <tr>
-        <td><img src="https://ik.imagekit.io/anyup/images/social/weixin-pay.png" width="250" height="345" ></td>
+        <td><img src="https://ik.imagekit.io/anyup/images/social/wechat-pay.png" width="250" height="345" ></td>
         <td><img src="https://ik.imagekit.io/anyup/images/social/ali-pay.png" width="250" height="345" ></td>
     </tr>
     <tr>