Merge branch 'main' of git.xiongxiao.me:kevisual/theme
This commit is contained in:
commit
1d10cf5888
1
.npmrc
1
.npmrc
@ -1 +1,2 @@
|
||||
@abearxiong:registry=https://npm.pkg.github.com
|
||||
@kevisual:registry=https://npm.xiongxiao.me
|
||||
@ -9,5 +9,9 @@
|
||||
"keywords": [],
|
||||
"author": "",
|
||||
"license": "ISC",
|
||||
"packageManager": "pnpm@10.10.0"
|
||||
"packageManager": "pnpm@10.10.0",
|
||||
"devDependencies": {
|
||||
"react": "^18.3.1",
|
||||
"react-dom": "^18.3.1"
|
||||
}
|
||||
}
|
||||
1
packages/tailwind/.npmrc
Normal file
1
packages/tailwind/.npmrc
Normal file
@ -0,0 +1 @@
|
||||
@build:registry=https://npm.xiongxiao.me
|
||||
13
packages/tailwind/css/loading.css
Normal file
13
packages/tailwind/css/loading.css
Normal file
@ -0,0 +1,13 @@
|
||||
@tailwind components;
|
||||
|
||||
@layer components {
|
||||
.loading {
|
||||
@apply w-full h-full flex justify-center items-center;
|
||||
> div {
|
||||
@apply w-20 h-20 border-t-8 border-b-8 rounded-full animate-spin;
|
||||
}
|
||||
}
|
||||
.loading-sm {
|
||||
@apply w-4 h-4 border-t-2 border-b-2 rounded-full animate-spin;
|
||||
}
|
||||
}
|
||||
30
packages/tailwind/css/scrollbar.css
Normal file
30
packages/tailwind/css/scrollbar.css
Normal file
@ -0,0 +1,30 @@
|
||||
.scrollbar {
|
||||
/* 整个滚动条 */
|
||||
&::-webkit-scrollbar {
|
||||
width: 3px;
|
||||
height: 3px;
|
||||
}
|
||||
|
||||
/* 滚动条有滑块的轨道部分 */
|
||||
&::-webkit-scrollbar-track-piece {
|
||||
background-color: transparent;
|
||||
border-radius: 1px;
|
||||
}
|
||||
|
||||
/* 滚动条滑块(竖向:vertical 横向:horizontal) */
|
||||
&::-webkit-scrollbar-thumb {
|
||||
cursor: pointer;
|
||||
background-color: black;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
/* 滚动条滑块hover */
|
||||
&::-webkit-scrollbar-thumb:hover {
|
||||
background-color: #999999;
|
||||
}
|
||||
|
||||
/* 同时有垂直和水平滚动条时交汇的部分 */
|
||||
&::-webkit-scrollbar-corner {
|
||||
display: block; /* 修复交汇时出现的白块 */
|
||||
}
|
||||
}
|
||||
9
packages/tailwind/extends/theme.js
Normal file
9
packages/tailwind/extends/theme.js
Normal file
@ -0,0 +1,9 @@
|
||||
export const extend = {
|
||||
fontFamily: {
|
||||
mon: ['Montserrat', 'sans-serif'], // 定义自定义字体族
|
||||
rob: ['Roboto', 'sans-serif'],
|
||||
int: ['Inter', 'sans-serif'],
|
||||
orb: ['Orbitron', 'sans-serif'],
|
||||
din: ['DIN', 'sans-serif'],
|
||||
},
|
||||
};
|
||||
3
packages/tailwind/index.css
Normal file
3
packages/tailwind/index.css
Normal file
@ -0,0 +1,3 @@
|
||||
@import "./css/globals.css";
|
||||
@import "./css/loading.css";
|
||||
@import "./css/scrollbar.css"
|
||||
@ -1,16 +1,28 @@
|
||||
{
|
||||
"name": "@kevisual/tailwind",
|
||||
"version": "1.0.0",
|
||||
"name": "@build/tailwind",
|
||||
"version": "1.0.2-alpha-2",
|
||||
"description": "",
|
||||
"main": "index.js",
|
||||
"main": "plugin/index.js",
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"test": "echo \"Error: no test specified\" && exit 1"
|
||||
},
|
||||
"files": [
|
||||
"plugins",
|
||||
"css"
|
||||
"css",
|
||||
"extends",
|
||||
"tailwind.config.js",
|
||||
"src",
|
||||
"index.css",
|
||||
"dist"
|
||||
],
|
||||
"keywords": [],
|
||||
"author": "abearxiong",
|
||||
"license": "ISC"
|
||||
"license": "ISC",
|
||||
"exports": {
|
||||
".": "./plugins/index.js",
|
||||
"./main.css": "./index.css",
|
||||
"./css": "./css/globals.css",
|
||||
"./loading": "./css/loading.css"
|
||||
}
|
||||
}
|
||||
@ -20,6 +20,7 @@ const flexCenter = plugin(function ({ addUtilities }) {
|
||||
'.card-body': {},
|
||||
'.card-footer': {},
|
||||
'.card-key': {},
|
||||
'.loading': {},
|
||||
});
|
||||
});
|
||||
|
||||
51
packages/tailwind/readme.md
Normal file
51
packages/tailwind/readme.md
Normal file
@ -0,0 +1,51 @@
|
||||
# tailwind 收集模块
|
||||
|
||||
```mjs
|
||||
import path from 'path';
|
||||
|
||||
const root = path.resolve(process.cwd());
|
||||
const contents = ['./src/**/*.{ts,tsx,html}', './src/**/*.css'];
|
||||
const content = contents.map((item) => path.join(root, item));
|
||||
/** @type {import('tailwindcss').Config} */
|
||||
export default {
|
||||
darkMode: ['class'],
|
||||
content: content,
|
||||
plugins: [
|
||||
require('@tailwindcss/aspect-ratio'), //
|
||||
require('@tailwindcss/typography'),
|
||||
require('tailwindcss-animate'),
|
||||
require('./plugins/index'),
|
||||
],
|
||||
theme: {
|
||||
extend: {
|
||||
fontFamily: {
|
||||
mon: ['Montserrat', 'sans-serif'], // 定义自定义字体族
|
||||
rob: ['Roboto', 'sans-serif'],
|
||||
int: ['Inter', 'sans-serif'],
|
||||
orb: ['Orbitron', 'sans-serif'],
|
||||
din: ['DIN', 'sans-serif'],
|
||||
},
|
||||
},
|
||||
screen: {
|
||||
sm: '640px',
|
||||
// => @media (min-width: 640px) { ... }
|
||||
|
||||
md: '768px',
|
||||
// => @media (min-width: 768px) { ... }
|
||||
|
||||
lg: '1024px',
|
||||
// => @media (min-width: 1024px) { ... }
|
||||
|
||||
xl: '1280px',
|
||||
// => @media (min-width: 1280px) { ... }
|
||||
|
||||
'2xl': '1536px',
|
||||
// => @media (min-width: 1536px) { ... }
|
||||
'3xl': '1920px',
|
||||
// => @media (min-width: 1920) { ... }
|
||||
'4xl': '2560px',
|
||||
// => @media (min-width: 2560) { ... }
|
||||
},
|
||||
},
|
||||
};
|
||||
```
|
||||
47
packages/tailwind/tailwind.config.js
Normal file
47
packages/tailwind/tailwind.config.js
Normal file
@ -0,0 +1,47 @@
|
||||
import path from 'path';
|
||||
|
||||
const root = path.resolve(process.cwd());
|
||||
const contents = ['./src/**/*.{ts,tsx,html}', './src/**/*.css']
|
||||
const content = contents.map((item) => path.join(root, item));
|
||||
/** @type {import('tailwindcss').Config} */
|
||||
export default {
|
||||
darkMode: ['class'],
|
||||
content: content,
|
||||
plugins: [
|
||||
require('@tailwindcss/aspect-ratio'), //
|
||||
require('@tailwindcss/typography'),
|
||||
require('tailwindcss-animate'),
|
||||
require('./plugins/index'),
|
||||
],
|
||||
theme: {
|
||||
extend: {
|
||||
fontFamily: {
|
||||
mon: ['Montserrat', 'sans-serif'], // 定义自定义字体族
|
||||
rob: ['Roboto', 'sans-serif'],
|
||||
int: ['Inter', 'sans-serif'],
|
||||
orb: ['Orbitron', 'sans-serif'],
|
||||
din: ['DIN', 'sans-serif'],
|
||||
},
|
||||
},
|
||||
screen: {
|
||||
sm: '640px',
|
||||
// => @media (min-width: 640px) { ... }
|
||||
|
||||
md: '768px',
|
||||
// => @media (min-width: 768px) { ... }
|
||||
|
||||
lg: '1024px',
|
||||
// => @media (min-width: 1024px) { ... }
|
||||
|
||||
xl: '1280px',
|
||||
// => @media (min-width: 1280px) { ... }
|
||||
|
||||
'2xl': '1536px',
|
||||
// => @media (min-width: 1536px) { ... }
|
||||
'3xl': '1920px',
|
||||
// => @media (min-width: 1920) { ... }
|
||||
'4xl': '2560px',
|
||||
// => @media (min-width: 2560) { ... }
|
||||
},
|
||||
},
|
||||
};
|
||||
@ -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>} />
|
||||
|
||||
@ -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') {
|
||||
|
||||
@ -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>
|
||||
|
||||
3
packages/ui/.npmrc
Normal file
3
packages/ui/.npmrc
Normal file
@ -0,0 +1,3 @@
|
||||
//npm.xiongxiao.me/:_authToken=${ME_NPM_TOKEN}
|
||||
@abearxiong:registry=https://npm.pkg.github.com
|
||||
//registry.npmjs.org/:_authToken=${NPM_TOKEN}
|
||||
@ -1,13 +1,16 @@
|
||||
{
|
||||
"name": "@kevisual/ui",
|
||||
"version": "0.0.2",
|
||||
"version": "0.0.4-alpha-1",
|
||||
"description": "",
|
||||
"main": "dist/index.js",
|
||||
"privite": false,
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"tsc": "tsc",
|
||||
"dev": "rollup -c -w",
|
||||
"build": "npm run clean && rollup -c",
|
||||
"build:lib": "cross-env TYPE=apps rollup -c",
|
||||
"deploy": "envision switchOrg system && envision deploy ./dist -k theme -v 0.0.1",
|
||||
"clean": "rimraf dist"
|
||||
},
|
||||
"files": [
|
||||
@ -18,21 +21,24 @@
|
||||
"keywords": [],
|
||||
"author": "abearxiong",
|
||||
"devDependencies": {
|
||||
"@emotion/serialize": "^1.3.1",
|
||||
"@rollup/plugin-node-resolve": "^15.2.3",
|
||||
"@rollup/plugin-typescript": "^11.1.6",
|
||||
"@emotion/serialize": "^1.3.2",
|
||||
"@rollup/plugin-commonjs": "^28.0.1",
|
||||
"@rollup/plugin-node-resolve": "^15.3.0",
|
||||
"@rollup/plugin-terser": "^0.4.4",
|
||||
"@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",
|
||||
|
||||
@ -1,27 +1,41 @@
|
||||
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(),
|
||||
resolve({
|
||||
browser: true, // 处理浏览器版本的依赖
|
||||
}),
|
||||
commonjs(),
|
||||
typescript({
|
||||
tsconfig: './tsconfig.json',
|
||||
compilerOptions: {
|
||||
declaration: true, // 生成声明文件
|
||||
declaration: !isApps, // 生成声明文件
|
||||
declarationDir: './dist', // 声明文件输出目录
|
||||
// outDir: './types', //
|
||||
},
|
||||
}), // 添加 TypeScript 插件
|
||||
// terser(), // 压缩输出的 ES Module 文件
|
||||
],
|
||||
external: ['react', 'react-dom'], // 告诉 Rollup 不要将 react/react-dom 打包，而是作为外部依赖
|
||||
}));
|
||||
|
||||
const entryCss = ['index'];
|
||||
15
packages/ui/src/components/card/CardBlank.tsx
Normal file
15
packages/ui/src/components/card/CardBlank.tsx
Normal 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
1
packages/ui/src/components/card/index.ts
Normal file
@ -0,0 +1 @@
|
||||
export { CardBlank } from './CardBlank'
|
||||
24
packages/ui/src/components/loading/Load.tsx
Normal file
24
packages/ui/src/components/loading/Load.tsx
Normal file
@ -0,0 +1,24 @@
|
||||
type LoadingProps = {
|
||||
loading?: boolean;
|
||||
children?: React.ReactNode;
|
||||
};
|
||||
export const Loading = (props: LoadingProps) => {
|
||||
if (!props.loading) return <>{props.children}</>;
|
||||
return (
|
||||
<div className='w-full h-full flex justify-center items-center'>
|
||||
<div className='w-20 h-20 border-t-8 border-b-8 rounded-full animate-spin'></div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
type ShowContentProps = {
|
||||
className: string;
|
||||
open?: boolean;
|
||||
children?: React.ReactNode;
|
||||
blank?: React.ReactNode;
|
||||
};
|
||||
|
||||
export const LoadContent = (props: ShowContentProps) => {
|
||||
let open = props.open ?? true;
|
||||
if (open) return <>{props.children}</>;
|
||||
return <div className={props.className}>{props?.blank}</div>;
|
||||
};
|
||||
1
packages/ui/src/components/loading/index.ts
Normal file
1
packages/ui/src/components/loading/index.ts
Normal file
@ -0,0 +1 @@
|
||||
export * from './Load';
|
||||
@ -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 = '×';
|
||||
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);
|
||||
}
|
||||
}
|
||||
@ -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;
|
||||
};
|
||||
@ -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 };
|
||||
|
||||
@ -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();
|
||||
@ -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;
|
||||
},
|
||||
};
|
||||
});
|
||||
@ -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';
|
||||
|
||||
@ -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;
|
||||
};
|
||||
@ -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;
|
||||
}
|
||||
@ -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;
|
||||
}
|
||||
@ -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();
|
||||
@ -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';
|
||||
@ -1,9 +0,0 @@
|
||||
export const isObjectNull = (value: any) => {
|
||||
if (value === null || value === undefined) {
|
||||
return true;
|
||||
}
|
||||
if (JSON.stringify(value) === '{}') {
|
||||
return true;
|
||||
}
|
||||
return false;
|
||||
};
|
||||
@ -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);
|
||||
};
|
||||
@ -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);
|
||||
};
|
||||
@ -1,3 +0,0 @@
|
||||
import { createStore } from 'zustand/vanilla';
|
||||
|
||||
export { createStore };
|
||||
@ -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",
|
||||
]
|
||||
}
|
||||
38
packages/vite/package.json
Normal file
38
packages/vite/package.json
Normal file
@ -0,0 +1,38 @@
|
||||
{
|
||||
"name": "@build/vite",
|
||||
"version": "0.0.1",
|
||||
"description": "",
|
||||
"main": "index.js",
|
||||
"scripts": {
|
||||
"dev": "rollup -c -w",
|
||||
"build": "npm run clean && rollup -c",
|
||||
"clean": "rimraf dist"
|
||||
},
|
||||
"keywords": [],
|
||||
"author": "abearxiong <xiongxiao@xiongxiao.me>",
|
||||
"license": "MIT",
|
||||
"type": "module",
|
||||
"files": [
|
||||
"dist",
|
||||
"src"
|
||||
],
|
||||
"devDependencies": {
|
||||
"@rollup/plugin-commonjs": "^28.0.1",
|
||||
"@rollup/plugin-node-resolve": "^15.3.0",
|
||||
"@rollup/plugin-terser": "^0.4.4",
|
||||
"@rollup/plugin-typescript": "^12.1.1",
|
||||
"@types/postcss-import": "^14.0.3",
|
||||
"@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.8",
|
||||
"postcss-import": "^16.1.0",
|
||||
"rollup": "^4.24.3",
|
||||
"rollup-plugin-dts": "^6.1.1",
|
||||
"rollup-plugin-postcss": "^4.0.2",
|
||||
"typescript": "^5.6.3",
|
||||
"vite": "^5.4.6"
|
||||
}
|
||||
}
|
||||
33
packages/vite/rollup.config.js
Normal file
33
packages/vite/rollup.config.js
Normal file
@ -0,0 +1,33 @@
|
||||
import resolve from '@rollup/plugin-node-resolve';
|
||||
import typescript from '@rollup/plugin-typescript';
|
||||
import commonjs from '@rollup/plugin-commonjs';
|
||||
import { dts } from 'rollup-plugin-dts';
|
||||
|
||||
const entrys = ['index'];
|
||||
/**
|
||||
* @type {import('rollup').RollupOptions[]}
|
||||
*/
|
||||
const configs = entrys.map((entry) => ({
|
||||
input: `./src/${entry}.ts`, // 修改输入文件为 TypeScript 文件
|
||||
output: {
|
||||
file: `./dist/${entry}.js`,
|
||||
format: 'es', // 输出格式为 ES Module
|
||||
},
|
||||
plugins: [
|
||||
resolve({ browser: false }),
|
||||
commonjs(),
|
||||
typescript({
|
||||
tsconfig: './tsconfig.json',
|
||||
}),
|
||||
],
|
||||
}));
|
||||
const dtsConfigs = {
|
||||
input: './src/index.ts',
|
||||
output: {
|
||||
file: './dist/index.d.ts',
|
||||
format: 'es',
|
||||
},
|
||||
plugins: [dts()],
|
||||
};
|
||||
|
||||
export default [...configs, dtsConfigs];
|
||||
17
packages/vite/src/index.ts
Normal file
17
packages/vite/src/index.ts
Normal file
@ -0,0 +1,17 @@
|
||||
/**
|
||||
*
|
||||
* @param isDev
|
||||
* @param scriptStr <script defer src="https://umami.xiongxiao.me/script.js" data-website-id="aeea5ee5-df79-4e78-8c0d-a9f26db23695"></script>
|
||||
* @returns
|
||||
*/
|
||||
export const unamiPlugin = (scriptStr: string, isDev = false) => {
|
||||
return {
|
||||
name: 'html-transform',
|
||||
transformIndexHtml(html: string) {
|
||||
if (isDev) {
|
||||
return html;
|
||||
}
|
||||
return html.replace('</head>', `${scriptStr}</head>`);
|
||||
},
|
||||
};
|
||||
};
|
||||
37
packages/vite/tsconfig.json
Normal file
37
packages/vite/tsconfig.json
Normal file
@ -0,0 +1,37 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"target": "ES2020",
|
||||
"useDefineForClassFields": true,
|
||||
"lib": [
|
||||
"ES2020",
|
||||
"DOM",
|
||||
"DOM.Iterable"
|
||||
],
|
||||
"module": "ESNext",
|
||||
"skipLibCheck": true,
|
||||
/* Bundler mode */
|
||||
"moduleResolution": "bundler",
|
||||
"declaration": false,
|
||||
"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",
|
||||
]
|
||||
}
|
||||
618
pnpm-lock.yaml
generated
618
pnpm-lock.yaml
generated
File diff suppressed because it is too large
Load Diff
36
tsconfig.json
Normal file
36
tsconfig.json
Normal file
@ -0,0 +1,36 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"target": "ES2020",
|
||||
"useDefineForClassFields": true,
|
||||
"lib": [
|
||||
"ES2020",
|
||||
"DOM",
|
||||
"DOM.Iterable"
|
||||
],
|
||||
"module": "ESNext",
|
||||
"skipLibCheck": true,
|
||||
/* 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",
|
||||
]
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user