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

package/src/components/dragModal/EUIDrag.vue

@@ -0,0 +1,179 @@
+<template>
+  <div
+    v-if="isVisible"
+    ref="containerRef"
+    class="draggable-card"
+    :style="containerStyle"
+  >
+    <!-- HEADER / DRAG HANDLE -->
+    <div
+      class="flex items-center justify-between flex-shrink-0 px-2 bg-white cursor-grab"
+      @mousedown.prevent="startDrag"
+      @touchstart.prevent="startDrag"
+    >
+      <div class="flex items-center gap-4">
+        <EUIAvatar
+          image-url="https://tinyurl.com/43e5fxh9"
+          :profile="true"
+          full-name="JohnCena"
+          :show-status="true"
+          status="Online"
+          size="sm"
+        >
+          <template #name>John Cena</template>
+          <template #designation>Actor</template>
+        </EUIAvatar>
+      </div>
+      <EUIButton
+        color="white"
+        size="xs"
+        rounded
+        icon-type="icon"
+        :icon="ChevronBigDown"
+        :class="minimized ? 'rotate-0' : '-rotate-90'"
+        @click="onToggle"
+      />
+    </div>
+
+    <!-- BODY -->
+    <transition name="slide-fade">
+      <div
+        v-if="minimized"
+        class="px-4 py-3 mt-4 overflow-y-auto border border-gray-100 border-solid rounded-lg bg-gray-50"
+      >
+        <h3 class="mb-2 text-lg font-semibold text-gray-900">
+          Card Title Here....
+        </h3>
+        <p class="mb-4 text-sm text-gray-500">
+          Lorem, ipsum dolor sit amet consectetur adipisicing elit. Corporis non
+          velit doloremque sint repellat beatae accusamus? Recusandae possimus
+          voluptas beatae, labore dolor dolorem necessitatibus architecto
+          laudantium deserunt ipsam autem. Dignissimos?
+        </p>
+
+        <p class="text-sm text-gray-500">
+          Lorem ipsum dolor sit amet consectetur, adipisicing elit. Dicta minima
+          ullam porro voluptate ea, amet accusamus et debitis.
+        </p>
+
+        <div class="mt-4 text-right">
+          <EUIButton
+            color="primary"
+            size="sm"
+            icon-type="endIcon"
+            :icon="XMarkIcon"
+            rounded
+            @click="isVisible = false"
+          >
+            Close
+          </EUIButton>
+        </div>
+      </div>
+    </transition>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, watch, onBeforeUnmount } from "vue";
+import { XMarkIcon } from "@heroicons/vue/24/outline";
+import EUIAvatar from "../avatar/EUIAvatar.vue";
+import EUIButton from "../button/EUIButton.vue";
+import ChevronBigDown from "../../assets/svg/ChevronBigDown.vue";
+
+const isVisible = ref(true);
+const minimized = ref(true);
+const containerRef = ref<HTMLElement | null>(null);
+
+const x = ref(20);
+const y = ref(80);
+const dragging = ref(false);
+const startX = ref(0);
+const startY = ref(0);
+const origX = ref(0);
+const origY = ref(0);
+
+const onToggle = () => {
+  minimized.value = !minimized.value;
+  if (minimized.value) {
+    y.value = y.value <= 284 ? y.value : 284;
+  }
+};
+
+const startDrag = (e: MouseEvent | TouchEvent) => {
+  const tag = (e.target as Element).tagName.toLowerCase();
+  if (["input", "textarea", "select", "button", "svg", "path"].includes(tag))
+    return;
+
+  const { pageX, pageY } = "touches" in e ? e.touches[0] : e;
+  dragging.value = true;
+  startX.value = pageX;
+  startY.value = pageY;
+  origX.value = x.value;
+  origY.value = y.value;
+
+  window.addEventListener("mousemove", onDrag);
+  window.addEventListener("mouseup", stopDrag);
+  window.addEventListener("touchmove", onDrag);
+  window.addEventListener("touchend", stopDrag);
+};
+
+const onDrag = (e: MouseEvent | TouchEvent) => {
+  if (!dragging.value) return;
+  const { pageX, pageY } = "touches" in e ? e.touches[0] : e;
+  const dx = pageX - startX.value;
+  const dy = pageY - startY.value;
+
+  let newX = origX.value - dx;
+  let newY = origY.value + dy;
+
+  const el = containerRef.value;
+  if (el) {
+    const { offsetWidth: w, offsetHeight: h } = el;
+    newX = Math.min(Math.max(0, newX), window.innerWidth - w);
+    newY = Math.min(Math.max(0, newY), window.innerHeight - h);
+  }
+
+  x.value = newX;
+  y.value = newY;
+};
+
+const stopDrag = () => {
+  dragging.value = false;
+  window.removeEventListener("mousemove", onDrag);
+  window.removeEventListener("mouseup", stopDrag);
+  window.removeEventListener("touchmove", onDrag);
+  window.removeEventListener("touchend", stopDrag);
+};
+
+onBeforeUnmount(stopDrag);
+
+// clamp Y when toggling
+watch(minimized, (val) => {
+  if (!val && y.value > 300) {
+    y.value = 300;
+  }
+});
+
+const containerStyle = computed(() => ({
+  position: "fixed" as const,
+  right: `${x.value}px`,
+  top: `${y.value}px`,
+  cursor: dragging.value ? "grabbing" : "grab",
+  zIndex: 999,
+}));
+</script>
+
+<style lang="scss" scoped>
+.draggable-card {
+  @apply p-2 w-96 border border-solid border-purple-100 overflow-hidden flex-col flex bg-white rounded-2xl shadow-xl shadow-violet-100;
+}
+
+.slide-fade-enter-active,
+.slide-fade-leave-active {
+  transition: opacity 0.3s ease;
+}
+.slide-fade-enter-from,
+.slide-fade-leave-to {
+  opacity: 0;
+}
+</style>

