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

package/src/components/alerts/EUIAlerts.vue

@@ -0,0 +1,194 @@
+<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/alerts/EUIAlerts.vue.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"EUIAlerts.vue.js","sourceRoot":"","sources":["EUIAlerts.vue"],"names":[],"mappings":"AAAA,OAoMO,EAAE,QAAQ,EAAE,MAAM,EAAiB,MAAM,KAAK,CAAC;AACtD,OAAO,EACL,uBAAuB,EACvB,eAAe,EACf,WAAW,EACX,SAAS,GACV,MAAM,yBAAyB,CAAC;AAGjC,MAAM,EAAE,WAAW,EAAE,WAAW,EAAE,WAAW,EAAE,YAAY,EAAE,WAAW,EAAE,aAAa,EAAE,YAAY,GAAG,GAAG,MAAM,MAAM,CAAC,KAAK,CAAC,CAAC;AAC/H,MAAM,KAAK,GAAG,WAAW,CAAC;IACxB,SAAS,EAAE;QACT,IAAI,EAAE,OAAO;QACb,OAAO,EAAE,IAAI;KACd;IACD,OAAO,EAAE;QACP,IAAI,EAAE,MAAM;QACZ,OAAO,EAAE,EAAE;KACZ;IACD,WAAW,EAAE;QACX,IAAI,EAAE,MAAM;QACZ,OAAO,EAAE,EAAE;KACZ;IACD,SAAS,EAAE;QACT,IAAI,EAAE,MAA+D;QACrE,OAAO,EAAE,SAAS;KACnB;IACD,SAAS,EAAE;QACT,IAAI,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,QAAQ,CAAC;QAChC,OAAO,EAAE,EAAE;KACZ;IACD,WAAW,EAAE,OAAO;IACpB,SAAS,EAAE,OAAO;CACnB,CAAC,CAAC;AACH,MAAM,EAAE,SAAS,EAAE,GAAG,MAAM,CAAC,KAAK,CAAC,CAAC;AACpC,MAAM,KAAK,GAAG,WAAW,CAAC,CAAC,kBAAkB,EAAE,aAAa,EAAE,cAAc,CAAC,CAAC,CAAC;AAC/E,MAAM,QAAQ,GAAG,GAAG,EAAE;IACpB,KAAK,CAAC,aAAa,EAAE,IAAI,CAAC,CAAC;IAC3B,KAAK,CAAC,kBAAkB,EAAE,KAAK,CAAC,CAAC;AACnC,CAAC,CAAC;AACF,MAAM,OAAO,GAAG,GAAG,EAAE;IACnB,KAAK,CAAC,cAAc,EAAE,KAAK,CAAC,CAAC;IAC7B,KAAK,CAAC,kBAAkB,EAAE,KAAK,CAAC,CAAC;AACnC,CAAC,CAAC;AAEF,MAAM,WAAW,GAAG,QAAQ,CAAC,GAAG,EAAE;IAChC,MAAM,WAAW,GAAG;QAClB,OAAO,EAAE;YACP,OAAO,EAAE,YAAY;YACrB,QAAQ,EAAE;gBACR,IAAI,EAAE,eAAe;gBACrB,KAAK,EAAE,eAAe;aACvB;YACD,UAAU,EAAE,eAAe;YAC3B,SAAS,EAAE,eAAe;YAC1B,UAAU,EACR,6EAA6E;YAC/E,WAAW,EACT,0FAA0F;YAC5F,QAAQ,EACN,0FAA0F;SAC7F;QACD,OAAO,EAAE;YACP,OAAO,EAAE,cAAc;YACvB,QAAQ,EAAE;gBACR,IAAI,EAAE,uBAAuB;gBAC7B,KAAK,EAAE,iBAAiB;aACzB;YACD,UAAU,EAAE,iBAAiB;YAC7B,SAAS,EAAE,iBAAiB;YAC5B,UAAU,EACR,qFAAqF;YACvF,WAAW,EACT,oGAAoG;YACtG,QAAQ,EACN,oGAAoG;SACvG;QACD,OAAO,EAAE;YACP,OAAO,EAAE,aAAa;YACtB,QAAQ,EAAE;gBACR,IAAI,EAAE,eAAe;gBACrB,KAAK,EAAE,gBAAgB;aACxB;YACD,UAAU,EAAE,gBAAgB;YAC5B,SAAS,EAAE,gBAAgB;YAC3B,UAAU,EACR,iFAAiF;YACnF,WAAW,EACT,+FAA+F;YACjG,QAAQ,EACN,+FAA+F;SAClG;QACD,KAAK,EAAE;YACL,OAAO,EAAE,WAAW;YACpB,QAAQ,EAAE;gBACR,IAAI,EAAE,WAAW;gBACjB,KAAK,EAAE,cAAc;aACtB;YACD,UAAU,EAAE,cAAc;YAC1B,SAAS,EAAE,cAAc;YACzB,UAAU,EACR,yEAAyE;YAC3E,WAAW,EACT,qFAAqF;YACvF,QAAQ,EACN,qFAAqF;SACxF;KACF,CAAC;IACF,OAAO,WAAW,CAAC,KAAK,CAAC,SAAS,CAAC,IAAI,EAAE,CAAC;AAC5C,CAAC,CAAC,CAAC;AACH,MAAM,iBAAiB,GAAG,CAAC,MAAM,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC,eAAe,CAAC;IAChE,KAAK,EAAE;QACL,SAAS,EAAE;YACT,IAAI,EAAE,OAAO;YACb,OAAO,EAAE,IAAI;SACd;QACD,OAAO,EAAE;YACP,IAAI,EAAE,MAAM;YACZ,OAAO,EAAE,EAAE;SACZ;QACD,WAAW,EAAE;YACX,IAAI,EAAE,MAAM;YACZ,OAAO,EAAE,EAAE;SACZ;QACD,SAAS,EAAE;YACT,IAAI,EAAE,MAA+D;YACrE,OAAO,EAAE,SAAS;SACnB;QACD,SAAS,EAAE;YACT,IAAI,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,QAAQ,CAAC;YAChC,OAAO,EAAE,EAAE;SACZ;QACD,WAAW,EAAE,OAAO;QACpB,SAAS,EAAE,OAAO;KACnB;IACD,KAAK,EAAE,EAAwC;CAC9C,CAAC,CAAC;AACuD,CAAC;AAC3D,IAAI,8BAAmJ,CAAC;AAExJ,SAAS,cAAc;IACvB,MAAM,SAAS,GAAG,EAAqE,CAAC;IACxF,MAAM,qBAAqB,GAAG;QAC9B,GAAG,EAKA;QACH,GAAG,EAA6E;QAChF,GAAG,SAAS;KACX,CAAC;IACF,IAAI,gBAAwE,CAAC;IAC7E,MAAM,qBAAqB,GAAG;QAC9B,GAAG,EAA6E;QAChF,GAAG,SAAS;KACX,CAAC;IACF,IAAI,gBAAwE,CAAC;IAC7E,IAAI,wBAA6B,CAAC;IAElC,0BAA0B;IAC1B,8BAA8B;IAC9B,IAAI,sCAEqG,CAAC;IAC1G,MAAM,OAAO,GAAG,sCAAsC,CAAC,UAAU,CAAC;IAClE,mKAAmK;IACnK,aAAa;IACb,MAAM,OAAO,GAAG,2BAA2B,CAAC,OAAO,EAAE,IAAI,OAAO,CAAC,EAAC,gBAAgB,EAAE,CAAC,4CAA4C,CAAC,EAAE,cAAc,EAAE,CAAC,2DAA2D,CAAC,EAAE,YAAY,EAAE,CAAC,4CAA4C,CAAC,EAAE,gBAAgB,EAAE,CAAC,iCAAiC,CAAC,EAAE,cAAc,EAAE,CAAC,aAAa,CAAC,EAAE,YAAY,EAAE,CAAC,WAAW,CAAC,GAAG,CAAC,CAAC,CAAC;IAC1Y,MAAM,OAAO,GAAG,OAAO,CAAC,EAAC,gBAAgB,EAAE,CAAC,4CAA4C,CAAC,EAAE,cAAc,EAAE,CAAC,2DAA2D,CAAC,EAAE,YAAY,EAAE,CAAC,4CAA4C,CAAC,EAAE,gBAAgB,EAAE,CAAC,iCAAiC,CAAC,EAAE,cAAc,EAAE,CAAC,aAAa,CAAC,EAAE,YAAY,EAAE,CAAC,WAAW,CAAC,GAAG,EAAE,GAAG,iCAAiC,CAAC,OAAO,CAAC,CAAC,CAAC;IAC/Y,IAAI,SAAS,CAAC,SAAS,EAAE,CAAC;QAC1B,uBAAuB,CAAC,uBAAuB,CAAC,GAAG,EAAE,uBAAuB,CAAC,GAAG,CAAC,CAAC,EAAC,GAAG,EAAE,KAAK,EAAE,CAAC,CAAC,CAAC,gBAAgB,EAAE,SAAS,CAAC,WAAW,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,GAAG,CAAC,CAAC;QAC3J,uBAAuB,CAAC,uBAAuB,CAAC,GAAG,EAAE,uBAAuB,CAAC,GAAG,CAAC,CAAC,EAAC,GAAG,EAAE,KAAK,EAAE,CAAC,CAAC,CAAC,SAAS,CAAC,SAAS,IAAI,CAAC,SAAS,CAAC,WAAW,CAAC,CAAC,CAAC,wBAAwB,CAAC,CAAC,CAAC,kBAAkB,CAAC,CAAC,CAAC,EAAE,GAAG,CAAC,CAAC;QACzM,uBAAuB,CAAC,uBAAuB,CAAC,GAAG,EAAE,uBAAuB,CAAC,GAAG,CAAC,CAAC,EAAC,GAAG,EAAE,KAAK,EAAE,CAAC,UAAU,CAAC,EAAE,GAAG,CAAC,CAAC;QAClH,IAAI,OAAO,GAAG,EACb,CAAC;QACF,MAAM,OAAO,GAAG,CAAC,CAAC,SAAS,CAAC,SAAS,IAAI,SAAS,CAAC,WAAW,CAAC,QAAQ,EAAE,IAAI,CAAC,CAAC,CAAC;QAChF,aAAa;QACb,MAAM,OAAO,GAAG,2BAA2B,CAAC,OAAO,EAAE,IAAI,OAAO,CAAC,EAAC,GAAG,EAAE,KAAK,EAAE,CAAC,CAAC,CAAC,QAAQ,EAAE,SAAS,CAAC,WAAW,CAAC,QAAQ,EAAE,KAAK,CAAC,CAAC,CAAC,EAAE,EAAE,aAAa,EAAE,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC;QACpK,MAAM,OAAO,GAAG,OAAO,CAAC,EAAC,GAAG,EAAE,KAAK,EAAE,CAAC,CAAC,CAAC,QAAQ,EAAE,SAAS,CAAC,WAAW,CAAC,QAAQ,EAAE,KAAK,CAAC,CAAC,CAAC,EAAE,EAAE,aAAa,EAAE,CAAC,MAAM,CAAC,GAAG,EAAE,GAAG,iCAAiC,CAAC,OAAO,CAAC,CAAC,CAAC;QACzK,iBAAiB,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC,OAAO,CAAC;QACzC,uBAAuB,CAAC,uBAAuB,CAAC,GAAG,EAAE,uBAAuB,CAAC,GAAG,CAAC,CAAC,EAAC,GAAG,EAAE,KAAK,EAAE,CAAC,MAAM,CAAC,EAAE,GAAG,CAAC,CAAC;QAC9G,uBAAuB,CAAC,uBAAuB,CAAC,EAAE,EAAE,uBAAuB,CAAC,EAAE,CAAC,CAAC,EAAC,GAAG,EAAE,KAAK,EAAE,CAAC,CAAC,CAAC,qBAAqB,EAAE,SAAS,CAAC,WAAW,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE,GAAG,CAAC,CAAC;QACjK,IAAI,QAAQ,GAAG,EACd,CAAC;QACF,CAAE,SAAS,CAAC,OAAO,IAAI,aAAa,CAAE,CAAC;QACvC,iBAAiB,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC,OAAO,CAAC;QACzC,IAAI,QAAQ,GAAG,EACd,CAAC;QACF,IAAI,SAAS,CAAC,WAAW,EAAE,CAAC;YAC5B,uBAAuB,CAAC,uBAAuB,CAAC,GAAG,EAAE,uBAAuB,CAAC,GAAG,CAAC,CAAC,EAAC,GAAG,EAAE,KAAK,EAAE,CAAC,CAAC,CAAC,cAAc,EAAE,SAAS,CAAC,WAAW,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE,GAAG,CAAC,CAAC;YAC3J,CAAE,SAAS,CAAC,WAAW,IAAI,0BAA0B,CAAE,CAAC;QACxD,CAAC;QACD,iBAAiB,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC,OAAO,CAAC;QACzC,IAAI,QAAQ,GAAG,EACd,CAAC;QACF,IAAI,SAAS,CAAC,WAAW,EAAE,CAAC;YAC5B,uBAAuB,CAAC,uBAAuB,CAAC,GAAG,EAAE,uBAAuB,CAAC,GAAG,CAAC,CAAC,EAAC,GAAG,EAAE,KAAK,EAAE,CAAC,MAAM,CAAC,EAAE,GAAG,CAAC,CAAC;YAC9G,uBAAuB,CAAC,uBAAuB,CAAC,GAAG,EAAE,uBAAuB,CAAC,GAAG,CAAC,CAAC,EAAC,GAAG,EAAE,KAAK,EAAE,CAAC,oBAAoB,CAAC,EAAE,GAAG,CAAC,CAAC;YAC5H,uBAAuB,CAAC,uBAAuB,CAAC,MAAM,EAAE,uBAAuB,CAAC,MAAM,CAAC,CAAC,EAAC,GAAG,EAAE,OAAO,EAAE,CAAC,SAAS,CAAC,QAAQ,CAAC,EAAC,EAAE,IAAI,EAAE,CAAC,QAAQ,CAAC,EAAE,GAAG,EAAE,KAAK,EAAE,CAAC,CAAC;wBACxI,4GAA4G;wBAC5G,SAAS,CAAC,WAAW,CAAC,UAAU;qBACjC,CAAC,CAAC,EAAE,GAAG,CAAC,CAAC;YAC9B,uBAAuB,CAAC,uBAAuB,CAAC,MAAM,EAAE,uBAAuB,CAAC,MAAM,CAAC,CAAC,EAAC,GAAG,EAAE,OAAO,EAAE,CAAC,SAAS,CAAC,OAAO,CAAC,EAAC,EAAE,IAAI,EAAE,CAAC,QAAQ,CAAC,EAAE,GAAG,EAAE,KAAK,EAAE,CAAC,CAAC;wBACvI,qGAAqG;wBACrG,SAAS,CAAC,WAAW,CAAC,WAAW;qBAClC,CAAC,CAAC,EAAE,GAAG,CAAC,CAAC;QAC9B,CAAC;QACD,iBAAiB,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC,OAAO,CAAC;QACzC,IAAI,SAAS,CAAC,SAAS,EAAE,CAAC;YAC1B,uBAAuB,CAAC,uBAAuB,CAAC,GAAG,EAAE,uBAAuB,CAAC,GAAG,CAAC,CAAC,EAAC,GAAG,EAAE,KAAK,EAAE,CAAC,cAAc,CAAC,EAAE,GAAG,CAAC,CAAC;YACtH,IAAI,QAAQ,GAAG,EACd,CAAC;YACF,uBAAuB,CAAC,uBAAuB,CAAC,GAAG,EAAE,uBAAuB,CAAC,GAAG,CAAC,CAAC,EAAC,GAAG,EAAE,KAAK,EAAE,CAAC,sBAAsB,CAAC,EAAE,GAAG,CAAC,CAAC;YAC9H,uBAAuB,CAAC,uBAAuB,CAAC,MAAM,EAAE,uBAAuB,CAAC,MAAM,CAAC,CAAC,EAAC,GAAG,EAAE,OAAO,EAAE,CAAC,GAAG,CAAC,MAAM,CAAC,EAAE,EAAE;wBACvH,IAAI,CAAC,CAAC,CAAC,SAAS,CAAC,SAAS,CAAC,CAAC;4BAAE,OAAO;wBACrC,IAAI,CAAC,CAAC,CAAC,SAAS,CAAC,SAAS,CAAC,CAAC;4BAAE,OAAO;wBACrC,SAAS,CAAC,OAAO,EAAE,CAAC;oBACpB,CAAC,EAAC,EAAE,IAAI,EAAE,CAAC,QAAQ,CAAC,EAAE,GAAG,EAAE,KAAK,EAAE,CAAC,CAAC;wBAClB,4EAA4E;wBAC5E,SAAS,CAAC,WAAW,CAAC,QAAQ;qBAC/B,CAAC,CAAC,EAAE,GAAG,CAAC,CAAC;YAC1B,uBAAuB,CAAC,uBAAuB,CAAC,IAAI,EAAE,uBAAuB,CAAC,IAAI,CAAC,CAAC,EAAC,GAAG,EAAE,KAAK,EAAE,CAAC,SAAS,CAAC,EAAE,GAAG,CAAC,CAAC;YACnH,MAAM,QAAQ,GAAG,sCAAsC,CAAC,SAAS,CAAC;YAClE,sDAAsD;YACtD,aAAa;YACb,MAAM,QAAQ,GAAG,2BAA2B,CAAC,QAAQ,EAAE,IAAI,QAAQ,CAAC,EAAC,GAAG,EAAE,KAAK,EAAE,CAAC,QAAQ,CAAC,EAAE,EAAE,aAAa,EAAE,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC;YAC5H,MAAM,QAAQ,GAAG,QAAQ,CAAC,EAAC,GAAG,EAAE,KAAK,EAAE,CAAC,QAAQ,CAAC,EAAE,EAAE,aAAa,EAAE,CAAC,MAAM,CAAC,GAAG,EAAE,GAAG,iCAAiC,CAAC,QAAQ,CAAC,CAAC,CAAC;YACjI,iBAAiB,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC,OAAO,CAAC;QACzC,CAAC;IACD,CAAC;IACD,iBAAiB,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC,OAAO,CAAC;IACzC,MAAM,OAAO,GAAG,gCAAgC,CAAC,OAAO,EAAE,OAAO,CAAC,CAAC;IACnE,wBAAwB,CAAC,KAAK,CAAC,CAAC;IAChC,wBAAwB,CAAC,YAAY,CAAC,CAAC;IACvC,wBAAwB,CAAC,UAAU,CAAC,CAAC;IACrC,wBAAwB,CAAC,QAAQ,CAAC,CAAC;IACnC,wBAAwB,CAAC,MAAM,CAAC,CAAC;IACjC,wBAAwB,CAAC,SAAS,CAAC,CAAC;IACpC,wBAAwB,CAAC,aAAa,CAAC,CAAC;IACxC,wBAAwB,CAAC,MAAM,CAAC,CAAC;IACjC,wBAAwB,CAAC,SAAS,CAAC,CAAC;IACpC,wBAAwB,CAAC,MAAM,CAAC,CAAC;IACjC,wBAAwB,CAAC,OAAO,CAAC,CAAC;IAClC,wBAAwB,CAAC,SAAS,CAAC,CAAC;IACpC,wBAAwB,CAAC,MAAM,CAAC,CAAC;IACjC,wBAAwB,CAAC,YAAY,CAAC,CAAC;IACvC,wBAAwB,CAAC,MAAM,CAAC,CAAC;IACjC,wBAAwB,CAAC,QAAQ,CAAC,CAAC;IACnC,wBAAwB,CAAC,SAAS,CAAC,CAAC;IACpC,wBAAwB,CAAC,aAAa,CAAC,CAAC;IACxC,wBAAwB,CAAC,YAAY,CAAC,CAAC;IACvC,wBAAwB,CAAC,oBAAoB,CAAC,CAAC;IAC/C,wBAAwB,CAAC,cAAc,CAAC,CAAC;IACzC,wBAAwB,CAAC,qBAAqB,CAAC,CAAC;IAChD,wBAAwB,CAAC,MAAM,CAAC,CAAC;IACjC,wBAAwB,CAAC,YAAY,CAAC,CAAC;IACvC,wBAAwB,CAAC,MAAM,CAAC,CAAC;IACjC,wBAAwB,CAAC,QAAQ,CAAC,CAAC;IACnC,wBAAwB,CAAC,SAAS,CAAC,CAAC;IACpC,wBAAwB,CAAC,aAAa,CAAC,CAAC;IACxC,wBAAwB,CAAC,oBAAoB,CAAC,CAAC;IAC/C,wBAAwB,CAAC,cAAc,CAAC,CAAC;IACzC,wBAAwB,CAAC,qBAAqB,CAAC,CAAC;IAChD,wBAAwB,CAAC,SAAS,CAAC,CAAC;IACpC,wBAAwB,CAAC,MAAM,CAAC,CAAC;IACjC,wBAAwB,CAAC,SAAS,CAAC,CAAC;IACpC,wBAAwB,CAAC,SAAS,CAAC,CAAC;IACpC,wBAAwB,CAAC,MAAM,CAAC,CAAC;IACjC,wBAAwB,CAAC,aAAa,CAAC,CAAC;IACxC,wBAAwB,CAAC,YAAY,CAAC,CAAC;IACvC,wBAAwB,CAAC,oBAAoB,CAAC,CAAC;IAC/C,wBAAwB,CAAC,cAAc,CAAC,CAAC;IACzC,wBAAwB,CAAC,qBAAqB,CAAC,CAAC;IAChD,wBAAwB,CAAC,SAAS,CAAC,CAAC;IACpC,wBAAwB,CAAC,QAAQ,CAAC,CAAC;IAEnC,IAAI,WAMH,CAAC;IACF,IAAI,oBAAyB,CAAC;IAC9B,MAAM,UAAU,GAAG,EAClB,CAAC;IACF,IAAI,KAAyB,CAAC;IAC9B,OAAO;QACN,KAAK,EAAE,WAAW;QAClB,IAAI,EAAE,KAAK;QACX,KAAK,EAAE,EAA0C;KACjD,CAAC;AACF,CAAC;AAAA,CAAC;AACF,MAAM,UAAU,GAAG,CAAC,MAAM,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC,eAAe,CAAC;IACzD,KAAK;QACL,OAAO;YACP,SAAS,EAAE,SAA6B;YACxC,SAAS,EAAE,SAA6B;YACxC,QAAQ,EAAE,QAA2B;YACrC,OAAO,EAAE,OAAyB;YAClC,WAAW,EAAE,WAAiC;SAC7C,CAAC;IACF,CAAC;IACD,KAAK,EAAE,EAAwC;IAC/C,KAAK,EAAE;QACL,SAAS,EAAE;YACT,IAAI,EAAE,OAAO;YACb,OAAO,EAAE,IAAI;SACd;QACD,OAAO,EAAE;YACP,IAAI,EAAE,MAAM;YACZ,OAAO,EAAE,EAAE;SACZ;QACD,WAAW,EAAE;YACX,IAAI,EAAE,MAAM;YACZ,OAAO,EAAE,EAAE;SACZ;QACD,SAAS,EAAE;YACT,IAAI,EAAE,MAA+D;YACrE,OAAO,EAAE,SAAS;SACnB;QACD,SAAS,EAAE;YACT,IAAI,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,QAAQ,CAAC;YAChC,OAAO,EAAE,EAAE;SACZ;QACD,WAAW,EAAE,OAAO;QACpB,SAAS,EAAE,OAAO;KACnB;CACA,CAAC,CAAC;AAEH,MAAM,eAAe,GAAG,CAAC,MAAM,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC,eAAe,CAAC;IAC9D,KAAK;QACL,OAAO,EACN,CAAC;IACF,CAAC;IACD,KAAK,EAAE,EAAwC;IAC/C,KAAK,EAAE;QACL,SAAS,EAAE;YACT,IAAI,EAAE,OAAO;YACb,OAAO,EAAE,IAAI;SACd;QACD,OAAO,EAAE;YACP,IAAI,EAAE,MAAM;YACZ,OAAO,EAAE,EAAE;SACZ;QACD,WAAW,EAAE;YACX,IAAI,EAAE,MAAM;YACZ,OAAO,EAAE,EAAE;SACZ;QACD,SAAS,EAAE;YACT,IAAI,EAAE,MAA+D;YACrE,OAAO,EAAE,SAAS;SACnB;QACD,SAAS,EAAE;YACT,IAAI,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,QAAQ,CAAC;YAChC,OAAO,EAAE,EAAE;SACZ;QACD,WAAW,EAAE,OAAO;QACpB,SAAS,EAAE,OAAO;KACnB;CACA,CAAC,CAAC;AACH,eAAe,EAAoF,CAAC;AACpG,CAAC"}

