@opentiny/vue-hooks 3.21.0 → 3.22.0

package/src/useRelation.ts

@@ -0,0 +1,130 @@
+import { noop } from '@opentiny/utils'
+import { onMountedOrActivated as createHook } from './useEventListener'
+
+/**
+ * 处理组件嵌套的组合式 API
+ * relationKey 关系树上的父子组件使用同一个关系名称
+ * relationContainer 子组件顺序由关系容器确定，由根组件提供，可以不使用，子组件顺序就是组件创建顺序
+ * onChange 子组件顺序改变后的回调处理，由根组件提供，可以不使用
+ * childrenKey 在组件关系树上的所有实例中定义的子组件引用名称，默认是 instanceChildren
+ * delivery 根组件向下分发的内容
+ */
+export const useRelation =
+  ({
+    computed,
+    getCurrentInstance,
+    inject,
+    markRaw,
+    nextTick,
+    onMounted,
+    onActivated,
+    onUnmounted,
+    provide,
+    reactive,
+    toRef
+  }) =>
+  ({ relationKey, relationContainer, onChange, childrenKey, delivery } = {}) => {
+    if (!relationKey) {
+      throw new Error('[TINY Error]<relationKey> must exist.')
+    }
+
+    const instance = getCurrentInstance()
+    const state = reactive({ children: [], indexInParent: -1 })
+    const injectValue = inject(relationKey, null)
+    // 收集所有的子组件刷新回调
+    let callbacks = []
+
+    if (injectValue) {
+      const { link, unlink, callbacks: injectCbs, childrenKey: injectKey, delivery: injectDelivery } = injectValue
+
+      callbacks = injectCbs
+      childrenKey = childrenKey || injectKey || 'instanceChildren'
+      delivery = injectDelivery
+
+      state.indexInParent = link(instance)
+
+      onUnmounted(() => unlink(instance))
+    } else {
+      childrenKey = childrenKey || 'instanceChildren'
+
+      const onMountedOrActivated = createHook({ onMounted, onActivated, nextTick })
+      const changeHandler = onChange ? () => nextTick(onChange) : noop
+
+      let relationMO
+
+      nextTick(() => {
+        // 在 mounted 之后，如果表示子组件关系的 dom 元素存在，就创建 MutationObserver 观察它的子树改变
+        const targetNode = typeof relationContainer === 'function' ? relationContainer() : relationContainer
+
+        if (targetNode) {
+          relationMO = new MutationObserver((mutationList, observer) => {
+            const flattenNodes = []
+            // 对关系容器 dom 子树进行平铺处理
+            flattenChildNodes(targetNode.childNodes, flattenNodes)
+            // 使用平铺的 dom 子树更新子组件顺序
+            callbacks.forEach((callback) => callback(flattenNodes, mutationList, observer))
+            // 执行后续组件 change 处理
+            changeHandler()
+          })
+
+          relationMO.observe(targetNode, { attributes: true, childList: true, subtree: true })
+        }
+      })
+
+      onMountedOrActivated(() => changeHandler())
+
+      onUnmounted(() => {
+        if (relationMO) {
+          relationMO.disconnect()
+          relationMO = null
+        }
+
+        callbacks = null
+      })
+    }
+
+    const link = (child) => {
+      const childPublic = child.proxy
+
+      state.children.push(markRaw(childPublic))
+
+      return computed(() => state.children.indexOf(childPublic))
+    }
+
+    const unlink = (child) => {
+      const index = state.children.indexOf(child.proxy)
+
+      if (index > -1) {
+        state.children.splice(index, 1)
+      }
+    }
+
+    // 刷新子组件顺序
+    callbacks.push((flattenNodes) => sortPublicInstances(state.children, flattenNodes))
+
+    provide(relationKey, { link, unlink, callbacks, childrenKey, delivery })
+
+    // 在 Public Instance 上定义子组件数组，并且在组件卸载时移除
+    Object.defineProperty(instance.proxy, childrenKey, { configurable: true, get: () => state.children })
+
+    onUnmounted(() => delete instance.proxy[childrenKey])
+
+    // 返回子组件数组 ref、在父级中的位置索引 ref 和接收到的分发内容
+    return { children: toRef(state, 'children'), index: toRef(state, 'indexInParent'), delivery }
+  }
+
+const flattenChildNodes = (childNodes, result) => {
+  if (childNodes.length) {
+    childNodes.forEach((childNode) => {
+      result.push(childNode)
+
+      if (childNode.childNodes) {
+        flattenChildNodes(childNode.childNodes, result)
+      }
+    })
+  }
+}
+
+const sortPublicInstances = (instances, flattenNodes) => {
+  instances.sort((a, b) => flattenNodes.indexOf(a.$el) - flattenNodes.indexOf(b.$el))
+}

