@tdesign/uniapp 0.0.1-alpha.1 → 0.7.0

package/dist/guide/type.ts

@@ -0,0 +1,174 @@
+/* eslint-disable */
+
+/**
+ * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
+ * */
+
+import type { TdButtonProps as ButtonProps } from '../button/type';
+
+export interface TdGuideProps {
+  /**
+   * 透传 返回按钮 的全部属性，示例：`{ content: '返回', theme: 'default' }`
+   */
+  backButtonProps?: ButtonProps;
+  /**
+   * 用于自定义渲染计数部分
+   */
+  counter?: string | ((params: { total: number; current: number }) => string);
+  /**
+   * 当前步骤，即整个引导的进度。-1 则不展示，用于需要中断展示的场景
+   */
+  current?: number;
+  /**
+   * 当前步骤，即整个引导的进度。-1 则不展示，用于需要中断展示的场景，非受控属性
+   */
+  defaultCurrent?: number;
+  /**
+   * 透传 完成按钮 的全部属性，示例：`{ content: '完成', theme: 'primary' }`
+   */
+  finishButtonProps?: ButtonProps;
+  /**
+   * 是否隐藏返回按钮
+   * @default false
+   */
+  hideBack?: boolean;
+  /**
+   * 是否隐藏计数
+   * @default false
+   */
+  hideCounter?: boolean;
+  /**
+   * 是否隐藏跳过按钮
+   * @default false
+   */
+  hideSkip?: boolean;
+  /**
+   * 高亮框的内边距，单位rpx
+   * @default 16
+   */
+  highlightPadding?: number;
+  /**
+   * 引导框的类型
+   * @default popover
+   */
+  mode?: 'popover' | 'dialog';
+  /**
+   * 透传 下一步按钮 的全部属性，示例：{ content: '下一步', theme: 'primary' }
+   */
+  nextButtonProps?: ButtonProps;
+  /**
+   * 是否出现遮罩层
+   * @default true
+   */
+  showOverlay?: boolean;
+  /**
+   * 透传 跳过按钮 的全部属性，{ content: '跳过', theme: 'default' }
+   */
+  skipButtonProps?: ButtonProps;
+  /**
+   * 用于定义每个步骤的内容，包括高亮的节点、相对位置和具体的文案内容等
+   */
+  steps?: Array<GuideStep>;
+  /**
+   * 是否使用了自定义导航栏
+   * @default false
+   */
+  usingCustomNavbar?: boolean;
+  /**
+   * 提示框的层级
+   * @default 999999
+   */
+  zIndex?: number;
+  /**
+   * 点击返回按钮时触发
+   */
+  onBack?: (context: { e: MouseEvent; current: number; total: number }) => void;
+  /**
+   * 当前步骤发生变化时触发
+   */
+  onChange?: (current: number, context?: { e: MouseEvent; total: number }) => void;
+  /**
+   * 点击完成按钮时触发
+   */
+  onFinish?: (context: { e: MouseEvent; current: number; total: number }) => void;
+  /**
+   * 点击下一步时触发
+   */
+  onNextStepClick?: (context: { e: MouseEvent; next: number; current: number; total: number }) => void;
+  /**
+   * 点击跳过按钮时触发
+   */
+  onSkip?: (context: { e: MouseEvent; current: number; total: number }) => void;
+}
+
+export interface GuideStep {
+  /**
+   * 用于自定义当前引导框的返回按钮的内容
+   */
+  backButtonProps?: ButtonProps;
+  /**
+   * 当前步骤提示框的内容，支持插槽：slot="body-{{index}}" (1、当要显示body-{{index}}插槽时，请将body设置为空；2、当要显示content-{{index}}插槽完全自定义内容时，请将body和title都设置为空)
+   * @default ''
+   */
+  body?: string;
+  /**
+   * 高亮的节点。示例： `() => new Promise((resolve) => this.createSelectorQuery().select('#tdesign').boundingClientRect((rect) => resolve(rect)).exec())`
+   */
+  element: StepElement;
+  /**
+   * 透传 完成 的全部属性，示例：`{ content: '完成', theme: 'primary' }`
+   */
+  finishButtonProps?: ButtonProps;
+  /**
+   * 高亮框的内边距，单位rpx
+   */
+  highlightPadding?: number;
+  /**
+   * 引导框的类型
+   */
+  mode?: 'popover' | 'dialog';
+  /**
+   * 用于自定义当前引导框的下一步按钮的内容
+   */
+  nextButtonProps?: ButtonProps;
+  /**
+   * 相对于 placement 的偏移量[left, top]，默认单位rpx，示例：[-10, 20] 或 ['10px', '8px'] 或 ['20rpx', '16rpx'] (仅当 `mode` 为 `popover` 时生效)
+   */
+  offset?: Array<string | number>;
+  /**
+   * 引导框相对于高亮元素出现的位置，(仅当 `mode` 为 `popover` 时生效)
+   * @default 'top'
+   */
+  placement?: StepPopoverPlacement;
+  /**
+   * 是否出现遮罩层
+   * @default true
+   */
+  showOverlay?: boolean;
+  /**
+   * 用于自定义当前步骤引导框的跳过按钮的内容
+   */
+  skipButtonProps?: ButtonProps;
+  /**
+   * 当前步骤的标题内容，支持插槽：slot="title-{{index}}" (1、当要显示body-{{index}}插槽时，请将title设置为空；2、当要显示content-{{index}}插槽完全自定义内容时，请将body和title都设置为空)
+   * @default ''
+   */
+  title?: string;
+}
+
+export type StepElement = () => any;
+
+export type StepPopoverPlacement =
+  | 'top'
+  | 'left'
+  | 'right'
+  | 'bottom'
+  | 'top-left'
+  | 'top-right'
+  | 'bottom-left'
+  | 'bottom-right'
+  | 'left-top'
+  | 'left-bottom'
+  | 'right-top'
+  | 'right-bottom'
+  | 'center';

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

