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

package/src/components/accordion/EUIAccordion.vue

@@ -1,152 +0,0 @@
-<template>
-  <div>
-    <div
-      :class="[
-        accordionStyle === 'grouped'
-          ? 'p-2 bg-gray-50 rounded-xl'
-          : 'space-y-3',
-        'max-w-full transition-all duration-100 ease-in-out',
-      ]"
-    >
-      <details
-        v-for="(item, index) in datas"
-        :key="`accordion-${index}`"
-        :open="openAccordions[index]"
-        @click.prevent="onClick(index)"
-        :class="[
-          accordionStyle === 'grouped'
-            ? 'rounded-lg hover:bg-gray-100 open:bg-gray-100 open:mb-4 open:last:mb-0'
-            : 'bg-white px-8 py-4 rounded-2xl hover:ring-2 hover:ring-purple-500 open:ring-2 ring-purple-700 open:shadow-lg open:shadow-purple-100',
-          'box-border relative mx-auto my-0 text-base font-normal transition-colors duration-150 ease-in-out group',
-          className, item?.className,
-        ]"
-      >
-        <summary
-          :class="[
-            accordionStyle === 'grouped'
-              ? 'p-4'
-              : 'group-open:pb-4 gap-6 group-open:border-b group-open:border-gray-200',
-            'flex items-center font-semibold list-none cursor-pointer select-none focus:outline-none max-w-full justify-between',
-          ]"
-          :aria-expanded="openAccordions[index]"
-        >
-          <div
-            :class="[
-              accordionStyle === 'grouped' ? 'w-11/12' : 'flex-initial w-[calc(75%-1.5rem)]',
-              'text-gray-700 transition-all duration-200 ease-in-out faq-title group-hover:text-gray-900 group-open:text-gray-900',
-            ]"
-          >
-            <slot name="title" :item="item">
-              {{ item.title }}
-            </slot>
-          </div>
-          <svg
-            v-if="accordionStyle === 'grouped'"
-            xmlns="http://www.w3.org/2000/svg"
-            class="absolute text-gray-700 transition-all duration-150 ease-out pointer-events-none expand-icon group-open:text-gray-900 right-4 group-open:rotate-90"
-            width="24"
-            height="24"
-            viewBox="0 0 24 24"
-            stroke-width="2"
-            stroke="currentColor"
-            fill="none"
-            stroke-linecap="round"
-            stroke-linejoin="round"
-          >
-            <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
-            <path d="M9 6l6 6l-6 6"></path>
-          </svg>
-          <div v-else class="flex-1 max-w-[25%] flex items-center justify-end gap-3" @click.stop>
-             <slot name="right-icon" :item="item"></slot>
-          </div>
-        </summary>
-        <div
-          :class="[
-            accordionStyle === 'grouped' ? 'p-4 pt-1 ' : 'pt-3',
-            'font-light text-gray-600',
-          ]"
-        >
-          <slot name="content" :item="item">
-            {{ item.content }}
-          </slot>
-        </div>
-      </details>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { onMounted, PropType, ref, watch } from "vue";
-
-const props = defineProps({
-  datas: {
-    type: Array as PropType<any[]>,
-    required: true,
-    default: () => [],
-  },
-  defaultOpen: {
-    type: Array as PropType<number[]>,
-    default: () => [0],
-  },
-  collapse: {
-    type: Boolean,
-    default: false,
-  },
-  accordionStyle: {
-    type: String as PropType<"grouped" | "separated">,
-    default: "grouped",
-  },
-  className: {
-    type: String,
-    required: false,
-  },
-});
-
-const openAccordions = ref<boolean[]>(Array(props.datas.length).fill(false));
-
-const initializeOpenAccordions = () => {
-  openAccordions.value = props.datas.map((_, index) =>
-    props.defaultOpen.includes(index)
-  );
-};
-
-watch(
-  () => props.defaultOpen,
-  () => {
-    initializeOpenAccordions();
-  },
-  { immediate: true }
-);
-
-onMounted(() => {
-  props.defaultOpen.forEach((index: number) => {
-    if (index >= 0 && index < openAccordions.value.length) {
-      openAccordions.value[index] = true; // Open specified accordions
-    }
-  });
-});
-
-const emit = defineEmits(['update:activeItem']);
-const onClick = (index: number) => {
-  // openAccordions.value = openAccordions.value.map((isOpen, i) => i === index ? !isOpen : isOpen);
-  if (props.collapse) {
-    openAccordions.value = openAccordions.value.map((_, i) => i === index);
-  } else {
-    openAccordions.value = openAccordions.value.map((isOpen, i) =>
-      i === index ? !isOpen : isOpen
-    );
-  }
-
-  // Emit active index accessible from parent component
-  const activeItems = openAccordions.value.map((isOpen, i) => (isOpen ? i : null)).filter((i) => i !== null);
-  emit('update:activeItem', activeItems);
-};
-</script>
-
-<style lang="scss" scoped>
-summary {
-  &::-webkit-details-marker {
-    display: none;
-  }
-}
-</style>

