@onereach/ui-components-vue2 18.4.0 → 18.4.2

package/dist/bundled/components/OrMenuItemV3/OrMenuItem.js

@@ -1,9 +1,10 @@
 import { defineComponent, ref, computed } from 'vue-demi';
 import { n as useIntersectionObserver } from '../../index-fe4d407a.js';
-import { MenuItem } from './styles.js';
+import { MenuItem, MenuItemIcon, MenuItemIconSelected } from './styles.js';
 import __vue_component__$1 from '../OrIconV3/OrIcon.js';
 import __vue_component__$2 from '../OrIconButtonV3/OrIconButton.js';
 import __vue_component__$3 from '../OrTooltipV3/OrTooltip.js';
+import { IconVariant } from '../OrIconV3/props.js';
 import { n as normalizeComponent } from '../../normalize-component-cf2db48b.js';
 
 var script = defineComponent({
@@ -11,7 +12,7 @@ var script = defineComponent({
   components: {
     OrIcon: __vue_component__$1,
     OrIconButton: __vue_component__$2,
-    OrToolip: __vue_component__$3
+    OrTooltip: __vue_component__$3
   },
   props: {
     icon: {
@@ -37,7 +38,7 @@ var script = defineComponent({
   },
   emits: ['click', 'focus', 'blur', 'close'],
   expose: ['root'],
-  setup() {
+  setup(props) {
     // Refs
     const root = ref();
     const content = ref();
@@ -52,8 +53,18 @@ var script = defineComponent({
     });
     // Styles
     const rootStyles = computed(() => ['or-menu-item-v3', ...MenuItem]);
-    // Toolip display logic
-    const isToolitpShown = computed(() => {
+    const iconStyles = computed(() => [...MenuItemIcon, ...(props.selected ? MenuItemIconSelected : [])]);
+    const iconProps = computed(() => {
+      return typeof props.icon === 'string' ? {
+        icon: props.icon,
+        variant: IconVariant.Inherit
+      } : {
+        variant: IconVariant.Inherit,
+        ...props.icon
+      };
+    });
+    // Tooltip display logic
+    const isTooltipShown = computed(() => {
       if (isRootVisible.value) {
         return content.value !== undefined && content.value.clientWidth < content.value.scrollWidth;
       }
@@ -64,7 +75,9 @@ var script = defineComponent({
       root,
       tooltip,
       rootStyles,
-      isToolitpShown,
+      iconStyles,
+      isTooltipShown,
+      iconProps,
       isRootVisible,
       stop
     };
@@ -83,7 +96,7 @@ var __vue_render__ = function () {
     ref: 'root',
     class: _vm.rootStyles,
     attrs: {
-      "tabindex": !_vm.disabled ? 0 : null,
+      "tabindex": !_vm.disabled ? 0 : undefined,
       "selected": _vm.selected,
       "disabled": _vm.disabled
     },
@@ -98,9 +111,9 @@ var __vue_render__ = function () {
         return _vm.$emit('blur', $event);
       }
     }
-  }, [_vm.icon ? [_c('OrIcon', _vm._b({}, 'OrIcon', typeof _vm.icon === 'string' ? {
-    icon: _vm.icon
-  } : _vm.icon, false))] : _vm._e(), _vm._v(" "), _c('div', {
+  }, [_vm.icon && _vm.iconProps.icon ? [_c('OrIcon', _vm._b({
+    class: _vm.iconStyles
+  }, 'OrIcon', _vm.iconProps, false))] : _vm._e(), _vm._v(" "), _c('div', {
     ref: "content",
     class: ['truncate', 'w-full'],
     on: {
@@ -124,7 +137,7 @@ var __vue_render__ = function () {
         return _vm.$emit('close');
       }
     }
-  })] : _vm._e(), _vm._v(" "), _vm.isToolitpShown ? _c('OrToolip', {
+  })] : _vm._e(), _vm._v(" "), _vm.isTooltipShown ? _c('OrTooltip', {
     ref: "tooltip",
     attrs: {
       "content": _vm.tooltipText,

package/dist/bundled/components/OrMenuItemV3/styles.d.ts

@@ -1 +1,3 @@
 export declare const MenuItem: string[];
+export declare const MenuItemIcon: string[];
+export declare const MenuItemIconSelected: string[];

package/dist/bundled/components/OrMenuItemV3/styles.js

@@ -1,4 +1,6 @@
 const MenuItem = [
+// Group
+'group',
 // Layout
 'layout-row',
 // Spacing
@@ -17,5 +19,11 @@ const MenuItem = [
 'hover:md:theme-foreground-default', 'dark:hover:md:theme-foreground-default-dark',
 // Theme (active)
 'active:theme-foreground-default', 'dark:active:theme-foreground-default-dark'];
+const MenuItemIcon = [
+// Iconography (hover)
+'group-hover:iconography-filled'];
+const MenuItemIconSelected = [
+// Iconography (selected)
+'selected:iconography-filled'];
 
-export { MenuItem };
+export { MenuItem, MenuItemIcon, MenuItemIconSelected };

package/dist/bundled/components/OrRichTextEditorV3/OrRichTextEditor.js

@@ -10,8 +10,8 @@ import { History } from '@tiptap/extension-history';
 import { Text } from '@tiptap/extension-text';
 import { a as useResizeObserver, o as onClickOutside } from '../../index-fe4d407a.js';
 import { u as useFocusTrap } from '../../useFocusTrap-747ad0e5.js';
-import { defineComponent, shallowRef, ref, computed, onMounted, onBeforeUnmount, watch, nextTick } from 'vue-demi';
-import { Formats } from './props.js';
+import { defineComponent, shallowRef, ref, onMounted, onBeforeUnmount, computed, watch, nextTick } from 'vue-demi';
+import { Formats, RichTextEditorIcons, RichTextEditorTooltips } from './props.js';
 import { RichTextEditor, RichTextEditorToolbar, RichTextEditorToolbarGroup, RichTextEditorControl } from './styles.js';
 import codemirrorNode from './utils/codemirror/codemirrorNode.js';
 import __vue_component__$1 from '../OrButtonV3/OrButton.js';
@@ -291,14 +291,10 @@ var script = defineComponent({
   expose: ['root', 'editor'],
   setup(props, context) {
     let editor = shallowRef();
+    const controlRef = ref();
+    const toolbarRef = ref();
     // Refs & Styles
     const root = ref();
-    const rootStyles = computed(() => ['or-rich-text-editor-v3', ...RichTextEditor]);
-    const toolbarRef = ref();
-    const toolbarStyles = computed(() => [...RichTextEditorToolbar]);
-    const toolbarGroupStyles = computed(() => [...RichTextEditorToolbarGroup]);
-    const controlRef = ref();
-    const controlStyles = computed(() => ['tiptap-editor-v3', ...RichTextEditorControl]);
     const textareaRef = ref();
     const containerRef = ref();
     const moreButtonRef = ref();
@@ -333,42 +329,9 @@ var script = defineComponent({
     const countOfNotVisibleTools = ref(0);
     const sourceValue = ref('');
     let trap = useFocusTrap(controlRef, {
-      immediate: true,
       fallbackFocus: '.container',
       allowOutsideClick: true
     });
-    const iconsEnum = ref({
-      bold: 'format_bold',
-      italic: 'format_italic',
-      underline: 'format_underlined',
-      strike: 'format_strikethrough',
-      bulletList: 'format_list_bulleted',
-      orderedList: 'format_list_numbered',
-      link: 'link',
-      highlight: 'highlight',
-      redo: 'redo',
-      undo: 'undo',
-      codeBlock: 'code_blocks',
-      blockquote: 'format_quote',
-      file: 'attach_file',
-      source: 'source_notes'
-    });
-    const iconTooltipsEnum = ref({
-      bold: 'Bold',
-      italic: 'Italic',
-      underline: 'Underline',
-      strike: 'Strike',
-      bulletList: 'Bulleted List',
-      orderedList: 'Numbered List',
-      link: 'Link',
-      highlight: 'Highlight',
-      redo: 'Redo',
-      undo: 'Undo',
-      codeBlock: 'Code Block',
-      blockquote: 'Quote',
-      file: 'File',
-      source: 'Source'
-    });
     useResizeObserver(root, useDebounceFn(entries => {
       var _a, _b;
       const entry = entries[0];
@@ -492,6 +455,12 @@ var script = defineComponent({
     const getIndexOfHeading = computed(() => {
       return props.toolbar.flat().indexOf('heading');
     });
+    const getRichTextEditorIcon = computed(() => item => {
+      return RichTextEditorIcons[item];
+    });
+    const getRichTextEditorTooltipIcon = computed(() => item => {
+      return RichTextEditorTooltips[item];
+    });
     const headingIcon = computed(() => {
       if (activeHeadingLevel.value && isActive.value.heading) {
         return `format_h${activeHeadingLevel.value}`;
@@ -662,6 +631,11 @@ var script = defineComponent({
       }
       editor === null || editor === void 0 ? void 0 : editor.setEditable(!disabled);
     });
+    // Styles
+    const rootStyles = computed(() => ['or-rich-text-editor-v3', ...RichTextEditor]);
+    const toolbarStyles = computed(() => [...RichTextEditorToolbar]);
+    const toolbarGroupStyles = computed(() => [...RichTextEditorToolbarGroup]);
+    const controlStyles = computed(() => ['tiptap-editor-v3', ...RichTextEditorControl]);
     return {
       root,
       rootStyles,
@@ -677,11 +651,11 @@ var script = defineComponent({
       textareaRef,
       moreRef,
       menuRef,
-      iconsEnum,
       handleToolbarClick,
       handleEditorClick,
       isActive,
-      iconTooltipsEnum,
+      getRichTextEditorIcon,
+      getRichTextEditorTooltipIcon,
       getIndexOfHeading,
       headingLevels,
       headingIcon,
@@ -787,11 +761,11 @@ var __vue_render__ = function () {
       }) : _vm.isVisible(item) ? _c('OrIconButton', {
         attrs: {
           "icon": {
-            icon: _vm.iconsEnum[item],
+            icon: _vm.getRichTextEditorIcon(item),
             variant: 'inherit'
           },
           "tooltip": {
-            content: _vm.iconTooltipsEnum[item],
+            content: _vm.getRichTextEditorTooltipIcon(item),
             placement: 'top'
           },
           "selected": _vm.isActive[item],
@@ -893,11 +867,11 @@ var __vue_render__ = function () {
       key: item,
       attrs: {
         "icon": {
-          icon: _vm.iconsEnum[item],
+          icon: _vm.getRichTextEditorIcon(item),
           variant: 'inherit'
         },
         "tooltip": {
-          content: _vm.iconTooltipsEnum[item],
+          content: _vm.getRichTextEditorTooltipIcon(item),
           placement: 'top'
         },
         "selected": _vm.isActive[item]

package/dist/bundled/components/OrRichTextEditorV3/index.js

@@ -1,2 +1,2 @@
 export { default as OrRichTextEditorV3 } from './OrRichTextEditor.js';
-export { Formats } from './props.js';
+export { Formats, RichTextEditorIcons, RichTextEditorTooltips } from './props.js';

package/dist/bundled/components/OrRichTextEditorV3/props.d.ts

@@ -3,3 +3,35 @@ export declare enum Formats {
     Markup = "markup"
 }
 export type Tools = string[][];
+export declare enum RichTextEditorIcons {
+    bold = "format_bold",
+    italic = "format_italic",
+    underline = "format_underlined",
+    strike = "format_strikethrough",
+    bulletList = "format_list_bulleted",
+    orderedList = "format_list_numbered",
+    link = "link",
+    highlight = "highlight",
+    redo = "redo",
+    undo = "undo",
+    codeBlock = "code_blocks",
+    blockquote = "format_quote",
+    file = "attach_file",
+    source = "source_notes"
+}
+export declare enum RichTextEditorTooltips {
+    bold = "Bold",
+    italic = "Italic",
+    underline = "Underline",
+    strike = "Strike",
+    bulletList = "Bulleted List",
+    orderedList = "Numbered List",
+    link = "Link",
+    highlight = "Highlight",
+    redo = "Redo",
+    undo = "Undo",
+    codeBlock = "Code Block",
+    blockquote = "Quote",
+    file = "File",
+    source = "Source"
+}

package/dist/bundled/components/OrRichTextEditorV3/props.js

@@ -3,5 +3,39 @@ var Formats;
   Formats["Markdown"] = "markdown";
   Formats["Markup"] = "markup";
 })(Formats || (Formats = {}));
+var RichTextEditorIcons;
+(function (RichTextEditorIcons) {
+  RichTextEditorIcons["bold"] = "format_bold";
+  RichTextEditorIcons["italic"] = "format_italic";
+  RichTextEditorIcons["underline"] = "format_underlined";
+  RichTextEditorIcons["strike"] = "format_strikethrough";
+  RichTextEditorIcons["bulletList"] = "format_list_bulleted";
+  RichTextEditorIcons["orderedList"] = "format_list_numbered";
+  RichTextEditorIcons["link"] = "link";
+  RichTextEditorIcons["highlight"] = "highlight";
+  RichTextEditorIcons["redo"] = "redo";
+  RichTextEditorIcons["undo"] = "undo";
+  RichTextEditorIcons["codeBlock"] = "code_blocks";
+  RichTextEditorIcons["blockquote"] = "format_quote";
+  RichTextEditorIcons["file"] = "attach_file";
+  RichTextEditorIcons["source"] = "source_notes";
+})(RichTextEditorIcons || (RichTextEditorIcons = {}));
+var RichTextEditorTooltips;
+(function (RichTextEditorTooltips) {
+  RichTextEditorTooltips["bold"] = "Bold";
+  RichTextEditorTooltips["italic"] = "Italic";
+  RichTextEditorTooltips["underline"] = "Underline";
+  RichTextEditorTooltips["strike"] = "Strike";
+  RichTextEditorTooltips["bulletList"] = "Bulleted List";
+  RichTextEditorTooltips["orderedList"] = "Numbered List";
+  RichTextEditorTooltips["link"] = "Link";
+  RichTextEditorTooltips["highlight"] = "Highlight";
+  RichTextEditorTooltips["redo"] = "Redo";
+  RichTextEditorTooltips["undo"] = "Undo";
+  RichTextEditorTooltips["codeBlock"] = "Code Block";
+  RichTextEditorTooltips["blockquote"] = "Quote";
+  RichTextEditorTooltips["file"] = "File";
+  RichTextEditorTooltips["source"] = "Source";
+})(RichTextEditorTooltips || (RichTextEditorTooltips = {}));
 
-export { Formats };
+export { Formats, RichTextEditorIcons, RichTextEditorTooltips };

package/dist/bundled/components/index.js

@@ -147,7 +147,7 @@ export { R as RatingVariant } from '../styles-13d49c4b.js';
 export { default as OrResizeablePanelV3 } from './OrResizeablePanelV3/OrResizeablePanel.js';
 export { ResizeablePanelPadding, ResizeablePanelPlacement } from './OrResizeablePanelV3/props.js';
 export { default as OrRichTextEditorV3 } from './OrRichTextEditorV3/OrRichTextEditor.js';
-export { Formats } from './OrRichTextEditorV3/props.js';
+export { Formats, RichTextEditorIcons, RichTextEditorTooltips } from './OrRichTextEditorV3/props.js';
 export { OrRichTooltipV3, RichTooltipBehavior } from './OrRichTooltipV3/index.js';
 export { default as OrSearch } from './OrSearch/OrSearch.js';
 export { default as OrSearchV3 } from './OrSearchV3/OrSearch.js';