hy-app 0.2.13 → 0.2.15

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

@@ -16,11 +16,7 @@
           :class="iconClasses(item)"
           :style="iconWrapStyle(item)"
         >
-          <slot
-            name="icon"
-            :iconColor="iconColor"
-            :iconSize="addUnit(iconSize)"
-          >
+          <slot name="icon" :iconColor="iconColor" :iconSize="addUnit(iconSize)">
             <HyIcon
               class="hy-checkbox__icon-wrap__icon"
               :name="IconConfig.CHECK_MASK"
@@ -43,8 +39,9 @@
                 color: labelColor,
                 fontSize: addUnit(sizeType[size] ?? labelSize),
               }"
-              >{{ item[fieldNames.label] }}</text
             >
+              {{ item[fieldNames.label] }}
+            </text>
           </slot>
         </view>
       </view>
@@ -53,27 +50,122 @@
 </template>
 
 <script lang="ts">
+/**
+ * 复选框组件一般用于需要多个选择的场景，该组件功能完整，使用方便
+ * @displayName hy-checkbox
+ */
+defineOptions({})
 export default {
-  name: "hy-checkbox",
+  name: 'hy-checkbox',
   options: {
     addGlobalClass: true,
     virtualHost: true,
-    styleIsolation: "shared",
+    styleIsolation: 'shared',
   },
-};
+}
 </script>
 
 <script setup lang="ts">
-import defaultProps from "./props";
-import type { CheckboxColumnsVo } from "./typing";
-import type IProps from "./typing";
-import { computed, toRefs, watch, ref, reactive } from "vue";
-import type { CSSProperties } from "vue";
-import { addUnit, bem, error } from "../../utils";
-import { IconConfig } from "../../config";
-import HyIcon from "../hy-icon/hy-icon.vue";
+import { computed, toRefs, watch, ref, reactive } from 'vue'
+import type { CSSProperties, PropType } from 'vue'
+import { addUnit, bem, error } from '../../utils'
+import { IconConfig } from '../../config'
+import HyIcon from '../hy-icon/hy-icon.vue'
+import type { ICheckBoxEmits } from './typing'
+import type { CheckboxColumnsVo, IFieldNames } from '../hy-check-button/typing'
 
