hy-app 0.2.4 → 0.2.5

package/components/hy-button/hy-button.vue

@@ -26,16 +26,10 @@
     :class="['hy-button', 'hy-reset-button', bemClass]"
   >
     <template v-if="loading">
-      <HyLoading
-        :mode="loadingMode"
-        :size="loadingSize"
-        :color="loadingColor"
-      ></HyLoading>
-      <text
-        class="hy-button__loading-text"
-        :style="[{ fontSize: textSize + 'px' }]"
-        >{{ loadingText || text }}</text
-      >
+      <HyLoading :mode="loadingMode" :size="loadingSize" :color="loadingColor"></HyLoading>
+      <text class="hy-button__loading-text" :style="[{ fontSize: textSize + 'px' }]">
+        {{ loadingText || text }}
+      </text>
     </template>
     <template v-else>
       <HyIcon
@@ -54,11 +48,7 @@
         :customStyle="icon?.customStyle || { marginRight: '2px' }"
       ></HyIcon>
       <slot>
-        <text
-          class="hy-button__text"
-          :style="[{ fontSize: textSize + 'px' }]"
-          >{{ text }}</text
-        >
+        <text class="hy-button__text" :style="[{ fontSize: textSize + 'px' }]">{{ text }}</text>
       </slot>
     </template>
   </button>
@@ -81,17 +71,14 @@
     :style="[baseColor, customStyle]"
   >
     <template v-if="loading">
-      <HyLoading
-        :mode="loadingMode"
-        :size="loadingSize"
-        :color="loadingColor"
-      ></HyLoading>
+      <HyLoading :mode="loadingMode" :size="loadingSize" :color="loadingColor"></HyLoading>
       <text
         class="hy-button__loading-text"
         :style="[nvueTextStyle]"
         :class="[plain && `hy-button__text--plain--${type}`]"
-        >{{ loadingText || text }}</text
       >
+        {{ loadingText || text }}
+      </text>
     </template>
     <template v-else>
       <HyIcon
@@ -118,8 +105,9 @@
           nvueTextStyle,
         ]"
         :class="[plain && `hy-button__text--plain--${type}`]"
-        >{{ text }}</text
       >
+        {{ text }}
+      </text>
     </template>
   </view>
   <!-- #endif -->
@@ -127,49 +115,39 @@
 
 <script lang="ts">
 export default {
-  name: "hy-button",
+  name: 'hy-button',
   options: {
     addGlobalClass: true,
     virtualHost: true,
-    styleIsolation: "shared",
+    styleIsolation: 'shared',
   },
-};
+}
 </script>
 
 <script setup lang="ts">
-import { computed, type CSSProperties, toRefs } from "vue";
-import { bem, throttle } from "../../utils";
-import defaultProps from "./props";
-import { ColorConfig } from "../../config";
-import type IProps from "./typing";
+import { computed, type CSSProperties, toRefs } from 'vue'
+import { bem, throttle } from '../../utils'
+import defaultProps from './props'
+import { ColorConfig } from '../../config'
+import type IProps from './typing'
 
 // 组件
-import HyIcon from "../hy-icon/hy-icon.vue";
-import HyLoading from "../hy-loading/hy-loading.vue";
+import HyIcon from '../hy-icon/hy-icon.vue'
+import HyLoading from '../hy-loading/hy-loading.vue'
 
-const props = withDefaults(defineProps<IProps>(), defaultProps);
-const {
-  disabled,
-  loading,
-  throttleTime,
-  stop,
-  size,
-  type,
-  plain,
-  color,
-  icon,
-} = toRefs(props);
+const props = withDefaults(defineProps<IProps>(), defaultProps)
+const { disabled, loading, throttleTime, stop, size, type, plain, color, icon } = toRefs(props)
 const emit = defineEmits([
-  "click",
-  "getphonenumber",
-  "getuserinfo",
-  "error",
-  "opensetting",
-  "launchapp",
-  "agreeprivacyauthorization",
-]);
+  'click',
+  'getphonenumber',
+  'getuserinfo',
+  'error',
+  'opensetting',
+  'launchapp',
+  'agreeprivacyauthorization',
+])
 
