@onereach/ui-components 20.1.0 → 20.1.2

package/dist/esm-deps/components/or-loader-v3/index.js

@@ -1,117 +0,0 @@
-import { useElementSize } from '@vueuse/core';
-import { defineComponent, ref, computed } from 'vue';
-
-var LoaderVariant;
-(function (LoaderVariant) {
-  LoaderVariant["Circular"] = "circular";
-  LoaderVariant["Linear"] = "linear";
-  LoaderVariant["Text"] = "text";
-})(LoaderVariant || (LoaderVariant = {}));
-var LoaderColor;
-(function (LoaderColor) {
-  LoaderColor["Primary"] = "primary";
-  LoaderColor["Danger"] = "danger";
-  LoaderColor["Inherit"] = "inherit";
-})(LoaderColor || (LoaderColor = {}));
-var LoaderSize;
-(function (LoaderSize) {
-  LoaderSize["M"] = "m";
-  LoaderSize["S"] = "s";
-})(LoaderSize || (LoaderSize = {}));
-
-const LoaderRoot = [
-// Layout
-'flex', 'flex-col', 'gap-md'];
-const LoaderRootColors = {
-  'primary': [
-  // Theme
-  'stroke-primary', 'dark:stroke-primary-dark'],
-  'danger': [
-  // Theme
-  'stroke-error', 'dark:stroke-error-dark'],
-  'inherit': []
-};
-const LoaderContainer = ['flex', 'justify-center'];
-const LoaderTitle = ['typography-headline-2', 'text-center', 'text-on-background', 'dark:text-on-background-dark'];
-const LoaderDescription = ['typography-body-2-regular', 'text-center', 'text-outline', 'dark:text-outline-dark'];
-
-var script = defineComponent({
-  name: 'OrLoader',
-  props: {
-    variant: {
-      type: String,
-      default: () => LoaderVariant.Circular
-    },
-    /**
-     * Defines a semantic color of the loading indicator.
-     * Use `'inherit'` option to set your own color from the parent (not recommended).
-     */
-    color: {
-      type: String,
-      default: () => LoaderColor.Primary
-    },
-    /**
-     * Defines a diameter of the circular loader. Ignored for linear one.
-     */
-    size: {
-      type: String,
-      default: () => LoaderSize.M
-    },
-    title: {
-      type: String,
-      default: undefined
-    },
-    description: {
-      type: String,
-      default: undefined
-    },
-    text: {
-      type: String,
-      default: 'Loading'
-    }
-  },
-  expose: ['root'],
-  setup(props) {
-    // Refs
-    const root = ref();
-    const {
-      width: loaderContainerWidth
-    } = useElementSize(root);
-    // Styles
-    const rootStyles = computed(() => ['or-loader-v3', ...LoaderRoot, ...LoaderRootColors[props.color]]);
-    const titleStyles = computed(() => [...LoaderTitle]);
-    const descriptionStyles = computed(() => [...LoaderDescription]);
-    const containerStyles = computed(() => [...LoaderContainer]);
-    // State
-    // eslint-disable-next-line vue/return-in-computed-property
-    const computedSize = computed(() => {
-      switch (props.size) {
-        case LoaderSize.M:
-          return 20;
-        case LoaderSize.S:
-          return 16;
-      }
-    });
-    const strokeWidth = computed(() => {
-      return loaderContainerWidth.value ? loaderContainerWidth.value - 2 : '100%';
-    });
-    /**
-     * Preserves circular loading indicator from shrinking caused by external styles.
-     */
-    const wrapperStyle = computed(() => {
-      return `min-width: ${computedSize.value}px;`;
-    });
-    return {
-      root,
-      rootStyles,
-      containerStyles,
-      titleStyles,
-      descriptionStyles,
-      computedSize,
-      strokeWidth,
-      wrapperStyle
-    };
-  }
-});
-
-export { LoaderColor, LoaderSize, LoaderVariant, script as OrLoaderV3 };

package/dist/esm-deps/components/or-menu-v3/index.js

