project init & fix ui

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

@@ -0,0 +1,25 @@
+:: BASE_DOC ::
+
+## API
+### Toast Props
+
+name | type | default | description | required
+-- | -- | -- | -- | --
+custom-style `v0.25.0` | String | - | \- | N
+direction | String | row | options：row/column | N
+duration | Number | 2000 | \- | N
+external-classes | Array | - | `['t-class']` | N
+icon | String | - | \- | N
+message | String / Slot | - | \- | N
+overlay-props | Object | {} | \- | N
+placement | String | middle | options： top/middle/bottom | N
+prevent-scroll-through | Boolean | false | \- | N
+show-overlay | Boolean | false | \- | N
+theme | String | - | options：loading/success/fail | N
+
+### Toast Events
+
+name | params | description
+-- | -- | --
+close | \- | \-
+destory | \- | \-

miniprogram_npm/tdesign-miniprogram/toast/README.md

@@ -0,0 +1,56 @@
+---
+title: Toast 轻提示
+description: 用于轻量级反馈或提示，不会打断用户操作。
+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-83%25-blue" /></span>
+## 引入
+
+全局引入，在 miniprogram 根目录下的`app.json`中配置，局部引入，在需要引入的页面或组件的`index.json`中配置。
+
+```json
+"usingComponents": {
+  "t-toast": "tdesign-miniprogram/toast/toast"
+}
+```
+
+## 代码演示
+
+### 基础提示
+
+{{ base }}
+
+### 组件状态
+
+{{ theme }}
+
+### 显示遮罩
+{{ cover }}
+
+### 手动关闭
+{{ close }}
+## API
+### Toast Props
+
+名称 | 类型 | 默认值 | 说明 | 必传
+-- | -- | -- | -- | --
+custom-style `v0.25.0` | String | - | 自定义组件样式 | N
+direction | String | row | 图标排列方式。可选项：row/column | N
+duration | Number | 2000 | 弹窗显示毫秒数 | N
+external-classes | Array | - | 组件类名。`['t-class']` | N
+icon | String | - | 自定义图标 | N
+message | String / Slot | - | 弹窗显示文字 | N
+overlay-props | Object | {} | 遮罩层属性，透传至 Overlay | N
+placement | String | middle | 弹窗展示位置。可选项： top/middle/bottom | N
+prevent-scroll-through | Boolean | false | 防止滚动穿透，即不允许点击和滚动 | N
+show-overlay | Boolean | false | 是否显示遮罩层 | N
+theme | String | - | 提示类型。可选项：loading/success/fail | N
+
+### Toast Events
+
+名称 | 参数 | 描述
+-- | -- | --
+close | \- | 轻提示隐藏的时候触发
+destory | \- | 轻提示销毁的时候触发

miniprogram_npm/tdesign-miniprogram/toast/index.d.ts

@@ -0,0 +1,22 @@
+/// <reference types="miniprogram-api-typings" />
+/// <reference types="miniprogram-api-typings" />
+declare type Context = WechatMiniprogram.Page.TrivialInstance | WechatMiniprogram.Component.TrivialInstance;
+declare type ToastType = 'loading' | 'success' | 'fail';
+declare type ToastPositionType = 'top' | 'middle' | 'bottom';
+declare type ToastDirectionType = 'row' | 'column';
+export declare type ToastOptionsType = {
+    context?: Context;
+    selector?: string;
+    icon?: string;
+    message?: string;
+    duration?: number;
+    theme?: ToastType;
+    placement?: ToastPositionType;
+    preventScrollThrough?: boolean;
+    direction?: ToastDirectionType;
+    close?: <T = any>() => T;
+};
+declare function Toast(options: ToastOptionsType): void;
+declare function showToast(options?: ToastOptionsType): void;
+declare function hideToast(options?: ToastOptionsType): void;
+export { Toast as default, showToast, hideToast };

miniprogram_npm/tdesign-miniprogram/toast/index.js

@@ -0,0 +1,31 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { getInstance } from '../common/utils';
+function Toast(options) {
+    var _a;
+    const { context, selector = '#t-toast' } = options, Options = __rest(options, ["context", "selector"]);
+    const instance = getInstance(context, selector);
+    if (instance) {
+        instance.show(Object.assign(Object.assign({}, Options), { duration: (_a = Options.duration) !== null && _a !== void 0 ? _a : 2000 }));
+    }
+}
+function showToast(options = {}) {
+    Toast(options);
+}
+function hideToast(options = {}) {
+    const { context, selector = '#t-toast' } = options;
+    const instance = getInstance(context, selector);
+    if (instance) {
+        instance.hide();
+    }
+}
+export { Toast as default, showToast, hideToast };

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

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

