@zipify/wysiwyg 1.0.0-dev.1

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

@@ -0,0 +1,55 @@
+import { ref } from '@vue/composition-api';
+import { withComponentContext } from '../../../../__tests__/utils';
+import { InjectionTokens } from '../../../../injectionTokens';
+import { useModalToggler } from '../useModalToggler';
+import { useElementRef } from '../useElementRef';
+
+const createEditor = () => ({
+    commands: {
+        storeSelection: jest.fn(),
+        restoreSelection: jest.fn()
+    }
+});
+
+const el = document.createElement('div');
+const elementRef = useElementRef(ref(el));
+
+function createWrapper() {
+    return withComponentContext(() => {
+        return useModalToggler({
+            onClosed: jest.fn(),
+            onBeforeOpened: jest.fn(),
+            wrapperRef: elementRef,
+            modalRef: elementRef
+        });
+    }, {
+        provide: { [InjectionTokens.EDITOR]: createEditor() }
+    });
+}
+
+describe('manage opened state', () => {
+    test('should open modal', () => {
+        const toggler = createWrapper();
+
+        toggler.open();
+
+        expect(toggler.isOpened.value).toBe(true);
+    });
+
+    test('should close modal', () => {
+        const toggler = createWrapper();
+
+        toggler.open();
+        toggler.close();
+
+        expect(toggler.isOpened.value).toBe(false);
+    });
+
+    test('should toggle modal', () => {
+        const toggler = createWrapper();
+
+        toggler.toggle(true);
+
+        expect(toggler.isOpened.value).toBe(true);
+    });
+});

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

@@ -0,0 +1,153 @@
+import { ref } from '@vue/composition-api';
+import { useNumberValue } from '../useNumberValue';
+
+describe('change', () => {
+    test('should set value', () => {
+        const number = useNumberValue({
+            min: 1,
+            max: 10,
+            digits: 2,
+            onChange: jest.fn(),
+            valueRef: ref(5)
+        });
+
+        number.change('7');
+
+        expect(number.temp.value).toBe(7);
+    });
+
+    test('should set min value if passed empty', () => {
+        const number = useNumberValue({
+            min: 1,
+            max: 10,
+            digits: 2,
+            onChange: jest.fn(),
+            valueRef: ref(5)
+        });
+
+        number.change('');
+
+        expect(number.temp.value).toBe(1);
+    });
+
+    test('should set min value', () => {
+        const number = useNumberValue({
+            min: 1,
+            max: 10,
+            digits: 2,
+            onChange: jest.fn(),
+            valueRef: ref(5)
+        });
+
+        number.change('-10');
+
+        expect(number.temp.value).toBe(1);
+    });
+
+    test('should set max value', () => {
+        const number = useNumberValue({
+            min: 1,
+            max: 10,
+            digits: 2,
+            onChange: jest.fn(),
+            valueRef: ref(5)
+        });
+
+        number.change('1000');
+
+        expect(number.temp.value).toBe(10);
+    });
+
+    test('should format float value', () => {
+        const number = useNumberValue({
+            min: 1,
+            max: 10,
+            digits: 2,
+            onChange: jest.fn(),
+            valueRef: ref(5)
+        });
+
+        number.change('1.123');
+
+        expect(number.temp.value).toBe(1.12);
+    });
+
+    test('should format integer value', () => {
+        const number = useNumberValue({
+            min: 1,
+            max: 10,
+            digits: 2,
+            onChange: jest.fn(),
+            valueRef: ref(5)
+        });
+
+        number.change('1.00');
+
+        expect(number.temp.value).toBe(1);
+    });
+});
+
+describe('increment', () => {
+    test('should increment value', () => {
+        const number = useNumberValue({
+            min: 1,
+            max: 10,
+            digits: 2,
+            onChange: jest.fn(),
+            valueRef: ref(5)
+        });
+
+        number.increment(1);
+
+        expect(number.temp.value).toBe(6);
+    });
+
+    test('should set max value', () => {
+        const number = useNumberValue({
+            min: 1,
+            max: 10,
+            digits: 2,
+            onChange: jest.fn(),
+            valueRef: ref(9)
+        });
+
+        number.increment(1);
+        number.increment(1);
+        number.increment(1);
+
+        expect(number.temp.value).toBe(10);
+    });
+});
+
+
+describe('decrement', () => {
+    test('should decrement value', () => {
+        const number = useNumberValue({
+            min: 1,
+            max: 10,
+            digits: 2,
+            onChange: jest.fn(),
+            valueRef: ref(5)
+        });
+
+        number.decrement(1);
+
+        expect(number.temp.value).toBe(4);
+    });
+
+    test('should set min value', () => {
+        const number = useNumberValue({
+            min: 1,
+            max: 10,
+            digits: 2,
+            onChange: jest.fn(),
+            valueRef: ref(2)
+        });
+
+        number.decrement(1);
+        number.decrement(1);
+        number.decrement(1);
+
+        expect(number.temp.value).toBe(1);
+    });
+});

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

