hy-app 0.2.13 → 0.2.15

package/components/hy-datetime-picker/typing.d.ts

@@ -1,128 +1,138 @@
-import { DateModeEnum } from "../../typing";
-import type { CSSProperties } from "vue";
-import type HyInputProps from "../hy-input/typing";
+import { DateModeEnum } from '../../typing'
+import type { CSSProperties } from 'vue'
+import type HyInputProps from '../hy-input/typing'
+import HyApp from 'hy-app'
 
 export default interface HyDatetimeProps {
   /**
    * @description 用于控制选择器的弹出和收起 ( 默认 false )
    * */
-  show?: boolean;
+  show?: boolean
   /**
    * @description 弹出层弹出方向
    * */
-  popupMode?: HyApp.LayoutType;
+  popupMode?: HyApp.LayoutType
   /**
    * @description 是否显示顶部的操作栏  ( 默认 true )
    * */
-  showToolbar?: boolean;
+  showToolbar?: boolean
   /**
    * @description 绑定值
    * @note 类型有问题,需要调整（加了Date类型）
    * */
-  modelValue: string | number | Date;
+  modelValue: string | number | Date
   /**
    * @description 顶部标题
    * */
-  title?: string;
+  title?: string
   /**
    * @description 展示格式 mode=date为日期选择，mode=time为时间选择，mode=year-month为年月选择，mode=datetime为日期时间选择  ( 默认 ‘datetime )
    * */
-  mode?: DateModeEnum;
+  mode?: DateModeEnum
   /**
    * @description 可选的最大时间  默认值为后10年
    * */
-  maxDate?: number;
+  maxDate?: number
   /**
    * @description 可选的最小时间  默认值为前10年
    * */
-  minDate?: number;
+  minDate?: number
   /**
    * @description 可选的最小小时，仅mode=time有效
    * */
-  minHour?: number;
+  minHour?: number
   /**
    * @description 可选的最大小时，仅mode=time有效
    * */
-  maxHour?: number;
+  maxHour?: number
   /**
    * @description 可选的最小分钟，仅mode=time有效
    * */
-  minMinute?: number;
+  minMinute?: number
   /**
    * @description 可选的最大分钟，仅mode=time有效
    * */
-  maxMinute?: number;
+  maxMinute?: number
   /**
    * @description 选项过滤函数
    * */
-  filter?: null | ((type: string, values: string[]) => string[]);
+  filter?: null | ((type: string, values: string[]) => string[])
   /**
    * @description 选项格式化函数
    * */
-  formatter?: null | ((type: string, value: string) => string);
+  formatter?: null | ((type: string, value: string) => string)
   /**
    * @description 是否显示加载中状态   ( 默认 false )
    * */
-  loading?: boolean;
+  loading?: boolean
   /**
    * @description 各列中，单个选项的高度   ( 默认 44 )
    * */
-  itemHeight?: number;
+  itemHeight?: number
   /**
    * @description 取消按钮的文字  ( 默认 '取消' )
    * */
-  cancelText?: string;
+  cancelText?: string
   /**
    * @description 确认按钮的文字  ( 默认 '确认' )
    * */
-  confirmText?: string;
+  confirmText?: string
   /**
    * @description 取消按钮的颜色  ( 默认 '#909193' )
    * */
-  cancelColor?: string;
+  cancelColor?: string
   /**
    * @description 确认按钮的颜色  ( 默认 '#3c9cff' )
    * */
-  confirmColor?: string;
+  confirmColor?: string
   /**
    * @description 每列中可见选项的数量  ( 默认 5 )
    * */
-  visibleItemCount?: number;
+  visibleItemCount?: number
   /**
    * @description 是否允许点击遮罩关闭选择器  ( 默认 false )
    * */
-  closeOnClickOverlay?: boolean;
+  closeOnClickOverlay?: boolean
   /**
    * @description 各列的默认索引
    * @note 类型有问题,需要调整
    * */
-  defaultIndex?: Array<any>;
+  defaultIndex?: Array<any>
   /**
    * @description 输入框是否显示边框 ( 默认 false )
    * */
-  hasInput?: boolean;
+  hasInput?: boolean
   /**
    * @description 输入框集合属性
    * */
-  input?: Partial<HyInputProps>;
+  input?: Partial<HyInputProps>
   /**
    * @description 自定义时间格式
    * */
-  format?: string;
+  format?: string
   /**
    * @description 右边插槽
    * */
-  toolbarRightSlot?: boolean;
-  /**
-   * @description 输入框形状
-   * */
-  shape?: HyApp.ShapeType;
-  /**
-   * @description 输入框边框
-   * */
-  border?: HyApp.BorderType;
+  toolbarRightSlot?: boolean
   /**
    * @description 自定义输入框外部样式
    * */
-  customStyle?: CSSProperties;
+  customStyle?: CSSProperties
+}
+
+type IParam = {
+  value: string | number
+  mode: DateModeEnum
+}
+export interface IDatetimePickerEmits {
+  /** 关闭选择器时触发 */
+  (e: 'close'): void
+  /** 点击取消按钮 */
+  (e: 'cancel'): void
+  /** 点击确定按钮，返回当前选择的值 */
+  (e: 'confirm', param: IParam): void
+  /** 当选择值变化时触发 */
+  (e: 'change'): void
+  /** 更新值触发 */
+  (e: 'update:modelValue', value: IParam['value']): void
 }

