This commit is contained in:
lik
2026-05-30 21:09:24 +08:00
parent 212c94224b
commit 010cf160a0
1075 changed files with 67487 additions and 1 deletions

View File

@@ -0,0 +1,7 @@
export default class Bus {
listeners: Map<string, any>;
emitted: Set<string>;
constructor();
on(evtName: string, listener: any): void;
emit(evtName: string): void;
}

View File

@@ -0,0 +1,22 @@
export default class Bus {
constructor() {
this.listeners = new Map();
this.emitted = new Set();
}
on(evtName, listener) {
if (this.emitted.has(evtName)) {
listener();
return;
}
const target = this.listeners.get(evtName) || [];
target.push(listener);
this.listeners.set(evtName, target);
}
emit(evtName) {
const listeners = this.listeners.get(evtName);
if (listeners) {
listeners.forEach((func) => func());
}
this.emitted.add(evtName);
}
}

View File

@@ -0,0 +1,56 @@
export declare type Classes = Array<string>;
export interface Styles {
[css: string]: string | number;
}
export declare type ImageEvent = any;
export declare type PlainObject = {
[key: string]: any;
};
export declare type OptionData = {
label?: string;
value?: string | number;
} & PlainObject;
export declare type TreeOptionData<T = string | number> = {
children?: Array<TreeOptionData<T>> | boolean;
label?: string;
text?: string;
value?: T;
content?: string;
} & PlainObject;
export declare type SizeEnum = 'small' | 'medium' | 'large';
export declare type ShapeEnum = 'circle' | 'round';
export declare type HorizontalAlignEnum = 'left' | 'center' | 'right';
export declare type VerticalAlignEnum = 'top' | 'middle' | 'bottom';
export declare type LayoutEnum = 'vertical' | 'horizontal';
export declare type ClassName = {
[className: string]: any;
} | ClassName[] | string;
export declare type CSSSelector = string;
export interface KeysType {
value?: string;
label?: string;
disabled?: string;
}
export interface TreeKeysType extends KeysType {
children?: string;
}
export interface HTMLElementAttributes {
[attribute: string]: string;
}
export interface TScroll {
bufferSize?: number;
isFixedRowHeight?: boolean;
rowHeight?: number;
threshold?: number;
type: 'lazy' | 'virtual';
}
export declare type InfinityScroll = TScroll;
export interface ScrollToElementParams {
index?: number;
top?: number;
time?: number;
behavior?: 'auto' | 'smooth';
}
export interface ComponentScrollToElementParams extends ScrollToElementParams {
key?: string | number;
}

View File

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

View File

@@ -0,0 +1,3 @@
/// <reference types="miniprogram-api-typings" />
declare const TComponent: typeof Component;
export default TComponent;

View File

@@ -0,0 +1,5 @@
const TComponent = (options) => {
options.options = Object.assign({ multipleSlots: true, addGlobalClass: true }, options.options);
return Component(options);
};
export default TComponent;

View File

@@ -0,0 +1,5 @@
declare const _default: {
prefix: string;
};
export default _default;
export declare const prefix = "t";

View File

@@ -0,0 +1,4 @@
export default {
prefix: "t",
};
export const prefix = "t";

View File

@@ -0,0 +1,27 @@
.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);
}

View File

@@ -0,0 +1,19 @@
import type { TDate, TCalendarType, TCalendarValue } from './type';
export default class TCalendar {
firstDayOfWeek: number;
value: TCalendarValue | TCalendarValue[];
type: TCalendarType;
minDate: Date;
maxDate: Date;
format: (day: TDate) => TDate;
constructor(options?: {});
getTrimValue(): Date | Date[];
getDays(weekdays: string[]): any[];
getMonths(): any[];
select({ cellType, year, month, date }: {
cellType: any;
year: any;
month: any;
date: any;
}): Date | TCalendarValue[];
}

View File

@@ -0,0 +1,127 @@
import { getDateRect, isSameDate, getMonthDateRect, isValidDate, getDate } from '../date';
export default class TCalendar {
constructor(options = {}) {
this.type = 'single';
Object.assign(this, options);
if (!this.minDate)
this.minDate = getDate();
if (!this.maxDate)
this.maxDate = getDate(6);
}
getTrimValue() {
const { value, type } = this;
const format = (val) => {
if (val instanceof Date)
return val;
if (typeof val === 'number')
return new Date(val);
return new Date();
};
if (type === 'single' && isValidDate(value))
return format(value);
if (type === 'multiple' || type === 'range') {
if (Array.isArray(value)) {
const isValid = value.every((item) => isValidDate(item));
return isValid ? value.map((item) => format(item)) : [];
}
return [];
}
}
getDays(weekdays) {
const ans = [];
let i = this.firstDayOfWeek % 7;
while (ans.length < 7) {
ans.push(weekdays[i]);
i = (i + 1) % 7;
}
return ans;
}
getMonths() {
const ans = [];
const selectedDate = this.getTrimValue();
const { minDate, maxDate, type, format } = this;
let { year: minYear, month: minMonth, time: minTime } = getDateRect(minDate);
const { year: maxYear, month: maxMonth, time: maxTime } = getDateRect(maxDate);
const calcType = (year, month, date) => {
const curDate = new Date(year, month, date, 23, 59, 59);
if (type === 'single' && selectedDate) {
if (isSameDate({ year, month, date }, selectedDate))
return 'selected';
}
if (type === 'multiple' && selectedDate) {
const hit = selectedDate.some((item) => isSameDate({ year, month, date }, item));
if (hit) {
return 'selected';
}
}
if (type === 'range' && selectedDate) {
if (Array.isArray(selectedDate)) {
const [startDate, endDate] = selectedDate;
if (startDate && isSameDate({ year, month, date }, startDate))
return 'start';
if (endDate && isSameDate({ year, month, date }, endDate))
return 'end';
if (startDate && endDate && curDate.getTime() > startDate.getTime() && curDate.getTime() < endDate.getTime())
return 'centre';
}
}
const minCurDate = new Date(year, month, date, 0, 0, 0);
if (curDate.getTime() < minTime || minCurDate.getTime() > maxTime) {
return 'disabled';
}
return '';
};
while (minYear < maxYear || (minYear === maxYear && minMonth <= maxMonth)) {
const target = getMonthDateRect(new Date(minYear, minMonth, 1));
const months = [];
for (let i = 1; i <= 31; i++) {
if (i > target.lastDate)
break;
const dateObj = {
date: new Date(minYear, minMonth, i),
day: i,
type: calcType(minYear, minMonth, i),
};
months.push(format ? format(dateObj) : dateObj);
}
ans.push({
year: minYear,
month: minMonth,
months,
weekdayOfFirstDay: target.weekdayOfFirstDay,
});
const curDate = getDateRect(new Date(minYear, minMonth + 1, 1));
minYear = curDate.year;
minMonth = curDate.month;
}
return ans;
}
select({ cellType, year, month, date }) {
const { type } = this;
const selectedDate = this.getTrimValue();
if (cellType === 'disabled')
return;
const selected = new Date(year, month, date);
this.value = selected;
if (type === 'range' && Array.isArray(selectedDate)) {
if (selectedDate.length === 1 && selected > selectedDate[0]) {
this.value = [selectedDate[0], selected];
}
else {
this.value = [selected];
}
}
else if (type === 'multiple' && Array.isArray(selectedDate)) {
const newVal = [...selectedDate];
const index = selectedDate.findIndex((item) => isSameDate(item, selected));
if (index > -1) {
newVal.splice(index, 1);
}
else {
newVal.push(selected);
}
this.value = newVal;
}
return this.value;
}
}

View File

@@ -0,0 +1,11 @@
export interface TDate {
date: Date;
day: number;
type: TDateType;
className?: string;
prefix?: string;
suffix?: string;
}
export declare type TCalendarValue = number | Date;
export declare type TDateType = 'selected' | 'disabled' | 'start' | 'centre' | 'end' | '';
export declare type TCalendarType = 'single' | 'multiple' | 'range';

View File

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

View File

@@ -0,0 +1,7 @@
export declare const rgb2cmyk: (red: number, green: number, blue: number) => number[];
export declare const cmyk2rgb: (cyan: number, magenta: number, yellow: number, black: number) => {
r: number;
g: number;
b: number;
};
export declare const cmykInputToColor: (input: string) => string;

View File

@@ -0,0 +1,57 @@
export const rgb2cmyk = (red, green, blue) => {
let computedC = 0;
let computedM = 0;
let computedY = 0;
let computedK = 0;
const r = parseInt(`${red}`.replace(/\s/g, ''), 10);
const g = parseInt(`${green}`.replace(/\s/g, ''), 10);
const b = parseInt(`${blue}`.replace(/\s/g, ''), 10);
if (r === 0 && g === 0 && b === 0) {
computedK = 1;
return [0, 0, 0, 1];
}
computedC = 1 - r / 255;
computedM = 1 - g / 255;
computedY = 1 - b / 255;
const minCMY = Math.min(computedC, Math.min(computedM, computedY));
computedC = (computedC - minCMY) / (1 - minCMY);
computedM = (computedM - minCMY) / (1 - minCMY);
computedY = (computedY - minCMY) / (1 - minCMY);
computedK = minCMY;
return [computedC, computedM, computedY, computedK];
};
export const cmyk2rgb = (cyan, magenta, yellow, black) => {
let c = cyan / 100;
let m = magenta / 100;
let y = yellow / 100;
const k = black / 100;
c = c * (1 - k) + k;
m = m * (1 - k) + k;
y = y * (1 - k) + k;
let r = 1 - c;
let g = 1 - m;
let b = 1 - y;
r = Math.round(255 * r);
g = Math.round(255 * g);
b = Math.round(255 * b);
return {
r,
g,
b,
};
};
const REG_CMYK_STRING = /cmyk\((\d+%?),(\d+%?),(\d+%?),(\d+%?)\)/;
const toNumber = (str) => Math.max(0, Math.min(255, parseInt(str, 10)));
export const cmykInputToColor = (input) => {
if (/cmyk/i.test(input)) {
const str = input.replace(/\s/g, '');
const match = str.match(REG_CMYK_STRING);
const c = toNumber(match[1]);
const m = toNumber(match[2]);
const y = toNumber(match[3]);
const k = toNumber(match[4]);
const { r, g, b } = cmyk2rgb(c, m, y, k);
return `rgb(${r}, ${g}, ${b})`;
}
return input;
};

View File

