hy-app 0.3.16 → 0.4.1

package/components/hy-cell/hy-cell.vue

@@ -5,137 +5,144 @@
       v-if="title || $slots['title']"
     >
       <!-- @slot 标题插槽 -->
-      <slot name="title" :title="title">
-        <text class="hy-cell--title__text">{{ title }}</text>
-      </slot>
+      <slot v-if="$slots.title" name="title" :title="title"></slot>
+      <text v-else class="hy-cell--title__text">{{ title }}</text>
     </view>
     <view
-      class="hy-cell--body"
+      class="hy-cell__body"
       :style="{ 'border-radius': addUnit(borderRadius) }"
     >
       <!-- @slot 整体插槽 -->
-      <slot>
-        <template v-for="(item, i) in list" :key="i">
-          <view
-            :class="ItemClass"
-            :hover-class="containerClass(item)"
-            :hover-stay-time="250"
-            :style="{
-              borderBottom:
-                border && i !== list.length - 1 ? '1rpx solid #c8c7cc66' : '',
-            }"
-            @tap="clickHandler($event, item, i)"
-          >
-            <view class="hy-cell--body__container__content">
-              <view
-                v-if="item?.icon?.name || $slots.icon"
-                class="hy-cell--body__container__content-icon"
-              >
-                <!-- @slot 图标插槽 -->
-                <slot name="icon" :icon="item?.icon">
-                  <HyIcon
-                    :size="iconSize"
-                    :name="item?.icon?.name"
-                    :color="
-                      disabled || item?.disabled ? '#c0c0c0' : item?.icon?.color
-                    "
-                    :bold="item?.icon?.bold"
-                    :customPrefix="item?.icon?.customPrefix"
-                    :imgMode="item?.icon?.imgMode"
-                    :width="item?.icon?.width"
-                    :height="item?.icon?.height"
-                    :top="item?.icon?.top"
-                    :stop="item?.icon?.stop"
-                    :round="item?.icon?.round"
-                    :customStyle="item?.icon?.customStyle"
-                  ></HyIcon>
-                </slot>
-              </view>
-              <view class="hy-cell--body__container__content-title">
-                <!-- 将slot与默认内容用if/else分开主要是因为微信小程序不支持slot嵌套传递，这样才能解决collapse组件的slot不失效问题，label暂时未用到。 -->
-                <!-- @slot 列表标题插槽 -->
-                <slot name="cell-title" :title="item?.title">
-                  <text
-                    class="hy-cell--body__container__content-title--text"
-                    :class="[
-                      (disabled || item?.disabled) && 'hy-cell--disabled',
-                    ]"
-                  >
-                    {{ item?.title }}
-                  </text>
-                </slot>
-                <!-- @slot 列表小标题插槽 -->
-                <slot name="sub" v-if="item?.subhead" :sub="item.subhead">
-                  <text
-                    class="hy-cell--body__container__content-title--sub"
-                    :class="[disabled && 'hy-cell--disabled']"
-                  >
-                    {{ item.subhead }}
-                  </text>
-                </slot>
-              </view>
-            </view>
+      <slot v-if="$slots.default"></slot>
+      <template v-else v-for="(item, i) in list" :key="i">
+        <view
+          :class="ItemClass"
+          :hover-class="containerClass(item)"
+          :hover-stay-time="250"
+          :style="{
+            borderBottom:
+              border && i !== list.length - 1 ? '1rpx solid #c8c7cc66' : '',
+          }"
+          @tap="clickHandler($event, item, i)"
+        >
+          <view class="hy-cell__body--container__content">
             <view
-              class="hy-cell--body__container__center"
-              :style="{
-                justifyContent:
-                  arrange === 'left'
-                    ? 'flex-start'
-                    : arrange === 'right'
-                      ? 'flex-end'
-                      : 'center',
-              }"
+              v-if="item?.icon?.name || $slots.icon"
+              class="hy-cell__body--container__content--icon"
             >
