hy-app 0.2.13 → 0.2.15

package/components/hy-menu/hy-menu.vue

@@ -1,11 +1,7 @@
 <template>
   <view class="hy-menu" :style="{ width: addUnit(width) }">
     <template v-for="(item, i) in list">
-      <view
-        @click="handleClick(item, i)"
-        :class="menuItemClass(item, i)"
-        :style="customStyle"
-      >
+      <view @click="handleClick(item, i)" :class="menuItemClass(item, i)" :style="customStyle">
         <slot name="icon">
           <hy-icon
             class="hy-menu-item__icon"
@@ -40,67 +36,95 @@
           :max="badge?.max"
           :show-zero="badge?.showZero"
           :custom-style="badge?.customStyle"
-        >
-        </hy-badge>
+        ></hy-badge>
       </view>
     </template>
   </view>
 </template>
 
 <script lang="ts">
+/**
+ * 垂直展示的导航栏，用于在不同的内容区域之间进行切换。
+ * @displayName hy-menu
+ */
+defineOptions({})
 export default {
-  name: "hy-menu",
+  name: 'hy-menu',
   options: {
     addGlobalClass: true,
     virtualHost: true,
-    styleIsolation: "shared",
+    styleIsolation: 'shared',
   },
-};
+}
 </script>
 
 <script lang="ts" setup>
-import { computed, ref, toRefs, watch } from "vue";
-import type IProps from "./typing";
-import type { MenusType } from "./typing";
-import defaultProps from "./props";
-import { addUnit } from "../../utils";
+import { computed, PropType, ref, toRefs, watch } from 'vue'
+import type { IMenuEmits, MenusType } from './typing'
+import { addUnit } from '../../utils'
+
+import type HyBadgeProps from '../hy-badge/typing'
+import type HyIconProps from '../hy-icon/typing'
 
 // 组件
-import HyIcon from "../hy-icon/hy-icon.vue";
-import HyBadge from "../hy-badge/hy-badge.vue";
+import HyIcon from '../hy-icon/hy-icon.vue'
+import HyBadge from '../hy-badge/hy-badge.vue'
 
-const props = withDefaults(defineProps<IProps>(), defaultProps);
-const { modelValue, list, color } = toRefs(props);
-const emit = defineEmits(["change", "update:modelValue"]);
+// const props = withDefaults(defineProps<IProps>(), defaultProps);
+const props = defineProps({
+  /** 当前值 */
+  modelValue: String,
+  /** 菜单数据集 */
+  list: {
+    type: Array as PropType<Array<MenusType>>,
+    default: [],
+  },
+  /** 侧边菜单栏宽度 */
+  width: {
+    type: [String, Number],
+    default: 120,
+  },
+  /** 选中颜色 */
+  color: String,
+  /** 图标属性值 */
+  icon: {
+    type: Object as PropType<HyIconProps>,
+    default: {},
+  },
+  /** 徽标属性值 */
+  badge: {
+    type: Object as PropType<HyBadgeProps>,
+    default: {},
+  },
+})
+const { modelValue, list, color } = toRefs(props)
+const emit = defineEmits<IMenuEmits>()
 
