@tdesign/uniapp 0.0.1-alpha.1 → 0.7.0

package/dist/dialog/dialog.vue

@@ -0,0 +1,422 @@
+<template>
+  <t-popup
+    name="dialog"
+    :custom-style="tools._style([customStyle])"
+    :t-class="classPrefix + '__wrapper'"
+    :visible="dataVisible"
+    :show-overlay="dataShowOverlay"
+    :close-on-overlay-click="dataCloseOnOverlayClick"
+    :prevent-scroll-through="dataPreventScrollThrough"
+    :overlay-props="dataOverlayProps"
+    :z-index="dataZIndex"
+    placement="center"
+    :using-custom-navbar="dataUsingCustomNavbar"
+    @visible-change="overlayClick"
+  >
+    <template #content>
+      <view
+        :class="classPrefix + ' ' + tClass"
+      >
+        <slot name="top" />
+        <view
+          v-if="dataCloseBtn"
+          :class="classPrefix + '__close-btn'"
+          @click="onClose"
+        >
+          <template
+            v-if="tools.isObject(dataCloseBtn)"
+          >
+            <t-icon
+              :custom-style="dataCloseBtn.style || ''"
+              :prefix="dataCloseBtn.prefix"
+              :name="dataCloseBtn.name || 'close'"
+              :size="dataCloseBtn.size || 22"
+              :color="dataCloseBtn.color"
+              :aria-hidden="true"
+              :aria-label="dataCloseBtn.ariaLabel"
+              :aria-role="dataCloseBtn.ariaRole"
+            />
+          </template>
+          <t-icon
+            v-else
+            name="close"
+            size="44rpx"
+          />
+        </view>
+        <view :class="classPrefix + '__content ' + tClassContent">
+          <view
+            v-if="dataTitle"
+            :class="classPrefix + '__header'"
+          >
+            {{ dataTitle }}
+          </view>
+          <slot name="title" />
+          <view
+            v-if="dataContent"
+            :class="classPrefix + '__body'"
+          >
+            <text :class="classPrefix + '__body-text'">
+              {{ dataContent }}
+            </text>
+          </view>
+          <slot name="content" />
+        </view>
+        <slot name="middle" />
+        <view
+          :class="
+            tools.cls(classPrefix + '__footer', [
+              ['column', dataButtonLayout === 'vertical'],
+              ['full', buttonVariant == 'text' && (!dataActions || dataActions.length == 0)]
+            ])
+          "
+        >
+          <template v-if="dataActions">
+            <t-button
+              v-for="(actionItem, index) in dataActions"
+              :key="index"
+              :t-id="actionItem.tId"
+              :custom-style="actionItem.style"
+              :block="coalesce(actionItem.block, true)"
+              :t-class="useVirtualHost ? getActionClass(classPrefix, dataButtonLayout, actionItem, tClassAction) : ''"
+              :class="!useVirtualHost ? getActionClass(classPrefix, dataButtonLayout, actionItem, tClassAction) : ''"
+              :disabled="actionItem.disabled"
+              :data-type="'action'"
+              :data-extra="coalesce(actionItem.index, index)"
+              :custom-dataset="actionItem.customDataset"
+              :content="actionItem.content"
+              :icon="actionItem.icon"
+              :loading="actionItem.loading"
+              :loading-props="actionItem.loadingProps"
+              :theme="actionItem.theme"
+              :ghost="actionItem.ghost"
+              :shape="actionItem.shape"
+              :size="actionItem.size"
+              :variant="actionItem.variant"
+              :open-type="actionItem.openType"
+              :hover-class="actionItem.hoverClass"
+              :hover-stop-propagation="actionItem.hoverStopPropagation"
+              :hover-start-time="actionItem.hoverStartTime"
+              :hover-stay-time="actionItem.hoverStayTime"
+              :lang="actionItem.lang"
+              :session-from="actionItem.sessionFrom"
+              :send-message-title="actionItem.sendMessageTitle"
+              :send-message-path="actionItem.sendMessagePath"
+              :send-message-img="actionItem.sendMessageImg"
+              :app-parameter="actionItem.appParameter"
+              :show-message-card="actionItem.showMessageCard"
+              :aria-label="actionItem.ariaLabel"
+              @click="onTplButtonTap($event, { type: 'action', extra: index })"
+              @getuserinfo="onTplButtonTap($event, { type: 'action', extra: index })"
+              @contact="onTplButtonTap($event, { type: 'action', extra: index })"
+              @getphonenumber="onTplButtonTap($event, { type: 'action', extra: index })"
+              @error="onTplButtonTap($event, { type: 'action', extra: index })"
+              @opensetting="onTplButtonTap($event, { type: 'action', extra: index })"
+              @launchapp="onTplButtonTap($event, { type: 'action', extra: index })"
+              @agreeprivacyauthorization="onTplButtonTap($event, { type: 'action', extra: index })"
+            >
+              <slot v-if="actionItem.useDefaultSlot || false" />
+            </t-button>
+          </template>
+          <slot name="actions" />
+          <template v-if="_cancel">
+            <t-button
+              :t-id="_cancel.tId"
+              :custom-style="_cancel.style"
+              :block="_cancel.block"
+              :t-class="_cancel.tClass"
+              :class="_cancel.class"
+              :disabled="_cancel.disabled"
+              :data-type="'cancel'"
+              :data-extra="_cancel.index"
+              :custom-dataset="_cancel.customDataset"
+              :content="_cancel.content"
+              :icon="_cancel.icon"
+              :loading="_cancel.loading"
+              :loading-props="_cancel.loadingProps"
+              :theme="_cancel.theme"
+              :ghost="_cancel.ghost"
+              :shape="_cancel.shape"
+              :size="_cancel.size"
+              :variant="_cancel.variant"
+              :open-type="_cancel.openType"
+              :hover-class="_cancel.hoverClass"
+              :hover-stop-propagation="_cancel.hoverStopPropagation"
+              :hover-start-time="_cancel.hoverStartTime"
+              :hover-stay-time="_cancel.hoverStayTime"
+              :lang="_cancel.lang"
+              :session-from="_cancel.sessionFrom"
+              :send-message-title="_cancel.sendMessageTitle"
+              :send-message-path="_cancel.sendMessagePath"
+              :send-message-img="_cancel.sendMessageImg"
+              :app-parameter="_cancel.appParameter"
+              :show-message-card="_cancel.showMessageCard"
+              :aria-label="_cancel.ariaLabel"
+              @click="onCancel($event, { type: 'action', extra: 0 })"
+              @getuserinfo="onCancel($event, { type: 'action', extra: 0 })"
+              @contact="onCancel($event, { type: 'action', extra: 0 })"
+              @getphonenumber="onCancel($event, { type: 'action', extra: 0 })"
+              @error="onCancel($event, { type: 'action', extra: 0 })"
+              @opensetting="onCancel($event, { type: 'action', extra: 0 })"
+              @launchapp="onCancel($event, { type: 'action', extra: 0 })"
+              @agreeprivacyauthorization="onCancel($event, { type: 'action', extra: 0 })"
+            >
+              <slot v-if="_cancel.useDefaultSlot || false" />
+            </t-button>
+          </template>
+          <slot name="cancel-btn" />
+          <template v-if="_confirm">
+            <t-button
+              :t-id="_confirm.tId"
+              :custom-style="_confirm.style"
+              :block="_confirm.block"
+              :t-class="_confirm.tClass"
+              :class="_confirm.class"
+              :disabled="_confirm.disabled"
+              :data-type="'confirm'"
+              :data-extra="_confirm.index"
+              :custom-dataset="_confirm.customDataset"
+              :content="_confirm.content"
+              :icon="_confirm.icon"
+              :loading="_confirm.loading"
+              :loading-props="_confirm.loadingProps"
+              :theme="_confirm.theme || 'primary'"
+              :ghost="_confirm.ghost"
+              :shape="_confirm.shape"
+              :size="_confirm.size"
+              :variant="_confirm.variant"
+              :open-type="_confirm.openType"
+              :hover-class="_confirm.hoverClass"
+              :hover-stop-propagation="_confirm.hoverStopPropagation"
+              :hover-start-time="_confirm.hoverStartTime"
+              :hover-stay-time="_confirm.hoverStayTime"
+              :lang="_confirm.lang"
+              :session-from="_confirm.sessionFrom"
+              :send-message-title="_confirm.sendMessageTitle"
+              :send-message-path="_confirm.sendMessagePath"
+              :send-message-img="_confirm.sendMessageImg"
+              :app-parameter="_confirm.appParameter"
+              :show-message-card="_confirm.showMessageCard"
+              :aria-label="_confirm.ariaLabel"
+              @click="onConfirm($event, { type: 'action', extra: 0 })"
+              @getuserinfo="onConfirm($event, { type: 'action', extra: 0 })"
+              @contact="onConfirm($event, { type: 'action', extra: 0 })"
+              @getphonenumber="onConfirm($event, { type: 'action', extra: 0 })"
+              @error="onTplButtonConfirmonTap($event, { type: 'action', extra: 0 })"
+              @opensetting="onConfirm($event, { type: 'action', extra: 0 })"
+              @launchapp="onConfirm($event, { type: 'action', extra: 0 })"
+              @agreeprivacyauthorization="onConfirm($event, { type: 'action', extra: 0 })"
+            >
+              <slot v-if="_confirm.useDefaultSlot || false" />
+            </t-button>
+          </template>
+          <slot name="confirm-btn" />
+        </view>
+      </view>
+    </template>
+  </t-popup>
+</template>
+<script>
+import TPopup from '../popup/popup';
+import TIcon from '../icon/icon';
+import TButton from '../button/button';
+import { uniComponent } from '../common/src/index';
+import { prefix } from '../common/config';
+import props from './props';
+import { toCamel, coalesce } from '../common/utils';
+import { isObject } from '../common/validator';
+import useCustomNavbar from '../mixins/using-custom-navbar';
+import tools from '../common/utils.wxs';
+import { getActionClass } from './computed.js';
+import { getFunctionalMixin } from '../common/functional/mixin';
+import { canUseVirtualHost } from '../common/version';
+
+const name = `${prefix}-dialog`;
+
+
+export default uniComponent({
+  name,
+  options: {
+    styleIsolation: 'shared',
+  },
+  externalClasses: [
+    `${prefix}-class`,
+    `${prefix}-class-content`,
+    `${prefix}-class-confirm`,
+    `${prefix}-class-cancel`,
+    `${prefix}-class-action`,
+  ],
+  mixins: [getFunctionalMixin(props), useCustomNavbar],
+  components: {
+    TPopup,
+    TIcon,
+    TButton,
+  },
+  props: {
+    ...props,
+  },
+  data() {
+    return {
+      prefix,
+      classPrefix: name,
+      buttonVariant: 'text',
+      tools,
+
+      _confirm: null,
+      _cancel: null,
+      useVirtualHost: canUseVirtualHost(),
+    };
+  },
+  watch: {
+    dataConfirmBtn: {
+      handler() {
+        this.onWatchBtn(this.dataConfirmBtn, this.dataCancelBtn);
+      },
+      immediate: true,
+    },
+    dataCancelBtn: {
+      handler() {
+        this.onWatchBtn(this.dataConfirmBtn, this.dataCancelBtn);
+      },
+      immediate: true,
+    },
+  },
+  methods: {
+    coalesce,
+    getActionClass,
+    onWatchBtn(confirm, cancel) {
+      const { prefix, classPrefix, dataButtonLayout } = this;
+      const rect = { buttonVariant: 'text' };
+      const useBaseVariant = [confirm, cancel].some(item => isObject(item) && item.variant && item.variant !== 'text');
+      const buttonMap = { confirm, cancel };
+      const cls = [`${classPrefix}__button`];
+      const externalCls = [];
+
+      if (useBaseVariant) {
+        rect.buttonVariant = 'base';
+        cls.push(`${classPrefix}__button--${dataButtonLayout}`);
+      } else {
+        cls.push(`${classPrefix}__button--text`);
+        externalCls.push(`${classPrefix}-button`);
+      }
+
+      const useVirtualHost = canUseVirtualHost();
+
+      Object.keys(buttonMap).forEach((key) => {
+        const btn = buttonMap[key];
+        const rootClass = [...cls, `${classPrefix}__button--${key}`];
+        const tClass = [...externalCls, this[toCamel(`${prefix}-class-${key}`)], ...rootClass].join(' ');
+
+        const base = {
+          block: true,
+          rootClass,
+
+          tClass: useVirtualHost ? tClass : '',
+          class: !useVirtualHost ? tClass : '',
+
+          variant: rect.buttonVariant,
+          openType: '',
+        };
+
+        if (key === 'cancel' && rect.buttonVariant === 'base') {
+          base.theme = 'light';
+        }
+
+        if (typeof btn === 'string') {
+          rect[`_${key}`] = { ...base, content: btn };
+        } else if (btn && typeof btn === 'object') {
+          rect[`_${key}`] = { ...base, ...btn };
+        } else {
+          rect[`_${key}`] = null;
+        }
+      });
+
+      Object.keys(rect).forEach((key) => {
+        this[key] = rect[key];
+      });
+    },
+    onTplButtonTap(e, { type, extra }) {
+      const evtType = e.type;
+      const button = this[`_${type}`];
+      const cbName = `bind${evtType}`;
+
+      if (type === 'action') {
+        this.onActionTap(extra);
+        return;
+      }
+
+      if (typeof button?.[cbName] === 'function') {
+        const closeFlag = button[cbName](e);
+        if (closeFlag) {
+          this.close();
+        }
+      }
+
+      const hasOpenType = !!button?.openType;
+      if (!hasOpenType && ['confirm', 'cancel'].includes(type)) {
+        this[toCamel(`on-${type}`)]?.(type);
+      }
+
+      if (evtType !== 'click') {
+        const success = e.detail?.errMsg?.indexOf('ok') > -1;
+        this.$emit(success ? 'open-type-event' : 'open-type-error-event', e.detail);
+      }
+    },
+
+    onConfirm(e) {
+      this.$emit('confirm', { e });
+
+      if (this._onConfirm) {
+        this._onConfirm({ trigger: 'confirm' });
+        this.close();
+      }
+    },
+
+    onCancel(e) {
+      const trigger = { trigger: 'cancel' };
+
+      this.$emit('cancel', { e });
+      this.$emit('close', trigger);
+
+      if (this._onCancel) {
+        this._onCancel(trigger);
+        this.close();
+      }
+    },
+
+    onClose() {
+      const trigger = { trigger: 'close-btn' };
+
+      this.$emit('close', trigger);
+      this._onCancel?.(trigger);
+      this.close();
+    },
+
+    close() {
+      this.dataVisible = false;
+    },
+
+    overlayClick(e) {
+      this.$emit('overlay-click', { e });
+
+      if (this.dataCloseOnOverlayClick) {
+        const trigger = { trigger: 'overlay' };
+
+        this.$emit('close', trigger);
+        this._onCancel?.(trigger);
+        this.close();
+      }
+    },
+
+    onActionTap(index) {
+      this.$emit('action', { index });
+      if (this._onAction) {
+        this._onAction({ index });
+        this.close();
+      }
+    },
+  },
+});
+</script>
+<style scoped>
+@import './dialog.css';
+</style>