miniprogram_npm/tdesign-miniprogram/toast/props.js

@@ -0,0 +1,44 @@
+const props = {
+    customStyle: {
+        type: String,
+        value: '',
+    },
+    direction: {
+        type: String,
+        value: 'row',
+    },
+    duration: {
+        type: Number,
+        value: 2000,
+    },
+    externalClasses: {
+        type: Array,
+    },
+    icon: {
+        type: String,
+        value: '',
+    },
+    message: {
+        type: String,
+    },
+    overlayProps: {
+        type: Object,
+        value: {},
+    },
+    placement: {
+        type: String,
+        value: 'middle',
+    },
+    preventScrollThrough: {
+        type: Boolean,
+        value: false,
+    },
+    showOverlay: {
+        type: Boolean,
+        value: false,
+    },
+    theme: {
+        type: String,
+    },
+};
+export default props;

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

@@ -0,0 +1,25 @@
+/// <reference types="node" />
+import { SuperComponent } from '../common/src/index';
+import { ToastOptionsType } from './index';
+declare type Timer = NodeJS.Timeout | null;
+export default class Toast extends SuperComponent {
+    externalClasses: string[];
+    options: {
+        multipleSlots: boolean;
+    };
+    behaviors: string[];
+    hideTimer: Timer;
+    data: {
+        prefix: string;
+        classPrefix: string;
+        typeMapIcon: string;
+    };
+    properties: import("./type").TdToastProps;
+    detached(): void;
+    methods: {
+        show(options: ToastOptionsType): void;
+        hide(): void;
+        destroyed(): void;
+    };
+}
+export {};

miniprogram_npm/tdesign-miniprogram/toast/toast.js

@@ -0,0 +1,79 @@
+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';
+import transition from '../mixins/transition';
+const { prefix } = config;
+const name = `${prefix}-toast`;
+let Toast = class Toast extends SuperComponent {
+    constructor() {
+        super(...arguments);
+        this.externalClasses = [`${prefix}-class`];
+        this.options = {
+            multipleSlots: true,
+        };
+        this.behaviors = [transition()];
+        this.hideTimer = null;
+        this.data = {
+            prefix,
+            classPrefix: name,
+            typeMapIcon: '',
+        };
+        this.properties = props;
+        this.methods = {
+            show(options) {
+                if (this.hideTimer)
+                    clearTimeout(this.hideTimer);
+                const iconMap = {
+                    loading: 'loading',
+                    success: 'check-circle',
+                    warning: 'error-circle',
+                    fail: 'close-circle',
+                };
+                const typeMapIcon = iconMap[options === null || options === void 0 ? void 0 : options.theme] || '';
+                const defaultOptions = {
+                    direction: props.direction.value,
+                    duration: props.duration.value,
+                    icon: props.icon.value,
+                    message: props.message.value,
+                    placement: props.placement.value,
+                    preventScrollThrough: props.preventScrollThrough.value,
+                    theme: props.theme.value,
+                };
+                const data = Object.assign(Object.assign(Object.assign({}, defaultOptions), options), { visible: true, typeMapIcon });
+                const { duration } = data;
+                this.setData(data);
+                if (duration > 0) {
+                    this.hideTimer = setTimeout(() => {
+                        this.hide();
+                    }, duration);
+                }
+            },
+            hide() {
+                var _a, _b;
+                this.setData({ visible: false });
+                (_b = (_a = this.data) === null || _a === void 0 ? void 0 : _a.close) === null || _b === void 0 ? void 0 : _b.call(_a);
+                this.triggerEvent('close');
+            },
+            destroyed() {
+                if (this.hideTimer) {
+                    clearTimeout(this.hideTimer);
+                    this.hideTimer = null;
+                }
+                this.triggerEvent('destory');
+            },
+        };
+    }
+    detached() {
+        this.destroyed();
+    }
+};
+Toast = __decorate([
+    wxComponent()
+], Toast);
+export default Toast;

miniprogram_npm/tdesign-miniprogram/toast/toast.json

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

miniprogram_npm/tdesign-miniprogram/toast/toast.wxml

