hy-app 0.1.1

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

@@ -0,0 +1,146 @@
+<template>
+  <view class="u-scroll-list" ref="u-scroll-list">
+    <!-- #ifdef MP-WEIXIN || APP-VUE || H5 || MP-QQ -->
+    <!-- 以上平台，支持wxs -->
+    <scroll-view
+      class="u-scroll-list__scroll-view scroll-view-native"
+      scroll-x
+      enable-flex
+      @scroll="onScroll"
+      @scrolltoupper="onScrollToUpper"
+      @scrolltolower="onScrollToLower"
+      :data-scrollWidth="scrollWidth"
+      :data-barWidth="indicatorBarWidth"
+      :data-indicatorWidth="indicatorWidth"
+      :show-scrollbar="false"
+      :upper-threshold="0"
+      :lower-threshold="0"
+    >
+      <slot></slot>
+    </scroll-view>
+    <!--	#endif		-->
+    <view
+      class="u-scroll-list__indicator"
+      v-if="indicator"
+      :style="indicatorStyle"
+    >
+      <view class="u-scroll-list__indicator__line" :style="lineStyle">
+        <view
+          class="u-scroll-list__indicator__line__bar"
+          :style="barStyle"
+          ref="u-scroll-list__indicator__line__bar"
+        >
+        </view>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script setup lang="ts">
+import { computed, CSSProperties, reactive, toRefs, ref, onMounted } from "vue";
+import defaultProps from "./props";
+import IProps from "./typing";
+import { addUnit, getRect, sleep } from "../../utils";
+
+const props = withDefaults(defineProps<IProps>(), defaultProps);
+const {
+  indicatorWidth,
+  indicatorColor,
+  indicatorBarWidth,
+  indicatorActiveColor
+} = toRefs(props);
+const emit = defineEmits(["click", "left", "right"]);
+
+const scrollInfo = ref({
+  scrollLeft: 0,
+  scrollWidth: 0
+});
+const scrollWidth = ref(0);
+const barLeft = ref(0);
+
+const barStyle = computed<CSSProperties>(() => {
+  const style: CSSProperties = {};
+  style.transform = `translateX(${barLeft.value}px)`;
+  // 设置滑块的宽度和背景色，是每个平台都需要的
+  style.width = addUnit(indicatorBarWidth.value);
+  style.backgroundColor = indicatorActiveColor.value;
+  return style;
+});
+
+const lineStyle = computed<CSSProperties>(() => {
+  const style: CSSProperties = {};
+  // 指示器整体的样式，需要设置其宽度和背景色
+  style.width = addUnit(indicatorWidth.value);
+  style.backgroundColor = indicatorColor.value;
+  return style;
+});
+
+onMounted(() => {
+  initWidth();
+});
+
+/**
+ * @description 初始化宽度
+ * */
+const initWidth = async () => {
+  // 延时一定时间，以获取dom尺寸
+  await sleep(30);
+  // #ifndef APP-NVUE
+  getRect(".u-scroll-list").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 onScrollToLower = () => {
+  barLeft.value = indicatorWidth.value - indicatorBarWidth.value;
+  emit("right");
+};
+
+const onScrollToUpper = () => {
+  barLeft.value = 0;
+  emit("left");
+};
+</script>
+
+<style lang="scss" scoped>
+@import "../../libs/css/mixin.scss";
+.u-scroll-list {
+  padding-bottom: 10px;
+
+  &__scroll-view {
+    @include flex;
+    // 缺少会在enable-flex模式下高度异常
+    align-items: flex-start;
+    :deep(.uni-scroll-view-content) {
+      @include flex;
+    }
+  }
+
+  &__indicator {
+    @include flex;
+    justify-content: center;
+    margin-top: 15px;
+
+    &__line {
+      width: 60px;
+      height: 4px;
+      border-radius: 100px;
+      overflow: hidden;
+
+      &__bar {
+        width: 20px;
+        height: 4px;
+        border-radius: 100px;
+      }
+    }
+  }
+}
+</style>

package/components/hy-scroll-list/props.ts

@@ -0,0 +1,12 @@
+import IProps from "./typing";
+import { ColorConfig } from "../../config";
+
+const defaultProps: IProps = {
+  indicatorWidth: 50,
+  indicatorBarWidth: 20,
+  indicator: true,
+  indicatorColor: "#f2f2f2",
+  indicatorActiveColor: ColorConfig.primary
+};
+
+export default defaultProps;

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

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

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

@@ -0,0 +1,294 @@
+<template>
+  <view
+    class="hy-search"
+    @tap="clickHandler"
+    :style="[
+      {
+        margin: margin
+      },
+      customStyle
+    ]"
+  >
+    <view
+      class="hy-search__content"
+      :style="{
+        backgroundColor: bgColor,
+        borderRadius: shape == 'circle' ? '100px' : '4px',
+        borderColor: borderColor
+      }"
+    >
+      <template v-if="$slots.label || label !== null">
+        <slot name="label">
+          <text class="hy-search__content__label">{{ label }}</text>
+        </slot>
+      </template>
+      <view class="hy-search__content__icon">
+        <HyIcon
+          @tap="clickIcon"
+          :size="searchIconSize"
+          :name="IconConfig.SEARCH"
+          :color="searchIconColor ? searchIconColor : color"
+        ></HyIcon>
+      </view>
+      <input
+        confirm-type="search"
+        @blur="blur"
+        :value="keyword"
+        @confirm="search"
+        @input="inputChange"
+        :disabled="disabled"
+        @focus="getFocus"
+        :focus="focus"
+        :maxlength="maxlength"
+        :adjust-position="adjustPosition"
+        :auto-blur="autoBlur"
+        placeholder-class="hy-search__content__input--placeholder"
+        :placeholder="placeholder"
+        :placeholder-style="`color: ${placeholderColor}`"
+        class="hy-search__content__input"
+        type="text"
+        :style="[
+          {
+            pointerEvents: disabled ? 'none' : 'auto',
+            textAlign: inputAlign,
+            color: color,
+            backgroundColor: bgColor,
+            height: addUnit(height)
+          },
+          inputStyle
+        ]"
+      />
+      <view
+        class="hy-search__content__icon hy-search__content__close"
+        v-if="keyword && clear && focused"
+        @click="clear"
+      >
+        <HyIcon
+          :name="IconConfig.CLOSE"
+          size="11"
+          color="#ffffff"
+          :customStyle="{
+            lineHeight: '12px'
+          }"
+        ></HyIcon>
+      </view>
+    </view>
+    <text
+      :style="[actionStyle]"
+      class="hy-search__action"
+      :class="[(showActionBtn || show) && 'hy-search__action--active']"
+      @tap.stop.prevent="confirm"
+      >{{ actionText }}</text
+    >
+  </view>
+</template>
+
+<script setup lang="ts">
+import { computed, nextTick, toRefs, ref, watch } from "vue";
+import defaultProps from "./props";
+import IProps from "./typing";
+import { addUnit, sleep } from "../../utils";
+import { IconConfig } from "../../config";
+import HyIcon from "../hy-icon/hy-icon.vue";
+
+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 keyword = ref<string>("");
+// 是否显示右边的清除图标
+const showClear = ref<boolean>(false);
+const show = ref<boolean>(false);
+// 标记input当前状态是否处于聚焦中，如果是，才会显示右侧的清除控件
+const focused = ref(focus.value);
+
+watch(
+  () => keyword.value,
+  (newValue: string) => {
+    emit("update:modelValue", newValue);
+    emit("change", newValue);
+  }
+);
+
+watch(
+  () => modelValue.value,
+  (newValue: string) => {
+    keyword.value = newValue;
+  },
+  { immediate: true }
+);
+
+const showActionBtn = computed<boolean>(() => {
+  return !animation.value && showAction.value;
+});
+
+/**
+ * @description
+ * */
+const inputChange = (e: Event) => {
+  keyword.value = e.detail.value;
+};
+/**
+ * @description 清空输入
+ * */
+const clear = () => {
+  keyword.value = "";
+  // 延后发出事件，避免在父组件监听clear事件时，value为更新前的值(不为空)
+  nextTick(() => {
+    emit("clear");
+  });
+};
+/**
+ * @description 确定搜索
+ * */
+const search = (e: InputEvent) => {
+  emit("search", e.detail.value);
+  try {
+    // 收起键盘
+    uni.hideKeyboard();
+  } catch (e) {}
+};
+/**
+ * @description 点击右边自定义按钮的事件
+ */
+const confirm = () => {
+  emit("confirm", keyword.value);
+  try {
+    // 收起键盘
+    uni.hideKeyboard();
+  } catch (e) {}
+};
+/**
+ * @description 获取焦点
+ * */
+const getFocus = () => {
+  focused.value = true;
+  // 开启右侧搜索按钮展开的动画效果
+  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;
+};
+/**
+ * @description 点击搜索框，只有disabled=true时才发出事件，因为禁止了输入，意味着是想跳转真正的搜索页
+ * */
+const clickHandler = () => {
+  if (disabled.value) emit("click");
+};
+/**
+ * @description 点击左边图标
+ * */
+const clickIcon = () => {
+  emit("clickIcon", keyword.value);
+  try {
+    // 收起键盘
+    uni.hideKeyboard();
+  } catch (e) {}
+};
+</script>
+
+<style lang="scss" scoped>
+@import "../../libs/css/mixin.scss";
+@import "../../theme.scss";
+
+$u-search-close-size: 20px !default;
+
+/* #ifdef H5 */
+// iOS15在H5下，hx的某些版本，input type=search时，会多了一个搜索图标，进行移除
+[type="search"]::-webkit-search-decoration {
+  display: none;
+}
+/* #endif */
+
+.hy-search {
+  @include flex(row);
+  align-items: center;
+  flex: 1;
+
+  &__content {
+    @include flex;
+    align-items: center;
+    padding: 0 $hy-border-margin-padding-lg;
+    flex: 1;
+    justify-content: space-between;
+    border-width: 1px;
+    border-color: transparent;
+    border-style: solid;
+    overflow: hidden;
+
+    &__icon {
+      @include flex;
+      align-items: center;
+    }
+
+    &__label {
+      color: $hy-text-color;
+      font-size: $hy-font-size-base;
+      margin: 0 4px;
+    }
+
+    /*清除icon样式*/
+    &__close {
+      width: $u-search-close-size;
+      height: $u-search-close-size;
+      border-radius: 50%;
+      background-color: #c6c7cb;
+      @include flex(row);
+      align-items: center;
+      justify-content: center;
+      transform: scale(0.82);
+    }
+
+    /*输入框样式*/
+    &__input {
+      flex: 1;
+      font-size: $hy-font-size-base;
+      line-height: 1;
+      margin: 0 $hy-border-margin-padding-sm;
+      color: $hy-text-color;
+
+      &--placeholder {
+        color: $hy-text-color-grey;
+      }
+    }
+  }
+
+  &__action {
+    font-size: $hy-font-size-base;
+    color: $hy-text-color;
+    width: 0;
+    overflow: hidden;
+    transition-property: width;
+    transition-duration: 0.3s;
+    /* #ifndef APP-NVUE */
+    white-space: nowrap;
+    /* #endif */
+    text-align: center;
+
+    &--active {
+      width: 40px;
+      margin-left: $hy-border-margin-padding-sm;
+    }
+  }
+}
+</style>

