@zipify/wysiwyg 1.0.0-dev.1

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

@@ -0,0 +1,21 @@
+<template>
+    <div class="zw-dropdown__divider" />
+</template>
+
+<script>
+export default {
+    name: 'DropdownDivider'
+};
+</script>
+
+<style scoped>
+.zw-dropdown__divider {
+    padding: 0 var(--zw-offset-sm);
+}
+
+.zw-dropdown__divider::before {
+    content: "";
+    display: block;
+    border-bottom: 1px solid rgb(var(--zw-color-n30));
+}
+</style>

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

@@ -0,0 +1,55 @@
+<template>
+    <div class="zw-dropdown__group">
+        <p class="zw-dropdown__group-title">
+            {{ groupTitle }}
+        </p>
+
+        <slot name="option" :option="option" v-for="option of group.options">
+            <DropdownOption :option="option" />
+        </slot>
+    </div>
+</template>
+
+<script>
+import { toRef } from '@vue/composition-api';
+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 };
+    }
+};
+</script>
+
+<style scoped>
+.zw-dropdown__group {
+    padding-top: var(--zw-offset-xs);
+    padding-bottom: var(--zw-offset-xs);
+    --zw-option-offset: var(--zw-offset-xs);
+}
+
+.zw-dropdown__group-title {
+    color: var(--zw-color-n70);
+    font-weight: var(--zw-font-weight-semibold);
+    padding-left: var(--zw-offset-sm);
+    padding-right: var(--zw-offset-sm);
+    margin-top: 0;
+    margin-bottom: var(--zw-offset-xs);
+}
+</style>

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

@@ -0,0 +1,62 @@
+<template>
+    <ScrollView>
+        <div class="zw-dropdown__menu" data-test-selector="dropdownMenu">
+            <template v-for="(option, index) of options">
+                <template v-if="option.options">
+                    <DropdownGroup :key="option.id" :group="option">
+                        <template #option="attrs">
+                            <slot v-bind="attrs" name="option" />
+                        </template>
+                    </DropdownGroup>
+
+                    <DropdownDivider
+                        :key="option.id + ' divider'"
+                        v-if="index + 1 !== options.length"
+                    />
+                </template>
+
+                <slot name="option" :option="option" v-else>
+                    <DropdownOption :option="option" />
+                </slot>
+            </template>
+        </div>
+    </ScrollView>
+</template>
+
+<script>
+import { provide } from '@vue/composition-api';
+import ScrollView from '../ScrollView';
+import { InjectionTokens } from './injectionTokens';
+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, {});
+    }
+};
+</script>
+
+<style>
+.zw-dropdown__menu {
+    padding-top: var(--zw-offset-xs);
+    padding-bottom: var(--zw-offset-xs);
+}
+</style>

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

@@ -0,0 +1,91 @@
+<template>
+    <Button
+        class="zw-dropdown__option zw-text--truncate"
+        ref="optionRef"
+        :class="classes"
+        @click="activate"
+    >
+        <slot>{{ optionTitle }}</slot>
+    </Button>
+</template>
+
+<script>
+import { computed, inject, nextTick, onMounted, ref, toRef } from '@vue/composition-api';
+import Button from '../Button';
+import { useScrollView } from '../composables';
+import { InjectionTokens } from './injectionTokens';
+import { useDropdownEntityTitle } from './composables';
+
+export default {
+    name: 'DropdownOption',
+
+    components: {
+        Button
+    },
+
+    props: {
+        option: {
+            type: Object,
+            required: true
+        }
+    },
+
+    setup(props) {
+        const activeOptionManager = inject(InjectionTokens.ACTIVE_MANAGER);
+        const dropdownToggler = inject(InjectionTokens.TOGGLER);
+        const session = inject(InjectionTokens.SESSION);
+
+        const optionRef = ref(null);
+        const scrollView = useScrollView();
+        const optionTitle = useDropdownEntityTitle(toRef(props, 'option'));
+        const isActive = computed(() => props.option.id === activeOptionManager.activeOption.value?.id);
+        const classes = computed(() => ({ 'zw-dropdown__option--active': isActive.value }));
+
+        function activate() {
+            activeOptionManager.activateOption(props.option);
+            dropdownToggler.close();
+        }
+
+        onMounted(async () => {
+            if (isActive.value && !session.scrolled) {
+                session.scrolled = true; // Prevent multiple scrolling to option
+
+                await nextTick();
+                const el = optionRef.value.$el;
+                const offset = el.offsetHeight * 1.5;
+
+                scrollView.scrollToElement(el, { offset });
+            }
+        });
+
+        return {
+            optionTitle,
+            classes,
+            isActive,
+            optionRef,
+            activate
+        };
+    }
+};
+</script>
+
+<style scoped>
+.zw-dropdown__option {
+    width: 100%;
+    display: block;
+    color: rgb(var(--zw-color-white));
+    padding-top: var(--zw-offset-xxs);
+    padding-right: var(--zw-offset-sm);
+    padding-left: calc(var(--zw-offset-sm) + var(--zw-option-offset, 0px));
+    padding-bottom: var(--zw-offset-xxs);
+    text-align: left;
+    transition: 0.1s background-color ease-out;
+    will-change: background-color;
+}
+
+.zw-dropdown__option:hover,
+.zw-dropdown__option:focus,
+.zw-dropdown__option--active {
+    background-color: rgb(var(--zw-color-n30));
+}
+</style>

