@onereach/ui-components 8.5.0 → 8.5.1-beta.3662.0

package/dist/bundled/v3/components/OrPopoverV3-eaf6b5b4.js

@@ -0,0 +1,388 @@
+import { resolveComponent, openBlock, createBlock, withCtx, withDirectives, createElementVNode, createElementBlock, mergeProps, renderSlot, normalizeClass, createCommentVNode, vShow } from 'vue';
+import { c as computePosition, o as offset, a as shift, f as flip, h as hide, b as size, d as autoUpdate } from './OrFloating-3ae45ca5.js';
+import { Z as script$1, t as usePopoverState, v as useResponsive, W as useElevation, o as onClickOutside } from './OrBottomSheetV3-199292db.js';
+import { computed, unref, ref, shallowRef, watch, getCurrentScope, onScopeDispose, shallowReadonly, defineComponent, toRefs, toRef } from 'vue-demi';
+import script$2 from './OrTeleportV3/OrTeleport.js';
+
+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) {
+  let options = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
+  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 = [
+// Spacing
+'mx-sm', 'my-sm',
+// Shape
+'rounded-md',
+// Elevation
+'shadow-contextual', 'dark:shadow-contextual-dark',
+// Theme
+'theme-background-base', 'dark:theme-background-base-dark', 'theme-foreground-default', 'dark:theme-foreground-default-dark'];
+const PopoverBodyPlacements = {
+  [PopoverPlacement.Top]: [],
+  [PopoverPlacement.TopStart]: [
+  // Spacing
+  'ml-none'],
+  [PopoverPlacement.TopEnd]: [
+  // Spacing
+  'mr-none'],
+  [PopoverPlacement.Bottom]: [],
+  [PopoverPlacement.BottomStart]: [
+  // Spacing
+  'ml-none'],
+  [PopoverPlacement.BottomEnd]: [
+  // Spacing
+  'mr-none'],
+  [PopoverPlacement.Left]: [],
+  [PopoverPlacement.LeftStart]: [
+  // Spacing
+  'mt-none'],
+  [PopoverPlacement.LeftEnd]: [
+  // Spacing
+  'mb-none'],
+  [PopoverPlacement.Right]: [],
+  [PopoverPlacement.RightStart]: [
+  // Spacing
+  'mt-none'],
+  [PopoverPlacement.RightEnd]: [
+  // Spacing
+  'mb-none']
+};
+
+var script = defineComponent({
+  components: {
+    OrBottomSheet: script$1,
+    OrTeleport: script$2
+  },
+  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, HTMLElement],
+      default: undefined
+    },
+    placement: {
+      type: String,
+      default: PopoverPlacement.Bottom
+    },
+    offset: {
+      type: [Number, Object, Function],
+      default: undefined
+    },
+    fullWidth: {
+      type: Boolean,
+      default: false
+    },
+    disableDefaultStyles: {
+      type: Boolean,
+      default: false
+    }
+  },
+  emits: ['update:state', 'open', 'close'],
+  expose: ['root', 'state', 'isFlipped', 'isHidden', 'open', 'close', 'toggle'],
+  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
+    } = 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
+    } = usePopoverState(toRef(props, 'isOpen'), context.emit);
+    const {
+      floatingStyles,
+      middlewareData
+    } = useFloating(trigger, root, {
+      placement,
+      middleware: [offset(offset$1.value), shift(), flip(), hide(), size({
+        apply(_ref) {
+          let {
+            rects
+          } = _ref;
+          if (fullWidth.value && root.value) Object.assign(root.value.style, {
+            width: `${rects.reference.width}px`
+          });
+        }
+      })],
+      whileElementsMounted() {
+        for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+          args[_key] = arguments[_key];
+        }
+        return autoUpdate(...args, {
+          animationFrame: true
+        });
+      }
+    });
+    const isFlipped = computed(() => {
+      var _a;
+      return Boolean((_a = middlewareData.value.flip) === null || _a === void 0 ? void 0 : _a.index);
+    });
+    const isHidden = computed(() => {
+      var _a;
+      return Boolean((_a = middlewareData.value.hide) === null || _a === void 0 ? void 0 : _a.referenceHidden);
+    });
+    // Helpers
+    const {
+      isDesktop,
+      isMobile
+    } = useResponsive(containerRoot);
+    // #region Elevation
+    useElevation(root, state);
+    // #endregion
+    // #region Click Outside
+    onClickOutside(root, event => {
+      const path = event.composedPath();
+      if (!path.some(_ref2 => {
+        let {
+          classList
+        } = _ref2;
+        return (classList === null || classList === void 0 ? void 0 : classList.contains('or-popover-v3')) || (classList === null || classList === void 0 ? void 0 : classList.contains('or-bottom-sheet-v3'));
+      })) {
+        close();
+      }
+    }, {
+      ignore: [trigger]
+    });
+    // #endregion
+    return {
+      root,
+      containerRoot,
+      bottomSheet,
+      bottomSheetRoot,
+      rootStyles,
+      bodyStyles,
+      floatingStyles,
+      state,
+      isFlipped,
+      isHidden,
+      isDesktop,
+      isMobile,
+      open,
+      close,
+      toggle
+    };
+  }
+});
+
+const _hoisted_1 = {
+  ref: "containerRoot",
+  class: /*#__PURE__*/normalizeClass(['contents'])
+};
+function render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_OrBottomSheet = resolveComponent("OrBottomSheet");
+  const _component_OrTeleport = resolveComponent("OrTeleport");
+  return openBlock(), createBlock(_component_OrTeleport, null, {
+    default: withCtx(() => [withDirectives(createElementVNode("div", _hoisted_1, [_ctx.isDesktop && _ctx.variant === 'auto' || _ctx.variant === 'popover' ? (openBlock(), createElementBlock("div", mergeProps({
+      key: 0,
+      ref: "root"
+    }, _ctx.$attrs, {
+      style: _ctx.floatingStyles,
+      class: _ctx.rootStyles
+    }), [_ctx.disableDefaultStyles ? renderSlot(_ctx.$slots, "default", {
+      key: 0
+    }) : (openBlock(), createElementBlock("div", {
+      key: 1,
+      class: normalizeClass(_ctx.bodyStyles)
+    }, [renderSlot(_ctx.$slots, "default")], 2 /* CLASS */))], 16 /* FULL_PROPS */)) : createCommentVNode("v-if", true), _ctx.isMobile && _ctx.variant === 'auto' || _ctx.variant === 'bottom-sheet' ? (openBlock(), createBlock(_component_OrBottomSheet, mergeProps({
+      key: 1,
+      ref: "bottomSheet"
+    }, _ctx.bottomSheetProps, {
+      "is-open": _ctx.state === 'open',
+      "onUpdate:state": _cache[0] || (_cache[0] = $event => _ctx.state = $event)
+    }), {
+      default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
+      _: 3 /* FORWARDED */
+    }, 16 /* FULL_PROPS */, ["is-open"])) : createCommentVNode("v-if", true)], 512 /* NEED_PATCH */), [[vShow, _ctx.state === 'open']])]),
+    _: 3 /* FORWARDED */
+  });
+}
+
+script.render = render;
+script.__file = "src/components/or-popover-v3/OrPopover.vue";
+
+export { PopoverPlacement as P, PopoverVariant as a, Popover as b, PopoverBody as c, PopoverBodyPlacements as d, script as s, useFloating as u };