-const current = ref<string | number>(0);
+const current = ref<string | number>(0)
 
 watch(
   () => modelValue.value,
   (newVal: string | number) => {
-    current.value = list.value.findIndex((item) => item.id === newVal);
+    current.value = list.value.findIndex((item) => item.id === newVal)
     // current.value = newVal;
   },
-);
+)
 
 const menuItemClass = computed(() => {
   return (temp: MenusType, i: number) => {
     const classes = [
-      "hy-menu-item",
-      prefix.value && "hy-menu-item--prefix",
-      suffix.value && "hy-menu-item--suffix",
-      temp.disabled && "hy-menu-item--disabled",
-    ];
+      'hy-menu-item',
+      prefix.value && 'hy-menu-item--prefix',
+      suffix.value && 'hy-menu-item--suffix',
+      temp.disabled && 'hy-menu-item--disabled',
+    ]
     if (current.value === i) {
-      classes.push(
-        "hy-menu-item--active",
-        color.value && "hy-menu-item--active__color",
-      );
+      classes.push('hy-menu-item--active', color.value && 'hy-menu-item--active__color')
     }
 
-    return classes;
-  };
-});
+    return classes
+  }
+})
 
 const prefix = computed(() => {
   // let prefix: boolean = false;
@@ -117,11 +141,11 @@ const prefix = computed(() => {
   //     prefix = true;
   //   }
   // }
-  return prefix;
-});
+  return prefix
+})
 
 const suffix = computed(() => {
-  let suffix: boolean = false;
+  let suffix: boolean = false
   // if (sidebar) {
   //   let activeIndex: number = sidebar.children.findIndex((c: any) => {
   //     return c.value === sidebar.props.modelValue;
@@ -135,21 +159,21 @@ const suffix = computed(() => {
   //     suffix = true;
   //   }
   // }
-  return suffix;
-});
+  return suffix
+})
 
 function handleClick(temp: MenusType, i: number) {
   if (temp?.disabled) {
-    return;
+    return
   }
-  current.value = i;
-  emit("update:modelValue", temp.id);
-  emit("change", temp);
+  current.value = i
+  emit('update:modelValue', temp.id)
+  emit('change', temp)
 }
 </script>
 
 <style lang="scss" scoped>
