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

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/dropdown/EUIMultiDropdown.vue

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

package/src/components/errorMessage/EUIErrorMessage.vue

@@ -1,25 +0,0 @@
-<template>
-  <template v-if="Array.isArray(errors)">
-    <div class="text-red-500 text-xs font-medium first-letter:uppercase">
-      {{ errors?.at(0)?.$message ? errors?.at(0)?.$message : errors.at(0) }}
-    </div>
-  </template>
-  <template v-else>
-    <div class="text-red-500 text-xs font-medium first-letter:uppercase">
-      {{ name ? errors?.[name] : errors }}
-    </div>
-  </template>
-</template>
-
-<script setup lang="ts">
-import { PropType, toRefs } from "vue";
-import { ValidationErrors, ErrorObject } from "../../utils/types";
-const props = defineProps({
-  name: { type: String, required: true },
-  errors: {
-    type: Object as PropType<ValidationErrors | ErrorObject[]>,
-    required: true,
-  }
-});
-const { errors, name } = toRefs(props);
-</script>

package/src/components/input/EUIInput.vue

@@ -1,223 +0,0 @@
-<template>
-  <div>
-    <label
-      v-if="!inputFilled && label"
-      :for="`${name}-${id}`"
-      :class="[
-        'text-xs w-full text-gray-500 cursor-pointer font-medium',
-        required && `after:content-['*'] after:ml-0.5 after:text-red-500`,
-      ]"
-    >
-      {{ label }}
-    </label>
-    <div
-      :class="[
-        'relative',
-        { 'pointer-events-none cursor-not-allowed': disabled },
-        {
-          'h-14 rounded-2xl focus-within:border-purple-600 focus-within:ring-1 focus-within:ring-purple-600 border border-gray-200':
-            inputFilled,
-        },
-        'group cursor-pointer relative w-full mb-2 overflow-hidden',
-      ]"
-    >
-      <button
-        v-if="type === 'search'"
-        :class="inputValue ? 'absolute inset-y-0 right-3' : 'hidden'"
-        @click="emit('update:modelValue', '')"
-      >
-        <svg
-          xmlns="http://www.w3.org/2000/svg"
-          fill="none"
-          viewBox="0 0 24 24"
-          stroke-width="1.5"
-          stroke="currentColor"
-          class="size-5"
-        >
-          <path
-            stroke-linecap="round"
-            stroke-linejoin="round"
-            d="M6 18 18 6M6 6l12 12"
-          />
-        </svg>
-      </button>
-      <label
-        v-if="inputFilled"
-        :for="`${name}-${id}`"
-        :class="[
-          getIconClass(),
-          inputValue
-            ? 'top-3.5 text-xs text-gray-400 leading-none cursor-default'
-            : 'top-1/2 text-sm w-full text-gray-700 cursor-pointer h-14 pt-5 pb-4',
-          disabled ? 'cursor-not-allowed bg-gray-50 z-10' : 'z-0 bg-white',
-          required && `after:content-['*'] after:ml-0.5 after:text-red-500`,
-          'absolute font-medium left-0 px-4 -translate-y-1/2 duration-300 group-focus-within:top-3.5 group-focus-within:text-xs group-focus-within:text-gray-400 rounded-2xl group-focus-within:bg-transparent group-focus-within:-translate-y-1/2 group-focus-within:ring-transparent group-focus-within:h-auto group-focus-within:py-0 first-letter:capitalize transition-all ease-in-out',
-        ]"
-      >
-        {{ label || "Label" }}
-      </label>
-      <div
-        v-if="icon && iconType"
-        :class="[
-          'absolute inset-y-0 flex items-center pointer-events-none',
-          iconType === 'startIcon' ? 'left-0 pl-3' : 'right-0 pr-3',
-          disabled ? 'z-20' : '',
-        ]"
-      >
-        <component :is="icon" class="text-gray-400 size-6" aria-hidden="true" />
-      </div>
-      <input
-        :id="`${name}-${id}`"
-        ref="input"
-        :type="type === 'search' ? 'text' : type"
-        :value="modelValue"
-        :placeholder="placeholder"
-        :name="name"
-        :class="[
-          'z-10 block placeholder:text-gray-400 focus:outline-none text-sm font-medium appearance-none disabled:opacity-75 autofill:bg-white leading-6 transition-all duration-100 border-none outline-none',
-          inputFilled
-            ? 'pt-6 pb-3 rounded-2xl size-full'
-            : 'py-3 h-10 w-full ring-1 ring-gray-200 focus-within:ring-purple-600 focus-within:ring-2 ring-inset',
-          !inputFilled && rounded ? 'rounded-2xl' : 'rounded-md',
-          disabled ? 'cursor-not-allowed' : 'cursor-text',
-          getIconClass(),
-          !inputFilled && className,
-          'pr-8'
-        ]"
-        :required="required"
-        :disabled="disabled"
-        :readonly="readonly"
-        autocomplete="off"
-        @input="emitInput"
-        @focus="hasFocus = true"
-        @blur="hasFocus = false"
-      />
-    </div>
-    <template v-if="errors && Object.keys(errors).length">
-      <EUIErrorMessage :errors="errors" :name="name" />
-    </template>
-  </div>
-</template>
-
-<script lang="ts" setup>
-import EUIErrorMessage from "../errorMessage/EUIErrorMessage.vue";
-import {
-  defineProps,
-  defineEmits,
-  computed,
-  PropType,
-  ref,
-  onMounted,
-} from "vue";
-
-const props = defineProps({
-  errors: { type: Object, required: false, default: () => {} },
-  type: {
-    type: String as PropType<
-      "text" | "number" | "email" | "password" | "search" | "date" | "url"
-    >,
-    default: "text",
-  },
-  modelValue: {
-    type: [String, Number],
-    default: "",
-  },
-  name: {
-    type: String,
-    required: false,
-    default: "",
-  },
-  label: {
-    type: String,
-    required: true,
-    default: "",
-  },
-  autoFocus: {
-    type: Boolean,
-    required: false,
-    default: false,
-  },
-  placeholder: {
-    type: String,
-    required: false,
-    default: "",
-  },
-  iconType: {
-    type: String as PropType<"startIcon" | "endIcon">,
-    default: "",
-  },
-  icon: {
-    type: [Object, String],
-    default: "",
-  },
-  disabled: {
-    type: Boolean,
-    default: false,
-  },
-  required: {
-    type: Boolean,
-    default: false,
-  },
-  readonly: {
-    type: Boolean,
-    default: false,
-  },
-  inputFilled: {
-    type: Boolean,
-    default: false,
-  },
-  rounded: Boolean,
-  className: {
-    type: Array as PropType<string[]>,
-    required: false,
-    default: () => [],
-  },
-});
-
-const hasFocus = ref(false);
-const input = ref<HTMLInputElement>();
-
-const id = "id"; //generateUID();
-
-const emit = defineEmits(["update:modelValue"]);
-const emitInput = (event: Event) => {
-  const newValue = (event?.target as HTMLInputElement)?.value;
-  if (newValue !== undefined) {
-    emit("update:modelValue", newValue);
-  }
-};
-
-const inputValue = computed(() => {
-  return props.modelValue === 0 ? true : !!props.modelValue;
-});
-
-const getIconClass = () => {
-  switch (props.iconType) {
-    case "startIcon":
-      return "pl-12 pr-4";
-    case "endIcon":
-      return "pr-12 pl-4";
-    default:
-      return "px-4";
-  }
-};
-
-onMounted(() => {
-  if (props?.autoFocus) {
-    input?.value?.focus();
-  }
-});
-</script>
-
-<style lang="scss" scoped>
-/* Chrome, Safari, Edge, Opera */
-input::-webkit-outer-spin-button,
-input::-webkit-inner-spin-button {
-  -webkit-appearance: none;
-  margin: 0;
-}
-/* Firefox */
-input[type="number"] {
-  -moz-appearance: textfield;
-}
-</style>