vxe-table 4.17.22 → 4.17.25

package/packages/toolbar/src/toolbar.ts

@@ -398,51 +398,71 @@ export default defineVxeComponent({
       const { buttons } = props
       const { connectTable } = internalData
       const $table = connectTable
+      const buttonsSlot = slots.buttons
       const buttonPrefixSlot = slots.buttonPrefix || slots['button-prefix']
       const buttonSuffixSlot = slots.buttonSuffix || slots['button-suffix']
-      const btnVNs: VxeComponentSlotType[] = []
+      const lbVNs: VxeComponentSlotType[] = []
       if (buttonPrefixSlot) {
-        btnVNs.push(...getSlotVNs(buttonPrefixSlot({ buttons: buttons || [], $grid: $xeGrid, $gantt: $xeGantt, $table: $table })))
-      }
-      if (buttons) {
-        buttons.forEach((item, index) => {
-          const { dropdowns, buttonRender } = item
-          if (item.visible !== false) {
-            const compConf = buttonRender ? renderer.get(buttonRender.name) : null
-            if (buttonRender && compConf && compConf.renderToolbarButton) {
-              const toolbarButtonClassName = compConf.toolbarButtonClassName
-              const params = { $grid: $xeGrid, $gantt: $xeGantt, $table: $table!, button: item }
-              btnVNs.push(
-                h('span', {
-                  key: `br${item.code || index}`,
-                  class: ['vxe-button--item', toolbarButtonClassName ? (XEUtils.isFunction(toolbarButtonClassName) ? toolbarButtonClassName(params) : toolbarButtonClassName) : '']
-                }, getSlotVNs(compConf.renderToolbarButton(buttonRender, params)))
-              )
-            } else {
-              if (VxeUIButtonComponent) {
+        lbVNs.push(
+          h('span', {
+            key: 'tbp',
+            class: 'vxe-button--prefix-wrapper'
+          }, getSlotVNs(buttonPrefixSlot({ buttons: buttons || [], $grid: $xeGrid, $gantt: $xeGantt, $table: $table })))
+        )
+      }
+      if (buttons || buttonsSlot) {
+        const btnVNs: VxeComponentSlotType[] = []
+        if (buttons) {
+          buttons.forEach((item, index) => {
+            const { dropdowns, buttonRender } = item
+            if (item.visible !== false) {
+              const compConf = buttonRender ? renderer.get(buttonRender.name) : null
+              if (buttonRender && compConf && compConf.renderToolbarButton) {
+                const toolbarButtonClassName = compConf.toolbarButtonClassName
+                const params = { $grid: $xeGrid, $gantt: $xeGantt, $table: $table!, button: item }
                 btnVNs.push(
-                  h(VxeUIButtonComponent, {
-                    key: `bd${item.code || index}`,
-                    ...Object.assign({}, item, {
-                      content: item.content || item.name,
-                      options: undefined
-                    }),
-                    onClick: (eventParams) => btnEvent(eventParams, item)
-                  }, dropdowns && dropdowns.length
-                    ? {
-                        dropdowns: () => renderDropdowns(item, true)
-                      }
-                    : {})
+                  h('span', {
+                    key: `br${item.code || index}`,
+                    class: ['vxe-button--item', toolbarButtonClassName ? (XEUtils.isFunction(toolbarButtonClassName) ? toolbarButtonClassName(params) : toolbarButtonClassName) : '']
+                  }, getSlotVNs(compConf.renderToolbarButton(buttonRender, params)))
                 )
+              } else {
+                if (VxeUIButtonComponent) {
+                  btnVNs.push(
+                    h(VxeUIButtonComponent, {
+                      key: `bd${item.code || index}`,
+                      ...Object.assign({}, item, {
+                        content: item.content || item.name,
+                        options: undefined
+                      }),
+                      onClick: (eventParams) => btnEvent(eventParams, item)
+                    }, dropdowns && dropdowns.length
+                      ? {
+                          dropdowns: () => renderDropdowns(item, true)
+                        }
+                      : {})
+                  )
+                }
               }
             }
-          }
-        })
+          })
+        }
+        lbVNs.push(
+          h('span', {
+            key: 'tti',
+            class: 'vxe-button--item-wrapper'
+          }, buttonsSlot ? getSlotVNs(buttonsSlot({ buttons: buttons || [], $grid: $xeGrid, $gantt: $xeGantt, $table: $table })) : btnVNs)
+        )
       }
       if (buttonSuffixSlot) {
-        btnVNs.push(...getSlotVNs(buttonSuffixSlot({ buttons: buttons || [], $grid: $xeGrid, $gantt: $xeGantt, $table: $table })))
-      }
-      return btnVNs
+        lbVNs.push(
+          h('span', {
+            key: 'tbs',
+            class: 'vxe-button--suffix-wrapper'
+          }, getSlotVNs(buttonSuffixSlot({ buttons: buttons || [], $grid: $xeGrid, $gantt: $xeGantt, $table: $table })))
+        )
+      }
+      return lbVNs
     }
 
     /**
@@ -452,52 +472,72 @@ export default defineVxeComponent({
       const { tools } = props
       const { connectTable } = internalData
       const $table = connectTable
+      const toolsSlot = slots.tools
       const toolPrefixSlot = slots.toolPrefix || slots['tool-prefix']
       const toolSuffixSlot = slots.toolSuffix || slots['tool-suffix']
-      const btnVNs: VxeComponentSlotType[] = []
+      const rtVNs: VxeComponentSlotType[] = []
       if (toolPrefixSlot) {
-        btnVNs.push(...getSlotVNs(toolPrefixSlot({ tools: tools || [], $grid: $xeGrid, $gantt: $xeGantt, $table: $table })))
-      }
-      if (tools) {
-        tools.forEach((item, tIndex) => {
-          const { dropdowns, toolRender } = item
-          if (item.visible !== false) {
-            const rdName = toolRender ? toolRender.name : null
-            const compConf = toolRender ? renderer.get(rdName) : null
-            if (toolRender && compConf && compConf.renderToolbarTool) {
-              const toolbarToolClassName = compConf.toolbarToolClassName
-              const params = { $grid: $xeGrid, $gantt: $xeGantt, $table: $table!, tool: item }
-              btnVNs.push(
-                h('span', {
-                  key: rdName as string,
-                  class: ['vxe-tool--item', toolbarToolClassName ? (XEUtils.isFunction(toolbarToolClassName) ? toolbarToolClassName(params) : toolbarToolClassName) : '']
-                }, getSlotVNs(compConf.renderToolbarTool(toolRender, params)))
-              )
-            } else {
-              if (VxeUIButtonComponent) {
+        rtVNs.push(
+          h('span', {
+            key: 'ttp',
+            class: 'vxe-tool--prefix-wrapper'
+          }, getSlotVNs(toolPrefixSlot({ tools: tools || [], $grid: $xeGrid, $gantt: $xeGantt, $table: $table })))
+        )
+      }
+      if (tools || toolsSlot) {
+        const btnVNs: VxeComponentSlotType[] = []
+        if (tools) {
+          tools.forEach((item, tIndex) => {
+            const { dropdowns, toolRender } = item
+            if (item.visible !== false) {
+              const rdName = toolRender ? toolRender.name : null
+              const compConf = toolRender ? renderer.get(rdName) : null
+              if (toolRender && compConf && compConf.renderToolbarTool) {
+                const toolbarToolClassName = compConf.toolbarToolClassName
+                const params = { $grid: $xeGrid, $gantt: $xeGantt, $table: $table!, tool: item }
                 btnVNs.push(
-                  h(VxeUIButtonComponent, {
-                    key: tIndex,
-                    ...Object.assign({}, item, {
-                      content: item.content || item.name,
-                      options: undefined
-                    }),
-                    onClick: (eventParams) => tolEvent(eventParams, item)
-                  }, dropdowns && dropdowns.length
-                    ? {
-                        dropdowns: () => renderDropdowns(item, false)
-                      }
-                    : {})
+                  h('span', {
+                    key: rdName as string,
+                    class: ['vxe-tool--item', toolbarToolClassName ? (XEUtils.isFunction(toolbarToolClassName) ? toolbarToolClassName(params) : toolbarToolClassName) : '']
+                  }, getSlotVNs(compConf.renderToolbarTool(toolRender, params)))
                 )
+              } else {
+                if (VxeUIButtonComponent) {
+                  btnVNs.push(
+                    h(VxeUIButtonComponent, {
+                      key: tIndex,
+                      ...Object.assign({}, item, {
+                        content: item.content || item.name,
+                        options: undefined
+                      }),
+                      onClick: (eventParams) => tolEvent(eventParams, item)
+                    }, dropdowns && dropdowns.length
+                      ? {
+                          dropdowns: () => renderDropdowns(item, false)
+                        }
+                      : {})
+                  )
+                }
               }
             }
-          }
-        })
+          })
+        }
+        rtVNs.push(
+          h('span', {
+            key: 'tti',
+            class: 'vxe-tool--item-wrapper'
+          }, toolsSlot ? getSlotVNs(toolsSlot({ tools: tools || [], $grid: $xeGrid, $gantt: $xeGantt, $table: $table })) : btnVNs)
+        )
       }
       if (toolSuffixSlot) {
-        btnVNs.push(...getSlotVNs(toolSuffixSlot({ tools: tools || [], $grid: $xeGrid, $gantt: $xeGantt, $table: $table })))
-      }
-      return btnVNs
+        rtVNs.push(
+          h('span', {
+            key: 'tts',
+            class: 'vxe-tool--suffix-wrapper'
+          }, getSlotVNs(toolSuffixSlot({ tools: tools || [], $grid: $xeGrid, $gantt: $xeGantt, $table: $table })))
+        )
+      }
+      return rtVNs
     }
 
     const renderToolImport = () => {
@@ -597,11 +637,7 @@ export default defineVxeComponent({
 
     const renderVN = () => {
       const { perfect, loading, refresh, zoom, custom, className } = props
-      const { connectTable } = internalData
       const vSize = computeSize.value
-      const toolsSlot = slots.tools
-      const buttonsSlot = slots.buttons
-      const $table = connectTable
 
       return h('div', {
         ref: refElem,
@@ -613,10 +649,10 @@ export default defineVxeComponent({
       }, [
         h('div', {
           class: 'vxe-buttons--wrapper'
-        }, buttonsSlot ? buttonsSlot({ $grid: $xeGrid, $gantt: $xeGantt, $table: $table }) : renderLeftBtns()),
+        }, renderLeftBtns()),
         h('div', {
           class: 'vxe-tools--wrapper'
-        }, toolsSlot ? toolsSlot({ $grid: $xeGrid, $gantt: $xeGantt, $table: $table }) : renderRightTools()),
+        }, renderRightTools()),
         h('div', {
           class: 'vxe-tools--operate'
         }, [

package/styles/components/toolbar.scss

@@ -68,10 +68,6 @@
     display: flex;
     align-items: center;
   }
-  .vxe-buttons--wrapper,
-  .vxe-tools--wrapper {
-    flex-wrap: wrap;
-  }
   .vxe-tools--operate {
     flex-shrink: 0;
   }
@@ -84,6 +80,17 @@
       }
     }
   }
+  .vxe-button--item-wrapper,
+  .vxe-tool--item-wrapper,
+  .vxe-button--prefix-wrapper,
+  .vxe-button--suffix-wrapper,
+  .vxe-tool--prefix-wrapper,
+  .vxe-tool--suffix-wrapper {
+    display: flex;
+    align-items: center;
+    flex-shrink: 0;
+    flex-wrap: wrap;
+  }
 }
 
 .vxe-toolbar {