hy-app 0.3.0 → 0.3.2

package/components/hy-search/hy-search.vue

@@ -95,48 +95,57 @@
 
 <script lang="ts">
 export default {
-  name: 'hy-search',
+  name: "hy-search",
   options: {
     addGlobalClass: true,
     virtualHost: true,
-    styleIsolation: 'shared',
+    styleIsolation: "shared",
   },
-}
+};
 </script>
 
 <script setup lang="ts">
-import { computed, nextTick, toRefs, ref, watch } from 'vue'
-import type { PropType, CSSProperties } from 'vue'
-import type { ISearchEmits } from './typing'
-import { sleep, addUnit } from '../../utils'
-import { IconConfig } from '../../config'
-import HyIcon from '../hy-icon/hy-icon.vue'
-import type HyIconProps from '../hy-icon/typing'
+import { computed, nextTick, ref, watch } from "vue";
+import type { PropType, CSSProperties } from "vue";
+import type { ISearchEmits } from "./typing";
+import { sleep, addUnit } from "../../utils";
+import { IconConfig } from "../../config";
+import HyIcon from "../hy-icon/hy-icon.vue";
+import type HyIconProps from "../hy-icon/typing";
+import type {
+  InputOnBlurEvent,
+  InputOnConfirmEvent,
+  InputOnFocusEvent,
+  InputOnInputEvent,
+} from "@uni-helper/uni-types";
 
 /**
  * 搜索组件，集成了常见搜索框所需功能，用户可以一键引入，开箱即用。
  * @displayName hy-search
  */
-defineOptions({})
+defineOptions({});
 
 // const props = withDefaults(defineProps<IProps>(), defaultProps)
 const props = defineProps({
   /** 输入框初始值 */
-  modelValue: String,
+  modelValue: {
+    type: String,
+    default: "",
+  },
   /**
    * 搜索框形状
    * @values circle,square
    * */
   shape: {
     type: String,
-    default: 'circle',
+    default: "circle",
   },
   /** 搜索框背景颜色 */
   bgColor: String,
   /** 占位文字内容 */
   placeholder: {
     type: String,
-    default: '请输入关键字',
+    default: "请输入关键字",
   },
   /** 是否启用清除控件 */
   clear: {
@@ -156,7 +165,7 @@ const props = defineProps({
   /** 右侧控件文字 */
   actionText: {
     type: String,
-    default: '搜索',
+    default: "搜索",
   },
   /** 右侧控件的样式，对象形式 */
   actionStyle: {
@@ -166,7 +175,7 @@ const props = defineProps({
   /** 输入框内容水平对齐方式 */
   inputAlign: {
     type: String,
-    default: 'left',
+    default: "left",
   },
   /** 自定义输入框样式，对象形式 */
   inputStyle: {
@@ -181,14 +190,14 @@ const props = defineProps({
   /** 边框颜色，配置了颜色，才会有边框 */
   borderColor: {
     type: String,
-    default: 'transparent',
+    default: "transparent",
   },
   /** 输入框字体颜色 */
   color: String,
   /** placeholder的颜色 */
   placeholderColor: {
     type: String,
-    default: '#909399',
+    default: "#909399",
   },
   /** 输入框左边的图标属性集合，可以为图标名称或图片路径 */
   searchIcon: Object as PropType<HyIconProps>,
@@ -230,111 +239,109 @@ const props = defineProps({
   },
   /** 自定义外部类名 */
   customClass: String,
-})
-const { focus, modelValue, showAction, animation, disabled } = toRefs(props)
-const emit = defineEmits<ISearchEmits>()
+});
+const emit = defineEmits<ISearchEmits>();
 
-const keyword = ref<string>('')
-// 是否显示右边的清除图标
-const showClear = ref<boolean>(false)
-const show = ref<boolean>(false)
+const keyword = ref<string>("");
+// 显示右边搜索按钮
+const show = ref<boolean>(false);
 // 标记input当前状态是否处于聚焦中，如果是，才会显示右侧的清除控件
-const focused = ref(focus.value)
+const focused = ref(props.focus);
 
 watch(
   () => keyword.value,
   (newValue: string) => {
-    emit('update:modelValue', newValue)
-    emit('change', newValue)
+    emit("update:modelValue", newValue);
+    emit("change", newValue);
   },
-)
+);
 
 watch(
-  () => modelValue.value,
+  () => props.modelValue,
   (newValue: string) => {
-    keyword.value = newValue
+    keyword.value = newValue;
   },
   { immediate: true },
-)
+);
 
 const showActionBtn = computed<boolean>(() => {
-  return !animation.value && showAction.value
-})
+  return !props.animation && props.showAction;
+});
 
 /**
- * @description
+ * 值改变触发
  * */
-const inputChange = (e: Event) => {
-  keyword.value = e.detail.value
-}
+const inputChange = (e: InputOnInputEvent) => {
+  keyword.value = e.detail.value;
+};
 /**
  * @description 清空输入
  * */
 const clear = () => {
-  keyword.value = ''
+  keyword.value = "";
   // 延后发出事件，避免在父组件监听clear事件时，value为更新前的值(不为空)
   nextTick(() => {
-    emit('clear')
-  })
-}
+    emit("clear");
+  });
+};
 /**
  * @description 确定搜索
  * */
-const search = (e: InputEvent) => {
-  emit('search', e.detail.value)
+const search = (e: InputOnConfirmEvent) => {
+  emit("search", e, e.detail.value);
   try {
     // 收起键盘
-    uni.hideKeyboard()
+    uni.hideKeyboard();
   } catch (e) {}
-}
+};
 /**
  * @description 点击右边自定义按钮的事件
  */
 const confirm = () => {
-  emit('confirm', keyword.value)
+  emit("confirm", keyword.value);
   try {
     // 收起键盘
-    uni.hideKeyboard()
+    uni.hideKeyboard();
   } catch (e) {}
-}
+};
 /**
  * @description 获取焦点
  * */
