uview-pro 0.2.4 → 0.3.1

package/components/u-line/u-line.vue

@@ -1,59 +1,68 @@
-<template>
-    <view class="u-line" :style="lineStyle"></view>
-</template>
-
-<script setup lang="ts">
-import { computed } from 'vue';
-import { $u } from '../..';
-import { LineProps } from './types';
-
-defineOptions({
-    name: 'u-line'
-});
-
-/**
- * line 线条
- * @description 此组件一般用于显示一根线条，用于分隔内容块，有横向和竖向两种模式，且能设置0.5px线条，使用也很简单
- * @tutorial https://uviewpro.cn/zh/components/line.html
- * @property {String} color 线条的颜色(默认#e4e7ed)
- * @property {String} length 长度，竖向时表现为高度，横向时表现为长度，可以为百分比，带rpx单位的值等
- * @property {String} direction 线条的方向，row-横向，col-竖向(默认row)
- * @property {String} border-style 线条的类型，solid-实线，dashed-方形虚线，dotted-圆点虚线(默认solid)
- * @property {Boolean} hair-line 是否显示细线条(默认true)
- * @property {String} margin 线条与上下左右元素的间距，字符串形式，如"30rpx"
- * @example <u-line color="red"></u-line>
- */
-const props = defineProps(LineProps);
-
-/**
- * 线条样式
- */
-const lineStyle = computed(() => {
-    let style: Record<string, string> = {};
-    style.margin = props.margin;
-    // 如果是水平线条，边框高度为1px，再通过transform缩小一半，就是0.5px了
-    if (props.direction === 'row') {
-        // 此处采用兼容分开写，兼容nvue的写法
-        style.borderBottomWidth = '1px';
-        style.borderBottomStyle = props.borderStyle;
-        style.width = $u.addUnit(props.length);
-        if (props.hairLine) style.transform = 'scaleY(0.5)';
-    } else {
-        // 如果是竖向线条，边框宽度为1px，再通过transform缩小一半，就是0.5px了
-        style.borderLeftWidth = '1px';
-        style.borderLeftStyle = props.borderStyle;
-        style.height = $u.addUnit(props.length);
-        if (props.hairLine) style.transform = 'scaleX(0.5)';
-    }
-    style.borderColor = props.color;
-    return style;
-});
-</script>
-
-<style scoped lang="scss">
-@import '../../libs/css/style.components.scss';
-
-.u-line {
-    vertical-align: middle;
-}
-</style>
+<template>
+    <view class="u-line" :style="lineStyle"></view>
+</template>
+
+<script lang="ts">
+export default {
+    name: 'u-line',
+    options: {
+        addGlobalClass: true,
+        // #ifndef MP-TOUTIAO
+        virtualHost: true,
+        // #endif
+        styleIsolation: 'shared'
+    }
+};
+</script>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import { $u } from '../..';
+import { LineProps } from './types';
+
+/**
+ * line 线条
+ * @description 此组件一般用于显示一根线条，用于分隔内容块，有横向和竖向两种模式，且能设置0.5px线条，使用也很简单
+ * @tutorial https://uviewpro.cn/zh/components/line.html
+ * @property {String} color 线条的颜色(默认#e4e7ed)
+ * @property {String} length 长度，竖向时表现为高度，横向时表现为长度，可以为百分比，带rpx单位的值等
+ * @property {String} direction 线条的方向，row-横向，col-竖向(默认row)
+ * @property {String} border-style 线条的类型，solid-实线，dashed-方形虚线，dotted-圆点虚线(默认solid)
+ * @property {Boolean} hair-line 是否显示细线条(默认true)
+ * @property {String} margin 线条与上下左右元素的间距，字符串形式，如"30rpx"
+ * @example <u-line color="red"></u-line>
+ */
+const props = defineProps(LineProps);
+
+/**
+ * 线条样式
+ */
+const lineStyle = computed(() => {
+    let style: Record<string, string> = {};
+    style.margin = props.margin;
+    // 如果是水平线条，边框高度为1px，再通过transform缩小一半，就是0.5px了
+    if (props.direction === 'row') {
+        // 此处采用兼容分开写，兼容nvue的写法
+        style.borderBottomWidth = '1px';
+        style.borderBottomStyle = props.borderStyle;
+        style.width = $u.addUnit(props.length);
+        if (props.hairLine) style.transform = 'scaleY(0.5)';
+    } else {
+        // 如果是竖向线条，边框宽度为1px，再通过transform缩小一半，就是0.5px了
+        style.borderLeftWidth = '1px';
+        style.borderLeftStyle = props.borderStyle;
+        style.height = $u.addUnit(props.length);
+        if (props.hairLine) style.transform = 'scaleX(0.5)';
+    }
+    style.borderColor = props.color;
+    return style;
+});
+</script>
+
+<style scoped lang="scss">
+@import '../../libs/css/style.components.scss';
+
+.u-line {
+    vertical-align: middle;
+}
+</style>

