hy-app 0.2.2 → 0.2.5

package/components/hy-code-input/hy-code-input.vue

@@ -1,12 +1,7 @@
 <template>
   <view class="hy-code-input">
     <view
-      :class="[
-        'hy-code-input--item',
-        `hy-code-input--item__${mode}`,
-        current > index && `hy-code-input--item__${mode}__border`,
-        isFocus && current === index && `hy-code-input--item__${mode}__active`,
-      ]"
+      :class="itemClass(index)"
       :style="[itemStyle(index)]"
       v-for="(item, index) in codeLength"
       :key="index"
@@ -14,6 +9,7 @@
       <view
         class="hy-code-input--item__dot"
         v-if="dot && current > index"
+        :style="{ color: color }"
       ></view>
       <text
         v-else
@@ -23,8 +19,9 @@
           fontWeight: bold ? 'bold' : 'normal',
           color: color,
         }"
-        >{{ codeArray[index] }}</text
       >
+        {{ codeArray[index] }}
+      </text>
     </view>
     <input
       :disabled="disabledKeyboard"
@@ -46,60 +43,53 @@
 
 <script lang="ts">
 export default {
-  name: "hy-code-input",
+  name: 'hy-code-input',
   options: {
     addGlobalClass: true,
     virtualHost: true,
-    styleIsolation: "shared",
+    styleIsolation: 'shared',
   },
-};
+}
 </script>
 
 <script setup lang="ts">
-import {
-  computed,
-  type CSSProperties,
-  nextTick,
-  onUnmounted,
-  ref,
-  toRefs,
-  watch,
-} from "vue";
-import type IProps from "./typing";
-import defaultProps from "./props";
-import { addUnit, getPx } from "../../utils";
+import { computed, type CSSProperties, nextTick, onUnmounted, ref, toRefs, watch } from 'vue'
+import type IProps from './typing'
+import defaultProps from './props'
+import { addUnit, getPx } from '../../utils'
 
-const props = withDefaults(defineProps<IProps>(), defaultProps);
+const props = withDefaults(defineProps<IProps>(), defaultProps)
 const {
   modelValue,
   focus,
   maxlength,
+  border,
   disabledDot,
   size,
   mode,
   hairline,
   space,
   borderColor,
-} = toRefs(props);
-const emit = defineEmits(["change", "finish", "update:modelValue"]);
+} = toRefs(props)
+const emit = defineEmits(['change', 'finish', 'update:modelValue'])
 
-const current = ref(0);
-const inputValue = ref("");
-const isFocus = ref(focus.value);
-let timer: ReturnType<typeof setInterval>;
-const opacity = ref(1);
-const borderWidth = computed(() => (hairline.value ? "0.5px" : "2px"));
-const lineHeight = computed(() => (hairline.value ? "2px" : "4px"));
-const boxSize = addUnit(size.value);
+const current = ref(0)
+const inputValue = ref('')
+const isFocus = ref(focus.value)
+let timer: ReturnType<typeof setInterval>
+const opacity = ref(1)
+const borderWidth = computed(() => (hairline.value ? '0.5px' : '2px'))
+const lineHeight = computed(() => (hairline.value ? '2px' : '4px'))
+const boxSize = addUnit(size.value)
 
 watch(
   () => modelValue.value,
   (newValue: string | number) => {
-    inputValue.value = String(newValue).substring(0, maxlength.value);
-    current.value = newValue.toString().length;
+    inputValue.value = String(newValue).substring(0, maxlength.value)
+    current.value = newValue.toString().length
   },
   { immediate: true },
-);
+)
 
 watch(
   () => isFocus.value,
@@ -107,102 +97,123 @@ watch(
     // #ifdef APP-NVUE
     if (newValue) {
       timer = setInterval(() => {
-        opacity.value = Math.abs(opacity.value - 1);
-      }, 600);
+        opacity.value = Math.abs(opacity.value - 1)
+      }, 600)
     } else {
-      clearInterval(timer);
+      clearInterval(timer)
     }
     // #endif
   },