@@ -0,0 +1,107 @@
import tinyColor from 'tinycolor2';
import { GradientColors, GradientColorPoint } from './gradient';
export interface ColorObject {
alpha: number;
css: string;
hex: string;
hex8: string;
hsl: string;
hsla: string;
hsv: string;
hsva: string;
rgb: string;
rgba: string;
saturation: number;
value: number;
isGradient: boolean;
linearGradient?: string;
}
interface ColorStates {
s: number;
v: number;
h: number;
a: number;
}
interface GradientStates {
colors: GradientColorPoint[];
degree: number;
selectedId: string;
css?: string;
}
export declare const gradientColors2string: (object: GradientColors) => string;
export declare const getColorWithoutAlpha: (color: string) => string;
export declare const genId: () => string;
export declare const genGradientPoint: (left: number, color: string) => GradientColorPoint;
export declare class Color {
states: ColorStates;
originColor: string;
isGradient: boolean;
gradientStates: GradientStates;
constructor(input: string);
update(input: string): void;
get saturation(): number;
set saturation(value: number);
get value(): number;
set value(value: number);
get hue(): number;
set hue(value: number);
get alpha(): number;
set alpha(value: number);
get rgb(): string;
get rgba(): string;
get hsv(): string;
get hsva(): string;
get hsl(): string;
get hsla(): string;
get hex(): string;
get hex8(): string;
get cmyk(): string;
get css(): string;
get linearGradient(): string;
get gradientColors(): GradientColorPoint[];
set gradientColors(colors: GradientColorPoint[]);
get gradientSelectedId(): string;
set gradientSelectedId(id: string);
get gradientDegree(): number;
set gradientDegree(degree: number);
get gradientSelectedPoint(): GradientColorPoint;
getFormatsColorMap(): {
HEX: string;
CMYK: string;
RGB: string;
RGBA: string;
HSL: string;
HSLA: string;
HSV: string;
HSVA: string;
CSS: string;
HEX8: string;
};
updateCurrentGradientColor(): false | this;
updateStates(input: string): void;
getRgba(): {
r: number;
g: number;
b: number;
a: number;
};
getCmyk(): {
c: number;
m: number;
y: number;
k: number;
};
getHsva(): tinyColor.ColorFormats.HSVA;
getHsla(): tinyColor.ColorFormats.HSLA;
equals(color: string): boolean;
static isValid(color: string): boolean;
static hsva2color(h: number, s: number, v: number, a: number): string;
static hsla2color(h: number, s: number, l: number, a: number): string;
static rgba2color(r: number, g: number, b: number, a: number): string;
static hex2color(hex: string, a: number): string;
static object2color(object: any, format: string): string;
static isGradientColor: (input: string) => boolean;
static compare: (color1: string, color2: string) => boolean;
}
export declare const getColorObject: (color: Color) => ColorObject;
export default Color;

View File

@@ -0,0 +1,334 @@
import tinyColor from 'tinycolor2';
import { cmykInputToColor, rgb2cmyk } from './cmyk';
import { parseGradientString, isGradientColor } from './gradient';
const mathRound = Math.round;
const hsv2rgba = (states) => tinyColor(states).toRgb();
const hsv2hsva = (states) => tinyColor(states).toHsv();
const hsv2hsla = (states) => tinyColor(states).toHsl();
export const gradientColors2string = (object) => {
const { points, degree } = object;
const colorsStop = points
.sort((pA, pB) => pA.left - pB.left)
.map((p) => `${p.color} ${Math.round(p.left * 100) / 100}%`);
return `linear-gradient(${degree}deg,${colorsStop.join(',')})`;
};
export const getColorWithoutAlpha = (color) => tinyColor(color).setAlpha(1).toHexString();
export const genId = () => (1 + Math.random() * 4294967295).toString(16);
export const genGradientPoint = (left, color) => ({
id: genId(),
left,
color,
});
export class Color {
constructor(input) {
this.states = {
s: 100,
v: 100,
h: 100,
a: 1,
};
this.gradientStates = {
colors: [],
degree: 0,
selectedId: null,
css: '',
};
this.update(input);
}
update(input) {
var _a, _b;
const gradientColors = parseGradientString(input);
if (this.isGradient && !gradientColors) {
const colorHsv = tinyColor(input).toHsv();
this.states = colorHsv;
this.updateCurrentGradientColor();
return;
}
this.originColor = input;
this.isGradient = false;
let colorInput = input;
if (gradientColors) {
this.isGradient = true;
const object = gradientColors;
const points = object.points.map((c) => genGradientPoint(c.left, c.color));
this.gradientStates = {
colors: points,
degree: object.degree,
selectedId: ((_a = points[0]) === null || _a === void 0 ? void 0 : _a.id) || null,
};
this.gradientStates.css = this.linearGradient;
colorInput = (_b = this.gradientSelectedPoint) === null || _b === void 0 ? void 0 : _b.color;
}
this.updateStates(colorInput);
}
get saturation() {
return this.states.s;
}
set saturation(value) {
this.states.s = Math.max(0, Math.min(100, value));
this.updateCurrentGradientColor();
}
get value() {
return this.states.v;
}
set value(value) {
this.states.v = Math.max(0, Math.min(100, value));
this.updateCurrentGradientColor();
}
get hue() {
return this.states.h;
}
set hue(value) {
this.states.h = Math.max(0, Math.min(360, value));
this.updateCurrentGradientColor();
}
get alpha() {
return this.states.a;
}
set alpha(value) {
this.states.a = Math.max(0, Math.min(1, Math.round(value * 100) / 100));
this.updateCurrentGradientColor();
}
get rgb() {
const { r, g, b } = hsv2rgba(this.states);
return `rgb(${mathRound(r)}, ${mathRound(g)}, ${mathRound(b)})`;
}
get rgba() {
const { r, g, b, a } = hsv2rgba(this.states);
return `rgba(${mathRound(r)}, ${mathRound(g)}, ${mathRound(b)}, ${a})`;
}
get hsv() {
const { h, s, v } = this.getHsva();
return `hsv(${h}, ${s}%, ${v}%)`;
}
get hsva() {
const { h, s, v, a } = this.getHsva();
return `hsva(${h}, ${s}%, ${v}%, ${a})`;
}
get hsl() {
const { h, s, l } = this.getHsla();
return `hsl(${h}, ${s}%, ${l}%)`;
}
get hsla() {
const { h, s, l, a } = this.getHsla();
return `hsla(${h}, ${s}%, ${l}%, ${a})`;
}
get hex() {
return tinyColor(this.states).toHexString();
}
get hex8() {
return tinyColor(this.states).toHex8String();
}
get cmyk() {
const { c, m, y, k } = this.getCmyk();
return `cmyk(${c}, ${m}, ${y}, ${k})`;
}
get css() {
if (this.isGradient) {
return this.linearGradient;
}
return this.rgba;
}
get linearGradient() {
const { gradientColors, gradientDegree } = this;
return gradientColors2string({
points: gradientColors,
degree: gradientDegree,
});
}
get gradientColors() {
return this.gradientStates.colors;
}
set gradientColors(colors) {
this.gradientStates.colors = colors;
this.gradientStates.css = this.linearGradient;
}
get gradientSelectedId() {
return this.gradientStates.selectedId;
}
set gradientSelectedId(id) {
var _a;
if (id === this.gradientSelectedId) {
return;
}
this.gradientStates.selectedId = id;
this.updateStates((_a = this.gradientSelectedPoint) === null || _a === void 0 ? void 0 : _a.color);
}
get gradientDegree() {
return this.gradientStates.degree;
}
set gradientDegree(degree) {
this.gradientStates.degree = Math.max(0, Math.min(360, degree));
this.gradientStates.css = this.linearGradient;
}
get gradientSelectedPoint() {
const { gradientColors, gradientSelectedId } = this;
return gradientColors.find((color) => color.id === gradientSelectedId);
}
getFormatsColorMap() {
return {
HEX: this.hex,
CMYK: this.cmyk,
RGB: this.rgb,
RGBA: this.rgba,
HSL: this.hsl,
HSLA: this.hsla,
HSV: this.hsv,
HSVA: this.hsva,
CSS: this.css,
HEX8: this.hex8,
};
}
updateCurrentGradientColor() {
const { isGradient, gradientColors, gradientSelectedId } = this;
const { length } = gradientColors;
const current = this.gradientSelectedPoint;
if (!isGradient || length === 0 || !current) {
return false;
}
const index = gradientColors.findIndex((color) => color.id === gradientSelectedId);
const newColor = Object.assign(Object.assign({}, current), { color: this.rgba });
gradientColors.splice(index, 1, newColor);
this.gradientColors = gradientColors.slice();
return this;
}
updateStates(input) {
const color = tinyColor(cmykInputToColor(input));
const hsva = color.toHsv();
this.states = hsva;
}
getRgba() {
const { r, g, b, a } = hsv2rgba(this.states);
return {
r: mathRound(r),
g: mathRound(g),
b: mathRound(b),
a,
};
}
getCmyk() {
const { r, g, b } = this.getRgba();
const [c, m, y, k] = rgb2cmyk(r, g, b);
return {
c: mathRound(c * 100),
m: mathRound(m * 100),
y: mathRound(y * 100),
k: mathRound(k * 100),
};
}
getHsva() {
let { h, s, v, a } = hsv2hsva(this.states);
h = mathRound(h);
s = mathRound(s * 100);
v = mathRound(v * 100);
a *= 1;
return {
h,
s,
v,
a,
};
}
getHsla() {
let { h, s, l, a } = hsv2hsla(this.states);
h = mathRound(h);
s = mathRound(s * 100);
l = mathRound(l * 100);
a *= 1;
return {
h,
s,
l,
a,
};
}
equals(color) {
return tinyColor.equals(this.rgba, color);
}
static isValid(color) {
if (parseGradientString(color)) {
return true;
}
return tinyColor(color).isValid();
}
static hsva2color(h, s, v, a) {
return tinyColor({
h,
s,
v,
a,
}).toHsvString();
}
static hsla2color(h, s, l, a) {
return tinyColor({
h,
s,
l,
a,
}).toHslString();
}
static rgba2color(r, g, b, a) {
return tinyColor({
r,
g,
b,
a,
}).toHsvString();
}
static hex2color(hex, a) {
const color = tinyColor(hex);
color.setAlpha(a);
return color.toHexString();
}
static object2color(object, format) {
if (format === 'CMYK') {
const { c, m, y, k } = object;
return `cmyk(${c}, ${m}, ${y}, ${k})`;
}
const color = tinyColor(object, {
format,
});
return color.toRgbString();
}
}
Color.isGradientColor = (input) => !!isGradientColor(input);
Color.compare = (color1, color2) => {
const isGradientColor1 = Color.isGradientColor(color1);
const isGradientColor2 = Color.isGradientColor(color2);
if (isGradientColor1 && isGradientColor2) {
const gradientColor1 = gradientColors2string(parseGradientString(color1));
const gradientColor2 = gradientColors2string(parseGradientString(color2));
return gradientColor1 === gradientColor2;
}
if (!isGradientColor1 && !isGradientColor2) {
return tinyColor.equals(color1, color2);
}
return false;
};
const COLOR_OBJECT_OUTPUT_KEYS = [
'alpha',
'css',
'hex',
'hex8',
'hsl',
'hsla',
'hsv',
'hsva',
'rgb',
'rgba',
'saturation',
'value',
'isGradient',
];
export const getColorObject = (color) => {
if (!color) {
return null;
}
const colorObject = Object.create(null);
COLOR_OBJECT_OUTPUT_KEYS.forEach((key) => (colorObject[key] = color[key]));
if (color.isGradient) {
colorObject.linearGradient = color.linearGradient;
}
return colorObject;
};
export default Color;

View File

@@ -0,0 +1,12 @@
export interface GradientColorPoint {
id?: string;
color?: string;
left?: number;
}
export interface GradientColors {
points: GradientColorPoint[];
degree: number;
}
export declare const isGradientColor: (input: string) => null | RegExpExecArray;
export declare const parseGradientString: (input: string) => GradientColors | boolean;
export default parseGradientString;

View File

