@alauda/ui 9.1.1-beta.3 → 9.1.1-beta.4

package/tag/tag.module.d.ts

@@ -0,0 +1,10 @@
+import * as i0 from "@angular/core";
+import * as i1 from "@angular/common";
+import * as i2 from "../icon/icon.module";
+import * as i3 from "./tag.component";
+import * as i4 from "./check-tag/check-tag.component";
+export declare class TagModule {
+    static ɵfac: i0.ɵɵFactoryDeclaration<TagModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<TagModule, never, [typeof i1.CommonModule, typeof i2.IconModule, typeof i3.TagComponent, typeof i4.CheckTagComponent], [typeof i3.TagComponent, typeof i4.CheckTagComponent]>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<TagModule>;
+}

package/tag/tag.types.d.ts

@@ -0,0 +1,9 @@
+import { ValueOf } from '../internal/types';
+export declare const TagType: {
+    readonly Primary: "primary";
+    readonly Success: "success";
+    readonly Warning: "warning";
+    readonly Error: "error";
+    readonly Info: "info";
+};
+export type TagType = ValueOf<typeof TagType>;

package/theme/_mixin.scss

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

package/theme/_pattern.scss

@@ -1,27 +1,27 @@
-@use 'var' as var;
-@use 'mixin' as mixin;
+@import 'var';
+@import 'mixin';
 
 @mixin shadow-0 {
-  border-radius: var.use-var(border-radius-m);
-  background-color: var.use-rgb(n-10);
+  border-radius: use-var(border-radius-m);
+  background-color: use-rgb(n-10);
 }
 
 @mixin shadow-2 {
-  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);
+  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);
 }
 
 @mixin shadow-8 {
-  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);
+  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);
 }
 
 @mixin shadow-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);
+  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);
 }
 
 @mixin zh-form-label-width($parent) {
@@ -42,18 +42,20 @@
     display: flex;
     justify-content: center;
     align-items: center;
-    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);
+    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);
+
     // fixed placeholder to avoid horizontal scrolling
     position: sticky;
     left: 0;
-    @include mixin.text-set(m, placeholder);
 
     > aui-icon:first-child {
-      margin-right: var.use-var(spacing-m);
+      margin-right: use-var(spacing-m);
     }
   }
 

package/theme/_theme-preset.scss

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

package/theme/_var.scss

@@ -1,39 +1,39 @@
 @use 'sass:math';
-@use 'base-var' as base-var;
-@forward 'base-var';
+
+@import 'base-var';
 
 $status-color-map: (
-  success: base-var.use-rgb(green),
-  warning: base-var.use-rgb(yellow),
-  error: base-var.use-rgb(red),
-  info: base-var.use-rgb(primary),
+  success: use-rgb(green),
+  warning: use-rgb(yellow),
+  error: use-rgb(red),
+  info: use-rgb(primary),
 );
 
 // input
 $input-size: (
   large: (
-    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),
+    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),
   ),
   medium: (
-    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),
+    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),
   ),
   small: (
-    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),
+    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),
   ),
   mini: (
-    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),
+    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),
   ),
 );
 
@@ -44,8 +44,8 @@ $table-cell-padding-v: 15px;
 $table-cell-padding-h: 10px;
 
 // Sort
-$sort-indicator-color: base-var.use-text-color(placeholder);
-$sort-indicator-color-active: base-var.use-text-color(secondary);
+$sort-indicator-color: use-text-color(placeholder);
+$sort-indicator-color-active: 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: 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-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-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 base-var.use-rgba(primary, 0.3);
+$tab-label-focus-box-shadow: inset 0 0 0 3px use-rgba(primary, 0.3);
 $tab-header-close-icon-size: 16px;
-$tab-header-title-font-size: base-var.use-var(font-size-xxl);
+$tab-header-title-font-size: use-var(font-size-xxl);
 $tab-header-title-spacing: 20px;
 $tab-header-title-padding: 20px 0 12px;
 

package/theme/index.d.ts

@@ -0,0 +1,5 @@
+export * from './theme.module';
+export * from './theme.pipe';
+export * from './theme.service';
+export * from './theme.types';
+export * from './utils';