@@ -0,0 +1,43 @@
+import { ref } from '@vue/composition-api';
+import { SCROLL_VIEW, useScrollView } from '../useScrollView';
+import { withComponentContext } from '../../../../__tests__/utils';
+
+function useComposable({ scrollerEl }) {
+    return withComponentContext(() => useScrollView(), {
+        provide: { [SCROLL_VIEW]: ref(scrollerEl) }
+    });
+}
+
+const createScrollerEl = () => document.createElement('div');
+
+beforeEach(() => HTMLElement.prototype.scrollTo.mockClear());
+
+describe('scroll to element', () => {
+    const createScrollTargetEl = () => document.createElement('div');
+
+    test('should scroll to element top', () => {
+        const scrollerEl = createScrollerEl();
+        const scrollTargetEl = createScrollTargetEl();
+        const scrollView = useComposable({ scrollerEl });
+
+        jest.spyOn(scrollerEl, 'getBoundingClientRect').mockReturnValueOnce({ top: 100 });
+        jest.spyOn(scrollTargetEl, 'getBoundingClientRect').mockReturnValueOnce({ top: 150 });
+
+        scrollView.scrollToElement(scrollTargetEl);
+
+        expect(scrollerEl.scrollTo).toHaveBeenCalledWith({ top: 50 });
+    });
+
+    test('should scroll to element top with offset', () => {
+        const scrollerEl = createScrollerEl();
+        const scrollTargetEl = createScrollTargetEl();
+        const scrollView = useComposable({ scrollerEl });
+
+        jest.spyOn(scrollerEl, 'getBoundingClientRect').mockReturnValueOnce({ top: 100 });
+        jest.spyOn(scrollTargetEl, 'getBoundingClientRect').mockReturnValueOnce({ top: 150 });
+
+        scrollView.scrollToElement(scrollTargetEl, { offset: 33 });
+
+        expect(scrollerEl.scrollTo).toHaveBeenCalledWith({ top: 17 });
+    });
+});

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

@@ -0,0 +1,38 @@
+import { nextTick, ref } from '@vue/composition-api';
+import { useTempValue } from '../useTempValue';
+
+describe('sync with original', () => {
+    test('should sync on create', () => {
+        const valueRef = ref(123);
+        const temp = useTempValue({ valueRef });
+
+        expect(temp.value).toBe(123);
+    });
+
+    test('should format original on create', () => {
+        const valueRef = ref('123');
+        const temp = useTempValue({ valueRef, format: Number });
+
+        expect(temp.value).toBe(123);
+    });
+
+    test('should sync on change', async () => {
+        const valueRef = ref('old');
+        const temp = useTempValue({ valueRef });
+
+        valueRef.value = 'new';
+        await nextTick();
+
+        expect(temp.value).toBe('new');
+    });
+
+    test('should format original on change', async () => {
+        const valueRef = ref('100');
+        const temp = useTempValue({ valueRef, format: Number });
+
+        valueRef.value = '123';
+        await nextTick();
+
+        expect(temp.value).toBe(123);
+    });
+});

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

@@ -0,0 +1,7 @@
+export { useTempValue } from './useTempValue';
+export { useElementRef } from './useElementRef';
+export { useNumberValue } from './useNumberValue';
+export { useModalToggler } from './useModalToggler';
+export { useActivatedListener } from './useActivatedListener';
+export { useDeselectionLock } from './useDeselectionLock';
+export { useScrollView, SCROLL_VIEW } from './useScrollView';

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

@@ -0,0 +1,23 @@
+import { onUnmounted, watch } from '@vue/composition-api';
+
+export function useActivatedListener({ targetRef, isActiveRef, event, onEvent, options }) {
+    function addListener() {
+        targetRef.value.addEventListener(event, onEvent, options);
+    }
+
+    function removeListener() {
+        targetRef.value?.removeEventListener(event, onEvent, options);
+    }
+
+    function updateListener() {
+        if (!targetRef.value) return;
+
+        isActiveRef.value ? addListener() : removeListener();
+    }
+
+    watch(isActiveRef, updateListener);
+    watch(targetRef, updateListener);
+    onUnmounted(removeListener);
+
+    updateListener();
+}

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

