@tplc/wot 1.0.6 → 1.0.8

package/components/wd-floating-panel/wd-floating-panel.vue

@@ -0,0 +1,140 @@
+<template>
+  <view
+    :class="`wd-floating-panel ${customClass} ${safeAreaInsetBottom ? 'is-safe' : ''}`"
+    :style="rootStyle"
+    @touchstart.passive="handleTouchStart"
+    @touchmove.passive="handleTouchMove"
+    @touchend="handleTouchEnd"
+    @touchcancel="handleTouchEnd"
+  >
+    <view :class="`wd-floating-panel__header`">
+      <view :class="`wd-floating-panel__header-bar`"></view>
+    </view>
+
+    <scroll-view
+      :class="`wd-floating-panel__content`"
+      data-id="content"
+      :show-scrollbar="showScrollbar"
+      scroll-y
+      @touchmove.stop.prevent="handleTouchMove"
+    >
+      <slot />
+    </scroll-view>
+  </view>
+</template>
+
+<script lang="ts">
+export default {
+  name: 'wd-floating-panel',
+  options: {
+    virtualHost: true,
+    addGlobalClass: true,
+    styleIsolation: 'shared'
+  }
+}
+</script>
+
+<script lang="ts" setup>
+import { computed, onBeforeMount, ref, watch, type CSSProperties } from 'vue'
+import { floatingPanelProps } from './type'
+import { addUnit, closest, getSystemInfo, objToStyle } from '../common/util'
+import { useTouch } from '../composables/useTouch'
+
+const touch = useTouch()
+
+const props = defineProps(floatingPanelProps)
+const emit = defineEmits(['update:height', 'height-change'])
+
+const heightValue = ref<number>(props.height)
+
+const DAMP = 0.2 // 阻尼系数
+let startY: number // 起始位置
+const windowHeight = ref<number>(0)
+const dragging = ref<boolean>(false) // 是否正在拖拽
+
+const boundary = computed(() => ({
+  min: props.anchors[0] ? props.anchors[0] : 100,
+  max: props.anchors[props.anchors.length - 1] ? props.anchors[props.anchors.length - 1] : Math.round(windowHeight.value * 0.6)
+}))
+
+const anchors = computed(() => (props.anchors.length >= 2 ? props.anchors : [boundary.value.min, boundary.value.max]))
+
+const rootStyle = computed(() => {
+  const style: CSSProperties = {
+    height: addUnit(boundary.value.max),
+    transform: `translateY(calc(100% + ${addUnit(-heightValue.value)}))`,
+    transition: !dragging.value ? `transform ${props.duration}ms cubic-bezier(0.18, 0.89, 0.32, 1.28)` : 'none'
+  }
+
+  return `${objToStyle(style)}${props.customStyle}`
+})
+
+const updateHeight = (value: number) => {
+  heightValue.value = value
+  emit('update:height', value)
+}
+
+const handleTouchStart = (event: TouchEvent) => {
+  touch.touchStart(event)
+  dragging.value = true
+  startY = -heightValue.value
+}
+
+const handleTouchMove = (event: TouchEvent) => {
+  const target = event.currentTarget as any
+  if (target.dataset.id == 'content') {
+    if (!props.contentDraggable) return
+  }
+  touch.touchMove(event)
+  const moveY = touch.deltaY.value + startY
+  updateHeight(-ease(moveY))
+}
+
+const handleTouchEnd = () => {
+  dragging.value = false
+  updateHeight(closest(anchors.value, heightValue.value))
+
+  if (heightValue.value !== -startY) {
+    emit('height-change', { height: heightValue.value })
+  }
+}
+
+const ease = (y: number) => {
+  const absDistance = Math.abs(y)
+  const { min, max } = boundary.value
+
+  if (absDistance > max) {
+    return -(max + (absDistance - max) * DAMP)
+  }
+
+  if (absDistance < min) {
+    return -(min - (min - absDistance) * DAMP)
+  }
+
+  return y
+}
+
+watch(
+  () => props.height,
+  (value) => {
+    heightValue.value = value
+  }
+)
+
+watch(
+  boundary,
+  () => {
+    updateHeight(closest(anchors.value, heightValue.value))
+  },
+  { immediate: true }
+)
+
+onBeforeMount(() => {
+  const { windowHeight: _windowHeight } = getSystemInfo()
+  windowHeight.value = _windowHeight
+})
+</script>
+
+<style lang="scss" scoped>
+@import './index.scss';
+</style>

