misp-ui-library-test 0.0.1

package/dist/theme-chalk/dialog/index.scss

@@ -0,0 +1,168 @@
+
+@import '../variables.scss';
+@import '../mixins.scss';
+
+@include b(dialog) {
+  position: relative;
+  margin: 0 auto 50px;
+  background: var(--base-bg, $white);
+  border-radius: 4px;
+  box-shadow: $box-shadow-3;
+  box-sizing: border-box;
+  width: 50%;
+
+  @include when(fullscreen) {
+    width: 100% !important;
+    margin-top: 0 !important;
+    margin-bottom: 0 !important;
+    height: 100%;
+    overflow: auto;
+  }
+
+  @include e(wrapper) {
+    position: fixed;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    overflow: auto;
+    margin: 0;
+    z-index: 2000;
+
+    // 有遮罩层时的背景
+    &.is-with-modal {
+      background-color: rgba(0, 0, 0, 0.5);
+    }
+  }
+
+  @include e(header) {
+    padding: 20px;
+    padding-bottom: 10px;
+  }
+
+  @include e(header-content) {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+
+    i, .ui-icon-warning {
+      font-size: 22px;
+      color: $warning;
+    }
+  }
+
+  @include e(headerbtn) {
+    position: absolute;
+    top: 20px;
+    right: 20px;
+    padding: 0;
+    background: transparent;
+    border: none;
+    outline: none;
+    cursor: pointer;
+    font-size: 16px;
+
+    .ui-dialog__close {
+      color: $disable-text;
+    }
+
+    &:focus, &:hover {
+      &:not(.is-disabled) {
+        .ui-dialog__close {
+          color: $primary-blue;
+        }
+      }
+    }
+
+    @include when(disabled) {
+      cursor: not-allowed;
+      opacity: 0.5;
+    }
+  }
+
+  @include e(title) {
+    line-height: 1.4;
+    font-size: 18px;
+    color: $primary-text;
+    font-weight: 500;
+  }
+
+  @include e(body) {
+    padding: 30px 20px;
+    color: $sd-text;
+    font-size: 14px;
+    word-break: break-all;
+  }
+
+  @include e(message) {
+    line-height: 1.6;
+    color: $sd-text;
+  }
+
+  @include e(footer) {
+    padding: 20px;
+    padding-top: 10px;
+    text-align: right;
+    box-sizing: border-box;
+
+    .ui-button + .ui-button {
+      margin-left: 10px;
+    }
+  }
+
+  @include m(center) {
+    text-align: center;
+
+    @include e(body) {
+      text-align: initial;
+      padding: 25px 30px 30px;
+    }
+
+    @include e(footer) {
+      text-align: inherit;
+    }
+  }
+
+  // 尺寸支持
+  @include m(small) {
+    width: 30%;
+  }
+
+  @include m(large) {
+    width: 70%;
+  }
+
+  @include m(mini) {
+    width: 20%;
+  }
+}
+
+.ui-dialog-fade-enter-active {
+  animation: ui-dialog-fade-in .3s;
+}
+
+.ui-dialog-fade-leave-active {
+  animation: ui-dialog-fade-out .3s;
+}
+
+@keyframes ui-dialog-fade-in {
+  0% {
+    transform: translate3d(0, -20px, 0);
+    opacity: 0;
+  }
+  100% {
+    transform: translate3d(0, 0, 0);
+    opacity: 1;
+  }
+}
+
+@keyframes ui-dialog-fade-out {
+  0% {
+    transform: translate3d(0, 0, 0);
+    opacity: 1;
+  }
+  100% {
+    transform: translate3d(0, -20px, 0);
+    opacity: 0;
+  }
+}

package/dist/theme-chalk/divider/index.scss

