oxy-uni-ui 1.0.1

package/components/oxy-sticky/oxy-sticky.vue

@@ -0,0 +1,190 @@
+<template>
+  <view :style="`${rootStyle};display: inline-block;`">
+    <view :class="`oxy-sticky ${customClass}`" :style="stickyStyle" :id="styckyId">
+      <view class="oxy-sticky__container" :style="containerStyle">
+        <oxy-resize @resize="handleResize" custom-style="display: inline-block;">
+          <slot />
+        </oxy-resize>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script lang="ts">
+export default {
+  name: 'oxy-sticky',
+  options: {
+    addGlobalClass: true,
+    virtualHost: true,
+    styleIsolation: 'shared'
+  }
+}
+</script>
+
+<script lang="ts" setup>
+import OxyResize from '../oxy-resize/oxy-resize.vue'
+import { computed, getCurrentInstance, reactive, ref, type CSSProperties } from 'vue'
+import { addUnit, getRect, objToStyle, pause, uuid } from '../common/util'
+import { stickyProps } from './types'
+import { useParent } from '../composables/useParent'
+import { STICKY_BOX_KEY } from '../oxy-sticky-box/types'
+
+const props = defineProps(stickyProps)
+const styckyId = ref<string>(`oxy-sticky${uuid()}`)
+const observerList = ref<UniApp.IntersectionObserver[]>([])
+
+const stickyState = reactive({
+  position: 'absolute',
+  boxLeaved: false,
+  top: 0,
+  height: 0,
+  width: 0,
+  state: ''
+})
+
+const { parent: stickyBox } = useParent(STICKY_BOX_KEY)
+
+const { proxy } = getCurrentInstance() as any
+
+const rootStyle = computed(() => {
+  const style: CSSProperties = {
+    'z-index': props.zIndex,
+    height: addUnit(stickyState.height),
+    width: addUnit(stickyState.width)
+  }
+  if (!stickyState.boxLeaved) {
+    style['position'] = 'relative'
+  }
+  return `${objToStyle(style)}${props.customStyle}`
+})
+
+const stickyStyle = computed(() => {
+  const style: CSSProperties = {
+    'z-index': props.zIndex,
+    height: addUnit(stickyState.height),
+    width: addUnit(stickyState.width)
+  }
+  if (!stickyState.boxLeaved) {
+    style['position'] = 'relative'
+  }
+  return `${objToStyle(style)}`
+})
+
+const containerStyle = computed(() => {
+  const style: CSSProperties = {
+    position: stickyState.position as 'static' | 'relative' | 'absolute' | 'sticky' | 'fixed',
+    top: addUnit(stickyState.top)
+  }
+  return objToStyle(style)
+})
+
+const innerOffsetTop = computed(() => {
+  let top: number = 0
+  // #ifdef H5
+  // H5端，导航栏为普通元素，需要将组件移动到导航栏的下边沿
+  // H5的导航栏高度为44px
+  top = 44
+  // #endif
+
+  return top + props.offsetTop
+})
+
+/**
+ * 清除对当前组件的监听
+ */
+function clearObserver() {
+  while (observerList.value.length !== 0) {
+    observerList.value.pop()!.disconnect()
+  }
+}
+/**
+ * 添加对当前组件的监听
+ */
+function createObserver() {
+  const observer = uni.createIntersectionObserver(proxy, { thresholds: [0, 0.5] })
+  observerList.value.push(observer)
+  return observer
+}
+/**
+ *  当前内容高度发生变化时重置监听
+ */
+async function handleResize(detail: any) {
+  stickyState.width = detail.width
+  stickyState.height = detail.height
+  await pause()
+  observerContentScroll()
+  if (!stickyBox || !stickyBox.observerForChild) return
+  stickyBox.observerForChild(proxy)
+}
+/**
+ *  监听吸顶元素滚动事件
+ */
+function observerContentScroll() {
+  if (stickyState.height === 0 && stickyState.width === 0) return
+  const offset = innerOffsetTop.value + stickyState.height
+  clearObserver()
+  createObserver()
+    .relativeToViewport({
+      top: -offset
+    })
+    .observe(`#${styckyId.value}`, (result) => {
+      handleRelativeTo(result)
+    })
+  getRect(`#${styckyId.value}`, false, proxy).then((res) => {
+    // #ifdef H5
+    // H5端，查询节点信息未计算导航栏高度
+    res.bottom = Number(res.bottom) + 44
+    // #endif
+    if (Number(res.bottom) <= offset) handleRelativeTo({ boundingClientRect: res })
+  })
+}
+/**
+ * @description 根据位置进行吸顶
+ */
+function handleRelativeTo({ boundingClientRect }: any) {
+  // sticky 高度大于或等于 oxy-sticky-box，使用 oxy-sticky-box 无任何意义
+  if (stickyBox && stickyBox.boxStyle && stickyState.height >= stickyBox.boxStyle.height) {
+    stickyState.position = 'absolute'
+    stickyState.top = 0
+    return
+  }
+
+  let isStycky = boundingClientRect.top <= innerOffsetTop.value
+  // #ifdef H5 || APP-PLUS
+  isStycky = boundingClientRect.top < innerOffsetTop.value
+  // #endif
+
+  if (isStycky) {
+    stickyState.state = 'sticky'
+    stickyState.boxLeaved = false
+    stickyState.position = 'fixed'
+    stickyState.top = innerOffsetTop.value
+  } else {
+    stickyState.state = 'normal'
+    stickyState.boxLeaved = false
+    stickyState.position = 'absolute'
+    stickyState.top = 0
+  }
+}
+
+/**
+ * 设置位置
+ * @param setboxLeaved
+ * @param setPosition
+ * @param setTop
+ */
+function setPosition(boxLeaved: boolean, position: string, top: number) {
+  stickyState.boxLeaved = boxLeaved
+  stickyState.position = position
+  stickyState.top = top
+}
+
+defineExpose({
+  setPosition,
+  stickyState,
+  offsetTop: props.offsetTop
+})
+</script>
+<style lang="scss" scoped>
+@import './index.scss';
+</style>

