@tdesign/uniapp 0.0.1-alpha.1 → 0.7.0

package/dist/qrcode/qrcode.vue

@@ -0,0 +1,144 @@
+<template>
+  <view
+    :style="`${tools._style([customStyle])}; width:${containerSize}px; height: ${containerSize}px; background-color: ${bgColor};`"
+    :class="`${classPrefix} ${borderless ? prefix + '-' + 'borderless' : ''} ${tClass}`"
+  >
+    <QrcodeCanvas
+      ref="qrcodeCanvas"
+      :t-class="tClassCanvas"
+      :size="size"
+      :value="value"
+      :level="level"
+      :color="color"
+      :bg-color="bgColor"
+      :icon="icon"
+      :icon-size="iconSize"
+      @drawError="handleDrawError"
+      @drawCompleted="handleDrawCompleted"
+    />
+
+    <view
+      v-if="showMask && canvasReady"
+      :class="`${prefix}-mask`"
+    >
+      <QrcodeStatus
+        :status="status"
+        :status-render="statusRender"
+        @refresh="handleRefresh"
+      >
+        <template #statusRender>
+          <slot name="statusRender" />
+        </template>
+      </QrcodeStatus>
+    </view>
+  </view>
+</template>
+
+<script>
+import QrcodeCanvas from './components/qrcode-canvas/qrcode-canvas.vue';
+import QrcodeStatus from './components/qrcode-status/qrcode-status.vue';
+import { prefix } from '../common/config';
+import props from './props';
+import { uniComponent } from '../common/src/index';
+import tools from '../common/utils.wxs';
+
+const name = `${prefix}-qrcode`;
+
+export default uniComponent({
+  name,
+  options: {
+    styleIsolation: 'shared',
+  },
+  externalClasses: [
+    `${prefix}-class`,
+    `${prefix}-class-canvas`,
+  ],
+  components: {
+    QrcodeCanvas,
+    QrcodeStatus,
+  },
+  props: {
+    ...props,
+  },
+  data() {
+    return {
+      prefix,
+      tools,
+      showMask: false,
+      classPrefix: name,
+      canvasReady: false,
+      canvasNode: null,
+    };
+  },
+  computed: {
+    // 容器尺寸 = Canvas 尺寸 + padding * 2
+    // padding 为 12px，所以容器需要额外 24px
+    containerSize() {
+      return this.size + 24;
+    },
+  },
+  watch: {
+    status: {
+      handler(newVal) {
+        this.showMask = newVal !== 'active';
+      },
+      immediate: true,
+    },
+  },
+  mounted() {
+    this.initCanvas();
+  },
+  methods: {
+    async initCanvas() {
+      // 获取 canvas 实例
+      const canvasComp = this.$refs.qrcodeCanvas;
+      if (canvasComp) {
+        const canvas = await canvasComp.getCanvasNode();
+        this.canvasNode = canvas;
+      }
+    },
+
+    // 用于外部调用，重新绘制二维码
+    init() {
+      const canvasComp = this.$refs.qrcodeCanvas;
+      if (canvasComp) {
+        canvasComp.initCanvas();
+      }
+    },
+
+    handleDrawCompleted() {
+      this.canvasReady = true;
+    },
+    handleDrawError(err) {
+      console.error('二维码绘制失败', err);
+    },
+    handleRefresh() {
+      this.$emit('refresh');
+    },
+    // 二维码下载方法
+    async handleDownload() {
+      if (!this.canvasNode) {
+        console.error('未找到 canvas 节点');
+        return;
+      }
+
+      // 注意：此方法在非小程序环境需要适配
+      if (typeof wx !== 'undefined' && uni.canvasToTempFilePath) {
+        uni.canvasToTempFilePath({
+          canvas: this.canvasNode,
+          success: (res) => {
+            uni.saveImageToPhotosAlbum({ filePath: res.tempFilePath });
+          },
+          fail: (err) => {
+            console.error('canvasToTempFilePath failed', err);
+          },
+        });
+      }
+    },
+  },
+});
+</script>
+
+<style lang="less" scoped>
+@import './qrcode.css';
+</style>