@@ -0,0 +1,46 @@
+
+@import '../variables.scss';
+@import '../mixins.scss';
+
+@include b(divider) {
+  background-color: $primary-line;
+  position: relative;
+
+  @include m(horizontal) {
+    display: block;
+    height: 1px;
+    width: 100%;
+    margin: 24px 0;
+  }
+
+  @include m(vertical) {
+    display: inline-block;
+    width: 1px;
+    height: 1em;
+    margin: 0 8px;
+    vertical-align: middle;
+  }
+
+  @include e(text) {
+    position: absolute;
+    background-color: $base-bg;
+    padding: 0 12px;
+    font-size: 14px;
+    color: $sd-text;
+
+    &.is-left {
+      left: 0;
+      transform: translateY(-50%);
+    }
+
+    &.is-center {
+      left: 50%;
+      transform: translateX(-50%) translateY(-50%);
+    }
+
+    &.is-right {
+      right: 0;
+      transform: translateY(-50%);
+    }
+  }
+}

package/dist/theme-chalk/drawer/index.scss

@@ -0,0 +1,172 @@
+
+@import '../variables.scss';
+@import '../mixins.scss';
+
+@keyframes ui-drawer-fade-in {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+
+@keyframes ltr-drawer-in {
+  0% { transform: translate(-100%, 0); }
+  100% { transform: translate(0, 0); }
+}
+
+@keyframes rtl-drawer-in {
+  0% { transform: translate(100%, 0); }
+  100% { transform: translate(0, 0); }
+}
+
+@keyframes ttb-drawer-in {
+  0% { transform: translate(0, -100%); }
+  100% { transform: translate(0, 0); }
+}
+
+@keyframes btt-drawer-in {
+  0% { transform: translate(0, 100%); }
+  100% { transform: translate(0, 0); }
+}
+
+@include b(drawer) {
+  position: absolute;
+  box-sizing: border-box;
+  background-color: $base-bg;
+  color: $sd-text;
+  display: flex;
+  flex-direction: column;
+  box-shadow: 0 8px 10px -5px rgba(0, 0, 0, 0.2), 0 16px 24px 2px rgba(0, 0, 0, 0.14), 0 6px 30px 5px rgba(0, 0, 0, 0.12);
+  overflow: hidden;
+  outline: none;
+
+  @include e(wrapper) {
+    position: fixed;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    overflow: hidden;
+    margin: 0;
+    z-index: $index-modal;
+  }
+
+  @include e(mask) {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-color: $popup-bg;
+  }
+
+  @include e(header) {
+    align-items: center;
+    color: $primary-text;
+    display: flex;
+    margin-bottom: 0;
+    padding: 16px 20px;
+    border-bottom: 1px solid $primary-line;
+    & > span {
+      flex: 1;
+    }
+  }
+
+  @include e(title) {
+    margin: 0;
+    flex: 1;
+    line-height: inherit;
+    font-size: 16px;
+    font-weight: 500;
+    color: $primary-text;
+  }
+
+  @include e(close-btn) {
+    border: none;
+    cursor: pointer;
+    font-size: 18px;
+    color: $td-text;
+    background-color: transparent;
+    outline: none;
+    padding: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: color .2s;
+    &:hover {
+        color: $primary-blue;
+    }
+  }
+
+  @include e(body) {
+    flex: 1;
+    overflow: auto;
+    padding: 20px;
+    & > * {
+      box-sizing: border-box;
+    }
+  }
+
+  @include e(footer) {
+    padding: 16px 20px;
+    text-align: right;
+    box-sizing: border-box;
+    border-top: 1px solid $primary-line;
+
+    .ui-drawer__footer-buttons {
+      .ui-button + .ui-button {
+        margin-left: 12px;
+      }
+    }
+  }
+
+  @include m(ltr) {
+    left: 0;
+    top: 0;
+    bottom: 0;
+    height: 100%;
+  }
+
+  @include m(rtl) {
+    right: 0;
+    top: 0;
+    bottom: 0;
+    height: 100%;
+  }
+
+  @include m(ttb) {
+    top: 0;
+    left: 0;
+    right: 0;
+    width: 100%;
+  }
+
+  @include m(btt) {
+    bottom: 0;
+    left: 0;
+    right: 0;
+    width: 100%;
+  }
+}
+
+.ui-drawer-fade-enter-active {
+  animation: ui-drawer-fade-in .3s;
+  .ui-drawer {
+    &.ui-drawer--ltr { animation: ltr-drawer-in .3s cubic-bezier(0.7, 0.3, 0.1, 1); }
+    &.ui-drawer--rtl { animation: rtl-drawer-in .3s cubic-bezier(0.7, 0.3, 0.1, 1); }
+    &.ui-drawer--ttb { animation: ttb-drawer-in .3s cubic-bezier(0.7, 0.3, 0.1, 1); }
+    &.ui-drawer--btt { animation: btt-drawer-in .3s cubic-bezier(0.7, 0.3, 0.1, 1); }
+  }
+}
+
+.ui-drawer-fade-leave-active {
+  animation: ui-drawer-fade-in .3s reverse;
+  .ui-drawer {
+    &.ui-drawer--ltr { animation: ltr-drawer-in .3s reverse cubic-bezier(0.7, 0.3, 0.1, 1); }
+    &.ui-drawer--rtl { animation: rtl-drawer-in .3s reverse cubic-bezier(0.7, 0.3, 0.1, 1); }
+    &.ui-drawer--ttb { animation: ttb-drawer-in .3s reverse cubic-bezier(0.7, 0.3, 0.1, 1); }
+    &.ui-drawer--btt { animation: btt-drawer-in .3s reverse cubic-bezier(0.7, 0.3, 0.1, 1); }
+  }
+}

package/dist/theme-chalk/empty/index.scss

@@ -0,0 +1,36 @@
+
+@import '../variables.scss';
+@import '../mixins.scss';
+
+@include b(empty) {
+  width: 100%;
+  padding: 40px 0;
+  text-align: center;
+  box-sizing: border-box;
+
+  @include e(image) {
+    margin-bottom: 20px;
+
+    img {
+      width: 160px;
+      height: 160px;
+    }
+
+    .ui-empty__image-path {
+      width: 160px;
+      height: 160px;
+    }
+  }
+
+  @include e(description) {
+    p {
+      color: $sd-text;
+      font-size: 14px;
+      margin: 0;
+    }
+  }
+
+  @include e(bottom) {
+    margin-top: 20px;
+  }
+}

package/dist/theme-chalk/form/index.scss

@@ -0,0 +1,220 @@
+
+@import '../variables.scss';
+@import '../mixins.scss';
+
+@include b(form) {
+  .ui-form-item__label {
+    line-height: calc($--input-height + 2px);
+  }
+  @include m(label-left) {
+    .ui-form-item__label {
+      text-align: left;
+      line-height: calc($--input-height + 2px);
+    }
+  }
+  @include m(label-top) {
+    .ui-form-item__label {
+      float: none;
+      display: inline-block;
+      text-align: left;
+      line-height: calc($--font-size-base + 2px);
+      padding-bottom: 4px;
+    }
+    .ui-form-complex--field {
+      .ui-form-item__label {
+        display: block;
+      }
+      .ui-form-complex--field__add {
+        display: flex;
+        gap: 16px;
+      }
+    }
+  }
+  @include m(inline) {
+    & .ui-form-item {
+      display: inline-block;
+      margin-right: 10px;
+      vertical-align: top;
+      .ui-form-item__label {
+        line-height: calc($--input-height + 2px);
+      }
+      @include m(medium) {
+        .ui-form-item__label {
+          line-height: calc($--input-height-medium + 2px);
+        }
+      }
+      @include m(small) {
+        .ui-form-item__label {
+          line-height: calc($--input-height-small + 2px);
+        }
+      }
+      @include m(mini) {
+        .ui-form-item__label {
+          line-height: calc($--input-height-mini + 2px);
+        }
+      }
+    }
+    & .ui-form-item__label {
+      float: none;
+      display: inline-block;
+      vertical-align: middle;
+    }
+    & .ui-form-item__content {
+      display: inline-block;
+      vertical-align: top;
+    }
+    &.ui-form--label-top .ui-form-item__content {
+      display: block;
+    }
+    .ui-form-item:has(+ .ui-form-item) {
+      margin-top: initial;
+    }
+  }
+}
+@include b(form-complex) {
+  @include m(field) {
+    @include e(add) {
+      .field-label {
+        white-space: nowrap;
+      }
+    }
+    @include e(inner) {
+      width: 100%;
+    }
+  }
+  @include m(item) {
+    width: 100%;
+    display: flex;
+    gap: 10px;
+    padding: 16px;
+    background-color: var(--sd-bg);
+    border-radius: 8px;
+    &:has(+ .ui-form-complex--item) {
+      margin-bottom: 16px;
+    }
+    @include e(inner) {
+      width: 10%;
+      flex: 1;
+    }
+    @include e(delete) {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+  }
+}
+@include b(form-item) {
+  @include utils-clearfix;
+  & .ui-input__validateIcon {
+    display: none;
+  }
+  &:has(+ .ui-form-item) {
+    margin-bottom: 10px;
+  }
+  @include m(medium) {
+    .ui-form-item__label {
+      line-height: $--input-height-medium;
+    }
+    .ui-form-item__content {
+      line-height: $--input-height-medium;
+    }
+  }
+  @include m(small) {
+    .ui-form-item__label {
+      line-height: $--input-height-small;
+    }
+    .ui-form-item__content {
+      line-height: $--input-height-small;
+    }
+    .ui-form-item__error {
+      padding-top: 2px;
+    }
+  }
+  @include m(mini) {
+    .ui-form-item__label {
+      line-height: $--input-height-mini;
+    }
+    .ui-form-item__content {
+      line-height: $--input-height-mini;
+    }
+    .ui-form-item__error {
+      padding-top: 1px;
+    }
+  }
+  @include e(label-wrap) {
+    float: left;
+    .ui-form-item__label {
+      display: inline-block;
+      float: none;
+    }
+  }
+  @include e(label) {
+    text-align: right;
+    vertical-align: middle;
+    float: left;
+    font-size: 14px;
+    color: var(--sd-text);
+    line-height: 26px;
+    padding: 0 12px 0 0;
+    box-sizing: border-box;
+  }
+  @include e(content) {
+    @include utils-clearfix;
+    line-height: 40px;
+    position: relative;
+    font-size: 16px;
+    .ui-input-group {
+      vertical-align: top;
+    }
+  }
+  @include e(error) {
+    color: var(--danger);
+    font-size: 12px;
+    line-height: 1;
+    padding-top: 4px;
+    position: absolute;
+    top: 100%;
+    left: 0;
+    @include m(inline) {
+      position: relative;
+      top: auto;
+      left: auto;
+      display: inline-block;
+      margin-left: 10px;
+    }
+  }
+  @include when(required) {
+    &:not(.is-no-asterisk) {
+      & > .ui-form-item__label:before,
+      & .ui-form-item__label-wrap > .ui-form-item__label:before {
+        content: '*';
+        color: var(--danger);
+        margin-right: 4px;
+      }
+    }
+  }
+  @include when(error) {
+    margin-bottom: 1.5em;
+    & .ui-time-range-input,
+    & .ui-input__inner,
+    & .ui-textarea__inner {
+      &, &:focus {
+        border-color: var(--danger);
+      }
+    }
+    & .ui-input-group__append,
+    & .ui-input-group__prepend {
+      & .ui-input__inner {
+        border-color: transparent;
+      }
+    }
+    .ui-input__validateIcon {
+      color: var(--danger);
+    }
+  }
+  @include m(feedback) {
+    .ui-input__validateIcon {
+      display: inline-block;
+    }
+  }
+}