hy-app 0.3.16 → 0.4.1

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

@@ -12,12 +12,12 @@
     align-items: center;
     position: relative;
 
-    &__text {
+    @include e(text) {
       font-size: 15px;
       color: $hy-icon-color;
     }
 
-    &__dot {
+    @include e(dot) {
       width: 7px;
       height: 7px;
       border-radius: 100px;
@@ -25,10 +25,10 @@
     }
 
     /* 无边框 */
-    &__not {
+    @include e(no) {
       background-color: $hy-background--track;
       border-radius: $hy-border-radius-sm;
-      &__active {
+      @include m(active) {
         &:before {
           content: "";
           background-color: $hy-text-color;
@@ -41,28 +41,28 @@
     }
 
     /* 方块模式 */
-    &__box {
+    @include e(box) {
       border-color: $hy-border-color--2;
-      &__border {
+      @include e(border) {
         border-color: $hy-primary !important;
 
         @include b(code-input--item__dot) {
           background-color: $hy-primary;
         }
 
-        text {
+        @include b(code-input--item__text) {
           color: $hy-primary;
         }
       }
 
-      &__active {
+      @include e(active) {
         border-color: $hy-primary !important;
         animation: 1.5s hy-cursor-flicker infinite;
       }
     }
 
     /* 线条模式 */
-    &__line {
+    @include e(line) {
       &::after {
         content: "";
         position: absolute;
@@ -73,7 +73,7 @@
       }
 
       /* 边框 */
-      &__border {
+      @include e(border) {
         @include b(code-input--item__dot) {
           background-color: $hy-primary;
         }
@@ -87,7 +87,7 @@
       }
 
       /* 状态 */
-      &__active {
+      @include e(active) {
         &::after {
           content: "";
           background-color: $hy-primary !important;
@@ -97,7 +97,7 @@
     }
   }
 
-  &__input {
+  @include e(input) {
     // 之所以需要input输入框，是因为有它才能唤起键盘
     // 这里将它设置为两倍的屏幕宽度，再将左边的一半移出屏幕，为了不让用户看到输入的内容
     position: absolute;

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

@@ -2,7 +2,7 @@
 @use "../../libs/css/theme" as *;
 
 @include b(count-down) {
-  &__text {
+  @include e(text) {
     font-size: 15px;
     line-height: 22px;
   }

package/components/hy-datetime-picker/index.scss

@@ -2,7 +2,7 @@
 
 @include b(datetime-picker) {
   flex: 1;
-  &__has-input {
+  @include e(has-input) {
     position: relative;
     display: flex;
     flex-direction: column;

package/components/hy-datetime-picker/typing.d.ts

@@ -1,7 +1,6 @@
 import { DateModeEnum } from "../../typing";
 import type { CSSProperties } from "vue";
 import type HyInputProps from "../hy-input/typing";
-import HyApp from "hy-app";
 
 export default interface HyDatetimeProps {
   /**

package/components/hy-divider/index.scss

@@ -8,18 +8,18 @@
   align-items: center;
   min-height: 35px;
 
-  &__line {
+  @include e(line) {
     /* #ifndef APP-NVUE */
     vertical-align: middle;
     /* #endif */
   }
 
-  &__text {
+  @include e(text) {
     color: $hy-text-color--3;
     margin: 0 $hy-border-margin-padding-sm;
   }
 
-  &__dot {
+  @include e(dot) {
     font-size: $hy-font-size-sm;
     margin: 0 $hy-border-margin-padding-sm;
     color: $hy-text-color--3;

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

@@ -101,7 +101,7 @@ defineOptions({});
 // const props = withDefaults(defineProps<IProps>(), defaultProps)
 const props = defineProps({
   /** 获取值 */
-  modelValue: String,
+  modelValue: [String, Number],
   /** 标题 */
   title: String,
   /** 下拉选择值 */
@@ -206,7 +206,7 @@ const onSelect = (item: DropdownMenuItem, index: number) => {
   if (index !== currentIndex.value) {
     currentIndex.value = index;
     emit("change", item, index);
-    emit("update:modelValue", item);
+    emit("update:modelValue", item.value);
   }
 };
 

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

@@ -2,7 +2,7 @@
 @use "../../libs/css/mixin.scss" as *;
 
 @include b(dropdown-item) {
-  &__header {
+  @include e(header) {
     width: 100%;
     height: 100%;
     padding: $hy-border-margin-padding-base;
@@ -26,7 +26,7 @@
     }
   }
 
-  &__main {
+  @include e(main) {
     position: fixed;
     left: 0;
     right: 0;
@@ -36,7 +36,7 @@
     box-sizing: border-box;
     background-color: rgba(0, 0, 0, 0);
 
-    &--container {
+    @include m(container) {
       background-color: $hy-background--container;
       min-height: 200rpx;
       position: absolute;
@@ -52,7 +52,7 @@
       &.hidden {
         animation: hiddenAnimaFrames 0.5s forwards;
       }
-      &__list {
+      @include e(list) {
         width: 100%;
         padding: 0 35rpx;
         box-sizing: border-box;
@@ -74,7 +74,7 @@
             border-bottom: $hy-border-line;
           }
 
-          &--label {
+          @include m(label) {
             font-size: 30rpx;
             flex: 1;
             width: 0;

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

@@ -8,7 +8,7 @@
         'hy-float-button__animation': float,
         'hy-float-button__shadow': shadow,
       },
-      `hy-float-button__${shape}`,
+      `hy-float-button--${shape}`,
       customClass,
     ]"
     @touchmove.stop.prevent="handleTouchMove"

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

@@ -6,19 +6,15 @@
   position: relative;
   background-color: $hy-primary;
   color: #FFFFFF;
-  &__circle {
-    border-radius: $hy-border-radius-semicircle;
-  }
 
-  &__square {
-    border-radius: $hy-border-radius-sm;
-  }
+  @include borderRadio(circle);
+  @include borderRadio(square);
 
-  &__shadow {
+  @include e(shadow) {
     box-shadow: $hy-box-shadow;
   }
 
-  &__animation {
+  @include e(animation) {
     animation: floatAnimation 2s ease-in-out infinite;
     @keyframes floatAnimation {
       0%,
@@ -31,7 +27,7 @@
     }
   }
 
-  &__container {
+  @include e(container) {
     border-radius: 50%;
     width: 100%;
     height: 100%;
@@ -45,14 +41,14 @@
     }
   }
 
-  &__menus {
+  @include e(menus) {
     position: absolute;
     z-index: -1;
     overflow: hidden;
     max-height: 250px;
     box-sizing: border-box;
     background-color: $hy-primary;
-    &--item {
+    @include m(item) {
       font-size: 28rpx;
       box-sizing: border-box;
       white-space: nowrap;
@@ -62,12 +58,7 @@
       align-items: center;
     }
 
-    &--circle {
-      border-radius: $hy-border-radius-semicircle;
-    }
-
-    &--square {
-      border-radius: $hy-border-radius-sm;
-    }
+    @include borderRadio(circle);
+    @include borderRadio(square);
   }
 }

package/components/hy-folding-panel/index.scss

@@ -2,7 +2,7 @@
 @use "../../libs/css/mixin.scss" as *;
 
 @include b(folding-panel) {
-  &__main {
+  @include e(main) {
     overflow: auto;
     transition: height 0.5s ease;
   }

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

@@ -1,20 +1,19 @@
 <template>
-  <view
-    class="hy-form-item"
-    :class="[
-      `hy-form-item--${labelPosition}`,
-      formContext.border && 'hy-border__bottom',
-    ]"
-  >
+  <view class="hy-form-item" :class="[`hy-form-item--${labelPosition}`]">
     <view v-if="label" class="hy-form-item__label" :style="labelStyle">
       <text v-if="isRequired" class="hy-form-item__label--required">*</text>
       {{ label }}
     </view>
-    <view class="hy-form-item__content">
+    <view
+      :class="[
+        'hy-form-item__content',
+        formContext.border && 'hy-border__bottom',
+      ]"
+    >
       <slot></slot>
-      <view v-if="errorMessage" class="hy-form-item__error">
-        {{ errorMessage }}
-      </view>
+    </view>
+    <view v-if="errorMessage" class="hy-form-item__error">
+      {{ errorMessage }}
     </view>
   </view>
 </template>

package/components/hy-grid/hy-grid.vue

@@ -2,33 +2,33 @@
   <view class="hy-grid" ref="hy-grid" :style="gridStyle">
     <template v-for="(item, i) in list" :key="i">
       <view
-        class="hy-grid-item"
-        hover-class="hy-grid-item--hover-class"
+        class="hy-grid__item"
+        hover-class="hy-grid__item--hover-class"
         :hover-stay-time="200"
         @tap="childClick(item)"
         :style="itemStyle"
       >
-        <slot :record="item">
-          <HyIcon
-            :name="item[customKeys?.icon]"
-            label-pos="bottom"
-            :label="item[customKeys?.name]"
-            :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"
-            :customPrefix="item?.iconConfig?.customPrefix"
-            :imgMode="item?.iconConfig?.imgMode || iconConfig?.imgMode"
-            :width="item?.iconConfig?.width || iconConfig?.width"
-            :height="item?.iconConfig?.height || iconConfig?.height"
-            :top="item?.iconConfig?.top || iconConfig?.top"
-            :stop="item?.iconConfig?.stop || iconConfig?.stop"
-            :round="item?.iconConfig?.round || iconConfig?.round || 6"
-            :customStyle="
-              item?.iconConfig?.customStyle || iconConfig?.customStyle
-            "
-          ></HyIcon>
-        </slot>
+        <slot v-if="$slots.default" :record="item"></slot>
+        <HyIcon
+          v-else
+          :name="item[customKeys?.icon]"
+          label-pos="bottom"
+          :label="item[customKeys?.name]"
+          :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"
+          :customPrefix="item?.iconConfig?.customPrefix"
+          :imgMode="item?.iconConfig?.imgMode || iconConfig?.imgMode"
+          :width="item?.iconConfig?.width || iconConfig?.width"
+          :height="item?.iconConfig?.height || iconConfig?.height"
+          :top="item?.iconConfig?.top || iconConfig?.top"
+          :stop="item?.iconConfig?.stop || iconConfig?.stop"
+          :round="item?.iconConfig?.round || iconConfig?.round || 6"
+          :customStyle="
+            item?.iconConfig?.customStyle || iconConfig?.customStyle
+          "
+        ></HyIcon>
       </view>
     </template>
   </view>

package/components/hy-grid/index.scss

@@ -11,7 +11,7 @@
   /* #ifndef APP-NVUE */
   display: grid;
   /* #endif */
-  &-item {
+  @include e(item) {
     align-items: center;
     justify-content: center;
     position: relative;
@@ -27,14 +27,8 @@
     float: left;
     /* #endif */
 
-    &--hover-class {
+    @include m(hover-class) {
       opacity: 0.7;
     }
-
-    &__title {
-      color: $hy-text-color;
-      line-height: 60rpx;
-      font-size: $hy-font-size-sm;
-    }
   }
 }

package/components/hy-icon/index.scss

@@ -30,41 +30,41 @@
     justify-content: center;
   }
 
-  &__icon {
+  @include e(icon) {
     position: relative;
     @include flex;
     align-items: center;
     vertical-align: -100%;
 
-    &--primary {
+    @include m(primary) {
       color: $hy-primary;
     }
 
-    &--success {
+    @include m(success) {
       color: $hy-success;
     }
 
-    &--error {
+    @include m(error) {
       color: $hy-error;
     }
 
-    &--warning {
+    @include m(warning) {
       color: $hy-warning;
     }
 
-    &--info {
+    @include m(info) {
       color: $hy-info;
     }
   }
 
-  &__img {
+  @include e(mg) {
     /* #ifndef APP-NVUE */
     height: auto;
     will-change: transform;
     /* #endif */
   }
 
-  &__label {
+  @include e(label) {
     @include lineEllipsis;
     /* #ifndef APP-NVUE */
     line-height: 1;

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

@@ -5,34 +5,34 @@
   >
     <view class="hy-input__content">
       <view
-        class="hy-input__content__prefix-icon"
+        class="hy-input__content--prefix-icon"
         v-if="prefixIcon?.name || $slots.prefix"
-        @tap="onPrefix"
+        @tap.stop="onPrefix"
       >
-        <slot name="prefix">
-          <HyIcon
-            :name="prefixIcon?.name"
-            :size="prefixIcon?.size"
-            :color="prefixIcon?.color"
-            :bold="prefixIcon?.bold"
-            :customPrefix="prefixIcon?.customPrefix"
-            :imgMode="prefixIcon?.imgMode"
-            :width="prefixIcon?.width"
-            :height="prefixIcon?.height"
-            :top="prefixIcon?.top"
-            :stop="prefixIcon?.stop"
-            :round="prefixIcon?.round"
-            :customStyle="prefixIcon?.customStyle"
-          ></HyIcon>
-        </slot>
+        <slot v-if="$slots.prefix" name="prefix"></slot>
+        <HyIcon
+          v-else
+          :name="prefixIcon?.name"
+          :size="prefixIcon?.size"
+          :color="prefixIcon?.color"
+          :bold="prefixIcon?.bold"
+          :customPrefix="prefixIcon?.customPrefix"
+          :imgMode="prefixIcon?.imgMode"
+          :width="prefixIcon?.width"
+          :height="prefixIcon?.height"
+          :top="prefixIcon?.top"
+          :stop="prefixIcon?.stop"
+          :round="prefixIcon?.round"
+          :customStyle="prefixIcon?.customStyle"
+        ></HyIcon>
       </view>
-      <view class="hy-input__content__field-wrapper" @tap="clickHandler">
+      <view class="hy-input__content--field-wrapper" @tap="clickHandler">
         <!-- 根据uni-app的input组件文档，H5和APP中只要声明了password参数(无论true还是false)，type均失效，此时
 					为了防止type=number时，又存在password属性，type无效，此时需要设置password为undefined
 				 -->
         <input
           ref="input-native"
-          class="hy-input__content__field-wrapper__field"
+          class="hy-input__content--field-wrapper__field"
           :style="[inputStyle]"
           :type="type"
           :focus="focus"
@@ -61,9 +61,9 @@
         />
       </view>
       <view
-        class="hy-input__content__clear"
+        class="hy-input__content--clear"
         v-if="isShowClear"
-        @click="onClear"
+        @tap.stop="onClear"
       >
         <HyIcon
           :name="IconConfig.CLOSE"
@@ -73,26 +73,26 @@
         ></HyIcon>
       </view>
       <view
-        class="hy-input__content__subfix-icon"
+        class="hy-input__content--subfix-icon"
         v-if="suffixIcon?.name || $slots.suffix"
-        @tap="onSuffix"
+        @tap.stop="onSuffix"
       >
-        <slot name="suffix">
-          <HyIcon
-            :name="suffixIcon?.name"
-            :size="suffixIcon?.size"
-            :color="suffixIcon?.color"
-            :bold="suffixIcon?.bold"
-            :customPrefix="suffixIcon?.customPrefix"
-            :imgMode="suffixIcon?.imgMode"
-            :width="suffixIcon?.width"
-            :height="suffixIcon?.height"
-            :top="suffixIcon?.top"
-            :stop="suffixIcon?.stop"
-            :round="suffixIcon?.round"
-            :customStyle="suffixIcon?.customStyle"
-          ></HyIcon>
-        </slot>
+        <slot v-if="$slots.suffix" name="suffix"></slot>
+        <HyIcon
+          v-else
+          :name="suffixIcon?.name"
+          :size="suffixIcon?.size"
+          :color="suffixIcon?.color"
+          :bold="suffixIcon?.bold"
+          :customPrefix="suffixIcon?.customPrefix"
+          :imgMode="suffixIcon?.imgMode"
+          :width="suffixIcon?.width"
+          :height="suffixIcon?.height"
+          :top="suffixIcon?.top"
+          :stop="suffixIcon?.stop"
+          :round="suffixIcon?.round"
+          :customStyle="suffixIcon?.customStyle"
+        ></HyIcon>
       </view>
     </view>
   </view>
@@ -353,7 +353,7 @@ watch(
  * */
 const isShowClear = computed(() => {
   const { clearable, readonly } = props;
-  return clearable && !readonly && !!focused.value && innerValue.value !== "";
+  return clearable && !readonly && innerValue.value !== "";
 });
 /**
  * @description 组件的类名
@@ -362,11 +362,11 @@ const inputClass = computed((): string => {
   let classes: string[] = [],
     { border, shape } = props;
   border === "surround" &&
-    (classes = classes.concat(["hy-border", "hy-input--radius"]));
-  classes.push(`hy-input--${shape}`);
+    (classes = classes.concat(["hy-border", "hy-input__radius"]));
+  classes.push(`hy-input__${shape}`);
   border === "bottom" &&
-    (classes = classes.concat(["hy-border__bottom", "hy-input--no-radius"]));
-  props.disabled && classes.push("hy-input--disabled");
+    (classes = classes.concat(["hy-border__bottom", "hy-input__no-radius"]));
+  props.disabled && classes.push("hy-input__disabled");
   return classes.join(" ");
 });
 

package/components/hy-input/index.scss

@@ -8,12 +8,11 @@
   flex: 1;
   color: $hy-text-color;
 
-  &--radius,
-  &--square {
+  @include e(radius, square) {
     border-radius: 4px;
   }
 
-  @include m(disabled) {
+  @include e(disabled) {
     background-color: $hy-background--disabled;
     color: $hy-text-color--disabled;
     :deep(.hy-icon) {
@@ -21,36 +20,43 @@
     }
   }
 
-  &--no-radius {
+  @include e(no-radius){
     border-radius: 0;
   }
 
-  &--circle {
+  @include e(circle) {
     border-radius: 100px;
   }
 
-  &__content {
+  @include e(content) {
     flex: 1;
     @include flex(row);
     align-items: center;
     justify-content: space-between;
 
-    &__field-wrapper {
+    @include m(field-wrapper) {
       position: relative;
       @include flex(row);
-      margin: 0;
       flex: 1;
+      margin-right: $hy-border-margin-padding-base;
 
-      &__field {
+      @include e(field) {
+        background: transparent;
         line-height: 26px;
         text-align: left;
         height: 24px;
         font-size: 15px;
         flex: 1;
+        color: $hy-text-color;
+        caret-color: $hy-text-color;
+      }
+
+      :deep(.input-placeholder) {
+        color: $hy-text-color--placeholder;
       }
     }
 
-    &__clear {
+    @include m(clear) {
       width: 20px;
       height: 20px;
       border-radius: 100px;
@@ -59,15 +65,14 @@
       align-items: center;
       justify-content: center;
       transform: scale(0.82);
-      margin-left: 4px;
     }
 
-    &__subfix-icon {
-      margin-left: 4px;
+    @include m(subfix-icon) {
+      margin-left: $hy-border-margin-padding-sm;
     }
 
-    &__prefix-icon {
-      margin-right: 4px;
+    @include m(prefix-icon) {
+      margin-right: $hy-border-margin-padding-sm;
     }
   }
 }