hy-app 0.3.0 → 0.3.2

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

@@ -59,7 +59,10 @@
       v-if="showFoot"
       class="hy-card__foot"
       @tap="footClick"
-      :style="[{ padding: $slots.foot ? addUnit(paddingFoot || padding) : 0 }, footStyle]"
+      :style="[
+        { padding: $slots.foot ? addUnit(paddingFoot || padding) : 0 },
+        footStyle,
+      ]"
       :class="{
         'hy-border-top': footBorderTop,
       }"
@@ -72,24 +75,26 @@
 
 <script lang="ts">
 export default {
-  name: 'hy-card',
+  name: "hy-card",
   options: {
     addGlobalClass: true,
     virtualHost: true,
-    styleIsolation: 'shared',
+    styleIsolation: "shared",
   },
-}
+};
 </script>
 
 <script setup lang="ts">
+import { computed } from "vue";
+import type { CSSProperties, PropType } from "vue";
+import type { ICardEmits } from "./typing";
+import { addUnit } from "../../utils";
+
 /**
  * 卡片组件一般用于多个列表条目，且风格统一的场景。
  * @displayName hy-card
  */
-defineOptions({})
-import type { ICardEmits } from './typing'
-import { addUnit } from '../../utils'
-import { computed, type CSSProperties, PropType, toRefs } from 'vue'
+defineOptions({});
 
 // const props = withDefaults(defineProps<IProps>(), defaultProps);
 const props = defineProps({
@@ -105,14 +110,14 @@ const props = defineProps({
   /** 标题字体大小，单位rpx */
   titleSize: {
     type: String,
-    default: '18px',
+    default: "18px",
   },
   /** 头部右边的副标题 */
   subTitle: String,
   /** 副标题颜色 */
   subTitleColor: {
     type: String,
-    default: '#909399',
+    default: "#909399",
   },
   /** 副标题字体大小 */
   subTitleSize: {
@@ -129,7 +134,7 @@ const props = defineProps({
   /** 卡片与屏幕两边和上下元素的间距，需带单位，如"30px 20px" */
   margin: {
     type: String,
-    default: '15px',
+    default: "15px",
   },
   /** 卡片整体的圆角值，单位px */
   borderRadius: {
@@ -181,7 +186,7 @@ const props = defineProps({
   },
   /** 卡片外围阴影，字符串形式 */
   boxShadow: {
-    type: Boolean,
+    type: [Boolean, String],
     default: true,
   },
   /** 头部自定义样式，对象形式 */
@@ -191,59 +196,61 @@ const props = defineProps({
   /** 底部自定义样式 */
   footStyle: Object as unknown as PropType<CSSProperties>,
   /** 定义需要用到的外部样式 */
-  customStyle: Object as unknown as PropType<CSSProperties>,
-})
-const { border, full, borderRadius, margin, boxShadow, customStyle } = toRefs(props)
-const emit = defineEmits<ICardEmits>()
+  customStyle: {
+    type: Object as PropType<CSSProperties>,
+    default: () => {},
+  },
+});
+const emit = defineEmits<ICardEmits>();
 
+const hasBorder =
+  +(props.borderRadius.toString().replace(/\D.*$/, "") || 0) > 0;
 const cardClass = computed(() => {
   return [
-    border.value && 'hy-border',
-    full.value && 'hy-border',
-    border.value && 'hy-card-full',
-    (typeof borderRadius.value === 'number'
-      ? borderRadius.value
-      : parseInt(borderRadius.value.replace(/px|rpx|vw|vh/g, '')) > 0) && 'hy-card--border',
-  ].filter(Boolean)
-})
+    props.border && "hy-border",
+    props.full && "hy-border",
+    props.border && "hy-card-full",
+    hasBorder && "hy-card--border",
+  ].filter(Boolean);
+});
 const cardStyle = computed(() => {
   return Object.assign(
     {
-      borderRadius: addUnit(borderRadius.value),
-      margin: margin.value,
-      boxShadow: boxShadow.value
-        ? typeof boxShadow.value === 'boolean'
-          ? '0 0 10rpx 4rpx rgba(0, 0, 0, 0.16)'
-          : boxShadow.value
-        : '',
+      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
+        : "",
     },
-    customStyle.value,
-  )
-})
+    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/typing.d.ts

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

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

@@ -9,7 +9,10 @@
         <text class="hy-cell--title__text">{{ title }}</text>
       </slot>
     </view>
-    <view class="hy-cell__body" :style="{ 'border-radius': addUnit(borderRadius) }">
+    <view
+      class="hy-cell__body"
+      :style="{ 'border-radius': addUnit(borderRadius) }"
+    >
       <!-- @slot 整体插槽 -->
       <slot>
         <template v-for="(item, i) in list" :key="i">
@@ -18,18 +21,24 @@
             :hover-class="containerClass(item)"
             :hover-stay-time="250"
             :style="{
-              borderBottom: border && i !== list.length - 1 ? '1rpx solid #c8c7cc66' : '',
+              borderBottom:
+                border && i !== list.length - 1 ? '1rpx solid #c8c7cc66' : '',
             }"
             @tap="clickHandler($event, item, i)"
           >
             <view class="hy-cell__body--container__content">
-              <view class="hy-cell__body--container__content-icon">
+              <view
+                v-if="item?.icon?.name || $slots.icon"
+                class="hy-cell__body--container__content-icon"
+              >
                 <!-- @slot 图标插槽 -->
                 <slot name="icon" :icon="item?.icon">
                   <HyIcon
                     :size="iconSize"
                     :name="item?.icon?.name"
-                    :color="disabled || item?.disabled ? '#c0c0c0' : item?.icon?.color"
+                    :color="
+                      disabled || item?.disabled ? '#c0c0c0' : item?.icon?.color
+                    "
                     :bold="item?.icon?.bold"
                     :customPrefix="item?.icon?.customPrefix"
                     :imgMode="item?.icon?.imgMode"
@@ -48,7 +57,9 @@
                 <slot name="cell-title" :title="item?.title">
                   <text
                     class="hy-cell__body--container__content-title--text"
-                    :class="[(disabled || item?.disabled) && 'hy-cell--disabled']"
+                    :class="[
+                      (disabled || item?.disabled) && 'hy-cell--disabled',
+                    ]"
                   >
                     {{ item?.title }}
                   </text>
@@ -68,7 +79,11 @@
               class="hy-cell__body--container__center"
               :style="{
                 justifyContent:
-                  arrange === 'left' ? 'flex-start' : arrange === 'right' ? 'flex-end' : 'center',
+                  arrange === 'left'
+                    ? 'flex-start'
+                    : arrange === 'right'
+                      ? 'flex-end'
+                      : 'center',
               }"
             >
               <!-- @slot 值内容插槽 -->
@@ -91,21 +106,27 @@
               <!-- @slot 右边按钮插槽 -->
               <slot name="right-icon" :icon="item?.rightIcon || rightIcon">
                 <HyIcon
-                  :name="item?.rightIcon?.name || rightIcon?.name || IconConfig.RIGHT"
+                  :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"
+                  :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"
+                  :customStyle="
+                    item?.rightIcon?.customStyle || rightIcon?.customStyle
+                  "
                 ></HyIcon>
               </slot>
             </view>
@@ -121,31 +142,30 @@
 
 <script lang="ts">
 export default {
-  name: 'hy-cell',
+  name: "hy-cell",
   options: {
     virtualHost: true,
-    styleIsolation: 'shared',
+    styleIsolation: "shared",
   },
-}
+};
 </script>
 
 <script setup lang="ts">
