@onereach/ui-components 2.70.0-beta.2185.0 → 2.70.0-beta.2206.0

package/dist/bundled/v2/components/OrSwitchV3/index.js

@@ -1,7 +1,12 @@
 export { default as OrSwitchV3 } from './OrSwitchV3.js';
 import 'vue-demi';
-import '../../OrLabel-b26f4298.js';
-import '../../useClassAttribute-47fdb016.js';
+import './styles.js';
+import '../OrLabelV3/OrLabelV3.js';
+import '../OrLabelV3/props.js';
+import '../OrLabelV3/styles.js';
+import '../../hooks/useClassAttribute.js';
 import '../../normalize-component-6e8e3d80.js';
-import '../../OrLoader-5cf41b7d.js';
+import '../OrLoaderV3/OrLoaderV3.js';
+import '../OrLoaderV3/props.js';
+import '../OrLoaderV3/styles.js';
 import '../../browser-82dea9ed.js';

package/dist/bundled/{v3/OrSwitch.vue_vue_type_script_lang-088550b0.js → v2/components/OrSwitchV3/styles.js}

@@ -1,10 +1,3 @@
-import { defineComponent, getCurrentInstance, ref, computed } from 'vue-demi';
-import './components/OrLabelV3/OrLabelV3.js';
-import './components/OrLoaderV3/OrLoaderV3.js';
-import { u as useClassAttribute } from './useClassAttribute-47fdb016.js';
-import { s as script$1, L as LabelVariant } from './OrLabel.vue_vue_type_script_lang-55e01b7a.js';
-import { s as script$2 } from './OrLoader.vue_vue_type_script_lang-b8a13a32.js';
-
 const SwitchRoot = [
 // Layout
 'layout-row',
@@ -55,81 +48,4 @@ const SwitchLoaderHandle = [
 // Theme
 'after:bg-outline', 'dark:after:bg-outline-dark', 'disabled:after:bg-on-disabled', 'dark:disabled:after:bg-on-disabled-dark'];
 
-var script = defineComponent({
-  name: 'OrSwitch',
-  components: {
-    OrLabel: script$1,
-    OrLoader: script$2
-  },
-  inheritAttrs: false,
-  props: {
-    modelValue: {
-      type: [Boolean, Array],
-      default: undefined
-    },
-    value: {
-      type: [Boolean, Array],
-      default: undefined
-    },
-    inputValue: {
-      type: String,
-      default: undefined
-    },
-    label: {
-      type: String,
-      default: undefined
-    },
-    labelVariant: {
-      type: String,
-      default: LabelVariant.Toggle
-    },
-    required: {
-      type: Boolean,
-      default: false
-    },
-    disabled: {
-      type: Boolean,
-      default: false
-    },
-    loading: {
-      type: Boolean,
-      default: false
-    }
-  },
-  emits: ['update:modelValue', 'input', 'focus', 'blur'],
-  expose: ['root'],
-  setup(props, context) {
-    var _a;
-    const currentInstance = getCurrentInstance();
-    // Refs
-    const root = ref();
-    // Styles
-    const classAttribute = useClassAttribute();
-    const rootStyles = computed(() => ['or-switch', ...SwitchRoot, classAttribute.value]);
-    const controlStyles = computed(() => [...SwitchControl, ...SwitchControlHandle]);
-    const loaderStyles = computed(() => [...SwitchLoader, ...SwitchLoaderHandle]);
-    // State
-    const controlId = ref((_a = context.attrs.id) !== null && _a !== void 0 ? _a : currentInstance.uid.toString());
-    const proxyModelValue = computed({
-      get: () => {
-        var _a;
-        return (_a = props.modelValue) !== null && _a !== void 0 ? _a : props.value; // TODO: Remove Vue 2 fallback
-      },
-
-      set: value => {
-        context.emit('input', value);
-        context.emit('update:modelValue', value);
-      }
-    });
-    return {
-      root,
-      rootStyles,
-      controlStyles,
-      loaderStyles,
-      controlId,
-      proxyModelValue
-    };
-  }
-});
-
-export { script as s };
+export { SwitchControl, SwitchControlHandle, SwitchLoader, SwitchLoaderHandle, SwitchRoot };

package/dist/bundled/v2/components/OrTabV3/OrTabV3.js

@@ -1,25 +1,8 @@
 import { defineComponent, ref, computed } from 'vue-demi';
-import { u as useClassAttribute } from '../../useClassAttribute-47fdb016.js';
+import { TabRoot } from './styles.js';
+import { useClassAttribute } from '../../hooks/useClassAttribute.js';
 import { n as normalizeComponent } from '../../normalize-component-6e8e3d80.js';
 
-const TabRoot = [
-// Layout
-'layout-row justify-center',
-// Spacing
-'py-[6px]',
-// Interactivity
-'interactivity-auto',
-// Typography
-'typography-body-2-bold',
-// Theme
-'theme-foreground-secondary', 'dark:theme-foreground-secondary-dark', 'theme-border-2-transparent', 'dark:theme-border-2-transparent', 'theme-border-underline', 'dark:theme-border-underline',
-// Theme (hover)
-'hover:theme-foreground-default', 'dark:hover:theme-foreground-default-dark',
-// Theme (active)
-'active:theme-foreground-default', 'dark:active:theme-foreground-default-dark', 'active:theme-border-2-current', 'dark:active:theme-border-2-current', 'active:theme-border-underline', 'dark:active:theme-border-underline',
-// Theme (selected)
-'selected:theme-foreground-default', 'dark:selected:theme-foreground-default-dark', 'selected:theme-border-2-current', 'dark:selected:theme-border-2-current', 'selected:theme-border-underline', 'dark:selected:theme-border-underline'];
-
 var script = defineComponent({
   name: 'OrTab',
   inheritAttrs: false,

package/dist/bundled/v2/components/OrTabV3/index.js

@@ -1,4 +1,5 @@
 export { default as OrTabV3 } from './OrTabV3.js';
 import 'vue-demi';
-import '../../useClassAttribute-47fdb016.js';
+import './styles.js';
+import '../../hooks/useClassAttribute.js';
 import '../../normalize-component-6e8e3d80.js';

package/dist/bundled/{v3/OrTab.vue_vue_type_script_lang-a4c48577.js → v2/components/OrTabV3/styles.js}

@@ -1,6 +1,3 @@
-import { defineComponent, ref, computed } from 'vue-demi';
-import { u as useClassAttribute } from './useClassAttribute-47fdb016.js';
-
 const TabRoot = [
 // Layout
 'layout-row justify-center',
@@ -19,28 +16,4 @@ const TabRoot = [
 // Theme (selected)
 'selected:theme-foreground-default', 'dark:selected:theme-foreground-default-dark', 'selected:theme-border-2-current', 'dark:selected:theme-border-2-current', 'selected:theme-border-underline', 'dark:selected:theme-border-underline'];
 
-var script = defineComponent({
-  name: 'OrTab',
-  inheritAttrs: false,
-  props: {
-    selected: {
-      type: Boolean,
-      default: false
-    }
-  },
-  emits: ['click', 'focus', 'blur'],
-  expose: ['root'],
-  setup() {
-    // Refs
-    const root = ref();
-    // Styles
-    const classAttribute = useClassAttribute();
-    const rootStyles = computed(() => ['or-tab', ...TabRoot, classAttribute.value]);
-    return {
-      root,
-      rootStyles
-    };
-  }
-});
-
-export { script as s };
+export { TabRoot };

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

@@ -1,17 +1,228 @@
-export { _ as default } from '../../OrTabs-67a73c3d.js';
-import '../../normalize-component-6e8e3d80.js';
-import '@vueuse/core';
-import 'vue-demi';
-import '../../OrIcon-7e3098b7.js';
-import '../../useClassAttribute-47fdb016.js';
-import '../OrMenuV3/OrMenuV3.js';
-import '../../OrPopover-6750b9e2.js';
+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 __vue_component__$1 from '../OrIconV3/OrIconV3.js';
+import __vue_component__$2 from '../OrMenuV3/OrMenuV3.js';
+import __vue_component__$3 from '../OrMenuItemV3/OrMenuItemV3.js';
+import __vue_component__$4 from '../OrTabV3/OrTabV3.js';
+import { useClassAttribute } from '../../hooks/useClassAttribute.js';
+import { n as normalizeComponent } from '../../normalize-component-6e8e3d80.js';
+import '../OrIconV3/props.js';
+import '../OrIconV3/styles.js';
+import '../OrMenuV3/styles.js';
+import '../OrPopoverV3/OrPopoverV3.js';
 import '../../floating-ui.dom.esm-83eba816.js';
+import '../OrPopoverV3/props.js';
+import '../OrPopoverV3/styles.js';
 import '../OrBottomSheetV3/OrBottomSheetV3.js';
+import '../OrBottomSheetV3/styles.js';
 import '../OrOverlayV3/OrOverlayV3.js';
+import '../OrOverlayV3/styles.js';
 import '../OrTeleport.vue2V3/OrTeleport.vue2V3.js';
 import 'portal-vue';
-import '../../useElevation-31bfe1f6.js';
-import '../../useResponsive-a02e95b7.js';
-import '../OrMenuItemV3/OrMenuItemV3.js';
-import '../OrTabV3/OrTabV3.js';
+import '../../hooks/useElevation.js';
+import '../../utils/isVisible.js';
+import '../../hooks/useResponsive/useResponsive.js';
+import '../OrMenuItemV3/styles.js';
+import '../OrTabV3/styles.js';
+
+var script = defineComponent({
+  name: 'OrTabs',
+  components: {
+    OrIcon: __vue_component__$1,
+    OrMenu: __vue_component__$2,
+    OrMenuItem: __vue_component__$3,
+    OrTab: __vue_component__$4
+  },
+  inheritAttrs: false,
+  props: {
+    items: {
+      type: Array,
+      required: true
+    },
+    modelValue: {
+      type: [String, Number],
+      default: undefined
+    },
+    value: {
+      type: [String, Number],
+      default: undefined
+    },
+    variant: {
+      type: String,
+      default: TabsVariant.Default
+    }
+  },
+  emits: ['update:modelValue', 'input'],
+  expose: ['root'],
+  setup(props, context) {
+    // Refs
+    const root = ref();
+    const overflowTab = ref();
+    const overflowTabRoot = computed(() => {
+      var _a;
+      return (_a = overflowTab.value) === null || _a === void 0 ? void 0 : _a.root;
+    });
+    const overflowMenu = ref();
+    const overflowMenuRoot = computed(() => {
+      var _a;
+      return (_a = overflowMenu.value) === null || _a === void 0 ? void 0 : _a.root;
+    });
+    // Styles
+    const classAttribute = useClassAttribute();
+    const rootStyles = computed(() => ['or-tabs', ...TabsRoot, ...TabsRootVariants[props.variant], classAttribute.value]);
+    // State
+    const tabs = reactive({
+      normal: [],
+      hidden: []
+    });
+    const proxyModelValue = computed({
+      get: () => {
+        var _a;
+        return (_a = props.modelValue) !== null && _a !== void 0 ? _a : props.value; // TODO: Remove Vue 2 fallback
+      },
+
+      set: value => {
+        context.emit('input', value);
+        context.emit('update:modelValue', value);
+      }
+    });
+    const activeTab = computed(() => props.items.find(({
+      value
+    }) => value === proxyModelValue.value));
+    // Functions
+    function rearrangeTabs(items, activeTab, rootElement) {
+      const {
+        children
+      } = rootElement;
+      const nextNormalTabs = [...items];
+      const nextHiddenTabs = [];
+      let currentWidth = rootElement.scrollWidth;
+      [...children].reverse().forEach(element => {
+        if (currentWidth > rootElement.clientWidth) {
+          nextHiddenTabs.unshift(nextNormalTabs.pop());
+          currentWidth -= element.clientWidth + 16;
+        }
+      });
+      if (nextHiddenTabs.includes(activeTab)) {
+        nextHiddenTabs.unshift(nextNormalTabs.pop());
+        nextNormalTabs.push(...nextHiddenTabs.splice(nextHiddenTabs.indexOf(activeTab), 1));
+      }
+      return {
+        normal: nextNormalTabs,
+        hidden: nextHiddenTabs
+      };
+    }
+    // Effects
+    watch([() => props.items, activeTab, root], ([items, activeTab, rootElement]) => {
+      tabs.normal = items;
+      nextTick(() => {
+        Object.assign(tabs, rearrangeTabs(items, activeTab, rootElement));
+      });
+    });
+    // #region Resize
+    useResizeObserver(root, () => {
+      tabs.normal = props.items;
+      nextTick(() => {
+        Object.assign(tabs, rearrangeTabs(props.items, activeTab.value, root.value));
+      });
+    });
+    // #endregion
+    onMounted(() => {
+      var _a;
+      if (!proxyModelValue.value) {
+        proxyModelValue.value = (_a = props.items[0]) === null || _a === void 0 ? void 0 : _a.value;
+      }
+    });
+    return {
+      root,
+      overflowTab,
+      overflowTabRoot,
+      overflowMenu,
+      overflowMenuRoot,
+      rootStyles,
+      tabs,
+      proxyModelValue,
+      activeTab
+    };
+  }
+});
+
+/* 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', [_c('div', _vm._b({
+    ref: "root",
+    class: _vm.rootStyles
+  }, 'div', _vm.$attrs, false), [_vm._l(_vm.tabs.normal, function (tab) {
+    return _c('OrTab', {
+      key: tab.value,
+      attrs: {
+        "selected": tab.value === _vm.proxyModelValue
+      },
+      on: {
+        "click": function ($event) {
+          $event.stopPropagation();
+          _vm.proxyModelValue = tab.value;
+        }
+      }
+    }, [_vm._v("\n      " + _vm._s(tab.label) + "\n    ")]);
+  }), _vm._v(" "), _vm.tabs.hidden.length > 0 ? [_c('OrTab', {
+    ref: "overflowTab",
+    on: {
+      "click": function ($event) {
+        $event.stopPropagation();
+        return _vm.overflowMenu.open();
+      }
+    }
+  }, [_c('OrIcon', {
+    attrs: {
+      "icon": 'more_horiz',
+      "variant": 'filled-bold'
+    }
+  })], 1), _vm._v(" "), _c('OrMenu', {
+    ref: "overflowMenu",
+    attrs: {
+      "trigger": _vm.overflowTabRoot
+    }
+  }, _vm._l(_vm.tabs.hidden, function (tab) {
+    return _c('OrMenuItem', {
+      key: tab.value,
+      on: {
+        "click": function ($event) {
+          $event.stopPropagation();
+          _vm.proxyModelValue = tab.value;
+          _vm.overflowMenu.close();
+        }
+      }
+    }, [_vm._v("\n          " + _vm._s(tab.label) + "\n        ")]);
+  }), 1)] : _vm._e()], 2), _vm._v(" "), _vm._t(String(_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 };

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

@@ -1,17 +1,29 @@
-export { _ as OrTabsV3, T as TabsVariant } from '../../OrTabs-67a73c3d.js';
+export { default as OrTabsV3 } from './OrTabsV3.js';
+export { TabsVariant } from './props.js';
 import '@vueuse/core';
 import 'vue-demi';
-import '../../OrIcon-7e3098b7.js';
-import '../../useClassAttribute-47fdb016.js';
+import './styles.js';
+import '../OrIconV3/OrIconV3.js';
+import '../OrIconV3/props.js';
+import '../OrIconV3/styles.js';
+import '../../hooks/useClassAttribute.js';
 import '../../normalize-component-6e8e3d80.js';
 import '../OrMenuV3/OrMenuV3.js';
-import '../../OrPopover-6750b9e2.js';
+import '../OrMenuV3/styles.js';
+import '../OrPopoverV3/OrPopoverV3.js';
 import '../../floating-ui.dom.esm-83eba816.js';
+import '../OrPopoverV3/props.js';
+import '../OrPopoverV3/styles.js';
 import '../OrBottomSheetV3/OrBottomSheetV3.js';
+import '../OrBottomSheetV3/styles.js';
 import '../OrOverlayV3/OrOverlayV3.js';
+import '../OrOverlayV3/styles.js';
 import '../OrTeleport.vue2V3/OrTeleport.vue2V3.js';
 import 'portal-vue';
-import '../../useElevation-31bfe1f6.js';
-import '../../useResponsive-a02e95b7.js';
+import '../../hooks/useElevation.js';
+import '../../utils/isVisible.js';
+import '../../hooks/useResponsive/useResponsive.js';
 import '../OrMenuItemV3/OrMenuItemV3.js';
+import '../OrMenuItemV3/styles.js';
 import '../OrTabV3/OrTabV3.js';
+import '../OrTabV3/styles.js';

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

@@ -0,0 +1,7 @@
+var TabsVariant;
+(function (TabsVariant) {
+  TabsVariant["Default"] = "default";
+  TabsVariant["Fitted"] = "fitted";
+})(TabsVariant || (TabsVariant = {}));
+
+export { TabsVariant };

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

@@ -0,0 +1,19 @@
+const TabsRoot = [
+// Layout
+'grid', 'items-center', 'grid-flow-col',
+// Box
+'overflow-hidden',
+// Spacing
+'gap-md',
+// Theme
+'theme-border-1-outline', 'dark:theme-border-1-outline', 'theme-border-underline', 'dark:theme-border-underline'];
+const TabsRootVariants = {
+  'default': [
+  // Layout
+  'auto-cols-max'],
+  'fitted': [
+  // Layout
+  'auto-cols-auto']
+};
+
+export { TabsRoot, TabsRootVariants };

package/dist/bundled/v2/components/OrTag/OrTag.js

@@ -1,17 +1,22 @@
 import { defineComponent } from 'vue-demi';
-import { a as hexToRgb } from '../../color-1f348774.js';
-import { _ as __vue_component__$1 } from '../../OrIcon-d69f7e66.js';
+import { hexToRgb } from '../../utils/functions/color.js';
+import __vue_component__$1 from '../OrIcon/OrIcon.js';
 import { n as normalizeComponent } from '../../normalize-component-6e8e3d80.js';
 import { c as createInjector } from '../../browser-82dea9ed.js';
+import '../../utils/constants/regex.js';
+import '../../utils/functions/hash.js';
+import '../../utils/constants/color.js';
 import 'lodash';
-import '../../px-to-rem-0b26b83e.js';
+import '../OrIcon/constants.js';
+import '../../utils/functions/px-to-rem.js';
 import '../OrTooltipContent/OrTooltipContent.js';
-import '../../OrFloating-0397263c.js';
+import '../OrFloating/OrFloating.js';
 import '../../floating-ui.dom.esm-83eba816.js';
 import '../OrTeleportVue2/OrTeleportVue2.js';
 import 'portal-vue/dist/portal-vue.esm.js';
-import '../../constants-b4c183aa.js';
-import '../../dom-a98e78cb.js';
+import '../OrTeleport/constants.js';
+import '../OrFloating/constants.js';
+import '../../utils/functions/dom.js';
 
 const TAG_DEFAULT_COLOR = '#91969d'; // neutral-4
 var script = defineComponent({

package/dist/bundled/v2/components/OrTag/index.js

@@ -1,15 +1,20 @@
 export { default as OrTag } from './OrTag.js';
 import 'vue-demi';
-import '../../color-1f348774.js';
-import '../../OrIcon-d69f7e66.js';
+import '../../utils/functions/color.js';
+import '../../utils/constants/regex.js';
+import '../../utils/functions/hash.js';
+import '../../utils/constants/color.js';
+import '../OrIcon/OrIcon.js';
 import 'lodash';
-import '../../px-to-rem-0b26b83e.js';
+import '../OrIcon/constants.js';
+import '../../utils/functions/px-to-rem.js';
 import '../OrTooltipContent/OrTooltipContent.js';
 import '../../normalize-component-6e8e3d80.js';
 import '../../browser-82dea9ed.js';
-import '../../OrFloating-0397263c.js';
+import '../OrFloating/OrFloating.js';
 import '../../floating-ui.dom.esm-83eba816.js';
 import '../OrTeleportVue2/OrTeleportVue2.js';
 import 'portal-vue/dist/portal-vue.esm.js';
-import '../../constants-b4c183aa.js';
-import '../../dom-a98e78cb.js';
+import '../OrTeleport/constants.js';
+import '../OrFloating/constants.js';
+import '../../utils/functions/dom.js';