@tdesign/uniapp 0.0.1-alpha.1 → 0.7.1

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: () => ({}),
+  },
+};

package/dist/dialog/type.ts

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

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

@@ -0,0 +1,40 @@
+:: BASE_DOC ::
+
+## API
+
+### Divider Props
+
+name | type | default | description | required
+-- | -- | -- | -- | --
+custom-style | Object | - | CSS(Cascading Style Sheets) | N
+align | String | center | options: left/right/center | N
+content | String | - | \- | N
+dashed | Boolean | false | \- | N
+layout | String | horizontal | options: horizontal/vertical | N
+
+### Divider Slots
+
+name | Description
+-- | --
+content | \-
+
+### Divider 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-divider-border-width | 2rpx | -
+--td-divider-color | @bg-color-component | -
+--td-divider-content-color | @text-color-placeholder | -
+--td-divider-content-font | @font-body-small | -
+--td-divider-content-line-style | solid | -
+--td-divider-content-margin | @spacer-1 | -
+--td-divider-horizontal-margin | 20rpx | -
+--td-divider-vertical-margin | @spacer | -

package/dist/divider/README.md

@@ -0,0 +1,64 @@
+---
+title: Divider 分割线
+description: 用于分割、组织、细化有一定逻辑的组织元素内容和页面结构。
+spline: message
+isComponent: true
+---
+
+
+## 引入
+
+可在 `main.ts` 或在需要使用的页面或组件中引入。
+
+```js
+import TDivider from '@tdesign/uniapp/divider/divider.vue';
+```
+
+### 基础分割符
+
+分割符主要是由直线和文字组成，通过`slot`传入分割线文案或者其他自定义内容，通过`layout`控制分隔符是垂直还是横向
+
+{{ base }}
+
+### 虚线样式
+
+{{ theme }}
+
+## API
+
+### Divider Props
+
+名称 | 类型 | 默认值 | 描述 | 必传
+-- | -- | -- | -- | --
+custom-style | Object | - | 自定义样式 | N
+align | String | center | 文本位置（仅在水平分割线有效）。可选项：left/right/center | N
+content | String | - | 子元素 | N
+dashed | Boolean | false | 是否虚线（仅在水平分割线有效） | N
+layout | String | horizontal | 分隔线类型有两种：水平和垂直。可选项：horizontal/vertical | N
+
+### Divider Slots
+
+名称 | 描述
+-- | --
+content | 自定义 `content` 显示内容
+
+### Divider External Classes
+
+类名 | 描述
+-- | --
+t-class | 根节点样式类
+t-class-content | 内容样式类
+
+### CSS Variables
+
+组件提供了下列 CSS 变量，可用于自定义样式。
+名称 | 默认值 | 描述 
+-- | -- | --
+--td-divider-border-width | 2rpx | -
+--td-divider-color | @bg-color-component | -
+--td-divider-content-color | @text-color-placeholder | -
+--td-divider-content-font | @font-body-small | -
+--td-divider-content-line-style | solid | -
+--td-divider-content-margin | @spacer-1 | -
+--td-divider-horizontal-margin | 20rpx | -
+--td-divider-vertical-margin | @spacer | -

package/dist/divider/divider.css

