hy-app 0.1.1

package/components/hy-notice-bar/typing.d.ts

@@ -0,0 +1,56 @@
+import { CSSProperties } from "vue";
+
+export default interface IProps {
+  /**
+   * @description 显示的内容，数组
+   * */
+  text: string[] | string;
+  /**
+   * @description 通告滚动模式，row-横向滚动，column-竖向滚动 ( 默认 'row' )
+   * */
+  direction?: HyApp.PermutationType;
+  /**
+   * @description direction = row时，是否使用步进形式滚动  ( 默认 false )
+   * */
+  step?: boolean;
+  /**
+   * @description 是否显示左侧的音量图标 ( 默认 'volume' )
+   * */
+  icon?: string | HyIconConfig;
+  /**
+   * @description 通告模式，link-显示右箭头，closable-显示右侧关闭图标
+   * */
+  mode?: "closable" | "link" | "";
+  /**
+   * @description 文字颜色，各图标也会使用文字颜色 ( 默认 '#f9ae3d' )
+   * */
+  color?: string;
+  /**
+   * @description 背景颜色 ( 默认 '#fdf6ec' )
+   * */
+  bgColor?: string;
+  /**
+   * @description 水平滚动时的滚动速度，即每秒滚动多少px(px)，这有利于控制文字无论多少时，都能有一个恒定的速度 ( 默认 80 )
+   * */
+  speed?: number;
+  /**
+   * @description 字体大小 ( 默认 14 )
+   * */
+  fontSize?: number | string;
+  /**
+   * @description 滚动一个周期的时间长，单位ms ( 默认 2000 )
+   * */
+  duration?: number;
+  /**
+   * @description 是否禁止用手滑动切换 目前HX2.6.11，只支持App 2.5.5+、H5 2.5.5+、支付宝小程序、字节跳动小程序（默认34） ( 默认 true )
+   * */
+  disableTouch?: boolean;
+  /**
+   * @description 分布
+   * */
+  justifyContent?: HyApp.JustifyContentType;
+  /**
+   * @description 定义需要用到的外部样式
+   * */
+  customStyle?: CSSProperties;
+}

package/components/hy-number-step/hy-number-step.vue

