@onereach/ui-components-vue2 19.4.1 → 19.5.0

package/dist/esm/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/esm/components/index.js

@@ -66,6 +66,7 @@ export { OrHintV3 } from './or-hint-v3/index.js';
 export { OrIcon, OrIconColors, OrIconType } from './or-icon/index.js';
 export { IconButtonColor, OrIconButtonV3 } from './or-icon-button-v3/index.js';
 export { IconSize, IconVariant, OrIconV3 } from './or-icon-v3/index.js';
+export { IndicatorColor, IndicatorSize, OrIndicatorV3 } from './or-indicator-v3/index.js';
 export { InlineInputBoxSize, OrInlineInputBoxV3 } from './or-inline-input-box-v3/index.js';
 export { InlineInputType, OrInlineInputV3 } from './or-inline-input-v3/index.js';
 export { InlineTextEditTrimmingTypes, InlineTextEditTypes, OrInlineTextEdit } from './or-inline-text-edit/index.js';
@@ -88,7 +89,7 @@ export { OrMenuV3 } from './or-menu-v3/index.js';
 export { OrModal, OrModalSizes } from './or-modal/index.js';
 export { ModalSize, OrModalV3 } from './or-modal-v3/index.js';
 export { OR_NOTIFICATION_SIZE, OR_NOTIFICATION_TYPE, OrNotification } from './or-notification/index.js';
-export { NotificationVariant, OrNotificationV3 } from './or-notification-v3/index.js';
+export { NotificationVariant, OrNotificationV3, VariantToIconName } from './or-notification-v3/index.js';
 export { OrNumberInput } from './or-number-input/index.js';
 export { OrOverflowMenu } from './or-overflow-menu/index.js';
 export { OrOverlay } from './or-overlay/index.js';

package/dist/esm/components/or-drawer-v3/index.js

@@ -100,7 +100,7 @@ var script = defineComponent({
     // Effects
     onClickOutside(root, event => {
       const path = event.composedPath();
-      const ignoreClasses = ['or-popover-v3', 'or-bottom-sheet-v3', 'or-modal-v3'];
+      const ignoreClasses = ['or-popover-v3', 'or-bottom-sheet-v3', 'or-modal-v3', 'or-confirm-v3'];
       if (!path.some(({
         classList
       }) => ignoreClasses.some(ignoreClass => classList === null || classList === void 0 ? void 0 : classList.contains(ignoreClass)))) {

package/dist/esm/components/or-indicator-v3/OrIndicator.vue.d.ts

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

package/dist/esm/components/or-indicator-v3/index.d.ts

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

package/dist/esm/components/or-indicator-v3/index.js

@@ -0,0 +1,151 @@
+import { defineComponent, ref, computed } from 'vue-demi';
+import { OrIconV3 as __vue_component__$1, IconVariant, IconSize } from '../or-icon-v3/index.js';
+import { n as normalizeComponent } from '../../normalize-component-cf2db48b.js';
+
+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 = {}));
+
+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']
+};
+
+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 { IndicatorColor, IndicatorSize, __vue_component__ as OrIndicatorV3 };

package/dist/esm/components/or-indicator-v3/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/esm/components/or-indicator-v3/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/esm/components/or-notification-v3/index.js

@@ -1,8 +1,9 @@
 import { defineComponent, ref, computed } from 'vue-demi';
 import { OrIconButtonV3 as __vue_component__$2 } from '../or-icon-button-v3/index.js';
-import { OrIconV3 as __vue_component__$1 } from '../or-icon-v3/index.js';
+import { OrIndicatorV3 as __vue_component__$1, IndicatorColor } from '../or-indicator-v3/index.js';
 import { n as normalizeComponent } from '../../normalize-component-cf2db48b.js';
 import '../../constants-873d04a2.js';
+import '../or-icon-v3/index.js';
 import '../or-tooltip-v3/index.js';
 import '../../types/index.js';
 import '../../dom-11141778.js';
@@ -32,6 +33,12 @@ 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'
+};
 
 const Notification = [
 // Layout
@@ -70,26 +77,11 @@ 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']
-};
 
 var script = defineComponent({
   name: 'OrNotification',
   components: {
-    OrIcon: __vue_component__$1,
+    OrIndicator: __vue_component__$1,
     OrIconButton: __vue_component__$2
   },
   props: {
@@ -108,26 +100,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
     };
   }
 });
@@ -145,13 +137,7 @@ 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', {
     class: ['mt-[2px] md:mt-[2.5px]']
