feat: extract SelectAll component

packages/common/component/PluginBlockList.vue

@@ -1,6 +1,14 @@
 <template>
   <div v-if="blockStyle === BlockStyles.Mini" class="header">
-    <div class="col-checkbox"></div>
+    <div class="col-checkbox" v-if="showCheckbox">
+      <select-all
+        :items="data"
+        :selected="checked"
+        :hidden-label="true"
+        @select-all="(items) => handleSelectAll(items)"
+        @deselect-all="handleDeselectAll"
+      ></select-all>
+    </div>
     <div class="col-name">区块名称</div>
     <div class="col-time">创建时间</div>
     <div class="col-created-by">创建人</div>
@@ -143,6 +151,7 @@ import { Progress, Tooltip } from '@opentiny/vue'
 import PluginBlockItemImg from './PluginBlockItemImg.vue'
 import SearchEmpty from './SearchEmpty.vue'
 import SvgButton from './SvgButton.vue'
+import SelectAll from './SelectAll.vue'
 
 const BlockStyles = {
   Default: 'default',
@@ -160,7 +169,8 @@ export default {
     TinyTooltip: Tooltip,
     PluginBlockItemImg,
     SvgButton,
-    SearchEmpty
+    SearchEmpty,
+    SelectAll
   },
   props: {
     data: {
@@ -234,7 +244,7 @@ export default {
       default: 2
     }
   },
-  emits: ['click', 'iconClick', 'add', 'deleteBlock', 'openVersionPanel', 'editBlock'],
+  emits: ['click', 'iconClick', 'add', 'deleteBlock', 'openVersionPanel', 'editBlock', 'checkAll', 'cancelCheckAll'],
   setup(props, { emit }) {
     const panelState = inject('panelState', {})
     const blockUsers = inject('blockUsers')
@@ -361,6 +371,14 @@ export default {
       }
     )
 
+    const handleSelectAll = (items) => {
+      emit('checkAll', items)
+    }
+
+    const handleDeselectAll = () => {
+      emit('cancelCheckAll')
+    }
+
     return {
       BlockStyles,
       isShortcutPanel: panelState.isShortcutPanel,
@@ -379,7 +397,9 @@ export default {
       handleSettingMouseOver,
       handleShowVersionMenu,
       editBlock,
-      format
+      format,
+      handleSelectAll,
+      handleDeselectAll
     }
   }
 }
@@ -446,6 +466,11 @@ export default {
   }
 }
 
