hy-app 0.5.4 → 0.5.6

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

@@ -1,131 +1,3 @@
-export default interface HyCalendarProps {
-    /**
-     * @description 是否显示日历弹窗 (默认 false )
-     * */
-    show: boolean
-    /**
-     * @description 标题内容 (默认 日期选择 )
-     * */
-    title?: string
-
-    /**
-     * @description 是否显示标题  (默认 true )
-     * */
-    showTitle?: boolean
-    /**
-     * @description 是否显示副标题	(默认 true )
-     * */
-    showSubtitle?: boolean
-    /**
-     * @description 日期类型选择  single-选择单个日期，multiple-可以选择多个日期，range-选择日期范围 （ 默认 'single' )
-     * */
-    mode?: 'single' | 'range' | 'multiple'
-    /**
-     * @description mode=range时，第一个日期底部的提示文字  (默认 '开始' )
-     * */
-    startText?: string
-    /**
-     * @description mode=range时，最后一个日期底部的提示文字 (默认 '结束' )
-     * */
-    endText?: string
-    /**
-     * @description 自定义列表
-     * */
-    customList?: any[]
-    /**
-     * @description 主题色，对底部按钮和选中日期有效  (默认 ‘#3c9cff' )
-     * */
-    color?: string
-    /**
-     * @description 最小的可选日期	 (默认 0 )
-     * */
-    minDate?: number | string
-    /**
-     * @description 最大可选日期  (默认 0 )
-     * */
-    maxDate?: number | string
-    /**
-     * @description 默认选中的日期，mode为multiple或range是必须为数组格式
-     * */
-    defaultDate?: Date | string | string[] | null
-    /**
-     * @description mode=multiple时，最多可选多少个日期  (默认 	Number.MAX_SAFE_INTEGER  )
-     * */
-    maxCount?: number
-    /**
-     * @description 日期行高 (默认 56 )
-     * */
-    rowHeight?: number
-    /**
-     * @description 日期格式化函数
-     * */
-    formatter?: ((date: Date) => string) | null
-    /**
-     * @description 是否显示农历  (默认 false )
-     * */
-    showLunar?: boolean
-    /**
-     * @description 是否显示月份背景色 (默认 true )
-     * */
-    showMark?: boolean
-    /**
-     * @description 确定按钮的文字 (默认 '确定' )
-     * */
-    confirmText?: string
-    /**
-     * @description 确认按钮处于禁用状态时的文字 (默认 '确定' )
-     * */
-    confirmDisabledText?: string
-    /**
-     * @description 是否允许点击遮罩关闭日历 (默认 false )
-     * */
-    closeOnClickOverlay?: boolean
-    /**
-     * @description 是否为只读状态，只读状态下禁止选择日期 (默认 false )
-     * */
-    readonly?: boolean
-    /**
-     * @description 是否展示确认按钮
-     * */
-    showConfirm?: boolean
-    /**
-     * @description 日期区间最多可选天数，默认无限制，mode = range时有效
-     * */
-    maxRange?: number
-    /**
-     * @description 范围选择超过最多可选天数时的提示文案，mode = range时有效
-     * */
-    rangePrompt?: string | null
-    /**
-     * @description 范围选择超过最多可选天数时，是否展示提示文案，mode = range时有效 (默认 true )
-     * */
-    showRangePrompt?: boolean
-    /**
-     * @description 是否允许日期范围的起止时间为同一天，mode = range时有效 (默认 false )
-     * */
-    allowSameDay?: boolean
-    /**
-     * @description 圆角值，默认无圆角  (默认 0 )
-     * */
-    round?: number
-    /**
-     * @description 最多展示的月份数量  (默认 3 )
-     * */
-    monthNum?: number
-    /**
-     * @description 星期文案  (默认 ['一', '二', '三', '四', '五', '六', '日'] )
-     * */
-    weekText?: string[]
-    /**
-     * @description 单选与多选禁止选中的日期列表，mode!=range时有效。
-     * */
-    forbidDays?: Date[]
-    /**
-     * @description 单选与多选禁止选中的日期选择时提示
-     * */
-    forbidDaysToast?: string
-}
-
 export interface ICalendarEmits {
     /** 日期选择完成后触发，则点击确认按钮后触发 */
     (e: 'confirm', selected: string[]): void

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

@@ -2,8 +2,8 @@
     <view class="hy-card" @tap.stop="click" :class="cardClass" :style="cardStyle">
         <view
             v-if="showHead"
-            class="hy-card--head"
-            :style="[{ padding: addUnit(paddingHead || padding) }, headStyle]"
+            class="hy-card__head"
+            :style="[{ padding: paddingHead || padding }, headStyle]"
             :class="{
                 'hy-border__bottom': headBorderBottom
             }"
@@ -11,12 +11,12 @@
         >
             <!-- @slot 头部插槽 -->
             <slot v-if="$slots.header" name="header" />
-            <view v-else class="hy-card--head__flex">
-                <view class="hy-card--head__left">
+            <view v-else class="hy-card__head--flex">
+                <view class="hy-card__head--left">
                     <hy-icon
                         v-if="thumb"
                         :name="thumb"
-                        custom-class="hy-card--head__left__thumb"
+                        custom-class="hy-card__head--left__thumb"
                         :height="thumbWidth"
                         :width="thumbWidth"
                         :round="thumbCircle ? '50%' : '4px'"
@@ -24,7 +24,7 @@
                     <view>
                         <view
                             v-if="title"
-                            class="hy-card--head__left__title"
+                            class="hy-card__head--left__title"
                             :style="{
                                 fontSize: addUnit(titleSize),
                                 color: titleColor
