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

package/dist/bundled/v3/OrNotification.vue_vue_type_script_lang-07163a83.js

@@ -0,0 +1,82 @@
+import { defineComponent } from 'vue';
+import './OrIcon-1cae8a64.js';
+import './OrIconButton-e637158e.js';
+import { s as script$1 } from './OrIcon.vue_vue_type_script_lang-7e3a17fe.js';
+import { s as script$2 } from './OrIconButton.vue_vue_type_script_lang-40547ab0.js';
+
+var OR_NOTIFICATION_TYPE;
+(function (OR_NOTIFICATION_TYPE) {
+  OR_NOTIFICATION_TYPE["INFO"] = "info";
+  OR_NOTIFICATION_TYPE["ERROR"] = "error";
+  OR_NOTIFICATION_TYPE["WARNING"] = "warning";
+  OR_NOTIFICATION_TYPE["SUCCESS"] = "success";
+})(OR_NOTIFICATION_TYPE || (OR_NOTIFICATION_TYPE = {}));
+var OR_NOTIFICATION_SIZE;
+(function (OR_NOTIFICATION_SIZE) {
+  OR_NOTIFICATION_SIZE["DEFAULT"] = "default";
+  OR_NOTIFICATION_SIZE["INLINE"] = "inline";
+})(OR_NOTIFICATION_SIZE || (OR_NOTIFICATION_SIZE = {}));
+
+/** HTML links are styled by default to match notification type */
+var script = defineComponent({
+  name: 'OrNotification',
+  components: {
+    OrIcon: script$1,
+    OrIconButton: script$2
+  },
+  props: {
+    /** A simple text content can be provided as a prop */
+    content: {
+      type: String,
+      default: ''
+    },
+    /** Icon can be overridden with prop or slot regardless of notification type */
+    icon: {
+      type: String,
+      default: ''
+    },
+    /** Type can be a blank value, for black and white notification */
+    type: {
+      type: String,
+      default: OR_NOTIFICATION_TYPE.INFO
+    },
+    size: {
+      type: String,
+      default: OR_NOTIFICATION_SIZE.DEFAULT
+    },
+    canDelete: {
+      type: Boolean,
+      default: false
+    }
+  },
+  emits: ['close'],
+  computed: {
+    states() {
+      /* This type has no styles but is present on the element for user customization */
+      const BLANK_TYPE = 'blank';
+      return [`is-type-${this.type || BLANK_TYPE}`, `is-size-${this.size}`];
+    },
+    iconByType() {
+      const DEFAULT_ICON = 'info';
+      const TYPE_TO_ICON_MAP = {
+        [OR_NOTIFICATION_TYPE.INFO]: 'info',
+        [OR_NOTIFICATION_TYPE.ERROR]: 'error',
+        [OR_NOTIFICATION_TYPE.WARNING]: 'warning',
+        [OR_NOTIFICATION_TYPE.SUCCESS]: 'check_circle'
+      };
+      return this.icon || TYPE_TO_ICON_MAP[this.type] || DEFAULT_ICON;
+    },
+    iconColorByType() {
+      const DEFAULT_COLOR = 'black';
+      const COLOR_TO_ICON_MAP = {
+        [OR_NOTIFICATION_TYPE.INFO]: 'primary',
+        [OR_NOTIFICATION_TYPE.ERROR]: 'error',
+        [OR_NOTIFICATION_TYPE.WARNING]: 'warning',
+        [OR_NOTIFICATION_TYPE.SUCCESS]: 'success'
+      };
+      return COLOR_TO_ICON_MAP[this.type] || DEFAULT_COLOR;
+    }
+  }
+});
+
+export { OR_NOTIFICATION_TYPE as O, OR_NOTIFICATION_SIZE as a, script as s };

package/dist/bundled/v3/OrNotification.vue_vue_type_script_lang-c886ae51.js

