@zipify/wysiwyg 1.0.0-dev.1

package/example/tooltip/tooltip.css

@@ -0,0 +1,95 @@
+.zpa-tooltip {
+    position: relative;
+    background-color: #36404C;
+    color: #FFF;
+    border-radius: 2px;
+    font-size: 12px;
+    line-height: 1.4;
+    outline: 0;
+    transition-property: opacity;
+    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+    opacity: 0;
+}
+
+.zpa-tooltip--md {
+    max-width: 300px;
+}
+
+.zpa-tooltip--lg {
+    max-width: 400px;
+}
+
+.zpa-tooltip--open {
+    opacity: 1;
+}
+
+.zpa-tooltip__content {
+    position: relative;
+    text-align: center;
+    padding: 4px 8px;
+    word-break: break-word;
+}
+
+.zpa-tooltip__arrow {
+    width: 16px;
+    height: 16px;
+    color: #36404C;
+}
+
+.zpa-tooltip__arrow::before {
+    content: "";
+    position: absolute;
+    border-color: transparent;
+    border-style: solid;
+}
+
+.zpa-tooltip__arrow--top {
+    bottom: 0;
+}
+
+.zpa-tooltip__arrow--top::before {
+    bottom: -7px;
+    left: 0;
+    border-width: 8px 8px 0;
+    border-top-color: initial;
+    transform-origin: center top;
+}
+
+.zpa-tooltip__arrow--bottom {
+    top: 0;
+}
+
+.zpa-tooltip__arrow--bottom::before {
+    top: -7px;
+    left: 0;
+    border-width: 0 8px 8px;
+    border-bottom-color: initial;
+    transform-origin: center bottom;
+}
+
+.zpa-tooltip__arrow--left {
+    right: 0;
+}
+
+.zpa-tooltip__arrow--left::before {
+    border-width: 8px 0 8px 8px;
+    border-left-color: initial;
+    right: -7px;
+    transform-origin: center left;
+}
+
+.zpa-tooltip__arrow--right {
+    left: 0;
+}
+
+.zpa-tooltip__arrow--right::before {
+    left: -7px;
+    border-width: 8px 8px 8px 0;
+    border-right-color: initial;
+    transform-origin: center right;
+}
+
+.zpa-tooltip__hotkey {
+    margin-left: 4px;
+    color: #9EA5B0;
+}

package/jest.config.js

@@ -0,0 +1,17 @@
+module.exports = {
+    testMatch: ['<rootDir>/**/*.test.js'],
+    moduleFileExtensions: ['js', 'json', 'vue', 'scss'],
+    transform: {
+        '^.+\\.js$': 'babel-jest',
+        '^.+\\.vue$': '@vue/vue2-jest'
+    },
+    moduleNameMapper: {
+        '^.+\\.svg$': '<rootDir>/lib/__mocks__/svgMock.js'
+    },
+    testEnvironment: '<rootDir>/config/jest/TestEnvironment.js',
+    setupFilesAfterEnv: ['<rootDir>/config/jest/setupMatchers.js'],
+    setupFiles: ['<rootDir>/config/jest/setupTests.js'],
+    collectCoverageFrom: ['<rootDir>/lib/**/*.{js,vue}'],
+    coverageReporters: ['html-spa'],
+    coveragePathIgnorePatterns: ['/node_modules/']
+};

package/lib/Wysiwyg.vue

