@onereach/ui-components 2.68.0-beta.2053.0 → 2.68.0-beta.2056.0

package/dist/bundled/v3/props-fb3f60a5.js

@@ -0,0 +1,32 @@
+var PositionsX;
+(function (PositionsX) {
+  PositionsX["Right"] = "right";
+  PositionsX["Left"] = "left";
+  PositionsX["Center"] = "center";
+})(PositionsX || (PositionsX = {}));
+var PositionsY;
+(function (PositionsY) {
+  PositionsY["Top"] = "top";
+  PositionsY["Bottom"] = "bottom";
+})(PositionsY || (PositionsY = {}));
+var TransitionType;
+(function (TransitionType) {
+  TransitionType["Slide"] = "slide";
+  TransitionType["Fade"] = "fade";
+})(TransitionType || (TransitionType = {}));
+var ToastType;
+(function (ToastType) {
+  ToastType["Success"] = "success";
+  ToastType["Error"] = "error";
+  ToastType["Loading"] = "loading";
+})(ToastType || (ToastType = {}));
+
+var props = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  get PositionsX () { return PositionsX; },
+  get PositionsY () { return PositionsY; },
+  get TransitionType () { return TransitionType; },
+  get ToastType () { return ToastType; }
+});
+
+export { PositionsX as P, ToastType as T, PositionsY as a, TransitionType as b, props as p };

package/dist/bundled/v3/{types-1be1650b.js → types-b803a88a.js}

@@ -1,13 +1,72 @@
 import { defineComponent, nextTick } from 'vue-demi';
-import { s as script$2 } from './OrProgress-d0d52c86.js';
-import { c as ToastType, P as PositionsX, b as PositionsY, T as TransitionType, d as useToastEventBus, a as useQueue } from './useQueue-419a3ead.js';
-import './OrIconButton-6b9a97b8.js';
-import { s as script$3 } from './OrIconButton.vue_vue_type_script_lang-af1d38ab.js';
-import { resolveComponent, openBlock, createElementBlock, renderSlot, createCommentVNode, createBlock, toDisplayString, createElementVNode, withModifiers } from 'vue';
+import { s as script$2 } from './OrProgress.vue_vue_type_script_lang-6105a07e.js';
+import { openBlock, createElementBlock, normalizeClass, Fragment, renderSlot, createElementVNode, createTextVNode, toDisplayString, createCommentVNode, normalizeStyle, resolveComponent, createBlock, withModifiers } from 'vue';
 import { s as styleInject } from './style-inject.es-4c6f2515.js';
+import { c as ToastType, P as PositionsX, b as PositionsY, T as TransitionType, d as useToastEventBus, a as useQueue } from './useToast-4fbe0e5a.js';
+import './OrIconButton-54994f76.js';
+import { s as script$3 } from './OrIconButton.vue_vue_type_script_lang-ef6a0fbf.js';
 import script$4 from './components/OrTeleportVue3/OrTeleportVue3.js';
 import { useToggle } from '@vueuse/core';
 
