@tdesign/uniapp 0.0.1-alpha.1 → 0.7.0

package/dist/pull-down-refresh/type.ts

@@ -0,0 +1,118 @@
+/* eslint-disable */
+
+/**
+ * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
+ * */
+
+import type { TdLoadingProps as LoadingProps } from '../loading/type';
+
+export interface TdPullDownRefreshProps {
+  /**
+   * 是否禁用下拉刷新
+   * @default false
+   */
+  disabled?: boolean;
+  /**
+   * iOS点击顶部状态栏、安卓双击标题栏时，滚动条返回顶部，只支持竖向。自 2.27.3 版本开始，若非显式设置为 false，则在显示尺寸大于屏幕 90% 时自动开启
+   * @default true
+   */
+  enableBackToTop?: boolean;
+  /**
+   * 开启 passive 特性，能优化一定的滚动性能
+   * @default false
+   */
+  enablePassive?: boolean;
+  /**
+   * 加载中下拉高度，如果值为数字则单位是：'px'
+   * @default 50
+   */
+  loadingBarHeight?: string | number;
+  /**
+   * 加载loading样式
+   * @default {}
+   */
+  loadingProps?: LoadingProps;
+  /**
+   * 提示语，组件内部默认值为 ['下拉刷新', '松手刷新', '正在刷新', '刷新完成']
+   * @default []
+   */
+  loadingTexts?: string[];
+  /**
+   * 距底部/右边多远时，触发 scrolltolower 事件
+   * @default 50
+   */
+  lowerThreshold?: string | number;
+  /**
+   * 最大下拉高度，如果值为数字则单位是：'px'
+   * @default 80
+   */
+  maxBarHeight?: string | number;
+  /**
+   * 刷新超时时间
+   * @default 3000
+   */
+  refreshTimeout?: number;
+  /**
+   * 值应为某子元素id（id不能以数字开头）。设置哪个方向可滚动，则在哪个方向滚动到该元素
+   * @default ''
+   */
+  scrollIntoView?: string;
+  /**
+   * 滚动条显隐控制 (同时开启 enhanced 属性后生效)
+   * @default true
+   */
+  showScrollbar?: boolean;
+  /**
+   * 刷新成功提示展示时长，单位 'ms'
+   * @default 500
+   */
+  successDuration?: string | number;
+  /**
+   * 距顶部/左边多远时，触发 scrolltoupper 事件
+   * @default 50
+   */
+  upperThreshold?: string | number;
+  /**
+   * 是否使用了自定义导航栏
+   * @default false
+   */
+  usingCustomNavbar?: boolean;
+  /**
+   * 组件状态，值为 `true` 表示下拉状态，值为 `false` 表示收起状态
+   * @default false
+   */
+  value?: boolean;
+  /**
+   * 组件状态，值为 `true` 表示下拉状态，值为 `false` 表示收起状态，非受控属性
+   * @default false
+   */
+  defaultValue?: boolean;
+  /**
+   * 下拉或收起时触发，用户手势往下滑动触发下拉状态，手势松开触发收起状态
+   */
+  onChange?: (context: { value: boolean }) => void;
+  /**
+   * 滑动结束事件
+   */
+  onDragend?: (context: TouchEvent) => void;
+  /**
+   * 滑动事件
+   */
+  onDragging?: (context: TouchEvent) => void;
+  /**
+   * 滑动开始事件
+   */
+  onDragstart?: (context: TouchEvent) => void;
+  /**
+   * 结束下拉时触发
+   */
+  onRefresh?: () => void;
+  /**
+   * 滚动到页面底部时触发
+   */
+  onScrolltolower?: () => void;
+  /**
+   * 刷新超时触发
+   */
+  onTimeout?: () => void;
+}

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

@@ -0,0 +1,40 @@
+:: BASE_DOC ::
+
+## API
+
+### QRCode Props
+
+name | type | default | description | required
+-- | -- | -- | -- | --
+custom-style | Object | - | CSS(Cascading Style Sheets) | N
+bg-color | String | - | QR code background color | N
+borderless | Boolean | false | Is there a border | N
+color | String | - | QR code color | N
+icon | String | - | The address of the picture in the QR code | N
+icon-size | Number / Object | 40 | The size of the picture in the QR code。Typescript：`number \| { width: number; height: number }` | N
+level | String | M | QR code error correction level。options: L/M/Q/H | N
+size | Number | 160 | QR code size | N
+status | String | active | QR code status。options: active/expired/loading/scanned。Typescript：`QRStatus` `type QRStatus = "active" \| "expired" \| "loading" \| "scanned"`。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/packages/uniapp-components/qrcode/type.ts) | N
+status-render | Boolean | false | should use custom status slot | N
+value | String | - | scanned text | N
+
+### QRCode Events
+
+name | params | description
+-- | -- | --
+refresh | \- | Click the "Click to refresh" callback
+
+### QRCode Slots
+
+name | Description
+-- | --
+status-render | \-
+
+### CSS Variables
+
+The component provides the following CSS variables, which can be used to customize styles.
+Name | Default Value | Description 
+-- | -- | --
+--td-font-size-title-small | --td-font-size-title-small | - 
+--td-brand-color-hover | --td-brand-color-hover | - 
+--td-success-color | --td-success-color | -

