hy-app 0.2.13 → 0.2.15

package/components/hy-read-more/typing.d.ts

@@ -1,44 +1,51 @@
-import type { CSSProperties } from "vue";
+import type { CSSProperties } from 'vue'
 
 export default interface HyReadMoreProps {
   /**
    * @description 内容超出此高度才会显示展开全文按钮，单位px（默认 400 ）
    * */
-  showHeight?: number;
+  showHeight?: number
   /**
    * @description 展开后是否显示收起按钮（默认 false ）
    * */
-  toggle?: boolean;
+  toggle?: boolean
   /**
    * @description 关闭时的提示文字（默认 '展开阅读全文' ）
    * */
-  closeText?: string;
+  closeText?: string
   /**
    * @description 展开时的提示文字（默认 '收起' ）
    * */
-  openText?: string;
+  openText?: string
   /**
    * @description 提示文字的颜色（默认 '#2979ff' ）
    * */
-  color?: string;
+  color?: string
   /**
    * @description 提示文字的大小，单位px （默认 14 ）
    * */
-  fontSize?: number;
+  fontSize?: number
   /**
    * @description 段落首行缩进的字符个数 （默认 '2em' ）
    * */
-  textIndent?: string;
+  textIndent?: string
   /**
    * @description 用于在 open 和 close 事件中当作回调参数返回
    * */
-  name?: string;
+  name?: string
   /**
    * @description 显示阴影的样式
    * */
-  shadowStyle?: CSSProperties;
+  shadowStyle?: CSSProperties
   /**
    * @description 定义需要用到的外部样式
    * */
-  customStyle?: CSSProperties;
+  customStyle?: CSSProperties
+}
+
+export interface IReadMoreEmits {
+  /** 打开触发 */
+  (e: 'open', name: string): void
+  /** 关闭触发 */
+  (e: 'close', name: string): void
 }

package/components/hy-scroll-list/hy-scroll-list.vue

@@ -25,114 +25,125 @@
           class="hy-scroll-list__indicator__line__bar"
           :style="barStyle"
           ref="hy-scroll-list__indicator__line__bar"
-        >
-        </view>
+        ></view>
       </view>
     </view>
   </view>
 </template>
 
 <script lang="ts">
+/**
+ * 该组件一般用于同时展示多个商品、分类的场景，也可以完成左右滑动的列表。
+ * @displayName hy-scroll-list
+ */
+defineOptions({})
 export default {
   name: 'hy-scroll-list',
   options: {
     addGlobalClass: true,
     virtualHost: true,
-    styleIsolation: 'shared'
-  }
+    styleIsolation: 'shared',
+  },
 }
 </script>
 
 <script setup lang="ts">
-import {
-  computed,
-  type CSSProperties,
-  toRefs,
-  ref,
-  onMounted,
-  getCurrentInstance,
-} from "vue";
-import defaultProps from "./props";
-import type IProps from "./typing";
-import { addUnit, colorGradient, getRect, sleep } from "../../utils";
+import { computed, type CSSProperties, toRefs, ref, onMounted, getCurrentInstance } from 'vue'
+import type { IScrollListEmits } from './typing'
+import { addUnit, colorGradient, getRect, sleep } from '../../utils'
 
-const props = withDefaults(defineProps<IProps>(), defaultProps);
-const {
-  indicatorWidth,
-  indicatorColor,
-  indicatorBarWidth,
-  indicatorActiveColor,
-} = toRefs(props);
-const emit = defineEmits(["click", "left", "right"]);
+// const props = withDefaults(defineProps<IProps>(), defaultProps)
+const props = defineProps({
+  /** 指示器的整体宽度 */
+  indicatorWidth: {
+    type: Number,
+    default: 50,
+  },
+  /** 滑块的宽度 */
+  indicatorBarWidth: {
+    type: Number,
+    default: 20,
+  },
+  /** 是否显示面板指示器 */
+  indicator: {
+    type: Boolean,
+    default: true,
+  },
+  /** 指示器非激活颜色 */
+  indicatorColor: String,
+  /** 指示器的激活颜色 */
+  indicatorActiveColor: String,
+})
+const { indicatorWidth, indicatorColor, indicatorBarWidth, indicatorActiveColor } = toRefs(props)
+const emit = defineEmits<IScrollListEmits>()
 