package/src/components/alerts/EUIAlerts.vue

@@ -1,194 +0,0 @@
-<template>
-  <transition
-    enter-active-class="transition duration-300 ease-out transform"
-    enter-from-class="translate-y-2 opacity-0 sm:translate-y-0 sm:translate-x-2"
-    enter-to-class="translate-y-0 opacity-100 sm:translate-x-0"
-    leave-active-class="transition duration-100 ease-in"
-    leave-from-class="opacity-100"
-    leave-to-class="opacity-0"
-  >
-    <div v-if="showAlert" :class="['p-4 rounded-md', alertsClass.bgColor]">
-      <div
-        :class="[closeIcon && !textMessage ? 'items-center pr-2 flex' : 'flex items-start']"
-      >
-        <div class="shrink-0">
-          <slot name="icon">
-            <component
-              :is="alertIcon || alertsClass.leftIcon?.icon"
-              :class="['size-5', alertsClass.leftIcon?.color]"
-              aria-hidden="true"
-            />
-          </slot>
-        </div>
-        <div class="ml-3">
-          <h3 :class="['text-sm font-medium', alertsClass.titleColor]">
-            <slot name="title">{{ heading || "Alert Title" }}</slot>
-          </h3>
-
-           <slot name="content">
-            <div v-if="textMessage" :class="['mt-2 text-sm', alertsClass.textColor]">
-              {{ textMessage || "your description here..." }}
-            </div>
-           </slot>
-
-          <slot name="actionButtons">
-            <div v-if="actionItems" class="mt-4">
-              <div class="-mx-2 -my-1.5 flex">
-                  <button
-                    type="button"
-                    :class="[
-                      'rounded-md  px-3 py-1.5 text-sm font-medium text-white focus:outline-none focus:ring-2 focus:ring-offset-2',
-                      alertsClass.btnPrimary,
-                    ]"
-                    @click="onAction"
-                  >
-                    View status
-                  </button>
-                  <button
-                    type="button"
-                    :class="[
-                      'ml-3 rounded-md px-3 py-1.5 text-sm font-medium focus:outline-none focus:ring-2 focus:ring-offset-2',
-                      alertsClass.btnTertiary,
-                    ]"
-                    @click="onClose"
-                  >
-                    Dismiss
-                  </button>
-                </div>
-            </div>
-          </slot>
-        </div>
-        <div v-if="closeIcon" class="ms-auto ps-3">
-          <slot name="xclose">
-            <div class="-mx-1.5 -my-1.5 pt-1">
-              <button
-                type="button"
-                :class="[
-                  'inline-flex rounded-md focus:outline-none focus:ring-2 focus:ring-offset-2',
-                  alertsClass.btnClose,
-                ]"
-                @click="onClose()"
-              >
-                <span class="sr-only">Dismiss</span>
-                <XMarkIcon class="size-5" aria-hidden="true" />
-              </button>
-            </div>
-          </slot>
-        </div>
-      </div>
-    </div>
-  </transition>
-</template>
-
-<script setup lang="ts">
-import { computed, toRefs, type PropType } from "vue";
-import {
-  ExclamationTriangleIcon,
-  CheckCircleIcon,
-  XCircleIcon,
-  XMarkIcon,
-} from "@heroicons/vue/24/solid";
-
-const props = defineProps({
-  showAlert: {
-    type: Boolean,
-    default: true,
-  },
-  heading: {
-    type: String,
-    default: "",
-  },
-  textMessage: {
-    type: String,
-    default: "",
-  },
-  alertType: {
-    type: String as PropType<"Default" | "Warning" | "Success" | "Error">,
-    default: "Default",
-  },
-  alertIcon: {
-    type: [String, Object, Function],
-    default: "",
-  },
-  actionItems: Boolean,
-  closeIcon: Boolean,
-});
-const { showAlert } = toRefs(props);
-const emits = defineEmits(["update:showAlert", "alertAction", "alertDismiss"]);
-const onAction = () => {
-  emits("alertAction", true);
-  emits("update:showAlert", false);
-};
-const onClose = () => {
-  emits("alertDismiss", false);
-  emits("update:showAlert", false);
-};
-
-const alertsClass = computed(() => {
-  const iconClasses = {
-    Default: {
-      bgColor: "bg-blue-50",
-      leftIcon: {
-        icon: CheckCircleIcon,
-        color: "text-blue-400",
-      },
-      titleColor: "text-blue-800",
-      textColor: "text-blue-700",
-      btnPrimary:
-        "bg-blue-700 hover:bg-blue-800 focus:ring-blue-600 focus:ring-offset-blue-50",
-      btnTertiary:
-        "text-blue-500 bg-blue-50 hover:bg-blue-100 focus:ring-blue-600 focus:ring-offset-blue-50",
-      btnClose:
-        "bg-blue-50 text-blue-500 hover:bg-blue-100 focus:ring-blue-600 focus:ring-offset-blue-50",
-    },
-    Warning: {
-      bgColor: "bg-yellow-50",
-      leftIcon: {
-        icon: ExclamationTriangleIcon,
-        color: "text-yellow-400",
-      },
-      titleColor: "text-yellow-800",
-      textColor: "text-yellow-700",
-      btnPrimary:
-        "bg-yellow-700 hover:bg-yellow-800 focus:ring-yellow-600 focus:ring-offset-yellow-50",
-      btnTertiary:
-        "text-yellow-500 bg-yellow-50 hover:bg-yellow-100 focus:ring-yellow-600 focus:ring-offset-yellow-50",
-      btnClose:
-        "bg-yellow-50 text-yellow-500 hover:bg-yellow-100 focus:ring-yellow-600 focus:ring-offset-yellow-50",
-    },
-    Success: {
-      bgColor: "bg-green-50",
-      leftIcon: {
-        icon: CheckCircleIcon,
-        color: "text-green-400",
-      },
-      titleColor: "text-green-800",
-      textColor: "text-green-700",
-      btnPrimary:
-        "bg-green-700 hover:bg-green-800 focus:ring-green-600 focus:ring-offset-green-50",
-      btnTertiary:
-        "text-green-500 bg-green-50 hover:bg-green-100 focus:ring-green-600 focus:ring-offset-green-50",
-      btnClose:
-        "bg-green-50 text-green-500 hover:bg-green-100 focus:ring-green-600 focus:ring-offset-green-50",
-    },
-    Error: {
-      bgColor: "bg-red-50",
-      leftIcon: {
-        icon: XCircleIcon,
-        color: "text-red-400",
-      },
-      titleColor: "text-red-800",
-      textColor: "text-red-700",
-      btnPrimary:
-        "bg-red-700 hover:bg-red-800 focus:ring-red-600 focus:ring-offset-red-50",
-      btnTertiary:
-        "text-red-500 bg-red-50 hover:bg-red-100 focus:ring-red-600 focus:ring-offset-red-50",
-      btnClose:
-        "bg-red-50 text-red-500 hover:bg-red-100 focus:ring-red-600 focus:ring-offset-red-50",
-    },
-  };
-  return iconClasses[props.alertType] || "";
-});
-</script>
-
-<style scoped></style>