-              <!-- @slot 值内容插槽 -->
-              <slot name="value" :record="item">
+              <!-- @slot 图标插槽 -->
+              <slot v-if="$slots.icon" name="icon" :icon="item?.icon"></slot>
+              <HyIcon
+                v-else
+                :size="iconSize"
+                :name="item?.icon?.name"
+                :color="
+                  disabled || item?.disabled ? '#c0c0c0' : item?.icon?.color
+                "
+                :bold="item?.icon?.bold"
+                :customPrefix="item?.icon?.customPrefix"
+                :imgMode="item?.icon?.imgMode"
+                :width="item?.icon?.width"
+                :height="item?.icon?.height"
+                :top="item?.icon?.top"
+                :stop="item?.icon?.stop"
+                :round="item?.icon?.round"
+                :customStyle="item?.icon?.customStyle"
+              ></HyIcon>
+            </view>
+            <view class="hy-cell__body--container__content--title">
+              <!-- 将slot与默认内容用if/else分开主要是因为微信小程序不支持slot嵌套传递，这样才能解决collapse组件的slot不失效问题，label暂时未用到。 -->
+              <!-- @slot 列表标题插槽 -->
+              <slot
+                v-if="$slots['cell-title']"
+                name="cell-title"
+                :title="item?.title"
+              ></slot>
+              <text
+                v-else
+                class="hy-cell__body--container__content--title__text"
+                :class="[(disabled || item?.disabled) && 'hy-cell__disabled']"
+              >
+                {{ item?.title }}
+              </text>
+              <!-- @slot 列表小标题插槽 -->
+              <template v-if="item?.subhead">
+                <slot v-if="$slots.sub" name="sub" :sub="item.subhead"></slot>
                 <text
-                  class="hy-cell--body__container__center__value"
-                  :class="[disabled && 'hy-cell--disabled']"
-                  v-if="value || item?.value"
+                  v-else
+                  class="hy-cell__body--container__content--title__sub"
+                  :class="[disabled && 'hy-cell__disabled']"
                 >
-                  {{ item.value || value }}
+                  {{ item.subhead }}
                 </text>
-              </slot>
+              </template>
             </view>
-            <view
-              class="hy-cell--body__container__right-icon"
+          </view>
+          <view
+            class="hy-cell__body--container__center"
+            :style="{
+              justifyContent:
+                arrange === 'left'
+                  ? 'flex-start'
+                  : arrange === 'right'
+                    ? 'flex-end'
+                    : 'center',
+            }"
+          >
+            <!-- @slot 值内容插槽 -->
+            <slot v-if="$slots.value" name="value" :record="item"></slot>
+            <text
+              v-else-if="value || item?.value"
               :class="[
-                `hy-cell--body__container__right-icon--${item?.arrowDirection || arrowDirection}`,
+                'hy-cell__body__container__center--value',
+                disabled && 'hy-cell--disabled',
               ]"
             >
-              <!-- @slot 右边按钮插槽 -->
-              <slot name="right-icon" :icon="item?.rightIcon || rightIcon">
-                <HyIcon
-                  :name="
-                    item?.rightIcon?.name || rightIcon?.name || IconConfig.RIGHT
-                  "
-                  :color="
-                    disabled || item?.disabled
-                      ? '#c0c0c0'
-                      : item?.rightIcon?.color || rightIcon?.color
-                  "
-                  :bold="item?.rightIcon?.bold || rightIcon?.bold"
-                  :customPrefix="
-                    item?.rightIcon?.customPrefix || rightIcon?.customPrefix
-                  "
-                  :imgMode="item?.rightIcon?.imgMode || rightIcon?.imgMode"
-                  :width="item?.rightIcon?.width || rightIcon?.width"
-                  :height="item?.rightIcon?.height || rightIcon?.height"
-                  :top="item?.rightIcon?.top || rightIcon?.name"
-                  :stop="item?.rightIcon?.stop || rightIcon?.stop"
-                  :round="item?.rightIcon?.round || rightIcon?.round"
-                  :customStyle="
-                    item?.rightIcon?.customStyle || rightIcon?.customStyle
-                  "
-                ></HyIcon>
-              </slot>
-            </view>
+              {{ item.value || value }}
+            </text>
+          </view>
+          <view
+            class="hy-cell__body--container__right-icon"
+            :class="[
+              `hy-cell__body--container__right-icon--${item?.arrowDirection || arrowDirection}`,
+            ]"
+          >
+            <!-- @slot 右边按钮插槽 -->
+            <slot
+              v-if="$slots['right-icon']"
+              name="right-icon"
+              :icon="item?.rightIcon || rightIcon"
+            ></slot>
+            <HyIcon
+              v-else
+              :name="
+                item?.rightIcon?.name || rightIcon?.name || IconConfig.RIGHT
+              "
+              :color="
+                disabled || item?.disabled
+                  ? '#c0c0c0'
+                  : item?.rightIcon?.color || rightIcon?.color
+              "
+              :bold="item?.rightIcon?.bold || rightIcon?.bold"
+              :customPrefix="
+                item?.rightIcon?.customPrefix || rightIcon?.customPrefix
+              "
+              :imgMode="item?.rightIcon?.imgMode || rightIcon?.imgMode"
+              :width="item?.rightIcon?.width || rightIcon?.width"
+              :height="item?.rightIcon?.height || rightIcon?.height"
+              :top="item?.rightIcon?.top || rightIcon?.name"
+              :stop="item?.rightIcon?.stop || rightIcon?.stop"
+              :round="item?.rightIcon?.round || rightIcon?.round"
+              :customStyle="
+                item?.rightIcon?.customStyle || rightIcon?.customStyle
+              "
+            ></HyIcon>
           </view>
