@type-dom/ui 0.6.0 → 0.6.1

package/dist/theme-chalk/transfer.scss

@@ -1,203 +1,217 @@
-@use 'mixins/mixins' as *;
-@use 'mixins/utils' as *;
-@use 'mixins/var' as *;
-@use 'common/var' as *;
-
-@include b(transfer) {
-  @include set-component-css-var('transfer', $transfer);
-}
-
-@include b(transfer) {
-  font-size: getCssVar('font-size', 'base');
-
-  @include e(buttons) {
-    display: inline-block;
-    vertical-align: middle;
-    padding: 0 30px;
-  }
-
-  @include e(button) {
-    vertical-align: top;
-
-    &:nth-child(2) {
-      margin: 0 0 0 10px;
-    }
-
-    i,
-    span {
-      font-size: 14px;
-    }
-
-    & .#{$namespace}-icon + span {
-      margin-left: 0;
-    }
-  }
-}
-
-@include b(transfer-panel) {
-  overflow: hidden;
-  background: getCssVar('bg-color', 'overlay');
-  display: inline-block;
-  text-align: left;
-  vertical-align: middle;
-  width: getCssVar('transfer-panel-width');
-  max-height: 100%;
-  box-sizing: border-box;
-  position: relative;
-
-  @include e(body) {
-    height: getCssVar('transfer-panel-body-height');
-    border-left: 1px solid getCssVar('transfer-border-color');
-    border-right: 1px solid getCssVar('transfer-border-color');
-    border-bottom: 1px solid getCssVar('transfer-border-color');
-    border-bottom-left-radius: getCssVar('transfer-border-radius');
-    border-bottom-right-radius: getCssVar('transfer-border-radius');
-    overflow: hidden;
-    @include when('with-footer') {
-      border-bottom: none;
-      border-bottom-left-radius: 0;
-      border-bottom-right-radius: 0;
-    }
-  }
-
-  @include e(list) {
-    margin: 0;
-    padding: 6px 0;
-    list-style: none;
-    height: getCssVar('transfer-panel-body-height');
-    overflow: auto;
-    box-sizing: border-box;
-    @include when(filterable) {
-      height: calc(100% - getCssVar('transfer-filter-height') - 30px);
-      padding-top: 0;
-    }
-  }
-
-  @include e(item) {
-    height: getCssVar('transfer-item-height');
-    line-height: getCssVar('transfer-item-height');
-    padding-left: 15px;
-    display: block !important;
-
-    & + .#{$namespace}-transfer-panel__item {
-      margin-left: 0;
-    }
-
-    &.#{$namespace}-checkbox {
-      color: getCssVar('text-color', 'regular');
-    }
-
-    &:hover {
-      color: getCssVar('color-primary');
-    }
-
-    &.#{$namespace}-checkbox .#{$namespace}-checkbox__label {
-      width: 100%;
-      @include utils-ellipsis;
-      display: block;
-      box-sizing: border-box;
-      padding-left: 22px;
-      line-height: getCssVar('transfer-item-height');
-    }
-
-    .#{$namespace}-checkbox__input {
-      position: absolute;
-      top: 8px;
-    }
-  }
-
-  @include e(filter) {
-    text-align: center;
-    padding: 15px;
-    box-sizing: border-box;
-
-    .#{$namespace}-input__inner {
-      height: getCssVar('transfer-filter-height');
-      width: 100%;
-      font-size: 12px;
-      display: inline-block;
-      box-sizing: border-box;
-    }
-
-    .#{$namespace}-icon-circle-close {
-      cursor: pointer;
-    }
-  }
-
-  .#{$namespace}-transfer-panel__header {
-    display: flex;
-    align-items: center;
-    height: getCssVar('transfer-panel-header-height');
-    background: getCssVar('transfer-panel-header-bg-color');
-    margin: 0;
-    padding-left: 15px;
-    border: 1px solid getCssVar('transfer-border-color');
-    border-top-left-radius: getCssVar('transfer-border-radius');
-    border-top-right-radius: getCssVar('transfer-border-radius');
-    box-sizing: border-box;
-    color: getCssVar('color-black');
-
-    .#{$namespace}-checkbox {
-      position: relative;
-      display: flex;
-      width: 100%;
-      align-items: center;
-
-      .#{$namespace}-checkbox__label {
-        font-size: 16px;
-        color: getCssVar('text-color', 'primary');
-        font-weight: normal;
-
-        span {
-          position: absolute;
-          right: 15px;
-          top: 50%;
-          transform: translate3d(0, -50%, 0);
-          color: getCssVar('text-color', 'secondary');
-          font-size: 12px;
-          font-weight: normal;
-        }
-      }
-    }
-  }
-
-  .#{$namespace}-transfer-panel__footer {
-    height: getCssVar('transfer-panel-footer-height');
-    background: getCssVar('bg-color', 'overlay');
-    margin: 0;
-    padding: 0;
-    border: 1px solid getCssVar('transfer-border-color');
-    border-bottom-left-radius: getCssVar('transfer-border-radius');
-    border-bottom-right-radius: getCssVar('transfer-border-radius');
-    @include utils-vertical-center;
-
-    .#{$namespace}-checkbox {
-      padding-left: 20px;
-      color: getCssVar('text-color', 'regular');
-    }
-  }
-
-  .#{$namespace}-transfer-panel__empty {
-    margin: 0;
-    height: getCssVar('transfer-item-height');
-    line-height: getCssVar('transfer-item-height');
-    padding: 6px 15px 0;
-    color: getCssVar('text-color', 'secondary');
-    text-align: center;
-  }
-
-  .#{$namespace}-checkbox__label {
-    padding-left: 8px;
-  }
-
-  .#{$namespace}-checkbox__inner {
-    height: 14px;
-    width: 14px;
-    border-radius: 3px;
-    &::after {
-      height: 6px;
-      width: 3px;
-      left: 4px;
-    }
-  }
-}
+@use 'mixins/mixins' as *;
+@use 'mixins/utils' as *;
+@use 'mixins/var' as *;
+@use 'common/var' as *;
+
+@include b(transfer) {
+  @include set-component-css-var('transfer', $transfer);
+}
+
+@include b(transfer) {
+  font-size: getCssVar('font-size', 'base');
+  // 强制左右并排。源码沿用 EP 的 inline-block 方案，但 inline-block 在
+  // panel 总宽超过容器（变量宽度未生效被内容撑开 / 示例容器偏窄）时会
+  // 换行成上下布局。改 flex 横向 + 不压缩，保证任何情况下都是左右结构。
+  display: flex;
+  align-items: center;
+
+  @include e(buttons) {
+    display: inline-block;
+    vertical-align: middle;
+    padding: 0 30px;
+    flex: 0 0 auto;
+  }
+
+  @include e(button) {
+    vertical-align: top;
+
+    &:nth-child(2) {
+      margin: 0 0 0 10px;
+    }
+
+    i,
+    span {
+      font-size: 14px;
+    }
+
+    & .#{$namespace}-icon + span {
+      margin-left: 0;
+    }
+  }
+}
+
+@include b(transfer-panel) {
+  overflow: hidden;
+  background: getCssVar('bg-color', 'overlay');
+  display: inline-block;
+  text-align: left;
+  vertical-align: middle;
+  width: getCssVar('transfer-panel-width');
+  // flex 容器内不压缩，保持固定面板宽度（与 EP 的 200px 一致）。
+  flex: 0 0 getCssVar('transfer-panel-width');
+  max-height: 100%;
+  box-sizing: border-box;
+  position: relative;
+
+  @include e(body) {
+    height: getCssVar('transfer-panel-body-height');
+    border-left: 1px solid getCssVar('transfer-border-color');
+    border-right: 1px solid getCssVar('transfer-border-color');
+    border-bottom: 1px solid getCssVar('transfer-border-color');
+    border-bottom-left-radius: getCssVar('transfer-border-radius');
+    border-bottom-right-radius: getCssVar('transfer-border-radius');
+    overflow: hidden;
+    @include when('with-footer') {
+      border-bottom: none;
+      border-bottom-left-radius: 0;
+      border-bottom-right-radius: 0;
+    }
+  }
+
+  @include e(list) {
+    margin: 0;
+    padding: 6px 0;
+    list-style: none;
+    height: getCssVar('transfer-panel-body-height');
+    overflow: auto;
+    box-sizing: border-box;
+    @include when(filterable) {
+      height: calc(100% - getCssVar('transfer-filter-height') - 30px);
+      padding-top: 0;
+    }
+
+    // 虚拟滚动：列表被包在 checkbox-group 内（保持 inject 的 parent 链可达），
+    // 真正的滚动由内部虚拟列表的 window 提供，group 自身不能出现滚动条，
+    // 否则内外各一条竖条。
+    &.is-virtual {
+      overflow: hidden;
+      padding: 0;
+    }
+  }
+
+  @include e(item) {
+    height: getCssVar('transfer-item-height');
+    line-height: getCssVar('transfer-item-height');
+    padding-left: 15px;
+    display: block !important;
+
+    & + .#{$namespace}-transfer-panel__item {
+      margin-left: 0;
+    }
+
+    &.#{$namespace}-checkbox {
+      color: getCssVar('text-color', 'regular');
+      margin-right: 30px;
+    }
+
+    &:hover {
+      color: getCssVar('color-primary');
+    }
+
+    &.#{$namespace}-checkbox .#{$namespace}-checkbox__label {
+      width: 100%;
+      @include utils-ellipsis;
+      display: block;
+      box-sizing: border-box;
+      padding-left: 22px;
+      line-height: getCssVar('transfer-item-height');
+    }
+
+    .#{$namespace}-checkbox__input {
+      position: absolute;
+      top: 8px;
+    }
+  }
+
+  @include e(filter) {
+    text-align: center;
+    padding: 15px;
+    box-sizing: border-box;
+
+    .#{$namespace}-input__inner {
+      height: getCssVar('transfer-filter-height');
+      width: 100%;
+      font-size: 12px;
+      display: inline-block;
+      box-sizing: border-box;
+    }
+
+    .#{$namespace}-icon-circle-close {
+      cursor: pointer;
+    }
+  }
+
+  .#{$namespace}-transfer-panel__header {
+    display: flex;
+    align-items: center;
+    height: getCssVar('transfer-panel-header-height');
+    background: getCssVar('transfer-panel-header-bg-color');
+    margin: 0;
+    padding-left: 15px;
+    border: 1px solid getCssVar('transfer-border-color');
+    border-top-left-radius: getCssVar('transfer-border-radius');
+    border-top-right-radius: getCssVar('transfer-border-radius');
+    box-sizing: border-box;
+    color: getCssVar('color-black');
+
+    .#{$namespace}-checkbox {
+      position: relative;
+      display: flex;
+      width: 100%;
+      align-items: center;
+
+      .#{$namespace}-checkbox__label {
+        display: flex;
+        flex: 1;
+        align-items: center;
+        min-width: 0;
+        font-size: 16px;
+        color: getCssVar('text-color', 'primary');
+        font-weight: normal;
+      }
+    }
+  }
+
+  .#{$namespace}-transfer-panel__header-title {
+    @include utils-ellipsis;
+    flex: 1;
+    min-width: 0;
+  }
+
+  .#{$namespace}-transfer-panel__header-count {
+    flex-shrink: 0;
+    margin-left: 8px;
+    margin-right: 15px;
+    color: getCssVar('text-color', 'secondary');
+    font-size: 12px;
+  }
+
+  .#{$namespace}-transfer-panel__footer {
+    height: getCssVar('transfer-panel-footer-height');
+    background: getCssVar('bg-color', 'overlay');
+    margin: 0;
+    padding: 0;
+    border: 1px solid getCssVar('transfer-border-color');
+    border-bottom-left-radius: getCssVar('transfer-border-radius');
+    border-bottom-right-radius: getCssVar('transfer-border-radius');
+    @include utils-vertical-center;
+
+    .#{$namespace}-checkbox {
+      padding-left: 20px;
+      color: getCssVar('text-color', 'regular');
+    }
+  }
+
+  .#{$namespace}-transfer-panel__empty {
+    margin: 0;
+    height: getCssVar('transfer-item-height');
+    line-height: getCssVar('transfer-item-height');
+    padding: 6px 15px 0;
+    color: getCssVar('text-color', 'secondary');
+    text-align: center;
+  }
+
+  .#{$namespace}-checkbox__label {
+    padding-left: 8px;
+  }
+}