package/src/components/avatar/EUIAvatar.stories.ts

@@ -0,0 +1,157 @@
+import type { Meta, StoryObj } from "@storybook/vue3";
+import EUIAvatar from "./EUIAvatar.vue"; // Adjust the path if necessary
+
+const meta = {
+  title: "Example/Avatar",
+  component: EUIAvatar,
+  tags: ["autodocs"],
+  argTypes: {
+    imageUrl: {
+      type: "string",
+      description: "Show image URLs",
+    },
+    fullName: {
+      type: "string",
+      description: "No image URL show Name FirstLetter",
+    },
+    size: {
+      control: { type: "select", options: ["xs", "sm", "md", "lg", "xl"] },
+      description: "Size of the button.",
+    },
+    showStatus: {
+      control: { type: "boolean" },
+      description: "Show online/Offline status",
+    },
+    status: {
+      control: { type: "select", options: ["Online", "Offline"] },
+      description: "Profile Status",
+    },
+    profile: {
+      control: { type: "boolean" },
+      description:
+        "Show Profile enable \n\n Name and Designation use \n\n `<template #name></template><template #designation></template>`",
+    },
+    profileData: {
+      control: { type: "object" },
+      description: "Profile data send name and Designation or use template",
+    },
+  },
+} satisfies Meta<typeof EUIAvatar>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// Default button story with default slot content
+export const Default: Story = {
+  argTypes: {
+    size: {
+      control: "select",
+      options: ["xs", "sm", "md", "lg", "xl"],
+    },
+    imageUrl: {
+      type: "string",
+    },
+    status: {
+      control: "select",
+      options: ["Online", "Offline"],
+    },
+  },
+  args: {
+    imageUrl: "https://tinyurl.com/43e5fxh9",
+    size: "md",
+    showStatus: true,
+    status: "Online",
+  },
+  render: (args) => ({
+    components: { EUIAvatar },
+    setup() {
+      return { args };
+    },
+    template: `<EUIAvatar v-bind="args"></EUIAvatar>`,
+  }),
+};
+
+export const FirstLetter: Story = {
+  argTypes: {
+    size: {
+      control: "select",
+      options: ["xs", "sm", "md", "lg", "xl"],
+    },
+    fullName: {
+      type: "string",
+    },
+    status: {
+      control: "select",
+      options: ["Online", "Offline"],
+    },
+  },
+  args: {
+    fullName: "JohnCena",
+    size: "md",
+    showStatus: true,
+    status: "Offline",
+  },
+  render: (args) => ({
+    components: { EUIAvatar },
+    setup() {
+      return { args };
+    },
+    template: `<EUIAvatar v-bind="args"></EUIAvatar>`,
+  }),
+};
+
+export const Profile: Story = {
+  argTypes: {
+    size: {
+      control: "select",
+      options: ["xs", "sm", "md", "lg", "xl"],
+    },
+    imageUrl: { type: "string" },
+    status: {
+      control: "select",
+      options: ["Online", "Offline"],
+    },
+    profile: { type: "boolean" },
+    name: { type: "string" },
+    designation: { type: "string" },
+  },
+  args: {
+    imageUrl: "https://tinyurl.com/43e5fxh9",
+    size: "sm",
+    showStatus: true,
+    status: "Online",
+    profile: true,
+    name: "John Cena",
+    designation: "Actor",
+  },
+  render: (args) => ({
+    components: { EUIAvatar },
+    setup() {
+      return { args };
+    },
+    template: `<EUIAvatar v-bind="args">
+                <template #name>{{args.name}}</template>
+                <template #designation>{{ args.designation }}</template>
+              </EUIAvatar>`,
+  }),
+};
+
+export const ProfileData: Story = {
+  argTypes: {},
+  args: {
+    imageUrl: "https://tinyurl.com/43e5fxh9",
+    size: "xl",
+    profile: true,
+    profileData: {
+      name: "John Cena",
+      designation: "Actor",
+    },
+  },
+  render: (args) => ({
+    components: { EUIAvatar },
+    setup() {
+      return { args };
+    },
+    template: `<EUIAvatar v-bind="args"></EUIAvatar>`,
+  }),
+};