@@ -0,0 +1,156 @@
+<template>
+    <div
+        class="zw-wysiwyg"
+        ref="wysiwygRef"
+        v-out-click="{ onOutClick: hideToolbar, isDisabled: !toolbar.isShow.value }"
+    >
+        <Toolbar
+            v-show="toolbar.isShow.value"
+            :editor="editor"
+            :device="device"
+            ref="toolbarRef"
+        />
+        <EditorContent :editor="editor" />
+    </div>
+</template>
+
+<script>
+import { EditorContent } from '@tiptap/vue-2';
+import { provide, toRef, ref } from '@vue/composition-api';
+import { Toolbar } from './components';
+import { useToolbar, useEditor } from './composables';
+import { getExtensions } from './extensions';
+import { InjectionTokens } from './injectionTokens';
+import { FavoriteColors, Storage } from './services';
+import { Devices } from './enums';
+import { outClick } from './directives';
+import { Font } from './models';
+
+const MIN_FONT_SIZE = 5;
+const MAX_FONT_SIZE = 112;
+
+export default {
+    name: 'Wysiwyg',
+
+    components: {
+        Toolbar,
+        EditorContent
+    },
+
+    directives: {
+        outClick
+    },
+
+    props: {
+        value: {
+            type: [String, Object],
+            required: true
+        },
+
+        presets: {
+            type: Array,
+            required: true
+        },
+
+        defaultPresetId: {
+            type: [Number, String],
+            required: false,
+            default: ''
+        },
+
+        makePresetVariable: {
+            type: Function,
+            required: true
+        },
+
+        fonts: {
+            type: Array,
+            required: true
+        },
+
+        device: {
+            type: String,
+            required: false,
+            default: Devices.DESKTOP
+        },
+
+        favoriteColors: {
+            type: Array,
+            required: false,
+            default: () => []
+        },
+
+        toolbarOffsets: {
+            type: Array,
+            required: false,
+            default: () => [0, 8]
+        },
+
+        baseListClass: {
+            type: String,
+            required: false,
+            default: 'zw-list--'
+        }
+    },
+
+    setup(props, { emit }) {
+        const fonts = props.fonts.map((font) => new Font(font));
+
+        const toolbarRef = ref(null);
+        const wysiwygRef = ref(null);
+
+        const toolbar = useToolbar({
+            wrapperRef: wysiwygRef,
+            popperRef: toolbarRef,
+            offsets: toRef(props, 'toolbarOffsets').value
+        });
+
+        function onChange(content) {
+            emit('input', content);
+            toolbar.update();
+        }
+
+        const editor = useEditor({
+            content: toRef(props, 'value'),
+            onChange: (content) => onChange(content),
+            onFocus: () => toolbar.show(),
+
+            extensions: getExtensions({
+                fonts,
+                minFontSize: MIN_FONT_SIZE,
+                maxFontSize: MAX_FONT_SIZE,
+                presetsRef: toRef(props, 'presets'),
+                defaultPresetId: props.defaultPresetId,
+                makePresetVariable: props.makePresetVariable,
+                baseListClass: props.baseListClass,
+                deviceRef: toRef(props, 'device')
+            })
+        });
+
+        function hideToolbar() {
+            if (editor.isFocused) return;
+
+            toolbar.hide();
+        }
+
+        const fontSizes = new Array(MAX_FONT_SIZE - MIN_FONT_SIZE + 1)
+            .fill(0)
+            .map((_, index) => String(index + MIN_FONT_SIZE));
+
+        const favoriteColors = new FavoriteColors({
+            listRef: toRef(props, 'favoriteColors'),
+            triggerUpdate: (colors) => emit('updateFavoriteColors', colors)
+        });
+
+        provide(InjectionTokens.EDITOR, editor);
+        provide(InjectionTokens.FONTS, fonts);
+        provide(InjectionTokens.FONT_SIZES, fontSizes);
+        provide(InjectionTokens.LOCAL_STORAGE, new Storage(localStorage));
+        provide(InjectionTokens.FAVORITE_COLORS, favoriteColors);
+
+        return { editor, toolbarRef, wysiwygRef, toolbar, hideToolbar };
+    }
+};
+</script>
+
+<style src="./styles/main.css" />

package/lib/__mocks__/svgMock.js

@@ -0,0 +1 @@
+export default 'http://zipify.com/icons.svg';

package/lib/__tests__/utils/NodeFactory.js

@@ -0,0 +1,67 @@
+import { NodeTypes } from '../../enums';
+
+export class NodeFactory {
+    static doc(content) {
+        return {
+            type: NodeTypes.DOCUMENT,
+            content
+        };
+    }
+
+    static list(type, items) {
+        return {
+            type: NodeTypes.LIST,
+            attrs: { bullet: { type } },
+            content: items.map((item) => this.listItem([].concat(item)))
+        };
+    }
+
+    static listItem(content) {
+        return {
+            type: NodeTypes.LIST_ITEM,
+            content
+        };
+    }
+
+    static heading(level, ...args) {
+        const config = this._textBlock(args);
+
+        config.attrs ??= {};
+        config.attrs.level = level;
+
+        return {
+            type: NodeTypes.HEADING,
+            ...config
+        };
+    }
+
+    static paragraph(...args) {
+        return {
+            type: NodeTypes.PARAGRAPH,
+            ...this._textBlock(args)
+        };
+    }
+
+    static _textBlock(args) {
+        const attrs = args.length === 1 ? null : args[0];
+        const content = args.length === 1 ? args[0] : args[1];
+        const children = typeof content === 'string' ? [this.text(content)] : content;
+
+        return {
+            content: children,
+            ...(attrs ? { attrs } : {})
+        };
+    }
+
+    static text(text, marks) {
+        return {
+            type: NodeTypes.TEXT,
+            ...(marks ? { marks } : {}),
+            text
+        };
+    }
+
+    static mark(type, attrs) {
+        return { type, attrs };
+    }
+}

