@onereach/ui-components 2.58.0 → 2.58.1

package/dist/v2/{OrTabs-4fcaa8ee.js → OrTabs-94e45ed2.js}

@@ -50,12 +50,16 @@ var script = defineComponent({
       type: [String, Number],
       default: undefined
     },
+    value: {
+      type: [String, Number],
+      default: undefined
+    },
     variant: {
       type: String,
       default: TabsVariant.Default
     }
   },
-  emits: ['update:modelValue'],
+  emits: ['update:modelValue', 'input'],
   expose: ['root'],
   setup(props, context) {
     // Refs
@@ -78,9 +82,20 @@ var script = defineComponent({
       normal: [],
       hidden: []
     });
+    const proxyModelValue = computed({
+      get: () => {
+        var _a;
+        return (_a = props.modelValue) !== null && _a !== void 0 ? _a : props.value; // TODO: Remove Vue 2 fallback
+      },
+
+      set: value => {
+        context.emit('input', value);
+        context.emit('update:modelValue', value);
+      }
+    });
     const activeTab = computed(() => props.items.find(({
       value
-    }) => value === props.modelValue));
+    }) => value === proxyModelValue.value));
     // Functions
     function rearrangeTabs(items, activeTab, rootElement) {
       const {
@@ -121,8 +136,8 @@ var script = defineComponent({
     // #endregion
     onMounted(() => {
       var _a;
-      if (!props.modelValue) {
-        context.emit('update:modelValue', (_a = props.items[0]) === null || _a === void 0 ? void 0 : _a.value);
+      if (!proxyModelValue.value) {
+        proxyModelValue.value = (_a = props.items[0]) === null || _a === void 0 ? void 0 : _a.value;
       }
     });
     return {
@@ -133,6 +148,7 @@ var script = defineComponent({
       overflowMenuRoot,
       rootStyles,
       tabs,
+      proxyModelValue,
       activeTab
     };
   }
@@ -153,12 +169,12 @@ var __vue_render__ = function () {
     return _c('OrTab', {
       key: tab.value,
       attrs: {
-        "selected": _vm.modelValue === tab.value
+        "selected": _vm.proxyModelValue === tab.value
       },
       on: {
         "click": function ($event) {
           $event.stopPropagation();
-          return _vm.$emit('update:modelValue', tab.value);
+          _vm.proxyModelValue = tab.value;
         }
       }
     }, [_vm._v("\n      " + _vm._s(tab.label) + "\n    ")]);
@@ -186,12 +202,12 @@ var __vue_render__ = function () {
       on: {
         "click": function ($event) {
           $event.stopPropagation();
-          _vm.$emit('update:modelValue', tab.value);
+          _vm.proxyModelValue = tab.value;
           _vm.overflowMenu.close();
         }
       }
     }, [_vm._v("\n          " + _vm._s(tab.label) + "\n        ")]);
-  }), 1)] : _vm._e()], 2), _vm._v(" "), _vm._t(String(_vm.modelValue))], 2);
+  }), 1)] : _vm._e()], 2), _vm._v(" "), _vm._t(String(_vm.proxyModelValue))], 2);
 };
 var __vue_staticRenderFns__ = [];
 

package/dist/v2/components/or-tabs-v3/OrTabs.vue.d.ts

@@ -26,6 +26,7 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
             label: string;
         }[];
     };
+    proxyModelValue: import("@vue/composition-api").WritableComputedRef<string | number>;
     activeTab: import("@vue/composition-api").ComputedRef<TabsItem>;
 }> & import("@vue/composition-api").Data, {}, {}, {
     items: {
@@ -36,6 +37,10 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
         type: (StringConstructor | NumberConstructor)[];
         default: undefined;
     };
+    value: {
+        type: (StringConstructor | NumberConstructor)[];
+        default: undefined;
+    };
     variant: {
         type: PropType<TabsVariant>;
         default: TabsVariant;
@@ -49,6 +54,10 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
         type: (StringConstructor | NumberConstructor)[];
         default: undefined;
     };
+    value: {
+        type: (StringConstructor | NumberConstructor)[];
+        default: undefined;
+    };
     variant: {
         type: PropType<TabsVariant>;
         default: TabsVariant;
@@ -56,6 +65,7 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
 }>> & Omit<import("vue").VueConstructor<import("vue").default>, never> & (new (...args: any[]) => import("@vue/composition-api").ComponentRenderProxy<{
     items: TabsItem[];
     modelValue: string | number;
+    value: string | number;
     variant: TabsVariant;
 } & {} & {
     [x: `on${Capitalize<string>}`]: ((...args: any[]) => any) | undefined;
@@ -84,15 +94,18 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
             label: string;
         }[];
     };
+    proxyModelValue: import("@vue/composition-api").WritableComputedRef<string | number>;
     activeTab: import("@vue/composition-api").ComputedRef<TabsItem>;
 }>, import("@vue/composition-api").Data, {}, {}, {}, {}, string[], {
     items: TabsItem[];
     modelValue: string | number;
+    value: string | number;
     variant: TabsVariant;
 } & {} & {
     [x: `on${Capitalize<string>}`]: ((...args: any[]) => any) | undefined;
 }, {
     modelValue: string | number;
+    value: string | number;
     variant: TabsVariant;
 }, true>);
 export default _default;

