hy-app 0.5.5 → 0.5.7

package/components/hy-back-top/props.ts

@@ -1,6 +1,5 @@
-import type IProps from './typing'
 import type { CSSProperties, PropType } from 'vue'
-import type HyIconProps from '../hy-icon/typing'
+import type { HyIconProps } from '../hy-icon/typing'
 
 const backTopProps = {
     /**
@@ -55,7 +54,7 @@ const backTopProps = {
         })
     },
     /** 自定义外部类名 */
-    customClass: String,
+    customClass: String
 }
 
 export default backTopProps

package/components/hy-badge/props.ts

@@ -77,6 +77,6 @@ const badgeProps = {
     },
     /** 自定义外部类名 */
     customClass: String
-}
+} as const
 
 export default badgeProps

package/components/hy-badge/typing.d.ts

@@ -1,3 +1,8 @@
+import type { ExtractPropTypes } from 'vue'
+import type badgeProps from './props'
+
+export interface HyBadgeProps extends ExtractPropTypes<typeof badgeProps> {}
+
 export interface IBadgeEmit {
     /** 点击触发 */
     (e: 'click', event: Event): void

package/components/hy-button/props.ts

@@ -1,5 +1,5 @@
 import type { CSSProperties, PropType } from 'vue'
-import type HyIconProps from '../hy-icon/typing'
+import type { HyIconProps } from '../hy-icon/typing'
 
 const buttonProps = {
     /** 是否显示按钮的细边框 */

package/components/hy-card/hy-card.vue

@@ -114,7 +114,8 @@ const cardClass = computed(() => {
     return [
         props.border && 'hy-border',
         props.full && 'hy-card__full',
-        hasBorder && 'hy-card--border'
+        hasBorder && 'hy-card--border',
+        props.customClass
     ].filter(Boolean)
 })
 const cardStyle = computed(() => {

package/components/hy-card/index.scss

@@ -40,7 +40,7 @@
       }
 
       @include e(title) {
-        max-width: 450rpx;
+        max-width: 400rpx;
         font-size: $hy-font-size-base;
         @include lineEllipsis;
       }
@@ -54,6 +54,10 @@
     @include m(right) {
       color: $hy-text-color--grey;
       margin-left: $hy-border-margin-padding-sm;
+
+      @include e(text) {
+        white-space: nowrap;
+      }
     }
   }
 

package/components/hy-card/props.ts

@@ -114,10 +114,9 @@ const cardProps = {
     /** 底部自定义样式 */
     footStyle: Object as PropType<CSSProperties>,
     /** 定义需要用到的外部样式 */
-    customStyle: {
-        type: Object as PropType<CSSProperties>,
-        default: () => {}
-    }
+    customStyle: Object as PropType<CSSProperties>,
+    /** 自定义外部类名 */
+    customClass: String
 }
 
 export default cardProps

package/components/hy-cell/hy-cell.vue

@@ -1,137 +1,6 @@
 <template>
-    <view :style="customStyle" class="hy-cell">
-        <view
-            :class="['hy-cell--title', showVertical && 'hy-cell--title__vertical']"
-            v-if="title || $slots['title']"
-        >
-            <!-- @slot 标题插槽 -->
-            <slot v-if="$slots.title" name="title" :title="title"></slot>
-            <text v-else class="hy-cell--title__text">{{ title }}</text>
-        </view>
-        <view class="hy-cell__body" :style="{ 'border-radius': addUnit(borderRadius) }">
-            <!-- @slot 整体插槽 -->
-            <slot v-if="$slots.default"></slot>
-            <template v-else v-for="(item, i) in list" :key="i">
-                <view
-                    :class="ItemClass"
-                    :hover-class="containerClass(item)"
-                    :hover-stay-time="250"
-                    :style="{
-                        borderBottom: border && i !== list.length - 1 ? '1rpx solid #c8c7cc66' : ''
-                    }"
-                    @tap="clickHandler($event, item, i)"
-                >
-                    <view class="hy-cell__body--container__content">
-                        <view
-                            v-if="item?.icon?.name || $slots.icon"
-                            class="hy-cell__body--container__content--icon"
-                        >
-                            <!-- @slot 图标插槽 -->
-                            <slot v-if="$slots.icon" name="icon" :icon="item?.icon"></slot>
-                            <HyIcon
-                                v-else
-                                :size="iconSize"
-                                :name="item?.icon?.name"
-                                :color="disabled || item?.disabled ? '#c0c0c0' : item?.icon?.color"
-                                :bold="item?.icon?.bold"
-                                :customPrefix="item?.icon?.customPrefix"
-                                :imgMode="item?.icon?.imgMode"
-                                :width="item?.icon?.width"
-                                :height="item?.icon?.height"
-                                :top="item?.icon?.top"
-                                :stop="item?.icon?.stop"
-                                :round="item?.icon?.round"
-                                :customStyle="item?.icon?.customStyle"
-                            ></HyIcon>
-                        </view>
-                        <view class="hy-cell__body--container__content--title">
-                            <!-- 将slot与默认内容用if/else分开主要是因为微信小程序不支持slot嵌套传递，这样才能解决collapse组件的slot不失效问题，label暂时未用到。 -->
-                            <!-- @slot 列表标题插槽 -->
-                            <slot
-                                v-if="$slots['cell-title']"
-                                name="cell-title"
-                                :title="item?.title"
-                            ></slot>
-                            <text
-                                v-else
-                                class="hy-cell__body--container__content--title__text"
-                                :class="[(disabled || item?.disabled) && 'hy-cell__disabled']"
-                            >
-                                {{ item?.title }}
-                            </text>
-                            <!-- @slot 列表小标题插槽 -->
-                            <template v-if="item?.subhead">
-                                <slot v-if="$slots.sub" name="sub" :sub="item.subhead"></slot>
-                                <text
-                                    v-else
-                                    class="hy-cell__body--container__content--title__sub"
-                                    :class="[disabled && 'hy-cell__disabled']"
-                                >
-                                    {{ item.subhead }}
-                                </text>
-                            </template>
-                        </view>
-                    </view>
-                    <view
-                        class="hy-cell__body--container__center"
-                        :style="{
-                            justifyContent:
-                                arrange === 'left'
-                                    ? 'flex-start'
-                                    : arrange === 'right'
-                                      ? 'flex-end'
-                                      : 'center'
-                        }"
-                    >
-                        <!-- @slot 值内容插槽 -->
-                        <slot v-if="$slots.value" name="value" :record="item"></slot>
-                        <text
-                            v-else-if="value || item?.value"
-                            :class="[
-                                'hy-cell__body__container__center--value',
-                                disabled && 'hy-cell--disabled'
-                            ]"
-                        >
-                            {{ item.value || value }}
-                        </text>
-                    </view>
-                    <view
-                        class="hy-cell__body--container__right-icon"
-                        :class="[
-                            `hy-cell__body--container__right-icon--${item?.arrowDirection || arrowDirection}`
-                        ]"
-                    >
-                        <!-- @slot 右边按钮插槽 -->
-                        <slot
-                            v-if="$slots['right-icon']"
-                            name="right-icon"
-                            :icon="item?.rightIcon || rightIcon"
-                        ></slot>
-                        <HyIcon
-                            v-else
-                            :name="item?.rightIcon?.name || rightIcon?.name || IconConfig.RIGHT"
-                            :color="
-                                disabled || item?.disabled
-                                    ? '#c0c0c0'
-                                    : item?.rightIcon?.color || rightIcon?.color
-                            "
-                            :bold="item?.rightIcon?.bold || rightIcon?.bold"
-                            :customPrefix="item?.rightIcon?.customPrefix || rightIcon?.customPrefix"
-                            :imgMode="item?.rightIcon?.imgMode || rightIcon?.imgMode"
-                            :width="item?.rightIcon?.width || rightIcon?.width"
-                            :height="item?.rightIcon?.height || rightIcon?.height"
-                            :top="item?.rightIcon?.top || rightIcon?.name"
-                            :stop="item?.rightIcon?.stop || rightIcon?.stop"
-                            :round="item?.rightIcon?.round || rightIcon?.round"
-                            :customStyle="item?.rightIcon?.customStyle || rightIcon?.customStyle"
-                        ></HyIcon>
-                    </view>
-                </view>
-
-                <!-- @slot 底部插槽 -->
-                <slot name="bottom" :record="item" />
-            </template>
-        </view>
+    <view :class="['hy-cell', customClass]" :style="customStyle">
+        <slot></slot>
     </view>
 </template>
 
