@onereach/ui-components-vue2 16.2.0-beta.4827.0

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

@@ -0,0 +1,342 @@
+import { useScroll } from '@vueuse/core';
+import { defineComponent, ref, computed, toRef, watch } from 'vue';
+import { g as getItemByValue } from '../../getItemByValue-374f02b6.js';
+import '../../types/index.js';
+import '../../dom-11141778.js';
+import { i as isNil } from '../../isNull-ef42547d.js';
+import { u as useProxyModelValue } from '../../useProxyModelValue-55ed539b.js';
+import { useResponsive } from '../../hooks/useResponsive/index.js';
+import '@onereach/styles/tailwind.config.json';
+import { OrIconV3 as __vue_component__$2 } from '../or-icon-v3/index.js';
+import { OrMenuItemV3 as __vue_component__$4 } from '../or-menu-item-v3/index.js';
+import { OrMenuV3 as __vue_component__$3 } from '../or-menu-v3/index.js';
+import { OrEditorTabsItem as __vue_component__$1 } from './partials/index.js';
+import { n as normalizeComponent } from '../../normalize-component-cf2db48b.js';
+import '../../isUndefined-f78f2fdc.js';
+import 'lodash/get';
+import 'lodash/isElement';
+import '@onereach/styles/screens.json';
+import '@/constants';
+import '../or-icon-button-v3/index.js';
+import '../or-tooltip-v3/index.js';
+import '../../usePopoverState-1375352d.js';
+import '../or-popover-v3/index.js';
+import '@floating-ui/dom';
+import '../../useElevation-2bd909b2.js';
+import '../../isVisible-b09c9caa.js';
+import '../or-bottom-sheet-v3/index.js';
+import '../or-overlay-v3/index.js';
+import '../or-teleport-v3/index.js';
+import 'portal-vue';
+import '../../useTheme-4aadb85e.js';
+import '../or-popover-v3/utils/index.js';
+import '../../isAncestor-905b8d1d.js';
+
+var EditorTabsOverflow;
+(function (EditorTabsOverflow) {
+  EditorTabsOverflow["Scroll"] = "scroll";
+  EditorTabsOverflow["Wrap"] = "wrap";
+})(EditorTabsOverflow || (EditorTabsOverflow = {}));
+
+const EditorTabs = [
+// Layout
+'layout-column'];
+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'];
+const EditorTabsHeaderTabs = [
+// Layout
+'layout-row grow md:grow-0',
+// Box
+'max-w-full',
+// Theme
+'theme-divider-outline-variant', 'dark:theme-divider-outline-variant-dark'];
+const EditorTabsHeaderTabsOverflows = {
+  [EditorTabsOverflow.Scroll]: [
+  // Overflow
+  'overflow-x-auto scrollbar-hidden'],
+  [EditorTabsOverflow.Wrap]: [
+  // Layout
+  'flex-wrap']
+};
+const EditorTabsContent = [
+// Spacing
+'px-md', 'py-md',
+// Box
+'grow',
+// Theme
+'theme-background-surface-1', 'dark:theme-background-surface-1-dark'];
+
+var script = defineComponent({
+  name: 'OrEditorTabs',
+  components: {
+    OrEditorTabsItem: __vue_component__$1,
+    OrIcon: __vue_component__$2,
+    OrMenu: __vue_component__$3,
+    OrMenuItem: __vue_component__$4
+  },
+  model: {
+    prop: 'modelValue',
+    event: 'update:modelValue'
+  },
+  props: {
+    modelValue: {
+      type: undefined,
+      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();
+    const editorTabsItems = 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 !isNil(proxyModelValue.value) ? getItemByValue(proxyModelValue.value, props.items) : undefined;
+    });
+    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();
+      }
+    }, {
+      flush: 'post'
+    });
+    const overflowItems = computed(() => {
+      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');
+    }
+    function close(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,
+      editorTabsItems,
+      rootStyles,
+      headerStyles,
+      headerTabsStyles,
+      contentStyles,
+      proxyModelValue,
+      selectedItem,
+      overflowItems,
+      showOverflowMenu,
+      onWheel,
+      open,
+      close,
+      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) {
+        $event.preventDefault();
+        return _vm.onWheel($event);
+      }
+    }
+  }, [_vm.isDesktop ? _vm._l(_vm.items, function (item) {
+    return _c('OrEditorTabsItem', {
+      key: item.value,
+      ref: 'editorTabsItems',
+      refInFor: true,
+      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.close(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.close(_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.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.close(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 { EditorTabsOverflow, __vue_component__ as OrEditorTabsV3 };

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

@@ -0,0 +1,136 @@
+import { defineComponent, ref, computed } from 'vue';
+import { isVue2 } from '@/constants';
+import { OrIconButtonV3 as __vue_component__$1 } from '../../or-icon-button-v3/index.js';
+import { n as normalizeComponent } from '../../../normalize-component-cf2db48b.js';
+import '../../or-icon-v3/index.js';
+import '../../or-tooltip-v3/index.js';
+import '../../../types/index.js';
+import '../../../dom-11141778.js';
+import 'lodash/get';
+import 'lodash/isElement';
+import '@vueuse/core';
+import '../../../usePopoverState-1375352d.js';
+import '@onereach/styles/screens.json';
+import '@onereach/styles/tailwind.config.json';
+import '../../or-popover-v3/index.js';
+import '@floating-ui/dom';
+import '../../../useElevation-2bd909b2.js';
+import '../../../isVisible-b09c9caa.js';
+import '../../../hooks/useResponsive/index.js';
+import '../../or-bottom-sheet-v3/index.js';
+import '../../or-overlay-v3/index.js';
+import '../../or-teleport-v3/index.js';
+import 'portal-vue';
+import '../../../useTheme-4aadb85e.js';
+import '../../or-popover-v3/utils/index.js';
+import '../../../isAncestor-905b8d1d.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 = defineComponent({
+  name: 'OrEditorTabsItem',
+  components: {
+    OrIconButton: __vue_component__$1
+  },
+  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,
+      isVue2
+    };
+  }
+});
+
+/* 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,
+    attrs: {
+      "selected": _vm.selected,
+      "disabled": _vm.disabled
+    },
+    on: {
+      "click": function ($event) {
+        _vm.isVue2 && _vm.$emit('click', $event);
+      }
+    }
+  }, [_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__ = [];
+
+/* 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 OrEditorTabsItem };

package/dist/esm/components/or-empty-state-v3/index.js

@@ -0,0 +1,158 @@
+import { defineComponent, ref, computed } from 'vue';
+import { n as normalizeComponent } from '../../normalize-component-cf2db48b.js';
+
+var EmptyStateSize;
+(function (EmptyStateSize) {
+  EmptyStateSize["L"] = "l";
+  EmptyStateSize["M"] = "m";
+})(EmptyStateSize || (EmptyStateSize = {}));
+
+const EmptyStateRoot = [
+// Layout
+'grow', 'flex', 'flex-col', 'justify-center', 'items-center',
+// Box
+'w-full',
+// Spacing
+'gap-sm'];
+const EmptyStateImage = [
+// Spacing
+'mb-sm'];
+const EmptyStateImageSizes = {
+  [EmptyStateSize.L]: [
+  // Box
+  'h-3xl'],
+  [EmptyStateSize.M]: [
+  // Box
+  'h-2xl']
+};
+const EmptyStateHeading = [
+// Theme
+'theme-foreground-default', 'dark:theme-foreground-default-dark'];
+const EmptyStateHeadingSizes = {
+  [EmptyStateSize.L]: [
+  // Typography
+  'typography-headline-2'],
+  [EmptyStateSize.M]: [
+  // Typography
+  'typography-headline-4']
+};
+const EmptyStateText = ['text-center',
+// Theme
+'text-outline', 'dark:text-outline-dark'];
+const EmptyStateContent = EmptyStateText;
+const EmptyStateTextSizes = {
+  [EmptyStateSize.L]: [
+  // Typography
+  'typography-body-2-regular'],
+  [EmptyStateSize.M]: [
+  // Typography
+  'typography-caption-regular']
+};
+const EmptyStateContentSizes = EmptyStateTextSizes;
+
+/**
+ * The component to display when there is no content on a page,
+ * no records found or selected, or while the data is being loaded.
+ * Provides a hint to the user on what to do.
+ * Consists of text message, optional icon and optional loader.
+ */
+var script = defineComponent({
+  name: 'OrEmptyState',
+  props: {
+    /**
+     * Size of the component, affects font and icon size.
+     * Use Large if the component takes all screen space,
+     * and Medium if it is a part of the complex layout.
+     */
+    size: {
+      type: String,
+      default: () => EmptyStateSize.M
+    },
+    /**
+     * The heading of the empty state block.
+     */
+    heading: {
+      type: String,
+      default: ''
+    },
+    /**
+     * Additional text such as a hint for a user with proposed next steps.
+     */
+    text: {
+      type: String,
+      default: ''
+    },
+    /**
+     * Path to the image to display above the heading.
+     * Image height is fixed depending on `size` prop, width is undefined to preserve aspect ratio.
+     */
+    imageSrc: {
+      type: String,
+      default: undefined
+    }
+  },
+  setup(props) {
+    const root = ref();
+    const rootClasses = computed(() => ['or-empty-state-v3', ...EmptyStateRoot]);
+    const imageClasses = computed(() => ['or-empty-state_image', ...EmptyStateImage, ...EmptyStateImageSizes[props.size]]);
+    const headingClasses = computed(() => ['or-empty-state_heading', ...EmptyStateHeading, ...EmptyStateHeadingSizes[props.size]]);
+    const textClasses = computed(() => ['or-empty-state_text', ...EmptyStateText, ...EmptyStateTextSizes[props.size]]);
+    const slotClasses = computed(() => ['or-empty-state_content', ...EmptyStateContent, ...EmptyStateContentSizes[props.size]]);
+    return {
+      root,
+      rootClasses,
+      imageClasses,
+      headingClasses,
+      textClasses,
+      slotClasses
+    };
+  }
+});
+
+/* 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.rootClasses
+  }, [_vm.imageSrc ? _c('img', {
+    class: _vm.imageClasses,
+    attrs: {
+      "src": _vm.imageSrc,
+      "alt": ""
+    }
+  }) : _vm._e(), _vm._v(" "), _c('div', {
+    class: _vm.headingClasses
+  }, [_vm._v("\n    " + _vm._s(_vm.heading) + "\n  ")]), _vm._v(" "), _vm.$slots.default ? _c('div', {
+    class: _vm.slotClasses
+  }, [_vm._t("default")], 2) : _vm._e(), _vm._v(" "), _c('div', {
+    class: _vm.textClasses
+  }, [_vm._v("\n    " + _vm._s(_vm.text) + "\n  ")])]);
+};
+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 { EmptyStateSize, __vue_component__ as OrEmptyStateV3 };

package/dist/esm/components/or-error/index.js

@@ -0,0 +1,52 @@
+import { defineComponent } from 'vue';
+import { s as styleInject } from '../../style-inject.es-87955792.js';
+import { n as normalizeComponent } from '../../normalize-component-cf2db48b.js';
+
+var script = defineComponent({
+  name: 'OrError',
+  props: {
+    error: {
+      type: String,
+      default: ''
+    }
+  }
+});
+
+var css_248z = "@keyframes spinAround-data-v-5bc32500{from{transform:rotate(0)}to{transform:rotate(359deg)}}@keyframes fade-data-v-5bc32500{from{opacity:1}to{opacity:0}}.or-error[data-v-5bc32500]{font-size:var(--fs-0);line-height:var(--lh-0);color:var(--c-error);word-break:break-word}";
+styleInject(css_248z);
+
+/* 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('p', {
+    staticClass: "or-error"
+  }, [_vm._t("default", function () {
+    return [_vm._v("\n    " + _vm._s(_vm.error) + "\n  ")];
+  })], 2);
+};
+var __vue_staticRenderFns__ = [];
+
+/* style */
+const __vue_inject_styles__ = undefined;
+/* scoped */
+const __vue_scope_id__ = "data-v-5bc32500";
+/* 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 OrError };