@@ -0,0 +1,428 @@
+<template>
+  <view class="hy-number-box">
+    <view
+      v-if="showMinus && !hideMinus"
+      @tap.stop="clickHandler('minus')"
+      @touchstart="onTouchStart('minus')"
+      @touchend.stop="onClearTimeout"
+      hover-class="hy-number-box__minus--hover"
+      hover-stay-time="150"
+      :class="[
+        { 'hy-number-box__minus--disabled': isDisabled('minus') },
+        'hy-number-box__minus',
+        'cursor-pointer'
+      ]"
+      :style="buttonStyle('minus')"
+    >
+      <slot name="minus">
+        <HyICon
+          :name="IconConfig.MINUS"
+          :color="isDisabled('minus') ? '#c8c9cc' : '#323233'"
+          size="15"
+          bold
+          :customStyle="iconStyle"
+        ></HyICon>
+      </slot>
+    </view>
+
+    <template v-if="!hideMinus">
+      <slot name="input" :record="currentValue">
+        <!-- #ifdef MP-WEIXIN -->
+        <input
+          :disabled="disabledInput || disabled"
+          :cursor-spacing="getCursorSpacing"
+          :class="[
+            {
+              'hy-number-box__input--disabled': disabled || disabledInput
+            },
+            'hy-number-box__input'
+          ]"
+          :value="currentValue"
+          @blur="onBlur"
+          @focus="onFocus"
+          @input="onInput"
+          type="number"
+          :style="[inputStyle]"
+        />
+        <!-- #endif -->
+        <!-- #ifndef MP-WEIXIN -->
+        <input
+          :disabled="disabledInput || disabled"
+          :cursor-spacing="getCursorSpacing"
+          :class="[
+            {
+              'hy-number-box__input--disabled': disabled || disabledInput
+            },
+            'hy-number-box__input'
+          ]"
+          v-model="currentValue"
+          @blur="onBlur"
+          @focus="onFocus"
+          @input="onInput"
+          type="number"
+          :style="[inputStyle]"
+        />
+        <!-- #endif -->
+      </slot>
+    </template>
+    <view
+      v-if="showPlus"
+      @tap.stop="clickHandler('plus')"
+      @touchstart="onTouchStart('plus')"
+      @touchend.stop="onClearTimeout"
+      hover-class="hy-number-box__plus--hover"
+      hover-stay-time="150"
+      :class="[
+        { 'hy-number-box__minus--disabled': isDisabled('plus') },
+        'hy-number-box__plus',
+        'cursor-pointer'
+      ]"
+      :style="[buttonStyle('plus')]"
+    >
+      <slot name="plus">
+        <HyICon
+          :name="IconConfig.PLUS"
+          :color="isDisabled('plus') ? '#c8c9cc' : '#323233'"
+          size="15"
+          bold
+          :customStyle="iconStyle"
+        ></HyICon>
+      </slot>
+    </view>
+  </view>
+</template>
+
+<script setup lang="ts">
+import {
+  computed,
+  CSSProperties,
+  toRefs,
+  ref,
+  watch,
+  onMounted,
+  nextTick
+} from "vue";
+import defaultProps from "./props";
+import IProps from "./typing";
+import { addUnit } from "../../utils";
+import { IconConfig } from "../../config";
+import HyICon from "../hy-icon/hy-icon.vue";
+
+const props = withDefaults(defineProps<IProps>(), defaultProps);
+const {
+  modelValue,
+  miniMode,
+  cursorSpacing,
+  inputBgColor,
+  inputWidth,
+  buttonSize,
+  buttonWidth,
+  bgColor,
+  color,
+  buttonRadius,
+  disabledInput,
+  disabled,
+  integer,
+  max,
+  min,
+  decimalLength,
+  disablePlus,
+  disableMinus,
+  longPress,
+  asyncChange,
+  step
+} = toRefs(props);
+const emit = defineEmits([
+  "update:modelValue",
+  "focus",
+  "blur",
+  "overLimit",
+  "change",
+  "plus",
+  "minus"
+]);
+type StepType = "plus" | "minus";
+
+// 输入框实际操作的值
+const currentValue = ref<number>(0);
+// 定时器
+const longPressTimer = ref<null | number | NodeJS.Timeout>(null);
+
+const stepType = ref<StepType>("plus");
+
+/**
+ * @description 格式化整理数据，限制范围
+ * @param value 处理值
+ * */
+const format = (value: number): number => {
+  // 如果为空字符串，那么设置为0，同时将值转为Number类型
+  value = !value ? 0 : +value;
+  // 对比最大最小值，取在min和max之间的值
+  value = Math.max(Math.min(max.value, value), min.value);
+  // 如果设定了最大的小数位数，使用toFixed去进行格式化
+  if (decimalLength.value !== null) {
+    value = parseFloat(value.toFixed(decimalLength.value));
+  }
+  return value;
+};
+
+// 用于监听多个值发生变化
+const watchChange = computed(() => {
+  return [integer.value, decimalLength.value, min.value, max.value];
+});
+
+watch(
+  () => watchChange.value,
+  () => check()
+);
+watch(
+  () => modelValue.value,
+  (newValue: number) => {
+    if (newValue !== currentValue.value) {
+      currentValue.value = format(modelValue.value);
+    }
+  },
+  { immediate: true }
+);
+
+const hideMinus = computed(() => {
+  return currentValue.value == 0 && miniMode.value;
+});
+const getCursorSpacing = computed(() => {
+  // 判断传入的单位，如果为px单位，需要转成px
+  return cursorSpacing.value;
+});
+// 按钮的样式
+const buttonStyle = computed(() => {
+  return (type: string) => {
+    const style: CSSProperties = {
+      backgroundColor: bgColor.value,
+      width: addUnit(buttonWidth.value),
+      height: addUnit(buttonSize.value),
+      color: color.value,
+      borderRadius: buttonRadius.value
+    };
+    if (isDisabled.value(type)) {
+      style.backgroundColor = "#f7f8fa";
+    }
+    return style;
+  };
+});
+// 输入框的样式
+const inputStyle = computed<CSSProperties>(() => {
+  // const disabled_1 = disabled.value || disabledInput.value;
+  return {
+    color: color.value,
+    backgroundColor: inputBgColor.value || bgColor.value,
+    height: addUnit(buttonSize.value),
+    width: addUnit(inputWidth.value)
+  };
+});
+
+const isDisabled = computed(() => {
+  return (type: string) => {
+    if (type === "plus") {
+      // 在点击增加按钮情况下，判断整体的disabled，是否单独禁用增加按钮，以及当前值是否大于最大的允许值
+      return (
+        disabled.value || disablePlus.value || currentValue.value >= max.value
+      );
+    }
+    // 点击减少按钮同理
+    return (
+      disabled.value || disableMinus.value || currentValue.value <= min.value
+    );
+  };
+});
+
+onMounted(() => {
+  init();
+});
+
+const init = () => {
+  currentValue.value = format(modelValue.value);
+};
+const check = () => {
+  // 格式化了之后，如果前后的值不相等，那么设置为格式化后的值
+  const val = format(currentValue.value);
+  if (val !== currentValue.value) {
+    currentValue.value = val;
+    emitChange(val);
+  }
+};
+
+/**
+ * @description 输入框活动焦点
+ */
+const onFocus = (event: Event) => {
+  emit("focus", event.detail);
+};
+/**
+ * @description 输入框失去焦点
+ */
+const onBlur = (event: Event) => {
+  // 对输入值进行格式化
+  format(event.detail.value);
+  // 发出blur事件
+  emit("blur", event.detail);
+};
+/**
+ * @description 输入框值发生变化
+ */
+const onInput = (e: Event) => {
+  const { value = "" } = e.detail || {};
+  // 为空返回
+  if (value === "") return;
+  let formatted = value;
+  // https://github.com/ijry/uview-plus/issues/613
+  emitChange(value);
+  // 最大允许的小数长度
+  if (decimalLength.value !== null && formatted.indexOf(".") !== -1) {
+    const pair = formatted.split(".");
+    formatted = `${pair[0]}.${pair[1].slice(0, decimalLength.value)}`;
+  }
+  formatted = format(formatted);
+  emitChange(formatted);
+  // #ifdef MP-WEIXIN
+  return formatted;
+  // #endif
+};
+/**
+ * @description 发出change事件
+ * @param value 值
+ */
+const emitChange = (value: number) => {
+  // 如果开启了异步变更值，则不修改内部的值，需要用户手动在外部通过v-model变更
+  if (!asyncChange.value) {
+    nextTick(() => {
+      emit("update:modelValue", value);
+      currentValue.value = value;
+      // this.$forceUpdate()
+    });
+  }
+  emit("change", value);
+};
+const onChange = () => {
+  if (isDisabled.value(stepType.value)) {
+    return emit("overLimit", stepType.value);
+  }
+  const diff = stepType.value === "minus" ? -step.value : +step.value;
+  const value = format(add(+currentValue.value, diff));
+  emitChange(value);
+  emit(stepType.value, value);
+};
+/**
+ * @description 对值扩大后进行四舍五入，再除以扩大因子，避免出现浮点数操作的精度问题
+ * @param num1
+ * @param num2
+ * */
+const add = (num1: number, num2: number) => {
+  const cardinal = Math.pow(10, 10);
+  return Math.round((num1 + num2) * cardinal) / cardinal;
+};
+// 点击加减按钮
+const clickHandler = (type: StepType) => {
+  stepType.value = type;
+  onChange();
+};
+const longPressStep = () => {
+  // 每隔一段时间，重新调用longPressStep方法，实现长按加减
+  onClearTimeout();
+  longPressTimer.value = setTimeout(() => {
+    onChange();
+    longPressStep();
+  }, 250) as NodeJS.Timeout;
+};
+const onTouchStart = (type: StepType) => {
+  if (!longPress.value) return;
+  onClearTimeout();
+  stepType.value = type;
+  // 一定时间后，默认达到长按状态
+  longPressTimer.value = setTimeout(() => {
+    onChange();
+    longPressStep();
+  }, 600);
+};
+// 触摸结束，清除定时器，停止长按加减
+const onTouchEnd = () => {
+  if (!longPress.value) return;
+  onClearTimeout();
+};
+// 清除定时器
+const onClearTimeout = () => {
+  clearTimeout(longPressTimer.value as number);
+  longPressTimer.value = null;
+};
+</script>
+
+<style lang="scss" scoped>
+@import "../../libs/css/mixin.scss";
+
+$u-numberBox-hover-bgColor: #e6e6e6 !default;
+$u-numberBox-disabled-color: #c8c9cc !default;
+$u-numberBox-disabled-bgColor: #f7f8fa !default;
+$u-numberBox-plus-radius: 4px !default;
+$u-numberBox-minus-radius: 4px !default;
+$u-numberBox-input-text-align: center !default;
+$u-numberBox-input-font-size: 15px !default;
+$u-numberBox-input-padding: 0 !default;
+$u-numberBox-input-margin: 0 2px !default;
+$u-numberBox-input-disabled-color: #c8c9cc !default;
+$u-numberBox-input-disabled-bgColor: #f2f3f5 !default;
+
+.hy-number-box {
+  @include flex(row);
+  align-items: center;
+
+  &__slot {
+    /* #ifndef APP-NVUE */
+    touch-action: none;
+    /* #endif */
+  }
+
+  &__plus,
+  &__minus {
+    width: 35px;
+    @include flex;
+    justify-content: center;
+    align-items: center;
+    /* #ifndef APP-NVUE */
+    touch-action: none;
+    /* #endif */
+
+    &--hover {
+      background-color: $u-numberBox-hover-bgColor !important;
+    }
+
+    &--disabled {
+      color: $u-numberBox-disabled-color;
+      background-color: $u-numberBox-disabled-bgColor;
+    }
+  }
+
+  &__plus {
+    border-top-right-radius: $u-numberBox-plus-radius;
+    border-bottom-right-radius: $u-numberBox-plus-radius;
+  }
+
+  &__minus {
+    border-top-left-radius: $u-numberBox-minus-radius;
+    border-bottom-left-radius: $u-numberBox-minus-radius;
+  }
+
+  &__input {
+    position: relative;
+    text-align: $u-numberBox-input-text-align;
+    font-size: $u-numberBox-input-font-size;
+    padding: $u-numberBox-input-padding;
+    margin: $u-numberBox-input-margin;
+    @include flex;
+    align-items: center;
+    justify-content: center;
+
+    &--disabled {
+      color: $u-numberBox-input-disabled-color;
+      background-color: $u-numberBox-input-disabled-bgColor;
+    }
+  }
+}
+</style>

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

