rimelight-components 1.1.4 → 1.2.0

package/dist/module.mjs

@@ -56,7 +56,6 @@ const module = defineNuxtModule({
       global: true
     });
     addImportsDir(resolver.resolve("./runtime/composables"));
-    addImportsDir(resolver.resolve("./runtime/utils"));
   },
   onInstall() {
     console.log("Setting up rimelight-components for the first time!");

package/dist/runtime/components/app/ScrollToTop.d.vue.ts

@@ -0,0 +1,10 @@
+interface Props {
+    circleStrokeWidth?: number;
+    duration?: number;
+}
+declare const __VLS_export: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{}>, {
+    circleStrokeWidth: number;
+    duration: number;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/app/ScrollToTop.vue

@@ -0,0 +1,97 @@
+<script setup>
+import { computed, onMounted, onUnmounted, ref } from "vue";
+const props = defineProps({
+  circleStrokeWidth: { type: Number, required: false, default: 4 },
+  duration: { type: Number, required: false, default: 0.1 }
+});
+const scrollPercentage = ref(0);
+const minScrollThreshold = 15;
+const isVisible = computed(() => scrollPercentage.value >= minScrollThreshold);
+function updatePageScroll() {
+  if (typeof window === "undefined" || typeof document === "undefined") {
+    return;
+  }
+  const scrollY = window.scrollY;
+  const maxScroll = document.body.scrollHeight - window.innerHeight;
+  if (maxScroll <= 0) {
+    scrollPercentage.value = 0;
+    return;
+  }
+  scrollPercentage.value = Math.min(scrollY / maxScroll * 100, 100);
+}
+function scrollToTop() {
+  if (typeof window === "undefined") return;
+  window.scrollTo({
+    top: 0,
+    behavior: "smooth"
+  });
+}
+onMounted(() => {
+  if (typeof window === "undefined") return;
+  window.addEventListener("scroll", updatePageScroll, { passive: true });
+  updatePageScroll();
+});
+onUnmounted(() => {
+  if (typeof window === "undefined") return;
+  window.removeEventListener("scroll", updatePageScroll);
+});
+const circumference = 2 * Math.PI * 45;
+const percentPx = circumference / 100;
+const currentPercent = computed(
+  () => (scrollPercentage.value - 0) / 100 * 100
+);
+const percentageInPx = computed(() => `${percentPx}px`);
+const durationInSeconds = computed(() => `${props.duration}s`);
+</script>
+
+<template>
+  <Transition
+    name="fade"
+    enter-active-class="transition-opacity duration-500 ease-in"
+    leave-active-class="transition-opacity duration-500 ease-out"
+    enter-from-class="opacity-0"
+    leave-to-class="opacity-0"
+  >
+    <div v-if="isVisible">
+      <UButton
+        variant="ghost"
+        class="fixed right-4 bottom-4 z-50 size-20 lg:size-16"
+        @click="scrollToTop"
+      >
+        <div class="progress-circle-base size-full">
+          <svg class="size-full" viewBox="0 0 100 100">
+            <circle
+              cx="50"
+              cy="50"
+              r="45"
+              fill="var(--color-primary-950)"
+              :stroke-width="props.circleStrokeWidth"
+              stroke-dashoffset="0"
+              stroke-linecap="round"
+              class="gauge-secondary-stroke opacity-100"
+            />
+            <circle
+              cx="50"
+              cy="50"
+              r="45"
+              fill="transparent"
+              :stroke-width="props.circleStrokeWidth"
+              stroke-dashoffset="0"
+              stroke-linecap="round"
+              class="gauge-primary-stroke opacity-100"
+            />
+          </svg>
+          <div
+            class="absolute inset-0 flex items-center justify-center text-center"
+          >
+            <UIcon name="lucide:arrow-up" class="size-6 text-white" />
+          </div>
+        </div>
+      </UButton>
+    </div>
+  </Transition>
+</template>
+
+<style scoped>
+.progress-circle-base{--circle-size:100px;--circumference:v-bind(circumference);--percent-to-px:v-bind(percentageInPx);transform:translateZ(0)}.gauge-primary-stroke{stroke:var(--color-primary-500);--stroke-percent:v-bind(currentPercent);stroke-dasharray:calc(var(--stroke-percent)*var(--percent-to-px)) var(--circumference);transition:stroke-dasharray v-bind(durationInSeconds) ease,stroke v-bind(durationInSeconds) ease}.gauge-primary-stroke,.gauge-secondary-stroke{transform:rotate(-90deg);transform-origin:center}.gauge-secondary-stroke{stroke:var(--color-primary-900);stroke-dasharray:var(--circumference)}
+</style>

package/dist/runtime/components/app/ScrollToTop.vue.d.ts

@@ -0,0 +1,10 @@
+interface Props {
+    circleStrokeWidth?: number;
+    duration?: number;
+}
+declare const __VLS_export: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{}>, {
+    circleStrokeWidth: number;
+    duration: number;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/backgrounds/AnimateGrid.d.vue.ts

@@ -0,0 +1,23 @@
+interface Cards {
+    icon: string;
+    href?: string;
+    iconClass?: string;
+}
+interface Props {
+    class?: string;
+    textGlowStartColor?: string;
+    perspective?: number;
+    textGlowEndColor?: string;
+    cards: Cards[];
+    rotateX?: number;
+    rotateY?: number;
+}
+declare const __VLS_export: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{}>, {
+    textGlowStartColor: string;
+    perspective: number;
+    textGlowEndColor: string;
+    rotateX: number;
+    rotateY: number;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/backgrounds/AnimateGrid.vue

@@ -0,0 +1,84 @@
+<script setup>
+import { onMounted, ref, watch } from "vue";
+import { cn } from "../../utils";
+import { useMouseInElement, useDebounceFn } from "@vueuse/core";
+const card = ref();
+const props = defineProps({
+  class: { type: String, required: false },
+  textGlowStartColor: { type: String, required: false, default: "var(--color-primary-300, #38ef7d)" },
+  perspective: { type: Number, required: false, default: 750 },
+  textGlowEndColor: { type: String, required: false, default: "var(--color-primary-500, #38ef7d)" },
+  cards: { type: Array, required: true },
+  rotateX: { type: Number, required: false, default: -1 },
+  rotateY: { type: Number, required: false, default: -15 }
+});
+function adjacentCardItems(i) {
+  return [i - 1, i + 1, i - 4, i + 4].filter((index) => {
+    if (index < 0 || index > 15) return false;
+    if (i % 4 === 0 && index === i - 1) return false;
+    return !(i % 4 === 3 && index === i + 1);
+  }).map((index) => card.value?.[index]);
+}
+function removeCardClasses(el, adjacentCards) {
+  el.classList.remove("card-raised-big");
+  adjacentCards.forEach((adjacentCard) => {
+    adjacentCard?.classList.remove("card-raised-small");
+  });
+}
+onMounted(() => {
+  card.value?.forEach((el, i) => {
+    const { isOutside } = useMouseInElement(el);
+    const adjacentCards = adjacentCardItems(i);
+    const removeClasses = useDebounceFn(
+      () => removeCardClasses(el, adjacentCards),
+      200
+    );
+    watch(isOutside, (isOutside2) => {
+      if (!isOutside2) {
+        el.classList.add("card-raised-big");
+        adjacentCards.forEach((adjacentCard) => {
+          adjacentCard?.classList.add("card-raised-small");
+        });
+      } else {
+        removeClasses();
+      }
+    });
+  });
+});
+</script>
+
+<template>
+  <div :class="cn('relative block', props.class)">
+    <div
+      :class="
+  cn(
+    'relative grid w-full max-w-full items-center justify-center gap-2',
+    props.cards.length < 4 ? `grid-cols-${props.cards.length}` : 'grid-cols-4'
+  )
+"
+      :style="{
+  transform: `perspective(${props.perspective}px) rotateX(${props.rotateX}deg) rotateY(${props.rotateY}deg)`
+}"
+    >
+      <div
+        v-for="(item, index) in props.cards"
+        :key="index"
+        ref="card"
+        class="card block rounded border border-transparent px-2 py-2 transition-all duration-200"
+        :style="{ zIndex: index + 1 }"
+      >
+        <NuxtLink :to="item.href" target="_blank" :index="index">
+          <UIcon
+            :name="item.icon"
+            class="icon mx-auto h-16 w-auto p-3"
+            :class="item.iconClass"
+          />
+        </NuxtLink>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.icon svg{display:block;margin:0 auto;max-height:100%;max-width:100%}.grid-transform:before{background:radial-gradient(circle,#d9fbe8 0,#fff 70%,transparent 100%);content:"";height:120%;left:-10%;opacity:.5;position:absolute;top:-10%;width:150%;z-index:-1}.dark .grid-transform:before{background:radial-gradient(circle,var(--color-neutral-700) 0,var(--color-neutral-800) 70%,transparent 100%)}.card{box-shadow:2px 2px 5px var(--color-primary-300,#38ef7d),3px 3px 10px var(--color-primary-400,#38ef7d),6px 6px 20px var(--color-primary-500,#38ef7d)}.dark .card{box-shadow:2px 2px 5px oklch(from var(--color-primary-900) l c h/.25),3px 3px 10px oklch(from var(--color-primary-900) l c h/.25),6px 6px 20px oklch(from var(--color-primary-900) l c h/.25)}.card svg{opacity:.7;transition:.2s}.dark .card:hover{box-shadow:3px 3px 5px #1f2937,5px 5px 10px #1f2937,10px 10px 20px #1f2937}.card:hover svg{opacity:1}.card svg{shape-rendering:geometricPrecision}.card-raised-small{animation:text-glow-small 1.5s ease-in-out infinite alternate;border:1px solid var(--color-primary-300);transform:scale(1.05) translateX(-5px) translateY(-5px) translateZ(0)}.card-raised-big{animation:text-glow 1.5s ease-in-out infinite alternate;background-color:#fff;transform:scale(1.15) translateX(-20px) translateY(-20px) translateZ(15px)}.card-raised-big,.dark .card-raised-big{border:1px solid v-bind(textGlowStartColor)}.dark .card-raised-big{background-color:oklch(from var(--color-primary-500) l c h/.5)}.dark .card-raised-small{border:1px solid v-bind(textGlowStartColor);transform:scale(1.05) translateX(-5px) translateY(-5px) translateZ(0)}@keyframes text-glow{0%{filter:drop-shadow(0 0 2px v-bind(textGlowStartColor))}to{filter:drop-shadow(0 1px 8px v-bind(textGlowEndColor))}}@keyframes text-glow-small{0%{filter:drop-shadow(0 0 2px v-bind(textGlowEndColor))}to{filter:drop-shadow(0 1px 4px v-bind(textGlowEndColor))}}
+</style>

package/dist/runtime/components/backgrounds/AnimateGrid.vue.d.ts

@@ -0,0 +1,23 @@
+interface Cards {
+    icon: string;
+    href?: string;
+    iconClass?: string;
+}
+interface Props {
+    class?: string;
+    textGlowStartColor?: string;
+    perspective?: number;
+    textGlowEndColor?: string;
+    cards: Cards[];
+    rotateX?: number;
+    rotateY?: number;
+}
+declare const __VLS_export: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{}>, {
+    textGlowStartColor: string;
+    perspective: number;
+    textGlowEndColor: string;
+    rotateX: number;
+    rotateY: number;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/backgrounds/FlickeringGrid.d.vue.ts

@@ -0,0 +1,19 @@
+interface FlickeringGridProps {
+    squareSize?: number;
+    gridGap?: number;
+    flickerChance?: number;
+    color?: string;
+    width?: number;
+    height?: number;
+    class?: string;
+    maxOpacity?: number;
+}
+declare const __VLS_export: import("vue").DefineComponent<FlickeringGridProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<FlickeringGridProps> & Readonly<{}>, {
+    color: string;
+    squareSize: number;
+    gridGap: number;
+    flickerChance: number;
+    maxOpacity: number;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/backgrounds/FlickeringGrid.vue

@@ -0,0 +1,130 @@
+<script setup>
+import { cn } from "../../utils";
+import { ref, onMounted, onBeforeUnmount, toRefs, computed } from "vue";
+const props = defineProps({
+  squareSize: { type: Number, required: false, default: 4 },
+  gridGap: { type: Number, required: false, default: 6 },
+  flickerChance: { type: Number, required: false, default: 0.3 },
+  color: { type: String, required: false, default: "rgb(0, 0, 0)" },
+  width: { type: Number, required: false },
+  height: { type: Number, required: false },
+  class: { type: String, required: false },
+  maxOpacity: { type: Number, required: false, default: 0.3 }
+});
+const { squareSize, gridGap, flickerChance, color, maxOpacity, width, height } = toRefs(props);
+const containerRef = ref();
+const canvasRef = ref();
+const context = ref();
+const isInView = ref(false);
+const canvasSize = ref({ width: 0, height: 0 });
+const computedColor = computed(() => {
+  if (!context.value) return "rgba(255, 0, 0,";
+  const hex = color.value.replace(/^#/, "");
+  const bigint = Number.parseInt(hex, 16);
+  const r = bigint >> 16 & 255;
+  const g = bigint >> 8 & 255;
+  const b = bigint & 255;
+  return `rgba(${r}, ${g}, ${b},`;
+});
+function setupCanvas(canvas, width2, height2) {
+  const dpr = window.devicePixelRatio || 1;
+  canvas.width = width2 * dpr;
+  canvas.height = height2 * dpr;
+  canvas.style.width = `${width2}px`;
+  canvas.style.height = `${height2}px`;
+  const cols = Math.floor(width2 / (squareSize.value + gridGap.value));
+  const rows = Math.floor(height2 / (squareSize.value + gridGap.value));
+  const squares = new Float32Array(cols * rows);
+  for (let i = 0; i < squares.length; i++) {
+    squares[i] = Math.random() * maxOpacity.value;
+  }
+  return { cols, rows, squares, dpr };
+}
+function updateSquares(squares, deltaTime) {
+  for (let i = 0; i < squares.length; i++) {
+    if (Math.random() < flickerChance.value * deltaTime) {
+      squares[i] = Math.random() * maxOpacity.value;
+    }
+  }
+}
+function drawGrid(ctx, width2, height2, cols, rows, squares, dpr) {
+  ctx.clearRect(0, 0, width2, height2);
+  ctx.fillStyle = "transparent";
+  ctx.fillRect(0, 0, width2, height2);
+  for (let i = 0; i < cols; i++) {
+    for (let j = 0; j < rows; j++) {
+      const opacity = squares[i * rows + j];
+      ctx.fillStyle = `${computedColor.value}${opacity})`;
+      ctx.fillRect(
+        i * (squareSize.value + gridGap.value) * dpr,
+        j * (squareSize.value + gridGap.value) * dpr,
+        squareSize.value * dpr,
+        squareSize.value * dpr
+      );
+    }
+  }
+}
+const gridParams = ref();
+function updateCanvasSize() {
+  const newWidth = width.value || containerRef.value.clientWidth;
+  const newHeight = height.value || containerRef.value.clientHeight;
+  canvasSize.value = { width: newWidth, height: newHeight };
+  gridParams.value = setupCanvas(canvasRef.value, newWidth, newHeight);
+}
+let animationFrameId;
+let resizeObserver;
+let intersectionObserver;
+let lastTime = 0;
+function animate(time) {
+  if (!isInView.value) return;
+  const deltaTime = (time - lastTime) / 1e3;
+  lastTime = time;
+  updateSquares(gridParams.value.squares, deltaTime);
+  drawGrid(
+    context.value,
+    canvasRef.value.width,
+    canvasRef.value.height,
+    gridParams.value.cols,
+    gridParams.value.rows,
+    gridParams.value.squares,
+    gridParams.value.dpr
+  );
+  animationFrameId = requestAnimationFrame(animate);
+}
+onMounted(() => {
+  if (!canvasRef.value || !containerRef.value) return;
+  context.value = canvasRef.value.getContext("2d");
+  if (!context.value) return;
+  updateCanvasSize();
+  resizeObserver = new ResizeObserver(() => {
+    updateCanvasSize();
+  });
+  intersectionObserver = new IntersectionObserver(
+    ([entry]) => {
+      isInView.value = entry.isIntersecting;
+      animationFrameId = requestAnimationFrame(animate);
+    },
+    { threshold: 0 }
+  );
+  resizeObserver.observe(containerRef.value);
+  intersectionObserver.observe(canvasRef.value);
+});
+onBeforeUnmount(() => {
+  if (animationFrameId) {
+    cancelAnimationFrame(animationFrameId);
+  }
+  resizeObserver?.disconnect();
+  intersectionObserver?.disconnect();
+});
+</script>
+
+<template>
+  <div ref="containerRef" :class="cn('h-full w-full', props.class)">
+    <canvas
+      ref="canvasRef"
+      class="pointer-events-none"
+      :width="canvasSize.width"
+      :height="canvasSize.height"
+    />
+  </div>
+</template>

package/dist/runtime/components/backgrounds/FlickeringGrid.vue.d.ts

@@ -0,0 +1,19 @@
+interface FlickeringGridProps {
+    squareSize?: number;
+    gridGap?: number;
+    flickerChance?: number;
+    color?: string;
+    width?: number;
+    height?: number;
+    class?: string;
+    maxOpacity?: number;
+}
+declare const __VLS_export: import("vue").DefineComponent<FlickeringGridProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<FlickeringGridProps> & Readonly<{}>, {
+    color: string;
+    squareSize: number;
+    gridGap: number;
+    flickerChance: number;
+    maxOpacity: number;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/backgrounds/InteractiveGrid.d.vue.ts

@@ -0,0 +1,15 @@
+import { type HTMLAttributes } from "vue";
+interface InteractiveGridPatternProps {
+    className?: HTMLAttributes["class"];
+    squaresClassName?: HTMLAttributes["class"];
+    width?: number;
+    height?: number;
+    squares?: [number, number];
+}
+declare const __VLS_export: import("vue").DefineComponent<InteractiveGridPatternProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<InteractiveGridPatternProps> & Readonly<{}>, {
+    width: number;
+    height: number;
+    squares: [number, number];
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/backgrounds/InteractiveGrid.vue

@@ -0,0 +1,58 @@
+<script setup>
+import { cn } from "../../utils";
+import { ref, computed } from "vue";
+const props = defineProps({
+  className: { type: null, required: false },
+  squaresClassName: { type: null, required: false },
+  width: { type: Number, required: false, default: 40 },
+  height: { type: Number, required: false, default: 40 },
+  squares: { type: Array, required: false, default: () => [24, 24] }
+});
+const horizontal = computed(() => props.squares[0]);
+const vertical = computed(() => props.squares[1]);
+const totalSquares = computed(() => horizontal.value * vertical.value);
+const hoveredSquare = ref(null);
+const gridWidth = computed(() => props.width * horizontal.value);
+const gridHeight = computed(() => props.height * vertical.value);
+function getX(index) {
+  return index % horizontal.value * props.width;
+}
+function getY(index) {
+  return Math.floor(index / horizontal.value) * props.height;
+}
+const svgClass = computed(
+  () => cn(
+    "absolute inset-0 h-full w-full border border-neutral-400/30",
+    props.className
+  )
+);
+function getRectClass(index) {
+  return cn(
+    "stroke-neutral-400/30 transition-all duration-100 ease-in-out [&:not(:hover)]:duration-1000",
+    hoveredSquare.value === index ? "fill-neutral-300/30" : "fill-transparent",
+    props.squaresClassName
+  );
+}
+function handleMouseEnter(index) {
+  hoveredSquare.value = index;
+}
+function handleMouseLeave() {
+  hoveredSquare.value = null;
+}
+</script>
+
+<template>
+  <svg :width="gridWidth" :height="gridHeight" :class="svgClass">
+    <rect
+      v-for="index in totalSquares"
+      :key="index"
+      :x="getX(index)"
+      :y="getY(index)"
+      :width="width"
+      :height="height"
+      :class="getRectClass(index)"
+      @mouseenter="handleMouseEnter(index)"
+      @mouseleave="handleMouseLeave"
+    />
+  </svg>
+</template>

package/dist/runtime/components/backgrounds/InteractiveGrid.vue.d.ts

@@ -0,0 +1,15 @@
+import { type HTMLAttributes } from "vue";
+interface InteractiveGridPatternProps {
+    className?: HTMLAttributes["class"];
+    squaresClassName?: HTMLAttributes["class"];
+    width?: number;
+    height?: number;
+    squares?: [number, number];
+}
+declare const __VLS_export: import("vue").DefineComponent<InteractiveGridPatternProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<InteractiveGridPatternProps> & Readonly<{}>, {
+    width: number;
+    height: number;
+    squares: [number, number];
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/composables/useFeedback.d.ts

@@ -0,0 +1,50 @@
+export declare function useFeedbackRatings(): {
+    ratingConfig: any;
+    getScoreColor: (score: number) => string;
+    getRatingFromFeedback: (feedback: {
+        rating: FeedbackRating;
+    }) => any;
+    calculateStats: (feedbacks: {
+        rating: FeedbackRating;
+    }[]) => {
+        total: number;
+        positive: number;
+        negative: number;
+        averageScore: number;
+        positivePercentage: number;
+    };
+};
+export declare function useFeedbackData(rawFeedback: Ref<FeedbackItem[] | null>): {
+    feedbackData: any;
+    globalStats: any;
+    pageAnalytics: any;
+};
+export declare function useFeedbackModal(): {
+    selectedPage: any;
+    showFeedbackModal: any;
+    currentPage: any;
+    itemsPerPage: number;
+    paginatedFeedback: any;
+    totalPages: any;
+    viewPageDetails: (page: PageAnalytic) => void;
+    closeFeedbackModal: () => void;
+};
+export declare function useFeedbackDelete(): {
+    deleteFeedback: (id: number) => Promise<boolean>;
+};
+interface UseFeedbackFormOptions {
+    page: {
+        title: string;
+        stem: string;
+    };
+}
+export declare function useFeedbackForm(options: UseFeedbackFormOptions): {
+    formState: any;
+    isExpanded: any;
+    isSubmitted: any;
+    isSubmitting: any;
+    handleRatingSelect: (rating: FeedbackRating) => void;
+    submitFeedback: () => Promise<void>;
+    resetFeedback: () => void;
+};
+export {};

package/dist/runtime/composables/useFeedback.js

@@ -0,0 +1,237 @@
+export function useFeedbackRatings() {
+  const ratingConfig = computed(() => {
+    return FEEDBACK_OPTIONS.reduce(
+      (acc, option) => {
+        acc[option.value] = option;
+        return acc;
+      },
+      {}
+    );
+  });
+  function getScoreColor(score) {
+    if (score >= 4) return `text-success`;
+    if (score >= 3) return `text-warning`;
+    return `text-error`;
+  }
+  function getRatingFromFeedback(feedback) {
+    return ratingConfig.value[feedback.rating];
+  }
+  function calculateStats(feedbacks) {
+    const total = feedbacks.length;
+    const positive = feedbacks.filter(
+      (f) => [`very-helpful`, `helpful`].includes(f.rating)
+    ).length;
+    const negative = feedbacks.filter(
+      (f) => [`not-helpful`, `confusing`].includes(f.rating)
+    ).length;
+    const totalScore = feedbacks.reduce(
+      (sum, item) => sum + ratingConfig.value[item.rating].score,
+      0
+    );
+    const averageScore = total > 0 ? Number((totalScore / total).toFixed(1)) : 0;
+    const positivePercentage = total > 0 ? Math.round(positive / total * 100) : 0;
+    return {
+      total,
+      positive,
+      negative,
+      averageScore,
+      positivePercentage
+    };
+  }
+  return {
+    ratingConfig,
+    getScoreColor,
+    getRatingFromFeedback,
+    calculateStats
+  };
+}
+export function useFeedbackData(rawFeedback) {
+  const { calculateStats } = useFeedbackRatings();
+  const { filterFeedbackByDateRange } = useDateRange();
+  const allFeedbackData = computed(
+    () => rawFeedback.value?.map((item) => ({
+      ...item,
+      createdAt: new Date(item.createdAt),
+      updatedAt: new Date(item.updatedAt)
+    })) || []
+  );
+  const feedbackData = computed(
+    () => filterFeedbackByDateRange(allFeedbackData.value)
+  );
+  const globalStats = computed(() => calculateStats(feedbackData.value));
+  const pageAnalytics = computed(() => {
+    const filteredFeedback = filterFeedbackByDateRange(allFeedbackData.value);
+    const pageGroups = filteredFeedback.reduce(
+      (acc, item) => {
+        if (!acc[item.path]) {
+          acc[item.path] = [];
+        }
+        acc[item.path].push(item);
+        return acc;
+      },
+      {}
+    );
+    return Object.entries(pageGroups).map(([path, feedback]) => {
+      const stats = calculateStats(feedback);
+      const sortedFeedback = feedback.sort(
+        (a, b) => new Date(b.updatedAt).getTime() - new Date(a.updatedAt).getTime()
+      );
+      const oldestFeedback = feedback.reduce((oldest, current) => {
+        if (new Date(current.createdAt) < new Date(oldest.createdAt)) {
+          return current;
+        } else {
+          return oldest;
+        }
+      });
+      return {
+        path,
+        ...stats,
+        feedback,
+        lastFeedback: sortedFeedback[0],
+        createdAt: new Date(oldestFeedback.createdAt),
+        updatedAt: new Date(sortedFeedback[0].updatedAt)
+      };
+    }).sort((a, b) => b.total - a.total);
+  });
+  return {
+    feedbackData,
+    globalStats,
+    pageAnalytics
+  };
+}
+export function useFeedbackModal() {
+  const selectedPage = ref(null);
+  const showFeedbackModal = ref(false);
+  const currentPage = ref(1);
+  const itemsPerPage = 5;
+  const paginatedFeedback = computed(() => {
+    if (!selectedPage.value) return [];
+    const sortedFeedback = [...selectedPage.value.feedback].sort(
+      (a, b) => new Date(b.updatedAt).getTime() - new Date(a.updatedAt).getTime()
+    );
+    const startIndex = (currentPage.value - 1) * itemsPerPage;
+    const endIndex = startIndex + itemsPerPage;
+    return sortedFeedback.slice(startIndex, endIndex);
+  });
+  const totalPages = computed(() => {
+    if (!selectedPage.value) return 0;
+    return Math.ceil(selectedPage.value.feedback.length / itemsPerPage);
+  });
+  function viewPageDetails(page) {
+    selectedPage.value = page;
+    currentPage.value = 1;
+    showFeedbackModal.value = true;
+  }
+  function closeFeedbackModal() {
+    showFeedbackModal.value = false;
+    selectedPage.value = null;
+  }
+  return {
+    selectedPage: readonly(selectedPage),
+    showFeedbackModal,
+    currentPage,
+    itemsPerPage,
+    paginatedFeedback,
+    totalPages,
+    viewPageDetails,
+    closeFeedbackModal
+  };
+}
+export function useFeedbackDelete() {
+  const toast = useToast();
+  async function deleteFeedback(id) {
+    try {
+      await $fetch(`/api/feedback/${id}`, {
+        method: `DELETE`
+      });
+      toast.add({
+        title: `Feedback deleted`,
+        description: `The feedback has been successfully removed`,
+        color: `success`,
+        icon: `i-lucide-check`
+      });
+      return true;
+    } catch (error) {
+      console.error(`Failed to delete feedback:`, error);
+      toast.add({
+        title: `Failed to delete feedback`,
+        description: `Please try again later`,
+        color: `error`,
+        icon: `i-lucide-circle-alert`
+      });
+      return false;
+    }
+  }
+  return {
+    deleteFeedback
+  };
+}
+export function useFeedbackForm(options) {
+  const route = useRoute();
+  const toast = useToast();
+  const formState = reactive({
+    rating: null,
+    feedback: ``
+  });
+  const isExpanded = ref(false);
+  const isSubmitted = ref(false);
+  const isSubmitting = ref(false);
+  function cancelFeedback() {
+    formState.rating = null;
+    formState.feedback = ``;
+    isExpanded.value = false;
+  }
+  function handleRatingSelect(rating) {
+    if (isSubmitted.value) return;
+    if (isExpanded.value && rating === formState.rating) {
+      cancelFeedback();
+      return;
+    }
+    formState.rating = rating;
+    isExpanded.value = true;
+  }
+  async function submitFeedback() {
+    if (!formState.rating) return;
+    isSubmitting.value = true;
+    const submission = {
+      rating: formState.rating,
+      feedback: formState.feedback.trim() || void 0,
+      path: route.path,
+      title: options.page.title,
+      stem: options.page.stem
+    };
+    try {
+      await $fetch(`/api/feedback`, {
+        method: `POST`,
+        body: submission
+      });
+      await new Promise((resolve) => setTimeout(resolve, 1e3));
+      isSubmitted.value = true;
+    } catch {
+      toast.add({
+        title: `Failed to submit feedback`,
+        description: `Please try again later`,
+        color: `error`,
+        icon: `i-lucide-circle-alert`
+      });
+    } finally {
+      isSubmitting.value = false;
+    }
+  }
+  function resetFeedback() {
+    isSubmitted.value = false;
+    isExpanded.value = false;
+    formState.rating = null;
+    formState.feedback = ``;
+  }
+  watch(route, resetFeedback);
+  return {
+    formState,
+    isExpanded: readonly(isExpanded),
+    isSubmitted: readonly(isSubmitted),
+    isSubmitting: readonly(isSubmitting),
+    handleRatingSelect,
+    submitFeedback,
+    resetFeedback
+  };
+}

package/dist/runtime/composables/useFeedbackExports.d.ts

@@ -0,0 +1,4 @@
+export declare function useFeedbackExport(): {
+    exportFeedbackData: (feedbackData: FeedbackItem[]) => Promise<void>;
+    exportPageAnalytics: (pageAnalytics: PageAnalytic[]) => Promise<void>;
+};

package/dist/runtime/composables/useFeedbackExports.js

@@ -0,0 +1,150 @@
+export function useFeedbackExport() {
+  const toast = useToast();
+  function formatDateForCSV(date) {
+    const d = typeof date === `string` ? new Date(date) : date;
+    return d.toLocaleDateString(`en-US`, {
+      year: `numeric`,
+      month: `2-digit`,
+      day: `2-digit`,
+      hour: `2-digit`,
+      minute: `2-digit`,
+      second: `2-digit`
+    });
+  }
+  function convertToCSV(data) {
+    if (!data || data.length === 0) {
+      return `No data to export`;
+    }
+    const headers = [
+      `ID`,
+      `Rating`,
+      `Score`,
+      `Rating Label`,
+      `Feedback`,
+      `Page Path`,
+      `Page Title`,
+      `Page Stem`,
+      `Country`,
+      `Created At`,
+      `Updated At`
+    ];
+    const rows = data.map((item) => {
+      const ratingOption = FEEDBACK_OPTIONS.find(
+        (opt) => opt.value === item.rating
+      );
+      return [
+        item.id,
+        item.rating,
+        ratingOption?.score || 0,
+        ratingOption?.label || `Unknown`,
+        // Escape quotes
+        `"${(item.feedback || ``).replace(/"/g, `""`)}"`,
+        item.path,
+        // Escape quotes
+        `"${item.title.replace(/"/g, `""`)}"`,
+        item.stem,
+        item.country || ``,
+        formatDateForCSV(item.createdAt),
+        formatDateForCSV(item.updatedAt)
+      ];
+    });
+    return [headers, ...rows].map((row) => row.join(`,`)).join(`
+`);
+  }
+  function downloadCSV(csvContent, filename) {
+    const blob = new Blob([csvContent], {
+      type: `text/csv;charset=utf-8;`
+    });
+    const link = document.createElement(`a`);
+    if (link.download !== void 0) {
+      const url = URL.createObjectURL(blob);
+      link.setAttribute(`href`, url);
+      link.setAttribute(`download`, filename);
+      link.style.visibility = `hidden`;
+      document.body.appendChild(link);
+      link.click();
+      document.body.removeChild(link);
+      URL.revokeObjectURL(url);
+    }
+  }
+  async function exportFeedbackData(feedbackData) {
+    try {
+      const csvContent = convertToCSV(feedbackData);
+      const timestamp = (/* @__PURE__ */ new Date()).toISOString().split(`T`)[0];
+      const filename = `feedback-export-${timestamp}.csv`;
+      downloadCSV(csvContent, filename);
+      toast.add({
+        title: `Export successful`,
+        description: `${feedbackData.length} feedback entries exported to ${filename}`,
+        color: `success`,
+        icon: `i-lucide-download`
+      });
+    } catch (error) {
+      console.error(`Export failed:`, error);
+      toast.add({
+        title: `Export failed`,
+        description: `Unable to export feedback data. Please try again.`,
+        color: `error`,
+        icon: `i-lucide-circle-alert`
+      });
+    }
+  }
+  async function exportPageAnalytics(pageAnalytics) {
+    try {
+      if (!pageAnalytics || pageAnalytics.length === 0) {
+        toast.add({
+          title: `No data to export`,
+          description: `No page analytics data available for export.`,
+          color: `warning`,
+          icon: `i-lucide-info`
+        });
+        return;
+      }
+      const headers = [
+        `Page Path`,
+        `Page Title`,
+        `Total Feedback`,
+        `Positive Feedback`,
+        `Negative Feedback`,
+        `Average Score`,
+        `Positive Percentage`,
+        `Created At`,
+        `Updated At`
+      ];
+      const rows = pageAnalytics.map((page) => [
+        page.path,
+        `"${page.lastFeedback.title.replace(/"/g, `""`)}"`,
+        page.total,
+        page.positive,
+        page.negative,
+        page.averageScore,
+        page.positivePercentage,
+        formatDateForCSV(page.createdAt),
+        formatDateForCSV(page.updatedAt)
+      ]);
+      const csvContent = [headers, ...rows].map((row) => row.join(`,`)).join(`
+`);
+      const timestamp = (/* @__PURE__ */ new Date()).toISOString().split(`T`)[0];
+      const filename = `page-analytics-export-${timestamp}.csv`;
+      downloadCSV(csvContent, filename);
+      toast.add({
+        title: `Export successful`,
+        description: `${pageAnalytics.length} page analytics exported to ${filename}`,
+        color: `success`,
+        icon: `i-lucide-download`
+      });
+    } catch (error) {
+      console.error(`Export failed:`, error);
+      toast.add({
+        title: `Export failed`,
+        description: `Unable to export page analytics. Please try again.`,
+        color: `error`,
+        icon: `i-lucide-circle-alert`
+      });
+    }
+  }
+  return {
+    exportFeedbackData,
+    exportPageAnalytics
+  };
+}

package/dist/runtime/types/index.d.ts

@@ -0,0 +1,14 @@
+export interface Notification {
+  id: number
+  unread?: boolean
+  sender: User
+  body: string
+  date: string
+}
+
+export type Period = `daily` | `weekly` | `monthly`
+
+export interface Range {
+  start: Date
+  end: Date
+}

package/dist/runtime/utils/index.d.ts

@@ -0,0 +1,3 @@
+import { type ClassValue } from "clsx";
+export declare function cn(...inputs: ClassValue[]): string;
+export type ObjectValues<T> = T[keyof T];

package/dist/runtime/utils/index.js

@@ -0,0 +1,5 @@
+import { clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+export function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "rimelight-components",
-  "version": "1.1.4",
+  "version": "1.2.0",
   "description": "My new Nuxt module",
   "repository": "Rimelight  Entertainment/rimelight-components",
   "license": "MIT",
@@ -9,6 +9,14 @@
     ".": {
       "types": "./dist/types.d.mts",
       "import": "./dist/module.mjs"
+    },
+    "./runtime/*": "./dist/runtime/*",
+    "./components/*": "./dist/runtime/components/*",
+    "./composables/*": "./dist/runtime/composables/*",
+    "./types/*": "./dist/runtime/types/*",
+    "./utils/*": {
+      "types": "./dist/runtime/utils/*.d.ts",
+      "import": "./dist/runtime/utils/*.js"
     }
   },
   "main": "./dist/module.mjs",
@@ -41,6 +49,7 @@
     "@nuxt/image": "^1.11.0",
     "@nuxt/kit": "^4.1.3",
     "@nuxt/ui": "^4.0.1",
+    "@vueuse/core": "^13.9.0",
     "date-fns": "^4.1.0",
     "nuxt": "^4.1.3",
     "tailwind-variants": "^3.1.1",