@@ -0,0 +1,112 @@
+import { defineComponent, ref, computed } from 'vue';
+import './OrIcon-d878b768.js';
+import './OrIconButton-cd62526d.js';
+import { u as useClassAttribute } from './useClassAttribute-00888f78.js';
+import { s as script$1 } from './OrIcon.vue_vue_type_script_lang-a119a715.js';
+import { s as script$2 } from './OrIconButton.vue_vue_type_script_lang-aefcf30d.js';
+
+var NotificationVariant;
+(function (NotificationVariant) {
+  NotificationVariant["Success"] = "success";
+  NotificationVariant["Warning"] = "warning";
+  NotificationVariant["Error"] = "error";
+  NotificationVariant["Info"] = "info";
+})(NotificationVariant || (NotificationVariant = {}));
+
+const NotificationRoot = [
+// Layout
+'layout-row !items-start',
+// Shape
+'rounded-md',
+// Spacing
+'px-md', 'py-md', 'gap-md',
+// Typography
+'typography-body-2-regular',
+// Typography (links)
+'links:typography-body-2-bold',
+// Theme
+'theme-foreground-default', 'dark:theme-foreground-default-dark',
+// Elevation
+'shadow-contextual', 'dark:shadow-contextual-dark'];
+const NotificationRootVariants = {
+  'success': [
+  // Theme
+  'theme-background-success-container', 'dark:theme-background-success-container-dark',
+  // Theme (links)
+  'links:theme-foreground-success', 'dark:links:theme-foreground-success-dark'],
+  'warning': [
+  // Theme
+  'theme-background-warning-container', 'dark:theme-background-warning-container-dark',
+  // Theme (links)
+  'links:theme-foreground-warning', 'dark:links:theme-foreground-warning-dark'],
+  'error': [
+  // Theme
+  'theme-background-error-container', 'dark:theme-background-error-container-dark',
+  // Theme (links)
+  'links:theme-foreground-error', 'dark:links:theme-foreground-error-dark'],
+  'info': [
+  // Theme
+  'theme-background-primary-container', 'dark:theme-background-primary-container-dark',
+  // Theme (links)
+  'links:theme-foreground-primary', 'dark:links:theme-foreground-primary-dark']
+};
+const NotificationIcon = [];
+const NotificationIconVariants = {
+  'success': [
+  // Theme
+  'theme-foreground-success', 'dark:theme-foreground-success-dark'],
+  'warning': [
+  // Theme
+  'theme-foreground-warning', 'dark:theme-foreground-warning-dark'],
+  'error': [
+  // Theme
+  'theme-foreground-error', 'dark:theme-foreground-error-dark'],
+  'info': [
+  // Theme
+  'theme-foreground-primary', 'dark:theme-foreground-primary-dark']
+};
+
+var script = defineComponent({
+  name: 'OrNotification',
+  components: {
+    OrIcon: script$1,
+    OrIconButton: script$2
+  },
+  inheritAttrs: false,
+  props: {
+    variant: {
+      type: String,
+      default: NotificationVariant.Info
+    }
+  },
+  expose: ['root'],
+  setup(props) {
+    // Refs
+    const root = ref();
+    // Styles
+    const classAttribute = useClassAttribute();
+    const rootStyles = computed(() => ['or-notification', ...NotificationRoot, ...NotificationRootVariants[props.variant], classAttribute.value]);
+    const iconStyles = computed(() => [...NotificationIcon, ...NotificationIconVariants[props.variant]]);
+    // State
+    const icon = computed(() => {
+      switch (props.variant) {
+        case 'success':
+          return 'check_circle';
+        case 'warning':
+          return 'warning';
+        case 'error':
+          return 'error';
+        case 'info':
+          return 'info';
+      }
+    });
+    return {
+      root,
+      rootStyles,
+      iconStyles,
+      icon
+    };
+  }
+});
+
+export { NotificationVariant as N, script as s };

package/dist/bundled/v3/OrOverflowMenu.vue_vue_type_script_lang-0397533d.js

