@qxs-bns/components 0.0.46 → 0.0.48

package/theme-chalk/src/common/element-plus.scss

@@ -0,0 +1,606 @@
+@use '../mixins/config' as *;
+// TODO:这里可以重置 element-plus 样式
+$ns: $namespace !default;
+$cs: "cs-in" !default; // 自定义样式对应不同的类型前缀
+
+// 整体结构
+// .customize-input {
+//   // 某种类型
+//   .#{$cs}-inline {
+//     background: red;
+//   }
+//   &:not([class*="#{$cs}"]) {
+//    // 默认样式
+//    &.#{$ns}-input {
+//      width: 160px;
+//      .#{$ns}-input__wrapper {
+//        background-color: var(--#{$ns}-fill-color-lighter);
+//        border-radius: 20px;
+//      }
+//    }
+//  }
+// }
+// #{$ns}-input-number
+.customize-input-number {
+  &.#{$ns}-input-number {
+    width: 98px;
+
+    [class$="#{$ns}-input-number__"] {
+      top: 2px;
+      width: 24px;
+      height: 21px;
+      overflow: hidden;
+      font-weight: 500;
+      line-height: 22px;
+      background-color: #fbfbfb;
+
+      i {
+        padding-top: 1px;
+        font-size: 16px;
+        font-weight: 600;
+      }
+
+      &:hover {
+        color: #3d61e3;
+      }
+    }
+
+    .#{$ns}-input__inner {
+      height: 24px;
+      padding-right: 28px;
+      padding-left: 28px;
+      line-height: 24px;
+      border: 1px solid #e1e1e1;
+      border-radius: 3px;
+
+      &::placeholder {
+        color: #5a5a5a;
+      }
+    }
+  }
+}
+
+.customize-date-picker {
+  &:not([class*="#{$cs}"]) {
+    &.#{$ns}-date-editor {
+      background-color: #fbfbfb;
+      .#{$ns}-icon:nth-child(1) {
+        order: 1;
+        margin-left: 4px;
+      }
+    }
+  }
+}
+
+.customize-dialog {
+  &:not([class*="#{$cs}"]) {
+    &.#{$ns}-dialog {
+      padding: 0;
+      .#{$ns}-dialog__header {
+        position: relative;
+        height: 40px;
+        padding: 0 calc(var(--#{$ns}-dialog-padding-primary) - 3px);
+        margin-right: 0;
+        font-weight: 600;
+        border-bottom: var(--#{$ns}-border);
+
+        .#{$ns}-dialog__title {
+          font-size: 14px;
+          line-height: 40px;
+        }
+
+        .#{$ns}-dialog__headerbtn {
+          top: 2px;
+          width: 40px;
+          height: 40px;
+          font-size: 22px;
+        }
+      }
+
+      .#{$ns}-dialog__body {
+        padding: var(--#{$ns}-dialog-padding-primary);
+      }
+
+      .#{$ns}-dialog__footer {
+        padding: var(--#{$ns}-dialog-padding-primary);
+        padding-top: 0;
+        text-align: center;
+        .#{$ns}-button {
+          min-width: 90px;
+        }
+      }
+    }
+  }
+}
+
+.customize-button {
+  &.#{$cs}-info {
+    background-color: #fbfbfb;
+  }
+  &:not([class*="#{$cs}"]) {
+    &.#{$ns}-button {
+      min-width: 90px;
+
+      --#{$ns}-button-size: 28px;
+      --#{$ns}-border-radius-base: 4px;
+    }
+  }
+}
+
+.customize-tree {
+  &.#{$ns}-tree {
+    .qxs-tree-node__content {
+      --#{$ns}-tree-node-content-height: 30px;
+      .#{$ns}-checkbox {
+        --#{$ns}-color-primary: #30c691;
+
+        .#{$ns}-checkbox__inner {
+          width: 14px;
+          height: 14px;
+
+          &::after {
+            width: 3px;
+            height: 7px;
+          }
+        }
+      }
+    }
+  }
+}
+
+.customize-input {
+  &.#{$cs}-line {
+    &.#{$ns}-input {
+      .#{$ns}-input__wrapper {
+        border-radius: 0;
+        box-shadow: 0 1px 0 0 var(--qxs-input-border-color, var(--qxs-border-color));
+
+        &:hover {
+          box-shadow: 0 1px 0 0 var(--qxs-input-hover-border-color);
+        }
+
+        &.is-focus {
+          box-shadow: 0 1px 0 0 var(--qxs-input-focus-border-color);
+        }
+
+        .#{$ns}-input__count {
+          .#{$ns}-input__count-inner {
+            background-color: transparent;
+          }
+        }
+      }
+    }
+  }
+
+  &:not([class*="#{$cs}"]) {
+    &.#{$ns}-input {
+      width: 160px;
+
+      .#{$ns}-input__wrapper {
+        background-color: var(--#{$ns}-fill-color-lighter);
+        border-radius: 20px;
+
+        .#{$ns}-input__count {
+          .#{$ns}-input__count-inner {
+            background-color: transparent;
+          }
+        }
+      }
+    }
+  }
+}
+
+.customize-message-box {
+  &.#{$ns}-message-box {
+    --#{$ns}-messagebox-border-radius: 0px;
+
+    padding: 0;
+
+    .#{$ns}-message-box__header {
+      padding: 0;
+
+      .#{$ns}-message-box__title {
+        height: 36px;
+        padding-left: 12px;
+        font-size: 14px;
+        font-weight: 600;
+        line-height: 36px;
+        border-bottom: 1px solid var(--#{$ns}-color-info-light-9);
+      }
+    }
+    .#{$ns}-message-box__content {
+      padding: 35px 10px 23px;
+      .#{$ns}-message-box__container {
+        justify-content: center;
+      }
+    }
+    .#{$ns}-message-box__btns {
+      justify-content: center;
+      padding-bottom: 20px;
+
+      .#{$ns}-button {
+        min-width: 90px;
+      }
+    }
+  }
+}
+
+.customize-tooltip {
+  &.#{$ns}-popper {
+    &.is-light {
+      padding: 5px 10px;
+      font-size: 14px;
+      font-weight: bold;
+      border: none;
+      box-shadow: 0 1px 8px 0 rgb(0 0 0 / 20%);
+
+      .#{$ns}-popper__arrow {
+        &::before {
+          width: 8px;
+          height: 8px;
+          border-color: transparent !important;
+        }
+      }
+    }
+  }
+}
+
+.customize-dropdown {
+  &.#{$cs}-noarrow {
+    &.#{$ns}-dropdown__popper {
+      .#{$ns}-popper__arrow {
+        display: none;
+      }
+    }
+  }
+}
+
+// el-table + el-pagination
+.customize-table {
+  &.#{$ns}-table {
+    border: 1px solid var(--#{$ns}-color-info-light-9) !important;
+    border-bottom: none !important;
+    border-radius: var(--#{$ns}-border-radius-base);
+
+    thead {
+      th {
+        padding: 10px 0;
+        background-color: var(--#{$ns}-color-info-light-9);
+        &.#{$ns}-table-fixed-column--left,
+        &.#{$ns}-table-fixed-column--right {
+          background-color: var(--qxs-color-info-light-9);
+        }
+      }
+    }
+    .#{$ns}-scrollbar__view {
+      .qxs-table__empty-block {
+        width: calc(100% - 2px) !important;
+      }
+
+      .#{$ns}-table__body {
+        tbody {
+          width: calc(100% - 2px);
+          .#{$ns}-table__row {
+            .#{$ns}-table__cell {
+              .cell {
+                &:empty::before {
+                  content: "——";
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+
+    & + .customize-pagination {
+      margin-top: 20px;
+    }
+  }
+}
+// select
+.customize-select {
+  &.cs-in-line {
+    &.#{$ns}-select {
+      .#{$ns}-select__wrapper {
+        border-radius: 0;
+        box-shadow: 0 1px 0 0 var(--#{$ns}-border-color);
+
+        &.is-hovering:not(.is-focused) {
+          box-shadow: 0 1px 0 0 var(--#{$ns}-border-color-hover);
+        }
+
+        &.is-focused {
+          box-shadow: 0 1px 0 0 var(--#{$ns}-color-primary);
+        }
+      }
+    }
+  }
+  &:not([class*="#{$cs}"]) {
+    &.#{$ns}-select {
+      .#{$ns}-select__wrapper {
+        padding: 0 10px;
+        padding-right: 10px;
+        color: #5a5a5a;
+        background: #fbfbfb;
+
+        .#{$ns}-select__selection {
+          &::placeholder {
+            color: #5a5a5a;
+          }
+        }
+
+        .#{$ns}-input__suffix {
+          right: 0;
+
+          .#{$ns}-icon-arrow-up {
+            &::before {
+              position: absolute;
+              top: 50%;
+              left: 50%;
+              content: "";
+              border-top: 5px solid transparent;
+              border-right: 4px solid transparent;
+              border-bottom: 5px solid #a3a3a3;
+              border-left: 4px solid transparent;
+              transform: translate3d(-50%, -75%, 0);
+              transform-origin: -25% center;
+            }
+          }
+        }
+      }
+    }
+  }
+}
+
+.customize-pagination {
+  &.#{$ns}-pagination {
+    color: #5a5a5a;
+
+    .#{$ns}-pagination__sizes {
+      .#{$ns}-select {
+        width: 95px !important;
+      }
+    }
+
+    .btn-prev,
+    .btn-next {
+      background-color: transparent !important;
+      border: 1px solid #e1e1e1;
+      border-radius: var(--#{$ns}-border-radius-base);
+    }
+
+    .#{$ns}-pager {
+      > .number,
+      .more {
+        color: #5a5a5a;
+        background-color: transparent;
+        border: 1px solid #e1e1e1;
+        border-radius: var(--#{$ns}-border-radius-base);
+
+        &.active {
+          border-color: #3d61e3;
+        }
+      }
+
+      li:not(.disabled):hover {
+        border-color: var(--#{$ns}-color-primary);
+      }
+
+      .is-active {
+        border: 1px solid var(--#{$ns}-color-primary);
+      }
+    }
+
+    .#{$ns}-pagination__jump {
+      .#{$ns}-pagination__goto {
+        margin-right: 5px;
+        font-size: 0;
+
+        &::after {
+          font-size: 14px;
+          content: "跳转至";
+        }
+      }
+
+      .#{$ns}-pagination__classifier {
+        margin-left: 5px;
+      }
+
+      .#{$ns}-pagination__editor {
+        width: 40px;
+      }
+    }
+  }
+}
+
+.customize-form {
+  &[class*="#{$cs}"] {
+    &.#{$cs} {
+      &-bold-title {
+        .title-input {
+          .#{$ns}-input__inner {
+            font-weight: 600;
+            color: #0f0f0f;
+          }
+          .#{$ns}-textarea__inner {
+            color: #0f0f0f;
+          }
+        }
+      }
+    }
+  }
+  &.#{$ns}-form {
+    &.#{$ns}-form--inline .#{$ns}-form-item {
+      margin-right: 10px;
+    }
+  }
+}
+
+.customize-tabs {
+  &.#{$ns}-tabs {
+    .#{$ns}-tabs__header {
+      .#{$ns}-tabs__nav-wrap {
+        &::after {
+          height: 1px;
+        }
+      }
+    }
+    .#{$ns}-tabs__item {
+      --#{$ns}-tabs-header-height: 36px;
+
+      font-size: 14px;
+      color: #7784a1;
+
+      &.is-active {
+        font-weight: bold;
+        color: #272e40;
+      }
+    }
+    .#{$ns}-tabs__active-bar {
+      height: 3px;
+    }
+  }
+}
+
+// TODO: 自定义组件样式
+// 如果page-main下有 el-tabs 是
+.customize-page-main {
+  padding-top: 0 !important;
+
+  .#{$ns}-tabs {
+    position: sticky;
+    top: 0;
+    z-index: 10;
+
+    .#{$ns}-tabs__header {
+      position: relative;
+      margin: 0;
+
+      .#{$ns}-tabs__nav-wrap {
+        overflow: inherit;
+
+        .#{$ns}-tabs__nav {
+          .#{$ns}-tabs__item {
+            box-sizing: content-box;
+            min-width: 48px;
+            height: 40px;
+            padding: 0 16px;
+            line-height: 40px;
+            text-align: center;
+
+            &:nth-child(2) {
+              padding-left: 8px;
+            }
+          }
+        }
+
+        &::after {
+          display: none;
+        }
+      }
+
+      $g-main-wrap-padding: 10px;
+
+      &::after {
+        position: absolute;
+        bottom: 0;
+        left: -$g-main-wrap-padding;
+        z-index: 1;
+        width: calc(100% + 2 * #{$g-main-wrap-padding});
+        height: 1px;
+        content: "";
+        background-color: #e4e7ed;
+      }
+    }
+
+    .#{$ns}-tabs__content {
+      padding-right: 2px;
+      padding-left: 5px;
+      margin-top: 11px;
+    }
+  }
+}
+
+// search-wrap
+.customize-search-form.#{$ns}-form--inline {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: flex-start;
+  padding: 10px 10px 0;
+  margin: 10px 0;
+  background-color: #f5f5f5;
+
+  .#{$ns}-form-item {
+    display: inline-flex;
+    flex: 0 1 auto;
+    margin-bottom: 10px !important;
+
+    &.last-box {
+      margin-right: 0;
+      margin-left: auto;
+    }
+  }
+
+  .new-line-placeholder {
+    margin-right: 100%;
+  }
+}
+
+.customize-driver {
+  box-shadow: unset;
+
+  .driver-popover-arrow {
+    &::before {
+      position: absolute;
+      content: "";
+      background-color: #fff;
+    }
+
+    &.driver-popover-arrow-side-left {
+      &::before {
+        left: -3px;
+        width: var(--popover-offset);
+        height: 1px;
+        transform: translateY(-50%);
+      }
+    }
+
+    &.driver-popover-arrow-side-right {
+      &::before {
+        right: -3px;
+        width: var(--popover-offset);
+        height: 1px;
+        transform: translateY(-50%);
+      }
+    }
+
+    &.driver-popover-arrow-side-top {
+      &::before {
+        top: -1px;
+        width: 1px;
+        height: var(--popover-offset);
+        transform: translateX(-50%);
+      }
+    }
+
+    &.driver-popover-arrow-side-bottom {
+      &::before {
+        bottom: -1px;
+        width: 1px;
+        height: var(--popover-offset);
+        transform: translateX(-50%);
+      }
+    }
+  }
+
+  .driver-popover-footer {
+    .driver-popover-navigation-btns {
+      button {
+        color: var(--#{$ns}-color-primary);
+        background-color: transparent;
+        border: none;
+      }
+    }
+  }
+}

package/theme-chalk/src/data-chart/empty.css

@@ -0,0 +1 @@
+.qxs-data-chart__empty{display:flex;align-items:center;justify-content:center;height:100%}.qxs-data-chart__empty-content{display:flex;flex-direction:column;align-items:center;pointer-events:none}.qxs-data-chart__empty-description{margin-top:8px;font-size:14px;line-height:1.4;color:var(--qxs-text-color-secondary, #909399)}

package/theme-chalk/src/data-chart/empty.scss

@@ -0,0 +1,24 @@
+@use "../mixins/mixins" as *;
+
+@include b(data-chart) {
+  @include e(empty) {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 100%;
+
+    &-content {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      pointer-events: none;
+    }
+
+    &-description {
+      margin-top: 8px;
+      font-size: 14px;
+      line-height: 1.4;
+      color: var(--#{$namespace}-text-color-secondary, #909399);
+    }
+  }
+}

package/theme-chalk/src/data-chart/index.css

@@ -0,0 +1 @@
+.qxs-data-chart__data-chart-table{box-sizing:border-box;display:flex;flex-direction:column}.qxs-data-chart__data-chart-table .title{display:flex;align-items:center;justify-content:space-between;padding:0 5px;margin-top:2px;margin-bottom:7px;font-family:sans-serif;font-size:14px;font-weight:bolder;color:#464646}.qxs-data-chart__data-chart-table :deep(.qxs-table){position:relative;display:flex;flex:1;flex-direction:column;overflow:hidden;background-color:rgba(0,0,0,0);border-top-left-radius:4px;border-top-right-radius:4px}.qxs-data-chart__data-chart-table :deep(.qxs-table) .qxs-table__body-wrapper .qxs-table__cell{border-right:0}.qxs-data-chart__empty{display:flex;align-items:center;justify-content:center;height:100%}.qxs-data-chart__empty-content{display:flex;flex-direction:column;align-items:center;pointer-events:none}.qxs-data-chart__empty-description{margin-top:8px;font-size:14px;line-height:1.4;color:var(--qxs-text-color-secondary, #909399)}.qxs-data-chart__wrapper{height:100%}

package/theme-chalk/src/data-chart/index.scss

@@ -0,0 +1,9 @@
+@use "../mixins/mixins" as *;
+@forward "./table";
+@forward "./empty";
+
+@include b(data-chart) {
+  @include e(wrapper) {
+    height: 100%;
+  }
+}

package/theme-chalk/src/data-chart/table.css

@@ -0,0 +1 @@
+.qxs-data-chart__data-chart-table{box-sizing:border-box;display:flex;flex-direction:column}.qxs-data-chart__data-chart-table .title{display:flex;align-items:center;justify-content:space-between;padding:0 5px;margin-top:2px;margin-bottom:7px;font-family:sans-serif;font-size:14px;font-weight:bolder;color:#464646}.qxs-data-chart__data-chart-table :deep(.qxs-table){position:relative;display:flex;flex:1;flex-direction:column;overflow:hidden;background-color:rgba(0,0,0,0);border-top-left-radius:4px;border-top-right-radius:4px}.qxs-data-chart__data-chart-table :deep(.qxs-table) .qxs-table__body-wrapper .qxs-table__cell{border-right:0}

package/theme-chalk/src/data-chart/table.scss

@@ -0,0 +1,39 @@
+@use "../mixins/mixins" as *;
+
+@include b(data-chart) {
+  @include e(data-chart-table) {
+    box-sizing: border-box;
+    display: flex;
+    flex-direction: column;
+
+    .title {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      padding: 0 5px;
+      margin-top: 2px;
+      margin-bottom: 7px;
+      font-family: sans-serif;
+      font-size: 14px;
+      font-weight: bolder;
+      color: #464646;
+    }
+
+    :deep(.#{$namespace}-table) {
+      position: relative;
+      display: flex;
+      flex: 1;
+      flex-direction: column;
+      overflow: hidden;
+      background-color: transparent;
+      border-top-left-radius: 4px;
+      border-top-right-radius: 4px;
+
+      .#{$namespace}-table__body-wrapper {
+        .#{$namespace}-table__cell {
+          border-right: 0;
+        }
+      }
+    }
+  }
+}

package/theme-chalk/src/file-upload.css

@@ -0,0 +1 @@
+.qxs-file-upload__control .is-drag{display:inline-block !important}.qxs-file-upload__control .is-drag [class$=-upload-dragger]{padding:0}.qxs-file-upload__control .is-drag [class$=-upload-dragger] [class$=-icon--upload]{margin-bottom:0;font-size:40px}.qxs-file-upload__control .is-drag [class$=-upload-dragger] [class$=-upload__text]{padding:0 6px;font-size:14px;line-height:1.5}.qxs-file-upload__control .is-drag.is-dragover{border-width:1px}.qxs-file-upload__control .is-drag .slot{width:160px;height:90px}