rimelight-components 2.1.18 → 2.1.20

package/dist/runtime/components/page/PagePropertiesEditor.vue

@@ -1,13 +1,18 @@
 <script setup>
 import { computed } from "vue";
 import { useI18n } from "vue-i18n";
-import { usePageRegistry, useInfobox } from "../../composables";
+import { usePageRegistry, useInfobox, useRC } from "../../composables";
 import { getLocalizedContent } from "../../utils";
 import {} from "@nuxt/ui/components/Tabs.vue";
 import {} from "../../types";
-import { tv } from "tailwind-variants";
-const props = defineProps({});
+import { tv } from "../../internal/tv";
+const { rc: rcProp } = defineProps({
+  rc: { type: Object, required: false }
+});
+const page = defineModel({ type: null, ...{ required: true } });
 const emit = defineEmits([]);
+const slots = defineSlots();
+const { rc } = useRC("PagePropertiesEditor", rcProp);
 const pagePropertiesEditorStyles = tv({
   slots: {
     aside: "flex flex-col gap-md",
@@ -36,7 +41,6 @@ const {
   field,
   links
 } = pagePropertiesEditorStyles();
-const page = defineModel({ type: null, ...{ required: true } });
 const { getTypeLabelKey } = usePageRegistry();
 const { isFieldVisible, shouldRenderGroup, getSortedFields, getSortedGroups } = useInfobox(page.value.properties);
 const { locale, t } = useI18n();
@@ -61,7 +65,7 @@ const updateTextArray = (schema, vals) => {
 </script>
 
 <template>
-  <aside :class="aside()">
+  <aside :class="aside({ class: rc.aside })">
     <UCard
       variant="soft"
       :ui="{ root: 'divide-none', header: 'bg-accented text-center', body: 'p-0 sm:p-0 bg-muted' }"
@@ -72,7 +76,7 @@ const updateTextArray = (schema, vals) => {
             v-if="page.icon?.src"
             :src="page.icon?.src"
             :alt="page.icon?.alt"
-            :class="icon()"
+            :class="icon({ class: rc.icon })"
           />
 
           <UInput
@@ -81,12 +85,12 @@ const updateTextArray = (schema, vals) => {
             placeholder="Enter page title..."
             size="xl"
             :ui="{ base: 'text-center font-bold text-lg' }"
-            :class="titleInput()"
+            :class="titleInput({ class: rc.titleInput })"
           />
 
-          <span :class="type()">{{ t(getTypeLabelKey(page.type)) }}</span>
+          <span :class="type({ class: rc.type })">{{ t(getTypeLabelKey(page.type)) }}</span>
 
-          <div v-if="page.tags?.length" :class="tags()">
+          <div v-if="page.tags?.length" :class="tags({ class: rc.tags })">
             <UBadge
               v-for="tag in page.tags"
               :key="tag[locale]"
@@ -106,10 +110,10 @@ const updateTextArray = (schema, vals) => {
               variant="link"
               size="xs"
               color="neutral"
-              :class="tabs()"
+              :class="tabs({ class: rc.tabs })"
             >
               <template #content="{ item }">
-                <RCImage :src="item.img.src" :alt="item.img.alt" :class="image()" />
+                <RCImage :src="item.img.src" :alt="item.img.alt" :class="image({ class: rc.image })" />
               </template>
             </UTabs>
 
@@ -117,7 +121,7 @@ const updateTextArray = (schema, vals) => {
               <RCImage
                 :src="page.images[0].src"
                 :alt="page.images[0].alt"
-                :class="image()"
+                :class="image({ class: rc.image })"
               />
             </div>
           </div>
@@ -136,92 +140,92 @@ const updateTextArray = (schema, vals) => {
   trailingIcon: 'group-data-[state=open]:rotate-180 transition-transform duration-200'
 }"
                 block
-                :class="groupButton()"
+                :class="groupButton({ class: rc.groupButton })"
               />
             </template>
 
             <template #content>
               <ClientOnly>
-               <dl :class="details()">
-                <template v-for="[fieldKey, schema] in getSortedFields(group.fields)" :key="fieldKey">
-                  <UFormField
-                    v-if="isFieldVisible(schema, false)"
-                    :label="getLocalizedContent(schema.label, locale)"
-                    :name="fieldKey"
-                  >
-                    <UInput
-                      v-if="schema.type === 'text'"
-                      v-model="schema.value.en"
-                      variant="subtle"
-                      placeholder="Type here..."
-                      :class="field()"
-                    />
+                <dl :class="details({ class: rc.details })">
+                  <template v-for="[fieldKey, schema] in getSortedFields(group.fields)" :key="fieldKey">
+                    <UFormField
+                      v-if="isFieldVisible(schema, false)"
+                      :label="getLocalizedContent(schema.label, locale)"
+                      :name="fieldKey"
+                    >
+                      <UInput
+                        v-if="schema.type === 'text'"
+                        v-model="schema.value.en"
+                        variant="subtle"
+                        placeholder="Type here..."
+                        :class="field({ class: rc.field })"
+                      />
 
-                    <UInput
-                      v-else-if="schema.type === 'number'"
-                      v-model.number="schema.value"
-                      type="number"
-                      variant="subtle"
-                      :class="field()"
-                    />
+                      <UInput
+                        v-else-if="schema.type === 'number'"
+                        v-model.number="schema.value"
+                        type="number"
+                        variant="subtle"
+                        :class="field({ class: rc.field })"
+                      />
 
-                    <USelect
-                      v-else-if="schema.type === 'enum'"
-                      v-model="schema.value"
-                      :items="schema.options || []"
-                      variant="subtle"
-                      :class="field()"
-                    />
+                      <USelect
+                        v-else-if="schema.type === 'enum'"
+                        v-model="schema.value"
+                        :items="schema.options || []"
+                        variant="subtle"
+                        :class="field({ class: rc.field })"
+                      />
 
-                    <UInputMenu
-                      v-else-if="schema.type === 'text-array'"
-                      :model-value="schema.value.map((v) => v.en)"
-                      @update:model-value="(vals) => updateTextArray(schema, vals)"
-                      multiple
-                      creatable
-                      variant="subtle"
-                      placeholder="Add item..."
-                      :class="field()"
-                    />
+                      <UInputMenu
+                        v-else-if="schema.type === 'text-array'"
+                        :model-value="schema.value.map((v) => v.en)"
+                        @update:model-value="(vals) => updateTextArray(schema, vals)"
+                        multiple
+                        creatable
+                        variant="subtle"
+                        placeholder="Add item..."
+                        :class="field({ class: rc.field })"
+                      />
 
-                    <UInput
-                      v-else-if="schema.type === 'page'"
-                      v-model="schema.value"
-                      icon="lucide:link-2"
-                      variant="subtle"
-                      :placeholder="`Select ${schema.allowedPageTypes?.join('/')}`"
-                      :class="field()"
-                    />
+                      <UInput
+                        v-else-if="schema.type === 'page'"
+                        v-model="schema.value"
+                        icon="lucide:link-2"
+                        variant="subtle"
+                        :placeholder="`Select ${schema.allowedPageTypes?.join('/')}`"
+                        :class="field({ class: rc.field })"
+                      />
 
-                    <USelectMenu
-                      v-else-if="schema.type === 'page-array'"
-                      v-model="schema.value"
-                      icon="lucide:link-2"
-                      variant="subtle"
-                      :placeholder="`Select ${schema.allowedPageTypes?.join('/')}`"
-                      :class="field()"
-                    />
-                  </UFormField>
-                </template>
-              </dl>
+                      <USelectMenu
+                        v-else-if="schema.type === 'page-array'"
+                        v-model="schema.value"
+                        icon="lucide:link-2"
+                        variant="subtle"
+                        :placeholder="`Select ${schema.allowedPageTypes?.join('/')}`"
+                        :class="field({ class: rc.field })"
+                      />
+                    </UFormField>
+                  </template>
+                </dl>
               </ClientOnly>
             </template>
           </UCollapsible>
         </template>
       </template>
     </UCard>
-    <div :class="links()">
+    <div :class="links({ class: rc.links })">
       <h6>Links</h6>
       <UButton
-        v-for="(link, index) in page.links"
+        v-for="(linkItem, index) in page.links"
         :key="index"
-        :label="link.label"
-        :icon="link.icon"
-        :to="link.to"
-        :target="link.to ? '_blank' : void 0"
-        :external="!!link.to"
-        :variant="link.variant || 'link'"
-        :color="link.color || 'neutral'"
+        :label="linkItem.label"
+        :icon="linkItem.icon"
+        :to="linkItem.to"
+        :target="linkItem.to ? '_blank' : void 0"
+        :external="!!linkItem.to"
+        :variant="linkItem.variant || 'link'"
+        :color="linkItem.color || 'neutral'"
         size="sm"
         :ui="{ base: 'pl-0' }"
       />

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

@@ -1,14 +1,30 @@
 import { type Page } from "../../types/index.js";
 export interface PagePropertiesEditorProps {
+    rc?: {
+        aside?: string;
+        icon?: string;
+        titleInput?: string;
+        type?: string;
+        tags?: string;
+        tabs?: string;
+        image?: string;
+        groupButton?: string;
+        details?: string;
+        field?: string;
+        links?: string;
+    };
 }
 type __VLS_Props = PagePropertiesEditorProps;
 export interface PagePropertiesEditorEmits {
 }
+export interface PagePropertiesEditorSlots {
+}
+type __VLS_Slots = PagePropertiesEditorSlots;
 type __VLS_ModelProps = {
     modelValue: Page;
 };
 type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
-declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:modelValue": (value: {
         type: "Default";
         properties: import("../../types/index.js").BasePageProperties;
@@ -19,5 +35,11 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {},
         properties: import("../../types/index.js").BasePageProperties;
     } & import("../../types/index.js").BasePage) => any) | undefined;
 }>, {}, {}, {}, {}, 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/page/PagePropertiesRenderer.d.vue.ts

@@ -1,14 +1,38 @@
 import { type Page } from '../../types/index.js';
 export interface PagePropertiesRendererProps {
+    rc?: {
+        aside?: string;
+        actions?: string;
+        icon?: string;
+        title?: string;
+        type?: string;
+        tags?: string;
+        tabs?: string;
+        image?: string;
+        groupButton?: string;
+        details?: string;
+        field?: string;
+        fieldLabel?: string;
+        fieldValue?: string;
+        list?: string;
+        listItem?: string;
+        pageArrayList?: string;
+        pageArrayItem?: string;
+        pageArrayBullet?: string;
+        links?: string;
+    };
 }
 type __VLS_Props = PagePropertiesRendererProps;
 export interface PagePropertiesRendererEmits {
 }
+export interface PagePropertiesRendererSlots {
+}
+type __VLS_Slots = PagePropertiesRendererSlots;
 type __VLS_ModelProps = {
     modelValue: Page;
 };
 type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
-declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:modelValue": (value: {
         type: "Default";
         properties: import("../../types/index.js").BasePageProperties;
@@ -19,5 +43,11 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {},
         properties: import("../../types/index.js").BasePageProperties;
     } & import("../../types/index.js").BasePage) => any) | undefined;
 }>, {}, {}, {}, {}, 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/page/PagePropertiesRenderer.vue

