uview-plus 3.7.36 → 3.8.32

package/components/u-upload/u-upload.vue

@@ -8,20 +8,28 @@
 				    :key="index"
 				>
 					<image
-					    v-if="item.isImage || (item.type && item.type === 'image')"
+					    v-if="(item.isImage || (item.type && item.type === 'image')) && (item.thumb || item.url)"
 					    :src="item.thumb || item.url"
 					    :mode="imageMode"
 					    class="u-upload__wrap__preview__image"
 					    @tap="onClickPreview(item, index)"
 						:style="[{
 							width: addUnit(width),
-							height: addUnit(height)
+							height: addUnit(height),
+							backgroundColor: upThemeVar('--up-card-bg-color', 'rgb(242, 242, 242)'),
+							borderColor: upThemeVar('--up-border-color', '#e5e7eb'),
+							borderWidth: '1px',
+							borderStyle: 'solid'
 						}]"
 					/>
 					<view class="u-upload__wrap__preview__video"
 						:style="{
 							width: addUnit(width),
-							height: addUnit(height)
+							height: addUnit(height),
+							backgroundColor: upThemeVar('--up-card-bg-color', 'rgb(242, 242, 242)'),
+							borderColor: upThemeVar('--up-border-color', '#e5e7eb'),
+							borderWidth: '1px',
+							borderStyle: 'solid'
 						}"
 						v-else-if="(item.isVideo || (item.type && item.type === 'video')) && getVideoThumb">
 						<image
@@ -56,7 +64,11 @@
 						@tap="onClickPreview(item, index)"
 						:style="[{
 							width: addUnit(width),
-							height: addUnit(height)
+							height: addUnit(height),
+							backgroundColor: upThemeVar('--up-card-bg-color', 'rgb(242, 242, 242)'),
+							borderColor: upThemeVar('--up-border-color', '#e5e7eb'),
+							borderWidth: '1px',
+							borderStyle: 'solid'
 						}]"
 					>
 						<up-icon
@@ -153,17 +165,22 @@
 				    :class="[disabled && 'u-upload__button--disabled']"
 					:style="[{
 						width: addUnit(width),
-						height: addUnit(height)
+						height: addUnit(height),
+						backgroundColor: upThemeVar('--up-card-bg-color', 'rgb(244, 245, 247)'),
+						borderColor: upThemeVar('--up-border-color', '#e5e7eb'),
+						borderWidth: '1px',
+						borderStyle: 'solid'
 					}]"
 				>
 					<up-icon
 					    :name="uploadIcon"
 					    size="26"
-					    :color="uploadIconColor"
+					    :color="resolvedUploadIconColor"
 					></up-icon>
 					<text
 					    v-if="uploadText"
 					    class="u-upload__button__text"
+						:style="{ color: resolvedUploadTextColor }"
 					>{{ uploadText }}</text>
 				</view>
 			</template>
@@ -267,6 +284,17 @@
 				}
 			}
 		},
+		computed: {
+			resolvedUploadIconColor() {
+				if (this.upHasProp('uploadIconColor') || this.uploadIconColor !== '#D3D4D6') {
+					return this.uploadIconColor
+				}
+				return this.upThemeVar('--up-content-color', '#909399')
+			},
+			resolvedUploadTextColor() {
+				return this.upThemeVar('--up-tips-color', '#909399')
+			}
+		},
 		// #ifdef VUE3
 		emits: ['error', 'beforeRead', 'oversize', 'afterRead', 'delete', 'clickPreview', 'update:fileList', 'afterAutoUpload'],
 		// #endif

package/index.js

@@ -43,6 +43,95 @@ import fontUtil from './components/u-icon/util.js';
 
 // i18n
 import i18n, { t } from './libs/i18n/index.js'
