@alauda-fe/dynamic-plugin-shared 0.0.1-alpha.8 → 0.0.3-alpha.0

package/package.json

@@ -1,21 +1,21 @@
 {
   "name": "@alauda-fe/dynamic-plugin-shared",
-  "version": "0.0.1-alpha.8",
+  "version": "0.0.3-alpha.0",
   "peerDependencies": {
     "@alauda-fe/i18n": "1.0.4",
     "@alauda/chart": "^0.1.11",
     "@alauda/code-editor": "^5.1.0",
-    "@alauda/ui": "^7.2.0",
-    "@alauda-fe/dynamic-plugin-sdk": "0.0.1",
-    "@angular/common": "^18.1.1",
-    "@angular/core": "^18.1.1",
-    "@angular/animations": "^18.1.1",
-    "@angular/cdk": "^16.2.2",
-    "@angular/compiler": "^18.1.1",
-    "@angular/forms": "^18.1.1",
-    "@angular/platform-browser": "^18.1.1",
-    "@angular/platform-browser-dynamic": "^18.1.1",
-    "@angular/router": "^18.1.1",
+    "@alauda-fe/dynamic-plugin-sdk": "0.0.1-alpha.18",
+    "@alauda/ui": "^9.1.2-beta.6",
+    "@angular/common": "^21.1.1",
+    "@angular/core": "^21.1.1",
+    "@angular/animations": "^21.1.1",
+    "@angular/cdk": "^21.1.1",
+    "@angular/compiler": "^21.1.1",
+    "@angular/forms": "^21.1.1",
+    "@angular/platform-browser": "^21.1.1",
+    "@angular/platform-browser-dynamic": "^21.1.1",
+    "@angular/router": "^21.1.1",
     "ab64": "^0.1.1",
     "compare-versions": "^6.1.0",
     "cron-parser": "^4.9.0",
@@ -30,7 +30,7 @@
     "rxjs": "^7.8.1",
     "ts-md5": "^1.3.1",
     "yaml": "^2.3.2",
-    "zone.js": "^0.13.1"
+    "zone.js": "^0.16.0"
   },
   "private": false,
   "publishConfig": {
@@ -38,15 +38,13 @@
   },
   "sideEffects": false,
   "module": "fesm2022/alauda-fe-dynamic-plugin-shared.mjs",
-  "typings": "index.d.ts",
+  "typings": "types/alauda-fe-dynamic-plugin-shared.d.ts",
   "exports": {
     "./package.json": {
       "default": "./package.json"
     },
     ".": {
-      "types": "./index.d.ts",
-      "esm2022": "./esm2022/alauda-fe-dynamic-plugin-shared.mjs",
-      "esm": "./esm2022/alauda-fe-dynamic-plugin-shared.mjs",
+      "types": "./types/alauda-fe-dynamic-plugin-shared.d.ts",
       "default": "./fesm2022/alauda-fe-dynamic-plugin-shared.mjs"
     }
   },

package/styles/lib.scss

@@ -1 +1 @@
-.tw-mb-12{margin-bottom:12px}.tw-mb-4{margin-bottom:4px}.tw-ml-\[-4px\]{margin-left:-4px}.tw-mr-4{margin-right:4px}.tw-mr-8{margin-right:8px}.tw-mt-0{margin-top:0}.tw-flex{display:flex}.tw-h-\[8px\]{height:8px}.tw-w-full{width:100%}.tw-flex-1{flex:1 1 0%}.tw-cursor-pointer{cursor:pointer}.tw-justify-end{justify-content:flex-end}.tw-overflow-hidden{overflow:hidden}.tw-text-ellipsis{text-overflow:ellipsis}.tw-text-center{text-align:center}.\!tw-text-s{font-size:var(--aui-font-size-s)!important}.tw-text-main-text{color:rgb(var(--aui-color-main-text))}.tw-text-n-2{color:rgb(var(--aui-color-n-2))}.tw-text-red{color:rgb(var(--aui-color-red))}.tw-icon-m{font-size:var(--aui-icon-size-m)}.hover\:tw-text-primary:hover{color:rgb(var(--aui-color-primary))}
+.tw-mb-12{margin-bottom:12px}.tw-mb-4{margin-bottom:4px}.tw-ml-6{margin-left:6px}.tw-ml-8{margin-left:8px}.tw-ml-\[-4px\]{margin-left:-4px}.tw-mr-4{margin-right:4px}.tw-mr-8{margin-right:8px}.tw-mt-0{margin-top:0}.tw-flex{display:flex}.tw-h-\[22px\]{height:22px}.tw-h-\[8px\]{height:8px}.tw-w-full{width:100%}.tw-min-w-\[160px\]{min-width:160px}.tw-min-w-\[260px\]{min-width:260px}.tw-max-w-\[400px\]{max-width:400px}.tw-max-w-\[45\%\]{max-width:45%}.tw-flex-1{flex:1 1 0%}.tw-flex-shrink-0{flex-shrink:0}.tw-cursor-pointer{cursor:pointer}.tw-flex-col{flex-direction:column}.tw-items-center{align-items:center}.tw-justify-end{justify-content:flex-end}.tw-overflow-hidden{overflow:hidden}.tw-text-ellipsis{text-overflow:ellipsis}.tw-bg-p-6{background-color:rgb(var(--aui-color-p-6))}.tw-text-center{text-align:center}.\!tw-text-s{font-size:var(--aui-font-size-s)!important}.tw-text-m{font-size:var(--aui-font-size-m)}.tw-text-help-text{color:rgb(var(--aui-color-help-text))}.tw-text-main-text{color:rgb(var(--aui-color-main-text))}.tw-text-n-2{color:rgb(var(--aui-color-n-2))}.tw-text-n-4{color:rgb(var(--aui-color-n-4))}.tw-text-p-2{color:rgb(var(--aui-color-p-2))}.tw-text-red{color:rgb(var(--aui-color-red))}.tw-icon-m{font-size:var(--aui-icon-size-m)}.hover\:tw-text-primary:hover{color:rgb(var(--aui-color-primary))}

package/styles/mixins.scss

@@ -2,54 +2,9 @@
 @import 'node_modules/@alauda/ui/theme/var';
 @import 'node_modules/@alauda/ui/theme/mixin';
 @import 'node_modules/@alauda/ui/theme/pattern';
+@import 'libs/dynamic-plugin-sdk/styles/mixins';
 @import './var';
 
-@mixin app-root {
-  display: block;
-  width: 100%;
-  z-index: 1;
-}
-
-@mixin fixed-form-container {
-  display: block;
-  margin-bottom: $fixed-form-footer-height;
-}
-
-// 切换侧边栏状态时会导致布局变更，可以使用这个mixin使过渡更自然
-@mixin sidenav-transition($props...) {
-  transition: $props;
-  transition-duration: $transition-duration-s;
-  transition-timing-function: $ease-in-out;
-}
-
-@mixin fixed-form-footer {
-  position: fixed;
-  right: $page-padding-m;
-  bottom: 0;
-  z-index: 110;
-  height: $fixed-form-footer-height;
-  padding: 0 20px;
-  border-top-left-radius: use-var(border-radius-l);
-  border-top-right-radius: use-var(border-radius-l);
-  display: flex;
-  justify-content: flex-end;
-  align-items: center;
-  background-color: use-rgb(n-10);
-  @include card-shadow;
-
-  left: $page-sider-width + $page-padding-m * 2;
-
-  @at-root {
-    #{selector-nest($page-sider-collapse-selector, &)} {
-      left: $page-sider-collapse-width + $page-padding-m * 2;
-    }
-
-    #{selector-nest($page-sider-ani-selector, &)} {
-      @include sidenav-transition(left);
-    }
-  }
-}
-
 @mixin array-form-table {
   .acl-array-form-table {
     flex: 1;
@@ -293,56 +248,6 @@
   }
 }
 
