hy-app 0.3.0 → 0.3.2

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

@@ -1,138 +1,140 @@
-import { DateModeEnum } from '../../typing'
-import type { CSSProperties } from 'vue'
-import type HyInputProps from '../hy-input/typing'
-import HyApp from 'hy-app'
+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
+  toolbarRightSlot?: boolean;
   /**
    * @description 自定义输入框外部样式
    * */
-  customStyle?: CSSProperties
+  customStyle?: CSSProperties;
 }
 
 type IParam = {
-  value: string | number
-  mode: DateModeEnum
-}
+  /** 值 */
+  value: string | number;
+  /** 时间模型 */
+  mode: DateModeEnum;
+};
 export interface IDatetimePickerEmits {
   /** 关闭选择器时触发 */
-  (e: 'close'): void
+  (e: "close"): void;
   /** 点击取消按钮 */
-  (e: 'cancel'): void
+  (e: "cancel"): void;
   /** 点击确定按钮，返回当前选择的值 */
-  (e: 'confirm', param: IParam): void
+  (e: "confirm", param: IParam): void;
   /** 当选择值变化时触发 */
-  (e: 'change'): void
+  (e: "change", param: IParam): void;
   /** 更新值触发 */
-  (e: 'update:modelValue', value: IParam['value']): void
+  (e: "update:modelValue", value: IParam["value"]): void;
 }

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

@@ -9,7 +9,9 @@
     ></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"
@@ -22,29 +24,29 @@
 
 <script lang="ts">
 export default {
-  name: 'hy-divider',
+  name: "hy-divider",
   options: {
     addGlobalClass: true,
     virtualHost: true,
-    styleIsolation: 'shared',
+    styleIsolation: "shared",
   },
-}
+};
 </script>
 
 <script setup lang="ts">
-import { computed, toRefs } from 'vue'
-import type { CSSProperties, PropType } from 'vue'
-import { addUnit } from '../../utils'
+import { computed } from "vue";
+import type { CSSProperties, PropType } from "vue";
+import { addUnit } from "../../utils";
+import { IconConfig } from "../../config";
 // 组件
-import HyLine from '../hy-line/hy-line.vue'
-import HyLoading from '../hy-loading/hy-loading.vue'
-import { IconConfig } from '../../config'
+import HyLine from "../hy-line/hy-line.vue";
+import HyLoading from "../hy-loading/hy-loading.vue";
 
 /**
  * 区隔内容的分割线，一般用于页面底部"没有更多"的提示
  * @displayName hy-divider
  */
-defineOptions({})
+defineOptions({});
 
 // const props = withDefaults(defineProps<IProps>(), defaultProps);
 const props = defineProps({
@@ -69,10 +71,13 @@ const props = defineProps({
    * */
   textPosition: {
     type: String,
-    default: 'center',
+    default: "center",
   },
   /** 文本内容，如果为loadMore就是加载前，如果为loading就是加载中，如果为noMore就是没有更多 */
-  text: String,
+  text: {
+    type: String,
+    default: "",
+  },
   /** 文本大小 */
   textSize: {
     type: [String, Number],
@@ -90,17 +95,17 @@ const props = defineProps({
   /** 加载前的提示语 */
   loadMoreText: {
     type: String,
-    default: '加载更多',
+    default: "加载更多",
   },
   /** 加载中提示语 */
   loadingText: {
     type: String,
-    default: '正在加载...',
+    default: "正在加载...",
   },
   /** 没有更多的提示语 */
   noMoreText: {
     type: String,
-    default: '没有更多了',
+    default: "没有更多了",
   },
   /** 上边距 */
   marginTop: {
@@ -118,100 +123,90 @@ const props = defineProps({
   },
   /** 自定义外部类名 */
   customClass: String,
-})
-const {
-  text,
-  textSize,
-  textColor,
-  textPosition,
-  dashed,
-  lineColor,
-  loadMoreText,
-  loadingText,
-  noMoreText,
-  marginTop,
-  marginBottom,
-  customStyle,
-} = toRefs(props)
+});
 
-const isLoad = ['loadMore', 'loading', 'noMore'].includes(text.value)
+const isLoad = ["loadMore", "loading", "noMore"].includes(props.text);
 
 /**
  * @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(props.marginTop) || isLoad ? "20px" : addUnit(props.marginTop);
+  style.marginBottom =
+    addUnit(props.marginBottom) || isLoad
+      ? "20px"
+      : addUnit(props.marginBottom);
+  return Object.assign(style, props.customStyle);
+});
 /**
  * @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 = props.loadMoreText;
+      break;
+    case "loading":
+      text = props.loadingText;
+      break;
+    case "noMore":
+      text = props.noMoreText;
+      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(props.textSize);
+  style.color = props.textColor;
+  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 (props.textPosition === "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 (props.textPosition === "right") {
+    style.width = "80rpx";
   } else {
-    style.flex = 1
+    style.flex = 1;
   }
-  return style
-})
+  return style;
+});
 </script>
 
 <style lang="scss" scoped>
-@import './index.scss';
+@import "./index.scss";
 </style>

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

@@ -6,24 +6,26 @@
 
 <script lang="ts">
 export default {
-  name: 'hy-dropdown',
+  name: "hy-dropdown",
   options: {
     addGlobalClass: true,
     virtualHost: true,
-    styleIsolation: 'shared',
+    styleIsolation: "shared",
   },
-}
+};
 </script>
 
 <script setup lang="ts">
-import { provide, ref, computed, type CSSProperties, toRefs, PropType } from 'vue'
-import { addUnit, IconConfig } from '@/package'
+import { provide, ref, computed } from "vue";
+import type { CSSProperties, PropType } from "vue";
+import { IconConfig } from "../../config";
+import { addUnit } from "../../utils";
 
 /**
  * 主要提供筛选下拉筛选框，内置基础筛选功能，可以根据自己的需求自定义筛选项。
  * @displayName hy-dropdown
  */
-defineOptions({})
+defineOptions({});
 
 // const props = withDefaults(defineProps<IProps>(), defaultProps)
 const props = defineProps({
@@ -60,35 +62,34 @@ const props = defineProps({
   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(props.height);
+  if (props.borderBottom) style.borderBottom = "1px solid #dadbde";
 
-  return Object.assign(style, customStyle.value)
-})
+  return Object.assign(style, props.customStyle);
+});
 
 //当前打开的项（以标题标识）
-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>