bug-fiz\\ finalização pickr

src/editor/ui/Dropdown.ts

@@ -12,6 +12,7 @@ export interface DropdownConfig {
     [key: string]: (obj: DropDownEventProps) => void
   }
   classes: string[]
+  fecha: boolean
 }
 
 export class Dropdown implements Tool {
@@ -21,8 +22,10 @@ export class Dropdown implements Tool {
   dropdownContent!: HTMLElement
   config: DropdownConfig = {
     classes: [],
-    events: {}
+    events: {},
+    fecha: true
   }
+
   button!: Button
   editor: ExitusEditor
   parentToolbar!: Toolbar
@@ -72,16 +75,18 @@ export class Dropdown implements Tool {
   render() {
     this.button.bind('click', ({ editor, event, button }) => {
       this.config.events['open']({ editor, event, button, dropdown: this })
-
-      const close = (event: Event) => {
-        const target = event.target as HTMLElement
-        if (!target.closest('.ex-dropdown')) {
-          this.off()
-          window.removeEventListener('click', close)
+      if (this.config.fecha) {
+        const close = (event: Event) => {
+          const target = event.target as HTMLElement
+          if (!target.closest('.ex-dropdown')) {
+            this.off()
+            window.removeEventListener('click', close)
+            console.log('dsfgfds')
+          }
         }
-      }
 
-      window.addEventListener('click', close)
+        window.addEventListener('click', close)
+      }
     })
 
     this.dropdownContentContainer.appendChild(this.dropdownContent)

src/extensions/table/TableView.ts

@@ -26,6 +26,12 @@ function clickHandler(tableView: TableView) {
 
     function clickOutside(event: Event) {
       const target = event.target as HTMLElement
+
+      if (target.closest('.pcr-app') !== null) {
+        console.log(target.closest('.pcr-app'))
+        return
+      }
+
       if (target.closest('.tableWrapper') == null) {
         tableView.balloon.hide()
         tableView.tableWrapper.classList.remove('ex-selected')
@@ -41,13 +47,10 @@ function clickCellHandler(tableView: TableView) {
   function clickOutside(event: Event) {
     const target = event.target as HTMLElement
 
-    // Verifica se o clique foi dentro do menu do Pickr
     if (target.closest('.pcr-app') !== null) {
-      // O clique foi dentro do Pickr, então não faz nada
       return
     }
 
-    // Verifica se o clique foi fora do menu balloon
     if (target.closest('.balloon-menu') == null) {
       tableView.tableCellBalloon.off()
       window.removeEventListener('click', clickOutside)

src/extensions/table/itensModalTable.ts

@@ -61,7 +61,8 @@ export function criaTabelaModal(style: any) {
       events: {
         open: showDropdown
       },
-      classes: ['ex-dropdown-balloonModal']
+      classes: ['ex-dropdown-balloonModal'],
+      fecha: false
     })
     dropdown.setDropDownContent(new ItensModalTable(editor, style).render())
     return dropdown
@@ -84,7 +85,6 @@ export class ItensModalTable {
 
     this.selectInput = document.createElement('select')
     this.selectInput.style.width = '80px'
-    this.selectInput.style.marginRight = '14.4px'
 
     const borderStyles = {
       'sem borda': 'none',
@@ -105,7 +105,7 @@ export class ItensModalTable {
       this.selectInput.appendChild(option)
     })
 
-    const [size = '', border = 'none', color = ''] = (this.style.border ?? '').split(' ')
+    const [size = '', border = 'none'] = (this.style.border ?? '').split(' ')
 
     this.selectInput.value = border
 
@@ -148,6 +148,7 @@ export class ItensModalTable {
     })
 
     this.selectInput.addEventListener('change', () => {
+      this.toggleBorderInputs()
       this.aplicarEstiloBorda()
     })
 
@@ -162,7 +163,7 @@ export class ItensModalTable {
     const borderColorElement = document.createElement('div')
     borderColorElement.className = 'color-picker-border'
 
-    bloco1.append(bordaLabel, this.selectInput, borderColorElement, this.larguraBloco1)
+    bloco1.append(bordaLabel, this.selectInput, this.larguraBloco1, borderColorElement)
     dropdownContent.appendChild(bloco1)
 
     const corFundoLabel = document.createElement('strong')
@@ -182,6 +183,7 @@ export class ItensModalTable {
     this.cellBorderColorPickr = createPickrInstance('.color-picker-border', () => {
       this.cellBorderColorPickr?.hide()
     })
+    this.cellBorderColorPickr.disable()
 
     this.cellBackgroundColorPickr = createPickrInstance('.color-picker-background', () => {
       this.cellBackgroundColorPickr?.hide()
@@ -276,6 +278,7 @@ export class ItensModalTable {
       this.aplicarEstiloBorda(borderColor)
       this.aplicarEstiloCelulas(backgroundColor)
       this.aplicarDimensoesTabela()
+      fecharDropdownsAbertos()
     })
     botaoConfirma.className = 'ex-botaoSalvar'
     botaoConfirma.appendChild(iconConfirma)
@@ -312,6 +315,14 @@ export class ItensModalTable {
     }
   }
 
+  private toggleBorderInputs() {
+    const isBorderNone = this.selectInput.value === 'none'
+    this.larguraBloco1.disabled = isBorderNone
+    this.larguraBloco1.style.cursor = isBorderNone ? 'not-allowed' : 'default'
+    this.cellBorderColorPickr.setColor(isBorderNone ? 'rgba(0, 0, 0, 0)' : this.cellBorderColorPickr.getColor().toRGBA().toString())
+    this.cellBorderColorPickr?.enable()
+  }
+
   private aplicarEstiloCelulas(cor: string = '') {
     if (cor) {
       this.editor.commands.setTableStyle({

src/extensions/table/table.ts

@@ -13,10 +13,10 @@ import { TableView } from './TableView'
 function onSelectTableRowColumn(event): EventListener {
   const onColumn = parseInt(event.target.getAttribute('data-column'))
   const onRow = parseInt(event.target.getAttribute('data-row'))
-  const indicator = document.querySelector('.ex-indicator')
-  if (indicator) {
+  const indicators = document.querySelectorAll('.ex-indicator')
+  indicators.forEach(indicator => {
     indicator.textContent = `${onRow} × ${onColumn}`
-  }
+  })
 
   const buttons = event.target.parentNode.querySelectorAll('button') as HTMLCollectionOf<HTMLButtonElement>
 

src/public/style.css

@@ -368,7 +368,7 @@
     flex-direction: row;
     flex-wrap: nowrap;
     z-index: 3 !important;
-    width: 360px;
+    width: 22em;
   }
 
   .ex-dropdown-baloon {
@@ -791,7 +791,9 @@ display: none;
 
 
 .ex-bolinha-baixo {
-  transform: translate(543px,calc(-50% - 0.5px));
+  bottom: 0;
+  transform: translate(0,calc(50% - 1.5px));
+  left: 90%;
   margin: 0 0;
 }