@@ -189,4 +175,4 @@ const __vue_component__ = /*#__PURE__*/normalizeComponent({
   staticRenderFns: __vue_staticRenderFns__
 }, __vue_inject_styles__, __vue_script__, __vue_scope_id__, __vue_is_functional_template__, __vue_module_identifier__, false, undefined, undefined, undefined);
 
-export { NotificationVariant, __vue_component__ as OrNotificationV3 };
+export { NotificationVariant, __vue_component__ as OrNotificationV3, VariantToIconName };

package/dist/esm/components/or-notification-v3/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/esm/components/or-notification-v3/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/esm/components/or-popover-v3/utils/index.js

@@ -15,6 +15,9 @@ function isPrevented(path, trigger) {
       if (classList === null || classList === void 0 ? void 0 : classList.contains('or-bottom-sheet-v3')) {
         return true;
       }
+      if (classList === null || classList === void 0 ? void 0 : classList.contains('or-confirm-v3')) {
+        return true;
+      }
     }
     return false;
   });

package/dist/esm/components/or-status-v3/index.js

@@ -1,6 +1,8 @@
 import { formatTimeAgo } from '@vueuse/core';
 import { defineComponent, ref, computed } from 'vue-demi';
+import { OrIndicatorV3 as __vue_component__$1, IndicatorColor, IndicatorSize } from '../or-indicator-v3/index.js';
 import { n as normalizeComponent } from '../../normalize-component-cf2db48b.js';
+import '../or-icon-v3/index.js';
 
 var StatusVariant;
 (function (StatusVariant) {
@@ -46,30 +48,6 @@ 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',
@@ -78,6 +56,9 @@ const StatusTimestamp = [
 
 var script = defineComponent({
   name: 'OrStatus',
+  components: {
+    OrIndicator: __vue_component__$1
+  },
   props: {
     variant: {
       type: String,
@@ -98,12 +79,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
     };
@@ -121,9 +124,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/esm/components/or-status-v3/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/esm/index.js

@@ -66,6 +66,7 @@ export { OrHintV3 } from './components/or-hint-v3/index.js';
 export { OrIcon, OrIconColors, OrIconType } from './components/or-icon/index.js';
 export { IconButtonColor, OrIconButtonV3 } from './components/or-icon-button-v3/index.js';
 export { IconSize, IconVariant, OrIconV3 } from './components/or-icon-v3/index.js';
+export { IndicatorColor, IndicatorSize, OrIndicatorV3 } from './components/or-indicator-v3/index.js';
 export { InlineInputBoxSize, OrInlineInputBoxV3 } from './components/or-inline-input-box-v3/index.js';
 export { InlineInputType, OrInlineInputV3 } from './components/or-inline-input-v3/index.js';
 export { InlineTextEditTrimmingTypes, InlineTextEditTypes, OrInlineTextEdit } from './components/or-inline-text-edit/index.js';
@@ -88,7 +89,7 @@ export { OrMenuV3 } from './components/or-menu-v3/index.js';
 export { OrModal, OrModalSizes } from './components/or-modal/index.js';
 export { ModalSize, OrModalV3 } from './components/or-modal-v3/index.js';
 export { OR_NOTIFICATION_SIZE, OR_NOTIFICATION_TYPE, OrNotification } from './components/or-notification/index.js';
-export { NotificationVariant, OrNotificationV3 } from './components/or-notification-v3/index.js';
+export { NotificationVariant, OrNotificationV3, VariantToIconName } from './components/or-notification-v3/index.js';
 export { OrNumberInput } from './components/or-number-input/index.js';
 export { OrOverflowMenu } from './components/or-overflow-menu/index.js';
 export { OrOverlay } from './components/or-overlay/index.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@onereach/ui-components-vue2",
-  "version": "19.4.1",
+  "version": "19.5.0",
   "npmUnpacked": "4.15.2",
   "description": "Vue components library for v2",
   "sideEffects": false,
@@ -35,7 +35,7 @@
     "@codemirror/view": "^6",
     "@floating-ui/dom": "1.5.3",
     "@lezer/highlight": "*",
-    "@onereach/styles": "^19.4.1",
+    "@onereach/styles": "^19.5.0",
     "@splidejs/splide": "4.0.6",
     "@tiptap/core": "2.0.3",
     "@tiptap/extension-blockquote": "2.0.3",
@@ -134,5 +134,5 @@
       "default": "./dist/bundled/components/*/index.js"
     }
   },
-  "gitHead": "e4d92db0a04d7d6ae57881105d6a1aa9d3d29477"
+  "gitHead": "85b030b0fb73e63f9c0b677f35a0e7ab9ad60e8b"
 }