quill-table-up 3.1.2 → 3.2.0

package/src/utils/components/input.ts

@@ -1,74 +1,74 @@
-import { createBEM } from '../bem';
-
-interface InputOptions {
-  type?: string;
-  value?: string;
-  max?: number;
-  min?: number;
-  [key: string]: any;
-}
-export function createInputItem(label: string, options: InputOptions) {
-  const bem = createBEM('input');
-  options.type || (options.type = 'text');
-  options.value || (options.value = '');
-
-  const inputItem = document.createElement('div');
-  inputItem.classList.add(bem.be('item'));
-
-  if (label) {
-    const inputLabel = document.createElement('span');
-    inputLabel.classList.add(bem.be('label'));
-    inputLabel.textContent = label;
-    inputItem.appendChild(inputLabel);
-  }
-
-  const inputInput = document.createElement('div');
-  inputInput.classList.add(bem.be('input'));
-  const input = document.createElement('input');
-  for (const key in options) {
-    input.setAttribute(key, options[key]);
-  }
-  if (options.max || options.min) {
-    input.addEventListener('blur', () => {
-      if (options.max && options.max <= Number(input.value)) {
-        input.value = String(options.max);
-      }
-      if (options.min && options.min >= Number(input.value)) {
-        input.value = String(options.min);
-      }
-    });
-  }
-
-  inputInput.appendChild(input);
-  inputItem.appendChild(inputInput);
-
-  input.addEventListener('focus', () => {
-    inputInput.classList.add('focus');
-  });
-  input.addEventListener('blur', () => {
-    inputInput.classList.remove('focus');
-  });
-
-  const errorTip = (msg: string) => {
-    let errorTip: HTMLElement;
-    if (inputInput.classList.contains('error')) {
-      errorTip = inputInput.querySelector(`.${bem.be('error-tip')}`)!;
-    }
-    else {
-      errorTip = document.createElement('span');
-      errorTip.classList.add(bem.be('error-tip'));
-      inputInput.appendChild(errorTip);
-    }
-
-    errorTip.textContent = msg;
-    inputInput.classList.add('error');
-
-    const removeError = () => {
-      inputInput.classList.remove('error');
-      errorTip.remove();
-    };
-    return { removeError };
-  };
-
-  return { item: inputItem, input, errorTip };
-}
+import { createBEM } from '../bem';
+
+interface InputOptions {
+  type?: string;
+  value?: string;
+  max?: number;
+  min?: number;
+  [key: string]: any;
+}
+export function createInputItem(label: string, options: InputOptions) {
+  const bem = createBEM('input');
+  options.type || (options.type = 'text');
+  options.value || (options.value = '');
+
+  const inputItem = document.createElement('div');
+  inputItem.classList.add(bem.be('item'));
+
+  if (label) {
+    const inputLabel = document.createElement('span');
+    inputLabel.classList.add(bem.be('label'));
+    inputLabel.textContent = label;
+    inputItem.appendChild(inputLabel);
+  }
+
+  const inputInput = document.createElement('div');
+  inputInput.classList.add(bem.be('input'));
+  const input = document.createElement('input');
+  for (const key in options) {
+    input.setAttribute(key, options[key]);
+  }
+  if (options.max || options.min) {
+    input.addEventListener('blur', () => {
+      if (options.max && options.max <= Number(input.value)) {
+        input.value = String(options.max);
+      }
+      if (options.min && options.min >= Number(input.value)) {
+        input.value = String(options.min);
+      }
+    });
+  }
+
+  inputInput.appendChild(input);
+  inputItem.appendChild(inputInput);
+
+  input.addEventListener('focus', () => {
+    inputInput.classList.add('focus');
+  });
+  input.addEventListener('blur', () => {
+    inputInput.classList.remove('focus');
+  });
+
+  const errorTip = (msg: string) => {
+    let errorTip: HTMLElement;
+    if (inputInput.classList.contains('error')) {
+      errorTip = inputInput.querySelector(`.${bem.be('error-tip')}`)!;
+    }
+    else {
+      errorTip = document.createElement('span');
+      errorTip.classList.add(bem.be('error-tip'));
+      inputInput.appendChild(errorTip);
+    }
+
+    errorTip.textContent = msg;
+    inputInput.classList.add('error');
+
+    const removeError = () => {
+      inputInput.classList.remove('error');
+      errorTip.remove();
+    };
+    return { removeError };
+  };
+
+  return { item: inputItem, input, errorTip };
+}

