暂存
This commit is contained in:
parent
e4fe97f5e5
commit
673a982014
1
apps/ui/.gitignore
vendored
Normal file
1
apps/ui/.gitignore
vendored
Normal file
@ -0,0 +1 @@
|
|||||||
|
dist
|
||||||
@ -256,19 +256,19 @@ export class Message {
|
|||||||
remove();
|
remove();
|
||||||
};
|
};
|
||||||
};
|
};
|
||||||
success = (message, timeout = 1000, onClose) => {
|
success = (message, timeout = 1000, onClose = () => {}) => {
|
||||||
return this.open(message, timeout, onClose, { type: 'success' });
|
return this.open(message, timeout, onClose, { type: 'success' });
|
||||||
};
|
};
|
||||||
info = (message, timeout = 1500, onClose) => {
|
info = (message, timeout = 1500, onClose = () => {}) => {
|
||||||
return this.open(message, timeout, onClose, { type: 'info' });
|
return this.open(message, timeout, onClose, { type: 'info' });
|
||||||
};
|
};
|
||||||
warning = (message, timeout = 3000, onClose) => {
|
warning = (message, timeout = 3000, onClose = () => {}) => {
|
||||||
return this.open(message, timeout, onClose, { type: 'warning' });
|
return this.open(message, timeout, onClose, { type: 'warning' });
|
||||||
};
|
};
|
||||||
error = (message, timeout = 3000, onClose) => {
|
error = (message, timeout = 3000, onClose = () => {}) => {
|
||||||
return this.open(message, timeout, onClose, { type: 'error' });
|
return this.open(message, timeout, onClose, { type: 'error' });
|
||||||
};
|
};
|
||||||
loading = (message, timeout = 0, onClose) => {
|
loading = (message, timeout = 0, onClose = () => {}) => {
|
||||||
return this.open(message, timeout, onClose, { type: 'loading' });
|
return this.open(message, timeout, onClose, { type: 'loading' });
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,15 +0,0 @@
|
|||||||
<!DOCTYPE html>
|
|
||||||
<html lang="en">
|
|
||||||
|
|
||||||
<head>
|
|
||||||
<meta charset="UTF-8">
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
||||||
<title>UI</title>
|
|
||||||
</head>
|
|
||||||
|
|
||||||
<body>
|
|
||||||
<div id="root"></div>
|
|
||||||
<script type="module" src="./deploy/me.js"></script>
|
|
||||||
</body>
|
|
||||||
|
|
||||||
</html>
|
|
||||||
@ -1,13 +1,51 @@
|
|||||||
{
|
{
|
||||||
"name": "ui",
|
"name": "@kevisual/system-ui",
|
||||||
"version": "1.0.0",
|
"version": "0.0.1",
|
||||||
"description": "",
|
"description": "",
|
||||||
"main": "index.js",
|
"main": "dist/index.js",
|
||||||
|
"privite": false,
|
||||||
|
"type": "module",
|
||||||
"scripts": {
|
"scripts": {
|
||||||
|
"dev": "rollup -c -w",
|
||||||
|
"build": "npm run clean && rollup -c",
|
||||||
"pub": "envision switchOrg system && envision deploy ./deploy -v 0.0.1 -k ui -y y",
|
"pub": "envision switchOrg system && envision deploy ./deploy -v 0.0.1 -k ui -y y",
|
||||||
"dev": "vite"
|
"clean": "rimraf dist"
|
||||||
},
|
},
|
||||||
|
"files": [
|
||||||
|
"dist",
|
||||||
|
"src",
|
||||||
|
"components"
|
||||||
|
],
|
||||||
"keywords": [],
|
"keywords": [],
|
||||||
"author": "",
|
"author": "abearxiong",
|
||||||
"license": "ISC"
|
"license": "MIT",
|
||||||
|
"dependencies": {
|
||||||
|
"dayjs": "^1.11.13",
|
||||||
|
"lodash-es": "^4.17.21",
|
||||||
|
"style-to-object": "^1.0.8"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"@emotion/serialize": "^1.3.1",
|
||||||
|
"@rollup/plugin-commonjs": "^28.0.1",
|
||||||
|
"@rollup/plugin-node-resolve": "^15.2.3",
|
||||||
|
"@rollup/plugin-terser": "^0.4.4",
|
||||||
|
"@rollup/plugin-typescript": "^11.1.6",
|
||||||
|
"@types/postcss-import": "^14.0.3",
|
||||||
|
"@types/react": "^18.3.8",
|
||||||
|
"autoprefixer": "^10.4.20",
|
||||||
|
"cross-env": "^7.0.3",
|
||||||
|
"cssnano": "^7.0.6",
|
||||||
|
"immer": "^10.1.1",
|
||||||
|
"nanoid": "^5.0.7",
|
||||||
|
"postcss-import": "^16.1.0",
|
||||||
|
"rollup": "^4.22.2",
|
||||||
|
"rollup-plugin-postcss": "^4.0.2",
|
||||||
|
"ts-lib": "^0.0.5",
|
||||||
|
"typescript": "^5.6.2",
|
||||||
|
"zustand": "5.0.0-rc.2"
|
||||||
|
},
|
||||||
|
"publishConfig": {
|
||||||
|
"registry": "https://registry.npmjs.org/",
|
||||||
|
"access": "public"
|
||||||
|
}
|
||||||
}
|
}
|
||||||
60
apps/ui/rollup.config.js
Normal file
60
apps/ui/rollup.config.js
Normal file
@ -0,0 +1,60 @@
|
|||||||
|
import resolve from '@rollup/plugin-node-resolve';
|
||||||
|
import typescript from '@rollup/plugin-typescript';
|
||||||
|
import commonjs from '@rollup/plugin-commonjs';
|
||||||
|
import postcss from 'rollup-plugin-postcss';
|
||||||
|
import autoprefixer from 'autoprefixer';
|
||||||
|
import cssnano from 'cssnano';
|
||||||
|
import terser from '@rollup/plugin-terser';
|
||||||
|
|
||||||
|
import postcssImport from 'postcss-import';
|
||||||
|
|
||||||
|
const isApps = process.env.TYPE === 'apps';
|
||||||
|
const entrys = ['index'];
|
||||||
|
/**
|
||||||
|
* @type {import('rollup').RollupOptions[]}
|
||||||
|
*/
|
||||||
|
const configs = entrys.map((entry) => ({
|
||||||
|
input: `./src/${entry}.ts`, // 修改输入文件为 TypeScript 文件
|
||||||
|
output: {
|
||||||
|
file: `./dist/${entry}.js`,
|
||||||
|
// dir: 'dist',
|
||||||
|
format: 'es', // 输出格式为 ES Module
|
||||||
|
},
|
||||||
|
plugins: [
|
||||||
|
resolve({
|
||||||
|
browser: true, // 处理浏览器版本的依赖
|
||||||
|
}),
|
||||||
|
commonjs(),
|
||||||
|
typescript({
|
||||||
|
tsconfig: './tsconfig.json',
|
||||||
|
compilerOptions: {
|
||||||
|
declaration: !isApps, // 生成声明文件
|
||||||
|
declarationDir: './dist', // 声明文件输出目录
|
||||||
|
// outDir: './types', //
|
||||||
|
},
|
||||||
|
}), // 添加 TypeScript 插件
|
||||||
|
terser(), // 压缩输出的 ES Module 文件
|
||||||
|
],
|
||||||
|
}));
|
||||||
|
|
||||||
|
const entryCss = ['index'];
|
||||||
|
const configsCss = entryCss.map((entry) => ({
|
||||||
|
input: `./src/${entry}.css`, // 修改输入文件为 TypeScript 文件
|
||||||
|
output: {
|
||||||
|
file: `./dist/${entry}.css`,
|
||||||
|
},
|
||||||
|
include: ['src/**/*.css'],
|
||||||
|
plugins: [
|
||||||
|
// resolve(),
|
||||||
|
postcss({
|
||||||
|
// extract: true,
|
||||||
|
extract: true,
|
||||||
|
plugins: [
|
||||||
|
postcssImport(), // 处理 @import 语句
|
||||||
|
autoprefixer(),
|
||||||
|
],
|
||||||
|
}),
|
||||||
|
],
|
||||||
|
}));
|
||||||
|
|
||||||
|
export default [...configs, ...configsCss];
|
||||||
1
apps/ui/src/components/message/index.ts
Normal file
1
apps/ui/src/components/message/index.ts
Normal file
@ -0,0 +1 @@
|
|||||||
|
export * from './message';
|
||||||
277
apps/ui/src/components/message/message.ts
Normal file
277
apps/ui/src/components/message/message.ts
Normal file
@ -0,0 +1,277 @@
|
|||||||
|
export class MessageContainer {
|
||||||
|
container;
|
||||||
|
id = 'for-message';
|
||||||
|
root = document.body;
|
||||||
|
constructor(opts?: any) {
|
||||||
|
const { id } = opts || {};
|
||||||
|
if (id) {
|
||||||
|
this.id = id;
|
||||||
|
}
|
||||||
|
this.initContainer();
|
||||||
|
}
|
||||||
|
initContainer() {
|
||||||
|
const id = this.id;
|
||||||
|
const root = this.root;
|
||||||
|
let forModal = document.querySelector('#' + id);
|
||||||
|
if (!forModal) {
|
||||||
|
forModal = document.createElement('div');
|
||||||
|
forModal.id = id;
|
||||||
|
// 点击穿透
|
||||||
|
root.appendChild(forModal);
|
||||||
|
}
|
||||||
|
this.initStyle();
|
||||||
|
this.container = forModal;
|
||||||
|
}
|
||||||
|
initStyle(force: boolean = false) {
|
||||||
|
const id = this.id;
|
||||||
|
const styleId = id + '-style';
|
||||||
|
const _style = document.querySelector('#' + styleId);
|
||||||
|
if (force && _style) {
|
||||||
|
_style.remove();
|
||||||
|
}
|
||||||
|
if (!force && _style) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
const style = document.createElement('style');
|
||||||
|
style.id = styleId;
|
||||||
|
|
||||||
|
style.innerHTML = `
|
||||||
|
#${id} {
|
||||||
|
position: fixed; top: 0; left: 0; z-index: 1000; width: 100vw;height: 100vh;pointer-events: none; display: flex; flex-direction: column; gap: 10px;
|
||||||
|
}
|
||||||
|
.message-wrapper {
|
||||||
|
display: flex;
|
||||||
|
transition: transform 2s ease-in-out, opacity 1.2s ease-in-out; /* 缩小并淡出 */
|
||||||
|
}
|
||||||
|
.message-wrapper:first-child {
|
||||||
|
margin-top: 20px;
|
||||||
|
}
|
||||||
|
.message {
|
||||||
|
display: flex;
|
||||||
|
gap: 10px;
|
||||||
|
padding: 6px 10px;
|
||||||
|
margin: 0 auto;
|
||||||
|
border-radius: 4px;
|
||||||
|
background-color: white;
|
||||||
|
box-shadow: 0 6px 16px 0 rgba(0, 0, 0, 0.08),
|
||||||
|
0 3px 6px -4px rgba(0, 0, 0, 0.12),
|
||||||
|
0 9px 28px 8px rgba(0, 0, 0, 0.05);
|
||||||
|
justify-content: center;
|
||||||
|
align-item: center;
|
||||||
|
animation: message-slide-down 0.3s ease-out forwards; /* 应用动画 */
|
||||||
|
}
|
||||||
|
/* 添加消失类时 */
|
||||||
|
.message-wrapper.message-hide {
|
||||||
|
transform: scale(0);
|
||||||
|
opacity: 0;
|
||||||
|
pointer-events: none; /* 防止交互 */
|
||||||
|
}
|
||||||
|
.message-success {
|
||||||
|
}
|
||||||
|
@keyframes message-slide-down {
|
||||||
|
0% {
|
||||||
|
transform: translateY(-100px); /* 从上方开始 */
|
||||||
|
opacity: 0; /* 从不可见状态开始 */
|
||||||
|
}
|
||||||
|
50% {
|
||||||
|
opacity: 0.5; /* 渐渐变为半透明 */
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
transform: translateY(0); /* 移动到初始位置 */
|
||||||
|
opacity: 1; /* 最终完全可见 */
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.message-icon {
|
||||||
|
position: relative;
|
||||||
|
width: 24px;
|
||||||
|
height: 24px;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
.message-icon::before {
|
||||||
|
content: "";
|
||||||
|
position: absolute;
|
||||||
|
left: 7px;
|
||||||
|
top: 3px;
|
||||||
|
width: 5px;
|
||||||
|
height: 10px;
|
||||||
|
}
|
||||||
|
.icon-success {
|
||||||
|
border: 2px solid green; /* 外圆圈 */
|
||||||
|
border-radius: 50%; /* 使其为圆形 */
|
||||||
|
}
|
||||||
|
.icon-success::before {
|
||||||
|
border-right: 2px solid green; /* 打勾的右边部分 */
|
||||||
|
border-bottom: 2px solid green; /* 打勾的下边部分 */
|
||||||
|
transform: rotate(45deg);
|
||||||
|
}
|
||||||
|
.icon-info {
|
||||||
|
border: 2px solid blue; /* 外圆圈 */
|
||||||
|
border-radius: 50%; /* 使其为圆形 */
|
||||||
|
}
|
||||||
|
.icon-info::before {
|
||||||
|
content: "i";
|
||||||
|
position: absolute;
|
||||||
|
top: 0px;
|
||||||
|
color: blue;
|
||||||
|
font-weight: bold;
|
||||||
|
font-size: 16px;
|
||||||
|
left: 8px;
|
||||||
|
}
|
||||||
|
.icon-error::before, .icon-error::after {
|
||||||
|
content: "";
|
||||||
|
position: absolute;
|
||||||
|
top: 4px;
|
||||||
|
left: 50%;
|
||||||
|
width: 2px;
|
||||||
|
height: 12px;
|
||||||
|
background-color: red;
|
||||||
|
transform-origin: center;
|
||||||
|
}
|
||||||
|
.icon-error {
|
||||||
|
border: 2px solid red; /* 外圆圈 */
|
||||||
|
border-radius: 50%; /* 使其为圆形 */
|
||||||
|
}
|
||||||
|
.icon-error::before {
|
||||||
|
transform: translateX(-50%) rotate(45deg); /* 旋转形成叉号的一部分 */
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-error::after {
|
||||||
|
transform: translateX(-50%) rotate(-45deg); /* 旋转形成叉号的另一部分 */
|
||||||
|
}
|
||||||
|
.icon-warning {
|
||||||
|
position: relative;
|
||||||
|
width: 0;
|
||||||
|
height: 0;
|
||||||
|
border-left: 12px solid transparent;
|
||||||
|
border-right: 12px solid transparent;
|
||||||
|
border-bottom: 24px solid orange; /* 三角形 */
|
||||||
|
display: inline-block;
|
||||||
|
transform: scale(0.8); /* 缩小三角形 */
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-warning::before {
|
||||||
|
content: "!";
|
||||||
|
position: absolute;
|
||||||
|
top: 5px;
|
||||||
|
left: 50%;
|
||||||
|
transform: translateX(-50%);
|
||||||
|
color: white;
|
||||||
|
font-weight: bold;
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
.icon-loading {
|
||||||
|
width: 24px;
|
||||||
|
height: 24px;
|
||||||
|
border: 3px solid #f3f3f3; /* 边框颜色，用于加载圈的背景 */
|
||||||
|
border-top: 3px solid #3498db; /* 顶部边框的颜色，用于显示加载进度 */
|
||||||
|
border-radius: 50%; /* 圆形 */
|
||||||
|
animation: spin 1s linear infinite; /* 旋转动画 */
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes spin {
|
||||||
|
0% {
|
||||||
|
transform: rotate(0deg);
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
transform: rotate(360deg);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
`;
|
||||||
|
document.head.appendChild(style);
|
||||||
|
}
|
||||||
|
setRoot(root) {
|
||||||
|
if (root instanceof HTMLElement) {
|
||||||
|
this.root = root;
|
||||||
|
root.appendChild(this.container);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
const controller = new MessageContainer();
|
||||||
|
|
||||||
|
export const createMessage = (content, opts) => {
|
||||||
|
let { icon, key, style, className, type } = opts || {};
|
||||||
|
const div = document.createElement('div');
|
||||||
|
div.className = 'message-wrapper' + (className ? ' ' + className : '');
|
||||||
|
if (style) {
|
||||||
|
div.style.cssText = style;
|
||||||
|
}
|
||||||
|
if (key) div.setAttribute('data-key', key);
|
||||||
|
const contentDiv = document.createElement('div');
|
||||||
|
contentDiv.className = 'message';
|
||||||
|
if (icon) {
|
||||||
|
const i = document.createElement('i');
|
||||||
|
i.className = icon;
|
||||||
|
i.classList.add('message-icon');
|
||||||
|
contentDiv.appendChild(i);
|
||||||
|
} else if (type) {
|
||||||
|
const i = document.createElement('div');
|
||||||
|
i.className = 'icon-' + type;
|
||||||
|
i.classList.add('message-icon');
|
||||||
|
contentDiv.appendChild(i);
|
||||||
|
}
|
||||||
|
if (content instanceof HTMLElement) {
|
||||||
|
contentDiv.appendChild(content);
|
||||||
|
} else {
|
||||||
|
const text = document.createElement('span');
|
||||||
|
text.innerText = content;
|
||||||
|
contentDiv.appendChild(text);
|
||||||
|
}
|
||||||
|
div.appendChild(contentDiv);
|
||||||
|
|
||||||
|
return div;
|
||||||
|
};
|
||||||
|
const methods = ['success', 'info', 'warning', 'error', 'loading'];
|
||||||
|
|
||||||
|
export class Message {
|
||||||
|
controller = controller;
|
||||||
|
constructor() {
|
||||||
|
this.controller = controller;
|
||||||
|
}
|
||||||
|
open = (message, timeout = 3000, onClose, opts) => {
|
||||||
|
const controller = this.controller;
|
||||||
|
const div = createMessage(message, opts);
|
||||||
|
const remove = () => {
|
||||||
|
div.classList.add('message-hide');
|
||||||
|
setTimeout(() => {
|
||||||
|
if (div?.isConnected) {
|
||||||
|
div.remove();
|
||||||
|
} else {
|
||||||
|
console.log('not connected');
|
||||||
|
controller.container.removeChild(div);
|
||||||
|
}
|
||||||
|
}, 1000);
|
||||||
|
onClose && onClose();
|
||||||
|
};
|
||||||
|
controller.container.appendChild(div);
|
||||||
|
controller.initStyle(true);
|
||||||
|
if (timeout === 0) {
|
||||||
|
return () => {
|
||||||
|
remove();
|
||||||
|
};
|
||||||
|
}
|
||||||
|
const time = setTimeout(() => {
|
||||||
|
remove();
|
||||||
|
}, timeout);
|
||||||
|
return () => {
|
||||||
|
clearTimeout(time);
|
||||||
|
remove();
|
||||||
|
};
|
||||||
|
};
|
||||||
|
success = (message: string, timeout = 1000, onClose = () => {}) => {
|
||||||
|
return this.open(message, timeout, onClose, { type: 'success' });
|
||||||
|
};
|
||||||
|
info = (message: string, timeout = 1500, onClose = () => {}) => {
|
||||||
|
return this.open(message, timeout, onClose, { type: 'info' });
|
||||||
|
};
|
||||||
|
warning = (message: string, timeout = 3000, onClose = () => {}) => {
|
||||||
|
return this.open(message, timeout, onClose, { type: 'warning' });
|
||||||
|
};
|
||||||
|
error = (message: string, timeout = 3000, onClose = () => {}) => {
|
||||||
|
return this.open(message, timeout, onClose, { type: 'error' });
|
||||||
|
};
|
||||||
|
loading = (message: string, timeout = 0, onClose = () => {}) => {
|
||||||
|
return this.open(message, timeout, onClose, { type: 'loading' });
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
export const message = new Message();
|
||||||
176
apps/ui/src/components/modal/blank-modal.ts
Normal file
176
apps/ui/src/components/modal/blank-modal.ts
Normal file
@ -0,0 +1,176 @@
|
|||||||
|
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 = '×';
|
||||||
|
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
apps/ui/src/components/modal/event.ts
Normal file
39
apps/ui/src/components/modal/event.ts
Normal file
@ -0,0 +1,39 @@
|
|||||||
|
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;
|
||||||
|
};
|
||||||
28
apps/ui/src/components/modal/index.css
Normal file
28
apps/ui/src/components/modal/index.css
Normal file
@ -0,0 +1,28 @@
|
|||||||
|
#ui-modal-list {
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
.ui-modal-wrapper {
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
z-index: 200;
|
||||||
|
}
|
||||||
|
.ui-modal-close {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ui-modal-mask {
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
background-color: rgba(0, 0, 0, 0.5);
|
||||||
|
z-index: 201;
|
||||||
|
}
|
||||||
|
.ui-modal-content {
|
||||||
|
position: fixed;
|
||||||
|
z-index: 202;
|
||||||
|
}
|
||||||
5
apps/ui/src/components/modal/index.ts
Normal file
5
apps/ui/src/components/modal/index.ts
Normal file
@ -0,0 +1,5 @@
|
|||||||
|
export * from './modal';
|
||||||
|
|
||||||
|
export { modalStore } from './store';
|
||||||
|
|
||||||
|
export { BlankModal, DialogModal } from './blank-modal';
|
||||||
272
apps/ui/src/components/modal/modal.ts
Normal file
272
apps/ui/src/components/modal/modal.ts
Normal file
@ -0,0 +1,272 @@
|
|||||||
|
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
apps/ui/src/components/modal/store.ts
Normal file
16
apps/ui/src/components/modal/store.ts
Normal file
@ -0,0 +1,16 @@
|
|||||||
|
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;
|
||||||
|
},
|
||||||
|
};
|
||||||
|
});
|
||||||
1
apps/ui/src/index.css
Normal file
1
apps/ui/src/index.css
Normal file
@ -0,0 +1 @@
|
|||||||
|
@import './components/modal/index.css';
|
||||||
9
apps/ui/src/index.ts
Normal file
9
apps/ui/src/index.ts
Normal file
@ -0,0 +1,9 @@
|
|||||||
|
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';
|
||||||
19
apps/ui/src/utils/css.ts
Normal file
19
apps/ui/src/utils/css.ts
Normal file
@ -0,0 +1,19 @@
|
|||||||
|
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
apps/ui/src/utils/dom/create-dom-element.ts
Normal file
82
apps/ui/src/utils/dom/create-dom-element.ts
Normal file
@ -0,0 +1,82 @@
|
|||||||
|
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
apps/ui/src/utils/extra.ts
Normal file
11
apps/ui/src/utils/extra.ts
Normal file
@ -0,0 +1,11 @@
|
|||||||
|
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
apps/ui/src/utils/history.ts
Normal file
22
apps/ui/src/utils/history.ts
Normal file
@ -0,0 +1,22 @@
|
|||||||
|
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
apps/ui/src/utils/index.ts
Normal file
7
apps/ui/src/utils/index.ts
Normal file
@ -0,0 +1,7 @@
|
|||||||
|
export * from './css';
|
||||||
|
export * from './extra';
|
||||||
|
export * from './history';
|
||||||
|
export * from './is-null';
|
||||||
|
export * from './nanoid';
|
||||||
|
export * from './store';
|
||||||
|
export * from './query-el';
|
||||||
9
apps/ui/src/utils/is-null.ts
Normal file
9
apps/ui/src/utils/is-null.ts
Normal file
@ -0,0 +1,9 @@
|
|||||||
|
export const isObjectNull = (value: any) => {
|
||||||
|
if (value === null || value === undefined) {
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
if (JSON.stringify(value) === '{}') {
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
return false;
|
||||||
|
};
|
||||||
14
apps/ui/src/utils/nanoid.ts
Normal file
14
apps/ui/src/utils/nanoid.ts
Normal file
@ -0,0 +1,14 @@
|
|||||||
|
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
apps/ui/src/utils/query-el.ts
Normal file
54
apps/ui/src/utils/query-el.ts
Normal file
@ -0,0 +1,54 @@
|
|||||||
|
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
apps/ui/src/utils/store.ts
Normal file
3
apps/ui/src/utils/store.ts
Normal file
@ -0,0 +1,3 @@
|
|||||||
|
import { createStore } from 'zustand/vanilla';
|
||||||
|
|
||||||
|
export { createStore };
|
||||||
23
apps/ui/tsconfig.json
Normal file
23
apps/ui/tsconfig.json
Normal file
@ -0,0 +1,23 @@
|
|||||||
|
{
|
||||||
|
"compilerOptions": {
|
||||||
|
"target": "ESNext",
|
||||||
|
"module": "ESNext",
|
||||||
|
"lib": [
|
||||||
|
"DOM",
|
||||||
|
"ESNext"
|
||||||
|
],
|
||||||
|
"moduleResolution": "Node",
|
||||||
|
"declaration": true,
|
||||||
|
"esModuleInterop": true,
|
||||||
|
"skipLibCheck": true,
|
||||||
|
"outDir": "./dist",
|
||||||
|
"rootDir": "./src"
|
||||||
|
},
|
||||||
|
"include": [
|
||||||
|
"src"
|
||||||
|
],
|
||||||
|
"exclude": [
|
||||||
|
"node_modules",
|
||||||
|
"dist"
|
||||||
|
]
|
||||||
|
}
|
||||||
1462
pnpm-lock.yaml
generated
1462
pnpm-lock.yaml
generated
File diff suppressed because it is too large
Load Diff
Loading…
x
Reference in New Issue
Block a user