hy-app 0.3.13 → 0.3.14

package/components/hy-card/hy-card.vue

@@ -64,7 +64,7 @@
         footStyle,
       ]"
       :class="{
-        'hy-border-top': footBorderTop,
+        'hy-border__top': footBorderTop,
       }"
     >
       <!-- @slot 底部插槽 -->
@@ -127,7 +127,7 @@ const props = defineProps({
   /** 是否显示边框 */
   border: {
     type: Boolean,
-    default: true,
+    default: false,
   },
   /** 用于标识点击了第几个卡片 */
   index: [String, Number],
@@ -144,12 +144,12 @@ const props = defineProps({
   /** 是否显示头部的下边框 */
   headBorderBottom: {
     type: Boolean,
-    default: true,
+    default: false,
   },
   /** 是否显示底部的上边框 */
   footBorderTop: {
     type: Boolean,
-    default: true,
+    default: false,
   },
   /** 缩略图路径，如设置将显示在标题的左边，不建议使用相对路径 */
   thumb: String,

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

@@ -303,7 +303,6 @@ const setRadioCheckedStatus = (temp: CheckboxColumnsVo) => {
     }
     return item;
   });
-  emit("change", temp);
   emit(
     "update:modelValue",
     columns_1.value.length === 1
@@ -312,10 +311,7 @@ const setRadioCheckedStatus = (temp: CheckboxColumnsVo) => {
           .filter((item: CheckboxColumnsVo) => item[props.fieldNames.checked])
           .map((item: CheckboxColumnsVo) => item[props.fieldNames.value]),
   );
-  // 双向绑定
-  // if (this.usedAlone) {
-  // 	this.$emit('update:checked', this.isChecked)
-  // }
+  emit("change", temp);
 };
 </script>
 

package/components/hy-checkbox/index.scss

@@ -84,7 +84,7 @@
     }
 
     @include m(disabled) {
-      background-color: $hy-text-color--disabled;
+      background-color: $hy-background--disabled;
       :deep(.hy-icon) {
         display: none;
       }

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

@@ -0,0 +1,118 @@
+<template>
+  <view class="hy-checkbox-group" :class="bemClass">
+    <slot></slot>
+  </view>
+</template>
+
+<script setup lang="ts">
+import { computed, provide } from "vue";
+import type { CSSProperties, PropType } from "vue";
+import { bem } from "../../utils";
+import type { ICheckBoxGroupEmits } from "./typing";
+
+/**
+ * 复选框组件一般用于需要多个选择的场景，需要搭配hy-checkbox-item组件一起使用
+ * @displayName hy-checkbox-group
+ */
+defineOptions({});
+
+const props = defineProps({
+  /** 双向绑定值，数组类型 */
+  modelValue: {
+    type: Array<string | number>,
+    required: true,
+  },
+  /**
+   * 标签的大小
+   * @values small,medium,large
+   * */
+  size: {
+    type: String,
+    default: "medium",
+  },
+  /**
+   * 标签的形状
+   * @values circle,square
+   * */
+  shape: {
+    type: String,
+    default: "square",
+  },
+  /** 是否禁用 */
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
+  /** 选中状态下的颜色 */
+  activeColor: String,
+  /** 未选中的颜色 */
+  inactiveColor: {
+    type: String,
+    default: "#c8c9cc",
+  },
+  /** 图标的大小，单位px */
+  iconSize: {
+    type: [String, Number],
+    default: "20",
+  },
+  /** 图标颜色 */
+  iconColor: String,
+  /**
+   * 勾选图标的对齐方式
+   * @values left,right
+   * */
+  iconPlacement: {
+    type: String,
+    default: "left",
+  },
+  /** 竖向配列时，是否显示下划线 */
+  borderBottom: {
+    type: Boolean,
+    default: false,
+  },
+  /** label的字体大小，px单位 */
+  labelSize: [String, Number],
+  /** label的颜色 */
+  labelColor: String,
+  /** 是否禁止点击提示语选中复选框 */
+  labelDisabled: {
+    type: Boolean,
+    default: false,
+  },
+  /**
+   * 排列方式
+   * @values row,column
+   * */
+  placement: {
+    type: String,
+    default: "row",
+  },
+  /** 定义需要用到的外部样式 */
+  customStyle: {
+    type: Object as PropType<CSSProperties>,
+  },
+});
+const emit = defineEmits<ICheckBoxGroupEmits>();
+
+const bemClass = computed(() => {
+  return bem("checkbox-group", props, ["placement"]);
+});
+
+provide("hy-checkbox-group", {
+  ...props,
+  setCheckedStatus(value: string | number) {
+    let arr = [...props.modelValue];
+    if (props.modelValue?.includes(value)) {
+      arr = props.modelValue?.filter((item) => item !== value);
+    } else {
+      arr.push(value);
+    }
+    emit("update:modelValue", arr);
+    emit("change", arr);
+  },
+});
+</script>
+
+<style lang="scss" scoped>
+@import "./index";
+</style>

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

@@ -0,0 +1,16 @@
+@use "../../libs/css/mixin.scss" as *;
+
+@include b(checkbox) {
+  @include m(group) {
+    @include m(row) {
+      /* #ifndef APP-NVUE */
+      display: flex;
+      /* #endif */
+      flex-flow: row wrap;
+    }
+
+    @include m(column) {
+      @include flex(column);
+    }
+  }
+}

package/components/hy-checkbox-group/typing.d.ts

@@ -0,0 +1,71 @@
+import type { CSSProperties } from "vue";
+
+export default interface HyCheckboxGroupProps {
+  /**
+   * @description 双向绑定值，数组类型
+   * */
+  modelValue: (string | number)[];
+  /**
+   * @description 形状，square为方形，circle为圆型
+   * */
+  shape?: HyApp.ShapeType;
+  /**
+   * @description 复选框大小
+   * */
+  size?: HyApp.SizeType | string | number;
+  /**
+   * @description 是否禁用
+   * */
+  disabled?: boolean;
+  /**
+   * @description 选中状态下的颜色
+   * */
+  activeColor?: string;
+  /**
+   * @description 未选中的颜色
+   * */
+  inactiveColor?: string;
+  /**
+   * @description 图标的大小，单位px
+   * */
+  iconSize?: string | number;
+  /**
+   * @description 图标颜色
+   * */
+  iconColor?: string;
+  /**
+   * @description label的字体大小，px单位
+   * */
+  labelSize?: string | number;
+  /**
+   * @description label的颜色
+   * */
+  labelColor?: string;
+  /**
+   * @description 勾选图标的对齐方式，left-左边，right-右边
+   * */
+  iconPlacement?: HyApp.LeftRightType;
+  /**
+   * @description 竖向配列时，是否显示下划线
+   * */
+  borderBottom?: boolean;
+  /**
+   * @description 是否禁止点击提示语选中复选框
+   * */
+  labelDisabled?: boolean;
+  /**
+   * @description 定义需要用到的外部样式
+   * */
+  customStyle?: CSSProperties;
+  /**
+   * @description 排列方式，row-横向，column-纵向
+   * */
+  placement?: HyApp.DirectionType;
+}
+
+export interface ICheckBoxGroupEmits {
+  /** 选择触发 */
+  (e: "change", temp: CheckboxColumnsVo): void;
+  /** 更新值触发 */
+  (e: "update:modelValue", value: any): void;
+}

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

@@ -0,0 +1,219 @@
+<template>
+  <view
+    class="hy-checkbox cursor-pointer"
+    @tap.stop="wrapperClickHandler"
+    :style="checkboxStyle"
+    :class="[
+      `hy-checkbox--label__${checkboxGroup?.iconPlacement}`,
+      checkboxGroup?.borderBottom &&
+        checkboxGroup?.placement === 'column' &&
+        'hy-border__bottom',
+    ]"
+  >
+    <view
+      class="hy-checkbox--icon-wrap cursor-pointer"
+      @tap.stop="iconClickHandler"
+      :class="iconClasses"
+      :style="iconWrapStyle"
+    >
+      <slot name="icon">
+        <HyIcon
+          class="hy-checkbox--icon-wrap__icon"
+          :name="IconConfig.CHECK_MASK"
+          :size="
+            addUnit(sizeType[checkboxGroup?.size] ?? checkboxGroup?.iconSize)
+          "
+          :color="checkboxGroup?.iconColor || '#ffffff'"
+        />
+      </slot>
+    </view>
+    <view
+      :class="[
+        'hy-checkbox--label__wrap',
+        'cursor-pointer',
+        disabled && 'hy-checkbox--label__wrap--disabled',
+      ]"
+      @tap.stop="labelClickHandler"
+    >
+      <slot name="label">
+        <text
+          :style="{
+            color: checkboxGroup?.labelColor,
+            fontSize: addUnit(
+              sizeType[checkboxGroup?.size] ?? checkboxGroup?.labelSize,
+            ),
+          }"
+        >
+          {{ label }}
+        </text>
+      </slot>
+    </view>
+  </view>
+</template>
+
+<script lang="ts">
+export default {
+  name: "hy-checkbox",
+  options: {
+    addGlobalClass: true,
+    virtualHost: true,
+    styleIsolation: "shared",
+  },
+};
+</script>
+
+<script setup lang="ts">
+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 HyIcon from "../hy-icon/hy-icon.vue";
+
+/**
+ * 复选框组件一般用于需要多个选择的场景，需要搭配hy-checkbox-group一起使用
+ * @displayName hy-checkbox-item
+ */
+defineOptions({});
+
+const props = defineProps({
+  /** checkbox的名称 */
+  value: {
+    type: String,
+    default: "",
+  },
+  /** 是否默认选中 */
+  checked: {
+    type: Boolean,
+    default: false,
+  },
+  /** 是否禁用 */
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
+  /** label提示文字 */
+  label: {
+    type: String,
+    default: "",
+  },
+});
+
+// 注入表单上下文
+const checkboxGroup = inject<ICheckboxGroupProps>("hy-checkbox-group");
+const isChecked = ref(false);
+const sizeType: AnyObject = reactive({
+  small: 14,
+  medium: 18,
+  large: 22,
+});
+
+watch(
+  () => props.checked,
+  (newValue) => {
+    isChecked.value = newValue;
+    if (props.checked) {
+      checkboxGroup?.setCheckedStatus(props.value);
+    }
+  },
+  { immediate: true },
+);
+
+const isDisabled = (): boolean => checkboxGroup?.disabled || props.disabled;
+
+const checkboxStyle = computed(() => {
+  const style: CSSProperties = {};
+  if (checkboxGroup?.borderBottom && checkboxGroup?.placement === "row") {
+    error(
+      "检测到您将borderBottom设置为true，需要同时将hy-checkbox-group的placement设置为column才有效",
+    );
+  }
+  // 当父组件设置了显示下边框并且排列形式为纵向时，给内容和边框之间加上一定间隔
+  if (checkboxGroup?.borderBottom && checkboxGroup?.placement === "column") {
+    style.paddingBottom = "8px";
+  }
+  return Object.assign(style, checkboxGroup?.customStyle);
+});
+/**
+ * @description 定义icon的Class类名
+ * */
+const iconClasses = computed(() => {
+  let classes: string[] = [];
+  // 组件的形状
+  classes.push("hy-checkbox--icon-wrap--" + checkboxGroup?.shape);
+  if (isDisabled()) {
+    classes.push("hy-checkbox--icon-wrap--disabled");
+  }
+  if (isChecked.value) {
+    classes.push("hy-checkbox--icon-wrap--checked");
+    if (isDisabled()) {
+      classes.push("hy-checkbox--icon-wrap--disabled--checked");
+    }
+  }
+  return classes;
+});
+
+/**
+ * @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;
+  };
+});
+
+/**
+ * @description 点击图标
+ * */
+const iconClickHandler = (e: Event) => {
+  e.stopPropagation();
+  if (!isDisabled()) {
+    setCheckedStatus();
+  }
+};
+/**
+ * @description 点击整行
+ * */
+const wrapperClickHandler = (e: Event) => {
+  e.stopPropagation();
+  if (checkboxGroup?.labelDisabled || isDisabled()) return;
+  setCheckedStatus();
+};
+/**
+ * @description 点击label
+ * */
+const labelClickHandler = (e: Event) => {
+  e.stopPropagation();
+  if (checkboxGroup?.labelDisabled || isDisabled()) return;
+  setCheckedStatus();
+};
+
+const setCheckedStatus = () => {
+  // 将本组件标记为与原来相反的状态
+  isChecked.value = !isChecked.value;
+  checkboxGroup?.setCheckedStatus(props.value);
+};
+</script>
+
+<style lang="scss" scoped>
+@import "./index.scss";
+</style>

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

