@onereach/ui-components 6.0.0 → 6.0.1-beta.3229.0

package/dist/esm/v2/{OrSidebar-26c90771.js → OrSidebar-021d9e3f.js}

@@ -9,7 +9,7 @@ const SidebarRoot = [
 // Layout
 'flex', 'flex-row', 'shrink-0',
 // Box
-'min-w-0', 'h-full', 'p-0',
+'min-w-0', 'min-h-0', 'h-full', 'p-0',
 // Theme
 'bg-background', 'dark:bg-background-dark'];
 const SidebarBar = [

package/dist/esm/v2/{OrTabs-1904e6dc.js → OrTabs-863901b6.js}

@@ -20,7 +20,7 @@ const TabsRoot = [
 // Layout
 'grid', 'grid-flow-col', 'items-center',
 // Box
-'overflow-hidden',
+'overflow-hidden', 'flex-shrink-0',
 // Spacing
 'gap-lg',
 // Theme
@@ -36,8 +36,15 @@ const TabsRootVariants = {
 const TabsContainer = [
 // Layout
 'layout-column',
+// Box
+'h-full', 'overflow-hidden',
 // Spacing
 'gap-lg'];
+const TabsContent = [
+// Layout
+'grow',
+// box
+'h-full', 'overflow-auto'];
 
 var script = defineComponent({
   name: 'OrTabs',
@@ -84,6 +91,7 @@ var script = defineComponent({
     // Styles
     const rootStyles = computed(() => ['or-tabs-v3', ...TabsRoot, ...TabsRootVariants[props.variant]]);
     const containerStyles = computed(() => [...TabsContainer]);
+    const contentStyles = computed(() => [...TabsContent]);
     // State
     const tabs = reactive({
       normal: [],
@@ -149,6 +157,7 @@ var script = defineComponent({
       overflowMenuRoot,
       rootStyles,
       containerStyles,
+      contentStyles,
       tabs,
       proxyModelValue,
       activeTab
@@ -211,7 +220,9 @@ var __vue_render__ = function () {
         }
       }
     }, [_vm._v("\n          " + _vm._s(tab.label) + "\n        ")]);
-  }), 1)] : _vm._e()], 2), _vm._v(" "), _vm._t(String(_vm.proxyModelValue))], 2);
+  }), 1)] : _vm._e()], 2), _vm._v(" "), _c('div', {
+    class: _vm.contentStyles
+  }, [_vm._t(String(_vm.proxyModelValue))], 2)]);
 };
 var __vue_staticRenderFns__ = [];
 

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

@@ -85,7 +85,7 @@ export { _ as OrSegmentedControlV3, S as SegmentedControlSize } from '../OrSegme
 export { _ as OrSelect } from '../OrSelect-c0d04cf6.js';
 export { _ as OrSelectV3 } from '../OrSelect-f25ad0cf.js';
 export { _ as OrSidebar, O as OrSidebarSide } from '../OrSidebar-c56a9221.js';
-export { _ as OrSidebarV3 } from '../OrSidebar-26c90771.js';
+export { _ as OrSidebarV3 } from '../OrSidebar-021d9e3f.js';
 export { O as OrSidebarPlacement } from '../OrSidebarCollapseButton-a0bdec50.js';
 export { _ as OrSkeletonCircle } from '../OrSkeletonCircle-c4bf0e34.js';
 export { _ as OrSkeletonRect } from '../OrSkeletonRect-79162a84.js';
@@ -103,7 +103,7 @@ export { _ as OrTab } from '../OrTab-58821c9b.js';
 export { _ as OrTabHeaderItem } from '../OrTabHeaderItem-424f2986.js';
 export { _ as OrTabV3 } from '../OrTab-88036fe9.js';
 export { _ as OrTabs } from '../OrTabs-62e7e478.js';
-export { _ as OrTabsV3, T as TabsVariant } from '../OrTabs-1904e6dc.js';
+export { _ as OrTabsV3, T as TabsVariant } from '../OrTabs-863901b6.js';
 export { _ as OrTag } from '../OrTag-b5803a20.js';
 export { _ as OrTagInputV3 } from '../OrTagInput-572e89c9.js';
 export { _ as OrTagV3, a as TagColor, T as TagVariant } from '../OrTag-03166a8f.js';

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