package/dist/qrcode/type.ts

@@ -0,0 +1,66 @@
+/* eslint-disable */
+
+/**
+ * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
+ * */
+
+export interface TdQRCodeProps {
+  /**
+   * 二维码背景颜色
+   * @default ''
+   */
+  bgColor?: string;
+  /**
+   * 是否有边框
+   * @default false
+   */
+  borderless?: boolean;
+  /**
+   * 二维码颜色
+   * @default ''
+   */
+  color?: string;
+  /**
+   * 二维码中图片的地址
+   * @default ''
+   */
+  icon?: string;
+  /**
+   * 二维码中图片的大小
+   * @default 40
+   */
+  iconSize?: number | { width: number; height: number };
+  /**
+   * 二维码纠错等级
+   * @default M
+   */
+  level?: 'L' | 'M' | 'Q' | 'H';
+  /**
+   * 二维码大小
+   * @default 160
+   */
+  size?: number;
+  /**
+   * 二维码状态
+   * @default active
+   */
+  status?: QRStatus;
+  /**
+   * 是否启用自定义渲染
+   * @default false
+   */
+  statusRender?: boolean;
+  /**
+   * 扫描后的文本
+   * @default ''
+   */
+  value?: string;
+  /**
+   * 点击"点击刷新"的回调
+   */
+  onRefresh?: () => void;
+}
+
+export type QRStatus = 'active' | 'expired' | 'loading' | 'scanned';
+
+export type StatusRenderInfo = { status: QRStatus; onRefresh?: () => void };

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

@@ -0,0 +1,104 @@
+:: BASE_DOC ::
+
+## API
+
+### Radio Props
+
+name | type | default | description | required
+-- | -- | -- | -- | --
+custom-style | Object | - | CSS(Cascading Style Sheets) | N
+allow-uncheck | Boolean | false | \- | N
+block | Boolean | true | \- | N
+checked | Boolean | false | `v-model:checked` is supported | N
+default-checked | Boolean | false | uncontrolled property | N
+content | String | - | \- | N
+content-disabled | Boolean | false | \- | N
+disabled | Boolean | undefined | \- | N
+icon | String / Array | 'circle' | Typescript：`'circle' \| 'line' \| 'dot' \| Array<string>` | N
+label | String | - | \- | N
+max-content-row | Number | 5 | \- | N
+max-label-row | Number | 3 | \- | N
+name | String | - | \- | N
+placement | String | - | options: left/right | N
+readonly | Boolean | undefined | \- | N
+relation-key | String | - | \- | N
+value | String / Number / Boolean | false | Typescript：`T` `type RadioValue = string \| number \| boolean`。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/packages/uniapp-components/radio/type.ts) | N
+
+### Radio Events
+
+name | params | description
+-- | -- | --
+change | `(context: { checked: boolean })` | \-
+
+### Radio Slots
+
+name | Description
+-- | --
+\- | \-
+content | \-
+icon | \-
+label | \-
+
+### Radio External Classes
+
+className | Description
+-- | --
+t-class | \-
+t-class-border | \-
+t-class-content | \-
+t-class-icon | \-
+t-class-label | \-
+
+
+### RadioGroup Props
+
+name | type | default | description | required
+-- | -- | -- | -- | --
+custom-style | Object | - | CSS(Cascading Style Sheets) | N
+allow-uncheck | Boolean | false | \- | N
+borderless | Boolean | false | \- | N
+disabled | Boolean | undefined | \- | N
+icon | String / Array | 'circle' | Typescript：`'circle' \| 'line' \| 'dot' \| Array<string>` | N
+keys | Object | - | Typescript：`KeysType`。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/packages/uniapp-components/common/common.ts) | N
+name | String | - | \- | N
+options | Array | - | Typescript：`Array<RadioOption>` `type RadioOption = string \| number \| RadioOptionObj` `interface RadioOptionObj { label?: string; value?: string \| number; readonly?: boolean; disabled?: boolean; allowUncheck?: boolean; }`。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/packages/uniapp-components/radio-group/type.ts) | N
+placement | String | left | options: left/right | N
+readonly | Boolean | undefined | \- | N
+relation-key | String | - | \- | N
+value | String / Number / Boolean | - | `v-model:value` is supported。Typescript：`T`，[Radio API Documents](./radio?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/packages/uniapp-components/radio-group/type.ts) | N
+default-value | String / Number / Boolean | - | uncontrolled property。Typescript：`T`，[Radio API Documents](./radio?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/packages/uniapp-components/radio-group/type.ts) | N
+
+### RadioGroup Events
+
+name | params | description
+-- | -- | --
+change | `(context: { value: RadioValue })` | \-
+
+### RadioGroup Slots
+
+name | Description
+-- | --
+\- | \-
+
+### CSS Variables
+
+The component provides the following CSS variables, which can be used to customize styles.
+Name | Default Value | Description 
+-- | -- | --
+--td-radio-bg-color | @bg-color-container | -
+--td-radio-border-color | @component-stroke | -
+--td-radio-content-checked-color | @text-color-secondary | -
+--td-radio-content-color | @text-color-secondary | -
+--td-radio-content-disabled-color | @text-color-disabled | -
+--td-radio-content-font | @font-body-medium | -
+--td-radio-font | @font-body-large | -
+--td-radio-icon-checked-color | @brand-color | -
+--td-radio-icon-color | @component-border | -
+--td-radio-icon-disabled-bg-color | @bg-color-component-disabled | -
+--td-radio-icon-disabled-color | @brand-color-disabled | -
+--td-radio-icon-size | 48rpx | -
+--td-radio-label-checked-color | @text-color-primary | -
+--td-radio-label-color | @text-color-primary | -
+--td-radio-label-disabled-color | @text-color-disabled | -
+--td-radio-label-line-height | 48rpx | -
+--td-radio-vertical-padding | 32rpx | -