package/dist/v2/index.js

@@ -76,7 +76,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-4fcaa8ee.js';
+export { _ as OrTabsV3, T as TabsVariant } from './OrTabs-94e45ed2.js';
 export { _ as OrTag } from './OrTag-140d4f72.js';
 export { _ as OrTagV3, a as TagColor, T as TagVariant } from './OrTag-23de8510.js';
 export { _ as OrTeleport } from './OrTeleportVue2-fce4676d.js';

package/dist/v2/index2.js

@@ -76,7 +76,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-4fcaa8ee.js';
+export { _ as OrTabsV3, T as TabsVariant } from './OrTabs-94e45ed2.js';
 export { _ as OrTag } from './OrTag-140d4f72.js';
 export { _ as OrTagV3, a as TagColor, T as TagVariant } from './OrTag-23de8510.js';
 export { _ as OrTeleport } from './OrTeleportVue2-fce4676d.js';

package/dist/v2/index76.js

@@ -1,4 +1,4 @@
-export { _ as OrTabsV3, T as TabsVariant } from './OrTabs-4fcaa8ee.js';
+export { _ as OrTabsV3, T as TabsVariant } from './OrTabs-94e45ed2.js';
 import '@vueuse/core';
 import 'vue-demi';
 import './useClassAttribute-47fdb016.js';

package/dist/v3/{OrTabs-d2e9d48b.js → OrTabs-ff70020b.js}

@@ -50,12 +50,16 @@ var script = defineComponent({
       type: [String, Number],
       default: undefined
     },
+    value: {
+      type: [String, Number],
+      default: undefined
+    },
     variant: {
       type: String,
       default: TabsVariant.Default
     }
   },
-  emits: ['update:modelValue'],
+  emits: ['update:modelValue', 'input'],
   expose: ['root'],
   setup(props, context) {
     // Refs
@@ -78,9 +82,20 @@ var script = defineComponent({
       normal: [],
       hidden: []
     });
+    const proxyModelValue = computed({
+      get: () => {
+        var _a;
+        return (_a = props.modelValue) !== null && _a !== void 0 ? _a : props.value; // TODO: Remove Vue 2 fallback
+      },
+
+      set: value => {
+        context.emit('input', value);
+        context.emit('update:modelValue', value);
+      }
+    });
     const activeTab = computed(() => props.items.find(({
       value
-    }) => value === props.modelValue));
+    }) => value === proxyModelValue.value));
     // Functions
     function rearrangeTabs(items, activeTab, rootElement) {
       const {
@@ -121,8 +136,8 @@ var script = defineComponent({
     // #endregion
     onMounted(() => {
       var _a;
-      if (!props.modelValue) {
-        context.emit('update:modelValue', (_a = props.items[0]) === null || _a === void 0 ? void 0 : _a.value);
+      if (!proxyModelValue.value) {
+        proxyModelValue.value = (_a = props.items[0]) === null || _a === void 0 ? void 0 : _a.value;
       }
     });
     return {
@@ -133,6 +148,7 @@ var script = defineComponent({
       overflowMenuRoot,
       rootStyles,
       tabs,
+      proxyModelValue,
       activeTab
     };
   }
@@ -150,8 +166,8 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
   }), [(openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.tabs.normal, tab => {
     return openBlock(), createBlock(_component_OrTab, {
       key: tab.value,
-      selected: _ctx.modelValue === tab.value,
-      onClick: withModifiers($event => _ctx.$emit('update:modelValue', tab.value), ["stop"])
+      selected: _ctx.proxyModelValue === tab.value,
+      onClick: withModifiers($event => _ctx.proxyModelValue = tab.value, ["stop"])
     }, {
       default: withCtx(() => [createTextVNode(toDisplayString(tab.label), 1 /* TEXT */)]),
 
@@ -176,7 +192,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
       return openBlock(), createBlock(_component_OrMenuItem, {
         key: tab.value,
         onClick: withModifiers($event => {
-          _ctx.$emit('update:modelValue', tab.value);
+          _ctx.proxyModelValue = tab.value;
           _ctx.overflowMenu.close();
         }, ["stop"])
       }, {
@@ -187,7 +203,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
     }), 128 /* KEYED_FRAGMENT */))]),
 
     _: 1 /* STABLE */
-  }, 8 /* PROPS */, ["trigger"])], 64 /* STABLE_FRAGMENT */)) : createCommentVNode("v-if", true)], 16 /* FULL_PROPS */), renderSlot(_ctx.$slots, String(_ctx.modelValue))]);
+  }, 8 /* PROPS */, ["trigger"])], 64 /* STABLE_FRAGMENT */)) : createCommentVNode("v-if", true)], 16 /* FULL_PROPS */), renderSlot(_ctx.$slots, String(_ctx.proxyModelValue))]);
 }
 
 script.render = render;