-const getFocus = () => {
-  focused.value = true
+const getFocus = (e: InputOnFocusEvent) => {
+  focused.value = true;
   // 开启右侧搜索按钮展开的动画效果
-  if (animation.value && showAction.value) show.value = true
-  emit('focus', keyword.value)
-}
+  if (props.animation && props.showAction) show.value = true;
+  emit("focus", e, keyword.value);
+};
 /**
  * @description 失去焦点
  */
-const blur = async () => {
+const blur = async (e: InputOnBlurEvent) => {
   // 最开始使用的是监听图标@touchstart事件，自从hx2.8.4后，此方法在微信小程序出错
   // 这里改为监听点击事件，手点击清除图标时，同时也发生了@blur事件，导致图标消失而无法点击，这里做一个延时
-  show.value = false
-  emit('blur', keyword.value)
-  await sleep(100)
-  focused.value = false
-}
+  show.value = false;
+  emit("blur", e, keyword.value);
+  await sleep(100);
+  focused.value = false;
+};
 /**
  * @description 点击搜索框，只有disabled=true时才发出事件，因为禁止了输入，意味着是想跳转真正的搜索页
  * */
 const clickHandler = () => {
-  if (disabled.value) emit('click')
-}
+  if (props.disabled) emit("click");
+};
 /**
  * @description 点击左边图标
  * */
 const clickIcon = () => {
-  emit('clickIcon', keyword.value)
+  emit("clickIcon", keyword.value);
   try {
     // 收起键盘
-    uni.hideKeyboard()
+    uni.hideKeyboard();
   } catch (e) {}
-}
+};
 </script>
 
 <style lang="scss" scoped>
-@import './index.scss';
+@import "./index.scss";
 </style>

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

