@onereach/ui-components 4.4.1 → 4.4.2-beta.2711.0

package/dist/bundled/v2/components/OrTabsV3/OrTabs.js

@@ -1,7 +1,7 @@
 import { useResizeObserver } from '@vueuse/core';
 import { defineComponent, ref, computed, reactive, watch, nextTick, onMounted } from 'vue-demi';
 import { TabsVariant } from './props.js';
-import { TabsRoot, TabsRootVariants } from './styles.js';
+import { TabsRoot, TabsRootVariants, TabsContainer } from './styles.js';
 import __vue_component__$1 from '../OrIconV3/OrIcon.js';
 import __vue_component__$2 from '../OrMenuV3/OrMenu.js';
 import __vue_component__$3 from '../OrMenuItemV3/OrMenuItem.js';
@@ -71,6 +71,7 @@ var script = defineComponent({
     });
     // Styles
     const rootStyles = computed(() => ['or-tabs-v3', ...TabsRoot, ...TabsRootVariants[props.variant]]);
+    const containerStyles = computed(() => [...TabsContainer]);
     // State
     const tabs = reactive({
       normal: [],
@@ -140,6 +141,7 @@ var script = defineComponent({
       overflowMenu,
       overflowMenuRoot,
       rootStyles,
+      containerStyles,
       tabs,
       proxyModelValue,
       activeTab
@@ -155,7 +157,9 @@ var __vue_render__ = function () {
   var _vm = this;
   var _h = _vm.$createElement;
   var _c = _vm._self._c || _h;
-  return _c('div', [_c('div', _vm._b({
+  return _c('div', {
+    class: _vm.containerStyles
+  }, [_c('div', _vm._b({
     ref: "root",
     class: _vm.rootStyles
   }, 'div', _vm.$attrs, false), [_vm._l(_vm.tabs.normal, function (tab) {

package/dist/bundled/v2/components/OrTabsV3/OrTabs.vue.d.ts

@@ -16,6 +16,7 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
     } | {}, true> | undefined>;
     overflowMenuRoot: import("@vue/composition-api").ComputedRef<undefined>;
     rootStyles: import("@vue/composition-api").ComputedRef<string[]>;
+    containerStyles: import("@vue/composition-api").ComputedRef<string[]>;
     tabs: {
         normal: {
             value: string | number;
@@ -75,6 +76,7 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
     } | {}, true> | undefined>;
     overflowMenuRoot: import("@vue/composition-api").ComputedRef<undefined>;
     rootStyles: import("@vue/composition-api").ComputedRef<string[]>;
+    containerStyles: import("@vue/composition-api").ComputedRef<string[]>;
     tabs: {
         normal: {
             value: string | number;

package/dist/bundled/v2/components/OrTabsV3/styles.d.ts

@@ -1,3 +1,4 @@
 import { TabsVariant } from './props';
 export declare const TabsRoot: string[];
 export declare const TabsRootVariants: Record<TabsVariant, string[]>;
+export declare const TabsContainer: string[];

package/dist/bundled/v2/components/OrTabsV3/styles.js

@@ -15,5 +15,10 @@ const TabsRootVariants = {
   // Layout
   'auto-cols-auto']
 };
+const TabsContainer = [
+// Layout
+'layout-column',
+// Spacing
+'gap-lg'];
 
-export { TabsRoot, TabsRootVariants };
+export { TabsContainer, TabsRoot, TabsRootVariants };

package/dist/bundled/v3/{OrTabs.vue_vue_type_script_lang-6d47e560.js → OrTabs.vue_vue_type_script_lang-014663ff.js}

@@ -1,7 +1,7 @@
 import { useResizeObserver } from '@vueuse/core';
 import { defineComponent, ref, computed, reactive, watch, nextTick, onMounted } from 'vue-demi';
 import { TabsVariant } from './components/OrTabsV3/props.js';
-import { TabsRoot, TabsRootVariants } from './components/OrTabsV3/styles.js';
+import { TabsRoot, TabsRootVariants, TabsContainer } from './components/OrTabsV3/styles.js';
 import './components/OrIconV3/OrIcon.js';
 import './components/OrMenuV3/OrMenu.js';
 import './components/OrMenuItemV3/OrMenuItem.js';
@@ -55,6 +55,7 @@ var script = defineComponent({
     });
     // Styles
     const rootStyles = computed(() => ['or-tabs-v3', ...TabsRoot, ...TabsRootVariants[props.variant]]);
+    const containerStyles = computed(() => [...TabsContainer]);
     // State
     const tabs = reactive({
       normal: [],
@@ -124,6 +125,7 @@ var script = defineComponent({
       overflowMenu,
       overflowMenuRoot,
       rootStyles,
+      containerStyles,
       tabs,
       proxyModelValue,
       activeTab

package/dist/bundled/v3/components/OrTabsV3/OrTabs.js

@@ -1,6 +1,6 @@
-import { s as script } from '../../OrTabs.vue_vue_type_script_lang-6d47e560.js';
-export { s as default } from '../../OrTabs.vue_vue_type_script_lang-6d47e560.js';
-import { resolveComponent, openBlock, createElementBlock, createElementVNode, mergeProps, Fragment, renderList, createBlock, withModifiers, withCtx, createTextVNode, toDisplayString, createVNode, createCommentVNode, renderSlot } from 'vue';
+import { s as script } from '../../OrTabs.vue_vue_type_script_lang-014663ff.js';
+export { s as default } from '../../OrTabs.vue_vue_type_script_lang-014663ff.js';
+import { resolveComponent, openBlock, createElementBlock, normalizeClass, createElementVNode, mergeProps, Fragment, renderList, createBlock, withModifiers, withCtx, createTextVNode, toDisplayString, createVNode, createCommentVNode, renderSlot } from 'vue';
 import '@vueuse/core';
 import 'vue-demi';
 import './props.js';
@@ -41,7 +41,9 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_OrIcon = resolveComponent("OrIcon");
   const _component_OrMenuItem = resolveComponent("OrMenuItem");
   const _component_OrMenu = resolveComponent("OrMenu");
-  return openBlock(), createElementBlock("div", null, [createElementVNode("div", mergeProps({
+  return openBlock(), createElementBlock("div", {
+    class: normalizeClass(_ctx.containerStyles)
+  }, [createElementVNode("div", mergeProps({
     ref: "root"
   }, _ctx.$attrs, {
     class: _ctx.rootStyles
@@ -85,7 +87,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.proxyModelValue))]);
+  }, 8 /* PROPS */, ["trigger"])], 64 /* STABLE_FRAGMENT */)) : createCommentVNode("v-if", true)], 16 /* FULL_PROPS */), renderSlot(_ctx.$slots, String(_ctx.proxyModelValue))], 2 /* CLASS */);
 }
 
 script.render = render;

package/dist/bundled/v3/components/OrTabsV3/OrTabs.vue.d.ts

@@ -21,6 +21,7 @@ declare const _default: import("vue-demi").DefineComponent<{
     overflowMenu: import("vue-demi").Ref<any>;
     overflowMenuRoot: import("vue-demi").ComputedRef<any>;
     rootStyles: import("vue-demi").ComputedRef<string[]>;
+    containerStyles: import("vue-demi").ComputedRef<string[]>;
     tabs: {
         normal: {
             value: string | number;

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

@@ -1,5 +1,5 @@
 export { TabsVariant } from './props.js';
-export { s as OrTabsV3 } from '../../OrTabs.vue_vue_type_script_lang-6d47e560.js';
+export { s as OrTabsV3 } from '../../OrTabs.vue_vue_type_script_lang-014663ff.js';
 import '@vueuse/core';
 import 'vue-demi';
 import './styles.js';

package/dist/bundled/v3/components/OrTabsV3/styles.d.ts

@@ -1,3 +1,4 @@
 import { TabsVariant } from './props';
 export declare const TabsRoot: string[];
 export declare const TabsRootVariants: Record<TabsVariant, string[]>;
+export declare const TabsContainer: string[];

package/dist/bundled/v3/components/OrTabsV3/styles.js

@@ -15,5 +15,10 @@ const TabsRootVariants = {
   // Layout
   'auto-cols-auto']
 };
+const TabsContainer = [
+// Layout
+'layout-column',
+// Spacing
+'gap-lg'];
 
-export { TabsRoot, TabsRootVariants };
+export { TabsContainer, TabsRoot, TabsRootVariants };

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

@@ -131,7 +131,7 @@ export { s as OrTab } from '../OrTab.vue_vue_type_script_lang-71e4fa50.js';
 export { s as OrTabHeaderItem } from '../OrTabHeaderItem.vue_vue_type_script_lang-29f331ec.js';
 export { s as OrTabV3 } from '../OrTab.vue_vue_type_script_lang-79f2f523.js';
 export { s as OrTabs } from '../OrTabs.vue_vue_type_script_lang-5836b8bd.js';
-export { s as OrTabsV3 } from '../OrTabs.vue_vue_type_script_lang-6d47e560.js';
+export { s as OrTabsV3 } from '../OrTabs.vue_vue_type_script_lang-014663ff.js';
 export { TabsVariant } from './OrTabsV3/props.js';
 export { s as OrTag } from '../OrTag.vue_vue_type_script_lang-4e98d8a0.js';
 export { s as OrTagV3 } from '../OrTag.vue_vue_type_script_lang-8643b784.js';

package/dist/bundled/v3/index.js

@@ -110,7 +110,7 @@ export { s as OrTab } from './OrTab.vue_vue_type_script_lang-71e4fa50.js';
 import './components/OrTabs/OrTabs.js';
 export { s as OrTabs } from './OrTabs.vue_vue_type_script_lang-5836b8bd.js';
 import './components/OrTabsV3/OrTabs.js';
-export { s as OrTabsV3 } from './OrTabs.vue_vue_type_script_lang-6d47e560.js';
+export { s as OrTabsV3 } from './OrTabs.vue_vue_type_script_lang-014663ff.js';
 import './components/OrTag/OrTag.js';
 export { s as OrTag } from './OrTag.vue_vue_type_script_lang-4e98d8a0.js';
 import './components/OrTagsV3/OrTags.js';

package/dist/esm/v2/{OrTabs-87069663.js → OrTabs-dd38e4ab.js}

@@ -30,6 +30,11 @@ const TabsRootVariants = {
   // Layout
   'auto-cols-auto']
 };
+const TabsContainer = [
+// Layout
+'layout-column',
+// Spacing
+'gap-lg'];
 
 var script = defineComponent({
   name: 'OrTabs',
@@ -75,6 +80,7 @@ var script = defineComponent({
     });
     // Styles
     const rootStyles = computed(() => ['or-tabs-v3', ...TabsRoot, ...TabsRootVariants[props.variant]]);
+    const containerStyles = computed(() => [...TabsContainer]);
     // State
     const tabs = reactive({
       normal: [],
@@ -144,6 +150,7 @@ var script = defineComponent({
       overflowMenu,
       overflowMenuRoot,
       rootStyles,
+      containerStyles,
       tabs,
       proxyModelValue,
       activeTab
@@ -159,7 +166,9 @@ var __vue_render__ = function () {
   var _vm = this;
   var _h = _vm.$createElement;
   var _c = _vm._self._c || _h;
-  return _c('div', [_c('div', _vm._b({
+  return _c('div', {
+    class: _vm.containerStyles
+  }, [_c('div', _vm._b({
     ref: "root",
     class: _vm.rootStyles
   }, 'div', _vm.$attrs, false), [_vm._l(_vm.tabs.normal, function (tab) {

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

@@ -96,7 +96,7 @@ export { _ as OrTab } from '../OrTab-8dfdeca0.js';
 export { _ as OrTabHeaderItem } from '../OrTabHeaderItem-46947417.js';
 export { _ as OrTabV3 } from '../OrTab-5b198746.js';
 export { _ as OrTabs } from '../OrTabs-1b314eeb.js';
-export { _ as OrTabsV3, T as TabsVariant } from '../OrTabs-87069663.js';
+export { _ as OrTabsV3, T as TabsVariant } from '../OrTabs-dd38e4ab.js';
 export { _ as OrTag } from '../OrTag-8ded4261.js';
 export { _ as OrTagV3, a as TagColor, T as TagVariant } from '../OrTag-843ec724.js';
 export { _ as OrTagsV3 } from '../OrTags-4ffaa13b.js';

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

@@ -16,6 +16,7 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
     } | {}, true> | undefined>;
     overflowMenuRoot: import("@vue/composition-api").ComputedRef<undefined>;
     rootStyles: import("@vue/composition-api").ComputedRef<string[]>;
+    containerStyles: import("@vue/composition-api").ComputedRef<string[]>;
     tabs: {
         normal: {
             value: string | number;
@@ -75,6 +76,7 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
     } | {}, true> | undefined>;
     overflowMenuRoot: import("@vue/composition-api").ComputedRef<undefined>;
     rootStyles: import("@vue/composition-api").ComputedRef<string[]>;
+    containerStyles: import("@vue/composition-api").ComputedRef<string[]>;
     tabs: {
         normal: {
             value: string | number;

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

@@ -1,4 +1,4 @@
-export { _ as OrTabsV3, T as TabsVariant } from '../../OrTabs-87069663.js';
+export { _ as OrTabsV3, T as TabsVariant } from '../../OrTabs-dd38e4ab.js';
 import '@vueuse/core';
 import 'vue-demi';
 import '../../OrIcon-d35a84d8.js';

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

@@ -1,3 +1,4 @@
 import { TabsVariant } from './props';
 export declare const TabsRoot: string[];
 export declare const TabsRootVariants: Record<TabsVariant, string[]>;
+export declare const TabsContainer: string[];

package/dist/esm/v2/index.js

@@ -96,7 +96,7 @@ export { _ as OrTab } from './OrTab-8dfdeca0.js';
 export { _ as OrTabHeaderItem } from './OrTabHeaderItem-46947417.js';
 export { _ as OrTabV3 } from './OrTab-5b198746.js';
 export { _ as OrTabs } from './OrTabs-1b314eeb.js';
-export { _ as OrTabsV3, T as TabsVariant } from './OrTabs-87069663.js';
+export { _ as OrTabsV3, T as TabsVariant } from './OrTabs-dd38e4ab.js';
 export { _ as OrTag } from './OrTag-8ded4261.js';
 export { _ as OrTagV3, a as TagColor, T as TagVariant } from './OrTag-843ec724.js';
 export { _ as OrTagsV3 } from './OrTags-4ffaa13b.js';

package/dist/esm/v3/{OrTabs-3d9c1a8b.js → OrTabs-d058761d.js}

@@ -5,7 +5,7 @@ import { s as script$3 } from './OrMenuItem-dbee450f.js';
 import { s as script$2 } from './OrMenu-bce8349d.js';
 import './OrPopover-84d5b844.js';
 import { s as script$4 } from './OrTab-f7e51ffb.js';
-import { resolveComponent, openBlock, createElementBlock, createElementVNode, mergeProps, Fragment, renderList, createBlock, withModifiers, withCtx, createTextVNode, toDisplayString, createVNode, createCommentVNode, renderSlot } from 'vue';
+import { resolveComponent, openBlock, createElementBlock, normalizeClass, createElementVNode, mergeProps, Fragment, renderList, createBlock, withModifiers, withCtx, createTextVNode, toDisplayString, createVNode, createCommentVNode, renderSlot } from 'vue';
 
 var TabsVariant;
 (function (TabsVariant) {
@@ -30,6 +30,11 @@ const TabsRootVariants = {
   // Layout
   'auto-cols-auto']
 };
+const TabsContainer = [
+// Layout
+'layout-column',
+// Spacing
+'gap-lg'];
 
 var script = defineComponent({
   name: 'OrTabs',
@@ -75,6 +80,7 @@ var script = defineComponent({
     });
     // Styles
     const rootStyles = computed(() => ['or-tabs-v3', ...TabsRoot, ...TabsRootVariants[props.variant]]);
+    const containerStyles = computed(() => [...TabsContainer]);
     // State
     const tabs = reactive({
       normal: [],
@@ -144,6 +150,7 @@ var script = defineComponent({
       overflowMenu,
       overflowMenuRoot,
       rootStyles,
+      containerStyles,
       tabs,
       proxyModelValue,
       activeTab
@@ -156,7 +163,9 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_OrIcon = resolveComponent("OrIcon");
   const _component_OrMenuItem = resolveComponent("OrMenuItem");
   const _component_OrMenu = resolveComponent("OrMenu");
-  return openBlock(), createElementBlock("div", null, [createElementVNode("div", mergeProps({
+  return openBlock(), createElementBlock("div", {
+    class: normalizeClass(_ctx.containerStyles)
+  }, [createElementVNode("div", mergeProps({
     ref: "root"
   }, _ctx.$attrs, {
     class: _ctx.rootStyles
@@ -200,7 +209,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.proxyModelValue))]);
+  }, 8 /* PROPS */, ["trigger"])], 64 /* STABLE_FRAGMENT */)) : createCommentVNode("v-if", true)], 16 /* FULL_PROPS */), renderSlot(_ctx.$slots, String(_ctx.proxyModelValue))], 2 /* CLASS */);
 }
 
 script.render = render;

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

@@ -94,7 +94,7 @@ export { s as OrTab } from '../OrTab-bc98be02.js';
 export { s as OrTabHeaderItem } from '../OrTabHeaderItem-3bb0b711.js';
 export { s as OrTabV3 } from '../OrTab-f7e51ffb.js';
 export { s as OrTabs } from '../OrTabs-35a376a3.js';
-export { s as OrTabsV3, T as TabsVariant } from '../OrTabs-3d9c1a8b.js';
+export { s as OrTabsV3, T as TabsVariant } from '../OrTabs-d058761d.js';
 export { s as OrTag } from '../OrTag-2d9eacf8.js';
 export { s as OrTagV3, a as TagColor, T as TagVariant } from '../OrTag-6116c6e3.js';
 export { s as OrTagsV3 } from '../OrTags-a082de82.js';

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

@@ -21,6 +21,7 @@ declare const _default: import("vue-demi").DefineComponent<{
     overflowMenu: import("vue-demi").Ref<any>;
     overflowMenuRoot: import("vue-demi").ComputedRef<any>;
     rootStyles: import("vue-demi").ComputedRef<string[]>;
+    containerStyles: import("vue-demi").ComputedRef<string[]>;
     tabs: {
         normal: {
             value: string | number;

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

@@ -1,4 +1,4 @@
-export { s as OrTabsV3, T as TabsVariant } from '../../OrTabs-3d9c1a8b.js';
+export { s as OrTabsV3, T as TabsVariant } from '../../OrTabs-d058761d.js';
 import '@vueuse/core';
 import 'vue-demi';
 import '../../OrIcon-62793572.js';

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

@@ -1,3 +1,4 @@
 import { TabsVariant } from './props';
 export declare const TabsRoot: string[];
 export declare const TabsRootVariants: Record<TabsVariant, string[]>;
+export declare const TabsContainer: string[];

package/dist/esm/v3/index.js

@@ -94,7 +94,7 @@ export { s as OrTab } from './OrTab-bc98be02.js';
 export { s as OrTabHeaderItem } from './OrTabHeaderItem-3bb0b711.js';
 export { s as OrTabV3 } from './OrTab-f7e51ffb.js';
 export { s as OrTabs } from './OrTabs-35a376a3.js';
-export { s as OrTabsV3, T as TabsVariant } from './OrTabs-3d9c1a8b.js';
+export { s as OrTabsV3, T as TabsVariant } from './OrTabs-d058761d.js';
 export { s as OrTag } from './OrTag-2d9eacf8.js';
 export { s as OrTagV3, a as TagColor, T as TagVariant } from './OrTag-6116c6e3.js';
 export { s as OrTagsV3 } from './OrTags-a082de82.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@onereach/ui-components",
-  "version": "4.4.1",
+  "version": "4.4.2-beta.2711.0",
   "description": "Vue components library for v2/3",
   "sideEffects": false,
   "main": "./dist/auto/index.js",
@@ -153,6 +153,5 @@
       "default": "./dist/bundled/v3/components/*/index.js"
     },
     "./package.json": "./package.json"
-  },
-  "gitHead": "629822d34cc6e27098be7ee728e0277b03583324"
+  }
 }

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

@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div :class="containerStyles">
     <div
       ref="root"
       v-bind="$attrs"
@@ -52,7 +52,7 @@ import { OrMenuItemV3 as OrMenuItem } from '../or-menu-item-v3';
 import { OrMenuV3 as OrMenu } from '../or-menu-v3';
 import { OrTabV3 as OrTab } from '../or-tab-v3';
 import { TabsVariant } from './props';
-import { TabsRoot, TabsRootVariants } from './styles';
+import { TabsContainer, TabsRoot, TabsRootVariants } from './styles';
 import { TabsItem } from './types';
 
 export default defineComponent({
@@ -114,6 +114,10 @@ export default defineComponent({
       ...TabsRootVariants[props.variant],
     ]);
 
+    const containerStyles = computed(() => [
+      ...TabsContainer,
+    ]);
+
     // State
     const tabs = reactive({
       normal: [] as TabsItem[],
@@ -197,6 +201,7 @@ export default defineComponent({
       overflowMenu,
       overflowMenuRoot,
       rootStyles,
+      containerStyles,
       tabs,
       proxyModelValue,
       activeTab,

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

@@ -31,3 +31,11 @@ export const TabsRootVariants: Record<TabsVariant, string[]> = {
     'auto-cols-auto',
   ],
 };
+
+export const TabsContainer: string[] = [
+  // Layout
+  'layout-column',
+
+  // Spacing
+  'gap-lg',
+];