@vue-start/pro 0.5.38 → 0.5.40

package/CHANGELOG.md

@@ -3,6 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# 0.5.40
+
+- 新增 theme 模式
+- Layout css 变量位置由:root 迁移到.pro-layout
+- Layout menu 新增 hide 模式
+- Layout 新增 tabs 组件，可通过配置处理
+
+# 0.5.39
+
+- bug 修复；
+
 # 0.5.38
 
 - 新增 ProTip 组件

package/dist/index.css

@@ -1,33 +1,92 @@
 :root {
-  /***************layout****************/
+  /****************** reset layout ***************/
+  /*section高度*/
+  --pro-secion-hei: 100vh;
+
+  /****************** 预置变量，仅做提示用 ***************/
+  --pro-color-primary: #409eff;
+  --pro-color-primary-light-3: #73b8ff;
+  --pro-color-primary-light-5: #95c9ff;
+  --pro-color-primary-light-7: #b7daff;
+  --pro-color-primary-light-8: #c8e3ff;
+  --pro-color-primary-light-9: #d9ecff;
+  --pro-color-success: #67c23a;
+  --pro-color-warning: #e6a23c;
+  --pro-color-danger: #f56c6c;
+  --pro-color-error: #f56c6c;
+  --pro-color-info: #909399;
+  --pro-color-text: #303133;
+  --pro-color-text-regular: #606266;
+  --pro-color-text-secondary: #909399;
+  --pro-color-text-placeholder: #a8abb2;
+  --pro-color-border: #dcdfe6;
+  --pro-color-border-light: #e4e7ed;
+  --pro-color-bg: #ffffff;
+  --pro-radius: 4px;
+  --pro-radius-lg: 8px;
+  --pro-radius-md: 4px;
+  --pro-radius-sm: 2px;
+  --pro-size: 14px;
+  --pro-size-lg: 16px;
+  --pro-size-md: 14px;
+  --pro-size-sm: 13px;
+  --pro-size-xs: 12px;
+  --pro-line-height: 1.5714285714285714;
+  --pro-line-height-lg: 1.5;
+  --pro-line-height-md: 1.5714285714285714;
+  --pro-line-height-sm: 1.6666666666666667;
+  --pro-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
+  --pro-shadow-lg: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
+  --pro-shadow-md: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
+  --pro-shadow-sm: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
+  --pro-shadow-inner: inset 0 2px 4px 0 rgb(0 0 0 / 0.05);
+  --pro-spacing-1: 4px;
+  --pro-spacing-2: 8px;
+  --pro-spacing-3: 12px;
+  --pro-spacing-4: 16px;
+  --pro-spacing-5: 20px;
+  --pro-spacing-6: 24px;
+  --pro-spacing-7: 28px;
+  --pro-spacing-8: 32px;
+  --pro-spacing-9: 36px;
+}
+
+/********************************** pro-layout ***********************************/
+
+.pro-layout {
   /*header高度*/
   --pro-header-hei: 60px;
   /*header与内容间隔*/
   --pro-divide-ver-hei: 2px;
   /*面包屑高度*/
   --pro-bread-hei: 0px;
+  /*tabs高度*/
+  --pro-tabs-hei: 0px;
   /*菜单宽度变量：合并/展开会重新赋值；媒体查询重新赋值*/
-  --pro-left-menu-wid: 220px;
+  --pro-left-menu-wid: 0px;
   /*左侧菜单start,end插槽高度*/
   --pro-menu-start-hei: 0px;
   --pro-menu-end-hei: 0px;
-  /*page*/
-  --pro-page-header-hei: 40px;
-  --pro-page-footer-hei: 46px;
 
-  /*color*/
-  --pro-color-primary: #1890ff;
-  --pro-color-bg: #f8f8f8;
+  /*section高度*/
+  --pro-secion-hei: calc(100vh - var(--pro-header-hei) - var(--pro-divide-ver-hei) - var(--pro-tabs-hei));
+  --pro-section-hei: calc(100vh - var(--pro-header-hei) - var(--pro-divide-ver-hei) - var(--pro-tabs-hei));
+  /*左侧菜单高度*/
+  --pro-left-menu-hei: calc(
+    100vh - var(--pro-header-hei) - var(--pro-divide-ver-hei) - var(--pro-menu-start-hei) - var(--pro-menu-end-hei)
+  );
 }
 
-/********************************** pro-layout ***********************************/
+.pro-layout.has-left-menu {
+  --pro-left-menu-wid: 220px;
+}
 
