hy-app 0.1.1

package/components/hy-input/props.ts

@@ -0,0 +1,41 @@
+import IProps from "./typing";
+
+const defaultProps: IProps = {
+  modelValue: "",
+  type: "text",
+  fixed: false,
+  disabled: false,
+  disabledColor: "#F5F5F5",
+  clearable: false,
+  password: false,
+  maxlength: 140,
+  placeholder: null,
+  placeholderClass: "input-placeholder",
+  placeholderStyle: {},
+  showWordLimit: false,
+  confirmType: "done",
+  confirmHold: false,
+  holdKeyboard: false,
+  focus: false,
+  autoBlur: false,
+  disableDefaultPadding: false,
+  cursor: -1,
+  cursorSpacing: 30,
+  selectionStart: -1,
+  selectionEnd: -1,
+  adjustPosition: true,
+  inputAlign: "left",
+  fontSize: "15px",
+  color: "#303133",
+  prefixIcon: "",
+  prefixIconStyle: {},
+  suffixIcon: "",
+  suffixIconStyle: {},
+  border: "surround",
+  readonly: false,
+  shape: "square",
+  formatter: null,
+  customStyle: {}
+};
+
+export default defaultProps;

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

@@ -0,0 +1,148 @@
+import { CSSProperties } from "vue";
+
+export default interface IProps {
+  /**
+   * @description 输入的值
+   * */
+  modelValue: string | number;
+  /**
+   * @description 输入框类型，见上方说明 （ 默认 'text' ）
+   * */
+  type?: "text" | "idcard" | "number" | "digit" | "password";
+  /**
+   * @description 如果 textarea 是在一个 position:fixed 的区域，需要显示指定属性 fixed 为 true，兼容性：微信小程序、百度小程序、字节跳动小程序、QQ小程序 （ 默认 false ）
+   * */
+  fixed?: boolean;
+  /**
+   * @description 是否禁用输入框 （ 默认 false ）
+   * */
+  disabled?: boolean;
+  /**
+   * @description 禁用状态时的背景色（ 默认 '#f5f7fa' ）
+   * */
+  disabledColor?: string;
+  /**
+   * @description 是否显示清除控件 （ 默认 false ）
+   * */
+  clearable?: boolean;
+  /**
+   * @description 是否密码类型 （ 默认 false ）
+   * */
+  password?: boolean;
+  /**
+   * @description 最大输入长度，设置为 -1 的时候不限制最大长度 （ 默认 -1 ）
+   * */
+  maxlength?: number;
+  /**
+   * @description 输入框为空时的占位符
+   * */
+  placeholder?: string | null;
+  /**
+   * @description 指定placeholder的样式类，注意页面或组件的style中写了scoped时，需要在类名前写/deep/ （ 默认 'input-placeholder' ）
+   * */
+  placeholderClass?: string;
+  /**
+   * @description 指定placeholder的样式，字符串/对象形式，如"color: red;"
+   * */
+  placeholderStyle?: CSSProperties;
+  /**
+   * @description 是否显示输入字数统计，只在 type ="text"或type ="textarea"时有效 （ 默认 false ）
+   * */
+  showWordLimit?: boolean;
+  /**
+   * @description 设置右下角按钮的文字，兼容性详见uni-app文档 （ 默认 'done' ）
+   * */
+  confirmType?: string;
+  /**
+   * @description 点击键盘右下角按钮时是否保持键盘不收起，H5无效 （ 默认 false ）
+   * */
+  confirmHold?: boolean;
+  /**
+   * @description focus时，点击页面的时候不收起键盘，微信小程序有效 （ 默认 false ）
+   * */
+  holdKeyboard?: boolean;
+  /**
+   * @description 自动获取焦点，在 H5 平台能否聚焦以及软键盘是否跟随弹出，取决于当前浏览器本身的实现。nvue 页面不支持，需使用组件的 focus()、blur() 方法控制焦点 （ 默认 false ）
+   * */
+  focus?: boolean;
+  /**
+   * @description 键盘收起时，是否自动失去焦点，目前仅App3.0.0+有效 （ 默认 false ）
+   * */
+  autoBlur?: boolean;
+  /**
+   * @description 是否去掉 iOS 下的默认内边距，仅微信小程序，且type=textarea时有效 （ 默认 false ）
+   * */
+  disableDefaultPadding?: boolean;
+  /**
+   * @description 指定focus时光标的位置（ 默认 140 ）
+   * */
+  cursor?: number;
+  /**
+   * @description 输入框聚焦时底部与键盘的距离 （ 默认 30 ）
+   * */
+  cursorSpacing?: number;
+  /**
+   * @description 光标起始位置，自动聚集时有效，需与selection-end搭配使用 （ 默认 -1 ）
+   * */
+  selectionStart?: number;
+  /**
+   * @description 光标结束位置，自动聚集时有效，需与selection-start搭配使用 （ 默认 -1 ）
+   * */
+  selectionEnd?: number;
+  /**
+   * @description 键盘弹起时，是否自动上推页面 （ 默认 true ）
+   * */
+  adjustPosition?: boolean;
+  /**
+   * @description 输入框内容对齐方式（ 默认 'left' ）
+   * */
+  inputAlign?: "center" | HyApp.LeftRightType;
+  /**
+   * @description 输入框字体的大小 （ 默认 '15px' ）
+   * */
+  fontSize?: string | number;
+  /**
+   * @description 输入框字体颜色	（ 默认 '#303133' ）
+   * */
+  color?: string;
+  /**
+   * @description 输入框前置图标
+   * */
+  prefixIcon?: string;
+  /**
+   * @description 前置图标样式，对象或字符串
+   * */
+  prefixIconStyle?: CSSProperties;
+  /**
+   * @description 输入框后置图标
+   * */
+  suffixIcon?: string;
+  /**
+   * @description 后置图标样式，对象或字符串
+   * */
+  suffixIconStyle?: CSSProperties;
+  /**
+   * @description 边框类型，surround-四周边框，bottom-底部边框，none-无边框 （ 默认 'surround' ）
+   * */
+  border?: HyApp.BorderType;
+  /**
+   * @description 是否只读，与disabled不同之处在于disabled会置灰组件，而readonly则不会 （ 默认 false ）
+   * */
+  readonly?: boolean;
+  /**
+   * @description 输入框形状，circle-圆形，square-方形 （ 默认 'square' ）
+   * */
+  shape?: HyApp.ShapeType;
+  /**
+   * @description 内容式化函数
+   * */
+  formatter?: Function | null;
+  /**
+   * @description 定义需要用到的外部样式
+   * */
+  customStyle?: CSSProperties;
+  /**
+   * @description 是否忽略组件内对文本合成系统事件的处理。
+   * */
+  ignoreCompositionEvent?: boolean;
+}

