@zipify/wysiwyg 1.0.0-dev.1

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

@@ -0,0 +1,50 @@
+import { shallowMount } from '@vue/test-utils';
+import Button from '../Button';
+
+function createComponent({ skin, active, icon } = {}) {
+    return shallowMount(Button, {
+        propsData: {
+            skin: skin ?? 'none',
+            active: active ?? false,
+            icon: icon ?? false
+        }
+    });
+}
+
+describe('rendering', () => {
+    test('should render without skin', () => {
+        const wrapper = createComponent({ skin: 'none' });
+
+        expect(wrapper.classes('zw-button--none')).toBeFalsy();
+    });
+
+    test('should render with skin', () => {
+        const wrapper = createComponent({ skin: 'toolbar' });
+
+        expect(wrapper.classes('zw-button--toolbar')).toBeTruthy();
+    });
+
+    test('should render active state', () => {
+        const wrapper = createComponent({ active: true });
+
+        expect(wrapper.classes('zw-button--active')).toBeTruthy();
+    });
+
+    test('should render inactive state', () => {
+        const wrapper = createComponent({ active: false });
+
+        expect(wrapper.classes('zw-button--active')).toBeFalsy();
+    });
+
+    test('should render icon style', () => {
+        const wrapper = createComponent({ icon: true });
+
+        expect(wrapper.classes('zw-button--icon')).toBeTruthy();
+    });
+
+    test('should render icon style', () => {
+        const wrapper = createComponent({ icon: false });
+
+        expect(wrapper.classes('zw-button--icon')).toBeFalsy();
+    });
+});

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

@@ -0,0 +1,56 @@
+import { shallowMount } from '@vue/test-utils';
+import Icon from '../Icon';
+
+jest.mock('../../assets/icons.svg', () => 'http://zipify.com/icons.svg');
+
+function createComponent({ name, size, isAutoColor } = {}) {
+    return shallowMount(Icon, {
+        propsData: {
+            name: name ?? 'test',
+            size: size ?? '',
+            autoColor: isAutoColor ?? false
+        }
+    });
+}
+
+describe('rendering', () => {
+    test('should render url to icon', () => {
+        const wrapper = createComponent({ name: 'close' });
+        const useWrapper = wrapper.find('use');
+
+        expect(useWrapper.attributes('href')).toBe('http://zipify.com/icons.svg#close');
+    });
+
+    test('should render without size', () => {
+        const wrapper = createComponent({ size: '' });
+
+        expect(wrapper.attributes('width')).toBeFalsy();
+        expect(wrapper.attributes('height')).toBeFalsy();
+    });
+
+    test('should render size without units', () => {
+        const wrapper = createComponent({ size: '12' });
+
+        expect(wrapper.attributes('width')).toBe('12px');
+        expect(wrapper.attributes('height')).toBe('12px');
+    });
+
+    test('should percent size', () => {
+        const wrapper = createComponent({ size: '12%' });
+
+        expect(wrapper.attributes('width')).toBe('12%');
+        expect(wrapper.attributes('height')).toBe('12%');
+    });
+
+    test('should render auto color style', () => {
+        const wrapper = createComponent({ isAutoColor: true });
+
+        expect(wrapper.classes('zw-icon--auto-color')).toBeTruthy();
+    });
+
+    test('should not render auto color style', () => {
+        const wrapper = createComponent({ isAutoColor: false });
+
+        expect(wrapper.classes('zw-icon--auto-color')).toBeFalsy();
+    });
+});

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

@@ -0,0 +1,69 @@
+import { nextTick, ref } from '@vue/composition-api';
+import { shallowMount } from '@vue/test-utils';
+import { InjectionTokens } from '../../../injectionTokens';
+import Modal from '../Modal';
+
+const createToggler = (isOpened) => ({
+    close: jest.fn(),
+    isOpened: ref(isOpened ?? true)
+});
+
+function createComponent({ toggler, maxHeight, maxWidth } = {}) {
+    return shallowMount(Modal, {
+        stubs: {
+            transition: {
+                render() {
+                    return this.$slots.default?.[0];
+                }
+            }
+        },
+        propsData: {
+            toggler: toggler ?? createToggler(true),
+            maxHeight: maxHeight ?? 1000,
+            maxWidth: maxWidth ?? 1000
+        },
+        provide: { [InjectionTokens.EDITOR]: null }
+    });
+}
+
+describe('open/close', () => {
+    test('should opened', () => {
+        const toggler = createToggler(true);
+        const wrapper = createComponent({ toggler });
+
+        expect(wrapper).not.toVueEmpty();
+    });
+
+    test('should render closed', () => {
+        const toggler = createToggler(false);
+        const wrapper = createComponent({ toggler });
+
+        expect(wrapper).toVueEmpty();
+    });
+
+    test('should open', async () => {
+        const toggler = createToggler(false);
+        const wrapper = createComponent({ toggler });
+
+        toggler.isOpened.value = true;
+        await nextTick();
+
+        expect(wrapper).not.toVueEmpty();
+    });
+});
+
+describe('rendering', () => {
+    test('should render max width', () => {
+        const wrapper = createComponent({ maxWidth: 256 });
+        const maxWidth = wrapper.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');
+
+        expect(maxHeight).toBe('256px');
+    });
+});

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

