@jiaozhiye/qm-design-react 1.0.0-beta.1

package/lib/table/style/body.less

@@ -0,0 +1,42 @@
+/*
+ * @Author: 焦质晔
+ * @Date: 2020-02-28 22:13:54
+ * @Last Modified by: 焦质晔
+ * @Last Modified time: 2022-01-02 10:44:42
+ */
+.body--column {
+  .cell--edit {
+    &.is-error {
+      position: relative;
+      display: flex;
+      align-items: center;
+      .ant-input {
+        border-color: @v-danger-color;
+        &:focus {
+          box-shadow: 0 0 0 2px @--error-color-outline;
+        }
+      }
+      .ant-input-search + .cell-error {
+        right: 40px;
+      }
+      .cell-error {
+        position: absolute;
+        font-size: @v-font-size-small;
+        color: @v-danger-color;
+        right: @v-module-distance;
+        pointer-events: none;
+        z-index: 2;
+      }
+    }
+  }
+  &.col--center {
+    .cell--edit .ant-input {
+      text-align: center;
+    }
+  }
+  &.col--right {
+    .cell--edit .ant-input {
+      text-align: right;
+    }
+  }
+}

package/lib/table/style/column-filter.less

@@ -0,0 +1,88 @@
+/*
+ * @Author: 焦质晔
+ * @Date: 2020-02-28 22:13:50
+ * @Last Modified by: 焦质晔
+ * @Last Modified time: 2021-12-31 21:50:43
+ */
+@prefix-table: ~'@{qm-prefix}-table';
+
+.@{prefix-table}-column-filter {
+  display: inline-block;
+  padding: 5px 0 5px 3px;
+  line-height: 1;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  .icon {
+    font-size: 1.05em;
+    margin-right: 2px;
+  }
+  &:hover,
+  &.selected {
+    color: @v-primary-color;
+  }
+}
+
+.column-filter__popper {
+  padding: 0 !important;
+  .column-filter--wrap {
+    padding: @v-module-distance;
+    min-width: 150px;
+    max-width: 200px;
+    overflow-y: auto;
+    .box-sizing-content();
+    li.item {
+      position: relative;
+      line-height: 1.75;
+      .text-overflow-cut();
+      .handle {
+        padding: 2px;
+        color: @v-font-secondary-color;
+        cursor: s-resize;
+        transform: scale(0.9);
+      }
+      .fixed {
+        position: absolute;
+        right: 0;
+        i {
+          color: @--icon-color;
+          cursor: pointer;
+        }
+      }
+    }
+    .reset {
+      text-align: right;
+      .ant-btn-text {
+        padding: 0;
+      }
+    }
+    .left {
+      ul {
+        margin: 0;
+        li {
+          padding-right: 15px;
+        }
+      }
+    }
+    .main {
+      ul {
+        margin: 0;
+        li {
+          padding-right: 30px;
+        }
+      }
+    }
+    .right {
+      ul {
+        margin: 0;
+        li {
+          padding-right: 15px;
+        }
+      }
+    }
+    .divider {
+      height: 0;
+      border-top: 1px solid @v-table-resizable-color;
+      margin: 4px 0;
+    }
+  }
+}

package/lib/table/style/empty.less

@@ -0,0 +1,16 @@
+/*
+ * @Author: 焦质晔
+ * @Date: 2020-05-19 19:18:15
+ * @Last Modified by: 焦质晔
+ * @Last Modified time: 2021-09-12 22:09:00
+ */
+@prefix-table: ~'@{qm-prefix}-table';
+
+.@{prefix-table}--empty {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  position: absolute;
+  width: 100%;
+  pointer-events: none;
+}

package/lib/table/style/expandable.less

