hy-app 0.2.1 → 0.2.2

package/components/hy-button/index.scss

@@ -1,6 +1,10 @@
 @use "../../libs/css/mixin.scss" as *;
 @use "../../theme.scss" as *;
 
+uni-button {
+  margin: 0;
+}
+
 @include b(button){
   height: 40px;
   position: relative;

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

@@ -37,7 +37,6 @@ const themeClass = computed(() => {
 });
 
 const themeStyle = computed(() => {
-  console.log(colorGradient(themeColor.value)[90], themeColor.value);
   return [
     {
       "--hy-theme-color": themeColor.value,

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

@@ -16,13 +16,12 @@
     position: relative;
     z-index: 999;
     background-color: $hy-background--container;
+    color: $hy-icon-color;
 
-    @include m(active) {
+    @include is(active) {
       color: $hy-primary;
-      :deep() {
-        @include b(icon) {
-          color: $hy-primary;
-        }
+      :deep(.hy-icon) {
+        color: $hy-primary;
       }
     }
   }
@@ -57,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;
@@ -72,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-grid/hy-grid.vue

@@ -13,7 +13,7 @@
             :name="item?.icon"
             label-pos="bottom"
             :label="item?.name"
-            :space="item?.iconConfig?.space || iconConfig?.space || 12"
+            :space="item?.iconConfig?.space || iconConfig?.space || 8"
             :color="item?.iconConfig?.color || iconConfig?.color"
             :size="item?.iconConfig?.size || iconConfig?.size || 30"
             :bold="item?.iconConfig?.bold || iconConfig?.bold"
@@ -37,13 +37,13 @@
 
 <script lang="ts">
 export default {
-  name: 'hy-grid',
+  name: "hy-grid",
   options: {
     addGlobalClass: true,
     virtualHost: true,
-    styleIsolation: 'shared'
-  }
-}
+    styleIsolation: "shared",
+  },
+};
 </script>
 
 <script setup lang="ts">

package/components/hy-icon/index.scss

@@ -71,6 +71,7 @@
     line-height: 1;
     /* #endif */
     color: $hy-text-color--grey;
+    font-size: 12px;
   }
 }
 @include b(rotate) {

package/components/hy-modal/hy-modal.vue

@@ -65,10 +65,11 @@
               >{{ cancelText }}</text
             >
           </view>
-          <view
-            class="hy-modal__button-group__wrapper--line"
+          <hy-line
             v-if="showConfirmButton && showCancelButton"
-          ></view>
+            length="48px"
+            direction="column"
+          ></hy-line>
           <view
             class="hy-modal__button-group__wrapper hy-modal__button-group__wrapper--confirm"
             :hover-stay-time="150"
@@ -113,10 +114,9 @@ import { ref, toRefs, watch } from "vue";
 import defaultProps from "./props";
 import type IProps from "./typing";
 import { addUnit } from "../../utils";
-import { IconConfig } from "../../config";
 
 // 组件
-import HyIcon from "../hy-icon/hy-icon.vue";
+import HyLine from "../hy-line/hy-line.vue";
 import HyPopup from "../hy-popup/hy-popup.vue";
 import HyLoading from "../hy-loading/hy-loading.vue";
 

package/components/hy-modal/index.scss

@@ -47,12 +47,6 @@
       align-items: center;
       height: 48px;
 
-      &--line {
-        background: $hy-border-color;
-        width: 1px;
-        height: 48px;
-      }
-
       &--confirm,
       &--only-cancel {
         border-bottom-right-radius: $hy-border-radius-base;