hy-app 0.5.4 → 0.5.6

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

@@ -1,98 +1,4 @@
-import type { CSSProperties } from 'vue'
-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 default interface HyCellProps {
-    /**
-     * @description cell列表数据
-     * */
-    list: CellContentVo[]
-    /**
-     * @description 头部标题
-     * */
-    title?: string
-    /**
-     * @description 是否显示标题前缀竖线
-     * */
-    showVertical?: boolean
-    /**
-     * @description 是否显示cell下边框 (默认 true )
-     * */
-    border?: boolean
-    /**
-     * @description 圆角
-     * */
-    borderRadius?: string | number
-    /**
-     * @description 是否禁用cell（默认false）
-     * */
-    disabled?: boolean
-    /**
-     * @description 是否开启点击反馈(表现为点击时加上灰色背景) （默认 false ）
-     * */
-    clickable?: boolean
-    /**
-     * @description 单元的大小，可选值为 large，medium，small
-     * */
-    size?: HyApp.SizeType
-    /**
-     * @description 右侧的内容
-     * */
-    value?: string
-    /**
-     * @description 内容是否垂直居中(主要是针对右侧的value部分) (默认 false )
-     * */
-    arrange?: HyApp.LeftRightType | 'center'
-    /**
-     * @description 右侧的图标箭头icon集合
-     * */
-    rightIcon?: Partial<HyIconProps>
-    /**
-     * @description 右侧箭头的方向，可选值为：left，up，down
-     * */
-    arrowDirection?: 'left' | 'up' | 'down' | 'right'
-    /**
-     * @description 定义需要用到的外部样式
-     * */
-    customStyle?: CSSProperties
-}
-
 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 */
+  }
+}

package/components/hy-cell-item/props.ts

@@ -0,0 +1,66 @@
+import type { CSSProperties, PropType } from 'vue'
+import type { HyIconProps } from '../hy-icon/typing'
+
+const cellItemProps = {
+    /** 头部标题 */
+    title: String,
+    /** 标题下面小提示 */
+    sub: String,
+    /** 是否禁用cell */
+    disabled: {
+        type: Boolean,
+        default: false
+    },
+    /** 右侧的内容 */
+    value: String,
+    /** 图标，接收icon对象 */
+    icon: {
+        type: Object as PropType<HyIconProps>
+    },
+    /** 右边图标，默认是向左图标 */
+    rightIcon: {
+        type: Object as PropType<HyIconProps>
+    },
+    /**
+     * 右侧箭头的方向
+     * @values left,up,down
+     * */
+    arrowDirection: {
+        type: String,
+        default: 'right'
+    },
+    /**
+     * 点击后跳转的URL地址
+     * */
+    url: {
+        type: String,
+        default: ''
+    },
+    /**
+     * 链接跳转的方式，内部使用的是uview-plus封装的route方法，可能会进行拦截操作
+     * */
+    linkType: {
+        type: String,
+        default: 'navigateTo'
+    },
+    /**
+     * 点击cell是否阻止事件传播
+     * */
+    stop: {
+        type: Boolean,
+        default: true
+    },
+    /**
+     * 标识符，用于在click事件中进行返回
+     * */
+    name: {
+        type: [String, Number],
+        default: ''
+    },
+    /** 定义需要用到的外部样式 */
+    customStyle: Object as PropType<CSSProperties>,
+    /** 自定义外部类名 */
+    customClass: String
+}
+
+export default cellItemProps

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

@@ -0,0 +1,7 @@
+import type { ExtractPropTypes, ToRefs } from 'vue'
+import type cellProps from '../hy-cell/props'
+
+export interface ICellContext extends ToRefs<ExtractPropTypes<typeof cellProps>> {
+    /** 点击事件 */
+    onClick: (name: string | number) => void
+}

package/components/hy-check-button/typing.d.ts

@@ -36,49 +36,6 @@ export type FieldNamesType = {
     [key in keyof IFieldNames as IFieldNames[key]]?: string | number | boolean
 }
 