package/components/u-line-progress/types.ts

@@ -1,58 +1,58 @@
-import type { ExtractPropTypes, PropType } from 'vue';
-
-/**
- * u-line-progress 组件 props 类型定义
- * @description 线型进度条，支持多种样式
- */
-export const LineProgressProps = {
-    /** 两端是否显示半圆形 */
-    round: {
-        type: Boolean,
-        default: true
-    },
-    /** 主题颜色 */
-    type: {
-        type: String,
-        default: ''
-    },
-    /** 激活部分的颜色 */
-    activeColor: {
-        type: String,
-        default: '#19be6b'
-    },
-    /** 进度条的底色 */
-    inactiveColor: {
-        type: String,
-        default: '#ececec'
-    },
-    /** 进度百分比，数值 */
-    percent: {
-        type: [Number, String] as PropType<number | string>,
-        default: 0
-    },
-    /** 是否在进度条内部显示百分比的值 */
-    showPercent: {
-        type: Boolean,
-        default: true
-    },
-    /** 进度条的高度，单位rpx */
-    height: {
-        type: [Number, String] as PropType<number | string>,
-        default: 28
-    },
-    /** 是否显示条纹 */
-    striped: {
-        type: Boolean,
-        default: false
-    },
-    /** 条纹是否显示活动状态 */
-    stripedActive: {
-        type: Boolean,
-        default: false
-    }
-};
-
-/**
- * u-line-progress 组件 props 类型
- */
-export type LineProgressProps = ExtractPropTypes<typeof LineProgressProps>;
+import type { ExtractPropTypes, PropType } from 'vue';
+
+/**
+ * u-line-progress 组件 props 类型定义
+ * @description 线型进度条，支持多种样式
+ */
+export const LineProgressProps = {
+    /** 两端是否显示半圆形 */
+    round: {
+        type: Boolean,
+        default: true
+    },
+    /** 主题颜色 */
+    type: {
+        type: String,
+        default: ''
+    },
+    /** 激活部分的颜色 */
+    activeColor: {
+        type: String,
+        default: '#19be6b'
+    },
+    /** 进度条的底色 */
+    inactiveColor: {
+        type: String,
+        default: '#ececec'
+    },
+    /** 进度百分比，数值 */
+    percent: {
+        type: [Number, String] as PropType<number | string>,
+        default: 0
+    },
+    /** 是否在进度条内部显示百分比的值 */
+    showPercent: {
+        type: Boolean,
+        default: true
+    },
+    /** 进度条的高度，单位rpx */
+    height: {
+        type: [Number, String] as PropType<number | string>,
+        default: 28
+    },
+    /** 是否显示条纹 */
+    striped: {
+        type: Boolean,
+        default: false
+    },
+    /** 条纹是否显示活动状态 */
+    stripedActive: {
+        type: Boolean,
+        default: false
+    }
+};
+
+/**
+ * u-line-progress 组件 props 类型
+ */
+export type LineProgressProps = ExtractPropTypes<typeof LineProgressProps>;

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

