uview-pro 0.3.0 → 0.3.1

package/components/u-link/u-link.vue

@@ -1,84 +1,84 @@
-<template>
-    <text
-        class="u-link"
-        @tap.stop="openLink"
-        :style="{
-            color: color,
-            fontSize: fontSize + 'rpx',
-            borderBottom: underLine ? `1px solid ${lineColor ? lineColor : color}` : 'none',
-            paddingBottom: underLine ? '0rpx' : '0'
-        }"
-    >
-        <slot></slot>
-    </text>
-</template>
-
-<script lang="ts">
-export default {
-    name: 'u-link',
-    options: {
-        addGlobalClass: true,
-        // #ifndef MP-TOUTIAO
-        virtualHost: true,
-        // #endif
-        styleIsolation: 'shared'
-    }
-};
-</script>
-
-<script setup lang="ts">
-import { $u } from '../..';
-import { LinkProps } from './types';
-
-/**
- * link 超链接
- * @description 该组件为超链接组件，在不同平台有不同表现形式：在APP平台会通过plus环境打开内置浏览器，在小程序中把链接复制到粘贴板，同时提示信息，在H5中通过window.open打开链接。
- * @tutorial https://uviewpro.cn/zh/components/link.html
- * @property {String} color 文字颜色（默认#606266）
- * @property {String Number} font-size 字体大小，单位rpx（默认28）
- * @property {Boolean} under-line 是否显示下划线（默认false）
- * @property {String} href 跳转的链接，要带上http(s)
- * @property {String} line-color 下划线颜色，默认同color参数颜色
- * @property {String} mp-tips 各个小程序平台把链接复制到粘贴板后的提示语（默认“链接已复制，请在浏览器打开”）
- * @example <u-link href="https://uviewpro.cn">蜀道难，难于上青天</u-link>
- */
-const props = defineProps(LinkProps);
-
-/**
- * 打开链接方法
- * 不同平台有不同表现形式
- */
-function openLink() {
-    // #ifdef APP-PLUS
-    if (typeof plus !== 'undefined' && plus.runtime) {
-        plus.runtime.openURL(props.href);
-    }
-    // #endif
-    // #ifdef H5
-    if (typeof window !== 'undefined') {
-        window.open(props.href);
-    }
-    // #endif
-    // #ifdef MP
-    if (typeof uni !== 'undefined' && uni.setClipboardData) {
-        uni.setClipboardData({
-            data: props.href,
-            success: () => {
-                uni.hideToast();
-                if (typeof $u !== 'undefined' && $u.toast && props.mpTips) {
-                    $u.toast(props.mpTips);
-                }
-            }
-        });
-    }
-    // #endif
-}
-</script>
-
-<style lang="scss" scoped>
-@import '../../libs/css/style.components.scss';
-
-.u-link {
-    line-height: 1;
-}
-</style>
+<template>
+    <text
+        class="u-link"
+        @tap.stop="openLink"
+        :style="{
+            color: color,
+            fontSize: fontSize + 'rpx',
+            borderBottom: underLine ? `1px solid ${lineColor ? lineColor : color}` : 'none',
+            paddingBottom: underLine ? '0rpx' : '0'
+        }"
+    >
+        <slot></slot>
+    </text>
+</template>
+
+<script lang="ts">
+export default {
+    name: 'u-link',
+    options: {
+        addGlobalClass: true,
+        // #ifndef MP-TOUTIAO
+        virtualHost: true,
+        // #endif
+        styleIsolation: 'shared'
+    }
+};
+</script>
+
+<script setup lang="ts">
+import { $u } from '../..';
+import { LinkProps } from './types';
+
+/**
+ * link 超链接
+ * @description 该组件为超链接组件，在不同平台有不同表现形式：在APP平台会通过plus环境打开内置浏览器，在小程序中把链接复制到粘贴板，同时提示信息，在H5中通过window.open打开链接。
+ * @tutorial https://uviewpro.cn/zh/components/link.html
+ * @property {String} color 文字颜色（默认#606266）
+ * @property {String Number} font-size 字体大小，单位rpx（默认28）
+ * @property {Boolean} under-line 是否显示下划线（默认false）
+ * @property {String} href 跳转的链接，要带上http(s)
+ * @property {String} line-color 下划线颜色，默认同color参数颜色
+ * @property {String} mp-tips 各个小程序平台把链接复制到粘贴板后的提示语（默认“链接已复制，请在浏览器打开”）
+ * @example <u-link href="https://uviewpro.cn">蜀道难，难于上青天</u-link>
+ */
+const props = defineProps(LinkProps);
+
+/**
+ * 打开链接方法
+ * 不同平台有不同表现形式
+ */
+function openLink() {
+    // #ifdef APP-PLUS
+    if (typeof plus !== 'undefined' && plus.runtime) {
+        plus.runtime.openURL(props.href);
+    }
+    // #endif
+    // #ifdef H5
+    if (typeof window !== 'undefined') {
+        window.open(props.href);
+    }
+    // #endif
+    // #ifdef MP
+    if (typeof uni !== 'undefined' && uni.setClipboardData) {
+        uni.setClipboardData({
+            data: props.href,
+            success: () => {
+                uni.hideToast();
+                if (typeof $u !== 'undefined' && $u.toast && props.mpTips) {
+                    $u.toast(props.mpTips);
+                }
+            }
+        });
+    }
+    // #endif
+}
+</script>
+
+<style lang="scss" scoped>
+@import '../../libs/css/style.components.scss';
+
+.u-link {
+    line-height: 1;
+}
+</style>

