hy-app 0.3.0 → 0.3.2

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

@@ -1,5 +1,8 @@
 <template>
-  <view :class="['hy-input', inputClass]" :style="[wrapperStyle, borderStyle(focused)]">
+  <view
+    :class="['hy-input', inputClass]"
+    :style="[wrapperStyle, borderStyle(focused)]"
+  >
     <view class="hy-input__content">
       <view
         class="hy-input__content__prefix-icon"
@@ -34,7 +37,7 @@
           :type="type"
           :focus="focus"
           :cursor="cursor"
-          :value="innerValue"
+          :value="String(innerValue)"
           :auto-blur="autoBlur"
           :disabled="disabled || readonly"
           :maxlength="maxlength"
@@ -48,7 +51,7 @@
           :adjust-position="adjustPosition"
           :selection-end="selectionEnd"
           :selection-start="selectionStart"
-          :password="password || type === 'password' || false"
+          :password="password || type === 'safe-password' || false"
           :ignoreCompositionEvent="ignoreCompositionEvent"
           @input="onInput"
           @blur="onBlur"
@@ -57,7 +60,11 @@
           @keyboardheightchange="onkeyboardheightchange"
         />
       </view>
-      <view class="hy-input__content__clear" v-if="isShowClear" @click="onClear">
+      <view
+        class="hy-input__content__clear"
+        v-if="isShowClear"
+        @click="onClear"
+      >
         <HyIcon
           :name="IconConfig.CLOSE"
           size="11"
@@ -93,31 +100,46 @@
 
 <script lang="ts">
 export default {
-  name: 'hy-input',
+  name: "hy-input",
   options: {
     addGlobalClass: true,
     virtualHost: true,
-    styleIsolation: 'shared',
+    styleIsolation: "shared",
   },
-}
+};
 </script>
 
 <script setup lang="ts">
-import { computed, nextTick, ref, toRefs, watch, getCurrentInstance, inject } from 'vue'
-import type { CSSProperties, PropType } from 'vue'
-import HyIcon from '../hy-icon/hy-icon.vue'
-import { addUnit, formatObject } from '../../utils'
-import { IconConfig } from '../../config'
-import type { IInputEmits } from './typing'
-import type HyIconProps from '../hy-icon/typing'
-import { FormItemContext } from '@/package/components/hy-form-item/typing'
-import { TextAlign } from 'csstype'
+import {
+  computed,
+  nextTick,
+  ref,
+  toRefs,
+  watch,
+  getCurrentInstance,
+  inject,
+} from "vue";
+import type { CSSProperties, PropType } from "vue";
+import HyIcon from "../hy-icon/hy-icon.vue";
+import { addUnit, formatObject } from "../../utils";
+import { IconConfig } from "../../config";
+import type { IInputEmits } from "./typing";
+import type HyIconProps from "../hy-icon/typing";
+import type { FormItemContext } from "../hy-form-item/typing";
+import type {
+  InputConfirmType,
+  InputOnBlurEvent,
+  InputOnConfirmEvent,
+  InputOnFocusEvent,
+  InputOnKeyboardheightchange,
+  InputType,
+} from "@uni-helper/uni-types";
 
 /**
  * 为一个输入框，利用它可以快速实现表单验证，输入内容，下拉选择等功能。
  * @displayName hy-input
  */
