hy-app 0.1.1

package/components/hy-datetime-picker/typing.d.ts

@@ -0,0 +1,135 @@
+import { DateModeEnum } from "../../typing";
+import { CSSProperties } from "vue";
+
+export default interface IProps {
+  /**
+   * @description 用于控制选择器的弹出和收起 ( 默认 false )
+   * */
+  show?: boolean;
+  /**
+   * @description 弹出层弹出方向
+   * */
+  popupMode?: HyApp.LayoutType;
+  /**
+   * @description 是否显示顶部的操作栏  ( 默认 true )
+   * */
+  showToolbar?: boolean;
+  /**
+   * @description 绑定值
+   * @note 类型有问题,需要调整（加了Date类型）
+   * */
+  modelValue: string | number | Date;
+  /**
+   * @description 顶部标题
+   * */
+  title?: string;
+  /**
+   * @description 展示格式 mode=date为日期选择，mode=time为时间选择，mode=year-month为年月选择，mode=datetime为日期时间选择  ( 默认 ‘datetime )
+   * */
+  mode?: DateModeEnum;
+  /**
+   * @description 可选的最大时间  默认值为后10年
+   * */
+  maxDate?: number;
+  /**
+   * @description 可选的最小时间  默认值为前10年
+   * */
+  minDate?: number;
+  /**
+   * @description 可选的最小小时，仅mode=time有效
+   * */
+  minHour?: number;
+  /**
+   * @description 可选的最大小时，仅mode=time有效
+   * */
+  maxHour?: number;
+  /**
+   * @description 可选的最小分钟，仅mode=time有效
+   * */
+  minMinute?: number;
+  /**
+   * @description 可选的最大分钟，仅mode=time有效
+   * */
+  maxMinute?: number;
+  /**
+   * @description 选项过滤函数
+   * */
+  filter?: null | ((type: string, values: string[]) => string[]);
+  /**
+   * @description 选项格式化函数
+   * */
+  formatter?: null | ((type: string, value: string) => string);
+  /**
+   * @description 是否显示加载中状态   ( 默认 false )
+   * */
+  loading?: boolean;
+  /**
+   * @description 各列中，单个选项的高度   ( 默认 44 )
+   * */
+  itemHeight?: number;
+  /**
+   * @description 取消按钮的文字  ( 默认 '取消' )
+   * */
+  cancelText?: string;
+  /**
+   * @description 确认按钮的文字  ( 默认 '确认' )
+   * */
+  confirmText?: string;
+  /**
+   * @description 取消按钮的颜色  ( 默认 '#909193' )
+   * */
+  cancelColor?: string;
+  /**
+   * @description 确认按钮的颜色  ( 默认 '#3c9cff' )
+   * */
+  confirmColor?: string;
+  /**
+   * @description 每列中可见选项的数量  ( 默认 5 )
+   * */
+  visibleItemCount?: number;
+  /**
+   * @description 是否允许点击遮罩关闭选择器  ( 默认 false )
+   * */
+  closeOnClickOverlay?: boolean;
+  /**
+   * @description 各列的默认索引
+   * @note 类型有问题,需要调整
+   * */
+  defaultIndex?: Array<any>;
+  /**
+   * @description 是否禁用输入框 ( 默认 false )
+   * */
+  disabled?: boolean;
+  /**
+   * @description 输入框是否显示边框 ( 默认 false )
+   * */
+  hasInput?: boolean;
+  /**
+   * @description 自定义时间格式
+   * */
+  format?: string;
+  /**
+   * @description 输入框提示信息
+   * */
+  placeholder?: string;
+  /**
+   * @description 禁用时候输入框颜色
+   * */
+  disabledColor?: string;
+  /**
+   * @description 右边插槽
+   * */
+  toolbarRightSlot?: boolean;
+  /**
+   * @description 输入框形状
+   * */
+  shape?: HyApp.ShapeType;
+  /**
+   * @description 输入框边框
+   * */
+  border?: HyApp.BorderType;
+  /**
+   * @description 自定义输入框外部样式
+   * */
+  customStyle?: CSSProperties;
+}