package/dist/qrcode/README.md

@@ -0,0 +1,97 @@
+---
+title: QRCode 二维码
+description: 二维码能够将文本转换生成二维码的组件，支持自定义配色和 Logo 配置。
+spline: message
+isComponent: true
+---
+
+## 引入
+
+可在 `main.ts` 或在需要使用的页面或组件中引入。
+
+```js
+import TQRCode from '@tdesign/uniapp/qrcode/qrcode.vue';
+```
+
+### 01 组件类型
+
+#### 基本用法
+
+{{ base }}
+
+#### 带 Icon 的二维码
+
+{{ icon }}
+
+
+
+#### 二维码纠错等级
+
+{{ level }}
+
+### 02 组件状态
+
+{{ status }}
+
+### 03 组件样式
+
+#### 二维码颜色
+
+{{ color }}
+
+#### 二维码尺寸
+
+{{ size }}
+
+
+### FAQ
+
+#### 关于二维码纠错等级
+纠错等级也叫纠错率，就是指二维码可以被遮挡后还能正常扫描，而这个能被遮挡的最大面积就是纠错率。
+
+通常情况下二维码分为 4 个纠错级别：`L级` 可纠正约 `7%` 错误、`M级` 可纠正约 `15%` 错误、`Q级` 可纠正约 `25%` 错误、`H级` 可纠正约 `30%` 错误。但并不是所有位置都可以缺损，像最明显的三个角上的方框，直接影响初始定位。中间零散的部分是内容编码，可以容忍缺损。当二维码的内容编码携带信息比较少的时候，也就是链接比较短的时候，设置不同的纠错等级，生成的图片不会发生变化。
+有关更多信息，可参阅[官方文档](https://www.qrcode.com/zh/about/error_correction)的相关资料
+
+#### 生成的二维码无法扫描？
+若二维码无法扫码识别，可能是因为链接地址过长导致像素过于密集，可以通过 `size` 配置二维码更大，或者通过短链接服务等方式将链接变短。
+
+##
+
+## API
+
+### QRCode Props
+
+名称 | 类型 | 默认值 | 描述 | 必传
+-- | -- | -- | -- | --
+custom-style | Object | - | 自定义样式 | N
+bg-color | String | - | 二维码背景颜色 | N
+borderless | Boolean | false | 是否有边框 | N
+color | String | - | 二维码颜色 | N
+icon | String | - | 二维码中图片的地址 | N
+icon-size | Number / Object | 40 | 二维码中图片的大小。TS 类型：`number \| { width: number; height: number }` | N
+level | String | M | 二维码纠错等级。可选项：L/M/Q/H | N
+size | Number | 160 | 二维码大小 | N
+status | String | active | 二维码状态。可选项：active/expired/loading/scanned。TS 类型：`QRStatus` `type QRStatus = "active" \| "expired" \| "loading" \| "scanned"`。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/packages/uniapp-components/qrcode/type.ts) | N
+status-render | Boolean | false | 是否启用自定义渲染 | N
+value | String | - | 扫描后的文本 | N
+
+### QRCode Events
+
+名称 | 参数 | 描述
+-- | -- | --
+refresh | \- | 点击"点击刷新"的回调
+
+### QRCode Slots
+
+名称 | 描述
+-- | --
+status-render | 自定义状态渲染器
+
+### CSS Variables
+
+组件提供了下列 CSS 变量，可用于自定义样式。
+名称 | 默认值 | 描述 
+-- | -- | --
+--td-font-size-title-small | --td-font-size-title-small | - 
+--td-brand-color-hover | --td-brand-color-hover | - 
+--td-success-color | --td-success-color | -

package/dist/qrcode/components/qrcode-canvas/props.ts

@@ -0,0 +1,48 @@
+export default {
+  // 二维码内容
+  value: {
+    type: String,
+    default: '',
+  },
+  // 中心图标路径
+  icon: {
+    type: String,
+    default: '',
+  },
+  // 二维码大小（单位rpx）
+  size: {
+    type: Number,
+    default: 160,
+  },
+  // 中心图标大小（单位px）
+  iconSize: {
+    type: [Number, Object],
+    default: 40,
+  },
+  // 纠错等级
+  level: {
+    type: String,
+    default: 'M',
+    validator: (value: string) => ['L', 'M', 'Q', 'H'].includes(value),
+  },
+  // 背景色
+  bgColor: {
+    type: String,
+    default: '#FFFFFF',
+  },
+  // 二维码颜色
+  color: {
+    type: String,
+    default: '#000000',
+  },
+  // 是否包含边距
+  includeMargin: {
+    type: Boolean,
+    default: false,
+  },
+  // 边距大小（单位rpx）
+  marginSize: {
+    type: Number,
+    default: 0,
+  },
+};

package/dist/qrcode/components/qrcode-canvas/qrcode-canvas.css

@@ -0,0 +1,7 @@
+.t-qrcode__canvas-wrapper {
+  display: inline-block;
+  position: relative;
+}
+.t-qrcode__canvas {
+  display: block;
+}