github_mirrors/vue-vben-admin
1
0
Fork 0
mirror of https://github.com/vbenjs/vue-vben-admin.git synced 2025-08-26 16:46:19 +08:00
Code Issues Packages Projects Releases Wiki Activity

perf: all icons used in the core are offline (#4173)

Browse Source 
* perf: all icons used in the core are offline

* chore: update default icon

* chore: update shadow
This commit is contained in:
Vben
2024-08-17 21:11:07 +08:00
committed by GitHub
parent 66808582ff
commit 3c17f4e9f8
30 changed files with 320 additions and 347 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
packages/@core/ui-kit/layout-ui/src/components/layout-content.vue
View File

@@ -54,7 +54,6 @@ const style = computed((): CSSProperties => {
<template>
<main ref="contentElement" :style="style" class="bg-background-deep relative">
<!-- <BlurShadow :style="shadowStyle" /> -->
<slot :overlay-style="overlayStyle" name="overlay"></slot>
<slot></slot>
</main>

8
packages/@core/ui-kit/layout-ui/src/components/widgets/sidebar-collapse-button.vue
View File

@@ -1,5 +1,5 @@
<script setup lang="ts">
import { MdiMenuClose, MdiMenuOpen } from '@vben-core/icons';
import { ChevronsLeft, ChevronsRight } from '@vben-core/icons';
const collapsed = defineModel<boolean>('collapsed');
@@ -10,10 +10,10 @@ function handleCollapsed() {
<template>
<div
class="flex-center hover:text-foreground text-foreground/60 hover:bg-accent-hover bg-accent absolute bottom-2 left-3 z-10 cursor-pointer rounded-sm p-1 transition-all duration-300"
class="flex-center hover:text-foreground text-foreground/60 hover:bg-accent-hover bg-accent absolute bottom-2 left-3 z-10 cursor-pointer rounded-sm p-1"
@click.stop="handleCollapsed"
>
<MdiMenuClose v-if="collapsed" class="size-4" />
<MdiMenuOpen v-else class="size-4" />
<ChevronsRight v-if="collapsed" class="size-4" />
<ChevronsLeft v-else class="size-4" />
</div>
</template>

8
packages/@core/ui-kit/layout-ui/src/components/widgets/sidebar-fixed-button.vue
View File

@@ -1,5 +1,5 @@
<script setup lang="ts">
import { MdiPin, MdiPinOff } from '@vben-core/icons';
import { Pin, PinOff } from '@vben-core/icons';
const expandOnHover = defineModel<boolean>('expandOnHover');
@@ -10,10 +10,10 @@ function toggleFixed() {
<template>
<div
class="flex-center hover:text-foreground text-foreground/60 hover:bg-accent-hover bg-accent absolute bottom-2 right-3 z-10 cursor-pointer rounded-sm p-1 transition-all duration-300"
class="flex-center hover:text-foreground text-foreground/60 hover:bg-accent-hover bg-accent absolute bottom-2 right-3 z-10 cursor-pointer rounded-sm p-[5px] transition-all duration-300"
@click="toggleFixed"
>
<MdiPinOff v-if="!expandOnHover" />
<MdiPin v-else />
<PinOff v-if="!expandOnHover" class="size-3.5" />
<Pin v-else class="size-3.5" />
</div>
</template>

2
packages/@core/ui-kit/layout-ui/src/vben-layout.vue
View File

@@ -474,7 +474,7 @@ function handleOpenMenu() {
>
<div
:style="headerWrapperStyle"
class="overflow-hidden transition-all duration-200"
class="overflow-hidden shadow-[0_16px_24px_hsl(var(--background))] transition-all duration-200"
>
<LayoutHeader
v-if="headerVisible"

26
packages/@core/ui-kit/shadcn-ui/src/components/scrollbar/scrollbar.vue
View File

@@ -42,15 +42,17 @@ const showShadowBottom = computed(() => props.shadow && props.shadowBottom);
const showShadowLeft = computed(() => props.shadow && props.shadowLeft);
const showShadowRight = computed(() => props.shadow && props.shadowRight);
const computedShadowClasses = computed(() => ({
'shadow-both':
!isAtLeft.value &&
!isAtRight.value &&
showShadowLeft.value &&
showShadowRight.value,
'shadow-left': !isAtLeft.value && showShadowLeft.value,
'shadow-right': !isAtRight.value && showShadowRight.value,
}));
const computedShadowClasses = computed(() => {
return {
'both-shadow':
!isAtLeft.value &&
!isAtRight.value &&
showShadowLeft.value &&
showShadowRight.value,
'left-shadow': !isAtLeft.value && showShadowLeft.value,
'right-shadow': !isAtRight.value && showShadowRight.value,
};
});
function handleScroll(event: Event) {
const target = event.target as HTMLElement;
@@ -107,11 +109,11 @@ function handleScroll(event: Event) {
<style scoped>
.vben-scrollbar {
&:not(.shadow-both).shadow-left {
&:not(.both-shadow).left-shadow {
mask-image: linear-gradient(90deg, transparent, #000 16px);
}
&:not(.shadow-both).shadow-right {
&:not(.both-shadow).right-shadow {
mask-image: linear-gradient(
90deg,
#000 0%,
@@ -120,7 +122,7 @@ function handleScroll(event: Event) {
);
}
&.shadow-both {
&.both-shadow {
mask-image: linear-gradient(
90deg,
transparent,

8
packages/@core/ui-kit/tabs-ui/src/components/tabs-chrome/tabs.vue
View File

@@ -5,7 +5,7 @@ import type { TabConfig, TabsProps } from '../../types';
import { computed, ref } from 'vue';
import { MdiPin, X } from '@vben-core/icons';
import { Pin, X } from '@vben-core/icons';
import { VbenContextMenu, VbenIcon } from '@vben-core/shadcn-ui';
interface Props extends TabsProps {}
@@ -62,7 +62,7 @@ const tabsView = computed((): TabConfig[] => {
:style="style"
class="tabs-chrome !flex h-full w-max pr-6"
>
<TransitionGroup name="slide-left">
<TransitionGroup name="slide-right">
<div
v-for="(tab, i) in tabsView"
:key="tab.key"
@@ -70,7 +70,7 @@ const tabsView = computed((): TabConfig[] => {
:class="[{ 'is-active': tab.key === active, dragable: !tab.affixTab }]"
:data-active-tab="active"
:data-index="i"
class="tabs-chrome__item draggable group relative -mr-3 flex h-full select-none items-center"
class="tabs-chrome__item draggable translate-all group relative -mr-3 flex h-full select-none items-center"
data-tab-item="true"
@click="active = tab.key"
>
@@ -119,7 +119,7 @@ const tabsView = computed((): TabConfig[] => {
class="hover:bg-accent stroke-accent-foreground/80 hover:stroke-accent-foreground text-accent-foreground/80 group-[.is-active]:text-accent-foreground mt-[2px] size-3 cursor-pointer rounded-full transition-all"
@click.stop="() => emit('close', tab.key)"
/>
<MdiPin
<Pin
v-show="tab.affixTab && tabsView.length > 1 && tab.closable"
class="hover:text-accent-foreground text-accent-foreground/80 group-[.is-active]:text-accent-foreground mt-[2px] size-3.5 cursor-pointer rounded-full transition-all"
@click.stop="() => emit('unpin', tab)"

8
packages/@core/ui-kit/tabs-ui/src/components/tabs/tabs.vue
View File

@@ -5,7 +5,7 @@ import type { TabConfig, TabsProps } from '../../types';
import { computed } from 'vue';
import { MdiPin, X } from '@vben-core/icons';
import { Pin, X } from '@vben-core/icons';
import { VbenContextMenu, VbenIcon } from '@vben-core/shadcn-ui';
interface Props extends TabsProps {}
@@ -65,7 +65,7 @@ const tabsView = computed((): TabConfig[] => {
:class="contentClass"
class="relative !flex h-full w-max items-center pr-6"
>
<TransitionGroup name="slide-left">
<TransitionGroup name="slide-right">
<div
v-for="(tab, i) in tabsView"
:key="tab.key"
@@ -77,7 +77,7 @@ const tabsView = computed((): TabConfig[] => {
typeWithClass.content,
]"
:data-index="i"
class="tab-item [&:not(.is-active)]:hover:bg-accent group relative flex cursor-pointer select-none"
class="tab-item [&:not(.is-active)]:hover:bg-accent translate-all group relative flex cursor-pointer select-none"
data-tab-item="true"
@click="active = tab.key"
>
@@ -98,7 +98,7 @@ const tabsView = computed((): TabConfig[] => {
class="hover:bg-accent stroke-accent-foreground/80 hover:stroke-accent-foreground dark:group-[.is-active]:text-accent-foreground group-[.is-active]:text-primary size-3 cursor-pointer rounded-full transition-all"
@click.stop="() => emit('close', tab.key)"
/>
<MdiPin
<Pin
v-show="tab.affixTab && tabsView.length > 1 && tab.closable"
class="hover:bg-accent hover:stroke-accent-foreground group-[.is-active]:text-primary dark:group-[.is-active]:text-accent-foreground mt-[2px] size-3.5 cursor-pointer rounded-full transition-all"
@click.stop="() => emit('unpin', tab)"

4
packages/@core/ui-kit/tabs-ui/src/tabs-view.vue
View File

@@ -60,9 +60,11 @@ useTabsDrag(props, emit);
>
<VbenScrollbar
ref="scrollbarRef"
:shadow-bottom="false"
:shadow-top="false"
class="h-full"
horizontal
scroll-bar-class="z-10 hidden"
scroll-bar-class="z-10 hidden "
shadow
shadow-left
shadow-right

2
packages/@core/ui-kit/tabs-ui/src/use-tabs-drag.ts
View File

@@ -31,7 +31,7 @@ export function useTabsDrag(props: TabsProps, emit: EmitType) {
const resetElState = async () => {
el.style.cursor = 'default';
el.classList.remove('dragging');
// el.classList.remove('dragging');
el.querySelector('.draggable')?.classList.remove('dragging');
};