misp-ui-library-test 0.0.1

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

@@ -0,0 +1,39 @@
+
+@import '../variables.scss';
+@import '../mixins.scss';
+
+@include b(image) {
+  position: relative;
+  display: inline-block;
+  overflow: hidden;
+
+  @include e(placeholder) {
+    background: $base-bg;
+    width: 100%;
+    height: 100%;
+  }
+
+  @include e(error) {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 100%;
+    height: 100%;
+    background: $base-bg;
+    color: $disable-text;
+    font-size: 14px;
+  }
+
+  @include e(inner) {
+    display: block;
+    width: 100%;
+    height: 100%;
+
+    &--center {
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+    }
+  }
+}

package/dist/theme-chalk/index.scss

@@ -0,0 +1,127 @@
+
+// 全局样式
+@import './themes/index.scss';
+@import './variables.scss';
+@import './mixins.scss';
+@import './reset.scss';
+
+// 全局组件
+@import './popper/index.scss';
+@import './popover/index.scss';
+
+// 基础组件
+@import './icon/index.scss';
+@import './no-data/index.scss';
+@import './tag/index.scss';
+@import './button/index.scss';
+
+// 控件组件
+@import './input/index.scss';
+@import './select/index.scss';
+@import './checkbox/index.scss';
+@import './checkbox-group/index.scss';
+@import './checkbox-button/index.scss';
+@import './radio/index.scss';
+@import './radio-group/index.scss';
+@import './radio-button/index.scss';
+@import './switch/index.scss';
+@import './time-picker/index.scss';
+@import './upload/index.scss';
+@import './form/index.scss';
+
+// 数据展示
+@import './table/index.scss';
+@import './tree/index.scss';
+@import './dialog/index.scss';
+@import './drawer/index.scss';
+
+// 图表组件
+@import './chart/index.scss';
+
+// 消息组件
+@import './tooltip/index.scss';
+@import './message/index.scss';
+@import './message-box/index.scss';
+
+// 导航组件
+@import './tabs-navigation/index.scss';
+
+// 其他组件
+@import './pagination/index.scss';
+
+
+
+
+
+// 展示组件
+// @import './alert/index.scss';
+// @import './badge/index.scss';
+// @import './card/index.scss';
+// @import './avatar/index.scss';
+
+// 布局组件
+// @import './row/index.scss';
+// @import './col/index.scss';
+// @import './container/index.scss';
+// @import './header/index.scss';
+// @import './aside/index.scss';
+// @import './main/index.scss';
+// @import './footer/index.scss';
+
+// 导航组件
+// @import './breadcrumb/index.scss';
+// @import './breadcrumb-item/index.scss';
+// @import './tabs/index.scss';
+// @import './tab-pane/index.scss';
+// @import './steps/index.scss';
+// @import './step/index.scss';
+// @import './timeline/index.scss';
+// @import './timeline-item/index.scss';
+
+// 其他展示组件
+// @import './divider/index.scss';
+// @import './empty/index.scss';
+// @import './link/index.scss';
+// @import './progress/index.scss';
+// @import './skeleton/index.scss';
+// @import './skeleton-item/index.scss';
+// @import './spinner/index.scss';
+
+// 简单展示组件
+// @import './image/index.scss';
+// @import './page-header/index.scss';
+// @import './backtop/index.scss';
+// @import './scrollbar/index.scss';
+// @import './statistic/index.scss';
+// @import './result/index.scss';
+
+// 表单组件
+// @import './input-number/index.scss';
+// @import './rate/index.scss';
+// @import './slider/index.scss';
+
+// 数据组件
+// @import './transfer/index.scss';
+// @import './descriptions/index.scss';
+// @import './descriptions-item/index.scss';
+
+// 反馈组件
+// @import './loading/index.scss';
+// @import './notification/index.scss';
+// @import './popconfirm/index.scss';
+
+// 其他组件
+// @import './carousel/index.scss';
+// @import './carousel-item/index.scss';
+// @import './collapse/index.scss';
+// @import './collapse-item/index.scss';
+// @import './menu/index.scss';
+// @import './menu-item/index.scss';
+// @import './submenu/index.scss';
+// @import './dropdown/index.scss';
+// @import './dropdown-menu-item/index.scss';
+// @import './calendar/index.scss';
+// @import './cascader/index.scss';
+// @import './color-picker/index.scss';
+// @import './date-picker/index.scss';
+// @import './autocomplete/index.scss';

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