package/src/components/avatar/EUIAvatar.vue

@@ -1,96 +0,0 @@
-<template>
-  <div class="group">
-    <div class="flex items-center">
-      <div :class="['relative inline-block flex-none', avatarSize]">
-        <img
-          v-if="imageUrl"
-          :class="['group-hover:ring-2 ring-offset-2 ring-gray-300', rounded ? 'rounded-full' : 'rounded-md', avatarSize]"
-          :src="imageUrl"
-          alt=""
-        />
-        <span
-          v-else
-          :class="['flex items-center justify-center mx-auto text-white capitalize', rounded ? 'rounded-full':'rounded-md', avatarSize]"
-          :style="{background:profileColor}">
-          {{ fullName && fullName.charAt(0) }}
-        </span>
-        <span
-          v-if="showStatus"
-          :class="['absolute bottom-0 right-0 block rounded-full ring-2 ring-white',checkStatus === 'Online'?'bg-green-500':'bg-gray-400',
-          size === 'xs' ? 'size-1.5' : size === 'sm' ? 'size-2' : 'size-3']"
-        />
-      </div>
-      <div v-if="profile" class="flex-1 ms-2">
-        <div class="text-base font-semibold text-gray-600 capitalize group-hover:text-gray-900">
-          <slot name="name" :profileData="profileData">{{ profileData?.name }}</slot>
-        </div>
-        <div class="text-sm font-medium text-gray-500 group-hover:text-gray-700">
-          <slot name="designation" :profileData="profileData">{{ profileData?.designation }}</slot>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { computed, PropType, reactive } from "vue";
-
-interface ProfileData {
-  name: string;
-  designation: string;
-}
-
-
-const props = defineProps({
-  imageUrl: {
-    type: String,
-    default: "",
-    required: true
-  },
-  fullName: {
-    type: String,
-    default: "",
-    required: false,
-  },
-  profile: {
-    type: Boolean,
-    required: false,
-  },
-  size: {
-    type: String as PropType<"xs" | "sm" | "md" | "lg" | "xl">,
-    default: "md",
-  },
-  rounded: {
-    type: Boolean,
-    default: true,
-  },
-  showStatus: {
-    type: Boolean,
-    default: false,
-  },
-  status: {
-    type: String as PropType<"Online" | "Offline">,
-    default: "Online",
-  },
-  profileData: {
-    type: Object as PropType<ProfileData>,
-    default: () => ({ name: "", designation: "" }),
-  }
-});
-
-const sizes = reactive({
-  xs: "size-6", // 24
-  sm: "size-8", // 32
-  md: "size-10", // 40
-  lg: "size-12", // 48
-  xl: "size-16", // 48
-});
-
-const avatarSize = computed(() => sizes[props.size] || "")
-const checkStatus = computed(() => props.status);
-const profileColor = computed(() => colors[Math.floor(Math.random() * colors.length)])
-
-const colors = ['#6366F1','#F97316','#65A30D','#E11D48','#4B5563','#059669','#1D4ED8','#7C3AED','#FB923C','#fe4ca9']
-</script>
-
-<style scoped></style>