package/src/useTouch.ts

@@ -0,0 +1,74 @@
+const TAP_OFFSET = 5
+
+const getDirection = (x, y) => {
+  if (x > y) return 'horizontal'
+  if (y > x) return 'vertical'
+  return ''
+}
+
+const touchEvent = (event) => event.touches[0]
+
+export const useTouch = (ref) => () => {
+  const startX = ref(0)
+  const startY = ref(0)
+  const deltaX = ref(0)
+  const deltaY = ref(0)
+  const offsetX = ref(0)
+  const offsetY = ref(0)
+  const direction = ref('')
+  const isTap = ref(true)
+
+  const isVertical = () => direction.value === 'vertical'
+  const isHorizontal = () => direction.value === 'horizontal'
+
+  const reset = () => {
+    deltaX.value = 0
+    deltaY.value = 0
+    offsetX.value = 0
+    offsetY.value = 0
+    direction.value = ''
+    isTap.value = true
+  }
+
+  const start = (event) => {
+    reset()
+    const touch = touchEvent(event)
+    startX.value = touch.clientX
+    startY.value = touch.clientY
+  }
+
+  const move = (event) => {
+    const touch = touchEvent(event)
+    // safari back will set clientX to negative number
+    deltaX.value = (touch.clientX < 0 ? 0 : touch.clientX) - startX.value
+    deltaY.value = touch.clientY - startY.value
+    offsetX.value = Math.abs(deltaX.value)
+    offsetY.value = Math.abs(deltaY.value)
+
+    // lock direction when distance is greater than a certain value
+    const LOCK_DIRECTION_DISTANCE = 10
+    if (!direction.value || (offsetX.value < LOCK_DIRECTION_DISTANCE && offsetY.value < LOCK_DIRECTION_DISTANCE)) {
+      direction.value = getDirection(offsetX.value, offsetY.value)
+    }
+
+    if (isTap.value && (offsetX.value > TAP_OFFSET || offsetY.value > TAP_OFFSET)) {
+      isTap.value = false
+    }
+  }
+
+  return {
+    move,
+    start,
+    reset,
+    isVertical,
+    isHorizontal,
+    startX,
+    startY,
+    deltaX,
+    deltaY,
+    offsetX,
+    offsetY,
+    direction,
+    isTap
+  }
+}

package/src/useUserAgent.ts

@@ -0,0 +1,18 @@
+import { isServer } from '@opentiny/utils'
+
+function getIsIOS() {
+  if (isServer) return false
+  return (
+    window.navigator &&
+    window.navigator.userAgent &&
+    (/iP(?:ad|hone|od)/.test(window.navigator.userAgent) ||
+      // The new iPad Pro Gen3 does not identify itself as iPad, but as Macintosh.
+      // https://github.com/vueuse/vueuse/issues/3577
+      (window.navigator.maxTouchPoints > 2 && /iPad|Macintosh/.test(window.navigator.userAgent)))
+  )
+}
+
+export const useUserAgent = () => {
+  const isIOS = getIsIOS()
+  return { isIOS }
+}

package/src/useWindowSize.ts