@@ -1,117 +1,126 @@
-<template>
-    <view
-        class="u-progress"
-        :style="{
-            borderRadius: round ? '100rpx' : 0,
-            height: height + 'rpx',
-            backgroundColor: inactiveColor
-        }"
-    >
-        <view
-            :class="[
-                type ? `u-type-${type}-bg` : '',
-                striped ? 'u-striped' : '',
-                striped && stripedActive ? 'u-striped-active' : ''
-            ]"
-            class="u-active"
-            :style="progressStyle"
-        >
-            <slot v-if="slots.default" />
-            <template v-else-if="showPercent">
-                {{ percent + '%' }}
-            </template>
-        </view>
-    </view>
-</template>
-
-<script setup lang="ts">
-import { computed, useSlots } from 'vue';
-import { LineProgressProps } from './types';
-
-defineOptions({
-    name: 'u-line-progress'
-});
-
-/**
- * lineProgress 线型进度条
- * @description 展示操作或任务的当前进度，比如上传文件，是一个线形的进度条。
- * @tutorial https://uviewpro.cn/zh/components/lineProgress.html
- * @property {String Number} percent 进度条百分比值，为数值类型，0-100
- * @property {Boolean} round 进度条两端是否为半圆（默认true）
- * @property {String} type 如设置，active-color值将会失效
- * @property {String} active-color 进度条激活部分的颜色（默认#19be6b）
- * @property {String} inactive-color 进度条的底色（默认#ececec）
- * @property {Boolean} show-percent 是否在进度条内部显示当前的百分比值数值（默认true）
- * @property {String Number} height 进度条的高度，单位rpx（默认28）
- * @property {Boolean} striped 是否显示进度条激活部分的条纹（默认false）
- * @property {Boolean} striped-active 条纹是否具有动态效果（默认false）
- * @example <u-line-progress :percent="70" :show-percent="true"></u-line-progress>
- */
-const props = defineProps(LineProgressProps);
-const slots = useSlots();
-
-/**
- * 进度条激活部分的样式
- */
-const progressStyle = computed(() => {
-    let style: Record<string, string> = {};
-    style.width = props.percent + '%';
-    if (props.activeColor) style.backgroundColor = props.activeColor;
-    return style;
-});
-</script>
-
-<style lang="scss" scoped>
-@import '../../libs/css/style.components.scss';
-
-.u-progress {
-    overflow: hidden;
-    height: 15px;
-    /* #ifndef APP-NVUE */
-    display: inline-flex;
-    /* #endif */
-    align-items: center;
-    width: 100%;
-    border-radius: 100rpx;
-}
-
-.u-active {
-    width: 0;
-    height: 100%;
-    align-items: center;
-    @include vue-flex;
-    justify-items: flex-end;
-    justify-content: space-around;
-    font-size: 20rpx;
-    color: #ffffff;
-    transition: all 0.4s ease;
-}
-
-.u-striped {
-    background-image: linear-gradient(
-        45deg,
-        rgba(255, 255, 255, 0.15) 25%,
-        transparent 25%,
-        transparent 50%,
-        rgba(255, 255, 255, 0.15) 50%,
-        rgba(255, 255, 255, 0.15) 75%,
-        transparent 75%,
-        transparent
-    );
-    background-size: 39px 39px;
-}
-
-.u-striped-active {
-    animation: progress-stripes 2s linear infinite;
-}
-
-@keyframes progress-stripes {
-    0% {
-        background-position: 0 0;
-    }
-
-    100% {
-        background-position: 39px 0;
-    }
-}
-</style>
+<template>
+    <view
+        class="u-progress"
+        :style="{
+            borderRadius: round ? '100rpx' : 0,
+            height: height + 'rpx',
+            backgroundColor: inactiveColor
+        }"
+    >
+        <view
+            :class="[
+                type ? `u-type-${type}-bg` : '',
+                striped ? 'u-striped' : '',
+                striped && stripedActive ? 'u-striped-active' : ''
+            ]"
+            class="u-active"
+            :style="progressStyle"
+        >
+            <slot v-if="slots.default" />
+            <template v-else-if="showPercent">
+                {{ percent + '%' }}
+            </template>
+        </view>
+    </view>
+</template>
+
+<script lang="ts">
+export default {
+    name: 'u-line-progress',
+    options: {
+        addGlobalClass: true,
+        // #ifndef MP-TOUTIAO
+        virtualHost: true,
+        // #endif
+        styleIsolation: 'shared'
+    }
+};
+</script>
+
+<script setup lang="ts">
+import { computed, useSlots } from 'vue';
+import { LineProgressProps } from './types';
+
+/**
+ * lineProgress 线型进度条
+ * @description 展示操作或任务的当前进度，比如上传文件，是一个线形的进度条。
+ * @tutorial https://uviewpro.cn/zh/components/lineProgress.html
+ * @property {String Number} percent 进度条百分比值，为数值类型，0-100
+ * @property {Boolean} round 进度条两端是否为半圆（默认true）
+ * @property {String} type 如设置，active-color值将会失效
+ * @property {String} active-color 进度条激活部分的颜色（默认#19be6b）
+ * @property {String} inactive-color 进度条的底色（默认#ececec）
+ * @property {Boolean} show-percent 是否在进度条内部显示当前的百分比值数值（默认true）
+ * @property {String Number} height 进度条的高度，单位rpx（默认28）
+ * @property {Boolean} striped 是否显示进度条激活部分的条纹（默认false）
+ * @property {Boolean} striped-active 条纹是否具有动态效果（默认false）
+ * @example <u-line-progress :percent="70" :show-percent="true"></u-line-progress>
+ */
+const props = defineProps(LineProgressProps);
+const slots = useSlots();
+
+/**
+ * 进度条激活部分的样式
+ */
+const progressStyle = computed(() => {
+    let style: Record<string, string> = {};
+    style.width = props.percent + '%';
+    if (props.activeColor) style.backgroundColor = props.activeColor;
+    return style;
+});
+</script>
+
+<style lang="scss" scoped>
+@import '../../libs/css/style.components.scss';
+
+.u-progress {
+    overflow: hidden;
+    height: 15px;
+    /* #ifndef APP-NVUE */
+    display: inline-flex;
+    /* #endif */
+    align-items: center;
+    width: 100%;
+    border-radius: 100rpx;
+}
+
+.u-active {
+    width: 0;
+    height: 100%;
+    align-items: center;
+    @include vue-flex;
+    justify-items: flex-end;
+    justify-content: space-around;
+    font-size: 20rpx;
+    color: #ffffff;
+    transition: all 0.4s ease;
+}
+
+.u-striped {
+    background-image: linear-gradient(
+        45deg,
+        rgba(255, 255, 255, 0.15) 25%,
+        transparent 25%,
+        transparent 50%,
+        rgba(255, 255, 255, 0.15) 50%,
+        rgba(255, 255, 255, 0.15) 75%,
+        transparent 75%,
+        transparent
+    );
+    background-size: 39px 39px;
+}
+
+.u-striped-active {
+    animation: progress-stripes 2s linear infinite;
+}
+
+@keyframes progress-stripes {
+    0% {
+        background-position: 0 0;
+    }
+
+    100% {
+        background-position: 39px 0;
+    }
+}
+</style>