package/src/components/dragModal/EUIDrag.vue.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"EUIDrag.vue.js","sourceRoot":"","sources":["EUIDrag.vue"],"names":[],"mappings":"AAAA,OAqLO,EAAE,GAAG,EAAE,QAAQ,EAAE,KAAK,EAAE,eAAe,EAAE,MAAM,KAAK,CAAC;AAC5D,OAAO,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAC;AACtD,OAAO,SAAS,MAAM,yBAAyB,CAAC;AAChD,OAAO,SAAS,MAAM,yBAAyB,CAAC;AAChD,OAAO,cAAc,MAAM,qCAAqC,CAAC;AAGjE,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,SAAS,GAAG,GAAG,CAAC,IAAI,CAAC,CAAC;AAC5B,MAAM,SAAS,GAAG,GAAG,CAAC,IAAI,CAAC,CAAC;AAC5B,MAAM,YAAY,GAAG,GAAG,CAAqB,IAAI,CAAC,CAAC;AAEnD,MAAM,CAAC,GAAG,GAAG,CAAC,EAAE,CAAC,CAAC;AAClB,MAAM,CAAC,GAAG,GAAG,CAAC,EAAE,CAAC,CAAC;AAClB,MAAM,QAAQ,GAAG,GAAG,CAAC,KAAK,CAAC,CAAC;AAC5B,MAAM,MAAM,GAAG,GAAG,CAAC,CAAC,CAAC,CAAC;AACtB,MAAM,MAAM,GAAG,GAAG,CAAC,CAAC,CAAC,CAAC;AACtB,MAAM,KAAK,GAAG,GAAG,CAAC,CAAC,CAAC,CAAC;AACrB,MAAM,KAAK,GAAG,GAAG,CAAC,CAAC,CAAC,CAAC;AAErB,MAAM,QAAQ,GAAG,GAAG,EAAE;IACpB,SAAS,CAAC,KAAK,GAAG,CAAC,SAAS,CAAC,KAAK,CAAC;IACnC,IAAI,SAAS,CAAC,KAAK,EAAE,CAAC;QACpB,CAAC,CAAC,KAAK,GAAG,CAAC,CAAC,KAAK,IAAI,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,GAAG,CAAC;IAC3C,CAAC;AACH,CAAC,CAAC;AAEF,MAAM,SAAS,GAAG,CAAC,CAA0B,EAAE,EAAE;IAC/C,MAAM,GAAG,GAAI,CAAC,CAAC,MAAkB,CAAC,OAAO,CAAC,WAAW,EAAE,CAAC;IACxD,IAAI,CAAC,OAAO,EAAE,UAAU,EAAE,QAAQ,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,CAAC,CAAC,QAAQ,CAAC,GAAG,CAAC;QACxE,OAAO;IAET,MAAM,EAAE,KAAK,EAAE,KAAK,EAAE,GAAG,SAAS,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;IAC3D,QAAQ,CAAC,KAAK,GAAG,IAAI,CAAC;IACtB,MAAM,CAAC,KAAK,GAAG,KAAK,CAAC;IACrB,MAAM,CAAC,KAAK,GAAG,KAAK,CAAC;IACrB,KAAK,CAAC,KAAK,GAAG,CAAC,CAAC,KAAK,CAAC;IACtB,KAAK,CAAC,KAAK,GAAG,CAAC,CAAC,KAAK,CAAC;IAEtB,MAAM,CAAC,gBAAgB,CAAC,WAAW,EAAE,MAAM,CAAC,CAAC;IAC7C,MAAM,CAAC,gBAAgB,CAAC,SAAS,EAAE,QAAQ,CAAC,CAAC;IAC7C,MAAM,CAAC,gBAAgB,CAAC,WAAW,EAAE,MAAM,CAAC,CAAC;IAC7C,MAAM,CAAC,gBAAgB,CAAC,UAAU,EAAE,QAAQ,CAAC,CAAC;AAChD,CAAC,CAAC;AAEF,MAAM,MAAM,GAAG,CAAC,CAA0B,EAAE,EAAE;IAC5C,IAAI,CAAC,QAAQ,CAAC,KAAK;QAAE,OAAO;IAC5B,MAAM,EAAE,KAAK,EAAE,KAAK,EAAE,GAAG,SAAS,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;IAC3D,MAAM,EAAE,GAAG,KAAK,GAAG,MAAM,CAAC,KAAK,CAAC;IAChC,MAAM,EAAE,GAAG,KAAK,GAAG,MAAM,CAAC,KAAK,CAAC;IAEhC,IAAI,IAAI,GAAG,KAAK,CAAC,KAAK,GAAG,EAAE,CAAC;IAC5B,IAAI,IAAI,GAAG,KAAK,CAAC,KAAK,GAAG,EAAE,CAAC;IAE5B,MAAM,EAAE,GAAG,YAAY,CAAC,KAAK,CAAC;IAC9B,IAAI,EAAE,EAAE,CAAC;QACP,MAAM,EAAE,WAAW,EAAE,CAAC,EAAE,YAAY,EAAE,CAAC,EAAE,GAAG,EAAE,CAAC;QAC/C,IAAI,GAAG,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,CAAC,EAAE,MAAM,CAAC,UAAU,GAAG,CAAC,CAAC,CAAC;QAC1D,IAAI,GAAG,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,CAAC,EAAE,MAAM,CAAC,WAAW,GAAG,CAAC,CAAC,CAAC;IAC7D,CAAC;IAED,CAAC,CAAC,KAAK,GAAG,IAAI,CAAC;IACf,CAAC,CAAC,KAAK,GAAG,IAAI,CAAC;AACjB,CAAC,CAAC;AAEF,MAAM,QAAQ,GAAG,GAAG,EAAE;IACpB,QAAQ,CAAC,KAAK,GAAG,KAAK,CAAC;IACvB,MAAM,CAAC,mBAAmB,CAAC,WAAW,EAAE,MAAM,CAAC,CAAC;IAChD,MAAM,CAAC,mBAAmB,CAAC,SAAS,EAAE,QAAQ,CAAC,CAAC;IAChD,MAAM,CAAC,mBAAmB,CAAC,WAAW,EAAE,MAAM,CAAC,CAAC;IAChD,MAAM,CAAC,mBAAmB,CAAC,UAAU,EAAE,QAAQ,CAAC,CAAC;AACnD,CAAC,CAAC;AAEF,eAAe,CAAC,QAAQ,CAAC,CAAC;AAE1B,wBAAwB;AACxB,KAAK,CAAC,SAAS,EAAE,CAAC,GAAG,EAAE,EAAE;IACvB,IAAI,CAAC,GAAG,IAAI,CAAC,CAAC,KAAK,GAAG,GAAG,EAAE,CAAC;QAC1B,CAAC,CAAC,KAAK,GAAG,GAAG,CAAC;IAChB,CAAC;AACH,CAAC,CAAC,CAAC;AAEH,MAAM,cAAc,GAAG,QAAQ,CAAC,GAAG,EAAE,CAAC,CAAC;IACrC,QAAQ,EAAE,OAAgB;IAC1B,KAAK,EAAE,GAAG,CAAC,CAAC,KAAK,IAAI;IACrB,GAAG,EAAE,GAAG,CAAC,CAAC,KAAK,IAAI;IACnB,MAAM,EAAE,QAAQ,CAAC,KAAK,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,MAAM;IAC5C,MAAM,EAAE,GAAG;CACZ,CAAC,CAAC,CAAC;AACJ,MAAM,iBAAiB,GAAG,CAAC,MAAM,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC,eAAe,CAAC,EAC/D,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,wBAKkC,CAAC;IAEvC,0BAA0B;IAC1B,8BAA8B;IAC9B,IAAI,sCAGyG,CAAC;IAC9G,IAAI,SAAS,CAAC,SAAS,EAAE,CAAC;QAC1B,uBAAuB,CAAC,uBAAuB,CAAC,GAAG,EAAE,uBAAuB,CAAC,GAAG,CAAC,CAAC,EAAC,GAAG,EAAE,CAAC,cAAc,CAAC,EAAE,GAAG,EAAE,KAAK,EAAE,CAAC,gBAAgB,CAAC,EAAE,EAAE,GAAG,EAAE,KAAK,EAAE,CAAC,CAAC,SAAS,CAAC,cAAc,CAAC,CAAC,EAAE,GAAG,CAAC,CAAC;QAC3L,yDAAyD;QACzD,SAAS,CAAC,YAAY,CAAC;QACvB,uBAAuB,CAAC,uBAAuB,CAAC,GAAG,EAAE,uBAAuB,CAAC,GAAG,CAAC,CAAC,EAAC,GAAG,EAAE,WAAW,EAAE,CAAC,SAAS,CAAC,SAAS,CAAC,EAAC,EAAE,GAAG,EAAE,YAAY,EAAE,CAAC,SAAS,CAAC,SAAS,CAAC,EAAC,EAAE,GAAG,EAAE,KAAK,EAAE,CAAC,2EAA2E,CAAC,EAAE,GAAG,CAAC,CAAC;QACxQ,uBAAuB,CAAC,uBAAuB,CAAC,GAAG,EAAE,uBAAuB,CAAC,GAAG,CAAC,CAAC,EAAC,GAAG,EAAE,KAAK,EAAE,CAAC,yBAAyB,CAAC,EAAE,GAAG,CAAC,CAAC;QACjI,aAAa;QACb,CAAC,SAAS,EAAC,SAAS,EAAE,CAAC;QACvB,aAAa;QACb,MAAM,OAAO,GAAG,2BAA2B,CAAC,SAAS,EAAE,IAAI,SAAS,CAAC,EAAC,QAAQ,EAAE,CAAC,8BAA8B,CAAC,EAAE,OAAO,EAAE,CAAC,CAAC,IAAI,CAAC,CAAC,EAAE,QAAQ,EAAE,CAAC,UAAU,CAAC,EAAE,UAAU,EAAE,CAAC,CAAC,IAAI,CAAC,CAAC,EAAE,MAAM,EAAE,CAAC,QAAQ,CAAC,EAAE,IAAI,EAAE,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC;QACzN,MAAM,OAAO,GAAG,OAAO,CAAC,EAAC,QAAQ,EAAE,CAAC,8BAA8B,CAAC,EAAE,OAAO,EAAE,CAAC,CAAC,IAAI,CAAC,CAAC,EAAE,QAAQ,EAAE,CAAC,UAAU,CAAC,EAAE,UAAU,EAAE,CAAC,CAAC,IAAI,CAAC,CAAC,EAAE,MAAM,EAAE,CAAC,QAAQ,CAAC,EAAE,IAAI,EAAE,CAAC,IAAI,CAAC,GAAG,EAAE,GAAG,iCAAiC,CAAC,OAAO,CAAC,CAAC,CAAC;QAC1N,uBAAuB,CAAC,uBAAuB,CAAC,QAAQ,EAAE,uBAAuB,CAAC,QAAQ,CAAC,CAAC,EAAE,CAAC,CAAC;QAChG,CAAC;YACD,MAAM,EAAC,IAAI,EAAE,cAAc,EAAC,GAAG,iBAAiB,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC;QAChE,CAAC;QACD,uBAAuB,CAAC,uBAAuB,CAAC,QAAQ,EAAE,uBAAuB,CAAC,QAAQ,CAAC,CAAC,EAAE,CAAC,CAAC;QAChG,CAAC;YACD,MAAM,EAAC,WAAW,EAAE,cAAc,EAAC,GAAG,iBAAiB,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC;QACvE,CAAC;QACD,MAAM,OAAO,GAAG,gCAAgC,CAAC,SAAS,EAAE,OAAO,CAAC,CAAC;QACrE,aAAa;QACb,CAAC,SAAS,EAAE,CAAC;QACb,aAAa;QACb,MAAM,OAAO,GAAG,2BAA2B,CAAC,SAAS,EAAE,IAAI,SAAS,CAAC,EAAC,GAAG,EAAE,SAAS,EAAE,EAAS,EAAE,EAAE,KAAK,EAAE,CAAC,OAAO,CAAC,EAAE,IAAI,EAAE,CAAC,IAAI,CAAC,EAAE,OAAO,EAAE,CAAC,IAAI,CAAC,EAAE,QAAQ,EAAE,CAAC,MAAM,CAAC,EAAE,IAAI,EAAE,CAAC,CAAC,SAAS,CAAC,cAAc,CAAC,CAAC,EAAE,GAAG,EAAE,KAAK,EAAE,CAAC,CAAC,SAAS,CAAC,SAAS,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,EAAE,GAAG,CAAC,CAAC,CAAC;QACnR,MAAM,OAAO,GAAG,OAAO,CAAC,EAAC,GAAG,EAAE,SAAS,EAAE,EAAS,EAAE,EAAE,KAAK,EAAE,CAAC,OAAO,CAAC,EAAE,IAAI,EAAE,CAAC,IAAI,CAAC,EAAE,OAAO,EAAE,CAAC,IAAI,CAAC,EAAE,QAAQ,EAAE,CAAC,MAAM,CAAC,EAAE,IAAI,EAAE,CAAC,CAAC,SAAS,CAAC,cAAc,CAAC,CAAC,EAAE,GAAG,EAAE,KAAK,EAAE,CAAC,CAAC,SAAS,CAAC,SAAS,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,EAAE,GAAG,EAAE,GAAG,iCAAiC,CAAC,OAAO,CAAC,CAAC,CAAC;QACpR,IAAI,QAAyE,CAAC;QAC9E,MAAM,QAAQ,GASV;YACJ,OAAO,EAAE,CAAC,SAAS,CAAC,QAAQ,CAAC;SAAC,CAAC;QAC/B,IAAI,OAA6B,CAAC;QAClC,IAAI,OAA8C,CAAC;QACnD,MAAM,OAAO,GAAG,gCAAgC,CAAC,SAAS,EAAE,OAAO,CAAC,CAAC;QACrE,MAAM,QAAQ,GAAG,sCAAsC,CAAC,UAAU,CAAC;QACnE,mKAAmK;QACnK,aAAa;QACb,MAAM,QAAQ,GAAG,2BAA2B,CAAC,QAAQ,EAAE,IAAI,QAAQ,CAAC,EAAC,IAAI,EAAE,CAAC,YAAY,CAAC,GAAG,CAAC,CAAC,CAAC;QAC/F,MAAM,QAAQ,GAAG,QAAQ,CAAC,EAAC,IAAI,EAAE,CAAC,YAAY,CAAC,GAAG,EAAE,GAAG,iCAAiC,CAAC,QAAQ,CAAC,CAAC,CAAC;QACpG,IAAI,SAAS,CAAC,SAAS,EAAE,CAAC;YAC1B,uBAAuB,CAAC,uBAAuB,CAAC,GAAG,EAAE,uBAAuB,CAAC,GAAG,CAAC,CAAC,EAAC,GAAG,EAAE,KAAK,EAAE,CAAC,0FAA0F,CAAC,EAAE,GAAG,CAAC,CAAC;YAClM,uBAAuB,CAAC,uBAAuB,CAAC,EAAE,EAAE,uBAAuB,CAAC,EAAE,CAAC,CAAC,EAAC,GAAG,EAAE,KAAK,EAAE,CAAC,0CAA0C,CAAC,EAAE,GAAG,CAAC,CAAC;YAChJ,uBAAuB,CAAC,uBAAuB,CAAC,CAAC,EAAE,uBAAuB,CAAC,CAAC,CAAC,CAAC,EAAC,GAAG,EAAE,KAAK,EAAE,CAAC,4BAA4B,CAAC,EAAE,GAAG,CAAC,CAAC;YAChI,uBAAuB,CAAC,uBAAuB,CAAC,CAAC,EAAE,uBAAuB,CAAC,CAAC,CAAC,CAAC,EAAC,GAAG,EAAE,KAAK,EAAE,CAAC,uBAAuB,CAAC,EAAE,GAAG,CAAC,CAAC;YAC3H,uBAAuB,CAAC,uBAAuB,CAAC,GAAG,EAAE,uBAAuB,CAAC,GAAG,CAAC,CAAC,EAAC,GAAG,EAAE,KAAK,EAAE,CAAC,iBAAiB,CAAC,EAAE,GAAG,CAAC,CAAC;YACzH,aAAa;YACb,CAAC,SAAS,EAAC,SAAS,EAAE,CAAC;YACvB,aAAa;YACb,MAAM,QAAQ,GAAG,2BAA2B,CAAC,SAAS,EAAE,IAAI,SAAS,CAAC,EAAC,GAAG,EAAE,SAAS,EAAE,EAAS,EAAE,EAAE,KAAK,EAAE,CAAC,SAAS,CAAC,EAAE,IAAI,EAAE,CAAC,IAAI,CAAC,EAAE,QAAQ,EAAE,CAAC,SAAS,CAAC,EAAE,IAAI,EAAE,CAAC,CAAC,SAAS,CAAC,SAAS,CAAC,CAAC,EAAE,OAAO,EAAE,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC;YACjN,MAAM,QAAQ,GAAG,QAAQ,CAAC,EAAC,GAAG,EAAE,SAAS,EAAE,EAAS,EAAE,EAAE,KAAK,EAAE,CAAC,SAAS,CAAC,EAAE,IAAI,EAAE,CAAC,IAAI,CAAC,EAAE,QAAQ,EAAE,CAAC,SAAS,CAAC,EAAE,IAAI,EAAE,CAAC,CAAC,SAAS,CAAC,SAAS,CAAC,CAAC,EAAE,OAAO,EAAE,CAAC,IAAI,CAAC,GAAG,EAAE,GAAG,iCAAiC,CAAC,QAAQ,CAAC,CAAC,CAAC;YACpN,IAAI,QAA2E,CAAC;YAChF,MAAM,QAAQ,GASV;gBACJ,OAAO,EAAE,CAAC,GAAG,CAAC,MAAM,CAAC,EAAE,EAAE;oBACzB,IAAI,CAAC,CAAC,CAAC,SAAS,CAAC,SAAS,CAAC,CAAC;wBAAE,OAAO;oBACrC,IAAI,CAAC,CAAC,CAAC,SAAS,CAAC,SAAS,CAAC,CAAC;wBAAE,OAAO;oBACrC,SAAS,CAAC,SAAS,GAAG,KAAK,CAAC;gBAC5B,CAAC;aAAC,CAAC;YACH,IAAI,QAA+B,CAAC;YACpC,IAAI,QAAgD,CAAC;YACrD,iBAAiB,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC,OAAO,CAAC;YAC1C,MAAM,QAAQ,GAAG,gCAAgC,CAAC,SAAS,EAAE,QAAQ,CAAC,CAAC;QACvE,CAAC;QACD,iBAAiB,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC,OAAO,CAAC;QAC1C,MAAM,QAAQ,GAAG,gCAAgC,CAAC,QAAQ,EAAE,QAAQ,CAAC,CAAC;IACtE,CAAC;IACD,wBAAwB,CAAC,gBAAgB,CAAC,CAAC;IAC3C,wBAAwB,CAAC,MAAM,CAAC,CAAC;IACjC,wBAAwB,CAAC,cAAc,CAAC,CAAC;IACzC,wBAAwB,CAAC,iBAAiB,CAAC,CAAC;IAC5C,wBAAwB,CAAC,eAAe,CAAC,CAAC;IAC1C,wBAAwB,CAAC,MAAM,CAAC,CAAC;IACjC,wBAAwB,CAAC,UAAU,CAAC,CAAC;IACrC,wBAAwB,CAAC,aAAa,CAAC,CAAC;IACxC,wBAAwB,CAAC,MAAM,CAAC,CAAC;IACjC,wBAAwB,CAAC,cAAc,CAAC,CAAC;IACzC,wBAAwB,CAAC,OAAO,CAAC,CAAC;IAClC,wBAAwB,CAAC,MAAM,CAAC,CAAC;IACjC,wBAAwB,CAAC,MAAM,CAAC,CAAC;IACjC,wBAAwB,CAAC,MAAM,CAAC,CAAC;IACjC,wBAAwB,CAAC,iBAAiB,CAAC,CAAC;IAC5C,wBAAwB,CAAC,QAAQ,CAAC,CAAC;IACnC,wBAAwB,CAAC,iBAAiB,CAAC,CAAC;IAC5C,wBAAwB,CAAC,cAAc,CAAC,CAAC;IACzC,wBAAwB,CAAC,YAAY,CAAC,CAAC;IACvC,wBAAwB,CAAC,YAAY,CAAC,CAAC;IACvC,wBAAwB,CAAC,MAAM,CAAC,CAAC;IACjC,wBAAwB,CAAC,SAAS,CAAC,CAAC;IACpC,wBAAwB,CAAC,eAAe,CAAC,CAAC;IAC1C,wBAAwB,CAAC,eAAe,CAAC,CAAC;IAC1C,wBAAwB,CAAC,MAAM,CAAC,CAAC;IACjC,wBAAwB,CAAC,SAAS,CAAC,CAAC;IACpC,wBAAwB,CAAC,eAAe,CAAC,CAAC;IAC1C,wBAAwB,CAAC,SAAS,CAAC,CAAC;IACpC,wBAAwB,CAAC,eAAe,CAAC,CAAC;IAC1C,wBAAwB,CAAC,MAAM,CAAC,CAAC;IACjC,wBAAwB,CAAC,YAAY,CAAC,CAAC;IAEvC,IAAI,WACH,CAAC;IACF,IAAI,oBAAyB,CAAC;IAC9B,MAAM,UAAU,GAAG;QACnB,cAAc,EAAE,oBAAoB,CAAC,KAAK,CAAC;KAC1C,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,SAAS,EAAE,SAA6B;YACxC,cAAc,EAAE,cAAuC;YACvD,SAAS,EAAE,SAA6B;YACxC,SAAS,EAAE,SAA6B;YACxC,YAAY,EAAE,YAAmC;YACjD,QAAQ,EAAE,QAA2B;YACrC,SAAS,EAAE,SAA6B;YACxC,cAAc,EAAE,cAAuC;SACtD,CAAC;IACF,CAAC;CACA,CAAC,CAAC;AAEH,eAAe,CAAC,MAAM,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC,eAAe,CAAC;IACrD,KAAK;QACL,OAAO,EACN,CAAC;IACF,CAAC;CACA,CAAC,CAAC;AACH,CAAC"}

