@onereach/ui-components 2.67.10 → 2.67.11

package/dist/esm/v3/components/or-loader-v3/OrLoader.vue.d.ts

@@ -3,6 +3,9 @@ import { LoaderColor, LoaderSize, LoaderVariant } from './props';
 declare const _default: import("vue").ComponentOptions<import("vue").default, import("@vue/composition-api").ShallowUnwrapRef<{
     root: import("@vue/composition-api").Ref<HTMLElement | undefined>;
     rootStyles: import("@vue/composition-api").ComputedRef<(string | undefined)[]>;
+    containerStyles: import("@vue/composition-api").ComputedRef<string[]>;
+    titleStyles: import("@vue/composition-api").ComputedRef<string[]>;
+    descriptionStyles: import("@vue/composition-api").ComputedRef<string[]>;
     computedSize: import("@vue/composition-api").ComputedRef<20 | 16 | undefined>;
 }> & import("@vue/composition-api").Data, {}, {}, {
     variant: {
@@ -17,6 +20,14 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
         type: PropType<LoaderSize>;
         default: LoaderSize;
     };
+    title: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    description: {
+        type: StringConstructor;
+        default: undefined;
+    };
 }, import("@vue/composition-api").ExtractPropTypes<{
     variant: {
         type: PropType<LoaderVariant>;
@@ -30,21 +41,38 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
         type: PropType<LoaderSize>;
         default: LoaderSize;
     };
+    title: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    description: {
+        type: StringConstructor;
+        default: undefined;
+    };
 }>> & Omit<import("vue").VueConstructor<import("vue").default>, never> & (new (...args: any[]) => import("@vue/composition-api").ComponentRenderProxy<{
     variant: LoaderVariant;
     color: LoaderColor;
     size: LoaderSize;
+    title: string;
+    description: string;
 } & {}, import("@vue/composition-api").ShallowUnwrapRef<{
     root: import("@vue/composition-api").Ref<HTMLElement | undefined>;
     rootStyles: import("@vue/composition-api").ComputedRef<(string | undefined)[]>;
+    containerStyles: import("@vue/composition-api").ComputedRef<string[]>;
+    titleStyles: import("@vue/composition-api").ComputedRef<string[]>;
+    descriptionStyles: import("@vue/composition-api").ComputedRef<string[]>;
     computedSize: import("@vue/composition-api").ComputedRef<20 | 16 | undefined>;
 }>, import("@vue/composition-api").Data, {}, {}, {}, {}, {}, {
     variant: LoaderVariant;
     color: LoaderColor;
     size: LoaderSize;
+    title: string;
+    description: string;
 } & {}, {
     variant: LoaderVariant;
     color: LoaderColor;
     size: LoaderSize;
+    title: string;
+    description: string;
 }, true>);
 export default _default;

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

@@ -1,4 +1,4 @@
-export { a as LoaderColor, b as LoaderSize, L as LoaderVariant, s as OrLoaderV3 } from '../../OrLoader-60943812.js';
+export { a as LoaderColor, b as LoaderSize, L as LoaderVariant, s as OrLoaderV3 } from '../../OrLoader-b3cf4231.js';
 import 'vue-demi';
 import '../../useClassAttribute-47fdb016.js';
 import '@vueuse/core';

package/dist/esm/v3/components/or-loader-v3/styles.d.ts

@@ -1,3 +1,6 @@
 import { LoaderColor } from './props';
 export declare const LoaderRoot: string[];
 export declare const LoaderRootColors: Record<LoaderColor, string[]>;
+export declare const LoaderContainer: string[];
+export declare const LoaderTitle: string[];
+export declare const LoaderDescription: string[];

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

@@ -1,8 +1,8 @@
-export { s as OrSwitchV3 } from '../../OrSwitch-ec454b76.js';
+export { s as OrSwitchV3 } from '../../OrSwitch-94399738.js';
 import 'vue-demi';
 import '../../useClassAttribute-47fdb016.js';
 import '@vueuse/core';
 import '../../OrLabel-7d4fe80b.js';
 import 'vue';
-import '../../OrLoader-60943812.js';
+import '../../OrLoader-b3cf4231.js';
 import '../../style-inject.es-4c6f2515.js';

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

@@ -1,4 +1,4 @@
-export { a as OrToastContainerV3, s as OrToastV3, t as TypesV3 } from '../../types-652ae29f.js';
+export { a as OrToastContainerV3, s as OrToastV3, t as TypesV3 } from '../../types-8ef262da.js';
 export { p as PropsV3, a as useQueueV3, u as useToastV3 } from '../../useToast-0665462d.js';
 import '@vueuse/core';
 import 'vue-demi';