@@ -0,0 +1,56 @@
+.t-divider {
+  display: flex;
+  color: var(--td-divider-color, var(--td-bg-color-component, var(--td-gray-color-3, #e7e7e7)));
+  border-color: var(--td-divider-color, var(--td-bg-color-component, var(--td-gray-color-3, #e7e7e7)));
+  border-style: var(--td-divider-content-line-style, solid);
+  border-width: 0;
+}
+.t-divider::before,
+.t-divider::after {
+  content: '';
+  display: block;
+  flex: 1;
+  box-sizing: border-box;
+  border: inherit;
+  border-color: inherit;
+  border-style: inherit;
+}
+.t-divider--horizontal {
+  align-items: center;
+  margin: var(--td-divider-horizontal-margin, 20rpx) 0;
+}
+.t-divider--horizontal::before,
+.t-divider--horizontal::after {
+  border-top-width: var(--td-divider-border-width, 2rpx);
+  transform: scaleY(0.5);
+  transform-origin: center;
+}
+.t-divider--horizontal .t-divider__content:not(:empty) {
+  margin: 0 var(--td-divider-content-margin, var(--td-spacer-1, 24rpx));
+}
+.t-divider--vertical {
+  flex-direction: column;
+  height: 28rpx;
+  margin: 0 var(--td-divider-vertical-margin, var(--td-spacer, 16rpx));
+}
+.t-divider--vertical::before,
+.t-divider--vertical::after {
+  border-left-width: var(--td-divider-border-width, 2rpx);
+  transform: scaleX(0.5);
+  transform-origin: center;
+}
+.t-divider--vertical-center {
+  align-items: center;
+  height: 100%;
+}
+.t-divider--dashed {
+  border-style: dashed;
+}
+.t-divider__content {
+  font: var(--td-divider-content-font, var(--td-font-body-small, 24rpx / 40rpx var(--td-font-family, PingFang SC, Microsoft YaHei, Arial Regular)));
+  color: var(--td-divider-content-color, var(--td-text-color-placeholder, var(--td-font-gray-3, rgba(0, 0, 0, 0.4))));
+}
+.t-divider--left::before,
+.t-divider--right::after {
+  max-width: 60rpx;
+}

package/dist/divider/divider.vue

@@ -0,0 +1,79 @@
+<template>
+  <view :class="layout === 'vertical' ? classPrefix + '--vertical-center' : ''">
+    <view
+      :class="[
+        classPrefix,
+        tClass,
+        classPrefix + '--' + layout + ' ' + classPrefix + '--' + align + ' ' + (dashed ? classPrefix + '--dashed' : '')
+      ]"
+      :style="tools._style([dividerStyle, customStyle])"
+    >
+      <view
+        :class="[
+          tClassContent,
+          classPrefix + '__content'
+        ]"
+      >
+        <view v-if="content">
+          {{ content }}
+        </view>
+        <slot
+          v-else
+          name="content"
+        />
+      </view>
+    </view>
+  </view>
+</template>
+<script>
+import { uniComponent } from '../common/src/index';
+import { prefix } from '../common/config';
+import props from './props';
+import tools from '../common/utils.wxs';
+
+
+const name = `${prefix}-divider`;
+
+
+export default uniComponent({
+  name,
+  options: {
+    styleIsolation: 'shared',
+  },
+  externalClasses: [
+    `${prefix}-class`,
+    `${prefix}-class-content`,
+  ],
+  props: {
+    ...props,
+  },
+  data() {
+    return {
+      prefix,
+      classPrefix: name,
+      tools,
+      dividerStyle: '',
+    };
+  },
+  watch: {
+    lineColor: {
+      handler() {
+        this.setStyle();
+      },
+      immediateU: true,
+    },
+  },
+  methods: {
+    setStyle() {
+      const {
+        lineColor,
+      } = this;
+      const dividerStyle = `${lineColor ? `border-color: ${lineColor};` : ''}`;
+      this.dividerStyle = dividerStyle;
+    },
+  },
+});
+</script>
+<style scoped>
+@import './divider.css';
+</style>

package/dist/divider/props.ts

@@ -0,0 +1,33 @@
+/* eslint-disable */
+
+/**
+ * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
+ * */
+
+import type { TdDividerProps } from './type';
+export default {
+  /** 文本位置（仅在水平分割线有效） */
+  align: {
+    type: String,
+    default: 'center' as TdDividerProps['align'],
+    validator(val: TdDividerProps['align']): boolean {
+      if (!val) return true;
+      return ['left', 'right', 'center'].includes(val);
+    },
+  },
+  /** 子元素 */
+  content: {
+    type: String,
+  },
+  /** 是否虚线（仅在水平分割线有效） */
+  dashed: Boolean,
+  /** 分隔线类型有两种：水平和垂直 */
+  layout: {
+    type: String,
+    default: 'horizontal' as TdDividerProps['layout'],
+    validator(val: TdDividerProps['layout']): boolean {
+      if (!val) return true;
+      return ['horizontal', 'vertical'].includes(val);
+    },
+  },
+};

package/dist/divider/type.ts

@@ -0,0 +1,27 @@
+/* eslint-disable */
+
+/**
+ * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
+ * */
+
+export interface TdDividerProps {
+  /**
+   * 文本位置（仅在水平分割线有效）
+   * @default center
+   */
+  align?: 'left' | 'right' | 'center';
+  /**
+   * 子元素
+   */
+  content?: string;
+  /**
+   * 是否虚线（仅在水平分割线有效）
+   * @default false
+   */
+  dashed?: boolean;
+  /**
+   * 分隔线类型有两种：水平和垂直
+   * @default horizontal
+   */
+  layout?: 'horizontal' | 'vertical';
+}

package/dist/draggable/draggable.css

@@ -0,0 +1,16 @@
+.hotspot-expanded.relative {
+  position: relative;
+}
+.hotspot-expanded::after {
+  content: '';
+  display: block;
+  position: absolute;
+  left: 0;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  transform: scale(1.5);
+}
+.t-draggable {
+  position: fixed;
+}

package/dist/draggable/draggable.vue

@@ -0,0 +1,92 @@
+<template>
+  <view
+    :class="[classPrefix, tClass]"
+    :style="tools._style([customStyle])"
+    @touchstart="onTouchStart"
+    @touchmove.stop.prevent="onTouchMove"
+    @touchend="onTouchEnd"
+  >
+    <slot />
+  </view>
+</template>
+<script>
+import { uniComponent } from '../common/src/index';
+import { prefix } from '../common/config';
+import props from './props';
+import { getRect, getWindowInfo } from '../common/utils';
+import tools from '../common/utils.wxs';
+
+
+const name = `${prefix}-draggable`;
+
+export default uniComponent({
+  name,
+  options: {
+    styleIsolation: 'shared',
+  },
+  props: {
+    ...props,
+  },
+  emits: [
+    'move',
+    'start',
+    'end',
+  ],
+  data() {
+    return {
+      prefix,
+      classPrefix: name,
+      tools,
+      systemInfo: getWindowInfo(),
+    };
+  },
+  mounted() {
+    this.computedRect();
+  },
+  methods: {
+    onTouchStart(e) {
+      const { systemInfo } = this;
+      if (this.direction === 'none') return;
+      this.startX = e.touches[0].clientX + systemInfo.windowWidth - this.rect.right;
+      this.startY = e.touches[0].clientY + systemInfo.windowHeight - this.rect.bottom;
+      this.$emit('start', { startX: this.startX, startY: this.startY, rect: this.rect, e });
+    },
+
+    onTouchMove(e) {
+      const { systemInfo } = this;
+
+      if (this.direction === 'none') return;
+      let x = this.startX - e.touches[0].clientX; // x轴移动偏移量
+      let y = this.startY - e.touches[0].clientY; // y轴移动偏移量
+
+
+      if (this.direction === 'vertical') {
+        x = systemInfo.windowWidth - this.rect.right;
+      }
+      if (this.direction === 'horizontal') {
+        y = systemInfo.windowHeight - this.rect.bottom;
+      }
+
+      this.$emit('move', { x, y, rect: this.rect, e });
+    },
+
+    async onTouchEnd(e) {
+      if (this.direction === 'none') return;
+      await this.computedRect();
+      this.$emit('end', { rect: this.rect, e });
+    },
+
+    async computedRect() {
+      this.rect = { right: 0, bottom: 0, width: 0, height: 0 };
+      try {
+        this.rect = await getRect(this, `.${this.classPrefix}`);
+      } catch (e) {
+        // ignore reject
+      }
+    },
+  },
+});
+</script>
+<style scoped>
+@import './draggable.css';
+</style>

package/dist/draggable/props.js

@@ -0,0 +1,19 @@
+const props = {
+  direction: {
+    type: String,
+    value: 'all',
+  },
+  tClass: {
+    type: String,
+    default: '',
+  },
+  tClassButton: {
+    type: String,
+    default: '',
+  },
+  customStyle: {
+    type: [String, Object],
+    default: '',
+  },
+};
+export default props;

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

@@ -0,0 +1,54 @@
+:: BASE_DOC ::
+
+## API
+
+### Drawer Props
+
+name | type | default | description | required
+-- | -- | -- | -- | --
+custom-style | Object | - | CSS(Cascading Style Sheets) | N
+close-on-overlay-click | Boolean | true | \- | N
+destroy-on-close | Boolean | false | \- | N
+items | Array | - | Typescript：`DrawerItem[]` `interface DrawerItem { title: string; icon: string; }`。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/packages/uniapp-components/drawer/type.ts) | 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/drawer/type.ts) | N
+placement | String | right | options: left/right | N
+show-overlay | Boolean | true | \- | N
+title | String | - | \- | N
+using-custom-navbar | Boolean | false | \- | N
+visible | Boolean | false | \- | N
+z-index | Number | 11500 | \- | N
+
+### Drawer Events
+
+name | params | description
+-- | -- | --
+close | `(context: { trigger: DrawerTriggerSource })` | [see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/packages/uniapp-components/drawer/type.ts)。<br/>`type DrawerTriggerSource = 'overlay'`<br/>
+item-click | `(context: { index: number; item: DrawerItem })` | \-
+overlay-click | \- | \-
+update-visible | `(context: { visible: boolean })` | \-
+
+### Drawer Slots
+
+name | Description
+-- | --
+\- | \-
+footer | \-
+title | \-
+
+### CSS Variables
+
+The component provides the following CSS variables, which can be used to customize styles.
+Name | Default Value | Description 
+-- | -- | --
+--td-drawer-bg-color | @bg-color-container | -
+--td-drawer-border-color | @border-level-1-color | -
+--td-drawer-footer-padding-bottom | 40rpx | -
+--td-drawer-hover-color | @bg-color-secondarycontainer | -
+--td-drawer-item-icon-color | @drawer-title-color | -
+--td-drawer-item-icon-size | 48rpx | -
+--td-drawer-item-padding | 32rpx | -
+--td-drawer-sidebar-height | 70vh | -
+--td-drawer-title-color | @text-color-primary | -
+--td-drawer-title-font | @font-title-large | -
+--td-drawer-title-padding | 48rpx 32rpx 16rpx | -
+--td-drawer-width | 560rpx | -