feat: refs #8197 working rightMenu

src/components/VnTable/VnTableFilter.vue

@@ -1,7 +1,6 @@
 <script setup>
 import { ref } from 'vue';
 import { useI18n } from 'vue-i18n';
-import { useStateStore } from 'stores/useStateStore';
 
 import VnFilterPanel from 'components/ui/VnFilterPanel.vue';
 import VnFilter from 'components/VnTable/VnFilter.vue';
@@ -22,7 +21,6 @@ defineProps({
     },
 });
 const { t } = useI18n();
-const stateStore = useStateStore();
 
 const tableFilterRef = ref([]);
 
@@ -34,52 +32,41 @@ function columnName(col) {
 }
 </script>
 <template>
-    <QDrawer v-model="stateStore.rightDrawer" side="right" :width="256" show-if-above>
+    <VnFilterPanel v-bind="$attrs" :search-button="true" :disable-submit-event="true">
-        <QScrollArea class="fit">
+        <template #body="{ params, orders }">
-            <VnFilterPanel
+            <div
-                v-bind="$attrs"
+                class="row no-wrap flex-center"
-                :search-button="true"
+                v-for="col of columns.filter((c) => c.columnFilter ?? true)"
-                :disable-submit-event="true"
+                :key="col.id"
             >
-                <template #body="{ params, orders }">
+                <VnFilter
-                    <div
+                    ref="tableFilterRef"
-                        class="row no-wrap flex-center"
+                    :column="col"
-                        v-for="col of columns.filter((c) => c.columnFilter ?? true)"
+                    :data-key="$attrs['data-key']"
-                        :key="col.id"
+                    v-model="params[columnName(col)]"
-                    >
+                    :search-url="searchUrl"
-                        <VnFilter
+                />
-                            ref="tableFilterRef"
+                <VnTableOrder
-                            :column="col"
+                    v-if="col?.columnFilter !== false && col?.name !== 'tableActions'"
-                            :data-key="$attrs['data-key']"
+                    v-model="orders[col.orderBy ?? col.name]"
-                            v-model="params[columnName(col)]"
+                    :name="col.orderBy ?? col.name"
-                            :search-url="searchUrl"
+                    :data-key="$attrs['data-key']"
-                        />
+                    :search-url="searchUrl"
-                        <VnTableOrder
+                    :vertical="true"
-                            v-if="
+                />
-                                col?.columnFilter !== false &&
+            </div>
-                                col?.name !== 'tableActions'
+            <slot
-                            "
+                name="moreFilterPanel"
-                            v-model="orders[col.orderBy ?? col.name]"
+                :params="params"
-                            :name="col.orderBy ?? col.name"
+                :orders="orders"
-                            :data-key="$attrs['data-key']"
+                :columns="columns"
-                            :search-url="searchUrl"
+            />
-                            :vertical="true"
+        </template>
-                        />
+        <template #tags="{ tag, formatFn }" v-if="chipLocale">
-                    </div>
+            <div class="q-gutter-x-xs">
-                    <slot
+                <strong>{{ t(`${chipLocale}.${tag.label}`) }}: </strong>
-                        name="moreFilterPanel"
+                <span>{{ formatFn(tag.value) }}</span>
-                        :params="params"
+            </div>
-                        :orders="orders"
+        </template>
-                        :columns="columns"
+    </VnFilterPanel>
-                    />
-                </template>
-                <template #tags="{ tag, formatFn }" v-if="chipLocale">
-                    <div class="q-gutter-x-xs">
-                        <strong>{{ t(`${chipLocale}.${tag.label}`) }}: </strong>
-                        <span>{{ formatFn(tag.value) }}</span>
-                    </div>
-                </template>
-            </VnFilterPanel>
-        </QScrollArea>
-    </QDrawer>
 </template>

src/components/common/VnCardMain.vue

@@ -1,6 +1,7 @@
 <script setup>
 import LeftMenu from '../LeftMenu.vue';
 import { useStateStore } from 'stores/useStateStore';
+import RightMenu from './RightMenu.vue';
 const stateStore = useStateStore();
 
 defineProps({
@@ -17,5 +18,9 @@ defineProps({
     </Teleport>
     <slot name="body" v-if="section == $route.name" />
     <RouterView v-else />
-    <slot name="rightPanel" />
+    <RightMenu>
+        <template #right-panel v-if="$slots['rightMenu']">
+            <slot name="rightMenu" />
+        </template>
+    </RightMenu>
 </template>

src/pages/Account/AccountList.vue

@@ -136,7 +136,7 @@ function exprBuilder(param, value) {
                 :right-search="false"
             />
         </template>
-        <template #rightPanel>
+        <template #rightMenu>
             <VnTableFilter :data-key="dataKey" :columns="columns" />
         </template>
     </VnCardMain>

src/pages/Account/Role/AccountRoles.vue

@@ -114,6 +114,7 @@ const exprBuilder = (param, value) => {
                 :columns="columns"
                 default-mode="table"
                 redirect="account/role"
+                :right-search="false"
             />
         </template>
     </VnCardMain>