package/components/hy-line/hy-line.vue

@@ -0,0 +1,44 @@
+<template>
+  <view class="hy-line" :style="lineStyle"> </view>
+</template>
+
+<script setup lang="ts">
+import { computed, CSSProperties, toRefs } from "vue";
+import defaultProps from "./props";
+import IProps from "./typing";
+import { addUnit } from "../../utils";
+
+const props = withDefaults(defineProps<IProps>(), defaultProps);
+const { margin, length, dashed, direction, hairline, color, customStyle } =
+  toRefs(props);
+
+const lineStyle = computed<CSSProperties>(() => {
+  const style: CSSProperties = {};
+  style.margin = margin.value;
+  // 如果是水平线条，边框高度为1px，再通过transform缩小一半，就是0.5px了
+  if (direction.value === "row") {
+    // 此处采用兼容分开写，兼容nvue的写法
+    style.borderBottomWidth = "1px";
+    style.borderBottomStyle = dashed.value ? "dashed" : "solid";
+    style.width = addUnit(length.value);
+    if (hairline.value) style.transform = "scaleY(0.5)";
+  } else {
+    // 如果是竖向线条，边框宽度为1px，再通过transform缩小一半，就是0.5px了
+    style.borderLeftWidth = "1px";
+    style.borderLeftStyle = dashed.value ? "dashed" : "solid";
+    style.height = addUnit(length.value);
+    if (hairline.value) style.transform = "scaleX(0.5)";
+  }
+
+  style.borderColor = color.value;
+  return Object.assign(style, customStyle.value);
+});
+</script>
+
+<style lang="scss" scoped>
+.hy-line {
+  /* #ifndef APP-NVUE */
+  vertical-align: middle;
+  /* #endif */
+}
+</style>

package/components/hy-line/props.ts