@@ -0,0 +1,119 @@
import isString from 'lodash/isString';
import isNull from 'lodash/isNull';
import tinyColor from 'tinycolor2';
const combineRegExp = (regexpList, flags) => {
let source = '';
for (let i = 0; i < regexpList.length; i++) {
if (isString(regexpList[i])) {
source += regexpList[i];
}
else {
source += regexpList[i].source;
}
}
return new RegExp(source, flags);
};
const generateRegExp = () => {
const searchFlags = 'gi';
const rAngle = /(?:[+-]?\d*\.?\d+)(?:deg|grad|rad|turn)/;
const rSideCornerCapture = /to\s+((?:(?:left|right|top|bottom)(?:\s+(?:top|bottom|left|right))?))/;
const rComma = /\s*,\s*/;
const rColorHex = /#(?:[a-f0-9]{6}|[a-f0-9]{3})/;
const rDigits3 = /\(\s*(?:\d{1,3}\s*,\s*){2}\d{1,3}\s*\)/;
const rDigits4 = /\(\s*(?:\d{1,3}\s*,\s*){2}\d{1,3}\s*,\s*\d*\.?\d+\)/;
const rValue = /(?:[+-]?\d*\.?\d+)(?:%|[a-z]+)?/;
const rKeyword = /[_a-z-][_a-z0-9-]*/;
const rColor = combineRegExp(['(?:', rColorHex, '|', '(?:rgb|hsl)', rDigits3, '|', '(?:rgba|hsla)', rDigits4, '|', rKeyword, ')'], '');
const rColorStop = combineRegExp([rColor, '(?:\\s+', rValue, '(?:\\s+', rValue, ')?)?'], '');
const rColorStopList = combineRegExp(['(?:', rColorStop, rComma, ')*', rColorStop], '');
const rLineCapture = combineRegExp(['(?:(', rAngle, ')|', rSideCornerCapture, ')'], '');
const rGradientSearch = combineRegExp(['(?:(', rLineCapture, ')', rComma, ')?(', rColorStopList, ')'], searchFlags);
const rColorStopSearch = combineRegExp(['\\s*(', rColor, ')', '(?:\\s+', '(', rValue, '))?', '(?:', rComma, '\\s*)?'], searchFlags);
return {
gradientSearch: rGradientSearch,
colorStopSearch: rColorStopSearch,
};
};
const parseGradient = (regExpLib, input) => {
let result;
let matchColorStop;
let stopResult;
regExpLib.gradientSearch.lastIndex = 0;
const matchGradient = regExpLib.gradientSearch.exec(input);
if (!isNull(matchGradient)) {
result = {
original: matchGradient[0],
colorStopList: [],
};
if (matchGradient[1]) {
result.line = matchGradient[1];
}
if (matchGradient[2]) {
result.angle = matchGradient[2];
}
if (matchGradient[3]) {
result.sideCorner = matchGradient[3];
}
regExpLib.colorStopSearch.lastIndex = 0;
matchColorStop = regExpLib.colorStopSearch.exec(matchGradient[4]);
while (!isNull(matchColorStop)) {
stopResult = {
color: matchColorStop[1],
};
if (matchColorStop[2]) {
stopResult.position = matchColorStop[2];
}
result.colorStopList.push(stopResult);
matchColorStop = regExpLib.colorStopSearch.exec(matchGradient[4]);
}
}
return result;
};
const REGEXP_LIB = generateRegExp();
const REG_GRADIENT = /.*gradient\s*\(((?:\([^)]*\)|[^)(]*)*)\)/gim;
export const isGradientColor = (input) => {
REG_GRADIENT.lastIndex = 0;
return REG_GRADIENT.exec(input);
};
const sideCornerDegreeMap = {
top: 0,
right: 90,
bottom: 180,
left: 270,
'top left': 225,
'left top': 225,
'top right': 135,
'right top': 135,
'bottom left': 315,
'left bottom': 315,
'bottom right': 45,
'right bottom': 45,
};
export const parseGradientString = (input) => {
const match = isGradientColor(input);
if (!match) {
return false;
}
const gradientColors = {
points: [],
degree: 0,
};
const result = parseGradient(REGEXP_LIB, match[1]);
if (result.original.trim() !== match[1].trim()) {
return false;
}
const points = result.colorStopList.map(({ color, position }) => {
const point = Object.create(null);
point.color = tinyColor(color).toRgbString();
point.left = parseFloat(position);
return point;
});
gradientColors.points = points;
let degree = parseInt(result.angle, 10);
if (Number.isNaN(degree)) {
degree = sideCornerDegreeMap[result.sideCorner] || 90;
}
gradientColors.degree = degree;
return gradientColors;
};
export default parseGradientString;

View File

@@ -0,0 +1,3 @@
export * from './cmyk';
export * from './color';
export * from './gradient';

View File

@@ -0,0 +1,3 @@
export * from './cmyk';
export * from './color';
export * from './gradient';

View File

@@ -0,0 +1,21 @@
export declare type CompareDate = Date | number | {
year: number;
month: number;
date: number;
};
export declare const getDateRect: (date: Date | number) => {
year: number;
month: number;
date: number;
day: number;
time: number;
};
export declare const isSameDate: (date1: CompareDate, date2: CompareDate) => boolean;
export declare const getMonthDateRect: (date: Date | number) => {
year: number;
month: number;
weekdayOfFirstDay: number;
lastDate: number;
};
export declare const isValidDate: (val: any) => boolean;
export declare const getDate: (...args: any[]) => any;

View File

@@ -0,0 +1,41 @@
export const getDateRect = (date) => {
const _date = new Date(date);
return {
year: _date.getFullYear(),
month: _date.getMonth(),
date: _date.getDate(),
day: _date.getDay(),
time: _date.getTime(),
};
};
export const isSameDate = (date1, date2) => {
if (date1 instanceof Date || typeof date1 === 'number')
date1 = getDateRect(date1);
if (date2 instanceof Date || typeof date2 === 'number')
date2 = getDateRect(date2);
const keys = ['year', 'month', 'date'];
return keys.every((key) => date1[key] === date2[key]);
};
export const getMonthDateRect = (date) => {
const { year, month } = getDateRect(date);
const firstDay = new Date(year, month, 1);
const weekdayOfFirstDay = firstDay.getDay();
const lastDate = new Date(+new Date(year, month + 1, 1) - 24 * 3600 * 1000).getDate();
return {
year,
month,
weekdayOfFirstDay,
lastDate,
};
};
export const isValidDate = (val) => typeof val === 'number' || val instanceof Date;
export const getDate = (...args) => {
const now = new Date();
if (args.length === 0)
return now;
if (args.length === 1 && args[0] <= 1000) {
const { year, month, date } = getDateRect(now);
return new Date(year, month + args[0], date);
}
return Date.apply(null, args);
};

View File

@@ -0,0 +1,15 @@
declare type ControlInstance = {
controlled: boolean;
initValue: any;
set(newVal: any, extObj?: Object, fn?: any): void;
get(): any;
change(newVal: any, customChangeData?: any, customUpdateFn?: any): void;
};
declare type ControlOption = {
valueKey?: string;
defaultValueKey?: string;
changeEventName?: string;
strict?: boolean;
};
declare function useControl(this: any, option?: ControlOption): ControlInstance;
export { ControlOption, ControlInstance, useControl };

View File

@@ -0,0 +1,40 @@
const defaultOption = {
valueKey: 'value',
defaultValueKey: 'defaultValue',
changeEventName: 'change',
strict: true,
};
function useControl(option = {}) {
const { valueKey, defaultValueKey, changeEventName, strict } = Object.assign(Object.assign({}, defaultOption), option);
const props = this.properties || {};
const value = props[valueKey];
const defaultValue = props[strict ? defaultValueKey : valueKey];
let controlled = false;
if (strict && typeof value !== 'undefined' && value !== null) {
controlled = true;
}
const set = (newVal, extObj, fn) => {
this.setData(Object.assign({ [`_${valueKey}`]: newVal }, extObj), fn);
};
return {
controlled,
initValue: controlled ? value : defaultValue,
set,
get: () => {
return this.data[`_${valueKey}`];
},
change: (newVal, customChangeData, customUpdateFn) => {
this.triggerEvent(changeEventName, typeof customChangeData !== 'undefined' ? customChangeData : newVal);
if (controlled) {
return;
}
if (typeof customUpdateFn === 'function') {
customUpdateFn();
}
else {
set(newVal);
}
},
};
}
export { useControl };

View File

@@ -0,0 +1,15 @@
export declare const getPrototypeOf: (obj: any) => any;
export declare const isObject: (something: any) => boolean;
export declare const iterateInheritedPrototype: (callback: (proto: Record<string, any>) => boolean | void, fromCtor: any, toCtor: any, includeToCtor?: boolean) => void;
export interface ClassInstanceToObjectOptions {
bindTo?: any;
excludes?: string[];
till?: any;
enumerable?: 0 | boolean;
configurable?: 0 | boolean;
writable?: 0 | boolean;
}
export declare const toObject: (something: any, options?: ClassInstanceToObjectOptions) => {
[key: string]: any;
};
export declare const isPlainObject: (something: any) => boolean;

View File

@@ -0,0 +1,57 @@
export const getPrototypeOf = function (obj) {
return Object.getPrototypeOf ? Object.getPrototypeOf(obj) : obj.__proto__;
};
export const isObject = function isObject(something) {
const type = typeof something;
return something !== null && (type === 'function' || type === 'object');
};
export const iterateInheritedPrototype = function iterateInheritedPrototype(callback, fromCtor, toCtor, includeToCtor = true) {
let proto = fromCtor.prototype || fromCtor;
const toProto = toCtor.prototype || toCtor;
while (proto) {
if (!includeToCtor && proto === toProto)
break;
if (callback(proto) === false)
break;
if (proto === toProto)
break;
proto = getPrototypeOf(proto);
}
};
export const toObject = function toObject(something, options = {}) {
const obj = {};
if (!isObject(something))
return obj;
const excludes = options.excludes || ['constructor'];
const { enumerable = true, configurable = 0, writable = 0 } = options;
const defaultDesc = {};
if (enumerable !== 0)
defaultDesc.enumerable = enumerable;
if (configurable !== 0)
defaultDesc.configurable = configurable;
if (writable !== 0)
defaultDesc.writable = writable;
iterateInheritedPrototype((proto) => {
Object.getOwnPropertyNames(proto).forEach((key) => {
if (excludes.indexOf(key) >= 0)
return;
if (Object.prototype.hasOwnProperty.call(obj, key))
return;
const desc = Object.getOwnPropertyDescriptor(proto, key);
const fnKeys = ['get', 'set', 'value'];
fnKeys.forEach((k) => {
if (typeof desc[k] === 'function') {
const oldFn = desc[k];
desc[k] = function (...args) {
return oldFn.apply(Object.prototype.hasOwnProperty.call(options, 'bindTo') ? options.bindTo : this, args);
};
}
});
Object.defineProperty(obj, key, Object.assign(Object.assign({}, desc), defaultDesc));
});
}, something, options.till || Object, false);
return obj;
};
export const isPlainObject = function isPlainObject(something) {
return Object.prototype.toString.call(something) === '[object Object]';
};

View File

@@ -0,0 +1,4 @@
export * from './superComponent';
export * from './flatTool';
export * from './instantiationDecorator';
export * from './control';

View File

@@ -0,0 +1,4 @@
export * from './superComponent';
export * from './flatTool';
export * from './instantiationDecorator';
export * from './control';

View File

@@ -0,0 +1,3 @@
import { SuperComponent } from './superComponent';
export declare const toComponent: (options: Record<string, any>) => Record<string, any>;
export declare const wxComponent: () => (constructor: new () => SuperComponent) => void;

View File

