@tplc/wot 0.0.1

package/components/wd-fab/index.scss

@@ -0,0 +1,115 @@
+@import '../common/abstracts/variable';
+@import '../common/abstracts/mixin';
+
+.wot-theme-dark {
+  @include b(fab) {
+  }
+}
+
+@include b(fab) {
+  position: fixed;
+  z-index: 99;
+
+  @include edeep(trigger) {
+    box-sizing: border-box;
+    width: $-fab-trigger-width !important;
+    min-width: auto !important;
+    height: $-fab-trigger-height !important;
+    border-radius: calc($-fab-trigger-height / 2) !important;
+  }
+
+  :deep() {
+    @include e(actions) {
+      position: absolute;
+      z-index: 0;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      padding: $-fab-actions-padding 0;
+
+      @include m(left, right) {
+        top: 0;
+        height: 100%;
+        padding: 0 $-fab-actions-padding;
+      }
+
+      @include m(left) {
+        right: 100%;
+        flex-direction: row-reverse;
+      }
+
+      @include m(right) {
+        left: 100%;
+        flex-direction: row;
+      }
+
+      @include m(top, bottom) {
+        left: 0;
+        width: 100%;
+      }
+
+      @include m(top) {
+        bottom: 100%;
+        flex-direction: column-reverse;
+      }
+
+      @include m(bottom) {
+        top: 100%;
+        flex-direction: column;
+      }
+    }
+
+    // 动画
+    @include e(transition-enter-active, transition-leave-active) {
+      transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
+    }
+
+    @include e(transition-enter) {
+      @include m(top) {
+        opacity: 0;
+        transform: translateY(40px);
+      }
+
+      @include m(bottom) {
+        opacity: 0;
+        transform: translateY(-40px);
+      }
+
+      @include m(left) {
+        opacity: 0;
+        transform: translateX(40px);
+      }
+
+      @include m(right) {
+        opacity: 0;
+        transform: translateX(-40px);
+      }
+    }
+
+    @include e(transition-leave-to) {
+      @include m(top) {
+        opacity: 0;
+        transform: translateY(40px);
+      }
+
+      @include m(bottom) {
+        opacity: 0;
+        transform: translateY(-40px);
+      }
+
+      @include m(left) {
+        opacity: 0;
+        transform: translateX(40px);
+      }
+
+      @include m(right) {
+        opacity: 0;
+        transform: translateX(-40px);
+      }
+    }
+  }
+
+  @include edeep(icon) {
+    font-size: $-fab-icon-fs;
+  }
+}

package/components/wd-fab/types.ts

@@ -0,0 +1,61 @@
+import type { ComponentPublicInstance, ExtractPropTypes, PropType } from 'vue'
+import { baseProps, makeBooleanProp, makeNumberProp, makeStringProp } from '../common/props'
+
+export type FabType = 'primary' | 'success' | 'info' | 'warning' | 'error' | 'default'
+export type FabPosition = 'left-top' | 'right-top' | 'left-bottom' | 'right-bottom'
+export type FabDirection = 'top' | 'right' | 'bottom' | 'left'
+export type FabGap = Partial<Record<FabDirection, number>>
+export const fabProps = {
+  ...baseProps,
+  /**
+   * 是否激活
+   */
+  active: makeBooleanProp(false),
+  /**
+   * 类型，可选值为 default primary info success warning error
+   */
+  type: makeStringProp<FabType>('primary'),
+  /**
+   * 悬浮按钮位置，可选值为 left-top right-top left-bottom right-bottom
+   */
+  position: makeStringProp<FabPosition>('right-bottom'),
+  /**
+   * 悬浮按钮菜单弹出方向，可选值为 top bottom left right
+   */
+  direction: makeStringProp<FabDirection>('top'),
+  /**
+   * 是否禁用
+   */
+  disabled: makeBooleanProp(false),
+  /**
+   * 悬浮按钮未展开时的图标
+   */
+  inactiveIcon: makeStringProp('add'),
+  /**
+   * 悬浮按钮展开时的图标
+   */
+  activeIcon: makeStringProp('close'),
+  /**
+   * 自定义悬浮按钮层级
+   */
+  zIndex: makeNumberProp(99),
+  /**
+   * 是否可拖动
+   */
+  draggable: makeBooleanProp(false),
+  gap: {
+    type: Object as PropType<FabGap>,
+    default: () => ({}),
+  },
+}
+
+export type FabProps = ExtractPropTypes<typeof fabProps>
+
+export type FabExpose = {
+  // 展开菜单
+  open: () => void
+  // 收起菜单
+  close: () => void
+}
+
+export type FabInstance = ComponentPublicInstance<FabProps, FabExpose>

