edvoyui-component-library-test-flight 0.0.168 → 0.0.170

package/src/components/selectSearch/EUISelectSearch.vue

@@ -1,23 +0,0 @@
-<template>
-  <div>
-    <label for="label" class="mb-4 text-xs font-medium text-gray-400">{{selected?.length < 3}} - {{ selected?.length < 3 }}</label>
-    <v-select
-      v-model="selected"
-      multiple
-      placeholder="Choose up to 3 books!"
-      label="title"
-      :options="dataBooks"
-      :selectable="() => selected?.length < 3"
-    />
-  </div>
-</template>
-
-<script setup lang="ts">
-import { computed, ref } from "vue";
-import vSelect from "vue-select";
-import "vue-select/dist/vue-select.css";
-const selected = ref([]);
-import books from "../../data/books";
-
-const dataBooks = computed(() => books);
-</script>

package/src/components/slideover/EUISlideover.vue

@@ -1,207 +0,0 @@
-<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-[100svw] sm:min-w-[1024px]",
-        md: "max-w-2xl min-w-[100svw] sm:min-w-[42rem]",
-        sm: "max-w-xl min-w-[100svw] sm:min-w-[36rem]",
-        xs: "max-w-md min-w-[100svw] sm: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

@@ -1,242 +0,0 @@
-<template>
-  <div>
-    <nav aria-label="Progress" class="relative z-50 h-16 max-w-full mx-auto">
-      <ol
-        role="list"
-        class="flex flex-row items-start justify-center w-full py-2 ps-2 pe-2"
-      >
-        <li
-          v-for="(step, stepIdx) in lifeCycleEntries"
-          :key="step.value"
-          :class="[
-            stepIdx !== lifeCycleEntries.length - 1 ? 'pe-6' : '',
-            'relative flex items-center w-full max-w-36 pt-6 group',
-            getStatus(step.key, stepIdx) === 'upcoming'
-              ? 'pointer-events-none'
-              : 'cursor-pointer',
-          ]"
-        >
-          <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 flex items-center text-green-500 bg-white rounded-full start-0 size-5"
-            >
-              <svg
-                width="22"
-                height="22"
-                viewBox="0 0 22 22"
-                fill="none"
-                xmlns="http://www.w3.org/2000/svg"
-                class="transform scale-110"
-              >
-                <path
-                  fill-rule="evenodd"
-                  clip-rule="evenodd"
-                  d="M0.849609 10.9996C0.849609 5.39392 5.39392 0.849609 10.9996 0.849609C16.6053 0.849609 21.1496 5.39392 21.1496 10.9996C21.1496 16.6053 16.6053 21.1496 10.9996 21.1496C5.39392 21.1496 0.849609 16.6053 0.849609 10.9996ZM15.0634 9.67153C15.5195 9.36008 15.6368 8.73787 15.3253 8.28178C15.0139 7.82569 14.3917 7.70843 13.9356 8.01988L13.8343 8.08904C12.1934 9.20953 10.779 10.6239 9.66046 12.257L8.20624 10.8044C7.81551 10.4141 7.18234 10.4144 6.79203 10.8051C6.40171 11.1959 6.40205 11.829 6.79278 12.2193L9.13398 14.558C9.35437 14.7782 9.66477 14.8831 9.97353 14.8417C10.2823 14.8003 10.5541 14.6174 10.7088 14.347C11.7597 12.5094 13.214 10.9344 14.9621 9.7407L15.0634 9.67153Z"
-                  fill="currentColor"
-                />
-              </svg>
-            </div>
-            <div
-              class="flex flex-col items-start justify-between w-full max-w-full p-1 transition-opacity duration-200 ease-in group-hover:invisible group-hover:opacity-0"
-            >
-              <slot name="default">
-                <span class="text-xs font-semibold text-gray-900">{{
-                  startCase(step.value)
-                }}</span>
-              </slot>
-            </div>
-
-            <div
-              class="absolute left-0 flex flex-col items-start justify-between invisible max-w-full p-2 break-all transition-all duration-300 ease-in-out origin-top-left translate-y-1 bg-white rounded-md shadow-md opacity-0 group-hover:visible group-hover:opacity-100 w-44 top-6 group-hover:pointer-events-auto group-hover:translate-y-0"
-            >
-              <span class="text-xs font-semibold text-gray-900">
-                <slot name="title">
-                  {{ startCase(step.value) }}
-                </slot>
-              </span>
-              <span class="font-medium text-gray-700 text-xss">
-                <slot name="date">
-                  {{ getFormattedDate(step.value) }}
-                </slot>
-              </span>
-              <span class="font-medium text-gray-500 text-xss">
-                <slot name="updatedBy">
-                  {{ getUpdatedByEmail(step.value) }}
-                </slot>
-              </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 w-full max-w-full p-1 transition-opacity duration-200 ease-in-out group-hover:invisible group-hover:opacity-0"
-            >
-              <slot name="default">
-                <span class="text-xs font-semibold text-gray-900"
-                  >{{ startCase(step.value) }}
-                </span>
-              </slot>
-            </div>
-            <div
-              class="absolute left-0 flex flex-col items-start justify-between invisible max-w-full p-2 break-all transition-all duration-300 ease-in-out origin-top-left translate-y-1 bg-white rounded-md shadow-md opacity-0 group-hover:visible group-hover:opacity-100 w-44 top-6 group-hover:pointer-events-auto group-hover:translate-y-0"
-            >
-              <span class="text-xs font-semibold text-gray-900">
-                <slot name="title">
-                  {{ startCase(step.value) }}
-                </slot>
-              </span>
-              <span class="font-medium text-gray-700 text-xss">
-                <slot name="date">
-                  {{ getFormattedDate(step.value) }}
-                </slot>
-              </span>
-              <span class="font-medium text-gray-500 text-xss">
-                <slot name="updatedBy">
-                  {{ getUpdatedByEmail(step.value) }}
-                </slot>
-              </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 w-full max-w-full p-1"
-            >
-              <slot name="default">
-                <span
-                  class="text-xs font-semibold text-gray-900 whitespace-nowrap"
-                  >{{ startCase(step.value) }}
-                </span>
-              </slot>
-            </div>
-          </template>
-        </li>
-      </ol>
-    </nav>
-  </div>
-</template>
-<script setup lang="ts">
-import { startCase } from "lodash";
-import { computed, PropType } from "vue";
-
-const props = defineProps({
-  stepStatus: {
-    type: String,
-    default: "contact",
-  },
-  steps: {
-    type: Array as PropType<string[]>,
-    default: () => [
-      "contact",
-      "MQL",
-      "SAL",
-      "SQL",
-      "opportunity",
-      "Prospect",
-      "Prospect Paid",
-      "Prospect Enrolled",
-      "Customer",
-    ],
-  },
-  history: {
-    type: Array as PropType<
-      Array<{ lifecycleStage?: string; updatedAt?: string; updatedBy?: { email?: string } }>
-    >,
-    default: () => [],
-  },
-});
-
-const stepStatusEnum = computed(() => props.steps);
-
-const lifeCycleEntries = computed(() => {
-  return Object.entries(stepStatusEnum.value).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,
-    };
-  };
-});
-
-
-function getFormattedDate(stepValue: string) {
-  const match = props.history.find(
-    (h) => h.lifecycleStage === stepValue
-  );
-  if (!match?.updatedAt) return "";
-  try {
-    const date = new Date(match.updatedAt);
-    return (
-      date.toLocaleDateString("en-GB", {
-        day: "numeric",
-        month: "short",
-        year: "numeric",
-      }) +
-      " at " +
-      date.toLocaleTimeString("en-US", {
-        hour: "numeric",
-        minute: "2-digit",
-        hour12: true,
-      })
-    );
-  } catch {
-    return "";
-  }
-}
-
-function getUpdatedByEmail(stepValue: string) {
-  const match = props.history.find(
-    (h) => h.lifecycleStage === stepValue
-  );
-  const email = match?.updatedBy?.email as string | undefined;
-  return email ? `Updated by ${email}` : "";
-}
-</script>
-<style lang="scss"></style>

package/src/components/stepperTimeline/EUIStepperTimeline.vue

@@ -1,16 +0,0 @@
-<template>
-    <div>
-        <EUIStepperHorizontal stepStatus="opportunity" />
-        <hr />
-        <EUIStepperVertical stepStatus="opportunity" />
-    </div>
-</template>
-
-<script setup lang="ts">
-import EUIStepperHorizontal from './EUIStepperHorizontal.vue';
-import EUIStepperVertical from './EUIStepperVertical.vue';
-</script>
-
-<style scoped>
-
-</style>

package/src/components/stepperTimeline/EUIStepperVertical.vue

@@ -1,112 +0,0 @@
-<template>
-  <nav aria-label="Progress" class="relative z-10">
-    <ol role="list" class="flex flex-col 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 ? 'pb-8' : '',
-          'relative flex items-center w-full ps-5',
-          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 h-full start-px top-0 w-[0.0875rem] z-0"
-          />
-          <div class="absolute top-0 -start-2 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 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 h-full start-px top-0 w-[0.0875rem] z-0"
-          />
-          <div class="absolute -start-2 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 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 h-full start-px top-0 w-[0.0875rem] z-0"
-          />
-          <div class="absolute top-0 -start-2 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 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>