hy-app 0.3.0 → 0.3.2

package/components/hy-text/hy-text.vue

@@ -1,5 +1,10 @@
 <template>
-  <view :class="['hy-text', customClass]" v-if="show" :style="wrapStyle" @tap="clickHandler">
+  <view
+    :class="['hy-text', customClass]"
+    v-if="show"
+    :style="wrapStyle"
+    @tap="clickHandler"
+  >
     <text
       :class="['hy-text__price', type && `hy-text__value--${type}`]"
       v-if="mode === 'price'"
@@ -53,34 +58,46 @@
 
 <script lang="ts">
 export default {
-  name: 'hy-text',
+  name: "hy-text",
   options: {
     addGlobalClass: true,
     virtualHost: true,
-    styleIsolation: 'shared',
+    styleIsolation: "shared",
   },
-}
+};
 </script>
 
 <script setup lang="ts">
-import { computed, nextTick, toRefs } from 'vue'
-import type { CSSProperties, PropType } from 'vue'
-import type { ITextEmits } from './typing'
-import { addUnit, error, formatName, formatTime, isDate, priceFormat } from '../../utils'
+import { computed, nextTick } from "vue";
+import type { CSSProperties, PropType } from "vue";
+import type { ITextEmits } from "./typing";
+import {
+  addUnit,
+  error,
+  formatName,
+  formatTime,
+  isDate,
+  priceFormat,
+} from "../../utils";
 
 // 组件
-import HyIcon from '../hy-icon/hy-icon.vue'
+import HyIcon from "../hy-icon/hy-icon.vue";
+import type { InputOnConfirmEvent } from "@uni-helper/uni-types";
 
 /**
  * 此组件集成了文本类在项目中的常用功能，包括状态，拨打电话，格式化日期，*替换，超链接...等功能。 您大可不必在使用特殊文本时自己定义，text组件几乎涵盖您能使用的大部分场景。
  * @displayName hy-text
  */