+import {
+    themeState,
+    setTheme,
+    setThemePreference,
+    getThemePreference,
+    getSystemTheme,
+    getThemeVars,
+    initThemeSystem,
+    refreshThemeFromConfig,
+    syncThemeColorOverrideState
+} from './libs/theme/theme.js'
+import {
+    applyNativeThemeUI,
+    getThemeCardStyle,
+    getThemeIsDark,
+    getThemePageStyle,
+    getThemeTabBarStyle,
+    getThemeVar,
+    getThemeVarsForStyle
+} from './libs/theme/runtime.js'
+
+const rootToastState = {
+    ref: null
+}
+const rootNotifyState = {
+    ref: null
+}
+
+function normalizeRootToastOptions(options = {}) {
+    const toastOptions = typeof options === 'string'
+        ? { message: options }
+        : (options && typeof options === 'object' ? { ...options } : {})
+    if (!toastOptions.message && toastOptions.title) {
+        toastOptions.message = toastOptions.title
+    }
+    return toastOptions
+}
+
+function setRootToastRef(ref = null) {
+    rootToastState.ref = ref || null
+}
+
+function rootToast(options = {}) {
+    const toastOptions = normalizeRootToastOptions(options)
+    const toastRef = rootToastState.ref
+    if (toastRef && typeof toastRef.show === 'function') {
+        toastRef.show(toastOptions)
+        return
+    }
+    if (!toastOptions.message) return
+    if (typeof uni !== 'undefined' && typeof uni.showToast === 'function') {
+        uni.showToast({
+            title: toastOptions.message,
+            icon: 'none',
+            duration: Number(toastOptions.duration) || 2000,
+        })
+    }
+}
+
+function normalizeRootNotifyOptions(options = {}) {
+    const notifyOptions = typeof options === 'string'
+        ? { message: options }
+        : (options && typeof options === 'object' ? { ...options } : {})
+    if (!notifyOptions.message && notifyOptions.title) {
+        notifyOptions.message = notifyOptions.title
+    }
+    return notifyOptions
+}
+
+function setRootNotifyRef(ref = null) {
+    rootNotifyState.ref = ref || null
+}
+
+function rootNotify(options = {}) {
+    const notifyOptions = normalizeRootNotifyOptions(options)
+    const notifyRef = rootNotifyState.ref
+    if (notifyRef && typeof notifyRef.show === 'function') {
+        notifyRef.show(notifyOptions)
+        return
+    }
+    if (!notifyOptions.message) return
+    if (typeof uni !== 'undefined' && typeof uni.showToast === 'function') {
+        uni.showToast({
+            title: notifyOptions.message,
+            icon: 'none',
+            duration: Number(notifyOptions.duration) || 3000,
+        })
+    }
+}
 
 // 导出
 let themeType = ['primary', 'success', 'error', 'warning', 'info'];
@@ -58,10 +147,21 @@ export * from './libs/function/colorGradient.js'
  * @param {object} zIndex 修改内置zIndex属性
  */
 export function setConfig(configs) {
-	index.shallowMerge(config, configs.config || {})
-	index.shallowMerge(props, configs.props || {})
-	index.shallowMerge(color, configs.color || {})
-	index.shallowMerge(zIndex, configs.zIndex || {})
+    const settings = configs || {}
+	index.shallowMerge(config, settings.config || {})
+	index.shallowMerge(props, settings.props || {})
+	index.shallowMerge(color, settings.color || {})
+	index.shallowMerge(zIndex, settings.zIndex || {})
+    syncThemeColorOverrideState({
+        color: settings.color,
+        configColor: settings?.config?.color
+    })
+    const shouldRefreshTheme = !!settings.color
+        || !!settings?.config?.color
+        || themeState.version > 0
+    if (shouldRefreshTheme) {
+        refreshThemeFromConfig()
+    }
 }
 index.setConfig = setConfig
 
