goodteditor-ui 1.0.75 → 2.0.0

package/src/components/ui/InputDatePicker.vue

@@ -18,7 +18,7 @@
                 -->
                 <slot
                     name="input"
-                    v-bind="{ id: inputId, value, valueLabel, inputBinds, inputEvents }"
+                    v-bind="{ id: inputId, value: modelValue, valueLabel, inputBinds, inputEvents }"
                 >
                     <input
                         :id="inputId"
@@ -34,7 +34,7 @@
             @slot Custom clear icon slot
             @binding {Function} clear    function that clears the value
             -->
-            <slot name="clear" v-bind="{ clear }" v-if="value && value.length && allowClear">
+            <slot name="clear" v-bind="{ clear }" v-if="modelValue && modelValue.length && allowClear">
                 <div class="icon cursor-pointer w-auto h-auto mar-left-2" @click="clear">
                     <i class="mdi mdi-close"></i>
                 </div>
@@ -49,7 +49,7 @@
                 </div>
             </slot>
         </div>
-        <ui-popover :show.sync="popoverShow" v-bind="popoverOptions">
+        <ui-popover v-model:show="popoverShow" v-bind="popoverOptions">
             <date-picker
                 class="ui-input-date-picker-dp pull-left"
                 @change="onDpChange"
@@ -119,7 +119,7 @@ export default {
         /**
          * @model
          */
-        value: {
+        modelValue: {
             type: [String, Array],
             default: '',
         },
@@ -189,6 +189,7 @@ export default {
             },
         },
     },