package/src/components/avatar/EUIAvatar.vue

@@ -0,0 +1,96 @@
+<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/avatar/EUIAvatar.vue.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"EUIAvatar.vue.js","sourceRoot":"","sources":["EUIAvatar.vue"],"names":[],"mappings":"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"}

package/src/components/breadcrumb/EUIBreadcrumb.stories.ts

@@ -0,0 +1,75 @@
+// EUIBreadcrumb.stories.ts
+import { Meta, StoryObj } from "@storybook/vue3";
+import EUIBreadcrumb from "./EUIBreadcrumb.vue";
+import {
+  BookOpenIcon,
+  HomeIcon,
+  TableCellsIcon,
+} from "@heroicons/vue/24/outline";
+
+const meta = {
+  title: "Components/Breadcrumb",
+  component: EUIBreadcrumb,
+  tags: ["autodocs"],
+  argTypes: {
+    pages: {
+      description: `An array of objects representing the breadcrumb pages.
+Each object can include:
+- \`name\` (string): The display name of the breadcrumb item.
+- \`href\` (string, optional): The URL the breadcrumb item points to.
+- \`current\` (boolean, optional): Indicates if the breadcrumb item is the current page.
+- \`showIcon\` (Vue component, optional): An icon component to display alongside the name.`,
+      control: "object",
+    },
+  },
+} satisfies Meta<typeof EUIBreadcrumb>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// Default story with minimum props
+export const Default: Story = {
+  args: {
+    pages: [
+      {
+        name: "Home",
+        href: "/",
+        current: true,
+      },
+      {
+        name: "Library",
+        href: "/library",
+        current: false,
+      },
+      {
+        name: "Data",
+        current: false,
+      },
+    ],
+  },
+};
+
+// Default story with minimum props
+export const IconsUsed: Story = {
+  args: {
+    pages: [
+      {
+        name: "Home",
+        href: "/",
+        current: true,
+        showIcon: HomeIcon,
+      },
+      {
+        name: "Library",
+        href: "/library",
+        current: false,
+        showIcon: BookOpenIcon,
+      },
+      {
+        name: "Data",
+        current: false,
+        showIcon: TableCellsIcon,
+      },
+    ],
+  },
+};

package/src/components/breadcrumb/EUIBreadcrumb.vue

@@ -0,0 +1,59 @@
+<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/breadcrumb/EUIBreadcrumb.vue.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"EUIBreadcrumb.vue.js","sourceRoot":"","sources":["EUIBreadcrumb.vue"],"names":[],"mappings":"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"}