package/components/hy-divider/hy-divider.vue

@@ -0,0 +1,164 @@
+<template>
+  <view class="hy-divider" :style="dividerStyle" @tap="clickHandler">
+    <view class="hy-divider__line" :style="[leftLineStyle, lineStyle]"></view>
+    <HyIcon
+      v-if="text === 'loading'"
+      :name="IconConfig.LOADING"
+      :color="textColor"
+      is-rotate
+    ></HyIcon>
+    <text v-if="dot" class="hy-divider__dot">●</text>
+    <text v-else-if="text" class="hy-divider__text" :style="textStyle">{{
+      content
+    }}</text>
+    <view class="hy-divider__line" :style="[rightLineStyle, lineStyle]"></view>
+  </view>
+</template>
+
+<script setup lang="ts">
+import { computed, CSSProperties, toRefs } from "vue";
+import defaultProps from "./props";
+import IProps from "./typing";
+import { addUnit } from "../../utils";
+import { IconConfig } from "../../config";
+
+// 组件
+import HyIcon from "../hy-icon/hy-icon.vue";
+
+const props = withDefaults(defineProps<IProps>(), defaultProps);
+const {
+  text,
+  textSize,
+  textColor,
+  textPosition,
+  dashed,
+  lineColor,
+  loadMoreText,
+  loadingText,
+  noMoreText,
+  marginTop,
+  marginBottom,
+  customStyle
+} = toRefs(props);
+const emit = defineEmits(["click"]);
+
+const isLoad = ["loadMore", "loading", "noMore"].includes(text.value);
+
+/**
+ * @description 分割线样式
+ * */
+const dividerStyle = computed<CSSProperties>(() => {
+  const style: CSSProperties = {};
+  style.marginTop =
+    addUnit(marginTop.value) || isLoad ? "20px" : addUnit(marginTop.value);
+  style.marginBottom =
+    addUnit(marginBottom.value) || isLoad
+      ? "20px"
+      : addUnit(marginBottom.value);
+  return Object.assign(style, customStyle.value);
+});
+/**
+ * @description 文本内容
+ * */
+const content = computed(() => {
+  let text = "";
+  switch (props.text) {
+    case "loadMore":
+      text = loadMoreText.value;
+      break;
+    case "loading":
+      text = loadingText.value;
+      break;
+    case "noMore":
+      text = noMoreText.value;
+      break;
+    default:
+      text = props.text;
+      break;
+  }
+  return text;
+});
+/**
+ * @description 文本内容样式
+ * */
+const textStyle = computed<CSSProperties>(() => {
+  const style: CSSProperties = {};
+  style.fontSize = addUnit(textSize.value);
+  style.color = textColor.value;
+  return style;
+});
+/**
+ * @description 线样式
+ * */
+const lineStyle = computed<CSSProperties>(() => {
+  const style: CSSProperties = {
+    borderBottom: `1px ${dashed.value ? "dashed" : "solid"} ${lineColor.value}`
+  };
+  return style;
+});
+/**
+ * @description 左边线条的的样式
+ * */
+const leftLineStyle = computed<CSSProperties>(() => {
+  const style: CSSProperties = {
+    marginRight: "20rpx"
+  };
+  // 如果是在左边，设置左边的宽度为固定值
+  if (isLoad) {
+    style.width = "80px";
+  } else if (textPosition.value === "left") {
+    style.width = "80rpx";
+  } else {
+    style.flex = 1;
+  }
+  return style;
+});
+/**
+ * @description 右边线条的的样式
+ * */
+const rightLineStyle = computed<CSSProperties>(() => {
+  const style: CSSProperties = {
+    marginLeft: "20rpx"
+  };
+  // 如果是在右边，设置右边的宽度为固定值
+  if (isLoad) {
+    style.width = "80px";
+  } else if (textPosition.value === "right") {
+    style.width = "80rpx";
+  } else {
+    style.flex = 1;
+  }
+  return style;
+});
+const clickHandler = () => {
+  emit("click");
+};
+</script>
+
+<style lang="scss" scoped>
+@import "../../libs/css/mixin.scss";
+@import "../../theme.scss";
+
+.hy-divider {
+  @include flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+
+  &__line {
+    /* #ifndef APP-NVUE */
+    vertical-align: middle;
+    /* #endif */
+  }
+
+  &__text {
+    margin: 0 $hy-border-margin-padding-sm;
+  }
+
+  &__dot {
+    font-size: $hy-font-size-sm;
+    margin: 0 $hy-border-margin-padding-sm;
+    color: #c0c4cc;
+  }
+}
+</style>

