@onereach/ui-components-vue2 20.1.1 → 20.1.3

package/dist/esm/components/or-popover-v3/index.js

@@ -0,0 +1,459 @@
+import { computePosition, offset, shift, flip, hide, size, autoUpdate } from '@floating-ui/dom';
+import { onClickOutside } from '@vueuse/core';
+import { computed, unref, ref, shallowRef, watch, getCurrentScope, onScopeDispose, shallowReadonly, defineComponent, toRefs, toRef } from 'vue-demi';
+import { t as te, n as ne, K } from '../../useValidationAttributes-Cilw02AC-255a86e4.js';
+import { a9 as p } from '../../extractCssVarName-FgXy_HI0-52cc18b9.js';
+import '../../dom-DzNS5tBj-6d9cf0ef.js';
+import { OrBottomSheetV3 as OrBottomSheet } from '../or-bottom-sheet-v3/index.js';
+import { OrTeleportV3 as OrTeleport } from '../or-teleport-v3/index.js';
+import { n as normalizeComponent } from '../../normalize-component-cf2db48b.js';
+import '@onereach/styles/screens.json';
+import '@onereach/styles/tailwind.config.json';
+import 'lodash/get';
+import 'lodash/isElement';
+import '../or-overlay-v3/index.js';
+import 'portal-vue';
+
+function roundByDPR(element, value) {
+  const dpr = getDPR(element);
+  return Math.round(value * dpr) / dpr;
+}
+function getDPR(element) {
+  if (typeof window === 'undefined') {
+    return 1;
+  }
+  const win = element.ownerDocument.defaultView || window;
+  return win.devicePixelRatio || 1;
+}
+function unwrapElement(element) {
+  var _a;
+  return (_a = element === null || element === void 0 ? void 0 : element.$el) !== null && _a !== void 0 ? _a : element;
+}
+function useFloating(reference, floating, options = {}) {
+  const whileElementsMountedOption = options.whileElementsMounted;
+  const openOption = computed(() => {
+    var _a;
+    return (_a = unref(options.open)) !== null && _a !== void 0 ? _a : true;
+  });
+  const middlewareOption = computed(() => unref(options.middleware));
+  const placementOption = computed(() => {
+    var _a;
+    return (_a = unref(options.placement)) !== null && _a !== void 0 ? _a : 'bottom';
+  });
+  const strategyOption = computed(() => {
+    var _a;
+    return (_a = unref(options.strategy)) !== null && _a !== void 0 ? _a : 'absolute';
+  });
+  const transformOption = computed(() => {
+    var _a;
+    return (_a = unref(options.transform)) !== null && _a !== void 0 ? _a : true;
+  });
+  const referenceElement = computed(() => unwrapElement(reference.value));
+  const floatingElement = computed(() => unwrapElement(floating.value));
+  const x = ref(0);
+  const y = ref(0);
+  const strategy = ref(strategyOption.value);
+  const placement = ref(placementOption.value);
+  const middlewareData = shallowRef({});
+  const isPositioned = ref(false);
+  const floatingStyles = computed(() => {
+    const initialStyles = {
+      position: strategy.value,
+      left: '0',
+      top: '0'
+    };
+    if (!floatingElement.value) {
+      return initialStyles;
+    }
+    const xVal = roundByDPR(floatingElement.value, x.value);
+    const yVal = roundByDPR(floatingElement.value, y.value);
+    if (transformOption.value) {
+      return {
+        ...initialStyles,
+        transform: `translate(${xVal}px, ${yVal}px)`,
+        ...(getDPR(floatingElement.value) >= 1.5 && {
+          willChange: 'transform'
+        })
+      };
+    }
+    return {
+      position: strategy.value,
+      left: `${xVal}px`,
+      top: `${yVal}px`
+    };
+  });
+  let whileElementsMountedCleanup;
+  function update() {
+    if (referenceElement.value == null || floatingElement.value == null) {
+      return;
+    }
+    computePosition(referenceElement.value, floatingElement.value, {
+      middleware: middlewareOption.value,
+      placement: placementOption.value,
+      strategy: strategyOption.value
+    }).then(position => {
+      x.value = position.x;
+      y.value = position.y;
+      strategy.value = position.strategy;
+      placement.value = position.placement;
+      middlewareData.value = position.middlewareData;
+      isPositioned.value = true;
+    });
+  }
+  function cleanup() {
+    if (typeof whileElementsMountedCleanup === 'function') {
+      whileElementsMountedCleanup();
+      whileElementsMountedCleanup = undefined;
+    }
+  }
+  function attach() {
+    cleanup();
+    if (whileElementsMountedOption === undefined) {
+      update();
+      return;
+    }
+    if (referenceElement.value != null && floatingElement.value != null) {
+      whileElementsMountedCleanup = whileElementsMountedOption(referenceElement.value, floatingElement.value, update);
+      return;
+    }
+  }
+  function reset() {
+    if (!openOption.value) {
+      isPositioned.value = false;
+    }
+  }
+  watch([middlewareOption, placementOption, strategyOption], update, {
+    flush: 'sync'
+  });
+  watch([referenceElement, floatingElement], attach, {
+    flush: 'sync'
+  });
+  watch(openOption, reset, {
+    flush: 'sync'
+  });
+  if (getCurrentScope()) {
+    onScopeDispose(cleanup);
+  }
+  return {
+    x: shallowReadonly(x),
+    y: shallowReadonly(y),
+    strategy: shallowReadonly(strategy),
+    placement: shallowReadonly(placement),
+    middlewareData: shallowReadonly(middlewareData),
+    isPositioned: shallowReadonly(isPositioned),
+    floatingStyles,
+    update
+  };
+}
+
+var PopoverVariant;
+(function (PopoverVariant) {
+  PopoverVariant["Auto"] = "auto";
+  PopoverVariant["Popover"] = "popover";
+  PopoverVariant["BottomSheet"] = "bottom-sheet";
+})(PopoverVariant || (PopoverVariant = {}));
+var PopoverPlacement;
+(function (PopoverPlacement) {
+  PopoverPlacement["Top"] = "top";
+  PopoverPlacement["TopStart"] = "top-start";
+  PopoverPlacement["TopEnd"] = "top-end";
+  PopoverPlacement["Bottom"] = "bottom";
+  PopoverPlacement["BottomStart"] = "bottom-start";
+  PopoverPlacement["BottomEnd"] = "bottom-end";
+  PopoverPlacement["Left"] = "left";
+  PopoverPlacement["LeftStart"] = "left-start";
+  PopoverPlacement["LeftEnd"] = "left-end";
+  PopoverPlacement["Right"] = "right";
+  PopoverPlacement["RightStart"] = "right-start";
+  PopoverPlacement["RightEnd"] = "right-end";
+})(PopoverPlacement || (PopoverPlacement = {}));
+
+const Popover = [
+// Position
+'absolute'];
+const PopoverBody = [
+// Shape
+'rounded-md',
+// Spacing
+'mx-sm', 'my-sm',
+// Elevation
+'shadow-contextual', 'dark:shadow-contextual-dark',
+// Theme
+'theme-background-default', 'dark:theme-background-default-dark', 'theme-foreground-default', 'dark:theme-foreground-default-dark'];
+const PopoverBodyPlacements = {
+  [PopoverPlacement.Top]: [
+  // Spacing
+  'mb-0'],
+  [PopoverPlacement.TopStart]: [
+  // Spacing
+  'mb-0', 'ml-0'],
+  [PopoverPlacement.TopEnd]: [
+  // Spacing
+  'mb-0', 'mr-0'],
+  [PopoverPlacement.Bottom]: [
+  // Spacing
+  'mt-0'],
+  [PopoverPlacement.BottomStart]: [
+  // Spacing
+  'mt-0', 'ml-0'],
+  [PopoverPlacement.BottomEnd]: [
+  // Spacing
+  'mt-0', 'mr-0'],
+  [PopoverPlacement.Left]: [
+  // Spacing
+  'mr-0'],
+  [PopoverPlacement.LeftStart]: [
+  // Spacing
+  'mr-0', 'mt-0'],
+  [PopoverPlacement.LeftEnd]: [
+  // Spacing
+  'mr-0', 'mb-0'],
+  [PopoverPlacement.Right]: [
+  // Spacing
+  'ml-0'],
+  [PopoverPlacement.RightStart]: [
+  // Spacing
+  'ml-0', 'mt-0'],
+  [PopoverPlacement.RightEnd]: [
+  // Spacing
+  'ml-0', 'mb-0']
+};
+
+function isPrevented(path, trigger) {
+  return path.some(element => {
+    const {
+      classList
+    } = element;
+    if (!p(element, trigger)) {
+      if (classList === null || classList === void 0 ? void 0 : classList.contains('or-popover-v3')) {
+        return true;
+      }
+      if (classList === null || classList === void 0 ? void 0 : classList.contains('or-bottom-sheet-v3')) {
+        return true;
+      }
+      if (classList === null || classList === void 0 ? void 0 : classList.contains('or-confirm-v3')) {
+        return true;
+      }
+    }
+    return false;
+  });
+}
+
+var script = defineComponent({
+  name: 'OrPopover',
+  components: {
+    OrBottomSheet,
+    OrTeleport
+  },
+  inheritAttrs: false,
+  props: {
+    // @workaround for Vue 2
+    customStyles: {
+      type: Array,
+      default: () => []
+    },
+    isOpen: {
+      type: Boolean,
+      default: false
+    },
+    variant: {
+      type: String,
+      default: () => PopoverVariant.Auto
+    },
+    bottomSheetProps: {
+      type: Object,
+      default: undefined
+    },
+    trigger: {
+      type: Object,
+      default: undefined
+    },
+    placement: {
+      type: String,
+      default: () => PopoverPlacement.Bottom
+    },
+    fallbackPlacement: {
+      type: String,
+      default: 'end'
+    },
+    hideOptions: {
+      type: Object,
+      default: undefined
+    },
+    offset: {
+      type: [Number, Object, Function],
+      default: 8
+    },
+    fullWidth: {
+      type: Boolean,
+      default: false
+    },
+    disableDefaultStyles: {
+      type: Boolean,
+      default: false
+    },
+    keepAlive: {
+      type: Boolean,
+      default: true
+    }
+  },
+  emits: ['update:state', 'open', 'close'],
+  expose: ['root', 'state', 'isFlipped', 'isHidden', 'open', 'close', 'toggle', 'bottomSheet'],
+  setup(props, context) {
+    // Refs
+    const root = ref();
+    const containerRoot = ref();
+    const bottomSheet = ref();
+    const bottomSheetRoot = computed(() => {
+      var _a;
+      return (_a = bottomSheet.value) === null || _a === void 0 ? void 0 : _a.root;
+    });
+    const {
+      trigger,
+      placement,
+      offset: offset$1,
+      fullWidth,
+      hideOptions
+    } = toRefs(props);
+    // Styles
+    const rootStyles = computed(() => ['or-popover-v3', ...Popover, ...('class' in context.attrs ? [] : props.customStyles)]);
+    const bodyStyles = computed(() => [...PopoverBody, ...PopoverBodyPlacements[placement.value]]);
+    // State
+    const {
+      state,
+      open,
+      close,
+      toggle
+    } = te(toRef(props, 'isOpen'), context.emit);
+    const {
+      floatingStyles,
+      middlewareData,
+      placement: computedPlacement
+    } = useFloating(trigger, root, {
+      placement,
+      middleware: [offset(offset$1.value), shift(), flip(() => ({
+        fallbackAxisSideDirection: props.fallbackPlacement
+      })), hide(hideOptions.value), size({
+        apply({
+          rects,
+          elements
+        }) {
+          if (fullWidth.value) {
+            Object.assign(elements.floating.style, {
+              width: `${rects.reference.width}px`
+            });
+          }
+        }
+      })],
+      whileElementsMounted(...args) {
+        return autoUpdate(...args, {
+          animationFrame: true
+        });
+      }
+    });
+    const isFlipped = computed(() => computedPlacement.value !== placement.value);
+    const isHidden = computed(() => {
+      var _a;
+      return Boolean((_a = middlewareData.value.hide) === null || _a === void 0 ? void 0 : _a.referenceHidden);
+    });
+    // Helpers
+    const {
+      isDesktop,
+      isMobile
+    } = ne(containerRoot);
+    // #region Elevation
+    K(root, state);
+    // #endregion
+    // #region Click Outside
+    onClickOutside(root, event => {
+      if (state.value === 'open' && !isPrevented(event.composedPath(), props.trigger)) {
+        close();
+      }
+    }, {
+      ignore: [trigger]
+    });
+    // #endregion
+    return {
+      root,
+      containerRoot,
+      bottomSheet,
+      bottomSheetRoot,
+      rootStyles,
+      bodyStyles,
+      floatingStyles,
+      state,
+      isFlipped,
+      isHidden,
+      isDesktop,
+      isMobile,
+      open,
+      close,
+      toggle
+    };
+  }
+});
+
+/* script */
+const __vue_script__ = script;
+
+/* template */
+var __vue_render__ = function () {
+  var _vm = this;
+  var _h = _vm.$createElement;
+  var _c = _vm._self._c || _h;
+  return _vm.keepAlive || _vm.state === 'open' ? _c('OrTeleport', [_c('div', {
+    directives: [{
+      name: "show",
+      rawName: "v-show",
+      value: _vm.state === 'open',
+      expression: "state === 'open'"
+    }],
+    ref: 'containerRoot',
+    class: ['contents']
+  }, [_vm.isDesktop && _vm.variant === 'auto' || _vm.variant === 'popover' ? [_c('div', _vm._b({
+    directives: [{
+      name: "show",
+      rawName: "v-show",
+      value: !_vm.isHidden,
+      expression: "!isHidden"
+    }],
+    ref: 'root',
+    class: _vm.rootStyles,
+    style: _vm.floatingStyles
+  }, 'div', _vm.$attrs, false), [_vm.disableDefaultStyles ? [_vm._t("default")] : [_c('div', {
+    class: _vm.bodyStyles
+  }, [_vm._t("default")], 2)]], 2)] : _vm._e(), _vm._v(" "), _vm.isMobile && _vm.variant === 'auto' || _vm.variant === 'bottom-sheet' ? [_c('OrBottomSheet', _vm._b({
+    ref: 'bottomSheet',
+    attrs: {
+      "is-open": _vm.state === 'open'
+    },
+    on: {
+      "update:state": function ($event) {
+        $event === 'open' ? _vm.open() : _vm.close();
+      }
+    }
+  }, 'OrBottomSheet', _vm.bottomSheetProps, false), [_vm._t("default")], 2)] : _vm._e()], 2)]) : _vm._e();
+};
+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);
+var OrPopover = __vue_component__;
+
+export { OrPopover as OrPopoverV3, PopoverPlacement, PopoverVariant, isPrevented };

