quill-table-up 2.0.2 → 2.0.3

package/src/utils/components/color-picker.ts

@@ -0,0 +1,236 @@
+import type { HSB } from '../color';
+import { createBEM } from '../bem';
+import { HEXtoRGB, HSBtoHEX, HSBtoRGB, RGBtoHEX, RGBtoHSB, validateHSB } from '../color';
+
+interface ColorPickerOptions {
+  color: string;
+  onChange: (color: string) => void;
+};
+export const createColorPicker = (options: Partial<ColorPickerOptions> = {}) => {
+  const contentWidth = 230;
+  const contentHeight = 150;
+  const handleSizeSec = 10;
+
+  let hsbValue: HSB = RGBtoHSB(HEXtoRGB(options.color || '#ff0000'));
+  const bem = createBEM('color-picker');
+  const root = document.createElement('div');
+  root.classList.add(bem.b());
+
+  const content = document.createElement('div');
+  content.classList.add(bem.be('content'));
+
+  const colorSelector = document.createElement('div');
+  colorSelector.classList.add(bem.be('selector'));
+
+  const colorBackground = document.createElement('div');
+  colorBackground.classList.add(bem.be('background'));
+  colorSelector.appendChild(colorBackground);
+
+  const colorHandle = document.createElement('div');
+  colorHandle.classList.add(bem.be('background-handle'));
+  colorBackground.appendChild(colorHandle);
+
+  const colorAlpha = document.createElement('div');
+  colorAlpha.classList.add(bem.be('alpha'));
+
+  const alphaBg = document.createElement('div');
+  alphaBg.classList.add(bem.be('alpha-bg'));
+
+  const alphaHandle = document.createElement('div');
+  alphaHandle.classList.add(bem.be('alpha-handle'));
+
+  colorAlpha.appendChild(alphaBg);
+  colorAlpha.appendChild(alphaHandle);
+
+  const colorHue = document.createElement('div');
+  colorHue.classList.add(bem.be('hue'));
+
+  const colorHueHandle = document.createElement('div');
+  colorHueHandle.classList.add(bem.be('hue-handle'));
+  colorHue.appendChild(colorHueHandle);
+
+  const action = document.createElement('div');
+  action.classList.add(bem.be('action'));
+
+  const [colorRInput, colorGInput, colorBInput, colorAInput] = (['r', 'g', 'b', 'a'] as const).map((key) => {
+    const item = document.createElement('div');
+    item.classList.add(bem.be('action-item'), key);
+
+    const label = document.createElement('label');
+    label.textContent = key.toUpperCase();
+
+    const colorInput = document.createElement('input');
+    colorInput.classList.add(bem.be('input'));
+
+    colorInput.addEventListener('input', () => {
+      colorInput.value = colorInput.value.replaceAll(/[^0-9]/g, '');
+    });
+    colorInput.addEventListener('change', () => {
+      let value = Math.round(Number(colorInput.value));
+      if (key === 'a') {
+        value = value / 100;
+      }
+      const result = validateHSB(RGBtoHSB(Object.assign({}, HSBtoRGB(hsbValue), { [key]: value })));
+      updateValue(result);
+      updateUI();
+    });
+
+    item.appendChild(label);
+    item.appendChild(colorInput);
+    action.appendChild(item);
+
+    return colorInput;
+  });
+
+  content.appendChild(colorHue);
+  content.appendChild(colorSelector);
+  content.appendChild(colorAlpha);
+  root.appendChild(content);
+  root.appendChild(action);
+
+  let colorDragging = false;
+  let hueDragging = false;
+  let alphaDragging = false;
+
+  function updateInput() {
+    const hex = HSBtoHEX(hsbValue);
+    for (const [i, input] of [colorRInput, colorGInput, colorBInput].entries()) {
+      input.value = String(Number.parseInt(hex[i * 2] + hex[i * 2 + 1], 16));
+    }
+    colorAInput.value = String((hsbValue.a * 100).toFixed(0));
+  }
+  function updateColorHandle() {
+    Object.assign(colorHandle.style, {
+      left: `${Math.floor((contentWidth * hsbValue.s) / 100)}px`,
+      top: `${Math.floor((contentHeight * (100 - hsbValue.b)) / 100)}px`,
+    });
+  }
+  function updateColorSelector() {
+    colorSelector.style.backgroundColor = `#${RGBtoHEX(HSBtoRGB({
+      h: hsbValue.h,
+      s: 100,
+      b: 100,
+      a: 1,
+    }))}`;
+  }
+  function updateHue() {
+    colorHueHandle.style.top = `${Math.floor(contentHeight - (contentHeight * hsbValue.h) / 360)}px`;
+  }
+  function updateAlphaHandle() {
+    alphaHandle.style.left = `${hsbValue.a * 100}%`;
+  }
+  function updateAlphaBg() {
+    const { r, g, b } = HSBtoRGB(hsbValue);
+    alphaBg.style.background = `linear-gradient(to right, rgba(${r}, ${g}, ${b}, 0) 0%, rgba(${r}, ${g}, ${b}, 1) 100%)`;
+  }
+  function updateUI() {
+    updateColorHandle();
+    updateColorSelector();
+    updateHue();
+    updateAlphaHandle();
+    updateAlphaBg();
+    updateInput();
+  }
+  function updateValue(value: Partial<HSB>) {
+    hsbValue = validateHSB(Object.assign({}, hsbValue, value));
+
+    updateInput();
+
+    if (options.onChange) {
+      options.onChange(`#${HSBtoHEX(hsbValue)}`);
+    }
+  }
+
+  function pickColor(event: MouseEvent) {
+    const rect = colorSelector.getBoundingClientRect();
+    const top = rect.top + (window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0);
+    const left = rect.left + document.body.scrollLeft;
+    const saturation = Math.floor((100 * Math.max(0, Math.min(contentWidth, event.pageX - left))) / contentWidth);
+    const brightness = Math.floor((100 * (contentHeight - Math.max(0, Math.min(contentHeight, event.pageY - top)))) / contentHeight);
+
+    updateValue({
+      s: saturation,
+      b: brightness,
+    });
+    updateUI();
+  }
+  function pickHue(event: MouseEvent) {
+    const top = colorHue.getBoundingClientRect().top + (window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0);
+
+    updateValue({
+      h: Math.floor((360 * (contentHeight - Math.max(0, Math.min(contentHeight, event.pageY - top)))) / contentHeight),
+    });
+    updateUI();
+  }
+  function pickAlpha(event: MouseEvent) {
+    const { pageX } = event;
+    const rect = colorAlpha.getBoundingClientRect();
+    let left = pageX - rect.left;
+    left = Math.max(handleSizeSec / 2, left);
+    left = Math.min(left, rect.width - handleSizeSec / 2);
+
+    updateValue({
+      a: Math.round(((left - 10 / 2) / (rect.width - 10)) * 100) / 100,
+    });
+    updateUI();
+  }
+
+  function onDrag(event: MouseEvent) {
+    if (colorDragging) {
+      event.preventDefault();
+      pickColor(event);
+    }
+
+    if (hueDragging) {
+      event.preventDefault();
+      pickHue(event);
+    }
+
+    if (alphaDragging) {
+      event.preventDefault();
+      pickAlpha(event);
+    }
+  }
+
+  function onColorSelectorDragEnd() {
+    document.removeEventListener('mousemove', onDrag);
+    document.removeEventListener('mouseup', onColorSelectorDragEnd);
+    colorDragging = false;
+  }
+  function onColorSelectorMousedown(e: MouseEvent) {
+    document.addEventListener('mousemove', onDrag);
+    document.addEventListener('mouseup', onColorSelectorDragEnd);
+    colorDragging = true;
+    pickColor(e);
+  }
+  colorSelector.addEventListener('mousedown', onColorSelectorMousedown);
+
+  function onColorHueDragEnd() {
+    document.removeEventListener('mousemove', onDrag);
+    document.removeEventListener('mouseup', onColorHueDragEnd);
+    hueDragging = false;
+  }
+  function onColorHueMousedown(event: MouseEvent) {
+    document.addEventListener('mousemove', onDrag);
+    document.addEventListener('mouseup', onColorHueDragEnd);
+    hueDragging = true;
+    pickHue(event);
+  }
+  colorHue.addEventListener('mousedown', onColorHueMousedown);
+
+  function onColorAlphaDragEnd() {
+    document.removeEventListener('mousemove', onDrag);
+    document.removeEventListener('mouseup', onColorAlphaDragEnd);
+    alphaDragging = false;
+  }
+  function onColorAlphaMousedown(event: MouseEvent) {
+    document.addEventListener('mousemove', onDrag);
+    document.addEventListener('mouseup', onColorAlphaDragEnd);
+    alphaDragging = true;
+    pickAlpha(event);
+  }
+  colorAlpha.addEventListener('mousedown', onColorAlphaMousedown);
+
+  updateUI();
+  return root;
+};