-defineOptions({})
+defineOptions({});
 
 // const props = withDefaults(defineProps<IProps>(), defaultProps)
 const props = defineProps({
@@ -128,11 +150,11 @@ const props = defineProps({
   },
   /**
    * 输入框类型，见上方说明
-   * @values text,idcard,number,digit,password
+   * @values text,idcard,number,digit,safe-password,tel,nickname
    * */
   type: {
-    type: String,
-    default: 'text',
+    type: String as PropType<InputType>,
+    default: "text",
   },
   /** 如果 textarea 是在一个 position:fixed 的区域，需要显示指定属性 fixed 为 true，兼容性：微信小程序、百度小程序、字节跳动小程序、QQ小程序 */
   fixed: {
@@ -145,7 +167,10 @@ const props = defineProps({
     default: false,
   },
   /** 禁用状态时的背景色 */
-  disabledColor: String,
+  disabledColor: {
+    type: String,
+    default: "",
+  },
   /** 是否显示清除控件 */
   clearable: {
     type: Boolean,
@@ -166,12 +191,12 @@ const props = defineProps({
   /** 指定placeholder的样式类，注意页面或组件的style中写了scoped时，需要在类名前写/deep/ */
   placeholderClass: {
     type: String,
-    default: 'input-placeholder',
+    default: "input-placeholder",
   },
   /** 指定placeholder的样式，字符串/对象形式，如"color: red;" */
   placeholderStyle: {
     type: Object as PropType<CSSProperties>,
-    default: {},
+    default: () => ({}),
   },
   /** 是否显示输入字数统计，只在 type ="text"或type ="textarea"时有效 */
   showWordLimit: {
@@ -180,8 +205,8 @@ const props = defineProps({
   },
   /** 设置右下角按钮的文字，兼容性详见uni-app文档 */
   confirmType: {
-    type: String,
-    default: 'done',
+    type: String as PropType<InputConfirmType>,
+    default: "done",
   },
   /** 点击键盘右下角按钮时是否保持键盘不收起，H5无效 */
   confirmHold: {
@@ -238,25 +263,28 @@ const props = defineProps({
    * @values left,center,right
    * */
   inputAlign: {
-    type: String as PropType<TextAlign>,
-    default: 'left',
+    type: String as PropType<HyApp.RowCenterType>,
+    default: "left",
   },
   /** 输入框字体的大小 */
   fontSize: {
     type: [String, Number],
-    default: '15px',
+    default: "15px",
   },
   /** 输入框字体颜色 */
-  color: String,
+  color: {
+    type: String,
+    default: "",
+  },
   /** 输入框前置图标 */
   prefixIcon: {
     type: Object as PropType<HyIconProps>,
-    default: {},
+    default: () => {},
   },
   /** 输入框后置图标 */
   suffixIcon: {
     type: Object as PropType<HyIconProps>,
-    default: {},
+    default: () => {},
   },
   /**
    * 边框类型
@@ -264,7 +292,7 @@ const props = defineProps({
    * */
   border: {
     type: String,
-    default: 'surround',
+    default: "surround",
   },
   /** 是否只读，与disabled不同之处在于disabled会置灰组件，而readonly则不会 */
   readonly: {
@@ -277,7 +305,7 @@ const props = defineProps({
    * */
   shape: {
     type: String,
-    default: 'square',
+    default: "square",
   },
   /** 是否忽略组件内对文本合成系统事件的处理 */
   ignoreCompositionEvent: {
@@ -289,94 +317,96 @@ const props = defineProps({
   /** 定义需要用到的外部样式 */
   customStyle: {
     type: Object as PropType<CSSProperties>,
+    default: () => {},
   },
   /** 自定义外部类名 */
   customClass: String,
-})
+});
 const {
   disabled,
   disabledColor,
   border,
   color,
   inputAlign,
-  customStyle,
   fontSize,
   readonly,
   placeholderStyle,
-} = toRefs(props)
-const emit = defineEmits<IInputEmits>()
-const formItem = inject<FormItemContext>('formItem')
+} = toRefs(props);
+const emit = defineEmits<IInputEmits>();
+const formItem = inject<FormItemContext | null>("formItem", null);
 
-const instance = getCurrentInstance()
+const instance = getCurrentInstance();
 // 清除操作
-const clearInput = ref<boolean>(false)
+const clearInput = ref<boolean>(false);
 // 输入框的值
-const innerValue = ref<string | number>('')
+const innerValue = ref<string | number>("");
 // 是否处于获得焦点状态
-const focused = ref<boolean>(false)
+const focused = ref<boolean>(false);
 // value是否第一次变化，在watch中，由于加入immediate属性，会在第一次触发，此时不应该认为value发生了变化
-const firstChange = ref<boolean>(true)
+const firstChange = ref<boolean>(true);
 // value绑定值的变化是由内部还是外部引起的
-const changeFromInner = ref<boolean>(false)
-const innerFormatter = (value: string) => value
+const changeFromInner = ref<boolean>(false);
+const innerFormatter = (value: string) => value;
 
 watch(
   () => props.modelValue,
   (newVal) => {
     if (changeFromInner.value || innerValue.value === newVal) {
-      changeFromInner.value = false // 重要否则会出现双向绑定失效问题https://github.com/ijry/uview-plus/issues/419
-      return
+      changeFromInner.value = false; // 重要否则会出现双向绑定失效问题https://github.com/ijry/uview-plus/issues/419
+      return;
     }
-    innerValue.value = newVal
+    innerValue.value = newVal;
     // 在H5中，外部value变化后，修改input中的值，不会触发@input事件，此时手动调用值变化方法
     if (firstChange.value === false && changeFromInner.value === false) {
-      valueChange(innerValue.value, true)
+      valueChange(innerValue.value, true);
     } else {
       // 尝试调用up-form的验证方法
       // if (!firstChange.value) formValidate(this, "change");
     }
-    firstChange.value = false
+    firstChange.value = false;
     // 重置changeFromInner的值为false，标识下一次引起默认为外部引起的
-    changeFromInner.value = false
+    changeFromInner.value = false;
   },
   { immediate: true },
-)
+);
 
 /**
  * @description 是否显示清除控件
  * */
 const isShowClear = computed(() => {
-  const { clearable, readonly } = props
-  return clearable && !readonly && !!focused.value && innerValue.value !== ''
-})
+  const { clearable, readonly } = props;
+  return clearable && !readonly && !!focused.value && innerValue.value !== "";
+});
 /**
  * @description 组件的类名
  * */
 const inputClass = computed((): string => {
   let classes: string[] = [],
-    { border, shape } = props
-  border === 'surround' && (classes = classes.concat(['hy-border', 'hy-input--radius']))
-  classes.push(`hy-input--${shape}`)
-  border === 'bottom' && (classes = classes.concat(['hy-border__bottom', 'hy-input--no-radius']))
-  disabled.value && classes.push('hy-input--disabled')
-  return classes.join(' ')
-})
+    { border, shape } = props;
+  border === "surround" &&
+    (classes = classes.concat(["hy-border", "hy-input--radius"]));
+  classes.push(`hy-input--${shape}`);
+  border === "bottom" &&
+    (classes = classes.concat(["hy-border__bottom", "hy-input--no-radius"]));
+  disabled.value && classes.push("hy-input--disabled");
+  return classes.join(" ");
+});
 
 /**
  * @description 组件的样式
  * */
 const wrapperStyle = computed((): CSSProperties => {
-  const style: CSSProperties = {}
-  style.paddingTop = '6px'
-  style.paddingBottom = '6px'
-  style.paddingLeft = '9px'
-  style.paddingRight = '9px'
+  const style: CSSProperties = {};
+  style.paddingTop = "6px";
+  style.paddingBottom = "6px";
+  style.paddingLeft = "9px";
+  style.paddingRight = "9px";
   // 禁用状态下，被背景色加上对应的样式
   if (disabled.value) {
-    style.backgroundColor = disabledColor.value
+    style.backgroundColor = disabledColor.value;
   }
-  return Object.assign(style, customStyle.value)
-})
+  return Object.assign(style, props.customStyle);
+});
 /**
  * @description 输入框的样式
  * */
@@ -385,108 +415,108 @@ const inputStyle = computed((): CSSProperties => {
     color: color.value,
     fontSize: addUnit(fontSize.value),
     textAlign: inputAlign.value,
-  }
-})
+  };
+});
 
 /**
  * @description 边框颜色
  * */
 const borderStyle = computed(() => {
   return (isFocus: boolean) => {
-    let style: CSSProperties = {}
+    let style: CSSProperties = {};
     if (isFocus) {
       switch (border.value) {
-        case 'surround':
-          style = { border: `1px solid var(--hy-theme-color, #3c9cff)` }
-          break
-        case 'bottom':
-          style = { borderBottom: `1px solid var(--hy-theme-color, #3c9cff)` }
-          break
+        case "surround":
+          style = { border: `1px solid var(--hy-theme-color, #3c9cff)` };
+          break;
+        case "bottom":
+          style = { borderBottom: `1px solid var(--hy-theme-color, #3c9cff)` };
+          break;
         default:
-          break
+          break;
       }
     }
-    return style
-  }
-})
+    return style;
+  };
+});
 
 /**
  * @description 当键盘输入时，触发input事件
  */
 const onInput = (e: any) => {
-  let { value = '' } = e.detail || {}
+  let { value = "" } = e.detail || {};
   // 为了避免props的单向数据流特性，需要先将innerValue值设置为当前值，再在$nextTick中重新赋予设置后的值才有效
   // console.log('onInput', value, this.innerValue)
-  innerValue.value = value
+  innerValue.value = value;
   nextTick(() => {
-    let formatValue = innerFormatter(value)
-    innerValue.value = formatValue
-    valueChange(formatValue)
-  })
-}
+    let formatValue = innerFormatter(value);
+    innerValue.value = formatValue;
+    valueChange(formatValue);
+  });
+};
 /**
  * @description 输入框失去焦点时触发
  * */
