@onereach/ui-components 2.68.0-beta.2082.0 → 2.68.0-beta.2083.0

package/dist/bundled/v3/types-668300dd.js

@@ -0,0 +1,5 @@
+var types = /*#__PURE__*/Object.freeze({
+  __proto__: null
+});
+
+export { types as t };

package/dist/bundled/v3/useToast-0c42015d.js

@@ -0,0 +1,115 @@
+import { noop } from '@vueuse/core';
+import { u as useToastEventBus } from './useToastEventBus-578adc7c.js';
+import { T as ToastType } from './constants-25998e4c.js';
+
+class Timer {
+  // eslint-disable-next-line @typescript-eslint/no-empty-function
+  constructor() {
+    this.startedAt = null;
+    this.timer = null;
+    this.callback = noop;
+    this.delay = 0;
+  }
+  start(callback, delay) {
+    if (delay && delay > 0) {
+      this.callback = callback;
+      this.delay = delay;
+      this.startedAt = Date.now();
+      this.timer = setTimeout(this.callback, this.delay);
+    }
+  }
+  pause() {
+    if (this.timer && this.startedAt) {
+      this.stop();
+      this.delay -= Date.now() - this.startedAt;
+    }
+  }
+  resume() {
+    this.stop();
+    if (this.delay > 0) {
+      this.startedAt = Date.now();
+      this.timer = setTimeout(this.callback, this.delay);
+    }
+  }
+  stop() {
+    if (this.timer) clearTimeout(this.timer);
+  }
+}
+
+function useToast(globalToastProps = {}) {
+  const {
+    emit
+  } = useToastEventBus();
+  function notify(props, behaviour = {}) {
+    const {
+      duration = 5000,
+      pauseOnHover = true,
+      onToastClose,
+      onToastClick
+    } = behaviour;
+    const propsData = {
+      ...props,
+      ...globalToastProps
+    };
+    const config = {
+      toastProps: propsData,
+      //generate ToastHash
+      hash: Math.random().toString(36).slice(2),
+      ...(Number.isInteger(duration) && {
+        timer: new Timer()
+      }),
+      toastBehaviour: {
+        duration,
+        pauseOnHover,
+        onToastClose,
+        onToastClick
+      }
+    };
+    emit('toastNotify', config);
+    return {
+      close: () => emit('toastClose', config),
+      update: data => emit('toastUpdate', {
+        ...config,
+        toastProps: {
+          ...config.toastProps,
+          ...data
+        }
+      })
+    };
+  }
+  function clearAll() {
+    emit('toastCloseAll');
+  }
+  function success(props, behaviour = {}) {
+    return notify({
+      ...props,
+      toastType: ToastType.success
+    }, behaviour);
+  }
+  function error(props, behaviour = {}) {
+    return notify({
+      ...props,
+      toastType: ToastType.error
+    }, behaviour);
+  }
+  function loading(props, behaviour = {}) {
+    return notify({
+      ...props,
+      toastType: ToastType.loading,
+      dismissible: false
+    }, {
+      ...behaviour,
+      duration: 0 // <- toast with type "loading" will not cloe automatically
+    });
+  }
+
+  return {
+    notify,
+    clearAll,
+    success,
+    error,
+    loading
+  };
+}
+
+export { useToast as u };

package/dist/bundled/v3/useToastEventBus-578adc7c.js

@@ -0,0 +1,55 @@
+import { ref } from 'vue-demi';
+import { createSharedComposable, useEventBus } from '@vueuse/core';
+
+function useQueue(initialValue) {
+  //generic needed! see https://github.com/vuejs/core/issues/2136
+  const queue = ref(initialValue || []);
+  const addItem = item => {
+    const refItem = ref(item);
+    queue.value.push(refItem);
+  };
+  const removeItem = condition => {
+    const index = queue.value.findIndex((i, idx, q) => {
+      return condition === null || condition === void 0 ? void 0 : condition(i.value, idx, q);
+    });
+    if (index !== -1) queue.value.splice(index, 1);
+  };
+  const getItem = condition => {
+    return queue.value.filter((i, idx, q) => {
+      return condition === null || condition === void 0 ? void 0 : condition(i.value, idx, q);
+    })[0];
+  };
+  const clearAll = () => {
+    queue.value = [];
+  };
+  return {
+    queue,
+    addItem,
+    removeItem,
+    clearAll,
+    getItem
+  };
+}
+
+const useToastEventBus = () => {
+  const busPull = {
+    toastNotify: useEventBus('toastNotify'),
+    toastClose: useEventBus('toastClose'),
+    toastCloseAll: useEventBus('toastCloseAll'),
+    toastUpdate: useEventBus('toastUpdate')
+  };
+  return {
+    on: (namedQueue, listener) => {
+      busPull[namedQueue].on(listener);
+    },
+    off: (namedQueue, listener) => {
+      busPull[namedQueue].off(listener);
+    },
+    emit: (namedQueue, data) => {
+      busPull[namedQueue].emit(data);
+    }
+  };
+};
+var useToastEventBus$1 = createSharedComposable(useToastEventBus);
+
+export { useQueue as a, useToastEventBus$1 as u };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@onereach/ui-components",
-  "version": "2.68.0-beta.2082.0",
+  "version": "2.68.0-beta.2083.0",
   "description": "Vue components library for v2/3",
   "sideEffects": false,
   "main": "./dist/auto/index.js",
