@onereach/ui-components 2.69.0-beta.2073.0 → 2.69.0-beta.2076.0

package/dist/bundled/v3/components/or-empty-state-v3/OrEmptyState.vue.d.ts

@@ -1,12 +1,13 @@
 import { PropType } from 'vue-demi';
 import { EmptyStateSize } from '.';
-declare const _default: import("vue").ComponentOptions<import("vue").default, import("@vue/composition-api").ShallowUnwrapRef<import("@vue/composition-api").Data> & import("@vue/composition-api").Data, {}, {
-    rootClasses(): string[];
-    imageClasses(): string[];
-    headingClasses(): string[];
-    textClasses(): string[];
-    slotClasses(): string[];
-}, {
+declare const _default: import("vue").ComponentOptions<import("vue").default, import("@vue/composition-api").ShallowUnwrapRef<{
+    root: import("@vue/composition-api").Ref<HTMLElement | undefined>;
+    rootClasses: import("@vue/composition-api").ComputedRef<string[]>;
+    imageClasses: import("@vue/composition-api").ComputedRef<string[]>;
+    headingClasses: import("@vue/composition-api").ComputedRef<string[]>;
+    textClasses: import("@vue/composition-api").ComputedRef<string[]>;
+    slotClasses: import("@vue/composition-api").ComputedRef<string[]>;
+}> & import("@vue/composition-api").Data, {}, {}, {
     /**
      * Size of the component, affects font and icon size.
      * Use Large if the component takes all screen space,
@@ -75,13 +76,14 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
     heading: string;
     text: string;
     imageSrc: string;
-} & {}, import("@vue/composition-api").ShallowUnwrapRef<import("@vue/composition-api").Data>, import("@vue/composition-api").Data, {
-    rootClasses(): string[];
-    imageClasses(): string[];
-    headingClasses(): string[];
-    textClasses(): string[];
-    slotClasses(): string[];
-}, {}, {}, {}, {}, {
+} & {}, import("@vue/composition-api").ShallowUnwrapRef<{
+    root: import("@vue/composition-api").Ref<HTMLElement | undefined>;
+    rootClasses: import("@vue/composition-api").ComputedRef<string[]>;
+    imageClasses: import("@vue/composition-api").ComputedRef<string[]>;
+    headingClasses: import("@vue/composition-api").ComputedRef<string[]>;
+    textClasses: import("@vue/composition-api").ComputedRef<string[]>;
+    slotClasses: import("@vue/composition-api").ComputedRef<string[]>;
+}>, import("@vue/composition-api").Data, {}, {}, {}, {}, {}, {
     size: EmptyStateSize;
     heading: string;
     text: string;

package/dist/bundled/v3/components/or-empty-state-v3/index.js

@@ -1,4 +1,4 @@
-import { defineComponent, openBlock, createElementBlock, normalizeClass, createCommentVNode, createElementVNode, toDisplayString, renderSlot } from 'vue';
+import { defineComponent, ref, computed, openBlock, createElementBlock, normalizeClass, createCommentVNode, createElementVNode, toDisplayString, renderSlot } from 'vue';
 
 var EmptyStateSize;
 (function (EmptyStateSize) {
@@ -26,14 +26,14 @@ const EmptyStateImageSizes = {
 };
 const EmptyStateHeading = [
 // Theme
-'text-on-background', 'dark:text-on-background-dark'];
+'theme-foreground-default', 'dark:theme-foreground-default-dark'];
 const EmptyStateHeadingSizes = {
   [EmptyStateSize.L]: [
   // Typography
-  'text-headline-2', 'font-headline-2'],
+  'typography-headline-2'],
   [EmptyStateSize.M]: [
   // Typography
-  'text-headline-4', 'font-headline-4']
+  'typography-headline-4']
 };
 const EmptyStateText = ['text-center',
 // Theme
@@ -42,10 +42,10 @@ const EmptyStateContent = EmptyStateText;
 const EmptyStateTextSizes = {
   [EmptyStateSize.L]: [
   // Typography
-  'text-body-2-regular', 'font-body-2-regular'],
+  'typography-body-2-regular'],
   [EmptyStateSize.M]: [
   // Typography
-  'text-caption-regular', 'font-caption-regular']
+  'typography-caption-regular']
 };
 const EmptyStateContentSizes = EmptyStateTextSizes;
 
@@ -90,29 +90,29 @@ var script = defineComponent({
       default: undefined
     }
   },
-  computed: {
-    rootClasses() {
-      return ['or-empty-state', ...EmptyStateRoot];
-    },
-    imageClasses() {
-      return ['or-empty-state_image', ...EmptyStateImage, ...EmptyStateImageSizes[this.size]];
-    },
-    headingClasses() {
-      return ['or-empty-state_heading', ...EmptyStateHeading, ...EmptyStateHeadingSizes[this.size]];
-    },
-    textClasses() {
-      return ['or-empty-state_text', ...EmptyStateText, ...EmptyStateTextSizes[this.size]];
-    },
-    slotClasses() {
-      return ['or-empty-state_content', ...EmptyStateContent, ...EmptyStateContentSizes[this.size]];
-    }
+  setup(props) {
+    const root = ref();
+    const rootClasses = computed(() => ['or-empty-state', ...EmptyStateRoot]);
+    const imageClasses = computed(() => ['or-empty-state_image', ...EmptyStateImage, ...EmptyStateImageSizes[props.size]]);
+    const headingClasses = computed(() => ['or-empty-state_heading', ...EmptyStateHeading, ...EmptyStateHeadingSizes[props.size]]);
+    const textClasses = computed(() => ['or-empty-state_text', ...EmptyStateText, ...EmptyStateTextSizes[props.size]]);
+    const slotClasses = computed(() => ['or-empty-state_content', ...EmptyStateContent, ...EmptyStateContentSizes[props.size]]);
+    return {
+      root,
+      rootClasses,
+      imageClasses,
+      headingClasses,
+      textClasses,
+      slotClasses
+    };
   }
 });
 
 const _hoisted_1 = ["src"];
 function render(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createElementBlock("div", {
-    class: normalizeClass(["static", _ctx.rootClasses])
+    ref: "root",
+    class: normalizeClass(_ctx.rootClasses)
   }, [_ctx.imageSrc ? (openBlock(), createElementBlock("img", {
     key: 0,
     src: _ctx.imageSrc,