@@ -0,0 +1,135 @@
+import { defineComponent, resolveComponent, openBlock, createElementBlock, createVNode, withModifiers, ref } from 'vue';
+import { useToggle, onClickOutside } from '@vueuse/core';
+import './OrButton-ec723bb7.js';
+import { s as script$2 } from './OrButton.vue_vue_type_script_lang-ffc66d00.js';
+import { s as styleInject } from './style-inject.es-4c6f2515.js';
+import './OrIconButton-e637158e.js';
+import './OrFloating-b6672a37.js';
+import { s as script$3 } from './OrIconButton.vue_vue_type_script_lang-40547ab0.js';
+import { s as script$4, O as OrFloatingPlacements } from './OrFloating.vue_vue_type_script_lang-8bf2b7ae.js';
+
+var script$1 = defineComponent({
+  name: 'OrOverflowMenuItem',
+  components: {
+    OrButton: script$2
+  },
+  props: {
+    icon: {
+      type: String,
+      required: false,
+      default: null
+    },
+    label: {
+      type: String,
+      required: true
+    },
+    isDisabled: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    closeOnClick: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    handler: {
+      type: Function,
+      required: true
+    }
+  },
+  emits: ['close'],
+  methods: {
+    onClick() {
+      this.handler();
+      if (this.closeOnClick) {
+        this.$emit('close');
+      }
+    }
+  }
+});
+
+const _hoisted_1 = {
+  class: "or-overflow-menu-item"
+};
+function render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_or_button = resolveComponent("or-button");
+  return openBlock(), createElementBlock("div", _hoisted_1, [createVNode(_component_or_button, {
+    type: "text",
+    color: "neutral-4",
+    icon: _ctx.icon,
+    content: _ctx.label,
+    "is-disabled": _ctx.isDisabled,
+    onClick: withModifiers(_ctx.onClick, ["prevent"])
+  }, null, 8 /* PROPS */, ["icon", "content", "is-disabled", "onClick"])]);
+}
+
+var css_248z = "/**\n * A simple way to manage mobile breakpoints described in https://davidwalsh.name/write-media-queries-sass.\n * Can be further extended using following approach https://rimdev.io/making-media-query-mixins-with-sass/\n */\n@keyframes spinAround-27c96306 {\nfrom {\n    transform: rotate(0);\n}\nto {\n    transform: rotate(359deg);\n}\n}\n@keyframes fade-27c96306 {\nfrom {\n    opacity: 1;\n}\nto {\n    opacity: 0;\n}\n}\n.or-overflow-menu-item .or-button[data-v-27c96306] {\n  justify-content: start;\n  width: 100%;\n  padding: 8px;\n  color: var(--c-neutral-4);\n  white-space: nowrap;\n}\n@media (hover: hover) and (pointer: fine) {\n.or-overflow-menu-item .or-button[data-v-27c96306]:not(:disabled):not(.or-overflow-menu-item .or-button:not(:disabled).is-loading):not(.or-overflow-menu-item .or-button:not(:disabled).is-disabled):not(.or-overflow-menu-item .or-button:not(:disabled).is-readonly):not(.or-overflow-menu-item .or-button:not(:disabled):disabled):not(.or-overflow-menu-item .or-button:not(:disabled).is-focused):not(.or-overflow-menu-item .or-button:not(:disabled):active):hover {\n    color: var(--c-neutral-6);\n}\n}\n@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {\n.or-overflow-menu-item .or-button[data-v-27c96306]:not(:disabled):not(.or-overflow-menu-item .or-button:not(:disabled).is-loading):not(.or-overflow-menu-item .or-button:not(:disabled).is-disabled):not(.or-overflow-menu-item .or-button:not(:disabled).is-readonly):not(.or-overflow-menu-item .or-button:not(:disabled):disabled):not(.or-overflow-menu-item .or-button:not(:disabled).is-focused):not(.or-overflow-menu-item .or-button:not(:disabled):active):hover {\n    color: var(--c-neutral-6);\n}\n}";
+styleInject(css_248z);
+
+script$1.render = render;
+script$1.__scopeId = "data-v-27c96306";
+script$1.__file = "src/components/or-overflow-menu/OrOverflowMenuItem.vue";
+
+var script = defineComponent({
+  name: 'OrOverflowMenu',
+  components: {
+    OrIconButton: script$3,
+    OrOverflowMenuItem: script$1,
+    OrFloating: script$4
+  },
+  props: {
+    closeOnClickOutside: {
+      type: Boolean,
+      default: true,
+      required: false
+    },
+    placement: {
+      type: String,
+      required: false,
+      default: OrFloatingPlacements.BOTTOM_END
+    },
+    items: {
+      type: Array,
+      required: false,
+      default: () => []
+    },
+    isDisabled: {
+      type: Boolean,
+      default: false,
+      required: false
+    }
+  },
+  emits: ['open', 'close'],
+  setup(props, {
+    emit
+  }) {
+    const target = ref();
+    const content = ref(null);
+    const trigger = ref();
+    const [isOpen, toggle] = useToggle();
+    const close = () => {
+      toggle(false);
+      emit('close');
+    };
+    const open = () => {
+      if (props.isDisabled) return;
+      toggle(true);
+      emit('open');
+    };
+    onClickOutside(content, evt => {
+      if (evt.composedPath().includes(target.value)) return;
+      if (isOpen.value && props.closeOnClickOutside) close();
+    });
+    return {
+      isOpen,
+      target,
+      content,
+      open,
+      close,
+      trigger
+    };
+  }
+});
+
+export { script as s };

