@tdesign/uniapp 0.0.1-alpha.1 → 0.7.0

package/dist/sticky/type.ts

@@ -0,0 +1,31 @@
+/* eslint-disable */
+
+/**
+ * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
+ * */
+
+export interface TdStickyProps {
+  /**
+   * 函数返回容器对应的 NodesRef 节点，将对应节点指定为组件的外部容器，滚动时组件会始终保持在容器范围内，当组件即将超出容器底部时，会返回原位置
+   */
+  container?: Function;
+  /**
+   * 是否禁用组件
+   * @default false
+   */
+  disabled?: boolean;
+  /**
+   * 吸顶时与顶部的距离，单位`px`
+   * @default 0
+   */
+  offsetTop?: string | number;
+  /**
+   * 吸顶时的 z-index
+   * @default 99
+   */
+  zIndex?: number;
+  /**
+   * 滚动时触发，scrollTop: 距离顶部位置，isFixed: 是否吸顶
+   */
+  onScroll?: (context: { scrollTop: number; isFixed: boolean }) => void;
+}

package/dist/swipe-cell/README.en-US.md

@@ -0,0 +1,29 @@
+:: BASE_DOC ::
+
+## API
+
+### SwipeCell Props
+
+name | type | default | description | required
+-- | -- | -- | -- | --
+custom-style | Object | - | CSS(Cascading Style Sheets) | N
+disabled | Boolean | - | \- | N
+left | Array | - | Typescript：`Array<SwipeActionItem>` | N
+opened | Boolean / Array | false | Typescript：`boolean \| Array<boolean>` | N
+right | Array | - | Typescript：`Array<SwipeActionItem>` `interface SwipeActionItem {text?: string; icon?: string \| object, className?: string; style?: string; onClick?: () => void; [key: string]: any }`。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/packages/uniapp-components/swipe-cell/type.ts) | N
+
+### SwipeCell Events
+
+name | params | description
+-- | -- | --
+click | `(action: SwipeActionItem, source: SwipeSource)` | [see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/packages/uniapp-components/swipe-cell/type.ts)。<br/>`type SwipeSource = 'left' \| 'right'`<br/>
+dragend | \- | \-
+dragstart | \- | \-
+
+### SwipeCell Slots
+
+name | Description
+-- | --
+\- | \-
+left | \-
+right | \-

package/dist/swipe-cell/README.md

@@ -0,0 +1,66 @@
+---
+title: SwipeCell 滑动操作
+description: 用于承载列表中的更多操作，通过左右滑动来展示，按钮的宽度固定高度根据列表高度而变化。
+spline: message
+isComponent: true
+---
+
+
+
+## 引入
+
+可在 `main.ts` 或在需要使用的页面或组件中引入。
+
+```js
+import TSwipeCell from '@tdesign/uniapp/swipe-cell/swipe-cell.vue';
+```
+
+### 组件类型
+
+左滑单操作
+
+{{ left }}
+
+右滑单操作
+
+{{ right }}
+
+左右滑操作
+
+{{ double }}
+
+带图标的滑动操作
+
+{{ icon }}
+
+## FAQ
+### `SwipeCell` 组件在真机上无法滑动？
+移除全局配置项: "componentFramework": "glass-easel"，详情见： [issue 2524](https://github.com/Tencent/tdesign-miniprogram/issues/2524)。如需使用 `skyline render`，建议页面级粒度开启。
+
+## API
+
+### SwipeCell Props
+
+名称 | 类型 | 默认值 | 描述 | 必传
+-- | -- | -- | -- | --
+custom-style | Object | - | 自定义样式 | N
+disabled | Boolean | - | 是否禁用滑动 | N
+left | Array | - | 左侧滑动操作项。所有行为同 `right`。TS 类型：`Array<SwipeActionItem>` | N
+opened | Boolean / Array | false | 操作项是否呈现为打开态，值为数组时表示分别控制左右滑动的展开和收起状态。TS 类型：`boolean \| Array<boolean>` | N
+right | Array | - | 右侧滑动操作项。有两种定义方式，一种是使用数组，二种是使用插槽。`right.text` 表示操作文本，`right.className` 表示操作项类名，`right.style` 表示操作项样式，`right.onClick` 表示点击操作项后执行的回调函数。示例：`[{ text: '删除', icon: 'delete', style: 'background-color: red', onClick: () => {} }]`。TS 类型：`Array<SwipeActionItem>` `interface SwipeActionItem {text?: string; icon?: string \| object, className?: string; style?: string; onClick?: () => void; [key: string]: any }`。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/packages/uniapp-components/swipe-cell/type.ts) | N
+
+### SwipeCell Events
+
+名称 | 参数 | 描述
+-- | -- | --
+click | `(action: SwipeActionItem, source: SwipeSource)` | 操作项点击时触发（插槽写法组件不触发，业务侧自定义内容和事件）。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/packages/uniapp-components/swipe-cell/type.ts)。<br/>`type SwipeSource = 'left' \| 'right'`<br/>
+dragend | \- | 滑动结束事件
+dragstart | \- | 滑动开始事件
+
+### SwipeCell Slots
+
+名称 | 描述
+-- | --
+\- | 默认插槽，自定义内容区域内容
+left | 左侧滑动操作项
+right | 右侧滑动操作项

