@sdata/web-vue 2.2.1 → 2.6.0

package/es/layout/style/index.scss

@@ -3,284 +3,172 @@
 @use '@components/layout/style/token.scss' as *;
 
 $layout-prefix-cls: string.unquote('#{theme.$prefix}-layout');
+$sider-prefix-cls: string.unquote('#{theme.$prefix}-layout-sider');
+$text-color: var(string.unquote('#{theme.$sd-cssvars-prefix}-color-text-1'));
 
 .#{$layout-prefix-cls} {
   display: flex;
-  flex: 1;
+  flex: auto;
   flex-direction: column;
-  margin: 0;
-  padding: 0;
 
-  &-sider {
-    position: relative;
-    flex: none; // flex: 0 0 auto; 当右侧文字过长的时候不会被压缩。
-    width: auto;
-    max-width: 100%;
-    margin: 0;
-    padding: 0;
-    overflow: hidden;
-    background: $layout-sider-background;
-    transition:
-      width theme.$transition-duration-2 theme.$transition-timing-function-standard,
-      height theme.$transition-duration-2 theme.$transition-timing-function-standard,
-      transform theme.$transition-duration-2 theme.$transition-timing-function-standard;
-
-    &-image,
-    &-prepend,
-    &-append {
-      flex: none;
-    }
-
-    &-children {
-      flex: 1;
-      height: 100%;
-      overflow: auto;
-    }
+  /* fix firefox can't set height smaller than content on flex item */
+  min-height: 0;
+  background: $layout-body-bg;
 
-    &-mask {
-      position: fixed;
-      inset: 0;
-      background: $layout-sider-mask-color;
-    }
-
-    &-collapsed &-children {
-      /* width */
-      &::-webkit-scrollbar {
-        width: 0;
-      }
-    }
+  &,
+  & * {
+    box-sizing: border-box;
+  }
 
-    &-has-trigger {
-      display: flex;
-      flex-direction: column;
-      box-sizing: border-box;
-      padding-bottom: $layout-trigger-height;
-    }
+  &#{&}-has-sider {
+    flex-direction: row;
 
-    &-rail {
-      width: $layout-rail-width;
+    > .#{$layout-prefix-cls},
+    > .#{$layout-prefix-cls}-content {
+      width: 0;
     }
+  }
 
-    &-trigger {
-      position: absolute;
-      right: 0;
-      bottom: 0;
-      left: 0;
-      z-index: 1;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      box-sizing: border-box;
-      width: 100%;
-      height: $layout-trigger-height;
-      color: var(string.unquote('#{theme.$sd-cssvars-prefix}-color-white'));
-      background: $layout-trigger-dark-color;
-      cursor: pointer;
-      transition: width theme.$transition-duration-2 theme.$transition-timing-function-standard;
-
-      &-light {
-        color: $layout-font-color;
-        background: $layout-sider-background-light;
-        border-top: 1px solid $layout-trigger-light-color-border;
-      }
-    }
+  .#{$layout-prefix-cls}-header,
+  &.#{$layout-prefix-cls}-footer {
+    flex: 0 0 auto;
+  }
 
-    &-floating {
-      box-shadow: none;
-    }
+  // RTL
+  &-rtl {
+    direction: rtl;
+  }
+}
 
-    &-sticky {
-      z-index: 1;
-    }
+// ==================== Header ====================
+.#{$layout-prefix-cls}-header {
+  height: $layout-header-height;
+  padding: $layout-header-padding;
+  color: $layout-header-color;
+  line-height: $layout-header-height;
+  background: $layout-header-bg;
+}
 
-    &-temporary {
-      position: fixed;
-      box-shadow: $layout-sider-shadow;
+// ==================== Footer ====================
+.#{$layout-prefix-cls}-footer {
+  padding: $layout-footer-padding;
+  color: $text-color;
+  font-size: $layout-font-size;
+  background: $layout-footer-bg;
+}
 
-      &.#{$layout-prefix-cls}-sider-left {
-        top: 0;
-        bottom: 0;
-        left: 0;
-        transform: translateX(-100%);
-      }
+// =================== Content ===================
+.#{$layout-prefix-cls}-content {
+  flex: auto;
 