-const instance = getCurrentInstance();
+const instance = getCurrentInstance()
 const scrollInfo = ref({
   scrollLeft: 0,
   scrollWidth: 0,
-});
-const scrollWidth = ref(0);
-const barLeft = ref(0);
+})
+const scrollWidth = ref(0)
+const barLeft = ref(0)
 
 /**
  * @description 线条样式
  * */
 const barStyle = computed<CSSProperties>(() => {
-  const style: CSSProperties = {};
-  style.transform = `translateX(${barLeft.value}px)`;
+  const style: CSSProperties = {}
+  style.transform = `translateX(${barLeft.value}px)`
   // 设置滑块的宽度和背景色，是每个平台都需要的
-  style.width = addUnit(indicatorBarWidth.value);
-  style.backgroundColor = indicatorActiveColor.value;
-  return style;
-});
+  style.width = addUnit(indicatorBarWidth.value)
+  style.backgroundColor = indicatorActiveColor.value
+  return style
+})
 /**
  * @description 轨道样式
  * */
 const lineStyle = computed<CSSProperties>(() => {
-  const style: CSSProperties = {};
+  const style: CSSProperties = {}
   // 指示器整体的样式，需要设置其宽度和背景色
-  style.width = addUnit(indicatorWidth.value);
+  style.width = addUnit(indicatorWidth.value)
   style.backgroundColor =
     indicatorColor.value ||
-    (indicatorActiveColor.value &&
-      colorGradient(indicatorActiveColor.value)[90]);
-  return style;
-});
+    (indicatorActiveColor.value && colorGradient(indicatorActiveColor.value)[90])
+  return style
+})
 
 onMounted(() => {
-  initWidth();
-});
+  initWidth()
+})
 
 /**
  * @description 初始化宽度
  * */
 const initWidth = async () => {
   // 延时一定时间，以获取dom尺寸
-  await sleep(30);
+  await sleep(30)
   // #ifndef APP-NVUE
-  getRect(".hy-scroll-list", false, instance).then((size) => {
-    scrollWidth.value = (size as UniApp.NodeInfo).width!;
-  });
+  getRect('.hy-scroll-list', false, instance).then((size) => {
+    scrollWidth.value = (size as UniApp.NodeInfo).width!
+  })
   // #endif
-};
+}
 
 const onScroll = (event: any) => {
-  const { scrollLeft, scrollWidth: totalWidth } = event.detail;
-  const targetWidth = totalWidth - scrollWidth.value;
-  const targetBarWidth = indicatorWidth.value - indicatorBarWidth.value;
-  barLeft.value = (scrollLeft / targetWidth) * targetBarWidth;
-};
+  const { scrollLeft, scrollWidth: totalWidth } = event.detail
+  const targetWidth = totalWidth - scrollWidth.value
+  const targetBarWidth = indicatorWidth.value - indicatorBarWidth.value
+  barLeft.value = (scrollLeft / targetWidth) * targetBarWidth
+}
 
 const onScrollToLower = () => {
-  barLeft.value = indicatorWidth.value - indicatorBarWidth.value;
-  emit("right");
-};
+  barLeft.value = indicatorWidth.value - indicatorBarWidth.value
+  emit('scrollRight')
+}
 
 const onScrollToUpper = () => {
-  barLeft.value = 0;
-  emit("left");
-};
+  barLeft.value = 0
+  emit('scrollLeft')
+}
 </script>
 
 <style lang="scss" scoped>
-@import "./index.scss";
+@import './index.scss';
 </style>

package/components/hy-scroll-list/typing.d.ts

