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

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

@@ -0,0 +1,203 @@
+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

@@ -0,0 +1,101 @@
+<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

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

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

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

package/dist/bundled/v2/components/or-rich-text-editor-v3/OrRichTextEditor.stories3.d.ts

@@ -1,12 +0,0 @@
-import { Meta, StoryFn } from '@storybook/vue3';
-declare const _default: Meta<import("vue").ComponentOptions<import("vue").default, import("@vue/composition-api").ShallowUnwrapRef<unknown>, import("@vue/composition-api").MethodOptions, import("@vue/composition-api").ComputedOptions, import("@vue/composition-api").ComponentPropsOptions<import("@vue/composition-api").Data>, import("@vue/composition-api").ExtractPropTypes<import("@vue/composition-api").ComponentPropsOptions<import("@vue/composition-api").Data>>> & Omit<import("vue").VueConstructor<import("vue").default>, never> & (new (...args: any[]) => import("@vue/composition-api").ComponentRenderProxy<{} & {}, import("@vue/composition-api").ShallowUnwrapRef<unknown>, unknown, import("@vue/composition-api").ComputedOptions, import("@vue/composition-api").MethodOptions, unknown, unknown, {
-    [x: string]: ((...args: any[]) => any) | null;
-} | string[], {} & {}, {
-    [x: number]: string;
-} | {}, true>)>;
-export default _default;
-export declare const RichTextEditor: StoryFn<import("vue").ComponentOptions<import("vue").default, import("@vue/composition-api").ShallowUnwrapRef<unknown>, import("@vue/composition-api").MethodOptions, import("@vue/composition-api").ComputedOptions, import("@vue/composition-api").ComponentPropsOptions<import("@vue/composition-api").Data>, import("@vue/composition-api").ExtractPropTypes<import("@vue/composition-api").ComponentPropsOptions<import("@vue/composition-api").Data>>> & Omit<import("vue").VueConstructor<import("vue").default>, never> & (new (...args: any[]) => import("@vue/composition-api").ComponentRenderProxy<{} & {}, import("@vue/composition-api").ShallowUnwrapRef<unknown>, unknown, import("@vue/composition-api").ComputedOptions, import("@vue/composition-api").MethodOptions, unknown, unknown, {
-    [x: string]: ((...args: any[]) => any) | null;
-} | string[], {} & {}, {
-    [x: number]: string;
-} | {}, true>)>;

package/dist/bundled/v2/components/or-rich-text-editor-v3/OrRichTextEditor.vue.d.ts

