vxe-table 3.8.24 → 3.9.0-rc.0

package/styles/components/table-module/custom.scss

@@ -0,0 +1,381 @@
+@import '../../helpers/mixin.scss';
+
+.vxe-table-custom--option {
+  position: relative;
+  display: flex;
+  flex-direction: row;
+  &.active--drag-target {
+    &[drag-pos="top"] {
+      &::after {
+        display: block;
+        top: -2px;
+      }
+    }
+    &[drag-pos="bottom"] {
+      &::after {
+        display: block;
+        bottom: -2px;
+      }
+    }
+  }
+  &:first-child {
+    &[drag-pos="top"] {
+      &::after {
+        top: 0;
+      }
+    }
+  }
+  &:last-child {
+    &[drag-pos="bottom"] {
+      &::after {
+        bottom: 0;
+      }
+    }
+  }
+  &::after {
+    display: none;
+    content: "";
+    position: absolute;
+    left: -1px;
+    width: calc(100% + 1px);
+    height: 3px;
+    background-color: var(--vxe-ui-font-primary-color);
+    z-index: 12;
+  }
+  &:last-child {
+    &::after {
+      width: 100%;
+    }
+  }
+}
+
+.vxe-table-custom-wrapper {
+  display: none;
+  flex-direction: column;
+  position: absolute;
+  text-align: left;
+  background-color: var(--vxe-ui-layout-background-color);
+  z-index: 19;
+  border: 1px solid var(--vxe-ui-table-border-color);
+  border-radius: var(--vxe-ui-border-radius);
+  box-shadow: var(--vxe-ui-base-popup-box-shadow);
+  &.placement--top-left {
+    top: 2px;
+    left: 2px;
+  }
+  &.placement--top-right {
+    top: 2px;
+    right: 2px;
+  }
+  &.placement--bottom-left {
+    bottom: 2px;
+    left: 2px;
+  }
+  &.placement--bottom-right {
+    bottom: 2px;
+    right: 2px;
+  }
+  &.placement--left {
+    left: 2px;
+  }
+  &.placement--right {
+    right: 2px;
+  }
+  &.placement--left,
+  &.placement--right {
+    top: 2px;
+    height: calc(100% - 4px);
+  }
+  &.is--active {
+    display: flex;
+  }
+}
+
+.vxe-table-custom--list-wrapper {
+  display: block;
+  flex-grow: 1;
+  overflow-x: hidden;
+  overflow-y: auto;
+}
+
+.vxe-table-custom--header,
+.vxe-table-custom--body {
+  list-style-type: none;
+  margin: 0;
+  padding: 0;
+  & > li {
+    max-width: 26em;
+    min-width: 17em;
+    padding: 0.2em 1em 0.2em 1em;
+    @for $i from 2 through 8 {
+      $interval: $i - 1 + 0.2;
+      &.level--#{$i}{
+        padding-left: #{$interval + 2.3}em;
+        .vxe-checkbox--icon {
+          left: #{$interval + 0.6}em;
+        }
+      }
+    }
+  }
+}
+
+.vxe-table-custom--header {
+  flex-shrink: 0;
+  padding: 0.28em 0;
+  font-weight: 700;
+  border-bottom: 1px solid var(--vxe-ui-base-popup-border-color);
+  user-select: none;
+}
+
+.vxe-table-custom--body {
+  padding: 0.2em 0;
+  .vxe-table-custom--checkbox-option {
+    &:hover {
+      background-color: var(--vxe-ui-table-row-hover-background-color);
+    }
+  }
+}
+
+.vxe-table-custom--footer {
+  display: flex;
+  flex-direction: row;
+  flex-shrink: 0;
+  border-top: 1px solid var(--vxe-ui-base-popup-border-color);
+  button {
+    flex-grow: 1;
+    height: 2.8em;
+  }
+}
+
+.vxe-table-custom--checkbox-option {
+  @include createCheckboxIcon();
+}
+.vxe-table-custom--checkbox-option,
+.vxe-table-custom--sort-option {
+  padding-right: 0.4em;
+  flex-shrink: 0;
+  user-select: none;
+}
+.vxe-table-custom--sort-option {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+}
+.vxe-table-custom--sort-btn {
+  padding-left: 0.2em;
+  padding-right: 0.4em;
+  &:not(.is--disabled) {
+    cursor: grabbing;
+    &:hover {
+      color: var(--vxe-ui-font-primary-color);
+    }
+  }
+  &.is--disabled {
+    color: var(--vxe-ui-input-disabled-color);
+    cursor: not-allowed;
+  }
+}
+.vxe-table-custom--checkbox-label  {
+  flex-grow: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.vxe-table-custom--fixed-option {
+  flex-shrink: 0;
+  padding-left: 0.5em;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  user-select: none;
+}
+
+.vxe-table-custom-popup--body {
+  overflow: auto;
+  height: 100%;
+  outline: 0;
+}
+
+.vxe-table-custom-popup--table-wrapper {
+  border-bottom: 1px solid var(--vxe-ui-table-border-color);
+  table {
+    width: 100%;
+    border: 0;
+    table-layout: fixed;
+    word-break: break-all;
+    border-spacing: 0;
+    border-collapse: separate;
+    th {
+      position: sticky;
+      top: 0;
+      text-align: left;
+      border-top: 1px solid var(--vxe-ui-table-border-color);
+      border-bottom: 1px solid var(--vxe-ui-table-border-color);
+      border-left: 1px solid var(--vxe-ui-table-border-color);
+      background-color: var(--vxe-ui-table-header-background-color);
+      z-index: 7;
+    }
+    td {
+      border-top: 1px solid var(--vxe-ui-table-border-color);
+      border-left: 1px solid var(--vxe-ui-table-border-color);
+    }
+    tr {
+      &:first-child {
+        td {
+          border-top: 0;
+        }
+      }
+      &:hover {
+        background-color: var(--vxe-ui-table-row-hover-background-color);
+      }
+    }
+    th,
+    td {
+      height: 44px;
+      padding: 0 0.6em;
+      &:last-child {
+        border-right: 1px solid var(--vxe-ui-table-border-color);
+      }
+    }
+  }
+}
+
+.vxe-table-custom-popup--drag-hint {
+  display: none;
+  position: absolute;
+  top: 0;
+  left: 0;
+  padding: 0.6em 1em 0.6em 1.8em;
+  max-width: 300px;
+  border-radius: var(--vxe-ui-border-radius);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  user-select: none;
+  pointer-events: none;
+  background-color: var(--vxe-ui-layout-background-color);
+  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.2);
+  z-index: 33;
+}
+
+.vxe-table-custom-popup--name {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+@for $index from 2 to 10 {
+  $paddingLeft: ($index - 1) * 24px;
+  .vxe-table-custom-popup--row {
+    &.level--#{$index} {
+      .vxe-table-custom-popup--name {
+        padding-left: $paddingLeft;
+      }
+    }
+  }
+}
+
+.vxe-table-custom-popup--column-item {
+  position: relative;
+  &.col--sort,
+  &.col--visible,
+  &.col--resizable,
+  &.col--fixed {
+    text-align: center;
+  }
+  &.col--resizable {
+    & > .vxe-input {
+      width: 100%;
+    }
+  }
+}
+
+.vxe-table-custom-popup--row {
+  &.active--drag-target {
+    &[drag-pos="top"] {
+      .vxe-table-custom-popup--column-item {
+        &::after {
+          display: block;
+          top: -2px;
+        }
+      }
+    }
+    &[drag-pos="bottom"] {
+      .vxe-table-custom-popup--column-item {
+        &::after {
+          display: block;
+          bottom: -2px;
+        }
+      }
+    }
+  }
+  &:first-child {
+    &[drag-pos="top"] {
+      .vxe-table-custom-popup--column-item {
+        &::after {
+          top: 0;
+        }
+      }
+    }
+  }
+  &:last-child {
+    &[drag-pos="bottom"] {
+      .vxe-table-custom-popup--column-item {
+        &::after {
+          bottom: 0;
+        }
+      }
+    }
+  }
+}
+
+.vxe-table-custom-popup--column-item {
+  &::after {
+    display: none;
+    content: "";
+    position: absolute;
+    left: -1px;
+    width: calc(100% + 1px);
+    height: 3px;
+    background-color: var(--vxe-ui-font-primary-color);
+    z-index: 12;
+  }
+  &:last-child {
+    &::after {
+      width: 100%;
+    }
+  }
+}
+
+.vxe-table-custom--list-move {
+  transition: transform 0.35s;
+}
+
+.vxe-table-custom-popup--column-sort-btn {
+  font-size: 1.2em;
+  padding: 0.2em 0.5em;
+  &:not(.is--disabled) {
+    cursor: grab;
+    &:hover {
+      color: var(--vxe-ui-font-primary-color);
+    }
+    &:active {
+      cursor: grabbing;
+    }
+  }
+  &.is--disabled {
+    color: var(--vxe-ui-input-disabled-color);
+    cursor: not-allowed;
+  }
+}
+
+.vxe-table-custom-popup--table-sort-help-title,
+.vxe-table-custom-popup--table-sort-help-icon {
+  vertical-align: middle;
+}
+.vxe-table-custom-popup--table-sort-help-icon {
+  margin-left: 5px;
+  cursor: help;
+}