-defineOptions({})
+defineOptions({});
 
 // const props = withDefaults(defineProps<IProps>(), defaultProps)
 const props = defineProps({
   /** 显示的值 */
-  text: [String, Number],
+  text: {
+    type: [String, Number] as PropType<string | number>,
+    default: "",
+    required: true,
+  },
   /** 主题颜色 */
   type: String,
   /** 是否显示 */
@@ -98,12 +115,15 @@ const props = defineProps({
    * */
   mode: {
     type: String,
-    default: 'text',
+    default: "text",
   },
   /** mode=link下，配置的链接 */
-  href: String,
+  href: {
+    type: String,
+    default: "",
+  },
   /** 格式化规则 */
-  format: String,
+  format: [Function, String],
   /** mode=phone时，点击文本是否拨打电话 */
   call: {
     type: Boolean,
@@ -133,7 +153,7 @@ const props = defineProps({
   /** 图标的样式 */
   iconStyle: {
     type: Object as unknown as PropType<CSSProperties>,
-    default: () => ({ fontSize: '15px' }),
+    default: () => ({ fontSize: "15px" }),
   },
   /**
    * 文字装饰，下划线，中划线等，可选值
@@ -150,7 +170,7 @@ const props = defineProps({
    * */
   align: {
     type: String,
-    default: 'left',
+    default: "left",
   },
   /**
    * 文字换行
@@ -158,7 +178,7 @@ const props = defineProps({
    * */
   wordWrap: {
     type: String,
-    default: 'normal',
+    default: "normal",
   },
   /** 是否占满剩余空间 */
   flex: {
@@ -166,170 +186,158 @@ const props = defineProps({
     default: true,
   },
   /** 定义需要用到的外部样式 */
-  customStyle: Object as PropType<CSSProperties>,
+  customStyle: {
+    type: Object as PropType<CSSProperties>,
+    default: () => {},
+  },
   /** 自定义外部类名 */
   customClass: String,
-})
-const {
-  type,
-  show,
-  text,
-  mode,
-  call,
-  bold,
-  block,
-  color,
-  size,
-  decoration,
-  margin,
-  lines,
-  lineHeight,
-  align,
-  flex,
-  href,
-  format,
-  customStyle,
-} = toRefs(props)
-const emit = defineEmits<ITextEmits>()
+});
+const emit = defineEmits<ITextEmits>();
 
 const wrapStyle = computed(() => {
   const style: CSSProperties = {
-    margin: margin.value,
+    margin: props.margin,
     justifyContent:
-      align.value === 'left' ? 'flex-start' : align.value === 'center' ? 'center' : 'flex-end',
-  }
+      props.align === "left"
+        ? "flex-start"
+        : props.align === "center"
+          ? "center"
+          : "flex-end",
+  };
   // 占满剩余空间
-  if (flex.value) {
-    style.flex = 1
+  if (props.flex) {
+    style.flex = 1;
     // #ifndef APP-NVUE
-    style.width = '100%'
+    style.width = "100%";
     // #endif
   }
-  return style
-})
+  return style;
+});
 const valueStyle = computed(() => {
   const style: CSSProperties = {
-    textDecoration: decoration.value,
-    fontWeight: bold.value ? 'bold' : 'normal',
-    fontSize: addUnit(size.value),
-  }
-  !type.value && (style.color = color.value)
-  lineHeight.value && (style.lineHeight = addUnit(lineHeight.value))
-  block.value && (style.display = 'block')
-  return Object.assign(style, customStyle.value)
-})
+    textDecoration: props.decoration,
+    fontWeight: props.bold ? "bold" : "normal",
+    fontSize: addUnit(props.size),
+  };
+  !props.type && (style.color = props.color);
+  props.lineHeight && (style.lineHeight = addUnit(props.lineHeight));
+  props.block && (style.display = "block");
+  return Object.assign(style, props.customStyle);
+});
 
 /**
  * @description 格式化值
  * */
 const value = computed(() => {
-  switch (mode.value) {
-    case 'price':
+  switch (props.mode) {
+    case "price":
       // 如果text不为金额进行提示
-      if (!/^\d+(\.\d+)?$/.test(text.value.toString())) {
-        error('金额模式下，text参数需要为金额格式')
+      if (!/^\d+(\.\d+)?$/.test(props.text?.toString())) {
+        error("金额模式下，text参数需要为金额格式");
       }
       // 进行格式化，判断用户传入的format参数为正则，或者函数，如果没有传入format，则使用默认的金额格式化处理
-      if (typeof format.value === 'function') {
+      if (typeof props.format === "function") {
         // 如果用户传入的是函数，使用函数格式化
-        return format.value(text.value)
+        return props.format(props.text);
       }
       // 如果format非正则，非函数，则使用默认的金额格式化方法进行操作
-      return priceFormat(text.value, 2)
-    case 'date':
+      return priceFormat(props.text, 2);
+    case "date":
       // 判断是否合法的日期或者时间戳
-      !isDate(text.value) && error('日期模式下，text参数需要为日期或时间戳格式')
+      !isDate(props.text) &&
+        error("日期模式下，text参数需要为日期或时间戳格式");
       // 进行格式化，判断用户传入的format参数为正则，或者函数，如果没有传入format，则使用默认的格式化处理
-      if (typeof format.value === 'function') {
+      if (typeof props.format === "function") {
         // 如果用户传入的是函数，使用函数格式化
-        return format.value(text)
+        return props.format(props.text);
       }
-      if (format.value) {
+      if (props.format) {
         // 如果format非正则，非函数，则使用默认的时间格式化方法进行操作
-        return formatTime(text.value, format.value)
+        return formatTime(props.text, props.format);
       }
       // 如果没有设置format，则设置为默认的时间格式化形式
-      return formatTime(text.value, 'yyyy-MM-dd')
-    case 'phone':
+      return formatTime(props.text, "yyyy-MM-dd");
+    case "phone":
       // 判断是否合法的手机号
       // !test.mobile(text) && error('手机号模式下，text参数需要为手机号码格式')
-      if (typeof format.value === 'function') {
+      if (typeof props.format === "function") {
         // 如果用户传入的是函数，使用函数格式化
-        return format.value(text)
+        return props.format(props.text);
       }
-      if (format.value === 'encrypt') {
+      if (props.format === "encrypt") {
         // 如果format为encrypt，则将手机号进行星号加密处理
-        return `${text.value.toString().substring(0, 3)}****${text.value.toString().substring(7)}`
+        return `${props.text.toString().substring(0, 3)}****${props.text.toString().substring(7)}`;
       }
-      return text.value
-    case 'name':
+      return props.text;
+    case "name":
       // 判断是否合法的字符粗
-      if (typeof text.value !== 'string') {
-        error('姓名模式下，text参数需要为字符串格式')
+      if (typeof props.text !== "string") {
+        error("姓名模式下，text参数需要为字符串格式");
       } else {
-        if (typeof format.value === 'function') {
+        if (typeof props.format === "function") {
           // 如果用户传入的是函数，使用函数格式化
-          return format.value(text)
+          return props.format(props.text);
         }
-        if (format.value === 'encrypt') {
+        if (props.format === "encrypt") {
           // 如果format为encrypt，则将姓名进行星号加密处理
-          return formatName(text.value)
+          return formatName(props.text);
         }
       }
-      return text.value
-    case 'link':
-      return text.value
+      return props.text;
+    case "link":
+      return props.text;
     default:
-      return text.value
+      return props.text;
   }
-})
+});
 
 const isMp = computed(() => {
-  let mp = false
+  let mp;
   // #ifdef MP
-  mp = true
+  mp = true;
   // #endif
-  return mp
-})
+  return mp;
+});
 
-const clickHandler = (e) => {
+const clickHandler = (e: InputOnConfirmEvent) => {
   // 如果为手机号模式，拨打电话
-  if (call.value && mode.value === 'phone') {
+  if (props.call && props.mode === "phone") {
     uni.makePhoneCall({
-      phoneNumber: text.value,
-    })
+      phoneNumber: props.text as string,
+    });
   }
   // 如果是有链接跳转
-  if (href.value && mode.value === 'link') {
-    toLink()
+  if (props.href && props.mode === "link") {
+    toLink();
   }
-  emit('click', e)
-}
+  emit("click", e);
+};
 
 const toLink = () => {
   // #ifdef APP-PLUS
-  plus.runtime.openURL(href.value)
+  plus.runtime.openURL(props.href);
   // #endif
   // #ifdef H5
-  window.open(href.value)
+  window.open(props.href);
   // #endif
   // #ifdef MP
   uni.setClipboardData({
-    data: href.value,
+    data: props.href,
     success: () => {
-      uni.hideToast()
+      uni.hideToast();
       nextTick(() => {
-        uni.showToast({ title: '链接已复制，请在浏览器打开' })
-      })
+        uni.showToast({ title: "链接已复制，请在浏览器打开" });
+      });
     },
-  })
+  });
   // #endif
-}
+};
 </script>
 
 <style scoped lang="scss">
-@import './index.scss';
-@import '../../libs/css/mixin.scss';
+@import "./index.scss";
+@import "../../libs/css/mixin.scss";
 /*超出出现省略号*/
 .hy-text__value--lines {
   @include multiEllipsis(v-bind(lines));

package/components/hy-textarea/hy-textarea.vue

@@ -1,9 +1,9 @@
 <template>
-  <view
+  <View
     :class="['hy-textarea', customClass, textareaClass]"
     :style="[textareaStyle, borderStyle(isFocus)]"
   >
-    <textarea
+    <Textarea
       class="hy-textarea--field"
       :value="innerValue"
       :style="{ height: autoHeight ? 'auto' : addUnit(height) }"
@@ -26,13 +26,13 @@
       :confirm-type="confirmType"
       @focus="onFocus"
       @blur="onBlur"
-      @linechange="onLinechange"
+      @linechange="onLineChange"
       @input="onInput"
       @confirm="onConfirm"
       @keyboardheightchange="onKeyboardheightchange"
-    ></textarea>
+    ></Textarea>
     <!-- #ifndef MP-ALIPAY -->
-    <text
+    <Text
       class="hy-textarea--count"
       :style="{
         'background-color': disabled ? 'transparent' : '',
@@ -40,45 +40,54 @@
       v-if="count"
     >
       {{ innerValue.length }}/{{ maxlength }}
-    </text>
+    </Text>
     <!-- #endif -->
-  </view>
+  </View>
 </template>
 
 <script lang="ts">
 export default {
-  name: 'hy-textarea',
+  name: "hy-textarea",
   options: {
     addGlobalClass: true,
     virtualHost: true,
-    styleIsolation: 'shared',
+    styleIsolation: "shared",
   },
-}
+};
 </script>
 
 <script setup lang="ts">
-import { computed, ref, toRefs, watch, nextTick, inject } from 'vue'
-import type { CSSProperties, PropType } from 'vue'
-import type { ITextareaEmits } from './typing'
-import { addUnit } from '../../utils'
-import { FormItemContext } from '@/package/components/hy-form-item/typing'
+import { computed, ref, watch, nextTick, inject } from "vue";
+import type { CSSProperties, PropType } from "vue";
+import type { ITextareaEmits } from "./typing";
+import { addUnit } from "../../utils";
+import type { FormItemContext } from "../hy-form-item/typing";
+import type {
+  InputOnBlurEvent,
+  InputOnConfirmEvent,
+  InputOnFocusEvent,
+  InputOnKeyboardheightchangeEvent,
+} from "@uni-helper/uni-types";
 
 /**
  * 用于输入多行文本信息,聊天输入框等。
  * @displayName hy-textarea
  */
-defineOptions({})
+defineOptions({});
 
 // const props = withDefaults(defineProps<IProps>(), defaultProps);
 const props = defineProps({
   /** 输入框的内容 */
-  modelValue: String,
+  modelValue: {
+    type: String,
+    default: "",
+  },
   /** 输入框为空时占位符 */
   placeholder: String,
   /** 指定placeholder的样式类，注意页面或组件的style中写了scoped时，需要在类名前写/deep/ */
   placeholderClass: {
     type: String,
-    default: 'textarea-placeholder',
+    default: "textarea-placeholder",
   },
   /** 指定placeholder的样式，对象形式 */
   placeholderStyle: Object as PropType<CSSProperties>,
@@ -90,7 +99,7 @@ const props = defineProps({
   /** 设置键盘右下角按钮的文字，仅微信小程序，App-vue和H5有效 */
   confirmType: {
     type: String,
-    default: 'done',
+    default: "done",
   },
   /** 是否禁用 */
   disabled: {
@@ -165,7 +174,7 @@ const props = defineProps({
    * */
   border: {
     type: String,
-    default: 'surround',
+    default: "surround",
   },
   /** 内容式化函数 */
   formatter: Function,
@@ -175,125 +184,123 @@ const props = defineProps({
   },
   /** 自定义外部类名 */
   customClass: String,
-})
-const { modelValue, customStyle, border, disabled, formatter } = toRefs(props)
-const emit = defineEmits<ITextareaEmits>()
-const formItem = inject<FormItemContext>('formItem')
+});
+const emit = defineEmits<ITextareaEmits>();
+const formItem = inject<FormItemContext>("formItem");
 
 // 输入框的值
-const innerValue = ref<string>('')
-// 是否处于获得焦点状态
-const focused = ref<boolean>(false)
+const innerValue = ref<string>("");
 // value是否第一次变化，在watch中，由于加入immediate属性，会在第一次触发，此时不应该认为value发生了变化
-const firstChange = ref<boolean>(true)
+const firstChange = ref<boolean>(true);
 // value绑定值的变化是由内部还是外部引起的
-const changeFromInner = ref<boolean>(false)
+const changeFromInner = ref<boolean>(false);
 // 是否获取焦点
-const isFocus = ref<boolean>(false)
+const isFocus = ref<boolean>(false);
 // 过滤处理方法
-let innerFormatter = (value: string) => value
+let innerFormatter = (value: string) => value;
 
 watch(
-  () => modelValue.value,
+  () => props.modelValue,
   (newVal) => {
-    innerValue.value = newVal
+    innerValue.value = newVal;
     /* #ifdef H5 */
     // 在H5中，外部value变化后，修改input中的值，不会触发@input事件，此时手动调用值变化方法
     if (firstChange.value === false && changeFromInner.value === false) {
-      valueChange()
+      valueChange();
     }
     /* #endif */
-    firstChange.value = false
+    firstChange.value = false;
     // 重置changeFromInner的值为false，标识下一次引起默认为外部引起的
-    changeFromInner.value = false
+    changeFromInner.value = false;
   },
   { immediate: true },
-)
+);
 
 // 组件的类名
 const textareaClass = computed(() => {
-  let classes: string[] = []
-  border.value === 'surround' && (classes = classes.concat(['hy-border', 'hy-textarea--radius']))
-  border.value === 'bottom' &&
-    (classes = classes.concat(['hy-border__bottom', 'hy-textarea--no-radius']))
-  disabled.value && classes.push('hy-textarea--disabled')
-  return classes.join(' ')
-})
+  let classes: string[] = [];
+  props.border === "surround" &&
+    (classes = classes.concat(["hy-border", "hy-textarea--radius"]));
+  props.border === "bottom" &&
+    (classes = classes.concat(["hy-border__bottom", "hy-textarea--no-radius"]));
+  props.disabled && classes.push("hy-textarea--disabled");
+  return classes.join(" ");
+});
 // 组件的样式
 const textareaStyle = computed(() => {
-  const style: CSSProperties = {}
+  const style: CSSProperties = {};
 
-  return Object.assign(style, customStyle.value)
-})
+  return Object.assign(style, props.customStyle);
+});
 /**
  * @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
+      switch (props.border) {
+        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;
+  };
+});
 
-const onFocus = (e: FocusEvent) => {
-  isFocus.value = true
-  emit('focus', e)
-}
-const onBlur = (e: any) => {
-  isFocus.value = false
-  emit('blur', e)
-  formItem.handleBlur(e.detail.value)
+const onFocus = (e: InputOnFocusEvent) => {
+  isFocus.value = true;
+  emit("focus", e);
+};
+const onBlur = (e: InputOnBlurEvent) => {
+  isFocus.value = false;
+  emit("blur", e);
+  if (formItem) formItem.handleBlur(e.detail.value);
   // 尝试调用u-form的验证方法
   // formValidate(this, "blur");
-}
-const onLinechange = (e: any) => {
-  emit('lineChange', e)
-}
+};
+const onLineChange = (e: any) => {
+  emit("lineChange", e);
+};
 const onInput = (e: any) => {
-  let { value } = e?.detail
+  let { value } = e?.detail;
   // 格式化过滤方法
-  const format = formatter.value || innerFormatter
-  const formatValue = format(value)
+  const format = props.formatter || innerFormatter;
+  const formatValue = format(value);
   // 为了避免props的单向数据流特性，需要先将innerValue值设置为当前值，再在$nextTick中重新赋予设置后的值才有效
-  innerValue.value = value
+  innerValue.value = value;
   nextTick(() => {
-    innerValue.value = formatValue
-    valueChange()
-  })
-}
+    innerValue.value = formatValue;
+    valueChange();
+  });
+};
 /**
  * @description 内容发生变化，进行处理
  * */
 const valueChange = () => {
-  const value = innerValue.value
+  const value = innerValue.value;
   nextTick(() => {
-    emit('update:modelValue', value)
+    emit("update:modelValue", value);
     // 标识value值的变化是由内部引起的
-    changeFromInner.value = true
-    emit('change', value)
-    formItem.handleChange(value)
-  })
-}
-const onConfirm = (e: Event) => {
-  emit('confirm', e)
-}
-const onKeyboardheightchange = (e: Event) => {
-  emit('keyboardheightchange', e)
-}
+    changeFromInner.value = true;
+    emit("change", value);
+    if (formItem) formItem.handleChange(value);
+  });
+};
+const onConfirm = (e: InputOnConfirmEvent) => {
+  emit("confirm", e);
+};
+const onKeyboardheightchange = (e: InputOnKeyboardheightchangeEvent) => {
+  emit("keyboardheightchange", e);
+};
 </script>
 
 <style lang="scss" scoped>
-@import './index.scss';
+@import "./index.scss";
 </style>