hy-app 0.3.0 → 0.3.2

package/components/hy-number-step/typing.d.ts

@@ -1,126 +1,126 @@
-import type { CSSProperties } from 'vue'
-import type HyIconProps from '../hy-icon/typing'
+import type { CSSProperties } from "vue";
+import type HyIconProps from "../hy-icon/typing";
 
 export default interface HyNumberStepProps {
   /**
    * @description 用于双向绑定的值，初始化时设置设为默认min值(最小值)  （默认 0 ）
    * */
-  modelValue: number
+  modelValue: number;
   /**
    * @description 最小值 （默认 1 ）
    * */
-  min?: number
+  min?: number;
   /**
    * @description 最大值 （默认 Number.MAX_SAFE_INTEGER ）
    * */
-  max?: number
+  max?: number;
   /**
    * @description 加减的步长，可为小数 （默认 1 ）
    * */
-  step?: number
+  step?: number;
   /**
    * @description 是否只允许输入整数 （默认 false ）
    * */
-  integer?: boolean
+  integer?: boolean;
   /**
    * @description 是否禁用，包括输入框，加减按钮 （默认 false ）
    * */
-  disabled?: boolean
+  disabled?: boolean;
   /**
    * @description 是否禁用输入框 （默认 false ）
    * */
-  disabledInput?: boolean
+  disabledInput?: boolean;
   /**
    * @description 是否开启异步变更，开启后需要手动控制输入值 （默认 false ）
    * */
-  asyncChange?: boolean
+  asyncChange?: boolean;
   /**
    * @description 输入框宽度，单位为px （默认 35 ）
    * */
-  inputWidth?: number
+  inputWidth?: number;
   /**
    * @description 是否显示减少按钮 （默认 true ）
    * */
-  showMinus?: boolean
+  showMinus?: boolean;
   /**
    * @description 是否显示增加按钮 （默认 true ）
    * */
-  showPlus?: boolean
+  showPlus?: boolean;
   /**
    * @description 显示的小数位数
    * */
-  decimalLength?: number | null
+  decimalLength?: number | null;
   /**
    * @description 是否开启长按加减手势 （默认 true ）
    * */
-  longPress?: boolean
+  longPress?: boolean;
   /**
    * @description 输入框文字和加减按钮图标的颜色 （默认 '#323233' ）
    * */
-  color?: string
+  color?: string;
   /**
    * @description 按钮宽度（默认 '30' ）
    * */
-  buttonWidth?: number | string
+  buttonWidth?: number | string;
   /**
    * @description 按钮大小，宽高等于此值，单位px，输入框高度和此值保持一致 （默认 30 ）
    * */
-  buttonSize?: number | string
+  buttonSize?: number | string;
   /**
    * @description 按钮圆角 （默认 '0px' ）
    * */
-  buttonRadius?: number | string
+  buttonRadius?: number | string;
   /**
    * @description 输入框和按钮的背景颜色 （默认 '#EBECEE' ）
    * */
-  bgColor?: string
+  bgColor?: string;
   /**
    * @description 输入框背景颜色 （默认 '#EBECEE' ）
    * */
-  inputBgColor?: string
+  inputBgColor?: string;
   /**
    * @description 指定光标于键盘的距离，避免键盘遮挡输入框，单位px （默认 100 ）
    * */
-  cursorSpacing?: number
+  cursorSpacing?: number;
   /**
    * @description 是否禁用减少按钮 （默认 false ）
    * */
-  disableMinus?: boolean
+  disableMinus?: boolean;
   /**
    * @description 是否禁用增加按钮 （默认 false ）
    * */
-  disablePlus?: boolean
+  disablePlus?: boolean;
   /**
    * @description 减号按钮图标
    * */
-  minusIcon?: Partial<HyIconProps>
+  minusIcon?: Partial<HyIconProps>;
   /**
    * @description 加号按钮图标
    * */
-  plusIcon?: Partial<HyIconProps>
+  plusIcon?: Partial<HyIconProps>;
   /**
    * @description 迷你模式（默认 false ）
    * */
-  miniMode?: boolean
+  miniMode?: boolean;
   /**
    * @description 定义需要用到的外部样式
    * */
-  customStyle?: CSSProperties
+  customStyle?: CSSProperties;
 }
 
 export interface INumberStepEmits {
   /** 输入框得到焦点触发 */
-  (e: 'focus', value: number): void
+  (e: "focus", value: string): void;
   /** 输入框失去焦点时触发 */
-  (e: 'blur', value: number): void
+  (e: "blur", value: string): void;
   /** 超过范围阈值时触发 */
-  (e: 'overLimit', type: 'minus' | 'plus'): void
+  (e: "overLimit", type: "minus" | "plus"): void;
   /** 输入框内容发生变化时触发 */
-  (e: 'change', value: number): void
+  (e: "change", value: string | number): void;
   /** 点击增加按钮触发 */
-  (e: 'plus', value: number): void
+  (e: "plus", value: string): void;
   /** 点击减少按钮触发 */
-  (e: 'minus', value: number): void
+  (e: "minus", value: string): void;
   /** 值更新触发 */
-  (e: 'update:modelValue', value: number): void
+  (e: "update:modelValue", value: string | number): void;
 }

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