package/src/utils/components/table/creator.ts

@@ -1,89 +1,89 @@
-import type { TableCreatorTextOptions } from '../../types';
-import { createBEM } from '../../bem';
-import { createButton } from '../button';
-import { createDialog } from '../dialog';
-import { createInputItem } from '../input';
-
-interface TableCreatorOptions extends Omit<TableCreatorTextOptions, 'customBtnText'> {
-  row: number;
-  col: number;
-}
-export async function showTableCreator(options: Partial<TableCreatorOptions> = {}) {
-  const bem = createBEM('creator');
-  const box = document.createElement('div');
-  box.classList.add(bem.b());
-  const inputContent = document.createElement('div');
-  inputContent.classList.add(bem.be('input'));
-
-  const {
-    item: rowItem,
-    input: rowInput,
-    errorTip: rowErrorTip,
-  } = createInputItem(options.rowText || 'Row', { type: 'number', value: String(options.row || ''), max: 99 });
-  const {
-    item: colItem,
-    input: colInput,
-    errorTip: colErrorTip,
-  } = createInputItem(options.colText || 'Column', { type: 'number', value: String(options.col || ''), max: 99 });
-
-  inputContent.appendChild(rowItem);
-  inputContent.appendChild(colItem);
-  box.appendChild(inputContent);
-
-  const control = document.createElement('div');
-  control.classList.add(bem.be('control'));
-
-  const confirmBtn = createButton({ type: 'confirm', content: options.confirmText || 'Confirm' });
-  const cancelBtn = createButton({ type: 'default', content: options.cancelText || 'Cancel' });
-
-  control.appendChild(confirmBtn);
-  control.appendChild(cancelBtn);
-  box.appendChild(control);
-
-  const validateInput = (row: number = Number(rowInput.value), col: number = Number(colInput.value)) => {
-    if (Number.isNaN(row) || row <= 0) {
-      rowErrorTip(options.notPositiveNumberError || 'Please enter a positive integer');
-      return;
-    }
-    if (Number.isNaN(col) || col <= 0) {
-      colErrorTip(options.notPositiveNumberError || 'Please enter a positive integer');
-      return;
-    }
-    return { row, col };
-  };
-  const keyboardClose = (e: KeyboardEvent) => {
-    if (e.key === 'Escape') {
-      close();
-      document.removeEventListener('keydown', keyboardClose);
-    }
-  };
-
-  return new Promise<{ row: number; col: number }>((resolve, reject) => {
-    const { close } = createDialog({ child: box, beforeClose: reject });
-    rowInput.focus();
-
-    for (const input of [rowInput, colInput]) {
-      input.addEventListener('keydown', (e) => {
-        if (e.key === 'Enter') {
-          const result = validateInput();
-          if (result) {
-            resolve(result);
-            close();
-          }
-        }
-      });
-    }
-    confirmBtn.addEventListener('click', async () => {
-      const result = validateInput();
-      if (result) {
-        resolve(result);
-        close();
-      }
-    });
-    document.addEventListener('keydown', keyboardClose);
-    cancelBtn.addEventListener('click', close);
-  })
-    .finally(() => {
-      document.removeEventListener('keydown', keyboardClose);
-    });
-}
+import type { TableCreatorTextOptions } from '../../types';
+import { createBEM } from '../../bem';
+import { createButton } from '../button';
+import { createDialog } from '../dialog';
+import { createInputItem } from '../input';
+
+interface TableCreatorOptions extends Omit<TableCreatorTextOptions, 'customBtnText'> {
+  row: number;
+  col: number;
+}
+export async function showTableCreator(options: Partial<TableCreatorOptions> = {}) {
+  const bem = createBEM('creator');
+  const box = document.createElement('div');
+  box.classList.add(bem.b());
+  const inputContent = document.createElement('div');
+  inputContent.classList.add(bem.be('input'));
+
+  const {
+    item: rowItem,
+    input: rowInput,
+    errorTip: rowErrorTip,
+  } = createInputItem(options.rowText || 'Row', { type: 'number', value: String(options.row || ''), max: 99 });
+  const {
+    item: colItem,
+    input: colInput,
+    errorTip: colErrorTip,
+  } = createInputItem(options.colText || 'Column', { type: 'number', value: String(options.col || ''), max: 99 });
+
+  inputContent.appendChild(rowItem);
+  inputContent.appendChild(colItem);
+  box.appendChild(inputContent);
+
+  const control = document.createElement('div');
+  control.classList.add(bem.be('control'));
+
+  const confirmBtn = createButton({ type: 'confirm', content: options.confirmText || 'Confirm' });
+  const cancelBtn = createButton({ type: 'default', content: options.cancelText || 'Cancel' });
+
+  control.appendChild(confirmBtn);
+  control.appendChild(cancelBtn);
+  box.appendChild(control);
+
+  const validateInput = (row: number = Number(rowInput.value), col: number = Number(colInput.value)) => {
+    if (Number.isNaN(row) || row <= 0) {
+      rowErrorTip(options.notPositiveNumberError || 'Please enter a positive integer');
+      return;
+    }
+    if (Number.isNaN(col) || col <= 0) {
+      colErrorTip(options.notPositiveNumberError || 'Please enter a positive integer');
+      return;
+    }
+    return { row, col };
+  };
+  const keyboardClose = (e: KeyboardEvent) => {
+    if (e.key === 'Escape') {
+      close();
+      document.removeEventListener('keydown', keyboardClose);
+    }
+  };
+
+  return new Promise<{ row: number; col: number }>((resolve, reject) => {
+    const { close } = createDialog({ child: box, beforeClose: reject });
+    rowInput.focus();
+
+    for (const input of [rowInput, colInput]) {
+      input.addEventListener('keydown', (e) => {
+        if (e.key === 'Enter') {
+          const result = validateInput();
+          if (result) {
+            resolve(result);
+            close();
+          }
+        }
+      });
+    }
+    confirmBtn.addEventListener('click', () => {
+      const result = validateInput();
+      if (result) {
+        resolve(result);
+        close();
+      }
+    });
+    document.addEventListener('keydown', keyboardClose);
+    cancelBtn.addEventListener('click', close);
+  })
+    .finally(() => {
+      document.removeEventListener('keydown', keyboardClose);
+    });
+}

