@zipify/wysiwyg 1.0.0-dev.50 → 1.0.0-dev.51

package/example/ExampleApp.vue

@@ -38,7 +38,7 @@
 </template>
 
 <script>
-import { computed, onMounted, ref } from 'vue';
+import { computed, onMounted, ref } from '@vue/composition-api';
 import { Wysiwyg } from '../lib';
 import { FONTS } from './fonts';
 import { PRESETS, renderPresetVariable } from './presets';

package/example/example.js

@@ -1,4 +1,5 @@
 import Vue from 'vue';
+import CompositionAPI from '@vue/composition-api';
 import ExampleApp from './ExampleApp';
 import { loadFonts } from './fonts';
 import { renderPresets } from './presets';
@@ -9,6 +10,8 @@ import { tooltipManager } from './tooltip';
     loadFonts();
     renderPresets();
 
+    Vue.use(CompositionAPI);
+
     if (!sessionStorage.getItem('wswg-data')) {
         sessionStorage.setItem('wswg-data', JSON.stringify({
             type: 'doc',

package/lib/Wysiwyg.vue

@@ -12,7 +12,7 @@
 
 <script>
 import { EditorContent } from '@tiptap/vue-2';
-import { provide, toRef, ref, computed } from 'vue';
+import { provide, toRef, ref, computed } from '@vue/composition-api';
 import { Toolbar } from './components';
 import { useToolbar, useEditor } from './composables';
 import { buildExtensions } from './extensions';

package/lib/__tests__/utils/withComponentContext.js

@@ -1,5 +1,5 @@
 import { shallowMount } from '@vue/test-utils';
-import { h } from 'vue';
+import { h } from '@vue/composition-api';
 
 export function withComponentContext(exec, params = {}) {
     const wrapper = shallowMount({

package/lib/components/base/Button.vue

@@ -11,7 +11,7 @@
 </template>
 
 <script>
-import { computed } from 'vue';
+import { computed } from '@vue/composition-api';
 
 export default {
     name: 'Button',

package/lib/components/base/Icon.vue

@@ -8,7 +8,7 @@
 </template>
 
 <script>
-import { computed } from 'vue';
+import { computed } from '@vue/composition-api';
 import { importIcon } from '../../utils';
 
 export default {

package/lib/components/base/Modal.vue

@@ -13,7 +13,7 @@
 </template>
 
 <script>
-import { computed, ref } from 'vue';
+import { computed, ref } from '@vue/composition-api';
 import { outClick } from '../../directives';
 import { useDeselectionLock, useModalToggler } from './composables';
 

package/lib/components/base/NumberField.vue

@@ -36,7 +36,7 @@
 </template>
 
 <script>
-import { computed, toRef } from 'vue';
+import { computed, toRef } from '@vue/composition-api';
 import Button from './Button';
 import { useNumberValue } from './composables';
 

package/lib/components/base/Range.vue

@@ -13,7 +13,7 @@
 </template>
 
 <script>
-import { computed, toRef } from 'vue';
+import { computed, toRef } from '@vue/composition-api';
 import { useTempValue } from './composables';
 
 export default {

package/lib/components/base/ScrollView.vue

@@ -6,7 +6,7 @@
 
 <script>
 import SimpleBar from 'simplebar';
-import { onMounted, provide, ref } from 'vue';
+import { onMounted, provide, ref } from '@vue/composition-api';
 import { SCROLL_VIEW } from './composables';
 
 export default {

package/lib/components/base/TextField.vue

@@ -21,7 +21,7 @@
 </template>
 
 <script>
-import { computed } from 'vue';
+import { computed } from '@vue/composition-api';
 
 export default {
     name: 'TextField',

package/lib/components/base/__tests__/Modal.test.js

@@ -1,4 +1,4 @@
-import { nextTick, ref } from 'vue';
+import { nextTick, ref } from '@vue/composition-api';
 import { shallowMount } from '@vue/test-utils';
 import { InjectionTokens } from '../../../injectionTokens';
 import Modal from '../Modal';

package/lib/components/base/colorPicker/ColorPicker.vue

@@ -21,7 +21,7 @@
 
 <script>
 import { ZipifyColorPicker } from '@zipify/colorpicker';
-import { inject, ref, toRef } from 'vue';
+import { inject, ref, toRef } from '@vue/composition-api';
 import { outClick } from '../../../directives';
 import { InjectionTokens } from '../../../injectionTokens';
 import { useDeselectionLock } from '../composables';

package/lib/components/base/colorPicker/composables/__tests__/usePickerApi.test.js

@@ -1,4 +1,4 @@
-import { ref } from 'vue';
+import { ref } from '@vue/composition-api';
 import { usePickerApi } from '../usePickerApi';
 
 const createPickerRef = ({ isOpened } = {}) => ref({

package/lib/components/base/colorPicker/composables/usePickerApi.js

@@ -1,4 +1,4 @@
-import { computed, ref } from 'vue';
+import { computed, ref } from '@vue/composition-api';
 
 export function usePickerApi({ pickerRef, initialColorRef, onClosed, onBeforeOpened }) {
     const editingColor = ref(initialColorRef.value);

package/lib/components/base/colorPicker/composables/usePickerHotkeys.js

@@ -1,4 +1,4 @@
-import { ref } from 'vue';
+import { ref } from '@vue/composition-api';
 import { ContextWindow } from '../../../../services';
 import { useActivatedListener } from '../../composables';
 

package/lib/components/base/composables/__tests__/useActivatedListener.test.js

@@ -1,4 +1,4 @@
-import { nextTick, ref } from 'vue';
+import { nextTick, ref } from '@vue/composition-api';
 import { useActivatedListener } from '../useActivatedListener';
 import { withComponentContext } from '../../../../__tests__/utils';
 

package/lib/components/base/composables/__tests__/useDeselectionLock.test.js

@@ -1,4 +1,4 @@
-import { ref } from 'vue';
+import { ref } from '@vue/composition-api';
 import { setReadonlyProperty, withComponentContext } from '../../../../__tests__/utils';
 import { InjectionTokens } from '../../../../injectionTokens';
 import { useDeselectionLock } from '../useDeselectionLock';

package/lib/components/base/composables/__tests__/useElementRef.test.js

@@ -1,4 +1,4 @@
-import { h, ref } from 'vue';
+import { h, ref } from '@vue/composition-api';
 import { shallowMount } from '@vue/test-utils';
 import { useElementRef } from '../useElementRef';
 

package/lib/components/base/composables/__tests__/useModalToggler.test.js

@@ -1,4 +1,4 @@
-import { ref } from 'vue';
+import { ref } from '@vue/composition-api';
 import { withComponentContext } from '../../../../__tests__/utils';
 import { InjectionTokens } from '../../../../injectionTokens';
 import { useModalToggler } from '../useModalToggler';

package/lib/components/base/composables/__tests__/useNumberValue.test.js

@@ -1,4 +1,4 @@
-import { ref } from 'vue';
+import { ref } from '@vue/composition-api';
 import { useNumberValue } from '../useNumberValue';
 
 describe('change', () => {

package/lib/components/base/composables/__tests__/useScrollView.test.js

@@ -1,4 +1,4 @@
-import { ref } from 'vue';
+import { ref } from '@vue/composition-api';
 import { SCROLL_VIEW, useScrollView } from '../useScrollView';
 import { withComponentContext } from '../../../../__tests__/utils';
 

package/lib/components/base/composables/__tests__/useTempValue.test.js

@@ -1,4 +1,4 @@
-import { nextTick, ref } from 'vue';
+import { nextTick, ref } from '@vue/composition-api';
 import { useTempValue } from '../useTempValue';
 
 describe('sync with original', () => {

package/lib/components/base/composables/useActivatedListener.js

@@ -1,4 +1,4 @@
-import { onUnmounted, watch } from 'vue';
+import { onUnmounted, watch } from '@vue/composition-api';
 
 export function useActivatedListener({ targetRef, isActiveRef, event, onEvent, options }) {
     function addListener() {

package/lib/components/base/composables/useDeselectionLock.js

@@ -1,4 +1,4 @@
-import { inject } from 'vue';
+import { inject } from '@vue/composition-api';
 import { InjectionTokens } from '../../../injectionTokens';
 import { useActivatedListener } from './useActivatedListener';
 import { useElementRef } from './useElementRef';

package/lib/components/base/composables/useElementRef.js

@@ -1,4 +1,4 @@
-import { computed } from 'vue';
+import { computed } from '@vue/composition-api';
 
 export function useElementRef(ref) {
     return computed(() => ref.value?.$el || ref.value);

package/lib/components/base/composables/useModalToggler.js

@@ -1,5 +1,5 @@
 import { createPopper } from '@popperjs/core';
-import { inject, nextTick, ref, onUnmounted } from 'vue';
+import { inject, nextTick, ref, onUnmounted } from '@vue/composition-api';
 import { InjectionTokens } from '../../../injectionTokens';
 import { useElementRef } from './useElementRef';
 

package/lib/components/base/composables/useScrollView.js

@@ -1,4 +1,4 @@
-import { inject } from 'vue';
+import { inject } from '@vue/composition-api';
 
 export const SCROLL_VIEW = Symbol('scrollView');
 

package/lib/components/base/composables/useTempValue.js

@@ -1,4 +1,4 @@
-import { ref, watch } from 'vue';
+import { ref, watch } from '@vue/composition-api';
 
 const noFormatter = (value) => value;
 

package/lib/components/base/composables/useValidator.js

@@ -1,4 +1,4 @@
-import { ref } from 'vue';
+import { ref } from '@vue/composition-api';
 
 export function useValidator({ validations }) {
     const error = ref(null);

package/lib/components/base/dropdown/Dropdown.vue

@@ -17,7 +17,7 @@
 </template>
 
 <script>
-import { provide, toRef, ref } from 'vue';
+import { provide, toRef, ref } from '@vue/composition-api';
 import Modal from '../Modal';
 import { useModalToggler } from '../composables';
 import { InjectionTokens } from './injectionTokens';

package/lib/components/base/dropdown/DropdownActivator.vue

@@ -24,7 +24,7 @@
 </template>
 
 <script>
-import { computed, inject, toRef } from 'vue';
+import { computed, inject, toRef } from '@vue/composition-api';
 import Button from '../Button';
 import Icon from '../Icon';
 import { InjectionTokens } from './injectionTokens';

package/lib/components/base/dropdown/DropdownGroup.vue

@@ -11,7 +11,7 @@
 </template>
 
 <script>
-import { toRef } from 'vue';
+import { toRef } from '@vue/composition-api';
 import DropdownOption from './DropdownOption';
 import { useDropdownEntityTitle } from './composables';
 

package/lib/components/base/dropdown/DropdownMenu.vue

@@ -24,7 +24,7 @@
 </template>
 
 <script>
-import { provide } from 'vue';
+import { provide } from '@vue/composition-api';
 import ScrollView from '../ScrollView';
 import { InjectionTokens } from './injectionTokens';
 import DropdownGroup from './DropdownGroup';

package/lib/components/base/dropdown/DropdownOption.vue

@@ -10,7 +10,7 @@
 </template>
 
 <script>
-import { computed, inject, nextTick, onMounted, ref, toRef } from 'vue';
+import { computed, inject, nextTick, onMounted, ref, toRef } from '@vue/composition-api';
 import Button from '../Button';
 import { useScrollView } from '../composables';
 import { InjectionTokens } from './injectionTokens';

package/lib/components/base/dropdown/__tests__/DropdownActivator.test.js

@@ -1,5 +1,5 @@
 import { shallowMount } from '@vue/test-utils';
-import { ref } from 'vue';
+import { ref } from '@vue/composition-api';
 import DropdownActivator from '../DropdownActivator';
 import { InjectionTokens } from '../injectionTokens';
 import Button from '../../Button';

package/lib/components/base/dropdown/__tests__/DropdownMenu.test.js

@@ -1,5 +1,5 @@
 import { shallowMount } from '@vue/test-utils';
-import { ref } from 'vue';
+import { ref } from '@vue/composition-api';
 import { InjectionTokens } from '../injectionTokens';
 import DropdownMenu from '../DropdownMenu';
 

package/lib/components/base/dropdown/__tests__/DropdownOption.test.js

@@ -1,5 +1,5 @@
 import { shallowMount } from '@vue/test-utils';
-import { ref } from 'vue';
+import { ref } from '@vue/composition-api';
 import DropdownOption from '../DropdownOption';
 import { InjectionTokens } from '../injectionTokens';
 import Button from '../../Button';

package/lib/components/base/dropdown/composables/__tests__/useActiveOptionManager.test.js

@@ -1,4 +1,4 @@
-import { nextTick, ref } from 'vue';
+import { nextTick, ref } from '@vue/composition-api';
 import { useActiveOptionManager } from '../useActiveOptionManager';
 
 describe('manage active option', () => {

package/lib/components/base/dropdown/composables/__tests__/useDropdownEntityTitle.test.js

@@ -1,4 +1,4 @@
-import { ref } from 'vue';
+import { ref } from '@vue/composition-api';
 import { useDropdownEntityTitle } from '../useDropdownEntityTitle';
 
 describe('resolve title', () => {

package/lib/components/base/dropdown/composables/useActiveOptionManager.js

@@ -1,4 +1,4 @@
-import { ref, watch } from 'vue';
+import { ref, watch } from '@vue/composition-api';
 
 export function useActiveOptionManager({ optionsRef, inputRef, stateless, onChange }) {
     const activeOption = ref(null);

package/lib/components/base/dropdown/composables/useDropdownEntityTitle.js

@@ -1,4 +1,4 @@
-import { computed } from 'vue';
+import { computed } from '@vue/composition-api';
 
 export function useDropdownEntityTitle(entityRef) {
     return computed(() => entityRef.value?.title || entityRef.value?.id || '');

package/lib/components/toolbar/Toolbar.vue

@@ -9,7 +9,7 @@
 </template>
 
 <script>
-import { computed, ref, watch } from 'vue';
+import { computed, ref, watch } from '@vue/composition-api';
 import { Devices } from '../../enums';
 import ToolbarFull from './ToolbarFull';
 import ToolbarDevice from './ToolbarDevice';

package/lib/components/toolbar/ToolbarDivider.vue

@@ -3,7 +3,7 @@
 </template>
 
 <script>
-import { computed } from 'vue';
+import { computed } from '@vue/composition-api';
 
 export default {
     name: 'ToolbarDivider',

package/lib/components/toolbar/__tests__/Toolbar.test.js

@@ -1,5 +1,5 @@
 import { shallowMount } from '@vue/test-utils';
-import { ref } from 'vue';
+import { ref } from '@vue/composition-api';
 import { Devices } from '../../../enums';
 import Toolbar from '../Toolbar';
 import ToolbarFull from '../ToolbarFull';
@@ -10,7 +10,7 @@ function createComponent({ device }) {
         propsData: {
             toolbar: {
                 mount: jest.fn(),
-                isActiveRef: ref({ value: true }),
+                isActiveRef: ref(true),
                 offsets: [0, 8]
             },
             device: device ?? Devices.DESKTOP

package/lib/components/toolbar/controls/AlignmentControl.vue

@@ -15,7 +15,7 @@
 </template>
 
 <script>
-import { inject } from 'vue';
+import { inject } from '@vue/composition-api';
 import { InjectionTokens } from '../../../injectionTokens';
 import { Alignments } from '../../../enums';
 import { ButtonToggle, Button, Icon } from '../../base';

package/lib/components/toolbar/controls/AlignmentDeviceControl.vue

@@ -17,7 +17,7 @@
 </template>
 
 <script>
-import { inject, ref } from 'vue';
+import { inject, ref } from '@vue/composition-api';
 import { InjectionTokens } from '../../../injectionTokens';
 import { Button, Icon, Modal, useModalToggler } from '../../base';
 import { tooltip } from '../../../directives';

package/lib/components/toolbar/controls/BackgroundColorControl.vue

@@ -15,7 +15,7 @@
 </template>
 
 <script>
-import { inject } from 'vue';
+import { inject } from '@vue/composition-api';
 import { ColorPicker, Button, Icon } from '../../base';
 import { InjectionTokens } from '../../../injectionTokens';
 import { tooltip } from '../../../directives';

package/lib/components/toolbar/controls/CaseStyleControl.vue

@@ -18,7 +18,7 @@
 </template>
 
 <script>
-import { inject } from 'vue';
+import { inject } from '@vue/composition-api';
 import { CaseStyles } from '../../../enums';
 import { Dropdown, Button, Icon } from '../../base';
 import { InjectionTokens } from '../../../injectionTokens';

package/lib/components/toolbar/controls/FontColorControl.vue

@@ -15,7 +15,7 @@
 </template>
 
 <script>
-import { inject } from 'vue';
+import { inject } from '@vue/composition-api';
 import { ColorPicker, Button, Icon } from '../../base';
 import { InjectionTokens } from '../../../injectionTokens';
 import { tooltip } from '../../../directives';

package/lib/components/toolbar/controls/FontFamilyControl.vue

@@ -18,7 +18,7 @@
 </template>
 
 <script>
-import { computed, inject } from 'vue';
+import { computed, inject } from '@vue/composition-api';
 import { InjectionTokens } from '../../../injectionTokens';
 import { tooltip } from '../../../directives';
 import { Dropdown, DropdownOption } from '../../base';

package/lib/components/toolbar/controls/FontSizeControl.vue

@@ -9,7 +9,7 @@
 </template>
 
 <script>
-import { computed, inject } from 'vue';
+import { computed, inject } from '@vue/composition-api';
 import { Dropdown } from '../../base';
 import { InjectionTokens } from '../../../injectionTokens';
 import { tooltip } from '../../../directives';

package/lib/components/toolbar/controls/FontWeightControl.vue

@@ -8,7 +8,7 @@
 </template>
 
 <script>
-import { computed, inject } from 'vue';
+import { computed, inject } from '@vue/composition-api';
 import { InjectionTokens } from '../../../injectionTokens';
 import { Dropdown } from '../../base';
 import { tooltip } from '../../../directives';

package/lib/components/toolbar/controls/ItalicControl.vue

@@ -12,7 +12,7 @@
 </template>
 
 <script>
-import { inject } from 'vue';
+import { inject } from '@vue/composition-api';
 import { Button, Icon } from '../../base';
 import { InjectionTokens } from '../../../injectionTokens';
 import { tooltip } from '../../../directives';

package/lib/components/toolbar/controls/LineHeightControl.vue

@@ -40,7 +40,7 @@
 </template>
 
 <script>
-import { inject, ref } from 'vue';
+import { inject, ref } from '@vue/composition-api';
 import { Button, Icon, Modal, Range, NumberField, FieldLabel, useModalToggler } from '../../base';
 import { InjectionTokens } from '../../../injectionTokens';
 import { tooltip } from '../../../directives';

package/lib/components/toolbar/controls/ListControl.vue

@@ -25,7 +25,7 @@
 </template>
 
 <script>
-import { computed, inject } from 'vue';
+import { computed, inject } from '@vue/composition-api';
 import { InjectionTokens } from '../../../injectionTokens';
 import { Dropdown, DropdownOption, Button, Icon } from '../../base';
 import { ListTypes } from '../../../enums';

package/lib/components/toolbar/controls/RemoveFormatControl.vue

@@ -10,7 +10,7 @@
 </template>
 
 <script>
-import { inject } from 'vue';
+import { inject } from '@vue/composition-api';
 import { Button, Icon } from '../../base';
 import { InjectionTokens } from '../../../injectionTokens';
 import { tooltip } from '../../../directives';

package/lib/components/toolbar/controls/StrikeThroughControl.vue

@@ -11,7 +11,7 @@
 </template>
 
 <script>
-import { inject } from 'vue';
+import { inject } from '@vue/composition-api';
 import { Button, Icon } from '../../base';
 import { InjectionTokens } from '../../../injectionTokens';
 import { tooltip } from '../../../directives';

package/lib/components/toolbar/controls/StylePresetControl.vue

@@ -21,7 +21,7 @@
 </template>
 
 <script>
-import { computed, inject } from 'vue';
+import { computed, inject } from '@vue/composition-api';
 import { InjectionTokens } from '../../../injectionTokens';
 import { Dropdown, Button, Icon } from '../../base';
 import { tooltip } from '../../../directives';

package/lib/components/toolbar/controls/SuperscriptControl.vue

@@ -11,7 +11,7 @@
 </template>
 
 <script>
-import { computed, inject } from 'vue';
+import { computed, inject } from '@vue/composition-api';
 import { Button, Icon } from '../../base';
 import { InjectionTokens } from '../../../injectionTokens';
 import { tooltip } from '../../../directives';

package/lib/components/toolbar/controls/UnderlineControl.vue

@@ -11,7 +11,7 @@
 </template>
 
 <script>
-import { inject, computed } from 'vue';
+import { inject, computed } from '@vue/composition-api';
 import { Button, Icon } from '../../base';
 import { InjectionTokens } from '../../../injectionTokens';
 import { tooltip } from '../../../directives';

package/lib/components/toolbar/controls/__tests__/AlignmentControl.test.js

@@ -1,5 +1,5 @@
 import { shallowMount } from '@vue/test-utils';
-import { h, ref } from 'vue';
+import { h, ref } from '@vue/composition-api';
 import { InjectionTokens } from '../../../../injectionTokens';
 import { Alignments } from '../../../../enums';
 import { ButtonToggle } from '../../../base';

package/lib/components/toolbar/controls/__tests__/AlignmentDeviceControl.test.js

@@ -1,5 +1,5 @@
 import { shallowMount } from '@vue/test-utils';
-import { ref, h, nextTick } from 'vue';
+import { ref, h, nextTick } from '@vue/composition-api';
 import { InjectionTokens } from '../../../../injectionTokens';
 import { Alignments } from '../../../../enums';
 import { Button, Icon, Modal } from '../../../base';

package/lib/components/toolbar/controls/__tests__/BackgroundColorControl.test.js

@@ -1,5 +1,5 @@
 import { shallowMount } from '@vue/test-utils';
-import { h, ref } from 'vue';
+import { h, ref } from '@vue/composition-api';
 import { InjectionTokens } from '../../../../injectionTokens';
 import { ColorPicker } from '../../../base';
 import BackgroundColorControl from '../BackgroundColorControl';

package/lib/components/toolbar/controls/__tests__/CaseStyleControl.test.js

@@ -1,5 +1,5 @@
 import { shallowMount } from '@vue/test-utils';
-import { h } from 'vue';
+import { h } from '@vue/composition-api';
 import { InjectionTokens } from '../../../../injectionTokens';
 import { Dropdown } from '../../../base';
 import CaseStyleControl from '../CaseStyleControl';

package/lib/components/toolbar/controls/__tests__/FontColorControl.test.js

@@ -1,5 +1,5 @@
 import { shallowMount } from '@vue/test-utils';
-import { h, ref } from 'vue';
+import { h, ref } from '@vue/composition-api';
 import { InjectionTokens } from '../../../../injectionTokens';
 import { ColorPicker } from '../../../base';
 import FontColorControl from '../FontColorControl';

package/lib/components/toolbar/controls/__tests__/FontFamilyControl.test.js

@@ -1,5 +1,5 @@
 import { shallowMount } from '@vue/test-utils';
-import { h, ref } from 'vue';
+import { h, ref } from '@vue/composition-api';
 import { InjectionTokens } from '../../../../injectionTokens';
 import { Dropdown } from '../../../base';
 import FontFamilyControl from '../FontFamilyControl';