@zipify/wysiwyg 3.1.2 → 4.0.0-vue3.0

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

@@ -9,64 +9,46 @@
     </Button>
 </template>
 
-<script>
+<script setup>
 import { computed, inject, nextTick, onMounted, ref, toRef } from 'vue';
 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 props = defineProps({
+    option: {
+        type: Object,
+        required: true
+    }
+});
 
-        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 }));
+const activeOptionManager = inject(InjectionTokens.ACTIVE_MANAGER);
+const dropdownToggler = inject(InjectionTokens.TOGGLER);
+const session = inject(InjectionTokens.SESSION);
 
-        function activate() {
-            activeOptionManager.activateOption(props.option);
-            dropdownToggler.close();
-        }
+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 }));
 
-        onMounted(async () => {
-            if (isActive.value && !session.scrolled) {
-                session.scrolled = true; // Prevent multiple scrolling to option
+function activate() {
+    activeOptionManager.activateOption(props.option);
+    dropdownToggler.close();
+}
 
-                await nextTick();
-                const el = optionRef.value.$el;
-                const offset = el.offsetHeight * 1.5;
+onMounted(async () => {
+    if (isActive.value && !session.scrolled) {
+        session.scrolled = true; // Prevent multiple scrolling to option
 
-                scrollView.scrollToElement(el, { offset });
-            }
-        });
+        await nextTick();
+        const el = optionRef.value.$el;
+        const offset = el.offsetHeight * 1.5;
 
-        return {
-            optionTitle,
-            classes,
-            isActive,
-            optionRef,
-            activate
-        };
+        scrollView.scrollToElement(el, { offset });
     }
-};
+});
 </script>
 
 <style scoped>

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