@@ -0,0 +1,139 @@
import { isPlainObject, toObject } from './flatTool';
import { canUseVirtualHost } from '../version';
const RawLifeCycles = ['Created', 'Attached', 'Ready', 'Moved', 'Detached', 'Error'];
const NativeLifeCycles = RawLifeCycles.map((k) => k.toLowerCase());
const ComponentNativeProps = [
'properties',
'data',
'observers',
'methods',
'behaviors',
...NativeLifeCycles,
'relations',
'externalClasses',
'options',
'lifetimes',
'pageLifeTimes',
'definitionFilter',
];
export const toComponent = function toComponent(options) {
const { relations, behaviors = [], externalClasses = [] } = options;
if (options.properties) {
Object.keys(options.properties).forEach((k) => {
let opt = options.properties[k];
if (!isPlainObject(opt)) {
opt = { type: opt };
}
options.properties[k] = opt;
});
const ariaProps = [
{ key: 'ariaHidden', type: Boolean },
{ key: 'ariaRole', type: String },
{ key: 'ariaLabel', type: String },
{ key: 'ariaLabelledby', type: String },
{ key: 'ariaDescribedby', type: String },
{ key: 'ariaBusy', type: Boolean },
];
ariaProps.forEach(({ key, type }) => {
options.properties[key] = {
type,
};
});
options.properties.style = { type: String, value: '' };
options.properties.customStyle = { type: String, value: '' };
}
if (!options.methods)
options.methods = {};
if (!options.lifetimes)
options.lifetimes = {};
const inits = {};
if (relations) {
const getRelations = (relation, path) => Behavior({
created() {
Object.defineProperty(this, `$${relation}`, {
get: () => {
const nodes = this.getRelationNodes(path) || [];
return relation === 'parent' ? nodes[0] : nodes;
},
});
},
});
const map = {};
Object.keys(relations).forEach((path) => {
const comp = relations[path];
const relation = ['parent', 'ancestor'].includes(comp.type) ? 'parent' : 'children';
const mixin = getRelations(relation, path);
map[relation] = mixin;
});
behaviors.push(...Object.keys(map).map((key) => map[key]));
}
options.behaviors = [...behaviors];
options.externalClasses = ['class', ...externalClasses];
Object.getOwnPropertyNames(options).forEach((k) => {
const desc = Object.getOwnPropertyDescriptor(options, k);
if (!desc)
return;
if (NativeLifeCycles.indexOf(k) < 0 && typeof desc.value === 'function') {
Object.defineProperty(options.methods, k, desc);
delete options[k];
}
else if (ComponentNativeProps.indexOf(k) < 0) {
inits[k] = desc;
}
else if (NativeLifeCycles.indexOf(k) >= 0) {
options.lifetimes[k] = options[k];
}
});
if (Object.keys(inits).length) {
const oldCreated = options.lifetimes.created;
const oldAttached = options.lifetimes.attached;
const { controlledProps = [] } = options;
options.lifetimes.created = function (...args) {
Object.defineProperties(this, inits);
if (oldCreated)
oldCreated.apply(this, args);
};
options.lifetimes.attached = function (...args) {
if (oldAttached)
oldAttached.apply(this, args);
controlledProps.forEach(({ key }) => {
const defaultKey = `default${key.replace(/^(\w)/, (m, m1) => m1.toUpperCase())}`;
const props = this.properties;
if (props[key] == null) {
this._selfControlled = true;
}
if (props[key] == null && props[defaultKey] != null) {
this.setData({
[key]: props[defaultKey],
});
}
});
};
options.methods._trigger = function (evtName, detail, opts) {
const target = controlledProps.find((item) => item.event == evtName);
if (target) {
const { key } = target;
if (this._selfControlled) {
this.setData({
[key]: detail[key],
});
}
}
this.triggerEvent(evtName, detail, opts);
};
}
return options;
};
export const wxComponent = function wxComponent() {
return function (constructor) {
class WxComponent extends constructor {
}
const current = new WxComponent();
current.options = current.options || {};
if (canUseVirtualHost()) {
current.options.virtualHost = true;
}
const obj = toComponent(toObject(current));
Component(obj);
};
};

View File

@@ -0,0 +1,19 @@
/// <reference types="miniprogram-api-typings" />
export interface ComponentsOptionsType extends WechatMiniprogram.Component.ComponentOptions {
styleIsolation?: 'isolated' | 'apply-shared' | 'shared' | 'page-isolated' | 'page-apply-shared' | 'page-shared';
}
export interface RelationsOptions {
[componentName: string]: WechatMiniprogram.Component.RelationOption;
}
export interface SuperComponent<D = {}, P = {}, M = {}> extends WechatMiniprogram.Component.Lifetimes, WechatMiniprogram.Component.OtherOption, WechatMiniprogram.Component.InstanceMethods<D> {
properties: P;
data: D;
options: ComponentsOptionsType;
methods: M | Record<string, (...args: any[]) => any>;
$global: Function;
[x: string]: any;
}
export declare class SuperComponent<D = {}, P = {}, M = {}> {
readonly app: any;
constructor();
}

View File

@@ -0,0 +1,5 @@
export class SuperComponent {
constructor() {
this.app = getApp();
}
}

View File

@@ -0,0 +1,27 @@
.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);
}

View File

@@ -0,0 +1,17 @@
@media (prefers-color-scheme: light) {
page,
.page {
--td-picker-transparent-color: rgba(255, 255, 255, 0);
}
}
@media (prefers-color-scheme: dark) {
page,
.page {
--td-button-primary-disabled-color: var(--td-font-white-4);
--td-skeleton-animation-gradient: rgba(255, 255, 255, 0.06);
--td-slider-dot-bg-color: var(--td-gray-color-4);
--td-slider-dot-disabled-bg-color: var(--td-gray-color-11);
--td-slider-dot-disabled-border-color: var(--td-gray-color-12);
--td-picker-transparent-color: transparent;
}
}

View File

@@ -0,0 +1,123 @@
@media (prefers-color-scheme: dark) {
page,
.page {
--td-primary-color-1: #1b2f51;
--td-primary-color-2: #173463;
--td-primary-color-3: #143975;
--td-primary-color-4: #103d88;
--td-primary-color-5: #0d429a;
--td-primary-color-6: #054bbe;
--td-primary-color-7: #2667d4;
--td-primary-color-8: #4582e6;
--td-primary-color-9: #699ef5;
--td-primary-color-10: #96bbf8;
--td-warning-color-1: #4f2a1d;
--td-warning-color-2: #582f21;
--td-warning-color-3: #733c23;
--td-warning-color-4: #a75d2b;
--td-warning-color-5: #cf6e2d;
--td-warning-color-6: #dc7633;
--td-warning-color-7: #e8935c;
--td-warning-color-8: #ecbf91;
--td-warning-color-9: #eed7bf;
--td-warning-color-10: #f3e9dc;
--td-error-color-1: #472324;
--td-error-color-2: #5e2a2d;
--td-error-color-3: #703439;
--td-error-color-4: #83383e;
--td-error-color-5: #a03f46;
--td-error-color-6: #c64751;
--td-error-color-7: #de6670;
--td-error-color-8: #ec888e;
--td-error-color-9: #edb1b6;
--td-error-color-10: #eeced0;
--td-success-color-1: #193a2a;
--td-success-color-2: #1a4230;
--td-success-color-3: #17533d;
--td-success-color-4: #0d7a55;
--td-success-color-5: #059465;
--td-success-color-6: #43af8a;
--td-success-color-7: #46bf96;
--td-success-color-8: #80d2b6;
--td-success-color-9: #b4e1d3;
--td-success-color-10: #deede8;
--td-gray-color-1: #f3f3f3;
--td-gray-color-2: #eee;
--td-gray-color-3: #e8e8e8;
--td-gray-color-4: #ddd;
--td-gray-color-5: #c6c6c6;
--td-gray-color-6: #a6a6a6;
--td-gray-color-7: #8b8b8b;
--td-gray-color-8: #777;
--td-gray-color-9: #5e5e5e;
--td-gray-color-10: #4b4b4b;
--td-gray-color-11: #383838;
--td-gray-color-12: #2c2c2c;
--td-gray-color-13: #242424;
--td-gray-color-14: #181818;
--td-font-white-1: rgba(255, 255, 255, 0.9);
--td-font-white-2: rgba(255, 255, 255, 0.55);
--td-font-white-3: rgba(255, 255, 255, 0.35);
--td-font-white-4: rgba(255, 255, 255, 0.22);
--td-font-gray-1: rgba(0, 0, 0, 0.9);
--td-font-gray-2: rgba(0, 0, 0, 0.6);
--td-font-gray-3: rgba(0, 0, 0, 0.4);
--td-font-gray-4: rgba(0, 0, 0, 0.26);
--td-brand-color: var(--td-primary-color-8);
--td-warning-color: var(--td-warning-color-5);
--td-error-color: var(--td-error-color-6);
--td-success-color: var(--td-success-color-5);
--td-brand-color-focus: var(--td-primary-color-1);
--td-brand-color-active: var(--td-primary-color-9);
--td-brand-color-disabled: var(--td-primary-color-3);
--td-brand-color-light: var(--td-primary-color-1);
--td-brand-color-light-active: var(--td-primary-color-2);
--td-warning-color-focus: var(--td-warning-color-2);
--td-warning-color-active: var(--td-warning-color-4);
--td-warning-color-disabled: var(--td-warning-color-3);
--td-warning-color-light: var(--td-warning-color-1);
--td-warning-color-light-active: var(--td-warning-color-2);
--td-error-color-focus: var(--td-error-color-2);
--td-error-color-active: var(--td-error-color-5);
--td-error-color-disabled: var(--td-error-color-3);
--td-error-color-light: var(--td-error-color-1);
--td-error-color-light-active: var(--td-error-color-2);
--td-success-color-focus: var(--td-success-color-2);
--td-success-color-active: var(--td-success-color-4);
--td-success-color-disabled: var(--td-success-color-3);
--td-success-color-light: var(--td-success-color-1);
--td-success-color-light-active: var(--td-success-color-2);
--td-mask-active: rgba(0, 0, 0, 0.4);
--td-mask-disabled: rgba(0, 0, 0, 0.6);
--td-bg-color-page: var(--td-gray-color-14);
--td-bg-color-container: var(--td-gray-color-13);
--td-bg-color-secondarycontainer: var(--td-gray-color-12);
--td-bg-color-component: var(--td-gray-color-11);
--td-bg-color-container-active: var(--td-gray-color-12);
--td-bg-color-secondarycontainer-active: var(--td-gray-color-11);
--td-bg-color-component-active: var(--td-gray-color-10);
--td-bg-color-component-disabled: var(--td-gray-color-12);
--td-bg-color-specialcomponent: transparent;
--td-text-color-primary: var(--td-font-white-1);
--td-text-color-secondary: var(--td-font-white-2);
--td-text-color-placeholder: var(--td-font-white-3);
--td-text-color-disabled: var(--td-font-white-4);
--td-text-color-anti: var(--td-font-white-1);
--td-text-color-brand: var(--td-primary-color-8);
--td-text-color-link: var(--td-primary-color-8);
--td-border-level-1-color: var(--td-gray-color-11);
--td-component-stroke: var(--td-gray-color-11);
--td-border-level-2-color: var(--td-gray-color-9);
--td-component-border: var(--td-gray-color-9);
--td-shadow-1: 0 4px 6px rgba(0, 0, 0, 0.06), 0 1px 10px rgba(0, 0, 0, 0.08), 0 2px 4px rgba(0, 0, 0, 0.12);
--td-shadow-2: 0 8px 10px rgba(0, 0, 0, 0.12), 0 3px 14px rgba(0, 0, 0, 0.1), 0 5px 5px rgba(0, 0, 0, 0.16);
--td-shadow-3: 0 16px 24px rgba(0, 0, 0, 0.14), 0 6px 30px rgba(0, 0, 0, 0.12), 0 8px 10px rgba(0, 0, 0, 0.2);
--td-shadow-inset-top: inset 0 0.5px 0 #5e5e5e;
--td-shadow-inset-right: inset 0.5px 0 0 #5e5e5e;
--td-shadow-inset-bottom: inset 0 -0.5px 0 #5e5e5e;
--td-shadow-inset-left: inset -0.5px 0 0 #5e5e5e;
--td-table-shadow-color: rgba(0, 0, 0, 0.55);
--td-scrollbar-color: rgba(255, 255, 255, 0.1);
--td-scroll-track-color: #333;
}
}