package/src/components/breadcrumb/EUIBreadcrumb.vue

@@ -1,59 +0,0 @@
-<template>
-  <nav aria-label="breadcrumb" class="my-2">
-    <ol
-      role="list"
-      class="flex items-center justify-start max-w-full space-x-1"
-    >
-      <li
-        v-for="(page, index) in pages"
-        :key="page.name"
-        class="flex flex-row items-center justify-start space-x-1"
-      >
-        <a
-          :href="page.href"
-          class="inline-flex items-center gap-2 text-sm font-medium font-inter"
-          :class="
-            pages.length - 1 !== index
-              ? 'text-gray-600 hover:text-gray-700'
-              : 'text-gray-500'
-          "
-          :aria-current="page.current ? 'page' : undefined"
-        >
-          <component
-            v-if="page?.showIcon"
-            :is="page?.showIcon"
-            class="text-current size-4"
-          />
-          {{ page.name }}</a
-        >
-        <ChevronDownStroke
-          v-if="pages.length - 1 !== index"
-          class="flex-shrink-0 w-5 h-5 text-gray-400 transform -rotate-90"
-          aria-hidden="true"
-        />
-      </li>
-    </ol>
-  </nav>
-</template>
-
-<script setup lang="ts">
-import { toRefs, type PropType } from "vue";
-import ChevronDownStroke from "../../assets/svg/ChevronDownStroke.vue";
-
-interface BreadcrumbPage {
-  name: string;
-  href?: string;
-  current?: boolean;
-  showIcon?: {};
-}
-
-const props = defineProps({
-  pages: {
-    type: Array as PropType<BreadcrumbPage[]>,
-    default: [],
-  },
-});
-const { pages } = toRefs(props);
-</script>
-
-<style scoped></style>

