@zipify/wysiwyg 1.0.0-dev.2 → 1.0.0-dev.22

package/lib/components/base/Icon.vue

@@ -1,12 +1,15 @@
 <template>
-    <svg v-bind="iconAttrs" class="zw-icon" :class="iconClasses">
-        <use :href="url" />
-    </svg>
+    <div
+        class="zw-icon"
+        :class="iconClasses"
+        :style="iconStyles"
+        v-html="source"
+    />
 </template>
 
 <script>
 import { computed } from '@vue/composition-api';
-import sprite from '../../assets/icons.svg';
+import { importIcon } from '../../utils';
 
 export default {
     name: 'Icon',
@@ -31,7 +34,7 @@ export default {
     },
 
     setup(props) {
-        const url = computed(() => `${sprite}#${props.name}`);
+        const source = computed(() => importIcon(props.name));
 
         const iconSize = computed(() => {
             if (isNaN(Number(props.size))) return props.size;
@@ -39,8 +42,13 @@ export default {
             return `${props.size}px`;
         });
 
-        const iconAttrs = computed(() => {
-            return props.size ? { width: iconSize.value, height: iconSize.value } : null;
+        const iconStyles = computed(() => {
+            if (!props.size) return null;
+
+            return {
+                '--zw-icon-width': iconSize.value,
+                '--zw-icon-height': iconSize.value
+            };
         });
 
         const iconClasses = computed(() => ({
@@ -48,8 +56,8 @@ export default {
         }));
 
         return {
-            url,
-            iconAttrs,
+            source,
+            iconStyles,
             iconClasses
         };
     }
@@ -58,7 +66,7 @@ export default {
 
 <style scoped>
 .zw-icon {
-    display: inline-block;
+    display: flex;
 }
 
 .zw-icon--auto-color {

package/lib/components/base/Modal.vue

@@ -76,7 +76,6 @@ export default {
 <style scoped>
 .zw-modal {
     border-radius: 2px;
-    overflow: hidden;
     box-shadow: 0 0 4px rgba(var(--zw-color-black), 0.3);
     background-color: rgb(var(--zw-color-n15));
     max-height: var(--zw-modal-max-height);

package/lib/components/base/TextField.vue

@@ -0,0 +1,106 @@
+<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/composition-api';
+
+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 lang="scss" 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);
+}
+
+.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__/Icon.test.js

@@ -14,32 +14,25 @@ function createComponent({ name, size, isAutoColor } = {}) {
 }
 
 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();
+        expect(wrapper.element).not.toElementHasStyle('--zw-icon-width');
+        expect(wrapper.element).not.toElementHasStyle('--zw-icon-height');
     });
 
     test('should render size without units', () => {
         const wrapper = createComponent({ size: '12' });
 
-        expect(wrapper.attributes('width')).toBe('12px');
-        expect(wrapper.attributes('height')).toBe('12px');
+        expect(wrapper.element).toElementHasStyle('--zw-icon-width', '12px');
+        expect(wrapper.element).toElementHasStyle('--zw-icon-height', '12px');
     });
 
     test('should percent size', () => {
         const wrapper = createComponent({ size: '12%' });
 
-        expect(wrapper.attributes('width')).toBe('12%');
-        expect(wrapper.attributes('height')).toBe('12%');
+        expect(wrapper.element).toElementHasStyle('--zw-icon-width', '12%');
+        expect(wrapper.element).toElementHasStyle('--zw-icon-height', '12%');
     });
 
     test('should render auto color style', () => {

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/composables/usePickerHotkeys.js

@@ -1,4 +1,5 @@
 import { ref } from '@vue/composition-api';
+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/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/useValidator.js

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

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" />
@@ -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/composition-api';
 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/index.js

@@ -6,6 +6,8 @@ export { default as FieldLabel } from './FieldLabel';
 export { default as Range } from './Range';
 export { default as NumberField } from './NumberField';
 export { default as Modal } from './Modal';
-export { useModalToggler } from './composables';
+export { default as TextField } from './TextField';
+export { default as Checkbox } from './Checkbox';
+export { useModalToggler, useElementRef } from './composables';
 export * from './dropdown';
 export * from './colorPicker';

package/lib/components/toolbar/Toolbar.vue

@@ -1,13 +1,15 @@
 <template>
-    <Transition name="zw-toolbar-" :duration="800">
-        <div class="zw-toolbar">
-            <component :is="toolbarComponent" />
-        </div>
-    </Transition>
+    <keep-alive>
+        <transition name="zw-toolbar-" duration="150">
+            <div class="zw-toolbar" :style="toolbarStyles" ref="toolbarRef" v-if="isVisible">
+                <component :is="toolbarComponent" />
+            </div>
+        </transition>
+    </keep-alive>
 </template>
 
 <script>
-import { computed } from '@vue/composition-api';
+import { computed, ref, watch } from '@vue/composition-api';
 import { Devices } from '../../enums';
 import ToolbarFull from './ToolbarFull';
 import ToolbarDevice from './ToolbarDevice';
@@ -19,6 +21,11 @@ export default {
         device: {
             type: String,
             required: true
+        },
+
+        toolbar: {
+            type: Object,
+            required: true
         }
     },
 
@@ -26,8 +33,23 @@ export default {
         const toolbarComponent = computed(() => {
             return props.device === Devices.DESKTOP ? ToolbarFull : ToolbarDevice;
         });
+        const isVisible = computed(() => props.toolbar.isActiveRef.value);
+        const toolbarRef = ref(null);
+
+        watch(toolbarRef, (toolbarEl) => {
+            toolbarEl && props.toolbar.mount(toolbarEl);
+        });
+
+        const toolbarStyles = computed(() => ({
+            '--zw-toolbar-offset-y': `${props.toolbar.offsets[1]}px`
+        }));
 
-        return { toolbarComponent };
+        return {
+            toolbarComponent,
+            isVisible,
+            toolbarRef,
+            toolbarStyles
+        };
     }
 };
 </script>
@@ -37,12 +59,30 @@ export default {
     border-radius: 2px;
     background-color: rgb(var(--zw-color-n15));
     color: rgb(var(--zw-color-n70));
-    z-index: 999;
+    z-index: 999999;
+}
+
+.zw-toolbar::before,
+.zw-toolbar::after {
+    content: "";
+    display: block;
+    width: 100%;
+    height: calc(var(--zw-toolbar-offset-y) + 4px);
+    position: absolute;
+    --zw-toolbar-safe-zone: calc(-1 * var(--zw-toolbar-offset-y));
+}
+
+.zw-toolbar::before {
+    top: var(--zw-toolbar-safe-zone);
+}
+
+.zw-toolbar::after {
+    bottom: var(--zw-toolbar-safe-zone);
 }
 
 .zw-toolbar--enter-active,
 .zw-toolbar--leave-active {
-    transition: opacity 0.15s ease-out;
+    transition: opacity 150ms ease-out;
 }
 
 .zw-toolbar--leave-active {

package/lib/components/toolbar/ToolbarFull.vue

@@ -33,12 +33,18 @@
 
             <ToolbarGroup>
                 <LineHeightControl />
+            </ToolbarGroup>
+
+            <ToolbarDivider vertical />
+
+            <ToolbarGroup>
                 <ListControl />
             </ToolbarGroup>
 
             <ToolbarDivider vertical />
 
             <ToolbarGroup>
+                <LinkControl />
                 <RemoveFormatControl />
             </ToolbarGroup>
         </ToolbarRow>
@@ -64,7 +70,8 @@ import {
     SuperscriptControl,
     UnderlineControl,
     ListControl,
-    RemoveFormatControl
+    RemoveFormatControl,
+    LinkControl
 } from './controls';
 
 export default {
@@ -88,7 +95,8 @@ export default {
         AlignmentControl,
         LineHeightControl,
         ListControl,
-        RemoveFormatControl
+        RemoveFormatControl,
+        LinkControl
     }
 };
 </script>

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

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

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

@@ -1,5 +1,6 @@
 <template>
     <Dropdown
+        class="zw-font-size-control"
         :options="options"
         :value="currentValue"
         @change="apply"
@@ -43,3 +44,9 @@ export default {
     }
 };
 </script>
+
+<style scoped>
+.zw-font-size-control {
+    width: 64px;
+}
+</style>

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

@@ -17,11 +17,7 @@
         </template>
 
         <template #option="{ option }">
-            <DropdownOption
-                class="zw-list-control__option"
-                :option="option"
-                v-tooltip="option.tooltip"
-            >
+            <DropdownOption class="zw-list-control__option" :option="option">
                 <Icon :name="option.icon" size="28px" auto-color />
             </DropdownOption>
         </template>

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

@@ -11,7 +11,7 @@
 </template>
 
 <script>
-import { inject } from '@vue/composition-api';
+import { inject, computed } from '@vue/composition-api';
 import { Button, Icon } from '../../base';
 import { InjectionTokens } from '../../../injectionTokens';
 import { tooltip } from '../../../directives';
@@ -31,7 +31,7 @@ export default {
     setup() {
         const editor = inject(InjectionTokens.EDITOR);
 
-        const currentValue = editor.commands.isUnderline();
+        const currentValue = computed(() => editor.commands.isUnderline().value);
         const apply = () => editor.chain().focus().toggleUnderline().run();
 
         return {

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

@@ -12,6 +12,10 @@ const createEditor = ({ isUnderline } = {}) => ({
         run: jest.fn()
     },
 
+    isActive() {
+        return false;
+    },
+
     chain() {
         return this.commands;
     }

package/lib/components/toolbar/controls/index.js

@@ -14,3 +14,4 @@ export { default as AlignmentDeviceControl } from './AlignmentDeviceControl';
 export { default as LineHeightControl } from './LineHeightControl';
 export { default as ListControl } from './ListControl';
 export { default as RemoveFormatControl } from './RemoveFormatControl';
+export { LinkControl } from './link';