edvoyui-component-library-test-flight 0.0.21 → 0.0.23

package/src/components/tooltip/EUITooltip.vue

@@ -0,0 +1,108 @@
+<template>
+  <div ref="tooltipContainer" class="relative">
+    <div @mouseover="showTooltip" @mouseleave="hideTooltip">
+      <slot />
+    </div>
+
+    <div v-if="isVisible" ref="tooltip" class="tooltip">
+      <div class="arrow" data-popper-arrow />
+      <slot name="tooltip">Tooltip content</slot>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { createPopper, Instance } from "@popperjs/core";
+import { PropType, ref, nextTick } from "vue";
+
+const popperInstance = ref<Instance | null>(null);
+const tooltipContainer = ref<HTMLElement | null>(null);
+const tooltip = ref<HTMLElement | null>(null);
+const isVisible = ref(false);
+
+const props = defineProps({
+  placement: {
+    type: String as PropType<
+      "top" | "left" | "bottom" | "right" | "bottom-start" | "bottom-end"
+    >,
+    default: "left",
+  },
+});
+
+const showTooltip = async () => {
+  isVisible.value = true;
+  await nextTick(); // Ensures the tooltip element is rendered before creating the Popper instance
+  createPopperInstance();
+};
+
+const hideTooltip = () => {
+  isVisible.value = false;
+  if (popperInstance.value) {
+    popperInstance.value.destroy();
+    popperInstance.value = null;
+  }
+};
+
+const createPopperInstance = () => {
+  if (tooltipContainer.value && tooltip.value) {
+    popperInstance.value = createPopper(tooltipContainer.value, tooltip.value, {
+      placement: props.placement,
+      modifiers: [
+        {
+          name: "offset",
+          options: {
+            offset: [0, 8],
+          },
+        },
+      ],
+    });
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.tooltip {
+  @apply block z-50 p-2 text-sm text-white bg-gray-900 shadow-md ring-1 ring-slate-950 ring-inset rounded shadow-gray-100 max-w-64 min-w-64 text-start;
+}
+.arrow,
+.arrow::before {
+  background: inherit;
+  @apply size-3 absolute border-[0.375rem] border-gray-900 rounded-tl-sm;
+}
+
+.arrow {
+  @apply invisible;
+}
+
+.arrow::before {
+  content: "";
+  @apply visible transform rotate-45;
+}
+
+.tooltip {
+  &[data-popper-placement^="top"] > .arrow {
+    @apply bottom-px;
+    &::before {
+      @apply border-t-transparent border-l-transparent -mx-1;
+    }
+  }
+  &[data-popper-placement^="bottom"] > .arrow {
+    @apply -top-[0.70rem];
+    &::before {
+      @apply border-b-transparent border-r-transparent -mx-1;
+    }
+  }
+  &[data-popper-placement^="left"] > .arrow {
+    @apply right-px;
+    &::before {
+      @apply border-l-transparent border-b-transparent -mt-1.5;
+    }
+  }
+  &[data-popper-placement^="right"] > .arrow {
+    @apply -left-[0.95rem];
+    &::before {
+      @apply border-r-transparent border-t-transparent -mt-1 mx-1;
+    }
+  }
+}
+</style>

package/src/data/books.ts

@@ -0,0 +1,163 @@
+export default [
+  {
+    title: "Old Man's War",
+    author: {
+      firstName: "John",
+      lastName: "Scalzi",
+    },
+  },
+  {
+    title: "The Lock Artist",
+    author: {
+      firstName: "Steve",
+      lastName: "Hamilton",
+    },
+  },
+  {
+    title: "HTML5",
+    author: {
+      firstName: "Remy",
+      lastName: "Sharp",
+    },
+  },
+  {
+    title: "Right Ho Jeeves",
+    author: {
+      firstName: "P.D",
+      lastName: "Woodhouse",
+    },
+  },
+  {
+    title: "The Code of the Wooster",
+    author: {
+      firstName: "P.D",
+      lastName: "Woodhouse",
+    },
+  },
+  {
+    title: "Thank You Jeeves",
+    author: {
+      firstName: "P.D",
+      lastName: "Woodhouse",
+    },
+  },
+  {
+    title: "The DaVinci Code",
+    author: {
+      firstName: "Dan",
+      lastName: "Brown",
+    },
+  },
+  {
+    title: "Angels & Demons",
+    author: {
+      firstName: "Dan",
+      lastName: "Brown",
+    },
+  },
+  {
+    title: "The Silmarillion",
+    author: {
+      firstName: "J.R.R",
+      lastName: "Tolkien",
+    },
+  },
+  {
+    title: "Syrup",
+    author: {
+      firstName: "Max",
+      lastName: "Barry",
+    },
+  },
+  {
+    title: "The Lost Symbol",
+    author: {
+      firstName: "Dan",
+      lastName: "Brown",
+    },
+  },
+  {
+    title: "The Book of Lies",
+    author: {
+      firstName: "Brad",
+      lastName: "Meltzer",
+    },
+  },
+  {
+    title: "Lamb",
+    author: {
+      firstName: "Christopher",
+      lastName: "Moore",
+    },
+  },
+  {
+    title: "Fool",
+    author: {
+      firstName: "Christopher",
+      lastName: "Moore",
+    },
+  },
+  {
+    title: "Incompetence",
+    author: {
+      firstName: "Rob",
+      lastName: "Grant",
+    },
+  },
+  {
+    title: "Fat",
+    author: {
+      firstName: "Rob",
+      lastName: "Grant",
+    },
+  },
+  {
+    title: "Colony",
+    author: {
+      firstName: "Rob",
+      lastName: "Grant",
+    },
+  },
+  {
+    title: "Backwards, Red Dwarf",
+    author: {
+      firstName: "Rob",
+      lastName: "Grant",
+    },
+  },
+  {
+    title: "The Grand Design",
+    author: {
+      firstName: "Stephen",
+      lastName: "Hawking",
+    },
+  },
+  {
+    title: "The Book of Samson",
+    author: {
+      firstName: "David",
+      lastName: "Maine",
+    },
+  },
+  {
+    title: "The Preservationist",
+    author: {
+      firstName: "David",
+      lastName: "Maine",
+    },
+  },
+  {
+    title: "Fallen",
+    author: {
+      firstName: "David",
+      lastName: "Maine",
+    },
+  },
+  {
+    title: "Monster 1959",
+    author: {
+      firstName: "David",
+      lastName: "Maine",
+    },
+  },
+];

package/src/data/tab.ts

@@ -0,0 +1,33 @@
+export default [
+  {
+    name: "About",
+    active: true,
+    content:
+      "About Lorem ipsum dolor, sit amet consectetur adipisicing elit. In laudantium labore error repellendus similique, quibusdam et mollitia iure nesciunt? Impedit ut veniam repudiandae omnis eligendi quis dignissimos animi, rem officia!",
+    priority: "Choose the status and priority for this student",
+  },
+  {
+    name: "Application",
+    active: false,
+    content:
+      "Application Lorem ipsum dolor, sit amet consectetur adipisicing elit. In laudantium labore error repellendus similique, quibusdam et mollitia iure nesciunt? Impedit ut veniam repudiandae omnis eligendi quis dignissimos animi, rem officia!",
+    course: {
+      name: "MSc Computer Science (Network Engineering)",
+      levels: "Postgraduate",
+    },
+  },
+  {
+    name: "Notes",
+    active: false,
+    content:
+      "Notes Lorem ipsum dolor, sit amet consectetur adipisicing elit. In laudantium labore error repellendus similique, quibusdam et mollitia iure nesciunt? Impedit ut veniam repudiandae omnis eligendi quis dignissimos animi, rem officia!",
+    notes: "Here you can add some notes for yourself!",
+  },
+  {
+    name: "Task",
+    active: false,
+    content:
+      "Task Lorem ipsum dolor, sit amet consectetur adipisicing elit. In laudantium labore error repellendus similique, quibusdam et mollitia iure nesciunt? Impedit ut veniam repudiandae omnis eligendi quis dignissimos animi, rem officia!",
+    task: "You can add your tasks here!",
+  },
+];