-import { computed, toRefs } from 'vue'
-import type { CSSProperties, PropType } from 'vue'
-import type { ICellEmits } from './typing'
-import type { CellContentVo } from './typing'
-import { IconConfig } from '../../config'
-import { addUnit } from '../../utils'
-
+import { computed } from "vue";
+import type { CSSProperties, PropType } from "vue";
+import type { ICellEmits } from "./typing";
+import type { CellContentVo } from "./typing";
+import { IconConfig } from "../../config";
+import { addUnit } from "../../utils";
 // 组件
-import HyIcon from '../hy-icon/hy-icon.vue'
-import type HyIconProps from '../hy-icon/typing'
+import HyIcon from "../hy-icon/hy-icon.vue";
+import type HyIconProps from "../hy-icon/typing";
 
 /**
  * cell单元格一般用于一组列表的情况，比如个人中心页，设置页等
  * @displayName hy-cell
  */
-defineOptions({})
+defineOptions({});
 
 // const props = withDefaults(defineProps<IProps>(), defaultProps);
 const props = defineProps({
@@ -170,7 +190,7 @@ const props = defineProps({
   /** 圆角 */
   borderRadius: {
     type: [String, Number],
-    default: '5px',
+    default: "5px",
   },
   /** 是否禁用cell */
   disabled: {
@@ -188,7 +208,7 @@ const props = defineProps({
    * */
   size: {
     type: [String, Number],
-    default: 'medium',
+    default: "medium",
   },
   /** 右侧的内容 */
   value: String,
@@ -198,7 +218,7 @@ const props = defineProps({
    * */
   arrange: {
     type: String,
-    default: 'right',
+    default: "right",
   },
   /** cell列表数据 */
   rightIcon: {
@@ -210,13 +230,12 @@ const props = defineProps({
    * */
   arrowDirection: {
     type: String,
-    default: 'right',
+    default: "right",
   },
   /** 定义需要用到的外部样式 */
   customStyle: Object as PropType<CSSProperties>,
-})
-const { size, disabled, clickable, borderRadius } = toRefs(props)
-const emit = defineEmits<ICellEmits>()
+});
+const emit = defineEmits<ICellEmits>();
 
 /**
  * @description 计算什么时候出现点击状态
@@ -224,45 +243,48 @@ const emit = defineEmits<ICellEmits>()
 const containerClass = computed(() => {
   return (temp: CellContentVo): string => {
     return [
-      !disabled.value &&
+      !props.disabled &&
         !temp?.disabled &&
-        clickable.value &&
-        'hy-cell__body--container__clickable',
+        props.clickable &&
+        "hy-cell__body--container__clickable",
     ]
       .filter(Boolean)
-      .join()
-  }
-})
+      .join();
+  };
+});
 const ItemClass = computed(() => {
-  return ['hy-cell__body--container', `hy-cell__body--container__${size.value}`]
-})
+  return [
+    "hy-cell__body--container",
+    `hy-cell__body--container__${props.size}`,
+  ];
+});
 
 const iconSize = computed(() => {
-  switch (size.value) {
-    case 'large':
-      return 25
-    case 'medium':
-      return 20
-    case 'small':
-      return 15
+  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 (disabled.value) return
-  emit('click', temp, index)
+  if (props.disabled) return;
+  emit("click", temp, index);
   if (temp?.url) {
     uni.navigateTo({
       url: temp.url,
-    })
+    });
   }
-  e.stopPropagation()
-}
+  e.stopPropagation();
+};
 </script>
 
 <style lang="scss" scoped>
-@import './index.scss';
+@import "./index.scss";
 </style>