package/dist/v3/components/or-tabs-v3/OrTabs.vue.d.ts

@@ -26,6 +26,7 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
             label: string;
         }[];
     };
+    proxyModelValue: import("@vue/composition-api").WritableComputedRef<string | number>;
     activeTab: import("@vue/composition-api").ComputedRef<TabsItem>;
 }> & import("@vue/composition-api").Data, {}, {}, {
     items: {
@@ -36,6 +37,10 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
         type: (StringConstructor | NumberConstructor)[];
         default: undefined;
     };
+    value: {
+        type: (StringConstructor | NumberConstructor)[];
+        default: undefined;
+    };
     variant: {
         type: PropType<TabsVariant>;
         default: TabsVariant;
@@ -49,6 +54,10 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
         type: (StringConstructor | NumberConstructor)[];
         default: undefined;
     };
+    value: {
+        type: (StringConstructor | NumberConstructor)[];
+        default: undefined;
+    };
     variant: {
         type: PropType<TabsVariant>;
         default: TabsVariant;
@@ -56,6 +65,7 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
 }>> & Omit<import("vue").VueConstructor<import("vue").default>, never> & (new (...args: any[]) => import("@vue/composition-api").ComponentRenderProxy<{
     items: TabsItem[];
     modelValue: string | number;
+    value: string | number;
     variant: TabsVariant;
 } & {} & {
     [x: `on${Capitalize<string>}`]: ((...args: any[]) => any) | undefined;
@@ -84,15 +94,18 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
             label: string;
         }[];
     };
+    proxyModelValue: import("@vue/composition-api").WritableComputedRef<string | number>;
     activeTab: import("@vue/composition-api").ComputedRef<TabsItem>;
 }>, import("@vue/composition-api").Data, {}, {}, {}, {}, string[], {
     items: TabsItem[];
     modelValue: string | number;
+    value: string | number;
     variant: TabsVariant;
 } & {} & {
     [x: `on${Capitalize<string>}`]: ((...args: any[]) => any) | undefined;
 }, {
     modelValue: string | number;
+    value: string | number;
     variant: TabsVariant;
 }, true>);
 export default _default;

package/dist/v3/index.js

@@ -71,7 +71,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-d2e9d48b.js';
+export { s as OrTabsV3, T as TabsVariant } from './OrTabs-ff70020b.js';
 export { s as OrTag } from './OrTag-7e24fdbc.js';
 export { s as OrTagV3, a as TagColor, T as TagVariant } from './OrTag-09cc3f1f.js';
 export { s as OrTeleport } from './OrTeleportVue3-ad639f12.js';

package/dist/v3/index2.js

@@ -71,7 +71,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-d2e9d48b.js';
+export { s as OrTabsV3, T as TabsVariant } from './OrTabs-ff70020b.js';
 export { s as OrTag } from './OrTag-7e24fdbc.js';
 export { s as OrTagV3, a as TagColor, T as TagVariant } from './OrTag-09cc3f1f.js';
 export { s as OrTeleport } from './OrTeleportVue3-ad639f12.js';

package/dist/v3/index76.js

@@ -1,4 +1,4 @@
-export { s as OrTabsV3, T as TabsVariant } from './OrTabs-d2e9d48b.js';
+export { s as OrTabsV3, T as TabsVariant } from './OrTabs-ff70020b.js';
 import '@vueuse/core';
 import 'vue-demi';
 import './useClassAttribute-47fdb016.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@onereach/ui-components",
