rimelight-components 1.2.1 → 1.3.0

package/dist/runtime/components/feedback/FeedbackDatePicker.vue

@@ -1,149 +0,0 @@
-<script setup>
-import { getLocalTimeZone, CalendarDate, today } from "@internationalized/date";
-import { formatDateRange } from "little-date";
-const { dateRange, setDateRange, setPresetRange } = useDateRange();
-const formattedDateRange = computed(() => {
-  if (dateRange.value.start && dateRange.value.end) {
-    return formatDateRange(dateRange.value.start, dateRange.value.end, {
-      includeTime: false
-    });
-  }
-  return null;
-});
-const ranges = [
-  {
-    label: `Last 7 days`,
-    preset: `week`
-  },
-  {
-    label: `Last 30 days`,
-    preset: `month`
-  },
-  {
-    label: `Last 3 months`,
-    preset: `3months`
-  },
-  {
-    label: `Last 6 months`,
-    preset: `6months`
-  },
-  {
-    label: `Last year`,
-    preset: `year`
-  }
-];
-const toCalendarDate = (date) => {
-  return new CalendarDate(
-    date.getFullYear(),
-    date.getMonth() + 1,
-    date.getDate()
-  );
-};
-const calendarRange = computed({
-  get: () => ({
-    start: dateRange.value.start ? toCalendarDate(dateRange.value.start) : void 0,
-    end: dateRange.value.end ? toCalendarDate(dateRange.value.end) : void 0
-  }),
-  set: (newValue) => {
-    if (newValue.start && newValue.end) {
-      setDateRange({
-        start: newValue.start.toDate(getLocalTimeZone()),
-        end: newValue.end.toDate(getLocalTimeZone())
-      });
-    }
-  }
-});
-const isRangeSelected = (preset) => {
-  if (!dateRange.value.start || !dateRange.value.end) return false;
-  const currentDate = today(getLocalTimeZone());
-  let startDate = currentDate.copy();
-  switch (preset) {
-    case `week`:
-      startDate = startDate.subtract({
-        days: 7
-      });
-      break;
-    case `month`:
-      startDate = startDate.subtract({
-        days: 30
-      });
-      break;
-    case `3months`:
-      startDate = startDate.subtract({
-        months: 3
-      });
-      break;
-    case `6months`:
-      startDate = startDate.subtract({
-        months: 6
-      });
-      break;
-    case `year`:
-      startDate = startDate.subtract({
-        years: 1
-      });
-      break;
-  }
-  const selectedStart = toCalendarDate(dateRange.value.start);
-  const selectedEnd = toCalendarDate(dateRange.value.end);
-  return Math.abs(
-    selectedStart.toDate(getLocalTimeZone()).getTime() - startDate.toDate(getLocalTimeZone()).getTime()
-  ) < 24 * 60 * 60 * 1e3 && Math.abs(
-    selectedEnd.toDate(getLocalTimeZone()).getTime() - currentDate.toDate(getLocalTimeZone()).getTime()
-  ) < 24 * 60 * 60 * 1e3;
-};
-</script>
-
-<template>
-  <div class="mb-4 flex w-full items-center justify-center">
-    <UPopover :content="{ align: 'center' }" :modal="true">
-      <UButton
-        color="neutral"
-        variant="outline"
-        icon="i-lucide-calendar"
-        class="group min-w-fit data-[state=open]:bg-elevated"
-      >
-        <span class="truncate">
-          <template v-if="formattedDateRange">
-            {{ formattedDateRange }}
-          </template>
-          <template v-else> Pick a date range </template>
-        </span>
-
-        <template #trailing>
-          <UIcon
-            name="i-lucide-chevron-down"
-            class="size-5 shrink-0 text-dimmed transition-transform duration-200 group-data-[state=open]:rotate-180"
-          />
-        </template>
-      </UButton>
-
-      <template #content>
-        <div class="flex items-stretch divide-default sm:divide-x">
-          <div class="hidden min-w-[140px] flex-col justify-center sm:flex">
-            <UButton
-              v-for="(range, index) in ranges"
-              :key="index"
-              :label="range.label"
-              color="neutral"
-              variant="ghost"
-              class="justify-start rounded-none px-4"
-              :class="[
-  isRangeSelected(range.preset) ? 'bg-elevated' : 'hover:bg-elevated/50'
-]"
-              truncate
-              @click="setPresetRange(range.preset)"
-            />
-          </div>
-
-          <UCalendar
-            v-model="calendarRange"
-            class="p-2"
-            :number-of-months="2"
-            range
-          />
-        </div>
-      </template>
-    </UPopover>
-  </div>
-</template>

package/dist/runtime/components/feedback/FeedbackDatePicker.vue.d.ts

@@ -1,3 +0,0 @@
-declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
-declare const _default: typeof __VLS_export;
-export default _default;

package/dist/runtime/components/feedback/FeedbackItem.d.vue.ts

@@ -1,10 +0,0 @@
-type __VLS_Props = {
-    feedback: FeedbackItem;
-};
-declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
-    delete: (id: number) => any;
-}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
-    onDelete?: ((id: number) => any) | undefined;
-}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
-declare const _default: typeof __VLS_export;
-export default _default;

package/dist/runtime/components/feedback/FeedbackItem.vue

