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

package/src/components/modal/EUIModal.vue

@@ -1,224 +0,0 @@
-<template>
-  <Teleport defer to="body">
-    <Transition name="modal" appear>
-      <div
-        v-if="isVisible"
-        class="fixed z-50 flex flex-col items-center justify-end inset-2 modal-wrapper"
-        :class="[
-          placement === 'top'
-            ? 'sm:justify-start'
-            : placement === 'bottom'
-            ? 'sm:justify-end'
-            : 'sm:justify-center',
-        ]"
-        @click.self="closeModal"
-      >
-        <div
-          class="backdrop fixed inset-0 z-[-1] w-screen h-screen bg-black/50 pointer-events-none overflow-hidden"
-        ></div>
-        <div
-          :class="[
-            'bg-white shadow-lg w-full overflow-hidden relative flex flex-col justify-between modal-container',
-            slideClass,
-            roundedClass !== '' ? roundedClass : 'rounded-t-3xl md:rounded-2xl',
-            size === 'full'
-              ? 'h-full max-h-svh'
-              : 'max-h-[calc(100svh-3rem)] md:h-auto',
-          ]"
-        >
-          <template v-if="$slots.header">
-            <slot name="header"></slot>
-          </template>
-          <div
-            v-else
-            class="flex flex-row items-center justify-between font-medium text-gray-700"
-            :class="slimHeader ? 'p-4 text-base' : 'p-6 text-lg'"
-          >
-            <h3 class="text-xl font-semibold">
-              <slot name="title">{{ title || "Modal Title" }}</slot>
-            </h3>
-            <div v-if="visibleClose" class="flex-initial">
-              <button
-                type="button"
-                class="flex items-center justify-center text-gray-400 bg-white hover:bg-gray-50 rounded-3xl hover:text-gray-600 size-8"
-                @click="closeModal"
-              >
-                <span class="sr-only">Close</span>
-                <svg
-                  xmlns="http://www.w3.org/2000/svg"
-                  fill="none"
-                  viewBox="0 0 24 24"
-                  stroke-width="2"
-                  stroke="currentColor"
-                  aria-hidden="true"
-                  class="w-5 h-5"
-                >
-                  <path
-                    stroke-linecap="round"
-                    stroke-linejoin="round"
-                    d="M6 18L18 6M6 6l12 12"
-                  ></path>
-                </svg>
-              </button>
-            </div>
-          </div>
-
-          <template v-if="$slots.content">
-            <slot name="content"></slot>
-          </template>
-          <div
-            v-else
-            class="p-4 border-t border-b border-gray-200 max-h-[calc(100svh-3rem)] flex-1"
-          >
-            <slot></slot>
-          </div>
-
-          <template v-if="$slots.footer">
-            <slot name="footer"></slot>
-          </template>
-          <div
-            v-else
-            class="sticky bottom-0 flex items-center justify-end float-none p-4 space-x-2"
-          >
-            <button
-              @click="closeModal"
-              class="px-4 py-2 text-base font-semibold tracking-wide text-gray-600 transition-colors duration-75 bg-white rounded-md hover:bg-gray-100"
-            >
-              Cancel
-            </button>
-            <button
-              @click="$emit('confirm')"
-              class="px-4 py-2 text-base font-semibold tracking-wide text-white transition-colors duration-75 bg-purple-600 rounded-md hover:bg-purple-700"
-            >
-              Confirm
-            </button>
-          </div>
-        </div>
-      </div>
-    </Transition>
-  </Teleport>
-</template>
-
-<script lang="ts">
-import {
-  defineComponent,
-  onMounted,
-  onUnmounted,
-  watch,
-  computed,
-  type PropType,
-} from "vue";
-
-export default defineComponent({
-  name: "Modal",
-  props: {
-    isVisible: {
-      type: Boolean,
-      default: false,
-    },
-    slimHeader: {
-      type: Boolean,
-      default: false,
-    },
-    title: {
-      type: String,
-      default: "",
-    },
-    roundedClass: {
-      type: String,
-      default: "",
-    },
-    visibleClose: {
-      type: Boolean,
-      default: true,
-    },
-    persistent: {
-      type: Boolean,
-      default: false,
-    },
-    size: {
-      type: String as PropType<"xs" | "sm" | "md" | "lg" | "xl" | "full">,
-      default: "sm",
-    },
-    placement: {
-      type: String as PropType<"center" | "bottom" | "top">,
-      default: "center",
-    },
-  },
-  emits: ["update:isVisible", "confirm"],
-  setup(props, { emit }) {
-    const slideClass = computed(() => {
-      const sizeClass = {
-        full: "max-w-screen",
-        xl: "max-w-screen-lg min-w-[100svw] sm:min-w-[1024px]",
-        lg: "max-w-2xl min-w-[100svw] sm:min-w-[42rem]",
-        md: "max-w-xl min-w-[100svw] sm:min-w-[36rem]",
-        sm: "max-w-lg min-w-[100svw] sm:min-w-[32rem]",
-        xs: "max-w-md min-w-[100svw] sm:min-w-[28rem]",
-      };
-
-      const slideWidth = sizeClass[props.size];
-      return slideWidth;
-    });
-
-    // Methods
-    const closeModal = () => {
-      if (!props.persistent) {
-        emit("update:isVisible", false);
-      }
-    };
-    const handleKeydown = (event: KeyboardEvent) => {
-      if (event.key === "Escape" && props.isVisible && !props.persistent) {
-        closeModal();
-      }
-    };
-    // Watcher for body scroll lock
-    watch(
-      () => props.isVisible,
-      (newVal) => {
-        document.body.style.overflow = newVal ? "hidden" : "";
-      }
-    );
-    // Lifecycle hooks
-    onMounted(() => {
-      window.addEventListener("keydown", handleKeydown);
-    });
-
-    onUnmounted(() => {
-      document.body.style.overflow = ""; // Reset scroll when modal unmounts
-      window.removeEventListener("keydown", handleKeydown);
-    });
-    return {
-      closeModal,
-      slideClass,
-    };
-  },
-});
-</script>
-
-<style lang="scss" scoped>
-.modal-enter-active,
-.modal-leave-active {
-  transition: opacity 0.3s ease, transform 0.3s ease;
-}
-.modal-enter-from,
-.modal-leave-to {
-  @apply opacity-0;
-}
-.modal-enter-to,
-.modal-leave-from {
-  @apply opacity-100;
-}
-
-.backdrop {
-  transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1);
-}
-.modal-enter-from .backdrop,
-.modal-leave-to .backdrop {
-  @apply opacity-0;
-}
-.modal-enter-to .backdrop,
-.modal-leave-from .backdrop {
-  @apply opacity-100;
-}
-</style>

