vxe-pc-ui 4.15.11 → 4.15.13

package/styles/components/list.scss

@@ -1,3 +1,5 @@
+@use '../helpers/baseMixin.scss';
+
 .vxe-list {
   position: relative;
   display: block;
@@ -24,9 +26,252 @@
   }
 }
 
+.vxe-list--header-wrapper {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  min-height: var(--vxe-ui-list-row-height);
+}
+.vxe-list--header-left {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  flex-shrink: 0;
+}
+.vxe-list--header-content {
+  flex-grow: 1;
+  overflow: auto;
+}
+
+.vxe-list--body {
+  &.trigger--row {
+    & > .vxe-list--row {
+      &:not(.is--drag-disabled) {
+        &:active {
+          cursor: grabbing;
+        }
+      }
+    }
+  }
+  &.is--padding {
+    & > .vxe-list--row {
+      padding: 0 var(--vxe-ui-current-padding);
+    }
+  }
+  
+  &.checkbox--highlight {
+    .vxe-list--row {
+      &.is-checkbox--checked {
+        background-color: var(--vxe-ui-list-row-checkbox-checked-background-color);
+      }
+    }
+  }
+  &.radio--highlight {
+    .vxe-list--row {
+      &.is-radio--checked {
+        background-color: var(--vxe-ui-list-row-radio-checked-background-color);
+      }
+    }
+  }
+  &.row--hover {
+    .vxe-list--row {
+      &:hover {
+        background-color: var(--vxe-ui-list-row-hover-background-color);
+        &.is--current {
+          background-color: var(--vxe-ui-list-row-hover-current-background-color);
+        }
+      }
+    }
+    &.radio--highlight {
+      .vxe-list--row {
+        &.is-radio--checked {
+          &:hover {
+            background-color: var(--vxe-ui-list-row-hover-radio-checked-background-color);
+          }
+        }
+      }
+    }
+    &.checkbox--highlight {
+      .vxe-list--row {
+        &.is-checkbox--checked {
+          &:hover {
+            background-color: var(--vxe-ui-list-row-hover-checkbox-checked-background-color);
+          }
+        }
+      }
+    }
+  }
+}
+
+// 高亮项
+.vxe-list--row {
+  &.is--current {
+    background-color: var(--vxe-ui-list-row-current-background-color);
+  }
+}
+
 .vxe-list--virtual-wrapper {
   height: 100px;
 }
