@tdesign/uniapp 0.0.1-alpha.1 → 0.7.0

package/dist/popover/type.ts

@@ -0,0 +1,61 @@
+/* eslint-disable */
+
+/**
+ * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
+ * */
+
+export interface TdPopoverProps {
+  /**
+   * 是否在点击外部元素后关闭菜单
+   * @default true
+   */
+  closeOnClickOutside?: boolean;
+  /**
+   * 确认框内容
+   */
+  content?: string;
+  /**
+   * 如果触发元素为 `fixed` 场景，需要显示指定 `fixed` 属性为 `true`，同时需在触发元素层添加 `t-popover-wrapper--fixed` 类，用于定位触发元素
+   * @default false
+   */
+  fixed?: boolean;
+  /**
+   * 浮层出现位置
+   * @default top
+   */
+  placement?:
+    | 'top'
+    | 'left'
+    | 'right'
+    | 'bottom'
+    | 'top-left'
+    | 'top-right'
+    | 'bottom-left'
+    | 'bottom-right'
+    | 'left-top'
+    | 'left-bottom'
+    | 'right-top'
+    | 'right-bottom';
+  /**
+   * 是否显示浮层箭头
+   * @default true
+   */
+  showArrow?: boolean;
+  /**
+   * 弹出气泡主题
+   * @default dark
+   */
+  theme?: 'dark' | 'light' | 'brand' | 'success' | 'warning' | 'error';
+  /**
+   * 是否显示气泡确认框
+   */
+  visible?: boolean;
+  /**
+   * 是否显示气泡确认框，非受控属性
+   */
+  defaultVisible?: boolean;
+  /**
+   * 确认框显示或隐藏时触发
+   */
+  onVisibleChange?: (visible: boolean) => void;
+}

package/dist/popup/README.en-US.md

@@ -0,0 +1,53 @@
+:: BASE_DOC ::
+
+## API
+
+### Popup Props
+
+name | type | default | description | required
+-- | -- | -- | -- | --
+custom-style | Object | - | CSS(Cascading Style Sheets) | N
+close-btn | Boolean | - | \- | N
+close-on-overlay-click | Boolean | true | \- | N
+content | String | - | \- | N
+duration | Number | 240 | \- | N
+overlay-props | Object | {} | Typescript：`OverlayProps`，[Overlay API Documents](./overlay?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/packages/uniapp-components/popup/type.ts) | N
+placement | String | top | options: top/left/right/bottom/center | N
+prevent-scroll-through | Boolean | true | \- | N
+show-overlay | Boolean | true | \- | N
+using-custom-navbar | Boolean | false | \- | N
+visible | Boolean | - | `v-model:visible` is supported。Typescript：`boolean` | N
+default-visible | Boolean | - | uncontrolled property。Typescript：`boolean` | N
+z-index | Number | 11500 | \- | N
+
+### Popup Events
+
+name | params | description
+-- | -- | --
+visible-change | `(context: { visible: boolean, trigger: PopupSource }) ` | [see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/packages/uniapp-components/popup/type.ts)。<br/>`type PopupSource = 'close-btn' \| 'overlay'`<br/>
+
+### Popup Slots
+
+name | Description
+-- | --
+\- | \-
+close-btn | \-
+content | \-
+
+### Popup External Classes
+
+className | Description
+-- | --
+t-class | \-
+t-class-content | \-
+
+### CSS Variables
+
+The component provides the following CSS variables, which can be used to customize styles.
+Name | Default Value | Description 
+-- | -- | --
+--td-popup-bg-color | @bg-color-container | -
+--td-popup-border-radius | @radius-extraLarge | -
+--td-popup-close-btn-color | @text-color-primary | -
+--td-popup-distance-top | 0 | -
+--td-popup-transition | all 300ms ease | -

package/dist/popup/README.md

