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

package/styles/mixins.scss

@@ -1,504 +0,0 @@
-// 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 'libs/dynamic-plugin-sdk/styles/mixins' as *;
-@use './var' as shared-var;
-
-@mixin array-form-table {
-  .acl-array-form-table {
-    flex: 1;
-    width: 100%;
-    border-spacing: 0;
-    border: 12px solid use-rgb(n-9);
-    border-radius: use-var(border-radius-l);
-    border-collapse: unset;
-
-    thead {
-      background-color: use-rgb(n-9);
-
-      th,
-      td {
-        line-height: 20px;
-        color: use-rgb(n-1);
-        text-align: left;
-        font-weight: 500;
-        padding: 0 0 12px 8px;
-
-        &[required]:before {
-          content: '*';
-          color: use-rgb(red);
-          margin-right: 4px;
-        }
-      }
-    }
-
-    tbody {
-      > tr {
-        background-color: use-rgb(n-10);
-        border-radius: 2px;
-
-        &:first-child {
-          > td {
-            border-top: unset;
-          }
-        }
-      }
-
-      td {
-        padding: 8px 0 8px 8px;
-        vertical-align: middle;
-
-        &:last-child {
-          padding: 8px;
-        }
-      }
-    }
-
-    tr.acl-array-form-table__row-error:not(
-        :has(+ .acl-array-form-table__row-error:empty)
-      ) {
-      background-color: rgb(var(--aui-color-r-6));
-    }
-
-    tr.acl-array-form-table--row-action {
-      td {
-        padding: unset;
-        border-bottom: unset;
-        padding-bottom: unset;
-        border-top: 8px solid use-rgb(n-9);
-      }
-    }
-
-    tr.acl-array-form-table__separator {
-      td {
-        padding: 0;
-        background-color: use-rgb(n-9);
-      }
-    }
-
-    th.acl-array-form-table__action-col {
-      min-width: 48px;
-    }
-
-    /* We have a convention here that the last column is the action column */
-    td.acl-array-form-table__action-col {
-      padding: 8px;
-      text-align: center;
-      white-space: nowrap;
-      vertical-align: middle;
-      width: 24px;
-
-      .aui-button--text.isPlain {
-        font-size: 16px;
-      }
-
-      /* customized style */
-      .action-col__vertical {
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        justify-content: center;
-      }
-    }
-
-    /* customized style */
-    tbody td.acl-table-form-error-hint {
-      // 上一行 padding-bottom 为 8px，这里我们希望错误内容与控件间距为 4px
-      margin-top: -4px;
-      border-top: none;
-      padding-top: 0;
-      color: use-rgb(red);
-      font-size: 12px;
-
-      acl-errors-mapper .acl-error-hint {
-        margin-top: 0;
-      }
-    }
-
-    &__bottom-control-buttons {
-      display: flex;
-      width: 100%;
-      background-color: use-rgb(n-9);
-
-      .aui-button {
-        flex: 1;
-
-        &--default {
-          color: use-text-color(secondary);
-        }
-
-        &:not([disabled]) {
-          background-color: use-rgb(n-10);
-
-          &:hover {
-            background-color: use-rgb(p-6);
-          }
-
-          &:active {
-            background-color: use-rgb(p-5);
-          }
-        }
-
-        &.aui-button--primary.isPlain[disabled] {
-          background-color: use-rgb(n-8);
-          color: use-rgb(n-6);
-        }
-
-        border-style: unset;
-        font-size: 14px;
-        height: 28px;
-        border-radius: 2px;
-
-        aui-icon {
-          font-size: 16px;
-        }
-      }
-    }
-
-    &__readonly-mode {
-      border-radius: use-var(border-radius-l);
-      border-collapse: separate;
-
-      th,
-      td {
-        .aui-checkbox {
-          margin: unset;
-        }
-      }
-
-      thead {
-        tr {
-          th,
-          td {
-            padding: 0 10px 12px;
-            border-top: none;
-
-            &:first-child {
-              padding-left: 20px;
-            }
-
-            &:last-child {
-              padding-right: 20px;
-            }
-          }
-        }
-      }
-
-      tbody {
-        tr {
-          height: 58px;
-
-          td {
-            padding: 15px 10px;
-            border: 1px solid use-rgb(n-8);
-            border-bottom-width: 0;
-
-            &:not(:last-child) {
-              border-right: none;
-            }
-
-            &:not(:first-child) {
-              border-left: none;
-            }
-
-            &:first-child {
-              padding-left: 19px;
-            }
-
-            &:last-child {
-              padding: 15px 19px 15px 10px;
-            }
-          }
-        }
-
-        tr:last-child {
-          td {
-            border-bottom-width: 1px;
-          }
-
-          td:first-child {
-            border-bottom-left-radius: use-var(border-radius-l);
-          }
-
-          td:last-child {
-            border-bottom-right-radius: use-var(border-radius-l);
-          }
-        }
-
-        tr:first-child {
-          td {
-            border-top: 1px solid use-rgb(n-8);
-          }
-
-          td:first-child {
-            border-top-left-radius: use-var(border-radius-l);
-          }
-
-          td:last-child {
-            border-top-right-radius: use-var(border-radius-l);
-          }
-        }
-      }
-    }
-
-    &__action-col-divider {
-      border-left: 1px solid use-rgb(n-8);
-    }
-  }
-}
-
-@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

@@ -1,5 +0,0 @@
-$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;