rimelight-components 1.2.1 → 1.3.0

package/dist/module.mjs

@@ -40,6 +40,12 @@ const module = defineNuxtModule({
         }
       }
     },
+    "@vueuse/nuxt": {
+      version: ">=13.9.0",
+      optional: false,
+      overrides: {},
+      defaults: {}
+    },
     "motion-v/nuxt": {
       version: ">=1.7.2",
       optional: false,

package/dist/runtime/components/{feedback/Feedback.d.vue.ts → swatches/ColorSwatch.d.vue.ts}

@@ -1,8 +1,9 @@
 type __VLS_Props = {
-    page: {
-        title: string;
-        stem: string;
-    };
+    hex?: string;
+    rgb?: string;
+    hsl?: string;
+    oklch?: string;
+    cmyk?: 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/swatches/ColorSwatch.vue

@@ -0,0 +1,90 @@
+<script setup>
+const { copy } = useClipboard();
+const toast = useToast();
+const { hex, rgb, hsl, oklch, cmyk } = defineProps({
+  hex: { type: String, required: false },
+  rgb: { type: String, required: false },
+  hsl: { type: String, required: false },
+  oklch: { type: String, required: false },
+  cmyk: { type: String, required: false }
+});
+const copyToClipboard = async (text) => {
+  try {
+    await copy(`${text}`);
+    toast.add({
+      title: `Color copied to clipboard!`,
+      description: text,
+      color: `success`
+    });
+  } catch {
+    toast.add({
+      title: `Failed to copy color to clipboard.`,
+      description: `An unexpected error occurred. Please try again.`,
+      color: `error`
+    });
+  }
+};
+const color = computed(() => {
+  if (hex) return hex;
+  if (rgb) return rgb;
+  if (hsl) return hsl;
+  if (cmyk) return cmyk;
+  if (oklch) return oklch;
+  return "primary-500";
+});
+</script>
+
+<template>
+  <UCard>
+    <div class="flex flex-row gap-sm">
+      <div class="aspect-square size-64" :class="`bg-[${color}]`" />
+      <div class="flex flex-col justify-center gap-sm">
+        <UButton
+          v-if="hex"
+          variant="outline"
+          size="sm"
+          icon="lucide:copy"
+          label="Copy HEX"
+          class="w-32"
+          @click="copyToClipboard(hex)"
+        />
+        <UButton
+          v-if="rgb"
+          variant="outline"
+          size="sm"
+          icon="lucide:copy"
+          label="Copy RGB"
+          class="w-32"
+          @click="copyToClipboard(rgb)"
+        />
+        <UButton
+          v-if="hsl"
+          variant="outline"
+          size="sm"
+          icon="lucide:copy"
+          label="Copy HSL"
+          class="w-32"
+          @click="copyToClipboard(hsl)"
+        />
+        <UButton
+          v-if="oklch"
+          variant="outline"
+          size="sm"
+          icon="lucide:copy"
+          label="Copy OKLCH"
+          class="w-32"
+          @click="copyToClipboard(oklch)"
+        />
+        <UButton
+          v-if="cmyk"
+          variant="outline"
+          size="sm"
+          icon="lucide:copy"
+          label="Copy CMYK"
+          class="w-32"
+          @click="copyToClipboard(cmyk)"
+        />
+      </div>
+    </div>
+  </UCard>
+</template>

package/dist/runtime/components/{feedback/Feedback.vue.d.ts → swatches/ColorSwatch.vue.d.ts}

@@ -1,8 +1,9 @@
 type __VLS_Props = {
-    page: {
-        title: string;
-        stem: string;
-    };
+    hex?: string;
+    rgb?: string;
+    hsl?: string;
+    oklch?: string;
+    cmyk?: 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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "rimelight-components",
-  "version": "1.2.1",
+  "version": "1.3.0",
   "description": "My new Nuxt module",
   "repository": "Rimelight  Entertainment/rimelight-components",
   "license": "MIT",
@@ -13,7 +13,6 @@
     "./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"
@@ -50,6 +49,7 @@
     "@nuxt/kit": "^4.1.3",
     "@nuxt/ui": "^4.0.1",
     "@vueuse/core": "^13.9.0",
+    "@vueuse/nuxt": "^13.9.0",
     "date-fns": "^4.1.0",
     "nuxt": "^4.1.3",
     "tailwind-variants": "^3.1.1",

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

@@ -1,207 +0,0 @@
-<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/feedback/FeedbackChart.d.vue.ts

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