hy-app 0.4.15 → 0.5.0

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

@@ -1,282 +1,160 @@
 <template>
-  <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-border__bottom': headBorderBottom,
-      }"
-      @tap="headClick"
-    >
-      <!-- @slot 头部插槽 -->
-      <slot v-if="$slots.header" name="header" />
-      <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"
-            :height="thumbWidth"
-            :width="thumbWidth"
-            :round="thumbCircle ? '50%' : '4px'"
-          ></hy-icon>
-          <view>
-            <view
-              v-if="title"
-              class="hy-card--head__left__title"
-              :style="{
-                fontSize: addUnit(titleSize),
-                color: titleColor,
-              }"
-            >
-              {{ title }}
+    <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-border__bottom': headBorderBottom
+            }"
+            @tap="headClick"
+        >
+            <!-- @slot 头部插槽 -->
+            <slot v-if="$slots.header" name="header" />
+            <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"
+                        :height="thumbWidth"
+                        :width="thumbWidth"
+                        :round="thumbCircle ? '50%' : '4px'"
+                    ></hy-icon>
+                    <view>
+                        <view
+                            v-if="title"
+                            class="hy-card--head__left__title"
+                            :style="{
+                                fontSize: addUnit(titleSize),
+                                color: titleColor
+                            }"
+                        >
+                            {{ title }}
+                        </view>
+                        <text
+                            v-if="subTitle"
+                            class="hy-card--head__left__sub"
+                            :style="{
+                                fontSize: addUnit(subTitleSize),
+                                color: subTitleColor
+                            }"
+                        >
+                            {{ subTitle }}
+                        </text>
+                    </view>
+                </view>
+                <view class="hy-card--head__right" v-if="subTitle">
+                    <text
+                        class="hy-card--head__right__text"
+                        :style="{
+                            fontSize: addUnit(rightTextSize),
+                            color: rightTextColor
+                        }"
+                    >
+                        {{ rightText }}
+                    </text>
+                </view>
             </view>
-            <text
-              v-if="subTitle"
-              class="hy-card--head__left__sub"
-              :style="{
-                fontSize: addUnit(subTitleSize),
-                color: subTitleColor,
-              }"
-            >
-              {{ subTitle }}
-            </text>
-          </view>
         </view>
-        <view class="hy-card--head__right" v-if="subTitle">
-          <text
-            class="hy-card--head__right__text"
-            :style="{
-              fontSize: addUnit(rightTextSize),
-              color: rightTextColor,
+        <view
+            @tap="bodyClick"
+            class="hy-card__body"
+            :style="[{ padding: addUnit(paddingBody || padding) }, bodyStyle]"
+        >
+            <!-- @slot 中间内容插槽 -->
+            <slot name="body" />
+        </view>
+        <view
+            v-if="showFoot"
+            class="hy-card__foot"
+            @tap="footClick"
+            :style="[{ padding: $slots.footer ? addUnit(paddingFoot || padding) : 0 }, footStyle]"
+            :class="{
+                'hy-border__top': footBorderTop
             }"
-          >
-            {{ rightText }}
-          </text>
+        >
+            <!-- @slot 底部插槽 -->
+            <slot name="footer" />
         </view>
-      </view>
-    </view>
-    <view
-      @tap="bodyClick"
-      class="hy-card__body"
-      :style="[{ padding: addUnit(paddingBody || padding) }, bodyStyle]"
-    >
-      <!-- @slot 中间内容插槽 -->
-      <slot name="body" />
     </view>
-    <view
-      v-if="showFoot"
-      class="hy-card__foot"
-      @tap="footClick"
-      :style="[
-        { padding: $slots.footer ? addUnit(paddingFoot || padding) : 0 },
-        footStyle,
-      ]"
-      :class="{
-        'hy-border__top': footBorderTop,
-      }"
-    >
-      <!-- @slot 底部插槽 -->
-      <slot name="footer" />
-    </view>
-  </view>
 </template>
 
 <script lang="ts">
 export default {
-  name: "hy-card",
-  options: {
-    addGlobalClass: true,
-    virtualHost: true,
-    styleIsolation: "shared",
-  },
-};
+    name: 'hy-card',
+    options: {
+        addGlobalClass: true,
+        virtualHost: true,
+        styleIsolation: 'shared'
+    }
+}
 </script>
 
 <script setup lang="ts">
-import { computed } from "vue";
-import type { CSSProperties, PropType } from "vue";
-import type { ICardEmits } from "./typing";
-import { addUnit, getPx } from "../../libs";
-
+import { computed } from 'vue'
+import type { ICardEmits } from './typing'
+import { addUnit, getPx } from '../../libs'
+import cardProps from './props'
 // 组件
-import HyIcon from "../hy-icon/hy-icon.vue";
+import HyIcon from '../hy-icon/hy-icon.vue'
 
 /**
  * 卡片组件一般用于多个列表条目，且风格统一的场景。
  * @displayName hy-card
  */
-defineOptions({});
+defineOptions({})
 
 // const props = withDefaults(defineProps<IProps>(), defaultProps);