package/components/oxy-sticky/types.ts

@@ -0,0 +1,13 @@
+import { baseProps, makeNumberProp } from '../common/props'
+
+export const stickyProps = {
+  ...baseProps,
+  /**
+   * 层级
+   */
+  zIndex: makeNumberProp(1),
+  /**
+   * 吸顶距离
+   */
+  offsetTop: makeNumberProp(0)
+}

package/components/oxy-sticky-box/index.scss

@@ -0,0 +1,6 @@
+@import '../common/abstracts/variable';
+@import '../common/abstracts/mixin';
+
+@include b(sticky-box) {
+  position: relative;
+}

package/components/oxy-sticky-box/oxy-sticky-box.vue

@@ -0,0 +1,155 @@
+<template>
+  <view style="position: relative">
+    <view :class="`oxy-sticky-box ${props.customClass}`" :style="customStyle" :id="styckyBoxId">
+      <oxy-resize @resize="handleResize">
+        <slot />
+      </oxy-resize>
+    </view>
+  </view>
+</template>
+
+<script lang="ts">
+export default {
+  name: 'oxy-sticky-box',
+  options: {
+    addGlobalClass: true,
+    // virtualHost: true,
+    styleIsolation: 'shared'
+  }
+}
+</script>
+
+<script lang="ts" setup>
+import OxyResize from '../oxy-resize/oxy-resize.vue'
+import { getCurrentInstance, onBeforeMount, reactive, ref } from 'vue'
+import { getRect, uuid } from '../common/util'
+import { baseProps } from '../common/props'
+import { STICKY_BOX_KEY } from './types'
+import { useChildren } from '../composables/useChildren'
+
+const props = defineProps(baseProps)
+
+const styckyBoxId = ref<string>(`oxy-sticky-box${uuid()}`)
+
+const observerMap = ref<Map<any, any>>(new Map())
+
+const boxStyle = reactive({
+  height: 0,
+  width: 0
+})
+
+const { proxy } = getCurrentInstance() as any
+
+const { children: stickyList, linkChildren } = useChildren(STICKY_BOX_KEY)
+linkChildren({
+  boxStyle: boxStyle,
+  observerForChild
+})
+
+onBeforeMount(() => {
+  observerMap.value = new Map()
+})
+
+/**
+ * 容器大小变化后重新监听sticky组件与box组件的交叉状态
+ * @param detail
+ */
+function handleResize(detail: any) {
+  // 相对的容器大小改变后，同步设置 oxy-sticky-box 的大小
+  boxStyle.width = detail.width
+  boxStyle.height = detail.height
+  // oxy-sticky-box 大小变化时，重新监听所有吸顶元素
+  const temp = observerMap.value
+  observerMap.value = new Map()
+  for (const [uid] of temp) {
+    const child = stickyList.find((sticky) => {
+      return sticky.$.uid === uid
+    })
+    observerForChild(child)
+  }
+  temp.forEach((observer) => {
+    observer.disconnect()
+  })
+  temp.clear()
+}
+/**
+ * 删除对指定sticky的监听
+ * @param child 指定的子组件
+ */
+function deleteObserver(child: any) {
+  const observer = observerMap.value.get(child.$.uid)
+  if (!observer) return
+  observer.disconnect()
+  observerMap.value.delete(child.$.uid)
+}
+/**
+ * 针对指定sticky添加监听
+ * @param child 指定的子组件
+ */
+function createObserver(child: any) {
+  const observer = uni.createIntersectionObserver(proxy, { thresholds: [0, 0.5] })
+  observerMap.value.set(child.$.uid, observer)
+  return observer
+}
+/**
+ * 监听子组件
+ * @param child 子组件
+ */
+function observerForChild(child: any) {
+  deleteObserver(child)
+  const observer = createObserver(child)
+  const exposed = child.$.exposed
+  let offset = exposed.stickyState.height + exposed.offsetTop
+  // #ifdef H5
+  // H5端，导航栏为普通元素，需要将组件移动到导航栏的下边沿
+  // H5的导航栏高度为44px
+  offset = offset + 44
+  // #endif
+
+  if (boxStyle.height <= exposed.stickyState.height) {
+    exposed.setPosition(false, 'absolute', 0)
+  }
+  observer.relativeToViewport({ top: -offset }).observe(`#${styckyBoxId.value}`, (result) => {
+    handleRelativeTo(exposed, result)
+  })
+  // 当子组件默认处于边界外且永远不会进入边界内时，需要手动调用一次
+  getRect(`#${styckyBoxId.value}`, false, proxy)
+    .then((res) => {
+      // #ifdef H5
+      // H5端，查询节点信息未计算导航栏高度
+      res.bottom = Number(res.bottom) + 44
+      // #endif
+      if (Number(res.bottom) <= offset) handleRelativeTo(exposed, { boundingClientRect: res })
+    })
+    .catch((res) => {
+      console.log(res)
+    })
+}
+/**
+ *  监听容器组件
+ * @param {Object} exposed oxy-sticky实例暴露出的事件
+ * @param {Object} boundingClientRect 边界信息
+ */
+function handleRelativeTo(exposed: any, { boundingClientRect }: any) {
+  let childOffsetTop = exposed.offsetTop
+  // #ifdef H5
+  // H5端，导航栏为普通元素，需要将组件移动到导航栏的下边沿
+  // H5的导航栏高度为44px
+  childOffsetTop = childOffsetTop + 44
+  // #endif
+  const offset = exposed.stickyState.height + childOffsetTop
+  let isAbsolute = boundingClientRect.bottom <= offset
+  // #ifdef H5 || APP-PLUS
+  isAbsolute = boundingClientRect.bottom < offset
+  // #endif
+  if (isAbsolute) {
+    exposed.setPosition(true, 'absolute', boundingClientRect.height - exposed.stickyState.height)
+  } else if (boundingClientRect.top <= offset && !isAbsolute) {
+    if (exposed.stickyState.state === 'normal') return
+    exposed.setPosition(false, 'fixed', childOffsetTop)
+  }
+}
+</script>
+<style lang="scss" scoped>
+@import './index.scss';
+</style>

