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