package/components/hy-divider/hy-divider.vue

@@ -1,5 +1,5 @@
 <template>
-  <view class="hy-divider" :style="dividerStyle" @tap="clickHandler">
+  <view :class="['hy-divider', customClass]" :style="dividerStyle">
     <HyLine
       :color="lineColor"
       :customStyle="leftLineStyle"
@@ -9,9 +9,7 @@
     ></HyLine>
     <HyLoading :show="text === 'loading'" size="18" mode="spinner"></HyLoading>
     <text v-if="dot" class="hy-divider__dot">●</text>
-    <text v-else-if="text" class="hy-divider__text" :style="textStyle">{{
-      content
-    }}</text>
+    <text v-else-if="text" class="hy-divider__text" :style="textStyle">{{ content }}</text>
     <HyLine
       :color="lineColor"
       :customStyle="rightLineStyle"
@@ -23,27 +21,101 @@
 </template>
 
 <script lang="ts">
+/**
+ * 区隔内容的分割线，一般用于页面底部"没有更多"的提示
+ * @displayName hy-divider
+ */
+defineOptions({})
 export default {
   name: 'hy-divider',
   options: {
     addGlobalClass: true,
     virtualHost: true,
-    styleIsolation: 'shared'
-  }
+    styleIsolation: 'shared',
+  },
 }
 </script>
 
 <script setup lang="ts">
-import { computed, type CSSProperties, toRefs } from "vue";
-import defaultProps from "./props";
-import type IProps from "./typing";
-import { addUnit } from "../../utils";
+import { computed, toRefs } from 'vue'
+import type { CSSProperties, PropType } from 'vue'
+import { addUnit } from '../../utils'
 
 // 组件
-import HyLine from "../hy-line/hy-line.vue";
-import HyLoading from "../hy-loading/hy-loading.vue";
+import HyLine from '../hy-line/hy-line.vue'
+import HyLoading from '../hy-loading/hy-loading.vue'
+import { IconConfig } from '../../config'
 
-const props = withDefaults(defineProps<IProps>(), defaultProps);
+// const props = withDefaults(defineProps<IProps>(), defaultProps);
+const props = defineProps({
+  /** 是否虚线 */
+  dashed: {
+    type: Boolean,
+    default: false,
+  },
+  /** 是否细线 */
+  hairline: {
+    type: Boolean,
+    default: true,
+  },
+  /** 是否以点替代文字，优先于text字段起作用 */
+  dot: {
+    type: Boolean,
+    default: false,
+  },
+  /**
+   * 内容文本的位置
+   * @values left,center,right
+   * */
+  textPosition: {
+    type: String,
+    default: 'center',
+  },
+  /** 文本内容，如果为loadMore就是加载前，如果为loading就是加载中，如果为noMore就是没有更多 */
+  text: String,
+  /** 文本大小 */
+  textSize: {
+    type: [String, Number],
+    default: 14,
+  },
+  /** 文本颜色 */
+  textColor: String,
+  /** 线条颜色 */
+  lineColor: String,
+  /** 加载图标 */
+  loadingIcon: IconConfig.LOADING,
+  /** 加载前的提示语 */
+  loadMoreText: {
+    type: String,
+    default: '加载更多',
+  },
+  /** 加载中提示语 */
+  loadingText: {
+    type: String,
+    default: '正在加载...',
+  },
+  /** 没有更多的提示语 */
+  noMoreText: {
+    type: String,
+    default: '没有更多了',
+  },
+  /** 上边距 */
+  marginTop: {
+    type: [String, Number],
+    default: 0,
+  },
+  /** 下边距 */
+  marginBottom: {
+    type: [String, Number],
+    default: 0,
+  },
+  /** 定义需要用到的外部样式 */
+  customStyle: {
+    type: Object as PropType<CSSProperties>,
+  },
+  /** 自定义外部类名 */
+  customClass: String,
+})
 const {
   text,
   textSize,
@@ -57,94 +129,86 @@ const {
   marginTop,
   marginBottom,
   customStyle,
-} = toRefs(props);
-const emit = defineEmits(["click"]);
+} = toRefs(props)
 
