feat: add insert full table switch (#53)

zzxming · Jan 1, 2025 · 047110f · 047110f
1 parent 80d7447
commit 047110f
Show file tree

Hide file tree

Showing 5 changed files with 77 additions and 2 deletions.
diff --git a/docs/index.js b/docs/index.js
@@ -97,6 +97,7 @@ const quill1 = new Quill('#editor1', {
         },
       },
       texts: {
+        fullCheckboxText: '插入满宽度表格',
         customBtnText: '自定义行列数',
         confirmText: '确认',
         cancelText: '取消',

diff --git a/src/index.ts b/src/index.ts
@@ -345,6 +345,7 @@ export class TableUp {
       customBtn: false,
       texts: this.resolveTexts(options.texts || {}),
       full: false,
+      fullSwtich: true,
       icon: icons.table,
       selectionOptions: {},
       alignOptions: {},
@@ -356,6 +357,7 @@ export class TableUp {
 
   resolveTexts(options: Partial<TableTextOptions>) {
     return Object.assign({
+      fullCheckboxText: 'Insert full width table',
       customBtnText: 'Custom',
       confirmText: 'Confirm',
       cancelText: 'Cancel',
@@ -573,6 +575,25 @@ export class TableUp {
     dom.classList.add('ql-custom-select');
     this.selector = await customSelect(this, picker);
     dom.appendChild(this.selector);
+    if (this.options.fullSwtich) {
+      const bem = createBEM('creator');
+      const isFulllLabel = document.createElement('label');
+      isFulllLabel.classList.add(bem.be('checkbox'));
+      const isFullCheckbox = document.createElement('input');
+      isFullCheckbox.type = 'checkbox';
+      isFullCheckbox.checked = this.options.full;
+      isFullCheckbox.addEventListener('change', () => {
+        this.options.full = isFullCheckbox.checked;
+      });
+      const mark = document.createElement('div');
+      mark.classList.add(bem.be('mark'));
+      const isFullCheckboxText = document.createElement('span');
+      isFullCheckboxText.textContent = this.options.texts.fullCheckboxText;
+      isFulllLabel.appendChild(isFullCheckbox);
+      isFulllLabel.appendChild(mark);
+      isFulllLabel.appendChild(isFullCheckboxText);
+      dom.appendChild(isFulllLabel);
+    }
     picker.options.appendChild(dom);
   };
 

diff --git a/src/style/table-creator.less b/src/style/table-creator.less
@@ -3,7 +3,7 @@
 @import './input.less';
 @import './select-box.less';
 
-.@{namespace}-table-creator {
+.@{namespace}-creator {
   padding: 24px;
   &__input {
     display: flex;
@@ -14,4 +14,55 @@
     margin-top: 16px;
     text-align: right;
   }
+  &__checkbox {
+    .setCssVar(active-color, #506eec);
+    .setCssVar(mark-bg-color, #fff);
+    .setCssVar(mark-border-color, #212121);
+
+    display: flex;
+    align-items: center;
+    margin-top: 4px;
+    position: relative;
+    cursor: pointer;
+    font-size: 12px;
+    user-select: none;
+    input {
+      position: absolute;
+      opacity: 0;
+      cursor: pointer;
+      height: 0;
+      width: 0;
+      &:checked ~ .@{namespace}-creator__mark {
+        .setCssVar(mark-bg-color, .getCssVar(active-color) []);
+        .setCssVar(mark-border-color, .getCssVar(active-color) []);
+
+        &:after {
+          display: block;
+        }
+      }
+    }
+  }
+  &__mark {
+    position: relative;
+    top: 0;
+    left: 0;
+    height: 18px;
+    width: 18px;
+    margin-right: 4px;
+    background: .getCssVar(mark-bg-color) [];
+    border: 1px solid .getCssVar(mark-border-color) [];
+    border-radius: 5px;
+    &::after {
+      content: '';
+      position: absolute;
+      display: none;
+      left: 5px;
+      top: 2px;
+      width: 5px;
+      height: 9px;
+      border: solid #fff;
+      border-width: 0 2px 2px 0;
+      transform: rotate(45deg);
+    }
+  }
 }
diff --git a/src/utils/components/table/creator.ts b/src/utils/components/table/creator.ts
@@ -9,7 +9,7 @@ interface TableCreatorOptions extends Omit<TableCreatorTextOptions, 'customBtnTe
   col: number;
 }
 export const showTableCreator = async (options: Partial<TableCreatorOptions> = {}) => {
-  const bem = createBEM('table-creator');
+  const bem = createBEM('creator');
   const box = document.createElement('div');
   box.classList.add(bem.b());
   const inputContent = document.createElement('div');

diff --git a/src/utils/types.ts b/src/utils/types.ts
@@ -36,6 +36,7 @@ export interface TableResizeScaleOptions {
   blockSize: number;
 }
 export interface TableCreatorTextOptions {
+  fullCheckboxText: string;
   customBtnText: string;
   confirmText: string;
   cancelText: string;
@@ -53,6 +54,7 @@ export interface TableTextOptions extends TableCreatorTextOptions {
 export interface TableUpOptions {
   customSelect?: (tableModule: TableUp, picker: QuillThemePicker) => Promise<HTMLElement> | HTMLElement;
   full: boolean;
+  fullSwtich: boolean;
   customBtn: boolean;
   texts: TableTextOptions;
   icon: string;