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

package/composables/index.ts

@@ -0,0 +1,12 @@
+export { useCell } from './useCell'
+export { useChildren, flattenVNodes, sortChildren } from './useChildren'
+export { useCountDown } from './useCountDown'
+export { useLockScroll } from './useLockScroll'
+export { useParent } from './useParent'
+export { usePopover } from './usePopover'
+export { useQueue } from './useQueue'
+export { useRaf } from './useRaf'
+export { useTouch } from './useTouch'
+export { useTranslate } from './useTranslate'
+export { useUpload } from './useUpload'
+export { useConfigProvider } from './useConfigProvider'

package/composables/useCell.ts

@@ -0,0 +1,34 @@
+import { computed } from 'vue'
+import { useParent } from './useParent'
+import { CELL_GROUP_KEY } from '../components/wd-cell-group/types'
+import type { CellLayout, CellSize, CellValueAlign } from '../components/wd-cell/types'
+
+export function useCell() {
+  const { parent: cellGroup, index } = useParent(CELL_GROUP_KEY)
+
+  const border = computed(() => {
+    return cellGroup?.value && cellGroup.value.props.border && index.value
+  })
+
+  const center = computed(() => {
+    return cellGroup.value?.props.center
+  })
+
+  const size = computed<CellSize | undefined>(() => {
+    return cellGroup.value?.props.size
+  })
+
+  const titleWidth = computed(() => {
+    return cellGroup.value?.props.titleWidth
+  })
+
+  const layout = computed<CellLayout | undefined>(() => {
+    return cellGroup.value?.props.layout || undefined
+  })
+
+  const valueAlign = computed<CellValueAlign | undefined>(() => {
+    return cellGroup.value?.props.valueAlign || undefined
+  })
+
+  return { border, center, size, titleWidth, layout, valueAlign }
+}

package/composables/useChildren.ts

@@ -0,0 +1,120 @@
+import {
+  provide,
+  reactive,
+  getCurrentInstance,
+  type VNode,
+  type InjectionKey,
+  type VNodeNormalizedChildren,
+  type ComponentPublicInstance,
+  type ComponentInternalInstance
+} from 'vue'
+
+function isVNode(value: any): value is VNode {
+  return value ? value.__v_isVNode === true : false
+}
+
+export function flattenVNodes(children: VNode) {
+  const result: VNode[] = []
+
+  const traverse = (children: VNode | VNodeNormalizedChildren) => {
+    const vNode = Array.isArray(children) ? children : [children]
+    vNode.forEach((child) => {
+      if (Array.isArray(child)) {
+        traverse(child)
+      } else if (isVNode(child) && child.component?.subTree) {
+        result.push(child)
+        traverse(child.component.subTree)
+      } else if (isVNode(child) && Array.isArray(child.children)) {
+        traverse(child.children)
+      } else if (isVNode(child)) {
+        result.push(child)
+      }
+    })
+  }
+
+  traverse(children)
+
+  return result
+}
+
+const findVNodeIndex = (vnodes: VNode[], vnode: VNode) => {
+  const index = vnodes.indexOf(vnode)
+  if (index === -1) {
+    return vnodes.findIndex((item) => vnode.key !== undefined && vnode.key !== null && item.type === vnode.type && item.key === vnode.key)
+  }
+  return index
+}
+
+export function sortChildren(
+  parent: ComponentInternalInstance,
+  publicChildren: ComponentPublicInstance[],
+  internalChildren: ComponentInternalInstance[]
+) {
+  const vnodes = parent && parent.subTree && parent.subTree.children ? flattenVNodes(parent.subTree) : []
+  internalChildren.sort((a, b) => findVNodeIndex(vnodes, a.vnode) - findVNodeIndex(vnodes, b.vnode))
+
+  const orderedPublicChildren = internalChildren.map((item) => item.proxy!)
+
+  publicChildren.sort((a, b) => {
+    const getIndex = (comp: ComponentPublicInstance) => {
+      const uid = comp.$.uid
+      return orderedPublicChildren.findIndex((i) => i.$.uid === uid)
+    }
+
+    const indexA = getIndex(a)
+    const indexB = getIndex(b)
+    return indexA - indexB
+  })
+}
+
+export function useChildren<
+  // eslint-disable-next-line
+  Child extends ComponentPublicInstance = ComponentPublicInstance<{}, any>,
+  ProvideValue = never
+>(key: InjectionKey<ProvideValue>) {
+  const publicChildren: Child[] = reactive([])
+  const internalChildren: ComponentInternalInstance[] = reactive([])
+  const parent = getCurrentInstance()!
+
+  const linkChildren = (value?: ProvideValue) => {
+    const link = (child: ComponentInternalInstance) => {
+      if (child.proxy) {
+        if (internalChildren.indexOf(child) === -1) {
+          // #ifdef MP-ALIPAY
+          internalChildren.unshift(child)
+          publicChildren.unshift(child.proxy as Child)
+          // #endif
+          // #ifndef MP-ALIPAY
+          internalChildren.push(child)
+          publicChildren.push(child.proxy as Child)
+          // #endif
+          sortChildren(parent, publicChildren, internalChildren)
+        }
+      }
+    }
+
+    const unlink = (child: ComponentInternalInstance) => {
+      const index = internalChildren.indexOf(child)
+      publicChildren.splice(index, 1)
+      internalChildren.splice(index, 1)
+    }
+
+    provide(
+      key,
+      Object.assign(
+        {
+          link,
+          unlink,
+          children: publicChildren,
+          internalChildren
+        },
+        value
+      )
+    )
+  }
+
+  return {
+    children: publicChildren,
+    linkChildren
+  }
+}