-const onBlur = (event: any) => {
-  emit('blur', event.detail.value)
-  formItem.handleBlur(event.detail.value)
+const onBlur = (event: InputOnBlurEvent) => {
+  emit("blur", event, event.detail.value);
+  if (formItem) formItem.handleBlur(event.detail.value);
   // H5端的blur会先于点击清除控件的点击click事件触发，导致focused
   // 瞬间为false，从而隐藏了清除控件而无法被点击到
   setTimeout(() => {
-    focused.value = false
-  }, 150)
-}
+    focused.value = false;
+  }, 150);
+};
 /**
  * @description 输入框聚焦时触发
  * */
-const onFocus = () => {
-  focused.value = true
-  emit('focus')
-}
+const onFocus = (e: InputOnFocusEvent) => {
+  focused.value = true;
+  emit("focus", e);
+};
 
 /**
  * @description 点击完成按钮时触发
  * */
-const onConfirm = (event: string) => {
-  emit('confirm', innerValue.value)
-}
+const onConfirm = (e: InputOnConfirmEvent) => {
+  emit("confirm", e, innerValue.value);
+};
 /**
  * 键盘高度发生变化的时候触发此事件
  * 兼容性：微信小程序2.7.0+、App 3.1.0+
  * */
-const onkeyboardheightchange = (event: Event) => {
-  emit('keyboardheightchange', event)
-}
+const onkeyboardheightchange = (event: InputOnKeyboardheightchange) => {
+  emit("keyboardheightchange", event);
+};
 /**
  * 内容发生变化，进行处理
  */
 const valueChange = (value: string | number, isOut = false) => {
   if (clearInput.value) {
-    innerValue.value = ''
-    clearInput.value = false
+    innerValue.value = "";
+    clearInput.value = false;
   }
   nextTick(() => {
     if (!isOut || clearInput.value) {
       // 标识value值的变化是由内部引起的
-      changeFromInner.value = true
-      emit('change', value)
-      formItem.handleChange(value)
+      changeFromInner.value = true;
+      emit("change", value);
+      if (formItem) formItem.handleChange(value);
 
-      emit('update:modelValue', value)
+      emit("update:modelValue", value);
     }
-  })
-}
+  });
+};
 /**
  * @description 点击清除控件
  */
 const onClear = () => {
-  clearInput.value = true
-  innerValue.value = ''
+  clearInput.value = true;
+  innerValue.value = "";
   nextTick(() => {
-    valueChange('')
-    emit('clear')
-  })
-}
+    valueChange("");
+    emit("clear");
+  });
+};
 /**
  * 在安卓nvue上，事件无法冒泡
  * 在某些时间，我们希望监听u-from-item的点击事件，此时会导致点击u-form-item内的u-input后
@@ -495,24 +525,24 @@ const onClear = () => {
 const clickHandler = () => {
   // 隐藏键盘
   if (disabled.value || readonly.value) {
-    uni.hideKeyboard()
+    uni.hideKeyboard();
   }
-}
+};
 
 /**
  * @description 点击前缀
  * */
 const onPrefix = () => {
-  emit('onPrefix')
-}
+  emit("onPrefix");
+};
 /**
  * @description 点击后缀
  * */
 const onSuffix = () => {
-  emit('onSuffix')
-}
+  emit("onSuffix");
+};
 </script>
 
 <style lang="scss" scoped>
-@import './index.scss';
+@import "./index.scss";
 </style>