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

package/dist/bundled/v2/OrPopover-6750b9e2.js

@@ -1,284 +0,0 @@
-import { a as autoUpdate, c as computePosition, f as flip, s as shift, h as hide } from './floating-ui.dom.esm-83eba816.js';
-import { onClickOutside } from '@vueuse/core';
-import { defineComponent, ref, computed, watch, watchPostEffect, unref, toRef, nextTick } from 'vue-demi';
-import __vue_component__$1 from './components/OrBottomSheetV3/OrBottomSheetV3.js';
-import __vue_component__$2 from './components/OrTeleport.vue2V3/OrTeleport.vue2V3.js';
-import { u as useResponsive } from './useResponsive-a02e95b7.js';
-import { u as useClassAttribute } from './useClassAttribute-47fdb016.js';
-import { u as useElevation } from './useElevation-31bfe1f6.js';
-import { n as normalizeComponent } from './normalize-component-6e8e3d80.js';
-
-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 PopoverRoot = [
-// Position
-'absolute'];
-const PopoverBody = [
-// Shape
-'rounded-md',
-// Spacing
-'mx-sm', 'my-sm',
-// Theme
-'bg-background', 'dark:bg-background-dark',
-// Elevation
-'shadow-contextual', 'dark:shadow-contextual-dark'];
-const PopoverBodyPlacements = {
-  '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']
-};
-
-var script = defineComponent({
-  name: 'OrPopover',
-  components: {
-    OrBottomSheet: __vue_component__$1,
-    OrTeleport: __vue_component__$2
-  },
-  inheritAttrs: false,
-  props: {
-    variant: {
-      type: String,
-      default: PopoverVariant.Auto
-    },
-    trigger: {
-      type: HTMLElement,
-      default: undefined
-    },
-    placement: {
-      type: String,
-      default: PopoverPlacement.Bottom
-    },
-    fullWidth: {
-      type: Boolean,
-      default: false
-    },
-    disableDefaultStyles: {
-      type: Boolean,
-      default: false
-    }
-  },
-  emits: ['update:state'],
-  expose: ['root', 'state', 'isOpen', 'open', 'close'],
-  setup(props, context) {
-    const {
-      isDesktop,
-      isMobile
-    } = useResponsive();
-    // Refs
-    const root = ref();
-    const bottomSheet = ref();
-    const bottomSheetRoot = computed(() => {
-      var _a;
-      return (_a = bottomSheet.value) === null || _a === void 0 ? void 0 : _a.root;
-    });
-    // Styles
-    const classAttribute = useClassAttribute();
-    const rootStyles = computed(() => ['or-popover', ...PopoverRoot, classAttribute.value]);
-    const bodyStyles = computed(() => [...PopoverBody, ...PopoverBodyPlacements[props.placement]]);
-    // State
-    const state = ref('closed');
-    const isOpen = computed(() => state.value === 'open');
-    // Events
-    watch(state, value => {
-      context.emit('update:state', value);
-    });
-    // Methods
-    function open() {
-      state.value = 'open';
-      switch (props.variant) {
-        case PopoverVariant.Auto:
-          if (isMobile.value) {
-            nextTick(() => {
-              const bottomSheetInstance = bottomSheet.value;
-              if (bottomSheetInstance) {
-                bottomSheetInstance.open();
-              }
-            });
-          }
-          break;
-        case PopoverVariant.Popover:
-          break;
-        case PopoverVariant.BottomSheet:
-          nextTick(() => {
-            const bottomSheetInstance = bottomSheet.value;
-            if (bottomSheetInstance) {
-              bottomSheetInstance.open();
-            }
-          });
-          break;
-      }
-    }
-    function close() {
-      state.value = 'closed';
-      switch (props.variant) {
-        case PopoverVariant.Auto:
-          if (isMobile.value) {
-            nextTick(() => {
-              const bottomSheetInstance = bottomSheet.value;
-              if (bottomSheetInstance) {
-                bottomSheetInstance.close();
-              }
-            });
-          }
-          break;
-        case PopoverVariant.Popover:
-          break;
-        case PopoverVariant.BottomSheet:
-          nextTick(() => {
-            const bottomSheetInstance = bottomSheet.value;
-            if (bottomSheetInstance) {
-              bottomSheetInstance.close();
-            }
-          });
-          break;
-      }
-    }
-    // Handlers
-    function handleBottomSheetState(bottomSheetState) {
-      if (bottomSheetState === 'closed') {
-        state.value = 'closed';
-      } else {
-        state.value = 'open';
-      }
-    }
-    // Effects
-    watchPostEffect(() => {
-      const rootElement = unref(root);
-      if (rootElement) {
-        const {
-          trigger,
-          placement
-        } = props;
-        if (trigger) {
-          autoUpdate(trigger, rootElement, async () => {
-            const {
-              x,
-              y,
-              middlewareData
-            } = await computePosition(trigger, rootElement, {
-              placement,
-              middleware: [flip(), shift(), hide()]
-            });
-            Object.assign(rootElement.style, {
-              left: `${x}px`,
-              top: `${y}px`,
-              visibility: middlewareData.hide.referenceHidden ? 'hidden' : 'visible',
-              width: props.fullWidth ? `${trigger.offsetWidth}px` : ''
-            });
-          });
-        }
-      }
-    });
-    // #region Click Outside
-    const trigger = toRef(props, 'trigger');
-    onClickOutside(root, close, {
-      ignore: [trigger]
-    });
-    // #endregion
-    // #region Elevation
-    useElevation(root);
-    // #endregion
-    return {
-      isDesktop,
-      isMobile,
-      root,
-      bottomSheet,
-      bottomSheetRoot,
-      handleBottomSheetState,
-      rootStyles,
-      bodyStyles,
-      state,
-      isOpen,
-      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 _vm.state !== 'closed' ? _c('OrTeleport', [_vm.isDesktop && _vm.variant === 'auto' || _vm.variant === 'popover' ? [_c('div', _vm._b({
-    ref: "root",
-    class: _vm.rootStyles
-  }, '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', {
-    ref: "bottomSheet",
-    on: {
-      "update:state": _vm.handleBottomSheetState
-    }
-  }, [_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);
-
-export { PopoverPlacement as P, __vue_component__ as _, PopoverVariant as a };

package/dist/bundled/v2/OrProgress-005c516d.js

@@ -1,317 +0,0 @@
-import _ from 'lodash';
-import { useElementBounding } from '@vueuse/core';
-import { defineComponent, ref, useSlots, computed } from 'vue-demi';
-import { u as useResponsive } from './useResponsive-a02e95b7.js';
-import { u as useClassAttribute } from './useClassAttribute-47fdb016.js';
-import { n as normalizeComponent } from './normalize-component-6e8e3d80.js';
-
-var ProgressColor;
-(function (ProgressColor) {
-  ProgressColor["Auto"] = "auto";
-  ProgressColor["Primary"] = "primary";
-  ProgressColor["Success"] = "success";
-  ProgressColor["Warning"] = "warning";
-  ProgressColor["Error"] = "error";
-})(ProgressColor || (ProgressColor = {}));
-var ProgressType;
-(function (ProgressType) {
-  ProgressType["Linear"] = "linear";
-  ProgressType["Circle"] = "circle";
-})(ProgressType || (ProgressType = {}));
-
-const ProgressRoot = [
-// Typography
-'typography-caption-regular',
-// Theme
-'text-outline', 'dark:text-outline-dark'];
-const ProgressRootTypes = {
-  [ProgressType.Linear]: [
-  // Layout
-  'flex', 'flex-col',
-  // Box
-  'w-full', 'min-w-[160px]', 'max-w-[295px]'],
-  [ProgressType.Circle]: ['-rotate-90']
-};
-const ProgressHeader = [
-// Layout
-'flex', 'flex-row',
-// Sizing
-'mb-[6px]'];
-const ProgressHeaderLabel = [
-// Typography
-'typography-caption-bold',
-// Theme
-'text-on-background', 'dark:text-on-background-dark'];
-const ProgressHeaderPercent = [
-// Sizing
-'ml-auto'];
-const ProgressBarBackground = [
-// Theme
-'stroke-surface-variant', 'dark:stroke-surface-variant-dark'];
-const ProgressBarMain = [
-// Position
-'origin-center',
-// Animation
-'transition-[stroke-dashoffset]'];
-const ProgressBarAnimationTypes = {
-  [ProgressType.Linear]: [
-  // Animation
-  'animate-linear-loader'],
-  [ProgressType.Circle]: [
-  // Animation
-  'animate-circular-loader']
-};
-const ProgressBarColors = {
-  [ProgressColor.Primary]: [
-  // Theme
-  'stroke-primary-hover', 'dark:stroke-primary-hover-dark'],
-  [ProgressColor.Success]: [
-  // Theme
-  'stroke-success-hover', 'dark:stroke-success-hover-dark'],
-  [ProgressColor.Warning]: [
-  // Theme
-  'stroke-warning-hover', 'dark:stroke-warning-hover-dark'],
-  [ProgressColor.Error]: [
-  // Theme
-  'stroke-error-hover', 'dark:stroke-error-hover-dark']
-};
-const ProgressFooter = [
-// Sizing
-'mt-[2px]'];
-
-var script = defineComponent({
-  name: 'OrProgress',
-  inheritAttrs: false,
-  props: {
-    maxValue: {
-      type: Number,
-      required: false,
-      default: 1,
-      validator: value => _.isNumber(value) && value != 0
-    },
-    value: {
-      type: Number,
-      required: false,
-      default: null
-    },
-    progress: {
-      type: Number,
-      required: false,
-      default: null,
-      validator: value => _.isNumber(value) && value >= 0 && value <= 1
-    },
-    precision: {
-      type: Number,
-      required: false,
-      default: 2,
-      validator: value => _.isNumber(value) && value >= -1
-    },
-    type: {
-      type: String,
-      required: false,
-      default: ProgressType.Linear
-    },
-    color: {
-      type: String,
-      required: false,
-      default: ProgressColor.Auto
-    },
-    loading: {
-      type: Boolean,
-      required: false,
-      default: false
-    }
-  },
-  expose: ['root'],
-  setup(props) {
-    const {
-      isMobile
-    } = useResponsive();
-    // Refs
-    const root = ref();
-    // Slots
-    const {
-      header: headerSlot,
-      label: labelSlot,
-      percent: percentSlot,
-      footer: footerSlot
-    } = useSlots();
-    // State
-    const {
-      width
-    } = useElementBounding(root);
-    const localProgress = computed(() => {
-      var _a, _b, _c;
-      return (_a = props.progress) !== null && _a !== void 0 ? _a : ((_b = props.value) !== null && _b !== void 0 ? _b : 0) / ((_c = props.maxValue) !== null && _c !== void 0 ? _c : 1);
-    });
-    const localValue = computed(() => {
-      var _a, _b, _c;
-      return (_a = props.value) !== null && _a !== void 0 ? _a : ((_b = props.progress) !== null && _b !== void 0 ? _b : 0) * ((_c = props.maxValue) !== null && _c !== void 0 ? _c : 1);
-    });
-    const percent = computed(() => _.round(localProgress.value * 100, props.precision) + '%');
-    const isLinearType = computed(() => props.type === ProgressType.Linear);
-    const isCircleType = computed(() => props.type === ProgressType.Circle);
-    const isShowingHeader = computed(() => !!headerSlot || !!labelSlot || !!percentSlot);
-    const isShowingFooter = computed(() => !!footerSlot);
-    const localColor = computed(() => {
-      if (props.loading) return ProgressColor.Primary;
-      if (props.color === ProgressColor.Auto) {
-        if (localProgress.value <= 0.5) {
-          return ProgressColor.Success;
-        } else if (localProgress.value <= 0.95) {
-          return ProgressColor.Warning;
-        } else {
-          return ProgressColor.Error;
-        }
-      } else {
-        return Object.values(ProgressColor).includes(props.color) ? props.color : ProgressColor.Success;
-      }
-    });
-    const computedSize = computed(() => isMobile.value ? 20 : 16);
-    // Styles
-    const classAttribute = useClassAttribute();
-    const rootStyles = computed(() => ['or-progress', ...ProgressRoot, ...ProgressRootTypes[props.type], classAttribute.value]);
-    const headerStyles = computed(() => [...ProgressHeader]);
-    const labelStyles = computed(() => [...ProgressHeaderLabel]);
-    const percentStyles = computed(() => [...ProgressHeaderPercent]);
-    const footerStyles = computed(() => [...ProgressFooter]);
-    const progressBarBackgroundStyles = computed(() => [...ProgressBarBackground]);
-    const progressBarMainPartStyles = computed(() => [...ProgressBarMain, ...(props.loading ? ProgressBarAnimationTypes[props.type] : []), ...ProgressBarColors[localColor.value]]);
-    const strokeDasharray = computed(() => isLinearType.value ? width.value - 4 :
-    // 2 + 2 px horizontal padding for rounding
-    isCircleType.value ? 14 * Math.PI :
-    // 14 = diameter = viewBox - stroke-width
-    0);
-    const strokeDashoffset = computed(() => props.loading ? undefined : (1 - localProgress.value) * strokeDasharray.value);
-    return {
-      root,
-      rootStyles,
-      headerStyles,
-      labelStyles,
-      percentStyles,
-      footerStyles,
-      progressBarBackgroundStyles,
-      progressBarMainPartStyles,
-      strokeDasharray,
-      strokeDashoffset,
-      localProgress,
-      localValue,
-      percent,
-      isLinearType,
-      isCircleType,
-      isShowingHeader,
-      isShowingFooter,
-      localColor,
-      computedSize
-    };
-  }
-});
-
-/* 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.isLinearType ? [_vm.isShowingHeader ? _c('div', {
-    class: _vm.headerStyles
-  }, [_vm._t("header", function () {
-    return [_c('div', {
-      class: _vm.labelStyles
-    }, [_vm._t("label")], 2), _vm._v(" "), _c('div', {
-      class: _vm.percentStyles
-    }, [_vm._t("percent", function () {
-      return [_vm._v("\n            " + _vm._s(_vm.percent) + "\n          ")];
-    }, {
-      "value": _vm.percent
-    })], 2)];
-  })], 2) : _vm._e(), _vm._v(" "), _c('svg', {
-    attrs: {
-      "width": "100%",
-      "height": "2"
-    }
-  }, [_c('g', {
-    attrs: {
-      "fill": "none",
-      "stroke-width": "2",
-      "stroke-linecap": "round"
-    }
-  }, [_c('line', {
-    class: _vm.progressBarBackgroundStyles,
-    attrs: {
-      "x1": "2",
-      "y1": "50%",
-      "x2": "calc(100% - 2px)",
-      "y2": "50%"
-    }
-  }), _vm._v(" "), _c('line', {
-    class: _vm.progressBarMainPartStyles,
-    attrs: {
-      "x1": "2",
-      "y1": "50%",
-      "x2": "calc(100% - 2px)",
-      "y2": "50%",
-      "stroke-dasharray": _vm.strokeDasharray,
-      "stroke-dashoffset": _vm.strokeDashoffset
-    }
-  })])]), _vm._v(" "), _vm.isShowingFooter ? _c('div', {
-    class: _vm.footerStyles
-  }, [_vm._t("footer", null, {
-    "value": _vm.localValue
-  })], 2) : _vm._e()] : _vm.isCircleType ? [_c('svg', {
-    attrs: {
-      "viewBox": "0 0 16 16",
-      "width": _vm.computedSize,
-      "height": _vm.computedSize
-    }
-  }, [_c('g', {
-    attrs: {
-      "fill": "none",
-      "stroke-width": "2",
-      "stroke-linecap": "round"
-    }
-  }, [_c('circle', {
-    class: _vm.progressBarBackgroundStyles,
-    attrs: {
-      "cx": "50%",
-      "cy": "50%",
-      "r": "7"
-    }
-  }), _vm._v(" "), _c('circle', {
-    class: _vm.progressBarMainPartStyles,
-    attrs: {
-      "cx": "50%",
-      "cy": "50%",
-      "r": "7",
-      "stroke-dasharray": _vm.strokeDasharray,
-      "stroke-dashoffset": _vm.strokeDashoffset
-    }
-  })])])] : _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 { ProgressColor as P, __vue_component__ as _, ProgressType as a };