@onereach/ui-components 2.70.0-beta.2159.0 → 2.70.0-beta.2160.0

package/dist/esm/v3/OrNotification-3788c3f5.js

@@ -0,0 +1,115 @@
+import { defineComponent } from 'vue-demi';
+import { s as script$1 } from './OrIcon-e23028f8.js';
+import './OrButton-19b4f2cc.js';
+import { s as script$2 } from './OrIconButton-7a793cf2.js';
+import { resolveComponent, openBlock, createElementBlock, normalizeClass, createElementVNode, renderSlot, createVNode, Fragment, createTextVNode, toDisplayString, createCommentVNode, createBlock } from 'vue';
+import { s as styleInject } from './style-inject.es-4c6f2515.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;
+    }
+  }
+});
+
+const _hoisted_1 = {
+  class: "or-notification--icon"
+};
+const _hoisted_2 = {
+  class: "or-notification--content"
+};
+function render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_or_icon = resolveComponent("or-icon");
+  const _component_or_icon_button = resolveComponent("or-icon-button");
+  return openBlock(), createElementBlock("div", {
+    class: normalizeClass(["or-notification", _ctx.states])
+  }, [createElementVNode("div", _hoisted_1, [renderSlot(_ctx.$slots, "icon", {}, () => [createVNode(_component_or_icon, {
+    icon: _ctx.iconByType,
+    color: _ctx.iconColorByType
+  }, null, 8 /* PROPS */, ["icon", "color"])])]), createElementVNode("div", _hoisted_2, [renderSlot(_ctx.$slots, "default"), !_ctx.$slots.default ? (openBlock(), createElementBlock(Fragment, {
+    key: 0
+  }, [createTextVNode(toDisplayString(_ctx.content), 1 /* TEXT */)], 64 /* STABLE_FRAGMENT */)) : createCommentVNode("v-if", true)]), _ctx.canDelete ? (openBlock(), createBlock(_component_or_icon_button, {
+    key: 0,
+    icon: "close",
+    "icon-color": "neutral-6",
+    class: "or-notification--close",
+    onClick: _cache[0] || (_cache[0] = $event => _ctx.$emit('close'))
+  })) : createCommentVNode("v-if", true)], 2 /* CLASS */);
+}
+
+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-2a8b1558 {\nfrom {\n    transform: rotate(0);\n}\nto {\n    transform: rotate(359deg);\n}\n}\n@keyframes fade-2a8b1558 {\nfrom {\n    opacity: 1;\n}\nto {\n    opacity: 0;\n}\n}\n.or-notification[data-v-2a8b1558] {\n  /** TODO: Override when mobile design is ready to guarantee alignment of icons with first text row */\n  --alignment-height: var(--lh-1);\n  display: flex;\n  align-items: flex-start;\n  width: 100%;\n  padding: var(--s-4);\n  background-color: var(--c-white);\n  border-radius: 0.25rem;\n  box-shadow: 0 0.0625rem 0.25rem 0.0625rem rgba(0, 0, 0, 0.08);\n  transition-timing-function: var(--t-func);\n  transition-duration: var(--t-duration);\n  transition-property: background-color;\n}\n.or-notification.is-size-default[data-v-2a8b1558] {\n  max-width: 48rem;\n}\n.or-notification.is-size-inline[data-v-2a8b1558] {\n  max-width: 27.875rem;\n}\n.or-notification a[data-v-2a8b1558] {\n  font-weight: var(--fw-2);\n  color: var(--c-black);\n}\n.or-notification--icon[data-v-2a8b1558] {\n  display: flex;\n  align-items: center;\n  min-height: var(--alignment-height);\n  margin-right: var(--s-4);\n}\n.or-notification--icon[data-v-2a8b1558] .or-icon {\n  font-size: 1rem;\n}\n.or-notification--content[data-v-2a8b1558] {\n  flex: 1 1 100%;\n  word-break: break-word;\n}\n.or-notification--close[data-v-2a8b1558] {\n  display: flex;\n  height: var(--alignment-height);\n  margin-left: 1rem;\n}\n.or-notification--close[data-v-2a8b1558] .or-icon {\n  font-size: 1rem !important;\n}\n.or-notification.is-type-info[data-v-2a8b1558] {\n  background-color: var(--c-primary-lighten-45);\n}\n.or-notification.is-type-info a[data-v-2a8b1558] {\n  color: var(--c-primary);\n}\n.or-notification.is-type-error[data-v-2a8b1558] {\n  background-color: var(--c-error-lighten-45);\n}\n.or-notification.is-type-error a[data-v-2a8b1558] {\n  color: var(--c-error);\n}\n.or-notification.is-type-warning[data-v-2a8b1558] {\n  background-color: var(--c-warning-lighten-45);\n}\n.or-notification.is-type-warning a[data-v-2a8b1558] {\n  color: var(--c-warning);\n}\n.or-notification.is-type-success[data-v-2a8b1558] {\n  background-color: var(--c-success-lighten-45);\n}\n.or-notification.is-type-success a[data-v-2a8b1558] {\n  color: var(--c-success);\n}";
+styleInject(css_248z);
+
+script.render = render;
+script.__scopeId = "data-v-2a8b1558";
+script.__file = "src/components/or-notification/OrNotification.vue";
+
+export { OR_NOTIFICATION_TYPE as O, OR_NOTIFICATION_SIZE as a, script as s };

