@onereach/ui-components 21.4.0 → 21.4.1

package/dist/esm/components/or-rich-text-editor-v3/OrRichTextEditor.vue.d.ts

@@ -56,7 +56,7 @@ declare const _default: import("vue").DefineComponent<{
     toolbarButtonRef: import("vue").Ref<any>;
     moreButtonRef: import("vue").Ref<any>;
     textareaRef: import("vue").Ref<HTMLTextAreaElement | undefined>;
-    moreRef: import("vue").Ref<any>;
+    morePopoverRef: import("vue").Ref<any>;
     menuRef: import("vue").Ref<any>;
     handleToolbarClick: (item: string, level?: number) => void;
     handleEditorClick: () => void;
@@ -75,6 +75,7 @@ declare const _default: import("vue").DefineComponent<{
     link: import("vue").Ref<string>;
     isFocused: import("vue").Ref<boolean>;
     isVisible: (value: string | Array<string>) => boolean;
+    isMobile: import("vue").ComputedRef<boolean>;
     countOfNotVisibleTools: import("vue").Ref<number>;
     notVisibleTools: import("vue").ComputedRef<Set<string>>;
     handleInput: (event: InputEvent) => void;

package/dist/esm/components/or-rich-text-editor-v3/index.js

@@ -13,7 +13,7 @@ import Underline from '@tiptap/extension-underline';
 import StarterKit from '@tiptap/starter-kit';
 import { useResizeObserver, useDebounceFn, onClickOutside } from '@vueuse/core';
 import { useFocusTrap } from '@vueuse/integrations/useFocusTrap';
-import { u as ue, c } from '../OrAutocompleteV3-961163d0.js';
+import { u as ue, n as ne, c } from '../OrAutocompleteV3-961163d0.js';
 import { TextSelection, Selection } from 'prosemirror-state';
 import { exitCode } from 'prosemirror-commands';
 import { EditorState } from '@codemirror/state';
@@ -108,6 +108,8 @@ const RichTextEditor = [
 const RichTextEditorToolbar = [
 // Layout
 'layout-row',
+// Overflow
+'overflow-x-scroll md:overflow-x-hidden', 'scrollbar-hidden',
 // Spacing
 'px-0', 'py-sm',
 // Theme
@@ -656,7 +658,7 @@ var script = defineComponent({
     const textareaRef = ref();
     const containerRef = ref();
     const moreButtonRef = ref();
-    const moreRef = ref();
+    const morePopoverRef = ref();
     const toolbarButtonRef = ref();
     const menuRef = ref();
     // isActive should be set with default values for all toolbar buttons, otherwise it will not work in vue2
@@ -686,6 +688,9 @@ var script = defineComponent({
     const link = ref('');
     const countOfNotVisibleTools = ref(0);
     const sourceValue = ref('');
+    const {
+      isMobile
+    } = ne();
     let trap = useFocusTrap(controlRef, {
       fallbackFocus: '.container',
       allowOutsideClick: true
@@ -854,9 +859,10 @@ var script = defineComponent({
       activeHeadingLevel.value = ((_c = (_b = editor.value) === null || _b === void 0 ? void 0 : _b.getAttributes('heading')) === null || _c === void 0 ? void 0 : _c.level) || 0;
     };
     const isVisible = value => {
+      if (isMobile.value) return true;
       if (c(value)) {
         const isHaveNotVisibleTools = value.some(item => notVisibleTools.value.has(item));
-        return isHaveNotVisibleTools;
+        return !isHaveNotVisibleTools;
       }
       return !notVisibleTools.value.has(value);
     };
@@ -1013,7 +1019,7 @@ var script = defineComponent({
       toolbarButtonRef,
       moreButtonRef,
       textareaRef,
-      moreRef,
+      morePopoverRef,
       menuRef,
       handleToolbarClick,
       handleEditorClick,
@@ -1030,6 +1036,7 @@ var script = defineComponent({
       link,
       isFocused,
       isVisible,
+      isMobile,
       countOfNotVisibleTools,
       notVisibleTools,
       handleInput,
@@ -1096,7 +1103,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
       return openBlock(), createElementBlock("div", {
         key: index,
         class: normalizeClass([..._ctx.toolbarGroupStyles, {
-          'hidden': _ctx.isVisible(tools)
+          'hidden': !_ctx.isVisible(tools)
         }]),
         disabled: _ctx.disabled || !_ctx.isFocused
       }, [(openBlock(true), createElementBlock(Fragment, null, renderList(tools, item => {
@@ -1135,17 +1142,18 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
           onClick: $event => _ctx.handleToolbarClick(item)
         }, null, 8 /* PROPS */, ["icon", "tooltip", "selected", "disabled", "onClick"])) : createCommentVNode("v-if", true)], 2 /* CLASS */);
       }), 128 /* KEYED_FRAGMENT */))], 10 /* CLASS, PROPS */, _hoisted_2);
-    }), 128 /* KEYED_FRAGMENT */)), _ctx.countOfNotVisibleTools > 0 ? (openBlock(), createBlock(_component_OrIconButton, {
+    }), 128 /* KEYED_FRAGMENT */)), _ctx.countOfNotVisibleTools > 0 && !_ctx.isMobile ? (openBlock(), createBlock(_component_OrIconButton, {
       key: 0,
       ref: 'moreButtonRef',
-      class: normalizeClass(['px-sm']),
+      class: normalizeClass(['mx-sm']),
       icon: {
         icon: 'more_horiz',
         variant: 'inherit'
       },
       disabled: _ctx.disabled || !_ctx.isFocused,
-      onClick: _cache[1] || (_cache[1] = $event => _ctx.moreRef && _ctx.moreRef.open())
-    }, null, 8 /* PROPS */, ["disabled"])) : createCommentVNode("v-if", true)], 10 /* CLASS, PROPS */, _hoisted_1), createElementVNode("div", _hoisted_3, [withDirectives(createElementVNode("textarea", {
+      "force-state": _ctx.morePopoverRef && _ctx.morePopoverRef.state === 'open' ? 'hover' : undefined,
+      onClick: _cache[1] || (_cache[1] = $event => _ctx.morePopoverRef && _ctx.morePopoverRef.open())
+    }, null, 8 /* PROPS */, ["disabled", "force-state"])) : createCommentVNode("v-if", true)], 10 /* CLASS, PROPS */, _hoisted_1), createElementVNode("div", _hoisted_3, [withDirectives(createElementVNode("textarea", {
       ref: 'textareaRef',
       "onUpdate:modelValue": _cache[2] || (_cache[2] = $event => _ctx.sourceValue = $event),
       activated: _ctx.disableMarkdown,
@@ -1169,7 +1177,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
     _: 1 /* STABLE */
   }, 8 /* PROPS */, ["disabled"]), [[vShow, typeof _ctx.error === 'string' && _ctx.error.length > 0]]), _ctx.moreButtonRef ? (openBlock(), createBlock(_component_OrPopover, {
     key: 2,
-    ref: 'moreRef',
+    ref: 'morePopoverRef',
     trigger: _ctx.moreButtonRef && _ctx.moreButtonRef.root,
     placement: 'top-end'
   }, {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@onereach/ui-components",
-  "version": "21.4.0",
+  "version": "21.4.1",
   "description": "Vue components library for v3",
   "license": "Apache-2.0",
   "sideEffects": false,
@@ -45,8 +45,8 @@
     "@codemirror/view": "^6",
     "@floating-ui/dom": "1.5.3",
     "@lezer/highlight": "*",
-    "@onereach/styles": "^21.4.0",
-    "@onereach/ui-components-common": "^21.4.0",
+    "@onereach/styles": "^21.4.1",
+    "@onereach/ui-components-common": "^21.4.1",
     "@splidejs/splide": "4.0.6",
     "@tiptap/core": "2.0.3",
     "@tiptap/extension-blockquote": "2.0.3",
@@ -103,5 +103,5 @@
     "access": "public"
   },
   "npmUnpacked": "4.15.2",
-  "gitHead": "6ed081f6c690d452613d05afdfb30703139644c3"
+  "gitHead": "ed1ded657f63a00f392e38abc14b3b8c92d6f048"
 }