package/composables/useConfigProvider.ts

@@ -0,0 +1,45 @@
+import { computed, provide, unref, type Ref } from 'vue'
+import { type ConfigProviderThemeVars } from '../components/wd-config-provider/types'
+import { objToStyle } from '../common/util'
+
+export const USE_CONFIG_PROVIDER_KEY = '__CONFIG_PROVIDER__'
+
+export const kebabCase = (str: string): string => {
+  str = str.replace(str.charAt(0), str.charAt(0).toLocaleLowerCase())
+  return str
+    .replace(/([a-z])([A-Z])/g, (_, p1, p2) => p1 + '-' + p2.toLowerCase())
+    .replace(/([a-zA-Z])(\d)/g, '$1-$2')
+    .replace(/(\d)([a-zA-Z])/g, '$1-$2')
+}
+
+export const mapThemeVarsToCSSVars = (themeVars: Record<string, string>) => {
+  if (!themeVars) return
+  const cssVars: Record<string, string> = {}
+  Object.keys(themeVars).forEach((key) => {
+    cssVars[`--wot-${kebabCase(key)}`] = themeVars[key]
+  })
+
+  return cssVars
+}
+
+export function useConfigProvider({
+  themeVars,
+  theme
+}: {
+  themeVars?: ConfigProviderThemeVars | Ref<ConfigProviderThemeVars>
+  theme?: string | Ref<string>
+}) {
+  const themeStyle = computed(() => {
+    const styleObj = mapThemeVarsToCSSVars(unref(themeVars) || {})
+    return styleObj ? `${objToStyle(styleObj)}` : ''
+  })
+
+  const themeValue = computed(() => {
+    return unref(theme) || 'light'
+  })
+
+  provide(USE_CONFIG_PROVIDER_KEY, {
+    themeStyle,
+    theme: themeValue
+  })
+}

package/composables/useCountDown.ts