package/dist/swipe-cell/computed.js

@@ -0,0 +1,166 @@
+import _ from '../common/utils.wxs';
+
+const THRESHOLD = 0.3;
+const MIN_DISTANCE = 10;
+
+
+export function initRightWidth() {
+  initOpen.call(this, this);
+}
+
+export function initLeftWidth() {
+  initOpen.call(this, this);
+}
+
+function initOpen(context) {
+  const { state } = context;
+  if (typeof state.opened === 'boolean') {
+    // opened 为 boolean 类型，判断默认打开
+    if (state.opened && state.rightWidth > 0) {
+      swipeMove.call(this, -state.rightWidth);
+    } else if (state.opened && state.leftWidth > 0) {
+      swipeMove.call(this, state.leftWidth);
+    }
+  }
+
+  if (Array.isArray(state.opened)) {
+    // opened为array类型，判断默认打开，同时设定左右action时优先打开右边
+    if (state.opened[1] && state.rightWidth > 0) {
+      swipeMove.call(this, -state.rightWidth);
+    } else if (state.opened[0] && state.leftWidth > 0) {
+      swipeMove.call(this, state.leftWidth);
+    }
+  }
+}
+
+const resetTouchStatus = function () {
+  const { state } = this;
+  state.direction = '';
+  state.deltaX = 0;
+  state.deltaY = 0;
+  state.offsetX = 0;
+  state.offsetY = 0;
+};
+
+const touchMove = function (event) {
+  const touchPoint = event.touches[0];
+  const { state } = this;
+
+  state.deltaX = +touchPoint.clientX - state.startX;
+  state.deltaY = +touchPoint.clientY - state.startY;
+  state.offsetX = Math.abs(state.deltaX);
+  state.offsetY = Math.abs(state.deltaY);
+  state.direction = state.direction || getDirection(state.offsetX, state.offsetY);
+};
+
+const getDirection = function (x, y) {
+  if (x > y && x > MIN_DISTANCE) {
+    return 'horizontal';
+  }
+  if (y > x && y > MIN_DISTANCE) {
+    return 'vertical';
+  }
+  return '';
+};
+
+const range = function (num, min, max) {
+  return Math.min(Math.max(num, min), max);
+};
+
+function swipeMove(_offset = 0) {
+  const { state } = this;
+  state.offset = range(_offset, -state.rightWidth, +state.leftWidth);
+  const transform = `translate3d(${state.offset}px, 0, 0)`;
+  // const transition = state.dragging ? 'none' : 'transform .6s cubic-bezier(0.18, 0.89, 0.32, 1)';
+  const transition = 'transform .6s cubic-bezier(0.18, 0.89, 0.32, 1)';
+
+  this.wrapperStyle = _._style({
+    '-webkit-transform': transform,
+    '-webkit-transition': transition,
+    transform,
+    transition,
+  });
+}
+
+const close = function () {
+  swipeMove.call(this, 0);
+};
+
+export function onCloseChange() {
+  if (this.closed) {
+    close.call(this);
+  }
+}
+
+export function onOpenedChange() {
+  if (!this.state.opened) {
+    close.call(this);
+  }
+}
+
+const touchStart = function (event) {
+  resetTouchStatus.call(this);
+  const { state } = this;
+  state.startOffset = state.offset;
+  const touchPoint = event.touches[0];
+
+  state.startX = touchPoint.clientX;
+  state.startY = touchPoint.clientY;
+  this.closeOther();
+};
+
+export function startDrag(event) {
+  this.catchMove();
+  touchStart.call(this, event);
+}
+
+export function onDrag(event) {
+  touchMove.call(this, event);
+  const { state } = this;
+
+  if (state.direction === 'vertical') {
+    this.onSkipMove();
+  }
+  if (state.direction !== 'horizontal') {
+    return;
+  }
+  if (!state.dragging) {
+    this.$emit('dragstart');
+  }
+  state.dragging = true;
+  swipeMove.call(this, state.startOffset + state.deltaX);
+  return false;
+}
+
+const open = function (position) {
+  const { state } = this;
+  const _offset = position === 'left' ? +state.leftWidth : -state.rightWidth;
+  this.open({ position });
+  swipeMove.call(this, _offset);
+};
+
+export function endDrag() {
+  const { state } = this;
+  state.dragging = false;
+  // 左/右侧有可滑动区域，且当前不是已open状态，且滑动幅度超过阈值时open左/右侧（滚动到该侧的最边上）
+  if (
+    +state.rightWidth > 0
+    && -state.startOffset < +state.rightWidth
+    && -state.offset > +state.rightWidth * THRESHOLD
+  ) {
+    open.call(this, 'right');
+  } else if (
+    +state.leftWidth > 0
+    && state.startOffset < +state.leftWidth
+    && state.offset > +state.leftWidth * THRESHOLD
+  ) {
+    open.call(this, 'left');
+  } else {
+    // 仅在有发生侧滑的情况下自动关闭（由js控制是否异步关闭）
+    if (state.startOffset !== state.offset) {
+      close.call(this);
+    }
+  }
+  this.$emit('dragend');
+}
+

