first commit
This commit is contained in:
lingxiao865
84
uni_modules/tdesign-uniapp/components/common/bus.js
Normal file
84
uni_modules/tdesign-uniapp/components/common/bus.js
Normal file
@@ -0,0 +1,84 @@
|
||||
export default class Bus {
|
||||
constructor() {
|
||||
this.listeners = new Map();
|
||||
this.emitted = new Map(); // 改为Map存储事件参数
|
||||
this.onceListeners = new Map();
|
||||
}
|
||||
|
||||
on(evtName, listener) {
|
||||
const target = this.listeners.get(evtName) || [];
|
||||
target.push(listener);
|
||||
this.listeners.set(evtName, target);
|
||||
|
||||
// 如果事件已触发过，用保存的参数立即执行
|
||||
if (this.emitted.has(evtName)) {
|
||||
listener(...this.emitted.get(evtName));
|
||||
}
|
||||
}
|
||||
|
||||
once(evtName, listener) {
|
||||
// 如果事件已经触发过，立即执行并返回
|
||||
if (this.emitted.has(evtName)) {
|
||||
listener(...this.emitted.get(evtName));
|
||||
return;
|
||||
}
|
||||
|
||||
// 封装自移除函数
|
||||
const onceWrapper = (...args) => {
|
||||
listener(...args);
|
||||
this.off(evtName, onceWrapper);
|
||||
};
|
||||
|
||||
// 存储原始监听器用于精准移除
|
||||
const onceMap = this.onceListeners.get(evtName) || new Map();
|
||||
onceMap.set(listener, onceWrapper);
|
||||
this.onceListeners.set(evtName, onceMap);
|
||||
|
||||
// 注册封装函数
|
||||
this.on(evtName, onceWrapper);
|
||||
}
|
||||
|
||||
emit(evtName, ...args) {
|
||||
// 保存事件参数
|
||||
this.emitted.set(evtName, args);
|
||||
|
||||
const listeners = this.listeners.get(evtName) || [];
|
||||
// 使用副本避免执行时修改数组
|
||||
[...listeners].forEach(func => func(...args));
|
||||
}
|
||||
|
||||
off(evtName, listener) {
|
||||
if (listener) {
|
||||
// 处理一次性监听器的原始引用
|
||||
const onceMap = this.onceListeners.get(evtName);
|
||||
if (onceMap && onceMap.has(listener)) {
|
||||
const wrapper = onceMap.get(listener);
|
||||
this._removeListener(evtName, wrapper);
|
||||
onceMap.delete(listener);
|
||||
return;
|
||||
}
|
||||
|
||||
// 处理普通监听器
|
||||
this._removeListener(evtName, listener);
|
||||
} else {
|
||||
// 移除所有监听器
|
||||
this.listeners.delete(evtName);
|
||||
this.onceListeners.delete(evtName);
|
||||
this.emitted.delete(evtName);
|
||||
}
|
||||
}
|
||||
|
||||
// 私有方法：从指定事件中移除单个监听器
|
||||
_removeListener(evtName, listener) {
|
||||
const listeners = this.listeners.get(evtName);
|
||||
if (!listeners) return;
|
||||
|
||||
const index = listeners.indexOf(listener);
|
||||
if (index > -1) {
|
||||
listeners.splice(index, 1);
|
||||
if (listeners.length === 0) {
|
||||
this.listeners.delete(evtName);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
53
uni_modules/tdesign-uniapp/components/common/canvas/index.js
Normal file
53
uni_modules/tdesign-uniapp/components/common/canvas/index.js
Normal file
@@ -0,0 +1,53 @@
|
||||
export async function loadImage({
|
||||
canvas,
|
||||
src,
|
||||
}) {
|
||||
let result = null;
|
||||
if (!src || !canvas) {
|
||||
return result;
|
||||
}
|
||||
|
||||
// #ifdef MP
|
||||
// 小程序环境：使用 canvas.createImage
|
||||
if (canvas.createImage) {
|
||||
result = new Promise((resolve, reject) => {
|
||||
const img = canvas.createImage();
|
||||
// 必须先设置 onload 和 onerror，再设置 src
|
||||
img.onload = () => resolve(img);
|
||||
img.onerror = (err) => {
|
||||
console.error('创建图片对象失败:', err);
|
||||
reject(err);
|
||||
};
|
||||
img.src = src;
|
||||
});
|
||||
}
|
||||
// #endif
|
||||
|
||||
// #ifdef APP-PLUS
|
||||
result = new Promise((resolve) => {
|
||||
uni.getImageInfo({
|
||||
src,
|
||||
success: (res) => {
|
||||
const imgPath = res.path; // 本地临时路径
|
||||
resolve(imgPath);
|
||||
},
|
||||
});
|
||||
});
|
||||
// #endif
|
||||
|
||||
// #ifdef H5
|
||||
// H5 环境：创建 Image 对象（参考 TSX 实现）
|
||||
result = new Promise((resolve, reject) => {
|
||||
const img = new Image();
|
||||
img.crossOrigin = 'anonymous';
|
||||
img.onload = () => resolve(img);
|
||||
img.onerror = (err) => {
|
||||
console.error('图标加载失败:', err);
|
||||
reject(err);
|
||||
};
|
||||
img.src = src;
|
||||
});
|
||||
// #endif
|
||||
|
||||
return result;
|
||||
}
|
||||
173
uni_modules/tdesign-uniapp/components/common/common.ts
Normal file
173
uni_modules/tdesign-uniapp/components/common/common.ts
Normal file
@@ -0,0 +1,173 @@
|
||||
export type Classes = Array<string>;
|
||||
|
||||
export interface Styles {
|
||||
[css: string]: string | number;
|
||||
}
|
||||
|
||||
export type ImageEvent = any;
|
||||
|
||||
export type PlainObject = { [key: string]: any };
|
||||
|
||||
export type OptionData = {
|
||||
label?: string;
|
||||
value?: string | number;
|
||||
} & PlainObject;
|
||||
|
||||
export type TreeOptionData<T = string | number> = {
|
||||
children?: Array<TreeOptionData<T>> | boolean;
|
||||
/** option label content */
|
||||
label?: string;
|
||||
/** option search text */
|
||||
text?: string;
|
||||
/** option value */
|
||||
value?: T;
|
||||
/** option node content */
|
||||
content?: string;
|
||||
} & PlainObject;
|
||||
|
||||
export type FormResetEvent = Event;
|
||||
|
||||
export type FormSubmitEvent = Event;
|
||||
|
||||
/**
|
||||
* 移除 on 前缀并可选地去掉可选修饰符
|
||||
* @param T - 原始类型
|
||||
* @param MakeRequired - 是否将属性变为必需（默认 false）
|
||||
*/
|
||||
export type TransformEventHandlers<
|
||||
T,
|
||||
MakeRequired extends boolean = false
|
||||
> = MakeRequired extends true
|
||||
? {
|
||||
[K in keyof T as K extends `on${infer Event}`
|
||||
? Uncapitalize<Event>
|
||||
: never
|
||||
]-?: T[K]
|
||||
}
|
||||
: {
|
||||
[K in keyof T as K extends `on${infer Event}`
|
||||
? Uncapitalize<Event>
|
||||
: never
|
||||
]: T[K]
|
||||
};
|
||||
|
||||
|
||||
type WrapWithContext<T extends (...args: any[]) => any> =
|
||||
T extends (...args: infer P) => infer R
|
||||
? (context: { [K in keyof P]: P[K] }) => R
|
||||
: never;
|
||||
|
||||
|
||||
export type WrapParamsWithContext<T> = {
|
||||
[K in keyof T]: T[K] extends (...args: any[]) => any
|
||||
? WrapWithContext<T[K]>
|
||||
: T[K];
|
||||
};
|
||||
|
||||
|
||||
// 提取非 on 开头的属性
|
||||
export type ExtractNonOnProps<T> = {
|
||||
[K in keyof T as K extends `on${string}` ? never : K]: T[K]
|
||||
};
|
||||
|
||||
export interface IsEmailOptions {
|
||||
allow_display_name?: boolean;
|
||||
require_display_name?: boolean;
|
||||
allow_utf8_local_part?: boolean;
|
||||
require_tld?: boolean;
|
||||
allow_ip_dot?: boolean;
|
||||
domain_specific_validation?: boolean;
|
||||
host_blacklist?: string[];
|
||||
ignore_max_length?: boolean;
|
||||
}
|
||||
|
||||
export interface IsURLOptions {
|
||||
protocols?: string[];
|
||||
require_tld?: boolean;
|
||||
require_protocol?: boolean;
|
||||
require_host?: boolean;
|
||||
require_port?: boolean;
|
||||
require_valid_protocol?: boolean;
|
||||
allow_underscores?: boolean;
|
||||
host_whitelist?: (string | RegExp)[];
|
||||
host_blacklist?: (string | RegExp)[];
|
||||
allow_trailing_dot?: boolean;
|
||||
allow_protocol_relative_urls?: boolean;
|
||||
disallow_auth?: boolean;
|
||||
validate_length?: boolean;
|
||||
}
|
||||
/**
|
||||
* 通用全局类型
|
||||
* */
|
||||
export type SizeEnum = 'small' | 'medium' | 'large';
|
||||
|
||||
export type ShapeEnum = 'circle' | 'round';
|
||||
|
||||
export type HorizontalAlignEnum = 'left' | 'center' | 'right';
|
||||
|
||||
export type VerticalAlignEnum = 'top' | 'middle' | 'bottom';
|
||||
|
||||
export type LayoutEnum = 'vertical' | 'horizontal';
|
||||
|
||||
export type ClassName = { [className: string]: any } | ClassName[] | string;
|
||||
|
||||
export 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 {
|
||||
/**
|
||||
* 表示除可视区域外，额外渲染的行数，避免快速滚动过程中，新出现的内容来不及渲染从而出现空白
|
||||
* @default 20
|
||||
*/
|
||||
bufferSize?: number;
|
||||
/**
|
||||
* 表示每行内容是否同一个固定高度，仅在 `scroll.type` 为 `virtual` 时有效，该属性设置为 `true` 时，可用于简化虚拟滚动内部计算逻辑，提升性能，此时则需要明确指定 `scroll.rowHeight` 属性的值
|
||||
* @default false
|
||||
*/
|
||||
isFixedRowHeight?: boolean;
|
||||
/**
|
||||
* 行高，不会给元素添加样式高度，仅作为滚动时的行高参考。一般情况不需要设置该属性。如果设置，可尽量将该属性设置为每行平均高度，从而使得滚动过程更加平滑
|
||||
*/
|
||||
rowHeight?: number;
|
||||
/**
|
||||
* 启动虚拟滚动的阈值。为保证组件收益最大化，当数据量小于阈值 `scroll.threshold` 时，无论虚拟滚动的配置是否存在，组件内部都不会开启虚拟滚动
|
||||
* @default 100
|
||||
*/
|
||||
threshold?: number;
|
||||
/**
|
||||
* 滚动加载类型，有两种：懒加载和虚拟滚动。<br />值为 `lazy` ，表示滚动时会进行懒加载，非可视区域内的内容将不会默认渲染，直到该内容可见时，才会进行渲染，并且已渲染的内容滚动到不可见时，不会被销毁；<br />值为`virtual`时，表示会进行虚拟滚动，无论滚动条滚动到哪个位置，同一时刻，仅渲染该可视区域内的内容，当需要展示的数据量较大时，建议开启该特性
|
||||
*/
|
||||
type: 'lazy' | 'virtual';
|
||||
}
|
||||
|
||||
/**
|
||||
* @deprecated use TScroll instead
|
||||
*/
|
||||
export type InfinityScroll = TScroll;
|
||||
|
||||
export interface ScrollToElementParams {
|
||||
/** 跳转元素下标 */
|
||||
index?: number;
|
||||
/** 跳转元素距离顶部的距离 */
|
||||
top?: number;
|
||||
/** 单个元素高度非固定场景下，即 isFixedRowHeight = false。延迟设置元素位置，一般用于依赖不同高度异步渲染等场景，单位：毫秒 */
|
||||
time?: number;
|
||||
behavior?: 'auto' | 'smooth';
|
||||
}
|
||||
|
||||
export interface ComponentScrollToElementParams extends ScrollToElementParams {
|
||||
key?: string | number;
|
||||
}
|
||||
9
uni_modules/tdesign-uniapp/components/common/config.js
Normal file
9
uni_modules/tdesign-uniapp/components/common/config.js
Normal file
@@ -0,0 +1,9 @@
|
||||
export default {
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
prefix: 't',
|
||||
};
|
||||
export const prefix = 't';
|
||||
|
||||
export const ISOLATED_RELATION_KEY = '-1';
|
||||
@@ -0,0 +1 @@
|
||||
export { selectComponent } from './select-component';
|
||||
@@ -0,0 +1,26 @@
|
||||
export function selectComponent(context, selector) {
|
||||
if (!selector || !context) return;
|
||||
|
||||
if (typeof selector === 'function') {
|
||||
return selector(context);
|
||||
}
|
||||
|
||||
let attribute = selector;
|
||||
if (attribute.match(/^[^\w]/)) {
|
||||
attribute = attribute.slice(1);
|
||||
}
|
||||
|
||||
if (
|
||||
context.$refs && context.$refs[attribute]) {
|
||||
return context.$refs[attribute];
|
||||
}
|
||||
|
||||
if (context && typeof context.$selectComponent === 'function') {
|
||||
const res = context.$selectComponent(selector);
|
||||
return res;
|
||||
}
|
||||
|
||||
return context && context.selectComponent && context.selectComponent(selector);
|
||||
}
|
||||
|
||||
|
||||
@@ -0,0 +1,10 @@
|
||||
/**
|
||||
* 解析事件里的动态函数名，这种没有()的函数名，在uniapp不被执行
|
||||
* 比如：<view bindtap="{{openId==undefined?'denglu':'hy_to'}}">立即</view>
|
||||
* @param {*} exp
|
||||
*/
|
||||
export function parseEventDynamicCode(e, exp, ...args) {
|
||||
if (typeof(this[exp]) === 'function') {
|
||||
this[exp](e, ...args);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,51 @@
|
||||
function formatPropKey(key) {
|
||||
return key.replace(/^(\w)/, (a, b) => `data${b.toUpperCase()}`);
|
||||
}
|
||||
|
||||
|
||||
function getPropsWatch(props) {
|
||||
const watchProps = Object.keys(props).reduce((acc, item) => {
|
||||
acc[item] = {
|
||||
handler(val) {
|
||||
this[formatPropKey(item)] = val;
|
||||
},
|
||||
};
|
||||
return acc;
|
||||
}, {});
|
||||
return watchProps;
|
||||
}
|
||||
|
||||
|
||||
function getPropsData(context, props) {
|
||||
const propsData = Object.keys(props).reduce((acc, item) => {
|
||||
acc[formatPropKey(item)] = context[item];
|
||||
return acc;
|
||||
}, {});
|
||||
return propsData;
|
||||
}
|
||||
|
||||
|
||||
function setPropsToData(data) {
|
||||
Object.keys(data).forEach((key) => {
|
||||
this[formatPropKey(key)] = data[key];
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
export function getFunctionalMixin(dialogProps) {
|
||||
return {
|
||||
data() {
|
||||
return {
|
||||
...getPropsData(this, dialogProps),
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
...getPropsWatch(dialogProps),
|
||||
},
|
||||
methods: {
|
||||
setData(data) {
|
||||
setPropsToData.call(this, data);
|
||||
},
|
||||
},
|
||||
};
|
||||
}
|
||||
@@ -0,0 +1,6 @@
|
||||
export { RELATION_MAP } from './parent-map';
|
||||
|
||||
export {
|
||||
ChildrenMixin,
|
||||
ParentMixin,
|
||||
} from './relation';
|
||||
@@ -0,0 +1,26 @@
|
||||
export const RELATION_MAP = {
|
||||
CollapsePanel: 'Collapse',
|
||||
TabPanel: 'Tabs',
|
||||
|
||||
StepItem: 'Steps',
|
||||
TabBarItem: 'TabBar',
|
||||
SideBarItem: 'SideBar',
|
||||
GridItem: 'Grid',
|
||||
DropdownItem: 'DropdownMenu',
|
||||
|
||||
Radio: 'RadioGroup',
|
||||
Checkbox: 'CheckboxGroup',
|
||||
Cell: 'CellGroup',
|
||||
Avatar: 'AvatarGroup',
|
||||
PickerItem: 'Picker',
|
||||
|
||||
IndexesAnchor: 'Indexes',
|
||||
SwiperNav: 'Swiper',
|
||||
|
||||
Col: 'Row',
|
||||
BackTop: 'PullDownRefresh',
|
||||
|
||||
FormItem: 'Form',
|
||||
|
||||
FormKey: 'FormKey',
|
||||
};
|
||||
@@ -0,0 +1,213 @@
|
||||
// #ifdef H5
|
||||
// import { sortChildren } from '../../common/dom/vnodes-h5';
|
||||
// #endif
|
||||
// #ifndef H5
|
||||
// import { sortMPChildren } from '../../common/dom/vnodes-mp';
|
||||
// #endif
|
||||
|
||||
function findNearListParent(children = [], name) {
|
||||
let temp;
|
||||
for (const item of children) {
|
||||
// console.log('__nodeId__', item, item.$options.name, parentRelationKey, thisRelationKey);
|
||||
const parentRelationKey = item.$props && item.$props.relationKey;
|
||||
const thisRelationKey = this.$props && this.$props.relationKey;
|
||||
if (item.$options.name === name && parentRelationKey === thisRelationKey) {
|
||||
temp = item;
|
||||
}
|
||||
if (item === this && temp) {
|
||||
// console.log('item === this', item);
|
||||
return temp;
|
||||
}
|
||||
const foundInChildren = findNearListParent.call(this, item.$children, name);
|
||||
if (foundInChildren) {
|
||||
return foundInChildren;
|
||||
}
|
||||
}
|
||||
|
||||
return temp;
|
||||
}
|
||||
|
||||
|
||||
function getParentInToutiao(name) {
|
||||
let parent = this.$parent;
|
||||
if (!parent) {
|
||||
const pages = getCurrentPages();
|
||||
parent = pages[pages.length - 1]?.$vm;
|
||||
}
|
||||
|
||||
if (parent && !parent.$parent) {
|
||||
const children = parent.$children;
|
||||
if (!children || !children.length) return;
|
||||
const result = findNearListParent.call(this, children, name);
|
||||
// const result2 = children.find(item => item.$options.name === name);
|
||||
// console.log('result2', result2, result2.__nodeId__);
|
||||
// console.log('result', result, result.__nodeId__);
|
||||
return result;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
function getParent(name = '') {
|
||||
const found = getParentInToutiao.call(this, name);
|
||||
if (found) {
|
||||
return found;
|
||||
}
|
||||
|
||||
let parent = this.$parent;
|
||||
|
||||
if (!parent) {
|
||||
return;
|
||||
}
|
||||
|
||||
let parentName = parent.$options.name;
|
||||
while (parentName !== name) {
|
||||
parent = parent.$parent;
|
||||
if (!parent) return false;
|
||||
parentName = parent.$options.name;
|
||||
}
|
||||
return parent;
|
||||
}
|
||||
|
||||
|
||||
export function ChildrenMixin(parent, options = {}) {
|
||||
const indexKey = options.indexKey || 'index';
|
||||
|
||||
return {
|
||||
inject: {
|
||||
// #ifndef MP-TOUTIAO
|
||||
[parent]: {
|
||||
default: null,
|
||||
},
|
||||
// #endif
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
// #ifdef MP-TOUTIAO
|
||||
[parent]: null,
|
||||
// #endif
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
// 会造成循环引用
|
||||
// parent() {
|
||||
// if (this.disableBindRelation) {
|
||||
// return null;
|
||||
// }
|
||||
|
||||
// return this[parent];
|
||||
// },
|
||||
|
||||
[indexKey]() {
|
||||
const that = this;
|
||||
|
||||
that.bindRelation();
|
||||
|
||||
if (that[parent]) {
|
||||
return that[parent].children.indexOf(this);
|
||||
}
|
||||
|
||||
return null;
|
||||
},
|
||||
},
|
||||
|
||||
watch: {
|
||||
disableBindRelation(val) {
|
||||
const that = this;
|
||||
if (!val) {
|
||||
that.bindRelation();
|
||||
}
|
||||
},
|
||||
},
|
||||
|
||||
created() {
|
||||
// 循环引用调试代码
|
||||
// this[parent].children.push(this);
|
||||
// #ifndef H5
|
||||
const that = this;
|
||||
that.bindRelation();
|
||||
// #endif
|
||||
},
|
||||
|
||||
|
||||
mounted() {
|
||||
// #ifdef H5
|
||||
const that = this;
|
||||
that.bindRelation();
|
||||
// #endif
|
||||
},
|
||||
|
||||
// #ifdef VUE2
|
||||
beforeDestroy() {
|
||||
const that = this;
|
||||
that.onBeforeMount();
|
||||
},
|
||||
// #endif
|
||||
|
||||
// #ifdef VUE3
|
||||
beforeUnmount() {
|
||||
const that = this;
|
||||
that.onBeforeMount();
|
||||
},
|
||||
// #endif
|
||||
|
||||
methods: {
|
||||
bindRelation() {
|
||||
// #ifdef MP-TOUTIAO
|
||||
const parentComponentName = `T${parent}`;
|
||||
this[parent] = getParent.call(this, parentComponentName);
|
||||
// #endif
|
||||
if (!this[parent] || (this[parent].children && this[parent].children.indexOf(this) !== -1)) {
|
||||
return;
|
||||
}
|
||||
|
||||
const children = [...(this[parent].children || []), this];
|
||||
|
||||
|
||||
// #ifdef H5
|
||||
try {
|
||||
// sortChildren(children, this[parent]);
|
||||
} catch (err) {
|
||||
console.log('err', err);
|
||||
}
|
||||
// #endif
|
||||
|
||||
// #ifndef H5
|
||||
// sortMPChildren(children);
|
||||
// #endif
|
||||
|
||||
this[parent].children = children;
|
||||
this.innerAfterLinked?.(this);
|
||||
this[parent].innerAfterLinked?.(this);
|
||||
|
||||
// console.log('bindRelation.children', children);
|
||||
},
|
||||
onBeforeMount() {
|
||||
const that = this;
|
||||
if (that[parent]) {
|
||||
that[parent].children = that[parent].children.filter(item => item !== that);
|
||||
this[parent].innerAfterUnLinked?.(this);
|
||||
this.innerAfterUnLinked?.(this);
|
||||
|
||||
that?.destroyCallback?.();
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
export function ParentMixin(parent) {
|
||||
return {
|
||||
provide() {
|
||||
return {
|
||||
[parent]: this,
|
||||
};
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
// 会造成循环引用
|
||||
// children: [],
|
||||
};
|
||||
},
|
||||
};
|
||||
}
|
||||
13
uni_modules/tdesign-uniapp/components/common/route.js
Normal file
13
uni_modules/tdesign-uniapp/components/common/route.js
Normal file
@@ -0,0 +1,13 @@
|
||||
export function goBackOrGoHome(home = '/pages/home/home') {
|
||||
const pages = getCurrentPages();
|
||||
|
||||
if (pages.length > 1) {
|
||||
uni.navigateBack();
|
||||
} else {
|
||||
uni.navigateTo({
|
||||
url: home,
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
export default goBackOrGoHome;
|
||||
@@ -0,0 +1,5 @@
|
||||
export function initTDesign() {
|
||||
return {
|
||||
};
|
||||
}
|
||||
|
||||
@@ -0,0 +1,16 @@
|
||||
function getRegExp() {
|
||||
const args = Array.prototype.slice.call(arguments);
|
||||
args.unshift(RegExp);
|
||||
return new (Function.prototype.bind.apply(RegExp, args))();
|
||||
}
|
||||
|
||||
/**
|
||||
* wxs getDate
|
||||
*/
|
||||
function getDate() {
|
||||
const args = Array.prototype.slice.call(arguments);
|
||||
args.unshift(Date);
|
||||
return new (Function.prototype.bind.apply(Date, args))();
|
||||
}
|
||||
|
||||
export { getDate, getRegExp };
|
||||
@@ -0,0 +1,128 @@
|
||||
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, allowSameDay, format } = this;
|
||||
const minDateRect = getDateRect(minDate);
|
||||
let { year: minYear, month: minMonth } = minDateRect;
|
||||
const { time: minTime } = minDateRect;
|
||||
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;
|
||||
const compareWithStart = startDate && isSameDate({ year, month, date }, startDate);
|
||||
const compareWithEnd = endDate && isSameDate({ year, month, date }, endDate);
|
||||
|
||||
if (compareWithStart && compareWithEnd && allowSameDay) return 'start-end';
|
||||
if (compareWithStart) return 'start';
|
||||
if (compareWithEnd) 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 += 1) {
|
||||
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;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,14 @@
|
||||
export type TCalendarValue = number | Date;
|
||||
|
||||
export type TDateType = 'selected' | 'disabled' | 'start-end' | 'start' | 'centre' | 'end' | '';
|
||||
|
||||
export type TCalendarType = 'single' | 'multiple' | 'range';
|
||||
|
||||
export interface TDate {
|
||||
date: Date;
|
||||
day: number;
|
||||
type: TDateType;
|
||||
className?: string;
|
||||
prefix?: string;
|
||||
suffix?: string;
|
||||
}
|
||||
@@ -0,0 +1,78 @@
|
||||
/**
|
||||
* rgb 转 cmyk
|
||||
* @param red
|
||||
* @param green
|
||||
* @param blue
|
||||
* @returns
|
||||
*/
|
||||
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];
|
||||
};
|
||||
/**
|
||||
* cmyk 转 rgb
|
||||
* @param cyan
|
||||
* @param magenta
|
||||
* @param yellow
|
||||
* @param black
|
||||
* @returns
|
||||
*/
|
||||
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)));
|
||||
/**
|
||||
* 输入色转rgb
|
||||
* @param input
|
||||
* @returns
|
||||
*/
|
||||
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;
|
||||
};
|
||||
|
||||
@@ -0,0 +1,428 @@
|
||||
import tinyColor from '../../../npm/tinycolor2/esm/tinycolor.js';
|
||||
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();
|
||||
/**
|
||||
* 将渐变对象转换成字符串
|
||||
* @param object
|
||||
* @returns
|
||||
*/
|
||||
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(',')})`;
|
||||
};
|
||||
/**
|
||||
* 去除颜色的透明度
|
||||
* @param color
|
||||
* @returns
|
||||
*/
|
||||
export const getColorWithoutAlpha = color => tinyColor(color).setAlpha(1)
|
||||
.toHexString();
|
||||
// 生成一个随机ID
|
||||
export const genId = () => (1 + Math.random() * 4294967295).toString(16);
|
||||
/**
|
||||
* 生成一个渐变颜色
|
||||
* @param left
|
||||
* @param color
|
||||
* @returns
|
||||
*/
|
||||
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) {
|
||||
let _a; let _b;
|
||||
const gradientColors = parseGradientString(input);
|
||||
if (this.isGradient && !gradientColors) {
|
||||
// 处理gradient模式下切换不同格式时的交互问题，输入的不是渐变字符串才使用当前处理
|
||||
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) {
|
||||
let _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 = { ...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,
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* 判断输入色是否与当前色相同
|
||||
* @param color
|
||||
* @returns
|
||||
*/
|
||||
equals(color) {
|
||||
return tinyColor.equals(this.rgba, color);
|
||||
}
|
||||
|
||||
/**
|
||||
* 校验输入色是否是一个有效颜色
|
||||
* @param color
|
||||
* @returns
|
||||
*/
|
||||
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();
|
||||
}
|
||||
|
||||
/**
|
||||
* 对象转颜色字符串
|
||||
* @param object
|
||||
* @param format
|
||||
* @returns
|
||||
*/
|
||||
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();
|
||||
}
|
||||
}
|
||||
/**
|
||||
* 是否是渐变色
|
||||
* @param input
|
||||
* @returns
|
||||
*/
|
||||
Color.isGradientColor = input => !!isGradientColor(input);
|
||||
/**
|
||||
* 比较两个颜色是否相同
|
||||
* @param color1
|
||||
* @param color2
|
||||
* @returns
|
||||
*/
|
||||
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',
|
||||
];
|
||||
/**
|
||||
* 获取对外输出的color对象
|
||||
* @param color
|
||||
* @returns
|
||||
*/
|
||||
export const getColorObject = (color) => {
|
||||
if (!color) {
|
||||
return null;
|
||||
}
|
||||
const colorObject = Object.create(null);
|
||||
// eslint-disable-next-line no-return-assign
|
||||
COLOR_OBJECT_OUTPUT_KEYS.forEach(key => (colorObject[key] = color[key]));
|
||||
if (color.isGradient) {
|
||||
colorObject.linearGradient = color.linearGradient;
|
||||
}
|
||||
return colorObject;
|
||||
};
|
||||
export default Color;
|
||||
@@ -0,0 +1,180 @@
|
||||
/**
|
||||
* 用于反解析渐变字符串为对象
|
||||
* https://stackoverflow.com/questions/20215440/parse-css-gradient-rule-with-javascript-regex
|
||||
*/
|
||||
import tinyColor from '../../../npm/tinycolor2/esm/tinycolor.js';
|
||||
import { isString, isNull } from '../../validator';
|
||||
/** ../../validator.js
|
||||
* Utility combine multiple regular expressions.
|
||||
*
|
||||
* @param {RegExp[]|string[]} regexpList List of regular expressions or strings.
|
||||
* @param {string} flags Normal RegExp flags.
|
||||
*/
|
||||
const combineRegExp = (regexpList, flags) => {
|
||||
let source = '';
|
||||
for (let i = 0; i < regexpList.length; i += 1) {
|
||||
if (isString(regexpList[i])) {
|
||||
source += regexpList[i];
|
||||
} else {
|
||||
source += regexpList[i].source;
|
||||
}
|
||||
}
|
||||
return new RegExp(source, flags);
|
||||
};
|
||||
/**
|
||||
* Generate the required regular expressions once.
|
||||
*
|
||||
* Regular Expressions are easier to manage this way and can be well described.
|
||||
*
|
||||
* @result {object} Object containing regular expressions.
|
||||
*/
|
||||
const generateRegExp = () => {
|
||||
// Note any variables with "Capture" in name include capturing bracket set(s).
|
||||
const searchFlags = 'gi'; // ignore case for angles, "rgb" etc
|
||||
const rAngle = /(?:[+-]?\d*\.?\d+)(?:deg|grad|rad|turn)/; // Angle +ive, -ive and angle types
|
||||
// optional 2nd part
|
||||
const rSideCornerCapture = /to\s+((?:(?:left|right|top|bottom)(?:\s+(?:top|bottom|left|right))?))/;
|
||||
const rComma = /\s*,\s*/; // Allow space around comma.
|
||||
const rColorHex = /#(?:[a-f0-9]{6}|[a-f0-9]{3})/; // 3 or 6 character form
|
||||
const rDigits3 = /\(\s*(?:\d{1,3}\s*,\s*){2}\d{1,3}\s*\)/;
|
||||
const // "(1, 2, 3)"
|
||||
rDigits4 = /\(\s*(?:\d{1,3}\s*,\s*){2}\d{1,3}\s*,\s*\d*\.?\d+\)/;
|
||||
const // "(1, 2, 3, 4)"
|
||||
rValue = /(?:[+-]?\d*\.?\d+)(?:%|[a-z]+)?/;
|
||||
const // ".9", "-5px", "100%".
|
||||
rKeyword = /[_a-z-][_a-z0-9-]*/;
|
||||
const // "red", "transparent".
|
||||
rColor = combineRegExp(['(?:', rColorHex, '|', '(?:rgb|hsl)', rDigits3, '|', '(?:rgba|hsla)', rDigits4, '|', rKeyword, ')'], '');
|
||||
const rColorStop = combineRegExp([rColor, '(?:\\s+', rValue, '(?:\\s+', rValue, ')?)?'], '');
|
||||
const // Single Color Stop, optional %, optional length.
|
||||
rColorStopList = combineRegExp(['(?:', rColorStop, rComma, ')*', rColorStop], '');
|
||||
const // List of color stops min 1.
|
||||
rLineCapture = combineRegExp(['(?:(', rAngle, ')|', rSideCornerCapture, ')'], '');
|
||||
const // Angle or SideCorner
|
||||
rGradientSearch = combineRegExp(['(?:(', rLineCapture, ')', rComma, ')?(', rColorStopList, ')'], searchFlags);
|
||||
const // Capture 1:"line", 2:"angle" (optional), 3:"side corner" (optional) and 4:"stop list".
|
||||
rColorStopSearch = combineRegExp(['\\s*(', rColor, ')', '(?:\\s+', '(', rValue, '))?', '(?:', rComma, '\\s*)?'], searchFlags); // Capture 1:"color" and 2:"position" (optional).
|
||||
return {
|
||||
gradientSearch: rGradientSearch,
|
||||
colorStopSearch: rColorStopSearch,
|
||||
};
|
||||
};
|
||||
/**
|
||||
* Actually parse the input gradient parameters string into an object for reusability.
|
||||
*
|
||||
*
|
||||
* @note Really this only supports the standard syntax not historical versions, see MDN for details
|
||||
* https://developer.mozilla.org/en-US/docs/Web/CSS/linear-gradient
|
||||
*
|
||||
* @param regExpLib
|
||||
* @param {string} input
|
||||
* @returns {object|undefined}
|
||||
*/
|
||||
const parseGradient = (regExpLib, input) => {
|
||||
let result;
|
||||
let matchColorStop;
|
||||
let stopResult;
|
||||
// reset search position, because we reuse regex.
|
||||
regExpLib.gradientSearch.lastIndex = 0;
|
||||
const matchGradient = regExpLib.gradientSearch.exec(input);
|
||||
if (!isNull(matchGradient)) {
|
||||
result = {
|
||||
original: matchGradient[0],
|
||||
colorStopList: [],
|
||||
};
|
||||
// Line (Angle or Side-Corner).
|
||||
if (matchGradient[1]) {
|
||||
// eslint-disable-next-line prefer-destructuring
|
||||
result.line = matchGradient[1];
|
||||
}
|
||||
// Angle or undefined if side-corner.
|
||||
if (matchGradient[2]) {
|
||||
// eslint-disable-next-line prefer-destructuring
|
||||
result.angle = matchGradient[2];
|
||||
}
|
||||
// Side-corner or undefined if angle.
|
||||
if (matchGradient[3]) {
|
||||
// eslint-disable-next-line prefer-destructuring
|
||||
result.sideCorner = matchGradient[3];
|
||||
}
|
||||
// reset search position, because we reuse regex.
|
||||
regExpLib.colorStopSearch.lastIndex = 0;
|
||||
// Loop though all the color-stops.
|
||||
matchColorStop = regExpLib.colorStopSearch.exec(matchGradient[4]);
|
||||
while (!isNull(matchColorStop)) {
|
||||
stopResult = {
|
||||
color: matchColorStop[1],
|
||||
};
|
||||
// Position (optional).
|
||||
if (matchColorStop[2]) {
|
||||
// eslint-disable-next-line prefer-destructuring
|
||||
stopResult.position = matchColorStop[2];
|
||||
}
|
||||
result.colorStopList.push(stopResult);
|
||||
// Continue searching from previous position.
|
||||
matchColorStop = regExpLib.colorStopSearch.exec(matchGradient[4]);
|
||||
}
|
||||
}
|
||||
// Can be undefined if match not found.
|
||||
return result;
|
||||
};
|
||||
const REGEXP_LIB = generateRegExp();
|
||||
const REG_GRADIENT = /.*gradient\s*\(((?:\([^)]*\)|[^)(]*)*)\)/gim;
|
||||
/**
|
||||
* 验证是否是渐变字符串
|
||||
* @param input
|
||||
* @returns
|
||||
*/
|
||||
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,
|
||||
};
|
||||
/**
|
||||
* 解析渐变字符串为 GradientColors 对象
|
||||
* @param input
|
||||
* @returns
|
||||
*/
|
||||
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;
|
||||
|
||||
@@ -0,0 +1,3 @@
|
||||
export * from './cmyk';
|
||||
export * from './color';
|
||||
export * from './gradient';
|
||||
46
uni_modules/tdesign-uniapp/components/common/shared/date.js
Normal file
46
uni_modules/tdesign-uniapp/components/common/shared/date.js
Normal file
@@ -0,0 +1,46 @@
|
||||
|
||||
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);
|
||||
}
|
||||
// eslint-disable-next-line prefer-spread
|
||||
return Date.apply(null, args);
|
||||
};
|
||||
@@ -0,0 +1,884 @@
|
||||
/* eslint-disable */
|
||||
// Copyright (c) Project Nayuki. (MIT License)
|
||||
// https://www.nayuki.io/page/qr-code-generator-library
|
||||
// Modification with code reorder and prettier
|
||||
// --------------------------------------------
|
||||
// Appends the given number of low-order bits of the given value
|
||||
// to the given buffer. Requires 0 <= len <= 31 and 0 <= val < 2^len.
|
||||
function appendBits(val, len, bb) {
|
||||
if (len < 0 || len > 31 || val >>> len !== 0) {
|
||||
throw new RangeError('Value out of range');
|
||||
}
|
||||
for (let i = len - 1; i >= 0; i-- // Append bit by bit
|
||||
) {
|
||||
bb.push((val >>> i) & 1);
|
||||
}
|
||||
}
|
||||
// Returns true iff the i'th bit of x is set to 1.
|
||||
function getBit(x, i) {
|
||||
return ((x >>> i) & 1) !== 0;
|
||||
}
|
||||
// Throws an exception if the given condition is false.
|
||||
function assert(cond) {
|
||||
if (!cond) {
|
||||
throw new Error('Assertion error');
|
||||
}
|
||||
}
|
||||
/* ---- Public helper enumeration ----*/
|
||||
/*
|
||||
* Describes how a segment's data bits are numbererpreted. Immutable.
|
||||
*/
|
||||
export class Mode {
|
||||
constructor(modeBits, numBitsCharCount) {
|
||||
this.modeBits = modeBits;
|
||||
this.numBitsCharCount = numBitsCharCount;
|
||||
}
|
||||
/* -- Method --*/
|
||||
// (Package-private) Returns the bit width of the character count field for a segment in
|
||||
// this mode in a QR Code at the given version number. The result is in the range [0, 16].
|
||||
numCharCountBits(ver) {
|
||||
return this.numBitsCharCount[Math.floor((ver + 7) / 17)];
|
||||
}
|
||||
}
|
||||
/* -- Constants --*/
|
||||
Mode.NUMERIC = new Mode(0x1, [10, 12, 14]);
|
||||
Mode.ALPHANUMERIC = new Mode(0x2, [9, 11, 13]);
|
||||
Mode.BYTE = new Mode(0x4, [8, 16, 16]);
|
||||
Mode.KANJI = new Mode(0x8, [8, 10, 12]);
|
||||
Mode.ECI = new Mode(0x7, [0, 0, 0]);
|
||||
/* ---- Public helper enumeration ----*/
|
||||
/*
|
||||
* The error correction level in a QR Code symbol. Immutable.
|
||||
*/
|
||||
export class Ecc {
|
||||
constructor(ordinal, formatBits) {
|
||||
this.ordinal = ordinal;
|
||||
this.formatBits = formatBits;
|
||||
}
|
||||
}
|
||||
/* -- Constants --*/
|
||||
Ecc.LOW = new Ecc(0, 1); // The QR Code can tolerate about 7% erroneous codewords
|
||||
Ecc.MEDIUM = new Ecc(1, 0); // The QR Code can tolerate about 15% erroneous codewords
|
||||
Ecc.QUARTILE = new Ecc(2, 3); // The QR Code can tolerate about 25% erroneous codewords
|
||||
Ecc.HIGH = new Ecc(3, 2); // The QR Code can tolerate about 30% erroneous codewords
|
||||
/*
|
||||
* A segment of character/binary/control data in a QR Code symbol.
|
||||
* Instances of this class are immutable.
|
||||
* The mid-level way to create a segment is to take the payload data
|
||||
* and call a static factory function such as QrSegment.makeNumeric().
|
||||
* The low-level way to create a segment is to custom-make the bit buffer
|
||||
* and call the QrSegment() constructor with appropriate values.
|
||||
* This segment class imposes no length restrictions, but QR Codes have restrictions.
|
||||
* Even in the most favorable conditions, a QR Code can only hold 7089 characters of data.
|
||||
* Any segment longer than this is meaningless for the purpose of generating QR Codes.
|
||||
*/
|
||||
export class QrSegment {
|
||||
// Creates a new QR Code segment with the given attributes and data.
|
||||
// The character count (numChars) must agree with the mode and the bit buffer length,
|
||||
// but the constranumber isn't checked. The given bit buffer is cloned and stored.
|
||||
constructor(mode, numChars, bitData) {
|
||||
this.mode = mode;
|
||||
this.numChars = numChars;
|
||||
this.bitData = bitData;
|
||||
if (numChars < 0) {
|
||||
throw new RangeError('Invalid argument');
|
||||
}
|
||||
this.bitData = bitData.slice(); // Make defensive copy
|
||||
}
|
||||
/* -- Static factory functions (mid level) --*/
|
||||
// Returns a segment representing the given binary data encoded in
|
||||
// byte mode. All input byte arrays are acceptable. Any text string
|
||||
// can be converted to UTF-8 bytes and encoded as a byte mode segment.
|
||||
static makeBytes(data) {
|
||||
const bb = [];
|
||||
for (const b of data) {
|
||||
appendBits(b, 8, bb);
|
||||
}
|
||||
return new QrSegment(Mode.BYTE, data.length, bb);
|
||||
}
|
||||
// Returns a segment representing the given string of decimal digits encoded in numeric mode.
|
||||
static makeNumeric(digits) {
|
||||
if (!QrSegment.isNumeric(digits)) {
|
||||
throw new RangeError('String contains non-numeric characters');
|
||||
}
|
||||
const bb = [];
|
||||
for (let i = 0; i < digits.length;) {
|
||||
// Consume up to 3 digits per iteration
|
||||
const n = Math.min(digits.length - i, 3);
|
||||
appendBits(parseInt(digits.substring(i, i + n), 10), n * 3 + 1, bb);
|
||||
i += n;
|
||||
}
|
||||
return new QrSegment(Mode.NUMERIC, digits.length, bb);
|
||||
}
|
||||
// Returns a segment representing the given text string encoded in alphanumeric mode.
|
||||
// The characters allowed are: 0 to 9, A to Z (uppercase only), space,
|
||||
// dollar, percent, asterisk, plus, hyphen, period, slash, colon.
|
||||
static makeAlphanumeric(text) {
|
||||
if (!QrSegment.isAlphanumeric(text)) {
|
||||
throw new RangeError('String contains unencodable characters in alphanumeric mode');
|
||||
}
|
||||
const bb = [];
|
||||
let i;
|
||||
for (i = 0; i + 2 <= text.length; i += 2) {
|
||||
// Process groups of 2
|
||||
let temp = QrSegment.ALPHANUMERIC_CHARSET.indexOf(text.charAt(i)) * 45;
|
||||
temp += QrSegment.ALPHANUMERIC_CHARSET.indexOf(text.charAt(i + 1));
|
||||
appendBits(temp, 11, bb);
|
||||
}
|
||||
if (i < text.length) {
|
||||
// 1 character remaining
|
||||
appendBits(QrSegment.ALPHANUMERIC_CHARSET.indexOf(text.charAt(i)), 6, bb);
|
||||
}
|
||||
return new QrSegment(Mode.ALPHANUMERIC, text.length, bb);
|
||||
}
|
||||
// Returns a new mutable list of zero or more segments to represent the given Unicode text string.
|
||||
// The result may use various segment modes and switch modes to optimize the length of the bit stream.
|
||||
static makeSegments(text) {
|
||||
// Select the most efficient segment encoding automatically
|
||||
if (text === '') {
|
||||
return [];
|
||||
}
|
||||
if (QrSegment.isNumeric(text)) {
|
||||
return [QrSegment.makeNumeric(text)];
|
||||
}
|
||||
if (QrSegment.isAlphanumeric(text)) {
|
||||
return [QrSegment.makeAlphanumeric(text)];
|
||||
}
|
||||
return [QrSegment.makeBytes(QrSegment.toUtf8ByteArray(text))];
|
||||
}
|
||||
// Returns a segment representing an Extended Channel Interpretation
|
||||
// (ECI) designator with the given assignment value.
|
||||
static makeEci(assignVal) {
|
||||
const bb = [];
|
||||
if (assignVal < 0) {
|
||||
throw new RangeError('ECI assignment value out of range');
|
||||
}
|
||||
else if (assignVal < 1 << 7) {
|
||||
appendBits(assignVal, 8, bb);
|
||||
}
|
||||
else if (assignVal < 1 << 14) {
|
||||
appendBits(0b10, 2, bb);
|
||||
appendBits(assignVal, 14, bb);
|
||||
}
|
||||
else if (assignVal < 1000000) {
|
||||
appendBits(0b110, 3, bb);
|
||||
appendBits(assignVal, 21, bb);
|
||||
}
|
||||
else {
|
||||
throw new RangeError('ECI assignment value out of range');
|
||||
}
|
||||
return new QrSegment(Mode.ECI, 0, bb);
|
||||
}
|
||||
// Tests whether the given string can be encoded as a segment in numeric mode.
|
||||
// A string is encodable iff each character is in the range 0 to 9.
|
||||
static isNumeric(text) {
|
||||
return QrSegment.NUMERIC_REGEX.test(text);
|
||||
}
|
||||
// Tests whether the given string can be encoded as a segment in alphanumeric mode.
|
||||
// A string is encodable iff each character is in the following set: 0 to 9, A to Z
|
||||
// (uppercase only), space, dollar, percent, asterisk, plus, hyphen, period, slash, colon.
|
||||
static isAlphanumeric(text) {
|
||||
return QrSegment.ALPHANUMERIC_REGEX.test(text);
|
||||
}
|
||||
/* -- Methods --*/
|
||||
// Returns a new copy of the data bits of this segment.
|
||||
getData() {
|
||||
return this.bitData.slice(); // Make defensive copy
|
||||
}
|
||||
// (Package-private) Calculates and returns the number of bits needed to encode the given segments at
|
||||
// the given version. The result is infinity if a segment has too many characters to fit its length field.
|
||||
static getTotalBits(segs, version) {
|
||||
let result = 0;
|
||||
for (const seg of segs) {
|
||||
const ccbits = seg.mode.numCharCountBits(version);
|
||||
if (seg.numChars >= 1 << ccbits) {
|
||||
return Infinity; // The segment's length doesn't fit the field's bit width
|
||||
}
|
||||
result += 4 + ccbits + seg.bitData.length;
|
||||
}
|
||||
return result;
|
||||
}
|
||||
// Returns a new array of bytes representing the given string encoded in UTF-8.
|
||||
static toUtf8ByteArray(input) {
|
||||
const str = encodeURI(input);
|
||||
const result = [];
|
||||
for (let i = 0; i < str.length; i++) {
|
||||
if (str.charAt(i) !== '%') {
|
||||
result.push(str.charCodeAt(i));
|
||||
}
|
||||
else {
|
||||
result.push(parseInt(str.substring(i + 1, i + 3), 16));
|
||||
i += 2;
|
||||
}
|
||||
}
|
||||
return result;
|
||||
}
|
||||
}
|
||||
/* -- Constants --*/
|
||||
// Describes precisely all strings that are encodable in numeric mode.
|
||||
QrSegment.NUMERIC_REGEX = /^[0-9]*$/;
|
||||
// Describes precisely all strings that are encodable in alphanumeric mode.
|
||||
QrSegment.ALPHANUMERIC_REGEX = /^[A-Z0-9 $%*+.\/:-]*$/;
|
||||
// The set of all legal characters in alphanumeric mode,
|
||||
// where each character value maps to the index in the string.
|
||||
QrSegment.ALPHANUMERIC_CHARSET = '0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ $%*+-./:';
|
||||
/*
|
||||
* A QR Code symbol, which is a type of two-dimension barcode.
|
||||
* Invented by Denso Wave and described in the ISO/IEC 18004 standard.
|
||||
* Instances of this class represent an immutable square grid of dark and light cells.
|
||||
* The class provides static factory functions to create a QR Code from text or binary data.
|
||||
* The class covers the QR Code Model 2 specification, supporting all versions (sizes)
|
||||
* from 1 to 40, all 4 error correction levels, and 4 character encoding modes.
|
||||
*
|
||||
* Ways to create a QR Code object:
|
||||
* - High level: Take the payload data and call QrCode.encodeText() or QrCode.encodeBinary().
|
||||
* - Mid level: Custom-make the list of segments and call QrCode.encodeSegments().
|
||||
* - Low level: Custom-make the array of data codeword bytes (including
|
||||
* segment headers and final padding, excluding error correction codewords),
|
||||
* supply the appropriate version number, and call the QrCode() constructor.
|
||||
* (Note that all ways require supplying the desired error correction level.)
|
||||
*/
|
||||
export class QrCode {
|
||||
// Creates a new QR Code with the given version number,
|
||||
// error correction level, data codeword bytes, and mask number.
|
||||
// This is a low-level API that most users should not use directly.
|
||||
// A mid-level API is the encodeSegments() function.
|
||||
constructor(
|
||||
// The version number of this QR Code, which is between 1 and 40 (inclusive).
|
||||
// This determines the size of this barcode.
|
||||
version,
|
||||
// The error correction level used in this QR Code.
|
||||
errorCorrectionLevel, dataCodewords, oriMsk) {
|
||||
// The modules of this QR Code (false = light, true = dark).
|
||||
// Immutable after constructor finishes. Accessed through getModule().
|
||||
this.modules = [];
|
||||
// Indicates function modules that are not subjected to masking. Discarded when constructor finishes.
|
||||
this.isFunction = [];
|
||||
let msk = oriMsk;
|
||||
this.version = version;
|
||||
this.errorCorrectionLevel = errorCorrectionLevel;
|
||||
// Check scalar arguments
|
||||
if (version < QrCode.MIN_VERSION || version > QrCode.MAX_VERSION) {
|
||||
throw new RangeError('Version value out of range');
|
||||
}
|
||||
if (msk < -1 || msk > 7) {
|
||||
throw new RangeError('Mask value out of range');
|
||||
}
|
||||
this.size = version * 4 + 17;
|
||||
// Initialize both grids to be size*size arrays of Boolean false
|
||||
const row = [];
|
||||
for (let i = 0; i < this.size; i++) {
|
||||
row.push(false);
|
||||
}
|
||||
for (let i = 0; i < this.size; i++) {
|
||||
this.modules.push(row.slice()); // Initially all light
|
||||
this.isFunction.push(row.slice());
|
||||
}
|
||||
// Compute ECC, draw modules
|
||||
this.drawFunctionPatterns();
|
||||
const allCodewords = this.addEccAndInterleave(dataCodewords);
|
||||
this.drawCodewords(allCodewords);
|
||||
// Do masking
|
||||
if (msk === -1) {
|
||||
// Automatically choose best mask
|
||||
let minPenalty = 1000000000;
|
||||
for (let i = 0; i < 8; i++) {
|
||||
this.applyMask(i);
|
||||
this.drawFormatBits(i);
|
||||
const penalty = this.getPenaltyScore();
|
||||
if (penalty < minPenalty) {
|
||||
msk = i;
|
||||
minPenalty = penalty;
|
||||
}
|
||||
this.applyMask(i); // Undoes the mask due to XOR
|
||||
}
|
||||
}
|
||||
assert(msk >= 0 && msk <= 7);
|
||||
this.mask = msk;
|
||||
this.applyMask(msk); // Apply the final choice of mask
|
||||
this.drawFormatBits(msk); // Overwrite old format bits
|
||||
this.isFunction = [];
|
||||
}
|
||||
/* -- Static factory functions (high level) --*/
|
||||
// Returns a QR Code representing the given Unicode text string at the given error correction level.
|
||||
// As a conservative upper bound, this function is guaranteed to succeed for strings that have 738 or fewer
|
||||
// Unicode code ponumbers (not UTF-16 code units) if the low error correction level is used. The smallest possible
|
||||
// QR Code version is automatically chosen for the output. The ECC level of the result may be higher than the
|
||||
// ecl argument if it can be done without increasing the version.
|
||||
static encodeText(text, ecl) {
|
||||
const segs = QrSegment.makeSegments(text);
|
||||
return QrCode.encodeSegments(segs, ecl);
|
||||
}
|
||||
// Returns a QR Code representing the given binary data at the given error correction level.
|
||||
// This function always encodes using the binary segment mode, not any text mode. The maximum number of
|
||||
// bytes allowed is 2953. The smallest possible QR Code version is automatically chosen for the output.
|
||||
// The ECC level of the result may be higher than the ecl argument if it can be done without increasing the version.
|
||||
static encodeBinary(data, ecl) {
|
||||
const seg = QrSegment.makeBytes(data);
|
||||
return QrCode.encodeSegments([seg], ecl);
|
||||
}
|
||||
/* -- Static factory functions (mid level) --*/
|
||||
// Returns a QR Code representing the given segments with the given encoding parameters.
|
||||
// The smallest possible QR Code version within the given range is automatically
|
||||
// chosen for the output. Iff boostEcl is true, then the ECC level of the result
|
||||
// may be higher than the ecl argument if it can be done without increasing the
|
||||
// version. The mask number is either between 0 to 7 (inclusive) to force that
|
||||
// mask, or -1 to automatically choose an appropriate mask (which may be slow).
|
||||
// This function allows the user to create a custom sequence of segments that switches
|
||||
// between modes (such as alphanumeric and byte) to encode text in less space.
|
||||
// This is a mid-level API; the high-level API is encodeText() and encodeBinary().
|
||||
static encodeSegments(segs, oriEcl, minVersion = 1, maxVersion = 40, mask = -1, boostEcl = true) {
|
||||
if (!(QrCode.MIN_VERSION <= minVersion && minVersion <= maxVersion && maxVersion <= QrCode.MAX_VERSION) ||
|
||||
mask < -1 ||
|
||||
mask > 7) {
|
||||
throw new RangeError('Invalid value');
|
||||
}
|
||||
// Find the minimal version number to use
|
||||
let version;
|
||||
let dataUsedBits;
|
||||
for (version = minVersion;; version++) {
|
||||
const dataCapacityBits = QrCode.getNumDataCodewords(version, oriEcl) * 8; // Number of data bits available
|
||||
const usedBits = QrSegment.getTotalBits(segs, version);
|
||||
if (usedBits <= dataCapacityBits) {
|
||||
dataUsedBits = usedBits;
|
||||
break; // This version number is found to be suitable
|
||||
}
|
||||
if (version >= maxVersion) {
|
||||
// All versions in the range could not fit the given data
|
||||
throw new RangeError('Data too long');
|
||||
}
|
||||
}
|
||||
let ecl = oriEcl;
|
||||
// Increase the error correction level while the data still fits in the current version number
|
||||
for (const newEcl of [Ecc.MEDIUM, Ecc.QUARTILE, Ecc.HIGH]) {
|
||||
// From low to high
|
||||
if (boostEcl && dataUsedBits <= QrCode.getNumDataCodewords(version, newEcl) * 8) {
|
||||
ecl = newEcl;
|
||||
}
|
||||
}
|
||||
// Concatenate all segments to create the data bit string
|
||||
const bb = [];
|
||||
for (const seg of segs) {
|
||||
appendBits(seg.mode.modeBits, 4, bb);
|
||||
appendBits(seg.numChars, seg.mode.numCharCountBits(version), bb);
|
||||
for (const b of seg.getData()) {
|
||||
bb.push(b);
|
||||
}
|
||||
}
|
||||
assert(bb.length === dataUsedBits);
|
||||
// Add terminator and pad up to a byte if applicable
|
||||
const dataCapacityBits = QrCode.getNumDataCodewords(version, ecl) * 8;
|
||||
assert(bb.length <= dataCapacityBits);
|
||||
appendBits(0, Math.min(4, dataCapacityBits - bb.length), bb);
|
||||
appendBits(0, (8 - (bb.length % 8)) % 8, bb);
|
||||
assert(bb.length % 8 === 0);
|
||||
// Pad with alternating bytes until data capacity is reached
|
||||
for (let padByte = 0xec; bb.length < dataCapacityBits; padByte ^= 0xec ^ 0x11) {
|
||||
appendBits(padByte, 8, bb);
|
||||
}
|
||||
// Pack bits numbero bytes in big endian
|
||||
const dataCodewords = [];
|
||||
while (dataCodewords.length * 8 < bb.length) {
|
||||
dataCodewords.push(0);
|
||||
}
|
||||
bb.forEach((b, i) => {
|
||||
dataCodewords[i >>> 3] |= b << (7 - (i & 7));
|
||||
});
|
||||
// Create the QR Code object
|
||||
return new QrCode(version, ecl, dataCodewords, mask);
|
||||
}
|
||||
/* -- Accessor methods --*/
|
||||
// Returns the color of the module (pixel) at the given coordinates, which is false
|
||||
// for light or true for dark. The top left corner has the coordinates (x=0, y=0).
|
||||
// If the given coordinates are out of bounds, then false (light) is returned.
|
||||
getModule(x, y) {
|
||||
return x >= 0 && x < this.size && y >= 0 && y < this.size && this.modules[y][x];
|
||||
}
|
||||
// Modified to expose modules for easy access
|
||||
getModules() {
|
||||
return this.modules;
|
||||
}
|
||||
/* -- Private helper methods for constructor: Drawing function modules --*/
|
||||
// Reads this object's version field, and draws and marks all function modules.
|
||||
drawFunctionPatterns() {
|
||||
// Draw horizontal and vertical timing patterns
|
||||
for (let i = 0; i < this.size; i++) {
|
||||
this.setFunctionModule(6, i, i % 2 === 0);
|
||||
this.setFunctionModule(i, 6, i % 2 === 0);
|
||||
}
|
||||
// Draw 3 finder patterns (all corners except bottom right; overwrites some timing modules)
|
||||
this.drawFinderPattern(3, 3);
|
||||
this.drawFinderPattern(this.size - 4, 3);
|
||||
this.drawFinderPattern(3, this.size - 4);
|
||||
// Draw numerous alignment patterns
|
||||
const alignPatPos = this.getAlignmentPatternPositions();
|
||||
const numAlign = alignPatPos.length;
|
||||
for (let i = 0; i < numAlign; i++) {
|
||||
for (let j = 0; j < numAlign; j++) {
|
||||
// Don't draw on the three finder corners
|
||||
if (!((i === 0 && j === 0) || (i === 0 && j === numAlign - 1) || (i === numAlign - 1 && j === 0))) {
|
||||
this.drawAlignmentPattern(alignPatPos[i], alignPatPos[j]);
|
||||
}
|
||||
}
|
||||
}
|
||||
// Draw configuration data
|
||||
this.drawFormatBits(0); // Dummy mask value; overwritten later in the constructor
|
||||
this.drawVersion();
|
||||
}
|
||||
// Draws two copies of the format bits (with its own error correction code)
|
||||
// based on the given mask and this object's error correction level field.
|
||||
drawFormatBits(mask) {
|
||||
// Calculate error correction code and pack bits
|
||||
const data = (this.errorCorrectionLevel.formatBits << 3) | mask; // errCorrLvl is unumber2, mask is unumber3
|
||||
let rem = data;
|
||||
for (let i = 0; i < 10; i++) {
|
||||
rem = (rem << 1) ^ ((rem >>> 9) * 0x537);
|
||||
}
|
||||
const bits = ((data << 10) | rem) ^ 0x5412; // unumber15
|
||||
assert(bits >>> 15 === 0);
|
||||
// Draw first copy
|
||||
for (let i = 0; i <= 5; i++) {
|
||||
this.setFunctionModule(8, i, getBit(bits, i));
|
||||
}
|
||||
this.setFunctionModule(8, 7, getBit(bits, 6));
|
||||
this.setFunctionModule(8, 8, getBit(bits, 7));
|
||||
this.setFunctionModule(7, 8, getBit(bits, 8));
|
||||
for (let i = 9; i < 15; i++) {
|
||||
this.setFunctionModule(14 - i, 8, getBit(bits, i));
|
||||
}
|
||||
// Draw second copy
|
||||
for (let i = 0; i < 8; i++) {
|
||||
this.setFunctionModule(this.size - 1 - i, 8, getBit(bits, i));
|
||||
}
|
||||
for (let i = 8; i < 15; i++) {
|
||||
this.setFunctionModule(8, this.size - 15 + i, getBit(bits, i));
|
||||
}
|
||||
this.setFunctionModule(8, this.size - 8, true); // Always dark
|
||||
}
|
||||
// Draws two copies of the version bits (with its own error correction code),
|
||||
// based on this object's version field, iff 7 <= version <= 40.
|
||||
drawVersion() {
|
||||
if (this.version < 7) {
|
||||
return;
|
||||
}
|
||||
// Calculate error correction code and pack bits
|
||||
let rem = this.version; // version is unumber6, in the range [7, 40]
|
||||
for (let i = 0; i < 12; i++) {
|
||||
rem = (rem << 1) ^ ((rem >>> 11) * 0x1f25);
|
||||
}
|
||||
const bits = (this.version << 12) | rem; // unumber18
|
||||
assert(bits >>> 18 === 0);
|
||||
// Draw two copies
|
||||
for (let i = 0; i < 18; i++) {
|
||||
const color = getBit(bits, i);
|
||||
const a = this.size - 11 + (i % 3);
|
||||
const b = Math.floor(i / 3);
|
||||
this.setFunctionModule(a, b, color);
|
||||
this.setFunctionModule(b, a, color);
|
||||
}
|
||||
}
|
||||
// Draws a 9*9 finder pattern including the border separator,
|
||||
// with the center module at (x, y). Modules can be out of bounds.
|
||||
drawFinderPattern(x, y) {
|
||||
for (let dy = -4; dy <= 4; dy++) {
|
||||
for (let dx = -4; dx <= 4; dx++) {
|
||||
const dist = Math.max(Math.abs(dx), Math.abs(dy)); // Chebyshev/infinity norm
|
||||
const xx = x + dx;
|
||||
const yy = y + dy;
|
||||
if (xx >= 0 && xx < this.size && yy >= 0 && yy < this.size) {
|
||||
this.setFunctionModule(xx, yy, dist !== 2 && dist !== 4);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
// Draws a 5*5 alignment pattern, with the center module
|
||||
// at (x, y). All modules must be in bounds.
|
||||
drawAlignmentPattern(x, y) {
|
||||
for (let dy = -2; dy <= 2; dy++) {
|
||||
for (let dx = -2; dx <= 2; dx++) {
|
||||
this.setFunctionModule(x + dx, y + dy, Math.max(Math.abs(dx), Math.abs(dy)) !== 1);
|
||||
}
|
||||
}
|
||||
}
|
||||
// Sets the color of a module and marks it as a function module.
|
||||
// Only used by the constructor. Coordinates must be in bounds.
|
||||
setFunctionModule(x, y, isDark) {
|
||||
this.modules[y][x] = isDark;
|
||||
this.isFunction[y][x] = true;
|
||||
}
|
||||
/* -- Private helper methods for constructor: Codewords and masking --*/
|
||||
// Returns a new byte string representing the given data with the appropriate error correction
|
||||
// codewords appended to it, based on this object's version and error correction level.
|
||||
addEccAndInterleave(data) {
|
||||
const ver = this.version;
|
||||
const ecl = this.errorCorrectionLevel;
|
||||
if (data.length !== QrCode.getNumDataCodewords(ver, ecl)) {
|
||||
throw new RangeError('Invalid argument');
|
||||
}
|
||||
// Calculate parameter numbers
|
||||
const numBlocks = QrCode.NUM_ERROR_CORRECTION_BLOCKS[ecl.ordinal][ver];
|
||||
const blockEccLen = QrCode.ECC_CODEWORDS_PER_BLOCK[ecl.ordinal][ver];
|
||||
const rawCodewords = Math.floor(QrCode.getNumRawDataModules(ver) / 8);
|
||||
const numShortBlocks = numBlocks - (rawCodewords % numBlocks);
|
||||
const shortBlockLen = Math.floor(rawCodewords / numBlocks);
|
||||
// Split data numbero blocks and append ECC to each block
|
||||
const blocks = [];
|
||||
const rsDiv = QrCode.reedSolomonComputeDivisor(blockEccLen);
|
||||
for (let i = 0, k = 0; i < numBlocks; i++) {
|
||||
const dat = data.slice(k, k + shortBlockLen - blockEccLen + (i < numShortBlocks ? 0 : 1));
|
||||
k += dat.length;
|
||||
const ecc = QrCode.reedSolomonComputeRemainder(dat, rsDiv);
|
||||
if (i < numShortBlocks) {
|
||||
dat.push(0);
|
||||
}
|
||||
blocks.push(dat.concat(ecc));
|
||||
}
|
||||
// Interleave (not concatenate) the bytes from every block numbero a single sequence
|
||||
const result = [];
|
||||
for (let i = 0; i < blocks[0].length; i++) {
|
||||
blocks.forEach((block, j) => {
|
||||
// Skip the padding byte in short blocks
|
||||
if (i !== shortBlockLen - blockEccLen || j >= numShortBlocks) {
|
||||
result.push(block[i]);
|
||||
}
|
||||
});
|
||||
}
|
||||
assert(result.length === rawCodewords);
|
||||
return result;
|
||||
}
|
||||
// Draws the given sequence of 8-bit codewords (data and error correction) onto the entire
|
||||
// data area of this QR Code. Function modules need to be marked off before this is called.
|
||||
drawCodewords(data) {
|
||||
if (data.length !== Math.floor(QrCode.getNumRawDataModules(this.version) / 8)) {
|
||||
throw new RangeError('Invalid argument');
|
||||
}
|
||||
let i = 0; // Bit index numbero the data
|
||||
// Do the funny zigzag scan
|
||||
for (let right = this.size - 1; right >= 1; right -= 2) {
|
||||
// Index of right column in each column pair
|
||||
if (right === 6) {
|
||||
right = 5;
|
||||
}
|
||||
for (let vert = 0; vert < this.size; vert++) {
|
||||
// Vertical counter
|
||||
for (let j = 0; j < 2; j++) {
|
||||
const x = right - j; // Actual x coordinate
|
||||
const upward = ((right + 1) & 2) === 0;
|
||||
const y = upward ? this.size - 1 - vert : vert; // Actual y coordinate
|
||||
if (!this.isFunction[y][x] && i < data.length * 8) {
|
||||
this.modules[y][x] = getBit(data[i >>> 3], 7 - (i & 7));
|
||||
i++;
|
||||
}
|
||||
// If this QR Code has any remainder bits (0 to 7), they were assigned as
|
||||
// 0/false/light by the constructor and are left unchanged by this method
|
||||
}
|
||||
}
|
||||
}
|
||||
assert(i === data.length * 8);
|
||||
}
|
||||
// XORs the codeword modules in this QR Code with the given mask pattern.
|
||||
// The function modules must be marked and the codeword bits must be drawn
|
||||
// before masking. Due to the arithmetic of XOR, calling applyMask() with
|
||||
// the same mask value a second time will undo the mask. A final well-formed
|
||||
// QR Code needs exactly one (not zero, two, etc.) mask applied.
|
||||
applyMask(mask) {
|
||||
if (mask < 0 || mask > 7) {
|
||||
throw new RangeError('Mask value out of range');
|
||||
}
|
||||
for (let y = 0; y < this.size; y++) {
|
||||
for (let x = 0; x < this.size; x++) {
|
||||
let invert;
|
||||
switch (mask) {
|
||||
case 0:
|
||||
invert = (x + y) % 2 === 0;
|
||||
break;
|
||||
case 1:
|
||||
invert = y % 2 === 0;
|
||||
break;
|
||||
case 2:
|
||||
invert = x % 3 === 0;
|
||||
break;
|
||||
case 3:
|
||||
invert = (x + y) % 3 === 0;
|
||||
break;
|
||||
case 4:
|
||||
invert = (Math.floor(x / 3) + Math.floor(y / 2)) % 2 === 0;
|
||||
break;
|
||||
case 5:
|
||||
invert = ((x * y) % 2) + ((x * y) % 3) === 0;
|
||||
break;
|
||||
case 6:
|
||||
invert = (((x * y) % 2) + ((x * y) % 3)) % 2 === 0;
|
||||
break;
|
||||
case 7:
|
||||
invert = (((x + y) % 2) + ((x * y) % 3)) % 2 === 0;
|
||||
break;
|
||||
default:
|
||||
throw new Error('Unreachable');
|
||||
}
|
||||
if (!this.isFunction[y][x] && invert) {
|
||||
this.modules[y][x] = !this.modules[y][x];
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
// Calculates and returns the penalty score based on state of this QR Code's current modules.
|
||||
// This is used by the automatic mask choice algorithm to find the mask pattern that yields the lowest score.
|
||||
getPenaltyScore() {
|
||||
let result = 0;
|
||||
// Adjacent modules in row having same color, and finder-like patterns
|
||||
for (let y = 0; y < this.size; y++) {
|
||||
let runColor = false;
|
||||
let runX = 0;
|
||||
const runHistory = [0, 0, 0, 0, 0, 0, 0];
|
||||
for (let x = 0; x < this.size; x++) {
|
||||
if (this.modules[y][x] === runColor) {
|
||||
runX++;
|
||||
if (runX === 5) {
|
||||
result += QrCode.PENALTY_N1;
|
||||
}
|
||||
else if (runX > 5) {
|
||||
result++;
|
||||
}
|
||||
}
|
||||
else {
|
||||
this.finderPenaltyAddHistory(runX, runHistory);
|
||||
if (!runColor) {
|
||||
result += this.finderPenaltyCountPatterns(runHistory) * QrCode.PENALTY_N3;
|
||||
}
|
||||
runColor = this.modules[y][x];
|
||||
runX = 1;
|
||||
}
|
||||
}
|
||||
result += this.finderPenaltyTerminateAndCount(runColor, runX, runHistory) * QrCode.PENALTY_N3;
|
||||
}
|
||||
// Adjacent modules in column having same color, and finder-like patterns
|
||||
for (let x = 0; x < this.size; x++) {
|
||||
let runColor = false;
|
||||
let runY = 0;
|
||||
const runHistory = [0, 0, 0, 0, 0, 0, 0];
|
||||
for (let y = 0; y < this.size; y++) {
|
||||
if (this.modules[y][x] === runColor) {
|
||||
runY++;
|
||||
if (runY === 5) {
|
||||
result += QrCode.PENALTY_N1;
|
||||
}
|
||||
else if (runY > 5) {
|
||||
result++;
|
||||
}
|
||||
}
|
||||
else {
|
||||
this.finderPenaltyAddHistory(runY, runHistory);
|
||||
if (!runColor) {
|
||||
result += this.finderPenaltyCountPatterns(runHistory) * QrCode.PENALTY_N3;
|
||||
}
|
||||
runColor = this.modules[y][x];
|
||||
runY = 1;
|
||||
}
|
||||
}
|
||||
result += this.finderPenaltyTerminateAndCount(runColor, runY, runHistory) * QrCode.PENALTY_N3;
|
||||
}
|
||||
// 2*2 blocks of modules having same color
|
||||
for (let y = 0; y < this.size - 1; y++) {
|
||||
for (let x = 0; x < this.size - 1; x++) {
|
||||
const color = this.modules[y][x];
|
||||
if (color === this.modules[y][x + 1] &&
|
||||
color === this.modules[y + 1][x] &&
|
||||
color === this.modules[y + 1][x + 1]) {
|
||||
result += QrCode.PENALTY_N2;
|
||||
}
|
||||
}
|
||||
}
|
||||
// Balance of dark and light modules
|
||||
let dark = 0;
|
||||
for (const row of this.modules) {
|
||||
dark = row.reduce((sum, color) => sum + (color ? 1 : 0), dark);
|
||||
}
|
||||
const total = this.size * this.size; // Note that size is odd, so dark/total !== 1/2
|
||||
// Compute the smallest numbereger k >= 0 such that (45-5k)% <= dark/total <= (55+5k)%
|
||||
const k = Math.ceil(Math.abs(dark * 20 - total * 10) / total) - 1;
|
||||
assert(k >= 0 && k <= 9);
|
||||
result += k * QrCode.PENALTY_N4;
|
||||
assert(result >= 0 && result <= 2568888); // Non-tight upper bound based on default values of PENALTY_N1, ..., N4
|
||||
return result;
|
||||
}
|
||||
/* -- Private helper functions --*/
|
||||
// Returns an ascending list of positions of alignment patterns for this version number.
|
||||
// Each position is in the range [0,177), and are used on both the x and y axes.
|
||||
// This could be implemented as lookup table of 40 variable-length lists of numberegers.
|
||||
getAlignmentPatternPositions() {
|
||||
if (this.version === 1) {
|
||||
return [];
|
||||
}
|
||||
const numAlign = Math.floor(this.version / 7) + 2;
|
||||
const step = this.version === 32 ? 26 : Math.ceil((this.version * 4 + 4) / (numAlign * 2 - 2)) * 2;
|
||||
const result = [6];
|
||||
for (let pos = this.size - 7; result.length < numAlign; pos -= step) {
|
||||
result.splice(1, 0, pos);
|
||||
}
|
||||
return result;
|
||||
}
|
||||
// Returns the number of data bits that can be stored in a QR Code of the given version number, after
|
||||
// all function modules are excluded. This includes remainder bits, so it might not be a multiple of 8.
|
||||
// The result is in the range [208, 29648]. This could be implemented as a 40-entry lookup table.
|
||||
static getNumRawDataModules(ver) {
|
||||
if (ver < QrCode.MIN_VERSION || ver > QrCode.MAX_VERSION) {
|
||||
throw new RangeError('Version number out of range');
|
||||
}
|
||||
let result = (16 * ver + 128) * ver + 64;
|
||||
if (ver >= 2) {
|
||||
const numAlign = Math.floor(ver / 7) + 2;
|
||||
result -= (25 * numAlign - 10) * numAlign - 55;
|
||||
if (ver >= 7) {
|
||||
result -= 36;
|
||||
}
|
||||
}
|
||||
assert(result >= 208 && result <= 29648);
|
||||
return result;
|
||||
}
|
||||
// Returns the number of 8-bit data (i.e. not error correction) codewords contained in any
|
||||
// QR Code of the given version number and error correction level, with remainder bits discarded.
|
||||
// This stateless pure function could be implemented as a (40*4)-cell lookup table.
|
||||
static getNumDataCodewords(ver, ecl) {
|
||||
return (Math.floor(QrCode.getNumRawDataModules(ver) / 8) -
|
||||
QrCode.ECC_CODEWORDS_PER_BLOCK[ecl.ordinal][ver] * QrCode.NUM_ERROR_CORRECTION_BLOCKS[ecl.ordinal][ver]);
|
||||
}
|
||||
// Returns a Reed-Solomon ECC generator polynomial for the given degree. This could be
|
||||
// implemented as a lookup table over all possible parameter values, instead of as an algorithm.
|
||||
static reedSolomonComputeDivisor(degree) {
|
||||
if (degree < 1 || degree > 255) {
|
||||
throw new RangeError('Degree out of range');
|
||||
}
|
||||
// Polynomial coefficients are stored from highest to lowest power, excluding the leading term which is always 1.
|
||||
// For example the polynomial x^3 + 255x^2 + 8x + 93 is stored as the unumber8 array [255, 8, 93].
|
||||
const result = [];
|
||||
for (let i = 0; i < degree - 1; i++) {
|
||||
result.push(0);
|
||||
}
|
||||
result.push(1); // Start off with the monomial x^0
|
||||
// Compute the product polynomial (x - r^0) * (x - r^1) * (x - r^2) * ... * (x - r^{degree-1}),
|
||||
// and drop the highest monomial term which is always 1x^degree.
|
||||
// Note that r = 0x02, which is a generator element of this field GF(2^8/0x11D).
|
||||
let root = 1;
|
||||
for (let i = 0; i < degree; i++) {
|
||||
// Multiply the current product by (x - r^i)
|
||||
for (let j = 0; j < result.length; j++) {
|
||||
result[j] = QrCode.reedSolomonMultiply(result[j], root);
|
||||
if (j + 1 < result.length) {
|
||||
result[j] ^= result[j + 1];
|
||||
}
|
||||
}
|
||||
root = QrCode.reedSolomonMultiply(root, 0x02);
|
||||
}
|
||||
return result;
|
||||
}
|
||||
// Returns the Reed-Solomon error correction codeword for the given data and divisor polynomials.
|
||||
static reedSolomonComputeRemainder(data, divisor) {
|
||||
const result = divisor.map(() => 0);
|
||||
for (const b of data) {
|
||||
// Polynomial division
|
||||
const factor = b ^ result.shift();
|
||||
result.push(0);
|
||||
divisor.forEach((coef, i) => {
|
||||
result[i] ^= QrCode.reedSolomonMultiply(coef, factor);
|
||||
});
|
||||
}
|
||||
return result;
|
||||
}
|
||||
// Returns the product of the two given field elements modulo GF(2^8/0x11D). The arguments and result
|
||||
// are unsigned 8-bit numberegers. This could be implemented as a lookup table of 256*256 entries of unumber8.
|
||||
static reedSolomonMultiply(x, y) {
|
||||
if (x >>> 8 !== 0 || y >>> 8 !== 0) {
|
||||
throw new RangeError('Byte out of range');
|
||||
}
|
||||
// Russian peasant multiplication
|
||||
let z = 0;
|
||||
for (let i = 7; i >= 0; i--) {
|
||||
z = (z << 1) ^ ((z >>> 7) * 0x11d);
|
||||
z ^= ((y >>> i) & 1) * x;
|
||||
}
|
||||
assert(z >>> 8 === 0);
|
||||
return z;
|
||||
}
|
||||
// Can only be called immediately after a light run is added, and
|
||||
// returns either 0, 1, or 2. A helper function for getPenaltyScore().
|
||||
finderPenaltyCountPatterns(runHistory) {
|
||||
const n = runHistory[1];
|
||||
assert(n <= this.size * 3);
|
||||
const core = n > 0 && runHistory[2] === n && runHistory[3] === n * 3 && runHistory[4] === n && runHistory[5] === n;
|
||||
return ((core && runHistory[0] >= n * 4 && runHistory[6] >= n ? 1 : 0) +
|
||||
(core && runHistory[6] >= n * 4 && runHistory[0] >= n ? 1 : 0));
|
||||
}
|
||||
// Must be called at the end of a line (row or column) of modules. A helper function for getPenaltyScore().
|
||||
finderPenaltyTerminateAndCount(currentRunColor, oriCurrentRunLength, runHistory) {
|
||||
let currentRunLength = oriCurrentRunLength;
|
||||
if (currentRunColor) {
|
||||
// Terminate dark run
|
||||
this.finderPenaltyAddHistory(currentRunLength, runHistory);
|
||||
currentRunLength = 0;
|
||||
}
|
||||
currentRunLength += this.size; // Add light border to final run
|
||||
this.finderPenaltyAddHistory(currentRunLength, runHistory);
|
||||
return this.finderPenaltyCountPatterns(runHistory);
|
||||
}
|
||||
// Pushes the given value to the front and drops the last value. A helper function for getPenaltyScore().
|
||||
finderPenaltyAddHistory(oriCurrentRunLength, runHistory) {
|
||||
let currentRunLength = oriCurrentRunLength;
|
||||
if (runHistory[0] === 0) {
|
||||
currentRunLength += this.size; // Add light border to initial run
|
||||
}
|
||||
runHistory.pop();
|
||||
runHistory.unshift(currentRunLength);
|
||||
}
|
||||
}
|
||||
/* -- Constants and tables --*/
|
||||
// The minimum version number supported in the QR Code Model 2 standard.
|
||||
QrCode.MIN_VERSION = 1;
|
||||
// The maximum version number supported in the QR Code Model 2 standard.
|
||||
QrCode.MAX_VERSION = 40;
|
||||
// For use in getPenaltyScore(), when evaluating which mask is best.
|
||||
QrCode.PENALTY_N1 = 3;
|
||||
QrCode.PENALTY_N2 = 3;
|
||||
QrCode.PENALTY_N3 = 40;
|
||||
QrCode.PENALTY_N4 = 10;
|
||||
QrCode.ECC_CODEWORDS_PER_BLOCK = [
|
||||
// Version: (note that index 0 is for padding, and is set to an illegal value)
|
||||
// 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35, 36, 37, 38, 39, 40 Error correction level
|
||||
[
|
||||
-1, 7, 10, 15, 20, 26, 18, 20, 24, 30, 18, 20, 24, 26, 30, 22, 24, 28, 30, 28, 28, 28, 28, 30, 30, 26, 28, 30, 30,
|
||||
30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30,
|
||||
],
|
||||
[
|
||||
-1, 10, 16, 26, 18, 24, 16, 18, 22, 22, 26, 30, 22, 22, 24, 24, 28, 28, 26, 26, 26, 26, 28, 28, 28, 28, 28, 28,
|
||||
28, 28, 28, 28, 28, 28, 28, 28, 28, 28, 28, 28, 28,
|
||||
],
|
||||
[
|
||||
-1, 13, 22, 18, 26, 18, 24, 18, 22, 20, 24, 28, 26, 24, 20, 30, 24, 28, 28, 26, 30, 28, 30, 30, 30, 30, 28, 30,
|
||||
30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30,
|
||||
],
|
||||
[
|
||||
-1, 17, 28, 22, 16, 22, 28, 26, 26, 24, 28, 24, 28, 22, 24, 24, 30, 28, 28, 26, 28, 30, 24, 30, 30, 30, 30, 30,
|
||||
30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30,
|
||||
], // High
|
||||
];
|
||||
QrCode.NUM_ERROR_CORRECTION_BLOCKS = [
|
||||
// Version: (note that index 0 is for padding, and is set to an illegal value)
|
||||
// 0, 1, 2, 3, 4, 5, 6, 7, 8, 9,10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35, 36, 37, 38, 39, 40 Error correction level
|
||||
[
|
||||
-1, 1, 1, 1, 1, 1, 2, 2, 2, 2, 4, 4, 4, 4, 4, 6, 6, 6, 6, 7, 8, 8, 9, 9, 10, 12, 12, 12, 13, 14, 15, 16, 17, 18,
|
||||
19, 19, 20, 21, 22, 24, 25,
|
||||
],
|
||||
[
|
||||
-1, 1, 1, 1, 2, 2, 4, 4, 4, 5, 5, 5, 8, 9, 9, 10, 10, 11, 13, 14, 16, 17, 17, 18, 20, 21, 23, 25, 26, 28, 29, 31,
|
||||
33, 35, 37, 38, 40, 43, 45, 47, 49,
|
||||
],
|
||||
[
|
||||
-1, 1, 1, 2, 2, 4, 4, 6, 6, 8, 8, 8, 10, 12, 16, 12, 17, 16, 18, 21, 20, 23, 23, 25, 27, 29, 34, 34, 35, 38, 40,
|
||||
43, 45, 48, 51, 53, 56, 59, 62, 65, 68,
|
||||
],
|
||||
[
|
||||
-1, 1, 1, 2, 4, 4, 4, 5, 6, 8, 8, 11, 11, 16, 16, 18, 16, 19, 21, 25, 25, 25, 34, 30, 32, 35, 37, 40, 42, 45, 48,
|
||||
51, 54, 57, 60, 63, 66, 70, 74, 77, 81,
|
||||
], // High
|
||||
];
|
||||
|
||||
@@ -0,0 +1,124 @@
|
||||
import { Ecc } from './qrcodegen';
|
||||
// =================== ERROR_LEVEL ==========================
|
||||
export const ERROR_LEVEL_MAP = {
|
||||
L: Ecc.LOW,
|
||||
M: Ecc.MEDIUM,
|
||||
Q: Ecc.QUARTILE,
|
||||
H: Ecc.HIGH,
|
||||
};
|
||||
// =================== DEFAULT_VALUE ==========================
|
||||
export const DEFAULT_SIZE = 160;
|
||||
export const DEFAULT_LEVEL = 'M';
|
||||
export const DEFAULT_BACKGROUND_COLOR = '#FFFFFF';
|
||||
export const DEFAULT_FRONT_COLOR = '#000000';
|
||||
export const DEFAULT_NEED_MARGIN = false;
|
||||
export const DEFAULT_MINVERSION = 1;
|
||||
export const SPEC_MARGIN_SIZE = 4;
|
||||
export const DEFAULT_MARGIN_SIZE = 0;
|
||||
export const DEFAULT_IMG_SCALE = 0.1;
|
||||
// =================== UTILS ==========================
|
||||
/**
|
||||
* Generate a path string from modules
|
||||
* @param modules
|
||||
* @param margin
|
||||
* @returns
|
||||
*/
|
||||
export const generatePath = (modules, margin = 0) => {
|
||||
const ops = [];
|
||||
modules.forEach((row, y) => {
|
||||
let start = null;
|
||||
row.forEach((cell, x) => {
|
||||
if (!cell && start !== null) {
|
||||
ops.push(`M${start + margin} ${y + margin}h${x - start}v1H${start + margin}z`);
|
||||
start = null;
|
||||
return;
|
||||
}
|
||||
if (x === row.length - 1) {
|
||||
if (!cell) {
|
||||
return;
|
||||
}
|
||||
if (start === null) {
|
||||
ops.push(`M${x + margin},${y + margin} h1v1H${x + margin}z`);
|
||||
} else {
|
||||
ops.push(`M${start + margin},${y + margin} h${x + 1 - start}v1H${start + margin}z`);
|
||||
}
|
||||
return;
|
||||
}
|
||||
if (cell && start === null) {
|
||||
start = x;
|
||||
}
|
||||
});
|
||||
});
|
||||
return ops.join('');
|
||||
};
|
||||
/**
|
||||
* Excavate modules
|
||||
* @param modules
|
||||
* @param excavation
|
||||
* @returns
|
||||
*/
|
||||
export const excavateModules = (modules, excavation) => modules.slice().map((row, y) => {
|
||||
if (y < excavation.y || y >= excavation.y + excavation.h) {
|
||||
return row;
|
||||
}
|
||||
return row.map((cell, x) => {
|
||||
if (x < excavation.x || x >= excavation.x + excavation.w) {
|
||||
return cell;
|
||||
}
|
||||
return false;
|
||||
});
|
||||
});
|
||||
/**
|
||||
* Get image settings
|
||||
* @param cells The modules of the QR code
|
||||
* @param size The size of the QR code
|
||||
* @param margin
|
||||
* @param imageSettings
|
||||
* @returns
|
||||
*/
|
||||
export const getImageSettings = (cells, size, margin, imageSettings) => {
|
||||
if (imageSettings == null) {
|
||||
return null;
|
||||
}
|
||||
const numCells = cells.length + margin * 2;
|
||||
const defaultSize = Math.floor(size * DEFAULT_IMG_SCALE);
|
||||
const scale = numCells / size;
|
||||
const w = (imageSettings.width || defaultSize) * scale;
|
||||
const h = (imageSettings.height || defaultSize) * scale;
|
||||
const x = imageSettings.x == null ? cells.length / 2 - w / 2 : imageSettings.x * scale;
|
||||
const y = imageSettings.y == null ? cells.length / 2 - h / 2 : imageSettings.y * scale;
|
||||
const opacity = imageSettings.opacity == null ? 1 : imageSettings.opacity;
|
||||
let excavation = null;
|
||||
if (imageSettings.excavate) {
|
||||
const floorX = Math.floor(x);
|
||||
const floorY = Math.floor(y);
|
||||
const ceilW = Math.ceil(w + x - floorX);
|
||||
const ceilH = Math.ceil(h + y - floorY);
|
||||
excavation = { x: floorX, y: floorY, w: ceilW, h: ceilH };
|
||||
}
|
||||
const { crossOrigin } = imageSettings;
|
||||
return { x, y, h, w, excavation, opacity, crossOrigin };
|
||||
};
|
||||
/**
|
||||
* Get margin size
|
||||
* @param needMargin Whether need margin
|
||||
* @param marginSize Custom margin size
|
||||
* @returns
|
||||
*/
|
||||
export const getMarginSize = (needMargin, marginSize) => {
|
||||
if (marginSize != null) {
|
||||
return Math.max(Math.floor(marginSize), 0);
|
||||
}
|
||||
return needMargin ? SPEC_MARGIN_SIZE : DEFAULT_MARGIN_SIZE;
|
||||
};
|
||||
/**
|
||||
* Check if Path2D is supported
|
||||
*/
|
||||
export const isSupportPath2d = (() => {
|
||||
try {
|
||||
new Path2D().addPath(new Path2D());
|
||||
} catch (_a) {
|
||||
return false;
|
||||
}
|
||||
return true;
|
||||
})();
|
||||
66
uni_modules/tdesign-uniapp/components/common/src/control.js
Normal file
66
uni_modules/tdesign-uniapp/components/common/src/control.js
Normal file
@@ -0,0 +1,66 @@
|
||||
const defaultOption = {
|
||||
valueKey: 'value',
|
||||
defaultValueKey: 'defaultValue',
|
||||
changeEventName: 'change',
|
||||
strict: true,
|
||||
};
|
||||
/**
|
||||
* 受控函数
|
||||
* 用法示例：
|
||||
* {
|
||||
* attached() {
|
||||
* this.control = useControl.call(this);
|
||||
* }
|
||||
* }
|
||||
* 注意事项：
|
||||
* 1：命名规范：约束value等命名，一般不需要改。内部属性统一命名以_开头。
|
||||
* 2：value默认值：小程序number类型未传值（undefined）会初始化为0，导致无法判断。建议默认值设置为null
|
||||
* 3：prop变化：需要开发者自己监听，observers = { value(val):{ this.control.set(val) } }
|
||||
* @param this 页面实例
|
||||
* @param option 配置项 参见ControlOption
|
||||
* @returns
|
||||
*/
|
||||
function useControl(option) {
|
||||
const { valueKey, defaultValueKey, changeEventName, strict } = {
|
||||
...defaultOption,
|
||||
...option,
|
||||
};
|
||||
const props = this.properties || {};
|
||||
const value = props[valueKey];
|
||||
// 半受控时，不需要defaultValueKey，默认值与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(
|
||||
{
|
||||
[`_${valueKey}`]: newVal,
|
||||
...extObj,
|
||||
},
|
||||
fn,
|
||||
);
|
||||
};
|
||||
return {
|
||||
controlled,
|
||||
initValue: controlled ? value : defaultValue,
|
||||
set,
|
||||
get: () => this.data[`_${valueKey}`],
|
||||
change: (newVal, customChangeData, customUpdateFn) => {
|
||||
this.$emit(changeEventName, typeof customChangeData !== 'undefined' ? customChangeData : newVal);
|
||||
// 完全受控模式，使用了受控属性，必须配合change事件来更新
|
||||
if (controlled) {
|
||||
return;
|
||||
}
|
||||
if (typeof customUpdateFn === 'function') {
|
||||
customUpdateFn();
|
||||
} else {
|
||||
set(newVal);
|
||||
}
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
export { useControl };
|
||||
99
uni_modules/tdesign-uniapp/components/common/src/flatTool.js
Normal file
99
uni_modules/tdesign-uniapp/components/common/src/flatTool.js
Normal file
@@ -0,0 +1,99 @@
|
||||
import { isObject } from '../validator';
|
||||
|
||||
/** ****************************************************************
|
||||
MIT License https://github.com/qiu8310/minapp/blob/v1.0.0-alpha.1/packages/minapp-core/src/system/util/object.ts
|
||||
Author Mora <qiuzhongleiabc@126.com> (https://github.com/qiu8310)
|
||||
****************************************************************** */
|
||||
|
||||
export const getPrototypeOf = function (obj) {
|
||||
return Object.getPrototypeOf ? Object.getPrototypeOf(obj) : obj.__proto__;
|
||||
};
|
||||
|
||||
/**
|
||||
* 遍历继承关系类的 prototype
|
||||
*
|
||||
* @export
|
||||
* @param {Function} callback - 回调函数，函数参数是遍历的每个实例的 prototype，函数如果返回 false，会终止遍历
|
||||
* @param {any} fromCtor - 要遍历的起始 class 或 prototype
|
||||
* @param {any} toCtor - 要遍历的结束 class 或 prototype
|
||||
* @param {boolean} [includeToCtor=true] - 是否要包含结束 toCtor 本身
|
||||
*
|
||||
* @example
|
||||
* A -> B -> C
|
||||
*
|
||||
* 在 C 中调用： iterateInheritedPrototype(fn, A, C, true)
|
||||
* 则，fn 会被调用三次，分别是 fn(A.prototype) fn(B.prototype) fn(C.prototype)
|
||||
*/
|
||||
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);
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
/**
|
||||
*
|
||||
* 将一个可能包含原型链的对象扁平化成单个对象
|
||||
*
|
||||
* 如，现有这样的类的继承关系 A -> B -> C，当创建一个实例 a = new A() 时
|
||||
*
|
||||
* a 实例会存有 B、C 的原型链，使用此函数 newa = toObject(a) 之后，
|
||||
* newa 就会变成一个 PlainObject，但它有 A、B、C 上的所有属性和方法，
|
||||
* 当然不包括静态属性或方法
|
||||
*
|
||||
* 注意1：用此方法的话，尽量避免在类中使用胖函数，胖函数的 this 死死的绑定
|
||||
* 在原对象中，无法重新绑定
|
||||
*
|
||||
* 注意2：类继承的时候不要在函数中调用 super，toObject 之后是扁平的，没有 super 之说
|
||||
*/
|
||||
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, { ...desc, ...defaultDesc });
|
||||
});
|
||||
},
|
||||
something,
|
||||
options.till || Object,
|
||||
false,
|
||||
);
|
||||
|
||||
return obj;
|
||||
};
|
||||
@@ -0,0 +1,4 @@
|
||||
export * from './superComponent';
|
||||
export * from './flatTool';
|
||||
export * from './instantiationDecorator';
|
||||
export * from './control';
|
||||
@@ -0,0 +1,251 @@
|
||||
/* eslint-disable no-param-reassign */
|
||||
import { isPlainObject } from '../validator';
|
||||
import { canUseVirtualHost } from '../version';
|
||||
import { toCamel, toPascal, hyphenate } from '../utils';
|
||||
|
||||
const getInnerControlledValue = key => `data${key.replace(/^(\w)/, (e, t) => t.toUpperCase())}`;
|
||||
const getDefaultKey = key => `default${key.replace(/^(\w)/, (e, t) => t.toUpperCase())}`;
|
||||
|
||||
const ARIAL_PROPS = [
|
||||
{ key: 'ariaHidden', type: Boolean },
|
||||
{ key: 'ariaRole', type: String },
|
||||
{ key: 'ariaLabel', type: String },
|
||||
{ key: 'ariaLabelledby', type: String },
|
||||
{ key: 'ariaDescribedby', type: String },
|
||||
{ key: 'ariaBusy', type: Boolean },
|
||||
];
|
||||
|
||||
const getPropsDefault = (type, disableBoolean = false) => {
|
||||
if (type === Boolean && !disableBoolean) {
|
||||
return false;
|
||||
}
|
||||
if (type === String) {
|
||||
return '';
|
||||
}
|
||||
return undefined;
|
||||
};
|
||||
|
||||
const COMMON_PROPS = {
|
||||
...ARIAL_PROPS.reduce((acc, item) => ({
|
||||
...acc,
|
||||
[item.key]: {
|
||||
type: item.type,
|
||||
default: getPropsDefault(item.type),
|
||||
},
|
||||
}), {}),
|
||||
|
||||
customStyle: { type: [String, Object], default: '' },
|
||||
};
|
||||
|
||||
|
||||
export const toComponent = function (options) {
|
||||
if (!options.properties && options.props) {
|
||||
options.properties = options.props;
|
||||
}
|
||||
|
||||
if (options.properties) {
|
||||
Object.keys(options.properties).forEach((k) => {
|
||||
let opt = options.properties[k];
|
||||
// 如果不是 Object 类型，则默认指定 type = options.properties[k]；
|
||||
if (!isPlainObject(opt)) {
|
||||
opt = { type: opt };
|
||||
}
|
||||
options.properties[k] = opt;
|
||||
});
|
||||
}
|
||||
|
||||
if (!options.methods) options.methods = {};
|
||||
|
||||
if (!options.lifetimes) options.lifetimes = {};
|
||||
|
||||
const oldCreated = options.created;
|
||||
const { controlledProps = [] } = options;
|
||||
|
||||
options.created = function (...args) {
|
||||
if (oldCreated) {
|
||||
oldCreated.apply(this, args);
|
||||
}
|
||||
controlledProps.forEach(({ key }) => {
|
||||
const defaultKey = getDefaultKey(key);
|
||||
const tDataKey = getInnerControlledValue(key);
|
||||
this[tDataKey] = this[key];
|
||||
|
||||
if (this[key] == null) {
|
||||
this._selfControlled = true;
|
||||
}
|
||||
|
||||
if (this[key] == null && this[defaultKey] != null) {
|
||||
this[tDataKey] = this[defaultKey];
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
options.methods._trigger = function (evtName, detail, opts) {
|
||||
const target = controlledProps.find(item => item.event === evtName);
|
||||
|
||||
if (target) {
|
||||
const { key } = target;
|
||||
if (this._selfControlled) {
|
||||
const tDataKey = getInnerControlledValue(key);
|
||||
this[tDataKey] = detail[key];
|
||||
}
|
||||
this.$emit(
|
||||
`update:${key}`,
|
||||
detail[key],
|
||||
opts,
|
||||
);
|
||||
}
|
||||
|
||||
this.$emit(
|
||||
evtName,
|
||||
detail,
|
||||
opts,
|
||||
);
|
||||
};
|
||||
return options;
|
||||
};
|
||||
|
||||
|
||||
/**
|
||||
* 将一个继承了 BaseComponent 的类转化成 小程序 Component 的调用
|
||||
* 根据最新的微信 d.ts 描述文件，Component 在实例化的时候，会忽略不支持的自定义属性
|
||||
*/
|
||||
export const wxComponent = function wxComponent() {
|
||||
return function (baseConstructor) {
|
||||
class WxComponent extends baseConstructor {
|
||||
// 暂时移除了冗余的代码，后续补充
|
||||
}
|
||||
|
||||
const current = new WxComponent();
|
||||
|
||||
current.options = current.options || {};
|
||||
|
||||
// 所有组件默认都开启css作用域
|
||||
// 写到这里是为了防止组件设置 options 时无意覆盖掉了 addGlobalClass
|
||||
// 使用 "styleIsolation": "apply-shared" 代替 addGlobalClass: true，see https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/glass-easel/migration.html#JSON-%E9%85%8D%E7%BD%AE
|
||||
// if (current.options.addGlobalClass === undefined) {
|
||||
// current.options.addGlobalClass = true;
|
||||
// }
|
||||
|
||||
if (canUseVirtualHost() && current.options.virtualHost == null) {
|
||||
current.options.virtualHost = true;
|
||||
}
|
||||
|
||||
const obj = toComponent(current);
|
||||
|
||||
return obj;
|
||||
};
|
||||
};
|
||||
|
||||
function sortPropsType(type) {
|
||||
if (!Array.isArray(type)) {
|
||||
return type;
|
||||
}
|
||||
type.sort((a, b) => {
|
||||
if (a === Boolean) {
|
||||
return -1;
|
||||
}
|
||||
if (b === Boolean) {
|
||||
return 1;
|
||||
}
|
||||
return 0;
|
||||
});
|
||||
return type;
|
||||
}
|
||||
|
||||
function filterProps(props, controlledProps) {
|
||||
const newProps = {};
|
||||
const emits = [];
|
||||
const reg = /^on[A-Z][a-z]/;
|
||||
const controlledKeys = Object.values(controlledProps).map(item => item.key);
|
||||
const unControlledKeys = controlledKeys.map(key => getDefaultKey(key));
|
||||
|
||||
Object.keys(props).forEach((key) => {
|
||||
const curType = props[key].type || props[key];
|
||||
|
||||
if (reg.test(key) && props[key].type === Function) {
|
||||
const str = key.replace(/^on/, '');
|
||||
const eventName = str.charAt(0).toLowerCase() + str.slice(1);
|
||||
emits.push(...[hyphenate(eventName), eventName]);
|
||||
} else if (controlledKeys.indexOf(key) > -1
|
||||
|| unControlledKeys.indexOf(key) > -1
|
||||
) {
|
||||
const newType = Array.isArray(curType) ? curType : [curType];
|
||||
newProps[key] = {
|
||||
type: [null, ...newType],
|
||||
default: null,
|
||||
};
|
||||
} else if (
|
||||
[Boolean, String].indexOf(props[key].type) > -1
|
||||
&& props[key].default === undefined
|
||||
) {
|
||||
newProps[key] = {
|
||||
...props[key],
|
||||
default: getPropsDefault(props[key].type, true),
|
||||
};
|
||||
} else {
|
||||
newProps[key] = {
|
||||
...(typeof props[key] === 'object' ? props[key] : {}),
|
||||
type: sortPropsType(curType),
|
||||
};
|
||||
}
|
||||
});
|
||||
|
||||
return {
|
||||
newProps,
|
||||
emits,
|
||||
};
|
||||
}
|
||||
|
||||
const getEmitsByControlledProps = controlledProps => Object.values(controlledProps).map(item => `update:${item.key}`);
|
||||
|
||||
export const uniComponent = function (info) {
|
||||
const { newProps, emits } = filterProps(info.props || {}, info.controlledProps || {});
|
||||
info.props = {
|
||||
...getExternalClasses(info),
|
||||
...newProps,
|
||||
...COMMON_PROPS,
|
||||
};
|
||||
info.emits = Array.from(new Set([
|
||||
...(info.emits || []),
|
||||
|
||||
...(getEmitsByControlledProps(info.controlledProps || {})),
|
||||
...emits,
|
||||
]));
|
||||
|
||||
info.options = {
|
||||
...(info.options || {}),
|
||||
multipleSlots: true,
|
||||
};
|
||||
|
||||
if (canUseVirtualHost() && info.options.virtualHost == null) {
|
||||
info.options.virtualHost = true;
|
||||
}
|
||||
|
||||
if (!info.options.styleIsolation) {
|
||||
info.options.styleIsolation = 'shared';
|
||||
}
|
||||
if (info.name) {
|
||||
info.name = toPascal(info.name);
|
||||
}
|
||||
|
||||
const obj = toComponent(info);
|
||||
return obj;
|
||||
};
|
||||
|
||||
|
||||
export function getExternalClasses(info) {
|
||||
if (!info.externalClasses) {
|
||||
return {};
|
||||
}
|
||||
const { externalClasses } = info;
|
||||
const list = Array.isArray(externalClasses) ? externalClasses : [externalClasses];
|
||||
|
||||
return list.reduce((acc, item) => ({
|
||||
...acc,
|
||||
[toCamel(item)]: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
}), {});
|
||||
}
|
||||
@@ -0,0 +1,5 @@
|
||||
export class SuperComponent {
|
||||
constructor() {
|
||||
this.app = getApp();
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,232 @@
|
||||
// 公共前缀
|
||||
@prefix: t;
|
||||
|
||||
@primary-color-1: var(--td-primary-color-1, #f2f3ff);
|
||||
@primary-color-2: var(--td-primary-color-2, #d9e1ff);
|
||||
@primary-color-3: var(--td-primary-color-3, #b5c7ff);
|
||||
@primary-color-4: var(--td-primary-color-4, #8eabff);
|
||||
@primary-color-5: var(--td-primary-color-5, #618dff);
|
||||
@primary-color-6: var(--td-primary-color-6, #366ef4);
|
||||
@primary-color-7: var(--td-primary-color-7, #0052d9);
|
||||
@primary-color-8: var(--td-primary-color-8, #003cab);
|
||||
@primary-color-9: var(--td-primary-color-9, #002a7c);
|
||||
@primary-color-10: var(--td-primary-color-10, #001a57);
|
||||
|
||||
@error-color-1: var(--td-error-color-1, #fff0ed);
|
||||
@error-color-2: var(--td-error-color-2, #ffd8d2);
|
||||
@error-color-3: var(--td-error-color-3, #ffb9b0);
|
||||
@error-color-4: var(--td-error-color-4, #ff9285);
|
||||
@error-color-5: var(--td-error-color-5, #f6685d);
|
||||
@error-color-6: var(--td-error-color-6, #d54941);
|
||||
@error-color-7: var(--td-error-color-7, #ad352f);
|
||||
@error-color-8: var(--td-error-color-8, #881f1c);
|
||||
@error-color-9: var(--td-error-color-9, #68070a);
|
||||
@error-color-10: var(--td-error-color-10, #490002);
|
||||
|
||||
@warning-color-1: var(--td-warning-color-1, #fff1e9);
|
||||
@warning-color-2: var(--td-warning-color-2, #ffd9c2);
|
||||
@warning-color-3: var(--td-warning-color-3, #ffb98c);
|
||||
@warning-color-4: var(--td-warning-color-4, #fa9550);
|
||||
@warning-color-5: var(--td-warning-color-5, #e37318);
|
||||
@warning-color-6: var(--td-warning-color-6, #be5a00);
|
||||
@warning-color-7: var(--td-warning-color-7, #954500);
|
||||
@warning-color-8: var(--td-warning-color-8, #713300);
|
||||
@warning-color-9: var(--td-warning-color-9, #532300);
|
||||
@warning-color-10: var(--td-warning-color-10, #3b1700);
|
||||
|
||||
@success-color-1: var(--td-success-color-1, #e3f9e9);
|
||||
@success-color-2: var(--td-success-color-2, #c6f3d7);
|
||||
@success-color-3: var(--td-success-color-3, #92dab2);
|
||||
@success-color-4: var(--td-success-color-4, #56c08d);
|
||||
@success-color-5: var(--td-success-color-5, #2ba471);
|
||||
@success-color-6: var(--td-success-color-6, #008858);
|
||||
@success-color-7: var(--td-success-color-7, #006c45);
|
||||
@success-color-8: var(--td-success-color-8, #005334);
|
||||
@success-color-9: var(--td-success-color-9, #003b23);
|
||||
@success-color-10: var(--td-success-color-10, #002515);
|
||||
|
||||
@gray-color-1: var(--td-gray-color-1, #f3f3f3);
|
||||
@gray-color-2: var(--td-gray-color-2, #eeeeee);
|
||||
@gray-color-3: var(--td-gray-color-3, #e7e7e7);
|
||||
@gray-color-4: var(--td-gray-color-4, #dcdcdc);
|
||||
@gray-color-5: var(--td-gray-color-5, #c5c5c5);
|
||||
@gray-color-6: var(--td-gray-color-6, #a6a6a6);
|
||||
@gray-color-7: var(--td-gray-color-7, #8b8b8b);
|
||||
@gray-color-8: var(--td-gray-color-8, #777777);
|
||||
@gray-color-9: var(--td-gray-color-9, #5e5e5e);
|
||||
@gray-color-10: var(--td-gray-color-10, #4b4b4b);
|
||||
@gray-color-11: var(--td-gray-color-11, #383838);
|
||||
@gray-color-12: var(--td-gray-color-12, #2c2c2c);
|
||||
@gray-color-13: var(--td-gray-color-13, #242424);
|
||||
@gray-color-14: var(--td-gray-color-14, #181818);
|
||||
|
||||
@font-gray-1: var(--td-font-gray-1, rgba(0, 0, 0, 0.9));
|
||||
@font-gray-2: var(--td-font-gray-2, rgba(0, 0, 0, 0.6));
|
||||
@font-gray-3: var(--td-font-gray-3, rgba(0, 0, 0, 0.4));
|
||||
@font-gray-4: var(--td-font-gray-4, rgba(0, 0, 0, 0.26));
|
||||
|
||||
@font-white-1: var(--td-font-white-1, rgba(255, 255, 255, 1));
|
||||
@font-white-2: var(--td-font-white-2, rgba(255, 255, 255, 0.55));
|
||||
@font-white-3: var(--td-font-white-3, rgba(255, 255, 255, 0.35));
|
||||
@font-white-4: var(--td-font-white-4, rgba(255, 255, 255, 0.22));
|
||||
|
||||
// 边框色
|
||||
@border-color: var(--td-border-color, @gray-color-3);
|
||||
|
||||
// Spacer
|
||||
@spacer: var(--td-spacer, 16rpx);
|
||||
@spacer-1: var(--td-spacer-1, 24rpx); // 间距-小-x
|
||||
@spacer-2: var(--td-spacer-2, 32rpx); // 间距-小
|
||||
@spacer-3: var(--td-spacer-3, 48rpx); // 间距-中
|
||||
@spacer-4: var(--td-spacer-4, 64rpx); // 间距-大
|
||||
@spacer-5: var(--td-spacer-5, 96rpx); // 间距-大-x
|
||||
@spacer-6: var(--td-spacer-6, 160rpx); // 间距-大-xx
|
||||
|
||||
@text-line-height: var(--td-line-height-body-extraSmall, 16px);
|
||||
@text-line-height-xs: var(--td-line-height-body-extraSmall, @text-line-height);
|
||||
@text-line-height-s: var(--td-line-height-body-small, 20px);
|
||||
@text-line-height-base: var(--td-line-height-title-small, 22px);
|
||||
@text-line-height-m: var(--td-line-height-title-medium, 24px);
|
||||
@text-line-height-l: var(--td-line-height-title-large, 26px);
|
||||
@text-line-height-xl: var(--td-line-height-title-extraLarge, 28px);
|
||||
@text-line-height-xxl: var(--td-line-height-headline-large, 44px);
|
||||
|
||||
// Font
|
||||
@font-size: var(--td-font-size, 20rpx);
|
||||
@font-size-xs: var(--td-font-size-xs, @font-size); // 字号-一级字号
|
||||
@font-size-s: var(--td-font-size-s, 24rpx); // 字号-二级字号
|
||||
@font-size-base: var(--td-font-size-base, 28rpx); // 字号-三级字号
|
||||
@font-size-m: var(--td-font-size-m, 32rpx); // 字号-二级字号
|
||||
@font-size-l: var(--td-font-size-l, 36rpx); // 字号-四级字号
|
||||
@font-size-xl: var(--td-font-size-xl, 40rpx); // 字号-五级字号
|
||||
@font-size-xxl: var(--td-font-size-xxl, 72rpx);
|
||||
|
||||
@font-family: var(--td-font-family, PingFang SC, Microsoft YaHei, Arial Regular); // 字体-磅数-常规
|
||||
@font-family-medium: var(--td-font-family-medium, PingFang SC, Microsoft YaHei, Arial Medium); // 字体-磅数-粗体
|
||||
|
||||
// 使用以下与Design Token对应的font token开发组件对应字体、行高
|
||||
@font-link-small: var(--td-font-link-small, 24rpx / 40rpx @font-family);
|
||||
@font-link-medium: var(--td-font-link-medium, 28rpx / 44rpx @font-family);
|
||||
@font-link-large: var(--td-font-link-large, 32rpx / 48rpx @font-family);
|
||||
@font-mark-extraSmall: var(--td-font-mark-extraSmall, 600 20rpx / 32rpx @font-family);
|
||||
@font-mark-small: var(--td-font-mark-small, 600 24rpx / 40rpx @font-family);
|
||||
@font-mark-medium: var(--td-font-mark-medium, 600 28rpx / 44rpx @font-family);
|
||||
@font-mark-large: var(--td-font-mark-large, 600 32rpx / 48rpx @font-family);
|
||||
@font-body-extraSmall: var(--td-font-body-extraSmall, 20rpx / 32rpx @font-family);
|
||||
@font-body-small: var(--td-font-body-small, 24rpx / 40rpx @font-family);
|
||||
@font-body-medium: var(--td-font-body-medium, 28rpx / 44rpx @font-family);
|
||||
@font-body-large: var(--td-font-body-large, 32rpx / 48rpx @font-family);
|
||||
@font-title-small: var(--td-font-title-small, 600 28rpx / 44rpx @font-family);
|
||||
@font-title-medium: var(--td-font-title-medium, 600 32rpx / 48rpx @font-family);
|
||||
@font-title-large: var(--td-font-title-large, 600 36rpx / 52rpx @font-family);
|
||||
@font-title-extraLarge: var(--td-font-title-extraLarge, 600 40rpx / 56rpx @font-family);
|
||||
@font-headline-small: var(--td-font-headline-small, 600 48rpx / 64rpx @font-family);
|
||||
@font-headline-medium: var(--td-font-headline-medium, 600 56rpx / 72rpx @font-family);
|
||||
@font-headline-large: var(--td-font-headline-large, 600 72rpx / 88rpx @font-family);
|
||||
@font-display-medium: var(--td-font-display-medium, 600 96rpx / 112rpx @font-family);
|
||||
@font-display-large: var(--td-font-display-large, 600 128rpx / 144rpx @font-family);
|
||||
|
||||
// 圆角
|
||||
@radius-small: var(--td-radius-small, 6rpx);
|
||||
@radius-default: var(--td-radius-default, 12rpx);
|
||||
@radius-large: var(--td-radius-large, 18rpx);
|
||||
@radius-extraLarge: var(--td-radius-extraLarge, 24rpx);
|
||||
@radius-round: var(--td-radius-round, 999px);
|
||||
@radius-circle: var(--td-radius-circle, 50%);
|
||||
|
||||
// 阴影
|
||||
@shadow-1: var(
|
||||
--td-shadow-1,
|
||||
0 1px 10px rgba(0, 0, 0, 5%),
|
||||
0 4px 5px rgba(0, 0, 0, 8%),
|
||||
0 2px 4px -1px rgba(0, 0, 0, 12%)
|
||||
);
|
||||
@shadow-2: var(
|
||||
--td-shadow-2,
|
||||
0 3px 14px 2px rgba(0, 0, 0, 5%),
|
||||
0 8px 10px 1px rgba(0, 0, 0, 6%),
|
||||
0 5px 5px -3px rgba(0, 0, 0, 10%)
|
||||
);
|
||||
@shadow-3: var(
|
||||
--td-shadow-3,
|
||||
0 6px 30px 5px rgba(0, 0, 0, 5%),
|
||||
0 16px 24px 2px rgba(0, 0, 0, 4%),
|
||||
0 8px 10px -5px rgba(0, 0, 0, 8%)
|
||||
);
|
||||
@shadow-4: var(--td-shadow-4, 0 2px 8px 0 rgba(0, 0, 0, 0.06));
|
||||
|
||||
// 动画
|
||||
@anim-time-fn-easing: var(--td-anim-time-fn-easing, cubic-bezier(0.38, 0, 0.24, 1));
|
||||
@anim-time-fn-ease-out: var(--td-anim-time-fn-ease-out, cubic-bezier(0, 0, 0.15, 1));
|
||||
@anim-time-fn-ease-in: var(--td-anim-time-fn-ease-in, cubic-bezier(0.82, 0, 1, 0.9));
|
||||
@anim-duration-base: var(--td-anim-duration-base, 0.2s);
|
||||
@anim-duration-moderate: var(--td-anim-duration-moderate, 0.24s);
|
||||
@anim-duration-slow: var(--td-anim-duration-slow, 0.28s);
|
||||
|
||||
// 容器
|
||||
@bg-color-page: var(--td-bg-color-page, @gray-color-1);
|
||||
@bg-color-container: var(--td-bg-color-container, @font-white-1);
|
||||
@bg-color-container-active: var(--td-bg-color-container-active, @gray-color-3);
|
||||
|
||||
@bg-color-secondarycontainer: var(--td-bg-color-secondarycontainer, @gray-color-1);
|
||||
@bg-color-secondarycontainer-active: var(--td-bg-color-secondarycontainer-active, @gray-color-4);
|
||||
|
||||
@bg-color-component: var(--td-bg-color-component, @gray-color-3);
|
||||
@bg-color-component-active: var(--td-bg-color-component-active, @gray-color-6);
|
||||
@bg-color-component-disabled: var(--td-bg-color-component-disabled, @gray-color-2);
|
||||
|
||||
@bg-color-secondarycomponent: var(--td-bg-color-secondarycomponent, @gray-color-4);
|
||||
@bg-color-secondarycomponent-active: var(--td-bg-color-secondarycomponent-active, @gray-color-6);
|
||||
|
||||
// 特殊组件背景色，目前只用于 button、input 组件多主题场景，浅色主题下固定为白色，深色主题下为 transparent 适配背景颜色
|
||||
@bg-color-specialcomponent: var(--td-bg-color-specialcomponent, #fff);
|
||||
|
||||
@component-stroke: var(--td-component-stroke, @gray-color-3);
|
||||
@border-level-1-color: var(--td-border-level-1-color, @gray-color-3);
|
||||
@component-border: var(--td-component-border, @gray-color-4);
|
||||
@border-level-2-color: var(--td-border-level-2-color, @gray-color-4);
|
||||
|
||||
// 主题
|
||||
@brand-color: var(--td-brand-color, @primary-color-7);
|
||||
@brand-color-active: var(--td-brand-color-active, @primary-color-8);
|
||||
@brand-color-disabled: var(--td-brand-color-disabled, @primary-color-3);
|
||||
@brand-color-focus: var(--td-brand-color-focus, @primary-color-1);
|
||||
@brand-color-light: var(--td-brand-color-light, @primary-color-1);
|
||||
@brand-color-light-active: var(--td-brand-color-light-active, @primary-color-2);
|
||||
|
||||
@error-color: var(--td-error-color, @error-color-6);
|
||||
@error-color-active: var(--td-error-color-active, @error-color-7);
|
||||
@error-color-disabled: var(--td-error-color-disabled, @error-color-3);
|
||||
@error-color-focus: var(--td-error-color-focus, @error-color-2);
|
||||
@error-color-light: var(--td-error-color-light, @error-color-1);
|
||||
|
||||
@warning-color: var(--td-warning-color, @warning-color-5);
|
||||
@warning-color-active: var(--td-warning-color-active, @warning-color-6);
|
||||
@warning-color-disabled: var(--td-warning-color-disabled, @warning-color-3);
|
||||
@warning-color-focus: var(--td-warning-color-focus, @warning-color-2);
|
||||
@warning-color-light: var(--td-warning-color-light, @warning-color-1);
|
||||
|
||||
@success-color: var(--td-success-color, @success-color-5);
|
||||
@success-color-active: var(--td-success-color-active, @success-color-6);
|
||||
@success-color-disabled: var(--td-success-color-disabled, @success-color-3);
|
||||
@success-color-focus: var(--td-success-color-focus, @success-color-2);
|
||||
@success-color-light: var(--td-success-color-light, @success-color-1);
|
||||
|
||||
// 文字
|
||||
@text-color-primary: var(--td-text-color-primary, @font-gray-1);
|
||||
@text-color-secondary: var(--td-text-color-secondary, @font-gray-2);
|
||||
@text-color-placeholder: var(--td-text-color-placeholder, @font-gray-3);
|
||||
@text-color-disabled: var(--td-text-color-disabled, @font-gray-4);
|
||||
@text-color-anti: var(--td-text-color-anti, @font-white-1);
|
||||
@text-color-brand: var(--td-text-color-brand, @brand-color);
|
||||
@text-color-link: var(--td-text-color-link, @brand-color);
|
||||
|
||||
// 定位
|
||||
@position-fixed-top: var(--td-position-fixed-top, 0);
|
||||
|
||||
// 遮罩
|
||||
@mask-active: var(--td-mask-active, rgba(0, 0, 0, 0.6)); // 遮罩-弹出
|
||||
@mask-disabled: var(--td-mask-disabled, rgba(255, 255, 255, 0.6)); // 遮罩-禁用
|
||||
@mask-bg: var(--td-mask-background, rgba(255, 255, 255, 0.96)); // 二维码遮罩
|
||||
|
||||
@text-line-height: 1.5;
|
||||
@@ -0,0 +1,4 @@
|
||||
// 变量
|
||||
@import './_variables.less';
|
||||
|
||||
@import './mixins/_index.less';
|
||||
13
uni_modules/tdesign-uniapp/components/common/style/index.css
Normal file
13
uni_modules/tdesign-uniapp/components/common/style/index.css
Normal file
@@ -0,0 +1,13 @@
|
||||
.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,34 @@
|
||||
@import '../_variables.less';
|
||||
|
||||
.border(@position: bottom, @border-color: @component-border) {
|
||||
position: relative;
|
||||
|
||||
&::after {
|
||||
content: '';
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: if(@position = top, 0, unset);
|
||||
bottom: if(@position = bottom, 0, unset);
|
||||
left: if(@position = left, 0, unset);
|
||||
right: if(@position = right, 0, unset);
|
||||
background-color: @border-color;
|
||||
}
|
||||
}
|
||||
|
||||
.border(@position: bottom, @border-color: @gray-color-1) when(@position = bottom) , (@position = top) {
|
||||
&::after {
|
||||
height: 1px;
|
||||
left: 0;
|
||||
right: 0;
|
||||
transform: scaleY(0.5);
|
||||
}
|
||||
}
|
||||
|
||||
.border(@position: bottom, @border-color: @gray-color-1) when(@position = left),(@position = right) {
|
||||
&::after {
|
||||
width: 1px;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
transform: scaleX(0.5);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,7 @@
|
||||
.clearfix() {
|
||||
&::after {
|
||||
display: table;
|
||||
clear: both;
|
||||
content: '';
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,6 @@
|
||||
.cursor-pointer() {
|
||||
cursor: pointer;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
-webkit-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
@@ -0,0 +1,15 @@
|
||||
.ellipsis(@w:auto) {
|
||||
width: @w;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
word-wrap: normal;
|
||||
}
|
||||
|
||||
.ellipsisLn(@line) {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
-webkit-line-clamp: @line;
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
}
|
||||
@@ -0,0 +1,55 @@
|
||||
@import '../_variables.less';
|
||||
|
||||
.hairline-base() {
|
||||
position: absolute;
|
||||
box-sizing: border-box;
|
||||
content: ' ';
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.hairline(@color: @border-level-1-color) {
|
||||
.hairline-base();
|
||||
top: -50%;
|
||||
right: -50%;
|
||||
bottom: -50%;
|
||||
left: -50%;
|
||||
border: 1px solid @color;
|
||||
transform: scale(0.5);
|
||||
}
|
||||
|
||||
.hairline-top(@color: @border-level-1-color) {
|
||||
.hairline-base();
|
||||
right: 0;
|
||||
left: 0;
|
||||
top: 0;
|
||||
border-top: 1px solid @color;
|
||||
transform: scaleY(0.5);
|
||||
transform-origin: 0 0;
|
||||
}
|
||||
|
||||
.hairline-bottom(@color: @border-level-1-color, @width: 1px) {
|
||||
.hairline-base();
|
||||
right: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
border-bottom: @width solid @color;
|
||||
transform: scaleY(0.5);
|
||||
}
|
||||
|
||||
.hairline-left(@color: @border-level-1-color) {
|
||||
.hairline-base();
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
border-left: 1px solid @color;
|
||||
transform: scaleX(0.5);
|
||||
}
|
||||
|
||||
.hairline-right(@color: @border-level-1-color) {
|
||||
.hairline-base();
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
border-right: 1px solid @color;
|
||||
transform: scaleX(0.5);
|
||||
}
|
||||
@@ -0,0 +1,6 @@
|
||||
@import './_clearfix.less';
|
||||
@import './_hairline.less';
|
||||
@import './_ellipsis.less';
|
||||
@import './_cursor.less';
|
||||
@import './_border.less';
|
||||
@import './_other.less';
|
||||
@@ -0,0 +1,14 @@
|
||||
// 屏幕中不显示, 但可被读屏
|
||||
.sr-only() {
|
||||
&--sr-only {
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
clip: rect(0, 0, 0, 0);
|
||||
white-space: nowrap;
|
||||
clip-path: inset(50%);
|
||||
border: 0;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,519 @@
|
||||
|
||||
/* ./raw/_light.less */
|
||||
@media (prefers-color-scheme: light) {
|
||||
/* #ifdef H5 */
|
||||
:root,
|
||||
/* #endif */
|
||||
page,
|
||||
.page {
|
||||
--td-brand-color-1: #f2f3ff;
|
||||
--td-brand-color-2: #d9e1ff;
|
||||
--td-brand-color-3: #b5c7ff;
|
||||
--td-brand-color-4: #8eabff;
|
||||
--td-brand-color-5: #618dff;
|
||||
--td-brand-color-6: #366ef4;
|
||||
--td-brand-color-7: #0052d9;
|
||||
--td-brand-color-8: #003cab;
|
||||
--td-brand-color-9: #002a7c;
|
||||
--td-brand-color-10: #001a57;
|
||||
|
||||
--td-primary-color-1: var(--td-brand-color-1);
|
||||
--td-primary-color-2: var(--td-brand-color-2);
|
||||
--td-primary-color-3: var(--td-brand-color-3);
|
||||
--td-primary-color-4: var(--td-brand-color-4);
|
||||
--td-primary-color-5: var(--td-brand-color-5);
|
||||
--td-primary-color-6: var(--td-brand-color-6);
|
||||
--td-primary-color-7: var(--td-brand-color-7);
|
||||
--td-primary-color-8: var(--td-brand-color-8);
|
||||
--td-primary-color-9: var(--td-brand-color-9);
|
||||
--td-primary-color-10: var(--td-brand-color-10);
|
||||
|
||||
--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: rgba(255, 255, 255, 1);
|
||||
--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, 60%); // 遮罩-弹出
|
||||
--td-mask-disabled: rgba(255, 255, 255, 60%); // 遮罩-禁用
|
||||
--td-mask-background: rgba(255, 255, 255, 96%); // 二维码遮罩
|
||||
|
||||
// 背景色
|
||||
--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);
|
||||
|
||||
// 特殊组件背景色，目前只用于 button、input 组件多主题场景，浅色主题下固定为白色，深色主题下为 transparent 适配背景颜色
|
||||
--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);
|
||||
|
||||
// 基础/下层 投影 hover 使用的组件包括：表格 /
|
||||
--td-shadow-1: 0 1px 10px rgba(0, 0, 0, 5%), 0 4px 5px rgba(0, 0, 0, 8%), 0 2px 4px -1px rgba(0, 0, 0, 12%);
|
||||
// 中层投影 下拉 使用的组件包括：下拉菜单 / 气泡确认框 / 选择器 /
|
||||
--td-shadow-2: 0 3px 14px 2px rgba(0, 0, 0, 5%), 0 8px 10px 1px rgba(0, 0, 0, 6%), 0 5px 5px -3px rgba(0, 0, 0, 10%);
|
||||
// 上层投影（警示/弹窗）使用的组件包括：全局提示 / 消息通知
|
||||
--td-shadow-3: 0 6px 30px 5px rgba(0, 0, 0, 5%), 0 16px 24px 2px rgba(0, 0, 0, 4%),
|
||||
0 8px 10px -5px rgba(0, 0, 0, 8%);
|
||||
--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;
|
||||
|
||||
// table 特定阴影
|
||||
--td-table-shadow-color: rgba(0, 0, 0, 8%);
|
||||
|
||||
// 滚动条颜色
|
||||
--td-scrollbar-color: rgba(0, 0, 0, 10%);
|
||||
// 滚动条悬浮颜色（ hover ）
|
||||
--td-scrollbar-hover-color: rgba(0, 0, 0, 30%);
|
||||
// 滚动条轨道颜色，不能是带透明度，否则纵向滚动时，横向滚动条会穿透
|
||||
--td-scroll-track-color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/* ./raw/_dark.less */
|
||||
@media (prefers-color-scheme: dark) {
|
||||
/* #ifdef H5 */
|
||||
:root,
|
||||
/* #endif */
|
||||
page,
|
||||
.page {
|
||||
--td-brand-color-1: #1b2f51;
|
||||
--td-brand-color-2: #173463;
|
||||
--td-brand-color-3: #143975;
|
||||
--td-brand-color-4: #103d88;
|
||||
--td-brand-color-5: #0d429a;
|
||||
--td-brand-color-6: #054bbe;
|
||||
--td-brand-color-7: #2667d4;
|
||||
--td-brand-color-8: #4582e6;
|
||||
--td-brand-color-9: #699ef5;
|
||||
--td-brand-color-10: #96bbf8;
|
||||
|
||||
--td-primary-color-1: var(--td-brand-color-1);
|
||||
--td-primary-color-2: var(--td-brand-color-2);
|
||||
--td-primary-color-3: var(--td-brand-color-3);
|
||||
--td-primary-color-4: var(--td-brand-color-4);
|
||||
--td-primary-color-5: var(--td-brand-color-5);
|
||||
--td-primary-color-6: var(--td-brand-color-6);
|
||||
--td-primary-color-7: var(--td-brand-color-7);
|
||||
--td-primary-color-8: var(--td-brand-color-8);
|
||||
--td-primary-color-9: var(--td-brand-color-9);
|
||||
--td-primary-color-10: var(--td-brand-color-10);
|
||||
|
||||
--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, 90%);
|
||||
--td-font-white-2: rgba(255, 255, 255, 55%);
|
||||
--td-font-white-3: rgba(255, 255, 255, 35%);
|
||||
--td-font-white-4: rgba(255, 255, 255, 22%);
|
||||
--td-font-gray-1: rgba(0, 0, 0, 90%);
|
||||
--td-font-gray-2: rgba(0, 0, 0, 60%);
|
||||
--td-font-gray-3: rgba(0, 0, 0, 40%);
|
||||
--td-font-gray-4: rgba(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); // focus态，包括鼠标和键盘
|
||||
--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, 40%); // 遮罩-弹出
|
||||
--td-mask-disabled: rgba(0, 0, 0, 60%); // 遮罩-禁用
|
||||
--td-mask-background: rgba(36, 36, 36, 96%); // 二维码遮罩
|
||||
|
||||
// 背景色
|
||||
--td-bg-color-page: var(--td-gray-color-14); // 色彩 - page
|
||||
--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); // 色彩 - 容器 - active
|
||||
--td-bg-color-secondarycontainer-active: var(--td-gray-color-11); // 色彩 - 次级容器 - active
|
||||
--td-bg-color-component-active: var(--td-gray-color-10); // 色彩 - 组件 - active
|
||||
--td-bg-color-component-disabled: var(--td-gray-color-12); // 色彩 - 组件 - disabled
|
||||
--td-bg-color-secondarycomponent: var(--td-gray-color-10); // 色彩 - 次级组件
|
||||
--td-bg-color-secondarycomponent-active: var(--td-gray-color-8); // 色彩 - 次级组件 - active
|
||||
|
||||
// 特殊组件背景色，目前只用于 button、input 组件多主题场景，浅色主题下固定为白色，深色主题下为 transparent 适配背景颜色
|
||||
--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);
|
||||
|
||||
// 基础/下层 投影 hover 使用的组件包括：表格 /
|
||||
--td-shadow-1: 0 4px 6px rgba(0, 0, 0, 6%), 0 1px 10px rgba(0, 0, 0, 8%), 0 2px 4px rgba(0, 0, 0, 12%);
|
||||
// 中层投影 下拉 使用的组件包括：下拉菜单 / 气泡确认框 / 选择器 /
|
||||
--td-shadow-2: 0 8px 10px rgba(0, 0, 0, 12%), 0 3px 14px rgba(0, 0, 0, 10%), 0 5px 5px rgba(0, 0, 0, 16%);
|
||||
// 上层投影（警示/弹窗）使用的组件包括：全局提示 / 消息通知
|
||||
--td-shadow-3: 0 16px 24px rgba(0, 0, 0, 14%), 0 6px 30px rgba(0, 0, 0, 12%), 0 8px 10px rgba(0, 0, 0, 20%);
|
||||
// 内投影 用于弹窗类组件（气泡确认框 / 全局提示 / 消息通知）的内描边
|
||||
|
||||
--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;
|
||||
|
||||
// table 特定阴影
|
||||
--td-table-shadow-color: rgba(0, 0, 0, 55%);
|
||||
|
||||
// 滚动条颜色
|
||||
--td-scrollbar-color: rgba(255, 255, 255, 10%);
|
||||
// 滚动条轨道颜色，不能是带透明度，否则纵向滚动时，横向滚动条会穿透
|
||||
--td-scroll-track-color: #333;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/* ./raw/_radius.less */
|
||||
page,
|
||||
.page {
|
||||
// 圆角
|
||||
--td-radius-small: 12px;
|
||||
--td-radius-default: 24px;
|
||||
--td-radius-large: 36px;
|
||||
--td-radius-extraLarge: 48px;
|
||||
--td-radius-round: 999px;
|
||||
--td-radius-circle: 50%;
|
||||
}
|
||||
|
||||
|
||||
/* ./raw/_font.less */
|
||||
page,
|
||||
.page {
|
||||
// 字体family token
|
||||
--td-font-family: PingFang SC, Microsoft YaHei, Arial Regular; // 字体-磅数-常规
|
||||
--td-font-family-medium: PingFang SC, Microsoft YaHei, Arial Medium; // 字体-磅数-粗体
|
||||
|
||||
--td-font-size-link-small: 48px;
|
||||
--td-font-size-link-medium: 56px;
|
||||
--td-font-size-link-large: 64px;
|
||||
--td-font-size-mark-extraSmall: 40px;
|
||||
--td-font-size-mark-small: 48px;
|
||||
--td-font-size-mark-medium: 56px;
|
||||
--td-font-size-mark-large: 64px;
|
||||
--td-font-size-body-extraSmall: 40px;
|
||||
--td-font-size-body-small: 48px;
|
||||
--td-font-size-body-medium: 56px;
|
||||
--td-font-size-body-large: 64px;
|
||||
--td-font-size-title-small: 56px;
|
||||
--td-font-size-title-medium: 64px;
|
||||
--td-font-size-title-large: 72px;
|
||||
--td-font-size-title-extraLarge: 80px;
|
||||
--td-font-size-headline-small: 96px;
|
||||
--td-font-size-headline-medium: 112px;
|
||||
--td-font-size-headline-large: 144px;
|
||||
--td-font-size-display-medium: 192px;
|
||||
--td-font-size-display-large: 256px;
|
||||
|
||||
// 字体行高 token
|
||||
--td-line-height-link-small: 80px;
|
||||
--td-line-height-link-medium: 88px;
|
||||
--td-line-height-link-large: 96px;
|
||||
--td-line-height-mark-extraSmall: 64px;
|
||||
--td-line-height-mark-small: 80px;
|
||||
--td-line-height-mark-medium: 88px;
|
||||
--td-line-height-mark-large: 96px;
|
||||
--td-line-height-body-extraSmall: 64px;
|
||||
--td-line-height-body-small: 80px;
|
||||
--td-line-height-body-medium: 88px;
|
||||
--td-line-height-body-large: 96px;
|
||||
--td-line-height-title-small: 88px;
|
||||
--td-line-height-title-medium: 96px;
|
||||
--td-line-height-title-large: 104px;
|
||||
--td-line-height-title-extraLarge: 112px;
|
||||
--td-line-height-headline-small: 128px;
|
||||
--td-line-height-headline-medium: 144px;
|
||||
--td-line-height-headline-large: 176px;
|
||||
--td-line-height-display-medium: 224px;
|
||||
--td-line-height-display-large: 288px;
|
||||
|
||||
// font token
|
||||
--td-font-link-small: var(--td-font-size-link-small) / var(--td-line-height-link-small) var(--td-font-family);
|
||||
--td-font-link-medium: var(--td-font-size-link-medium) / var(--td-line-height-link-medium) var(--td-font-family);
|
||||
--td-font-link-large: var(--td-font-size-link-large) / var(--td-line-height-link-large) var(--td-font-family);
|
||||
--td-font-mark-extraSmall: 600 var(--td-font-size-mark-extraSmall) / var(--td-line-height-mark-extraSmall)
|
||||
var(--td-font-family);
|
||||
--td-font-mark-small: 600 var(--td-font-size-mark-small) / var(--td-line-height-mark-small) var(--td-font-family);
|
||||
--td-font-mark-medium: 600 var(--td-font-size-mark-medium) / var(--td-line-height-mark-medium) var(--td-font-family);
|
||||
--td-font-mark-large: 600 var(--td-font-size-mark-large) / var(--td-line-height-mark-large) var(--td-font-family);
|
||||
--td-font-body-extraSmall: var(--td-font-size-body-extraSmall) / var(--td-line-height-body-extraSmall)
|
||||
var(--td-font-family);
|
||||
--td-font-body-small: var(--td-font-size-body-small) / var(--td-line-height-body-small) var(--td-font-family);
|
||||
--td-font-body-medium: var(--td-font-size-body-medium) / var(--td-line-height-body-medium) var(--td-font-family);
|
||||
--td-font-body-large: var(--td-font-size-body-large) / var(--td-line-height-body-large) var(--td-font-family);
|
||||
--td-font-title-small: 600 var(--td-font-size-title-small) / var(--td-line-height-title-small) var(--td-font-family);
|
||||
--td-font-title-medium: 600 var(--td-font-size-title-medium) / var(--td-line-height-title-medium)
|
||||
var(--td-font-family);
|
||||
--td-font-title-large: 600 var(--td-font-size-title-large) / var(--td-line-height-title-large) var(--td-font-family);
|
||||
--td-font-title-extraLarge: 600 var(--td-font-size-title-extraLarge) / var(--td-line-height-title-extraLarge)
|
||||
var(--td-font-family);
|
||||
--td-font-headline-small: 600 var(--td-font-size-headline-small) / var(--td-line-height-headline-small)
|
||||
var(--td-font-family);
|
||||
--td-font-headline-medium: 600 var(--td-font-size-headline-medium) / var(--td-line-height-headline-medium)
|
||||
var(--td-font-family);
|
||||
--td-font-headline-large: 600 var(--td-font-size-headline-large) / var(--td-line-height-headline-large)
|
||||
var(--td-font-family);
|
||||
--td-font-display-medium: 600 var(--td-font-size-display-medium) / var(--td-line-height-display-medium)
|
||||
var(--td-font-family);
|
||||
--td-font-display-large: 600 var(--td-font-size-display-large) / var(--td-line-height-display-large)
|
||||
var(--td-font-family);
|
||||
|
||||
// 字体大小 token
|
||||
--td-font-size: 40px;
|
||||
--td-font-size-xs: var(--td-font-size-body-extraSmall);
|
||||
--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-extraLarge);
|
||||
--td-font-size-xxl: var(--td-font-size-headline-large);
|
||||
}
|
||||
|
||||
|
||||
/* ./raw/_spacer.less */
|
||||
page,
|
||||
.page {
|
||||
// Spacer
|
||||
--td-spacer: 32px;
|
||||
--td-spacer-1: 48px; // 间距-小-x
|
||||
--td-spacer-2: 64px; // 间距-小
|
||||
--td-spacer-3: 96px; // 间距-中
|
||||
--td-spacer-4: 128px; // 间距-大
|
||||
--td-spacer-5: 192px; // 间距-大-x
|
||||
--td-spacer-6: 320px; // 间距-大-xx
|
||||
}
|
||||
|
||||
|
||||
/* ./raw/_components.less */
|
||||
// 部分特殊处理的组件级 token
|
||||
@media (prefers-color-scheme: light) {
|
||||
page,
|
||||
.page {
|
||||
--td-picker-transparent-color: rgba(255, 255, 255, 0);
|
||||
|
||||
--td-switch-dot-disabled-color: var(--td-font-white-1);
|
||||
--td-switch-loading-color: var(--td-brand-color);
|
||||
}
|
||||
}
|
||||
|
||||
@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, 6%);
|
||||
|
||||
--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;
|
||||
|
||||
--td-switch-dot-disabled-color: var(--td-font-white-2);
|
||||
--td-switch-loading-color: var(--td-font-white-1);
|
||||
|
||||
--td-progress-circle-inner-bg-color: var(--bg-color-page);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -0,0 +1,11 @@
|
||||
@import './raw/_light.less';
|
||||
|
||||
@import './raw/_dark.less';
|
||||
|
||||
@import './raw/_radius.less';
|
||||
|
||||
@import './raw/_font.less';
|
||||
|
||||
@import './raw/_spacer.less';
|
||||
|
||||
@import './raw/_components.less';
|
||||
@@ -0,0 +1,30 @@
|
||||
// 部分特殊处理的组件级 token
|
||||
@media (prefers-color-scheme: light) {
|
||||
page,
|
||||
.page {
|
||||
--td-picker-transparent-color: rgba(255, 255, 255, 0);
|
||||
|
||||
--td-switch-dot-disabled-color: var(--td-font-white-1);
|
||||
--td-switch-loading-color: var(--td-brand-color);
|
||||
}
|
||||
}
|
||||
|
||||
@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, 6%);
|
||||
|
||||
--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;
|
||||
|
||||
--td-switch-dot-disabled-color: var(--td-font-white-2);
|
||||
--td-switch-loading-color: var(--td-font-white-1);
|
||||
|
||||
--td-progress-circle-inner-bg-color: var(--bg-color-page);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,178 @@
|
||||
@media (prefers-color-scheme: dark) {
|
||||
/* #ifdef H5 */
|
||||
:root,
|
||||
/* #endif */
|
||||
page,
|
||||
.page {
|
||||
--td-brand-color-1: #1b2f51;
|
||||
--td-brand-color-2: #173463;
|
||||
--td-brand-color-3: #143975;
|
||||
--td-brand-color-4: #103d88;
|
||||
--td-brand-color-5: #0d429a;
|
||||
--td-brand-color-6: #054bbe;
|
||||
--td-brand-color-7: #2667d4;
|
||||
--td-brand-color-8: #4582e6;
|
||||
--td-brand-color-9: #699ef5;
|
||||
--td-brand-color-10: #96bbf8;
|
||||
|
||||
--td-primary-color-1: var(--td-brand-color-1);
|
||||
--td-primary-color-2: var(--td-brand-color-2);
|
||||
--td-primary-color-3: var(--td-brand-color-3);
|
||||
--td-primary-color-4: var(--td-brand-color-4);
|
||||
--td-primary-color-5: var(--td-brand-color-5);
|
||||
--td-primary-color-6: var(--td-brand-color-6);
|
||||
--td-primary-color-7: var(--td-brand-color-7);
|
||||
--td-primary-color-8: var(--td-brand-color-8);
|
||||
--td-primary-color-9: var(--td-brand-color-9);
|
||||
--td-primary-color-10: var(--td-brand-color-10);
|
||||
|
||||
--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, 90%);
|
||||
--td-font-white-2: rgba(255, 255, 255, 55%);
|
||||
--td-font-white-3: rgba(255, 255, 255, 35%);
|
||||
--td-font-white-4: rgba(255, 255, 255, 22%);
|
||||
--td-font-gray-1: rgba(0, 0, 0, 90%);
|
||||
--td-font-gray-2: rgba(0, 0, 0, 60%);
|
||||
--td-font-gray-3: rgba(0, 0, 0, 40%);
|
||||
--td-font-gray-4: rgba(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); // focus态，包括鼠标和键盘
|
||||
--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, 40%); // 遮罩-弹出
|
||||
--td-mask-disabled: rgba(0, 0, 0, 60%); // 遮罩-禁用
|
||||
--td-mask-background: rgba(36, 36, 36, 96%); // 二维码遮罩
|
||||
|
||||
// 背景色
|
||||
--td-bg-color-page: var(--td-gray-color-14); // 色彩 - page
|
||||
--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); // 色彩 - 容器 - active
|
||||
--td-bg-color-secondarycontainer-active: var(--td-gray-color-11); // 色彩 - 次级容器 - active
|
||||
--td-bg-color-component-active: var(--td-gray-color-10); // 色彩 - 组件 - active
|
||||
--td-bg-color-component-disabled: var(--td-gray-color-12); // 色彩 - 组件 - disabled
|
||||
--td-bg-color-secondarycomponent: var(--td-gray-color-10); // 色彩 - 次级组件
|
||||
--td-bg-color-secondarycomponent-active: var(--td-gray-color-8); // 色彩 - 次级组件 - active
|
||||
|
||||
// 特殊组件背景色，目前只用于 button、input 组件多主题场景，浅色主题下固定为白色，深色主题下为 transparent 适配背景颜色
|
||||
--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);
|
||||
|
||||
// 基础/下层 投影 hover 使用的组件包括：表格 /
|
||||
--td-shadow-1: 0 4px 6px rgba(0, 0, 0, 6%), 0 1px 10px rgba(0, 0, 0, 8%), 0 2px 4px rgba(0, 0, 0, 12%);
|
||||
// 中层投影 下拉 使用的组件包括：下拉菜单 / 气泡确认框 / 选择器 /
|
||||
--td-shadow-2: 0 8px 10px rgba(0, 0, 0, 12%), 0 3px 14px rgba(0, 0, 0, 10%), 0 5px 5px rgba(0, 0, 0, 16%);
|
||||
// 上层投影（警示/弹窗）使用的组件包括：全局提示 / 消息通知
|
||||
--td-shadow-3: 0 16px 24px rgba(0, 0, 0, 14%), 0 6px 30px rgba(0, 0, 0, 12%), 0 8px 10px rgba(0, 0, 0, 20%);
|
||||
// 内投影 用于弹窗类组件（气泡确认框 / 全局提示 / 消息通知）的内描边
|
||||
|
||||
--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;
|
||||
|
||||
// table 特定阴影
|
||||
--td-table-shadow-color: rgba(0, 0, 0, 55%);
|
||||
|
||||
// 滚动条颜色
|
||||
--td-scrollbar-color: rgba(255, 255, 255, 10%);
|
||||
// 滚动条轨道颜色，不能是带透明度，否则纵向滚动时，横向滚动条会穿透
|
||||
--td-scroll-track-color: #333;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,90 @@
|
||||
page,
|
||||
.page {
|
||||
// 字体family token
|
||||
--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-extraSmall: 20rpx;
|
||||
--td-font-size-mark-small: 24rpx;
|
||||
--td-font-size-mark-medium: 28rpx;
|
||||
--td-font-size-mark-large: 32rpx;
|
||||
--td-font-size-body-extraSmall: 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-extraLarge: 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;
|
||||
|
||||
// 字体行高 token
|
||||
--td-line-height-link-small: 40rpx;
|
||||
--td-line-height-link-medium: 44rpx;
|
||||
--td-line-height-link-large: 48rpx;
|
||||
--td-line-height-mark-extraSmall: 32rpx;
|
||||
--td-line-height-mark-small: 40rpx;
|
||||
--td-line-height-mark-medium: 44rpx;
|
||||
--td-line-height-mark-large: 48rpx;
|
||||
--td-line-height-body-extraSmall: 32rpx;
|
||||
--td-line-height-body-small: 40rpx;
|
||||
--td-line-height-body-medium: 44rpx;
|
||||
--td-line-height-body-large: 48rpx;
|
||||
--td-line-height-title-small: 44rpx;
|
||||
--td-line-height-title-medium: 48rpx;
|
||||
--td-line-height-title-large: 52rpx;
|
||||
--td-line-height-title-extraLarge: 56rpx;
|
||||
--td-line-height-headline-small: 64rpx;
|
||||
--td-line-height-headline-medium: 72rpx;
|
||||
--td-line-height-headline-large: 88rpx;
|
||||
--td-line-height-display-medium: 112rpx;
|
||||
--td-line-height-display-large: 144rpx;
|
||||
|
||||
// font token
|
||||
--td-font-link-small: var(--td-font-size-link-small) / var(--td-line-height-link-small) var(--td-font-family);
|
||||
--td-font-link-medium: var(--td-font-size-link-medium) / var(--td-line-height-link-medium) var(--td-font-family);
|
||||
--td-font-link-large: var(--td-font-size-link-large) / var(--td-line-height-link-large) var(--td-font-family);
|
||||
--td-font-mark-extraSmall: 600 var(--td-font-size-mark-extraSmall) / var(--td-line-height-mark-extraSmall)
|
||||
var(--td-font-family);
|
||||
--td-font-mark-small: 600 var(--td-font-size-mark-small) / var(--td-line-height-mark-small) var(--td-font-family);
|
||||
--td-font-mark-medium: 600 var(--td-font-size-mark-medium) / var(--td-line-height-mark-medium) var(--td-font-family);
|
||||
--td-font-mark-large: 600 var(--td-font-size-mark-large) / var(--td-line-height-mark-large) var(--td-font-family);
|
||||
--td-font-body-extraSmall: var(--td-font-size-body-extraSmall) / var(--td-line-height-body-extraSmall)
|
||||
var(--td-font-family);
|
||||
--td-font-body-small: var(--td-font-size-body-small) / var(--td-line-height-body-small) var(--td-font-family);
|
||||
--td-font-body-medium: var(--td-font-size-body-medium) / var(--td-line-height-body-medium) var(--td-font-family);
|
||||
--td-font-body-large: var(--td-font-size-body-large) / var(--td-line-height-body-large) var(--td-font-family);
|
||||
--td-font-title-small: 600 var(--td-font-size-title-small) / var(--td-line-height-title-small) var(--td-font-family);
|
||||
--td-font-title-medium: 600 var(--td-font-size-title-medium) / var(--td-line-height-title-medium)
|
||||
var(--td-font-family);
|
||||
--td-font-title-large: 600 var(--td-font-size-title-large) / var(--td-line-height-title-large) var(--td-font-family);
|
||||
--td-font-title-extraLarge: 600 var(--td-font-size-title-extraLarge) / var(--td-line-height-title-extraLarge)
|
||||
var(--td-font-family);
|
||||
--td-font-headline-small: 600 var(--td-font-size-headline-small) / var(--td-line-height-headline-small)
|
||||
var(--td-font-family);
|
||||
--td-font-headline-medium: 600 var(--td-font-size-headline-medium) / var(--td-line-height-headline-medium)
|
||||
var(--td-font-family);
|
||||
--td-font-headline-large: 600 var(--td-font-size-headline-large) / var(--td-line-height-headline-large)
|
||||
var(--td-font-family);
|
||||
--td-font-display-medium: 600 var(--td-font-size-display-medium) / var(--td-line-height-display-medium)
|
||||
var(--td-font-family);
|
||||
--td-font-display-large: 600 var(--td-font-size-display-large) / var(--td-line-height-display-large)
|
||||
var(--td-font-family);
|
||||
|
||||
// 字体大小 token
|
||||
--td-font-size: 20rpx;
|
||||
--td-font-size-xs: var(--td-font-size-body-extraSmall);
|
||||
--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-extraLarge);
|
||||
--td-font-size-xxl: var(--td-font-size-headline-large);
|
||||
}
|
||||
@@ -0,0 +1,182 @@
|
||||
@media (prefers-color-scheme: light) {
|
||||
/* #ifdef H5 */
|
||||
:root,
|
||||
/* #endif */
|
||||
page,
|
||||
.page {
|
||||
--td-brand-color-1: #f2f3ff;
|
||||
--td-brand-color-2: #d9e1ff;
|
||||
--td-brand-color-3: #b5c7ff;
|
||||
--td-brand-color-4: #8eabff;
|
||||
--td-brand-color-5: #618dff;
|
||||
--td-brand-color-6: #366ef4;
|
||||
--td-brand-color-7: #0052d9;
|
||||
--td-brand-color-8: #003cab;
|
||||
--td-brand-color-9: #002a7c;
|
||||
--td-brand-color-10: #001a57;
|
||||
|
||||
--td-primary-color-1: var(--td-brand-color-1);
|
||||
--td-primary-color-2: var(--td-brand-color-2);
|
||||
--td-primary-color-3: var(--td-brand-color-3);
|
||||
--td-primary-color-4: var(--td-brand-color-4);
|
||||
--td-primary-color-5: var(--td-brand-color-5);
|
||||
--td-primary-color-6: var(--td-brand-color-6);
|
||||
--td-primary-color-7: var(--td-brand-color-7);
|
||||
--td-primary-color-8: var(--td-brand-color-8);
|
||||
--td-primary-color-9: var(--td-brand-color-9);
|
||||
--td-primary-color-10: var(--td-brand-color-10);
|
||||
|
||||
--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: rgba(255, 255, 255, 1);
|
||||
--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, 60%); // 遮罩-弹出
|
||||
--td-mask-disabled: rgba(255, 255, 255, 60%); // 遮罩-禁用
|
||||
--td-mask-background: rgba(255, 255, 255, 96%); // 二维码遮罩
|
||||
|
||||
// 背景色
|
||||
--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);
|
||||
|
||||
// 特殊组件背景色，目前只用于 button、input 组件多主题场景，浅色主题下固定为白色，深色主题下为 transparent 适配背景颜色
|
||||
--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);
|
||||
|
||||
// 基础/下层 投影 hover 使用的组件包括：表格 /
|
||||
--td-shadow-1: 0 1px 10px rgba(0, 0, 0, 5%), 0 4px 5px rgba(0, 0, 0, 8%), 0 2px 4px -1px rgba(0, 0, 0, 12%);
|
||||
// 中层投影 下拉 使用的组件包括：下拉菜单 / 气泡确认框 / 选择器 /
|
||||
--td-shadow-2: 0 3px 14px 2px rgba(0, 0, 0, 5%), 0 8px 10px 1px rgba(0, 0, 0, 6%), 0 5px 5px -3px rgba(0, 0, 0, 10%);
|
||||
// 上层投影（警示/弹窗）使用的组件包括：全局提示 / 消息通知
|
||||
--td-shadow-3: 0 6px 30px 5px rgba(0, 0, 0, 5%), 0 16px 24px 2px rgba(0, 0, 0, 4%),
|
||||
0 8px 10px -5px rgba(0, 0, 0, 8%);
|
||||
--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;
|
||||
|
||||
// table 特定阴影
|
||||
--td-table-shadow-color: rgba(0, 0, 0, 8%);
|
||||
|
||||
// 滚动条颜色
|
||||
--td-scrollbar-color: rgba(0, 0, 0, 10%);
|
||||
// 滚动条悬浮颜色（ hover ）
|
||||
--td-scrollbar-hover-color: rgba(0, 0, 0, 30%);
|
||||
// 滚动条轨道颜色，不能是带透明度，否则纵向滚动时，横向滚动条会穿透
|
||||
--td-scroll-track-color: #fff;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,10 @@
|
||||
page,
|
||||
.page {
|
||||
// 圆角
|
||||
--td-radius-small: 6rpx;
|
||||
--td-radius-default: 12rpx;
|
||||
--td-radius-large: 18rpx;
|
||||
--td-radius-extraLarge: 24rpx;
|
||||
--td-radius-round: 999px;
|
||||
--td-radius-circle: 50%;
|
||||
}
|
||||
@@ -0,0 +1,11 @@
|
||||
page,
|
||||
.page {
|
||||
// Spacer
|
||||
--td-spacer: 16rpx;
|
||||
--td-spacer-1: 24rpx; // 间距-小-x
|
||||
--td-spacer-2: 32rpx; // 间距-小
|
||||
--td-spacer-3: 48rpx; // 间距-中
|
||||
--td-spacer-4: 64rpx; // 间距-大
|
||||
--td-spacer-5: 96rpx; // 间距-大-x
|
||||
--td-spacer-6: 160rpx; // 间距-大-xx
|
||||
}
|
||||
@@ -0,0 +1,13 @@
|
||||
.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);
|
||||
}
|
||||
358
uni_modules/tdesign-uniapp/components/common/utils.js
Normal file
358
uni_modules/tdesign-uniapp/components/common/utils.js
Normal file
@@ -0,0 +1,358 @@
|
||||
import { prefix } from './config';
|
||||
import { isString, isNumeric, isDef, isBoolean, isObject } from './validator';
|
||||
import { getWindowInfo, getAppBaseInfo, getDeviceInfo } from './wechat';
|
||||
|
||||
export { getWindowInfo };
|
||||
|
||||
export const systemInfo = getWindowInfo();
|
||||
|
||||
export const appBaseInfo = getAppBaseInfo();
|
||||
|
||||
export const deviceInfo = getDeviceInfo();
|
||||
|
||||
|
||||
/**
|
||||
* 多参数空值合并函数
|
||||
* @param {...any} args - 任意数量的参数
|
||||
* @returns {any} 第一个非null/undefined的参数值
|
||||
*/
|
||||
export function coalesce(...args) {
|
||||
// 遍历所有参数
|
||||
for (let i = 0; i < args.length; i += 1) {
|
||||
// 返回第一个非null且非undefined的值
|
||||
if (args[i] !== null && args[i] !== undefined) {
|
||||
return args[i];
|
||||
}
|
||||
}
|
||||
// 如果所有参数都是null/undefined，返回最后一个参数
|
||||
return args[args.length - 1];
|
||||
}
|
||||
|
||||
|
||||
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) => {
|
||||
// for (let i = 0; i < args.length; i++) {
|
||||
// eslint-disable-next-line
|
||||
// const arg = args[i]
|
||||
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') {
|
||||
// eslint-disable-next-line
|
||||
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 uni
|
||||
.createSelectorQuery()
|
||||
.in(context)
|
||||
.selectViewport()
|
||||
.boundingClientRect()
|
||||
.exec(() => {
|
||||
cb();
|
||||
});
|
||||
};
|
||||
|
||||
export const getRect = function (context, selector, needAll = false, useH5Origin = false) {
|
||||
let result;
|
||||
// #ifdef H5
|
||||
if (useH5Origin) {
|
||||
result = document[needAll ? 'querySelectorAll' : 'querySelector'](selector)?.getBoundingClientRect();
|
||||
}
|
||||
// #endif
|
||||
if (result) {
|
||||
return result;
|
||||
}
|
||||
|
||||
return new Promise((resolve, reject) => {
|
||||
uni
|
||||
.createSelectorQuery()
|
||||
.in(context)
|
||||
// eslint-disable-next-line no-unexpected-multiline
|
||||
[needAll ? 'selectAll' : 'select'](selector)
|
||||
.boundingClientRect((rect) => {
|
||||
if (rect) {
|
||||
resolve(rect);
|
||||
} else {
|
||||
reject(rect);
|
||||
}
|
||||
})
|
||||
.exec();
|
||||
});
|
||||
};
|
||||
|
||||
|
||||
export const getTreeDepth = (tree, key) => tree.reduce((maxDepth, node) => {
|
||||
const keyName = coalesce(key, 'children');
|
||||
if (node[keyName] && node[keyName].length > 0) {
|
||||
return Math.max(maxDepth, getTreeDepth(node[keyName], key) + 1);
|
||||
}
|
||||
return Math.max(maxDepth, 1);
|
||||
}, 0);
|
||||
|
||||
export const isIOS = function () {
|
||||
return !!(deviceInfo?.system?.toLowerCase().search('ios') + 1);
|
||||
};
|
||||
|
||||
/**
|
||||
* 判断是否是为企微环境
|
||||
* 企微环境 wx.getSystemInfoSync() 接口会额外返回 environment 字段（微信中不返回）
|
||||
* https://developer.work.weixin.qq.com/document/path/91511
|
||||
*/
|
||||
export const isWxWork = deviceInfo?.environment === 'wxwork';
|
||||
|
||||
export const isPC = ['mac', 'windows'].includes(deviceInfo?.platform);
|
||||
|
||||
export const addUnit = function (value) {
|
||||
if (!isDef(value)) {
|
||||
return undefined;
|
||||
}
|
||||
value = String(value);
|
||||
return isNumeric(value) ? `${value}px` : value;
|
||||
};
|
||||
|
||||
/**
|
||||
* 计算字符串字符的长度并可以截取字符串。
|
||||
* @param char 传入字符串（maxcharacter条件下，一个汉字表示两个字符）
|
||||
* @param max 规定最大字符串长度
|
||||
* @returns 当没有传入maxCharacter/maxLength 时返回字符串字符长度，当传入maxCharacter/maxLength时返回截取之后的字符串和长度。
|
||||
*/
|
||||
export const getCharacterLength = (type, char, max) => {
|
||||
const str = String(coalesce(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,
|
||||
};
|
||||
}
|
||||
|
||||
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));
|
||||
|
||||
|
||||
const getPageContext = () => {
|
||||
const pages = getCurrentPages();
|
||||
const page = pages[pages.length - 1];
|
||||
return (page).$$basePage || page;
|
||||
};
|
||||
|
||||
|
||||
const findInstance = (context, pageContext, pureSelector) => {
|
||||
if (context && context.$refs[pureSelector]) {
|
||||
return context.$refs[pureSelector];
|
||||
}
|
||||
if (pageContext && pageContext.$refs[pureSelector]) {
|
||||
return pageContext.$refs[pureSelector];
|
||||
}
|
||||
return null;
|
||||
};
|
||||
|
||||
export const getInstance = function (context, selector) {
|
||||
const pageContext = getPageContext();
|
||||
const pureSelector = /^[.#]/.test(selector) ? selector.slice(1) : selector;
|
||||
const instance = findInstance(context, pageContext, pureSelector);
|
||||
|
||||
if (!instance) {
|
||||
console.warn('未找到组件,请检查 selector 是否正确');
|
||||
return null;
|
||||
}
|
||||
return instance;
|
||||
};
|
||||
|
||||
export const unitConvert = (value) => {
|
||||
if (typeof value === 'string') {
|
||||
if (value.includes('rpx')) {
|
||||
return (parseInt(value, 10) * (coalesce(systemInfo?.screenWidth, 750))) / 750;
|
||||
}
|
||||
return parseInt(value, 10);
|
||||
}
|
||||
return coalesce(value, 0);
|
||||
};
|
||||
|
||||
export const setIcon = (iconName, icon, defaultIcon) => {
|
||||
if (icon) {
|
||||
if (typeof icon === 'string') {
|
||||
return {
|
||||
[`${iconName}Name`]: icon,
|
||||
[`${iconName}Data`]: {},
|
||||
};
|
||||
}
|
||||
if (typeof icon === 'object') {
|
||||
return {
|
||||
[`${iconName}Name`]: '',
|
||||
[`${iconName}Data`]: icon,
|
||||
};
|
||||
}
|
||||
return {
|
||||
[`${iconName}Name`]: defaultIcon,
|
||||
[`${iconName}Data`]: {},
|
||||
};
|
||||
}
|
||||
return {
|
||||
[`${iconName}Name`]: '',
|
||||
[`${iconName}Data`]: {},
|
||||
};
|
||||
};
|
||||
|
||||
export const toCamel = str => str.replace(/-(\w)/g, (match, m1) => m1.toUpperCase());
|
||||
export const toPascal = name => name
|
||||
.split('-')
|
||||
.map(part => part.charAt(0).toUpperCase() + part.slice(1))
|
||||
.join('');
|
||||
|
||||
export function hyphenate(str) {
|
||||
const hyphenateRE = /\B([A-Z])/g;
|
||||
return str.replace(hyphenateRE, '-$1').toLowerCase();
|
||||
}
|
||||
export const getCurrentPage = function () {
|
||||
const pages = getCurrentPages();
|
||||
return pages[pages.length - 1];
|
||||
};
|
||||
|
||||
export const uniqueFactory = (compName) => {
|
||||
let number = 0;
|
||||
return () => {
|
||||
const uniqueId = `${prefix}_${compName}_${number}`;
|
||||
number += 1;
|
||||
return uniqueId;
|
||||
};
|
||||
};
|
||||
|
||||
export const calcIcon = (icon, defaultIcon) => {
|
||||
if (icon && ((isBoolean(icon) && defaultIcon) || isString(icon))) {
|
||||
return { name: isBoolean(icon) ? defaultIcon : icon };
|
||||
}
|
||||
if (isObject(icon)) {
|
||||
return icon;
|
||||
}
|
||||
return null;
|
||||
};
|
||||
|
||||
export const isOverSize = (size, sizeLimit) => {
|
||||
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?.size * unitMap[coalesce(sizeLimit?.unit, 'KB')]; // 单位 KB
|
||||
|
||||
return size > computedSize;
|
||||
};
|
||||
|
||||
export const rpx2px = rpx => Math.floor((systemInfo.windowWidth * rpx) / 750);
|
||||
|
||||
export const nextTick = () => new Promise((resolve) => {
|
||||
setTimeout(() => {
|
||||
resolve();
|
||||
}, 33);
|
||||
});
|
||||
|
||||
139
uni_modules/tdesign-uniapp/components/common/utils.wxs.js
Normal file
139
uni_modules/tdesign-uniapp/components/common/utils.wxs.js
Normal file
@@ -0,0 +1,139 @@
|
||||
import { getRegExp } from './runtime/wxs-polyfill';
|
||||
/* utils */
|
||||
|
||||
/**
|
||||
* addUnit */
|
||||
// 为 css 添加单位
|
||||
function addUnit(value) {
|
||||
const REGEXP = getRegExp('^-?\\d+(.\\d+)?$');
|
||||
if (value == null) {
|
||||
return undefined;
|
||||
}
|
||||
return REGEXP.test(`${value}`) ? `${value}px` : value;
|
||||
}
|
||||
|
||||
function isString(string) {
|
||||
return typeof string === 'string';
|
||||
}
|
||||
|
||||
function isArray(array) {
|
||||
return Array.isArray(array);
|
||||
}
|
||||
|
||||
function isObject(x) {
|
||||
const type = typeof x;
|
||||
return x !== null && (type === 'object' || type === 'function');
|
||||
}
|
||||
|
||||
function isBoolean(value) {
|
||||
return typeof value === 'boolean';
|
||||
}
|
||||
|
||||
const isNoEmptyObj = function (obj) {
|
||||
return isObject(obj) && JSON.stringify(obj) !== '{}';
|
||||
};
|
||||
|
||||
function includes(arr, value) {
|
||||
if (!arr || !isArray(arr)) return false;
|
||||
|
||||
let i = 0;
|
||||
const len = arr.length;
|
||||
|
||||
for (; i < len; i++) {
|
||||
if (arr[i] === value) return true;
|
||||
}
|
||||
return false;
|
||||
}
|
||||
|
||||
function cls(base, arr) {
|
||||
const res = [base];
|
||||
let i = 0;
|
||||
for (let size = arr.length; i < size; i++) {
|
||||
const item = arr[i];
|
||||
|
||||
if (item && Array.isArray(item)) {
|
||||
const key = arr[i][0];
|
||||
const 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) {
|
||||
const maxCount = options.maxCount || 99;
|
||||
if (options.dot) {
|
||||
return '有新的消息';
|
||||
}
|
||||
if (options.count === '...') {
|
||||
return '有很多消息';
|
||||
}
|
||||
if (isNaN(options.count)) {
|
||||
return options.count;
|
||||
}
|
||||
const str1 = `有${maxCount}+条消息`;
|
||||
const 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(item => item.split(':')[0]);
|
||||
}
|
||||
|
||||
function kebabCase(str) {
|
||||
return str
|
||||
.replace(getRegExp('[A-Z]', 'g'), ele => `-${ele}`)
|
||||
.toLowerCase();
|
||||
}
|
||||
|
||||
// eslint-disable-next-line no-underscore-dangle
|
||||
function _style(styles) {
|
||||
if (isArray(styles)) {
|
||||
return styles
|
||||
.filter(item => item != null && item !== '')
|
||||
.map(item => ((isArray(item) || isObject(item)) ? _style(item) : endsWith(item, ';')))
|
||||
.join(' ');
|
||||
}
|
||||
|
||||
if (isObject(styles)) {
|
||||
return keys(styles)
|
||||
.filter(key => styles[key] != null && styles[key] !== '')
|
||||
.map(key => [kebabCase(key), [styles[key]]].join(':'))
|
||||
.join(';');
|
||||
}
|
||||
|
||||
return styles;
|
||||
}
|
||||
|
||||
function isValidIconName(str) {
|
||||
// prettier-ignore
|
||||
return getRegExp('^[A-Za-z0-9-_]+$').test(str);
|
||||
}
|
||||
|
||||
export default {
|
||||
addUnit,
|
||||
isString,
|
||||
isArray,
|
||||
isObject,
|
||||
isBoolean,
|
||||
isNoEmptyObj,
|
||||
includes,
|
||||
cls,
|
||||
getBadgeAriaLabel,
|
||||
_style,
|
||||
isValidIconName,
|
||||
};
|
||||
38
uni_modules/tdesign-uniapp/components/common/validator.js
Normal file
38
uni_modules/tdesign-uniapp/components/common/validator.js
Normal file
@@ -0,0 +1,38 @@
|
||||
export function isFunction(val) {
|
||||
return typeof val === 'function';
|
||||
}
|
||||
|
||||
export const isString = val => typeof val === 'string';
|
||||
|
||||
export const isNull = value => value === null;
|
||||
|
||||
export const isUndefined = value => value === undefined;
|
||||
|
||||
export function isDef(value) {
|
||||
return !isUndefined(value) && !isNull(value);
|
||||
}
|
||||
|
||||
export function isInteger(value) {
|
||||
return Number.isInteger(value);
|
||||
}
|
||||
|
||||
export function isNumeric(value) {
|
||||
return !Number.isNaN(Number(value));
|
||||
}
|
||||
|
||||
export function isNumber(value) {
|
||||
return typeof value === 'number';
|
||||
}
|
||||
|
||||
export function isBoolean(value) {
|
||||
return typeof value === 'boolean';
|
||||
}
|
||||
|
||||
export function isObject(x) {
|
||||
const type = typeof x;
|
||||
return x !== null && (type === 'object' || type === 'function');
|
||||
}
|
||||
|
||||
export function isPlainObject(val) {
|
||||
return val !== null && typeof val === 'object' && Object.prototype.toString.call(val) === '[object Object]';
|
||||
}
|
||||
66
uni_modules/tdesign-uniapp/components/common/version.js
Normal file
66
uni_modules/tdesign-uniapp/components/common/version.js
Normal file
@@ -0,0 +1,66 @@
|
||||
import { getAppBaseInfo } from './wechat';
|
||||
|
||||
let systemInfo;
|
||||
|
||||
// 获取系统信息
|
||||
function getSystemInfo() {
|
||||
if (systemInfo == null) {
|
||||
systemInfo = getAppBaseInfo();
|
||||
}
|
||||
return systemInfo;
|
||||
}
|
||||
|
||||
// 版本号比较, 参考：https://developers.weixin.qq.com/miniprogram/dev/framework/compatibility.html
|
||||
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 += 1) {
|
||||
const num1 = parseInt(v1[i], 10);
|
||||
const num2 = parseInt(v2[i], 10);
|
||||
|
||||
if (num1 > num2) {
|
||||
return 1;
|
||||
}
|
||||
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() {
|
||||
let result = false;
|
||||
|
||||
// #ifdef MP-WEIXIN
|
||||
result = judgeByVersion('2.19.2');
|
||||
// #endif
|
||||
|
||||
// #ifdef H5 || APP-PLUS || MP-ALIPAY
|
||||
result = true;
|
||||
// #endif
|
||||
|
||||
return result;
|
||||
}
|
||||
|
||||
export function canUseProxyScrollView() {
|
||||
return judgeByVersion('2.19.2');
|
||||
}
|
||||
22
uni_modules/tdesign-uniapp/components/common/wechat.js
Normal file
22
uni_modules/tdesign-uniapp/components/common/wechat.js
Normal file
@@ -0,0 +1,22 @@
|
||||
export const getObserver = (context, selector) => new Promise((resolve) => {
|
||||
uni
|
||||
.createIntersectionObserver(context, {
|
||||
nativeMode: true,
|
||||
})
|
||||
.relativeToViewport()
|
||||
.observe(selector, (res) => {
|
||||
resolve(res);
|
||||
});
|
||||
});
|
||||
|
||||
/**
|
||||
* 背景：单页模式下, getWindowInfo、getAppBaseInfo、getDeviceInfo 等接口均返回 undefined。
|
||||
* 复现路径：分享到朋友圈，再打开单页模式的该页面，uni.getWindowInfo() 等接口返回 undefined
|
||||
* 代码片段：https://developers.weixin.qq.com/s/mzvZ8FmH7vVW
|
||||
*/
|
||||
|
||||
export const getWindowInfo = () => (uni.getWindowInfo ? uni.getWindowInfo() || uni.getSystemInfoSync() : uni.getSystemInfoSync());
|
||||
|
||||
export const getAppBaseInfo = () => (uni.getAppBaseInfo ? uni.getAppBaseInfo() || uni.getSystemInfoSync() : uni.getSystemInfoSync());
|
||||
|
||||
export const getDeviceInfo = () => (uni.getDeviceInfo ? uni.getDeviceInfo() || uni.getSystemInfoSync() : uni.getSystemInfoSync());
|
||||
Reference in New Issue
Block a user