fix: drawer component header does not take effect (#4844)

packages/@core/base/icons/build.config.ts

@@ -3,19 +3,5 @@ import { defineBuildConfig } from 'unbuild';
 export default defineBuildConfig({
   clean: true,
   declaration: true,
-  entries: [
-    {
-      builder: 'mkdist',
-      input: './src',
-      loaders: ['vue'],
-      pattern: ['**/*.vue'],
-    },
-    {
-      builder: 'mkdist',
-      format: 'esm',
-      input: './src',
-      loaders: ['js'],
-      pattern: ['**/*.ts'],
-    },
-  ],
+  entries: ['src/index'],
 });

packages/@core/base/icons/src/index.ts

@@ -1,4 +1,3 @@
-export { default as EmptyIcon } from './components/empty.vue';
 export * from './create-icon';
 
 export * from './lucide';

packages/@core/base/icons/src/lucide.ts

@@ -41,7 +41,6 @@ export {
   Minimize,
   Minimize2,
   MoonStar,
-  Package2,
   Palette,
   PanelLeft,
   PanelRight,

packages/@core/ui-kit/popup-ui/src/drawer/drawer.vue

@@ -132,7 +132,7 @@ function handleFocusOutside(e: Event) {
       @pointer-down-outside="pointerDownOutside"
     >
       <SheetHeader
-        v-show="showHeader"
+        v-if="showHeader"
         :class="
           cn(
             '!flex flex-row items-center justify-between border-b px-6 py-5',
@@ -179,6 +179,12 @@ function handleFocusOutside(e: Event) {
         </div>
       </SheetHeader>
 
+      <template v-else>
+        <VisuallyHidden>
+          <SheetTitle />
+          <SheetDescription />
+        </VisuallyHidden>
+      </template>
       <div
         ref="wrapperRef"
         :class="

packages/effects/common-ui/src/components/icon-picker/icon-picker.vue

@@ -1,8 +1,8 @@
 <script setup lang="ts">
-import { ref, watch, watchEffect } from 'vue';
+import { ref, useTemplateRef, watch, watchEffect } from 'vue';
 
 import { usePagination } from '@vben/hooks';
-import { Grip, Package2 } from '@vben/icons';
+import { EmptyIcon, Grip } from '@vben/icons';
 import {
   Button,
   Pagination,
@@ -38,9 +38,9 @@ const emit = defineEmits<{
   'update:value': [string];
 }>();
 
+const refTrigger = useTemplateRef<HTMLElement>('refTrigger');
 const currentSelect = ref('');
 const currentList = ref(props.icons);
-const refTrigger = ref<HTMLDivElement>();
 
 watch(
   () => props.icons,
@@ -50,7 +50,7 @@ watch(
   { immediate: true },
 );
 
-const { getPaginationList, getTotal, setCurrentPage } = usePagination(
+const { paginationList, total, setCurrentPage } = usePagination(
   currentList,
   props.pageSize,
 );
@@ -75,47 +75,57 @@ const handlePageChange = (page: number) => {
   setCurrentPage(page);
 };
 
-const changeOpenState = () => {
-  if (refTrigger.value) {
-    refTrigger.value.click();
-  }
-};
+function changeOpenState() {
+  refTrigger.value?.click?.();
+}
 
 defineExpose({ changeOpenState });
 </script>
 <template>
   <VbenPopover
     :content-props="{ align: 'end', alignOffset: -11, sideOffset: 8 }"
-    content-class="p-0 py-4"
+    content-class="p-0 pt-3"
   >
     <template #trigger>
       <div ref="refTrigger">
-        <VbenIcon :icon="currentSelect || Grip" class="size-6" />
+        <VbenIcon :icon="currentSelect || Grip" class="size-5" />
       </div>
     </template>
 
-    <div v-if="getPaginationList.length > 0">
+    <template v-if="paginationList.length > 0">
       <div class="grid max-h-[360px] w-full grid-cols-6 justify-items-center">
         <VbenIconButton
-          v-for="(item, index) in getPaginationList"
+          v-for="(item, index) in paginationList"
           :key="index"
           :tooltip="item"
           tooltip-side="top"
           @click="handleClick(item)"
         >
-          <VbenIcon :icon="item" />
+          <VbenIcon
+            :class="{
+              'text-primary transition-all': currentSelect === item,
+            }"
+            :icon="item"
+          />
         </VbenIconButton>
       </div>
-      <div v-if="getTotal >= pageSize" class="flex-center pt-1">
+      <div
+        v-if="total >= pageSize"
+        class="flex-center flex justify-end overflow-hidden border-t py-2 pr-3"
+      >
         <Pagination
           v-slot="{ page }"
           :items-per-page="36"
           :sibling-count="1"
-          :total="getTotal"
+          :total="total"
           show-edges
+          size="small"
           @update:page="handlePageChange"
         >
-          <PaginationList v-slot="{ items }" class="flex items-center gap-1">
+          <PaginationList
+            v-slot="{ items }"
+            class="flex w-full items-center gap-1"
+          >
             <PaginationFirst class="size-5" />
             <PaginationPrev class="size-5" />
             <template v-for="(item, index) in items">
@@ -144,12 +154,12 @@ defineExpose({ changeOpenState });
           </PaginationList>
         </Pagination>
       </div>
-    </div>
+    </template>
 
     <template v-else>
       <div class="flex-col-center text-muted-foreground min-h-[150px] w-full">
-        <Package2 />
-        <div>{{ $t('common.noData') }}</div>
+        <EmptyIcon class="size-10" />
+        <div class="mt-1 text-sm">{{ $t('common.noData') }}</div>
       </div>
     </template>
   </VbenPopover>

packages/effects/hooks/src/use-pagination.ts

@@ -29,11 +29,11 @@ export function usePagination<T = any>(list: Ref<T[]>, pageSize: number) {
     Math.ceil(unref(list).length / unref(pageSizeRef)),
   );
 
-  const getPaginationList = computed(() => {
+  const paginationList = computed(() => {
     return pagination(unref(list), unref(currentPage), unref(pageSizeRef));
   });
 
-  const getTotal = computed(() => {
+  const total = computed(() => {
     return unref(list).length;
   });
 
@@ -53,5 +53,5 @@ export function usePagination<T = any>(list: Ref<T[]>, pageSize: number) {
     currentPage.value = 1;
   }
 
-  return { setCurrentPage, getTotal, setPageSize, getPaginationList };
+  return { setCurrentPage, total, setPageSize, paginationList };
 }

packages/icons/src/index.ts

@@ -1,2 +1,3 @@
 export * from './iconify/index.js';
+export { default as EmptyIcon } from './icons/empty-icon.vue';
 export * from './svg/index.js';