rimelight-components 2.1.17 → 2.1.19

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

@@ -1,12 +1,29 @@
 <script setup>
-import { computed } from "#imports";
-const { name, jpg, png, webp, svg } = defineProps({
+import { computed } from "vue";
+import { tv } from "../../utils/tv";
+import { useRC } from "../../composables/useRC";
+const { name, jpg, png, webp, svg, rc: rcProp } = 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 }
+  svg: { type: String, required: false },
+  rc: { type: Object, required: false }
 });
+const emit = defineEmits([]);
+const slots = defineSlots();
+const { rc } = useRC("ImageSwatch", rcProp);
+const imageSwatchStyles = tv({
+  slots: {
+    card: "w-full rounded-none xl:w-fit",
+    title: "text-lg font-bold",
+    content: "flex flex-col items-center gap-sm xl:flex-row xl:items-start",
+    image: "size-48",
+    buttonGroup: "flex w-full flex-col justify-center gap-sm",
+    button: "w-full xl:w-36"
+  }
+});
+const { card, title: titleStyle, content, image: imageStyle, buttonGroup, button } = imageSwatchStyles();
 const image = computed(() => {
   if (webp) return webp;
   if (png) return png;
@@ -17,20 +34,20 @@ const image = computed(() => {
 </script>
 
 <template>
-  <UCard variant="subtle" class="w-full rounded-none xl:w-fit">
+  <UCard variant="subtle" :class="card({ class: rc.card })">
     <template #header v-if="name">
-      <h3 class="text-lg font-bold">{{ name }}</h3>
+      <h3 :class="titleStyle({ class: rc.title })">{{ name }}</h3>
     </template>
-    <div class="flex flex-col items-center gap-sm xl:flex-row xl:items-start">
-      <NuxtImg :src="image" class="size-48" />
-      <div class="flex w-full flex-col justify-center gap-sm">
+    <div :class="content({ class: rc.content })">
+      <NuxtImg :src="image" :class="imageStyle({ class: rc.image })" />
+      <div :class="buttonGroup({ class: rc.buttonGroup })">
         <UButton
           v-if="jpg"
           variant="outline"
           size="sm"
           icon="lucide:download"
           label="Download JPG"
-          class="w-full xl:w-36"
+          :class="button({ class: rc.button })"
           :to="jpg"
           target="_blank"
         />
@@ -40,7 +57,7 @@ const image = computed(() => {
           size="sm"
           icon="lucide:download"
           label="Download PNG"
-          class="w-full xl:w-36"
+          :class="button({ class: rc.button })"
           :to="png"
           target="_blank"
         />
@@ -50,7 +67,7 @@ const image = computed(() => {
           size="sm"
           icon="lucide:download"
           label="Download WEBP"
-          class="w-full xl:w-36"
+          :class="button({ class: rc.button })"
           :to="webp"
           target="_blank"
         />
@@ -60,7 +77,7 @@ const image = computed(() => {
           size="sm"
           icon="lucide:download"
           label="Download SVG"
-          class="w-full xl:w-36"
+          :class="button({ class: rc.button })"
           :to="svg"
           target="_blank"
         />

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

@@ -1,10 +1,29 @@
-type __VLS_Props = {
+export interface ImageSwatchProps {
     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>;
+    rc?: {
+        card?: string;
+        title?: string;
+        content?: string;
+        image?: string;
+        buttonGroup?: string;
+        button?: string;
+    };
+}
+export interface ImageSwatchEmits {
+}
+export interface ImageSwatchSlots {
+}
+type __VLS_Slots = ImageSwatchSlots;
+declare const __VLS_base: import("vue").DefineComponent<ImageSwatchProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ImageSwatchProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;
 export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/utilities/Placeholder.d.vue.ts

@@ -1,8 +1,16 @@
-declare var __VLS_1: {};
-type __VLS_Slots = {} & {
-    default?: (props: typeof __VLS_1) => 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>;
+export interface PlaceholderProps {
+    rc?: {
+        base?: string;
+        svg?: string;
+    };
+}
+export interface PlaceholderEmits {
+}
+export interface PlaceholderSlots {
+    default: (props: {}) => any;
+}
+type __VLS_Slots = PlaceholderSlots;
+declare const __VLS_base: import("vue").DefineComponent<PlaceholderProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<PlaceholderProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/components/utilities/Placeholder.vue

@@ -1,10 +1,24 @@
-<script setup lang="ts"></script>
+<script setup>
+import { tv } from "../../utils/tv";
+import { useRC } from "../../composables/useRC";
+const { rc: rcProp } = defineProps({
+  rc: { type: Object, required: false }
+});
+const emit = defineEmits([]);
+const slots = defineSlots();
+const { rc } = useRC("Placeholder", rcProp);
+const placeholderStyles = tv({
+  slots: {
+    base: "relative flex items-center justify-center overflow-hidden rounded-sm border border-dashed border-accented px-4 opacity-75",
+    svg: "absolute inset-0 h-full w-full stroke-inverted/10"
+  }
+});
+const { base, svg } = placeholderStyles();
+</script>
 
 <template>
-  <div
-    class="relative flex items-center justify-center overflow-hidden rounded-sm border border-dashed border-accented px-4 opacity-75"
-  >
-    <svg class="absolute inset-0 h-full w-full stroke-inverted/10">
+  <div :class="base({ class: rc.base })">
+    <svg :class="svg({ class: rc.svg })">
       <defs>
         <pattern
           id="pattern-5c1e4f0e-62d5-498b-8ff0-cf77bb448c8e"

package/dist/runtime/components/utilities/Placeholder.vue.d.ts

@@ -1,8 +1,16 @@
-declare var __VLS_1: {};
-type __VLS_Slots = {} & {
-    default?: (props: typeof __VLS_1) => 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>;
+export interface PlaceholderProps {
+    rc?: {
+        base?: string;
+        svg?: string;
+    };
+}
+export interface PlaceholderEmits {
+}
+export interface PlaceholderSlots {
+    default: (props: {}) => any;
+}
+type __VLS_Slots = PlaceholderSlots;
+declare const __VLS_base: import("vue").DefineComponent<PlaceholderProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<PlaceholderProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/composables/index.d.ts

@@ -4,3 +4,4 @@ export * from "./usePageEditor.js";
 export * from "./useBlockEditor.js";
 export * from "./usePageRegistry.js";
 export * from "./useInfobox.js";
+export * from "./useRC.js";

package/dist/runtime/composables/index.js

@@ -4,3 +4,4 @@ export * from "./usePageEditor.js";
 export * from "./useBlockEditor.js";
 export * from "./usePageRegistry.js";
 export * from "./useInfobox.js";
+export * from "./useRC.js";

package/dist/runtime/composables/index.mjs

@@ -4,3 +4,4 @@ export * from "./usePageEditor.mjs";
 export * from "./useBlockEditor.mjs";
 export * from "./usePageRegistry.mjs";
 export * from "./useInfobox.mjs";
+export * from "./useRC.mjs";

package/dist/runtime/composables/useRC.d.ts

@@ -0,0 +1,3 @@
+export declare function useRC<T extends Record<string, any>>(namespace: string, propsProp: T | undefined): {
+    rc: import("vue").ComputedRef<T | (T extends any ? T : Omit<T, keyof T & (string | number | symbol)> & Omit<any, keyof T & (string | number | symbol)> & { -readonly [Key in keyof T & (string | number | symbol)]: T[Key] extends void | null | undefined ? any : T[Key] | (T[Key] extends infer T_1 ? T_1 extends T[Key] ? T_1 extends void | null | undefined ? any : T_1 | (T_1 extends any[] ? any : T_1 extends Function ? any : T_1 extends RegExp ? any : T_1 extends Promise<any> ? any : any) : never : never); })>;
+};

package/dist/runtime/composables/useRC.js

@@ -0,0 +1,14 @@
+import { computed } from "vue";
+import { useAppConfig } from "#imports";
+import { defu } from "defu";
+export function useRC(namespace, propsProp) {
+  const appConfig = useAppConfig();
+  const rc = computed(() => {
+    const config = appConfig.rimelightComponents || {};
+    const conf = config[namespace] || config[namespace.toLowerCase()] || {};
+    return defu(propsProp || {}, conf.slots || conf);
+  });
+  return {
+    rc
+  };
+}

package/dist/runtime/composables/useRC.mjs

@@ -0,0 +1,14 @@
+import { computed } from "vue";
+import { useAppConfig } from "#imports";
+import { defu } from "defu";
+export function useRC(namespace, propsProp) {
+  const appConfig = useAppConfig();
+  const rc = computed(() => {
+    const config = appConfig.rimelightComponents || {};
+    const conf = config[namespace] || config[namespace.toLowerCase()] || {};
+    return defu(propsProp || {}, conf.slots || conf);
+  });
+  return {
+    rc
+  };
+}

package/dist/runtime/types/app.config.d.ts

@@ -0,0 +1,6 @@
+declare module '#build/app.config' {
+  import type { AppConfig } from '@nuxt/schema'
+
+  const _default: AppConfig
+  export default _default
+}

package/dist/runtime/types/schemas.d.ts

@@ -5,12 +5,12 @@ import { type Localized } from "./index.js";
  */
 export declare const LocalizedSchema: <T extends z.ZodTypeAny>(schema: T) => z.ZodType<Localized<z.infer<T>>>;
 export declare const linkVariantEnum: z.ZodEnum<{
-    link: "link";
     solid: "solid";
     outline: "outline";
     soft: "soft";
     subtle: "subtle";
     ghost: "ghost";
+    link: "link";
 }>;
 export declare const linkColorEnum: z.ZodEnum<{
     primary: "primary";
@@ -44,12 +44,12 @@ export declare const LinkSchema: z.ZodObject<{
         error: "error";
     }>>;
     variant: z.ZodOptional<z.ZodEnum<{
-        link: "link";
         solid: "solid";
         outline: "outline";
         soft: "soft";
         subtle: "subtle";
         ghost: "ghost";
+        link: "link";
     }>>;
 }, z.core.$strip>;
 export type Link = z.infer<typeof LinkSchema>;

package/dist/runtime/types/tv.d.ts

@@ -0,0 +1,66 @@
+import type { ClassValue, TVVariants, TVCompoundVariants, TVDefaultVariants } from 'tailwind-variants';
+/**
+ * Defines the AppConfig object based on the tailwind-variants configuration.
+ */
+export type TVConfig<T extends Record<string, any>> = {
+    [P in keyof T]?: {
+        [K in keyof T[P] as K extends 'base' | 'slots' | 'variants' | 'defaultVariants' ? K : never]?: K extends 'base' ? ClassValue : K extends 'slots' ? {
+            [S in keyof T[P]['slots']]?: ClassValue;
+        } : K extends 'variants' ? TVVariants<T[P]['slots'], ClassValue, WidenVariantsValues<T[P]['variants']>> : K extends 'defaultVariants' ? TVDefaultVariants<WidenVariantsValues<T[P]['variants']>, T[P]['slots'], object, undefined> : never;
+    };
+} & {
+    [P in keyof T]?: {
+        compoundVariants?: TVCompoundVariants<WidenVariantsValues<T[P]['variants']>, T[P]['slots'], ClassValue, object, undefined>;
+    };
+};
+type WidenVariantsValues<V extends Record<string, any> | undefined> = V extends Record<string, any> ? V & {
+    [K in keyof V]: V[K] extends Record<string, any> ? V[K] & Record<string & {}, any> : V[K];
+} : V;
+/**
+ * Utility type to flatten intersection types for better IDE hover information.
+ * @template T The type to flatten.
+ */
+type Id<T> = {} & {
+    [P in keyof T]: T[P];
+};
+type ComponentVariants<T extends {
+    variants?: Record<string, Record<string, any>>;
+}> = {
+    [K in keyof T['variants']]: keyof T['variants'][K];
+};
+type ComponentSlots<T extends {
+    slots?: Record<string, any>;
+}> = Id<{
+    [K in keyof T['slots']]?: ClassValue;
+}>;
+type ComponentUI<T extends {
+    slots?: Record<string, any>;
+}> = Id<{
+    [K in keyof Required<T['slots']>]: (props?: Record<string, any>) => string;
+}>;
+type GetComponentAppConfig<A, U extends string, K extends string> = A extends Record<U, Record<K, any>> ? A[U][K] : {};
+type ComponentAppConfig<T, A extends Record<string, any>, K extends string, U extends string = 'ui' | 'ui.prose'> = A & (U extends 'ui.prose' ? {
+    ui?: {
+        prose?: {
+            [k in K]?: Partial<T>;
+        };
+    };
+} : {
+    [key in Exclude<U, 'ui.prose'>]?: {
+        [k in K]?: Partial<T>;
+    };
+});
+/**
+ * Defines the configuration shape expected for a component.
+ * @template T The component's theme imported from `#build/rimelight-components/*`.
+ * @template A The base AppConfig type from `@nuxt/schema`.
+ * @template K The key identifying the component (e.g., 'badge').
+ * @template U The top-level key in AppConfig ('rimelightComponents').
+ */
+export type ComponentConfig<T extends Record<string, any>, A extends Record<string, any>, K extends string, U extends 'rimelightComponents'> = {
+    AppConfig: ComponentAppConfig<T, A, K, U>;
+    variants: ComponentVariants<T & GetComponentAppConfig<A, U, K>>;
+    slots: ComponentSlots<T>;
+    ui: ComponentUI<T>;
+};
+export {};

package/dist/runtime/utils/index.d.ts

@@ -1,5 +1,6 @@
 export * from "./richTextHelpers.js";
 export * from "./page.js";
+export * from "./tv.js";
 /**
  * Converts a string into a URL-friendly slug.
  * - Converts to lowercase.

package/dist/runtime/utils/index.js

@@ -1,5 +1,6 @@
 export * from "./richTextHelpers.js";
 export * from "./page.js";
+export * from "./tv.js";
 export function slugify(text) {
   if (!text) {
     return "";

package/dist/runtime/utils/index.mjs

@@ -1,5 +1,6 @@
 export * from "./richTextHelpers.mjs";
 export * from "./page.mjs";
+export * from "./tv.mjs";
 export function slugify(text) {
   if (!text) {
     return "";

package/dist/runtime/utils/tv.d.ts

@@ -0,0 +1 @@
+export declare const tv: import("tailwind-variants").TV;

package/dist/runtime/utils/tv.js

@@ -0,0 +1,4 @@
+import { createTV } from "tailwind-variants";
+import appConfig from "#build/app.config";
+const appConfigTv = appConfig;
+export const tv = /* @__PURE__ */ createTV(appConfigTv.rimelightComponents?.tv);

package/dist/runtime/utils/tv.mjs

@@ -0,0 +1,4 @@
+import { createTV } from "tailwind-variants";
+import appConfig from "#build/app.config";
+const appConfigTv = appConfig;
+export const tv = /* @__PURE__ */ createTV(appConfigTv.rimelightComponents?.tv);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "rimelight-components",
-  "version": "2.1.17",
+  "version": "2.1.19",
   "description": "A component library by Rimelight Entertainment.",
   "keywords": [
     "nuxt",