hy-app 0.1.1

package/components/hy-folding-panel/typing.d.ts

@@ -0,0 +1,59 @@
+import { CSSProperties } from "vue";
+import { CellContentVo } from "../hy-cell/typing";
+
+export interface PanelVo extends CellContentVo {
+  /**
+   * @description 是否展示
+   * */
+  spread?: boolean;
+  /**
+   * @description 展示面板里自定义值
+   * */
+  content?: string;
+}
+export default interface IProps {
+  /**
+   * @description 数据集
+   * */
+  list: PanelVo[];
+  /**
+   * @description 是否手风琴模式（ 默认 false ）
+   * */
+  accordion?: boolean;
+  /**
+   * @description 头部标题
+   * */
+  title?: string;
+  /**
+   * @description 是否显示头部底部边框
+   * */
+  titleBorder?: boolean;
+  /**
+   * @description 是否显示cell下边框 (默认 true )
+   * */
+  border?: boolean;
+  /**
+   * @description 标题前缀竖线颜色
+   * */
+  verticalColor?: string;
+  /**
+   * @description 是否显示标题前缀竖线
+   * */
+  showVertical?: boolean;
+  /**
+   * @description 是否禁用（默认false）
+   * */
+  disabled?: boolean;
+  /**
+   * @description 单元的大小，可选值为 large，medium，small
+   * */
+  size?: HyApp.SizeType;
+  /**
+   * @description 内容面板高度
+   * */
+  contentHeight?: string | number;
+  /**
+   * @description 定义需要用到的外部样式
+   * */
+  customStyle?: CSSProperties;
+}

package/components/hy-form/hy-form.vue

