hy-app 0.2.0 → 0.2.2

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

@@ -0,0 +1,223 @@
+<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`,
+      ]"
+      :style="[itemStyle(index)]"
+      v-for="(item, index) in codeLength"
+      :key="index"
+    >
+      <view
+        class="hy-code-input--item__dot"
+        v-if="dot && current > index"
+      ></view>
+      <text
+        v-else
+        class="hy-code-input--item__text"
+        :style="{
+          fontSize: addUnit(fontSize),
+          fontWeight: bold ? 'bold' : 'normal',
+          color: color,
+        }"
+        >{{ codeArray[index] }}</text
+      >
+    </view>
+    <input
+      :disabled="disabledKeyboard"
+      type="number"
+      :focus="focus"
+      :value="inputValue"
+      :maxlength="maxlength"
+      :adjustPosition="adjustPosition"
+      class="hy-code-input__input"
+      @input="inputHandler"
+      :style="{
+        height: boxSize,
+      }"
+      @focus="isFocus = true"
+      @blur="isFocus = false"
+    />
+  </view>
+</template>
+
+<script lang="ts">
+export default {
+  name: "hy-code-input",
+  options: {
+    addGlobalClass: true,
+    virtualHost: true,
+    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";
+
+const props = withDefaults(defineProps<IProps>(), defaultProps);
+const {
+  modelValue,
+  focus,
+  maxlength,
+  disabledDot,
+  size,
+  mode,
+  hairline,
+  space,
+  borderColor,
+} = 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);
+
+watch(
+  () => modelValue.value,
+  (newValue: string | number) => {
+    inputValue.value = String(newValue).substring(0, maxlength.value);
+    current.value = newValue.toString().length;
+  },
+  { immediate: true },
+);
+
+watch(
+  () => isFocus.value,
+  (newValue) => {
+    // #ifdef APP-NVUE
+    if (newValue) {
+      timer = setInterval(() => {
+        opacity.value = Math.abs(opacity.value - 1);
+      }, 600);
+    } else {
+      clearInterval(timer);
+    }
+    // #endif
+  },
+);
+
+onUnmounted(() => {
+  // #ifdef APP-NVUE
+  clearInterval(timer);
+  // #endif
+});
+
+// 根据长度，循环输入框的个数，因为头条小程序数值不能用于v-for
+const codeLength = computed(() => {
+  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 (mode.value === "box") {
+      // 设置盒子的边框，如果是细边框，则设置为1px宽度
+      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";
+        }
+        if (index === codeLength.value.length - 1) {
+          style.borderTopRightRadius = "3px";
+          style.borderBottomRightRadius = "3px";
+        }
+        // 最后一个盒子的右边框需要保留
+        if (index !== codeLength.value.length - 1) {
+          style.borderRight = "none";
+        }
+      }
+    }
+    if (index !== codeLength.value.length - 1) {
+      // 设置验证码字符之间的距离，通过margin-right设置，最后一个字符，无需右边框
+      style.marginRight = addUnit(space.value);
+    } else {
+      // 最后一个盒子的有边框需要保留
+      style.marginRight = 0;
+    }
+
+    return style;
+  };
+});
+
+/**
+ * @description 将输入的值，转为数组，给item历遍时，根据当前的索引显示数组的元素
+ */
+const codeArray = computed(() => {
+  return String(inputValue.value).split("");
+});
+
+/**
+ * @description 监听输入框的值发生变化
+ * */
+const inputHandler = (e: any) => {
+  const value = e.detail.value;
+  inputValue.value = value;
+  // 是否允许输入“.”符号
+  if (disabledDot.value) {
+    nextTick(() => {
+      inputValue.value = value.replace(".", "");
+    });
+  }
+  // 未达到maxlength之前，发送change事件，达到后发送finish事件
+  emit("change", value);
+  // 修改通过v-model双向绑定的值
+  emit("update:modelValue", value);
+  // 达到用户指定输入长度时，发出完成事件
+  if (String(value).length >= Number(maxlength.value)) {
+    emit("finish", value);
+  }
+};
+</script>
+
+<style scoped lang="scss">
+@import "./index.scss";
+@import "../../libs/css/mixin.scss";
+@import "../../theme.scss";
+@include b(code-input) {
+  @include m(item) {
+    &__box {
+      &__active {
+        width: v-bind(boxSize);
+        height: v-bind(boxSize);
+        border-width: v-bind(borderWidth);
+      }
+    }
+    &__line {
+      &::after {
+        height: v-bind(lineHeight);
+        background-color: var(--hy-border-color);
+      }
+    }
+  }
+}
+</style>

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

@@ -0,0 +1,108 @@
+@use "../../theme.scss" as *;
+@use "../../libs/css/mixin.scss" as *;
+
+@include b(code-input) {
+  @include flex;
+  position: relative;
+  overflow: hidden;
+
+  @include m(item) {
+    @include flex;
+    justify-content: center;
+    align-items: center;
+    position: relative;
+
+    &__text {
+      font-size: 15px;
+      color: $hy-icon-color;
+    }
+
+    &__dot {
+      width: 7px;
+      height: 7px;
+      border-radius: 100px;
+      background-color: $hy-icon-color;
+    }
+
+    /* 方块模式 */
+    &__box {
+      border-color: $hy-border-color--2;
+      &__border {
+        border-color: $hy-primary !important;
+
+        @include b(code-input--item__dot) {
+          background-color: $hy-primary;
+        }
+
+        text {
+          color: $hy-primary;
+        }
+      }
+
+      &__active {
+        border-color: $hy-primary !important;
+        animation: 1.5s hy-cursor-flicker infinite;
+      }
+    }
+
+    /* 线条模式 */
+    &__line {
+      &::after {
+        content: "";
+        position: absolute;
+        bottom: 0;
+        border-radius: $hy-border-radius-semicircle;
+        width: 40px;
+        background-color: $hy-border-color--2;
+      }
+
+      /* 边框 */
+      &__border {
+        @include b(code-input--item__dot) {
+          background-color: $hy-primary;
+        }
+        &::after {
+          content: "";
+          background-color: $hy-primary !important;
+        }
+        text {
+          color: $hy-primary;
+        }
+      }
+
+      /* 状态 */
+      &__active {
+        &::after {
+          content: "";
+          background-color: $hy-primary !important;
+          animation: 1.5s hy-cursor-flicker infinite;
+        }
+      }
+    }
+  }
+
+  &__input {
+    // 之所以需要input输入框，是因为有它才能唤起键盘
+    // 这里将它设置为两倍的屏幕宽度，再将左边的一半移出屏幕，为了不让用户看到输入的内容
+    position: absolute;
+    left: -750rpx;
+    width: 1500rpx;
+    top: 0;
+    background-color: transparent;
+    text-align: left;
+  }
+}
+
+/* #ifndef APP-NVUE */
+@keyframes hy-cursor-flicker {
+  0% {
+    opacity: 0.2;
+  }
+  50% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0.2;
+  }
+}
+/* #endif */

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

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

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

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

package/components/hy-config-provider/hy-config-provider.vue

@@ -20,6 +20,7 @@ import { computed, toRefs } from "vue";
 import type IProps from "./typing";
 import defaultProps from "./props";
 import { addUnit } from "@/package";
+import { colorGradient } from "@/package/utils";
 
 const props = withDefaults(defineProps<IProps>(), defaultProps);
 const {
@@ -39,7 +40,7 @@ const themeStyle = computed(() => {
   return [
     {
       "--hy-theme-color": themeColor.value,
-      "--hy-theme-color--light": themeLightColor.value,
+      "--hy-theme--light": colorGradient(themeColor.value)[90],
       padding: addUnit(padding.value),
     },
     customStyle.value,

package/components/hy-config-provider/index.scss

@@ -1,12 +1,6 @@
 @use "../../libs/css/mixin.scss" as *;
 @use "../../theme.scss" as *;
 
-@include b(theme) {
-  @include m(dark) {
-    background-color: $hy-dark-background;
-    color: $hy-dark-color;
-  }
-}
 
 @include b(config-provider) {
   box-sizing: border-box;
@@ -18,4 +12,6 @@
   height: 100vh;
   /* #endif */
   overflow: auto;
+  background-color: $hy-background;
+  color: $hy-text-color;
 }

package/components/hy-count-down/index.scss

@@ -1,15 +1,6 @@
 @use "../../libs/css/mixin.scss" as *;
 @use "../../theme.scss" as *;
 
-/* 暗色主题 */
-@include b(theme){
-  @include m(dark) {
-    @include b(count-down) {
-      color: $hy-dark-color;
-    }
-  }
-}
-
 @include b(count-down) {
   &__text {
     font-size: 15px;

package/components/hy-count-to/index.scss

@@ -1,19 +1,11 @@
 @use "../../theme.scss" as *;
 @use "../../libs/css/mixin.scss" as *;
 
-/* 暗色主题 */
-@include b(theme){
-  @include m(dark) {
-    @include b(count-to) {
-      color: $hy-dark-color;
-    }
-  }
-}
 
 @include b(count-to) {
   /* #ifndef APP-NVUE */
   display: inline-flex;
   /* #endif */
   text-align: center;
-  color: $hy-tips-color;
+  color: $hy-text-color;
 }

package/components/hy-divider/index.scss

@@ -15,12 +15,13 @@
   }
 
   &__text {
+    color: $hy-text-color--3;
     margin: 0 $hy-border-margin-padding-sm;
   }
 
   &__dot {
     font-size: $hy-font-size-sm;
     margin: 0 $hy-border-margin-padding-sm;
-    color: #c0c4cc;
+    color: $hy-text-color--3;
   }
 }

package/components/hy-divider/props.ts

@@ -8,8 +8,8 @@ const defaultProps: IProps = {
   textPosition: "center",
   text: "",
   textSize: 14,
-  textColor: "#909399",
-  lineColor: "#dcdfe6",
+  textColor: "",
+  lineColor: "",
   loadingIcon: IconConfig.LOADING,
   loadMoreText: "加载更多",
   loadingText: "正在加载...",

package/components/hy-dropdown/index.scss

@@ -5,7 +5,7 @@
   width: 100%;
   display: flex;
   align-items: center;
-  background-color: #fff;
+  background-color: $hy-background;
   box-sizing: border-box;
 }
 

package/components/hy-dropdown/props.ts

@@ -3,7 +3,7 @@ import { IconConfig } from "@/package";
 
 const defaultProps: IProps = {
   activeColor: "",
-  inactiveColor: "#606266",
+  inactiveColor: "",
   closeOnClickMask: true,
   sticky: true,
   height: 40,

package/components/hy-dropdown-item/hy-dropdown-item.vue

@@ -1,10 +1,7 @@
 <template>
   <!-- 标题栏 -->
   <view
-    :class="[
-      'hy-dropdown-item__header',
-      isOpen && 'hy-dropdown-item__header--active',
-    ]"
+    :class="['hy-dropdown-item__header', isOpen && 'is-active']"
     @click="handleClick"
   >
     <text
@@ -39,7 +36,7 @@
           <view
             :class="[
               'hy-dropdown-item__main--container__list-item',
-              isOpen && 'hy-dropdown-item__main--container__list--active',
+              currentIndex === index && 'is-active',
             ]"
             v-for="(item, index) in menus"
             :key="item.value || index"

package/components/hy-dropdown-item/index.scss

@@ -1,21 +1,6 @@
 @use "../../theme.scss" as *;
 @use "../../libs/css/mixin.scss" as *;
 
-/* 暗色主题 */
-@include b(theme){
-  @include m(dark) {
-    @include b(dropdown-item) {
-      color: $hy-dark-color;
-      &__header {
-        background-color: $hy-dark-background--container;
-      }
-      &__main--container {
-        background-color: $hy-dark-background--container;
-      }
-    }
-  }
-}
-
 @include b(dropdown-item) {
   &__header {
     width: 100%;
@@ -30,14 +15,13 @@
     text-align: center;
     position: relative;
     z-index: 999;
-    background-color: #ffffff;
+    background-color: $hy-background--container;
+    color: $hy-icon-color;
 
-    &--active {
+    @include is(active) {
       color: $hy-primary;
-      :deep() {
-        @include b(icon) {
-          color: $hy-primary;
-        }
+      :deep(.hy-icon) {
+        color: $hy-primary;
       }
     }
   }
@@ -53,7 +37,7 @@
     background-color: rgba(0, 0, 0, 0);
 
     &--container {
-      background-color: #fff;
+      background-color: $hy-background--container;
       min-height: 200rpx;
       position: absolute;
       top: -100%;
@@ -72,14 +56,6 @@
         width: 100%;
         padding: 0 35rpx;
         box-sizing: border-box;
-        &--active {
-          color: $hy-primary;
-          :deep() {
-            @include b(icon) {
-              color: $hy-primary;
-            }
-          }
-        }
         &-item {
           width: 100%;
           padding: 30rpx 0;
@@ -87,6 +63,13 @@
           display: flex;
           align-items: center;
 
+          @include is(active) {
+            color: $hy-primary;
+            :deep(.hy-icon) {
+              color: $hy-primary;
+            }
+          }
+
           &:not(:last-of-type) {
             border-bottom: $hy-border-line;
           }

package/components/hy-empty/index.scss

@@ -1,15 +1,6 @@
 @use "../../theme.scss" as *;
 @use "../../libs/css/mixin.scss" as *;
 
-/* 暗色主题 */
-@include b(theme){
-  @include m(dark) {
-    @include b(empty) {
-      background-color: $hy-dark-background;
-      color: $hy-dark-color;
-    }
-  }
-}
 
 @include b(empty) {
   top: 0;
@@ -20,7 +11,7 @@
   justify-content: center;
   align-items: center;
   flex-direction: column;
-  background: $hy-light-background;
+  background: $hy-background;
   &__description {
     width: 70%;
     text-align: center;

package/components/hy-float-button/index.scss

@@ -1,19 +1,11 @@
 @use "../../theme.scss" as *;
 @use "../../libs/css/mixin.scss" as *;
 
-/* 暗色主题 */
-@include b(theme){
-  @include m(dark) {
-    @include b(float-button) {
-      //color: $hy-dark-color;
-    }
-  }
-}
 
 @include b(float-button) {
   position: relative;
   background-color: $hy-primary;
-  color: $hy-dark-color;
+  color: #FFFFFF;
   &__circle {
     border-radius: $hy-border-radius-semicircle;
   }
@@ -48,6 +40,9 @@
     align-items: center;
     transition: 0.4s ease;
     background-color: $hy-primary;
+    :deep(.hy-icon) {
+      color: #FFFFFF;
+    }
   }
 
   &__menus {