uview-pro 0.0.7 → 0.0.8

package/components/u-icon/u-icon.vue

@@ -13,6 +13,7 @@
 <script setup lang="ts">
 import { computed } from 'vue';
 import { $u } from '../..';
+import { IconProps } from './types';
 
 defineOptions({
     name: 'u-icon'
@@ -54,129 +55,7 @@ const emit = defineEmits<{
     (e: 'touchstart', index: string | number): void;
 }>();
 
-const props = defineProps({
-    /**
-     * 图标名称，见示例图标集
-     * @default ''
-     */
-    name: { type: String, default: '' },
-    /**
-     * 图标颜色，可接受主题色
-     * @default ''
-     */
-    color: { type: String, default: '' },
-    /**
-     * 字体大小，单位rpx（默认32）
-     * @default 'inherit'
-     */
-    size: { type: [Number, String], default: 'inherit' },
-    /**
-     * 是否显示粗体
-     * @default false
-     */
-    bold: { type: Boolean, default: false },
-    /**
-     * 点击图标的时候传递事件出去的index（用于区分点击了哪一个）
-     * @default ''
-     */
-    index: { type: [Number, String], default: '' },
-    /**
-     * 触摸图标时的类名
-     * @default ''
-     */
-    hoverClass: { type: String, default: '' },
-    /**
-     * 自定义扩展前缀，方便用户扩展自己的图标库
-     * @default 'uicon'
-     */
-    customPrefix: { type: String, default: 'uicon' },
-    /**
-     * 图标右边或者下面的文字
-     * @default ''
-     */
-    label: { type: [String, Number], default: '' },
-    /**
-     * label的位置，只能右边或者下边
-     * @default 'right'
-     * @values 'right' | 'bottom'
-     */
-    labelPos: { type: String, default: 'right' },
-    /**
-     * label的大小，单位rpx（默认28）
-     * @default '28'
-     */
-    labelSize: { type: [String, Number], default: '28' },
-    /**
-     * label的颜色
-     * @default '#606266'
-     */
-    labelColor: { type: String, default: '#606266' },
-    /**
-     * label与图标的距离(横向排列)，单位rpx（默认6）
-     * @default '6'
-     */
-    marginLeft: { type: [String, Number], default: '6' },
-    /**
-     * label与图标的距离(竖向排列)，单位rpx（默认6）
-     * @default '6'
-     */
-    marginTop: { type: [String, Number], default: '6' },
-    /**
-     * label与图标的距离(竖向排列)，单位rpx（默认6）
-     * @default '6'
-     */
-    marginRight: { type: [String, Number], default: '6' },
-    /**
-     * label与图标的距离(竖向排列)，单位rpx（默认6）
-     * @default '6'
-     */
-    marginBottom: { type: [String, Number], default: '6' },
-    /**
-     * label与图标的距离，单位rpx，权重高于 margin
-     * @default ''
-     */
-    space: { type: [String, Number], default: '' },
-    /**
-     * 图片的mode，参考uni-app image组件
-     * @default 'widthFix'
-     */
-    imgMode: { type: String, default: 'widthFix' },
-    /**
-     * 自定义样式，对象形式
-     * @default {}
-     */
-    customStyle: { type: Object as () => Record<string, any>, default: () => ({}) },
-    /**
-     * 用于显示图片小图标时，图片的宽度，单位rpx
-     * @default ''
-     */
-    width: { type: [String, Number], default: '' },
-    /**
-     * 用于显示图片小图标时，图片的高度，单位rpx
-     * @default ''
-     */
-    height: { type: [String, Number], default: '' },
-    /**
-     * 用于解决某些情况下，让图标垂直居中的用途，单位rpx
-     * @default 0
-     */
-    top: { type: [String, Number], default: 0 },
-    /**
-     * 是否为DecimalIcon
-     * @default false
-     */
-    showDecimalIcon: { type: Boolean, default: false },
-    /**
-     * 背景颜色，可接受主题色，仅Decimal时有效
-     * @default '#ececec'
-     */
-    inactiveColor: { type: String, default: '#ececec' },
-    /**
-     * 显示的百分比，仅Decimal时有效
-     * @default '50'
-     */
-    percent: { type: [Number, String], default: '50' }
-});
+const props = defineProps(IconProps);
 
 /**
  * 计算图标的类名集合

package/components/u-image/types.ts

@@ -1,48 +1,49 @@
-import { type ComponentPublicInstance, type ExtractPropTypes } from 'vue'
+import { type ComponentPublicInstance, type ExtractPropTypes, type PropType } from 'vue';
+import type { ImgMode, Shape } from '../../types/global';
 
 // 定义 ImageProps 的类型
 export const ImageProps = {
-  /** 图片地址 */
-  src: { type: String, default: '' },
-  /** 裁剪模式 */
-  mode: { type: String, default: 'aspectFill' },
-  /** 宽度，单位任意，如果为数值，则为rpx单位（默认100%） */
-  width: { type: [String, Number], default: '100%' },
-  /** 高度，单位任意，如果为数值，则为rpx单位（默认 auto） */
-  height: { type: [String, Number], default: 'auto' },
-  /** 图片形状，circle-圆形，square-方形（默认square） */
-  shape: { type: String, default: 'square' },
-  /** 圆角值，单位任意，如果为数值，则为rpx单位（默认 0） */
-  borderRadius: { type: [String, Number], default: 0 },
-  /** 是否懒加载，仅微信小程序、App、百度小程序、字节跳动小程序有效（默认 true） */
-  lazyLoad: { type: Boolean, default: true },
-  /** 是否开启长按图片显示识别小程序码菜单，仅微信小程序有效（默认 true） */
-  showMenuByLongpress: { type: Boolean, default: true },
-  /** 加载中的图标，或者小图片（默认 photo） */
-  loadingIcon: { type: String, default: 'photo' },
-  /** 加载失败的图标，或者小图片（默认 error-circle） */
-  errorIcon: { type: String, default: 'error-circle' },
-  /** 是否显示加载中的图标或者自定义的slot（默认 true） */
-  showLoading: { type: Boolean, default: true },
-  /** 是否显示加载错误的图标或者自定义的slot（默认 true） */
-  showError: { type: Boolean, default: true },
-  /** 是否需要淡入效果（默认 true） */
-  fade: { type: Boolean, default: true },
-  /** 只支持网络资源，只对微信小程序有效（默认 false） */
-  webp: { type: Boolean, default: false },
-  /** 搭配fade参数的过渡时间，单位ms（默认 500） */
-  duration: { type: [String, Number], default: 500 },
-  /** 背景颜色，用于深色页面加载图片时，为了和背景色融合（默认 #f3f4f6） */
-  bgColor: { type: String, default: '#f3f4f6' }
-}
+    /** 图片地址 */
+    src: { type: String, default: '' },
+    /** 裁剪模式 */
+    mode: { type: String as PropType<ImgMode>, default: 'aspectFill' },
+    /** 宽度，单位任意，如果为数值，则为rpx单位（默认100%） */
+    width: { type: [String, Number], default: '100%' },
+    /** 高度，单位任意，如果为数值，则为rpx单位（默认 auto） */
+    height: { type: [String, Number], default: 'auto' },
+    /** 图片形状，circle-圆形，square-方形（默认square） */
+    shape: { type: String as PropType<Shape>, default: 'square' },
+    /** 圆角值，单位任意，如果为数值，则为rpx单位（默认 0） */
+    borderRadius: { type: [String, Number], default: 0 },
+    /** 是否懒加载，仅微信小程序、App、百度小程序、字节跳动小程序有效（默认 true） */
+    lazyLoad: { type: Boolean, default: true },
+    /** 是否开启长按图片显示识别小程序码菜单，仅微信小程序有效（默认 true） */
+    showMenuByLongpress: { type: Boolean, default: true },
+    /** 加载中的图标，或者小图片（默认 photo） */
+    loadingIcon: { type: String, default: 'photo' },
+    /** 加载失败的图标，或者小图片（默认 error-circle） */
+    errorIcon: { type: String, default: 'error-circle' },
+    /** 是否显示加载中的图标或者自定义的slot（默认 true） */
+    showLoading: { type: Boolean, default: true },
+    /** 是否显示加载错误的图标或者自定义的slot（默认 true） */
+    showError: { type: Boolean, default: true },
+    /** 是否需要淡入效果（默认 true） */
+    fade: { type: Boolean, default: true },
+    /** 只支持网络资源，只对微信小程序有效（默认 false） */
+    webp: { type: Boolean, default: false },
+    /** 搭配fade参数的过渡时间，单位ms（默认 500） */
+    duration: { type: [String, Number], default: 500 },
+    /** 背景颜色，用于深色页面加载图片时，为了和背景色融合（默认 #f3f4f6） */
+    bgColor: { type: String, default: '#f3f4f6' }
+};
 
 // 将 ImageProps 转换为类型