package/components/u-loading/types.ts

@@ -1,35 +1,35 @@
-import type { ExtractPropTypes, PropType } from 'vue';
-
-type LoadingMode = 'circle' | 'flower';
-
-/**
- * u-loading 组件 props 类型定义
- * @description 加载动画，支持多种模式
- */
-export const LoadingProps = {
-    /** 动画的类型 */
-    mode: {
-        type: String as PropType<LoadingMode>,
-        default: 'circle'
-    },
-    /** 动画的颜色 */
-    color: {
-        type: String,
-        default: '#c7c7c7'
-    },
-    /** 加载图标的大小，单位rpx */
-    size: {
-        type: [String, Number] as PropType<string | number>,
-        default: '34'
-    },
-    /** 是否显示动画 */
-    show: {
-        type: Boolean,
-        default: true
-    }
-};
-
-/**
- * u-loading 组件 props 类型
- */
-export type LoadingProps = ExtractPropTypes<typeof LoadingProps>;
+import type { ExtractPropTypes, PropType } from 'vue';
+
+type LoadingMode = 'circle' | 'flower';
+
+/**
+ * u-loading 组件 props 类型定义
+ * @description 加载动画，支持多种模式
+ */
+export const LoadingProps = {
+    /** 动画的类型 */
+    mode: {
+        type: String as PropType<LoadingMode>,
+        default: 'circle'
+    },
+    /** 动画的颜色 */
+    color: {
+        type: String,
+        default: '#c7c7c7'
+    },
+    /** 加载图标的大小，单位rpx */
+    size: {
+        type: [String, Number] as PropType<string | number>,
+        default: '34'
+    },
+    /** 是否显示动画 */
+    show: {
+        type: Boolean,
+        default: true
+    }
+};
+
+/**
+ * u-loading 组件 props 类型
+ */
+export type LoadingProps = ExtractPropTypes<typeof LoadingProps>;

package/components/u-loading/u-loading.vue

