@tdesign/uniapp 0.0.1-alpha.1 → 0.7.0

package/dist/guide/guide.vue

@@ -0,0 +1,544 @@
+<template>
+  <view>
+    <t-overlay
+      v-if="modeType === 'popover'"
+      :visible="visible"
+      :using-custom-navbar="usingCustomNavbar"
+      :custom-navbar-height="customNavbarHeight"
+      background-color="transparent"
+      :z-index="zIndex"
+    >
+      <view :class="tClass + ' ' + classPrefix">
+        <view
+          :class="tClassReference + ' ' + classPrefix + '__reference ' + (nonOverlay ? classPrefix + '__reference--nonoverlay' : '')"
+          :style="referenceStyle"
+        />
+        <view
+          :class="tClassPopover + ' ' + classPrefix + '__container ' + (title || body ? classPrefix + '__container--' + modeType : '')"
+          :style="popoverStyle"
+        >
+          <ContentComp
+            :title="title"
+            :body="body"
+            :current="_current"
+            :class-prefix="classPrefix"
+            :prefix="prefix"
+            :skip-button="skipButton"
+            :back-button="backButton"
+            :next-button="nextButton"
+            :finish-button="finishButton"
+            :mode-type="modeType"
+            :hide-skip="hideSkip"
+            :hide-back="hideBack"
+            :steps="steps"
+            :t-class-tooltip="tClassTooltip"
+            :t-class-body="tClassBody"
+            :t-class-title="tClassTitle"
+            :t-class-footer="tClassFooter"
+            @onTplButtonTap="onTplButtonTap"
+          >
+            <template #content-0>
+              <slot name="content-0" />
+            </template>
+            <template #content-1>
+              <slot name="content-1" />
+            </template>
+            <template #content-2>
+              <slot name="content-2" />
+            </template>
+            <template #content-3>
+              <slot name="content-3" />
+            </template>
+            <template #content-4>
+              <slot name="content-4" />
+            </template>
+            <template #content-5>
+              <slot name="content-5" />
+            </template>
+            <template #content-6>
+              <slot name="content-6" />
+            </template>
+
+            <template #title-0>
+              <slot name="title-0" />
+            </template>
+            <template #title-1>
+              <slot name="title-1" />
+            </template>
+            <template #title-2>
+              <slot name="title-2" />
+            </template>
+            <template #title-3>
+              <slot name="title-3" />
+            </template>
+            <template #title-4>
+              <slot name="title-4" />
+            </template>
+            <template #title-5>
+              <slot name="title-5" />
+            </template>
+            <template #title-6>
+              <slot name="title-6" />
+            </template>
+
+            <template #body-0>
+              <slot name="body-0" />
+            </template>
+            <template #body-1>
+              <slot name="body-1" />
+            </template>
+            <template #body-2>
+              <slot name="body-2" />
+            </template>
+            <template #body-3>
+              <slot name="body-3" />
+            </template>
+            <template #body-4>
+              <slot name="body-4" />
+            </template>
+            <template #body-5>
+              <slot name="body-5" />
+            </template>
+            <template #body-6>
+              <slot name="body-6" />
+            </template>
+          </ContentComp>
+        </view>
+      </view>
+    </t-overlay>
+    <t-popup
+      v-else-if="modeType === 'dialog'"
+      :visible="visible"
+      :show-overlay="!nonOverlay"
+      :using-custom-navbar="usingCustomNavbar"
+      :custom-navbar-height="customNavbarHeight"
+      :z-index="zIndex"
+      placement="center"
+    >
+      <view :class="tClass + ' ' + classPrefix">
+        <view :class="tClassPopover + ' ' + classPrefix + '__container ' + (title || body ? classPrefix + '__container--' + modeType : '')">
+          <ContentComp
+            :title="title"
+            :body="body"
+            :current="_current"
+            :class-prefix="classPrefix"
+            :prefix="prefix"
+            :skip-button="skipButton"
+            :back-button="backButton"
+            :next-button="nextButton"
+            :finish-button="finishButton"
+            :mode-type="modeType"
+            :hide-skip="hideSkip"
+            :hide-back="hideBack"
+            :steps="steps"
+            :t-class-tooltip="tClassTooltip"
+            :t-class-body="tClassBody"
+            :t-class-title="tClassTitle"
+            :t-class-footer="tClassFooter"
+            @onTplButtonTap="onTplButtonTap"
+          >
+            <template #content-0>
+              <slot name="content-0" />
+            </template>
+            <template #content-1>
+              <slot name="content-1" />
+            </template>
+            <template #content-2>
+              <slot name="content-2" />
+            </template>
+            <template #content-3>
+              <slot name="content-3" />
+            </template>
+            <template #content-4>
+              <slot name="content-4" />
+            </template>
+            <template #content-5>
+              <slot name="content-5" />
+            </template>
+            <template #content-6>
+              <slot name="content-6" />
+            </template>
+
+            <template #title-0>
+              <slot name="title-0" />
+            </template>
+            <template #title-1>
+              <slot name="title-1" />
+            </template>
+            <template #title-2>
+              <slot name="title-2" />
+            </template>
+            <template #title-3>
+              <slot name="title-3" />
+            </template>
+            <template #title-4>
+              <slot name="title-4" />
+            </template>
+            <template #title-5>
+              <slot name="title-5" />
+            </template>
+            <template #title-6>
+              <slot name="title-6" />
+            </template>
+
+            <template #body-0>
+              <slot name="body-0" />
+            </template>
+            <template #body-1>
+              <slot name="body-1" />
+            </template>
+            <template #body-2>
+              <slot name="body-2" />
+            </template>
+            <template #body-3>
+              <slot name="body-3" />
+            </template>
+            <template #body-4>
+              <slot name="body-4" />
+            </template>
+            <template #body-5>
+              <slot name="body-5" />
+            </template>
+            <template #body-6>
+              <slot name="body-6" />
+            </template>
+          </ContentComp>
+        </view>
+      </view>
+    </t-popup>
+  </view>
+</template>
+
+<script>
+import TOverlay from '../overlay/overlay';
+import TButton from '../button/button';
+import TPopup from '../popup/popup';
+import { uniComponent } from '../common/src/index';
+import props from './props';
+import { prefix } from '../common/config';
+import { isFunction, isNumeric } from '../common/validator';
+import { debounce, getRect, rpx2px, styles, unitConvert, nextTick, systemInfo, coalesce } from '../common/utils';
+import ContentComp from './content.vue';
+
+import useCustomNavbar from '../mixins/using-custom-navbar';
+
+const name = `${prefix}-guide`;
+
+let that;
+
+export default uniComponent({
+  name,
+  options: {
+    styleIsolation: 'shared',
+  },
+  controlledProps: [
+    {
+      key: 'current',
+      event: 'change',
+    },
+  ],
+  externalClasses: [
+    `${prefix}-class`,
+    `${prefix}-class-reference`,
+    `${prefix}-class-popover`,
+
+    `${prefix}-class-tooltip`,
+    `${prefix}-class-title`,
+    `${prefix}-class-body`,
+    `${prefix}-class-footer`,
+
+    `${prefix}-class-skip`,
+    `${prefix}-class-next`,
+    `${prefix}-class-back`,
+    `${prefix}-class-finish`,
+  ],
+  mixins: [
+    useCustomNavbar,
+  ],
+  components: {
+    TOverlay,
+    TButton,
+    TPopup,
+    ContentComp,
+  },
+  props: {
+    ...props,
+  },
+  data() {
+    return {
+      prefix,
+      classPrefix: name,
+      visible: false,
+      _current: -1,
+      _steps: [],
+      referenceStyle: '',
+      popoverStyle: '',
+      title: '',
+      body: '',
+      nonOverlay: false,
+      modeType: '',
+
+      skipButton: {},
+      backButton: {},
+      nextButton: {},
+      finishButton: {},
+    };
+  },
+  watch: {
+    steps: {
+      handler() {
+        this._init();
+      },
+      deep: true,
+    },
+    current: {
+      handler(v) {
+        this._current = v;
+      },
+    },
+    _current: '_init',
+    showOverlay: '_init',
+  },
+  created() {
+    that = this;
+    // this._init =
+    this._getPlacement = this.getPlacement();
+  },
+  mounted() {
+    this._init();
+  },
+  methods: {
+    _init: debounce(() => that.init(), 20),
+    async init() {
+      console.log('doing init');
+      const { steps } = this;
+      const { _current } = this;
+      const step = steps[_current];
+      if (!step) {
+        this.visible = false;
+        return;
+      }
+
+      const modeType = (coalesce(step.mode, this.mode)) === 'dialog' ? 'dialog' : 'popover';
+      const showOverlay = coalesce(step.showOverlay, this.showOverlay);
+      this.nonOverlay = !showOverlay;
+      this.modeType = modeType;
+
+
+      // if (current === _current) return;
+      if (modeType === 'popover') {
+        const rect = await step.element();
+        console.log('rect', rect);
+        if (!rect) return;
+        const highlightPadding = rpx2px(coalesce(step.highlightPadding, this.highlightPadding));
+        const referenceTop = rect.top - highlightPadding;
+        const referenceRight = systemInfo.windowWidth - rect.right - highlightPadding;
+        const referenceLeft = rect.left - highlightPadding;
+        const referenceWidth = rect.width + 2 * highlightPadding;
+        const referenceHeight = rect.height + 2 * highlightPadding;
+
+        const style = {
+          top: `${referenceTop}px`,
+          right: `${referenceRight}px`,
+          left: `${referenceLeft}px`,
+          width: `${referenceWidth}px`,
+          height: `${referenceHeight}px`,
+        };
+        this._steps = this.steps;
+        // this._current = this.current;
+        this.visible = true;
+        this.referenceStyle = styles(style);
+        this.title = coalesce(step.title, '');
+        this.body = coalesce(step.body, '');
+        this.makeButtonProps(step, 'popover');
+
+        const popoverStyle = await this.placementOffset(step, style);
+        this.popoverStyle = popoverStyle;
+      } else {
+        this._steps = this.steps;
+        // this._current = this.current;
+        this.visible = true;
+        this.title = coalesce(step.title, '');
+        this.body = coalesce(step.body, '');
+        this.makeButtonProps(step, 'dialog');
+      }
+    },
+    async placementOffset({ placement, offset }, place) {
+      await nextTick();
+      const rect = await getRect(this, `.${name}__container`);
+      const style = this._getPlacement[placement]?.(rect, place, offset);
+      return styles({ position: 'absolute', ...style });
+    },
+    makeButtonProps(step, mode) {
+      const {
+        tClassSkip,
+        tClassNext,
+        tClassBack,
+        tClassFinish,
+      } = this;
+      let skipButton = coalesce(step.skipButtonProps, this.skipButtonProps);
+      const size = mode === 'popover' ? 'extra-small' : 'medium';
+      skipButton = {
+        theme: 'light',
+        content: '跳过',
+        size,
+        ...skipButton,
+        tClass: `${tClassSkip} ${name}__button ${skipButton?.class || ''}`,
+        type: 'skip',
+      };
+      let nextButton = coalesce(step.nextButtonProps, this.nextButtonProps);
+      nextButton = {
+        theme: 'primary',
+        content: '下一步',
+        size,
+        ...nextButton,
+        tClass: `${tClassNext} ${name}__button ${nextButton?.class || ''}`,
+        type: 'next',
+      };
+      nextButton = { ...nextButton, content: this.buttonContent(nextButton) };
+      let backButton = coalesce(step.backButtonProps, this.backButtonProps);
+      backButton = {
+        theme: 'light',
+        content: '返回',
+        size,
+        ...backButton,
+        tClass: `${tClassBack} ${name}__button ${backButton?.class || ''}`,
+        type: 'back',
+      };
+      let finishButton = coalesce(step.finishButtonProps, this.finishButtonProps);
+      finishButton = {
+        theme: 'primary',
+        content: '完成',
+        size,
+        ...finishButton,
+        tClass: `${tClassFinish} ${name}__button ${finishButton?.class || ''}`,
+        type: 'finish',
+      };
+      finishButton = { ...finishButton, content: this.buttonContent(finishButton) };
+
+      this.skipButton = skipButton;
+      this.nextButton = nextButton;
+      this.backButton = backButton;
+      this.finishButton = finishButton;
+    },
+    renderCounter() {
+      const { steps, _current, counter } = this;
+      const stepsTotal = steps.length;
+      const innerCurrent = _current + 1;
+      const popupSlotCounter = isFunction(counter) ? counter({ total: stepsTotal, current: innerCurrent }) : counter;
+      return counter ? popupSlotCounter : `(${innerCurrent}/${stepsTotal})`;
+    },
+    buttonContent(button) {
+      const { hideCounter } = this;
+      return `${button.content.replace(/ \(.*?\)/, '')} ${hideCounter ? '' : this.renderCounter()}`;
+    },
+    onTplButtonTap(e, { type }) {
+      console.log('onTplButtonTap.type', type);
+      const params = { e, current: this._current, total: this.steps.length };
+      switch (type) {
+        case 'next':
+          this.$emit('next-step-click', { next: this._current + 1, ...params });
+          // this.setData({ current: this..current + 1 });
+          this._current = this._current + 1;
+          break;
+        case 'skip':
+          this.$emit('skip', params);
+          // this.setData({ current: -1 });
+          this._current = -1;
+          break;
+        case 'back':
+          this.$emit('back', params);
+          // this.setData({ current: 0 });
+          this._current = 0;
+          break;
+        case 'finish':
+          this.$emit('finish', params);
+          // this.setData({ current: -1 });
+          this._current = -1;
+          break;
+        default:
+          break;
+      }
+      console.log('_current', this._current);
+      this.$emit('change', { current: this._current });
+    },
+    getPlacement() {
+      const space = rpx2px(32);
+      const offsetLeft = offset => unitConvert(isNumeric(offset?.[0]) ? `${offset?.[0]}rpx` : offset?.[0] || 0);
+      const offsetTop = offset => unitConvert(isNumeric(offset?.[1]) ? `${offset?.[1]}rpx` : offset?.[1] || 0);
+      const left = place => parseFloat(place.left);
+      const right = place => parseFloat(place.right);
+      const top = place => parseFloat(place.top);
+      const height = place => parseFloat(place.height);
+      const width = place => parseFloat(place.width);
+      return {
+        center: (rect, place, offset) => ({
+          top: `${Math.max(height(place) + top(place) + space + offsetTop(offset), 1)}px`,
+          left: `${Math.max(width(place) / 2 + left(place) - rect.width / 2 + offsetLeft(offset), 1)}px`,
+        }),
+        bottom: (rect, place, offset) => ({
+          top: `${Math.max(height(place) + top(place) + space + offsetTop(offset), 1)}px`,
+          left: `${Math.max(width(place) / 2 + left(place) - rect.width / 2 + offsetLeft(offset), 1)}px`,
+        }),
+        'bottom-left': (rect, place, offset) => ({
+          top: `${Math.max(height(place) + top(place) + space + offsetTop(offset), 1)}px`,
+          left: `${Math.max(left(place) + offsetLeft(offset), 1)}px`,
+        }),
+        'bottom-right': (rect, place, offset) => ({
+          top: `${Math.max(height(place) + top(place) + space + offsetTop(offset), 1)}px`,
+          right: `${Math.max(right(place) - offsetLeft(offset), 1)}px`,
+        }),
+        left: (rect, place, offset) => ({
+          top: `${Math.max(height(place) / 2 + top(place) - rect.height / 2 + offsetTop(offset), 1)}px`,
+          right: `${Math.max(width(place) + right(place) + space - offsetLeft(offset), 1)}px`,
+        }),
+        'left-top': (rect, place, offset) => ({
+          top: `${Math.max(top(place) + offsetTop(offset), 1)}px`,
+          right: `${Math.max(width(place) + right(place) + space - offsetLeft(offset), 1)}px`,
+        }),
+        'left-bottom': (rect, place, offset) => ({
+          top: `${Math.max(top(place) + height(place) - rect.height - offsetTop(offset), 1)}px`,
+          right: `${Math.max(width(place) + right(place) + space - offsetLeft(offset), 1)}px`,
+        }),
+        right: (rect, place, offset) => ({
+          top: `${Math.max(height(place) / 2 + top(place) - rect.height / 2 + offsetTop(offset), 1)}px`,
+          left: `${Math.max(left(place) + width(place) + space + offsetLeft(offset), 1)}px`,
+        }),
+        'right-top': (rect, place, offset) => ({
+          top: `${Math.max(top(place) + offsetTop(offset), 1)}px`,
+          left: `${Math.max(left(place) + width(place) + space + offsetLeft(offset), 1)}px`,
+        }),
+        'right-bottom': (rect, place, offset) => ({
+          top: `${Math.max(top(place) + height(place) - rect.height - offsetTop(offset), 1)}px`,
+          left: `${Math.max(left(place) + width(place) + space + offsetLeft(offset), 1)}px`,
+        }),
+        top: (rect, place, offset) => ({
+          top: `${Math.max(top(place) - rect.height - space + offsetTop(offset), 1)}px`,
+          left: `${Math.max(width(place) / 2 + left(place) - rect.width / 2 + offsetLeft(offset), 1)}px`,
+        }),
+        'top-left': (rect, place, offset) => ({
+          top: `${Math.max(top(place) - rect.height - space + offsetTop(offset), 1)}px`,
+          left: `${Math.max(left(place) + offsetLeft(offset), 1)}px`,
+        }),
+        'top-right': (rect, place, offset) => ({
+          top: `${Math.max(top(place) - rect.height - space + offsetTop(offset), 1)}px`,
+          right: `${Math.max(right(place) - offsetLeft(offset), 1)}px`,
+        }),
+      };
+    },
+  },
+});
+
+</script>
+<style scoped>
+@import './guide.css';
+</style>
+<style scoped lang="less">
+.t-guide__footer--dialog {
+  // 适配 QQ 小程序等
+  display: inline-flex;
+  .t-button {
+    flex-grow: 1;
+  }
+}
+</style>