@@ -34,7 +34,7 @@
                         </view>
                         <text
                             v-if="subTitle"
-                            class="hy-card--head__left__sub"
+                            class="hy-card__head--left__sub"
                             :style="{
                                 fontSize: addUnit(subTitleSize),
                                 color: subTitleColor
@@ -44,9 +44,9 @@
                         </text>
                     </view>
                 </view>
-                <view class="hy-card--head__right" v-if="subTitle">
+                <view class="hy-card__head--right" v-if="subTitle">
                     <text
-                        class="hy-card--head__right__text"
+                        class="hy-card__head--right__text"
                         :style="{
                             fontSize: addUnit(rightTextSize),
                             color: rightTextColor
@@ -60,7 +60,7 @@
         <view
             @tap="bodyClick"
             class="hy-card__body"
-            :style="[{ padding: addUnit(paddingBody || padding) }, bodyStyle]"
+            :style="[{ padding: paddingBody || padding }, bodyStyle]"
         >
             <!-- @slot 中间内容插槽 -->
             <slot name="body" />
@@ -69,7 +69,7 @@
             v-if="showFoot"
             class="hy-card__foot"
             @tap="footClick"
-            :style="[{ padding: $slots.footer ? addUnit(paddingFoot || padding) : 0 }, footStyle]"
+            :style="[{ padding: $slots.footer ? paddingFoot || padding : 0 }, footStyle]"
             :class="{
                 'hy-border__top': footBorderTop
             }"
@@ -113,8 +113,9 @@ const cardClass = computed(() => {
     const hasBorder = getPx(props.borderRadius) > 0
     return [
         props.border && 'hy-border',
-        props.full && 'hy-card--full',
-        hasBorder && 'hy-card--border'
+        props.full && 'hy-card__full',
+        hasBorder && 'hy-card--border',
+        props.customClass
     ].filter(Boolean)
 })
 const cardStyle = computed(() => {

package/components/hy-card/props.ts

@@ -84,8 +84,7 @@ const cardProps = {
     },
     /** 给head，body，foot的内边距 */
     padding: {
-        type: [String, Number],
-        default: 15
+        type: [String, Number]
     },
     /** 头部内边距 */
     paddingHead: [String, Number],
@@ -115,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-card/typing.d.ts

@@ -1,118 +1,5 @@
-import type { CSSProperties } from 'vue'
-
-export default interface HyCardProps {
-    /**
-     * @description 卡片与屏幕两侧是否留空隙（默认false）
-     * */
-    full?: boolean
-
-    /**
-     * @description 头部左边的标题
-     * */
-    title?: string
-    /**
-     * @description 标题颜色（默认#303133）
-     * */
-    titleColor?: string
-    /**
-     * @description 标题字体大小，单位rpx（默认15px）
-     * */
-    titleSize?: string | number
-    /**
-     * @description 头部右边的副标题
-     * */
-    subTitle?: string
-    /**
-     * @description 副标题颜色（默认#909399）
-     * */
-    subTitleColor?: string
-    /**
-     * @description 副标题字体大小（默认13px）
-     * */
-    subTitleSize?: string | number
-    /**
-     * @description 是否显示边框（默认true）
-     * */
-    border?: boolean
-    /**
-     * @description 用于标识点击了第几个卡片
-     * */
-    index?: string | number
-    /**
-     * @description 卡片与屏幕两边和上下元素的间距，需带单位，如"30px 20px"（默认15px）
-     * */
-    margin?: string
-    /**
-     * @description 卡片整体的圆角值，单位px（默认8px）
-     * */
-    borderRadius?: string | number
-    /**
-     * @description 头部自定义样式，对象形式
-     * */
-    headStyle?: CSSProperties
-    /**
-     * @description 中部自定义样式，对象形式
-     * */
-    bodyStyle?: CSSProperties
-    /**
-     * @description 底部自定义样式，对象形式
-     * */
-    footStyle?: CSSProperties
-    /**
-     * @description 是否显示头部的下边框（默认true）
-     * */
-    headBorderBottom?: boolean
-    /**
-     * @description 是否显示底部的上边框（默认true）
-     * */
-    footBorderTop?: boolean
-    /**
-     * @description 缩略图路径，如设置将显示在标题的左边，不建议使用相对路径
-     * */
-    thumb?: string
-    /**
-     * @description 缩略图的宽度，高等于宽，单位px（默认30px）
-     * */
-    thumbWidth?: string | number
-    /**
-     * @description 缩略图是否为圆形（默认false）
-     * */
-    thumbCircle?: boolean
-    /**
-     * @description // 给head，body，foot的内边距
-     * */
-    padding?: string | number
-    /**
-     * @description 头部内边距
-     * */
-    paddingHead?: string | number
-    /**
-     * @description 中部内边距
-     * */
-    paddingBody?: string | number
-    /**
-     * @description 尾部内边距
-     * */
-    paddingFoot?: string | number
-    /**
-     * @description 是否显示头部（默认true）
-     * */
-    showHead?: boolean
-    /**
-     * @description 是否显示尾部（默认true）
-     * */
-    showFoot?: boolean
-    /**
-     * @description 卡片外围阴影，字符串形式（默认true）
-     * */
-    boxShadow?: string | boolean
-    /**
-     * @description 定义需要用到的外部样式
-     * */
-    customStyle?: CSSProperties
-}
-
 type IndexVo = string | number | undefined
+
 export interface ICardEmits {
     /** 整个卡片任意位置被点击时触发 */
     (e: 'click', index: IndexVo): void

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 '@/package/components/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