View File

@@ -0,0 +1,33 @@
page,
.page {
--td-font-family: PingFang SC, Microsoft YaHei, Arial Regular;
--td-font-family-medium: PingFang SC, Microsoft YaHei, Arial Medium;
--td-font-size-link-small: 24rpx;
--td-font-size-link-medium: 28rpx;
--td-font-size-link-large: 32rpx;
--td-font-size-mark-extra-small: 20rpx;
--td-font-size-mark-small: 24rpx;
--td-font-size-mark-medium: 28rpx;
--td-font-size-mark-large: 32rpx;
--td-font-size-body-extra-small: 20rpx;
--td-font-size-body-small: 24rpx;
--td-font-size-body-medium: 28rpx;
--td-font-size-body-large: 32rpx;
--td-font-size-title-small: 28rpx;
--td-font-size-title-medium: 32rpx;
--td-font-size-title-large: 36rpx;
--td-font-size-title-extra-large: 40rpx;
--td-font-size-headline-small: 48rpx;
--td-font-size-headline-medium: 56rpx;
--td-font-size-headline-large: 72rpx;
--td-font-size-display-medium: 96rpx;
--td-font-size-display-large: 128rpx;
--td-font-size: 20rpx;
--td-font-size-xs: var(--td-font-size-body-extra-small);
--td-font-size-s: var(--td-font-size-body-small);
--td-font-size-base: var(--td-font-size-title-small);
--td-font-size-m: var(--td-font-size-title-medium);
--td-font-size-l: var(--td-font-size-title-large);
--td-font-size-xl: var(--td-font-size-title-extra-large);
--td-font-size-xxl: var(--td-font-size-headline-large);
}

View File

@@ -0,0 +1,319 @@
@media (prefers-color-scheme: light) {
page,
.page {
--td-primary-color-1: #f2f3ff;
--td-primary-color-2: #d9e1ff;
--td-primary-color-3: #b5c7ff;
--td-primary-color-4: #8eabff;
--td-primary-color-5: #618dff;
--td-primary-color-6: #366ef4;
--td-primary-color-7: #0052d9;
--td-primary-color-8: #003cab;
--td-primary-color-9: #002a7c;
--td-primary-color-10: #001a57;
--td-warning-color-1: #fff1e9;
--td-warning-color-2: #ffd9c2;
--td-warning-color-3: #ffb98c;
--td-warning-color-4: #fa9550;
--td-warning-color-5: #e37318;
--td-warning-color-6: #be5a00;
--td-warning-color-7: #954500;
--td-warning-color-8: #713300;
--td-warning-color-9: #532300;
--td-warning-color-10: #3b1700;
--td-error-color-1: #fff0ed;
--td-error-color-2: #ffd8d2;
--td-error-color-3: #ffb9b0;
--td-error-color-4: #ff9285;
--td-error-color-5: #f6685d;
--td-error-color-6: #d54941;
--td-error-color-7: #ad352f;
--td-error-color-8: #881f1c;
--td-error-color-9: #68070a;
--td-error-color-10: #490002;
--td-success-color-1: #e3f9e9;
--td-success-color-2: #c6f3d7;
--td-success-color-3: #92dab2;
--td-success-color-4: #56c08d;
--td-success-color-5: #2ba471;
--td-success-color-6: #008858;
--td-success-color-7: #006c45;
--td-success-color-8: #005334;
--td-success-color-9: #003b23;
--td-success-color-10: #002515;
--td-gray-color-1: #f3f3f3;
--td-gray-color-2: #eeeeee;
--td-gray-color-3: #e7e7e7;
--td-gray-color-4: #dcdcdc;
--td-gray-color-5: #c5c5c5;
--td-gray-color-6: #a6a6a6;
--td-gray-color-7: #8b8b8b;
--td-gray-color-8: #777777;
--td-gray-color-9: #5e5e5e;
--td-gray-color-10: #4b4b4b;
--td-gray-color-11: #383838;
--td-gray-color-12: #2c2c2c;
--td-gray-color-13: #242424;
--td-gray-color-14: #181818;
--td-font-white-1: #ffffff;
--td-font-white-2: rgba(255, 255, 255, 0.55);
--td-font-white-3: rgba(255, 255, 255, 0.35);
--td-font-white-4: rgba(255, 255, 255, 0.22);
--td-font-gray-1: rgba(0, 0, 0, 0.9);
--td-font-gray-2: rgba(0, 0, 0, 0.6);
--td-font-gray-3: rgba(0, 0, 0, 0.4);
--td-font-gray-4: rgba(0, 0, 0, 0.26);
--td-brand-color: var(--td-primary-color-7);
--td-warning-color: var(--td-warning-color-5);
--td-error-color: var(--td-error-color-6);
--td-success-color: var(--td-success-color-5);
--td-brand-color-focus: var(--td-primary-color-1);
--td-brand-color-active: var(--td-primary-color-8);
--td-brand-color-disabled: var(--td-primary-color-3);
--td-brand-color-light: var(--td-primary-color-1);
--td-brand-color-light-active: var(--td-primary-color-2);
--td-warning-color-active: var(--td-warning-color-6);
--td-warning-color-disabled: var(--td-warning-color-3);
--td-warning-color-focus: var(--td-warning-color-2);
--td-warning-color-light: var(--td-warning-color-1);
--td-warning-color-light-active: var(--td-warning-color-2);
--td-error-color-focus: var(--td-error-color-2);
--td-error-color-active: var(--td-error-color-7);
--td-error-color-disabled: var(--td-error-color-3);
--td-error-color-light: var(--td-error-color-1);
--td-error-color-light-active: var(--td-error-color-2);
--td-success-color-focus: var(--td-success-color-2);
--td-success-color-active: var(--td-success-color-6);
--td-success-color-disabled: var(--td-success-color-3);
--td-success-color-light: var(--td-success-color-1);
--td-success-color-light-active: var(--td-success-color-2);
--td-mask-active: rgba(0, 0, 0, 0.6);
--td-mask-disabled: rgba(255, 255, 255, 0.6);
--td-bg-color-page: var(--td-gray-color-1);
--td-bg-color-container: var(--td-font-white-1);
--td-bg-color-container-active: var(--td-gray-color-3);
--td-bg-color-secondarycontainer: var(--td-gray-color-1);
--td-bg-color-secondarycontainer-active: var(--td-gray-color-4);
--td-bg-color-component: var(--td-gray-color-3);
--td-bg-color-component-active: var(--td-gray-color-6);
--td-bg-color-component-disabled: var(--td-gray-color-2);
--td-bg-color-secondarycomponent: var(--td-gray-color-4);
--td-bg-color-secondarycomponent-active: var(--td-gray-color-6);
--td-bg-color-specialcomponent: #fff;
--td-text-color-primary: var(--td-font-gray-1);
--td-text-color-secondary: var(--td-font-gray-2);
--td-text-color-placeholder: var(--td-font-gray-3);
--td-text-color-disabled: var(--td-font-gray-4);
--td-text-color-anti: var(--td-font-white-1);
--td-text-color-brand: var(--td-brand-color);
--td-text-color-link: var(--td-brand-color);
--td-border-level-1-color: var(--td-gray-color-3);
--td-component-stroke: var(--td-gray-color-3);
--td-border-level-2-color: var(--td-gray-color-4);
--td-component-border: var(--td-gray-color-4);
--td-shadow-1: 0 1px 10px rgba(0, 0, 0, 0.05), 0 4px 5px rgba(0, 0, 0, 0.08), 0 2px 4px -1px rgba(0, 0, 0, 0.12);
--td-shadow-2: 0 3px 14px 2px rgba(0, 0, 0, 0.05), 0 8px 10px 1px rgba(0, 0, 0, 0.06), 0 5px 5px -3px rgba(0, 0, 0, 0.1);
--td-shadow-3: 0 6px 30px 5px rgba(0, 0, 0, 0.05), 0 16px 24px 2px rgba(0, 0, 0, 0.04), 0 8px 10px -5px rgba(0, 0, 0, 0.08);
--td-shadow-4: 0 2px 8px 0 rgba(0, 0, 0, 0.06);
--td-shadow-inset-top: inset 0 0.5px 0 #dcdcdc;
--td-shadow-inset-right: inset 0.5px 0 0 #dcdcdc;
--td-shadow-inset-bottom: inset 0 -0.5px 0 #dcdcdc;
--td-shadow-inset-left: inset -0.5px 0 0 #dcdcdc;
--td-table-shadow-color: rgba(0, 0, 0, 0.08);
--td-scrollbar-color: rgba(0, 0, 0, 0.1);
--td-scrollbar-hover-color: rgba(0, 0, 0, 0.3);
--td-scroll-track-color: #fff;
}
}
@media (prefers-color-scheme: dark) {
page,
.page {
--td-primary-color-1: #1b2f51;
--td-primary-color-2: #173463;
--td-primary-color-3: #143975;
--td-primary-color-4: #103d88;
--td-primary-color-5: #0d429a;
--td-primary-color-6: #054bbe;
--td-primary-color-7: #2667d4;
--td-primary-color-8: #4582e6;
--td-primary-color-9: #699ef5;
--td-primary-color-10: #96bbf8;
--td-warning-color-1: #4f2a1d;
--td-warning-color-2: #582f21;
--td-warning-color-3: #733c23;
--td-warning-color-4: #a75d2b;
--td-warning-color-5: #cf6e2d;
--td-warning-color-6: #dc7633;
--td-warning-color-7: #e8935c;
--td-warning-color-8: #ecbf91;
--td-warning-color-9: #eed7bf;
--td-warning-color-10: #f3e9dc;
--td-error-color-1: #472324;
--td-error-color-2: #5e2a2d;
--td-error-color-3: #703439;
--td-error-color-4: #83383e;
--td-error-color-5: #a03f46;
--td-error-color-6: #c64751;
--td-error-color-7: #de6670;
--td-error-color-8: #ec888e;
--td-error-color-9: #edb1b6;
--td-error-color-10: #eeced0;
--td-success-color-1: #193a2a;
--td-success-color-2: #1a4230;
--td-success-color-3: #17533d;
--td-success-color-4: #0d7a55;
--td-success-color-5: #059465;
--td-success-color-6: #43af8a;
--td-success-color-7: #46bf96;
--td-success-color-8: #80d2b6;
--td-success-color-9: #b4e1d3;
--td-success-color-10: #deede8;
--td-gray-color-1: #f3f3f3;
--td-gray-color-2: #eee;
--td-gray-color-3: #e8e8e8;
--td-gray-color-4: #ddd;
--td-gray-color-5: #c6c6c6;
--td-gray-color-6: #a6a6a6;
--td-gray-color-7: #8b8b8b;
--td-gray-color-8: #777;
--td-gray-color-9: #5e5e5e;
--td-gray-color-10: #4b4b4b;
--td-gray-color-11: #383838;
--td-gray-color-12: #2c2c2c;
--td-gray-color-13: #242424;
--td-gray-color-14: #181818;
--td-font-white-1: rgba(255, 255, 255, 0.9);
--td-font-white-2: rgba(255, 255, 255, 0.55);
--td-font-white-3: rgba(255, 255, 255, 0.35);
--td-font-white-4: rgba(255, 255, 255, 0.22);
--td-font-gray-1: rgba(0, 0, 0, 0.9);
--td-font-gray-2: rgba(0, 0, 0, 0.6);
--td-font-gray-3: rgba(0, 0, 0, 0.4);
--td-font-gray-4: rgba(0, 0, 0, 0.26);
--td-brand-color: var(--td-primary-color-8);
--td-warning-color: var(--td-warning-color-5);
--td-error-color: var(--td-error-color-6);
--td-success-color: var(--td-success-color-5);
--td-brand-color-focus: var(--td-primary-color-1);
--td-brand-color-active: var(--td-primary-color-9);
--td-brand-color-disabled: var(--td-primary-color-3);
--td-brand-color-light: var(--td-primary-color-1);
--td-brand-color-light-active: var(--td-primary-color-2);
--td-warning-color-focus: var(--td-warning-color-2);
--td-warning-color-active: var(--td-warning-color-4);
--td-warning-color-disabled: var(--td-warning-color-3);
--td-warning-color-light: var(--td-warning-color-1);
--td-warning-color-light-active: var(--td-warning-color-2);
--td-error-color-focus: var(--td-error-color-2);
--td-error-color-active: var(--td-error-color-5);
--td-error-color-disabled: var(--td-error-color-3);
--td-error-color-light: var(--td-error-color-1);
--td-error-color-light-active: var(--td-error-color-2);
--td-success-color-focus: var(--td-success-color-2);
--td-success-color-active: var(--td-success-color-4);
--td-success-color-disabled: var(--td-success-color-3);
--td-success-color-light: var(--td-success-color-1);
--td-success-color-light-active: var(--td-success-color-2);
--td-mask-active: rgba(0, 0, 0, 0.4);
--td-mask-disabled: rgba(0, 0, 0, 0.6);
--td-bg-color-page: var(--td-gray-color-14);
--td-bg-color-container: var(--td-gray-color-13);
--td-bg-color-secondarycontainer: var(--td-gray-color-12);
--td-bg-color-component: var(--td-gray-color-11);
--td-bg-color-container-active: var(--td-gray-color-12);
--td-bg-color-secondarycontainer-active: var(--td-gray-color-11);
--td-bg-color-component-active: var(--td-gray-color-10);
--td-bg-color-component-disabled: var(--td-gray-color-12);
--td-bg-color-specialcomponent: transparent;
--td-text-color-primary: var(--td-font-white-1);
--td-text-color-secondary: var(--td-font-white-2);
--td-text-color-placeholder: var(--td-font-white-3);
--td-text-color-disabled: var(--td-font-white-4);
--td-text-color-anti: var(--td-font-white-1);
--td-text-color-brand: var(--td-primary-color-8);
--td-text-color-link: var(--td-primary-color-8);
--td-border-level-1-color: var(--td-gray-color-11);
--td-component-stroke: var(--td-gray-color-11);
--td-border-level-2-color: var(--td-gray-color-9);
--td-component-border: var(--td-gray-color-9);
--td-shadow-1: 0 4px 6px rgba(0, 0, 0, 0.06), 0 1px 10px rgba(0, 0, 0, 0.08), 0 2px 4px rgba(0, 0, 0, 0.12);
--td-shadow-2: 0 8px 10px rgba(0, 0, 0, 0.12), 0 3px 14px rgba(0, 0, 0, 0.1), 0 5px 5px rgba(0, 0, 0, 0.16);
--td-shadow-3: 0 16px 24px rgba(0, 0, 0, 0.14), 0 6px 30px rgba(0, 0, 0, 0.12), 0 8px 10px rgba(0, 0, 0, 0.2);
--td-shadow-inset-top: inset 0 0.5px 0 #5e5e5e;
--td-shadow-inset-right: inset 0.5px 0 0 #5e5e5e;
--td-shadow-inset-bottom: inset 0 -0.5px 0 #5e5e5e;
--td-shadow-inset-left: inset -0.5px 0 0 #5e5e5e;
--td-table-shadow-color: rgba(0, 0, 0, 0.55);
--td-scrollbar-color: rgba(255, 255, 255, 0.1);
--td-scroll-track-color: #333;
}
}
page,
.page {
--td-radius-small: 6rpx;
--td-radius-default: 12rpx;
--td-radius-large: 18rpx;
--td-radius-extra-large: 24rpx;
--td-radius-round: 999px;
--td-radius-circle: 50%;
}
page,
.page {
--td-font-family: PingFang SC, Microsoft YaHei, Arial Regular;
--td-font-family-medium: PingFang SC, Microsoft YaHei, Arial Medium;
--td-font-size-link-small: 24rpx;
--td-font-size-link-medium: 28rpx;
--td-font-size-link-large: 32rpx;
--td-font-size-mark-extra-small: 20rpx;
--td-font-size-mark-small: 24rpx;
--td-font-size-mark-medium: 28rpx;
--td-font-size-mark-large: 32rpx;
--td-font-size-body-extra-small: 20rpx;
--td-font-size-body-small: 24rpx;
--td-font-size-body-medium: 28rpx;
--td-font-size-body-large: 32rpx;
--td-font-size-title-small: 28rpx;
--td-font-size-title-medium: 32rpx;
--td-font-size-title-large: 36rpx;
--td-font-size-title-extra-large: 40rpx;
--td-font-size-headline-small: 48rpx;
--td-font-size-headline-medium: 56rpx;
--td-font-size-headline-large: 72rpx;
--td-font-size-display-medium: 96rpx;
--td-font-size-display-large: 128rpx;
--td-font-size: 20rpx;
--td-font-size-xs: var(--td-font-size-body-extra-small);
--td-font-size-s: var(--td-font-size-body-small);
--td-font-size-base: var(--td-font-size-title-small);
--td-font-size-m: var(--td-font-size-title-medium);
--td-font-size-l: var(--td-font-size-title-large);
--td-font-size-xl: var(--td-font-size-title-extra-large);
--td-font-size-xxl: var(--td-font-size-headline-large);
}
page,
.page {
--td-spacer: 16rpx;
--td-spacer-1: 24rpx;
--td-spacer-2: 32rpx;
--td-spacer-3: 48rpx;
--td-spacer-4: 64rpx;
--td-spacer-5: 96rpx;
--td-spacer-6: 160rpx;
}
@media (prefers-color-scheme: light) {
page,
.page {
--td-picker-transparent-color: rgba(255, 255, 255, 0);
}
}
@media (prefers-color-scheme: dark) {
page,
.page {
--td-button-primary-disabled-color: var(--td-font-white-4);
--td-skeleton-animation-gradient: rgba(255, 255, 255, 0.06);
--td-slider-dot-bg-color: var(--td-gray-color-4);
--td-slider-dot-disabled-bg-color: var(--td-gray-color-11);
--td-slider-dot-disabled-border-color: var(--td-gray-color-12);
--td-picker-transparent-color: transparent;
}
}