package/dist/esm/v3/OrOverflowMenu-08e85624.js

@@ -0,0 +1,186 @@
+import { defineComponent, ref } from 'vue-demi';
+import { useToggle, onClickOutside } from '@vueuse/core';
+import { s as script$2 } from './OrButton-19b4f2cc.js';
+import { s as script$3 } from './OrIconButton-7a793cf2.js';
+import { resolveComponent, openBlock, createElementBlock, createVNode, withModifiers, createElementVNode, renderSlot, createBlock, withCtx, Fragment, renderList, createCommentVNode } from 'vue';
+import { s as styleInject } from './style-inject.es-4c6f2515.js';
+import { s as script$4, O as OrFloatingPlacements } from './OrFloating-3da814a2.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$1 = {
+  class: "or-overflow-menu-item"
+};
+function render$1(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_or_button = resolveComponent("or-button");
+  return openBlock(), createElementBlock("div", _hoisted_1$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$1 = "/**\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$1);
+
+script$1.render = render$1;
+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
+    };
+  }
+});
+
+const _hoisted_1 = {
+  ref: "target",
+  class: "dropdown-container"
+};
+const _hoisted_2 = {
+  ref: "content",
+  class: "content"
+};
+function render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_or_icon_button = resolveComponent("or-icon-button");
+  const _component_or_overflow_menu_item = resolveComponent("or-overflow-menu-item");
+  const _component_or_floating = resolveComponent("or-floating");
+  return openBlock(), createElementBlock("div", _hoisted_1, [createElementVNode("div", {
+    ref: "trigger",
+    class: "trigger",
+    onClick: _cache[0] || (_cache[0] = withModifiers($event => _ctx.isOpen ? _ctx.close() : _ctx.open(), ["prevent", "stop"]))
+  }, [renderSlot(_ctx.$slots, "trigger", {}, () => [createVNode(_component_or_icon_button, {
+    icon: "more_vert",
+    class: "more_icon",
+    "icon-color": "neutral-6",
+    "is-disabled": _ctx.isDisabled
+  }, null, 8 /* PROPS */, ["is-disabled"])])], 512 /* NEED_PATCH */), _ctx.isOpen ? (openBlock(), createBlock(_component_or_floating, {
+    key: 0,
+    trigger: _ctx.trigger,
+    placement: _ctx.placement,
+    "is-using-shift": "",
+    "is-using-flip": ""
+  }, {
+    default: withCtx(() => [createElementVNode("div", _hoisted_2, [renderSlot(_ctx.$slots, "content", {
+      close: _ctx.close
+    }, () => [(openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.items, item => {
+      return openBlock(), createBlock(_component_or_overflow_menu_item, {
+        key: item.label,
+        handler: item.handler,
+        label: item.label,
+        icon: item.icon,
+        "close-on-click": item.closeOnClick || false,
+        "is-disabled": item.isDisabled,
+        onClose: _ctx.close
+      }, null, 8 /* PROPS */, ["handler", "label", "icon", "close-on-click", "is-disabled", "onClose"]);
+    }), 128 /* KEYED_FRAGMENT */))])], 512 /* NEED_PATCH */)]),
+
+    _: 3 /* FORWARDED */
+  }, 8 /* PROPS */, ["trigger", "placement"])) : createCommentVNode("v-if", true)], 512 /* NEED_PATCH */);
+}
+
+var css_248z = ".dropdown-container[data-v-3d084a5a] {\n  position: relative;\n  width: fit-content;\n  height: fit-content;\n}\n.dropdown-container .trigger[data-v-3d084a5a] {\n  cursor: pointer;\n}\n.content[data-v-3d084a5a] {\n  right: 0;\n  z-index: 1;\n  width: fit-content;\n  height: fit-content;\n  background-color: var(--c-neutral-0);\n  border-radius: 3px;\n  box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.08);\n}";
+styleInject(css_248z);
+
+script.render = render;
+script.__scopeId = "data-v-3d084a5a";
+script.__file = "src/components/or-overflow-menu/OrOverflowMenu.vue";
+
+export { script as s };