@onereach/ui-components 2.65.1 → 2.65.2-beta.1968.0

package/dist/v2/{OrMenu-bb81644d.js → OrMenu-2ab4f346.js}

@@ -11,7 +11,7 @@ const MenuBody = [
 // Layout
 'overflow-y-auto',
 // Box
-'max-w-[128px]', 'max-h-[340px]'];
+'min-w-[160px]', 'max-w-[256px]', 'max-h-[340px]'];
 
 var script = defineComponent({
   name: 'OrMenu',
@@ -30,7 +30,7 @@ var script = defineComponent({
     }
   },
   emits: ['update:state'],
-  expose: ['root', 'open', 'close'],
+  expose: ['root', 'open', 'close', 'isOpen'],
   setup() {
     // Refs
     const root = ref();
@@ -39,6 +39,10 @@ var script = defineComponent({
       var _a;
       return (_a = popover.value) === null || _a === void 0 ? void 0 : _a.root;
     });
+    const isOpen = computed(() => {
+      var _a;
+      return (_a = popover.value) === null || _a === void 0 ? void 0 : _a.state;
+    });
     // Styles
     const classAttribute = useClassAttribute();
     const rootStyles = computed(() => ['or-menu', ...MenuRoot, classAttribute.value]);
@@ -75,6 +79,7 @@ var script = defineComponent({
       rootStyles,
       bodyStyles,
       open,
+      isOpen,
       close,
       onClick
     };

package/dist/v2/{OrTabs-b1f0c7b8.js → OrTabs-e4ab5c27.js}

@@ -3,7 +3,7 @@ import { defineComponent, ref, computed, reactive, watch, nextTick, onMounted }
 import { u as useClassAttribute } from './useClassAttribute-47fdb016.js';
 import { _ as __vue_component__$1 } from './OrIcon-05689298.js';
 import { _ as __vue_component__$3 } from './OrMenuItem-9034aece.js';
-import { _ as __vue_component__$2 } from './OrMenu-bb81644d.js';
+import { _ as __vue_component__$2 } from './OrMenu-2ab4f346.js';
 import './OrPopover-9080fc00.js';
 import { _ as __vue_component__$4 } from './OrTab-4e6ff742.js';
 import { n as normalizeComponent } from './normalize-component-6e8e3d80.js';

package/dist/v2/components/or-menu-v3/OrMenu.stories3.d.ts

@@ -10,3 +10,8 @@ export declare const Menu: StoryFn<import("vue").ComponentOptions<import("vue").
 } | string[], {} & {}, {
     [x: number]: string;
 } | {}, true>)>;
+export declare const OrderDropdown: StoryFn<import("vue").ComponentOptions<import("vue").default, import("@vue/composition-api").ShallowUnwrapRef<unknown>, import("@vue/composition-api").MethodOptions, import("@vue/composition-api").ComputedOptions, import("@vue/composition-api").ComponentPropsOptions<import("@vue/composition-api").Data>, import("@vue/composition-api").ExtractPropTypes<import("@vue/composition-api").ComponentPropsOptions<import("@vue/composition-api").Data>>> & Omit<import("vue").VueConstructor<import("vue").default>, never> & (new (...args: any[]) => import("@vue/composition-api").ComponentRenderProxy<{} & {}, import("@vue/composition-api").ShallowUnwrapRef<unknown>, unknown, import("@vue/composition-api").ComputedOptions, import("@vue/composition-api").MethodOptions, unknown, unknown, {
+    [x: string]: ((...args: any[]) => any) | null;
+} | string[], {} & {}, {
+    [x: number]: string;
+} | {}, true>)>;

package/dist/v2/components/or-menu-v3/OrMenu.vue.d.ts

@@ -11,6 +11,7 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
     rootStyles: import("@vue/composition-api").ComputedRef<(string | undefined)[]>;
     bodyStyles: import("@vue/composition-api").ComputedRef<string[]>;
     open: () => void;
+    isOpen: import("@vue/composition-api").ComputedRef<undefined>;
     close: () => void;
     onClick: (event: Event) => void;
 }> & import("@vue/composition-api").Data, {}, {}, {
@@ -53,6 +54,7 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
     rootStyles: import("@vue/composition-api").ComputedRef<(string | undefined)[]>;
     bodyStyles: import("@vue/composition-api").ComputedRef<string[]>;
     open: () => void;
+    isOpen: import("@vue/composition-api").ComputedRef<undefined>;
     close: () => void;
     onClick: (event: Event) => void;
 }>, import("@vue/composition-api").Data, {}, {}, {}, {}, string[], {

package/dist/v2/index.js

@@ -49,7 +49,7 @@ export { _ as OrListOfInputs } from './OrListOfInputs-dae3556c.js';
 export { L as LoaderViews, _ as OrLoader } from './OrLoader-212ef381.js';
 export { a as LoaderColor, b as LoaderSize, L as LoaderVariant, _ as OrLoaderV3 } from './OrLoader-bd088836.js';
 export { _ as OrMenuItemV3 } from './OrMenuItem-9034aece.js';
-export { _ as OrMenuV3 } from './OrMenu-bb81644d.js';
+export { _ as OrMenuV3 } from './OrMenu-2ab4f346.js';
 export { P as MenuPlacement, _ as OrPopoverV3, P as PopoverPlacement, a as PopoverVariant, P as TooltipPlacement } from './OrPopover-9080fc00.js';
 export { _ as OrModal, O as OrModalSizes } from './OrModal-5c491f46.js';
 export { M as ModalSize, _ as OrModalV3 } from './OrModal-c8617460.js';
@@ -80,7 +80,7 @@ export { _ as OrTab } from './OrTab-8dfdeca0.js';
 export { _ as OrTabHeaderItem } from './OrTabHeaderItem-6a08756e.js';
 export { _ as OrTabV3 } from './OrTab-4e6ff742.js';
 export { _ as OrTabs } from './OrTabs-12138346.js';
-export { _ as OrTabsV3, T as TabsVariant } from './OrTabs-b1f0c7b8.js';
+export { _ as OrTabsV3, T as TabsVariant } from './OrTabs-e4ab5c27.js';
 export { _ as OrTag } from './OrTag-140d4f72.js';
 export { _ as OrTagV3, a as TagColor, T as TagVariant } from './OrTag-f3dbd61f.js';
 export { _ as OrTeleport } from './OrTeleportVue2-fce4676d.js';

package/dist/v2/index2.js

@@ -49,7 +49,7 @@ export { _ as OrListOfInputs } from './OrListOfInputs-dae3556c.js';
 export { L as LoaderViews, _ as OrLoader } from './OrLoader-212ef381.js';
 export { a as LoaderColor, b as LoaderSize, L as LoaderVariant, _ as OrLoaderV3 } from './OrLoader-bd088836.js';
 export { _ as OrMenuItemV3 } from './OrMenuItem-9034aece.js';
-export { _ as OrMenuV3 } from './OrMenu-bb81644d.js';
+export { _ as OrMenuV3 } from './OrMenu-2ab4f346.js';
 export { P as MenuPlacement, _ as OrPopoverV3, P as PopoverPlacement, a as PopoverVariant, P as TooltipPlacement } from './OrPopover-9080fc00.js';
 export { _ as OrModal, O as OrModalSizes } from './OrModal-5c491f46.js';
 export { M as ModalSize, _ as OrModalV3 } from './OrModal-c8617460.js';
@@ -80,7 +80,7 @@ export { _ as OrTab } from './OrTab-8dfdeca0.js';
 export { _ as OrTabHeaderItem } from './OrTabHeaderItem-6a08756e.js';
 export { _ as OrTabV3 } from './OrTab-4e6ff742.js';
 export { _ as OrTabs } from './OrTabs-12138346.js';
-export { _ as OrTabsV3, T as TabsVariant } from './OrTabs-b1f0c7b8.js';
+export { _ as OrTabsV3, T as TabsVariant } from './OrTabs-e4ab5c27.js';
 export { _ as OrTag } from './OrTag-140d4f72.js';
 export { _ as OrTagV3, a as TagColor, T as TagVariant } from './OrTag-f3dbd61f.js';
 export { _ as OrTeleport } from './OrTeleportVue2-fce4676d.js';

package/dist/v2/index49.js

@@ -1,4 +1,4 @@
-export { _ as OrMenuV3 } from './OrMenu-bb81644d.js';
+export { _ as OrMenuV3 } from './OrMenu-2ab4f346.js';
 export { P as MenuPlacement } from './OrPopover-9080fc00.js';
 import 'vue-demi';
 import './useClassAttribute-47fdb016.js';

package/dist/v2/index80.js

@@ -1,11 +1,11 @@
-export { _ as OrTabsV3, T as TabsVariant } from './OrTabs-b1f0c7b8.js';
+export { _ as OrTabsV3, T as TabsVariant } from './OrTabs-e4ab5c27.js';
 import '@vueuse/core';
 import 'vue-demi';
 import './useClassAttribute-47fdb016.js';
 import './OrIcon-05689298.js';
 import './normalize-component-6e8e3d80.js';
 import './OrMenuItem-9034aece.js';
-import './OrMenu-bb81644d.js';
+import './OrMenu-2ab4f346.js';
 import './OrPopover-9080fc00.js';
 import '@floating-ui/dom';
 import './useElevation-0e973238.js';

package/dist/v3/{OrMenu-75ef8635.js → OrMenu-403f6aeb.js}

@@ -11,7 +11,7 @@ const MenuBody = [
 // Layout
 'overflow-y-auto',
 // Box
-'max-w-[128px]', 'max-h-[340px]'];
+'min-w-[160px]', 'max-w-[256px]', 'max-h-[340px]'];
 
 var script = defineComponent({
   name: 'OrMenu',
@@ -30,7 +30,7 @@ var script = defineComponent({
     }
   },
   emits: ['update:state'],
-  expose: ['root', 'open', 'close'],
+  expose: ['root', 'open', 'close', 'isOpen'],
   setup() {
     // Refs
     const root = ref();
@@ -39,6 +39,10 @@ var script = defineComponent({
       var _a;
       return (_a = popover.value) === null || _a === void 0 ? void 0 : _a.root;
     });
+    const isOpen = computed(() => {
+      var _a;
+      return (_a = popover.value) === null || _a === void 0 ? void 0 : _a.state;
+    });
     // Styles
     const classAttribute = useClassAttribute();
     const rootStyles = computed(() => ['or-menu', ...MenuRoot, classAttribute.value]);
@@ -75,6 +79,7 @@ var script = defineComponent({
       rootStyles,
       bodyStyles,
       open,
+      isOpen,
       close,
       onClick
     };

package/dist/v3/{OrTabs-fe7039de.js → OrTabs-f7b645cd.js}

@@ -3,7 +3,7 @@ import { defineComponent, ref, computed, reactive, watch, nextTick, onMounted }
 import { u as useClassAttribute } from './useClassAttribute-47fdb016.js';
 import { s as script$1 } from './OrIcon-e2fa4cf8.js';
 import { s as script$3 } from './OrMenuItem-60afcdcb.js';
-import { s as script$2 } from './OrMenu-75ef8635.js';
+import { s as script$2 } from './OrMenu-403f6aeb.js';
 import './OrPopover-3525c670.js';
 import { s as script$4 } from './OrTab-97044946.js';
 import { resolveComponent, openBlock, createElementBlock, createElementVNode, mergeProps, Fragment, renderList, createBlock, withModifiers, withCtx, createTextVNode, toDisplayString, createVNode, createCommentVNode, renderSlot } from 'vue';

package/dist/v3/components/or-menu-v3/OrMenu.stories3.d.ts

@@ -10,3 +10,8 @@ export declare const Menu: StoryFn<import("vue").ComponentOptions<import("vue").
 } | string[], {} & {}, {
     [x: number]: string;
 } | {}, true>)>;
+export declare const OrderDropdown: StoryFn<import("vue").ComponentOptions<import("vue").default, import("@vue/composition-api").ShallowUnwrapRef<unknown>, import("@vue/composition-api").MethodOptions, import("@vue/composition-api").ComputedOptions, import("@vue/composition-api").ComponentPropsOptions<import("@vue/composition-api").Data>, import("@vue/composition-api").ExtractPropTypes<import("@vue/composition-api").ComponentPropsOptions<import("@vue/composition-api").Data>>> & Omit<import("vue").VueConstructor<import("vue").default>, never> & (new (...args: any[]) => import("@vue/composition-api").ComponentRenderProxy<{} & {}, import("@vue/composition-api").ShallowUnwrapRef<unknown>, unknown, import("@vue/composition-api").ComputedOptions, import("@vue/composition-api").MethodOptions, unknown, unknown, {
+    [x: string]: ((...args: any[]) => any) | null;
+} | string[], {} & {}, {
+    [x: number]: string;
+} | {}, true>)>;

package/dist/v3/components/or-menu-v3/OrMenu.vue.d.ts

@@ -11,6 +11,7 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
     rootStyles: import("@vue/composition-api").ComputedRef<(string | undefined)[]>;
     bodyStyles: import("@vue/composition-api").ComputedRef<string[]>;
     open: () => void;
+    isOpen: import("@vue/composition-api").ComputedRef<undefined>;
     close: () => void;
     onClick: (event: Event) => void;
 }> & import("@vue/composition-api").Data, {}, {}, {
@@ -53,6 +54,7 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
     rootStyles: import("@vue/composition-api").ComputedRef<(string | undefined)[]>;
     bodyStyles: import("@vue/composition-api").ComputedRef<string[]>;
     open: () => void;
+    isOpen: import("@vue/composition-api").ComputedRef<undefined>;
     close: () => void;
     onClick: (event: Event) => void;
 }>, import("@vue/composition-api").Data, {}, {}, {}, {}, string[], {

package/dist/v3/index.js

@@ -44,7 +44,7 @@ export { s as OrListOfInputs } from './OrListOfInputs-b4c051a8.js';
 export { L as LoaderViews, s as OrLoader } from './OrLoader-15174477.js';
 export { a as LoaderColor, b as LoaderSize, L as LoaderVariant, s as OrLoaderV3 } from './OrLoader-60943812.js';
 export { s as OrMenuItemV3 } from './OrMenuItem-60afcdcb.js';
-export { s as OrMenuV3 } from './OrMenu-75ef8635.js';
+export { s as OrMenuV3 } from './OrMenu-403f6aeb.js';
 export { P as MenuPlacement, s as OrPopoverV3, P as PopoverPlacement, a as PopoverVariant, P as TooltipPlacement } from './OrPopover-3525c670.js';
 export { s as OrModal, O as OrModalSizes } from './OrModal-75c8e5b6.js';
 export { M as ModalSize, s as OrModalV3 } from './OrModal-ce7a20bf.js';
@@ -75,7 +75,7 @@ export { s as OrTab } from './OrTab-bc98be02.js';
 export { s as OrTabHeaderItem } from './OrTabHeaderItem-d668cc59.js';
 export { s as OrTabV3 } from './OrTab-97044946.js';
 export { s as OrTabs } from './OrTabs-d3812c11.js';
-export { s as OrTabsV3, T as TabsVariant } from './OrTabs-fe7039de.js';
+export { s as OrTabsV3, T as TabsVariant } from './OrTabs-f7b645cd.js';
 export { s as OrTag } from './OrTag-7e24fdbc.js';
 export { s as OrTagV3, a as TagColor, T as TagVariant } from './OrTag-a3f5dbf4.js';
 export { s as OrTeleport } from './OrTeleportVue3-ad639f12.js';

package/dist/v3/index2.js

@@ -44,7 +44,7 @@ export { s as OrListOfInputs } from './OrListOfInputs-b4c051a8.js';
 export { L as LoaderViews, s as OrLoader } from './OrLoader-15174477.js';
 export { a as LoaderColor, b as LoaderSize, L as LoaderVariant, s as OrLoaderV3 } from './OrLoader-60943812.js';
 export { s as OrMenuItemV3 } from './OrMenuItem-60afcdcb.js';
-export { s as OrMenuV3 } from './OrMenu-75ef8635.js';
+export { s as OrMenuV3 } from './OrMenu-403f6aeb.js';
 export { P as MenuPlacement, s as OrPopoverV3, P as PopoverPlacement, a as PopoverVariant, P as TooltipPlacement } from './OrPopover-3525c670.js';
 export { s as OrModal, O as OrModalSizes } from './OrModal-75c8e5b6.js';
 export { M as ModalSize, s as OrModalV3 } from './OrModal-ce7a20bf.js';
@@ -75,7 +75,7 @@ export { s as OrTab } from './OrTab-bc98be02.js';
 export { s as OrTabHeaderItem } from './OrTabHeaderItem-d668cc59.js';
 export { s as OrTabV3 } from './OrTab-97044946.js';
 export { s as OrTabs } from './OrTabs-d3812c11.js';
-export { s as OrTabsV3, T as TabsVariant } from './OrTabs-fe7039de.js';
+export { s as OrTabsV3, T as TabsVariant } from './OrTabs-f7b645cd.js';
 export { s as OrTag } from './OrTag-7e24fdbc.js';
 export { s as OrTagV3, a as TagColor, T as TagVariant } from './OrTag-a3f5dbf4.js';
 export { s as OrTeleport } from './OrTeleportVue3-ad639f12.js';

package/dist/v3/index49.js

@@ -1,4 +1,4 @@
-export { s as OrMenuV3 } from './OrMenu-75ef8635.js';
+export { s as OrMenuV3 } from './OrMenu-403f6aeb.js';
 export { P as MenuPlacement } from './OrPopover-3525c670.js';
 import 'vue-demi';
 import './useClassAttribute-47fdb016.js';

package/dist/v3/index80.js

@@ -1,11 +1,11 @@
-export { s as OrTabsV3, T as TabsVariant } from './OrTabs-fe7039de.js';
+export { s as OrTabsV3, T as TabsVariant } from './OrTabs-f7b645cd.js';
 import '@vueuse/core';
 import 'vue-demi';
 import './useClassAttribute-47fdb016.js';
 import './OrIcon-e2fa4cf8.js';
 import 'vue';
 import './OrMenuItem-60afcdcb.js';
-import './OrMenu-75ef8635.js';
+import './OrMenu-403f6aeb.js';
 import './OrPopover-3525c670.js';
 import '@floating-ui/dom';
 import './useElevation-0e973238.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@onereach/ui-components",
-  "version": "2.65.1",
+  "version": "2.65.2-beta.1968.0",
   "description": "Vue components library for v2/3",
   "sideEffects": false,
   "main": "./dist/auto/index.js",
@@ -78,6 +78,5 @@
   },
   "publishConfig": {
     "access": "public"
-  },
-  "gitHead": "5f3ec393be65fc8ea669471efa91ff3e8843ac2c"
+  }
 }

