@wot-ui/ui 1.0.0 → 2.0.0-alpha.4

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

@@ -0,0 +1,322 @@
+<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">
+      <slot name="trigger" :disabled="disabled">
+        <wd-button
+          @click="handleClick"
+          :icon="isActive ? activeIcon : inactiveIcon"
+          custom-class="wd-fab__trigger"
+          round
+          :type="type"
+          :disabled="disabled"
+        ></wd-button>
+      </slot>
+    </view>
+    <wd-transition
+      v-if="expandable"
+      :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"
+    >
+      <slot></slot>
+    </wd-transition>
+  </view>
+</template>
+
+<script lang="ts">
+export default {
+  name: 'wd-fab',
+  options: {
+    // #ifndef MP-TOUTIAO
+    virtualHost: true,
+    // #endif
+    addGlobalClass: true,
+    styleIsolation: 'shared'
+  }
+}
+</script>
+
+<script lang="ts" setup>
+import wdButton from '../wd-button/wd-button.vue'
+import wdTransition from '../wd-transition/wd-transition.vue'
+import { type CSSProperties, computed, ref, watch, inject, getCurrentInstance, onBeforeUnmount, onMounted, nextTick } from 'vue'
+import { getRect, getSystemInfo, 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'
+import { useRaf } from '../../composables/useRaf'
+
+const props = defineProps(fabProps)
+const emit = defineEmits(['update:active', 'click'])
+
+/** 是否完成初始化 */
+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 = reactive({ width: 56, height: 56 })
+/** 浮动按钮可移动边界 */
+const bounding = reactive({
+  minTop: 0,
+  minLeft: 0,
+  maxTop: 0,
+  maxLeft: 0
+})
+
+/**
+ * 获取浮动按钮和屏幕的边界信息
+ */
+async function getBounding() {
+  const sysInfo = getSystemInfo()
+  try {
+    const trigerInfo = await getRect('#trigger', false, proxy)
+    fabSize.width = trigerInfo.width || 56
+    fabSize.height = trigerInfo.height || 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.width - right
+  bounding.maxTop = screen.height - fabSize.height - bottom
+}
+
+/**
+ * 根据 position 属性初始化浮动按钮位置
+ */
+function initPosition() {
+  const pos = props.position
+  const { minLeft, minTop, maxLeft, maxTop } = bounding
+  const centerY = (maxTop + minTop) / 2
+  const centerX = (maxLeft + minLeft) / 2
+
+  switch (pos) {
+    case 'left-top':
+      top.value = minTop
+      left.value = minLeft
+      break
+    case 'right-top':
+      top.value = minTop
+      left.value = maxLeft
+      break
+    case 'left-bottom':
+      top.value = maxTop
+      left.value = minLeft
+      break
+    case 'right-bottom':
+      top.value = maxTop
+      left.value = maxLeft
+      break
+    case 'left-center':
+      top.value = centerY
+      left.value = minLeft
+      break
+    case 'right-center':
+      top.value = centerY
+      left.value = maxLeft
+      break
+    case 'top-center':
+      top.value = minTop
+      left.value = centerX
+      break
+    case 'bottom-center':
+      top.value = maxTop
+      left.value = centerX
+      break
+  }
+}
+
+/** 按下时触摸点相对于元素的偏移量 */
+const touchOffset = reactive({ x: 0, y: 0 })
+/** 是否启用吸附动画 */
+const attractTransition = ref<boolean>(false)
+
+/**
+ * 处理触摸开始事件
+ * @param {TouchEvent} e 触摸事件对象
+ */
+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
+}
+
+/**
+ * 处理触摸移动事件，实现拖动功能
+ * @param {TouchEvent} e 触摸事件对象
+ */
+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.width / 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)
+  }
+
+  const { start } = useRaf(async () => {
+    await getBounding()
+    initPosition()
+    inited.value = true
+  })
+  start()
+})
+
+onBeforeUnmount(() => {
+  if (queue && queue.removeFromQueue) {
+    queue.removeFromQueue(proxy)
+  } else {
+    removeFromQueue(proxy)
+  }
+})
+
+/**
+ * 处理点击事件
+ */
+function handleClick() {
+  if (props.disabled) {
+    return
+  }
+  if (!props.expandable) {
+    emit('click')
+    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">
+@use './index.scss';
+</style>

package/components/wd-floating-panel/index.scss

@@ -0,0 +1,73 @@
+@use '../../styles/mixin/mixin.scss' as *;
+@use '../../styles/variable.scss' as *;
+
+// 面板背景色
+$floating-panel-bg: var(--wot-floating-panel-bg, $filled-oppo) !default;
+// 面板圆角
+$floating-panel-radius: var(--wot-floating-panel-radius, $radius-large) !default;
+// 面板 z-index
+$floating-panel-z-index: var(--wot-floating-panel-z-index, 99) !default;
+// 头部高度
+$floating-panel-header-height: var(--wot-floating-panel-header-height, $n-32) !default;
+// 拖拽条宽度
+$floating-panel-bar-width: var(--wot-floating-panel-bar-width, $n-36) !default;
+// 拖拽条高度
+$floating-panel-bar-height: var(--wot-floating-panel-bar-height, $n-4) !default;
+// 拖拽条背景色
+$floating-panel-bar-bg: var(--wot-floating-panel-bar-bg, $filled-strong) !default;
+// 拖拽条圆角
+$floating-panel-bar-radius: var(--wot-floating-panel-bar-radius, $radius-main) !default;
+// 内容区域背景色
+$floating-panel-content-bg: var(--wot-floating-panel-content-bg, $filled-oppo) !default;
+
+@include b(floating-panel) {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  z-index: $floating-panel-z-index;
+  display: flex;
+  flex-direction: column;
+  box-sizing: border-box;
+  width: 100vw;
+  border-top-left-radius: $floating-panel-radius;
+  border-top-right-radius: $floating-panel-radius;
+  background-color: $floating-panel-bg;
+  touch-action: none;
+  will-change: transform;
+  @include when(safe) {
+    padding-bottom: constant(safe-area-inset-bottom);
+    padding-bottom: env(safe-area-inset-bottom);
+  }
+
+  &::after {
+    position: absolute;
+    bottom: -100vh;
+    display: block;
+    width: 100vw;
+    height: 100vh;
+    content: '';
+    background-color: inherit;
+  }
+
+  @include e(header) {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: $floating-panel-header-height;
+    cursor: grab;
+    user-select: none;
+    &-bar {
+      width: $floating-panel-bar-width;
+      height: $floating-panel-bar-height;
+      background-color: $floating-panel-bar-bg;
+      border-radius: $floating-panel-bar-radius;
+    }
+  }
+
+  @include e(content) {
+    flex: 1;
+    min-width: 0;
+    min-height: 0;
+    background-color: $floating-panel-content-bg;
+  }
+}

package/components/wd-floating-panel/type.ts

@@ -0,0 +1,32 @@
+import type { ExtractPropTypes } from 'vue'
+import { baseProps, makeArrayProp, makeBooleanProp, makeNumberProp, makeNumericProp, truthProp } from '../../common/props'
+
+export const floatingPanelProps = {
+  ...baseProps,
+  /**
+   * 面板的显示高度
+   */
+  height: makeNumberProp(0),
+  /**
+   * 设置自定义锚点，默认值 [100, windowHeight * 0.6]
+   */
+  anchors: makeArrayProp<number>(),
+  /**
+   * 弹出面板是否设置底部安全距离（iphone X 类型的机型）
+   */
+  safeAreaInsetBottom: makeBooleanProp(false),
+  /**
+   * 是否显示滚动条，默认值为 true
+   */
+  showScrollbar: truthProp,
+  /**
+   * 动画时长，单位毫秒，默认值为 300ms
+   */
+  duration: makeNumericProp(300),
+  /**
+   * 是否允许内容区容器拖拽，默认值为 true
+   */
+  contentDraggable: truthProp
+}
+
+export type FloatingPanelProps = ExtractPropTypes<typeof floatingPanelProps>

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

@@ -0,0 +1,142 @@
+<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: {
+    // #ifndef MP-TOUTIAO
+    virtualHost: true,
+    // #endif
+    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">
+@use './index.scss';
+</style>

package/components/wd-form/adapters/zod.ts

@@ -0,0 +1,56 @@
+import type { FormSchema, FormSchemaIssue } from '../types'
+
+type ZodLikeIssue = {
+  path?: PropertyKey[]
+  message?: string
+  code?: string
+  received?: string
+}
+
+type ZodLikeSafeParseResult = {
+  success: boolean
+  error?: {
+    issues?: ZodLikeIssue[]
+  }
+}
+
+type ZodLikeParseContext = {
+  jitless?: boolean
+}
+
+type ZodLikeSchema = {
+  safeParse: (model: Record<string, any>, context?: ZodLikeParseContext) => ZodLikeSafeParseResult
+}
+
+type ZodAdapterOptions = {
+  isRequired?: FormSchema['isRequired']
+}
+
+function normalizeIssues(result: ZodLikeSafeParseResult): FormSchemaIssue[] {
+  if (result.success || !result.error?.issues) return []
+  return result.error.issues
+    .filter((issue) => Array.isArray(issue.path) && issue.path.length > 0 && issue.message)
+    .map((issue) => ({
+      path: (issue.path as PropertyKey[]).map((item) => (typeof item === 'number' ? item : String(item))),
+      message: issue.message as string
+    }))
+}
+
+export function zodAdapter(schema: ZodLikeSchema, options: ZodAdapterOptions = {}): FormSchema {
+  const formSchema: FormSchema = {
+    validate(model) {
+      return normalizeIssues(
+        schema.safeParse(
+          model,
+          // #ifndef H5
+          { jitless: true }
+          // #endif
+        )
+      )
+    }
+  }
+  if (options.isRequired) {
+    formSchema.isRequired = options.isRequired
+  }
+  return formSchema
+}

package/components/wd-form/index.ts

@@ -0,0 +1,2 @@
+export { zodAdapter } from './adapters/zod'
+export type { FormSchema, FormSchemaIssue, FormValidateEvent, FormValidateTrigger } from './types'