project init & fix ui

miniprogram_npm/tdesign-miniprogram/drawer/README.en-US.md

@@ -0,0 +1,25 @@
+:: BASE_DOC ::
+
+## API
+### Drawer Props
+
+name | type | default | description | required
+-- | -- | -- | -- | --
+close-on-overlay-click | Boolean | undefined | \- | N
+custom-style | String | - | \- | N
+destroy-on-close | Boolean | false | \- | N
+footer | Slot | - | \- | N
+items | Array | - | [see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/drawer/type.ts) | N
+placement | String | right | options：left/right | N
+show-overlay | Boolean | true | \- | N
+title | String / Slot | '' | \- | N
+visible | Boolean | false | \- | N
+z-index | Number | - | \- | N
+
+### Drawer Events
+
+name | params | description
+-- | -- | --
+close | `(trigger: DrawerEventSource)` | [see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/drawer/type.ts)。<br/>`type DrawerEventSource = 'esc' \| 'close-btn' \| 'cancel' \| 'overlay'`<br/>
+item-click | `(index: number; item: DrawerItem)` | \-
+overlay-click | \- | \-

miniprogram_npm/tdesign-miniprogram/drawer/README.md

@@ -0,0 +1,61 @@
+---
+title: Drawer 抽屉
+description: 用作一组平行关系页面/内容的切换器，相较于Tab，同屏可展示更多的选项数量。。
+spline: message
+isComponent: true
+---
+
+<span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20lines-100%25-blue" /></span><span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20functions-100%25-blue" /></span><span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20statements-100%25-blue" /></span><span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20branches-100%25-blue" /></span>
+
+<div style="background: #ecf2fe; display: flex; align-items: center; line-height: 20px; padding: 14px 24px; border-radius: 3px; color: #555a65">
+  <svg fill="none" viewBox="0 0 16 16" width="16px" height="16px" style="margin-right: 5px">
+    <path fill="#0052d9" d="M8 15A7 7 0 108 1a7 7 0 000 14zM7.4 4h1.2v1.2H7.4V4zm.1 2.5h1V12h-1V6.5z" fillOpacity="0.9"></path>
+  </svg>
+  该组件于 0.7.2 版本上线，请留意版本。
+</div>
+
+## 引入
+
+全局引入，在 miniprogram 根目录下的`app.json`中配置，局部引入，在需要引入的页面或组件的`index.json`中配置。
+
+```json
+"usingComponents": {
+  "t-drawer": "tdesign-miniprogram/drawer/drawer"
+}
+```
+
+## 代码演示
+
+### 基础抽屉
+{{ base }}
+
+### 带图标的抽屉
+{{ icon-drawer }}
+
+>Drawer的 `visible` 是受控的，需要手动设置 `visible` 为 `true` 才会开启抽屉
+
+
+
+## API
+### Drawer Props
+
+名称 | 类型 | 默认值 | 说明 | 必传
+-- | -- | -- | -- | --
+close-on-overlay-click | Boolean | true | 点击蒙层时是否触发抽屉关闭事件 | N
+custom-style | String | - | `v0.25.0`。自定义组件样式 | N
+destroy-on-close | Boolean | false | 抽屉关闭时是否销毁节点 | N
+footer | Slot | - | `v0.29.0`。抽屉的底部 | N
+items | Array | - | 抽屉里的列表项。TS 类型：`DrawerItem[] ` `interface DrawerItem { title: string; icon: string; }`。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/drawer/type.ts) | N
+placement | String | right | 抽屉方向。可选项：left/right | N
+show-overlay | Boolean | true | 是否显示遮罩层 | N
+title | String / Slot | '' | `v0.29.0`。抽屉的标题 | N
+visible | Boolean | false | 组件是否可见 | N
+z-index | Number | 11500 | 抽屉层级，样式默认为 11500 | N
+
+### Drawer Events
+
+名称 | 参数 | 描述
+-- | -- | --
+close | `(trigger: DrawerEventSource)` | 关闭事件，取消按钮点击时、关闭按钮点击时、点击蒙层时均会触发。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/drawer/type.ts)。<br/>`type DrawerEventSource = 'esc' \| 'close-btn' \| 'cancel' \| 'overlay'`<br/>
+item-click | `(index: number; item: DrawerItem)` | 点击抽屉里的列表项
+overlay-click | \- | 如果蒙层存在，点击蒙层时触发