package/components/wd-form/types.ts

@@ -1,18 +1,13 @@
 /*
  * @Author: weisheng
  * @Date: 2023-12-14 11:21:58
- * @LastEditTime: 2024-03-18 12:50:41
+ * @LastEditTime: 2025-01-11 13:31:20
  * @LastEditors: weisheng
  * @Description:
- * @FilePath: \wot-design-uni\src\uni_modules\wot-design-uni\components\wd-form\types.ts
+ * @FilePath: /wot-design-uni/src/uni_modules/wot-design-uni/components/wd-form/types.ts
  * 记得注释
  */
-import {
-  type ComponentPublicInstance,
-  type ExtractPropTypes,
-  type InjectionKey,
-  type PropType,
-} from 'vue'
+import { type ComponentPublicInstance, type ExtractPropTypes, type InjectionKey, type PropType } from 'vue'
 import { baseProps, makeBooleanProp, makeRequiredProp } from '../common/props'
 
 export type FormProvide = {
@@ -40,10 +35,7 @@ export interface FormItemRule {
   required: boolean
   message: string
   pattern?: RegExp
-  validator?: (
-    value: any,
-    rule: FormItemRuleWithoutValidator,
-  ) => boolean | Promise<string> | Promise<boolean> | Promise<void> | Promise<unknown>
+  validator?: (value: any, rule: FormItemRuleWithoutValidator) => boolean | Promise<string> | Promise<boolean> | Promise<void> | Promise<unknown>
 }
 
 export type FormItemRuleWithoutValidator = Omit<FormItemRule, 'validator'>
@@ -59,7 +51,7 @@ export const formProps = {
    */
   rules: {
     type: Object as PropType<FormRules>,
-    default: () => ({}),
+    default: () => ({})
   },
   /**
    * 是否在输入时重置表单校验信息
@@ -70,8 +62,8 @@ export const formProps = {
    */
   errorType: {
     type: String as PropType<'toast' | 'message' | 'none'>,
-    default: 'message',
-  },
+    default: 'message'
+  }
 }
 export type FormProps = ExtractPropTypes<typeof formProps>
 
@@ -80,7 +72,7 @@ export type FormExpose = {
    * 表单校验
    * @param prop 指定校验字段
    */
-  validate: (prop?: string) => Promise<{
+  validate: (prop?: string | Array<string>) => Promise<{
     valid: boolean
     errors: ErrorMessage[]
   }>

package/components/wd-form/wd-form.vue

@@ -11,23 +11,24 @@ export default {
   options: {
     addGlobalClass: true,
     virtualHost: true,
-    styleIsolation: 'shared',
-  },
+    styleIsolation: 'shared'
+  }
 }
 </script>
 
 <script lang="ts" setup>
+import wdToast from '../wd-toast/wd-toast.vue'
 import { reactive, watch } from 'vue'
-import { deepClone, getPropByPath, isDef, isPromise } from '../common/util'
+import { deepClone, getPropByPath, isArray, isDef, isPromise, isString } from '../common/util'
 import { useChildren } from '../composables/useChildren'
 import { useToast } from '../wd-toast'
 import { type FormRules, FORM_KEY, type ErrorMessage, formProps, type FormExpose } from './types'
 
-const toast = useToast('wd-form-toast')
+const { show: showToast } = useToast('wd-form-toast')
 const props = defineProps(formProps)
 
 const { children, linkChildren } = useChildren(FORM_KEY)
-const errorMessages = reactive<Record<string, string>>({})
+let errorMessages = reactive<Record<string, string>>({})
 
 linkChildren({ props, errorMessages })
 
@@ -38,36 +39,47 @@ watch(
       clearMessage()
     }
   },
-  { immediate: true, deep: true },
+  { immediate: true, deep: true }
 )
 
 /**
  * 表单校验
- * @param prop 指定校验字段
+ * @param prop 指定校验字段或字段数组
  */
