@onereach/ui-components 2.70.1-beta.2196.0 → 2.70.2-beta.2198.0

package/dist/esm/v3/components/or-sidebar-v3/OrSidebar.vue.d.ts

@@ -4,26 +4,36 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
     root: import("@vue/composition-api").Ref<HTMLElement | undefined>;
     resizeBar: import("@vue/composition-api").Ref<HTMLElement | null>;
     isResizing: import("@vue/composition-api").Ref<boolean>;
+    isCollapsed: import("@vue/composition-api").Ref<boolean>;
     localWidth: import("@vue/composition-api").Ref<number>;
+    isShowingToolbar: import("@vue/composition-api").ComputedRef<boolean>;
     sidebarStyle: import("@vue/composition-api").ComputedRef<{
         width: string;
     }>;
     rootStyles: import("@vue/composition-api").ComputedRef<string[]>;
+    sidebarStyles: import("@vue/composition-api").ComputedRef<string[]>;
+    toolbarStyles: import("@vue/composition-api").ComputedRef<string[]>;
     resizeStyles: import("@vue/composition-api").ComputedRef<string[]>;
+    collapsibleButtonStyles: import("@vue/composition-api").ComputedRef<string[]>;
     mainStyles: import("@vue/composition-api").ComputedRef<string[]>;
     headerStyles: import("@vue/composition-api").ComputedRef<string[]>;
     contentStyles: import("@vue/composition-api").ComputedRef<string[]>;
     footerStyles: import("@vue/composition-api").ComputedRef<string[]>;
+    open: () => void;
+    close: () => void;
 }> & import("@vue/composition-api").Data, {}, {}, {
     width: {
         type: NumberConstructor;
-        required: false;
         default: number;
         validator: (value?: any) => boolean;
     };
     minimumWidth: {
         type: NumberConstructor;
-        required: false;
+        default: number;
+        validator: (value?: any) => boolean;
+    };
+    maximumWidth: {
+        type: NumberConstructor;
         default: number;
         validator: (value?: any) => boolean;
     };
@@ -39,16 +49,27 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
         default: OrSidebarPlacement;
         validator: (value?: any) => boolean;
     };
+    draggable: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    collapsible: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
 }, import("@vue/composition-api").ExtractPropTypes<{
     width: {
         type: NumberConstructor;
-        required: false;
         default: number;
         validator: (value?: any) => boolean;
     };
     minimumWidth: {
         type: NumberConstructor;
-        required: false;
+        default: number;
+        validator: (value?: any) => boolean;
+    };
+    maximumWidth: {
+        type: NumberConstructor;
         default: number;
         validator: (value?: any) => boolean;
     };
@@ -64,35 +85,59 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
         default: OrSidebarPlacement;
         validator: (value?: any) => boolean;
     };
+    draggable: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    collapsible: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
 }>> & Omit<import("vue").VueConstructor<import("vue").default>, never> & (new (...args: any[]) => import("@vue/composition-api").ComponentRenderProxy<{
     width: number;
     minimumWidth: number;
+    maximumWidth: number;
     side: OrSidebarPlacement;
+    draggable: boolean;
+    collapsible: boolean;
 } & {} & {
     [x: string & `on${string}`]: ((...args: any[]) => any) | undefined;
 }, import("@vue/composition-api").ShallowUnwrapRef<{
     root: import("@vue/composition-api").Ref<HTMLElement | undefined>;
     resizeBar: import("@vue/composition-api").Ref<HTMLElement | null>;
     isResizing: import("@vue/composition-api").Ref<boolean>;
+    isCollapsed: import("@vue/composition-api").Ref<boolean>;
     localWidth: import("@vue/composition-api").Ref<number>;
+    isShowingToolbar: import("@vue/composition-api").ComputedRef<boolean>;
     sidebarStyle: import("@vue/composition-api").ComputedRef<{
         width: string;
     }>;
     rootStyles: import("@vue/composition-api").ComputedRef<string[]>;
+    sidebarStyles: import("@vue/composition-api").ComputedRef<string[]>;
+    toolbarStyles: import("@vue/composition-api").ComputedRef<string[]>;
     resizeStyles: import("@vue/composition-api").ComputedRef<string[]>;
+    collapsibleButtonStyles: import("@vue/composition-api").ComputedRef<string[]>;
     mainStyles: import("@vue/composition-api").ComputedRef<string[]>;
     headerStyles: import("@vue/composition-api").ComputedRef<string[]>;
     contentStyles: import("@vue/composition-api").ComputedRef<string[]>;
     footerStyles: import("@vue/composition-api").ComputedRef<string[]>;
+    open: () => void;
+    close: () => void;
 }>, import("@vue/composition-api").Data, {}, {}, {}, {}, string[], {
     width: number;
     minimumWidth: number;
+    maximumWidth: number;
     side: OrSidebarPlacement;
+    draggable: boolean;
+    collapsible: boolean;
 } & {} & {
     [x: string & `on${string}`]: ((...args: any[]) => any) | undefined;
 }, {
     width: number;
     minimumWidth: number;
+    maximumWidth: number;
     side: OrSidebarPlacement;
+    draggable: boolean;
+    collapsible: boolean;
 }, true>);
 export default _default;

