@zipify/wysiwyg 3.1.2 → 4.0.0-vue3.0

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

@@ -5,7 +5,7 @@ jest.mock('../../assets/icons.svg', () => 'http://zipify.com/icons.svg');
 
 function createComponent({ name, size, isAutoColor } = {}) {
     return shallowMount(Icon, {
-        propsData: {
+        props: {
             name: name ?? 'test',
             size: size ?? '',
             autoColor: isAutoColor ?? false

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

@@ -14,21 +14,27 @@ const createToggler = (isOpened) => ({
     isOpened: ref(isOpened ?? true)
 });
 
+const SELECTORS = {
+    MODAL: '[data-test-selector="modal"]'
+};
+
 function createComponent({ toggler, maxHeight, maxWidth } = {}) {
     return shallowMount(Modal, {
-        stubs: {
-            transition: {
-                render() {
-                    return this.$slots.default?.[0];
+        global: {
+            stubs: {
+                transition: {
+                    render() {
+                        return this.$slots.default?.[0]?.();
+                    }
                 }
-            }
+            },
+            provide: { [InjectionTokens.EDITOR]: null }
         },
-        propsData: {
+        props: {
             toggler: toggler ?? createToggler(true),
             maxHeight: maxHeight ?? 1000,
             maxWidth: maxWidth ?? 1000
-        },
-        provide: { [InjectionTokens.EDITOR]: null }
+        }
     });
 }
 
@@ -37,14 +43,14 @@ describe('open/close', () => {
         const toggler = createToggler(true);
         const wrapper = createComponent({ toggler });
 
-        expect(wrapper).not.toVueEmpty();
+        expect(wrapper).toVueContainElement(SELECTORS.MODAL);
     });
 
     test('should render closed', () => {
         const toggler = createToggler(false);
         const wrapper = createComponent({ toggler });
 
-        expect(wrapper).toVueEmpty();
+        expect(wrapper).not.toVueContainElement(SELECTORS.MODAL);
     });
 
     test('should open', async () => {
@@ -54,21 +60,23 @@ describe('open/close', () => {
         toggler.isOpened.value = true;
         await nextTick();
 
-        expect(wrapper).not.toVueEmpty();
+        expect(wrapper).toVueContainElement(SELECTORS.MODAL);
     });
 });
 
 describe('rendering', () => {
     test('should render max width', () => {
         const wrapper = createComponent({ maxWidth: 256 });
-        const maxWidth = wrapper.element.style.getPropertyValue('--zw-modal-max-width');
+        const modalWrapper = wrapper.find(SELECTORS.MODAL);
+        const maxWidth = modalWrapper.element.style.getPropertyValue('--zw-modal-max-width');
 
         expect(maxWidth).toBe('256px');
     });
 
     test('should render max height', () => {
         const wrapper = createComponent({ maxHeight: 256 });
-        const maxHeight = wrapper.element.style.getPropertyValue('--zw-modal-max-height');
+        const modalWrapper = wrapper.find(SELECTORS.MODAL);
+        const maxHeight = modalWrapper.element.style.getPropertyValue('--zw-modal-max-height');
 
         expect(maxHeight).toBe('256px');
     });

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

@@ -3,7 +3,7 @@ import Range from '../Range';
 
 function createComponent({ min, max, step, value }) {
     return shallowMount(Range, {
-        propsData: {
+        props: {
             min: min ?? '1',
             max: max ?? '3',
             step: step ?? '0.1',

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

@@ -3,7 +3,7 @@ import TextField from '../TextField';
 
 function createComponent(label, error) {
     return shallowMount(TextField, {
-        propsData: {
+        props: {
             value: '',
             label: label ?? '',
             placeholder: '',
@@ -35,23 +35,24 @@ describe('rendering', () => {
     test('should render errors', () => {
         const wrapper = createComponent('_', 'some error');
 
-        expect(wrapper.contains(SELECTORS.ERROR)).toBeTruthy();
+        expect(wrapper).toVueContainElement(SELECTORS.ERROR);
     });
 
     test('should not render errors', () => {
         const wrapper = createComponent();
 
-        expect(wrapper.contains(SELECTORS.ERROR)).toBeFalsy();
+        expect(wrapper).not.toVueContainElement(SELECTORS.ERROR);
     });
 });
 
 describe('input change handling', () => {
-    test('should emit parsed value', () => {
+    test('should emit parsed value', async () => {
         const wrapper = createComponent();
-        const inputComponentWrapper = wrapper.find(SELECTORS.INPUT);
+        const inputWrapper = wrapper.find(SELECTORS.INPUT);
 
-        inputComponentWrapper.setValue('Hello world!!!');
+        await inputWrapper.setValue('Hello world!!!');
+        const [value] = wrapper.emitted('input')[0];
 
-        expect(wrapper.emitted('input')).toMatchSnapshot();
+        expect(value).toBe('Hello world!!!');
     });
 });

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

@@ -4,9 +4,10 @@
         placement="bottom-end"
         placement-strategy="fixed"
         :favorite-colors="favoriteColors"
-        :window="contextWindow"
+        :window="ContextWindow.window"
         @changeFavoriteColors="updateFavoriteColors"
-        v-model="api.editingColor"
+        :color="api.editingColor"
+        @input="api.editingColor = $event"
         v-out-click="{ onOutClick: api.close, isDisabled: !api.isOpened }"
     >
         <template #activator>
@@ -21,64 +22,45 @@
     </ZipifyColorPicker>
 </template>
 
-<script>
+<script setup>
 import { ZipifyColorPicker } from '@zipify/colorpicker';
-import { inject, ref, toRef } from 'vue';
-import { outClick } from '../../../directives';
+import { computed, inject, ref, toRef, unref } from 'vue';
+import { outClick as vOutClick } from '../../../directives';
 import { InjectionTokens } from '../../../injectionTokens';
 import { ContextWindow } from '../../../services';
 import { usePickerApi, usePickerHotkeys } from './composables';
 
-export default {
-    name: 'ColorPicker',
+const props = defineProps({
+    value: {
+        type: String,
+        required: true
+    }
+});
 
-    components: {
-        ZipifyColorPicker
-    },
+const emit = defineEmits(['change']);
 
-    directives: {
-        outClick
-    },
+const favoriteColorsService = inject(InjectionTokens.FAVORITE_COLORS);
+const editor = inject(InjectionTokens.EDITOR);
+const pickerRef = ref(null);
 
-    props: {
-        value: {
-            type: String,
-            required: true
-        }
+const api = usePickerApi({
+    onChange: (color) => {
+        emit('change', color);
+        editor.chain().focus().restoreSelection().run();
     },
+    onClosed: () => editor.commands.restoreSelection(),
+    onBeforeOpened: () => editor.commands.storeSelection(),
+    colorRef: toRef(props, 'value'),
+    pickerRef
+});
+const isOpenedRef = toRef(api, 'isOpened');
 
-    setup(props, { emit }) {
-        const favoriteColors = inject(InjectionTokens.FAVORITE_COLORS);
-        const editor = inject(InjectionTokens.EDITOR);
-        const pickerRef = ref(null);
-
-        const api = usePickerApi({
-            onChange: (color) => {
-                emit('change', color);
-                editor.chain().focus().restoreSelection().run();
-            },
-            onClosed: () => editor.commands.restoreSelection(),
-            onBeforeOpened: () => editor.commands.storeSelection(),
-            colorRef: toRef(props, 'value'),
-            pickerRef
-        });
-        const isOpenedRef = toRef(api, 'isOpened');
+usePickerHotkeys({
+    isOpenedRef,
+    onCancel: api.cancel,
+    onApply: api.close
+});
 
-        usePickerHotkeys({
-            isOpenedRef,
-            onCancel: api.cancel,
-            onApply: api.close
-        });
-
-        const updateFavoriteColors = (colors) => favoriteColors.triggerUpdate(colors);
-
-        return {
-            pickerRef,
-            api,
-            favoriteColors: favoriteColors.listRef,
-            updateFavoriteColors,
-            contextWindow: ContextWindow.window
-        };
-    }
-};
+const favoriteColors = computed(() => unref(favoriteColorsService.listRef));
+const updateFavoriteColors = (colors) => favoriteColorsService.triggerUpdate(colors);
 </script>

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

@@ -21,8 +21,10 @@ function createWrapper({ hostEl, editor } = {}) {
     return withComponentContext(() => {
         return useDeselectionLock({ hostRef: ref(hostEl), isActiveRef: ref(true) });
     }, {
-        provide: {
-            [InjectionTokens.EDITOR]: editor ?? createEditor({ isFocused: true })
+        global: {
+            provide: {
+                [InjectionTokens.EDITOR]: editor ?? createEditor({ isFocused: true })
+            }
         }
     });
 }

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

@@ -23,7 +23,9 @@ function createWrapper() {
             modalRef: elementRef
         });
     }, {
-        provide: { [InjectionTokens.EDITOR]: createEditor() }
+        global: {
+            provide: { [InjectionTokens.EDITOR]: createEditor() }
+        }
     });
 }
 

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

@@ -4,7 +4,9 @@ import { withComponentContext } from '../../../../__tests__/utils';
 
 function useComposable({ scrollerEl }) {
     return withComponentContext(() => useScrollView(), {
-        provide: { [SCROLL_VIEW]: ref(scrollerEl) }
+        global: {
+            provide: { [SCROLL_VIEW]: ref(scrollerEl) }
+        }
     });
 }
 

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

@@ -16,7 +16,7 @@
     </div>
 </template>
 
-<script>
+<script setup>
 import { provide, toRef, ref } from 'vue';
 import Modal from '../Modal';
 import { useModalToggler } from '../composables';
@@ -25,70 +25,50 @@ import DropdownActivator from './DropdownActivator';
 import DropdownMenu from './DropdownMenu';
 import { useActiveOptionManager } from './composables';
 
-export default {
-    name: 'Dropdown',
-
-    components: {
-        Modal,
-        DropdownActivator,
-        DropdownMenu
+const props = defineProps({
+    value: {
+        type: [String, Number],
+        required: false,
+        default: null
     },
 
-    model: {
-        event: 'change'
+    options: {
+        type: Array,
+        required: true
     },
 
-    props: {
-        value: {
-            type: [String, Number],
-            required: false,
-            default: null
-        },
-
-        options: {
-            type: Array,
-            required: true
-        },
-
-        maxWidth: {
-            type: Number,
-            required: false,
-            default: 156
-        },
-
-        color: {
-            type: String,
-            required: false,
-            default: 'none'
-        }
+    maxWidth: {
+        type: Number,
+        required: false,
+        default: 156
     },
 
-    setup(props, { emit }) {
-        const dropdownRef = ref(null);
-        const modalRef = ref(null);
+    color: {
+        type: String,
+        required: false,
+        default: 'none'
+    }
+});
 
-        const activeOptionManager = useActiveOptionManager({
-            optionsRef: toRef(props, 'options'),
-            inputRef: toRef(props, 'value'),
-            stateless: props.value === null,
-            onChange: (value) => emit('change', value.id)
-        });
+const emit = defineEmits(['change']);
 
-        const toggler = useModalToggler({
-            wrapperRef: dropdownRef,
-            modalRef
-        });
+const dropdownRef = ref(null);
+const modalRef = ref(null);
 
-        provide(InjectionTokens.ACTIVE_MANAGER, activeOptionManager);
-        provide(InjectionTokens.TOGGLER, toggler);
+const activeOptionManager = useActiveOptionManager({
+    optionsRef: toRef(props, 'options'),
+    inputRef: toRef(props, 'value'),
+    stateless: props.value === null,
+    onChange: (value) => emit('change', value.id)
+});
 
-        return {
-            dropdownRef,
-            modalRef,
-            toggler
-        };
-    }
-};
+const toggler = useModalToggler({
+    wrapperRef: dropdownRef,
+    modalRef
+});
+
+provide(InjectionTokens.ACTIVE_MANAGER, activeOptionManager);
+provide(InjectionTokens.TOGGLER, toggler);
 </script>
 
 <style scoped>

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

@@ -1,80 +1,52 @@
 <template>
-    <div>
-        <slot :open="open" :isOpened="isOpened">
-            <Button
-                skin="toolbar"
-                class="zw-dropdown__activator"
-                :class="dropdownClasses"
-                :active="isOpened"
-                @click="open"
-            >
-                <span class="zw-dropdown__activator-title zw-text--truncate">
-                    {{ activeOptionTitle }}
-                </span>
-
-                <Icon
-                    class="zw-dropdown__activator-arrow"
-                    name="arrow"
-                    size="8px"
-                    auto-color
-                />
-            </Button>
-        </slot>
-    </div>
+    <slot :open="dropdownToggler.open" :isOpened="isOpened">
+        <Button
+            skin="toolbar"
+            class="zw-dropdown__activator"
+            :class="dropdownClasses"
+            :active="isOpened"
+            @click="dropdownToggler.open"
+        >
+            <span class="zw-dropdown__activator-title zw-text--truncate">
+                {{ activeOptionTitle }}
+            </span>
+
+            <Icon
+                class="zw-dropdown__activator-arrow"
+                name="arrow"
+                size="8px"
+                auto-color
+            />
+        </Button>
+    </slot>
 </template>
 
-<script>
-import { computed, inject, toRef } from 'vue';
+<script setup>
+import { computed, inject, toRef, unref } from 'vue';
 import Button from '../Button';
 import Icon from '../Icon';
-import { tooltip } from '../../../directives';
 import { InjectionTokens } from './injectionTokens';
 import { useDropdownEntityTitle } from './composables';
 
-export default {
-    name: 'DropdownActivator',
-
-    components: {
-        Icon,
-        Button
-    },
-
-    directives: {
-        tooltip
-    },
-
-    model: {
-        event: 'change'
-    },
-
-    props: {
-        color: {
-            type: String,
-            required: false,
-            default: 'none'
-        }
-    },
-
-    setup(props) {
-        const activeOptionManager = inject(InjectionTokens.ACTIVE_MANAGER);
-        const dropdownToggler = inject(InjectionTokens.TOGGLER);
-        const color = toRef(props, 'color');
+const props = defineProps({
+    color: {
+        type: String,
+        required: false,
+        default: 'none'
+    }
+});
 
-        const activeOptionTitle = useDropdownEntityTitle(activeOptionManager.activeOption);
+const activeOptionManager = inject(InjectionTokens.ACTIVE_MANAGER);
+const dropdownToggler = inject(InjectionTokens.TOGGLER);
+const isOpened = computed(() => unref(dropdownToggler.isOpened));
+const color = toRef(props, 'color');
 
-        const dropdownClasses = computed(() => ({
-            'zw-dropdown__activator--active': dropdownToggler.isOpened.value,
-            'zw-dropdown__activator--gray': color.value === 'gray'
-        }));
+const activeOptionTitle = useDropdownEntityTitle(activeOptionManager.activeOption);
 
-        return {
-            activeOptionTitle,
-            isOpened: dropdownToggler.isOpened,
-            open: dropdownToggler.open,
-            dropdownClasses
-        };
-    }
-};
+const dropdownClasses = computed(() => ({
+    'zw-dropdown__activator--active': dropdownToggler.isOpened.value,
+    'zw-dropdown__activator--gray': color.value === 'gray'
+}));
 </script>
 
 <style scoped>

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

@@ -2,12 +2,6 @@
     <div class="zw-dropdown__divider" />
 </template>
 
-<script>
-export default {
-    name: 'DropdownDivider'
-};
-</script>
-
 <style scoped>
 .zw-dropdown__divider {
     padding: 0 var(--zw-offset-sm);

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

@@ -10,31 +10,19 @@
     </div>
 </template>
 
-<script>
+<script setup>
 import { toRef } from 'vue';
 import DropdownOption from './DropdownOption';
 import { useDropdownEntityTitle } from './composables';
 
-export default {
-    name: 'DropdownGroup',
-
-    components: {
-        DropdownOption
-    },
-
-    props: {
-        group: {
-            type: Object,
-            required: true
-        }
-    },
-
-    setup(props) {
-        const groupTitle = useDropdownEntityTitle(toRef(props, 'group'));
-
-        return { groupTitle };
+const props = defineProps({
+    group: {
+        type: Object,
+        required: true
     }
-};
+});
+
+const groupTitle = useDropdownEntityTitle(toRef(props, 'group'));
 </script>
 
 <style scoped>

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

@@ -23,7 +23,7 @@
     </ScrollView>
 </template>
 
-<script>
+<script setup>
 import { provide } from 'vue';
 import ScrollView from '../ScrollView';
 import { InjectionTokens } from './injectionTokens';
@@ -31,27 +31,14 @@ import DropdownGroup from './DropdownGroup';
 import DropdownOption from './DropdownOption';
 import DropdownDivider from './DropdownDivider';
 
-export default {
-    name: 'DropdownMenu',
-
-    components: {
-        ScrollView,
-        DropdownGroup,
-        DropdownOption,
-        DropdownDivider
-    },
-
-    props: {
-        options: {
-            type: Array,
-            required: true
-        }
-    },
-
-    setup() {
-        provide(InjectionTokens.SESSION, {});
+defineProps({
+    options: {
+        type: Array,
+        required: true
     }
-};
+});
+
+provide(InjectionTokens.SESSION, {});
 </script>
 
 <style>