-      &.#{$layout-prefix-cls}-sider-right {
-        top: 0;
-        right: 0;
-        bottom: 0;
-        transform: translateX(100%);
-      }
+  // fix firefox can't set height smaller than content on flex item
+  min-height: 0;
+  color: $text-color;
+}
 
-      &.#{$layout-prefix-cls}-sider-top {
-        top: 0;
-        right: 0;
-        left: 0;
-        width: 100%;
-        transform: translateY(-100%);
-      }
+// =================== Sider ===================
+.#{$sider-prefix-cls} {
+  position: relative;
+  display: flex;
+  flex-direction: column;
 
-      &.#{$layout-prefix-cls}-sider-bottom {
-        right: 0;
-        bottom: 0;
-        left: 0;
-        width: 100%;
-        transform: translateY(100%);
-      }
+  // fix firefox can't set width smaller than content on flex item
+  min-width: 0;
+  background: $layout-sider-bg;
+  // 与 Menu 的展开/收起过渡保持一致（同时长 + standard 缓动），避免同步收缩时出现割裂感
+  transition:
+    all $layout-motion-duration-mid theme.$transition-timing-function-standard,
+    background 0s;
 
-      &.#{$layout-prefix-cls}-sider-active {
-        transform: translate(0, 0);
-      }
-    }
+  &-has-trigger {
+    padding-bottom: $layout-sider-trigger-height;
   }
 
