hy-app 0.3.15 → 0.4.0

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-group/hy-checkbox-group.vue

@@ -5,7 +5,7 @@
 </template>
 
 <script setup lang="ts">
-import { computed, provide } from "vue";
+import { computed, provide, toRefs } from "vue";
 import type { CSSProperties, PropType } from "vue";
 import { bem } from "../../utils";
 import type { ICheckBoxGroupEmits } from "./typing";
@@ -98,8 +98,8 @@ const bemClass = computed(() => {
   return bem("checkbox-group", props, ["placement"]);
 });
 
-provide("hy-checkbox-group", {
-  ...props,
+const context = {
+  ...toRefs(props),
   setCheckedStatus(value: string | number) {
     let arr = [...props.modelValue];
     if (props.modelValue?.includes(value)) {
@@ -110,7 +110,9 @@ provide("hy-checkbox-group", {
     emit("update:modelValue", arr);
     emit("change", arr);
   },
-});
+};
+
+provide("hy-checkbox-group", context);
 </script>
 
 <style lang="scss" scoped>

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

@@ -4,28 +4,32 @@
     @tap.stop="wrapperClickHandler"
     :style="checkboxStyle"
     :class="[
-      `hy-checkbox--label__${checkboxGroup?.iconPlacement}`,
-      checkboxGroup?.borderBottom &&
-        checkboxGroup?.placement === 'column' &&
+      `hy-checkbox--label__${checkboxGroup?.iconPlacement?.value}`,
+      checkboxGroup?.borderBottom?.value &&
+        checkboxGroup?.placement?.value === 'column' &&
         'hy-border__bottom',
     ]"
   >
     <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] ?? checkboxGroup?.iconSize)
+            addUnit(
+              sizeType[checkboxGroup?.size?.value] ||
+                checkboxGroup?.iconSize?.value,
+            )
           "
-          :color="checkboxGroup?.iconColor || '#ffffff'"
+          :color="checkboxGroup?.iconColor?.value || '#ffffff'"
         />
-      </slot>
+      </template>
     </view>
     <view
       :class="[
@@ -38,9 +42,10 @@
       <slot name="label">
         <text
           :style="{
-            color: checkboxGroup?.labelColor,
+            color: checkboxGroup?.labelColor?.value,
             fontSize: addUnit(
-              sizeType[checkboxGroup?.size] ?? checkboxGroup?.labelSize,
+              sizeType[checkboxGroup?.size?.value] ||
+                checkboxGroup?.labelSize?.value,
             ),
           }"
         >
@@ -67,7 +72,7 @@ import { computed, watch, ref, reactive, inject } from "vue";
 import type { CSSProperties } from "vue";
 import { addUnit, error } from "../../utils";
 import { IconConfig } from "../../config";
-import type { ICheckboxGroupProps } from "./typing";
+import type { ICheckboxGroupContext } from "./typing";
 // 组件
 import HyIcon from "../hy-icon/hy-icon.vue";
 
@@ -101,12 +106,12 @@ const props = defineProps({
 });
 
 // 注入表单上下文
-const checkboxGroup = inject<ICheckboxGroupProps>("hy-checkbox-group");
+const checkboxGroup = inject<ICheckboxGroupContext>("hy-checkbox-group");
 const isChecked = ref(false);
 const sizeType: AnyObject = reactive({
   small: 14,
   medium: 18,
-  large: 22,
+  large: 24,
 });
 
 watch(
@@ -119,35 +124,46 @@ watch(
 );
 
 watch(
-  () => checkboxGroup?.modelValue,
+  () => checkboxGroup?.modelValue.value,
   (newVal) => {
-    if (newVal?.length) isChecked.value = newVal.includes(props.value);
+    if (newVal?.length) {
+      isChecked.value = newVal.includes(props.value);
+    } else {
+      isChecked.value = false;
+    }
   },
   { immediate: true },
 );
 
-const isDisabled = (): boolean => checkboxGroup?.disabled || props.disabled;
+const isDisabled = (): boolean =>
+  checkboxGroup?.disabled?.value || props.disabled;
 
 const checkboxStyle = computed(() => {
   const style: CSSProperties = {};
-  if (checkboxGroup?.borderBottom && checkboxGroup?.placement === "row") {
+  if (
+    checkboxGroup?.borderBottom?.value &&
+    checkboxGroup?.placement?.value === "row"
+  ) {
     error(
       "检测到您将borderBottom设置为true，需要同时将hy-checkbox-group的placement设置为column才有效",
     );
   }
   // 当父组件设置了显示下边框并且排列形式为纵向时，给内容和边框之间加上一定间隔
-  if (checkboxGroup?.borderBottom && checkboxGroup?.placement === "column") {
+  if (
+    checkboxGroup?.borderBottom?.value &&
+    checkboxGroup?.placement?.value === "column"
+  ) {
     style.paddingBottom = "8px";
   }
-  return Object.assign(style, checkboxGroup?.customStyle);
+  return Object.assign(style, checkboxGroup?.customStyle?.value);
 });
 /**
  * @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);
+  classes.push("hy-checkbox--icon-wrap--" + checkboxGroup?.shape?.value);
   if (isDisabled()) {
     classes.push("hy-checkbox--icon-wrap--disabled");
   }
@@ -164,27 +180,23 @@ const iconClasses = computed(() => {
  * @description 定义icon的样式
  * */
 const iconWrapStyle = computed(() => {
-  return (): CSSProperties => {
-    // checkbox的整体样式
-    const style: CSSProperties = {};
-    style.backgroundColor =
-      isChecked.value && !isDisabled()
-        ? checkboxGroup?.activeColor
-        : !isDisabled()
-          ? "#ffffff"
-          : "";
-    style.borderColor =
-      isChecked.value && !isDisabled()
-        ? checkboxGroup?.activeColor
-        : checkboxGroup?.inactiveColor;
-    if (checkboxGroup?.size) {
-      style.width = addUnit(sizeType[checkboxGroup.size] ?? checkboxGroup.size);
-      style.height = addUnit(
-        sizeType[checkboxGroup.size] ?? checkboxGroup.size,
-      );
-    }
-    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;
 });
 
 /**
@@ -201,7 +213,7 @@ const iconClickHandler = (e: Event) => {
  * */
 const wrapperClickHandler = (e: Event) => {
   e.stopPropagation();
-  if (checkboxGroup?.labelDisabled || isDisabled()) return;
+  if (checkboxGroup?.labelDisabled?.value || isDisabled()) return;
   setCheckedStatus();
 };
 /**
@@ -209,7 +221,7 @@ const wrapperClickHandler = (e: Event) => {
  * */
 const labelClickHandler = (e: Event) => {
   e.stopPropagation();
-  if (checkboxGroup?.labelDisabled || isDisabled()) return;
+  if (checkboxGroup?.labelDisabled?.value || isDisabled()) return;
   setCheckedStatus();
 };
 

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;