-@mixin inline-select {
-  display: inline-flex;
-  align-items: center;
-  border-radius: use-var(border-radius-m);
-  border: 1px solid use-rgb(border);
-  background-color: use-rgb(n-9);
-  padding-left: 8px;
-
-  &:hover {
-    border-color: use-rgb(primary);
-  }
-
-  &:focus,
-  &.isFocused {
-    border-color: use-rgb(primary);
-    @include outline-shadow(primary);
-  }
-
-  > label {
-    font-size: use-var(font-size-m);
-    font-weight: use-var(font-weight-normal);
-    color: use-text-color(help);
-    white-space: nowrap;
-  }
-
-  .aui-input {
-    border: 0;
-
-    &:focus,
-    &.isFocused {
-      border: none;
-      box-shadow: none !important;
-    }
-
-    height: calc(#{use-var(inline-height-m)} - 2px);
-  }
-}
-
-@mixin sticky-header($top) {
-  position: sticky;
-  z-index: 1;
-  top: $top;
-}
-
-@mixin sticky-table-header($top) {
-  > .aui-table > .aui-table__header-row {
-    @include sticky-header($top);
-  }
-}
-
 @mixin detail-page-fullheight($gap: 0) {
   display: block;
   height: calc(100vh - (#{$page-top}) - #{111px + 16px + 20px + $gap});
@@ -399,11 +304,6 @@
   );
 }
 
-@mixin bicolor($main, $secondary) {
-  --bicolor-main: #{$main};
-  --bicolor-secondary: #{$secondary};
-}
-
 @mixin table-row-placeholder-extend {
   display: flex;
   justify-content: center;
@@ -531,105 +431,6 @@
   }
 }
 
-// hover的时候，边框的top，right，bottom，left都向外4px，default和hover要一起使用
-// 分两个方法的原因：有些场景只需要用到边框，不需要hover放大
-// 默认状态和禁用状态。加disabled类名可以成为禁用状态
-@mixin scale-on-default-disabled {
-  position: relative;
-
-  &:after {
-    position: absolute;
-    content: '';
-    inset: 0;
-    border: 1px solid use-rgb(n-7);
-    border-radius: $border-scale-radius;
-    pointer-events: none;
-    transition: $border-transition;
-  }
-
-  &.disabled {
-    background-color: use-rgb(n-8);
-    color: use-rgb(n-6);
-    cursor: not-allowed;
-  }
-}
-
-// hover状态和选中状态
-@mixin scale-on-hover-active {
-  &:hover {
-    &:after {
-      inset: -$border-scale-width;
-      border-color: use-rgb(primary);
-      box-shadow:
-        inset 0 0 0 $border-scale-width use-rgb(n-10),
-        0 0 2 * $border-scale-width 0 use-rgba(primary, 0.5);
-    }
-  }
-
-  &:active {
-    &:after {
-      inset: 0;
-      box-shadow: 0 0 $border-scale-width 0 use-rgba(primary, 0.5);
-    }
-  }
-}
-
-// 合并上面的两个方法，参数是hover后不需要放大的选择器，如果参数是类名选择器可以用引号括起来
-@mixin scale-on-hover($disabled: '.disabled') {
-  @include scale-on-default-disabled;
-
-  &:not(#{$disabled}) {
-    @include scale-on-hover-active;
-  }
-}
-
-@mixin page-color-definition {
-  :root {
-    --acl-page-header-background-color: #{use-rgb(n-10)};
-    --acl-page-header-title-color: #{use-rgb(n-1)};
-    --acl-page-header-text-color: #{use-rgb(n-2)};
-    --acl-nav-background-color: #{use-rgb(main-bg)};
-    --acl-nav-active-text-color: #{use-rgb(primary)};
-    --acl-nav-active-background-color: #{use-rgb(p-5)};
-    --acl-nav-popper-background-color: #{use-rgb(popper-bg)};
-    --acl-icon-color-cpu: #7c61ff;
-    --acl-icon-color-memory: #01a1c5;
-    --acl-icon-color-storage: #85b53a;
-    --acl-icon-color-gpu: #4a77f8;
-    --acl-icon-color-gpu-memory: #b95252;
-  }
-}
-
-@mixin colorful-icon() {
-  @include theme-light {
-    @include bicolor(use-rgb(primary), use-rgb(p-3));
-  }
-
-  @include theme-dark {
-    @include bicolor(use-rgb(primary), use-rgb(p-3));
-  }
-}
-
-@mixin colorful-icon-highlight() {
-  @include theme-light {
-    @include bicolor(white, use-rgb(p-4));
-  }
-
-  @include theme-dark {
-    @include bicolor(white, #b3d7fc);
-  }
-}
-
-@mixin colorful-icon-plain() {
-  @include theme-light {
-    @include bicolor(use-rgb(n-3), use-rgb(n-5));
-  }
-
-  @include theme-dark {
-    @include bicolor(use-rgb(n-3), use-rgb(n-5));
-  }
-}
-
 @mixin co-line-clamp($lines: 3) {
   display: -webkit-box;
   overflow: hidden;
@@ -647,16 +448,6 @@
   }
 }
 
-@mixin lang-not-zh {
-  $scope: &;
-
-  @at-root {
-    #{selector-nest('html:not([lang|=zh])', $scope)} {
-      @content;
-    }
-  }
-}
-
 @mixin multi-line-textarea-wrapper {
   display: grid;
   align-items: stretch;

package/styles/var.scss

@@ -1,30 +1,5 @@
-$page-min-width: 1200px;
-
 $page-header-height: var(--acl-page-header-height);
 $page-toolbar-height: 44px;
-$page-card-padding: 40px;
-$page-bottom-padding: 20px;
-$page-sider-width: 220px;
-$page-sider-collapse-width: 40px;
-$page-sider-footer-height: 52px;
-$page-sider-collapse-icon-translate-x: -8px;
-$page-sider-collapse-selector: '.sidenav-collapse';
-$page-sider-ani-selector: '.sidenav-ani';
+$page-top: $page-header-height + ' + ' + $page-toolbar-height;
 $page-padding-m: 20px;
-$page-padding-s: 16px;
-
 $fixed-form-footer-height: 64px;
-
-$default-border: 1px solid use-rgb(border);
-$border-scale-width: 4px;
-$border-transition: all 0.2s ease-in-out;
-$border-scale-radius: 4px;
-
-$ease-in-out: cubic-bezier(0.38, 0, 0.24, 1);
-$transition-duration-s: 0.3s; // 最慢
-$transition-duration-m: 0.24s; // 适中
-$transition-duration-f: 0.2s; // 最快
-
-// var(--acl-page-header-height) + 44px
-$page-top: $page-header-height + ' + ' + $page-toolbar-height;
-$page-top-padding: calc(#{$page-top} + 20px);