hy-app 0.2.13 → 0.2.15

package/components/hy-overlay/hy-overlay.vue

@@ -1,7 +1,7 @@
 <template>
   <HyTransition
     :show="show"
-    custom-class="hy-overlay"
+    :custom-class="['hy-overlay', customClass]"
     :duration="duration"
     :custom-style="overlayStyle"
     @click="clickHandler"
@@ -10,33 +10,77 @@
   </HyTransition>
 </template>
 
+<script lang="ts">
+/**
+ * 创建一个遮罩层，用于强调特定的页面元素，并阻止用户对遮罩下层的内容进行操作，一般用于弹窗场景
+ * @displayName hy-overlay
+ */
+defineOptions({})
+export default {
+  name: 'hy-overlay',
+  options: {
+    addGlobalClass: true,
+    virtualHost: true,
+    styleIsolation: 'shared',
+  },
+}
+</script>
+
 <script setup lang="ts">
-import { computed, type CSSProperties, toRefs } from "vue";
-import defaultProps from "./props";
-import type IProps from "./typing";
-import HyTransition from "../hy-transition/hy-transition.vue";
+import { computed, toRefs } from 'vue'
+import type { CSSProperties, PropType } from 'vue'
+import type { IOverlayEmits } from './typing'
+import HyTransition from '../hy-transition/hy-transition.vue'
 
-const props = withDefaults(defineProps<IProps>(), defaultProps);
-const { customStyle, opacity, zIndex } = toRefs(props);
-const emit = defineEmits(["click"]);
+// const props = withDefaults(defineProps<IProps>(), defaultProps)
+const props = defineProps({
+  /** 是否显示遮罩 */
+  show: {
+    type: Boolean,
+    default: false,
+  },
+  /** zIndex 层级 */
+  zIndex: {
+    type: Number,
+    default: 10070,
+  },
+  /** 动画时长，单位毫秒 */
+  duration: {
+    type: Number,
+    default: 300,
+  },
+  /** 不透明度值，当做rgba的第四个参数 */
+  opacity: {
+    type: Number,
+    default: 0.5,
+  },
+  /** 定义需要用到的外部样式 */
+  customStyle: {
+    type: Object as PropType<CSSProperties>,
+  },
+  /** 自定义外部类名 */
+  customClass: String,
+})
+const { customStyle, opacity, zIndex } = toRefs(props)
+const emit = defineEmits<IOverlayEmits>()
 
 const overlayStyle = computed<CSSProperties>(() => {
   const style: CSSProperties = {
-    position: "fixed",
+    position: 'fixed',
     top: 0,
     left: 0,
     right: 0,
     zIndex: zIndex?.value,
     bottom: 0,
-    "background-color": `rgba(0, 0, 0, ${opacity.value})`,
-  };
-  return Object.assign(style, customStyle.value || {});
-});
+    'background-color': `rgba(0, 0, 0, ${opacity.value})`,
+  }
+  return Object.assign(style, customStyle.value || {})
+})
 const clickHandler = () => {
-  emit("click");
-};
+  emit('click')
+}
 </script>
 
 <style lang="scss" scoped>
-@import "./index.scss";
+@import './index.scss';
 </style>

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

@@ -1,24 +1,29 @@
-import type { CSSProperties } from "vue";
+import type { CSSProperties } from 'vue'
 
 export default interface HyOverlayProps {
   /**
    * @description 是否显示遮罩（默认 false ）
    * */
-  show: boolean;
+  show: boolean
   /**
    * @description zIndex 层级（默认 10070 ）
    * */
-  zIndex?: number;
+  zIndex?: number
   /**
    * @description 动画时长，单位毫秒（默认 300 ）
    * */
-  duration?: number;
+  duration?: number
   /**
    * @description 不透明度值，当做rgba的第四个参数 （默认 0.5 ）
    * */
-  opacity?: number;
+  opacity?: number
   /**
    * @description 定义需要用到的外部样式
    * */
-  customStyle?: CSSProperties;
+  customStyle?: CSSProperties
+}
+
+export interface IOverlayEmits {
+  /** 点击遮罩框触发 */
+  (e: 'click'): void
 }