package/src/components/pillSelect/EUIPillSelect.vue

@@ -1,149 +0,0 @@
-<template>
-  <div>
-    <p v-if="label" class="mb-3 text-sm font-medium text-gray-500 font-inter">
-      {{ label }}<span v-if="required" class="text-red-500">*</span>
-    </p>
-    <div class="flex flex-row flex-wrap gap-3">
-      <EUIButton
-        v-for="(item, idx) in items"
-        :key="`${name}-${idx}`"
-        type="button"
-        size="md"
-        color="white"
-        :class="[
-          isSelected(item)
-            ? '!bg-purple-100 !text-purple-600 !font-medium shadow-sm'
-            : '!bg-gray-100 !text-gray-600 !font-medium hover:text-gray-800',
-          'px-4 py-2 text-sm leading-6 focus:outline-none rounded-3xl transition-colors duration-100 ease-in-out',
-        ]"
-        rounded
-        @click="handleSelect(item)"
-        :disabled="disabled"
-      >
-        {{
-          ignoreStartCase
-            ? item[labelKey] || ""
-            : startCase(item[labelKey] || "")
-        }}
-      </EUIButton>
-    </div>
-     <template v-if="errors && Object.keys(errors).length">
-      <EUIErrorMessage :errors="errors" :name="name" />
-    </template>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { startCase } from "lodash";
-import EUIButton from "../button/EUIButton.vue";
-import EUIErrorMessage from "../errorMessage/EUIErrorMessage.vue";
-import { PropType, computed, toRefs, watch } from "vue";
-import { ErrorObject, ValidationErrors } from "../../utils/types";
-const props = defineProps({
-  label: {
-    type: String,
-    default: "",
-  },
-  modelValue: {
-    type: Object as PropType<any | null>,
-    default: null,
-  },
-  labelKey: {
-    type: String,
-    default: "label",
-  },
-  valueKey: {
-    type: String,
-    default: "value",
-  },
-  items: {
-    type: Array<any>,
-    default: [],
-  },
-  multiple: {
-    type: Boolean,
-    default: false,
-  },
-  name: {
-    type: String,
-    default: "",
-  },
-  disabled: {
-    type: Boolean,
-    deault: false,
-  },
-  required: {
-    type: Boolean,
-    deault: false,
-  },
-  errors: {
-    type: Object as PropType<ValidationErrors | ErrorObject[]>,
-    default: [],
-  },
-  ignoreStartCase: {
-    type: Boolean,
-    deault: false,
-  },
-});
-const { multiple, valueKey, labelKey, errors, ignoreStartCase } = toRefs(props);
-const emit = defineEmits(["update:model-value","on-change"]);
-const activeItem = computed({
-  set: (value) => {
-    emit("update:model-value", value);
-  },
-  get: () => props.modelValue,
-});
-const handleMultiSelect = (item: any) => {
-  if (Array.isArray(activeItem.value)) {
-    const index = activeItem.value?.findIndex(
-      (x) => x?.[valueKey.value] === item?.[valueKey.value]
-    );
-    if (index != -1) {
-      activeItem.value.splice(index, 1);
-    } else {
-      activeItem.value.push(item);
-    }
-    emit('on-change',activeItem.value)
-  }
-};
-const handleSingleSelect = (item: any) => {
-  if (!Array.isArray(activeItem.value)) {
-    if (activeItem.value?.[valueKey.value] === item?.[valueKey.value]) {
-      activeItem.value = null;
-    } else {
-      activeItem.value = item;
-    }
-    emit('on-change',activeItem.value)
-  }
-};
-const handleSelect = (item: any) => {
-  if (multiple.value) {
-    handleMultiSelect(item);
-  } else {
-    handleSingleSelect(item);
-  }
-};
-
-const isSelected = (item: any) => {
-  if (Array.isArray(activeItem.value)) {
-    const values = activeItem.value
-      .map((x) => x[valueKey.value])
-      .filter((x) => x);
-    return values.includes(item?.[valueKey.value]);
-  }
-  return activeItem.value?.[valueKey.value] === item?.[valueKey.value];
-};
-watch(
-  multiple,
-  () => {
-    if (multiple.value) {
-      if (!Array.isArray(activeItem.value)) {
-        activeItem.value = [activeItem.value];
-      }
-    } else {
-      activeItem.value = activeItem.value ? activeItem.value : null;
-    }
-  },
-  { immediate: true }
-);
-</script>