@@ -0,0 +1,35 @@
+import { inject } from '@vue/composition-api';
+import { InjectionTokens } from '../../../injectionTokens';
+import { useActivatedListener } from './useActivatedListener';
+import { useElementRef } from './useElementRef';
+
+const INTERACTIVE_TAGS = [
+    'BUTTON',
+    'INPUT',
+    'LABEL',
+    'A'
+];
+
+// Prevent wswg text deselection
+export function useDeselectionLock({ hostRef, isActiveRef }) {
+    const editor = inject(InjectionTokens.EDITOR);
+    const targetRef = useElementRef(hostRef);
+
+    function onEvent(event) {
+        if (INTERACTIVE_TAGS.includes(event.target.tagName)) return;
+
+        if (editor.isFocused) {
+            event.stopPropagation();
+            event.preventDefault();
+        }
+
+        editor.chain().restoreSelection().run();
+    }
+
+    useActivatedListener({
+        event: 'mousedown',
+        targetRef,
+        isActiveRef,
+        onEvent
+    });
+}

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

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

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

@@ -0,0 +1,58 @@
+import { createPopper } from '@popperjs/core';
+import { inject, nextTick, ref, onUnmounted } from '@vue/composition-api';
+import { InjectionTokens } from '../../../injectionTokens';
+import { useElementRef } from './useElementRef';
+
+export function useModalToggler({ onBeforeOpened, onClosed, wrapperRef, modalRef } = {}) {
+    const editor = inject(InjectionTokens.EDITOR);
+    const isOpened = ref(false);
+    let popper;
+
+    function initPopper() {
+        const wrapperEl = useElementRef(wrapperRef);
+        const modalEl = useElementRef(modalRef);
+
+        popper = createPopper(wrapperEl.value, modalEl.value, {
+            placement: 'bottom',
+            modifiers: [
+                {
+                    name: 'offset',
+                    options: {
+                        offset: [0, 4]
+                    }
+                },
+
+                {
+                    name: 'preventOverflow',
+                    options: {
+                        padding: 16
+                    }
+                }
+            ]
+        });
+    }
+
+    async function open() {
+        onBeforeOpened?.();
+        editor.commands.storeSelection();
+        isOpened.value = true;
+
+        await nextTick();
+
+        initPopper();
+    }
+
+    function close() {
+        isOpened.value = false;
+        editor.commands.restoreSelection();
+        onClosed?.();
+    }
+
+    onUnmounted(() => {
+        popper?.destroy();
+    });
+
+    const toggle = (toOpen) => toOpen ? open() : close();
+
+    return { isOpened, open, close, toggle };
+}

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

@@ -0,0 +1,53 @@
+import { useTempValue } from './useTempValue';
+
+export function useNumberValue({ valueRef, digits, min, max, onChange }) {
+    function format(number) {
+        return Number(parseFloat(number).toFixed(digits));
+    }
+
+    const temp = useTempValue({ valueRef, format });
+
+    function validateNumber(number) {
+        if (min !== null && number < min) return min;
+        if (max !== null && number > max) return max;
+
+        return number;
+    }
+
+    function change(value) {
+        temp.value = value;
+
+        if (temp.value === '') {
+            temp.value = min ?? 1;
+        }
+
+        const numericValue = Number.parseFloat(temp.value);
+        const validatedNumber = validateNumber(numericValue);
+
+        temp.value = format(validatedNumber);
+        onChange(temp.value);
+    }
+
+    function increment(step) {
+        const newValue = temp.value + Number(step);
+        const validatedNumber = validateNumber(newValue);
+
+        temp.value = format(validatedNumber);
+        onChange(temp.value);
+    }
+
+    function decrement(step) {
+        const newValue = temp.value - Number(step);
+        const validatedNumber = validateNumber(newValue);
+
+        temp.value = format(validatedNumber);
+        onChange(temp.value);
+    }
+
+    return {
+        temp,
+        change,
+        increment,
+        decrement
+    };
+}

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

@@ -0,0 +1,22 @@
+import { inject } from '@vue/composition-api';
+
+export const SCROLL_VIEW = Symbol('scrollView');
+
+export function useScrollView() {
+    const scrollerRef = inject(SCROLL_VIEW);
+
+    function scrollToElement(element, { offset } = {}) {
+        if (!scrollerRef.value) return;
+
+        const rootRect = scrollerRef.value.getBoundingClientRect();
+        const elementRect = element.getBoundingClientRect();
+        const position = elementRect.top - rootRect.top;
+
+        scrollerRef.value.scrollTo({
+            top: position - (offset || 0)
+        });
+    }
+
+    return { scrollToElement };
+}
+

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