@@ -1,90 +0,0 @@
-import { defineComponent, ref, computed, toRef } from 'vue';
-import { b as te } from '../../useValidationAttributes-DxhcSj_h-3380c3cf.js';
-import '../../OrPopover-bd078650.js';
-import { OrPopoverV3 as script$1, PopoverPlacement } from '../or-popover-v3/index.js';
-import '../../dom-CwV-xS38-5babad01.js';
-import 'lodash/get';
-import 'lodash/isElement';
-import '@vueuse/core';
-import '../../extractCssVarName-IHa2pGlF-614fb8d2.js';
-import '@floating-ui/core';
-import '@floating-ui/utils';
-import '@floating-ui/utils/dom';
-import '../or-bottom-sheet-v3/index.js';
-import '../../OrOverlay-d67e7093.js';
-import '../or-overlay-v3/index.js';
-import '../or-teleport-v3/index.js';
-
-const Menu = [
-// Layout
-'overflow-y-auto',
-// Box
-'min-w-[160px]', 'md:max-w-[256px]', 'max-h-[340px]'];
-
-var script = defineComponent({
-  name: 'OrMenu',
-  components: {
-    OrPopover: script$1
-  },
-  inheritAttrs: false,
-  props: {
-    isOpen: {
-      type: Boolean,
-      default: false
-    },
-    trigger: {
-      type: Object,
-      default: undefined
-    },
-    placement: {
-      type: String,
-      default: () => PopoverPlacement.Bottom
-    },
-    offset: {
-      type: [Number, Object, Function],
-      default: 8
-    },
-    // TODO: Remove after migration to Vue 3
-    additionalStyles: {
-      type: Array,
-      default: () => []
-    }
-  },
-  emits: ['update:state', 'open', 'close'],
-  expose: ['root', 'state', 'open', 'close', 'toggle'],
-  setup(props, context) {
-    // Refs
-    const root = ref();
-    // Styles
-    const rootStyles = computed(() => ['or-menu-v3', ...Menu]);
-    const popoverStyles = computed(() => ['or-menu-popover-v3']);
-    // State
-    const {
-      state,
-      open,
-      close,
-      toggle
-    } = te(toRef(props, 'isOpen'), context.emit);
-    // Handlers
-    function onClick(event) {
-      const path = event.composedPath();
-      if (path.some(({
-        classList
-      }) => classList === null || classList === void 0 ? void 0 : classList.contains('or-menu-item-v3'))) {
-        close();
-      }
-    }
-    return {
-      root,
-      rootStyles,
-      popoverStyles,
-      state,
-      open,
-      close,
-      toggle,
-      onClick
-    };
-  }
-});
-
-export { script as OrMenuV3 };

package/dist/esm-deps/components/or-overlay-v3/index.js

@@ -1,63 +0,0 @@
-import { useScrollLock } from '@vueuse/core';
-import { openBlock, createBlock, Teleport, renderSlot, defineComponent, ref, computed } from 'vue';
-import { J } from '../../useValidationAttributes-DxhcSj_h-3380c3cf.js';
-import { OrTeleportV3 as script$1 } from '../or-teleport-v3/index.js';
-import '../../dom-CwV-xS38-5babad01.js';
-import 'lodash/get';
-import 'lodash/isElement';
-
-function render(_ctx, _cache, $props, $setup, $data, $options) {
-  return openBlock(), createBlock(Teleport, {
-    to: _ctx.to,
-    disabled: _ctx.disabled
-  }, [renderSlot(_ctx.$slots, "default")], 8 /* PROPS */, ["to", "disabled"]);
-}
-
-script$1.render = render;
-script$1.__file = "src/components/or-teleport-v3/OrTeleport.vue3.vue";
-
-const Overlay = [
-// Position
-'fixed inset-0',
-// Layout
-'layout-row justify-center',
-// Theme
-'theme-background-overlay', 'dark:theme-background-overlay-dark', 'theme-foreground-base', 'dark:theme-foreground-base'];
-
-var script = defineComponent({
-  name: 'OrOverlay',
-  components: {
-    OrTeleport: script$1
-  },
-  inheritAttrs: false,
-  props: {
-    fullscreen: {
-      type: Boolean,
-      default: false
-    }
-  },
-  expose: ['root'],
-  setup(props, context) {
-    // Refs
-    const root = ref();
-    // Styles
-    const rootStyles = computed(() => ['or-overlay-v3', ...Overlay]);
-    // Effects
-    // #region Elevation
-    J(root);
-    // #endregion
-    // #region Scroll Lock
-    useScrollLock(document.body, true);
-    // #endregion
-    // Handlers
-    function onClick(event) {
-    }
-    return {
-      root,
-      rootStyles,
-      onClick
-    };
-  }
-});
-
-export { script as OrOverlayV3 };

