start
This commit is contained in:
7
miniprogram_npm/tdesign-miniprogram/common/bus.d.ts
vendored
Normal file
7
miniprogram_npm/tdesign-miniprogram/common/bus.d.ts
vendored
Normal 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;
|
||||
}
|
||||
22
miniprogram_npm/tdesign-miniprogram/common/bus.js
Normal file
22
miniprogram_npm/tdesign-miniprogram/common/bus.js
Normal 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);
|
||||
}
|
||||
}
|
||||
56
miniprogram_npm/tdesign-miniprogram/common/common.d.ts
vendored
Normal file
56
miniprogram_npm/tdesign-miniprogram/common/common.d.ts
vendored
Normal 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;
|
||||
}
|
||||
1
miniprogram_npm/tdesign-miniprogram/common/common.js
Normal file
1
miniprogram_npm/tdesign-miniprogram/common/common.js
Normal file
@@ -0,0 +1 @@
|
||||
export {};
|
||||
3
miniprogram_npm/tdesign-miniprogram/common/component.d.ts
vendored
Normal file
3
miniprogram_npm/tdesign-miniprogram/common/component.d.ts
vendored
Normal file
@@ -0,0 +1,3 @@
|
||||
/// <reference types="miniprogram-api-typings" />
|
||||
declare const TComponent: typeof Component;
|
||||
export default TComponent;
|
||||
5
miniprogram_npm/tdesign-miniprogram/common/component.js
Normal file
5
miniprogram_npm/tdesign-miniprogram/common/component.js
Normal file
@@ -0,0 +1,5 @@
|
||||
const TComponent = (options) => {
|
||||
options.options = Object.assign({ multipleSlots: true, addGlobalClass: true }, options.options);
|
||||
return Component(options);
|
||||
};
|
||||
export default TComponent;
|
||||
5
miniprogram_npm/tdesign-miniprogram/common/config.d.ts
vendored
Normal file
5
miniprogram_npm/tdesign-miniprogram/common/config.d.ts
vendored
Normal file
@@ -0,0 +1,5 @@
|
||||
declare const _default: {
|
||||
prefix: string;
|
||||
};
|
||||
export default _default;
|
||||
export declare const prefix = "t";
|
||||
4
miniprogram_npm/tdesign-miniprogram/common/config.js
Normal file
4
miniprogram_npm/tdesign-miniprogram/common/config.js
Normal file
@@ -0,0 +1,4 @@
|
||||
export default {
|
||||
prefix: "t",
|
||||
};
|
||||
export const prefix = "t";
|
||||
27
miniprogram_npm/tdesign-miniprogram/common/index.wxss
Normal file
27
miniprogram_npm/tdesign-miniprogram/common/index.wxss
Normal 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);
|
||||
}
|
||||
19
miniprogram_npm/tdesign-miniprogram/common/shared/calendar/index.d.ts
vendored
Normal file
19
miniprogram_npm/tdesign-miniprogram/common/shared/calendar/index.d.ts
vendored
Normal 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[];
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
11
miniprogram_npm/tdesign-miniprogram/common/shared/calendar/type.d.ts
vendored
Normal file
11
miniprogram_npm/tdesign-miniprogram/common/shared/calendar/type.d.ts
vendored
Normal 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';
|
||||
@@ -0,0 +1 @@
|
||||
export {};
|
||||
7
miniprogram_npm/tdesign-miniprogram/common/shared/color-picker/cmyk.d.ts
vendored
Normal file
7
miniprogram_npm/tdesign-miniprogram/common/shared/color-picker/cmyk.d.ts
vendored
Normal 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;
|
||||
@@ -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;
|
||||
};
|
||||
107
miniprogram_npm/tdesign-miniprogram/common/shared/color-picker/color.d.ts
vendored
Normal file
107
miniprogram_npm/tdesign-miniprogram/common/shared/color-picker/color.d.ts
vendored
Normal 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;
|
||||
@@ -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;
|
||||
12
miniprogram_npm/tdesign-miniprogram/common/shared/color-picker/gradient.d.ts
vendored
Normal file
12
miniprogram_npm/tdesign-miniprogram/common/shared/color-picker/gradient.d.ts
vendored
Normal 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;
|
||||
@@ -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;
|
||||
3
miniprogram_npm/tdesign-miniprogram/common/shared/color-picker/index.d.ts
vendored
Normal file
3
miniprogram_npm/tdesign-miniprogram/common/shared/color-picker/index.d.ts
vendored
Normal file
@@ -0,0 +1,3 @@
|
||||
export * from './cmyk';
|
||||
export * from './color';
|
||||
export * from './gradient';
|
||||
@@ -0,0 +1,3 @@
|
||||
export * from './cmyk';
|
||||
export * from './color';
|
||||
export * from './gradient';
|
||||
21
miniprogram_npm/tdesign-miniprogram/common/shared/date.d.ts
vendored
Normal file
21
miniprogram_npm/tdesign-miniprogram/common/shared/date.d.ts
vendored
Normal 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;
|
||||
41
miniprogram_npm/tdesign-miniprogram/common/shared/date.js
Normal file
41
miniprogram_npm/tdesign-miniprogram/common/shared/date.js
Normal 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);
|
||||
};
|
||||
15
miniprogram_npm/tdesign-miniprogram/common/src/control.d.ts
vendored
Normal file
15
miniprogram_npm/tdesign-miniprogram/common/src/control.d.ts
vendored
Normal 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 };
|
||||
40
miniprogram_npm/tdesign-miniprogram/common/src/control.js
Normal file
40
miniprogram_npm/tdesign-miniprogram/common/src/control.js
Normal 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 };
|
||||
15
miniprogram_npm/tdesign-miniprogram/common/src/flatTool.d.ts
vendored
Normal file
15
miniprogram_npm/tdesign-miniprogram/common/src/flatTool.d.ts
vendored
Normal 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;
|
||||
57
miniprogram_npm/tdesign-miniprogram/common/src/flatTool.js
Normal file
57
miniprogram_npm/tdesign-miniprogram/common/src/flatTool.js
Normal 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]';
|
||||
};
|
||||
4
miniprogram_npm/tdesign-miniprogram/common/src/index.d.ts
vendored
Normal file
4
miniprogram_npm/tdesign-miniprogram/common/src/index.d.ts
vendored
Normal file
@@ -0,0 +1,4 @@
|
||||
export * from './superComponent';
|
||||
export * from './flatTool';
|
||||
export * from './instantiationDecorator';
|
||||
export * from './control';
|
||||
4
miniprogram_npm/tdesign-miniprogram/common/src/index.js
Normal file
4
miniprogram_npm/tdesign-miniprogram/common/src/index.js
Normal file
@@ -0,0 +1,4 @@
|
||||
export * from './superComponent';
|
||||
export * from './flatTool';
|
||||
export * from './instantiationDecorator';
|
||||
export * from './control';
|
||||
3
miniprogram_npm/tdesign-miniprogram/common/src/instantiationDecorator.d.ts
vendored
Normal file
3
miniprogram_npm/tdesign-miniprogram/common/src/instantiationDecorator.d.ts
vendored
Normal 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;
|
||||
@@ -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);
|
||||
};
|
||||
};
|
||||
19
miniprogram_npm/tdesign-miniprogram/common/src/superComponent.d.ts
vendored
Normal file
19
miniprogram_npm/tdesign-miniprogram/common/src/superComponent.d.ts
vendored
Normal 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();
|
||||
}
|
||||
@@ -0,0 +1,5 @@
|
||||
export class SuperComponent {
|
||||
constructor() {
|
||||
this.app = getApp();
|
||||
}
|
||||
}
|
||||
27
miniprogram_npm/tdesign-miniprogram/common/style/index.wxss
Normal file
27
miniprogram_npm/tdesign-miniprogram/common/style/index.wxss
Normal 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);
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
@@ -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);
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
@@ -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%;
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
@@ -0,0 +1,8 @@
|
||||
@keyframes tdesign-fade-out {
|
||||
from {
|
||||
opacity: 1;
|
||||
}
|
||||
to {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,6 @@
|
||||
.t-float-left {
|
||||
float: left;
|
||||
}
|
||||
.t-float-right {
|
||||
float: right;
|
||||
}
|
||||
@@ -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);
|
||||
}
|
||||
@@ -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>
|
||||
@@ -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>
|
||||
@@ -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>
|
||||
@@ -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>
|
||||
40
miniprogram_npm/tdesign-miniprogram/common/utils.d.ts
vendored
Normal file
40
miniprogram_npm/tdesign-miniprogram/common/utils.d.ts
vendored
Normal 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 {};
|
||||
252
miniprogram_npm/tdesign-miniprogram/common/utils.js
Normal file
252
miniprogram_npm/tdesign-miniprogram/common/utils.js
Normal 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();
|
||||
});
|
||||
});
|
||||
};
|
||||
144
miniprogram_npm/tdesign-miniprogram/common/utils.wxs
Normal file
144
miniprogram_npm/tdesign-miniprogram/common/utils.wxs
Normal 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,
|
||||
};
|
||||
4
miniprogram_npm/tdesign-miniprogram/common/version.d.ts
vendored
Normal file
4
miniprogram_npm/tdesign-miniprogram/common/version.d.ts
vendored
Normal 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;
|
||||
43
miniprogram_npm/tdesign-miniprogram/common/version.js
Normal file
43
miniprogram_npm/tdesign-miniprogram/common/version.js
Normal 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');
|
||||
}
|
||||
4
miniprogram_npm/tdesign-miniprogram/common/wechat.d.ts
vendored
Normal file
4
miniprogram_npm/tdesign-miniprogram/common/wechat.d.ts
vendored
Normal 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;
|
||||
19
miniprogram_npm/tdesign-miniprogram/common/wechat.js
Normal file
19
miniprogram_npm/tdesign-miniprogram/common/wechat.js
Normal 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();
|
||||
};
|
||||
Reference in New Issue
Block a user