package/dist/guide/props.ts

@@ -0,0 +1,98 @@
+/* eslint-disable */
+
+/**
+ * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
+ * */
+
+import type { TdGuideProps } from './type';
+export default {
+  /** 透传 返回按钮 的全部属性，示例：`{ content: '返回', theme: 'default' }` */
+  backButtonProps: {
+    type: Object,
+  },
+  /** 用于自定义渲染计数部分 */
+  counter: {
+    type: [String, Function],
+  },
+  /** 当前步骤，即整个引导的进度。-1 则不展示，用于需要中断展示的场景 */
+  current: {
+    type: Number,
+  },
+  /** 当前步骤，即整个引导的进度。-1 则不展示，用于需要中断展示的场景，非受控属性 */
+  defaultCurrent: {
+    type: Number,
+  },
+  /** 透传 完成按钮 的全部属性，示例：`{ content: '完成', theme: 'primary' }` */
+  finishButtonProps: {
+    type: Object,
+  },
+  /** 是否隐藏返回按钮 */
+  hideBack: Boolean,
+  /** 是否隐藏计数 */
+  hideCounter: Boolean,
+  /** 是否隐藏跳过按钮 */
+  hideSkip: Boolean,
+  /** 高亮框的内边距，单位rpx */
+  highlightPadding: {
+    type: Number,
+    default: 16,
+  },
+  /** 引导框的类型 */
+  mode: {
+    type: String,
+    default: 'popover' as TdGuideProps['mode'],
+    validator(val: TdGuideProps['mode']): boolean {
+      if (!val) return true;
+      return ['popover', 'dialog'].includes(val);
+    },
+  },
+  /** 透传 下一步按钮 的全部属性，示例：{ content: '下一步', theme: 'primary' } */
+  nextButtonProps: {
+    type: Object,
+  },
+  /** 是否出现遮罩层 */
+  showOverlay: {
+    type: Boolean,
+    default: true,
+  },
+  /** 透传 跳过按钮 的全部属性，{ content: '跳过', theme: 'default' } */
+  skipButtonProps: {
+    type: Object,
+  },
+  /** 用于定义每个步骤的内容，包括高亮的节点、相对位置和具体的文案内容等 */
+  steps: {
+    type: Array,
+  },
+  /** 是否使用了自定义导航栏 */
+  usingCustomNavbar: Boolean,
+  /** 提示框的层级 */
+  zIndex: {
+    type: Number,
+    default: 999999,
+  },
+  /** 点击返回按钮时触发 */
+  onBack: {
+    type: Function,
+    default: () => ({}),
+  },
+  /** 当前步骤发生变化时触发 */
+  onChange: {
+    type: Function,
+    default: () => ({}),
+  },
+  /** 点击完成按钮时触发 */
+  onFinish: {
+    type: Function,
+    default: () => ({}),
+  },
+  /** 点击下一步时触发 */
+  onNextStepClick: {
+    type: Function,
+    default: () => ({}),
+  },
+  /** 点击跳过按钮时触发 */
+  onSkip: {
+    type: Function,
+    default: () => ({}),
+  },
+};