+.vxe-list--row {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
+.vxe-list--row-drag {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  flex-shrink: 0;
+  padding-right: var(--vxe-ui-current-padding);
+}
+.vxe-list--row-content {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  flex-grow: 1;
+  height: var(--vxe-ui-list-row-height);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.vxe-list--drag-handle {
+  &:not(.is--disabled) {
+    cursor: grab;
+    &:active {
+      cursor: grabbing;
+    }
+    &:hover {
+      color: var(--vxe-ui-font-primary-color);
+    }
+  }
+  &.is--disabled {
+    color: var(--vxe-ui-input-disabled-color);
+    cursor: not-allowed;
+  }
+}
+
+.vxe-list--row {
+  &.row--drag-move {
+    transition: transform 0.5s ease;
+  }
+  &.row--drag-origin {
+    opacity: 0.3;
+  }
+}
+
+/*拖拽行与列*/
+.vxe-list--drag-row-line {
+  display: none;
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 11;
+  pointer-events: none;
+}
+.vxe-list--drag-row-line {
+  width: 100%;
+  height: 1px;
+  border: 2px solid transparent;
+  &[drag-pos="top"] {
+    border-top-color: var(--vxe-ui-font-primary-color);
+  }
+  &[drag-pos="bottom"] {
+    border-bottom-color: var(--vxe-ui-font-primary-color);
+  }
+  &[drag-to-child="y"] {
+    border-top-color: transparent;
+    border-bottom-color: transparent;
+    border-left-color: var(--vxe-ui-status-success-color);
+  }
+  &.is--guides {
+    background-color: var(--vxe-ui-list-drag-over-background-color);
+  }
+}
+.vxe-body--row-list-move {
+  transition-property: transform;
+  transition-duration: 0.35s;
+}
+
+.vxe-list--drag-sort-tip {
+  display: none;
+  position: absolute;
+  top: 0;
+  left: 0;
+  padding: 0.6em 1.4em;
+  max-width: 50%;
+  min-width: 100px;
+  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;
+  &[drag-status="normal"] {
+    .vxe-list--drag-sort-tip-normal-status {
+      display: block;
+    }
+  }
+  &[drag-status="sub"] {
+    .vxe-list--drag-sort-tip-sub-status {
+      display: block;
+    }
+  }
+  &[drag-status="disabled"] {
+    .vxe-list--drag-sort-tip-disabled-status {
+      display: block;
+    }
+  }
+}
+.vxe-list--drag-sort-tip-wrapper {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
+.vxe-list--drag-sort-tip-status {
+  padding-right: 0.4em;
+}
+.vxe-list--drag-sort-tip-disabled-status {
+  display: none;
+  flex-shrink: 0;
+  color: var(--vxe-ui-status-error-color)
+}
+.vxe-list--drag-sort-tip-normal-status,
+.vxe-list--drag-sort-tip-sub-status {
+  display: none;
+}
+.vxe-list--drag-sort-tip-content {
+  flex-grow: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.vxe-list--checkbox-header {
+  padding-right: var(--vxe-ui-current-padding);
+  user-select: none;
+  @include baseMixin.createCheckboxIcon();
+}
+.vxe-list--checkbox-option {
+  padding-right: var(--vxe-ui-current-padding);
+  @include baseMixin.createCheckboxIcon();
+}
+.vxe-list--radio-option {
+  padding-right: var(--vxe-ui-current-padding);
+  @include baseMixin.createRadioIcon();
+}
+
+.vxe-list {
+  --vxe-ui-current-padding: var(--vxe-ui-layout-padding-default);
+  &.size--small,
+  &.size--mini {
+    --vxe-ui-current-padding: var(--vxe-ui-layout-padding-half);
+  }
+}
 
 .vxe-list {
   font-size: var(--vxe-ui-font-size-default);

package/styles/components/transfer.scss

@@ -0,0 +1,4 @@
+.vxe-transfer--body {
+  display: flex;
+  flex-direction: row;
+}

package/styles/components/tree.scss

@@ -138,6 +138,7 @@
   transition-property: transform;
   transition-duration: 0.35s;
 }
+
 .vxe-tree--drag-sort-tip {
   display: none;
   position: absolute;

package/styles/theme/base.scss

@@ -228,4 +228,7 @@
   --vxe-ui-collapse-min-height-medium: 38px;
   --vxe-ui-collapse-min-height-small: 36px;
   --vxe-ui-collapse-min-height-mini: 32px;
+
+  /*list*/
+  --vxe-ui-list-row-height: 2em;
 }

package/styles/theme/dark.scss

@@ -130,4 +130,14 @@
 
   /*collapse*/
   --vxe-ui-collapse-border-color: #363637;
+
+  /*list*/
+  --vxe-ui-list-row-hover-background-color: #262727;
+  --vxe-ui-list-row-radio-checked-background-color: #604820;
+  --vxe-ui-list-row-hover-radio-checked-background-color: #6e5326;
+  --vxe-ui-list-row-checkbox-checked-background-color: #604820;
+  --vxe-ui-list-row-hover-checkbox-checked-background-color: #6e5326;
+  --vxe-ui-list-row-current-background-color: #18222c;
+  --vxe-ui-list-row-hover-current-background-color: #262727;
+  --vxe-ui-list-drag-over-background-color:rgba(48, 48, 0, 0.3);
 }

package/styles/theme/light.scss

@@ -129,4 +129,14 @@
 
   /*collapse*/
   --vxe-ui-collapse-border-color: #{light_variable.$vxe-ui-collapse-border-color};
+
+  /*list*/
+  --vxe-ui-list-row-hover-background-color: #{light_variable.$vxe-ui-list-row-hover-background-color};
+  --vxe-ui-list-row-radio-checked-background-color: #{light_variable.$vxe-ui-list-row-radio-checked-background-color};
+  --vxe-ui-list-row-hover-radio-checked-background-color: #{light_variable.$vxe-ui-list-row-hover-radio-checked-background-color};
+  --vxe-ui-list-row-checkbox-checked-background-color: #{light_variable.$vxe-ui-list-row-checkbox-checked-background-color};
+  --vxe-ui-list-row-hover-checkbox-checked-background-color: #{light_variable.$vxe-ui-list-row-hover-checkbox-checked-background-color};
+  --vxe-ui-list-row-current-background-color: #{light_variable.$vxe-ui-list-row-current-background-color};
+  --vxe-ui-list-row-hover-current-background-color: #{light_variable.$vxe-ui-list-row-hover-current-background-color};
+  --vxe-ui-list-drag-over-background-color: #{light_variable.$vxe-ui-list-drag-over-background-color};
 }

package/styles/variable.scss

@@ -122,4 +122,14 @@ $vxe-ui-cascader-node-current-background-color: #e6f7ff !default;
 $vxe-ui-cascader-node-hover-current-background-color: #d7effb !default;
 
 /*collapse*/
-$vxe-ui-collapse-border-color: #ebeef5 !default;
+$vxe-ui-collapse-border-color: #ebeef5 !default;
+
+/*list*/
+$vxe-ui-list-row-hover-background-color: #f5f7fa !default;
+$vxe-ui-list-row-radio-checked-background-color: #fff3e0 !default;
+$vxe-ui-list-row-hover-radio-checked-background-color: #ffebbc !default;
+$vxe-ui-list-row-checkbox-checked-background-color: #fff3e0 !default;
+$vxe-ui-list-row-hover-checkbox-checked-background-color: #ffebbc !default;
+$vxe-ui-list-row-current-background-color: #e6f7ff !default;
+$vxe-ui-list-row-hover-current-background-color: #d7effb !default;
+$vxe-ui-list-drag-over-background-color: rgba(255,255,200,0.3) !default;

package/types/all.d.ts

@@ -77,6 +77,7 @@ import VxeSteps from './components/steps'
 import VxeSwitch from './components/switch'
 import VxeTabPane from './components/tab-pane'
 import VxeTableSelect from './components/table-select'
+import VxeTableTransfer from './components/table-transfer'
 import VxeTabs from './components/tabs'
 import VxeTag from './components/tag'
 import VxeTextEllipsis from './components/text-ellipsis'
@@ -89,6 +90,7 @@ import VxeTooltip from './components/tooltip'
 import VxeTour from './components/tour'
 import VxeTree from './components/tree'
 import VxeTreeSelect from './components/tree-select'
+import VxeTransfer from './components/transfer'
 import VxeUpload from './components/upload'
 import VxeWatermark from './components/watermark'
 
@@ -189,6 +191,7 @@ interface AllComponents {
   VxeSwitch: typeof VxeSwitch
   VxeTabPane: typeof VxeTabPane
   VxeTableSelect: typeof VxeTableSelect
+  VxeTableTransfer: typeof VxeTableTransfer
   VxeTabs: typeof VxeTabs
   VxeTag: typeof VxeTag
   VxeTextEllipsis: typeof VxeTextEllipsis
@@ -201,6 +204,7 @@ interface AllComponents {
   VxeTour: typeof VxeTour
   VxeTree: typeof VxeTree
   VxeTreeSelect: typeof VxeTreeSelect
+  VxeTransfer: typeof VxeTransfer
   VxeUpload: typeof VxeUpload
   VxeWatermark: typeof VxeWatermark
 
@@ -311,6 +315,7 @@ export * from './components/steps'
 export * from './components/switch'
 export * from './components/tab-pane'
 export * from './components/table-select'
+export * from './components/table-transfer'
 export * from './components/tabs'
 export * from './components/tag'
 export * from './components/text-ellipsis'
@@ -321,6 +326,7 @@ export * from './components/timeline-item'
 export * from './components/tip'
 export * from './components/tooltip'
 export * from './components/tour'
+export * from './components/transfer'
 export * from './components/tree'
 export * from './components/tree-select'
 export * from './components/upload'

package/types/components/collapse.d.ts

@@ -54,13 +54,15 @@ export interface VxeCollapsePrivateComputed extends CollapsePrivateComputed { }
 
 export interface CollapseReactData {
   staticPanes: VxeCollapsePaneDefines.CollapseConfig[]
-  activeNames: VxeCollapsePanePropTypes.Name[]
-  initNames: VxeCollapsePanePropTypes.Name[]
   cachePaneMaps: Record<string, VxeCollapseDefines.CacheItemObj>
+  activeKeyFlag: number
+  openKeyFlag: number
 }
 
 export interface CollapseInternalData {
   esTime?: any
+  activeKeyMaps: Record<string, boolean>
+  openKeyMaps: Record<string, boolean>
 }
 
 export interface CollapseMethods {