base6-ui 1.1.15 → 2.0.0

package/es/components/BaseTabs/tabs.mjs

@@ -0,0 +1,43 @@
+import { defineComponent as o, computed as n, h as d } from "vue";
+import { tabsProps as m, NTabs as p } from "naive-ui";
+import b from "../../hooks/useNaiveConfigProvideContext.mjs";
+import { getBaseTabsCssVar as v } from "./cssVar.mjs";
+const c = {
+  ...m,
+  themeOverrides: Object,
+  type: {
+    type: String,
+    default: "bar"
+  }
+}, T = o({
+  name: "BaseTabs",
+  props: c,
+  setup(t, { slots: e }) {
+    const { mergedThemeOverridesRef: a } = b(), s = () => {
+      if (e.prefix) return () => e.prefix();
+    }, u = () => {
+      if (e.suffix) return () => e.suffix();
+    }, r = n(() => t.type === "segment-round"), f = n(() => r.value ? "segment" : t.type), i = n(() => {
+      if (r.value)
+        return v(a.value?.Tabs);
+    });
+    return () => d(
+      p,
+      {
+        ...t,
+        type: f.value,
+        class: `base-tabs ${r.value ? "base-tabs-segment-type-round" : ""}`,
+        style: i.value
+      },
+      {
+        default: () => e.default ? e.default() : void 0,
+        prefix: s(),
+        suffix: u()
+      }
+    );
+  }
+});
+export {
+  c as baseTabsProps,
+  T as default
+};

package/es/components/index.d.ts

@@ -12,5 +12,7 @@ export * from './BaseProductIntroduction';
 export { default as BaseProgress } from './BaseProgress';
 export * from './BaseSelect';
 export * from './BaseSlider';
+export * from './BaseSteps';
 export * from './BaseSwitch';
 export * from './BaseSystemActions';
+export * from './BaseTabs';

package/es/config/themes/common.d.ts

@@ -39,4 +39,5 @@ export declare const commonBase: {
     fontWeightNormal: string;
     fontWeightActive: string;
     tabBorderRadius: string;
+    tabRoundBorderRadius: string;
 };

package/es/config/themes/common.mjs

