hy-app 0.3.14 → 0.3.16

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,9 +4,9 @@
     @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',
     ]"
   >
@@ -21,9 +21,12 @@
           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>
     </view>
@@ -38,9 +41,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 +71,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,7 +105,7 @@ 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,
@@ -113,27 +117,44 @@ watch(
   () => props.checked,
   (newValue) => {
     isChecked.value = newValue;
-    if (props.checked) {
-      checkboxGroup?.setCheckedStatus(props.value);
+    if (props.checked) checkboxGroup?.setCheckedStatus(props.value);
+  },
+  { immediate: true },
+);
+
+watch(
+  () => checkboxGroup?.modelValue.value,
+  (newVal) => {
+    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类名
@@ -141,7 +162,7 @@ const checkboxStyle = computed(() => {
 const iconClasses = computed(() => {
   let classes: string[] = [];
   // 组件的形状
-  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");
   }
@@ -163,18 +184,20 @@ const iconWrapStyle = computed(() => {
     const style: CSSProperties = {};
     style.backgroundColor =
       isChecked.value && !isDisabled()
-        ? checkboxGroup?.activeColor
+        ? checkboxGroup?.activeColor?.value
         : !isDisabled()
           ? "#ffffff"
           : "";
     style.borderColor =
       isChecked.value && !isDisabled()
-        ? checkboxGroup?.activeColor
-        : checkboxGroup?.inactiveColor;
-    if (checkboxGroup?.size) {
-      style.width = addUnit(sizeType[checkboxGroup.size] ?? checkboxGroup.size);
+        ? 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] ?? checkboxGroup.size,
+        sizeType[checkboxGroup.size.value] ?? checkboxGroup.size.value,
       );
     }
     return style;
@@ -195,7 +218,7 @@ const iconClickHandler = (e: Event) => {
  * */
 const wrapperClickHandler = (e: Event) => {
   e.stopPropagation();
-  if (checkboxGroup?.labelDisabled || isDisabled()) return;
+  if (checkboxGroup?.labelDisabled?.value || isDisabled()) return;
   setCheckedStatus();
 };
 /**
@@ -203,7 +226,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/typing.d.ts

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

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

@@ -16,11 +16,10 @@ export default {
 </script>
 
 <script setup lang="ts">
-import { provide, reactive, ref } from "vue";
+import { provide, reactive, ref, toRefs } from "vue";
 import type { PropType } from "vue";
 import type { FormItemRule } from "./typing";
 import { clearVal, isArray } from "../../utils";
-import type { AppType } from "vite";
 
 /**
  * 表单组件父组件，需要搭配hy-form-item
@@ -73,13 +72,9 @@ const errors = reactive<Record<string, string>>({});
 
 // 表单上下文
 const formContext = {
+  ...toRefs(props),
   formData,
   errors,
-  rules: props.rules,
-  border: props.border,
-  labelWidth: props.labelWidth,
-  labelPosition: props.labelPosition,
-  labelAlign: props.labelAlign,
   addFormItem: (item: any) => {
     formItems.value.push(item);
   },

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

@@ -1,201 +1,204 @@
-<template>
-  <view
-    class="hy-form-item"
-    :class="[`hy-form-item--${labelPosition}`, formContext.border && 'hy-border__bottom']"
-  >
-    <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">
-      <slot></slot>
-      <view v-if="errorMessage" class="hy-form-item__error">
-        {{ errorMessage }}
-      </view>
-    </view>
-  </view>
-</template>
-
-<script lang="ts">
-export default {
-  name: 'hy-form-item',
-  options: {
-    addGlobalClass: true,
-    virtualHost: true,
-    styleIsolation: 'shared',
-  },
-}
-</script>
-
-<script setup lang="ts">
-import { computed, inject, onMounted, onUnmounted, provide, ref } from 'vue'
-import type { PropType } from 'vue'
-import type { FormContext } from './typing'
-import { addUnit } from '../../utils'
-
-/**
- * 表单组件子组件，需要搭配hy-form
- * @displayName hy-form-item
- */
-defineOptions({})
-
-const props = defineProps({
-  /**
-   * 标签文本
-   */
-  label: String,
-  /**
-   * 表单字段名
-   */
-  prop: String,
-  /**
-   * 是否必填
-   */
-  required: {
-    type: Boolean,
-    default: false,
-  },
-  /**
-   * 验证规则
-   */
-  rules: Object as PropType<any>,
-})
-
-const emit = defineEmits<{
-  change: [value: any]
-  blur: [value: any]
-}>()
-
-// 注入表单上下文
-const formContext = inject<FormContext>('formContext')
-const formItem = {
-  // 处理子组件事件
-  handleChange(value: any) {
-    if (props.prop && formContext) {
-      formContext.setFieldValue(props.prop, value)
-      validate('change')
-    }
-    emit('change', value)
-  },
-  handleBlur(value: any) {
-    if (props.prop && formContext) {
-      validate('blur')
-    }
-    emit('blur', value)
-  },
-}
-provide('formItem', formItem)
-
-// 当前组件的引用
-const formItemRef = ref()
-
-// 错误信息
-const errorMessage = computed(() => {
-  if (!formContext || !props.prop) return ''
-  return formContext.errors[props.prop] || ''
-})
-
-// 是否必填
-const isRequired = computed(() => {
-  if (props.required) return true
-  if (!formContext || !props.prop) return false
-
-  const fieldRules = formContext.rules.value?.[props.prop]
-  if (!fieldRules) return false
-
-  const rules = Array.isArray(fieldRules) ? fieldRules : [fieldRules]
-  return rules.some((rule) => rule.required)
-})
-
-// 标签样式
-const labelStyle = computed(() => {
-  if (!formContext) return {}
-
-  const style: Record<string, any> = {}
-
-  if (formContext.labelWidth !== 'auto') {
-    style.width = addUnit(formContext.labelWidth)
-  }
-
-  if (formContext.labelAlign) {
-    style.textAlign = formContext.labelAlign
-  }
-
-  return style
-})
-
-// 标签位置
-const labelPosition = computed(() => {
-  return formContext?.labelPosition || 'left'
-})
-
-// 监听表单数据变化
-// watch(
-//   () => formContext?.formData[props.prop],
-//   (newVal) => {
-//     if (props.prop && formContext) {
-//       formContext.setFieldValue(props.prop, newVal)
-//       validate('change')
-//     }
-//   },
-//   { immediate: true },
-// )
-
-// 验证字段
-const validate = (trigger?: 'blur' | 'change') => {
-  if (!formContext || !props.prop) return true
-
-  const value = formContext.getFieldValue(props.prop)
-  return formContext.validateField(props.prop, value, trigger)
-}
-
-// 重置字段
-const resetField = () => {
-  if (!formContext || !props.prop) return
-
-  formContext.setFieldValue(props.prop, undefined)
-  formContext.validateField(props.prop, undefined)
-}
-
-// 清除验证
-const clearValidate = () => {
-  if (!formContext || !props.prop) return
-
-  delete formContext.errors[props.prop]
-}
-
-// 组件挂载时注册到表单
-onMounted(() => {
-  if (formContext) {
-    formContext.addFormItem({
-      props: props,
-      validate,
-      resetField,
-      clearValidate,
-    })
-  }
-})
-
-// 组件卸载时从表单中移除
-onUnmounted(() => {
-  if (formContext) {
-    formContext.removeFormItem({
-      props: props,
-      validate,
-      resetField,
-      clearValidate,
-    })
-  }
-})
-
-// 暴露方法给父组件
-defineExpose({
-  validate,
-  resetField,
-  clearValidate,
-})
-</script>
-
-<style lang="scss" scoped>
-@import './index.scss';
-</style>
+<template>
+  <view
+    class="hy-form-item"
+    :class="[
+      `hy-form-item--${labelPosition}`,
+      formContext.border && 'hy-border__bottom',
+    ]"
+  >
+    <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">
+      <slot></slot>
+      <view v-if="errorMessage" class="hy-form-item__error">
+        {{ errorMessage }}
+      </view>
+    </view>
+  </view>
+</template>
+
+<script lang="ts">
+export default {
+  name: "hy-form-item",
+  options: {
+    addGlobalClass: true,
+    virtualHost: true,
+    styleIsolation: "shared",
+  },
+};
+</script>
+
+<script setup lang="ts">
+import { computed, inject, onMounted, onUnmounted, provide, ref } from "vue";
+import type { PropType } from "vue";
+import type { IFormContext } from "./typing";
+import { addUnit } from "../../utils";
+
+/**
+ * 表单组件子组件，需要搭配hy-form
+ * @displayName hy-form-item
+ */
+defineOptions({});
+
+const props = defineProps({
+  /**
+   * 标签文本
+   */
+  label: String,
+  /**
+   * 表单字段名
+   */
+  prop: String,
+  /**
+   * 是否必填
+   */
+  required: {
+    type: Boolean,
+    default: false,
+  },
+  /**
+   * 验证规则
+   */
+  rules: Object as PropType<any>,
+});
+
+const emit = defineEmits<{
+  change: [value: any];
+  blur: [value: any];
+}>();
+
+// 注入表单上下文
+const formContext = inject<IFormContext>("formContext");
+const formItem = {
+  // 处理子组件事件
+  handleChange(value: any) {
+    if (props.prop && formContext) {
+      formContext.setFieldValue(props.prop, value);
+      validate("change");
+    }
+    emit("change", value);
+  },
+  handleBlur(value: any) {
+    if (props.prop && formContext) {
+      validate("blur");
+    }
+    emit("blur", value);
+  },
+};
+provide("formItem", formItem);
+
+// 当前组件的引用
+const formItemRef = ref();
+
+// 错误信息
+const errorMessage = computed(() => {
+  if (!formContext || !props.prop) return "";
+  return formContext.errors[props.prop] || "";
+});
+
+// 是否必填
+const isRequired = computed(() => {
+  if (props.required) return true;
+  if (!formContext || !props.prop) return false;
+
+  const fieldRules = formContext.rules?.value?.[props.prop];
+  if (!fieldRules) return false;
+
+  const rules = Array.isArray(fieldRules) ? fieldRules : [fieldRules];
+  return rules.some((rule) => rule.required);
+});
+
+// 标签样式
+const labelStyle = computed(() => {
+  if (!formContext) return {};
+
+  const style: Record<string, any> = {};
+
+  if (formContext.labelWidth?.value !== "auto") {
+    style.width = addUnit(formContext.labelWidth?.value);
+  }
+
+  if (formContext.labelAlign?.value) {
+    style.textAlign = formContext.labelAlign.value;
+  }
+
+  return style;
+});
+
+// 标签位置
+const labelPosition = computed(() => {
+  return formContext?.labelPosition?.value || "left";
+});
+
+// 监听表单数据变化
+// watch(
+//   () => formContext?.formData[props.prop],
+//   (newVal) => {
+//     if (props.prop && formContext) {
+//       formContext.setFieldValue(props.prop, newVal)
+//       validate('change')
+//     }
+//   },
+//   { immediate: true },
+// )
+
+// 验证字段
+const validate = (trigger?: "blur" | "change") => {
+  if (!formContext || !props.prop) return true;
+
+  const value = formContext.getFieldValue(props.prop);
+  return formContext.validateField(props.prop, value, trigger);
+};
+
+// 重置字段
+const resetField = () => {
+  if (!formContext || !props.prop) return;
+
+  formContext.setFieldValue(props.prop, undefined);
+  formContext.validateField(props.prop, undefined);
+};
+
+// 清除验证
+const clearValidate = () => {
+  if (!formContext || !props.prop) return;
+
+  delete formContext.errors[props.prop];
+};
+
+// 组件挂载时注册到表单
+onMounted(() => {
+  if (formContext) {
+    formContext.addFormItem({
+      props: props,
+      validate,
+      resetField,
+      clearValidate,
+    });
+  }
+});
+
+// 组件卸载时从表单中移除
+onUnmounted(() => {
+  if (formContext) {
+    formContext.removeFormItem({
+      props: props,
+      validate,
+      resetField,
+      clearValidate,
+    });
+  }
+});
+
+// 暴露方法给父组件
+defineExpose({
+  validate,
+  resetField,
+  clearValidate,
+});
+</script>
+
+<style lang="scss" scoped>
+@import "./index.scss";
+</style>

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

@@ -1,40 +1,46 @@
-import HyFormSimpleProps from '../hy-form/typing'
+import HyFormSimpleProps from "../hy-form/typing";
+import type { ToRefs } from "vue";
 
-export interface FormContext extends HyFormSimpleProps {
-  errors: Record<string, string>
-  addFormItem: (item: any) => void
-  removeFormItem: (item: any) => void
-  validateField: (field: string, value: any, trigger?: 'blur' | 'change') => boolean
-  setFieldValue: (field: string, value: any) => void
-  getFieldValue: (field: string) => any
+export interface IFormContext extends ToRefs<HyFormSimpleProps> {
+  formData: AnyObject;
+  errors: Record<string, string>;
+  addFormItem: (item: any) => void;
+  removeFormItem: (item: any) => void;
+  validateField: (
+    field: string,
+    value: any,
+    trigger?: "blur" | "change",
+  ) => boolean;
+  setFieldValue: (field: string, value: any) => void;
+  getFieldValue: (field: string) => any;
 }
 
 export interface FormItemContext {
   /**
    * 失去焦点触发表单校验
    * */
-  handleBlur: (value: string | number) => void
+  handleBlur: (value: string | number) => void;
   /**
    * 值改变触发表单校验
    * */
-  handleChange: (value: string | number) => void
+  handleChange: (value: string | number) => void;
 }
 
 export default interface HyFormItemProps {
   /**
    * 标签文本
    */
-  label?: string
+  label?: string;
   /**
    * 表单字段名
    */
-  prop?: string
+  prop?: string;
   /**
    * 是否必填
    */
-  required?: boolean
+  required?: boolean;
   /**
    * 验证规则
    */
-  rules?: any
+  rules?: any;
 }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "hy-app",
-  "version": "0.3.14",
-  "description": "修改小问题，新增复选框分开组件",
+  "version": "0.3.16",
+  "description": "fix: 修复复选框父子传递provide/inject传递，更新不响应问题",
   "main": "./index.ts",
   "private": false,
   "scripts": {},