@@ -0,0 +1,29 @@
+import IProps from "./typing";
+
+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: "#323233",
+  buttonWidth: 30,
+  buttonSize: 30,
+  buttonRadius: "0px",
+  bgColor: "#EBECEE",
+  inputBgColor: "#EBECEE",
+  cursorSpacing: 100,
+  disableMinus: false,
+  disablePlus: false,
+  miniMode: false
+};
+
+export default defaultProps;

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

@@ -0,0 +1,104 @@
+import { CSSProperties } from "vue";
+
+export default interface IProps {
+  /**
+   * @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 加减按钮图标的样式
+   * */
+  iconStyle?: CSSProperties;
+  /**
+   * @description 迷你模式（默认 false ）
+   * */
+  miniMode?: boolean;
+  /**
+   * @description 定义需要用到的外部样式
+   * */
+  customStyle?: CSSProperties;
+}

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

@@ -0,0 +1,54 @@
+<template>
+  <HyTransition
+    :show="show"
+    custom-class="u-overlay"
+    :duration="duration"
+    :custom-style="overlayStyle"
+    @click="clickHandler"
+  >
+    <slot />
+  </HyTransition>
+</template>
+
+<script setup lang="ts">
+import { computed, CSSProperties, toRefs } from "vue";
+import defaultProps from "./props";
+import IProps 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 overlayStyle = computed<CSSProperties>(() => {
+  const style: CSSProperties = {
+    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 || {});
+});
+const clickHandler = () => {
+  emit("click");
+};
+</script>
+
+<style lang="scss" scoped>
+$u-overlay-top: 0 !default;
+$u-overlay-left: 0 !default;
+$u-overlay-width: 100% !default;
+$u-overlay-height: 100% !default;
+$u-overlay-background-color: rgba(0, 0, 0, 0.7) !default;
+.u-overlay {
+  position: fixed;
+  top: $u-overlay-top;
+  left: $u-overlay-left;
+  width: $u-overlay-width;
+  height: $u-overlay-height;
+  background-color: $u-overlay-background-color;
+}
+</style>

package/components/hy-overlay/props.ts

@@ -0,0 +1,10 @@
+import IProps from "./typing";
+
+const defaultProps: IProps = {
+  show: false,
+  zIndex: 10070,
+  duration: 300,
+  opacity: 0.5
+};
+
+export default defaultProps;

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

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