rimelight-components 2.0.99 → 2.1.1

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

@@ -1,9 +1,11 @@
 <script setup>
 import { useI18n } from "vue-i18n";
+import { usePageRegistry } from "../../composables";
 import { getLocalizedContent } from "../../utils";
 import {} from "../../types";
+const { getTypeLabelKey } = usePageRegistry();
 const page = defineModel({ type: null, ...{ required: true } });
-const locale = useI18n().locale;
+const { locale, t } = useI18n();
 const isFieldVisible = (fieldSchema) => {
   if (!fieldSchema.visibleIf) return true;
   return fieldSchema.visibleIf(page.value.properties);
@@ -14,18 +16,18 @@ const getSortedFields = (fields) => {
 </script>
 
 <template>
-  <UCard variant="soft" :ui="{ root: 'divide-none', header: 'bg-elevated text-center', body: 'bg-muted' }">
+  <UCard
+    variant="soft"
+    :ui="{ root: 'divide-none', header: 'bg-elevated text-center', body: 'bg-muted' }"
+  >
     <template #header>
       <h3>
         {{ getLocalizedContent(page.title, locale) }}
       </h3>
-      <UBadge variant="subtle" size="sm" color="primary" :label="page.type"/>
+      <UBadge variant="subtle" size="sm" color="primary" :label="t(getTypeLabelKey(page.type))" />
     </template>
 
-    <div
-        v-for="(group, groupId) in page.properties"
-        :key="groupId"
-    >
+    <div v-for="(group, groupId) in page.properties" :key="groupId">
       <div class="flex items-center gap-3">
         <span class="text-[10px] font-bold uppercase tracking-widest text-primary">
           {{ group.label[locale] }}
@@ -35,49 +37,48 @@ const getSortedFields = (fields) => {
 
       <div class="grid gap-y-4 px-1">
         <template v-for="[fieldKey, schema] in getSortedFields(group.fields)" :key="fieldKey">
-
           <UFormField
-              v-if="isFieldVisible(schema)"
-              :label="getLocalizedContent(schema.label, locale)"
-              :name="fieldKey"
+            v-if="isFieldVisible(schema)"
+            :label="getLocalizedContent(schema.label, locale)"
+            :name="fieldKey"
           >
             <UInput
-                v-if="schema.type === 'text'"
-                v-model="schema.value[locale]"
-                variant="subtle"
-                placeholder="..."
+              v-if="schema.type === 'text'"
+              v-model="schema.value[locale]"
+              variant="subtle"
+              placeholder="..."
             />
 
             <UInput
-                v-else-if="schema.type === 'number'"
-                v-model.number="schema.value"
-                type="number"
-                variant="subtle"
+              v-else-if="schema.type === 'number'"
+              v-model.number="schema.value"
+              type="number"
+              variant="subtle"
             />
 
             <USelect
-                v-else-if="schema.type === 'enum'"
-                v-model="schema.value"
-                :items="schema.options || []"
-                variant="subtle"
+              v-else-if="schema.type === 'enum'"
+              v-model="schema.value"
+              :items="schema.options || []"
+              variant="subtle"
             />
 
             <UInputMenu
-                v-else-if="schema.type === 'text-array'"
-                :model-value="schema.value.map((v) => v[locale])"
-                @update:model-value="(vals) => schema.value = vals.map((str) => ({ [locale]: str }))"
-                multiple
-                creatable
-                variant="subtle"
-                placeholder="Add item..."
+              v-else-if="schema.type === 'text-array'"
+              :model-value="schema.value.map((v) => v[locale])"
+              @update:model-value="(vals) => schema.value = vals.map((str) => ({ [locale]: str }))"
+              multiple
+              creatable
+              variant="subtle"
+              placeholder="Add item..."
             />
 
             <UInput
-                v-else-if="schema.type === 'page'"
-                v-model="schema.value"
-                icon="lucide:link-2"
-                variant="subtle"
-                :placeholder="`Select ${schema.allowedPageTypes?.join('/')}`"
+              v-else-if="schema.type === 'page'"
+              v-model="schema.value"
+              icon="lucide:link-2"
+              variant="subtle"
+              :placeholder="`Select ${schema.allowedPageTypes?.join('/')}`"
             />
           </UFormField>
         </template>
@@ -88,12 +89,12 @@ const getSortedFields = (fields) => {
 
     <UFormField label="Global Search Tags">
       <UInputMenu
-          v-model="page.tags"
-          multiple
-          creatable
-          icon="lucide:tag"
-          variant="subtle"
-          placeholder="Add tags..."
+        v-model="page.tags"
+        multiple
+        creatable
+        icon="lucide:tag"
+        variant="subtle"
+        placeholder="Add tags..."
       />
     </UFormField>
   </UCard>

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

@@ -1,4 +1,4 @@
-import { type Page } from '../../types/index.js';
+import { type Page } from "../../types/index.js";
 type __VLS_ModelProps = {
     modelValue: Page;
 };

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

@@ -1,10 +1,18 @@
 <script setup>
+import { computed } from "vue";
 import { getLocalizedContent } from "../../utils";
+import { usePageRegistry } from "../../composables";
+import { useToast } from "@nuxt/ui/composables";
+import {} from "@nuxt/ui/components/Tabs.vue";
 import { useI18n } from "vue-i18n";
-import {
-} from "../../types";
+import { useShare, useClipboard } from "@vueuse/core";
+import {} from "../../types";
+const { getTypeLabelKey } = usePageRegistry();
 const page = defineModel({ type: null, ...{ required: true } });
 const { t, locale } = useI18n();
+const { share } = useShare();
+const { copy } = useClipboard();
+const toast = useToast();
 const shouldRenderField = (schema) => {
   const isVisible = !schema.visibleIf || schema.visibleIf(page.value.properties);
   if (!isVisible) return false;
@@ -23,28 +31,113 @@ const shouldRenderGroup = (group) => {
 const getSortedFields = (fields) => {
   return Object.entries(fields).sort(([, a], [, b]) => (a.order ?? 0) - (b.order ?? 0));
 };
+const sharePage = async () => {
+  if (!page.value) {
+    return;
+  }
+  try {
+    await share({
+      title: getLocalizedContent(page.value.title, locale),
+      text: getLocalizedContent(page.value.description, locale),
+      url: typeof location !== "undefined" ? location.href : ""
+    });
+  } catch {
+    toast.add({
+      color: "error",
+      title: "toast_share-page_error_title",
+      description: "toast_share-page_error_description"
+    });
+  }
+};
+const copyLink = async () => {
+  try {
+    await copy(typeof location !== "undefined" ? location.href : "");
+    toast.add({
+      color: "success",
+      title: "toast_copy-page-link_success_title",
+      description: typeof location !== "undefined" ? location.href : ""
+    });
+  } catch {
+    toast.add({
+      color: "error",
+      title: "toast_copy-page-link_error_title",
+      description: "toast_copy-page-link_error_description"
+    });
+  }
+};
+const imageTabs = computed(() => {
+  if (!page.value.images?.length) return [];
+  return page.value.images.map((img, index) => {
+    const localizedName = getLocalizedContent(img.name, locale.value);
+    return {
+      label: localizedName || `${t("label_image")} ${index + 1}`,
+      value: `image-${index}`,
+      img
+    };
+  });
+});
 </script>
 
 <template>
-  <aside class="flex flex-col gap-xl">
-    <UCard variant="soft" :ui="{ root: 'divide-none', header: 'bg-accented text-center', body: 'p-0 sm:p-0 bg-muted' }">
+  <aside class="flex flex-col gap-md">
+    <div class="flex flex-row flex-wrap gap-sm">
+      <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>
+    <UCard
+      variant="soft"
+      :ui="{ root: 'divide-none', header: 'bg-accented text-center', body: 'p-0 sm:p-0 bg-muted' }"
+    >
       <template #header>
         <div class="flex flex-col gap-xs items-center">
+          <NuxtImg
+            v-if="page.icon?.src"
+            :src="page.icon?.src"
+            :alt="page.icon?.alt"
+            class="rounded-full w-12 h-12 object-cover"
+          />
+
           <h3>
             {{ getLocalizedContent(page.title, locale) }}
           </h3>
-          <span class="text-xs">{{ page.type }}</span>
+
+          <span class="text-sm">{{ t(getTypeLabelKey(page.type)) }}</span>
+
           <div v-if="page.tags?.length" class="flex flex-row flex-wrap gap-xs">
             <UBadge
-                v-for="tag in page.tags"
-                :key="tag[locale]"
-                variant="soft"
-                size="xs"
-                color="neutral"
+              v-for="tag in page.tags"
+              :key="tag[locale]"
+              variant="soft"
+              size="xs"
+              color="neutral"
             >
               {{ tag[locale] }}
             </UBadge>
           </div>
+
+          <div v-if="page.images?.length" class="w-full">
+            <UTabs
+              v-if="page.images.length > 1"
+              :items="imageTabs"
+              default-value="image-0"
+              variant="link"
+              size="xs"
+              color="neutral"
+              class="w-full"
+            >
+              <template #content="{ item }">
+                <NuxtImg :src="item.img.src" :alt="item.img.alt" class="w-full object-cover" />
+              </template>
+            </UTabs>
+
+            <div v-else-if="page.images[0]">
+              <NuxtImg
+                :src="page.images[0].src"
+                :alt="page.images[0].alt"
+                class="w-full object-cover"
+              />
+            </div>
+          </div>
         </div>
       </template>
 
@@ -53,39 +146,64 @@ const getSortedFields = (fields) => {
           <UCollapsible v-if="shouldRenderGroup(group)" :default-open="group.defaultOpen">
             <template #default>
               <UButton
-                  :label="getLocalizedContent(group.label, locale)"
-                  variant="soft"
-                  trailing-icon="lucide:chevron-down"
-                  :ui="{
+                :label="getLocalizedContent(group.label, locale)"
+                variant="soft"
+                trailing-icon="lucide:chevron-down"
+                :ui="{
   trailingIcon: 'group-data-[state=open]:rotate-180 transition-transform duration-200'
 }"
-                  block
-                  class="group rounded-none bg-elevated text-default"
+                block
+                class="group rounded-none bg-elevated text-default"
               />
             </template>
 
             <template #content>
               <dl class="p-sm flex flex-col gap-xs">
-                <template v-for="[fieldKey, schema] in getSortedFields(group.fields)" :key="fieldKey">
+                <template
+                  v-for="[fieldKey, schema] in getSortedFields(group.fields)"
+                  :key="fieldKey"
+                >
                   <div
-                      v-if="shouldRenderField(schema)"
-                      class="grid grid-cols-3 gap-xs items-baseline"
+                    v-if="shouldRenderField(schema)"
+                    class="grid grid-cols-3 gap-xs items-baseline"
                   >
                     <dt class="text-xs font-semibold text-dimmed">
                       {{ getLocalizedContent(schema.label, locale) }}
                     </dt>
 
                     <dd class="text-xs col-span-2">
-                      <ul v-if="schema.type === 'text-array'" class="flex flex-wrap">
+                      <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"
+                      >
                         <li v-for="(item, index) in schema.value" :key="index">
                           <span class="font-medium">
                             {{ getLocalizedContent(item, locale) }}
                           </span>
                         </li>
                       </ul>
-                      <span v-else-if="schema.type === 'text'">
-                        {{ getLocalizedContent(schema.value, locale) }}
-                      </span>
+                      <RCPageMention
+                        v-else-if="schema.type === 'page' && schema.value"
+                        :page-id="schema.value"
+                      />
+
+                      <ul
+                        v-else-if="schema.type === 'page-array' && Array.isArray(schema.value)"
+                        class="flex flex-col gap-y-1"
+                      >
+                        <li v-for="id in schema.value" :key="id" class="flex items-center gap-x-2">
+                          <span
+                            class="w-1 h-1 rounded-full bg-inverted shrink-0"
+                            aria-hidden="true"
+                          />
+
+                          <RCPageMention :page-id="id" />
+                        </li>
+                      </ul>
+
                       <span v-else>
                         {{ schema.value }}
                       </span>
@@ -98,5 +216,21 @@ const getSortedFields = (fields) => {
         </template>
       </template>
     </UCard>
+    <div class="flex flex-col gap-xs">
+      <h6>Links</h6>
+      <UButton
+        v-for="(link, 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'"
+        size="sm"
+        :ui="{ base: 'pl-0' }"
+      />
+    </div>
   </aside>
 </template>

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

@@ -1,5 +1,9 @@
-import type { Page } from "../../types/index.js";
+import { type Page, type PageSurround } from "../../types/index.js";
 interface PageRendererProps {
+    useSurround?: boolean;
+    surround?: PageSurround | null;
+    surroundStatus?: 'idle' | 'pending' | 'success' | 'error';
+    resolvePage?: (id: string) => Promise<Pick<Page, 'title' | 'icon' | 'slug'>>;
 }
 type __VLS_Props = PageRendererProps;
 type __VLS_ModelProps = {
@@ -9,13 +13,13 @@ type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
 declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:modelValue": (value: {
         type: "Default";
-        properties: import("#imports").BasePageProperties;
-    } & import("#imports").BasePage) => any;
+        properties: import("../../types/index.js").BasePageProperties;
+    } & import("../../types/index.js").BasePage) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
     "onUpdate:modelValue"?: ((value: {
         type: "Default";
-        properties: import("#imports").BasePageProperties;
-    } & import("#imports").BasePage) => any) | undefined;
+        properties: import("../../types/index.js").BasePageProperties;
+    } & import("../../types/index.js").BasePage) => any) | undefined;
 }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

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

