@onereach/ui-components 2.63.0-beta.1896.0 → 2.63.0-beta.1907.0

package/dist/v2/{OrSelect-bb223cce.js → OrSelect-f416b7aa.js}

@@ -1,4 +1,5 @@
-import { isVue3, defineComponent, getCurrentInstance, ref, computed, onMounted, watch } from 'vue-demi';
+import { defineComponent, getCurrentInstance, ref, computed, onMounted, watch } from 'vue-demi';
+import { D as DropdownClose, a as DropdownOpen } from './dropdown-open-0d314aa4.js';
 import { u as useClassAttribute } from './useClassAttribute-47fdb016.js';
 import { u as useOverflow } from './useOverflow-ac506c65.js';
 import '@vueuse/core';
@@ -15,31 +16,6 @@ import { _ as __vue_component__$a } from './OrPopover-9080fc00.js';
 import { _ as __vue_component__$b } from './OrTag-ab03c4f7.js';
 import { n as normalizeComponent } from './normalize-component-6e8e3d80.js';
 
-const created$1 = (element, binding) => {
-  element.addEventListener('keydown', event => {
-    event.preventDefault();
-    if (['Escape'].includes(event.key)) {
-      binding.value(event);
-    }
-  });
-};
-const DropdownClose = {
-  [isVue3 ? 'created' : 'bind']: created$1
-};
-
-const created = (element, binding) => {
-  element.addEventListener('keydown', event => {
-    event.preventDefault();
-    if (['Enter', ' '].includes(event.key)) {
-      binding.value(event);
-    }
-  });
-  element.addEventListener('click', binding.value);
-};
-const DropdownOpen = {
-  [isVue3 ? 'created' : 'bind']: created
-};
-
 const SelectRoot = [
 // Layout
 'flex', 'flex-col',
@@ -247,11 +223,15 @@ var script = defineComponent({
       };
     });
     // Methods