package/components/wd-fab/wd-fab.vue

@@ -0,0 +1,257 @@
+<template>
+  <view
+    @touchmove.stop.prevent="handleTouchMove"
+    @touchstart="handleTouchStart"
+    @touchend="handleTouchEnd"
+    :class="`wd-fab ${customClass}`"
+    :style="rootStyle"
+    @click.stop=""
+  >
+    <view @click.stop="" :style="{ visibility: inited ? 'visible' : 'hidden' }" id="trigger">
+      <wd-button
+        @click="handleClick"
+        custom-class="wd-fab__trigger"
+        round
+        :type="type"
+        :disabled="disabled"
+      >
+        <wd-icon custom-class="wd-fab__icon" :name="isActive ? activeIcon : inactiveIcon"></wd-icon>
+      </wd-button>
+    </view>
+    <wd-transition
+      :enter-class="`wd-fab__transition-enter--${fabDirection}`"
+      enter-active-class="wd-fab__transition-enter-active"
+      :leave-to-class="`wd-fab__transition-leave-to--${fabDirection}`"
+      leave-active-class="wd-fab__transition-leave-active"
+      :custom-class="`wd-fab__actions wd-fab__actions--${fabDirection}`"
+      :show="isActive"
+      :duration="300"
+      name=""
+    >
+      <slot></slot>
+    </wd-transition>
+  </view>
+</template>
+
+<script lang="ts">
+export default {
+  name: 'wd-fab',
+  options: {
+    virtualHost: true,
+    addGlobalClass: true,
+    styleIsolation: 'shared',
+  },
+}
+</script>
+
+<script lang="ts" setup>
+import {
+  type CSSProperties,
+  computed,
+  ref,
+  watch,
+  inject,
+  getCurrentInstance,
+  onBeforeUnmount,
+  onMounted,
+  nextTick,
+} from 'vue'
+import { getRect, isDef, isH5, objToStyle } from '../common/util'
+import { type Queue, queueKey } from '../composables/useQueue'
+import { closeOther, pushToQueue, removeFromQueue } from '../common/clickoutside'
+import { fabProps, type FabExpose } from './types'
+import { reactive } from 'vue'
+
+const props = defineProps(fabProps)
+const emit = defineEmits(['update:active'])
+const inited = ref<boolean>(false) // 是否初始化完成
+const isActive = ref<boolean>(false) // 是否激活状态
+const queue = inject<Queue | null>(queueKey, null)
+const { proxy } = getCurrentInstance() as any
+
+watch(
+  () => props.active,
+  (newValue) => {
+    isActive.value = newValue
+  },
+  { immediate: true, deep: true },
+)
+
+watch(
+  () => isActive.value,
+  (newValue) => {
+    if (newValue) {
+      if (queue && queue.closeOther) {
+        queue.closeOther(proxy)
+      } else {
+        closeOther(proxy)
+      }
+    }
+  },
+)
+
+const fabDirection = ref(props.direction)
+
+watch(
+  () => props.direction,
+  (direction) => (fabDirection.value = direction),
+)
+
+watch(
+  () => props.position,
+  () => initPosition(),
+)
+
+const top = ref<number>(0)
+const left = ref<number>(0)
+const screen = reactive({ width: 0, height: 0 })
+const fabSize = ref<number>(56)
+const bounding = reactive({
+  minTop: 0,
+  minLeft: 0,
+  maxTop: 0,
+  maxLeft: 0,
+})
+
+async function getBounding() {
+  const sysInfo = uni.getSystemInfoSync()
+  try {
+    const trigerInfo = await getRect('#trigger', false, proxy)
+    fabSize.value = trigerInfo.width || 56
+  } catch (error) {
+    console.log(error)
+  }
+
+  const { top = 16, left = 16, right = 16, bottom = 16 } = props.gap
+  screen.width = sysInfo.windowWidth
+  screen.height = isH5 ? sysInfo.windowTop + sysInfo.windowHeight : sysInfo.windowHeight
+  bounding.minTop = isH5 ? sysInfo.windowTop + top : top
+  bounding.minLeft = left
+  bounding.maxLeft = screen.width - fabSize.value - right
+  bounding.maxTop = screen.height - fabSize.value - bottom
+}
+
+function initPosition() {
+  const pos = props.position
+  const { minLeft, minTop, maxLeft, maxTop } = bounding
+  if (pos === 'left-top') {
+    top.value = minTop
+    left.value = minLeft
+  } else if (pos === 'right-top') {
+    top.value = minTop
+    left.value = maxLeft
+  } else if (pos === 'left-bottom') {
+    top.value = maxTop
+    left.value = minLeft
+  } else if (pos === 'right-bottom') {
+    top.value = maxTop
+    left.value = maxLeft
+  }
+}
+
+// 按下时坐标相对于元素的偏移量
+const touchOffset = reactive({ x: 0, y: 0 })
+const attractTransition = ref<boolean>(false)
+function handleTouchStart(e: TouchEvent) {
+  if (props.draggable === false) return
+
+  const touch = e.touches[0]
+  touchOffset.x = touch.clientX - left.value
+  touchOffset.y = touch.clientY - top.value
+  attractTransition.value = false
+}
+
+function handleTouchMove(e: TouchEvent) {
+  if (props.draggable === false) return
+
+  const touch = e.touches[0]
+  const { minLeft, minTop, maxLeft, maxTop } = bounding
+  let x = touch.clientX - touchOffset.x
+  let y = touch.clientY - touchOffset.y
+
+  if (x < minLeft) x = minLeft
+  else if (x > maxLeft) x = maxLeft
+
+  if (y < minTop) y = minTop
+  else if (y > maxTop) y = maxTop
+
+  top.value = y
+  left.value = x
+}
+
+function handleTouchEnd() {
+  if (props.draggable === false) return
+
+  const screenCenterX = screen.width / 2
+  const fabCenterX = left.value + fabSize.value / 2
+  attractTransition.value = true
+  if (fabCenterX < screenCenterX) {
+    left.value = bounding.minLeft
+    fabDirection.value = 'right'
+  } else {
+    left.value = bounding.maxLeft
+    fabDirection.value = 'left'
+  }
+}
+
+const rootStyle = computed(() => {
+  const style: CSSProperties = {
+    top: top.value + 'px',
+    left: left.value + 'px',
+    transition: attractTransition.value ? 'all ease 0.3s' : 'none',
+  }
+  if (isDef(props.zIndex)) {
+    style['z-index'] = props.zIndex
+  }
+  return `${objToStyle(style)};${props.customStyle}`
+})
+
+onMounted(() => {
+  if (queue && queue.pushToQueue) {
+    queue.pushToQueue(proxy)
+  } else {
+    pushToQueue(proxy)
+  }
+
+  nextTick(async () => {
+    await getBounding()
+    initPosition()
+    inited.value = true
+  })
+})
+
+onBeforeUnmount(() => {
+  if (queue && queue.removeFromQueue) {
+    queue.removeFromQueue(proxy)
+  } else {
+    removeFromQueue(proxy)
+  }
+})
+
+function handleClick() {
+  if (props.disabled) {
+    return
+  }
+  isActive.value = !isActive.value
+  emit('update:active', isActive.value)
+}
+
+function open() {
+  isActive.value = true
+  emit('update:active', true)
+}
+
+function close() {
+  isActive.value = false
+  emit('update:active', false)
+}
+
+defineExpose<FabExpose>({
+  open,
+  close,
+})
+</script>
+
+<style lang="scss" scoped>
+@import './index';
+</style>