@@ -0,0 +1,363 @@
+
+@import '../variables.scss';
+@import '../mixins.scss';
+
+@include b(textarea) {
+  position: relative;
+  display: inline-block;
+  width: 100%;
+  vertical-align: bottom;
+  font-size: $--font-size-base;
+  @include e(inner) {
+    display: block;
+    resize: vertical;
+    padding: 5px 12px;
+    line-height: 1.5;
+    box-sizing: border-box;
+    width: 100%;
+    font-size: inherit;
+    color: $--color-text-primary;
+    background-color: $--background-color-base;
+    background-image: none;
+    border: 1px solid $--border-color-base;
+    border-radius: $--border-radius-base;
+    &:hover {
+      border-color: var(--blue-4);
+    }
+    &:focus {
+      outline: none;
+      border-color: var(--blue-4);
+    }
+    @include scroll-bar;
+    &::-webkit-input-placeholder { 
+      color: var(--td-text);
+    }
+  }
+  .ui-input__count {
+    border-radius: 4px;
+    padding: 0 3px;
+    position: absolute;
+    bottom: 4px;
+    right: 14px;
+    background-color: color-mix(in srgb, var(--sd-bg) 62%, transparent 38%);
+    color: var(--sd-text);
+    font-size: 12px;
+    .ui-input__count-inner {
+      line-height: initial;
+      display: inline-block;
+    }
+  }
+  @include when(disabled) {
+    .ui-textarea__inner {
+      background-color: var(--md-bg);
+      border-color: var(--primary-line);
+      color: var(--sd-text);
+      cursor: not-allowed;
+      &::placeholder {
+        color: var(--td-text);
+      }
+    }
+  }
+  @include when(exceed) {
+    .ui-textarea__inner {
+      border-color: $--color-danger;
+    }
+    .ui-input__count {
+      color: $--color-danger;
+    }
+  }
+}
+@include b(input) {
+  position: relative;
+  font-size: $--font-size-base;
+  display: inline-block;
+  width: 100%;
+  & .ui-input__clear {
+    color: var(--sd-text);
+    font-size: $--spacing-base;
+    cursor: pointer;
+    &:hover {
+      color: var(--td-text);
+    }
+  }
+  .ui-input__count {
+    border-radius: 4px;
+    padding: 0 3px;
+    position: absolute;
+    bottom: calc(50% - 0.5em - 3px);
+    right: 4px;
+    background-color: color-mix(in srgb, var(--sd-bg) 62%, transparent 38%);
+    color: var(--sd-text);
+    font-size: 1em;
+    .ui-input__count-inner {
+      line-height: initial;
+      display: inline-block;
+    }
+  }
+  @include e(inner) {
+    -webkit-appearance: none;
+    background-color: $--background-color-base;
+    background-image: none;
+    border-radius: $--border-radius-base;
+    border: 1px solid $--border-color-base;
+    box-sizing: border-box;
+    color: $--color-text-primary;
+    display: inline-block;
+    font-size: inherit;
+    height: $--input-height;
+    line-height: $--input-height;
+    outline: none;
+    padding: 0 12px;
+    width: 100%;
+    &::-ms-reveal {
+      display: none;
+    }
+    &:hover {
+      border-color: var(--blue-4);
+    }
+    &:focus {
+      outline: none;
+      border-color: var(--blue-4);
+    }
+    &::-webkit-input-placeholder { 
+      color: var(--td-text);
+    }
+  }
+  @include e(prefix) {
+    position: absolute;
+    height: 100%;
+    left: 5px;
+    top: 0;
+    text-align: center;
+    color: var(--sd-text);
+    transition: all .3s;
+    display: flex;
+    align-items: center;
+  }
+  @include e(suffix) {
+    position: absolute;
+    height: 100%;
+    right: 5px;
+    top: 0;
+    text-align: center;
+    color: var(--sd-text);
+    transition: all .3s;
+    pointer-events: none;
+    display: flex;
+    align-items: center;
+    .ui-input__icon {
+      &.ui-icon-circle-close {
+        cursor: pointer;
+      }
+      &.ui-icon-view {
+        cursor: pointer;
+      }
+      &.ui-icon-more {
+        cursor: pointer;
+      }
+    }
+  }
+  @include e(suffix-inner) {
+    pointer-events: all;
+  }
+  @include e(icon) {
+    height: 100%;
+    width: 25px;
+    text-align: center;
+    transition: all .3s;
+    line-height: $--input-height;
+    &:after {
+      content: '';
+      height: 100%;
+      width: 0;
+      display: inline-block;
+      vertical-align: middle;
+    }
+  }
+  @include e(validateIcon) {
+    pointer-events: none;
+  }
+  @include m(prefix) {
+    .ui-input__inner {
+      padding-left: 30px;
+    }
+  }
+  @include m(suffix) {
+    .ui-input__inner {
+      padding-right: 30px;
+    }
+  }
+  @include when(active) {
+    .ui-input__inner {
+      outline: none;
+      border-color: var(--blue-4);
+    }
+  }
+  @include when(disabled) {
+    .ui-input__inner {
+      background-color: var(--md-bg);
+      border-color: var(--primary-line);
+      color: var(--sd-text);
+      cursor: not-allowed;
+      &::placeholder {
+        color: var(--td-text);
+      }
+    }
+    .ui-input__icon {
+      cursor: not-allowed;
+    }
+  }
+  @include when(exceed) {
+    .ui-input__inner {
+      border-color: $--color-danger;
+    }
+    .ui-input__suffix {
+      .ui-input__count {
+        color: $--color-danger;
+      }
+    }
+  }
+  @include m(medium) {
+    font-size: $--spacing-base;
+    height: $--input-height-medium;
+    .ui-input__inner {
+      height: $--input-height-medium;
+      line-height: $--input-height-medium;
+    }
+    .ui-input__icon {
+      line-height: $--input-height-medium;
+    }
+    .ui-input__count {
+      right: 3px;
+    }
+  }
+  @include m(small) {
+    font-size: $--font-size-small;
+    height: $--input-height-small;
+    .ui-input__inner {
+      height: $--input-height-small;
+      line-height: $--input-height-small;
+    }
+    .ui-input__icon {
+      line-height: $--input-height-small;
+    }
+    .ui-input__count {
+      right: 3px;
+    }
+  }
+  @include m(mini) {
+    font-size: $--font-size-mini;
+    height: $--input-height-mini;
+    .ui-input__inner {
+      height: $--input-height-mini;
+      line-height: $--input-height-mini;
+    }
+    .ui-input__icon {
+      line-height: $--input-height-mini;
+    }
+    .ui-input__count {
+      bottom: calc(50% - 0.5em);
+      right: 2px;
+    }
+  }
+}
+@include b(input-group) {
+  line-height: normal;
+  width: 100%;
+  border-collapse: separate;
+  border-spacing:0;
+  display: flex;
+  align-items: center;
+  > .ui-input__inner {
+    vertical-align: middle;
+    display: table-cell;
+  }
+  .ui-input-group__prepend, .ui-input-group__append {
+    width: max-content;
+    padding: 0 12px;
+    position: relative;
+    border: 1px solid $--border-color-base;
+    border-radius: $--border-radius-base;
+    white-space: nowrap;
+    color: var(--td-text);
+    background-color: var(--md-bg);
+    display: flex;
+    align-items: center;
+    vertical-align: middle;
+    &:focus {
+      outline: none;
+    }
+    &:has(> div) {
+      padding: 0;
+    }
+    .ui-select,
+    .ui-button {
+      display: inline-block;
+      margin: 0;
+    }
+    button.ui-button,
+    div.ui-select .ui-input__inner,
+    div.ui-select:hover .ui-input__inner {
+      border-color: transparent;
+      background-color: transparent;
+      color: inherit;
+      border-top: 0;
+      border-bottom: 0;
+    }
+    .ui-button,
+    .ui-input {
+      font-size: inherit;
+    }
+  }
+  .ui-input-group__prepend {
+    border-right: 0;
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
+  }
+  .ui-input-group__append {
+    border-left: 0;
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+  }
+  @include m(prepend) {
+    .ui-input__inner {
+      border-top-left-radius: 0;
+      border-bottom-left-radius: 0;
+    }
+    .ui-select .ui-input.is-focus .ui-input__inner {
+      border-color: transparent;
+    }
+  }
+  @include m(append) {
+    .ui-input__inner {
+      border-top-right-radius: 0;
+      border-bottom-right-radius: 0;
+    }
+    .ui-select .ui-input.is-focus .ui-input__inner {
+      border-color: transparent;
+    }
+  }
+  .ui-input-group__prepend, .ui-input-group__append {
+    height: $--input-height;
+  }
+  .ui-input--medium {
+    .ui-input-group__prepend, .ui-input-group__append {
+      height: $--input-height-medium;
+    }
+  }
+  .ui-input--small {
+    .ui-input-group__prepend, .ui-input-group__append {
+      height: $--input-height-small;
+    }
+  }
+  .ui-input--mini {
+    .ui-input-group__prepend, .ui-input-group__append {
+      height: $--input-height-mini;
+    }
+  }
+}
+.ui-input__inner::-ms-clear {
+  display: none;
+  width: 0;
+  height: 0;
+}

