@onereach/ui-components-vue2 19.4.2 → 19.6.0

package/dist/bundled/components/OrDataGridV3/index.js

@@ -15,6 +15,7 @@ import { DataGrid } from './styles.js';
 import __vue_component__$D from '../OrPaginationV3/OrPagination.js';
 import __vue_component__$E from '../OrSearchV3/OrSearch.js';
 import __vue_component__$F from '../OrSkeletonTextV3/OrSkeletonText.js';
+import __vue_component__$G from '../OrNotificationV3/OrNotification.js';
 
 const DataGridFooter = [
 // Layout
@@ -1283,7 +1284,8 @@ var script = defineComponent({
     OrDataGridToolbar: __vue_component__$2,
     OrPagination: __vue_component__$D,
     OrSearch: __vue_component__$E,
-    OrSkeletonText: __vue_component__$F
+    OrSkeletonText: __vue_component__$F,
+    OrNotification: __vue_component__$G
   },
   model: {
     prop: 'modelValue',
@@ -1313,9 +1315,13 @@ var script = defineComponent({
     loading: {
       type: Boolean,
       default: false
+    },
+    notification: {
+      type: Object,
+      default: undefined
     }
   },
-  emits: ['update:modelValue', 'update:item'],
+  emits: ['update:modelValue', 'update:item', 'close-notification'],
   expose: ['root'],
   setup(props, context) {
     // Refs & Styles
@@ -1561,7 +1567,16 @@ var __vue_render__ = function () {
         expression: "sortingModel"
       }
     }, [_vm._v("\n          " + _vm._s(column.label) + "\n        ")]);
-  })], 2)], 1), _vm._v(" "), _c('OrDataGridTableContent', [_vm.loading ? _vm._l(10, function (n) {
+  })], 2)], 1), _vm._v(" "), _vm.notification ? [_c('div', {
+    staticClass: "grid col-span-full"
+  }, [_c('OrNotification', _vm._b({
+    staticClass: "rounded-0",
+    on: {
+      "close": function ($event) {
+        return _vm.$emit('close-notification');
+      }
+    }
+  }, 'OrNotification', _vm.notification, false), [_vm.$slots['notification'] ? [_vm._t('notification')] : _vm._e()], 2)], 1)] : _vm._e(), _vm._v(" "), _c('OrDataGridTableContent', [_vm.loading ? _vm._l(10, function (n) {
     return _c('OrDataGridTableContentRow', {
       key: n,
       attrs: {
@@ -1646,7 +1661,7 @@ var __vue_render__ = function () {
     attrs: {
       "variant": _vm.variant
     }
-  }, [_vm._t('empty')], 2)] : _vm._e()], 2)], 1), _vm._v(" "), _vm.$slots['extra-row'] ? [_c('OrDataGridTableFooter', [_c('OrDataGridTableFooterRow', {
+  }, [_vm._t('empty')], 2)] : _vm._e()], 2)], 2), _vm._v(" "), _vm.$slots['extra-row'] ? [_c('OrDataGridTableFooter', [_c('OrDataGridTableFooterRow', {
     class: ['shrink-0'],
     attrs: {
       "variant": _vm.variant

package/dist/bundled/components/OrIndicatorV3/OrIndicator.js

@@ -0,0 +1,90 @@
+import { defineComponent, ref, computed } from 'vue-demi';
+import { IndicatorSize, IndicatorColor } from './props.js';
+import { IndicatorShape, IndicatorThemes, IndicatorIconThemes } from './styles.js';
+import __vue_component__$1 from '../OrIconV3/OrIcon.js';
+import { IconVariant, IconSize } from '../OrIconV3/props.js';
+import { n as normalizeComponent } from '../../normalize-component-cf2db48b.js';
+
+var script = defineComponent({
+  name: 'OrIndicator',
+  components: {
+    OrIcon: __vue_component__$1
+  },
+  props: {
+    size: {
+      type: String,
+      default: () => IndicatorSize.M
+    },
+    color: {
+      type: String,
+      default: IndicatorColor.Neutral
+    },
+    icon: {
+      type: [String, Object, undefined],
+      default: undefined
+    }
+  },
+  setup(props) {
+    // Refs
+    const root = ref();
+    // Styles
+    const rootStyles = computed(() => ['or-indicator-v3', ...(!props.icon ? IndicatorShape[props.size] : []), ...(!props.icon ? IndicatorThemes[props.color] : [])]);
+    const iconContainerStyles = computed(() => [...IndicatorIconThemes[props.color]]);
+    // Icon props
+    const iconProps = computed(() => {
+      return typeof props.icon === 'string' ? {
+        icon: props.icon,
+        variant: IconVariant.Inherit,
+        size: props.size === IndicatorSize.S ? IconSize.M : props.size
+      } : {
+        variant: IconVariant.Inherit,
+        size: props.size === IndicatorSize.S ? IconSize.M : props.size,
+        ...props.icon
+      };
+    });
+    return {
+      iconContainerStyles,
+      iconProps,
+      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', {
+    ref: 'root',
+    class: _vm.rootStyles
+  }, [_vm.icon ? _c('OrIcon', _vm._b({
+    class: _vm.iconContainerStyles
+  }, 'OrIcon', _vm.iconProps, false)) : _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);
+
+export { __vue_component__ as default };

package/dist/bundled/components/OrIndicatorV3/OrIndicator.vue.d.ts

@@ -0,0 +1,2 @@
+declare const _default: any;
+export default _default;

package/dist/bundled/components/OrIndicatorV3/index.d.ts

@@ -0,0 +1,2 @@
+export { default as OrIndicatorV3 } from './OrIndicator.vue';
+export * from './props';

package/dist/bundled/components/OrIndicatorV3/index.js

@@ -0,0 +1,2 @@
+export { default as OrIndicatorV3 } from './OrIndicator.js';
+export { IndicatorColor, IndicatorSize } from './props.js';

package/dist/bundled/components/OrIndicatorV3/props.d.ts

@@ -0,0 +1,14 @@
+export declare enum IndicatorColor {
+    Success = "success",
+    Neutral = "neutral",
+    Warning = "warning",
+    Outline = "outline",
+    Error = "error",
+    Inherit = "inherit"
+}
+export declare enum IndicatorSize {
+    XL = "xl",
+    L = "l",
+    M = "m",
+    S = "s"
+}

package/dist/bundled/components/OrIndicatorV3/props.js

@@ -0,0 +1,18 @@
+var IndicatorColor;
+(function (IndicatorColor) {
+  IndicatorColor["Success"] = "success";
+  IndicatorColor["Neutral"] = "neutral";
+  IndicatorColor["Warning"] = "warning";
+  IndicatorColor["Outline"] = "outline";
+  IndicatorColor["Error"] = "error";
+  IndicatorColor["Inherit"] = "inherit";
+})(IndicatorColor || (IndicatorColor = {}));
+var IndicatorSize;
+(function (IndicatorSize) {
+  IndicatorSize["XL"] = "xl";
+  IndicatorSize["L"] = "l";
+  IndicatorSize["M"] = "m";
+  IndicatorSize["S"] = "s";
+})(IndicatorSize || (IndicatorSize = {}));
+
+export { IndicatorColor, IndicatorSize };

package/dist/bundled/components/OrIndicatorV3/styles.d.ts

@@ -0,0 +1,4 @@
+import { IndicatorColor, IndicatorSize } from './props';
+export declare const IndicatorShape: Record<IndicatorSize, string[]>;
+export declare const IndicatorThemes: Record<IndicatorColor, string[]>;
+export declare const IndicatorIconThemes: Record<IndicatorColor, string[]>;

package/dist/bundled/components/OrIndicatorV3/styles.js

@@ -0,0 +1,50 @@
+import { IndicatorSize, IndicatorColor } from './props.js';
+
+const IndicatorShape = {
+  [IndicatorSize.XL]: [
+  // Layout
+  'shrink-0',
+  // Box
+  'w-[24px]', 'h-[24px]',
+  // Shape
+  'rounded-full'],
+  [IndicatorSize.L]: [
+  // Layout
+  'shrink-0',
+  // Box
+  'w-[20px]', 'h-[20px]',
+  // Shape
+  'rounded-full'],
+  [IndicatorSize.M]: [
+  // Layout
+  'shrink-0',
+  // Box
+  'w-[16px]', 'h-[16px]',
+  // Shape
+  'rounded-full'],
+  [IndicatorSize.S]: [
+  // Layout
+  'shrink-0',
+  // Box
+  'w-[8px]', 'h-[8px]',
+  // Shape
+  'rounded-full']
+};
+const IndicatorThemes = {
+  [IndicatorColor.Error]: ['theme-foreground-on-error', 'dark:theme-foreground-on-error-dark', 'theme-background-error', 'dark:theme-background-error-dark'],
+  [IndicatorColor.Neutral]: ['theme-foreground-on-primary', 'dark:theme-foreground-on-primary-dark', 'theme-background-primary', 'dark:theme-background-primary-dark'],
+  [IndicatorColor.Inherit]: [],
+  [IndicatorColor.Outline]: ['theme-foreground-on-secondary', 'dark:theme-foreground-on-secondary-dark', 'theme-background-secondary', 'dark:theme-background-secondary-dark'],
+  [IndicatorColor.Success]: ['theme-foreground-on-success', 'dark:theme-foreground-on-success-dark', 'theme-background-success', 'dark:theme-background-success-dark'],
+  [IndicatorColor.Warning]: ['theme-foreground-on-warning', 'dark:theme-foreground-on-warning-dark', 'theme-background-warning', 'dark:theme-background-warning-dark']
+};
+const IndicatorIconThemes = {
+  [IndicatorColor.Error]: ['theme-foreground-error', 'dark:theme-foreground-error-dark'],
+  [IndicatorColor.Neutral]: ['theme-foreground-primary', 'dark:theme-foreground-primary-dark'],
+  [IndicatorColor.Inherit]: [],
+  [IndicatorColor.Outline]: ['theme-foreground-secondary', 'dark:theme-foreground-secondary-dark'],
+  [IndicatorColor.Success]: ['theme-foreground-success', 'dark:theme-foreground-success-dark'],
+  [IndicatorColor.Warning]: ['theme-foreground-warning', 'dark:theme-foreground-warning-dark']
+};
+
+export { IndicatorIconThemes, IndicatorShape, IndicatorThemes };

package/dist/bundled/components/OrNotificationV3/OrNotification.js

@@ -1,14 +1,15 @@
 import { defineComponent, ref, computed } from 'vue-demi';
-import { NotificationVariant } from './props.js';
-import { Notification, NotificationVariants, NotificationIcon, NotificationIconVariants } from './styles.js';
-import __vue_component__$1 from '../OrIconV3/OrIcon.js';
+import { NotificationVariant, VariantToIconName } from './props.js';
+import { Notification, NotificationVariants } from './styles.js';
+import __vue_component__$1 from '../OrIndicatorV3/OrIndicator.js';
 import __vue_component__$2 from '../OrIconButtonV3/OrIconButton.js';
+import { IndicatorColor } from '../OrIndicatorV3/props.js';
 import { n as normalizeComponent } from '../../normalize-component-cf2db48b.js';
 
 var script = defineComponent({
   name: 'OrNotification',
   components: {
-    OrIcon: __vue_component__$1,
+    OrIndicator: __vue_component__$1,
     OrIconButton: __vue_component__$2
   },
   props: {
@@ -19,6 +20,10 @@ var script = defineComponent({
     disableClose: {
       type: Boolean,
       default: false
+    },
+    message: {
+      type: String,
+      default: undefined
     }
   },
   expose: ['root'],
@@ -27,26 +32,26 @@ var script = defineComponent({
     const root = ref();
     // Styles
     const rootStyles = computed(() => ['or-notification-v3', ...Notification, ...NotificationVariants[props.variant]]);
-    const iconStyles = computed(() => [...NotificationIcon, ...NotificationIconVariants[props.variant]]);
-    // State
-    // eslint-disable-next-line vue/return-in-computed-property
-    const icon = computed(() => {
-      switch (props.variant) {
-        case 'success':
-          return 'check_circle';
-        case 'warning':
-          return 'warning';
-        case 'error':
-          return 'error';
-        case 'info':
-          return 'info';
-      }
+    const indicatorProps = computed(() => {
+      const VariantToIndicatorColor = {
+        [NotificationVariant.Success]: IndicatorColor.Success,
+        [NotificationVariant.Warning]: IndicatorColor.Warning,
+        [NotificationVariant.Error]: IndicatorColor.Error,
+        [NotificationVariant.Info]: IndicatorColor.Neutral
+      };
+      return {
+        icon: {
+          icon: VariantToIconName[props.variant],
+          variant: 'filled-bold'
+        },
+        color: VariantToIndicatorColor[props.variant],
+        size: 'm'
+      };
     });
     return {
       root,
       rootStyles,
-      iconStyles,
-      icon
+      indicatorProps
     };
   }
 });
@@ -64,15 +69,11 @@ var __vue_render__ = function () {
     class: _vm.rootStyles
   }, [_c('div', {
     class: ['mt-[2px] md:mt-[2.5px]']
-  }, [_c('OrIcon', {
-    class: _vm.iconStyles,
-    attrs: {
-      "icon": _vm.icon,
-      "variant": 'filled-bold'
-    }
-  })], 1), _vm._v(" "), _c('div', {
+  }, [_c('OrIndicator', _vm._b({}, 'OrIndicator', _vm.indicatorProps, false))], 1), _vm._v(" "), _c('div', {
     class: ['grow']
-  }, [_vm._t("default")], 2), _vm._v(" "), _c('div', {
+  }, [_vm._t("default", function () {
+    return [_vm._v(" " + _vm._s(_vm.message) + " ")];
+  })], 2), _vm._v(" "), _c('div', {
     class: ['mt-[2px] md:mt-[2.5px]']
   }, [!_vm.disableClose ? _c('OrIconButton', {
     attrs: {

package/dist/bundled/components/OrNotificationV3/index.js

@@ -1,2 +1,2 @@
 export { default as OrNotificationV3 } from './OrNotification.js';
-export { NotificationVariant } from './props.js';
+export { NotificationVariant, VariantToIconName } from './props.js';

package/dist/bundled/components/OrNotificationV3/props.d.ts

@@ -4,3 +4,6 @@ export declare enum NotificationVariant {
     Error = "error",
     Info = "info"
 }
+export declare const VariantToIconName: {
+    [key in NotificationVariant]: string;
+};

package/dist/bundled/components/OrNotificationV3/props.js

@@ -5,5 +5,11 @@ var NotificationVariant;
   NotificationVariant["Error"] = "error";
   NotificationVariant["Info"] = "info";
 })(NotificationVariant || (NotificationVariant = {}));
+const VariantToIconName = {
+  [NotificationVariant.Success]: 'check_circle',
+  [NotificationVariant.Warning]: 'warning',
+  [NotificationVariant.Error]: 'error',
+  [NotificationVariant.Info]: 'info'
+};
 
-export { NotificationVariant };
+export { NotificationVariant, VariantToIconName };

package/dist/bundled/components/OrNotificationV3/styles.d.ts

@@ -1,5 +1,3 @@
 import { NotificationVariant } from './props';
 export declare const Notification: string[];
 export declare const NotificationVariants: Record<NotificationVariant, string[]>;
-export declare const NotificationIcon: string[];
-export declare const NotificationIconVariants: Record<NotificationVariant, string[]>;

package/dist/bundled/components/OrNotificationV3/styles.js

@@ -37,20 +37,5 @@ const NotificationVariants = {
   // Theme (children)
   '[&_:any-link]:theme-foreground-primary', 'dark:[&_:any-link]:theme-foreground-primary-dark']
 };
-const NotificationIcon = [];
-const NotificationIconVariants = {
-  [NotificationVariant.Success]: [
-  // Theme
-  'theme-foreground-success', 'dark:theme-foreground-success-dark'],
-  [NotificationVariant.Warning]: [
-  // Theme
-  'theme-foreground-warning', 'dark:theme-foreground-warning-dark'],
-  [NotificationVariant.Error]: [
-  // Theme
-  'theme-foreground-error', 'dark:theme-foreground-error-dark'],
-  [NotificationVariant.Info]: [
-  // Theme
-  'theme-foreground-primary', 'dark:theme-foreground-primary-dark']
-};
 
-export { Notification, NotificationIcon, NotificationIconVariants, NotificationVariants };
+export { Notification, NotificationVariants };

package/dist/bundled/components/OrStatusV3/OrStatus.js

@@ -1,11 +1,16 @@
 import { g as formatTimeAgo } from '../../index-fe4d407a.js';
 import { defineComponent, ref, computed } from 'vue-demi';
 import { StatusVariant, StatusSize } from './props.js';
-import { Status, StatusVariants, StatusSizes, StatusIndicator, StatusIndicatorVariants, StatusTimestamp } from './styles.js';
+import { Status, StatusVariants, StatusSizes, StatusTimestamp } from './styles.js';
+import __vue_component__$1 from '../OrIndicatorV3/OrIndicator.js';
+import { IndicatorColor, IndicatorSize } from '../OrIndicatorV3/props.js';
 import { n as normalizeComponent } from '../../normalize-component-cf2db48b.js';
 
 var script = defineComponent({
   name: 'OrStatus',
+  components: {
+    OrIndicator: __vue_component__$1
+  },
   props: {
     variant: {
       type: String,
@@ -26,12 +31,34 @@ var script = defineComponent({
     const root = ref();
     // Styles
     const rootStyles = computed(() => ['or-status-v3', ...Status, ...StatusVariants[props.variant], ...StatusSizes[props.size]]);
-    const indicatorStyles = computed(() => [...StatusIndicator, ...StatusIndicatorVariants[props.variant]]);
     const timestampStyles = computed(() => [...StatusTimestamp]);
+    const indicatorProps = computed(() => {
+      let color;
+      switch (props.variant) {
+        case StatusVariant.Error:
+          color = IndicatorColor.Error;
+          break;
+        case StatusVariant.Success:
+          color = IndicatorColor.Success;
+          break;
+        case StatusVariant.Warning:
+          color = IndicatorColor.Warning;
+          break;
+        case StatusVariant.Disabled:
+          color = IndicatorColor.Outline;
+          break;
+        default:
+          color = IndicatorColor.Neutral;
+      }
+      return {
+        size: IndicatorSize.S,
+        color
+      };
+    });
     return {
       root,
       rootStyles,
-      indicatorStyles,
+      indicatorProps,
       timestampStyles,
       formatTimeAgo
     };
@@ -49,9 +76,7 @@ var __vue_render__ = function () {
   return _c('div', {
     ref: 'root',
     class: _vm.rootStyles
-  }, [_c('div', {
-    class: _vm.indicatorStyles
-  }), _vm._v(" "), _c('span', {
+  }, [_c('OrIndicator', _vm._b({}, 'OrIndicator', _vm.indicatorProps, false)), _vm._v(" "), _c('span', {
     class: ['truncate']
   }, [_vm._t("default")], 2), _vm._v(" "), _vm.timestamp ? [_c('span', {
     class: _vm.timestampStyles

package/dist/bundled/components/OrStatusV3/styles.d.ts

@@ -2,6 +2,4 @@ import { StatusSize, StatusVariant } from './props';
 export declare const Status: string[];
 export declare const StatusVariants: Record<StatusVariant, string[]>;
 export declare const StatusSizes: Record<StatusSize, string[]>;
-export declare const StatusIndicator: string[];
-export declare const StatusIndicatorVariants: Record<StatusVariant, string[]>;
 export declare const StatusTimestamp: string[];

package/dist/bundled/components/OrStatusV3/styles.js

@@ -30,34 +30,10 @@ const StatusSizes = {
   // Typography
   'typography-caption-regular']
 };
-const StatusIndicator = [
-// Layout
-'shrink-0',
-// Box
-'w-[10px] md:w-[8px]', 'h-[10px] md:h-[8px]',
-// Shape
-'rounded-full'];
-const StatusIndicatorVariants = {
-  [StatusVariant.Neutral]: [
-  // Theme
-  'theme-background-primary', 'dark:theme-background-primary-dark'],
-  [StatusVariant.Disabled]: [
-  // Theme
-  'theme-background-current', 'dark:theme-background-current-dark'],
-  [StatusVariant.Success]: [
-  // Theme
-  'theme-background-success-hover', 'dark:theme-background-success-hover-dark'],
-  [StatusVariant.Warning]: [
-  // Theme
-  'theme-background-warning-hover', 'dark:theme-background-warning-hover-dark'],
-  [StatusVariant.Error]: [
-  // Theme
-  'theme-background-error-hover', 'dark:theme-background-error-hover-dark']
-};
 const StatusTimestamp = [
 // Layout
 'shrink-0',
 // Theme
 'theme-foreground-outline', 'dark:theme-foreground-outline-dark'];
 
-export { Status, StatusIndicator, StatusIndicatorVariants, StatusSizes, StatusTimestamp, StatusVariants };
+export { Status, StatusSizes, StatusTimestamp, StatusVariants };

package/dist/bundled/components/index.d.ts

@@ -50,6 +50,7 @@ export * from './or-icon';
 export * from './or-icon-button-v2';
 export * from './or-icon-button-v3';
 export * from './or-icon-v3';
+export * from './or-indicator-v3';
 export * from './or-inline-input-box-v3';
 export * from './or-inline-input-v3';
 export * from './or-inline-text-edit';

package/dist/bundled/components/index.js

@@ -93,6 +93,8 @@ export { default as OrIconButtonV3 } from './OrIconButtonV3/OrIconButton.js';
 export { IconButtonColor } from './OrIconButtonV3/props.js';
 export { default as OrIconV3 } from './OrIconV3/OrIcon.js';
 export { IconSize, IconVariant } from './OrIconV3/props.js';
+export { default as OrIndicatorV3 } from './OrIndicatorV3/OrIndicator.js';
+export { IndicatorColor, IndicatorSize } from './OrIndicatorV3/props.js';
 export { default as OrInlineInputBoxV3 } from './OrInlineInputBoxV3/OrInlineInputBox.js';
 export { InlineInputBoxSize } from './OrInlineInputBoxV3/props.js';
 export { InlineInputType, OrInlineInputV3 } from './OrInlineInputV3/index.js';
@@ -124,7 +126,7 @@ export { ModalSize } from './OrModalV3/props.js';
 export { default as OrNotification } from './OrNotification/OrNotification.js';
 export { OR_NOTIFICATION_SIZE, OR_NOTIFICATION_TYPE } from './OrNotification/constants.js';
 export { default as OrNotificationV3 } from './OrNotificationV3/OrNotification.js';
-export { NotificationVariant } from './OrNotificationV3/props.js';
+export { NotificationVariant, VariantToIconName } from './OrNotificationV3/props.js';
 export { default as OrNumberInput } from './OrNumberInput/OrNumberInput.js';
 export { default as OrOverflowMenu } from './OrOverflowMenu/OrOverflowMenu.js';
 export { default as OrOverlay } from './OrOverlay/OrOverlay.js';