@@ -0,0 +1,11 @@
+import { ref, watch } from '@vue/composition-api';
+
+const noFormatter = (value) => value;
+
+export function useTempValue({ valueRef, format = noFormatter }) {
+    const tempValue = ref(format(valueRef.value));
+
+    watch(valueRef, () => tempValue.value = format(valueRef.value));
+
+    return tempValue;
+}

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

@@ -0,0 +1,88 @@
+<template>
+    <div class="zw-dropdown" ref="dropdownRef">
+        <DropdownActivator>
+            <template #default="attrs">
+                <slot name="activator" v-bind="attrs" />
+            </template>
+        </DropdownActivator>
+
+        <Modal max-height="300" max-width="156" :toggler="toggler" ref="modalRef">
+            <DropdownMenu :options="options">
+                <template #option="attrs">
+                    <slot name="option" v-bind="attrs" />
+                </template>
+            </DropdownMenu>
+        </Modal>
+    </div>
+</template>
+
+<script>
+import { provide, toRef, ref } from '@vue/composition-api';
+import Modal from '../Modal';
+import { useModalToggler } from '../composables';
+import { InjectionTokens } from './injectionTokens';
+import DropdownActivator from './DropdownActivator';
+import DropdownMenu from './DropdownMenu';
+import { useActiveOptionManager } from './composables';
+
+export default {
+    name: 'Dropdown',
+
+    components: {
+        Modal,
+        DropdownActivator,
+        DropdownMenu
+    },
+
+    model: {
+        event: 'change'
+    },
+
+    props: {
+        value: {
+            type: String,
+            required: false,
+            default: null
+        },
+
+        options: {
+            type: Array,
+            required: true
+        }
+    },
+
+    setup(props, { emit }) {
+        const dropdownRef = ref(null);
+        const modalRef = ref(null);
+
+        const activeOptionManager = useActiveOptionManager({
+            optionsRef: toRef(props, 'options'),
+            inputRef: toRef(props, 'value'),
+            stateless: props.value === null,
+            onChange: (value) => emit('change', value.id)
+        });
+
+        const toggler = useModalToggler({
+            wrapperRef: dropdownRef,
+            modalRef
+        });
+
+        provide(InjectionTokens.ACTIVE_MANAGER, activeOptionManager);
+        provide(InjectionTokens.TOGGLER, toggler);
+
+        return {
+            dropdownRef,
+            modalRef,
+            toggler
+        };
+    }
+};
+</script>
+
+<style scoped>
+.zw-dropdown {
+    position: relative;
+    font-size: var(--zw-font-size-xs);
+    line-height: var(--zw-line-height-xxs);
+}
+</style>

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

@@ -0,0 +1,81 @@
+<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>
+</template>
+
+<script>
+import { computed, inject } from '@vue/composition-api';
+import Button from '../Button';
+import Icon from '../Icon';
+import { InjectionTokens } from './injectionTokens';
+import { useDropdownEntityTitle } from './composables';
+
+export default {
+    name: 'DropdownActivator',
+
+    components: {
+        Icon,
+        Button
+    },
+
+    model: {
+        event: 'change'
+    },
+
+    setup() {
+        const activeOptionManager = inject(InjectionTokens.ACTIVE_MANAGER);
+        const dropdownToggler = inject(InjectionTokens.TOGGLER);
+
+        const activeOptionTitle = useDropdownEntityTitle(activeOptionManager.activeOption);
+
+        const dropdownClasses = computed(() => ({
+            'zw-dropdown__activator--active': dropdownToggler.isOpened.value
+        }));
+
+        return {
+            activeOptionTitle,
+            isOpened: dropdownToggler.isOpened,
+            open: dropdownToggler.open,
+            dropdownClasses
+        };
+    }
+};
+</script>
+
+<style scoped>
+.zw-dropdown__activator {
+    width: 100%;
+}
+
+.zw-dropdown__activator-title {
+    margin-right: var(--zw-offset-xs);
+}
+
+.zw-dropdown__activator-arrow {
+    margin-left: auto;
+}
+
+.zw-dropdown__activator--active .zw-dropdown__activator-arrow {
+    transform: rotateX(180deg);
+}
+</style>