package/dist/theme-chalk/input-number/index.scss

@@ -0,0 +1,71 @@
+
+@import '../variables.scss';
+@import '../mixins.scss';
+
+@include b(input-number) {
+  position: relative;
+  display: inline-block;
+  width: 180px;
+  line-height: 38px;
+
+  .ui-input {
+    display: block;
+
+    &__inner {
+      -webkit-appearance: none;
+      padding-left: 50px;
+      padding-right: 50px;
+      text-align: center;
+    }
+  }
+
+  @include e((increase, decrease)) {
+    position: absolute;
+    z-index: 1;
+    top: 1px;
+    width: 40px;
+    height: auto;
+    text-align: center;
+    background: $base-bg;
+    color: $sd-text;
+    cursor: pointer;
+    font-size: 13px;
+
+    &:hover {
+      color: $primary-blue;
+
+      &:not(.is-disabled) ~ .ui-input .ui-input__inner:not(.is-disabled) {
+        border-color: $primary-blue;
+      }
+    }
+
+    &.is-disabled {
+      color: $disable-text;
+      cursor: not-allowed;
+    }
+  }
+
+  @include e(increase) {
+    right: 1px;
+    border-radius: 0 4px 4px 0;
+    border-left: 1px solid $primary-line;
+  }
+
+  @include e(decrease) {
+    left: 1px;
+    border-radius: 4px 0 0 4px;
+    border-right: 1px solid $primary-line;
+  }
+
+  @include when(disabled) {
+    @include e((increase, decrease)) {
+      border-color: $primary-line;
+      color: $disable-text;
+
+      &:hover {
+        color: $disable-text;
+        cursor: not-allowed;
+      }
+    }
+  }
+}

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