miniprogram_npm/tdesign-miniprogram/drawer/drawer.d.ts

@@ -0,0 +1,14 @@
+import { SuperComponent } from '../common/src/index';
+export default class Drawer extends SuperComponent {
+    externalClasses: any[];
+    properties: import("./type").TdDrawerProps;
+    data: {
+        classPrefix: string;
+    };
+    methods: {
+        visibleChange({ detail }: {
+            detail: any;
+        }): void;
+        itemClick(detail: any): void;
+    };
+}

miniprogram_npm/tdesign-miniprogram/drawer/drawer.js

@@ -0,0 +1,43 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { SuperComponent, wxComponent } from '../common/src/index';
+import config from '../common/config';
+import props from './props';
+const { prefix } = config;
+const name = `${prefix}-drawer`;
+let Drawer = class Drawer extends SuperComponent {
+    constructor() {
+        super(...arguments);
+        this.externalClasses = [];
+        this.properties = props;
+        this.data = {
+            classPrefix: name,
+        };
+        this.methods = {
+            visibleChange({ detail }) {
+                const { visible } = detail;
+                const { showOverlay } = this.data;
+                this.setData({
+                    visible: visible,
+                });
+                if (showOverlay) {
+                    this.triggerEvent('overlay-click', { visible: visible });
+                }
+            },
+            itemClick(detail) {
+                const { index, item } = detail.currentTarget.dataset;
+                this.triggerEvent('item-click', {
+                    sibarItem: { index: index, item: item },
+                });
+            },
+        };
+    }
+};
+Drawer = __decorate([
+    wxComponent()
+], Drawer);
+export default Drawer;

miniprogram_npm/tdesign-miniprogram/drawer/drawer.json

@@ -0,0 +1,7 @@
+{
+  "component": true,
+  "usingComponents": {
+    "t-popup": "../popup/popup",
+    "t-icon": "../icon/icon"
+  }
+}

miniprogram_npm/tdesign-miniprogram/drawer/drawer.wxml

@@ -0,0 +1,34 @@
+<t-popup
+  customStyle="{{ customStyle }}"
+  bind:visible-change="visibleChange"
+  visible="{{visible}}"
+  zIndex="{{zIndex}}"
+  placement="{{placement == 'right' ? 'right' : 'left'}}"
+  showOverlay="{{showOverlay}}"
+  destroyOnClose="{{destroyOnClose}}"
+  closeOnOverlayClick="{{closeOnOverlayClick}}"
+>
+  <view class="{{classPrefix}}">
+    <view wx:if="{{title}}" class="{{classPrefix}}__title">{{title}}</view>
+    <scroll-view class="{{classPrefix}}__sidebar" scroll-y>
+      <view
+        class="{{classPrefix}}__sidebar-item"
+        wx:for="{{items}}"
+        wx:item="item"
+        wx:key="index"
+        data-item="{{item}}"
+        data-index="{{index}}"
+        bindtap="itemClick"
+      >
+        <view wx:if="{{item.icon}}" class="{{classPrefix}}__sidebar-item-icon">
+          <t-icon name="{{item.icon}}" />
+        </view>
+        <view class="{{classPrefix}}__sidebar-item-title"> {{item.title}} </view>
+      </view>
+    </scroll-view>
+    <view class="{{classPrefix}}__footer">
+      <slot />
+      <slot name="footer" />
+    </view>
+  </view>
+</t-popup>

miniprogram_npm/tdesign-miniprogram/drawer/drawer.wxss

