@alauda/ui 6.4.8-beta.47 → 6.4.8-beta.49

package/input/input.module.d.ts

@@ -7,13 +7,12 @@ import * as i5 from "./search/search.component";
 import * as i6 from "./tags-input/tags-input.component";
 import * as i7 from "./number-input/number-input.component";
 import * as i8 from "@angular/common";
-import * as i9 from "../button/button.module";
-import * as i10 from "@angular/forms";
-import * as i11 from "../icon/icon.module";
-import * as i12 from "../tag/tag.module";
-import * as i13 from "../shared/shared.module";
+import * as i9 from "@angular/forms";
+import * as i10 from "../icon/icon.module";
+import * as i11 from "../tag/tag.module";
+import * as i12 from "../shared/shared.module";
 export declare class InputModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<InputModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<InputModule, [typeof i1.AutosizeDirective, typeof i2.InputComponent, typeof i3.InputGroupComponent, typeof i4.InputAddonBeforeDirective, typeof i4.InputAddonAfterDirective, typeof i4.InputPrefixDirective, typeof i4.InputSuffixDirective, typeof i5.SearchComponent, typeof i6.TagsInputComponent, typeof i7.NumberInputComponent], [typeof i8.CommonModule, typeof i9.ButtonModule, typeof i10.FormsModule, typeof i10.ReactiveFormsModule, typeof i11.IconModule, typeof i12.TagModule, typeof i13.SharedModule], [typeof i1.AutosizeDirective, typeof i2.InputComponent, typeof i3.InputGroupComponent, typeof i4.InputAddonBeforeDirective, typeof i4.InputAddonAfterDirective, typeof i4.InputPrefixDirective, typeof i4.InputSuffixDirective, typeof i5.SearchComponent, typeof i6.TagsInputComponent, typeof i7.NumberInputComponent]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<InputModule, [typeof i1.AutosizeDirective, typeof i2.InputComponent, typeof i3.InputGroupComponent, typeof i4.InputAddonBeforeDirective, typeof i4.InputAddonAfterDirective, typeof i4.InputPrefixDirective, typeof i4.InputSuffixDirective, typeof i5.SearchComponent, typeof i6.TagsInputComponent, typeof i7.NumberInputComponent], [typeof i8.CommonModule, typeof i9.FormsModule, typeof i9.ReactiveFormsModule, typeof i10.IconModule, typeof i11.TagModule, typeof i12.SharedModule], [typeof i1.AutosizeDirective, typeof i2.InputComponent, typeof i3.InputGroupComponent, typeof i4.InputAddonBeforeDirective, typeof i4.InputAddonAfterDirective, typeof i4.InputPrefixDirective, typeof i4.InputSuffixDirective, typeof i5.SearchComponent, typeof i6.TagsInputComponent, typeof i7.NumberInputComponent]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<InputModule>;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@alauda/ui",
-  "version": "6.4.8-beta.47",
+  "version": "6.4.8-beta.49",
   "description": "Angular UI components by Alauda Frontend Team.",
   "repository": "git+https://github.com/alauda/alauda-ui.git",
   "author": "Alauda Frontend",

package/theme/_base-var.scss

@@ -20,5 +20,12 @@
 }
 
 // Animation
-$animation-duration: 0.3s;
+$animation-duration-slow: 0.3s; // Modal
+$animation-duration-base: 0.24s; // Tab、Dropdown
+$animation-duration-fast: 0.2s;
+
+$ease-out: cubic-bezier(0, 0, 0.2, 1);
+$ease-in: cubic-bezier(0.8, 0, 1, 0.9);
+$ease-in-out: cubic-bezier(0.38, 0, 0.24, 1);
+
 $animation-interpolation: ease;

package/theme/_mixin.scss

@@ -133,8 +133,14 @@
   }
 }
 
+@mixin overlay-pane() {
+  justify-content: center;
+  overflow: auto;
+  @include scroll-bar;
+}
+
 @mixin transition($target: all) {
-  transition: $target $animation-duration $animation-interpolation;
+  transition: $target $animation-duration-slow $animation-interpolation;
 }
 
 @mixin absolute-center() {
@@ -299,3 +305,35 @@
   background-size: 100% 14px;
   height: 100%;
 }
+
+// Motion
+@mixin motion-common($duration: $animation-duration-base) {
+  animation-duration: $duration;
+  animation-fill-mode: both;
+  animation-play-state: paused;
+}
+
+@mixin make-motion(
+  $className,
+  $keyframeName,
+  $duration: $animation-duration-base
+) {
+  .#{$className}-enter,
+  .#{$className}-leave {
+    @include motion-common($duration);
+  }
+
+  .#{$className}-enter.#{$className}-enter-active,
+  .#{$className}-leave.#{$className}-leave-active {
+    animation-play-state: running;
+    pointer-events: none;
+  }
+
+  .#{$className}-enter.#{$className}-enter-active {
+    animation-name: #{$keyframeName}-in;
+  }
+
+  .#{$className}-leave.#{$className}-leave-active {
+    animation-name: #{$keyframeName}-out;
+  }
+}

package/utils/fn.d.ts

@@ -4,3 +4,7 @@ export declare const last: <T>(values: T[]) => T;
 export declare const isTemplateRef: (label: any) => label is TemplateRef<unknown>;
 export declare const isString: (label: any) => label is string;
 export declare const handlePixel: (value: number | string) => string;
+export declare function getElementOffset(elem: HTMLElement): {
+    top: number;
+    left: number;
+};