@@ -0,0 +1,372 @@
+<template>
+  <view class="hy-form">
+    <view class="hy-form--item" v-for="item in columns" :key="item.field">
+      <view v-if="item.label" class="hy-form--item__label" :style="labelStyle">
+        <text
+          v-if="isRequired(item.rules)"
+          style="color: red; font-size: 20px; line-height: 10px"
+          >*</text
+        >{{ item.label }} <text>：</text>
+      </view>
+      <view class="hy-form--item__container">
+        <view class="hy-form--item__container-content">
+          <!--	输入框	-->
+          <view
+            class="flex"
+            v-if="
+              item.type === FormTypeEnum.TEXT ||
+              item.type === FormTypeEnum.NUMBER ||
+              item.type === FormTypeEnum.PASSWORD
+            "
+          >
+            <HyInput
+              v-model="formData[item.field]"
+              :type="item.type"
+              :placeholder="item.placeholder"
+              :disabled="disabled || item.disabled"
+              :clearable="item.clearable"
+              :readonly="item.readonly"
+              :shape="shape || item.shape"
+              :border="border || item.border"
+              :customStyle="errorStyle(!!errors[item.field])"
+              @change="handleChange($event, item)"
+              @blur="handleBlur($event, item)"
+            ></HyInput>
+          </view>
+          <!--	输入框	-->
+
+          <!--	上传	-->
+          <template v-if="item.type === FormTypeEnum.UPLOAD">
+            <HyUpload
+              :fileList="formData[item.field]"
+              :maxCount="item.maxCount"
+              :disabled="item.disabled"
+            />
+          </template>
+          <!--	上传	-->
+
+          <!--	详情	-->
+          <template v-if="item.type === FormTypeEnum.DETAIL">
+            <view class="detail">
+              {{ formData[item.field] }}
+            </view>
+          </template>
+          <!--	详情	-->
+
+          <!--	文本域	-->
+          <view class="flex" v-if="item.type === FormTypeEnum.TEXTAREA">
+            <HyTextarea
+              v-model="formData[item.field]"
+              :disabled="disabled || item.disabled"
+              :placeholder="item.placeholder"
+              :clearable="item.clearable"
+              :readonly="item.readonly"
+              :shape="shape || item.shape"
+              :border="border || item.border"
+              :customStyle="errorStyle(!!errors[item.field])"
+              @change="handleChange($event, item)"
+              @blur="handleBlur($event, item)"
+            ></HyTextarea>
+          </view>
+          <!--	文本域	-->
+
+          <!--	单选框	-->
+          <template v-if="item.type === 'radio'">
+            <HyRadio
+              v-model="formData[item.field]"
+              :disabled="disabled || item.disabled"
+              :columns="item.actions"
+            ></HyRadio>
+          </template>
+          <!--	单选框	-->
+
+          <!--	开关	-->
+          <template v-if="item.type === FormTypeEnum.SWITCH">
+            <HySwitch
+              v-model="formData[item.field]"
+              :disabled="disabled || item.disabled"
+            ></HySwitch>
+          </template>
+          <!--	开关	-->
+
+          <!--	自定义选择器	-->
+          <template v-if="item.type === FormTypeEnum.SELECT">
+            <HyPicker
+              v-model="formData[item.field]"
+              :columns="item.select"
+              has-input
+              :disabled="disabled || item.disabled"
+              :placeholder="item.placeholder"
+              :shape="shape || item.shape"
+              :border="border || item.border"
+              :customStyle="errorStyle(!!errors[item.field])"
+            ></HyPicker>
+          </template>
+          <!--	自定义选择器	-->
+
+          <!--	时间选择器	-->
+          <template v-if="item.type === FormTypeEnum.DATE">
+            <HyDatetimePicker
+              v-model="formData[item.field]"
+              has-input
+              :mode="item.mode"
+              :disabled="disabled || item.disabled"
+              :placeholder="item.placeholder"
+              :shape="shape || item.shape"
+              :border="border || item.border"
+              :customStyle="errorStyle(!!errors[item.field])"
+            ></HyDatetimePicker>
+          </template>
+          <!--	时间选择器	-->
+
+          <!--	地址选择器	-->
+          <template v-if="item.type === FormTypeEnum.ADDRESS">
+            <HyAddressPicker
+              v-model="formData[item.field]"
+              has-input
+              :disabled="disabled || item.disabled"
+              :placeholder="item.placeholder"
+              :shape="shape || item.shape"
+              :border="border || item.border"
+              :customStyle="errorStyle(!!errors[item.field])"
+            ></HyAddressPicker>
+          </template>
+          <!--	地址选择器	-->
+
+          <!--	自定义插槽	-->
+          <view class="flex" v-if="item.type === FormTypeEnum.CUSTOM">
+            <slot
+              :name="item.field"
+              :record="item"
+              :errorStyle="errorStyle(!!errors[item.field])"
+            ></slot>
+          </view>
+          <!--	自定义插槽	-->
+        </view>
+
+        <!--	提示信息	-->
+        <HyTransition :show="!!errors[item.field]" mode="slide-left">
+          <view class="hy-form--item__container-warning">{{
+            errors[item.field]
+          }}</view>
+        </HyTransition>
+        <!--	提示信息	-->
+      </view>
+    </view>
+  </view>
+</template>
+
+<script setup lang="ts">
+import { computed, CSSProperties, reactive, toRefs } from "vue";
+import IProps from "./typing";
+import defaultProps from "./props";
+import { addUnit, error } from "../../utils";
+import { FormColumnsType, RulesVo, FormTypeEnum } from "../../typing";
+
+// 组件
+import HyInput from "../hy-input/hy-input.vue";
+import HyPicker from "../hy-picker/hy-picker.vue";
+import HyUpload from "../hy-upload/hy-upload.vue";
+import HyTextarea from "../hy-textarea/hy-textarea.vue";
+import HySwitch from "../hy-switch/hy-switch.vue";
+import HyRadio from "../hy-radio/hy-radio.vue";
+import HyDatetimePicker from "../hy-datetime-picker/hy-datetime-picker.vue";
+import HyAddressPicker from "../hy-address-picker/hy-address-picker.vue";
+import HyTransition from "../hy-transition/hy-transition.vue";
+
+const props = withDefaults(defineProps<IProps>(), defaultProps);
+const { formData, columns, labelWidth, labelAlign, labelPosition } =
+  toRefs(props);
+const emit = defineEmits(["click"]);
+
+const labelPos = labelPosition.value === "top" ? "column" : "row";
+
+/**
+ * @description 错误输入框样式
+ * */
+const errorStyle = computed(() => {
+  return (err: boolean) => {
+    const style: CSSProperties = {};
+    if (err) {
+      style.background = "#FFF2F0";
+    }
+
+    return style;
+  };
+});
+
+const isRequired = computed(() => {
+  return (temp: any) => {
+    if (Array.isArray(temp)) {
+      return temp.some((item) => item?.required);
+    } else {
+      return temp?.required;
+    }
+  };
+});
+
+const errors: AnyObject = reactive({});
+
+/**
+ * @description 标题行内样式
+ * */
+const labelStyle = computed(() => {
+  return {
+    textAlign: labelAlign.value,
+    width: addUnit(labelWidth.value)
+  };
+});
+
+/**
+ * @description 错误信息校验
+ * */
+const errorMsg = (rule: RulesVo, value: string): string => {
+  // 手机正则
+  const phoneExpression = /^1[3-9]\d{9}$/;
+  // 邮箱正则
+  const emitExpression = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,6}$/;
+  // 复杂密码正则
+  const passwordExpression =
+    /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[!@#$%^&*()_+\-=\[\]{};':"\\|,.<>\/?]).{8,}$/;
+  if (rule.required && !value) {
+    return rule.message!;
+  } else if (
+    (rule?.min || rule?.max) &&
+    (value.length < rule?.min! || value.length > rule?.max!)
+  ) {
+    return rule.message!;
+  } else if (rule.type === "phone" && !phoneExpression.test(String(value))) {
+    return rule.message || "请输入正确的手机号";
+  } else if (rule.type === "email" && !emitExpression.test(String(value))) {
+    return rule.message || "请输入正确的邮箱格式";
+  } else if (
+    rule.type === "password" &&
+    !passwordExpression.test(String(value))
+  ) {
+    return (
+      rule.message || "至少8个字符串，并且包含大、小写字母、数字和特殊符号"
+    );
+  } else if (rule?.validator && !rule.validator(rule, value)) {
+    return rule.message || "";
+  } else {
+    return "";
+  }
+};
+
+/**
+ * @description 校验字段
+ * */
+const validateField = (
+  rules: RulesVo | RulesVo[] | undefined,
+  value: string,
+  field: string,
+  event?: "blur" | "change"
+) => {
+  if (!rules) return;
+
+  let errorMessage = "";
+
+  if (Array.isArray(rules)) {
+    // 遍历所有规则
+    for (const index in rules) {
+      // 判断是否有change事件或者blur事件
+      if (event && !rules[index]?.trigger?.includes(event)) continue;
+      errorMessage = errorMsg(rules[index], value);
+      if (errorMessage) {
+        errors[field] = errorMessage;
+        return;
+      }
+      // 可以继续添加更多规则
+    }
+  } else {
+    // 必填校验
+    if (event && !rules?.trigger?.includes(event)) return;
+    errorMessage = errorMsg(rules, value);
+  }
+
+  // 自定义校验规则
+  // if (rules.custom) {
+  //   const customError = rules.custom(value);
+  //   if (customError) {
+  //     errorMessage = customError;
+  //   }
+  // }
+
+  errors[field] = errorMessage;
+};
+
+/**
+ * @description 提交表单
+ * */
+const handleSubmit = () => {
+  return new Promise((resolve, reject) => {
+    let isValid = true;
+
+    // 校验所有字段
+    props.columns.forEach((col) => {
+      validateField(col.rules, formData.value[col.field], col.field);
+      if (errors[col.field]) {
+        isValid = false;
+      }
+    });
+
+    if (isValid) {
+      // alert("表单提交成功！");
+      resolve(formData.value);
+    } else {
+      reject();
+      error("表单校验失败，请检查输入！");
+    }
+  });
+};
+
+/**
+ * @description 输入值触发
+ * */
+const handleChange = (event: string, temp: FormColumnsType) => {
+  validateField(temp.rules, event, temp.field, "change");
+};
+/**
+ * @description 输入值触发
+ * */
+const handleBlur = (event: string, temp: FormColumnsType) => {
+  validateField(temp.rules, event, temp.field, "blur");
+};
+
+defineExpose({
+  validateField,
+  handleSubmit
+});
+</script>
+
+<style lang="scss" scoped>
+@import "../../theme.scss";
+.hy-form {
+  &--item {
+    display: flex;
+    flex-direction: v-bind(labelPos);
+    //align-items: center;
+    margin-bottom: $hy-border-margin-padding-lg;
+    &__label {
+      padding: $hy-border-margin-padding-base 0;
+    }
+    &__container {
+      flex: 1;
+      display: flex;
+      flex-direction: column;
+      &-content {
+        flex: 1;
+        display: flex;
+        align-items: center;
+        .flex {
+          flex: 1;
+        }
+      }
+      &-warning {
+        color: $hy-error;
+        font-size: $hy-font-size-hint;
+      }
+    }
+  }
+}
+</style>