package/dist/bundled/v3/OrOverlay.vue_vue_type_script_lang-b9bf5e50.js

@@ -0,0 +1,33 @@
+import { defineComponent } from 'vue';
+
+var script = defineComponent({
+  name: 'OrOverlay',
+  props: {
+    /** You can use this prop instead of v-if if you want to preserve content state */
+    isActive: {
+      type: Boolean,
+      default: false
+    },
+    /** Attach overlay to browser window rather then nearest relative container */
+    isPage: {
+      type: Boolean,
+      default: false
+    },
+    /** Show overlay without default background color */
+    isWithoutBackground: {
+      type: Boolean,
+      default: false
+    }
+  },
+  computed: {
+    states() {
+      return {
+        active: this.isActive,
+        page: this.isPage,
+        'without-background': this.isWithoutBackground
+      };
+    }
+  }
+});
+
+export { script as s };

package/dist/bundled/v3/OrOverlay.vue_vue_type_script_lang-cb3aad0c.js

@@ -0,0 +1,58 @@
+import { useScrollLock } from '@vueuse/core';
+import { openBlock, createBlock, Teleport, renderSlot, defineComponent, ref, computed } from 'vue';
+import { s as script$1 } from './OrTeleport.vue3.vue_vue_type_script_lang-4dc70cf1.js';
+import { u as useClassAttribute } from './useClassAttribute-00888f78.js';
+import { u as useElevation } from './useElevation-c8d5d3ba.js';
+
+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 OverlayRoot = [
+// Position
+'fixed', 'inset-none',
+// Layout
+'flex', 'items-center', 'justify-center',
+// Theme
+'bg-overlay', 'dark:bg-overlay-dark'];
+
+var script = defineComponent({
+  name: 'OrOverlay',
+  components: {
+    OrTeleport: script$1
+  },
+  inheritAttrs: false,
+  props: {
+    fullscreen: {
+      type: Boolean,
+      default: false
+    }
+  },
+  expose: ['root'],
+  setup() {
+    // Refs
+    const root = ref();
+    // Styles
+    const classAttribute = useClassAttribute();
+    const rootStyles = computed(() => ['or-overlay', ...OverlayRoot, classAttribute.value]);
+    // Effects
+    // #region Elevation
+    useElevation(root);
+    // #endregion
+    // #region Scroll Lock
+    useScrollLock(document.body, true);
+    // #endregion
+    return {
+      root,
+      rootStyles
+    };
+  }
+});
+
+export { script as s };

package/dist/bundled/v3/OrPagination.vue_vue_type_script_lang-c96d7cd7.js

