uview-pro 0.0.14 → 0.0.16

package/components/u-grid/u-grid.vue

@@ -1,93 +1,93 @@
-<template>
-    <view class="u-grid" :class="{ 'u-border-top u-border-left': border }" :style="[gridStyle]">
-        <slot />
-    </view>
-</template>
-
-<script setup lang="ts">
-import { GridProps } from './types';
-import { ref, computed, watch } from 'vue';
-
-defineOptions({ name: 'u-grid' });
-
-/**
- * grid 宫格布局
- * @description 宫格组件一般用于同时展示多个同类项目的场景，可以给宫格的项目设置徽标组件(badge)，或者图标等，也可以扩展为左右滑动的轮播形式。
- * @tutorial https://uview-pro.netlify.app/components/grid.html
- * @property {String|Number} col 宫格的列数（默认3）
- * @property {Boolean} border 是否显示宫格的边框（默认true）
- * @property {Boolean} hover-class 点击宫格的时候，是否显示按下的灰色背景（默认false）
- * @event {Function} click 点击宫格触发
- * @example <u-grid :col="3" @click="click"></u-grid>
- */
-const props = defineProps(GridProps);
-
-// emits 定义
-const emit = defineEmits(['click']);
-
-// 当前 grid 的子项集合
-const children = ref<any[]>([]);
-
-// 计算父组件的值是否发生变化
-const parentData = computed(() => [props.hoverClass, props.col, props.border, props.align]);
-
-// 宫格对齐方式
-const gridStyle = computed(() => {
-    const style: Record<string, string> = {};
-    switch (props.align) {
-        case 'left':
-            style.justifyContent = 'flex-start';
-            break;
-        case 'center':
-            style.justifyContent = 'center';
-            break;
-        case 'right':
-            style.justifyContent = 'flex-end';
-            break;
-        default:
-            style.justifyContent = 'flex-start';
-    }
-    return style;
-});
-
-// 监听父参数变化，通知子组件
-watch(parentData, () => {
-    if (children.value.length) {
-        children.value.forEach(child => {
-            child.exposed.updateParentData();
-        });
-    }
-});
-
-// 兼容原 created 钩子
-children.value = [];
-
-/**
- * 点击宫格
- * @param index 子项索引
- */
-function click(index: number) {
-    emit('click', index);
-}
-
-defineExpose({ click, children, props });
-</script>
-
-<style scoped lang="scss">
-@import '../../libs/css/style.components.scss';
-
-.u-grid {
-    width: 100%;
-    /* #ifdef MP */
-    position: relative;
-    box-sizing: border-box;
-    overflow: hidden;
-    /* #endif */
-
-    /* #ifndef MP */
-    @include vue-flex;
-    flex-wrap: wrap;
-    align-items: center;
-    /* #endif */
-}
-</style>
+<template>
+    <view class="u-grid" :class="{ 'u-border-top u-border-left': border }" :style="[gridStyle]">
+        <slot />
+    </view>
+</template>
+
+<script setup lang="ts">
+import { GridProps } from './types';
+import { ref, computed, watch } from 'vue';
+
+defineOptions({ name: 'u-grid' });
+
+/**
+ * grid 宫格布局
+ * @description 宫格组件一般用于同时展示多个同类项目的场景，可以给宫格的项目设置徽标组件(badge)，或者图标等，也可以扩展为左右滑动的轮播形式。
+ * @tutorial https://uview-pro.netlify.app/components/grid.html
+ * @property {String|Number} col 宫格的列数（默认3）
+ * @property {Boolean} border 是否显示宫格的边框（默认true）
+ * @property {Boolean} hover-class 点击宫格的时候，是否显示按下的灰色背景（默认false）
+ * @event {Function} click 点击宫格触发
+ * @example <u-grid :col="3" @click="click"></u-grid>
+ */
+const props = defineProps(GridProps);
+
+// emits 定义
+const emit = defineEmits(['click']);
+
+// 当前 grid 的子项集合
+const children = ref<any[]>([]);
+
+// 计算父组件的值是否发生变化
+const parentData = computed(() => [props.hoverClass, props.col, props.border, props.align]);
+
+// 宫格对齐方式
+const gridStyle = computed(() => {
+    const style: Record<string, string> = {};
+    switch (props.align) {
+        case 'left':
+            style.justifyContent = 'flex-start';
+            break;
+        case 'center':
+            style.justifyContent = 'center';
+            break;
+        case 'right':
+            style.justifyContent = 'flex-end';
+            break;
+        default:
+            style.justifyContent = 'flex-start';
+    }
+    return style;
+});
+
+// 监听父参数变化，通知子组件
+watch(parentData, () => {
+    if (children.value.length) {
+        children.value.forEach(child => {
+            child.exposed.updateParentData();
+        });
+    }
+});
+
+// 兼容原 created 钩子
+children.value = [];
+
+/**
+ * 点击宫格
+ * @param index 子项索引
+ */
+function click(index: number) {
+    emit('click', index);
+}
+
+defineExpose({ click, children, props });
+</script>
+
+<style scoped lang="scss">
+@import '../../libs/css/style.components.scss';
+
+.u-grid {
+    width: 100%;
+    /* #ifdef MP */
+    position: relative;
+    box-sizing: border-box;
+    overflow: hidden;
+    /* #endif */
+
+    /* #ifndef MP */
+    @include vue-flex;
+    flex-wrap: wrap;
+    align-items: center;
+    /* #endif */
+}
+</style>

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

