@onereach/ui-components 3.1.0-beta.2483.0 → 3.1.0-beta.2496.0

package/dist/bundled/v2/OrNotification-50be557d.js

@@ -0,0 +1,142 @@
+import './index-fa6eb4ca.js';
+import { O as OrIcon } from './OrIcon-90adc2bd.js';
+import { O as OrIconButton } from './OrIconButton-e28d129f.js';
+import { defineComponent } from '@vue/composition-api/dist/vue-composition-api.mjs';
+import { s as styleInject } from './style-inject.es-4c6f2515.js';
+import { n as normalizeComponent } from './normalize-component-6e8e3d80.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,
+    OrIconButton
+  },
+  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;
+    }
+  }
+});
+
+var css_248z = "@keyframes spinAround-data-v-6284d461{from{transform:rotate(0)}to{transform:rotate(359deg)}}@keyframes fade-data-v-6284d461{from{opacity:1}to{opacity:0}}.or-notification[data-v-6284d461]{--alignment-height:var(--lh-1);display:flex;align-items:flex-start;width:100%;padding:var(--s-4);background-color:var(--c-white);border-radius:.25rem;box-shadow:0 .0625rem .25rem .0625rem rgba(0,0,0,.08);transition-timing-function:var(--t-func);transition-duration:var(--t-duration);transition-property:background-color}.or-notification.is-size-default[data-v-6284d461]{max-width:48rem}.or-notification.is-size-inline[data-v-6284d461]{max-width:27.875rem}.or-notification a[data-v-6284d461]{font-weight:var(--fw-2);color:var(--c-black)}.or-notification--icon[data-v-6284d461]{display:flex;align-items:center;min-height:var(--alignment-height);margin-right:var(--s-4)}.or-notification--icon[data-v-6284d461]  .or-icon{font-size:1rem}.or-notification--content[data-v-6284d461]{flex:1 1 100%;word-break:break-word}.or-notification--close[data-v-6284d461]{display:flex;height:var(--alignment-height);margin-left:1rem}.or-notification--close[data-v-6284d461]  .or-icon{font-size:1rem!important}.or-notification.is-type-info[data-v-6284d461]{background-color:var(--c-primary-lighten-45)}.or-notification.is-type-info a[data-v-6284d461]{color:var(--c-primary)}.or-notification.is-type-error[data-v-6284d461]{background-color:var(--c-error-lighten-45)}.or-notification.is-type-error a[data-v-6284d461]{color:var(--c-error)}.or-notification.is-type-warning[data-v-6284d461]{background-color:var(--c-warning-lighten-45)}.or-notification.is-type-warning a[data-v-6284d461]{color:var(--c-warning)}.or-notification.is-type-success[data-v-6284d461]{background-color:var(--c-success-lighten-45)}.or-notification.is-type-success a[data-v-6284d461]{color:var(--c-success)}[data-theme=dark] .or-notification .or-icon[data-v-6284d461]{color:var(--c-neutral-1)}[data-theme=dark] .or-notification.is-type-info[data-v-6284d461]{background-color:var(--c-primary-darken-45);color:var(--c-neutral-6)}[data-theme=dark] .or-notification.is-type-info a[data-v-6284d461]{color:var(--c-neutral-6)}[data-theme=dark] .or-notification.is-type-error[data-v-6284d461]{background-color:var(--c-error-darken-45);color:var(--c-neutral-6)}[data-theme=dark] .or-notification.is-type-error a[data-v-6284d461]{color:var(--c-neutral-6)}[data-theme=dark] .or-notification.is-type-warning[data-v-6284d461]{background-color:var(--c-warning-darken-45);color:var(--c-neutral-6)}[data-theme=dark] .or-notification.is-type-warning a[data-v-6284d461]{color:var(--c-neutral-6)}[data-theme=dark] .or-notification.is-type-success[data-v-6284d461]{background-color:var(--c-success-darken-45);color:var(--c-neutral-6)}[data-theme=dark] .or-notification.is-type-success a[data-v-6284d461]{color:var(--c-neutral-6)}";
+styleInject(css_248z);
+
+/* 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', {
+    staticClass: "or-notification",
+    class: _vm.states
+  }, [_c('div', {
+    staticClass: "or-notification--icon"
+  }, [_vm._t("icon", function () {
+    return [_c('or-icon', {
+      attrs: {
+        "icon": _vm.iconByType,
+        "color": _vm.iconColorByType
+      }
+    })];
+  })], 2), _vm._v(" "), _c('div', {
+    staticClass: "or-notification--content"
+  }, [_vm._t("default"), _vm._v(" "), !_vm.$slots.default ? [_vm._v("\n      " + _vm._s(_vm.content) + "\n    ")] : _vm._e()], 2), _vm._v(" "), _vm.canDelete ? _c('or-icon-button', {
+    staticClass: "or-notification--close",
+    attrs: {
+      "icon": "close",
+      "icon-color": "neutral-6"
+    },
+    on: {
+      "click": function ($event) {
+        return _vm.$emit('close');
+      }
+    }
+  }) : _vm._e()], 1);
+};
+var __vue_staticRenderFns__ = [];
+
+/* style */
+const __vue_inject_styles__ = undefined;
+/* scoped */
+const __vue_scope_id__ = "data-v-6284d461";
+/* 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);
+var __vue_component__$1 = __vue_component__;
+
+export { OR_NOTIFICATION_TYPE as O, __vue_component__$1 as _, OR_NOTIFICATION_SIZE as a };

package/dist/bundled/v2/OrNotification-8695c59e.js

@@ -0,0 +1,168 @@
+import './index-fa6eb4ca.js';
+import { O as OrIcon } from './OrIcon-05d29a78.js';
+import { O as OrIconButton } from './OrIconButton-d427d121.js';
+import { defineComponent, ref, computed } from '@vue/composition-api/dist/vue-composition-api.mjs';
+import { n as normalizeComponent } from './normalize-component-6e8e3d80.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,
+    OrIconButton
+  },
+  props: {
+    variant: {
+      type: String,
+      default: NotificationVariant.Info
+    },
+    disableClose: {
+      type: Boolean,
+      default: false
+    }
+  },
+  expose: ['root'],
+  setup(props) {
+    // Refs
+    const root = ref();
+    // Styles
+    const rootStyles = computed(() => ['or-notification-v3', ...NotificationRoot, ...NotificationRootVariants[props.variant]]);
+    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
+    };
+  }
+});
+
+/* 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', {
+    ref: "root",
+    class: _vm.rootStyles
+  }, [_c('div', {
+    class: _vm.iconStyles
+  }, [_c('OrIcon', {
+    attrs: {
+      "icon": _vm.icon,
+      "variant": 'filled-bold'
+    }
+  })], 1), _vm._v(" "), _c('div', {
+    class: ['grow', 'my-[-2px] md:my-[-3px]']
+  }, [_vm._t("default")], 2), _vm._v(" "), !_vm.disableClose ? _c('OrIconButton', {
+    attrs: {
+      "icon": 'close',
+      "size": 'm'
+    },
+    on: {
+      "click": function ($event) {
+        $event.stopPropagation();
+        return _vm.$emit('close');
+      }
+    }
+  }) : _vm._e()], 1);
+};
+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);
+var __vue_component__$1 = __vue_component__;
+
+export { NotificationVariant as N, __vue_component__$1 as _ };

package/dist/bundled/v2/OrNumberInput-6b183931.js

@@ -0,0 +1,227 @@
+import './index-fa6eb4ca.js';
+import { O as OrInput } from './OrInput-1589dca0.js';
+import { defineComponent, ref } from '@vue/composition-api/dist/vue-composition-api.mjs';
+import { n as normalizeComponent } from './normalize-component-6e8e3d80.js';
+
+var script = defineComponent({
+  name: 'OrNumberInput',
+  components: {
+    OrInput
+  },
+  model: {
+    prop: 'modelValue',
+    event: 'update:modelValue'
+  },
+  props: {
+    modelValue: {
+      type: Number,
+      default: undefined,
+      required: false
+    },
+    htmlId: {
+      type: String,
+      default: '',
+      required: false
+    },
+    placeholder: {
+      type: String,
+      default: '',
+      required: false
+    },
+    label: {
+      type: String,
+      default: '',
+      required: false
+    },
+    error: {
+      type: String,
+      default: '',
+      required: false
+    },
+    hint: {
+      type: String,
+      default: '',
+      required: false
+    },
+    minValue: {
+      type: Number,
+      default: undefined,
+      required: false
+    },
+    maxValue: {
+      type: Number,
+      default: undefined,
+      required: false
+    },
+    stepValue: {
+      type: Number,
+      default: undefined,
+      required: false
+    },
+    isSmall: Boolean,
+    isRequired: Boolean,
+    isDisabled: Boolean,
+    isReadonly: Boolean,
+    isInvalid: Boolean
+  },
+  emits: ['focus', 'blur', 'update:modelValue', 'input', 'keypress', 'keyup', 'keydown'],
+  setup(props, {
+    emit
+  }) {
+    const inputRef = ref();
+    if (props.modelValue) {
+      if (props.minValue !== undefined && props.modelValue < props.minValue) {
+        emit('update:modelValue', props.minValue);
+      } else if (props.maxValue !== undefined && props.modelValue > props.maxValue) {
+        emit('update:modelValue', props.maxValue);
+      }
+    }
+    return {
+      inputRef
+    };
+  },
+  computed: {
+    htmlInputAttrs() {
+      return {
+        min: this.minValue,
+        max: this.maxValue,
+        step: this.stepValue
+      };
+    },
+    localValue: {
+      get() {
+        var _a;
+        return ((_a = this.modelValue) !== null && _a !== void 0 ? _a : '') + '';
+      },
+      set(val) {
+        if (val === undefined || val === '') {
+          this.$emit('update:modelValue', undefined);
+          return;
+        }
+        const numVal = +val;
+        if (this.minValue !== undefined && numVal < this.minValue) {
+          this.$emit('update:modelValue', this.minValue);
+        } else if (this.maxValue !== undefined && numVal > this.maxValue) {
+          this.$emit('update:modelValue', this.maxValue);
+        } else {
+          this.$emit('update:modelValue', numVal);
+        }
+      }
+    }
+  }
+});
+
+/* 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('or-input', {
+    ref: "inputRef",
+    staticClass: "or-password",
+    attrs: {
+      "html-id": _vm.htmlId,
+      "placeholder": _vm.placeholder,
+      "html-type": "number",
+      "html-input-attrs": _vm.htmlInputAttrs,
+      "label": _vm.label,
+      "error": _vm.error,
+      "hint": _vm.hint,
+      "is-small": _vm.isSmall,
+      "is-required": _vm.isRequired,
+      "is-disabled": _vm.isDisabled,
+      "is-readonly": _vm.isReadonly,
+      "is-invalid": _vm.isInvalid
+    },
+    on: {
+      "focus": function ($event) {
+        return _vm.$emit('focus', $event);
+      },
+      "blur": function ($event) {
+        return _vm.$emit('blur', $event);
+      },
+      "input": function ($event) {
+        return _vm.$emit('input', $event);
+      },
+      "keypress": function ($event) {
+        return _vm.$emit('keypress', $event);
+      },
+      "keyup": function ($event) {
+        return _vm.$emit('keyup', $event);
+      },
+      "keydown": function ($event) {
+        return _vm.$emit('keydown', $event);
+      }
+    },
+    scopedSlots: _vm._u([_vm.$slots.prepend ? {
+      key: "prepend",
+      fn: function () {
+        return [_vm._t("prepend")];
+      },
+      proxy: true
+    } : null, _vm.$slots['label-default'] ? {
+      key: "label-default",
+      fn: function () {
+        return [_vm._t("label-default")];
+      },
+      proxy: true
+    } : null, _vm.$slots['label-append'] ? {
+      key: "label-append",
+      fn: function () {
+        return [_vm._t("label-append")];
+      },
+      proxy: true
+    } : null, _vm.$slots['wrapper-end'] ? {
+      key: "wrapper-end",
+      fn: function () {
+        return [_vm._t("wrapper-end")];
+      },
+      proxy: true
+    } : null, _vm.$slots['input-end'] ? {
+      key: "input-end",
+      fn: function () {
+        return [_vm._t("input-end")];
+      },
+      proxy: true
+    } : null, _vm.$slots.append ? {
+      key: "append",
+      fn: function () {
+        return [_vm._t("append")];
+      },
+      proxy: true
+    } : null], null, true),
+    model: {
+      value: _vm.localValue,
+      callback: function ($$v) {
+        _vm.localValue = $$v;
+      },
+      expression: "localValue"
+    }
+  });
+};
+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);
+var __vue_component__$1 = __vue_component__;
+
+export { __vue_component__$1 as _ };