@onereach/ui-components 2.71.1-beta.2220.0 → 2.71.1-beta.2223.0

package/dist/bundled/v2/{OrSidebar-d445ecdd.js → OrSidebar-eedd2d6e.js}

@@ -275,7 +275,7 @@ var script = defineComponent({
       default: false
     }
   },
-  emits: ['change:width'],
+  emits: ['change:width', 'open', 'close'],
   expose: ['root', 'open', 'close'],
   setup(props, {
     emit
@@ -360,6 +360,7 @@ var script = defineComponent({
       if (newMaximum < localWidth.value) localWidth.value = newMaximum;
     });
     watch(localWidth, val => emit('change:width', val));
+    watch(isCollapsed, val => emit(val ? 'close' : 'open'));
     return {
       root,
       resizeBar,

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

@@ -70,7 +70,7 @@ export { _ as OrSegmentedControlV3, S as SegmentedControlSize } from '../OrSegme
 export { _ as OrSelect } from '../OrSelect-a23d4210.js';
 export { _ as OrSelectV3 } from '../OrSelect-02fb39f0.js';
 export { _ as OrSidebar, O as OrSidebarSide } from '../OrSidebar-e2b2c9ec.js';
-export { O as OrSidebarPlacement, _ as OrSidebarV3 } from '../OrSidebar-d445ecdd.js';
+export { O as OrSidebarPlacement, _ as OrSidebarV3 } from '../OrSidebar-eedd2d6e.js';
 export { _ as OrSkeletonCircle, a as OrSkeletonRect, b as OrSkeletonText, O as OrSkeletonTextSizes } from '../OrSkeletonText-242d22f3.js';
 export { _ as OrSkeletonCircleV3, a as OrSkeletonRectV3, b as OrSkeletonTextV3 } from '../OrSkeletonText-516993b4.js';
 export { _ as OrSlider } from '../OrSlider-59d05856.js';

package/dist/bundled/v2/components/or-sidebar-v3/index.js

@@ -1,4 +1,4 @@
-export { O as OrSidebarPlacement, _ as OrSidebarV3 } from '../../OrSidebar-d445ecdd.js';
+export { O as OrSidebarPlacement, _ as OrSidebarV3 } from '../../OrSidebar-eedd2d6e.js';
 import '@vueuse/core';
 import 'lodash';
 import '../../index-fa6eb4ca.js';

package/dist/bundled/v2/index.js

@@ -75,7 +75,7 @@ export { _ as OrSegmentedControlV3, S as SegmentedControlSize } from './OrSegmen
 export { _ as OrSelect } from './OrSelect-a23d4210.js';
 export { _ as OrSelectV3 } from './OrSelect-02fb39f0.js';
 export { _ as OrSidebar, O as OrSidebarSide } from './OrSidebar-e2b2c9ec.js';
-export { O as OrSidebarPlacement, _ as OrSidebarV3 } from './OrSidebar-d445ecdd.js';
+export { O as OrSidebarPlacement, _ as OrSidebarV3 } from './OrSidebar-eedd2d6e.js';
 export { _ as OrSkeletonCircle, a as OrSkeletonRect, b as OrSkeletonText, O as OrSkeletonTextSizes } from './OrSkeletonText-242d22f3.js';
 export { _ as OrSkeletonCircleV3, a as OrSkeletonRectV3, b as OrSkeletonTextV3 } from './OrSkeletonText-516993b4.js';
 export { _ as OrSlider } from './OrSlider-59d05856.js';

package/dist/bundled/v3/{OrSidebar.vue_vue_type_script_lang-80e5dc4b.js → OrSidebar.vue_vue_type_script_lang-6dc222bd.js}

@@ -244,7 +244,7 @@ var script = defineComponent({
       default: false
     }
   },
-  emits: ['change:width'],
+  emits: ['change:width', 'open', 'close'],
   expose: ['root', 'open', 'close'],
   setup(props, {
     emit
@@ -329,6 +329,7 @@ var script = defineComponent({
       if (newMaximum < localWidth.value) localWidth.value = newMaximum;
     });
     watch(localWidth, val => emit('change:width', val));
+    watch(isCollapsed, val => emit(val ? 'close' : 'open'));
     return {
       root,
       resizeBar,

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

@@ -70,7 +70,7 @@ export { s as OrSegmentedControlV3, S as SegmentedControlSize } from '../OrSegme
 export { s as OrSelect } from '../OrSelect.vue_vue_type_script_lang-26c0a70a.js';
 export { s as OrSelectV3 } from '../OrSelect.vue_vue_type_script_lang-83f15704.js';
 export { s as OrSidebar, O as OrSidebarSide } from '../OrSidebar.vue_vue_type_script_lang-7c55ac0a.js';
-export { O as OrSidebarPlacement, s as OrSidebarV3 } from '../OrSidebar.vue_vue_type_script_lang-80e5dc4b.js';
+export { O as OrSidebarPlacement, s as OrSidebarV3 } from '../OrSidebar.vue_vue_type_script_lang-6dc222bd.js';
 export { s as OrSkeletonCircle, a as OrSkeletonRect, b as OrSkeletonText, O as OrSkeletonTextSizes } from '../OrSkeletonText.vue_vue_type_script_lang-f3f989c3.js';
 export { s as OrSkeletonCircleV3, a as OrSkeletonRectV3, b as OrSkeletonTextV3 } from '../OrSkeletonText.vue_vue_type_script_lang-577a1dc9.js';
 export { s as OrSlider } from '../OrSlider.vue_vue_type_script_lang-d47ff040.js';

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

@@ -1,4 +1,4 @@
-export { O as OrSidebarPlacement, s as OrSidebarV3 } from '../../OrSidebar.vue_vue_type_script_lang-80e5dc4b.js';
+export { O as OrSidebarPlacement, s as OrSidebarV3 } from '../../OrSidebar.vue_vue_type_script_lang-6dc222bd.js';
 import '@vueuse/core';
 import 'lodash';
 import 'vue';

package/dist/bundled/v3/index.js

@@ -89,8 +89,8 @@ import { s as script$w } from './OrSegmentedControl.vue_vue_type_script_lang-579
 export { s as OrSegmentedControlV3, S as SegmentedControlSize } from './OrSegmentedControl.vue_vue_type_script_lang-579406f5.js';
 import { s as script$z } from './OrSidebar.vue_vue_type_script_lang-7c55ac0a.js';
 export { s as OrSidebar, O as OrSidebarSide } from './OrSidebar.vue_vue_type_script_lang-7c55ac0a.js';
-import { s as script$A } from './OrSidebar.vue_vue_type_script_lang-80e5dc4b.js';
-export { O as OrSidebarPlacement, s as OrSidebarV3 } from './OrSidebar.vue_vue_type_script_lang-80e5dc4b.js';
+import { s as script$A } from './OrSidebar.vue_vue_type_script_lang-6dc222bd.js';
+export { O as OrSidebarPlacement, s as OrSidebarV3 } from './OrSidebar.vue_vue_type_script_lang-6dc222bd.js';
 import { s as script$B, a as script$C, b as script$D } from './OrSkeletonText.vue_vue_type_script_lang-f3f989c3.js';
 export { s as OrSkeletonCircle, a as OrSkeletonRect, b as OrSkeletonText, O as OrSkeletonTextSizes } from './OrSkeletonText.vue_vue_type_script_lang-f3f989c3.js';
 import { s as script$E, a as script$F, b as script$G } from './OrSkeletonText.vue_vue_type_script_lang-577a1dc9.js';

package/dist/esm/v2/{OrSidebar-097a4b55.js → OrSidebar-e43a6e55.js}

@@ -273,7 +273,7 @@ var script = defineComponent({
       default: false
     }
   },
-  emits: ['change:width'],
+  emits: ['change:width', 'open', 'close'],
   expose: ['root', 'open', 'close'],
   setup(props, {
     emit
@@ -358,6 +358,7 @@ var script = defineComponent({
       if (newMaximum < localWidth.value) localWidth.value = newMaximum;
     });
     watch(localWidth, val => emit('change:width', val));
+    watch(isCollapsed, val => emit(val ? 'close' : 'open'));
     return {
       root,
       resizeBar,

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

@@ -70,7 +70,7 @@ export { _ as OrSegmentedControlV3, S as SegmentedControlSize } from '../OrSegme
 export { _ as OrSelect } from '../OrSelect-dae2b069.js';
 export { _ as OrSelectV3 } from '../OrSelect-f8837f5d.js';
 export { _ as OrSidebar, O as OrSidebarSide } from '../OrSidebar-7d6125bb.js';
-export { O as OrSidebarPlacement, _ as OrSidebarV3 } from '../OrSidebar-097a4b55.js';
+export { O as OrSidebarPlacement, _ as OrSidebarV3 } from '../OrSidebar-e43a6e55.js';
 export { _ as OrSkeletonCircle, a as OrSkeletonRect, b as OrSkeletonText, O as OrSkeletonTextSizes } from '../OrSkeletonText-cc94bdc9.js';
 export { _ as OrSkeletonCircleV3, a as OrSkeletonRectV3, b as OrSkeletonTextV3 } from '../OrSkeletonText-950be6a2.js';
 export { _ as OrSlider } from '../OrSlider-f7b9c7c2.js';

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

@@ -1,4 +1,4 @@
-export { O as OrSidebarPlacement, _ as OrSidebarV3 } from '../../OrSidebar-097a4b55.js';
+export { O as OrSidebarPlacement, _ as OrSidebarV3 } from '../../OrSidebar-e43a6e55.js';
 import '@vueuse/core';
 import 'lodash';
 import 'vue-demi';

package/dist/esm/v2/index.js

@@ -70,7 +70,7 @@ export { _ as OrSegmentedControlV3, S as SegmentedControlSize } from './OrSegmen
 export { _ as OrSelect } from './OrSelect-dae2b069.js';
 export { _ as OrSelectV3 } from './OrSelect-f8837f5d.js';
 export { _ as OrSidebar, O as OrSidebarSide } from './OrSidebar-7d6125bb.js';
-export { O as OrSidebarPlacement, _ as OrSidebarV3 } from './OrSidebar-097a4b55.js';
+export { O as OrSidebarPlacement, _ as OrSidebarV3 } from './OrSidebar-e43a6e55.js';
 export { _ as OrSkeletonCircle, a as OrSkeletonRect, b as OrSkeletonText, O as OrSkeletonTextSizes } from './OrSkeletonText-cc94bdc9.js';
 export { _ as OrSkeletonCircleV3, a as OrSkeletonRectV3, b as OrSkeletonTextV3 } from './OrSkeletonText-950be6a2.js';
 export { _ as OrSlider } from './OrSlider-f7b9c7c2.js';

package/dist/esm/v3/{OrSidebar-f6b2050b.js → OrSidebar-2abaf7d6.js}

@@ -244,7 +244,7 @@ var script = defineComponent({
       default: false
     }
   },
-  emits: ['change:width'],
+  emits: ['change:width', 'open', 'close'],
   expose: ['root', 'open', 'close'],
   setup(props, {
     emit
@@ -329,6 +329,7 @@ var script = defineComponent({
       if (newMaximum < localWidth.value) localWidth.value = newMaximum;
     });
     watch(localWidth, val => emit('change:width', val));
+    watch(isCollapsed, val => emit(val ? 'close' : 'open'));
     return {
       root,
       resizeBar,

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

@@ -65,7 +65,7 @@ export { s as OrSegmentedControlV3, S as SegmentedControlSize } from '../OrSegme
 export { s as OrSelect } from '../OrSelect-0821b907.js';
 export { s as OrSelectV3 } from '../OrSelect-8fbd88bc.js';
 export { s as OrSidebar, O as OrSidebarSide } from '../OrSidebar-375c85a3.js';
-export { O as OrSidebarPlacement, s as OrSidebarV3 } from '../OrSidebar-f6b2050b.js';
+export { O as OrSidebarPlacement, s as OrSidebarV3 } from '../OrSidebar-2abaf7d6.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';

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

@@ -1,4 +1,4 @@
-export { O as OrSidebarPlacement, s as OrSidebarV3 } from '../../OrSidebar-f6b2050b.js';
+export { O as OrSidebarPlacement, s as OrSidebarV3 } from '../../OrSidebar-2abaf7d6.js';
 import '@vueuse/core';
 import 'lodash';
 import 'vue-demi';

package/dist/esm/v3/index.js

@@ -65,7 +65,7 @@ export { s as OrSegmentedControlV3, S as SegmentedControlSize } from './OrSegmen
 export { s as OrSelect } from './OrSelect-0821b907.js';
 export { s as OrSelectV3 } from './OrSelect-8fbd88bc.js';
 export { s as OrSidebar, O as OrSidebarSide } from './OrSidebar-375c85a3.js';
-export { O as OrSidebarPlacement, s as OrSidebarV3 } from './OrSidebar-f6b2050b.js';
+export { O as OrSidebarPlacement, s as OrSidebarV3 } from './OrSidebar-2abaf7d6.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';

package/package.json

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

package/src/components/or-sidebar-v3/OrSidebar.stories3.ts

@@ -94,6 +94,8 @@ const DefaultTemplate: StoryFn<typeof OrSidebar> = (args) => ({
 
   methods: {
     onChangeWidth: action('change:width'),
+    onOpen: action('open'),
+    onClose: action('close'),
   },
 
   template: `
@@ -104,7 +106,12 @@ const DefaultTemplate: StoryFn<typeof OrSidebar> = (args) => ({
       >
         ${Faker.lorem.paragraphs(10)}
       </div>
-      <OrSidebar v-bind="args" @change:width="onChangeWidth">
+      <OrSidebar
+        v-bind="args"
+        @change:width="onChangeWidth"
+        @open="onOpen"
+        @close="onClose"
+      >
           <template v-if="${!!args.header}" v-slot:header>
             ${args.header}
           </template>
@@ -135,11 +142,18 @@ const LeftTemplate: StoryFn<typeof OrSidebar> = (args) => ({
 
   methods: {
     onChangeWidth: action('change:width'),
+    onOpen: action('open'),
+    onClose: action('close'),
   },
 
   template: `
     <div style="display: flex; flex-direction: row; border: 1px solid gray; height: 650px">
-      <OrSidebar v-bind="args" @change:width="onChangeWidth">
+      <OrSidebar
+        v-bind="args"
+        @change:width="onChangeWidth"
+        @open="onOpen"
+        @close="onClose"
+      >
           <template v-if="${!!args.header}" v-slot:header>
             ${args.header}
           </template>
@@ -183,6 +197,8 @@ const TabsTemplate: StoryFn<typeof OrSidebar> = (args) => ({
 
   methods: {
     onChangeWidth: action('change:width'),
+    onOpen: action('open'),
+    onClose: action('close'),
   },
 
   template: `
@@ -193,7 +209,12 @@ const TabsTemplate: StoryFn<typeof OrSidebar> = (args) => ({
       >
         ${Faker.lorem.paragraphs(10)}
       </div>
-      <OrSidebar v-bind="args" @change:width="onChangeWidth">
+      <OrSidebar
+        v-bind="args"
+        @change:width="onChangeWidth"
+        @open="onOpen"
+        @close="onClose"
+      >
           <template v-if="${!!args.header}" v-slot:header>
             ${args.header}
           </template>

package/src/components/or-sidebar-v3/OrSidebar.vue

@@ -124,7 +124,11 @@ export default defineComponent({
     },
   },
 
-  emits: ['change:width'],
+  emits: [
+    'change:width',
+    'open',
+    'close',
+  ],
 
   expose: [
     'root',
@@ -250,6 +254,8 @@ export default defineComponent({
 
     watch(localWidth, (val: number) => emit('change:width', val));
 
+    watch(isCollapsed, (val: boolean) => emit(val ? 'close' : 'open'));
+
     return {
       root,
       resizeBar,