package/dist/swipe-cell/props.ts

@@ -0,0 +1,39 @@
+/* eslint-disable */
+
+/**
+ * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
+ * */
+
+import type { TdSwipeCellProps } from './type';
+export default {
+  /** 是否禁用滑动 */
+  disabled: Boolean,
+  /** 左侧滑动操作项。所有行为同 `right` */
+  left: {
+    type: Array,
+  },
+  /** 操作项是否呈现为打开态，值为数组时表示分别控制左右滑动的展开和收起状态 */
+  opened: {
+    type: [Boolean, Array],
+    default: false as TdSwipeCellProps['opened'],
+  },
+  /** 右侧滑动操作项。有两种定义方式，一种是使用数组，二种是使用插槽。`right.text` 表示操作文本，`right.className` 表示操作项类名，`right.style` 表示操作项样式，`right.onClick` 表示点击操作项后执行的回调函数。示例：`[{ text: '删除', icon: 'delete', style: 'background-color: red', onClick: () => {} }]` */
+  right: {
+    type: Array,
+  },
+  /** 操作项点击时触发（插槽写法组件不触发，业务侧自定义内容和事件） */
+  onClick: {
+    type: Function,
+    default: () => ({}),
+  },
+  /** 滑动结束事件 */
+  onDragend: {
+    type: Function,
+    default: () => ({}),
+  },
+  /** 滑动开始事件 */
+  onDragstart: {
+    type: Function,
+    default: () => ({}),
+  },
+};

package/dist/swipe-cell/swipe-cell.css

@@ -0,0 +1,31 @@
+.t-swipe-cell {
+  position: relative;
+  overflow: hidden;
+}
+.t-swipe-cell__left,
+.t-swipe-cell__right {
+  position: absolute;
+  top: 0;
+  height: 100%;
+}
+.t-swipe-cell__left {
+  left: 0;
+  transform: translate3d(-100%, 0, 0);
+}
+.t-swipe-cell__right {
+  right: 0;
+  transform: translate3d(100%, 0, 0);
+}
+.t-swipe-cell__content {
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  padding: 0 var(--td-spacer-2, 32rpx);
+}
+:deep(.t-swipe-cell__icon) {
+  font-size: var(--td-font-size-xl, 40rpx);
+}
+:deep(.t-swipe-cell__icon) + .t-swipe-cell__text:not(:empty) {
+  margin-left: var(--td-spacer, 16rpx);
+  font: var(--td-font-body-medium, 28rpx / 44rpx var(--td-font-family, PingFang SC, Microsoft YaHei, Arial Regular));
+}

