uview-pro 0.6.18 → 0.6.19

package/components/u-config-provider/u-config-provider.vue

@@ -1,185 +1,185 @@
-<template>
-    <view :class="['u-config-provider', `u-theme-${darkMode}`, customClass]" :style="mergedThemeStyle">
-        <slot />
-    </view>
-</template>
-
-<script lang="ts">
-/**
- * u-config-provider
- *
- * 说明（简要）：
- * - 初始化场景（推荐在应用入口执行）：使用 `useTheme().initTheme(themes)` 进行一次性初始化与全局设置（例如在 `main.ts` 或 `App.vue` 中）。
- * - 组件/页面场景（推荐）：使用 `useTheme()` 组合式函数在组件内部读取响应式 `currentTheme`、`themes`、`darkMode` 并通过 `setTheme()` 和 `setDarkMode()` 切换主题/模式。
- *
- * 该组件的行为：
- * - 如果在挂载时传入 `themes`，会调用 `configProvider.initTheme(themes)`
- * - 如果传入 `currentTheme`，会优先设置当前主题
- * - 如果传入 `darkMode`，会设置当前的暗黑模式状态，同时在 document 上添加 `u-theme-dark` 或 `u-theme-light` 类名
- *
- * 详尽说明请参考：`docs/config-provider-usage.md`
- */
-export default {
-    name: 'u-config-provider',
-    options: {
-        addGlobalClass: true,
-        // #ifndef MP-TOUTIAO
-        virtualHost: true,
-        // #endif
-        styleIsolation: 'shared'
-    }
-};
-</script>
-
-<script lang="ts" setup>
-import { computed, watch, onMounted } from 'vue';
-import { ConfigProviderProps } from './types';
-import { $u, configProvider } from '../../libs';
-import { useTheme } from '../../libs/hooks/useTheme';
-import { useLocale } from '../../libs/hooks/useLocale';
-
-const props = defineProps(ConfigProviderProps);
-
-const emit = defineEmits<{
-    'theme-change': [themeName: string];
-    'mode-change': [mode: string];
-}>();
-
-const { initTheme } = useTheme();
-const { initLocales, setLocale, getLocales, getCurrentLocale } = useLocale();
-
-const bootstrapTheme = () => {
-    // 初始化主题
-    try {
-        // 如果已经初始化过主题，不再重复初始化，只更新 props 相关配置
-        const existingThemes = configProvider.getThemes();
-        if (existingThemes.length > 0) {
-            // 已初始化，只在值不同时才更新（避免覆盖用户之前的设置）
-            if (props.currentTheme && props.currentTheme !== configProvider.getCurrentTheme()?.name) {
-                configProvider.setTheme(props.currentTheme as string);
-            }
-            if (props.darkMode && props.darkMode !== configProvider.getDarkMode()) {
-                configProvider.setDarkMode(props.darkMode);
-            }
-            return;
-        }
-
-        // 未初始化，进行初始化
-        if (props.themes && props.themes.length) {
-            configProvider.initTheme(props.themes, props.currentTheme as any);
-        } else {
-            // 使用 useTheme 的 initTheme，它会处理默认主题
-            initTheme(undefined, props.currentTheme as any);
-        }
-    } catch (e) {
-        console.warn('[u-config-provider] init theme failed', e);
-    }
-};
-
-const bootstrapLocale = () => {
-    // 初始化国际化
-    try {
-        const existingLocales = getLocales();
-        if (existingLocales.length > 0) {
-            if (props.currentLocale && props.currentLocale !== getCurrentLocale()?.name) {
-                setLocale(props.currentLocale as string);
-            }
-        } else {
-            if (props.locales && props.locales.length) {
-                initLocales(props.locales, props.currentLocale as any);
-            } else {
-                initLocales(undefined, props.currentLocale as any);
-            }
-        }
-    } catch (e) {
-        console.warn('[u-config-provider] init locales failed', e);
-    }
-};
-
-// 当传入自定义 themes 时，初始化全局 configProvider（覆盖已有）
-onMounted(() => {
-    bootstrapTheme();
-    bootstrapLocale();
-});
-
-// 监听外部 props 变化（如果上层修改 prop）
-watch(
-    () => props.themes,
-    val => {
-        // 如果传入的 themes 来自于 configProvider 自身（常见于模板中使用 useTheme() 直接透传），
-        // 那么对其做深度监听会在我们内部更新主题对象时触发该回调，进而再次调用 init 导致循环更新。
-        // 为避免该情况，先做简单保护：当传入对象正是 configProvider.themesRef.value 时不重复初始化。
-        if (val && val.length && val !== configProvider.themesRef.value) {
-            configProvider.initTheme(val, props.currentTheme as any);
-        }
-    },
-    { deep: true }
-);
-
-watch(
-    () => props.currentTheme,
-    val => {
-        if (val) {
-            configProvider.setTheme(val);
-        }
-    }
-);
-
-watch(
-    () => props.darkMode,
-    val => {
-        if (val && val !== configProvider.getDarkMode()) {
-            configProvider.setDarkMode(val);
-        }
-    }
-);
-
-// 监听 locales prop 变化
-watch(
-    () => props.locales,
-    val => {
-        if (val && val.length) {
-            initLocales(val, props.currentLocale as any);
-        }
-    },
-    { deep: true }
-);
-
-watch(
-    () => props.currentLocale,
-    val => {
-        if (val) {
-            setLocale(val);
-        }
-    }
-);
-
-// 监听全局主题变更并触发事件
-watch(
-    () => configProvider.currentThemeRef.value,
-    (val, oldVal) => {
-        if (val && val.name !== (oldVal as any)?.name) {
-            emit('theme-change', val.name);
-        }
-    },
-    { immediate: true }
-);
-
-// 监听暗黑模式变更并触发事件
-watch(
-    () => configProvider.darkModeRef.value,
-    (val, oldVal) => {
-        if (val && val !== oldVal) {
-            emit('mode-change', val);
-        }
-    },
-    { immediate: true }
-);
-
-// 计算合并样式（作为局部 fallback），configProvider 已经会把变量注入到 document 上
-const mergedThemeStyle = computed(() => {
-    return $u.toStyle(configProvider.cssVarsRef.value, props.customStyle);
-});
-</script>
-
-<style lang="scss" scoped></style>
+<template>
+    <view :class="['u-config-provider', `u-theme-${darkMode}`, customClass]" :style="mergedThemeStyle">
+        <slot />
+    </view>
+</template>
+
+<script lang="ts">
+/**
+ * u-config-provider
+ *
+ * 说明（简要）：
+ * - 初始化场景（推荐在应用入口执行）：使用 `useTheme().initTheme(themes)` 进行一次性初始化与全局设置（例如在 `main.ts` 或 `App.vue` 中）。
+ * - 组件/页面场景（推荐）：使用 `useTheme()` 组合式函数在组件内部读取响应式 `currentTheme`、`themes`、`darkMode` 并通过 `setTheme()` 和 `setDarkMode()` 切换主题/模式。
+ *
+ * 该组件的行为：
+ * - 如果在挂载时传入 `themes`，会调用 `configProvider.initTheme(themes)`
+ * - 如果传入 `currentTheme`，会优先设置当前主题
+ * - 如果传入 `darkMode`，会设置当前的暗黑模式状态，同时在 document 上添加 `u-theme-dark` 或 `u-theme-light` 类名
+ *
+ * 详尽说明请参考：`docs/config-provider-usage.md`
+ */
+export default {
+    name: 'u-config-provider',
+    options: {
+        addGlobalClass: true,
+        // #ifndef MP-TOUTIAO
+        virtualHost: true,
+        // #endif
+        styleIsolation: 'shared'
+    }
+};
+</script>
+
+<script lang="ts" setup>
+import { computed, watch, onMounted } from 'vue';
+import { ConfigProviderProps } from './types';
+import { $u, configProvider } from '../../libs';
+import { useTheme } from '../../libs/hooks/useTheme';
+import { useLocale } from '../../libs/hooks/useLocale';
+
+const props = defineProps(ConfigProviderProps);
+
+const emit = defineEmits<{
+    'theme-change': [themeName: string];
+    'mode-change': [mode: string];
+}>();
+
+const { initTheme } = useTheme();
+const { initLocales, setLocale, getLocales, getCurrentLocale } = useLocale();
+
+const bootstrapTheme = () => {
+    // 初始化主题
+    try {
+        // 如果已经初始化过主题，不再重复初始化，只更新 props 相关配置
+        const existingThemes = configProvider.getThemes();
+        if (existingThemes.length > 0) {
+            // 已初始化，只在值不同时才更新（避免覆盖用户之前的设置）
+            if (props.currentTheme && props.currentTheme !== configProvider.getCurrentTheme()?.name) {
+                configProvider.setTheme(props.currentTheme as string);
+            }
+            if (props.darkMode && props.darkMode !== configProvider.getDarkMode()) {
+                configProvider.setDarkMode(props.darkMode);
+            }
+            return;
+        }
+
+        // 未初始化，进行初始化
+        if (props.themes && props.themes.length) {
+            configProvider.initTheme(props.themes, props.currentTheme as any);
+        } else {
+            // 使用 useTheme 的 initTheme，它会处理默认主题
+            initTheme(undefined, props.currentTheme as any);
+        }
+    } catch (e) {
+        console.warn('[u-config-provider] init theme failed', e);
+    }
+};
+
+const bootstrapLocale = () => {
+    // 初始化国际化
+    try {
+        const existingLocales = getLocales();
+        if (existingLocales.length > 0) {
+            if (props.currentLocale && props.currentLocale !== getCurrentLocale()?.name) {
+                setLocale(props.currentLocale as string);
+            }
+        } else {
+            if (props.locales && props.locales.length) {
+                initLocales(props.locales, props.currentLocale as any);
+            } else {
+                initLocales(undefined, props.currentLocale as any);
+            }
+        }
+    } catch (e) {
+        console.warn('[u-config-provider] init locales failed', e);
+    }
+};
+
+// 当传入自定义 themes 时，初始化全局 configProvider（覆盖已有）
+onMounted(() => {
+    bootstrapTheme();
+    bootstrapLocale();
+});
+
+// 监听外部 props 变化（如果上层修改 prop）
+watch(
+    () => props.themes,
+    val => {
+        // 如果传入的 themes 来自于 configProvider 自身（常见于模板中使用 useTheme() 直接透传），
+        // 那么对其做深度监听会在我们内部更新主题对象时触发该回调，进而再次调用 init 导致循环更新。
+        // 为避免该情况，先做简单保护：当传入对象正是 configProvider.themesRef.value 时不重复初始化。
+        if (val && val.length && val !== configProvider.themesRef.value) {
+            configProvider.initTheme(val, props.currentTheme as any);
+        }
+    },
+    { deep: true }
+);
+
+watch(
+    () => props.currentTheme,
+    val => {
+        if (val) {
+            configProvider.setTheme(val);
+        }
+    }
+);
+
+watch(
+    () => props.darkMode,
+    val => {
+        if (val && val !== configProvider.getDarkMode()) {
+            configProvider.setDarkMode(val);
+        }
+    }
+);
+
+// 监听 locales prop 变化
+watch(
+    () => props.locales,
+    val => {
+        if (val && val.length) {
+            initLocales(val, props.currentLocale as any);
+        }
+    },
+    { deep: true }
+);
+
+watch(
+    () => props.currentLocale,
+    val => {
+        if (val) {
+            setLocale(val);
+        }
+    }
+);
+
+// 监听全局主题变更并触发事件
+watch(
+    () => configProvider.currentThemeRef.value,
+    (val, oldVal) => {
+        if (val && val.name !== (oldVal as any)?.name) {
+            emit('theme-change', val.name);
+        }
+    },
+    { immediate: true }
+);
+
+// 监听暗黑模式变更并触发事件
+watch(
+    () => configProvider.darkModeRef.value,
+    (val, oldVal) => {
+        if (val && val !== oldVal) {
+            emit('mode-change', val);
+        }
+    },
+    { immediate: true }
+);
+
+// 计算合并样式（作为局部 fallback），configProvider 已经会把变量注入到 document 上
+const mergedThemeStyle = computed(() => {
+    return $u.toStyle(configProvider.cssVarsRef.value, props.customStyle);
+});
+</script>
+
+<style lang="scss" scoped></style>