-async function validate(prop?: string): Promise<{ valid: boolean; errors: ErrorMessage[] }> {
+async function validate(prop?: string | string[]): Promise<{ valid: boolean; errors: ErrorMessage[] }> {
   const errors: ErrorMessage[] = []
   let valid: boolean = true
   const promises: Promise<void>[] = []
   const formRules: FormRules = getMergeRules()
-  const rulesToValidate: FormRules = prop ? { [prop]: formRules[prop] } : formRules
-  for (const prop in rulesToValidate) {
-    const rules = rulesToValidate[prop]
-    const value = getPropByPath(props.model, prop)
+  const propsToValidate = isArray(prop) ? prop : isDef(prop) ? [prop] : []
+  const rulesToValidate: FormRules =
+    propsToValidate.length > 0
+      ? propsToValidate.reduce((acc, key) => {
+          if (formRules[key]) {
+            acc[key] = formRules[key]
+          }
+          return acc
+        }, {} as FormRules)
+      : formRules
+
+  for (const propName in rulesToValidate) {
+    const rules = rulesToValidate[propName]
+    const value = getPropByPath(props.model, propName)
+
     if (rules && rules.length > 0) {
       for (const rule of rules) {
         if (rule.required && (!isDef(value) || value === '')) {
           errors.push({
-            prop,
-            message: rule.message,
+            prop: propName,
+            message: rule.message
           })
           valid = false
           break
         }
         if (rule.pattern && !rule.pattern.test(value)) {
           errors.push({
-            prop,
-            message: rule.message,
+            prop: propName,
+            message: rule.message
           })
           valid = false
           break
@@ -78,34 +90,32 @@ async function validate(prop?: string): Promise<{ valid: boolean; errors: ErrorM
           if (isPromise(result)) {
             promises.push(
               result
-                .then((res: any) => {
+                .then((res) => {
                   if (typeof res === 'string') {
                     errors.push({
-                      prop,
-                      message: res,
+                      prop: propName,
+                      message: res
                     })
                     valid = false
                   } else if (typeof res === 'boolean' && !res) {
                     errors.push({
-                      prop,
-                      message: rule.message,
+                      prop: propName,
+                      message: rule.message
                     })
                     valid = false
                   }
                 })
-                .catch((error) => {
-                  errors.push({
-                    prop,
-                    message: error || rule.message,
-                  })
+                .catch((error?: string | Error) => {
+                  const message = isDef(error) ? (isString(error) ? error : error.message || rule.message) : rule.message
+                  errors.push({ prop: propName, message })
                   valid = false
-                }),
+                })
             )
           } else {
             if (!result) {
               errors.push({
-                prop,
-                message: rule.message,
+                prop: propName,
+                message: rule.message
               })
               valid = false
             }
@@ -117,13 +127,11 @@ async function validate(prop?: string): Promise<{ valid: boolean; errors: ErrorM
 
   await Promise.all(promises)
 
-  errors.forEach((error) => {
-    showMessage(error)
-  })
+  showMessage(errors)
 
   if (valid) {
-    if (prop) {
-      clearMessage(prop)
+    if (propsToValidate.length) {
+      propsToValidate.forEach(clearMessage)
     } else {
       clearMessage()
     }
@@ -131,13 +139,22 @@ async function validate(prop?: string): Promise<{ valid: boolean; errors: ErrorM
 
   return {
     valid,
-    errors,
+    errors
   }
 }
 
 // 合并子组件的rules到父组件的rules
 function getMergeRules() {
   const mergedRules: FormRules = deepClone(props.rules)
+  const childrenProps = children.map((child) => child.prop)
+
+  // 过滤掉在 children 中不存在对应子组件的规则
+  Object.keys(mergedRules).forEach((key) => {
+    if (!childrenProps.includes(key)) {
+      delete mergedRules[key]
+    }
+  })
+
   children.forEach((item) => {
     if (isDef(item.prop) && isDef(item.rules) && item.rules.length) {
       if (mergedRules[item.prop]) {
@@ -150,13 +167,20 @@ function getMergeRules() {
   return mergedRules
 }
 
-function showMessage(errorMsg: ErrorMessage) {
-  if (!errorMsg.message) return
-
-  if (props.errorType === 'toast') {
-    toast.show(errorMsg.message)
-  } else if (props.errorType === 'message') {
-    errorMessages[errorMsg.prop] = errorMsg.message
+function showMessage(errors: ErrorMessage[]) {
+  const childrenProps = children.map((e) => e.prop).filter(Boolean)
+  const messages = errors.filter((error) => error.message && childrenProps.includes(error.prop))
+  if (messages.length) {
+    messages.sort((a, b) => {
+      return childrenProps.indexOf(a.prop) - childrenProps.indexOf(b.prop)
+    })
+    if (props.errorType === 'toast') {
+      showToast(messages[0].message)
+    } else if (props.errorType === 'message') {
+      messages.forEach((error) => {
+        errorMessages[error.prop] = error.message
+      })
+    }
   }
 }
 
@@ -180,6 +204,4 @@ function reset() {
 defineExpose<FormExpose>({ validate, reset })
 </script>
 
-<style lang="scss" scoped>
-@import './index.scss';
-</style>
+<style lang="scss" scoped></style>

package/components/wd-form-item/index.scss

@@ -6,11 +6,12 @@
   }
 }
 
+
 @include b(form-item) {
-  @include e(error-message) {
+  @include e(error-message){
+    color: $-form-item-error-message-color;
     font-size: $-form-item-error-message-font-size;
     line-height: $-form-item-error-message-line-height;
-    color: $-form-item-error-message-color;
     text-align: left;
     vertical-align: middle;
   }

package/components/wd-form-item/types.ts

@@ -1,11 +1,5 @@
 import type { ExtractPropTypes } from 'vue'
-import {
-  baseProps,
-  makeArrayProp,
-  makeBooleanProp,
-  makeRequiredProp,
-  makeStringProp,
-} from '../common/props'
+import { baseProps, makeArrayProp, makeBooleanProp, makeRequiredProp, makeStringProp } from '../common/props'
 import type { FormItemRule } from '../wd-form/types'
 
 export const formItemProps = {
@@ -16,7 +10,7 @@ export const formItemProps = {
   center: makeBooleanProp(false),
   label: String,
   labelWidth: makeStringProp('100px'),
-  isLink: Boolean,
+  isLink: Boolean
 }
 
 export type FormItemProps = ExtractPropTypes<typeof formItemProps>

package/components/wd-form-item/wd-form-item.vue

@@ -27,8 +27,8 @@ export default {
   options: {
     addGlobalClass: true,
     virtualHost: true,
-    styleIsolation: 'shared',
-  },
+    styleIsolation: 'shared'
+  }
 }
 </script>
 
@@ -61,5 +61,5 @@ const border = computed(() => {
 </script>
 
 <style lang="scss" scoped>
-@import './index';
+@import './index.scss';
 </style>

package/components/wd-grid/index.scss

@@ -4,6 +4,6 @@
 @include b(grid) {
   position: relative;
   box-sizing: border-box;
-  height: auto;
   overflow: hidden;
-}
+  height: auto;
+}

package/components/wd-grid/types.ts

@@ -18,6 +18,7 @@ export type GridProvide = {
     border?: boolean
     bgColor?: string
     gutter?: number
+    hoverClass?: string
   }
 }
 
@@ -49,6 +50,10 @@ export const gridProps = {
    * 格子之间的间距，默认单位为px
    */
   gutter: Number,
+  /**
+   * 自定义内容区域hover-class
+   */
+  hoverClass: String
 }
 
 export type GridProps = ExtractPropTypes<typeof gridProps>

package/components/wd-grid/wd-grid.vue

@@ -11,8 +11,8 @@ export default {
   options: {
     virtualHost: true,
     addGlobalClass: true,
-    styleIsolation: 'shared',
-  },
+    styleIsolation: 'shared'
+  }
 }
 </script>
 
@@ -35,15 +35,15 @@ watch(
     if (val === oldVal) return
     if (!val || val <= 0) {
       console.error(
-        'The number of columns attribute value is invalid. The attribute must be greater than 0 and it is not recommended to use a larger value attribute.',
+        'The number of columns attribute value is invalid. The attribute must be greater than 0 and it is not recommended to use a larger value attribute.'
       )
     }
     oldVal && init()
   },
   {
     deep: true,
-    immediate: true,
-  },
+    immediate: true
+  }
 )
 
 watch(
@@ -58,8 +58,8 @@ watch(
   },
   {
     deep: true,
-    immediate: true,
-  },
+    immediate: true
+  }
 )
 
 watch(
@@ -68,8 +68,8 @@ watch(
     handleChildrenChange()
   },
   {
-    deep: true,
-  },
+    deep: true
+  }
 )
 
 const rootStyle = computed(() => {
@@ -94,8 +94,7 @@ function init() {
       } else {
         item.$.exposed!.setiIemClass('is-first')
       }
-      children.length - 1 === index &&
-        item.$.exposed!.setiIemClass(item.$.exposed!.itemClass.value + ' is-last')
+      children.length - 1 === index && item.$.exposed!.setiIemClass(item.$.exposed!.itemClass.value + ' is-last')
     }
     item.$.exposed!.init()
   })
@@ -103,5 +102,5 @@ function init() {
 </script>
 
 <style lang="scss" scoped>
-@import './index';
+@import './index.scss';
 </style>