@@ -1,4 +1,4 @@
-export { _ as OrSidebarV3 } from '../../OrSidebar-26c90771.js';
+export { _ as OrSidebarV3 } from '../../OrSidebar-021d9e3f.js';
 export { O as OrSidebarPlacement } from '../../OrSidebarCollapseButton-a0bdec50.js';
 import '@vueuse/core';
 import 'vue-demi';

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

@@ -17,6 +17,7 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
     overflowMenuRoot: import("@vue/composition-api").ComputedRef<undefined>;
     rootStyles: import("@vue/composition-api").ComputedRef<string[]>;
     containerStyles: import("@vue/composition-api").ComputedRef<string[]>;
+    contentStyles: import("@vue/composition-api").ComputedRef<string[]>;
     tabs: {
         normal: {
             value: string | number;
@@ -77,6 +78,7 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
     overflowMenuRoot: import("@vue/composition-api").ComputedRef<undefined>;
     rootStyles: import("@vue/composition-api").ComputedRef<string[]>;
     containerStyles: import("@vue/composition-api").ComputedRef<string[]>;
+    contentStyles: 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-1904e6dc.js';
+export { _ as OrTabsV3, T as TabsVariant } from '../../OrTabs-863901b6.js';
 import '@vueuse/core';
 import 'vue-demi';
 import '../../useProxyModelValue-940010d2.js';

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

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

package/dist/esm/v2/index.js

@@ -85,7 +85,7 @@ export { _ as OrSegmentedControlV3, S as SegmentedControlSize } from './OrSegmen
 export { _ as OrSelect } from './OrSelect-c0d04cf6.js';
 export { _ as OrSelectV3 } from './OrSelect-f25ad0cf.js';
 export { _ as OrSidebar, O as OrSidebarSide } from './OrSidebar-c56a9221.js';
-export { _ as OrSidebarV3 } from './OrSidebar-26c90771.js';
+export { _ as OrSidebarV3 } from './OrSidebar-021d9e3f.js';
 export { O as OrSidebarPlacement } from './OrSidebarCollapseButton-a0bdec50.js';
 export { _ as OrSkeletonCircle } from './OrSkeletonCircle-c4bf0e34.js';
 export { _ as OrSkeletonRect } from './OrSkeletonRect-79162a84.js';
@@ -103,7 +103,7 @@ export { _ as OrTab } from './OrTab-58821c9b.js';
 export { _ as OrTabHeaderItem } from './OrTabHeaderItem-424f2986.js';
 export { _ as OrTabV3 } from './OrTab-88036fe9.js';
 export { _ as OrTabs } from './OrTabs-62e7e478.js';
-export { _ as OrTabsV3, T as TabsVariant } from './OrTabs-1904e6dc.js';
+export { _ as OrTabsV3, T as TabsVariant } from './OrTabs-863901b6.js';
 export { _ as OrTag } from './OrTag-b5803a20.js';
 export { _ as OrTagInputV3 } from './OrTagInput-572e89c9.js';
 export { _ as OrTagV3, a as TagColor, T as TagVariant } from './OrTag-03166a8f.js';

package/dist/esm/v3/{OrSidebar-196a0117.js → OrSidebar-53853f20.js}

@@ -9,7 +9,7 @@ const SidebarRoot = [
 // Layout
 'flex', 'flex-row', 'shrink-0',
 // Box
-'min-w-0', 'h-full', 'p-0',
+'min-w-0', 'min-h-0', 'h-full', 'p-0',
 // Theme
 'bg-background', 'dark:bg-background-dark'];
 const SidebarBar = [

package/dist/esm/v3/{OrTabs-7d2f3587.js → OrTabs-166b8876.js}

@@ -20,7 +20,7 @@ const TabsRoot = [
 // Layout
 'grid', 'grid-flow-col', 'items-center',
 // Box
-'overflow-hidden',
+'overflow-hidden', 'flex-shrink-0',
 // Spacing
 'gap-lg',
 // Theme
@@ -36,8 +36,15 @@ const TabsRootVariants = {
 const TabsContainer = [
 // Layout
 'layout-column',
+// Box
+'h-full', 'overflow-hidden',
 // Spacing
 'gap-lg'];
+const TabsContent = [
+// Layout
+'grow',
+// box
+'h-full', 'overflow-auto'];
 
 var script = defineComponent({
   name: 'OrTabs',
@@ -84,6 +91,7 @@ var script = defineComponent({
     // Styles
     const rootStyles = computed(() => ['or-tabs-v3', ...TabsRoot, ...TabsRootVariants[props.variant]]);
     const containerStyles = computed(() => [...TabsContainer]);
+    const contentStyles = computed(() => [...TabsContent]);
     // State
     const tabs = reactive({
       normal: [],
@@ -149,6 +157,7 @@ var script = defineComponent({
       overflowMenuRoot,
       rootStyles,
       containerStyles,
+      contentStyles,
       tabs,
       proxyModelValue,
       activeTab
@@ -207,7 +216,9 @@ 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))], 2 /* CLASS */);
+  }, 8 /* PROPS */, ["trigger"])], 64 /* STABLE_FRAGMENT */)) : createCommentVNode("v-if", true)], 16 /* FULL_PROPS */), createElementVNode("div", {
+    class: normalizeClass(_ctx.contentStyles)
+  }, [renderSlot(_ctx.$slots, String(_ctx.proxyModelValue))], 2 /* CLASS */)], 2 /* CLASS */);
 }
 
 script.render = render;

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