View File

@@ -0,0 +1,127 @@
@media (prefers-color-scheme: light) {
page,
.page {
--td-primary-color-1: #f2f3ff;
--td-primary-color-2: #d9e1ff;
--td-primary-color-3: #b5c7ff;
--td-primary-color-4: #8eabff;
--td-primary-color-5: #618dff;
--td-primary-color-6: #366ef4;
--td-primary-color-7: #0052d9;
--td-primary-color-8: #003cab;
--td-primary-color-9: #002a7c;
--td-primary-color-10: #001a57;
--td-warning-color-1: #fff1e9;
--td-warning-color-2: #ffd9c2;
--td-warning-color-3: #ffb98c;
--td-warning-color-4: #fa9550;
--td-warning-color-5: #e37318;
--td-warning-color-6: #be5a00;
--td-warning-color-7: #954500;
--td-warning-color-8: #713300;
--td-warning-color-9: #532300;
--td-warning-color-10: #3b1700;
--td-error-color-1: #fff0ed;
--td-error-color-2: #ffd8d2;
--td-error-color-3: #ffb9b0;
--td-error-color-4: #ff9285;
--td-error-color-5: #f6685d;
--td-error-color-6: #d54941;
--td-error-color-7: #ad352f;
--td-error-color-8: #881f1c;
--td-error-color-9: #68070a;
--td-error-color-10: #490002;
--td-success-color-1: #e3f9e9;
--td-success-color-2: #c6f3d7;
--td-success-color-3: #92dab2;
--td-success-color-4: #56c08d;
--td-success-color-5: #2ba471;
--td-success-color-6: #008858;
--td-success-color-7: #006c45;
--td-success-color-8: #005334;
--td-success-color-9: #003b23;
--td-success-color-10: #002515;
--td-gray-color-1: #f3f3f3;
--td-gray-color-2: #eeeeee;
--td-gray-color-3: #e7e7e7;
--td-gray-color-4: #dcdcdc;
--td-gray-color-5: #c5c5c5;
--td-gray-color-6: #a6a6a6;
--td-gray-color-7: #8b8b8b;
--td-gray-color-8: #777777;
--td-gray-color-9: #5e5e5e;
--td-gray-color-10: #4b4b4b;
--td-gray-color-11: #383838;
--td-gray-color-12: #2c2c2c;
--td-gray-color-13: #242424;
--td-gray-color-14: #181818;
--td-font-white-1: #ffffff;
--td-font-white-2: rgba(255, 255, 255, 0.55);
--td-font-white-3: rgba(255, 255, 255, 0.35);
--td-font-white-4: rgba(255, 255, 255, 0.22);
--td-font-gray-1: rgba(0, 0, 0, 0.9);
--td-font-gray-2: rgba(0, 0, 0, 0.6);
--td-font-gray-3: rgba(0, 0, 0, 0.4);
--td-font-gray-4: rgba(0, 0, 0, 0.26);
--td-brand-color: var(--td-primary-color-7);
--td-warning-color: var(--td-warning-color-5);
--td-error-color: var(--td-error-color-6);
--td-success-color: var(--td-success-color-5);
--td-brand-color-focus: var(--td-primary-color-1);
--td-brand-color-active: var(--td-primary-color-8);
--td-brand-color-disabled: var(--td-primary-color-3);
--td-brand-color-light: var(--td-primary-color-1);
--td-brand-color-light-active: var(--td-primary-color-2);
--td-warning-color-active: var(--td-warning-color-6);
--td-warning-color-disabled: var(--td-warning-color-3);
--td-warning-color-focus: var(--td-warning-color-2);
--td-warning-color-light: var(--td-warning-color-1);
--td-warning-color-light-active: var(--td-warning-color-2);
--td-error-color-focus: var(--td-error-color-2);
--td-error-color-active: var(--td-error-color-7);
--td-error-color-disabled: var(--td-error-color-3);
--td-error-color-light: var(--td-error-color-1);
--td-error-color-light-active: var(--td-error-color-2);
--td-success-color-focus: var(--td-success-color-2);
--td-success-color-active: var(--td-success-color-6);
--td-success-color-disabled: var(--td-success-color-3);
--td-success-color-light: var(--td-success-color-1);
--td-success-color-light-active: var(--td-success-color-2);
--td-mask-active: rgba(0, 0, 0, 0.6);
--td-mask-disabled: rgba(255, 255, 255, 0.6);
--td-bg-color-page: var(--td-gray-color-1);
--td-bg-color-container: var(--td-font-white-1);
--td-bg-color-container-active: var(--td-gray-color-3);
--td-bg-color-secondarycontainer: var(--td-gray-color-1);
--td-bg-color-secondarycontainer-active: var(--td-gray-color-4);
--td-bg-color-component: var(--td-gray-color-3);
--td-bg-color-component-active: var(--td-gray-color-6);
--td-bg-color-component-disabled: var(--td-gray-color-2);
--td-bg-color-secondarycomponent: var(--td-gray-color-4);
--td-bg-color-secondarycomponent-active: var(--td-gray-color-6);
--td-bg-color-specialcomponent: #fff;
--td-text-color-primary: var(--td-font-gray-1);
--td-text-color-secondary: var(--td-font-gray-2);
--td-text-color-placeholder: var(--td-font-gray-3);
--td-text-color-disabled: var(--td-font-gray-4);
--td-text-color-anti: var(--td-font-white-1);
--td-text-color-brand: var(--td-brand-color);
--td-text-color-link: var(--td-brand-color);
--td-border-level-1-color: var(--td-gray-color-3);
--td-component-stroke: var(--td-gray-color-3);
--td-border-level-2-color: var(--td-gray-color-4);
--td-component-border: var(--td-gray-color-4);
--td-shadow-1: 0 1px 10px rgba(0, 0, 0, 0.05), 0 4px 5px rgba(0, 0, 0, 0.08), 0 2px 4px -1px rgba(0, 0, 0, 0.12);
--td-shadow-2: 0 3px 14px 2px rgba(0, 0, 0, 0.05), 0 8px 10px 1px rgba(0, 0, 0, 0.06), 0 5px 5px -3px rgba(0, 0, 0, 0.1);
--td-shadow-3: 0 6px 30px 5px rgba(0, 0, 0, 0.05), 0 16px 24px 2px rgba(0, 0, 0, 0.04), 0 8px 10px -5px rgba(0, 0, 0, 0.08);
--td-shadow-4: 0 2px 8px 0 rgba(0, 0, 0, 0.06);
--td-shadow-inset-top: inset 0 0.5px 0 #dcdcdc;
--td-shadow-inset-right: inset 0.5px 0 0 #dcdcdc;
--td-shadow-inset-bottom: inset 0 -0.5px 0 #dcdcdc;
--td-shadow-inset-left: inset -0.5px 0 0 #dcdcdc;
--td-table-shadow-color: rgba(0, 0, 0, 0.08);
--td-scrollbar-color: rgba(0, 0, 0, 0.1);
--td-scrollbar-hover-color: rgba(0, 0, 0, 0.3);
--td-scroll-track-color: #fff;
}
}

