feat: add swap component (#4149)

vbenjs · Aug 14, 2024 · 83fcdec · 83fcdec
1 parent b287400
commit 83fcdec
Show file tree

Hide file tree

Showing 27 changed files with 260 additions and 146 deletions.
diff --git a/docs/src/guide/in-depth/theme.md b/docs/src/guide/in-depth/theme.md
@@ -239,9 +239,11 @@ css 变量内的颜色，必须使用 `hsl` 格式，如 `0 0% 100%`，不需要
 
 ```css
 /* */
-:root {
+.dark,
+.dark[data-theme='custom'],
+.dark[data-theme='default'] {
  /* Background color for <Card /> */
- --card: 0 0% 30%;
+ --card: 222.34deg 10.43% 12.27%;
 }
 ```
 

diff --git a/internal/node-utils/src/spinner.ts b/internal/node-utils/src/spinner.ts
@@ -1,4 +1,4 @@
-import ora, { Ora } from 'ora';
+import ora, { type Ora } from 'ora';
 
 interface SpinnerOptions {
  failedText?: string;

diff --git a/packages/@core/base/design/src/design-tokens/dark/index.css b/packages/@core/base/design/src/design-tokens/dark/index.css
@@ -52,12 +52,12 @@
  --secondary-foreground: 0 0% 98%;
 
  /* Used for accents such as hover effects on <DropdownMenuItem>, <SelectItem>...etc */
- --accent: 240 3.7% 15.9%;
- --accent-hover: 240 3.7% 20.9%;
+ --accent: 216 5% 19%;
+ --accent-hover: 216 5% 24%;
  --accent-foreground: 0 0% 98%;
 
  /* Darker color */
- --heavy: 240 3.7% 20.9%;
+ --heavy: 216 5% 24%;
  --heavy-foreground: var(--accent-foreground);
 
  /* Default border color */

diff --git a/packages/@core/base/design/src/design-tokens/default/index.css b/packages/@core/base/design/src/design-tokens/default/index.css
@@ -89,7 +89,7 @@
 
  /* menu */
  --sidebar: 0 0% 100%;
- --sidebar-deep: 210 11.11% 96.47%;
+ --sidebar-deep: 0 0% 100%;
  --menu: var(--sidebar);
 
  accent-color: var(--primary);

diff --git a/packages/@core/ui-kit/layout-ui/src/components/layout-header.vue b/packages/@core/ui-kit/layout-ui/src/components/layout-header.vue
@@ -84,7 +84,7 @@ function handleToggleMenu() {
  </div>
  <VbenIconButton
  v-if="showToggleBtn || isMobile"
- class="my-0 ml-2 mr-1 rounded"
+ class="my-0 ml-2 mr-1 rounded-md"
  @click="handleToggleMenu"
  >
  <Menu class="size-4" />

diff --git a/packages/@core/ui-kit/layout-ui/src/components/layout-sidebar.vue b/packages/@core/ui-kit/layout-ui/src/components/layout-sidebar.vue
@@ -24,9 +24,8 @@ interface Props {
  domVisible?: boolean;
  /**
  * 扩展区域宽度
- * @default 180
  */
- extraWidth?: number;
+ extraWidth: number;
  /**
  * 固定扩展区域
  * @default false
@@ -69,13 +68,12 @@ interface Props {
  /**
  * 主题
  */
- theme?: string;
+ theme: string;
 
  /**
  * 宽度
- * @default 180
  */
- width?: number;
+ width: number;
  /**
  * zIndex
  * @default 0
@@ -87,16 +85,13 @@ const props = withDefaults(defineProps<Props>(), {
  collapseHeight: 42,
  collapseWidth: 48,
  domVisible: true,
- extraWidth: 180,
  fixedExtra: false,
  isSidebarMixed: false,
  marginTop: 0,
  mixedWidth: 70,
  paddingTop: 0,
  show: true,
  showCollapseButton: true,
- theme: 'dark',
- width: 180,
  zIndex: 0,
 });
 
@@ -181,10 +176,8 @@ const extraContentStyle = computed((): CSSProperties => {
 });
 
 const collapseStyle = computed((): CSSProperties => {
- const { collapseHeight } = props;
-
  return {
- height: `${collapseHeight}px`,
+ height: `${props.collapseHeight}px`,
  };
 });
 

diff --git a/packages/@core/ui-kit/layout-ui/src/hooks/use-layout.ts b/packages/@core/ui-kit/layout-ui/src/hooks/use-layout.ts
@@ -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,
+ };
+}
diff --git a/packages/@core/ui-kit/layout-ui/src/vben-layout.ts b/packages/@core/ui-kit/layout-ui/src/vben-layout.ts
@@ -62,12 +62,6 @@ interface VbenLayoutProps {
  * @default 48
  */
  headerHeight?: number;
- /**
- * header高度增加高度
- * 在顶部存在导航时，额外加高header高度
- * @default 10
- */
- headerHeightOffset?: number;
  /**
  * 顶栏是否隐藏
  * @default false
@@ -133,11 +127,7 @@ interface VbenLayoutProps {
  * @default 80
  */
  sidebarMixedWidth?: number;
- /**
- * 侧边栏是否半深色
- * @default false
- */
- sidebarSemiDark?: boolean;
+
  /**
  * 侧边栏
  * @default dark