@zipify/wysiwyg 3.1.2 → 4.0.0-vue3.0

package/lib/components/base/Icon.vue

@@ -7,61 +7,49 @@
     />
 </template>
 
-<script>
+<script setup>
 import { computed } from 'vue';
 import { importIcon } from '../../utils';
 
-export default {
-    name: 'Icon',
-
-    props: {
-        name: {
-            type: String,
-            required: true
-        },
-
-        size: {
-            type: [String, Number],
-            required: false,
-            default: ''
-        },
+const props = defineProps({
+    name: {
+        type: String,
+        required: true
+    },
 
-        autoColor: {
-            type: Boolean,
-            required: false,
-            default: false
-        }
+    size: {
+        type: [String, Number],
+        required: false,
+        default: ''
     },
 
-    setup(props) {
-        const source = computed(() => importIcon(props.name));
+    autoColor: {
+        type: Boolean,
+        required: false,
+        default: false
+    }
+});
 
-        const iconSize = computed(() => {
-            if (isNaN(Number(props.size))) return props.size;
+const source = computed(() => importIcon(props.name));
 
-            return `${props.size}px`;
-        });
+const iconSize = computed(() => {
+    if (isNaN(Number(props.size))) return props.size;
 
-        const iconStyles = computed(() => {
-            if (!props.size) return null;
+    return `${props.size}px`;
+});
 
-            return {
-                '--zw-icon-width': iconSize.value,
-                '--zw-icon-height': iconSize.value
-            };
-        });
+const iconStyles = computed(() => {
+    if (!props.size) return null;
 
-        const iconClasses = computed(() => ({
-            'zw-icon--auto-color': props.autoColor
-        }));
+    return {
+        '--zw-icon-width': iconSize.value,
+        '--zw-icon-height': iconSize.value
+    };
+});
 
-        return {
-            source,
-            iconStyles,
-            iconClasses
-        };
-    }
-};
+const iconClasses = computed(() => ({
+    'zw-icon--auto-color': props.autoColor
+}));
 </script>
 
 <style scoped>

package/lib/components/base/Modal.vue

@@ -1,95 +1,80 @@
 <template>
-    <transition name="zw-modal-" :duration="$options.transition">
+    <transition name="zw-modal-" :duration="transition">
         <div
             class="zw-modal"
             ref="hostRef"
             tabindex="-1"
             :style="modalStyles"
             v-if="isOpened"
-            v-out-click="close"
+            v-out-click="toggler.close"
+            data-test-selector="modal"
         >
             <slot />
         </div>
     </transition>
 </template>
 
-<script>
-import { computed, nextTick, ref, watch } from 'vue';
-import { outClick } from '../../directives';
+<script setup>
+import { computed, nextTick, ref, unref, watch } from 'vue';
+import { outClick as vOutClick } from '../../directives';
 import { useDeselectionLock, useElementRef, useModalToggler } from './composables';
 
-export default {
-    name: 'Modal',
+const transition = {
+    enter: 200,
+    leave: 100
+};
 
-    transition: {
-        enter: 200,
-        leave: 100
+const props = defineProps({
+    toggler: {
+        type: Object,
+        required: false,
+        default: null
     },
 
-    directives: {
-        outClick
+    maxHeight: {
+        type: [Number, String],
+        required: false,
+        default: 1000
     },
 
-    props: {
-        toggler: {
-            type: Object,
-            required: false,
-            default: null
-        },
-
-        maxHeight: {
-            type: [Number, String],
-            required: false,
-            default: 1000
-        },
-
-        maxWidth: {
-            type: [Number, String],
-            required: false,
-            default: 1000
-        },
-
-        focusFirstControl: {
-            type: Boolean,
-            required: false,
-            default: false
-        }
+    maxWidth: {
+        type: [Number, String],
+        required: false,
+        default: 1000
     },
 
-    setup(props) {
-        const toggler = props.toggler || useModalToggler();
-        const hostRef = ref(null);
-        const hostEl = useElementRef(hostRef);
-
-        const modalStyles = computed(() => ({
-            '--zw-modal-max-height': `${props.maxHeight}px`,
-            '--zw-modal-max-width': `${props.maxWidth}px`
-        }));
-
-        useDeselectionLock({
-            isActiveRef: toggler.isOpened,
-            hostRef
-        });
-
-        if (props.focusFirstControl) {
-            watch(toggler.isOpened, async (_, wasOpened) => {
-                if (wasOpened) return;
-
-                await nextTick();
-                const focusableEl = hostEl.value.querySelector(':where(a, button, input):not(:disabled, [data-initial-focus="false"])');
-
-                (focusableEl || hostEl.value).focus();
-            });
-        }
-
-        return {
-            hostRef,
-            modalStyles,
-            close: toggler.close,
-            isOpened: toggler.isOpened
-        };
+    focusFirstControl: {
+        type: Boolean,
+        required: false,
+        default: false
     }
-};
+});
+
+const toggler = props.toggler || useModalToggler();
+const isOpened = computed(() => unref(toggler.isOpened));
+const hostRef = ref(null);
+const hostEl = useElementRef(hostRef);
+
+const modalStyles = computed(() => ({
+    '--zw-modal-max-height': `${props.maxHeight}px`,
+    '--zw-modal-max-width': `${props.maxWidth}px`
+}));
+
+useDeselectionLock({
+    isActiveRef: toggler.isOpened,
+    hostRef
+});
+
+if (props.focusFirstControl) {
+    watch(toggler.isOpened, async (_, wasOpened) => {
+        if (wasOpened) return;
+
+        await nextTick();
+        const focusableEl = hostEl.value.querySelector(':where(a, button, input):not(:disabled, [data-initial-focus="false"])');
+
+        (focusableEl || hostEl.value).focus();
+    });
+}
 </script>
 
 <style scoped>
@@ -108,7 +93,7 @@ export default {
     transition: opacity 0.15s ease-out;
 }
 
-.zw-modal--enter,
+.zw-modal--enter-from,
 .zw-modal--leave-to {
     opacity: 0;
 }
@@ -119,17 +104,17 @@ export default {
 
 /* Scrollbar overrides in modal */
 
-.zw-modal::v-deep .simplebar-offset,
-.zw-modal::v-deep .simplebar-mask {
+.zw-modal:deep(.simplebar-offset),
+.zw-modal:deep(.simplebar-mask) {
     position: initial;
 }
 
-.zw-modal::v-deep .simplebar-content {
+.zw-modal:deep(.simplebar-content) {
     max-height: var(--zw-modal-max-height);
     padding: 0 !important;
 }
 
-.zw-modal::v-deep .simplebar-content-wrapper {
+.zw-modal:deep(.simplebar-content-wrapper) {
     overscroll-behavior: contain;
 }
 </style>

package/lib/components/base/NumberField.vue

@@ -35,95 +35,80 @@
     </label>
 </template>
 
-<script>
-import { computed, toRef } from 'vue';
+<script setup>
+import { computed, toRef, unref } from 'vue';
 import Button from './Button';
 import { useNumberValue } from './composables';
 
-export default {
-    name: 'NumberField',
+const props = defineProps({
+    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
+    },
 
-    components: {
-        Button
+    step: {
+        type: [Number, String],
+        required: false,
+        default: 1
     },
 
-    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: ''
-        }
+    units: {
+        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
-        };
+    disabled: {
+        type: Boolean,
+        required: false,
+        default: false
+    },
+
+    fieldId: {
+        type: String,
+        required: false,
+        default: ''
     }
-};
+});
+
+const emit = defineEmits(['input']);
+
+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 tempValue = computed(() => unref(numberValue.temp.value));
+
+const elementClasses = computed(() => ({
+    'zw-number-field--disabled': props.disabled
+}));
 </script>
 
 <style scoped>

package/lib/components/base/Range.vue

@@ -12,68 +12,58 @@
     >
 </template>
 
-<script>
+<script setup>
 import { computed, toRef } from 'vue';
 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: ''
-        }
+const props = defineProps({
+    min: {
+        type: [String, Number],
+        required: true
     },
 
-    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
-        };
+    max: {
+        type: [String, Number],
+        required: true
+    },
+
+    step: {
+        type: [String, Number],
+        required: true
+    },
+
+    value: {
+        type: [String, Number],
+        required: true
+    },
+
+    fieldId: {
+        type: String,
+        required: false,
+        default: ''
     }
-};
+});
+
+const emit = defineEmits(['input']);
+
+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);
+}
 </script>
 
 <style scoped>

package/lib/components/base/ScrollView.vue

@@ -4,48 +4,40 @@
     </div>
 </template>
 
-<script>
+<script setup>
 import SimpleBar from 'simplebar';
 import { onMounted, provide, ref } from 'vue';
 import { SCROLL_VIEW } from './composables';
 
-export default {
-    name: 'ScrollView',
+const hostRef = ref(null);
+const scrollerRef = ref(null);
 
-    setup() {
-        const hostRef = ref(null);
-        const scrollerRef = ref(null);
+provide(SCROLL_VIEW, scrollerRef);
 
-        provide(SCROLL_VIEW, scrollerRef);
+onMounted(() => {
+    const options = SimpleBar.getOptions(hostRef.value.attributes);
+    const simpleBar = new SimpleBar(hostRef.value, options);
 
-        onMounted(() => {
-            const options = SimpleBar.getOptions(hostRef.value.attributes);
-            const simpleBar = new SimpleBar(hostRef.value, options);
-
-            scrollerRef.value = simpleBar.getScrollElement();
-        });
-
-        return { hostRef };
-    }
-};
+    scrollerRef.value = simpleBar.getScrollElement();
+});
 </script>
 
 <style scoped>
-.zw-scroll-view::v-deep .simplebar-placeholder {
+.zw-scroll-view:deep(.simplebar-placeholder) {
     display: none;
 }
 
-.zw-scroll-view::v-deep .simplebar-track {
+.zw-scroll-view:deep(.simplebar-track) {
     width: 4px;
     background-color: rgb(var(--zw-color-n20));
     pointer-events: initial;
 }
 
-.zw-scroll-view::v-deep .simplebar-scrollbar {
+.zw-scroll-view:deep(.simplebar-scrollbar) {
     width: 4px;
 }
 
-.zw-scroll-view::v-deep .simplebar-scrollbar::before {
+.zw-scroll-view:deep(.simplebar-scrollbar::before) {
     top: 0;
     left: 0;
     background-color: rgb(var(--zw-color-n5));

package/lib/components/base/TextField.vue

@@ -20,45 +20,40 @@
     </div>
 </template>
 
-<script>
+<script setup>
 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
-        }
+const props = defineProps({
+    value: {
+        type: [Number, String],
+        required: true
     },
 
-    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());
-        });
+    label: {
+        type: String,
+        required: true
+    },
+
+    placeholder: {
+        type: String,
+        required: false,
+        default: ''
+    },
 
-        return { onInput, fieldId };
+    error: {
+        type: String,
+        required: false,
+        default: null
     }
-};
+});
+
+const emit = defineEmits(['input']);
+
+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());
+});
 </script>
 
 <style scoped>

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

@@ -3,7 +3,7 @@ import Button from '../Button';
 
 function createComponent({ skin, active, icon } = {}) {
     return shallowMount(Button, {
-        propsData: {
+        props: {
             skin: skin ?? 'none',
             active: active ?? false,
             icon: icon ?? false