uview-pro 0.3.0 → 0.3.1

package/components/u-badge/u-badge.vue

@@ -1,183 +1,183 @@
-<template>
-    <view
-        v-if="show"
-        class="u-badge"
-        :class="[
-            isDot ? 'u-badge-dot' : '',
-            size === 'mini' ? 'u-badge-mini' : '',
-            type ? 'u-badge--bg--' + type : '',
-            customClass
-        ]"
-        :style="
-            $u.toStyle(
-                {
-                    top: (offset as number[])[0] + 'rpx',
-                    right: (offset as number[])[1] + 'rpx',
-                    fontSize: fontSize + 'rpx',
-                    position: absolute ? 'absolute' : 'static',
-                    color: color,
-                    backgroundColor: bgColor
-                },
-                boxStyle,
-                customStyle
-            )
-        "
-    >
-        {{ showText }}
-    </view>
-</template>
-
-<script lang="ts">
-export default {
-    name: 'u-badge',
-    options: {
-        addGlobalClass: true,
-        // #ifndef MP-TOUTIAO
-        virtualHost: true,
-        // #endif
-        styleIsolation: 'shared'
-    }
-};
-</script>
-
-<script setup lang="ts">
-import { computed } from 'vue';
-import { BadgeProps } from './types';
-import { $u } from '../..';
-
-/**
- * badge 角标
- * @description 本组件一般用于展示头像的地方，如个人中心，或者评论列表页的用户头像展示等场所。
- * @tutorial https://uviewpro.cn/zh/components/badge.html
- * @property {String|Number} count 展示的数字，大于 overflowCount 时显示为 ${overflowCount}+，为0且show-zero为false时隐藏
- * @property {Boolean} is-dot 不展示数字，只有一个小点（默认false）
- * @property {Boolean} absolute 组件是否绝对定位，为true时，offset参数才有效（默认true）
- * @property {String|Number} overflow-count 展示封顶的数字值（默认99）
- * @property {String} type 使用预设的背景颜色（默认error）
- * @property {Boolean} show-zero 当数值为 0 时，是否展示 Badge（默认false）
- * @property {String} size Badge的尺寸，设为mini会得到小一号的Badge（默认default）
- * @property {Array} offset 设置badge的位置偏移，格式为 [x, y]，也即设置的为top和right的值，单位rpx。absolute为true时有效（默认[20, 20]）
- * @property {String} color 字体颜色（默认#ffffff）
- * @property {String} bgColor 背景颜色，优先级比type高，如设置，type参数会失效
- * @property {Boolean} is-center 组件中心点是否和父组件右上角重合，优先级比offset高，如设置，offset参数会失效（默认false）
- * @example <u-badge type="error" count="7"></u-badge>
- */
-
-const props = defineProps(BadgeProps);
-
-/**
- * 计算 badge 的定位和变换样式
- */
-const boxStyle = computed(() => {
-    let style: Record<string, any> = {};
-    if (props.isCenter) {
-        style.top = 0;
-        style.right = 0;
-        // Y轴-50%，意味着badge向上移动了badge自身高度一半，X轴50%，意味着向右移动了自身宽度一半
-        style.transform = 'translateY(-50%) translateX(50%)';
-    } else {
-        style.top = (props.offset as number[])[0] + 'rpx';
-        style.right = (props.offset as number[])[1] + 'rpx';
-        style.transform = 'translateY(0) translateX(0)';
-    }
-    // 如果尺寸为mini，后接上scale()
-    if (props.size === 'mini') {
-        style.transform = style.transform + ' scale(0.8)';
-    }
-    return style;
-});
-
-/**
- * 计算显示的文本内容
- */
-const showText = computed(() => {
-    if (props.isDot) return '';
-    else {
-        if (Number(props.count) > props.overflowCount) return `${props.overflowCount}+`;
-        else return props.count;
-    }
-});
-
-/**
- * 是否显示组件
- */
-const show = computed(() => {
-    // 如果count的值为0，并且showZero设置为false，不显示组件
-    if (Number(props.count) === 0 && props.showZero === false) return false;
-    else return true;
-});
-</script>
-
-<style lang="scss" scoped>
-@import '../../libs/css/style.components.scss';
-
-.u-badge {
-    /* #ifndef APP-NVUE */
-    display: inline-flex;
-    /* #endif */
-    justify-content: center;
-    align-items: center;
-    line-height: 24rpx;
-    padding: 4rpx 8rpx;
-    border-radius: 100rpx;
-    z-index: 9;
-
-    &--bg--primary {
-        background-color: $u-type-primary;
-    }
-    &--bg--error {
-        background-color: $u-type-error;
-    }
-    &--bg--success {
-        background-color: $u-type-success;
-    }
-    &--bg--info {
-        background-color: $u-type-info;
-    }
-    &--bg--warning {
-        background-color: $u-type-warning;
-    }
-}
-
-.u-badge-dot {
-    height: 16rpx;
-    width: 16rpx;
-    border-radius: 100rpx;
-    line-height: 1;
-}
-
-.u-badge-mini {
-    transform: scale(0.8);
-    transform-origin: center center;
-}
-
-// .u-primary {
-// 	background: $u-type-primary;
-// 	color: #fff;
-// }
-
-// .u-error {
-// 	background: $u-type-error;
-// 	color: #fff;
-// }
-
-// .u-warning {
-// 	background: $u-type-warning;
-// 	color: #fff;
-// }
-
-// .u-success {
-// 	background: $u-type-success;
-// 	color: #fff;
-// }
-
-// .u-black {
-// 	background: #585858;
-// 	color: #fff;
-// }
-
-.u-info {
-    background-color: $u-type-info;
-    color: #fff;
-}
-</style>
+<template>
+    <view
+        v-if="show"
+        class="u-badge"
+        :class="[
+            isDot ? 'u-badge-dot' : '',
+            size === 'mini' ? 'u-badge-mini' : '',
+            type ? 'u-badge--bg--' + type : '',
+            customClass
+        ]"
+        :style="
+            $u.toStyle(
+                {
+                    top: (offset as number[])[0] + 'rpx',
+                    right: (offset as number[])[1] + 'rpx',
+                    fontSize: fontSize + 'rpx',
+                    position: absolute ? 'absolute' : 'static',
+                    color: color,
+                    backgroundColor: bgColor
+                },
+                boxStyle,
+                customStyle
+            )
+        "
+    >
+        {{ showText }}
+    </view>
+</template>
+
+<script lang="ts">
+export default {
+    name: 'u-badge',
+    options: {
+        addGlobalClass: true,
+        // #ifndef MP-TOUTIAO
+        virtualHost: true,
+        // #endif
+        styleIsolation: 'shared'
+    }
+};
+</script>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import { BadgeProps } from './types';
+import { $u } from '../..';
+
+/**
+ * badge 角标
+ * @description 本组件一般用于展示头像的地方，如个人中心，或者评论列表页的用户头像展示等场所。
+ * @tutorial https://uviewpro.cn/zh/components/badge.html
+ * @property {String|Number} count 展示的数字，大于 overflowCount 时显示为 ${overflowCount}+，为0且show-zero为false时隐藏
+ * @property {Boolean} is-dot 不展示数字，只有一个小点（默认false）
+ * @property {Boolean} absolute 组件是否绝对定位，为true时，offset参数才有效（默认true）
+ * @property {String|Number} overflow-count 展示封顶的数字值（默认99）
+ * @property {String} type 使用预设的背景颜色（默认error）
+ * @property {Boolean} show-zero 当数值为 0 时，是否展示 Badge（默认false）
+ * @property {String} size Badge的尺寸，设为mini会得到小一号的Badge（默认default）
+ * @property {Array} offset 设置badge的位置偏移，格式为 [x, y]，也即设置的为top和right的值，单位rpx。absolute为true时有效（默认[20, 20]）
+ * @property {String} color 字体颜色（默认#ffffff）
+ * @property {String} bgColor 背景颜色，优先级比type高，如设置，type参数会失效
+ * @property {Boolean} is-center 组件中心点是否和父组件右上角重合，优先级比offset高，如设置，offset参数会失效（默认false）
+ * @example <u-badge type="error" count="7"></u-badge>
+ */
+
+const props = defineProps(BadgeProps);
+
+/**
+ * 计算 badge 的定位和变换样式
+ */
+const boxStyle = computed(() => {
+    let style: Record<string, any> = {};
+    if (props.isCenter) {
+        style.top = 0;
+        style.right = 0;
+        // Y轴-50%，意味着badge向上移动了badge自身高度一半，X轴50%，意味着向右移动了自身宽度一半
+        style.transform = 'translateY(-50%) translateX(50%)';
+    } else {
+        style.top = (props.offset as number[])[0] + 'rpx';
+        style.right = (props.offset as number[])[1] + 'rpx';
+        style.transform = 'translateY(0) translateX(0)';
+    }
+    // 如果尺寸为mini，后接上scale()
+    if (props.size === 'mini') {
+        style.transform = style.transform + ' scale(0.8)';
+    }
+    return style;
+});
+
+/**
+ * 计算显示的文本内容
+ */
+const showText = computed(() => {
+    if (props.isDot) return '';
+    else {
+        if (Number(props.count) > props.overflowCount) return `${props.overflowCount}+`;
+        else return props.count;
+    }
+});
+
+/**
+ * 是否显示组件
+ */
+const show = computed(() => {
+    // 如果count的值为0，并且showZero设置为false，不显示组件
+    if (Number(props.count) === 0 && props.showZero === false) return false;
+    else return true;
+});
+</script>
+
+<style lang="scss" scoped>
+@import '../../libs/css/style.components.scss';
+
+.u-badge {
+    /* #ifndef APP-NVUE */
+    display: inline-flex;
+    /* #endif */
+    justify-content: center;
+    align-items: center;
+    line-height: 24rpx;
+    padding: 4rpx 8rpx;
+    border-radius: 100rpx;
+    z-index: 9;
+
+    &--bg--primary {
+        background-color: $u-type-primary;
+    }
+    &--bg--error {
+        background-color: $u-type-error;
+    }
+    &--bg--success {
+        background-color: $u-type-success;
+    }
+    &--bg--info {
+        background-color: $u-type-info;
+    }
+    &--bg--warning {
+        background-color: $u-type-warning;
+    }
+}
+
+.u-badge-dot {
+    height: 16rpx;
+    width: 16rpx;
+    border-radius: 100rpx;
+    line-height: 1;
+}
+
+.u-badge-mini {
+    transform: scale(0.8);
+    transform-origin: center center;
+}
+
+// .u-primary {
+// 	background: $u-type-primary;
+// 	color: #fff;
+// }
+
+// .u-error {
+// 	background: $u-type-error;
+// 	color: #fff;
+// }
+
+// .u-warning {
+// 	background: $u-type-warning;
+// 	color: #fff;
+// }
+
+// .u-success {
+// 	background: $u-type-success;
+// 	color: #fff;
+// }
+
+// .u-black {
+// 	background: #585858;
+// 	color: #fff;
+// }
+
+.u-info {
+    background-color: $u-type-info;
+    color: #fff;
+}
+</style>