@@ -1,57 +1,123 @@
 <script setup>
+import { computed, provide } from "vue";
+import {} from "../../types";
 import { getLocalizedContent } from "../../utils";
-import { useI18n } from "#imports";
+import { useI18n } from "vue-i18n";
+import { usePageRegistry } from "../../composables";
+const { getTypeLabelKey } = usePageRegistry();
 const page = defineModel({ type: null, ...{ required: true } });
 const { t, locale } = useI18n();
-const {} = defineProps({});
+const { useSurround = false, surroundStatus = "idle", surround = null, resolvePage } = defineProps({
+  useSurround: { type: Boolean, required: false },
+  surround: { type: [Object, null], required: false },
+  surroundStatus: { type: String, required: false },
+  resolvePage: { type: Function, required: false }
+});
 const emit = defineEmits([]);
+provide("page-resolver", resolvePage);
+const previousPage = computed(() => surround?.previous);
+const nextPage = computed(() => surround?.next);
+const hasSurround = computed(() => !!(surround?.previous || surround?.next));
 </script>
 
 <template>
-  <UContainer class="flex flex-col">
-    <div class="grid grid-cols-1 lg:grid-cols-4 gap-xl p-xl bg-muted">
-      <RCPagePropertiesRenderer v-model="page" class="order-1 lg:order-2 lg:col-span-1" />
-      <div class="order-2 lg:order-1 lg:col-span-3 flex flex-col gap-xl">
-        <UPageHeader
-            :title="getLocalizedContent(page.title, 'en')"
-            :description="getLocalizedContent(page.description, 'en') ?? ''"
+  <UContainer class="flex flex-col py-16">
+    <div class="grid grid-cols-1 lg:grid-cols-24 gap-xl items-start">
+      <RCPageTOC
+        :page-blocks="page.blocks"
+        :levels="[2, 3, 4]"
+        class="hidden lg:flex lg:col-span-4 sticky top-32"
+      >
+        <template #bottom> </template>
+      </RCPageTOC>
+      <RCPagePropertiesRenderer v-model="page" class="order-1 lg:order-2 lg:col-span-6" />
+      <div class="order-2 lg:order-1 lg:col-span-14 flex flex-col gap-xl">
+        <NuxtImg
+          v-if="page.banner?.src"
+          :src="page.banner?.src"
+          :alt="page.banner?.alt"
+          class="rounded-xl w-full object-cover"
         />
