@tdesign/uniapp 0.0.1-alpha.1 → 0.7.0

package/dist/message-item/message-item.vue

@@ -0,0 +1,353 @@
+<template>
+  <view>
+    <view
+      v-if="visible"
+      :id="id || classPrefix"
+      :ref="id || classPrefix"
+      :class="classPrefix + ' ' + tClass + ' ' + classPrefix + '--' + theme + ' ' + fadeClass"
+      :style="tools._style([getMessageStyles(zIndex, offset, wrapTop), customStyle])"
+      :animation="showAnimation"
+      aria-role="alert"
+    >
+      <view :class="classPrefix + '__icon--left'">
+        <slot name="icon" />
+        <block
+          v-if="_icon"
+          name="icon"
+        >
+          <t-icon
+            :custom-style="_icon.style || ''"
+            :t-class="tClassIcon"
+            :prefix="_icon.prefix"
+            :name="_icon.name"
+            :size="_icon.size"
+            :color="_icon.color"
+            :aria-hidden="true"
+            :aria-label="_icon.ariaLabel"
+            :aria-role="_icon.ariaRole"
+          />
+        </block>
+      </view>
+      <view
+        :id="classPrefix + '__text-wrap'"
+        :ref="classPrefix + '__text-wrap'"
+        :class="classPrefix + '__text-wrap ' + (marquee ? classPrefix + '__text-nowrap' : '')"
+        :style="'text-align: ' + align"
+      >
+        <view
+          :id="classPrefix + '__text'"
+          :ref="classPrefix + '__text'"
+          :class="classPrefix + '__text ' + tClassContent"
+          :animation="animation"
+        >
+          <block v-if="content">
+            {{ content }}
+          </block>
+          <slot name="content" />
+          <slot />
+        </view>
+      </view>
+      <t-link
+        v-if="_link && _link.content"
+        :t-class="classPrefix + '__link ' + tClassLink"
+        :custom-style="tools._style([_link.style, _link.customStyle])"
+        :disabled="_link.disabled || false"
+        :hover="_link.hover || true"
+        :theme="_link.theme || 'primary'"
+        :size="_link.size || 'medium'"
+        :prefix-icon="_link.prefixIcon || ''"
+        :suffix-icon="_link.suffixIcon || ''"
+        :underline="_link.underline || false"
+        :content="_link.content || ''"
+        :navigator-props="_link.navigatorProps || null"
+        @complete="handleLinkClick"
+      />
+      <slot name="link" />
+      <view
+        :class="classPrefix + '__icon--right'"
+        @click="handleClose"
+      >
+        <slot name="close-btn" />
+        <block
+          v-if="_closeBtn"
+          name="icon"
+        >
+          <t-icon
+            :custom-style="_closeBtn.style || ''"
+            :t-class="tClassCloseBtn"
+            :prefix="_closeBtn.prefix"
+            :name="_closeBtn.name"
+            :size="_closeBtn.size"
+            :color="_closeBtn.color"
+            :aria-hidden="false"
+            :aria-label="_closeBtn.ariaLabel || '关闭'"
+            :aria-role="_closeBtn.ariaRole || 'button'"
+          />
+        </block>
+      </view>
+    </view>
+  </view>
+</template>
+<script>
+import TIcon from '../icon/icon';
+import TLink from '../link/link';
+import { uniComponent } from '../common/src/index';
+import { prefix } from '../common/config';
+import { getRect, unitConvert, calcIcon } from '../common/utils';
+import { isObject } from '../common/validator';
+import tools from '../common/utils.wxs';
+import { getMessageStyles } from './computed.js';
+import { messageDefaultData } from '../message/config';
+
+
+const SHOW_DURATION = 400;
+const name = `${prefix}-message`;
+const THEME_ICON = {
+  info: 'info-circle-filled',
+  success: 'check-circle-filled',
+  warning: 'error-circle-filled',
+  error: 'error-circle-filled',
+};
+const rawData = {
+  prefix,
+  classPrefix: name,
+  loop: -1,
+  animation: [],
+  showAnimation: [],
+  wrapTop: -999,
+  fadeClass: '',
+
+  closeTimeoutContext: 0,
+  nextAnimationContext: 0,
+  resetAnimation: uni.createAnimation({
+    duration: 0,
+    timingFunction: 'linear',
+  }),
+};
+
+export default uniComponent({
+  name,
+  options: {
+    styleIsolation: 'shared',
+  },
+  externalClasses: [
+    `${prefix}-class`,
+    `${prefix}-class-content`,
+    `${prefix}-class-icon`,
+    `${prefix}-class-link`,
+    `${prefix}-class-close-btn`,
+  ],
+  components: {
+    TIcon,
+    TLink,
+  },
+  props: {
+  },
+  emits: [
+    'duration-end',
+    'close-btn-click',
+    'link-click',
+  ],
+  data() {
+    return {
+      ...rawData,
+      ...messageDefaultData,
+      animation: [],
+
+      tools,
+    };
+  },
+  computed: {
+    innerMarquee() {
+      const { marquee } = this;
+      if (JSON.stringify(marquee) === '{}' || JSON.stringify(marquee) === 'true') {
+        return {
+          speed: 50,
+          loop: -1,
+          delay: 0,
+        };
+      }
+      return this.marquee;
+    },
+  },
+  watch: {
+    theme: {
+      handler(theme) {
+        this._icon = calcIcon(this.icon, THEME_ICON[theme]);
+      },
+      immediate: true,
+    },
+    icon: {
+      handler(icon) {
+        this._icon = calcIcon(icon, THEME_ICON[this.theme]);
+      },
+      immediate: true,
+    },
+
+
+    link: {
+      handler(v) {
+        const _link = isObject(v) ? { ...v } : { content: v };
+        this._link = _link;
+      },
+      immediate: true,
+    },
+
+    closeBtn: {
+      handler(v) {
+        this._closeBtn = calcIcon(v, 'close');
+      },
+      immediate: true,
+    },
+  },
+  mounted() {
+    this.memoInitialData();
+  },
+  beforeUnMount() {
+    this.clearMessageAnimation();
+  },
+  methods: {
+    getMessageStyles,
+    /** 记录组件设置的项目 */
+    memoInitialData() {
+      this.initialData = {
+        ...rawData,
+        ...messageDefaultData,
+        animation: [],
+      };
+    },
+
+    resetData(cb) {
+      const { initialData = {} } = this;
+      Object.keys(initialData).forEach((key) => {
+        this[key] = initialData[key];
+      });
+      setTimeout(cb);
+    },
+
+    /** 检查是否需要开启一个新的动画循环 */
+    checkAnimation() {
+      const { innerMarquee } = this;
+      if (!innerMarquee || innerMarquee.loop === 0) {
+        return;
+      }
+
+      const speeding = innerMarquee.speed;
+
+      if (this.loop > 0) {
+        this.loop -= 1;
+      } else if (this.loop === 0) {
+      // 动画回到初始位置
+        this.animation = this.resetAnimation
+          .translateX(0)
+          .step()
+          .export();
+        return;
+      }
+
+      if (this.nextAnimationContext) {
+        this.clearMessageAnimation();
+      }
+
+      const warpID = `#${name}__text-wrap`;
+      const nodeID = `#${name}__text`;
+      Promise.all([getRect(this, nodeID), getRect(this, warpID)]).then(([nodeRect, wrapRect]) => {
+        this.animation = this.resetAnimation.translateX(wrapRect.width).step()
+          .export();
+
+        setTimeout(() => {
+          const durationTime = ((nodeRect.width + wrapRect.width) / speeding) * 1000;
+          const nextAnimation = uni
+            .createAnimation({
+            // 默认50px/s
+              duration: durationTime,
+            })
+            .translateX(-nodeRect.width)
+            .step()
+            .export();
+
+          // 这里就只能用 setTimeout/20, nextTick 没用
+          // 不用这个的话会出现reset动画没跑完就开始跑这个等的奇怪问题
+          setTimeout(() => {
+            this.nextAnimationContext = setTimeout(this.checkAnimation.bind(this), durationTime);
+            this.animation = nextAnimation;
+          }, 20);
+        });
+      });
+    },
+
+    /** 清理动画循环 */
+    clearMessageAnimation() {
+      clearTimeout(this.nextAnimationContext);
+      this.nextAnimationContext = 0;
+    },
+
+    show(offsetHeight = 0) {
+      const { duration, innerMarquee, offset, id } = this;
+      this.visible = true;
+      this.loop = innerMarquee.loop || this.loop;
+      this.fadeClass = `${name}__fade`;
+      this.wrapTop = unitConvert(offset[0]) + offsetHeight;
+
+      this.reset();
+      setTimeout(() => {
+        this.checkAnimation();
+      });
+
+      if (duration && duration > 0) {
+        this.closeTimeoutContext = setTimeout(() => {
+          this.hide();
+          this.$emit('duration-end', { self: this });
+        }, duration);
+      }
+      const wrapID = id ? `#${id}` : `#${name}`;
+
+      setTimeout(() => {
+        getRect(this, wrapID)
+          .then((wrapRect) => {
+            this.height = wrapRect.height;
+            setTimeout(() => {
+              this.fadeClass = '';
+            });
+          })
+          .catch(() => {
+          });
+      });
+    },
+
+    hide() {
+      this.reset();
+      this.fadeClass = `${name}__fade`;
+
+      setTimeout(() => {
+        this.visible = false;
+        this.animation = [];
+      }, SHOW_DURATION);
+      if (typeof this.onHide === 'function') {
+        this.onHide();
+      }
+    },
+
+    // 重置定时器
+    reset() {
+      if (this.nextAnimationContext) {
+        this.clearMessageAnimation();
+      }
+      clearTimeout(this.closeTimeoutContext);
+      this.closeTimeoutContext = 0;
+    },
+
+    handleClose() {
+      this.hide();
+      this.$emit('close-btn-click');
+    },
+
+    handleLinkClick() {
+      this.$emit('link-click');
+    },
+  },
+});
+</script>
+<style scoped>
+@import './message-item.css';
+</style>

package/dist/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;
+}

package/dist/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';
+  },
+};

package/dist/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;
+    });
+  },
+};

package/dist/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);
+    },
+  },
+};

package/dist/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();

package/dist/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;