@@ -0,0 +1,138 @@
+import { ref, computed, onBeforeUnmount } from 'vue'
+import { isDef } from '../common/util'
+import { useRaf } from './useRaf'
+
+// 定义倒计时时间的数据结构
+export type CurrentTime = {
+  days: number
+  hours: number
+  total: number
+  minutes: number
+  seconds: number
+  milliseconds: number
+}
+
+// 定义倒计时的配置项
+export type UseCountDownOptions = {
+  time: number // 倒计时总时间，单位为毫秒
+  millisecond?: boolean // 是否开启毫秒级倒计时，默认为 false
+  onChange?: (current: CurrentTime) => void // 倒计时每次变化时的回调函数
+  onFinish?: () => void // 倒计时结束时的回调函数
+}
+
+// 定义常量
+const SECOND = 1000
+const MINUTE = 60 * SECOND
+const HOUR = 60 * MINUTE
+const DAY = 24 * HOUR
+
+// 将时间转换为倒计时数据结构
+function parseTime(time: number): CurrentTime {
+  const days = Math.floor(time / DAY)
+  const hours = Math.floor((time % DAY) / HOUR)
+  const minutes = Math.floor((time % HOUR) / MINUTE)
+  const seconds = Math.floor((time % MINUTE) / SECOND)
+  const milliseconds = Math.floor(time % SECOND)
+
+  return {
+    total: time,
+    days,
+    hours,
+    minutes,
+    seconds,
+    milliseconds
+  }
+}
+
+// 判断两个时间是否在同一秒内
+function isSameSecond(time1: number, time2: number): boolean {
+  return Math.floor(time1 / 1000) === Math.floor(time2 / 1000)
+}
+
+// 定义 useCountDown 函数
+export function useCountDown(options: UseCountDownOptions) {
+  let endTime: number // 结束时间
+  let counting: boolean // 是否计时中
+
+  const { start: startRaf, cancel: cancelRaf } = useRaf(tick)
+
+  const remain = ref(options.time) // 剩余时间
+  const current = computed(() => parseTime(remain.value)) // 当前倒计时数据
+
+  // 暂停倒计时
+  const pause = () => {
+    counting = false
+    cancelRaf()
+  }
+
+  // 获取当前剩余时间
+  const getCurrentRemain = () => Math.max(endTime - Date.now(), 0)
+
+  // 设置剩余时间
+  const setRemain = (value: number) => {
+    remain.value = value
+    isDef(options.onChange) && options.onChange(current.value)
+    if (value === 0) {
+      pause()
+      isDef(options.onFinish) && options.onFinish()
+    }
+  }
+
+  // 每毫秒更新一次倒计时
+  const microTick = () => {
+    if (counting) {
+      setRemain(getCurrentRemain())
+      if (remain.value > 0) {
+        startRaf()
+      }
+    }
+  }
+
+  // 每秒更新一次倒计时
+  const macroTick = () => {
+    if (counting) {
+      const remainRemain = getCurrentRemain()
+      if (!isSameSecond(remainRemain, remain.value) || remainRemain === 0) {
+        setRemain(remainRemain)
+      }
+
+      if (remain.value > 0) {
+        startRaf()
+      }
+    }
+  }
+
+  // 根据配置项选择更新方式
+  function tick() {
+    if (options.millisecond) {
+      microTick()
+    } else {
+      macroTick()
+    }
+  }
+
+  // 开始倒计时
+  const start = () => {
+    if (!counting) {
+      endTime = Date.now() + remain.value
+      counting = true
+      startRaf()
+    }
+  }
+
+  // 重置倒计时
+  const reset = (totalTime: number = options.time) => {
+    pause()
+    remain.value = totalTime
+  }
+
+  // 在组件卸载前暂停倒计时
+  onBeforeUnmount(pause)
+
+  return {
+    start,
+    pause,
+    reset,
+    current
+  }
+}

package/composables/useDeviceInfo.ts

@@ -0,0 +1,136 @@
+import { ref, computed } from 'vue'
+
+interface SafeArea {
+  left: number
+  right: number
+  top: number
+  bottom: number
+  width: number
+  height: number
+}
+
+interface CapsuleInfo {
+  width: number
+  height: number
+  left: number
+  right: number
+  top: number
+  bottom: number
+}
+
+const safeArea = ref<SafeArea>({
+  left: 0,
+  right: 0,
+  top: 0,
+  bottom: 0,
+  width: 0,
+  height: 0
+})
+
+const capsule = ref<CapsuleInfo>({
+  width: 0,
+  height: 0,
+  left: 0,
+  right: 0,
+  top: 0,
+  bottom: 0
+})
+
+const statusBarHeight = ref<number>(0)
+const screenWidth = ref<number>(0)
+const screenHeight = ref<number>(0)
+const windowWidth = ref<number>(0)
+const windowHeight = ref<number>(0)
+const initialized = ref<boolean>(false)
+
+/**
+ * 初始化设备信息
+ */
+function init() {
+  try {
+    // 获取系统信息
+    const systemInfo = uni.getSystemInfoSync()
+    // 更新安全区域信息
+    if (systemInfo.safeArea) {
+      safeArea.value = {
+        left: systemInfo.safeArea.left,
+        right: systemInfo.screenWidth - systemInfo.safeArea.right,
+        top: systemInfo.safeArea.top,
+        bottom: systemInfo.safeArea.bottom,
+        width: systemInfo.safeArea.width,
+        height: systemInfo.safeArea.height
+      }
+    }
+
+    // 更新状态栏高度
+    statusBarHeight.value = systemInfo.statusBarHeight || 0
+
+    // 更新屏幕尺寸
+    screenWidth.value = systemInfo.screenWidth
+    screenHeight.value = systemInfo.screenHeight
+    windowWidth.value = systemInfo.windowWidth
+    windowHeight.value = systemInfo.windowHeight
+
+    // 获取胶囊按钮信息
+    // #ifdef MP-WEIXIN || MP-QQ || MP-TOUTIAO
+    const capsuleInfo = uni.getMenuButtonBoundingClientRect()
+    if (capsuleInfo) {
+      capsule.value = {
+        width: capsuleInfo.width,
+        height: capsuleInfo.height,
+        left: capsuleInfo.left,
+        right: systemInfo.screenWidth - capsuleInfo.right,
+        top: capsuleInfo.top,
+        bottom: capsuleInfo.bottom
+      }
+    }
+    // #endif
+
+    initialized.value = true
+  } catch (error) {
+    console.error('获取设备信息失败', error)
+  }
+}
+
+/**
+ * 更新设备信息
+ */
+function update() {
+  init()
+}
+
+export function useDeviceInfo() {
+  // 确保至少初始化一次
+  if (!initialized.value) {
+    init()
+  }
+
+  // 获取底部安全区域高度
+  const safeAreaBottomHeight = computed(() => screenHeight.value - safeArea.value.bottom)
+
+  // 获取顶部安全区域高度（包含状态栏）
+  const safeAreaTopHeight = computed(() => safeArea.value.top)
+
+  // 获取导航栏高度（不包含状态栏）
+  const navBarHeight = computed(() => capsule.value.height + (capsule.value.top - statusBarHeight.value) * 2)
+
+  // 获取导航栏整体高度（包含状态栏）
+  const navBarTotalHeight = computed(() => navBarHeight.value + statusBarHeight.value)
+
+  return {
+    safeArea,
+    capsule,
+    statusBarHeight,
+    screenWidth,
+    screenHeight,
+    windowWidth,
+    windowHeight,
+    initialized,
+    safeAreaBottomHeight,
+    safeAreaTopHeight,
+    navBarHeight,
+    navBarTotalHeight,
+    init,
+    update
+  }
+}