package/dist/radio/README.md

@@ -0,0 +1,148 @@
+---
+title: Radio 单选框
+description: 用于在预设的一组选项中执行单项选择，并呈现选择结果。
+spline: form
+isComponent: true
+---
+
+
+
+## 引入
+
+可在 `main.ts` 或在需要使用的页面或组件中引入。
+
+```js
+import TRadio from '@tdesign/uniapp/radio/radio.vue';
+import TRadioGroup from '@tdesign/uniapp/radio-group/radio-group.vue';
+```
+
+### 纵向单选框
+
+{{ base }}
+
+### 横向单选框
+
+{{ horizontal }}
+
+### 单选框状态
+
+{{ status }}
+
+### 勾选样式
+
+{{ theme }}
+
+### 勾选显示位置
+
+{{ align }}
+
+### 非通栏单选样式
+
+{{ card }}
+
+### 特殊样式
+
+{{ special }}
+
+## API
+
+### Radio Props
+
+名称 | 类型 | 默认值 | 描述 | 必传
+-- | -- | -- | -- | --
+custom-style | Object | - | 自定义样式 | N
+allow-uncheck | Boolean | false | 是否允许取消选中 | N
+block | Boolean | true | 是否为块级元素 | N
+checked | Boolean | false | 是否选中。支持语法糖 `v-model:checked` | N
+default-checked | Boolean | false | 是否选中。非受控属性 | N
+content | String | - | 单选内容 | N
+content-disabled | Boolean | false | 是否禁用组件内容（content）触发选中 | N
+disabled | Boolean | undefined | 是否为禁用态 | N
+icon | String / Array | 'circle' | 自定义选中图标和非选中图标。使用 Array 时表示：`[选中态图标，非选中态图标]`。使用 String 时，值为 circle 表示填充型图标、值为 line 表示描边型图标、值为 dot 表示圆点图标，值为 slot 时使用插槽。TS 类型：`'circle' \| 'line' \| 'dot' \| Array<string>` | N
+label | String | - | 主文案 | N
+max-content-row | Number | 5 | 内容最大行数限制 | N
+max-label-row | Number | 3 | 主文案最大行数限制 | N
+name | String | - | HTML 元素原生属性 | N
+placement | String | - | 复选框和内容相对位置。优先级高于 RadioGroup.placement。Radio 单独存在时，默认值为 left。如果父组件存在 RadioGroup，默认值便由 RadioGroup.placement 决定。可选项：left/right | N
+readonly | Boolean | undefined | 只读状态 | N
+relation-key | String | - | -1 时代表独立，不再寻找 parent，用于头条小程序 | N
+value | String / Number / Boolean | false | 单选按钮的值。TS 类型：`T` `type RadioValue = string \| number \| boolean`。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/packages/uniapp-components/radio/type.ts) | N
+
+### Radio Events
+
+名称 | 参数 | 描述
+-- | -- | --
+change | `(context: { checked: boolean })` | 值变化时触发
+
+### Radio Slots
+
+名称 | 描述
+-- | --
+\- | 默认插槽，主文案
+content | 自定义 `content` 显示内容
+icon | 自定义选中图标和非选中图标
+label | 自定义 `label` 显示内容
+
+### Radio External Classes
+
+类名 | 描述
+-- | --
+t-class | 根节点样式类
+t-class-border | 边框样式类
+t-class-content | 内容样式类
+t-class-icon | 图标样式类
+t-class-label | 标签样式类
+
+
+### RadioGroup Props
+
+名称 | 类型 | 默认值 | 描述 | 必传
+-- | -- | -- | -- | --
+custom-style | Object | - | 自定义样式 | N
+allow-uncheck | Boolean | false | 是否允许取消选中 | N
+borderless | Boolean | false | 是否开启无边框模式 | N
+disabled | Boolean | undefined | 是否禁用全部子单选框 | N
+icon | String / Array | 'circle' | 自定义选中图标和非选中图标。示例：[选中态图标，非选中态图标]。使用 String 时，值为 circle 表示填充型图标、值为 line 表示描边型图标、值为 dot 表示圆点图标；仅在使用 options 时生效。TS 类型：`'circle' \| 'line' \| 'dot' \| Array<string>` | N
+keys | Object | - | 用来定义 value / label / disabled 在 `options` 中对应的字段别名。TS 类型：`KeysType`。[通用类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/packages/uniapp-components/common/common.ts) | N
+name | String | - | HTML 元素原生属性 | N
+options | Array | - | 单选组件按钮形式。RadioOption 数据类型为 string 或 number 时，表示 label 和 value 值相同。TS 类型：`Array<RadioOption>` `type RadioOption = string \| number \| RadioOptionObj` `interface RadioOptionObj { label?: string; value?: string \| number; readonly?: boolean; disabled?: boolean; allowUncheck?: boolean; }`。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/packages/uniapp-components/radio-group/type.ts) | N
+placement | String | left | 复选框和内容相对位置。优先级低于 Radio.placement。可选项：left/right | N
+readonly | Boolean | undefined | 只读状态 | N
+relation-key | String | - | -1 时代表独立，不再寻找 parent，用于头条小程序 | N
+value | String / Number / Boolean | - | 选中的值。支持语法糖 `v-model:value`。TS 类型：`T`，[Radio API Documents](./radio?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/packages/uniapp-components/radio-group/type.ts) | N
+default-value | String / Number / Boolean | - | 选中的值。非受控属性。TS 类型：`T`，[Radio API Documents](./radio?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/packages/uniapp-components/radio-group/type.ts) | N
+
+### RadioGroup Events
+
+名称 | 参数 | 描述
+-- | -- | --
+change | `(context: { value: RadioValue })` | 选中值发生变化时触发
+
+### RadioGroup Slots
+
+名称 | 描述
+-- | --
+\- | 默认插槽，单选框组内容
+
+### CSS Variables
+
+组件提供了下列 CSS 变量，可用于自定义样式。
+名称 | 默认值 | 描述 
+-- | -- | --
+--td-radio-bg-color | @bg-color-container | -
+--td-radio-border-color | @component-stroke | -
+--td-radio-content-checked-color | @text-color-secondary | -
+--td-radio-content-color | @text-color-secondary | -
+--td-radio-content-disabled-color | @text-color-disabled | -
+--td-radio-content-font | @font-body-medium | -
+--td-radio-font | @font-body-large | -
+--td-radio-icon-checked-color | @brand-color | -
+--td-radio-icon-color | @component-border | -
+--td-radio-icon-disabled-bg-color | @bg-color-component-disabled | -
+--td-radio-icon-disabled-color | @brand-color-disabled | -
+--td-radio-icon-size | 48rpx | -
+--td-radio-label-checked-color | @text-color-primary | -
+--td-radio-label-color | @text-color-primary | -
+--td-radio-label-disabled-color | @text-color-disabled | -
+--td-radio-label-line-height | 48rpx | -
+--td-radio-vertical-padding | 32rpx | -

