@tdesign/uniapp 0.0.1-alpha.1 → 0.7.0

package/dist/guide/content.vue

@@ -0,0 +1,325 @@
+<template>
+  <!-- #ifdef VUE2 -->
+  <view>
+    <!-- #endif -->
+    <slot
+      v-if="!title && !body"
+      :name="'content-' + current"
+    />
+    <block v-else>
+      <view :class="tClassTooltip">
+        <view
+          v-if="title"
+          :class="tClassTitle + ' ' + classPrefix + '__title--' + modeType"
+        >
+          {{ title }}
+        </view>
+        <slot
+          v-else
+          :name="'title-' + current"
+        />
+        <view
+          v-if="body"
+          :class="tClassBody + ' ' + classPrefix + '__body--' + modeType"
+        >
+          {{ body }}
+        </view>
+        <slot
+          v-else
+          :name="'body-' + current"
+        />
+      </view>
+      <view
+        v-if="current !== -1"
+        :class="tClassFooter + ' ' + classPrefix + '__footer ' + classPrefix + '__footer--' + modeType"
+      >
+        <block
+          v-if="current < steps.length - 1 && !hideSkip"
+          name="button"
+        >
+          <t-button
+            :t-id="skipButton.tId"
+            :custom-style="skipButton.style"
+            :block="skipButton.block"
+            :t-class="useVirtualHost ? skipButton.tClass : ''"
+            :class="!useVirtualHost ? skipButton.tClass : ''"
+            :disabled="skipButton.disabled"
+            :data-type="skipButton.dataType"
+            :data-extra="skipButton.dataExtra"
+            :custom-dataset="skipButton.customDataset"
+            :content="skipButton.content"
+            :icon="skipButton.icon"
+            :loading="skipButton.loading"
+            :loading-props="skipButton.loadingProps"
+            :theme="skipButton.theme"
+            :ghost="skipButton.ghost"
+            :shape="skipButton.shape"
+            :size="skipButton.size"
+            :variant="skipButton.variant"
+            :open-type="skipButton.openType"
+            :hover-class="skipButton.hoverClass"
+            :hover-stop-propagation="skipButton.hoverStopPropagation"
+            :hover-start-time="skipButton.hoverStartTime"
+            :hover-stay-time="skipButton.hoverStayTime"
+            :lang="skipButton.lang"
+            :session-from="skipButton.sessionFrom"
+            :send-message-title="skipButton.sendMessageTitle"
+            :send-message-path="skipButton.sendMessagePath"
+            :send-message-img="skipButton.sendMessageImg"
+            :app-parameter="skipButton.appParameter"
+            :show-message-card="skipButton.showMessageCard"
+            :aria-label="skipButton.ariaLabel"
+            @click="(e) => onTplButtonTap(e, { type: skipButton.type })"
+            @getuserinfo="(e) => onTplButtonTap(e, { type: skipButton.type })"
+            @contact="(e) => onTplButtonTap(e, { type: skipButton.type })"
+            @getphonenumber="(e) => onTplButtonTap(e, { type: skipButton.type })"
+            @error="(e) => onTplButtonTap(e, { type: skipButton.type })"
+            @opensetting="(e) => onTplButtonTap(e, { type: skipButton.type })"
+            @launchapp="(e) => onTplButtonTap(e, { type: skipButton.type })"
+            @agreeprivacyauthorization="(e) => onTplButtonTap(e, { type: skipButton.type })"
+          />
+        </block>
+        <block
+          v-else-if="current === steps.length - 1 && !hideBack"
+          name="button"
+        >
+          <t-button
+            :t-id="backButton.tId"
+            :custom-style="backButton.style"
+            :block="backButton.block"
+            :t-class="useVirtualHost ? backButton.tClass : ''"
+            :class="!useVirtualHost ? backButton.tClass : ''"
+            :disabled="backButton.disabled"
+            :data-type="backButton.dataType"
+            :data-extra="backButton.dataExtra"
+            :custom-dataset="backButton.customDataset"
+            :content="backButton.content"
+            :icon="backButton.icon"
+            :loading="backButton.loading"
+            :loading-props="backButton.loadingProps"
+            :theme="backButton.theme"
+            :ghost="backButton.ghost"
+            :shape="backButton.shape"
+            :size="backButton.size"
+            :variant="backButton.variant"
+            :open-type="backButton.openType"
+            :hover-class="backButton.hoverClass"
+            :hover-stop-propagation="backButton.hoverStopPropagation"
+            :hover-start-time="backButton.hoverStartTime"
+            :hover-stay-time="backButton.hoverStayTime"
+            :lang="backButton.lang"
+            :session-from="backButton.sessionFrom"
+            :send-message-title="backButton.sendMessageTitle"
+            :send-message-path="backButton.sendMessagePath"
+            :send-message-img="backButton.sendMessageImg"
+            :app-parameter="backButton.appParameter"
+            :show-message-card="backButton.showMessageCard"
+            :aria-label="backButton.ariaLabel"
+            @click="(e) => onTplButtonTap(e, { type: backButton.type })"
+            @getuserinfo="(e) => onTplButtonTap(e, { type: backButton.type })"
+            @contact="(e) => onTplButtonTap(e, { type: backButton.type })"
+            @getphonenumber="(e) => onTplButtonTap(e, { type: backButton.type })"
+            @error="(e) => onTplButtonTap(e, { type: backButton.type })"
+            @opensetting="(e) => onTplButtonTap(e, { type: backButton.type })"
+            @launchapp="(e) => onTplButtonTap(e, { type: backButton.type })"
+            @agreeprivacyauthorization="(e) => onTplButtonTap(e, { type: backButton.type })"
+          />
+        </block>
+        <block
+          v-if="current < steps.length - 1"
+          name="button"
+        >
+          <t-button
+            :t-id="nextButton.tId"
+            :custom-style="nextButton.style"
+            :block="nextButton.block"
+            :t-class="useVirtualHost ? nextButton.tClass : ''"
+            :class="!useVirtualHost ? nextButton.tClass : ''"
+            :disabled="nextButton.disabled"
+            :data-type="nextButton.dataType"
+            :data-extra="nextButton.dataExtra"
+            :custom-dataset="nextButton.customDataset"
+            :content="nextButton.content"
+            :icon="nextButton.icon"
+            :loading="nextButton.loading"
+            :loading-props="nextButton.loadingProps"
+            :theme="nextButton.theme"
+            :ghost="nextButton.ghost"
+            :shape="nextButton.shape"
+            :size="nextButton.size"
+            :variant="nextButton.variant"
+            :open-type="nextButton.openType"
+            :hover-class="nextButton.hoverClass"
+            :hover-stop-propagation="nextButton.hoverStopPropagation"
+            :hover-start-time="nextButton.hoverStartTime"
+            :hover-stay-time="nextButton.hoverStayTime"
+            :lang="nextButton.lang"
+            :session-from="nextButton.sessionFrom"
+            :send-message-title="nextButton.sendMessageTitle"
+            :send-message-path="nextButton.sendMessagePath"
+            :send-message-img="nextButton.sendMessageImg"
+            :app-parameter="nextButton.appParameter"
+            :show-message-card="nextButton.showMessageCard"
+            :aria-label="nextButton.ariaLabel"
+            @click="(e) => onTplButtonTap(e, { type: nextButton.type })"
+            @getuserinfo="(e) => onTplButtonTap(e, { type: nextButton.type })"
+            @contact="(e) => onTplButtonTap(e, { type: nextButton.type })"
+            @getphonenumber="(e) => onTplButtonTap(e, { type: nextButton.type })"
+            @error="(e) => onTplButtonTap(e, { type: nextButton.type })"
+            @opensetting="(e) => onTplButtonTap(e, { type: nextButton.type })"
+            @launchapp="(e) => onTplButtonTap(e, { type: nextButton.type })"
+            @agreeprivacyauthorization="(e) => onTplButtonTap(e, { type: nextButton.type })"
+          />
+        </block>
+        <block
+          v-else
+          name="button"
+        >
+          <t-button
+            :t-id="finishButton.tId"
+            :custom-style="finishButton.style"
+            :block="finishButton.block"
+            :t-class="useVirtualHost ? finishButton.tClass : ''"
+            :class="!useVirtualHost ? finishButton.tClass : ''"
+            :disabled="finishButton.disabled"
+            :data-type="finishButton.dataType"
+            :data-extra="finishButton.dataExtra"
+            :custom-dataset="finishButton.customDataset"
+            :content="finishButton.content"
+            :icon="finishButton.icon"
+            :loading="finishButton.loading"
+            :loading-props="finishButton.loadingProps"
+            :theme="finishButton.theme"
+            :ghost="finishButton.ghost"
+            :shape="finishButton.shape"
+            :size="finishButton.size"
+            :variant="finishButton.variant"
+            :open-type="finishButton.openType"
+            :hover-class="finishButton.hoverClass"
+            :hover-stop-propagation="finishButton.hoverStopPropagation"
+            :hover-start-time="finishButton.hoverStartTime"
+            :hover-stay-time="finishButton.hoverStayTime"
+            :lang="finishButton.lang"
+            :session-from="finishButton.sessionFrom"
+            :send-message-title="finishButton.sendMessageTitle"
+            :send-message-path="finishButton.sendMessagePath"
+            :send-message-img="finishButton.sendMessageImg"
+            :app-parameter="finishButton.appParameter"
+            :show-message-card="finishButton.showMessageCard"
+            :aria-label="finishButton.ariaLabel"
+            @click="(e) => onTplButtonTap(e, { type: finishButton.type })"
+            @getuserinfo="(e) => onTplButtonTap(e, { type: finishButton.type })"
+            @contact="(e) => onTplButtonTap(e, { type: finishButton.type })"
+            @getphonenumber="(e) => onTplButtonTap(e, { type: finishButton.type })"
+            @error="(e) => onTplButtonTap(e, { type: finishButton.type })"
+            @opensetting="(e) => onTplButtonTap(e, { type: finishButton.type })"
+            @launchapp="(e) => onTplButtonTap(e, { type: finishButton.type })"
+            @agreeprivacyauthorization="(e) => onTplButtonTap(e, { type: finishButton.type })"
+          />
+        </block>
+      </view>
+    </block>
+  <!-- #ifdef VUE2 -->
+  </view>
+  <!-- #endif -->
+</template>
+<script>
+import TButton from '../button/button.vue';
+import { canUseVirtualHost } from '../common/version';
+
+
+export default {
+  options: {
+    styleIsolation: 'shared',
+  },
+  components: {
+    TButton,
+  },
+  props: {
+    title: {
+      type: String,
+      default: '',
+    },
+    body: {
+      type: String,
+      default: '',
+    },
+    current: {
+      type: [String, Number],
+      default: '',
+    },
+    classPrefix: {
+      type: String,
+      default: '',
+    },
+    prefix: {
+      type: String,
+      default: '',
+    },
+    tClassTooltip: {
+      type: String,
+      default: '',
+    },
+    tClassBody: {
+      type: String,
+      default: '',
+    },
+    tClassTitle: {
+      type: String,
+      default: '',
+    },
+    tClassFooter: {
+      type: String,
+      default: '',
+    },
+    skipButton: {
+      type: [Object, null],
+      default: null,
+    },
+    backButton: {
+      type: [Object, null],
+      default: null,
+    },
+    nextButton: {
+      type: [Object, null],
+      default: null,
+    },
+    finishButton: {
+      type: [Object, null],
+      default: null,
+    },
+    modeType: {
+      type: String,
+      default: '',
+    },
+    hideSkip: {
+      type: Boolean,
+      default: false,
+    },
+    hideBack: {
+      type: Boolean,
+      default: false,
+    },
+    steps: {
+      type: Array,
+      default: () => ([]),
+    },
+  },
+  emits: [
+    'onTplButtonTap',
+  ],
+  data() {
+    return {
+      useVirtualHost: canUseVirtualHost(),
+    };
+  },
+  methods: {
+    onTplButtonTap(...args) {
+      this.$emit('onTplButtonTap', ...args);
+    },
+  },
+};
+</script>
+<style scoped>
+@import './guide.css';
+</style>