package/lib/__tests__/utils/index.js

@@ -0,0 +1,4 @@
+export { waitAsyncOperation } from './waitAsyncOperation';
+export { NodeFactory } from './NodeFactory';
+export { withComponentContext } from './withComponentContext';
+export { setReadonlyProperty } from './setReadonlyProperty';

package/lib/__tests__/utils/setReadonlyProperty.js

@@ -0,0 +1,9 @@
+/**
+ * Jest doesn't support changing value for read-only properties
+ */
+export function setReadonlyProperty(obj, property, value) {
+    Object.defineProperty(obj, property, {
+        get: () => value,
+        configurable: true
+    });
+}

package/lib/__tests__/utils/waitAsyncOperation.js

@@ -0,0 +1,6 @@
+export async function waitAsyncOperation(isFakeTimers = false) {
+    await new Promise((resolve) => {
+        setTimeout(resolve);
+        if (isFakeTimers) jest.advanceTimersToNextTimer(1);
+    });
+}

package/lib/__tests__/utils/withComponentContext.js

@@ -0,0 +1,14 @@
+import { shallowMount } from '@vue/test-utils';
+import { h } from '@vue/composition-api';
+
+export function withComponentContext(exec, params = {}) {
+    const wrapper = shallowMount({
+        render: () => h('div'),
+
+        setup() {
+            return { result: exec() };
+        }
+    }, params);
+
+    return wrapper.vm.result;
+}

package/lib/assets/icons.svg

