@onereach/ui-components-vue2 21.2.0 → 21.3.0

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

@@ -1,4 +1,3 @@
-import { useScroll } from '@vueuse/core';
 import { defineComponent, ref, computed, toRef, watch } from 'vue-demi';
 import { s } from '../../helpers-368c7a99.js';
 import { a as re, n as ne } from '../../useValidationAttributes-BpeWsfb0-24439d6f.js';
@@ -10,6 +9,7 @@ import { OrIconV3 as OrIcon } from '../or-icon-v3/index.js';
 import { OrMenuV3 as OrMenu } from '../or-menu-v3/index.js';
 import { OrMenuItemV3 as OrMenuItem } from '../or-menu-item-v3/index.js';
 import '../../dom-qGGG2YCX-4d4cca6e.js';
+import '@vueuse/core';
 import '@onereach/styles/screens.json';
 import '@onereach/styles/tailwind.config.json';
 import '../or-tooltip-v3/index.js';
@@ -28,15 +28,19 @@ const EditorTabsItem = [
 // Box
 'md:max-w-[240px]',
 // Spacing
-'px-md', 'py-sm', 'gap-sm',
+'px-md', 'py-[7px]', 'gap-sm',
 // Typography
 'typography-caption-regular',
+// Border
+'border-b-1', 'border-outline-variant', 'dark:border-outline-variant-dark', 'selected:border-b-[theme(backgroundColor.surface-1)]', 'dark:selected:border-b-[theme(backgroundColor.surface-1-dark)]',
 // Theme
 'theme-foreground-outline', 'dark:theme-foreground-outline-dark',
 // Theme (hover)
 'hover:theme-foreground-primary', 'dark:hover:theme-foreground-primary-dark',
 // Theme (selected)
-'selected:theme-foreground-primary', 'dark:selected:theme-foreground-primary-dark', 'selected:theme-background-surface-1', 'dark:selected:theme-background-surface-1-dark'];
+'selected:theme-foreground-primary', 'dark:selected:theme-foreground-primary-dark', 'selected:theme-background-surface-1', 'dark:selected:theme-background-surface-1-dark',
+// FIX
+'pb-[9px]'];
 
 var script$1 = defineComponent({
   name: 'OrEditorTabsItem',
@@ -142,7 +146,22 @@ const EditorTabsHeader = [
 // Layout
 'layout-row',
 // Theme
-'theme-border-outline-variant border-b-1', 'dark:theme-border-outline-variant-dark', 'theme-divider-outline-variant', 'dark:theme-divider-outline-variant-dark'];
+'border-b-1', 'theme-border-outline-variant', 'dark:theme-border-outline-variant-dark',
+// Box
+'w-full',
+// FIX
+'mb-[-1px]'
+// adds border between tab and '+' button
+// 'theme-divider-outline-variant',
+// 'dark:theme-divider-outline-variant-dark',
+];
+const EditorTabsAddButton = [
+// Box
+'md:grow', '!max-w-full', '!p-sm',
+// Border
+'border-l-1', 'border-r-1 md:border-r-0',
+// Theme
+'border-outline-variant dark:border-outline-variant-dark'];
 const EditorTabsHeaderTabs = [
 // Layout
 'layout-row grow md:grow-0',
@@ -212,6 +231,7 @@ var script = defineComponent({
     const headerStyles = computed(() => [...EditorTabsHeader]);
     const headerTabsStyles = computed(() => [...EditorTabsHeaderTabs, ...EditorTabsHeaderTabsOverflows[props.overflow]]);
     const contentStyles = computed(() => [...EditorTabsContent]);
+    const addButtonStyles = computed(() => [...EditorTabsAddButton]);
     // State
     const proxyModelValue = re(toRef(props, 'modelValue'), context.emit);
     const selectedItem = computed(() => {
@@ -220,7 +240,9 @@ var script = defineComponent({
     watch(selectedItem, value => {
       var _a, _b, _c;
       if (value) {
-        (_c = (_b = (_a = editorTabsItems.value) === null || _a === void 0 ? void 0 : _a[props.items.indexOf(value)]) === null || _b === void 0 ? void 0 : _b.root) === null || _c === void 0 ? void 0 : _c.scrollIntoView();
+        (_c = (_b = (_a = editorTabsItems.value) === null || _a === void 0 ? void 0 : _a[props.items.indexOf(value)]) === null || _b === void 0 ? void 0 : _b.root) === null || _c === void 0 ? void 0 : _c.scrollIntoView({
+          block: 'nearest'
+        });
       }
     }, {
       flush: 'post'
@@ -229,13 +251,6 @@ var script = defineComponent({
       return props.items.filter(item => item.value !== proxyModelValue.value);
     });
     const showOverflowMenu = ref(false);
-    const {
-      x: headerTabsScroll
-    } = useScroll(headerTabs);
-    // Handlers
-    function onWheel(event) {
-      headerTabsScroll.value = headerTabsScroll.value + event.deltaY;
-    }
     // Methods
     function open() {
       context.emit('open');
@@ -272,11 +287,11 @@ var script = defineComponent({
       headerStyles,
       headerTabsStyles,
       contentStyles,
+      addButtonStyles,
       proxyModelValue,
       selectedItem,
       overflowItems,
       showOverflowMenu,
-      onWheel,
       open,
       close,
       isDesktop,
@@ -300,14 +315,8 @@ var __vue_render__ = function () {
     class: _vm.headerStyles
   }, [_c('div', {
     ref: 'headerTabs',
-    class: _vm.headerTabsStyles,
-    on: {
-      "wheel": function ($event) {
-        $event.preventDefault();
-        return _vm.onWheel($event);
-      }
-    }
-  }, [_vm.isDesktop ? _vm._l(_vm.items, function (item) {
+    class: _vm.headerTabsStyles
+  }, [_vm.isDesktop ? [_vm._l(_vm.items, function (item) {
     return _c('OrEditorTabsItem', {
       key: item.value,
       ref: 'editorTabsItems',
@@ -332,7 +341,23 @@ var __vue_render__ = function () {
     }, {
       "label": item.label
     })], 2);
-  }) : _vm._e(), _vm._v(" "), _vm.isMobile && _vm.selectedItem ? [_c('OrEditorTabsItem', {
+  }), _vm._v(" "), _vm.addButton && _vm.overflow == 'wrap' ? _c('OrEditorTabsItem', {
+    class: _vm.addButtonStyles,
+    attrs: {
+      "close-button": false
+    },
+    on: {
+      "click": function ($event) {
+        return _vm.open();
+      }
+    }
+  }, [_c('OrIcon', {
+    staticClass: "md:my-[1px]",
+    attrs: {
+      "icon": 'add',
+      "size": 'm'
+    }
+  })], 1) : _vm._e()] : _vm._e(), _vm._v(" "), _vm.isMobile && _vm.selectedItem ? [_c('OrEditorTabsItem', {
     class: ['grow'],
     attrs: {
       "close-button": _vm.closeButton && !_vm.selectedItem.pinned,
@@ -350,7 +375,8 @@ var __vue_render__ = function () {
     }, [_vm._v("\n              " + _vm._s(_vm.selectedItem.label) + "\n            ")])];
   }, {
     "label": _vm.selectedItem.label
-  })], 2)] : _vm._e()], 2), _vm._v(" "), _vm.addButton ? [_c('OrEditorTabsItem', {
+  })], 2)] : _vm._e()], 2), _vm._v(" "), _vm.addButton && (_vm.overflow == 'scroll' || _vm.isMobile) ? [_c('OrEditorTabsItem', {
+    class: _vm.addButtonStyles,
     attrs: {
       "close-button": false
     },
@@ -360,6 +386,7 @@ var __vue_render__ = function () {
       }
     }
   }, [_c('OrIcon', {
+    staticClass: "md:my-[1px]",
     attrs: {
       "icon": 'add',
       "size": 'm'

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

@@ -1,6 +1,7 @@
 import { EditorTabsOverflow } from './props';
 export declare const EditorTabs: string[];
 export declare const EditorTabsHeader: string[];
+export declare const EditorTabsAddButton: string[];
 export declare const EditorTabsHeaderTabs: string[];
 export declare const EditorTabsHeaderTabsOverflows: Record<EditorTabsOverflow, string[]>;
 export declare const EditorTabsContent: string[];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@onereach/ui-components-vue2",
-  "version": "21.2.0",
+  "version": "21.3.0",
   "description": "Vue components library for v2",
   "license": "Apache-2.0",
   "sideEffects": false,
@@ -40,8 +40,8 @@
     "@codemirror/view": "^6",
     "@floating-ui/dom": "1.5.3",
     "@lezer/highlight": "*",
-    "@onereach/styles": "^21.2.0",
-    "@onereach/ui-components-common": "^21.2.0",
+    "@onereach/styles": "^21.3.0",
+    "@onereach/ui-components-common": "^21.3.0",
     "@splidejs/splide": "4.0.6",
     "@tiptap/core": "2.0.3",
     "@tiptap/extension-blockquote": "2.0.3",
@@ -105,5 +105,5 @@
     "access": "public"
   },
   "npmUnpacked": "4.15.2",
-  "gitHead": "cd4da18127ccb1b678937431cb337c7e5b77582c"
+  "gitHead": "0562fbf641d1e41aa2243922423a78e07b11fc4e"
 }