package/dist/dialog/index.d.ts

@@ -0,0 +1,42 @@
+declare type Context = any;
+interface DialogAlertOptionsType {
+  context?: Context;
+  selector?: string;
+  title?: string;
+  content?: string;
+  zIndex?: number;
+  asyncClose?: boolean;
+  confirmButtonText?: string;
+  textAlign?: string;
+  cancelBtn?: string | object;
+  confirmBtn?: string | object;
+  showOverlay?: boolean;
+  closeOnOverlayClick?: boolean;
+  preventScrollThrough?: boolean;
+}
+interface DialogConfirmOptionsType extends DialogAlertOptionsType {
+  cancelButtonText?: string;
+}
+interface Action {
+  content: string;
+  theme?: 'default' | 'primary' | 'danger' | 'light';
+}
+interface DialogActionOptionsType {
+  context?: Context;
+  selector?: string;
+  title?: string;
+  content: string;
+  zIndex?: number;
+  asyncClose?: boolean;
+  actions?: Action[];
+  buttonLayout?: 'vertical' | 'horizontal';
+}
+declare const Handler: {
+  alert(options: DialogAlertOptionsType): Promise<unknown>;
+  confirm(options: DialogConfirmOptionsType): Promise<unknown>;
+  close(options?: DialogConfirmOptionsType): Promise<void>;
+  action(options: DialogActionOptionsType): Promise<{
+    index: number;
+  }>;
+};
+export default Handler;