+        </view>
 
-          <!-- @slot 底部插槽 -->
-          <slot name="bottom" :record="item" />
-        </template>
-      </slot>
+        <!-- @slot 底部插槽 -->
+        <slot name="bottom" :record="item" />
+      </template>
     </view>
   </view>
 </template>
@@ -246,7 +253,7 @@ const containerClass = computed(() => {
       !props.disabled &&
         !temp?.disabled &&
         props.clickable &&
-        "hy-cell--body__container__clickable",
+        "hy-cell__body--container__clickable",
     ]
       .filter(Boolean)
       .join();
@@ -254,8 +261,8 @@ const containerClass = computed(() => {
 });
 const ItemClass = computed(() => {
   return [
-    "hy-cell--body__container",
-    `hy-cell--body__container__${props.size}`,
+    "hy-cell__body--container",
+    `hy-cell__body--container__${props.size}`,
   ];
 });
 

package/components/hy-cell/index.scss

@@ -28,7 +28,7 @@
   }
 
   /*row内容*/
-  @include m(body) {
+  @include e(body) {
     /* #ifndef APP-NVUE */
     box-sizing: border-box;
     /* #endif */
@@ -37,7 +37,7 @@
     border-radius: $hy-border-margin-padding-sm;
     overflow: hidden;
 
-    @include e(container) {
+    @include m(container) {
       @include flex(row);
       align-items: center;
       justify-content: space-between;
@@ -73,20 +73,20 @@
       @include e(content) {
         @include flex(row);
         /*左边icon*/
-        &-icon {
+        @include m(icon) {
           @include flex;
           align-items: center;
           margin-right: 10px;
         }
         /*行头部*/
-        &-title {
+        @include m(title) {
           margin-right: $hy-border-margin-padding-sm;
           flex: 33rpx;
           display: flex;
           flex-direction: column;
 
           /*sub值*/
-          &--sub {
+          @include e(sub) {
             margin-top: $hy-border-margin-padding-sm;
             color: $hy-text-color--grey;
           }
@@ -98,7 +98,7 @@
         @include flex;
         max-width: 90%;
         flex: 1;
-        @include e(value) {
+        @include m(value) {
           line-height: 24px;
           color: $hy-text-color--grey;
           margin-right: $hy-border-margin-padding-sm;
@@ -127,7 +127,7 @@
     }
   }
 
-  @include m(disabled) {
+  @include e(disabled) {
     color: $hy-text-color--disabled;
     /* #ifndef APP-NVUE */
     cursor: not-allowed;

package/components/hy-checkbox/hy-checkbox.vue

@@ -11,23 +11,26 @@
         ]"
       >
         <view
-          class="hy-checkbox--icon-wrap cursor-pointer"
           @tap.stop="iconClickHandler($event, item)"
           :class="iconClasses(item)"
           :style="iconWrapStyle(item)"
         >
-          <slot
-            name="icon"
-            :iconColor="iconColor"
-            :iconSize="addUnit(iconSize)"
-          >
+          <template v-if="item[fieldNames.checked]">
+            <slot
+              v-if="$slots.icon"
+              name="icon"
+              :iconColor="iconColor"
+              :iconSize="addUnit(iconSize)"
+            >
+            </slot>
             <HyIcon
+              v-else
               class="hy-checkbox--icon-wrap__icon"
               :name="IconConfig.CHECK_MASK"
-              :size="addUnit(sizeType[size] ?? iconSize)"
+              :size="addUnit(sizeType[size] || iconSize)"
               :color="iconColor || '#ffffff'"
             />
-          </slot>
+          </template>
         </view>
         <view
           :class="[
@@ -41,7 +44,7 @@
             <text
               :style="{
                 color: labelColor,
-                fontSize: addUnit(sizeType[size] ?? labelSize),
+                fontSize: addUnit(sizeType[size] || labelSize),
               }"
             >
               {{ item[fieldNames.label] }}
@@ -178,7 +181,7 @@ const columns_1 = ref();
 const sizeType: AnyObject = reactive({
   small: 14,
   medium: 18,
-  large: 22,
+  large: 24,
 });
 
 watch(
@@ -227,7 +230,7 @@ const bemClass = computed(() => {
  * */
 const iconClasses = computed(() => {
   return (temp: CheckboxColumnsVo): string[] => {
-    let classes: string[] = [];
+    let classes: string[] = ["hy-checkbox--icon-wrap", "cursor-pointer"];
     // 组件的形状
     classes.push("hy-checkbox--icon-wrap--" + props.shape);
     if (isDisabled(temp?.disabled)) {
@@ -253,15 +256,13 @@ const iconWrapStyle = computed(() => {
     style.backgroundColor =
       temp[props.fieldNames.checked] && !isDisabled(temp?.disabled)
         ? props.activeColor
-        : !isDisabled(temp?.disabled)
-          ? "#ffffff"
-          : "";
+        : "";
     style.borderColor =
       temp[props.fieldNames.checked] && !isDisabled(temp?.disabled)
         ? props.activeColor
         : props.inactiveColor;
-    style.width = addUnit(sizeType[props.size] ?? props.size);
-    style.height = addUnit(sizeType[props.size] ?? props.size);
+    style.width = addUnit(sizeType[props.size] || props.size);
+    style.height = addUnit(sizeType[props.size] || props.size);
     return style;
   };
 });

package/components/hy-checkbox/index.scss

@@ -90,7 +90,7 @@
       }
     }
 
-    @include m([disabled--checked]){
+    @include m(disabled--checked){
       background-color: $hy-primary;
       border-color: $hy-primary;
       opacity: 0.5;

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

@@ -11,24 +11,25 @@
     ]"
   >
     <view
-      class="hy-checkbox--icon-wrap cursor-pointer"
       @tap.stop="iconClickHandler"
       :class="iconClasses"
       :style="iconWrapStyle"
     >
-      <slot name="icon">
+      <template v-if="isChecked">
+        <slot v-if="$slots.icon" name="icon"></slot>
         <HyIcon
+          v-else
           class="hy-checkbox--icon-wrap__icon"
           :name="IconConfig.CHECK_MASK"
           :size="
             addUnit(
-              sizeType[checkboxGroup?.size?.value] ??
+              sizeType[checkboxGroup?.size?.value] ||
                 checkboxGroup?.iconSize?.value,
             )
           "
           :color="checkboxGroup?.iconColor?.value || '#ffffff'"
         />
-      </slot>
+      </template>
     </view>
     <view
       :class="[
@@ -43,7 +44,7 @@
           :style="{
             color: checkboxGroup?.labelColor?.value,
             fontSize: addUnit(
-              sizeType[checkboxGroup?.size?.value] ??
+              sizeType[checkboxGroup?.size?.value] ||
                 checkboxGroup?.labelSize?.value,
             ),
           }"
@@ -110,7 +111,7 @@ const isChecked = ref(false);
 const sizeType: AnyObject = reactive({
   small: 14,
   medium: 18,
-  large: 22,
+  large: 24,
 });
 
 watch(
@@ -160,7 +161,7 @@ const checkboxStyle = computed(() => {
  * @description 定义icon的Class类名
  * */
 const iconClasses = computed(() => {
-  let classes: string[] = [];
+  let classes: string[] = ["hy-checkbox--icon-wrap", "cursor-pointer"];
   // 组件的形状
   classes.push("hy-checkbox--icon-wrap--" + checkboxGroup?.shape?.value);
   if (isDisabled()) {
@@ -179,29 +180,23 @@ const iconClasses = computed(() => {
  * @description 定义icon的样式
  * */
 const iconWrapStyle = computed(() => {
-  return (): CSSProperties => {
-    // checkbox的整体样式
-    const style: CSSProperties = {};
-    style.backgroundColor =
-      isChecked.value && !isDisabled()
-        ? checkboxGroup?.activeColor?.value
-        : !isDisabled()
-          ? "#ffffff"
-          : "";
-    style.borderColor =
-      isChecked.value && !isDisabled()
-        ? checkboxGroup?.activeColor?.value
-        : checkboxGroup?.inactiveColor?.value;
-    if (checkboxGroup?.size?.value) {
-      style.width = addUnit(
-        sizeType[checkboxGroup.size.value] ?? checkboxGroup.size.value,
-      );
-      style.height = addUnit(
-        sizeType[checkboxGroup.size.value] ?? checkboxGroup.size.value,
-      );
-    }
-    return style;
-  };
+  // checkbox的整体样式
+  const style: CSSProperties = {};
+  style.backgroundColor =
+    isChecked.value && !isDisabled() ? checkboxGroup?.activeColor?.value : "";
+  style.borderColor =
+    isChecked.value && !isDisabled()
+      ? checkboxGroup?.activeColor?.value
+      : checkboxGroup?.inactiveColor?.value;
+  if (checkboxGroup?.size?.value) {
+    style.width = addUnit(
+      sizeType[checkboxGroup.size.value] || checkboxGroup.size.value,
+    );
+    style.height = addUnit(
+      sizeType[checkboxGroup.size.value] || checkboxGroup.size.value,
+    );
+  }
+  return style;
 });
 
 /**

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

@@ -77,7 +77,7 @@
       }
     }
 
-    @include m([disabled--checked]){
+    @include m(disabled--checked){
       background-color: $hy-primary;
       border-color: $hy-primary;
       opacity: 0.5;