package/dist/swipe-cell/swipe-cell.vue

@@ -0,0 +1,245 @@
+<template>
+  <view
+    :class="tClass + ' ' + classPrefix"
+    :style="tools._style([customStyle])"
+    data-key="cell"
+    :opened="state.opened"
+    :left-width="state.leftWidth"
+    :right-width="state.rightWidth"
+    @click="onTap"
+    @touchstart="parseEventDynamicCode($event, disabled || 'startDrag')"
+    @touchmove="parseEventDynamicCode($event, skipMove ? '' : disabled || 'onDrag')"
+    @touchend="parseEventDynamicCode($event, skipMove ? '' : disabled || 'endDrag')"
+    @touchcancel="parseEventDynamicCode($event, disabled || 'endDrag')"
+  >
+    <view
+      id="wrapper"
+      ref="wrapper"
+      :style="wrapperStyle"
+    >
+      <view
+        :class="classPrefix + '__left'"
+        data-key="left"
+      >
+        <slot name="left" />
+        <view
+          v-for="(item, index) in left"
+          :key="index"
+          :class="classPrefix + '__content ' + item.className"
+          :style="item.style"
+          :data-action="item"
+          @click.stop="onActionTap(item, 'left')"
+        >
+          <block
+            v-if="item.icon"
+          >
+            <t-icon
+              :custom-style="item.icon.style || ''"
+              :t-class="classPrefix + '__icon'"
+              :prefix="item.icon.prefix"
+              :name="item.icon.name || item.icon"
+              :size="item.icon.size"
+              :color="item.icon.color"
+              :aria-hidden="!!item.icon.ariaHidden"
+              :aria-label="item.icon.ariaLabel"
+              :aria-role="item.icon.ariaRole"
+            />
+          </block>
+
+          <text
+            v-if="item.text"
+            :class="classPrefix + '__text'"
+          >
+            {{ item.text }}
+          </text>
+        </view>
+      </view>
+      <slot />
+      <view
+        :class="classPrefix + '__right'"
+        data-key="right"
+      >
+        <slot name="right" />
+        <view
+          v-for="(item, index) in right"
+          :key="index"
+          :class="classPrefix + '__content ' + item.className"
+          :style="item.style"
+          :data-action="item"
+          @click.stop="onActionTap(item, 'right')"
+        >
+          <block
+            v-if="item.icon"
+          >
+            <t-icon
+              :custom-style="item.icon.style || ''"
+              :t-class="classPrefix + '__icon'"
+              :prefix="item.icon.prefix"
+              :name="item.icon.name || item.icon"
+              :size="item.icon.size"
+              :color="item.icon.color"
+              :aria-hidden="!!item.icon.ariaHidden"
+              :aria-label="item.icon.ariaLabel"
+              :aria-role="item.icon.ariaRole"
+            />
+          </block>
+
+          <text
+            v-if="item.text"
+            :class="classPrefix + '__text'"
+          >
+            {{ item.text }}
+          </text>
+        </view>
+      </view>
+    </view>
+  </view>
+</template>
+<script>
+import TIcon from '../icon/icon';
+import { uniComponent } from '../common/src/index';
+import { prefix } from '../common/config';
+import props from './props';
+import { getRect } from '../common/utils';
+import { getObserver } from '../common/wechat';
+import {
+  initLeftWidth,
+  initRightWidth,
+  startDrag,
+  onDrag,
+  endDrag,
+  onCloseChange,
+  onOpenedChange,
+} from './computed';
+import tools from '../common/utils.wxs';
+import { parseEventDynamicCode } from '../common/event/dynamic';
+
+let ARRAY = [];
+
+
+const name = `${prefix}-swipe-cell`;
+
+const ContainerClass = `.${name}`;
+
+const makeMethods = () => [
+  [initLeftWidth, 'initLeftWidth'],
+  [initRightWidth, 'initRightWidth'],
+  [startDrag, 'startDrag'],
+  [onDrag, 'onDrag'],
+  [endDrag, 'endDrag'],
+  [onCloseChange, 'onCloseChange'],
+  [onOpenedChange, 'onOpenedChange'],
+].reduce((acc, item) => {
+  const func = item[0];
+  return {
+    ...acc,
+    [item[1]](...args) {
+      func.call(this, ...args);
+    },
+  };
+}, {});
+
+
+export default uniComponent({
+  name,
+  options: {
+    styleIsolation: 'shared',
+  },
+  externalClasses: [
+    `${prefix}-class`,
+  ],
+  components: {
+    TIcon,
+  },
+  props: {
+    ...props,
+  },
+  emits: ['click', 'dragend', 'dragstart'],
+  data() {
+    return {
+      prefix,
+      wrapperStyle: '',
+      closed: true,
+      classPrefix: name,
+      skipMove: false,
+      tools,
+
+      state: {
+        leftWidth: 0,
+        rightWidth: 0,
+        offset: 0,
+        startOffset: 0,
+        opened: this.opened,
+      },
+    };
+  },
+  watch: {
+    left: 'setSwipeWidth',
+    right: 'setSwipeWidth',
+    'state.leftWidth': 'initLeftWidth',
+    'state.rightWidth': 'initRightWidth',
+    'state.opened': 'onOpenedChange',
+    opened: {
+      handler(v) {
+        this.state.opened = v;
+      },
+      immediate: true,
+    },
+  },
+  mounted() {
+    ARRAY.push(this);
+    this.setSwipeWidth();
+  },
+  beforeUnMount() {
+    ARRAY = ARRAY.filter(e => e !== this);
+  },
+  methods: {
+    ...makeMethods(),
+    parseEventDynamicCode,
+    setSwipeWidth() {
+      Promise.all([getRect(this, `${ContainerClass}__left`), getRect(this, `${ContainerClass}__right`)]).then(([leftRect, rightRect]) => {
+        if (leftRect.width === 0 && rightRect.width === 0 && !this._hasObserved) {
+          this._hasObserved = true;
+          getObserver(this, `.${name}`).then(() => {
+            this.setSwipeWidth();
+          });
+        }
+        this.state.leftWidth = leftRect.width;
+        this.state.rightWidth = rightRect.width;
+      });
+    },
+
+    onSkipMove() {
+      this.skipMove = true;
+    },
+
+    catchMove() {
+      this.skipMove = false;
+    },
+
+    open() {
+      this.state.opened = true;
+    },
+
+    close() {
+      this.state.opened = false;
+    },
+
+    closeOther() {
+      ARRAY.filter(item => item !== this).forEach(item => item.close());
+    },
+
+    onTap() {
+      this.close();
+    },
+
+    onActionTap(action, source) {
+      this.$emit('click', action, source);
+    },
+  },
+});
+</script>
+<style scoped>
+@import './swipe-cell.css';
+
+</style>

