@tplc/wot 0.0.1

package/components/wd-sticky/wd-sticky.vue

@@ -0,0 +1,190 @@
+<template>
+  <view :style="`${rootStyle};display: inline-block;`">
+    <view :class="`wd-sticky ${customClass}`" :style="stickyStyle" :id="styckyId">
+      <view class="wd-sticky__container" :style="containerStyle">
+        <wd-resize @resize="handleResize" custom-style="display: inline-block;">
+          <slot />
+        </wd-resize>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script lang="ts">
+export default {
+  name: 'wd-sticky',
+  options: {
+    addGlobalClass: true,
+    virtualHost: true,
+    styleIsolation: 'shared',
+  },
+}
+</script>
+
+<script lang="ts" setup>
+import { computed, getCurrentInstance, reactive, ref, type CSSProperties } from 'vue'
+import { addUnit, getRect, objToStyle, requestAnimationFrame, uuid } from '../common/util'
+import { stickyProps } from './types'
+import { useParent } from '../composables/useParent'
+import { STICKY_BOX_KEY } from '../wd-sticky-box/types'
+
+const props = defineProps(stickyProps)
+const styckyId = ref<string>(`wd-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
+}
+/**
+ *  当前内容高度发生变化时重置监听
+ */
+function handleResize(detail: any) {
+  stickyState.width = detail.width
+  stickyState.height = detail.height
+  requestAnimationFrame(() => {
+    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 高度大于或等于 wd-sticky-box，使用 wd-sticky-box 无任何意义
+  if (stickyBox && 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';
+</style>

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

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

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

@@ -0,0 +1,20 @@
+/*
+ * @Author: weisheng
+ * @Date: 2024-04-08 22:34:01
+ * @LastEditTime: 2024-06-01 16:04:56
+ * @LastEditors: weisheng
+ * @Description:
+ * @FilePath: /wot-design-uni/src/uni_modules/wot-design-uni/components/wd-sticky-box/types.ts
+ * 记得注释
+ */
+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('wd-sticky-box')

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

@@ -0,0 +1,154 @@
+<template>
+  <view style="position: relative">
+    <view :class="`wd-sticky-box ${props.customClass}`" :style="customStyle" :id="styckyBoxId">
+      <wd-resize @resize="handleResize">
+        <slot />
+      </wd-resize>
+    </view>
+  </view>
+</template>
+
+<script lang="ts">
+export default {
+  name: 'wd-sticky-box',
+  options: {
+    addGlobalClass: true,
+    // virtualHost: true,
+    styleIsolation: 'shared',
+  },
+}
+</script>
+
+<script lang="ts" setup>
+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>(`wd-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,
+  observerForChild,
+})
+
+onBeforeMount(() => {
+  observerMap.value = new Map()
+})
+
+/**
+ * 容器大小变化后重新监听sticky组件与box组件的交叉状态
+ * @param detail
+ */
+function handleResize(detail: any) {
+  // 相对的容器大小改变后，同步设置 wd-sticky-box 的大小
+  boxStyle.width = detail.width
+  boxStyle.height = detail.height
+  // wd-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 wd-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';
+</style>

package/components/wd-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);
+  }
+}
+
+.wd-swipe-action__left,
+.wd-swipe-action__right {
+  position: absolute;
+  top: 0;
+  height: 100%;
+}

package/components/wd-swipe-action/types.ts

@@ -0,0 +1,43 @@
+import type { ExtractPropTypes, PropType } from 'vue'
+import { baseProps, makeBooleanProp, makeStringProp } from '../common/props'
+
+export type SwipeActionStatus = 'left' | 'close' | 'right'
+
+// 点击关闭按钮、滑动关闭按钮、通过控制value关闭按钮
+export type SwipeActionReason = 'click' | 'swipe' | 'value'
+
+export type SwipeActionPosition = SwipeActionStatus | 'inside'
+
+export type SwipeActionBeforeClose = (
+  reason: SwipeActionReason,
+  position: SwipeActionPosition,
+) => void
+
+export const swipeActionProps = {
+  ...baseProps,
+
+  /**
+   * 滑动按钮的状态，使用v-model进行双向绑定。
+   * 可选值为：'left'（左滑）、'close'（关闭状态）、'right'（右滑）。
+   * 类型：string
+   * 默认值：'close'
+   */
+  modelValue: makeStringProp<SwipeActionStatus>('close'),
+
+  /**
+   * 是否禁用滑动操作。
+   * 类型：boolean
+   * 默认值：false
+   */
+  disabled: makeBooleanProp(false),
+
+  /**
+   * 在关闭滑动按钮前调用的钩子函数。
+   * 可以在此函数中执行一些关闭前的操作，如确认提示等。
+   * 类型：function
+   * 默认值：无
+   */
+  beforeClose: Function as PropType<SwipeActionBeforeClose>,
+}
+
+export type SwipeActionProps = ExtractPropTypes<typeof swipeActionProps>