package/components/wd-form/index.scss

@@ -0,0 +1,10 @@
+@import '../common/abstracts/variable';
+@import '../common/abstracts/mixin';
+
+.wot-theme-dark {
+  @include b(form) {
+  }
+}
+
+@include b(form) {
+}

package/components/wd-form/types.ts

@@ -0,0 +1,93 @@
+/*
+ * @Author: weisheng
+ * @Date: 2023-12-14 11:21:58
+ * @LastEditTime: 2024-03-18 12:50:41
+ * @LastEditors: weisheng
+ * @Description:
+ * @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 { baseProps, makeBooleanProp, makeRequiredProp } from '../common/props'
+
+export type FormProvide = {
+  props: {
+    model: Record<string, any>
+    rules?: FormRules
+    border?: boolean
+  }
+  errorMessages?: Record<string, string>
+}
+
+export const FORM_KEY: InjectionKey<FormProvide> = Symbol('wd-form')
+
+export type FormRules = {
+  [key: string]: FormItemRule[]
+}
+
+export type ErrorMessage = {
+  prop: string
+  message: string
+}
+
+export interface FormItemRule {
+  [key: string]: any
+  required: boolean
+  message: string
+  pattern?: RegExp
+  validator?: (
+    value: any,
+    rule: FormItemRuleWithoutValidator,
+  ) => boolean | Promise<string> | Promise<boolean> | Promise<void> | Promise<unknown>
+}
+
+export type FormItemRuleWithoutValidator = Omit<FormItemRule, 'validator'>
+
+export const formProps = {
+  ...baseProps,
+  /**
+   * 表单数据对象
+   */
+  model: makeRequiredProp(Object as PropType<Record<string, any>>),
+  /**
+   * 表单验证规则
+   */
+  rules: {
+    type: Object as PropType<FormRules>,
+    default: () => ({}),
+  },
+  /**
+   * 是否在输入时重置表单校验信息
+   */
+  resetOnChange: makeBooleanProp(true),
+  /**
+   * 错误提示类型
+   */
+  errorType: {
+    type: String as PropType<'toast' | 'message' | 'none'>,
+    default: 'message',
+  },
+}
+export type FormProps = ExtractPropTypes<typeof formProps>
+
+export type FormExpose = {
+  /**
+   * 表单校验
+   * @param prop 指定校验字段
+   */
+  validate: (prop?: string) => Promise<{
+    valid: boolean
+    errors: ErrorMessage[]
+  }>
+  /**
+   * 重置表单项的验证提示
+   */
+  reset: () => void
+}
+
+export type FormInstance = ComponentPublicInstance<FormProps, FormExpose>

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