@@ -82,7 +82,7 @@ export { s as OrSegmentedControlV3, S as SegmentedControlSize } from '../OrSegme
 export { s as OrSelect } from '../OrSelect-9520d6e6.js';
 export { s as OrSelectV3 } from '../OrSelect-1de75c73.js';
 export { s as OrSidebar, O as OrSidebarSide } from '../OrSidebar-aaf73310.js';
-export { s as OrSidebarV3 } from '../OrSidebar-196a0117.js';
+export { s as OrSidebarV3 } from '../OrSidebar-53853f20.js';
 export { O as OrSidebarPlacement } from '../OrSidebarCollapseButton-5552cb78.js';
 export { s as OrSkeletonCircle } from '../OrSkeletonCircle-66e175a0.js';
 export { s as OrSkeletonRect } from '../OrSkeletonRect-c694574e.js';
@@ -100,7 +100,7 @@ export { s as OrTab } from '../OrTab-d8d4e871.js';
 export { s as OrTabHeaderItem } from '../OrTabHeaderItem-c2af7ca3.js';
 export { s as OrTabV3 } from '../OrTab-2d567d8e.js';
 export { s as OrTabs } from '../OrTabs-3da3ea89.js';
-export { s as OrTabsV3, T as TabsVariant } from '../OrTabs-7d2f3587.js';
+export { s as OrTabsV3, T as TabsVariant } from '../OrTabs-166b8876.js';
 export { s as OrTag } from '../OrTag-1b3b1296.js';
 export { s as OrTagInputV3 } from '../OrTagInput-a882052c.js';
 export { s as OrTagV3, a as TagColor, T as TagVariant } from '../OrTag-6d177cf7.js';

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

@@ -1,4 +1,4 @@
-export { s as OrSidebarV3 } from '../../OrSidebar-196a0117.js';
+export { s as OrSidebarV3 } from '../../OrSidebar-53853f20.js';
 export { O as OrSidebarPlacement } from '../../OrSidebarCollapseButton-5552cb78.js';
 import '@vueuse/core';
 import 'vue-demi';

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

