@tdesign/uniapp 0.0.1-alpha.1 → 0.7.0

package/dist/loading/loading.css

@@ -0,0 +1,203 @@
+.t-loading {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+.t-loading--fullscreen {
+  position: fixed;
+  display: flex;
+  align-items: center;
+  vertical-align: middle;
+  justify-content: center;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: var(--td-loading-z-index, 3500);
+  background-color: var(--td-loading-full-bg-color, rgba(255, 255, 255, 0.6));
+}
+.t-loading__spinner {
+  position: relative;
+  box-sizing: border-box;
+  width: 100%;
+  height: 100%;
+  max-width: 100%;
+  max-height: 100%;
+  animation: rotate 0.8s linear infinite;
+  color: var(--td-loading-color, var(--td-brand-color, var(--td-primary-color-7, #0052d9)));
+}
+.t-loading__spinner.reverse {
+  animation-name: rotateReverse;
+}
+.t-loading__spinner--spinner {
+  animation-timing-function: steps(12);
+  color: var(--td-text-color-primary, var(--td-font-gray-1, rgba(0, 0, 0, 0.9)));
+}
+.t-loading__spinner--spinner .t-loading__dot {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+}
+.t-loading__spinner--spinner .t-loading__dot::before {
+  display: block;
+  width: 5rpx;
+  height: 25%;
+  margin: 0 auto;
+  background-color: var(--td-loading-color, var(--td-brand-color, var(--td-primary-color-7, #0052d9)));
+  border-radius: 40%;
+  content: ' ';
+}
+.t-loading__spinner--circular .t-loading__circular {
+  border-radius: 100%;
+  width: 100%;
+  height: 100%;
+  background: conic-gradient(from 180deg at 50% 50%, rgba(255, 255, 255, 0) 0deg, rgba(255, 255, 255, 0) 60deg, currentColor 330deg, rgba(255, 255, 255, 0) 360deg);
+  mask: radial-gradient(transparent calc(50% - 1rpx), #fff 50%);
+  /* stylelint-disable-next-line */
+  -webkit-mask: radial-gradient(transparent calc(50% - 1rpx), #fff 50%);
+}
+.t-loading__spinner--dots {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  animation: none;
+}
+.t-loading__spinner--dots .t-loading__dot {
+  width: 20%;
+  height: 20%;
+  border-radius: 50%;
+  background-color: var(--td-loading-color, var(--td-brand-color, var(--td-primary-color-7, #0052d9)));
+  animation-duration: 1.8s;
+  animation-name: dotting;
+  animation-timing-function: linear;
+  animation-iteration-count: infinite;
+  animation-fill-mode: both;
+}
+.t-loading__text {
+  color: var(--td-loading-text-color, var(--td-text-color-primary, var(--td-font-gray-1, rgba(0, 0, 0, 0.9))));
+  font: var(--td-loading-text-font, var(--td-font-body-small, 24rpx / 40rpx var(--td-font-family, PingFang SC, Microsoft YaHei, Arial Regular)));
+}
+.t-loading__text--vertical:not(:first-child):not(:empty) {
+  margin-top: 12rpx;
+}
+.t-loading__text--horizontal:not(:first-child):not(:empty) {
+  margin-left: 16rpx;
+}
+.t-loading--vertical {
+  flex-direction: column;
+}
+.t-loading--horizontal {
+  flex-direction: row;
+  vertical-align: top;
+}
+@keyframes t-bar {
+  0% {
+    width: 0;
+  }
+  50% {
+    width: 70%;
+  }
+  100% {
+    width: 80%;
+  }
+}
+@keyframes t-bar-loaded {
+  0% {
+    height: 6rpx;
+    opacity: 1;
+    width: 90%;
+  }
+  50% {
+    height: 6rpx;
+    opacity: 1;
+    width: 100%;
+  }
+  100% {
+    height: 0;
+    opacity: 0;
+    width: 100%;
+  }
+}
+.t-loading__dot-1 {
+  transform: rotate(30deg);
+  opacity: 0;
+}
+.t-loading__dot-2 {
+  transform: rotate(60deg);
+  opacity: 0.08333333;
+}
+.t-loading__dot-3 {
+  transform: rotate(90deg);
+  opacity: 0.16666667;
+}
+.t-loading__dot-4 {
+  transform: rotate(120deg);
+  opacity: 0.25;
+}
+.t-loading__dot-5 {
+  transform: rotate(150deg);
+  opacity: 0.33333333;
+}
+.t-loading__dot-6 {
+  transform: rotate(180deg);
+  opacity: 0.41666667;
+}
+.t-loading__dot-7 {
+  transform: rotate(210deg);
+  opacity: 0.5;
+}
+.t-loading__dot-8 {
+  transform: rotate(240deg);
+  opacity: 0.58333333;
+}
+.t-loading__dot-9 {
+  transform: rotate(270deg);
+  opacity: 0.66666667;
+}
+.t-loading__dot-10 {
+  transform: rotate(300deg);
+  opacity: 0.75;
+}
+.t-loading__dot-11 {
+  transform: rotate(330deg);
+  opacity: 0.83333333;
+}
+.t-loading__dot-12 {
+  transform: rotate(360deg);
+  opacity: 0.91666667;
+}
+@keyframes rotate {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+@keyframes rotateReverse {
+  from {
+    transform: rotate(360deg);
+  }
+  to {
+    transform: rotate(0deg);
+  }
+}
+@keyframes dotting {
+  0% {
+    opacity: 0.15;
+  }
+  1% {
+    opacity: 0.8;
+  }
+  33% {
+    opacity: 0.8;
+  }
+  34% {
+    opacity: 0.15;
+  }
+  100% {
+    opacity: 0.15;
+  }
+}

package/dist/loading/loading.vue

@@ -0,0 +1,157 @@
+<template>
+  <view
+    :style="tools._style([
+      customStyle,
+      show ? '' : 'display: none',
+      inheritColor ? 'color: inherit' : ''
+    ])"
+    :class="[
+      tClass,
+      classPrefix +
+        ' ' + (classPrefix + '--' + layout) +
+        ' ' + (fullscreen ? classPrefix + '--fullscreen' : '')
+    ]"
+  >
+    <view
+      v-if="indicator"
+      :class="[
+        tClassIndicator,
+        classPrefix + '__spinner ' +
+          classPrefix + '__spinner--' + theme + ' ' + (reverse ? 'reverse' : '')
+      ]"
+      :style="
+        'width: ' +tools.addUnit(size) +
+          '; height: ' + tools.addUnit(size) +
+          '; ' + (inheritColor ? 'color: inherit;' : '') +
+          ' ' + (indicator ? '' : 'display: none;') +
+          ' ' + (duration ? 'animation-duration: ' + duration / 1000 + 's;' : '') +
+          ' animation-play-state: ' + (pause ? 'paused' : 'running') +
+          ';'
+      "
+      :aria-role="ariaRole || 'img'"
+      :aria-label="ariaLabel || text || '加载中'"
+    >
+      <template
+        v-if="theme === 'spinner'"
+      >
+        <view
+          v-for="(item, index) in 12"
+          :key="index"
+          :class="classPrefix + '__dot ' + classPrefix + '__dot-' + index"
+        />
+      </template>
+
+      <view
+        v-if="theme === 'circular'"
+        :class="classPrefix + '__circular'"
+      />
+      <block v-if="theme === 'dots'">
+        <view
+          :class="classPrefix + '__dot'"
+          :style="
+            (duration ? 'animation-duration: ' + duration / 1000 + 's; animation-delay:' + 0 + 's;' : '') +
+              ' animation-play-state: ' +
+              (pause ? 'paused' : 'running') +
+              ';'
+          "
+        />
+        <view
+          :class="classPrefix + '__dot'"
+          :style="
+            (duration ? 'animation-duration: ' + duration / 1000 + 's; animation-delay:' + (duration * 1) / 3000 + 's;' : '') +
+              ' animation-play-state: ' +
+              (pause ? 'paused' : 'running') +
+              ';'
+          "
+        />
+        <view
+          :class="classPrefix + '__dot'"
+          :style="
+            (duration ? 'animation-duration: ' + duration / 1000 + 's; animation-delay:' + (duration * 2) / 3000 + 's;' : '') +
+              ' animation-play-state: ' +
+              (pause ? 'paused' : 'running') +
+              ';'
+          "
+        />
+      </block>
+      <slot name="indicator" />
+    </view>
+    <view
+      :class="[tools.cls(classPrefix + '__text', [layout]), tClassText]"
+      :aria-hidden="indicator"
+      :aria-label="ariaLabel || text"
+    >
+      <block v-if="text">
+        {{ text }}
+      </block>
+      <slot name="text" />
+      <slot />
+    </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}-loading`;
+
+
+export default uniComponent({
+  name,
+  options: {
+    multipleSlots: true,
+    styleIsolation: 'shared',
+  },
+  externalClasses: [
+    `${prefix}-class`,
+    `${prefix}-class-text`,
+    `${prefix}-class-indicator`,
+  ],
+  props: {
+    ...props,
+  },
+  data() {
+    return {
+      prefix,
+      classPrefix: name,
+      show: true,
+      tools,
+    };
+  },
+  watch: {
+    loading: {
+      handler(value) {
+        const {
+          delay,
+        } = this;
+        if (this.timer) {
+          clearTimeout(this.timer);
+        }
+        if (value && delay) {
+          this.timer = setTimeout(() => {
+            this.show = value;
+            this.timer = null;
+          }, delay);
+        } else {
+          this.show = value;
+        }
+      },
+      immediate: true,
+    },
+  },
+  beforeUnMount() {
+    clearTimeout(this.timer);
+  },
+  methods: {
+    refreshPage() {
+      this.$emit('reload');
+    },
+  },
+});
+
+</script>
+<style src="./loading.css"  scoped>
+</style>

package/dist/loading/props.ts

@@ -0,0 +1,68 @@
+/* eslint-disable */
+
+/**
+ * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
+ * */
+
+import type { TdLoadingProps } from './type';
+export default {
+  /** 延迟显示加载效果的时间，用于防止请求速度过快引起的加载闪烁，单位：毫秒 */
+  delay: {
+    type: Number,
+    default: 0,
+  },
+  /** 加载动画执行完成一次的时间，单位：毫秒 */
+  duration: {
+    type: Number,
+    default: 800,
+  },
+  /** 是否显示为全屏加载 */
+  fullscreen: Boolean,
+  /** 加载指示符，值为 true 显示默认指示符，值为 false 则不显示，也可以自定义指示符 */
+  indicator: {
+    type: Boolean,
+    default: true as TdLoadingProps['indicator'],
+  },
+  /** 是否继承父元素颜色 */
+  inheritColor: Boolean,
+  /** 对齐方式 */
+  layout: {
+    type: String,
+    default: 'horizontal' as TdLoadingProps['layout'],
+    validator(val: TdLoadingProps['layout']): boolean {
+      if (!val) return true;
+      return ['horizontal', 'vertical'].includes(val);
+    },
+  },
+  /** 是否处于加载状态 */
+  loading: {
+    type: Boolean,
+    default: true,
+  },
+  /** 是否暂停动画 */
+  pause: Boolean,
+  /** 加载进度 */
+  progress: {
+    type: Number,
+  },
+  /** 加载动画是否反向 */
+  reverse: Boolean,
+  /** 尺寸，示例：20px */
+  size: {
+    type: String,
+    default: '20px',
+  },
+  /** 加载提示文案 */
+  text: {
+    type: String,
+  },
+  /** 加载组件类型 */
+  theme: {
+    type: String,
+    default: 'circular' as TdLoadingProps['theme'],
+    validator(val: TdLoadingProps['theme']): boolean {
+      if (!val) return true;
+      return ['circular', 'spinner', 'dots', 'custom'].includes(val);
+    },
+  },
+};

package/dist/loading/type.ts

@@ -0,0 +1,70 @@
+/* eslint-disable */
+
+/**
+ * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
+ * */
+
+export interface TdLoadingProps {
+  /**
+   * 延迟显示加载效果的时间，用于防止请求速度过快引起的加载闪烁，单位：毫秒
+   * @default 0
+   */
+  delay?: number;
+  /**
+   * 加载动画执行完成一次的时间，单位：毫秒
+   * @default 800
+   */
+  duration?: number;
+  /**
+   * 是否显示为全屏加载
+   * @default false
+   */
+  fullscreen?: boolean;
+  /**
+   * 加载指示符，值为 true 显示默认指示符，值为 false 则不显示，也可以自定义指示符
+   * @default true
+   */
+  indicator?: boolean;
+  /**
+   * 是否继承父元素颜色
+   * @default false
+   */
+  inheritColor?: boolean;
+  /**
+   * 对齐方式
+   * @default horizontal
+   */
+  layout?: 'horizontal' | 'vertical';
+  /**
+   * 是否处于加载状态
+   * @default true
+   */
+  loading?: boolean;
+  /**
+   * 是否暂停动画
+   * @default false
+   */
+  pause?: boolean;
+  /**
+   * 加载进度
+   */
+  progress?: number;
+  /**
+   * 加载动画是否反向
+   */
+  reverse?: boolean;
+  /**
+   * 尺寸，示例：20px
+   * @default '20px'
+   */
+  size?: string;
+  /**
+   * 加载提示文案
+   */
+  text?: string;
+  /**
+   * 加载组件类型
+   * @default circular
+   */
+  theme?: 'circular' | 'spinner' | 'dots' | 'custom';
+}

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

@@ -0,0 +1,69 @@
+:: BASE_DOC ::
+
+## API
+
+### Message Props
+
+name | type | default | description | required
+-- | -- | -- | -- | --
+custom-style | Object | - | CSS(Cascading Style Sheets) | N
+action | String | - | `deprecated`。operation | N
+align | String | left | options: left/center。Typescript：`MessageAlignType` `type MessageAlignType = 'left' \| 'center'`。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/packages/uniapp-components/message/type.ts) | N
+close-btn | String / Boolean / Object | false | \- | N
+content | String | - | \- | N
+duration | Number | 3000 | \- | N
+gap | String / Number / Boolean | 12 | \- | N
+icon | String / Boolean / Object | true | \- | N
+link | String / Object | - | \- | N
+marquee | Boolean / Object | false | Typescript：`boolean \| MessageMarquee` `interface MessageMarquee { speed?: number; loop?: number; delay?: number }`。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/packages/uniapp-components/message/type.ts) | N
+offset | Array | - | Typescript：`Array<string \| number>` | N
+single | Boolean | true | \- | N
+theme | String | info | options: info/success/warning/error。Typescript：`MessageThemeList` `type MessageThemeList = 'info' \| 'success' \| 'warning' \| 'error'`。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/packages/uniapp-components/message/type.ts) | N
+visible | Boolean | false | `v-model:visible` is supported | N
+default-visible | Boolean | false | uncontrolled property | N
+z-index | Number | 15000 | \- | N
+
+### Message Events
+
+name | params | description
+-- | -- | --
+action-btn-click | `(context: { e: MouseEvent })` | \-
+close-btn-click | `(context: { e: MouseEvent })` | \-
+duration-end | \- | \-
+link-click | `(context: { e: MouseEvent })` | \-
+
+### Message Slots
+
+name | Description
+-- | --
+\- | \-
+action | `deprecated`。operation
+close-btn | \-
+content | \-
+icon | \-
+link | \-
+
+### Message External Classes
+
+className | Description
+-- | --
+t-class | \-
+t-class-close-btn | \-
+t-class-content | \-
+t-class-icon | \-
+t-class-link | \-
+
+### CSS Variables
+
+The component provides the following CSS variables, which can be used to customize styles.
+Name | Default Value | Description 
+-- | -- | --
+--td-message-bg-color | @bg-color-container | - 
+--td-message-border-radius | @radius-default | - 
+--td-message-box-shadow | @shadow-4 | - 
+--td-message-close-icon-color | @font-gray-3 | - 
+--td-message-content-font-color | @font-gray-1 | - 
+--td-message-error-color | @error-color | - 
+--td-message-info-color | @brand-color | - 
+--td-message-success-color | @success-color | - 
+--td-message-warning-color | @warning-color | -

package/dist/message/README.md

@@ -0,0 +1,105 @@
+---
+title: Message 消息通知
+description: 用于轻量级反馈或提示，不会打断用户操作。
+spline: message
+isComponent: true
+---
+
+
+## 引入
+
+可在 `main.ts` 或在需要使用的页面或组件中引入。
+
+```js
+import TMessage from '@tdesign/uniapp/message/message.vue';
+```
+
+### 引入 API
+
+若以 API 形式调用 Message，则需在页面 `page.js` 中引入组件 API：
+
+```js
+import Message from '@tdesign/uniapp/message/index';
+```
+
+### 组件类型
+
+弹窗内容为纯文本、标题和副标题、带输入框，用 API `Message.info` 方法调用反馈类对话框。
+
+
+{{ base }}
+
+
+### 组件状态
+
+消息通知类型为普通（info）、警示（warning）、成功（success）、错误（error）  
+
+{{ theme }}
+
+## API
+
+### Message Props
+
+名称 | 类型 | 默认值 | 描述 | 必传
+-- | -- | -- | -- | --
+custom-style | Object | - | 自定义样式 | N
+action | String | - | 已废弃。操作 | N
+align | String | left | 文本对齐方式。可选项：left/center。TS 类型：`MessageAlignType` `type MessageAlignType = 'left' \| 'center'`。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/packages/uniapp-components/message/type.ts) | N
+close-btn | String / Boolean / Object | false | 关闭按钮，可以自定义。值为 true 显示默认关闭按钮，值为 false 不显示关闭按钮。值类型为 string ，如：'user'，则显示组件内置图标。值类型为 object ，则会透传至 icon 组件 | N
+content | String | - | 用于自定义消息弹出内容 | N
+duration | Number | 3000 | 消息内置计时器，计时到达时会触发 duration-end 事件。单位：毫秒。值为 0 则表示没有计时器 | N
+gap | String / Number / Boolean | 12 | 两条 `message` 之间的间距 | N
+icon | String / Boolean / Object | true | 消息提醒前面的图标，可以自定义。值为 true 则根据 theme 显示对应的图标，值为 false 则不显示图标。值为 true 显示默认关闭按钮，值为 false 不显示关闭按钮。值类型为 string ，如：'info'，则显示组件内置图标。值类型为 object ，则会透传至 icon 组件 | N
+link | String / Object | - | 链接名称。值为字符串表示链接名称，值为 `Object` 类型，表示透传至 `Link` | N
+marquee | Boolean / Object | false | 跑马灯效果。speed 指速度控制；loop 指循环播放次数，值为 -1 表示循环播放，值为 0 表示不循环播放；delay 表示延迟多久开始播放。TS 类型：`boolean \| MessageMarquee` `interface MessageMarquee { speed?: number; loop?: number; delay?: number }`。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/packages/uniapp-components/message/type.ts) | N
+offset | Array | - | 相对于 placement 的偏移量，默认单位 rpx。示例：[-10, 20] 或 ['10rpx', '8rpx']。TS 类型：`Array<string \| number>` | N
+single | Boolean | true | 是否保持仅显示一条信息 | N
+theme | String | info | 消息组件风格。可选项：info/success/warning/error。TS 类型：`MessageThemeList` `type MessageThemeList = 'info' \| 'success' \| 'warning' \| 'error'`。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/packages/uniapp-components/message/type.ts) | N
+visible | Boolean | false | 是否显示，隐藏时默认销毁组件。支持语法糖 `v-model:visible` | N
+default-visible | Boolean | false | 是否显示，隐藏时默认销毁组件。非受控属性 | N
+z-index | Number | 15000 | 元素层级，样式默认为 15000 | N
+
+### Message Events
+
+名称 | 参数 | 描述
+-- | -- | --
+action-btn-click | `(context: { e: MouseEvent })` | 已废弃。当操作按钮存在时，用户点击操作按钮时触发
+close-btn-click | `(context: { e: MouseEvent })` | 当关闭按钮存在时，用户点击关闭按钮触发
+duration-end | \- | 计时结束后触发
+link-click | `(context: { e: MouseEvent })` | 当`link`链接存在时，点击链接文本时触发
+
+### Message Slots
+
+名称 | 描述
+-- | --
+\- | 默认插槽，作用同 `content` 插槽
+action | 已废弃。自定义 `action` 显示内容
+close-btn | 关闭按钮
+content | 自定义消息弹出内容
+icon | 消息提醒前面的图标
+link | 链接名称
+
+### Message External Classes
+
+类名 | 描述
+-- | --
+t-class | 根节点样式类
+t-class-close-btn | 关闭按钮样式类
+t-class-content | 内容样式类
+t-class-icon | 图标样式类
+t-class-link | 链接样式类
+
+### CSS Variables
+
+组件提供了下列 CSS 变量，可用于自定义样式。
+| 名称 | 默认值 | 描述 |
+| -- | -- | -- | 
+| --td-message-bg-color | @bg-color-container | - |
+| --td-message-border-radius | @radius-default | - |
+| --td-message-box-shadow | @shadow-4 | - |
+| --td-message-close-icon-color | @font-gray-3 | - |
+| --td-message-content-font-color | @font-gray-1 | - |
+| --td-message-error-color | @error-color | - |
+| --td-message-info-color | @brand-color | - |
+| --td-message-success-color | @success-color | - |
+| --td-message-warning-color | @warning-color | - |

package/dist/message/config.js

@@ -0,0 +1,10 @@
+import props from './props';
+
+
+export const messageDefaultData = Object.keys(props).reduce((acc, key) => {
+  const result = props[key].default;
+  return {
+    ...acc,
+    [key]: typeof result === 'function' ? result() : result,
+  };
+}, {});

package/dist/message/index.d.ts

@@ -0,0 +1,17 @@
+import { MessageProps } from './message.interface';
+declare type Context = any;
+declare type Instance = any;
+interface MessageActionOptionsType extends Optional<MessageProps> {
+  context?: Context;
+  selector?: string;
+}
+declare const Handler: {
+  info(options: MessageActionOptionsType): Instance;
+  success(options: MessageActionOptionsType): Instance;
+  warning(options: MessageActionOptionsType): Instance;
+  error(options: MessageActionOptionsType): Instance;
+  hide(options: MessageActionOptionsType): void;
+};
+
+export default Handler;
+