@@ -0,0 +1,55 @@
+/*
+ * @Author: 焦质晔
+ * @Date: 2020-03-30 16:36:41
+ * @Last Modified by: 焦质晔
+ * @Last Modified time: 2021-12-28 19:56:04
+ */
+@prefix-expand: ~'@{qm-prefix}-expand';
+
+.@{prefix-expand}--icon {
+  position: relative;
+  display: inline-flex;
+  margin-right: 5px;
+  width: 17px;
+  height: 17px;
+  color: @v-font-secondary-color;
+  vertical-align: -4px;
+  background: #fff;
+  border: 1px solid #d9d9d9;
+  border-radius: @v-border-radius;
+  outline: none;
+  user-select: none;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  .box-sizing-content();
+  &:hover {
+    color: @v-primary-color;
+    border-color: @v-primary-color;
+  }
+  &::before,
+  &::after {
+    position: absolute;
+    background: currentColor;
+    transition: transform 0.3s ease-out;
+    content: '';
+  }
+  &::before {
+    top: 7px;
+    right: 3px;
+    left: 3px;
+    height: 1px;
+  }
+  &::after {
+    top: 3px;
+    bottom: 3px;
+    left: 7px;
+    width: 1px;
+    transform: rotate(90deg);
+  }
+  &.collapsed::before {
+    transform: rotate(-180deg);
+  }
+  &.collapsed::after {
+    transform: rotate(0deg);
+  }
+}

package/lib/table/style/export.less

@@ -0,0 +1,30 @@
+/*
+ * @Author: 焦质晔
+ * @Date: 2020-03-26 11:26:46
+ * @Last Modified by: 焦质晔
+ * @Last Modified time: 2022-01-09 11:58:00
+ */
+@prefix-table: ~'@{qm-prefix}-table';
+
+.@{prefix-table}-export {
+  display: inline-block;
+  padding: 5px 3px;
+  line-height: 1;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  .icon {
+    font-size: 1.05em;
+  }
+  &:not(.disabled):hover {
+    color: @v-primary-color;
+  }
+  &.disabled {
+    color: @v-font-disabled-color;
+    cursor: not-allowed;
+  }
+  &__setting {
+    .qm-form--mini .qm-table-column-filter {
+      font-size: @v-font-size-small;
+    }
+  }
+}

package/lib/table/style/footer.less

@@ -0,0 +1,28 @@
+/*
+ * @Author: 焦质晔
+ * @Date: 2020-02-28 22:13:07
+ * @Last Modified by: 焦质晔
+ * @Last Modified time: 2021-05-21 13:56:03
+ */
+@prefix-table: ~'@{qm-prefix}-table';
+
+.@{prefix-table}--footer-wrapper {
+  background-color: @v-table-footer-background-color;
+  &::before {
+    content: '';
+    position: absolute;
+    left: 0;
+    right: 0;
+    height: 0;
+    z-index: 3;
+    border-top: 1px solid @v-table-border-color;
+  }
+  .@{prefix-table}--footer {
+    .gutter {
+      background-color: @v-table-footer-background-color;
+    }
+    .cell {
+      font-weight: 700;
+    }
+  }
+}

package/lib/table/style/full-screen.less

@@ -0,0 +1,21 @@
+/*
+ * @Author: 焦质晔
+ * @Date: 2020-03-26 11:45:02
+ * @Last Modified by: 焦质晔
+ * @Last Modified time: 2021-12-30 16:06:55
+ */
+@prefix-table: ~'@{qm-prefix}-table';
+
+.@{prefix-table}-full-screen {
+  display: inline-block;
+  padding: 5px 3px;
+  line-height: 1;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  .icon {
+    font-size: 1.05em;
+  }
+  &:hover {
+    color: @v-primary-color;
+  }
+}

package/lib/table/style/group-summary.less