-export default interface HyCheckButtonProps {
-    /**
-     * @description 选中得值，radio是字符串，checkbox是数组
-     * */
-    modelValue: (string | number) | (string | number)[]
-    /**
-     * @description 选择列表数据
-     * */
-    columns: CheckboxColumnsVo[]
-    /**
-     * @description columns对应得键
-     * */
-    fieldNames?: IFieldNames
-    /**
-     * @description 选择单选框还是复选框
-     * */
-    selectType?: 'checkbox' | 'radio'
-    /**
-     * @description 禁用
-     * */
-    disabled?: boolean
-    /**
-     * @description 每行几列，每列等宽
-     * */
-    col?: string
-    /**
-     * @description 设置每行间距,需要加单位
-     * */
-    gap?: string
-    /**
-     * @description 标签类型info、primary、success、warning、error （默认 'primary' ）
-     * */
-    type?: HyApp.ThemeType
-    /**
-     * @description 标签的大小，large，medium，small （默认 'medium' ）
-     * */
-    size?: HyApp.SizeType
-    /**
-     * @description tag的形状，circle（两边半圆形）, square（方形，带圆角）（默认 'square' ）
-     * */
-    shape?: HyApp.ShapeType
-}
-
 export interface ICheckButtonEmits {
     /** 选择触发 */
     (e: 'change', value: any): void

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

@@ -1,76 +1,4 @@
-import type { CSSProperties } from 'vue'
-import type { CheckboxColumnsVo, IFieldNames } from '../hy-check-button/typing'
-
-export default interface HyCheckboxProps {
-    /**
-     * @description 双向绑定值，数组类型
-     * */
-    modelValue: (string | number)[] | boolean
-    /**
-     * @description 接收数组值
-     * */
-    columns: CheckboxColumnsVo[]
-    /**
-     * @description 自定义接收columns的键
-     * */
-    fieldNames?: IFieldNames
-    /**
-     * @description 形状，square为方形，circle为圆型
-     * */
-    shape?: HyApp.ShapeType
-    /**
-     * @description 复选框大小
-     * */
-    size?: HyApp.SizeType | string | number
-    /**
-     * @description 是否禁用
-     * */
-    disabled?: boolean
-    /**
-     * @description 选中状态下的颜色
-     * */
-    activeColor?: string
-    /**
-     * @description 未选中的颜色
-     * */
-    inactiveColor?: string
-    /**
-     * @description 图标的大小，单位px
-     * */
-    iconSize?: string | number
-    /**
-     * @description 图标颜色
-     * */
-    iconColor?: string
-    /**
-     * @description label的字体大小，px单位
-     * */
-    labelSize?: string | number
-    /**
-     * @description label的颜色
-     * */
-    labelColor?: string
-    /**
-     * @description 勾选图标的对齐方式，left-左边，right-右边
-     * */
-    iconPlacement?: HyApp.LeftRightType
-    /**
-     * @description 竖向配列时，是否显示下划线
-     * */
-    borderBottom?: boolean
-    /**
-     * @description 是否禁止点击提示语选中复选框
-     * */
-    labelDisabled?: boolean
-    /**
-     * @description 定义需要用到的外部样式
-     * */
-    customStyle?: CSSProperties
-    /**
-     * @description 排列方式，row-横向，column-纵向
-     * */
-    placement?: HyApp.DirectionType
-}
+import type { CheckboxColumnsVo } from '../hy-check-button/typing'
 
 export interface ICheckBoxEmits {
     /** 选择触发 */

package/components/hy-checkbox-group/props.ts

@@ -75,6 +75,6 @@ const checkboxGroupProps = {
     customStyle: {
         type: Object as PropType<CSSProperties>
     }
-}
+} as const
 
 export default checkboxGroupProps

package/components/hy-checkbox-group/typing.d.ts

@@ -1,68 +1,3 @@
-import type { CSSProperties } from 'vue'
-
-export default interface HyCheckboxGroupProps {
-    /**
-     * @description 双向绑定值，数组类型
-     * */
-    modelValue: (string | number)[]
-    /**
-     * @description 形状，square为方形，circle为圆型
-     * */
-    shape?: HyApp.ShapeType
-    /**
-     * @description 复选框大小
-     * */
-    size?: HyApp.SizeType | string | number
-    /**
-     * @description 是否禁用
-     * */
-    disabled?: boolean
-    /**
-     * @description 选中状态下的颜色
-     * */
-    activeColor?: string
-    /**
-     * @description 未选中的颜色
-     * */
-    inactiveColor?: string
-    /**
-     * @description 图标的大小，单位px
-     * */
-    iconSize?: string | number
-    /**
-     * @description 图标颜色
-     * */
-    iconColor?: string
-    /**
-     * @description label的字体大小，px单位
-     * */
-    labelSize?: string | number
-    /**
-     * @description label的颜色
-     * */
-    labelColor?: string
-    /**
-     * @description 勾选图标的对齐方式，left-左边，right-右边
-     * */
-    iconPlacement?: HyApp.LeftRightType
-    /**
-     * @description 竖向配列时，是否显示下划线
-     * */
-    borderBottom?: boolean
-    /**
-     * @description 是否禁止点击提示语选中复选框
-     * */
-    labelDisabled?: boolean
-    /**
-     * @description 定义需要用到的外部样式
-     * */
-    customStyle?: CSSProperties
-    /**
-     * @description 排列方式，row-横向，column-纵向
-     * */
-    placement?: HyApp.DirectionType
-}
-
 export interface ICheckBoxGroupEmits {
     /** 选择触发 */
     (e: 'change', temp: CheckboxColumnsVo): void

package/components/hy-checkbox-item/typing.d.ts

@@ -1,7 +1,7 @@
-import type HyCheckboxGroupProps from '../hy-checkbox-group/typing'
-import type { ToRefs } from 'vue'
+import type checkboxGroupProps from '../hy-checkbox-group/props'
+import type { ExtractPropTypes, ToRefs } from 'vue'
 
-export interface ICheckboxGroupContext extends ToRefs<HyCheckboxGroupProps> {
+export interface ICheckboxGroupContext extends ToRefs<ExtractPropTypes<typeof checkboxGroupProps>> {
     /** 设置check的状态 */
     setCheckedStatus: (name: string | number) => void
 }