@@ -0,0 +1,82 @@
+---
+title: Popup 弹出层
+description: 由其他控件触发，屏幕滑出或弹出一块自定义内容区域。
+spline: message
+isComponent: true
+---
+
+
+
+## 引入
+
+可在 `main.ts` 或在需要使用的页面或组件中引入。
+
+```js
+import TPopup from '@tdesign/uniapp/popup/popup.vue';
+```
+
+### 组件类型
+
+基础弹出层
+
+{{ base }}
+
+### 组件示例
+
+应用示例
+
+{{ with-title }}
+
+{{ custom-close }}
+
+## API
+
+### Popup Props
+
+名称 | 类型 | 默认值 | 描述 | 必传
+-- | -- | -- | -- | --
+custom-style | Object | - | 自定义样式 | N
+close-btn | Boolean | - | 关闭按钮，值类型为 Boolean 时表示是否显示关闭按钮。也可以自定义关闭按钮 | N
+close-on-overlay-click | Boolean | true | 点击遮罩层是否关闭 | N
+content | String | - | 浮层里面的内容 | N
+duration | Number | 240 | 动画过渡时间 | N
+overlay-props | Object | {} | 遮罩层的属性，透传至 overlay。TS 类型：`OverlayProps`，[Overlay API Documents](./overlay?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/packages/uniapp-components/popup/type.ts) | N
+placement | String | top | 浮层出现位置。可选项：top/left/right/bottom/center | N
+prevent-scroll-through | Boolean | true | 是否阻止背景滚动 | N
+show-overlay | Boolean | true | 是否显示遮罩层 | N
+using-custom-navbar | Boolean | false | 是否使用了自定义导航栏 | N
+visible | Boolean | - | 是否显示浮层。支持语法糖 `v-model:visible`。TS 类型：`boolean` | N
+default-visible | Boolean | - | 是否显示浮层。非受控属性。TS 类型：`boolean` | N
+z-index | Number | 11500 | 组件层级，Web 侧样式默认为 5500，移动端样式默认为 1500，小程序样式默认为11500 | N
+
+### Popup Events
+
+名称 | 参数 | 描述
+-- | -- | --
+visible-change | `(context: { visible: boolean, trigger: PopupSource }) ` | 当浮层隐藏时触发。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/packages/uniapp-components/popup/type.ts)。<br/>`type PopupSource = 'close-btn' \| 'overlay'`<br/>
+
+### Popup Slots
+
+名称 | 描述
+-- | --
+\- | 默认插槽，作用同 `content` 插槽
+close-btn | 自定义 `close-btn` 显示内容
+content | 自定义 `content` 显示内容
+
+### Popup External Classes
+
+类名 | 描述
+-- | --
+t-class | 根节点样式类
+t-class-content | 内容样式类
+
+### CSS Variables
+
+组件提供了下列 CSS 变量，可用于自定义样式。
+名称 | 默认值 | 描述 
+-- | -- | --
+--td-popup-bg-color | @bg-color-container | -
+--td-popup-border-radius | @radius-extraLarge | -
+--td-popup-close-btn-color | @text-color-primary | -
+--td-popup-distance-top | 0 | -
+--td-popup-transition | all 300ms ease | -

package/dist/popup/computed.js

@@ -0,0 +1,14 @@
+function getPopupStyles({ zIndex, distanceTop, placement, duration }) {
+  let zIndexStyle = zIndex ? `z-index:${zIndex};` : '';
+  if ((placement === 'top' || placement === 'left' || placement === 'right') && distanceTop) {
+    zIndexStyle = `${zIndexStyle}top:${distanceTop}px;--td-popup-distance-top:${distanceTop}px;`;
+  }
+  if (duration) {
+    zIndexStyle = `${zIndexStyle}--td-popup-transition:all ${duration}ms ease;`;
+  }
+  return zIndexStyle;
+}
+
+export default {
+  getPopupStyles,
+};

package/dist/popup/popup.css

