@alauda-fe/dynamic-plugin-shared 0.0.4-alpha.10 → 0.0.4-alpha.11

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@alauda-fe/dynamic-plugin-shared",
-  "version": "0.0.4-alpha.10",
+  "version": "0.0.4-alpha.11",
   "peerDependencies": {
     "@alauda/code-editor": "^6.0.1-alpha.3",
     "@alauda-fe/dynamic-plugin-sdk": "^0.0.1-alpha.25",

package/styles/mixins.scss

@@ -0,0 +1,261 @@
+// stylelint-disable no-descending-specificity
+@use 'node_modules/@alauda/ui/theme/var' as *;
+@use 'node_modules/@alauda/ui/theme/mixin' as *;
+@use 'node_modules/@alauda/ui/theme/pattern' as *;
+@use 'node_modules/@alauda-fe/dynamic-plugin-sdk/styles/mixins' as *;
+@use './var' as shared-var;
+
+@mixin detail-page-fullheight($gap: 0) {
+  display: block;
+  height: calc(
+    100vh - (#{shared-var.$page-top}) - #{111px + 16px + 20px + $gap}
+  );
+
+  > .aui-card {
+    height: 100%;
+
+    .aui-card__content,
+    aui-code-editor,
+    .aui-code-editor {
+      height: 100%;
+      min-height: 100%;
+    }
+  }
+}
+
+// 通用创建/更新页，撑屏内容高度
+@mixin create-page-fullheight__card($hasSample: false) {
+  $height: calc(
+    100vh - (#{shared-var.$page-top}) - #{20px + 32px + 16px + 1px + 16px +
+      20px + 20px + shared-var.$fixed-form-footer-height}
+  );
+  @if $hasSample == true {
+    $height: calc(
+      100vh -
+        (#{shared-var.$page-top}) -
+        #{20px +
+        32px +
+        16px +
+        1px +
+        16px +
+        20px +
+        20px +
+        15px +
+        shared-var.$fixed-form-footer-height}
+    );
+  }
+
+  display: block;
+  height: $height;
+  min-height: $height;
+
+  aui-code-editor,
+  .aui-code-editor {
+    height: 100%;
+    min-height: 100%;
+  }
+}
+
+// 创建页，无card-header时撑屏内容高度
+@mixin create-page-fullheight__content {
+  height: calc(
+    100vh - (#{shared-var.$page-top}) - #{20px + 20px + 20px +
+      shared-var.$fixed-form-footer-height}
+  );
+}
+
+@mixin table-row-placeholder-extend {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: 1;
+  @include text-set(m, help);
+}
+
+@mixin acl-select-prefix {
+  aui-select .acl-select-prefix__wrapper {
+    &.isOpened,
+    &:hover:not(.isDisabled) {
+      border-color: use-rgb(primary);
+    }
+
+    &.isOpened {
+      @include outline-shadow(primary);
+    }
+
+    &.isDisabled {
+      .acl-select-prefix__label {
+        background-color: use-rgb(n-8);
+        border-color: use-rgb(n-7);
+      }
+    }
+
+    display: flex;
+    border: 1px solid use-rgb(border);
+    border-radius: use-var(border-radius-m);
+    overflow-y: hidden;
+
+    aui-input-group {
+      flex: 1;
+      margin-block: -1px;
+    }
+
+    .aui-input {
+      box-shadow: none !important;
+      border: none !important;
+    }
+
+    .acl-select-prefix__label {
+      order: -1;
+      display: inline-flex;
+      align-items: center;
+      background-color: use-rgb(n-9);
+      padding-left: 8px;
+      font-size: 14px;
+      font-weight: use-var(font-weight-bold);
+      color: use-rgb(n-4);
+      white-space: nowrap;
+    }
+  }
+
+  aui-multi-select {
+    .acl-select-prefix__label {
+      color: use-rgb(n-4);
+      margin-right: 8px;
+    }
+  }
+
+  aui-select.ng-invalid.ng-dirty,
+  .ng-submitted aui-select.ng-invalid {
+    .acl-select-prefix__wrapper {
+      @include input-error;
+
+      &.isOpened {
+        @include outline-shadow(red);
+      }
+
+      &:hover:not(.isOpened) {
+        box-shadow: none;
+      }
+    }
+  }
+}
+
+@mixin acl-table-in-table {
+  .acl-table-in-table {
+    width: calc(100% + 16px);
+    margin-left: -8px;
+    margin-right: -8px;
+
+    td,
+    th {
+      line-height: 20px;
+      padding: 8px;
+      border-bottom: 1px solid use-rgb(n-8);
+      text-align: left;
+    }
+
+    thead {
+      td,
+      th {
+        padding-top: 0;
+        color: use-rgb(n-4);
+      }
+    }
+
+    tbody,
+    tfoot {
+      td {
+        color: use-rgb(n-1);
+      }
+
+      > tr:last-child {
+        td {
+          padding-bottom: 0;
+          border-bottom: 0;
+        }
+      }
+    }
+  }
+}
+
+// 选中的产品和选中命名空间的背景颜色
+@mixin select-background {
+  background-color: use-rgb(primary);
+  border-color: use-rgb(primary);
+  color: white;
+  cursor: default;
+
+  &:hover {
+    box-shadow: none;
+  }
+}
+
+@mixin co-line-clamp($lines: 3) {
+  display: -webkit-box;
+  overflow: hidden;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: $lines;
+}
+
+@mixin lang-zh {
+  $scope: &;
+
+  @at-root {
+    #{selector-nest('html[lang|=zh]', $scope)} {
+      @content;
+    }
+  }
+}
+
+@mixin multi-line-textarea-wrapper {
+  display: grid;
+  align-items: stretch;
+
+  &:after,
+  textarea {
+    grid-area: 1 / 1;
+    width: auto;
+    padding: 3px 5px; // aui mini textarea padding
+    font: inherit;
+    resize: none;
+    max-height: 252px;
+  }
+
+  &:after {
+    content: attr(data-value) ' ';
+    visibility: hidden;
+    white-space: pre-wrap;
+  }
+
+  textarea {
+    overflow: auto;
+    height: auto !important;
+  }
+
+  &:focus-within {
+    textarea:focus {
+      outline: none;
+    }
+  }
+}
+
+@mixin highlight-field-item() {
+  :host {
+    acl-field-set-item {
+      ::ng-deep {
+        .field-set-item__value,
+        acl-status-icon {
+          color: use-rgb(n-1) !important;
+          font-weight: 500 !important;
+        }
+
+        label,
+        .field-set-item__label:after {
+          color: use-rgb(n-2) !important;
+          font-weight: 400 !important;
+        }
+      }
+    }
+  }
+}

package/styles/var.scss

@@ -0,0 +1,5 @@
+$page-header-height: var(--acl-page-header-height);
+$page-toolbar-height: 44px;
+$page-top: $page-header-height + ' + ' + $page-toolbar-height;
+$page-padding-m: 20px;
+$fixed-form-footer-height: 64px;