package/composables/useLockScroll.ts

@@ -0,0 +1,37 @@
+import { onBeforeUnmount, onDeactivated, ref, watch } from 'vue'
+
+export function useLockScroll(shouldLock: () => boolean) {
+  const scrollLockCount = ref(0)
+
+  const lock = () => {
+    if (scrollLockCount.value === 0) {
+      document.getElementsByTagName('body')[0].style.overflow = 'hidden'
+    }
+    scrollLockCount.value++
+  }
+
+  const unlock = () => {
+    if (scrollLockCount.value > 0) {
+      scrollLockCount.value--
+      if (scrollLockCount.value === 0) {
+        document.getElementsByTagName('body')[0].style.overflow = ''
+      }
+    }
+  }
+
+  const destroy = () => {
+    shouldLock() && unlock()
+  }
+
+  watch(shouldLock, (value) => {
+    value ? lock() : unlock()
+  })
+
+  onDeactivated(destroy)
+  onBeforeUnmount(destroy)
+
+  return {
+    lock,
+    unlock
+  }
+}

package/composables/useParent.ts

@@ -0,0 +1,51 @@
+import {
+  ref,
+  shallowRef,
+  inject,
+  computed,
+  onUnmounted,
+  type InjectionKey,
+  getCurrentInstance,
+  type ComponentPublicInstance,
+  type ComponentInternalInstance,
+  onMounted,
+  type Ref
+} from 'vue'
+
+type ParentProvide<T> = T & {
+  link(child: ComponentInternalInstance): void
+  unlink(child: ComponentInternalInstance): void
+  children: ComponentPublicInstance[]
+  internalChildren: ComponentInternalInstance[]
+}
+
+type UseParentResult<T> = {
+  parent: Ref<ParentProvide<T> | null>
+  index: Ref<number>
+}
+
+export function useParent<T>(key: InjectionKey<ParentProvide<T>>): UseParentResult<T> {
+  const result: UseParentResult<T> = {
+    parent: shallowRef<ParentProvide<T> | null>(null),
+    index: ref<number>(-1)
+  }
+  // #ifdef MP-TOUTIAO
+  onMounted(() => {
+    // #endif
+    result.parent.value = inject(key, null)
+
+    if (result.parent.value) {
+      const instance = getCurrentInstance()!
+      const { link, unlink, internalChildren } = result.parent.value
+
+      link(instance)
+      onUnmounted(() => unlink(instance))
+
+      result.index = computed(() => internalChildren.indexOf(instance))
+    }
+    // #ifdef MP-TOUTIAO
+  })
+  // #endif
+
+  return result
+}