@@ -0,0 +1,80 @@
+.t-popup {
+  position: fixed;
+  z-index: 11500;
+  max-height: calc(100vh - var(--td-popup-distance-top, 0));
+  transition: var(--td-popup-transition, all 300ms ease);
+  background-color: var(--td-popup-bg-color, var(--td-bg-color-container, var(--td-font-white-1, #ffffff)));
+}
+.t-popup__content {
+  position: relative;
+  height: 100%;
+  z-index: 1;
+}
+.t-popup__close {
+  position: absolute;
+  top: 0;
+  right: 0;
+  padding: 20rpx;
+  line-height: 1;
+  color: var(--td-popup-close-btn-color, var(--td-text-color-primary, var(--td-font-gray-1, rgba(0, 0, 0, 0.9))));
+}
+.t-popup--top {
+  top: 0;
+  left: 0;
+  width: 100%;
+  border-bottom-left-radius: var(--td-popup-border-radius, var(--td-radius-extraLarge, 24rpx));
+  border-bottom-right-radius: var(--td-popup-border-radius, var(--td-radius-extraLarge, 24rpx));
+}
+.t-popup--bottom {
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  border-top-left-radius: var(--td-popup-border-radius, var(--td-radius-extraLarge, 24rpx));
+  border-top-right-radius: var(--td-popup-border-radius, var(--td-radius-extraLarge, 24rpx));
+  padding-bottom: constant(safe-area-inset-bottom);
+  padding-bottom: env(safe-area-inset-bottom);
+}
+.t-popup--left {
+  top: 0;
+  left: 0;
+  height: 100%;
+}
+.t-popup--right {
+  top: 0;
+  right: 0;
+  height: 100%;
+}
+.t-popup--center {
+  top: 50%;
+  left: 50%;
+  transform: scale(1) translate3d(-50%, -50%, 0);
+  transform-origin: 0% 0%;
+  border-radius: var(--td-popup-border-radius, var(--td-radius-extraLarge, 24rpx));
+}
+.t-popup.t-fade-enter.t-popup--top,
+.t-popup.t-fade-leave-to.t-popup--top {
+  transform: translateY(-100%);
+  transform-origin: 0% 0%;
+}
+.t-popup.t-fade-enter.t-popup--bottom,
+.t-popup.t-fade-leave-to.t-popup--bottom {
+  transform: translateY(100%);
+}
+.t-popup.t-fade-enter.t-popup--left,
+.t-popup.t-fade-leave-to.t-popup--left {
+  transform: translateX(-100%);
+}
+.t-popup.t-fade-enter.t-popup--right,
+.t-popup.t-fade-leave-to.t-popup--right {
+  transform: translateX(100%);
+}
+.t-popup.t-fade-enter.t-popup--center,
+.t-popup.t-fade-leave-to.t-popup--center {
+  transform: scale(0.6) translate3d(-50%, -50%, 0);
+  opacity: 0;
+}
+.t-popup.t-dialog-enter.t-popup--center,
+.t-popup.t-dialog-leave-to.t-popup--center {
+  transform: scale(0.6) translate3d(-50%, -50%, 0);
+  opacity: 0;
+}

package/dist/popup/popup.vue

@@ -0,0 +1,141 @@
+<template>
+  <view>
+    <view
+      v-if="realVisible"
+      :style="tools._style([popup.getPopupStyles({ zIndex, distanceTop, placement, duration }), customStyle])"
+      :class="tools.cls(classPrefix, [placement]) + ' ' + transitionClass + ' ' + tClass"
+      @transitionend="onTransitionEnd"
+    >
+      <view
+        v-if="innerPreventScrollThrough"
+        :class="classPrefix + '__content ' + tClassContent"
+        @touchmove.stop.prevent="noop"
+      >
+        <slot name="content" />
+        <slot />
+        <view
+          :class="classPrefix + '__close'"
+          @click="handleClose"
+        >
+          <t-icon
+            v-if="closeBtn"
+            name="close"
+            size="64rpx"
+          />
+          <slot
+            name="close-btn"
+            :class="classPrefix + '-slot'"
+          />
+        </view>
+      </view>
+
+      <view
+        v-else
+        :class="classPrefix + '__content ' + tClassContent"
+      >
+        <slot name="content" />
+        <slot />
+        <view
+          :class="classPrefix + '__close'"
+          @click="handleClose"
+        >
+          <t-icon
+            v-if="closeBtn"
+            name="close"
+            size="64rpx"
+          />
+          <slot
+            name="close-btn"
+            :class="classPrefix + '-slot'"
+          />
+        </view>
+      </view>
+    </view>
+    <t-overlay
+      v-if="showOverlay"
+      id="popup-overlay"
+      :visible="visible"
+      :using-custom-navbar="usingCustomNavbar"
+      :custom-navbar-height="customNavbarHeight"
+      :z-index="(overlayProps && overlayProps.zIndex) || 11000"
+      :duration="(overlayProps && overlayProps.duration) || 300"
+      :background-color="(overlayProps && overlayProps.backgroundColor) || ''"
+      :prevent-scroll-through="preventScrollThrough || (overlayProps ? !!overlayProps.preventScrollThrough : false)"
+      :custom-style="(overlayProps && overlayProps.style) || ''"
+      @click="handleOverlayClick($event, { tagId: 'popup-overlay' })"
+    />
+  </view>
+</template>
+<script>
+import TOverlay from '../overlay/overlay';
+import TIcon from '../icon/icon';
+import { uniComponent } from '../common/src/index';
+import { prefix } from '../common/config';
+import props from './props';
+import { transitionMixins } from '../mixins/transition';
+import useCustomNavbar from '../mixins/using-custom-navbar';
+import tools from '../common/utils.wxs';
+import popup from './computed.js';
+
+delete props.visible;
+
+const name = `${prefix}-popup`;
+
+
+export default uniComponent({
+  name,
+  options: {
+    styleIsolation: 'shared',
+  },
+  externalClasses: [
+    `${prefix}-class`,
+    `${prefix}-class-content`,
+  ],
+  mixins: [transitionMixins, useCustomNavbar],
+  components: {
+    TOverlay,
+    TIcon,
+  },
+  props: {
+    ...props,
+  },
+  emits: [
+    'visible-change',
+    'leaved',
+    'update:visible',
+  ],
+  data() {
+    return {
+      prefix,
+      classPrefix: name,
+      popup,
+      tools,
+    };
+  },
+  computed: {
+    innerPreventScrollThrough() {
+      const { preventScrollThrough, overlayProps } = this;
+      return preventScrollThrough || (overlayProps ? !!overlayProps.preventScrollThrough : false);
+    },
+  },
+  methods: {
+    noop() {},
+    handleOverlayClick() {
+      const { closeOnOverlayClick } = this;
+      if (closeOnOverlayClick) {
+        this.$emit('visible-change', { visible: false, trigger: 'overlay' });
+        this.$emit('update:visible', false);
+      }
+    },
+
+    handleClose() {
+      this.$emit('visible-change', { visible: false, trigger: 'close-btn' });
+      this.$emit('update:visible', false);
+    },
+  },
+});
+
+</script>
+<style scoped>
+@import './popup.css';
+</style>

package/dist/popup/props.ts

@@ -0,0 +1,67 @@
+/* eslint-disable */
+
+/**
+ * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
+ * */
+
+import type { TdPopupProps } from './type';
+export default {
+  /** 关闭按钮，值类型为 Boolean 时表示是否显示关闭按钮。也可以自定义关闭按钮 */
+  closeBtn: {
+    type: Boolean,
+  },
+  /** 点击遮罩层是否关闭 */
+  closeOnOverlayClick: {
+    type: Boolean,
+    default: true,
+  },
+  /** 浮层里面的内容 */
+  content: {
+    type: String,
+  },
+  /** 动画过渡时间 */
+  duration: {
+    type: Number,
+    default: 240,
+  },
+  /** 遮罩层的属性，透传至 overlay */
+  overlayProps: {
+    type: Object,
+    default: () => ({}),
+  },
+  /** 浮层出现位置 */
+  placement: {
+    type: String,
+    default: 'top' as TdPopupProps['placement'],
+    validator(val: TdPopupProps['placement']): boolean {
+      if (!val) return true;
+      return ['top', 'left', 'right', 'bottom', 'center'].includes(val);
+    },
+  },
+  /** 是否阻止背景滚动 */
+  preventScrollThrough: {
+    type: Boolean,
+    default: true,
+  },
+  /** 是否显示遮罩层 */
+  showOverlay: {
+    type: Boolean,
+    default: true,
+  },
+  /** 是否使用了自定义导航栏 */
+  usingCustomNavbar: Boolean,
+  /** 是否显示浮层 */
+  visible: Boolean,
+  /** 是否显示浮层，非受控属性 */
+  defaultVisible: Boolean,
+  /** 组件层级，Web 侧样式默认为 5500，移动端样式默认为 1500，小程序样式默认为11500 */
+  zIndex: {
+    type: Number,
+    default: 11500,
+  },
+  /** 当浮层隐藏或显示时触发 */
+  onVisibleChange: {
+    type: Function,
+    default: () => ({}),
+  },
+};

package/dist/popup/type.ts

@@ -0,0 +1,72 @@
+/* eslint-disable */
+
+/**
+ * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
+ * */
+
+import type { TdOverlayProps as OverlayProps } from '../overlay/type';
+
+export interface TdPopupProps {
+  /**
+   * 关闭按钮，值类型为 Boolean 时表示是否显示关闭按钮。也可以自定义关闭按钮
+   */
+  closeBtn?: boolean;
+  /**
+   * 点击遮罩层是否关闭
+   * @default true
+   */
+  closeOnOverlayClick?: boolean;
+  /**
+   * 浮层里面的内容
+   */
+  content?: string;
+  /**
+   * 动画过渡时间
+   * @default 240
+   */
+  duration?: number;
+  /**
+   * 遮罩层的属性，透传至 overlay
+   * @default {}
+   */
+  overlayProps?: OverlayProps;
+  /**
+   * 浮层出现位置
+   * @default top
+   */
+  placement?: 'top' | 'left' | 'right' | 'bottom' | 'center';
+  /**
+   * 是否阻止背景滚动
+   * @default true
+   */
+  preventScrollThrough?: boolean;
+  /**
+   * 是否显示遮罩层
+   * @default true
+   */
+  showOverlay?: boolean;
+  /**
+   * 是否使用了自定义导航栏
+   * @default false
+   */
+  usingCustomNavbar?: boolean;
+  /**
+   * 是否显示浮层
+   */
+  visible?: boolean;
+  /**
+   * 是否显示浮层，非受控属性
+   */
+  defaultVisible?: boolean;
+  /**
+   * 组件层级，Web 侧样式默认为 5500，移动端样式默认为 1500，小程序样式默认为11500
+   * @default 11500
+   */
+  zIndex?: number;
+  /**
+   * 当浮层隐藏或显示时触发
+   */
+  onVisibleChange?: (context: { visible: boolean; trigger: PopupSource }) => void;
+}
+
+export type PopupSource = 'close-btn' | 'overlay';

package/dist/progress/README.en-US.md

@@ -0,0 +1,52 @@
+:: BASE_DOC ::
+
+## API
+
+### Progress Props
+
+name | type | default | description | required
+-- | -- | -- | -- | --
+custom-style | Object | - | CSS(Cascading Style Sheets) | N
+color | String / Object / Array | '' | Typescript：`string \| Array<string> \| Record<string, string>` | N
+label | String / Boolean | true | \- | N
+percentage | Number | 0 | \- | N
+size | String / Number | 'default' | \- | N
+status | String | - | options: success/error/warning/active。Typescript：`ProgressStatus` `type ProgressStatus = 'success' \| 'error' \| 'warning' \| 'active'`。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/packages/uniapp-components/progress/type.ts) | N
+stroke-width | String / Number | - | \- | N
+theme | String | line | options: line/plump/circle。Typescript：`ProgressTheme` `type ProgressTheme = 'line' \| 'plump' \| 'circle'`。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/packages/uniapp-components/progress/type.ts) | N
+track-color | String | '' | \- | N
+
+### Progress Slots
+
+name | Description
+-- | --
+label | \-
+
+### Progress External Classes
+
+className | Description
+-- | --
+t-class | \-
+t-class-bar | \-
+t-class-label | \-
+
+### CSS Variables
+
+The component provides the following CSS variables, which can be used to customize styles.
+Name | Default Value | Description 
+-- | -- | --
+--td-progress-info-dark-color | @text-color-primary | -
+--td-progress-info-light-color | @text-color-anti | -
+--td-progress-inner-bg-color-active | @bg-color-container | -
+--td-progress-inner-bg-color-error | @error-color | -
+--td-progress-inner-bg-color-success | @success-color | -
+--td-progress-inner-bg-color-warning | @warning-color | -
+--td-progress-circle-icon-size | 96rpx | -
+--td-progress-circle-inner-bg-color | @bg-color-container | -
+--td-progress-circle-label-font | @font-title-extraLarge | -
+--td-progress-circle-width | 224rpx | -
+--td-progress-inner-bg-color | @brand-color | -
+--td-progress-line-stroke-width | 12rpx | -
+--td-progress-stroke-circle-width | 12rpx | -
+--td-progress-stroke-plump-width | 40rpx | -
+--td-progress-track-bg-color | @bg-color-component | -