Skip to content

chore: demo page menu management #5619

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
mynetfan merged 4 commits into from
Feb 26, 2025
Merged

chore: demo page menu management #5619

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
ab73b81
chore: add demo page `menu management`
mynetfan Feb 26, 2025
4cbec9c
fix: menu icon show
mynetfan Feb 26, 2025
d4d6ed4
fix: responsive form
mynetfan Feb 26, 2025
c074b83
fix: missing import
mynetfan Feb 26, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
fix: responsive form
  • Loading branch information
@mynetfan
mynetfan committed Feb 26, 2025
commit d4d6ed44d1a36c017bbc40fd20557b3be36eec22
2 changes: 1 addition & 1 deletion playground/src/views/system/menu/data.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -62,7 +62,7 @@ export function useColumns(
case 'menu': {
return row.component ?? '';
}
case 'embed': {
case 'embedded': {
return row.meta?.iframeSrc ?? '';
}
case 'link': {
Expand Down
26 changes: 11 additions & 15 deletions playground/src/views/system/menu/modules/form.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,8 @@ import { IconifyIcon } from '@vben/icons';
import { $te } from '@vben/locales';
import { getPopupContainer } from '@vben/utils';

import { breakpointsTailwind, useBreakpoints } from '@vueuse/core';

import { useVbenForm, z } from '#/adapter/form';
import {
createMenu,
Expand Down Expand Up @@ -42,7 +44,7 @@ const schema: VbenFormSchema[] = [
},
defaultValue: 'menu',
fieldName: 'type',
formItemClass: 'col-span-6',
formItemClass: 'col-span-2 md:col-span-2',
label: $t('system.menu.type'),
},
{
Expand Down Expand Up @@ -262,8 +264,6 @@ const schema: VbenFormSchema[] = [
},
defaultValue: 1,
fieldName: 'status',
formItemClass: 'col-span-3',
// hideLabel: true,
label: $t('system.menu.status'),
},
{
Expand Down Expand Up @@ -331,7 +331,7 @@ const schema: VbenFormSchema[] = [
triggerFields: ['type'],
},
fieldName: 'divider1',
formItemClass: 'col-span-6 pb-0',
formItemClass: 'col-span-2 md:col-span-2 pb-0',
hideLabel: true,
renderComponentContent() {
return {
Expand All @@ -348,7 +348,6 @@ const schema: VbenFormSchema[] = [
triggerFields: ['type'],
},
fieldName: 'meta.keepAlive',
formItemClass: 'col-span-3',
renderComponentContent() {
return {
default: () => $t('system.menu.keepAlive'),
Expand All @@ -364,7 +363,6 @@ const schema: VbenFormSchema[] = [
triggerFields: ['type'],
},
fieldName: 'meta.affixTab',
formItemClass: 'col-span-3',
renderComponentContent() {
return {
default: () => $t('system.menu.affixTab'),
Expand All @@ -380,7 +378,6 @@ const schema: VbenFormSchema[] = [
triggerFields: ['type'],
},
fieldName: 'meta.hideInMenu',
formItemClass: 'col-span-3',
renderComponentContent() {
return {
default: () => $t('system.menu.hideInMenu'),
Expand All @@ -396,7 +393,6 @@ const schema: VbenFormSchema[] = [
triggerFields: ['type'],
},
fieldName: 'meta.hideChildrenInMenu',
formItemClass: 'col-span-3',
renderComponentContent() {
return {
default: () => $t('system.menu.hideChildrenInMenu'),
Expand All @@ -412,7 +408,6 @@ const schema: VbenFormSchema[] = [
triggerFields: ['type'],
},
fieldName: 'meta.hideInBreadcrumb',
formItemClass: 'col-span-3',
renderComponentContent() {
return {
default: () => $t('system.menu.hideInBreadcrumb'),
Expand All @@ -428,7 +423,6 @@ const schema: VbenFormSchema[] = [
triggerFields: ['type'],
},
fieldName: 'meta.hideInTab',
formItemClass: 'col-span-3',
renderComponentContent() {
return {
default: () => $t('system.menu.hideInTab'),
Expand All @@ -437,15 +431,17 @@ const schema: VbenFormSchema[] = [
},
];

const breakpoints = useBreakpoints(breakpointsTailwind);
const isHorizontal = computed(() => breakpoints.greaterOrEqual('md').value);

const [Form, formApi] = useVbenForm({
commonConfig: {
colon: true,
formItemClass: 'col-span-3',
formItemClass: 'col-span-2 md:col-span-1',
},
layout: 'horizontal',
schema,
showDefaultActions: false,
wrapperClass: 'grid-cols-6 gap-x-4',
wrapperClass: 'grid-cols-2 gap-x-4',
});

const [Drawer, drawerApi] = useVbenDrawer({
Expand Down Expand Up @@ -519,7 +515,7 @@ const getDrawerTitle = computed(() =>
);
</script>
<template>
<Drawer class="min-w-[700px]" :title="getDrawerTitle">
<Form class="mx-4" />
<Drawer class="w-full max-w-[800px]" :title="getDrawerTitle">
<Form class="mx-4" :layout="isHorizontal ? 'horizontal' : 'vertical'" />
</Drawer>
</template>
Loading