rimelight-components 1.1.2 → 1.1.4

package/dist/module.mjs

@@ -39,9 +39,15 @@ const module = defineNuxtModule({
           ]
         }
       }
+    },
+    "motion-v/nuxt": {
+      version: ">=1.7.2",
+      optional: false,
+      overrides: {},
+      defaults: {}
     }
   },
-  setup() {
+  setup(options, nuxt) {
     const resolver = createResolver(import.meta.url);
     addComponentsDir({
       path: resolver.resolve("./runtime/components/"),
@@ -50,6 +56,7 @@ 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/Header.d.vue.ts

@@ -1,16 +1,16 @@
 declare var __VLS_6: {}, __VLS_8: {}, __VLS_10: {}, __VLS_12: {}, __VLS_14: {}, __VLS_16: {};
 type __VLS_Slots = {} & {
-    'collapsed-left'?: (props: typeof __VLS_6) => any;
+    left?: (props: typeof __VLS_6) => any;
 } & {
-    'collapsed-center'?: (props: typeof __VLS_8) => any;
+    center?: (props: typeof __VLS_8) => any;
 } & {
-    'collapsed-right'?: (props: typeof __VLS_10) => any;
+    right?: (props: typeof __VLS_10) => any;
 } & {
-    left?: (props: typeof __VLS_12) => any;
+    'collapsed-left'?: (props: typeof __VLS_12) => any;
 } & {
-    center?: (props: typeof __VLS_14) => any;
+    'collapsed-center'?: (props: typeof __VLS_14) => any;
 } & {
-    right?: (props: typeof __VLS_16) => any;
+    'collapsed-right'?: (props: typeof __VLS_16) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

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

@@ -1,30 +1,50 @@
-<script setup lang="ts"></script>
+<script setup>
+import { tv } from "tailwind-variants";
+const header = tv({
+  slots: {
+    root: "sticky top-0 z-50 h-(--ui-header-height)",
+    container: "h-full flex flex-row items-center justify-between p-sm",
+    left: "hidden lg:flex",
+    center: "hidden lg:flex",
+    right: "hidden lg:flex",
+    collapsedLeft: "lg:hidden",
+    collapsedCenter: "lg:hidden",
+    collapsedRight: "lg:hidden"
+  }
+});
+const {
+  root,
+  container,
+  left,
+  center,
+  right,
+  collapsedLeft,
+  collapsedCenter,
+  collapsedRight
+} = header();
+</script>
 
 <template>
-  <header class="sticky top-0 z-50 h-[var(--ui-header-height)]">
-    <UContainer class="h-full">
-      <div class="flex h-full flex-row items-center justify-between p-sm">
-        <div class="lg:hidden">
-          <slot name="collapsed-left" />
-        </div>
-        <div class="lg:hidden">
-          <slot name="collapsed-center" />
-        </div>
-        <div class="lg:hidden">
-          <slot name="collapsed-right" />
-        </div>
-        <div class="hidden lg:flex">
-          <slot name="left" />
-        </div>
-        <div class="hidden lg:flex">
-          <slot name="center" />
-        </div>
-        <div class="hidden lg:flex">
-          <slot name="right" />
-        </div>
+  <header :class="root()">
+    <UContainer :class="container()">
+      <div :class="left()">
+        <slot name="left" />
+      </div>
+      <div :class="center()">
+        <slot name="center" />
+      </div>
+      <div :class="right()">
+        <slot name="right" />
+      </div>
+      <div :class="collapsedLeft()">
+        <slot name="collapsed-left" />
+      </div>
+      <div :class="collapsedCenter()">
+        <slot name="collapsed-center" />
+      </div>
+      <div :class="collapsedRight()">
+        <slot name="collapsed-right" />
       </div>
     </UContainer>
   </header>
 </template>
-
-<style scoped></style>

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

@@ -1,16 +1,16 @@
 declare var __VLS_6: {}, __VLS_8: {}, __VLS_10: {}, __VLS_12: {}, __VLS_14: {}, __VLS_16: {};
 type __VLS_Slots = {} & {
-    'collapsed-left'?: (props: typeof __VLS_6) => any;
+    left?: (props: typeof __VLS_6) => any;
 } & {
-    'collapsed-center'?: (props: typeof __VLS_8) => any;
+    center?: (props: typeof __VLS_8) => any;
 } & {
-    'collapsed-right'?: (props: typeof __VLS_10) => any;
+    right?: (props: typeof __VLS_10) => any;
 } & {
-    left?: (props: typeof __VLS_12) => any;
+    'collapsed-left'?: (props: typeof __VLS_12) => any;
 } & {
-    center?: (props: typeof __VLS_14) => any;
+    'collapsed-center'?: (props: typeof __VLS_14) => any;
 } & {
-    right?: (props: typeof __VLS_16) => any;
+    'collapsed-right'?: (props: typeof __VLS_16) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

package/dist/runtime/components/{app/ConstructionBanner.d.vue.ts → feedback/Feedback.d.vue.ts}

@@ -1,5 +1,8 @@
 type __VLS_Props = {
-    to: string;
+    page: {
+        title: string;
+        stem: 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;

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

@@ -0,0 +1,207 @@
+<script setup>
+import { AnimatePresence, MotionConfig, motion } from "motion-v";
+const {} = defineProps({
+  page: { type: Object, required: true }
+});
+const {
+  formState,
+  isExpanded,
+  isSubmitted,
+  isSubmitting,
+  handleRatingSelect,
+  submitFeedback
+} = useFeedbackForm(props);
+</script>
+
+<template>
+  <MotionConfig
+    :transition="{ type: 'spring', visualDuration: 0.25, bounce: 0 }"
+  >
+    <motion.div layout class="max-w-md rounded-lg">
+      <AnimatePresence mode="wait">
+        <!-- Success State -->
+        <motion.div
+          v-if="isSubmitted"
+          key="success"
+          :initial="{ opacity: 0, scale: 0.95 }"
+          :animate="{ opacity: 1, scale: 1 }"
+          :transition="{ duration: 0.3 }"
+          class="flex items-center gap-3 py-2"
+          role="status"
+          aria-live="polite"
+          aria-label="Feedback submitted successfully"
+        >
+          <motion.div
+            :initial="{ scale: 0 }"
+            :animate="{ scale: 1 }"
+            :transition="{ delay: 0.1, type: 'spring', visualDuration: 0.4 }"
+            class="text-xl"
+            aria-hidden="true"
+          >
+            ✨
+          </motion.div>
+          <motion.div
+            :initial="{ opacity: 0, x: 10 }"
+            :animate="{ opacity: 1, x: 0 }"
+            :transition="{ delay: 0.2, duration: 0.3 }"
+          >
+            <div class="text-sm font-medium text-highlighted">
+              Thank you for your feedback!
+            </div>
+            <div class="mt-1 text-xs text-muted">
+              Your input helps us improve the documentation.
+            </div>
+          </motion.div>
+        </motion.div>
+
+        <motion.div v-else key="feedback">
+          <fieldset>
+            <motion.div layout class="flex items-center gap-3">
+              <motion.legend
+                id="feedback-legend"
+                layout
+                class="text-sm font-medium whitespace-nowrap text-highlighted"
+              >
+                Was this helpful?
+              </motion.legend>
+
+              <motion.div
+                layout
+                class="flex gap-2"
+                role="radiogroup"
+                aria-labelledby="feedback-legend"
+              >
+                <UButton
+                  v-for="option in FEEDBACK_OPTIONS"
+                  :key="option.value"
+                  class="flex size-8 items-center justify-center rounded-lg border grayscale-80 transition-all duration-150 hover:grayscale-0 focus:outline-2 focus:outline-offset-2 focus:outline-primary"
+                  :class="[
+  formState.rating === option.value ? 'border-primary bg-primary/20 grayscale-0 hover:bg-primary/30' : 'border-default bg-accented/20 hover:border-accented/70 hover:bg-accented/80'
+]"
+                  :aria-label="`Rate as ${option.label}`"
+                  :aria-pressed="formState.rating === option.value"
+                  role="radio"
+                  :aria-checked="formState.rating === option.value"
+                  @click="handleRatingSelect(option.value)"
+                >
+                  <span class="text-lg">{{ option.emoji }}</span>
+                </UButton>
+              </motion.div>
+            </motion.div>
+          </fieldset>
+
+          <AnimatePresence>
+            <motion.div
+              v-if="isExpanded"
+              key="expanded-form"
+              :initial="{ opacity: 0, height: 0, marginTop: 0 }"
+              :animate="{ opacity: 1, height: 'auto', marginTop: 8 }"
+              :exit="{ opacity: 0, height: 0, marginTop: 0 }"
+              :transition="{ duration: 0.3, ease: 'easeInOut' }"
+              class="overflow-hidden"
+              role="region"
+              aria-label="Additional feedback form"
+            >
+              <motion.div
+                :initial="{ opacity: 0 }"
+                :animate="{ opacity: 1 }"
+                :transition="{ delay: 0.15, duration: 0.2 }"
+                class="space-y-1"
+              >
+                <UForm
+                  :state="formState"
+                  :schema="feedbackFormSchema"
+                  @submit="submitFeedback"
+                >
+                  <UFormField name="feedback">
+                    <label for="feedback-textarea" class="sr-only">
+                      Additional feedback (optional)
+                    </label>
+                    <UTextarea
+                      id="feedback-textarea"
+                      ref="textareaRef"
+                      v-model="formState.feedback"
+                      class="resize-vertical w-full rounded-xl text-sm leading-relaxed"
+                      placeholder="Share your thoughts... (optional)"
+                      :rows="4"
+                      autoresize
+                      aria-describedby="feedback-help"
+                    />
+                    <div id="feedback-help" class="sr-only">
+                      Provide additional details about your experience with this
+                      page
+                    </div>
+                  </UFormField>
+                  <div class="mt-2 flex items-center">
+                    <div class="flex gap-2">
+                      <UButton
+                        size="sm"
+                        :disabled="isSubmitting"
+                        type="submit"
+                        class="focus:outline-0"
+                        :aria-label="
+  isSubmitting ? 'Sending feedback...' : 'Send feedback'
+"
+                      >
+                        <motion.span
+                          class="flex items-center"
+                          :transition="{ duration: 0.2, ease: 'easeInOut' }"
+                        >
+                          <motion.div
+                            :animate="{
+  width: isSubmitting ? '14px' : '0px',
+  marginRight: isSubmitting ? '6px' : '0px',
+  opacity: isSubmitting ? 1 : 0,
+  scale: isSubmitting ? 1 : 0,
+  rotate: isSubmitting ? 360 : 0
+}"
+                            :transition="{
+  width: { duration: 0.2, ease: 'easeInOut' },
+  marginRight: { duration: 0.2, ease: 'easeInOut' },
+  opacity: { duration: 0.2 },
+  scale: {
+    duration: 0.2,
+    type: 'spring',
+    bounce: 0.3
+  },
+  rotate: {
+    duration: 1,
+    ease: 'linear',
+    repeat: Infinity
+  }
+}"
+                            class="flex items-center justify-center overflow-hidden"
+                          >
+                            <Icon
+                              name="mdi:loading"
+                              class="size-3.5 shrink-0"
+                            />
+                          </motion.div>
+                          <motion.span
+                            :animate="{
+  opacity: 1
+}"
+                            :transition="{ duration: 0.2, ease: 'easeInOut' }"
+                          >
+                            {{ isSubmitting ? "Sending..." : "Send" }}
+                          </motion.span>
+                        </motion.span>
+                      </UButton>
+                    </div>
+                  </div>
+                </UForm>
+              </motion.div>
+            </motion.div>
+          </AnimatePresence>
+        </motion.div>
+      </AnimatePresence>
+
+      <div aria-live="polite" class="sr-only">
+        <span v-if="isSubmitting">Sending your feedback...</span>
+        <span v-else-if="isExpanded && formState.rating">
+          Feedback form expanded. You can now add additional comments.
+        </span>
+      </div>
+    </motion.div>
+  </MotionConfig>
+</template>

package/dist/runtime/components/{app/ConstructionBanner.vue.d.ts → feedback/Feedback.vue.d.ts}

@@ -1,5 +1,8 @@
 type __VLS_Props = {
-    to: string;
+    page: {
+        title: string;
+        stem: 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;

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

@@ -0,0 +1,18 @@
+type PageAnalytic = {
+    path: string;
+    total: number;
+    positive: number;
+    negative: number;
+    averageScore: number;
+    positivePercentage: number;
+    feedback: any[];
+    lastFeedback: any;
+    createdAt: Date;
+    updatedAt: Date;
+};
+type __VLS_Props = {
+    pageAnalytics: PageAnalytic[];
+};
+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;