package/lib/components/base/dropdown/__tests__/DropdownActivator.test.js

@@ -0,0 +1,54 @@
+import { shallowMount } from '@vue/test-utils';
+import { ref } from '@vue/composition-api';
+import DropdownActivator from '../DropdownActivator';
+import { InjectionTokens } from '../injectionTokens';
+import Button from '../../Button';
+
+const createToggler = ({ isOpened } = {}) => ({
+    isOpened: ref(isOpened ?? false),
+    open: jest.fn()
+});
+
+const createActiveOptionManager = ({ activeOption } = {}) => ({
+    activeOption: ref(activeOption ?? { id: 'test' })
+});
+
+function createComponent({ toggler, activeOptionManager } = {}) {
+    return shallowMount(DropdownActivator, {
+        provide: {
+            [InjectionTokens.TOGGLER]: toggler ?? createToggler(),
+            [InjectionTokens.ACTIVE_MANAGER]: activeOptionManager ?? createActiveOptionManager()
+        }
+    });
+}
+
+describe('rendering', () => {
+    test('should render active state', () => {
+        const toggler = createToggler({ isOpened: true });
+        const wrapper = createComponent({ toggler });
+        const buttonWrapper = wrapper.findComponent(Button);
+
+        expect(buttonWrapper.props('active')).toBe(true);
+        expect(buttonWrapper.classes('zw-dropdown__activator--active')).toBeTruthy();
+    });
+
+    test('should render inactive state', () => {
+        const toggler = createToggler({ isOpened: false });
+        const wrapper = createComponent({ toggler });
+        const buttonWrapper = wrapper.findComponent(Button);
+
+        expect(buttonWrapper.props('active')).toBe(false);
+        expect(buttonWrapper.classes('zw-dropdown__activator--active')).toBeFalsy();
+    });
+});
+
+describe('open dropdown', () => {
+    test('should open menu', () => {
+        const toggler = createToggler();
+        const wrapper = createComponent({ toggler });
+
+        wrapper.findComponent(Button).vm.$emit('click');
+
+        expect(toggler.open).toHaveBeenCalled();
+    });
+});

package/lib/components/base/dropdown/__tests__/DropdownMenu.test.js

@@ -0,0 +1,67 @@
+import { shallowMount } from '@vue/test-utils';
+import { ref } from '@vue/composition-api';
+import { InjectionTokens } from '../injectionTokens';
+import DropdownMenu from '../DropdownMenu';
+
+const createToggler = (isOpened) => ({
+    close: jest.fn(),
+    isOpened: ref(isOpened ?? true)
+});
+
+function createComponent({ options, toggler } = {}) {
+    return shallowMount(DropdownMenu, {
+        stubs: {
+            transition: {
+                render() {
+                    return this.$slots.default?.[0];
+                }
+            }
+        },
+        propsData: {
+            options: options ?? []
+        },
+        provide: {
+            [InjectionTokens.TOGGLER]: toggler ?? createToggler()
+        }
+    });
+}
+
+const SELECTORS = {
+    MENU: '[data-test-selector="dropdownMenu"]'
+};
+
+describe('rendering', () => {
+    const getChildEls = (wrapper) => Array.from(wrapper.element.children);
+    const getChildTagNames = (wrapper) => getChildEls(wrapper).map((el) => el.tagName);
+
+    test('should render plain options', () => {
+        const wrapper = createComponent({
+            options: [
+                { id: 'one' },
+                { id: 'two' }
+            ]
+        });
+
+        const menuWrapper = wrapper.find(SELECTORS.MENU);
+        const childTagNames = getChildTagNames(menuWrapper);
+
+        expect(childTagNames).toEqual(['DROPDOWNOPTION-STUB', 'DROPDOWNOPTION-STUB']);
+    });
+
+    test('should render groups options', () => {
+        const wrapper = createComponent({
+            options: [
+                { id: 'one', options: [] },
+                { id: 'two', options: [] }
+            ]
+        });
+        const menuWrapper = wrapper.find(SELECTORS.MENU);
+        const childTagNames = getChildTagNames(menuWrapper);
+
+        expect(childTagNames).toEqual([
+            'DROPDOWNGROUP-STUB',
+            'DROPDOWNDIVIDER-STUB',
+            'DROPDOWNGROUP-STUB'
+        ]);
+    });
+});