@@ -0,0 +1,38 @@
+<wxs src="../common/utils.wxs" module="_" />
+<view
+  wx:if="{{realVisible}}"
+  class="{{_.cls(classPrefix, [direction, theme, ['with-text', message]])}} {{prefix}}-class {{transitionClass}}"
+  style="top: {{placement === 'top' ? '25%' : placement === 'bottom' ? '75%': '45%'}} {{ customStyle }}"
+  bind:transitionend="onTransitionEnd"
+>
+  <view class="{{classPrefix}}__content {{classPrefix}}__content--{{direction}}">
+    <t-icon
+      aria-hidden="{{true}}"
+      wx:if="{{typeMapIcon!=='loading' || icon}}"
+      name="{{typeMapIcon || icon}}"
+      class="{{classPrefix}}__icon {{classPrefix}}__icon--{{direction}}"
+    />
+    <t-loading
+      wx:if="{{typeMapIcon === 'loading'}}"
+      theme="circular"
+      size="{{direction === 'row' ? '48rpx' : '64rpx'}}"
+      loading
+      inherit-color
+      layout="vertical"
+    />
+    <slot name="icon" />
+    <view
+      aria-role="alert"
+      class="{{classPrefix}}__text {{typeMapIcon || icon ? classPrefix + '__text--' + direction : ''}}"
+      >{{message}}</view
+    >
+    <slot name="message" />
+  </view>
+</view>
+<t-overlay
+  customStyle="{{ overlayProps.customStyle }}"
+  visible="{{realVisible && (showOverlay || preventScrollThrough)}}"
+  z-index="{{overlayProps.zIndex}}"
+  backgroundColor="{{preventScrollThrough ? 'transparent' : overlayProps.backgroundColor}}"
+  preventScrollThrough="{{preventScrollThrough || overlayProps.preventScrollThrough}}"
+/>

miniprogram_npm/tdesign-miniprogram/toast/toast.wxss

@@ -0,0 +1,98 @@
+.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-toast {
+  position: fixed;
+  right: -50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  z-index: 12001;
+  opacity: 1;
+  transition: opacity 300ms ease;
+  background-color: var(--td-toast-bg-color, var(--td-font-gray-2, rgba(0, 0, 0, 0.6)));
+  border-radius: var(--td-toast-radius, 8rpx);
+  font-size: 28rpx;
+  color: var(--td-toast-color, var(--td-white-color-1, #fff));
+  max-width: var(--td-toast-max-width, 374rpx);
+  width: fit-content;
+  box-sizing: border-box;
+}
+.t-toast--column {
+  padding: 48rpx;
+  min-width: 160rpx;
+  min-height: 160rpx;
+  border-radius: 16rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.t-toast--loading.t-toast--with-text {
+  min-width: 204rpx;
+  min-height: 204rpx;
+  padding-top: 0;
+  padding-bottom: 0;
+}
+.t-toast__content {
+  align-items: center;
+  line-height: 44rpx;
+}
+.t-toast__content--row {
+  display: flex;
+  text-align: left;
+  padding: 28rpx 44rpx;
+}
+.t-toast__content--column {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+.t-toast__icon--row {
+  display: flex;
+  font-size: var(--td-toast-row-icon-size, 48rpx);
+}
+.t-toast__icon--column {
+  font-size: var(--td-toast-column-icon-size, 64rpx);
+}
+.t-toast__text {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  -webkit-line-clamp: 3;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  white-space: pre-line;
+}
+.t-toast__text--column:not(:empty) {
+  margin-top: 16rpx;
+}
+.t-toast__text--row {
+  margin-left: 16rpx;
+}
+.t-toast.t-fade-enter,
+.t-toast.t-fade-leave-to {
+  opacity: 0;
+}

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

@@ -0,0 +1,46 @@
+export interface TdToastProps {
+    customStyle?: {
+        type: StringConstructor;
+        value?: string;
+    };
+    direction?: {
+        type: StringConstructor;
+        value?: 'row' | 'column';
+    };
+    duration?: {
+        type: NumberConstructor;
+        value?: number;
+    };
+    externalClasses?: {
+        type: ArrayConstructor;
+        value?: ['t-class'];
+    };
+    icon?: {
+        type: StringConstructor;
+        value?: string;
+    };
+    message?: {
+        type: StringConstructor;
+        value?: string;
+    };
+    overlayProps?: {
+        type: ObjectConstructor;
+        value?: object;
+    };
+    placement?: {
+        type: StringConstructor;
+        value?: 'top' | 'middle' | 'bottom';
+    };
+    preventScrollThrough?: {
+        type: BooleanConstructor;
+        value?: boolean;
+    };
+    showOverlay?: {
+        type: BooleanConstructor;
+        value?: boolean;
+    };
+    theme?: {
+        type: StringConstructor;
+        value?: 'loading' | 'success' | 'fail';
+    };
+}

miniprogram_npm/tdesign-miniprogram/toast/type.js

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