rimelight-components 1.5.2 → 1.7.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,7 +33,7 @@ const tooltip = computed(() => config.value.tooltip);
       <slot />
     </template>
     <template #close>
-      <UTooltip :text="tooltip">
+      <UTooltip v-if="description" :text="$t(description)">
         <UIcon name="lucide:circle-question-mark" class="size-5" />
       </UTooltip>
     </template>

package/dist/runtime/components/page/PageSurround.d.vue.ts

@@ -0,0 +1,12 @@
+type __VLS_Props = {
+    pageType: string;
+    previousTitle?: string;
+    previousDescription?: string;
+    previousTo?: string;
+    nextTitle?: string;
+    nextDescription?: string;
+    nextTo?: 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/page/PageSurround.vue

@@ -0,0 +1,80 @@
+<script setup>
+const {
+  pageType,
+  previousTitle,
+  previousDescription,
+  previousTo,
+  nextTitle,
+  nextDescription,
+  nextTo
+} = defineProps({
+  pageType: { type: String, required: true },
+  previousTitle: { type: String, required: false },
+  previousDescription: { type: String, required: false },
+  previousTo: { type: String, required: false },
+  nextTitle: { type: String, required: false },
+  nextDescription: { type: String, required: false },
+  nextTo: { type: String, required: false }
+});
+</script>
+
+<template>
+  <div class="grid grid-cols-1 gap-8 sm:grid-cols-2">
+    <ULink v-if="previousTitle" :to="previousTo">
+      <UCard
+        variant="outline"
+        class="hover:bg-elevated/50 focus-visible:outline-primary group block bg-transparent"
+      >
+        <div class="gap-md flex flex-col">
+          <div class="gap-xs flex flex-col">
+            <UButton
+              variant="outline"
+              icon="lucide:arrow-left"
+              class="group-hover text-primary group-hover:text-highlighted w-fit rounded-full"
+            />
+            <span class="text-muted">
+              {{ $t("navigation_previous") }}
+              {{ $t(pageType) }}
+            </span>
+          </div>
+          <div class="gap-xs flex flex-col">
+            <p class="text-primary group-hover:text-highlighted">
+              {{ previousTitle }}
+            </p>
+            <p class="text-toned">
+              {{ previousDescription }}
+            </p>
+          </div>
+        </div>
+      </UCard>
+    </ULink>
+    <ULink v-if="nextTitle" :to="nextTo">
+      <UCard
+        variant="outline"
+        class="hover:bg-elevated/50 focus-visible:outline-primary group block bg-transparent"
+      >
+        <div class="gap-md flex flex-col items-end">
+          <div class="gap-xs flex flex-col items-end">
+            <UButton
+              variant="outline"
+              icon="lucide:arrow-right"
+              class="text-primary group-hover:text-highlighted w-fit rounded-full"
+            />
+            <span class="text-muted">
+              {{ $t("navigation_next") }}
+              {{ $t(pageType) }}</span
+            >
+          </div>
+          <div class="gap-xs flex flex-col items-end">
+            <p class="text-primary group-hover:text-highlighted">
+              {{ nextTitle }}
+            </p>
+            <p class="text-toned">
+              {{ nextDescription }}
+            </p>
+          </div>
+        </div>
+      </UCard>
+    </ULink>
+  </div>
+</template>

package/dist/runtime/components/page/PageSurround.vue.d.ts

@@ -0,0 +1,12 @@
+type __VLS_Props = {
+    pageType: string;
+    previousTitle?: string;
+    previousDescription?: string;
+    previousTo?: string;
+    nextTitle?: string;
+    nextDescription?: string;
+    nextTo?: 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/ColorSwatch.vue

@@ -26,6 +26,9 @@ const copyToClipboard = async (text) => {
     });
   }
 };
+function formatColor(color2) {
+  return color2.toUpperCase().replace(/[)]/g, "").replace(/[(]/g, " ").replace(/%/g, "");
+}
 const color = computed(() => {
   if (hex) return hex;
   if (rgb) return rgb;
@@ -42,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/package.json

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