uview-pro 0.2.3 → 0.3.0

package/components/u-verification-code/types.ts

@@ -1,10 +1,12 @@
 import type { ExtractPropTypes, PropType } from 'vue';
+import { baseProps } from '../common/props';
 
 /**
  * VerificationCodeProps 验证码输入框 props 类型定义
  * @description 验证码输入倒计时组件
  */
 export const VerificationCodeProps = {
+    ...baseProps,
     /** 倒计时时长，单位秒 */
     seconds: { type: [String, Number] as PropType<string | number>, default: 60 },
     /** 开始时按钮文字 */

package/components/u-verification-code/u-verification-code.vue

@@ -1,14 +1,26 @@
 <template>
-    <view class="u-code-wrap">
+    <view class="u-code-wrap" :class="customClass" :style="$u.toStyle(customStyle)">
         <!-- 此组件功能由js完成，无需写html逻辑 -->
     </view>
 </template>
 
+<script lang="ts">
+export default {
+    name: 'u-verification-code',
+    options: {
+        addGlobalClass: true,
+        // #ifndef MP-TOUTIAO
+        virtualHost: true,
+        // #endif
+        styleIsolation: 'shared'
+    }
+};
+</script>
+
 <script setup lang="ts">
 import { ref, watch, onMounted, onBeforeUnmount } from 'vue';
 import { VerificationCodeProps } from './types';
-
-defineOptions({ name: 'u-verification-code' });
+import { $u } from '../../';
 
 /**
  * verificationCode 验证码输入框

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/iconfont.css

@@ -23,7 +23,8 @@
             format('woff2'),
         url('//at.alicdn.com/t/font_1529455_k4s6di1d1.woff?t=1596960292384') format('woff'),
         url('//at.alicdn.com/t/font_1529455_k4s6di1d1.ttf?t=1596960292384') format('truetype'),
-        /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */ url('//at.alicdn.com/t/font_1529455_k4s6di1d1.svg?t=1596960292384#iconfont') format('svg');
+        /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
+            url('//at.alicdn.com/t/font_1529455_k4s6di1d1.svg?t=1596960292384#iconfont') format('svg');
 }
 
 /* #endif */

package/libs/css/style.vue.scss