@@ -1,16 +1,16 @@
-import type { ExtractPropTypes, PropType } from 'vue';
-
-/**
- * u-grid-item 组件 Props 类型定义
- * @description 宫格项组件属性
- */
-export const GridItemProps = {
-    /** 背景颜色 */
-    bgColor: { type: String, default: '#ffffff' },
-    /** 点击时返回的index */
-    index: { type: [Number, String] as PropType<string | number>, default: '' },
-    /** 自定义样式，对象形式 */
-    customStyle: { type: Object as PropType<Record<string, any>>, default: () => ({ padding: '30rpx 0' }) }
-};
-
-export type GridItemProps = ExtractPropTypes<typeof GridItemProps>;
+import type { ExtractPropTypes, PropType } from 'vue';
+
+/**
+ * u-grid-item 组件 Props 类型定义
+ * @description 宫格项组件属性
+ */
+export const GridItemProps = {
+    /** 背景颜色 */
+    bgColor: { type: String, default: '#ffffff' },
+    /** 点击时返回的index */
+    index: { type: [Number, String] as PropType<string | number>, default: '' },
+    /** 自定义样式，对象形式 */
+    customStyle: { type: Object as PropType<Record<string, any>>, default: () => ({ padding: '30rpx 0' }) }
+};
+
+export type GridItemProps = ExtractPropTypes<typeof GridItemProps>;

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