package/dist/esm/v3/components/or-sidebar-v3/OrSidebarCollapseButton.stories3.d.ts

@@ -0,0 +1,12 @@
+import { Meta, StoryFn } from '@storybook/vue3';
+declare const _default: Meta<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>)>;
+export default _default;
+export declare const Default: 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/esm/v3/components/or-sidebar-v3/OrSidebarCollapseButton.vue.d.ts

@@ -0,0 +1,59 @@
+import { PropType } from 'vue-demi';
+import { OrSidebarPlacement } from './props';
+declare const _default: import("vue").ComponentOptions<import("vue").default, import("@vue/composition-api").ShallowUnwrapRef<{
+    root: import("@vue/composition-api").Ref<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> | undefined>;
+    rootStyles: import("@vue/composition-api").ComputedRef<string[]>;
+    icon: import("@vue/composition-api").ComputedRef<"keyboard_arrow_left" | "keyboard_arrow_right">;
+}> & import("@vue/composition-api").Data, {}, {}, {
+    /**
+     * Must be `true` if sidebar is collapsed.
+     */
+    modelValue: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    side: {
+        type: PropType<OrSidebarPlacement>;
+        default: OrSidebarPlacement;
+        validator: (value?: any) => boolean;
+    };
+}, import("@vue/composition-api").ExtractPropTypes<{
+    /**
+     * Must be `true` if sidebar is collapsed.
+     */
+    modelValue: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    side: {
+        type: PropType<OrSidebarPlacement>;
+        default: OrSidebarPlacement;
+        validator: (value?: any) => boolean;
+    };
+}>> & Omit<import("vue").VueConstructor<import("vue").default>, never> & (new (...args: any[]) => import("@vue/composition-api").ComponentRenderProxy<{
+    modelValue: boolean;
+    side: OrSidebarPlacement;
+} & {} & {
+    [x: string & `on${string}`]: ((...args: any[]) => any) | undefined;
+}, import("@vue/composition-api").ShallowUnwrapRef<{
+    root: import("@vue/composition-api").Ref<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> | undefined>;
+    rootStyles: import("@vue/composition-api").ComputedRef<string[]>;
+    icon: import("@vue/composition-api").ComputedRef<"keyboard_arrow_left" | "keyboard_arrow_right">;
+}>, import("@vue/composition-api").Data, {}, {}, {}, {}, string[], {
+    modelValue: boolean;
+    side: OrSidebarPlacement;
+} & {} & {
+    [x: string & `on${string}`]: ((...args: any[]) => any) | undefined;
+}, {
+    modelValue: boolean;
+    side: OrSidebarPlacement;
+}, true>);
+export default _default;

package/dist/esm/v3/components/or-sidebar-v3/index.js

@@ -1,5 +1,16 @@
-export { O as OrSidebarPlacement, s as OrSidebarV3 } from '../../OrSidebar-a62972f5.js';
+export { O as OrSidebarPlacement, s as OrSidebarV3 } from '../../OrSidebar-749bbcba.js';
 import '@vueuse/core';
 import 'lodash';
 import 'vue-demi';
+import '../../OrIconButton-1a89fbf9.js';
+import '../../useClassAttribute-47fdb016.js';
+import '../../OrIcon-b195169c.js';
 import 'vue';