-const textColor = (ColorConfig as any)[type.value];
+const textColor = (ColorConfig as any)[type.value]
 
 /**
  * @description 生成bem风格的类名
@@ -177,133 +155,123 @@ const textColor = (ColorConfig as any)[type.value];
 const bemClass = computed(() => {
   // this.bem为一个computed变量，在mixin中
   if (!color.value) {
-    return bem(
-      "button",
-      props,
-      ["type", "shape", "size"],
-      ["disabled", "plain", "hairline"],
-    );
+    return bem('button', props, ['type', 'shape', 'size'], ['disabled', 'plain', 'hairline'])
   } else {
     // 由于nvue的原因，在有color参数时，不需要传入type，否则会生成type相关的类型，影响最终的样式
-    return bem(
-      "button",
-      props,
-      ["shape", "size"],
-      ["disabled", "plain", "hairline"],
-    );
+    return bem('button', props, ['shape', 'size'], ['disabled', 'plain', 'hairline'])
   }
-});
+})
 
 const loadingColor = computed(() => {
   if (plain.value) {
     // 如果有设置color值，则用color值，否则使用type主题颜色
-    return color.value ? color.value : "";
+    return color.value ? color.value : ''
   }
-  if (type.value === "info") {
-    return "#c9c9c9";
+  if (type.value === 'info') {
+    return '#c9c9c9'
   }
-  return "#fff";
-});
+  return '#fff'
+})
 
 const iconColorCom = computed((): string => {
   // 如果是镂空状态，设置了color就用color值，否则使用主题颜色，
-  if (icon.value?.color) return icon.value?.color;
+  if (icon.value?.color) return icon.value?.color
   if (plain.value) {
-    return color.value ? color.value : "";
+    return color.value ? color.value : ''
   } else {
-    return (type.value = "#ffffff");
+    return '#ffffff'
   }
-});
+})
 const baseColor = computed((): CSSProperties => {
-  let style: CSSProperties = {};
+  let style: CSSProperties = {}
   if (color.value) {
     // 针对自定义了color颜色的情况，镂空状态下，就是用自定义的颜色
-    style.color = plain.value ? color.value : "white";
+    style.color = plain.value ? color.value : 'white'
     if (!plain.value) {
       // 非镂空，背景色使用自定义的颜色
-      style["background"] = color.value;
+      style['background'] = color.value
     }
-    if (color.value.indexOf("gradient") !== -1) {
+    if (color.value.indexOf('gradient') !== -1) {
       // 如果自定义的颜色为渐变色，不显示边框，以及通过backgroundImage设置渐变色
       // weex文档说明可以写borderWidth的形式，为什么这里需要分开写？
       // 因为weex是阿里巴巴为了部门业绩考核而做的你懂的东西，所以需要这么写才有效
-      style.borderTopWidth = 0;
-      style.borderRightWidth = 0;
-      style.borderBottomWidth = 0;
-      style.borderLeftWidth = 0;
+      style.borderTopWidth = 0
+      style.borderRightWidth = 0
+      style.borderBottomWidth = 0
+      style.borderLeftWidth = 0
       if (!plain.value) {
-        style.backgroundImage = color.value;
+        style.backgroundImage = color.value
       }
     } else {
       // 非渐变色，则设置边框相关的属性
-      style.borderColor = color.value;
-      style.borderWidth = "1px";
-      style.borderStyle = "solid";
+      style.borderColor = color.value
+      style.borderWidth = '1px'
+      style.borderStyle = 'solid'
     }
   } else {
     // 针对自定义了color颜色的情况，镂空状态下，就是用自定义的颜色
     // style.color = plain.value ? textColor : "";
   }
-  return style;
-});
+  return style
+})
 
 // nvue版本按钮的字体不会继承父组件的颜色，需要对每一个text组件进行单独的设置
 const nvueTextStyle = computed((): CSSProperties => {
-  let style: CSSProperties = {};
+  let style: CSSProperties = {}
   // 针对自定义了color颜色的情况，镂空状态下，就是用自定义的颜色
-  if (type.value === "info") {
-    style.color = "#323233";
+  if (type.value === 'info') {
+    style.color = '#323233'
   }
   if (color.value) {
-    style.color = plain.value ? color.value : "white";
+    style.color = plain.value ? color.value : 'white'
   }
-  style.fontSize = textSize.value + "px";
-  return style;
-});
+  style.fontSize = textSize.value + 'px'
+  return style
+})
 /**
  * @description 字体大小
  * */
 const textSize = computed((): number => {
-  let fontSize = 14;
-  if (size.value === "large") fontSize = 16;
-  if (size.value === "medium") fontSize = 14;
-  if (size.value === "small") fontSize = 12;
-  if (size.value === "mini") fontSize = 10;
-  return fontSize;
-});
+  let fontSize = 14
+  if (size.value === 'large') fontSize = 16
+  if (size.value === 'medium') fontSize = 14
+  if (size.value === 'small') fontSize = 12
+  if (size.value === 'mini') fontSize = 10
+  return fontSize
+})
 
 const clickHandler = (e: any) => {
   // 非禁止并且非加载中，才能点击
   if (!disabled.value && !loading.value) {
     // 进行节流控制，每this.throttle毫秒内，只在开始处执行
     throttle(() => {
-      emit("click", e);
-    }, throttleTime.value);
+      emit('click', e)
+    }, throttleTime.value)
   }
   // 是否阻止事件传播