@@ -15,9 +15,11 @@ const createActiveOptionManager = ({ activeOption } = {}) => ({
 
 function createComponent({ toggler, activeOptionManager } = {}) {
     return shallowMount(DropdownActivator, {
-        provide: {
-            [InjectionTokens.TOGGLER]: toggler ?? createToggler(),
-            [InjectionTokens.ACTIVE_MANAGER]: activeOptionManager ?? createActiveOptionManager()
+        global: {
+            provide: {
+                [InjectionTokens.TOGGLER]: toggler ?? createToggler(),
+                [InjectionTokens.ACTIVE_MANAGER]: activeOptionManager ?? createActiveOptionManager()
+            }
         }
     });
 }

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

@@ -17,13 +17,15 @@ const createToggler = () => ({
 
 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)
+        props: { option },
+
+        global: {
+            provide: {
+                [InjectionTokens.ACTIVE_MANAGER]: activeManager ?? createActiveManager(),
+                [InjectionTokens.TOGGLER]: toggler ?? createToggler(),
+                [InjectionTokens.SESSION]: {},
+                [SCROLL_VIEW]: ref(null)
+            }
         }
     });
 }

package/lib/components/toolbar/Toolbar.vue

@@ -1,64 +1,47 @@
 <template>
     <keep-alive>
         <transition name="zw-toolbar-" duration="150">
-            <div class="zw-toolbar" :style="toolbarStyles" ref="toolbarRef" v-if="isVisible">
+            <div class="zw-toolbar" ref="toolbarRef" v-if="isVisible">
                 <component :is="layoutComponent" />
             </div>
         </transition>
     </keep-alive>
 </template>
 
-<script>
+<script setup>
 import { computed, ref, watch } from 'vue';
 import { Devices } from '../../enums';
 import { ToolbarDesktop, ToolbarMobile, ToolbarPopup } from './layouts';
 
-export default {
-    name: 'Toolbar',
-
-    props: {
-        device: {
-            type: String,
-            required: true
-        },
-
-        toolbar: {
-            type: Object,
-            required: true
-        },
-
-        popupMode: {
-            type: Boolean,
-            required: true
-        }
+const props = defineProps({
+    device: {
+        type: String,
+        required: true
     },
 
-    setup(props) {
-        const layoutComponent = computed(() => {
-            if (props.popupMode) return ToolbarPopup;
+    toolbar: {
+        type: Object,
+        required: true
+    },
 
-            return props.device === Devices.MOBILE ? ToolbarMobile : ToolbarDesktop;
-        });
+    popupMode: {
+        type: Boolean,
+        required: true
+    }
+});
 
-        const isVisible = computed(() => props.toolbar.isActiveRef.value);
-        const toolbarRef = ref(null);
+const layoutComponent = computed(() => {
+    if (props.popupMode) return ToolbarPopup;
 
-        watch(toolbarRef, (toolbarEl) => {
-            toolbarEl && props.toolbar.mount(toolbarEl);
-        });
+    return props.device === Devices.MOBILE ? ToolbarMobile : ToolbarDesktop;
+});
 
-        const toolbarStyles = computed(() => ({
-            '--zw-toolbar-offset-y': `${props.toolbar.offsets[1]}px`
-        }));
+const isVisible = computed(() => props.toolbar.isActiveRef.value);
+const toolbarRef = ref(null);
 
-        return {
-            layoutComponent,
-            isVisible,
-            toolbarRef,
-            toolbarStyles
-        };
-    }
-};
+watch(toolbarRef, (toolbarEl) => {
+    toolbarEl && props.toolbar.mount(toolbarEl);
+});
 </script>
 
 <style scoped>
@@ -69,6 +52,7 @@ export default {
     z-index: 999999;
     text-align: left;
     position: absolute;
+    --zw-toolbar-offset-y: calc(v-bind("toolbar.offsets[1]") * 1px)
 }
 
 .zw-toolbar::before,
@@ -98,7 +82,7 @@ export default {
     transition: opacity 0s ease-in;
 }
 
-.zw-toolbar--enter,
+.zw-toolbar--enter-from,
 .zw-toolbar--leave-to {
     opacity: 0;
 }

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

@@ -6,7 +6,7 @@ import { ToolbarMobile, ToolbarDesktop, ToolbarPopup } from '../layouts';
 
 function createComponent({ device, popupMode }) {
     return shallowMount(Toolbar, {
-        propsData: {
+        props: {
             toolbar: {
                 mount: jest.fn(),
                 isActiveRef: ref({ value: true }),

package/lib/components/toolbar/base/__tests__/ToolbarDivider.test.js

@@ -3,7 +3,7 @@ import ToolbarDivider from '../ToolbarDivider';
 
 function createComponent({ isVertical, isHorizontal }) {
     return shallowMount(ToolbarDivider, {
-        propsData: {
+        props: {
             vertical: isVertical ?? false,
             horizontal: isHorizontal ?? false
         }

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

@@ -1,5 +1,5 @@
 <template>
-    <ButtonToggle :value="currentValue" :options="$options.alignments" @change="toggle">
+    <ButtonToggle :value="currentValue" :options="alignments" @change="toggle">
         <template #option="{ isActive, option, activate }">
             <Button
                 class="zw-position--relative"
@@ -15,59 +15,40 @@
     </ButtonToggle>
 </template>
 
-<script>
+<script setup>
 import { inject, computed, unref } from 'vue';
 import { InjectionTokens } from '../../../injectionTokens';
 import { Alignments } from '../../../enums';
 import { ButtonToggle, Button, Icon } from '../../base';
-import { tooltip } from '../../../directives';
+import { tooltip as vTooltip } from '../../../directives';
 
-export default {
-    name: 'AlignmentControl',
-
-    alignments: [
-        {
-            id: Alignments.LEFT,
-            tooltip: { text: 'Align Left', hotkey: 'Mod Shift L' }
-        },
-        {
-            id: Alignments.CENTER,
-            tooltip: { text: 'Align Center', hotkey: 'Mod Shift E' }
-        },
-        {
-            id: Alignments.RIGHT,
-            tooltip: { text: 'Align Right', hotkey: 'Mod Shift R' }
-        },
-        {
-            id: Alignments.JUSTIFY,
-            tooltip: { text: 'Justify', hotkey: 'Mod Shift J' }
-        }
-    ],
-
-    components: {
-        ButtonToggle,
-        Button,
-        Icon
+const alignments = [
+    {
+        id: Alignments.LEFT,
+        tooltip: { text: 'Align Left', hotkey: 'Mod Shift L' }
     },
-
-    directives: {
-        tooltip
+    {
+        id: Alignments.CENTER,
+        tooltip: { text: 'Align Center', hotkey: 'Mod Shift E' }
     },
+    {
+        id: Alignments.RIGHT,
+        tooltip: { text: 'Align Right', hotkey: 'Mod Shift R' }
+    },
+    {
+        id: Alignments.JUSTIFY,
+        tooltip: { text: 'Justify', hotkey: 'Mod Shift J' }
+    }
+];
 
-    setup(_, { emit }) {
-        const editor = inject(InjectionTokens.EDITOR);
-        const alignment = editor.commands.getAlignment();
-        const currentValue = computed(() => unref(alignment) ?? 'none');
+const emit = defineEmits(['applied']);
 
-        function toggle(value) {
-            editor.chain().focus().toggleAlignment(value).run();
-            emit('applied');
-        }
+const editor = inject(InjectionTokens.EDITOR);
+const alignment = editor.commands.getAlignment();
+const currentValue = computed(() => unref(alignment) ?? 'none');
 
-        return {
-            currentValue,
-            toggle
-        };
-    }
-};
+function toggle(value) {
+    editor.chain().focus().toggleAlignment(value).run();
+    emit('applied');
+}
 </script>

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

@@ -14,35 +14,14 @@
     </ColorPicker>
 </template>
 
-<script>
+<script setup>
 import { inject } from 'vue';
 import { ColorPicker, Button, Icon } from '../../base';
 import { InjectionTokens } from '../../../injectionTokens';
-import { tooltip } from '../../../directives';
+import { tooltip as vTooltip } from '../../../directives';
 
-export default {
-    name: 'BackgroundColorControl',
+const editor = inject(InjectionTokens.EDITOR);
 
-    components: {
-        ColorPicker,
-        Button,
-        Icon
-    },
-
-    directives: {
-        tooltip
-    },
-
-    setup() {
-        const editor = inject(InjectionTokens.EDITOR);
-
-        const currentValue = editor.commands.getBackgroundColor();
-        const apply = (color) => editor.chain().applyBackgroundColor(color).run();
-
-        return {
-            currentValue,
-            apply
-        };
-    }
-};
+const currentValue = editor.commands.getBackgroundColor();
+const apply = (color) => editor.chain().applyBackgroundColor(color).run();
 </script>

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

@@ -1,8 +1,5 @@
 <template>
-    <Dropdown
-        :options="$options.styles"
-        @change="apply"
-    >
+    <Dropdown :options="styles" @change="apply">
         <template #activator="{ open, isOpened }">
             <Button
                 icon
@@ -17,38 +14,19 @@
     </Dropdown>
 </template>
 
-<script>
+<script setup>
 import { inject } from 'vue';
 import { CaseStyles } from '../../../enums';
 import { Dropdown, Button, Icon } from '../../base';
 import { InjectionTokens } from '../../../injectionTokens';
-import { tooltip } from '../../../directives';
+import { tooltip as vTooltip } from '../../../directives';
 
-export default {
-    name: 'CaseStyleControl',
+const styles = [
+    { id: CaseStyles.UPPERCASE, title: 'UPPERCASE' },
+    { id: CaseStyles.LOWERCASE, title: 'lowercase' },
+    { id: CaseStyles.CAPITALIZE, title: 'Capitalize' }
+];
 
-    components: {
-        Dropdown,
-        Button,
-        Icon
-    },
-
-    directives: {
-        tooltip
-    },
-
-    styles: [
-        { id: CaseStyles.UPPERCASE, title: 'UPPERCASE' },
-        { id: CaseStyles.LOWERCASE, title: 'lowercase' },
-        { id: CaseStyles.CAPITALIZE, title: 'Capitalize' }
-    ],
-
-    setup() {
-        const editor = inject(InjectionTokens.EDITOR);
-
-        const apply = (value) => editor.chain().focus().applyCaseStyle(value).run();
-
-        return { apply };
-    }
-};
+const editor = inject(InjectionTokens.EDITOR);
+const apply = (value) => editor.chain().focus().applyCaseStyle(value).run();
 </script>

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

@@ -14,36 +14,14 @@
     </ColorPicker>
 </template>
 
-<script>
+<script setup>
 import { inject } from 'vue';
 import { ColorPicker, Button, Icon } from '../../base';
 import { InjectionTokens } from '../../../injectionTokens';
-import { tooltip } from '../../../directives';
+import { tooltip as vTooltip } from '../../../directives';
 
-export default {
-    name: 'FontColorControl',
+const editor = inject(InjectionTokens.EDITOR);
 
-    components: {
-        ColorPicker,
-        Button,
-        Icon
-    },
-
-    directives: {
-        tooltip
-    },
-
-    setup() {
-        const editor = inject(InjectionTokens.EDITOR);
-
-        const currentValue = editor.commands.getFontColor();
-
-        const apply = (color) => editor.chain().applyFontColor(color).run();
-
-        return {
-            currentValue,
-            apply
-        };
-    }
-};
+const currentValue = editor.commands.getFontColor();
+const apply = (color) => editor.chain().applyFontColor(color).run();
 </script>

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

@@ -17,69 +17,47 @@
     </Dropdown>
 </template>
 
-<script>
+<script setup>
 import { computed, inject } from 'vue';
 import { InjectionTokens } from '../../../injectionTokens';
-import { tooltip } from '../../../directives';
+import { tooltip as vTooltip } from '../../../directives';
 import { Dropdown, DropdownOption } from '../../base';
 import { useRecentFonts } from './composables';
 
-export default {
-    name: 'FontFamilyControl',
+const fonts = inject(InjectionTokens.FONTS);
+const editor = inject(InjectionTokens.EDITOR);
 
-    components: {
-        Dropdown,
-        DropdownOption
-    },
+const recentFontNames = useRecentFonts({ limit: 5 });
 
-    directives: {
-        tooltip
-    },
+const recentFontsCategory = computed(() => ({
+    id: 'Recently Used',
+    options: recentFontNames.fonts.value.map((name) => ({ id: name }))
+}));
 
-    setup() {
-        const fonts = inject(InjectionTokens.FONTS);
-        const editor = inject(InjectionTokens.EDITOR);
+const options = computed(() => {
+    const list = {};
 
-        const recentFontNames = useRecentFonts({ limit: 5 });
-
-        const recentFontsCategory = computed(() => ({
-            id: 'Recently Used',
-            options: recentFontNames.fonts.value.map((name) => ({ id: name }))
-        }));
-
-        const options = computed(() => {
-            const list = {};
-
-            for (const font of fonts) {
-                list[font.category] ??= { id: font.category, options: [] };
-                list[font.category].options.push({ id: font.name });
-            }
-
-            if (recentFontNames.isEmpty.value) {
-                return Object.values(list);
-            }
+    for (const font of fonts) {
+        list[font.category] ??= { id: font.category, options: [] };
+        list[font.category].options.push({ id: font.name });
+    }
 
-            return [recentFontsCategory.value, ...Object.values(list)];
-        });
+    if (recentFontNames.isEmpty.value) {
+        return Object.values(list);
+    }
 
-        function renderOptionStyles(option) {
-            return { '--zw-font-family-option': `"${option.id}"` };
-        }
+    return [recentFontsCategory.value, ...Object.values(list)];
+});
 
-        const currentValue = editor.commands.getFont();
+function renderOptionStyles(option) {
+    return { '--zw-font-family-option': `"${option.id}"` };
+}
 
-        const apply = (fontFamily) => {
-            recentFontNames.add(fontFamily);
-            editor.chain().focus().applyFontFamily(fontFamily).run();
-        };
+const currentValue = editor.commands.getFont();
 
-        return {
-            options,
-            currentValue,
-            renderOptionStyles,
-            apply
-        };
-    }
+const apply = (fontFamily) => {
+    recentFontNames.add(fontFamily);
+    editor.chain().focus().applyFontFamily(fontFamily).run();
 };
 </script>
 

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

@@ -8,42 +8,22 @@
     />
 </template>
 
-<script>
+<script setup>
 import { computed, inject } from 'vue';
 import { Dropdown } from '../../base';
 import { InjectionTokens } from '../../../injectionTokens';
-import { tooltip } from '../../../directives';
+import { tooltip as vTooltip } from '../../../directives';
 
-export default {
-    name: 'FontSizeControl',
+const fontSizes = inject(InjectionTokens.FONT_SIZES);
+const editor = inject(InjectionTokens.EDITOR);
 
-    components: {
-        Dropdown
-    },
+const options = computed(() => {
+    return fontSizes.map((size) => ({ id: size, title: `${size}px` }));
+});
 
-    directives: {
-        tooltip
-    },
+const currentValue = editor.commands.getFontSize();
 
-    setup() {
-        const fontSizes = inject(InjectionTokens.FONT_SIZES);
-        const editor = inject(InjectionTokens.EDITOR);
-
-        const options = computed(() => {
-            return fontSizes.map((size) => ({ id: size, title: `${size}px` }));
-        });
-
-        const currentValue = editor.commands.getFontSize();
-
-        const apply = (value) => editor.chain().focus().applyFontSize(value).run();
-
-        return {
-            options,
-            currentValue,
-            apply
-        };
-    }
-};
+const apply = (value) => editor.chain().focus().applyFontSize(value).run();
 </script>
 
 <style scoped>