package/src/components/button/EUIButton.vue

@@ -1,154 +0,0 @@
-<template>
-  <button
-    :type="type"
-    :size="size"
-    :color="color"
-    :iconType="iconType"
-    v-bind="$attrs"
-    :class="['capitalize box-border border-none inline-flex flex-row gap-x-2 items-center active:scale-[.97] active:shadow-md transition-all duration-200 ease-in-out active:translate-y-0.5 focus-within:outline-purple-500', rounded ?'rounded-full':'rounded-lg', btnClass]"
-    :disabled="disabled"
-    :loading="loading"
-    :icon="icon"
-    @click="handleClick()"
-  >
-    <component
-      :is="icon"
-      v-if="iconType === 'icon' || iconType === 'startIcon'"
-      :class="[iconWidth]"
-    />
-    <slot />
-    <component :is="icon" v-if="iconType === 'endIcon'" :class="[iconWidth]" />
-    <svg
-      v-if="loading"
-      class="animate-spin"
-      :class="[iconWidth]"
-      xmlns="http://www.w3.org/2000/svg"
-      fill="none"
-      viewBox="0 0 24 24"
-    >
-      <circle
-        class="opacity-25"
-        cx="12"
-        cy="12"
-        r="10"
-        stroke="currentColor"
-        stroke-width="4"
-      />
-      <path
-        class="opacity-75"
-        fill="currentColor"
-        d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
-      />
-    </svg>
-  </button>
-</template>
-
-<script setup lang="ts">
-import { reactive, computed, PropType } from "vue";
-
-const emit = defineEmits(["click"]);
-const handleClick = () => [emit("click")];
-
-const props = defineProps({
-  type: {
-    type: String as PropType<"button" | "submit" | "reset">,
-    default: "button",
-  },
-  size: {
-    type: String as PropType<"xs" | "sm" | "md" | "lg">,
-    default: "md",
-  },
-  color: {
-    type: String as PropType<
-      "danger" | "success" | "black" | "white" | "purple" | 'primary' | 'secondary' | 'tertiary'>,
-    default: "purple",
-  },
-  iconType: {
-    type: String as PropType<"startIcon" | "endIcon" | "icon">,
-    default: "",
-  },
-  icon: {
-    type: [String, Object, Function],
-    default: "",
-  },
-  rounded:Boolean,
-  loading: Boolean,
-  disabled: Boolean,
-});
-
-const sizeClasses = reactive({
-  xs: "text-xs font-medium leading-[normal]", // 24
-  sm: "text-sm font-medium", // 32
-  md: "text-base font-semibold", // 40
-  lg: "text-base font-semibold", // 48
-});
-
-const btnClass = computed(() => {
-  const btnDisabled = props.disabled;
-  const btnColor = {
-    black: btnDisabled
-      ? "bg-opacity-60 cursor-not-allowed text-gray-200 bg-gray-800"
-      : "text-white bg-gray-900 hover:bg-gray-800 active:bg-black cursor-pointer active:shadow-black/50",
-    white: btnDisabled
-      ? "bg-opacity-80 cursor-not-allowed text-gray-400 bg-gray-200"
-      : "bg-white hover:bg-gray-100 text-black cursor-pointer active:shadow-white/50 active:bg-transparent",
-    danger: btnDisabled
-      ? "bg-opacity-60 cursor-not-allowed text-gray-200 bg-red-500"
-      : "bg-red-500 hover:bg-red-600 active:bg-red-500 text-white cursor-pointer active:shadow-red-500/50",
-    success: btnDisabled
-      ? "bg-opacity-60 cursor-not-allowed text-gray-200 bg-green-600"
-      : "bg-green-600 hover:bg-green-700 active:bg-green-600 text-white cursor-pointer active:shadow-green-500/50",
-    purple: btnDisabled
-      ? "bg-opacity-60 cursor-not-allowed text-gray-200 bg-purple-500"
-      : "bg-purple-700 hover:bg-purple-800 active:bg-purple-700 text-white cursor-pointer active:shadow-purple-500/50",
-    primary: btnDisabled
-      ? "bg-opacity-60 cursor-not-allowed text-gray-200 bg-purple-500"
-      : "primary-btn text-white cursor-pointer active:shadow-purple-500/50",
-    secondary: btnDisabled
-      ? "bg-opacity-75 cursor-not-allowed text-gray-400 bg-purple-50"
-      : "bg-purple-100 hover:bg-purple-50 active:bg-purple-100 cursor-pointer text-gray-700 active:shadow-purple-200",
-    tertiary: btnDisabled
-      ? "bg-opacity-75 cursor-not-allowed text-gray-400 bg-gray-50 ring-1 ring-gray-100"
-      : "bg-gray-100 hover:bg-gray-50 active:bg-gray-100 text-gray-700 cursor-pointer active:shadow-bg-gray-200/50 ring-1 ring-gray-200",
-  };
-
-  // background: linear-gradient(107.63deg, #321386 0%, #9C20D7 100%, #9C20D7 100%);
-  const iconClasses = {
-    lg: props.iconType === "icon" ? "p-3" : "px-6 py-3",
-    md: props.iconType === "icon" ? "p-2" : "px-4 py-2",
-    sm: props.iconType === "icon" ? "p-1.5" : "px-4 py-1.5",
-    xs: props.iconType === "icon" ? "p-1" : "px-3 py-1",
-  };
-
-  const colorClass = btnColor[props.color] || "";
-  const sizeClass = sizeClasses[props.size] || "";
-  const typeClass = iconClasses[props.size] || "";
-  const disabledClass =
-    props.disabled === true
-      ? "active:!translate-y-0 active:!scale-100 active:!shadow-none"
-      : "";
-  return `${colorClass} ${sizeClass} ${typeClass} ${disabledClass}`;
-});
-
-const iconWidthClasses = reactive({
-  xs: "w-4 h-4 text-current",
-  sm: "w-5 h-5 text-current",
-  md: "w-6 h-6 text-current",
-  lg: "w-6 h-6 text-current",
-});
-
-const iconWidth = computed(() => {
-  const iconClass = iconWidthClasses[props.size] || "";
-  return iconClass;
-});
-</script>
-
-<style lang="scss">
-.primary-btn {
-    background: linear-gradient(107.63deg, #321386 0%, #9C20D7 100%, #9C20D7 100%);
-    @apply bg-[#321386] hover:opacity-90;
-    &:active {
-      background: linear-gradient(-135deg,#321386 0%, #9c20d7 100%, #9c20d7 100%);
-    }
-  }
-</style>