@@ -0,0 +1,187 @@
+import { defineComponent, ref, computed } from 'vue';
+import './OrButton-2b27c1fd.js';
+import './OrIcon-d878b768.js';
+import './OrMenu-f26e8e55.js';
+import './OrMenuItem-4feaba6c.js';
+import { u as useClassAttribute } from './useClassAttribute-00888f78.js';
+import { s as script$1 } from './OrButton.vue_vue_type_script_lang-8c44986c.js';
+import { s as script$2 } from './OrIcon.vue_vue_type_script_lang-a119a715.js';
+import { s as script$3 } from './OrMenu.vue_vue_type_script_lang-2446a69a.js';
+import { s as script$4 } from './OrMenuItem.vue_vue_type_script_lang-0ffaef05.js';
+
+const PaginationRoot = [
+// Layout
+'layout-row',
+// Spacing
+'gap-xl',
+// Typography
+'typography-caption-regular',
+// Theme
+'theme-foreground-outline', 'dark:theme-foreground-outline-dark'];
+const PaginationOffsetControl = [
+// Layout
+'layout-row',
+// Spacing
+'gap-md'];
+const PaginationLimitControl = [
+// Layout
+'layout-row',
+// Spacing
+'gap-sm'];
+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
+  },
+  inheritAttrs: false,
+  props: {
+    modelValue: {
+      type: Object,
+      default: undefined
+    },
+    value: {
+      type: Object,
+      default: undefined
+    },
+    length: {
+      type: Number,
+      required: true
+    },
+    pageSizeOptions: {
+      type: Array,
+      default: () => [50, 20, 10, 5]
+    }
+  },
+  emits: ['update:modelValue', 'input'],
+  expose: ['root'],
+  setup(props, context) {
+    // Refs
+    const root = ref();
+    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;
+    });
+    // Styles
+    const classAttribute = useClassAttribute();
+    const rootStyles = computed(() => ['or-pagination', ...PaginationRoot, classAttribute.value]);
+    const offsetControlStyles = computed(() => [...PaginationOffsetControl]);
+    const limitControlStyles = computed(() => [...PaginationLimitControl]);
+    const itemStyles = computed(() => [...PaginationItem]);
+    // State
+    const proxyModelValue = computed({
+      get: () => {
+        var _a;
+        return (_a = props.modelValue) !== null && _a !== void 0 ? _a : props.value; // TODO: Remove Vue 2 fallback
+      },
+
+      set: value => {
+        context.emit('input', value);
+        context.emit('update:modelValue', value);
+      }
+    });
+    const currentLimit = computed({
+      get: () => {
+        var _a, _b;
+        return (_b = (_a = proxyModelValue.value) === null || _a === void 0 ? void 0 : _a.limit) !== null && _b !== void 0 ? _b : props.pageSizeOptions[0];
+      },
+      set: value => {
+        proxyModelValue.value = {
+          limit: value,
+          offset: 0
+        };
+      }
+    });
+    const currentOffset = computed({
+      get: () => {
+        var _a, _b;
+        return (_b = (_a = proxyModelValue.value) === null || _a === void 0 ? void 0 : _a.offset) !== null && _b !== void 0 ? _b : 0;
+      },
+      set: value => {
+        proxyModelValue.value = {
+          limit: currentLimit.value,
+          offset: value
+        };
+      }
+    });
+    const currentPage = computed({
+      get: () => {
+        return 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(() => {
+      return Array.from({
+        length: lastPage.value
+      }, (_, index) => index + 1).map(page => {
+        switch (true) {
+          case page > firstPage.value && page < currentPage.value - 1:
+          case page > currentPage.value + 1 && page < lastPage.value:
+            return '…';
+          default:
+            return page;
+        }
+      }).reduce((accumulator, page) => {
+        if (accumulator[accumulator.length - 1] === page) {
+          return accumulator;
+        }
+        return [...accumulator, page];
+      }, []);
+    });
+    // Functions
+    function toPreviousPage() {
+      currentPage.value = currentPage.value - 1;
+    }
+    function toNextPage() {
+      currentPage.value = currentPage.value + 1;
+    }
+    function toPage(page) {
+      currentPage.value = page;
+    }
+    return {
+      root,
+      limitButton,
+      limitButtonRoot,
+      limitMenu,
+      limitMenuRoot,
+      rootStyles,
+      offsetControlStyles,
+      limitControlStyles,
+      itemStyles,
+      proxyModelValue,
+      currentLimit,
+      currentOffset,
+      currentPage,
+      firstPage,
+      lastPage,
+      buttonGroup,
+      toPreviousPage,
+      toNextPage,
+      toPage
+    };
+  }
+});
+
+export { script as s };