package/src/components/dropdown/EUIMultiDropdown.stories.ts

@@ -0,0 +1,294 @@
+import { defineComponent } from "vue";
+import { Meta, StoryFn } from "@storybook/vue3";
+import EUIMultiDropdown from "./EUIMultiDropdown.vue";
+import ChevronDownStroke from "../../assets/svg/ChevronDownStroke.vue";
+
+export default {
+  title: "Components/MultiDropdown",
+  tags: ["autodocs"],
+  component: EUIMultiDropdown,
+  argTypes: {
+    title: {
+      description: "The title of the dropdown menu.",
+      control: { type: "text" },
+      defaultValue: "My Students",
+    },
+    className: {
+      description: "Additional classes to apply to the dropdown button.",
+      control: { type: "text" },
+    },
+    menuItems: {
+      description: "An array of menu items, with optional submenus.",
+      control: { type: "object" },
+      defaultValue: [
+        { text: "All Students" },
+        { text: "My Students" },
+        { text: "Genie Completed Students" },
+        {
+          text: "Standard Filter",
+          subMenu: [
+            { text: "UKI Fair" },
+            { text: "Germany Q4' 24" },
+            { text: "Edvoy Express" },
+            { text: "Q1 2025 Pipeline" },
+          ],
+        },
+        {
+          text: "Custom Filter",
+          subMenu: [{ text: "Application Intakes" }, { text: "New Students" }],
+        },
+      ],
+    },
+    disabled: {
+      control: "boolean",
+      description: "Disables the Menu, making it uneditable and unclickable.",
+    },
+  },
+} as Meta;
+
+const Template: StoryFn = (args) =>
+  defineComponent({
+    components: { EUIMultiDropdown, ChevronDownStroke },
+    setup() {
+      const handleMenuItem = (_item: any) => {
+        // console.log("Menu clicked:", _item);
+      };
+
+      const handleSubMenuItem = (_subItem: any) => {
+        // console.log("Submenu item clicked:", _subItem);
+      };
+
+      return { args, handleMenuItem, handleSubMenuItem };
+    },
+    template: `<div class="min-h-96">
+    <EUIMultiDropdown v-bind="args" v-bind="args" @menuItem="handleMenuItem" @subMenuItem="handleSubMenuItem" /></div>`,
+  });
+
+export const Default = Template.bind({});
+Default.args = {
+  title: "My Students",
+  className: "",
+  menuItems: [
+    { text: "All Students" },
+    { text: "My Students" },
+    { text: "Genie Completed Students" },
+    {
+      text: "Standard Filter",
+      subMenu: [
+        { text: "UKI Fair" },
+        { text: "Germany Q4' 24" },
+        { text: "Edvoy Express" },
+        { text: "Q1 2025 Pipeline" },
+      ],
+    },
+    {
+      text: "Custom Filter",
+      subMenu: [{ text: "Application Intakes" }, { text: "New Students" }],
+    },
+  ],
+};
+
+export const UseTemplate = Template.bind({});
+(UseTemplate.args = {
+  title: "My Students",
+  className:
+    "px-3 py-2 text-gray-700 hover:text-gray-900 bg-white rounded-md focus:bg-violet-100 group focus:outline-none focus:ring-2 focus:ring-violet-400 focus:ring-opacity-100 hover:bg-gray-100 active:bg-violet-200",
+  menuItems: [
+    { text: "All Students" },
+    { text: "My Students" },
+    { text: "Genie Completed Students" },
+    {
+      text: "Standard Filter",
+      subMenu: [
+        { text: "UKI Fair" },
+        { text: "Germany Q4' 24" },
+        { text: "Edvoy Express" },
+        { text: "Q1 2025 Pipeline" },
+      ],
+    },
+    {
+      text: "Custom Filter",
+      subMenu: [{ text: "Application Intakes" }, { text: "New Students" }],
+    },
+  ],
+}),
+  (UseTemplate.parameters = {
+    docs: {
+      source: {
+        code: `<script lang="ts" setup>
+        const menuItems = [
+  {
+    "text": "All Students"
+  },
+  {
+    "text": "My Students"
+  },
+  {
+    "text": "Genie Completed Students"
+  },
+  {
+    "text": "Standard Filter",
+    "subMenu": [
+      {
+        "text": "UKI Fair"
+      },
+      {
+        "text": "Germany Q4' 24"
+      },
+      {
+        "text": "Edvoy Express"
+      },
+      {
+        "text": "Q1 2025 Pipeline"
+      }
+    ]
+  },
+  {
+    "text": "Custom Filter",
+    "subMenu": [
+      {
+        "text": "Application Intakes"
+      },
+      {
+        "text": "New Students"
+      }
+    ]
+  }
+];
+
+const handleMenuItem = (item: any) => {
+  console.log("Menu clicked:", item);
+};
+
+const handleSubMenuItem = (subItem: any) => {
+  console.log("Submenu item clicked:", subItem);
+};
+</script>
+<template>
+  <EUIMultiDropdown :menu-items="menuItems" @menuItem="handleMenuItem" @subMenuItem="handleSubMenuItem">
+    <template #dropdownName="{ open }">
+      <span>{{ title }}</span>
+      <ChevronDownStroke
+        :class="open ? 'text-gray-900 rotate-180' : 'text-gray-500'"
+        class="transition duration-100 ease-in-out transform rotate-0 size-6 group-hover:text-opacity-80"
+        aria-hidden="true"
+      />
+    </template>
+    <template #menu="{menuitem}">
+      {{menuitem.text}}
+    </template>
+    <template #submenu="{subItem}">
+      {{subItem.text}}
+    </template>
+  </EUIMultiDropdown>
+</template>`,
+      },
+    },
+  });
+
+export const UseActionitem = Template.bind({});
+(UseActionitem.args = {
+  title: "My Students",
+  className:
+    "px-3 py-2 text-gray-700 hover:text-gray-900 bg-white rounded-md focus:bg-violet-100 group focus:outline-none focus:ring-2 focus:ring-violet-400 focus:ring-opacity-100 hover:bg-gray-100 active:bg-violet-200",
+  menuItems: [
+    { text: "All Students" },
+    { text: "My Students" },
+    { text: "Genie Completed Students" },
+    {
+      text: "Standard Filter",
+      subMenu: [
+        { text: "UKI Fair" },
+        { text: "Germany Q4' 24" },
+        { text: "Edvoy Express" },
+        { text: "Q1 2025 Pipeline" },
+      ],
+    },
+    {
+      text: "Custom Filter",
+      subMenu: [{ text: "Application Intakes" }, { text: "New Students" }],
+      enableAction: true,
+    },
+  ],
+}),
+  (UseActionitem.parameters = {
+    docs: {
+      source: {
+        code: `<script lang="ts" setup>
+        const menuItems = [
+  {
+    "text": "All Students"
+  },
+  {
+    "text": "My Students"
+  },
+  {
+    "text": "Genie Completed Students"
+  },
+  {
+    "text": "Standard Filter",
+    "subMenu": [
+      {
+        "text": "UKI Fair"
+      },
+      {
+        "text": "Germany Q4' 24"
+      },
+      {
+        "text": "Edvoy Express"
+      },
+      {
+        "text": "Q1 2025 Pipeline"
+      }
+    ]
+  },
+  {
+    "text": "Custom Filter",
+    "subMenu": [
+      {
+        "text": "Application Intakes"
+      },
+      {
+        "text": "New Students"
+      }
+    ],
+    "enableAction": true,
+  }
+];
+
+const handleMenuItem = (item: any) => {
+  console.log("Menu clicked:", item);
+};
+
+const handleSubMenuItem = (subItem: any) => {
+  console.log("Submenu item clicked:", subItem);
+};
+
+const addAction = (e:Event) => {
+  console.log("Action Item clicked:" + e)
+}
+</script>
+<template>
+  <EUIMultiDropdown :menu-items="menuItems" @menuItem="handleMenuItem" @subMenuItem="handleSubMenuItem" @action-item="addAction">
+    <template #dropdownName="{ open }">
+      <span>{{ title }}</span>
+      <ChevronDownStroke
+        :class="open ? 'text-gray-900 rotate-180' : 'text-gray-500'"
+        class="transition duration-100 ease-in-out transform rotate-0 size-6 group-hover:text-opacity-80"
+        aria-hidden="true"
+      />
+    </template>
+    <template #menu="{menuitem}">
+      {{menuitem.text}}
+    </template>
+    <template #actionName>
+        + Add Custom Filter
+    </template>
+    <template #submenu="{subItem}">
+      {{subItem.text}}
+    </template>
+  </EUIMultiDropdown>
+</template>`,
+      },
+    },
+  });

