This commit is contained in:
dap 2025-03-07 15:57:38 +08:00
commit e78f4e984d
10 changed files with 35 additions and 12 deletions

View File

@ -127,7 +127,9 @@ function handleFocusOutside(e: Event) {
} }
const getAppendTo = computed(() => { const getAppendTo = computed(() => {
return appendToMain.value ? `#${ELEMENT_ID_MAIN_CONTENT}` : undefined; return appendToMain.value
? `#${ELEMENT_ID_MAIN_CONTENT}>div:not(.absolute)>div`
: undefined;
}); });
</script> </script>
<template> <template>

View File

@ -172,7 +172,9 @@ function handleFocusOutside(e: Event) {
e.stopPropagation(); e.stopPropagation();
} }
const getAppendTo = computed(() => { const getAppendTo = computed(() => {
return appendToMain.value ? `#${ELEMENT_ID_MAIN_CONTENT}` : undefined; return appendToMain.value
? `#${ELEMENT_ID_MAIN_CONTENT}>div:not(.absolute)>div`
: undefined;
}); });
</script> </script>
<template> <template>

View File

@ -7,7 +7,7 @@ import { useForwardPropsEmits } from 'radix-vue';
import { Checkbox } from '../../ui/checkbox'; import { Checkbox } from '../../ui/checkbox';
const props = defineProps<CheckboxRootProps>(); const props = defineProps<CheckboxRootProps & { indeterminate?: boolean }>();
const emits = defineEmits<CheckboxRootEmits>(); const emits = defineEmits<CheckboxRootEmits>();

View File

