uview-pro 0.0.7 → 0.0.8

package/components/u-checkbox/u-checkbox.vue

@@ -18,6 +18,7 @@
 <script setup lang="ts">
 import { computed, inject, getCurrentInstance, onMounted } from 'vue';
 import { $u } from '../..';
+import { CheckboxProps } from './types';
 
 defineOptions({
     name: 'u-checkbox'
@@ -38,53 +39,7 @@ defineOptions({
  * @example <u-checkbox v-model="checked" :disabled="false">天涯</u-checkbox>
  */
 
-const props = defineProps({
-    /** checkbox的名称 */
-    name: {
-        type: [String, Number],
-        default: ''
-    },
-    /** 形状，square为方形，circle为原型 */
-    shape: {
-        type: String,
-        default: ''
-    },
-    /** 是否为选中状态 */
-    modelValue: {
-        type: Boolean,
-        default: false
-    },
-    /** 是否禁用 */
-    disabled: {
-        type: [String, Boolean],
-        default: ''
-    },
-    /** 是否禁止点击提示语选中复选框 */
-    labelDisabled: {
-        type: [String, Boolean],
-        default: ''
-    },
-    /** 选中状态下的颜色，如设置此值，将会覆盖checkboxGroup的activeColor值 */
-    activeColor: {
-        type: String,
-        default: ''
-    },
-    /** 图标的大小，单位rpx */
-    iconSize: {
-        type: [String, Number],
-        default: ''
-    },
-    /** label的字体大小，rpx单位 */
-    labelSize: {
-        type: [String, Number],
-        default: ''
-    },
-    /** 组件的整体大小 */
-    size: {
-        type: [String, Number],
-        default: ''
-    }
-});
+const props = defineProps(CheckboxProps);
 
 const emit = defineEmits(['change', 'update:modelValue']);
 

package/components/u-checkbox-group/types.ts

@@ -0,0 +1,32 @@
+import { type ExtractPropTypes, type PropType } from 'vue';
+import type { Shape } from '../../types/global';
+
+/**
+ * checkbox-group 复选框组类型定义
+ * @description 供 u-checkbox-group 组件 props 使用
+ */
+
+export const CheckboxGroupProps = {
+    /** 最多能选中多少个checkbox */
+    max: { type: [Number, String], default: 999 },
+    /** 是否禁用所有复选框 */
+    disabled: { type: Boolean, default: false },
+    /** 在表单内提交时的标识符 */
+    name: { type: [Boolean, String], default: '' },
+    /** 是否禁止点击提示语选中复选框 */
+    labelDisabled: { type: Boolean, default: false },
+    /** 形状，square为方形，circle为原型 */
+    shape: { type: String as PropType<Shape>, default: 'square' },
+    /** 选中状态下的颜色 */
+    activeColor: { type: String, default: '#2979ff' },
+    /** 组件的整体大小 */
+    size: { type: [String, Number], default: 34 },
+    /** 每个checkbox占u-checkbox-group的宽度 */
+    width: { type: String, default: 'auto' },
+    /** 是否每个checkbox都换行 */
+    wrap: { type: Boolean, default: false },
+    /** 图标的大小，单位rpx */
+    iconSize: { type: [String, Number], default: 20 }
+};
+
+export type CheckboxGroupProps = ExtractPropTypes<typeof CheckboxGroupProps>;

package/components/u-checkbox-group/u-checkbox-group.vue

@@ -7,6 +7,7 @@
 <script setup lang="ts">
 import { ref, getCurrentInstance, provide } from 'vue';
 import { $u } from '../..';
+import { CheckboxGroupProps } from './types';
 
 defineOptions({
     name: 'u-checkbox-group'
@@ -29,63 +30,7 @@ defineOptions({
  * @example <u-checkbox-group></u-checkbox-group>
  */
 
-const props = defineProps({
-    /** 最多能选中多少个checkbox */
-    max: {
-        type: [Number, String],
-        default: 999
-    },
-    // /** 所有选中项的 name */
-    // value: {
-    //   default: Array,
-    //   default: () => []
-    // },
-    /** 是否禁用所有复选框 */
-    disabled: {
-        type: Boolean,
-        default: false
-    },
-    /** 在表单内提交时的标识符 */
-    name: {
-        type: [Boolean, String],
-        default: ''
-    },
-    /** 是否禁止点击提示语选中复选框 */
-    labelDisabled: {
-        type: Boolean,
-        default: false
-    },
-    /** 形状，square为方形，circle为原型 */
-    shape: {
-        type: String,
-        default: 'square'
-    },
-    /** 选中状态下的颜色 */
-    activeColor: {
-        type: String,
-        default: '#2979ff'
-    },
-    /** 组件的整体大小 */
-    size: {
-        type: [String, Number],
-        default: 34
-    },
-    /** 每个checkbox占u-checkbox-group的宽度 */
-    width: {
-        type: String,
-        default: 'auto'
-    },
-    /** 是否每个checkbox都换行 */
-    wrap: {
-        type: Boolean,
-        default: false
-    },
-    /** 图标的大小，单位rpx */
-    iconSize: {
-        type: [String, Number],
-        default: 20
-    }
-});
+const props = defineProps(CheckboxGroupProps);
 
 const emit = defineEmits(['change']);
 

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

@@ -0,0 +1,52 @@
+import { type ExtractPropTypes, type PropType } from 'vue';
+import type { ThemeType } from '../../types/global';
+
+/**
+ * circleProgress 环形进度条 Props
+ * @description 展示操作或任务的当前进度，比如上传文件，是一个圆形的进度条。注意：此组件的percent值只能动态增加，不能动态减少。
+ */
+export const CircleProgressProps = {
+    /** 圆环进度百分比值 */
+    percent: {
+        type: Number,
+        default: 0,
+        validator: (val: number) => val >= 0 && val <= 100
+    },
+    /** 底部圆环的颜色（灰色的圆环） */
+    inactiveColor: {
+        type: String,
+        default: '#ececec'
+    },
+    /** 圆环激活部分的颜色 */
+    activeColor: {
+        type: String,
+        default: '#19be6b'
+    },
+    /** 圆环线条的宽度，单位rpx */
+    borderWidth: {
+        type: [Number, String] as PropType<number | string>,
+        default: 14
+    },
+    /** 整个圆形的宽度，单位rpx */
+    width: {
+        type: [Number, String] as PropType<number | string>,
+        default: 200
+    },
+    /** 整个圆环执行一圈的时间，单位ms */
+    duration: {
+        type: [Number, String] as PropType<number | string>,
+        default: 1500
+    },
+    /** 主题类型 */
+    type: {
+        type: String as PropType<ThemeType>,
+        default: ''
+    },
+    /** 整个圆环进度区域的背景色 */
+    bgColor: {
+        type: String,
+        default: '#ffffff'
+    }
+};
+
+export type CircleProgressProps = ExtractPropTypes<typeof CircleProgressProps>;

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

@@ -35,6 +35,7 @@
 <script setup lang="ts">
 import { ref, computed, watch, onMounted } from 'vue';
 import { $u } from '../..';
+import { CircleProgressProps } from './types';
 
 defineOptions({
     name: 'u-circle-progress'
@@ -54,29 +55,7 @@ defineOptions({
  * @property {String} bg-color 整个组件背景颜色，默认为白色
  * @example <u-circle-progress active-color="#2979ff" :percent="80"></u-circle-progress>
  */
-const props = defineProps({
-    /** 圆环进度百分比值 */
-    percent: {
-        type: Number,
-        default: 0,
-        // 限制值在0到100之间
-        validator: (val: number) => val >= 0 && val <= 100
-    },
-    /** 底部圆环的颜色（灰色的圆环） */
-    inactiveColor: { type: String, default: '#ececec' },
-    /** 圆环激活部分的颜色 */
-    activeColor: { type: String, default: '#19be6b' },
-    /** 圆环线条的宽度，单位rpx */
-    borderWidth: { type: [Number, String], default: 14 },
-    /** 整个圆形的宽度，单位rpx */
-    width: { type: [Number, String], default: 200 },
-    /** 整个圆环执行一圈的时间，单位ms */
-    duration: { type: [Number, String], default: 1500 },
-    /** 主题类型 */
-    type: { type: String, default: '' },
-    /** 整个圆环进度区域的背景色 */
-    bgColor: { type: String, default: '#ffffff' }
-});
+const props = defineProps(CircleProgressProps);
 
 let elBgId = $u.guid(); // 非微信端的时候，需用动态的id，否则一个页面多个圆形进度条组件数据会混乱
 let elId = $u.guid();

package/components/u-city-select/types.ts

@@ -0,0 +1,20 @@
+import type { ExtractPropTypes, PropType } from 'vue';
+
+/**
+ * u-city-select 城市选择器 Props
+ * @description 用于选择省、市、区三级行政区域，支持回显和自定义初始值。
+ */
+export const CitySelectProps = {
+    /** 控制弹窗显示与隐藏（v-model） */
+    modelValue: { type: Boolean, default: false },
+    /** 默认选中的省市区名称数组 */
+    defaultRegion: { type: Array as PropType<string[]>, default: () => [] },
+    /** 默认选中的省市区编码数组 */
+    areaCode: { type: Array as PropType<string[]>, default: () => [] },
+    /** 是否允许点击遮罩关闭弹窗 */
+    maskCloseAble: { type: Boolean, default: true },
+    /** 弹窗层级 */
+    zIndex: { type: [String, Number] as PropType<string | number>, default: 0 }
+};
+
+export type CitySelectProps = ExtractPropTypes<typeof CitySelectProps>;

package/components/u-city-select/u-city-select.vue

@@ -66,7 +66,7 @@ import { ref, computed, onMounted } from 'vue';
 import provinces from '../../libs/util/province';
 import citysData from '../../libs/util/city';
 import areasData from '../../libs/util/area';
-import type { PropType } from 'vue';
+import { CitySelectProps } from './types';
 
 defineOptions({
     name: 'u-city-select'
@@ -84,15 +84,7 @@ defineOptions({
  * @event city-change 选择省市区后触发，返回选中的省市区对象
  * @example <u-city-select v-model="show" :defaultRegion="['广东省','广州市','天河区']" @city-change="onChange"></u-city-select>
  */
-
-// props 定义
-const props = defineProps({
-    modelValue: { type: Boolean, default: false },
-    defaultRegion: { type: Array as PropType<string[]>, default: () => [] },
-    areaCode: { type: Array as PropType<string[]>, default: () => [] },
-    maskCloseAble: { type: Boolean, default: true },
-    zIndex: { type: [String, Number], default: 0 }
-});
+const props = defineProps(CitySelectProps);
 
 // emits 定义
 const emit = defineEmits(['update:modelValue', 'city-change']);

package/components/u-col/types.ts

@@ -0,0 +1,30 @@
+import type { ExtractPropTypes, PropType } from 'vue';
+import type { AlignType, JustifyType } from '../../types/global';
+
+/**
+ * u-col 布局单元格 Props
+ * @description 通过基础的 12 分栏，迅速简便地创建布局（搭配<u-row>使用）
+ * @property {String|Number} span 栅格占据的列数，总12等分（默认12）
+ * @property {String|Number} offset 分栏左边偏移，计算方式与span相同（默认0）
+ * @property {JustifyType} justify 水平排列方式，可选值为start、end、center、around、between（默认start）
+ * @property {AlignType} align 垂直对齐方式，可选值为top、center、bottom（默认center）
+ * @property {String} textAlign 文字对齐方式（默认left）
+ * @property {Boolean} stop 是否阻止事件传播（默认true）
+ */
+
+export const ColProps = {
+    /** 占父容器宽度的多少等分，总分为12份 */
+    span: { type: [Number, String] as PropType<number | string>, default: 12 },
+    /** 指定栅格左侧的间隔数(总12栏) */
+    offset: { type: [Number, String] as PropType<number | string>, default: 0 },
+    /** 水平排列方式 */
+    justify: { type: String as PropType<JustifyType>, default: 'start' },
+    /** 垂直对齐方式 */
+    align: { type: String as PropType<AlignType>, default: 'center' },
+    /** 文字对齐方式 */
+    textAlign: { type: String, default: 'left' },
+    /** 是否阻止事件传播 */
+    stop: { type: Boolean, default: true }
+};
+
+export type ColProps = ExtractPropTypes<typeof ColProps>;

package/components/u-col/u-col.vue

@@ -6,6 +6,7 @@
 
 <script setup lang="ts">
 import { computed, inject } from 'vue';
+import { ColProps } from './types';
 
 defineOptions({
     name: 'u-col'
@@ -23,20 +24,7 @@ defineOptions({
 
 const emit = defineEmits<{ (e: 'click'): void }>();
 
-const props = defineProps({
-    /** 占父容器宽度的多少等分，总分为12份 */
-    span: { type: [Number, String], default: 12 },
-    /** 指定栅格左侧的间隔数(总12栏) */
-    offset: { type: [Number, String], default: 0 },
-    /** 水平排列方式，可选值为`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' },
-    /** 文字对齐方式 */
-    textAlign: { type: String, default: 'left' },
-    /** 是否阻止事件传播 */
-    stop: { type: Boolean, default: true }
-});
+const props = defineProps(ColProps);
 
 /**
  * gutter 给col添加间距，左右边距各占一半，从父组件u-row获取

package/components/u-collapse/types.ts

@@ -0,0 +1,31 @@
+import type { ExtractPropTypes, PropType } from 'vue';
+
+/**
+ * u-collapse 手风琴 Props
+ * @description 通过折叠面板收纳内容区域
+ * @property {Boolean} accordion 是否手风琴模式（默认true）
+ * @property {Object} headStyle 标题自定义样式，对象形式
+ * @property {Object} bodyStyle 主体自定义样式，对象形式
+ * @property {Object} itemStyle 每一个item的样式，对象形式
+ * @property {Boolean} arrow 是否显示标题右侧的箭头（默认true）
+ * @property {String} arrowColor 标题右侧箭头的颜色（默认#909399）
+ * @property {String} hoverClass 样式类名，按下时有效（默认u-hover-class）
+ */
+export const CollapseProps = {
+    /** 是否手风琴模式 */
+    accordion: { type: Boolean, default: true },
+    /** 头部的样式 */
+    headStyle: { type: Object as PropType<Record<string, any>>, default: () => ({}) },
+    /** 主体的样式 */
+    bodyStyle: { type: Object as PropType<Record<string, any>>, default: () => ({}) },
+    /** 每一个item的样式 */
+    itemStyle: { type: Object as PropType<Record<string, any>>, default: () => ({}) },
+    /** 是否显示右侧的箭头 */
+    arrow: { type: Boolean, default: true },
+    /** 箭头的颜色 */
+    arrowColor: { type: String, default: '#909399' },
+    /** 标题部分按压时的样式类，"none"为无效果 */
+    hoverClass: { type: String, default: 'u-hover-class' }
+};
+
+export type CollapseProps = ExtractPropTypes<typeof CollapseProps>;

package/components/u-collapse/u-collapse.vue

@@ -6,6 +6,7 @@
 
 <script setup lang="ts">
 import { ref, provide } from 'vue';
+import { CollapseProps } from './types';
 
 defineOptions({
     name: 'u-collapse'
@@ -24,22 +25,7 @@ defineOptions({
  * @event {Function} change 当前激活面板展开时触发(如果是手风琴模式，参数activeNames类型为String，否则为Array)
  * @example <u-collapse></u-collapse>
  */
-const props = defineProps({
-    /** 是否手风琴模式 */
-    accordion: { type: Boolean, default: true },
-    /** 头部的样式 */
-    headStyle: { type: Object, default: () => ({}) },
-    /** 主体的样式 */
-    bodyStyle: { type: Object, default: () => ({}) },
-    /** 每一个item的样式 */
-    itemStyle: { type: Object, default: () => ({}) },
-    /** 是否显示右侧的箭头 */
-    arrow: { type: Boolean, default: true },
-    /** 箭头的颜色 */
-    arrowColor: { type: String, default: '#909399' },
-    /** 标题部分按压时的样式类，"none"为无效果 */
-    hoverClass: { type: String, default: 'u-hover-class' }
-});
+const props = defineProps(CollapseProps);
 
 const emit = defineEmits(['change']);
 

package/components/u-collapse-item/types.ts

@@ -0,0 +1,25 @@
+import type { ExtractPropTypes, PropType } from 'vue';
+import type { TextAlign } from '../../types/global';
+
+/**
+ * u-collapse-item 手风琴Item Props
+ * @description 通过折叠面板收纳内容区域（搭配u-collapse使用）
+ */
+export const CollapseItemProps = {
+    /** 标题 */
+    title: { type: String, default: '' },
+    /** 标题的对齐方式 */
+    align: { type: String as PropType<TextAlign>, default: 'left' },
+    /** 是否可以点击收起 */
+    disabled: { type: Boolean, default: false },
+    /** collapse显示与否 */
+    open: { type: Boolean, default: false },
+    /** 唯一标识符 */
+    name: { type: [Number, String] as PropType<number | string>, default: '' },
+    /** 活动样式 */
+    activeStyle: { type: Object as PropType<Record<string, any>>, default: () => ({}) },
+    /** 标识当前为第几个 */
+    index: { type: [String, Number] as PropType<string | number>, default: '' }
+};
+
+export type CollapseItemProps = ExtractPropTypes<typeof CollapseItemProps>;

package/components/u-collapse-item/u-collapse-item.vue

@@ -23,6 +23,7 @@
 <script setup lang="ts">
 import { ref, watch, onMounted, useSlots, getCurrentInstance, nextTick, inject } from 'vue';
 import { $u } from '../..';
+import { CollapseItemProps } from './types';
 
 defineOptions({
     name: 'u-collapse-item'
@@ -42,22 +43,7 @@ defineOptions({
  * @event {Function} change 某个item被打开或者收起时触发
  * @example <u-collapse-item :title="item.head" v-for="(item, index) in itemList" :key="index">{{item.body}}</u-collapse-item>
  */
-const props = defineProps({
-    /** 标题 */
-    title: { type: String, default: '' },
-    /** 标题的对齐方式 */
-    align: { type: String, default: 'left' },
-    /** 是否可以点击收起 */
-    disabled: { type: Boolean, default: false },
-    /** collapse显示与否 */
-    open: { type: Boolean, default: false },
-    /** 唯一标识符 */
-    name: { type: [Number, String], default: '' },
-    /** 活动样式 */
-    activeStyle: { type: Object, default: () => ({}) },
-    /** 标识当前为第几个 */
-    index: { type: [String, Number], default: '' }
-});
+const props = defineProps(CollapseItemProps);
 
 const emit = defineEmits(['change']);
 const slots = useSlots();

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

@@ -0,0 +1,48 @@
+import type { ExtractPropTypes, PropType } from 'vue';
+import type { Direction, PlayState, ScrollDirection, ThemeType } from '../../types/global';
+
+/**
+ * u-column-notice 通告栏 Props
+ */
+export const ColumnNoticeProps = {
+    /** 显示的内容，数组 */
+    list: { type: Array as PropType<string[]>, default: () => [] },
+    /** 显示的主题，success|error|primary|info|warning */
+    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: '' },
+    /** 滚动方向，row-水平滚动，column-垂直滚动 */
+    direction: { type: String as PropType<ScrollDirection>, default: 'row' },
+    /** 是否显示 */
+    show: { type: Boolean, default: true },
+    /** 字体大小，单位rpx */
+    fontSize: { type: [Number, String] as PropType<number | string>, default: 26 },
+    /** 滚动一个周期的时间长，单位ms */
+    duration: { type: [Number, String] as PropType<number | string>, default: 2000 },
+    /** 音量喇叭的大小 */
+    volumeSize: { type: [Number, String] as PropType<number | string>, default: 34 },
+    /** 水平滚动时的滚动速度，即每秒滚动多少rpx，这有利于控制文字无论多少时，都能有一个恒定的速度 */
+    speed: { type: Number, default: 160 },
+    /** 水平滚动时，是否采用衔接形式滚动 */
+    isCircular: { type: Boolean, default: true },
+    /** 滚动方向，horizontal-水平滚动，vertical-垂直滚动 */
+    mode: { type: String as PropType<Direction>, default: 'horizontal' },
+    /** 播放状态，play-播放，paused-暂停 */
+    playState: { type: String as PropType<PlayState>, default: 'play' },
+    /** 是否禁止用手滑动切换 */
+    disableTouch: { type: Boolean, default: true },
+    /** 通知的边距 */
+    padding: { type: [Number, String] as PropType<number | string>, default: '18rpx 24rpx' }
+};
+
+export type ColumnNoticeProps = ExtractPropTypes<typeof ColumnNoticeProps>;

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

@@ -27,6 +27,7 @@
 
 <script setup lang="ts">
 import { computed } from 'vue';
+import { ColumnNoticeProps } from './types';
 
 defineOptions({ name: 'u-column-notice' });
 
@@ -53,103 +54,7 @@ defineOptions({ name: 'u-column-notice' });
  * @property {String|Number} padding 通知的边距
  */
 
-const props = defineProps({
-    /** 显示的内容，数组 */
-    list: {
-        type: Array as () => string[],
-        default: () => []
-    },
-    /** 显示的主题，success|error|primary|info|warning */
-    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: ''
-    },
-    /** 滚动方向，row-水平滚动，column-垂直滚动 */
-    direction: {
-        type: String,
-        default: 'row'
-    },
-    /** 是否显示 */
-    show: {
-        type: Boolean,
-        default: true
-    },
-    /** 字体大小，单位rpx */
-    fontSize: {
-        type: [Number, String],
-        default: 26
-    },
-    /** 滚动一个周期的时间长，单位ms */
-    duration: {
-        type: [Number, String],
-        default: 2000
-    },
-    /** 音量喇叭的大小 */
-    volumeSize: {
-        type: [Number, String],
-        default: 34
-    },
-    /** 水平滚动时的滚动速度，即每秒滚动多少rpx，这有利于控制文字无论多少时，都能有一个恒定的速度 */
-    speed: {
-        type: Number,
-        default: 160
-    },
-    /** 水平滚动时，是否采用衔接形式滚动 */
-    isCircular: {
-        type: Boolean,
-        default: true
-    },
-    /** 滚动方向，horizontal-水平滚动，vertical-垂直滚动 */
-    mode: {
-        type: String,
-        default: 'horizontal'
-    },
-    /** 播放状态，play-播放，paused-暂停 */
-    playState: {
-        type: String,
-        default: 'play'
-    },
-    /** 是否禁止用手滑动切换 */
-    disableTouch: {
-        type: Boolean,
-        default: true
-    },
-    /** 通知的边距 */
-    padding: {
-        type: [Number, String],
-        default: '18rpx 24rpx'
-    }
-});
+const props = defineProps(ColumnNoticeProps);
 
 const emit = defineEmits<{ (e: 'click', index: number): void; (e: 'close'): void; (e: 'getMore'): void; (e: 'end'): void }>();