package/dist/radio/props.ts

@@ -0,0 +1,86 @@
+/* eslint-disable */
+
+/**
+ * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
+ * */
+
+import type { TdRadioProps } from './type';
+export default {
+  /** 是否允许取消选中 */
+  allowUncheck: Boolean,
+  /** 是否为块级元素 */
+  block: {
+    type: Boolean,
+    default: true,
+  },
+  /** 是否选中 */
+  checked: {
+    type: Boolean,
+    default: undefined,
+  },
+  /** 是否选中，非受控属性 */
+  defaultChecked: Boolean,
+  /** 单选内容 */
+  content: {
+    type: String,
+  },
+  /** 是否禁用组件内容（content）触发选中 */
+  contentDisabled: Boolean,
+  /** 是否为禁用态 */
+  disabled: {
+    type: Boolean,
+    default: undefined,
+  },
+  /** 自定义选中图标和非选中图标。使用 Array 时表示：`[选中态图标，非选中态图标]`。使用 String 时，值为 circle 表示填充型图标、值为 line 表示描边型图标、值为 dot 表示圆点图标，值为 slot 时使用插槽 */
+  icon: {
+    type: [String, Array],
+    default: 'circle' as TdRadioProps['icon'],
+  },
+  /** 主文案 */
+  label: {
+    type: String,
+  },
+  /** 内容最大行数限制 */
+  maxContentRow: {
+    type: Number,
+    default: 5,
+  },
+  /** 主文案最大行数限制 */
+  maxLabelRow: {
+    type: Number,
+    default: 3,
+  },
+  /** HTML 元素原生属性 */
+  name: {
+    type: String,
+    default: '',
+  },
+  /** 复选框和内容相对位置。优先级高于 RadioGroup.placement。Radio 单独存在时，默认值为 left。如果父组件存在 RadioGroup，默认值便由 RadioGroup.placement 决定 */
+  placement: {
+    type: String,
+    validator(val: TdRadioProps['placement']): boolean {
+      if (!val) return true;
+      return ['left', 'right'].includes(val);
+    },
+  },
+  /** 只读状态 */
+  readonly: {
+    type: Boolean,
+    default: undefined,
+  },
+  /** -1 时代表独立，不再寻找 parent，用于头条小程序 */
+  relationKey: {
+    type: String,
+    default: '',
+  },
+  /** 单选按钮的值 */
+  value: {
+    type: [String, Number, Boolean],
+    default: false as TdRadioProps['value'],
+  },
+  /** 值变化时触发 */
+  onChange: {
+    type: Function,
+    default: () => ({}),
+  },
+};