@onereach/ui-components 2.68.0-beta.2003.0 → 2.68.0-beta.2016.0

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

@@ -1,109 +0,0 @@
-import { LoaderVariant } from '../or-loader-v3';
-import { PropType } from 'vue-demi';
-import { EmptyStateLoader } 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, {}, {
-    loaderVariant(): LoaderVariant | undefined;
-}, {
-    /**
-     * The heading of the empty state block.
-     */
-    heading: {
-        type: StringConstructor;
-        default: string;
-    };
-    /**
-     * Additional text such as a hint for a user with proposed next steps.
-     */
-    text: {
-        type: StringConstructor;
-        default: string;
-    };
-    /**
-     * Material icon name to display above the heading.
-     */
-    icon: {
-        type: StringConstructor;
-        default: undefined;
-    };
-    /**
-     * Path to the image to display above the heading.
-     * Image height is scaled to 48px, width is undefined to preserve aspect ratio.
-     */
-    iconSrc: {
-        type: StringConstructor;
-        default: undefined;
-    };
-    /**
-     * If provided, then loader is being displayed.
-     * Accepts booleans and OrLoader::variant values. `true` falls back to 'linear'.
-     */
-    loader: {
-        type: PropType<EmptyStateLoader>;
-        default: boolean;
-    };
-}, import("@vue/composition-api").ExtractPropTypes<{
-    /**
-     * The heading of the empty state block.
-     */
-    heading: {
-        type: StringConstructor;
-        default: string;
-    };
-    /**
-     * Additional text such as a hint for a user with proposed next steps.
-     */
-    text: {
-        type: StringConstructor;
-        default: string;
-    };
-    /**
-     * Material icon name to display above the heading.
-     */
-    icon: {
-        type: StringConstructor;
-        default: undefined;
-    };
-    /**
-     * Path to the image to display above the heading.
-     * Image height is scaled to 48px, width is undefined to preserve aspect ratio.
-     */
-    iconSrc: {
-        type: StringConstructor;
-        default: undefined;
-    };
-    /**
-     * If provided, then loader is being displayed.
-     * Accepts booleans and OrLoader::variant values. `true` falls back to 'linear'.
-     */
-    loader: {
-        type: PropType<EmptyStateLoader>;
-        default: boolean;
-    };
-}>> & Omit<import("vue").VueConstructor<import("vue").default>, never> & (new (...args: any[]) => import("@vue/composition-api").ComponentRenderProxy<{
-    heading: string;
-    text: string;
-    icon: string;
-    iconSrc: string;
-    loader: EmptyStateLoader;
-} & {}, import("@vue/composition-api").ShallowUnwrapRef<import("@vue/composition-api").Data>, import("@vue/composition-api").Data, {
-    loaderVariant(): LoaderVariant | undefined;
-}, {}, {}, {}, {}, {
-    heading: string;
-    text: string;
-    icon: string;
-    iconSrc: string;
-    loader: EmptyStateLoader;
-} & {}, {
-    heading: string;
-    text: string;
-    icon: string;
-    iconSrc: string;
-    loader: EmptyStateLoader;
-}, true>);
-/**
- * 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 _default;

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

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

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

@@ -1,111 +0,0 @@
-import { s as script$2, L as LoaderVariant } from '../../OrLoader-60943812.js';
-import { s as script$1 } from '../../OrIcon-e2fa4cf8.js';
-import { defineComponent } from 'vue-demi';
-import { resolveComponent, openBlock, createElementBlock, createBlock, createCommentVNode, createElementVNode, toDisplayString, createVNode, renderSlot } from 'vue';
-import '../../useClassAttribute-47fdb016.js';
-import '@vueuse/core';
-
-/**
- * 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.
- */
-var script = defineComponent({
-  name: 'OrEmptyState',
-  components: {
-    OrIcon: script$1,
-    OrLoader: script$2
-  },
-  props: {
-    /**
-     * 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: ''
-    },
-    /**
-     * Material icon name to display above the heading.
-     */
-    icon: {
-      type: String,
-      default: undefined
-    },
-    /**
-     * Path to the image to display above the heading.
-     * Image height is scaled to 48px, width is undefined to preserve aspect ratio.
-     */
-    iconSrc: {
-      type: String,
-      default: undefined
-    },
-    /**
-     * If provided, then loader is being displayed.
-     * Accepts booleans and OrLoader::variant values. `true` falls back to 'linear'.
-     */
-    loader: {
-      type: [String, Boolean],
-      default: false
-    }
-  },
-  computed: {
-    loaderVariant() {
-      if (typeof this.loader === 'string') {
-        return this.loader;
-      } else if (this.loader === true) {
-        return LoaderVariant.Linear;
-      } else {
-        return undefined;
-      }
-    }
-  }
-});
-
-const _hoisted_1 = {
-  class: "empty-state w-full grow flex flex-col justify-center items-center gap-sm"
-};
-const _hoisted_2 = ["src"];
-const _hoisted_3 = {
-  class: "empty-state_heading text-on-background dark:text-on-background-dark text-headline-4 font-headline-4"
-};
-const _hoisted_4 = {
-  key: 2,
-  class: "empty-state_loader max-w-[432px] w-2/5 flex justify-center my-sm"
-};
-const _hoisted_5 = {
-  key: 3,
-  class: "empty-state_content text-center text-outline dark:text-outline-dark text-caption-regular font-caption-regular"
-};
-const _hoisted_6 = {
-  class: "empty-state_content text-center text-outline dark:text-outline-dark text-caption-regular font-caption-regular"
-};
-function render(_ctx, _cache, $props, $setup, $data, $options) {
-  const _component_OrIcon = resolveComponent("OrIcon");
-  const _component_OrLoader = resolveComponent("OrLoader");
-  return openBlock(), createElementBlock("div", _hoisted_1, [_ctx.icon ? (openBlock(), createBlock(_component_OrIcon, {
-    key: 0,
-    icon: _ctx.icon,
-    size: "inherit",
-    class: "empty-state_icon w-2xl h-2xl text-[48px] text-on-surface-variant dark:text-on-surface-variant-dark mb-sm"
-  }, null, 8 /* PROPS */, ["icon"])) : createCommentVNode("v-if", true), _ctx.iconSrc ? (openBlock(), createElementBlock("img", {
-    key: 1,
-    src: _ctx.iconSrc,
-    class: "empty-state_image h-2xl mb-sm",
-    alt: ""
-  }, null, 8 /* PROPS */, _hoisted_2)) : createCommentVNode("v-if", true), createElementVNode("div", _hoisted_3, toDisplayString(_ctx.heading), 1 /* TEXT */), _ctx.loader ? (openBlock(), createElementBlock("div", _hoisted_4, [createVNode(_component_OrLoader, {
-    variant: _ctx.loaderVariant
-  }, null, 8 /* PROPS */, ["variant"])])) : createCommentVNode("v-if", true), _ctx.$slots.default ? (openBlock(), createElementBlock("div", _hoisted_5, [createCommentVNode(" @slot Additional content can be inserted via default slot. The slot uses the same font as a 'text' prop. "), renderSlot(_ctx.$slots, "default")])) : createCommentVNode("v-if", true), createElementVNode("div", _hoisted_6, toDisplayString(_ctx.text), 1 /* TEXT */)]);
-}
-
-script.render = render;
-script.__file = "src/components/or-empty-state-v3/OrEmptyState.vue";
-
-export { script as OrEmptyStateV3 };

