uview-pro 0.2.4 → 0.3.1

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

@@ -1,134 +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://uviewpro.cn/zh/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"
+        :class="customClass"
+        :hover-class="hoverClass"
+        :hover-stay-time="200"
+        @tap="click"
+        :style="
+            $u.toStyle(
+                {
+                    background: bgColor,
+                    width: width
+                },
+                customStyle
+            )
+        "
+    >
+        <view class="u-grid-item-box" :style="[customStyle]" :class="[border ? 'u-border-right u-border-bottom' : '']">
+            <slot />
+        </view>
+    </view>
+</template>
+
+<script lang="ts">
+export default {
+    name: 'u-grid-item',
+    options: {
+        addGlobalClass: true,
+        // #ifndef MP-TOUTIAO
+        virtualHost: true,
+        // #endif
+        styleIsolation: 'shared'
+    }
+};
+</script>
+
+<script setup lang="ts">
+import { GridItemProps } from './types';
+import { computed } from 'vue';
+import { $u, useChildren } from '../..';
+
+/**
+ * gridItem 宫格项
+ * @description 宫格组件一般用于同时展示多个同类项目的场景，可以给宫格的项目设置徽标组件(badge)，或者图标等，也可以扩展为左右滑动的轮播形式。搭配u-grid使用
+ * @tutorial https://uviewpro.cn/zh/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>
+ */
+
+const props = defineProps(GridItemProps);
+const { parentExposed } = useChildren('u-grid-item', 'u-grid');
+const emit = defineEmits(['click']);
+
+// 宫格按压时的样式类，"none"为无效果
+const hoverClass = computed(() => {
+    return parentExposed?.value?.props?.hoverClass ?? '';
+});
+
+// 是否显示边框
+const border = computed(() => {
+    return parentExposed?.value?.props?.border ?? true;
+});
+
+// 分成几列
+const col = computed(() => {
+    return parentExposed?.value?.props?.col ?? 3;
+});
+
+// 计算每个grid-item的宽度
+const width = computed(() => 100 / Number(col.value) + '%');
+
+/**
+ * 点击宫格
+ */
+function click() {
+    emit('click', props.index);
+    parentExposed?.value?.click(props.index);
+}
+
+defineExpose({ 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,61 @@
-import type { ExtractPropTypes, PropType } from 'vue';
-import type { IconLabelPosition, ImgMode } from '../../types/global';
-import { baseProps } from '../common/props';
-
-/**
- * u-icon 组件 Props 类型定义
- * 所有属性均带详细注释，类型安全，便于 IDE 智能提示
- */
-export const IconProps = {
-    ...baseProps,
-    /** 图标名称，见示例图标集 */
-    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' },
-    /** 用于显示图片小图标时，图片的宽度，单位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';
+import { baseProps } from '../common/props';
+
+/**
+ * u-icon 组件 Props 类型定义
+ */
+export const IconProps = {
+    ...baseProps,
+    /** 图标名称，见示例图标集 */
+    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' },
+    /** 用于显示图片小图标时，图片的宽度，单位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>;