+        <UPageHeader
+          :headline="t(getTypeLabelKey(page.type))"
+          :description="getLocalizedContent(page.description, 'en') ?? ''"
+          :ui="{ root: 'pt-0' }"
+        >
+          <template #title>
+            <div class="flex flex-row gap-sm">
+              <NuxtImg
+                v-if="page.icon?.src"
+                :src="page.icon?.src"
+                :alt="page.icon?.alt"
+                class="rounded-full w-12 h-12 object-cover"
+              />
+              <h1>{{ getLocalizedContent(page.title, locale) }}</h1>
+            </div>
+          </template>
+        </UPageHeader>
         <RCBlockViewRenderer :blocks="page.blocks" />
+        <template v-if="useSurround">
+          <div v-if="surroundStatus === 'pending'" class="grid grid-cols-1 gap-md sm:grid-cols-2">
+            <USkeleton class="h-48 w-full rounded-xl" />
+            <USkeleton class="h-48 w-full rounded-xl" />
+          </div>
+
+          <LazyRCPageSurround
+            v-else-if="surroundStatus === 'success' && hasSurround"
+            hydrate-on-visible
+            :pageType="getTypeLabelKey(page.type)"
+            :previousTitle="getLocalizedContent(previousPage?.title, locale)"
+            :previousDescription="getLocalizedContent(previousPage?.description, locale)"
+            :previousTo="`/${previousPage?.slug}`"
+            :nextTitle="getLocalizedContent(nextPage?.title, locale)"
+            :nextDescription="getLocalizedContent(nextPage?.description, locale)"
+            :nextTo="`/${nextPage?.slug}`"
+          />
+
+          <USeparator />
+
+          <div class="flex flex-col gap-xs text-xs text-dimmed p-xl">
+            <h6>Metadata</h6>
+            <span>Page ID: {{ page.id }}</span>
+            <span
+              >Created At:
+              <NuxtTime
+                :datetime="page.created_at ?? ''"
+                year="numeric"
+                month="numeric"
+                day="numeric"
+                hour="numeric"
+                minute="numeric"
+                second="numeric"
+                time-zone-name="short"
+            /></span>
+            <span
+              >Posted At:
+              <NuxtTime
+                :datetime="page.created_at ?? ''"
+                year="numeric"
+                month="numeric"
+                day="numeric"
+                hour="numeric"
+                minute="numeric"
+                second="numeric"
+                time-zone-name="short"
+            /></span>
+            <span
+              >Updated At:
+              <NuxtTime
+                :datetime="page.created_at ?? ''"
+                year="numeric"
+                month="numeric"
+                day="numeric"
+                hour="numeric"
+                minute="numeric"
+                second="numeric"
+                time-zone-name="short"
+            /></span>
+          </div>
+        </template>
       </div>
     </div>