@@ -0,0 +1,69 @@
+<svg xmlns="http://www.w3.org/2000/svg">
+    <defs>
+        <symbol id="arrow" fill="none" viewBox="0 0 8 8">
+            <path fill="var(--zw-icon-foreground)" fill-rule="evenodd" d="m4 6.934 4-5H0l4 5Z" clip-rule="evenodd"/>
+        </symbol>
+        <symbol id="reset-styles" fill="none" viewBox="0 0 28 28">
+            <path fill="var(--zw-icon-foreground)" d="M14 9.333V6.666l-3.334 3.333L14 13.333v-2.667c2.206 0 4 1.793 4 4s-1.794 4-4 4c-2.207 0-4-1.793-4-4H8.666A5.332 5.332 0 0 0 14 19.999a5.332 5.332 0 0 0 5.333-5.333A5.332 5.332 0 0 0 14 9.333Z"/>
+        </symbol>
+        <symbol id="font-color" fill="none" viewBox="0 0 28 28">
+            <path fill="var(--zw-icon-foreground)" fill-rule="evenodd" d="M22 20.62a2.42 2.42 0 0 1-4.84 0c0-1.25 2.42-4.54 2.42-4.54S22 19.37 22 20.62ZM9.92 15.425l1.452-3.951c.071-.182.145-.394.219-.636.074-.242.149-.503.226-.783a17.223 17.223 0 0 0 .454 1.402l1.452 3.968H9.919Zm5.411 4.199c.226-.795.658-1.684 1.184-2.562L12.955 8h-2.269L6 19.93h1.725a.736.736 0 0 0 .474-.157.792.792 0 0 0 .26-.347l.891-2.434h4.941l.891 2.434c.031.079.097.134.148.198Z" clip-rule="evenodd"/>
+        </symbol>
+        <symbol id="background-color" fill="none" viewBox="0 0 28 28">
+            <path fill="#fff" stroke="#B3B3B3" d="M4.5 4.5h19v19h-19z"/>
+            <path fill="#3B3B3B" d="M26 20.7a2.51 2.51 0 0 1-5 0c0-1.31 2.5-4.7 2.5-4.7s2.5 3.39 2.5 4.7Z"/>
+            <path fill="#3B3B3B" fill-rule="evenodd" d="M19.64 19.93h-1.715a.75.75 0 0 1-.475-.145.82.82 0 0 1-.268-.359l-.89-2.433h-4.943l-.89 2.433a.78.78 0 0 1-.26.347.73.73 0 0 1-.475.157H8L12.686 8h2.269l4.686 11.93Zm-7.721-4.505h3.803l-1.452-3.968a18.048 18.048 0 0 1-.219-.623c-.08-.24-.158-.5-.235-.78-.077.28-.152.542-.227.784a8.742 8.742 0 0 1-.218.635l-1.452 3.952Z" clip-rule="evenodd"/>
+        </symbol>
+        <symbol id="italic" fill="none" viewBox="0 0 28 28">
+            <path fill="var(--zw-icon-foreground)" d="M18 9V7h-7v2h2.64l-1.22 10H10v2h7v-2h-2.83L15.4 9H18Z"/>
+        </symbol>
+        <symbol id="underline" fill="none" viewBox="0 0 28 28">
+            <path fill="var(--zw-icon-foreground)" fill-rule="evenodd" d="M15.4 16.06a3.3 3.3 0 0 1-1.4.29 3.12 3.12 0 0 1-1.39-.29 2.88 2.88 0 0 1-1.05-.81 3.711 3.711 0 0 1-.65-1.25 5.659 5.659 0 0 1-.22-1.6V7H9v5.41a6.89 6.89 0 0 0 .34 2.22 5.29 5.29 0 0 0 1 1.77c.437.501.975.904 1.58 1.18A5 5 0 0 0 14 18a5 5 0 0 0 2.08-.42 4.61 4.61 0 0 0 1.57-1.18 5.27 5.27 0 0 0 1-1.77 6.89 6.89 0 0 0 .35-2.22V7h-1.69v5.41a5.659 5.659 0 0 1-.22 1.59 3.71 3.71 0 0 1-.69 1.25c-.27.34-.61.617-1 .81ZM20 19H8v2h12v-2Z" clip-rule="evenodd"/>
+        </symbol>
+        <symbol id="strike-through" fill="none" viewBox="0 0 28 28">
+            <path fill="var(--zw-icon-foreground)" fill-rule="evenodd" d="m14 12.731.77.27H20v2H8v-2h2.84a2.892 2.892 0 0 1-.46-.71 3.61 3.61 0 0 1-.29-1.52c0-.484.1-.964.29-1.41a3.5 3.5 0 0 1 .83-1.2 4 4 0 0 1 1.35-.84 4.74 4.74 0 0 1 1.83-.32 6 6 0 0 1 2.11.41 5 5 0 0 1 1.68 1l-.46.88a.69.69 0 0 1-.18.22.41.41 0 0 1-.25.07.69.69 0 0 1-.39-.16 5.551 5.551 0 0 0-.56-.36 4.641 4.641 0 0 0-.8-.36 3.44 3.44 0 0 0-1.14-.16 3.16 3.16 0 0 0-1.11.17 2.29 2.29 0 0 0-.8.45 1.87 1.87 0 0 0-.49.67 2.138 2.138 0 0 0-.11.79c-.023.357.08.711.29 1 .206.267.465.489.76.65.338.187.693.34 1.06.46Zm1.99 6.06c.24-.22.427-.49.55-.79.135-.315.2-.657.19-1h1.74a4.58 4.58 0 0 1-.25 1.38 4 4 0 0 1-.91 1.37 4.231 4.231 0 0 1-1.46.92 5.503 5.503 0 0 1-2 .33 6.13 6.13 0 0 1-2.5-.46 5.66 5.66 0 0 1-1.89-1.31l.54-.88a.61.61 0 0 1 .19-.17.45.45 0 0 1 .25-.07.5.5 0 0 1 .28.1c.128.077.251.16.37.25l.46.33c.19.13.391.243.6.34.245.107.5.191.76.25.328.076.664.11 1 .1a3.67 3.67 0 0 0 1.19-.18c.328-.109.63-.282.89-.51Z" clip-rule="evenodd"/>
+        </symbol>
+        <symbol id="case-style" fill="none" viewBox="0 0 28 28">
+            <path fill="var(--zw-icon-foreground)" fill-rule="evenodd" d="M16.64 19.93h-1.715a.75.75 0 0 1-.475-.145.82.82 0 0 1-.268-.359l-.89-2.433H8.35l-.891 2.433a.78.78 0 0 1-.26.347.73.73 0 0 1-.475.157H5L9.686 8h2.269l4.686 11.93Zm-7.72-4.505h3.803l-1.452-3.968a18.048 18.048 0 0 1-.219-.623c-.08-.24-.158-.5-.235-.78-.077.28-.152.542-.227.784a8.742 8.742 0 0 1-.218.635L8.92 15.425Zm14.968 4.505h-.915a.987.987 0 0 1-.454-.087c-.11-.058-.192-.175-.248-.35l-.181-.603a7.005 7.005 0 0 1-.631.507c-.206.146-.42.269-.64.368a3.26 3.26 0 0 1-.7.222c-.248.05-.523.075-.826.075-.357 0-.687-.049-.99-.145a2.134 2.134 0 0 1-.78-.433 1.967 1.967 0 0 1-.507-.718 2.545 2.545 0 0 1-.181-.998c0-.319.084-.634.251-.945.168-.31.447-.59.838-.841.39-.25.91-.458 1.559-.623.649-.165 1.455-.258 2.417-.28v-.495c0-.567-.12-.986-.359-1.259-.239-.272-.587-.408-1.043-.408-.33 0-.605.039-.825.116a3.17 3.17 0 0 0-.574.26 25.11 25.11 0 0 1-.45.26.912.912 0 0 1-.453.115.59.59 0 0 1-.355-.107.843.843 0 0 1-.239-.264l-.371-.652c.973-.891 2.148-1.337 3.523-1.337.494 0 .936.081 1.324.244.387.162.716.387.985.676.27.289.475.634.615 1.036.14.401.21.841.21 1.32v5.346Zm-3.96-1.271c.21 0 .402-.02.578-.058.176-.038.342-.096.5-.173.156-.077.307-.172.453-.285a4.13 4.13 0 0 0 .441-.4v-1.427c-.594.027-1.09.078-1.489.153a3.967 3.967 0 0 0-.961.284c-.242.116-.414.25-.516.404a.894.894 0 0 0-.152.504c0 .357.106.613.317.767.212.154.489.231.83.231Z" clip-rule="evenodd"/>
+        </symbol>
+        <symbol id="superscript" fill="none" viewBox="0 0 28 28">
+            <path fill="var(--zw-icon-foreground)" d="M21.985 8.625h-1.75V9.5h2.625v.875h-3.5v-1.75c0-.481.394-.875.875-.875h1.75v-.875H19.36V6h2.625c.481 0 .875.394.875.875v.875a.878.878 0 0 1-.875.875ZM7.88 20h2.327l2.975-4.742h.105L16.262 20h2.328l-4.069-6.361L18.32 7.75h-2.345l-2.687 4.366h-.105L10.48 7.75H8.15l3.78 5.889L7.88 20Z"/>
+        </symbol>
+        <symbol id="alignment-left" fill="none" viewBox="0 0 28 28">
+            <path fill="var(--zw-icon-foreground)" fill-rule="evenodd" d="M23 7H5v2h18V7Zm-6 4H5v2h12v-2Zm6 4H5v2h18v-2ZM5 19h12v2H5v-2Z" clip-rule="evenodd"/>
+        </symbol>
+        <symbol id="alignment-center" fill="none" viewBox="0 0 28 28">
+            <path fill="var(--zw-icon-foreground)" fill-rule="evenodd" d="M23 7H5v2h18V7Zm-3 4H8v2h12v-2Zm3 4H5v2h18v-2ZM8 19h12v2H8v-2Z" clip-rule="evenodd"/>
+        </symbol>
+        <symbol id="alignment-right" fill="none" viewBox="0 0 28 28">
+            <path fill="var(--zw-icon-foreground)" fill-rule="evenodd" d="M23 7H5v2h18V7Zm0 4H11v2h12v-2Zm0 4H5v2h18v-2Zm-12 4h12v2H11v-2Z" clip-rule="evenodd"/>
+        </symbol>
+        <symbol id="alignment-justify" fill="none" viewBox="0 0 28 28">
+            <path fill="var(--zw-icon-foreground)" fill-rule="evenodd" d="M23 7H5v2h18V7Zm0 4H5v2h18v-2Zm0 4H5v2h18v-2ZM5 19h18v2H5v-2Z" clip-rule="evenodd"/>
+        </symbol>
+        <symbol id="line-height" fill="none" viewBox="0 0 28 28">
+            <path fill="var(--zw-icon-foreground)" fill-rule="evenodd" d="m5 10 3-3 3 3H9v8h2l-3 3-3-3h2v-8H5Zm8-3h10v2H13V7Zm10 6H13v2h10v-2Zm0 6H13v2h10v-2Z" clip-rule="evenodd"/>
+        </symbol>
+        <symbol id="list-disc" fill="none" viewBox="0 0 28 28">
+            <rect width="10" height="10" x="9" y="9" fill="var(--zw-icon-foreground)" rx="5"/>
+        </symbol>
+        <symbol id="list-circle" fill="none" viewBox="0 0 28 28">
+            <rect width="9" height="9" x="9.5" y="9.5" stroke="var(--zw-icon-foreground)" rx="4.5"/>
+        </symbol>
+        <symbol id="list-square" fill="none" viewBox="0 0 28 28">
+            <path fill="var(--zw-icon-foreground)" d="M9 9h10v10H9z"/>
+        </symbol>
+        <symbol id="list-decimal" fill="none" viewBox="0 0 28 28">
+            <path fill="var(--zw-icon-foreground)" d="M15.108 18.184V19H10.5v-.816h1.842v-5.862c0-.176.006-.354.018-.534l-1.53 1.314a.375.375 0 0 1-.156.084.373.373 0 0 1-.27-.048.318.318 0 0 1-.084-.078l-.336-.462 2.562-2.214h.87v7.8h1.692Zm1.519.156a.8.8 0 0 1 .054-.294.829.829 0 0 1 .156-.24.77.77 0 0 1 .534-.222.77.77 0 0 1 .696.462c.04.092.06.19.06.294a.744.744 0 0 1-.222.534.692.692 0 0 1-.24.156.73.73 0 0 1-.294.06.73.73 0 0 1-.294-.06.692.692 0 0 1-.396-.39.816.816 0 0 1-.054-.3Z"/>
+        </symbol>
+        <symbol id="list-roman" fill="none" viewBox="0 0 28 28">
+            <path fill="var(--zw-icon-foreground)" d="m13.664 15.808-1.35-3.498a7.11 7.11 0 0 1-.252-.804c-.084.324-.17.594-.258.81l-1.35 3.492h3.21ZM16.088 19h-.9a.387.387 0 0 1-.252-.078.48.48 0 0 1-.144-.198l-.804-2.076H10.13l-.804 2.076a.421.421 0 0 1-.138.192.383.383 0 0 1-.252.084h-.9l3.438-8.598h1.176L16.088 19Zm.7-.66a.8.8 0 0 1 .053-.294.829.829 0 0 1 .156-.24.77.77 0 0 1 .534-.222.77.77 0 0 1 .696.462c.04.092.06.19.06.294a.744.744 0 0 1-.222.534.692.692 0 0 1-.24.156.73.73 0 0 1-.294.06.73.73 0 0 1-.294-.06.692.692 0 0 1-.396-.39.816.816 0 0 1-.054-.3Z"/>
+        </symbol>
+        <symbol id="list-latin" fill="none" viewBox="0 0 28 28">
+            <path fill="var(--zw-icon-foreground)" d="M12.086 9.802h.834v11.292h-.834V9.802Zm2.592 8.538a.8.8 0 0 1 .054-.294.829.829 0 0 1 .156-.24.77.77 0 0 1 .534-.222.77.77 0 0 1 .696.462c.04.092.06.19.06.294a.744.744 0 0 1-.222.534.692.692 0 0 1-.24.156.73.73 0 0 1-.294.06.73.73 0 0 1-.294-.06.692.692 0 0 1-.396-.39.816.816 0 0 1-.054-.3Z"/>
+        </symbol>
+        <symbol id="remove-format" fill="none" viewBox="0 0 28 28">
+            <path fill="var(--zw-icon-foreground)" fill-rule="evenodd" d="M14.089 6.726a1 1 0 0 1 1.425-.003l6.8 6.882a1 1 0 0 1 .007 1.398L17.2 20.3l-.2.2c-2.2 2.1-5.7 2-7.8-.2l-3.516-3.6a1 1 0 0 1 0-1.399l8.405-8.575Zm1.81 12.674c.1 0 .2 0 .2-.1l4.8-5-6.1-6.2-5 5.1 6.1 6.2Z" clip-rule="evenodd"/>
+        </symbol>
+    </defs>
+</svg>

