edvoyui-component-library-test-flight 0.0.183 → 0.0.185

package/src/components/dragModal/EUIDrag.vue

@@ -1,179 +0,0 @@
-<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

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

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

@@ -1,294 +0,0 @@
-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

@@ -1,187 +0,0 @@
-<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 z-0 p-2 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',
-        mainDropdownClasses,
-        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 min-w-32 max-w-64 w-max', placement === 'right' ? 'right-full' : 'left-full']"
-        >
-          <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, computed } 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;
-}
-
-const props = 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" | "left" | "right">,
-    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;
-});
-
-const mainDropdownClasses = computed(() => {
-  switch (props.placement) {
-    case 'top':
-      return 'bottom-full left-0 mb-1';
-    case 'left':
-      return 'right-full top-0 me-1'; // me-1 is margin-end for spacing
-    case 'right':
-      return 'left-full top-0 ms-1'; // ms-1 is margin-start for spacing
-    default: // 'bottom'
-      return 'top-full left-0 mt-1';
-  }
-});
-</script>
-
-<style lang="scss" scoped></style>