package/components/hy-divider/props.ts

@@ -0,0 +1,21 @@
+import IProps from "./typing";
+import { IconConfig } from "../../config";
+
+const defaultProps: IProps = {
+  dashed: false,
+  hairline: true,
+  dot: false,
+  textPosition: "center",
+  text: "",
+  textSize: 14,
+  textColor: "#909399",
+  lineColor: "#dcdfe6",
+  loadingIcon: IconConfig.LOADING,
+  loadMoreText: "加载更多",
+  loadingText: "正在加载...",
+  noMoreText: "没有更多了",
+  marginTop: "0",
+  marginBottom: "0"
+};
+
+export default defaultProps;

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

@@ -0,0 +1,64 @@
+import { CSSProperties } from "vue";
+
+export default interface IProps {
+  /**
+   * @description 是否虚线 （默认 false ）
+   * */
+  dashed?: boolean;
+  /**
+   * @description 是否细线 （默认  true ）
+   * */
+  hairline?: boolean;
+  /**
+   * @description 是否以点替代文字，优先于text字段起作用 （默认 false ）
+   * */
+  dot?: boolean;
+  /**
+   * @description 内容文本的位置，left-左边，center-中间，right-右边 （默认 'center' ）
+   * */
+  textPosition?: "center" | HyApp.LeftRightType;
+  /**
+   * @description 文本内容
+   * */
+  text?: string | "loadMore" | "loading" | "noMore";
+  /**
+   * @description 文本大小 （默认 14）
+   * */
+  textSize?: string | number;
+  /**
+   * @description 文本颜色 （默认 '#909399' ）
+   * */
+  textColor?: string;
+  /**
+   * @description 线条颜色 （默认 '#dcdfe6' ）
+   * */
+  lineColor?: string;
+  /**
+   * @description 加载图标（默认 'loading' ）
+   * */
+  loadingIcon?: string;
+  /**
+   * @description 加载前的提示语（默认 '加载更多' ）
+   * */
+  loadMoreText?: string;
+  /**
+   * @description 加载中提示语（默认 '正在加载...' ）
+   * */
+  loadingText?: string;
+  /**
+   * @description 没有更多的提示语（默认 '没有更多了' ）
+   * */
+  noMoreText?: string;
+  /**
+   * @description 上边距 （默认 0 ）
+   * */
+  marginTop?: string | number;
+  /**
+   * @description 下边距 （默认 0 ）
+   * */
+  marginBottom?: string | number;
+  /**
+   * @description 定义需要用到的外部样式
+   * */
+  customStyle?: CSSProperties;
+}

package/components/hy-empty/hy-empty.vue