@@ -1,77 +0,0 @@
-<script setup>
-const {} = defineProps({
-  feedback: { type: null, required: true }
-});
-const emit = defineEmits([]);
-const { getRatingFromFeedback, getScoreColor } = useFeedbackRatings();
-const rating = computed(() => getRatingFromFeedback(props.feedback));
-const isDeleting = ref(false);
-async function handleDelete() {
-  if (!confirm(`Are you sure you want to delete this feedback?`)) {
-    return;
-  }
-  isDeleting.value = true;
-  try {
-    emit(`delete`, props.feedback.id);
-  } finally {
-    isDeleting.value = false;
-  }
-}
-</script>
-
-<template>
-  <div class="rounded-lg border border-default p-4">
-    <div class="mb-3 flex items-start justify-between">
-      <div class="flex items-center gap-3">
-        <div class="flex flex-col items-center">
-          <span class="text-2xl">{{ rating.emoji }}</span>
-          <span class="text-xs font-bold" :class="getScoreColor(rating.score)">
-            {{ rating.score }}/4
-          </span>
-        </div>
-        <div>
-          <div class="mb-1 flex items-center gap-2">
-            <span class="text-sm font-medium">{{ rating.label }}</span>
-          </div>
-          <div class="flex items-center gap-3 text-xs text-muted">
-            <span class="flex items-center gap-1">
-              <UIcon name="i-lucide-calendar" class="size-3" />
-              {{
-                new Date(feedback.updatedAt).toLocaleDateString("en-US", {
-  month: "short",
-  day: "numeric",
-  year: "numeric",
-  hour: "2-digit",
-  minute: "2-digit"
-})
-              }}
-            </span>
-            <span v-if="feedback.country" class="flex items-center gap-1">
-              <UIcon name="i-lucide-map-pin" class="size-3" />
-              {{ feedback.country }}
-            </span>
-          </div>
-        </div>
-      </div>
-      <UButton
-        color="error"
-        variant="ghost"
-        size="sm"
-        icon="i-lucide-trash-2"
-        :loading="isDeleting"
-        :disabled="isDeleting"
-        @click="handleDelete"
-      />
-    </div>
-
-    <div
-      v-if="feedback.feedback"
-      class="rounded bg-muted/30 p-3 text-sm leading-relaxed"
-    >
-      "{{ feedback.feedback }}"
-    </div>
-    <div v-else class="text-sm text-muted italic">
-      No additional comment provided
-    </div>
-  </div>
-</template>

package/dist/runtime/components/feedback/FeedbackItem.vue.d.ts

@@ -1,10 +0,0 @@
-type __VLS_Props = {
-    feedback: FeedbackItem;
-};
-declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
-    delete: (id: number) => any;
-}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
-    onDelete?: ((id: number) => any) | undefined;
-}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
-declare const _default: typeof __VLS_export;
-export default _default;

package/dist/runtime/components/feedback/FeedbackStatCard.d.vue.ts

@@ -1,17 +0,0 @@
-type __VLS_Props = {
-    icon: string;
-    iconColor?: string;
-    value: number | string;
-    label: string;
-    description?: string;
-    descriptionColor?: string;
-    popoverStats?: {
-        percentage?: string;
-        trend?: string;
-        lastPeriod?: string;
-        details?: string;
-    };
-};
-declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
-declare const _default: typeof __VLS_export;
-export default _default;

package/dist/runtime/components/feedback/FeedbackStatCard.vue

@@ -1,66 +0,0 @@
-<script setup>
-const { iconColor = `text-primary`, descriptionColor = `text-muted` } = defineProps({
-  icon: { type: String, required: true },
-  iconColor: { type: String, required: false },
-  value: { type: [Number, String], required: true },
-  label: { type: String, required: true },
-  description: { type: String, required: false },
-  descriptionColor: { type: String, required: false },
-  popoverStats: { type: Object, required: false }
-});
-</script>
-
-<template>
-  <UPopover mode="hover" arrow :open-delay="300" :close-delay="200">
-    <div
-      class="flex cursor-pointer items-center gap-3 rounded-lg border border-default bg-muted/20 px-4 py-3 transition-colors hover:bg-muted/30"
-    >
-      <UIcon :name="icon" :class="`size-6 ${iconColor} shrink-0`" />
-      <div>
-        <div class="text-xl font-bold">
-          {{ value }}
-        </div>
-        <div class="text-sm text-muted">
-          {{ label }}
-        </div>
-      </div>
-    </div>
-
-    <template #content>
-      <div class="min-w-64 p-4">
-        <div class="mb-3 flex items-center gap-2">
-          <UIcon :name="icon" :class="`size-5 ${iconColor}`" />
-          <h3 class="font-semibold">{{ label }} Details</h3>
-        </div>
-
-        <div class="space-y-2 text-sm">
-          <div v-if="popoverStats?.percentage" class="flex justify-between">
-            <span class="text-muted">Percentage:</span>
-            <span class="font-medium">{{ popoverStats.percentage }}</span>
-          </div>
-
-          <div v-if="popoverStats?.trend" class="flex justify-between">
-            <span class="text-muted">Status:</span>
-            <span class="font-medium">
-              {{ popoverStats.trend }}
-            </span>
-          </div>
-
-          <div v-if="popoverStats?.lastPeriod" class="flex justify-between">
-            <span class="text-muted">Last 7 days:</span>
-            <span class="font-medium">{{ popoverStats.lastPeriod }}</span>
-          </div>
-
-          <div
-            v-if="popoverStats?.details"
-            class="border-t border-default pt-2"
-          >
-            <p class="text-xs text-muted">
-              {{ popoverStats.details }}
-            </p>
-          </div>
-        </div>
-      </div>
-    </template>
-  </UPopover>
-</template>

package/dist/runtime/components/feedback/FeedbackStatCard.vue.d.ts

@@ -1,17 +0,0 @@
-type __VLS_Props = {
-    icon: string;
-    iconColor?: string;
-    value: number | string;
-    label: string;
-    description?: string;
-    descriptionColor?: string;
-    popoverStats?: {
-        percentage?: string;
-        trend?: string;
-        lastPeriod?: string;
-        details?: string;
-    };
-};
-declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
-declare const _default: typeof __VLS_export;
-export default _default;

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

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

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

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