package/components/u-link/types.ts

@@ -1,43 +1,43 @@
-import type { ExtractPropTypes, PropType } from 'vue';
-
-/**
- * u-link 组件 props 类型定义
- * @description 超链接组件，支持多端跳转/复制/提示
- */
-export const LinkProps = {
-    /** 文字颜色 */
-    color: {
-        type: String,
-        default: '#2979ff'
-    },
-    /** 字体大小，单位rpx */
-    fontSize: {
-        type: [String, Number] as PropType<string | number>,
-        default: 28
-    },
-    /** 是否显示下划线 */
-    underLine: {
-        type: Boolean,
-        default: false
-    },
-    /** 要跳转的链接 */
-    href: {
-        type: String,
-        default: ''
-    },
-    /** 小程序中复制到粘贴板的提示语 */
-    mpTips: {
-        type: String,
-        default: '链接已复制，请在浏览器打开'
-    },
-    /** 下划线颜色 */
-    lineColor: {
-        type: String,
-        default: ''
-    }
-};
-
-/**
- * u-link 组件 props 类型
- */
-export type LinkProps = ExtractPropTypes<typeof LinkProps>;
+import type { ExtractPropTypes, PropType } from 'vue';
+
+/**
+ * u-link 组件 props 类型定义
+ * @description 超链接组件，支持多端跳转/复制/提示
+ */
+export const LinkProps = {
+    /** 文字颜色 */
+    color: {
+        type: String,
+        default: '#2979ff'
+    },
+    /** 字体大小，单位rpx */
+    fontSize: {
+        type: [String, Number] as PropType<string | number>,
+        default: 28
+    },
+    /** 是否显示下划线 */
+    underLine: {
+        type: Boolean,
+        default: false
+    },
+    /** 要跳转的链接 */
+    href: {
+        type: String,
+        default: ''
+    },
+    /** 小程序中复制到粘贴板的提示语 */
+    mpTips: {
+        type: String,
+        default: '链接已复制，请在浏览器打开'
+    },
+    /** 下划线颜色 */
+    lineColor: {
+        type: String,
+        default: ''
+    }
+};
+
+/**
+ * u-link 组件 props 类型
+ */
+export type LinkProps = ExtractPropTypes<typeof LinkProps>;