@zipify/wysiwyg 1.0.0-dev.1

package/lib/components/base/Icon.vue

@@ -0,0 +1,67 @@
+<template>
+    <svg v-bind="iconAttrs" class="zw-icon" :class="iconClasses">
+        <use :href="url" />
+    </svg>
+</template>
+
+<script>
+import { computed } from '@vue/composition-api';
+import sprite from '../../assets/icons.svg';
+
+export default {
+    name: 'Icon',
+
+    props: {
+        name: {
+            type: String,
+            required: true
+        },
+
+        size: {
+            type: [String, Number],
+            required: false,
+            default: ''
+        },
+
+        autoColor: {
+            type: Boolean,
+            required: false,
+            default: false
+        }
+    },
+
+    setup(props) {
+        const url = computed(() => `${sprite}#${props.name}`);
+
+        const iconSize = computed(() => {
+            if (isNaN(Number(props.size))) return props.size;
+
+            return `${props.size}px`;
+        });
+
+        const iconAttrs = computed(() => {
+            return props.size ? { width: iconSize.value, height: iconSize.value } : null;
+        });
+
+        const iconClasses = computed(() => ({
+            'zw-icon--auto-color': props.autoColor
+        }));
+
+        return {
+            url,
+            iconAttrs,
+            iconClasses
+        };
+    }
+};
+</script>
+
+<style scoped>
+.zw-icon {
+    display: inline-block;
+}
+
+.zw-icon--auto-color {
+    --zw-icon-foreground: currentColor;
+}
+</style>

package/lib/components/base/Modal.vue

@@ -0,0 +1,116 @@
+<template>
+    <transition name="zw-modal-" :duration="$options.transition">
+        <div
+            class="zw-modal"
+            ref="hostRef"
+            :style="modalStyles"
+            v-if="isOpened"
+            v-out-click="close"
+        >
+            <slot />
+        </div>
+    </transition>
+</template>
+
+<script>
+import { computed, ref } from '@vue/composition-api';
+import { outClick } from '../../directives';
+import { useDeselectionLock, useModalToggler } from './composables';
+
+export default {
+    name: 'Modal',
+
+    transition: {
+        enter: 200,
+        leave: 100
+    },
+
+    directives: {
+        outClick
+    },
+
+    props: {
+        toggler: {
+            type: Object,
+            required: false,
+            default: null
+        },
+
+        maxHeight: {
+            type: [Number, String],
+            required: false,
+            default: 1000
+        },
+
+        maxWidth: {
+            type: [Number, String],
+            required: false,
+            default: 1000
+        }
+    },
+
+    setup(props) {
+        const toggler = props.toggler || useModalToggler();
+        const hostRef = ref(null);
+
+        const modalStyles = computed(() => ({
+            '--zw-modal-max-height': `${props.maxHeight}px`,
+            '--zw-modal-max-width': `${props.maxWidth}px`
+        }));
+
+        useDeselectionLock({
+            isActiveRef: toggler.isOpened,
+            hostRef
+        });
+
+        return {
+            hostRef,
+            modalStyles,
+            close: toggler.close,
+            isOpened: toggler.isOpened
+        };
+    }
+};
+</script>
+
+<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);
+    max-width: var(--zw-modal-max-width);
+    z-index: 1000;
+    will-change: transform;
+}
+
+.zw-modal--enter-active {
+    transition: opacity 0.15s ease-out;
+}
+
+.zw-modal--enter,
+.zw-modal--leave-to {
+    opacity: 0;
+}
+
+.zw-modal--leave-active {
+    transition: opacity 0.1s ease-in;
+}
+
+/* Scrollbar overrides in modal */
+
+.zw-modal::v-deep .simplebar-offset,
+.zw-modal::v-deep .simplebar-mask {
+    position: initial;
+}
+
+.zw-modal::v-deep .simplebar-content {
+    max-height: var(--zw-modal-max-height);
+    padding: 0 !important;
+}
+
+.zw-modal::v-deep .simplebar-content-wrapper {
+    overscroll-behavior: contain;
+}
+</style>

package/lib/components/base/NumberField.vue