package/components/hy-form/props.ts

@@ -0,0 +1,15 @@
+import IProps from "./typing";
+
+const defaultProps: IProps = {
+  labelPosition: "left",
+  labelWidth: "auto",
+  labelAlign: "left",
+  right: false,
+  itemHeight: 40,
+  shape: "square",
+  border: "surround",
+  columns: [],
+  formData: {}
+};
+
+export default defaultProps;

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

@@ -0,0 +1,51 @@
+import { FormColumnsType } from "../../typing";
+
+export default interface IProps {
+  /**
+   * @description 表单域提示文字的位置
+   * left - 左侧
+   * top - 上方
+   * */
+  labelPosition?: "left" | "top";
+  /**
+   * @description label宽度
+   * 数字 - 固定值
+   * auto - 自适应
+   * */
+  labelWidth?: string | number;
+  /**
+   * @description 是否右对齐
+   * */
+  right?: boolean;
+  /**
+   * @description label字体的对齐方式
+   * left - 左对齐
+   * center - 中间对齐
+   * right - 右对齐
+   * */
+  labelAlign?: HyApp.LeftRightType | "center";
+  /**
+   * @description 当行内容高度
+   * */
+  itemHeight?: number | string;
+  /**
+   * @description 是否全部禁用
+   * */
+  disabled?: boolean;
+  /**
+   * @description 输入框形状
+   * */
+  shape?: HyApp.ShapeType;
+  /**
+   * @description 输入框边框
+   * */
+  border?: HyApp.BorderType;
+  /**
+   * @description 表单配置
+   * */
+  columns: FormColumnsType[];
+  /**
+   * @description 表单值
+   * */
+  formData: Record<string, any>;
+}