@@ -0,0 +1,93 @@
+/*
+ * @Author: 焦质晔
+ * @Date: 2020-03-26 11:45:02
+ * @Last Modified by: 焦质晔
+ * @Last Modified time: 2022-01-09 16:30:50
+ */
+@prefix-table: ~'@{qm-prefix}-table';
+
+.@{prefix-table}-group-summary {
+  display: inline-block;
+  padding: 5px 3px;
+  line-height: 1;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  .icon {
+    font-size: 1.05em;
+  }
+  &:hover {
+    color: @v-primary-color;
+  }
+}
+
+.@{prefix-table}-group-summary__setting {
+  .main {
+    display: flex;
+    flex-direction: row;
+    height: 100%;
+    margin-bottom: @v-module-distance;
+    .container {
+      flex: 1;
+      width: 0;
+    }
+    .saved {
+      width: 200px;
+      .form-wrap {
+        display: flex;
+      }
+      .card-wrap {
+        margin-top: @v-module-distance;
+        border: 1px solid @v-table-border-color;
+        > h5 {
+          display: flex;
+          align-items: center;
+          font-size: inherit;
+          font-weight: normal;
+          margin-bottom: 0;
+          padding: 0 @v-module-distance;
+          border-bottom: 1px solid @v-table-border-color;
+          background-color: @v-table-header-background-color;
+        }
+        > ul {
+          margin-bottom: 0;
+          li {
+            display: flex;
+            align-items: center;
+            position: relative;
+            padding: 8px @v-module-distance;
+            border-bottom: 1px solid @v-table-border-color;
+            cursor: pointer;
+            transition: all 0.3s ease;
+            &:last-of-type {
+              border-bottom: 0;
+            }
+            &:hover {
+              background-color: @v-table-row-hover-background-color;
+              .close {
+                visibility: visible;
+              }
+            }
+            &.selected {
+              background-color: @v-table-row-selected-background-color;
+            }
+            .title {
+              i {
+                margin-right: 5px;
+              }
+            }
+            .close {
+              position: absolute;
+              right: @v-module-distance;
+              visibility: hidden;
+            }
+          }
+        }
+      }
+    }
+    .line {
+      border-left: 1px dashed @--border-color-base;
+      padding-left: @v-module-distance;
+      margin-left: @v-module-distance;
+    }
+  }
+}

package/lib/table/style/header.less

@@ -0,0 +1,178 @@
+/*
+ * @Author: 焦质晔
+ * @Date: 2020-02-28 22:11:53
+ * @Last Modified by: 焦质晔
+ * @Last Modified time: 2021-12-28 18:50:31
+ */
+@prefix-table: ~'@{qm-prefix}-table';
+
+.TheadAlignCenter {
+  .cell--text {
+    justify-content: center !important;
+  }
+}
+
+.TheadAlignRight {
+  .cell--text {
+    justify-content: flex-end !important;
+  }
+}
+
+.@{prefix-table}--header-wrapper {
+  background-color: @v-table-header-background-color;
+  .@{prefix-table}--header {
+    tr > th[colspan]:not([colspan='1']) {
+      .TheadAlignCenter();
+    }
+  }
+  .gutter {
+    background-color: @v-table-header-background-color;
+  }
+}
+
+.header--column {
+  .cell--wrapper {
+    display: flex;
+    height: 100%;
+    .cell--text {
+      display: flex;
+      align-items: center;
+      justify-content: flex-start;
+      flex: 1;
+      /* 重要 */
+      width: 0;
+      .cell {
+        padding-right: 2px;
+      }
+      .tip {
+        padding: 2px;
+        cursor: default;
+      }
+    }
+  }
+  &.col--center {
+    .TheadAlignCenter();
+  }
+  &.col--right {
+    .TheadAlignRight();
+  }
+  &:not(.column-has-sorter):not(.column-has-filter) {
+    .cell--text {
+      .cell {
+        padding-right: @v-module-distance;
+      }
+      .tip {
+        margin-left: -8px;
+      }
+    }
+  }
+  &.column--required {
+    .cell {
+      &::before {
+        content: '*';
+        color: @v-danger-color;
+        margin-right: 2px;
+      }
+    }
+  }
+
+  /* 全选 */
+  .cell--selection {
+    display: flex;
+    align-items: center;
+    .icon {
+      padding: 2px;
+      margin-left: 2px;
+      margin-top: 1px;
+      font-size: @v-font-size;
+      color: @v-icon-color;
+      cursor: pointer;
+    }
+  }
+
+  /* 排序 */
+  .cell--sorter {
+    width: 1em;
+    flex-shrink: 0;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    cursor: pointer;
+    transform: scale(0.8, 0.85);
+    &__asc,
+    &__desc {
+      color: @v-icon-color;
+      &.actived {
+        color: @v-primary-color;
+      }
+    }
+    &__asc {
+      transform: translateY(2px);
+    }
+    &__desc {
+      transform: translateY(-2px);
+    }
+  }
+
+  /* 筛选 */
+  .cell--filter {
+    width: 20px;
+    flex-shrink: 0;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100%;
+    color: @v-icon-color;
+    transition: all 0.3s ease;
+    cursor: pointer;
+    .icon {
+      transform: scale(0.9, 1);
+    }
+    &:hover,
+    &.selected {
+      color: @v-font-secondary-color;
+      background-color: @v-table-column-filter-hover-color;
+    }
+    &.actived {
+      color: @v-primary-color;
+    }
+  }
+
+  .resizable {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    right: -5px;
+    width: 10px;
+    z-index: 1;
+    cursor: col-resize;
+    &.is--line {
+      &:before {
+        content: '';
+        position: absolute;
+        left: 50%;
+        top: 20%;
+        width: 1px;
+        height: 60%;
+        background-color: @v-table-resizable-color;
+      }
+    }
+  }
+}
+
+.head-filter--wrap {
+  ul {
+    margin: 0;
+    li {
+      display: flex;
+      align-items: center;
+      margin-bottom: 5px;
+      &:last-of-type {
+        margin-bottom: 0;
+      }
+      & > span {
+        margin-right: 5px;
+      }
+    }
+  }
+}