@@ -0,0 +1,25 @@
+import { on, isServer } from '@opentiny/utils'
+
+let width
+let height
+
+export const useWindowSize = (ref) => () => {
+  if (!width) {
+    width = ref(0)
+    height = ref(0)
+
+    if (!isServer) {
+      const update = () => {
+        width.value = window.innerWidth
+        height.value = window.innerHeight
+      }
+
+      update()
+
+      on(window, 'resize', update, { passive: true })
+      on(window, 'orientationchange', update, { passive: true })
+    }
+  }
+
+  return { width, height }
+}

package/src/vue-emitter.ts

@@ -0,0 +1,49 @@
+/* eslint-disable prefer-spread */
+/**
+ * Copyright (c) 2022 - present TinyVue Authors.
+ * Copyright (c) 2022 - present Huawei Cloud Computing Technologies Co., Ltd.
+ *
+ * Use of this source code is governed by an MIT-style license.
+ *
+ * THE OPEN SOURCE SOFTWARE IN THIS PRODUCT IS DISTRIBUTED IN THE HOPE THAT IT WILL BE USEFUL,
+ * BUT WITHOUT ANY WARRANTY, WITHOUT EVEN THE IMPLIED WARRANTY OF MERCHANTABILITY OR FITNESS FOR
+ * A PARTICULAR PURPOSE. SEE THE APPLICABLE LICENSES FOR MORE DETAILS.
+ *
+ */
+
+//  全局未引用 ，待移除
+export default (vm) => {
+  const broadcast = (vm, componentName, eventName, params) => {
+    vm.$children.forEach((child) => {
+      const name = child.$options.componentName
+
+      if (name === componentName) {
+        child.$emit(eventName, params)
+      } else {
+        broadcast(child, componentName, eventName, params)
+      }
+    })
+  }
+
+  return {
+    dispatch(componentName, eventName, params) {
+      let parent = vm.$parent || vm.$root
+      let name = parent.$options.componentName
+
+      while (parent && !parent.$attrs.novalid && (!name || name !== componentName)) {
+        parent = parent.$parent
+
+        if (parent) {
+          name = parent.$options.componentName
+        }
+      }
+
+      if (parent) {
+        parent.$emit.apply(parent, [eventName].concat(params))
+      }
+    },
+    broadcast(componentName, eventName, params) {
+      broadcast(vm, componentName, eventName, params)
+    }
+  }
+}

package/src/vue-popper.ts

