hy-app 0.2.13 → 0.2.15

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

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

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

@@ -44,6 +44,7 @@
           </text>
         </view>
       </view>
+      <!-- @slot 头部插槽 -->
       <slot name="header" v-else />
     </view>
     <view
@@ -51,96 +52,198 @@
       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.foot ? addUnit(paddingFoot || padding) : 0 },
-        footStyle,
-      ]"
+      :style="[{ padding: $slots.foot ? addUnit(paddingFoot || padding) : 0 }, footStyle]"
       :class="{
         'hy-border-top': footBorderTop,
       }"
     >
+      <!-- @slot 底部插槽 -->
       <slot name="footer" />
     </view>
   </view>
 </template>
 
 <script lang="ts">
+/**
+ * 卡片组件一般用于多个列表条目，且风格统一的场景。
+ * @displayName hy-card
+ */
+defineOptions({})
 export default {
   name: 'hy-card',
   options: {
     addGlobalClass: true,
     virtualHost: true,
-    styleIsolation: 'shared'
-  }
+    styleIsolation: 'shared',
+  },
 }
 </script>
 
 <script setup lang="ts">
-import defaultProps from "./props";
-import type IProps from "./typing";
-import { addUnit } from "../../utils";
-import { computed, toRefs } from "vue";
+import type { ICardEmits } from './typing'
+import { addUnit } from '../../utils'
+import { computed, type CSSProperties, PropType, toRefs } from 'vue'
 
-const props = withDefaults(defineProps<IProps>(), defaultProps);
-const { border, full, borderRadius, margin, boxShadow, customStyle } =
-  toRefs(props);
-const emit = defineEmits(["click", "head-click", "body-click", "foot-click"]);
+// const props = withDefaults(defineProps<IProps>(), defaultProps);
+const props = defineProps({
+  /** 卡片与屏幕两侧是否留空隙 */
+  full: {
+    type: Boolean,
+    default: false,
+  },
+  /** 头部左边的标题 */
+  title: String,
+  /** 标题颜色 */
+  titleColor: String,
+  /** 标题字体大小，单位rpx */
+  titleSize: {
+    type: String,
+    default: '18px',
+  },
+  /** 头部右边的副标题 */
+  subTitle: String,
+  /** 副标题颜色 */
+  subTitleColor: {
+    type: String,
+    default: '#909399',
+  },
+  /** 副标题字体大小 */
+  subTitleSize: {
+    type: [String, Number],
+    default: 13,
+  },
+  /** 是否显示边框 */
+  border: {
+    type: Boolean,
+    default: true,
+  },
+  /** 用于标识点击了第几个卡片 */
+  index: [String, Number],
+  /** 卡片与屏幕两边和上下元素的间距，需带单位，如"30px 20px" */
+  margin: {
+    type: String,
+    default: '15px',
+  },
+  /** 卡片整体的圆角值，单位px */
+  borderRadius: {
+    type: [String, Number],
+    default: 8,
+  },
+  /** 是否显示头部的下边框 */
+  headBorderBottom: {
+    type: Boolean,
+    default: true,
+  },
+  /** 是否显示底部的上边框 */
+  footBorderTop: {
+    type: Boolean,
+    default: true,
+  },
+  /** 缩略图路径，如设置将显示在标题的左边，不建议使用相对路径 */
+  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,
+    default: true,
+  },
+  /** 头部自定义样式，对象形式 */
+  headStyle: Object as unknown as PropType<CSSProperties>,
+  /** 中部自定义样式 */
+  bodyStyle: Object as unknown as PropType<CSSProperties>,
+  /** 底部自定义样式 */
+  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>()
 
 const cardClass = computed(() => {
   return [
-    border.value && "hy-border",
-    full.value && "hy-border",
-    border.value && "hy-card-full",
-    (typeof borderRadius.value === "number"
+    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);
-});
+      : parseInt(borderRadius.value.replace(/px|rpx|vw|vh/g, '')) > 0) && '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)"
+        ? typeof boxShadow.value === 'boolean'
+          ? '0 0 10rpx 4rpx rgba(0, 0, 0, 0.16)'
           : boxShadow.value
-        : "",
+        : '',
     },
     customStyle.value,
-  );
-});
+  )
+})
 
 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,112 +1,123 @@
-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
+}
+
+export interface ICardEmits {
+  /** 整个卡片任意位置被点击时触发 */
+  (e: 'click', index: number): void
+  /** 卡片头部被点击时触发 */
+  (e: 'head-click', index: number): void
+  /** 卡片主体部分被点击时触发 */
+  (e: 'body-click', index: number): void
+  /** 卡片底部部分被点击时触发 */
+  (e: 'foot-click', index: number): void
 }