by2025/admin-vben5
9
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

chore: update deps

Browse Source
This commit is contained in:
vben
2024-06-01 22:17:52 +08:00
parent c531f0c154
commit f7b97e8a83
47 changed files with 569 additions and 322 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
packages/@vben-core/shared/typings/src/preference.ts
View File

@@ -61,6 +61,8 @@ interface Preference {
footerFixed: boolean;
/** 页脚是否可见 */
footerVisible: boolean;
/** 顶栏是否隐藏 */
headerHidden: boolean;
/** header显示模式 */
headerMode: LayoutHeaderMode;
/** 顶栏是否可见 */
@@ -103,6 +105,8 @@ interface Preference {
sideExpandOnHover: boolean;
/** 侧边栏扩展区域是否折叠 */
sideExtraCollapse: boolean;
/** 侧边栏是否隐藏 */
sideHidden: boolean;
/** 侧边栏是否可见 */
sideVisible: boolean;
/** 侧边栏宽度 */

2
packages/@vben-core/uikit/layout-ui/src/components/layout-header.vue
View File

@@ -112,7 +112,7 @@ function handleOpenMenu() {
<template>
<header
:style="style"
class="border-border top-0 flex w-full flex-[0_0_auto] items-center border-b"
class="border-border top-0 flex w-full flex-[0_0_auto] items-center border-b transition-[margin-top] duration-200"
>
<div v-if="slots.logo" :style="logoStyle">
<slot name="logo"></slot>

16
packages/@vben-core/uikit/layout-ui/src/components/layout-side.vue
View File

@@ -136,11 +136,11 @@ const style = computed((): CSSProperties => {
});
const extraStyle = computed((): CSSProperties => {
const { extraBackgroundColor, extraWidth, width, zIndex } = props;
const { extraBackgroundColor, extraWidth, show, width, zIndex } = props;
return {
backgroundColor: extraBackgroundColor,
left: `${width}px`,
width: extraVisible.value ? `${extraWidth}px` : 0,
width: extraVisible.value && show ? `${extraWidth}px` : 0,
zIndex,
};
});
@@ -156,9 +156,6 @@ const extraTitleStyle = computed((): CSSProperties => {
const contentWidthStyle = computed((): CSSProperties => {
const { collapseWidth, fixedExtra, isSideMixed, mixedWidth } = props;
if (isSideMixed && fixedExtra) {
// if (!extraVisible.value) {
// return {};
// }
return { width: `${collapse.value ? collapseWidth : mixedWidth}px` };
}
return {};
@@ -204,14 +201,6 @@ watchEffect(() => {
extraVisible.value = props.fixedExtra ? true : extraVisible.value;
});
// onClickOutside(asideRef, (event) => {
// const { fixedExtra, width } = props;
// // 防止点击 aside 区域关闭
// if (!fixedExtra && event.clientX >= width && extraVisible.value) {
// extraVisible.value = false;
// }
// });
function calcMenuWidthStyle(isHiddenDom: boolean): CSSProperties {
const { backgroundColor, extraWidth, fixedExtra, isSideMixed, show, width } =
props;
@@ -294,6 +283,7 @@ function handleScroll(event: Event) {
v-if="isSideMixed"
ref="asideRef"
:class="e('extra')"
class="transition-[width] duration-200"
:style="extraStyle"
>
<SideCollapseButton

10
packages/@vben-core/uikit/layout-ui/src/vben-layout.ts
View File

@@ -77,6 +77,11 @@ interface VbenLayoutProps {
* @default 10
*/
headerHeightOffset?: number;
/**
* 顶栏是否隐藏
* @default false
*/
headerHidden?: boolean;
/**
* header 显示模式
* @default 'fixed'
@@ -117,6 +122,11 @@ interface VbenLayoutProps {
* @default 48
*/
sideCollapseWidth?: number;
/**
* 侧边栏是否隐藏
* @default false
*/
sideHidden?: boolean;
/**
* 混合侧边扩展区域是否可见
* @default false

35
packages/@vben-core/uikit/layout-ui/src/vben-layout.vue
View File

@@ -33,6 +33,7 @@ const props = withDefaults(defineProps<Props>(), {
// headerBackgroundColor: 'hsl(var(--color-background))',
headerHeight: 50,
headerHeightOffset: 10,
headerHidden: false,
headerMode: 'fixed',
headerVisible: true,
@@ -41,6 +42,7 @@ const props = withDefaults(defineProps<Props>(), {
sideCollapseShowTitle: false,
// sideCollapse: false,
sideCollapseWidth: 60,
sideHidden: false,
sideMixedWidth: 80,
sideSemiDark: true,
sideTheme: 'dark',
@@ -68,7 +70,7 @@ const { y: mouseY } = useMouse({ type: 'client' });
// side是否处于hover状态展开菜单中
const sideExpandOnHovering = ref(false);
const sideHidden = ref(false);
// const sideHidden = ref(false);
const headerIsHidden = ref(false);
const realLayout = computed(() => {
@@ -104,11 +106,11 @@ const isHeaderAuto = computed(() => props.headerMode === 'auto');
* header区域高度
*/
const getHeaderHeight = computed(() => {
const { headerHeight, headerHeightOffset, headerVisible } = props;
const { headerHeight, headerHeightOffset } = props;
if (!headerVisible) {
return 0;
}
// if (!headerVisible) {
// return 0;
// }
// 顶部存在导航时，增加10
const offset = isMixedNav.value || isHeaderNav.value ? headerHeightOffset : 0;
@@ -118,7 +120,7 @@ const getHeaderHeight = computed(() => {
const headerWrapperHeight = computed(() => {
let height = 0;
if (props.headerVisible) {
if (props.headerVisible && !props.headerHidden) {
height += getHeaderHeight.value;
}
if (props.tabsVisible) {
@@ -154,12 +156,16 @@ const sidePaddingTop = computed(() => {
* 动态获取侧边宽度
*/
const getSideWidth = computed(() => {
const { isMobile, sideMixedWidth, sideWidth } = props;
const { isMobile, sideHidden, sideMixedWidth, sideWidth } = props;
let width = 0;
if (sideHidden) {
return width;
}
if (
!sideVisibleState.value ||
(sideHidden.value && !isSideMixedNav.value && !isMixedNav.value)
(sideHidden && !isSideMixedNav.value && !isMixedNav.value)
) {
return width;
}
@@ -190,6 +196,9 @@ const isSideMode = computed(() =>
);
const showSide = computed(() => {
// if (isMixedNav.value && !props.sideHidden) {
// return false;
// }
return isSideMode.value && sideVisible.value;
});
@@ -441,7 +450,7 @@ function handleClickMask() {
function handleToggleMenu() {
// sideVisible.value = !sideVisible.value;
sideHidden.value = !sideHidden.value;
// sideHidden.value = !sideHidden.value;
}
function handleOpenMenu() {
@@ -452,7 +461,7 @@ function handleOpenMenu() {
<template>
<div class="relative flex min-h-full w-full">
<slot name="preference"></slot>
<slot name="back-top"></slot>
<slot name="floating-button-group"></slot>
<LayoutSide
v-if="sideVisibleState"
v-model:collapse="sideCollapse"
@@ -498,13 +507,13 @@ function handleOpenMenu() {
>
<div
:style="headerWrapperStyle"
class="overflow-hidden transition-all duration-200 ease-in-out"
class="overflow-hidden transition-all duration-200"
>
<LayoutHeader
v-if="headerVisible"
:full-width="!isSideMode"
:height="getHeaderHeight"
:show="!fullContent"
:show="!fullContent && !headerHidden"
:side-hidden="sideHidden"
:show-toggle-btn="showHeaderToggleButton"
:width="mainStyle.width"
@@ -531,7 +540,7 @@ function handleOpenMenu() {
<!-- </div> -->
<LayoutContent
class="transition-[margin-top] duration-300 ease-in"
class="transition-[margin-top] duration-200"
:style="contentStyle"
:content-compact="contentCompact"
:content-compact-width="contentCompactWidth"

3
packages/@vben-core/uikit/shadcn-ui/src/components/back-top/back-top.vue
View File

@@ -14,6 +14,7 @@ defineOptions({ name: 'BackTop' });
const props = withDefaults(defineProps<Props>(), {
bottom: 40,
isGroup: false,
right: 40,
target: '',
visibilityHeight: 200,
@@ -31,7 +32,7 @@ const { handleClick, visible } = useBackTop(props);
<VbenButton
v-if="visible"
:style="backTopStyle"
class="bg-accent fixed bottom-5 right-5 h-10 w-10 rounded-full"
class="bg-accent data fixed bottom-10 right-5 h-10 w-10 rounded-full"
size="icon"
variant="icon"
@click="handleClick"

1
packages/@vben-core/uikit/shadcn-ui/src/components/back-top/backtop.ts
View File

@@ -31,6 +31,7 @@ export const backtopProps = {
export interface BacktopProps {
bottom?: number;
isGroup?: boolean;
right?: number;
target?: string;
visibilityHeight?: number;

46
packages/@vben-core/uikit/shadcn-ui/src/components/floating-button-group/floating-button-group.vue Normal file
View File

@@ -0,0 +1,46 @@
<script setup>
import { ref } from 'vue';
const isMenuOpen = ref(false);
const menuItems = ref(['1', '2', '3', '4']);
const toggleMenu = () => {
isMenuOpen.value = !isMenuOpen.value;
};
const handleMenuItemClick = (_item) => {
// console.log(111, item);
};
</script>
<template>
<div class="fixed bottom-5 right-5 flex flex-col-reverse items-center gap-2">
<button
class="flex h-12 w-12 items-center justify-center rounded-full bg-blue-500 text-xl text-white transition-transform duration-300"
:class="{ 'rotate-45': isMenuOpen }"
@click="toggleMenu"
>
✖
</button>
<div
class="absolute bottom-16 right-0 flex flex-col-reverse gap-2 transition-all duration-300"
:class="{
'visible translate-y-0 opacity-100': isMenuOpen,
'invisible translate-y-2 opacity-0': !isMenuOpen,
}"
>
<button
v-for="(item, index) in menuItems"
:key="index"
class="flex h-12 w-12 items-center justify-center rounded-full bg-blue-500 text-xl text-white"
@click="handleMenuItemClick(item)"
>
{{ item }}
</button>
</div>
</div>
</template>
<style scoped>
/* 可以在这里添加任何需要的额外样式 */
</style>

1
packages/@vben-core/uikit/shadcn-ui/src/components/floating-button-group/index.ts Normal file
View File

@@ -0,0 +1 @@
export { default as VbenFloatingButtonGroup } from './floating-button-group.vue';

1
packages/@vben-core/uikit/shadcn-ui/src/components/index.ts
View File

@@ -7,6 +7,7 @@ export * from './button';
export * from './checkbox';
export * from './context-menu';
export * from './dropdown-menu';
export * from './floating-button-group';
export * from './full-screen';
export * from './hover-card';
export * from './icon';

9
packages/@vben-core/uikit/shadcn-ui/src/components/logo/logo.vue
View File

@@ -1,8 +1,6 @@
<script setup lang="ts">
import { computed } from 'vue';
import { VbenAvatar } from '../avatar';
interface Props {
/**
* Logo 图标 alt
@@ -42,7 +40,7 @@ const props = withDefaults(defineProps<Props>(), {
alt: 'Vben',
collapse: false,
href: 'javascript:void 0',
logoSize: 32,
logoSize: 36,
src: '',
text: '',
theme: 'light',
@@ -59,13 +57,12 @@ const logoClass = computed(() => {
class="flex h-full items-center gap-2 overflow-hidden px-3 font-semibold leading-normal transition-all duration-500"
:class="$attrs.class"
>
<VbenAvatar
<img
v-if="src"
:src="src"
:alt="alt"
:height="logoSize"
:width="logoSize"
class="relative size-9 rounded-none bg-transparent"
class="relative rounded-none bg-transparent"
/>
<span
v-if="!collapse"

1
packages/@vben-core/uikit/shadcn-ui/src/styles/index.css
View File

@@ -33,6 +33,7 @@
opacity: 0;
transform: translateX(30px) skewX(-30deg);
}
/*
.breadcrumb-transition-move,
.breadcrumb-transition-enter-active {