-const isLoad = ["loadMore", "loading", "noMore"].includes(text.value);
+const isLoad = ['loadMore', 'loading', 'noMore'].includes(text.value)
 
 /**
  * @description 分割线样式
  * */
 const dividerStyle = computed<CSSProperties>(() => {
-  const style: CSSProperties = {};
-  style.marginTop =
-    addUnit(marginTop.value) || isLoad ? "20px" : addUnit(marginTop.value);
-  style.marginBottom =
-    addUnit(marginBottom.value) || isLoad
-      ? "20px"
-      : addUnit(marginBottom.value);
-  return Object.assign(style, customStyle.value);
-});
+  const style: CSSProperties = {}
+  style.marginTop = addUnit(marginTop.value) || isLoad ? '20px' : addUnit(marginTop.value)
+  style.marginBottom = addUnit(marginBottom.value) || isLoad ? '20px' : addUnit(marginBottom.value)
+  return Object.assign(style, customStyle.value)
+})
 /**
  * @description 文本内容
  * */
 const content = computed(() => {
-  let text = "";
+  let text = ''
   switch (props.text) {
-    case "loadMore":
-      text = loadMoreText.value;
-      break;
-    case "loading":
-      text = loadingText.value;
-      break;
-    case "noMore":
-      text = noMoreText.value;
-      break;
+    case 'loadMore':
+      text = loadMoreText.value
+      break
+    case 'loading':
+      text = loadingText.value
+      break
+    case 'noMore':
+      text = noMoreText.value
+      break
     default:
-      text = props.text;
-      break;
+      text = props.text
+      break
   }
-  return text;
-});
+  return text
+})
 /**
  * @description 文本内容样式
  * */
 const textStyle = computed<CSSProperties>(() => {
-  const style: CSSProperties = {};
-  style.fontSize = addUnit(textSize.value);
-  style.color = textColor.value;
-  return style;
-});
+  const style: CSSProperties = {}
+  style.fontSize = addUnit(textSize.value)
+  style.color = textColor.value
+  return style
+})
 
 /**
  * @description 左边线条的的样式
  * */
 const leftLineStyle = computed<CSSProperties>(() => {
   const style: CSSProperties = {
-    marginRight: "20rpx",
-  };
+    marginRight: '20rpx',
+  }
   // 如果是在左边，设置左边的宽度为固定值
   if (isLoad) {
-    style.width = "80px";
-  } else if (textPosition.value === "left") {
-    style.width = "80rpx";
+    style.width = '80px'
+  } else if (textPosition.value === 'left') {
+    style.width = '80rpx'
   } else {
-    style.flex = 1;
+    style.flex = 1
   }
-  return style;
-});
+  return style
+})
 /**
  * @description 右边线条的的样式
  * */
 const rightLineStyle = computed<CSSProperties>(() => {
   const style: CSSProperties = {
-    marginLeft: "20rpx",
-  };
+    marginLeft: '20rpx',
+  }
   // 如果是在右边，设置右边的宽度为固定值
   if (isLoad) {
-    style.width = "80px";
-  } else if (textPosition.value === "right") {
-    style.width = "80rpx";
+    style.width = '80px'
+  } else if (textPosition.value === 'right') {
+    style.width = '80rpx'
   } else {
-    style.flex = 1;
+    style.flex = 1
   }
-  return style;
-});
-const clickHandler = () => {
-  emit("click");
-};
+  return style
+})
 </script>
 
 <style lang="scss" scoped>
-@import "./index.scss";
+@import './index.scss';
 </style>

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