@@ -0,0 +1,89 @@
+@use "../../libs/css/mixin.scss" as *;
+@use "../../libs/css/theme" 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;
+
+  @include m(label) {
+    @include e(left) {
+      flex-direction: row;
+    }
+    @include e(right) {
+      flex-direction: row-reverse;
+      justify-content: space-between;
+    }
+
+    @include e(wrap){
+      /* #ifndef APP-NVUE */
+      word-wrap: break-word;
+      /* #endif */
+      font-size: $hy-font-size-base;
+      margin-right: $hy-border-margin-padding-sm;
+
+      @include m(disabled) {
+        color: $hy-text-color--disabled;
+      }
+    }
+  }
+
+  @include m(icon-wrap) {
+    /* #ifndef APP-NVUE */
+    box-sizing: border-box;
+    // nvue下，border-color过渡有问题
+    transition-property: border-color, background-color, color;
+    transition-duration: 0.2s;
+    /* #endif */
+    @include flex;
+    align-items: center;
+    justify-content: center;
+    color: transparent;
+    text-align: center;
+    margin-right: $hy-border-margin-padding-sm;
+    border: $hy-border-line;
+
+    /* #ifdef MP-TOUTIAO */
+    // 头条小程序兼容性问题，需要设置行高为0，否则图标偏下
+    @include e(icon) {
+      line-height: 0;
+    }
+
+    /* #endif */
+
+    @include m(circle) {
+      border-radius: 50%;
+    }
+
+    @include m(square) {
+      border-radius: 3px;
+    }
+
+    @include m(checked) {
+      color: #FFFFFF;
+      background-color: $hy-primary;
+      border-color: $hy-primary;
+    }
+
+    @include m(disabled) {
+      background-color: $hy-background--disabled;
+      :deep(.hy-icon) {
+        display: none;
+      }
+    }
+
+    @include m([disabled--checked]){
+      background-color: $hy-primary;
+      border-color: $hy-primary;
+      opacity: 0.5;
+      :deep(.hy-icon) {
+        display: block;
+      }
+    }
+  }
+}

