@onereach/ui-components 20.1.0 → 20.1.2

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

@@ -0,0 +1,92 @@
+import { defineComponent, ref, computed, resolveComponent, openBlock, createBlock, withCtx, createElementVNode, mergeProps, renderSlot } from 'vue';
+import { useScrollLock } from '@vueuse/core';
+import { J } from '../OrAutocompleteV3-8c6de221.js';
+import { OrTeleportV3 as script$1 } from '../or-teleport-v3/index.js';
+import '@onereach/styles/screens.json';
+import '@onereach/styles/tailwind.config.json';
+import 'lodash/get';
+import 'lodash/isElement';
+import '../or-error-v3/index.js';
+import '../or-hint-v3/index.js';
+import '../or-icon-button-v3/index.js';
+import '../or-icon-v3/index.js';
+import '../or-tooltip-v3/index.js';
+import '../or-popover-v3/index.js';
+import '@floating-ui/dom';
+import '../or-bottom-sheet-v3/index.js';
+import './index.js';
+import '../or-input-box-v3/index.js';
+import '../or-input-v3/index.js';
+import '../OrInlineInputV3-061441a3.js';
+import '../or-inline-input-box-v3/index.js';
+import '../or-text-v3/index.js';
+import '../or-label-v3/index.js';
+import '../or-loader-v3/index.js';
+import '../or-menu-item-v3/index.js';
+import '../or-tag-input-v3/index.js';
+import '../or-tags-v3/index.js';
+import '../or-button-v3/index.js';
+import '../or-tag-v3/index.js';
+
+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
+    };
+  }
+});
+
+function render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_OrTeleport = resolveComponent("OrTeleport");
+  return openBlock(), createBlock(_component_OrTeleport, {
+    disabled: !_ctx.fullscreen
+  }, {
+    default: withCtx(() => [createElementVNode("div", mergeProps(_ctx.$attrs, {
+      ref: 'root',
+      class: _ctx.rootStyles,
+      onClick: _cache[0] || (_cache[0] = (...args) => _ctx.onClick && _ctx.onClick(...args))
+    }), [renderSlot(_ctx.$slots, "default")], 16 /* FULL_PROPS */)]),
+    _: 3 /* FORWARDED */
+  }, 8 /* PROPS */, ["disabled"]);
+}
+
+script.render = render;
+script.__file = "src/components/or-overlay-v3/OrOverlay.vue";
+
+export { script as OrOverlayV3 };

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