View File

@@ -0,0 +1,9 @@
page,
.page {
--td-radius-small: 6rpx;
--td-radius-default: 12rpx;
--td-radius-large: 18rpx;
--td-radius-extra-large: 24rpx;
--td-radius-round: 999px;
--td-radius-circle: 50%;
}

View File

@@ -0,0 +1,10 @@
page,
.page {
--td-spacer: 16rpx;
--td-spacer-1: 24rpx;
--td-spacer-2: 32rpx;
--td-spacer-3: 48rpx;
--td-spacer-4: 64rpx;
--td-spacer-5: 96rpx;
--td-spacer-6: 160rpx;
}

View File

@@ -0,0 +1,8 @@
@keyframes tdesign-fade-out {
from {
opacity: 1;
}
to {
opacity: 0;
}
}

View File

@@ -0,0 +1,6 @@
.t-float-left {
float: left;
}
.t-float-right {
float: right;
}

View File

@@ -0,0 +1,27 @@
.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);
}

View File

@@ -0,0 +1,16 @@
<template name="badge">
<t-badge
color="{{color || ''}}"
content="{{content || ''}}"
count="{{count || 0}}"
dot="{{dot || false}}"
max-count="{{maxCount || 99}}"
offset="{{offset || []}}"
shape="{{shape || 'circle'}}"
show-zero="{{showZero || false}}"
size="{{size || 'medium'}}"
t-class="{{tClass}}"
t-class-content="{{tClassContent}}"
t-class-count="{{tClassCount}}"
/>
</template>

View File

@@ -0,0 +1,45 @@
<template name="button">
<t-button
t-id="{{tId || ''}}"
style="{{style}}"
block="{{block || false}}"
class="{{rootClass || ''}}"
t-class="{{tClass}}"
disabled="{{disabled || false}}"
data-type="{{type}}"
data-extra="{{extra}}"
custom-dataset="{{customDataset}}"
content="{{content || ''}}"
icon="{{icon || ''}}"
loading="{{loading || false}}"
loading-props="{{loadingProps}}"
theme="{{theme || 'default'}}"
ghost="{{ghost || false}}"
shape="{{shape || 'rectangle'}}"
size="{{size || 'medium'}}"
variant="{{variant || 'base'}}"
open-type="{{openType || ''}}"
hover-class="{{hoverClass || ''}}"
hover-stop-propagation="{{hoverStopPropagation || false}}"
hover-start-time="{{hoverStartTime || 20}}"
hover-stay-time="{{hoverStayTime || 70}}"
lang="{{lang || 'en'}}"
session-from="{{sessionFrom || ''}}"
send-message-title="{{sendMessageTitle || ''}}"
send-message-path="{{sendMessagePath || ''}}"
send-message-img="{{sendMessageImg || ''}}"
app-parameter="{{appParameter || ''}}"
show-message-card="{{showMessageCard || false}}"
bind:tap="onTplButtonTap"
bind:getuserinfo="onTplButtonTap"
bind:contact="onTplButtonTap"
bind:getphonenumber="onTplButtonTap"
bind:error="onTplButtonTap"
bind:opensetting="onTplButtonTap"
bind:launchapp="onTplButtonTap"
bind:agreeprivacyauthorization="onTplButtonTap"
aria-label="{{ariaLabel || ''}}"
>
<slot />
</t-button>
</template>

View File

@@ -0,0 +1,14 @@
<template name="icon">
<t-icon
style="{{style || ''}}"
t-class="{{tClass}}"
prefix="{{prefix || ''}}"
name="{{name || ''}}"
size="{{size || ''}}"
color="{{color || ''}}"
aria-hidden="{{ariaHidden || '' }}"
aria-label="{{ariaLabel || ''}}"
aria-role="{{ariaRole || ''}}"
bind:click="{{bindclick || ''}}"
/>
</template>

View File

@@ -0,0 +1,21 @@
<template name="image">
<t-image
t-class="{{tClass}}"
t-class-load="{{tClassLoad}}"
style="{{style || ''}}"
customStyle="{{customStyle || ''}}"
height="{{height || ''}}"
width="{{width || ''}}"
error="{{error || 'default'}}"
lazy="{{lazy || false}}"
loading="{{count || 'default'}}"
shape="{{shape || 'square'}}"
src="{{src || ''}}"
mode="{{mode || 'scaleToFill'}}"
webp="{{webp || false}}"
showMenuByLongpress="{{showMenuByLongpress || false}}"
data-custom="{{dataset || null}}"
bind:error="{{binderror}}"
bind:load="{{bindload}}"
/>
</template>

View File

@@ -0,0 +1,40 @@
/// <reference types="miniprogram-api-typings" />
/// <reference types="miniprogram-api-typings" />
/// <reference types="miniprogram-api-typings" />
export declare const systemInfo: WechatMiniprogram.WindowInfo | WechatMiniprogram.SystemInfo;
export declare const appBaseInfo: WechatMiniprogram.AppBaseInfo | WechatMiniprogram.SystemInfo;
export declare const deviceInfo: WechatMiniprogram.DeviceInfo | WechatMiniprogram.SystemInfo;
declare type Context = WechatMiniprogram.Page.TrivialInstance | WechatMiniprogram.Component.TrivialInstance;
export declare const debounce: (func: any, wait?: number) => (...rest: any[]) => void;
export declare const throttle: (func: any, wait?: number, options?: any) => (...args: any[]) => void;
export declare const classNames: (...args: any[]) => string;
export declare const styles: (styleObj: any) => string;
export declare const getAnimationFrame: (context: any, cb: Function) => any;
export declare const getRect: (context: any, selector: string, needAll?: boolean) => Promise<any>;
export declare const isNumber: (value: any) => boolean;
export declare const isNull: (value: any) => boolean;
export declare const isUndefined: (value: any) => boolean;
export declare const isDef: (value: any) => boolean;
export declare const isIOS: () => boolean;
export declare const addUnit: (value?: string | number) => string | undefined;
export declare const getCharacterLength: (type: string, char: string | number, max?: number) => {
length: number;
characters: string;
};
export declare const chunk: (arr: any[], size: number) => any[][];
export declare const getInstance: (context?: Context, selector?: string) => WechatMiniprogram.Component.TrivialInstance;
export declare const unitConvert: (value: number | string | null | undefined) => number;
export declare const setIcon: (iconName: any, icon: any, defaultIcon: any) => {
[x: string]: any;
};
export declare const isBool: (val: any) => boolean;
export declare const isObject: (val: any) => boolean;
export declare const isString: (val: any) => boolean;
export declare const toCamel: (str: any) => any;
export declare const getCurrentPage: <T>() => T & WechatMiniprogram.OptionalInterface<WechatMiniprogram.Page.ILifetime> & WechatMiniprogram.Page.InstanceProperties & WechatMiniprogram.Page.InstanceMethods<WechatMiniprogram.IAnyObject> & WechatMiniprogram.Page.Data<WechatMiniprogram.IAnyObject> & WechatMiniprogram.IAnyObject;
export declare const uniqueFactory: (compName: any) => () => string;
export declare const calcIcon: (icon: string | Record<string, any>, defaultIcon?: string) => string | Record<string, any>;
export declare const isOverSize: (size: any, sizeLimit: any) => boolean;
export declare const rpx2px: (rpx: any) => number;
export declare const nextTick: () => Promise<void>;
export {};

View File

