uview-pro 0.1.0 → 0.2.0

package/components/u-row-notice/u-row-notice.vue

@@ -1,213 +1,213 @@
-<template>
-    <view v-if="props.show" class="u-notice-bar" :style="{ background: computeBgColor, padding: props.padding }" :class="[props.type ? `u-type-${props.type}-light-bg` : '']">
-        <view class="u-direction-row">
-            <view class="u-icon-wrap">
-                <u-icon class="u-left-icon" v-if="props.volumeIcon" name="volume-fill" :size="props.volumeSize" :color="computeColor"></u-icon>
-            </view>
-            <view class="u-notice-box" id="u-notice-box">
-                <view class="u-notice-content" id="u-notice-content" :style="{ animationDuration: animationDuration, animationPlayState: animationPlayState }">
-                    <text class="u-notice-text" @tap="click" :style="textStyle" :class="['u-type-' + props.type]">{{ showText }}</text>
-                </view>
-            </view>
-            <view class="u-icon-wrap">
-                <u-icon @click="getMore" class="u-right-icon" v-if="props.moreIcon" name="arrow-right" :size="26" :color="computeColor"></u-icon>
-                <u-icon @click="close" class="u-right-icon" v-if="props.closeIcon" name="close" :size="24" :color="computeColor"></u-icon>
-            </view>
-        </view>
-    </view>
-</template>
-
-<script setup lang="ts">
-import { ref, computed, watch, onMounted, nextTick, getCurrentInstance } from 'vue';
-import { RowNoticeProps } from './types';
-
-defineOptions({ name: 'u-row-notice' });
-
-/**
- * u-row-notice 水平滚动通告栏
- * @property {Array} list 显示的内容，数组
- * @property {String} type 显示的主题，success|error|primary|info|warning|none
- * @property {Boolean} volumeIcon 是否显示左侧的音量图标
- * @property {Boolean} moreIcon 是否显示右侧的右箭头图标
- * @property {Boolean} closeIcon 是否显示右侧的关闭图标
- * @property {Boolean} autoplay 是否自动播放
- * @property {String} color 文字颜色，各图标也会使用文字颜色
- * @property {String} bgColor 背景颜色
- * @property {Boolean} show 是否显示
- * @property {String|Number} fontSize 字体大小，单位rpx
- * @property {String|Number} volumeSize 音量喇叭的大小
- * @property {String|Number} speed 水平滚动时的滚动速度，即每秒滚动多少rpx
- * @property {String} playState 播放状态，play-播放，paused-暂停
- * @property {String|Number} padding 通知的边距
- */
-
-const props = defineProps(RowNoticeProps);
-
-const emit = defineEmits<{ (e: 'click'): void; (e: 'close'): void; (e: 'getMore'): void }>();
-const instance = getCurrentInstance();
-const textWidth = ref(0); // 滚动的文字宽度
-const animationDuration = ref('10s'); // 动画执行时间
-const animationPlayState = ref('paused'); // 动画的开始和结束执行
-const showText = ref(''); // 显示的文本
-
-/**
- * 计算字体颜色，如果没有自定义的，就用uview主题颜色
- */
-const computeColor = computed(() => {
-    if (props.color) return props.color;
-    // 如果是无主题，就默认使用content-color
-    else if (props.type === 'none') return '#606266';
-    else return props.type;
-});
-
-/**
- * 文字内容的样式
- */
-const textStyle = computed(() => {
-    const style: Record<string, any> = {};
-    if (props.color) style.color = props.color;
-    else if (props.type === 'none') style.color = '#606266';
-    style.fontSize = props.fontSize + 'rpx';
-    return style;
-});
-
-/**
- * 计算背景颜色
- */
-const computeBgColor = computed(() => {
-    if (props.bgColor) return props.bgColor;
-    else if (props.type === 'none') return 'transparent';
-    else return '';
-});
-
-/**
- * 初始化滚动宽度和动画
- */
-function initSize() {
-    nextTick(() => {
-        uni.createSelectorQuery()
-            .in(instance?.proxy)
-            .select('#u-notice-content')
-            .boundingClientRect()
-            .exec(ret => {
-                textWidth.value = ret[0]?.width || 0;
-                // 根据t=s/v(时间=路程/速度)，这里为何不需要加上#u-notice-box的宽度，因为中设置了.u-notice-content样式中设置了padding-left: 100%
-                // 恰巧计算出来的结果中已经包含了#u-notice-box的宽度
-                animationDuration.value = `${textWidth.value / uni.upx2px(Number(props.speed))}s`;
-                // 这里必须这样开始动画，否则在APP上动画速度不会改变(HX版本2.4.6，IOS13)
-                animationPlayState.value = 'paused';
-                setTimeout(() => {
-                    if (props.playState === 'play' && props.autoplay) animationPlayState.value = 'running';
-                }, 10);
-            });
-    });
-}
-
-watch(
-    () => props.list,
-    val => {
-        showText.value = val.join('，');
-        initSize();
-    },
-    { immediate: true }
-);
-
-watch(
-    () => props.playState,
-    val => {
-        animationPlayState.value = val === 'play' ? 'running' : 'paused';
-    }
-);
-
-watch(
-    () => props.speed,
-    () => {
-        initSize();
-    }
-);
-
-onMounted(() => {
-    initSize();
-});
-
-/**
- * 点击通告栏
- */
-function click() {
-    emit('click');
-}
-
-/**
- * 点击关闭按钮
- */
-function close() {
-    emit('close');
-}
-
-/**
- * 点击更多箭头按钮
- */
-function getMore() {
-    emit('getMore');
-}
-</script>
-
-<style lang="scss" scoped>
-@import '../../libs/css/style.components.scss';
-
-.u-notice-bar {
-    padding: 18rpx 24rpx;
-    overflow: hidden;
-}
-
-.u-direction-row {
-    @include vue-flex;
-    align-items: center;
-    justify-content: space-between;
-}
-
-.u-left-icon {
-    /* #ifndef APP-NVUE */
-    display: inline-flex;
-    /* #endif */
-    align-items: center;
-}
-
-.u-notice-box {
-    flex: 1;
-    @include vue-flex;
-    overflow: hidden;
-    margin-left: 12rpx;
-}
-
-.u-right-icon {
-    margin-left: 12rpx;
-    display: inline-flex;
-    align-items: center;
-}
-
-.u-notice-content {
-    animation: u-loop-animation 10s linear infinite both;
-    text-align: right;
-    // 这一句很重要，为了能让滚动左右连接起来
-    padding-left: 100%;
-    @include vue-flex;
-    flex-wrap: nowrap;
-}
-
-.u-notice-text {
-    font-size: 26rpx;
-    word-break: keep-all;
-    white-space: nowrap;
-}
-
-@keyframes u-loop-animation {
-    0% {
-        transform: translate3d(0, 0, 0);
-    }
-
-    100% {
-        transform: translate3d(-100%, 0, 0);
-    }
-}
-</style>
+<template>
+    <view v-if="props.show" class="u-notice-bar" :style="{ background: computeBgColor, padding: props.padding }" :class="[props.type ? `u-type-${props.type}-light-bg` : '']">
+        <view class="u-direction-row">
+            <view class="u-icon-wrap">
+                <u-icon class="u-left-icon" v-if="props.volumeIcon" name="volume-fill" :size="props.volumeSize" :color="computeColor"></u-icon>
+            </view>
+            <view class="u-notice-box" id="u-notice-box">
+                <view class="u-notice-content" id="u-notice-content" :style="{ animationDuration: animationDuration, animationPlayState: animationPlayState }">
+                    <text class="u-notice-text" @tap="click" :style="textStyle" :class="['u-type-' + props.type]">{{ showText }}</text>
+                </view>
+            </view>
+            <view class="u-icon-wrap">
+                <u-icon @click="getMore" class="u-right-icon" v-if="props.moreIcon" name="arrow-right" :size="26" :color="computeColor"></u-icon>
+                <u-icon @click="close" class="u-right-icon" v-if="props.closeIcon" name="close" :size="24" :color="computeColor"></u-icon>
+            </view>
+        </view>
+    </view>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, watch, onMounted, nextTick, getCurrentInstance } from 'vue';
+import { RowNoticeProps } from './types';
+
+defineOptions({ name: 'u-row-notice' });
+
+/**
+ * u-row-notice 水平滚动通告栏
+ * @property {Array} list 显示的内容，数组
+ * @property {String} type 显示的主题，success|error|primary|info|warning|none
+ * @property {Boolean} volumeIcon 是否显示左侧的音量图标
+ * @property {Boolean} moreIcon 是否显示右侧的右箭头图标
+ * @property {Boolean} closeIcon 是否显示右侧的关闭图标
+ * @property {Boolean} autoplay 是否自动播放
+ * @property {String} color 文字颜色，各图标也会使用文字颜色
+ * @property {String} bgColor 背景颜色
+ * @property {Boolean} show 是否显示
+ * @property {String|Number} fontSize 字体大小，单位rpx
+ * @property {String|Number} volumeSize 音量喇叭的大小
+ * @property {String|Number} speed 水平滚动时的滚动速度，即每秒滚动多少rpx
+ * @property {String} playState 播放状态，play-播放，paused-暂停
+ * @property {String|Number} padding 通知的边距
+ */
+
+const props = defineProps(RowNoticeProps);
+
+const emit = defineEmits<{ (e: 'click'): void; (e: 'close'): void; (e: 'getMore'): void }>();
+const instance = getCurrentInstance();
+const textWidth = ref(0); // 滚动的文字宽度
+const animationDuration = ref('10s'); // 动画执行时间
+const animationPlayState = ref('paused'); // 动画的开始和结束执行
+const showText = ref(''); // 显示的文本
+
+/**
+ * 计算字体颜色，如果没有自定义的，就用uview主题颜色
+ */
+const computeColor = computed(() => {
+    if (props.color) return props.color;
+    // 如果是无主题，就默认使用content-color
+    else if (props.type === 'none') return '#606266';
+    else return props.type;
+});
+
+/**
+ * 文字内容的样式
+ */
+const textStyle = computed(() => {
+    const style: Record<string, any> = {};
+    if (props.color) style.color = props.color;
+    else if (props.type === 'none') style.color = '#606266';
+    style.fontSize = props.fontSize + 'rpx';
+    return style;
+});
+
+/**
+ * 计算背景颜色
+ */
+const computeBgColor = computed(() => {
+    if (props.bgColor) return props.bgColor;
+    else if (props.type === 'none') return 'transparent';
+    else return '';
+});
+
+/**
+ * 初始化滚动宽度和动画
+ */
+function initSize() {
+    nextTick(() => {
+        uni.createSelectorQuery()
+            .in(instance?.proxy)
+            .select('#u-notice-content')
+            .boundingClientRect()
+            .exec(ret => {
+                textWidth.value = ret[0]?.width || 0;
+                // 根据t=s/v(时间=路程/速度)，这里为何不需要加上#u-notice-box的宽度，因为中设置了.u-notice-content样式中设置了padding-left: 100%
+                // 恰巧计算出来的结果中已经包含了#u-notice-box的宽度
+                animationDuration.value = `${textWidth.value / uni.upx2px(Number(props.speed))}s`;
+                // 这里必须这样开始动画，否则在APP上动画速度不会改变(HX版本2.4.6，IOS13)
+                animationPlayState.value = 'paused';
+                setTimeout(() => {
+                    if (props.playState === 'play' && props.autoplay) animationPlayState.value = 'running';
+                }, 10);
+            });
+    });
+}
+
+watch(
+    () => props.list,
+    val => {
+        showText.value = val.join('，');
+        initSize();
+    },
+    { immediate: true }
+);
+
+watch(
+    () => props.playState,
+    val => {
+        animationPlayState.value = val === 'play' ? 'running' : 'paused';
+    }
+);
+
+watch(
+    () => props.speed,
+    () => {
+        initSize();
+    }
+);
+
+onMounted(() => {
+    initSize();
+});
+
+/**
+ * 点击通告栏
+ */
+function click() {
+    emit('click');
+}
+
+/**
+ * 点击关闭按钮
+ */
+function close() {
+    emit('close');
+}
+
+/**
+ * 点击更多箭头按钮
+ */
+function getMore() {
+    emit('getMore');
+}
+</script>
+
+<style lang="scss" scoped>
+@import '../../libs/css/style.components.scss';
+
+.u-notice-bar {
+    padding: 18rpx 24rpx;
+    overflow: hidden;
+}
+
+.u-direction-row {
+    @include vue-flex;
+    align-items: center;
+    justify-content: space-between;
+}
+
+.u-left-icon {
+    /* #ifndef APP-NVUE */
+    display: inline-flex;
+    /* #endif */
+    align-items: center;
+}
+
+.u-notice-box {
+    flex: 1;
+    @include vue-flex;
+    overflow: hidden;
+    margin-left: 12rpx;
+}
+
+.u-right-icon {
+    margin-left: 12rpx;
+    display: inline-flex;
+    align-items: center;
+}
+
+.u-notice-content {
+    animation: u-loop-animation 10s linear infinite both;
+    text-align: right;
+    // 这一句很重要，为了能让滚动左右连接起来
+    padding-left: 100%;
+    @include vue-flex;
+    flex-wrap: nowrap;
+}
+
+.u-notice-text {
+    font-size: 26rpx;
+    word-break: keep-all;
+    white-space: nowrap;
+}
+
+@keyframes u-loop-animation {
+    0% {
+        transform: translate3d(0, 0, 0);
+    }
+
+    100% {
+        transform: translate3d(-100%, 0, 0);
+    }
+}
+</style>