@@ -0,0 +1,75 @@
+
+@import '../variables.scss';
+@import '../mixins.scss';
+
+@include b(link) {
+  display: inline-flex;
+  align-items: center;
+  text-decoration: none;
+  line-height: 1.5;
+  font-size: 14px;
+  color: $sd-text;
+  cursor: pointer;
+
+  &:hover {
+    color: $primary-blue;
+  }
+
+  &.is-underline {
+    text-decoration: underline;
+  }
+
+  &.is-disabled {
+    cursor: not-allowed;
+    color: $disable-text;
+
+    &:hover {
+      color: $disable-text;
+    }
+  }
+
+  @include e(inner) {
+    margin-left: 4px;
+  }
+
+  // 类型变体
+  &--default {
+    color: $sd-text;
+
+    &:hover {
+      color: $primary-blue;
+    }
+  }
+
+  &--primary {
+    color: $primary-blue;
+
+    &:hover {
+      color: $md-blue;
+    }
+  }
+
+  &--success {
+    color: $success;
+
+    &:hover {
+      color: $green-4;
+    }
+  }
+
+  &--warning {
+    color: $warning;
+
+    &:hover {
+      color: $orange-4;
+    }
+  }
+
+  &--danger {
+    color: $danger;
+
+    &:hover {
+      color: $red-4;
+    }
+  }
+}