eoss 0.1.0-alpha.47 → 0.1.0-alpha.49

package/packages/scrollbar/src/main.js

@@ -8,22 +8,51 @@ import {
   addResizeListener,
   removeResizeListener
 } from 'eoss/src/utils/resize-event';
-import { getScrollbarWidth } from 'eoss/src/utils/scrollbar';
-import { toObject } from 'eoss/src/utils/util';
 import Bar from 'eoss/src/components/bar';
+import { toObject } from 'eoss/src/utils/util';
 import ScrollMixin from './scroll-mixin';
 
-// 缓存 getScrollbarWidth 计算结果
-let cachedScrollbarWidth = null;
-function getCachedScrollbarWidth() {
-  if (cachedScrollbarWidth === null) {
-    cachedScrollbarWidth = getScrollbarWidth();
-    // 监听窗口大小变化，重置缓存
-    window.addEventListener('resize', () => {
-      cachedScrollbarWidth = null;
-    });
+// 数字或纯数字字符串补 px，其余形式（100%、inherit 等）原样透传
+function toCssSize(val) {
+  const str = String(val).trim();
+  return /^-?\d+(\.\d+)?$/.test(str) ? str + 'px' : str;
+}
+
+// 把 'a: b; c-d: e' 形式的样式串解析成驼峰对象
+function parseStyleText(styleText) {
+  const res = {};
+  const list = String(styleText || '').split(';');
+  for (let i = 0; i < list.length; i++) {
+    const item = list[i];
+    const index = item.indexOf(':');
+    if (index < 0) continue;
+    const key = item.slice(0, index).trim();
+    if (!key) continue;
+    res[key.replace(/-(\w)/g, (match, letter) => letter.toUpperCase())] = item.slice(index + 1).trim();
+  }
+  return res;
+}
+
+// wrap-style 可以是 String / Object / Array，统一归一化成新对象：
+// Vue 2 仅解析绑定为字符串的顶层 style，数组里的字符串项会被丢掉，
+// 另外也不能直接在传入的对象上写字段，避免变更 prop
+function normalizeWrapStyle(val) {
+  if (typeof val === 'string') {
+    return parseStyleText(val);
+  }
+  if (Array.isArray(val)) {
+    return toObject(val.map((item) => {
+      return typeof item === 'string' ? parseStyleText(item) : item || {};
+    }));
   }
-  return cachedScrollbarWidth;
+  const res = {};
+  const source = val || {};
+  for (const key in source) {
+    if (Object.prototype.hasOwnProperty.call(source, key)) {
+      res[key] = source[key];
+    }
+  }
+  return res;
 }
 
 /* istanbul ignore next */
@@ -118,7 +147,6 @@ export default {
       sizeHeight: '0',
       moveX: 0,
       moveY: 0,
-      height: null,
       initialized: false,
       isHovering: false,
       hideTimer: null,
@@ -152,47 +180,27 @@ export default {
     }
   },
 
-  // 在 render 方法中使用缓存
   render(h) {
-    let gutter = getCachedScrollbarWidth();
-    let style = this.wrapStyle;
-    if (gutter) {
-      const gutterWith = `-${gutter}px`;
-      let gutterStyle = `margin-bottom: ${gutterWith}; margin-right: ${gutterWith};`;
-      if (this.styles || this.height || this.maxHeight) {
-        let height = this.height || this.styles && this.styles.height;
-        if (height === '100%') {
-          gutterStyle += `height:calc(100% + ${gutter}px);`;
-        } else {
-          gutterStyle += height ? 'height:' + (parseInt(height, 10) + gutter) + 'px' : '';
-        }
-        let maxHeight = this.maxHeight ||
-          this.styles && this.styles.maxHeight ||
-          this.styles && this.styles['max-height'];
-        if (maxHeight === '100%') {
-          gutterStyle += `max-height:calc(100% + ${gutter}px);`;
-        } else {
-          gutterStyle += maxHeight ? 'max-height:' + parseInt(maxHeight, 10) + 'px' : '';
-        }
-      } else {
-        gutterStyle += `height:calc(100% + ${gutter}px);`;
-      }
-
-      if (Array.isArray(this.wrapStyle)) {
-        style = toObject(this.wrapStyle);
-        style.marginRight = style.marginBottom = gutterWith;
-        if (!style.height && !style.maxHeight) {
-          style.height = '100%';
-        }
-      } else if (typeof this.wrapStyle === 'string') {
-        style += gutterStyle;
-      } else {
-        style = gutterStyle;
-      }
-    } else {
-      style = 'height:100%;';
+    // wrap 内联样式只负责高度声明与自定义样式，不再做原生滚动条的占位补偿：
+    // 原生滚动条已由 CSS 隐藏（--hidden-default 恒挂，IE 走 -ms-overflow-style），
+    // 本身不占位；此前的负 margin + calc(100% + gutter) 在浏览器缩放时，量取的
+    // gutter 取整宽度和实际渲染宽度对不上，底部/右侧就会露出一条灰边。
+    const wrapStyles = normalizeWrapStyle(this.wrapStyle);
+    const height = this.styles && this.styles.height;
+    const maxHeight = this.maxHeight ||
+      (this.styles && (this.styles.maxHeight || this.styles['max-height']));
+
+    // 已有的键不覆盖，保证用户显式写的 wrap-style 优先
+    if (height && wrapStyles.height === undefined) {
+      wrapStyles.height = toCssSize(height);
+    }
+    if (maxHeight && wrapStyles.maxHeight === undefined) {
+      wrapStyles.maxHeight = toCssSize(maxHeight);
     }
 
+    const hasStyle = Object.keys(wrapStyles).length > 0;
+    const style = hasStyle ? wrapStyles : undefined;
+
     // 虚拟滚动实现
     const view = h(
       this.tag,
@@ -211,8 +219,7 @@ export default {
         onScroll={this.handleScroll}
         class={[
           this.wrapClass,
-          'es-scrollbar__wrap',
-          gutter ? '' : 'es-scrollbar__wrap--hidden-default'
+          'es-scrollbar__wrap es-scrollbar__wrap--hidden-default'
         ]}
       >
         {[view]}
@@ -245,8 +252,9 @@ export default {
       nodes = [
         <div
           ref="wrap"
-          class={[this.wrapClass, 'es-scrollbar__wrap']}
           style={style}
+          onScroll={this.handleScroll}
+          class={[this.wrapClass, 'es-scrollbar__wrap']}
         >
           {[view]}
         </div>
@@ -571,18 +579,8 @@ export default {
         const wrap = this.wrap;
         if (!wrap) return;
 
-        // 确保 wrap 元素有正确的高度设置，特别是在嵌套场景下
-        if (!wrap.style.height && !wrap.style.maxHeight && !this.height && !this.maxHeight) {
-          // 如果没有设置高度，尝试从父元素获取
-          const parent = wrap.parentNode;
-          if (parent && parent.style.height) {
-            wrap.style.height = parent.style.height;
-          } else if (parent && parent.style.maxHeight) {
-            wrap.style.height = parent.style.maxHeight;
-          } else if (parent && parent.clientHeight) {
-            wrap.style.height = parent.clientHeight + 'px';
-          }
-        }
+        // wrap 高度：CSS 给默认的 height: 100%，需要限高时由调用方通过
+        // max-height / wrap-style 声明（组件自身的 wrap-class 限高不受干扰）
 
         // 缓存计算值
         const clientHeight = wrap.clientHeight;
@@ -603,18 +601,6 @@ export default {
         }
 
         this.onReady && this.onReady(this.sizeHeight, this.sizeWidth);
-
-        // 延迟执行高度计算逻辑
-        requestAnimationFrame(() => {
-          let maxH = wrap.parentNode.style['max-height'];
-          if (maxH) {
-            maxH = parseInt(maxH, 10);
-            let gutter = getCachedScrollbarWidth();
-            if (wrap.offsetHeight - gutter > maxH) {
-              this.height = maxH;
-            }
-          }
-        });
       });
     },
 

package/packages/select/src/select.vue

@@ -1100,6 +1100,10 @@ export default {
     },
 
     results: {
+      // 树形模式的 options 完全由 data/results 驱动（树节点不是 es-option，不会自注册），
+      // 必须 immediate：否则静态传入 data 时 results 初始化不触发 watcher，
+      // options 恒为 []，下拉被 v-show="options.length > 0" 隐藏并显示「无数据」
+      immediate: true,
       deep: true,
       handler(val) {
         if (this.tree) {
@@ -1726,14 +1730,17 @@ export default {
         if (this.filterable) this.$refs.input.focus();
         this.resetInputHeight();
       } else {
+        let selectValue = option.value;
         if (this.valueType === 'string') {
-          this.$emit(
-            'input',
-            getValueByPath(option.value, this.actualValueKey)
-          );
-        } else {
-          this.$emit('input', option.value);
+          selectValue = getValueByPath(option.value, this.actualValueKey);
+          // 树节点未提供 value-key 对应字段时取值为 undefined，直接写入 v-model 会让
+          // setSelected 解析不出 label（表现为选中后不回显），此处退回整节点对象，
+          // 由 getOption 的对象分支按 label-key 取标签
+          if (this.tree && selectValue === undefined) {
+            selectValue = option.value;
+          }
         }
+        this.$emit('input', selectValue);
         this.emitChange(option.value);
         this.visible = false;
       }

package/packages/selector/src/selector.vue

@@ -202,11 +202,7 @@ import {
   addResizeListener,
   removeResizeListener
 } from 'eoss/src/utils/resize-event';
-import {
-  getScrollbarWidth,
-  getScrollSize,
-  scrollMove
-} from 'eoss/src/utils/scrollbar';
+import { getScrollSize, scrollMove } from 'eoss/src/utils/scrollbar';
 export default {
   name: 'EsSelector',
   inheritAttrs: false,
@@ -590,8 +586,7 @@ export default {
       timer: null,
       tagsHeight: 0,
       moveTo: 0,
-      barSize: 0,
-      scrollbarWidth: 0
+      barSize: 0
     };
   },
   computed: {
@@ -600,13 +595,12 @@ export default {
         ? { 'max-height': this.tagsHeight + 'px', overflow: 'hidden' }
         : {};
     },
+    // tags 折叠限高时内层容器自身滚动，原生条由 CSS 隐藏（见 selector.scss），
+    // 不占位也就无需按条宽加宽容器把它推出去——那样在浏览器缩放时量到的
+    // 15px 和实际渲染宽度对不上，右侧会露出一条灰边
     tagsStyle() {
       return this.tagsHeight
-        ? {
-            'max-height': this.tagsHeight + 'px',
-            overflowY: 'scroll',
-            width: `calc(100% + ${this.scrollbarWidth}px)`
-          }
+        ? { 'max-height': this.tagsHeight + 'px', overflowY: 'scroll' }
         : {};
     },
     // 滚动容器
@@ -732,7 +726,6 @@ export default {
     this.mix && this.getSysParam();
   },
   mounted() {
-    this.scrollbarWidth = getScrollbarWidth();
     //this.resetInputHeight();
     if (this.filterable) {
       this.$nextTick(() => {

package/packages/table/src/config.js

@@ -24,6 +24,13 @@ export const cellStarts = {
     minWidth: 48,
     realWidth: 48,
     order: ''
+  },
+  drag: {
+    width: 48,
+    minWidth: 48,
+    realWidth: 48,
+    order: '',
+    className: 'es-table__drag-column'
   }
 };
 
@@ -147,6 +154,47 @@ export const cellForced = {
     sortable: false,
     resizable: false,
     className: 'es-table__expand-column'
+  },
+
+  drag: {
+    /**
+     * 拖拽列默认不渲染表头文案
+     * @param {Function} h - createElement函数
+     * @param {Object} options - 包含列配置的对象
+     * @returns {VNode} Vue虚拟节点
+     */
+    renderHeader: function(h, { column }) {
+      return column.label || '';
+    },
+
+    /**
+     * 渲染拖拽手柄图标：这一列存在即代表开启行拖拽排序（见 table.vue 的
+     * dragEnabled），Sortable 的 handle 指向 es-table__drag-handle。
+     * rules 为函数时按行判定（返回假值该行不可拖），rules 显式为 false 时
+     * 整列不可拖；不可拖时不给手柄类，Sortable 自然拖不动该行
+     * @param {Function} h - createElement函数
+     * @param {Object} options - 包含行数据、列配置等的对象
+     * @returns {VNode} Vue虚拟节点
+     */
+    renderCell: function(h, { row, column, $index, store }) {
+      const rules = column.rules;
+      const byRules =
+        typeof rules === 'function'
+          ? rules(row, { row, column, $index, store }) !== false
+          : rules !== false;
+      // 行数据 fixed 为 true 的行本来就不可拖（tr 上的 drag-sort-disabled
+      // 会被 Sortable 的 filter 拦掉），图标同步置灰
+      const enabled = byRules && !(row && row.fixed);
+      const classes = ['es-icon-tuozhuai'];
+      if (enabled) {
+        classes.push('es-table__drag-handle');
+      } else {
+        classes.push('is-disabled');
+      }
+      return <i class={ classes } />;
+    },
+    sortable: false,
+    resizable: false
   }
 };
 

package/packages/table/src/store/index.js

@@ -126,7 +126,12 @@ Watcher.prototype.mutations = {
         const columnId =
           'es-table_1_column_' + Math.floor(Math.random() * 10000);
         let column = null;
-        if (type === 'selection' || type === 'index' || type === 'expand') {
+        if (
+          type === 'selection' ||
+          type === 'index' ||
+          type === 'expand' ||
+          type === 'drag'
+        ) {
           column = {
             id: columnId,
             type: type,
@@ -135,7 +140,9 @@ Watcher.prototype.mutations = {
             property: _field,
             ...cellStarts[type],
             ...normalized,
-            ...config
+            ...config,
+            // drag 列用 rules 控制行是否可拖（见 config.js）
+            rules
           };
         } else {
           column = {
@@ -145,7 +152,9 @@ Watcher.prototype.mutations = {
             property: _field,
             formatter,
             ...normalized,
-            required: _required
+            required: _required,
+            // 保留 rules 到列对象：drag 列用它控制行是否可拖（见 config.js）
+            rules
           };
         }
         let childrens = null;
@@ -391,7 +400,8 @@ Watcher.prototype.mutations = {
         } else if (
           type === 'selection' ||
           type === 'index' ||
-          type === 'expand'
+          type === 'expand' ||
+          type === 'drag'
         ) {
           // 特殊类型列不设置默认 renderCell，由 setColumnRenders 套用 cellForced 中的强制渲染函数
         } else {
@@ -496,6 +506,11 @@ Watcher.prototype.mutations = {
 
     states._columns = createColumns(thead);
     this.updateColumns();
+    // 换 thead 后列对象全部新建、realWidth 为空，若不重排布局，
+    // 表头与表体 colgroup 会各自按内容回退自动表格布局，列宽错位（sizer 确认改表头后必现）
+    if (this.table && this.table.$ready) {
+      this.scheduleLayout();
+    }
   },
 
   /**

package/packages/table/src/store/watcher.js

@@ -109,7 +109,10 @@ export default Vue.extend({
      */
     updateColumns() {
       const states = this.states;
-      const _columns = states._columns || [];
+      // hide 是「是否隐藏列」的列级契约（文档 thead 列配置）：隐藏列不参与
+      // 渲染与布局，在列构建入口统一剔除，首屏与运行中换 thead（setThead）
+      // 都经这一条路径生效；states._columns 仍保留全量供增删列等操作使用
+      const _columns = (states._columns || []).filter(column => !column.hide);
 
       // 计算固定列和右侧固定列
       states.fixedColumns = _columns.filter(column => column.fixed === true || column.fixed === 'left');
@@ -121,9 +124,15 @@ export default Vue.extend({
         states.fixedColumns.unshift(_columns[0]);
       }
 
+      // 开启拖拽排序时左右固定层不渲染（见 table.vue 的 dragEnabled），fixed 不生效，
+      // 也就不做「固定列前置」重排，保持声明顺序，避免列序被静默打乱
+      const dragEnabled = _columns.some(column => column.type === 'drag');
+
       // 计算非固定列并生成原始列配置
       const notFixedColumns = _columns.filter(column => !column.fixed);
-      states.originColumns = [...states.fixedColumns, ...notFixedColumns, ...states.rightFixedColumns];
+      states.originColumns = dragEnabled
+        ? [..._columns]
+        : [...states.fixedColumns, ...notFixedColumns, ...states.rightFixedColumns];
 
       // 扁平化各类列配置
       const leafColumns = doFlattenColumns(notFixedColumns);
@@ -136,7 +145,9 @@ export default Vue.extend({
       states.rightFixedLeafColumnsLength = rightFixedLeafColumns.length;
 
       // 生成最终的列配置和复杂度标记
-      states.columns = [...fixedLeafColumns, ...leafColumns, ...rightFixedLeafColumns];
+      states.columns = dragEnabled
+        ? doFlattenColumns(_columns)
+        : [...fixedLeafColumns, ...leafColumns, ...rightFixedLeafColumns];
       states.isComplex = states.fixedColumns.length > 0 || states.rightFixedColumns.length > 0;
     },
 

package/packages/table/src/table-body.js

@@ -109,8 +109,8 @@ export default {
       });
     },
 
-    // 监听拖拽排序配置变化
-    '$parent.dragSort'(val) {
+    // 监听拖拽列（type: 'drag'）的增删，有则开启拖拽排序
+    'table.dragEnabled'(val) {
       if (val) {
         this.initSortable();
       } else {
@@ -133,7 +133,7 @@ export default {
   },
 
   mounted() {
-    if (this.$parent.dragSort) {
+    if (this.table.dragEnabled) {
       this.initSortable();
     }
   },
@@ -156,7 +156,9 @@ export default {
       this.$nextTick(() => {
         try {
           this._sortable = new Sortable(this.$refs.dragSort, {
-            handle: this.$parent.dragSortClass ? `.${this.$parent.dragSortClass}` : undefined,
+            // 手柄就是拖拽列里的图标；不可拖的行（rules 判定为假、
+            // 或行数据 fixed 为 true）不带这个类，因此拖不动
+            handle: '.es-table__drag-handle',
             animation: 150,
             onUpdate: this.handleUpdate,
             filter: '.drag-sort-disabled'
@@ -203,6 +205,9 @@ export default {
       } else if (this.fixed === 'right') {
         return index < this.columnsCount - this.rightFixedLeafCount;
       } else {
+        // 开启拖拽排序时左右固定层不渲染（见 table.vue 的 dragEnabled），
+        // 固定列只能靠主表显示，不能再用 is-hidden 藏起来
+        if (this.table.dragEnabled) return false;
         return (index < this.leftFixedLeafCount) || (index >= this.columnsCount - this.rightFixedLeafCount);
       }
     },

package/packages/table/src/table-column.js

@@ -25,7 +25,19 @@ export default {
       type: String,
       default: 'default'
     },
-    filterIcon: [String, Boolean],
+    /**
+     * 列的规则；type 为 drag 时用它判定行是否可拖：
+     * 函数按行判定（返回 false 该行不可拖），false 表示整列不可拖。
+     * 必须显式写 default: undefined：类型里带 Boolean 时，Vue 会把未传的
+     * 值铸成 false，那就等于默认把整列拖拽关掉了
+     * @type {Function|Boolean|Array|Object}
+     */
+    rules: {
+      type: [Function, Boolean, Array, Object],
+      default: undefined
+    },
+    // Boolean 必须在 String 前：裸写 filterColumn 时 Vue 才会把空串铸成 true（同 sortable 的约定）
+    filterColumn: [Boolean, String],
     label: String,
     labelKey: String,
     valueKey: String,
@@ -393,11 +405,13 @@ export default {
       filterPlacement: '',
       isColumnGroup: false,
       filterOpened: false,
-      filterIcon: this.filterIcon,
+      filterColumn: this.filterColumn,
       // 排序相关属性
       sortable: sortable,
       // 索引列
-      index: this.index
+      index: this.index,
+      // drag 列用它控制行是否可拖（见 config.js 的 cellForced.drag）
+      rules: this.rules
     };
 
     // 收集不同类型的属性

package/packages/table/src/table-footer.js

@@ -284,9 +284,11 @@ export default {
         }
         return before < this.columnsCount - this.rightFixedLeafCount;
       } else if (!this.fixed && column && column.fixed) {
-        // 当页脚实例不固定而列固定时隐藏单元格
-        return true;
+        // 当页脚实例不固定而列固定时隐藏单元格；
+        // 开启拖拽排序时固定层不渲染，固定列要留在主表里显示
+        return !this.table.dragEnabled;
       } else {
+        if (this.table.dragEnabled) return false;
         return (index < this.leftFixedCount) || (index >= this.columnsCount - this.rightFixedCount);
       }
     },

package/packages/table/src/table-header.js

@@ -164,7 +164,7 @@ export default {
                     ]}
                   >
                     {/* 渲染过滤图标 */}
-                    {this._renderFilterIcon(h, column)}
+                    {this._renderfilterColumn(h, column)}
 
                     {/* 渲染列标题 */}
                     {this._renderColumnLabel(h, cellIndex, column)}
@@ -312,6 +312,8 @@ export default {
       } else if (this.fixed === 'right') {
         return start < this.columnsCount - this.rightFixedLeafCount;
       } else {
+        // 开启拖拽排序时左右固定层不渲染，固定列表头只能靠主表显示
+        if (this.table.dragEnabled) return false;
         return (
           after < this.leftFixedLeafCount ||
           start >= this.columnsCount - this.rightFixedLeafCount
@@ -483,7 +485,8 @@ export default {
      * @param {Event} event - 事件对象
      * @param {Object} column - 列配置
      */
-    handleFilterColumn(event, column) {
+    handlefilterColumnumn(event, column) {
+      console.log('filter-column');
       if (this.$parent) {
         this.$parent.$emit('filter-column', column, event);
       }
@@ -610,16 +613,16 @@ export default {
      * @param {Object} column - 列配置
      * @returns {VNode|null} 渲染结果
      */
-    _renderFilterIcon(h, column) {
-      if (!column.filterIcon) return null;
+    _renderfilterColumn(h, column) {
+      if (!column.filterColumn) return null;
 
       return (
         <span
           class="filter-column"
-          on-click={($event) => this.handleFilterColumn($event, column)}
+          on-click={($event) => this.handlefilterColumnumn($event, column)}
         >
           <i
-            class={[typeof column.filterIcon === 'string' ? column.filterIcon : 'es-icon-menu', 'filter-icon']}
+            class={[typeof column.filterColumn === 'string' ? column.filterColumn : 'es-icon-yingyong', 'filter-icon']}
           ></i>
         </span>
       );