@@ -1,149 +0,0 @@
-import { Editor } from '@tiptap/core';
-import { Level } from '@tiptap/extension-heading';
-declare const _default: import("vue").ComponentOptions<import("vue").default, import("@vue/composition-api").ShallowUnwrapRef<{
-    editor: Editor | null;
-    editorRef: import("@vue/composition-api").Ref<HTMLDivElement | undefined>;
-    containerRef: import("@vue/composition-api").Ref<HTMLDivElement | undefined>;
-    toolbarButtonRef: import("@vue/composition-api").Ref<import("@vue/composition-api").ComponentRenderProxy<{} & {}, import("@vue/composition-api").ShallowUnwrapRef<unknown>, unknown, import("@vue/composition-api").ComputedOptions, import("@vue/composition-api").MethodOptions, unknown, unknown, {
-        [x: string]: ((...args: any[]) => any) | null;
-    } | string[], {} & {}, {
-        [x: number]: string;
-    } | {}, true> | undefined>;
-    menuRef: import("@vue/composition-api").Ref<import("@vue/composition-api").ComponentRenderProxy<{} & {}, import("@vue/composition-api").ShallowUnwrapRef<unknown>, unknown, import("@vue/composition-api").ComputedOptions, import("@vue/composition-api").MethodOptions, unknown, unknown, {
-        [x: string]: ((...args: any[]) => any) | null;
-    } | string[], {} & {}, {
-        [x: number]: string;
-    } | {}, true> | undefined>;
-    iconsEnum: import("@vue/composition-api").Ref<{
-        [x: string]: string;
-    }>;
-    handleToolbarClick: (item: string, level?: number | undefined) => void;
-    handleEditorClick: () => void;
-    isActive: import("@vue/composition-api").Ref<{
-        [x: string]: boolean;
-    }>;
-    iconTooltipsEnum: import("@vue/composition-api").Ref<{
-        [x: string]: string;
-    }>;
-    containerStyles: import("@vue/composition-api").ComputedRef<string[]>;
-    toolbarContainerStyles: import("@vue/composition-api").ComputedRef<string[]>;
-    toolbarStyles: import("@vue/composition-api").ComputedRef<string[]>;
-    rootStyles: import("@vue/composition-api").ComputedRef<(string | undefined)[]>;
-    toolbarButtonStyles: (item: string) => string[];
-    editorInputStyles: import("@vue/composition-api").ComputedRef<string[]>;
-    getIndexOfHeading: import("@vue/composition-api").ComputedRef<number>;
-    headingLevels: Level[];
-    headingIcon: import("@vue/composition-api").ComputedRef<string>;
-}> & import("@vue/composition-api").Data, {}, {}, {
-    modelValue: {
-        type: StringConstructor;
-        default: string;
-        required: false;
-    };
-    toolbar: {
-        type: ArrayConstructor;
-        default: () => string[][];
-    };
-    description: {
-        type: StringConstructor;
-        default: string;
-    };
-    placeholder: {
-        type: StringConstructor;
-        default: string;
-    };
-    autofocus: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    markdown: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-}, import("@vue/composition-api").ExtractPropTypes<{
-    modelValue: {
-        type: StringConstructor;
-        default: string;
-        required: false;
-    };
-    toolbar: {
-        type: ArrayConstructor;
-        default: () => string[][];
-    };
-    description: {
-        type: StringConstructor;
-        default: string;
-    };
-    placeholder: {
-        type: StringConstructor;
-        default: string;
-    };
-    autofocus: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    markdown: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-}>> & Omit<import("vue").VueConstructor<import("vue").default>, never> & (new (...args: any[]) => import("@vue/composition-api").ComponentRenderProxy<{
-    modelValue: string;
-    toolbar: unknown[];
-    description: string;
-    placeholder: string;
-    autofocus: boolean;
-    markdown: boolean;
-} & {} & {
-    [x: string & `on${string}`]: ((...args: any[]) => any) | undefined;
-}, import("@vue/composition-api").ShallowUnwrapRef<{
-    editor: Editor | null;
-    editorRef: import("@vue/composition-api").Ref<HTMLDivElement | undefined>;
-    containerRef: import("@vue/composition-api").Ref<HTMLDivElement | undefined>;
-    toolbarButtonRef: import("@vue/composition-api").Ref<import("@vue/composition-api").ComponentRenderProxy<{} & {}, import("@vue/composition-api").ShallowUnwrapRef<unknown>, unknown, import("@vue/composition-api").ComputedOptions, import("@vue/composition-api").MethodOptions, unknown, unknown, {
-        [x: string]: ((...args: any[]) => any) | null;
-    } | string[], {} & {}, {
-        [x: number]: string;
-    } | {}, true> | undefined>;
-    menuRef: import("@vue/composition-api").Ref<import("@vue/composition-api").ComponentRenderProxy<{} & {}, import("@vue/composition-api").ShallowUnwrapRef<unknown>, unknown, import("@vue/composition-api").ComputedOptions, import("@vue/composition-api").MethodOptions, unknown, unknown, {
-        [x: string]: ((...args: any[]) => any) | null;
-    } | string[], {} & {}, {
-        [x: number]: string;
-    } | {}, true> | undefined>;
-    iconsEnum: import("@vue/composition-api").Ref<{
-        [x: string]: string;
-    }>;
-    handleToolbarClick: (item: string, level?: number | undefined) => void;
-    handleEditorClick: () => void;
-    isActive: import("@vue/composition-api").Ref<{
-        [x: string]: boolean;
-    }>;
-    iconTooltipsEnum: import("@vue/composition-api").Ref<{
-        [x: string]: string;
-    }>;
-    containerStyles: import("@vue/composition-api").ComputedRef<string[]>;
-    toolbarContainerStyles: import("@vue/composition-api").ComputedRef<string[]>;
-    toolbarStyles: import("@vue/composition-api").ComputedRef<string[]>;
-    rootStyles: import("@vue/composition-api").ComputedRef<(string | undefined)[]>;
-    toolbarButtonStyles: (item: string) => string[];
-    editorInputStyles: import("@vue/composition-api").ComputedRef<string[]>;
-    getIndexOfHeading: import("@vue/composition-api").ComputedRef<number>;
-    headingLevels: Level[];
-    headingIcon: import("@vue/composition-api").ComputedRef<string>;
-}>, import("@vue/composition-api").Data, {}, {}, {}, {}, string[], {
-    modelValue: string;
-    toolbar: unknown[];
-    description: string;
-    placeholder: string;
-    autofocus: boolean;
-    markdown: boolean;
-} & {} & {
-    [x: string & `on${string}`]: ((...args: any[]) => any) | undefined;
-}, {
-    modelValue: string;
-    toolbar: unknown[];
-    description: string;
-    placeholder: string;
-    autofocus: boolean;
-    markdown: boolean;
-}, true>);
-export default _default;

package/dist/bundled/v2/components/or-rich-text-editor-v3/index.d.ts

@@ -1 +0,0 @@
-export { default as OrRichTextEditor } from './OrRichTextEditor.vue';