@ -1,16 +1,20 @@
<script setup lang="ts"> <script setup lang="ts">
import type { CheckboxRootEmits, CheckboxRootProps } from 'radix-vue'; import type { CheckboxRootEmits, CheckboxRootProps } from 'radix-vue';
import { computed } from 'vue';
import { cn } from '@vben-core/shared/utils'; import { cn } from '@vben-core/shared/utils';
import { Check } from 'lucide-vue-next';
import { Check, Minus } from 'lucide-vue-next';
import { import {
CheckboxIndicator, CheckboxIndicator,
CheckboxRoot, CheckboxRoot,
useForwardPropsEmits, useForwardPropsEmits,
} from 'radix-vue'; } from 'radix-vue';
import { computed } from 'vue';
const props = defineProps<{ class?: any } & CheckboxRootProps>(); const props = defineProps<
CheckboxRootProps & { class?: any; indeterminate?: boolean }
>();
const emits = defineEmits<CheckboxRootEmits>(); const emits = defineEmits<CheckboxRootEmits>();
const delegatedProps = computed(() => { const delegatedProps = computed(() => {
@ -27,7 +31,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits);
v-bind="forwarded" v-bind="forwarded"
:class=" :class="
cn( cn(
'focus-visible:ring-ring data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground border-border peer h-4 w-4 shrink-0 rounded-sm border focus-visible:outline-none focus-visible:ring-1 disabled:cursor-not-allowed disabled:opacity-50', 'focus-visible:ring-ring data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground border-border peer h-4 w-4 shrink-0 rounded-sm border transition focus-visible:outline-none focus-visible:ring-1 disabled:cursor-not-allowed disabled:opacity-50',
props.class, props.class,
) )
" "
@ -36,7 +40,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits);
class="flex h-full w-full items-center justify-center text-current" class="flex h-full w-full items-center justify-center text-current"
> >
<slot> <slot>
<Check class="h-4 w-4" /> <component :is="indeterminate ? Minus : Check" class="h-4 w-4" />
</slot> </slot>
</CheckboxIndicator> </CheckboxIndicator>
</CheckboxRoot> </CheckboxRoot>

View File

@ -532,7 +532,7 @@ const routes: RouteRecordRaw[] = [
children: [ children: [
{ {
name: 'Menu31Demo', name: 'Menu31Demo',
path: 'menu3-1', path: '/demos/nested/menu3/menu3-1',
component: () => import('#/views/demos/nested/menu-3-1.vue'), component: () => import('#/views/demos/nested/menu-3-1.vue'),
meta: { meta: {
icon: 'ic:round-menu', icon: 'ic:round-menu',
@ -542,7 +542,7 @@ const routes: RouteRecordRaw[] = [
}, },
{ {
name: 'Menu32Demo', name: 'Menu32Demo',
path: 'menu3-2', path: '/demos/nested/menu3/menu3-2',
meta: { meta: {
icon: 'ic:round-menu', icon: 'ic:round-menu',
title: $t('demos.nested.menu3_2'), title: $t('demos.nested.menu3_2'),

View File

@ -213,6 +213,7 @@ const routes: RouteRecordRaw[] = [
component: () => import('#/views/examples/modal/index.vue'), component: () => import('#/views/examples/modal/index.vue'),
meta: { meta: {
icon: 'system-uicons:window-content', icon: 'system-uicons:window-content',
keepAlive: true,
title: $t('examples.modal.title'), title: $t('examples.modal.title'),
}, },
}, },
@ -222,6 +223,7 @@ const routes: RouteRecordRaw[] = [
component: () => import('#/views/examples/drawer/index.vue'), component: () => import('#/views/examples/drawer/index.vue'),
meta: { meta: {
icon: 'iconoir:drawer', icon: 'iconoir:drawer',
keepAlive: true,
title: $t('examples.drawer.title'), title: $t('examples.drawer.title'),
}, },
}, },

View File

@ -1,7 +1,11 @@
<script lang="ts" setup> <script lang="ts" setup>
import { ref } from 'vue';
import { useVbenDrawer } from '@vben/common-ui'; import { useVbenDrawer } from '@vben/common-ui';
import { message } from 'ant-design-vue'; import { Input, message } from 'ant-design-vue';
const value = ref('');
const [Drawer, drawerApi] = useVbenDrawer({ const [Drawer, drawerApi] = useVbenDrawer({
onCancel() { onCancel() {
@ -17,5 +21,6 @@ const [Drawer, drawerApi] = useVbenDrawer({
<Drawer append-to-main title="基础抽屉示例" title-tooltip="标题提示内容"> <Drawer append-to-main title="基础抽屉示例" title-tooltip="标题提示内容">
<template #extra> extra </template> <template #extra> extra </template>
本抽屉指定在内容区域打开 本抽屉指定在内容区域打开
<Input v-model="value" placeholder="KeepAlive测试" />
</Drawer> </Drawer>
</template> </template>

View File

@ -13,6 +13,7 @@ import FormDrawerDemo from './form-drawer-demo.vue';
import inContentDemo from './in-content-demo.vue'; import inContentDemo from './in-content-demo.vue';
import SharedDataDemo from './shared-data-demo.vue'; import SharedDataDemo from './shared-data-demo.vue';
defineOptions({ name: 'DrawerExample' });
const [BaseDrawer, baseDrawerApi] = useVbenDrawer({ const [BaseDrawer, baseDrawerApi] = useVbenDrawer({
// //
connectedComponent: BaseDemo, connectedComponent: BaseDemo,

View File

@ -1,9 +1,12 @@
<script lang="ts" setup> <script lang="ts" setup>
import { ref } from 'vue';
import { useVbenModal } from '@vben/common-ui'; import { useVbenModal } from '@vben/common-ui';
import { message } from 'ant-design-vue'; import { Input, message } from 'ant-design-vue';
const [Modal, modalApi] = useVbenModal({ const [Modal, modalApi] = useVbenModal({
destroyOnClose: false,
onCancel() { onCancel() {
modalApi.close(); modalApi.close();
}, },
@ -12,6 +15,7 @@ const [Modal, modalApi] = useVbenModal({
// modalApi.close(); // modalApi.close();
}, },
}); });
const value = ref();
</script> </script>
<template> <template>
<Modal <Modal
@ -21,5 +25,6 @@ const [Modal, modalApi] = useVbenModal({
title-tooltip="标题提示内容" title-tooltip="标题提示内容"
> >
此弹窗指定在内容区域打开 此弹窗指定在内容区域打开
<Input v-model="value" placeholder="KeepAlive测试" />
</Modal> </Modal>
</template> </template>

View File

@ -14,6 +14,8 @@ import InContentModalDemo from './in-content-demo.vue';
import NestedDemo from './nested-demo.vue'; import NestedDemo from './nested-demo.vue';
import SharedDataDemo from './shared-data-demo.vue'; import SharedDataDemo from './shared-data-demo.vue';
defineOptions({ name: 'ModalExample' });
const [BaseModal, baseModalApi] = useVbenModal({ const [BaseModal, baseModalApi] = useVbenModal({
// //
connectedComponent: BaseDemo, connectedComponent: BaseDemo,