package/components/hy-pagination/hy-pagination.vue

@@ -1,9 +1,5 @@
 <template>
-  <view
-    class="hy-pagination"
-    :style="customStyle"
-    v-if="!(hideIfOnePage && totalPageNum === 1)"
-  >
+  <view class="hy-pagination" :style="customStyle" v-if="!(hideIfOnePage && totalPageNum === 1)">
     <view class="hy-pagination__content">
       <hy-button
         :plain="modelValue > 1"
@@ -17,7 +13,9 @@
         <text v-if="!showIcon">{{ prevText }}</text>
         <hy-icon
           v-else
-          :class="`hy-pagination__left hy-pagination__icon ${modelValue <= 1 ? 'hy-pagination__nav--disabled' : 'hy-pagination__nav--active'}`"
+          :class="`hy-pagination__left hy-pagination__icon ${
+            modelValue <= 1 ? 'hy-pagination__nav--disabled' : 'hy-pagination__nav--active'
+          }`"
           :name="IconConfig.LEFT"
         ></hy-icon>
       </hy-button>
@@ -37,7 +35,11 @@
         <text v-if="!showIcon">{{ nextText }}</text>
         <hy-icon
           v-else
-          :custom-class="`hy-pagination__icon ${modelValue >= totalPageNum ? 'hy-pagination__nav--disabled' : 'hy-pagination__nav--active'}`"
+          :custom-class="`hy-pagination__icon ${
+            modelValue >= totalPageNum
+              ? 'hy-pagination__nav--disabled'
+              : 'hy-pagination__nav--active'
+          }`"
           :name="IconConfig.RIGHT"
         ></hy-icon>
       </hy-button>
@@ -51,75 +53,130 @@
 </template>
 
 <script lang="ts">
+/**
+ * 当数据量过多时，使用分页分解数据。
+ * @displayName hy-pagination
+ */
+defineOptions({})
 export default {
-  name: "hy-pagination",
+  name: 'hy-pagination',
   options: {
     virtualHost: true,
     addGlobalClass: true,
-    styleIsolation: "shared",
+    styleIsolation: 'shared',
   },
-};
+}
 </script>
 
 <script lang="ts" setup>
-import HyIcon from "../hy-icon/hy-icon.vue";
-import HyButton from "../hy-button/hy-button.vue";
-import { ref, toRefs, watch } from "vue";
-import type IProps from "./typing";
-import defaultProps from "./props";
-import { IconConfig } from "hy-app";
+import HyIcon from '../hy-icon/hy-icon.vue'
+import HyButton from '../hy-button/hy-button.vue'
+import { CSSProperties, PropType, ref, toRefs, watch } from 'vue'
+import type { IPaginationEmits } from './typing'
+import { IconConfig } from 'hy-app'
 
-const props = withDefaults(defineProps<IProps>(), defaultProps);
-const { pageSize, totalPage } = toRefs(props);
-const emit = defineEmits(["change", "update:modelValue"]);
+// const props = withDefaults(defineProps<IProps>(), defaultProps);
+const props = defineProps({
+  /** 当前页 */
+  modelValue: {
+    type: Number,
+    default: 1,
+  },
+  /** 总页数，如果有total，则优先使用total计算页数 */
+  totalPage: {
+    type: Number,
+    default: 1,
+  },
+  /** 是否展示分页为Icon图标 */
+  showIcon: {
+    type: Boolean,
+    default: false,
+  },
+  /** 是否展示总条数 */
+  showMessage: {
+    type: Boolean,
+    default: false,
+  },
+  /** 总条数 */
+  total: {
+    type: Number,
+    default: 0,
+  },
+  /** 每页条数 */
+  pageSize: {
+    type: Number,
+    default: 10,
+  },
+  /** 上一页文本 */
+  prevText: {
+    type: String,
+    default: '上一页',
+  },
+  /** 下一页文本 */
+  nextText: {
+    type: String,
+    default: '下一页',
+  },
+  /** 总页数只有一页时是否隐藏 */
+  hideIfOnePage: {
+    type: Boolean,
+    default: true,
+  },
+  /** 定义需要用到的外部样式 */
+  customStyle: {
+    type: Object as PropType<CSSProperties>,
+  },
+})
+const { pageSize, totalPage } = toRefs(props)
+const emit = defineEmits<IPaginationEmits>()
 
-const totalPageNum = ref<number>(0); // 总页数
+const totalPageNum = ref<number>(0) // 总页数
 
 watch(
   () => totalPage.value,
   (newValue) => {
     if (!totalPageNum.value && newValue) {
-      totalPageNum.value = totalPageNum.value;
+      totalPageNum.value = totalPageNum.value
     }
   },
   { immediate: true, deep: true },
-);
+)
 
 watch(
   () => props.total,
   () => {
-    updateTotalPage();
+    updateTotalPage()
   },
   { immediate: true, deep: true },
-);
+)
 
 /**
  * @description 加数
  * */
 const add = () => {
-  const { modelValue } = props;
+  const { modelValue } = props
   if (modelValue > totalPageNum.value - 1) {
-    return;
+    return
   }
-  emit("change", { value: modelValue + 1 });
-  emit("update:modelValue", modelValue + 1);
-};
+  emit('change', { value: modelValue + 1 })
+  emit('update:modelValue', modelValue + 1)
+}
 
 const sub = () => {
-  const { modelValue } = props;
+  const { modelValue } = props
   if (modelValue < 2) {
-    return;
+    return
   }
-  emit("change", { value: modelValue - 1 });
-  emit("update:modelValue", modelValue - 1);
-};
+  emit('change', { value: modelValue - 1 })
+  emit('update:modelValue', modelValue - 1)
+}
 
 function updateTotalPage() {
-  const { total, pageSize } = props;
-  totalPageNum.value = Math.ceil(total / pageSize);
+  const { total, pageSize } = props
+  totalPageNum.value = Math.ceil(total / pageSize)
 }
 </script>
 
 <style lang="scss" scoped>
-@import "./index.scss";
+@import './index.scss';
 </style>

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

@@ -1,44 +1,53 @@
-import type { CSSProperties } from "vue";
+import type { CSSProperties } from 'vue'
 
 export default interface HyPaginationProps {
   /**
    * @description 当前页
    */
-  modelValue: number;
+  modelValue: number
   /**
    * @description 总页数，如果有total，则优先使用total计算页数
    */
-  totalPage?: number;
+  totalPage?: number
   /**
    * @description 是否展示分页为Icon图标
    */
-  showIcon?: boolean;
+  showIcon?: boolean
   /**
    * @desc 是否展示总条数
    */
-  showMessage?: boolean;
+  showMessage?: boolean
   /**
    * @description 总条数
    */
-  total?: number;
+  total?: number
   /**
    * @description 每页条数
    */
-  pageSize?: number;
+  pageSize?: number
   /**
    * @description 上一页文本
    */
-  prevText?: string;
+  prevText?: string
   /**
    * @description 下一页文本
    */
-  nextText?: string;
+  nextText?: string
   /**
    * @description 总页数只有一页时是否隐藏
    */
-  hideIfOnePage?: boolean;
+  hideIfOnePage?: boolean
   /**
    * @description 定义需要用到的外部样式
    * */
-  customStyle?: CSSProperties;
+  customStyle?: CSSProperties
+}
+type PaginationVo = {
+  value: number
+}
+export interface IPaginationEmits {
+  /** 改变值触发 */
+  (e: 'change', param: PaginationVo): void
+  /** 改变值触发 */
+  (e: 'update:modelValue', value: PaginationVo['value']): void
 }