@zipify/wysiwyg 1.0.0-dev.9 → 1.0.0-dev.90

package/lib/components/base/TextField.vue

@@ -0,0 +1,108 @@
+<template>
+    <div class="zw-field">
+        <label class="zw-field__label" :for="fieldId" data-test-selector="label">
+            {{ label }}
+        </label>
+
+        <input
+            class="zw-field__input"
+            type="text"
+            :value="value"
+            :id="fieldId"
+            :placeholder="placeholder"
+            @input="onInput"
+            data-test-selector="input"
+        >
+
+        <p class="zw-field__label--error" v-if="error" data-test-selector="error">
+            {{ error }}
+        </p>
+    </div>
+</template>
+
+<script>
+import { computed } from 'vue';
+
+export default {
+    name: 'TextField',
+
+    props: {
+        value: {
+            type: [Number, String],
+            required: true
+        },
+
+        label: {
+            type: String,
+            required: true
+        },
+
+        placeholder: {
+            type: String,
+            required: false,
+            default: ''
+        },
+
+        error: {
+            type: String,
+            required: false,
+            default: null
+        }
+    },
+
+    setup(props, { emit }) {
+        const onInput = (event) => emit('input', event.target.value);
+        const fieldId = computed(() => {
+            return props.label.toLowerCase().replace(/[^a-zA-Z0-9]+(.)/g, (m, chr) => chr.toUpperCase());
+        });
+
+        return { onInput, fieldId };
+    }
+};
+</script>
+
+<style scoped>
+.zw-field {
+    display: flex;
+    flex-direction: column;
+}
+
+.zw-field__input {
+    --border-color: rgb(var(--zw-color-n60));
+    --text-color: rgb(var(--zw-color-n85));
+
+    border: 1px solid var(--border-color);
+    background-color: transparent;
+    color: var(--text-color);
+    font-size: var(--zw-font-size-xxs);
+    outline: none;
+    padding: 6px;
+    line-height: var(--zw-line-height-xxs);
+    transition: 0.1s border ease-out, 0.1s color ease-out;
+    will-change: border, color;
+}
+
+.zw-field__input:hover {
+    --border-color: rgb(var(--zw-color-n80));
+    --text-color: rgb(var(--zw-color-n85));
+}
+
+.zw-field__input:focus,
+.zw-field__input:focus-within {
+    --border-color: rgb(var(--zw-color-white));
+    --text-color: rgb(var(--zw-color-white));
+}
+
+.zw-field__label {
+    display: inline-block;
+    font-size: var(--zw-font-size-xxs);
+    padding-bottom: var(--zw-offset-xxs);
+    line-height: var(--zw-line-height-xxs);
+}
+
+.zw-field__label--error {
+    font-size: var(--zw-font-size-xxs);
+    margin: var(--zw-offset-xxs) 0 0;
+    color: rgb(var(--zw-color-red));
+}
+</style>

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

@@ -1,8 +1,13 @@
-import { nextTick, ref } from '@vue/composition-api';
+import { nextTick, ref } from 'vue';
 import { shallowMount } from '@vue/test-utils';
 import { InjectionTokens } from '../../../injectionTokens';
 import Modal from '../Modal';
 