-  stop.value && e.stopPropagation();
-};
+  stop.value && e.stopPropagation()
+}
 
 const getphonenumber = (e: any) => {
-  emit("getphonenumber", e);
-};
+  emit('getphonenumber', e)
+}
 const getuserinfo = (e: any) => {
-  emit("getuserinfo", e);
-};
+  emit('getuserinfo', e)
+}
 const error = (e: any) => {
-  emit("error", e);
-};
+  emit('error', e)
+}
 const opensetting = (e: any) => {
-  emit("opensetting", e);
-};
+  emit('opensetting', e)
+}
 const launchapp = (e: any) => {
-  emit("launchapp", e);
-};
+  emit('launchapp', e)
+}
 const agreeprivacyauthorization = (e: any) => {
-  emit("agreeprivacyauthorization", e);
-};
+  emit('agreeprivacyauthorization', e)
+}
 </script>
 
 <style lang="scss" scoped>
-@import "./index.scss";
+@import './index.scss';
 </style>

package/components/hy-calendar/index.scss

@@ -109,8 +109,8 @@
             border-radius: 3px;
             @include m(center) {
               border-radius: 0;
-              //color: #000000;
               background-color: $hy-primary-light;
+              color: $hy-primary;
             }
           }
 

package/components/hy-cell/index.scss

@@ -32,7 +32,7 @@
     /* #ifndef APP-NVUE */
     box-sizing: border-box;
     /* #endif */
-    font-size: $hy-font-size-paragraph;
+    font-size: $hy-font-size-base;
     align-items: center;
     border-radius: $hy-border-margin-padding-sm;
     overflow: hidden;
@@ -81,7 +81,7 @@
         /*行头部*/
         &-title {
           margin-right: $hy-border-margin-padding-sm;
-          flex: $hy-font-size-subtitle;
+          flex: 33rpx;
           display: flex;
           flex-direction: column;
 

package/components/hy-checkbox/index.scss

@@ -2,6 +2,15 @@
 @use "../../theme.scss" as *;
 
 @include b(checkbox) {
+  /* #ifndef APP-NVUE */
+  @include flex(row);
+  /* #endif */
+  overflow: hidden;
+  flex-direction: row;
+  align-items: center;
+  margin-bottom: 5px;
+  margin-top: 5px;
+
   &-group {
     &--row {
       /* #ifndef APP-NVUE */
@@ -15,15 +24,6 @@
     }
   }
 
-  /* #ifndef APP-NVUE */
-  @include flex(row);
-  /* #endif */
-  overflow: hidden;
-  flex-direction: row;
-  align-items: center;
-  margin-bottom: 5px;
-  margin-top: 5px;
-
   &-label--left {
     flex-direction: row;
   }
@@ -98,4 +98,4 @@
       color: $hy-text-color--disabled;
     }
   }
-}
+}

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"
@@ -24,8 +19,9 @@
           fontWeight: bold ? 'bold' : 'normal',
           color: color,
         }"
-        >{{ codeArray[index] }}</text
       >
+        {{ codeArray[index] }}
+      </text>
     </view>
     <input
       :disabled="disabledKeyboard"
@@ -47,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,
@@ -108,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 {