package/components/u-safe-bottom/u-safe-bottom.vue

@@ -1,46 +1,46 @@
-<template>
-    <view class="u-safe-bottom" :style="style" :class="[!isNVue && 'safe-area-inset-bottom']"></view>
-</template>
-
-<script setup lang="ts">
-import { ref, computed, onMounted, withDefaults, type CSSProperties } from 'vue';
-import { sys } from '../../libs/function/sys';
-import addUnit from '../../libs/function/addUnit';
-import deepMerge from '../../libs/function/deepMerge';
-import { mergeStyles } from '../../libs/function/styleUtils';
-
-defineOptions({ name: 'u-safe-bottom' });
-
-/**
- * SafeBottom 底部安全区
- * @description 这个适配，主要是针对IPhone X等一些底部带指示条的机型，指示条的操作区域与页面底部存在重合，容易导致用户误操作，因此我们需要针对这些机型进行底部安全区适配。
- * @property {String | Object} customStyle 自定义样式
- * @example <u-safe-bottom></u-safe-bottom>
- */
-const props = withDefaults(
-    defineProps<{
-        customStyle?: string | CSSProperties;
-    }>(),
-    {
-        customStyle: () => ({})
-    }
-);
-
-const isNVue = ref(false);
-
-const style = computed(() => {
-    let r: CSSProperties = {};
-    // #ifdef APP-NVUE || MP-TOUTIAO
-    // nvue下，高度使用js计算填充
-    r.height = addUnit(sys().safeAreaInsets.bottom, 'px');
-    // #endif
-    return deepMerge(r, mergeStyles(props.customStyle));
-});
-
-onMounted(() => {
-    // #ifdef APP-NVUE
-    // 标识为是否nvue
-    isNVue.value = true;
-    // #endif
-});
-</script>
+<template>
+    <view class="u-safe-bottom" :style="style" :class="[!isNVue && 'safe-area-inset-bottom']"></view>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, onMounted, withDefaults, type CSSProperties } from 'vue';
+import { sys } from '../../libs/function/sys';
+import addUnit from '../../libs/function/addUnit';
+import deepMerge from '../../libs/function/deepMerge';
+import { mergeStyles } from '../../libs/function/styleUtils';
+
+defineOptions({ name: 'u-safe-bottom' });
+
+/**
+ * SafeBottom 底部安全区
+ * @description 这个适配，主要是针对IPhone X等一些底部带指示条的机型，指示条的操作区域与页面底部存在重合，容易导致用户误操作，因此我们需要针对这些机型进行底部安全区适配。
+ * @property {String | Object} customStyle 自定义样式
+ * @example <u-safe-bottom></u-safe-bottom>
+ */
+const props = withDefaults(
+    defineProps<{
+        customStyle?: string | CSSProperties;
+    }>(),
+    {
+        customStyle: () => ({})
+    }
+);
+
+const isNVue = ref(false);
+
+const style = computed(() => {
+    let r: CSSProperties = {};
+    // #ifdef APP-NVUE || MP-TOUTIAO
+    // nvue下，高度使用js计算填充
+    r.height = addUnit(sys().safeAreaInsets.bottom, 'px');
+    // #endif
+    return deepMerge(r, mergeStyles(props.customStyle));
+});
+
+onMounted(() => {
+    // #ifdef APP-NVUE
+    // 标识为是否nvue
+    isNVue.value = true;
+    // #endif
+});
+</script>