@@ -1,28 +1,35 @@
-import type { CSSProperties } from "vue";
+import type { CSSProperties } from 'vue'
 
 export default interface HyScrollListProps {
   /**
    * @description 指示器的整体宽度 (默认 50 )
    * */
-  indicatorWidth?: number;
+  indicatorWidth?: number
   /**
    * @description 滑块的宽度 (默认 20 )
    * */
-  indicatorBarWidth?: number;
+  indicatorBarWidth?: number
   /**
    * @description 是否显示面板指示器 (默认 true )
    * */
-  indicator?: boolean;
+  indicator?: boolean
   /**
    * @description 指示器非激活颜色 (默认 '#f2f2f2' )
    * */
-  indicatorColor?: string;
+  indicatorColor?: string
   /**
    * @description 指示器的激活颜色 (默认 '#3c9cff' )
    * */
-  indicatorActiveColor?: string;
+  indicatorActiveColor?: string
   /**
    * @description 指示器样式，可通过bottom，left，right进行定位
    * */
-  indicatorStyle?: CSSProperties;
+  indicatorStyle?: CSSProperties
+}
+
+export interface IScrollListEmits {
+  /** 滑动到左边时触发 */
+  (e: 'scrollLeft'): void
+  /** 滑动到右边时触发 */
+  (e: 'scrollRight'): void
 }

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

@@ -1,6 +1,6 @@
 <template>
   <view