-);
+)
 
 onUnmounted(() => {
   // #ifdef APP-NVUE
-  clearInterval(timer);
+  clearInterval(timer)
   // #endif
-});
+})
 
 // 根据长度，循环输入框的个数，因为头条小程序数值不能用于v-for
 const codeLength = computed(() => {
-  return new Array(Number(maxlength.value));
-});
+  return new Array(Number(maxlength.value))
+})
 // 循环item的样式
 const itemStyle = computed(() => {
   return (index: number) => {
     const style: CSSProperties = {
       width: boxSize,
       height: boxSize,
-      "--hy-border-color": borderColor.value,
-    };
+    }
+    if (borderColor.value) {
+      style['--hy-border-color'] = borderColor.value
+    }
     // 盒子模式下，需要额外进行处理
-    if (mode.value === "box") {
+    if (mode.value === 'box' && border.value) {
       // 设置盒子的边框，如果是细边框，则设置为1px宽度
-      style.borderWidth = borderWidth.value;
-      style.borderStyle = "solid";
-      style.borderColor = borderColor.value;
+      style.borderWidth = borderWidth.value
+      style.borderStyle = 'solid'
+      style.borderColor = borderColor.value
       // 如果盒子间距为0的话
       if (getPx(space.value) === 0) {
         // 给第一和最后一个盒子设置圆角
         if (index === 0) {
-          style.borderTopLeftRadius = "3px";
-          style.borderBottomLeftRadius = "3px";
+          style.borderTopLeftRadius = '6px'
+          style.borderBottomLeftRadius = '6px'
         }
         if (index === codeLength.value.length - 1) {
-          style.borderTopRightRadius = "3px";
-          style.borderBottomRightRadius = "3px";
+          style.borderTopRightRadius = '6px'
+          style.borderBottomRightRadius = '6px'
         }
         // 最后一个盒子的右边框需要保留
         if (index !== codeLength.value.length - 1) {
-          style.borderRight = "none";
+          style.borderRight = 'none'
         }
       }
     }
     if (index !== codeLength.value.length - 1) {
       // 设置验证码字符之间的距离，通过margin-right设置，最后一个字符，无需右边框
-      style.marginRight = addUnit(space.value);
+      style.marginRight = addUnit(space.value)
     } else {
       // 最后一个盒子的有边框需要保留
-      style.marginRight = 0;
+      style.marginRight = 0
     }
 
-    return style;
-  };
-});
+    return style
+  }
+})
+
+const itemClass = computed(() => {
+  return (index: number) => {
+    return [
+      'hy-code-input--item',
+      border.value ? `hy-code-input--item__${mode.value}` : 'hy-code-input--item__not',
+      current.value > index &&
+        getPx(space.value) != 0 &&
+        border.value &&
+        `hy-code-input--item__${mode.value}__border`,
+      isFocus.value &&
+        current.value === index &&
+        getPx(space.value) != 0 &&
+        (border.value
+          ? `hy-code-input--item__${mode.value}__active`
+          : 'hy-code-input--item__not__active'),
+    ]
+  }
+})
 
 /**
  * @description 将输入的值，转为数组，给item历遍时，根据当前的索引显示数组的元素
  */
 const codeArray = computed(() => {
-  return String(inputValue.value).split("");
-});
+  return String(inputValue.value).split('')
+})
 
 /**
  * @description 监听输入框的值发生变化
  * */
 const inputHandler = (e: any) => {
-  const value = e.detail.value;
-  inputValue.value = value;
+  const value = e.detail.value
+  inputValue.value = value
   // 是否允许输入“.”符号
   if (disabledDot.value) {
     nextTick(() => {
-      inputValue.value = value.replace(".", "");
-    });
+      inputValue.value = value.replace('.', '')
+    })
   }
   // 未达到maxlength之前，发送change事件，达到后发送finish事件
-  emit("change", value);
+  emit('change', value)
   // 修改通过v-model双向绑定的值
-  emit("update:modelValue", value);
+  emit('update:modelValue', value)
   // 达到用户指定输入长度时，发出完成事件
   if (String(value).length >= Number(maxlength.value)) {
-    emit("finish", value);
+    emit('finish', value)
   }
-};
+}
 </script>
 
 <style scoped lang="scss">
-@import "./index.scss";
-@import "../../libs/css/mixin.scss";
-@import "../../theme.scss";
+@import './index.scss';
+@import '../../libs/css/mixin.scss';
+@import '../../theme.scss';
 @include b(code-input) {
   @include m(item) {
     &__box {
@@ -215,7 +226,7 @@ const inputHandler = (e: any) => {
     &__line {
       &::after {
         height: v-bind(lineHeight);
-        background-color: var(--hy-border-color);
+        background-color: $hy-border-color;
       }
     }
   }

package/components/hy-code-input/index.scss

@@ -24,6 +24,22 @@
       background-color: $hy-icon-color;
     }
 
+    /* 无边框 */
+    &__not {
+      background-color: $hy-background--track;
+      border-radius: $hy-border-radius-sm;
+      &__active {
+        &:before {
+          content: "";
+          background-color: $hy-text-color;
+          width: 1.5px;
+          border-radius: 2px;
+          height: 50%;
+          animation: 1s hy-cursor-flicker--2 infinite;
+        }
+      }
+    }
+
     /* 方块模式 */
     &__box {
       border-color: $hy-border-color--2;
@@ -93,6 +109,20 @@
   }
 }
 
+/* #ifndef APP-NVUE */
+@keyframes hy-cursor-flicker--2 {
+  0% {
+    opacity: 0;
+  }
+  50% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0;
+  }
+}
+/* #endif */
+
 /* #ifndef APP-NVUE */
 @keyframes hy-cursor-flicker {
   0% {
@@ -105,4 +135,4 @@
     opacity: 0.2;
   }
 }