@@ -1,105 +1,105 @@
-<template>
-    <view
-        v-if="show"
-        class="u-loading"
-        :class="mode === 'circle' ? 'u-loading-circle' : 'u-loading-flower'"
-        :style="[cricleStyle]"
-    >
-    </view>
-</template>
-
-<script lang="ts">
-export default {
-    name: 'u-loading',
-    options: {
-        addGlobalClass: true,
-        // #ifndef MP-TOUTIAO
-        virtualHost: true,
-        // #endif
-        styleIsolation: 'shared'
-    }
-};
-</script>
-
-<script setup lang="ts">
-import { computed } from 'vue';
-import { LoadingProps } from './types';
-
-/**
- * loading 加载动画
- * @description 此组件为一个小动画，目前用在uView的loadmore加载更多和switch开关等组件的正在加载状态场景。
- * @tutorial https://uviewpro.cn/zh/components/loading.html
- * @property {String} mode 模式选择，见官网说明（默认circle）
- * @property {String} color 动画活动区域的颜色，只对 mode = flower 模式有效（默认#c7c7c7）
- * @property {String|Number} size 加载图标的大小，单位rpx（默认34）
- * @property {Boolean} show 是否显示动画（默认true）
- * @example <u-loading mode="circle"></u-loading>
- */
-const props = defineProps(LoadingProps);
-
-/**
- * 加载中圆圈动画的样式
- * @returns {Record<string, any>}
- */
-const cricleStyle = computed(() => {
-    let style: Record<string, any> = {};
-    style.width = props.size + 'rpx';
-    style.height = props.size + 'rpx';
-    // 只对圆圈模式生效
-    if (props.mode === 'circle') {
-        style.borderColor = `#e4e4e4 #e4e4e4 #e4e4e4 ${props.color ? props.color : '#c7c7c7'}`;
-    }
-    return style;
-});
-</script>
-
-<style lang="scss" scoped>
-@import '../../libs/css/style.components.scss';
-
-.u-loading-circle {
-    /* #ifndef APP-NVUE */
-    display: inline-flex;
-    /* #endif */
-    vertical-align: middle;
-    width: 28rpx;
-    height: 28rpx;
-    background: 0 0;
-    border-radius: 50%;
-    border: 2px solid;
-    border-color: #e5e5e5 #e5e5e5 #e5e5e5 #8f8d8e;
-    animation: u-circle 1s linear infinite;
-}
-
-.u-loading-flower {
-    width: 20px;
-    height: 20px;
-    display: inline-block;
-    vertical-align: middle;
-    -webkit-animation: u-flower 1s steps(12) infinite;
-    animation: u-flower 1s steps(12) infinite;
-    background: transparent
-        url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMjAiIGhlaWdodD0iMTIwIiB2aWV3Qm94PSIwIDAgMTAwIDEwMCI+PHBhdGggZmlsbD0ibm9uZSIgZD0iTTAgMGgxMDB2MTAwSDB6Ii8+PHJlY3Qgd2lkdGg9IjciIGhlaWdodD0iMjAiIHg9IjQ2LjUiIHk9IjQwIiBmaWxsPSIjRTlFOUU5IiByeD0iNSIgcnk9IjUiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDAgLTMwKSIvPjxyZWN0IHdpZHRoPSI3IiBoZWlnaHQ9IjIwIiB4PSI0Ni41IiB5PSI0MCIgZmlsbD0iIzk4OTY5NyIgcng9IjUiIHJ5PSI1IiB0cmFuc2Zvcm09InJvdGF0ZSgzMCAxMDUuOTggNjUpIi8+PHJlY3Qgd2lkdGg9IjciIGhlaWdodD0iMjAiIHg9IjQ2LjUiIHk9IjQwIiBmaWxsPSIjOUI5OTlBIiByeD0iNSIgcnk9IjUiIHRyYW5zZm9ybT0icm90YXRlKDYwIDc1Ljk4IDY1KSIvPjxyZWN0IHdpZHRoPSI3IiBoZWlnaHQ9IjIwIiB4PSI0Ni41IiB5PSI0MCIgZmlsbD0iI0EzQTFBMiIgcng9IjUiIHJ5PSI1IiB0cmFuc2Zvcm09InJvdGF0ZSg5MCA2NSA2NSkiLz48cmVjdCB3aWR0aD0iNyIgaGVpZ2h0PSIyMCIgeD0iNDYuNSIgeT0iNDAiIGZpbGw9IiNBQkE5QUEiIHJ4PSI1IiByeT0iNSIgdHJhbnNmb3JtPSJyb3RhdGUoMTIwIDU4LjY2IDY1KSIvPjxyZWN0IHdpZHRoPSI3IiBoZWlnaHQ9IjIwIiB4PSI0Ni41IiB5PSI0MCIgZmlsbD0iI0IyQjJCMiIgcng9IjUiIHJ5PSI1IiB0cmFuc2Zvcm09InJvdGF0ZSgxNTAgNTQuMDIgNjUpIi8+PHJlY3Qgd2lkdGg9IjciIGhlaWdodD0iMjAiIHg9IjQ2LjUiIHk9IjQwIiBmaWxsPSIjQkFCOEI5IiByeD0iNSIgcnk9IjUiIHRyYW5zZm9ybT0icm90YXRlKDE4MCA1MCA2NSkiLz48cmVjdCB3aWR0aD0iNyIgaGVpZ2h0PSIyMCIgeD0iNDYuNSIgeT0iNDAiIGZpbGw9IiNDMkMwQzEiIHJ4PSI1IiByeT0iNSIgdHJhbnNmb3JtPSJyb3RhdGUoLTE1MCA0NS45OCA2NSkiLz48cmVjdCB3aWR0aD0iNyIgaGVpZ2h0PSIyMCIgeD0iNDYuNSIgeT0iNDAiIGZpbGw9IiNDQkNCQ0IiIHJ4PSI1IiByeT0iNSIgdHJhbnNmb3JtPSJyb3RhdGUoLTEyMCA0MS4zNCA2NSkiLz48cmVjdCB3aWR0aD0iNyIgaGVpZ2h0PSIyMCIgeD0iNDYuNSIgeT0iNDAiIGZpbGw9IiNEMkQyRDIiIHJ4PSI1IiByeT0iNSIgdHJhbnNmb3JtPSJyb3RhdGUoLTkwIDM1IDY1KSIvPjxyZWN0IHdpZHRoPSI3IiBoZWlnaHQ9IjIwIiB4PSI0Ni41IiB5PSI0MCIgZmlsbD0iI0RBREFEQSIgcng9IjUiIHJ5PSI1IiB0cmFuc2Zvcm09InJvdGF0ZSgtNjAgMjQuMDIgNjUpIi8+PHJlY3Qgd2lkdGg9IjciIGhlaWdodD0iMjAiIHg9IjQ2LjUiIHk9IjQwIiBmaWxsPSIjRTJFMkUyIiByeD0iNSIgcnk9IjUiIHRyYW5zZm9ybT0icm90YXRlKC0zMCAtNS45OCA2NSkiLz48L3N2Zz4=)
-        no-repeat;
-    background-size: 100%;
-}
-
-@keyframes u-flower {
-    0% {
-        -webkit-transform: rotate(0deg);
-        transform: rotate(0deg);
-    }
-    to {
-        -webkit-transform: rotate(1turn);
-        transform: rotate(1turn);
-    }
-}
-
-@keyframes u-circle {
-    0% {
-        transform: rotate(0);
-    }
-    100% {
-        transform: rotate(360deg);
-    }
-}
-</style>
+<template>
+    <view
+        v-if="show"
+        class="u-loading"
+        :class="mode === 'circle' ? 'u-loading-circle' : 'u-loading-flower'"
+        :style="[cricleStyle]"
+    >
+    </view>
+</template>
+
+<script lang="ts">
+export default {
+    name: 'u-loading',
+    options: {
+        addGlobalClass: true,
+        // #ifndef MP-TOUTIAO
+        virtualHost: true,
+        // #endif
+        styleIsolation: 'shared'
+    }
+};
+</script>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import { LoadingProps } from './types';
+
+/**
+ * loading 加载动画
+ * @description 此组件为一个小动画，目前用在uView的loadmore加载更多和switch开关等组件的正在加载状态场景。
+ * @tutorial https://uviewpro.cn/zh/components/loading.html
+ * @property {String} mode 模式选择，见官网说明（默认circle）
+ * @property {String} color 动画活动区域的颜色，只对 mode = flower 模式有效（默认#c7c7c7）
+ * @property {String|Number} size 加载图标的大小，单位rpx（默认34）
+ * @property {Boolean} show 是否显示动画（默认true）
+ * @example <u-loading mode="circle"></u-loading>
+ */
+const props = defineProps(LoadingProps);
+
+/**
+ * 加载中圆圈动画的样式
+ * @returns {Record<string, any>}
+ */
+const cricleStyle = computed(() => {
+    let style: Record<string, any> = {};
+    style.width = props.size + 'rpx';
+    style.height = props.size + 'rpx';
+    // 只对圆圈模式生效
+    if (props.mode === 'circle') {
+        style.borderColor = `#e4e4e4 #e4e4e4 #e4e4e4 ${props.color ? props.color : '#c7c7c7'}`;
+    }
+    return style;
+});
+</script>
+
+<style lang="scss" scoped>
+@import '../../libs/css/style.components.scss';
+
+.u-loading-circle {
+    /* #ifndef APP-NVUE */
+    display: inline-flex;
+    /* #endif */
+    vertical-align: middle;
+    width: 28rpx;
+    height: 28rpx;
+    background: 0 0;
+    border-radius: 50%;
+    border: 2px solid;
+    border-color: #e5e5e5 #e5e5e5 #e5e5e5 #8f8d8e;
+    animation: u-circle 1s linear infinite;
+}
+
+.u-loading-flower {
+    width: 20px;
+    height: 20px;
+    display: inline-block;
+    vertical-align: middle;
+    -webkit-animation: u-flower 1s steps(12) infinite;
+    animation: u-flower 1s steps(12) infinite;
+    background: transparent
+        url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMjAiIGhlaWdodD0iMTIwIiB2aWV3Qm94PSIwIDAgMTAwIDEwMCI+PHBhdGggZmlsbD0ibm9uZSIgZD0iTTAgMGgxMDB2MTAwSDB6Ii8+PHJlY3Qgd2lkdGg9IjciIGhlaWdodD0iMjAiIHg9IjQ2LjUiIHk9IjQwIiBmaWxsPSIjRTlFOUU5IiByeD0iNSIgcnk9IjUiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDAgLTMwKSIvPjxyZWN0IHdpZHRoPSI3IiBoZWlnaHQ9IjIwIiB4PSI0Ni41IiB5PSI0MCIgZmlsbD0iIzk4OTY5NyIgcng9IjUiIHJ5PSI1IiB0cmFuc2Zvcm09InJvdGF0ZSgzMCAxMDUuOTggNjUpIi8+PHJlY3Qgd2lkdGg9IjciIGhlaWdodD0iMjAiIHg9IjQ2LjUiIHk9IjQwIiBmaWxsPSIjOUI5OTlBIiByeD0iNSIgcnk9IjUiIHRyYW5zZm9ybT0icm90YXRlKDYwIDc1Ljk4IDY1KSIvPjxyZWN0IHdpZHRoPSI3IiBoZWlnaHQ9IjIwIiB4PSI0Ni41IiB5PSI0MCIgZmlsbD0iI0EzQTFBMiIgcng9IjUiIHJ5PSI1IiB0cmFuc2Zvcm09InJvdGF0ZSg5MCA2NSA2NSkiLz48cmVjdCB3aWR0aD0iNyIgaGVpZ2h0PSIyMCIgeD0iNDYuNSIgeT0iNDAiIGZpbGw9IiNBQkE5QUEiIHJ4PSI1IiByeT0iNSIgdHJhbnNmb3JtPSJyb3RhdGUoMTIwIDU4LjY2IDY1KSIvPjxyZWN0IHdpZHRoPSI3IiBoZWlnaHQ9IjIwIiB4PSI0Ni41IiB5PSI0MCIgZmlsbD0iI0IyQjJCMiIgcng9IjUiIHJ5PSI1IiB0cmFuc2Zvcm09InJvdGF0ZSgxNTAgNTQuMDIgNjUpIi8+PHJlY3Qgd2lkdGg9IjciIGhlaWdodD0iMjAiIHg9IjQ2LjUiIHk9IjQwIiBmaWxsPSIjQkFCOEI5IiByeD0iNSIgcnk9IjUiIHRyYW5zZm9ybT0icm90YXRlKDE4MCA1MCA2NSkiLz48cmVjdCB3aWR0aD0iNyIgaGVpZ2h0PSIyMCIgeD0iNDYuNSIgeT0iNDAiIGZpbGw9IiNDMkMwQzEiIHJ4PSI1IiByeT0iNSIgdHJhbnNmb3JtPSJyb3RhdGUoLTE1MCA0NS45OCA2NSkiLz48cmVjdCB3aWR0aD0iNyIgaGVpZ2h0PSIyMCIgeD0iNDYuNSIgeT0iNDAiIGZpbGw9IiNDQkNCQ0IiIHJ4PSI1IiByeT0iNSIgdHJhbnNmb3JtPSJyb3RhdGUoLTEyMCA0MS4zNCA2NSkiLz48cmVjdCB3aWR0aD0iNyIgaGVpZ2h0PSIyMCIgeD0iNDYuNSIgeT0iNDAiIGZpbGw9IiNEMkQyRDIiIHJ4PSI1IiByeT0iNSIgdHJhbnNmb3JtPSJyb3RhdGUoLTkwIDM1IDY1KSIvPjxyZWN0IHdpZHRoPSI3IiBoZWlnaHQ9IjIwIiB4PSI0Ni41IiB5PSI0MCIgZmlsbD0iI0RBREFEQSIgcng9IjUiIHJ5PSI1IiB0cmFuc2Zvcm09InJvdGF0ZSgtNjAgMjQuMDIgNjUpIi8+PHJlY3Qgd2lkdGg9IjciIGhlaWdodD0iMjAiIHg9IjQ2LjUiIHk9IjQwIiBmaWxsPSIjRTJFMkUyIiByeD0iNSIgcnk9IjUiIHRyYW5zZm9ybT0icm90YXRlKC0zMCAtNS45OCA2NSkiLz48L3N2Zz4=)
+        no-repeat;
+    background-size: 100%;
+}
+
+@keyframes u-flower {
+    0% {
+        -webkit-transform: rotate(0deg);
+        transform: rotate(0deg);
+    }
+    to {
+        -webkit-transform: rotate(1turn);
+        transform: rotate(1turn);
+    }
+}
+
+@keyframes u-circle {
+    0% {
+        transform: rotate(0);
+    }
+    100% {
+        transform: rotate(360deg);
+    }
+}
+</style>