package/lib/components/base/dropdown/__tests__/DropdownOption.test.js

@@ -0,0 +1,81 @@
+import { shallowMount } from '@vue/test-utils';
+import { ref } from '@vue/composition-api';
+import DropdownOption from '../DropdownOption';
+import { InjectionTokens } from '../injectionTokens';
+import Button from '../../Button';
+import { SCROLL_VIEW } from '../../composables';
+
+const createActiveManager = ({ activeOption } = {}) => ({
+    activeOption: ref(activeOption ?? { id: '123' }),
+    activateOption: jest.fn()
+});
+
+const createToggler = () => ({
+    isOpened: ref(true),
+    close: jest.fn()
+});
+
+function createComponent({ option, activeManager, toggler }) {
+    return shallowMount(DropdownOption, {
+        propsData: { option },
+
+        provide: {
+            [InjectionTokens.ACTIVE_MANAGER]: activeManager ?? createActiveManager(),
+            [InjectionTokens.TOGGLER]: toggler ?? createToggler(),
+            [InjectionTokens.SESSION]: {},
+            [SCROLL_VIEW]: ref(null)
+        }
+    });
+}
+
+describe('rendering', () => {
+    test('should render active state', () => {
+        const wrapper = createComponent({
+            option: { id: 1 },
+
+            activeManager: createActiveManager({
+                activeOption: { id: 1 }
+            })
+        });
+
+        expect(wrapper.classes('zw-dropdown__option--active')).toBeTruthy();
+    });
+
+    test('should render inactive state', () => {
+        const wrapper = createComponent({
+            option: { id: 1 },
+
+            activeManager: createActiveManager({
+                activeOption: { id: 2 }
+            })
+        });
+
+        expect(wrapper.classes('zw-dropdown__option--active')).toBeFalsy();
+    });
+});
+
+describe('should activate', () => {
+    test('should activate option', () => {
+        const activeManager = createActiveManager();
+        const wrapper = createComponent({
+            option: { id: 1 },
+            activeManager
+        });
+
+        wrapper.findComponent(Button).vm.$emit('click');
+
+        expect(activeManager.activateOption).toHaveBeenCalled();
+    });
+
+    test('should close dropdown', () => {
+        const toggler = createToggler();
+        const wrapper = createComponent({
+            option: { id: 1 },
+            toggler
+        });
+
+        wrapper.findComponent(Button).vm.$emit('click');
+
+        expect(toggler.close).toHaveBeenCalled();
+    });
+});

package/lib/components/base/dropdown/composables/__tests__/useActiveOptionManager.test.js

@@ -0,0 +1,41 @@
+import { nextTick, ref } from '@vue/composition-api';
+import { useActiveOptionManager } from '../useActiveOptionManager';
+
+describe('manage active option', () => {
+    test('should find initial option by id', () => {
+        const manager = useActiveOptionManager({
+            optionsRef: ref([{ id: 'test' }]),
+            inputRef: ref('test'),
+            onChange: () => {}
+        });
+
+        expect(manager.activeOption.value).toEqual({ id: 'test' });
+    });
+
+    test('should update active option on prop change', async () => {
+        const inputRef = ref('test');
+        const manager = useActiveOptionManager({
+            optionsRef: ref([{ id: 'test' }, { id: 'new' }]),
+            inputRef,
+            onChange: () => {}
+        });
+
+        inputRef.value = 'new';
+        await nextTick();
+
+        expect(manager.activeOption.value).toEqual({ id: 'new' });
+    });
+
+    test('should activate option', () => {
+        const onChange = jest.fn();
+        const manager = useActiveOptionManager({
+            optionsRef: ref([{ id: 'test' }, { id: 'new' }]),
+            inputRef: ref('test'),
+            onChange
+        });
+
+        manager.activateOption({ id: 'new' });
+
+        expect(onChange).toHaveBeenCalledWith({ id: 'new' });
+    });
+});

package/lib/components/base/dropdown/composables/__tests__/useDropdownEntityTitle.test.js

@@ -0,0 +1,24 @@
+import { ref } from '@vue/composition-api';
+import { useDropdownEntityTitle } from '../useDropdownEntityTitle';
+
+describe('resolve title', () => {
+    test('should get title if present', () => {
+        const entity = ref({ id: 'id', title: 'title' });
+        const entityTitle = useDropdownEntityTitle(entity);
+
+        expect(entityTitle.value).toBe('title');
+    });
+
+    test('should get id if no title', () => {
+        const entity = ref({ id: 'id' });
+        const entityTitle = useDropdownEntityTitle(entity);
+
+        expect(entityTitle.value).toBe('id');
+    });
+
+    test('should return empty if no active entity', () => {
+        const entityTitle = useDropdownEntityTitle(ref(null));
+
+        expect(entityTitle.value).toBe('');
+    });
+});

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

