hy-app 0.4.13 → 0.5.0

package/components/hy-number-step/props.ts

@@ -1,29 +1,112 @@
-import type IProps from "./typing";
+import type HyIconProps from './typing'
+import type { PropType } from 'vue'
 
-const defaultProps: IProps = {
-  modelValue: 0,
-  min: 1,
-  max: Number.MAX_SAFE_INTEGER,
-  step: 1,
-  integer: false,
-  disabled: false,
-  disabledInput: false,
-  asyncChange: false,
-  inputWidth: 35,
-  showMinus: true,
-  showPlus: true,
-  decimalLength: null,
-  longPress: true,
-  color: "",
-  buttonWidth: 30,
-  buttonSize: 30,
-  buttonRadius: "",
-  bgColor: "",
-  inputBgColor: "",
-  cursorSpacing: 100,
-  disableMinus: false,
-  disablePlus: false,
-  miniMode: false,
-};
+const numberStepProps = {
+    /** 用于双向绑定的值，初始化时设置设为默认min值(最小值) */
+    modelValue: {
+        type: Number,
+        default: 0,
+        required: true
+    },
+    /** 最小值 */
+    min: {
+        type: Number,
+        default: 1
+    },
+    /** 最大值 */
+    max: {
+        type: Number,
+        default: Number.MAX_SAFE_INTEGER
+    },
+    /** 加减的步长，可为小数 */
+    step: {
+        type: Number,
+        default: 1
+    },
+    /** 是否只允许输入整数 */
+    integer: {
+        type: Boolean,
+        default: false
+    },
+    /** 是否禁用，包括输入框，加减按钮 */
+    disabled: {
+        type: Boolean,
+        default: false
+    },
+    /** 是否禁用输入框 */
+    disabledInput: {
+        type: Boolean,
+        default: false
+    },
+    /** 是否开启异步变更，开启后需要手动控制输入值 */
+    asyncChange: {
+        type: Boolean,
+        default: false
+    },
+    /** 输入框宽度，单位为px */
+    inputWidth: {
+        type: [String, Number],
+        default: 35
+    },
+    /** 是否显示减少按钮 */
+    showMinus: {
+        type: Boolean,
+        default: true
+    },
+    /** 是否显示增加按钮 */
+    showPlus: {
+        type: Boolean,
+        default: true
+    },
+    /** 显示的小数位数 */
+    decimalLength: Number,
+    /** 是否开启长按加减手势 */
+    longPress: {
+        type: Boolean,
+        default: true
+    },
+    /** 输入框文字和加减按钮图标的颜色 */
+    color: String,
+    /** 按钮宽度 */
+    buttonWidth: {
+        type: [String, Number],
+        default: 30
+    },
+    /** 按钮大小，宽高等于此值，单位px，输入框高度和此值保持一致 */
+    buttonSize: {
+        type: [String, Number],
+        default: 30
+    },
+    /** 按钮圆角 */
+    buttonRadius: [String, Number],
+    /** 输入框和按钮的背景颜色 */
+    bgColor: String,
+    /** 输入框背景颜色 */
+    inputBgColor: String,
+    /** 指定光标于键盘的距离，避免键盘遮挡输入框，单位px */
+    cursorSpacing: {
+        type: Number,
+        default: 100
+    },
+    /** 是否禁用减少按钮 */
+    disableMinus: {
+        type: Boolean,
+        default: false
+    },
+    /** 是否禁用增加按钮 */
+    disablePlus: {
+        type: Boolean,
+        default: false
+    },
+    /** 减号按钮图标 */
+    minusIcon: Object as PropType<HyIconProps>,
+    /** 加号按钮图标 */
+    plusIcon: Object as PropType<HyIconProps>,
+    /** 迷你模式 */
+    miniMode: {
+        type: Boolean,
+        default: false
+    }
+}
 
-export default defaultProps;
+export default numberStepProps

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

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

@@ -1,87 +1,60 @@
 <template>
-  <HyTransition
-    :show="show"
-    :custom-class="`hy-overlay ${customClass}`"
-    :duration="duration"
-    :custom-style="overlayStyle"
-    @click="clickHandler"
-  >
-    <slot />
-  </HyTransition>
+    <hy-transition
+        :show="show"
+        :custom-class="`hy-overlay ${customClass}`"
+        :duration="duration"
+        :custom-style="overlayStyle"
+        @click="clickHandler"
+    >
+        <slot />
+    </hy-transition>
 </template>
 
 <script lang="ts">
 export default {
-  name: "hy-overlay",
-  options: {
-    addGlobalClass: true,
-    virtualHost: true,
-    styleIsolation: "shared",
-  },
-};
+    name: 'hy-overlay',
+    options: {
+        addGlobalClass: true,
+        virtualHost: true,
+        styleIsolation: 'shared'
+    }
+}
 </script>
 
 <script setup lang="ts">
-import { computed } from "vue";
-import type { CSSProperties, PropType } from "vue";
-import type { IOverlayEmits } from "./typing";
-import HyTransition from "../hy-transition/hy-transition.vue";
+import { computed } from 'vue'
+import type { CSSProperties } from 'vue'
+import type { IOverlayEmits } from './typing'
+import overlayProps from './props'
+// 组件
+import HyTransition from '../hy-transition/hy-transition.vue'
 
 /**
  * 创建一个遮罩层，用于强调特定的页面元素，并阻止用户对遮罩下层的内容进行操作，一般用于弹窗场景
  * @displayName hy-overlay
  */
-defineOptions({});
+defineOptions({})
 
-// 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>,
-    default: () => {},
-  },
-  /** 自定义外部类名 */
-  customClass: String,
-});
-const emit = defineEmits<IOverlayEmits>();
+const props = defineProps(overlayProps)
+const emit = defineEmits<IOverlayEmits>()
 
 const overlayStyle = computed<CSSProperties>(() => {
-  const style: CSSProperties = {
-    position: "fixed",
-    top: 0,
-    left: 0,
-    right: 0,
-    zIndex: props.zIndex,
-    bottom: 0,
-    "background-color": `rgba(0, 0, 0, ${props.opacity})`,
-  };
-  return Object.assign(style, props.customStyle);
-});
+    const style: CSSProperties = {
+        position: 'fixed',
+        top: 0,
+        left: 0,
+        right: 0,
+        zIndex: props.zIndex,
+        bottom: 0,
+        '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-overlay/props.ts

@@ -1,10 +1,33 @@
-import type IProps from "./typing";
+import type { CSSProperties, PropType } from 'vue'
 
-const defaultProps: IProps = {
-  show: false,
-  zIndex: 10070,
-  duration: 300,
-  opacity: 0.5,
-};
+const overlayProps = {
+    /** 是否显示遮罩 */
+    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>,
+        default: () => {}
+    },
+    /** 自定义外部类名 */
+    customClass: String
+}
 
-export default defaultProps;
+export default overlayProps