package/styles/components/table-module/export.scss

@@ -0,0 +1,127 @@
+@import '../../helpers/mixin.scss';
+
+.vxe-export--panel-column > ul {
+  list-style-type: none;
+  overflow: auto;
+  margin: 0;
+  padding: 0;
+  outline: 0;
+  user-select: none;
+  & > li {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    cursor: pointer;
+  }
+}
+
+.vxe-export--panel {
+  & > table {
+    width: 100%;
+    border: 0;
+    table-layout: fixed;
+    tr {
+      td {
+        padding: 0 10px;
+        &:nth-child(1) {
+          text-align: right;
+          width: 30%;
+          font-weight: 700;
+          padding: 8px 10px;
+        }
+        &:nth-child(2) {
+          width: 70%;
+        }
+        & > .vxe-input,
+        & > .vxe-select {
+          width: 80%;
+        }
+        & > .vxe-export--panel-option-row {
+          padding: 0.25em 0;
+        }
+      }
+    }
+  }
+  .vxe-export--panel-column {
+    width: 80%;
+    border: 1px solid var(--vxe-ui-input-border-color);
+    margin: 3px 0;
+    border-radius: var(--vxe-ui-border-radius);
+    user-select: none;
+    & > ul {
+      & > li {
+        padding: 0.2em 1em 0.2em 1em;
+        @for $i from 2 through 8 {
+          $interval: $i - 1 + 0.2;
+          &.level--#{$i}{
+            padding-left: #{$interval + 2.3}em;
+            .vxe-checkbox--icon {
+              left: #{$interval + 0.6}em;
+            }
+          }
+        }
+      }
+    }
+    .vxe-export--panel-column-header {
+      padding: 0.1em 0;
+      background-color: var(--vxe-ui-table-header-background-color);
+      font-weight: 700;
+      border-bottom: 1px solid var(--vxe-ui-table-border-color);
+    }
+    .vxe-export--panel-column-body {
+      padding: 0.2em 0;
+      min-height: 10em;
+      max-height: 17.6em;
+    }
+  }
+  .vxe-import-selected--file {
+    padding-right: 40px;
+    position: relative;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    user-select: none;
+    & > i {
+      display: none;
+      position: absolute;
+      top: 50%;
+      right: 15px;
+      transform: translateY(-50%);
+      font-size: 16px;
+      cursor: pointer;
+    }
+    &:hover {
+      color: var(--vxe-ui-font-primary-color);
+      & > i {
+        display: block;
+      }
+    }
+  }
+  .vxe-import-select--file {
+    width: 80%;
+    border: 1px dashed var(--vxe-ui-input-border-color);
+    padding: 6px 34px;
+    outline: 0;
+    border-radius: var(--vxe-ui-border-radius);
+    background-color: var(--vxe-ui-layout-background-color);
+    color: inherit;
+    user-select: none;
+    cursor: pointer;
+    &:focus {
+      border-color: var(--vxe-ui-font-primary-color);
+      box-shadow: 0 0 0.25em 0 var(--vxe-ui-font-primary-color);
+    }
+    &:hover {
+      color: var(--vxe-ui-font-primary-color);
+      border-color: var(--vxe-ui-font-primary-color);
+    }
+  }
+  .vxe-export--panel-btns {
+    text-align: right;
+    padding: 0.8em 0.25em 0.25em 0.25em;
+  }
+}
+
+.vxe-export--panel-column-option {
+  @include createCheckboxIcon();
+}