package/components/hy-grid/hy-grid.vue

@@ -0,0 +1,126 @@
+<template>
+  <view class="hy-grid" ref="hy-grid" :style="gridStyle">
+    <template v-for="item in list">
+      <view
+        class="hy-grid-item"
+        hover-class="hy-grid-item--hover-class"
+        :hover-stay-time="200"
+        @tap="childClick(item)"
+        :style="itemStyle"
+      >
+        <slot :record="item">
+          <HyIcon
+            :name="item.icon"
+            :size="iconSize"
+            :round="round"
+            label-pos="bottom"
+            :space="space"
+            :label="item.name"
+          ></HyIcon>
+          <!--          <view class="hy-grid-item__title">{{ item.name }}</view>-->
+        </slot>
+      </view>
+    </template>
+  </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 HyIcon from "../hy-icon/hy-icon.vue";
+
+const props = withDefaults(defineProps<IProps>(), defaultProps);
+const { align, customStyle, bgColor, itemHeight, border } = toRefs(props);
+const emit = defineEmits(["click"]);
+
+/**
+ * @description 宫格对齐方式
+ * */
+const gridStyle = computed<CSSProperties>(() => {
+  let style: CSSProperties = {};
+  switch (align.value) {
+    case "left":
+      style.justifyContent = "flex-start";
+      break;
+    case "center":
+      style.justifyContent = "center";
+      break;
+    case "right":
+      style.justifyContent = "flex-end";
+      break;
+    default:
+      style.justifyContent = "flex-start";
+  }
+  return Object.assign(style, customStyle.value || {});
+});
+
+const itemStyle = computed<CSSProperties>(() => {
+  const style: CSSProperties = {
+    background: bgColor.value,
+    height: addUnit(itemHeight.value),
+    width: "100%",
+    border: border.value ? "0.5px solid #c8c7cc66" : ""
+  };
+  return style;
+});
+
+/**
+ * @description 点击事件
+ * */
+const childClick = (name: string | Record<string, any>) => {
+  emit("click", name);
+};
+</script>
+
+<style lang="scss" scoped>
+@import "../../libs/css/mixin.scss";
+@import "../../theme.scss";
+.hy-grid {
+  /* #ifdef APP-NVUE */
+  position: relative;
+  box-sizing: border-box;
+  overflow: hidden;
+  display: block;
+  /* #endif */
+  justify-content: center;
+  @include flex;
+  flex-wrap: wrap;
+  align-items: center;
+  // 在uni-app中应尽量避免使用flex布局以外的方式,因为nvue/uvue等方案都支持flex布局
+  // 这里使用grid布局使用为目前20240409uni-app在抖音小程序开启virtualHost时有bug，存在事件失效问题。
+  /* #ifndef APP-NVUE */
+  display: grid;
+  grid-gap: v-bind(gap);
+  grid-template-columns: repeat(v-bind(col), 1fr);
+  /* #endif */
+  &-item {
+    align-items: center;
+    justify-content: center;
+    position: relative;
+    flex-direction: column;
+    /* #ifndef APP-NVUE */
+    box-sizing: border-box;
+    display: flex;
+    /* #endif */
+
+    /* #ifdef MP */
+    position: relative;
+    float: left;
+    /* #endif */
+
+    &--hover-class {
+      opacity: 0.7;
+    }
+
+    &__title {
+      color: #000;
+      line-height: 60rpx;
+      font-size: $hy-font-size-sm;
+    }
+  }
+}
+</style>