@@ -52,7 +52,7 @@
   },
   "devDependencies": {
     "@babel/preset-env": "7.18.10",
-    "@onereach/rollup-vue-lib-config": "1.0.7-beta.50.0",
+    "@onereach/rollup-vue-lib-config": "1.0.7-beta.51.0",
     "@rollup/plugin-replace": "4.0.0",
     "@rollup/plugin-url": "^8.0.1",
     "@storybook/addon-actions": "6.5.15",

package/dist/bundled/v2/OrCard-36967325.js

@@ -1,69 +0,0 @@
-import { defineComponent } from 'vue-demi';
-import { n as normalizeComponent } from './normalize-component-6e8e3d80.js';
-import { c as createInjector } from './browser-82dea9ed.js';
-
-var script = defineComponent({
-  name: 'OrCard',
-  props: {
-    active: {
-      type: Boolean,
-      default: false
-    }
-  },
-  emits: ['click'],
-  computed: {
-    rootClasses() {
-      return ['or-card', {
-        'or-card-active': this.active
-      }];
-    }
-  }
-});
-
-/* 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', {
-    class: _vm.rootClasses,
-    on: {
-      "click": function ($event) {
-        return _vm.$emit('click', $event);
-      }
-    }
-  }, [_c('div', {
-    staticClass: "or-card-content"
-  }, [_vm._t("default")], 2)]);
-};
-var __vue_staticRenderFns__ = [];
-
-/* style */
-const __vue_inject_styles__ = function (inject) {
-  if (!inject) return;
-  inject("data-v-e79c6e94_0", {
-    source: "@keyframes spinAround-data-v-e79c6e94{from{transform:rotate(0)}to{transform:rotate(359deg)}}@keyframes fade-data-v-e79c6e94{from{opacity:1}to{opacity:0}}.or-card[data-v-e79c6e94]{min-width:242px;min-height:74px;margin:var(--s-4);background:var(--c-neutral-0);border-radius:4px;box-shadow:0 1px 2px 0 rgba(30,35,43,.3)}.or-card .or-card-content[data-v-e79c6e94]{padding:var(--s-4)}.or-card[data-v-e79c6e94]:hover{box-shadow:0 1px 6px 1px rgba(30,35,43,.25)}.or-card.or-card-active[data-v-e79c6e94],.or-card[data-v-e79c6e94]:active{box-shadow:0 1px 6px 1px rgba(30,35,43,.25);background:var(--c-neutral-1)}",
-    map: undefined,
-    media: undefined
-  });
-};
-/* scoped */
-const __vue_scope_id__ = "data-v-e79c6e94";
-/* module identifier */
-const __vue_module_identifier__ = undefined;
-/* functional template */
-const __vue_is_functional_template__ = false;
-/* 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, createInjector, undefined, undefined);
-var OrCard = __vue_component__;
-
-export { OrCard as O };

package/dist/bundled/v2/OrCheckbox-886d6bec.js

@@ -1,185 +0,0 @@
-import { defineComponent } from 'vue-demi';
-import _ from 'lodash';
-import { O as OrIcon } from './OrIcon-b54b605a.js';
-import { n as normalizeComponent } from './normalize-component-6e8e3d80.js';
-import { c as createInjector } from './browser-82dea9ed.js';
-
-var script = defineComponent({
-  name: 'OrCheckbox',
-  components: {
-    OrIcon
-  },
-  model: {
-    prop: 'modelValue',
-    event: 'update:modelValue'
-  },
-  props: {
-    modelValue: {
-      type: null,
-      default: null,
-      required: false
-    },
-    withState: {
-      type: Boolean,
-      default: false,
-      required: false
-    },
-    value: {
-      type: null,
-      default: null,
-      required: false
-    },
-    label: {
-      type: String,
-      default: '',
-      required: false,
-      validator: _.isString
-    },
-    isDisabled: {
-      type: Boolean,
-      default: false,
-      required: false,
-      validator: _.isBoolean
-    }
-  },
-  emits: ['update:modelValue', 'focus', 'blur'],
-  computed: {
-    isArrayModelValue() {
-      return _.isArray(this.modelValue);
-    },
-    rootClasses() {
-      return ['or-checkbox', {
-        'is-checked': this.isChecked,
-        'is-disabled': this.isDisabled
-      }];
-    },
-    hasContent() {
-      return this.$slots.default || this.label;
-    },
-    isChecked() {
-      var _a;
-      if (this.isArrayModelValue) {
-        return _.some(this.modelValue, this.value) || _.includes(this.modelValue, this.value);
-      }
-      if (this.withState) return (_a = this.modelValue) === null || _a === void 0 ? void 0 : _a.icon;
-      return !!this.modelValue;
-    }
-  },
-  methods: {
-    onChange({
-      target
-    }) {
-      if (this.isDisabled || this.withState) return;
-      const isChecked = target.checked;
-      if (this.isArrayModelValue) {
-        const newValue = [...this.modelValue];
-        isChecked ? newValue.push(this.value) : newValue.splice(newValue.indexOf(this.value), 1);
-        this.$emit('update:modelValue', newValue);
-      } else {
-        this.$emit('update:modelValue', isChecked);
-      }
-    },
-    onClick() {
-      if (!this.withState) return;
-      this.$emit('update:modelValue', this.modelValue);
-    }
-  }
-});
-
-/* 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('label', {
-    class: _vm.rootClasses
-  }, [_c('input', _vm._b({
-    staticClass: "or-checkbox--input visually-hidden",
-    attrs: {
-      "disabled": _vm.isDisabled,
-      "type": "checkbox"
-    },
-    domProps: {
-      "checked": _vm.isChecked,
-      "value": _vm.value
-    },
-    on: {
-      "change": _vm.onChange,
-      "focus": function ($event) {
-        return _vm.$emit('focus', $event);
-      },
-      "blur": function ($event) {
-        return _vm.$emit('blur', $event);
-      },
-      "click": function ($event) {
-        $event.stopPropagation();
-        return _vm.onClick.apply(null, arguments);
-      }
-    }
-  }, 'input', _vm.$attrs, false)), _vm._v(" "), !_vm.withState ? _c('span', {
-    staticClass: "or-checkbox--checkbox",
-    style: !_vm.hasContent ? {
-      marginRight: 0
-    } : null
-  }, [_c('transition', {
-    attrs: {
-      "name": "fade",
-      "mode": "out-in"
-    }
-  }, [_vm.isChecked ? _c('or-icon', {
-    staticClass: "or-checkbox--icon",
-    attrs: {
-      "icon": "done"
-    }
-  }) : _vm._e()], 1)], 1) : _c('span', {
-    staticClass: "or-checkbox--checkbox",
-    style: !_vm.hasContent ? {
-      marginRight: 0
-    } : null
-  }, [_c('transition', {
-    attrs: {
-      "name": "fade",
-      "mode": "out-in"
-    }
-  }, [_c('or-icon', {
-    key: _vm.modelValue.icon,
-    attrs: {
-      "icon": _vm.modelValue.icon
-    }
-  })], 1)], 1), _vm._v(" "), _vm.hasContent ? _c('span', {
-    staticClass: "or-checkbox--content"
-  }, [_vm._t("default", function () {
-    return [_vm._v(_vm._s(_vm.label))];
-  })], 2) : _vm._e()]);
-};
-var __vue_staticRenderFns__ = [];
-
-/* style */
-const __vue_inject_styles__ = function (inject) {
-  if (!inject) return;
-  inject("data-v-5fd5a818_0", {
-    source: "@keyframes spinAround-data-v-5fd5a818{from{transform:rotate(0)}to{transform:rotate(359deg)}}@keyframes fade-data-v-5fd5a818{from{opacity:1}to{opacity:0}}.or-checkbox[data-v-5fd5a818]{display:inline-flex;align-items:center;font-size:var(--fs-1);line-height:1rem;color:inherit;cursor:pointer}.or-checkbox--checkbox[data-v-5fd5a818]{display:inline-flex;align-items:center;justify-content:center;width:1rem;min-width:1rem;height:1rem;min-height:1rem;margin-right:var(--s-3);background-color:var(--c-white);border:1px solid var(--c-neutral-2);border-radius:2px;transition-timing-function:var(--t-func);transition-duration:var(--t-duration);transition-property:background-color,border-color}.or-checkbox[data-v-5fd5a818]  .or-icon{font-size:1rem;color:var(--c-white);transition-timing-function:var(--t-func);transition-duration:var(--t-duration);transition-property:color}@media (hover:hover) and (pointer:fine){.or-checkbox:not(.or-checkbox.is-loading):not(.or-checkbox.is-disabled):not(.or-checkbox.is-readonly):not(.or-checkbox:disabled):not(.or-checkbox.is-focused):not(.or-checkbox:active):hover .or-checkbox--checkbox[data-v-5fd5a818]{border-color:var(--c-neutral-2-darken-3)}}@media all and (-ms-high-contrast:none),(-ms-high-contrast:active){.or-checkbox:not(.or-checkbox.is-loading):not(.or-checkbox.is-disabled):not(.or-checkbox.is-readonly):not(.or-checkbox:disabled):not(.or-checkbox.is-focused):not(.or-checkbox:active):hover .or-checkbox--checkbox[data-v-5fd5a818]{border-color:var(--c-neutral-2-darken-3)}}.or-checkbox:not(:disabled):not(.is-loading):not(.is-disabled):not(.is-readonly):active .or-checkbox--checkbox[data-v-5fd5a818]{border-color:var(--c-neutral-2-darken-5)}.or-checkbox.is-disabled[data-v-5fd5a818],.or-checkbox[data-v-5fd5a818]:disabled{cursor:not-allowed}.or-checkbox.is-checked .or-checkbox--checkbox[data-v-5fd5a818]{background-color:var(--c-primary);border-color:var(--c-primary)}@media (hover:hover) and (pointer:fine){.or-checkbox.is-checked:not(.or-checkbox.is-checked.is-loading):not(.or-checkbox.is-checked.is-disabled):not(.or-checkbox.is-checked.is-readonly):not(.or-checkbox.is-checked:disabled):not(.or-checkbox.is-checked.is-focused):not(.or-checkbox.is-checked:active):hover .or-checkbox--checkbox[data-v-5fd5a818]{background-color:var(--c-primary-darken-3);border-color:var(--c-primary-darken-3)}}@media all and (-ms-high-contrast:none),(-ms-high-contrast:active){.or-checkbox.is-checked:not(.or-checkbox.is-checked.is-loading):not(.or-checkbox.is-checked.is-disabled):not(.or-checkbox.is-checked.is-readonly):not(.or-checkbox.is-checked:disabled):not(.or-checkbox.is-checked.is-focused):not(.or-checkbox.is-checked:active):hover .or-checkbox--checkbox[data-v-5fd5a818]{background-color:var(--c-primary-darken-3);border-color:var(--c-primary-darken-3)}}.or-checkbox.is-checked:not(:disabled):not(.is-loading):not(.is-disabled):not(.is-readonly):active .or-checkbox--checkbox[data-v-5fd5a818]{background-color:var(--c-primary-darken-5);border-color:var(--c-primary-darken-5)}.or-checkbox.is-checked.is-disabled[data-v-5fd5a818],.or-checkbox.is-checked[data-v-5fd5a818]:disabled{cursor:not-allowed}.or-checkbox.is-checked.is-disabled .or-checkbox--checkbox[data-v-5fd5a818],.or-checkbox.is-checked:disabled .or-checkbox--checkbox[data-v-5fd5a818]{background-color:var(--c-primary-lighten-20);border-color:var(--c-primary-lighten-20)}",
-    map: undefined,
-    media: undefined
-  });
-};
-/* scoped */
-const __vue_scope_id__ = "data-v-5fd5a818";
-/* module identifier */
-const __vue_module_identifier__ = undefined;
-/* functional template */
-const __vue_is_functional_template__ = false;
-/* 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, createInjector, undefined, undefined);
-var OrCheckbox = __vue_component__;
-
-export { OrCheckbox as O };