+jest.mock('../composables', () => ({
+    useDeselectionLock: jest.fn(),
+    useModalToggler: jest.fn()
+}));
+
 const createToggler = (isOpened) => ({
     close: jest.fn(),
     isOpened: ref(isOpened ?? true)
@@ -42,7 +47,7 @@ describe('open/close', () => {
     });
 
     test('should open', async () => {
-        const toggler = createToggler(false);
+        const toggler = createToggler({ value: false });
         const wrapper = createComponent({ toggler });
 
         toggler.isOpened.value = true;

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

@@ -0,0 +1,57 @@
+import { shallowMount } from '@vue/test-utils';
+import TextField from '../TextField';
+
+function createComponent(label, error) {
+    return shallowMount(TextField, {
+        propsData: {
+            value: '',
+            label: label ?? '',
+            placeholder: '',
+            error: error ?? null
+        }
+    });
+}
+
+const SELECTORS = {
+    LABEL: '[data-test-selector="label"]',
+    INPUT: '[data-test-selector="input"]',
+    ERROR: '[data-test-selector="error"]'
+};
+
+describe('rendering', () => {
+    test('should render label', () => {
+        const label = 'Hello world!';
+        const wrapper = createComponent(label);
+
+        expect(wrapper.find(SELECTORS.LABEL).text()).toEqual(label);
+    });
+
+    test('should generate label', () => {
+        const wrapper = createComponent('hello world label');
+
+        expect(wrapper.find(SELECTORS.INPUT).element.id).toBe('helloWorldLabel');
+    });
+
+    test('should render errors', () => {
+        const wrapper = createComponent('_', 'some error');
+
+        expect(wrapper.contains(SELECTORS.ERROR)).toBeTruthy();
+    });
+
+    test('should not render errors', () => {
+        const wrapper = createComponent();
+
+        expect(wrapper.contains(SELECTORS.ERROR)).toBeFalsy();
+    });
+});
+
+describe('input change handling', () => {
+    test('should emit parsed value', () => {
+        const wrapper = createComponent();
+        const inputComponentWrapper = wrapper.find(SELECTORS.INPUT);
+
+        inputComponentWrapper.setValue('Hello world!!!');
+
+        expect(wrapper.emitted('input')).toMatchSnapshot();
+    });
+});

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

@@ -0,0 +1,9 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`input change handling should emit parsed value 1`] = `
+Array [
+  Array [
+    "Hello world!!!",
+  ],
+]
+`;

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

@@ -2,7 +2,9 @@
     <ZipifyColorPicker
         ref="pickerRef"
         placement="bottom-end"
+        placement-strategy="fixed"
         :favorite-colors="favoriteColors"
+        :window="window"
         @changeFavoriteColors="updateFavoriteColors"
         v-model="editingColor"
         v-out-click="{ onOutClick: close, isDisabled: !isOpened }"
@@ -20,10 +22,11 @@
 </template>
 
 <script>
-import { ZipifyColorPicker } from 'zipify-colorpicker';
-import { inject, ref, toRef } from '@vue/composition-api';
+import { ZipifyColorPicker } from '@zipify/colorpicker';
+import { inject, ref, toRef } from 'vue';
 import { outClick } from '../../../directives';
 import { InjectionTokens } from '../../../injectionTokens';
+import { ContextWindow } from '../../../services';
 import { useDeselectionLock } from '../composables';
 import { usePickerApi, usePickerHotkeys } from './composables';
 
@@ -51,16 +54,14 @@ export default {
         const pickerRef = ref(null);
 
         const api = usePickerApi({
-            onClosed: (color) => {
-                editor.commands.restoreSelection();
-                if (color !== props.value) emit('change', color);
+            onChange: (color) => {
+                emit('change', color);
+                editor.chain().focus().restoreSelection().run();
             },
-            onBeforeOpened: () => {
-                editor.commands.storeSelection();
-                emit('before-opened');
-            },
-            pickerRef,
-            initialColorRef: toRef(props, 'value')
+            onClosed: () => editor.commands.restoreSelection(),
+            onBeforeOpened: () => editor.commands.storeSelection(),
+            colorRef: toRef(props, 'value'),
+            pickerRef
         });
 
         usePickerHotkeys({
@@ -86,7 +87,8 @@ export default {
             close: api.close,
             toggle: api.toggle,
             favoriteColors: favoriteColors.listRef,
-            updateFavoriteColors
+            updateFavoriteColors,
+            window: ContextWindow.window
         };
     }
 };

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

@@ -1,4 +1,4 @@
-import { ref } from '@vue/composition-api';
+import { ref } from 'vue';
 import { usePickerApi } from '../usePickerApi';
 
 const createPickerRef = ({ isOpened } = {}) => ref({
@@ -20,7 +20,7 @@ describe('open/close picker', () => {
             onClosed: jest.fn(),
             onBeforeOpened: jest.fn(),
             pickerRef: createPickerRef({ isOpened: true }),
-            initialColorRef: ref('red')
+            colorRef: ref('red')
         });
 
         expect(toggler.isOpened.value).toBe(true);
@@ -31,7 +31,7 @@ describe('open/close picker', () => {
             onClosed: jest.fn(),
             onBeforeOpened: jest.fn(),
             pickerRef: ref(null),
-            initialColorRef: ref('red')
+            colorRef: ref('red')
         });
 
         expect(toggler.isOpened.value).toBe(false);
@@ -43,7 +43,7 @@ describe('open/close picker', () => {
             onClosed: jest.fn(),
             onBeforeOpened: jest.fn(),
             pickerRef,
-            initialColorRef: ref('red')
+            colorRef: ref('red')
         });
 
         toggler.open();
@@ -57,7 +57,7 @@ describe('open/close picker', () => {
             onClosed: jest.fn(),
             onBeforeOpened: jest.fn(),
             pickerRef,
-            initialColorRef: ref('red')
+            colorRef: ref('red')
         });
 
         toggler.toggle();
@@ -71,7 +71,7 @@ describe('open/close picker', () => {
             onClosed: jest.fn(),
             onBeforeOpened: jest.fn(),
             pickerRef,
-            initialColorRef: ref('red')
+            colorRef: ref('red')
         });
 
         toggler.close();

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

@@ -1,18 +1,18 @@
-import { computed, ref } from '@vue/composition-api';
+import { computed } from 'vue';
 
-export function usePickerApi({ pickerRef, initialColorRef, onClosed, onBeforeOpened }) {
-    const editingColor = ref(initialColorRef.value);
+export function usePickerApi({ pickerRef, colorRef, onChange, onClosed, onBeforeOpened }) {
     const isOpened = computed(() => pickerRef.value?.isVisible ?? false);
+    let initialColor;
 
     function open() {
         onBeforeOpened();
-        editingColor.value = initialColorRef.value;
+        initialColor = colorRef.value;
         pickerRef.value.open(pickerRef.value.$el);
     }
 
     function close() {
-        pickerRef.value.close(editingColor.value);
-        onClosed(editingColor.value);
+        pickerRef.value?.close(colorRef.value);
+        onClosed();
     }
 
     function toggle() {
@@ -20,10 +20,17 @@ export function usePickerApi({ pickerRef, initialColorRef, onClosed, onBeforeOpe
     }
 
     function cancel() {
-        editingColor.value = initialColorRef.value;
-        pickerRef.value.close(editingColor.value);
+        const color = initialColor ?? colorRef.value;
+
+        onChange(color);
+        pickerRef.value?.close(color);
     }
 
+    const editingColor = computed({
+        get: () => colorRef.value,
+        set: (color) => colorRef.value !== color && onChange(color)
+    });
+
     return {
         isOpened,
         editingColor,

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

@@ -1,4 +1,5 @@
-import { ref } from '@vue/composition-api';
+import { ref } from 'vue';
+import { ContextWindow } from '../../../../services';
 import { useActivatedListener } from '../../composables';
 
 export function usePickerHotkeys({ isOpenedRef, onCancel, onApply }) {
@@ -16,7 +17,7 @@ export function usePickerHotkeys({ isOpenedRef, onCancel, onApply }) {
     }
 
     useActivatedListener({
-        targetRef: ref(document),
+        targetRef: ref(ContextWindow.document),
         isActiveRef: isOpenedRef,
         event: 'keydown',
         onEvent: handle,

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

@@ -1,4 +1,4 @@
-import { nextTick, ref } from '@vue/composition-api';
+import { nextTick, ref } from 'vue';
 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/composition-api';
+import { ref } from 'vue';
 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/composition-api';
+import { h, ref } from 'vue';
 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/composition-api';
+import { ref } from 'vue';
 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/composition-api';
+import { ref } from 'vue';
 import { useNumberValue } from '../useNumberValue';
 
 describe('change', () => {

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

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

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

@@ -0,0 +1,44 @@
+import { useValidator } from '../useValidator';
+
+describe('validation', () => {
+    test('should show error', () => {
+        const value = '';
+        const isEmpty = () => value ? false : 'Can\'t be empty';
+
+        const validator = useValidator({
+            validations: [isEmpty]
+        });
+
+        validator.validate();
+
+        expect(validator.error.value).toBe('Can\'t be empty');
+    });
+
+    test('should pass validation', () => {
+        const value = 'hello';
+        const isEmpty = () => value ? false : 'Can\'t be empty';
+
+        const validator = useValidator({
+            validations: [isEmpty]
+        });
+
+        validator.validate();
+
+        expect(validator.error.value).toBe(null);
+    });
+
+    test('should reset error', () => {
+        const value = '';
+        const isEmpty = () => value ? false : 'Can\'t be empty';
+
+        const validator = useValidator({
+            validations: [isEmpty]
+        });
+
+        validator.validate();
+        expect(validator.error.value).toBe('Can\'t be empty');
+
+        validator.reset();
+        expect(validator.error.value).toBe(null);
+    });
+});

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

@@ -1,3 +1,4 @@
+export { useValidator } from './useValidator';
 export { useTempValue } from './useTempValue';
 export { useElementRef } from './useElementRef';
 export { useNumberValue } from './useNumberValue';

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

@@ -1,4 +1,4 @@
-import { onUnmounted, watch } from '@vue/composition-api';
+import { onUnmounted, watch } from 'vue';
 
 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/composition-api';
+import { inject } from 'vue';
 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/composition-api';
+import { computed } from 'vue';
 
 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/composition-api';
+import { inject, nextTick, ref, onUnmounted } from 'vue';
 import { InjectionTokens } from '../../../injectionTokens';
 import { useElementRef } from './useElementRef';
 
@@ -14,6 +14,7 @@ export function useModalToggler({ onBeforeOpened, onClosed, wrapperRef, modalRef
 
         popper = createPopper(wrapperEl.value, modalEl.value, {
             placement: 'bottom',
+            strategy: 'fixed',
             modifiers: [
                 {
                     name: 'offset',
@@ -21,12 +22,15 @@ export function useModalToggler({ onBeforeOpened, onClosed, wrapperRef, modalRef
                         offset: [0, 4]
                     }
                 },
-
                 {
                     name: 'preventOverflow',
                     options: {
                         padding: 16
                     }
+                },
+                {
+                    name: 'flip',
+                    enabled: false
                 }
             ]
         });

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

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

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

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

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

@@ -0,0 +1,23 @@
+import { ref } from 'vue';
+
+export function useValidator({ validations }) {
+    const error = ref(null);
+
+    function validate() {
+        for (const validate of validations) {
+            const validationError = validate();
+
+            if (validationError) {
+                return error.value = validationError;
+            }
+
+            error.value = null;
+        }
+    }
+
+    function reset() {
+        error.value = null;
+    }
+
+    return { error, validate, reset };
+}

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

@@ -1,12 +1,12 @@
 <template>
     <div class="zw-dropdown" ref="dropdownRef">
-        <DropdownActivator>
+        <DropdownActivator :color="color">
             <template #default="attrs">
                 <slot name="activator" v-bind="attrs" />
             </template>
         </DropdownActivator>
 
-        <Modal max-height="300" max-width="156" :toggler="toggler" ref="modalRef">
+        <Modal max-height="300" :max-width="maxWidth" :toggler="toggler" ref="modalRef">
             <DropdownMenu :options="options">
                 <template #option="attrs">
                     <slot name="option" v-bind="attrs" />
@@ -17,7 +17,7 @@
 </template>
 
 <script>
-import { provide, toRef, ref } from '@vue/composition-api';
+import { provide, toRef, ref } from 'vue';
 import Modal from '../Modal';
 import { useModalToggler } from '../composables';
 import { InjectionTokens } from './injectionTokens';
@@ -40,7 +40,7 @@ export default {
 
     props: {
         value: {
-            type: String,
+            type: [String, Number],
             required: false,
             default: null
         },
@@ -48,6 +48,18 @@ export default {
         options: {
             type: Array,
             required: true
+        },
+
+        maxWidth: {
+            type: Number,
+            required: false,
+            default: 156
+        },
+
+        color: {
+            type: String,
+            required: false,
+            default: 'none'
         }
     },
 

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

@@ -24,7 +24,7 @@
 </template>
 
 <script>
-import { computed, inject } from '@vue/composition-api';
+import { computed, inject, toRef } from 'vue';
 import Button from '../Button';
 import Icon from '../Icon';
 import { InjectionTokens } from './injectionTokens';
@@ -42,14 +42,24 @@ export default {
         event: 'change'
     },
 
-    setup() {
+    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 activeOptionTitle = useDropdownEntityTitle(activeOptionManager.activeOption);
 
         const dropdownClasses = computed(() => ({
-            'zw-dropdown__activator--active': dropdownToggler.isOpened.value
+            'zw-dropdown__activator--active': dropdownToggler.isOpened.value,
+            'zw-dropdown__activator--gray': color.value === 'gray'
         }));
 
         return {
@@ -78,4 +88,10 @@ export default {
 .zw-dropdown__activator--active .zw-dropdown__activator-arrow {
     transform: rotateX(180deg);
 }
+
+.zw-dropdown__activator--gray {
+    background-color: rgb(var(--zw-color-n20));
+    font-size: var(--zw-font-size-xxs);
+    color: rgb(var(--zw-color-white));
+}
 </style>

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

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