-  "version": "2.58.0",
+  "version": "2.58.1",
   "description": "Vue components library for v2/3",
   "sideEffects": false,
   "main": "./dist/auto/index.js",
@@ -76,5 +76,5 @@
       "optional": true
     }
   },
-  "gitHead": "f22379d759685379741c721d6d1236575c75ab26"
+  "gitHead": "2ebaa2889b89fed8d2f9d9a74914c5eedc1bbb82"
 }

package/src/components/or-tabs-v3/OrTabs.stories3.ts

@@ -25,6 +25,10 @@ export default {
       control: { type: 'text' },
     },
 
+    value: { // TODO: Remove Vue 2 fallback
+      table: { disable: true },
+    },
+
     variant: {
       control: { type: 'select' },
       options: Object.values(TabsVariant),
@@ -34,6 +38,10 @@ export default {
     'update:modelValue': {
       table: { disable: true },
     },
+
+    input: {
+      table: { disable: true },
+    },
   },
 
   parameters: {
@@ -60,7 +68,8 @@ const Template: StoryFn<typeof OrTabs> = (args) => ({
     return {
       args,
       value,
-      onUpdate: action('update:modelValue'),
+      onUpdateModelValue: action('update:modelValue'),
+      onInput: action('input'),
     };
   },
 
@@ -68,7 +77,8 @@ const Template: StoryFn<typeof OrTabs> = (args) => ({
     <OrTabs
       v-model="value"
       v-bind="args"
-      @update:modelValue="onUpdate"
+      @update:modelValue="onUpdateModelValue"
+      @input="onInput"
     >
       <template v-for="item in args.items" #[item.value]>
         {{ item.label }} Content

package/src/components/or-tabs-v3/OrTabs.vue

@@ -8,8 +8,8 @@
       <OrTab
         v-for="tab in tabs.normal"
         :key="tab.value"
-        :selected="modelValue === tab.value"
-        @click.stop="$emit('update:modelValue', tab.value)"
+        :selected="proxyModelValue === tab.value"
+        @click.stop="proxyModelValue = tab.value"
       >
         {{ tab.label }}
       </OrTab>
@@ -32,7 +32,7 @@
           <OrMenuItem
             v-for="tab in tabs.hidden"
             :key="tab.value"
-            @click.stop="$emit('update:modelValue', tab.value); overflowMenu.close()"
+            @click.stop="proxyModelValue = tab.value; overflowMenu.close()"
           >
             {{ tab.label }}
           </OrMenuItem>
@@ -40,7 +40,7 @@
       </template>
     </div>
 
-    <slot :name="String(modelValue)" />
+    <slot :name="String(proxyModelValue)" />
   </div>
 </template>
 
@@ -79,6 +79,11 @@ export default defineComponent({
       default: undefined,
     },
 
+    value: { // TODO: Remove Vue 2 fallback
+      type: [String, Number],
+      default: undefined,
+    },
+
     variant: {
       type: String as PropType<TabsVariant>,
       default: TabsVariant.Default,
@@ -87,6 +92,8 @@ export default defineComponent({
 
   emits: [
     'update:modelValue',
+
+    'input',
   ],
 
   expose: [
@@ -119,7 +126,18 @@ export default defineComponent({
       hidden: [] as TabsItem[],
     });
 
-    const activeTab = computed(() => props.items.find(({ value }) => value === props.modelValue)!);
+    const proxyModelValue = computed({
+      get: () => {
+        return props.modelValue ?? props.value; // TODO: Remove Vue 2 fallback
+      },
+
+      set: (value) => {
+        context.emit('input', value);
+        context.emit('update:modelValue', value);
+      },
+    });
+
+    const activeTab = computed(() => props.items.find(({ value }) => value === proxyModelValue.value)!);
 
     // Functions
     function rearrangeTabs(items: TabsItem[], activeTab: TabsItem, rootElement: Element): typeof tabs {
@@ -176,8 +194,8 @@ export default defineComponent({
     // #endregion
 
     onMounted(() => {
-      if (!props.modelValue) {
-        context.emit('update:modelValue', props.items[0]?.value);
+      if (!proxyModelValue.value) {
+        proxyModelValue.value = props.items[0]?.value;
       }
     });
 
@@ -189,6 +207,7 @@ export default defineComponent({
       overflowMenuRoot,
       rootStyles,
       tabs,
+      proxyModelValue,
       activeTab,
     };
   },