+import '../../OrTooltip-50d27b4f.js';
+import '../../OrPopover-1075dd38.js';
+import '@floating-ui/dom';
+import '../../useElevation-31bfe1f6.js';
+import '../../useResponsive-a02e95b7.js';
+import '../../OrBottomSheet-62817aec.js';
+import '../../OrOverlay-738a44d5.js';
+import '../../OrTeleport.vue3-8099178c.js';

package/dist/esm/v3/components/or-sidebar-v3/styles.d.ts

@@ -1,10 +1,16 @@
 import { OrSidebarPlacement } from './props';
 export declare const SidebarRoot: string[];
-export declare const SidebarRootSides: Record<OrSidebarPlacement, string[]>;
+export declare const SidebarBar: string[];
+export declare const SidebarToolbar: string[];
+export declare const SidebarSides: Record<OrSidebarPlacement, string[]>;
+export declare const SidebarToolbarSides: Record<OrSidebarPlacement, string[]>;
 export declare const SidebarResize: string[];
 export declare const SidebarResizeSides: Record<OrSidebarPlacement, string[]>;
+export declare const SidebarCollapseButton: string[];
+export declare const SidebarCollapseButtonSides: Record<OrSidebarPlacement, string[]>;
 export declare const SidebarResizingSides: Record<OrSidebarPlacement, string[]>;
 export declare const SidebarMain: string[];
 export declare const SidebarHeader: string[];
 export declare const SidebarContent: string[];
 export declare const SidebarFooter: string[];
+export declare const CollapseButton: string[];

package/dist/esm/v3/components/or-tag-v3/index.js

@@ -1,4 +1,4 @@
-export { s as OrTagV3, a as TagColor, T as TagVariant } from '../../OrTag-5d54f37d.js';
+export { s as OrTagV3, a as TagColor, T as TagVariant } from '../../OrTag-efa7578f.js';
 import 'vue-demi';
 import '../../useClassAttribute-47fdb016.js';
 import '@vueuse/core';

package/dist/esm/v3/index.js

@@ -22,7 +22,7 @@ export { s as OrError } from './OrError-f90296db.js';
 export { s as OrErrorTagV3 } from './OrErrorTag-98252eef.js';
 export { s as OrErrorV3 } from './OrError-ec8c709d.js';
 export { E as EmptyStateSize, s as OrEmptyStateV3 } from './OrEmptyState-bb8e3145.js';
-export { a as ExpansionPanelColor, E as ExpansionPanelVariant, s as OrExpansionPanelV3 } from './OrExpansionPanel-311e64cf.js';
+export { a as ExpansionPanelColor, E as ExpansionPanelVariant, s as OrExpansionPanelV3 } from './OrExpansionPanel-f8d7ff8d.js';
 export { F as FabColor, s as OrFabV3 } from './OrFab-c8ae6e01.js';
 export { s as OrFloating, a as OrFloatingHideStrategy, O as OrFloatingPlacements } from './OrFloating-5240e758.js';
 export { s as OrHint } from './OrHint-1414c530.js';
@@ -63,9 +63,9 @@ export { s as OrRadioV3 } from './OrRadio-54b6d0de.js';
 export { s as OrSearchV3 } from './OrSearch-9885d178.js';
 export { s as OrSegmentedControlV3, S as SegmentedControlSize } from './OrSegmentedControl-171cad78.js';
 export { s as OrSelect } from './OrSelect-0821b907.js';
-export { s as OrSelectV3 } from './OrSelect-7ef568f4.js';
+export { s as OrSelectV3 } from './OrSelect-dfa4885f.js';
 export { s as OrSidebar, O as OrSidebarSide } from './OrSidebar-375c85a3.js';
-export { O as OrSidebarPlacement, s as OrSidebarV3 } from './OrSidebar-a62972f5.js';
+export { O as OrSidebarPlacement, s as OrSidebarV3 } from './OrSidebar-749bbcba.js';
 export { s as OrSkeletonCircle, a as OrSkeletonRect, b as OrSkeletonText, O as OrSkeletonTextSizes } from './OrSkeletonText-2b1610ce.js';
 export { s as OrSkeletonCircleV3, a as OrSkeletonRectV3, b as OrSkeletonTextV3 } from './OrSkeletonText-3965ff71.js';
 export { s as OrSlider } from './OrSlider-87e2da8c.js';
