@alauda/ui 9.1.2-beta.1 → 9.1.2-beta.10

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@alauda/ui",
-  "version": "9.1.2-beta.1",
+  "version": "9.1.2-beta.10",
   "description": "Angular UI components by Alauda Frontend Team.",
   "repository": {
     "type": "git",
@@ -12,7 +12,7 @@
     "JounQin <admin@1stG.me> (https://www.1stG.me)"
   ],
   "license": "MIT",
-  "packageManager": "yarn@1.22.21",
+  "packageManager": "yarn@4.0.1",
   "keywords": [
     "alauda",
     "angular",
@@ -20,7 +20,7 @@
     "ui"
   ],
   "peerDependencies": {
-    "@angular/cdk": ">=19.0.0",
+    "@angular/cdk": ">=20.0.0",
     "dayjs": "^1.0.0",
     "rxjs": "^7.0.0"
   },

package/theme/_mixin.scss

@@ -1,9 +1,9 @@
-@import 'base-var';
-@import 'var';
+@use 'var' as var;
+@use 'sass:selector';
 
 @function theme-selector($theme, $scope) {
   @if ($scope) {
-    @return selector-nest($theme, $scope);
+    @return selector.nest($theme, $scope);
   } @else {
     @return $theme;
   }
@@ -40,96 +40,98 @@
 }
 
 @mixin text-set($size: m, $color: none, $weight: normal) {
-  font-size: use-var(font-size-#{$size});
-  line-height: use-var(line-height-#{$size});
-  font-weight: use-var(font-weight-#{$weight});
-  @if $color != none {
-    color: use-text-color($color);
+  & {
+    font-size: var.use-var(font-size-#{$size});
+    line-height: var.use-var(line-height-#{$size});
+    font-weight: var.use-var(font-weight-#{$weight});
+    @if $color != none {
+      color: var.use-text-color($color);
+    }
   }
 }
 
 @mixin icon-set($size: m, $color: none) {
   display: inline-flex;
   align-items: center;
-  height: use-var(line-height-#{$size});
-  font-size: use-var(font-size-#{$size});
+  height: var.use-var(line-height-#{$size});
+  font-size: var.use-var(font-size-#{$size});
   @if $color != none {
-    color: use-text-color($color);
+    color: var.use-text-color($color);
   }
 }
 
 // 使用 box-shadow 模拟带圆角的 outline
 @mixin outline-shadow($color: primary, $theme: auto) {
   @if ($theme == light) {
-    box-shadow: 0 0 0 2px use-rgba($color, 0.16);
+    box-shadow: 0 0 0 2px var.use-rgba($color, 0.16);
   } @else if($theme == dark) {
-    box-shadow: 0 0 0 2px use-rgba($color, 0.3);
+    box-shadow: 0 0 0 2px var.use-rgba($color, 0.3);
   } @else {
     @include theme-light {
-      box-shadow: 0 0 0 2px use-rgba($color, 0.16);
+      box-shadow: 0 0 0 2px var.use-rgba($color, 0.16);
     }
     @include theme-dark {
-      box-shadow: 0 0 0 2px use-rgba($color, 0.3);
+      box-shadow: 0 0 0 2px var.use-rgba($color, 0.3);
     }
   }
 }
 
 @mixin card-shadow($theme: auto) {
   @if ($theme == light) {
-    box-shadow: 0 0 4px 0 use-rgba(origin-shadow, 0.1);
+    box-shadow: 0 0 4px 0 var.use-rgba(origin-shadow, 0.1);
   } @else if($theme == dark) {
-    box-shadow: 0 0 4px 0 use-rgba(origin-shadow, 0.75);
+    box-shadow: 0 0 4px 0 var.use-rgba(origin-shadow, 0.75);
   } @else {
     @include theme-light {
-      box-shadow: 0 0 4px 0 use-rgba(origin-shadow, 0.1);
+      box-shadow: 0 0 4px 0 var.use-rgba(origin-shadow, 0.1);
     }
     @include theme-dark {
-      box-shadow: 0 0 4px 0 use-rgba(origin-shadow, 0.75);
+      box-shadow: 0 0 4px 0 var.use-rgba(origin-shadow, 0.75);
     }
   }
 }
 
 @mixin popper-shadow($theme: auto) {
   @if ($theme == light) {
-    box-shadow: 0 2px 8px 0 use-rgba(origin-shadow, 0.2);
+    box-shadow: 0 2px 8px 0 var.use-rgba(origin-shadow, 0.2);
   } @else if($theme == dark) {
-    box-shadow: 0 2px 8px 0 use-rgba(origin-shadow, 0.75);
+    box-shadow: 0 2px 8px 0 var.use-rgba(origin-shadow, 0.75);
   } @else {
     @include theme-light {
-      box-shadow: 0 2px 8px 0 use-rgba(origin-shadow, 0.2);
+      box-shadow: 0 2px 8px 0 var.use-rgba(origin-shadow, 0.2);
     }
     @include theme-dark {
-      box-shadow: 0 2px 8px 0 use-rgba(origin-shadow, 0.75);
+      box-shadow: 0 2px 8px 0 var.use-rgba(origin-shadow, 0.75);
     }
   }
 }
 
 @mixin modal-shadow($theme: auto) {
   @if ($theme == light) {
-    box-shadow: 0 2px 8px 0 use-rgba(origin-shadow, 0.2);
+    box-shadow: 0 2px 8px 0 var.use-rgba(origin-shadow, 0.2);
   } @else if($theme == dark) {
-    box-shadow: 0 4px 16px 0 use-rgba(origin-shadow, 0.75);
+    box-shadow: 0 4px 16px 0 var.use-rgba(origin-shadow, 0.75);
   } @else {
     @include theme-light {
-      box-shadow: 0 2px 8px 0 use-rgba(origin-shadow, 0.2);
+      box-shadow: 0 2px 8px 0 var.use-rgba(origin-shadow, 0.2);
     }
     @include theme-dark {
-      box-shadow: 0 4px 16px 0 use-rgba(origin-shadow, 0.75);
+      box-shadow: 0 4px 16px 0 var.use-rgba(origin-shadow, 0.75);
     }
   }
 }
 
 @mixin modal-backdrop($theme: auto) {
   @if ($theme == light) {
-    background-color: use-rgba(origin-shadow, 0.4);
+    background-color: var.use-rgba(origin-shadow, 0.4);
   } @else if($theme == dark) {
-    background-color: use-rgba(origin-shadow, 0.75);
+    background-color: var.use-rgba(origin-shadow, 0.75);
   } @else {
     @include theme-light {
-      background-color: use-rgba(origin-shadow, 0.4);
+      background-color: var.use-rgba(origin-shadow, 0.4);
     }
     @include theme-dark {
-      background-color: use-rgba(origin-shadow, 0.75);
+      background-color: var.use-rgba(origin-shadow, 0.75);
     }
   }
 }
@@ -141,7 +143,7 @@
 }
 
 @mixin transition($target: all) {
-  transition: $target $animation-duration-slow $animation-interpolation;
+  transition: $target var.$animation-duration-slow var.$animation-interpolation;
 }
 
 @mixin absolute-center() {
@@ -152,7 +154,10 @@
   transform: translate(-50%, -50%);
 }
 
-@mixin scroll-bar($color: #{use-rgb(n-7)}, $hover-color: #{use-rgb(n-5)}) {
+@mixin scroll-bar(
+  $color: #{var.use-rgb(n-7)},
+  $hover-color: #{var.use-rgb(n-5)}
+) {
   &::-webkit-scrollbar {
     width: 8px;
     height: 4px;
@@ -174,13 +179,13 @@
 
 @mixin clear-button() {
   border-radius: 50%;
-  color: use-text-color(help);
+  color: var.use-text-color(help);
   cursor: pointer;
   @include transition;
 
   &:hover {
-    color: use-rgb(main-bg);
-    background-color: use-text-color(help);
+    color: var.use-rgb(main-bg);
+    background-color: var.use-text-color(help);
   }
 }
 
@@ -196,7 +201,7 @@
   }
 
   &.isDisabled &__icon-container {
-    color: use-rgb(n-4);
+    color: var.use-rgb(n-4);
   }
 
   &__indicator {
@@ -224,7 +229,7 @@
 }
 
 @mixin input-error() {
-  border-color: use-rgb(red) !important;
+  border-color: var.use-rgb(red) !important;
 
   &:focus,
   &.isFocused {
@@ -236,10 +241,10 @@
   display: inline-flex;
   justify-content: center;
   align-items: center;
-  width: use-var(icon-size-m);
-  height: use-var(icon-size-m);
-  color: use-rgb(primary);
-  background-color: use-rgb(p-6);
+  width: var.use-var(icon-size-m);
+  height: var.use-var(icon-size-m);
+  color: var.use-rgb(primary);
+  background-color: var.use-rgb(p-6);
   border-radius: 50%;
   border: none;
   cursor: pointer;
@@ -249,45 +254,47 @@
     display: flex;
     justify-content: center;
     align-items: center;
-    width: use-var(icon-size-s);
-    height: use-var(icon-size-s);
-    font-size: use-var(icon-size-s);
+    width: var.use-var(icon-size-s);
+    height: var.use-var(icon-size-s);
+    font-size: var.use-var(icon-size-s);
   }
 
   &:hover {
-    background-color: use-rgb(p-7);
+    background-color: var.use-rgb(p-7);
   }
 
   &:active {
-    background-color: use-rgb(p-5);
+    background-color: var.use-rgb(p-5);
   }
 
   &.isExpanded {
     transform: rotate(90deg);
     color: white;
-    background-color: use-rgb(primary);
+    background-color: var.use-rgb(primary);
 
     &:hover {
-      background-color: use-rgb(p-1);
+      background-color: var.use-rgb(p-1);
     }
 
     &:active {
-      background-color: use-rgb(p-0);
+      background-color: var.use-rgb(p-0);
     }
   }
 
   &[disabled],
   &.isExpanded[disabled] {
-    background-color: use-rgb(n-8);
-    color: use-rgb(n-6);
+    background-color: var.use-rgb(n-8);
+    color: var.use-rgb(n-6);
     cursor: not-allowed;
   }
 }
 
 @mixin text-overflow {
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
+  & {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
 }
 
 @mixin flex-center($alignItems: center) {
@@ -304,15 +311,15 @@
 }
 
 @mixin view-readonly {
-  background-color: use-rgb(main-bg);
-  border-color: use-rgb(border);
+  background-color: var.use-rgb(main-bg);
+  border-color: var.use-rgb(border);
 }
 
 @mixin vertical-dashed-line($width: 1px, $color: 'n-7') {
   background: linear-gradient(
     to bottom,
-    use-rgb($color),
-    use-rgb($color) 8px,
+    var.use-rgb($color),
+    var.use-rgb($color) 8px,
     transparent 6px,
     transparent
   );
@@ -322,7 +329,7 @@
 }
 
 // Motion
-@mixin motion-common($duration: $animation-duration-base) {
+@mixin motion-common($duration: var.$animation-duration-base) {
   animation-duration: $duration;
   animation-fill-mode: both;
   animation-play-state: paused;
@@ -331,7 +338,7 @@
 @mixin make-motion(
   $className,
   $keyframeName,
-  $duration: $animation-duration-base
+  $duration: var.$animation-duration-base
 ) {
   .#{$className}-enter,
   .#{$className}-leave {

package/theme/_pattern.scss

@@ -1,27 +1,27 @@
-@import 'var';
-@import 'mixin';
+@use 'var' as var;
+@use 'mixin' as mixin;
 
 @mixin shadow-0 {
-  border-radius: use-var(border-radius-m);
-  background-color: use-rgb(n-10);
+  border-radius: var.use-var(border-radius-m);
+  background-color: var.use-rgb(n-10);
 }
 
 @mixin shadow-2 {
-  border-radius: use-var(border-radius-m);
-  background-color: use-rgb(n-10);
-  box-shadow: 0 0 2px 0 use-rgba(origin-shadow, 0.24);
+  border-radius: var.use-var(border-radius-m);
+  background-color: var.use-rgb(n-10);
+  box-shadow: 0 0 2px 0 var.use-rgba(origin-shadow, 0.24);
 }
 
 @mixin shadow-8 {
-  border-radius: use-var(border-radius-m);
-  background-color: use-rgb(n-10);
-  box-shadow: 0 2px 8px 0 use-rgba(origin-shadow, 0.16);
+  border-radius: var.use-var(border-radius-m);
+  background-color: var.use-rgb(n-10);
+  box-shadow: 0 2px 8px 0 var.use-rgba(origin-shadow, 0.16);
 }
 
 @mixin shadow-16 {
-  border-radius: use-var(border-radius-m);
-  background-color: use-rgb(n-10);
-  box-shadow: 0 4px 16px 0 use-rgba(origin-shadow, 0.16);
+  border-radius: var.use-var(border-radius-m);
+  background-color: var.use-rgb(n-10);
+  box-shadow: 0 4px 16px 0 var.use-rgba(origin-shadow, 0.16);
 }
 
 @mixin zh-form-label-width($parent) {
@@ -42,20 +42,18 @@
     display: flex;
     justify-content: center;
     align-items: center;
-    padding: $table-cell-padding-v $table-cell-padding-h;
-    min-height: $table-row-min-height + 2px;
-    @include text-set(m, placeholder);
-
-    background-color: use-rgb(n-10);
-    border: solid 1px use-rgb(n-8);
-    border-radius: use-var(border-radius-l);
-
+    padding: var.$table-cell-padding-v var.$table-cell-padding-h;
+    min-height: var.$table-row-min-height + 2px;
+    background-color: var.use-rgb(n-10);
+    border: solid 1px var.use-rgb(n-8);
+    border-radius: var.use-var(border-radius-l);
     // fixed placeholder to avoid horizontal scrolling
     position: sticky;
     left: 0;
+    @include mixin.text-set(m, placeholder);
 
     > aui-icon:first-child {
-      margin-right: use-var(spacing-m);
+      margin-right: var.use-var(spacing-m);
     }
   }
 

package/theme/_theme-preset.scss

@@ -46,7 +46,8 @@
 }
 
 @function rgb-string($color) {
-  @return color.red($color), color.green($color), color.blue($color);
+  @return color.channel($color, 'red'), color.channel($color, 'green'),
+    color.channel($color, 'blue');
 }
 
 @mixin light-mode {

package/theme/_var.scss

@@ -1,39 +1,39 @@
 @use 'sass:math';
-
-@import 'base-var';
+@use 'base-var' as base-var;
+@forward 'base-var';
 
 $status-color-map: (
-  success: use-rgb(green),
-  warning: use-rgb(yellow),
-  error: use-rgb(red),
-  info: use-rgb(primary),
+  success: base-var.use-rgb(green),
+  warning: base-var.use-rgb(yellow),
+  error: base-var.use-rgb(red),
+  info: base-var.use-rgb(primary),
 );
 
 // input
 $input-size: (
   large: (
-    height: use-var(inline-height-l),
-    font-size: use-var(font-size-l),
-    line-height: use-var(line-height-l),
-    icon-size: use-var(icon-size-l),
+    height: base-var.use-var(inline-height-l),
+    font-size: base-var.use-var(font-size-l),
+    line-height: base-var.use-var(line-height-l),
+    icon-size: base-var.use-var(icon-size-l),
   ),
   medium: (
-    height: use-var(inline-height-m),
-    font-size: use-var(font-size-m),
-    line-height: use-var(line-height-m),
-    icon-size: use-var(icon-size-m),
+    height: base-var.use-var(inline-height-m),
+    font-size: base-var.use-var(font-size-m),
+    line-height: base-var.use-var(line-height-m),
+    icon-size: base-var.use-var(icon-size-m),
   ),
   small: (
-    height: use-var(inline-height-s),
-    font-size: use-var(font-size-m),
-    line-height: use-var(line-height-m),
-    icon-size: use-var(icon-size-m),
+    height: base-var.use-var(inline-height-s),
+    font-size: base-var.use-var(font-size-m),
+    line-height: base-var.use-var(line-height-m),
+    icon-size: base-var.use-var(icon-size-m),
   ),
   mini: (
-    height: use-var(inline-height-xs),
-    font-size: use-var(font-size-s),
-    line-height: use-var(line-height-s),
-    icon-size: use-var(icon-size-s),
+    height: base-var.use-var(inline-height-xs),
+    font-size: base-var.use-var(font-size-s),
+    line-height: base-var.use-var(line-height-s),
+    icon-size: base-var.use-var(icon-size-s),
   ),
 );
 
@@ -44,8 +44,8 @@ $table-cell-padding-v: 15px;
 $table-cell-padding-h: 10px;
 
 // Sort
-$sort-indicator-color: use-text-color(placeholder);
-$sort-indicator-color-active: use-text-color(secondary);
+$sort-indicator-color: base-var.use-text-color(placeholder);
+$sort-indicator-color-active: base-var.use-text-color(secondary);
 $sort-indicator-size: 4px;
 $sort-indicator-margin: 4px;
 
@@ -53,17 +53,17 @@ $sort-indicator-margin: 4px;
 $tab-label-padding-large: 16px 20px;
 $tab-label-padding-medium: 12px 20px;
 $tab-label-padding-small: 8px 16px;
-$tab-label-font-size-large: use-var(font-size-xl);
-$tab-label-font-size-medium: use-var(font-size-l);
-$tab-label-font-size-small: use-var(font-size-m);
-$tab-header-type-card-bg-color: use-rgb(n-9);
+$tab-label-font-size-large: base-var.use-var(font-size-xl);
+$tab-label-font-size-medium: base-var.use-var(font-size-l);
+$tab-label-font-size-small: base-var.use-var(font-size-m);
+$tab-header-type-card-bg-color: base-var.use-rgb(n-9);
 $tab-scroll-transition: all 0.3s cubic-bezier(0.35, 0, 0.25, 1);
 $tab-pagination-button-z-index: 3;
 $tab-label-z-index: 2;
 $tab-active-indicator-z-index: 1;
-$tab-label-focus-box-shadow: inset 0 0 0 3px use-rgba(primary, 0.3);
+$tab-label-focus-box-shadow: inset 0 0 0 3px base-var.use-rgba(primary, 0.3);
 $tab-header-close-icon-size: 16px;
-$tab-header-title-font-size: use-var(font-size-xxl);
+$tab-header-title-font-size: base-var.use-var(font-size-xxl);
 $tab-header-title-spacing: 20px;
 $tab-header-title-padding: 20px 0 12px;
 

package/theme/overlay-prebuilt.css

@@ -0,0 +1 @@
+.cdk-overlay-container,.cdk-global-overlay-wrapper{pointer-events:none;top:0;left:0;height:100%;width:100%}.cdk-overlay-container{position:fixed;z-index:1000}.cdk-overlay-container:empty{display:none}.cdk-global-overlay-wrapper{display:flex;position:absolute;z-index:1000}.cdk-overlay-pane{position:absolute;pointer-events:auto;box-sizing:border-box;display:flex;max-width:100%;max-height:100%;z-index:1000}.cdk-overlay-backdrop{position:absolute;top:0;bottom:0;left:0;right:0;pointer-events:auto;-webkit-tap-highlight-color:rgba(0,0,0,0);opacity:0;touch-action:manipulation;z-index:1000;transition:opacity 400ms cubic-bezier(0.25, 0.8, 0.25, 1)}@media(prefers-reduced-motion){.cdk-overlay-backdrop{transition-duration:1ms}}.cdk-overlay-backdrop-showing{opacity:1}@media(forced-colors: active){.cdk-overlay-backdrop-showing{opacity:.6}}.cdk-overlay-dark-backdrop{background:rgba(0,0,0,.32)}.cdk-overlay-transparent-backdrop{transition:visibility 1ms linear,opacity 1ms linear;visibility:hidden;opacity:1}.cdk-overlay-transparent-backdrop.cdk-overlay-backdrop-showing,.cdk-high-contrast-active .cdk-overlay-transparent-backdrop{opacity:0;visibility:visible}.cdk-overlay-backdrop-noop-animation{transition:none}.cdk-overlay-connected-position-bounding-box{position:absolute;display:flex;flex-direction:column;min-width:1px;min-height:1px;z-index:1000}.cdk-global-scrollblock{position:fixed;width:100%;overflow-y:scroll}.cdk-overlay-popover{background:none;border:none;padding:0;outline:0;overflow:visible;position:fixed;pointer-events:none;white-space:normal;color:inherit;text-decoration:none;width:100%;height:100%;inset:auto;top:0;left:0}.cdk-overlay-popover::backdrop{display:none}.cdk-overlay-popover .cdk-overlay-backdrop{position:fixed;z-index:auto}