package/components/hy-search/props.ts

@@ -0,0 +1,29 @@
+import IProps from "./typing";
+
+const defaultProps: IProps = {
+  modelValue: "",
+  shape: "circle",
+  bgColor: "#f2f2f2",
+  placeholder: "请输入关键字",
+  clear: true,
+  focus: false,
+  showAction: true,
+  actionText: "搜索",
+  inputAlign: "left",
+  disabled: false,
+  borderColor: "transparent",
+  searchIconColor: "#909399",
+  searchIconSize: 18,
+  color: "#606266",
+  placeholderColor: "#909399",
+  searchIcon: "search",
+  margin: "0",
+  animation: false,
+  maxlength: "-1",
+  height: 32,
+  label: null,
+  adjustPosition: true,
+  autoBlur: true
+};
+
+export default defaultProps;

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

@@ -0,0 +1,109 @@
+import { CSSProperties } from "vue";
+import { b } from "vite/dist/node/types.d-aGj9QkWt";
+
+export default interface IProps {
+  /**
+   * @description 输入框初始值
+   * */
+  modelValue: string;
+  /**
+   * @description 搜索框形状，circle-圆形，square-方形（默认 'circle' ）
+   * */
+  shape?: HyApp.ShapeType;
+  /**
+   * @description 搜索框背景颜色（默认 '#f2f2f2' ）
+   * */
+  bgColor?: string;
+  /**
+   * @description 占位文字内容（默认 '请输入关键字' ）
+   * */
+  placeholder?: string;
+  /**
+   * @description 是否启用清除控件（默认 true ）
+   * */
+  clear?: boolean;
+  /**
+   * @description 是否自动获得焦点（默认 false ）
+   * */
+  focus?: boolean;
+  /**
+   * @description 是否显示右侧控件（默认 true ）
+   * */
+  showAction?: boolean;
+  /**
+   * @description 右侧控件的样式，对象形式
+   * */
+  actionStyle?: CSSProperties;
+  /**
+   * @description 右侧控件文字（默认 '搜索' ）
+   * */
+  actionText?: string;
+  /**
+   * @description 输入框内容水平对齐方式 （默认 'left' ）
+   * */
+  inputAlign?: "center" | HyApp.LeftRightType;
+  /**
+   * @description 自定义输入框样式，对象形式
+   * */
+  inputStyle?: Record<string, any>;
+  /**
+   * @description 是否启用输入框（默认 false ）
+   * */
+  disabled?: boolean;
+  /**
+   * @description 边框颜色，配置了颜色，才会有边框 (默认 'transparent' )
+   * */
+  borderColor?: string;
+  /**
+   * @description 搜索图标的颜色，默认同输入框字体颜色 (默认 '#909399' )
+   * */
+  searchIconColor?: string;
+  /**
+   * @description 搜索图标的字体，默认18
+   * */
+  searchIconSize?: number;
+  /**
+   * @description 输入框字体颜色（默认 '#606266' ）
+   * */
+  color?: string;
+  /**
+   * @description placeholder的颜色（默认 '#909399' ）
+   * */
+  placeholderColor?: string;
+  /**
+   * @description 输入框左边的图标，可以为图标名称或图片路径  (默认 'search' )
+   * */
+  searchIcon?: string;
+  /**
+   * @description 组件与其他上下左右之间的距离，带单位的字符串形式，如"30px"   (默认 '0' )
+   * */
+  margin?: string;
+  /**
+   * @description 是否开启动画，见上方说明（默认 false ）
+   * */
+  animation?: boolean;
+  /**
+   * @description 输入框最大能输入的长度，-1为不限制长度  (默认 '-1' )
+   * */
+  maxlength?: string | number;
+  /**
+   * @description 输入框高度，单位px（默认 64 ）
+   * */
+  height?: number;
+  /**
+   * @description 搜索框左边显示内容
+   * */
+  label?: string | null;
+  /**
+   * @description 键盘弹起时，是否自动上推页面
+   * */
+  adjustPosition?: boolean;
+  /**
+   * @description 键盘收起时，是否自动失去焦点
+   * */
+  autoBlur?: boolean;
+  /**
+   * @description 定义需要用到的外部样式
+   * */
+  customStyle?: CSSProperties;
+}