@@ -0,0 +1,32 @@
+:: BASE_DOC ::
+
+## API
+
+### Icon Props
+
+name | type | default | description | required
+-- | -- | -- | -- | --
+custom-style | Object | - | CSS(Cascading Style Sheets) | N
+color | String | - | \- | N
+name | String | - | required | Y
+prefix | String | - | \- | N
+size | String / Number | '' | \- | N
+
+### Icon Events
+
+name | params | description
+-- | -- | --
+click | \- | \-
+
+### Icon External Classes
+
+className | Description
+-- | --
+t-class | \-
+
+### CSS Variables
+
+The component provides the following CSS variables, which can be used to customize styles.
+Name | Default Value | Description 
+-- | -- | --
+ant: norma | ant: norma | -

package/dist/icon/README.md

@@ -0,0 +1,109 @@
+---
+title: Icon 图标
+description: 图标。
+spline: base
+isComponent: true
+---
+
+
+
+## 引入
+
+可在 `main.ts` 或在需要使用的页面或组件中引入。
+
+```js
+import TIcon from '@tdesign/uniapp/icon/icon.vue';
+```
+
+## 常见问题
+
+<details>
+  <summary>
+    控制台告警：Failed to load font
+    <span class="icon">👇</span>
+  </summary>
+  <p style="margin-top: 10px; color: rgba(0, 0, 0, .6)">
+    告警属于开发者工具的 bug，可以忽略，具体可以看 <a href="https://developers.weixin.qq.com/miniprogram/dev/api/ui/font/wx.loadFontFace.html" target="_blank">官网文档</a>
+  </p>
+</details>
+
+
+### 基础组件图标
+
+{{ base }}
+
+### 自定义组件图标
+
+{{ custom }}
+
+自定义图标用法，下面以 `iconfont` 为例
+
+#### 准备图标文件
+
+文件后缀应为`.wxss`，如下方代码块所示：
+
+```css
+@font-face {
+  font-family: 'icon';  // 使用自定义的字体名称
+  ···
+}
+
+.icon {
+  font-family: 'icon' !important;  // 字体名称
+  ···
+}
+
+.icon-a-0:before {  // icon 图标。注意 FontClass 前缀与 font-family 保持一致
+  content: '\e64d';
+}
+```
+- 添加所需图标，下载图标。图标库一般会提供 **在线链接** 或者 **下载至本地** 等使用方式。**在线链接** 方式会指向一个 `.css` 文件，可以下载或复制其内容，将其修改成后缀名为 `.wxss` 的文件
+- 将 `.wxss` 文件中的 `FontClass/Symbol前缀` 与 `Font Family` 两项内容保持一致，如: `FontClass/Symbol` 前缀为 `icon-`，则 `Font Family` 为 `icon`。
+
+> 注：若是采用 `下载至本地` 方式，需关注 `.css` 和 `.ttf` 文件。由于微信小程序不支持处理 `ttf、woff、eot` 等文件，但支持 `base64`，所以需要将 `.ttf` 文件转换为 `base64`  (可借助转换工具，如 [transfonter.org](https://transfonter.org/)，会得到一个 `stylesheet.css` 文件)，然后将 `.css` 文件中的 `@font-face {}` 内容替换为 `stylesheet.css` 中的 `base64` 内容，最后将 `.css` 文件修改后缀为 `.wxss`
+
+#### 引入自定义图标
+
+- 全局引入：在项目 `app.wxss`，使用 `@import` 引入上述的 `.wxss` 文件
+- 局部引入：在 `page` 对应的 `.wxss` 中，使用 `@import` 引入上述的 `.wxss` 文件
+
+#### 自定义图标的使用
+
+ `<t-icon>` 组件中的 `prefix` 属性值与前面设置的 `Font Family` 保持一致，即 `prefix="icon"`，`name` 属性值为自定义图标名称，如图标的 `className` 为 `icon-a-1h`，则 `name="a-1h"`。
+
+### 图片链接
+
+{{ iconImage }}
+
+<td-icons-view framework-content/>
+
+## API
+
+### Icon Props
+
+名称 | 类型 | 默认值 | 描述 | 必传
+-- | -- | -- | -- | --
+custom-style | Object | - | 自定义样式 | N
+color | String | - | 图标颜色 | N
+name | String | - | 必需。图标名称或图片链接 | Y
+prefix | String | - | 自定义图标前缀 | N
+size | String / Number | '' | 图标大小, 如 `20`, `20px`, `48rpx`, 默认单位是 `px` | N
+
+### Icon Events
+
+名称 | 参数 | 描述
+-- | -- | --
+click | \- | 点击图标时触发
+
+### Icon External Classes
+
+类名 | 描述
+-- | --
+t-class | 根节点样式类
+
+### CSS Variables
+
+组件提供了下列 CSS 变量，可用于自定义样式。
+| 名称 | 默认值 | 描述 |
+| -- | -- | -- | 
+| ant: norma | ant: norma | - |