@zeedhi/vuetify 1.100.2 → 1.101.0

package/dist/zd-vuetify.esm.js

@@ -39461,13 +39461,33 @@ let ZdCarousel = class ZdCarousel extends ZdComponentRender$1 {
         if (this.instance.fillHeight) {
             setFillHeight(this.$el);
         }
+        this.setViewUpdate();
+        this.addResizeObserver();
+    }
+    destroyed() {
+        this.removeObserver();
+    }
+    /**
+     * addResizeObserver
+     */
+    addResizeObserver() {
+        this.resizeObserver = new ResizeObserver(() => {
+            this.carousel.update();
+        });
+        this.resizeObserver.observe(this.carousel.$el);
+    }
+    /**
+     * removeObserver
+     */
+    removeObserver() {
+        this.resizeObserver.disconnect();
+    }
+    setViewUpdate() {
+        this.instance.setViewUpdate(this.carousel.update);
     }
     get paginationMode() {
         return this.instance.fractionPagination ? 'fraction' : undefined;
     }
-    forceRerender() {
-        this.hooperKey += 1;
-    }
     beforeSlide(slideData) {
         this.instance.beforeSlide(this.$el, slideData, this.lastEvent);
         this.$emit('beforeSlide', this.lastEvent);
@@ -39489,16 +39509,6 @@ let ZdCarousel = class ZdCarousel extends ZdComponentRender$1 {
             this.carousel.slideTo(newVal);
         }
     }
