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-05-28 23:38:36 +08:00
parent f2644dbbc5
commit 11a36ef03f
32 changed files with 327 additions and 274 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
packages/@vben-core/shared/design-tokens/src/dark/index.scss
View File

@@ -3,7 +3,7 @@
/* --color-background: 240 6% 18%; */
// --color-body: 220deg 13.04% 8%;
--color-body: 220deg 13.04% 8%;
// --color-body: hsl(240deg 11% 4%);
--color-background: 220deg 13.04% 8%;
/* --color-background: 219 42% 11%; */
@@ -76,20 +76,4 @@
/* 基本圆角大小 */
--radius-base: 0.5rem;
/* ======================================== */
/* =============component & UI============= */
/* ======================================== */
/* --color-login-background: 219 42% 11%; */
/* 图标颜色 */
/* authentication */
--color-authentication-from: hsl(240deg 11% 6%);
--color-authentication-to: hsl(240deg 11% 6%);
color-scheme: dark;
}

12
packages/@vben-core/shared/design-tokens/src/default/index.scss
View File

@@ -1,13 +1,9 @@
/* https://gavin-yyc.github.io/colorconvert/ */
:root {
--font-geist-sans: 'geist-sans', -apple-system, blinkmacsystemfont, 'Segoe UI',
roboto, helvetica, arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
'Segoe UI Symbol';
/* 基础背景颜色颜色 */
/* --color-background: 210deg 25% 96.86%; */
--color-body: 210deg 25% 96.86%;
// --color-main: 210deg 25% 96.86%;
--color-background: 0 0 100%;
// --color-darken-background: 220deg 13.04% 8%;
@@ -86,8 +82,6 @@
/* ======================================== */
/* --color-login-background: 0 0 100%; */
/* menu */
--color-menu-dark: 225deg 12% 13%;
--color-menu-dark-darken: 223deg 11% 10%;
@@ -96,8 +90,4 @@
--color-menu: 0deg 0% 100%;
--color-menu-darken: 0deg 0% 95%;
// --color-menu-opened: 0deg 0% 100%;
/* authentication */
--color-authentication-from: hsl(231deg 61% 44%);
--color-authentication-to: hsl(218deg 70% 42%);
}

23
packages/@vben-core/shared/design/src/scss/common/base.scss
View File