package/dist/{esm-deps → esm}/components/or-progress-v3/index.js

@@ -1,11 +1,13 @@
 import { useElementBounding } from '@vueuse/core';
 import round from 'lodash/round';
 import { defineComponent, ref, useSlots, computed } from 'vue-demi';
-import { n as ne } from '../../useValidationAttributes-DxhcSj_h-39556969.js';
+import { n as ne } from '../../useValidationAttributes-Cilw02AC-255a86e4.js';
 import { n as normalizeComponent } from '../../normalize-component-cf2db48b.js';
-import '../../dom-CwV-xS38-5babad01.js';
+import '../../dom-DzNS5tBj-6d9cf0ef.js';
 import 'lodash/get';
 import 'lodash/isElement';
+import '@onereach/styles/screens.json';
+import '@onereach/styles/tailwind.config.json';
 
 var ProgressColor;
 (function (ProgressColor) {

package/dist/{esm-deps → esm}/components/or-radio-group-v3/index.js

@@ -1,12 +1,14 @@
 import { defineComponent, toRef } from 'vue-demi';
-import { b as re } from '../../useValidationAttributes-DxhcSj_h-39556969.js';
+import { a as re } from '../../useValidationAttributes-Cilw02AC-255a86e4.js';
 import { OrFormGroupV3 as OrFormGroup, FormGroupDirection } from '../or-form-group-v3/index.js';
 import { OrRadioV3 as OrRadio } from '../or-radio-v3/index.js';
 import { n as normalizeComponent } from '../../normalize-component-cf2db48b.js';
-import '../../dom-CwV-xS38-5babad01.js';
+import '../../dom-DzNS5tBj-6d9cf0ef.js';
 import 'lodash/get';
 import 'lodash/isElement';
 import '@vueuse/core';
+import '@onereach/styles/screens.json';
+import '@onereach/styles/tailwind.config.json';
 import '../or-error-v3/index.js';
 import '../or-hint-v3/index.js';
 import '../or-label-v3/index.js';

package/dist/{esm-deps → esm}/components/or-radio-v3/index.js

@@ -1,12 +1,14 @@
 import { defineComponent, reactive, ref, computed, toRef } from 'vue-demi';
-import { K, _, b as re } from '../../useValidationAttributes-DxhcSj_h-39556969.js';
+import { N, k, a as re } from '../../useValidationAttributes-Cilw02AC-255a86e4.js';
 import { OrLabelV3 as OrLabel, LabelVariant } from '../or-label-v3/index.js';
 import { s as styleInject } from '../../style-inject.es-87955792.js';
 import { n as normalizeComponent } from '../../normalize-component-cf2db48b.js';
-import '../../dom-CwV-xS38-5babad01.js';
+import '../../dom-DzNS5tBj-6d9cf0ef.js';
 import 'lodash/get';
 import 'lodash/isElement';
 import '@vueuse/core';
+import '@onereach/styles/screens.json';
+import '@onereach/styles/tailwind.config.json';
 
 const Radio = [
 // Layout
@@ -89,8 +91,8 @@ var script = defineComponent({
   expose: ['root', 'focus', 'blur'],
   setup(props, context) {
     const attributes = reactive({
-      id: K(),
-      ..._()
+      id: N(),
+      ...k()
     });
     // Refs & Styles
     const root = ref();

package/dist/{esm-deps → esm}/components/or-range-slider-v3/index.js

@@ -1,17 +1,17 @@
 import { useElementBounding, useElementHover, useDraggable, clamp } from '@vueuse/core';
 import { defineComponent, ref, computed, toRef, watch } from 'vue-demi';
-import { b as re } from '../../useValidationAttributes-DxhcSj_h-39556969.js';
+import { a as re } from '../../useValidationAttributes-Cilw02AC-255a86e4.js';
 import { a as SliderOrientation, S as SliderColor } from '../../types-75a1cc13.js';
 import { OrTooltipV3 as OrTooltip } from '../or-tooltip-v3/index.js';
 import { n as normalizeComponent } from '../../normalize-component-cf2db48b.js';
-import '../../dom-CwV-xS38-5babad01.js';
+import '../../dom-DzNS5tBj-6d9cf0ef.js';
 import 'lodash/get';
 import 'lodash/isElement';
+import '@onereach/styles/screens.json';
+import '@onereach/styles/tailwind.config.json';
 import '../or-popover-v3/index.js';
-import '@floating-ui/core';
-import '@floating-ui/utils';
-import '@floating-ui/utils/dom';
-import '../../extractCssVarName-IHa2pGlF-d99daa2a.js';
+import '@floating-ui/dom';
+import '../../extractCssVarName-FgXy_HI0-52cc18b9.js';
 import '../or-bottom-sheet-v3/index.js';
 import '../or-overlay-v3/index.js';
 import '../or-teleport-v3/index.js';

package/dist/{esm-deps → esm}/components/or-rating-v3/index.js

@@ -1,11 +1,13 @@
 import { defineComponent, ref, computed, inject, toRef, watch, reactive } from 'vue-demi';
-import { b as re } from '../../useValidationAttributes-DxhcSj_h-39556969.js';
+import { a as re } from '../../useValidationAttributes-Cilw02AC-255a86e4.js';
 import { OrIconV3 as OrIcon } from '../or-icon-v3/index.js';
 import { n as normalizeComponent } from '../../normalize-component-cf2db48b.js';
-import '../../dom-CwV-xS38-5babad01.js';
+import '../../dom-DzNS5tBj-6d9cf0ef.js';
 import 'lodash/get';
 import 'lodash/isElement';
 import '@vueuse/core';
+import '@onereach/styles/screens.json';
+import '@onereach/styles/tailwind.config.json';
 
 var RatingVariant;
 (function (RatingVariant) {

package/dist/{esm-deps → esm}/components/or-resizeable-panel-v3/index.js

@@ -1,19 +1,19 @@
 import { useDraggable } from '@vueuse/core';
 import { defineComponent, ref, computed, toRef, watch } from 'vue-demi';
-import { a as te } from '../../useValidationAttributes-DxhcSj_h-39556969.js';
+import { t as te } from '../../useValidationAttributes-Cilw02AC-255a86e4.js';
 import { OrIconButtonV3 as OrIconButton } from '../or-icon-button-v3/index.js';
 import { n as normalizeComponent } from '../../normalize-component-cf2db48b.js';
-import '../../dom-CwV-xS38-5babad01.js';
+import '../../dom-DzNS5tBj-6d9cf0ef.js';
 import 'lodash/get';
 import 'lodash/isElement';
-import '../../constants-873d04a2.js';
+import '@onereach/styles/screens.json';
+import '@onereach/styles/tailwind.config.json';
+import '../../constants-2e3ea701.js';
 import '../or-icon-v3/index.js';
 import '../or-tooltip-v3/index.js';
 import '../or-popover-v3/index.js';
-import '@floating-ui/core';
-import '@floating-ui/utils';
-import '@floating-ui/utils/dom';
-import '../../extractCssVarName-IHa2pGlF-d99daa2a.js';
+import '@floating-ui/dom';
+import '../../extractCssVarName-FgXy_HI0-52cc18b9.js';
 import '../or-bottom-sheet-v3/index.js';
 import '../or-overlay-v3/index.js';
 import '../or-teleport-v3/index.js';