@@ -0,0 +1,252 @@
import { prefix } from './config';
import { getWindowInfo, getAppBaseInfo, getDeviceInfo } from './wechat';
export const systemInfo = getWindowInfo();
export const appBaseInfo = getAppBaseInfo();
export const deviceInfo = getDeviceInfo();
export const debounce = function (func, wait = 500) {
let timerId;
return function (...rest) {
if (timerId) {
clearTimeout(timerId);
}
timerId = setTimeout(() => {
func.apply(this, rest);
}, wait);
};
};
export const throttle = (func, wait = 100, options = null) => {
let previous = 0;
let timerid = null;
if (!options) {
options = {
leading: true,
};
}
return function (...args) {
const now = Date.now();
if (!previous && !options.leading)
previous = now;
const remaining = wait - (now - previous);
const context = this;
if (remaining <= 0) {
if (timerid) {
clearTimeout(timerid);
timerid = null;
}
previous = now;
func.apply(context, args);
}
};
};
export const classNames = function (...args) {
const hasOwn = {}.hasOwnProperty;
const classes = [];
args.forEach((arg) => {
if (!arg)
return;
const argType = typeof arg;
if (argType === 'string' || argType === 'number') {
classes.push(arg);
}
else if (Array.isArray(arg) && arg.length) {
const inner = classNames(...arg);
if (inner) {
classes.push(inner);
}
}
else if (argType === 'object') {
for (const key in arg) {
if (hasOwn.call(arg, key) && arg[key]) {
classes.push(key);
}
}
}
});
return classes.join(' ');
};
export const styles = function (styleObj) {
return Object.keys(styleObj)
.map((styleKey) => `${styleKey}: ${styleObj[styleKey]}`)
.join('; ');
};
export const getAnimationFrame = function (context, cb) {
return context
.createSelectorQuery()
.selectViewport()
.boundingClientRect()
.exec(() => {
cb();
});
};
export const getRect = function (context, selector, needAll = false) {
return new Promise((resolve, reject) => {
context
.createSelectorQuery()[needAll ? 'selectAll' : 'select'](selector)
.boundingClientRect((rect) => {
if (rect) {
resolve(rect);
}
else {
reject(rect);
}
})
.exec();
});
};
export const isNumber = function (value) {
return /^\d+(\.\d+)?$/.test(value);
};
export const isNull = function (value) {
return value === null;
};
export const isUndefined = (value) => typeof value === 'undefined';
export const isDef = function (value) {
return !isUndefined(value) && !isNull(value);
};
export const isIOS = function () {
var _a;
return !!(((_a = deviceInfo === null || deviceInfo === void 0 ? void 0 : deviceInfo.system) === null || _a === void 0 ? void 0 : _a.toLowerCase().search('ios')) + 1);
};
export const addUnit = function (value) {
if (!isDef(value)) {
return undefined;
}
value = String(value);
return isNumber(value) ? `${value}px` : value;
};
export const getCharacterLength = (type, char, max) => {
const str = String(char !== null && char !== void 0 ? char : '');
if (str.length === 0) {
return {
length: 0,
characters: '',
};
}
if (type === 'maxcharacter') {
let len = 0;
for (let i = 0; i < str.length; i += 1) {
let currentStringLength = 0;
if (str.charCodeAt(i) > 127 || str.charCodeAt(i) === 94) {
currentStringLength = 2;
}
else {
currentStringLength = 1;
}
if (len + currentStringLength > max) {
return {
length: len,
characters: str.slice(0, i),
};
}
len += currentStringLength;
}
return {
length: len,
characters: str,
};
}
else if (type === 'maxlength') {
const length = str.length > max ? max : str.length;
return {
length,
characters: str.slice(0, length),
};
}
return {
length: str.length,
characters: str,
};
};
export const chunk = (arr, size) => Array.from({ length: Math.ceil(arr.length / size) }, (v, i) => arr.slice(i * size, i * size + size));
export const getInstance = function (context, selector) {
if (!context) {
const pages = getCurrentPages();
const page = pages[pages.length - 1];
context = page.$$basePage || page;
}
const instance = context ? context.selectComponent(selector) : null;
if (!instance) {
console.warn('未找到组件,请检查selector是否正确');
return null;
}
return instance;
};
export const unitConvert = (value) => {
var _a;
if (typeof value === 'string') {
if (value.includes('rpx')) {
return (parseInt(value, 10) * ((_a = systemInfo === null || systemInfo === void 0 ? void 0 : systemInfo.screenWidth) !== null && _a !== void 0 ? _a : 750)) / 750;
}
return parseInt(value, 10);
}
return value !== null && value !== void 0 ? value : 0;
};
export const setIcon = (iconName, icon, defaultIcon) => {
if (icon) {
if (typeof icon === 'string') {
return {
[`${iconName}Name`]: icon,
[`${iconName}Data`]: {},
};
}
else if (typeof icon === 'object') {
return {
[`${iconName}Name`]: '',
[`${iconName}Data`]: icon,
};
}
else {
return {
[`${iconName}Name`]: defaultIcon,
[`${iconName}Data`]: {},
};
}
}
return {
[`${iconName}Name`]: '',
[`${iconName}Data`]: {},
};
};
export const isBool = (val) => typeof val === 'boolean';
export const isObject = (val) => typeof val === 'object' && val != null;
export const isString = (val) => typeof val === 'string';
export const toCamel = (str) => str.replace(/-(\w)/g, (match, m1) => m1.toUpperCase());
export const getCurrentPage = function () {
const pages = getCurrentPages();
return pages[pages.length - 1];
};
export const uniqueFactory = (compName) => {
let number = 0;
return () => `${prefix}_${compName}_${number++}`;
};
export const calcIcon = (icon, defaultIcon) => {
if (icon && ((isBool(icon) && defaultIcon) || isString(icon))) {
return { name: isBool(icon) ? defaultIcon : icon };
}
if (isObject(icon)) {
return icon;
}
return null;
};
export const isOverSize = (size, sizeLimit) => {
var _a;
if (!sizeLimit)
return false;
const base = 1000;
const unitMap = {
B: 1,
KB: base,
MB: base * base,
GB: base * base * base,
};
const computedSize = typeof sizeLimit === 'number' ? sizeLimit * base : (sizeLimit === null || sizeLimit === void 0 ? void 0 : sizeLimit.size) * unitMap[(_a = sizeLimit === null || sizeLimit === void 0 ? void 0 : sizeLimit.unit) !== null && _a !== void 0 ? _a : 'KB'];
return size > computedSize;
};
export const rpx2px = (rpx) => Math.floor((systemInfo.windowWidth * rpx) / 750);
export const nextTick = () => {
return new Promise((resolve) => {
wx.nextTick(() => {
resolve();
});
});
};

View File

@@ -0,0 +1,144 @@
/* utils */
/**
* addUnit */
// 为 css 添加单位
function addUnit(value) {
// prettier-ignore
var REGEXP = getRegExp('^-?\d+(.\d+)?$');
if (value == null) {
return undefined;
}
return REGEXP.test('' + value) ? value + 'px' : value;
}
function isString(string) {
return string && string.constructor === 'String';
}
function isArray(array) {
return array && array.constructor === 'Array';
}
function isObject(obj) {
return obj && obj.constructor === 'Object';
}
var isNoEmptyObj = function (obj) {
return isObject(obj) && JSON.stringify(obj) !== '{}';
};
function includes(arr, value) {
if (!arr || !isArray(arr)) return false;
var i = 0;
var len = arr.length;
for (; i < len; i++) {
if (arr[i] === value) return true;
}
return false;
}
function cls(base, arr) {
var res = [base];
var i = 0;
for (var size = arr.length; i < size; i++) {
var item = arr[i];
if (item && item.constructor === 'Array') {
var key = arr[i][0];
var value = arr[i][1];
if (value) {
res.push(base + '--' + key);
}
} else if (typeof item === 'string' || typeof item === 'number') {
if (item) {
res.push(base + '--' + item);
}
}
}
return res.join(' ');
}
function getBadgeAriaLabel(options) {
var maxCount = options.maxCount || 99;
if (options.dot) {
return '有新的消息';
}
if (options.count === '...') {
return '有很多消息';
}
if (isNaN(options.count)) {
return options.count;
}
var str1 = '有' + maxCount + '+条消息';
var str2 = '有' + options.count + '条消息';
return Number(options.count) > maxCount ? str1 : str2;
}
function endsWith(str, endStr) {
return str.slice(-endStr.length) === endStr ? str : str + endStr;
}
function keys(obj) {
return JSON.stringify(obj)
.replace(getRegExp('{|}|"', 'g'), '')
.split(',')
.map(function (item) {
return item.split(':')[0];
});
}
function kebabCase(str) {
return str
.replace(getRegExp('[A-Z]', 'g'), function (ele) {
return '-' + ele;
})
.toLowerCase();
}
function _style(styles) {
if (isArray(styles)) {
return styles
.filter(function (item) {
return item != null && item !== '';
})
.map(function (item) {
return isArray(item) ? _style(item) : endsWith(item, ';');
})
.join(' ');
}
if (isObject(styles)) {
return keys(styles)
.filter(function (key) {
return styles[key] != null && styles[key] !== '';
})
.map(function (key) {
return [kebabCase(key), [styles[key]]].join(':');
})
.join(';');
}
return styles;
}
function isValidIconName(str) {
// prettier-ignore
return getRegExp('^[A-Za-z0-9\-]+$').test(str);
}
module.exports = {
addUnit: addUnit,
isString: isString,
isArray: isArray,
isObject: isObject,
isNoEmptyObj: isNoEmptyObj,
includes: includes,
cls: cls,
getBadgeAriaLabel: getBadgeAriaLabel,
_style: _style,
isValidIconName: isValidIconName,
};

View File

@@ -0,0 +1,4 @@
export declare function compareVersion(v1: any, v2: any): 0 | 1 | -1;
export declare function canIUseFormFieldButton(): boolean;
export declare function canUseVirtualHost(): boolean;
export declare function canUseProxyScrollView(): boolean;

View File

@@ -0,0 +1,43 @@
import { getAppBaseInfo } from './wechat';
let systemInfo;
function getSystemInfo() {
if (systemInfo == null) {
systemInfo = getAppBaseInfo();
}
return systemInfo;
}
export function compareVersion(v1, v2) {
v1 = v1.split('.');
v2 = v2.split('.');
const len = Math.max(v1.length, v2.length);
while (v1.length < len) {
v1.push('0');
}
while (v2.length < len) {
v2.push('0');
}
for (let i = 0; i < len; i++) {
const num1 = parseInt(v1[i]);
const num2 = parseInt(v2[i]);
if (num1 > num2) {
return 1;
}
else if (num1 < num2) {
return -1;
}
}
return 0;
}
function judgeByVersion(version) {
const currentSDKVersion = getSystemInfo().SDKVersion;
return compareVersion(currentSDKVersion, version) >= 0;
}
export function canIUseFormFieldButton() {
return judgeByVersion('2.10.3');
}
export function canUseVirtualHost() {
return judgeByVersion('2.19.2');
}
export function canUseProxyScrollView() {
return judgeByVersion('2.19.2');
}

View File

@@ -0,0 +1,4 @@
export declare const getObserver: (context: any, selector: string) => Promise<unknown>;
export declare const getWindowInfo: () => WechatMiniprogram.WindowInfo | WechatMiniprogram.SystemInfo;
export declare const getAppBaseInfo: () => WechatMiniprogram.SystemInfo | WechatMiniprogram.AppBaseInfo;
export declare const getDeviceInfo: () => WechatMiniprogram.SystemInfo | WechatMiniprogram.DeviceInfo;

View File

@@ -0,0 +1,19 @@
export const getObserver = (context, selector) => {
return new Promise((resolve, reject) => {
context
.createIntersectionObserver(context)
.relativeToViewport()
.observe(selector, (res) => {
resolve(res);
});
});
};
export const getWindowInfo = () => {
return wx.getWindowInfo ? wx.getWindowInfo() || wx.getSystemInfoSync() : wx.getSystemInfoSync();
};
export const getAppBaseInfo = () => {
return wx.getAppBaseInfo ? wx.getAppBaseInfo() || wx.getSystemInfoSync() : wx.getSystemInfoSync();
};
export const getDeviceInfo = () => {
return wx.getDeviceInfo ? wx.getDeviceInfo() || wx.getSystemInfoSync() : wx.getSystemInfoSync();
};