@@ -0,0 +1,185 @@
+<template>
+  <view :class="`wd-form ${customClass}`" :style="customStyle">
+    <slot></slot>
+    <wd-toast v-if="props.errorType === 'toast'" selector="wd-form-toast" />
+  </view>
+</template>
+
+<script lang="ts">
+export default {
+  name: 'wd-form',
+  options: {
+    addGlobalClass: true,
+    virtualHost: true,
+    styleIsolation: 'shared',
+  },
+}
+</script>
+
+<script lang="ts" setup>
+import { reactive, watch } from 'vue'
+import { deepClone, getPropByPath, isDef, isPromise } 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 props = defineProps(formProps)
+
+const { children, linkChildren } = useChildren(FORM_KEY)
+const errorMessages = reactive<Record<string, string>>({})
+
+linkChildren({ props, errorMessages })
+
+watch(
+  () => props.model,
+  () => {
+    if (props.resetOnChange) {
+      clearMessage()
+    }
+  },
+  { immediate: true, deep: true },
+)
+
+/**
+ * 表单校验
+ * @param prop 指定校验字段
+ */
+async function validate(prop?: 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)
+    if (rules && rules.length > 0) {
+      for (const rule of rules) {
+        if (rule.required && (!isDef(value) || value === '')) {
+          errors.push({
+            prop,
+            message: rule.message,
+          })
+          valid = false
+          break
+        }
+        if (rule.pattern && !rule.pattern.test(value)) {
+          errors.push({
+            prop,
+            message: rule.message,
+          })
+          valid = false
+          break
+        }
+        const { validator, ...ruleWithoutValidator } = rule
+        if (validator) {
+          const result = validator(value, ruleWithoutValidator)
+          if (isPromise(result)) {
+            promises.push(
+              result
+                .then((res: any) => {
+                  if (typeof res === 'string') {
+                    errors.push({
+                      prop,
+                      message: res,
+                    })
+                    valid = false
+                  } else if (typeof res === 'boolean' && !res) {
+                    errors.push({
+                      prop,
+                      message: rule.message,
+                    })
+                    valid = false
+                  }
+                })
+                .catch((error) => {
+                  errors.push({
+                    prop,
+                    message: error || rule.message,
+                  })
+                  valid = false
+                }),
+            )
+          } else {
+            if (!result) {
+              errors.push({
+                prop,
+                message: rule.message,
+              })
+              valid = false
+            }
+          }
+        }
+      }
+    }
+  }
+
+  await Promise.all(promises)
+
+  errors.forEach((error) => {
+    showMessage(error)
+  })
+
+  if (valid) {
+    if (prop) {
+      clearMessage(prop)
+    } else {
+      clearMessage()
+    }
+  }
+
+  return {
+    valid,
+    errors,
+  }
+}
+
+// 合并子组件的rules到父组件的rules
+function getMergeRules() {
+  const mergedRules: FormRules = deepClone(props.rules)
+  children.forEach((item) => {
+    if (isDef(item.prop) && isDef(item.rules) && item.rules.length) {
+      if (mergedRules[item.prop]) {
+        mergedRules[item.prop] = [...mergedRules[item.prop], ...item.rules]
+      } else {
+        mergedRules[item.prop] = item.rules
+      }
+    }
+  })
+  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 clearMessage(prop?: string) {
+  if (prop) {
+    errorMessages[prop] = ''
+  } else {
+    Object.keys(errorMessages).forEach((key) => {
+      errorMessages[key] = ''
+    })
+  }
+}
+
+/**
+ * 重置表单项的验证提示
+ */
+function reset() {
+  clearMessage()
+}
+
+defineExpose<FormExpose>({ validate, reset })
+</script>
+
+<style lang="scss" scoped>
+@import './index.scss';
+</style>