package/components/u-count-down/types.ts

@@ -1,52 +1,52 @@
-import type { ExtractPropTypes, PropType } from 'vue';
-
-/**
- * u-count-down 倒计时 Props
- * @description 该组件一般使用于某个活动的截止时间上，通过数字的变化，给用户明确的时间感受，提示用户进行某一个行为操作。
- */
-export const CountDownProps = {
-    /** 自定义根节点样式 */
-    customStyle: {
-        type: [String, Object] as PropType<string | Record<string, any>>,
-        default: () => ({})
-    },
-    /** 自定义根节点样式类 */
-    customClass: {
-        type: String as unknown as PropType<string>,
-        default: ''
-    },
-    /** 倒计时的时间，秒为单位 */
-    timestamp: { type: [Number, String] as PropType<number | string>, default: 0 },
-    /** 是否自动开始倒计时 */
-    autoplay: { type: Boolean, default: true },
-    /** 分隔符 */
-    separator: { type: String, default: 'colon' },
-    /** 分隔符的大小，单位rpx */
-    separatorSize: { type: [Number, String] as PropType<number | string>, default: 30 },
-    /** 分隔符颜色 */
-    separatorColor: { type: String, default: 'var(--u-main-color)' },
-    /** 字体颜色 */
-    color: { type: String, default: 'var(--u-main-color)' },
-    /** 字体大小，单位rpx */
-    fontSize: { type: [Number, String] as PropType<number | string>, default: 30 },
-    /** 背景颜色 */
-    bgColor: { type: String, default: 'var(--u-bg-white)' },
-    /** 数字框高度，单位rpx */
-    height: { type: [Number, String] as PropType<number | string>, default: 'auto' },
-    /** 是否显示数字框 */
-    showBorder: { type: Boolean, default: false },
-    /** 边框颜色 */
-    borderColor: { type: String, default: 'var(--u-main-color)' },
-    /** 是否显示秒 */
-    showSeconds: { type: Boolean, default: true },
-    /** 是否显示分钟 */
-    showMinutes: { type: Boolean, default: true },
-    /** 是否显示小时 */
-    showHours: { type: Boolean, default: true },
-    /** 是否显示“天” */
-    showDays: { type: Boolean, default: true },
-    /** 当"天"的部分为0时，不显示 */
-    hideZeroDay: { type: Boolean, default: false }
-};
-
-export type CountDownProps = ExtractPropTypes<typeof CountDownProps>;
+import type { ExtractPropTypes, PropType } from 'vue';
+
+/**
+ * u-count-down 倒计时 Props
+ * @description 该组件一般使用于某个活动的截止时间上，通过数字的变化，给用户明确的时间感受，提示用户进行某一个行为操作。
+ */
+export const CountDownProps = {
+    /** 自定义根节点样式 */
+    customStyle: {
+        type: [String, Object] as PropType<string | Record<string, any>>,
+        default: () => ({})
+    },
+    /** 自定义根节点样式类 */
+    customClass: {
+        type: String as unknown as PropType<string>,
+        default: ''
+    },
+    /** 倒计时的时间，秒为单位 */
+    timestamp: { type: [Number, String] as PropType<number | string>, default: 0 },
+    /** 是否自动开始倒计时 */
+    autoplay: { type: Boolean, default: true },
+    /** 分隔符 */
+    separator: { type: String, default: 'colon' },
+    /** 分隔符的大小，单位rpx */
+    separatorSize: { type: [Number, String] as PropType<number | string>, default: 30 },
+    /** 分隔符颜色 */
+    separatorColor: { type: String, default: 'var(--u-main-color)' },
+    /** 字体颜色 */
+    color: { type: String, default: 'var(--u-main-color)' },
+    /** 字体大小，单位rpx */
+    fontSize: { type: [Number, String] as PropType<number | string>, default: 30 },
+    /** 背景颜色 */
+    bgColor: { type: String, default: 'var(--u-bg-white)' },
+    /** 数字框高度，单位rpx */
+    height: { type: [Number, String] as PropType<number | string>, default: 'auto' },
+    /** 是否显示数字框 */
+    showBorder: { type: Boolean, default: false },
+    /** 边框颜色 */
+    borderColor: { type: String, default: 'var(--u-main-color)' },
+    /** 是否显示秒 */
+    showSeconds: { type: Boolean, default: true },
+    /** 是否显示分钟 */
+    showMinutes: { type: Boolean, default: true },
+    /** 是否显示小时 */
+    showHours: { type: Boolean, default: true },
+    /** 是否显示“天” */
+    showDays: { type: Boolean, default: true },
+    /** 当"天"的部分为0时，不显示 */
+    hideZeroDay: { type: Boolean, default: false }
+};
+
+export type CountDownProps = ExtractPropTypes<typeof CountDownProps>;