Vben
2 years ago
committed by
GitHub
GitHub
27 changed files with 260 additions and 146 deletions
@ -0,0 +1,41 @@ |
|||||
|
import type { LayoutType } from '@vben-core/typings'; |
||||
|
|
||||
|
import type { VbenLayoutProps } from '../vben-layout'; |
||||
|
|
||||
|
import { computed } from 'vue'; |
||||
|
|
||||
|
export function useLayout(props: VbenLayoutProps) { |
||||
|
const currentLayout = computed(() => |
||||
|
props.isMobile ? 'sidebar-nav' : (props.layout as LayoutType), |
||||
|
); |
||||
|
|
||||
|
/** |
||||
|
* 是否全屏显示content，不需要侧边、底部、顶部、tab区域 |
||||
|
*/ |
||||
|
const isFullContent = computed(() => currentLayout.value === 'full-content'); |
||||
|
|
||||
|
/** |
||||
|
* 是否侧边混合模式 |
||||
|
*/ |
||||
|
const isSidebarMixedNav = computed( |
||||
|
() => currentLayout.value === 'sidebar-mixed-nav', |
||||
|
); |
||||
|
|
||||
|
/** |
||||
|
* 是否为头部导航模式 |
||||
|
*/ |
||||
|
const isHeaderNav = computed(() => currentLayout.value === 'header-nav'); |
||||
|
|
||||
|
/** |
||||
|
* 是否为混合导航模式 |
||||
|
*/ |
||||
|
const isMixedNav = computed(() => currentLayout.value === 'mixed-nav'); |
||||
|
|
||||
|
return { |
||||
|
currentLayout, |
||||
|
isFullContent, |
||||
|
isHeaderNav, |
||||
|
isMixedNav, |
||||
|
isSidebarMixedNav, |
||||
|
}; |
||||
|
} |
||||
@ -1 +1 @@ |
|||||
export { default as Spinner } from './spinner.vue'; |
export { default as VbenSpinner } from './spinner.vue'; |
||||
|
|||||
@ -0,0 +1 @@ |
|||||
|
export { default as VbenSwap } from './swap.vue'; |
||||
@ -0,0 +1,126 @@ |
|||||
|
<script lang="ts" setup> |
||||
|
interface Props { |
||||
|
/** |
||||
|
* @zh_CN 交换模式 |
||||
|
*/ |
||||
|
mode?: 'flip' | 'rotate'; |
||||
|
/** |
||||
|
* @zh_CN 开启时的样式 |
||||
|
*/ |
||||
|
offClass?: string; |
||||
|
/** |
||||
|
* @zh_CN 关闭时的样式 |
||||
|
*/ |
||||
|
onClass?: string; |
||||
|
} |
||||
|
|
||||
|
defineOptions({ |
||||
|
name: 'Swap', |
||||
|
}); |
||||
|
|
||||
|
withDefaults(defineProps<Props>(), { |
||||
|
mode: 'rotate', |
||||
|
onClass: '', |
||||
|
}); |
||||
|
</script> |
||||
|
|
||||
|
<template> |
||||
|
<label |
||||
|
:class="{ |
||||
|
'swap-flip': mode === 'flip', |
||||
|
'swap-rotate': mode === 'rotate', |
||||
|
}" |
||||
|
class="swap" |
||||
|
> |
||||
|
<input class="hidden" type="checkbox" /> |
||||
|
|
||||
|
<div :class="onClass" class="swap-on"> |
||||
|
<slot name="swap-on"></slot> |
||||
|
</div> |
||||
|
|
||||
|
<div :class="offClass" class="swap-off"> |
||||
|
<slot name="swap-off"></slot> |
||||
|
</div> |
||||
|
</label> |
||||
|
</template> |
||||
|
|
||||
|
<style scoped> |
||||
|
.swap { |
||||
|
@apply relative inline-grid cursor-pointer select-none place-content-center; |
||||
|
} |
||||
|
|
||||
|
.swap > * { |
||||
|
@apply col-start-1 row-start-1 duration-300 ease-out; |
||||
|
|
||||
|
transition-property: transform, opacity; |
||||
|
} |
||||
|
|
||||
|
.swap-rotate .swap-on, |
||||
|
.swap-rotate .swap-indeterminate, |
||||
|
.swap-rotate input:indeterminate ~ .swap-on { |
||||
|
@apply rotate-45; |
||||
|
} |
||||
|
|
||||
|
.swap-rotate input:checked ~ .swap-off, |
||||
|
.swap-active:where(.swap-rotate) .swap-off, |
||||
|
.swap-rotate input:indeterminate ~ .swap-off { |
||||
|
@apply -rotate-45; |
||||
|
} |
||||
|
|
||||
|
.swap-rotate input:checked ~ .swap-on, |
||||
|
.swap-active:where(.swap-rotate) .swap-on, |
||||
|
.swap-rotate input:indeterminate ~ .swap-indeterminate { |
||||
|
@apply rotate-0; |
||||
|
} |
||||
|
|
||||
|
.swap-flip { |
||||
|
transform-style: preserve-3d; |
||||
|
perspective: 16em; |
||||
|
} |
||||
|
|
||||
|
.swap-flip .swap-on, |
||||
|
.swap-flip .swap-indeterminate, |
||||
|
.swap-flip input:indeterminate ~ .swap-on { |
||||
|
@apply opacity-100; |
||||
|
|
||||
|
transform: rotateY(180deg); |
||||
|
backface-visibility: hidden; |
||||
|
} |
||||
|
|
||||
|
.swap-flip input:checked ~ .swap-off, |
||||
|
.swap-active:where(.swap-flip) .swap-off, |
||||
|
.swap-flip input:indeterminate ~ .swap-off { |
||||
|
@apply opacity-100; |
||||
|
|
||||
|
transform: rotateY(-180deg); |
||||
|
backface-visibility: hidden; |
||||
|
} |
||||
|
|
||||
|
.swap-flip input:checked ~ .swap-on, |
||||
|
.swap-active:where(.swap-flip) .swap-on, |
||||
|
.swap-flip input:indeterminate ~ .swap-indeterminate { |
||||
|
transform: rotateY(0deg); |
||||
|
} |
||||
|
|
||||
|
.swap input { |
||||
|
@apply appearance-none; |
||||
|
} |
||||
|
|
||||
|
.swap .swap-on, |
||||
|
.swap .swap-indeterminate, |
||||
|
.swap input:indeterminate ~ .swap-on { |
||||
|
@apply opacity-0; |
||||
|
} |
||||
|
|
||||
|
.swap input:checked ~ .swap-off, |
||||
|
.swap-active .swap-off, |
||||
|
.swap input:indeterminate ~ .swap-off { |
||||
|
@apply opacity-0; |
||||
|
} |
||||
|
|
||||
|
.swap input:checked ~ .swap-on, |
||||
|
.swap-active .swap-on, |
||||
|
.swap input:indeterminate ~ .swap-indeterminate { |
||||
|
@apply opacity-100; |
||||
|
} |
||||
|
</style> |
||||
Loading…
Reference in new issue