@@ -12,26 +12,26 @@
 
 <script lang="ts">
 export default {
-  name: 'hy-overlay',
+  name: "hy-overlay",
   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 type { IOverlayEmits } 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";
 
 /**
  * 创建一个遮罩层，用于强调特定的页面元素，并阻止用户对遮罩下层的内容进行操作，一般用于弹窗场景
  * @displayName hy-overlay
  */
-defineOptions({})
+defineOptions({});
 
 // const props = withDefaults(defineProps<IProps>(), defaultProps)
 const props = defineProps({
@@ -56,30 +56,32 @@ const props = defineProps({
     default: 0.5,
   },
   /** 定义需要用到的外部样式 */
-  customStyle: Object as PropType<CSSProperties>,
+  customStyle: {
+    type: Object as PropType<CSSProperties>,
+    default: () => {},
+  },
   /** 自定义外部类名 */
   customClass: String,
-})
-const { customStyle, opacity, zIndex } = toRefs(props)
-const emit = defineEmits<IOverlayEmits>()
+});
+const emit = defineEmits<IOverlayEmits>();
 
 const overlayStyle = computed<CSSProperties>(() => {
   const style: CSSProperties = {
-    position: 'fixed',
+    position: "fixed",
     top: 0,
     left: 0,
     right: 0,
-    zIndex: zIndex?.value,
+    zIndex: props.zIndex,
     bottom: 0,
-    'background-color': `rgba(0, 0, 0, ${opacity.value})`,
-  }
-  return Object.assign(style, customStyle.value || {})
-})
+    "background-color": `rgba(0, 0, 0, ${props.opacity})`,
+  };
+  return Object.assign(style, props.customStyle);
+});
 const clickHandler = () => {
-  emit('click')
-}
+  emit("click");
+};
 </script>
 
 <style lang="scss" scoped>
-@import './index.scss';
+@import "./index.scss";
 </style>

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

@@ -1,5 +1,9 @@
 <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"
@@ -14,7 +18,9 @@
         <hy-icon
           v-else
           :class="`hy-pagination__left hy-pagination__icon ${
-            modelValue <= 1 ? 'hy-pagination__nav--disabled' : 'hy-pagination__nav--active'
+            modelValue <= 1
+              ? 'hy-pagination__nav--disabled'
+              : 'hy-pagination__nav--active'
           }`"
           :name="IconConfig.LEFT"
         ></hy-icon>
@@ -54,29 +60,29 @@
 
 <script lang="ts">
 export default {
-  name: 'hy-pagination',
+  name: "hy-pagination",
   options: {
     virtualHost: true,
     addGlobalClass: true,
-    styleIsolation: 'shared',
+    styleIsolation: "shared",
   },
-}
+};
 </script>
 
 <script lang="ts" setup>
-import { ref, toRefs, watch } from 'vue'
-import type { CSSProperties, PropType } from 'vue'
-import type { IPaginationEmits } from './typing'
-import { IconConfig } from '../../config'
+import { ref, watch } from "vue";
+import type { CSSProperties, PropType } from "vue";
+import type { IPaginationEmits } from "./typing";
+import { IconConfig } from "../../config";
 // 组件
-import HyIcon from '../hy-icon/hy-icon.vue'
-import HyButton from '../hy-button/hy-button.vue'
+import HyIcon from "../hy-icon/hy-icon.vue";
+import HyButton from "../hy-button/hy-button.vue";
 
 /**
  * 当数据量过多时，使用分页分解数据。
  * @displayName hy-pagination
  */
-defineOptions({})
+defineOptions({});
 
 // const props = withDefaults(defineProps<IProps>(), defaultProps);
 const props = defineProps({
@@ -113,12 +119,12 @@ const props = defineProps({
   /** 上一页文本 */
   prevText: {
     type: String,
-    default: '上一页',
+    default: "上一页",
   },
   /** 下一页文本 */
   nextText: {
     type: String,
-    default: '下一页',
+    default: "下一页",
   },
   /** 总页数只有一页时是否隐藏 */
   hideIfOnePage: {
@@ -129,57 +135,56 @@ const props = defineProps({
   customStyle: {
     type: Object as PropType<CSSProperties>,
   },
-})
-const { pageSize, totalPage } = toRefs(props)
-const emit = defineEmits<IPaginationEmits>()
+});
+const emit = defineEmits<IPaginationEmits>();
 
-const totalPageNum = ref<number>(0) // 总页数
+const totalPageNum = ref<number>(0); // 总页数
 
 watch(
-  () => totalPage.value,
+  () => props.totalPage,
   (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>