+const _hoisted_1$1 = {
+  key: 0,
+  class: "or-progress-header"
+};
+const _hoisted_2$1 = {
+  class: "label"
+};
+const _hoisted_3$1 = {
+  class: "percent"
+};
+const _hoisted_4$1 = {
+  class: "or-progress-linear"
+};
+const _hoisted_5$1 = {
+  key: 0,
+  class: "or-progress-loader"
+};
+const _hoisted_6 = {
+  key: 1,
+  class: "or-progress-footer"
+};
+const _hoisted_7 = {
+  key: 1,
+  class: "or-progress-circle"
+};
+function render$1(_ctx, _cache, $props, $setup, $data, $options) {
+  return openBlock(), createElementBlock("div", {
+    class: normalizeClass(["or-progress", {
+      'is-linear': _ctx.isLinearType
+    }])
+  }, [_ctx.isLinearType ? (openBlock(), createElementBlock(Fragment, {
+    key: 0
+  }, [_ctx.isShowingHeader ? (openBlock(), createElementBlock("div", _hoisted_1$1, [renderSlot(_ctx.$slots, "header", {}, () => [createElementVNode("div", _hoisted_2$1, [renderSlot(_ctx.$slots, "label", {}, () => [createTextVNode(toDisplayString(_ctx.headerText), 1 /* TEXT */)])]), createElementVNode("div", _hoisted_3$1, [renderSlot(_ctx.$slots, "percent", {
+    value: _ctx.percent
+  }, () => [createTextVNode(toDisplayString(_ctx.percent), 1 /* TEXT */)])])])])) : createCommentVNode("v-if", true), createElementVNode("div", _hoisted_4$1, [_ctx.isLoading ? (openBlock(), createElementBlock("div", _hoisted_5$1)) : (openBlock(), createElementBlock("div", {
+    key: 1,
+    class: normalizeClass(_ctx.progressBarClasses),
+    style: normalizeStyle(_ctx.progressBarStyle)
+  }, null, 6 /* CLASS, STYLE */))]), _ctx.isShowingFooter ? (openBlock(), createElementBlock("div", _hoisted_6, [renderSlot(_ctx.$slots, "footer", {
+    value: _ctx.localValue
+  }, () => [createTextVNode(toDisplayString(_ctx.footerText), 1 /* TEXT */)])])) : createCommentVNode("v-if", true)], 64 /* STABLE_FRAGMENT */)) : _ctx.isCircleType ? (openBlock(), createElementBlock("div", _hoisted_7, [createElementVNode("div", {
+    class: normalizeClass(_ctx.progressPieClasses),
+    style: normalizeStyle(_ctx.pieCircleStyle)
+  }, [createElementVNode("div", {
+    class: "left-side half-circle",
+    style: normalizeStyle(_ctx.leftCircleHalfStyle)
+  }, null, 4 /* STYLE */), createElementVNode("div", {
+    class: "right-side half-circle",
+    style: normalizeStyle(_ctx.rightCircleHalfStyle)
+  }, null, 4 /* STYLE */)], 6 /* CLASS, STYLE */)])) : createCommentVNode("v-if", true)], 2 /* CLASS */);
+}
+
+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-cb4dbcd0 {\nfrom {\n    transform: rotate(0);\n}\nto {\n    transform: rotate(359deg);\n}\n}\n@keyframes fade-cb4dbcd0 {\nfrom {\n    opacity: 1;\n}\nto {\n    opacity: 0;\n}\n}\n@keyframes loaderLinear-cb4dbcd0 {\n0% {\n    transform: translate(-100%, 0);\n}\n100% {\n    transform: translate(100%, 0);\n}\n}\n.or-progress[data-v-cb4dbcd0] {\n  font-size: var(--fs-0);\n  line-height: var(--lh-0);\n  color: var(--c-neutral-5);\n}\n.or-progress.is-linear[data-v-cb4dbcd0] {\n  width: 100%;\n  display: flex;\n  flex-direction: column;\n  min-width: 10rem;\n  max-width: 18.4375rem;\n}\n.or-progress .or-progress-header[data-v-cb4dbcd0] {\n  margin-bottom: 0.375rem;\n  display: flex;\n  flex-direction: row;\n}\n.or-progress .or-progress-header .label[data-v-cb4dbcd0] {\n  color: var(--c-neutral-6);\n  font-weight: bold;\n}\n.or-progress .or-progress-header .percent[data-v-cb4dbcd0] {\n  margin-left: auto;\n}\n.or-progress .or-progress-linear[data-v-cb4dbcd0] {\n  height: var(--s-1);\n  border-radius: 1px;\n  background-color: var(--c-neutral-2);\n  position: relative;\n  display: block;\n  width: 100%;\n  overflow: hidden;\n  transition-timing-function: ease;\n  transition-duration: 0.3s;\n  transition-property: height, opacity;\n}\n.or-progress .or-progress-linear .or-progress-loader[data-v-cb4dbcd0],\n.or-progress .or-progress-linear .or-progress-loader[data-v-cb4dbcd0]::after,\n.or-progress .or-progress-linear .or-progress-bar[data-v-cb4dbcd0] {\n  position: absolute;\n  top: 0;\n  left: 0;\n  bottom: 0;\n  width: 100%;\n  height: auto;\n}\n.or-progress .or-progress-linear .or-progress-loader[data-v-cb4dbcd0] {\n  animation: loaderLinear-cb4dbcd0 1.2s var(--t-func) infinite;\n}\n.or-progress .or-progress-linear .or-progress-loader[data-v-cb4dbcd0]::after {\n  max-width: 7rem;\n  background-color: var(--c-neutral-5);\n  border-radius: var(--s-1);\n  content: \"\";\n}\n.or-progress .or-progress-linear .or-progress-bar[data-v-cb4dbcd0] {\n  transition: transform 0.2s linear;\n  transform-origin: left;\n}\n.or-progress .or-progress-linear .or-progress-bar.is-primary-color[data-v-cb4dbcd0] {\n  background-color: var(--c-primary);\n}\n.or-progress .or-progress-linear .or-progress-bar.is-success-color[data-v-cb4dbcd0] {\n  background-color: var(--c-success);\n}\n.or-progress .or-progress-linear .or-progress-bar.is-warning-color[data-v-cb4dbcd0] {\n  background-color: var(--c-warning);\n}\n.or-progress .or-progress-linear .or-progress-bar.is-error-color[data-v-cb4dbcd0] {\n  background-color: var(--c-error);\n}\n.or-progress .or-progress-circle[data-v-cb4dbcd0] {\n  position: relative;\n  width: 1.5rem;\n  height: 1.5rem;\n}\n.or-progress .or-progress-circle .or-progress-pie[data-v-cb4dbcd0] {\n  clip: rect(0, 1.5rem, 1.5rem, 0.75rem);\n}\n.or-progress .or-progress-circle .or-progress-pie.is-loading[data-v-cb4dbcd0] {\n  clip: rect(auto, auto, auto, auto);\n  animation: spinAround-cb4dbcd0 0.7s linear infinite;\n}\n.or-progress .or-progress-circle .or-progress-pie.is-loading .half-circle[data-v-cb4dbcd0] {\n  visibility: visible !important;\n  border-color: var(--c-primary) !important;\n}\n.or-progress .or-progress-circle .or-progress-pie.is-loading .half-circle.left-side[data-v-cb4dbcd0] {\n  transform: rotate(270deg) !important;\n}\n.or-progress .or-progress-circle .or-progress-pie.is-loading .half-circle.right-side[data-v-cb4dbcd0] {\n  transform: rotate(180deg) !important;\n}\n.or-progress .or-progress-circle .or-progress-pie[data-v-cb4dbcd0],\n.or-progress .or-progress-circle .or-progress-pie .half-circle[data-v-cb4dbcd0] {\n  width: 100%;\n  height: 100%;\n  position: absolute;\n  top: 0;\n  left: 0;\n}\n.or-progress .or-progress-circle .or-progress-pie .half-circle[data-v-cb4dbcd0] {\n  border-style: solid;\n  border-width: var(--s-1);\n  border-radius: 50%;\n  clip: rect(0, 0.75rem, 1.5rem, 0);\n}\n.or-progress .or-progress-circle .or-progress-pie .half-circle.left-side[data-v-cb4dbcd0] {\n  transform: rotate(180deg);\n  transition: visibility 0.2s linear 0.2s, transform 0.2s linear 0.2s;\n}\n.or-progress .or-progress-circle .or-progress-pie .half-circle.right-side[data-v-cb4dbcd0] {\n  transition: transform 0.2s linear;\n}\n.or-progress .or-progress-circle .or-progress-pie.is-primary-color > .half-circle[data-v-cb4dbcd0] {\n  border-color: var(--c-primary);\n}\n.or-progress .or-progress-circle .or-progress-pie.is-success-color > .half-circle[data-v-cb4dbcd0] {\n  border-color: var(--c-success);\n}\n.or-progress .or-progress-circle .or-progress-pie.is-warning-color > .half-circle[data-v-cb4dbcd0] {\n  border-color: var(--c-warning);\n}\n.or-progress .or-progress-circle .or-progress-pie.is-error-color > .half-circle[data-v-cb4dbcd0] {\n  border-color: var(--c-error);\n}\n.or-progress .or-progress-footer[data-v-cb4dbcd0] {\n  margin-top: var(--s-1);\n}";
+styleInject(css_248z$1);
+
+script$2.render = render$1;
+script$2.__scopeId = "data-v-cb4dbcd0";
+script$2.__file = "src/components/or-progress/OrProgress.vue";
+
 var script$1 = defineComponent({
   name: 'OrToast',
   components: {

package/dist/bundled/{v2/useToast-b522f851.js → v3/useToast-40bff6ec.js}

@@ -1,5 +1,6 @@
-import { u as useToastEventBus, T as ToastType } from './props-32824e11.js';
+import { T as ToastType } from './props-fb3f60a5.js';
 import { noop } from '@vueuse/core';
+import { u as useToastEventBus } from './useToastEventBus-422dae05.js';
 
 class Timer {
   // eslint-disable-next-line @typescript-eslint/no-empty-function

package/dist/bundled/{v2/useQueue-419a3ead.js → v3/useToast-4fbe0e5a.js}

@@ -1,5 +1,79 @@
-import { noop, createSharedComposable, useEventBus } from '@vueuse/core';
 import { ref } from 'vue-demi';
+import { createSharedComposable, useEventBus, noop } from '@vueuse/core';
+
+var PositionsX;
+(function (PositionsX) {
+  PositionsX["right"] = "right";
+  PositionsX["left"] = "left";
+  PositionsX["center"] = "center";
+})(PositionsX || (PositionsX = {}));
+var PositionsY;
+(function (PositionsY) {
+  PositionsY["top"] = "top";
+  PositionsY["bottom"] = "bottom";
+})(PositionsY || (PositionsY = {}));
+var TransitionType;
+(function (TransitionType) {
+  TransitionType["slide"] = "slide";
+  TransitionType["fade"] = "fade";
+})(TransitionType || (TransitionType = {}));
+var ToastType;
+(function (ToastType) {
+  ToastType["success"] = "success";
+  ToastType["error"] = "error";
+  ToastType["loading"] = "loading";
+})(ToastType || (ToastType = {}));
+
+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);
 
 class Timer {
   // eslint-disable-next-line @typescript-eslint/no-empty-function
@@ -35,50 +109,6 @@ class Timer {
   }
 }
 
-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);
-
-var PositionsX;
-(function (PositionsX) {
-  PositionsX["right"] = "right";
-  PositionsX["left"] = "left";
-  PositionsX["center"] = "center";
-})(PositionsX || (PositionsX = {}));
-var PositionsY;
-(function (PositionsY) {
-  PositionsY["top"] = "top";
-  PositionsY["bottom"] = "bottom";
-})(PositionsY || (PositionsY = {}));
-var TransitionType;
-(function (TransitionType) {
-  TransitionType["slide"] = "slide";
-  TransitionType["fade"] = "fade";
-})(TransitionType || (TransitionType = {}));
-var ToastType;
-(function (ToastType) {
-  ToastType["success"] = "success";
-  ToastType["error"] = "error";
-  ToastType["loading"] = "loading";
-})(ToastType || (ToastType = {}));
-
 function useToast(globalToastProps = {}) {
   const {
     emit
@@ -155,34 +185,4 @@ function useToast(globalToastProps = {}) {
   };
 }
 
-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
-  };
-}
-
 export { PositionsX as P, TransitionType as T, useQueue as a, PositionsY as b, ToastType as c, useToastEventBus$1 as d, useToast as u };

package/dist/bundled/{v2/props-32824e11.js → v3/useToastEventBus-422dae05.js}

@@ -52,35 +52,4 @@ const useToastEventBus = () => {
 };
 var useToastEventBus$1 = createSharedComposable(useToastEventBus);
 
-var PositionsX;
-(function (PositionsX) {
-  PositionsX["Right"] = "right";
-  PositionsX["Left"] = "left";
-  PositionsX["Center"] = "center";
-})(PositionsX || (PositionsX = {}));
-var PositionsY;
-(function (PositionsY) {
-  PositionsY["Top"] = "top";
-  PositionsY["Bottom"] = "bottom";
-})(PositionsY || (PositionsY = {}));
-var TransitionType;
-(function (TransitionType) {
-  TransitionType["Slide"] = "slide";
-  TransitionType["Fade"] = "fade";
-})(TransitionType || (TransitionType = {}));
-var ToastType;
-(function (ToastType) {
-  ToastType["Success"] = "success";
-  ToastType["Error"] = "error";
-  ToastType["Loading"] = "loading";
-})(ToastType || (ToastType = {}));
-
-var props = /*#__PURE__*/Object.freeze({
-  __proto__: null,
-  get PositionsX () { return PositionsX; },
-  get PositionsY () { return PositionsY; },
-  get TransitionType () { return TransitionType; },
-  get ToastType () { return ToastType; }
-});
-
-export { PositionsX as P, ToastType as T, PositionsY as a, TransitionType as b, useQueue as c, props as p, useToastEventBus$1 as u };
+export { useQueue as a, useToastEventBus$1 as u };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@onereach/ui-components",
-  "version": "2.68.0-beta.2053.0",
+  "version": "2.68.0-beta.2056.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.48.0",
+    "@onereach/rollup-vue-lib-config": "1.0.7-beta.49.0",
     "@rollup/plugin-replace": "4.0.0",
     "@rollup/plugin-url": "^8.0.1",
     "@storybook/addon-actions": "6.5.15",

package/dist/bundled/v2/OrCard-5e7e07d1.js

@@ -1,69 +0,0 @@
-import { defineComponent, ref, computed } from 'vue-demi';
-import { u as useClassAttribute } from './useClassAttribute-47fdb016.js';
-import { n as normalizeComponent } from './normalize-component-6e8e3d80.js';
-
-const CardRoot = [
-// Layout
-'flex', 'flex-col',
-// Box
-'rounded-md',
-// Sizing
-'px-md', 'py-md', 'gap-[10px]',
-// Typography
-'typography-body-2-regular',
-// Theme
-'theme-background-default', 'dark:theme-background-default-dark', 'theme-foreground-default', 'dark:theme-foreground-default-dark', 'shadow-card', 'dark:shadow-card-dark'];
-
-var script = defineComponent({
-  name: 'OrCard',
-  inheritAttrs: false,
-  expose: ['root'],
-  setup() {
-    // Refs
-    const root = ref();
-    // Styles
-    const classAttribute = useClassAttribute();
-    const rootStyles = computed(() => ['or-card', ...CardRoot, classAttribute.value]);
-    return {
-      root,
-      rootStyles
-    };
-  }
-});
-
-/* 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', _vm._b({
-    ref: "root",
-    class: _vm.rootStyles
-  }, 'div', _vm.$attrs, false), [_vm._t("default")], 2);
-};
-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 OrCard = __vue_component__;
-
-export { OrCard as O };