@@ -1,15 +1,20 @@
 <script setup>
 import { computed } from "vue";
 import { getLocalizedContent } from "../../utils";
-import { usePageRegistry, useInfobox } from "../../composables";
+import { usePageRegistry, useInfobox, useRC } from "../../composables";
 import { useToast } from "@nuxt/ui/composables";
 import {} from "@nuxt/ui/components/Tabs.vue";
 import { useI18n } from "vue-i18n";
 import { useShare, useClipboard } from "@vueuse/core";
 import {} from "../../types";
-import { tv } from "tailwind-variants";
-const props = defineProps({});
+import { tv } from "../../internal/tv";
+const { rc: rcProp } = defineProps({
+  rc: { type: Object, required: false }
+});
+const page = defineModel({ type: null, ...{ required: true } });
 const emit = defineEmits([]);
+const slots = defineSlots();
+const { rc } = useRC("PagePropertiesRenderer", rcProp);
 const pagePropertiesRendererStyles = tv({
   slots: {
     aside: "flex flex-col gap-md",
@@ -54,7 +59,6 @@ const {
   pageArrayBullet,
   links
 } = pagePropertiesRendererStyles();
-const page = defineModel({ type: null, ...{ required: true } });
 const { getTypeLabelKey } = usePageRegistry();
 const { isFieldVisible, shouldRenderGroup, getSortedFields, getSortedGroups } = useInfobox(page.value.properties);
 const { t, locale } = useI18n();
@@ -109,8 +113,8 @@ const imageTabs = computed(() => {
 </script>
 
 <template>
-  <aside :class="aside()">
-    <div :class="actions()">
+  <aside :class="aside({ class: rc.aside })">
+    <div :class="actions({ class: rc.actions })">
       <UButton variant="soft" color="neutral" icon="lucide:share" size="sm" @click="sharePage()" />
       <UButton variant="soft" color="neutral" icon="lucide:link" size="sm" @click="copyLink()" />
     </div>
@@ -124,16 +128,16 @@ const imageTabs = computed(() => {
             v-if="page.icon?.src"
             :src="page.icon?.src"
             :alt="page.icon?.alt"
-            :class="icon()"
+            :class="icon({ class: rc.icon })"
           />
 
-          <h3 :class="titleClass()">
+          <h3 :class="titleClass({ class: rc.title })">
             {{ getLocalizedContent(page.title, locale) }}
           </h3>
 
-          <span :class="type()">{{ t(getTypeLabelKey(page.type)) }}</span>
+          <span :class="type({ class: rc.type })">{{ t(getTypeLabelKey(page.type)) }}</span>
 
-          <div v-if="page.tags?.length" :class="tags()">
+          <div v-if="page.tags?.length" :class="tags({ class: rc.tags })">
             <UBadge
               v-for="tag in page.tags"
               :key="tag[locale]"
@@ -153,17 +157,17 @@ const imageTabs = computed(() => {
               variant="link"
               size="xs"
               color="neutral"
-              :class="tabs()"
+              :class="tabs({ class: rc.tabs })"
             >
               <template #content="{ item }">
-                <RCImage :src="item.img.src" :alt="item.img.alt" :class="image()" />
+                <RCImage :src="item.img.src" :alt="item.img.alt" :class="image({ class: rc.image })" />
               </template>
             </UTabs>
 
             <div v-else-if="page.images[0]">
               <RCImage :src="page.images[0].src"
                        :alt="page.images[0].alt"
-                       :class="image()" />
+                       :class="image({ class: rc.image })" />
             </div>
           </div>
         </div>
@@ -181,34 +185,34 @@ const imageTabs = computed(() => {
   trailingIcon: 'group-data-[state=open]:rotate-180 transition-transform duration-200'
 }"
                 block
-                :class="groupButton()"
+                :class="groupButton({ class: rc.groupButton })"
               />
             </template>
 
             <template #content>
-              <dl :class="details()">
+              <dl :class="details({ class: rc.details })">
                 <template
                   v-for="[fieldKey, schema] in getSortedFields(group.fields)"
                   :key="fieldKey"
                 >
                   <div
                     v-if="isFieldVisible(schema, true)"
-                    :class="field()"
+                    :class="field({ class: rc.field })"
                   >
-                    <dt :class="fieldLabel()">
+                    <dt :class="fieldLabel({ class: rc.fieldLabel })">
                       {{ getLocalizedContent(schema.label, locale) }}
                     </dt>
 
-                    <dd :class="fieldValue()">
+                    <dd :class="fieldValue({ class: rc.fieldValue })">
                       <span v-if="schema.type === 'text'">
                         {{ getLocalizedContent(schema.value, locale) }}
                       </span>
                       <ul
                         v-else-if="schema.type === 'text-array'"
-                        :class="list()"
+                        :class="list({ class: rc.list })"
                       >
                         <li v-for="(item, index) in schema.value" :key="index">
-                          <span :class="listItem()">
+                          <span :class="listItem({ class: rc.listItem })">
                             {{ getLocalizedContent(item, locale) }}
                           </span>
                         </li>
@@ -220,11 +224,11 @@ const imageTabs = computed(() => {
 
                       <ul
                         v-else-if="schema.type === 'page-array' && Array.isArray(schema.value)"
-                        :class="pageArrayList()"
+                        :class="pageArrayList({ class: rc.pageArrayList })"
                       >
-                        <li v-for="id in schema.value" :key="id" :class="pageArrayItem()">
+                        <li v-for="id in schema.value" :key="id" :class="pageArrayItem({ class: rc.pageArrayItem })">
                           <span
-                            :class="pageArrayBullet()"
+                            :class="pageArrayBullet({ class: rc.pageArrayBullet })"
                             aria-hidden="true"
                           />
 
@@ -244,18 +248,18 @@ const imageTabs = computed(() => {
         </template>
       </template>
     </UCard>
-    <div :class="links()">
+    <div :class="links({ class: rc.links })">
       <h6>Links</h6>
       <UButton
-        v-for="(link, index) in page.links"
+        v-for="(linkItem, index) in page.links"
         :key="index"
-        :label="link.label"
-        :icon="link.icon"
-        :to="link.to"
-        :target="link.to ? '_blank' : void 0"
-        :external="!!link.to"
-        :variant="link.variant || 'link'"
-        :color="link.color || 'neutral'"
+        :label="linkItem.label"
+        :icon="linkItem.icon"
+        :to="linkItem.to"
+        :target="linkItem.to ? '_blank' : void 0"
+        :external="!!linkItem.to"
+        :variant="linkItem.variant || 'link'"
+        :color="linkItem.color || 'neutral'"
         size="sm"
         :ui="{ base: 'pl-0' }"
       />

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

@@ -1,14 +1,38 @@
 import { type Page } from '../../types/index.js';
 export interface PagePropertiesRendererProps {
+    rc?: {
+        aside?: string;
+        actions?: string;
+        icon?: string;
+        title?: string;
+        type?: string;
+        tags?: string;
+        tabs?: string;
+        image?: string;
+        groupButton?: string;
+        details?: string;
+        field?: string;
+        fieldLabel?: string;
+        fieldValue?: string;
+        list?: string;
+        listItem?: string;
+        pageArrayList?: string;
+        pageArrayItem?: string;
+        pageArrayBullet?: string;
+        links?: string;
+    };
 }
 type __VLS_Props = PagePropertiesRendererProps;
 export interface PagePropertiesRendererEmits {
 }
+export interface PagePropertiesRendererSlots {
+}
+type __VLS_Slots = PagePropertiesRendererSlots;
 type __VLS_ModelProps = {
     modelValue: Page;
 };
 type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
-declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:modelValue": (value: {
         type: "Default";
         properties: import("../../types/index.js").BasePageProperties;
@@ -19,5 +43,11 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {},
         properties: import("../../types/index.js").BasePageProperties;
     } & import("../../types/index.js").BasePage) => any) | undefined;
 }>, {}, {}, {}, {}, 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/page/PageRenderer.d.vue.ts

@@ -4,15 +4,31 @@ export interface PageRendererProps {
     surround?: PageSurround | null;
     surroundStatus?: 'idle' | 'pending' | 'success' | 'error';
     resolvePage: (id: string) => Promise<Pick<Page, 'title' | 'icon' | 'slug'>>;
+    rc?: {
+        container?: string;
+        grid?: string;
+        toc?: string;
+        properties?: string;
+        contentWrapper?: string;
+        banner?: string;
+        icon?: string;
+        title?: string;
+        surroundSkeleton?: string;
+        skeleton?: string;
+        metadata?: string;
+    };
 }
 type __VLS_Props = PageRendererProps;
 export interface PageRendererEmits {
 }
+export interface PageRendererSlots {
+}
+type __VLS_Slots = PageRendererSlots;
 type __VLS_ModelProps = {
     modelValue: Page;
 };
 type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
-declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:modelValue": (value: {
         type: "Default";
         properties: import("../../types/index.js").BasePageProperties;
@@ -23,5 +39,11 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {},
         properties: import("../../types/index.js").BasePageProperties;
     } & import("../../types/index.js").BasePage) => any) | undefined;
 }>, {}, {}, {}, {}, 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;
+    };
+};