project init & fix ui

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

@@ -0,0 +1,27 @@
+:: BASE_DOC ::
+
+## API
+### Navbar Props
+
+name | type | default | description | required
+-- | -- | -- | -- | --
+animation | Boolean | true | \- | N
+capsule | Slot | - | \- | N
+custom-style | String | - | `0.25.0` | N
+delta | Number | 1 | \- | N
+external-classes | Array | - | `['t-class', 't-class-title', 't-class-left-icon', 't-class-home-icon', 't-class-capsule']` | N
+fixed | Boolean | true | \- | N
+left | Slot | - | `0.26.0` | N
+left-arrow | Boolean | false | `0.26.0` | N
+title | String / Slot | - | page title | N
+title-max-length | Number | - | \- | N
+visible | Boolean | true | \- | N
+
+### Navbar Events
+
+name | params | description
+-- | -- | --
+complete | \- | \-
+fail | \- | \-
+go-back | \- | \-
+success | \- | \-

miniprogram_npm/tdesign-miniprogram/navbar/README.md

@@ -0,0 +1,73 @@
+---
+title: Navbar 导航栏
+description: 用于不同页面之间切换或者跳转，位于内容区的上方，系统状态栏的下方。
+spline: navigation
+isComponent: true
+---
+
+<span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20lines-97%25-blue" /></span><span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20functions-87%25-blue" /></span><span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20statements-95%25-blue" /></span><span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20branches-84%25-blue" /></span>
+## 引入
+
+全局引入，在 miniprogram 根目录下的`app.json`中配置，局部引入，在需要引入的页面或组件的`index.json`中配置。
+
+```json
+"usingComponents": {
+  "t-navbar": "tdesign-miniprogram/navbar/navbar",
+}
+```
+
+## 代码演示
+
+### 基础导航栏
+
+{{ base }}
+
+### 带返回导航栏
+
+{{ back }}
+
+### 带返回，主页按钮导航栏
+
+{{ back-home }}
+
+### 带搜索导航栏
+
+{{ search }}
+
+### 带图片导航栏
+
+{{ img }}
+
+### 标题左对齐
+
+{{ left-title }}
+
+### 自定义颜色
+
+{{ custom-color }}
+
+## API
+### Navbar Props
+
+名称 | 类型 | 默认值 | 说明 | 必传
+-- | -- | -- | -- | --
+animation | Boolean | true | 是否添加动画效果 | N
+capsule | Slot | - | 左侧胶囊区域 | N
+custom-style | String | - | `0.25.0`。自定义组件样式 | N
+delta | Number | 1 | 后退按钮后退层数，含义参考 [wx.navigateBack](https://developers.weixin.qq.com/miniprogram/dev/api/route/wx.navigateBack.html)，特殊的，传入 0 不会发生执行 wx.navigateBack | N
+external-classes | Array | - | 组件类名，分别用于设置组件外层元素、标题、左侧图标、首页图标、胶囊等元素类名。`['t-class', 't-class-title', 't-class-left-icon', 't-class-home-icon', 't-class-capsule']` | N
+fixed | Boolean | true | 是否固定在顶部 | N
+left | Slot | - | `0.26.0`。左侧内容区域 | N
+left-arrow | Boolean | false | `0.26.0`。是否展示左侧箭头 | N
+title | String / Slot | - | 页面标题 | N
+title-max-length | Number | - | 标题文字最大长度，超出的范围使用 `...` 表示 | N
+visible | Boolean | true | 是否显示 | N
+
+### Navbar Events
+
+名称 | 参数 | 描述
+-- | -- | --
+complete | \- | navigateBack 执行完成后触发（失败或成功均会触发）
+fail | \- | navigateBack 执行失败后触发
+go-back | \- | 点击左侧箭头时触发
+success | \- | navigateBack 执行成功后触发

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

@@ -0,0 +1,24 @@
+import { SuperComponent } from '../common/src/index';
+export default class Navbar extends SuperComponent {
+    externalClasses: string[];
+    timer: any;
+    options: {
+        addGlobalClass: boolean;
+        multipleSlots: boolean;
+    };
+    properties: import("./type").TdNavbarProps;
+    observers: {
+        visible(this: Navbar, visible: any): void;
+        'title,titleMaxLength'(this: any): void;
+    };
+    data: {
+        prefix: string;
+        classPrefix: string;
+        boxStyle: string;
+        showTitle: string;
+    };
+    attached(): void;
+    methods: {
+        goBack(): void;
+    };
+}

miniprogram_npm/tdesign-miniprogram/navbar/navbar.js

@@ -0,0 +1,118 @@
+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}-navbar`;
+let Navbar = class Navbar extends SuperComponent {
+    constructor() {
+        super(...arguments);
+        this.externalClasses = [
+            `${prefix}-class`,
+            `${prefix}-class-title`,
+            `${prefix}-class-left`,
+            `${prefix}-class-center`,
+            `${prefix}-class-left-icon`,
+            `${prefix}-class-home-icon`,
+            `${prefix}-class-capsule`,
+            `${prefix}-class-nav-btn`,
+        ];
+        this.timer = null;
+        this.options = {
+            addGlobalClass: true,
+            multipleSlots: true,
+        };
+        this.properties = props;
+        this.observers = {
+            visible(visible) {
+                const { animation } = this.properties;
+                const visibleClass = `${name}${visible ? '--visible' : '--hide'}`;
+                this.setData({
+                    visibleClass: `${visibleClass}${animation ? '-animation' : ''}`,
+                });
+                if (this.timer) {
+                    clearTimeout(this.timer);
+                }
+                if (animation) {
+                    this.timer = setTimeout(() => {
+                        this.setData({
+                            visibleClass,
+                        });
+                    }, 300);
+                }
+            },
+            'title,titleMaxLength'() {
+                const { title } = this.properties;
+                const titleMaxLength = this.properties.titleMaxLength || Number.MAX_SAFE_INTEGER;
+                let temp = title.slice(0, titleMaxLength);
+                if (titleMaxLength < title.length)
+                    temp += '...';
+                this.setData({
+                    showTitle: temp,
+                });
+            },
+        };
+        this.data = {
+            prefix,
+            classPrefix: name,
+            boxStyle: '',
+            showTitle: '',
+        };
+        this.methods = {
+            goBack() {
+                const { delta } = this.data;
+                const that = this;
+                this.triggerEvent('go-back');
+                if (delta > 0) {
+                    wx.navigateBack({
+                        delta,
+                        fail(e) {
+                            that.triggerEvent('fail', e);
+                        },
+                        complete(e) {
+                            that.triggerEvent('complete', e);
+                        },
+                        success(e) {
+                            that.triggerEvent('success', e);
+                        },
+                    });
+                }
+            },
+        };
+    }
+    attached() {
+        let rect = null;
+        if (wx.getMenuButtonBoundingClientRect) {
+            rect = wx.getMenuButtonBoundingClientRect();
+        }
+        if (!rect)
+            return;
+        wx.getSystemInfo({
+            success: (res) => {
+                const boxStyleList = [];
+                const { statusBarHeight } = wx.getSystemInfoSync();
+                boxStyleList.push(`--td-navbar-padding-top:${statusBarHeight}px`);
+                if (rect && (res === null || res === void 0 ? void 0 : res.windowWidth)) {
+                    boxStyleList.push(`--td-navbar-right:${res.windowWidth - rect.left}px`);
+                }
+                boxStyleList.push(`--td-navbar-capsule-height: ${rect.height}px`);
+                boxStyleList.push(`--td-navbar-capsule-width:${rect.width}px`);
+                this.setData({
+                    boxStyle: `${boxStyleList.join('; ')}`,
+                });
+            },
+            fail: (err) => {
+                console.error('navbar 获取系统信息失败', err);
+            },
+        });
+    }
+};
+Navbar = __decorate([
+    wxComponent()
+], Navbar);
+export default Navbar;

miniprogram_npm/tdesign-miniprogram/navbar/navbar.json

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

miniprogram_npm/tdesign-miniprogram/navbar/navbar.wxml

@@ -0,0 +1,22 @@
+<wxs src="../common/utils.wxs" module="_" />
+<view
+  class="{{_.cls(classPrefix, ['fixed', fixed])}} {{visibleClass}} {{prefix}}-class"
+  style="{{boxStyle}}; {{customStyle}}"
+>
+  <view wx:if="{{fixed}}" class="{{classPrefix}}__placeholder" />
+  <view class="{{classPrefix}}__content">
+    <view class="{{classPrefix}}__left {{prefix}}-class-left">
+      <view wx:if="{{leftArrow}}" class="{{classPrefix}}__btn" bind:tap="goBack" aria-role="button" aria-label="返回">
+        <t-icon name="chevron-left" class="{{classPrefix}}__left-arrow" />
+      </view>
+      <slot name="left" />
+      <view class="{{classPrefix}}__capsule">
+        <slot name="capsule" />
+      </view>
+    </view>
+    <view class="{{classPrefix}}__center t-class-center">
+      <slot name="title" class="t-class-title" />
+      <text wx:if="{{title}}" class="{{classPrefix}}__center-title t-class-title">{{showTitle}}</text>
+    </view>
+  </view>
+</view>

miniprogram_npm/tdesign-miniprogram/navbar/navbar.wxss

@@ -0,0 +1,117 @@
+.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-navbar {
+  overflow: hidden;
+}
+.t-navbar--fixed .t-navbar__content {
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 5001;
+}
+.t-navbar--visible {
+  display: '';
+}
+.t-navbar--visible-animation {
+  opacity: 1;
+  transition: opacity 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
+}
+.t-navbar--hide-animation {
+  opacity: 0;
+  transition: opacity 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
+}
+.t-navbar--hide {
+  display: none;
+}
+.t-navbar__placeholder {
+  height: var(--td-navbar-height, 96rpx);
+  padding-top: var(--td-navbar-padding-top, 40rpx);
+  position: relative;
+  visibility: hidden;
+}
+.t-navbar__content {
+  position: relative;
+  z-index: 1;
+  height: var(--td-navbar-height, 96rpx);
+  width: calc(100% - var(--td-navbar-right, 190rpx));
+  padding-right: var(--td-navbar-right, 190rpx);
+  padding-top: var(--td-navbar-padding-top, 40rpx);
+  color: var(--td-navbar-color, var(--td-font-gray-1, rgba(0, 0, 0, 0.9)));
+  background-color: var(--td-navbar-bg-color, var(--td-bg-color-block, #fff));
+  display: flex;
+  align-items: center;
+}
+.t-navbar__left {
+  position: relative;
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+}
+.t-navbar__left-arrow {
+  font-size: var(--td-navbar-left-arrow-size, 48rpx);
+}
+.t-navbar__capsule {
+  box-sizing: border-box;
+  margin-left: 24rpx;
+  width: var(--td-navbar-capsule-width, 176rpx);
+  height: var(--td-navbar-capsule-height, 64rpx);
+  border-radius: var(--td-navbar-capsule-border-radius, 32rpx);
+  border: 1rpx solid var(--td-navbar-capsule-border-color, #e3e6ea);
+  display: flex;
+  align-items: center;
+}
+.t-navbar__capsule:empty {
+  display: none;
+}
+.t-navbar__center {
+  font-size: 36rpx;
+  text-align: center;
+  position: absolute;
+  left: var(--td-navbar-right, 190rpx);
+  width: calc(100% - var(--td-navbar-right, 190rpx) * 2);
+  height: var(--td-navbar-height, 96rpx);
+  line-height: var(--td-navbar-height, 96rpx);
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+}
+.t-navbar__center:empty {
+  display: none;
+}
+.t-navbar__center-title {
+  font-size: var(--td-navbar-title-font-size, 36rpx);
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+  font-weight: var(--td-navbar-title-font-weight, 600);
+}
+.t-navbar__btn {
+  margin-left: 24rpx;
+}

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

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

miniprogram_npm/tdesign-miniprogram/navbar/props.js

@@ -0,0 +1,36 @@
+const props = {
+    animation: {
+        type: Boolean,
+        value: true,
+    },
+    customStyle: {
+        type: String,
+        value: '',
+    },
+    delta: {
+        type: Number,
+        value: 1,
+    },
+    externalClasses: {
+        type: Array,
+    },
+    fixed: {
+        type: Boolean,
+        value: true,
+    },
+    leftArrow: {
+        type: Boolean,
+        value: false,
+    },
+    title: {
+        type: String,
+    },
+    titleMaxLength: {
+        type: Number,
+    },
+    visible: {
+        type: Boolean,
+        value: true,
+    },
+};
+export default props;

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

@@ -0,0 +1,38 @@
+export interface TdNavbarProps {
+    animation?: {
+        type: BooleanConstructor;
+        value?: boolean;
+    };
+    customStyle?: {
+        type: StringConstructor;
+        value?: string;
+    };
+    delta?: {
+        type: NumberConstructor;
+        value?: number;
+    };
+    externalClasses?: {
+        type: ArrayConstructor;
+        value?: ['t-class', 't-class-title', 't-class-left-icon', 't-class-home-icon', 't-class-capsule'];
+    };
+    fixed?: {
+        type: BooleanConstructor;
+        value?: boolean;
+    };
+    leftArrow?: {
+        type: BooleanConstructor;
+        value?: boolean;
+    };
+    title?: {
+        type: StringConstructor;
+        value?: string;
+    };
+    titleMaxLength?: {
+        type: NumberConstructor;
+        value?: number;
+    };
+    visible?: {
+        type: BooleanConstructor;
+        value?: boolean;
+    };
+}

miniprogram_npm/tdesign-miniprogram/navbar/type.js

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