@@ -1,122 +1,123 @@
-import type { CSSProperties } from 'vue'
-import type HyIconProps from '../hy-icon/typing'
+import type { CSSProperties } from "vue";
+import type HyIconProps from "../hy-icon/typing";
+import type { InputOnConfirmEvent } from "@uni-helper/uni-types";
 
 export default interface HySearchProps {
   /**
    * @description 输入框初始值
    * */
-  modelValue: string
+  modelValue: string;
   /**
    * @description 搜索框形状，circle-圆形，square-方形（默认 'circle' ）
    * */
-  shape?: HyApp.ShapeType
+  shape?: HyApp.ShapeType;
   /**
    * @description 搜索框背景颜色（默认 '#f2f2f2' ）
    * */
-  bgColor?: string
+  bgColor?: string;
   /**
    * @description 占位文字内容（默认 '请输入关键字' ）
    * */
-  placeholder?: string
+  placeholder?: string;
   /**
    * @description 是否启用清除控件（默认 true ）
    * */
-  clear?: boolean
+  clear?: boolean;
   /**
    * @description 是否自动获得焦点（默认 false ）
    * */
-  focus?: boolean
+  focus?: boolean;
   /**
    * @description 是否显示右侧控件（默认 true ）
    * */
-  showAction?: boolean
+  showAction?: boolean;
   /**
    * @description 右侧控件的样式，对象形式
    * */
-  actionStyle?: CSSProperties
+  actionStyle?: CSSProperties;
   /**
    * @description 右侧控件文字（默认 '搜索' ）
    * */
-  actionText?: string
+  actionText?: string;
   /**
    * @description 输入框内容水平对齐方式 （默认 'left' ）
    * */
-  inputAlign?: HyApp.RowCenterType
+  inputAlign?: HyApp.RowCenterType;
   /**
    * @description 自定义输入框样式，对象形式
    * */
-  inputStyle?: CSSProperties
+  inputStyle?: CSSProperties;
   /**
    * @description 是否启用输入框（默认 false ）
    * */
-  disabled?: boolean
+  disabled?: boolean;
   /**
    * @description 边框颜色，配置了颜色，才会有边框 (默认 'transparent' )
    * */
-  borderColor?: string
+  borderColor?: string;
   /**
    * @description 输入框字体颜色（默认 '#606266' ）
    * */
-  color?: string
+  color?: string;
   /**
    * @description placeholder的颜色（默认 '#909399' ）
    * */
-  placeholderColor?: string
+  placeholderColor?: string;
   /**
    * @description 输入框左边的图标属性集合，可以为图标名称或图片路径  (默认 'search' )
    * */
-  searchIcon?: Partial<HyIconProps>
+  searchIcon?: Partial<HyIconProps>;
   /**
    * @description 组件与其他上下左右之间的距离，带单位的字符串形式，如"30px"   (默认 '0' )
    * */
-  margin?: string
+  margin?: string;
   /**
    * @description 是否开启动画，见上方说明（默认 false ）
    * */
-  animation?: boolean
+  animation?: boolean;
   /**
    * @description 输入框最大能输入的长度，-1为不限制长度  (默认 '-1' )
    * */
-  maxlength?: string | number
+  maxlength?: string | number;
   /**
    * @description 输入框高度，单位px（默认 64 ）
    * */
-  height?: number
+  height?: number;
   /**
    * @description 搜索框左边显示内容
    * */
-  label?: string | null
+  label?: string | null;
   /**
    * @description 键盘弹起时，是否自动上推页面
    * */
-  adjustPosition?: boolean
+  adjustPosition?: boolean;
   /**
    * @description 键盘收起时，是否自动失去焦点
    * */
-  autoBlur?: boolean
+  autoBlur?: boolean;
   /**
    * @description 定义需要用到的外部样式
    * */
-  customStyle?: CSSProperties
+  customStyle?: CSSProperties;
 }
 
 export interface ISearchEmits {
   /** disabled为true时，点击输入框，发出此事件，用于跳转搜索页 */
-  (e: 'click'): void
+  (e: "click"): void;
   /** 输入框内容发生变化时触发 */
-  (e: 'change', value: string): void
+  (e: "change", value: string): void;
   /** 左侧icon点击时候时触发 */
-  (e: 'clickIcon'): void
+  (e: "clickIcon", keyword: string): void;
   /** 用户确定搜索时触发，用户按回车键，或者手机键盘右下角的"搜索"键时触发 */
-  (e: 'search', value: string): void
+  (e: "search", event: InputOnConfirmEvent, value: string): void;
   /** 配置了clearabled后，清空内容时会发出此事件 */
-  (e: 'clear'): void
+  (e: "clear"): void;
   /** 用户点击右侧控件时触发 */
-  (e: 'confirm', value: string): void
+  (e: "confirm", value: string): void;
   /** 输入框获得焦点时触发 */
-  (e: 'focus', value: string): void
+  (e: "focus", e: InputOnFocusEvent, keyword: string): void;
   /** 输入框失去焦点时触发 */
-  (e: 'blur', value: string): void
+  (e: "blur", e: InputOnBlurEvent, keyword: string): void;
   /** 输入框内容发生变化时触发 */
-  (e: 'update:modelValue', value: string): void
+  (e: "update:modelValue", value: string): void;
 }