kevisual/theme
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update：抽离和合并内容

Browse Source
This commit is contained in:
熊潇
2024-11-03 03:28:20 +08:00
parent 1327438f89
commit 5e67c93b63
28 changed files with 488 additions and 803 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
packages/tailwind/extends/theme.js
View File

@@ -1,11 +1,9 @@
export const extend = {
extend: {
fontFamily: {
mon: ['Montserrat', 'sans-serif'], // 定义自定义字体族
rob: ['Roboto', 'sans-serif'],
int: ['Inter', 'sans-serif'],
orb: ['Orbitron', 'sans-serif'],
din: ['DIN', 'sans-serif'],
},
fontFamily: {
mon: ['Montserrat', 'sans-serif'], // 定义自定义字体族
rob: ['Roboto', 'sans-serif'],
int: ['Inter', 'sans-serif'],
orb: ['Orbitron', 'sans-serif'],
din: ['DIN', 'sans-serif'],
},
};

5
packages/tailwind/package.json
View File

@@ -10,7 +10,10 @@
"files": [
"plugins",
"css",
"extends"
"extends",
"tailwind.config.js",
"src",
"dist"
],
"keywords": [],
"author": "abearxiong",

2
packages/theme-preview/src/App.tsx
View File

@@ -13,7 +13,7 @@ export const App = () => {
}}>
<Router>
<Routes>
<Route path='/' element={<Navigate to='/model/' />} />
<Route path='/' element={<Navigate to='/modal/' />} />
<Route path='/modal/*' element={<FlowApps />} />
<Route path='/codemirror/*' element={<CodeMirrorApp />} />
<Route path='/404' element={<div>404</div>} />

2
packages/theme-preview/src/pages/model/create-dom.ts
View File

