feat(fab): add new component

example/app.json

@@ -57,6 +57,7 @@
     "pages/date-time-picker/date-time-picker"
   ],
   "usingComponents": {
+    "t-demo": "../../components/demo-block/index",
     "t-avatar": "tdesign-miniprogram/avatar/avatar",
     "t-avatar-group": "tdesign-miniprogram/avatar/avatar-group",
     "t-badge": "tdesign-miniprogram/badge/badge",

example/pages/fab/fab.ts

@@ -1 +1,10 @@
-Page({});
+Page({
+  data: {
+    fabButton: {
+      openType: 'getPhoneNumber',
+    },
+  },
+  handleClick(e) {
+    console.log(e);
+  },
+});

example/pages/fab/fab.wxml

@@ -1,4 +1,6 @@
-<view class="t-fab-wrapper">
-  <t-fab bottom="100px" icon="add" />
-  <t-fab icon="add" text="咨询记录" />
-</view>
+<view class="demo-title">Fab 悬浮按钮</view>
+<view class="demo-desc">当功能使用图标即可表意清楚时，可使用纯图标悬浮按钮，例如：添加、发布</view>
+<t-demo title="01 类型" desc="纯图标悬浮按钮">
+  <t-fab icon="add" bind:click="handleClick" />
+  <!-- <t-fab icon="phone" button-props="{{fabButton}}" bind:click="handleClick" /> -->
+</t-demo>

example/pages/home/data/form.ts

@@ -14,10 +14,10 @@ const form = {
       name: 'DateTimePicker',
       label: '时间选择器',
     },
-    // {
-    //   name: 'Fab',
-    //   label: '悬浮按钮',
-    // },
+    {
+      name: 'Fab',
+      label: '悬浮按钮',
+    },
     {
       name: 'Input',
       label: '输入框',

src/common/template/button.wxml

@@ -7,6 +7,8 @@
     icon="{{icon}}"
     loading="{{loading}}"
     theme="{{theme}}"
+    shape="{{shape}}"
+    size="{{size}}"
     open-type="{{openType}}"
     hover-stop-propagation="{{hoverStopPropagation}}"
     hover-start-time="{{hoverStartTime}}"
@@ -25,7 +27,6 @@
     bind:error="onTplButtonTap"
     bind:opensetting="onTplButtonTap"
     bind:launchapp="onTplButtonTap"
+    >{{content}}</t-button
   >
-    {{content}}
-  </t-button>
 </template>

src/fab/README.md

@@ -1,50 +1,60 @@
 ---
 title: Fab
-description: 悬浮按钮。
+description: 当功能使用图标即可表意清楚时，可使用纯图标悬浮按钮，例如：添加、发布。
 spline: form
 isComponent: true
 ---
 
-### 特性及兼容性
-
-无
-
 ## 引入
 
-### 引入组件
+全局引入，在 miniprogram 根目录下的`app.json`中配置，局部引入，在需要引入的页面或组件的`index.json`中配置。
 
-在 `app.json` 或 `page.json` 中引入组件：
 
 ```json
 "usingComponents": {
   "t-fab": "tdesign-miniprogram/fab/fab"
 }
 ```
 
-## 用法
+## 代码演示
 
-### 组件方式
+### 基础使用
 
 ```html
-<!-- page.wxml -->
-<t-fab icon="add" text="记录" />
+<t-fab icon="add" bind:click="handleClick" />
 ```
 
-## API
+### 进阶使用
 
-### `<t-fab>` 组件
+```html
+<t-fab icon="add" button-props="{{fabButton}}" bind:click="handleClick">
+```
 
-组件路径：`tdesign-miniprogram/fab/fab`
+```js
+Page({
+  data: {
+    fabButton: {
+      openType: 'getPhoneNumber'
+    }
+  },
+  handleClick(e) {
+    console.log(e)
+  }
+})
+```
 
-#### Props
+## API
+### Fab Props
 
-| 属性   | 值类型   | 默认值 | 必传  | 说明               |
-| ------ | -------- | ------ | ----- | ------------------ |
-| icon   | 'string' | 'add'  | false | 图标               |
-| text   | 'string' | ''     | false | 文字               |
-| bottom | 'string' | '32px' | false | 离屏幕底部的距离   |
-| right  | 'string' | '16px' | false | 离屏幕右边缘的距离 |
+名称 | 类型 | 默认值 | 说明 | 必传
+-- | -- | -- | -- | --
+button-props | Object | - | 透传至 Button 组件 | N
+icon | String | - | 图标 | N
+style | String | right: 16px; bottom: 32px; | 悬浮按钮的样式，常用于调整位置 | N
+text | String | - | 文本内容 | N
 
-#### Events
+### Fab Events
 
-无
+名称 | 参数 | 描述
+-- | -- | --
+click | `({e: Event})` | 悬浮按钮点击事件

src/fab/fab.json

@@ -1,6 +1,6 @@
 {
   "component": true,
   "usingComponents": {
-    "t-icon": "../icon/icon"
+    "t-button": "../button/button"
   }
 }

src/fab/fab.less

@@ -1 +1,35 @@
-@import (css) '../common/index.wxss';
+@import '../common/style/index.less';
+
+@fab-height: 86rpx;
+@fab-min-width: @fab-height;
+@fab-horizontal-padding: 40rpx;
+@fab-text-margin-left: 16rpx;
+
+.@{prefix}-fab {
+  position: absolute;
+  width: auto;
+  min-width: @fab-min-width;
+  height: @fab-height;
+  line-height: normal;
+  padding: 0 @fab-horizontal-padding;
+  box-sizing: border-box;
+  border-radius: 48rpx;
+
+  .@{prefix}-button__text {
+    display: flex;
+    align-items: center;
+  }
+
+  &::after {
+    border-radius: inherit;
+  }
+
+  &__text {
+    margin-left: @fab-text-margin-left;
+  }
+
+  &--icononly {
+    padding: 0;
+    border-radius: @border-radius-50;
+  }
+}

src/fab/fab.ts

@@ -1,60 +1,29 @@
-import TComponent from '../common/component';
+import { SuperComponent, wxComponent } from '../common/src/index';
 import config from '../common/config';
+import props from './props';
 
 const { prefix } = config;
 const name = `${prefix}-fab`;
 
-TComponent({
-  // 组件的对外属性
-  properties: {
-    icon: {
-      type: String,
-      value: 'add', // 默认为 ‘+’
-    },
-    text: {
-      type: String,
-      value: '',
-    },
-    bottom: {
-      type: String,
-      value: '32px',
-    },
-    right: {
-      type: String,
-      value: '16px',
-    },
-  },
-  // 组件的内部数据
-  data: {
-    // 按钮样式列表
-    className: '',
-    styleName: '',
-    textClass: `${name}__text`,
-  },
+@wxComponent()
+export default class Fab extends SuperComponent {
+  properties = props;
 
-  /* 组件生命周期 */
-  lifetimes: {
-    attached() {
-      this.setClass();
-      this.setStyle();
-    },
-  },
+  externalClasses = [`${prefix}-class`, `${prefix}-class-button`];
 
-  /* Methods */
-  methods: {
-    setClass() {
-      const classList = [`${name}`, this.data.text && `${name}--with-text`];
-      this.setData({
-        className: classList.join(' '),
-      });
+  data = {
+    prefix,
+    classPrefix: name,
+    baseButtonProps: {
+      size: 'large',
+      shape: 'circle',
+      theme: 'primary',
     },
-    setStyle() {
-      this.setData({
-        styleName: `
-          bottom: ${this.data.bottom};
-          right: ${this.data.right};
-        `,
-      });
+  };
+
+  methods = {
+    onTplButtonTap(e) {
+      this.triggerEvent('click', e);
     },
-  },
-});
+  };
+}

src/fab/fab.wxml

@@ -1,4 +1,9 @@
-<view class="{{className}}" style="{{styleName}}">
-  <t-icon name="{{icon}}" color="white" size="24px" />
-  <text class="{{textClass}}" wx:if="{{text}}">{{text}}</text>
+<import src="../common/template/button.wxml" />
+
+<view class="{{classPrefix}} {{prefix}}-class" style="{{style}}">
+  <template
+    is="button"
+    class="{{classPrefix}}__button"
+    data="{{ ...baseButtonProps, icon, ...buttonProps, externalClass: prefix + '-class-button'}}"
+  />
 </view>

src/fab/props.ts

@@ -0,0 +1,30 @@
+/* eslint-disable */
+
+/**
+ * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
+ * */
+
+import { TdFabProps } from './type';
+const props: TdFabProps = {
+  /** 透传至 Button 组件 */
+  buttonProps: {
+    type: Object,
+  },
+  /** 图标 */
+  icon: {
+    type: String,
+    value: '',
+  },
+  /** 悬浮按钮的样式，常用于调整位置 */
+  style: {
+    type: String,
+    value: 'right: 16px; bottom: 32px;',
+  },
+  /** 文本内容 */
+  text: {
+    type: String,
+    value: '',
+  },
+};
+
+export default props;

src/fab/type.ts

@@ -0,0 +1,39 @@
+/* eslint-disable */
+
+/**
+ * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
+ * */
+
+export interface TdFabProps {
+  /**
+   * 透传至 Button 组件
+   */
+  buttonProps?: {
+    type: ObjectConstructor;
+    value?: object;
+  };
+  /**
+   * 图标
+   * @default ''
+   */
+  icon?: {
+    type: StringConstructor;
+    value?: string;
+  };
+  /**
+   * 悬浮按钮的样式，常用于调整位置
+   * @default right: 16px; bottom: 32px;
+   */
+  style?: {
+    type: StringConstructor;
+    value?: string;
+  };
+  /**
+   * 文本内容
+   * @default ''
+   */
+  text?: {
+    type: StringConstructor;
+    value?: string;
+  };
+}