first commit

uni_modules/tdesign-uniapp/components/mixins/page-scroll.js

@@ -0,0 +1,115 @@
+import { getCurrentPage } from '../common/utils';
+import Bus from '../common/bus';
+
+const overflowScrollReg = /scroll|auto|overlay/i;
+
+export const bus = new Bus();
+export const PAGE_SCROLL_EVENT_NAME = 'page-scroll';
+
+
+const onPageScroll = function (event) {
+  const page = getCurrentPage();
+
+  if (!page) return;
+  const { pageScroller } = page;
+
+  pageScroller?.forEach((scroller) => {
+    if (typeof scroller === 'function') {
+      scroller(event);
+    }
+  });
+};
+
+
+export default (funcName = 'onScroll', useBus = true) => {
+  // #ifdef H5
+  useBus = false;
+  // #endif
+
+  return {
+    mounted() {
+      if (useBus) {
+        bus.on(PAGE_SCROLL_EVENT_NAME, this[funcName]);
+        return;
+      }
+
+      // #ifdef H5
+      this._scroller = getScroller(this.$el);
+      if (this._scroller) {
+        this._scroller.addEventListener('scroll', this._bindScroller);
+      }
+      // #endif
+
+      const page = getCurrentPage();
+      if (!page) return;
+
+
+      if (Array.isArray(page.pageScroller)) {
+        page.pageScroller.push(this._bindScroller);
+      } else {
+        page.pageScroller = typeof page.onPageScroll === 'function' ? [page.onPageScroll.bind(page), this._bindScroller] : [this._bindScroller];
+      }
+
+      page.onPageScroll = onPageScroll;
+    },
+
+    beforeUnMount() {
+      if (useBus) {
+        bus.off(PAGE_SCROLL_EVENT_NAME, this[funcName]);
+        return;
+      }
+
+      // #ifdef H5
+      if (this._scroller) {
+        this._scroller.removeEventListener('scroll', this._bindScroller);
+      }
+      // #endif
+
+      const page = getCurrentPage();
+      if (!page) return;
+
+      page.pageScroller = page.pageScroller?.filter(item => item !== this._bindScroller) || [];
+    },
+    methods: {
+      _bindScroller(e) {
+        let result;
+        // #ifdef H5
+        result = this[funcName]?.call(this, e.target);
+        // #endif
+        // #ifndef H5
+        result = this[funcName]?.call(this, e);
+        // #endif
+        return result;
+      },
+    },
+  };
+};
+
+
+export function getScroller(el, root) {
+  // #ifdef H5
+  if (root === void 0) {
+    root = window;
+  }
+
+  let node = el;
+
+  while (node && node.tagName !== 'HTML' && node.tagName !== 'BODY' && node.nodeType === 1 && node !== root) {
+    const { overflowY } = window.getComputedStyle(node);
+
+    if (overflowScrollReg.test(overflowY)) {
+      return node;
+    }
+
+    node = node.parentNode;
+  }
+
+  return root;
+  // #endif
+}
+
+
+export function handlePageScroll(e) {
+  bus.emit(PAGE_SCROLL_EVENT_NAME, e);
+  return bus;
+}

uni_modules/tdesign-uniapp/components/mixins/skyline.js

@@ -0,0 +1,12 @@
+import { getCurrentPage } from '../common/utils.js';
+
+export default {
+  data() {
+    return {
+      skylineRender: false,
+    };
+  },
+  mounted() {
+    this.skylineRender = getCurrentPage().renderer === 'skyline';
+  },
+};

uni_modules/tdesign-uniapp/components/mixins/theme-change.js

@@ -0,0 +1,16 @@
+import { appBaseInfo } from '../common/utils';
+
+export const themeMixin = {
+  data() {
+    return {
+      theme: 'light',
+    };
+  },
+  mounted() {
+    this.theme = appBaseInfo.theme;
+    if (typeof uni.onThemeChange !== 'function') return;
+    uni.onThemeChange((t) => {
+      this.theme = t.theme;
+    });
+  },
+};

uni_modules/tdesign-uniapp/components/mixins/touch.js

@@ -0,0 +1,29 @@
+const getDirection = (t, s) => (t > s && t > 10 ? 'horizontal' : s > t && s > 10 ? 'vertical' : '');
+export default {
+  data() {
+    return {};
+  },
+  methods: {
+    resetTouchStatus() {
+      this.direction = '';
+      this.deltaX = 0;
+      this.deltaY = 0;
+      this.offsetX = 0;
+      this.offsetY = 0;
+    },
+    touchStart(t) {
+      this.resetTouchStatus();
+      const [s] = t.touches;
+      this.startX = s.clientX;
+      this.startY = s.clientY;
+    },
+    touchMove(t) {
+      const [s] = t.touches;
+      this.deltaX = s.clientX - this.startX;
+      this.deltaY = s.clientY - this.startY;
+      this.offsetX = Math.abs(this.deltaX);
+      this.offsetY = Math.abs(this.deltaY);
+      this.direction = getDirection(this.offsetX, this.offsetY);
+    },
+  },
+};

