rimelight-components 1.1.2 → 1.1.4

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

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

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

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

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

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

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

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

@@ -0,0 +1,17 @@
+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/package.json

@@ -1,8 +1,8 @@
 {
   "name": "rimelight-components",
-  "version": "1.1.2",
+  "version": "1.1.4",
   "description": "My new Nuxt module",
-  "repository": "RimelightEntertainment/rimelight-components",
+  "repository": "Rimelight  Entertainment/rimelight-components",
   "license": "MIT",
   "type": "module",
   "exports": {
@@ -38,25 +38,36 @@
     "playground"
   ],
   "dependencies": {
-    "nuxt": "^4.1.3",
+    "@nuxt/image": "^1.11.0",
     "@nuxt/kit": "^4.1.3",
+    "@nuxt/ui": "^4.0.1",
     "date-fns": "^4.1.0",
+    "nuxt": "^4.1.3",
+    "tailwind-variants": "^3.1.1",
     "vue": "^3.5.22"
   },
   "devDependencies": {
-    "@nuxt/image": "1.11.0",
     "@nuxt/devtools": "^2.6.5",
     "@nuxt/module-builder": "^1.0.2",
     "@nuxt/schema": "^4.1.3",
     "@nuxt/test-utils": "^3.19.2",
+    "@prettier/plugin-oxc": "^0.0.4",
     "@types/node": "latest",
     "changelogen": "^0.6.2",
-    "typescript": "~5.9.3",
-    "vitest": "^3.2.4",
-    "vue-tsc": "^3.1.0",
-    "@prettier/plugin-oxc": "^0.0.4",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "motion-v": "^1.7.2",
     "oxlint": "^1.21.0",
     "prettier": "^3.6.2",
-    "prettier-plugin-tailwindcss": "^0.6.14"
-  }
+    "prettier-plugin-tailwindcss": "^0.6.14",
+    "tailwind-merge": "^3.3.1",
+    "tw-animate-css": "^1.4.0",
+    "typescript": "~5.9.3",
+    "vitest": "^3.2.4",
+    "vue-tsc": "^3.1.0"
+  },
+  "trustedDependencies": [
+    "@parcel/watcher",
+    "@tailwindcss/oxide"
+  ]
 }

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

@@ -1,23 +0,0 @@
-<script setup>
-import { ref } from "vue";
-const { to } = defineProps({
-  to: { type: String, required: true }
-});
-const actions = ref([
-  {
-    label: "View on GitHub",
-    trailingIcon: "mdi:github",
-    to
-  }
-]);
-</script>
-
-<template>
-  <UBanner
-      color="primary"
-      icon="lucide:construction"
-      title="This website is currently under construction. Feel free to report any issues!"
-      :actions="actions"
-      close
-  />
-</template>