@@ -0,0 +1,12 @@
+import IProps from "./typing";
+
+const defaultProps: IProps = {
+  color: "#d6d7d9",
+  length: "100%",
+  direction: "row",
+  hairline: true,
+  margin: "0",
+  dashed: false
+};
+
+export default defaultProps;

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

@@ -0,0 +1,32 @@
+import { CSSProperties } from "vue";
+
+export default interface IProps {
+  /**
+   * @description 线条的颜色 ( 默认 '#d6d7d9' )
+   * */
+  color?: string;
+  /**
+   * @description 长度，竖向时表现为高度，横向时表现为长度，可以为百分比，带px单位的值等 ( 默认 '100%' )
+   * */
+  length?: string | number;
+  /**
+   * @description 线条的方向，row-横向，column-竖向 (默认 'row' )
+   * */
+  direction?: HyApp.PermutationType;
+  /**
+   * @description 是否显示细线条 (默认 true )
+   * */
+  hairline?: boolean;
+  /**
+   * @description 线条与上下左右 元素的间距，字符串形式，如"30px"  (默认 0 )
+   * */
+  margin?: string;
+  /**
+   * @description 是否虚线，true-虚线，false-实线 (默认 false )
+   * */
+  dashed?: boolean;
+  /**
+   * @description 定义需要用到的外部样式
+   * */
+  customStyle?: CSSProperties;
+}

package/components/hy-line-progress/hy-line-progress.vue

@@ -0,0 +1,118 @@
+<template>
+  <view class="hy-line-progress" :style="customStyle">
+    <view
+      class="hy-line-progress__background"
+      ref="hy-line-progress__background"
+      :style="{
+        backgroundColor: inactiveColor,
+        height: addUnit(height)
+      }"
+    >
+    </view>
+    <view class="hy-line-progress__line" :style="[progressStyle]">
+      <slot>
+        <text
+          v-if="showText && percentage >= 10"
+          class="hy-line-progress__text"
+          >{{ innserPercentage + "%" }}</text
+        >
+      </slot>
+    </view>
+  </view>
+</template>
+
+<script setup lang="ts">
+import { computed, CSSProperties, onMounted, ref, toRefs, watch } from "vue";
+import defaultProps from "./props";
+import IProps from "./typing";
+import { addUnit, getRect, range, sleep } from "../../utils";
+
+const props = withDefaults(defineProps<IProps>(), defaultProps);
+const { percentage, activeColor, height } = toRefs(props);
+
+const lineWidth = ref<string | number>(0);
+
+watch(
+  () => percentage.value,
+  () => resizeProgressWidth()
+);
+
+const progressStyle = computed<CSSProperties>(() => {
+  const style: CSSProperties = {};
+  style.width = lineWidth.value;
+  style.backgroundColor = activeColor.value;
+  style.height = addUnit(height.value);
+  return style;
+});
+
+const innserPercentage = computed(() => {
+  // 控制范围在0-100之间
+  return range(0, 100, percentage.value);
+});
+
+onMounted(() => {
+  init();
+});
+
+const init = async () => {
+  await sleep(20);
+  resizeProgressWidth();
+};
+const getProgressWidth = () => {
+  return new Promise((resolve) => {
+    // #ifndef APP-NVUE
+    resolve(getRect(".u-line-progress__background"));
+    // #endif
+  });
+};
+
+/**
+ * @description 计算轨道长度
+ * */
+const resizeProgressWidth = async () => {
+  const { width } = await getProgressWidth();
+  // 通过设置的percentage值，计算其所占总长度的百分比
+  lineWidth.value = (width * innserPercentage.value) / 100 + "px";
+};
+</script>
+
+<style lang="scss" scoped>
+@import "../../libs/css/mixin.scss";
+
+.hy-line-progress {
+  align-items: stretch;
+  position: relative;
+  @include flex(row);
+  flex: 1;
+  overflow: hidden;
+  border-radius: 100px;
+
+  &__background {
+    background-color: #ececec;
+    border-radius: 100px;
+    flex: 1;
+  }
+
+  &__line {
+    position: absolute;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    align-items: center;
+    @include flex(row);
+    color: #ffffff;
+    border-radius: 100px;
+    transition: width 0.5s ease;
+    justify-content: flex-end;
+  }
+
+  &__text {
+    font-size: 10px;
+    align-items: center;
+    text-align: right;
+    color: #ffffff;
+    margin-right: 5px;
+    transform: scale(0.9);
+  }
+}
+</style>