@@ -0,0 +1,2 @@
+export { useActiveOptionManager } from './useActiveOptionManager';
+export { useDropdownEntityTitle } from './useDropdownEntityTitle';

package/lib/components/base/dropdown/composables/useActiveOptionManager.js

@@ -0,0 +1,25 @@
+import { ref, watch } from '@vue/composition-api';
+
+export function useActiveOptionManager({ optionsRef, inputRef, stateless, onChange }) {
+    const activeOption = ref(null);
+
+    function activateOption(option, { emitEvent } = {}) {
+        if (!stateless) activeOption.value = option;
+        if (emitEvent !== false) onChange(option);
+    }
+
+    function activateById(id, params) {
+        const option = optionsRef.value
+            .flatMap((option) => option.options || option)
+            .find((option) => option.id === id);
+
+        activateOption(option, params);
+    }
+
+    const syncInputValue = () => activateById(inputRef.value, { emitEvent: false });
+
+    syncInputValue();
+    watch(inputRef, syncInputValue);
+
+    return { activeOption, activateOption };
+}

package/lib/components/base/dropdown/composables/useDropdownEntityTitle.js

@@ -0,0 +1,5 @@
+import { computed } from '@vue/composition-api';
+
+export function useDropdownEntityTitle(entityRef) {
+    return computed(() => entityRef.value?.title || entityRef.value?.id || '');
+}

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

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

package/lib/components/base/dropdown/injectionTokens.js

@@ -0,0 +1,5 @@
+export const InjectionTokens = Object.freeze({
+    ACTIVE_MANAGER: Symbol('dropdownActiveManager'),
+    TOGGLER: Symbol('dropdownToggler'),
+    SESSION: Symbol('session')
+});

package/lib/components/base/index.js

@@ -0,0 +1,11 @@
+export { default as Button } from './Button';
+export { default as ButtonToggle } from './ButtonToggle';
+export { default as Icon } from './Icon';
+export { default as ScrollView } from './ScrollView';
+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 * from './dropdown';
+export * from './colorPicker';

package/lib/components/index.js

@@ -0,0 +1 @@
+export * from './toolbar';

package/lib/components/toolbar/Toolbar.vue

@@ -0,0 +1,56 @@
+<template>
+    <Transition name="zw-toolbar-" :duration="800">
+        <div class="zw-toolbar">
+            <component :is="toolbarComponent" />
+        </div>
+    </Transition>
+</template>
+
+<script>
+import { computed } from '@vue/composition-api';
+import { Devices } from '../../enums';
+import ToolbarFull from './ToolbarFull';
+import ToolbarDevice from './ToolbarDevice';
+
+export default {
+    name: 'Toolbar',
+
+    props: {
+        device: {
+            type: String,
+            required: true
+        }
+    },
+
+    setup(props) {
+        const toolbarComponent = computed(() => {
+            return props.device === Devices.DESKTOP ? ToolbarFull : ToolbarDevice;
+        });
+
+        return { toolbarComponent };
+    }
+};
+</script>
+
+<style scoped>
+.zw-toolbar {
+    border-radius: 2px;
+    background-color: rgb(var(--zw-color-n15));
+    color: rgb(var(--zw-color-n70));
+    z-index: 999;
+}
+
+.zw-toolbar--enter-active,
+.zw-toolbar--leave-active {
+    transition: opacity 0.15s ease-out;
+}
+
+.zw-toolbar--leave-active {
+    transition: opacity 0s ease-in;
+}
+
+.zw-toolbar--enter,
+.zw-toolbar--leave-to {
+    opacity: 0;
+}
+</style>

package/lib/components/toolbar/ToolbarDevice.vue

@@ -0,0 +1,35 @@
+<template>
+    <ToolbarRow>
+        <StylePresetControl />
+        <ToolbarDivider vertical />
+        <AlignmentDeviceControl />
+        <ToolbarDivider vertical />
+        <FontSizeControl />
+        <ToolbarDivider vertical />
+        <LineHeightControl />
+    </ToolbarRow>
+</template>
+
+<script>
+import ToolbarRow from './ToolbarRow';
+import ToolbarDivider from './ToolbarDivider';
+import {
+    StylePresetControl,
+    AlignmentDeviceControl,
+    FontSizeControl,
+    LineHeightControl
+} from './controls';
+
+export default {
+    name: 'ToolbarDevice',
+
+    components: {
+        ToolbarRow,
+        ToolbarDivider,
+        StylePresetControl,
+        AlignmentDeviceControl,
+        FontSizeControl,
+        LineHeightControl
+    }
+};
+</script>