-@import "./index.scss";
+@import './index.scss';
 .hy-menu-item--active__color {
   color: v-bind(color);
   &::before {

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

@@ -1,57 +1,64 @@
-import type { CSSProperties } from "vue";
-import type HyBadgeProps from "../hy-badge/typing";
-import type HyIconProps from "../hy-icon/typing";
+import type { CSSProperties } from 'vue'
+import type HyBadgeProps from '../hy-badge/typing'
+import type HyIconProps from '../hy-icon/typing'
 
 export interface MenusType {
   /**
    * @description 唯一id
    * */
-  id: string | number;
+  id: string | number
   /**
    * @description 标题
    * */
-  title: string;
+  title: string
   /**
    * @description 是否禁用
    * */
-  disabled?: boolean;
+  disabled?: boolean
   /**
    * @description icon
    * */
-  icon?: string;
+  icon?: string
   /**
    * @description 徽标值
    * */
-  badge?: number;
+  badge?: number
 }
 
 export default interface HyMenuProps {
   /**
    * @description 当前值
    * */
-  modelValue: string | number;
+  modelValue: string | number
   /**
    * @description 菜单数据集
    * */
-  list: MenusType[];
+  list: MenusType[]
   /**
    * @description 侧边菜单栏宽度
    * */
-  width?: string | number;
+  width?: string | number
   /**
    * @description 选中颜色
    * */
-  color?: string;
+  color?: string
   /**
    * @description 图标属性值
    * */
-  icon?: Partial<HyIconProps>;
+  icon?: Partial<HyIconProps>
   /**
    * @description 徽标属性值
    * */
-  badge?: Partial<HyBadgeProps>;
+  badge?: Partial<HyBadgeProps>
   /**
    * @description 定义需要用到的外部样式
    * */
-  customStyle?: CSSProperties;
+  customStyle?: CSSProperties
+}
+
+export interface IMenuEmits {
+  /** 选中触发 */
+  (e: 'change', temp: MenusType): void
+  /** 选中触发 */
+  (e: 'update:modelValue', id: MenusType['id']): void
 }

package/components/hy-modal/hy-modal.vue

@@ -88,6 +88,11 @@
 </template>
 
 <script lang="ts">
+/**
+ * 弹出模态框，常用于消息提示、消息确认、在当前页面内完成特定的交互操作。
+ * @displayName hy-modal
+ */
+defineOptions({})
 export default {
   name: 'hy-modal',
   options: {
@@ -100,17 +105,99 @@ export default {
 
 <script setup lang="ts">
 import { ref, toRefs, watch } from 'vue'
-import defaultProps from './props'
-import type IProps from './typing'
+import type { IModalEmits } from './typing'
 import { addUnit } from '../../utils'
 
 // 组件
 import HyPopup from '../hy-popup/hy-popup.vue'
 import HyLoading from '../hy-loading/hy-loading.vue'
 
-const props = withDefaults(defineProps<IProps>(), defaultProps)
+// const props = withDefaults(defineProps<IProps>(), defaultProps)
+const props = defineProps({
+  /** 是否显示模态框 */
+  modelValue: {
+    type: Boolean,
+    default: false,
+  },
+  /** 标题内容 */
+  title: String,
+  /** 模态框内容，如传入slot内容，则此参数无效 */
+  content: String,
+  /** 确认按钮的文字 */
+  confirmText: {
+    type: String,
+    default: '确认',
+  },
+  /** 取消按钮的文字 */
+  cancelText: {
+    type: String,
+    default: '取消',
+  },
+  /** 是否显示确认按钮 */
+  showConfirmButton: {
+    type: Boolean,
+    default: true,
+  },
+  /** 是否显示取消按钮 */
+  showCancelButton: {
+    type: Boolean,
+    default: false,
+  },
+  /** 确认按钮的颜色 */
+  confirmColor: String,
+  /** 取消按钮的颜色 */
+  cancelColor: String,
+  /** 对调确认和取消的位置 */
+  buttonReverse: {
+    type: Boolean,
+    default: false,
+  },
+  /** 是否开启缩放模式 */
+  zoom: {
+    type: Boolean,
+    default: true,
+  },
+  /** 弹窗的圆角 */
+  round: {
+    type: [String, Number],
+    default: 16,
+  },
+  /** 是否异步关闭，只对确定按钮有效，见上方说明 */
+  asyncClose: {
+    type: Boolean,
+    default: false,
+  },
+  /** 是否允许点击遮罩关闭Modal */
+  closeOnClickOverlay: {
+    type: Boolean,
+    default: false,
+  },
+  /** 往上偏移的值，给一个负的margin-top，往上偏移，避免和键盘重合的情况，单位任意，数值则默认为px单位 */
+  negativeTop: {
+    type: Number,
+    default: 0,
+  },
+  /** modal宽度，不支持百分比，可以数值，px，rpx单位 */
+  width: {
+    type: [String, Number],
+    default: '550rpx',
+  },
+  /**
+   * 确认按钮的样式,如设置，将不会显示取消按钮
+   * @values circle,square
+   * */
+  confirmButtonShape: String,
+  /**
+   * 文案对齐方式
+   * @values left,center,right
+   * */
+  contentTextAlign: {
+    type: String,
+    default: 'left',
+  },
+})
 const { modelValue, asyncClose, closeOnClickOverlay } = toRefs(props)
-const emit = defineEmits(['confirm', 'cancel', 'close', 'update:modelValue'])
+const emit = defineEmits<IModalEmits>()
 
 const loading = ref<boolean>(false)
 

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

@@ -74,3 +74,14 @@ export default interface HyModalProps {
    * */
   contentTextAlign?: HyApp.RowCenterType
 }
+
+export interface IModalEmits {
+  /** 点击确认按钮时触发 */
+  (e: 'confirm'): void
+  /** 点击取消按钮时触发 */
+  (e: 'cancel'): void
+  /** 点击遮罩关闭时触发 */
+  (e: 'close'): void
+  /** 更新值触发 */
+  (e: 'update:modelValue', show: boolean): void
+}

package/components/hy-navbar/hy-navbar.vue

@@ -1,5 +1,5 @@
 <template>
-  <view class="hy-navbar" :style="customStyle">
+  <view :class="['hy-navbar', customClass]" :style="customStyle">
     <view
       class="hy-navbar__placeholder"
       v-if="fixed && placeholder"
@@ -35,8 +35,9 @@
                 color: leftIconColor,
               }"
               class="hy-navbar__content__left__text"
-              >{{ leftText }}</text
             >
+              {{ leftText }}
+            </text>
           </slot>
         </view>
         <slot name="center">
@@ -50,8 +51,9 @@
                 },
                 titleStyle,
               ]"
-              >{{ title }}</text
             >
+              {{ title }}
+            </text>
             <text
               class="hy-navbar__content__center--sub"
               :style="[
@@ -61,8 +63,9 @@
                 },
                 titleStyle,
               ]"