@@ -0,0 +1,83 @@
+.t-float-left {
+  float: left;
+}
+.t-float-right {
+  float: right;
+}
+@keyframes tdesign-fade-out {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
+}
+.hotspot-expanded.relative {
+  position: relative;
+}
+.hotspot-expanded::after {
+  content: '';
+  display: block;
+  position: absolute;
+  left: 0;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  transform: scale(1.5);
+}
+.t-drawer {
+  background: var(--td-drawer-bg-color, var(--td-bg-color-block, #fff));
+  height: 100vh;
+  width: var(--td-drawer-width, 560rpx);
+  display: flex;
+  flex-direction: column;
+  padding-bottom: env(safe-area-inset-bottom, 28px);
+  padding-bottom: constant(safe-area-inset-bottom, 28px);
+}
+.t-drawer__title {
+  font-weight: 600;
+  font-size: var(--td-drawer-title-font-size, 36rpx);
+  padding: 48rpx 32rpx 16rpx;
+}
+.t-drawer__sidebar {
+  height: var(--td-drawer-sidebar-height, 70vh);
+}
+.t-drawer__sidebar-item {
+  display: flex;
+  align-items: center;
+  position: relative;
+  padding: var(--td-drawer-item-padding, 32rpx) 0;
+  margin-left: var(--td-drawer-item-padding, 32rpx);
+  line-height: var(--td-drawer-item-height, 48rpx);
+}
+.t-drawer__sidebar-item::after {
+  content: '';
+  display: block;
+  position: absolute;
+  top: unset;
+  bottom: 0;
+  left: unset;
+  right: unset;
+  background-color: var(--td-drawer-border-color, var(--td-border-color, #e7e7e7));
+}
+.t-drawer__sidebar-item::after {
+  height: 1px;
+  left: 0;
+  right: 0;
+  transform: scaleY(0.5);
+}
+.t-drawer__sidebar-item-title {
+  flex: 1;
+  color: var(--td-drawer-title-color);
+}
+.t-drawer__sidebar-item-icon {
+  padding-right: 16rpx;
+  color: var(--td-drawer-title-color, var(--td-drawer-title-color, var(--td-font-gray-1, rgba(0, 0, 0, 0.9))));
+  font-size: var(--td-drawer-item-icon-size, 48rpx);
+}
+.t-drawer__footer {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  padding-bottom: var(--td-drawer-footer-padding-bottom, 40rpx);
+}

miniprogram_npm/tdesign-miniprogram/drawer/props.d.ts

@@ -0,0 +1,3 @@
+import { TdDrawerProps } from './type';
+declare const props: TdDrawerProps;
+export default props;

miniprogram_npm/tdesign-miniprogram/drawer/props.js

@@ -0,0 +1,38 @@
+const props = {
+    closeOnOverlayClick: {
+        type: Boolean,
+        value: true,
+    },
+    customStyle: {
+        type: String,
+        value: '',
+    },
+    destroyOnClose: {
+        type: Boolean,
+        value: false,
+    },
+    items: {
+        type: Array,
+    },
+    placement: {
+        type: String,
+        value: 'right',
+    },
+    showOverlay: {
+        type: Boolean,
+        value: true,
+    },
+    title: {
+        type: String,
+        value: '',
+    },
+    visible: {
+        type: Boolean,
+        value: false,
+    },
+    zIndex: {
+        type: Number,
+        value: 11500,
+    },
+};
+export default props;

miniprogram_npm/tdesign-miniprogram/drawer/type.d.ts

@@ -0,0 +1,42 @@
+export interface TdDrawerProps {
+    closeOnOverlayClick?: {
+        type: BooleanConstructor;
+        value?: boolean;
+    };
+    customStyle?: {
+        type: StringConstructor;
+        value?: string;
+    };
+    destroyOnClose?: {
+        type: BooleanConstructor;
+        value?: boolean;
+    };
+    items?: {
+        type: ArrayConstructor;
+        value?: DrawerItem[];
+    };
+    placement?: {
+        type: StringConstructor;
+        value?: 'left' | 'right';
+    };
+    showOverlay?: {
+        type: BooleanConstructor;
+        value?: boolean;
+    };
+    title?: {
+        type: StringConstructor;
+        value?: string;
+    };
+    visible?: {
+        type: BooleanConstructor;
+        value?: boolean;
+    };
+    zIndex?: {
+        type: NumberConstructor;
+        value?: number;
+    };
+}
+export interface DrawerItem {
+    title: string;
+    icon: string;
+}

miniprogram_npm/tdesign-miniprogram/drawer/type.js

@@ -0,0 +1 @@
+export {};