@@ -10,29 +10,26 @@ html {
*,
::after,
::before {
@apply border-border;
box-sizing: border-box;
border-color: hsl(var(--color-border));
border-style: solid;
border-width: 0;
}
body.invert {
filter: invert(100%);
body.invert-mode {
@apply invert;
}
body.grayscale {
--tw-grayscale: grayscale(100%);
filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast)
var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate)
var(--tw-sepia) var(--tw-drop-shadow);
body.grayscale-mode {
@apply grayscale;
}
html {
font-size: var(--font-size-base);
@apply text-foreground bg-background;
// font-size: 62.5%;
font-variation-settings: normal;
color: hsl(var(--color-foreground));
background-color: hsl(var(--color-background));
text-size-adjust: 100%;
font-synthesis-weight: none;
scroll-behavior: smooth;
@@ -73,7 +70,7 @@ html.dark::view-transition-new(root) {
input::placeholder,
textarea::placeholder {
color: hsl(var(--color-input-placeholder)) !important;
// color: hsl(var(--color-input-placeholder)) !important;
opacity: 1;
}

51
packages/@vben-core/shared/design/src/scss/common/entry.scss
View File

@@ -1,51 +0,0 @@
$max-child: 5;
@for $i from 1 through $max-child {
* > .enter-x:nth-child(#{$i}) {
transform: translateX(50px);
}
* > .-enter-x:nth-child(#{$i}) {
transform: translateX(-50px);
}
* > .enter-x:nth-child(#{$i}),
* > .-enter-x:nth-child(#{$i}) {
// z-index: 10 - $i;
opacity: 0;
animation: enter-x-animation 0.3s ease-in-out 0.2s;
animation-delay: 0.1s * $i;
animation-fill-mode: forwards;
}
* > .enter-y:nth-child(#{$i}) {
transform: translateY(50px);
}
* > .-enter-y:nth-child(#{$i}) {
transform: translateY(-50px);
}
* > .enter-y:nth-child(#{$i}),
* > .-enter-y:nth-child(#{$i}) {
// z-index: 10 - $i;
opacity: 0;
animation: enter-y-animation 0.3s ease-in-out 0.2s;
animation-delay: 0.1s * $i;
animation-fill-mode: forwards;
}
}
@keyframes enter-x-animation {
to {
opacity: 1;
transform: translateX(0);
}
}
@keyframes enter-y-animation {
to {
opacity: 1;
transform: translateY(0);
}
}

4
packages/@vben-core/shared/design/src/scss/index.scss
View File

@@ -1,8 +1,4 @@
/** css 样式重置 */
@import 'modern-normalize/modern-normalize.css';
/** 元素进入动画 */
@import './common/entry';
@import './common/base';
@import './transition';
@import './nprogress';

78
packages/@vben-core/shared/design/src/scss/nprogress.scss
View File

@@ -1,78 +0,0 @@
/* Make clicks pass-through */
#nprogress {
pointer-events: none;
}
#nprogress .bar {
position: fixed;
top: 0;
left: 0;
z-index: 1031;
width: 100%;
height: 2px;
background: hsl(var(--color-primary));
}
/* Fancy blur effect */
#nprogress .peg {
position: absolute;
right: 0;
display: block;
width: 100px;
height: 100%;
box-shadow:
0 0 10px hsl(var(--color-primary)),
0 0 5px hsl(var(--color-primary));
opacity: 1;
transform: rotate(3deg) translate(0, -4px);
}
/* Remove these to get rid of the spinner */
#nprogress .spinner {
position: fixed;
top: 15px;
right: 15px;
z-index: 1031;
display: block;
}
#nprogress .spinner-icon {
box-sizing: border-box;
width: 18px;
height: 18px;
border: solid 2px transparent;
border-top-color: hsl(var(--color-primary));
border-left-color: hsl(var(--color-primary));
border-radius: 50%;
animation: nprogress-spinner 400ms linear infinite;
}
.nprogress-custom-parent {
position: relative;
overflow: hidden;
}
.nprogress-custom-parent #nprogress .spinner,
.nprogress-custom-parent #nprogress .bar {
position: absolute;
}
@keyframes nprogress-spinner {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
@keyframes nprogress-spinner {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}

12
packages/@vben-core/shared/design/src/tailwind.css
View File

@@ -1,21 +1,15 @@
@tailwind base;
@tailwind components;
@tailwind utilities;
@layer base {
html {
@apply font-sans;
}
}
@layer components {
.flex-center {
@apply flex items-center justify-center;
}
.flex-col-center {
@apply flex flex-col items-center justify-center;
}
.outline-box {
@apply outline-border relative cursor-pointer rounded-md p-1 outline outline-1;
@layer components {
.outline-box {
&:after {
@apply absolute left-1/2 top-1/2 z-20 h-0 w-[1px] rounded-sm opacity-0 outline outline-2 outline-transparent transition-all duration-300 content-[''];
}

2
packages/@vben-core/uikit/layout-ui/package.json
View File

@@ -46,7 +46,7 @@
"@vben-core/shadcn-ui": "workspace:*",
"@vben-core/toolkit": "workspace:*",
"@vben-core/typings": "workspace:*",
"@vueuse/core": "^10.9.0",
"@vueuse/core": "^10.10.0",
"vue": "3.4.27"
}
}

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

@@ -1,7 +1,6 @@
<script setup lang="ts">
import { IcRoundMenu } from '@vben-core/iconify';
import { VbenIconButton } from '@vben-core/shadcn-ui';
import { useNamespace } from '@vben-core/toolkit';
import type { CSSProperties } from 'vue';
@@ -82,8 +81,6 @@ const emit = defineEmits<{ openMenu: []; toggleMenu: [] }>();
const slots = useSlots();
const { b, e } = useNamespace('header');
const style = computed((): CSSProperties => {
const { backgroundColor, fullWidth, height, show } = props;
const right = !show || !fullWidth ? undefined : 0;
@@ -113,13 +110,16 @@ function handleOpenMenu() {
</script>
<template>
<header :class="b()" :style="style">
<header
:style="style"
class="border-border top-0 flex w-full flex-[0_0_auto] items-center border-b"
>
<div v-if="slots.logo" :style="logoStyle">
<slot name="logo"></slot>
</div>
<VbenIconButton
v-if="showToggleBtn"
:class="e('toggle-btn')"
class="my-0 ml-2 mr-1 rounded"
@click="handleToggleMenu"
>
<IcRoundMenu class="size-5" />
@@ -127,7 +127,7 @@ function handleOpenMenu() {
<VbenIconButton
v-if="isMobile"
:class="e('toggle-btn')"
class="my-0 ml-2 mr-1 rounded"
@click="handleOpenMenu"
>
<IcRoundMenu class="size-5" />
@@ -136,21 +136,3 @@ function handleOpenMenu() {
<slot></slot>
</header>
</template>
<style scoped lang="scss">
@import '@vben-core/design/global';
@include b('header') {
top: 0;
display: flex;
flex: 0 0 auto;
align-items: center;
width: 100%;
border-bottom: 1px solid hsl(var(--color-border));
@include e('toggle-btn') {
margin: 0 4px 0 8px;
border-radius: 4px;
}
}
</style>

24
packages/@vben-core/uikit/layout-ui/src/components/layout-tabs.vue
View File

@@ -1,6 +1,4 @@
<script setup lang="ts">
import { useNamespace } from '@vben-core/toolkit';
import type { CSSProperties } from 'vue';
import { computed } from 'vue';
@@ -25,8 +23,6 @@ const props = withDefaults(defineProps<Props>(), {
height: 30,
});
const { b, e } = useNamespace('tabs');
const hiddenStyle = computed((): CSSProperties => {
const { height } = props;
return {
@@ -45,26 +41,10 @@ const style = computed((): CSSProperties => {
</script>
<template>
<section :class="b()" :style="style">
<section :style="style" class="border-border flex w-full border-b">
<slot></slot>
<div :class="e('toolbar')">
<div class="flex items-center">
<slot name="toolbar"></slot>
</div>
</section>
</template>
<style scoped lang="scss">
@import '@vben-core/design/global';
@include b('tabs') {
display: flex;
width: 100%;
border-bottom: 1px solid hsl(var(--color-border));
// transition: all 0.2s;
@include e('toolbar') {
display: flex;
align-items: center;
}
}
</style>

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

@@ -1,6 +1,4 @@
<script setup lang="ts">
import { useNamespace } from '@vben-core/toolkit';
import type { CSSProperties } from 'vue';
import { useMouse, useScroll, useThrottleFn } from '@vueuse/core';
@@ -60,7 +58,6 @@ const sideExtraCollapse = defineModel<boolean>('sideExtraCollapse');
const sideExpandOnHover = defineModel<boolean>('sideExpandOnHover');
const sideVisible = defineModel<boolean>('sideVisible', { default: true });
const { b, e, is } = useNamespace('layout');
const {
arrivedState,
directions,
@@ -453,7 +450,7 @@ function handleOpenMenu() {
</script>
<template>
<div :class="[b(), is(realLayout, true)]">
<div class="relative flex min-h-full w-full">
<slot name="preference"></slot>
<slot name="back-top"></slot>
<LayoutSide
@@ -496,8 +493,13 @@ function handleOpenMenu() {
</template>
</LayoutSide>
<div :class="e('main')">
<div :style="headerWrapperStyle" :class="e('header-wrapper')">
<div
class="flex flex-1 flex-col overflow-hidden transition-all duration-300 ease-in"
>
<div
:style="headerWrapperStyle"
class="overflow-hidden transition-all duration-200 ease-in-out"
>
<LayoutHeader
v-if="headerVisible"
:full-width="!isSideMode"
@@ -529,7 +531,7 @@ function handleOpenMenu() {
<!-- </div> -->
<LayoutContent
:class="e('content')"
class="transition-[margin-top] duration-300 ease-in"
:style="contentStyle"
:content-compact="contentCompact"
:content-compact-width="contentCompactWidth"
@@ -555,50 +557,9 @@ function handleOpenMenu() {
</div>
<div
v-if="maskVisible"
:class="e('mask')"
class="fixed left-0 top-0 h-full w-full bg-[rgb(0_0_0_/_40%)] transition-[background-color] duration-200"
:style="maskStyle"
@click="handleClickMask"
></div>
</div>
</template>
<style scoped lang="scss">
@import '@vben-core/design/global';
@include b('layout') {
position: relative;
display: flex;
width: 100%;
min-height: 100%;
@include e('main') {
display: flex;
flex: auto;
flex: 1;
flex-direction: column;
overflow-x: hidden;
background-color: hsl(var(--color-body));
border-left: 1px solid hsl(var(--color-border));
transition: all 0.3s ease;
}
@include e('content') {
transition: margin-top 0.3s ease;
}
@include e('header-wrapper') {
overflow: hidden;
transition: all 0.25s ease-in-out;
}
@include e('mask') {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgb(0 0 0 / 40%);
transition: background-color 0.2s;
}
}
</style>

2
packages/@vben-core/uikit/menu-ui/package.json
View File

@@ -46,7 +46,7 @@
"@vben-core/shadcn-ui": "workspace:*",
"@vben-core/toolkit": "workspace:*",
"@vben-core/typings": "workspace:*",
"@vueuse/core": "^10.9.0",
"@vueuse/core": "^10.10.0",
"vue": "3.4.27"
}
}

4
packages/@vben-core/uikit/shadcn-ui/package.json
View File

@@ -45,10 +45,10 @@
"@vben-core/iconify": "workspace:*",
"@vben-core/toolkit": "workspace:*",
"@vben-core/typings": "workspace:*",
"@vueuse/core": "^10.9.0",
"@vueuse/core": "^10.10.0",
"class-variance-authority": "^0.7.0",
"clsx": "2.1.1",
"radix-vue": "^1.8.1",
"radix-vue": "^1.8.2",
"tailwind-merge": "^2.3.0",
"vue": "3.4.27",
"vue-sonner": "^1.1.2"