-    class="hy-search"
+    :class="['hy-search', customStyle]"
     @tap="clickHandler"
     :style="[
       {
@@ -87,146 +87,252 @@
       class="hy-search__action"
       :class="[(showActionBtn || show) && 'hy-search__action--active']"
       @tap.stop.prevent="confirm"
-      >{{ actionText }}</text
     >
+      {{ actionText }}
+    </text>
   </view>
 </template>
 
 <script lang="ts">
+/**
+ * 搜索组件，集成了常见搜索框所需功能，用户可以一键引入，开箱即用。
+ * @displayName hy-search
+ */
+defineOptions({})
 export default {
   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 defaultProps from "./props";
-import type IProps from "./typing";
-import { sleep, addUnit } from "../../utils";
-import { IconConfig } from "../../config";
-import HyIcon from "../hy-icon/hy-icon.vue";
+import { computed, nextTick, toRefs, ref, watch, PropType, type 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'
 
-const props = withDefaults(defineProps<IProps>(), defaultProps);
-const { focus, modelValue, showAction, animation, disabled } = toRefs(props);
-const emit = defineEmits([
-  "click",
-  "change",
-  "update:modelValue",
-  "clickIcon",
-  "search",
-  "clear",
-  "confirm",
-  "change",
-  "focus",
-  "blur",
-]);
+// const props = withDefaults(defineProps<IProps>(), defaultProps)
+const props = defineProps({
+  /** 输入框初始值 */
+  modelValue: String,
+  /**
+   * 搜索框形状
+   * @values circle,square
+   * */
+  shape: {
+    type: String,
+    default: 'circle',
+  },
+  /** 搜索框背景颜色 */
+  bgColor: String,
+  /** 占位文字内容 */
+  placeholder: {
+    type: String,
+    default: '请输入关键字',
+  },
+  /** 是否启用清除控件 */
+  clear: {
+    type: Boolean,
+    default: true,
+  },
+  /** 是否自动获得焦点 */
+  focus: {
+    type: Boolean,
+    default: false,
+  },
+  /** 是否显示右侧控件 */
+  showAction: {
+    type: Boolean,
+    default: true,
+  },
+  /** 右侧控件文字 */
+  actionText: {
+    type: String,
+    default: '搜索',
+  },
+  /** 右侧控件的样式，对象形式 */
+  actionStyle: {
+    type: Object as PropType<CSSProperties>,
+    default: {},
+  },
+  /** 输入框内容水平对齐方式 */
+  inputAlign: {
+    type: String,
+    default: 'left',
+  },
+  /** 自定义输入框样式，对象形式 */
+  inputStyle: {
+    type: Object as PropType<CSSProperties>,
+    default: {},
+  },
+  /** 是否启用输入框 */
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
+  /** 边框颜色，配置了颜色，才会有边框 */
+  borderColor: {
+    type: String,
+    default: 'transparent',
+  },
+  /** 输入框字体颜色 */
+  color: String,
+  /** placeholder的颜色 */
+  placeholderColor: {
+    type: String,
+    default: '#909399',
+  },
+  /** 输入框左边的图标属性集合，可以为图标名称或图片路径 */
+  searchIcon: Object as PropType<HyIconProps>,
+  /** 组件与其他上下左右之间的距离，带单位的字符串形式，如"30px" */
+  margin: {
+    type: [String, Number],
+    default: 0,
+  },
+  /** 是否开启动画，见上方说明 */
+  animation: {
+    type: Boolean,
+    default: false,
+  },
+  /** 输入框最大能输入的长度，-1为不限制长度 */
+  maxlength: {
+    type: Number,
+    default: -1,
+  },
+  /** 输入框高度，单位px */
+  height: {
+    type: Number,
+    default: 30,
+  },
+  /** 搜索框左边显示内容 */
+  label: String,
+  /** 键盘弹起时，是否自动上推页面 */
+  adjustPosition: {
+    type: Boolean,
+    default: true,
+  },
+  /** 键盘收起时，是否自动失去焦点 */
+  autoBlur: {
+    type: Boolean,
+    default: true,
+  },
+  /** 定义需要用到的外部样式 */
+  customStyle: {
+    type: Object as PropType<CSSProperties>,
+  },
+  /** 自定义外部类名 */
+  customClass: String,
+})
+const { focus, modelValue, showAction, animation, disabled } = toRefs(props)
+const emit = defineEmits<ISearchEmits>()
 
-const keyword = ref<string>("");
+const keyword = ref<string>('')
 // 是否显示右边的清除图标
-const showClear = ref<boolean>(false);
-const show = ref<boolean>(false);
+const showClear = ref<boolean>(false)
+const show = ref<boolean>(false)
 // 标记input当前状态是否处于聚焦中，如果是，才会显示右侧的清除控件
-const focused = ref(focus.value);
+const focused = ref(focus.value)
 
 watch(
   () => keyword.value,
   (newValue: string) => {
-    emit("update:modelValue", newValue);
-    emit("change", newValue);
+    emit('update:modelValue', newValue)
+    emit('change', newValue)
   },
-);
+)
 
 watch(
   () => modelValue.value,
   (newValue: string) => {
-    keyword.value = newValue;
+    keyword.value = newValue
   },
   { immediate: true },
-);
+)
 
 const showActionBtn = computed<boolean>(() => {
-  return !animation.value && showAction.value;
-});
+  return !animation.value && showAction.value
+})
 
 /**
  * @description
  * */
 const inputChange = (e: Event) => {
-  keyword.value = e.detail.value;
-};
+  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);
+  emit('search', 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;
+  focused.value = true
   // 开启右侧搜索按钮展开的动画效果
-  if (animation.value && showAction.value) show.value = true;
-  emit("focus", keyword.value);
-};
+  if (animation.value && showAction.value) show.value = true
+  emit('focus', keyword.value)
+}
 /**
  * @description 失去焦点
  */
 const blur = async () => {
   // 最开始使用的是监听图标@touchstart事件，自从hx2.8.4后，此方法在微信小程序出错
   // 这里改为监听点击事件，手点击清除图标时，同时也发生了@blur事件，导致图标消失而无法点击，这里做一个延时
-  show.value = false;
-  emit("blur", keyword.value);
-  await sleep(100);
-  focused.value = false;
-};
+  show.value = false
+  emit('blur', keyword.value)
+  await sleep(100)
+  focused.value = false
+}
 /**
  * @description 点击搜索框，只有disabled=true时才发出事件，因为禁止了输入，意味着是想跳转真正的搜索页
  * */
 const clickHandler = () => {
-  if (disabled.value) emit("click");
-};
+  if (disabled.value) 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>