package/components/hy-line-progress/props.ts

@@ -0,0 +1,12 @@
+import IProps from "./typing";
+import { ColorConfig } from "../../config";
+
+const defaultProps: IProps = {
+  activeColor: ColorConfig.primary,
+  inactiveColor: "#ececec",
+  percentage: 0,
+  showText: true,
+  height: 12
+};
+
+export default defaultProps;

package/components/hy-line-progress/typing.d.ts

@@ -0,0 +1,28 @@
+import { CSSProperties } from "vue";
+
+export default interface IProps {
+  /**
+   * @description 激活部分的颜色 ( 默认 '#19be6b' )
+   * */
+  activeColor?: string;
+  /**
+   * @description 背景色 ( 默认 '#ececec' )
+   * */
+  inactiveColor?: string;
+  /**
+   * @description 进度百分比，数值 ( 默认 0 )
+   * */
+  percentage: number;
+  /**
+   * @description 是否在进度条内部显示百分比的值 ( 默认 true )
+   * */
+  showText?: boolean;
+  /**
+   * @description 进度条的高度，单位px ( 默认 12 )
+   * */
+  height?: string | number;
+  /**
+   * @description 自定义样式
+   * */
+  customStyle?: CSSProperties;
+}

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

@@ -0,0 +1,250 @@
+<template>
+  <scroll-view
+    ref="hyVirtualContainer"
+    @scroll="onScroll"
+    @scrolltolower="scrollToLower"
+    :lower-threshold="showDivider ? 40 : 10"
+    :scroll-y="true"
+    scroll-with-animation
+    class="hy-virtual-container"
+  >
+    <view class="hy-virtual-container__list">
+      <slot
+        v-if="slotDefault"
+        :record="line === 1 ? virtualData : waterfall"
+      ></slot>
+      <template v-else>
+        <view
+          v-if="line === 1"
+          class="hy-virtual-container__list--item"
+          v-for="(item, i) in virtualData"
+          :key="typeof item === 'string' ? i : item[keyField]"
+          :style="itemStyle"
+          @click="handleClick(item)"
+        >
+          <slot style="height: 100%" name="content" :record="item"></slot>
+        </view>
+
+        <view
+          v-if="line === 2"
+          class="hy-virtual-container__list--left hy-virtual-container__list--box"
+        >
+          <view
+            v-if="slots.left"
+            class="hy-virtual-container__list--box-item"
+            v-for="item in waterfall.left"
+            :key="item[keyField]"
+            :style="itemStyle"
+            @click="handleClick(item)"
+          >
+            <slot name="left" :record="item"></slot>
+          </view>
+          <slot v-else name="left-list" :record="waterfall.left"> </slot>
+        </view>
+        <view
+          v-if="line === 2"
+          class="hy-virtual-container__list--right hy-virtual-container__list--box"
+        >
+          <view
+            v-if="slots.right"
+            class="hy-virtual-container__list--box-item"
+            v-for="item in waterfall.right"
+            :key="item[keyField]"
+            :style="itemStyle"
+            @click="handleClick(item)"
+          >
+            <slot name="right" :record="item"></slot>
+          </view>
+          <slot v-else name="right-list" :record="waterfall.right"> </slot>
+        </view>
+      </template>
+      <!--加载更多样式-->
+    </view>
+    <!--    <HyDivider :text="load" v-if="showDivider"></HyDivider>-->
+  </scroll-view>
+</template>
+
+<script lang="ts">
+export default {
+  options: {
+    virtualHost: true
+  }
+};
+</script>
+
+<script lang="ts" setup>
+import {
+  computed,
+  CSSProperties,
+  nextTick,
+  onMounted,
+  reactive,
+  ref,
+  toRefs,
+  useSlots,
+  watch
+} from "vue";
+import { addUnit, debounce, getPx, getRect } from "../../utils";
+import HyDivider from "../hy-divider/hy-divider.vue";
+import IProps from "./typing";
+import defaultProps from "./props";
+
+const props = withDefaults(defineProps<IProps>(), defaultProps);
+const {
+  list,
+  line,
+  keyField,
+  itemHeight,
+  containerHeight,
+  marginBottom,
+  padding,
+  borderRadius,
+  background,
+  border
+} = toRefs(props);
+const emit = defineEmits(["scrollButton", "click"]);
+
+const slots = useSlots();
+// 滚动条距离顶部距离
+const scrollTop = ref(0);
+// 可视区域的高度
+const viewHeight = ref(0);
+const waterfall: { left: AnyObject[]; right: AnyObject[] } = reactive({
+  left: [],
+  right: []
+});
+// 排列方式
+const arrange = computed(() => (line.value === 1 ? "column" : "row"));
+const boxHeight = getPx(itemHeight.value) + getPx(marginBottom.value);
+const listHeight = addUnit(containerHeight.value);
+
+onMounted(() => {
+  nextTick(async () => {
+    const res = await getRect(".hy-virtual-container");
+    viewHeight.value = (res as UniApp.NodeInfo).height ?? 0;
+  });
+});
+
+const itemStyle = computed((): CSSProperties => {
+  return {
+    height: addUnit(itemHeight.value),
+    padding: addUnit(padding.value),
+    marginBottom: addUnit(marginBottom.value),
+    borderRadius: addUnit(borderRadius.value),
+    background: background.value,
+    border: border.value ? "1px solid #dadbde" : ""
+  };
+});
+
+/**
+ * @description 虚拟列表真实展示数据：起始下标
+ */
+const start = computed(() => {
+  const s = Math.floor(scrollTop.value / boxHeight);
+  return Math.max(0, s * line.value);
+});
+
+/**
+ * @description 虚拟列表真实展示数据：结束下标
+ */
+const over = computed(() => {
+  const o = Math.floor(
+    (scrollTop.value + viewHeight.value + 1) / boxHeight + 5
+  );
+  return Math.min(list.value.length, o * line.value);
+});
+
+/**
+ * @description 计算虚拟列表的padding(保持列表高度完整且滚动条能正常滚动)
+ */
+const paddingAttr = computed(() => {
+  const paddingTop = start.value * boxHeight;
+  const paddingBottom = (list.value.length - over.value) * boxHeight;
+  return `${paddingTop / line.value}px 0 ${paddingBottom / line.value}px`;
+});
+
+/**
+ * @description 虚拟列表真实展示数据
+ */
+const virtualData = computed(() => {
+  return list.value.slice(start.value, over.value);
+});
+
+watch(
+  () => virtualData.value,
+  (newVal, oldValue) => {
+    waterfall.left.length = 0;
+    waterfall.right.length = 0;
+    if (line.value === 2 && newVal.every((item) => typeof item !== "string")) {
+      newVal.forEach((item, i) => {
+        if (i % 2 === 0) {
+          waterfall.left.push(item);
+        } else {
+          waterfall.right.push(item);
+        }
+      });
+    }
+  },
+  { immediate: true, deep: true }
+);
+
+/**
+ * @description 监听滚动条距离顶部距离，实时更新
+ */
+const onScroll = async (e: any) => {
+  scrollTop.value = e.detail.scrollTop ?? 0;
+};
+
+/**
+ * @description 滚动底部函数
+ * */
+const scrollToLower = () => {
+  emit("scrollButton");
+};
+
+/**
+ * @description 点击行触发函数
+ * */
+const handleClick = (temp: string | AnyObject) => {
+  emit("click", temp);
+};
+
+/**
+ * @description 获取默认插槽
+ */
+const slotDefault = useSlots().default;
+</script>
+
+<style lang="scss" scoped>
+@import "../../theme.scss";
+@import "../../libs/css/mixin.scss";
+.hy-virtual-container {
+  height: v-bind(listHeight);
+  padding: 0 $hy-border-margin-padding-base;
+  box-sizing: border-box;
+
+  &__list {
+    padding: v-bind(paddingAttr);
+    @include flex(v-bind(arrange));
+    overflow-anchor: none;
+    &--item {
+      box-sizing: border-box;
+    }
+
+    &--left {
+      margin-right: $hy-border-margin-padding-base;
+    }
+    &--box {
+      box-sizing: border-box;
+      width: 50%;
+      display: flex;
+      flex-direction: column;
+      &-item {
+        box-sizing: border-box;
+        position: relative;
+        overflow: hidden;
+      }
+    }
+  }
+}
+</style>