暂存添加编辑器和modal

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