@@ -0,0 +1,356 @@
+import { defineComponent, ref, computed, toRef, resolveComponent, openBlock, createElementBlock, normalizeClass, createElementVNode, createTextVNode, createVNode, withCtx, toDisplayString, Fragment, renderList, createBlock, createCommentVNode } from 'vue';
+import { r as re, n as ne } from '../OrAutocompleteV3-8c6de221.js';
+import { OrButtonV3 as script$1 } from '../or-button-v3/index.js';
+import { OrIconV3 as script$2 } from '../or-icon-v3/index.js';
+import { OrMenuV3 as script$3 } from '../or-menu-v3/index.js';
+import { OrMenuItemV3 as script$4 } from '../or-menu-item-v3/index.js';
+import '@vueuse/core';
+import '@onereach/styles/screens.json';
+import '@onereach/styles/tailwind.config.json';
+import 'lodash/get';
+import 'lodash/isElement';
+import '../or-error-v3/index.js';
+import '../or-hint-v3/index.js';
+import '../or-icon-button-v3/index.js';
+import '../or-tooltip-v3/index.js';
+import '../or-popover-v3/index.js';
+import '@floating-ui/dom';
+import '../or-bottom-sheet-v3/index.js';
+import '../or-overlay-v3/index.js';
+import '../or-teleport-v3/index.js';
+import '../or-input-box-v3/index.js';
+import '../or-input-v3/index.js';
+import '../OrInlineInputV3-061441a3.js';
+import '../or-inline-input-box-v3/index.js';
+import '../or-text-v3/index.js';
+import '../or-label-v3/index.js';
+import '../or-loader-v3/index.js';
+import '../or-tag-input-v3/index.js';
+import '../or-tags-v3/index.js';
+import '../or-tag-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
+    };
+  }
+});
+
+const _hoisted_1 = {
+  key: 0,
+  class: /*#__PURE__*/normalizeClass(['layout-row', 'gap-sm'])
+};
+function render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_OrIcon = resolveComponent("OrIcon");
+  const _component_OrButton = resolveComponent("OrButton");
+  const _component_OrMenuItem = resolveComponent("OrMenuItem");
+  const _component_OrMenu = resolveComponent("OrMenu");
+  return openBlock(), createElementBlock("div", {
+    ref: 'root',
+    class: normalizeClass(_ctx.rootStyles)
+  }, [createElementVNode("div", {
+    class: normalizeClass(_ctx.limitGroupStyles)
+  }, [_ctx.features.limit ? (openBlock(), createElementBlock("div", _hoisted_1, [createTextVNode(" Per page: "), createVNode(_component_OrButton, {
+    ref: 'limitButton',
+    class: normalizeClass(_ctx.itemStyles),
+    variant: 'link',
+    color: 'inherit',
+    activated: true,
+    onClick: _cache[0] || (_cache[0] = $event => _ctx.limitMenu && _ctx.limitMenu.toggle())
+  }, {
+    default: withCtx(() => [createTextVNode(toDisplayString(_ctx.currentLimit) + " ", 1 /* TEXT */), createVNode(_component_OrIcon, {
+      icon: _ctx.limitMenu && _ctx.limitMenu.state === 'open' ? 'arrow_drop_up' : 'arrow_drop_down'
+    }, null, 8 /* PROPS */, ["icon"])]),
+    _: 1 /* STABLE */
+  }, 8 /* PROPS */, ["class"]), createVNode(_component_OrMenu, {
+    ref: 'limitMenu',
+    "additional-styles": ['min-w-[60px]'],
+    trigger: _ctx.limitButtonRoot,
+    placement: 'top'
+  }, {
+    default: withCtx(() => [(openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.options, limit => {
+      return openBlock(), createBlock(_component_OrMenuItem, {
+        key: limit,
+        selected: _ctx.currentLimit === limit,
+        onClick: $event => {
+          _ctx.currentLimit = limit;
+          _ctx.limitMenu && _ctx.limitMenu.close();
+        }
+      }, {
+        default: withCtx(() => [createTextVNode(toDisplayString(limit), 1 /* TEXT */)]),
+        _: 2 /* DYNAMIC */
+      }, 1032 /* PROPS, DYNAMIC_SLOTS */, ["selected", "onClick"]);
+    }), 128 /* KEYED_FRAGMENT */))]),
+    _: 1 /* STABLE */
+  }, 8 /* PROPS */, ["trigger"])])) : createCommentVNode("v-if", true), _ctx.features.range ? (openBlock(), createElementBlock(Fragment, {
+    key: 1
+  }, [createTextVNode(toDisplayString(_ctx.currentOffset + 1) + "-" + toDisplayString(Math.min(_ctx.currentOffset + _ctx.currentLimit, _ctx.length)) + " of " + toDisplayString(_ctx.length), 1 /* TEXT */)], 64 /* STABLE_FRAGMENT */)) : createCommentVNode("v-if", true)], 2 /* CLASS */), createElementVNode("div", {
+    class: normalizeClass(_ctx.offsetGroupStyles)
+  }, [createVNode(_component_OrButton, {
+    class: normalizeClass(_ctx.itemStyles),
+    variant: 'link',
+    color: 'inherit',
+    disabled: _ctx.currentPage === _ctx.firstPage,
+    onClick: _cache[1] || (_cache[1] = $event => _ctx.toPreviousPage())
+  }, {
+    default: withCtx(() => [createVNode(_component_OrIcon, {
+      icon: 'keyboard_arrow_left'
+    })]),
+    _: 1 /* STABLE */
+  }, 8 /* PROPS */, ["class", "disabled"]), _ctx.isDesktop ? (openBlock(true), createElementBlock(Fragment, {
+    key: 0
+  }, renderList(_ctx.buttonGroup, (page, index) => {
+    return openBlock(), createBlock(_component_OrButton, {
+      key: index,
+      class: normalizeClass(_ctx.itemStyles),
+      variant: 'link',
+      color: 'inherit',
+      activated: _ctx.currentPage === page,
+      onClick: $event => typeof page === 'number' && _ctx.toPage(page)
+    }, {
+      default: withCtx(() => [createTextVNode(toDisplayString(page), 1 /* TEXT */)]),
+      _: 2 /* DYNAMIC */
+    }, 1032 /* PROPS, DYNAMIC_SLOTS */, ["class", "activated", "onClick"]);
+  }), 128 /* KEYED_FRAGMENT */)) : createCommentVNode("v-if", true), _ctx.isMobile ? (openBlock(), createElementBlock(Fragment, {
+    key: 1
+  }, [createVNode(_component_OrButton, {
+    ref: 'offsetButton',
+    class: normalizeClass(_ctx.itemStyles),
+    variant: 'link',
+    color: 'inherit',
+    activated: true,
+    onClick: _cache[2] || (_cache[2] = $event => _ctx.offsetMenu && _ctx.offsetMenu.open())
+  }, {
+    default: withCtx(() => [createTextVNode(toDisplayString(_ctx.currentPage) + " ", 1 /* TEXT */), createVNode(_component_OrIcon, {
+      icon: _ctx.offsetMenu && _ctx.offsetMenu.state === 'open' ? 'arrow_drop_up' : 'arrow_drop_down'
+    }, null, 8 /* PROPS */, ["icon"])]),
+    _: 1 /* STABLE */
+  }, 8 /* PROPS */, ["class"]), createVNode(_component_OrMenu, {
+    ref: 'offsetMenu',
+    "additional-styles": ['min-w-[60px]'],
+    trigger: _ctx.offsetButtonRoot,
+    placement: 'top'
+  }, {
+    default: withCtx(() => [(openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.lastPage, page => {
+      return openBlock(), createBlock(_component_OrMenuItem, {
+        key: page,
+        selected: _ctx.currentPage === page,
+        onClick: $event => {
+          _ctx.currentPage = page;
+          _ctx.offsetMenu && _ctx.offsetMenu.close();
+        }
+      }, {
+        default: withCtx(() => [createTextVNode(toDisplayString(page), 1 /* TEXT */)]),
+        _: 2 /* DYNAMIC */
+      }, 1032 /* PROPS, DYNAMIC_SLOTS */, ["selected", "onClick"]);
+    }), 128 /* KEYED_FRAGMENT */))]),
+    _: 1 /* STABLE */
+  }, 8 /* PROPS */, ["trigger"])], 64 /* STABLE_FRAGMENT */)) : createCommentVNode("v-if", true), createVNode(_component_OrButton, {
+    class: normalizeClass(_ctx.itemStyles),
+    variant: 'link',
+    color: 'inherit',
+    disabled: _ctx.currentPage === _ctx.lastPage,
+    onClick: _cache[3] || (_cache[3] = $event => _ctx.toNextPage())
+  }, {
+    default: withCtx(() => [createVNode(_component_OrIcon, {
+      icon: 'keyboard_arrow_right'
+    })]),
+    _: 1 /* STABLE */
+  }, 8 /* PROPS */, ["class", "disabled"])], 2 /* CLASS */)], 2 /* CLASS */);
+}
+
+script.render = render;
+script.__file = "src/components/or-pagination-v3/OrPagination.vue";
+
+export { script as OrPaginationV3 };