@@ -0,0 +1,39 @@
+import { shallowMount } from '@vue/test-utils';
+import Range from '../Range';
+
+function createComponent({ min, max, step, value }) {
+    return shallowMount(Range, {
+        propsData: {
+            min: min ?? '1',
+            max: max ?? '3',
+            step: step ?? '0.1',
+            value: value ?? '1.2'
+        }
+    });
+}
+
+describe('rendering', () => {
+    test('should calc range progress', () => {
+        const wrapper = createComponent({
+            min: '1',
+            max: '2',
+            step: '0.5',
+            value: '1.5'
+        });
+        const progress = wrapper.element.style.getPropertyValue('--zw-range-progress');
+
+        expect(progress).toBe('50%');
+    });
+
+    test('should round non full step progress', () => {
+        const wrapper = createComponent({
+            min: '1',
+            max: '2',
+            step: '0.5',
+            value: '1.2'
+        });
+        const progress = wrapper.element.style.getPropertyValue('--zw-range-progress');
+
+        expect(progress).toBe('50%');
+    });
+});

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

@@ -0,0 +1,93 @@
+<template>
+    <ZipifyColorPicker
+        ref="pickerRef"
+        placement="bottom-end"
+        :favorite-colors="favoriteColors"
+        @changeFavoriteColors="updateFavoriteColors"
+        v-model="editingColor"
+        v-out-click="{ onOutClick: close, isDisabled: !isOpened }"
+    >
+        <template #activator>
+            <slot
+                name="activator"
+                :isOpened="isOpened"
+                :open="open"
+                :close="close"
+                :toggle="toggle"
+            />
+        </template>
+    </ZipifyColorPicker>
+</template>
+
+<script>
+import { ZipifyColorPicker } from 'zipify-colorpicker';
+import { inject, ref, toRef } from '@vue/composition-api';
+import { outClick } from '../../../directives';
+import { InjectionTokens } from '../../../injectionTokens';
+import { useDeselectionLock } from '../composables';
+import { usePickerApi, usePickerHotkeys } from './composables';
+
+export default {
+    name: 'ColorPicker',
+
+    components: {
+        ZipifyColorPicker
+    },
+
+    directives: {
+        outClick
+    },
+
+    props: {
+        value: {
+            type: String,
+            required: true
+        }
+    },
+
+    setup(props, { emit }) {
+        const favoriteColors = inject(InjectionTokens.FAVORITE_COLORS);
+        const editor = inject(InjectionTokens.EDITOR);
+        const pickerRef = ref(null);
+
+        const api = usePickerApi({
+            onClosed: (color) => {
+                editor.commands.restoreSelection();
+                if (color !== props.value) emit('change', color);
+            },
+            onBeforeOpened: () => {
+                editor.commands.storeSelection();
+                emit('before-opened');
+            },
+            pickerRef,
+            initialColorRef: toRef(props, 'value')
+        });
+
+        usePickerHotkeys({
+            isOpenedRef: api.isOpened,
+            onCancel: () => api.cancel(),
+            onApply: () => api.close()
+        });
+
+        useDeselectionLock({
+            hostRef: pickerRef,
+            isActiveRef: api.isOpened
+        });
+
+        function updateFavoriteColors(colors) {
+            favoriteColors.triggerUpdate(colors);
+        }
+
+        return {
+            pickerRef,
+            isOpened: api.isOpened,
+            editingColor: api.editingColor,
+            open: api.open,
+            close: api.close,
+            toggle: api.toggle,
+            favoriteColors: favoriteColors.listRef,
+            updateFavoriteColors
+        };
+    }
+};
+</script>

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

