rimelight-components 1.5.1 → 1.5.2

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

@@ -34,7 +34,7 @@ const tooltip = computed(() => config.value.tooltip);
     </template>
     <template #close>
       <UTooltip :text="tooltip">
-        <UIcon name="lucide:circle-question-mark" class="size-4" />
+        <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,15 +14,15 @@ 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"
     });
   }
 };

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,6 +1,6 @@
 {
   "name": "rimelight-components",
-  "version": "1.5.1",
+  "version": "1.5.2",
   "description": "My new Nuxt module",
   "repository": "Rimelight  Entertainment/rimelight-components",
   "license": "MIT",