@onereach/ui-components 8.22.3-beta.4136.0 → 8.23.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@onereach/ui-components",
-  "version": "8.22.3-beta.4136.0",
+  "version": "8.23.1",
   "npmUnpacked": "4.15.2",
   "description": "Vue components library for v2/3",
   "sideEffects": false,
@@ -40,7 +40,7 @@
     "@codemirror/lang-json": "6.0.1",
     "@codemirror/lang-markdown": "6.1.1",
     "@floating-ui/dom": "1.4.2",
-    "@onereach/styles": "^6.8.2-beta.4136.0",
+    "@onereach/styles": "^6.8.1",
     "@splidejs/splide": "4.0.6",
     "@tiptap/core": "2.0.3",
     "@tiptap/extension-blockquote": "2.0.3",
@@ -177,5 +177,6 @@
       "default": "./dist/bundled/v3/components/*/index.js"
     },
     "./package.json": "./package.json"
-  }
+  },
+  "gitHead": "1024abf657bb7ccbc8bebb801a72eca1f645571a"
 }

package/src/components/index.ts

@@ -29,7 +29,6 @@ export * from './or-date-time-format-v3';
 export * from './or-date-time-picker';
 export * from './or-date-time-picker-v3';
 export * from './or-drop-area-v3';
-export * from './or-editor-tabs-v3';
 export * from './or-empty-state-v3';
 export * from './or-error';
 export * from './or-error-tag-v3';

package/src/components/or-bottom-sheet-v3/hooks/useBottomSheetSwipeState.ts

@@ -1,5 +1,5 @@
 import { ref, computed, Ref, unref } from 'vue-demi';
-import { usePointerSwipe, SwipeDirection } from '@vueuse/core';
+import { usePointerSwipe } from '@vueuse/core';
 import { useTheme } from '../../../hooks';
 import { BottomSheetVariant } from '../props';
 
@@ -32,18 +32,21 @@ function useBottomSheetSwipeState(
       }
     },
 
