@dt-frames/ui 1.0.32 → 1.0.34

package/es/style/theme/tabs/index.less

@@ -0,0 +1,165 @@
+@multiple-height: 30px;
+@component-background: #fff;
+
+.dt-reuse-tabs{
+    line-height: 32px;
+    height: 33px;
+    border-bottom: 1px solid #e7e7e7;
+
+    .ant-tabs-small {
+        height: calc(@multiple-height + 2px);
+    }
+
+    .ant-tabs-card{
+        .ant-tabs-nav{
+            padding-top: 2px;
+            height: calc(@multiple-height + 2px);
+            margin: 0;
+            background-color: @component-background;
+            border: 0;
+            box-shadow: none;
+
+            &::before{
+                border: none;
+            }
+
+            .ant-tabs-nav-container {
+                height: @multiple-height;
+                padding-top: 2px;
+            }
+        }
+    }
+    
+    .ant-tabs-card > .ant-tabs-nav .ant-tabs-tab{
+        height: calc(@multiple-height - 2px);
+        padding-right: 12px;
+        line-height: calc(@multiple-height - 2px);
+        color: @text-color-base;
+        background-color: @component-background;
+        transition: none;
+
+        span{
+            font-size: 12px;
+        }
+
+        &:hover {
+            .ant-tabs-tab-remove {
+                opacity: 1;
+            }
+        }
+
+        .ant-tabs-tab-remove{
+            width: 8px;
+            height: 28px;
+            font-size: 12px;
+            color: inherit;
+            opacity: 0;
+            transition: none;
+            margin-left: 2px;
+            margin-right: -4px;
+
+            &:hover {
+                svg {
+                    width: 0.8em !important;
+                }
+            }
+            
+            svg {
+                fill: @text-color-base;
+            }
+        }
+
+        .ant-tabs-tab:not(.ant-tabs-tab-active) {
+            &:hover {
+                color: @primary-color;
+            }
+        }
+    }
+
+    .ant-tabs-tab-active {
+        position: relative;
+        padding-left: 18px;
+        background: @primary-color !important;
+        border: 0;
+        transition: none;
+
+        span {
+          color: @white !important;
+        }
+
+        .ant-tabs-tab-remove {
+          opacity: 1;
+        }
+
+        svg {
+            width: 0.7em;
+            fill: @white !important;
+        }
+    }
+
+    .ant-tabs-nav > div:nth-child(1) {
+        padding: 0 6px;
+  
+        .ant-tabs-tab {
+          margin-right: 3px !important;
+        }
+    }
+
+    .ant-tabs-tab:not(.ant-tabs-tab-active) {
+        border: 1px solid #d9d9d9 !important;
+        .anticon-close {
+            font-size: 12px;
+        
+            svg {
+                width: 0.6em;
+            }
+        }
+    }
+
+    .ant-dropdown-trigger {
+        display: inline-flex;
+    }
+    
+    &--hide-close {
+        .ant-tabs-tab-remove {
+            opacity: 0 !important;
+        }
+    }
+
+    .reuse-tab-quick, .dt-tab-redo{
+        display: inline-block;
+        width: 36px;
+        height: calc(@multiple-height + 6px);
+        line-height: calc(@multiple-height + 6px);
+        margin-top: -2px;
+        color: rgba(0,0,0,0.73);
+        text-align: center;
+        cursor: pointer;
+        border-left: 1px solid #d9d9d9;
+  
+        &:hover {
+          color: #333;
+        }
+    }
+
+}
+
+.reuse-tabs__dropdown{
+    .ant-dropdown-content {
+        width: 172px;
+        li > span{
+            display: flex;
+        }
+
+        .dt-icon{
+            width: 24px;
+            display: inline-block;
+        }
+
+        .ant-dropdown-menu-item-disabled{
+            .dt-icon{
+                opacity: 0.6;
+            }
+        }
+    }
+}

package/es/style/theme/theme.less

@@ -0,0 +1,73 @@
+@import './header/index.less';
+@import './sider/index.less';
+@import './tabs/index.less';
+@import './footer/index.less';
+@import './transition.less';
+@import '../components/icons/index.less';
+@import '../components/container/index.less';
+
+@page-bg-color: #f0f2f5;
+
+.dt-theme{
+    width: 100%;
+    height: 100%;
+
+    .fixedWrap{
+        .scrollbar__view{
+            height: 100%;
+        }
+    }
+
+    .dt-layout-content{
+        position: relative;
+        flex: 1 1 auto;
+        min-height: 0;
+        overflow-x: hidden;
+
+        // 固定宽度模式
+        &.fixed{
+            width: 100%;
+            padding: 0 calc((100% - 1200px) / 2);
+        }
+
+        .ant-layout-content{
+            height: 100%;
+            .dt-page{
+                height: 100%;
+                display: flex;
+                flex-direction: column;
+                padding: 12px;
+                background: @page-bg-color;
+                max-height: 100%;
+                overflow: hidden;
+                .basic-form--search{
+                    background: #fff;
+                    padding: 15px 30px 0;
+                    border-radius: 2px;
+                    &>div{
+                        border-bottom: 1px dashed #e7e7e7;
+                    }
+                }
+
+                .dt-table{
+                    padding: 6px 20px;
+                    border-radius: 2px;
+                    background: #fff;
+                }
+                .ant-table-wrapper{
+                    flex: 1;
+                    height: 0;
+
+                    .ant-spin-nested-loading{
+                        height: 100%;
+                    }
+                }
+            }
+        }
+    }
+}
+
+.ant-menu-dark .ant-menu-submenu-title:focus-visible {
+    box-shadow: none;
+}
+