package/lib/table/style/index.less

@@ -0,0 +1,25 @@
+/*
+ * @Author: 焦质晔
+ * @Date: 2021-07-23 19:05:57
+ * @Last Modified by: 焦质晔
+ * @Last Modified time: 2022-01-09 14:12:48
+ */
+@import './variable.less';
+@import './toper.less';
+@import './alert.less';
+@import './full-screen.less';
+@import './reload.less';
+@import './print.less';
+@import './export.less';
+@import './select-collection.less';
+@import './group-summary.less';
+@import './super-search.less';
+@import './column-filter.less';
+@import './table.less';
+@import './header.less';
+@import './body.less';
+@import './footer.less';
+@import './pager.less';
+@import './empty.less';
+@import './expandable.less';
+@import './size.less';

package/lib/table/style/pager.less

@@ -0,0 +1,12 @@
+/*
+ * @Author: 焦质晔
+ * @Date: 2020-03-26 11:45:02
+ * @Last Modified by: 焦质晔
+ * @Last Modified time: 2021-09-04 10:17:37
+ */
+@prefix-table: ~'@{qm-prefix}-table';
+
+.@{prefix-table}-pager {
+  margin-top: @v-module-distance;
+  text-align: right;
+}

package/lib/table/style/print.less

@@ -0,0 +1,21 @@
+/*
+ * @Author: 焦质晔
+ * @Date: 2020-03-26 11:45:02
+ * @Last Modified by: 焦质晔
+ * @Last Modified time: 2022-01-09 10:06:27
+ */
+@prefix-table: ~'@{qm-prefix}-table';
+
+.@{prefix-table}-print {
+  display: inline-block;
+  padding: 5px 3px;
+  line-height: 1;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  .icon {
+    font-size: 1.05em;
+  }
+  &:hover {
+    color: @v-primary-color;
+  }
+}

package/lib/table/style/reload.less

@@ -0,0 +1,21 @@
+/*
+ * @Author: 焦质晔
+ * @Date: 2020-03-26 11:45:02
+ * @Last Modified by: 焦质晔
+ * @Last Modified time: 2021-12-31 14:12:41
+ */
+@prefix-table: ~'@{qm-prefix}-table';
+
+.@{prefix-table}-reload {
+  display: inline-block;
+  padding: 5px 3px;
+  line-height: 1;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  .icon {
+    font-size: 1.05em;
+  }
+  &:hover {
+    color: @v-primary-color;
+  }
+}

package/lib/table/style/select-collection.less

@@ -0,0 +1,21 @@
+/*
+ * @Author: 焦质晔
+ * @Date: 2020-03-26 11:45:02
+ * @Last Modified by: 焦质晔
+ * @Last Modified time: 2022-01-06 10:27:07
+ */
+@prefix-table: ~'@{qm-prefix}-table';
+
+.@{prefix-table}-select-collection {
+  display: inline-block;
+  padding: 5px 3px;
+  line-height: 1;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  .icon {
+    font-size: 1.05em;
+  }
+  &:hover {
+    color: @v-primary-color;
+  }
+}