package/components/oxy-sticky-box/types.ts

@@ -0,0 +1,11 @@
+import type { ComponentInternalInstance, InjectionKey } from 'vue'
+
+export type stickyBoxProvide = {
+  boxStyle: {
+    height: number // 高度
+    width: number // 宽度
+  }
+  observerForChild: (child: ComponentInternalInstance) => void // 监听子组件
+}
+
+export const STICKY_BOX_KEY: InjectionKey<stickyBoxProvide> = Symbol('oxy-sticky-box')

package/components/oxy-swipe-action/index.scss

@@ -0,0 +1,22 @@
+@import '../common/abstracts/variable';
+@import '../common/abstracts/mixin';
+
+@include b(swipe-action) {
+  position: relative;
+  overflow: hidden;
+  @include e(left) {
+    left: 0;
+    transform: translate3d(-100%, 0, 0);
+  }
+  @include e(right) {
+    right: 0;
+    transform: translate3d(100%, 0, 0);
+  }
+}
+
+.oxy-swipe-action__left,
+.oxy-swipe-action__right {
+  position: absolute;
+  top: 0;
+  height: 100%;
+}

package/components/oxy-swipe-action/oxy-swipe-action.vue

@@ -0,0 +1,294 @@
+<template>
+  <!--注意阻止横向滑动的穿透：横向移动时阻止冒泡-->
+  <view
+    :class="`oxy-swipe-action ${customClass}`"
+    :style="customStyle"
+    @click.stop="onClick()"
+    @touchstart="startDrag"
+    @touchmove="onDrag"
+    @touchend="endDrag"
+    @touchcancel="endDrag"
+  >
+    <!--容器-->
+    <view class="oxy-swipe-action__wrapper" :style="wrapperStyle">
+      <!--左侧操作-->
+      <view class="oxy-swipe-action__left" @click="onClick('left')">
+        <slot name="left" />
+      </view>
+      <!--内容-->
+      <slot />
+      <!--右侧操作-->
+      <view class="oxy-swipe-action__right" @click="onClick('right')">
+        <slot name="right" />
+      </view>
+    </view>
+  </view>
+</template>
+<script lang="ts">
+export default {
+  name: 'oxy-swipe-action',
+  options: {
+    addGlobalClass: true,
+    virtualHost: true,
+    styleIsolation: 'shared'
+  }
+}
+</script>
+<script lang="ts" setup>
+import { getCurrentInstance, inject, onBeforeMount, onBeforeUnmount, onMounted, ref, watch } from 'vue'
+import { closeOther, pushToQueue, removeFromQueue } from '../common/clickoutside'
+import { type Queue, queueKey } from '../composables/useQueue'
+import { useTouch } from '../composables/useTouch'
+import { getRect } from '../common/util'
+import { swipeActionProps, type SwipeActionPosition, type SwipeActionReason, type SwipeActionStatus } from './types'
+
+const props = defineProps(swipeActionProps)
+const emit = defineEmits(['click', 'update:modelValue'])
+
+const queue = inject<Queue | null>(queueKey, null)
+
+const wrapperStyle = ref<string>('')
+
+// 滑动开始时，wrapper的偏移量
+const originOffset = ref<number>(0)
+// wrapper现在的偏移量
+const wrapperOffset = ref<number>(0)
+// 是否处于滑动状态
+const touching = ref<boolean>(false)
+
+const touch = useTouch()
+
+const { proxy } = getCurrentInstance() as any
+
+watch(
+  () => props.modelValue,
+  (value, old) => {
+    changeState(value, old)
+  },
+  {
+    deep: true
+  }
+)
+
+onBeforeMount(() => {
+  if (queue && queue.pushToQueue) {
+    queue.pushToQueue(proxy)
+  } else {
+    pushToQueue(proxy)
+  }
+  // 滑动开始时，wrapper的偏移量
+  originOffset.value = 0
+  // wrapper现在的偏移量
+  wrapperOffset.value = 0
+  // 是否处于滑动状态
+  touching.value = false
+})
+
+onMounted(() => {
+  touching.value = true
+  changeState(props.modelValue)
+  touching.value = false
+})
+
+onBeforeUnmount(() => {
+  if (queue && queue.removeFromQueue) {
+    queue.removeFromQueue(proxy)
+  } else {
+    removeFromQueue(proxy)
+  }
+})
+
+function changeState(value: SwipeActionStatus, old?: SwipeActionStatus) {
+  if (props.disabled) {
+    return
+  }
+  getWidths().then(([leftWidth, rightWidth]) => {
+    switch (value) {
+      case 'close':
+        // 调用此函数时，偏移量本就是0
+        if (wrapperOffset.value === 0) return
+        close('value', old)
+        break
+      case 'left':
+        swipeMove(leftWidth)
+        break
+      case 'right':
+        swipeMove(-rightWidth)
+        break
+    }
+  })
+}
+
+/**
+ * @description 获取左/右操作按钮的宽度
+ * @return {Promise<[Number, Number]>} 左宽度、右宽度
+ */
+function getWidths() {
+  return Promise.all([
+    getRect('.oxy-swipe-action__left', false, proxy).then((rect) => {
+      return rect.width ? rect.width : 0
+    }),
+    getRect('.oxy-swipe-action__right', false, proxy).then((rect) => {
+      return rect.width ? rect.width : 0
+    })
+  ])
+}
+/**
+ * @description wrapper滑动函数
+ * @param {Number} offset 滑动漂移量
+ */
+function swipeMove(offset = 0) {
+  // this.offset = offset
+  const transform = `translate3d(${offset}px, 0, 0)`
+  // 跟随手指滑动，不需要动画
+  const transition = touching.value ? 'none' : '.6s cubic-bezier(0.18, 0.89, 0.32, 1)'
+  wrapperStyle.value = `
+        -webkit-transform: ${transform};
+        -webkit-transition: ${transition};
+        transform: ${transform};
+        transition: ${transition};
+      `
+  // 记录容器当前偏移的量
+  wrapperOffset.value = offset
+}
+/**
+ * @description click的handler
+ * @param event
+ */
+function onClick(position?: SwipeActionPosition) {
+  if (props.disabled || wrapperOffset.value === 0) {
+    return
+  }
+
+  position = position || 'inside'
+  close('click', position)
+  emit('click', {
+    value: position
+  })
+}
+/**
+ * @description 开始滑动
+ */
+function startDrag(event: TouchEvent) {
+  if (props.disabled) return
+
+  originOffset.value = wrapperOffset.value
+  touch.touchStart(event)
+  if (queue && queue.closeOther) {
+    queue.closeOther(proxy)
+  } else {
+    closeOther(proxy)
+  }
+}
+/**
+ * @description 滑动时，逐渐展示按钮
+ * @param event
+ */
+function onDrag(event: TouchEvent) {
+  if (props.disabled) return
+
+  touch.touchMove(event)
+  if (touch.direction.value === 'vertical') {
+    return
+  } else {
+    event.preventDefault()
+    event.stopPropagation()
+  }
+
+  touching.value = true
+
+  // 本次滑动，wrapper应该设置的偏移量
+  const offset = originOffset.value + touch.deltaX.value
+  getWidths().then(([leftWidth, rightWidth]) => {
+    // 如果需要想滑出来的按钮不存在，对应的按钮肯定滑不出来，容器处于初始状态。此时需要模拟一下位于此处的start事件。
+    if ((leftWidth === 0 && offset > 0) || (rightWidth === 0 && offset < 0)) {
+      swipeMove(0)
+      return startDrag(event)
+    }
+    // 按钮已经展示完了，再滑动没有任何意义，相当于滑动结束。此时需要模拟一下位于此处的start事件。
+    if (leftWidth !== 0 && offset >= leftWidth) {
+      swipeMove(leftWidth)
+      return startDrag(event)
+    } else if (rightWidth !== 0 && -offset >= rightWidth) {
+      swipeMove(-rightWidth)
+      return startDrag(event)
+    }
+    swipeMove(offset)
+  })
+}
+/**
+ * @description 滑动结束，自动修正位置
+ */
+function endDrag() {
+  if (props.disabled) return
+  // 滑出"操作按钮"的阈值
+  const THRESHOLD = 0.3
+  touching.value = false
+
+  getWidths().then(([leftWidth, rightWidth]) => {
+    if (
+      originOffset.value < 0 && // 之前展示的是右按钮
+      wrapperOffset.value < 0 && // 目前仍然是右按钮
+      wrapperOffset.value - originOffset.value < rightWidth * THRESHOLD // 并且滑动的范围不超过右边框阀值
+    ) {
+      swipeMove(-rightWidth) // 回归右按钮
+      emit('update:modelValue', 'right')
+    } else if (
+      originOffset.value > 0 && // 之前展示的是左按钮
+      wrapperOffset.value > 0 && // 现在仍然是左按钮
+      originOffset.value - wrapperOffset.value < leftWidth * THRESHOLD // 并且滑动的范围不超过左按钮阀值
+    ) {
+      swipeMove(leftWidth) // 回归左按钮
+      emit('update:modelValue', 'left')
+    } else if (
+      rightWidth > 0 &&
+      originOffset.value >= 0 && // 之前是初始状态或者展示左按钮显
+      wrapperOffset.value < 0 && // 现在展示右按钮
+      Math.abs(wrapperOffset.value) > rightWidth * THRESHOLD // 视图中已经展示的右按钮长度超过阀值
+    ) {
+      swipeMove(-rightWidth)
+      emit('update:modelValue', 'right')
+    } else if (
+      leftWidth > 0 &&
+      originOffset.value <= 0 && // 之前初始状态或者右按钮显示
+      wrapperOffset.value > 0 && // 现在左按钮
+      Math.abs(wrapperOffset.value) > leftWidth * THRESHOLD // 视图中已经展示的左按钮长度超过阀值
+    ) {
+      swipeMove(leftWidth)
+      emit('update:modelValue', 'left')
+    } else {
+      // 回归初始状态
+      close('swipe')
+    }
+  })
+}
+/**
+ * @description 关闭操过按钮，并在合适的时候调用 beforeClose
+ */
+function close(reason: SwipeActionReason, position?: SwipeActionPosition) {
+  if (reason === 'swipe' && originOffset.value === 0) {
+    // offset：0 ——> offset：0
+    return swipeMove(0)
+  } else if (reason === 'swipe' && originOffset.value > 0) {
+    // offset > 0 ——> offset：0
+    position = 'left'
+  } else if (reason === 'swipe' && originOffset.value < 0) {
+    // offset < 0 ——> offset：0
+    position = 'right'
+  }
+
+  if (reason && position) {
+    props.beforeClose && props.beforeClose(reason, position)
+  }
+
+  swipeMove(0)
+  if (props.modelValue !== 'close') {
+    emit('update:modelValue', 'close')
+  }
+}
+
+defineExpose({ close })
+</script>
+<style lang="scss" scoped>
+@import './index.scss';
+</style>