-/* #endif */
+/* #endif */

package/components/hy-code-input/props.ts

@@ -1,21 +1,22 @@
-import type IProps from "./typing";
+import type IProps from './typing'
 
 const defaultProps: IProps = {
-  modelValue: "",
+  modelValue: '',
   adjustPosition: true,
   maxlength: 6,
+  border: true,
   dot: false,
-  mode: "box",
+  mode: 'box',
   hairline: false,
   space: 10,
   focus: false,
   bold: false,
-  color: "",
+  color: '',
   fontSize: 18,
   size: 35,
   disabledKeyboard: false,
-  borderColor: "",
+  borderColor: '',
   disabledDot: true,
-};
+}
 
-export default defaultProps;
+export default defaultProps

package/components/hy-code-input/typing.d.ts

@@ -1,65 +1,69 @@
-import type { CSSProperties } from "vue";
+import type { CSSProperties } from 'vue'
 
-export default interface HyOverlayProps {
-  modelValue: string | number;
+export default interface HyCodeInputProps {
+  modelValue: string | number
   /**
    * @description 键盘弹起时，是否自动上推页面（默认 true ）
    * */
-  adjustPosition?: boolean;
+  adjustPosition?: boolean
   /**
    * @description 最大输入长度（默认 6 ）
    * */
-  maxlength?: number;
+  maxlength?: number
+  /**
+   * @description 显示border
+   * */
+  border?: boolean
   /**
    * @description 是否用圆点填充（默认 false ）
    * */
-  dot?: boolean;
+  dot?: boolean
   /**
    * @description 显示模式，box-盒子模式，line-底部横线模式 （默认 'box' ）
    * */
-  mode?: "box" | string;
+  mode?: 'box' | string
   /**
    * @description 是否细边框 （默认 false ）
    * */
-  hairline?: boolean;
+  hairline?: boolean
   /**
    * @description 字符间的距离 （默认 10 ）
    * */
-  space?: number;
+  space?: number
   /**
    * @description 是否自动获取焦点 （默认 false ）
    * */
-  focus?: boolean;
+  focus?: boolean
   /**
    * @description 字体是否加粗 （默认 false ）
    * */
-  bold?: boolean;
+  bold?: boolean
   /**
    * @description 字体颜色 （默认 '#606266' ）
    * */
-  color?: string;
+  color?: string
   /**
    * @description 字体大小，单位px （默认 18 ）
    * */
-  fontSize?: number;
+  fontSize?: number
   /**
    * @description 输入框的大小，宽等于高 （默认 35 ）
    * */
-  size?: number | string;
+  size?: number | string
   /**
    * @description 是否隐藏原生键盘，如果想用自定义键盘的话，需设置此参数为true （默认 false ）
    * */
-  disabledKeyboard?: boolean;
+  disabledKeyboard?: boolean
   /**
    * @description 边框和线条颜色 （默认 '#c9cacc' ）
    * */
-  borderColor?: string;
+  borderColor?: string
   /**
    * @description 是否禁止输入"."符号 （默认 true ）
    * */
-  disabledDot?: boolean;
+  disabledDot?: boolean
   /**
    * @description 定义需要用到的外部样式
    * */
-  customStyle?: CSSProperties;
+  customStyle?: CSSProperties
 }

package/components/hy-config-provider/props.ts

@@ -5,7 +5,7 @@ const defaultProps: IProps = {
   theme: "light",
   themeColor: ColorConfig.primary,
   themeLightColor: "#ecf5ff",
-  padding: "10px",
+  padding: "",
   customClass: "",
   customStyle: {},
 };

package/components/hy-config-provider/typing.d.ts

@@ -1,28 +1,28 @@
-import type { CSSProperties } from "vue";
+import type { CSSProperties } from 'vue'
 
 export default interface HyConfigProviderProps {
   /**
    * @description dark-暗色、light-亮色
    * */
-  theme?: HyApp.DarkModeType;
+  theme?: HyApp.DarkModeType
   /**
    * @description 主题色（默认 #3c9cff ）
    * */
-  themeColor?: string;
+  themeColor?: string
   /**
    * @description 主题色（默认 #ecf5ff ）
    * */
-  themeLightColor?: string;
+  themeLightColor?: string
   /**
    * @description 内边距（默认 10px ）
    * */
-  padding?: string;
+  padding?: string
   /**
    * @description 定义需要用到的主题类名
    * */
-  customClass?: string | string[];
+  customClass?: string | string[]
   /**
    * @description 定义需要用到的外部样式
    * */
-  customStyle?: CSSProperties;
+  customStyle?: CSSProperties | CSSProperties[]
 }