Merge branch 'main' of https://github.com/vbenjs/vue-vben-admin into dev
This commit is contained in:
commit
e78f4e984d
@ -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>
|
||||||
|
@ -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>
|
||||||
|
@ -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>();
|
||||||
|
|
||||||
|
@ -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>
|
||||||
|
@ -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'),
|
||||||
|
@ -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'),
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
@ -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>
|
||||||
|
@ -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,
|
||||||
|
@ -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>
|
||||||
|
@ -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,
|
||||||
|
Loading…
Reference in New Issue
Block a user