-    onSwipeEnd(event: PointerEvent, direction: SwipeDirection): void {
+    onSwipeEnd(event: PointerEvent, direction: string): void {
       if (isEventSkipped(event)) {
         return;
       }
+
       if (variant.value === BottomSheetVariant.Advanced) {
         switch (direction) {
-          case SwipeDirection.UP:
+          case 'up':
+          case 'UP':
             fullscreen.value = true;
 
             break;
 
-          case SwipeDirection.DOWN:
+          case 'down':
+          case 'DOWN':
             if (fullscreen.value) {
               fullscreen.value = false;
             } else {

package/src/components/or-menu-item-v3/OrMenuItem.vue

@@ -13,32 +13,22 @@
       <OrIcon v-bind="typeof icon === 'string' ? { icon } : icon" />
     </template>
 
-    <div :class="['truncate']">
+    <div :class="['truncate', 'w-full']">
       <slot />
     </div>
-
-    <template v-if="closeButton">
-      <div :class="['grow']" />
-
-      <OrIconButton
-        :icon="'close'"
-        :disabled="disabled"
-        @click.stop="$emit('close')"
-      />
-    </template>
   </div>
 </template>
 
 <script lang="ts">
 import { computed, defineComponent, PropType, ref } from 'vue-demi';
-import { OrIconButtonV3 as OrIconButton } from '../or-icon-button-v3';
 import { OrIconV3 as OrIcon } from '../or-icon-v3';
-import { MenuItem } from './styles';
+import { MenuItemRoot } from './styles';
 
 export default defineComponent({
+  name: 'OrMenuItem',
+
   components: {
     OrIcon,
-    OrIconButton,
   },
 
   props: {
@@ -47,11 +37,6 @@ export default defineComponent({
       default: undefined,
     },
 
-    closeButton: {
-      type: Boolean,
-      default: false,
-    },
-
     selected: {
       type: Boolean,
       default: false,
@@ -67,8 +52,6 @@ export default defineComponent({
     'click',
     'focus',
     'blur',
-
-    'close',
   ],
 
   expose: [
@@ -82,7 +65,7 @@ export default defineComponent({
     // Styles
     const rootStyles = computed(() => [
       'or-menu-item-v3',
-      ...MenuItem,
+      ...MenuItemRoot,
     ]);
 
     return {

package/src/components/or-menu-item-v3/styles.ts

@@ -1,4 +1,4 @@
-export const MenuItem: string[] = [
+export const MenuItemRoot: string[] = [
   // Layout
   'layout-row',
 

package/src/components/or-range-slider-v3/OrRangeSlider.vue

@@ -19,16 +19,25 @@
       <OrTooltip
         :class="['relative', 'z-10']"
         :is-open="(!isDragging && (isHoveringRail || isHoveringThumbFrom)) || (isDragging && selectedControl === 'from')"
-        :content="String(proxyModelValue[orientation.endsWith('-reversed') ? 1 : 0])"
         :placement="tooltipPlacement"
         :offset="24"
         :external-control="true"
+        v-bind="tooltip"
       >
         <div
           ref="thumbFrom"
           :class="thumbStyles"
           :disabled="disabled"
         />
+
+        <template v-slot:content>
+          <slot
+            name="tooltipContent"
+            :value="proxyModelValue[orientation.endsWith('-reversed') ? 1 : 0]"
+          >
+            {{ proxyModelValue[orientation.endsWith('-reversed') ? 1 : 0] }}
+          </slot>
+        </template>
       </OrTooltip>
 
       <div
@@ -41,16 +50,25 @@
       <OrTooltip
         :class="['relative', 'z-10']"
         :is-open="(!isDragging && (isHoveringRail || isHoveringThumbTo)) || (isDragging && selectedControl === 'to')"
-        :content="String(proxyModelValue[orientation.endsWith('-reversed') ? 0 : 1])"
         :placement="tooltipPlacement"
         :offset="24"
         :external-control="true"
+        v-bind="tooltip"
       >
         <div
           ref="thumbTo"
           :class="thumbStyles"
           :disabled="disabled"
         />
+
+        <template v-slot:content>
+          <slot
+            name="tooltipContent"
+            :value="proxyModelValue[orientation.endsWith('-reversed') ? 0 : 1]"
+          >
+            {{ proxyModelValue[orientation.endsWith('-reversed') ? 0 : 1] }}
+          </slot>
+        </template>
       </OrTooltip>
 
       <div
@@ -141,6 +159,11 @@ export default defineComponent({
       type: Boolean,
       default: () => false,
     },
+
+    tooltip: {
+      type: Object as PropType<Pick<InstanceType<typeof OrTooltip>['$props'], 'placement' | 'offset' | 'debounce'>>,
+      default: () => undefined,
+    },
   },
 
   emits: [

package/src/components/or-sidebar-v3/OrSidebar.vue

@@ -1,6 +1,6 @@
 <template>
   <OrResizeablePanel
-    :is-open="state === 'open'"
+    :is-open="isOpen"
     :width="width"
     :min-width="proxyMinWidth"
     :max-width="proxyMaxWidth"

package/src/components/or-slider-v3/OrSlider.vue

@@ -18,16 +18,25 @@
       <OrTooltip
         :class="['relative', 'z-10']"
         :is-open="isHovering || isDragging"
-        :content="String(proxyModelValue)"
         :placement="tooltipPlacement"
         :offset="24"
         :external-control="true"
+        v-bind="tooltip"
       >
         <div
           ref="thumb"
           :class="thumbStyles"
           :disabled="disabled"
         />
+
+        <template v-slot:content>
+          <slot
+            name="tooltipContent"
+            :value="proxyModelValue"
+          >
+            {{ proxyModelValue }}
+          </slot>
+        </template>
       </OrTooltip>
 
       <div
@@ -112,6 +121,11 @@ export default defineComponent({
       type: Boolean,
       default: () => false,
     },
+
+    tooltip: {
+      type: Object as PropType<Pick<InstanceType<typeof OrTooltip>['$props'], 'placement' | 'offset' | 'debounce'>>,
+      default: () => undefined,
+    },
   },
 
   emits: [

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

@@ -2,7 +2,6 @@ export interface TabsItem {
   value: string | number;
   label: string;
 
-  pinned?: boolean;
   invalid?: boolean;
   disabled?: boolean;
 }

package/dist/bundled/v2/components/OrEditorTabsV3/OrEditorTabs.js

@@ -1,370 +0,0 @@
-import { c as useScroll } from '../../index-5667a0bf.js';
-import { defineComponent, ref, computed, toRef, watch } from 'vue-demi';
-import __vue_component__$2 from '../OrIconButtonV3/OrIconButton.js';
-import { n as normalizeComponent } from '../../normalize-component-6e8e3d80.js';
-import { EditorTabsOverflow } from './props.js';
-import { EditorTabs, EditorTabsHeader, EditorTabsHeaderTabs, EditorTabsHeaderTabsOverflows, EditorTabsContent } from './styles.js';
-import __vue_component__$3 from '../OrIconV3/OrIcon.js';
-import __vue_component__$4 from '../OrMenuV3/OrMenu.js';
-import __vue_component__$5 from '../OrMenuItemV3/OrMenuItem.js';
-import { useProxyModelValue } from '../../hooks/useProxyModelValue.js';
-import useResponsive from '../../hooks/useResponsive/useResponsive.js';
-
-const EditorTabsItem = [
-// Layout
-'layout-row',
-// Interactivity
-'interactivity-click',
-// Box
-'md:max-w-[240px]',
-// Spacing
-'px-md', 'py-sm', 'gap-sm',
-// Typography
-'typography-caption-regular',
-// 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'];
-
-var script$1 = defineComponent({
-  components: {
-    OrIconButton: __vue_component__$2
-  },
-  props: {
-    closeButton: {
-      type: Boolean,
-      default: true
-    },
-    selected: {
-      type: Boolean,
-      default: false
-    },
-    disabled: {
-      type: Boolean,
-      default: false
-    }
-  },
-  emits: ['close'],
-  expose: ['root'],
-  setup() {
-    // Refs
-    const root = ref();
-    // Styles
-    const rootStyles = computed(() => ['or-editor-tabs-item-v3', ...EditorTabsItem]);
-    return {
-      root,
-      rootStyles
-    };
-  }
-});
-
-/* script */
-const __vue_script__$1 = script$1;
-
-/* template */
-var __vue_render__$1 = function () {
-  var _vm = this;
-  var _h = _vm.$createElement;
-  var _c = _vm._self._c || _h;
-  return _c('div', {
-    ref: "root",
-    class: _vm.rootStyles,
-    attrs: {
-      "selected": _vm.selected,
-      "disabled": _vm.disabled
-    }
-  }, [_vm._t("default"), _vm._v(" "), _vm.closeButton ? [_c('div', {
-    class: ['grow']
-  }), _vm._v(" "), _c('OrIconButton', {
-    attrs: {
-      "icon": 'close',
-      "disabled": _vm.disabled
-    },
-    on: {
-      "click": function ($event) {
-        $event.stopPropagation();
-        return _vm.$emit('close');
-      }
-    }
-  })] : _vm._e()], 2);
-};
-var __vue_staticRenderFns__$1 = [];
-
-/* style */
-const __vue_inject_styles__$1 = undefined;
-/* scoped */
-const __vue_scope_id__$1 = undefined;
-/* module identifier */
-const __vue_module_identifier__$1 = undefined;
-/* functional template */
-const __vue_is_functional_template__$1 = false;
-/* style inject */
-
-/* style inject SSR */
-
-/* style inject shadow dom */
-
-const __vue_component__$1 = /*#__PURE__*/normalizeComponent({
-  render: __vue_render__$1,
-  staticRenderFns: __vue_staticRenderFns__$1
-}, __vue_inject_styles__$1, __vue_script__$1, __vue_scope_id__$1, __vue_is_functional_template__$1, __vue_module_identifier__$1, false, undefined, undefined, undefined);
-var OrEditorTabsItem = __vue_component__$1;
-
-var script = defineComponent({
-  components: {
-    OrEditorTabsItem,
-    OrIcon: __vue_component__$3,
-    OrMenu: __vue_component__$4,
-    OrMenuItem: __vue_component__$5
-  },
-  model: {
-    prop: 'modelValue',
-    event: 'update:modelValue'
-  },
-  props: {
-    modelValue: {
-      type: [String, Number],
-      default: undefined
-    },
-    items: {
-      type: Array,
-      required: true
-    },
-    overflow: {
-      type: String,
-      default: () => EditorTabsOverflow.Scroll
-    },
-    addButton: {
-      type: Boolean,
-      default: true
-    },
-    closeButton: {
-      type: Boolean,
-      default: true
-    }
-  },
-  emits: ['update:modelValue', 'open', 'close'],
-  expose: ['root'],
-  setup(props, context) {
-    // Refs
-    const root = ref();
-    const headerTabs = ref();
-    // Styles
-    const rootStyles = computed(() => ['or-editor-tabs-v3', ...EditorTabs]);
-    const headerStyles = computed(() => [...EditorTabsHeader]);
-    const headerTabsStyles = computed(() => [...EditorTabsHeaderTabs, ...EditorTabsHeaderTabsOverflows[props.overflow]]);
-    const contentStyles = computed(() => [...EditorTabsContent]);
-    // State
-    const proxyModelValue = useProxyModelValue(toRef(props, 'modelValue'), context.emit);
-    const selectedItem = computed(() => {
-      return props.items.find(item => item.value === proxyModelValue.value);
-    });
-    const overflowItems = computed(() => {
-      return props.items.filter(item => item.value !== proxyModelValue.value);
-    });
-    const showOverflowMenu = ref(false);
-    const {
-      x: headerTabsScroll
-    } = useScroll(headerTabs, {
-      behavior: 'smooth'
-    });
-    // Handlers
-    function onWheel(event) {
-      // Prevent page scroll
-      event.preventDefault();
-      headerTabsScroll.value = headerTabsScroll.value + event.deltaY;
-    }
-    function onClose(item) {
-      if (item.value === proxyModelValue.value) {
-        const index = props.items.indexOf(item);
-        if (index !== -1) {
-          const nextItem = props.items[index + 1];
-          const previousItem = props.items[index - 1];
-          proxyModelValue.value = (nextItem === null || nextItem === void 0 ? void 0 : nextItem.value) || (previousItem === null || previousItem === void 0 ? void 0 : previousItem.value);
-        }
-      }
-      context.emit('close', item);
-    }
-    // Helpers
-    const {
-      isDesktop,
-      isMobile
-    } = useResponsive();
-    // Effects
-    watch(() => props.items, items => {
-      if (items.length === 1) {
-        proxyModelValue.value = items[0].value;
-      }
-    }, {
-      immediate: true
-    });
-    return {
-      root,
-      headerTabs,
-      rootStyles,
-      headerStyles,
-      headerTabsStyles,
-      contentStyles,
-      proxyModelValue,
-      selectedItem,
-      overflowItems,
-      showOverflowMenu,
-      onWheel,
-      onClose,
-      isDesktop,
-      isMobile
-    };
-  }
-});
-
-/* script */
-const __vue_script__ = script;
-
-/* template */
-var __vue_render__ = function () {
-  var _vm = this;
-  var _h = _vm.$createElement;
-  var _c = _vm._self._c || _h;
-  return _c('div', {
-    ref: "root",
-    class: _vm.rootStyles
-  }, [_c('div', {
-    class: _vm.headerStyles
-  }, [_c('div', {
-    ref: "headerTabs",
-    class: _vm.headerTabsStyles,
-    on: {
-      "wheel": function ($event) {
-        return _vm.onWheel($event);
-      }
-    }
-  }, [_vm.isDesktop ? _vm._l(_vm.items, function (item) {
-    return _c('OrEditorTabsItem', {
-      key: item.value,
-      attrs: {
-        "close-button": _vm.closeButton && !item.pinned,
-        "selected": item.value === _vm.proxyModelValue,
-        "disabled": item.disabled
-      },
-      on: {
-        "click": function ($event) {
-          _vm.proxyModelValue = item.value;
-        },
-        "close": function ($event) {
-          return _vm.onClose(item);
-        }
-      }
-    }, [_vm._t(item.value + "-label", function () {
-      return [_c('div', {
-        class: ['truncate']
-      }, [_vm._v("\n              " + _vm._s(item.label) + "\n            ")])];
-    }, {
-      "label": item.label
-    })], 2);
-  }) : _vm._e(), _vm._v(" "), _vm.isMobile && _vm.selectedItem ? [_c('OrEditorTabsItem', {
-    class: ['grow'],
-    attrs: {
-      "close-button": _vm.closeButton && !_vm.selectedItem.pinned,
-      "selected": true,
-      "disabled": _vm.selectedItem.disabled
-    },
-    on: {
-      "close": function ($event) {
-        return _vm.onClose(_vm.selectedItem);
-      }
-    }
-  }, [_vm._t(_vm.selectedItem.value + "-label", function () {
-    return [_c('div', {
-      class: ['truncate']
-    }, [_vm._v("\n              " + _vm._s(_vm.selectedItem.label) + "\n            ")])];
-  }, {
-    "label": _vm.selectedItem.label
-  })], 2)] : _vm._e()], 2), _vm._v(" "), _vm.addButton ? [_c('OrEditorTabsItem', {
-    attrs: {
-      "close-button": false
-    },
-    on: {
-      "click": function ($event) {
-        return _vm.$emit('open');
-      }
-    }
-  }, [_c('OrIcon', {
-    attrs: {
-      "icon": 'add',
-      "size": 'm'
-    }
-  })], 1)] : _vm._e(), _vm._v(" "), _vm.isMobile && _vm.items.length > 1 ? [_c('OrEditorTabsItem', {
-    attrs: {
-      "close-button": false
-    },
-    on: {
-      "click": function ($event) {
-        _vm.showOverflowMenu = true;
-      }
-    }
-  }, [_vm._v("\n        " + _vm._s(_vm.overflowItems.length) + "\n\n        "), _c('OrIcon', {
-    attrs: {
-      "icon": 'more_vert',
-      "size": 'm'
-    }
-  })], 1), _vm._v(" "), _c('OrMenu', {
-    attrs: {
-      "is-open": _vm.showOverflowMenu
-    },
-    on: {
-      "close": function ($event) {
-        _vm.showOverflowMenu = false;
-      }
-    }
-  }, _vm._l(_vm.overflowItems, function (item) {
-    return _c('OrMenuItem', {
-      key: item.value,
-      attrs: {
-        "close-button": _vm.closeButton && !item.pinned,
-        "disabled": item.disabled
-      },
-      on: {
-        "click": function ($event) {
-          _vm.proxyModelValue = item.value;
-        },
-        "close": function ($event) {
-          return _vm.onClose(item);
-        }
-      }
-    }, [_c('div', {
-      class: ['layout-row', 'gap-sm']
-    }, [_vm._t(item.value + "-label", function () {
-      return [_c('div', {
-        class: ['truncate']
-      }, [_vm._v("\n                " + _vm._s(item.label) + "\n              ")])];
-    }, {
-      "label": item.label
-    })], 2)]);
-  }), 1)] : _vm._e()], 2), _vm._v(" "), _c('div', {
-    class: _vm.contentStyles
-  }, [_vm._t(_vm.proxyModelValue)], 2)]);
-};
-var __vue_staticRenderFns__ = [];
-
-/* style */
-const __vue_inject_styles__ = undefined;
-/* scoped */
-const __vue_scope_id__ = undefined;
-/* module identifier */
-const __vue_module_identifier__ = undefined;
-/* functional template */
-const __vue_is_functional_template__ = false;
-/* style inject */
-
-/* style inject SSR */
-
-/* style inject shadow dom */
-
-const __vue_component__ = /*#__PURE__*/normalizeComponent({
-  render: __vue_render__,
-  staticRenderFns: __vue_staticRenderFns__
-}, __vue_inject_styles__, __vue_script__, __vue_scope_id__, __vue_is_functional_template__, __vue_module_identifier__, false, undefined, undefined, undefined);
-
-export { __vue_component__ as default };