-const props = defineProps({
-  /** 卡片与屏幕两侧是否留空隙,false-不留缝隙，true-有margin */
-  full: {
-    type: Boolean,
-    default: false,
-  },
-  /** 头部左边的标题 */
-  title: String,
-  /** 标题颜色 */
-  titleColor: String,
-  /** 标题字体大小，单位rpx */
-  titleSize: {
-    type: String,
-    default: "18px",
-  },
-  /** 头部右边的副标题 */
-  subTitle: String,
-  /** 副标题颜色 */
-  subTitleColor: {
-    type: String,
-    default: "",
-  },
-  /** 副标题字体大小 */
-  subTitleSize: {
-    type: [String, Number],
-    default: 13,
-  },
-  /** 右边内容 */
-  rightText: {
-    type: String,
-    default: "",
-  },
-  /** 右边内容颜色 */
-  rightTextColor: {
-    type: String,
-    default: "",
-  },
-  /** 右边内容字体大小 */
-  rightTextSize: {
-    type: [String, Number],
-    default: "",
-  },
-  /** 是否显示边框 */
-  border: {
-    type: Boolean,
-    default: false,
-  },
-  /** 用于标识点击了第几个卡片 */
-  index: [String, Number],
-  /** 卡片与屏幕两边和上下元素的间距，需带单位，如"30px 20px" */
-  margin: {
-    type: String,
-    default: "0 0 20rpx",
-  },
-  /** 卡片整体的圆角值，单位px */
-  borderRadius: {
-    type: [String, Number],
-    default: 8,
-  },
-  /** 是否显示头部的下边框 */
-  headBorderBottom: {
-    type: Boolean,
-    default: false,
-  },
-  /** 是否显示底部的上边框 */
-  footBorderTop: {
-    type: Boolean,
-    default: false,
-  },
-  /** 缩略图路径，如设置将显示在标题的左边，不建议使用相对路径 */
-  thumb: String,
-  /** 缩略图的宽度，高等于宽，单位px */
-  thumbWidth: {
-    type: [String, Number],
-    default: 30,
-  },
-  /** 缩略图是否为圆形 */
-  thumbCircle: {
-    type: Boolean,
-    default: false,
-  },
-  /** 给head，body，foot的内边距 */
-  padding: {
-    type: [String, Number],
-    default: 15,
-  },
-  /** 头部内边距 */
-  paddingHead: [String, Number],
-  /** 中部内边距 */
-  paddingBody: [String, Number],
-  /** 尾部内边距 */
-  paddingFoot: [String, Number],
-  /** 是否显示头部 */
-  showHead: {
-    type: Boolean,
-    default: true,
-  },
-  /** 是否显示尾部 */
-  showFoot: {
-    type: Boolean,
-    default: true,
-  },
-  /** 卡片外围阴影，字符串形式 */
-  boxShadow: {
-    type: [Boolean, String],
-    default: true,
-  },
-  /** 头部自定义样式，对象形式 */
-  headStyle: Object as unknown as PropType<CSSProperties>,
-  /** 中部自定义样式 */
-  bodyStyle: Object as unknown as PropType<CSSProperties>,
-  /** 底部自定义样式 */
-  footStyle: Object as unknown as PropType<CSSProperties>,
-  /** 定义需要用到的外部样式 */
-  customStyle: {
-    type: Object as PropType<CSSProperties>,
-    default: () => {},
-  },
-});
-const emit = defineEmits<ICardEmits>();
+const props = defineProps(cardProps)
+const emit = defineEmits<ICardEmits>()
 
 const cardClass = computed(() => {
-  const hasBorder = getPx(props.borderRadius) > 0;
-  return [
-    props.border && "hy-border",
-    props.full && "hy-card--full",
-    hasBorder && "hy-card--border",
-  ].filter(Boolean);
-});
+    const hasBorder = getPx(props.borderRadius) > 0
+    return [
+        props.border && 'hy-border',
+        props.full && 'hy-card--full',
+        hasBorder && 'hy-card--border'
+    ].filter(Boolean)
+})
 const cardStyle = computed(() => {
-  return Object.assign(
-    {
-      borderRadius: addUnit(props.borderRadius),
-      margin: props.margin,
-      boxShadow: props.boxShadow
-        ? typeof props.boxShadow === "boolean"
-          ? "0 0 10rpx 4rpx rgba(0, 0, 0, 0.16)"
-          : props.boxShadow
-        : "",
-    },
-    props.customStyle,
-  );
-});
+    return Object.assign(
+        {
+            borderRadius: addUnit(props.borderRadius),
+            margin: props.margin,
+            boxShadow: props.boxShadow
+                ? typeof props.boxShadow === 'boolean'
+                    ? '0 0 10rpx 4rpx rgba(0, 0, 0, 0.16)'
+                    : props.boxShadow
+                : ''
+        },
+        props.customStyle
+    )
+})
 
 const click = () => {
-  emit("click", props.index);
-};
+    emit('click', props.index)
+}
 /**
  * @description 点击头部
  * */
 const headClick = () => {
-  emit("head-click", props.index);
-};
+    emit('head-click', props.index)
+}
 /**
  * @description 点击身体
  * */
 const bodyClick = () => {
-  emit("body-click", props.index);
-};
+    emit('body-click', props.index)
+}
 /**
  * @description 点击尾部
  * */
 const footClick = () => {
-  emit("foot-click", props.index);
-};
+    emit('foot-click', props.index)
+}
 </script>
 
 <style lang="scss" scoped>