@@ -79,7 +79,7 @@ export { s as OrTabV3 } from './OrTab-c131cf60.js';
 export { s as OrTabs } from './OrTabs-d3812c11.js';
 export { s as OrTabsV3, T as TabsVariant } from './OrTabs-d0ee6cef.js';
 export { s as OrTag } from './OrTag-1b5e43fa.js';
-export { s as OrTagV3, a as TagColor, T as TagVariant } from './OrTag-5d54f37d.js';
+export { s as OrTagV3, a as TagColor, T as TagVariant } from './OrTag-efa7578f.js';
 export { s as OrTeleport } from './OrTeleportVue3-ad639f12.js';
 export { s as OrTeleportV3 } from './OrTeleport.vue3-8099178c.js';
 export { s as OrTextV3 } from './OrText-ecb46923.js';

package/package.json

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

package/src/components/or-expansion-panel-v3/OrExpansionPanel.stories3.ts

@@ -1,4 +1,6 @@
 import { Meta, StoryFn } from '@storybook/vue3';
+import { action } from '@storybook/addon-actions';
+
 import { OrIconV3 as OrIcon } from '../or-icon-v3';
 import OrExpansionPanelDocs from './OrExpansionPanel.docs.mdx';
 import OrExpansionPanel from './OrExpansionPanel.vue';
@@ -67,11 +69,19 @@ const Template: StoryFn<typeof OrExpansionPanel> = (args) => ({
   },
 
   setup() {
-    return { args };
+    return {
+      args,
+      handleOpen: action('open'),
+      handleClose: action('close'),
+    };
   },
 
   template: `
-    <OrExpansionPanel v-bind="args">
+    <OrExpansionPanel
+      v-bind="args"
+      @open="handleOpen"
+      @close="handleClose"
+    >
       ${args.default}
 
       <template #addon>

package/src/components/or-expansion-panel-v3/OrExpansionPanel.vue

@@ -10,7 +10,7 @@
         :class="headerStyles"
         :tabindex="!disabled ? 0 : null"
         :disabled="disabled ? '' : null"
-        @click.stop="expanded = !expanded"
+        @click.stop="expanded ? close(): open()"
       >
         <OrIcon
           :class="[expanded ? 'rotate-0' : 'rotate-[-90deg]']"
@@ -33,7 +33,7 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, PropType, ref } from 'vue-demi';
+import { computed, defineComponent, PropType, ref, watch } from 'vue-demi';
 import { useClassAttribute } from '../../hooks';
 import { OrIconV3 as OrIcon } from '../or-icon-v3';
 import { ExpansionPanelColor, ExpansionPanelVariant } from './props';
@@ -54,6 +54,11 @@ export default defineComponent({
       required: true,
     },
 
+    isOpen: {
+      type: Boolean as PropType<boolean>,
+      default: false,
+    },
+
     variant: {
       type: String as PropType<ExpansionPanelVariant>,
       default: ExpansionPanelVariant.Default,
@@ -70,11 +75,18 @@ export default defineComponent({
     },
   },
 
+  emits: [
+    'open',
+    'close',
+  ],
+
   expose: [
     'root',
+    'open',
+    'close',
   ],
 
-  setup(props) {
+  setup(props, context) {
     // Refs
     const root = ref<HTMLElement>();
 
@@ -100,12 +112,36 @@ export default defineComponent({
     // State
     const expanded = ref(false);
 
+    // Events
+    watch(expanded, (value) => {
+      context.emit(value ? 'open' : 'close');
+    });
+
+    watch(() => props.isOpen, (newIsOpen) => {
+      if (newIsOpen) {
+        open();
+      } else {
+        close();
+      }
+    }, { immediate: true });
+
+    // Methods
+    function open(): void {
+      expanded.value = true;
+    }
+
+    function close(): void {
+      expanded.value = false;
+    }
+
     return {
       root,
       rootStyles,
       headerStyles,
       addonStyles,
       expanded,
+      open,
+      close,
     };
   },
 });

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

@@ -5,3 +5,9 @@ import { OrSidebarV3 as OrSidebar } from '@onereach/ui-components';
 ```
 
 <DocsPage />
+
+## Migration Guide from V1
+  - added property `draggable`
+  - added property `maximumWidth`
+  - added property `collapsible`
+  - added slot `toolbar`