@@ -85,11 +185,59 @@ const $u = {
     // props,
     ...index,
     color,
-    platform
+    platform,
+    theme: themeState,
+    setTheme,
+    setThemePreference,
+    getThemePreference,
+    getSystemTheme,
+    getThemeVars,
+    getThemeTabBarStyle,
+    applyNativeThemeUI,
+    rootToast,
+    setRootToastRef,
+    rootNotify,
+    setRootNotifyRef
 }
 
 export const mount$u = function() {
     uni.$u = $u
+    initThemeSystem()
+}
+
+function defineGlobalThemeHelpers(Vue) {
+    const globalProperties = Vue?.config?.globalProperties
+    if (!globalProperties) return
+    Object.defineProperty(globalProperties, 'upThemeIsDark', {
+        configurable: true,
+        get() {
+            return getThemeIsDark()
+        }
+    })
+    Object.defineProperty(globalProperties, 'upThemeVars', {
+        configurable: true,
+        get() {
+            return getThemeVarsForStyle()
+        }
+    })
+    Object.defineProperty(globalProperties, 'upThemePageStyle', {
+        configurable: true,
+        get() {
+            return getThemePageStyle()
+        }
+    })
+    Object.defineProperty(globalProperties, 'upThemeCardStyle', {
+        configurable: true,
+        get() {
+            return getThemeCardStyle()
+        }
+    })
+    globalProperties.upThemeVar = function(varName, fallbackColor) {
+        return getThemeVar(varName, fallbackColor)
+    }
+    globalProperties.upApplyNativeThemeUI = function() {
+        return applyNativeThemeUI()
+    }
 }
 
 function toCamelCase(str) {
@@ -100,27 +248,27 @@ function toCamelCase(str) {
     });
 }
 