-  &-sider-light {
-    background: $layout-sider-background-light;
-    box-shadow: 0 2px 5px 0 rgb(0 0 0 / 8%);
+  &-right {
+    order: 1;
   }
 
+  // Fixed region outside the scroll area (e.g. brand / logo).
   &-header {
-    position: relative;
-    flex: 0 0 auto;
-    box-sizing: border-box;
-    margin: 0;
-    overflow: hidden;
-    color: $layout-header-color;
-    background: $layout-header-background;
-    border-bottom: 1px solid $layout-header-border-color;
-    transition:
-      height theme.$transition-duration-2 theme.$transition-timing-function-standard,
-      transform theme.$transition-duration-2 theme.$transition-timing-function-standard,
-      box-shadow theme.$transition-duration-2 theme.$transition-timing-function-standard;
-
-    &-wrapper {
-      width: 100%;
-    }
-
-    &-bar,
-    &-extension,
-    &-prepend,
-    &-append,
-    &-content {
-      display: flex;
-      align-items: center;
-    }
-
-    &-bar {
-      position: relative;
-      z-index: 1;
-      gap: $layout-header-gap;
-      min-height: var(--sd-layout-header-content-height, 64px);
-      padding: 0 $layout-header-padding-inline;
-    }
+    flex: none;
+  }
 
-    &-prepend,
-    &-append {
-      flex: none;
-      gap: calc($layout-header-gap / 2);
-    }
+  // Scroll region fills the remaining height. `min-height: 0` lets it shrink
+  // below its content so the inner scrollbar can scroll.
+  &-children {
+    flex: 1;
+    min-height: 0;
+  }
 
-    &-title {
-      position: relative;
-      z-index: 1;
-      flex: none;
-      max-width: min(40%, 480px);
-      overflow: hidden;
-      color: inherit;
-      font-weight: $layout-header-title-font-weight;
-      font-size: $layout-header-title-font-size;
-      white-space: nowrap;
-      text-overflow: ellipsis;
-    }
+  &-children-scroll {
+    overflow: hidden auto;
+  }
 
-    &-content {
-      position: relative;
-      z-index: 1;
-      flex: 1;
-      gap: calc($layout-header-gap / 2);
-      min-width: 0;
-    }
+  &-zero-width &-children {
+    overflow: hidden;
+  }
 
-    &-extension {
-      position: relative;
-      z-index: 1;
-      gap: calc($layout-header-gap / 2);
-      min-height: var(--sd-layout-header-extension-height, 48px);
-      padding: 0 $layout-header-padding-inline;
-      border-top: 1px solid $layout-header-border-color;
-    }
+  &-trigger {
+    position: absolute;
+    bottom: 0;
+    z-index: 1;
+    height: $layout-sider-trigger-height;
+    color: $layout-sider-trigger-color;
+    line-height: $layout-sider-trigger-height;
+    text-align: center;
+    cursor: pointer;
+    transition: all $layout-motion-duration-mid theme.$transition-timing-function-standard;
+  }
 
-    &-image {
+  &-zero-width-trigger {
+    position: absolute;
+    top: $layout-header-height;
+    z-index: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: $layout-sider-zero-trigger-width;
+    height: $layout-sider-zero-trigger-height;
+    color: $layout-sider-trigger-color;
+    font-size: $layout-sider-zero-trigger-font-size;
+    background: $layout-sider-bg;
+    border-radius: 0 $layout-radius-lg $layout-radius-lg 0;
+    cursor: pointer;
+    transition: background-color $layout-motion-duration-slow ease;
+    inset-inline-end: -$layout-sider-zero-trigger-width;
+
+    &::after {
       position: absolute;
       inset: 0;
-      overflow: hidden;
-
-      &::after {
-        position: absolute;
-        inset: 0;
-        background: $layout-header-image-overlay;
-        content: '';
-      }
-    }
-
-    &-image-inner,
-    &-image :is(img, picture, video) {
-      width: 100%;
-      height: 100%;
-      object-fit: cover;
-      opacity: var(--sd-layout-header-image-opacity, 1);
-      transition: opacity theme.$transition-duration-2 theme.$transition-timing-function-standard;
-    }
-
-    &-flat {
-      box-shadow: none;
-    }
-
-    &:not(&-flat) {
-      box-shadow: $layout-header-shadow;
-    }
-
-    &-floating {
-      box-shadow: $layout-header-floating-shadow;
+      background: transparent;
+      transition: all $layout-motion-duration-slow;
+      content: '';
     }
 
-    &-hidden {
-      pointer-events: none;
+    &:hover::after {
+      background: rgb(255 255 255 / 20%);
     }
 
-    &-collapsed &-extension {
-      display: none;
+    &-right {
+      inset-inline-start: -$layout-sider-zero-trigger-width;
+      border-radius: $layout-radius-lg 0 0 $layout-radius-lg;
     }
+  }
 
-    &-with-image {
-      color: $layout-font-color-dark;
-      border-bottom-color: transparent;
-    }
+  // Light
+  &-light {
+    background: $layout-light-sider-bg;
 
-    &-with-image &-extension {
-      border-top-color: rgb(255 255 255 / 16%);
+    .#{$sider-prefix-cls}-trigger {
+      color: $layout-light-trigger-color;
+      background: $layout-light-trigger-bg;
     }
 
-    &-bottom {
-      border-top: 1px solid $layout-header-border-color;
-      border-bottom: 0;
+    .#{$sider-prefix-cls}-zero-width-trigger {
+      color: $layout-light-trigger-color;
+      background: $layout-light-trigger-bg;
+      border: 1px solid $layout-body-bg;
+      border-inline-start: 0;
     }
   }
-
-  &-content {
-    flex: 1;
-  }
-
-  &-footer {
-    flex: 0 0 auto;
-    margin: 0;
-  }
-}
-
-.#{$layout-prefix-cls}-has-sider {
-  flex-direction: row;
-
-  > .#{$layout-prefix-cls},
-  > .#{$layout-prefix-cls}-content {
-    overflow-x: hidden;
-  }
 }

package/es/layout/style/token.scss

@@ -6,29 +6,49 @@
 @use 'sass:string';
 @use '@style/theme/index.scss' as *;
 
-$layout-trigger-height: 48px;
-$layout-rail-width: 56px;
-$layout-sider-mask-color: rgb(0 0 0 / 45%);
-$layout-sider-shadow: 0 12px 32px rgb(0 0 0 / 18%);
-$layout-header-background: var(string.unquote('#{global.$sd-cssvars-prefix}-color-bg-2'));
-$layout-header-color: var(string.unquote('#{global.$sd-cssvars-prefix}-color-text-1'));
-$layout-header-border-color: var(string.unquote('#{global.$sd-cssvars-prefix}-color-border-2'));
-$layout-header-shadow: 0 8px 24px rgb(0 0 0 / 12%);
-$layout-header-floating-shadow: 0 16px 32px rgb(0 0 0 / 14%);
-$layout-header-padding-inline: 20px;
-$layout-header-gap: 16px;
-$layout-header-title-font-size: 18px;
-$layout-header-title-font-weight: 600;
-$layout-header-image-overlay: linear-gradient(180deg, rgb(0 0 0 / 18%), rgb(0 0 0 / 36%));
-
-// Layout Theme Dark(Default)
-$layout-sider-background: var(string.unquote('#{global.$sd-cssvars-prefix}-color-menu-dark-bg'));
-$layout-font-color-dark: var(string.unquote('#{global.$sd-cssvars-prefix}-color-white'));
-$layout-font-color: var(string.unquote('#{global.$sd-cssvars-prefix}-color-text-1'));
-$layout-trigger-dark-color: rgb(255 255 255 / 20%);
-
-// Layout Theme Light
-$layout-sider-background-light: var(
-  string.unquote('#{global.$sd-cssvars-prefix}-color-menu-light-bg')
-);
-$layout-trigger-light-color-border: var(string.unquote('#{global.$sd-cssvars-prefix}-color-bg-5'));
+/*****************************************************
+ * Layout 整体背景（容器主体与页脚共用）
+ *****************************************************/
+$layout-body-bg: var(string.unquote('#{$sd-cssvars-prefix}-color-fill-1'));
+$layout-footer-bg: var(string.unquote('#{$sd-cssvars-prefix}-color-fill-1'));
+
+/*****************************************************
+ * Header
+ *****************************************************/
+$layout-header-bg: #001529;
+$layout-header-height: global.$size-16; // 64px
+$layout-header-padding-horizontal: 50px;
+$layout-header-padding: 0 $layout-header-padding-horizontal;
+$layout-header-color: var(string.unquote('#{$sd-cssvars-prefix}-color-text-1'));
+
+/*****************************************************
+ * Footer
+ *****************************************************/
+$layout-footer-padding: 24px $layout-header-padding-horizontal;
+
+/*****************************************************
+ * Sider
+ * 深色背景与 Menu 深色背景保持一致，避免内嵌菜单出现接缝
+ *****************************************************/
+$layout-sider-bg: var(string.unquote('#{$sd-cssvars-prefix}-color-menu-dark-bg'));
+$layout-sider-trigger-height: global.$size-11; // 44px
+$layout-sider-trigger-bg: var(string.unquote('#{$sd-cssvars-prefix}-color-menu-dark-hover'));
+$layout-sider-trigger-color: var(string.unquote('#{$sd-cssvars-prefix}-color-white'));
+$layout-sider-zero-trigger-width: global.$size-10; // 40px
+$layout-sider-zero-trigger-height: global.$size-10; // 40px
+$layout-sider-zero-trigger-font-size: 18px;
+
+/*****************************************************
+ * Sider light 主题
+ *****************************************************/
+$layout-light-sider-bg: var(string.unquote('#{$sd-cssvars-prefix}-color-bg-1'));
+$layout-light-trigger-bg: var(string.unquote('#{$sd-cssvars-prefix}-color-bg-1'));
+$layout-light-trigger-color: var(string.unquote('#{$sd-cssvars-prefix}-color-text-1'));
+
+/*****************************************************
+ * 公共
+ *****************************************************/
+$layout-radius-lg: global.$border-radius-large;
+$layout-motion-duration-mid: global.$transition-duration-2;
+$layout-motion-duration-slow: global.$transition-duration-3;
+$layout-font-size: global.$font-size-body;

package/es/link/index.d.ts

@@ -14,8 +14,8 @@ declare const Link: {
         loading: boolean;
         ellipsisLineClamp: number | string;
         ellipsisExpandTrigger: "click";
-        ellipsisTooltip: boolean | import("..").EllipsisTooltipProps;
-        status: import("..").Status;
+        ellipsisTooltip: boolean | import("../index.ts").EllipsisTooltipProps;
+        status: import("../index.ts").Status;
         iconTooltip: string;
     }, false, {}, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, {}, any, import("vue").ComponentProvideOptions, {
         P: {};
@@ -33,8 +33,8 @@ declare const Link: {
         loading: boolean;
         ellipsisLineClamp: number | string;
         ellipsisExpandTrigger: "click";
-        ellipsisTooltip: boolean | import("..").EllipsisTooltipProps;
-        status: import("..").Status;
+        ellipsisTooltip: boolean | import("../index.ts").EllipsisTooltipProps;
+        status: import("../index.ts").Status;
         iconTooltip: string;
     }>;
     __isFragment?: never;
@@ -51,8 +51,8 @@ declare const Link: {
     loading: boolean;
     ellipsisLineClamp: number | string;
     ellipsisExpandTrigger: "click";
-    ellipsisTooltip: boolean | import("..").EllipsisTooltipProps;
-    status: import("..").Status;
+    ellipsisTooltip: boolean | import("../index.ts").EllipsisTooltipProps;
+    status: import("../index.ts").Status;
     iconTooltip: string;
 }, {}, string, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, import("vue").ComponentProvideOptions> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & (new () => {
     $slots: {

package/es/list/index.d.ts

@@ -29,7 +29,7 @@ declare const List: {
             default: boolean;
         };
         paginationProps: {
-            type: import("vue").PropType<import("..").PaginationProps>;
+            type: import("vue").PropType<import("../index.ts").PaginationProps>;
         };
         gridProps: {
             type: ObjectConstructor;
@@ -43,10 +43,10 @@ declare const List: {
             default: number;
         };
         virtualListProps: {
-            type: import("vue").PropType<import("../_components/virtual-list/interface").VirtualListProps>;
+            type: import("vue").PropType<import("../_components/virtual-list/interface.ts").VirtualListProps>;
         };
         scrollbar: {
-            type: import("vue").PropType<boolean | import("..").ScrollbarProps>;
+            type: import("vue").PropType<boolean | import("../index.ts").ScrollbarProps>;
             default: boolean;
         };
     }>> & Readonly<{
@@ -58,7 +58,7 @@ declare const List: {
         virtualListRef: import("vue").Ref<any, any>;
         render: () => import("vue/jsx-runtime").JSX.Element;
     }, {}, {}, {
-        scrollIntoView(options: import("../_components/virtual-list/interface").ScrollIntoViewOptions): void;
+        scrollIntoView(options: import("../_components/virtual-list/interface.ts").ScrollIntoViewOptions): void;
     }, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
         scroll: () => true;
         reachBottom: () => true;
@@ -67,7 +67,7 @@ declare const List: {
     }, import("vue").PublicProps, {
         split: boolean;
         size: "small" | "medium" | "large";
-        scrollbar: boolean | import("..").ScrollbarProps;
+        scrollbar: boolean | import("../index.ts").ScrollbarProps;
         loading: boolean;
         bottomOffset: number;
         bordered: boolean;
@@ -105,7 +105,7 @@ declare const List: {
             default: boolean;
         };
         paginationProps: {
-            type: import("vue").PropType<import("..").PaginationProps>;
+            type: import("vue").PropType<import("../index.ts").PaginationProps>;
         };
         gridProps: {
             type: ObjectConstructor;
@@ -119,10 +119,10 @@ declare const List: {
             default: number;
         };
         virtualListProps: {
-            type: import("vue").PropType<import("../_components/virtual-list/interface").VirtualListProps>;
+            type: import("vue").PropType<import("../_components/virtual-list/interface.ts").VirtualListProps>;
         };
         scrollbar: {
-            type: import("vue").PropType<boolean | import("..").ScrollbarProps>;
+            type: import("vue").PropType<boolean | import("../index.ts").ScrollbarProps>;
             default: boolean;
         };
     }>> & Readonly<{
@@ -134,11 +134,11 @@ declare const List: {
         virtualListRef: import("vue").Ref<any, any>;
         render: () => import("vue/jsx-runtime").JSX.Element;
     }, {}, {}, {
-        scrollIntoView(options: import("../_components/virtual-list/interface").ScrollIntoViewOptions): void;
+        scrollIntoView(options: import("../_components/virtual-list/interface.ts").ScrollIntoViewOptions): void;
     }, {
         split: boolean;
         size: "small" | "medium" | "large";
-        scrollbar: boolean | import("..").ScrollbarProps;
+        scrollbar: boolean | import("../index.ts").ScrollbarProps;
         loading: boolean;
         bottomOffset: number;
         bordered: boolean;
@@ -173,7 +173,7 @@ declare const List: {
         default: boolean;
     };
     paginationProps: {
-        type: import("vue").PropType<import("..").PaginationProps>;
+        type: import("vue").PropType<import("../index.ts").PaginationProps>;
     };
     gridProps: {
         type: ObjectConstructor;
@@ -187,10 +187,10 @@ declare const List: {
         default: number;
     };
     virtualListProps: {
-        type: import("vue").PropType<import("../_components/virtual-list/interface").VirtualListProps>;
+        type: import("vue").PropType<import("../_components/virtual-list/interface.ts").VirtualListProps>;
     };
     scrollbar: {
-        type: import("vue").PropType<boolean | import("..").ScrollbarProps>;
+        type: import("vue").PropType<boolean | import("../index.ts").ScrollbarProps>;
         default: boolean;
     };
 }>> & Readonly<{
@@ -202,7 +202,7 @@ declare const List: {
     virtualListRef: import("vue").Ref<any, any>;
     render: () => import("vue/jsx-runtime").JSX.Element;
 }, {}, {}, {
-    scrollIntoView(options: import("../_components/virtual-list/interface").ScrollIntoViewOptions): void;
+    scrollIntoView(options: import("../_components/virtual-list/interface.ts").ScrollIntoViewOptions): void;
 }, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     scroll: () => true;
     reachBottom: () => true;
@@ -211,7 +211,7 @@ declare const List: {
 }, string, {
     split: boolean;
     size: "small" | "medium" | "large";
-    scrollbar: boolean | import("..").ScrollbarProps;
+    scrollbar: boolean | import("../index.ts").ScrollbarProps;
     loading: boolean;
     bottomOffset: number;
     bordered: boolean;
@@ -221,7 +221,7 @@ declare const List: {
     Item: {
         new (...args: any[]): import("vue").CreateComponentPublicInstanceWithMixins<Readonly<import("vue").ExtractPropTypes<{
             actionLayout: {
-                type: import("vue").PropType<import("..").Direction>;
+                type: import("vue").PropType<import("../index.ts").Direction>;
                 default: string;
             };
         }>> & Readonly<{}>, () => import("vue/jsx-runtime").JSX.Element, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, import("vue").PublicProps, {
@@ -235,7 +235,7 @@ declare const List: {
             Defaults: {};
         }, Readonly<import("vue").ExtractPropTypes<{
             actionLayout: {
-                type: import("vue").PropType<import("..").Direction>;
+                type: import("vue").PropType<import("../index.ts").Direction>;
                 default: string;
             };
         }>> & Readonly<{}>, () => import("vue/jsx-runtime").JSX.Element, {}, {}, {}, {
@@ -246,7 +246,7 @@ declare const List: {
         __isSuspense?: never;
     } & import("vue").ComponentOptionsBase<Readonly<import("vue").ExtractPropTypes<{
         actionLayout: {
-            type: import("vue").PropType<import("..").Direction>;
+            type: import("vue").PropType<import("../index.ts").Direction>;
             default: string;
         };
     }>> & Readonly<{}>, () => import("vue/jsx-runtime").JSX.Element, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, {

package/es/locale/interface.d.ts

@@ -157,6 +157,8 @@ export interface SDLang {
         view: SDCalendarLang['view'];
         month: SDCalendarLang['month'];
         week: SDCalendarLang['week'];
+        yearFormat?: string;
+        monthFormat?: string;
         placeholder: {
             date: string;
             week: string;