-              >{{ sub }}</text
             >
+              {{ sub }}
+            </text>
           </view>
         </slot>
         <view
@@ -72,9 +75,7 @@
         >
           <slot name="right">
             <HyIcon v-if="rightIcon" :name="rightIcon" size="20"></HyIcon>
-            <text v-if="rightText" class="hy-navbar__content__right__text">{{
-              rightText
-            }}</text>
+            <text v-if="rightText" class="hy-navbar__content__right__text">{{ rightText }}</text>
           </slot>
         </view>
       </view>
@@ -83,51 +84,130 @@
 </template>
 
 <script lang="ts">
+/**
+ * 一般用于在特殊情况下，需要自定义导航栏的时候用到，一般建议使用uni-app带的导航栏。
+ * @displayName hy-navbar
+ */
+defineOptions({})
 export default {
   name: 'hy-navbar',
   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, getPx, getWindowInfo } from "../../utils";
+import { toRefs } from 'vue'
+import type { CSSProperties, PropType } from 'vue'
+import type { INavbarEmits } from './typing'
+import { addUnit, getPx, getWindowInfo } from '../../utils'
+import { IconConfig } from '../../config'
 
 // 组件
-import HyIcon from "../hy-icon/hy-icon.vue";
-import HyStatusBar from "../hy-status-bar/hy-status-bar.vue";
-import { toRefs } from "vue";
+import HyIcon from '../hy-icon/hy-icon.vue'
+import HyStatusBar from '../hy-status-bar/hy-status-bar.vue'
 
-const props = withDefaults(defineProps<IProps>(), defaultProps);
-const { autoBack, fixed } = toRefs(props);
-const emit = defineEmits(["leftClick", "rightClick"]);
+// const props = withDefaults(defineProps<IProps>(), defaultProps)
+const props = defineProps({
+  /** 是否开启顶部安全区适配 */
+  safeAreaInsetTop: {
+    type: Boolean,
+    default: true,
+  },
+  /** 固定在顶部时，是否生成一个等高元素，以防止塌陷 */
+  placeholder: {
+    type: Boolean,
+    default: false,
+  },
+  /** 导航栏是否固定在顶部 */
+  fixed: {
+    type: Boolean,
+    default: true,
+  },
+  /** 导航栏底部是否显示下边框 */
+  border: {
+    type: Boolean,
+    default: false,
+  },
+  /** 左边返回图标的名称，只能为uview-pls自带的图标 */
+  leftIcon: {
+    type: String,
+    default: IconConfig.LEFT,
+  },
+  /** 左边的提示文字 */
+  leftText: String,
+  /** 右边的提示文字 */
+  rightText: String,
+  /** 右边返回图标的名称，只能为uview-plus自带的图标 */
+  rightIcon: String,
+  /** 导航栏标题，如设置为空字符，将会隐藏标题占位区域 */
+  title: String,
+  /** 导航栏副标题 */
+  sub: String,
+  /** 文字颜色 */
+  titleColor: String,
+  /** 导航栏背景设置 */
+  bgColor: String,
+  /** 导航栏标题的最大宽度，内容超出会以省略号隐藏 */
+  titleWidth: {
+    type: [String, Number],
+    default: '400rpx',
+  },
+  /** 导航栏高度(不包括状态栏高度在内，内部自动加上) */
+  height: {
+    type: [String, Number],
+    default: '44px',
+  },
+  /** 左侧返回图标的大小 */
+  leftIconSize: {
+    type: [String, Number],
+    default: 20,
+  },
+  /** 左侧返回图标的颜色 */
+  leftIconColor: String,
+  /** 点击左侧区域(返回图标)，是否自动返回上一页（默认 false ） */
+  autoBack: {
+    type: Boolean,
+    default: false,
+  },
+  /** 标题的样式，对象或字符串 */
+  titleStyle: {
+    type: Object as PropType<CSSProperties>,
+  },
+  /** 定义需要用到的外部样式 */
+  customStyle: {
+    type: Object as PropType<CSSProperties>,
+  },
+  /** 自定义外部类名 */
+  customClass: String,
+})
+const { autoBack, fixed } = toRefs(props)
+const emit = defineEmits<INavbarEmits>()
 
 // 获取状态栏高度