-const props = withDefaults(defineProps<IProps>(), defaultProps);
+// const props = withDefaults(defineProps<IProps>(), defaultProps);
+const props = defineProps({
+  /** 双向绑定值，数组类型 */
+  modelValue: {
+    type: [Boolean, Array<string | number>],
+    required: true,
+  },
+  /** 选择列表数据 */
+  columns: {
+    type: Array as unknown as PropType<Array<CheckboxColumnsVo>>,
+    default: [],
+    required: true,
+  },
+  /** 自定义接收columns的键 */
+  fieldNames: {
+    type: Object as unknown as PropType<IFieldNames>,
+    default: {
+      label: 'label',
+      value: 'value',
+      checked: 'checked',
+    },
+  },
+  /**
+   * 标签的大小
+   * @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 {
   modelValue,
   columns,
@@ -88,77 +180,74 @@ const {
   borderBottom,
   placement,
   labelDisabled,
-} = toRefs(props);
-const emit = defineEmits(["change", "update:modelValue"]);
+} = toRefs(props)
+const emit = defineEmits<ICheckBoxEmits>()
 
-const columns_1 = ref();
+const columns_1 = ref()
 const sizeType: AnyObject = reactive({
   small: 14,
   medium: 18,
   large: 22,
-});
+})
 
 watch(
   () => modelValue.value,
   (newValue: boolean | (string | number)[]) => {
     // 判断数组长度为1可以传true/false
-    if (columns.value?.length === 1 && typeof newValue === "boolean") {
-      columns.value[0][fieldNames.value.checked] = newValue;
-      columns_1.value = columns.value;
+    if (columns.value?.length === 1 && typeof newValue === 'boolean') {
+      columns.value[0][fieldNames.value.checked] = newValue
+      columns_1.value = columns.value
     } else if (Array.isArray(newValue)) {
       columns_1.value = columns.value.map((item) => {
-        item[fieldNames.value.checked] = newValue.includes(
-          item[fieldNames.value.value] as string,
-        );
-        return item;
-      });
+        item[fieldNames.value.checked] = newValue.includes(item[fieldNames.value.value] as string)
+        return item
+      })
     } else {
-      error("传入值不是数组，请传数组值");
+      error('传入值不是数组，请传数组值')
     }
   },
   { immediate: true },
-);
+)
 
-const isDisabled = (disabledVal?: boolean): boolean =>
-  disabled.value || !!disabledVal;
+const isDisabled = (disabledVal?: boolean): boolean => disabled.value || !!disabledVal
 
 const checkboxStyle = computed(() => {
-  const style: CSSProperties = {};
-  if (borderBottom.value && placement.value === "row") {
+  const style: CSSProperties = {}
+  if (borderBottom.value && placement.value === 'row') {
     error(
-      "检测到您将borderBottom设置为true，需要同时将u-checkbox-group的placement设置为column才有效",
-    );
+      '检测到您将borderBottom设置为true，需要同时将u-checkbox-group的placement设置为column才有效',
+    )
   }
   // 当父组件设置了显示下边框并且排列形式为纵向时，给内容和边框之间加上一定间隔
-  if (borderBottom.value && placement.value === "column") {
-    style.paddingBottom = "8px";
+  if (borderBottom.value && placement.value === 'column') {
+    style.paddingBottom = '8px'
   }
-  return Object.assign(style, customStyle.value);
-});
+  return Object.assign(style, customStyle.value)
+})
 const bemClass = computed(() => {
-  return bem("checkbox-group", props, ["placement"]);
-});
+  return bem('checkbox-group', props, ['placement'])
+})
 
 /**
  * @description 定义icon的Class类名
  * */
 const iconClasses = computed(() => {
   return (temp: CheckboxColumnsVo): string[] => {
-    let classes: string[] = [];
+    let classes: string[] = []
     // 组件的形状
-    classes.push("hy-checkbox__icon-wrap--" + shape.value);
+    classes.push('hy-checkbox__icon-wrap--' + shape.value)
     if (isDisabled(temp?.disabled)) {
-      classes.push("hy-checkbox__icon-wrap--disabled");
+      classes.push('hy-checkbox__icon-wrap--disabled')
     }
     if (temp[fieldNames.value.checked]) {
-      classes.push("hy-checkbox__icon-wrap--checked");
+      classes.push('hy-checkbox__icon-wrap--checked')
       if (isDisabled(temp?.disabled)) {
-        classes.push("hy-checkbox__icon-wrap--disabled--checked");
+        classes.push('hy-checkbox__icon-wrap--disabled--checked')
       }
     }
-    return classes;
-  };
-});
+    return classes
+  }
+})
 
 /**
  * @description 定义icon的样式
@@ -166,50 +255,50 @@ const iconClasses = computed(() => {
 const iconWrapStyle = computed(() => {
   return (temp: CheckboxColumnsVo): CSSProperties => {
     // checkbox的整体样式
-    const style: CSSProperties = {};
+    const style: CSSProperties = {}
     style.backgroundColor =
       temp[fieldNames.value.checked] && !isDisabled(temp?.disabled)
         ? activeColor.value
         : !isDisabled(temp?.disabled)
-          ? "#ffffff"
-          : "";
+        ? '#ffffff'
+        : ''
     style.borderColor =
       temp[fieldNames.value.checked] && !isDisabled(temp?.disabled)
         ? activeColor.value
-        : inactiveColor.value;
-    style.width = addUnit(sizeType[size.value] ?? size.value);
-    style.height = addUnit(sizeType[size.value] ?? size.value);
-    return style;
-  };
-});
+        : inactiveColor.value
+    style.width = addUnit(sizeType[size.value] ?? size.value)
+    style.height = addUnit(sizeType[size.value] ?? size.value)
+    return style
+  }
+})
 
 /**
  * @description 点击图标
  * */
 const iconClickHandler = (e: Event, temp: CheckboxColumnsVo) => {
-  e.stopPropagation();
+  e.stopPropagation()
   if (!isDisabled(temp?.disabled)) {
-    setRadioCheckedStatus(temp);
+    setRadioCheckedStatus(temp)
   }
-};
+}
 /**
  * @description 点击整行
  * */
 const wrapperClickHandler = (e: Event, temp: CheckboxColumnsVo) => {
-  e.stopPropagation();
+  e.stopPropagation()
   if (!isDisabled(temp?.disabled) || !labelDisabled.value) {
-    setRadioCheckedStatus(temp);
+    setRadioCheckedStatus(temp)
   }
-};
+}
 /**
  * @description 点击label
  * */
 const labelClickHandler = (e: Event, temp: CheckboxColumnsVo) => {
-  e.stopPropagation();
+  e.stopPropagation()
   if (!isDisabled(temp?.disabled) || !labelDisabled.value) {
-    setRadioCheckedStatus(temp);
+    setRadioCheckedStatus(temp)
   }
-};
+}
 
 /**
  * @description 执行函数改变状态传给父值
@@ -218,26 +307,26 @@ const setRadioCheckedStatus = (temp: CheckboxColumnsVo) => {
   // 将本组件标记为与原来相反的状态
   columns_1.value = columns_1.value.map((item: CheckboxColumnsVo) => {
     if (temp[fieldNames.value.value] === item[fieldNames.value.value]) {
-      item[fieldNames.value.checked] = !item[fieldNames.value.checked];
+      item[fieldNames.value.checked] = !item[fieldNames.value.checked]
     }
-    return item;
-  });
-  emit("change", temp);
+    return item
+  })
+  emit('change', temp)
   emit(
-    "update:modelValue",
+    'update:modelValue',
     columns_1.value.length === 1
       ? columns_1.value[0].checked
       : columns_1.value
           .filter((item: CheckboxColumnsVo) => item[fieldNames.value.checked])
           .map((item: CheckboxColumnsVo) => item[fieldNames.value.value]),
-  );
+  )
   // 双向绑定
   // if (this.usedAlone) {
   // 	this.$emit('update:checked', this.isChecked)
   // }
-};
+}
 </script>
 
 <style lang="scss" scoped>
-@import "./index.scss";
+@import './index.scss';
 </style>

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

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

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

@@ -42,6 +42,11 @@
 </template>
 
 <script lang="ts">
+/**
+ * 一般用于验证用户短信验证码的场景，也可以结合华玥的键盘组件使用
+ * @displayName hy-code-input
+ */
+defineOptions({})
 export default {
   name: 'hy-code-input',
   options: {
@@ -53,12 +58,103 @@ export default {
 </script>
 
 <script setup lang="ts">
-import { computed, type CSSProperties, nextTick, onUnmounted, ref, toRefs, watch } from 'vue'
-import type IProps from './typing'
-import defaultProps from './props'
+import {
+  computed,
+  type CSSProperties,
+  nextTick,
+  onUnmounted,
+  PropType,
+  ref,
+  toRefs,
+  watch,
+} from 'vue'
+import type { ICodeInputEmits } from './typing'
 import { addUnit, getPx } from '../../utils'
 
-const props = withDefaults(defineProps<IProps>(), defaultProps)
+// const props = withDefaults(defineProps<IProps>(), defaultProps)
+const props = defineProps({
+  /** 获取值 */
+  modelValue: {
+    type: [String, Number],
+    required: true,
+  },
+  /** 键盘弹起时，是否自动上推页面 */
+  adjustPosition: {
+    type: Boolean,
+    default: true,
+  },
+  /** 最大输入长度 */
+  maxlength: {
+    type: Number,
+    default: 6,
+  },
+  /** 显示border */
+  border: {
+    type: Boolean,
+    default: true,
+  },
+  /** 是否用圆点填充 */
+  dot: {
+    type: Boolean,
+    default: false,
+  },
+  /**
+   * 示模式，box-盒子模式，line-底部横线模式
+   * @values box,line
+   * */
+  mode: {
+    type: String,
+    default: 'box',
+  },
+  /** 是否细边框 */
+  hairline: {
+    type: Boolean,
+    default: false,
+  },
+  /** 字符间的距离 */
+  space: {
+    type: Number,
+    default: 10,
+  },
+  /** 是否自动获取焦点 */
+  focus: {
+    type: Boolean,
+    default: false,
+  },
+  /** 字体是否加粗 */
+  bold: {
+    type: Boolean,
+    default: false,
+  },
+  /** 字体颜色 */
+  color: String,
+  /** 字体大小，单位px */
+  fontSize: {
+    type: [String, Number],
+    default: 18,
+  },
+  /** 输入框的大小，宽等于高 */
+  size: {
+    type: [String, Number],
+    default: 35,
+  },
+  /** 是否隐藏原生键盘，如果想用自定义键盘的话，需设置此参数为true */
+  disabledKeyboard: {
+    type: Boolean,
+    default: false,
+  },
+  /** 边框和线条颜色 */
+  borderColor: String,
+  /** 是否禁止输入"."符号  */
+  disabledDot: {
+    type: Boolean,
+    default: true,
+  },
+  /** 定义需要用到的外部样式 */
+  customStyle: {
+    type: Object as PropType<CSSProperties>,
+  },
+})
 const {
   modelValue,
   focus,
@@ -71,7 +167,7 @@ const {
   space,
   borderColor,
 } = toRefs(props)
-const emit = defineEmits(['change', 'finish', 'update:modelValue'])
+const emit = defineEmits<ICodeInputEmits>()
 
 const current = ref(0)
 const inputValue = ref('')

package/components/hy-code-input/typing.d.ts

@@ -67,3 +67,12 @@ export default interface HyCodeInputProps {
    * */
   customStyle?: CSSProperties
 }
+
+export interface ICodeInputEmits {
+  /** 输入内容发生改变时触发 */
+  (e: 'change', value: string | number): void
+  /** 输入字符个数达maxlength值时触发确认 */
+  (e: 'finish', value: string | number): void
+  /** 更新值 */
+  (e: 'update:modelValue', value: string | number): void
+}