Merge branch 'main' of https://github.com/vbenjs/vue-vben-admin into dev
commit
4f62d4b8ed
|
@ -78,7 +78,7 @@ const [Drawer, drawerApi] = useVbenDrawer({
|
||||||
| --- | --- | --- | --- |
|
| --- | --- | --- | --- |
|
||||||
| appendToMain | 是否挂载到内容区域(默认挂载到body) | `boolean` | `false` |
|
| appendToMain | 是否挂载到内容区域(默认挂载到body) | `boolean` | `false` |
|
||||||
| connectedComponent | 连接另一个Modal组件 | `Component` | - |
|
| connectedComponent | 连接另一个Modal组件 | `Component` | - |
|
||||||
| destroyOnClose | 关闭时销毁`connectedComponent` | `boolean` | `false` |
|
| destroyOnClose | 关闭时销毁 | `boolean` | `false` |
|
||||||
| title | 标题 | `string\|slot` | - |
|
| title | 标题 | `string\|slot` | - |
|
||||||
| titleTooltip | 标题提示信息 | `string\|slot` | - |
|
| titleTooltip | 标题提示信息 | `string\|slot` | - |
|
||||||
| description | 描述信息 | `string\|slot` | - |
|
| description | 描述信息 | `string\|slot` | - |
|
||||||
|
|
|
@ -38,6 +38,7 @@
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@vben-core/composables": "workspace:*",
|
"@vben-core/composables": "workspace:*",
|
||||||
|
"@vben-core/icons": "workspace:*",
|
||||||
"@vben-core/shadcn-ui": "workspace:*",
|
"@vben-core/shadcn-ui": "workspace:*",
|
||||||
"@vben-core/shared": "workspace:*",
|
"@vben-core/shared": "workspace:*",
|
||||||
"@vben-core/typings": "workspace:*",
|
"@vben-core/typings": "workspace:*",
|
||||||
|
|
|
@ -5,6 +5,7 @@ import type { FormSchema, MaybeComponentProps } from '../types';
|
||||||
|
|
||||||
import { computed, nextTick, onUnmounted, useTemplateRef, watch } from 'vue';
|
import { computed, nextTick, onUnmounted, useTemplateRef, watch } from 'vue';
|
||||||
|
|
||||||
|
import { CircleAlert } from '@vben-core/icons';
|
||||||
import {
|
import {
|
||||||
FormControl,
|
FormControl,
|
||||||
FormDescription,
|
FormDescription,
|
||||||
|
@ -12,6 +13,7 @@ import {
|
||||||
FormItem,
|
FormItem,
|
||||||
FormMessage,
|
FormMessage,
|
||||||
VbenRenderContent,
|
VbenRenderContent,
|
||||||
|
VbenTooltip,
|
||||||
} from '@vben-core/shadcn-ui';
|
} from '@vben-core/shadcn-ui';
|
||||||
import { cn, isFunction, isObject, isString } from '@vben-core/shared/utils';
|
import { cn, isFunction, isObject, isString } from '@vben-core/shared/utils';
|
||||||
|
|
||||||
|
@ -356,6 +358,24 @@ onUnmounted(() => {
|
||||||
</template>
|
</template>
|
||||||
<!-- <slot></slot> -->
|
<!-- <slot></slot> -->
|
||||||
</component>
|
</component>
|
||||||
|
<VbenTooltip
|
||||||
|
v-if="compact && isInValid"
|
||||||
|
:delay-duration="300"
|
||||||
|
side="left"
|
||||||
|
>
|
||||||
|
<template #trigger>
|
||||||
|
<slot name="trigger">
|
||||||
|
<CircleAlert
|
||||||
|
:class="
|
||||||
|
cn(
|
||||||
|
'text-foreground/80 hover:text-foreground inline-flex size-5 cursor-pointer',
|
||||||
|
)
|
||||||
|
"
|
||||||
|
/>
|
||||||
|
</slot>
|
||||||
|
</template>
|
||||||
|
<FormMessage />
|
||||||
|
</VbenTooltip>
|
||||||
</slot>
|
</slot>
|
||||||
</FormControl>
|
</FormControl>
|
||||||
<!-- 自定义后缀 -->
|
<!-- 自定义后缀 -->
|
||||||
|
@ -367,7 +387,7 @@ onUnmounted(() => {
|
||||||
</FormDescription>
|
</FormDescription>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<Transition name="slide-up">
|
<Transition name="slide-up" v-if="!compact">
|
||||||
<FormMessage class="absolute bottom-1" />
|
<FormMessage class="absolute bottom-1" />
|
||||||
</Transition>
|
</Transition>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -35,7 +35,7 @@ interface Props extends DrawerProps {
|
||||||
const props = withDefaults(defineProps<Props>(), {
|
const props = withDefaults(defineProps<Props>(), {
|
||||||
appendToMain: false,
|
appendToMain: false,
|
||||||
closeIconPlacement: 'right',
|
closeIconPlacement: 'right',
|
||||||
destroyOnClose: true,
|
destroyOnClose: false,
|
||||||
drawerApi: undefined,
|
drawerApi: undefined,
|
||||||
submitting: false,
|
submitting: false,
|
||||||
zIndex: 1000,
|
zIndex: 1000,
|
||||||
|
|
|
@ -21,9 +21,7 @@ import VbenDrawer from './drawer.vue';
|
||||||
|
|
||||||
const USER_DRAWER_INJECT_KEY = Symbol('VBEN_DRAWER_INJECT');
|
const USER_DRAWER_INJECT_KEY = Symbol('VBEN_DRAWER_INJECT');
|
||||||
|
|
||||||
const DEFAULT_DRAWER_PROPS: Partial<DrawerProps> = {
|
const DEFAULT_DRAWER_PROPS: Partial<DrawerProps> = {};
|
||||||
destroyOnClose: true,
|
|
||||||
};
|
|
||||||
|
|
||||||
export function setDefaultDrawerProps(props: Partial<DrawerProps>) {
|
export function setDefaultDrawerProps(props: Partial<DrawerProps>) {
|
||||||
Object.assign(DEFAULT_DRAWER_PROPS, props);
|
Object.assign(DEFAULT_DRAWER_PROPS, props);
|
||||||
|
|
|
@ -34,7 +34,7 @@ interface Props extends ModalProps {
|
||||||
|
|
||||||
const props = withDefaults(defineProps<Props>(), {
|
const props = withDefaults(defineProps<Props>(), {
|
||||||
appendToMain: false,
|
appendToMain: false,
|
||||||
destroyOnClose: true,
|
destroyOnClose: false,
|
||||||
modalApi: undefined,
|
modalApi: undefined,
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
|
@ -9,9 +9,7 @@ import VbenModal from './modal.vue';
|
||||||
|
|
||||||
const USER_MODAL_INJECT_KEY = Symbol('VBEN_MODAL_INJECT');
|
const USER_MODAL_INJECT_KEY = Symbol('VBEN_MODAL_INJECT');
|
||||||
|
|
||||||
const DEFAULT_MODAL_PROPS: Partial<ModalProps> = {
|
const DEFAULT_MODAL_PROPS: Partial<ModalProps> = {};
|
||||||
destroyOnClose: true,
|
|
||||||
};
|
|
||||||
|
|
||||||
export function setDefaultModalProps(props: Partial<ModalProps>) {
|
export function setDefaultModalProps(props: Partial<ModalProps>) {
|
||||||
Object.assign(DEFAULT_MODAL_PROPS, props);
|
Object.assign(DEFAULT_MODAL_PROPS, props);
|
||||||
|
|
|
@ -21,6 +21,7 @@ interface Props extends PopoverRootProps {
|
||||||
class?: ClassType;
|
class?: ClassType;
|
||||||
contentClass?: ClassType;
|
contentClass?: ClassType;
|
||||||
contentProps?: PopoverContentProps;
|
contentProps?: PopoverContentProps;
|
||||||
|
triggerClass?: ClassType;
|
||||||
}
|
}
|
||||||
|
|
||||||
const props = withDefaults(defineProps<Props>(), {});
|
const props = withDefaults(defineProps<Props>(), {});
|
||||||
|
@ -32,6 +33,7 @@ const delegatedProps = computed(() => {
|
||||||
class: _cls,
|
class: _cls,
|
||||||
contentClass: _,
|
contentClass: _,
|
||||||
contentProps: _cProps,
|
contentProps: _cProps,
|
||||||
|
triggerClass: _tClass,
|
||||||
...delegated
|
...delegated
|
||||||
} = props;
|
} = props;
|
||||||
|
|
||||||
|
@ -43,7 +45,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits);
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<PopoverRoot v-bind="forwarded">
|
<PopoverRoot v-bind="forwarded">
|
||||||
<PopoverTrigger>
|
<PopoverTrigger :class="triggerClass">
|
||||||
<slot name="trigger"></slot>
|
<slot name="trigger"></slot>
|
||||||
|
|
||||||
<PopoverContent
|
<PopoverContent
|
||||||
|
|
|
@ -165,13 +165,18 @@ const searchInputProps = computed(() => {
|
||||||
};
|
};
|
||||||
});
|
});
|
||||||
|
|
||||||
|
function updateCurrentSelect(v: string) {
|
||||||
|
currentSelect.value = v;
|
||||||
|
}
|
||||||
|
|
||||||
defineExpose({ toggleOpenState, open, close });
|
defineExpose({ toggleOpenState, open, close });
|
||||||
</script>
|
</script>
|
||||||
<template>
|
<template>
|
||||||
<VbenPopover
|
<VbenPopover
|
||||||
v-model:open="visible"
|
v-model:open="visible"
|
||||||
:content-props="{ align: 'end', alignOffset: -11, sideOffset: 8 }"
|
:content-props="{ align: 'end', alignOffset: -11, sideOffset: 8 }"
|
||||||
content-class="p-0 pt-3"
|
content-class="p-0 pt-3 w-full"
|
||||||
|
trigger-class="w-full"
|
||||||
>
|
>
|
||||||
<template #trigger>
|
<template #trigger>
|
||||||
<template v-if="props.type === 'input'">
|
<template v-if="props.type === 'input'">
|
||||||
|
@ -183,6 +188,7 @@ defineExpose({ toggleOpenState, open, close });
|
||||||
role="combobox"
|
role="combobox"
|
||||||
:aria-label="$t('ui.iconPicker.placeholder')"
|
:aria-label="$t('ui.iconPicker.placeholder')"
|
||||||
aria-expanded="visible"
|
aria-expanded="visible"
|
||||||
|
:[`onUpdate:${modelValueProp}`]="updateCurrentSelect"
|
||||||
v-bind="$attrs"
|
v-bind="$attrs"
|
||||||
>
|
>
|
||||||
<template #[iconSlot]>
|
<template #[iconSlot]>
|
||||||
|
|
|
@ -35,6 +35,16 @@ const getZIndex = computed(() => {
|
||||||
return props.zIndex || calcZIndex();
|
return props.zIndex || calcZIndex();
|
||||||
});
|
});
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 排除ant-message和loading:9999的z-index
|
||||||
|
*/
|
||||||
|
const zIndexExcludeClass = ['ant-message', 'loading'];
|
||||||
|
function isZIndexExcludeClass(element: Element) {
|
||||||
|
return zIndexExcludeClass.some((className) =>
|
||||||
|
element.classList.contains(className),
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* 获取最大的zIndex值
|
* 获取最大的zIndex值
|
||||||
*/
|
*/
|
||||||
|
@ -44,7 +54,11 @@ function calcZIndex() {
|
||||||
[...elements].forEach((element) => {
|
[...elements].forEach((element) => {
|
||||||
const style = window.getComputedStyle(element);
|
const style = window.getComputedStyle(element);
|
||||||
const zIndex = style.getPropertyValue('z-index');
|
const zIndex = style.getPropertyValue('z-index');
|
||||||
if (zIndex && !Number.isNaN(Number.parseInt(zIndex))) {
|
if (
|
||||||
|
zIndex &&
|
||||||
|
!Number.isNaN(Number.parseInt(zIndex)) &&
|
||||||
|
!isZIndexExcludeClass(element)
|
||||||
|
) {
|
||||||
maxZ = Math.max(maxZ, Number.parseInt(zIndex));
|
maxZ = Math.max(maxZ, Number.parseInt(zIndex));
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
|
@ -79,14 +79,14 @@ const handleCheckboxChange = () => {
|
||||||
</SwitchItem>
|
</SwitchItem>
|
||||||
<CheckboxItem
|
<CheckboxItem
|
||||||
:items="[
|
:items="[
|
||||||
{ label: '收缩按钮', value: 'collapsed' },
|
{ label: $t('preferences.sidebar.buttonCollapsed'), value: 'collapsed' },
|
||||||
{ label: '固定按钮', value: 'fixed' },
|
{ label: $t('preferences.sidebar.buttonFixed'), value: 'fixed' },
|
||||||
]"
|
]"
|
||||||
multiple
|
multiple
|
||||||
v-model="sidebarButtons"
|
v-model="sidebarButtons"
|
||||||
:on-btn-click="handleCheckboxChange"
|
:on-btn-click="handleCheckboxChange"
|
||||||
>
|
>
|
||||||
按钮配置
|
{{ $t('preferences.sidebar.buttons') }}
|
||||||
</CheckboxItem>
|
</CheckboxItem>
|
||||||
<NumberFieldItem
|
<NumberFieldItem
|
||||||
v-model="sidebarWidth"
|
v-model="sidebarWidth"
|
||||||
|
|
|
@ -45,6 +45,9 @@
|
||||||
"fixed": "Fixed"
|
"fixed": "Fixed"
|
||||||
},
|
},
|
||||||
"sidebar": {
|
"sidebar": {
|
||||||
|
"buttons": "Show Buttons",
|
||||||
|
"buttonFixed": "Fixed",
|
||||||
|
"buttonCollapsed": "Collapsed",
|
||||||
"title": "Sidebar",
|
"title": "Sidebar",
|
||||||
"width": "Width",
|
"width": "Width",
|
||||||
"visible": "Show Sidebar",
|
"visible": "Show Sidebar",
|
||||||
|
|
|
@ -45,6 +45,9 @@
|
||||||
"fixed": "固定"
|
"fixed": "固定"
|
||||||
},
|
},
|
||||||
"sidebar": {
|
"sidebar": {
|
||||||
|
"buttons": "显示按钮",
|
||||||
|
"buttonFixed": "固定按钮",
|
||||||
|
"buttonCollapsed": "折叠按钮",
|
||||||
"title": "侧边栏",
|
"title": "侧边栏",
|
||||||
"width": "宽度",
|
"width": "宽度",
|
||||||
"visible": "显示侧边栏",
|
"visible": "显示侧边栏",
|
||||||
|
|
|
@ -1390,6 +1390,9 @@ importers:
|
||||||
'@vben-core/composables':
|
'@vben-core/composables':
|
||||||
specifier: workspace:*
|
specifier: workspace:*
|
||||||
version: link:../../composables
|
version: link:../../composables
|
||||||
|
'@vben-core/icons':
|
||||||
|
specifier: workspace:*
|
||||||
|
version: link:../../base/icons
|
||||||
'@vben-core/shadcn-ui':
|
'@vben-core/shadcn-ui':
|
||||||
specifier: workspace:*
|
specifier: workspace:*
|
||||||
version: link:../shadcn-ui
|
version: link:../shadcn-ui
|
||||||
|
|
Loading…
Reference in New Issue