package/dist/theme-chalk/tree-select.scss

@@ -1,41 +1,41 @@
-@use 'mixins/mixins' as *;
-@use 'mixins/var' as *;
-@use 'common/var' as *;
-
-@include b(tree-select) {
-  @include set-component-css-var('tree', $tree);
-}
-
-@include b(tree-select) {
-  @include e(popper) {
-    // padding-left same with select option
-    .#{$namespace}-tree-node__expand-icon {
-      margin-left: 8px;
-    }
-
-    // remove icon when show checkbox
-    .#{$namespace}-tree-node.is-checked
-      > .#{$namespace}-tree-node__content
-      .#{$namespace}-select-dropdown__item.selected::after {
-      content: none;
-    }
-
-    .#{$namespace}-select-dropdown__list
-      > .#{$namespace}-select-dropdown__item {
-      padding-left: 32px;
-    }
-
-    .#{$namespace}-select-dropdown__item {
-      flex: 1;
-      background: transparent !important;
-
-      // padding-left move to `el-tree-node__expand-icon`
-      padding-left: 0;
-
-      // fix: select height > tree node height
-      // https://github.com/yujinpan/el-select-tree/pull/33
-      height: 20px;
-      line-height: 20px;
-    }
-  }
-}
+@use 'mixins/mixins' as *;
+@use 'mixins/var' as *;
+@use 'common/var' as *;
+
+@include b(tree-select) {
+  @include set-component-css-var('tree', $tree);
+}
+
+@include b(tree-select) {
+  @include e(popper) {
+    // padding-left same with select option
+    .#{$namespace}-tree-node__expand-icon {
+      margin-left: 8px;
+    }
+
+    // remove icon when show checkbox
+    .#{$namespace}-tree-node.is-checked
+      > .#{$namespace}-tree-node__content
+      .#{$namespace}-select-dropdown__item.selected::after {
+      content: none;
+    }
+
+    .#{$namespace}-select-dropdown__list
+      > .#{$namespace}-select-dropdown__item {
+      padding-left: 32px;
+    }
+
+    .#{$namespace}-select-dropdown__item {
+      flex: 1;
+      background: transparent !important;
+
+      // padding-left move to `el-tree-node__expand-icon`
+      padding-left: 0;
+
+      // fix: select height > tree node height
+      // https://github.com/yujinpan/el-select-tree/pull/33
+      height: 20px;
+      line-height: 20px;
+    }
+  }
+}