@@ -0,0 +1,122 @@
+<template>
+  <view class="hy-empty" v-if="show" :style="emptyStyle">
+    <view class="hy-empty__img" :style="imgStyle">
+      <HyIcon
+        :name="imageUrl"
+        :width="width"
+        :height="height"
+        img-mode="widthFix"
+      ></HyIcon>
+    </view>
+    <view v-if="$slots.default">
+      <slot></slot>
+    </view>
+    <view class="hy-empty__description" v-else>
+      <slot v-if="$slots.description" name="description"></slot>
+      <text v-else :style="descriptionStyle">{{ emptyDescription }}</text>
+      <HyButton
+        class="hy-empty__button"
+        v-if="btnText"
+        :text="btnText"
+        :size="btnSize"
+        :type="btnType"
+        :shape="btnShape"
+        :plain="btnPlain"
+        @click="handleClick"
+      ></HyButton>
+    </view>
+  </view>
+</template>
+
+<script setup lang="ts">
+import { computed, CSSProperties, toRefs } from "vue";
+import defaultProps from "./props";
+import IProps from "./typing";
+import { addUnit } from "../../utils";
+
+// 组件
+import HyButton from "../hy-button/hy-button.vue";
+import HyIcon from "../hy-icon/hy-icon.vue";
+
+const props = withDefaults(defineProps<IProps>(), defaultProps);
+const {
+  zIndex,
+  width,
+  height,
+  imgMargin,
+  navigateUrl,
+  desSize,
+  desColor,
+  customStyle
+} = toRefs(props);
+const emit = defineEmits(["click"]);
+
+const emptyDescription = computed(() => {
+  return props.description;
+});
+
+/**
+ * @description 整体样式
+ * */
+const emptyStyle = computed<CSSProperties>(() => {
+  const style: CSSProperties = {
+    zIndex: zIndex.value
+  };
+  return Object.assign(style, customStyle.value);
+});
+
+/**
+ * @description 提示信息样式
+ * */
+const descriptionStyle = computed<CSSProperties>(() => {
+  const style: CSSProperties = {
+    fontSize: addUnit(desSize.value),
+    color: desColor.value
+  };
+  return style;
+});
+
+/**
+ * @description 图片样式
+ * */
+const imgStyle = computed<CSSProperties>(() => {
+  return {
+    width: addUnit(width.value),
+    height: addUnit(height.value),
+    margin: imgMargin.value
+  };
+});
+
+/**
+ * @description 点击按钮，跳转页面
+ * */
+const handleClick = () => {
+  emit("click");
+  if (navigateUrl.value) {
+    uni.navigateTo({
+      url: navigateUrl.value
+    });
+  }
+};
+</script>
+<style scoped lang="scss">
+.hy-empty {
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+  background: rgb(255, 255, 255);
+  &__description {
+    width: 70%;
+    text-align: center;
+  }
+
+  &__button {
+    margin-top: 80rpx;
+  }
+}
+</style>

package/components/hy-empty/props.ts

@@ -0,0 +1,21 @@
+import IProps from "./typing";
+
+const defaultProps: IProps = {
+  show: true,
+  imageUrl: "https://pic.imgdb.cn/item/6737057ad29ded1a8c6f843b.webp",
+  zIndex: 889,
+  width: 350,
+  height: "auto",
+  description: "暂无数据",
+  desSize: 15,
+  desColor: "#5e6d82",
+  imgMargin: "",
+  btnText: "",
+  btnSize: "normal",
+  btnType: "primary",
+  btnShape: "square",
+  btnPlain: false,
+  navigateUrl: ""
+};
+
+export default defaultProps;

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

@@ -0,0 +1,68 @@
+import { CSSProperties } from "vue";
+
+export default interface IProps {
+  /**
+   * @description 是否显示空状态
+   * */
+  show?: boolean;
+  /**
+   * @description 空状态图片
+   * */
+  imageUrl?: string;
+  /**
+   * @description 组件层级
+   * */
+  zIndex?: number;
+  /**
+   * @description icon宽度
+   * */
+  width?: number | string;
+  /**
+   * @description icon高度
+   * */
+  height?: number | string;
+  /**
+   * @description 提示信息
+   * */
+  description?: string;
+  /**
+   * @description 提示信息大小
+   * */
+  desSize?: string | number;
+  /**
+   * @description 提示信息颜色
+   * */
+  desColor?: string;
+  /**
+   * @description 图片margin
+   * */
+  imgMargin?: string;
+  /**
+   * @description 按钮文字
+   * */
+  btnText?: string;
+  /**
+   * @description 按钮尺寸，large，normal，mini （默认 normal）
+   * */
+  btnSize?: "normal" | "large" | "small" | "mini";
+  /**
+   * @description 按钮的预置样式，info，primary，error，warning，success (默认 'info' )
+   * */
+  btnType?: HyApp.ThemeType;
+  /**
+   * @description 按钮形状，circle（两边为半圆），square（带圆角） （默认 'square' ）
+   * */
+  btnShape?: HyApp.ShapeType;
+  /**
+   * @description 按钮是否镂空，背景色透明 （默认 false）
+   * */
+  btnPlain?: boolean;
+  /**
+   * @description 跳转地址
+   * */
+  navigateUrl?: string;
+  /**
+   * @description 自定义输入框外部样式
+   * */
+  customStyle?: CSSProperties;
+}