package/styles/components/table-module/filter.scss

@@ -0,0 +1,112 @@
+@import '../../helpers/mixin.scss';
+
+.vxe-cell--filter {
+  padding: 0 0.1em 0 0.2em;
+  text-align: center;
+  vertical-align: middle;
+  display: inline-block;
+  line-height: 0;
+  &.col--filter {
+    .vxe-filter--btn {
+      color: var(--vxe-ui-font-color);
+    }
+  }
+  .vxe-filter--btn {
+    color: var(--vxe-ui-table-column-icon-border-color);
+    cursor: pointer;
+    &:hover {
+      color: var(--vxe-ui-font-color);
+    }
+  }
+}
+.is--filter-active {
+  .vxe-cell--filter {
+    .vxe-filter--btn {
+      color: var(--vxe-ui-font-primary-color);
+    }
+  }
+}
+
+/*筛选容器*/
+.vxe-table--filter-wrapper {
+  display: none;
+  position: absolute;
+  top: 0;
+  min-width: 100px;
+  border-radius: var(--vxe-ui-border-radius);
+  background-color: var(--vxe-ui-layout-background-color);
+  border: 1px solid var(--vxe-ui-base-popup-border-color);
+  box-shadow: 0 1px 6px rgba(0,0,0,.2);
+  z-index: 10;
+  &:not(.is--multiple) {
+    text-align: center;
+  }
+  &.is--active {
+    display: block;
+  }
+  .vxe-table--filter-header,
+  .vxe-table--filter-body {
+    & > li {
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      max-width: 360px;
+      padding: 0.25em 0.8em;
+      cursor: pointer;
+      &.is--checked {
+        color: var(--vxe-ui-font-primary-color);
+      }
+      &:hover {
+        background-color: var(--vxe-ui-table-row-hover-background-color);
+      }
+    }
+  }
+  .vxe-table--filter-header {
+    padding-top: 0.2em;
+  }
+  .vxe-table--filter-body {
+    max-height: 200px;
+    padding-bottom: 0.2em;
+  }
+  & > ul {
+    list-style-type: none;
+    padding: 0;
+    margin: 0;
+    outline: 0;
+    overflow: auto;
+    user-select: none;
+  }
+  &.is--multiple {
+    & > ul {
+      & > li {
+        padding: 0.25em 0.8em 0.25em 1em;
+      }
+    }
+  }
+  .vxe-table--filter-footer {
+    border-top: 1px solid var(--vxe-ui-base-popup-border-color);
+    padding: 0.6em;
+    user-select: none;
+    button {
+      background-color: transparent;
+      padding: 0 0.4em;
+      border: 0;
+      color: var(--vxe-ui-font-color);
+      cursor: pointer;
+      &:focus {
+        outline: none;
+      }
+      &:hover {
+        color: var(--vxe-ui-font-primary-color);
+      }
+      &.is--disabled {
+        color: var(--vxe-ui-font-disabled-color);
+        cursor: not-allowed;
+      }
+    }
+  }
+}
+
+.vxe-table--filter-option {
+  @include createCheckboxIcon();
+}