package/src/utils/components/table/index.ts

@@ -1,2 +1,2 @@
-export * from './creator';
-export * from './select-box';
+export * from './creator';
+export * from './select-box';

package/src/utils/components/table/select-box.ts

@@ -1,78 +1,78 @@
-import type { TableCreatorTextOptions } from '../../types';
-import { createBEM } from '../../bem';
-import { showTableCreator } from './creator';
-
-interface TableSelectOptions {
-  row: number;
-  col: number;
-  onSelect: (row: number, col: number) => void;
-  customBtn: boolean;
-  texts: Partial<TableCreatorTextOptions>;
-}
-export function createSelectBox(options: Partial<TableSelectOptions> = {}) {
-  const bem = createBEM('select-box');
-  const selectDom = document.createElement('div');
-  selectDom.classList.add(bem.b());
-
-  const selectBlock = document.createElement('div');
-  selectBlock.classList.add(bem.be('block'));
-  for (let r = 0; r < (options.row || 8); r++) {
-    for (let c = 0; c < (options.col || 8); c++) {
-      const selectItem = document.createElement('div');
-      selectItem.classList.add(bem.be('item'));
-      selectItem.dataset.row = String(r + 1);
-      selectItem.dataset.col = String(c + 1);
-      selectBlock.appendChild(selectItem);
-    }
-  }
-  const updateSelectBlockItems = () => {
-    const { row, col } = selectDom.dataset;
-    for (const item of Array.from(selectBlock.querySelectorAll('.active'))) {
-      item.classList.remove('active');
-    }
-    if (!row || !col) return;
-    const childs = Array.from(selectBlock.children) as HTMLElement[];
-    for (let i = 0; i < childs.length; i++) {
-      const { row: childRow, col: childCol } = childs[i].dataset;
-      if (childRow! > row && childCol! > col) {
-        return;
-      }
-      childs[i].classList.toggle('active', childRow! <= row && childCol! <= col);
-    }
-  };
-  selectBlock.addEventListener('mousemove', (e) => {
-    if (!e.target) return;
-    const { row, col } = (e.target as HTMLElement).dataset;
-    if (!row || !col) return;
-    selectDom.dataset.row = row;
-    selectDom.dataset.col = col;
-    updateSelectBlockItems();
-  });
-  selectBlock.addEventListener('mouseleave', () => {
-    selectDom.removeAttribute('data-row');
-    selectDom.removeAttribute('data-col');
-    updateSelectBlockItems();
-  });
-  selectBlock.addEventListener('click', () => {
-    const { row, col } = selectDom.dataset;
-    if (!row || !col) return;
-    options.onSelect && options.onSelect(Number(row), Number(col));
-  });
-  selectDom.appendChild(selectBlock);
-
-  if (options.customBtn) {
-    const texts = options.texts || {};
-    const selectCustom = document.createElement('div');
-    selectCustom.classList.add(bem.be('custom'));
-    selectCustom.textContent = texts.customBtnText || 'Custom';
-    selectCustom.addEventListener('click', async () => {
-      const res = await showTableCreator(texts);
-      if (res) {
-        options.onSelect && options.onSelect(res.row, res.col);
-      }
-    });
-    selectDom.appendChild(selectCustom);
-  }
-
-  return selectDom;
-}
+import type { TableCreatorTextOptions } from '../../types';
+import { createBEM } from '../../bem';
+import { showTableCreator } from './creator';
+
+interface TableSelectOptions {
+  row: number;
+  col: number;
+  onSelect: (row: number, col: number) => void;
+  customBtn: boolean;
+  texts: Partial<TableCreatorTextOptions>;
+}
+export function createSelectBox(options: Partial<TableSelectOptions> = {}) {
+  const bem = createBEM('select-box');
+  const selectDom = document.createElement('div');
+  selectDom.classList.add(bem.b());
+
+  const selectBlock = document.createElement('div');
+  selectBlock.classList.add(bem.be('block'));
+  for (let r = 0; r < (options.row || 8); r++) {
+    for (let c = 0; c < (options.col || 8); c++) {
+      const selectItem = document.createElement('div');
+      selectItem.classList.add(bem.be('item'));
+      selectItem.dataset.row = String(r + 1);
+      selectItem.dataset.col = String(c + 1);
+      selectBlock.appendChild(selectItem);
+    }
+  }
+  const updateSelectBlockItems = () => {
+    const { row, col } = selectDom.dataset;
+    for (const item of Array.from(selectBlock.querySelectorAll('.active'))) {
+      item.classList.remove('active');
+    }
+    if (!row || !col) return;
+    const childs = Array.from(selectBlock.children) as HTMLElement[];
+    for (const child of childs) {
+      const { row: childRow, col: childCol } = child.dataset;
+      if (childRow! > row && childCol! > col) {
+        return;
+      }
+      child.classList.toggle('active', childRow! <= row && childCol! <= col);
+    }
+  };
+  selectBlock.addEventListener('mousemove', (e) => {
+    if (!e.target) return;
+    const { row, col } = (e.target as HTMLElement).dataset;
+    if (!row || !col) return;
+    selectDom.dataset.row = row;
+    selectDom.dataset.col = col;
+    updateSelectBlockItems();
+  });
+  selectBlock.addEventListener('mouseleave', () => {
+    selectDom.removeAttribute('data-row');
+    selectDom.removeAttribute('data-col');
+    updateSelectBlockItems();
+  });
+  selectBlock.addEventListener('click', () => {
+    const { row, col } = selectDom.dataset;
+    if (!row || !col) return;
+    options.onSelect?.(Number(row), Number(col));
+  });
+  selectDom.appendChild(selectBlock);
+
+  if (options.customBtn) {
+    const texts = options.texts || {};
+    const selectCustom = document.createElement('div');
+    selectCustom.classList.add(bem.be('custom'));
+    selectCustom.textContent = texts.customBtnText || 'Custom';
+    selectCustom.addEventListener('click', async () => {
+      const res = await showTableCreator(texts);
+      if (res) {
+        options.onSelect?.(res.row, res.col);
+      }
+    });
+    selectDom.appendChild(selectCustom);
+  }
+
+  return selectDom;
+}