goodteditor-ui 1.0.75 → 2.0.0

package/src/components/ui/Select.vue

@@ -31,7 +31,7 @@
                             size="small"
                             :key="index"
                             removable
-                            @click.native.stop
+                            @click.stop
                             @remove="deselectOption(option)">
                             <span>{{ getOptionLabel(option) }}</span>
                         </ui-badge>
@@ -92,13 +92,13 @@
             </div>
         </slot>
 
-        <ui-popover :show.sync="popoverShow" v-bind="popoverOptions">
+        <ui-popover v-model:show="popoverShow" v-bind="popoverOptions">
             <ui-datalist
+                v-model:cursorIndex="dataListCursorIndex"
                 class="w-100 pull-left"
-                @click.native.stop
+                @click.stop
                 @select-option="onDatalistSelectOption"
                 v-bind="{ size, options, class: datalistCssClass }"
-                :cursorIndex.sync="dataListCursorIndex"
                 ref="datalist">
                 <template #header>
                     <!--
@@ -238,10 +238,8 @@ export default {
         /**
          * @model
          */
-        value: {
-            default() {
-                return null;
-            }
+        modelValue: {
+            default: null
         },
         /**
          * Options. Array of Objects (option objects)
@@ -300,6 +298,7 @@ export default {
             default: null
         }
     },
+    emits: ['change'],
     data() {
         return {
             optionsSelected: [],
@@ -308,22 +307,25 @@ export default {
     },
     computed: {
         /**
-         * @return {object}
+         * @return {string[]}
          */
         cssClassExt() {
-            let obj = { 'u-select-none': this.readonly };
-            return { ...this.cssClass, ...obj };
+            const cssClass = [...this.cssClass];
+            if (this.readonly) {
+                cssClass.push('u-select-none');
+            }
+            return cssClass;
         }
     },
     watch: {
-        value: {
+        modelValue: {
             handler(model) {
                 this.importModel(model);
             },
             immediate: true
         },
         options() {
-            this.importModel(this.value);
+            this.importModel(this.modelValue);
         }
     },
     methods: {
@@ -352,6 +354,9 @@ export default {
             if (optionsSelected.length > 0) {
                 this.dataListCursorIndex = this.getOptionIndex(optionsSelected[0]);
                 this.optionsSelected = this.multiple ? optionsSelected : [optionsSelected[0]];
+            } else {
+                this.dataListCursorIndex = -1;
+                this.optionsSelected = [];
             }
         },
         exportModel() {
@@ -370,7 +375,7 @@ export default {
              * Input event
              * @property {any} value
              */
-            this.$emit('input', value, { cancel: rollback });
+            this.$emit('update:modelValue', value, { cancel: rollback });
             /**
              * Change event
              * @property {any} model

package/src/components/ui/TimePicker.vue

@@ -86,7 +86,7 @@
     &-datalist {
         z-index: auto;
         min-width: 3em;
-        ::v-deep > ul {
+        :deep(> ul) {
             min-height: calc(
                 var(--ui-time-picker-item-size) * var(--ui-time-picker-datalist-min-items)
             );
@@ -107,11 +107,9 @@ export default {
         /**
          * @model Object { h:Number, m:Number } where h stands for 'hour'; m stands for 'minute'
          */
-        value: {
+        modelValue: {
             type: Object,
-            default() {
-                return null;
-            },
+            default: null
         },
         /**
          * Hour/minute step size Object (works similar to how input step attribute works)
@@ -154,6 +152,7 @@ export default {
             },
         },
     },
+    emits: ['update:modelValue', 'change'],
     data() {
         return {
             h: -1,
@@ -166,7 +165,7 @@ export default {
         };
     },
     watch: {
-        value: {
+        modelValue: {
             handler(val) {
                 this.$nextTick(() => {
                     this.m = val ? val.m : -1;
@@ -239,7 +238,7 @@ export default {
                  * Input event
                  * @property {Object} option
                  */
-                this.$emit('input', obj);
+                this.$emit('update:modelValue', obj);
                 /**
                  * Change event
                  * @property {Object} option

package/src/components/ui/Tooltip.vue

@@ -8,11 +8,11 @@
         -->
         <slot name="target" v-bind="{ events: targetEvents, binds: targetBinds, visible }"></slot>
         <ui-popover
+            v-model:show="popoverShow"
             v-bind="popoverOptions"
-            :show.sync="popoverShow"
             ref="popover"
-            @mouseenter.native="onPopoverMouseEnter"
-            @mouseleave.native="onPopoverMouseLeave"
+            @mouseenter="onPopoverMouseEnter"
+            @mouseleave="onPopoverMouseLeave"
         >
             <!--
             @slot Tooltip slot
@@ -78,6 +78,7 @@ export default {
             default: TriggerOn.MOUSE_MOVE
         }
     },
+    emits: ['hidden'],
     data() {
         return {
             timeout: null,

package/src/components/ui/WysiwygEditor/WysiwygEditor.vue

@@ -46,7 +46,7 @@
 </template>
 
 <script>
-import { Editor, EditorContent } from '@tiptap/vue-2';
+import { Editor, EditorContent } from '@tiptap/vue-3';
 
 import { debounce } from '../utils/Helpers';
 import { resolveExtensions } from './extensions';
@@ -68,7 +68,7 @@ export default {
         /**
          * @model
          */
-        value: {
+        modelValue: {
             type: String,
             default: '',
         },
@@ -122,6 +122,7 @@ export default {
             },
         },
     },
+    emits: ['update:modelValue', 'change'],
     data: () => ({
         /** @type {Editor} */
         editor: null,
@@ -158,7 +159,7 @@ export default {
         /**
          * @param {string} value
          */
-        value(value) {
+        modelValue(value) {
             const isSame = this.content === value;
 
             if (isSame) {
@@ -182,10 +183,10 @@ export default {
         this.onSelectionUpdateDebounced = debounce(this.onSelectionUpdate, 300);
     },
     mounted() {
-        const { $refs, value, bubbleMenu, autofocus, editorContent, editorClass, onSelectionUpdateDebounced } = this;
+        const { $refs, modelValue, bubbleMenu, autofocus, editorContent, editorClass, onSelectionUpdateDebounced } = this;
 
         this.editor = new Editor({
-            content: value,
+            content: modelValue,
             extensions: resolveExtensions({
                 ...(bubbleMenu && {
                     bubbleMenu: {
@@ -210,7 +211,7 @@ export default {
                 }
             },
             onBlur: () => {
-                const isSame = this.content === this.value;
+                const isSame = this.content === this.modelValue;
 
                 if (isSame) {
                     return;
@@ -223,7 +224,7 @@ export default {
     activated() {
         this.editor.commands.focus(this.caretPosition);
     },
-    beforeDestroy() {
+    beforeUnmount() {
         this.editor?.destroy();
     },
     methods: {
@@ -232,7 +233,7 @@ export default {
              * Input event
              * @property {string} value
              */
-            this.$emit('input', this.content);
+            this.$emit('update:modelValue', this.content);
         },
         onChange() {
             /**
@@ -265,7 +266,7 @@ export default {
                 get tools() {
                     return toolGroups.flatMap(({ group }) => group);
                 },
-                change: this.change,
+                onChange: this.onChange,
                 getImageUrl: this.getImageUrl,
             });
 
@@ -304,7 +305,7 @@ export default {
     }
 }
 
-::v-deep .ProseMirror {
+:deep(.ProseMirror) {
     &.focus-outline-none:focus-visible {
         outline: none;
     }

package/src/components/ui/WysiwygEditor/extensions/font-size.js

@@ -1,4 +1,4 @@
-import { Extension } from '@tiptap/vue-2';
+import { Extension } from '@tiptap/vue-3';
 import { MarkType } from '../constants';
 
 export const FontSize = Extension.create({

package/src/components/ui/WysiwygEditor/extensions/formatting.js

@@ -1,4 +1,4 @@
-import { Extension } from '@tiptap/vue-2';
+import { Extension } from '@tiptap/vue-3';
 
 export const Formatting = Extension.create({
     name: 'formatting',

package/src/components/ui/WysiwygEditor/renders/ColorPicker.vue

@@ -8,8 +8,8 @@
                 <i class="mdi" :class="icon"></i>
             </div>
         </button>
-        <popover :show.sync="popoverShow" v-bind="popoverOptions">
-            <color-picker class="pull-left" v-bind="{ value, showSubmit: true }" @submit="onSubmit" />
+        <popover v-model:show="popoverShow" v-bind="popoverOptions">
+            <color-picker class="pull-left" v-bind="{ modelValue, showSubmit: true }" @submit="onSubmit" />
         </popover>
     </div>
 </template>
@@ -30,7 +30,7 @@ export default {
         }
     },
     computed: {
-        value() {
+        modelValue() {
             return this.tool.getValue();
         }
     },

package/src/components/ui/WysiwygEditor/renders/InputAuto.vue

@@ -2,13 +2,13 @@
     <div :title="title" class="autocomplete-tool">
         <input-autocomplete
             v-bind="{
-                value,
+                modelValue,
                 options: tool.options,
                 disabled: !isEnabled,
                 size: 'small',
                 appendToBody: false
             }"
-            @input="onInput" />
+            @update:modelValue="onInput" />
     </div>
 </template>
 
@@ -20,7 +20,7 @@ export default {
     components: { InputAutocomplete },
     mixins: [useRender()],
     computed: {
-        value() {
+        modelValue() {
             return this.tool.getValue() ?? '';
         }
     },

package/src/components/ui/WysiwygEditor/renders/InputUnits.vue

@@ -1,7 +1,7 @@
 <template>
     <div :title="title" class="input-units-tool">
         <input-units
-            v-bind="{ value, units, size: 'small', disabled: !isEnabled, appendToBody: false }"
+            v-bind="{ modelValue, units, size: 'small', disabled: !isEnabled, appendToBody: false }"
             @change="onChange" />
     </div>
 </template>
@@ -14,7 +14,7 @@ export default {
     components: { InputUnits },
     mixins: [useRender()],
     computed: {
-        value() {
+        modelValue() {
             return this.tool.getValue();
         },
         units() {

package/src/components/ui/WysiwygEditor/renders/Select.vue

@@ -2,7 +2,7 @@
     <div :title="title" class="select-tool">
         <ui-select
             v-bind="{
-                value,
+                modelValue,
                 options,
                 valueObjects,
                 disabled: !isEnabled,
@@ -22,7 +22,7 @@ export default {
     components: { UiSelect },
     mixins: [useRender()],
     computed: {
-        value() {
+        modelValue() {
             return this.tool.getValue(this.options);
         },
         options() {

package/src/components/ui/WysiwygEditor/renders/ToolbarPopover.vue

@@ -8,11 +8,11 @@
                 <i class="mdi" :class="icon"></i>
             </div>
         </button>
-        <popover :show.sync="popoverShow" v-bind="popoverOptions" position="bottom-end">
+        <popover v-model:show="popoverShow" v-bind="popoverOptions" position="bottom-end">
             <ui-datalist
                 class="w-100 pull-left"
                 v-bind="{ size: 'small', options: tool.options }"
-                @click.native.stop>
+                @click.stop>
                 <template #option="{ option, index }">
                     <li :key="index" class="list-item" >
                         <component :is="option.render" :tool="option" @command-executed="onCommandExecuted" />

package/src/components/ui/WysiwygEditor/renders/components/Tooltip.vue

@@ -26,6 +26,7 @@
 import Tooltip from '../../../Tooltip.vue';
 
 export default {
-    components: { Tooltip }
+    components: { Tooltip },
+    emits: ['hidden']
 };
 </script>

package/src/components/ui/WysiwygEditor/renders/mixins/RenderMixin.js

@@ -7,6 +7,7 @@ export const useRender = () => ({
             default: null
         }
     },
+    emits: ['command-executed'],
     computed: {
         /** @return {string} */
         icon() {

package/src/components/ui/utils/FormComponent.js

@@ -5,12 +5,18 @@ const r = () =>
         .toString(36)
         .substr(2);
 
+const Size = {
+    LARGE: { name: 'large', class: ['form-elem-large'] },
+    SMALL: { name: 'small', class: ['form-elem-small'] },
+    NORMAL: { name: 'normal', class: [] }
+};
+
 export default {
     props: {
         /**
          * @model
          */
-        value: {
+        modelValue: {
             default: '',
         },
         /**
@@ -19,10 +25,11 @@ export default {
          */
         size: {
             type: String,
-            default: '',
-            validator: function(value) {
-                return ['', 'small', 'large'].indexOf(value) >= 0;
-            },
+            default: Size.NORMAL.name,
+            validator: (val) =>
+                Object.values(Size)
+                    .map(({ name }) => name)
+                    .includes(val)
         },
         /**
          * Placeholder
@@ -46,48 +53,40 @@ export default {
             default: false,
         },
     },
+    emits: ['update:modelValue'],
     data() {
         return {
             inputId: this.uid(),
-            cssClass: {},
             rootHasFocus: false,
         };
     },
-    watch: {
-        size: {
-            handler(val, valOld) {
-                if (valOld) {
-                    this.$delete(this.cssClass, `form-elem-${valOld}`);
-                }
-                if (val) {
-                    this.$set(this.cssClass, `form-elem-${val}`, true);
-                }
-            },
-            immediate: true,
-        },
-        readonly: {
-            handler(val) {
-                this.$set(this.cssClass, 'readonly events-none', val);
-            },
-            immediate: true,
-        },
-        disabled: {
-            handler(val) {
-                this.$set(this.cssClass, 'disabled', val);
-            },
-            immediate: true,
-        },
-        rootHasFocus(val) {
-            this.$set(this.cssClass, 'focus', val);
+    computed: {
+        cssClass() {
+            const { size, readonly, disabled, rootHasFocus } = this;
+            const sizeDef = Object.values(Size).find((def) => def.name === size);
+            const classes = [...sizeDef.class];
+            
+            if (readonly) {
+                classes.push('events-none')
+            }
+            if (disabled) {
+                classes.push('disabled');
+            }
+            if (rootHasFocus) {
+                classes.push('focus');
+            }
+            return classes;
         },
     },
     created() {
-        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 });
     },
-    destroyed() {
-        window.removeEventListener('blur', this.onWinBlur);
-        document.removeEventListener('mousedown', this.onDocMouseDown);
+    beforeUnmount() {
+        this.controller.abort();
+        this.controller = null;
     },
     methods: {
         uid() {

package/src/main.js

@@ -1,4 +1,4 @@
-import Vue from 'vue';
+import { createApp } from 'vue';
 import App from './App.vue';
 
 // css
@@ -6,8 +6,4 @@ import 'goodt-framework-css/dist/all.css';
 import '@mdi/font/css/materialdesignicons.min.css';
 import '@mdi/light-font/css/materialdesignicons-light.min.css';
 
-Vue.config.productionTip = false;
-
-new Vue({
-    render: h => h(App)
-}).$mount('#app');
+createApp(App).mount('#app');

package/vite.config.js

@@ -0,0 +1,6 @@
+import { defineConfig } from 'vite';
+import vue from '@vitejs/plugin-vue';
+
+export default defineConfig({
+    plugins: [vue()],
+});

package/babel.config.js

@@ -1,5 +0,0 @@
-module.exports = {
-    presets: [
-        '@vue/cli-plugin-babel/preset'
-    ]
-}

package/vue.config.js

@@ -1,8 +0,0 @@
-/* eslint-disable */
-module.exports = {
-    devServer: {
-        port: 3000
-    },
-    filenameHashing: true,
-    lintOnSave: false
-};