package/dist/bundled/v3/components/OrProgress/OrProgress.js

@@ -0,0 +1 @@
+export { s as default } from '../OrProgress-2b208f99.js';

package/dist/bundled/v3/components/OrProgress/OrProgress.vue.d.ts

@@ -0,0 +1,122 @@
+import { PropType } from 'vue-demi';
+import { OrProgressColors, OrProgressTypes } from './constants';
+declare const _default: import("vue-demi").DefineComponent<{
+    maxValue: {
+        type: NumberConstructor;
+        required: false;
+        default: number;
+    };
+    value: {
+        type: NumberConstructor;
+        required: false;
+        default: null;
+    };
+    progress: {
+        type: NumberConstructor;
+        required: false;
+        default: null;
+    };
+    precision: {
+        type: NumberConstructor;
+        required: false;
+        default: number;
+    };
+    type: {
+        type: PropType<OrProgressTypes>;
+        required: false;
+        default: OrProgressTypes;
+    };
+    color: {
+        type: PropType<OrProgressColors>;
+        required: false;
+        default: OrProgressColors;
+    };
+    headerText: {
+        type: StringConstructor;
+        required: false;
+        default: null;
+    };
+    footerText: {
+        type: StringConstructor;
+        required: false;
+        default: null;
+    };
+    isLoading: {
+        type: BooleanConstructor;
+        required: false;
+        default: boolean;
+    };
+}, unknown, unknown, {
+    localProgress(): number;
+    localValue(): number;
+    percent(): string;
+    isLinearType(): boolean;
+    isCircleType(): boolean;
+    isShowingHeader(): boolean;
+    isShowingFooter(): boolean;
+    localColor(): Exclude<OrProgressColors, OrProgressColors.auto>;
+    isMoreThanHalf(): boolean;
+    progressBarClasses(): string[];
+    progressPieClasses(): string[];
+    progressBarStyle(): any;
+    leftCircleHalfStyle(): any;
+    rightCircleHalfStyle(): any;
+    pieCircleStyle(): any;
+}, {}, import("vue-demi").ComponentOptionsMixin, import("vue-demi").ComponentOptionsMixin, {}, string, import("vue-demi").VNodeProps & import("vue-demi").AllowedComponentProps & import("vue-demi").ComponentCustomProps, Readonly<import("vue-demi").ExtractPropTypes<{
+    maxValue: {
+        type: NumberConstructor;
+        required: false;
+        default: number;
+    };
+    value: {
+        type: NumberConstructor;
+        required: false;
+        default: null;
+    };
+    progress: {
+        type: NumberConstructor;
+        required: false;
+        default: null;
+    };
+    precision: {
+        type: NumberConstructor;
+        required: false;
+        default: number;
+    };
+    type: {
+        type: PropType<OrProgressTypes>;
+        required: false;
+        default: OrProgressTypes;
+    };
+    color: {
+        type: PropType<OrProgressColors>;
+        required: false;
+        default: OrProgressColors;
+    };
+    headerText: {
+        type: StringConstructor;
+        required: false;
+        default: null;
+    };
+    footerText: {
+        type: StringConstructor;
+        required: false;
+        default: null;
+    };
+    isLoading: {
+        type: BooleanConstructor;
+        required: false;
+        default: boolean;
+    };
+}>>, {
+    maxValue: number;
+    value: number;
+    progress: number;
+    precision: number;
+    type: OrProgressTypes;
+    color: OrProgressColors;
+    headerText: string;
+    footerText: string;
+    isLoading: boolean;
+}>;
+export default _default;

package/dist/bundled/v3/components/OrProgress/constants.d.ts

@@ -0,0 +1,11 @@
+export declare enum OrProgressColors {
+    auto = "auto",
+    primary = "primary",
+    success = "success",
+    warning = "warning",
+    error = "error"
+}
+export declare enum OrProgressTypes {
+    linear = "linear",
+    circle = "circle"
+}

package/dist/bundled/v3/components/OrProgress/constants.js

@@ -0,0 +1 @@
+export { O as OrProgressColors, a as OrProgressTypes } from '../OrProgress-2b208f99.js';

package/dist/bundled/v3/components/OrProgress/index.d.ts

@@ -0,0 +1,2 @@
+export { default as OrProgress } from './OrProgress.vue';
+export * from './constants';

package/dist/bundled/v3/components/OrProgress/index.js

@@ -0,0 +1 @@
+export { s as OrProgress, O as OrProgressColors, a as OrProgressTypes } from '../OrProgress-2b208f99.js';