package/dist/esm/v3/components/or-empty-state-v3/types.d.ts

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

package/src/components/or-empty-state-v3/OrEmptyState.stories3.ts

@@ -1,203 +0,0 @@
-import { Meta, StoryFn } from '@storybook/vue3';
-import OrEmptyState from './OrEmptyState.vue';
-import successPng from '../../assets/success.png';
-
-export default {
-  title: 'Components/Empty State',
-  component: OrEmptyState,
-  argTypes: {
-    loader: {
-      control: {
-        type: 'inline-radio',
-        labels: {
-          'linear': "'linear'",
-          'circular': "'circular'",
-        }
-      },
-      options: [false, true, 'linear', 'circular'],
-    },
-  },
-  parameters: {
-    layout: 'centered',
-  },
-} as Meta<typeof OrEmptyState>
-
-const Template: StoryFn<typeof OrEmptyState> = (args) => ({
-  components: { OrEmptyState },
-  setup() {
-    return { args };
-  },
-  template: `
-    <OrEmptyState v-bind="args"/>
-  `,
-});
-
-export const Default = Template.bind({});
-Default.args = {
-  heading: 'No aliens detected',
-  text: 'Invite some aliens to your planet.'
-};
-Default.parameters = {
-  layout: 'fullscreen',
-};
-Default.decorators = [
-  () => ({
-    template: `
-        <div class="
-          demo-wrapper w-full min-h-[200px] h-screen box-border relative
-          gap-sm p-md bg-surface-variant
-          flex flex-col
-          text-body-2-regular">
-          <div>
-            Note: This frame is added for demo purpose.<br>
-            The OrEmptyState component is transparent and has <code>width:100%</code> and <code>flex-grow:1</code> attributes.<br>
-            It is recommended to put it inside a column flex container or a row flex container that wraps.
-          </div>
-          <div class="demo-container grow bg-background dark:bg-background-dark flex flex-col"><story /></div>
-        </div>
-      `
-  })
-];
-
-export const LinearLoader = Template.bind({});
-LinearLoader.args = {
-  heading: 'Looking for aliens',
-  text: '27 aliens detected so far.',
-  loader: true,
-};
-LinearLoader.parameters = {
-  layout: 'fullscreen',
-};
-LinearLoader.decorators = [
-  () => ({
-    template: `
-        <div class="
-          demo-wrapper w-full h-[200px] box-border relative
-          gap-sm p-md bg-surface-variant
-          flex flex-col
-          text-body-2-regular">
-          <div>Note: Use linear loader (values <b>true</b> or <b>'linear'</b>) on pages and inside wide containers.</div>
-          <div class="demo-container grow bg-background dark:bg-background-dark flex flex-col"><story /></div>
-        </div>
-      `
-  })
-];
-
-export const CircularLoader = Template.bind({});
-CircularLoader.args = {
-  heading: 'Looking for aliens',
-  text: '27 aliens detected so far.',
-  loader: 'circular',
-};
-CircularLoader.parameters = {
-  layout: 'fullscreen',
-};
-CircularLoader.decorators = [
-  () => ({
-    template: `
-        <div class="
-          demo-wrapper w-full min-h-[200px] h-screen box-border relative
-          gap-sm p-md bg-surface-variant
-          flex flex-col
-          text-body-2-regular">
-          <div>Note: Use circular loader (value <b>'circular'</b>) in narrow containers and sidebars.</div>
-          <div class="demo-container w-[300px] grow bg-background dark:bg-background-dark flex flex-col"><story /></div>
-        </div>
-      `
-  })
-];
-
-export const MaterialIcon = Template.bind({});
-MaterialIcon.args = {
-  ...Default.args,
-  icon: 'travel_explore',
-};
-
-export const ImageIcon = Template.bind({});
-ImageIcon.args = {
-  heading: 'Planet populated',
-  text: 'So many aliens on this planet!',
-  iconSrc: successPng,
-};
-
-export const ExtraContentInSlot: StoryFn<typeof OrEmptyState> = (args) => ({
-  components: { OrEmptyState },
-  setup() {
-    return { args };
-  },
-  template: `
-    <OrEmptyState v-bind="args" heading="Alien not found" text="Pass formatted content via a default slot.">
-      Alien named <b>Garry</b> not found.<br>
-      The text in the slot is by default formatted as a component's text prop.
-    </OrEmptyState>
-  `,
-});
-
-export const Containers = Template.bind({});
-Containers.args = {
-  ...Default.args,
-};
-Containers.parameters = {
-  layout: 'fullscreen',
-};
-Containers.decorators = [
-  () => ({
-    template: `
-      <div class="
-        demo-wrapper w-full min-h-screen box-border relative
-        gap-md p-md bg-surface-variant dark:bg-surface-variant-dark
-        grid grid-cols-3 grid-rows-[1fr_repeat(auto)]
-        text-caption-regular dark:text-secondary-dark dark:text-[12px]">
-        <!--Demo Container 1. Narrow-->
-        <div class="demo-1 demo-container row-span-3 flex flex-col gap-sm">
-          <div>
-            Narrow vertical container; flex flex-col;<br>
-            Background <code>bg-background</code> applied directly to the component
-          </div>
-          <story class="bg-background dark:bg-background-dark" loader="circular"/>
-        </div>
-        <!--Demo Container 2. Fixed-->
-        <div class="demo-2 flex flex-col gap-sm justify-center items-center">
-          <div>
-            Fixed size container; flex flex-col;<br>
-            Background bg-surface-1 applied to the container
-          </div>
-          <div class="demo-container w-[240px] h-[200px] bg-surface-1 dark:bg-surface-1-dark flex flex-col">
-            <story />
-          </div>
-        </div>
-        <!--Demo Container 3. No container-->
-        <div class="demo-3">
-          <div>No container or simple block container; no background </div>
-          <div class="demo-container w-fit"><story /></div>
-        </div>
-        <!--Demo Container 4. Wide not wrap-->
-        <div class="demo-4 col-span-2 flex flex-col gap-sm">
-          <div class="w-full">
-            Wide horizontal <b>no-wrap</b> container; flex flex-row;<br>
-            Background <code>bg-surface-1</code> applied to the container<br>
-            Background <code>bg-surface-4</code> applied to the component
-          </div>
-          <div class="demo-container bg-surface-1 dark:bg-surface-1-dark flex">
-            <div>Left item</div>
-            <story class="bg-surface-4 dark:bg-surface-4-dark" loader="linear"/>
-            <div>Right item</div>
-          </div>
-        </div>
-        <!--Demo Container 5. Wide wrap-->
-        <div class="demo-5 col-span-2 flex flex-col gap-sm">
-          <div class="w-full">
-            Wide horizontal <b>wrap</b> container; flex flex-row flex-wrap;<br>
-            Background <code>bg-surface-1</code> applied to the container<br>
-            Background <code>bg-surface-4</code> applied to the component
-          </div>
-          <div class="demo-container bg-surface-1 dark:bg-surface-1-dark flex flex-wrap">
-            <div>Left item</div>
-            <story class="bg-surface-4 dark:bg-surface-4-dark" loader="linear"/>
-            <div>Right item</div>
-          </div>
-        </div>
-      </div>
-    `
-  })
-];

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

