@zfqh/uview-x 0.0.5 → 0.0.7

package/components/uv-input/uv-input.vue

@@ -68,7 +68,8 @@
 
 <script setup lang="ts">
 	import { computed, inject, nextTick, ref, watch } from 'vue'
-	import { $uv } from '../../utils'
+	import { addStyle, addUnit, sleep } from '../../utils/function'
+	import { deepMerge } from '../../utils/merge'
 	import props from './props'
 	import UvIcon from '../uv-icon/uv-icon.vue'
 
@@ -237,7 +238,7 @@
 		return p.placeholder === null || p.placeholder === undefined ? '' : String(p.placeholder)
 	})
 
-	const placeholderStyleStr = computed(() => $uv.addStyle(p.placeholderStyle, 'string'))
+	const placeholderStyleStr = computed(() => addStyle(p.placeholderStyle, 'string'))
 
 	// 是否显示清除控件
 	const isShowClear = computed(() => {
@@ -275,14 +276,14 @@
 			style.paddingLeft = '9px'
 			style.paddingRight = '9px'
 		}
-		return $uv.deepMerge(style, $uv.addStyle(p.customStyle))
+		return deepMerge(style, addStyle(p.customStyle))
 	})
 
 	// 输入框的样式
 	const inputStyle = computed(() => {
 		const style: any = {
 			color: p.color,
-			fontSize: $uv.addUnit(p.fontSize),
+			fontSize: addUnit(p.fontSize),
 			textAlign: p.inputAlign
 		}
 		if (p.disabled || p.readonly) {
@@ -323,7 +324,7 @@
 		emit('blur', currentValue)
 		// H5端的blur会先于点击清除控件的点击click事件触发，导致focused
 		// 瞬间为false，从而隐藏了清除控件而无法被点击到
-		$uv.sleep(100).then(() => {
+		sleep(100).then(() => {
 			focused.value = false
 		})
 		// 尝试调用uv-form的验证方法

package/components/uv-line/uv-line.vue

@@ -8,7 +8,8 @@
 
 <script setup lang="ts">
 	import { computed } from 'vue'
-	import { $uv } from '../../utils'
+	import { addStyle, addUnit } from '../../utils/function'
+	import { deepMerge } from '../../utils/merge'
 	import props from './props'
 
 	defineOptions({
@@ -42,10 +43,10 @@
 			style.borderBottomWidth = '1px'
 			style.borderBottomStyle = p.dashed ? 'dashed' : 'solid'
 			if (!isPercent) {
-				style.width = $uv.addUnit(p.length)
+				style.width = addUnit(p.length)
 			} else {
 				// #ifndef APP-NVUE
-				style.width = $uv.addUnit(p.length)
+				style.width = addUnit(p.length)
 				// #endif
 			}
 			if (p.hairline) style.transform = 'scaleY(0.5)'
@@ -53,16 +54,16 @@
 			style.borderLeftWidth = '1px'
 			style.borderLeftStyle = p.dashed ? 'dashed' : 'solid'
 			if (!isPercent) {
-				style.height = $uv.addUnit(p.length)
+				style.height = addUnit(p.length)
 			} else {
 				// #ifndef APP-NVUE
-				style.height = $uv.addUnit(p.length)
+				style.height = addUnit(p.length)
 				// #endif
 			}
 			if (p.hairline) style.transform = 'scaleX(0.5)'
 		}
 		style.borderColor = p.color
-		return $uv.deepMerge(style, $uv.addStyle(p.customStyle))
+		return deepMerge(style, addStyle(p.customStyle))
 	})
 </script>
 

package/components/uv-line-progress/uv-line-progress.vue

@@ -2,7 +2,7 @@
 	<view
 		class="uv-line-progress"
 		:class="[p.customClass]"
-		:style="[$uv.addStyle(p.customStyle)]"
+		:style="[addStyle(p.customStyle)]"
 	>
 		<view
 			ref="barRef"
@@ -26,7 +26,7 @@
 
 <script setup lang="ts">
 	import { computed, onMounted, ref, watch } from 'vue'
-	import { $uv } from '../../utils'
+	import { addStyle, addUnit, getPx, range } from '../../utils/function'
 	import props from './props'
 	import { getRectNvue } from '../../utils/compat'
 
@@ -54,7 +54,7 @@
 
 	// 控制范围在0-100之间
 	const innserPercentage = computed(() => {
-		return $uv.range(0, 100, p.percentage)
+		return range(0, 100, p.percentage)
 	})
 
 	const percentageText = computed(() => `${innserPercentage.value}%`)
@@ -82,7 +82,7 @@
 	const backgroundStyle = computed(() => {
 		const style: any = {
 			backgroundColor: p.inactiveColor,
-			height: $uv.addUnit($uv.getPx(p.height))
+			height: addUnit(getPx(p.height))
 		}
 		return style
 	})
@@ -91,7 +91,7 @@
 	const progressStyle = computed(() => {
 		const style: any = {
 			backgroundColor: p.activeColor,
-			height: $uv.addUnit($uv.getPx(p.height))
+			height: addUnit(getPx(p.height))
 		}
 		// #ifdef APP-NVUE
 		style.width = nvueBarWidth.value > 0 ? `${(nvueBarWidth.value * innserPercentage.value) / 100}px` : '0px'

package/components/uv-loading-icon/uv-loading-icon.vue

@@ -3,7 +3,7 @@
 		v-if="p.show"
 		class="uv-loading-icon"
 		:class="[p.vertical ? 'uv-loading-icon--vertical' : '', p.customClass]"
-		:style="[$uv.addStyle(p.customStyle)]"
+		:style="[addStyle(p.customStyle)]"
 	>
 		<view
 			class="uv-loading-icon__spinner"
@@ -14,7 +14,7 @@
 			<loading-indicator
 				v-if="p.mode === 'spinner'"
 				:animating="true"
-				:style="{ color: p.color, width: $uv.addUnit(p.size), height: $uv.addUnit(p.size) }"
+				:style="{ color: p.color, width: addUnit(p.size), height: addUnit(p.size) }"
 			/>
 			<!-- #endif -->
 			<!-- #ifndef APP-NVUE -->
@@ -38,16 +38,17 @@
 			class="uv-loading-icon__text"
 			:class="[p.vertical ? 'uv-loading-icon__text--vertical' : '']"
 			:style="[{
-				fontSize: $uv.addUnit(p.textSize),
+				fontSize: addUnit(p.textSize),
 				color: p.textColor
-			}, $uv.addStyle(p.textStyle)]"
+			}, addStyle(p.textStyle)]"
 		>{{ p.text }}</text>
 	</view>
 </template>
 
 <script setup lang="ts">
 	import { computed, nextTick, onMounted, onUnmounted, ref, watch } from 'vue'
-	import { $uv } from '../../utils'
+	import { addStyle, addUnit } from '../../utils/function'
+	import { colorGradient } from '../../utils/color'
 	import props from './props'
 
 	defineOptions({
@@ -92,7 +93,7 @@
 	// 当为circle类型时，给其另外三边设置一个更轻一些的颜色
 	// 之所以需要这么做的原因是，比如父组件传了color为红色，那么需要另外的三个边为浅红色
 	const otherBorderColor = computed(() => {
-		const lightColor = $uv.colorGradient(p.color, '#ffffff', 100)[80]
+		const lightColor = colorGradient(p.color, '#ffffff', 100)[80]
 		if (p.mode === 'circle') {
 			return p.inactiveColor ? p.inactiveColor : lightColor
 		}
@@ -102,8 +103,8 @@
 	const spinnerStyle = computed(() => {
 		return {
 			color: p.color,
-			width: $uv.addUnit(p.size),
-			height: $uv.addUnit(p.size),
+			width: addUnit(p.size),
+			height: addUnit(p.size),
 			borderTopColor: p.color,
 			borderBottomColor: otherBorderColor.value,
 			borderLeftColor: otherBorderColor.value,

package/components/uv-overlay/uv-overlay.vue

@@ -14,7 +14,8 @@
 
 <script setup lang="ts">
 	import { computed, onUnmounted, watch } from 'vue'
-	import { $uv } from '../../utils'
+	import { addStyle } from '../../utils/function'
+	import { deepMerge } from '../../utils/merge'
 	import props from './props'
 	import UvTransition from '../uv-transition/uv-transition.vue'
 	import { preventEvent } from '../../utils/compat'
@@ -60,7 +61,7 @@
 			zIndex: p.zIndex,
 			backgroundColor: `rgba(0, 0, 0, ${p.opacity})`
 		}
-		return $uv.deepMerge(style, $uv.addStyle(p.customStyle))
+		return deepMerge(style, addStyle(p.customStyle))
 	})
 
 	const clickHandler = () => {

package/components/uv-popup/uv-popup.vue

@@ -57,7 +57,9 @@
 
 <script setup lang="ts">
 	import { computed, onMounted, onUnmounted, ref } from 'vue'
-	import { $uv, platform } from '../../utils'
+	import { addStyle, addUnit, error, getPx } from '../../utils/function'
+	import { deepMerge } from '../../utils/merge'
+	import { platform } from '../../utils/platform'
 	import props from './props'
 	import UvIcon from '../uv-icon/uv-icon.vue'
 	import UvOverlay from '../uv-overlay/uv-overlay.vue'
@@ -121,7 +123,7 @@
 	let closeTimer: any = null
 
 	const bg = computed(() => {
-		if (p.bgColor === '' || p.bgColor === 'none' || $uv.getPx(p.round) > 0) {
+		if (p.bgColor === '' || p.bgColor === 'none' || getPx(p.round) > 0) {
 			return 'transparent'
 		}
 		return p.bgColor
@@ -133,7 +135,7 @@
 			style.backgroundColor = bg.value
 		}
 		if (p.round) {
-			const value = $uv.addUnit(p.round)
+			const value = addUnit(p.round)
 			const mode = layoutMode.value
 			style.backgroundColor = p.bgColor
 			if (mode === 'top') {
@@ -149,7 +151,7 @@
 				style.borderBottomRightRadius = value
 			}
 		}
-		return $uv.deepMerge(style, $uv.addStyle(p.customStyle))
+		return deepMerge(style, addStyle(p.customStyle))
 	})
 
 	const ani = computed<string[]>(() => {
@@ -279,7 +281,7 @@
 			direction = p.mode
 		}
 		if (innerType.indexOf(direction) === -1) {
-			$uv.error('缺少类型：' + direction)
+			error('缺少类型：' + direction)
 			return
 		}
 		layoutMode.value = getLayoutMode(direction)

package/components/uv-safe-bottom/uv-safe-bottom.vue

@@ -8,7 +8,8 @@
 
 <script setup lang="ts">
 	import { computed, onMounted, ref } from 'vue'
-	import { $uv } from '../../utils'
+	import { addStyle, addUnit } from '../../utils/function'
+	import { deepMerge } from '../../utils/merge'
 	import props from './props'
 
 
@@ -89,9 +90,9 @@
 		const style: any = {}
 		const height = safeBottomHeight.value
 		if (height > 0) {
-			style.height = $uv.addUnit(height, 'px')
+			style.height = addUnit(height, 'px')
 		}
-		return $uv.deepMerge(style, $uv.addStyle(p.customStyle))
+		return deepMerge(style, addStyle(p.customStyle))
 	})
 </script>
 

package/components/uv-status-bar/uv-status-bar.vue

@@ -10,7 +10,8 @@
 
 <script setup lang="ts">
 	import { computed, onMounted, ref } from 'vue'
-	import { $uv } from '../../utils'
+	import { addStyle, addUnit } from '../../utils/function'
+	import { deepMerge } from '../../utils/merge'
 	import props from './props'
 
 	defineOptions({
@@ -83,7 +84,7 @@
 		const style: any = {}
 		const height = statusBarHeight.value
 		if (height > 0) {
-			style.height = $uv.addUnit(height, 'px')
+			style.height = addUnit(height, 'px')
 		}
 		if (p.bgColor) {
 			if (p.bgColor.indexOf('gradient') > -1) {
@@ -97,7 +98,7 @@
 				style.background = p.bgColor
 			}
 		}
-		return $uv.deepMerge(style, $uv.addStyle(p.customStyle))
+		return deepMerge(style, addStyle(p.customStyle))
 	})
 </script>
 

package/components/uv-tabs/uv-tabs.vue

@@ -2,7 +2,7 @@
 	<view
 		class="uv-tabs"
 		:class="[p.customClass]"
-		:style="[$uv.addStyle(p.customStyle)]"
+		:style="[addStyle(p.customStyle)]"
 	>
 		<view class="uv-tabs__wrapper">
 			<slot name="left" />
@@ -40,7 +40,7 @@
 								`uv-tabs__wrapper__nav__item-${index}`,
 								item.disabled ? 'uv-tabs__wrapper__nav__item--disabled' : ''
 							]"
-							:style="[itemFlexStyle, $uv.addStyle(p.itemStyle)]"
+							:style="[itemFlexStyle, addStyle(p.itemStyle)]"
 							@tap="clickHandler(item, index)"
 						>
 							<text
@@ -78,7 +78,10 @@
 
 <script setup lang="ts">
 	import { computed, getCurrentInstance, nextTick, onMounted, ref, watch } from 'vue'
-	import { $uv } from '../../utils'
+	import { addStyle, addUnit, getPx, sleep, sys } from '../../utils/function'
+	import { deepMerge } from '../../utils/merge'
+	import { number as isNumber } from '../../utils/test'
+	import config from '../../utils/config'
 	import props from './props'
 	import UvBadge from '../uv-badge/uv-badge.vue'
 	import { getRect, getRectNvue } from '../../utils/compat'
@@ -169,10 +172,10 @@
 
 	const lineStyle = computed(() => {
 		const style: any = {
-			width: $uv.addUnit(p.lineWidth),
+			width: addUnit(p.lineWidth),
 			transform: `translate(${lineOffsetLeft.value}px)`,
 			transitionDuration: `${firstTime.value ? 0 : Number(p.duration) || 0}ms`,
-			height: firstTime.value ? 0 : $uv.addUnit(p.lineHeight),
+			height: firstTime.value ? 0 : addUnit(p.lineHeight),
 			// 使用 background 简写而不是 backgroundColor：lineColor 支持传入背景图（url(...)）
 			background: p.lineColor,
 			backgroundSize: p.lineBgSize
@@ -184,13 +187,13 @@
 		const item = p.list[index] as any
 		// 取当前是否激活的样式
 		const style: any =
-			(index === innerCurrent.value ? $uv.addStyle(p.activeStyle) : $uv.addStyle(p.inactiveStyle)) || {}
+			(index === innerCurrent.value ? addStyle(p.activeStyle) : addStyle(p.inactiveStyle)) || {}
 		const extra: any = {}
 		// 如果当前菜单被禁用，则加上对应颜色
 		if (item && item.disabled) {
 			extra.color = '#c8c9cc'
 		}
-		return $uv.deepMerge(style, extra)
+		return deepMerge(style, extra)
 	}
 
 	// 获取单个节点的尺寸（返回 unbounded 的 rect 对象）
@@ -231,9 +234,9 @@
 			if (rect) offsetLeft += rect.width
 		}
 		// 获取下划线的数值px表示法
-		let lineWidth = $uv.getPx(p.lineWidth)
-		if ($uv.test.number(p.lineWidth) && $uv.config.unit) {
-			lineWidth = $uv.getPx(`${p.lineWidth}${$uv.config.unit}`)
+		let lineWidth = getPx(p.lineWidth)
+		if (isNumber(p.lineWidth) && config.unit) {
+			lineWidth = getPx(`${p.lineWidth}${config.unit}`)
 		}
 		lineOffsetLeft.value = offsetLeft + (tabItem.width - lineWidth) / 2
 		// 第一次移动滑块，需要等过渡结束后再开启动画
@@ -254,7 +257,7 @@
 			const rect = itemRects[i]
 			if (rect) offsetLeft += rect.width
 		}
-		const windowWidth = $uv.sys().windowWidth || 0
+		const windowWidth = sys().windowWidth || 0
 		// nvue 的 dom.getComponentRect 在部分基座下只返回 width/height，缺失 left/right 时兜底：
 		// right 用 left + width 补齐，left 缺失按 0 处理，避免 NaN 导致 scrollLeft 失效。
 		const tabsWidth = Number(tabsRect.width) || 0
@@ -296,7 +299,7 @@
 	}
 
 	const init = () => {
-		$uv.sleep().then(() => {
+		sleep().then(() => {
 			resize()
 		})
 	}

package/components/uv-transition/uv-transition.vue

@@ -12,7 +12,7 @@
 
 <script setup lang="ts">
 	import { computed, nextTick, onBeforeUnmount, ref, watch } from 'vue'
-	import { $uv } from '../../utils'
+	import { addStyle } from '../../utils/function'
 	import props from './props'
 
 	defineOptions({
@@ -94,7 +94,7 @@
 			transform: active.value ? '' : hidden.transform,
 			opacity: active.value ? 1 : hidden.opacity
 		}
-		return Object.assign(style, $uv.addStyle(p.customStyle))
+		return Object.assign(style, addStyle(p.customStyle))
 	})
 
 	const clearTimers = () => {

package/hooks/index.ts

@@ -1,5 +1,5 @@
-export { useDebounce } from './useDebounce';
-export { useThrottle } from './useThrottle';
-export * from './useI18n';
-export type { DebounceFunction } from './useDebounce';
-export type { ThrottleFunction } from './useThrottle';
+export { default as useDebounce } from './useDebounce';
+export { default as useThrottle } from './useThrottle';
+export { default as useI18n } from './useI18n';
+export type { UViewDebounceFunction } from './useDebounce';
+export type { UViewThrottleFunction } from './useThrottle';

package/hooks/useDebounce.ts

@@ -1,35 +1,33 @@
-/**
- * 实例级防抖。
- *
- * @example
- * const debounce = useDebounce()
- * debounce(fn)              // 使用实例 delay（默认 500）
- * debounce(fn, 1000)        // 调用层覆盖 delay
- * const debounce300 = useDebounce(300)
- *
- * 每个 useDebounce() 返回独立闭包，多个实例互不干扰。
- */
-export type DebounceFunction = (
-	func: (...args: any[]) => void,
-	wait?: number,
-	immediate?: boolean
-) => void
-
-export function useDebounce(delay = 500): DebounceFunction {
-	let timeout: ReturnType<typeof setTimeout> | null = null
-	return (func: (...args: any[]) => void, wait = delay, immediate = false) => {
-		if (timeout !== null) clearTimeout(timeout)
-		if (immediate) {
-			const callNow = !timeout
-			timeout = setTimeout(() => {
-				timeout = null
-			}, wait)
-			if (callNow) typeof func === 'function' && func()
-		} else {
-			timeout = setTimeout(() => {
-				timeout = null
-				typeof func === 'function' && func()
-			}, wait)
-		}
-	}
-}
+/**
+ * 实例级防抖。
+ *
+ * @example
+ * const debounce = useDebounce()
+ * debounce(fn)              // 使用实例 delay（默认 500）
+ * debounce(fn, 1000)        // 调用层覆盖 delay
+ * const debounce300 = useDebounce(300)
+ *
+ * 每个 useDebounce() 返回独立闭包，多个实例互不干扰。
+ */
+export type UViewDebounceFunction = (func: (...args: any[]) => void, wait?: number, immediate?: boolean) => void;
+
+function useDebounce(delay = 500): UViewDebounceFunction {
+  let timeout: ReturnType<typeof setTimeout> | null = null;
+  return (func: (...args: any[]) => void, wait = delay, immediate = false) => {
+    if (timeout !== null) clearTimeout(timeout);
+    if (immediate) {
+      const callNow = !timeout;
+      timeout = setTimeout(() => {
+        timeout = null;
+      }, wait);
+      if (callNow) typeof func === 'function' && func();
+    } else {
+      timeout = setTimeout(() => {
+        timeout = null;
+        typeof func === 'function' && func();
+      }, wait);
+    }
+  };
+}
+
+export default useDebounce;

package/hooks/useI18n.ts

@@ -5,7 +5,7 @@ import { getCurrentInstance } from 'vue';
 import { useI18n as vueUseI18n } from 'vue-i18n';
 // #endif
 import { appTranslate, getI18nGlobal, getI18nMessages, localeState, unwrapI18nValue } from '../utils/locale';
-import type { I18nMessages } from '../utils/locale';
+import type { I18nGlobalMessages } from '../utils/locale';
 
 /** 页面内使用的 i18n hook 类型：与 vue-i18n 的 `useI18n` 保持一致 */
 type UseI18n = typeof import('vue-i18n').useI18n;
@@ -14,7 +14,7 @@ type UseI18n = typeof import('vue-i18n').useI18n;
 interface UseI18nFallback {
   t: (key: string, values?: Record<string, string | number>) => string;
   locale: WritableComputedRef<string>;
-  messages: I18nMessages;
+  messages: I18nGlobalMessages;
 }
 
 /**
@@ -92,4 +92,5 @@ _useI18n = function (...args: unknown[]) {
 } as unknown as UseI18n;
 // #endif
 
-export const useI18n: UseI18n = _useI18n;
+const useI18n: UseI18n = _useI18n;
+export default useI18n;

package/hooks/useThrottle.ts

@@ -1,38 +1,36 @@
-/**
- * 实例级节流。
- *
- * @example
- * const throttle = useThrottle()
- * throttle(fn)              // 使用实例 delay（默认 500）
- * throttle(fn, 1000)        // 调用层覆盖 delay
- * const throttle300 = useThrottle(300)
- *
- * 每个 useThrottle() 返回独立闭包，多个实例互不干扰。
- */
-export type ThrottleFunction = (
-	func: (...args: any[]) => void,
-	wait?: number,
-	immediate?: boolean
-) => void
-
-export function useThrottle(delay = 500): ThrottleFunction {
-	let timer: ReturnType<typeof setTimeout> | null = null
-	let flag = false
-	return (func: (...args: any[]) => void, wait = delay, immediate = true) => {
-		if (immediate) {
-			if (!flag) {
-				flag = true
-				typeof func === 'function' && func()
-				timer = setTimeout(() => {
-					flag = false
-				}, wait)
-			}
-		} else if (!flag) {
-			flag = true
-			timer = setTimeout(() => {
-				flag = false
-				typeof func === 'function' && func()
-			}, wait)
-		}
-	}
-}
+/**
+ * 实例级节流。
+ *
+ * @example
+ * const throttle = useThrottle()
+ * throttle(fn)              // 使用实例 delay（默认 500）
+ * throttle(fn, 1000)        // 调用层覆盖 delay
+ * const throttle300 = useThrottle(300)
+ *
+ * 每个 useThrottle() 返回独立闭包，多个实例互不干扰。
+ */
+export type UViewThrottleFunction = (func: (...args: any[]) => void, wait?: number, immediate?: boolean) => void;
+
+function useThrottle(delay = 500): UViewThrottleFunction {
+  let timer: ReturnType<typeof setTimeout> | null = null;
+  let flag = false;
+  return (func: (...args: any[]) => void, wait = delay, immediate = true) => {
+    if (immediate) {
+      if (!flag) {
+        flag = true;
+        typeof func === 'function' && func();
+        timer = setTimeout(() => {
+          flag = false;
+        }, wait);
+      }
+    } else if (!flag) {
+      flag = true;
+      timer = setTimeout(() => {
+        flag = false;
+        typeof func === 'function' && func();
+      }, wait);
+    }
+  };
+}
+
+export default useThrottle;