@@ -22,6 +22,7 @@ declare const _default: import("vue-demi").DefineComponent<{
     overflowMenuRoot: import("vue-demi").ComputedRef<any>;
     rootStyles: import("vue-demi").ComputedRef<string[]>;
     containerStyles: import("vue-demi").ComputedRef<string[]>;
+    contentStyles: 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-7d2f3587.js';
+export { s as OrTabsV3, T as TabsVariant } from '../../OrTabs-166b8876.js';
 import '@vueuse/core';
 import 'vue-demi';
 import '../../useProxyModelValue-940010d2.js';

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

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

package/dist/esm/v3/index.js

@@ -82,7 +82,7 @@ export { s as OrSegmentedControlV3, S as SegmentedControlSize } from './OrSegmen
 export { s as OrSelect } from './OrSelect-9520d6e6.js';
 export { s as OrSelectV3 } from './OrSelect-1de75c73.js';
 export { s as OrSidebar, O as OrSidebarSide } from './OrSidebar-aaf73310.js';
-export { s as OrSidebarV3 } from './OrSidebar-196a0117.js';
+export { s as OrSidebarV3 } from './OrSidebar-53853f20.js';
 export { O as OrSidebarPlacement } from './OrSidebarCollapseButton-5552cb78.js';
 export { s as OrSkeletonCircle } from './OrSkeletonCircle-66e175a0.js';
 export { s as OrSkeletonRect } from './OrSkeletonRect-c694574e.js';
@@ -100,7 +100,7 @@ export { s as OrTab } from './OrTab-d8d4e871.js';
 export { s as OrTabHeaderItem } from './OrTabHeaderItem-c2af7ca3.js';
 export { s as OrTabV3 } from './OrTab-2d567d8e.js';
 export { s as OrTabs } from './OrTabs-3da3ea89.js';
-export { s as OrTabsV3, T as TabsVariant } from './OrTabs-7d2f3587.js';
+export { s as OrTabsV3, T as TabsVariant } from './OrTabs-166b8876.js';
 export { s as OrTag } from './OrTag-1b3b1296.js';
 export { s as OrTagInputV3 } from './OrTagInput-a882052c.js';
 export { s as OrTagV3, a as TagColor, T as TagVariant } from './OrTag-6d177cf7.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@onereach/ui-components",
-  "version": "6.0.0",
+  "version": "6.0.1-beta.3229.0",
   "npmUnpacked": "4.15.2",
   "description": "Vue components library for v2/3",
   "sideEffects": false,
@@ -156,6 +156,5 @@
       "default": "./dist/bundled/v3/components/*/index.js"
     },
     "./package.json": "./package.json"
-  },
-  "gitHead": "87b465acb6b53d0a451d597a3f345f44e5d12b87"
+  }
 }

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

@@ -11,6 +11,7 @@ export const SidebarRoot: string[] = [
 
   // Box
   'min-w-0',
+  'min-h-0',
   'h-full',
   'p-0',
 

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

@@ -39,8 +39,9 @@
         </OrMenu>
       </template>
     </div>
-
-    <slot :name="String(proxyModelValue)" />
+    <div :class="contentStyles">
+      <slot :name="String(proxyModelValue)" />
+    </div>
   </div>
 </template>
 
@@ -53,7 +54,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 { TabsContainer, TabsRoot, TabsRootVariants } from './styles';
+import { TabsContainer, TabsRoot, TabsRootVariants, TabsContent } from './styles';
 import { TabsItem } from './types';
 
 export default defineComponent({
@@ -119,6 +120,10 @@ export default defineComponent({
       ...TabsContainer,
     ]);
 
+    const contentStyles = computed(() => [
+      ...TabsContent,
+    ]);
+
     // State
     const tabs = reactive({
       normal: [] as TabsItem[],
@@ -197,6 +202,7 @@ export default defineComponent({
       overflowMenuRoot,
       rootStyles,
       containerStyles,
+      contentStyles,
       tabs,
       proxyModelValue,
       activeTab,

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

@@ -9,6 +9,7 @@ export const TabsRoot: string[] = [
 
   // Box
   'overflow-hidden',
+  'flex-shrink-0',
 
   // Spacing
   'gap-lg',
@@ -36,6 +37,19 @@ export const TabsContainer: string[] = [
   // Layout
   'layout-column',
 
+  // Box
+  'h-full',
+  'overflow-hidden',
+
   // Spacing
   'gap-lg',
 ];
+
+export const TabsContent: string[] = [
+  // Layout
+  'grow',
+
+  // box
+  'h-full',
+  'overflow-auto',
+];