@onereach/ui-components 2.62.3-beta.1898.0 → 2.62.3-beta.1899.0

package/dist/v2/{OrSelect-21247104.js → OrSelect-b44cac14.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-c42c3f9c.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-45ea8c33.js';
 export { _ as OrSelect } from './OrSelect-ea27a70e.js';
-export { _ as OrSelectV3 } from './OrSelect-21247104.js';
+export { _ as OrSelectV3 } from './OrSelect-b44cac14.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-45ea8c33.js';
 export { _ as OrSelect } from './OrSelect-ea27a70e.js';
-export { _ as OrSelectV3 } from './OrSelect-21247104.js';
+export { _ as OrSelectV3 } from './OrSelect-b44cac14.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/index64.js

@@ -1,6 +1,7 @@
-export { _ as OrSelectV3 } from './OrSelect-21247104.js';
+export { _ as OrSelectV3 } from './OrSelect-b44cac14.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/index91.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/index92.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/index93.js

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

package/dist/v3/{OrSelect-4cd90c6b.js → OrSelect-9d821ef2.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-60585386.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-e27cadbf.js';
 export { s as OrSelect } from './OrSelect-056731af.js';
-export { s as OrSelectV3 } from './OrSelect-4cd90c6b.js';
+export { s as OrSelectV3 } from './OrSelect-9d821ef2.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-e
 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-e27cadbf.js';
 export { s as OrSelect } from './OrSelect-056731af.js';
-export { s as OrSelectV3 } from './OrSelect-4cd90c6b.js';
+export { s as OrSelectV3 } from './OrSelect-9d821ef2.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/index64.js

@@ -1,6 +1,7 @@
-export { s as OrSelectV3 } from './OrSelect-4cd90c6b.js';
+export { s as OrSelectV3 } from './OrSelect-9d821ef2.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/index91.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/index92.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/index93.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.62.3-beta.1898.0",
+  "version": "2.62.3-beta.1899.0",
   "description": "Vue components library for v2/3",
   "sideEffects": false,
   "main": "./dist/auto/index.js",
@@ -29,7 +29,7 @@
     "@codemirror/lang-json": "6.0.0",
     "@codemirror/lang-markdown": "6.0.1",
     "@floating-ui/dom": "0.3.1",
-    "@onereach/styles": "^2.30.1-beta.1898.0",
+    "@onereach/styles": "^2.30.0",
     "@splidejs/splide": "4.0.6",
     "@types/lodash": "4.14.173",
     "@types/sortablejs": "1.10.7",

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/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';