package/dist/guide/guide.css

@@ -0,0 +1,64 @@
+.t-guide__reference {
+  position: absolute;
+  box-shadow: 0 0 0 0 var(--td-guide-reference-mask-color, var(--td-font-gray-2, rgba(0, 0, 0, 0.6))), var(--td-guide-reference-mask-color, var(--td-font-gray-2, rgba(0, 0, 0, 0.6))) 0 0 0 5000px;
+  border-radius: var(--td-guide-reference-border-radius, var(--td-radius-default, 12rpx));
+  transition: all var(--td-anim-duration-base, 0.2s) var(--td-anim-time-fn-ease-out, cubic-bezier(0, 0, 0.15, 1));
+}
+.t-guide__reference--nonoverlay {
+  box-shadow: none;
+  border: var(--td-guide-reference-border, 4rpx solid var(--td-brand-color, var(--td-primary-color-7, #0052d9)));
+}
+.t-guide__container {
+  display: inline-block;
+}
+.t-guide__container--popover {
+  background-color: var(--td-guide-popover-bg-color, var(--td-bg-color-container, var(--td-font-white-1, #ffffff)));
+  border: var(--td-guide-popover-border, 2rpx solid var(--td-component-border, var(--td-gray-color-4, #dcdcdc)));
+  border-radius: var(--td-guide-popover-border-radius, var(--td-radius-large, 18rpx));
+  box-shadow: var(--td-guide-popover-shadow, var(--td-shadow-3, 0 6px 30px 5px rgba(0, 0, 0, 0.05), 0 16px 24px 2px rgba(0, 0, 0, 0.04), 0 8px 10px -5px rgba(0, 0, 0, 0.08)));
+  padding: var(--td-guide-popover-padding, var(--td-spacer-2, 32rpx));
+  min-width: var(--td-guide-popover-min-width, 480rpx);
+  max-width: var(--td-guide-popover-max-width, 540rpx);
+}
+.t-guide__container--dialog {
+  background-color: var(--td-guide-popover-bg-color, var(--td-bg-color-container, var(--td-font-white-1, #ffffff)));
+  border-radius: var(--td-guide-dialog-border-radius, var(--td-radius-extraLarge, 24rpx));
+  padding: var(--td-guide-dialog-padding, var(--td-spacer-3, 48rpx) 0);
+  width: var(--td-guide-dialog-width, 622rpx);
+}
+.t-guide__title--popover {
+  text-align: var(--td-guide-popover-title-text-align, left);
+  color: var(--td-guide-title-color, var(--td-text-color-primary, var(--td-font-gray-1, rgba(0, 0, 0, 0.9))));
+  font: var(--td-guide-popover-title-font, var(--td-font-title-medium, 600 32rpx / 48rpx var(--td-font-family, PingFang SC, Microsoft YaHei, Arial Regular)));
+}
+.t-guide__title--dialog {
+  text-align: var(--td-guide-dialog-title-text-align, center);
+  color: var(--td-guide-title-color, var(--td-text-color-primary, var(--td-font-gray-1, rgba(0, 0, 0, 0.9))));
+  font: var(--td-guide-dialog-title-font, var(--td-font-title-large, 600 36rpx / 52rpx var(--td-font-family, PingFang SC, Microsoft YaHei, Arial Regular)));
+}
+.t-guide__body--popover {
+  margin-top: var(--td-guide-popover-body-margin-top, 8rpx);
+  text-align: var(--td-guide-popover-body-text-align, left);
+  color: var(--td-guide-body-color, var(--td-text-color-secondary, var(--td-font-gray-2, rgba(0, 0, 0, 0.6))));
+  font: var(--td-guide-popover-body-font, var(--td-font-body-medium, 28rpx / 44rpx var(--td-font-family, PingFang SC, Microsoft YaHei, Arial Regular)));
+}
+.t-guide__body--dialog {
+  margin-top: var(--td-guide-dialog-body-margin-top, 16rpx);
+  text-align: var(--td-guide-dialog-body-text-align, center);
+  color: var(--td-guide-body-color, var(--td-text-color-secondary, var(--td-font-gray-2, rgba(0, 0, 0, 0.6))));
+  font: var(--td-guide-dialog-body-font, var(--td-font-body-large, 32rpx / 48rpx var(--td-font-family, PingFang SC, Microsoft YaHei, Arial Regular)));
+}
+.t-guide__footer {
+  text-align: var(--td-guide-footer-text-align, right);
+  margin-top: var(--td-guide-footer-margin-top, var(--td-spacer-3, 48rpx));
+}
+.t-guide__footer :deep(.t-guide__button + .t-guide__button) {
+  margin-left: var(--td-guide-footer-button-space, var(--td-spacer-1, 24rpx));
+}
+.t-guide__footer--dialog {
+  display: flex;
+  padding: var(--td-guide-dialog-footer-button-padding, 0 var(--td-spacer-3, 48rpx));
+}
+.t-guide__footer--dialog :deep(.t-guide__button:last-child) {
+  flex-grow: 1;
+}