@@ -0,0 +1,81 @@
+import { ref } from '@vue/composition-api';
+import { usePickerApi } from '../usePickerApi';
+
+const createPickerRef = ({ isOpened } = {}) => ref({
+    colorModel: {
+        alpha: 1,
+        toHexString: jest.fn(),
+        toRgbaString: jest.fn()
+    },
+    $el: document.createElement('div'),
+    isVisible: isOpened ?? false,
+    open: jest.fn(),
+    close: jest.fn(),
+    toggle: jest.fn()
+});
+
+describe('open/close picker', () => {
+    test('should return opened status', () => {
+        const toggler = usePickerApi({
+            onClosed: jest.fn(),
+            onBeforeOpened: jest.fn(),
+            pickerRef: createPickerRef({ isOpened: true }),
+            initialColorRef: ref('red')
+        });
+
+        expect(toggler.isOpened.value).toBe(true);
+    });
+
+    test('should return non opened status if picker not rendered yet', () => {
+        const toggler = usePickerApi({
+            onClosed: jest.fn(),
+            onBeforeOpened: jest.fn(),
+            pickerRef: ref(null),
+            initialColorRef: ref('red')
+        });
+
+        expect(toggler.isOpened.value).toBe(false);
+    });
+
+    test('should open picker', () => {
+        const pickerRef = createPickerRef({ isOpened: true });
+        const toggler = usePickerApi({
+            onClosed: jest.fn(),
+            onBeforeOpened: jest.fn(),
+            pickerRef,
+            initialColorRef: ref('red')
+        });
+
+        toggler.open();
+
+        expect(pickerRef.value.open).toHaveBeenCalled();
+    });
+
+    test('should toggle picker', () => {
+        const pickerRef = createPickerRef({ isOpened: true });
+        const toggler = usePickerApi({
+            onClosed: jest.fn(),
+            onBeforeOpened: jest.fn(),
+            pickerRef,
+            initialColorRef: ref('red')
+        });
+
+        toggler.toggle();
+
+        expect(pickerRef.value.close).toHaveBeenCalled();
+    });
+
+    test('should close picker', () => {
+        const pickerRef = createPickerRef({ isOpened: true });
+        const toggler = usePickerApi({
+            onClosed: jest.fn(),
+            onBeforeOpened: jest.fn(),
+            pickerRef,
+            initialColorRef: ref('red')
+        });
+
+        toggler.close();
+
+        expect(pickerRef.value.close).toHaveBeenCalled();
+    });
+});

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

@@ -0,0 +1,2 @@
+export { usePickerApi } from './usePickerApi';
+export { usePickerHotkeys } from './usePickerHotkeys';

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

@@ -0,0 +1,35 @@
+import { computed, ref } from '@vue/composition-api';
+
+export function usePickerApi({ pickerRef, initialColorRef, onClosed, onBeforeOpened }) {
+    const editingColor = ref(initialColorRef.value);
+    const isOpened = computed(() => pickerRef.value?.isVisible ?? false);
+
+    function open() {
+        onBeforeOpened();
+        editingColor.value = initialColorRef.value;
+        pickerRef.value.open(pickerRef.value.$el);
+    }
+
+    function close() {
+        pickerRef.value.close(editingColor.value);
+        onClosed(editingColor.value);
+    }
+
+    function toggle() {
+        isOpened.value ? close() : open();
+    }
+
+    function cancel() {
+        editingColor.value = initialColorRef.value;
+        pickerRef.value.close(editingColor.value);
+    }
+
+    return {
+        isOpened,
+        editingColor,
+        open,
+        close,
+        toggle,
+        cancel
+    };
+}

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

@@ -0,0 +1,25 @@
+import { ref } from '@vue/composition-api';
+import { useActivatedListener } from '../../composables';
+
+export function usePickerHotkeys({ isOpenedRef, onCancel, onApply }) {
+    function useHotkey(event, handler) {
+        event.stopImmediatePropagation();
+        event.preventDefault();
+        handler();
+    }
+
+    function handle(event) {
+        switch (event.key) {
+            case 'Escape': return useHotkey(event, onCancel);
+            case 'Enter': return useHotkey(event, onApply);
+        }
+    }
+
+    useActivatedListener({
+        targetRef: ref(document),
+        isActiveRef: isOpenedRef,
+        event: 'keydown',
+        onEvent: handle,
+        options: { capture: true }
+    });
+}

package/lib/components/base/colorPicker/index.js

@@ -0,0 +1 @@
+export { default as ColorPicker } from './ColorPicker';

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