@@ -0,0 +1,242 @@
+<template>
+    <div :class="elementClasses" class="zw-number-field">
+        <input
+            type="number"
+            class="zw-number-field__input"
+            :id="fieldId"
+            :disabled="disabled"
+            :value="tempValue"
+            @change="onChange"
+        >
+
+        <div class="zw-number-field__controls">
+            <div class="zw-number-field__buttons">
+                <Button
+                    class="zw-number-field__increment-button"
+                    @click="incrementValue"
+                    :disabled="disabled"
+                    data-test-selector="increment-button"
+                    type="button"
+                />
+
+                <Button
+                    class="zw-number-field__decrement-button"
+                    @click="decrementValue"
+                    :disabled="disabled"
+                    data-test-selector="decrement-button"
+                    type="button"
+                />
+            </div>
+
+            <p class="zw-number-field__units" v-if="units">
+                {{ units }}
+            </p>
+        </div>
+    </div>
+</template>
+
+<script>
+import { computed, toRef } from '@vue/composition-api';
+import Button from './Button';
+import { useNumberValue } from './composables';
+
+export default {
+    name: 'NumberField',
+
+    components: {
+        Button
+    },
+
+    props: {
+        value: {
+            required: true,
+            type: [Number, String]
+        },
+
+        min: {
+            type: [Number, String],
+            required: false,
+            default: null
+        },
+
+        max: {
+            type: [Number, String],
+            required: false,
+            default: null
+        },
+
+        digits: {
+            type: [Number, String],
+            required: false,
+            default: 2
+        },
+
+        step: {
+            type: [Number, String],
+            required: false,
+            default: 1
+        },
+
+        units: {
+            type: String,
+            required: false,
+            default: ''
+        },
+
+        disabled: {
+            type: Boolean,
+            required: false,
+            default: false
+        },
+
+        fieldId: {
+            type: String,
+            required: false,
+            default: ''
+        }
+    },
+
+    setup(props, { emit }) {
+        const toOptionalNumber = (number) => number === null ? null : Number(number);
+
+        const numberValue = useNumberValue({
+            valueRef: toRef(props, 'value'),
+            onChange: (value) => emit('input', value),
+            digits: Number(props.digits),
+            min: toOptionalNumber(props.min),
+            max: toOptionalNumber(props.max)
+        });
+
+        const onChange = (event) => numberValue.change(event.target.value);
+        const incrementValue = () => numberValue.increment(Number(props.step));
+        const decrementValue = () => numberValue.decrement(Number(props.step));
+
+        const elementClasses = computed(() => ({
+            'zw-number-field--disabled': props.disabled
+        }));
+
+        return {
+            elementClasses,
+            tempValue: numberValue.temp,
+            onChange,
+            incrementValue,
+            decrementValue
+        };
+    }
+};
+</script>
+
+<style lang="scss" scoped>
+.zw-number-field {
+    --border-color: rgb(var(--zw-color-n60));
+    --text-color: rgb(var(--zw-color-n85));
+    --buttons-color: rgb(var(--zw-color-n70));
+
+    padding: 2px 4px;
+    border: solid 1px var(--border-color);
+    align-items: stretch;
+    display: flex;
+}
+
+.zw-number-field:hover {
+    --border-color: rgb(var(--zw-color-n80));
+    --text-color: rgb(var(--zw-color-n85));
+}
+
+.zw-number-field:focus,
+.zw-number-field:focus-within {
+    --border-color: rgb(var(--zw-color-white));
+    --text-color: rgb(var(--zw-color-white));
+}
+
+.zw-number-field__input {
+    color: var(--text-color);
+    background-color: rgb(var(--zw-color-n15));
+    border: 0;
+    display: block;
+    width: 100%;
+    outline: none !important;
+    line-height: var(--zw-line-height-md);
+    font-size: var(--zw-font-size-xs);
+    -moz-appearance: textfield;
+}
+
+.zw-number-field__buttons {
+    display: none;
+    flex-direction: column;
+    height: 100%;
+}
+
+.zw-number-field:hover .zw-number-field__buttons,
+.zw-number-field:focus .zw-number-field__buttons,
+.zw-number-field:focus-within .zw-number-field__buttons {
+    display: flex;
+}
+
+.zw-number-field__input::placeholder {
+    color: var(--text-color);
+}
+
+.zw-number-field__input::-webkit-outer-spin-button,
+.zw-number-field__input::-webkit-inner-spin-button {
+    color: var(--text-color);
+    -webkit-appearance: none;
+}
+
+.zw-number-field__controls {
+    min-width: var(--zw-offset-sm);
+}
+
+.zw-number-field--disabled {
+    opacity: 0.5;
+}
+
+.zw-number-field--disabled,
+.zw-number-field--disabled .zw-number-field__input {
+    cursor: not-allowed;
+}
+
+.zw-number-field__increment-button,
+.zw-number-field__decrement-button {
+    width: 100%;
+    height: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.zw-number-field__increment-button::after,
+.zw-number-field__decrement-button::after {
+    content: "";
+    border-left: 3px solid transparent;
+    border-right: 3px solid transparent;
+}
+
+.zw-number-field__increment-button::after {
+    border-bottom: 3px solid var(--buttons-color);
+}
+
+.zw-number-field__decrement-button::after {
+    border-top: 3px solid var(--buttons-color);
+}
+
+.zw-number-field__increment-button:hover,
+.zw-number-field__decrement-button:hover {
+    background-color: rgb(var(--zw-color-n20));
+    --buttons-color: rgb(var(--zw-color-white));
+}
+
+.zw-number-field__units {
+    color: rgb(var(--zw-color-n70));
+    font-size: var(--zw-font-size-xs);
+    line-height: var(--zw-line-height-md);
+    text-align: center;
+    display: inline-block;
+    width: 100%;
+}
+
+.zw-number-field:hover .zw-number-field__units,
+.zw-number-field:focus .zw-number-field__units {
+    display: none;
+}
+</style>

package/lib/components/base/Range.vue

@@ -0,0 +1,196 @@
+<template>
+    <input
+        class="zw-range"
+        type="range"
+        :id="fieldId"
+        :min="min"
+        :max="max"
+        :step="step"
+        :value="tempValue"
+        :style="inputStyles"
+        @input="update($event)"
+    >
+</template>
+
+<script>
+import { computed, toRef } from '@vue/composition-api';
+import { useTempValue } from './composables';
+
+export default {
+    name: 'Range',
+
+    props: {
+        min: {
+            type: [String, Number],
+            required: true
+        },
+
+        max: {
+            type: [String, Number],
+            required: true
+        },
+
+        step: {
+            type: [String, Number],
+            required: true
+        },
+
+        value: {
+            type: [String, Number],
+            required: true
+        },
+
+        fieldId: {
+            type: String,
+            required: false,
+            default: ''
+        }
+    },
+
+    setup(props, { emit }) {
+        const tempValue = useTempValue({
+            valueRef: toRef(props, 'value'),
+            format: Number
+        });
+        const inputStyles = computed(() => {
+            const min = Number(props.min);
+            const max = Number(props.max);
+            const step = Number(props.step);
+            const value = Math.ceil(tempValue.value / step) * step;
+            const progress = (value - min) / (max - min);
+
+            return { '--zw-range-progress': `${progress * 100}%` };
+        });
+
+        function update(event) {
+            tempValue.value = Number(event.target.value);
+            emit('input', tempValue.value);
+        }
+
+        return {
+            inputStyles,
+            tempValue,
+            update
+        };
+    }
+};
+</script>
+
+<style scoped>
+.zw-range {
+    width: 100%;
+    height: 32px;
+    background: none;
+    cursor: pointer;
+    flex-grow: 1;
+    -webkit-appearance: none;
+
+    --zw-range-track-background-color: transparent;
+    --zw-range-track-background-image: linear-gradient(to right, #B3B3B3 var(--zw-range-progress), #3B3B3B var(--zw-range-progress));
+    --zw-range-thumb-background: rgb(var(--zw-color-white));
+    --zw-range-thumb-box-shadow: -1px -1px 3px rgba(59, 59, 59, 0.35), 1px 1px 3px rgba(59, 59, 59, 0.35);
+}
+
+.zw-range::-webkit-slider-runnable-track {
+    width: 100%;
+    height: 4px;
+    border: 0;
+    border-radius: 0;
+    background-size: 100%;
+    background-color: var(--zw-range-track-background-color);
+    background-image: var(--zw-range-track-background-image);
+}
+
+.zw-range::-moz-range-track {
+    width: 100%;
+    height: 4px;
+    border: 0;
+    border-radius: 0;
+    background-size: 100%;
+    background-color: var(--zw-range-track-background-color);
+    background-image: var(--zw-range-track-background-image);
+}
+
+.zw-range::-ms-track {
+    width: 100%;
+    height: 4px;
+    border: 0;
+    border-radius: 0;
+    background-size: 100%;
+    background-color: var(--zw-range-track-background-color);
+    background-image: var(--zw-range-track-background-image);
+}
+
+.zw-range::-webkit-slider-thumb {
+    height: 13px;
+    width: 13px;
+    border-radius: 100%;
+    margin-top: -5px;
+    background: var(--zw-range-thumb-background);
+    box-shadow: var(--zw-range-thumb-box-shadow);
+    -webkit-appearance: none;
+    transition: box-shadow 150ms cubic-bezier(0, 0, 0.2, 1);
+}
+
+.zw-range::-moz-range-thumb {
+    height: 13px;
+    width: 13px;
+    border-radius: 100%;
+    margin-top: -5px;
+    background: var(--zw-range-thumb-background);
+    box-shadow: var(--zw-range-thumb-box-shadow);
+    -webkit-appearance: none;
+    transition: box-shadow 150ms cubic-bezier(0, 0, 0.2, 1);
+}
+
+.zw-range::-ms-thumb {
+    height: 13px;
+    width: 13px;
+    border-radius: 100%;
+    margin-top: -5px;
+    background: var(--zw-range-thumb-background);
+    box-shadow: var(--zw-range-thumb-box-shadow);
+    -webkit-appearance: none;
+    transition: box-shadow 150ms cubic-bezier(0, 0, 0.2, 1);
+}
+
+/* Browser hacks */
+
+.zw-range::-moz-focus-outer,
+.zw-range::-moz-range-thumb {
+    border: 0;
+}
+
+/* In IE don't know how it count margin for thumb */
+/* but it works */
+
+.zw-range::-ms-thumb {
+    margin-top: -2px;
+}
+
+/* END browser hacks */
+
+.zw-range:focus {
+    outline: none;
+}
+
+.zw-range:disabled {
+    cursor: not-allowed;
+    opacity: 0.6;
+    --zw-range-track-background-color: #3B3B3B;
+    --zw-range-track-background-image: linear-gradient(to right, #B3B3B3 var(--zw-range-progress), #3B3B3B var(--zw-range-progress));
+}
+
+.zw-range:disabled {
+    --zw-range-thumb-background: #B3B3B3;
+    --zw-range-thumb-box-shadow: 0 0 6px rgba(0, 0, 0, 0.35);
+}
+
+.zw-range:not(:disabled):hover {
+    --zw-range-thumb-box-shadow: 0 0 0 8px rgba(240, 240, 240, 0.15);
+}
+
+.zw-range:not(:disabled):active {
+    --zw-range-thumb-box-shadow: 0 0 0 12px rgba(240, 240, 240, 0.15);
+}
+</style>

package/lib/components/base/ScrollView.vue

@@ -0,0 +1,60 @@
+<template>
+    <div class="zw-scroll-view" data-simplebar-auto-hide="false" ref="hostRef">
+        <slot />
+    </div>
+</template>
+
+<script>
+import SimpleBar from 'simplebar';
+import { onMounted, provide, ref } from '@vue/composition-api';
+import { SCROLL_VIEW } from './composables';
+
+export default {
+    name: 'ScrollView',
+
+    setup() {
+        const hostRef = ref(null);
+        const scrollerRef = ref(null);
+
+        provide(SCROLL_VIEW, scrollerRef);
+
+        onMounted(() => {
+            const options = SimpleBar.getOptions(hostRef.value.attributes);
+            const simpleBar = new SimpleBar(hostRef.value, options);
+
+            scrollerRef.value = simpleBar.getScrollElement();
+        });
+
+        return { hostRef };
+    }
+};
+</script>
+
+<style scoped>
+@import url("~simplebar/dist/simplebar.css");
+
+.zw-scroll-view::v-deep .simplebar-placeholder {
+    display: none;
+}
+
+.zw-scroll-view::v-deep .simplebar-track {
+    width: 4px;
+    background-color: rgb(var(--zw-color-n20));
+    pointer-events: initial;
+}
+
+.zw-scroll-view::v-deep .simplebar-scrollbar {
+    width: 4px;
+}
+
+.zw-scroll-view::v-deep .simplebar-scrollbar::before {
+    top: 0;
+    left: 0;
+    background-color: rgb(var(--zw-color-n5));
+    cursor: pointer;
+    height: 100%;
+    width: 100%;
+    opacity: 1;
+    border-radius: 0;
+}
+</style>