@@ -1,64 +1,64 @@
-import type { CSSProperties } from "vue";
+import type { CSSProperties } from 'vue'
 
 export default interface HyDividerProps {
   /**
    * @description 是否虚线 （默认 false ）
    * */
-  dashed?: boolean;
+  dashed?: boolean
   /**
    * @description 是否细线 （默认  true ）
    * */
-  hairline?: boolean;
+  hairline?: boolean
   /**
    * @description 是否以点替代文字，优先于text字段起作用 （默认 false ）
    * */
-  dot?: boolean;
+  dot?: boolean
   /**
    * @description 内容文本的位置，left-左边，center-中间，right-右边 （默认 'center' ）
    * */
-  textPosition?: "center" | HyApp.LeftRightType;
+  textPosition?: HyApp.RowCenterType
   /**
    * @description 文本内容
    * */
-  text?: string | "loadMore" | "loading" | "noMore";
+  text?: string | 'loadMore' | 'loading' | 'noMore'
   /**
    * @description 文本大小 （默认 14）
    * */
-  textSize?: string | number;
+  textSize?: string | number
   /**
    * @description 文本颜色 （默认 '#909399' ）
    * */
-  textColor?: string;
+  textColor?: string
   /**
    * @description 线条颜色 （默认 '#dcdfe6' ）
    * */
-  lineColor?: string;
+  lineColor?: string
   /**
    * @description 加载图标（默认 'loading' ）
    * */
-  loadingIcon?: string;
+  loadingIcon?: string
   /**
    * @description 加载前的提示语（默认 '加载更多' ）
    * */
-  loadMoreText?: string;
+  loadMoreText?: string
   /**
    * @description 加载中提示语（默认 '正在加载...' ）
    * */
-  loadingText?: string;
+  loadingText?: string
   /**
    * @description 没有更多的提示语（默认 '没有更多了' ）
    * */
-  noMoreText?: string;
+  noMoreText?: string
   /**
    * @description 上边距 （默认 0 ）
    * */
-  marginTop?: string | number;
+  marginTop?: string | number
   /**
    * @description 下边距 （默认 0 ）
    * */
-  marginBottom?: string | number;
+  marginBottom?: string | number
   /**
    * @description 定义需要用到的外部样式
    * */
-  customStyle?: CSSProperties;
+  customStyle?: CSSProperties
 }

package/components/hy-dropdown/hy-dropdown.vue

@@ -5,51 +5,89 @@
 </template>
 
 <script lang="ts">
+/**
+ * 主要提供筛选下拉筛选框，内置基础筛选功能，可以根据自己的需求自定义筛选项。
+ * @displayName hy-dropdown
+ */
+defineOptions({})
 export default {
   name: 'hy-dropdown',
   options: {
     addGlobalClass: true,
     virtualHost: true,
-    styleIsolation: 'shared'
-  }
+    styleIsolation: 'shared',
+  },
 }
 </script>
 
 <script setup lang="ts">
-import { provide, ref, computed, type CSSProperties, toRefs } from "vue";
-import type IProps from "./typing";
-import defaultProps from "./props";
-import { addUnit } from "@/package";
+import { provide, ref, computed, type CSSProperties, toRefs, PropType } from 'vue'
+import { addUnit, IconConfig } from '@/package'
 
-const props = withDefaults(defineProps<IProps>(), defaultProps);
-const { height, borderBottom } = toRefs(props);
+// const props = withDefaults(defineProps<IProps>(), defaultProps)
+const props = defineProps({
+  /** 标题菜单的高度，单位px */
+  height: {
+    type: [String, Number],
+    default: 40,
+  },
+  /** 标题菜单是否显示下边框 */
+  borderBottom: {
+    type: Boolean,
+    default: false,
+  },
+  /** 是否固定定位 */
+  sticky: {
+    type: Boolean,
+    default: true,
+  },
+  /** 标题和选项卡选中的颜色 */
+  activeColor: String,
+  /** 标题和选项卡未选中的颜色 */
+  inactiveColor: String,
+  /** 图标名称 */
+  menuIcon: {
+    type: String,
+    default: IconConfig.ARROW_DOWN_FILL,
+  },
+  /** 图标大小 */
+  menuIconSize: {
+    type: [String, Number],
+    default: 14,
+  },
+  /** 定义需要用到的外部样式 */
+  customStyle: {
+    type: Object as PropType<CSSProperties>,
+  },
+})
+const { height, borderBottom, customStyle } = toRefs(props)
 
 //样式设置
 const dropdownStyle = computed(() => {
   const style: CSSProperties = props.sticky
     ? {
-        position: "fixed",
+        position: 'fixed',
         left: 0,
         // #ifdef H5
-        top: "44px",
+        top: '44px',
         // #endif
         // #ifndef H5
         top: 0,
         // #endif
       }
-    : {};
-  style.height = addUnit(height.value);
-  if (borderBottom.value) style.borderBottom = "1px solid #dadbde";
+    : {}
+  style.height = addUnit(height.value)
+  if (borderBottom.value) style.borderBottom = '1px solid #dadbde'
 
-  return style;
-});
+  return Object.assign(style, customStyle.value)
+})
 
 //当前打开的项（以标题标识）
-const currentDropItem = ref("");
-provide("dropdownProps", props);
-provide("currentDropItem", currentDropItem);
+const currentDropItem = ref('')
+provide('dropdownProps', props)
+provide('currentDropItem', currentDropItem)
 </script>
 
 <style lang="scss" scoped>
-@import "./index.scss";
+@import './index.scss';
 </style>