package/components/hy-folding-panel/hy-folding-panel.vue

@@ -0,0 +1,94 @@
+<template>
+  <view class="hy-folding-panel">
+    <HyCell
+      :title="title"
+      :titleBorder="titleBorder"
+      :border="border"
+      :showVertical="showVertical"
+      :verticalColor="verticalColor"
+      :size="size"
+      :disabled="disabled"
+      :list="lists"
+      @click="clickHandler"
+    >
+      <template #icon="{ icon }">
+        <slot name="icon" :icon="icon"></slot>
+      </template>
+      <template #title="{ title }">
+        <slot name="title" :title="title"></slot>
+      </template>
+      <template #value="{ record }">
+        <slot name="value" :record="record"></slot>
+      </template>
+      <template #bottom="{ record }">
+        <view
+          class="hy-folding-panel__main"
+          :style="[
+            customStyle,
+            {
+              height: record?.spread ? addUnit(contentHeight) : '0px'
+            }
+          ]"
+        >
+          <slot :record="record?.content" />
+        </view>
+        <HyLine v-if="record?.spread"></HyLine>
+      </template>
+    </HyCell>
+  </view>
+</template>
+
+<script setup lang="ts">
+import { toRefs, ref, watch } from "vue";
+import defaultProps from "./props";
+import IProps, { PanelVo } from "./typing";
+
+import HyCell from "../hy-cell/hy-cell.vue";
+import HyLine from "../hy-line/hy-line.vue";
+import { addUnit } from "../../utils";
+
+const props = withDefaults(defineProps<IProps>(), defaultProps);
+const { list, contentHeight, accordion } = toRefs(props);
+const emit = defineEmits(["open", "close", "change"]);
+
+const lists = ref<PanelVo[]>([]);
+
+watch(
+  () => list.value,
+  (newValue: PanelVo[]) => {
+    lists.value = newValue.map((item) => ({
+      ...item,
+      arrowDirection: "down",
+      spread: false
+    }));
+  },
+  { immediate: true }
+);
+
+const clickHandler = (temp: PanelVo, index: number) => {
+  // if (temp?.disabled && temp?.animating) return;
+  lists.value = list.value.map((item, i) => {
+    if (accordion.value) {
+      item.spread = i === index;
+    } else {
+      if (i === index) {
+        item.spread = !item.spread;
+      }
+    }
+
+    item.arrowDirection = item.spread ? "up" : "down";
+    return item;
+  });
+  emit("change", temp, index);
+  emit(temp.spread ? "open" : "close", temp, index);
+};
+</script>
+
+<style lang="scss" scoped>
+.hy-folding-panel {
+  &__main {
+    overflow: auto;
+    transition: height 0.5s ease;
+  }
+}
+</style>

package/components/hy-folding-panel/props.ts

@@ -0,0 +1,17 @@
+import IProps from "./typing";
+import { ColorConfig } from "../../config";
+
+const defaultProps: IProps = {
+  list: [],
+  accordion: false,
+  title: "",
+  titleBorder: false,
+  border: true,
+  verticalColor: ColorConfig.primary,
+  showVertical: true,
+  disabled: false,
+  size: "medium",
+  contentHeight: 120
+};
+
+export default defaultProps;