@@ -52,7 +52,7 @@ page {
 
         /* #ifndef APP-NVUE */
         // vue下，单行和多行显示省略号需要单独处理
-        @if $i == '1' {
+        @if $i == 1 {
             overflow: hidden;
             white-space: nowrap;
             text-overflow: ellipsis;

package/libs/function/$parent.ts

@@ -4,7 +4,10 @@
 // 值(默认为undefined)，就是查找最顶层的$parent
 import { type ComponentInternalInstance, getCurrentInstance } from 'vue';
 
-export default function $parent(componentName?: string, _instance: ComponentInternalInstance | null | undefined = null) {
+export default function $parent(
+    componentName?: string,
+    _instance: ComponentInternalInstance | null | undefined = null
+) {
     const instance: ComponentInternalInstance | null | undefined = _instance || getCurrentInstance();
     let parent = instance && (instance.parent as ComponentInternalInstance | null | undefined);
 

package/libs/function/colorGradient.ts

@@ -5,7 +5,11 @@
  * @param step 颜色等分的份额
  * @returns 渐变色数组
  */
-function colorGradient(startColor: string = 'rgb(0, 0, 0)', endColor: string = 'rgb(255, 255, 255)', step: number = 10): string[] {
+function colorGradient(
+    startColor: string = 'rgb(0, 0, 0)',
+    endColor: string = 'rgb(255, 255, 255)',
+    step: number = 10
+): string[] {
     const startRGB = hexToRgb(startColor, false) as [number, number, number]; // 转换为rgb数组模式
     const [startR, startG, startB] = startRGB;
     const endRGB = hexToRgb(endColor, false) as [number, number, number];
@@ -17,7 +21,9 @@ function colorGradient(startColor: string = 'rgb(0, 0, 0)', endColor: string = '
     const colorArr: string[] = [];
     for (let i = 0; i < step; i++) {
         // 计算每一步的hex值
-        const hex = rgbToHex(`rgb(${Math.round(sR * i + startR)},${Math.round(sG * i + startG)},${Math.round(sB * i + startB)})`);
+        const hex = rgbToHex(
+            `rgb(${Math.round(sR * i + startR)},${Math.round(sG * i + startG)},${Math.round(sB * i + startB)})`
+        );
         colorArr.push(hex as string);
     }
     return colorArr;
@@ -41,7 +47,11 @@ function hexToRgb(sColor: string, str: boolean = true): [number, number, number]
             sColor = sColorNew;
         }
         // 处理六位的颜色值
-        const sColorChange: [number, number, number] = [parseInt('0x' + sColor.slice(1, 3)), parseInt('0x' + sColor.slice(3, 5)), parseInt('0x' + sColor.slice(5, 7))];
+        const sColorChange: [number, number, number] = [
+            parseInt('0x' + sColor.slice(1, 3)),
+            parseInt('0x' + sColor.slice(3, 5)),
+            parseInt('0x' + sColor.slice(5, 7))
+        ];
         if (!str) {
             return sColorChange;
         } else {
@@ -110,7 +120,11 @@ function colorToRgba(color: string, alpha: number = 0.3): string {
             }
             sColor = sColorNew;
         }
-        const sColorChange: [number, number, number] = [parseInt('0x' + sColor.slice(1, 3)), parseInt('0x' + sColor.slice(3, 5)), parseInt('0x' + sColor.slice(5, 7))];
+        const sColorChange: [number, number, number] = [
+            parseInt('0x' + sColor.slice(1, 3)),
+            parseInt('0x' + sColor.slice(3, 5)),
+            parseInt('0x' + sColor.slice(5, 7))
+        ];
         return `rgba(${sColorChange.join(',')},${alpha})`;
     } else {
         return sColor;

package/libs/function/deepMerge.ts

@@ -8,7 +8,8 @@ import deepClone from './deepClone';
  */
 function deepMerge<T extends object, S extends object>(target: T = {} as T, source: S = {} as S): T & S {
     target = deepClone(target);
-    if (typeof target !== 'object' || target === null || typeof source !== 'object' || source === null) return target as T & S;
+    if (typeof target !== 'object' || target === null || typeof source !== 'object' || source === null)
+        return target as T & S;
     const merged: any = Array.isArray(target) ? target.slice() : Object.assign({}, target);
     for (const prop in source) {
         if (!Object.prototype.hasOwnProperty.call(source, prop)) continue;

package/libs/function/getParent.ts

@@ -13,7 +13,11 @@ interface VueInstance {
  * @param keys 需要获取的参数名数组或对象
  * @returns 父组件参数对象
  */
-export default function getParent(this: VueInstance, name: string, keys: string[] | Record<string, any>): Record<string, any> {
+export default function getParent(
+    this: VueInstance,
+    name: string,
+    keys: string[] | Record<string, any>
+): Record<string, any> {
     let parent = this.$parent;
     // 通过while历遍，这里主要是为了H5需要多层解析的问题
     while (parent) {

package/libs/function/md5.ts

@@ -112,7 +112,10 @@ function rstr2b64(input: string): string {
     let output = '';
     const len: number = input.length;
     for (let i = 0; i < len; i += 3) {
-        const triplet: number = (input.charCodeAt(i) << 16) | (i + 1 < len ? input.charCodeAt(i + 1) << 8 : 0) | (i + 2 < len ? input.charCodeAt(i + 2) : 0);
+        const triplet: number =
+            (input.charCodeAt(i) << 16) |
+            (i + 1 < len ? input.charCodeAt(i + 1) << 8 : 0) |
+            (i + 2 < len ? input.charCodeAt(i + 2) : 0);
         for (let j = 0; j < 4; j++) {
             if (i * 8 + j * 6 > input.length * 8) output += b64pad;
             else output += tab.charAt((triplet >>> (6 * (3 - j))) & 0x3f);
@@ -187,8 +190,15 @@ function str2rstr_utf8(input: string): string {
         /* Encode output as utf-8 */
         if (x <= 0x7f) output += String.fromCharCode(x);
         else if (x <= 0x7ff) output += String.fromCharCode(0xc0 | ((x >>> 6) & 0x1f), 0x80 | (x & 0x3f));
-        else if (x <= 0xffff) output += String.fromCharCode(0xe0 | ((x >>> 12) & 0x0f), 0x80 | ((x >>> 6) & 0x3f), 0x80 | (x & 0x3f));
-        else if (x <= 0x1fffff) output += String.fromCharCode(0xf0 | ((x >>> 18) & 0x07), 0x80 | ((x >>> 12) & 0x3f), 0x80 | ((x >>> 6) & 0x3f), 0x80 | (x & 0x3f));
+        else if (x <= 0xffff)
+            output += String.fromCharCode(0xe0 | ((x >>> 12) & 0x0f), 0x80 | ((x >>> 6) & 0x3f), 0x80 | (x & 0x3f));
+        else if (x <= 0x1fffff)
+            output += String.fromCharCode(
+                0xf0 | ((x >>> 18) & 0x07),
+                0x80 | ((x >>> 12) & 0x3f),
+                0x80 | ((x >>> 6) & 0x3f),
+                0x80 | (x & 0x3f)
+            );
     }
     return output;
 }
@@ -200,7 +210,8 @@ function str2rstr_utf8(input: string): string {
  */
 function str2rstr_utf16le(input: string): string {
     let output = '';
-    for (let i = 0; i < input.length; i++) output += String.fromCharCode(input.charCodeAt(i) & 0xff, (input.charCodeAt(i) >>> 8) & 0xff);
+    for (let i = 0; i < input.length; i++)
+        output += String.fromCharCode(input.charCodeAt(i) & 0xff, (input.charCodeAt(i) >>> 8) & 0xff);
     return output;
 }
 
@@ -211,7 +222,8 @@ function str2rstr_utf16le(input: string): string {
  */
 function str2rstr_utf16be(input: string): string {
     let output = '';
-    for (let i = 0; i < input.length; i++) output += String.fromCharCode((input.charCodeAt(i) >>> 8) & 0xff, input.charCodeAt(i) & 0xff);
+    for (let i = 0; i < input.length; i++)
+        output += String.fromCharCode((input.charCodeAt(i) >>> 8) & 0xff, input.charCodeAt(i) & 0xff);
     return output;
 }
 

package/libs/function/queryParams.ts

@@ -5,7 +5,11 @@
  * @param arrayFormat 数组参数格式，indices/brackets/repeat/comma，默认brackets
  * @returns url参数字符串
  */
-function queryParams(data: Record<string, any> = {}, isPrefix: boolean = true, arrayFormat: 'indices' | 'brackets' | 'repeat' | 'comma' = 'brackets'): string {
+function queryParams(
+    data: Record<string, any> = {},
+    isPrefix: boolean = true,
+    arrayFormat: 'indices' | 'brackets' | 'repeat' | 'comma' = 'brackets'
+): string {
     const prefix = isPrefix ? '?' : '';
     const _result: string[] = [];
     if (!['indices', 'brackets', 'repeat', 'comma'].includes(arrayFormat)) arrayFormat = 'brackets';

package/libs/function/test.ts

@@ -2,7 +2,9 @@
  * 验证电子邮箱格式
  */
 function email(value: string): boolean {
-    return /[\w!#$%&'*+/=?^_`{|}~-]+(?:\.[\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\w](?:[\w-]*[\w])?\.)+[\w](?:[\w-]*[\w])?/.test(value);
+    return /[\w!#$%&'*+/=?^_`{|}~-]+(?:\.[\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\w](?:[\w-]*[\w])?\.)+[\w](?:[\w-]*[\w])?/.test(
+        value
+    );
 }
 
 /**
@@ -59,9 +61,11 @@ function idCard(value: string): boolean {
  */
 function carNo(value: string): boolean {
     // 新能源车牌
-    const xreg = /^[京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领A-Z]{1}[A-Z]{1}(([0-9]{5}[DF]$)|([DF][A-HJ-NP-Z0-9][0-9]{4}$))/;
+    const xreg =
+        /^[京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领A-Z]{1}[A-Z]{1}(([0-9]{5}[DF]$)|([DF][A-HJ-NP-Z0-9][0-9]{4}$))/;
     // 旧车牌
-    const creg = /^[京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领A-Z]{1}[A-Z]{1}[A-HJ-NP-Z0-9]{4}[A-HJ-NP-Z0-9挂学警港澳]{1}$/;
+    const creg =
+        /^[京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领A-Z]{1}[A-Z]{1}[A-HJ-NP-Z0-9]{4}[A-HJ-NP-Z0-9挂学警港澳]{1}$/;
     if (value.length === 7) {
         return creg.test(value);
     } else if (value.length === 8) {

package/libs/function/timeFormat.ts

@@ -3,7 +3,8 @@
 if (!String.prototype.padStart) {
     // 为了方便表示这里 fillString 用了ES6 的默认参数，不影响理解
     String.prototype.padStart = function (this: string, maxLength: number, fillString: string = ' '): string {
-        if (Object.prototype.toString.call(fillString) !== '[object String]') throw new TypeError('fillString must be String');
+        if (Object.prototype.toString.call(fillString) !== '[object String]')
+            throw new TypeError('fillString must be String');
         let str = this;
         if (str.length >= maxLength) return String(str);
         let fillLength = maxLength - str.length,

package/libs/function/type2icon.ts

@@ -4,7 +4,10 @@
  * @param fill 是否使用fill填充实体的图标，默认false
  * @returns 图标名称字符串
  */
-function type2icon(type: 'primary' | 'info' | 'error' | 'warning' | 'success' = 'success', fill: boolean = false): string {
+function type2icon(
+    type: 'primary' | 'info' | 'error' | 'warning' | 'success' = 'success',
+    fill: boolean = false
+): string {
     // 如果非预置值,默认为success
     if (!['primary', 'info', 'error', 'warning', 'success'].includes(type)) type = 'success';
     let iconName = '';

package/libs/hooks/index.ts

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