@@ -33,7 +33,8 @@ const a = {
   tabPaddingLarge: "0 0 4px 0",
   fontWeightNormal: "400",
   fontWeightActive: "500",
-  tabBorderRadius: "19px"
+  tabBorderRadius: "10px",
+  tabRoundBorderRadius: "19px"
 };
 export {
   a as commonBase

package/es/config/themes/components/baseComponent/dark.d.ts

@@ -1,8 +1,9 @@
-import { TooltipProps, StepsProps, TabsProps, PopconfirmProps, TreeProps, PaginationProps, BreadcrumbProps } from 'naive-ui';
+import { TooltipProps, StepsProps, PopconfirmProps, TreeProps, PaginationProps, BreadcrumbProps } from 'naive-ui';
+import { BaseTabsThemeOverrides } from '../../../../types/themes/components';
 export declare const TooltipThemeDark: TooltipProps['themeOverrides'];
 export declare const PopconfirmThemeDark: PopconfirmProps['themeOverrides'];
 export declare const TreeThemeDark: TreeProps['themeOverrides'];
 export declare const PaginationThemeDark: PaginationProps['themeOverrides'];
 export declare const BreadcrumbThemeDark: BreadcrumbProps['themeOverrides'];
-export declare const TabsThemeDark: TabsProps['themeOverrides'];
+export declare const TabsThemeDark: BaseTabsThemeOverrides;
 export declare const StepsThemeDark: StepsProps['themeOverrides'];

package/es/config/themes/components/baseComponent/dark.mjs

@@ -6,11 +6,16 @@ const l = {
   color: r["color-gray-3"],
   textColor: o["color-text-6"],
   padding: e.paddingBase
-}, n = {
+}, d = {
+  peers: {
+    Popover: {
+      borderRadius: "10px"
+    }
+  },
   fontSize: e.fontSizeMedium,
   iconColor: r["color-primary-6"],
   iconSize: e.iconSizeBase
-}, d = {
+}, n = {
   nodeTextColor: o["color-text-6"],
   arrowColor: o["color-text-3"],
   lineColor: r["color-gray-11"]
@@ -67,7 +72,8 @@ const l = {
   jumperTextColor: o["color-text-6"]
   // 修改跳转文字颜色
 }, m = {
-  // fontSize: string;          /* 面包屑整体字体大小 */
+  fontSize: "20px",
+  /* 面包屑整体字体大小 */
   // itemLineHeight: string;    /* 面包屑项的行高 */
   // fontWeightActive: string;  /* 当前项的字重（如：bold）*/
   itemTextColor: o["color-text-2"],
@@ -177,8 +183,9 @@ const l = {
   // /* 垂直方向变量（带Vertical后缀）*/
   // tabGapSmallLineVertical: string;     /* 垂直方向间隙 */
   // tabPaddingVerticalSmallLine: string; /* 垂直方向内边距 */
-  tabBorderRadius: e.tabBorderRadius
+  tabBorderRadius: e.tabBorderRadius,
   /* 标签页圆角 */
+  tabRoundBorderRadius: e.tabRoundBorderRadius
   // closeBorderRadius: string;    /* 关闭按钮圆角 */
 }, p = {
   indicatorColorWait: "transparent",
@@ -246,9 +253,9 @@ const l = {
 export {
   m as BreadcrumbThemeDark,
   c as PaginationThemeDark,
-  n as PopconfirmThemeDark,
+  d as PopconfirmThemeDark,
   p as StepsThemeDark,
   x as TabsThemeDark,
   l as TooltipThemeDark,
-  d as TreeThemeDark
+  n as TreeThemeDark
 };

package/es/config/themes/components/baseComponent/light.d.ts

@@ -1,8 +1,9 @@
-import { TooltipProps, PopconfirmProps, TreeProps, PaginationProps, BreadcrumbProps, TabsProps, StepsProps } from 'naive-ui';
+import { TooltipProps, PopconfirmProps, TreeProps, PaginationProps, BreadcrumbProps, StepsProps } from 'naive-ui';
+import { BaseTabsThemeOverrides } from '../../../../types/themes/components';
 export declare const TooltipThemeLight: TooltipProps['themeOverrides'];
 export declare const PopconfirmThemeLight: PopconfirmProps['themeOverrides'];
 export declare const TreeThemeLight: TreeProps['themeOverrides'];
 export declare const PaginationThemeLight: PaginationProps['themeOverrides'];
 export declare const BreadcrumbThemeLight: BreadcrumbProps['themeOverrides'];
-export declare const TabsThemeLight: TabsProps['themeOverrides'];
+export declare const TabsThemeLight: BaseTabsThemeOverrides;
 export declare const StepsThemeLight: StepsProps['themeOverrides'];

package/es/config/themes/components/baseComponent/light.mjs

@@ -7,6 +7,11 @@ const l = {
   textColor: e["color-text-1"],
   padding: r.paddingBase
 }, c = {
+  peers: {
+    Popover: {
+      borderRadius: "10px"
+    }
+  },
   fontSize: r.fontSizeMedium,
   iconColor: o["color-primary-6"],
   iconSize: r.iconSizeBase
@@ -164,7 +169,8 @@ const l = {
   // prefixMarginLarge: string;
   // suffixMarginLarge: string;
 }, m = {
-  // fontSize: string;          /* 面包屑整体字体大小 */
+  fontSize: "20px",
+  /* 面包屑整体字体大小 */
   // itemLineHeight: string;    /* 面包屑项的行高 */
   // fontWeightActive: string;  /* 当前项的字重（如：bold）*/
   itemTextColor: o["color-gray-8"],
@@ -277,9 +283,8 @@ const l = {
   // tabPaddingVerticalSmallLine: string; /* 垂直方向内边距 */
   tabBorderRadius: r.tabBorderRadius,
   /* 标签页圆角 */
-  closeBorderRadius: r.tabBorderRadius
-  /* 关闭按钮圆角 */
-  // closeBorderRadius: string;    /* 关闭按钮圆角 */
+  tabRoundBorderRadius: r.tabRoundBorderRadius
+  // closeBorderRadius: commonBase.tabBorderRadius /* 关闭按钮圆角 */
 }, p = {
   indicatorColorWait: e["color-text-1"],
   /* 等待状态指示器背景色 */
@@ -336,7 +341,7 @@ const l = {
   // stepHeaderFontWeight: string;         /* 标题字体粗细 */
   indicatorSizeSmall: "24px",
   /* 小尺寸指示器大小 */
-  indicatorSizeMedium: "24px",
+  indicatorSizeMedium: "22px",
   /* 中尺寸指示器大小 */
   indicatorIconSizeSmall: "16px",
   /* 小尺寸指示器图标大小 */

package/es/config/themes/components/button/common.mjs

@@ -1,10 +1,10 @@
 import { commonBase as e } from "../../common.mjs";
-const d = {
+const i = {
   borderRadiusLarge: e.borderRadiusLarge,
   borderRadiusMedium: e.borderRadiusMedium,
   borderRadiusSmall: e.borderRadiusSmall,
-  // heightMedium: commonBase.heightMedium,
-  // heightSmall: commonBase.heightSmall,
+  heightMedium: e.heightMedium,
+  heightSmall: "24px",
   fontSizeLarge: e.fontSizeLarge,
   fontSizeSmall: e.fontSizeSmall,
   opacityDisabled: "1",
@@ -13,5 +13,5 @@ const d = {
   paddingSmall: "0 12px"
 };
 export {
-  d as ButtonThemeCommon
+  i as ButtonThemeCommon
 };

package/es/config/themes/components/cascader/common.d.ts

@@ -1,2 +1,2 @@
-import { CascaderProps } from 'naive-ui';
-export declare const CascaderThemeCommon: CascaderProps['themeOverrides'];
+import { BaseCascaderThemeOverrides } from '../../../../types/themes/components';
+export declare const CascaderThemeCommon: BaseCascaderThemeOverrides;

package/es/config/themes/components/cascader/common.mjs

@@ -1,8 +1,10 @@
 import { commonBase as o } from "../../common.mjs";
-const m = {
+const e = {
+  columnWidth: "188px",
+  columPadding: "4px",
   menuBorderRadius: "10px",
   optionHeight: o.heightMedium
 };
 export {
-  m as CascaderThemeCommon
+  e as CascaderThemeCommon
 };

package/es/config/themes/components/cascader/dark.d.ts

@@ -1,2 +1,2 @@
-import { CascaderProps } from 'naive-ui';
-export declare const CascaderThemeDark: CascaderProps['themeOverrides'];
+import { BaseCascaderThemeOverrides } from '../../../../types/themes/components';
+export declare const CascaderThemeDark: BaseCascaderThemeOverrides;

package/es/config/themes/components/cascader/dark.mjs

@@ -2,12 +2,16 @@ import o from "../../color/dark.mjs";
 import r from "../../token/dark.mjs";
 import { SelectThemeDark as e } from "../select/dark.mjs";
 import { CascaderThemeCommon as t } from "./common.mjs";
-const n = {
+const i = {
   ...t,
+  border: `1px soild ${o["color-gray-4"]}`,
   optionColorHover: o["color-primary-1"],
   optionTextColorActive: o["color-primary-6"],
   optionTextColorDisabled: r["color-text-4"],
   menuColor: r["bg-color-3"],
+  arrowColorActive: o["color-primary-6"],
+  tagColor: o["color-gray-3"],
+  tagTextColor: o["color-gray-10"],
   peers: {
     InternalSelection: {
       ...e?.peers?.InternalSelection
@@ -15,5 +19,5 @@ const n = {
   }
 };
 export {
-  n as CascaderThemeDark
+  i as CascaderThemeDark
 };

package/es/config/themes/components/cascader/light.d.ts

@@ -1,2 +1,2 @@
-import { CascaderProps } from 'naive-ui';
-export declare const CascaderThemeLight: CascaderProps['themeOverrides'];
+import { BaseCascaderThemeOverrides } from '../../../../types/themes/components';
+export declare const CascaderThemeLight: BaseCascaderThemeOverrides;

package/es/config/themes/components/cascader/light.mjs

@@ -1,17 +1,21 @@
 import o from "../../color/light.mjs";
-import { SelectThemeLight as e } from "../select/light.mjs";
-import { CascaderThemeCommon as r } from "./common.mjs";
-const m = {
-  ...r,
+import { SelectThemeLight as r } from "../select/light.mjs";
+import { CascaderThemeCommon as e } from "./common.mjs";
+const i = {
+  ...e,
+  border: `1px soild ${o["color-gray-4"]}`,
   optionColorHover: o["color-primary-1"],
   optionTextColorActive: o["color-primary-6"],
   optionTextColorDisabled: o["color-gray-4"],
+  arrowColorActive: o["color-primary-6"],
+  tagColor: o["color-gray-3"],
+  tagTextColor: o["color-gray-10"],
   peers: {
     InternalSelection: {
-      ...e?.peers?.InternalSelection
+      ...r?.peers?.InternalSelection
     }
   }
 };
 export {
-  m as CascaderThemeLight
+  i as CascaderThemeLight
 };

package/es/config/themes/components/dataTable/dark.mjs

@@ -5,6 +5,8 @@ const e = {
   tdColorStriped: o["fill-color-5"],
   tdTextColor: r["color-gray-10"],
   thColor: o["bg-color-2"],
+  thFontWeight: "400",
+  thPaddingMedium: "6px 12px",
   thTextColor: o["color-text-2"],
   borderColor: r["color-gray-3"]
   // borderColor: darkBase['color-gray-4'],

package/es/config/themes/components/dataTable/light.mjs

@@ -5,6 +5,8 @@ const e = {
   tdColorStriped: o["color-gray-1"],
   tdTextColor: o["color-gray-10"],
   thColor: r["bg-color-2"],
+  thFontWeight: "400",
+  thPaddingMedium: "6px 12px",
   thTextColor: o["color-gray-8"],
   borderColor: o["color-gray-3"]
   // borderColor: lightBase['color-gray-4'],

package/es/config/themes/components/input/dark.mjs

@@ -12,7 +12,7 @@ const d = {
   colorDisabled: o["fill-color-1"],
   colorFocus: o["bg-color-2"],
   groupLabelBorder: `1px solid ${r["color-gray-4"]}`,
-  groupLabelColor: o["bg-color-3"],
+  groupLabelColor: o["fill-color-1"],
   groupLabelTextColor: o["color-text-1"],
   suffixTextColor: r["color-gray-6"],
   iconColor: r["color-gray-6"],

package/es/config/themes/components/select/dark.mjs

@@ -1,7 +1,7 @@
 import r from "../../color/dark.mjs";
 import o from "../../token/dark.mjs";
 import { commonBase as e } from "../../common.mjs";
-const i = {
+const c = {
   peers: {
     InternalSelection: {
       arrowColor: o["color-text-1"],
@@ -23,6 +23,7 @@ const i = {
       textColorDisabled: o["color-text-4"]
     },
     InternalSelectMenu: {
+      borderRadius: "10px",
       color: o["bg-color-9"],
       optionColorPending: "#0000",
       optionColorActive: o["fill-color-5"],
@@ -36,5 +37,5 @@ const i = {
   }
 };
 export {
-  i as SelectThemeDark
+  c as SelectThemeDark
 };

package/es/config/themes/components/select/light.mjs

@@ -20,6 +20,7 @@ const i = {
       textColorDisabled: o["color-gray-4"]
     },
     InternalSelectMenu: {
+      borderRadius: "10px",
       optionColorPending: "#0000",
       optionColorActive: o["color-primary-2"],
       optionColorActivePending: o["color-primary-2"],

package/es/config/themes/components/slider/dark.mjs

@@ -8,7 +8,8 @@ const l = {
   handleBorderStyle: `2px solid ${r["color-primary-6"]}`,
   inputWidth: "60px",
   rangeInputLineColor: r["color-gray-10"],
-  extremeValueTextColor: r["color-gray-10"]
+  extremeValueTextColor: r["color-gray-10"],
+  indicatorBorderRadius: "10px"
 };
 export {
   l as SliderThemeDark

package/es/config/themes/components/slider/light.mjs

@@ -8,7 +8,8 @@ const l = {
   handleBorderStyle: `2px solid ${r["color-primary-6"]}`,
   inputWidth: "60px",
   rangeInputLineColor: r["color-gray-10"],
-  extremeValueTextColor: r["color-gray-10"]
+  extremeValueTextColor: r["color-gray-10"],
+  indicatorBorderRadius: "10px"
 };
 export {
   l as SliderThemeLight

package/es/hooks/useAnimationHook.d.ts

@@ -1,3 +1,3 @@
 export declare const useAnimationHook: () => {
-    toggleAnimationByClipCircle: (dom: MouseEvent, isDark: boolean, callback: () => void) => Promise<unknown>;
+    toggleAnimationByClipCircle: (dom: MouseEvent, isDark: boolean, callback: (e: MouseEvent) => void) => Promise<unknown>;
 };

package/es/hooks/useAnimationHook.mjs

@@ -1,34 +1,37 @@
-const u = () => ({
-  toggleAnimationByClipCircle: (a, i, e) => new Promise((o) => {
+import { nextTick as u } from "vue";
+const w = () => ({
+  toggleAnimationByClipCircle: (t, e, o) => new Promise((r) => {
     if (!document.startViewTransition) {
-      e(), o(!0);
+      o(t), r(!0);
       return;
     }
-    document.startViewTransition(() => {
-      e(), o(!0);
+    const { clientX: n, clientY: i } = t, h = Math.hypot(
+      Math.max(n, innerWidth - n),
+      Math.max(i, innerHeight - i)
+    ), a = 100 * n / innerWidth, c = 100 * i / innerHeight, l = Math.hypot(innerWidth, innerHeight) / Math.SQRT2, m = 100 * h / l;
+    document.startViewTransition(async () => {
+      o(t), r(!0), await u();
     }).ready.then(() => {
-      const { clientX: t, clientY: n } = a, s = Math.hypot(
-        Math.max(t, innerWidth - t),
-        Math.max(n, innerHeight - n)
-      ), r = [
-        `circle(0% at ${t}px ${n}px)`,
-        `circle(${s}px at ${t}px ${n}px)`
+      const s = [
+        `circle(0% at ${a}% ${c}%)`,
+        `circle(${m}% at ${a}% ${c}%)`
       ];
       document.documentElement.animate(
         {
           // 如果要切换到暗色主题，我们在过渡的时候从半径 100% 的圆开始，到 0% 的圆结束
-          clipPath: i ? [...r].reverse() : r
+          clipPath: e ? [...s].reverse() : s
         },
         {
           duration: 400,
           easing: "ease-in",
+          fill: "both",
           // 如果要切换到暗色主题，我们应该裁剪 view-transition-old(root) 的内容
-          pseudoElement: i ? "::view-transition-old(root)" : "::view-transition-new(root)"
+          pseudoElement: e ? "::view-transition-old(root)" : "::view-transition-new(root)"
         }
       );
     });
   })
 });
 export {
-  u as useAnimationHook
+  w as useAnimationHook
 };