@@ -0,0 +1,89 @@
+import { nextTick, ref } from '@vue/composition-api';
+import { useActivatedListener } from '../useActivatedListener';
+import { withComponentContext } from '../../../../__tests__/utils';
+
+const createTargetEl = () => document.createElement('div');
+const createTargetRef = () => ref(createTargetEl());
+const click = (targetRef) => targetRef.value.dispatchEvent(new Event('click'));
+
+function useComposable(options) {
+    withComponentContext(() => {
+        useActivatedListener({
+            event: 'click',
+            isActiveRef: ref(true),
+            ...options
+        });
+    });
+}
+
+describe('toggle listener', () => {
+    test('should attach listener on create', () => {
+        const targetRef = createTargetRef();
+        const onEvent = jest.fn();
+
+        useComposable({
+            targetRef,
+            isActiveRef: ref(true),
+            onEvent
+        });
+
+        click(targetRef);
+
+        expect(onEvent).toHaveBeenCalled();
+    });
+
+    test('should not attach listener on create', () => {
+        const targetRef = createTargetRef();
+        const onEvent = jest.fn();
+
+        useComposable({
+            targetRef,
+            isActiveRef: ref(false),
+            onEvent
+        });
+
+        click(targetRef);
+
+        expect(onEvent).not.toHaveBeenCalled();
+    });
+
+    test('should not attach listener on create if no element', () => {
+        const onEvent = jest.fn();
+
+        useComposable({
+            targetRef: ref(null),
+            onEvent
+        });
+
+        expect(onEvent).not.toHaveBeenCalled();
+    });
+
+    test('should remove listener', async () => {
+        const targetRef = createTargetRef();
+        const isActiveRef = ref(true);
+        const onEvent = jest.fn();
+
+        useComposable({ targetRef, isActiveRef, onEvent });
+
+        isActiveRef.value = false;
+        await nextTick();
+
+        click(targetRef);
+
+        expect(onEvent).not.toHaveBeenCalled();
+    });
+
+    test('should add listener on change target', async () => {
+        const targetRef = ref(null);
+        const onEvent = jest.fn();
+
+        useComposable({ targetRef, onEvent });
+
+        targetRef.value = createTargetEl();
+        await nextTick();
+
+        click(targetRef);
+
+        expect(onEvent).toHaveBeenCalled();
+    });
+});

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

@@ -0,0 +1,80 @@
+import { ref } from '@vue/composition-api';
+import { setReadonlyProperty, withComponentContext } from '../../../../__tests__/utils';
+import { InjectionTokens } from '../../../../injectionTokens';
+import { useDeselectionLock } from '../useDeselectionLock';
+
+const createEditor = ({ isFocused } = {}) => ({
+    isFocused: isFocused ?? false,
+
+    commands: {
+        focus: jest.fn().mockReturnThis(),
+        restoreSelection: jest.fn().mockReturnThis(),
+        run: jest.fn()
+    },
+
+    chain() {
+        return this.commands;
+    }
+});
+
+function createWrapper({ hostEl, editor } = {}) {
+    return withComponentContext(() => {
+        return useDeselectionLock({ hostRef: ref(hostEl), isActiveRef: ref(true) });
+    }, {
+        provide: {
+            [InjectionTokens.EDITOR]: editor ?? createEditor({ isFocused: true })
+        }
+    });
+}
+
+const createHostEl = () => document.createElement('div');
+
+describe('prevent deselection', () => {
+    function click(el, { target } = {}) {
+        const event = new MouseEvent('mousedown');
+
+        event.preventDefault = jest.fn();
+        event.stopPropagation = jest.fn();
+        setReadonlyProperty(event, 'target', target || { tagName: 'DIV' });
+
+        el.dispatchEvent(event);
+
+        return event;
+    }
+
+    test('should do nothing if interactive tag', () => {
+        const editor = createEditor({ isFocused: true });
+        const hostEl = createHostEl();
+
+        createWrapper({ hostEl, editor });
+
+        const event = click(hostEl, {
+            target: { tagName: 'INPUT' }
+        });
+
+        expect(event.preventDefault).not.toHaveBeenCalled();
+        expect(event.stopPropagation).not.toHaveBeenCalled();
+    });
+
+    test('should prevent deselection if editor focused', () => {
+        const editor = createEditor({ isFocused: true });
+        const hostEl = createHostEl();
+
+        createWrapper({ hostEl, editor });
+
+        const event = click(hostEl);
+
+        expect(event.preventDefault).toHaveBeenCalled();
+        expect(event.stopPropagation).toHaveBeenCalled();
+    });
+
+    test('should restore selection if editor not focused', () => {
+        const editor = createEditor({ isFocused: false });
+        const hostEl = createHostEl();
+
+        createWrapper({ hostEl, editor });
+        click(hostEl);
+
+        expect(editor.commands.restoreSelection).toHaveBeenCalled();
+    });
+});

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

@@ -0,0 +1,29 @@
+import { h, ref } from '@vue/composition-api';
+import { shallowMount } from '@vue/test-utils';
+import { useElementRef } from '../useElementRef';
+
+const TestComponent = {
+    render: () => h('div')
+};
+
+describe('resolve element from ref', () => {
+    test('should return null if no element', () => {
+        const elementRef = useElementRef(ref(null));
+
+        expect(elementRef.value).toBe(null);
+    });
+
+    test('should return element if dom ref', () => {
+        const el = document.createElement('div');
+        const elementRef = useElementRef(ref(el));
+
+        expect(elementRef.value).toBe(el);
+    });
+
+    test('should return element if component', () => {
+        const wrapper = shallowMount(TestComponent);
+        const elementRef = useElementRef(ref(wrapper.vm));
+
+        expect(elementRef.value).toBe(wrapper.vm.$el);
+    });
+});