-.pro-layout {
-  /*section高度*/
-  --pro-secion-hei: calc(100vh - var(--pro-header-hei) - var(--pro-divide-ver-hei));
-  --pro-section-hei: calc(100vh - var(--pro-header-hei) - var(--pro-divide-ver-hei));
-  /*左侧菜单高度*/
-  --pro-left-menu-hei: calc(var(--pro-secion-hei) - var(--pro-menu-start-hei) - var(--pro-menu-end-hei));
+.pro-layout.mini {
+  --pro-left-menu-wid: 64px;
+}
+
+.pro-layout.has-tabs {
+  --pro-tabs-hei: 34px;
 }
 
 .pro-layout .pro-layout-header {
@@ -66,10 +125,6 @@
   max-width: var(--pro-left-menu-wid);
 }
 
-.pro-layout .pro-layout-menus-wrapper .mini {
-  --pro-left-menu-wid: 64px;
-}
-
 /*section*/
 .pro-layout .pro-layout-section {
   height: var(--pro-secion-hei);
@@ -97,7 +152,7 @@
 }
 
 .pro-layout-horizontal .pro-layout-structure {
-  flex: 1;
+  width: calc(100vw - var(--pro-left-menu-wid));
 }
 
 .pro-layout-horizontal .pro-layout-section {
@@ -114,8 +169,8 @@
   margin-top: var(--pro-divide-ver-hei);
 }
 
-.pro-layout-horizontal-v .pro-layout-structure .pro-layout-section {
-  flex-grow: 1;
+.pro-layout-horizontal-v .pro-layout-structure .pro-layout-right {
+  width: calc(100vw - var(--pro-left-menu-wid));
 }
 
 /*compose*/
@@ -128,8 +183,72 @@
   margin-top: var(--pro-divide-ver-hei);
 }
 
-.pro-layout-compose .pro-layout-structure .pro-layout-section {
-  flex-grow: 1;
+.pro-layout-compose .pro-layout-structure .pro-layout-right {
+  width: calc(100vw - var(--pro-left-menu-wid));
+}
+
+/*layout-tabs*/
+
+.pro-layout .pro-layout-tabs {
+  height: var(--pro-tabs-hei);
+  background-color: white;
+  width: calc(100vw - var(--pro-left-menu-wid));
+}
+
+.pro-layout-tabs-root {
+  /*box-sizing: border-box;*/
+  height: var(--pro-tabs-hei);
+  display: flex;
+  align-items: center;
+  flex-wrap: nowrap;
+  font-size: 14px;
+  color: var(--pro-color-text-regular);
+}
+
+.pro-layout-tabs-root .place {
+  min-width: var(--pro-spacing-2);
+  height: 100%;
+}
+
+.pro-layout-tabs-item {
+  cursor: pointer;
+  padding: 4px 12px;
+  border-radius: var(--pro-radius);
+  white-space: nowrap;
+  margin: 0 var(--pro-spacing-1);
+}
+
+.pro-layout-tabs-item:hover {
+  background-color: var(--pro-color-primary-light-9);
+}
+
+.pro-layout-tabs-item.active {
+  color: var(--pro-color-primary);
+  font-weight: bold;
+  background-color: var(--pro-color-primary-light-9);
+}
+
+.pro-layout-tabs-item-close {
+  display: inline-block;
+  margin-left: var(--pro-spacing-1);
+  font-weight: normal;
+  width: 16px;
+  height: 16px;
+  text-align: center;
+  line-height: 16px;
+  font-size: 12px;
+}
+
+.pro-layout-tabs-item-close:hover {
+  color: white;
+  background-color: var(--pro-color-primary-light-5);
+  border-radius: 50%;
+}
+
+.pro-layout-tabs-menus {
+  position: fixed;
+  background-color: pink;
+  transform: translate(-50%,0);
 }
 
 /********************************** pro-typography ***********************************/
@@ -223,6 +342,9 @@
 /********************************** pro-page ***********************************/
 
 .pro-page {
+  --pro-page-header-hei: 40px;
+  --pro-page-footer-hei: 46px;
+
   height: var(--pro-secion-hei);
   max-height: var(--pro-secion-hei);
   overflow-y: auto;

package/dist/index.d.ts

@@ -2360,6 +2360,8 @@ declare const ElementKeys: {
     TableKey: string;
     TableOperateKey: string;
     UploaderKey: string;
+    EmptyKey: string;
+    DropdownKey: string;
     ProFormKey: string;
     ProSearchFormKey: string;
     ProTableKey: string;
@@ -2657,4 +2659,122 @@ declare const getSignValue: <T = any>(item: TColumn, signName: string) => T;
  */
 declare const filterSlotsByPrefix: (slots: Record<string, any>, prefix: string) => lodash.Dictionary<any>;
 
-export { AddButton, BooleanObjType, BooleanRulesObjType, ColumnSetting, CurdAction, CurdAddAction, CurdCurrentMode, CurdMethods, CurdSubAction, ElementKeys, FieldNames, FormAction, FormItemProps, FormRulePrefixMap, IAccess, ICurdAction, ICurdAddAction, ICurdCurrentMode, ICurdOperateOpts, ICurdState, ICurdSubAction, IElementConfig, IHighConfig, IListData, IOpeItem, IOperateItem, IPer, IProConfigProvide, IProCurdProvide, IProFormProvideExtra, IProModuleProvide, IProTableProvide, IProTableProvideExtra, IRequestOpts, ISearchMode, ITableOperate, IUser, InternalNamePath, LogonUser, LogonUserKey, ModalCurdOpe, MustLogon, NamePath, PageHeader, PageHeaderProps, PaginationSlotProps, PerSuffix, Permission, PermissionProps, ProBaseProps, ProColumnSettingProps, ProConfig, ProConfigProps, ProCurd, ProCurdDesc, ProCurdDescConnect, ProCurdDescProps, ProCurdForm, ProCurdFormConnect, ProCurdFormProps, ProCurdList, ProCurdListConnect, ProCurdListProps, ProCurdModal, ProCurdModalForm, ProCurdModalFormConnect, ProCurdModalProps, ProCurdProps, ProDesc, ProDescProps, ProDispatchRequestType, ProForm, ProFormItemProps, ProFormList, ProFormListProps, ProFormProps, ProGrid, ProGridProps, ProLayout, ProList, ProListProps, ProModalCurd, ProModalCurdProps, ProModule, ProModuleProps, ProOperate, ProOperateProps, ProPage, ProPageCurd, ProPageCurdProps, ProPageProps, ProSearchForm, ProSearchFormProps, ProShowDate, ProShowDigit, ProShowOptions, ProShowText, ProShowTree, ProTable, ProTableProps, ProTip, ProTipProps, ProTypography, ProTypographyProps, ProUploadList, ProUploaderText, ProValue, RequestAction, RouterMethods, SearchMode, SearchSlotProps, TAccess, TActionEvent, TActionState, TColumn, TColumns, TConfigData, TCurdActionEvent, TDefaultValueType, TElementMap, TExecuteFunName, TExecuteItem, TExecuteName, TFile, TFormExtraMap, TInitialState, TLogonUserProvide, TMeta, TOpenMenu, TOption, TOptions, TPageState, TProFormOperate, TRegisterStore, TRegisterStoreMap, TRender, TRouter, TTableColumn, TTableColumns, TValueType, TreeOption, TreeOptions, Wrapper, convertPathToList, convertResData, createExpose, createExposeObj, createFormItemCompFn, createModule, createProConfig, defaultPage, filterSlotsByPrefix, getColumnFormItemName, getColumnValueType, getFirstPropName, getRealRender, getSignValue, getValidValues, isValidConfig, isValidNode, mergeState, mergeStateToList, proBaseProps, provideProCurd, provideProFormList, provideProModule, renderColumn, renderElement, renderElements, renderInputColumn, showValue, useAccess, useAccessMgr, useComposeRequestActor, useDispatchMeta, useDispatchStore, useDoneRequestActor, useFailedRequestActor, useFormSubmit, useGetCompByKey, useHasPer, useHasPer2, useLogonUser, useMetaRegister, useModuleEvent, useProConfig, useProCurd, useProForm, useProFormList, useProModal, useProModule, useProMsg, useProNotify, useProRouter, useProTable, useReadStore };
+declare const ThemeKey: unique symbol;
+declare type TLight = Record<"1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9", string>;
+declare type TDark = Record<"2", string>;
+declare type TColor = {
+    base: string;
+    light: TLight;
+    dark: TDark;
+};
+declare type TSubType = {
+    base: string;
+    lg: string;
+    md: string;
+    sm: string;
+};
+interface ITheme {
+    color: {
+        primary: TColor;
+        success: TColor;
+        warning: TColor;
+        danger: TColor;
+        error: TColor;
+        info: TColor;
+        text: {
+            base: string;
+            regular: string;
+            secondary: string;
+            placeholder: string;
+            disabled: string;
+        };
+        border: {
+            base: string;
+            light: string;
+        };
+        bg: string;
+    };
+    radius: TSubType;
+    fontSize: TSubType & {
+        xs: string;
+    };
+    lineHeight: {
+        base: number;
+        lg: number;
+        md: number;
+        sm: number;
+    };
+    spacing: TLight;
+    shadow: TSubType & {
+        inner: string;
+    };
+}
+declare const useTheme: () => ITheme;
+interface IThemeToken {
+    color?: {
+        primary?: string;
+        success?: string;
+        warning?: string;
+        danger?: string;
+        error?: string;
+        info?: string;
+    };
+    radius?: string;
+    lineHeight?: number;
+    spacing?: number;
+}
+declare const ThemeToken: IThemeToken;
+declare const createTheme: (tt?: IThemeToken) => ITheme;
+declare const ProTheme: vue.DefineComponent<{
+    theme: {
+        type: ObjectConstructor;
+    };
+    /**
+     * 是否在全局注册css变量
+     */
+    global: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /**
+     * 根据themeToken生成theme
+     */
+    themeToken: {
+        type: PropType<IThemeToken>;
+    };
+    /**
+     * 将生成的ITheme对象映射成 css 变量
+     */
+    createCssVar: {
+        type: PropType<(t: ITheme) => Record<string, string | number>>;
+    };
+}, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
+    [key: string]: any;
+}>[] | JSX.Element | undefined, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps, Readonly<vue.ExtractPropTypes<{
+    theme: {
+        type: ObjectConstructor;
+    };
+    /**
+     * 是否在全局注册css变量
+     */
+    global: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /**
+     * 根据themeToken生成theme
+     */
+    themeToken: {
+        type: PropType<IThemeToken>;
+    };
+    /**
+     * 将生成的ITheme对象映射成 css 变量
+     */
+    createCssVar: {
+        type: PropType<(t: ITheme) => Record<string, string | number>>;
+    };
+}>>, {
+    global: boolean;
+}>;
+
+export { AddButton, BooleanObjType, BooleanRulesObjType, ColumnSetting, CurdAction, CurdAddAction, CurdCurrentMode, CurdMethods, CurdSubAction, ElementKeys, FieldNames, FormAction, FormItemProps, FormRulePrefixMap, IAccess, ICurdAction, ICurdAddAction, ICurdCurrentMode, ICurdOperateOpts, ICurdState, ICurdSubAction, IElementConfig, IHighConfig, IListData, IOpeItem, IOperateItem, IPer, IProConfigProvide, IProCurdProvide, IProFormProvideExtra, IProModuleProvide, IProTableProvide, IProTableProvideExtra, IRequestOpts, ISearchMode, ITableOperate, ITheme, IThemeToken, IUser, InternalNamePath, LogonUser, LogonUserKey, ModalCurdOpe, MustLogon, NamePath, PageHeader, PageHeaderProps, PaginationSlotProps, PerSuffix, Permission, PermissionProps, ProBaseProps, ProColumnSettingProps, ProConfig, ProConfigProps, ProCurd, ProCurdDesc, ProCurdDescConnect, ProCurdDescProps, ProCurdForm, ProCurdFormConnect, ProCurdFormProps, ProCurdList, ProCurdListConnect, ProCurdListProps, ProCurdModal, ProCurdModalForm, ProCurdModalFormConnect, ProCurdModalProps, ProCurdProps, ProDesc, ProDescProps, ProDispatchRequestType, ProForm, ProFormItemProps, ProFormList, ProFormListProps, ProFormProps, ProGrid, ProGridProps, ProLayout, ProList, ProListProps, ProModalCurd, ProModalCurdProps, ProModule, ProModuleProps, ProOperate, ProOperateProps, ProPage, ProPageCurd, ProPageCurdProps, ProPageProps, ProSearchForm, ProSearchFormProps, ProShowDate, ProShowDigit, ProShowOptions, ProShowText, ProShowTree, ProTable, ProTableProps, ProTheme, ProTip, ProTipProps, ProTypography, ProTypographyProps, ProUploadList, ProUploaderText, ProValue, RequestAction, RouterMethods, SearchMode, SearchSlotProps, TAccess, TActionEvent, TActionState, TColor, TColumn, TColumns, TConfigData, TCurdActionEvent, TDark, TDefaultValueType, TElementMap, TExecuteFunName, TExecuteItem, TExecuteName, TFile, TFormExtraMap, TInitialState, TLight, TLogonUserProvide, TMeta, TOpenMenu, TOption, TOptions, TPageState, TProFormOperate, TRegisterStore, TRegisterStoreMap, TRender, TRouter, TSubType, TTableColumn, TTableColumns, TValueType, ThemeKey, ThemeToken, TreeOption, TreeOptions, Wrapper, convertPathToList, convertResData, createExpose, createExposeObj, createFormItemCompFn, createModule, createProConfig, createTheme, defaultPage, filterSlotsByPrefix, getColumnFormItemName, getColumnValueType, getFirstPropName, getRealRender, getSignValue, getValidValues, isValidConfig, isValidNode, mergeState, mergeStateToList, proBaseProps, provideProCurd, provideProFormList, provideProModule, renderColumn, renderElement, renderElements, renderInputColumn, showValue, useAccess, useAccessMgr, useComposeRequestActor, useDispatchMeta, useDispatchStore, useDoneRequestActor, useFailedRequestActor, useFormSubmit, useGetCompByKey, useHasPer, useHasPer2, useLogonUser, useMetaRegister, useModuleEvent, useProConfig, useProCurd, useProForm, useProFormList, useProModal, useProModule, useProMsg, useProNotify, useProRouter, useProTable, useReadStore, useTheme };