-@import "./index.scss";
+@import './index.scss';
 </style>

package/components/hy-card/index.scss

@@ -10,10 +10,8 @@
   box-sizing: border-box;
 
   @include m(full) {
-    // 如果是与屏幕之间不留空隙，应该设置左右边距为0
     margin-left: $hy-border-margin-padding-base !important;
     margin-right: $hy-border-margin-padding-base !important;
-    width: 100%;
   }
 
   @include m(border) {
@@ -41,6 +39,7 @@
 
       @include e(title) {
         max-width: 450rpx;
+        font-size: $hy-font-size-base;
         @include lineEllipsis;
       }
 

package/components/hy-card/props.ts

@@ -1,29 +1,124 @@
-import type IProps from "./typing";
+import type IProps from './typing'
+import type { CSSProperties, PropType } from 'vue'
 
-const defaultProps: IProps = {
-  full: false,
-  title: "",
-  titleColor: "",
-  titleSize: "18px",
-  subTitle: "",
-  subTitleColor: "#909399",
-  subTitleSize: "13",
-  border: true,
-  index: "",
-  margin: "15px",
-  borderRadius: "8px",
-  headBorderBottom: true,
-  footBorderTop: true,
-  thumb: "",
-  thumbWidth: "30px",
-  thumbCircle: false,
-  padding: "15px",
-  paddingHead: "",
-  paddingBody: "",
-  paddingFoot: "",
-  showHead: true,
-  showFoot: true,
-  boxShadow: true,
-};
+const cardProps = {
+    /** 卡片与屏幕两侧是否留空隙,false-不留缝隙，true-有margin */
+    full: {
+        type: Boolean,
+        default: false
+    },
+    /** 头部左边的标题 */
+    title: String,
+    /** 标题颜色 */
+    titleColor: String,
+    /** 标题字体大小，单位rpx */
+    titleSize: {
+        type: String,
+        default: ''
+    },
+    /** 头部右边的副标题 */
+    subTitle: String,
+    /** 副标题颜色 */
+    subTitleColor: {
+        type: String,
+        default: ''
+    },
+    /** 副标题字体大小 */
+    subTitleSize: {
+        type: [String, Number],
+        default: ''
+    },
+    /** 右边内容 */
+    rightText: {
+        type: String,
+        default: ''
+    },
+    /** 右边内容颜色 */
+    rightTextColor: {
+        type: String,
+        default: ''
+    },
+    /** 右边内容字体大小 */
+    rightTextSize: {
+        type: [String, Number],
+        default: ''
+    },
+    /** 是否显示边框 */
+    border: {
+        type: Boolean,
+        default: false
+    },
+    /** 用于标识点击了第几个卡片 */
+    index: [String, Number],
+    /** 卡片与屏幕两边和上下元素的间距，需带单位，如"30px 20px" */
+    margin: {
+        type: String,
+        default: '0 0 20rpx'
+    },
+    /** 卡片整体的圆角值，单位px */
+    borderRadius: {
+        type: [String, Number],
+        default: 8
+    },
+    /** 是否显示头部的下边框 */
+    headBorderBottom: {
+        type: Boolean,
+        default: false
+    },
+    /** 是否显示底部的上边框 */
+    footBorderTop: {
+        type: Boolean,
+        default: false
+    },
+    /** 缩略图路径，如设置将显示在标题的左边，不建议使用相对路径 */
+    thumb: String,
+    /** 缩略图的宽度，高等于宽，单位px */
+    thumbWidth: {
+        type: [String, Number],
+        default: 30
+    },
+    /** 缩略图是否为圆形 */
+    thumbCircle: {
+        type: Boolean,
+        default: false
+    },
+    /** 给head，body，foot的内边距 */
+    padding: {
+        type: [String, Number],
+        default: 15
+    },
+    /** 头部内边距 */
+    paddingHead: [String, Number],
+    /** 中部内边距 */
+    paddingBody: [String, Number],
+    /** 尾部内边距 */
+    paddingFoot: [String, Number],
+    /** 是否显示头部 */
+    showHead: {
+        type: Boolean,
+        default: true
+    },
+    /** 是否显示尾部 */
+    showFoot: {
+        type: Boolean,
+        default: true
+    },
+    /** 卡片外围阴影，字符串形式 */
+    boxShadow: {
+        type: [Boolean, String],
+        default: true
+    },
+    /** 头部自定义样式，对象形式 */
+    headStyle: Object as PropType<CSSProperties>,
+    /** 中部自定义样式 */
+    bodyStyle: Object as PropType<CSSProperties>,
+    /** 底部自定义样式 */
+    footStyle: Object as PropType<CSSProperties>,
+    /** 定义需要用到的外部样式 */
+    customStyle: {
+        type: Object as PropType<CSSProperties>,
+        default: () => {}
+    }
+}
 
-export default defaultProps;
+export default cardProps