rimelight-components 2.1.17 → 2.1.19

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

@@ -1,11 +1,46 @@
 <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 "../../utils/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",
+    icon: "rounded-full w-12 h-12 object-cover",
+    titleInput: "w-full",
+    type: "text-sm",
+    tags: "flex flex-row flex-wrap gap-xs",
+    tabs: "w-full",
+    image: "w-full object-cover",
+    groupButton: "group rounded-none bg-elevated text-default",
+    details: "p-sm flex flex-col gap-xs",
+    field: "w-full",
+    links: "flex flex-col gap-xs"
+  }
+});
+const {
+  aside,
+  icon,
+  titleInput,
+  type,
+  tags,
+  tabs,
+  image,
+  groupButton,
+  details,
+  field,
+  links
+} = pagePropertiesEditorStyles();
 const { getTypeLabelKey } = usePageRegistry();
 const { isFieldVisible, shouldRenderGroup, getSortedFields, getSortedGroups } = useInfobox(page.value.properties);
 const { locale, t } = useI18n();
@@ -30,7 +65,7 @@ const updateTextArray = (schema, vals) => {
 </script>
 
 <template>
-  <aside class="flex flex-col gap-md">
+  <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' }"
@@ -41,7 +76,7 @@ const updateTextArray = (schema, vals) => {
             v-if="page.icon?.src"
             :src="page.icon?.src"
             :alt="page.icon?.alt"
-            class="rounded-full w-12 h-12 object-cover"
+            :class="icon({ class: rc.icon })"
           />
 
           <UInput
@@ -50,12 +85,12 @@ const updateTextArray = (schema, vals) => {
             placeholder="Enter page title..."
             size="xl"
             :ui="{ base: 'text-center font-bold text-lg' }"
-            class="w-full"
+            :class="titleInput({ class: rc.titleInput })"
           />
 
-          <span class="text-sm">{{ t(getTypeLabelKey(page.type)) }}</span>
+          <span :class="type({ class: rc.type })">{{ t(getTypeLabelKey(page.type)) }}</span>
 
-          <div v-if="page.tags?.length" class="flex flex-row flex-wrap gap-xs">
+          <div v-if="page.tags?.length" :class="tags({ class: rc.tags })">
             <UBadge
               v-for="tag in page.tags"
               :key="tag[locale]"
@@ -75,10 +110,10 @@ const updateTextArray = (schema, vals) => {
               variant="link"
               size="xs"
               color="neutral"
-              class="w-full"
+              :class="tabs({ class: rc.tabs })"
             >
               <template #content="{ item }">
-                <RCImage :src="item.img.src" :alt="item.img.alt" class="w-full object-cover" />
+                <RCImage :src="item.img.src" :alt="item.img.alt" :class="image({ class: rc.image })" />
               </template>
             </UTabs>
 
@@ -86,7 +121,7 @@ const updateTextArray = (schema, vals) => {
               <RCImage
                 :src="page.images[0].src"
                 :alt="page.images[0].alt"
-                class="w-full object-cover"
+                :class="image({ class: rc.image })"
               />
             </div>
           </div>
@@ -105,90 +140,92 @@ const updateTextArray = (schema, vals) => {
   trailingIcon: 'group-data-[state=open]:rotate-180 transition-transform duration-200'
 }"
                 block
-                class="group rounded-none bg-elevated text-default"
+                :class="groupButton({ class: rc.groupButton })"
               />
             </template>
 
             <template #content>
-              <dl class="p-sm flex flex-col gap-xs">
-                <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="w-full"
-                    />
+              <ClientOnly>
+                <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="w-full"
-                    />
+                      <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="w-full"
-                    />
+                      <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="w-full"
-                    />
+                      <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="w-full"
-                    />
+                      <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="w-full"
-                    />
-                  </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="flex flex-col gap-xs">
+    <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,17 +1,45 @@
 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;
 };
-declare const __VLS_export: import("vue").DefineComponent<__VLS_ModelProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+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;
     } & import("../../types/index.js").BasePage) => any;
-}, string, import("vue").PublicProps, Readonly<__VLS_ModelProps> & Readonly<{
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
     "onUpdate:modelValue"?: ((value: {
         type: "Default";
         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,17 +1,53 @@
 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;
 };
-declare const __VLS_export: import("vue").DefineComponent<__VLS_ModelProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+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;
     } & import("../../types/index.js").BasePage) => any;
-}, string, import("vue").PublicProps, Readonly<__VLS_ModelProps> & Readonly<{
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
     "onUpdate:modelValue"?: ((value: {
         type: "Default";
         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,13 +1,64 @@
 <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 "../../utils/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",
+    actions: "flex flex-row flex-wrap gap-sm",
+    icon: "rounded-full w-12 h-12 object-cover",
+    title: "",
+    type: "text-sm",
+    tags: "flex flex-row flex-wrap gap-xs",
+    tabs: "w-full",
+    image: "w-full object-cover",
+    groupButton: "group rounded-none bg-elevated text-default",
+    details: "p-sm flex flex-col gap-xs",
+    field: "grid grid-cols-3 gap-xs items-baseline",
+    fieldLabel: "text-xs font-semibold text-dimmed",
+    fieldValue: "text-xs col-span-2",
+    list: "flex flex-wrap list-disc list-inside",
+    listItem: "font-medium",
+    pageArrayList: "flex flex-col gap-y-1",
+    pageArrayItem: "flex items-center gap-x-2",
+    pageArrayBullet: "w-1 h-1 rounded-full bg-inverted shrink-0",
+    links: "flex flex-col gap-xs"
+  }
+});
+const {
+  aside,
+  actions,
+  icon,
+  title: titleClass,
+  type,
+  tags,
+  tabs,
+  image,
+  groupButton,
+  details,
+  field,
+  fieldLabel,
+  fieldValue,
+  list,
+  listItem,
+  pageArrayList,
+  pageArrayItem,
+  pageArrayBullet,
+  links
+} = pagePropertiesRendererStyles();
 const { getTypeLabelKey } = usePageRegistry();
 const { isFieldVisible, shouldRenderGroup, getSortedFields, getSortedGroups } = useInfobox(page.value.properties);
 const { t, locale } = useI18n();
@@ -62,8 +113,8 @@ const imageTabs = computed(() => {
 </script>
 
 <template>
-  <aside class="flex flex-col gap-md">
-    <div class="flex flex-row flex-wrap gap-sm">
+  <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>
@@ -77,16 +128,16 @@ const imageTabs = computed(() => {
             v-if="page.icon?.src"
             :src="page.icon?.src"
             :alt="page.icon?.alt"
-            class="rounded-full w-12 h-12 object-cover"
+            :class="icon({ class: rc.icon })"
           />
 
-          <h3>
+          <h3 :class="titleClass({ class: rc.title })">
             {{ getLocalizedContent(page.title, locale) }}
           </h3>
 
-          <span class="text-sm">{{ t(getTypeLabelKey(page.type)) }}</span>
+          <span :class="type({ class: rc.type })">{{ t(getTypeLabelKey(page.type)) }}</span>
 
-          <div v-if="page.tags?.length" class="flex flex-row flex-wrap gap-xs">
+          <div v-if="page.tags?.length" :class="tags({ class: rc.tags })">
             <UBadge
               v-for="tag in page.tags"
               :key="tag[locale]"
@@ -106,17 +157,17 @@ const imageTabs = computed(() => {
               variant="link"
               size="xs"
               color="neutral"
-              class="w-full"
+              :class="tabs({ class: rc.tabs })"
             >
               <template #content="{ item }">
-                <RCImage :src="item.img.src" :alt="item.img.alt" class="w-full object-cover" />
+                <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="w-full object-cover" />
+                       :class="image({ class: rc.image })" />
             </div>
           </div>
         </div>
@@ -134,34 +185,34 @@ const imageTabs = computed(() => {
   trailingIcon: 'group-data-[state=open]:rotate-180 transition-transform duration-200'
 }"
                 block
-                class="group rounded-none bg-elevated text-default"
+                :class="groupButton({ class: rc.groupButton })"
               />
             </template>
 
             <template #content>
-              <dl class="p-sm flex flex-col gap-xs">
+              <dl :class="details({ class: rc.details })">
                 <template
                   v-for="[fieldKey, schema] in getSortedFields(group.fields)"
                   :key="fieldKey"
                 >
                   <div
                     v-if="isFieldVisible(schema, true)"
-                    class="grid grid-cols-3 gap-xs items-baseline"
+                    :class="field({ class: rc.field })"
                   >
-                    <dt class="text-xs font-semibold text-dimmed">
+                    <dt :class="fieldLabel({ class: rc.fieldLabel })">
                       {{ getLocalizedContent(schema.label, locale) }}
                     </dt>
 
-                    <dd class="text-xs col-span-2">
+                    <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="flex flex-wrap list-disc list-inside"
+                        :class="list({ class: rc.list })"
                       >
                         <li v-for="(item, index) in schema.value" :key="index">
-                          <span class="font-medium">
+                          <span :class="listItem({ class: rc.listItem })">
                             {{ getLocalizedContent(item, locale) }}
                           </span>
                         </li>
@@ -173,11 +224,11 @@ const imageTabs = computed(() => {
 
                       <ul
                         v-else-if="schema.type === 'page-array' && Array.isArray(schema.value)"
-                        class="flex flex-col gap-y-1"
+                        :class="pageArrayList({ class: rc.pageArrayList })"
                       >
-                        <li v-for="id in schema.value" :key="id" class="flex items-center gap-x-2">
+                        <li v-for="id in schema.value" :key="id" :class="pageArrayItem({ class: rc.pageArrayItem })">
                           <span
-                            class="w-1 h-1 rounded-full bg-inverted shrink-0"
+                            :class="pageArrayBullet({ class: rc.pageArrayBullet })"
                             aria-hidden="true"
                           />
 
@@ -197,18 +248,18 @@ const imageTabs = computed(() => {
         </template>
       </template>
     </UCard>
-    <div class="flex flex-col gap-xs">
+    <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,17 +1,53 @@
 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;
 };
-declare const __VLS_export: import("vue").DefineComponent<__VLS_ModelProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+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;
     } & import("../../types/index.js").BasePage) => any;
-}, string, import("vue").PublicProps, Readonly<__VLS_ModelProps> & Readonly<{
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
     "onUpdate:modelValue"?: ((value: {
         type: "Default";
         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;
+    };
+};