@@ -14,5 +14,5 @@ import '../../useElevation-31bfe1f6.js';
 import '../../useResponsive-a02e95b7.js';
 import '../../OrBottomSheet-0eb33b18.js';
 import '../../OrOverlay-738a44d5.js';
-import '../../OrLoader-60943812.js';
+import '../../OrLoader-b3cf4231.js';
 import '../../style-inject.es-4c6f2515.js';

package/dist/esm/v3/index.js

@@ -3,7 +3,7 @@ export { a as AvatarColor, A as AvatarSize, s as OrAvatarV3 } from './OrAvatar-e
 export { s as OrBottomSheetV3 } from './OrBottomSheet-0eb33b18.js';
 export { s as OrButton, a as OrButtonColors, b as OrButtonSizes, O as OrButtonViews } from './OrButton-fca9019a.js';
 export { b as BUTTON_COLOR, d as BUTTON_LOADER_TYPE, c as BUTTON_SIZE, B as BUTTON_TYPE, I as ICON_BUTTON_TYPE, s as OrButtonV2, a as OrIconButton } from './OrIconButton-8be9c89f.js';
-export { a as ButtonColor, b as ButtonType, B as ButtonVariant, s as OrButtonV3 } from './OrButton-4d0c2edd.js';
+export { a as ButtonColor, b as ButtonType, B as ButtonVariant, s as OrButtonV3 } from './OrButton-3670279e.js';
 export { s as OrCard } from './OrCard-e3a5aea4.js';
 export { C as CARD_COLLECTION_LAYOUT, s as OrCardCollection } from './OrCardCollection-a5e326ef.js';
 export { C as CardCollectionView, s as OrCardCollectionV3 } from './OrCardCollection-34aa611e.js';
@@ -16,7 +16,7 @@ export { s as OrCode, O as OrCodeLanguages } from './OrCode-ee19a5e6.js';
 export { s as OrCollapse } from './OrCollapse-445141ab.js';
 export { s as OrColorPicker, h as amber, n as black, b as blue, m as blueGrey, k as brown, c as cyan, j as deepOrange, d as deepPurple, g as green, i as indigo, l as lightBlue, e as lightGreen, f as lime, o as orange, p as pink, a as purple, r as red, t as teal, w as white, y as yellow } from './OrColorPicker-189cb097.js';
 export { s as OrConfirm } from './OrConfirm-f39bd784.js';
-export { C as ConfirmType, s as OrConfirmV3 } from './OrConfirm-a77d9812.js';
+export { C as ConfirmType, s as OrConfirmV3 } from './OrConfirm-748ed50b.js';
 export { D as DEFAULT_TEXT, s as OrDateTimePicker, a as OrDateTimePickerItemTypes, O as OrDateTimePickerTypes } from './OrDateTimePicker-f2e08564.js';
 export { s as OrError } from './OrError-f90296db.js';
 export { s as OrErrorTagV3 } from './OrErrorTag-bbfd3ca6.js';
@@ -42,7 +42,7 @@ export { L as LinkColor, s as OrLinkV3 } from './OrLink-338db3ca.js';
 export { s as OrList } from './OrList-b740d13e.js';
 export { s as OrListOfInputs } from './OrListOfInputs-7a67440f.js';
 export { L as LoaderViews, s as OrLoader } from './OrLoader-15174477.js';
-export { a as LoaderColor, b as LoaderSize, L as LoaderVariant, s as OrLoaderV3 } from './OrLoader-60943812.js';
+export { a as LoaderColor, b as LoaderSize, L as LoaderVariant, s as OrLoaderV3 } from './OrLoader-b3cf4231.js';
 export { s as OrMenuItemV3 } from './OrMenuItem-d001f0f6.js';
 export { s as OrMenuV3 } from './OrMenu-d9e12030.js';
 export { P as MenuPlacement, s as OrPopoverV3, P as PopoverPlacement, a as PopoverVariant, P as TooltipPlacement } from './OrPopover-94a8f21d.js';
@@ -70,7 +70,7 @@ export { s as OrSlider } from './OrSlider-87e2da8c.js';
 export { s as OrSortHeaderV3 } from './OrSortHeader-9d645226.js';
 export { s as OrStepper } from './OrStepper-f19b4eac.js';
 export { s as OrSwitch } from './OrSwitch-c333ee32.js';
-export { s as OrSwitchV3 } from './OrSwitch-ec454b76.js';
+export { s as OrSwitchV3 } from './OrSwitch-94399738.js';
 export { s as OrTab } from './OrTab-bc98be02.js';
 export { s as OrTabHeaderItem } from './OrTabHeaderItem-d668cc59.js';
 export { s as OrTabV3 } from './OrTab-97044946.js';