-    <div class="flex flex-col gap-xs text-xs p-xl">
-        <h6>Metadata</h6>
-        <span>Page ID: {{ page.id }}</span>
-        <span>Created At: <NuxtTime
-            :datetime="page.created_at ?? ''"
-            year="numeric"
-            month="numeric"
-            day="numeric"
-            hour="numeric"
-            minute="numeric"
-            second="numeric"
-            time-zone-name="short"
-        /></span>
-        <span>Posted At: <NuxtTime
-            :datetime="page.created_at ?? ''"
-            year="numeric"
-            month="numeric"
-            day="numeric"
-            hour="numeric"
-            minute="numeric"
-            second="numeric"
-            time-zone-name="short"
-        /></span>
-        <span>Updated At: <NuxtTime
-            :datetime="page.created_at ?? ''"
-            year="numeric"
-            month="numeric"
-            day="numeric"
-            hour="numeric"
-            minute="numeric"
-            second="numeric"
-            time-zone-name="short"
-        /></span>
-      </div>
   </UContainer>
 </template>

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

@@ -1,5 +1,9 @@
-import type { Page } from "../../types/index.js";
+import { type Page, type PageSurround } from "../../types/index.js";
 interface PageRendererProps {
+    useSurround?: boolean;
+    surround?: PageSurround | null;
+    surroundStatus?: 'idle' | 'pending' | 'success' | 'error';
+    resolvePage?: (id: string) => Promise<Pick<Page, 'title' | 'icon' | 'slug'>>;
 }
 type __VLS_Props = PageRendererProps;
 type __VLS_ModelProps = {
@@ -9,13 +13,13 @@ type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
 declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:modelValue": (value: {
         type: "Default";
-        properties: import("#imports").BasePageProperties;
-    } & import("#imports").BasePage) => any;
+        properties: import("../../types/index.js").BasePageProperties;
+    } & import("../../types/index.js").BasePage) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
     "onUpdate:modelValue"?: ((value: {
         type: "Default";
-        properties: import("#imports").BasePageProperties;
-    } & import("#imports").BasePage) => any) | undefined;
+        properties: import("../../types/index.js").BasePageProperties;
+    } & import("../../types/index.js").BasePage) => any) | undefined;
 }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;