@@ -0,0 +1,277 @@
+/**
+ * Copyright (c) 2022 - present TinyVue Authors.
+ * Copyright (c) 2022 - present Huawei Cloud Computing Technologies Co., Ltd.
+ *
+ * Use of this source code is governed by an MIT-style license.
+ *
+ * THE OPEN SOURCE SOFTWARE IN THIS PRODUCT IS DISTRIBUTED IN THE HOPE THAT IT WILL BE USEFUL,
+ * BUT WITHOUT ANY WARRANTY, WITHOUT EVEN THE IMPLIED WARRANTY OF MERCHANTABILITY OR FITNESS FOR
+ * A PARTICULAR PURPOSE. SEE THE APPLICABLE LICENSES FOR MORE DETAILS.
+ *
+ */
+
+import { PopupManager, PopperJS, on, off, isDisplayNone } from '@opentiny/utils'
+
+// todo
+import type { ISharedRenderlessFunctionParams } from 'types/shared.type'
+
+import { isServer } from '@opentiny/utils'
+
+export interface IPopperState {
+  popperJS: Popper
+  appended: boolean
+  popperElm: HTMLElement
+  showPopper: boolean
+  referenceElm: HTMLElement
+  currentPlacement: string
+}
+
+type IPopperInputParams = ISharedRenderlessFunctionParams<never> & {
+  api: { open: Function; close: Function }
+  state: IPopperState
+  props: any
+}
+
+/** 给 popper 的click添加stop, 阻止冒泡 */
+const stop = (e: Event) => e.stopPropagation()
+
+// 由于多个组件传入reference元素的方式不同，所以这里从多处查找。
+const getReference = ({ state, props, vm, slots }: Pick<IPopperInputParams, 'state' | 'props' | 'vm' | 'slots'>) => {
+  let reference =
+    state.referenceElm || props.reference || (vm.$refs.reference && vm.$refs.reference.$el) || vm.$refs.reference
+
+  if (!reference && slots.reference && slots.reference()[0]) {
+    state.referenceElm = slots.reference()[0].elm || slots.reference()[0].el
+    reference = state.referenceElm
+  }
+
+  return reference
+}
+
+const getReferMaxZIndex = (reference) => {
+  if (!reference || !reference.nodeType) return
+
+  let getZIndex = (dom) => parseInt(window.getComputedStyle(dom).zIndex, 10) || 0
+  let max = getZIndex(reference)
+  let z
+
+  do {
+    reference = reference.parentNode
+
+    // 处理遇到shadowRoot的情况
+    if (reference && reference instanceof ShadowRoot && reference.host) {
+      reference = reference.host
+    }
+
+    if (reference) {
+      z = getZIndex(reference)
+    } else {
+      break
+    }
+
+    max = z > max ? z : max
+  } while (reference !== document.body)
+
+  return max + 1 + ''
+}
+// 历史原因，暂时先命名为userPopper， 以后统一替换
+export const userPopper = (options: IPopperInputParams) => {
+  const {
+    parent,
+    emit,
+    nextTick,
+    onBeforeUnmount,
+    onDeactivated,
+    props,
+    watch,
+    reactive,
+    vm,
+    slots,
+    toRefs,
+    popperVmRef
+  } = options
+  const state = reactive<IPopperState>({
+    popperJS: null as any,
+    appended: false, // arrow 是否添加
+    popperElm: null as any,
+    showPopper: props.manual ? Boolean(props.modelValue) : false,
+    referenceElm: null as any,
+    currentPlacement: ''
+  })
+
+  /** 创建箭头函数 */
+  const appendArrow = (el: HTMLElement) => {
+    if (state.appended) {
+      return
+    }
+
+    state.appended = true
+    const div = document.createElement('div')
+
+    div.setAttribute('x-arrow', '')
+    div.className = 'popper__arrow'
+    el.appendChild(div)
+  }
+
+  // 如果触发源是隐藏的，其弹出层也设置为隐藏。组件可以通过 props.popperOptions.followReferenceHide = true/false来控制
+  const followHide = (popperInstance: PopperJS) => {
+    const { followReferenceHide = true } = props?.popperOptions || {}
+    const { _popper: popper, _reference: reference } = popperInstance
+
+    if (followReferenceHide && isDisplayNone(reference)) {
+      popper.style.display = 'none'
+    }
+  }
+
+  const nextZIndex = (reference) => {
+    return props.zIndex === 'relative' ? getReferMaxZIndex(reference) : PopupManager.nextZIndex()
+  }
+
+  const createPopper = (dom) => {
+    if (isServer) {
+      return
+    }
+
+    state.currentPlacement = state.currentPlacement || props.placement
+
+    if (!/^(top|bottom|left|right)(-start|-end)?$/g.test(state.currentPlacement)) {
+      return
+    }
+
+    const options = props.popperOptions || { gpuAcceleration: false }
+    state.popperElm = state.popperElm || props.popper || vm.$refs.popper || popperVmRef.popper || dom
+    const popper = state.popperElm
+    let reference = getReference({ state, props, vm, slots })
+
+    if (!popper || !reference || reference.nodeType !== Node.ELEMENT_NODE) {
+      return
+    }
+
+    if (props.visibleArrow) {
+      appendArrow(popper)
+    }
+
+    // 使用的组件比较多，所以 appendToBody popperAppendToBody 这2个属性都要监听
+    if (props.appendToBody || props.popperAppendToBody) {
+      document.body.appendChild(state.popperElm)
+    } else {
+      // 只有tooltip 传入parent了
+      parent && parent.$el && parent.$el.appendChild(state.popperElm)
+      options.forceAbsolute = true
+    }
+
+    options.placement = state.currentPlacement
+    options.offset = props.offset || 0
+    options.arrowOffset = props.arrowOffset || 0
+    options.adjustArrow = props.adjustArrow || false
+    options.appendToBody = props.appendToBody || props.popperAppendToBody
+
+    // 创建一个popperJS, 内部会立即调用一次update() 并 applyStyle等操作
+    state.popperJS = new PopperJS(reference, popper, options)
+    // 1、所有使用vue-popper的都有该事件；2、有的组件会多次触发 created
+    emit('created', state)
+
+    if (typeof options.onUpdate === 'function') {
+      state.popperJS.onUpdate(options.onUpdate)
+    }
+
+    state.popperJS._popper.style.zIndex = nextZIndex(state.popperJS._reference)
+    followHide(state.popperJS)
+    on(state.popperElm, 'click', stop)
+  }
+
+  /** 第一次 updatePopper 的时候，才真正执行创建
+   * popperElmOrTrue===true的场景仅在select组件动态更新面版时，不更新zIndex
+   */
+  const updatePopper = (popperElmOrTrue?: HTMLElement) => {
+    if (popperElmOrTrue && popperElmOrTrue !== true) {
+      state.popperElm = popperElmOrTrue
+    }
+
+    const popperJS = state.popperJS
+    if (popperJS) {
+      // Tiny 新增，在动态切换renference时，需要实时获取最新的触发源
+      popperJS._reference = getReference({ state, props, vm, slots })
+      popperJS.update()
+
+      // 每次递增 z-index
+      if (popperJS._popper && popperElmOrTrue !== true) {
+        popperJS._popper.style.zIndex = nextZIndex(popperJS._reference)
+        followHide(state.popperJS)
+      }
+    } else {
+      createPopper(popperElmOrTrue && popperElmOrTrue !== true ? popperElmOrTrue : undefined)
+    }
+  }
+
+  /** 调用state.popperJS.destroy()。  默认不会移除popper dom
+   *  doDestroy() 默认执行的条件是： state.popperJS 有值且 state.showPopper = false.
+   *  当state.showPopper 为true时， 需要 doDestroy(true)!
+   */
+  const doDestroy = (forceDestroy?: boolean) => {
+    if (!state.popperJS || (state.showPopper && !forceDestroy)) {
+      return
+    }
+    state.popperJS.destroy() // 并未移除popper的dom
+    state.popperJS = null as any
+  }
+
+  /** remove时，执行真的移除popper dom操作。 */
+  const destroyPopper = (remove: 'remove' | boolean) => {
+    if (remove) {
+      // 当popper中嵌套popper时，内层popper被移除后不会重新创建，因此onDeactivated不将内层popper移除
+      if (state.popperElm && state.popperElm.parentNode === document.body) {
+        off(state.popperElm, 'click', stop)
+        state.popperElm.remove()
+      }
+    }
+  }
+
+  // 注意： 一直以来，state.showPopper 为false时，并未调用doDestroy. 像popover只是依赖这个值来 给reference元素 v-show一下
+  watch(
+    () => state.showPopper,
+    (val) => {
+      if (props.disabled) {
+        return
+      }
+      if (val) {
+        nextTick(updatePopper)
+      }
+      props.trigger === 'manual' && emit('update:modelValue', val)
+    }
+  )
+
+  watch(
+    () => props.placement,
+    (val?: string) => {
+      state.currentPlacement = val
+      state.popperJS?.setOptions({ placement: val })
+
+      if (props.disabled) {
+        return
+      }
+      if (val) {
+        nextTick(updatePopper)
+      }
+      props.trigger === 'manual' && emit('update:modelValue', val)
+    }
+  )
+
+  onBeforeUnmount(() => {
+    nextTick(() => {
+      doDestroy(true)
+      if (props.appendToBody || props.popperAppendToBody) {
+        destroyPopper('remove')
+      }
+    })
+  })
+
+  onDeactivated(() => {
+    doDestroy(true)
+    if (props.appendToBody || props.popperAppendToBody) {
+      destroyPopper('remove')
+    }
+  })
+
+  return { updatePopper, destroyPopper, doDestroy, ...toRefs(state) }
+}