dfish-widget 1.0.114 → 1.0.116

package/lib/index.esm.js

@@ -2,7 +2,7 @@ import lodash from 'lodash';
 import jquery from 'jquery';
 import http from 'axios';
 import Qs from 'qs';
-import { nextTick, h, mergeProps, toRaw, resolveComponent, openBlock, createElementBlock, createStaticVNode, createElementVNode, createBlock, withCtx, Fragment, createVNode, renderList, toDisplayString, createTextVNode, createCommentVNode, inject, provide, renderSlot, Teleport, computed, resolveDirective, withDirectives, unref, ref, onMounted, watch, normalizeStyle, normalizeClass, TransitionGroup, getCurrentInstance, createSlots, resolveDynamicComponent, withModifiers } from 'vue';
+import { nextTick, h, mergeProps, toRaw, resolveComponent, openBlock, createElementBlock, createStaticVNode, createElementVNode, createBlock, withCtx, Fragment, createVNode, renderList, toDisplayString, createTextVNode, createCommentVNode, inject, provide, renderSlot, Teleport, computed, resolveDirective, withDirectives, unref, markRaw, ref, onMounted, watch, normalizeStyle, normalizeClass, TransitionGroup, getCurrentInstance, createSlots, resolveDynamicComponent, withModifiers } from 'vue';
 import ResizeObserver$1 from 'resize-observer-polyfill';
 
 let u = navigator.userAgent.toLowerCase();
@@ -5008,40 +5008,47 @@ var script$_ = {
     },
     data() {
       return {
-        sticky: {left: null, right: null, observers: []},
-      }
-    },
-    mounted() {
-      this.$watch('hasSticky', (v) => {
-        this.$nextTick(() => this.observeSticky());
-      }, {immediate: true});
-      this.$el.setAttribute('w-scroll-x', 'left');
-      if ($$1.br.chrome && $$1.br.chrome <= 60) { //低版本谷歌表格宽度有变化时，sticky的td内容会不可见。因此执行一个强制重新渲染的步骤
-        new ResizeObserver$1(() => {
-          this.$el.setAttribute('w-compact-resize-sticky', '');
-          requestAnimationFrame(() => this.$el.removeAttribute('w-compact-resize-sticky'));
-        }).observe(this.$el);
+        sticky: markRaw({left: null, right: null, observers: []}),
       }
     },
     methods: {
       observeSticky() {
-        const observe = (e) => this.initFixedCells('left').concat(this.initFixedCells('right'));
         for (let ob of this.sticky.observers) {
           ob.disconnect();
         }
         let observers = [];
-        $$1.lodash.each(observe(), cell => {
-          let ob = new ResizeObserver$1(observe);
+        $$1.lodash.each(this.initFixedCells(), cell => {
+          let ob = new ResizeObserver$1(this.setFixedStyle);
           ob.observe(cell);
           observers.push(ob);
         });
         this.sticky.observers = observers;
       },
-      initFixedCells(dir) {
+      setFixedStyle() {
+        this.initFixedCells();
+        let r = {};
+        if (this.sticky.left) {
+          this.sticky.left.forEach(v => r[`--w-td-fixed-left-${v.colIndex}`] = `${v.offset}px`);
+        }
+        if (this.sticky.right) {
+          this.sticky.right.forEach(v => r[`--w-td-fixed-right-${v.colIndex}`] = `${v.offset}px`);
+        }
+        if (this.$el) {
+          for (let k in r) {
+            this.$el.style.setProperty(k, r[k]);
+          }
+        }
+      },
+      initFixedCells() {
+        return this.getFixedCells('left').concat(this.getFixedCells('right'))
+      },
+      getFixedCells(dir) {
         let sticky = null;
         let offset = 0;
         let fixedCells = $$1.lodash.map(this.$el.querySelector(`thead`).querySelectorAll(`td[w-fixed="${dir}"]`));
-        if (dir === 'right') fixedCells.reverse();
+        if (dir === 'right') {
+          fixedCells.reverse();
+        }
         fixedCells.forEach(td => {
           (sticky || (sticky = [])).push({colIndex: td.cellIndex, offset});
           offset += td.offsetWidth;
@@ -5072,7 +5079,7 @@ var script$_ = {
       colgroup() {
         return $$1.slotsChildren(this.slotHooks.columns.children).map(v => v.props)
       },
-      hasSticky() {
+      stickyState() {
         let s = '';
         for (let col of this.colgroup) {
           if (col.fixed) s += col.fixed;
@@ -5082,15 +5089,27 @@ var script$_ = {
       html_class() {
         return ['f-flex-column', this.x.face && 'z-face-' + this.x.face]
       },
-      html_style() {
-        let r = {};
-        if (this.sticky.left) {
-          this.sticky.left.forEach(v => r[`--w-td-fixed-left-${v.colIndex}`] = `${v.offset}px`);
-        }
-        if (this.sticky.right) {
-          this.sticky.right.forEach(v => r[`--w-td-fixed-right-${v.colIndex}`] = `${v.offset}px`);
-        }
-        return r
+      // html_style() {
+      //   let r = {}
+      //   if (this.sticky.left) {
+      //     this.sticky.left.forEach(v => r[`--w-td-fixed-left-${v.colIndex}`] = `${v.offset}px`)
+      //   }
+      //   if (this.sticky.right) {
+      //     this.sticky.right.forEach(v => r[`--w-td-fixed-right-${v.colIndex}`] = `${v.offset}px`)
+      //   }
+      //   return r
+      // }
+    },
+    mounted() {
+      this.$watch('stickyState', (v) => {
+        this.$nextTick(() => this.observeSticky());
+      }, {immediate: true});
+      this.$el.setAttribute('w-scroll-x', 'left');
+      if ($$1.br.chrome && $$1.br.chrome <= 60) { //低版本谷歌表格宽度有变化时，sticky的td内容会不可见。因此执行一个强制重新渲染的步骤
+        new ResizeObserver$1(() => {
+          this.$el.setAttribute('w-compact-resize-sticky', '');
+          requestAnimationFrame(() => this.$el.removeAttribute('w-compact-resize-sticky'));
+        }).observe(this.$el);
       }
     }
   };
@@ -5216,7 +5235,7 @@ var script$V = {
             style.minWidth = $$1.unitSize(mw);
           }
         }
-        this.rows = {};
+        this.rows = markRaw({});
         return h('div', {
           class: 'w-table-tbl-wrap'
         }, h('table', {
@@ -5306,7 +5325,7 @@ var script$U = {
           });
         }
       },
-      html_slots() {
+      html_slots() {        
         return this.html_scroll_slots(this.html_tbody())
       }
     },