@@ -146,69 +15,19 @@ export default {
 </script>
 
 <script setup lang="ts">
-import { computed } from 'vue'
-import type { ICellEmits } from './typing'
-import type { CellContentVo } from './typing'
-import { IconConfig, addUnit } from '../../libs'
+import { provide, toRefs } from 'vue'
 import cellProps from './props'
-// 组件
-import HyIcon from '../hy-icon/hy-icon.vue'
-
-/**
- * cell单元格一般用于一组列表的情况，比如个人中心页，设置页等
- * @displayName hy-cell
- */
-defineOptions({})
+import type { ICellEmits } from './typing'
 
-// const props = withDefaults(defineProps<IProps>(), defaultProps);
 const props = defineProps(cellProps)
 const emit = defineEmits<ICellEmits>()
 
-/**
- * @description 计算什么时候出现点击状态
- * */
-const containerClass = computed(() => {
-    return (temp: CellContentVo): string => {
-        return [
-            !props.disabled &&
-                !temp?.disabled &&
-                props.clickable &&
-                'hy-cell__body--container__clickable'
-        ]
-            .filter(Boolean)
-            .join()
+provide('hy-cell', {
+    ...toRefs(props),
+    onClick: (name: string | number) => {
+        emit('click', name)
     }
 })
-const ItemClass = computed(() => {
-    return ['hy-cell__body--container', `hy-cell__body--container__${props.size}`]
-})
-
-const iconSize = computed(() => {
-    switch (props.size) {
-        case 'large':
-            return 25
-        case 'medium':
-            return 20
-        case 'small':
-            return 15
-    }
-})
-
-/**
- * @description 点击cell
- * */
-const clickHandler = (e: Event, temp: CellContentVo, index: number) => {
-    if (props.disabled) return
-    emit('click', temp, index)
-    if (temp?.url) {
-        uni.navigateTo({
-            url: temp.url
-        })
-    }
-    e.stopPropagation()
-}
 </script>
 
-<style lang="scss" scoped>
-@import './index.scss';
-</style>
+<style lang="scss" scoped></style>

package/components/hy-cell/props.ts

@@ -1,31 +1,11 @@
-import type { CellContentVo } from './typing'
 import type { CSSProperties, PropType } from 'vue'
-import type HyIconProps from '../hy-icon/typing'
 
 const cellProps = {
-    /** cell列表数据 */
-    list: {
-        type: Array as PropType<Array<CellContentVo>>,
-        default: () => [],
-        required: true
-    },
-    /** 头部标题 */
-    title: String,
-    /** 是否显示标题前缀竖线 */
-    showVertical: {
-        type: Boolean,
-        default: true
-    },
     /** 是否显示cell下边框 */
     border: {
         type: Boolean,
         default: true
     },
-    /** 圆角 */
-    borderRadius: {
-        type: [String, Number],
-        default: '5px'
-    },
     /** 是否禁用cell */
     disabled: {
         type: Boolean,
@@ -44,8 +24,6 @@ const cellProps = {
         type: [String, Number],
         default: 'medium'
     },
-    /** 右侧的内容 */
-    value: String,
     /**
      * 内容是否垂直居中(主要是针对右侧的value部分)
      * @values left,center,right
@@ -54,9 +32,10 @@ const cellProps = {
         type: String,
         default: 'right'
     },
-    /** cell列表数据 */
-    rightIcon: {
-        type: Object as PropType<HyIconProps>
+    /** 是否展示右侧图标 */
+    isRightIcon: {
+        type: Boolean,
+        default: true
     },
     /**
      * 右侧箭头的方向
@@ -67,7 +46,9 @@ const cellProps = {
         default: 'right'
     },
     /** 定义需要用到的外部样式 */
-    customStyle: Object as PropType<CSSProperties>
+    customStyle: Object as PropType<CSSProperties>,
+    /** 自定义外部类名 */
+    customClass: String
 }
 
 export default cellProps

package/components/hy-cell/typing.d.ts

@@ -1,43 +1,4 @@
-import { HyApp } from '../../typing'
-import type HyIconProps from '../hy-icon/typing'
-
-export interface CellContentVo extends AnyObject {
-    /**
-     * @description 单元格左图标
-     * */
-    icon?: Partial<HyIconProps>
-
-    /**
-     * @description 单元格标题
-     * */
-    title?: string
-    /**
-     * @description 单元格副标题
-     * */
-    subhead?: string
-    /**
-     * @description 是否禁用单元格
-     * */
-    disabled?: boolean
-    /**
-     * @description 单元格右图标集合
-     * */
-    rightIcon?: Partial<HyIconProps>
-    /**
-     * @description 单元格值
-     * */
-    value?: string | number | boolean
-    /**
-     * @description 跳转页面地址
-     * */
-    url?: string
-    /**
-     * @description 单元格右侧箭头的方向，可选值为：left，up，down,right
-     * */
-    arrowDirection?: HyApp.RotateType
-}
-
 export interface ICellEmits {
-    /** 点击行触发 */
-    (e: 'click', temp: CellContentVo, index: number): void
+    /** 点击单元格触发 */
+    (e: 'click', name: string | number): void
 }

package/components/hy-cell-item/hy-cell-item.vue

@@ -0,0 +1,160 @@
+<template>
+    <view
+        :class="cellClass"
+        :hover-class="hoverClass"
+        :style="customStyle"
+        :hover-stay-time="250"
+        @tap="clickHandler"
+    >
+        <view class="hy-cell-item__left">
+            <view v-if="icon || $slots.icon" class="hy-cell-item__left--icon">
+                <!-- @slot 图标插槽 -->
+                <slot v-if="$slots.icon" name="icon" :icon="item?.icon"></slot>
+                <hy-icon
+                    v-else
+                    :size="iconSize"
+                    :name="icon?.name"
+                    :color="!!(disabled || cellConfig?.disabled.value) ? '#FFFFFF3F' : icon?.color"
+                    :bold="icon?.bold"
+                    :customPrefix="icon?.customPrefix"
+                    :imgMode="icon?.imgMode"
+                    :width="icon?.width"
+                    :height="icon?.height"
+                    :top="icon?.top"
+                    :stop="icon?.stop"
+                    :round="icon?.round"
+                    :customStyle="icon?.customStyle"
+                ></hy-icon>
+            </view>
+            <view class="hy-cell-item__left--title">
+                <!-- @slot 列表标题插槽 -->
+                <slot v-if="$slots.title" name="title" :title="title"></slot>
+                <text v-else class="hy-cell-item__left--title__text">
+                    {{ title }}
+                </text>
+                <!-- @slot 列表小标题插槽 -->
+                <slot v-if="$slots.sub" name="sub" :sub="sub"></slot>
+                <text v-else-if="sub" class="hy-cell-item__left--title__sub">
+                    {{ sub }}
+                </text>
+            </view>
+        </view>
+        <view
+            class="hy-cell-item__center"
+            :style="{
+                justifyContent:
+                    cellConfig?.arrange.value === 'left'
+                        ? 'flex-start'
+                        : cellConfig?.arrange.value === 'right'
+                          ? 'flex-end'
+                          : 'center'
+            }"
+        >
+            <!-- @slot 值内容插槽 -->
+            <slot v-if="$slots.value" name="value" :record="item"></slot>
+            <text v-else-if="value" class="hy-cell-item__center--value">
+                {{ value }}
+            </text>
+        </view>
+        <view
+            :class="[
+                'hy-cell-item__right',
+                `hy-cell-item__right--${cellConfig?.arrowDirection.value}`
+            ]"
+            v-if="cellConfig?.isRightIcon.value"
+        >
+            <!-- @slot 右边按钮插槽 -->
+            <slot v-if="$slots['right-icon']" name="right-icon" :icon="rightIcon"></slot>
+            <hy-icon
+                v-else
+                :name="rightIcon?.name || IconConfig.RIGHT"
+                :color="!!(disabled || cellConfig?.disabled.value) ? '#FFFFFF3F' : rightIcon?.color"
+                :bold="rightIcon?.bold"
+                :customPrefix="rightIcon?.customPrefix"
+                :imgMode="rightIcon?.imgMode"
+                :width="rightIcon?.width"
+                :height="rightIcon?.height"
+                :stop="rightIcon?.stop"
+                :round="rightIcon?.round"
+                :customStyle="rightIcon?.customStyle"
+                :customClass="rightIcon?.customClass"
+            ></hy-icon>
+        </view>
+    </view>
+</template>
+
+<script lang="ts">
+export default {
+    name: 'hy-cell-item',
+    options: {
+        virtualHost: true,
+        styleIsolation: 'shared'
+    }
+}
+</script>
+
+<script setup lang="ts">
+import { computed, inject } from 'vue'
+import cellItemProps from './props'
+import type { ICellContext } from './typing'
+import { IconConfig } from '../../libs'
+import type { ICellEmits } from '../hy-cell/typing'
+// 组件
+import HyIcon from '../hy-icon/hy-icon.vue'
+
+const props = defineProps(cellItemProps)
+const emit = defineEmits<ICellEmits>()
+const cellConfig = inject<ICellContext>('hy-cell')
+
+// 单元格类名
+const cellClass = computed(() => {
+    return [
+        'hy-cell-item',
+        `hy-cell-item--${cellConfig?.size.value}`,
+        cellConfig?.border.value && 'hy-border__bottom',
+        (props.disabled || cellConfig?.disabled.value) && 'hy-cell-item__disabled',
+        props.customClass
+    ]
+})
+
+// 计算什么时候出现点击状态
+const hoverClass = computed(() => {
+    if (!(props.disabled || cellConfig?.disabled.value) && cellConfig?.clickable.value) {
+        return 'hy-cell-item__clickable'
+    } else {
+        return ''
+    }
+})
+
+// 图标大小
+const iconSize = computed(() => {
+    switch (cellConfig?.size.value) {
+        case 'large':
+            return 25
+        case 'medium':
+            return 20
+        case 'small':
+            return 15
+    }
+})
+
+/**
+ * 点击cell
+ * */
+const clickHandler = (e: Event) => {
+    if (cellConfig?.disabled.value || props.disabled) return
+    if (props.stop) e.stopPropagation()
+
+    emit('click', props.name)
+    cellConfig?.onClick(props.name)
+    if (props.url) {
+        ;(uni as any)[props.linkType]({
+            url: props.url
+        })
+    }
+}
+</script>
+
+<style lang="scss" scoped>
+@import './index.scss';
+</style>

package/components/hy-cell-item/index.scss

@@ -0,0 +1,100 @@
+@use "../../libs/css/mixin.scss" as *;
+@use "../../libs/css/theme" as *;
+
+
+@include b(cell-item) {
+  @include flex(row);
+  align-items: center;
+  justify-content: space-between;
+  flex: 1;
+  background-color: $hy-background--container;
+
+  /* 大 */
+  @include m(large) {
+    font-size: $hy-font-size-lg;
+    padding: 35rpx;
+    line-height: 25px;
+  }
+
+  /* 默认 */
+  @include m(medium) {
+    font-size: $hy-font-size-base;
+    padding: 30rpx;
+    line-height: 20px;
+  }
+
+  /* 小 */
+  @include m(small) {
+    font-size: $hy-font-size-sm;
+    padding: 25rpx;
+    line-height: 15px;
+  }
+
+  /*点击状态*/
+  @include e(clickable) {
+    background-color: $hy-background--hover;
+  }
+
+  @include e(left) {
+    @include flex(row);
+    /*左边icon*/
+    @include m(icon) {
+      @include flex;
+      align-items: center;
+      margin-right: 10px;
+    }
+    /*行头部*/
+    @include m(title) {
+      margin-right: $hy-border-margin-padding-sm;
+      display: flex;
+      flex-direction: column;
+
+      /*sub值*/
+      @include e(sub) {
+        margin-top: $hy-border-margin-padding-sm;
+        color: $hy-text-color--grey;
+        font-size: 24rpx;
+      }
+    }
+  }
+
+  /*cell值*/
+  @include e(center) {
+    @include flex;
+    max-width: 90%;
+    flex: 1;
+    @include m(value) {
+      line-height: 24px;
+      color: $hy-text-color--grey;
+      margin-right: $hy-border-margin-padding-sm;
+    }
+  }
+
+  /*右边icon*/
+  @include e(right) {
+    transition: transform 0.3s;
+    :deep(.hy-icon) {
+      color: $hy-text-color--3;
+    }
+
+    @include m(up) {
+      transform: rotate(-90deg);
+    }
+
+    @include m(left) {
+      transform: rotate(180deg);
+    }
+
+    @include m(down) {
+      transform: rotate(90deg);
+    }
+  }
+
+  @include e(disabled) {
+    color: $hy-text-color--disabled;
+    background: $hy-background--disabled;
+    /* #ifndef APP-NVUE */
+    cursor: not-allowed;
+    /* #endif */
+  }
+}