@@ -85,7 +85,7 @@ export { s as OrTextareaV3 } from './OrTextarea-98895b2a.js';
 export { s as OrTextbox, T as TextboxTypes } from './OrTextbox-2f33e9c3.js';
 export { s as OrToast, a as OrToastContainer } from './OrToastContainer-40c4c1c8.js';
 export { P as PositionsX, b as PositionsY, c as ToastType, T as TransitionType, a as useQueue, u as useToast } from './useToast-4fbe0e5a.js';
-export { a as OrToastContainerV3, s as OrToastV3, t as TypesV3 } from './types-652ae29f.js';
+export { a as OrToastContainerV3, s as OrToastV3, t as TypesV3 } from './types-8ef262da.js';
 export { p as PropsV3, a as useQueueV3, u as useToastV3 } from './useToast-0665462d.js';
 export { s as OrTooltip, a as OrTooltipContent } from './OrTooltip-78cd7f6b.js';
 export { s as OrTooltipV3 } from './OrTooltip-6412166a.js';

package/dist/esm/v3/{types-652ae29f.js → types-8ef262da.js}

@@ -3,7 +3,7 @@ import { defineComponent, ref, computed, onBeforeMount, onBeforeUnmount, nextTic
 import { s as script$4 } from './OrTeleport.vue3-8099178c.js';
 import { T as ToastType, P as PositionsX, b as PositionsY, c as TransitionType, d as useToastEventBus, a as useQueue } from './useToast-0665462d.js';
 import { s as script$2 } from './OrIconButton-1d78453b.js';
-import { s as script$3 } from './OrLoader-60943812.js';
+import { s as script$3 } from './OrLoader-b3cf4231.js';
 import { resolveComponent, openBlock, createElementBlock, normalizeClass, renderSlot, createCommentVNode, createVNode, toDisplayString, createElementVNode, createBlock, withModifiers, withCtx, TransitionGroup, Fragment, renderList, mergeProps } from 'vue';
 import { s as styleInject } from './style-inject.es-4c6f2515.js';
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@onereach/ui-components",
-  "version": "2.67.10",
+  "version": "2.67.11",
   "description": "Vue components library for v2/3",
   "sideEffects": false,
   "main": "./dist/auto/index.js",
@@ -124,5 +124,5 @@
     },
     "./package.json": "./package.json"
   },
-  "gitHead": "da76e43453bbde55f414aca25f01e1cf653b1a70"
+  "gitHead": "a1d45cc0f65aaff7fce19084edb98a4cf3dcb152"
 }

package/src/components/or-loader-v3/OrLoader.docs.mdx

@@ -9,4 +9,6 @@ import { OrLoaderV3 as OrLoader } from '@onereach/ui-components';
 ## Migration Guide from V1
   - added properties `color` and `size`
   - property `type` renamed to `variant`
-  - removed properties `linearTitle`, `linearDescription`, and `textTypeLabel`
+  - property `linearTitle` renamed to `title`
+  - property `linearDescription` renamed to `description`
+  - removed properties: `textTypeLabel`

package/src/components/or-loader-v3/OrLoader.stories3.ts

@@ -23,6 +23,14 @@ export default {
       control: { type: 'select' },
       options: Object.values(LoaderSize),
     },
+
+    title: {
+      control: { type: 'string' },
+    },
+
+    description: {
+      control: { type: 'string' },
+    },
   },
 
   parameters: {
@@ -51,4 +59,16 @@ const Template: StoryFn<typeof OrLoader> = (args) => ({
   template: '<OrLoader v-bind="args" />',
 });
 
-export const Loader = Template.bind({});
+export const Default = Template.bind({});
+
+export const Linear = Template.bind({});
+Linear.args = {
+  variant: 'linear',
+};
+
+export const LinearWithText = Template.bind({});
+LinearWithText.args = {
+  title: 'Loading',
+  variant: 'linear',
+  description: 'Promptly retrieving your data from the cloud',
+};

package/src/components/or-loader-v3/OrLoader.vue

@@ -4,68 +4,77 @@
     v-bind="$attrs"
     :class="rootStyles"
   >
-    <template v-if="variant === 'circular'">
-      <svg
-        viewBox="0 0 16 16"
-        :width="computedSize"
-        :height="computedSize"
-      >
-        <g
-          fill="none"
-          stroke-width="2"
-          stroke-linecap="round"
-        >
-          <circle
-            :class="[
-              'animate-circular-loader',
-              'origin-center',
-            ]"
-
-            cx="50%"
-            cy="50%"
-            r="7"
-            :stroke="color === 'inherit' ? 'currentColor' : 'inherit'"
-          />
-        </g>
-      </svg>
+    <template v-if="title">
+      <div :class="titleStyles">
+        {{ title }}
+      </div>
     </template>