package/dist/dialog/index.js

@@ -0,0 +1,90 @@
+import props from './props';
+import { getInstance } from '../common/utils';
+
+
+const defaultOptions = {
+  actions: [],
+  buttonLayout: props.buttonLayout.default,
+  cancelBtn: props.cancelBtn.default,
+  closeOnOverlayClick: props.closeOnOverlayClick.default,
+  confirmBtn: props.confirmBtn.value,
+  content: '',
+  preventScrollThrough: props.preventScrollThrough.default,
+  showOverlay: props.showOverlay.default,
+  title: '',
+  visible: props.visible.default,
+};
+
+export default {
+  alert(options) {
+    const { context, selector = '#t-dialog', ...otherOptions } = { ...options };
+    const instance = getInstance(context, selector);
+    if (!instance) return Promise.reject();
+
+    return new Promise((resolve) => {
+      const mergedOptions = {
+        ...defaultOptions,
+        ...instance.properties,
+        ...otherOptions,
+      };
+      instance.setData({
+        cancelBtn: '',
+        ...mergedOptions,
+        visible: true,
+      });
+      instance._onConfirm = resolve;
+    });
+  },
+  confirm(options) {
+    const { context, selector = '#t-dialog', ...otherOptions } = { ...options };
+    const instance = getInstance(context, selector);
+    if (!instance) return Promise.reject();
+
+    return new Promise((resolve, reject) => {
+      const mergedOptions = {
+        ...defaultOptions,
+        ...instance.properties,
+        ...otherOptions,
+      };
+      instance.setData({
+        ...mergedOptions,
+        visible: true,
+      });
+      instance._onConfirm = resolve;
+      instance._onCancel = reject;
+    });
+  },
+  close(options) {
+    const { context, selector = '#t-dialog' } = { ...options };
+    const instance = getInstance(context, selector);
+    if (instance) {
+      instance.close();
+      return Promise.resolve();
+    }
+    return Promise.reject();
+  },
+  action(options) {
+    const { context, selector = '#t-dialog', ...otherOptions } = { ...options };
+    const instance = getInstance(context, selector);
+    if (!instance) return Promise.reject();
+    const { buttonLayout = 'vertical', actions = instance.properties.actions } = options;
+    const maxLengthSuggestion = buttonLayout === 'vertical' ? 7 : 3;
+    if (!actions || (typeof actions === 'object' && (actions.length === 0 || actions.length > maxLengthSuggestion))) {
+      console.warn(`action 数量建议控制在1至${maxLengthSuggestion}个`);
+    }
+
+    return new Promise((resolve) => {
+      const mergedOptions = {
+        ...defaultOptions,
+        ...instance.properties,
+        ...otherOptions,
+      };
+      instance.setData({
+        ...mergedOptions,
+        buttonLayout,
+        visible: true,
+      });
+      instance._onAction = resolve;
+    });
+  },
+};