-    /**
-     * If children changes, rerender hooper carousel
-     * @param _newVal new children object value
-     * @param oldVal old children object value
-     */
-    update(_newVal, oldVal) {
-        if (oldVal) {
-            this.forceRerender();
-        }
-    }
     /**
      * If carousel becomes visible, restart hooper slides
      * @param newVal new children object value
@@ -39659,12 +39669,6 @@ __decorate([
     __metadata("design:paramtypes", [Number]),
     __metadata("design:returntype", void 0)
 ], ZdCarousel.prototype, "changeCurrentSlide", null);
-__decorate([
-    Watch('instance.children', { deep: true }),
-    __metadata("design:type", Function),
-    __metadata("design:paramtypes", [Array, Array]),
-    __metadata("design:returntype", void 0)
-], ZdCarousel.prototype, "update", null);
 __decorate([
     Watch('instance.isVisible'),
     __metadata("design:type", Function),
@@ -39731,7 +39735,6 @@ var __vue_render__$1u = function () {
                   _c(
                     "hooper",
                     {
-                      key: _vm.hooperKey,
                       ref: "carousel",
                       style: {
                         height: "100%",
@@ -39813,7 +39816,7 @@ var __vue_render__$1u = function () {
                             _c(
                               item.component,
                               _vm._b(
-                                { tag: "component" },
+                                { key: item.name, tag: "component" },
                                 "component",
                                 item,
                                 false
@@ -39996,7 +39999,7 @@ __vue_render__$1u._withStripped = true;
   /* style */
   const __vue_inject_styles__$1u = function (inject) {
     if (!inject) return
-    inject("data-v-6fdfda82_0", { source: ".zd-carousel {\n  height: 100%;\n}\n.zd-carousel section.hooper {\n  outline: none;\n}\n.zd-carousel section.hooper * {\n  outline: none;\n}\n.zd-carousel section.hooper .hooper-list .hooper-slide {\n  align-self: center;\n}\n.zd-carousel section.hooper .hooper-list .hooper-slide > .row {\n  height: 100%;\n  align-items: center;\n}\n.zd-carousel section.hooper .hooper-list .hooper-pagination {\n  padding: 0;\n  width: 100%;\n  height: 50px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\n.zd-carousel section.hooper .hooper-list .hooper-pagination .hooper-indicators {\n  margin: 0 auto;\n  display: block;\n}\n.zd-carousel section.hooper .hooper-list .hooper-pagination .hooper-indicators li {\n  display: inline-block;\n  margin: 0 var(--spacing-2);\n}\n.zd-carousel section.hooper .hooper-list .hooper-pagination .hooper-indicators li .hooper-indicator {\n  width: 18px;\n  height: 18px;\n  border-radius: 50%;\n}\n.zd-carousel section.hooper .hooper-list .hooper-pagination.show-background {\n  background: rgba(0, 0, 0, 0.3);\n}\n.zd-carousel section.hooper .hooper-list .hooper-pagination.theme--light .hooper-indicator {\n  opacity: 0.25;\n  background-color: black;\n}\n.zd-carousel section.hooper .hooper-list .hooper-pagination.theme--light .hooper-indicator.is-active {\n  opacity: 0.6;\n}\n.zd-carousel section.hooper .hooper-list .hooper-pagination.theme--light .hooper-indicator:hover:not(.is-active) {\n  opacity: 0.4;\n}\n.zd-carousel section.hooper .hooper-list .hooper-pagination.theme--dark {\n  color: white;\n}\n.zd-carousel section.hooper .hooper-list .hooper-pagination.theme--dark .hooper-indicator {\n  opacity: 0.5;\n  background-color: white;\n}\n.zd-carousel section.hooper .hooper-list .hooper-pagination.theme--dark .hooper-indicator.is-active {\n  opacity: 0.8;\n}\n.zd-carousel section.hooper .hooper-list .hooper-pagination.theme--dark .hooper-indicator:hover:not(.is-active) {\n  opacity: 0.6;\n}\n.zd-carousel section.hooper .hooper-list button.hooper-prev {\n  padding: 0;\n}\n.zd-carousel section.hooper .hooper-list button.hooper-next {\n  padding: 0;\n}\n.zd-carousel section.hooper .hooper-list .prev-button, .zd-carousel section.hooper .hooper-list .next-button {\n  transition: 0.1s;\n}\n.zd-carousel section.hooper .hooper-list ul.hooper-track, .zd-carousel section.hooper .hooper-list ol.hooper-indicators {\n  padding-left: 0;\n}\n.zd-carousel section.hooper .hooper-list .hooper-progress-inner {\n  background-color: var(--v-primary-base);\n}\n.zd-carousel.buttons-outside section.hooper {\n  width: calc(100% - 2 * var(--spacing-8));\n  margin-left: var(--spacing-8);\n}\n.zd-carousel.buttons-outside section.hooper .hooper-list .hooper-navigation button.hooper-prev {\n  left: calc(-1 * var(--spacing-8));\n}\n.zd-carousel.buttons-outside section.hooper .hooper-list .hooper-navigation button.hooper-next {\n  right: calc(-1 * var(--spacing-8));\n}", map: undefined, media: undefined });
+    inject("data-v-302f5b51_0", { source: ".zd-carousel {\n  height: 100%;\n}\n.zd-carousel section.hooper {\n  outline: none;\n}\n.zd-carousel section.hooper * {\n  outline: none;\n}\n.zd-carousel section.hooper .hooper-list .hooper-slide {\n  align-self: center;\n}\n.zd-carousel section.hooper .hooper-list .hooper-slide > .row {\n  height: 100%;\n  align-items: center;\n}\n.zd-carousel section.hooper .hooper-list .hooper-pagination {\n  padding: 0;\n  width: 100%;\n  height: 50px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\n.zd-carousel section.hooper .hooper-list .hooper-pagination .hooper-indicators {\n  margin: 0 auto;\n  display: block;\n}\n.zd-carousel section.hooper .hooper-list .hooper-pagination .hooper-indicators li {\n  display: inline-block;\n  margin: 0 var(--spacing-2);\n}\n.zd-carousel section.hooper .hooper-list .hooper-pagination .hooper-indicators li .hooper-indicator {\n  width: 18px;\n  height: 18px;\n  border-radius: 50%;\n}\n.zd-carousel section.hooper .hooper-list .hooper-pagination.show-background {\n  background: rgba(0, 0, 0, 0.3);\n}\n.zd-carousel section.hooper .hooper-list .hooper-pagination.theme--light .hooper-indicator {\n  opacity: 0.25;\n  background-color: black;\n}\n.zd-carousel section.hooper .hooper-list .hooper-pagination.theme--light .hooper-indicator.is-active {\n  opacity: 0.6;\n}\n.zd-carousel section.hooper .hooper-list .hooper-pagination.theme--light .hooper-indicator:hover:not(.is-active) {\n  opacity: 0.4;\n}\n.zd-carousel section.hooper .hooper-list .hooper-pagination.theme--dark {\n  color: white;\n}\n.zd-carousel section.hooper .hooper-list .hooper-pagination.theme--dark .hooper-indicator {\n  opacity: 0.5;\n  background-color: white;\n}\n.zd-carousel section.hooper .hooper-list .hooper-pagination.theme--dark .hooper-indicator.is-active {\n  opacity: 0.8;\n}\n.zd-carousel section.hooper .hooper-list .hooper-pagination.theme--dark .hooper-indicator:hover:not(.is-active) {\n  opacity: 0.6;\n}\n.zd-carousel section.hooper .hooper-list button.hooper-prev {\n  padding: 0;\n}\n.zd-carousel section.hooper .hooper-list button.hooper-next {\n  padding: 0;\n}\n.zd-carousel section.hooper .hooper-list .prev-button, .zd-carousel section.hooper .hooper-list .next-button {\n  transition: 0.1s;\n}\n.zd-carousel section.hooper .hooper-list ul.hooper-track, .zd-carousel section.hooper .hooper-list ol.hooper-indicators {\n  padding-left: 0;\n}\n.zd-carousel section.hooper .hooper-list .hooper-progress-inner {\n  background-color: var(--v-primary-base);\n}\n.zd-carousel.buttons-outside section.hooper {\n  width: calc(100% - 2 * var(--spacing-8));\n  margin-left: var(--spacing-8);\n}\n.zd-carousel.buttons-outside section.hooper .hooper-list .hooper-navigation button.hooper-prev {\n  left: calc(-1 * var(--spacing-8));\n}\n.zd-carousel.buttons-outside section.hooper .hooper-list .hooper-navigation button.hooper-next {\n  right: calc(-1 * var(--spacing-8));\n}", map: undefined, media: undefined });
 
   };
   /* scoped */