@@ -1,130 +1,130 @@
-<template>
-    <view
-        class="u-grid-item"
-        :hover-class="parentData.hoverClass"
-        :hover-stay-time="200"
-        @tap="click"
-        :style="{
-            background: bgColor,
-            width: width
-        }"
-    >
-        <view class="u-grid-item-box" :style="[customStyle]" :class="[parentData.border ? 'u-border-right u-border-bottom' : '']">
-            <slot />
-        </view>
-    </view>
-</template>
-
-<script setup lang="ts">
-import { GridItemProps } from './types';
-import { ref, computed, getCurrentInstance, onMounted } from 'vue';
-import { $u } from '../..';
-
-defineOptions({ name: 'u-grid-item' });
-
-/**
- * gridItem 宫格项
- * @description 宫格组件一般用于同时展示多个同类项目的场景，可以给宫格的项目设置徽标组件(badge)，或者图标等，也可以扩展为左右滑动的轮播形式。搭配u-grid使用
- * @tutorial https://uview-pro.netlify.app/components/grid.html
- * @property {String} bg-color 宫格的背景颜色（默认#ffffff）
- * @property {String|Number} index 点击宫格时，返回的值
- * @property {Object} custom-style 自定义样式，对象形式
- * @event {Function} click 点击宫格触发
- * @example <u-grid-item></u-grid-item>
- */
-
-// props 定义，保留参数注释
-const props = defineProps(GridItemProps);
-
-// emits 定义
-const emit = defineEmits(['click']);
-
-const instance = getCurrentInstance();
-
-// 父组件参数
-const parentData = ref({
-    hoverClass: '',
-    col: 3,
-    border: true
-});
-
-// 计算每个grid-item的宽度
-const width = computed(() => 100 / Number(parentData.value.col) + '%');
-
-// 获取父组件参数
-function updateParentData() {
-    if (!instance) return;
-    const parent = $u.parentData('u-grid', instance);
-    if (parent) {
-        parentData.value.hoverClass = parent.props.hoverClass;
-        parentData.value.col = parent.props.col;
-        parentData.value.border = parent.props.border;
-        // 注册到父组件children
-        if (Array.isArray(parent.children.value)) {
-            const exist = parent.children.value.find((val: any) => val === instance);
-            if (!exist) parent.children.value.push(instance);
-        }
-    }
-}
-
-/**
- * 点击宫格
- */
-function click() {
-    emit('click', props.index);
-    const parent = $u.parentData('u-grid', instance);
-    if (parent && typeof parent.click === 'function') parent.click(props.index);
-}
-
-onMounted(() => {
-    updateParentData();
-});
-
-defineExpose({ updateParentData, click });
-</script>
-
-<style scoped lang="scss">
-@import '../../libs/css/style.components.scss';
-
-.u-grid-item {
-    box-sizing: border-box;
-    background: #fff;
-    @include vue-flex;
-    align-items: center;
-    justify-content: center;
-    position: relative;
-    flex-direction: column;
-
-    /* #ifdef MP */
-    position: relative;
-    float: left;
-    /* #endif */
-}
-
-.u-grid-item-hover {
-    background: #f7f7f7 !important;
-}
-
-.u-grid-marker-box {
-    position: absolute;
-    /* #ifndef APP-NVUE */
-    display: inline-flex;
-    /* #endif */
-    line-height: 0;
-}
-
-.u-grid-marker-wrap {
-    position: absolute;
-}
-
-.u-grid-item-box {
-    padding: 30rpx 0;
-    @include vue-flex;
-    align-items: center;
-    justify-content: center;
-    flex-direction: column;
-    flex: 1;
-    width: 100%;
-    height: 100%;
-}
-</style>
+<template>
+    <view
+        class="u-grid-item"
+        :hover-class="parentData.hoverClass"
+        :hover-stay-time="200"
+        @tap="click"
+        :style="{
+            background: bgColor,
+            width: width
+        }"
+    >
+        <view class="u-grid-item-box" :style="[customStyle]" :class="[parentData.border ? 'u-border-right u-border-bottom' : '']">
+            <slot />
+        </view>
+    </view>
+</template>
+
+<script setup lang="ts">
+import { GridItemProps } from './types';
+import { ref, computed, getCurrentInstance, onMounted } from 'vue';
+import { $u } from '../..';
+
+defineOptions({ name: 'u-grid-item' });
+
+/**
+ * gridItem 宫格项
+ * @description 宫格组件一般用于同时展示多个同类项目的场景，可以给宫格的项目设置徽标组件(badge)，或者图标等，也可以扩展为左右滑动的轮播形式。搭配u-grid使用
+ * @tutorial https://uview-pro.netlify.app/components/grid.html
+ * @property {String} bg-color 宫格的背景颜色（默认#ffffff）
+ * @property {String|Number} index 点击宫格时，返回的值
+ * @property {Object} custom-style 自定义样式，对象形式
+ * @event {Function} click 点击宫格触发
+ * @example <u-grid-item></u-grid-item>
+ */
+
+// props 定义，保留参数注释
+const props = defineProps(GridItemProps);
+
+// emits 定义
+const emit = defineEmits(['click']);
+
+const instance = getCurrentInstance();
+
+// 父组件参数
+const parentData = ref({
+    hoverClass: '',
+    col: 3,
+    border: true
+});
+
+// 计算每个grid-item的宽度
+const width = computed(() => 100 / Number(parentData.value.col) + '%');
+
+// 获取父组件参数
+function updateParentData() {
+    if (!instance) return;
+    const parent = $u.parentData('u-grid', instance);
+    if (parent) {
+        parentData.value.hoverClass = parent.props.hoverClass;
+        parentData.value.col = parent.props.col;
+        parentData.value.border = parent.props.border;
+        // 注册到父组件children
+        if (Array.isArray(parent.children.value)) {
+            const exist = parent.children.value.find((val: any) => val === instance);
+            if (!exist) parent.children.value.push(instance);
+        }
+    }
+}
+
+/**
+ * 点击宫格
+ */
+function click() {
+    emit('click', props.index);
+    const parent = $u.parentData('u-grid', instance);
+    if (parent && typeof parent.click === 'function') parent.click(props.index);
+}
+
+onMounted(() => {
+    updateParentData();
+});
+
+defineExpose({ updateParentData, click });
+</script>
+
+<style scoped lang="scss">
+@import '../../libs/css/style.components.scss';
+
+.u-grid-item {
+    box-sizing: border-box;
+    background: #fff;
+    @include vue-flex;
+    align-items: center;
+    justify-content: center;
+    position: relative;
+    flex-direction: column;
+
+    /* #ifdef MP */
+    position: relative;
+    float: left;
+    /* #endif */
+}
+
+.u-grid-item-hover {
+    background: #f7f7f7 !important;
+}
+
+.u-grid-marker-box {
+    position: absolute;
+    /* #ifndef APP-NVUE */
+    display: inline-flex;
+    /* #endif */
+    line-height: 0;
+}
+
+.u-grid-marker-wrap {
+    position: absolute;
+}
+
+.u-grid-item-box {
+    padding: 30rpx 0;
+    @include vue-flex;
+    align-items: center;
+    justify-content: center;
+    flex-direction: column;
+    flex: 1;
+    width: 100%;
+    height: 100%;
+}
+</style>

package/components/u-icon/types.ts

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