package/dist/dialog/props.ts

@@ -0,0 +1,94 @@
+/* eslint-disable */
+
+/**
+ * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
+ * */
+
+import type { TdDialogProps } from './type';
+export default {
+  /** 操作栏 */
+  actions: {
+    type: Array,
+  },
+  /** 多按钮排列方式 */
+  buttonLayout: {
+    type: String,
+    default: 'horizontal' as TdDialogProps['buttonLayout'],
+    validator(val: TdDialogProps['buttonLayout']): boolean {
+      if (!val) return true;
+      return ['horizontal', 'vertical'].includes(val);
+    },
+  },
+  /** 取消按钮，可自定义。值为 null 则不显示取消按钮。值类型为字符串，则表示自定义按钮文本，值类型为 Object 则表示透传 Button 组件属性。使用 Slot 自定义按钮时，需自行控制取消事件 */
+  cancelBtn: {
+    type: [String, Object],
+  },
+  /** 是否展示关闭按钮，值为 `true` 显示默认关闭按钮；值为 `false` 则不显示关闭按钮；使用 Object 时透传至图标组件 */
+  closeBtn: {
+    type: [Boolean, Object],
+    default: false as TdDialogProps['closeBtn'],
+  },
+  /** 点击蒙层时是否触发关闭事件 */
+  closeOnOverlayClick: Boolean,
+  /** 确认按钮。值为 null 则不显示确认按钮。值类型为字符串，则表示自定义按钮文本，值类型为 Object 则表示透传 Button 组件属性。使用 Slot 自定义按钮时，需自行控制确认事件 */
+  confirmBtn: {
+    type: [String, Object],
+  },
+  /** 内容 */
+  content: {
+    type: String,
+  },
+  /** 透传至 Overlay 组件 */
+  overlayProps: {
+    type: Object,
+    default: () => ({}),
+  },
+  /** 防止滚动穿透 */
+  preventScrollThrough: {
+    type: Boolean,
+    default: true,
+  },
+  /** 是否显示遮罩层 */
+  showOverlay: {
+    type: Boolean,
+    default: true,
+  },
+  /** 标题 */
+  title: {
+    type: String,
+  },
+  /** 是否使用了自定义导航栏 */
+  usingCustomNavbar: Boolean,
+  /** 控制对话框是否显示 */
+  visible: Boolean,
+  /** 对话框层级，Web 侧样式默认为 2500，移动端样式默认 2500，小程序样式默认为 11500 */
+  zIndex: {
+    type: Number,
+    default: 11500,
+  },
+  /** 点击多按钮中的其中一个时触发 */
+  onAction: {
+    type: Function,
+    default: () => ({}),
+  },
+  /** 如果“取消”按钮存在，则点击“取消”按钮时触发，同时触发关闭事件 */
+  onCancel: {
+    type: Function,
+    default: () => ({}),
+  },
+  /** 关闭事件，点击 取消按钮 或 点击蒙层 时触发 */
+  onClose: {
+    type: Function,
+    default: () => ({}),
+  },
+  /** 如果“确认”按钮存在，则点击“确认”按钮时触发 */
+  onConfirm: {
+    type: Function,
+    default: () => ({}),
+  },
+  /** 如果蒙层存在，点击蒙层时触发 */
+  onOverlayClick: {
+    type: Function,
+    default: () => ({}),
+  },
+};