package/components/u-loading-popup/types.ts

@@ -1,26 +1,26 @@
-import type { ExtractPropTypes, PropType } from 'vue';
-type LoadingMode = 'circle' | 'flower';
-
-/**
- * u-loading-popup 组件 props 类型定义
- */
-export const LoadingPopupProps = {
-    /** 是否显示加载弹窗 */
-    modelValue: { type: Boolean, default: false },
-    /** 加载提示文本 */
-    text: { type: String, default: '' },
-    /** 方向，可选 'vertical' | 'horizontal' */
-    direction: { type: String as PropType<'vertical' | 'horizontal'>, default: 'vertical' },
-    /** 自动关闭的持续时间(ms)，0为不自动关闭 */
-    duration: { type: Number, default: 0 },
-    /** 允许点击遮罩关闭的最短时间(ms) */
-    cancelTime: { type: Number, default: 10000 },
-    /** 动画的类型 */
-    mode: { type: String as PropType<LoadingMode>, default: 'circle' },
-    /** 动画的颜色 */
-    color: { type: String, default: '#c7c7c7' },
-    /** 加载图标的大小，单位rpx */
-    size: { type: [String, Number] as PropType<string | number>, default: '48' }
-};
-
-export type LoadingPopupProps = ExtractPropTypes<typeof LoadingPopupProps>;
+import type { ExtractPropTypes, PropType } from 'vue';
+type LoadingMode = 'circle' | 'flower';
+
+/**
+ * u-loading-popup 组件 props 类型定义
+ */
+export const LoadingPopupProps = {
+    /** 是否显示加载弹窗 */
+    modelValue: { type: Boolean, default: false },
+    /** 加载提示文本 */
+    text: { type: String, default: '' },
+    /** 方向，可选 'vertical' | 'horizontal' */
+    direction: { type: String as PropType<'vertical' | 'horizontal'>, default: 'vertical' },
+    /** 自动关闭的持续时间(ms)，0为不自动关闭 */
+    duration: { type: Number, default: 0 },
+    /** 允许点击遮罩关闭的最短时间(ms) */
+    cancelTime: { type: Number, default: 10000 },
+    /** 动画的类型 */
+    mode: { type: String as PropType<LoadingMode>, default: 'circle' },
+    /** 动画的颜色 */
+    color: { type: String, default: '#c7c7c7' },
+    /** 加载图标的大小，单位rpx */
+    size: { type: [String, Number] as PropType<string | number>, default: '48' }
+};
+
+export type LoadingPopupProps = ExtractPropTypes<typeof LoadingPopupProps>;