hy-app 0.3.0 → 0.3.1

package/components/hy-back-top/hy-back-top.vue

@@ -35,12 +35,8 @@ export default {
 </script>
 
 <script setup lang="ts">
-/**
- * 该组件一个用于长页面，滑动一定距离后，出现返回顶部按钮，方便快速返回顶部的场景。
- * @displayName hy-back-top
- */
-defineOptions({})
-import { computed, type CSSProperties, PropType, toRefs } from 'vue'
+import { computed, toRefs } from 'vue'
+import type { CSSProperties, PropType } from 'vue'
 import { addUnit, getPx } from '../../utils'
 import { IconConfig } from '../../config'
 import type { IBackTopEmit } from './typing'
@@ -49,6 +45,12 @@ import type HyIconProps from '../hy-icon/typing'
 import HyTransition from '../hy-transition/hy-transition.vue'
 import HyIcon from '../hy-icon/hy-icon.vue'
 
+/**
+ * 该组件一个用于长页面，滑动一定距离后，出现返回顶部按钮，方便快速返回顶部的场景。
+ * @displayName hy-back-top
+ */
+defineOptions({})
+
 // const props = withDefaults(defineProps<IProps>(), defaultProps)
 const props = defineProps({
   /**

package/components/hy-config-provider/hy-config-provider.vue

@@ -49,7 +49,7 @@ const props = defineProps({
   customClass: String,
   /** 定义需要用到的外部样式 */
   customStyle: {
-    type: Object as PropType<CSSProperties>,
+    type: [Object, Array] as PropType<CSSProperties | CSSProperties[]>,
   },
 })
 const { theme, themeColor, customClass, customStyle, padding } = toRefs(props)

package/components/hy-flex/hy-flex.vue

@@ -0,0 +1,73 @@
+<template>
+  <view :class="cls" :style="style">
+    <slot />
+  </view>
+</template>
+
+<script setup lang="ts">
+import { computed, PropType } from 'vue'
+import { FlexAlign, FlexDirection, FlexJustify, FlexWrap } from './typing'
+import { addUnit, isArray } from '../../utils'
+
+const props = defineProps({
+  /** flex 主轴的方向是否垂直，使用 flex-direction: column */
+  vertical: {
+    type: Boolean,
+    default: false,
+  },
+  /** 快捷设置 flex-direction */
+  direction: String as PropType<FlexDirection>,
+  /** 设置元素在主轴方向上的对齐方式 */
+  justify: {
+    type: String as PropType<FlexJustify>,
+    default: 'flex-start',
+  },
+  /** 设置元素在交叉轴方向上的对齐方式 */
+  align: {
+    type: String as PropType<FlexAlign>,
+    default: 'flex-start',
+  },
+  /** 设置元素单行显示还是多行显示 */
+  wrap: {
+    type: String as PropType<FlexWrap>,
+    default: 'nowrap',
+  },
+  /** flex 属性，支持数字或字符串。如 1 或 'none' */
+  flex: {
+    type: [String, Number],
+    default: 'initial',
+  },
+  /** 设置网格之间的间隙 */
+  gap: {
+    type: [String, Number, Array] as PropType<string | number | (string | number)[]>,
+    default: 0,
+  },
+  /** 快捷设置 */
+  basis: {
+    type: [String, Number],
+    default: 'auto',
+  },
+})
+
+// 计算 class
+const cls = computed(() => ['hy-flex', props.vertical && 'hy-flex--vertical'])
+
+// 计算 style
+const style = computed(() => {
+  const gap = isArray(props.gap) ? props.gap : [props.gap, props.gap]
+  const [rowGap, colGap] = gap.map((v) => addUnit(v))
+
+  return {
+    display: 'flex',
+    'justify-content': props.justify,
+    'align-items': props.align,
+    'flex-wrap': props.wrap,
+    flex: props.flex,
+    'flex-basis': props.basis,
+    'row-gap': colGap,
+    'column-gap': rowGap,
+  }
+})
+</script>
+
+<style scoped></style>

package/components/hy-flex/index.scss

@@ -0,0 +1,8 @@
+@use "../../libs/css/mixin.scss" as *;
+@include b(flex) {
+  box-sizing: border-box;
+
+  @include m(vertical) {
+    flex-direction: column;
+  }
+}

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

@@ -0,0 +1,23 @@
+export type FlexAlign = 'flex-start' | 'center' | 'flex-end' | 'stretch' | 'baseline'
+
+export type FlexJustify = HyApp.JustifyContentType
+export type FlexDirection = 'row' | 'row-reverse' | 'column' | 'column-reverse'
+export type FlexWrap = 'nowrap' | 'wrap' | 'wrap-reverse'
+
+export interface FlexProps {
+  /** 主轴方向，等价于 flex-direction */
+  vertical?: boolean
+  direction?: FlexDirection
+  /** justify-content */
+  justify?: FlexJustify
+  /** align-items */
+  align?: FlexAlign
+  /** flex-wrap */
+  wrap?: FlexWrap
+  /** flex 属性，支持数字或字符串。如 1 或 'none' */
+  flex?: number | string
+  /** 子元素间距，支持数字（px）、字符串或数组 [row, column] */
+  gap?: number | string | [number | string, number | string]
+  /** flex-basis */
+  basis?: number | string
+}

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

@@ -1,12 +1,12 @@
 <template>
-  <view class="hy-form-simple">
+  <view class="hy-form">
     <slot></slot>
   </view>
 </template>
 
 <script lang="ts">
 export default {
-  name: 'hy-form-simple',
+  name: 'hy-form',
   options: {
     addGlobalClass: true,
     virtualHost: true,
@@ -16,8 +16,10 @@ export default {
 </script>
 
 <script setup lang="ts">
-import { PropType, provide, reactive, ref, toRefs } from 'vue'
+import { provide, reactive, ref, toRefs } from 'vue'
+import type { PropType } from 'vue'
 import type { FormItemRule } from './typing'
+import { clearVal } from '../../utils'
 
 /**
  * 表单组件父组件，需要搭配hy-form-item
@@ -29,7 +31,12 @@ const props = defineProps({
   /** 表单数据对象 */
   model: Object as PropType<AnyObject>,
   /** 表单校验规则 */
-  rules: Object as unknown as PropType<FormItemRule>,
+  rules: Object as PropType<FormItemRule>,
+  /** 表单底部边框 */
+  border: {
+    type: Boolean,
+    default: false,
+  },
   /** label标签的宽度，单位rpx */
   labelWidth: {
     type: String,
@@ -52,6 +59,7 @@ const props = defineProps({
     default: 'left',
   },
 })
+const { rules, border, labelWidth, labelAlign, labelPosition } = toRefs(props)
 
 const emit = defineEmits<{
   submit: [data: Record<string, any>]
@@ -67,10 +75,11 @@ const errors = reactive<Record<string, string>>({})
 const formContext = {
   formData,
   errors,
-  rules: toRefs(props).rules,
-  labelWidth: toRefs(props).labelWidth,
-  labelPosition: toRefs(props).labelPosition,
-  labelAlign: toRefs(props).labelAlign,
+  rules: rules.value,
+  border: border.value,
+  labelWidth: labelWidth.value,
+  labelPosition: labelPosition.value,
+  labelAlign: labelAlign.value,
   addFormItem: (item: any) => {
     formItems.value.push(item)
   },
@@ -205,9 +214,7 @@ const validate = () => {
 
 // 重置表单
 const resetFields = () => {
-  Object.keys(formData).forEach((key) => {
-    formData[key] = undefined
-  })
+  clearVal(formData)
   Object.keys(errors).forEach((key) => {
     delete errors[key]
   })
@@ -246,7 +253,7 @@ defineExpose({
 </script>
 
 <style lang="scss" scoped>
-.hy-form-simple {
+.hy-form {
   width: 100%;
 }
 </style>

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

@@ -54,4 +54,8 @@ export default interface HyFormSimpleProps {
    * 标签对齐方式
    */
   labelAlign?: 'left' | 'center' | 'right'
+  /**
+   * 表单列底部边框
+   * */
+  border: boolean
 }