@@ -45540,7 +45543,9 @@ let ZdIterable = class ZdIterable extends ZdComponentRender$1 {
         }
     }
     changeData(data) {
-        this.instance.changeData(data);
+        setTimeout(() => {
+            this.instance.changeData(data);
+        });
     }
     rowKey(item) {
         return item[this.instance.datasource.uniqueKey];
@@ -46042,6 +46047,36 @@ let ZdGrid = class ZdGrid extends ZdIterable$1 {
         if (this.instance.fillHeight) {
             setFillHeight(this.$el);
         }
+        this.registerTrObserver();
+    }
+    /**
+     * Register a mutation observer for the table TR
+     * this observer should call updateFixedColumns whenever the
+     * number of columns inside the table changes \
+     * This also takes into account columns that gets hidden via isVisible
+     */
+    registerTrObserver() {
+        const table = this.$el.querySelector('table');
+        if (!table)
+            return;
+        const targetRow = table.querySelector('tr');
+        if (!targetRow)
+            return;
+        this.observer = new MutationObserver((mutations) => {
+            mutations.forEach((mutation) => {
+                if (mutation.type === 'childList'
+                    && mutation.target instanceof Element
+                    && mutation.target.tagName === 'TR') {
+                    this.updateFixedColumns();
+                }
+            });
+        });
+        this.observer.observe(targetRow, {
+            childList: true,
+        });
+    }
+    beforeDestroy() {
+        this.observer.disconnect();
     }
     setViewGetWidth() {
         this.instance.columns.forEach((column) => {
@@ -47409,6 +47444,10 @@ __decorate([
     PropWatch({ type: [Boolean, String], default: false }),
     __metadata("design:type", Object)
 ], ZdGridEditable.prototype, "singleEdit", void 0);
+__decorate([
+    PropWatch({ type: [Boolean, String], default: false }),
+    __metadata("design:type", Object)
+], ZdGridEditable.prototype, "showCancelColumn", void 0);
 ZdGridEditable = __decorate([
     Component$2({
         mixins: [EditableMixin$1, NavigableTableMixin$1],
@@ -48997,7 +49036,7 @@ __vue_render__$12._withStripped = true;
   /* style */
   const __vue_inject_styles__$12 = function (inject) {
     if (!inject) return
-    inject("data-v-eec1bcda_0", { source: "\n.zd-grid-action {\n  height: 100%;\n  display: flex;\n}\n", map: undefined, media: undefined });
+    inject("data-v-05e1c745_0", { source: "\n.zd-grid-action {\n  height: 100%;\n  display: flex;\n  align-items: center;\n}\n", map: undefined, media: undefined });
 
   };
   /* scoped */
@@ -54375,6 +54414,7 @@ let ZdMenu = class ZdMenu extends ZdComponentRender$1 {
             showHelper: false,
             showLabel: false,
             placeholder: 'SEARCH',
+            autofill: false,
             appendIcon: 'magnify',
             events: {
                 input: debounce$1(this.doSearch, 500),
@@ -55338,7 +55378,40 @@ let ZdModal = class ZdModal extends ZdComponent$1 {
         const el = (Array.isArray(ref) ? ref[0].$el : ref === null || ref === void 0 ? void 0 : ref.$el);
         return el || null;
     }
+    /**
+     * Register all modal event listeners
+     */
+    registerEvents(modal) {
+        this.registerTransitionEvents(modal);
+        this.registerDragEvents(modal);
+    }
+    registerTransitionEvents(modal) {
+        const el = this.getModalEl(modal);
+        if (!el || !el.parentElement)
+            return;
+        el.parentElement.addEventListener('transitionstart', (event) => {
+            // prevent triggering when the event is being propagated from a child element
+            if (event.target !== el.parentElement)
+                return;
+            modal.transitionStart(event);
+        });
+        el.parentElement.addEventListener('transitionend', (event) => {
+            // prevent triggering when the event is being propagated from a child element
+            if (event.target !== el.parentElement)
+                return;
+            modal.transitionEnd(event);
+        });
+    }
+    /**
+     * Unregister all modal event listeners
+     */
+    unregisterEvents(modal) {
+        this.unregisterDragEvents(modal);
+        this.unregisterTransitionEvents(modal);
+    }
     registerDragEvents(modal) {
+        if (!modal.draggable)
+            return;
         const el = this.getModalEl(modal);
         if (!el)
             return;
@@ -55353,6 +55426,13 @@ let ZdModal = class ZdModal extends ZdComponent$1 {
         this.dragHandle.addEventListener('mousedown', this.dragStart.bind(this, modal));
         this.dragHandle.addEventListener('touchstart', this.dragStart.bind(this, modal), { passive: false });
     }
+    unregisterTransitionEvents(modal) {
+        const el = this.getModalEl(modal);
+        if (!el || !el.parentElement)
+            return;
+        el.parentElement.removeEventListener('transitionstart', modal.transitionStart);
+        el.parentElement.removeEventListener('transitionend', modal.transitionEnd);
+    }
     unregisterDragEvents(modal) {
         if (!this.dragHandle)
             return;
@@ -55530,10 +55610,10 @@ var __vue_render__$u = function () {
               style: modal.cssStyle,
               on: {
                 "hook:mounted": function ($event) {
-                  modal.draggable && _vm.registerDragEvents(modal);
+                  return _vm.registerEvents(modal)
                 },
                 "hook:destroyed": function ($event) {
-                  return _vm.unregisterDragEvents(modal)
+                  return _vm.unregisterEvents(modal)
                 },
               },
             },
@@ -55597,7 +55677,7 @@ __vue_render__$u._withStripped = true;
   /* style */
   const __vue_inject_styles__$u = function (inject) {
     if (!inject) return
-    inject("data-v-12867ee3_0", { source: ".zd-modal-title {\n  padding-bottom: 0px;\n}\n.zd-modal-container {\n  padding: 0;\n  cursor: default;\n}\n.zd-modal-flex {\n  width: 100%;\n}\n.zd-modal-draggable {\n  position: relative;\n}\n.zd-modal-draggable-handle {\n  cursor: grab;\n  cursor: -moz-grab;\n  cursor: -webkit-grab;\n}\n.zd-modal-draggable-handle:active {\n  cursor: grabbing;\n  cursor: -moz-grabbing;\n  cursor: -webkit-grabbing;\n}\n.zd-modal-content > .zd-modal-card > .zd-modal-title {\n  padding: var(--zd-default-padding);\n  padding-bottom: 0px;\n  font-size: var(--zd-font-title-size);\n  font-weight: var(--zd-font-title-weight);\n  color: var(--zd-font-color);\n}\n.zd-modal-content > .zd-modal-card > .zd-modal-card-text {\n  padding: var(--zd-default-padding);\n  display: flex;\n  flex: 1 1 auto;\n}", map: undefined, media: undefined });
+    inject("data-v-3de0e7d7_0", { source: ".zd-modal-title {\n  padding-bottom: 0px;\n}\n.zd-modal-container {\n  padding: 0;\n  cursor: default;\n}\n.zd-modal-flex {\n  width: 100%;\n}\n.zd-modal-draggable {\n  position: relative;\n}\n.zd-modal-draggable-handle {\n  cursor: grab;\n  cursor: -moz-grab;\n  cursor: -webkit-grab;\n}\n.zd-modal-draggable-handle:active {\n  cursor: grabbing;\n  cursor: -moz-grabbing;\n  cursor: -webkit-grabbing;\n}\n.zd-modal-content > .zd-modal-card > .zd-modal-title {\n  padding: var(--zd-default-padding);\n  padding-bottom: 0px;\n  font-size: var(--zd-font-title-size);\n  font-weight: var(--zd-font-title-weight);\n  color: var(--zd-font-color);\n}\n.zd-modal-content > .zd-modal-card > .zd-modal-card-text {\n  padding: var(--zd-default-padding);\n  display: flex;\n  flex: 1 1 auto;\n}", map: undefined, media: undefined });
 
   };
   /* scoped */

package/dist/zd-vuetify.umd.js

@@ -39460,13 +39460,33 @@ If you're seeing "$attrs is readonly", it's caused by this`);
           if (this.instance.fillHeight) {
               setFillHeight(this.$el);
           }
+          this.setViewUpdate();
+          this.addResizeObserver();
+      }
+      destroyed() {
+          this.removeObserver();
+      }
+      /**
+       * addResizeObserver
+       */
+      addResizeObserver() {
+          this.resizeObserver = new ResizeObserver(() => {
+              this.carousel.update();
+          });
+          this.resizeObserver.observe(this.carousel.$el);
+      }
+      /**
+       * removeObserver
+       */
+      removeObserver() {
+          this.resizeObserver.disconnect();
+      }
+      setViewUpdate() {
+          this.instance.setViewUpdate(this.carousel.update);
       }
       get paginationMode() {
           return this.instance.fractionPagination ? 'fraction' : undefined;
       }
-      forceRerender() {
-          this.hooperKey += 1;
-      }
       beforeSlide(slideData) {
           this.instance.beforeSlide(this.$el, slideData, this.lastEvent);
           this.$emit('beforeSlide', this.lastEvent);
@@ -39488,16 +39508,6 @@ If you're seeing "$attrs is readonly", it's caused by this`);
               this.carousel.slideTo(newVal);
           }
       }
-      /**
-       * If children changes, rerender hooper carousel
-       * @param _newVal new children object value
-       * @param oldVal old children object value
-       */
-      update(_newVal, oldVal) {
-          if (oldVal) {
-              this.forceRerender();
-          }
-      }
       /**
        * If carousel becomes visible, restart hooper slides
        * @param newVal new children object value
@@ -39658,12 +39668,6 @@ If you're seeing "$attrs is readonly", it's caused by this`);
       __metadata("design:paramtypes", [Number]),
       __metadata("design:returntype", void 0)
   ], ZdCarousel.prototype, "changeCurrentSlide", null);
-  __decorate([
-      vuePropertyDecorator.Watch('instance.children', { deep: true }),
-      __metadata("design:type", Function),
-      __metadata("design:paramtypes", [Array, Array]),
-      __metadata("design:returntype", void 0)
-  ], ZdCarousel.prototype, "update", null);
   __decorate([
       vuePropertyDecorator.Watch('instance.isVisible'),
       __metadata("design:type", Function),
@@ -39730,7 +39734,6 @@ If you're seeing "$attrs is readonly", it's caused by this`);
                     _c(
                       "hooper",
                       {
-                        key: _vm.hooperKey,
                         ref: "carousel",
                         style: {
                           height: "100%",
@@ -39812,7 +39815,7 @@ If you're seeing "$attrs is readonly", it's caused by this`);
                               _c(
                                 item.component,
                                 _vm._b(
-                                  { tag: "component" },
+                                  { key: item.name, tag: "component" },
                                   "component",
                                   item,
                                   false
@@ -39995,7 +39998,7 @@ If you're seeing "$attrs is readonly", it's caused by this`);
     /* style */
     const __vue_inject_styles__$1u = function (inject) {
       if (!inject) return
-      inject("data-v-6fdfda82_0", { source: ".zd-carousel {\n  height: 100%;\n}\n.zd-carousel section.hooper {\n  outline: none;\n}\n.zd-carousel section.hooper * {\n  outline: none;\n}\n.zd-carousel section.hooper .hooper-list .hooper-slide {\n  align-self: center;\n}\n.zd-carousel section.hooper .hooper-list .hooper-slide > .row {\n  height: 100%;\n  align-items: center;\n}\n.zd-carousel section.hooper .hooper-list .hooper-pagination {\n  padding: 0;\n  width: 100%;\n  height: 50px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\n.zd-carousel section.hooper .hooper-list .hooper-pagination .hooper-indicators {\n  margin: 0 auto;\n  display: block;\n}\n.zd-carousel section.hooper .hooper-list .hooper-pagination .hooper-indicators li {\n  display: inline-block;\n  margin: 0 var(--spacing-2);\n}\n.zd-carousel section.hooper .hooper-list .hooper-pagination .hooper-indicators li .hooper-indicator {\n  width: 18px;\n  height: 18px;\n  border-radius: 50%;\n}\n.zd-carousel section.hooper .hooper-list .hooper-pagination.show-background {\n  background: rgba(0, 0, 0, 0.3);\n}\n.zd-carousel section.hooper .hooper-list .hooper-pagination.theme--light .hooper-indicator {\n  opacity: 0.25;\n  background-color: black;\n}\n.zd-carousel section.hooper .hooper-list .hooper-pagination.theme--light .hooper-indicator.is-active {\n  opacity: 0.6;\n}\n.zd-carousel section.hooper .hooper-list .hooper-pagination.theme--light .hooper-indicator:hover:not(.is-active) {\n  opacity: 0.4;\n}\n.zd-carousel section.hooper .hooper-list .hooper-pagination.theme--dark {\n  color: white;\n}\n.zd-carousel section.hooper .hooper-list .hooper-pagination.theme--dark .hooper-indicator {\n  opacity: 0.5;\n  background-color: white;\n}\n.zd-carousel section.hooper .hooper-list .hooper-pagination.theme--dark .hooper-indicator.is-active {\n  opacity: 0.8;\n}\n.zd-carousel section.hooper .hooper-list .hooper-pagination.theme--dark .hooper-indicator:hover:not(.is-active) {\n  opacity: 0.6;\n}\n.zd-carousel section.hooper .hooper-list button.hooper-prev {\n  padding: 0;\n}\n.zd-carousel section.hooper .hooper-list button.hooper-next {\n  padding: 0;\n}\n.zd-carousel section.hooper .hooper-list .prev-button, .zd-carousel section.hooper .hooper-list .next-button {\n  transition: 0.1s;\n}\n.zd-carousel section.hooper .hooper-list ul.hooper-track, .zd-carousel section.hooper .hooper-list ol.hooper-indicators {\n  padding-left: 0;\n}\n.zd-carousel section.hooper .hooper-list .hooper-progress-inner {\n  background-color: var(--v-primary-base);\n}\n.zd-carousel.buttons-outside section.hooper {\n  width: calc(100% - 2 * var(--spacing-8));\n  margin-left: var(--spacing-8);\n}\n.zd-carousel.buttons-outside section.hooper .hooper-list .hooper-navigation button.hooper-prev {\n  left: calc(-1 * var(--spacing-8));\n}\n.zd-carousel.buttons-outside section.hooper .hooper-list .hooper-navigation button.hooper-next {\n  right: calc(-1 * var(--spacing-8));\n}", map: undefined, media: undefined });
+      inject("data-v-302f5b51_0", { source: ".zd-carousel {\n  height: 100%;\n}\n.zd-carousel section.hooper {\n  outline: none;\n}\n.zd-carousel section.hooper * {\n  outline: none;\n}\n.zd-carousel section.hooper .hooper-list .hooper-slide {\n  align-self: center;\n}\n.zd-carousel section.hooper .hooper-list .hooper-slide > .row {\n  height: 100%;\n  align-items: center;\n}\n.zd-carousel section.hooper .hooper-list .hooper-pagination {\n  padding: 0;\n  width: 100%;\n  height: 50px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\n.zd-carousel section.hooper .hooper-list .hooper-pagination .hooper-indicators {\n  margin: 0 auto;\n  display: block;\n}\n.zd-carousel section.hooper .hooper-list .hooper-pagination .hooper-indicators li {\n  display: inline-block;\n  margin: 0 var(--spacing-2);\n}\n.zd-carousel section.hooper .hooper-list .hooper-pagination .hooper-indicators li .hooper-indicator {\n  width: 18px;\n  height: 18px;\n  border-radius: 50%;\n}\n.zd-carousel section.hooper .hooper-list .hooper-pagination.show-background {\n  background: rgba(0, 0, 0, 0.3);\n}\n.zd-carousel section.hooper .hooper-list .hooper-pagination.theme--light .hooper-indicator {\n  opacity: 0.25;\n  background-color: black;\n}\n.zd-carousel section.hooper .hooper-list .hooper-pagination.theme--light .hooper-indicator.is-active {\n  opacity: 0.6;\n}\n.zd-carousel section.hooper .hooper-list .hooper-pagination.theme--light .hooper-indicator:hover:not(.is-active) {\n  opacity: 0.4;\n}\n.zd-carousel section.hooper .hooper-list .hooper-pagination.theme--dark {\n  color: white;\n}\n.zd-carousel section.hooper .hooper-list .hooper-pagination.theme--dark .hooper-indicator {\n  opacity: 0.5;\n  background-color: white;\n}\n.zd-carousel section.hooper .hooper-list .hooper-pagination.theme--dark .hooper-indicator.is-active {\n  opacity: 0.8;\n}\n.zd-carousel section.hooper .hooper-list .hooper-pagination.theme--dark .hooper-indicator:hover:not(.is-active) {\n  opacity: 0.6;\n}\n.zd-carousel section.hooper .hooper-list button.hooper-prev {\n  padding: 0;\n}\n.zd-carousel section.hooper .hooper-list button.hooper-next {\n  padding: 0;\n}\n.zd-carousel section.hooper .hooper-list .prev-button, .zd-carousel section.hooper .hooper-list .next-button {\n  transition: 0.1s;\n}\n.zd-carousel section.hooper .hooper-list ul.hooper-track, .zd-carousel section.hooper .hooper-list ol.hooper-indicators {\n  padding-left: 0;\n}\n.zd-carousel section.hooper .hooper-list .hooper-progress-inner {\n  background-color: var(--v-primary-base);\n}\n.zd-carousel.buttons-outside section.hooper {\n  width: calc(100% - 2 * var(--spacing-8));\n  margin-left: var(--spacing-8);\n}\n.zd-carousel.buttons-outside section.hooper .hooper-list .hooper-navigation button.hooper-prev {\n  left: calc(-1 * var(--spacing-8));\n}\n.zd-carousel.buttons-outside section.hooper .hooper-list .hooper-navigation button.hooper-next {\n  right: calc(-1 * var(--spacing-8));\n}", map: undefined, media: undefined });
 
     };
     /* scoped */
@@ -45539,7 +45542,9 @@ If you're seeing "$attrs is readonly", it's caused by this`);
           }
       }
       changeData(data) {
-          this.instance.changeData(data);
+          setTimeout(() => {
+              this.instance.changeData(data);
+          });
       }
       rowKey(item) {
           return item[this.instance.datasource.uniqueKey];
@@ -46041,6 +46046,36 @@ If you're seeing "$attrs is readonly", it's caused by this`);
           if (this.instance.fillHeight) {
               setFillHeight(this.$el);
           }
+          this.registerTrObserver();
+      }
+      /**
+       * Register a mutation observer for the table TR
+       * this observer should call updateFixedColumns whenever the
+       * number of columns inside the table changes \
+       * This also takes into account columns that gets hidden via isVisible
+       */
+      registerTrObserver() {
+          const table = this.$el.querySelector('table');
+          if (!table)
+              return;
+          const targetRow = table.querySelector('tr');
+          if (!targetRow)
+              return;
+          this.observer = new MutationObserver((mutations) => {
+              mutations.forEach((mutation) => {
+                  if (mutation.type === 'childList'
+                      && mutation.target instanceof Element
+                      && mutation.target.tagName === 'TR') {
+                      this.updateFixedColumns();
+                  }
+              });
+          });
+          this.observer.observe(targetRow, {
+              childList: true,
+          });
+      }
+      beforeDestroy() {
+          this.observer.disconnect();
       }
       setViewGetWidth() {
           this.instance.columns.forEach((column) => {
@@ -47408,6 +47443,10 @@ If you're seeing "$attrs is readonly", it's caused by this`);
       PropWatch({ type: [Boolean, String], default: false }),
       __metadata("design:type", Object)
   ], ZdGridEditable.prototype, "singleEdit", void 0);
+  __decorate([
+      PropWatch({ type: [Boolean, String], default: false }),
+      __metadata("design:type", Object)
+  ], ZdGridEditable.prototype, "showCancelColumn", void 0);
   ZdGridEditable = __decorate([
       Component__default["default"]({
           mixins: [EditableMixin$1, NavigableTableMixin$1],
@@ -48996,7 +49035,7 @@ If you're seeing "$attrs is readonly", it's caused by this`);
     /* style */
     const __vue_inject_styles__$12 = function (inject) {
       if (!inject) return
-      inject("data-v-eec1bcda_0", { source: "\n.zd-grid-action {\n  height: 100%;\n  display: flex;\n}\n", map: undefined, media: undefined });
+      inject("data-v-05e1c745_0", { source: "\n.zd-grid-action {\n  height: 100%;\n  display: flex;\n  align-items: center;\n}\n", map: undefined, media: undefined });
 
     };
     /* scoped */
@@ -54374,6 +54413,7 @@ If you're seeing "$attrs is readonly", it's caused by this`);
               showHelper: false,
               showLabel: false,
               placeholder: 'SEARCH',
+              autofill: false,
               appendIcon: 'magnify',
               events: {
                   input: debounce__default["default"](this.doSearch, 500),
@@ -55337,7 +55377,40 @@ If you're seeing "$attrs is readonly", it's caused by this`);
           const el = (Array.isArray(ref) ? ref[0].$el : ref === null || ref === void 0 ? void 0 : ref.$el);
           return el || null;
       }
+      /**
+       * Register all modal event listeners
+       */
+      registerEvents(modal) {
+          this.registerTransitionEvents(modal);
+          this.registerDragEvents(modal);
+      }
+      registerTransitionEvents(modal) {
+          const el = this.getModalEl(modal);
+          if (!el || !el.parentElement)
+              return;
+          el.parentElement.addEventListener('transitionstart', (event) => {
+              // prevent triggering when the event is being propagated from a child element
+              if (event.target !== el.parentElement)
+                  return;
+              modal.transitionStart(event);
+          });
+          el.parentElement.addEventListener('transitionend', (event) => {
+              // prevent triggering when the event is being propagated from a child element
+              if (event.target !== el.parentElement)
+                  return;
+              modal.transitionEnd(event);
+          });
+      }
+      /**
+       * Unregister all modal event listeners
+       */
+      unregisterEvents(modal) {
+          this.unregisterDragEvents(modal);
+          this.unregisterTransitionEvents(modal);
+      }
       registerDragEvents(modal) {
+          if (!modal.draggable)
+              return;
           const el = this.getModalEl(modal);
           if (!el)
               return;
@@ -55352,6 +55425,13 @@ If you're seeing "$attrs is readonly", it's caused by this`);
           this.dragHandle.addEventListener('mousedown', this.dragStart.bind(this, modal));
           this.dragHandle.addEventListener('touchstart', this.dragStart.bind(this, modal), { passive: false });
       }
+      unregisterTransitionEvents(modal) {
+          const el = this.getModalEl(modal);
+          if (!el || !el.parentElement)
+              return;
+          el.parentElement.removeEventListener('transitionstart', modal.transitionStart);
+          el.parentElement.removeEventListener('transitionend', modal.transitionEnd);
+      }
       unregisterDragEvents(modal) {
           if (!this.dragHandle)
               return;
@@ -55529,10 +55609,10 @@ If you're seeing "$attrs is readonly", it's caused by this`);
                 style: modal.cssStyle,
                 on: {
                   "hook:mounted": function ($event) {
-                    modal.draggable && _vm.registerDragEvents(modal);
+                    return _vm.registerEvents(modal)
                   },
                   "hook:destroyed": function ($event) {
-                    return _vm.unregisterDragEvents(modal)
+                    return _vm.unregisterEvents(modal)
                   },
                 },
               },
@@ -55596,7 +55676,7 @@ If you're seeing "$attrs is readonly", it's caused by this`);
     /* style */
     const __vue_inject_styles__$u = function (inject) {
       if (!inject) return
-      inject("data-v-12867ee3_0", { source: ".zd-modal-title {\n  padding-bottom: 0px;\n}\n.zd-modal-container {\n  padding: 0;\n  cursor: default;\n}\n.zd-modal-flex {\n  width: 100%;\n}\n.zd-modal-draggable {\n  position: relative;\n}\n.zd-modal-draggable-handle {\n  cursor: grab;\n  cursor: -moz-grab;\n  cursor: -webkit-grab;\n}\n.zd-modal-draggable-handle:active {\n  cursor: grabbing;\n  cursor: -moz-grabbing;\n  cursor: -webkit-grabbing;\n}\n.zd-modal-content > .zd-modal-card > .zd-modal-title {\n  padding: var(--zd-default-padding);\n  padding-bottom: 0px;\n  font-size: var(--zd-font-title-size);\n  font-weight: var(--zd-font-title-weight);\n  color: var(--zd-font-color);\n}\n.zd-modal-content > .zd-modal-card > .zd-modal-card-text {\n  padding: var(--zd-default-padding);\n  display: flex;\n  flex: 1 1 auto;\n}", map: undefined, media: undefined });
+      inject("data-v-3de0e7d7_0", { source: ".zd-modal-title {\n  padding-bottom: 0px;\n}\n.zd-modal-container {\n  padding: 0;\n  cursor: default;\n}\n.zd-modal-flex {\n  width: 100%;\n}\n.zd-modal-draggable {\n  position: relative;\n}\n.zd-modal-draggable-handle {\n  cursor: grab;\n  cursor: -moz-grab;\n  cursor: -webkit-grab;\n}\n.zd-modal-draggable-handle:active {\n  cursor: grabbing;\n  cursor: -moz-grabbing;\n  cursor: -webkit-grabbing;\n}\n.zd-modal-content > .zd-modal-card > .zd-modal-title {\n  padding: var(--zd-default-padding);\n  padding-bottom: 0px;\n  font-size: var(--zd-font-title-size);\n  font-weight: var(--zd-font-title-weight);\n  color: var(--zd-font-color);\n}\n.zd-modal-content > .zd-modal-card > .zd-modal-card-text {\n  padding: var(--zd-default-padding);\n  display: flex;\n  flex: 1 1 auto;\n}", map: undefined, media: undefined });
 
     };
     /* scoped */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zeedhi/vuetify",
-  "version": "1.100.2",
+  "version": "1.101.0",
   "description": "Zeedhi Components based on Vuetify",
   "author": "Zeedhi <zeedhi@teknisa.com>",
   "license": "ISC",
@@ -51,5 +51,5 @@
     "@types/prismjs": "1.26.*",
     "@types/sortablejs": "1.15.*"
   },
-  "gitHead": "2fb4d52eeebc36287dc335cb32601b6e4f55378f"
+  "gitHead": "a09f2851ece9c0011024e1cd69baba7a85b13130"
 }

package/types/components/zd-carousel/ZdCarousel.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="resize-observer-browser" />
 import { IButton, Carousel, ISlideData } from '@zeedhi/common';
 import ZdComponentRender from '../zd-component/ZdComponentRender';
 /**
@@ -39,20 +40,24 @@ export default class ZdCarousel extends ZdComponentRender {
     private lastEvent;
     created(): void;
     mounted(): void;
+    destroyed(): void;
+    resizeObserver: ResizeObserver;
+    /**
+     * addResizeObserver
+     */
+    addResizeObserver(): void;
+    /**
+     * removeObserver
+     */
+    removeObserver(): void;
+    setViewUpdate(): void;
     get paginationMode(): "fraction" | undefined;
-    forceRerender(): void;
     beforeSlide(slideData: ISlideData): void;
     slide(slideData: ISlideData): void;
     /**
      * Update component currentSlide if class currentSlide is changed
      */
     changeCurrentSlide(newVal: number): void;
-    /**
-     * If children changes, rerender hooper carousel
-     * @param _newVal new children object value
-     * @param oldVal old children object value
-     */
-    update(_newVal: any[], oldVal: any[]): void;
     /**
      * If carousel becomes visible, restart hooper slides
      * @param newVal new children object value

package/types/components/zd-grid/ZdGrid.d.ts

@@ -46,7 +46,16 @@ export default class ZdGrid extends ZdIterable {
      * Left distance for each column
      */
     fixedRight: IDictionary<string>;
+    observer: MutationObserver;
     mounted(): void;
+    /**
+     * Register a mutation observer for the table TR
+     * this observer should call updateFixedColumns whenever the
+     * number of columns inside the table changes \
+     * This also takes into account columns that gets hidden via isVisible
+     */
+    registerTrObserver(): void;
+    beforeDestroy(): void;
     private setViewGetWidth;
     orderHeaders(headers: Column[]): Column[];
     parseWidth(width?: string): number;

package/types/components/zd-grid/ZdGridEditable.d.ts

@@ -15,6 +15,7 @@ export default class ZdGridEditable extends ZdGrid {
     editNewRowsOnly: boolean | string;
     editingNewRows: boolean | string;
     singleEdit: boolean | string;
+    showCancelColumn: boolean | string;
     instance: GridEditable;
     instanceType: typeof GridEditable;
     isTrVisible: boolean;

package/types/components/zd-modal/ZdModal.d.ts

@@ -13,7 +13,17 @@ export default class ZdModal extends ZdComponent {
     protected dragHandle: HTMLElement | null;
     protected modalDragged?: Modal;
     getModalEl(modal: Modal): HTMLElement | null;
+    /**
+     * Register all modal event listeners
+     */
+    registerEvents(modal: Modal): void;
+    registerTransitionEvents(modal: Modal): void;
+    /**
+     * Unregister all modal event listeners
+     */
+    unregisterEvents(modal: Modal): void;
     registerDragEvents(modal: Modal): void;
+    unregisterTransitionEvents(modal: Modal): void;
     unregisterDragEvents(modal: Modal): void;
     private isTouchEvent;
     private getEventCoordinates;