package/dist/swipe-cell/type.ts

@@ -0,0 +1,48 @@
+/* eslint-disable */
+
+/**
+ * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
+ * */
+
+export interface TdSwipeCellProps {
+  /**
+   * 是否禁用滑动
+   */
+  disabled?: boolean;
+  /**
+   * 左侧滑动操作项。所有行为同 `right`
+   */
+  left?: Array<SwipeActionItem>;
+  /**
+   * 操作项是否呈现为打开态，值为数组时表示分别控制左右滑动的展开和收起状态
+   * @default false
+   */
+  opened?: boolean | Array<boolean>;
+  /**
+   * 右侧滑动操作项。有两种定义方式，一种是使用数组，二种是使用插槽。`right.text` 表示操作文本，`right.className` 表示操作项类名，`right.style` 表示操作项样式，`right.onClick` 表示点击操作项后执行的回调函数。示例：`[{ text: '删除', icon: 'delete', style: 'background-color: red', onClick: () => {} }]`
+   */
+  right?: Array<SwipeActionItem>;
+  /**
+   * 操作项点击时触发（插槽写法组件不触发，业务侧自定义内容和事件）
+   */
+  onClick?: (action: SwipeActionItem, source: SwipeSource) => void;
+  /**
+   * 滑动结束事件
+   */
+  onDragend?: () => void;
+  /**
+   * 滑动开始事件
+   */
+  onDragstart?: () => void;
+}
+
+export interface SwipeActionItem {
+  text?: string;
+  icon?: string | object;
+  className?: string;
+  style?: string;
+  onClick?: () => void;
+  [key: string]: any;
+}
+
+export type SwipeSource = 'left' | 'right';