package/components/u-search/types.ts

@@ -1,53 +1,53 @@
-import type { ExtractPropTypes, PropType } from 'vue';
-import type { InputAlign, SearchShape } from '../../types/global';
-
-/**
- * SearchProps 搜索框 props 类型定义
- * @description 集成常见搜索框功能，开箱即用
- */
-export const SearchProps = {
-    /** 搜索框形状，round-圆形，square-方形 */
-    shape: { type: String as PropType<SearchShape>, default: 'round' },
-    /** 搜索框背景色，默认值#f2f2f2 */
-    bgColor: { type: String, default: '#f2f2f2' },
-    /** 占位提示文字 */
-    placeholder: { type: String, default: '请输入关键字' },
-    /** 是否启用清除控件 */
-    clearabled: { type: Boolean, default: true },
-    /** 是否自动聚焦 */
-    focus: { type: Boolean, default: false },
-    /** 是否在搜索框右侧显示取消按钮 */
-    showAction: { type: Boolean, default: true },
-    /** 右边控件的样式 */
-    actionStyle: { type: Object as PropType<Record<string, any>>, default: () => ({}) },
-    /** 取消按钮文字 */
-    actionText: { type: String, default: '搜索' },
-    /** 输入框内容对齐方式，可选值为 left|center|right */
-    inputAlign: { type: String as PropType<InputAlign>, default: 'left' },
-    /** 是否启用输入框 */
-    disabled: { type: Boolean, default: false },
-    /** 开启showAction时，是否在input获取焦点时才显示 */
-    animation: { type: Boolean, default: false },
-    /** 边框颜色，只要配置了颜色，才会有边框 */
-    borderColor: { type: String, default: 'none' },
-    /** 输入框的初始化内容 */
-    modelValue: { type: String, default: '' },
-    /** 搜索框高度，单位rpx */
-    height: { type: [Number, String] as PropType<number | string>, default: 64 },
-    /** input输入框的样式，可以定义文字颜色，大小等，对象形式 */
-    inputStyle: { type: Object as PropType<Record<string, any>>, default: () => ({}) },
-    /** 输入框最大能输入的长度，-1为不限制长度(来自uniapp文档) */
-    maxlength: { type: [Number, String] as PropType<number | string>, default: '-1' },
-    /** 搜索图标的颜色，默认同输入框字体颜色 */
-    searchIconColor: { type: String, default: '' },
-    /** 输入框字体颜色 */
-    color: { type: String, default: '#606266' },
-    /** placeholder的颜色 */
-    placeholderColor: { type: String, default: '#909399' },
-    /** 组件与其他上下左右元素之间的距离，带单位的字符串形式，如"30rpx"、"30rpx 20rpx"等写法 */
-    margin: { type: String, default: '0' },
-    /** 左边输入框的图标，可以为uView图标名称或图片路径 */
-    searchIcon: { type: String, default: 'search' }
-};
-
-export type SearchProps = ExtractPropTypes<typeof SearchProps>;
+import type { ExtractPropTypes, PropType } from 'vue';
+import type { InputAlign, SearchShape } from '../../types/global';
+
+/**
+ * SearchProps 搜索框 props 类型定义
+ * @description 集成常见搜索框功能，开箱即用
+ */
+export const SearchProps = {
+    /** 搜索框形状，round-圆形，square-方形 */
+    shape: { type: String as PropType<SearchShape>, default: 'round' },
+    /** 搜索框背景色，默认值#f2f2f2 */
+    bgColor: { type: String, default: '#f2f2f2' },
+    /** 占位提示文字 */
+    placeholder: { type: String, default: '请输入关键字' },
+    /** 是否启用清除控件 */
+    clearabled: { type: Boolean, default: true },
+    /** 是否自动聚焦 */
+    focus: { type: Boolean, default: false },
+    /** 是否在搜索框右侧显示取消按钮 */
+    showAction: { type: Boolean, default: true },
+    /** 右边控件的样式 */
+    actionStyle: { type: Object as PropType<Record<string, any>>, default: () => ({}) },
+    /** 取消按钮文字 */
+    actionText: { type: String, default: '搜索' },
+    /** 输入框内容对齐方式，可选值为 left|center|right */
+    inputAlign: { type: String as PropType<InputAlign>, default: 'left' },
+    /** 是否启用输入框 */
+    disabled: { type: Boolean, default: false },
+    /** 开启showAction时，是否在input获取焦点时才显示 */
+    animation: { type: Boolean, default: false },
+    /** 边框颜色，只要配置了颜色，才会有边框 */
+    borderColor: { type: String, default: 'none' },
+    /** 输入框的初始化内容 */
+    modelValue: { type: String, default: '' },
+    /** 搜索框高度，单位rpx */
+    height: { type: [Number, String] as PropType<number | string>, default: 64 },
+    /** input输入框的样式，可以定义文字颜色，大小等，对象形式 */
+    inputStyle: { type: Object as PropType<Record<string, any>>, default: () => ({}) },
+    /** 输入框最大能输入的长度，-1为不限制长度(来自uniapp文档) */
+    maxlength: { type: [Number, String] as PropType<number | string>, default: '-1' },
+    /** 搜索图标的颜色，默认同输入框字体颜色 */
+    searchIconColor: { type: String, default: '' },
+    /** 输入框字体颜色 */
+    color: { type: String, default: '#606266' },
+    /** placeholder的颜色 */
+    placeholderColor: { type: String, default: '#909399' },
+    /** 组件与其他上下左右元素之间的距离，带单位的字符串形式，如"30rpx"、"30rpx 20rpx"等写法 */
+    margin: { type: String, default: '0' },
+    /** 左边输入框的图标，可以为uView图标名称或图片路径 */
+    searchIcon: { type: String, default: 'search' }
+};
+
+export type SearchProps = ExtractPropTypes<typeof SearchProps>;