edvoyui-component-library-test-flight 0.0.21 → 0.0.23

package/src/components/slideover/EUISlideover.stories.ts

@@ -0,0 +1,318 @@
+import type { Meta, StoryObj } from "@storybook/vue3";
+import { action } from "@storybook/addon-actions";
+import { ref } from "vue";
+import EUISlideover from "./EUISlideover.vue";
+import EUIButton from "../button/EUIButton.vue";
+
+const meta: Meta<typeof EUISlideover> = {
+  title: "Example/Slideover",
+  component: EUISlideover,
+  tags: ["autodocs"],
+  argTypes: {
+    ...{
+      isVisible: {
+        control: "boolean",
+        description: "Controls the visibility of the EUISlideover.",
+      },
+      visibleClose: {
+        control: "boolean",
+        description: "Enables a slimmer header style for the slideover.",
+        defaultValue: true,
+        table: {
+          summary: true,
+        },
+      },
+      size: {
+        control: { type: "select", options: ["xs", "sm", "md", "lg"] },
+        description: "Size of the slideover.",
+        defaultValue: "xs",
+        table: {
+          defaultValue: { summary: "xs" },
+        },
+      },
+      slidePosition: {
+        control: {
+          type: "select",
+          options: ["left", "center", "right"],
+        },
+        defaultValue: "right",
+        table: {
+          defaultValue: { summary: "right" },
+        },
+        description:
+          "Defines the position of the slideover. It can be placed at the `left` or `center` and `right` of the view.",
+      },
+      title: {
+        control: "text",
+        description: "Sets the title displayed in the slideover header.",
+        defaultValue: "Default slideover Title",
+      },
+      titleClass: {
+        control: "text",
+        description:
+          "CSS class for defining custom title decoration of the slideover.",
+        defaultValue: "",
+      },
+      "update:isVisible": {
+        action: "update:isVisible",
+        description:
+          "Triggers when the slideover's visibility is updated via the @update:isVisible event.",
+      },
+      confirm: {
+        action: "confirm",
+        description:
+          "Emits when the confirm button is clicked to your action then close the slideover.",
+      },
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// Default EUISlideover story with basic content
+export const Default: Story = {
+  argTypes: {
+    slidePosition: {
+      control: "select",
+      options: ["left", "center", "right"],
+    },
+    size: {
+      control: "select",
+      options: ["xs", "sm", "md", "lg", "full"],
+    },
+  },
+  args: {
+    isVisible: false,
+  },
+  render: (args) => ({
+    components: { EUISlideover, EUIButton },
+    setup() {
+      const isslideoverVisible = ref(args.isVisible);
+
+      const openslideover = () => {
+        isslideoverVisible.value = true;
+        action("update:isVisible")(true);
+      };
+
+      const closeslideover = () => {
+        isslideoverVisible.value = false;
+        action("update:isVisible")(false);
+      };
+
+      return {
+        args,
+        isslideoverVisible,
+        openslideover,
+        closeslideover,
+        onConfirm: action("confirm"),
+      };
+    },
+    template: `
+      <EUIButton size="md" color="purple" @click="openslideover">Open slideover</EUIButton>
+      <EUISlideover v-bind="args" :isVisible="isslideoverVisible" @update:isVisible="closeslideover" @confirm="onConfirm">
+        <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Minus
+              quas possimus ea culpa id voluptatum cumque, animi earum sequi,
+              aliquid eius omnis repellendus nihil soluta vitae a temporibus!
+              Perspiciatis, nihil?</p>
+      </EUISlideover>
+    `,
+  }),
+  parameters: {
+    docs: {
+      description: {
+        story:
+          "This story demonstrates a slideover component that is initially hidden. Clicking the 'Open slideover' button triggers the slideover to appear, and it can be closed through the close button inside the slideover or the cancel button. The slideover also includes a 'Confirm' button that emits a `confirm` event, which is logged in Storybook’s actions panel.",
+      },
+      source: {
+        code: `<script setup lang="ts">
+import { ref } from "vue";
+const isslideoverVisible = ref(false);
+
+const openslideover = () => {
+  isslideoverVisible.value = true;
+};
+
+const closeslideover = () => {
+  isslideoverVisible.value = false;
+};
+
+const onActionslideover = () => {
+  alert("slideover Action working set validation");
+  closeslideover();
+};
+</script>
+<template>
+  <EUIButton size="md" color="purple" @click="openslideover">Open slideover</EUIButton>
+  <EUISlideover
+    :isVisible="isslideoverVisible"
+    :slim-header="false"
+    @update:isVisible="isslideoverVisible = $event"
+    @confirm="onActionslideover"
+  >
+    <div>
+      Lorem, ipsum dolor sit amet consectetur adipisicing elit. Minus quas
+      possimus ea culpa id voluptatum cumque, animi earum sequi, aliquid eius
+      omnis repellendus nihil soluta vitae a temporibus! Perspiciatis, nihil?
+    </div>
+  </EUISlideover>
+</template>
+`,
+      },
+    },
+  },
+};
+
+// Custom EUISlideover story with different content
+export const slideoverCustomize: Story = {
+  args: {
+    isVisible: false, // EUISlideover is visible by default
+    size: "md",
+    slidePosition: "left",
+  },
+  render: (args) => ({
+    components: { EUISlideover, EUIButton },
+    setup() {
+      const isslideoverVisible = ref(args.isVisible);
+
+      const openslideover = () => {
+        isslideoverVisible.value = true;
+        action("update:isVisible")(true);
+      };
+
+      const closeslideover = () => {
+        isslideoverVisible.value = false;
+        action("update:isVisible")(false);
+      };
+
+      const onActionslideover = () => {
+        alert("slideover Action working set validation");
+        closeslideover();
+      };
+
+      return {
+        args,
+        isslideoverVisible,
+        openslideover,
+        closeslideover,
+        onActionslideover,
+        onConfirm: action("confirm"),
+      };
+    },
+    template: `
+      <EUIButton size="md" color="purple" @click="openslideover">Open slideover</EUIButton>
+      <EUISlideover v-bind="args" :isVisible="isslideoverVisible" slidePosition="left"
+    size="md" @update:isVisible="closeslideover" @confirm="onConfirm">
+        <template #header>
+            <div
+              class="sticky inset-x-0 top-0 px-6 py-4 text-base font-semibold bg-white border-b"
+            >
+           Custom slideover header section
+            </div>
+          </template>
+          <template #content>
+            <div
+              class="p-4 max-h-[calc(100svh-6rem)] overflow-y-auto space-y-4"
+            >
+              <div v-for="item in 10" :key="item">
+                Lorem, ipsum dolor sit amet consectetur adipisicing elit. Minus
+                quas possimus ea culpa id voluptatum cumque, animi earum sequi,
+                aliquid eius omnis repellendus nihil soluta vitae a temporibus!
+                Perspiciatis, nihil?
+              </div>
+            </div>
+          </template>
+          <template #footer>
+            <div
+              class="sticky inset-x-0 bottom-0 flex items-center justify-end gap-4 p-4 bg-white border-t border-gray-200"
+            >
+              <button
+                class="px-4 py-2 text-base font-semibold tracking-wide text-gray-600 transition-colors duration-75 bg-white rounded-md hover:bg-gray-100"
+                @click="closeslideover"
+              >
+                Cancel
+              </button>
+              <button
+                class="px-4 py-2 text-base font-semibold tracking-wide text-white transition-colors duration-75 bg-purple-600 rounded-md hover:bg-purple-700"
+                @click="onActionslideover"
+              >
+                Apply now
+              </button>
+            </div>
+          </template>
+      </EUISlideover>
+    `,
+  }),
+  parameters: {
+    docs: {
+      description: {
+        story:
+          "* The template method allows you to define how content is rendered in the <mark>EUISlideover</mark> component. \n\n* Named slots <mark>(#header, #content, #footer)</mark> enable you to customize slideover.",
+      },
+      source: {
+        code: `<script setup lang="ts">
+import { ref } from "vue";
+const isslideoverVisible = ref(false);
+
+const openslideover = () => {
+  isslideoverVisible.value = true;
+};
+
+const closeslideover = () => {
+  isslideoverVisible.value = false;
+};
+
+const onActionslideover = () => {
+  alert("slideover Action working set validation");
+  closeslideover();
+};
+</script>
+<template>
+  <EUIButton size="md" color="purple" @click="openslideover">Open slideover</EUIButton>
+  <EUISlideover
+    :isVisible="isslideoverVisible"
+    slidePosition="left"
+    size="md"
+    @update:isVisible="isslideoverVisible = $event"
+    @confirm="closeslideover"
+  >
+    <template #header>
+      <div class="sticky inset-x-0 top-0 px-6 py-4 text-base font-semibold bg-white border-b">
+        Custom Header here
+      </div>
+    </template>
+    <template #content>
+      <div class="p-4 max-h-[calc(100svh-6rem)] overflow-y-auto space-y-4">
+        <div v-for="item in 10" :key="item">
+          Lorem, ipsum dolor sit amet consectetur adipisicing elit. Minus quas
+          possimus ea culpa id voluptatum cumque, animi earum sequi, aliquid
+          eius omnis repellendus nihil soluta vitae a temporibus! Perspiciatis,
+          nihil?
+        </div>
+      </div>
+    </template>
+    <template #footer>
+      <div
+        class="sticky inset-x-0 bottom-0 flex items-center justify-end gap-4 p-4 bg-white border-t border-gray-200"
+      >
+        <button
+          class="px-4 py-2 text-base font-semibold tracking-wide text-gray-600 transition-colors duration-75 bg-white rounded-md hover:bg-gray-100"
+          @click="closeslideover()"
+        >
+          Cancel
+        </button>
+        <button
+          class="px-4 py-2 text-base font-semibold tracking-wide text-white transition-colors duration-75 bg-purple-600 rounded-md hover:bg-purple-700"
+          @click="onActionslideover()"
+        >
+          Apply now
+        </button>
+      </div>
+    </template>
+  </EUISlideover>
+</template>
+`,
+      },
+    },
+  },
+};

package/src/components/slideover/EUISlideover.vue

@@ -0,0 +1,207 @@
+<template>
+  <Teleport defer to="body">
+    <Transition :duration="550" appear name="slideover">
+      <div
+        v-if="isVisible"
+        :class="[
+          'fixed z-50 transition-all duration-100 ease-in',
+          slideClass.modal,
+        ]"
+        @click.self="closeSlideover"
+      >
+        <div
+          class="backdrop fixed inset-0 z-[-1] w-screen h-screen bg-black/20 pointer-events-none overflow-hidden"
+        ></div>
+        <div
+          :class="[
+            'relative flex flex-col justify-between w-full overflow-hidden bg-white divide-gray-200 divide-y shadow-lg h-full',
+            slideClass.width,
+          ]"
+        >
+          <template v-if="$slots.header">
+            <slot name="header"></slot>
+          </template>
+          <div
+            v-else
+            class="sticky top-0 flex items-center justify-between flex-initial px-4 py-3"
+          >
+            <h3 :class="['text-lg font-semibold text-gray-900', titleClass]">
+              <slot name="title">{{ title || "Slideover Title" }}</slot>
+            </h3>
+            <div v-if="visibleClose">
+              <button
+                type="button"
+                class="flex items-center justify-center text-gray-400 bg-white hover:bg-gray-50 rounded-3xl hover:text-gray-600 size-8"
+                @click="closeSlideover"
+              >
+                <span class="sr-only">Close</span>
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  fill="none"
+                  viewBox="0 0 24 24"
+                  stroke-width="2"
+                  stroke="currentColor"
+                  aria-hidden="true"
+                  class="w-5 h-5"
+                >
+                  <path
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    d="M6 18L18 6M6 6l12 12"
+                  ></path>
+                </svg>
+              </button>
+            </div>
+          </div>
+
+          <template v-if="$slots.content">
+            <slot name="content"></slot>
+          </template>
+          <div
+            v-else
+            class="flex-1 p-4 max-h-[calc(100svh-3rem)] overflow-y-auto"
+          >
+            <slot></slot>
+          </div>
+
+          <template v-if="$slots.footer">
+            <slot name="footer"></slot>
+          </template>
+          <div
+            v-else
+            class="sticky bottom-0 flex items-center justify-end flex-none gap-2 px-4 py-3"
+          >
+            <EUIButton size="md" color="white" @click="closeSlideover"
+              >Cancel</EUIButton
+            >
+            <EUIButton size="md" color="purple" @click="$emit('confirm')"
+              >Slideover</EUIButton
+            >
+          </div>
+        </div>
+      </div>
+    </Transition>
+  </Teleport>
+</template>
+
+<script lang="ts">
+import { computed, defineComponent, PropType, watchEffect } from "vue";
+import EUIButton from "../button/EUIButton.vue";
+
+export default defineComponent({
+  name: "Slideover",
+  components: {
+    EUIButton,
+  },
+  props: {
+    isVisible: {
+      type: Boolean,
+      default: false,
+    },
+    title: {
+      type: String,
+      default: "",
+    },
+    visibleClose: {
+      type: Boolean,
+      default: true,
+    },
+    titleClass: {
+      type: String,
+      default: "",
+    },
+    slidePosition: {
+      type: String as PropType<"left" | "center" | "right">,
+      default: "right",
+    },
+    size: {
+      type: String as PropType<"xs" | "sm" | "md" | "lg" | "full">,
+      default: "xs",
+    },
+  },
+  emits: ["update:isVisible", "confirm"],
+  methods: {
+    closeSlideover() {
+      this.$emit("update:isVisible", false);
+    },
+  },
+  setup(props) {
+    const slideClass = computed(() => {
+      const sizeClass = {
+        full: "max-w-screen",
+        lg: "max-w-screen-lg min-w-[1024px]",
+        md: "max-w-2xl min-w-[42rem]",
+        sm: "max-w-xl min-w-[36rem]",
+        xs: "max-w-md min-w-[28rem]",
+      };
+
+      const positionClasses = {
+        left:
+          props.size === "full"
+            ? "inset-2 rounded-xl overflow-hidden"
+            : "top-0 left-0 h-svh",
+        center:
+          props.size === "full"
+            ? "inset-2 rounded-xl overflow-hidden"
+            : "inset-0 flex flex-col items-center justify-center",
+        right:
+          props.size === "full"
+            ? "inset-2 rounded-xl overflow-hidden"
+            : "top-0 right-0 h-svh",
+      };
+
+      const addClass = positionClasses[props.slidePosition];
+      const slideWidth = sizeClass[props.size];
+      return {
+        modal: addClass,
+        width: slideWidth,
+      };
+    });
+
+    watchEffect(() => {
+      if (props.isVisible) {
+        document.body.style.overflow = "hidden";
+      } else {
+        document.body.style.overflow = "";
+      }
+    });
+    return {
+      slideClass,
+    };
+  },
+  beforeUnmount() {
+    document.body.style.overflow = "";
+  },
+});
+</script>
+
+<style lang="scss" scoped>
+.slideover-enter-active,
+.slideover-leave-active {
+  transition: transform 0.5s ease, opacity 0.5s ease;
+}
+.slideover-enter-from,
+.slideover-leave-to {
+  transform: translateX(100%);
+  opacity: 0;
+}
+.slideover-enter-to,
+.slideover-leave-from {
+  transform: translateX(0);
+  opacity: 1;
+}
+
+.backdrop {
+  transition: opacity 0.8s ease;
+}
+.slideover-enter-from .backdrop,
+.slideover-leave-to .backdrop {
+  transform: translateX(100%);
+  opacity: 0;
+}
+.slideover-enter-to .backdrop,
+.slideover-leave-from .backdrop {
+  transform: translateX(0);
+  opacity: 0.3;
+}
+</style>

package/src/components/stepperTimeline/EUIStepperHorizontal.vue

@@ -0,0 +1,112 @@
+<template>
+  <nav aria-label="Progress" class="relative z-10">
+    <ol role="list" class="flex flex-row items-start justify-center w-full py-4 ps-4 pe-2">
+      <li
+        v-for="(step, stepIdx) in lifeCycleEntries"
+        :key="step.value"
+        :class="[
+          stepIdx !== lifeCycleEntries.length - 1 ? 'pe-8' : '',
+          'relative flex items-center w-full pt-6 group',
+          getStatus(step.key, stepIdx) === 'upcoming'
+            ? 'pointer-events-none'
+            : '',
+        ]"
+      >
+        <template v-if="getStatus(step.key, stepIdx) === 'complete'">
+          <div
+            v-if="stepIdx !== lifeCycleEntries.length - 1"
+            class="absolute bg-green-500 w-full start-0 top-2.5 h-[0.0875rem] z-0"
+          />
+          <div class="absolute top-0 start-0 flex items-center size-5 bg-green-500 rounded-full border-[1.5px] border-green-500" >
+            <svg fill="currentColor" width="16" height="16" viewBox="0 0 24 24" class="text-white size-4"><path d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"><title>Check icon</title></path></svg>
+          </div>
+          <div class="flex flex-col items-start justify-between max-w-full w-full py-0.5">
+            <span class="text-xs font-semibold text-gray-900">{{ startCase(step.value) }}</span>
+            <span class="text-xs font-medium text-gray-500">{{'26-05-2024 18:47'}}</span>
+          </div>
+        </template>
+        <template v-else-if="getStatus(step.key, stepIdx) === 'current'">
+          <div
+            class="absolute bg-orange-500 w-full start-0 top-2.5 h-[0.0875rem] z-0"
+          />
+          <div class="absolute start-0 top-0 flex items-center justify-center size-5 rounded-full bg-white border-[1.5px] border-orange-500">
+            <div class="size-2.5 bg-orange-400 rounded-full" />
+          </div>
+         <div class="flex flex-col items-start justify-between max-w-full w-full py-0.5">
+            <span class="text-xs font-semibold text-gray-900">{{ startCase(step.value) }}</span>
+            <span class="text-xs font-medium text-gray-500">{{'26-05-2024 18:47'}}</span>
+          </div>
+        </template>
+        <template v-else-if="getStatus(step.key, stepIdx) === 'upcoming'">
+          <div
+            v-if="stepIdx !== lifeCycleEntries.length - 1"
+            class="absolute bg-gray-300 w-full start-0 top-2.5 h-[0.0875rem] z-0"
+          />
+          <div class="absolute top-0 start-0 flex items-center justify-center size-5 rounded-full bg-gray-100 border-gray-300 border-[1.5px]">
+            <div class="bg-gray-200 rounded-full size-3" />
+          </div>
+          <div class="flex flex-col items-start justify-between max-w-full w-full py-0.5">
+            <span class="text-xs font-semibold text-gray-900">{{ startCase(step.value) }}</span>
+            <span class="text-xs font-medium text-gray-500">{{'26-05-2024 18:47'}}</span>
+          </div>
+        </template>
+      </li>
+    </ol>
+  </nav>
+</template>
+<script setup lang="ts">
+import { startCase } from 'lodash';
+import { computed, PropType } from 'vue';
+
+const props = defineProps({
+    stepStatus: {
+        type: String as PropType<"contact" | "MQL" | 'SQL' | 'opportunity' | 'Prospect' | 'Prospect Paid' | 'Prospect Enrolled' | 'Customer'>,
+        default: 'contact'
+    }
+})
+
+  const stepStatusEnum = ["contact" , "MQL" , 'SQL' , 'opportunity' , 'Prospect' , 'Prospect Paid' , 'Prospect Enrolled' , 'Customer']
+
+  const lifeCycleEntries = computed(() => {
+    return Object.entries(stepStatusEnum).map((x) => {
+      return { key: x[0], value: x[1] }
+    })
+  })
+
+  const lifeCycleState = computed(() => {
+    return  currentStatus.value
+  })
+
+  const currentStatus = computed(() => props.stepStatus)
+
+  const status = computed(() =>  lifeCycleState.value)
+
+  const lifeCycle = computed(() => {
+    return lifeCycleEntries.value.findIndex((e) => e.value === status.value)
+  })
+
+  const getStatus = computed(() => {
+    return (status: string, index: number) => {
+      if (
+        index &&
+        lifeCycle.value === lifeCycleEntries.value.length - 1
+      ) {
+        return 'complete'
+      }
+      if (index === lifeCycle.value) {
+        return 'current'
+      }
+      if (index < lifeCycle.value) {
+        return 'complete'
+      }
+      if (index > lifeCycle.value) {
+        return 'upcoming'
+      }
+      return {
+        status,
+      }
+    }
+  })
+</script>
+<style lang="scss">
+</style>