-export type ImageProps = ExtractPropTypes<typeof ImageProps>
+export type ImageProps = ExtractPropTypes<typeof ImageProps>;
 
 // 暴露的组件实例方法
 export type ImageExpose = {
-  changeStatus: (status: 'loading' | 'error' | 'normal') => void
-}
+    changeStatus: (status: 'loading' | 'error' | 'normal') => void;
+};
 
 // 组件实例类型
-export type ImageInstance = ComponentPublicInstance<ImageProps, ImageExpose>
+export type ImageInstance = ComponentPublicInstance<ImageProps, ImageExpose>;

package/components/u-index-anchor/types.ts

@@ -0,0 +1,16 @@
+import type { ExtractPropTypes, PropType } from 'vue';
+
+/**
+ * u-index-anchor 组件 Props 类型定义
+ * @description 索引锚点属性
+ */
+export const IndexAnchorProps = {
+    /** 是否使用自定义内容的插槽 */
+    useSlot: { type: Boolean, default: false },
+    /** 索引字符，如果定义了use-slot，此参数自动失效 */
+    index: { type: String, default: '' },
+    /** 自定义样式，对象形式 */
+    customStyle: { type: Object as PropType<Record<string, any>>, default: () => ({}) }
+};
+
+export type IndexAnchorProps = ExtractPropTypes<typeof IndexAnchorProps>;

