goodteditor-ui 1.0.50 → 1.0.52

package/index.d.ts

@@ -0,0 +1,60 @@
+import Avatar from './src/components/ui/Avatar.vue';
+import Badge from './src/components/ui/Badge.vue';
+import Collapse from './src/components/ui/Collapse.vue';
+import ColorPicker from './src/components/ui/ColorPicker.vue';
+import Datalist from './src/components/ui/Datalist.vue';
+import DatePicker from './src/components/ui/DatePicker.vue';
+import FileSelector from './src/components/ui/FileSelector.vue';
+import Image from './src/components/ui/Image.vue';
+import InputAutocomplete from './src/components/ui/InputAutocomplete.vue';
+import InputColorPicker from './src/components/ui/InputColorPicker.vue';
+import InputDatePicker from './src/components/ui/InputDatePicker.vue';
+import InputTags from './src/components/ui/InputTags.vue';
+import InputTimePicker from './src/components/ui/InputTimePicker.vue';
+import InputUnits from './src/components/ui/InputUnits.vue';
+import Lazy from './src/components/ui/Lazy.vue';
+import Pagination from './src/components/ui/Pagination.vue';
+import Paginator from './src/components/ui/Paginator.vue';
+import Popover from './src/components/ui/Popover.vue';
+import Popup from './src/components/ui/Popup.vue';
+import ResponsiveContainer from './src/components/ui/ResponsiveContainer.vue';
+import Select from './src/components/ui/Select.vue';
+import TimePicker from './src/components/ui/TimePicker.vue';
+import Tooltip from './src/components/ui/Tooltip.vue';
+import Grid from './src/components/ui/Grid.vue';
+import { WysiwygEditor, WysiwygConsts, WysiwygRenderMixins } from './src/components/ui/WysiwygEditor';
+// utils stuff
+import FormComponent from './src/components/ui/utils/FormComponent';
+
+const Utils = { FormComponent, ...WysiwygRenderMixins };
+const Constants = { ...WysiwygConsts };
+
+export {
+    Utils,
+    Constants,
+    Avatar,
+    Badge,
+    Collapse,
+    ColorPicker,
+    Datalist,
+    DatePicker,
+    FileSelector,
+    Image,
+    InputAutocomplete,
+    InputColorPicker,
+    InputDatePicker,
+    InputTags,
+    InputTimePicker,
+    InputUnits,
+    Lazy,
+    Pagination,
+    Paginator,
+    Popover,
+    Popup,
+    ResponsiveContainer,
+    Select,
+    TimePicker,
+    Tooltip,
+    Grid,
+    WysiwygEditor
+};

package/index.js

@@ -22,12 +22,12 @@ import Select from './src/components/ui/Select.vue';
 import TimePicker from './src/components/ui/TimePicker.vue';
 import Tooltip from './src/components/ui/Tooltip.vue';
 import Grid from './src/components/ui/Grid.vue';
-import WysiwygEditor, { ToolType as WysiwygTool } from './src/components/ui/WysiwygEditor.vue';
+import { WysiwygEditor, WysiwygConsts, WysiwygRenderMixins } from './src/components/ui/WysiwygEditor';
 // utils stuff
 import FormComponent from './src/components/ui/utils/FormComponent';
 