package/src/components/stepperTimeline/EUIStepperTimeline.stories.ts

@@ -0,0 +1,54 @@
+import type { Meta, StoryObj } from "@storybook/vue3";
+import EUIStepperHorizontal from "./EUIStepperHorizontal.vue";
+import EUIStepperVertical from "./EUIStepperVertical.vue";
+
+const meta = {
+  title: "Example/Stepper Timeline",
+  component: EUIStepperVertical,
+  tags: ["autodocs"],
+  argTypes: {
+    stepStatus: {
+      control: "select",
+      options: [
+        "Contact",
+        "MQL",
+        "SQL",
+        "opportunity",
+        "Prospect",
+        "Prospect Paid",
+        "Prospect Enrolled",
+        "Customer",
+      ],
+    },
+  },
+} satisfies Meta<typeof EUIStepperVertical>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const StepperVertical: Story = {
+  args: {
+    stepStatus: "opportunity",
+  },
+  render: (args) => ({
+    components: { EUIStepperVertical },
+    setup() {
+      return { args };
+    },
+    template: `<EUIStepperVertical v-bind="args" />`,
+  }),
+};
+
+export const StepperHorizontal: Story = {
+  argTypes: {},
+  args: {
+    stepStatus: "Prospect",
+  },
+  render: (args) => ({
+    components: { EUIStepperHorizontal },
+    setup() {
+      return { args };
+    },
+    template: `<EUIStepperHorizontal v-bind="args" />`,
+  }),
+};