uview-pro 0.0.7 → 0.0.8

package/components/u-rate/u-rate.vue

@@ -21,6 +21,7 @@
 <script setup lang="ts">
 import { ref, computed, watch, onMounted, getCurrentInstance } from 'vue';
 import { $u } from '../..';
+import { RateProps } from './types';
 
 defineOptions({
     name: 'u-rate'
@@ -44,130 +45,7 @@ defineOptions({
  * @event {Function} change 选中的星星发生变化时触发
  * @example <u-rate :count="count" :current="2"></u-rate>
  */
-const props = defineProps({
-    /**
-     * 用于v-model双向绑定选中的星星数量
-     * 1.4.5版新增
-     * @default -1
-     */
-    modelValue: {
-        type: [Number, String],
-        default: -1
-    },
-    /**
-     * 要显示的星星数量
-     * @default 5
-     */
-    count: {
-        type: [Number, String],
-        default: 5
-    },
-    /**
-     * 当前需要默认选中的星星(选中的个数)
-     * 1.4.5后通过value双向绑定，不再建议使用此参数
-     * @default 0
-     */
-    current: {
-        type: [Number, String],
-        default: 0
-    },
-    /**
-     * 是否不可选中
-     * @default false
-     */
-    disabled: {
-        type: Boolean,
-        default: false
-    },
-    /**
-     * 星星的大小，单位rpx
-     * @default 32
-     */
-    size: {
-        type: [Number, String],
-        default: 32
-    },
-    /**
-     * 未选中时的颜色
-     * @default '#b2b2b2'
-     */
-    inactiveColor: {
-        type: String,
-        default: '#b2b2b2'
-    },
-    /**
-     * 选中的颜色
-     * @default '#FA3534'
-     */
-    activeColor: {
-        type: String,
-        default: '#FA3534'
-    },
-    /**
-     * 星星之间的间距，单位rpx
-     * @default 10
-     */
-    gutter: {
-        type: [Number, String],
-        default: 10
-    },
-    /**
-     * 最少能选择的星星个数
-     * @default 0
-     */
-    minCount: {
-        type: [Number, String],
-        default: 0
-    },
-    /**
-     * 是否允许半星(功能尚未实现)
-     * @default false
-     */
-    allowHalf: {
-        type: Boolean,
-        default: false
-    },
-    /**
-     * 选中时的图标(星星)
-     * @default 'star-fill'
-     */
-    activeIcon: {
-        type: String,
-        default: 'star-fill'
-    },
-    /**
-     * 未选中时的图标(星星)
-     * @default 'star'
-     */
-    inactiveIcon: {
-        type: String,
-        default: 'star'
-    },
-    /**
-     * 自定义扩展前缀，方便用户扩展自己的图标库
-     * @default 'uicon'
-     */
-    customPrefix: {
-        type: String,
-        default: 'uicon'
-    },
-    /**
-     * 分段颜色
-     * @default []
-     */
-    colors: {
-        type: Array,
-        default: () => []
-    },
-    /**
-     * 分段图标
-     * @default []
-     */
-    icons: {
-        type: Array,
-        default: () => []
-    }
-});
+const props = defineProps(RateProps);
 
 const emit = defineEmits(['update:modelValue', 'change']);
 const instance = getCurrentInstance();

package/components/u-read-more/types.ts

@@ -0,0 +1,35 @@
+import type { ExtractPropTypes, PropType } from 'vue';
+
+/**
+ * ReadMoreProps 阅读更多 props 类型定义
+ * @description 内容较长时收起/展开的场景
+ */
+export const ReadMoreProps = {
+    /** 默认的显示占位高度，单位为rpx */
+    showHeight: { type: [Number, String] as PropType<number | string>, default: 400 },
+    /** 展开后是否显示"收起"按钮 */
+    toggle: { type: Boolean, default: false },
+    /** 关闭时的提示文字 */
+    closeText: { type: String, default: '展开阅读全文' },
+    /** 展开时的提示文字 */
+    openText: { type: String, default: '收起' },
+    /** 提示的文字颜色 */
+    color: { type: String, default: '#2979ff' },
+    /** 提示文字的大小 */
+    fontSize: { type: [String, Number] as PropType<number | string>, default: 28 },
+    /** 是否显示阴影 */
+    shadowStyle: {
+        type: Object as PropType<Record<string, any>>,
+        default: () => ({
+            backgroundImage: 'linear-gradient(-180deg, rgba(255, 255, 255, 0) 0%, #fff 80%)',
+            paddingTop: '300rpx',
+            marginTop: '-300rpx'
+        })
+    },
+    /** 段落首行缩进的字符个数 */
+    textIndent: { type: String, default: '2em' },
+    /** open和close事件时，将此参数返回在回调参数中 */
+    index: { type: [Number, String] as PropType<number | string>, default: '' }
+};
+
+export type ReadMoreProps = ExtractPropTypes<typeof ReadMoreProps>;

package/components/u-read-more/u-read-more.vue

@@ -30,6 +30,7 @@
 <script setup lang="ts">
 import { ref, computed, watch, onMounted, nextTick, getCurrentInstance } from 'vue';
 import { $u } from '../..';
+import { ReadMoreProps } from './types';
 
 defineOptions({ name: 'u-read-more' });
 
@@ -51,57 +52,7 @@ defineOptions({ name: 'u-read-more' });
  * @example <u-read-more><rich-text :nodes="content"></rich-text></u-read-more>
  */
 
-const props = defineProps({
-    /** 默认的显示占位高度，单位为rpx */
-    showHeight: {
-        type: [Number, String],
-        default: 400
-    },
-    /** 展开后是否显示"收起"按钮 */
-    toggle: {
-        type: Boolean,
-        default: false
-    },
-    /** 关闭时的提示文字 */
-    closeText: {
-        type: String,
-        default: '展开阅读全文'
-    },
-    /** 展开时的提示文字 */
-    openText: {
-        type: String,
-        default: '收起'
-    },
-    /** 提示的文字颜色 */
-    color: {
-        type: String,
-        default: '#2979ff'
-    },
-    /** 提示文字的大小 */
-    fontSize: {
-        type: [String, Number],
-        default: 28
-    },
-    /** 是否显示阴影 */
-    shadowStyle: {
-        type: Object as () => Record<string, any>,
-        default: () => ({
-            backgroundImage: 'linear-gradient(-180deg, rgba(255, 255, 255, 0) 0%, #fff 80%)',
-            paddingTop: '300rpx',
-            marginTop: '-300rpx'
-        })
-    },
-    /** 段落首行缩进的字符个数 */
-    textIndent: {
-        type: String,
-        default: '2em'
-    },
-    /** open和close事件时，将此参数返回在回调参数中 */
-    index: {
-        type: [Number, String],
-        default: ''
-    }
-});
+const props = defineProps(ReadMoreProps);
 
 const emit = defineEmits(['open', 'close']);
 

package/components/u-row/types.ts

@@ -0,0 +1,20 @@
+import type { ExtractPropTypes, PropType } from 'vue';
+import type { RowAlign, RowJustify } from '../../types/global';
+
+/**
+ * RowProps 行布局 props 类型定义
+ * @description 12分栏布局，快速创建布局
+ */
+
+export const RowProps = {
+    /** 给col添加间距，左右边距各占一半 */
+    gutter: { type: [String, Number] as PropType<number | string>, default: 20 },
+    /** 水平排列方式，可选值为`start`(或`flex-start`)、`end`(或`flex-end`)、`center`、`around`(或`space-around`)、`between`(或`space-between`) */
+    justify: { type: String as PropType<RowJustify>, default: 'start' },
+    /** 垂直对齐方式，可选值为top、center、bottom */
+    align: { type: String as PropType<RowAlign>, default: 'center' },
+    /** 是否阻止事件传播 */
+    stop: { type: Boolean, default: true }
+};
+
+export type RowProps = ExtractPropTypes<typeof RowProps>;

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

@@ -13,6 +13,7 @@
 
 <script setup lang="ts">
 import { computed, provide } from 'vue';
+import { RowProps } from './types';
 
 defineOptions({
     name: 'u-row'
@@ -30,16 +31,7 @@ defineOptions({
 
 const emit = defineEmits<{ (e: 'click'): void }>();
 
-const props = defineProps({
-    /** 给col添加间距，左右边距各占一半 */
-    gutter: { type: [String, Number], default: 20 },
-    /** 水平排列方式，可选值为`start`(或`flex-start`)、`end`(或`flex-end`)、`center`、`around`(或`space-around`)、`between`(或`space-between`) */
-    justify: { type: String, default: 'start' },
-    /** 垂直对齐方式，可选值为top、center、bottom */
-    align: { type: String, default: 'center' },
-    /** 是否阻止事件传播 */
-    stop: { type: Boolean, default: true }
-});
+const props = defineProps(RowProps);
 
 // 提供 gutter 给子组件 u-col 使用
 provide('u-row-gutter', props.gutter);

package/components/u-row-notice/types.ts

@@ -0,0 +1,39 @@
+import type { ExtractPropTypes, PropType } from 'vue';
+import type { PlayState, ThemeType } from '../../types/global';
+
+/**
+ * RowNoticeProps 水平滚动通告栏 props 类型定义
+ * @description 水平滚动通告栏，支持主题、图标、关闭等
+ */
+export const RowNoticeProps = {
+    /** 显示的内容，数组 */
+    list: { type: Array as PropType<string[]>, default: () => [] },
+    /** 显示的主题，success|error|primary|info|warning|none */
+    type: { type: String as PropType<ThemeType | 'none'>, default: 'warning' },
+    /** 是否显示左侧的音量图标 */
+    volumeIcon: { type: Boolean, default: true },
+    /** 是否显示右侧的右箭头图标 */
+    moreIcon: { type: Boolean, default: false },
+    /** 是否显示右侧的关闭图标 */
+    closeIcon: { type: Boolean, default: false },
+    /** 是否自动播放 */
+    autoplay: { type: Boolean, default: true },
+    /** 文字颜色，各图标也会使用文字颜色 */
+    color: { type: String, default: '' },
+    /** 背景颜色 */
+    bgColor: { type: String, default: '' },
+    /** 是否显示 */
+    show: { type: Boolean, default: true },
+    /** 字体大小，单位rpx */
+    fontSize: { type: [Number, String] as PropType<number | string>, default: 26 },
+    /** 音量喇叭的大小 */
+    volumeSize: { type: [Number, String] as PropType<number | string>, default: 34 },
+    /** 水平滚动时的滚动速度，即每秒滚动多少rpx */
+    speed: { type: [Number, String] as PropType<number | string>, default: 160 },
+    /** 播放状态，play-播放，paused-暂停 */
+    playState: { type: String as PropType<PlayState>, default: 'play' },
+    /** 通知的边距 */
+    padding: { type: [Number, String] as PropType<number | string>, default: '18rpx 24rpx' }
+};
+
+export type RowNoticeProps = ExtractPropTypes<typeof RowNoticeProps>;

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

@@ -19,6 +19,7 @@
 
 <script setup lang="ts">
 import { ref, computed, watch, onMounted, nextTick, getCurrentInstance } from 'vue';
+import { RowNoticeProps } from './types';
 
 defineOptions({ name: 'u-row-notice' });
 
@@ -40,78 +41,7 @@ defineOptions({ name: 'u-row-notice' });
  * @property {String|Number} padding 通知的边距
  */
 
-const props = defineProps({
-    /** 显示的内容，数组 */
-    list: {
-        type: Array as () => string[],
-        default: () => []
-    },
-    /** 显示的主题，success|error|primary|info|warning|none */
-    type: {
-        type: String,
-        default: 'warning'
-    },
-    /** 是否显示左侧的音量图标 */
-    volumeIcon: {
-        type: Boolean,
-        default: true
-    },
-    /** 是否显示右侧的右箭头图标 */
-    moreIcon: {
-        type: Boolean,
-        default: false
-    },
-    /** 是否显示右侧的关闭图标 */
-    closeIcon: {
-        type: Boolean,
-        default: false
-    },
-    /** 是否自动播放 */
-    autoplay: {
-        type: Boolean,
-        default: true
-    },
-    /** 文字颜色，各图标也会使用文字颜色 */
-    color: {
-        type: String,
-        default: ''
-    },
-    /** 背景颜色 */
-    bgColor: {
-        type: String,
-        default: ''
-    },
-    /** 是否显示 */
-    show: {
-        type: Boolean,
-        default: true
-    },
-    /** 字体大小，单位rpx */
-    fontSize: {
-        type: [Number, String],
-        default: 26
-    },
-    /** 音量喇叭的大小 */
-    volumeSize: {
-        type: [Number, String],
-        default: 34
-    },
-    /** 水平滚动时的滚动速度，即每秒滚动多少rpx */
-    speed: {
-        type: [Number, String],
-        default: 160
-    },
-    /** 播放状态，play-播放，paused-暂停 */
-    playState: {
-        type: String,
-        default: 'play'
-    },
-    /** 通知的边距 */
-    padding: {
-        type: [Number, String],
-        default: '18rpx 24rpx'
-    }
-});
+const props = defineProps(RowNoticeProps);
 
 const emit = defineEmits<{ (e: 'click'): void; (e: 'close'): void; (e: 'getMore'): void }>();
 const instance = getCurrentInstance();

package/components/u-search/types.ts

@@ -0,0 +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>;

package/components/u-search/u-search.vue

@@ -52,6 +52,7 @@
 
 <script setup lang="ts">
 import { ref, computed, watch, nextTick } from 'vue';
+import { SearchProps } from './types';
 
 defineOptions({ name: 'u-search' });
 
@@ -88,50 +89,7 @@ defineOptions({ name: 'u-search' });
  * @example <u-search placeholder="日照香炉生紫烟" v-model="keyword"></u-search>
  */
 
-const props = defineProps({
-    /** 搜索框形状，round-圆形，square-方形 */
-    shape: { type: String, 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, default: () => ({}) },
-    /** 取消按钮文字 */
-    actionText: { type: String, default: '搜索' },
-    /** 输入框内容对齐方式，可选值为 left|center|right */
-    inputAlign: { type: String, 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], default: 64 },
-    /** input输入框的样式，可以定义文字颜色，大小等，对象形式 */
-    inputStyle: { type: Object, default: () => ({}) },
-    /** 输入框最大能输入的长度，-1为不限制长度(来自uniapp文档) */
-    maxlength: { type: [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' }
-});
+const props = defineProps(SearchProps);
 
 const emit = defineEmits(['update:modelValue', 'change', 'search', 'custom', 'clear', 'focus', 'blur', 'click']);
 

package/components/u-section/types.ts

@@ -0,0 +1,32 @@
+import { type ExtractPropTypes, type PropType } from 'vue';
+
+/**
+ * section 组件 props 类型定义
+ * @description 供 u-section 组件 props 使用
+ */
+export type FontSize = string | number;
+
+export const SectionProps = {
+    /** 标题信息 */
+    title: { type: String, default: '' },
+    /** 右边副标题内容 */
+    subTitle: { type: String, default: '更多' },
+    /** 是否显示右边的内容 */
+    right: { type: Boolean, default: true },
+    /** 主标题的字体大小 */
+    fontSize: { type: [Number, String] as PropType<FontSize>, default: 28 },
+    /** 主标题是否加粗 */
+    bold: { type: Boolean, default: true },
+    /** 主标题的颜色 */
+    color: { type: String, default: '#303133' },
+    /** 右边副标题的颜色 */
+    subColor: { type: String, default: '#909399' },
+    /** 是否显示左边的竖条 */
+    showLine: { type: Boolean, default: true },
+    /** 左边竖线的颜色 */
+    lineColor: { type: String, default: '' },
+    /** 是否显示右边箭头 */
+    arrow: { type: Boolean, default: true }
+};
+
+export type SectionProps = ExtractPropTypes<typeof SectionProps>;

package/components/u-section/u-section.vue

@@ -38,6 +38,7 @@
 
 <script setup lang="ts">
 import { computed } from 'vue';
+import { SectionProps } from './types';
 import { $u } from '../..';
 
 defineOptions({ name: 'u-section' });
@@ -60,58 +61,7 @@ defineOptions({ name: 'u-section' });
  * @example <u-section title="今日热门" :right="false"></u-section>
  */
 
-const props = defineProps({
-    /** 标题信息 */
-    title: {
-        type: String,
-        default: ''
-    },
-    /** 右边副标题内容 */
-    subTitle: {
-        type: String,
-        default: '更多'
-    },
-    /** 是否显示右边的内容 */
-    right: {
-        type: Boolean,
-        default: true
-    },
-    /** 主标题的字体大小 */
-    fontSize: {
-        type: [Number, String],
-        default: 28
-    },
-    /** 主标题是否加粗 */
-    bold: {
-        type: Boolean,
-        default: true
-    },
-    /** 主标题的颜色 */
-    color: {
-        type: String,
-        default: '#303133'
-    },
-    /** 右边副标题的颜色 */
-    subColor: {
-        type: String,
-        default: '#909399'
-    },
-    /** 是否显示左边的竖条 */
-    showLine: {
-        type: Boolean,
-        default: true
-    },
-    /** 左边竖线的颜色 */
-    lineColor: {
-        type: String,
-        default: ''
-    },
-    /** 是否显示右边箭头 */
-    arrow: {
-        type: Boolean,
-        default: true
-    }
-});
+const props = defineProps(SectionProps);
 
 const emit = defineEmits(['click']);
 

package/components/u-select/types.ts

@@ -0,0 +1,43 @@
+import type { ExtractPropTypes, PropType } from 'vue';
+import type { SelectMode } from '../../types/global';
+
+/**
+ * SelectProps 列选择器 props 类型定义
+ * @description 用于单列、多列、多列联动的选择场景
+ */
+export const SelectProps = {
+    /** 列数据 */
+    list: { type: Array as PropType<any[]>, default: () => [] },
+    /** 是否显示边框 */
+    border: { type: Boolean, default: true },
+    /** 通过双向绑定控制组件的弹出与收起 */
+    modelValue: { type: Boolean, default: false },
+    /** "取消"按钮的颜色 */
+    cancelColor: { type: String, default: '#606266' },
+    /** "确定"按钮的颜色 */
+    confirmColor: { type: String, default: '#2979ff' },
+    /** 弹出的z-index值 */
+    zIndex: { type: [String, Number] as PropType<string | number>, default: 0 },
+    /** 是否开启底部安全区适配 */
+    safeAreaInsetBottom: { type: Boolean, default: false },
+    /** 是否允许通过点击遮罩关闭Picker */
+    maskCloseAble: { type: Boolean, default: true },
+    /** 提供的默认选中的下标 */
+    defaultValue: { type: Array as PropType<number[]>, default: () => [0] },
+    /** 模式选择，single-column-单列，mutil-column-多列，mutil-column-auto-多列联动 */
+    mode: { type: String as PropType<SelectMode>, default: 'single-column' },
+    /** 自定义value属性名 */
+    valueName: { type: String, default: 'value' },
+    /** 自定义label属性名 */
+    labelName: { type: String, default: 'label' },
+    /** 自定义多列联动模式的children属性名 */
+    childName: { type: String, default: 'children' },
+    /** 顶部标题 */
+    title: { type: String, default: '' },
+    /** 取消按钮的文字 */
+    cancelText: { type: String, default: '取消' },
+    /** 确认按钮的文字 */
+    confirmText: { type: String, default: '确认' }
+};
+
+export type SelectProps = ExtractPropTypes<typeof SelectProps>;