暂存添加编辑器和modal

packages/ui/package.json

@@ -0,0 +1,34 @@
+{
+  "name": "@kevisual/ui",
+  "version": "1.0.0",
+  "description": "",
+  "main": "dist/index.js",
+  "scripts": {
+    "build": "tsc"
+  },
+  "files": [
+    "dist",
+    "src",
+    "components"
+  ],
+  "keywords": [],
+  "author": "abearxiong",
+  "devDependencies": {
+    "@emotion/serialize": "^1.3.1",
+    "@types/react": "^18.3.8",
+    "immer": "^10.1.1",
+    "nanoid": "^5.0.7",
+    "rollup": "^4.22.2",
+    "typescript": "^5.6.2",
+    "zustand": "5.0.0-rc.2"
+  },
+  "dependencies": {
+    "dayjs": "^1.11.13",
+    "lodash-es": "^4.17.21",
+    "style-to-object": "^1.0.8"
+  },
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org/",
+    "access": "public"
+  }
+}

packages/ui/src/components/modal/blank-modal.ts

@@ -0,0 +1,175 @@
+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',
+      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): any;
+  static render(el: string | HTMLDivElement, opts?: DialogModalOpts): any;
+  static render(...args: any[]) {
+    const [el, id, opts] = args;
+    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);
+  }
+}

packages/ui/src/components/modal/event.ts

@@ -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;
+};

packages/ui/src/components/modal/index.css

@@ -0,0 +1,29 @@
+#ui-modal-list {
+  position: relative;
+}
+.ui-modal-wrapper {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 200;
+  display: none;
+}
+.ui-modal-open {
+  display: block;
+}
+
+.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;
+}

packages/ui/src/components/modal/index.ts

@@ -0,0 +1,5 @@
+export * from './modal';
+
+export * from './store';
+
+export * from './blank-modal';

packages/ui/src/components/modal/modal.ts

@@ -0,0 +1,235 @@
+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;
+
+  onClose?: () => void;
+  defaultStyle?: DefaultStyle<U>;
+} & T;
+export type DefaultStyle<T> = {
+  defaultContentStyle?: ObjCss;
+  defaultMaskStyle?: ObjCss;
+} & T;
+
+export class Modal<T = any, U = KV> {
+  root: HTMLDivElement;
+  id: string;
+  modalElement?: HTMLDivElement;
+  Element?: HTMLDivElement;
+  mask?: boolean;
+  maskClassName?: string;
+  maskStyle?: ElStyle;
+  // 点击mask是否关闭
+  maskClose?: boolean;
+
+  contentClassName?: string;
+  contentStyle?: ElStyle;
+
+  destroyOnClose?: 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 ?? false;
+    this.cacheFragment = new DocumentFragment();
+    this.defaultStyle = opts.defaultStyle || ({} as DefaultStyle<U>);
+    this.onClose = opts.onClose;
+  }
+  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(el: string | HTMLDivElement, id: string, opts?: ModalOpts): any;
+  static render(el: string | HTMLDivElement, opts?: ModalOpts): any;
+  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);
+  }
+  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);
+    this.setOpen(true);
+  }
+  setOpen(open: boolean) {
+    this.open = open;
+    if (this.destroyOnClose && open === false) {
+      this.unMount();
+    }
+    if (open) {
+      this.modalElement.classList.add('ui-modal-open');
+      this.root.appendChild(this.modalElement);
+    } else {
+      // this.modalElement.classList.remove('ui-modal-open');
+      this.cacheFragment.appendChild(this.modalElement);
+    }
+  }
+  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;
+    return fragment;
+  }
+  /**
+   * 保留，暂时不用
+   * @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();

packages/ui/src/components/modal/store.ts

@@ -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;
+    },
+  };
+});

packages/ui/src/index.css

@@ -0,0 +1 @@
+@import 'components/model/index.css';

packages/ui/src/index.ts

@@ -0,0 +1,3 @@
+import { Modal, modalStore, BlankModal, DialogModal } from './components/modal';
+
+export { Modal, modalStore, BlankModal, DialogModal };

packages/ui/src/utils/css.ts

@@ -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;
+};

packages/ui/src/utils/index.ts

@@ -0,0 +1,2 @@
+export * from './query-el';
+export * from './store';

packages/ui/src/utils/nanoid.ts

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

packages/ui/src/utils/query-el.ts

@@ -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);
+};

packages/ui/src/utils/store.ts

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

packages/ui/tsconfig.json

@@ -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"
+  ]
+}