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

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

@@ -1,10 +1,192 @@
-export { _ as default } from '../../OrFloating-0397263c.js';
-import '../../normalize-component-6e8e3d80.js';
-import '../../browser-82dea9ed.js';
-import 'vue-demi';
-import '../../floating-ui.dom.esm-83eba816.js';
-import '../OrTeleportVue2/OrTeleportVue2.js';
+import { defineComponent, ref, nextTick } from 'vue-demi';
+import { a as autoUpdate, c as computePosition, o as offset, h as hide, f as flip, s as shift } from '../../floating-ui.dom.esm-83eba816.js';
+import __vue_component__$1 from '../OrTeleportVue2/OrTeleportVue2.js';
+import { OrFloatingPlacements, OrFloatingHideStrategy } from './constants.js';
+import { getMaxZIndex, getCS } from '../../utils/functions/dom.js';
+import { n as normalizeComponent } from '../../normalize-component-6e8e3d80.js';
+import { c as createInjector } from '../../browser-82dea9ed.js';
 import 'portal-vue/dist/portal-vue.esm.js';
-import '../../constants-b4c183aa.js';
-import '../../dom-a98e78cb.js';
+import '../OrTeleport/constants.js';
 import 'lodash';
+
+var script = defineComponent({
+  name: 'OrFloating',
+  components: {
+    OrTeleport: __vue_component__$1
+  },
+  props: {
+    trigger: {
+      type: HTMLElement,
+      required: false,
+      default: null
+    },
+    placement: {
+      type: String,
+      required: false,
+      default: OrFloatingPlacements.BOTTOM
+    },
+    offset: {
+      type: Number,
+      required: false,
+      default: 0
+    },
+    isInheritingWidth: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    isHidePadded: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    hideStrategy: {
+      type: String,
+      required: false,
+      default: OrFloatingHideStrategy.REFERENCE_HIDDEN
+    },
+    isUsingFlip: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    isUsingShift: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    zIndexOffset: {
+      type: Number,
+      required: false,
+      default: 0
+    }
+  },
+  setup() {
+    const content = ref();
+    return {
+      content
+    };
+  },
+  data() {
+    return {
+      isInitialized: false,
+      cleanup: null,
+      isFlipped: false
+    };
+  },
+  computed: {
+    isVertical() {
+      return this.placement ? this.placement.includes(OrFloatingPlacements.BOTTOM) || this.placement.includes(OrFloatingPlacements.TOP) : true;
+    }
+  },
+  watch: {
+    trigger(newVal, oldVal) {
+      if (this.content) {
+        if (!oldVal && newVal && !this.isInitialized) {
+          this.initialize();
+        } else if (newVal !== oldVal && this.isInitialized && this.cleanup) {
+          this.cleanup();
+          this.initialize();
+        }
+      }
+    },
+    content(val) {
+      if (val && this.trigger && !this.isInitialized) this.initialize();
+    }
+  },
+  async mounted() {
+    if (!this.content) {
+      //ref to content is undefined in Vue 2
+      await nextTick();
+      this.$forceUpdate();
+    }
+  },
+  beforeUnmount() {
+    if (this.cleanup) this.cleanup();
+  },
+  methods: {
+    async initialize() {
+      this.cleanup = autoUpdate(this.trigger, this.content, this.updatePosition);
+      let maxZIndex = getMaxZIndex(this.trigger) + this.zIndexOffset;
+      if (maxZIndex) Object.assign(this.content.style, {
+        zIndex: maxZIndex
+      });
+      this.isInitialized = true;
+      await this.updatePosition();
+    },
+    async updatePosition() {
+      var _a, _b, _c;
+      const {
+        x,
+        y,
+        middlewareData
+      } = await computePosition(this.trigger, this.content, {
+        placement: this.placement,
+        middleware: [offset(this.offset), hide({
+          strategy: this.hideStrategy
+        }), ...(this.isUsingFlip ? [flip({
+          crossAxis: !this.isUsingShift
+        })] : []), ...(this.isUsingShift ? [shift()] : [])]
+      });
+      this.isFlipped = this.isUsingFlip && ((_c = (_b = (_a = middlewareData.flip) === null || _a === void 0 ? void 0 : _a.overflows) === null || _b === void 0 ? void 0 : _b.length) !== null && _c !== void 0 ? _c : 0) > 0;
+      const {
+        escaped,
+        referenceHidden
+      } = middlewareData.hide;
+      const hidden = this.hideStrategy === OrFloatingHideStrategy.ESCAPED ? escaped : referenceHidden;
+      Object.assign(this.content.style, {
+        left: `${x}px`,
+        top: `${y}px`,
+        visibility: hidden ? 'hidden' : 'visible'
+      });
+      if (this.isInheritingWidth) {
+        const cs = getCS(this.trigger);
+        const width = cs.width;
+        Object.assign(this.content.style, {
+          width: width
+        });
+      }
+    }
+  }
+});
+
+/* 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('or-teleport', [_c('div', {
+    ref: "content",
+    staticClass: "or-floating"
+  }, [_vm._t("default")], 2)]);
+};
+var __vue_staticRenderFns__ = [];
+
+/* style */
+const __vue_inject_styles__ = function (inject) {
+  if (!inject) return;
+  inject("data-v-05d17142_0", {
+    source: ".or-floating[data-v-05d17142]{position:absolute;z-index:1}",
+    map: undefined,
+    media: undefined
+  });
+};
+/* scoped */
+const __vue_scope_id__ = "data-v-05d17142";
+/* module identifier */
+const __vue_module_identifier__ = undefined;
+/* functional template */
+const __vue_is_functional_template__ = false;
+/* 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, createInjector, undefined, undefined);
+
+export { __vue_component__ as default };

package/dist/bundled/v2/components/OrFloating/constants.js

@@ -0,0 +1,22 @@
+var OrFloatingPlacements;
+(function (OrFloatingPlacements) {
+  OrFloatingPlacements["TOP_START"] = "top-start";
+  OrFloatingPlacements["RIGHT_START"] = "right-start";
+  OrFloatingPlacements["BOTTOM_START"] = "bottom-start";
+  OrFloatingPlacements["LEFT_START"] = "left-start";
+  OrFloatingPlacements["TOP"] = "top";
+  OrFloatingPlacements["RIGHT"] = "right";
+  OrFloatingPlacements["BOTTOM"] = "bottom";
+  OrFloatingPlacements["LEFT"] = "left";
+  OrFloatingPlacements["TOP_END"] = "top-end";
+  OrFloatingPlacements["RIGHT_END"] = "right-end";
+  OrFloatingPlacements["BOTTOM_END"] = "bottom-end";
+  OrFloatingPlacements["LEFT_END"] = "left-end";
+})(OrFloatingPlacements || (OrFloatingPlacements = {}));
+var OrFloatingHideStrategy;
+(function (OrFloatingHideStrategy) {
+  OrFloatingHideStrategy["REFERENCE_HIDDEN"] = "referenceHidden";
+  OrFloatingHideStrategy["ESCAPED"] = "escaped";
+})(OrFloatingHideStrategy || (OrFloatingHideStrategy = {}));
+
+export { OrFloatingHideStrategy, OrFloatingPlacements };

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

@@ -1,10 +1,11 @@
-export { _ as OrFloating, a as OrFloatingHideStrategy, O as OrFloatingPlacements } from '../../OrFloating-0397263c.js';
+export { default as OrFloating } from './OrFloating.js';
+export { OrFloatingHideStrategy, OrFloatingPlacements } from './constants.js';
 import 'vue-demi';
 import '../../floating-ui.dom.esm-83eba816.js';
 import '../OrTeleportVue2/OrTeleportVue2.js';
 import 'portal-vue/dist/portal-vue.esm.js';
-import '../../constants-b4c183aa.js';
+import '../OrTeleport/constants.js';
 import '../../normalize-component-6e8e3d80.js';
-import '../../dom-a98e78cb.js';
+import '../../utils/functions/dom.js';
 import 'lodash';
 import '../../browser-82dea9ed.js';

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

@@ -1,27 +1,8 @@
 import { defineComponent, ref, computed } from 'vue-demi';
-import { u as useClassAttribute } from '../../useClassAttribute-47fdb016.js';
+import { HintRoot, HintText, HintAddon } from './styles.js';
+import { useClassAttribute } from '../../hooks/useClassAttribute.js';
 import { n as normalizeComponent } from '../../normalize-component-6e8e3d80.js';
 
-const HintRoot = [
-// Layout
-'layout-row !items-start justify-between',
-// Spacing
-'gap-sm',
-// Typography
-'typography-caption-regular',
-// Theme
-'theme-foreground-outline', 'dark:theme-foreground-outline-dark'];
-const HintText = [
-// Layout
-'grow',
-// Interactivity
-'interactivity-none'];
-const HintAddon = [
-// Layout
-'layout-row empty:hidden',
-// Typography
-'whitespace-nowrap'];
-
 var script = defineComponent({
   name: 'OrHint',
   inheritAttrs: false,

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

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

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

@@ -0,0 +1,21 @@
+const HintRoot = [
+// Layout
+'layout-row !items-start justify-between',
+// Spacing
+'gap-sm',
+// Typography
+'typography-caption-regular',
+// Theme
+'theme-foreground-outline', 'dark:theme-foreground-outline-dark'];
+const HintText = [
+// Layout
+'grow',
+// Interactivity
+'interactivity-none'];
+const HintAddon = [
+// Layout
+'layout-row empty:hidden',
+// Typography
+'whitespace-nowrap'];
+
+export { HintAddon, HintRoot, HintText };

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

@@ -1,13 +1,162 @@
-export { _ as default } from '../../OrIcon-d69f7e66.js';
-import '../../normalize-component-6e8e3d80.js';
-import '../../browser-82dea9ed.js';
-import 'vue-demi';
-import 'lodash';
-import '../../px-to-rem-0b26b83e.js';
-import '../OrTooltipContent/OrTooltipContent.js';
-import '../../OrFloating-0397263c.js';
+import { defineComponent, ref } from 'vue-demi';
+import _ from 'lodash';
+import { OrIconType } from './constants.js';
+import { pxToRem } from '../../utils/functions/px-to-rem.js';
+import __vue_component__$1 from '../OrTooltipContent/OrTooltipContent.js';
+import __vue_component__$2 from '../OrFloating/OrFloating.js';
+import { OrFloatingPlacements } from '../OrFloating/constants.js';
+import { n as normalizeComponent } from '../../normalize-component-6e8e3d80.js';
+import { c as createInjector } from '../../browser-82dea9ed.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 '../../utils/functions/dom.js';
+
+var script = defineComponent({
+  name: 'OrIcon',
+  components: {
+    OrTooltipContent: __vue_component__$1,
+    OrFloating: __vue_component__$2
+  },
+  inheritAttrs: false,
+  props: {
+    iconType: {
+      type: String,
+      default: OrIconType.filled,
+      required: false
+    },
+    icon: {
+      type: String,
+      default: '',
+      required: false
+    },
+    color: {
+      type: String,
+      default: '',
+      required: false
+    },
+    tooltipText: {
+      type: String,
+      default: null,
+      required: false
+    },
+    tooltipPlacement: {
+      type: String,
+      default: OrFloatingPlacements.TOP,
+      required: false
+    },
+    isDisabled: {
+      type: Boolean,
+      default: false,
+      required: false
+    },
+    size: {
+      type: Number,
+      default: null
+    }
+  },
+  setup() {
+    const tooltipTrigger = ref();
+    return {
+      tooltipTrigger
+    };
+  },
+  data() {
+    return {
+      tooltipIsShown: false
+    };
+  },
+  computed: {
+    iconClasses() {
+      return ['or-icon', `material-icons${this.iconType === OrIconType.filled ? '' : `-${this.iconType}`}`, {
+        'is-disabled': this.isDisabled,
+        [`is-${this.color}-color`]: !!this.color,
+        'with-tooltip': !!this.tooltipText
+      }];
+    },
+    fontSize() {
+      return Number.isInteger(this.size) ? {
+        fontSize: pxToRem(this.size)
+      } : null;
+    },
+    rootClasses() {
+      return ['or-icon-root', this.$attrs.class];
+    },
+    localAttrs() {
+      return _.omit(this.$attrs, 'class');
+    }
+  },
+  methods: {
+    showTooltip() {
+      this.tooltipIsShown = true;
+    },
+    hideTooltip() {
+      this.tooltipIsShown = false;
+    }
+  }
+});
+
+/* 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('span', {
+    class: _vm.rootClasses
+  }, [_c('span', _vm._b({
+    ref: "tooltipTrigger",
+    class: _vm.iconClasses,
+    style: _vm.fontSize,
+    on: {
+      "mouseover": _vm.showTooltip,
+      "mouseleave": _vm.hideTooltip
+    }
+  }, 'span', _vm.localAttrs, false), [_vm._t("default", function () {
+    return [_vm._v(_vm._s(_vm.icon))];
+  })], 2), _vm._v(" "), _vm.tooltipText && _vm.tooltipIsShown ? _c('or-floating', {
+    attrs: {
+      "trigger": _vm.tooltipTrigger,
+      "placement": _vm.tooltipPlacement,
+      "is-using-shift": "",
+      "is-using-flip": "",
+      "offset": 8
+    }
+  }, [_c('or-tooltip-content', {
+    attrs: {
+      "content": _vm.tooltipText,
+      "placement": _vm.tooltipPlacement,
+      "is-shown": _vm.tooltipIsShown
+    }
+  })], 1) : _vm._e()], 1);
+};
+var __vue_staticRenderFns__ = [];
+
+/* style */
+const __vue_inject_styles__ = function (inject) {
+  if (!inject) return;
+  inject("data-v-1b53d778_0", {
+    source: "@keyframes spinAround-data-v-1b53d778{from{transform:rotate(0)}to{transform:rotate(359deg)}}@keyframes fade-data-v-1b53d778{from{opacity:1}to{opacity:0}}.or-icon-root[data-v-1b53d778]{position:relative;display:inline-flex}.or-icon[data-v-1b53d778]{display:inline-flex;font-size:1.25rem;color:inherit;user-select:none;transition-timing-function:var(--t-func);transition-duration:var(--t-duration);transition-property:color}.or-icon.with-tooltip[data-v-1b53d778]{cursor:pointer}.or-icon.is-primary-color[data-v-1b53d778]{color:var(--c-primary)}.or-icon.is-warning-color[data-v-1b53d778]{color:var(--c-warning)}.or-icon.is-success-color[data-v-1b53d778]{color:var(--c-success)}.or-icon.is-error-color[data-v-1b53d778]{color:var(--c-error)}.or-icon.is-neutral-0-color[data-v-1b53d778]{color:var(--c-neutral-0)}.or-icon.is-neutral-1-color[data-v-1b53d778]{color:var(--c-neutral-1)}.or-icon.is-neutral-2-color[data-v-1b53d778]{color:var(--c-neutral-2)}.or-icon.is-neutral-3-color[data-v-1b53d778]{color:var(--c-neutral-3)}.or-icon.is-neutral-4-color[data-v-1b53d778]{color:var(--c-neutral-4)}.or-icon.is-neutral-5-color[data-v-1b53d778]{color:var(--c-neutral-5)}.or-icon.is-neutral-6-color[data-v-1b53d778]{color:var(--c-neutral-6)}.or-icon.is-disabled[data-v-1b53d778],.or-icon[data-v-1b53d778]:disabled{cursor:not-allowed}",
+    map: undefined,
+    media: undefined
+  });
+};
+/* scoped */
+const __vue_scope_id__ = "data-v-1b53d778";
+/* module identifier */
+const __vue_module_identifier__ = undefined;
+/* functional template */
+const __vue_is_functional_template__ = false;
+/* 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, createInjector, undefined, undefined);
+
+export { __vue_component__ as default };

package/dist/bundled/v2/components/OrIcon/constants.js

@@ -0,0 +1,24 @@
+var OrIconColors;
+(function (OrIconColors) {
+  OrIconColors["primary"] = "primary";
+  OrIconColors["error"] = "error";
+  OrIconColors["warning"] = "warning";
+  OrIconColors["success"] = "success";
+  OrIconColors["neutral-0"] = "neutral-0";
+  OrIconColors["neutral-1"] = "neutral-1";
+  OrIconColors["neutral-2"] = "neutral-2";
+  OrIconColors["neutral-3"] = "neutral-3";
+  OrIconColors["neutral-4"] = "neutral-4";
+  OrIconColors["neutral-5"] = "neutral-5";
+  OrIconColors["neutral-6"] = "neutral-6";
+})(OrIconColors || (OrIconColors = {}));
+var OrIconType;
+(function (OrIconType) {
+  OrIconType["outline"] = "outlined";
+  OrIconType["filled"] = "filled";
+  OrIconType["rounded"] = "round";
+  OrIconType["sharp"] = "sharp";
+  OrIconType["two-tone"] = "two-tone";
+})(OrIconType || (OrIconType = {}));
+
+export { OrIconColors, OrIconType };

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

@@ -1,13 +1,15 @@
-export { _ as OrIcon, O as OrIconColors, a as OrIconType } from '../../OrIcon-d69f7e66.js';
+export { default as OrIcon } from './OrIcon.js';
+export { OrIconColors, OrIconType } from './constants.js';
 import 'vue-demi';
 import 'lodash';
-import '../../px-to-rem-0b26b83e.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';

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

@@ -1,20 +1,23 @@
 import { defineComponent } from 'vue-demi';
 import __vue_component__$3 from '../OrTooltipWrapperV2/OrTooltipWrapperV2.js';
-import { I as ICON_BUTTON_TYPE, H as HTML_BUTTON_TYPE, b as BUTTON_SIZE, a as BUTTON_COLOR } from '../../constants-c5d1139f.js';
-import { _ as __vue_component__$1 } from '../../OrIcon-d69f7e66.js';
-import { _ as __vue_component__$2 } from '../../OrLoader-003941a2.js';
-import { O as OrFloatingPlacements } from '../../OrFloating-0397263c.js';
+import { ICON_BUTTON_TYPE, HTML_BUTTON_TYPE, BUTTON_SIZE, BUTTON_COLOR } from '../OrButtonV2/constants.js';
+import __vue_component__$1 from '../OrIcon/OrIcon.js';
+import __vue_component__$2 from '../OrLoader/OrLoader.js';
+import { OrFloatingPlacements } from '../OrFloating/constants.js';
 import { n as normalizeComponent } from '../../normalize-component-6e8e3d80.js';
 import { c as createInjector } from '../../browser-82dea9ed.js';
 import '../OrTooltip/OrTooltip.js';
 import 'lodash';
 import '../OrTooltipContent/OrTooltipContent.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 '../../px-to-rem-0b26b83e.js';
+import '../OrTeleport/constants.js';
+import '../../utils/functions/dom.js';
+import '../OrIcon/constants.js';
+import '../../utils/functions/px-to-rem.js';
+import '../OrLoader/constants.js';
 
 var script = defineComponent({
   name: 'OrIconButton',

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

@@ -6,13 +6,16 @@ import 'lodash';
 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 '../../constants-c5d1139f.js';
-import '../../OrIcon-d69f7e66.js';
-import '../../px-to-rem-0b26b83e.js';
-import '../../OrLoader-003941a2.js';
+import '../OrTeleport/constants.js';
+import '../OrFloating/constants.js';
+import '../../utils/functions/dom.js';
+import '../OrButtonV2/constants.js';
+import '../OrIcon/OrIcon.js';
+import '../OrIcon/constants.js';
+import '../../utils/functions/px-to-rem.js';
+import '../OrLoader/OrLoader.js';
+import '../OrLoader/constants.js';