-const { statusBarHeight } = getWindowInfo();
+const { statusBarHeight } = getWindowInfo()
 
 /**
  * @description 点击左侧区域
  * */
 const leftClick = () => {
   // 如果配置了autoBack，自动返回上一页
-  emit("leftClick");
+  emit('leftClick')
   if (autoBack.value) {
-    uni.navigateBack();
+    uni.navigateBack()
   }
-};
+}
 /**
  * @description 点击右侧区域
  * */
 const rightClick = () => {
-  emit("rightClick");
-};
+  emit('rightClick')
+}
 </script>
 
 <style lang="scss" scoped>
-@import "./index.scss";
+@import './index.scss';
 </style>

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

@@ -1,80 +1,85 @@
-import type { CSSProperties } from "vue";
+import type { CSSProperties } from 'vue'
 
 export default interface HyNavbarProps {
   /**
    * @description 是否开启顶部安全区适配  （默认 true ）
    * */
-  safeAreaInsetTop?: boolean;
+  safeAreaInsetTop?: boolean
   /**
    * @description 固定在顶部时，是否生成一个等高元素，以防止塌陷 （默认 false ）
    * */
-  placeholder?: boolean;
+  placeholder?: boolean
   /**
    * @description 导航栏是否固定在顶部 （默认 true ）
    * */
-  fixed?: boolean;
+  fixed?: boolean
   /**
    * @description 导航栏底部是否显示下边框 （默认 false ）
    * */
-  border?: boolean;
+  border?: boolean
   /**
    * @description 左边返回图标的名称，只能为uview-pls自带的图标 （默认 'left' ）
    * */
-  leftIcon?: string;
+  leftIcon?: string
   /**
    * @description 左边的提示文字
    * */
-  leftText?: string;
+  leftText?: string
   /**
    * @description 右边的提示文字
    * */
-  rightText?: string;
+  rightText?: string
   /**
    * @description 右边返回图标的名称，只能为uview-plus自带的图标
    * */
-  rightIcon?: string;
+  rightIcon?: string
   /**
    * @description 导航栏标题，如设置为空字符，将会隐藏标题占位区域
    * */
-  title?: string;
+  title?: string
   /**
    * @description 导航栏副标题
    * */
-  sub?: string;
+  sub?: string
   /**
    * @description 文字颜色 （默认 '' ）
    * */
-  titleColor?: string;
+  titleColor?: string
   /**
    * @description 导航栏背景设置 （默认 '#ffffff' ）
    * */
-  bgColor?: string;
+  bgColor?: string
   /**
    * @description 导航栏标题的最大宽度，内容超出会以省略号隐藏 （默认 '400rpx' ）
    * */
-  titleWidth?: string | number;
+  titleWidth?: string | number
   /**
    * @description 导航栏高度(不包括状态栏高度在内，内部自动加上)（默认 '44px' ）
    * */
-  height?: string | number;
+  height?: string | number
   /**
    * @description 左侧返回图标的大小（默认 20px ）
    * */
-  leftIconSize?: string | number;
+  leftIconSize?: string | number
   /**
    * @description 左侧返回图标的颜色（默认 #303133 ）
    * */
-  leftIconColor?: string;
+  leftIconColor?: string
   /**
    * @description 点击左侧区域(返回图标)，是否自动返回上一页（默认 false ）
    * */
-  autoBack?: boolean;
+  autoBack?: boolean
   /**
    * @description 标题的样式，对象或字符串
    * */
-  titleStyle?: CSSProperties;
+  titleStyle?: CSSProperties
   /**
    * @description 定义需要用到的外部样式
    * */
-  customStyle?: CSSProperties;
+  customStyle?: CSSProperties
+}
+
+export interface INavbarEmits {
+  (e: 'leftClick'): void
+  (e: 'rightClick'): void
 }