package/styles/components/table-module/menu.scss

@@ -0,0 +1,86 @@
+.vxe-table--context-menu-wrapper {
+  display: none;
+  &.is--visible {
+    display: block;
+  }
+}
+.vxe-table--context-menu-wrapper,
+.vxe-table--context-menu-clild-wrapper {
+  position: absolute;
+  top: 0;
+  left: 0;
+  font-size: 12px;
+  border: 1px solid var(--vxe-ui-base-popup-border-color);
+  box-shadow: 3px 3px 4px -2px rgba(0,0,0,.6);
+  padding: 0 1px;
+  user-select: none;
+  color: var(--vxe-ui-font-color);
+  font-family: var(--vxe-ui-font-family);
+  background-color: var(--vxe-ui-table-menu-background-color);
+}
+.vxe-context-menu--link {
+  display: flex;
+  flex-direction: row;
+  width: var(--vxe-ui-table-menu-item-width);
+  line-height: 26px;
+  padding: 0 0.8em;
+  color: var(--vxe-ui-font-color);
+  cursor: pointer;
+  .vxe-context-menu--link-prefix,
+  .vxe-context-menu--link-suffix {
+    min-width: 2em;
+    flex-shrink: 0;
+    text-align: center;
+    padding: 0 0.2em;
+  }
+  .vxe-context-menu--link-content {
+    flex-grow: 1;
+    padding: 0 0.2em;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+}
+.vxe-context-menu--option-wrapper,
+.vxe-table--context-menu-clild-wrapper {
+  margin: 0;
+  padding: 0;
+  list-style-type: none;
+  border-bottom: 1px solid #E8EAED;
+  li {
+    position: relative;
+    margin: 1px 0;
+    border: 1px solid transparent;
+    &:last-child {
+      border: 0;
+    }
+    &.link--active {
+      background-color: #C5C5C5;
+      border-color:#C5C5C5;
+      & > .vxe-context-menu--link {
+        color: #2B2B2B;
+      }
+    }
+    &.link--disabled {
+      & > .vxe-context-menu--link {
+        color: var(--vxe-ui-font-disabled-color);
+        cursor: no-drop;
+      }
+      &.link--active {
+        border-color:#C0C1C2;
+        background-color: #EEEEEE;
+        &:hover {
+          background-color: inherit;
+        }
+      }
+    }
+  }
+}
+.vxe-table--context-menu-clild-wrapper {
+  display: none;
+  top: 0;
+  left: 100%;
+  &.is--show {
+    display: block;
+  }
+}