@@ -1,101 +0,0 @@
-<template>
-  <div class="empty-state w-full grow flex flex-col justify-center items-center gap-sm">
-    <OrIcon v-if="icon"
-            :icon="icon"
-            size="inherit"
-            class="empty-state_icon w-2xl h-2xl text-[48px] text-on-surface-variant dark:text-on-surface-variant-dark mb-sm" />
-    <img v-if="iconSrc" :src="iconSrc" class="empty-state_image h-2xl mb-sm" alt="">
-    <div class="empty-state_heading text-on-background dark:text-on-background-dark text-headline-4 font-headline-4">
-      {{ heading }}
-    </div>
-    <div v-if="loader" class="empty-state_loader max-w-[432px] w-2/5 flex justify-center my-sm">
-      <OrLoader :variant="loaderVariant" />
-    </div>
-    <div v-if="$slots.default" class="empty-state_content text-center text-outline dark:text-outline-dark text-caption-regular font-caption-regular">
-      <!-- @slot Additional content can be inserted via default slot. The slot uses the same font as a 'text' prop. -->
-      <slot/>
-    </div>
-    <div class="empty-state_content text-center text-outline dark:text-outline-dark text-caption-regular font-caption-regular">
-      {{ text }}
-    </div>
-  </div>
-</template>
-
-<script lang="ts">
-import {
-  LoaderVariant,
-  OrLoaderV3 as OrLoader,
-} from '../or-loader-v3';
-import {
-  OrIconV3 as OrIcon,
-} from '../or-icon-v3';
-import { defineComponent, PropType } from 'vue-demi';
-import { EmptyStateLoader } from '.';
-
-/**
- * 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',
-  components: {
-    OrIcon,
-    OrLoader,
-  },
-  props: {
-    /**
-     * 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: '',
-    },
-    /**
-     * Material icon name to display above the heading.
-     */
-    icon: {
-      type: String,
-      default: undefined,
-    },
-    /**
-     * Path to the image to display above the heading.
-     * Image height is scaled to 48px, width is undefined to preserve aspect ratio.
-     */
-    iconSrc: {
-      type: String,
-      default: undefined,
-    },
-    /**
-     * If provided, then loader is being displayed.
-     * Accepts booleans and OrLoader::variant values. `true` falls back to 'linear'.
-     */
-    loader: {
-      type: [String, Boolean] as PropType<EmptyStateLoader>,
-      default: false,
-    },
-  },
-  computed: {
-    loaderVariant(): LoaderVariant | undefined {
-      if (typeof this.loader === 'string') {
-        return this.loader;
-      } else if (this.loader === true) {
-        return LoaderVariant.Linear;
-      } else {
-        return undefined;
-      }
-    },
-  },
-});
-</script>
-
-<style scoped>
-</style>

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

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

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;