+    emits: ['clear', 'change', 'set-date'],
     data() {
         return {
             date: null,
@@ -207,7 +208,7 @@ export default {
             return !!this.datepicker.range;
         },
         valueLabel() {
-            return Array.isArray(this.value) ? this.value.join(this.delimiter) : this.value;
+            return Array.isArray(this.modelValue) ? this.modelValue.join(this.delimiter) : this.modelValue;
         },
         inputBinds() {
             const { placeholder, readonly, editable } = this;
@@ -218,7 +219,7 @@ export default {
         }
     },
     watch: {
-        value: {
+        modelValue: {
             handler(val) {
                 this.inputValueRaw = val;
 
@@ -242,7 +243,7 @@ export default {
              * Input event
              * @property {String} date
              */
-            this.$emit('input', val ? [] : '');
+            this.$emit('update:modelValue', val ? [] : '');
         }
     },
     methods: {
@@ -251,7 +252,7 @@ export default {
              * Input event
              * @property {String} date
              */
-            this.$emit('input', this.isRange ? [] : '');
+            this.$emit('update:modelValue', this.isRange ? [] : '');
             /**
              * Clear event
              */
@@ -280,7 +281,7 @@ export default {
              * Input event
              * @property {String} date
              */
-            this.$emit('input', model);
+            this.$emit('update:modelValue', model);
             /**
              * Change event
              * @property {String|Array} value
@@ -314,7 +315,7 @@ export default {
              * Input event
              * @property {String} date
              */
-            this.$emit('input', model);
+            this.$emit('update:modelValue', model);
             /**
              * Change event
              * @property {String|Array} value

package/src/components/ui/InputTags.vue

@@ -1,12 +1,12 @@
 <template>
     <div class="ui-input-tags form-elem" :class="cssClass" @focus="onRootFocus" tabindex="0">
-        <div class="ui-input-tags-tags" v-if="value.length">
+        <div class="ui-input-tags-tags" v-if="modelValue.length">
             <!--
             @slot Tag slot
             @binding {String} tag       tag
             @binding {Function} remove  remove tag function(tag)
             -->
-            <slot name="tag" v-for="tag in value" v-bind="{ tag, remove: removeTag }">
+            <slot name="tag" v-for="tag in modelValue" v-bind="{ tag, remove: removeTag }">
                 <ui-badge
                     class="ui-input-tags-badge mar-none mar-right-2 mar-bot-2 pull-left cursor-pointer"
                     :class="{ 'ui-input-tags-badge--selected': tagSelected === tag }"
@@ -43,7 +43,7 @@
             <input
                 :id="inputId"
                 class="ui-input-tags-input w-100"
-                :class="{ 'mar-top-2': value.length }"
+                :class="{ 'mar-top-2': modelValue.length }"
                 type="text"
                 tabindex="-1"
                 :value="newTag"
@@ -94,7 +94,7 @@ export default {
         /**
          * @model
          */
-        value: {
+        modelValue: {
             type: Array,
             default() {
                 return [];
@@ -117,6 +117,7 @@ export default {
             default: ',',
         },
     },
+    emits: ['change'],
     data() {
         return {
             newTag: '',
@@ -143,18 +144,18 @@ export default {
         },
         addTag() {
             let newTags = this.valueFilter(
-                this.value,
+                this.modelValue,
                 this.newTag.split(this.delimiter).map(tag => tag.trim())
             );
             if (!newTags.length) {
                 return;
             }
-            let tags = [...this.value, ...newTags];
+            let tags = [...this.modelValue, ...newTags];
             /**
              * Input event
              * @property {Array} tags
              */
-            this.$emit('input', tags);
+            this.$emit('update:modelValue', tags);
             /**
              * Change event
              * @property {Array} tags
@@ -166,12 +167,12 @@ export default {
          * @param {string} tag
          */
         removeTag(tag) {
-            let tags = this.value.filter(t => t !== tag);
+            let tags = this.modelValue.filter(t => t !== tag);
             /**
              * Input event
              * @property {Array} tags
              */
-            this.$emit('input', tags);
+            this.$emit('update:modelValue', tags);
             /**
              * Change event
              * @property {Array} tags
@@ -213,20 +214,20 @@ export default {
          * @param {number} direction
          */
         selectTag(direction = -1) {
-            const lastIndex = this.value.length - 1;
+            const lastIndex = this.modelValue.length - 1;
             let tagSelected = this.tagSelected;
 
             if (tagSelected === null) {
-                tagSelected = this.value[lastIndex] ?? null;
+                tagSelected = this.modelValue[lastIndex] ?? null;
             } else {
-                let index = this.value.findIndex((tag) => tag === tagSelected) + direction;
+                let index = this.modelValue.findIndex((tag) => tag === tagSelected) + direction;
                 if (index > lastIndex) {
                     index = 0;
                 }
                 if (index < 0) {
                     index = lastIndex;
                 }
-                tagSelected = this.value[index];
+                tagSelected = this.modelValue[index];
             }
 
             if (tagSelected === null) {

package/src/components/ui/InputTimePicker.vue

@@ -15,12 +15,12 @@
                 @binding {Object} inputBinds    input props (use v-bind)
                 @binding {Object} inputEvents    input events (use v-on)
                 -->
-                <slot name="input" v-bind="{ id: inputId, value, inputBinds, inputEvents }">
+                <slot name="input" v-bind="{ id: inputId, value: modelValue, inputBinds, inputEvents }">
                     <input
                         :id="inputId"
                         class="ui-input-time-picker-input w-100"
                         type="text"
-                        :value="value"
+                        :value="modelValue"
                         v-bind="inputBinds"
                         v-on="inputEvents"
                     />
@@ -30,7 +30,7 @@
             @slot Custom clear icon slot
             @binding {Function} clear    function that clears the value
             -->
-            <slot name="clear" v-bind="{ clear }" v-if="value && allowClear">
+            <slot name="clear" v-bind="{ clear }" v-if="modelValue && allowClear">
                 <div class="icon cursor-pointer w-auto h-auto mar-left-2" @click="clear">
                     <i class="mdi mdi-close"></i>
                 </div>
@@ -45,7 +45,7 @@
                 </div>
             </slot>
         </div>
-        <ui-popover :show.sync="popoverShow" v-bind="popoverOptions">
+        <ui-popover v-model:show="popoverShow" v-bind="popoverOptions">
             <time-picker
                 class="ui-input-time-picker-tp w-100"
                 :value="time"
@@ -168,6 +168,7 @@ export default {
             default: true,
         },
     },
+    emits: ['change', 'clear'],
     data() {
         return {
             time: null,
@@ -189,7 +190,7 @@ export default {
         }
     },
     watch: {
-        value: {
+        modelValue: {
             handler(val) {
                 this.time = this.toTime(val);
             },
@@ -202,7 +203,7 @@ export default {
              * Input event
              * @property {String} time
              */
-            this.$emit('input', '');
+            this.$emit('update:modelValue', '');
             /**
              * Clear event
              */
@@ -218,7 +219,7 @@ export default {
              * Input event
              * @property {String} time
              */
-            this.$emit('input', data);
+            this.$emit('update:modelValue', data);
             /**
              * Change event
              * @property {String} time
@@ -231,7 +232,7 @@ export default {
              * Input event
              * @property {String} time
              */
-            this.$emit('input', val);
+            this.$emit('update:modelValue', val);
         },
         onInputFocus(e) {
             this.rootHasFocus = true;
@@ -246,7 +247,7 @@ export default {
              * Input event
              * @property {String} time
              */
-            this.$emit('input', data);
+            this.$emit('update:modelValue', data);
             /**
              * Change event
              * @property {String} time

package/src/components/ui/InputUnits.vue

@@ -27,12 +27,12 @@
                 {{ model.unit }}
             </span>
         </div>
-        <ui-popover :show.sync="popoverShow" v-bind="popoverOptions">
+        <ui-popover v-model:show="popoverShow" v-bind="popoverOptions">
             <ui-datalist
                 class="pull-left w-100"
                 ref="datalist"
                 v-bind="{ options: units, size }"
-                :cursorIndex.sync="dataListCursorIndex"
+                v-model:cursorIndex="dataListCursorIndex"
                 @select-option="onUnitChange"
             >
                 <template #header>
@@ -90,7 +90,6 @@
         padding: 0;
         color: inherit;
         background: transparent;
-        outline: none;
         -moz-appearance: textfield;
         &::-webkit-outer-spin-button,
         &::-webkit-inner-spin-button {
@@ -141,6 +140,7 @@ export default {
             default: `${Position.BOTTOM}-${Position.END}`,
         },
     },
+    emits: ['focus', 'change'],
     data() {
         return {
             model: {
@@ -174,7 +174,7 @@ export default {
         },
     },
     watch: {
-        value: {
+        modelValue: {
             handler(v) {
                 const a = String(v).match(withUnitRegExp);
                 const [_, n, u] = a ?? [];
@@ -200,7 +200,7 @@ export default {
              * Change event
              * @property {String} value
              */
-            this.$emit('input', value);
+            this.$emit('update:modelValue', value);
         },
         emitChange() {
             const value = this.isModelValid ? this.valuePrivate : '';

package/src/components/ui/Lazy.vue

@@ -1,4 +1,5 @@
 <script>
+import { h } from 'vue';
 import { useIntersectionObserver } from './utils/Helpers';
 
 export default {
@@ -45,7 +46,7 @@ export default {
         this.stopObserver = stop;
         this.calcMinHeight();
     },
-    beforeDestroy() {
+    beforeUnmount() {
         if (this.stopObserver) {
             this.stopObserver();
         }
@@ -82,10 +83,10 @@ export default {
             });
         },
     },
-    render(h) {
+    render() {
         const { tag, shouldRender, cssStyle: style } = this;
-        const { default: defaultSlot } = this.$scopedSlots;
-        const children = shouldRender && defaultSlot ? defaultSlot() : [];
+        const { default: defaultSlot } = this.$slots;
+        const children = shouldRender && defaultSlot ? defaultSlot() : {};
         return h(tag, { style }, children);
     },
 };

package/src/components/ui/Pagination.vue

@@ -1,6 +1,6 @@
 <template>
     <div class="ui-pagination">
-        <!-- 
+        <!--
         @slot Custom before slot
         @binding {Number} page    page
         @binding {Number} pages   pages
@@ -8,7 +8,7 @@
         @binding {Function} next    selects next page
         -->
         <slot name="before" v-bind="{ page, pages, prev, next }"></slot>
-        <!-- 
+        <!--
         @slot Page item slot
         @binding {Number} page    page
         @binding {Number} index   index
@@ -30,7 +30,7 @@
                 </div>
             </div>
         </slot>
-        <!-- 
+        <!--
         @slot Custom after slot
         @binding {Number} page    page
         @binding {Number} pages   pages
@@ -71,6 +71,7 @@ export default {
             default: 7,
         },
     },
+    emits: ['update:page', 'select', 'change'],
     computed: {
         pagesComputed() {
             let arr = [];
@@ -118,7 +119,7 @@ export default {
              */
             this.$emit('change', page);
             /**
-             * Update page event (for .sync usage)
+             * Update page event
              * @property {Number} page
              */
             this.$emit('update:page', page);

package/src/components/ui/Paginator.vue

@@ -1,8 +1,8 @@
 <template>
     <div class="ui-paginator">
-        <!-- 
+        <!--
         @slot Page data slot
-        @binding {Number} page      current page number 
+        @binding {Number} page      current page number
         @binding {Number} pages     total pages number
         @binding {Array} pageData   current page data
         @binding {(n:number) => {}} setPage     sets a new page
@@ -23,7 +23,7 @@ export default {
             },
         },
         /**
-         * Current page (.sync supported)
+         * Current page (v-model supported)
          */
         page: {
             type: Number,
@@ -40,6 +40,7 @@ export default {
             },
         },
     },
+    emits: ['update:page', 'change'],
     data() {
         return { currentPage: 1 };
     },
@@ -68,7 +69,7 @@ export default {
         setPage(page) {
             this.currentPage = page;
             /**
-             * Page change event (page.sync compatibility)
+             * Page change event
              * @property {number} page
              */
             this.$emit('update:page', page);

package/src/components/ui/Popover.vue

@@ -49,15 +49,15 @@ const Modifier = Object.freeze({
 export default {
     directives: {
         'append-body': {
-            inserted(el, bindings, { context }) {
-                let { appendToBody } = context;
+            mounted(el, { instance }, { context }) {
+                let { appendToBody } = instance;
                 if (!appendToBody) {
                     return;
                 }
-                const nt = context.$nextTick;
+                const nt = instance.$nextTick;
                 nt(() => nt(() => document.body.appendChild(el)));
             },
-            unbind(el, bindings, { context }) {
+            unmounted(el) {
                 el.parentNode && el.parentNode.removeChild(el);
             },
         },
@@ -127,6 +127,7 @@ export default {
             default: true
         }
     },
+    emits: ['update:show'],
     data() {
         return { cssStyle: {} };
     },
@@ -184,17 +185,21 @@ export default {
     created() {
         this.popper = null;
     },
-    destroyed() {
+    beforeUnmount() {
         this.handleReset();
     },
     methods: {
         addEventListeners() {
-            window.addEventListener('blur', this.onWinBlur);
-            document.addEventListener('mousedown', this.onDocMouseDown);
+            this.controller = new AbortController();
+            const { signal } = this.controller;
+            window.addEventListener('blur', this.onWinBlur, { signal });
+            document.addEventListener('mousedown', this.onDocMouseDown, { signal });
         },
         removeEventListeners() {
-            window.removeEventListener('blur', this.onWinBlur);
-            document.removeEventListener('mousedown', this.onDocMouseDown);
+            if (this.controller != null) {
+                this.controller.abort();
+                this.controller = null;
+            }
         },
         calcStyle() {
             const { zIndex, autoWidth, shouldRespondToPointerEvents } = this;

package/src/components/ui/Popup.vue

@@ -25,7 +25,7 @@
             <div
                 class="popup-dialog-footer"
                 :class="{ 'pad-none': !usePadding }"
-                v-if="$scopedSlots.footer"
+                v-if="$slots.footer != null"
             >
                 <!--
                 @slot Custom footer slot
@@ -59,7 +59,7 @@
 export default {
     props: {
         /**
-         * Whether the popup is visible (.sync supported)
+         * Whether the popup is visible
          */
         visible: {
             type: Boolean,
@@ -121,6 +121,7 @@ export default {
             default: 'scroll-hide',
         },
     },
+    emits: ['close', 'update:visible'],
     computed: {
         dialogBodyClass() {
             const { dialogBody, usePadding } = this;
@@ -146,7 +147,7 @@ export default {
             immediate: true,
         },
     },
-    beforeDestroy() {
+    beforeUnmount() {
         if (this.visibleBodyClass) {
             document.body.classList.remove(this.visibleBodyClass);
         }
@@ -158,7 +159,7 @@ export default {
              */
             this.$emit('close');
             /**
-             * Visibility update event (visible.sync compatibility)
+             * Visibility update event
              * @property {Boolean} visible
              */
             this.$emit('update:visible', false);

package/src/components/ui/ResponsiveContainer.vue

@@ -1,4 +1,5 @@
 <script>
+import { h } from 'vue';
 import { debounce } from './utils/Helpers';
 
 const ObserverManager = {
@@ -14,8 +15,11 @@ const ObserverManager = {
     },
     unregister(el) {
         const { records } = this;
-        records.delete(el);
-        this.observer.unobserve(el);
+        if (records.has(el)) {
+            records.delete(el);
+            this.observer.unobserve(el);
+        }
+
         if (!records.size) {
             this.destroyObserver();
         }
@@ -31,7 +35,7 @@ const ObserverManager = {
         this.observer = new ResizeObserver(debounce(callback, 50));
     },
     destroyObserver() {
-        this.observer.disconnect();
+        this.observer?.disconnect?.();
         this.observer = null;
     },
 };
@@ -70,27 +74,30 @@ export default {
     },
     mounted() {
         const { $el: el } = this;
+        if (el.nodeType === Node.COMMENT_NODE) {
+            return;
+        }
         const fn = ({ contentRect }) => {
             this.width = contentRect.width | 0;
             this.height = contentRect.height | 0;
         };
         ObserverManager.register({ fn, el });
     },
-    beforeDestroy() {
+    beforeUnmount() {
         ObserverManager.unregister(this.$el);
     },
-    render(h) {
+    render() {
         const { breakpoint, width, height } = this;
         /*
         @slot Page data slot
-        @binding {string} breakpoint    breakpoint name 
-        @binding {number} width         current container width (px)    
+        @binding {string} breakpoint    breakpoint name
+        @binding {number} width         current container width (px)
         @binding {number} height        current container height (px)
         */
-        const content = this.$scopedSlots.default
-            ? this.$scopedSlots.default({ breakpoint, width, height })
+        const content = this.$slots.default?.() != null
+            ? this.$slots.default({ breakpoint, width, height })
             : null;
-        if (content.length > 1) {
+        if (content?.length > 1) {
             return h('div', 'Slot content should have one child');
         }
         return content;