uni_modules/tdesign-uniapp/components/mixins/transition.js

@@ -0,0 +1,133 @@
+import { prefix } from '../common/config';
+
+
+export default function transition() {
+  return {
+    data() {
+      return {
+        transitionClass: '',
+        transitionDurations: 300,
+        className: '',
+        realVisible: false,
+      };
+    },
+    props: {
+      visible: {
+        type: Boolean,
+        default: null,
+      },
+      appear: Boolean,
+      name: {
+        type: String,
+        default: 'fade',
+      },
+      durations: {
+        type: Number,
+        optionalTypes: [Array],
+      },
+    },
+    watch: {
+      visible: {
+        handler(val, oldVal) {
+          this.watchVisible(val, oldVal);
+        },
+      },
+    },
+    created() {
+      this.status = '';
+      this.transitionT = 0;
+    },
+    beforeMount() {
+      this.dataDurations = this.getDurations();
+      if (this.visible) {
+        this.enter();
+      }
+      this.inited = true;
+    },
+    destroyed() {
+      clearTimeout(this.transitionT);
+    },
+    methods: {
+      watchVisible(curr, prev) {
+        if (this.inited && curr !== prev) {
+          curr ? this.enter() : this.leave();
+        }
+      },
+      getDurations() {
+        const { durations } = this;
+        if (Array.isArray(durations)) {
+          return durations.map(item => Number(item));
+        }
+        return [Number(durations), Number(durations)];
+      },
+      enter() {
+        const { name, transitionDurations } = this;
+        const [duration] = this.dataDurations;
+        this.status = 'entering';
+        this.realVisible = true;
+        this.transitionClass = `${prefix}-${name}-enter ${prefix}-${name}-enter-active`;
+
+
+        setTimeout(() => {
+          this.transitionClass = `${prefix}-${name}-enter-active ${prefix}-${name}-enter-to`;
+        }, 30);
+        if (typeof duration === 'number' && duration > 0) {
+          this.transitionT = setTimeout(this.entered.bind(this), duration + 30);
+        } else {
+          this.transitionT = setTimeout(
+            this.status === 'leaving' ? this.leaved.bind(this) : (() => {}),
+            transitionDurations + 30,
+          );
+        }
+      },
+      entered() {
+        this.customDuration = false;
+        clearTimeout(this.transitionT);
+        this.status = 'entered';
+        this.transitionClass = '';
+      },
+      leave() {
+        const { name, transitionDurations } = this;
+        const [, duration] = this.dataDurations;
+        this.status = 'leaving';
+        this.transitionClass = `${prefix}-${name}-leave  ${prefix}-${name}-leave-active`;
+
+        clearTimeout(this.transitionT);
+        setTimeout(() => {
+          this.transitionClass = `${prefix}-${name}-leave-active ${prefix}-${name}-leave-to`;
+        }, 30);
+
+        if (typeof duration === 'number' && duration > 0) {
+          this.customDuration = true;
+          this.transitionT = setTimeout(this.leaved.bind(this), duration + 30);
+        } else {
+          this.transitionT = setTimeout(
+            this.status === 'leaving' ? this.leaved.bind(this) : (() => {}),
+            transitionDurations + 30,
+          );
+        }
+      },
+      leaved() {
+        this.customDuration = false;
+        this.$emit('leaved');
+        clearTimeout(this.transitionT);
+        this.status = 'leaved';
+
+        this.transitionClass = '';
+        this.realVisible = false;
+      },
+      onTransitionEnd() {
+        if (this.customDuration) {
+          return;
+        }
+        clearTimeout(this.transitionT);
+        if (this.status === 'entering' && this.visible) {
+          this.entered();
+        } else if (this.status === 'leaving' && !this.visible) {
+          this.leaved();
+        }
+      },
+    },
+  };
+}
+export const transitionMixins = transition();

uni_modules/tdesign-uniapp/components/mixins/using-custom-navbar.js

@@ -0,0 +1,38 @@
+import { systemInfo } from '../common/utils';
+const useCustomNavbarBehavior = {
+  data() {
+    return {
+      distanceTop: 0,
+    };
+  },
+  props: {
+    usingCustomNavbar: {
+      type: Boolean,
+      default: false,
+    },
+    customNavbarHeight: {
+      type: Number,
+      default: 0,
+    },
+  },
+  created() {
+    if (this.usingCustomNavbar) {
+      this.calculateCustomNavbarDistanceTop();
+    }
+  },
+  methods: {
+    calculateCustomNavbarDistanceTop() {
+      const { statusBarHeight } = systemInfo;
+      let distance = 0;
+      // #ifndef H5
+      // #ifndef APP-PLUS
+      const menuButton = uni.getMenuButtonBoundingClientRect();
+      distance = menuButton.top + menuButton.bottom - statusBarHeight;
+      // #endif
+      // #endif
+
+      this.distanceTop = Math.max(distance, this.customNavbarHeight + statusBarHeight);
+    },
+  },
+};
+export default useCustomNavbarBehavior;