package/components/u-button/types.ts

@@ -1,66 +1,66 @@
-import type { ExtractPropTypes, PropType } from 'vue';
-import type { ButtonFormType, ButtonOpenType, ButtonScope, ButtonSize, ButtonType, Shape } from '../../types/global';
-import { baseProps } from '../common/props';
-
-/**
- * button 按钮类型定义
- * @description 供 u-button 组件 props 使用
- */
-
-export const ButtonProps = {
-    ...baseProps,
-    /** 是否细边框 */
-    hairLine: { type: Boolean, default: true },
-    /** 按钮的预置样式，default，primary，error，warning，success */
-    type: { type: String as PropType<ButtonType>, default: 'default' },
-    /** 按钮尺寸，default，medium，mini */
-    size: { type: String as PropType<ButtonSize>, default: 'default' },
-    /** 按钮形状，circle（两边为半圆），square（带圆角） */
-    shape: { type: String as PropType<Shape>, default: 'square' },
-    /** 按钮是否镂空 */
-    plain: { type: Boolean, default: false },
-    /** 是否禁止状态 */
-    disabled: { type: Boolean, default: false },
-    /** 是否加载中 */
-    loading: { type: Boolean, default: false },
-    /** 支付宝小程序，当 open-type 为 getAuthorize 时有效 */
-    scope: { type: String as PropType<ButtonScope>, default: '' },
-    /** 开放能力，具体请看uniapp稳定关于button组件部分说明 */
-    openType: { type: String as PropType<ButtonOpenType>, default: '' },
-    /** 用于 <form> 组件，点击分别会触发 <form> 组件的 submit/reset 事件 */
-    formType: { type: String as PropType<ButtonFormType>, default: '' },
-    /** 打开 APP 时，向 APP 传递的参数，open-type=launchApp时有效 */
-    appParameter: { type: String, default: '' },
-    /** 指定是否阻止本节点的祖先节点出现点击态，微信小程序有效 */
-    hoverStopPropagation: { type: Boolean, default: false },
-    /** 指定返回用户信息的语言，zh_CN 简体中文，zh_TW 繁体中文，en 英文。只微信小程序有效 */
-    lang: { type: String, default: 'en' },
-    /** 会话来源，open-type="contact"时有效。只微信小程序有效 */
-    sessionFrom: { type: String, default: '' },
-    /** 会话内消息卡片标题，open-type="contact"时有效 */
-    sendMessageTitle: { type: String, default: '' },
-    /** 会话内消息卡片点击跳转小程序路径，open-type="contact"时有效 */
-    sendMessagePath: { type: String, default: '' },
-    /** 会话内消息卡片图片，open-type="contact"时有效 */
-    sendMessageImg: { type: String, default: '' },
-    /** 是否显示会话内消息卡片，open-type="contact"时有效 */
-    showMessageCard: { type: Boolean, default: false },
-    /** 手指按（触摸）按钮时按钮时的背景颜色 */
-    hoverBgColor: { type: String, default: '' },
-    /** 水波纹的背景颜色 */
-    rippleBgColor: { type: String, default: '' },
-    /** 是否开启水波纹效果 */
-    ripple: { type: Boolean, default: false },
-    /** 按下的类名 */
-    hoverClass: { type: String, default: '' },
-    /** 额外传参参数，用于小程序的data-xxx属性，通过target.dataset.name获取 */
-    dataName: { type: String, default: '' },
-    /** 节流，一定时间内只能触发一次 */
-    throttleTime: { type: [String, Number], default: 1000 },
-    /** 按住后多久出现点击态，单位毫秒 */
-    hoverStartTime: { type: [String, Number], default: 20 },
-    /** 手指松开后点击态保留时间，单位毫秒 */
-    hoverStayTime: { type: [String, Number], default: 150 }
-};
-
-export type ButtonProps = ExtractPropTypes<typeof ButtonProps>;
+import type { ExtractPropTypes, PropType } from 'vue';
+import type { ButtonFormType, ButtonOpenType, ButtonScope, ButtonSize, ButtonType, Shape } from '../../types/global';
+import { baseProps } from '../common/props';
+
+/**
+ * button 按钮类型定义
+ * @description 供 u-button 组件 props 使用
+ */
+
+export const ButtonProps = {
+    ...baseProps,
+    /** 是否细边框 */
+    hairLine: { type: Boolean, default: true },
+    /** 按钮的预置样式，default，primary，error，warning，success */
+    type: { type: String as PropType<ButtonType>, default: 'default' },
+    /** 按钮尺寸，default，medium，mini */
+    size: { type: String as PropType<ButtonSize>, default: 'default' },
+    /** 按钮形状，circle（两边为半圆），square（带圆角） */
+    shape: { type: String as PropType<Shape>, default: 'square' },
+    /** 按钮是否镂空 */
+    plain: { type: Boolean, default: false },
+    /** 是否禁止状态 */
+    disabled: { type: Boolean, default: false },
+    /** 是否加载中 */
+    loading: { type: Boolean, default: false },
+    /** 支付宝小程序，当 open-type 为 getAuthorize 时有效 */
+    scope: { type: String as PropType<ButtonScope>, default: '' },
+    /** 开放能力，具体请看uniapp稳定关于button组件部分说明 */
+    openType: { type: String as PropType<ButtonOpenType>, default: '' },
+    /** 用于 <form> 组件，点击分别会触发 <form> 组件的 submit/reset 事件 */
+    formType: { type: String as PropType<ButtonFormType>, default: '' },
+    /** 打开 APP 时，向 APP 传递的参数，open-type=launchApp时有效 */
+    appParameter: { type: String, default: '' },
+    /** 指定是否阻止本节点的祖先节点出现点击态，微信小程序有效 */
+    hoverStopPropagation: { type: Boolean, default: false },
+    /** 指定返回用户信息的语言，zh_CN 简体中文，zh_TW 繁体中文，en 英文。只微信小程序有效 */
+    lang: { type: String, default: 'en' },
+    /** 会话来源，open-type="contact"时有效。只微信小程序有效 */
+    sessionFrom: { type: String, default: '' },
+    /** 会话内消息卡片标题，open-type="contact"时有效 */
+    sendMessageTitle: { type: String, default: '' },
+    /** 会话内消息卡片点击跳转小程序路径，open-type="contact"时有效 */
+    sendMessagePath: { type: String, default: '' },
+    /** 会话内消息卡片图片，open-type="contact"时有效 */
+    sendMessageImg: { type: String, default: '' },
+    /** 是否显示会话内消息卡片，open-type="contact"时有效 */
+    showMessageCard: { type: Boolean, default: false },
+    /** 手指按（触摸）按钮时按钮时的背景颜色 */
+    hoverBgColor: { type: String, default: '' },
+    /** 水波纹的背景颜色 */
+    rippleBgColor: { type: String, default: '' },
+    /** 是否开启水波纹效果 */
+    ripple: { type: Boolean, default: false },
+    /** 按下的类名 */
+    hoverClass: { type: String, default: '' },
+    /** 额外传参参数，用于小程序的data-xxx属性，通过target.dataset.name获取 */
+    dataName: { type: String, default: '' },
+    /** 节流，一定时间内只能触发一次 */
+    throttleTime: { type: [String, Number], default: 1000 },
+    /** 按住后多久出现点击态，单位毫秒 */
+    hoverStartTime: { type: [String, Number], default: 20 },
+    /** 手指松开后点击态保留时间，单位毫秒 */
+    hoverStayTime: { type: [String, Number], default: 150 }
+};
+
+export type ButtonProps = ExtractPropTypes<typeof ButtonProps>;