+.col-checkbox {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
 .col-checkbox,
 .block-item-small-list:deep(.table-selection) {
   width: 40px;

packages/common/component/SelectAll.vue

@@ -0,0 +1,42 @@
+<template>
+  <tiny-checkbox class="block-select-all" :indeterminate="isIndeterminate" v-model="selectedAll">
+    {{ hiddenLabel ? '' : '全选' }}
+  </tiny-checkbox>
+</template>
+
+<script setup lang="ts">
+import { Checkbox as TinyCheckbox } from '@opentiny/vue'
+import { computed, defineEmits, defineProps } from 'vue'
+
+const props = defineProps({
+  items: {
+    type: Array,
+    default: () => []
+  },
+  selected: {
+    type: Array,
+    default: () => []
+  },
+  hiddenLabel: {
+    type: Boolean,
+    default: false
+  }
+})
+
+const emit = defineEmits(['selectAll', 'deselectAll'])
+
+const selectedAll = computed({
+  get() {
+    return props.items.length > 0 && props.items.length === props.selected.length
+  },
+  set(value) {
+    if (value) {
+      emit('selectAll', props.items)
+    } else {
+      emit('deselectAll')
+    }
+  }
+})
+
+const isIndeterminate = computed(() => props.selected.length > 0 && props.selected.length !== props.items.length)
+</script>

packages/common/component/index.js

@@ -35,6 +35,7 @@ export { default as BlockLinkField } from './BlockLinkField.vue'
 export { default as BlockLinkEvent } from './BlockLinkEvent.vue'
 export { default as BlockDescription } from './BlockDescription.vue'
 export { default as PluginBlockList } from './PluginBlockList.vue'
+export { default as SelectAll } from './SelectAll.vue'
 export { default as ButtonGroup } from './ButtonGroup.vue'
 export { default as CloseIcon } from './CloseIcon.vue'
 export { default as LifeCycles } from './LifeCycles.vue'

packages/plugins/materials/src/meta/block/src/BlockGroupTransfer.vue

@@ -1,9 +1,14 @@
 <template>
   <div class="block-add-transfer">
     <div class="block-add-transfer-footer">
-      <tiny-checkbox class="block-select-all" :indeterminate="isIndeterminate" v-model="selectedAll">
-        全选</tiny-checkbox
-      >
+      <select-all
+        v-if="state.displayType === 'grid'"
+        class="block-select-all"
+        :items="state.blockList"
+        :selected="selectedBlockArray"
+        @select-all="checkAll"
+        @deselect-all="cancelCheckAll"
+      ></select-all>
       <slot name="search"></slot>
       <tiny-select v-model="state.selectedSort" class="transfer-order-select" placeholder="请选择">
         <tiny-option v-for="item in state.sortList" :key="item.id" :label="item.text" :value="item.id"></tiny-option>
@@ -21,6 +26,8 @@
         :checked="selectedBlockArray"
         :grid-columns="6"
         @check="checkBlock"
+        @checkAll="checkAll"
+        @cancelCheckAll="cancelCheckAll"
       ></block-list>
     </div>
   </div>
@@ -29,16 +36,17 @@
 <script>
 import { computed, onMounted, provide, reactive, watch } from 'vue'
 import { useBlock, useModal } from '@opentiny/tiny-engine-meta-register'
+import { SelectAll } from '@opentiny/tiny-engine-common'
 import BlockList from './BlockList.vue'
 import BlockGroupArrange from './BlockGroupArrange.vue'
-import { Checkbox, Select, Option } from '@opentiny/vue'
+import { Select, Option } from '@opentiny/vue'
 import { fetchBlockById } from './http.js'
 
 export default {
   components: {
     BlockList,
     BlockGroupArrange,
-    TinyCheckbox: Checkbox,
+    SelectAll,
     TinySelect: Select,
     TinyOption: Option
   },
@@ -98,25 +106,6 @@ export default {
       state.blockList = sort(state.blockList, type)
     }
 
-    const selectedAll = computed({
-      get() {
-        return state.blockList.length > 0 && state.blockList.length === selectedBlockArray.value.length
-      },
-      set(value) {
-        if (value) {
-          checkAll(state.blockList)
-        } else {
-          cancelCheckAll()
-        }
-      }
-    })
-
-    const isIndeterminate = computed({
-      get() {
-        return selectedBlockArray.value.length > 0 && selectedBlockArray.value.length !== state.blockList.length
-      }
-    })
-
     const checkBlock = (block) => {
       if (selectedBlockArray.value.some((item) => item.id === block.id)) {
         cancelCheck(block)
@@ -162,9 +151,9 @@ export default {
     return {
       state,
       selectedBlockArray,
-      selectedAll,
-      isIndeterminate,
-      checkBlock
+      checkBlock,
+      checkAll,
+      cancelCheckAll
     }
   }
 }

packages/plugins/materials/src/meta/block/src/BlockList.vue

@@ -16,6 +16,8 @@
     @openVersionPanel="openVersionPanel"
     @add="setBlockPanelVisible(true)"
     @deleteBlock="deleteBlock"
+    @checkAll="(items) => checkAll(items)"
+    @cancelCheckAll="cancelCheckAll"
   ></plugin-block-list>
 </template>
 
@@ -72,7 +74,7 @@ export default {
       default: 2
     }
   },
-  emits: ['check', 'close'],
+  emits: ['check', 'close', 'checkAll', 'cancelCheckAll'],
   setup(props, { emit }) {
     const { generateNode, registerBlock } = useMaterial()
     const { isDefaultGroupId, isAllGroupId, selectedBlock, selectedGroup, isRefresh, getBlockAssetsByVersion } =
@@ -196,6 +198,14 @@ export default {
       confirm({ title, status, message: messageRender, exec })
     }
 
+    const checkAll = (items) => {
+      emit('checkAll', items)
+    }
+
+    const cancelCheckAll = () => {
+      emit('cancelCheckAll')
+    }
+
     return {
       blockRef,
       state,
@@ -204,7 +214,9 @@ export default {
       closeDetail,
       setBlockPanelVisible,
       openVersionPanel,
-      deleteBlock
+      deleteBlock,
+      checkAll,
+      cancelCheckAll
     }
   }
 }