-const Utils = { FormComponent };
-const Constants = { WysiwygTool };
+const Utils = { FormComponent, ...WysiwygRenderMixins };
+const Constants = { ...WysiwygConsts };
 
 export {
     Utils,

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "goodteditor-ui",
-    "version": "1.0.50",
+    "version": "1.0.52",
     "main": "index.js",
     "homepage": "https://goodt-ui.netlify.app/",
     "scripts": {

package/src/App.vue

@@ -12,7 +12,9 @@
 
 <script>
 import UiSelect from './components/ui/Select.vue';
-import * as Components from './../index';
+import * as Exports from './../index';
+
+const { Utils, Constants, ...Components } = Exports;
 
 export default {
     name: 'App',

package/src/components/ui/Popup.vue

@@ -6,7 +6,7 @@
         v-if="visible"
     >
         <div class="popup-dialog" v-bind="dialog">
-            <!-- 
+            <!--
             @slot Custom close slot
             @binding {Function} close    closes the popup
             -->
@@ -15,8 +15,8 @@
                     <i class="mdi mdi-close" style="font-size: 1.25rem"></i>
                 </div>
             </slot>
-            <div class="popup-dialog-body" :class="{ 'pad-none': !usePadding }">
-                <!-- 
+            <div class="popup-dialog-body" :style="dialogBody.style" :class="dialogBodyClass">
+                <!--
                 @slot Custom body slot
                 @binding {Function} close    closes the popup
                 -->
@@ -27,7 +27,7 @@
                 :class="{ 'pad-none': !usePadding }"
                 v-if="$scopedSlots.footer"
             >
-                <!-- 
+                <!--
                 @slot Custom footer slot
                 @binding {Function} close    closes the popup
                 -->
@@ -89,6 +89,16 @@ export default {
                 return { class: {}, style: {} };
             },
         },
+        /**
+         * Popup dialog body options for styling css/style
+         * { class:any style:any }
+         */
+        dialogBody: {
+            type: Object,
+            default() {
+                return { class: {}, style: {} };
+            },
+        },
         /**
          * Whether to show the close button
          */
@@ -111,6 +121,19 @@ export default {
             default: 'scroll-hide',
         },
     },
+    computed: {
+        dialogBodyClass() {
+            const { dialogBody, usePadding } = this;
+
+            if (usePadding) {
+                return dialogBody.class;
+            }
+
+            return Array.isArray(dialogBody.class)
+                ? [dialogBody.class, 'pad-none']
+                : { ...dialogBody.class, 'pad-none': true };
+        },
+    },
     watch: {
         visible: {
             handler(val) {

package/src/components/ui/Tooltip.vue

@@ -7,12 +7,12 @@
             @mouseenter.native="onPopoverMouseEnter"
             @mouseleave.native="onPopoverMouseLeave"
         >
-            <!-- 
+            <!--
             @slot Tooltip slot
             -->
             <slot name="tooltip">
                 <div class="tooltip">
-                    <!-- 
+                    <!--
                     @slot Tooltip content slot
                     -->
                     <slot></slot>
@@ -28,7 +28,7 @@
 </style>
 <script>
 import UiPopover from './Popover.vue';
-import { Position } from './utils/Helpers';
+import { Position, TriggerOn } from './utils/Helpers';
 import WithPopover from './utils/WithPopover';
 
 export default {
@@ -59,17 +59,33 @@ export default {
                 return [0, 5];
             },
         },
+        /**
+         * Conditions to trigger tooltip
+         * @default mousemove
+         * @values mousemove,click
+         */
+        triggerOn: {
+            type: String,
+            default: TriggerOn.MOUSE_MOVE
+        }
     },
     data() {
         return {
-            targetEvents: {
-                mouseenter: this.onTargetMouseEnter,
-                mouseleave: this.onTargetMouseLeave,
-            },
             timeout: null,
         };
     },
     computed: {
+        targetEvents() {
+            if (this.triggerOn === TriggerOn.MOUSE_MOVE) {
+                return {
+                    mouseenter: this.onTargetMouseEnter,
+                    mouseleave: this.onTargetMouseLeave,
+                };
+            }
+            return {
+                click: this.onTargetClick,
+            };
+        },
         targetBinds() {
             return {
                 'data-popover': this.popoverTargetId,
@@ -102,6 +118,9 @@ export default {
         onTargetMouseLeave(e) {
             this.setShow(false);
         },
+        onTargetClick(e) {
+            this.setShow(!this.popoverShow);
+        },
         onPopoverMouseEnter(e) {
             this.setShow(true);
         },

package/src/components/ui/WysiwygEditor/WysiwygEditor.md

@@ -0,0 +1,74 @@
+Simple example
+```vue
+<template>
+    <div class="pad-l5">
+        <ui-wysiwyg-editor v-model="model"></ui-wysiwyg-editor>
+    </div>
+</template>
+<script>
+import UiWysiwygEditor from './WysiwygEditor.vue';
+export default {
+    components: { UiWysiwygEditor },
+    data: () => ({
+        model: `<p>This WYSIWYG is based on 
+        <a target="_blank" rel="noopener noreferrer nofollow" href="https://tiptap.dev/" class="color-link">tiptap</a> 
+        editor framework.</p>`
+    })
+};
+</script>
+```
+
+Advanced example. Using custom tool groups, bubble menu and 'change' event instead of 'input'
+
+```vue
+<template>
+    <div class="pad-l5">
+        <ui-wysiwyg-editor
+            v-bind="{
+                value: model,
+                tools,
+                focusVisible: false,
+                bubbleMenu: { isEnabled: true}
+            }"
+            @change="onChange"></ui-wysiwyg-editor>
+    </div>
+</template>
+<script>
+import UiWysiwygEditor from './WysiwygEditor.vue';
+import { createTool, ToolType } from './constants';
+
+export default {
+    components: { UiWysiwygEditor },
+    data: () => ({
+        model: `<p><strong>select text</strong> to see a formatting menu pop up</p>`,
+        tools: [
+            {
+                title: '',
+                group: [
+                    ToolType.UNDO,
+                    ToolType.REDO,
+                    ToolType.PARAGRAPH_STYLE,
+                    ToolType.TEXT_COLOR,
+                    createTool({
+                        name: ToolType.HORIZONTAL_RULE,
+                        icon: 'minus',
+                        title: 'Вертикальный разделитель',
+                        exec() {
+                            this.editor.chain().focus().setHorizontalRule().run();
+                        },
+                        isEnabled() {
+                            return this.editor.can().setHorizontalRule();
+                        }
+                    })
+                ]
+            }
+        ]
+    }),
+    methods: {
+        onChange(value) {
+            this.model = value;
+        }
+    }
+};
+</script>
+```

package/src/components/ui/{WysiwygEditor.vue → WysiwygEditor/WysiwygEditor.vue}

@@ -17,7 +17,7 @@
                             :key="groupIndex"
                             class="col col-vmid col-auto">
                             <div class="d-flex flex-col flex-v-center">
-                                <div class="group-header">
+                                <div v-if="resolveGroupTitle(title, groupIndex) !== ''" class="group-header">
                                     <!--
                                     @slot Group header slot
                                     @binding {number} groupIndex                index of the tools group
@@ -60,19 +60,17 @@
 <script>
 import { Editor, EditorContent } from '@tiptap/vue-2';
 
-import { debounce } from './utils/Helpers';
-import Grid from './Grid.vue';
-import { resolveExtensions } from './WysiwygEditor/extensions';
-import { buildToolGroups, bindContext } from './WysiwygEditor/utils';
-import { DefaultTools } from './WysiwygEditor/constants';
-
-export { ToolType } from './WysiwygEditor/constants';
+import { debounce } from '../utils/Helpers';
+import Grid from '../Grid.vue';
+import { resolveExtensions } from './extensions';
+import { buildToolGroups, bindContext } from './utils';
+import { DefaultTools } from './constants';
 
 /**
  * @typedef {Omit<import('@tiptap/extension-bubble-menu').BubbleMenuOptions, 'element'>} BubbleMenuOptions
  * @property {boolean} isEnabled
  * @typedef {import('vue').PropOptions.<BubbleMenuOptions>} BubbleMenuOptionsProp
- * @typedef {import('./WysiwygEditor/WysiwygEditor').ToolDef} Tool
+ * @typedef {import('./constants').ITool} ITool
  */
 
 export default {
@@ -89,11 +87,11 @@ export default {
             default: '',
         },
         /**
-         * array of using tools: { title: string, group: string[] }
+         * array of using tools: { title: string, group: Array<string|ITool> }
          */
         tools: {
             type: Array,
-            default: () => [],
+            default: () => DefaultTools,
             validator: (tools) => tools.every((tool) => typeof tool === 'object' && Array.isArray(tool) === false)
         },
         /**
@@ -136,11 +134,10 @@ export default {
             return this.editor?.getHTML() ?? '';
         },
         /**
-         * @return {{title: string, group: Tool[]}[]}
+         * @return {{title: string, group: ITool[]}[]}
          */
         toolGroups() {
-            const tools = this.tools.length === 0 ? DefaultTools : this.tools;
-            return buildToolGroups(tools);
+            return buildToolGroups(this.tools);
         },
         editorClass() {
             const classes = ['pad-3', 'scroll-y'];
@@ -231,8 +228,8 @@ export default {
             this.caretPosition = transaction.curSelection.to;
         },
         /**
-         * @param {Tool} tool
-         * @return Tool
+         * @param {ITool} tool
+         * @return {ITool}
          */
         buildToolBinds(tool) {
             const { editor, toolGroups } = this;

package/src/components/ui/WysiwygEditor/{WysiwygEditor.d.ts → constants.d.ts}

@@ -20,15 +20,15 @@ export type Render = Readonly<{
     IMAGE: Image;
 }>;
 
-export type CommandDef = {
+export interface ICommand {
     name: String;
     title: String;
     exec: () => void;
     isActive: () => Boolean;
     isEnabled: () => Boolean;
-};
+}
 
-export type ToolDef = {
+export interface ITool {
     name: String;
     render: Render;
     title: String;
@@ -37,9 +37,9 @@ export type ToolDef = {
     isActive: () => Boolean;
     isEnabled: () => Boolean;
     getValue?: () => String | Record<String, any>;
-    options?: Array<String | ToolDef | CommandDef>;
+    options?: Array<String | ITool | ICommand>;
     units?: Array<String>
-};
+}
 
 export type NodeType = Readonly<{
     BLOCKQUOTE: 'blockquote',
@@ -126,3 +126,12 @@ export type ToolType = Readonly<{
     TOGGLE_ZEBRA: 'toggleZebra',
     INSERT_IMAGE: 'insertImage'
 }>;
+
+export type DefaultTools = Array<{
+   title: string,
+   group: Array<string|ITool>
+}>;
+
+export function createTool(toolOptions: Partial<ITool>): ITool;
+
+export function createCommand(commandOptions: Partial<ICommand>): ICommand;

package/src/components/ui/WysiwygEditor/constants.js

@@ -10,13 +10,13 @@ import {
 } from './renders';
 
 /**
- * @typedef {import('./WysiwygEditor').NodeType} NodeType
- * @typedef {import('./WysiwygEditor').MarkType} MarkType
- * @typedef {import('./WysiwygEditor').CommandType} CommandType
- * @typedef {import('./WysiwygEditor').ToolType} ToolType
- * @typedef {import('./WysiwygEditor').Render} Render
- * @typedef {import('./WysiwygEditor').CommandDef} Command
- * @typedef {import('./WysiwygEditor').ToolDef} Tool
+ * @typedef {import('./constants').NodeType} NodeType
+ * @typedef {import('./constants').MarkType} MarkType
+ * @typedef {import('./constants').CommandType} CommandType
+ * @typedef {import('./constants').ToolType} ToolType
+ * @typedef {import('./constants').Render} Render
+ * @typedef {import('./constants').ICommand} ICommand
+ * @typedef {import('./constants').ITool} ITool
  */
 
 /**
@@ -129,16 +129,16 @@ export const ToolType = Object.freeze({
 });
 
 /**
- * @param {Command} command
- * @return Command
+ * @param {Partial<ICommand>} command
+ * @return {ICommand}
  */
 export const createCommand = ({
-                            name,
-                            title = 'Unknown command',
-                            exec = () => {},
-                            isActive = () => false,
-                            isEnabled = () => true
-                        }) => ({
+    name = '',
+    title = 'Unknown command',
+    exec = () => {},
+    isActive = () => false,
+    isEnabled = () => true
+}) => ({
     name,
     title,
     exec,
@@ -161,97 +161,27 @@ export const Render = Object.freeze({
 });
 
 /**
- * @param {Tool} tool
- * @return Tool
+ * @param {Partial<ITool>} tool
+ * @return {ITool}
  */
-export const createBaseTool = ({
-                        name,
-                        render = Render.BUTTON,
-                        title = 'Unknown tool',
-                        icon = 'help-circle-outline',
-                        exec = () => {},
-                        isActive = () => false,
-                        isEnabled = () => true
-                    }) => ({
+export const createTool = ({
+    name = '',
+    render = Render.BUTTON,
+    title = 'Unknown tool',
+    icon = 'help-circle-outline',
+    exec = () => {},
+    isActive = () => false,
+    isEnabled = () => true,
+    ...optionalRest
+}) => ({
     name,
     render,
     title,
     icon,
     exec,
     isActive,
-    isEnabled
-});
-
-/**
- * @param {Tool} toolOptions
- * @return Tool
- */
-export const createButtonTool = (toolOptions) => createBaseTool(toolOptions);
-
-/**
- * @param {Tool} tool
- * @return Tool
- */
-export const createSelectTool = ({ getValue = () => null, options = [], ...toolOptions }) => ({
-    ...createBaseTool({ render: Render.SELECT, ...toolOptions }),
-    getValue,
-    options
-});
-
-/**
- * @param {Tool} tool
- * @return Tool
- */
-export const createColorPickerTool = ({ getValue = () => null, ...toolOptions }) => ({
-    ...createBaseTool({ render: Render.COLOR_PICKER, ...toolOptions }),
-    getValue
-});
-
-/**
- * @param {Tool} tool
- * @return Tool
- */
-export const createInputUnitsTool = ({ getValue = () => null, units = [], ...toolOptions }) => ({
-    ...createBaseTool({ render: Render.INPUT_UNITS, ...toolOptions }),
-    getValue,
-    units
-});
-
-/**
- * @param {Tool} tool
- * @return Tool
- */
-export const createToolbarPopoverTool = ({ options = [], ...toolOptions }) => ({
-    ...createBaseTool({ render: Render.TOOLBAR_POPOVER, ...toolOptions }),
-    options
-});
-
-/**
- * @param {Tool} tool
- * @return Tool
- */
-export const createInputAutoTool = ({ getValue = () => null, options = [], ...toolOptions }) => ({
-    ...createBaseTool({ render: Render.INPUT_AUTO, ...toolOptions }),
-    getValue,
-    options
-});
-
-/**
- * @param {Tool} tool
- * @return Tool
- */
-export const createImageTool = ({ getValue = () => null, ...toolOptions }) => ({
-    ...createBaseTool({ render: Render.IMAGE, ...toolOptions }),
-    getValue
-});
-
-/**
- * @param {Tool} tool
- * @return Tool
- */
-export const createLinkTool = ({ getValue = () => null, ...toolOptions }) => ({
-    ...createBaseTool({ render: Render.LINK, ...toolOptions }),
-    getValue
+    isEnabled,
+    ...optionalRest
 });
 
 export const DefaultTools = [

package/src/components/ui/WysiwygEditor/index.d.ts

@@ -1,4 +1,3 @@
-export { default as WysiwygEditor } from '../WysiwygEditor.vue';
-export * from './constants'
-export * from './utils'
-export * from './tools-and-commands';
+export { default as WysiwygEditor } from './WysiwygEditor.vue';
+export * as WysiwygConsts from './constants';
+export * as WysiwygRenderMixins from './renders/mixins';

package/src/components/ui/WysiwygEditor/index.js

@@ -1,4 +1,3 @@
-export { default as WysiwygEditor } from '../WysiwygEditor.vue';
-export * from './constants'
-export * from './utils'
-export * from './tools-and-commands';
+export { default as WysiwygEditor } from './WysiwygEditor.vue';
+export * as WysiwygConsts from './constants';
+export * as WysiwygRenderMixins from './renders/mixins';

package/src/components/ui/WysiwygEditor/renders/Button.vue

@@ -1,9 +1,9 @@
 <template>
     <div :title="title">
         <button
-            :class="{ 'btn-outline': !isActive, 'btn-primary': isActive }"
+            :class="{ 'btn-outline': !isActive }"
             :disabled="!isEnabled"
-            class="btn btn-small btn-icon"
+            class="btn btn-small btn-icon btn-primary"
             @click.stop="onClick">
             <div class="icon">
                 <i :class="icon" class="mdi"></i>
@@ -14,11 +14,12 @@
 </template>
 
 <script>
-import { useRender } from './mixins';
+import { useRender, RenderMixinTypes } from './mixins';
 
 export default {
     mixins: [useRender()],
     methods: {
+        ...RenderMixinTypes,
         onClick() {
             this.tool.exec();
             this.emitExecuted();

package/src/components/ui/WysiwygEditor/renders/ColorPicker.vue

@@ -1,8 +1,8 @@
 <template>
     <div :data-popover="popoverTargetId" :title="title">
         <button
-            :class="{ 'btn-outline': !popoverShow, 'btn-primary': popoverShow }"
-            class="btn btn-small btn-icon"
+            :class="{ 'btn-outline': !popoverShow }"
+            class="btn btn-small btn-icon btn-primary"
             @click="togglePopover">
             <div class="icon">
                 <i class="mdi" :class="icon"></i>
@@ -18,7 +18,7 @@
 import ColorPicker from '../../ColorPicker.vue';
 import Popover from '../../Popover.vue';
 import WithPopover from '../../utils/WithPopover';
-import { useRender } from './mixins';
+import { useRender, RenderMixinTypes } from './mixins';
 
 export default {
     components: { ColorPicker, Popover },
@@ -29,6 +29,7 @@ export default {
         }
     },
     methods: {
+        ...RenderMixinTypes,
         onSubmit({ rgba }) {
             const { r: red, g: green, b: blue, a: alpha } = rgba;
             const color = `rgba(${red}, ${green}, ${blue}, ${alpha})`;