package/components/hy-grid/props.ts

@@ -0,0 +1,16 @@
+import IProps from "./typing";
+
+const defaultProps: IProps = {
+  list: [],
+  col: 4,
+  border: false,
+  itemHeight: "100px",
+  align: "left",
+  gap: "0px",
+  bgColor: "transparent",
+  iconSize: "50px",
+  round: "6px",
+  space: "12px"
+};
+
+export default defaultProps;

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

@@ -0,0 +1,62 @@
+import { CSSProperties } from "vue";
+
+interface GridItem {
+  /**
+   * @description 图片或者icon
+   * */
+  icon: string;
+  /**
+   * @description 名称
+   * */
+  name: string;
+  /**
+   * @description 自定义内容键值对
+   * */
+  [key: string]: any;
+}
+export default interface IProps {
+  /**
+   * @description 数据集
+   * */
+  list: GridItem[];
+  /**
+   * @description 宫格的列数（默认 3 ）
+   * */
+  col?: number;
+  /**
+   * @description 是否显示宫格的边框（默认 false ）
+   * */
+  border?: boolean;
+  /**
+   * @description 单个宫格高度（默认 60px ）
+   * */
+  itemHeight?: number | string;
+  /**
+   * @description 宫格对齐方式，表现为数量少的时候，靠左，居中，还是靠右 （默认 'left' ）
+   * */
+  align?: "center" | HyApp.LeftRightType;
+  /**
+   * @description 间隔（默认 0px）
+   * */
+  gap?: number | string;
+  /**
+   * @description 宫格的背景颜色 （默认 'transparent' ）
+   * */
+  bgColor?: string;
+  /**
+   * @description icon图片大小
+   * */
+  iconSize?: number | string;
+  /**
+   * @description icon图片圆角
+   * */
+  round: number | string;
+  /**
+   * @description icon图片和文字间距
+   * */
+  space: number | string;
+  /**
+   * @description 定义需要用到的外部样式
+   * */
+  customStyle?: CSSProperties;
+}