-    function open() {
+    function toggle() {
       if (!readonly.value && !props.disabled) {
         const popoverInstance = popover.value;
         if (popoverInstance) {
-          popoverInstance.open();
+          if (popoverState.value === 'open') {
+            popoverInstance.close();
+          } else {
+            popoverInstance.open();
+          }
         }
       }
     }
@@ -293,7 +273,7 @@ var script = defineComponent({
       internalSearchOptions,
       resolvedSearchOptions,
       groupedOptions,
-      open,
+      toggle,
       close,
       deselect,
       innerItems,
@@ -331,8 +311,8 @@ var __vue_render__ = function () {
     directives: [{
       name: "dropdown-open",
       rawName: "v-dropdown-open",
-      value: _vm.open,
-      expression: "open"
+      value: _vm.toggle,
+      expression: "toggle"
     }, {
       name: "dropdown-close",
       rawName: "v-dropdown-close",

package/dist/v2/components/or-select-v3/OrSelect.vue.d.ts

@@ -34,7 +34,7 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
     }[]>;
     resolvedSearchOptions: import("@vue/composition-api").ComputedRef<SelectOption[]>;
     groupedOptions: import("@vue/composition-api").ComputedRef<Record<string, SelectOption[]>>;
-    open: () => void;
+    toggle: () => void;
     close: () => void;
     deselect: (option: SelectOption) => void;
     innerItems: import("@vue/composition-api").Ref<HTMLElement[]>;
@@ -221,7 +221,7 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
     }[]>;
     resolvedSearchOptions: import("@vue/composition-api").ComputedRef<SelectOption[]>;
     groupedOptions: import("@vue/composition-api").ComputedRef<Record<string, SelectOption[]>>;
-    open: () => void;
+    toggle: () => void;
     close: () => void;
     deselect: (option: SelectOption) => void;
     innerItems: import("@vue/composition-api").Ref<HTMLElement[]>;

package/dist/v2/directives/index.d.ts

@@ -0,0 +1,2 @@
+export * from './dropdown-close';
+export * from './dropdown-open';

package/dist/v2/dropdown-open-0d314aa4.js

@@ -0,0 +1,28 @@
+import { isVue3 } from 'vue-demi';
+
+const created$1 = (element, binding) => {
+  element.addEventListener('keydown', event => {
+    event.preventDefault();
+    if (['Escape'].includes(event.key)) {
+      binding.value(event);
+    }
+  });
+};
+const DropdownClose = {
+  [isVue3 ? 'created' : 'bind']: created$1
+};
+
+const created = (element, binding) => {
+  element.addEventListener('keydown', event => {
+    event.preventDefault();
+    if (['Enter', ' '].includes(event.key)) {
+      binding.value(event);
+    }
+  });
+  element.addEventListener('click', binding.value);
+};
+const DropdownOpen = {
+  [isVue3 ? 'created' : 'bind']: created
+};
+
+export { DropdownClose as D, DropdownOpen as a };

package/dist/v2/index.d.ts

@@ -1,3 +1,4 @@
 export * from './components';
+export * from './directives';
 export * from './hooks';
 export * from './utils/functions/text';

package/dist/v2/index.js

@@ -64,7 +64,7 @@ export { _ as OrRadioGroup } from './OrRadioGroup-11424644.js';
 export { _ as OrRadioV3 } from './OrRadio-4ba56887.js';
 export { _ as OrSearchV3 } from './OrSearch-a247f072.js';
 export { _ as OrSelect } from './OrSelect-ea27a70e.js';
-export { _ as OrSelectV3 } from './OrSelect-bb223cce.js';
+export { _ as OrSelectV3 } from './OrSelect-f416b7aa.js';
 export { _ as OrSidebar, O as OrSidebarSide } from './OrSidebar-feacf13a.js';
 export { O as OrSidebarPlacement, _ as OrSidebarV3 } from './OrSidebar-fabc7bc9.js';
 export { _ as OrSkeletonCircle, a as OrSkeletonRect, b as OrSkeletonText, O as OrSkeletonTextSizes } from './OrSkeletonText-38aef640.js';
@@ -92,6 +92,7 @@ export { p as PropsV3, a as useQueueV3, u as useToastV3 } from './useToast-06654
 export { _ as OrTooltip } from './OrTooltip-b31bd78d.js';
 export { _ as OrTooltipContent } from './OrTooltip.vue_rollup-plugin-vue_styles.0-54c17910.js';
 export { _ as OrTooltipV3 } from './OrTooltip-caeac590.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-0e973238.js';
 export { u as useOverflow } from './useOverflow-ac506c65.js';

package/dist/v2/index2.js

@@ -64,7 +64,7 @@ export { _ as OrRadioGroup } from './OrRadioGroup-11424644.js';
 export { _ as OrRadioV3 } from './OrRadio-4ba56887.js';
 export { _ as OrSearchV3 } from './OrSearch-a247f072.js';
 export { _ as OrSelect } from './OrSelect-ea27a70e.js';
-export { _ as OrSelectV3 } from './OrSelect-bb223cce.js';
+export { _ as OrSelectV3 } from './OrSelect-f416b7aa.js';
 export { _ as OrSidebar, O as OrSidebarSide } from './OrSidebar-feacf13a.js';
 export { O as OrSidebarPlacement, _ as OrSidebarV3 } from './OrSidebar-fabc7bc9.js';
 export { _ as OrSkeletonCircle, a as OrSkeletonRect, b as OrSkeletonText, O as OrSkeletonTextSizes } from './OrSkeletonText-38aef640.js';
@@ -117,6 +117,7 @@ import 'sortablejs';
 import './useElevation-0e973238.js';
 import './useResponsive-a02e95b7.js';
 import '@vueuse/integrations/useFocusTrap';
+import './dropdown-open-0d314aa4.js';
 import './useOverflow-ac506c65.js';
 import 'vue';
 import 'portal-vue';

package/dist/v2/index62.js

@@ -4,6 +4,7 @@ import '@vueuse/core';
 import { Editor } from '@tiptap/core';
 import StarterKit from '@tiptap/starter-kit';
 import Underline from '@tiptap/extension-underline';
+import Link from '@tiptap/extension-link';
 import Highlight from '@tiptap/extension-highlight';
 import Placeholder from '@tiptap/extension-placeholder';
 import { _ as __vue_component__$1 } from './OrIconButton-5883eba0.js';
@@ -79,7 +80,7 @@ var script = defineComponent({
     },
     toolbar: {
       type: Array,
-      default: () => [['bold', 'italic', 'strike'], ['underline', 'highlight'], ['bulletList', 'orderedList'], ['undo', 'redo']]
+      default: () => [['bold', 'italic', 'strike'], ['underline', 'highlight'], ['link'], ['bulletList', 'orderedList'], ['undo', 'redo']]
     },
     description: {
       type: String,
@@ -142,17 +143,16 @@ var script = defineComponent({
         element: editorRef.value,
         content: props.modelValue,
         autofocus: props.autofocus,
-        extensions: [StarterKit, Underline,
-        // Link.configure({
-        //   openOnClick: true,
-        //   linkOnPaste: true,
-        //   protocols: ['ftp', 'mailto'],
-        //   validate: href => /^https?:\/\//.test(href),
-        //   HTMLAttributes: {
-        //     class: 'text-primary cursor-pointer',
-        //   },
-        // }),
-        Highlight, Placeholder.configure({
+        extensions: [StarterKit, Underline, Link.configure({
+          openOnClick: true,
+          linkOnPaste: true,
+          autolink: false,
+          protocols: ['ftp', 'mailto', 'http', 'https'],
+          validate: href => /^https?:\/\//.test(href),
+          HTMLAttributes: {
+            class: 'text-primary cursor-pointer'
+          }
+        }), Highlight, Placeholder.configure({
           placeholder: props.placeholder,
           emptyEditorClass: 'is-editor-empty text-outline'
         })],
@@ -176,12 +176,31 @@ var script = defineComponent({
     const handleToolbarClick = item => {
       if (item === 'bulletList' || item === 'orderedList') {
         item === 'bulletList' ? editor === null || editor === void 0 ? void 0 : editor.commands.toggleBulletList() : editor === null || editor === void 0 ? void 0 : editor.commands.toggleOrderedList();
+      } else if (item === 'link') {
+        setLink();
       } else if (item === 'undo' || item === 'redo') {
         item === 'undo' ? editor === null || editor === void 0 ? void 0 : editor.commands.undo() : editor === null || editor === void 0 ? void 0 : editor.commands.redo();
       } else {
         editor === null || editor === void 0 ? void 0 : editor.chain().focus().toggleMark(item).run();
       }
     };
+    const setLink = () => {
+      const previousUrl = editor === null || editor === void 0 ? void 0 : editor.getAttributes('link').href;
+      const url = window.prompt('URL', previousUrl);
+      // cancelled
+      if (url === null) {
+        return;
+      }
+      // empty
+      if (url === '') {
+        editor === null || editor === void 0 ? void 0 : editor.chain().focus().extendMarkRange('link').unsetLink().run();
+        return;
+      }
+      // update link
+      editor === null || editor === void 0 ? void 0 : editor.chain().focus().extendMarkRange('link').setLink({
+        href: url
+      }).run();
+    };
     const setActiveFormats = () => {
       const toolbarList = flatMap(props.toolbar);
       toolbarList.forEach(item => {

package/dist/v2/index65.js

@@ -1,6 +1,7 @@
-export { _ as OrSelectV3 } from './OrSelect-bb223cce.js';
+export { _ as OrSelectV3 } from './OrSelect-f416b7aa.js';
 export { a as SelectSize } from './OrInputBox-208dceac.js';
 import 'vue-demi';
+import './dropdown-open-0d314aa4.js';
 import './useClassAttribute-47fdb016.js';
 import './useOverflow-ac506c65.js';
 import '@vueuse/core';

package/dist/v2/index92.js

@@ -1,7 +1,2 @@
-export { u as useClassAttribute } from './useClassAttribute-47fdb016.js';
-export { u as useElevation } from './useElevation-0e973238.js';
-export { u as useOverflow } from './useOverflow-ac506c65.js';
-export { u as useResponsive } from './useResponsive-a02e95b7.js';
-export { u as useToggle } from './useToggle-29e4d7c7.js';
+export { D as DropdownClose, a as DropdownOpen } from './dropdown-open-0d314aa4.js';
 import 'vue-demi';
-import '@vueuse/core';

package/dist/v2/index93.js

@@ -1,3 +1,7 @@
+export { u as useClassAttribute } from './useClassAttribute-47fdb016.js';
+export { u as useElevation } from './useElevation-0e973238.js';
+export { u as useOverflow } from './useOverflow-ac506c65.js';
 export { u as useResponsive } from './useResponsive-a02e95b7.js';
-import '@vueuse/core';
+export { u as useToggle } from './useToggle-29e4d7c7.js';
 import 'vue-demi';
+import '@vueuse/core';

package/dist/v2/index94.js

@@ -0,0 +1,3 @@
+export { u as useResponsive } from './useResponsive-a02e95b7.js';
+import '@vueuse/core';
+import 'vue-demi';

package/dist/v3/{OrSelect-63ada65d.js → OrSelect-9d300f55.js}

@@ -1,4 +1,5 @@
-import { isVue3, defineComponent, getCurrentInstance, ref, computed, onMounted, watch } from 'vue-demi';
+import { defineComponent, getCurrentInstance, ref, computed, onMounted, watch } from 'vue-demi';
+import { D as DropdownClose, a as DropdownOpen } from './dropdown-open-0d314aa4.js';
 import { u as useClassAttribute } from './useClassAttribute-47fdb016.js';
 import { u as useOverflow } from './useOverflow-ac506c65.js';
 import '@vueuse/core';
@@ -15,31 +16,6 @@ import { s as script$a } from './OrPopover-3525c670.js';
 import { s as script$b } from './OrTag-144b4ab8.js';
 import { resolveComponent, resolveDirective, openBlock, createElementBlock, mergeProps, createBlock, withCtx, renderSlot, createTextVNode, toDisplayString, createCommentVNode, withDirectives, normalizeClass, createElementVNode, Fragment, renderList, createVNode, withModifiers } from 'vue';
 
-const created$1 = (element, binding) => {
-  element.addEventListener('keydown', event => {
-    event.preventDefault();
-    if (['Escape'].includes(event.key)) {
-      binding.value(event);
-    }
-  });
-};
-const DropdownClose = {
-  [isVue3 ? 'created' : 'bind']: created$1
-};
-
-const created = (element, binding) => {
-  element.addEventListener('keydown', event => {
-    event.preventDefault();
-    if (['Enter', ' '].includes(event.key)) {
-      binding.value(event);
-    }
-  });
-  element.addEventListener('click', binding.value);
-};
-const DropdownOpen = {
-  [isVue3 ? 'created' : 'bind']: created
-};
-
 const SelectRoot = [
 // Layout
 'flex', 'flex-col',
@@ -247,11 +223,15 @@ var script = defineComponent({
       };
     });
     // Methods
-    function open() {
+    function toggle() {
       if (!readonly.value && !props.disabled) {
         const popoverInstance = popover.value;
         if (popoverInstance) {
-          popoverInstance.open();
+          if (popoverState.value === 'open') {
+            popoverInstance.close();
+          } else {
+            popoverInstance.open();
+          }
         }
       }
     }
@@ -293,7 +273,7 @@ var script = defineComponent({
       internalSearchOptions,
       resolvedSearchOptions,
       groupedOptions,
-      open,
+      toggle,
       close,
       deselect,
       innerItems,
@@ -484,7 +464,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
       _: 3 /* FORWARDED */
     }, 8 /* PROPS */, ["class", "trigger"])]),
     _: 3 /* FORWARDED */
-  }, 8 /* PROPS */, ["class", "size", "invalid", "readonly", "disabled"])), [[_directive_dropdown_open, _ctx.open], [_directive_dropdown_close, _ctx.close]]), !_ctx.invalid ? (openBlock(), createBlock(_component_OrHint, {
+  }, 8 /* PROPS */, ["class", "size", "invalid", "readonly", "disabled"])), [[_directive_dropdown_open, _ctx.toggle], [_directive_dropdown_close, _ctx.close]]), !_ctx.invalid ? (openBlock(), createBlock(_component_OrHint, {
     key: 1,
     disabled: _ctx.disabled
   }, {

package/dist/v3/components/or-select-v3/OrSelect.vue.d.ts

@@ -34,7 +34,7 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
     }[]>;
     resolvedSearchOptions: import("@vue/composition-api").ComputedRef<SelectOption[]>;
     groupedOptions: import("@vue/composition-api").ComputedRef<Record<string, SelectOption[]>>;
-    open: () => void;
+    toggle: () => void;
     close: () => void;
     deselect: (option: SelectOption) => void;
     innerItems: import("@vue/composition-api").Ref<HTMLElement[]>;
@@ -221,7 +221,7 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
     }[]>;
     resolvedSearchOptions: import("@vue/composition-api").ComputedRef<SelectOption[]>;
     groupedOptions: import("@vue/composition-api").ComputedRef<Record<string, SelectOption[]>>;
-    open: () => void;
+    toggle: () => void;
     close: () => void;
     deselect: (option: SelectOption) => void;
     innerItems: import("@vue/composition-api").Ref<HTMLElement[]>;

package/dist/v3/directives/index.d.ts

@@ -0,0 +1,2 @@
+export * from './dropdown-close';
+export * from './dropdown-open';

package/dist/v3/dropdown-open-0d314aa4.js

@@ -0,0 +1,28 @@
+import { isVue3 } from 'vue-demi';
+
+const created$1 = (element, binding) => {
+  element.addEventListener('keydown', event => {
+    event.preventDefault();
+    if (['Escape'].includes(event.key)) {
+      binding.value(event);
+    }
+  });
+};
+const DropdownClose = {
+  [isVue3 ? 'created' : 'bind']: created$1
+};
+
+const created = (element, binding) => {
+  element.addEventListener('keydown', event => {
+    event.preventDefault();
+    if (['Enter', ' '].includes(event.key)) {
+      binding.value(event);
+    }
+  });
+  element.addEventListener('click', binding.value);
+};
+const DropdownOpen = {
+  [isVue3 ? 'created' : 'bind']: created
+};
+
+export { DropdownClose as D, DropdownOpen as a };

package/dist/v3/index.d.ts

@@ -1,3 +1,4 @@
 export * from './components';
+export * from './directives';
 export * from './hooks';
 export * from './utils/functions/text';

package/dist/v3/index.js

@@ -59,7 +59,7 @@ export { s as OrRadioGroup } from './OrRadioGroup-00785e41.js';
 export { s as OrRadioV3 } from './OrRadio-0c1883f2.js';
 export { s as OrSearchV3 } from './OrSearch-15a70678.js';
 export { s as OrSelect } from './OrSelect-056731af.js';
-export { s as OrSelectV3 } from './OrSelect-63ada65d.js';
+export { s as OrSelectV3 } from './OrSelect-9d300f55.js';
 export { s as OrSidebar, O as OrSidebarSide } from './OrSidebar-375c85a3.js';
 export { O as OrSidebarPlacement, s as OrSidebarV3 } from './OrSidebar-a62972f5.js';
 export { s as OrSkeletonCircle, a as OrSkeletonRect, b as OrSkeletonText, O as OrSkeletonTextSizes } from './OrSkeletonText-2b1610ce.js';
@@ -86,6 +86,7 @@ export { a as OrToastContainerV3, s as OrToastV3, t as TypesV3 } from './types-a
 export { p as PropsV3, a as useQueueV3, u as useToastV3 } from './useToast-0665462d.js';
 export { s as OrTooltip, a as OrTooltipContent } from './OrTooltip-121eae2b.js';
 export { s as OrTooltipV3 } from './OrTooltip-30e05f9e.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-0e973238.js';
 export { u as useOverflow } from './useOverflow-ac506c65.js';

package/dist/v3/index2.js

@@ -59,7 +59,7 @@ export { s as OrRadioGroup } from './OrRadioGroup-00785e41.js';
 export { s as OrRadioV3 } from './OrRadio-0c1883f2.js';
 export { s as OrSearchV3 } from './OrSearch-15a70678.js';
 export { s as OrSelect } from './OrSelect-056731af.js';
-export { s as OrSelectV3 } from './OrSelect-63ada65d.js';
+export { s as OrSelectV3 } from './OrSelect-9d300f55.js';
 export { s as OrSidebar, O as OrSidebarSide } from './OrSidebar-375c85a3.js';
 export { O as OrSidebarPlacement, s as OrSidebarV3 } from './OrSidebar-a62972f5.js';
 export { s as OrSkeletonCircle, a as OrSkeletonRect, b as OrSkeletonText, O as OrSkeletonTextSizes } from './OrSkeletonText-2b1610ce.js';
@@ -111,4 +111,5 @@ import 'sortablejs';
 import './useElevation-0e973238.js';
 import './useResponsive-a02e95b7.js';
 import '@vueuse/integrations/useFocusTrap';
+import './dropdown-open-0d314aa4.js';
 import './useOverflow-ac506c65.js';

package/dist/v3/index62.js

@@ -4,6 +4,7 @@ import '@vueuse/core';
 import { Editor } from '@tiptap/core';
 import StarterKit from '@tiptap/starter-kit';
 import Underline from '@tiptap/extension-underline';
+import Link from '@tiptap/extension-link';
 import Highlight from '@tiptap/extension-highlight';
 import Placeholder from '@tiptap/extension-placeholder';
 import { s as script$1 } from './OrIconButton-b8066b5d.js';
@@ -78,7 +79,7 @@ var script = defineComponent({
     },
     toolbar: {
       type: Array,
-      default: () => [['bold', 'italic', 'strike'], ['underline', 'highlight'], ['bulletList', 'orderedList'], ['undo', 'redo']]
+      default: () => [['bold', 'italic', 'strike'], ['underline', 'highlight'], ['link'], ['bulletList', 'orderedList'], ['undo', 'redo']]
     },
     description: {
       type: String,
@@ -141,17 +142,16 @@ var script = defineComponent({
         element: editorRef.value,
         content: props.modelValue,
         autofocus: props.autofocus,
-        extensions: [StarterKit, Underline,
-        // Link.configure({
-        //   openOnClick: true,
-        //   linkOnPaste: true,
-        //   protocols: ['ftp', 'mailto'],
-        //   validate: href => /^https?:\/\//.test(href),
-        //   HTMLAttributes: {
-        //     class: 'text-primary cursor-pointer',
-        //   },
-        // }),
-        Highlight, Placeholder.configure({
+        extensions: [StarterKit, Underline, Link.configure({
+          openOnClick: true,
+          linkOnPaste: true,
+          autolink: false,
+          protocols: ['ftp', 'mailto', 'http', 'https'],
+          validate: href => /^https?:\/\//.test(href),
+          HTMLAttributes: {
+            class: 'text-primary cursor-pointer'
+          }
+        }), Highlight, Placeholder.configure({
           placeholder: props.placeholder,
           emptyEditorClass: 'is-editor-empty text-outline'
         })],
@@ -175,12 +175,31 @@ var script = defineComponent({
     const handleToolbarClick = item => {
       if (item === 'bulletList' || item === 'orderedList') {
         item === 'bulletList' ? editor === null || editor === void 0 ? void 0 : editor.commands.toggleBulletList() : editor === null || editor === void 0 ? void 0 : editor.commands.toggleOrderedList();
+      } else if (item === 'link') {
+        setLink();
       } else if (item === 'undo' || item === 'redo') {
         item === 'undo' ? editor === null || editor === void 0 ? void 0 : editor.commands.undo() : editor === null || editor === void 0 ? void 0 : editor.commands.redo();
       } else {
         editor === null || editor === void 0 ? void 0 : editor.chain().focus().toggleMark(item).run();
       }
     };
+    const setLink = () => {
+      const previousUrl = editor === null || editor === void 0 ? void 0 : editor.getAttributes('link').href;
+      const url = window.prompt('URL', previousUrl);
+      // cancelled
+      if (url === null) {
+        return;
+      }
+      // empty
+      if (url === '') {
+        editor === null || editor === void 0 ? void 0 : editor.chain().focus().extendMarkRange('link').unsetLink().run();
+        return;
+      }
+      // update link
+      editor === null || editor === void 0 ? void 0 : editor.chain().focus().extendMarkRange('link').setLink({
+        href: url
+      }).run();
+    };
     const setActiveFormats = () => {
       const toolbarList = flatMap(props.toolbar);
       toolbarList.forEach(item => {

package/dist/v3/index65.js

@@ -1,6 +1,7 @@
-export { s as OrSelectV3 } from './OrSelect-63ada65d.js';
+export { s as OrSelectV3 } from './OrSelect-9d300f55.js';
 export { a as SelectSize } from './OrInputBox-634230b1.js';
 import 'vue-demi';
+import './dropdown-open-0d314aa4.js';
 import './useClassAttribute-47fdb016.js';
 import './useOverflow-ac506c65.js';
 import '@vueuse/core';

package/dist/v3/index92.js

@@ -1,7 +1,2 @@
-export { u as useClassAttribute } from './useClassAttribute-47fdb016.js';
-export { u as useElevation } from './useElevation-0e973238.js';
-export { u as useOverflow } from './useOverflow-ac506c65.js';
-export { u as useResponsive } from './useResponsive-a02e95b7.js';
-export { u as useToggle } from './useToggle-29e4d7c7.js';
+export { D as DropdownClose, a as DropdownOpen } from './dropdown-open-0d314aa4.js';
 import 'vue-demi';
-import '@vueuse/core';

package/dist/v3/index93.js

@@ -1,3 +1,7 @@
+export { u as useClassAttribute } from './useClassAttribute-47fdb016.js';
+export { u as useElevation } from './useElevation-0e973238.js';
+export { u as useOverflow } from './useOverflow-ac506c65.js';
 export { u as useResponsive } from './useResponsive-a02e95b7.js';
-import '@vueuse/core';
+export { u as useToggle } from './useToggle-29e4d7c7.js';
 import 'vue-demi';
+import '@vueuse/core';

package/dist/v3/index94.js

@@ -0,0 +1,3 @@
+export { u as useResponsive } from './useResponsive-a02e95b7.js';
+import '@vueuse/core';
+import 'vue-demi';

package/package.json

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

package/src/components/or-avatar-v3/OrAvatar.docs.mdx

@@ -1,3 +1,7 @@
 import { DocsPage } from '@storybook/addon-docs';
 
+```ts
+import { OrAvatarV3 as OrAvatar } from '@onereach/ui-components';
+```
+
 <DocsPage />

package/src/components/or-bottom-sheet-v3/OrBottomSheet.docs.mdx

@@ -1,3 +1,7 @@
 import { DocsPage } from '@storybook/addon-docs';
 
+```ts
+import { OrBottomSheetV3 as OrBottomSheet } from '@onereach/ui-components';
+```
+
 <DocsPage />

package/src/components/or-button-v3/OrButton.docs.mdx

@@ -1,5 +1,9 @@
 import { DocsPage } from '@storybook/addon-docs';
 
+```ts
+import { OrButtonV3 as OrButton } from '@onereach/ui-components';
+```
+
 <DocsPage />
 
 ## Migration Guide from V1

package/src/components/or-card-v3/OrCard.docs.mdx

@@ -1,5 +1,9 @@
 import { DocsPage } from '@storybook/addon-docs';
 
+```ts
+import { OrCardV3 as OrCard } from '@onereach/ui-components';
+```
+
 <DocsPage />
 
 ## Migration Guide from V1

package/src/components/or-checkbox-v3/OrCheckbox.docs.mdx

@@ -1,5 +1,9 @@
 import { DocsPage } from '@storybook/addon-docs';
 
+```ts
+import { OrCheckboxV3 as OrCheckbox } from '@onereach/ui-components';
+```
+
 <DocsPage />
 
 ## Migration Guide from V1

package/src/components/or-confirm-v3/OrConfirm.docs.mdx

@@ -1,5 +1,9 @@
 import { DocsPage } from '@storybook/addon-docs';
 
+```ts
+import { OrConfirmV3 as OrConfirm } from '@onereach/ui-components';
+```
+
 <DocsPage />
 
 ## Migration Guide from V1

package/src/components/or-error-tag-v3/OrErrorTag.docs.mdx

@@ -1,3 +1,8 @@
 import { DocsPage } from '@storybook/addon-docs';
 
+```ts
+import { OrErrorTagV3 as OrErrorTag } from '@onereach/ui-components';
+```
+
+
 <DocsPage />

package/src/components/or-error-v3/OrError.docs.mdx

@@ -1,3 +1,7 @@
 import { DocsPage } from '@storybook/addon-docs';
 
+```ts
+import { OrErrorV3 as OrError } from '@onereach/ui-components';
+```
+
 <DocsPage />

package/src/components/or-expansion-panel-v3/OrExpansionPanel.docs.mdx

@@ -1,3 +1,7 @@
 import { DocsPage } from '@storybook/addon-docs';
 
+```ts
+import { OrExpansionPanelV3 as OrExpansionPanel } from '@onereach/ui-components';
+```
+
 <DocsPage />

package/src/components/or-fab-v3/OrFab.docs.mdx

@@ -1,3 +1,7 @@
 import { DocsPage } from '@storybook/addon-docs';
 
+```ts
+import { OrFabV3 as OrFab } from '@onereach/ui-components';
+```
+
 <DocsPage />

package/src/components/or-hint-v3/OrHint.docs.mdx

@@ -1,3 +1,7 @@
 import { DocsPage } from '@storybook/addon-docs';
 
+```ts
+import { OrHintV3 as OrHint } from '@onereach/ui-components';
+```
+
 <DocsPage />

package/src/components/or-icon-button-v3/OrIconButton.docs.mdx

@@ -1,5 +1,9 @@
 import { DocsPage } from '@storybook/addon-docs';
 
+```ts
+import { OrIconButtonV3 as OrIconButton } from '@onereach/ui-components';
+```
+
 <DocsPage />
 
 ## Migration Guide from V1

package/src/components/or-icon-v3/OrIcon.docs.mdx

@@ -1,5 +1,9 @@
 import { DocsPage } from '@storybook/addon-docs';
 
+```ts
+import { OrIconV3 as OrIcon } from '@onereach/ui-components';
+```
+
 <DocsPage />
 
 ## Migration Guide from V1

package/src/components/or-inline-input-v3/OrInlineInput.docs.mdx

@@ -1,3 +1,7 @@
 import { DocsPage } from '@storybook/addon-docs';
 
+```ts
+import { OrInlineInputV3 as OrInlineInput } from '@onereach/ui-components';
+```
+
 <DocsPage />

package/src/components/or-inline-textarea-v3/OrInlineTextarea.docs.mdx

@@ -1,3 +1,7 @@
 import { DocsPage } from '@storybook/addon-docs';
 
+```ts
+import { OrInlineTextareaV3 as OrInlineTextarea } from '@onereach/ui-components';
+```
+
 <DocsPage />

package/src/components/or-input-v3/OrInput.docs.mdx

@@ -1,5 +1,9 @@
 import { DocsPage } from '@storybook/addon-docs';
 
+```ts
+import { OrInputV3 as OrInput } from '@onereach/ui-components';
+```
+
 <DocsPage />
 
 ## Migration Guide from V1

package/src/components/or-label-v3/OrLabel.docs.mdx

@@ -1,5 +1,9 @@
 import { DocsPage } from '@storybook/addon-docs';
 
+```ts
+import { OrLabelV3 as OrLabel } from '@onereach/ui-components';
+```
+
 <DocsPage />
 
 ## Migration Guide from V1

package/src/components/or-link-v3/OrLink.docs.mdx

@@ -1,3 +1,7 @@
 import { DocsPage } from '@storybook/addon-docs';
 
+```ts
+import { OrLinkV3 as OrLink } from '@onereach/ui-components';
+```
+
 <DocsPage />

package/src/components/or-loader-v3/OrLoader.docs.mdx

@@ -1,5 +1,9 @@
 import { DocsPage } from '@storybook/addon-docs';
 
+```ts
+import { OrLoaderV3 as OrLoader } from '@onereach/ui-components';
+```
+
 <DocsPage />
 
 ## Migration Guide from V1

package/src/components/or-menu-item-v3/OrMenuItem.docs.mdx

@@ -1,3 +1,7 @@
 import { DocsPage } from '@storybook/addon-docs';
 
+```ts
+import { OrMenuItemV3 as OrMenuItem } from '@onereach/ui-components';
+```
+
 <DocsPage />

package/src/components/or-menu-v3/OrMenu.docs.mdx

@@ -1,3 +1,7 @@
 import { DocsPage } from '@storybook/addon-docs';
 
+```ts
+import { OrMenuV3 as OrMenu } from '@onereach/ui-components';
+```
+
 <DocsPage />

package/src/components/or-modal-v3/OrModal.docs.mdx

@@ -1,5 +1,9 @@
 import { DocsPage } from '@storybook/addon-docs';
 
+```ts
+import { OrModalV3 as OrModal } from '@onereach/ui-components';
+```
+
 <DocsPage />
 
 ## Migration Guide from V1

package/src/components/or-notification-v3/OrNotification.docs.mdx

@@ -1,3 +1,7 @@
 import { DocsPage } from '@storybook/addon-docs';
 
+```ts
+import { OrNotificationV3 as OrNotification } from '@onereach/ui-components';
+```
+
 <DocsPage />

package/src/components/or-overlay-v3/OrOverlay.docs.mdx

@@ -1,5 +1,9 @@
 import { DocsPage } from '@storybook/addon-docs';
 
+```ts
+import { OrOverlayV3 as OrOverlay } from '@onereach/ui-components';
+```
+
 <DocsPage />
 
 ## Migration Guide from V1

package/src/components/or-popover-v3/OrPopover.docs.mdx

@@ -1,5 +1,9 @@
 import { DocsPage } from '@storybook/addon-docs';
 
+```ts
+import { OrPopoverV3 as OrPopover } from '@onereach/ui-components';
+```
+
 <DocsPage />
 
 ## Migration Guide from V1

package/src/components/or-progress-v3/OrProgress.docs.mdx

@@ -1,5 +1,9 @@
 import { DocsPage } from '@storybook/addon-docs';
 
+```ts
+import { OrProgressV3 as OrProgress } from '@onereach/ui-components';
+```
+
 <DocsPage />
 
 ## Migration Guide from V1

package/src/components/or-radio-v3/OrRadio.docs.mdx

@@ -1,5 +1,9 @@
 import { DocsPage } from '@storybook/addon-docs';
 
+```ts
+import { OrRadioV3 as OrRadio } from '@onereach/ui-components';
+```
+
 <DocsPage />
 
 ## Migration Guide from V1

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

@@ -45,7 +45,7 @@ import { useClassAttribute } from '../../hooks';
 import { Editor } from '@tiptap/core';
 import StarterKit from '@tiptap/starter-kit';
 import Underline from '@tiptap/extension-underline';
-// import Link from '@tiptap/extension-link';
+import Link from '@tiptap/extension-link';
 import Highlight from '@tiptap/extension-highlight';
 import Placeholder from '@tiptap/extension-placeholder';
 import { OrIconButtonV3 as OrIconButton } from '../or-icon-button-v3';
@@ -79,7 +79,7 @@ export default defineComponent({
     },
     toolbar: {
       type: Array,
-      default: () => [['bold', 'italic', 'strike'], ['underline', 'highlight'], ['bulletList', 'orderedList'], ['undo', 'redo']],
+      default: () => [['bold', 'italic', 'strike'], ['underline', 'highlight'], ['link'], ['bulletList', 'orderedList'], ['undo', 'redo']],
     },
     description: {
       type: String,
@@ -145,15 +145,16 @@ export default defineComponent({
         extensions: [
           StarterKit,
           Underline,
-          // Link.configure({
-          //   openOnClick: true,
-          //   linkOnPaste: true,
-          //   protocols: ['ftp', 'mailto'],
-          //   validate: href => /^https?:\/\//.test(href),
-          //   HTMLAttributes: {
-          //     class: 'text-primary cursor-pointer',
-          //   },
-          // }),
+          Link.configure({
+            openOnClick: true,
+            linkOnPaste: true,
+            autolink: false,
+            protocols: ['ftp', 'mailto', 'http', 'https'],
+            validate: href => /^https?:\/\//.test(href),
+            HTMLAttributes: {
+              class: 'text-primary cursor-pointer',
+            },
+          }),
           Highlight,
           Placeholder
             .configure({
@@ -185,6 +186,9 @@ export default defineComponent({
       if (item === 'bulletList' || item === 'orderedList') {
         item === 'bulletList' ? editor?.commands.toggleBulletList() : editor?.commands.toggleOrderedList();
       }
+      else if (item === 'link') {
+        setLink();
+      }
       else if (item === 'undo' || item === 'redo') {
         item === 'undo' ? editor?.commands.undo() : editor?.commands.redo();
       }
@@ -193,6 +197,29 @@ export default defineComponent({
       }
     };
 
+    const setLink = () => {
+      const previousUrl = editor?.getAttributes('link').href;
+      const url = window.prompt('URL', previousUrl);
+
+      // cancelled
+      if (url === null) {
+        return;
+      }
+
+      // empty
+      if (url === '') {
+        editor?.chain().focus().extendMarkRange('link').unsetLink().run();
+        return;
+      }
+
+      // update link
+      editor?.chain()
+        .focus()
+        .extendMarkRange('link')
+        .setLink({ href: url })
+        .run();
+    };
+
     const setActiveFormats = () => {
       const toolbarList = flatMap(props.toolbar) as string[];
       toolbarList.forEach((item) => {

package/src/components/or-search-v3/OrSearch.docs.mdx

@@ -1,5 +1,9 @@
 import { DocsPage } from '@storybook/addon-docs';
 
+```ts
+import { OrSearchV3 as OrSearch } from '@onereach/ui-components';
+```
+
 <DocsPage />
 
 ## Migration Guide from V1

package/src/components/or-select-v3/OrSelect.docs.mdx

@@ -1,5 +1,9 @@
 import { DocsPage } from '@storybook/addon-docs';
 
+```ts
+import { OrSelectV3 as OrSelect } from '@onereach/ui-components';
+```
+
 <DocsPage />
 
 ## Migration Guide from V1

package/src/components/or-select-v3/OrSelect.vue

@@ -21,7 +21,7 @@
 
     <OrInputBox
       ref="inputBox"
-      v-dropdown-open="open"
+      v-dropdown-open="toggle"
       v-dropdown-close="close"
       :class="[popoverState === 'open' && 'rounded-b-0']"
       :size="size"
@@ -208,8 +208,7 @@
 
 <script lang="ts">
 import { computed, defineComponent, getCurrentInstance, onMounted, PropType, ref, watch } from 'vue-demi';
-import { DropdownClose } from '../../directives/dropdown-close';
-import { DropdownOpen } from '../../directives/dropdown-open';
+import { DropdownClose, DropdownOpen } from '../../directives';
 import { useClassAttribute, useOverflow } from '../../hooks';
 import { OrCheckboxV3 as OrCheckbox } from '../or-checkbox-v3';
 import { OrErrorV3 as OrError } from '../or-error-v3';
@@ -465,12 +464,16 @@ export default defineComponent({
     });
 
     // Methods
-    function open(): void {
+    function toggle(): void {
       if (!readonly.value && !props.disabled) {
         const popoverInstance = popover.value;
 
         if (popoverInstance) {
-          (popoverInstance.open as () => void)();
+          if (popoverState.value === 'open') {
+            (popoverInstance.close as () => void)();
+          } else {
+            (popoverInstance.open as () => void)();
+          }
         }
       }
     }
@@ -515,7 +518,7 @@ export default defineComponent({
       internalSearchOptions,
       resolvedSearchOptions,
       groupedOptions,
-      open,
+      toggle,
       close,
       deselect,
       innerItems,

package/src/components/or-sidebar-v3/OrSidebar.docs.mdx

@@ -1,3 +1,7 @@
 import { DocsPage } from '@storybook/addon-docs';
 
+```ts
+import { OrSidebarV3 as OrSidebar } from '@onereach/ui-components';
+```
+
 <DocsPage />

package/src/components/or-skeleton-v3/OrSkeleton.docs.mdx

@@ -1,5 +1,13 @@
 import { DocsPage } from '@storybook/addon-docs';
 
+```ts
+import {
+    OrSkeletonCircleV3 as OrSkeletonCircle,
+    OrSkeletonRectV3 as OrSkeletonRect,
+    OrSkeletonTextV3 as OrSkeletonText,
+} from '@onereach/ui-components';
+```
+
 <DocsPage />
 
 ## Migration Guide from V1

package/src/components/or-switch-v3/OrSwitch.docs.mdx

@@ -1,3 +1,7 @@
 import { DocsPage } from '@storybook/addon-docs';
 
+```ts
+import { OrSwitchV3 as OrSwitch } from '@onereach/ui-components';
+```
+
 <DocsPage />

package/src/components/or-tab-v3/OrTab.docs.mdx

@@ -1,3 +1,7 @@
 import { DocsPage } from '@storybook/addon-docs';
 
+```ts
+import { OrTabV3 as OrTab } from '@onereach/ui-components';
+```
+
 <DocsPage />

package/src/components/or-tabs-v3/OrTabs.docs.mdx

@@ -1,3 +1,7 @@
 import { DocsPage } from '@storybook/addon-docs';
 
+```ts
+import { OrTabsV3 as OrTabs } from '@onereach/ui-components';
+```
+
 <DocsPage />

package/src/components/or-tag-v3/OrTag.docs.mdx

@@ -1,5 +1,9 @@
 import { DocsPage } from '@storybook/addon-docs';
 
+```ts
+import { OrTagV3 as OrTag } from '@onereach/ui-components';
+```
+
 <DocsPage />
 
 ## Migration Guide from V1

package/src/components/or-teleport-v3/OrTeleport.docs.mdx

@@ -1,3 +1,7 @@
 import { DocsPage } from '@storybook/addon-docs';
 
+```ts
+import { OrTeleportV3 as OrTeleport } from '@onereach/ui-components';
+```
+
 <DocsPage />

package/src/components/or-text-v3/OrText.docs.mdx

@@ -1,3 +1,7 @@
 import { DocsPage } from '@storybook/addon-docs';
 
+```ts
+import { OrTextV3 as OrText } from '@onereach/ui-components';
+```
+
 <DocsPage />

package/src/components/or-textarea-v3/OrTextarea.docs.mdx

@@ -1,5 +1,9 @@
 import { DocsPage } from '@storybook/addon-docs';
 
+```ts
+import { OrTextareaV3 as OrTextarea } from '@onereach/ui-components';
+```
+
 <DocsPage />
 
 ## Migration Guide from V1

package/src/components/or-tooltip-v3/OrTooltip.docs.mdx

@@ -1,5 +1,8 @@
 import { DocsPage } from '@storybook/addon-docs';
 
+```ts
+import { OrTooltipV3 as OrTooltip } from '@onereach/ui-components';
+```
 <DocsPage />
 
 ## Migration Guide from V1

package/src/directives/index.ts

@@ -0,0 +1,2 @@
+export * from './dropdown-close';
+export * from './dropdown-open';

package/src/index.ts

@@ -1,3 +1,4 @@
 export * from './components';
+export * from './directives';
 export * from './hooks';
 export * from './utils/functions/text';