rimelight-components 1.5.1 → 1.6.0

package/dist/module.d.mts

@@ -3,7 +3,7 @@ import * as _nuxt_schema from '@nuxt/schema';
 interface CalloutOptions {
     icon: string;
     title: string;
-    tooltip: string;
+    description: string;
 }
 interface ModuleOptions {
     callouts: {

package/dist/module.mjs

@@ -4,38 +4,38 @@ const defaultOptions = {
   callouts: {
     info: {
       icon: "lucide:shield-alert",
-      title: "Note",
-      tooltip: "This callout is used for general notes."
+      title: "",
+      description: ""
     },
     success: {
       icon: "lucide:circle-alert",
-      title: "Tip",
-      tooltip: "This callout is used for tips and useful information."
+      title: "",
+      description: ""
     },
     warning: {
       icon: "lucide:triangle-alert",
-      title: "Warning",
-      tooltip: "This callout is used for important information."
+      title: "",
+      description: ""
     },
     error: {
       icon: "lucide:octagon-alert",
-      title: "Danger",
-      tooltip: "This callout is used for critical information and prohibitions."
+      title: "",
+      description: ""
     },
     commentary: {
       icon: "lucide:message-circle-warning",
-      title: "Commentary",
-      tooltip: "This callout is used for developer commentary."
+      title: "",
+      description: ""
     },
     ideation: {
       icon: "lucide:badge-alert",
-      title: "Ideation",
-      tooltip: "This alert is used for ideas and brainstorming."
+      title: "",
+      description: ""
     },
     source: {
       icon: "lucide:book-alert",
-      title: "Creator's Remarks",
-      tooltip: "This alert is used for direct commentary of the author."
+      title: "",
+      description: ""
     }
   }
 };
@@ -57,6 +57,12 @@ const module = defineNuxtModule({
       overrides: {},
       defaults: {}
     },
+    "@nuxtjs/i18n": {
+      version: ">=10.1.1",
+      optional: false,
+      overrides: {},
+      defaults: {}
+    },
     "@nuxt/ui": {
       version: ">=4.0.0",
       optional: false,

package/dist/runtime/components/content/Callout.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { useAppConfig } from "nuxt/app";
+import { useAppConfig } from "#imports";
 import { computed } from "#imports";
 const appConfig = useAppConfig();
 const { variant } = defineProps({
@@ -8,18 +8,18 @@ const { variant } = defineProps({
 const config = computed(() => {
   return appConfig.rimelightComponents?.callouts?.[variant] ?? {
     icon: "lucide:alert-circle",
-    title: "Unknown",
-    tooltip: "Callout"
+    title: "Callout",
+    description: "Callout"
   };
 });
 const icon = computed(() => config.value.icon);
 const title = computed(() => config.value.title);
-const tooltip = computed(() => config.value.tooltip);
+const description = computed(() => config.value.description);
 </script>
 
 <template>
   <UAlert
-    :title="title"
+    :title="$t(title)"
     :color="variant"
     variant="subtle"
     :close="{
@@ -33,8 +33,8 @@ const tooltip = computed(() => config.value.tooltip);
       <slot />
     </template>
     <template #close>
-      <UTooltip :text="tooltip">
-        <UIcon name="lucide:circle-question-mark" class="size-4" />
+      <UTooltip v-if="description" :text="$t(description)">
+        <UIcon name="lucide:circle-question-mark" class="size-5" />
       </UTooltip>
     </template>
   </UAlert>

package/dist/runtime/components/content/Section.d.vue.ts

@@ -4,9 +4,9 @@ type __VLS_Props = {
     title: string;
     description?: string;
 };
-declare var __VLS_11: {};
+declare var __VLS_24: {};
 type __VLS_Slots = {} & {
-    default?: (props: typeof __VLS_11) => any;
+    default?: (props: typeof __VLS_24) => any;
 };
 declare const __VLS_base: 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 __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

package/dist/runtime/components/content/Section.vue

@@ -1,8 +1,30 @@
 <script setup>
+import { useClipboard, useToast, useRoute, computed } from "#imports";
 import { tv } from "tailwind-variants";
+import { slugify } from "../../utils";
+const { copy } = useClipboard();
+const toast = useToast();
+const route = useRoute();
+const copyToClipboard = async (text) => {
+  try {
+    await copy(`${text}`);
+    toast.add({
+      title: "Heading copied to clipboard!",
+      description: text,
+      color: "success"
+    });
+  } catch {
+    toast.add({
+      title: "Failed to copy heading to clipboard.",
+      description: "An unexpected error occurred. Please try again.",
+      color: "error"
+    });
+  }
+};
 const sectionVariants = tv({
   slots: {
-    sectionSlot: "flex flex-col py-4",
+    sectionSlot: "flex flex-col py-4 scroll-mt-24",
+    linkSlot: "",
     headingSlot: "font-bold",
     descriptionSlot: "text-muted",
     separatorSlot: "py-2",
@@ -12,55 +34,104 @@ const sectionVariants = tv({
     level: {
       1: {
         sectionSlot: "gap-2",
+        linkSlot: "",
         headingSlot: "text-4xl",
-        descriptionSlot: "text-2xl"
+        descriptionSlot: "text-2xl",
+        separatorSlot: "",
+        contentSlot: ""
       },
       2: {
         sectionSlot: "gap-1.5",
+        linkSlot: "",
         headingSlot: "text-3xl",
-        descriptionSlot: "text-xl"
+        descriptionSlot: "text-xl",
+        separatorSlot: "",
+        contentSlot: ""
       },
       3: {
         sectionSlot: "gap-1",
+        linkSlot: "",
         headingSlot: "text-2xl",
-        descriptionSlot: "text-lg"
+        descriptionSlot: "text-lg",
+        separatorSlot: "",
+        contentSlot: ""
       },
       4: {
         sectionSlot: "gap-0.5",
+        linkSlot: "",
         headingSlot: "text-xl",
-        descriptionSlot: "text-md"
+        descriptionSlot: "text-md",
+        separatorSlot: "",
+        contentSlot: ""
       },
       5: {
         sectionSlot: "gap-0.25",
+        linkSlot: "",
         headingSlot: "text-lg",
-        descriptionSlot: "text-sm"
+        descriptionSlot: "text-sm",
+        separatorSlot: "",
+        contentSlot: ""
       },
       6: {
         sectionSlot: "gap-0.125",
+        linkSlot: "",
         headingSlot: "text-base",
-        descriptionSlot: "text-xs"
+        descriptionSlot: "text-xs",
+        separatorSlot: "",
+        contentSlot: ""
       }
     }
   }
 });
-const { level = 1 } = defineProps({
+const {
+  level = 1,
+  title,
+  description
+} = defineProps({
   level: { type: Number, required: false },
   title: { type: String, required: true },
   description: { type: String, required: false }
 });
 const {
   sectionSlot,
+  linkSlot,
   headingSlot,
   descriptionSlot,
   separatorSlot,
   contentSlot
 } = sectionVariants({ level });
+const sectionId = computed(() => slugify(title));
+const sectionHash = computed(() => `#${sectionId.value}`);
+const fullSectionUrl = computed(() => {
+  if (typeof window === "undefined") return sectionHash.value;
+  return `${window.location.origin}${route.path}${sectionHash.value}`;
+});
 </script>
 
 <template>
-  <section :class="sectionSlot()" v-bind="$attrs">
-    <component :is="`h${level}`" :class="headingSlot()">
-      {{ title }}
+  <section :id="sectionId" :class="sectionSlot()" v-bind="$attrs">
+    <component
+      :id="sectionId"
+      :is="`h${level}`"
+      :class="headingSlot()"
+      class="relative"
+    >
+      <NuxtLink
+        :href="`#${sectionId}`"
+        :class="linkSlot()"
+        :id="sectionId"
+        class="group lg:-ms-2 lg:ps-2"
+      >
+        <UButton
+          variant="soft"
+          color="primary"
+          leading-icon="lucide:link"
+          :to="`#${sectionId}`"
+          class="absolute top-1 -ms-8 hidden rounded-md p-1 opacity-0 transition group-hover:opacity-100 group-focus:opacity-100 lg:flex"
+          @click="copyToClipboard(fullSectionUrl)"
+        />
+        {{ title }}
+      </NuxtLink>
     </component>
     <p v-if="description" :class="descriptionSlot()">{{ description }}</p>
     <USeparator :class="separatorSlot()" />

package/dist/runtime/components/content/Section.vue.d.ts

@@ -4,9 +4,9 @@ type __VLS_Props = {
     title: string;
     description?: string;
 };
-declare var __VLS_11: {};
+declare var __VLS_24: {};
 type __VLS_Slots = {} & {
-    default?: (props: typeof __VLS_11) => any;
+    default?: (props: typeof __VLS_24) => any;
 };
 declare const __VLS_base: 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 __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

package/dist/runtime/components/swatches/ColorSwatch.vue

@@ -1,7 +1,5 @@
 <script setup>
-import { useClipboard } from "#imports";
-import { useToast } from "#imports";
-import { computed } from "#imports";
+import { useClipboard, useToast, computed } from "#imports";
 const { copy } = useClipboard();
 const toast = useToast();
 const { name, hex, rgb, hsl, oklch, cmyk } = defineProps({
@@ -16,18 +14,21 @@ const copyToClipboard = async (text) => {
   try {
     await copy(`${text}`);
     toast.add({
-      title: `Color copied to clipboard!`,
+      title: "Color copied to clipboard!",
       description: text,
-      color: `success`
+      color: "success"
     });
   } catch {
     toast.add({
-      title: `Failed to copy color to clipboard.`,
-      description: `An unexpected error occurred. Please try again.`,
-      color: `error`
+      title: "Failed to copy color to clipboard.",
+      description: "An unexpected error occurred. Please try again.",
+      color: "error"
     });
   }
 };
+function formatColor(color2) {
+  return color2.toUpperCase().replace(/[)]/g, "").replace(/[(]/g, " ").replace(/%/g, "");
+}
 const color = computed(() => {
   if (hex) return hex;
   if (rgb) return rgb;
@@ -44,7 +45,19 @@ const color = computed(() => {
       <h3 class="text-lg font-bold">{{ name }}</h3>
     </template>
     <div class="gap-sm flex flex-col items-center xl:flex-row xl:items-start">
-      <div class="aspect-square size-48" :style="{ backgroundColor: color }" />
+      <div
+        class="p-sm flex aspect-square size-48"
+        :style="{ backgroundColor: color }"
+      >
+        <div class="gap-xs flex flex-col justify-end text-xs">
+          <span v-if="name" class="text-sm">{{ formatColor(name) }}</span>
+          <span v-if="hex">HEX {{ formatColor(hex) }}</span>
+          <span v-if="rgb">{{ formatColor(rgb) }}</span>
+          <span v-if="hsl">{{ formatColor(hsl) }}</span>
+          <span v-if="oklch">{{ formatColor(oklch) }}</span>
+          <span v-if="cmyk">{{ formatColor(cmyk) }}</span>
+        </div>
+      </div>
       <div class="gap-sm flex w-full flex-col justify-center">
         <UButton
           v-if="hex"

package/dist/runtime/components/swatches/FontSwatch.d.vue.ts

@@ -0,0 +1,10 @@
+type __VLS_Props = {
+    name?: string;
+    jpg?: string;
+    png?: string;
+    webp?: string;
+    svg?: 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/swatches/FontSwatch.vue

@@ -0,0 +1,79 @@
+<script setup>
+import { computed } from "#imports";
+const { name, jpg, png, webp, svg } = defineProps({
+  name: { type: String, required: false },
+  jpg: { type: String, required: false },
+  png: { type: String, required: false },
+  webp: { type: String, required: false },
+  svg: { type: String, required: false }
+});
+const image = computed(() => {
+  if (webp) return webp;
+  if (png) return png;
+  if (jpg) return jpg;
+  if (svg) return svg;
+  return void 0;
+});
+</script>
+
+<template>
+  <UCard variant="subtle" class="w-full rounded-none xl:w-fit">
+    <template #header v-if="name">
+      <h3 class="text-lg font-bold">{{ name }}</h3>
+      <span></span>
+    </template>
+    <div class="gap-sm flex flex-col">
+      <h1>H1</h1>
+      <p>{{}}</p>
+    </div>
+    <h2>H2</h2>
+    <h3>H3</h3>
+    <p>a b c d e f g h i j k l m n o p q r s t u v w x y z</p>
+    <p>A B C D E F G H I J K L M N O P Q R S T U V W X Y Z</p>
+    <p></p>
+    <div class="gap-sm flex flex-col items-center xl:flex-row xl:items-start">
+      <div class="gap-sm flex w-full flex-col justify-center">
+        <UButton
+          v-if="jpg"
+          variant="outline"
+          size="sm"
+          icon="lucide:download"
+          label="Download JPG"
+          class="w-full xl:w-36"
+          :to="jpg"
+          target="_blank"
+        />
+        <UButton
+          v-if="png"
+          variant="outline"
+          size="sm"
+          icon="lucide:download"
+          label="Download PNG"
+          class="w-full xl:w-36"
+          :to="png"
+          target="_blank"
+        />
+        <UButton
+          v-if="webp"
+          variant="outline"
+          size="sm"
+          icon="lucide:download"
+          label="Download WEBP"
+          class="w-full xl:w-36"
+          :to="webp"
+          target="_blank"
+        />
+        <UButton
+          v-if="svg"
+          variant="outline"
+          size="sm"
+          icon="lucide:download"
+          label="Download SVG"
+          class="w-full xl:w-36"
+          :to="svg"
+          target="_blank"
+        />
+      </div>
+    </div>
+  </UCard>
+</template>

package/dist/runtime/components/swatches/FontSwatch.vue.d.ts

@@ -0,0 +1,10 @@
+type __VLS_Props = {
+    name?: string;
+    jpg?: string;
+    png?: string;
+    webp?: string;
+    svg?: 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/utils/index.d.ts

@@ -1,3 +1,14 @@
 import { type ClassValue } from "clsx";
 export declare function cn(...inputs: ClassValue[]): string;
 export type ObjectValues<T> = T[keyof T];
+/**
+ * Converts a string into a URL-friendly slug.
+ * - Converts to lowercase.
+ * - Replaces non-alphanumeric characters (except hyphens and spaces) with nothing.
+ * - Replaces spaces and multiple hyphens with a single hyphen.
+ * - Trims leading/trailing hyphens.
+ *
+ * @param text The string to convert (e.g., "My Awesome Section Title!").
+ * @returns The resulting slug (e.g., "my-awesome-section-title").
+ */
+export declare function slugify(text: string): string;

package/dist/runtime/utils/index.js

@@ -3,3 +3,9 @@ import { twMerge } from "tailwind-merge";
 export function cn(...inputs) {
   return twMerge(clsx(inputs));
 }
+export function slugify(text) {
+  if (!text) {
+    return "";
+  }
+  return text.toString().normalize("NFD").replace(/[\u0300-\u036f]/g, "").toLowerCase().trim().replace(/\s+/g, "-").replace(/[^\w\-]+/g, "").replace(/\-\-+/g, "-").replace(/^-+/, "").replace(/-+$/, "");
+}

package/package.json

@@ -1,20 +1,35 @@
 {
   "name": "rimelight-components",
-  "version": "1.5.1",
   "description": "My new Nuxt module",
-  "repository": "Rimelight  Entertainment/rimelight-components",
-  "license": "MIT",
+  "version": "1.6.0",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/Rimelight-Entertainment/rimelight-components.git"
+  },
+  "homepage": "https://rimelight.com/tools/rimelight-components",
   "type": "module",
+  "license": "MIT",
+  "keywords": [
+    "rimelight",
+    "typescript",
+    "vue",
+    "nuxt"
+  ],
+  "imports": {
+    "#build/rimelight-components/*": "./.nuxt/rimelight-components/*.ts",
+    "#build/rimelight-components.css": "./.nuxt/rimelight-components.css"
+  },
   "exports": {
     ".": {
-      "types": "./dist/types.d.mts",
+      "types": "./dist/module.d.mts",
+      "style": "./dist/runtime/index.css",
       "import": "./dist/module.mjs"
     },
     "./runtime/*": "./dist/runtime/*",
     "./components/*": "./dist/runtime/components/*",
     "./composables/*": "./dist/runtime/composables/*",
     "./utils/*": {
-      "types": "./dist/runtime/utils/*.d.ts",
+      "types": "./dist/runtime/utils/*.d.mts",
       "import": "./dist/runtime/utils/*.js"
     }
   },
@@ -48,6 +63,7 @@
     "@nuxt/image": "^1.11.0",
     "@nuxt/kit": "^4.1.3",
     "@nuxt/ui": "^4.0.1",
+    "@nuxtjs/i18n": "^10.1.1",
     "@vueuse/core": "^13.9.0",
     "@vueuse/nuxt": "^13.9.0",
     "date-fns": "^4.1.0",