package/dist/esm-deps/components/or-pagination-v3/index.js

@@ -1,232 +0,0 @@
-import { defineComponent, ref, computed, toRef } from 'vue';
-import { r as re, n as ne } from '../../useValidationAttributes-DxhcSj_h-3380c3cf.js';
-import '../../OrButton-91f48227.js';
-import { OrButtonV3 as script$1 } from '../or-button-v3/index.js';
-import '../../OrIcon-cd8db2b5.js';
-import { OrIconV3 as script$2 } from '../or-icon-v3/index.js';
-import '../../OrMenu-13beee12.js';
-import { OrMenuV3 as script$3 } from '../or-menu-v3/index.js';
-import '../../OrMenuItem-c40a275b.js';
-import { OrMenuItemV3 as script$4 } from '../or-menu-item-v3/index.js';
-import '../../dom-CwV-xS38-5babad01.js';
-import 'lodash/get';
-import 'lodash/isElement';
-import '@vueuse/core';
-import '../../props-bba3dca8.js';
-import '../../constants-57e8b5da.js';
-import '../../OrLoader-4e331586.js';
-import '../or-loader-v3/index.js';
-import '../../OrPopover-bd078650.js';
-import '../or-popover-v3/index.js';
-import '../../extractCssVarName-IHa2pGlF-614fb8d2.js';
-import '@floating-ui/core';
-import '@floating-ui/utils';
-import '@floating-ui/utils/dom';
-import '../or-bottom-sheet-v3/index.js';
-import '../../OrOverlay-d67e7093.js';
-import '../or-overlay-v3/index.js';
-import '../or-teleport-v3/index.js';
-import '../../OrIconButton-b7d4175c.js';
-import '../or-icon-button-v3/index.js';
-import '../../OrTooltip-62181b78.js';
-import '../or-tooltip-v3/index.js';
-
-const Pagination = [
-// Layout
-'layout-row justify-between md:justify-end',
-// Spacing
-'gap-xl',
-// Typography
-'typography-caption-regular',
-// Theme
-'theme-foreground-outline', 'dark:theme-foreground-outline-dark'];
-const PaginationLimitGroup = [
-// Layout
-'layout-row shrink-0',
-// Spacing
-'gap-lg md:gap-md'];
-const PaginationOffsetGroup = [
-// Layout
-'layout-row shrink-0',
-// Spacing
-'gap-md'];
-const PaginationItem = [
-// Typography
-'typography-caption-regular',
-// Typography (activated)
-'activated:typography-caption-bold'];
-
-var script = defineComponent({
-  name: 'OrPagination',
-  components: {
-    OrButton: script$1,
-    OrIcon: script$2,
-    OrMenu: script$3,
-    OrMenuItem: script$4
-  },
-  model: {
-    prop: 'modelValue',
-    event: 'update:modelValue'
-  },
-  props: {
-    modelValue: {
-      type: undefined,
-      default: undefined
-    },
-    length: {
-      type: Number,
-      required: true
-    },
-    options: {
-      type: Array,
-      default: () => [50, 20, 10, 5]
-    },
-    features: {
-      type: Object,
-      default: () => ({
-        limit: true,
-        range: true
-      })
-    }
-  },
-  emits: ['update:modelValue'],
-  expose: ['root'],
-  setup(props, context) {
-    // Refs & Styles
-    const root = ref();
-    const rootStyles = computed(() => ['or-pagination-v3', ...Pagination]);
-    const limitButton = ref();
-    const limitButtonRoot = computed(() => {
-      var _a;
-      return (_a = limitButton.value) === null || _a === void 0 ? void 0 : _a.root;
-    });
-    const limitMenu = ref();
-    const limitMenuRoot = computed(() => {
-      var _a;
-      return (_a = limitMenu.value) === null || _a === void 0 ? void 0 : _a.root;
-    });
-    const limitGroupStyles = computed(() => [...PaginationLimitGroup]);
-    const offsetButton = ref();
-    const offsetButtonRoot = computed(() => {
-      var _a;
-      return (_a = offsetButton.value) === null || _a === void 0 ? void 0 : _a.root;
-    });
-    const offsetMenu = ref();
-    const offsetMenuRoot = computed(() => {
-      var _a;
-      return (_a = offsetMenu.value) === null || _a === void 0 ? void 0 : _a.root;
-    });
-    const offsetGroupStyles = computed(() => [...PaginationOffsetGroup]);
-    const itemStyles = computed(() => [...PaginationItem]);
-    // State
-    const model = re(toRef(props, 'modelValue'), context.emit);
-    const currentLimit = computed({
-      get: () => {
-        var _a, _b;
-        return (_b = (_a = model.value) === null || _a === void 0 ? void 0 : _a.limit) !== null && _b !== void 0 ? _b : props.options[0];
-      },
-      set: value => {
-        model.value = {
-          limit: value,
-          offset: 0
-        };
-      }
-    });
-    const currentOffset = computed({
-      get: () => {
-        var _a, _b;
-        return (_b = (_a = model.value) === null || _a === void 0 ? void 0 : _a.offset) !== null && _b !== void 0 ? _b : 0;
-      },
-      set: value => {
-        model.value = {
-          limit: currentLimit.value,
-          offset: value
-        };
-      }
-    });
-    const currentPage = computed({
-      get: () => Math.floor(currentOffset.value / currentLimit.value) + 1,
-      set: value => {
-        currentOffset.value = (value - 1) * currentLimit.value;
-      }
-    });
-    const firstPage = computed(() => {
-      return 1;
-    });
-    const lastPage = computed(() => {
-      return Math.ceil(props.length / currentLimit.value);
-    });
-    const buttonGroup = computed(() => {
-      const pages = Array.from({
-        length: lastPage.value
-      }, (_, index) => index + 1);
-      switch (true) {
-        case lastPage.value <= 7:
-          return pages;
-        case currentPage.value < firstPage.value + 4:
-          return [...pages.slice(0, 5), '…', lastPage.value];
-        case currentPage.value > lastPage.value - 4:
-          return [firstPage.value, '…', ...pages.slice(-5)];
-        default:
-          return pages.map(page => {
-            switch (true) {
-              case page > firstPage.value && page < currentPage.value - 1:
-              case page < lastPage.value && page > currentPage.value + 1:
-                return '…';
-              default:
-                return page;
-            }
-          }).reduce((accumulator, page) => {
-            if (accumulator[accumulator.length - 1] === page) {
-              return accumulator;
-            }
-            return [...accumulator, page];
-          }, []);
-      }
-    });
-    // Methods
-    function toPreviousPage() {
-      currentPage.value = currentPage.value - 1;
-    }
-    function toNextPage() {
-      currentPage.value = currentPage.value + 1;
-    }
-    function toPage(page) {
-      currentPage.value = page;
-    }
-    // Helpers
-    const {
-      isDesktop,
-      isMobile
-    } = ne();
-    return {
-      root,
-      rootStyles,
-      limitButton,
-      limitButtonRoot,
-      limitMenu,
-      limitMenuRoot,
-      limitGroupStyles,
-      offsetButton,
-      offsetButtonRoot,
-      offsetMenu,
-      offsetMenuRoot,
-      offsetGroupStyles,
-      itemStyles,
-      model,
-      currentLimit,
-      currentOffset,
-      currentPage,
-      firstPage,
-      lastPage,
-      buttonGroup,
-      toPreviousPage,
-      toNextPage,
-      toPage,
-      isDesktop,
-      isMobile
-    };
-  }
-});
-
-export { script as OrPaginationV3 };