-
-    <template v-if="variant === 'linear'">
-      <svg
-        width="100%"
-        height="4"
-      >
-        <g
-          fill="none"
-          stroke-width="4"
-          stroke-linecap="round"
+    <div :class="containerStyles">
+      <template v-if="variant === 'circular'">
+        <svg
+          viewBox="0 0 16 16"
+          :width="computedSize"
+          :height="computedSize"
         >
-          <line
-            :class="[
-              'stroke-surface-variant',
-              'dark:stroke-surface-variant-dark',
-            ]"
-
-            x1="2"
-            y1="50%"
-            x2="calc(100% - 2px)"
-            y2="50%"
-          />
-
-          <line
-            :class="[
-              'animate-linear-loader',
-              'origin-center',
-            ]"
-
-            x1="2"
-            y1="50%"
-            x2="calc(100% - 2px)"
-            y2="50%"
-            :stroke="color === 'inherit' ? 'currentColor' : 'inherit'"
-          />
-        </g>
-      </svg>
+          <g
+            fill="none"
+            stroke-width="2"
+            stroke-linecap="round"
+          >
+            <circle
+              :class="[
+                'animate-circular-loader',
+                'origin-center',
+              ]"
+              cx="50%"
+              cy="50%"
+              r="7"
+              :stroke="color === 'inherit' ? 'currentColor' : 'inherit'"
+            />
+          </g>
+        </svg>
+      </template>
+
+      <template v-if="variant === 'linear'">
+        <svg
+          width="100%"
+          height="4"
+        >
+          <g
+            fill="none"
+            stroke-width="4"
+            stroke-linecap="round"
+          >
+            <line
+              :class="[
+                'stroke-surface-variant',
+                'dark:stroke-surface-variant-dark',
+              ]"
+              x1="2"
+              y1="50%"
+              x2="calc(100% - 2px)"
+              y2="50%"
+            />
+
+            <line
+              :class="[
+                'animate-linear-loader',
+                'origin-center',
+              ]"
+              x1="2"
+              y1="50%"
+              x2="calc(100% - 2px)"
+              y2="50%"
+              :stroke="color === 'inherit' ? 'currentColor' : 'inherit'"
+            />
+          </g>
+        </svg>
+      </template>
+    </div>
+    <template v-if="description">
+      <div :class="descriptionStyles">
+        {{ description }}
+      </div>
     </template>
   </div>
 </template>
@@ -74,7 +83,7 @@
 import { computed, defineComponent, PropType, ref } from 'vue-demi';
 import { useClassAttribute } from '../../hooks';
 import { LoaderColor, LoaderSize, LoaderVariant } from './props';
-import { LoaderRoot, LoaderRootColors } from './styles';
+import { LoaderRoot, LoaderRootColors, LoaderTitle, LoaderDescription, LoaderContainer } from './styles';
 
 export default defineComponent({
   name: 'OrLoader',
@@ -96,6 +105,16 @@ export default defineComponent({
       type: String as PropType<LoaderSize>,
       default: LoaderSize.M,
     },
+
+    title: {
+      type: String,
+      default: undefined,
+    },
+
+    description: {
+      type: String,
+      default: undefined,
+    },
   },
 
   expose: [
@@ -116,6 +135,18 @@ export default defineComponent({
       classAttribute.value,
     ]);
 
+    const titleStyles = computed(() => [
+      ...LoaderTitle,
+    ]);
+
+    const descriptionStyles = computed(() => [
+      ...LoaderDescription,
+    ]);
+
+    const containerStyles = computed(() => [
+      ...LoaderContainer,
+    ]);
+
     // State
     const computedSize = computed(() => {
       switch (props.size) {
@@ -130,6 +161,9 @@ export default defineComponent({
     return {
       root,
       rootStyles,
+      containerStyles,
+      titleStyles,
+      descriptionStyles,
       computedSize,
     };
   },

package/src/components/or-loader-v3/styles.ts

@@ -3,6 +3,9 @@ import { LoaderColor } from './props';
 export const LoaderRoot: string[] = [
   // Layout
   'contents',
+  'flex',
+  'flex-col',
+  'space-y-md',
 ];
 
 export const LoaderRootColors: Record<LoaderColor, string[]> = {
@@ -20,3 +23,22 @@ export const LoaderRootColors: Record<LoaderColor, string[]> = {
 
   'inherit': [],
 };
+
+export const LoaderContainer: string[] = [
+  'flex',
+  'justify-center',
+];
+
+export const LoaderTitle: string[] = [
+  'typography-headline-2',
+  'text-center',
+  'text-on-background',
+  'dark:text-on-background-dark',
+];
+
+export const LoaderDescription: string[] = [
+  'typography-body-2-regular',
+  'text-center',
+  'text-outline',
+  'dark:text-outline-dark',
+];