package/components/u-index-anchor/u-index-anchor.vue

@@ -13,6 +13,7 @@
 </template>
 
 <script setup lang="ts">
+import { IndexAnchorProps } from './types';
 import { ref, computed, onMounted, getCurrentInstance } from 'vue';
 import { $u } from '../..';
 
@@ -31,23 +32,7 @@ defineOptions({
  * @example <u-index-anchor :index="item" />
  */
 
-const props = defineProps({
-    /** 是否使用自定义内容的插槽 */
-    useSlot: {
-        type: Boolean,
-        default: false
-    },
-    /** 索引字符，如果定义了use-slot，此参数自动失效 */
-    index: {
-        type: String,
-        default: ''
-    },
-    /** 自定义样式，对象形式 */
-    customStyle: {
-        type: Object as () => Record<string, any>,
-        default: () => ({})
-    }
-});
+const props = defineProps(IndexAnchorProps);
 
 // 响应式变量
 const active = ref(false);

package/components/u-index-list/types.ts

@@ -0,0 +1,43 @@
+import type { ExtractPropTypes, PropType } from 'vue';
+
+/**
+ * u-index-list 组件 props 类型定义
+ * @description 通过折叠面板收纳内容区域,搭配<u-index-anchor>使用
+ */
+export const IndexListProps = {
+    /** 是否开启锚点自动吸顶 */
+    sticky: {
+        type: Boolean,
+        default: true
+    },
+    /** 锚点吸顶时的层级 */
+    zIndex: {
+        type: [Number, String] as PropType<number | string>,
+        default: ''
+    },
+    /** 当前滚动高度 */
+    scrollTop: {
+        type: [Number, String] as PropType<number | string>,
+        default: 0
+    },
+    /** 锚点自动吸顶时与顶部的距离 */
+    offsetTop: {
+        type: [Number, String] as PropType<number | string>,
+        default: 0
+    },
+    /** 索引字符列表 */
+    indexList: {
+        type: Array as PropType<string[]>,
+        default: undefined // 组件内用 getIndexList() 兜底
+    },
+    /** 锚点和右边索引字符高亮颜色 */
+    activeColor: {
+        type: String,
+        default: '#2979ff'
+    }
+};
+
+/**
+ * u-index-list 组件 props 类型
+ */
+export type IndexListProps = ExtractPropTypes<typeof IndexListProps>;

package/components/u-index-list/u-index-list.vue

@@ -49,6 +49,7 @@ function getIndexList() {
 <script setup lang="ts">
 import { ref, reactive, computed, watch, onMounted, getCurrentInstance } from 'vue';
 import { $u } from '../..';
+import { IndexListProps } from './types';
 
 defineOptions({
     name: 'u-index-list'
@@ -67,42 +68,20 @@ defineOptions({
  * @event {Function} select 选中右边索引字符时触发
  * @example <u-index-list :scrollTop="scrollTop"></u-index-list>
  */
-const props = defineProps({
-    /** 是否开启锚点自动吸顶 */
-    sticky: {
-        type: Boolean,
-        default: true
-    },
-    /** 锚点吸顶时的层级 */
-    zIndex: {
-        type: [Number, String],
-        default: ''
-    },
-    /** 当前滚动高度 */
-    scrollTop: {
-        type: [Number, String],
-        default: 0
-    },
-    /** 锚点自动吸顶时与顶部的距离 */
-    offsetTop: {
-        type: [Number, String],
-        default: 0
-    },
-    /** 索引字符列表 */
-    indexList: {
-        type: Array,
-        default: () => getIndexList()
-    },
-    /** 锚点和右边索引字符高亮颜色 */
-    activeColor: {
-        type: String,
-        default: '#2979ff'
-    }
-});
-
+const props = defineProps(IndexListProps);
 const emit = defineEmits(['select']);
 const instance = getCurrentInstance();
 
+// 索引列表生成函数
+function getIndexList() {
+    const indexList: string[] = [];
+    const charCodeOfA = 'A'.charCodeAt(0);
+    for (let i = 0; i < 26; i++) {
+        indexList.push(String.fromCharCode(charCodeOfA + i));
+    }
+    return indexList;
+}
+
 // 变量定义
 const activeAnchorIndex = ref(0);
 const showSidebar = ref(true);
@@ -121,7 +100,7 @@ const stickyOffsetTop = ref(0);
 // 弹出toast的z-index值
 const alertZIndex = computed(() => $u.zIndex.toast).value;
 // indexList 响应式
-const indexList = computed(() => props.indexList).value;
+const indexList = computed(() => props.indexList ?? getIndexList()).value;
 const zIndex = computed(() => props.zIndex).value;
 const activeColor = computed(() => props.activeColor).value;
 

package/components/u-input/types.ts

@@ -0,0 +1,140 @@
+import type { ExtractPropTypes, PropType } from 'vue';
+import type { InputAlign, InputConfirmType, InputType } from '../../types/global';
+
+/**
+ * u-input 组件 props 类型定义
+ * @description 此组件为一个输入框，默认没有边框和样式，是专门为配合表单组件u-form而设计的，利用它可以快速实现表单验证，输入内容，下拉选择等功能。
+ */
+
+export const InputProps = {
+    /** 用于双向绑定输入框的值 */
+    modelValue: {
+        type: [String, Number] as PropType<string | number>,
+        default: ''
+    },
+    /** 输入框的类型，textarea，text，number */
+    type: {
+        type: String as PropType<InputType>,
+        default: 'text'
+    },
+    /** 输入框文字的对齐方式(默认left) */
+    inputAlign: {
+        type: String as PropType<InputAlign>,
+        default: 'left'
+    },
+    /** placeholder显示值(默认 '请输入内容') */
+    placeholder: {
+        type: String,
+        default: '请输入内容'
+    },
+    /** 是否禁用输入框(默认false) */
+    disabled: {
+        type: Boolean,
+        default: false
+    },
+    /** 输入框的最大可输入长度(默认140) */
+    maxlength: {
+        type: [Number, String] as PropType<number | string>,
+        default: 140
+    },
+    /** placeholder的样式，字符串形式，如"color: red;"(默认 "color: #c0c4cc;") */
+    placeholderStyle: {
+        type: String,
+        default: 'color: #c0c4cc;'
+    },
+    /** 设置键盘右下角按钮的文字，仅在type为text时生效(默认done) */
+    confirmType: {
+        type: String as PropType<InputConfirmType>,
+        default: 'done'
+    },
+    /** 自定义输入框的样式，对象形式 */
+    customStyle: {
+        type: Object as PropType<Record<string, any>>,
+        default: () => ({})
+    },
+    /** 如果 textarea 是在一个 position:fixed 的区域，需要显示指定属性 fixed 为 true */
+    fixed: {
+        type: Boolean,
+        default: false
+    },
+    /** 是否自动获得焦点(默认false) */
+    focus: {
+        type: Boolean,
+        default: false
+    },
+    /** 密码类型时，是否显示右侧的密码图标(默认true) */
+    passwordIcon: {
+        type: Boolean,
+        default: true
+    },
+    /** input|textarea是否显示边框(默认false) */
+    border: {
+        type: Boolean,
+        default: false
+    },
+    /** 输入框的边框颜色(默认#dcdfe6) */
+    borderColor: {
+        type: String,
+        default: '#dcdfe6'
+    },
+    /** 是否自动增高输入区域，type为textarea时有效(默认true) */
+    autoHeight: {
+        type: Boolean,
+        default: true
+    },
+    /** type=select时，旋转右侧的图标，标识当前处于打开还是关闭select的状态 */
+    selectOpen: {
+        type: Boolean,
+        default: false
+    },
+    /** 高度，单位rpx */
+    height: {
+        type: [Number, String] as PropType<number | string>,
+        default: ''
+    },
+    /** 是否可清空(默认true) */
+    clearable: {
+        type: Boolean,
+        default: true
+    },
+    /** 指定光标与键盘的距离，单位 px(默认0) */
+    cursorSpacing: {
+        type: [Number, String] as PropType<number | string>,
+        default: 0
+    },
+    /** 光标起始位置，自动聚焦时有效，需与selection-end搭配使用（默认-1） */
+    selectionStart: {
+        type: [Number, String] as PropType<number | string>,
+        default: -1
+    },
+    /** 光标结束位置，自动聚焦时有效，需与selection-start搭配使用（默认-1） */
+    selectionEnd: {
+        type: [Number, String] as PropType<number | string>,
+        default: -1
+    },
+    /** 是否自动去除两端的空格(默认true) */
+    trim: {
+        type: Boolean,
+        default: true
+    },
+    /** 是否显示键盘上方带有”完成“按钮那一栏(默认true) */
+    showConfirmbar: {
+        type: Boolean,
+        default: true
+    },
+    /** 弹出键盘时是否自动调节高度，uni-app默认值是true */
+    adjustPosition: {
+        type: Boolean,
+        default: true
+    },
+    /** 输入框的验证状态，用于错误时，边框是否改为红色 */
+    validateState: {
+        type: Boolean,
+        default: false
+    }
+};
+
+/**
+ * u-input 组件 props 类型
+ */
+export type InputProps = ExtractPropTypes<typeof InputProps>;