package/lib/components/base/Button.vue

@@ -0,0 +1,117 @@
+<template>
+    <button
+        class="zw-button"
+        type="button"
+        :class="classes"
+        :disabled="disabled"
+        @click="$emit('click', $event)"
+    >
+        <slot />
+    </button>
+</template>
+
+<script>
+import { computed } from '@vue/composition-api';
+
+export default {
+    name: 'Button',
+
+    props: {
+        skin: {
+            type: String,
+            required: false,
+            validator: (skin) => ['toolbar', 'none'].includes(skin),
+            default: 'none'
+        },
+
+        active: {
+            type: Boolean,
+            required: false,
+            default: false
+        },
+
+        disabled: {
+            type: Boolean,
+            required: false,
+            default: false
+        },
+
+        icon: {
+            type: Boolean,
+            required: false,
+            default: false
+        }
+    },
+
+    setup(props) {
+        const classes = computed(() => ({
+            [`zw-button--${props.skin}`]: props.skin !== 'none',
+            'zw-button--active': props.active,
+            'zw-button--icon': props.icon
+        }));
+
+        return { classes };
+    }
+};
+</script>
+
+<style scoped>
+.zw-button {
+    display: inline-flex;
+    align-items: center;
+    vertical-align: middle;
+    touch-action: manipulation;
+    cursor: pointer;
+    background-image: none;
+    background-color: transparent;
+    border: 0;
+    padding: 0;
+    white-space: nowrap;
+    appearance: none;
+    user-select: none;
+    text-transform: none;
+    letter-spacing: normal;
+    color: inherit;
+    transition: 0.1s opacity ease-out;
+    will-change: opacity;
+}
+
+.zw-button::-moz-focus-inner {
+    border: 0 !important;
+}
+
+.zw-button:hover,
+.zw-button:focus {
+    text-decoration: none;
+    outline: none;
+}
+
+.zw-button:disabled {
+    user-select: none;
+    box-shadow: none;
+    cursor: not-allowed;
+    opacity: 0.35;
+}
+
+.zw-button--toolbar {
+    border-radius: 1px;
+    min-height: 28px;
+    font-weight: var(--zw-font-weight-semibold);
+    font-size: var(--zw-font-size-xs);
+    line-height: var(--zw-line-height-xxs);
+    color: rgb(var(--zw-color-n70));
+    transition-property: background-color, color, opacity;
+    will-change: background-color, color, opacity;
+}
+
+.zw-button--toolbar:not(.zw-button--icon) {
+    padding: var(--zw-offset-xxs) var(--zw-offset-xs);
+}
+
+.zw-button--toolbar:not(:disabled):hover,
+.zw-button--toolbar:not(:disabled):focus,
+.zw-button--toolbar.zw-button--active:not(:disabled) {
+    color: rgb(var(--zw-color-white));
+    background-color: rgb(var(--zw-color-n5));
+}
+</style>