package/components/hy-checkbox-item/typing.d.ts

@@ -0,0 +1,5 @@
+import type HyCheckboxGroupProps from "@/package/components/hy-checkbox-group/typing";
+
+export interface ICheckboxGroupProps extends HyCheckboxGroupProps {
+  setCheckedStatus: (name: string) => void;
+}

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

@@ -75,7 +75,7 @@
             v-if="showConfirmButton"
             @tap="confirmHandler"
           >
-            <HyLoading v-if="loading"></HyLoading>
+            <HyLoading v-if="load" mode="circle"></HyLoading>
             <text
               v-else
               class="hy-modal__button-group__wrapper__text hy-modal__button-group__wrapper--confirm-text"
@@ -104,9 +104,9 @@ export default {
 </script>
 
 <script setup lang="ts">
-import { ref, watch } from "vue";
+import { ref, toRefs, watch } from "vue";
 import type { IModalEmits } from "./typing";
-import { addUnit } from "../../utils";
+import { addUnit, sleep } from "../../utils";
 // 组件
 import HyPopup from "../hy-popup/hy-popup.vue";
 import HyLoading from "../hy-loading/hy-loading.vue";
@@ -167,8 +167,13 @@ const props = defineProps({
     type: [String, Number],
     default: 16,
   },
-  /** 是否异步关闭，只对确定按钮有效，见上方说明 */
-  asyncClose: {
+  /** 点击确认按钮自动关闭 */
+  autoClose: {
+    type: Boolean,
+    default: true,
+  },
+  /** 加载按钮 */
+  loading: {
     type: Boolean,
     default: false,
   },
@@ -202,27 +207,36 @@ const props = defineProps({
   },
 });
 const emit = defineEmits<IModalEmits>();
+const load = ref(props.loading);
 
-const loading = ref<boolean>(false);
+watch(
+  () => props.loading,
+  (newVal) => {
+    load.value = props.loading;
+  },
+);
 
 watch(
   () => props.modelValue,
-  (newValue) => {
-    if (newValue && loading.value) loading.value = false;
+  (newVal) => {
+    console.log(newVal, "newVal");
+    if (!newVal) load.value = false;
   },
 );
 
 /**
  * @description 点击确定按钮
  * */
-const confirmHandler = () => {
+const confirmHandler = async () => {
+  console.log(load.value, "props.loading");
+  if (load.value) return;
   // 如果配置了异步关闭，将按钮值为loading状态
-  if (props.asyncClose) {
-    loading.value = true;
-  } else {
+  emit("confirm");
+
+  await sleep();
+  if (!props.loading && props.autoClose) {
     emit("update:modelValue", false);
   }
-  emit("confirm");
 };
 
 /**

package/components/hy-modal/index.scss

@@ -37,11 +37,11 @@
   &__button {
     /* 两个按钮的样式 */
     &-exact {
-      view:first-child {
+      .hy-modal__button-group__wrapper:first-child {
         margin-right: $hy-border-margin-padding-lg;
       }
       &--reverse {
-        view:last-child {
+        .hy-modal__button-group__wrapper:last-child {
           margin-right: $hy-border-margin-padding-lg;
         }
       }