@onereach/ui-components 21.2.0 → 21.3.0

package/dist/esm/components/{OrEditorTabsV3-cbe58a9e.js → OrEditorTabsV3-856e42f1.js}

@@ -1,5 +1,4 @@
 import { defineComponent, ref, computed, resolveComponent, openBlock, createElementBlock, normalizeClass, renderSlot, Fragment, createVNode, withModifiers, createCommentVNode, createElementVNode, toRef, watch, renderList, createBlock, withCtx, toDisplayString, createTextVNode } from 'vue';
-import { useScroll } from '@vueuse/core';
 import { b as i, j as isVue2, r as re, l as u, n as ne } from './OrAutocompleteV3-961163d0.js';
 import { OrIconButtonV3 as script$2 } from './or-icon-button-v3/index.js';
 import { OrIconV3 as script$3 } from './or-icon-v3/index.js';
@@ -21,15 +20,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',
@@ -102,7 +105,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',
@@ -172,6 +190,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(() => {
@@ -180,7 +199,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'
@@ -189,13 +210,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');
@@ -232,11 +246,11 @@ var script = defineComponent({
       headerStyles,
       headerTabsStyles,
       contentStyles,
+      addButtonStyles,
       proxyModelValue,
       selectedItem,
       overflowItems,
       showOverflowMenu,
-      onWheel,
       open,
       close,
       isDesktop,
@@ -269,11 +283,10 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
     class: normalizeClass(_ctx.headerStyles)
   }, [createElementVNode("div", {
     ref: 'headerTabs',
-    class: normalizeClass(_ctx.headerTabsStyles),
-    onWheel: _cache[1] || (_cache[1] = withModifiers($event => _ctx.onWheel($event), ["prevent"]))
-  }, [_ctx.isDesktop ? (openBlock(true), createElementBlock(Fragment, {
+    class: normalizeClass(_ctx.headerTabsStyles)
+  }, [_ctx.isDesktop ? (openBlock(), createElementBlock(Fragment, {
     key: 0
-  }, renderList(_ctx.items, item => {
+  }, [(openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.items, item => {
     return openBlock(), createBlock(_component_OrEditorTabsItem, {
       ref_for: true,
       ref: 'editorTabsItems',
@@ -289,29 +302,43 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
       }, () => [createElementVNode("div", _hoisted_1, toDisplayString(item.label), 1 /* TEXT */)])]),
       _: 2 /* DYNAMIC */
     }, 1032 /* PROPS, DYNAMIC_SLOTS */, ["close-button", "selected", "disabled", "onClick", "onClose"]);
-  }), 128 /* KEYED_FRAGMENT */)) : createCommentVNode("v-if", true), _ctx.isMobile && _ctx.selectedItem ? (openBlock(), createBlock(_component_OrEditorTabsItem, {
+  }), 128 /* KEYED_FRAGMENT */)), _ctx.addButton && _ctx.overflow == 'wrap' ? (openBlock(), createBlock(_component_OrEditorTabsItem, {
+    key: 0,
+    "close-button": false,
+    class: normalizeClass(_ctx.addButtonStyles),
+    onClick: _cache[0] || (_cache[0] = $event => _ctx.open())
+  }, {
+    default: withCtx(() => [createVNode(_component_OrIcon, {
+      icon: 'add',
+      size: 'm',
+      class: "md:my-[1px]"
+    })]),
+    _: 1 /* STABLE */
+  }, 8 /* PROPS */, ["class"])) : createCommentVNode("v-if", true)], 64 /* STABLE_FRAGMENT */)) : createCommentVNode("v-if", true), _ctx.isMobile && _ctx.selectedItem ? (openBlock(), createBlock(_component_OrEditorTabsItem, {
     key: 1,
     class: normalizeClass(['grow']),
     "close-button": _ctx.closeButton && !_ctx.selectedItem.pinned,
     selected: true,
     disabled: _ctx.selectedItem.disabled,
-    onClose: _cache[0] || (_cache[0] = $event => _ctx.close(_ctx.selectedItem))
+    onClose: _cache[1] || (_cache[1] = $event => _ctx.close(_ctx.selectedItem))
   }, {
     default: withCtx(() => [renderSlot(_ctx.$slots, `${_ctx.selectedItem.value}-label`, {
       label: _ctx.selectedItem.label
     }, () => [createElementVNode("div", _hoisted_2, toDisplayString(_ctx.selectedItem.label), 1 /* TEXT */)])]),
     _: 3 /* FORWARDED */
-  }, 8 /* PROPS */, ["close-button", "disabled"])) : createCommentVNode("v-if", true)], 34 /* CLASS, NEED_HYDRATION */), _ctx.addButton ? (openBlock(), createBlock(_component_OrEditorTabsItem, {
+  }, 8 /* PROPS */, ["close-button", "disabled"])) : createCommentVNode("v-if", true)], 2 /* CLASS */), _ctx.addButton && (_ctx.overflow == 'scroll' || _ctx.isMobile) ? (openBlock(), createBlock(_component_OrEditorTabsItem, {
     key: 0,
     "close-button": false,
+    class: normalizeClass(_ctx.addButtonStyles),
     onClick: _cache[2] || (_cache[2] = $event => _ctx.open())
   }, {
     default: withCtx(() => [createVNode(_component_OrIcon, {
       icon: 'add',
-      size: 'm'
+      size: 'm',
+      class: "md:my-[1px]"
     })]),
     _: 1 /* STABLE */
-  })) : createCommentVNode("v-if", true), _ctx.isMobile && _ctx.items.length > 1 ? (openBlock(), createElementBlock(Fragment, {
+  }, 8 /* PROPS */, ["class"])) : createCommentVNode("v-if", true), _ctx.isMobile && _ctx.items.length > 1 ? (openBlock(), createElementBlock(Fragment, {
     key: 1
   }, [createVNode(_component_OrEditorTabsItem, {
     "close-button": false,

package/dist/esm/components/index.js

@@ -26,7 +26,7 @@ export { OrDateTimeFormatV3 } from './or-date-time-format-v3/index.js';
 export { a as OrDateTimePickerDateControl, b as OrDateTimePickerDateSelect, c as OrDateTimePickerMobileControl, d as OrDateTimePickerMonthSelect, e as OrDateTimePickerPopoverFooter, g as OrDateTimePickerPopoverHeader, l as OrDateTimePickerTimeControl, m as OrDateTimePickerTimeSelect, s as OrDateTimePickerV3, f as formatDate, i as formatMobileDate, n as formatMobileTime, k as formatTime, h as getCurrentDate, j as getNextMonthDate, o as scrollToElementWithinContainer } from './OrDateTimePickerV3-7b24568c.js';
 export { DrawerPlacement, OrDrawerV3 } from './or-drawer-v3/index.js';
 export { DropAreaSize, OrDropAreaV3, approximateFileSize } from './or-drop-area-v3/index.js';
-export { E as EditorTabsOverflow, s as OrEditorTabsV3 } from './OrEditorTabsV3-cbe58a9e.js';
+export { E as EditorTabsOverflow, s as OrEditorTabsV3 } from './OrEditorTabsV3-856e42f1.js';
 export { EmptyStateSize, OrEmptyStateV3 } from './or-empty-state-v3/index.js';
 export { OrErrorTagV3 } from './or-error-tag-v3/index.js';
 export { OrErrorV3 } from './or-error-v3/index.js';

package/dist/esm/components/or-data-grid-v3/index.js

@@ -37,7 +37,7 @@ import '../or-tags-v3/index.js';
 import '../or-button-v3/index.js';
 import '../or-tag-v3/index.js';
 import '../or-menu-v3/index.js';
-import '../OrEditorTabsV3-cbe58a9e.js';
+import '../OrEditorTabsV3-856e42f1.js';
 import '../or-expansion-panel-v3/index.js';
 import '../or-indicator-v3/index.js';
 import 'lodash/range';

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

@@ -30,11 +30,11 @@ declare const _default: import("vue").DefineComponent<{
     headerStyles: import("vue").ComputedRef<string[]>;
     headerTabsStyles: import("vue").ComputedRef<string[]>;
     contentStyles: import("vue").ComputedRef<string[]>;
+    addButtonStyles: import("vue").ComputedRef<string[]>;
     proxyModelValue: import("@onereach/ui-components-common/hooks").UseProxyModelValueReturn<EditorTabsModelValue>;
     selectedItem: import("vue").ComputedRef<EditorTabsItem | undefined>;
     overflowItems: import("vue").ComputedRef<EditorTabsItem[]>;
     showOverflowMenu: import("vue").Ref<boolean>;
-    onWheel: (event: WheelEvent) => void;
     open: () => void;
     close: (item: EditorTabsItem) => void;
     isDesktop: import("vue").ComputedRef<boolean>;

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

@@ -1,7 +1,7 @@
-export { E as EditorTabsOverflow, s as OrEditorTabsV3 } from '../OrEditorTabsV3-cbe58a9e.js';
+export { E as EditorTabsOverflow, s as OrEditorTabsV3 } from '../OrEditorTabsV3-856e42f1.js';
 import 'vue';
-import '@vueuse/core';
 import '../OrAutocompleteV3-961163d0.js';
+import '@vueuse/core';
 import '@onereach/styles/screens.json';
 import '@onereach/styles/tailwind.config.json';
 import '../or-error-v3/index.js';

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/dist/esm/components/or-select-v3/index.js

@@ -1,6 +1,6 @@
 import { defineComponent, ref, toRefs, computed, withDirectives, openBlock, createElementBlock, normalizeStyle, normalizeClass, vModelDynamic, renderSlot, watch, resolveComponent, createVNode, createSlots, withCtx, createTextVNode, toDisplayString, createElementVNode, vShow, createBlock, createCommentVNode, Fragment, getCurrentInstance, resolveDirective, withModifiers, renderList } from 'vue';
 import { r as re, l as u, F as Ft, m as d, $ as $t, s, f as c, n as ne, H as Ht, P as Pt } from '../OrAutocompleteV3-961163d0.js';
-import { l } from '../OrEditorTabsV3-cbe58a9e.js';
+import { l } from '../OrEditorTabsV3-856e42f1.js';
 import { useFocus } from '@vueuse/core';
 import { OrTagsV3 as script$5, TagsOverflow } from '../or-tags-v3/index.js';
 import { OrTooltipV3 as script$6 } from '../or-tooltip-v3/index.js';

package/dist/esm/index.js

@@ -1,5 +1,5 @@
 export { w as CODE_BACKSPACE, x as CODE_BREAK, y as CODE_DELETE, z as CODE_DOWN, A as CODE_END, B as CODE_ENTER, C as CODE_ESC, E as CODE_HOME, I as CODE_LEFT, L as CODE_PAGEDOWN, O as CODE_PAGEUP, U as CODE_RIGHT, Q as CODE_SPACE, V as CODE_UP, S as DATE_FORMAT, T as DateFormat, s as DropdownClose, f as DropdownOpen, W as HSL_LIMITS, Y as LOCALE, v as OrAutocompleteV3, Z as PLACEMENT_BOTTOM_END, _ as PLACEMENT_BOTTOM_START, a0 as PLACEMENT_LEFT_END, a1 as PLACEMENT_LEFT_START, a2 as PLACEMENT_RIGHT_END, a3 as PLACEMENT_RIGHT_START, a4 as PLACEMENT_TOP_END, a5 as PLACEMENT_TOP_START, a6 as RX_ABBREVIATION_FROM_STRING, a7 as RX_ARRAY_NOTATION, a8 as RX_BV_PREFIX, a9 as RX_DATE, aa as RX_DATE_SPLIT, ab as RX_DIGITS, ac as RX_ENCODED_COMMA, ad as RX_ENCODE_REVERSE, ae as RX_EXTENSION, af as RX_HASH, ag as RX_HASH_ID, ah as RX_HREF, ai as RX_HTML_TAGS, aj as RX_HYPHENATE, ak as RX_LONG_COLOR, al as RX_LOWER_UPPER, am as RX_NUMBER, an as RX_PLUS, ao as RX_QUERY_START, ap as RX_REGEXP_REPLACE, aq as RX_SHORT_COLOR, ar as RX_SPACES, as as RX_SPACE_SPLIT, at as RX_STAR, au as RX_START_SPACE_WORD, av as RX_TIME, aw as RX_TRIM_LEFT, ax as RX_TRIM_RIGHT, ay as RX_UNDERSCORE, az as RX_UN_KEBAB, aA as TIME_FORMAT, h as TimeFormat, P as exclude, aB as extractCssVarName, X as flattenDeep, aC as generateColorFromString, i as generateHslFromString, aD as getAbbreviation, aE as getHashOfString, aF as getPageElevations, aG as hexToRgb, D as hslToColorString, H as include, p as isAncestor, c as isArray, aH as isDescendant, $ as isEmpty, m as isEqual, l as isNil, aI as isNull, aJ as isNumber, R as isObject, aK as isString, b as isUndefined, aL as isVisible, aM as normalize, M as pxToRem, aN as requestAF, aO as rgbToHex, F as toArray, k as useControlAttributes, G as useDateFormat, J as useDateMask, K as useElevation, N as useIdAttribute, e as useLocale, q as useOverflow, t as usePopoverState, r as useProxyModelValue, n as useResponsive, u as useTheme, g as useTimeFormat, o as useTimeMask, aP as useToggle, d as useValidationAttributes } from './components/OrAutocompleteV3-961163d0.js';
-export { E as EditorTabsOverflow, s as OrEditorTabsV3, a as getItemByValue, m as getItemsByValue, l as searchItemsByLabel } from './components/OrEditorTabsV3-cbe58a9e.js';
+export { E as EditorTabsOverflow, s as OrEditorTabsV3, a as getItemByValue, m as getItemsByValue, l as searchItemsByLabel } from './components/OrEditorTabsV3-856e42f1.js';
 export { a as OrDateTimePickerDateControl, b as OrDateTimePickerDateSelect, c as OrDateTimePickerMobileControl, d as OrDateTimePickerMonthSelect, e as OrDateTimePickerPopoverFooter, g as OrDateTimePickerPopoverHeader, l as OrDateTimePickerTimeControl, m as OrDateTimePickerTimeSelect, s as OrDateTimePickerV3, p as Spacing, f as formatDate, i as formatMobileDate, n as formatMobileTime, k as formatTime, h as getCurrentDate, j as getNextMonthDate, o as scrollToElementWithinContainer } from './components/OrDateTimePickerV3-7b24568c.js';
 export { AvatarColor, AvatarSize, OrAvatarV3 } from './components/or-avatar-v3/index.js';
 export { OrButtonGroupV3 } from './components/or-button-group-v3/index.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@onereach/ui-components",
-  "version": "21.2.0",
+  "version": "21.3.0",
   "description": "Vue components library for v3",
   "license": "Apache-2.0",
   "sideEffects": false,
@@ -45,8 +45,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",
@@ -103,5 +103,5 @@
     "access": "public"
   },
   "npmUnpacked": "4.15.2",
-  "gitHead": "cd4da18127ccb1b678937431cb337c7e5b77582c"
+  "gitHead": "0562fbf641d1e41aa2243922423a78e07b11fc4e"
 }