@onereach/ui-components 2.70.0-beta.2159.0 → 2.70.0-beta.2160.0

package/dist/bundled/v2/OrFab-9921d745.js

@@ -0,0 +1,104 @@
+import { defineComponent, ref, computed } from 'vue-demi';
+import { _ as __vue_component__$1 } from './OrIcon-7e3098b7.js';
+import { n as normalizeComponent } from './normalize-component-6e8e3d80.js';
+
+var FabColor;
+(function (FabColor) {
+  FabColor["Primary"] = "primary";
+  FabColor["Danger"] = "danger";
+})(FabColor || (FabColor = {}));
+
+const FabRoot = [
+// Layout
+'layout-inline-row justify-center',
+// Shape
+'rounded-full',
+// Box
+'w-[56px]', 'h-[56px]',
+// Elevation
+'enabled:shadow-button', 'dark:enabled:shadow-button-dark'];
+const FabRootColors = {
+  'primary': [
+  // Theme
+  'theme-preset-1-primary', 'dark:theme-preset-1-primary-dark'],
+  'danger': [
+  // Theme
+  'theme-preset-1-error', 'dark:theme-preset-1-error-dark']
+};
+
+var script = defineComponent({
+  name: 'OrFab',
+  components: {
+    OrIcon: __vue_component__$1
+  },
+  inheritAttrs: false,
+  props: {
+    icon: {
+      type: String,
+      required: true
+    },
+    color: {
+      type: String,
+      default: FabColor.Primary
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    }
+  },
+  setup(props) {
+    // Refs
+    const root = ref();
+    // Styles
+    const rootStyles = computed(() => ['or-fab', ...FabRoot, ...FabRootColors[props.color]]);
+    return {
+      root,
+      rootStyles
+    };
+  }
+});
+
+/* 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('button', _vm._b({
+    ref: "root",
+    class: _vm.rootStyles,
+    attrs: {
+      "type": 'button',
+      "disabled": _vm.disabled
+    }
+  }, 'button', _vm.$attrs, false), [_c('OrIcon', {
+    attrs: {
+      "icon": _vm.icon,
+      "size": 'l'
+    }
+  })], 1);
+};
+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 { FabColor as F, __vue_component__ as _ };

package/dist/bundled/v2/OrFloating-7a3e6fdd.js

@@ -0,0 +1,209 @@
+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 './components/OrTeleportVue2/OrTeleportVue2.js';
+import { g as getMaxZIndex, a as getCS } from './dom-28f5f62a.js';
+import { n as normalizeComponent } from './normalize-component-6e8e3d80.js';
+import { c as createInjector } from './browser-82dea9ed.js';
+
+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 = {}));
+
+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 { OrFloatingPlacements as O, __vue_component__ as _, OrFloatingHideStrategy as a };

package/dist/bundled/v2/OrIcon-7e3098b7.js

@@ -0,0 +1,129 @@
+import { defineComponent, ref, computed } from 'vue-demi';
+import { u as useClassAttribute } from './useClassAttribute-47fdb016.js';
+import { n as normalizeComponent } from './normalize-component-6e8e3d80.js';
+
+var IconVariant;
+(function (IconVariant) {
+  IconVariant["Outlined"] = "outlined";
+  IconVariant["OutlinedBold"] = "outlined-bold";
+  IconVariant["Filled"] = "filled";
+  IconVariant["FilledBold"] = "filled-bold";
+  IconVariant["Inherit"] = "inherit";
+})(IconVariant || (IconVariant = {}));
+var IconSize;
+(function (IconSize) {
+  IconSize["XL"] = "xl";
+  IconSize["L"] = "l";
+  IconSize["M"] = "m";
+  IconSize["Inherit"] = "inherit";
+})(IconSize || (IconSize = {}));
+
+const IconRoot = [
+// Layout
+'layout-inline-row justify-center'];
+const IconRootVariants = {
+  'outlined': [
+  // Iconography
+  'iconography-outlined'],
+  'outlined-bold': [
+  // Iconography
+  'iconography-outlined-bold'],
+  'filled': [
+  // Iconography
+  'iconography-filled'],
+  'filled-bold': [
+  // Iconography
+  'iconography-filled-bold'],
+  'inherit': [
+  // Iconography
+  'iconography-inherit']
+};
+const IconRootSizes = {
+  'xl': [
+  // Box
+  'w-[28px] md:w-[24px]', 'h-[28px] md:h-[24px]',
+  // Typography
+  'text-[28px] md:text-[24px]'],
+  'l': [
+  // Box
+  'w-[24px] md:w-[20px]', 'h-[24px] md:h-[20px]',
+  // Typography
+  'text-[24px] md:text-[20px]'],
+  'm': [
+  // Box
+  'w-[20px] md:w-[16px]', 'h-[20px] md:h-[16px]',
+  // Typography
+  'text-[20px] md:text-[16px]'],
+  'inherit': [
+  // Box
+  'w-full', 'h-full',
+  // Typography
+  'text-inherit']
+};
+
+var script = defineComponent({
+  name: 'OrIcon',
+  inheritAttrs: false,
+  props: {
+    icon: {
+      type: String,
+      required: true
+    },
+    variant: {
+      type: String,
+      default: IconVariant.Outlined
+    },
+    size: {
+      type: String,
+      default: IconSize.M
+    }
+  },
+  expose: ['root'],
+  setup(props) {
+    // Refs
+    const root = ref();
+    // Styles
+    const classAttribute = useClassAttribute();
+    const rootStyles = computed(() => ['or-icon', ...IconRoot, ...IconRootVariants[props.variant], ...IconRootSizes[props.size], classAttribute.value]);
+    return {
+      root,
+      rootStyles
+    };
+  }
+});
+
+/* 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', _vm._b({
+    ref: "root",
+    class: _vm.rootStyles
+  }, 'div', _vm.$attrs, false), [_vm._v("\n  " + _vm._s(_vm.icon) + "\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 { IconSize as I, __vue_component__ as _, IconVariant as a };

package/dist/bundled/v2/OrIcon-bb0cf737.js

@@ -0,0 +1,178 @@
+import { defineComponent, ref } from 'vue-demi';
+import _ from 'lodash';
+import { p as pxToRem } from './px-to-rem-0b26b83e.js';
+import __vue_component__$1 from './components/OrTooltipContent/OrTooltipContent.js';
+import { _ as __vue_component__$2, O as OrFloatingPlacements } from './OrFloating-7a3e6fdd.js';
+import { n as normalizeComponent } from './normalize-component-6e8e3d80.js';
+import { c as createInjector } from './browser-82dea9ed.js';
+
+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 = {}));
+
+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 { OrIconColors as O, __vue_component__ as _, OrIconType as a };