parent
2b3b303c8d
commit
49136a8948
@ -0,0 +1,31 @@
|
|||||||
|
/*
|
||||||
|
* Eslint config file
|
||||||
|
* Documentation: https://eslint.org/docs/user-guide/configuring/
|
||||||
|
* Install the Eslint extension before using this feature.
|
||||||
|
*/
|
||||||
|
module.exports = {
|
||||||
|
env: {
|
||||||
|
es6: true,
|
||||||
|
browser: true,
|
||||||
|
node: true,
|
||||||
|
},
|
||||||
|
ecmaFeatures: {
|
||||||
|
modules: true,
|
||||||
|
},
|
||||||
|
parserOptions: {
|
||||||
|
ecmaVersion: 2018,
|
||||||
|
sourceType: 'module',
|
||||||
|
},
|
||||||
|
globals: {
|
||||||
|
wx: true,
|
||||||
|
App: true,
|
||||||
|
Page: true,
|
||||||
|
getCurrentPages: true,
|
||||||
|
getApp: true,
|
||||||
|
Component: true,
|
||||||
|
requirePlugin: true,
|
||||||
|
requireMiniProgram: true,
|
||||||
|
},
|
||||||
|
// extends: 'eslint:recommended',
|
||||||
|
rules: {},
|
||||||
|
}
|
||||||
@ -0,0 +1,14 @@
|
|||||||
|
# Windows
|
||||||
|
[Dd]esktop.ini
|
||||||
|
Thumbs.db
|
||||||
|
$RECYCLE.BIN/
|
||||||
|
|
||||||
|
# macOS
|
||||||
|
.DS_Store
|
||||||
|
.fseventsd
|
||||||
|
.Spotlight-V100
|
||||||
|
.TemporaryItems
|
||||||
|
.Trashes
|
||||||
|
|
||||||
|
# Node.js
|
||||||
|
node_modules/
|
||||||
@ -0,0 +1,10 @@
|
|||||||
|
import gulpError from './utils/gulpError';
|
||||||
|
App({
|
||||||
|
onShow() {
|
||||||
|
if (gulpError !== 'gulpErrorPlaceHolder') {
|
||||||
|
wx.redirectTo({
|
||||||
|
url: `/pages/gulp-error/index?gulpError=${gulpError}`,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
},
|
||||||
|
});
|
||||||
@ -0,0 +1,57 @@
|
|||||||
|
{
|
||||||
|
"entryPagePath": "pages/record/record",
|
||||||
|
"pages": [
|
||||||
|
"pages/my/my",
|
||||||
|
"pages/record/record",
|
||||||
|
"pages/login/login",
|
||||||
|
"pages/home/home",
|
||||||
|
"pages/useguide/useguide",
|
||||||
|
"pages/problem/problem",
|
||||||
|
"pages/articles/articles",
|
||||||
|
"pages/addPage/addarticles",
|
||||||
|
"pages/articledetail/articledetail"
|
||||||
|
],
|
||||||
|
"usingComponents": {
|
||||||
|
"t-message": "tdesign-miniprogram/message/message",
|
||||||
|
"t-toast": "tdesign-miniprogram/toast/toast",
|
||||||
|
"t-icon": "tdesign-miniprogram/icon/icon",
|
||||||
|
"t-input": "tdesign-miniprogram/input/input",
|
||||||
|
"t-swiper": "tdesign-miniprogram/swiper/swiper",
|
||||||
|
"t-swiper-nav": "tdesign-miniprogram/swiper-nav/swiper-nav"
|
||||||
|
},
|
||||||
|
"window": {
|
||||||
|
"backgroundTextStyle": "light",
|
||||||
|
"navigationStyle": "default",
|
||||||
|
"navigationBarBackgroundColor": "#f6f6f6",
|
||||||
|
"backgroundColor": "#f6f6f6",
|
||||||
|
"navigationBarTitleText": "智能识别",
|
||||||
|
"navigationBarTextStyle": "black"
|
||||||
|
},
|
||||||
|
"tabBar": {
|
||||||
|
"color": "#CEC8E9",
|
||||||
|
"selectedColor": "#19DD51",
|
||||||
|
"borderStyle": "white",
|
||||||
|
"backgroundColor": "#F7FAFB",
|
||||||
|
"list": [
|
||||||
|
{
|
||||||
|
"pagePath": "pages/record/record",
|
||||||
|
"text": "知识科普",
|
||||||
|
"iconPath": "assets/record.png",
|
||||||
|
"selectedIconPath": "assets/record_act.png"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"pagePath": "pages/home/home",
|
||||||
|
"text": "拍照识别",
|
||||||
|
"iconPath": "assets/home.png",
|
||||||
|
"selectedIconPath": "assets/home_act.png"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"pagePath": "pages/my/my",
|
||||||
|
"text": "ai问答",
|
||||||
|
"iconPath": "assets/mine.png",
|
||||||
|
"selectedIconPath": "assets/mine_act.png"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
"sitemapLocation": "sitemap.json"
|
||||||
|
}
|
||||||
@ -0,0 +1,5 @@
|
|||||||
|
page {
|
||||||
|
background: #f6f6f6;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
After Width: | Height: | Size: 143 KiB |
|
After Width: | Height: | Size: 416 KiB |
|
After Width: | Height: | Size: 513 KiB |
|
After Width: | Height: | Size: 21 KiB |
|
After Width: | Height: | Size: 4.2 KiB |
|
After Width: | Height: | Size: 3.2 KiB |
|
After Width: | Height: | Size: 3.3 KiB |
|
After Width: | Height: | Size: 4.0 KiB |
|
After Width: | Height: | Size: 3.9 KiB |
|
After Width: | Height: | Size: 4.2 KiB |
|
After Width: | Height: | Size: 3.9 KiB |
|
After Width: | Height: | Size: 3.1 KiB |
|
After Width: | Height: | Size: 3.1 KiB |
|
After Width: | Height: | Size: 116 KiB |
|
After Width: | Height: | Size: 125 KiB |
|
After Width: | Height: | Size: 3.7 KiB |
@ -0,0 +1,3 @@
|
|||||||
|
module.exports = {
|
||||||
|
baseUrl:'http://192.168.251.13:8000',
|
||||||
|
}
|
||||||
@ -0,0 +1,66 @@
|
|||||||
|
import { SuperComponent } from '../common/src/index';
|
||||||
|
export default class ActionSheet extends SuperComponent {
|
||||||
|
static show: (options: import("./show").ActionSheetShowOption) => WechatMiniprogram.Component.TrivialInstance;
|
||||||
|
externalClasses: string[];
|
||||||
|
properties: {
|
||||||
|
align?: {
|
||||||
|
type: StringConstructor;
|
||||||
|
value?: "center" | "left";
|
||||||
|
};
|
||||||
|
cancelText?: {
|
||||||
|
type: StringConstructor;
|
||||||
|
value?: string;
|
||||||
|
};
|
||||||
|
count?: {
|
||||||
|
type: NumberConstructor;
|
||||||
|
value?: number;
|
||||||
|
};
|
||||||
|
description?: {
|
||||||
|
type: StringConstructor;
|
||||||
|
value?: string;
|
||||||
|
};
|
||||||
|
items: {
|
||||||
|
type: ArrayConstructor;
|
||||||
|
value?: (string | import("./type").ActionSheetItem)[];
|
||||||
|
};
|
||||||
|
showCancel?: {
|
||||||
|
type: BooleanConstructor;
|
||||||
|
value?: boolean;
|
||||||
|
};
|
||||||
|
theme?: {
|
||||||
|
type: StringConstructor;
|
||||||
|
value?: "list" | "grid";
|
||||||
|
};
|
||||||
|
visible: {
|
||||||
|
type: BooleanConstructor;
|
||||||
|
value?: boolean;
|
||||||
|
};
|
||||||
|
defaultVisible: {
|
||||||
|
type: BooleanConstructor;
|
||||||
|
value?: boolean;
|
||||||
|
};
|
||||||
|
};
|
||||||
|
data: {
|
||||||
|
prefix: string;
|
||||||
|
classPrefix: string;
|
||||||
|
gridThemeItems: any[];
|
||||||
|
currentSwiperIndex: number;
|
||||||
|
};
|
||||||
|
controlledProps: {
|
||||||
|
key: string;
|
||||||
|
event: string;
|
||||||
|
}[];
|
||||||
|
ready(): void;
|
||||||
|
methods: {
|
||||||
|
onSwiperChange(e: WechatMiniprogram.TouchEvent): void;
|
||||||
|
splitGridThemeActions(): void;
|
||||||
|
show(options: any): void;
|
||||||
|
memoInitialData(): void;
|
||||||
|
close(): void;
|
||||||
|
onPopupVisibleChange({ detail }: {
|
||||||
|
detail: any;
|
||||||
|
}): void;
|
||||||
|
onSelect(event: WechatMiniprogram.TouchEvent): void;
|
||||||
|
onCancel(): void;
|
||||||
|
};
|
||||||
|
}
|
||||||
@ -0,0 +1,94 @@
|
|||||||
|
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 { chunk } from '../common/utils';
|
||||||
|
import { SuperComponent, wxComponent } from '../common/src/index';
|
||||||
|
import config from '../common/config';
|
||||||
|
import { ActionSheetTheme, show } from './show';
|
||||||
|
import props from './props';
|
||||||
|
const { prefix } = config;
|
||||||
|
const name = `${prefix}-action-sheet`;
|
||||||
|
let ActionSheet = class ActionSheet extends SuperComponent {
|
||||||
|
constructor() {
|
||||||
|
super(...arguments);
|
||||||
|
this.externalClasses = [`${prefix}-class`, `${prefix}-class-content`, `${prefix}-class-cancel`];
|
||||||
|
this.properties = Object.assign({}, props);
|
||||||
|
this.data = {
|
||||||
|
prefix,
|
||||||
|
classPrefix: name,
|
||||||
|
gridThemeItems: [],
|
||||||
|
currentSwiperIndex: 0,
|
||||||
|
};
|
||||||
|
this.controlledProps = [
|
||||||
|
{
|
||||||
|
key: 'visible',
|
||||||
|
event: 'visible-change',
|
||||||
|
},
|
||||||
|
];
|
||||||
|
this.methods = {
|
||||||
|
onSwiperChange(e) {
|
||||||
|
const { detail: { current }, } = e;
|
||||||
|
this.setData({
|
||||||
|
currentSwiperIndex: current,
|
||||||
|
});
|
||||||
|
},
|
||||||
|
splitGridThemeActions() {
|
||||||
|
if (this.data.theme !== ActionSheetTheme.Grid)
|
||||||
|
return;
|
||||||
|
this.setData({
|
||||||
|
gridThemeItems: chunk(this.data.items, this.data.count),
|
||||||
|
});
|
||||||
|
},
|
||||||
|
show(options) {
|
||||||
|
this.setData(Object.assign(Object.assign(Object.assign({}, this.initialData), options), { visible: true }));
|
||||||
|
this.splitGridThemeActions();
|
||||||
|
this.autoClose = true;
|
||||||
|
this._trigger('visible-change', { visible: true });
|
||||||
|
},
|
||||||
|
memoInitialData() {
|
||||||
|
this.initialData = Object.assign(Object.assign({}, this.properties), this.data);
|
||||||
|
},
|
||||||
|
close() {
|
||||||
|
this.triggerEvent('close', { trigger: 'command' });
|
||||||
|
this._trigger('visible-change', { visible: false });
|
||||||
|
},
|
||||||
|
onPopupVisibleChange({ detail }) {
|
||||||
|
if (!detail.visible) {
|
||||||
|
this.triggerEvent('close', { trigger: 'overlay' });
|
||||||
|
this._trigger('visible-change', { visible: false });
|
||||||
|
}
|
||||||
|
if (this.autoClose) {
|
||||||
|
this.setData({ visible: false });
|
||||||
|
this.autoClose = false;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
onSelect(event) {
|
||||||
|
const { currentSwiperIndex, items, gridThemeItems, count, theme } = this.data;
|
||||||
|
const { index } = event.currentTarget.dataset;
|
||||||
|
const isSwiperMode = theme === ActionSheetTheme.Grid;
|
||||||
|
const item = isSwiperMode ? gridThemeItems[currentSwiperIndex][index] : items[index];
|
||||||
|
const realIndex = isSwiperMode ? index + currentSwiperIndex * count : index;
|
||||||
|
if (item) {
|
||||||
|
this.triggerEvent('selected', { selected: item, index: realIndex });
|
||||||
|
this.trigger('close', { trigger: 'select' });
|
||||||
|
this._trigger('visible-change', { visible: false });
|
||||||
|
}
|
||||||
|
},
|
||||||
|
onCancel() {
|
||||||
|
this.triggerEvent('cancel');
|
||||||
|
},
|
||||||
|
};
|
||||||
|
}
|
||||||
|
ready() {
|
||||||
|
this.memoInitialData();
|
||||||
|
this.splitGridThemeActions();
|
||||||
|
}
|
||||||
|
};
|
||||||
|
ActionSheet.show = show;
|
||||||
|
ActionSheet = __decorate([
|
||||||
|
wxComponent()
|
||||||
|
], ActionSheet);
|
||||||
|
export default ActionSheet;
|
||||||
@ -0,0 +1,10 @@
|
|||||||
|
{
|
||||||
|
"component": true,
|
||||||
|
"usingComponents": {
|
||||||
|
"t-icon": "../icon/icon",
|
||||||
|
"t-popup": "../popup/popup",
|
||||||
|
"t-grid": "../grid/grid",
|
||||||
|
"t-grid-item": "../grid-item/grid-item",
|
||||||
|
"t-swiper-nav": "../swiper-nav/swiper-nav"
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,41 @@
|
|||||||
|
<wxs src="./action-sheet.wxs" module="this" />
|
||||||
|
<wxs src="../common/utils.wxs" module="_" />
|
||||||
|
<import src="./template/list.wxml" />
|
||||||
|
<import src="./template/grid.wxml" />
|
||||||
|
|
||||||
|
<view id="{{classPrefix}}" style="{{_._style([style, customStyle])}}" class="{{classPrefix}} class {{prefix}}-class">
|
||||||
|
<t-popup visible="{{visible}}" placement="bottom" bind:visible-change="onPopupVisibleChange">
|
||||||
|
<view
|
||||||
|
class="{{_.cls(classPrefix + '__content', [['grid', gridThemeItems.length]])}} {{prefix}}-class-content"
|
||||||
|
tabindex="0"
|
||||||
|
>
|
||||||
|
<view wx:if="{{description}}" tabindex="0" class="{{_.cls(classPrefix + '__description', [align])}}"
|
||||||
|
>{{description}}</view
|
||||||
|
>
|
||||||
|
<block wx:if="{{gridThemeItems.length}}">
|
||||||
|
<template is="grid" data="{{classPrefix, prefix, gridThemeItems, count, currentSwiperIndex}}" />
|
||||||
|
</block>
|
||||||
|
<view wx:elif="{{items && items.length}}" class="{{classPrefix}}__list">
|
||||||
|
<block wx:for="{{ items }}" wx:key="index">
|
||||||
|
<template
|
||||||
|
is="list"
|
||||||
|
data="{{index, classPrefix, listThemeItemClass: _.cls(classPrefix + '__list-item', [align, [disabled, item.disabled]]), item}}"
|
||||||
|
/>
|
||||||
|
</block>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<slot />
|
||||||
|
<view wx:if="{{showCancel}}" class="{{classPrefix}}__footer {{classPrefix}}__safe">
|
||||||
|
<view class="{{classPrefix}}__gap-{{theme}}" />
|
||||||
|
<view
|
||||||
|
class="{{classPrefix}}__cancel {{prefix}}-class-cancel"
|
||||||
|
hover-class="{{classPrefix}}__cancel--hover"
|
||||||
|
hover-stay-time="70"
|
||||||
|
bind:tap="onCancel"
|
||||||
|
aria-role="button"
|
||||||
|
>
|
||||||
|
{{ cancelText }}
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</t-popup>
|
||||||
|
</view>
|
||||||
@ -0,0 +1,19 @@
|
|||||||
|
var getListThemeItemClass = function (props) {
|
||||||
|
var classPrefix = props.classPrefix;
|
||||||
|
var item = props.item;
|
||||||
|
var prefix = props.prefix;
|
||||||
|
var classList = [classPrefix + '__list-item'];
|
||||||
|
if (item.disabled) {
|
||||||
|
classList.push(prefix + '-is-disabled');
|
||||||
|
}
|
||||||
|
return classList.join(' ');
|
||||||
|
};
|
||||||
|
|
||||||
|
var isImage = function (name) {
|
||||||
|
return name.indexOf('/') !== -1;
|
||||||
|
};
|
||||||
|
|
||||||
|
module.exports = {
|
||||||
|
getListThemeItemClass: getListThemeItemClass,
|
||||||
|
isImage: isImage,
|
||||||
|
};
|
||||||
@ -0,0 +1,169 @@
|
|||||||
|
.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-action-sheet__content {
|
||||||
|
color: var(--td-action-sheet-color, var(--td-font-gray-1, rgba(0, 0, 0, 0.9)));
|
||||||
|
border-top-left-radius: var(--td-action-sheet-border-radius, var(--td-radius-extra-large, 24rpx));
|
||||||
|
border-top-right-radius: var(--td-action-sheet-border-radius, var(--td-radius-extra-large, 24rpx));
|
||||||
|
background-color: var(--td-bg-color-container, var(--td-font-white-1, #ffffff));
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
.t-action-sheet__content--grid {
|
||||||
|
padding-top: 16rpx;
|
||||||
|
}
|
||||||
|
.t-action-sheet__content:focus {
|
||||||
|
outline: 0;
|
||||||
|
}
|
||||||
|
.t-action-sheet__grid {
|
||||||
|
padding-bottom: 16rpx;
|
||||||
|
}
|
||||||
|
.t-action-sheet__grid--swiper {
|
||||||
|
padding-bottom: 48rpx;
|
||||||
|
}
|
||||||
|
.t-action-sheet__description {
|
||||||
|
color: var(--td-action-sheet-description-color, var(--td-font-gray-3, rgba(0, 0, 0, 0.4)));
|
||||||
|
line-height: 44rpx;
|
||||||
|
font-size: 28rpx;
|
||||||
|
text-align: var(--td-action-sheet-text-align, center);
|
||||||
|
padding: 24rpx 32rpx;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
.t-action-sheet__description:focus {
|
||||||
|
outline: 0;
|
||||||
|
}
|
||||||
|
.t-action-sheet__description::after {
|
||||||
|
content: '';
|
||||||
|
display: block;
|
||||||
|
position: absolute;
|
||||||
|
top: unset;
|
||||||
|
bottom: 0;
|
||||||
|
left: unset;
|
||||||
|
right: unset;
|
||||||
|
background-color: var(--td-action-sheet-border-color, var(--td-gray-color-1, #f3f3f3));
|
||||||
|
}
|
||||||
|
.t-action-sheet__description::after {
|
||||||
|
height: 1px;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
transform: scaleY(0.5);
|
||||||
|
}
|
||||||
|
.t-action-sheet__description--left {
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
.t-action-sheet__description--left::after {
|
||||||
|
left: 32rpx;
|
||||||
|
}
|
||||||
|
.t-action-sheet__list-item {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
position: relative;
|
||||||
|
height: var(--td-action-sheet-list-item-height, 112rpx);
|
||||||
|
padding: 0 32rpx;
|
||||||
|
}
|
||||||
|
.t-action-sheet__list-item::after {
|
||||||
|
content: '';
|
||||||
|
display: block;
|
||||||
|
position: absolute;
|
||||||
|
top: unset;
|
||||||
|
bottom: 0;
|
||||||
|
left: unset;
|
||||||
|
right: unset;
|
||||||
|
background-color: var(--td-action-sheet-border-color, var(--td-gray-color-1, #f3f3f3));
|
||||||
|
}
|
||||||
|
.t-action-sheet__list-item::after {
|
||||||
|
height: 1px;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
transform: scaleY(0.5);
|
||||||
|
}
|
||||||
|
.t-action-sheet__list-item:focus {
|
||||||
|
outline: 0;
|
||||||
|
}
|
||||||
|
.t-action-sheet__list-item--left {
|
||||||
|
justify-content: start;
|
||||||
|
}
|
||||||
|
.t-action-sheet__list-item--left::after {
|
||||||
|
left: 32rpx;
|
||||||
|
}
|
||||||
|
.t-action-sheet__list-item--disabled {
|
||||||
|
color: var(--td-action-sheet-list-item-disabled-color, var(--td-font-gray-4, rgba(0, 0, 0, 0.26)));
|
||||||
|
}
|
||||||
|
.t-action-sheet__list-item-text {
|
||||||
|
font-size: var(--td-font-size-m, 32rpx);
|
||||||
|
word-wrap: normal;
|
||||||
|
white-space: nowrap;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
}
|
||||||
|
.t-action-sheet__list-item-icon {
|
||||||
|
margin-right: 16rpx;
|
||||||
|
}
|
||||||
|
.t-action-sheet__swiper-wrap {
|
||||||
|
margin-top: 8rpx;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
.t-action-sheet__footer {
|
||||||
|
background-color: var(--td-bg-color-container, var(--td-font-white-1, #ffffff));
|
||||||
|
}
|
||||||
|
.t-action-sheet__gap-list {
|
||||||
|
height: 16rpx;
|
||||||
|
background-color: var(--td-action-sheet-border-color, var(--td-gray-color-1, #f3f3f3));
|
||||||
|
}
|
||||||
|
.t-action-sheet__gap-grid {
|
||||||
|
height: 1rpx;
|
||||||
|
background-color: var(--td-action-sheet-border-color, var(--td-gray-color-1, #f3f3f3));
|
||||||
|
}
|
||||||
|
.t-action-sheet__cancel {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
height: var(--td-action-sheet-cancel-height, 96rpx);
|
||||||
|
}
|
||||||
|
.t-action-sheet__dots {
|
||||||
|
position: absolute;
|
||||||
|
left: 50%;
|
||||||
|
bottom: 32rpx;
|
||||||
|
transform: translateX(-50%);
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
}
|
||||||
|
.t-action-sheet__dots-item {
|
||||||
|
width: 16rpx;
|
||||||
|
height: 16rpx;
|
||||||
|
background-color: #dcdcdc;
|
||||||
|
border-radius: 50%;
|
||||||
|
margin: 0 16rpx;
|
||||||
|
transition: all 0.4s ease-in;
|
||||||
|
}
|
||||||
|
.t-action-sheet__dots-item.t-is-active {
|
||||||
|
background-color: #0052d9;
|
||||||
|
}
|
||||||
|
.t-action-sheet__safe {
|
||||||
|
padding-bottom: constant(safe-area-inset-bottom);
|
||||||
|
padding-bottom: env(safe-area-inset-bottom);
|
||||||
|
}
|
||||||
@ -0,0 +1,3 @@
|
|||||||
|
import ActionSheet from './action-sheet';
|
||||||
|
export * from './show';
|
||||||
|
export default ActionSheet;
|
||||||
@ -0,0 +1,3 @@
|
|||||||
|
import ActionSheet from './action-sheet';
|
||||||
|
export * from './show';
|
||||||
|
export default ActionSheet;
|
||||||
@ -0,0 +1,3 @@
|
|||||||
|
import { TdActionSheetProps } from './type';
|
||||||
|
declare const props: TdActionSheetProps;
|
||||||
|
export default props;
|
||||||
@ -0,0 +1,38 @@
|
|||||||
|
const props = {
|
||||||
|
align: {
|
||||||
|
type: String,
|
||||||
|
value: 'center',
|
||||||
|
},
|
||||||
|
cancelText: {
|
||||||
|
type: String,
|
||||||
|
value: '取消',
|
||||||
|
},
|
||||||
|
count: {
|
||||||
|
type: Number,
|
||||||
|
value: 8,
|
||||||
|
},
|
||||||
|
description: {
|
||||||
|
type: String,
|
||||||
|
value: '',
|
||||||
|
},
|
||||||
|
items: {
|
||||||
|
type: Array,
|
||||||
|
},
|
||||||
|
showCancel: {
|
||||||
|
type: Boolean,
|
||||||
|
value: true,
|
||||||
|
},
|
||||||
|
theme: {
|
||||||
|
type: String,
|
||||||
|
value: 'list',
|
||||||
|
},
|
||||||
|
visible: {
|
||||||
|
type: Boolean,
|
||||||
|
value: null,
|
||||||
|
},
|
||||||
|
defaultVisible: {
|
||||||
|
type: Boolean,
|
||||||
|
value: false,
|
||||||
|
},
|
||||||
|
};
|
||||||
|
export default props;
|
||||||
@ -0,0 +1,29 @@
|
|||||||
|
/// <reference types="miniprogram-api-typings" />
|
||||||
|
/// <reference types="miniprogram-api-typings" />
|
||||||
|
export interface ActionSheetItem {
|
||||||
|
label: string;
|
||||||
|
color?: string;
|
||||||
|
disabled?: boolean;
|
||||||
|
icon?: string;
|
||||||
|
}
|
||||||
|
declare type Context = WechatMiniprogram.Page.TrivialInstance | WechatMiniprogram.Component.TrivialInstance;
|
||||||
|
export declare enum ActionSheetTheme {
|
||||||
|
List = "list",
|
||||||
|
Grid = "grid"
|
||||||
|
}
|
||||||
|
interface ActionSheetProps {
|
||||||
|
visible: boolean;
|
||||||
|
items: Array<string | ActionSheetItem>;
|
||||||
|
defaultVisible?: boolean;
|
||||||
|
cancelText?: string;
|
||||||
|
count?: number;
|
||||||
|
showCancel?: boolean;
|
||||||
|
theme?: ActionSheetTheme;
|
||||||
|
}
|
||||||
|
export interface ActionSheetShowOption extends Omit<ActionSheetProps, 'visible'> {
|
||||||
|
context?: Context;
|
||||||
|
selector?: string;
|
||||||
|
}
|
||||||
|
export declare const show: (options: ActionSheetShowOption) => WechatMiniprogram.Component.TrivialInstance;
|
||||||
|
export declare const close: (options: ActionSheetShowOption) => void;
|
||||||
|
export {};
|
||||||
@ -0,0 +1,33 @@
|
|||||||
|
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';
|
||||||
|
export var ActionSheetTheme;
|
||||||
|
(function (ActionSheetTheme) {
|
||||||
|
ActionSheetTheme["List"] = "list";
|
||||||
|
ActionSheetTheme["Grid"] = "grid";
|
||||||
|
})(ActionSheetTheme || (ActionSheetTheme = {}));
|
||||||
|
export const show = function (options) {
|
||||||
|
const _a = Object.assign({}, options), { context, selector = '#t-action-sheet' } = _a, otherOptions = __rest(_a, ["context", "selector"]);
|
||||||
|
const instance = getInstance(context, selector);
|
||||||
|
if (instance) {
|
||||||
|
instance.show(Object.assign({}, otherOptions));
|
||||||
|
return instance;
|
||||||
|
}
|
||||||
|
console.error('未找到组件,请确认 selector && context 是否正确');
|
||||||
|
};
|
||||||
|
export const close = function (options) {
|
||||||
|
const { context, selector = '#t-action-sheet' } = Object.assign({}, options);
|
||||||
|
const instance = getInstance(context, selector);
|
||||||
|
if (instance) {
|
||||||
|
instance.close();
|
||||||
|
}
|
||||||
|
};
|
||||||
@ -0,0 +1,49 @@
|
|||||||
|
<template name="grid">
|
||||||
|
<block wx:if="{{gridThemeItems.length === 1}}">
|
||||||
|
<t-grid align="center" t-class="{{classPrefix}}__grid" column="{{count / 2}}" class="{{classPrefix}}__single-wrap">
|
||||||
|
<t-grid-item
|
||||||
|
t-class="{{classPrefix}}__grid-item"
|
||||||
|
class="{{classPrefix}}__square"
|
||||||
|
wx:for="{{gridThemeItems[0]}}"
|
||||||
|
wx:key="index"
|
||||||
|
bind:tap="onSelect"
|
||||||
|
data-index="{{index}}"
|
||||||
|
icon="{{item.icon}}"
|
||||||
|
text="{{item.label}}"
|
||||||
|
image="{{item.image}}"
|
||||||
|
>
|
||||||
|
</t-grid-item>
|
||||||
|
</t-grid>
|
||||||
|
</block>
|
||||||
|
<block wx:elif="{{gridThemeItems.length > 1}}">
|
||||||
|
<view class="{{classPrefix}}__swiper-wrap">
|
||||||
|
<swiper style="height: 456rpx" autoplay="{{false}}" current="{{currentSwiperIndex}}" bindchange="onSwiperChange">
|
||||||
|
<swiper-item wx:for="{{gridThemeItems}}" wx:key="index">
|
||||||
|
<t-grid align="center" t-class="{{classPrefix}}__grid {{classPrefix}}__grid--swiper" column="{{count / 2}}">
|
||||||
|
<t-grid-item
|
||||||
|
t-class="{{classPrefix}}__grid-item"
|
||||||
|
class="{{classPrefix}}__square"
|
||||||
|
wx:for="{{item}}"
|
||||||
|
wx:key="index"
|
||||||
|
data-index="{{index}}"
|
||||||
|
bind:tap="onSelect"
|
||||||
|
icon="{{item.icon}}"
|
||||||
|
text="{{item.label}}"
|
||||||
|
image="{{item.image}}"
|
||||||
|
>
|
||||||
|
</t-grid-item>
|
||||||
|
</t-grid>
|
||||||
|
</swiper-item>
|
||||||
|
</swiper>
|
||||||
|
<view class="{{classPrefix}}__nav">
|
||||||
|
<view class="{{classPrefix}}__dots">
|
||||||
|
<view
|
||||||
|
wx:for="{{gridThemeItems.length}}"
|
||||||
|
wx:key="index"
|
||||||
|
class="{{classPrefix}}__dots-item {{index === currentSwiperIndex ? prefix + '-is-active' : ''}}"
|
||||||
|
/>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</block>
|
||||||
|
</template>
|
||||||
@ -0,0 +1,14 @@
|
|||||||
|
<template name="list">
|
||||||
|
<view
|
||||||
|
data-index="{{index}}"
|
||||||
|
style="{{ item.color ? 'color: ' + item.color : '' }}"
|
||||||
|
class="{{listThemeItemClass}}"
|
||||||
|
bind:tap="onSelect"
|
||||||
|
aria-role="{{ariaRole || 'button'}}"
|
||||||
|
aria-label="{{item.label || item}}"
|
||||||
|
tabindex="0"
|
||||||
|
>
|
||||||
|
<t-icon wx:if="{{item.icon}}" name="{{item.icon}}" class="{{classPrefix}}__list-item-icon" size="48rpx"></t-icon>
|
||||||
|
<view class="{{classPrefix}}__list-item-text">{{item.label || item}}</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
@ -0,0 +1,43 @@
|
|||||||
|
export interface TdActionSheetProps {
|
||||||
|
align?: {
|
||||||
|
type: StringConstructor;
|
||||||
|
value?: 'center' | 'left';
|
||||||
|
};
|
||||||
|
cancelText?: {
|
||||||
|
type: StringConstructor;
|
||||||
|
value?: string;
|
||||||
|
};
|
||||||
|
count?: {
|
||||||
|
type: NumberConstructor;
|
||||||
|
value?: number;
|
||||||
|
};
|
||||||
|
description?: {
|
||||||
|
type: StringConstructor;
|
||||||
|
value?: string;
|
||||||
|
};
|
||||||
|
items: {
|
||||||
|
type: ArrayConstructor;
|
||||||
|
value?: Array<string | ActionSheetItem>;
|
||||||
|
};
|
||||||
|
showCancel?: {
|
||||||
|
type: BooleanConstructor;
|
||||||
|
value?: boolean;
|
||||||
|
};
|
||||||
|
theme?: {
|
||||||
|
type: StringConstructor;
|
||||||
|
value?: 'list' | 'grid';
|
||||||
|
};
|
||||||
|
visible: {
|
||||||
|
type: BooleanConstructor;
|
||||||
|
value?: boolean;
|
||||||
|
};
|
||||||
|
defaultVisible: {
|
||||||
|
type: BooleanConstructor;
|
||||||
|
value?: boolean;
|
||||||
|
};
|
||||||
|
}
|
||||||
|
export interface ActionSheetItem {
|
||||||
|
label: string;
|
||||||
|
color?: string;
|
||||||
|
disabled?: boolean;
|
||||||
|
}
|
||||||
@ -0,0 +1 @@
|
|||||||
|
export {};
|
||||||
@ -0,0 +1,28 @@
|
|||||||
|
import { SuperComponent, RelationsOptions } from '../common/src/index';
|
||||||
|
export default class AvatarGroup extends SuperComponent {
|
||||||
|
externalClasses: string[];
|
||||||
|
properties: import("./type").TdAvatarGroupProps;
|
||||||
|
data: {
|
||||||
|
prefix: string;
|
||||||
|
classPrefix: string;
|
||||||
|
hasChild: boolean;
|
||||||
|
length: number;
|
||||||
|
className: string;
|
||||||
|
};
|
||||||
|
options: {
|
||||||
|
multipleSlots: boolean;
|
||||||
|
};
|
||||||
|
relations: RelationsOptions;
|
||||||
|
lifetimes: {
|
||||||
|
attached(): void;
|
||||||
|
ready(): void;
|
||||||
|
};
|
||||||
|
observers: {
|
||||||
|
'cascading, size'(): void;
|
||||||
|
};
|
||||||
|
methods: {
|
||||||
|
setClass(): void;
|
||||||
|
handleMax(): void;
|
||||||
|
handleChildCascading(): void;
|
||||||
|
};
|
||||||
|
}
|
||||||
@ -0,0 +1,86 @@
|
|||||||
|
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 avatarGroupProps from './props';
|
||||||
|
const { prefix } = config;
|
||||||
|
const name = `${prefix}-avatar-group`;
|
||||||
|
let AvatarGroup = class AvatarGroup extends SuperComponent {
|
||||||
|
constructor() {
|
||||||
|
super(...arguments);
|
||||||
|
this.externalClasses = [`${prefix}-class`, `${prefix}-class-content`, `${prefix}-class-image`];
|
||||||
|
this.properties = avatarGroupProps;
|
||||||
|
this.data = {
|
||||||
|
prefix,
|
||||||
|
classPrefix: name,
|
||||||
|
hasChild: true,
|
||||||
|
length: 0,
|
||||||
|
className: '',
|
||||||
|
};
|
||||||
|
this.options = {
|
||||||
|
multipleSlots: true,
|
||||||
|
};
|
||||||
|
this.relations = {
|
||||||
|
'../avatar/avatar': {
|
||||||
|
type: 'descendant',
|
||||||
|
},
|
||||||
|
};
|
||||||
|
this.lifetimes = {
|
||||||
|
attached() {
|
||||||
|
this.setClass();
|
||||||
|
},
|
||||||
|
ready() {
|
||||||
|
this.setData({
|
||||||
|
length: this.$children.length,
|
||||||
|
});
|
||||||
|
this.handleMax();
|
||||||
|
this.handleChildCascading();
|
||||||
|
},
|
||||||
|
};
|
||||||
|
this.observers = {
|
||||||
|
'cascading, size'() {
|
||||||
|
this.setClass();
|
||||||
|
},
|
||||||
|
};
|
||||||
|
this.methods = {
|
||||||
|
setClass() {
|
||||||
|
const { cascading, size } = this.properties;
|
||||||
|
const direction = cascading.split('-')[0];
|
||||||
|
const classList = [
|
||||||
|
name,
|
||||||
|
`${prefix}-class`,
|
||||||
|
`${name}-offset-${direction}-${size.indexOf('px') > -1 ? 'medium' : size}`,
|
||||||
|
];
|
||||||
|
this.setData({
|
||||||
|
className: classList.join(' '),
|
||||||
|
});
|
||||||
|
},
|
||||||
|
handleMax() {
|
||||||
|
const { max } = this.data;
|
||||||
|
const len = this.$children.length;
|
||||||
|
if (!max || max > len)
|
||||||
|
return;
|
||||||
|
const restAvatars = this.$children.splice(max, len - max);
|
||||||
|
restAvatars.forEach((child) => {
|
||||||
|
child.hide();
|
||||||
|
});
|
||||||
|
},
|
||||||
|
handleChildCascading() {
|
||||||
|
if (this.properties.cascading === 'right-up')
|
||||||
|
return;
|
||||||
|
const defaultZIndex = 100;
|
||||||
|
this.$children.forEach((child, index) => {
|
||||||
|
child.updateCascading(defaultZIndex - index * 10);
|
||||||
|
});
|
||||||
|
},
|
||||||
|
};
|
||||||
|
}
|
||||||
|
};
|
||||||
|
AvatarGroup = __decorate([
|
||||||
|
wxComponent()
|
||||||
|
], AvatarGroup);
|
||||||
|
export default AvatarGroup;
|
||||||
@ -0,0 +1,6 @@
|
|||||||
|
{
|
||||||
|
"component": true,
|
||||||
|
"usingComponents": {
|
||||||
|
"t-avatar": "../avatar/avatar"
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,20 @@
|
|||||||
|
<wxs src="../common/utils.wxs" module="_" />
|
||||||
|
|
||||||
|
<view style="{{_._style([style, customStyle])}}" class="{{className}} class">
|
||||||
|
<slot />
|
||||||
|
<!-- 自定义折叠元素 -->
|
||||||
|
<view class="{{classPrefix}}__collapse--slot">
|
||||||
|
<slot name="collapse-avatar" />
|
||||||
|
</view>
|
||||||
|
<!-- 默认折叠元素 -->
|
||||||
|
<view class="{{classPrefix}}__collapse--default" wx:if="{{max && (max < length)}}">
|
||||||
|
<t-avatar
|
||||||
|
t-class-image="{{prefix}}-avatar--border {{prefix}}-avatar--border-{{size}} {{prefix}}-class-image"
|
||||||
|
t-class-content="{{prefix}}-class-content"
|
||||||
|
size="{{size}}"
|
||||||
|
icon="{{ collapseAvatar ? '' : 'user-add'}}"
|
||||||
|
aria-role="none"
|
||||||
|
>{{collapseAvatar}}</t-avatar
|
||||||
|
>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
@ -0,0 +1,137 @@
|
|||||||
|
.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-avatar {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
box-sizing: border-box;
|
||||||
|
background-color: var(--td-avatar-bg-color, var(--td-brand-color-light-active, var(--td-primary-color-2, #d9e1ff)));
|
||||||
|
color: var(--td-avatar-content-color, var(--td-brand-color, var(--td-primary-color-7, #0052d9)));
|
||||||
|
}
|
||||||
|
.t-avatar__wrapper {
|
||||||
|
display: inline-flex;
|
||||||
|
position: relative;
|
||||||
|
vertical-align: top;
|
||||||
|
margin-left: var(--td-avatar-margin-left, 0);
|
||||||
|
}
|
||||||
|
.t-avatar--large {
|
||||||
|
width: var(--td-avatar-large-width, 128rpx);
|
||||||
|
height: var(--td-avatar-large-width, 128rpx);
|
||||||
|
font-size: var(--td-avatar-text-large-font-size, 16px);
|
||||||
|
}
|
||||||
|
.t-avatar--large .t-avatar__icon {
|
||||||
|
font-size: var(--td-avatar-icon-large-font-size, 64rpx);
|
||||||
|
}
|
||||||
|
.t-avatar--medium {
|
||||||
|
width: var(--td-avatar-medium-width, 96rpx);
|
||||||
|
height: var(--td-avatar-medium-width, 96rpx);
|
||||||
|
font-size: var(--td-avatar-text-medium-font-size, var(--td-font-size-base, 28rpx));
|
||||||
|
}
|
||||||
|
.t-avatar--medium .t-avatar__icon {
|
||||||
|
font-size: var(--td-avatar-icon-medium-font-size, 48rpx);
|
||||||
|
}
|
||||||
|
.t-avatar--small {
|
||||||
|
width: var(--td-avatar-small-width, 80rpx);
|
||||||
|
height: var(--td-avatar-small-width, 80rpx);
|
||||||
|
font-size: var(--td-avatar-text-small-font-size, var(--td-font-size-s, 24rpx));
|
||||||
|
}
|
||||||
|
.t-avatar--small .t-avatar__icon {
|
||||||
|
font-size: var(--td-avatar-icon-small-font-size, 40rpx);
|
||||||
|
}
|
||||||
|
.t-avatar .t-image,
|
||||||
|
.t-avatar__image {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
.t-avatar--circle {
|
||||||
|
border-radius: var(--td-avatar-circle-border-radius, var(--td-radius-circle, 50%));
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
.t-avatar--round {
|
||||||
|
border-radius: var(--td-avatar-round-border-radius, var(--td-radius-default, 12rpx));
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
.t-avatar__text,
|
||||||
|
.t-avatar__icon {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
.t-avatar__text:empty,
|
||||||
|
.t-avatar__icon:empty {
|
||||||
|
width: 0;
|
||||||
|
height: 0;
|
||||||
|
}
|
||||||
|
.t-avatar--border {
|
||||||
|
border-color: var(--td-avatar-border-color, #fff);
|
||||||
|
border-style: solid;
|
||||||
|
}
|
||||||
|
.t-avatar--border-small {
|
||||||
|
border-width: var(--td-avatar-border-width-small, 4rpx);
|
||||||
|
}
|
||||||
|
.t-avatar--border-medium {
|
||||||
|
border-width: var(--td-avatar-border-width-medium, 6rpx);
|
||||||
|
}
|
||||||
|
.t-avatar--border-large {
|
||||||
|
border-width: var(--td-avatar-border-width-large, 8rpx);
|
||||||
|
}
|
||||||
|
.t-avatar-group {
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
.t-avatar-group-offset-left-small {
|
||||||
|
--td-avatar-margin-left: var(--td-avatar-group-margin-left-small, -4px);
|
||||||
|
}
|
||||||
|
.t-avatar-group-offset-left-medium {
|
||||||
|
--td-avatar-margin-left: var(--td-avatar-group-margin-left-medium, -6px);
|
||||||
|
}
|
||||||
|
.t-avatar-group-offset-left-large {
|
||||||
|
--td-avatar-margin-left: var(--td-avatar-group-margin-left-large, -8px);
|
||||||
|
}
|
||||||
|
.t-avatar-group-offset-right-small {
|
||||||
|
--td-avatar-margin-left: var(--td-avatar-group-margin-left-small, -4px);
|
||||||
|
}
|
||||||
|
.t-avatar-group-offset-right-medium {
|
||||||
|
--td-avatar-margin-left: var(--td-avatar-group-margin-left-medium, -6px);
|
||||||
|
}
|
||||||
|
.t-avatar-group-offset-right-large {
|
||||||
|
--td-avatar-margin-left: var(--td-avatar-group-margin-left-large, -8px);
|
||||||
|
}
|
||||||
|
.t-avatar-group__collapse--slot {
|
||||||
|
float: left;
|
||||||
|
}
|
||||||
|
.t-avatar-group__collapse--slot:not(:empty) + .t-avatar-group__collapse--default {
|
||||||
|
display: none;
|
||||||
|
float: left;
|
||||||
|
}
|
||||||
|
.t-avatar-group__collapse--slot:empty + .t-avatar-group__collapse--default {
|
||||||
|
display: block;
|
||||||
|
float: left;
|
||||||
|
}
|
||||||
@ -0,0 +1,3 @@
|
|||||||
|
import { TdAvatarGroupProps } from './type';
|
||||||
|
declare const props: TdAvatarGroupProps;
|
||||||
|
export default props;
|
||||||
@ -0,0 +1,20 @@
|
|||||||
|
const props = {
|
||||||
|
cascading: {
|
||||||
|
type: String,
|
||||||
|
value: 'left-up',
|
||||||
|
},
|
||||||
|
collapseAvatar: {
|
||||||
|
type: String,
|
||||||
|
},
|
||||||
|
externalClasses: {
|
||||||
|
type: Array,
|
||||||
|
},
|
||||||
|
max: {
|
||||||
|
type: Number,
|
||||||
|
},
|
||||||
|
size: {
|
||||||
|
type: String,
|
||||||
|
value: 'medium',
|
||||||
|
},
|
||||||
|
};
|
||||||
|
export default props;
|
||||||
@ -0,0 +1,27 @@
|
|||||||
|
export interface TdAvatarGroupProps {
|
||||||
|
cascading?: {
|
||||||
|
type: StringConstructor;
|
||||||
|
value?: CascadingValue;
|
||||||
|
};
|
||||||
|
collapseAvatar?: {
|
||||||
|
type: StringConstructor;
|
||||||
|
value?: string;
|
||||||
|
};
|
||||||
|
style?: {
|
||||||
|
type: StringConstructor;
|
||||||
|
value?: string;
|
||||||
|
};
|
||||||
|
externalClasses?: {
|
||||||
|
type: ArrayConstructor;
|
||||||
|
value?: ['t-class', 't-class-image', 't-class-content'];
|
||||||
|
};
|
||||||
|
max?: {
|
||||||
|
type: NumberConstructor;
|
||||||
|
value?: number;
|
||||||
|
};
|
||||||
|
size?: {
|
||||||
|
type: StringConstructor;
|
||||||
|
value?: string;
|
||||||
|
};
|
||||||
|
}
|
||||||
|
export declare type CascadingValue = 'left-up' | 'right-up';
|
||||||
@ -0,0 +1 @@
|
|||||||
|
export {};
|
||||||
@ -0,0 +1,23 @@
|
|||||||
|
/// <reference types="miniprogram-api-typings" />
|
||||||
|
import { SuperComponent, RelationsOptions } from '../common/src/index';
|
||||||
|
export default class Avatar extends SuperComponent {
|
||||||
|
options: WechatMiniprogram.Component.ComponentOptions;
|
||||||
|
externalClasses: string[];
|
||||||
|
properties: import("./type").TdAvatarProps;
|
||||||
|
data: {
|
||||||
|
prefix: string;
|
||||||
|
classPrefix: string;
|
||||||
|
isShow: boolean;
|
||||||
|
zIndex: number;
|
||||||
|
bordered: boolean;
|
||||||
|
};
|
||||||
|
relations: RelationsOptions;
|
||||||
|
observers: {
|
||||||
|
icon(icon: any): void;
|
||||||
|
};
|
||||||
|
methods: {
|
||||||
|
hide(): void;
|
||||||
|
updateCascading(zIndex: any): void;
|
||||||
|
onLoadError(e: WechatMiniprogram.CustomEvent): void;
|
||||||
|
};
|
||||||
|
}
|
||||||
@ -0,0 +1,77 @@
|
|||||||
|
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 avatarProps from './props';
|
||||||
|
import { setIcon } from '../common/utils';
|
||||||
|
const { prefix } = config;
|
||||||
|
const name = `${prefix}-avatar`;
|
||||||
|
let Avatar = class Avatar extends SuperComponent {
|
||||||
|
constructor() {
|
||||||
|
super(...arguments);
|
||||||
|
this.options = {
|
||||||
|
multipleSlots: true,
|
||||||
|
styleIsolation: 'apply-shared',
|
||||||
|
};
|
||||||
|
this.externalClasses = [
|
||||||
|
`${prefix}-class`,
|
||||||
|
`${prefix}-class-image`,
|
||||||
|
`${prefix}-class-icon`,
|
||||||
|
`${prefix}-class-alt`,
|
||||||
|
`${prefix}-class-content`,
|
||||||
|
];
|
||||||
|
this.properties = avatarProps;
|
||||||
|
this.data = {
|
||||||
|
prefix,
|
||||||
|
classPrefix: name,
|
||||||
|
isShow: true,
|
||||||
|
zIndex: 0,
|
||||||
|
bordered: false,
|
||||||
|
};
|
||||||
|
this.relations = {
|
||||||
|
'../avatar-group/avatar-group': {
|
||||||
|
type: 'ancestor',
|
||||||
|
linked(parent) {
|
||||||
|
var _a;
|
||||||
|
this.parent = parent;
|
||||||
|
this.setData({
|
||||||
|
size: (_a = this.data.size) !== null && _a !== void 0 ? _a : parent.data.size,
|
||||||
|
bordered: true,
|
||||||
|
});
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
this.observers = {
|
||||||
|
icon(icon) {
|
||||||
|
const obj = setIcon('icon', icon, '');
|
||||||
|
this.setData(Object.assign({}, obj));
|
||||||
|
},
|
||||||
|
};
|
||||||
|
this.methods = {
|
||||||
|
hide() {
|
||||||
|
this.setData({
|
||||||
|
isShow: false,
|
||||||
|
});
|
||||||
|
},
|
||||||
|
updateCascading(zIndex) {
|
||||||
|
this.setData({ zIndex });
|
||||||
|
},
|
||||||
|
onLoadError(e) {
|
||||||
|
if (this.properties.hideOnLoadFailed) {
|
||||||
|
this.setData({
|
||||||
|
isShow: false,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
this.triggerEvent('error', e.detail);
|
||||||
|
},
|
||||||
|
};
|
||||||
|
}
|
||||||
|
};
|
||||||
|
Avatar = __decorate([
|
||||||
|
wxComponent()
|
||||||
|
], Avatar);
|
||||||
|
export default Avatar;
|
||||||
@ -0,0 +1,8 @@
|
|||||||
|
{
|
||||||
|
"component": true,
|
||||||
|
"usingComponents": {
|
||||||
|
"t-icon": "../icon/icon",
|
||||||
|
"t-badge": "../badge/badge",
|
||||||
|
"t-image": "../image/image"
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,54 @@
|
|||||||
|
<import src="../common/template/icon.wxml" />
|
||||||
|
<wxs src="../common/utils.wxs" module="_" />
|
||||||
|
<wxs src="./avatar.wxs" module="this" />
|
||||||
|
|
||||||
|
<view
|
||||||
|
class="{{classPrefix}}__wrapper class {{prefix}}-class"
|
||||||
|
style="{{_._style([this.getStyles(isShow, zIndex), style, customStyle])}}"
|
||||||
|
>
|
||||||
|
<t-badge
|
||||||
|
color="{{badgeProps.color || ''}}"
|
||||||
|
content="{{badgeProps.content || ''}}"
|
||||||
|
count="{{badgeProps.count || 0}}"
|
||||||
|
dot="{{badgeProps.dot || false}}"
|
||||||
|
max-count="{{badgeProps.maxCount || 99}}"
|
||||||
|
offset="{{badgeProps.offset || []}}"
|
||||||
|
shape="{{badgeProps.shape || 'circle'}}"
|
||||||
|
show-zero="{{badgeProps.showZero || false}}"
|
||||||
|
size="{{badgeProps.size || 'medium'}}"
|
||||||
|
t-class="{{badgeProps.tClass}}"
|
||||||
|
t-class-content="{{badgeProps.tClassContent}}"
|
||||||
|
t-class-count="{{badgeProps.tClassCount}}"
|
||||||
|
>
|
||||||
|
<view
|
||||||
|
class="{{this.getClass(classPrefix, size, shape, bordered)}} {{prefix}}-class-image"
|
||||||
|
style="{{this.getSize(size)}}"
|
||||||
|
aria-label="{{ ariaLabel || alt ||'头像'}}"
|
||||||
|
aria-role="{{ ariaRole || 'img'}}"
|
||||||
|
aria-hidden="{{ ariaHidden }}"
|
||||||
|
>
|
||||||
|
<t-image
|
||||||
|
wx:if="{{image}}"
|
||||||
|
t-class="{{prefix}}-image {{classPrefix}}__image"
|
||||||
|
t-class-load="{{prefix}}-class-alt"
|
||||||
|
style="{{imageProps.style || ''}}"
|
||||||
|
src="{{image}}"
|
||||||
|
mode="{{imageProps.mode || 'aspectFill'}}"
|
||||||
|
lazy="{{imageProps.lazy || false}}"
|
||||||
|
loading="{{imageProps.loading || 'default'}}"
|
||||||
|
shape="{{imageProps.shape || 'round'}}"
|
||||||
|
webp="{{imageProps.webp || false}}"
|
||||||
|
error="{{alt || 'default'}}"
|
||||||
|
bind:error="onLoadError"
|
||||||
|
/>
|
||||||
|
<template
|
||||||
|
wx:elif="{{iconName || _.isNoEmptyObj(iconData)}}"
|
||||||
|
is="icon"
|
||||||
|
data="{{class: classPrefix + '__icon', tClass: prefix + '-class-icon', name: iconName, ...iconData}}"
|
||||||
|
/>
|
||||||
|
<view wx:else class="{{classPrefix}}__text {{prefix}}-class-content">
|
||||||
|
<slot />
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</t-badge>
|
||||||
|
</view>
|
||||||
@ -0,0 +1,26 @@
|
|||||||
|
module.exports = {
|
||||||
|
getClass: function (classPrefix, size, shape, bordered) {
|
||||||
|
var hasPx = (size || '').indexOf('px') > -1;
|
||||||
|
var borderSize = hasPx ? 'medium' : size;
|
||||||
|
var classNames = [
|
||||||
|
classPrefix,
|
||||||
|
classPrefix + (shape === 'round' ? '--round' : '--circle'),
|
||||||
|
bordered ? classPrefix + '--border' + ' ' + classPrefix + '--border-' + borderSize : '',
|
||||||
|
hasPx ? '' : classPrefix + '--' + size,
|
||||||
|
];
|
||||||
|
return classNames.join(' ');
|
||||||
|
},
|
||||||
|
|
||||||
|
getSize: function (size = 'medium') {
|
||||||
|
var pxIndex = size.indexOf('px');
|
||||||
|
if (pxIndex > -1) {
|
||||||
|
return 'width:' + size + ';height:' + size + ';font-size:' + ((size.slice(0, pxIndex) / 8) * 3 + 2) + 'px;';
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
getStyles: function (isShow, zIndex) {
|
||||||
|
var displayStyle = isShow ? '' : 'display: none;';
|
||||||
|
var zIndexStyle = zIndex ? 'z-index:' + zIndex + ';' : '';
|
||||||
|
return displayStyle + zIndexStyle;
|
||||||
|
},
|
||||||
|
};
|
||||||
@ -0,0 +1,104 @@
|
|||||||
|
.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-avatar {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
box-sizing: border-box;
|
||||||
|
background-color: var(--td-avatar-bg-color, var(--td-brand-color-light-active, var(--td-primary-color-2, #d9e1ff)));
|
||||||
|
color: var(--td-avatar-content-color, var(--td-brand-color, var(--td-primary-color-7, #0052d9)));
|
||||||
|
}
|
||||||
|
.t-avatar__wrapper {
|
||||||
|
display: inline-flex;
|
||||||
|
position: relative;
|
||||||
|
vertical-align: top;
|
||||||
|
margin-left: var(--td-avatar-margin-left, 0);
|
||||||
|
}
|
||||||
|
.t-avatar--large {
|
||||||
|
width: var(--td-avatar-large-width, 128rpx);
|
||||||
|
height: var(--td-avatar-large-width, 128rpx);
|
||||||
|
font-size: var(--td-avatar-text-large-font-size, 16px);
|
||||||
|
}
|
||||||
|
.t-avatar--large .t-avatar__icon {
|
||||||
|
font-size: var(--td-avatar-icon-large-font-size, 64rpx);
|
||||||
|
}
|
||||||
|
.t-avatar--medium {
|
||||||
|
width: var(--td-avatar-medium-width, 96rpx);
|
||||||
|
height: var(--td-avatar-medium-width, 96rpx);
|
||||||
|
font-size: var(--td-avatar-text-medium-font-size, var(--td-font-size-base, 28rpx));
|
||||||
|
}
|
||||||
|
.t-avatar--medium .t-avatar__icon {
|
||||||
|
font-size: var(--td-avatar-icon-medium-font-size, 48rpx);
|
||||||
|
}
|
||||||
|
.t-avatar--small {
|
||||||
|
width: var(--td-avatar-small-width, 80rpx);
|
||||||
|
height: var(--td-avatar-small-width, 80rpx);
|
||||||
|
font-size: var(--td-avatar-text-small-font-size, var(--td-font-size-s, 24rpx));
|
||||||
|
}
|
||||||
|
.t-avatar--small .t-avatar__icon {
|
||||||
|
font-size: var(--td-avatar-icon-small-font-size, 40rpx);
|
||||||
|
}
|
||||||
|
.t-avatar .t-image,
|
||||||
|
.t-avatar__image {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
.t-avatar--circle {
|
||||||
|
border-radius: var(--td-avatar-circle-border-radius, var(--td-radius-circle, 50%));
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
.t-avatar--round {
|
||||||
|
border-radius: var(--td-avatar-round-border-radius, var(--td-radius-default, 12rpx));
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
.t-avatar__text,
|
||||||
|
.t-avatar__icon {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
.t-avatar__text:empty,
|
||||||
|
.t-avatar__icon:empty {
|
||||||
|
width: 0;
|
||||||
|
height: 0;
|
||||||
|
}
|
||||||
|
.t-avatar--border {
|
||||||
|
border-color: var(--td-avatar-border-color, #fff);
|
||||||
|
border-style: solid;
|
||||||
|
}
|
||||||
|
.t-avatar--border-small {
|
||||||
|
border-width: var(--td-avatar-border-width-small, 4rpx);
|
||||||
|
}
|
||||||
|
.t-avatar--border-medium {
|
||||||
|
border-width: var(--td-avatar-border-width-medium, 6rpx);
|
||||||
|
}
|
||||||
|
.t-avatar--border-large {
|
||||||
|
border-width: var(--td-avatar-border-width-large, 8rpx);
|
||||||
|
}
|
||||||
@ -0,0 +1,3 @@
|
|||||||
|
import { TdAvatarProps } from './type';
|
||||||
|
declare const props: TdAvatarProps;
|
||||||
|
export default props;
|
||||||
@ -0,0 +1,39 @@
|
|||||||
|
const props = {
|
||||||
|
alt: {
|
||||||
|
type: String,
|
||||||
|
value: '',
|
||||||
|
},
|
||||||
|
badgeProps: {
|
||||||
|
type: Object,
|
||||||
|
},
|
||||||
|
bordered: {
|
||||||
|
type: Boolean,
|
||||||
|
value: false,
|
||||||
|
},
|
||||||
|
externalClasses: {
|
||||||
|
type: Array,
|
||||||
|
},
|
||||||
|
hideOnLoadFailed: {
|
||||||
|
type: Boolean,
|
||||||
|
value: false,
|
||||||
|
},
|
||||||
|
icon: {
|
||||||
|
type: null,
|
||||||
|
},
|
||||||
|
image: {
|
||||||
|
type: String,
|
||||||
|
value: '',
|
||||||
|
},
|
||||||
|
imageProps: {
|
||||||
|
type: Object,
|
||||||
|
},
|
||||||
|
shape: {
|
||||||
|
type: String,
|
||||||
|
value: 'circle',
|
||||||
|
},
|
||||||
|
size: {
|
||||||
|
type: String,
|
||||||
|
value: 'medium',
|
||||||
|
},
|
||||||
|
};
|
||||||
|
export default props;
|
||||||
@ -0,0 +1,48 @@
|
|||||||
|
import { BadgeProps } from '../badge/index';
|
||||||
|
export interface TdAvatarProps {
|
||||||
|
alt?: {
|
||||||
|
type: StringConstructor;
|
||||||
|
value?: string;
|
||||||
|
};
|
||||||
|
badgeProps?: {
|
||||||
|
type: ObjectConstructor;
|
||||||
|
value?: BadgeProps;
|
||||||
|
};
|
||||||
|
bordered?: {
|
||||||
|
type: BooleanConstructor;
|
||||||
|
value?: boolean;
|
||||||
|
};
|
||||||
|
style?: {
|
||||||
|
type: StringConstructor;
|
||||||
|
value?: string;
|
||||||
|
};
|
||||||
|
externalClasses?: {
|
||||||
|
type: ArrayConstructor;
|
||||||
|
value?: ['t-class', 't-class-image', 't-class-icon', 't-class-alt', 't-class-content'];
|
||||||
|
};
|
||||||
|
hideOnLoadFailed?: {
|
||||||
|
type: BooleanConstructor;
|
||||||
|
value?: boolean;
|
||||||
|
};
|
||||||
|
icon?: {
|
||||||
|
type: null;
|
||||||
|
value?: string | object;
|
||||||
|
};
|
||||||
|
image?: {
|
||||||
|
type: StringConstructor;
|
||||||
|
value?: string;
|
||||||
|
};
|
||||||
|
imageProps?: {
|
||||||
|
type: ObjectConstructor;
|
||||||
|
value?: object;
|
||||||
|
};
|
||||||
|
shape?: {
|
||||||
|
type: StringConstructor;
|
||||||
|
value?: ShapeEnum;
|
||||||
|
};
|
||||||
|
size?: {
|
||||||
|
type: StringConstructor;
|
||||||
|
value?: string;
|
||||||
|
};
|
||||||
|
}
|
||||||
|
export declare type ShapeEnum = 'circle' | 'round';
|
||||||
@ -0,0 +1 @@
|
|||||||
|
export {};
|
||||||
@ -0,0 +1,24 @@
|
|||||||
|
import { SuperComponent, RelationsOptions } from '../common/src/index';
|
||||||
|
export default class BackTop extends SuperComponent {
|
||||||
|
externalClasses: string[];
|
||||||
|
options: {
|
||||||
|
multipleSlots: boolean;
|
||||||
|
};
|
||||||
|
properties: import("./type").TdBackTopProps;
|
||||||
|
relations: RelationsOptions;
|
||||||
|
data: {
|
||||||
|
prefix: string;
|
||||||
|
classPrefix: string;
|
||||||
|
_icon: any;
|
||||||
|
};
|
||||||
|
observers: {
|
||||||
|
icon(): void;
|
||||||
|
};
|
||||||
|
lifetimes: {
|
||||||
|
ready(): void;
|
||||||
|
};
|
||||||
|
methods: {
|
||||||
|
setIcon(v: any): void;
|
||||||
|
toTop(): void;
|
||||||
|
};
|
||||||
|
}
|
||||||
@ -0,0 +1,67 @@
|
|||||||
|
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 { calcIcon } from '../common/utils';
|
||||||
|
const { prefix } = config;
|
||||||
|
const name = `${prefix}-back-top`;
|
||||||
|
let BackTop = class BackTop extends SuperComponent {
|
||||||
|
constructor() {
|
||||||
|
super(...arguments);
|
||||||
|
this.externalClasses = [`${prefix}-class`, `${prefix}-class-icon`, `${prefix}-class-text`];
|
||||||
|
this.options = {
|
||||||
|
multipleSlots: true,
|
||||||
|
};
|
||||||
|
this.properties = props;
|
||||||
|
this.relations = {
|
||||||
|
'../pull-down-refresh/pull-down-refresh': {
|
||||||
|
type: 'ancestor',
|
||||||
|
},
|
||||||
|
};
|
||||||
|
this.data = {
|
||||||
|
prefix,
|
||||||
|
classPrefix: name,
|
||||||
|
_icon: null,
|
||||||
|
};
|
||||||
|
this.observers = {
|
||||||
|
icon() {
|
||||||
|
this.setIcon();
|
||||||
|
},
|
||||||
|
};
|
||||||
|
this.lifetimes = {
|
||||||
|
ready() {
|
||||||
|
const { icon } = this.properties;
|
||||||
|
this.setIcon(icon);
|
||||||
|
},
|
||||||
|
};
|
||||||
|
this.methods = {
|
||||||
|
setIcon(v) {
|
||||||
|
this.setData({
|
||||||
|
_icon: calcIcon(v, 'backtop'),
|
||||||
|
});
|
||||||
|
},
|
||||||
|
toTop() {
|
||||||
|
var _a;
|
||||||
|
this.triggerEvent('to-top');
|
||||||
|
if (this.$parent) {
|
||||||
|
(_a = this.$parent) === null || _a === void 0 ? void 0 : _a.setScrollTop(0);
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
wx.pageScrollTo({
|
||||||
|
scrollTop: 0,
|
||||||
|
duration: 300,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
},
|
||||||
|
};
|
||||||
|
}
|
||||||
|
};
|
||||||
|
BackTop = __decorate([
|
||||||
|
wxComponent()
|
||||||
|
], BackTop);
|
||||||
|
export default BackTop;
|
||||||
@ -0,0 +1,6 @@
|
|||||||
|
{
|
||||||
|
"component": true,
|
||||||
|
"usingComponents": {
|
||||||
|
"t-icon": "../icon/icon"
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,16 @@
|
|||||||
|
<import src="../common/template/icon.wxml" />
|
||||||
|
<wxs src="../common/utils.wxs" module="_" />
|
||||||
|
|
||||||
|
<view
|
||||||
|
style="{{_._style([style, customStyle])}}"
|
||||||
|
class="class {{prefix}}-class {{_.cls(classPrefix, [['fixed', fixed], theme])}}"
|
||||||
|
bindtap="toTop"
|
||||||
|
aria-role="button"
|
||||||
|
>
|
||||||
|
<view class="{{classPrefix}}__icon" aria-hidden>
|
||||||
|
<slot name="icon" />
|
||||||
|
<template wx:if="{{_icon}}" is="icon" data="{{tClass: prefix + '-class-icon', ..._icon }}" />
|
||||||
|
</view>
|
||||||
|
<view wx:if="{{!!text}}" class="{{classPrefix}}__text--{{theme}} {{prefix}}-class-text">{{text}}</view>
|
||||||
|
<slot />
|
||||||
|
</view>
|
||||||
@ -0,0 +1,89 @@
|
|||||||
|
.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-back-top {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
background-color: transparent;
|
||||||
|
overflow: hidden;
|
||||||
|
box-sizing: border-box;
|
||||||
|
transition: height 0.2s;
|
||||||
|
height: auto;
|
||||||
|
}
|
||||||
|
.t-back-top--fixed {
|
||||||
|
position: fixed;
|
||||||
|
right: var(--td-spacer, 16rpx);
|
||||||
|
bottom: var(--td-spacer-2, 32rpx);
|
||||||
|
}
|
||||||
|
.t-back-top--round,
|
||||||
|
.t-back-top--round-dark {
|
||||||
|
width: 96rpx;
|
||||||
|
height: 96rpx;
|
||||||
|
border-radius: var(--td-back-top-round-border-radius, var(--td-radius-circle, 50%));
|
||||||
|
}
|
||||||
|
.t-back-top--round,
|
||||||
|
.t-back-top--half-round {
|
||||||
|
color: var(--td-back-top-round-color, var(--td-font-gray-1, rgba(0, 0, 0, 0.9)));
|
||||||
|
border: 1rpx solid var(--td-back-top-round-border-color, var(--td-component-border, var(--td-gray-color-4, #dcdcdc)));
|
||||||
|
background-color: var(--td-back-top-round-bg-color, var(--td-font-white-1, #ffffff));
|
||||||
|
}
|
||||||
|
.t-back-top--round-dark,
|
||||||
|
.t-back-top--half-round-dark {
|
||||||
|
color: var(--td-back-top-round-dark-color, var(--td-font-white-1, #ffffff));
|
||||||
|
background-color: var(--td-back-top-round-dark-bg-color, var(--td-gray-color-14, #181818));
|
||||||
|
}
|
||||||
|
.t-back-top--half-round,
|
||||||
|
.t-back-top--half-round-dark {
|
||||||
|
width: 120rpx;
|
||||||
|
height: 80rpx;
|
||||||
|
border-radius: var(--td-back-top-half-round-border-radius, var(--td-radius-round, 999px)) 0 0 var(--td-back-top-half-round-border-radius, var(--td-radius-round, 999px));
|
||||||
|
flex-direction: row;
|
||||||
|
right: 0;
|
||||||
|
}
|
||||||
|
.t-back-top__text--round,
|
||||||
|
.t-back-top__text--round-dark,
|
||||||
|
.t-back-top__text--half-round,
|
||||||
|
.t-back-top__text--half-round-dark {
|
||||||
|
font-size: var(--td-font-size, 20rpx);
|
||||||
|
line-height: 24rpx;
|
||||||
|
}
|
||||||
|
.t-back-top__text--half-round,
|
||||||
|
.t-back-top__text--half-round-dark {
|
||||||
|
width: 2em;
|
||||||
|
}
|
||||||
|
.t-back-top__icon:not(:empty) + .t-back-top__text--half-round,
|
||||||
|
.t-back-top__icon:not(:empty) + .t-back-top__text--half-round-dark {
|
||||||
|
margin-left: 8rpx;
|
||||||
|
}
|
||||||
|
.t-back-top__icon {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
font-size: 44rpx;
|
||||||
|
}
|
||||||
@ -0,0 +1,3 @@
|
|||||||
|
import { TdBackTopProps } from './type';
|
||||||
|
declare const props: TdBackTopProps;
|
||||||
|
export default props;
|
||||||
@ -0,0 +1,22 @@
|
|||||||
|
const props = {
|
||||||
|
externalClasses: {
|
||||||
|
type: Array,
|
||||||
|
},
|
||||||
|
fixed: {
|
||||||
|
type: Boolean,
|
||||||
|
value: true,
|
||||||
|
},
|
||||||
|
icon: {
|
||||||
|
type: null,
|
||||||
|
value: true,
|
||||||
|
},
|
||||||
|
text: {
|
||||||
|
type: String,
|
||||||
|
value: '',
|
||||||
|
},
|
||||||
|
theme: {
|
||||||
|
type: String,
|
||||||
|
value: 'round',
|
||||||
|
},
|
||||||
|
};
|
||||||
|
export default props;
|
||||||
@ -0,0 +1,26 @@
|
|||||||
|
export interface TdBackTopProps {
|
||||||
|
style?: {
|
||||||
|
type: StringConstructor;
|
||||||
|
value?: string;
|
||||||
|
};
|
||||||
|
externalClasses?: {
|
||||||
|
type: ArrayConstructor;
|
||||||
|
value?: ['t-class', 't-class-icon', 't-class-text'];
|
||||||
|
};
|
||||||
|
fixed?: {
|
||||||
|
type: BooleanConstructor;
|
||||||
|
value?: boolean;
|
||||||
|
};
|
||||||
|
icon?: {
|
||||||
|
type: null;
|
||||||
|
value?: boolean | string | object;
|
||||||
|
};
|
||||||
|
text?: {
|
||||||
|
type: StringConstructor;
|
||||||
|
value?: string;
|
||||||
|
};
|
||||||
|
theme?: {
|
||||||
|
type: StringConstructor;
|
||||||
|
value?: 'round' | 'half-round' | 'round-dark' | 'half-round-dark';
|
||||||
|
};
|
||||||
|
}
|
||||||
@ -0,0 +1 @@
|
|||||||
|
export {};
|
||||||
@ -0,0 +1,21 @@
|
|||||||
|
import { SuperComponent } from '../common/src/index';
|
||||||
|
import type { TdBadgeProps } from './type';
|
||||||
|
export interface BadgeProps extends TdBadgeProps {
|
||||||
|
}
|
||||||
|
export default class Badge extends SuperComponent {
|
||||||
|
options: {
|
||||||
|
multipleSlots: boolean;
|
||||||
|
};
|
||||||
|
externalClasses: string[];
|
||||||
|
properties: TdBadgeProps;
|
||||||
|
data: {
|
||||||
|
prefix: string;
|
||||||
|
classPrefix: string;
|
||||||
|
value: string;
|
||||||
|
labelID: string;
|
||||||
|
descriptionID: string;
|
||||||
|
};
|
||||||
|
lifetimes: {
|
||||||
|
ready(): void;
|
||||||
|
};
|
||||||
|
}
|
||||||
@ -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';
|
||||||
|
import { uniqueFactory } from '../common/utils';
|
||||||
|
const { prefix } = config;
|
||||||
|
const name = `${prefix}-badge`;
|
||||||
|
const getUniqueID = uniqueFactory('badge');
|
||||||
|
let Badge = class Badge extends SuperComponent {
|
||||||
|
constructor() {
|
||||||
|
super(...arguments);
|
||||||
|
this.options = {
|
||||||
|
multipleSlots: true,
|
||||||
|
};
|
||||||
|
this.externalClasses = [`${prefix}-class`, `${prefix}-class-count`, `${prefix}-class-content`];
|
||||||
|
this.properties = props;
|
||||||
|
this.data = {
|
||||||
|
prefix,
|
||||||
|
classPrefix: name,
|
||||||
|
value: '',
|
||||||
|
labelID: '',
|
||||||
|
descriptionID: '',
|
||||||
|
};
|
||||||
|
this.lifetimes = {
|
||||||
|
ready() {
|
||||||
|
const uniqueID = getUniqueID();
|
||||||
|
this.setData({
|
||||||
|
labelID: `${uniqueID}_label`,
|
||||||
|
descriptionID: `${uniqueID}_description`,
|
||||||
|
});
|
||||||
|
},
|
||||||
|
};
|
||||||
|
}
|
||||||
|
};
|
||||||
|
Badge = __decorate([
|
||||||
|
wxComponent()
|
||||||
|
], Badge);
|
||||||
|
export default Badge;
|
||||||
@ -0,0 +1,5 @@
|
|||||||
|
{
|
||||||
|
"component": true,
|
||||||
|
"usingComponents": {}
|
||||||
|
}
|
||||||
|
|
||||||
@ -0,0 +1,25 @@
|
|||||||
|
<wxs src="./badge.wxs" module="this" />
|
||||||
|
<wxs src="../common/utils.wxs" module="_" />
|
||||||
|
|
||||||
|
<view
|
||||||
|
style="{{_._style([style, customStyle])}}"
|
||||||
|
class="{{this.getBadgeOuterClass({shape})}} class {{prefix}}-class"
|
||||||
|
aria-labelledby="{{labelID}}"
|
||||||
|
aria-describedby="{{descriptionID}}"
|
||||||
|
aria-role="{{ ariaRole || 'option'}}"
|
||||||
|
>
|
||||||
|
<view id="{{labelID}}" class="{{classPrefix}}__content {{prefix}}-class-content" aria-hidden="true">
|
||||||
|
<slot wx:if="{{!content}}" class="{{classPrefix}}__content-slot" />
|
||||||
|
<text wx:else class="{{classPrefix}}__content-text">{{content}}</text>
|
||||||
|
</view>
|
||||||
|
<view
|
||||||
|
wx:if="{{this.isShowBadge({dot,count,showZero})}}"
|
||||||
|
id="{{descriptionID}}"
|
||||||
|
class="{{this.getBadgeInnerClass({dot, size, shape, count})}} {{prefix}}-has-count {{prefix}}-class-count"
|
||||||
|
style="{{this.getBadgeStyles({color, offset})}}"
|
||||||
|
aria-hidden="true"
|
||||||
|
aria-label="{{ ariaLabel || this.getBadgeAriaLabel({dot, count, maxCount}) }}"
|
||||||
|
>{{ this.getBadgeValue({dot, count, maxCount}) }}
|
||||||
|
</view>
|
||||||
|
<slot name="count" />
|
||||||
|
</view>
|
||||||
@ -0,0 +1,84 @@
|
|||||||
|
var getBadgeValue = function (props) {
|
||||||
|
if (props.dot) {
|
||||||
|
return '';
|
||||||
|
}
|
||||||
|
if (isNaN(props.count) || isNaN(props.maxCount)) {
|
||||||
|
return props.count;
|
||||||
|
}
|
||||||
|
return parseInt(props.count) > props.maxCount ? props.maxCount + '+' : props.count;
|
||||||
|
};
|
||||||
|
|
||||||
|
var hasUnit = function (unit) {
|
||||||
|
return (
|
||||||
|
unit.indexOf('px') > 0 ||
|
||||||
|
unit.indexOf('rpx') > 0 ||
|
||||||
|
unit.indexOf('em') > 0 ||
|
||||||
|
unit.indexOf('rem') > 0 ||
|
||||||
|
unit.indexOf('%') > 0 ||
|
||||||
|
unit.indexOf('vh') > 0 ||
|
||||||
|
unit.indexOf('vm') > 0
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
var getBadgeStyles = function (props) {
|
||||||
|
var styleStr = '';
|
||||||
|
if (props.color) {
|
||||||
|
styleStr += 'background:' + props.color + ';';
|
||||||
|
}
|
||||||
|
if (props.offset[0]) {
|
||||||
|
styleStr += 'right:' + (hasUnit(props.offset[0].toString()) ? props.offset[0] : props.offset[0] + 'px') + ';';
|
||||||
|
}
|
||||||
|
if (props.offset[1]) {
|
||||||
|
styleStr += 'top:' + (hasUnit(props.offset[1].toString()) ? props.offset[1] : props.offset[1] + 'px') + ';';
|
||||||
|
}
|
||||||
|
return styleStr;
|
||||||
|
};
|
||||||
|
|
||||||
|
var getBadgeOuterClass = function (props) {
|
||||||
|
var baseClass = 't-badge';
|
||||||
|
var classNames = [baseClass, props.shape === 'ribbon' ? baseClass + '__ribbon-outer' : ''];
|
||||||
|
return classNames.join(' ');
|
||||||
|
};
|
||||||
|
|
||||||
|
var getBadgeInnerClass = function (props) {
|
||||||
|
var baseClass = 't-badge';
|
||||||
|
var classNames = [
|
||||||
|
baseClass + '--basic',
|
||||||
|
props.dot ? baseClass + '--dot' : '',
|
||||||
|
baseClass + '--' + props.size,
|
||||||
|
baseClass + '--' + props.shape,
|
||||||
|
!props.dot && props.count ? baseClass + '--count' : '',
|
||||||
|
];
|
||||||
|
return classNames.join(' ');
|
||||||
|
};
|
||||||
|
|
||||||
|
var isShowBadge = function (props) {
|
||||||
|
if (props.dot) {
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
if (!props.showZero && !isNaN(props.count) && parseInt(props.count) === 0) {
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
if (props.count == null) return false;
|
||||||
|
return true;
|
||||||
|
};
|
||||||
|
|
||||||
|
var getBadgeAriaLabel = function (props) {
|
||||||
|
if (props.dot) {
|
||||||
|
return '有新的消息';
|
||||||
|
}
|
||||||
|
if (isNaN(props.count) || isNaN(props.maxCount)) {
|
||||||
|
var str = '有' + props.count + '通知';
|
||||||
|
return str;
|
||||||
|
}
|
||||||
|
var str1 = '有' + props.maxCount + '+条消息';
|
||||||
|
var str2 = '有' + props.count + '条消息';
|
||||||
|
return parseInt(props.count) > props.maxCount ? str1 : str2;
|
||||||
|
};
|
||||||
|
|
||||||
|
module.exports.getBadgeValue = getBadgeValue;
|
||||||
|
module.exports.getBadgeStyles = getBadgeStyles;
|
||||||
|
module.exports.getBadgeOuterClass = getBadgeOuterClass;
|
||||||
|
module.exports.getBadgeInnerClass = getBadgeInnerClass;
|
||||||
|
module.exports.getBadgeAriaLabel = getBadgeAriaLabel;
|
||||||
|
module.exports.isShowBadge = isShowBadge;
|
||||||
@ -0,0 +1,111 @@
|
|||||||
|
.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-badge {
|
||||||
|
position: relative;
|
||||||
|
display: inline-block;
|
||||||
|
vertical-align: top;
|
||||||
|
}
|
||||||
|
.t-badge--basic {
|
||||||
|
z-index: 100;
|
||||||
|
padding: 0 var(--td-badge-basic-padding, 8rpx);
|
||||||
|
font-size: var(--td-badge-font-size, var(--td-font-size-xs, var(--td-font-size, 20rpx)));
|
||||||
|
color: var(--td-badge-text-color, var(--td-font-white-1, #ffffff));
|
||||||
|
background-color: var(--td-badge-bg-color, var(--td-error-color, var(--td-error-color-6, #d54941)));
|
||||||
|
text-align: center;
|
||||||
|
height: var(--td-badge-basic-height, 32rpx);
|
||||||
|
line-height: var(--td-badge-basic-height, 32rpx);
|
||||||
|
font-weight: var(--td-badge-font-weight, 600);
|
||||||
|
border-radius: var(--td-badge-border-radius, 4rpx);
|
||||||
|
}
|
||||||
|
.t-badge--dot {
|
||||||
|
height: var(--td-badge-dot-size, 16rpx);
|
||||||
|
border-radius: 50%;
|
||||||
|
min-width: var(--td-badge-dot-size, 16rpx);
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
.t-badge--count {
|
||||||
|
min-width: var(--td-badge-basic-width, 32rpx);
|
||||||
|
white-space: nowrap;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
.t-badge--circle {
|
||||||
|
border-radius: calc(var(--td-badge-basic-height, 32rpx) / 2);
|
||||||
|
}
|
||||||
|
.t-badge__ribbon-outer {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
right: 0;
|
||||||
|
}
|
||||||
|
.t-badge--ribbon {
|
||||||
|
display: inline-block;
|
||||||
|
transform: rotate(45deg);
|
||||||
|
border-radius: 0;
|
||||||
|
}
|
||||||
|
.t-badge--ribbon::before {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
width: 0;
|
||||||
|
height: 0;
|
||||||
|
bottom: 0;
|
||||||
|
left: calc(-1 * var(--td-badge-basic-height, 32rpx) + 1rpx);
|
||||||
|
border-bottom: var(--td-badge-basic-height, 32rpx) solid var(--td-badge-bg-color, var(--td-error-color, var(--td-error-color-6, #d54941)));
|
||||||
|
border-left: var(--td-badge-basic-height, 32rpx) solid transparent;
|
||||||
|
}
|
||||||
|
.t-badge--ribbon::after {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
width: 0;
|
||||||
|
height: 0;
|
||||||
|
bottom: 0;
|
||||||
|
right: calc(-1 * var(--td-badge-basic-height, 32rpx) + 1rpx);
|
||||||
|
border-bottom: var(--td-badge-basic-height, 32rpx) solid var(--td-badge-bg-color, var(--td-error-color, var(--td-error-color-6, #d54941)));
|
||||||
|
border-right: var(--td-badge-basic-height, 32rpx) solid transparent;
|
||||||
|
}
|
||||||
|
.t-badge--bubble {
|
||||||
|
border-radius: var(--td-badge-bubble-border-radius, 20rpx 20rpx 20rpx 1px);
|
||||||
|
}
|
||||||
|
.t-badge--large {
|
||||||
|
font-size: var(--td-badge-large-font-size, var(--td-font-size-s, 24rpx));
|
||||||
|
height: var(--td-badge-large-height, 40rpx);
|
||||||
|
min-width: var(--td-badge-large-height, 40rpx);
|
||||||
|
line-height: var(--td-badge-large-height, 40rpx);
|
||||||
|
padding: 0 var(--td-badge-large-padding, 10rpx);
|
||||||
|
}
|
||||||
|
.t-badge--large.t-badge--circle {
|
||||||
|
border-radius: calc(var(--td-badge-large-height, 40rpx) / 2);
|
||||||
|
}
|
||||||
|
.t-badge__content:not(:empty) + .t-has-count {
|
||||||
|
transform: translate(50%, -50%);
|
||||||
|
position: absolute;
|
||||||
|
right: 0;
|
||||||
|
top: 0;
|
||||||
|
}
|
||||||
|
.t-badge__content-text {
|
||||||
|
display: block;
|
||||||
|
line-height: 48rpx;
|
||||||
|
}
|
||||||
@ -0,0 +1,3 @@
|
|||||||
|
export * from './type';
|
||||||
|
export * from './props';
|
||||||
|
export * from './badge';
|
||||||
@ -0,0 +1,3 @@
|
|||||||
|
export * from './type';
|
||||||
|
export * from './props';
|
||||||
|
export * from './badge';
|
||||||
@ -0,0 +1,3 @@
|
|||||||
|
import { TdBadgeProps } from './type';
|
||||||
|
declare const props: TdBadgeProps;
|
||||||
|
export default props;
|
||||||
@ -0,0 +1,41 @@
|
|||||||
|
const props = {
|
||||||
|
color: {
|
||||||
|
type: String,
|
||||||
|
value: '',
|
||||||
|
},
|
||||||
|
content: {
|
||||||
|
type: String,
|
||||||
|
value: '',
|
||||||
|
},
|
||||||
|
count: {
|
||||||
|
type: null,
|
||||||
|
value: 0,
|
||||||
|
},
|
||||||
|
dot: {
|
||||||
|
type: Boolean,
|
||||||
|
value: false,
|
||||||
|
},
|
||||||
|
externalClasses: {
|
||||||
|
type: Array,
|
||||||
|
},
|
||||||
|
maxCount: {
|
||||||
|
type: Number,
|
||||||
|
value: 99,
|
||||||
|
},
|
||||||
|
offset: {
|
||||||
|
type: Array,
|
||||||
|
},
|
||||||
|
shape: {
|
||||||
|
type: String,
|
||||||
|
value: 'circle',
|
||||||
|
},
|
||||||
|
showZero: {
|
||||||
|
type: Boolean,
|
||||||
|
value: false,
|
||||||
|
},
|
||||||
|
size: {
|
||||||
|
type: String,
|
||||||
|
value: 'medium',
|
||||||
|
},
|
||||||
|
};
|
||||||
|
export default props;
|
||||||
@ -0,0 +1,46 @@
|
|||||||
|
export interface TdBadgeProps {
|
||||||
|
color?: {
|
||||||
|
type: StringConstructor;
|
||||||
|
value?: string;
|
||||||
|
};
|
||||||
|
content?: {
|
||||||
|
type: StringConstructor;
|
||||||
|
value?: string;
|
||||||
|
};
|
||||||
|
count?: {
|
||||||
|
type: null;
|
||||||
|
value?: string | number;
|
||||||
|
};
|
||||||
|
style?: {
|
||||||
|
type: StringConstructor;
|
||||||
|
value?: string;
|
||||||
|
};
|
||||||
|
dot?: {
|
||||||
|
type: BooleanConstructor;
|
||||||
|
value?: boolean;
|
||||||
|
};
|
||||||
|
externalClasses?: {
|
||||||
|
type: ArrayConstructor;
|
||||||
|
value?: ['t-class', 't-class-content', 't-class-count'];
|
||||||
|
};
|
||||||
|
maxCount?: {
|
||||||
|
type: NumberConstructor;
|
||||||
|
value?: number;
|
||||||
|
};
|
||||||
|
offset?: {
|
||||||
|
type: ArrayConstructor;
|
||||||
|
value?: Array<string | number>;
|
||||||
|
};
|
||||||
|
shape?: {
|
||||||
|
type: StringConstructor;
|
||||||
|
value?: 'circle' | 'round' | 'ribbon' | 'bubble';
|
||||||
|
};
|
||||||
|
showZero?: {
|
||||||
|
type: BooleanConstructor;
|
||||||
|
value?: boolean;
|
||||||
|
};
|
||||||
|
size?: {
|
||||||
|
type: StringConstructor;
|
||||||
|
value?: 'small' | 'medium';
|
||||||
|
};
|
||||||
|
}
|
||||||
@ -0,0 +1 @@
|
|||||||
|
export {};
|
||||||
@ -0,0 +1,32 @@
|
|||||||
|
import { SuperComponent } from '../common/src/index';
|
||||||
|
import type { TdButtonProps } from './type';
|
||||||
|
export interface ButtonProps extends TdButtonProps {
|
||||||
|
}
|
||||||
|
export default class Button extends SuperComponent {
|
||||||
|
externalClasses: string[];
|
||||||
|
behaviors: string[];
|
||||||
|
properties: TdButtonProps;
|
||||||
|
data: {
|
||||||
|
prefix: string;
|
||||||
|
className: string;
|
||||||
|
classPrefix: string;
|
||||||
|
};
|
||||||
|
observers: {
|
||||||
|
'theme, size, plain, block, shape, disabled, loading'(): void;
|
||||||
|
icon(icon: any): void;
|
||||||
|
};
|
||||||
|
lifetimes: {
|
||||||
|
attached(): void;
|
||||||
|
};
|
||||||
|
methods: {
|
||||||
|
setClass(): void;
|
||||||
|
getuserinfo(e: any): void;
|
||||||
|
contact(e: any): void;
|
||||||
|
getphonenumber(e: any): void;
|
||||||
|
error(e: any): void;
|
||||||
|
opensetting(e: any): void;
|
||||||
|
launchapp(e: any): void;
|
||||||
|
chooseavatar(e: any): void;
|
||||||
|
handleTap(e: any): void;
|
||||||
|
};
|
||||||
|
}
|
||||||
@ -0,0 +1,94 @@
|
|||||||
|
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 { canIUseFormFieldButton } from '../common/version';
|
||||||
|
import { setIcon } from '../common/utils';
|
||||||
|
const { prefix } = config;
|
||||||
|
const name = `${prefix}-button`;
|
||||||
|
let Button = class Button extends SuperComponent {
|
||||||
|
constructor() {
|
||||||
|
super(...arguments);
|
||||||
|
this.externalClasses = [`${prefix}-class`, `${prefix}-class-icon`, `${prefix}-class-loading`];
|
||||||
|
this.behaviors = canIUseFormFieldButton() ? ['wx://form-field-button'] : [];
|
||||||
|
this.properties = props;
|
||||||
|
this.data = {
|
||||||
|
prefix,
|
||||||
|
className: '',
|
||||||
|
classPrefix: name,
|
||||||
|
};
|
||||||
|
this.observers = {
|
||||||
|
'theme, size, plain, block, shape, disabled, loading'() {
|
||||||
|
this.setClass();
|
||||||
|
},
|
||||||
|
icon(icon) {
|
||||||
|
const obj = setIcon('icon', icon, '');
|
||||||
|
this.setData(Object.assign({}, obj));
|
||||||
|
},
|
||||||
|
};
|
||||||
|
this.lifetimes = {
|
||||||
|
attached() {
|
||||||
|
this.setClass();
|
||||||
|
},
|
||||||
|
};
|
||||||
|
this.methods = {
|
||||||
|
setClass() {
|
||||||
|
const classList = [
|
||||||
|
name,
|
||||||
|
`${prefix}-class`,
|
||||||
|
`${name}--${this.data.variant || 'base'}`,
|
||||||
|
`${name}--${this.data.theme || 'default'}`,
|
||||||
|
`${name}--${this.data.shape || 'rectangle'}`,
|
||||||
|
`${name}--size-${this.data.size || 'medium'}`,
|
||||||
|
];
|
||||||
|
if (this.data.block) {
|
||||||
|
classList.push(`${name}--block`);
|
||||||
|
}
|
||||||
|
if (this.data.disabled) {
|
||||||
|
classList.push(`${name}--disabled`);
|
||||||
|
}
|
||||||
|
if (this.data.ghost) {
|
||||||
|
classList.push(`${name}--ghost`);
|
||||||
|
}
|
||||||
|
this.setData({
|
||||||
|
className: classList.join(' '),
|
||||||
|
});
|
||||||
|
},
|
||||||
|
getuserinfo(e) {
|
||||||
|
this.triggerEvent('getuserinfo', e.detail);
|
||||||
|
},
|
||||||
|
contact(e) {
|
||||||
|
this.triggerEvent('contact', e.detail);
|
||||||
|
},
|
||||||
|
getphonenumber(e) {
|
||||||
|
this.triggerEvent('getphonenumber', e.detail);
|
||||||
|
},
|
||||||
|
error(e) {
|
||||||
|
this.triggerEvent('error', e.detail);
|
||||||
|
},
|
||||||
|
opensetting(e) {
|
||||||
|
this.triggerEvent('opensetting', e.detail);
|
||||||
|
},
|
||||||
|
launchapp(e) {
|
||||||
|
this.triggerEvent('launchapp', e.detail);
|
||||||
|
},
|
||||||
|
chooseavatar(e) {
|
||||||
|
this.triggerEvent('chooseavatar', e.detail);
|
||||||
|
},
|
||||||
|
handleTap(e) {
|
||||||
|
if (this.data.disabled)
|
||||||
|
return;
|
||||||
|
this.triggerEvent('tap', e);
|
||||||
|
},
|
||||||
|
};
|
||||||
|
}
|
||||||
|
};
|
||||||
|
Button = __decorate([
|
||||||
|
wxComponent()
|
||||||
|
], Button);
|
||||||
|
export default Button;
|
||||||
@ -0,0 +1,7 @@
|
|||||||
|
{
|
||||||
|
"component": true,
|
||||||
|
"usingComponents": {
|
||||||
|
"t-icon": "../icon/icon",
|
||||||
|
"t-loading": "../loading/loading"
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,59 @@
|
|||||||
|
<import src="../common/template/icon.wxml" />
|
||||||
|
<wxs src="../common/utils.wxs" module="_" />
|
||||||
|
|
||||||
|
<button
|
||||||
|
style="{{_._style([style, customStyle])}}"
|
||||||
|
data-custom="{{ customDataset }}"
|
||||||
|
class="class {{className}}"
|
||||||
|
form-type="{{type}}"
|
||||||
|
open-type="{{disabled ? '' : openType}}"
|
||||||
|
hover-stop-propagation="{{hoverStopPropagation}}"
|
||||||
|
hover-start-time="{{hoverStartTime}}"
|
||||||
|
hover-stay-time="{{hoverStayTime}}"
|
||||||
|
lang="{{lang}}"
|
||||||
|
session-from="{{sessionFrom}}"
|
||||||
|
hover-class="{{disabled ? '' : classPrefix + '--hover'}}"
|
||||||
|
send-message-title="{{sendMessageTitle}}"
|
||||||
|
send-message-path="{{sendMessagePath}}"
|
||||||
|
send-message-img="{{sendMessageImg}}"
|
||||||
|
app-parameter="{{appParameter}}"
|
||||||
|
show-message-card="{{showMessageCard}}"
|
||||||
|
catch:tap="handleTap"
|
||||||
|
bind:getuserinfo="getuserinfo"
|
||||||
|
bind:contact="contact"
|
||||||
|
bind:getphonenumber="getphonenumber"
|
||||||
|
bind:error="error"
|
||||||
|
bind:opensetting="opensetting"
|
||||||
|
bind:launchapp="launchapp"
|
||||||
|
bind:chooseavatar="chooseavatar"
|
||||||
|
aria-label="{{ariaLabel}}"
|
||||||
|
>
|
||||||
|
<template
|
||||||
|
wx:if="{{iconName || _.isNoEmptyObj(iconData)}}"
|
||||||
|
is="icon"
|
||||||
|
data="{{class: classPrefix + '__icon', tClass: prefix + '-class-icon', ariaHidden: true, name: iconName, ...iconData}}"
|
||||||
|
/>
|
||||||
|
<t-loading
|
||||||
|
wx:if="{{loading}}"
|
||||||
|
delay="{{loadingProps.delay || 0}}"
|
||||||
|
duration="{{loadingProps.duration || 800}}"
|
||||||
|
indicator="{{loadingProps.indicator || true}}"
|
||||||
|
inheritColor="{{loadingProps.indicator || false}}"
|
||||||
|
layout="{{loadingProps.layout || 'horizontal'}}"
|
||||||
|
pause="{{loadingProps.pause || false}}"
|
||||||
|
progress="{{loadingProps.progress || 0}}"
|
||||||
|
reverse="{{loadingProps.reverse || false}}"
|
||||||
|
size="{{loadingProps.size || '40rpx'}}"
|
||||||
|
text="{{loadingProps.text || '' }}"
|
||||||
|
theme="{{loadingProps.theme || 'circular'}}"
|
||||||
|
loading
|
||||||
|
t-class="{{classPrefix}}__loading {{classPrefix}}__loading--wrapper"
|
||||||
|
t-class-indicator="{{classPrefix}}__loading--indicator {{prefix}}-class-loading"
|
||||||
|
/>
|
||||||
|
<view class="{{classPrefix}}__content">
|
||||||
|
<slot name="content" />
|
||||||
|
<block>{{content}}</block>
|
||||||
|
<slot />
|
||||||
|
</view>
|
||||||
|
<slot name="suffix" />
|
||||||
|
</button>
|
||||||
@ -0,0 +1,451 @@
|
|||||||
|
.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-button--size-extra-small {
|
||||||
|
font-size: var(--td-button-extra-small-font-size, var(--td-font-size-base, 28rpx));
|
||||||
|
padding-left: var(--td-button-extra-small-padding-horizontal, 16rpx);
|
||||||
|
padding-right: var(--td-button-extra-small-padding-horizontal, 16rpx);
|
||||||
|
height: var(--td-button-extra-small-height, 56rpx);
|
||||||
|
line-height: var(--td-button-extra-small-height, 56rpx);
|
||||||
|
}
|
||||||
|
.t-button--size-extra-small .t-button__icon {
|
||||||
|
font-size: var(--td-button-extra-small-icon-font-size, 36rpx);
|
||||||
|
}
|
||||||
|
.t-button--size-small {
|
||||||
|
font-size: var(--td-button-small-font-size, var(--td-font-size-base, 28rpx));
|
||||||
|
padding-left: var(--td-button-small-padding-horizontal, 24rpx);
|
||||||
|
padding-right: var(--td-button-small-padding-horizontal, 24rpx);
|
||||||
|
height: var(--td-button-small-height, 64rpx);
|
||||||
|
line-height: var(--td-button-small-height, 64rpx);
|
||||||
|
}
|
||||||
|
.t-button--size-small .t-button__icon {
|
||||||
|
font-size: var(--td-button-small-icon-font-size, 36rpx);
|
||||||
|
}
|
||||||
|
.t-button--size-medium {
|
||||||
|
font-size: var(--td-button-medium-font-size, var(--td-font-size-m, 32rpx));
|
||||||
|
padding-left: var(--td-button-medium-padding-horizontal, 32rpx);
|
||||||
|
padding-right: var(--td-button-medium-padding-horizontal, 32rpx);
|
||||||
|
height: var(--td-button-medium-height, 80rpx);
|
||||||
|
line-height: var(--td-button-medium-height, 80rpx);
|
||||||
|
}
|
||||||
|
.t-button--size-medium .t-button__icon {
|
||||||
|
font-size: var(--td-button-medium-icon-font-size, 40rpx);
|
||||||
|
}
|
||||||
|
.t-button--size-large {
|
||||||
|
font-size: var(--td-button-large-font-size, var(--td-font-size-m, 32rpx));
|
||||||
|
padding-left: var(--td-button-large-padding-horizontal, 40rpx);
|
||||||
|
padding-right: var(--td-button-large-padding-horizontal, 40rpx);
|
||||||
|
height: var(--td-button-large-height, 96rpx);
|
||||||
|
line-height: var(--td-button-large-height, 96rpx);
|
||||||
|
}
|
||||||
|
.t-button--size-large .t-button__icon {
|
||||||
|
font-size: var(--td-button-large-icon-font-size, 48rpx);
|
||||||
|
}
|
||||||
|
.t-button--default {
|
||||||
|
color: var(--td-button-default-color, var(--td-font-gray-1, rgba(0, 0, 0, 0.9)));
|
||||||
|
background-color: var(--td-button-default-bg-color, var(--td-bg-color-component, var(--td-gray-color-3, #e7e7e7)));
|
||||||
|
}
|
||||||
|
.t-button--default::after {
|
||||||
|
border-width: var(--td-button-border-width, 4rpx);
|
||||||
|
border-color: var(--td-button-default-border-color, var(--td-bg-color-component, var(--td-gray-color-3, #e7e7e7)));
|
||||||
|
}
|
||||||
|
.t-button--default.t-button--hover {
|
||||||
|
z-index: 0;
|
||||||
|
}
|
||||||
|
.t-button--default.t-button--hover::after {
|
||||||
|
background-color: var(--td-button-default-active-bg-color, var(--td-bg-color-component-active, var(--td-gray-color-6, #a6a6a6)));
|
||||||
|
border-color: var(--td-button-default-active-border-color, var(--td-bg-color-component-active, var(--td-gray-color-6, #a6a6a6)));
|
||||||
|
}
|
||||||
|
.t-button--default.t-button--disabled {
|
||||||
|
color: var(--td-button-default-disabled-color, var(--td-font-gray-4, rgba(0, 0, 0, 0.26)));
|
||||||
|
background-color: var(--td-button-default-disabled-bg, var(--td-bg-color-component-disabled, var(--td-gray-color-2, #eeeeee)));
|
||||||
|
}
|
||||||
|
.t-button--default.t-button--disabled::after {
|
||||||
|
border-color: var(--td-button-default-disabled-border-color, var(--td-bg-color-component-disabled, var(--td-gray-color-2, #eeeeee)));
|
||||||
|
}
|
||||||
|
.t-button--primary {
|
||||||
|
color: var(--td-button-primary-color, var(--td-font-white-1, #ffffff));
|
||||||
|
background-color: var(--td-button-primary-bg-color, var(--td-brand-color, var(--td-primary-color-7, #0052d9)));
|
||||||
|
}
|
||||||
|
.t-button--primary::after {
|
||||||
|
border-width: var(--td-button-border-width, 4rpx);
|
||||||
|
border-color: var(--td-button-primary-border-color, var(--td-brand-color, var(--td-primary-color-7, #0052d9)));
|
||||||
|
}
|
||||||
|
.t-button--primary.t-button--hover {
|
||||||
|
z-index: 0;
|
||||||
|
}
|
||||||
|
.t-button--primary.t-button--hover::after {
|
||||||
|
background-color: var(--td-button-primary-active-bg-color, var(--td-brand-color-active, var(--td-primary-color-8, #003cab)));
|
||||||
|
border-color: var(--td-button-primary-active-border-color, var(--td-brand-color-active, var(--td-primary-color-8, #003cab)));
|
||||||
|
}
|
||||||
|
.t-button--primary.t-button--disabled {
|
||||||
|
color: var(--td-button-primary-disabled-color, var(--td-font-white-1, #ffffff));
|
||||||
|
background-color: var(--td-button-primary-disabled-bg, var(--td-brand-color-disabled, var(--td-primary-color-3, #b5c7ff)));
|
||||||
|
}
|
||||||
|
.t-button--primary.t-button--disabled::after {
|
||||||
|
border-color: var(--td-button-primary-disabled-border-color, var(--td-brand-color-disabled, var(--td-primary-color-3, #b5c7ff)));
|
||||||
|
}
|
||||||
|
.t-button--light {
|
||||||
|
color: var(--td-button-light-color, var(--td-brand-color, var(--td-primary-color-7, #0052d9)));
|
||||||
|
background-color: var(--td-button-light-bg-color, var(--td-brand-color-light, var(--td-primary-color-1, #f2f3ff)));
|
||||||
|
}
|
||||||
|
.t-button--light::after {
|
||||||
|
border-width: var(--td-button-border-width, 4rpx);
|
||||||
|
border-color: var(--td-button-light-border-color, var(--td-brand-color-light, var(--td-primary-color-1, #f2f3ff)));
|
||||||
|
}
|
||||||
|
.t-button--light.t-button--hover {
|
||||||
|
z-index: 0;
|
||||||
|
}
|
||||||
|
.t-button--light.t-button--hover::after {
|
||||||
|
background-color: var(--td-button-light-active-bg-color, var(--td-brand-color-light-active, var(--td-primary-color-2, #d9e1ff)));
|
||||||
|
border-color: var(--td-button-light-active-border-color, var(--td-brand-color-light-active, var(--td-primary-color-2, #d9e1ff)));
|
||||||
|
}
|
||||||
|
.t-button--light.t-button--disabled {
|
||||||
|
color: var(--td-button-light-disabled-color, var(--td-brand-color-disabled, var(--td-primary-color-3, #b5c7ff)));
|
||||||
|
background-color: var(--td-button-light-disabled-bg, var(--td-brand-color-light, var(--td-primary-color-1, #f2f3ff)));
|
||||||
|
}
|
||||||
|
.t-button--light.t-button--disabled::after {
|
||||||
|
border-color: var(--td-button-light-disabled-border-color, var(--td-brand-color-light, var(--td-primary-color-1, #f2f3ff)));
|
||||||
|
}
|
||||||
|
.t-button--danger {
|
||||||
|
color: var(--td-button-danger-color, var(--td-font-white-1, #ffffff));
|
||||||
|
background-color: var(--td-button-danger-bg-color, var(--td-error-color, var(--td-error-color-6, #d54941)));
|
||||||
|
}
|
||||||
|
.t-button--danger::after {
|
||||||
|
border-width: var(--td-button-border-width, 4rpx);
|
||||||
|
border-color: var(--td-button-danger-border-color, var(--td-error-color, var(--td-error-color-6, #d54941)));
|
||||||
|
}
|
||||||
|
.t-button--danger.t-button--hover {
|
||||||
|
z-index: 0;
|
||||||
|
}
|
||||||
|
.t-button--danger.t-button--hover::after {
|
||||||
|
background-color: var(--td-button-danger-active-bg-color, var(--td-error-color-7, #ad352f));
|
||||||
|
border-color: var(--td-button-danger-active-border-color, var(--td-error-color-7, #ad352f));
|
||||||
|
}
|
||||||
|
.t-button--danger.t-button--disabled {
|
||||||
|
color: var(--td-button-danger-disabled-color, var(--td-font-white-1, #ffffff));
|
||||||
|
background-color: var(--td-button-danger-disabled-bg, var(--td-error-color-3, #ffb9b0));
|
||||||
|
}
|
||||||
|
.t-button--danger.t-button--disabled::after {
|
||||||
|
border-color: var(--td-button-danger-disabled-border-color, var(--td-error-color-3, #ffb9b0));
|
||||||
|
}
|
||||||
|
.t-button {
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
position: relative;
|
||||||
|
white-space: nowrap;
|
||||||
|
text-align: center;
|
||||||
|
background-image: none;
|
||||||
|
transition: all 0.3s;
|
||||||
|
touch-action: manipulation;
|
||||||
|
border-radius: var(--td-button-border-radius, var(--td-radius-default, 12rpx));
|
||||||
|
outline: none;
|
||||||
|
font-family: PingFang SC, Microsoft YaHei, Arial Regular;
|
||||||
|
font-weight: var(--td-button-font-weight, 600);
|
||||||
|
vertical-align: top;
|
||||||
|
cursor: pointer;
|
||||||
|
-webkit-tap-highlight-color: transparent;
|
||||||
|
-webkit-user-select: none;
|
||||||
|
user-select: none;
|
||||||
|
/* stylelint-disable-next-line */
|
||||||
|
-webkit-appearance: none;
|
||||||
|
}
|
||||||
|
.t-button::after {
|
||||||
|
border-radius: calc(var(--td-button-border-radius, var(--td-radius-default, 12rpx)) * 2);
|
||||||
|
}
|
||||||
|
.t-button--text {
|
||||||
|
color: var(--td-button-default-color, var(--td-font-gray-1, rgba(0, 0, 0, 0.9)));
|
||||||
|
background: none;
|
||||||
|
}
|
||||||
|
.t-button--text::after {
|
||||||
|
border: 0;
|
||||||
|
}
|
||||||
|
.t-button--text.t-button--hover::after {
|
||||||
|
background-color: var(--td-button-default-text-active-bg-color, var(--td-bg-color-container-active, var(--td-gray-color-3, #e7e7e7)));
|
||||||
|
}
|
||||||
|
.t-button--text.t-button--primary {
|
||||||
|
color: var(--td-button-primary-text-color, var(--td-brand-color, var(--td-primary-color-7, #0052d9)));
|
||||||
|
background: none;
|
||||||
|
}
|
||||||
|
.t-button--text.t-button--primary.t-button--hover::after {
|
||||||
|
background-color: var(--td-button-primary-text-active-bg-color, var(--td-bg-color-container-active, var(--td-gray-color-3, #e7e7e7)));
|
||||||
|
}
|
||||||
|
.t-button--text.t-button--primary.t-button--disabled {
|
||||||
|
color: var(--td-button-primary-text-disabled-color, var(--td-brand-color-disabled, var(--td-primary-color-3, #b5c7ff)));
|
||||||
|
background: none;
|
||||||
|
}
|
||||||
|
.t-button--text.t-button--danger {
|
||||||
|
color: var(--td-button-danger-text-color, var(--td-error-color, var(--td-error-color-6, #d54941)));
|
||||||
|
background: none;
|
||||||
|
}
|
||||||
|
.t-button--text.t-button--danger.t-button--hover::after {
|
||||||
|
background-color: var(--td-button-danger-text-active-bg-color, var(--td-bg-color-container-active, var(--td-gray-color-3, #e7e7e7)));
|
||||||
|
}
|
||||||
|
.t-button--text.t-button--danger.t-button--disabled {
|
||||||
|
color: var(--td-button-danger-text-disabled-color, var(--td-button-danger-disabled-color, var(--td-font-white-1, #ffffff)));
|
||||||
|
background: none;
|
||||||
|
}
|
||||||
|
.t-button--text.t-button--light {
|
||||||
|
color: var(--td-button-light-text-color, var(--td-brand-color, var(--td-primary-color-7, #0052d9)));
|
||||||
|
background: none;
|
||||||
|
}
|
||||||
|
.t-button--text.t-button--light.t-button--hover::after {
|
||||||
|
background-color: var(--td-button-light-text-active-bg-color, var(--td-bg-color-container-active, var(--td-gray-color-3, #e7e7e7)));
|
||||||
|
}
|
||||||
|
.t-button--text.t-button--disabled {
|
||||||
|
color: var(--td-button-default-disabled-color, var(--td-font-gray-4, rgba(0, 0, 0, 0.26)));
|
||||||
|
}
|
||||||
|
.t-button--ghost {
|
||||||
|
background-color: transparent;
|
||||||
|
color: var(--td-button-ghost-color, var(--td-bg-color-container, var(--td-font-white-1, #ffffff)));
|
||||||
|
}
|
||||||
|
.t-button--ghost::after {
|
||||||
|
border-color: var(--td-button-ghost-border-color, var(--td-button-ghost-color, var(--td-bg-color-container, var(--td-font-white-1, #ffffff))));
|
||||||
|
}
|
||||||
|
.t-button--ghost.t-button--hover::after {
|
||||||
|
background: none;
|
||||||
|
}
|
||||||
|
.t-button--ghost.t-button--primary {
|
||||||
|
color: var(--td-button-ghost-primary-color, var(--td-brand-color, var(--td-primary-color-7, #0052d9)));
|
||||||
|
}
|
||||||
|
.t-button--ghost.t-button--primary::after {
|
||||||
|
border-color: var(--td-button-ghost-primary-border-color, var(--td-brand-color, var(--td-primary-color-7, #0052d9)));
|
||||||
|
}
|
||||||
|
.t-button--ghost.t-button--danger {
|
||||||
|
color: var(--td-button-ghost-danger-color, var(--td-error-color, var(--td-error-color-6, #d54941)));
|
||||||
|
}
|
||||||
|
.t-button--ghost.t-button--danger::after {
|
||||||
|
border-color: var(--td-button-ghost-danger-border-color, var(--td-error-color, var(--td-error-color-6, #d54941)));
|
||||||
|
}
|
||||||
|
.t-button--ghost.t-button--disabled {
|
||||||
|
background-color: transparent;
|
||||||
|
color: var(--td-button-ghost-disabled-color, rgba(255, 255, 255, 0.35));
|
||||||
|
}
|
||||||
|
.t-button--ghost.t-button--disabled::after {
|
||||||
|
border-color: var(--td-button-ghost-disabled-color, rgba(255, 255, 255, 0.35));
|
||||||
|
}
|
||||||
|
.t-button--outline {
|
||||||
|
color: var(--td-button-default-outline-color, var(--td-font-gray-1, rgba(0, 0, 0, 0.9)));
|
||||||
|
background-color: transparent;
|
||||||
|
}
|
||||||
|
.t-button--outline::after {
|
||||||
|
border-color: var(--td-button-default-outline-border-color, var(--td-component-border, var(--td-gray-color-4, #dcdcdc)));
|
||||||
|
}
|
||||||
|
.t-button--outline.t-button--hover::after {
|
||||||
|
background-color: var(--td-button-default-outline-active-bg-color, var(--td-bg-color-container-active, var(--td-gray-color-3, #e7e7e7)));
|
||||||
|
border-color: var(--td-button-default-outline-active-border-color, var(--td-component-border, var(--td-gray-color-4, #dcdcdc)));
|
||||||
|
}
|
||||||
|
.t-button--outline.t-button--disabled {
|
||||||
|
color: var(--td-button-default-outline-disabled-color, var(--td-component-border, var(--td-gray-color-4, #dcdcdc)));
|
||||||
|
}
|
||||||
|
.t-button--outline.t-button--disabled::after {
|
||||||
|
border-color: var(--td-button-default-outline-disabled-color, var(--td-component-border, var(--td-gray-color-4, #dcdcdc)));
|
||||||
|
}
|
||||||
|
.t-button--outline.t-button--primary {
|
||||||
|
color: var(--td-button-primary-outline-color, var(--td-brand-color, var(--td-primary-color-7, #0052d9)));
|
||||||
|
}
|
||||||
|
.t-button--outline.t-button--primary::after {
|
||||||
|
border-color: var(--td-button-primary-outline-border-color, var(--td-button-primary-outline-color, var(--td-brand-color, var(--td-primary-color-7, #0052d9))));
|
||||||
|
}
|
||||||
|
.t-button--outline.t-button--primary.t-button--hover {
|
||||||
|
color: var(--td-button-primary-outline-active-border-color, var(--td-brand-color-active, var(--td-primary-color-8, #003cab)));
|
||||||
|
}
|
||||||
|
.t-button--outline.t-button--primary.t-button--hover::after {
|
||||||
|
background-color: var(--td-button-primary-outline-active-bg-color, var(--td-bg-color-container-active, var(--td-gray-color-3, #e7e7e7)));
|
||||||
|
border-color: var(--td-button-primary-outline-active-border-color, var(--td-brand-color-active, var(--td-primary-color-8, #003cab)));
|
||||||
|
}
|
||||||
|
.t-button--outline.t-button--primary.t-button--disabled {
|
||||||
|
background-color: transparent;
|
||||||
|
color: var(--td-button-primary-outline-disabled-color, var(--td-brand-color-disabled, var(--td-primary-color-3, #b5c7ff)));
|
||||||
|
}
|
||||||
|
.t-button--outline.t-button--primary.t-button--disabled::after {
|
||||||
|
border-color: var(--td-button-primary-outline-disabled-color, var(--td-brand-color-disabled, var(--td-primary-color-3, #b5c7ff)));
|
||||||
|
}
|
||||||
|
.t-button--outline.t-button--danger {
|
||||||
|
color: var(--td-button-danger-outline-color, var(--td-error-color, var(--td-error-color-6, #d54941)));
|
||||||
|
}
|
||||||
|
.t-button--outline.t-button--danger::after {
|
||||||
|
border-color: var(--td-button-danger-outline-border-color, var(--td-button-danger-outline-color, var(--td-error-color, var(--td-error-color-6, #d54941))));
|
||||||
|
}
|
||||||
|
.t-button--outline.t-button--danger.t-button--hover {
|
||||||
|
color: var(--td-button-danger-outline-active-border-color, var(--td-error-color-7, #ad352f));
|
||||||
|
}
|
||||||
|
.t-button--outline.t-button--danger.t-button--hover::after {
|
||||||
|
background-color: var(--td-button-danger-outline-active-bg-color, var(--td-bg-color-container-active, var(--td-gray-color-3, #e7e7e7)));
|
||||||
|
border-color: var(--td-button-danger-outline-active-border-color, var(--td-error-color-7, #ad352f));
|
||||||
|
}
|
||||||
|
.t-button--outline.t-button--danger.t-button--disabled {
|
||||||
|
background-color: transparent;
|
||||||
|
color: var(--td-button-danger-outline-disabled-color, var(--td-error-color-3, #ffb9b0));
|
||||||
|
}
|
||||||
|
.t-button--outline.t-button--danger.t-button--disabled::after {
|
||||||
|
border-color: var(--td-button-danger-outline-disabled-color, var(--td-error-color-3, #ffb9b0));
|
||||||
|
}
|
||||||
|
.t-button--outline.t-button--light {
|
||||||
|
color: var(--td-button-light-outline-color, var(--td-brand-color, var(--td-primary-color-7, #0052d9)));
|
||||||
|
background-color: var(--td-button-light-outline-bg-color, var(--td-brand-color-light, var(--td-primary-color-1, #f2f3ff)));
|
||||||
|
}
|
||||||
|
.t-button--outline.t-button--light::after {
|
||||||
|
border-color: var(--td-button-light-outline-border-color, var(--td-button-light-outline-color, var(--td-brand-color, var(--td-primary-color-7, #0052d9))));
|
||||||
|
}
|
||||||
|
.t-button--outline.t-button--light.t-button--hover {
|
||||||
|
color: var(--td-button-light-outline-active-border-color, var(--td-brand-color-active, var(--td-primary-color-8, #003cab)));
|
||||||
|
}
|
||||||
|
.t-button--outline.t-button--light.t-button--hover::after {
|
||||||
|
background-color: var(--td-button-light-outline-active-bg-color, var(--td-brand-color-light-active, var(--td-primary-color-2, #d9e1ff)));
|
||||||
|
border-color: var(--td-button-light-outline-active-border-color, var(--td-brand-color-active, var(--td-primary-color-8, #003cab)));
|
||||||
|
}
|
||||||
|
.t-button--outline.t-button--light.t-button--disabled {
|
||||||
|
background-color: transparent;
|
||||||
|
color: var(--td-button-light-outline-disabled-color, var(--td-brand-color-disabled, var(--td-primary-color-3, #b5c7ff)));
|
||||||
|
}
|
||||||
|
.t-button--outline.t-button--light.t-button--disabled::after {
|
||||||
|
border-color: var(--td-button-light-outline-disabled-color, var(--td-brand-color-disabled, var(--td-primary-color-3, #b5c7ff)));
|
||||||
|
}
|
||||||
|
.t-button--dashed {
|
||||||
|
background-color: transparent;
|
||||||
|
border-style: dashed;
|
||||||
|
}
|
||||||
|
.t-button--dashed.t-button--primary {
|
||||||
|
color: var(--td-button-primary-dashed-color, var(--td-brand-color, var(--td-primary-color-7, #0052d9)));
|
||||||
|
}
|
||||||
|
.t-button--dashed.t-button--primary::after {
|
||||||
|
border-color: var(--td-button-primary-dashed-border-color, var(--td-button-primary-dashed-color, var(--td-brand-color, var(--td-primary-color-7, #0052d9))));
|
||||||
|
}
|
||||||
|
.t-button--dashed.t-button--primary.t-button--disabled {
|
||||||
|
background-color: transparent;
|
||||||
|
color: var(--td-button-primary-dashed-disabled-color, var(--td-brand-color-disabled, var(--td-primary-color-3, #b5c7ff)));
|
||||||
|
}
|
||||||
|
.t-button--dashed.t-button--primary.t-button--disabled::after {
|
||||||
|
border-color: var(--td-button-primary-dashed-disabled-color, var(--td-brand-color-disabled, var(--td-primary-color-3, #b5c7ff)));
|
||||||
|
}
|
||||||
|
.t-button--dashed.t-button--danger {
|
||||||
|
color: var(--td-button-danger-dashed-color, var(--td-error-color, var(--td-error-color-6, #d54941)));
|
||||||
|
}
|
||||||
|
.t-button--dashed.t-button--danger::after {
|
||||||
|
border-color: var(--td-button-danger-dashed-border-color, var(--td-button-danger-dashed-color, var(--td-error-color, var(--td-error-color-6, #d54941))));
|
||||||
|
}
|
||||||
|
.t-button--dashed.t-button--danger.t-button--disabled {
|
||||||
|
background-color: transparent;
|
||||||
|
color: var(--td-button-danger-dashed-disabled-color, var(--td-button-danger-disabled-color, var(--td-font-white-1, #ffffff)));
|
||||||
|
}
|
||||||
|
.t-button--dashed.t-button--danger.t-button--disabled::after {
|
||||||
|
border-color: var(--td-button-danger-dashed-disabled-color, var(--td-button-danger-disabled-color, var(--td-font-white-1, #ffffff)));
|
||||||
|
}
|
||||||
|
.t-button__loading + .t-button__content:not(:empty),
|
||||||
|
.t-button__icon + .t-button__content:not(:empty) {
|
||||||
|
margin-left: 8rpx;
|
||||||
|
}
|
||||||
|
.t-button__icon {
|
||||||
|
border-radius: var(--td-button-icon-border-radius, 8rpx);
|
||||||
|
}
|
||||||
|
.t-button--round.t-button--size-large {
|
||||||
|
border-radius: calc(var(--td-button-large-height, 96rpx) / 2);
|
||||||
|
}
|
||||||
|
.t-button--round.t-button--size-large::after {
|
||||||
|
border-radius: var(--td-button-large-height, 96rpx);
|
||||||
|
}
|
||||||
|
.t-button--round.t-button--size-medium {
|
||||||
|
border-radius: calc(var(--td-button-medium-height, 80rpx) / 2);
|
||||||
|
}
|
||||||
|
.t-button--round.t-button--size-medium::after {
|
||||||
|
border-radius: var(--td-button-medium-height, 80rpx);
|
||||||
|
}
|
||||||
|
.t-button--round.t-button--size-small {
|
||||||
|
border-radius: calc(var(--td-button-small-height, 64rpx) / 2);
|
||||||
|
}
|
||||||
|
.t-button--round.t-button--size-small::after {
|
||||||
|
border-radius: var(--td-button-small-height, 64rpx);
|
||||||
|
}
|
||||||
|
.t-button--round.t-button--size-extra-small {
|
||||||
|
border-radius: calc(var(--td-button-extra-small-height, 56rpx) / 2);
|
||||||
|
}
|
||||||
|
.t-button--round.t-button--size-extra-small::after {
|
||||||
|
border-radius: var(--td-button-extra-small-height, 56rpx);
|
||||||
|
}
|
||||||
|
.t-button--square {
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
.t-button--square.t-button--size-large {
|
||||||
|
width: var(--td-button-large-height, 96rpx);
|
||||||
|
}
|
||||||
|
.t-button--square.t-button--size-medium {
|
||||||
|
width: var(--td-button-medium-height, 80rpx);
|
||||||
|
}
|
||||||
|
.t-button--square.t-button--size-small {
|
||||||
|
width: var(--td-button-small-height, 64rpx);
|
||||||
|
}
|
||||||
|
.t-button--square.t-button--size-extra-small {
|
||||||
|
width: var(--td-button-extra-small-height, 56rpx);
|
||||||
|
}
|
||||||
|
.t-button--circle {
|
||||||
|
padding: 0;
|
||||||
|
border-radius: 50%;
|
||||||
|
}
|
||||||
|
.t-button--circle.t-button--size-large {
|
||||||
|
width: var(--td-button-large-height, 96rpx);
|
||||||
|
}
|
||||||
|
.t-button--circle.t-button--size-large::after {
|
||||||
|
border-radius: 50%;
|
||||||
|
}
|
||||||
|
.t-button--circle.t-button--size-medium {
|
||||||
|
width: var(--td-button-medium-height, 80rpx);
|
||||||
|
}
|
||||||
|
.t-button--circle.t-button--size-medium::after {
|
||||||
|
border-radius: 50%;
|
||||||
|
}
|
||||||
|
.t-button--circle.t-button--size-small {
|
||||||
|
width: var(--td-button-small-height, 64rpx);
|
||||||
|
}
|
||||||
|
.t-button--circle.t-button--size-small::after {
|
||||||
|
border-radius: 50%;
|
||||||
|
}
|
||||||
|
.t-button--circle.t-button--size-extra-small {
|
||||||
|
width: var(--td-button-extra-small-height, 56rpx);
|
||||||
|
}
|
||||||
|
.t-button--circle.t-button--size-extra-small::after {
|
||||||
|
border-radius: 50%;
|
||||||
|
}
|
||||||
|
.t-button--block {
|
||||||
|
display: flex;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
.t-button--disabled {
|
||||||
|
cursor: not-allowed;
|
||||||
|
}
|
||||||
|
.t-button__loading--wrapper {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
.t-button__loading--indicator {
|
||||||
|
color: var(--td-font-white-1, #ffffff);
|
||||||
|
}
|
||||||
|
.t-button.t-button--hover::after {
|
||||||
|
z-index: -1;
|
||||||
|
}
|
||||||
@ -0,0 +1,3 @@
|
|||||||
|
export * from './props';
|
||||||
|
export * from './type';
|
||||||
|
export * from './button';
|
||||||
@ -0,0 +1,3 @@
|
|||||||
|
export * from './props';
|
||||||
|
export * from './type';
|
||||||
|
export * from './button';
|
||||||
@ -0,0 +1,3 @@
|
|||||||
|
import { TdButtonProps } from './type';
|
||||||
|
declare const props: TdButtonProps;
|
||||||
|
export default props;
|
||||||
@ -0,0 +1,96 @@
|
|||||||
|
const props = {
|
||||||
|
block: {
|
||||||
|
type: Boolean,
|
||||||
|
value: false,
|
||||||
|
},
|
||||||
|
content: {
|
||||||
|
type: String,
|
||||||
|
},
|
||||||
|
customDataset: {
|
||||||
|
type: null,
|
||||||
|
},
|
||||||
|
disabled: {
|
||||||
|
type: Boolean,
|
||||||
|
value: false,
|
||||||
|
},
|
||||||
|
externalClasses: {
|
||||||
|
type: Array,
|
||||||
|
},
|
||||||
|
ghost: {
|
||||||
|
type: Boolean,
|
||||||
|
value: false,
|
||||||
|
},
|
||||||
|
icon: {
|
||||||
|
type: null,
|
||||||
|
},
|
||||||
|
loading: {
|
||||||
|
type: Boolean,
|
||||||
|
value: false,
|
||||||
|
},
|
||||||
|
loadingProps: {
|
||||||
|
type: Object,
|
||||||
|
},
|
||||||
|
shape: {
|
||||||
|
type: String,
|
||||||
|
value: 'rectangle',
|
||||||
|
},
|
||||||
|
size: {
|
||||||
|
type: String,
|
||||||
|
value: 'medium',
|
||||||
|
},
|
||||||
|
theme: {
|
||||||
|
type: String,
|
||||||
|
value: 'default',
|
||||||
|
},
|
||||||
|
type: {
|
||||||
|
type: String,
|
||||||
|
},
|
||||||
|
variant: {
|
||||||
|
type: String,
|
||||||
|
value: 'base',
|
||||||
|
},
|
||||||
|
openType: {
|
||||||
|
type: String,
|
||||||
|
},
|
||||||
|
hoverStopPropagation: {
|
||||||
|
type: Boolean,
|
||||||
|
value: false,
|
||||||
|
},
|
||||||
|
hoverStartTime: {
|
||||||
|
type: Number,
|
||||||
|
value: 20,
|
||||||
|
},
|
||||||
|
hoverStayTime: {
|
||||||
|
type: Number,
|
||||||
|
value: 70,
|
||||||
|
},
|
||||||
|
lang: {
|
||||||
|
type: String,
|
||||||
|
value: 'en',
|
||||||
|
},
|
||||||
|
sessionFrom: {
|
||||||
|
type: String,
|
||||||
|
value: '',
|
||||||
|
},
|
||||||
|
sendMessageTitle: {
|
||||||
|
type: String,
|
||||||
|
value: '',
|
||||||
|
},
|
||||||
|
sendMessagePath: {
|
||||||
|
type: String,
|
||||||
|
value: '',
|
||||||
|
},
|
||||||
|
sendMessageImg: {
|
||||||
|
type: String,
|
||||||
|
value: '',
|
||||||
|
},
|
||||||
|
appParameter: {
|
||||||
|
type: String,
|
||||||
|
value: '',
|
||||||
|
},
|
||||||
|
showMessageCard: {
|
||||||
|
type: Boolean,
|
||||||
|
value: false,
|
||||||
|
},
|
||||||
|
};
|
||||||
|
export default props;
|
||||||
@ -0,0 +1,104 @@
|
|||||||
|
import { LoadingProps } from '../loading/index';
|
||||||
|
import { SizeEnum } from '../common/common';
|
||||||
|
export interface TdButtonProps {
|
||||||
|
block?: {
|
||||||
|
type: BooleanConstructor;
|
||||||
|
value?: boolean;
|
||||||
|
};
|
||||||
|
content?: {
|
||||||
|
type: StringConstructor;
|
||||||
|
value?: string;
|
||||||
|
};
|
||||||
|
customDataset?: {
|
||||||
|
type: ObjectConstructor;
|
||||||
|
value?: any;
|
||||||
|
};
|
||||||
|
disabled?: {
|
||||||
|
type: BooleanConstructor;
|
||||||
|
value?: boolean;
|
||||||
|
};
|
||||||
|
externalClasses?: {
|
||||||
|
type: ArrayConstructor;
|
||||||
|
value?: ['t-class', 't-class-icon', 't-class-loading'];
|
||||||
|
};
|
||||||
|
ghost?: {
|
||||||
|
type: BooleanConstructor;
|
||||||
|
value?: boolean;
|
||||||
|
};
|
||||||
|
icon?: {
|
||||||
|
type: null;
|
||||||
|
value?: string | object;
|
||||||
|
};
|
||||||
|
loading?: {
|
||||||
|
type: BooleanConstructor;
|
||||||
|
value?: boolean;
|
||||||
|
};
|
||||||
|
loadingProps?: {
|
||||||
|
type: ObjectConstructor;
|
||||||
|
value?: LoadingProps;
|
||||||
|
};
|
||||||
|
shape?: {
|
||||||
|
type: StringConstructor;
|
||||||
|
value?: 'rectangle' | 'square' | 'round' | 'circle';
|
||||||
|
};
|
||||||
|
size?: {
|
||||||
|
type: StringConstructor;
|
||||||
|
value?: SizeEnum;
|
||||||
|
};
|
||||||
|
theme?: {
|
||||||
|
type: StringConstructor;
|
||||||
|
value?: 'default' | 'primary' | 'danger';
|
||||||
|
};
|
||||||
|
type?: {
|
||||||
|
type: StringConstructor;
|
||||||
|
value?: 'submit' | 'reset';
|
||||||
|
};
|
||||||
|
variant?: {
|
||||||
|
type: StringConstructor;
|
||||||
|
value?: 'base' | 'outline' | 'text';
|
||||||
|
};
|
||||||
|
openType?: {
|
||||||
|
type: StringConstructor;
|
||||||
|
value?: 'contact' | 'share' | 'getPhoneNumber' | 'getUserInfo' | 'launchApp' | 'openSetting' | 'feedback' | 'chooseAvatar';
|
||||||
|
};
|
||||||
|
hoverStopPropagation?: {
|
||||||
|
type: BooleanConstructor;
|
||||||
|
value?: boolean;
|
||||||
|
};
|
||||||
|
hoverStartTime?: {
|
||||||
|
type: NumberConstructor;
|
||||||
|
value?: number;
|
||||||
|
};
|
||||||
|
hoverStayTime?: {
|
||||||
|
type: NumberConstructor;
|
||||||
|
value?: number;
|
||||||
|
};
|
||||||
|
lang?: {
|
||||||
|
type: StringConstructor;
|
||||||
|
value?: 'en' | 'zh_CN' | 'zh_TW';
|
||||||
|
};
|
||||||
|
sessionFrom?: {
|
||||||
|
type: StringConstructor;
|
||||||
|
value?: string;
|
||||||
|
};
|
||||||
|
sendMessageTitle?: {
|
||||||
|
type: StringConstructor;
|
||||||
|
value?: string;
|
||||||
|
};
|
||||||
|
sendMessagePath?: {
|
||||||
|
type: StringConstructor;
|
||||||
|
value?: string;
|
||||||
|
};
|
||||||
|
sendMessageImg?: {
|
||||||
|
type: StringConstructor;
|
||||||
|
value?: string;
|
||||||
|
};
|
||||||
|
appParameter?: {
|
||||||
|
type: StringConstructor;
|
||||||
|
value?: string;
|
||||||
|
};
|
||||||
|
showMessageCard?: {
|
||||||
|
type: BooleanConstructor;
|
||||||
|
value?: boolean;
|
||||||
|
};
|
||||||
|
}
|
||||||
@ -0,0 +1 @@
|
|||||||
|
export {};
|
||||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in new issue