@onereach/ui-components 3.0.2-beta.2473.0 → 3.1.0-beta.2468.0

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

@@ -0,0 +1,161 @@
+import { defineComponent, ref } from 'vue-demi';
+import _ from 'lodash';
+import __vue_component__$1 from '../OrTooltipContent/OrTooltipContent.js';
+import __vue_component__$2 from '../OrFloating/OrFloating.js';
+import { OrFloatingPlacements } from '../OrFloating/constants.js';
+import { s as styleInject } from '../../style-inject.es-4c6f2515.js';
+import { n as normalizeComponent } from '../../normalize-component-6e8e3d80.js';
+import '../../floating-ui.dom.esm-83eba816.js';
+import '../OrTeleport/OrTeleport.js';
+import 'portal-vue/dist/portal-vue.esm.js';
+import '../OrTeleport/constants.js';
+import '../../utils/functions/dom.js';
+
+var script = defineComponent({
+  name: 'OrTooltip',
+  components: {
+    OrTooltipContent: __vue_component__$1,
+    OrFloating: __vue_component__$2
+  },
+  model: {
+    prop: 'modelValue',
+    event: 'update:modelValue'
+  },
+  props: {
+    modelValue: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    isVisible: {
+      type: Boolean,
+      required: false,
+      default: null
+    },
+    placement: {
+      type: String,
+      required: false,
+      default: OrFloatingPlacements.TOP
+    },
+    content: {
+      type: String,
+      required: false,
+      default: ''
+    },
+    triggerOnParent: {
+      type: Boolean,
+      required: false,
+      default: false
+    }
+  },
+  emits: ['show', 'hide', 'update:modelValue'],
+  setup() {
+    const trigger = ref();
+    return {
+      trigger
+    };
+  },
+  data(props) {
+    return {
+      isShown: props.modelValue || props.isVisible || false
+    };
+  },
+  watch: {
+    modelValue(newValue) {
+      if (newValue !== this.isShown) {
+        this.isShown = newValue || this.isVisible || false;
+      }
+    },
+    isVisible(newIsVisible) {
+      if (newIsVisible !== this.isShown) {
+        this.isShown = this.modelValue || newIsVisible || false;
+      }
+    },
+    isShown(nv, ov) {
+      if (nv !== ov) {
+        this.$emit('update:modelValue', nv);
+        this.$emit(nv ? 'show' : 'hide');
+      }
+    }
+  },
+  beforeUnmount() {
+    this.isShown = false;
+  },
+  methods: {
+    show() {
+      if (_.isNil(this.isVisible)) this.isShown = true;
+    },
+    hide() {
+      if (_.isNil(this.isVisible)) this.isShown = false;
+    }
+  }
+});
+
+var css_248z = "@keyframes spinAround-data-v-1823d9ee{from{transform:rotate(0)}to{transform:rotate(359deg)}}@keyframes fade-data-v-1823d9ee{from{opacity:1}to{opacity:0}}.fill-parent[data-v-1823d9ee]{width:100%!important;height:100%!important}.tooltip-container[data-v-1823d9ee]{position:relative;display:inline-block;width:-moz-fit-content;width:fit-content;height:-moz-fit-content;height:fit-content}.tooltip-container.fill-parent[data-v-1823d9ee]{position:absolute;top:0;left:0}.tooltip-container .trigger[data-v-1823d9ee]{cursor:pointer}";
+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('div', {
+    staticClass: "tooltip-container",
+    class: {
+      'fill-parent': _vm.triggerOnParent
+    }
+  }, [_c('div', {
+    ref: "trigger",
+    staticClass: "trigger",
+    class: {
+      'fill-parent': _vm.triggerOnParent
+    },
+    on: {
+      "mouseover": _vm.show,
+      "mouseleave": _vm.hide
+    }
+  }, [_vm._t("default")], 2), _vm._v(" "), _vm.isShown ? _c('or-floating', {
+    attrs: {
+      "trigger": _vm.trigger,
+      "placement": _vm.placement,
+      "offset": 8,
+      "is-using-shift": "",
+      "is-using-flip": ""
+    }
+  }, [_c('or-tooltip-content', {
+    attrs: {
+      "placement": "custom",
+      "content": _vm.content
+    },
+    scopedSlots: _vm._u([{
+      key: "default",
+      fn: function (scope) {
+        return [_vm._t("content", null, null, scope)];
+      }
+    }], null, true)
+  })], 1) : _vm._e()], 1);
+};
+var __vue_staticRenderFns__ = [];
+
+/* style */
+const __vue_inject_styles__ = undefined;
+/* scoped */
+const __vue_scope_id__ = "data-v-1823d9ee";
+/* 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/OrTooltip/index.d.ts

@@ -0,0 +1,2 @@
+export { default as OrTooltip } from './OrTooltip.vue';
+export { default as OrTooltipContent } from './or-tooltip-content/OrTooltipContent.vue';

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

@@ -0,0 +1,13 @@
+export { default as OrTooltip } from './OrTooltip.js';
+export { default as OrTooltipContent } from '../OrTooltipContent/OrTooltipContent.js';
+import 'vue-demi';
+import 'lodash';
+import '../OrFloating/OrFloating.js';
+import '../../floating-ui.dom.esm-83eba816.js';
+import '../OrTeleport/OrTeleport.js';
+import 'portal-vue/dist/portal-vue.esm.js';
+import '../OrTeleport/constants.js';
+import '../../normalize-component-6e8e3d80.js';
+import '../OrFloating/constants.js';
+import '../../utils/functions/dom.js';
+import '../../style-inject.es-4c6f2515.js';

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

@@ -0,0 +1,71 @@
+import { defineComponent } from 'vue-demi';
+import _ from 'lodash';
+import { s as styleInject } from '../../style-inject.es-4c6f2515.js';
+import { n as normalizeComponent } from '../../normalize-component-6e8e3d80.js';
+
+var script = defineComponent({
+  name: 'OrTooltipContent',
+  props: {
+    isShown: {
+      type: Boolean,
+      required: false,
+      default: true,
+      validator: _.isBoolean
+    },
+    content: {
+      type: String,
+      required: false,
+      default: '',
+      validator: _.isString
+    }
+  }
+});
+
+var css_248z = "@keyframes spinAround-data-v-6ebf7e3e{from{transform:rotate(0)}to{transform:rotate(359deg)}}@keyframes fade-data-v-6ebf7e3e{from{opacity:1}to{opacity:0}}.or-tooltip[data-v-6ebf7e3e]{z-index:1;width:-moz-fit-content;width:fit-content;height:-moz-fit-content;height:fit-content;padding:var(--s-2) var(--s-3);margin:auto;font-size:var(--fs-0);font-weight:500;line-height:var(--lh-0);color:var(--c-neutral-0);white-space:nowrap;background-color:var(--c-neutral-6);border-radius:var(--s-1)}";
+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('transition', {
+    attrs: {
+      "name": "fade"
+    }
+  }, [_c('div', {
+    directives: [{
+      name: "show",
+      rawName: "v-show",
+      value: _vm.isShown,
+      expression: "isShown"
+    }],
+    staticClass: "or-tooltip"
+  }, [_vm._t("default", function () {
+    return [_vm._v("\n      " + _vm._s(_vm.content) + "\n    ")];
+  })], 2)]);
+};
+var __vue_staticRenderFns__ = [];
+
+/* style */
+const __vue_inject_styles__ = undefined;
+/* scoped */
+const __vue_scope_id__ = "data-v-6ebf7e3e";
+/* 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/OrTooltipContent/index.d.ts

@@ -0,0 +1 @@
+export { default as OrTooltipContent } from './OrTooltipContent.vue';

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

@@ -0,0 +1,5 @@
+export { default as OrTooltipContent } from './OrTooltipContent.js';
+import 'vue-demi';
+import 'lodash';
+import '../../style-inject.es-4c6f2515.js';
+import '../../normalize-component-6e8e3d80.js';

package/dist/bundled/v2/components/OrTooltipV3/OrTooltip.js

@@ -0,0 +1,133 @@
+import { useDebounceFn, useElementHover } from '@vueuse/core';
+import { defineComponent, ref, computed, watch } from 'vue-demi';
+import { TooltipRoot, TooltipBody, TooltipBodyPlacements } from './styles.js';
+import __vue_component__$1 from '../OrPopoverV3/OrPopover.js';
+import { PopoverPlacement } from '../OrPopoverV3/props.js';
+import { n as normalizeComponent } from '../../normalize-component-6e8e3d80.js';
+import '../../floating-ui.dom.esm-83eba816.js';
+import '../OrPopoverV3/styles.js';
+import '../OrBottomSheetV3/OrBottomSheet.js';
+import '../OrBottomSheetV3/styles.js';
+import '../OrOverlayV3/OrOverlay.js';
+import '../OrOverlayV3/styles.js';
+import '../OrTeleportV3/OrTeleport.js';
+import 'portal-vue';
+import '../../hooks/useElevation.js';
+import '../../utils/isVisible.js';
+import '../../hooks/useResponsive/useResponsive.js';
+
+var script = defineComponent({
+  name: 'OrTooltip',
+  components: {
+    OrPopover: __vue_component__$1
+  },
+  props: {
+    text: {
+      type: String,
+      default: undefined
+    },
+    placement: {
+      type: String,
+      default: PopoverPlacement.Bottom
+    }
+  },
+  emits: ['update:state'],
+  expose: ['root', 'open', 'close'],
+  setup(props) {
+    // Refs
+    const root = ref();
+    const popover = ref();
+    const popoverRoot = computed(() => {
+      var _a;
+      return (_a = popover.value) === null || _a === void 0 ? void 0 : _a.root;
+    });
+    // Styles
+    const rootStyles = computed(() => ['or-tooltip-v3', ...TooltipRoot]);
+    const bodyStyles = computed(() => [...TooltipBody, ...TooltipBodyPlacements[props.placement]]);
+    // Methods
+    const open = useDebounceFn(() => {
+      if (hover.value) {
+        const popoverInstance = popover.value;
+        if (popoverInstance) {
+          popoverInstance.open();
+        }
+      }
+    }, 250);
+    const close = useDebounceFn(() => {
+      if (!hover.value) {
+        const popoverInstance = popover.value;
+        if (popoverInstance) {
+          popoverInstance.close();
+        }
+      }
+    }, 250);
+    // Effects
+    // #region Hover
+    const hover = useElementHover(root);
+    watch(hover, value => {
+      value ? open() : close();
+    });
+    // #endregion
+    return {
+      root,
+      popover,
+      popoverRoot,
+      rootStyles,
+      bodyStyles,
+      open,
+      close
+    };
+  }
+});
+
+/* 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
+  }, [_vm._t("default"), _vm._v(" "), _vm.text ? [_c('OrPopover', {
+    ref: "popover",
+    attrs: {
+      "variant": 'popover',
+      "trigger": _vm.root,
+      "placement": _vm.placement,
+      "full-width": false,
+      "disable-default-styles": true
+    },
+    on: {
+      "update:state": function ($event) {
+        return _vm.$emit('update:state', $event);
+      }
+    }
+  }, [_c('div', {
+    class: _vm.bodyStyles
+  }, [_vm._v("\n        " + _vm._s(_vm.text) + "\n      ")])])] : _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 default };

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

@@ -0,0 +1,18 @@
+export { default as OrTooltipV3 } from './OrTooltip.js';
+export { PopoverPlacement as TooltipPlacement } from '../OrPopoverV3/props.js';
+import '@vueuse/core';
+import 'vue-demi';
+import './styles.js';
+import '../OrPopoverV3/OrPopover.js';
+import '../../floating-ui.dom.esm-83eba816.js';
+import '../OrPopoverV3/styles.js';
+import '../OrBottomSheetV3/OrBottomSheet.js';
+import '../OrBottomSheetV3/styles.js';
+import '../OrOverlayV3/OrOverlay.js';
+import '../OrOverlayV3/styles.js';
+import '../OrTeleportV3/OrTeleport.js';
+import 'portal-vue';
+import '../../normalize-component-6e8e3d80.js';
+import '../../hooks/useElevation.js';
+import '../../utils/isVisible.js';
+import '../../hooks/useResponsive/useResponsive.js';

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

@@ -0,0 +1 @@
+export { PopoverPlacement as TooltipPlacement } from '../OrPopoverV3/props.js';

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

@@ -0,0 +1,46 @@
+const TooltipRoot = [
+// Layout
+'layout-inline-row'];
+const TooltipBody = [
+// Layout
+'layout-inline-row',
+// Shape
+'rounded-sm',
+// Spacing
+'mx-sm', 'my-sm', 'px-sm', 'py-xs',
+// Typography
+'typography-caption-regular',
+// Theme
+'bg-inverse-surface', 'dark:bg-inverse-surface-dark', 'text-inverse-on-surface', 'dark:text-inverse-on-surface-dark'];
+const TooltipBodyPlacements = {
+  'top': [],
+  'top-start': [
+  // Spacing
+  'ml-none'],
+  'top-end': [
+  // Spacing
+  'mr-none'],
+  'bottom': [],
+  'bottom-start': [
+  // Spacing
+  'ml-none'],
+  'bottom-end': [
+  // Spacing
+  'mr-none'],
+  'left': [],
+  'left-start': [
+  // Spacing
+  'mt-none'],
+  'left-end': [
+  // Spacing
+  'mb-none'],
+  'right': [],
+  'right-start': [
+  // Spacing
+  'mt-none'],
+  'right-end': [
+  // Spacing
+  'mb-none']
+};
+
+export { TooltipBody, TooltipBodyPlacements, TooltipRoot };

package/dist/bundled/v2/components/index.d.ts

@@ -28,6 +28,7 @@ export * from './or-floating';
 export * from './or-hint';
 export * from './or-hint-v3';
 export * from './or-icon';
+export * from './or-icon-button-v2';
 export * from './or-icon-button-v3';
 export * from './or-icon-v3';
 export * from './or-inline-input-box-v3';