package/es/style/theme/transition.less

@@ -0,0 +1,105 @@
+/** zoom-fade */
+.zoom-fade-enter-active,
+.zoom-fade-leave-active {
+  transition: transform 0.2s, opacity 0.3s ease-out;
+}
+
+.zoom-fade-enter-from {
+  opacity: 0;
+  transform: scale(0.92);
+}
+
+.zoom-fade-leave-to {
+  opacity: 0;
+  transform: scale(1.06);
+}
+
+
+/** zoom-out */
+.zoom-out-enter-active,
+.zoom-out-leave-active {
+  transition: opacity 0.1 ease-in-out, transform 0.15s ease-out;
+}
+
+.zoom-out-enter-from,
+.zoom-out-leave-to {
+  opacity: 0;
+  transform: scale(0);
+}
+
+// fade
+.fade-transition {
+    &-enter-active,
+    &-leave-active {
+      transition: opacity 0.2s ease-in-out;
+    }
+  
+    &-enter-from,
+    &-leave-to {
+      opacity: 0;
+    }
+}
+
+.fade-leave-active {
+  position: absolute;
+  left: 0;
+  top: 0;
+}
+  
+.fade-enter-active,
+.fade-leave-active {
+    transition: opacity 0.2s ease-in-out;
+}
+  
+.fade-enter-from,
+.fade-leave-to {
+    opacity: 0;
+}
+
+/* fade-slide */
+.fade-slide-leave-active,
+.fade-slide-enter-active {
+    transition: all 0.3s;
+}
+
+.fade-slide-enter-from {
+    opacity: 0;
+    transform: translateX(-30px);
+}
+
+.fade-slide-leave-to {
+    opacity: 0;
+    transform: translateX(30px);
+}
+
+/** fade-bottom */
+.fade-bottom-enter-active,
+.fade-bottom-leave-active {
+  transition: opacity 0.25s, transform 0.3s;
+}
+
+.fade-bottom-enter-from {
+  opacity: 0;
+  transform: translateY(-10%);
+}
+
+.fade-bottom-leave-to {
+  opacity: 0;
+  transform: translateY(10%);
+}
+
+// fade-scale
+.fade-scale-leave-active,
+.fade-scale-enter-active {
+  transition: all 0.28s;
+}
+
+.fade-scale-enter-from {
+  opacity: 0;
+  transform: scale(1.2);
+}
+
+.fade-scale-leave-to {
+  opacity: 0;
+  transform: scale(0.8);
+}

package/es/theme/content/index.d.ts

@@ -0,0 +1,44 @@
+import { RouteRecordRaw } from 'vue-router';
+declare const _sfc_main: import("vue").DefineComponent<{}, {
+    getTransitionMode: import("vue").ComputedRef<import("@dt-frames/core").RouterTransition>;
+    getOpenPageLoading: import("vue").ComputedRef<boolean>;
+    getLayoutContentMode: import("vue").ComputedRef<import("@dt-frames/core").ContentMode>;
+    getPageLoading: boolean;
+    getCanCache: import("vue").ComputedRef<boolean>;
+    tabStore: import("pinia").Store<"route-reuse", import("@dt-frames/core/es/store/routeReuse").RouteReuseState, {
+        getTabList(): import("vue-router").RouteLocationNormalized[];
+        getCachedTabList(): string[];
+        getLastDragEndIndex(): number;
+    }, {
+        addTab(route: import("vue-router").RouteLocationNormalized): Promise<void>;
+        closeTab(path: string, router: import("vue-router").Router): void;
+        closeAllTab(currentRoute: import("vue").Ref<import("vue-router").RouteLocationNormalizedLoaded>, router: import("vue-router").Router): void;
+        closeLeftTabs(path: string): void;
+        closeRightTabs(path: string): void;
+        closeOtherTabs(path: string): void;
+        bulkCloseTabs(pathList: string[]): void;
+        updateCacheTab(): void;
+        refreshPage(router: import("vue-router").Router): Promise<void>;
+        sortTabs(oldIndex: number, newIndex: number): void;
+    }>;
+    getTransitionName: (route: RouteRecordRaw) => string | undefined;
+    getCaches: import("vue").ComputedRef<string[]>;
+    LayoutContent: import("vue").DefineComponent<{
+        prefixCls: StringConstructor;
+        hasSider: {
+            type: BooleanConstructor;
+            default: any;
+        };
+        tagName: StringConstructor;
+    }, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+        prefixCls: StringConstructor;
+        hasSider: {
+            type: BooleanConstructor;
+            default: any;
+        };
+        tagName: StringConstructor;
+    }>>, {
+        hasSider: boolean;
+    }>;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, import("vue").EmitsOptions, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}>;
+export default _sfc_main;