package/src/components/or-menu-v3/OrMenu.stories3.ts

@@ -3,6 +3,7 @@ import { Meta, StoryFn } from '@storybook/vue3';
 import { ref } from 'vue-demi';
 import { OrButtonV3 as OrButton } from '../or-button-v3';
 import { OrMenuItemV3 as OrMenuItem } from '../or-menu-item-v3';
+import { OrIconV3 as OrIcon } from '../or-icon-v3';
 import OrMenuDocs from './OrMenu.docs.mdx';
 import OrMenu from './OrMenu.vue';
 import { MenuPlacement } from './props';
@@ -105,3 +106,62 @@ Menu.args = {
     <OrMenuItem>Very Looooooooooooooooooooooooooooooooooooooooooooooooooooooooong Item</OrMenuItem>
   `,
 };
+
+const OrderDropdownTemplate: StoryFn<typeof OrMenu> = (args) => ({
+  components: {
+    OrButton,
+    OrMenu,
+    OrMenuItem,
+    OrIcon,
+  },
+
+  setup() {
+    // Refs
+    const button = ref<InstanceType<typeof OrButton>>();
+    const menu = ref<InstanceType<typeof OrMenu>>();
+
+    return {
+      args,
+      button,
+      menu,
+      onUpdateState: action('update:state'),
+    };
+  },
+
+  template: `
+    <div class="contents">
+      <OrButton
+        ref="button"
+        variant="link"
+        @click="menu.open()"
+      >
+        Last Updated
+        <OrIcon
+          :icon="menu?.isOpen === 'closed' ? 'arrow_drop_down': 'arrow_drop_up'"
+        />
+      </OrButton>
+
+      <OrMenu
+        ref="menu"
+        v-bind="args"
+        :trigger="button?.root"
+        @update:state="onUpdateState"
+        class="min-w-[160px]"
+      >
+        ${args.default}
+      </OrMenu>
+    </div>
+  `,
+});
+
+export const OrderDropdown = OrderDropdownTemplate.bind({});
+
+OrderDropdown.args = {
+  // Slots
+  default: `
+    <OrMenuItem selected>Last Updated</OrMenuItem>
+    <OrMenuItem>Firs Updated</OrMenuItem>
+    <OrMenuItem>A - Z</OrMenuItem>
+    <OrMenuItem>Z - A</OrMenuItem>
+  `,
+};

package/src/components/or-menu-v3/OrMenu.vue

@@ -59,6 +59,7 @@ export default defineComponent({
     'root',
     'open',
     'close',
+    'isOpen',
   ],
 
   setup() {
@@ -67,7 +68,7 @@ export default defineComponent({
 
     const popover = ref<InstanceType<typeof OrPopover>>();
     const popoverRoot = computed(() => popover.value?.root);
-
+    const isOpen = computed(() => popover.value?.state);
     // Styles
     const classAttribute = useClassAttribute();
 
@@ -118,6 +119,7 @@ export default defineComponent({
       rootStyles,
       bodyStyles,
       open,
+      isOpen,
       close,
       onClick,
     };

package/src/components/or-menu-v3/styles.ts

@@ -8,6 +8,7 @@ export const MenuBody: string[] = [
   'overflow-y-auto',
 
   // Box
-  'max-w-[128px]',
+  'min-w-[160px]',
+  'max-w-[256px]',
   'max-h-[340px]',
 ];