@@ -29,7 +29,7 @@ export function createDOMElement(jsxElement: JSX.Element) {
}
const domElement = document.createElement(type);
if (!props) return domElement;
// 处理 props
Object.keys(props).forEach((prop) => {
if (prop === 'children') {

3
packages/theme-preview/src/pages/model/index.tsx
View File

@@ -78,6 +78,7 @@ const ModelTwo = () => {
const ModelTwo2 = () => {
const ref = useRef<HTMLDivElement>(null);
const showModel = () => {
console.log('refHide', refHide);
const div = createDOMElement(refHide);
const model = DialogModal.render(ref.current! || div, {
dialogTitle: 'Dialog Modal',
@@ -101,7 +102,7 @@ const ModelTwo2 = () => {
return (
<div>
<div className='w-96 p-4 rounded-md shadow-md bg-slate-200'>
model two -假入ref的模块没有真实渲染到节点，如何处理。createDOMElement
model two -假入ref的模块没有真实渲染到节点，如何处理。 createDOMElement
<div className='cursor-pointer p-2 border' onClick={showModel}>
show
</div>

17
packages/ui/package.json
View File

@@ -21,24 +21,25 @@
"keywords": [],
"author": "abearxiong",
"devDependencies": {
"@emotion/serialize": "^1.3.1",
"@emotion/serialize": "^1.3.2",
"@rollup/plugin-commonjs": "^28.0.1",
"@rollup/plugin-node-resolve": "^15.2.3",
"@rollup/plugin-node-resolve": "^15.3.0",
"@rollup/plugin-terser": "^0.4.4",
"@rollup/plugin-typescript": "^11.1.6",
"@rollup/plugin-typescript": "^12.1.1",
"@types/postcss-import": "^14.0.3",
"@types/react": "^18.3.8",
"@types/react": "^18.3.12",
"autoprefixer": "^10.4.20",
"cross-env": "^7.0.3",
"cssnano": "^7.0.6",
"immer": "^10.1.1",
"nanoid": "^5.0.7",
"nanoid": "^5.0.8",
"postcss-import": "^16.1.0",
"rollup": "^4.22.2",
"rollup": "^4.24.3",
"rollup-plugin-postcss": "^4.0.2",
"ts-lib": "^0.0.5",
"typescript": "^5.6.2",
"zustand": "5.0.0-rc.2"
"typescript": "^5.6.3",
"zustand": "5.0.1",
"@kevisual/system-ui": "^0.0.2"
},
"dependencies": {
"dayjs": "^1.11.13",

15
packages/ui/src/components/card/CardBlank.tsx Normal file
View File

@@ -0,0 +1,15 @@
type CardBlankProps = {
number?: number;
className?: string;
};
export const CardBlank = (props: CardBlankProps) => {
const { number = 4, className } = props;
const _className = 'card-blank w-[300px] flex-shrink-0' + (className ? ' ' + className : '');
return (
<>
{new Array(number).fill(0).map((_, index) => {
return <div key={index} className={_className}></div>;
})}
</>
);
};

1
packages/ui/src/components/card/index.ts Normal file
View File

@@ -0,0 +1 @@
export { CardBlank } from './CardBlank'

176
packages/ui/src/components/modal/blank-modal.ts
View File

@@ -1,176 +0,0 @@
import { Modal, ModalOpts, KV } from './modal';
import { SelectEl, querySelector, elAddCS, ElStyle, elAddCS2 } from '../../utils/query-el';
import { ObjCss } from '../../utils/css';
export class BlankModal extends Modal {
constructor(opts: ModalOpts) {
super(opts);
}
}
type DialogModalOpts = {
dialogTitle?: string;
dialogTitleClassName?: string;
dialogTitleStyle?: ElStyle;
dialogTitleEl?: HTMLElement;
dialogTitleCloseIcon?: boolean;
dialogContentClassName?: string;
dialogContentStyle?: ElStyle;
dialogFooterClassName?: string;
dialogFooterStyle?: ElStyle;
} & ModalOpts<KV, DialogDefaultStyle>;
type DialogDefaultStyle = {
defaultDialogTitleStyle?: ObjCss;
defaultDialogContentStyle?: ObjCss;
defaultDialogFooterStyle?: ObjCss;
};
export class DialogModal extends Modal<DialogModalOpts, DialogDefaultStyle> {
dialogTitle?: string;
dialogTitleClassName?: string;
dialogTitleStyle?: ElStyle;
dialogTitleEl?: HTMLElement;
dialogTitleCloseIcon?: boolean;
dialogContentClassName?: string;
dialogContentStyle?: ElStyle;
dialogFooterShow?: boolean;
dialogFooterClassName?: string;
dialogFooterStyle?: ElStyle;
constructor(opts: ModalOpts<DialogModalOpts, DialogDefaultStyle>) {
super(opts);
this.dialogTitle = opts.dialogTitle;
this.dialogTitleClassName = opts.dialogTitleClassName;
this.dialogTitleStyle = opts.dialogTitleStyle;
this.dialogTitleEl = opts.dialogTitleEl;
this.dialogTitleCloseIcon = opts.dialogTitleCloseIcon;
this.dialogContentClassName = opts.dialogContentClassName;
this.dialogContentStyle = opts.dialogContentStyle;
this.dialogFooterClassName = opts.dialogFooterClassName;
this.dialogFooterStyle = opts.dialogFooterStyle;
this.dialogFooterShow = opts.dialogFooterShow ?? false;
this.setDefaultStyle('defaultContentStyle', {
position: 'absolute',
padding: '0px',
left: '50%',
top: '20%',
width: '600px',
background: '#fff',
borderRadius: '5px',
boxShadow: '0 0 10px rgba(0,0,0,.1)',
transform: 'translate(-50%, -50%)',
maxHeight: '80vh',
overflow: 'auto',
...opts?.defaultStyle?.defaultContentStyle,
});
this.setDefaultStyle('defaultDialogTitleStyle', {
display: 'flex',
justifyContent: 'space-between',
alignItems: 'center',
position: 'sticky',
padding: '10px 20px',
top: '0',
fontSize: '16px',
background: '#fff',
marginTop: '-10px',
borderBottom: '1px solid #f0f0f0',
marginBottom: '5px',
...opts?.defaultStyle?.defaultDialogTitleStyle,
});
this.setDefaultStyle('defaultDialogContentStyle', {
padding: '20px',
...opts?.defaultStyle?.defaultDialogContentStyle,
});
this.setDefaultStyle('defaultDialogFooterStyle', {
display: 'flex',
justifyItems: 'end',
borderTop: '1px solid #f0f0f0',
padding: '10px 20px',
...opts?.defaultStyle?.defaultDialogFooterStyle,
});
}
// static render(el: string | HTMLDivElement, id: string, opts?: DialogModalOpts): DialogModal;
// static render(el: string | HTMLDivElement, opts?: DialogModalOpts): DialogModal;
// static render(...args: any[]) {
// const [el, id, opts] = args;
// return super.render(el, id, opts);
// }
appendRoot(documentFragment: DocumentFragment): void {
const cacheFragment = document.createDocumentFragment();
// 拿出来
cacheFragment.appendChild(this.Element);
const DialogBox = documentFragment.querySelector('.ui-modal-content');
DialogBox.classList.add('ui-modal-dialog');
// 创建title
const title = document.createElement('div');
title.classList.add('ui-modal-dialog-title');
elAddCS2(title, this.dialogTitleClassName, this.dialogTitleStyle, this.defaultStyle.defaultDialogTitleStyle);
if (this.dialogTitleEl) {
title.appendChild(this.dialogTitleEl);
} else {
title.innerText = this.dialogTitle;
}
if (this.dialogTitleCloseIcon) {
const closeIcon = document.createElement('span');
closeIcon.className = 'ui-modal-dialog-close';
closeIcon.innerHTML = '&times;';
closeIcon.style.cssText = `
cursor: pointer;
font-size: 24px;
margin: -5px 10px 0 0;
`;
closeIcon.onclick = (e) => {
this.setOpen(false);
};
title.appendChild(closeIcon);
}
DialogBox.appendChild(title);
// 创建content
const content = document.createElement('div');
content.className = 'ui-modal-dialog-content';
elAddCS2(content, this.dialogContentClassName, this.dialogContentStyle, this.defaultStyle.defaultDialogContentStyle);
content.appendChild(cacheFragment);
if (this.dialogFooterShow) {
const footer = document.createElement('div');
footer.className = 'ui-modal-dialog-footer';
elAddCS2(footer, this.dialogFooterClassName, this.dialogFooterStyle, this.defaultStyle.defaultDialogFooterStyle);
DialogBox.appendChild(footer);
}
DialogBox.appendChild(content);
super.appendRoot(documentFragment);
}
renderEl(el: HTMLDivElement): this {
return super.renderEl(el);
}
renderFooter(el?: SelectEl): void {
const _el = querySelector(el);
if (!_el) return;
const footer = this.Element.querySelector('.ui-modal-dialog-footer');
if (!footer) return;
footer.innerHTML = '';
footer.appendChild(_el);
}
renerContent(el?: SelectEl): void {
const _el = querySelector(el);
if (!_el) return;
const content = this.Element.querySelector('.ui-modal-dialog-content');
if (!content) return;
content.innerHTML = '';
content.appendChild(_el);
}
}

39
packages/ui/src/components/modal/event.ts
View File

@@ -1,39 +0,0 @@
import { modalStore } from './store';
// modal 事件实现
const ModalEvent = {
//
};
const onClick = (e: MouseEvent) => {
const target = e.target as HTMLElement;
if (!target) {
console.log('target is null');
return;
}
if (target.classList.contains('ui-modal-mask')) {
const modalState = modalStore.getState();
const modal = modalState.modals.find((modal) => modal.id === target.dataset.id);
if (modal && modal.open) {
modal.onMaskClose(e);
}
e.preventDefault();
return;
}
// const parentModalRoot = target.closest('.ui-modal-root');
// if (!parentModalRoot) {
// return;
// }
};
export const InitModalEvent = (el: HTMLDivElement) => {
const id = el.id;
if (ModalEvent[id] && el === ModalEvent[id]) {
return;
}
// Remove previous event listener to prevent memory leak
if (ModalEvent[id]) {
ModalEvent[id].removeEventListener('click', onClick);
}
ModalEvent[id] = null;
el.addEventListener('click', onClick);
ModalEvent[id] = el;
};

6
packages/ui/src/components/modal/index.ts
View File

@@ -1,5 +1,3 @@
export * from './modal';
import { Modal, modalStore, DialogModal, BlankModal } from '@kevisual/system-ui';
export * from './store';
export * from './blank-modal';
export { Modal, modalStore, DialogModal, BlankModal };

272
packages/ui/src/components/modal/modal.ts
View File

@@ -1,272 +0,0 @@
import { querySelector, elAddCS, ElStyle, elAddCS2 } from '../../utils/query-el';
import { generateId } from '../../utils/nanoid';
import { modalStore } from './store';
import { InitModalEvent } from './event';
import { ObjCss } from '../../utils/css';
export type KV = {
[key: string]: any;
};
export type ModalOpts<
T = {
[key: string]: any;
},
U = {
[key: string]: any;
},
> = {
root?: HTMLDivElement | string;
id?: string;
mask?: boolean;
maskClassName?: string;
maskStyle?: ElStyle;
maskClose?: boolean;
contentClassName?: string;
contentStyle?: ElStyle;
destroyOnClose?: boolean; // 关闭，把Element移动到cacheFragment中
hideOnClose?: boolean; // 关闭后是否销毁，设置display:none
open?: boolean;
onClose?: () => void;
defaultStyle?: DefaultStyle<U>;
} & T;
export type DefaultStyle<T> = {
defaultContentStyle?: ObjCss;
defaultMaskStyle?: ObjCss;
} & T;
export class Modal<T = any, U = KV> {
static rootClassName = '#ui-modal-list';
root: HTMLDivElement;
id: string;
modalElement?: HTMLDivElement;
Element?: HTMLDivElement;
mask?: boolean;
maskClassName?: string;
maskStyle?: ElStyle;
// 点击mask是否关闭
maskClose?: boolean;
contentClassName?: string;
contentStyle?: ElStyle;
destroyOnClose?: boolean;
hideOnClose?: boolean;
open?: boolean;
isUse = true;
// 通知关闭
onClose?: (e: any) => void;
cacheFragment?: DocumentFragment;
defaultStyle?: DefaultStyle<U>;
constructor(opts: ModalOpts<T, U>) {
this.root = this.initRoot(opts.root);
InitModalEvent(this.root);
this.id = opts.id || generateId();
this.mask = opts.mask ?? true;
this.maskClassName = opts.maskClassName;
this.maskStyle = opts.maskStyle;
this.maskClose = opts.maskClose ?? true;
this.contentClassName = opts.contentClassName;
this.contentStyle = opts.contentStyle;
this.destroyOnClose = opts.destroyOnClose ?? true;
this.hideOnClose = opts.hideOnClose ?? true;
if (!this.destroyOnClose && !this.hideOnClose) {
this.destroyOnClose = true; // 必须要有一个为true
console.warn('destroyOnClose Or hideOnClose must one is true');
}
this.cacheFragment = new DocumentFragment();
this.defaultStyle = opts.defaultStyle || ({} as DefaultStyle<U>);
this.open = opts.open ?? true;
this.onClose = opts.onClose;
}
protected initRoot(root: ModalOpts['root']) {
let _root = querySelector(root);
if (!_root) {
// 查询ui-modal元素,不存在则创建一个ui-modal元素并添加到body上
const queryRoot = document.querySelector('#ui-modal-list') as HTMLDivElement;
if (queryRoot) {
_root = queryRoot;
_root.classList.add('ui-modal-root');
return _root;
}
_root = document.createElement('div');
_root.id = 'ui-modal-list';
_root.classList.add('ui-modal-root');
document.body.appendChild(_root);
return _root;
}
_root.classList.add('ui-custom-modal', 'ui-modal-root');
if (!_root.id) {
_root.id = 'ui-modal' + generateId();
}
return _root;
}
static render<T extends new (...args: any[]) => any>(this: T,el: string | HTMLDivElement, id: string, opts?: ConstructorParameters<T>[0]): InstanceType<T>;
static render<T extends new (...args: any[]) => any>(this: T,el: string | HTMLDivElement, opts?: ConstructorParameters<T>[0]): InstanceType<T>;
static render(...args: any[]) {
let [el, id, opts] = args;
const _el = querySelector(el);
if (!_el) {
console.warn('el is not exist', el);
return;
}
let _id: string = '';
if (typeof id === 'string' && id) {
// 如果id是字符串
_id = id;
} else if (typeof id === 'object') {
// 如果id是对象
_id = id.id;
opts = id;
id = id.id;
}
let _modal: Modal | undefined;
const modalState = modalStore.getState();
if (_id) {
// 如果存在id,则判断是否已经存在该id的modal
_modal = modalStore.getState().getModal(_id);
}
if (!_modal) {
// 不存在modal,则创建一个modal
// console.log('create modal', id, opts);
const newModal = new this({ id, ...opts });
_modal = newModal;
modalStore.setState({
modals: [...modalState.modals, newModal],
});
}
_modal.renderEl(_el);
return _modal;
}
static create<T extends new (...args: any[]) => any>(this:T, opts: ModalOpts):InstanceType<T> {
let _id = opts.id;
let _modal: Modal | undefined;
const modalState = modalStore.getState();
if (_id) {
// 如果存在id,则判断是否已经存在该id的modal
_modal = modalStore.getState().getModal(_id);
}
if (!_modal) {
// 不存在modal,则创建一个modal
// console.log('create modal', id, opts);
const newModal = new this({ ...opts, id: _id });
_modal = newModal;
modalStore.setState({
modals: [...modalState.modals, newModal],
});
}
return _modal as InstanceType<T>;
}
createMask() {
const mask = document.createElement('div');
mask.classList.add('ui-modal-mask');
mask.dataset.id = this.id;
elAddCS2(mask, this.maskClassName, this.maskStyle, this.defaultStyle?.defaultMaskStyle);
return mask;
}
renderEl(el: HTMLDivElement) {
const defaultContentStyle = this.defaultStyle?.defaultContentStyle || {
position: 'absolute',
padding: '20px',
left: '50%',
top: '20%',
width: '600px',
background: '#fff',
borderRadius: '5px',
boxShadow: '0 0 10px rgba(0,0,0,.1)',
transform: 'translate(-50%, -50%)',
maxHeight: '80vh',
overflow: 'auto',
};
const fragment = document.createDocumentFragment();
const _modalEl = document.createElement('div');
_modalEl.classList.add('ui-modal-wrapper');
_modalEl.id = this.id;
_modalEl.dataset.mid = this.id;
if (this.mask) {
const mask = this.createMask();
_modalEl.appendChild(mask);
}
const modalContent = document.createElement('div');
modalContent.classList.add('ui-modal-content');
elAddCS2(modalContent, this.contentClassName, this.contentStyle, defaultContentStyle);
modalContent.appendChild(el);
_modalEl.appendChild(modalContent);
fragment.appendChild(_modalEl);
this.modalElement = _modalEl;
this.Element = el;
this.appendRoot(fragment);
return this;
}
appendRoot(document: DocumentFragment) {
this.root.appendChild(document);
// 第一次渲染，open为true，显示弹窗
this.setOpen(this.open);
}
setOpen(open: boolean) {
this.open = open;
if (this.destroyOnClose) {
if (open) {
this.root.appendChild(this.modalElement);
} else {
this.cacheFragment.appendChild(this.modalElement);
}
return;
}
if (this.hideOnClose) {
if (open) {
this.modalElement.classList.remove('ui-modal-close');
} else {
this.modalElement.classList.add('ui-modal-close');
}
}
}
unMount() {
// 返回渲染的的Element, 然后删除modalElement
const fragment = document.createDocumentFragment();
fragment.appendChild(this.Element);
this.modalElement?.remove();
const modalState = modalStore.getState();
modalStore.setState({
modals: modalState.modals.filter((modal) => modal.id !== this.id),
});
this.isUse = false;
this.cacheFragment = new DocumentFragment();
return fragment;
}
/**
* 保留，暂时不用
* // TODO: 研究
* @param force
* @param opts
* @returns
*/
reRender(force?: boolean, opts?: ModalOpts) {
if (force) {
this.modalElement?.remove?.();
this.modalElement = undefined;
if (!this.Element) return;
this.renderEl(this.Element);
}
}
async onMaskClose(e?: any) {
if (this.maskClose) {
this.setOpen(false);
this.onClose?.(e);
}
}
setDefaultStyle(key: keyof DefaultStyle<U>, style: ObjCss) {
this.defaultStyle[key] = style as any;
}
}
// modal.render('#abc'||document.querySelector('#abc'));
// modal.unmount();

16
packages/ui/src/components/modal/store.ts
View File

@@ -1,16 +0,0 @@
import { createStore } from '../../utils';
import { Modal } from './modal';
type ModeStore = {
modals: Modal[];
getModal: (id: string) => Modal | undefined;
};
export const modalStore = createStore<ModeStore>((set, get) => {
return {
modals: [],
getModal: (id: string) => {
return get().modals.find((model) => model.id === id) as Modal;
},
};
});

6
packages/ui/src/index.ts
View File

@@ -2,8 +2,4 @@ import { Modal, modalStore, BlankModal, DialogModal } from './components/modal';
export { Modal, modalStore, BlankModal, DialogModal };
import { createDOMElement } from './utils/dom/create-dom-element';
export { createDOMElement };
export * from './utils';
export * from './components/card';

19
packages/ui/src/utils/css.ts
View File

@@ -1,19 +0,0 @@
import { serializeStyles } from '@emotion/serialize';
export const getCssText = (obj?: ObjCss) => {
if (!obj) return '';
const serialized = serializeStyles([obj]);
return serialized.styles;
};
export const getCssTextObjs = (objs?: ObjCss[]) => {
if (!objs) return '';
const serialized = serializeStyles(objs);
return serialized.styles;
};
export type ObjCss = { [key: string]: number | string } & React.CSSProperties;
export const obj2css = (el?: HTMLDivElement, obj?: ObjCss) => {
if (!el) return;
if (!obj) return;
const serialized = serializeStyles([obj as unknown as Record<string, string>]);
el.style.cssText = serialized.styles;
};

82
packages/ui/src/utils/dom/create-dom-element.ts
View File

@@ -1,82 +0,0 @@
type JSXElement = {
type: string | symbol;
props: Record<string, any>;
key?: string | number;
};
export function createDOMElement(jsxElement: JSXElement) {
// 如果 jsxElement 是 null, undefined 或者是布尔值，则直接跳过处理
if (jsxElement == null || typeof jsxElement === 'boolean') {
console.warn('Invalid JSX element:', jsxElement);
return null;
}
const { type, props } = jsxElement;
// React Fragment 的处理
if (type === Symbol.for('react.fragment')) {
const fragment = document.createDocumentFragment();
if (props.children) {
if (Array.isArray(props.children)) {
props.children.forEach((child) => {
const childElement = createDOMElement(child);
if (childElement) {
fragment.appendChild(childElement);
}
});
} else {
const childElement = createDOMElement(props.children);
if (childElement) {
fragment.appendChild(childElement);
}
}
}
return fragment;
}
const domElement = document.createElement(type as string);
// 处理 props
Object.keys(props).forEach((prop) => {
if (prop === 'children') {
// 递归处理 children
if (Array.isArray(props.children)) {
props.children.forEach((child) => {
const childElement = createDOMElement(child);
if (childElement) {
domElement.appendChild(childElement);
}
});
} else if (typeof props.children === 'string') {
domElement.appendChild(document.createTextNode(props.children));
} else if (typeof props.children === 'object' && props.children !== null) {
const childElement = createDOMElement(props.children);
if (childElement) {
domElement.appendChild(childElement);
}
}
} else if (prop.startsWith('on')) {
// 处理事件监听器
const eventType = prop.slice(2).toLowerCase(); // 提取事件类型（如 onClick -> click）
domElement.addEventListener(eventType, props[prop]);
} else if (prop === 'style' && typeof props[prop] === 'object') {
// 处理 style 属性
Object.assign(domElement.style, props[prop]);
} else if (prop === 'dangerouslySetInnerHTML') {
// 处理 dangerouslySetInnerHTML
if (props[prop] && typeof props[prop].__html === 'string') {
domElement.innerHTML = props[prop].__html;
} else {
console.warn('Invalid dangerouslySetInnerHTML content:', props[prop]);
}
} else if (prop === 'ref') {
// React 的 ref 在手动创建 DOM 时没有用处
console.warn('Ref prop is not supported in manual DOM creation');
} else if (prop === 'key') {
// React 的 key 属性是用于虚拟 DOM 的，不影响实际 DOM
console.warn('Key prop is not applicable in manual DOM creation');
} else {
// 处理其他普通属性
domElement.setAttribute(prop, props[prop]);
}
});
return domElement;
}

11
packages/ui/src/utils/extra.ts
View File

@@ -1,11 +0,0 @@
export function extractKeysFromBraces(text: string) {
const regex = /\{\{\s*(.*?)\s*\}\}/g;
const keys: string[] = [];
let matches: RegExpExecArray | null;
while ((matches = regex.exec(text)) !== null) {
keys.push(matches[1]); // 获取{{}}中间的key
}
return keys;
}

22
packages/ui/src/utils/history.ts
View File

@@ -1,22 +0,0 @@
type To = string | Location;
type State<T> = {
[key: string]: any;
} & T;
export const push = <T = any>(to: To, state?: State<T>, refresh = true) => {
const _history = window.history;
if (typeof to === 'string') {
// must key is default, so react navigate can work
_history.pushState({ key: 'default', usr: state }, '', to);
} else {
// const path = to.pathname;
_history.pushState({ key: 'default', usr: state }, '', to.pathname);
}
// must dispatch popstate event, so react navigate can work
refresh && window.dispatchEvent(new Event('popstate'));
};
export const history = {
push,
};
// import { createBrowserHistory } from 'history';
// export const history = createBrowserHistory();

7
packages/ui/src/utils/index.ts
View File

@@ -1,7 +0,0 @@
export * from './css';
export * from './extra';
export * from './history';
export * from './is-null';
export * from './nanoid';
export * from './store';
export * from './query-el';

9
packages/ui/src/utils/is-null.ts
View File

@@ -1,9 +0,0 @@
export const isObjectNull = (value: any) => {
if (value === null || value === undefined) {
return true;
}
if (JSON.stringify(value) === '{}') {
return true;
}
return false;
};

14
packages/ui/src/utils/nanoid.ts
View File

@@ -1,14 +0,0 @@
import { customAlphabet } from 'nanoid';
// 全小写的字母和数字
const alphabetLetter = 'abcdefghijklmnopqrstuvwxyz';
const alphabet = '0123456789abcdefghijklmnopqrstuvwxyz';
export const alphabetLetterAll = '0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz';
export const generateId6 = customAlphabet(alphabet, 6);
export const customNanoid = customAlphabet(alphabetLetterAll, 12);
export const generateId = (size = 6) => {
return 'b-' + generateId6(size);
};
export const generate = (size = 6) => {
return customNanoid(size);
};

54
packages/ui/src/utils/query-el.ts
View File

@@ -1,54 +0,0 @@
import { obj2css, ObjCss } from './css';
import parse from 'style-to-object';
export type SelectEl = string | HTMLDivElement;
export const querySelector = (el?: string | HTMLDivElement): HTMLDivElement | null => {
if (!el) {
return null;
}
if (typeof el === 'string') {
return document.querySelector(el) as HTMLDivElement;
}
return el;
};
export type ElStyle = ObjCss | string;
/**
* el add class and style
* @param el
* @param className
* @param style
* @returns
*/
export const elAddCS = (el: HTMLDivElement, className?: string, style?: ElStyle) => {
if (!el) return;
if (className) {
el.classList.add(className);
}
if (style && typeof style === 'string') {
el.style.cssText = style;
} else if (style) {
obj2css(el, style as ObjCss);
}
};
/**
* 添加style的同时保留默认的的style
* @param el
* @param className
* @param style
* @param defaultStyle
* @returns
*/
export const elAddCS2 = (el: HTMLDivElement, className?: string, style?: ElStyle, defaultStyle?: ObjCss) => {
if (!el) return;
if (className) {
el.classList.add(className);
}
let _style: ObjCss = { ...defaultStyle };
if (style && typeof style === 'string') {
_style = { ...defaultStyle, ...parse(style) };
} else if (style && typeof style === 'object') {
_style = { ...defaultStyle, ...style };
}
obj2css(el, _style);
};

3
packages/ui/src/utils/store.ts
View File

@@ -1,3 +0,0 @@
import { createStore } from 'zustand/vanilla';
export { createStore };

39
packages/ui/tsconfig.json
View File

@@ -1,23 +1,36 @@
{
"compilerOptions": {
"target": "ESNext",
"module": "ESNext",
"target": "ES2020",
"useDefineForClassFields": true,
"lib": [
"ES2020",
"DOM",
"ESNext"
"DOM.Iterable"
],
"moduleResolution": "Node",
"declaration": true,
"esModuleInterop": true,
"module": "ESNext",
"skipLibCheck": true,
"outDir": "./dist",
"rootDir": "./src"
/* Bundler mode */
"moduleResolution": "bundler",
"allowImportingTsExtensions": true,
"isolatedModules": true,
"moduleDetection": "force",
"noEmit": true,
"jsx": "react-jsx",
"baseUrl": "./",
"types": [],
"paths": {
"@/*": [
"src/*"
]
},
/* Linting */
"strict": true,
"noImplicitAny": false,
"noUnusedLocals": false,
"noUnusedParameters": false,
"noFallthroughCasesInSwitch": true
},
"include": [
"src"
],
"exclude": [
"node_modules",
"dist"
"src",
]
}