@onereach/ui-components 2.70.0-beta.2164.0 → 2.70.0-beta.2167.0

package/dist/esm/v2/{OrRichTextEditor-ed356c5b.js → OrRichTextEditor-3a2ba021.js}

@@ -1,6 +1,6 @@
 import { defineComponent, ref, onMounted, onBeforeUnmount, computed, watch } from 'vue-demi';
 import { u as useClassAttribute } from './useClassAttribute-47fdb016.js';
-import '@vueuse/core';
+import { onClickOutside } from '@vueuse/core';
 import { defaultMarkdownSerializer, MarkdownSerializer } from 'prosemirror-markdown';
 import { DOMParser as DOMParser$1 } from 'prosemirror-model';
 import { marked } from 'marked';
@@ -127,7 +127,10 @@ const Toolbar = [
 'last-of-type:border-none'];
 const ToolbarButton = [
 // Typography
-'text-on-disabled', 'dark:text-outline-dark'];
+'text-on-disabled', 'dark:text-on-disabled-dark'];
+const ToolbarButtonFocused = [
+// Typography
+'text-outline', 'dark:text-outline-dark'];
 const ToolbarButtonActive = [
 // Typography
 'text-on-background', 'dark:text-on-background-dark'];
@@ -228,6 +231,7 @@ var script = defineComponent({
     const toolbarButtonRef = ref();
     const menuRef = ref();
     const isActive = ref({});
+    const isFocused = ref(props.autofocus);
     const headingLevels = [1, 2, 3, 4];
     const previousHeadingLevel = ref();
     const activeHeadingLevel = ref(0);
@@ -270,6 +274,7 @@ var script = defineComponent({
         onUpdate: ({
           editor
         }) => {
+          isFocused.value = true;
           setActiveFormats();
           const html = editor.getHTML();
           const text = editor.getText();
@@ -331,7 +336,10 @@ var script = defineComponent({
     onBeforeUnmount(() => {
       editor === null || editor === void 0 ? void 0 : editor.destroy();
     });
-    // trap.activate();
+    onClickOutside(root, () => {
+      isFocused.value = false;
+      // trap.deactivate();
+    });
     // Computed
     const proxyModelValue = computed({
       get: () => {
@@ -356,6 +364,7 @@ var script = defineComponent({
     //Methods
     const handleEditorClick = () => {
       setActiveFormats();
+      isFocused.value = true;
       editor === null || editor === void 0 ? void 0 : editor.commands.focus();
     };
     const handleToolbarClick = (item, level) => {
@@ -428,7 +437,7 @@ var script = defineComponent({
       return [...ToolbarContainer];
     });
     const toolbarStyles = computed(() => {
-      return [...Toolbar];
+      return [...Toolbar, ...(isFocused.value ? ToolbarButtonFocused : ToolbarButton)];
     });
     const editorInputStyles = computed(() => {
       return ['tiptap-editor', ...(props.fullHeight ? ['h-full'] : []), ...EditorInput];
@@ -438,7 +447,7 @@ var script = defineComponent({
       // Layout
       'flex',
       // Spacing
-      'gap-md', ...(isActive.value[item] ? ToolbarButtonActive : ToolbarButton)];
+      'gap-md', ...(isActive.value[item] ? ToolbarButtonActive : [])];
     };
     //Effects
     watch(proxyModelValue, value => {
@@ -574,7 +583,7 @@ var __vue_staticRenderFns__ = [];
 /* style */
 const __vue_inject_styles__ = function (inject) {
   if (!inject) return;
-  inject("data-v-107095c6_0", {
+  inject("data-v-98327460_0", {
     source: ".tiptap-editor ol{margin:0 24px;list-style:decimal}.tiptap-editor ul{margin:0 24px;list-style:initial}.tiptap-editor pre{background-color:rgba(186,209,236,.3);padding:4px 8px;margin:4px 0;width:100%;border-radius:4px}.tiptap-editor blockquote{margin:8px 24px;padding:0 24px;border-left:4px solid #bad1ec}.tiptap-editor .is-editor-empty::before{content:attr(data-placeholder);height:0;pointer-events:none;float:left}.tiptap-editor .cm-editor{border:none;border-radius:4px}.tiptap-editor .cm-editor .cm-scroller{border-radius:4px}.tiptap-editor .cm-editor.cm-focused{outline:0}.tiptap-editor .cm-editor .cm-gutters{background-color:rgba(0,95,177,.08);border:none}.tiptap-editor .cm-editor .cm-gutters .cm-gutterElement{padding:0 10px}.tiptap-editor .cm-editor .cm-gutters .cm-gutterElement.cm-activeLineGutter{background-color:rgba(0,95,177,.07)}",
     map: undefined,
     media: undefined

package/dist/esm/v2/components/index.js

@@ -96,7 +96,7 @@ export { p as PropsV3, a as useQueueV3, u as useToastV3 } from '../useToast-0665
 export { _ as OrTooltip } from '../OrTooltip-614b016d.js';
 export { _ as OrTooltipContent } from '../OrTooltip.vue_rollup-plugin-vue_script-63559536.js';
 export { _ as OrTooltipV3 } from '../OrTooltip-513bee30.js';
-export { _ as OrRichTextEditorV3 } from '../OrRichTextEditor-ed356c5b.js';
+export { _ as OrRichTextEditorV3 } from '../OrRichTextEditor-3a2ba021.js';
 import 'vue-demi';
 import 'lodash';
 import '../normalize-component-6e8e3d80.js';

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

@@ -1,4 +1,4 @@
-export { _ as OrRichTextEditorV3 } from '../../OrRichTextEditor-ed356c5b.js';
+export { _ as OrRichTextEditorV3 } from '../../OrRichTextEditor-3a2ba021.js';
 import 'vue-demi';
 import '../../useClassAttribute-47fdb016.js';
 import '@vueuse/core';

package/dist/esm/v2/components/or-rich-text-editor-v3/styles.d.ts

@@ -2,5 +2,6 @@ export declare const EditorContainer: string[];
 export declare const ToolbarContainer: string[];
 export declare const Toolbar: string[];
 export declare const ToolbarButton: string[];
+export declare const ToolbarButtonFocused: string[];
 export declare const ToolbarButtonActive: string[];
 export declare const EditorInput: string[];

package/dist/esm/v2/index.js

@@ -96,7 +96,7 @@ export { p as PropsV3, a as useQueueV3, u as useToastV3 } from './useToast-06654
 export { _ as OrTooltip } from './OrTooltip-614b016d.js';
 export { _ as OrTooltipContent } from './OrTooltip.vue_rollup-plugin-vue_script-63559536.js';
 export { _ as OrTooltipV3 } from './OrTooltip-513bee30.js';
-export { _ as OrRichTextEditorV3 } from './OrRichTextEditor-ed356c5b.js';
+export { _ as OrRichTextEditorV3 } from './OrRichTextEditor-3a2ba021.js';
 export { D as DropdownClose, a as DropdownOpen } from './dropdown-open-0d314aa4.js';
 export { u as useClassAttribute } from './useClassAttribute-47fdb016.js';
 export { u as useElevation } from './useElevation-31bfe1f6.js';

package/dist/esm/v3/{OrRichTextEditor-f710fc9d.js → OrRichTextEditor-91a94381.js}

@@ -1,6 +1,6 @@
 import { defineComponent, ref, onMounted, onBeforeUnmount, computed, watch } from 'vue-demi';
 import { u as useClassAttribute } from './useClassAttribute-47fdb016.js';
-import '@vueuse/core';
+import { onClickOutside } from '@vueuse/core';
 import { defaultMarkdownSerializer, MarkdownSerializer } from 'prosemirror-markdown';
 import { DOMParser as DOMParser$1 } from 'prosemirror-model';
 import { marked } from 'marked';
@@ -127,7 +127,10 @@ const Toolbar = [
 'last-of-type:border-none'];
 const ToolbarButton = [
 // Typography
-'text-on-disabled', 'dark:text-outline-dark'];
+'text-on-disabled', 'dark:text-on-disabled-dark'];
+const ToolbarButtonFocused = [
+// Typography
+'text-outline', 'dark:text-outline-dark'];
 const ToolbarButtonActive = [
 // Typography
 'text-on-background', 'dark:text-on-background-dark'];
@@ -228,6 +231,7 @@ var script = defineComponent({
     const toolbarButtonRef = ref();
     const menuRef = ref();
     const isActive = ref({});
+    const isFocused = ref(props.autofocus);
     const headingLevels = [1, 2, 3, 4];
     const previousHeadingLevel = ref();
     const activeHeadingLevel = ref(0);
@@ -270,6 +274,7 @@ var script = defineComponent({
         onUpdate: ({
           editor
         }) => {
+          isFocused.value = true;
           setActiveFormats();
           const html = editor.getHTML();
           const text = editor.getText();
@@ -331,7 +336,10 @@ var script = defineComponent({
     onBeforeUnmount(() => {
       editor === null || editor === void 0 ? void 0 : editor.destroy();
     });
-    // trap.activate();
+    onClickOutside(root, () => {
+      isFocused.value = false;
+      // trap.deactivate();
+    });
     // Computed
     const proxyModelValue = computed({
       get: () => {
@@ -356,6 +364,7 @@ var script = defineComponent({
     //Methods
     const handleEditorClick = () => {
       setActiveFormats();
+      isFocused.value = true;
       editor === null || editor === void 0 ? void 0 : editor.commands.focus();
     };
     const handleToolbarClick = (item, level) => {
@@ -428,7 +437,7 @@ var script = defineComponent({
       return [...ToolbarContainer];
     });
     const toolbarStyles = computed(() => {
-      return [...Toolbar];
+      return [...Toolbar, ...(isFocused.value ? ToolbarButtonFocused : ToolbarButton)];
     });
     const editorInputStyles = computed(() => {
       return ['tiptap-editor', ...(props.fullHeight ? ['h-full'] : []), ...EditorInput];
@@ -438,7 +447,7 @@ var script = defineComponent({
       // Layout
       'flex',
       // Spacing
-      'gap-md', ...(isActive.value[item] ? ToolbarButtonActive : ToolbarButton)];
+      'gap-md', ...(isActive.value[item] ? ToolbarButtonActive : [])];
     };
     //Effects
     watch(proxyModelValue, value => {

package/dist/esm/v3/components/index.js

@@ -90,7 +90,7 @@ export { a as OrToastContainerV3, s as OrToastV3, t as TypesV3 } from '../types-
 export { p as PropsV3, a as useQueueV3, u as useToastV3 } from '../useToast-0665462d.js';
 export { s as OrTooltip, a as OrTooltipContent } from '../OrTooltip-78cd7f6b.js';
 export { s as OrTooltipV3 } from '../OrTooltip-50d27b4f.js';
-export { s as OrRichTextEditorV3 } from '../OrRichTextEditor-f710fc9d.js';
+export { s as OrRichTextEditorV3 } from '../OrRichTextEditor-91a94381.js';
 import 'vue-demi';
 import 'lodash';
 import 'vue';

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

@@ -1,4 +1,4 @@
-export { s as OrRichTextEditorV3 } from '../../OrRichTextEditor-f710fc9d.js';
+export { s as OrRichTextEditorV3 } from '../../OrRichTextEditor-91a94381.js';
 import 'vue-demi';
 import '../../useClassAttribute-47fdb016.js';
 import '@vueuse/core';

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

@@ -2,5 +2,6 @@ export declare const EditorContainer: string[];
 export declare const ToolbarContainer: string[];
 export declare const Toolbar: string[];
 export declare const ToolbarButton: string[];
+export declare const ToolbarButtonFocused: string[];
 export declare const ToolbarButtonActive: string[];
 export declare const EditorInput: string[];

package/dist/esm/v3/index.js

@@ -90,7 +90,7 @@ export { a as OrToastContainerV3, s as OrToastV3, t as TypesV3 } from './types-8
 export { p as PropsV3, a as useQueueV3, u as useToastV3 } from './useToast-0665462d.js';
 export { s as OrTooltip, a as OrTooltipContent } from './OrTooltip-78cd7f6b.js';
 export { s as OrTooltipV3 } from './OrTooltip-50d27b4f.js';
-export { s as OrRichTextEditorV3 } from './OrRichTextEditor-f710fc9d.js';
+export { s as OrRichTextEditorV3 } from './OrRichTextEditor-91a94381.js';
 export { D as DropdownClose, a as DropdownOpen } from './dropdown-open-0d314aa4.js';
 export { u as useClassAttribute } from './useClassAttribute-47fdb016.js';
 export { u as useElevation } from './useElevation-31bfe1f6.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@onereach/ui-components",
-  "version": "2.70.0-beta.2164.0",
+  "version": "2.70.0-beta.2167.0",
   "description": "Vue components library for v2/3",
   "sideEffects": false,
   "main": "./dist/auto/index.js",

package/src/components/or-rich-text-editor-v3/OrRichTextEditor.vue

@@ -69,7 +69,8 @@
 <script lang="ts">
 import { defineComponent, ref, computed, onBeforeUnmount, onMounted, watch } from 'vue-demi';
 import { useClassAttribute } from '../../hooks';
-// // import { useFocusTrap, UseFocusTrapReturn } from '@vueuse/integrations/useFocusTrap';
+// import { useFocusTrap, UseFocusTrapReturn } from '@vueuse/integrations/useFocusTrap';
+import { onClickOutside } from '@vueuse/core';
 import { serialize, deserialize } from './utils/markdown';
 
 import { OrIconButtonV3 as OrIconButton } from '../or-icon-button-v3';
@@ -82,6 +83,7 @@ import {
   ToolbarContainer,
   Toolbar,
   ToolbarButtonActive,
+  ToolbarButtonFocused,
   ToolbarButton,
   EditorInput,
 } from './styles';
@@ -162,6 +164,7 @@ export default defineComponent({
     const toolbarButtonRef = ref<InstanceType<typeof OrIconButton>>();
     const menuRef = ref<InstanceType<typeof OrMenu>>();
     const isActive = ref<{[key: string]: boolean;}>({});
+    const isFocused = ref< boolean>(props.autofocus);
     const headingLevels = [1, 2, 3, 4] as Level[];
     const previousHeadingLevel = ref<Level>();
     const activeHeadingLevel = ref<number>(0);
@@ -203,6 +206,7 @@ export default defineComponent({
     onMounted(() => {
       editor = new Editor({
         onUpdate: ({ editor }) => {
+          isFocused.value = true;
           setActiveFormats();
           const html = editor.getHTML();
           const text = editor.getText();
@@ -272,7 +276,10 @@ export default defineComponent({
       editor?.destroy();
     });
 
-    // trap.activate();
+    onClickOutside(root, () => {
+      isFocused.value = false;
+      // trap.deactivate();
+    });
 
     // Computed
     const proxyModelValue = computed({
@@ -300,6 +307,7 @@ export default defineComponent({
     //Methods
     const handleEditorClick = () => {
       setActiveFormats();
+      isFocused.value = true;
       editor?.commands.focus();
     };
 
@@ -396,6 +404,7 @@ export default defineComponent({
     const toolbarStyles = computed(() => {
       return [
         ...Toolbar,
+        ...isFocused.value ? ToolbarButtonFocused : ToolbarButton,
       ];
     });
 
@@ -413,7 +422,7 @@ export default defineComponent({
         'flex',
         // Spacing
         'gap-md',
-        ...isActive.value[item] ? ToolbarButtonActive : ToolbarButton,
+        ...isActive.value[item] ? ToolbarButtonActive : [],
       ];
     };
 

package/src/components/or-rich-text-editor-v3/styles.ts

@@ -45,6 +45,12 @@ export const Toolbar: string[] = [
 export const ToolbarButton: string[] = [
   // Typography
   'text-on-disabled',
+  'dark:text-on-disabled-dark',
+];
+
+export const ToolbarButtonFocused: string[] = [
+  // Typography
+  'text-outline',
   'dark:text-outline-dark',
 ];