package/src/utils/components/dialog.ts

@@ -0,0 +1,41 @@
+import { createBEM } from '../bem';
+
+interface DialogOptions {
+  child?: HTMLElement;
+  target?: HTMLElement;
+  beforeClose?: () => void;
+}
+let zindex = 8000;
+export const createDialog = ({ child, target = document.body, beforeClose = () => {} }: DialogOptions = {}) => {
+  const bem = createBEM('dialog');
+  const appendTo = target;
+  const dialog = document.createElement('div');
+  dialog.classList.add(bem.b());
+  dialog.style.zIndex = String(zindex);
+  const overlay = document.createElement('div');
+  overlay.classList.add(bem.be('overlay'));
+  dialog.appendChild(overlay);
+  if (child) {
+    const content = document.createElement('div');
+    content.classList.add(bem.be('content'));
+    content.appendChild(child);
+    overlay.appendChild(content);
+    content.addEventListener('click', (e) => {
+      e.stopPropagation();
+    });
+  }
+
+  const originOverflow = getComputedStyle(appendTo).overflow;
+  appendTo.style.overflow = 'hidden';
+
+  appendTo.appendChild(dialog);
+  const close = () => {
+    beforeClose();
+    dialog.remove();
+    appendTo.style.overflow = originOverflow;
+  };
+  dialog.addEventListener('click', close);
+  zindex += 1;
+
+  return { dialog, close };
+};

package/src/utils/components/index.ts

@@ -0,0 +1,6 @@
+export * from './button';
+export * from './color-picker';
+export * from './dialog';
+export * from './input';
+export * from './table';
+export * from './tooltip';

package/src/utils/components/input.ts

@@ -0,0 +1,74 @@
+import { createBEM } from '../bem';
+
+interface InputOptions {
+  type?: string;
+  value?: string;
+  max?: number;
+  min?: number;
+  [key: string]: any;
+};
+export const 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

@@ -0,0 +1,86 @@
+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 const showTableCreator = async (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);
+  });
+};

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

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

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

@@ -0,0 +1,83 @@
+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 const 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;
+      }
+      if (childRow! <= row && childCol! <= col) {
+        childs[i].classList.add('active');
+      }
+      else {
+        childs[i].classList.remove('active');
+      }
+    }
+  };
+  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;
+};