package/src/components/dropdown/EUIMultiDropdown.vue

@@ -0,0 +1,174 @@
+<template>
+  <div class="relative">
+    <!-- Main Dropdown Button -->
+    <button
+      type="button"
+      ref="dropdownButton"
+      :class="[
+        'inline-flex items-center text-sm font-semibold gap-x-2 capitalize outline-none focus:outline-none',
+        className,
+      ]"
+      :disabled="disabled"
+      @click="toggleDropdown()"
+    >
+      <slot name="dropdownName" :open="isOpen">
+        {{ title }}
+        <component :is="isSolidArrow ? ChevronDownStrokeSolid : ChevronDownStroke" :class="isOpen ? 'text-gray-900 rotate-180' : 'text-gray-500'"
+          class="transition duration-100 ease-in-out transform rotate-0 size-6 group-hover:text-opacity-80"
+          aria-hidden="true" />
+      </slot>
+    </button>
+    <!-- Menu lists -->
+    <div
+      v-if="isOpen && menuItems.length"
+      :class="[
+        'absolute left-0 z-0 p-2 mt-1 transition-all duration-300 ease-in-out bg-white border border-gray-200 border-solid rounded-lg shadow-2xl  shadow-gray-300 min-w-32 max-w-64 w-max',
+        placement === 'top' ? 'bottom-full' : 'top-full',
+        dropdownClass,
+      ]"
+      @click.stop
+    >
+      <div
+        v-for="item in menuItems"
+        :key="item.text"
+        class="relative flex items-center px-4 py-2 rounded-lg cursor-pointer hover:bg-gray-100"
+        @mouseenter="setActiveMenuItem(item.text)"
+        @mouseleave="clearActiveMenuItem"
+        @click.stop="$emit('menuItem', item)"
+      >
+        <div
+          class="flex items-center justify-between w-full gap-2 text-sm font-medium text-gray-800 break-words hover:text-gray-900"
+        >
+          <slot name="menu" :menuitem="item">
+            {{ item.text }}
+            <ChevronDownStroke
+              v-if="item.subMenu"
+              :class="
+                activeMenuItem === item.text
+                  ? 'text-gray-900 -rotate-90'
+                  : 'text-gray-500 rotate-0'
+              "
+              class="ml-auto transition duration-300 ease-in-out transform size-6 group-hover:text-opacity-80"
+              aria-hidden="true"
+            />
+          </slot>
+        </div>
+
+        <!-- Sub-menu lists-->
+        <div
+          v-if="item.subMenu && activeMenuItem === item.text"
+          class="absolute top-0 z-10 transition-all duration-300 ease-in-out left-full min-w-32 max-w-64 w-max"
+        >
+          <div
+            class="bg-white border border-gray-200 border-solid rounded-lg shadow-2xl ms-2 shadow-gray-300"
+          >
+            <div
+              v-if="item.enableAction"
+              class="flex items-center justify-center w-full gap-1 px-6 py-3 text-sm font-medium text-gray-900 bg-purple-100 rounded-t-md"
+              @click.prevent="$emit('actionItem', 'action')"
+            >
+              <slot name="actionName">{{ "+ Action Name" }}</slot>
+            </div>
+            <div
+              class="p-2 overflow-y-auto overscroll-auto max-h-[50svh] min-h-0 scrollbar--thin"
+            >
+              <div
+                v-for="subItem in item.subMenu"
+                :key="subItem.text"
+                class="flex items-center justify-between gap-2 px-3 py-2 text-sm font-medium text-gray-700 rounded-lg cursor-pointer hover:bg-gray-100 hover:text-gray-900"
+                @click.stop="$emit('subMenuItem', subItem)"
+              >
+                <slot name="submenu" :subItem="subItem">
+                  {{ subItem.text }}
+                </slot>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, defineProps, PropType } from "vue";
+import { onClickOutside } from "@vueuse/core";
+import ChevronDownStroke from "../../assets/svg/ChevronDownStroke.vue";
+import ChevronDownStrokeSolid from "../../assets/svg/ChevronDownStrokeSolid.vue";
+
+interface MenuItem {
+  text: string;
+  subMenu?: MenuItem[];
+  enableAction?: boolean;
+}
+
+defineProps({
+  title: {
+    type: String,
+    default: "My Students",
+  },
+  className: {
+    type: String,
+    required: false,
+  },
+  dropdownClass: {
+    type: String,
+    required: false,
+  },
+  isSolidArrow: {
+    type: Boolean,
+    default: false,
+  },
+  menuItems: {
+    type: Array as PropType<MenuItem[]>,
+    default: () => [
+      { text: "All Students" },
+      { text: "My Students" },
+      { text: "Genie Completed Students" },
+      {
+        text: "Standard Filter",
+        subMenu: [
+          { text: "UKI Fair" },
+          { text: "Germany Q4' 24" },
+          { text: "Edvoy Express" },
+          { text: "Q1 2025 Pipeline" },
+        ],
+      },
+      {
+        text: "Custom Filter",
+        subMenu: [{ text: "Application Intakes" }, { text: "New Students" }],
+        enableAction: true,
+      },
+    ],
+  },
+  disabled: Boolean,
+  placement: {
+    type: String as PropType<"top" | "bottom">,
+    default: "bottom",
+  },
+});
+
+const isOpen = ref(false);
+const activeMenuItem = ref<string | null>(null);
+const dropdownButton = ref<HTMLElement | null>(null);
+
+defineEmits(["subMenuItem", "menuItem", "actionItem"]);
+
+const toggleDropdown = () => {
+  isOpen.value = !isOpen.value;
+};
+
+const setActiveMenuItem = (text: string) => {
+  activeMenuItem.value = text;
+};
+
+const clearActiveMenuItem = () => {
+  activeMenuItem.value = null;
+};
+
+onClickOutside(dropdownButton, () => {
+  isOpen.value = false;
+});
+</script>
+
+<style lang="scss" scoped></style>