From a2f294953e55f62182fb848ee473f29013327247 Mon Sep 17 00:00:00 2001 From: zzxming Date: Fri, 22 Nov 2024 23:15:14 +0800 Subject: [PATCH] feat: transparent color --- docs/index.js | 40 +++++++++------------------------------ src/modules/table-menu.ts | 16 +++++++++++++--- src/style/index.less | 13 ++----------- src/utils/types.ts | 1 + 4 files changed, 25 insertions(+), 45 deletions(-) diff --git a/docs/index.js b/docs/index.js index 34c1e5f..0dbe927 100644 --- a/docs/index.js +++ b/docs/index.js @@ -83,6 +83,7 @@ const quill2 = new Quill('#editor2', { DeleteColumn: '删除当前列', DeleteTable: '删除当前表格', BackgroundColor: '设置背景颜色', + BorderColor: '设置边框颜色', }, defaultColorMap: [ [ @@ -114,6 +115,7 @@ const quill2 = new Quill('#editor2', { texts: { custom: '自定义', clear: '清除', + transparent: '透明', }, }, }, @@ -216,34 +218,10 @@ quill1.setContents([ // { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '1kibdy9zqsu', colId: '5', rowspan: 1, colspan: 1 } }, insert: '\n' }, // { insert: '\n' }, - // { insert: '\n' }, - // { insert: { 'table-up-col': { tableId: '1', colId: '1', width: 121 } } }, - // { insert: { 'table-up-col': { tableId: '1', colId: '2', width: 121 } } }, - // { insert: { 'table-up-col': { tableId: '1', colId: '3', width: 121 } } }, - // { insert: '1' }, - // { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '1', colId: '1', rowspan: 1, colspan: 1 } }, insert: '\n' }, - // { insert: '2' }, - // { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '1', colId: '2', rowspan: 1, colspan: 1 } }, insert: '\n' }, - // { insert: '3' }, - // { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '1', colId: '3', rowspan: 1, colspan: 1 } }, insert: '\n' }, - // { insert: '4' }, - // { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '2', colId: '1', rowspan: 1, colspan: 1 } }, insert: '\n' }, - // { insert: '5' }, - // { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '2', colId: '2', rowspan: 1, colspan: 1 } }, insert: '\n' }, - // { insert: '6' }, - // { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '2', colId: '3', rowspan: 1, colspan: 1 } }, insert: '\n' }, - // { insert: '7' }, - // { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '3', colId: '1', rowspan: 1, colspan: 1 } }, insert: '\n' }, - // { insert: '8' }, - // { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '3', colId: '2', rowspan: 1, colspan: 1 } }, insert: '\n' }, - // { insert: '9' }, - // { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '3', colId: '3', rowspan: 1, colspan: 1 } }, insert: '\n' }, - // { insert: '\n' }, - { insert: '\n' }, - { insert: { 'table-up-col': { tableId: '1', colId: '1', full: false, width: 121 } } }, - { insert: { 'table-up-col': { tableId: '1', colId: '2', full: false, width: 121 } } }, - { insert: { 'table-up-col': { tableId: '1', colId: '3', full: false, width: 121 } } }, + { insert: { 'table-up-col': { tableId: '1', colId: '1', width: 121 } } }, + { insert: { 'table-up-col': { tableId: '1', colId: '2', width: 121 } } }, + { insert: { 'table-up-col': { tableId: '1', colId: '3', width: 121 } } }, { insert: '1' }, { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '1', colId: '1', rowspan: 1, colspan: 1 } }, insert: '\n' }, { insert: '2' }, @@ -255,13 +233,13 @@ quill1.setContents([ { insert: '5' }, { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '2', colId: '2', rowspan: 1, colspan: 1 } }, insert: '\n' }, { insert: '6' }, - { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '2', colId: '3', rowspan: 1, colspan: 1, borderColor: 'rgb(253, 235, 255)' } }, insert: '\n' }, + { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '2', colId: '3', rowspan: 1, colspan: 1 } }, insert: '\n' }, { insert: '7' }, - { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '3', colId: '1', rowspan: 1, colspan: 1, height: '37px' } }, insert: '\n' }, + { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '3', colId: '1', rowspan: 1, colspan: 1 } }, insert: '\n' }, { insert: '8' }, - { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '3', colId: '2', rowspan: 1, colspan: 1, height: '37px' } }, insert: '\n' }, + { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '3', colId: '2', rowspan: 1, colspan: 1 } }, insert: '\n' }, { insert: '9' }, - { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '3', colId: '3', rowspan: 1, colspan: 1, height: '37px', borderColor: 'rgb(253, 235, 255)' } }, insert: '\n' }, + { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '3', colId: '3', rowspan: 1, colspan: 1 } }, insert: '\n' }, { insert: '\n' }, // { insert: '\n' }, diff --git a/src/modules/table-menu.ts b/src/modules/table-menu.ts index fc805fa..a35bf5b 100644 --- a/src/modules/table-menu.ts +++ b/src/modules/table-menu.ts @@ -186,7 +186,7 @@ export class TableMenu { } resolveOptions(options: TableMenuOptionsInput) { - return Object.assign({ + const value = Object.assign({ tipText: true, tipTexts: {}, tools: defaultTools, @@ -266,14 +266,16 @@ export class TableMenu { 'rgb(59, 21, 81)', ], ], - texts: this.resolveTexts(options.texts), }, options); + value.texts = Object.assign(this.resolveTexts(options.texts), options.texts); + return value as TableMenuOptions; }; resolveTexts(texts: Partial = {}) { return Object.assign({ custom: 'Custom', clear: 'Clear', + transparent: 'Transparent', }, texts); } @@ -353,7 +355,14 @@ export class TableMenu { Object.assign(colorMapRow.style, { marginTop: '4px', }); + const transparentColor = document.createElement('div'); + transparentColor.classList.add('table-color-transparent'); + transparentColor.textContent = this.options.texts.transparent; + transparentColor.addEventListener('click', () => { + handle(this.tableModule, this.selectedTds, 'transparent'); + }); const clearColor = document.createElement('div'); + clearColor.classList.add('table-color-clear'); clearColor.textContent = this.options.texts.clear; clearColor.addEventListener('click', () => { handle(this.tableModule, this.selectedTds, null); @@ -377,8 +386,9 @@ export class TableMenu { }, false); label.appendChild(customColor); label.appendChild(input); - clearColor.classList.add('table-color-clear'); label.classList.add('table-color-custom'); + + colorMapRow.appendChild(transparentColor); colorMapRow.appendChild(clearColor); colorMapRow.appendChild(label); colorSelectWrapper.appendChild(colorMapRow); diff --git a/src/style/index.less b/src/style/index.less index 23e7d01..792c36f 100644 --- a/src/style/index.less +++ b/src/style/index.less @@ -270,6 +270,7 @@ display: flex; align-items: center; justify-content: center; + gap: 4px; } } &-used { @@ -288,6 +289,7 @@ border: 1px solid #a3a3a3; cursor: pointer; } + &-transparent, &-clear, &-custom { display: flex; @@ -295,7 +297,6 @@ justify-content: center; flex: 1; height: 20px; - margin: 0px 4px; color: #303133; background-color: #fff; cursor: pointer; @@ -354,16 +355,6 @@ } td { border: 1px solid #a1a1aa; - border-bottom-color: transparent; - border-right-color: transparent; - &:last-child { - border-right-color: #a1a1aa; - } - } - tr:last-child { - td { - border-bottom-color: #a1a1aa; - } } } } diff --git a/src/utils/types.ts b/src/utils/types.ts index 772d4b9..d7d2e1b 100644 --- a/src/utils/types.ts +++ b/src/utils/types.ts @@ -16,6 +16,7 @@ export type Tool = ToolOption | ToolOptionBreak; export interface TableMenuTexts { custom: string; clear: string; + transparent: string; } export interface TableMenuOptions { tipText: boolean;