@onereach/ui-components 2.68.0-beta.2034.0 → 2.68.0-beta.2049.0

package/src/components/or-empty-state-v3/OrEmptyState.vue

@@ -1,121 +0,0 @@
-<template>
-  <div
-    class="static"
-    :class="rootClasses">
-    <img v-if="imageSrc"
-         :src="imageSrc"
-         :class="imageClasses"
-         alt="">
-    <div :class="headingClasses">
-      {{ heading }}
-    </div>
-    <div v-if="$slots.default" :class="slotClasses">
-      <!-- @slot Additional content can be inserted via default slot. The slot uses the same font as a `text` prop. -->
-      <slot/>
-    </div>
-    <div :class="textClasses">
-      {{ text }}
-    </div>
-  </div>
-</template>
-
-<script lang="ts">
-import { defineComponent, PropType } from 'vue-demi';
-import { EmptyStateSize } from '.';
-import {
-  EmptyStateContent,
-  EmptyStateContentSizes,
-  EmptyStateHeading,
-  EmptyStateHeadingSizes,
-  EmptyStateImage,
-  EmptyStateImageSizes,
-  EmptyStateRoot,
-  EmptyStateText,
-  EmptyStateTextSizes
-} from './styles';
-
-/**
- * The component to display when there is no content on a page,
- * no records found or selected, or while the data is being loaded.
- * Provides a hint to the user on what to do.
- * Consists of text message, optional icon and optional loader.
- */
-export default defineComponent({
-  name: 'OrEmptyState',
-  props: {
-    /**
-     * Size of the component, affects font and icon size.
-     * Use Large if the component takes all screen space,
-     * and Medium if it is a part of the complex layout.
-     */
-    size: {
-      type: String as PropType<EmptyStateSize>,
-      default: EmptyStateSize.M,
-    },
-    /**
-     * The heading of the empty state block.
-     */
-    heading: {
-      type: String,
-      default: '',
-    },
-    /**
-     * Additional text such as a hint for a user with proposed next steps.
-     */
-    text: {
-      type: String,
-      default: '',
-    },
-    /**
-     * Path to the image to display above the heading.
-     * Image height is fixed depending on `size` prop, width is undefined to preserve aspect ratio.
-     */
-    imageSrc: {
-      type: String,
-      default: undefined,
-    },
-  },
-  computed: {
-    rootClasses(): string[] {
-      return [
-        'or-empty-state',
-        ...EmptyStateRoot,
-      ];
-    },
-    imageClasses(): string[] {
-      return [
-        'or-empty-state_image',
-        ...EmptyStateImage,
-        ...EmptyStateImageSizes[this.size],
-
-      ];
-    },
-    headingClasses(): string[] {
-      return [
-        'or-empty-state_heading',
-        ...EmptyStateHeading,
-        ...EmptyStateHeadingSizes[this.size],
-
-      ];
-    },
-    textClasses(): string[] {
-      return [
-        'or-empty-state_text',
-        ...EmptyStateText,
-        ...EmptyStateTextSizes[this.size],
-
-      ];
-    },
-    slotClasses(): string[] {
-      return [
-        'or-empty-state_content',
-        ...EmptyStateContent,
-        ...EmptyStateContentSizes[this.size],
-      ];
-    },
-  },
-});
-</script>
-
-<style scoped>
-</style>

package/src/components/or-empty-state-v3/index.ts

@@ -1,3 +0,0 @@
-export { default as OrEmptyStateV3 } from './OrEmptyState.vue';
-export * from './types';
-export * from './props';

package/src/components/or-empty-state-v3/props.ts

@@ -1,4 +0,0 @@
-export enum EmptyStateSize {
-  L = 'l',
-  M = 'm',
-}

package/src/components/or-empty-state-v3/styles.ts

@@ -1,76 +0,0 @@
-import { EmptyStateSize } from './props';
-
-export const EmptyStateRoot: string[] = [
-  // Layout
-  'grow',
-  'flex',
-  'flex-col',
-  'justify-center',
-  'items-center',
-
-  // Box
-  'w-full',
-
-  // Sizing
-  'gap-sm',
-];
-
-export const EmptyStateImage = [
-  // Sizing
-  'mb-sm',
-];
-
-export const EmptyStateImageSizes: Record<EmptyStateSize, string[]> = {
-  [EmptyStateSize.L]: [
-    // Box
-    'h-3xl',
-  ],
-  [EmptyStateSize.M]: [
-    // Box
-    'h-2xl',
-  ],
-}
-
-export const EmptyStateHeading: string[] = [
-  // Theme
-  'text-on-background',
-  'dark:text-on-background-dark'
-];
-
-export const EmptyStateHeadingSizes: Record<EmptyStateSize, string[]> = {
-  [EmptyStateSize.L]: [
-    // Typography
-    'text-headline-2',
-    'font-headline-2',
-  ],
-  [EmptyStateSize.M]: [
-    // Typography
-    'text-headline-4',
-    'font-headline-4',
-  ],
-}
-
-export const EmptyStateText: string[] = [
-  'text-center',
-
-  // Theme
-  'text-outline',
-  'dark:text-outline-dark',
-];
-
-export const EmptyStateContent = EmptyStateText;
-
-export const EmptyStateTextSizes: Record<EmptyStateSize, string[]> = {
-  [EmptyStateSize.L]: [
-    // Typography
-    'text-body-2-regular',
-    'font-body-2-regular',
-  ],
-  [EmptyStateSize.M]: [
-    // Typography
-    'text-caption-regular',
-    'font-caption-regular',
-  ],
-};
-
-export const EmptyStateContentSizes = EmptyStateTextSizes;

package/src/components/or-empty-state-v3/types.ts

@@ -1,3 +0,0 @@
-import { LoaderVariant } from '../or-loader-v3';
-
-export type EmptyStateLoader = boolean | LoaderVariant | undefined;