package/lib/components/base/ButtonToggle.vue

@@ -0,0 +1,40 @@
+<template>
+    <div class="zw-button-toggle">
+        <slot
+            v-for="option of options"
+            name="option"
+            :option="option"
+            :isActive="option.id === value"
+            :activate="() => $emit('change', option.id)"
+        />
+    </div>
+</template>
+
+<script>
+export default {
+    name: 'ButtonToggle',
+
+    model: {
+        event: 'change'
+    },
+
+    props: {
+        value: {
+            type: String,
+            required: true
+        },
+
+        options: {
+            type: Array,
+            required: true
+        }
+    }
+};
+</script>
+
+<style scoped>
+.zw-button-toggle {
+    display: flex;
+    column-gap: var(--zw-offset-xxs);
+}
+</style>

package/lib/components/base/FieldLabel.vue

@@ -0,0 +1,28 @@
+<template>
+    <label class="zw-field-label" :for="fieldId">
+        <slot />
+    </label>
+</template>
+
+<script>
+export default {
+    name: 'FieldLabel',
+
+    props: {
+        fieldId: {
+            type: String,
+            required: true
+        }
+    }
+};
+</script>
+
+<style scoped>
+.zw-field-label {
+    font-weight: var(--zw-font-weight-thin);
+    font-size: var(--zw-font-size-xxs);
+    line-height: var(--zw-line-height-xxs);
+    color: rgb(var(--zw-color-n70));
+    display: block;
+}
+</style>