package/src/components/popover/EUIPopover.vue

@@ -1,297 +0,0 @@
-<template>
-  <div ref="popperWrapper" class="w-max">
-    <div
-      ref="popperButton"
-      :id="triggerId"
-      :aria-describedby="tooltipId"
-      :aria-expanded="isOpen"
-      aria-haspopup="true"
-      :class="['inline-flex items-center text-sm font-semibold gap-x-2 cursor-pointer', customButton]"
-      @click="handleClick"
-      @mouseenter="handleMouseEnter"
-      @mouseleave="handleMouseLeave"
-      @focus="handleFocus"
-      @blur="handleBlur"
-    >
-      <slot name="referenceButton" :open="isOpen"/>
-    </div>
-    <div
-     ref="tooltip"
-      :id="tooltipId"
-      role="tooltip"
-      :class="['poppertooltip h-auto text-sm font-normal select-none z-50', className]"
-      :data-show="isOpen ? '' : null"
-      @click.stop
-      @mouseenter="handleTooltipMouseEnter"
-      @mouseleave="handleTooltipMouseLeave"
-    >
-      <div ref="arrowElement" class="arrow" data-popper-arrow />
-      <div
-        v-if="title"
-        class="text-base font-semibold text-current leading-[normal] px-4 py-2"
-        v-text="title"
-      />
-      <slot />
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { computed, nextTick, onBeforeUnmount, PropType, watch } from "vue";
-import { createPopper, Instance } from "@popperjs/core";
-import { onClickOutside } from "@vueuse/core";
-import { onMounted, ref } from "vue";
-const props = defineProps({
-  defaultOpen: {
-    type: Boolean,
-    default: false,
-  },
-  title: {
-    type: String,
-    default: "",
-  },
-  trigger: {
-    type: String as PropType<"click" | "hover" | "manual">,
-    default: "click",
-    validator: (value: string) => ["click", "hover", "manual"].includes(value),
-  },
-  className: {
-    type: String,
-    required: false,
-    default: "bg-white text-gray-900",
-  },
-  placement: {
-    type: String as PropType<"top" | "left" | "bottom" | "right" | "bottom-start" | "bottom-end">,
-    default: "bottom",
-  },
-  customButton: {
-    type: String,
-    required: false,
-    default: ''
-  },
-  visible: {
-    type: Boolean,
-    default: undefined,
-  },
-  hoverHideDelay: {
-    type: Number,
-    default: 100,
-  },
-});
-
-const popperWrapper = ref<HTMLElement | null>(null);
-const popperInstance = ref<Instance | null>(null);
-const popperButton = ref<HTMLElement | null>(null);
-const tooltip = ref<HTMLElement | null>(null);
-const arrowElement = ref<HTMLElement | null>(null);
-
-const isOpen = ref(props.visible === undefined ? props.defaultOpen : props.visible);
-const hideTimer = ref<ReturnType<typeof setTimeout> | null>(null);
-
-const uniqueId = `popover-${Math.random().toString(36).substring(2, 9)}`;
-const triggerId = computed(() => `${uniqueId}-trigger`);
-const tooltipId = computed(() => `${uniqueId}-tooltip`);
-
-const emit = defineEmits<{
-  (e: 'update:visible', value: boolean): void;
-  (e: 'show'): void;
-  (e: 'hide'): void;
-}>();
-
-watch(() => props.visible, (newValue) => {
-  if (newValue !== undefined && newValue !== isOpen.value) {
-    if (newValue) {
-      show();
-    } else {
-      hide();
-    }
-  }
-});
-
-watch(isOpen, (newValue) => {
-  if (props.visible === undefined || newValue !== props.visible) {
-    emit('update:visible', newValue);
-  }
-  nextTick(() => {
-    popperInstance.value?.update();
-  });
-});
-
-
-const initializePopper = () => {
-  if (popperButton.value && tooltip.value && arrowElement.value) {
-    popperInstance.value = createPopper(popperButton.value, tooltip.value, {
-      placement: props.placement,
-      modifiers: [
-        { name: 'offset', options: { offset: [0, 10] } },
-        { name: 'arrow', options: { element: arrowElement.value } },
-        {
-          name: 'preventOverflow',
-          options: {
-            padding: 8,
-          },
-        },
-      ],
-    });
-  }
-};
-
-const destroyPopper = () => {
-  if (popperInstance.value) {
-    popperInstance.value.destroy();
-    popperInstance.value = null;
-  }
-};
-
-const show = () => {
-  if (isOpen.value) return;
-  clearTimeout(hideTimer.value!);
-  isOpen.value = true;
-  emit('show');
-  nextTick(() => {
-    if (!popperInstance.value) {
-        initializePopper();
-    }
-     popperInstance.value?.update();
-     popperInstance.value?.forceUpdate();
-  });
-};
-
-// Hide the popover
-const hide = (immediate = false) => {
-  if (!isOpen.value) return; // Already closed
-
-  if (props.trigger === 'hover' && !immediate) {
-    clearTimeout(hideTimer.value!);
-    hideTimer.value = setTimeout(() => {
-      isOpen.value = false;
-      emit('hide');
-    }, props.hoverHideDelay);
-  } else {
-    clearTimeout(hideTimer.value!);
-    isOpen.value = false;
-    emit('hide');
-  }
-};
-
-const handleClick = () => {
-  if (props.trigger === 'click') {
-    if (isOpen.value) {
-      hide(true);
-    } else {
-      show();
-    }
-  }
-};
-
-const handleMouseEnter = () => {
-  if (props.trigger === 'hover') {
-    show();
-  }
-};
-
-const handleMouseLeave = () => {
-  if (props.trigger === 'hover') {
-    hide(false);
-  }
-};
-
-const handleFocus = () => {
-  if (props.trigger === 'hover') {
-    show();
-  }
-};
-
-const handleBlur = () => {
-     if (props.trigger === 'hover') {
-         hide(false);
-     }
-};
-
-const handleTooltipMouseEnter = () => {
-  if (props.trigger === 'hover') {
-    clearTimeout(hideTimer.value!);
-  }
-};
-
-const handleTooltipMouseLeave = () => {
-  if (props.trigger === 'hover') {
-    hide(false);
-  }
-};
-
-onMounted(() => {
-  if (isOpen.value) {
-     nextTick(() => {
-       initializePopper();
-       setTimeout(() => popperInstance.value?.forceUpdate(), 50);
-     });
-  }
-
-  if (props.trigger === 'click') {
-    onClickOutside(popperWrapper.value, () => {
-        if (isOpen.value) {
-             hide(true);
-        }
-    }, { ignore: [popperButton] });
-  }
-});
-
-onBeforeUnmount(() => {
-  destroyPopper();
-  clearTimeout(hideTimer.value!); // Clear any running timers
-});
-</script>
-
-<style lang="scss" scoped>
-.poppertooltip {
-  @apply hidden;
-}
-
-.poppertooltip[data-show] {
-  z-index: calc(infinity);
-  @apply block rounded-lg;
-}
-
-.arrow,
-.arrow::before {
-  background: inherit;
-  @apply size-3 absolute border-[0.4rem] border-gray-200 rounded-tl-sm -z-[1];
-}
-
-.arrow {
-  @apply invisible;
-}
-
-.arrow::before {
-  content: "";
-  @apply visible transform rotate-45 mx-1;
-}
-
-.poppertooltip{
-  &[data-popper-placement^="top"] > .arrow {
-    @apply bottom-0 -ml-2.5;
-    &::before {
-      @apply border-t-transparent border-l-transparent;
-    }
-  }
-  &[data-popper-placement^="bottom"] > .arrow {
-    @apply -top-3 -ml-2.5;
-    &::before {
-      @apply border-b-transparent border-r-transparent;
-    }
-  }
-  &[data-popper-placement^="left"] > .arrow {
-    @apply right-1 -mt-1.5;
-    &::before {
-      @apply border-l-transparent border-b-transparent;
-    }
-  }
-  &[data-popper-placement^="right"] > .arrow {
-    @apply -left-4 -mt-1.5;
-    &::before {
-      @apply border-r-transparent border-t-transparent;
-    }
-  }
-}
-</style>