package/dist/theme-chalk/tree-v2.scss

@@ -0,0 +1,63 @@
+$namespace: td;
+
+@use './tree.scss';
+
+/* Tree V2 (virtualized tree) — 复用 .td-tree-node 的节点样式，仅补充容器层 */
+.td-tree-v2 {
+  position: relative;
+  display: block;
+  cursor: default;
+  background: var(--td-fill-color-blank, #ffffff);
+  color: var(--td-text-color-primary, #606266);
+  font-size: var(--td-font-size-base, 14px);
+  outline: none;
+
+  --td-tree-text-color: var(--td-text-color-primary, #606266);
+  --td-tree-bg-color: var(--td-fill-color-blank, #ffffff);
+  --td-tree-node-content-height: 26px;
+  --td-tree-node-hover-bg-color: var(--td-fill-color-light, #f5f7fa);
+  --td-tree-expand-icon-color: var(--td-text-color-placeholder, #a8abb2);
+
+  &__empty-block {
+    position: relative;
+    min-height: 60px;
+    height: 100%;
+    width: 100%;
+    text-align: center;
+  }
+
+  &__empty-text {
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%);
+    color: var(--td-text-color-secondary, #909399);
+    font-size: var(--td-font-size-base, 14px);
+  }
+
+  &--highlight-current .td-tree-node.is-current > .td-tree-node__content {
+    background-color: var(--td-color-primary-light-9, #ecf5ff);
+  }
+
+  &__virtual-list {
+    width: 100%;
+  }
+}
+
+/* 虚拟列表中的节点由 slot 返回的 styleObj 定位，这里让它撑满整行 */
+.td-tree-v2 .td-tree-node {
+  display: flex;
+  align-items: center;
+  white-space: nowrap;
+  outline: none;
+  font-size: 14px;
+
+  &:hover > .td-tree-node__content {
+    background-color: var(--td-tree-node-hover-bg-color, #f5f7fa);
+  }
+
+  &.is-disabled > .td-tree-node__content {
+    cursor: not-allowed;
+    color: var(--td-text-color-placeholder, #a8abb2);
+  }
+}