-// #ifdef APP || H5
-const importFn = import.meta.glob('./components/u-*/u-*.vue', { eager: true })
-let components = [];
-
-// 批量注册全局组件
-for (const key in importFn) {
-    let component = importFn[key].default;
-    if (component.name && component.name.indexOf('u--') !== 0) {
-        component.install = function (Vue) {
-            Vue.component(name, component);
-        };
-        
-        // 导入组件
-        components.push(component);
+let components = []
+
+function resolveComponents() {
+    if (components.length) return components
+    // #ifdef H5
+    const canUseGlob = typeof import.meta !== 'undefined' && typeof import.meta.glob === 'function'
+    if (!canUseGlob) return components
+    const importFn = import.meta.glob('./components/u-*/u-*.vue', { eager: true })
+    for (const key in importFn) {
+        const component = importFn[key]?.default
+        if (component?.name && component.name.indexOf('u--') !== 0) {
+            components.push(component)
+        }
     }
+    // #endif
+    return components
 }
-// #endif
 
 const install = (Vue, upuiParams = '') => {
-    // #ifdef APP || H5
-    components.forEach(function(component) {
+    // #ifdef H5
+    resolveComponents().forEach(function(component) {
         const name = component.name.replace(/u-([a-zA-Z0-9-_]+)/g, 'up-$1');
 		if (name != component.name) {
 			Vue.component(component.name, component); 
@@ -144,12 +292,15 @@ const install = (Vue, upuiParams = '') => {
     // 同时挂载到uni和Vue.prototype中
     // $u挂载到uni对象上
     uni.$u = $u
+    initThemeSystem()
 
-    // #ifndef APP-NVUE
-    // 只有vue，挂载到Vue.prototype才有意义，因为nvue中全局Vue.prototype和Vue.mixin是无效的
-    Vue.config.globalProperties.$u = $u
-    Vue.mixin(mixin)
-    // #endif
+    if (Vue && Vue.config && Vue.config.globalProperties) {
+        Vue.config.globalProperties.$u = $u
+        defineGlobalThemeHelpers(Vue)
+    }
+    if (Vue && typeof Vue.mixin === 'function') {
+        Vue.mixin(mixin)
+    }
 }
 
 export default {

package/index.scss

@@ -1,3 +1,7 @@
+/* #ifndef APP-NVUE */
+@import "./libs/css/theme-vars.scss";
+/* #endif */
+
 // 引入公共基础类
 @import "./libs/css/common.scss";
 @import "./libs/css/components.scss";
@@ -22,4 +26,4 @@
 // H5特有的样式
 /* #ifdef H5 */
 @import "./libs/css/h5.scss";
-/* #endif */
+/* #endif */

package/libs/config/color.js

@@ -1,4 +1,3 @@
-// 为了让用户能够自定义主题，会逐步弃用此文件，各颜色通过css提供
 // 为了给某些特殊场景使用和向后兼容，无需删除此文件(2020-06-20)
 const color = {
     primary: '#3c9cff',
@@ -14,4 +13,4 @@ const color = {
     borderColor: '#e4e7ed'
 }
 
-export default color
+export default color

package/libs/config/config.js

@@ -47,6 +47,8 @@ export default {
     customIcons: {}, // 自定义图标与unicode对应关系
 	// 默认单位，可以通过配置为rpx，那么在用于传入组件大小参数为数值时，就默认为rpx
 	unit: 'px',
+    // 是否由运行时主题同步原生导航栏、页面背景、tabBar等全局UI
+    nativeThemeSync: false,
 	// 拦截器
 	interceptor: {
 		navbarLeftClick: null

package/libs/config/props.js

@@ -202,7 +202,7 @@ function setConfig(configs) {
 }
 
 // 初始化自定义配置
-if (uni && uni.upuiParams) {
+if (typeof uni !== 'undefined' && uni && uni.upuiParams) {
 	console.log('setting uview-plus')
 	let temp = uni.upuiParams()
 	if (temp.httpIns) {

package/libs/css/theme-vars-core.scss

@@ -0,0 +1,201 @@
+:root,
+page,
+body {
+	--up-main-color: var(--up-light-main-color, #303133);
+	--up-content-color: var(--up-light-content-color, #606266);
+	--up-tips-color: var(--up-light-tips-color, #909193);
+	--up-light-color: var(--up-light-light-color, #c0c4cc);
+	--up-border-color: var(--up-light-border-color, #dadbde);
+	--up-bg-color: var(--up-light-bg-color, #f3f4f6);
+	--up-hover-bg-color: #e7ebf0;
+	--up-page-bg-color: #f3f4f6;
+	--up-card-bg-color: #ffffff;
+	--up-navbar-bg-color: #ffffff;
+	--up-disabled-color: var(--up-light-disabled-color, #c8c9cc);
+
+	--up-primary: var(--up-light-primary, #3c9cff);
+	--up-primary-dark: var(--up-light-primary-dark, #398ade);
+	--up-primary-disabled: var(--up-light-primary-disabled, #9acafc);
+	--up-primary-light: var(--up-light-primary-light, #ecf5ff);
+
+	--up-warning: var(--up-light-warning, #f9ae3d);
+	--up-warning-dark: var(--up-light-warning-dark, #f1a532);
+	--up-warning-disabled: var(--up-light-warning-disabled, #f9d39b);
+	--up-warning-light: var(--up-light-warning-light, #fdf6ec);
+
+	--up-success: var(--up-light-success, #5ac725);
+	--up-success-dark: var(--up-light-success-dark, #53c21d);
+	--up-success-disabled: var(--up-light-success-disabled, #a9e08f);
+	--up-success-light: var(--up-light-success-light, #f5fff0);
+
+	--up-error: var(--up-light-error, #f56c6c);
+	--up-error-dark: var(--up-light-error-dark, #e45656);
+	--up-error-disabled: var(--up-light-error-disabled, #f7b2b2);
+	--up-error-light: var(--up-light-error-light, #fef0f0);
+
+	--up-info: var(--up-light-info, #909399);
+	--up-info-dark: var(--up-light-info-dark, #767a82);
+	--up-info-disabled: var(--up-light-info-disabled, #c4c6c9);
+	--up-info-light: var(--up-light-info-light, #f4f4f5);
+
+	--up-table2-header-bg-color: #f5f7fa;
+	--up-table2-zebra-bg-color: #fafafa;
+	--up-table2-highlight-bg-color: #f5f7fa;
+	--up-gap-bg-color: #f3f4f6;
+	--up-skeleton-bg-color: #f1f2f4;
+	--up-skeleton-shimmer-color: #e6e6e6;
+	--up-swipe-action-button-bg-color: #c7c6cd;
+	--up-index-list-indicator-bg-color: #c9c9c9;
+	--up-calendar-month-mark-color: rgba(231, 232, 234, 0.83);
+}
+
+@media (prefers-color-scheme: dark) {
+	:root,
+	page,
+	body {
+		--up-main-color: #f5f5f5;
+		--up-content-color: #d1d5db;
+		--up-tips-color: #9ca3af;
+		--up-light-color: #6b7280;
+		--up-border-color: #3a3a3c;
+		--up-bg-color: #1f1f1f;
+		--up-hover-bg-color: #343741;
+		--up-page-bg-color: #1f1f1f;
+		--up-card-bg-color: #1c1c1e;
+		--up-navbar-bg-color: #1c1c1e;
+		--up-disabled-color: #4b5563;
+
+		--up-primary: #3c9cff;
+		--up-primary-dark: #5aa8ff;
+		--up-primary-disabled: #4c6f92;
+		--up-primary-light: #10243a;
+
+		--up-warning: #f9ae3d;
+		--up-warning-dark: #ffbf66;
+		--up-warning-disabled: #8a6a3a;
+		--up-warning-light: #3d2f1b;
+
+		--up-success: #5ac725;
+		--up-success-dark: #7ad94b;
+		--up-success-disabled: #5f7f4f;
+		--up-success-light: #1f3316;
+
+		--up-error: #f56c6c;
+		--up-error-dark: #ff8a8a;
+		--up-error-disabled: #8d5858;
+		--up-error-light: #3a2222;
+
+		--up-info: #909399;
+		--up-info-dark: #b0b3b8;
+		--up-info-disabled: #5f6368;
+		--up-info-light: #2f3238;
+
+		--up-table2-header-bg-color: #2a2d33;
+		--up-table2-zebra-bg-color: #23262b;
+		--up-table2-highlight-bg-color: #2f3440;
+		--up-gap-bg-color: #111111;
+		--up-skeleton-bg-color: #2f3135;
+		--up-skeleton-shimmer-color: rgba(255, 255, 255, 0.12);
+		--up-swipe-action-button-bg-color: #4b5563;
+		--up-index-list-indicator-bg-color: #4b5563;
+		--up-calendar-month-mark-color: rgba(255, 255, 255, 0.04);
+	}
+}
+
+[data-up-theme='light'] {
+	--up-main-color: var(--up-light-main-color, #303133);
+	--up-content-color: var(--up-light-content-color, #606266);
+	--up-tips-color: var(--up-light-tips-color, #909193);
+	--up-light-color: var(--up-light-light-color, #c0c4cc);
+	--up-border-color: var(--up-light-border-color, #dadbde);
+	--up-bg-color: var(--up-light-bg-color, #f3f4f6);
+	--up-hover-bg-color: #e7ebf0;
+	--up-page-bg-color: #f3f4f6;
+	--up-card-bg-color: #ffffff;
+	--up-navbar-bg-color: #ffffff;
+	--up-disabled-color: var(--up-light-disabled-color, #c8c9cc);
+
+	--up-primary: var(--up-light-primary, #3c9cff);
+	--up-primary-dark: var(--up-light-primary-dark, #398ade);
+	--up-primary-disabled: var(--up-light-primary-disabled, #9acafc);
+	--up-primary-light: var(--up-light-primary-light, #ecf5ff);
+
+	--up-warning: var(--up-light-warning, #f9ae3d);
+	--up-warning-dark: var(--up-light-warning-dark, #f1a532);
+	--up-warning-disabled: var(--up-light-warning-disabled, #f9d39b);
+	--up-warning-light: var(--up-light-warning-light, #fdf6ec);
+
+	--up-success: var(--up-light-success, #5ac725);
+	--up-success-dark: var(--up-light-success-dark, #53c21d);
+	--up-success-disabled: var(--up-light-success-disabled, #a9e08f);
+	--up-success-light: var(--up-light-success-light, #f5fff0);
+
+	--up-error: var(--up-light-error, #f56c6c);
+	--up-error-dark: var(--up-light-error-dark, #e45656);
+	--up-error-disabled: var(--up-light-error-disabled, #f7b2b2);
+	--up-error-light: var(--up-light-error-light, #fef0f0);
+
+	--up-info: var(--up-light-info, #909399);
+	--up-info-dark: var(--up-light-info-dark, #767a82);
+	--up-info-disabled: var(--up-light-info-disabled, #c4c6c9);
+	--up-info-light: var(--up-light-info-light, #f4f4f5);
+
+	--up-table2-header-bg-color: #f5f7fa;
+	--up-table2-zebra-bg-color: #fafafa;
+	--up-table2-highlight-bg-color: #f5f7fa;
+	--up-gap-bg-color: #f3f4f6;
+	--up-skeleton-bg-color: #f1f2f4;
+	--up-skeleton-shimmer-color: #e6e6e6;
+	--up-swipe-action-button-bg-color: #c7c6cd;
+	--up-index-list-indicator-bg-color: #c9c9c9;
+	--up-calendar-month-mark-color: rgba(231, 232, 234, 0.83);
+}
+
+[data-up-theme='dark'] {
+	--up-main-color: #f5f5f5;
+	--up-content-color: #d1d5db;
+	--up-tips-color: #9ca3af;
+	--up-light-color: #6b7280;
+	--up-border-color: #3a3a3c;
+	--up-bg-color: #1f1f1f;
+	--up-hover-bg-color: #343741;
+	--up-page-bg-color: #1f1f1f;
+	--up-card-bg-color: #1c1c1e;
+	--up-navbar-bg-color: #1c1c1e;
+	--up-disabled-color: #4b5563;
+
+	--up-primary: #3c9cff;
+	--up-primary-dark: #5aa8ff;
+	--up-primary-disabled: #4c6f92;
+	--up-primary-light: #10243a;
+
+	--up-warning: #f9ae3d;
+	--up-warning-dark: #ffbf66;
+	--up-warning-disabled: #8a6a3a;
+	--up-warning-light: #3d2f1b;
+
+	--up-success: #5ac725;
+	--up-success-dark: #7ad94b;
+	--up-success-disabled: #5f7f4f;
+	--up-success-light: #1f3316;
+
+	--up-error: #f56c6c;
+	--up-error-dark: #ff8a8a;
+	--up-error-disabled: #8d5858;
+	--up-error-light: #3a2222;
+
+	--up-info: #909399;
+	--up-info-dark: #b0b3b8;
+	--up-info-disabled: #5f6368;
+	--up-info-light: #2f3238;
+
+	--up-table2-header-bg-color: #2a2d33;
+	--up-table2-zebra-bg-color: #23262b;
+	--up-table2-highlight-bg-color: #2f3440;
+	--up-gap-bg-color: #111111;
+	--up-skeleton-bg-color: #2f3135;
+	--up-skeleton-shimmer-color: rgba(255, 255, 255, 0.12);
+	--up-swipe-action-button-bg-color: #4b5563;
+	--up-index-list-indicator-bg-color: #4b5563;
+	--up-calendar-month-mark-color: rgba(255, 255, 255, 0.04);
+}

package/libs/css/theme-vars.scss

@@ -0,0 +1 @@
+@import "./theme-vars-core.scss";

package/libs/function/index.js

@@ -1,10 +1,10 @@
-import {
-	number as testNumber,
-	array as testArray,
-	empty as testEmpty
-} from './test'
-import { round } from './digit.js'
-import config from '../config/config';
+import {
+	number as testNumber,
+	array as testArray,
+	empty as testEmpty
+} from './test.js'
+import { round } from './digit.js'
+import config from '../config/config.js'
 /**
  * @description 如果value小于min，取min；如果value大于max，取max
  * @param {number} min