rimelight-components 2.1.80 → 2.1.82

package/dist/module.json

@@ -1,6 +1,6 @@
 {
   "name": "rimelight-components",
-  "version": "2.1.80",
+  "version": "2.1.82",
   "docs": "https://rimelight.com/tools/rimelight-components",
   "configKey": "rimelightComponents",
   "compatibility": {

package/dist/module.mjs

@@ -4,7 +4,7 @@ import { readdirSync } from 'node:fs';
 import { basename } from 'node:path';
 
 const name = "rimelight-components";
-const version = "2.1.80";
+const version = "2.1.82";
 const homepage = "https://rimelight.com/tools/rimelight-components";
 
 const defaultOptions = {

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

@@ -1,5 +1,5 @@
 <script setup>
-import { computed } from "vue";
+import { computed, ref, reactive } from "vue";
 import { useI18n } from "vue-i18n";
 import { usePageRegistry, useInfobox, useRC } from "../../composables";
 import { getLocalizedContent } from "../../utils";
@@ -61,6 +61,55 @@ const updateTextArray = (schema, vals) => {
     en: str
   }));
 };
+const isLinkModalOpen = ref(false);
+const editingLinkIndex = ref(null);
+const linkDraft = reactive({
+  label: "",
+  to: "",
+  icon: "",
+  color: "neutral",
+  variant: "link"
+});
+const openLinkModal = (index = null) => {
+  editingLinkIndex.value = index;
+  if (index !== null && page.value.links?.[index]) {
+    const link = page.value.links[index];
+    linkDraft.label = link.label;
+    linkDraft.to = link.to;
+    linkDraft.icon = link.icon;
+    linkDraft.color = link.color || "neutral";
+    linkDraft.variant = link.variant || "link";
+  } else {
+    linkDraft.label = "";
+    linkDraft.to = "";
+    linkDraft.icon = "";
+    linkDraft.color = "neutral";
+    linkDraft.variant = "link";
+  }
+  isLinkModalOpen.value = true;
+};
+const saveLink = () => {
+  if (!linkDraft.label || !linkDraft.to) return;
+  if (!page.value.links) page.value.links = [];
+  const newLink = {
+    label: linkDraft.label,
+    to: linkDraft.to,
+    icon: linkDraft.icon,
+    color: linkDraft.color,
+    variant: linkDraft.variant
+  };
+  if (editingLinkIndex.value !== null) {
+    page.value.links[editingLinkIndex.value] = newLink;
+  } else {
+    page.value.links.push(newLink);
+  }
+  isLinkModalOpen.value = false;
+};
+const removeLink = (index) => {
+  if (page.value.links) {
+    page.value.links.splice(index, 1);
+  }
+};
 </script>
 
 <template>
@@ -87,6 +136,16 @@ const updateTextArray = (schema, vals) => {
             :class="titleInput({ class: rc.titleInput })"
           />
 
+          <UInput
+            v-model="page.slug"
+            variant="subtle"
+            placeholder="page-slug"
+            size="xs"
+            prefix="/"
+            :ui="{ base: 'text-center text-dimmed font-mono' }"
+            class="w-full opacity-60 hover:opacity-100 focus-within:opacity-100 transition-opacity"
+          />
+
           <span :class="type({ class: rc.type })">{{ t(getTypeLabelKey(page.type)) }}</span>
 
           <div v-if="page.tags?.length" :class="tags({ class: rc.tags })">
@@ -221,20 +280,99 @@ const updateTextArray = (schema, vals) => {
       </template>
     </UCard>
     <div :class="links({ class: rc.links })">
-      <h6>Links</h6>
-      <UButton
-        v-for="(linkItem, index) in page.links"
-        :key="index"
-        :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' }"
-      />
+      <div class="flex items-center justify-between mb-xs">
+        <h6>Links</h6>
+        <UButton
+          icon="lucide:plus"
+          size="xs"
+          variant="ghost"
+          color="primary"
+          @click="openLinkModal()"
+        />
+      </div>
+
+      <div v-if="page.links?.length" class="flex flex-col gap-xs">
+        <div
+          v-for="(linkItem, index) in page.links"
+          :key="index"
+          class="flex items-center justify-between group/link"
+        >
+          <UButton
+            :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' }"
+          />
+          <div class="flex items-center opacity-0 group-hover/link:opacity-100 transition-opacity">
+            <UButton
+              icon="lucide:pencil"
+              size="xs"
+              variant="ghost"
+              color="neutral"
+              @click="openLinkModal(index)"
+            />
+            <UButton
+              icon="lucide:trash-2"
+              size="xs"
+              variant="ghost"
+              color="error"
+              @click="removeLink(index)"
+            />
+          </div>
+        </div>
+      </div>
+      <p v-else class="text-xs text-dimmed italic">No links added yet.</p>
+
+      <!-- Link management modal -->
+      <UModal v-model:open="isLinkModalOpen" :title="editingLinkIndex !== null ? 'Edit Link' : 'Add Link'">
+        <template #content>
+          <UCard>
+            <div class="flex flex-col gap-sm">
+              <UFormField label="Label">
+                <UInput v-model="linkDraft.label" placeholder="Check my GitHub" class="w-full" />
+              </UFormField>
+              <UFormField label="URL (to)">
+                <UInput v-model="linkDraft.to" placeholder="https://github.com/..." class="w-full" />
+              </UFormField>
+              <UFormField label="Icon">
+                <UInput v-model="linkDraft.icon" placeholder="lucide:github" class="w-full" />
+              </UFormField>
+              <div class="grid grid-cols-2 gap-sm">
+                <UFormField label="Color">
+                  <USelect
+                    v-model="linkDraft.color"
+                    :items="['primary', 'secondary', 'neutral', 'error', 'warning', 'success', 'info']"
+                    class="w-full"
+                  />
+                </UFormField>
+                <UFormField label="Variant">
+                  <USelect
+                    v-model="linkDraft.variant"
+                    :items="['solid', 'outline', 'subtle', 'soft', 'ghost', 'link']"
+                    class="w-full"
+                  />
+                </UFormField>
+              </div>
+            </div>
+
+            <template #footer>
+              <div class="flex justify-end gap-sm">
+                <UButton label="Cancel" variant="ghost" color="neutral" @click="isLinkModalOpen = false" />
+                <UButton
+                  :label="editingLinkIndex !== null ? 'Update Link' : 'Add Link'"
+                  color="primary"
+                  @click="saveLink"
+                />
+              </div>
+            </template>
+          </UCard>
+        </template>
+      </UModal>
     </div>
   </aside>
 </template>

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

@@ -0,0 +1,25 @@
+import type { PageVersion } from "../../types/index.js";
+export interface PageVersionSelectorProps {
+    pageId: string;
+    currentVersionId?: string | null;
+    isAdmin?: boolean;
+    rc?: {
+        root?: string;
+        button?: string;
+        popover?: string;
+        versionItem?: string;
+    };
+}
+declare const __VLS_export: import("vue").DefineComponent<PageVersionSelectorProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:currentVersionId": (value: string | null) => any;
+    "version-selected": (version: PageVersion) => any;
+    "version-approved": (version: PageVersion) => any;
+    "version-reverted": (version: PageVersion) => any;
+}, string, import("vue").PublicProps, Readonly<PageVersionSelectorProps> & Readonly<{
+    "onUpdate:currentVersionId"?: ((value: string | null) => any) | undefined;
+    "onVersion-selected"?: ((version: PageVersion) => any) | undefined;
+    "onVersion-approved"?: ((version: PageVersion) => any) | undefined;
+    "onVersion-reverted"?: ((version: PageVersion) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,279 @@
+<script setup>
+import { formatDistanceToNow } from "date-fns";
+import { useToast } from "#imports";
+import { computed, ref, watch } from "vue";
+import { useRC, $api } from "../../composables";
+import { useI18n } from "vue-i18n";
+import { tv } from "../../internal/tv";
+const {
+  pageId,
+  currentVersionId,
+  isAdmin = false,
+  rc: rcProp
+} = defineProps({
+  pageId: { type: String, required: true },
+  currentVersionId: { type: [String, null], required: false },
+  isAdmin: { type: Boolean, required: false },
+  rc: { type: Object, required: false }
+});
+const emit = defineEmits(["update:currentVersionId", "version-selected", "version-approved", "version-reverted"]);
+const { rc } = useRC("PageVersionSelector", rcProp);
+const { t } = useI18n();
+const toast = useToast();
+const versions = ref([]);
+const isLoading = ref(false);
+const isApproving = ref(null);
+const isReverting = ref(null);
+const isOpen = ref(false);
+const pageVersionSelectorStyles = tv({
+  slots: {
+    root: "",
+    button: "",
+    popover: "w-80 p-2",
+    versionItem: "px-3 py-2 hover:bg-gray-100 dark:hover:bg-gray-800 cursor-pointer rounded"
+  }
+});
+const {
+  root,
+  button: buttonClass,
+  popover,
+  versionItem
+} = pageVersionSelectorStyles();
+const pendingVersions = computed(() => {
+  return versions.value.filter((v) => v.status === "pending");
+});
+const selectedVersionId = computed({
+  get: () => currentVersionId,
+  set: (value) => emit("update:currentVersionId", value || null)
+});
+const fetchVersions = async () => {
+  if (!pageId) return;
+  isLoading.value = true;
+  try {
+    versions.value = await $api(`/api/pages/id/${pageId}/versions`);
+  } catch (error) {
+    console.error("Failed to fetch versions:", error);
+    try {
+      toast.add({ color: "error", title: "Failed to load versions" });
+    } catch (e) {
+    }
+  } finally {
+    isLoading.value = false;
+  }
+};
+const selectVersion = (version) => {
+  selectedVersionId.value = version.id;
+  emit("version-selected", version);
+  isOpen.value = false;
+};
+const approveVersion = async (version) => {
+  if (!isAdmin) return;
+  isApproving.value = version.id;
+  try {
+    const result = await $api(`/api/pages/versions/${version.id}/approve`, {
+      method: "POST"
+    });
+    try {
+      toast.add({
+        color: "success",
+        title: "Version approved successfully",
+        description: result?.message || "The page has been updated with the approved version"
+      });
+    } catch (e) {
+    }
+    emit("version-approved", version);
+    await fetchVersions();
+    if (selectedVersionId.value === version.id) {
+      selectedVersionId.value = null;
+    }
+  } catch (error) {
+    console.error("Failed to approve version:", error);
+    try {
+      toast.add({
+        color: "error",
+        title: "Failed to approve version",
+        description: error.message || "An error occurred"
+      });
+    } catch (e) {
+    }
+  } finally {
+    isApproving.value = null;
+  }
+};
+const revertVersion = async (version) => {
+  if (!isAdmin) return;
+  isReverting.value = version.id;
+  try {
+    const result = await $api(`/api/pages/versions/${version.id}/revert`, {
+      method: "POST"
+    });
+    try {
+      toast.add({
+        color: "success",
+        title: "Version reverted successfully",
+        description: result?.message || "The page has been reverted to this version."
+      });
+    } catch (e) {
+    }
+    emit("version-reverted", version);
+    await fetchVersions();
+    selectedVersionId.value = null;
+  } catch (error) {
+    console.error("Failed to revert version:", error);
+    try {
+      toast.add({
+        color: "error",
+        title: "Failed to revert version",
+        description: error.message || "An error occurred"
+      });
+    } catch (e) {
+    }
+  } finally {
+    isReverting.value = null;
+  }
+};
+const formatDate = (date) => {
+  if (!date) return "";
+  const d = typeof date === "string" ? new Date(date) : date;
+  return formatDistanceToNow(d, { addSuffix: true });
+};
+const getStatusColor = (status) => {
+  switch (status) {
+    case "approved":
+      return "success";
+    case "pending":
+      return "warning";
+    case "rejected":
+      return "error";
+    default:
+      return "neutral";
+  }
+};
+watch(() => pageId, () => {
+  if (pageId) fetchVersions();
+}, { immediate: true });
+</script>
+
+<template>
+  <UPopover v-model:open="isOpen" :popper="{ placement: 'bottom-start' }" :class="root({ class: rc.root })">
+    <UButton
+      :loading="isLoading"
+      color="neutral"
+      icon="lucide:git-branch"
+      label="Versions"
+      size="xs"
+      variant="ghost"
+      :class="buttonClass({ class: rc.button })"
+    />
+
+    <template #content>
+      <div :class="popover({ class: rc.popover })">
+        <div class="px-3 py-2 border-b border-gray-200 dark:border-gray-800">
+          <h3 class="text-sm font-semibold">Page Versions</h3>
+          <p class="text-xs text-gray-500 dark:text-gray-400 mt-1">View and manage page versions</p>
+        </div>
+
+        <div class="max-h-96 overflow-y-auto">
+          <div
+            :class="[
+  versionItem({ class: rc.versionItem }),
+  { 'bg-primary-50 dark:bg-primary-900/20': !selectedVersionId }
+]"
+            @click="selectedVersionId = null;
+  isOpen = false"
+          >
+            <div class="flex items-center justify-between">
+              <div class="flex-1">
+                <div class="flex items-center gap-2">
+                  <UBadge color="success" size="xs">Live</UBadge>
+                  <span class="text-sm font-medium">Current Version</span>
+                </div>
+                <p class="text-xs text-gray-500 dark:text-gray-400 mt-1">
+                  The published version of this page
+                </p>
+              </div>
+            </div>
+          </div>
+
+          <div v-if="isLoading" class="px-3 py-4 text-center">
+            <USkeleton class="h-4 w-full mb-2" />
+            <USkeleton class="h-3 w-3/4" />
+          </div>
+
+          <div
+            v-else-if="versions.length === 0"
+            class="px-3 py-4 text-center text-sm text-gray-500"
+          >
+            No versions yet
+          </div>
+
+          <div v-else class="divide-y divide-gray-200 dark:divide-gray-800">
+            <div
+              v-for="version in versions"
+              :key="version.id"
+              :class="[
+  versionItem({ class: rc.versionItem }),
+  { 'bg-primary-50 dark:bg-primary-900/20': selectedVersionId === version.id }
+]"
+              @click="selectVersion(version)"
+            >
+              <div class="flex items-start justify-between gap-2">
+                <div class="flex-1 min-w-0">
+                  <div class="flex items-center gap-2 mb-1">
+                    <UBadge :color="getStatusColor(version.status)" size="xs">
+                      {{ version.status }}
+                    </UBadge>
+                    <span class="text-xs text-gray-500 dark:text-gray-400">
+                      {{ formatDate(version.createdAt) }}
+                    </span>
+                  </div>
+                  <p class="text-xs text-gray-600 dark:text-gray-300 truncate">
+                    {{ version.title?.en || version.title || "Untitled" }}
+                  </p>
+                  <p
+                    v-if="version.approvedBy && version.approvedAt"
+                    class="text-xs text-gray-500 dark:text-gray-400 mt-1"
+                  >
+                    Approved {{ formatDate(version.approvedAt) }}
+                  </p>
+                </div>
+
+                <div v-if="isAdmin" class="shrink-0 flex items-center gap-1">
+                  <UButton
+                    v-if="version.status === 'pending'"
+                    :loading="isApproving === version.id"
+                    color="success"
+                    icon="lucide:check"
+                    size="xs"
+                    title="Approve version"
+                    variant="ghost"
+                    @click.stop="approveVersion(version)"
+                  />
+                  <UButton
+                    v-if="selectedVersionId === version.id"
+                    :loading="isReverting === version.id"
+                    color="warning"
+                    icon="lucide:rotate-ccw"
+                    size="xs"
+                    title="Revert to this version"
+                    variant="ghost"
+                    @click.stop="revertVersion(version)"
+                  />
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <div
+          v-if="pendingVersions.length > 0 && isAdmin"
+          class="px-3 py-2 border-t border-gray-200 dark:border-gray-800 mt-2"
+        >
+          <p class="text-xs text-gray-500 dark:text-gray-400">
+            {{ pendingVersions.length }} pending version{{ pendingVersions.length !== 1 ? "s" : "" }} awaiting approval
+          </p>
+        </div>
+      </div>
+    </template>
+  </UPopover>
+</template>

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

@@ -0,0 +1,25 @@
+import type { PageVersion } from "../../types/index.js";
+export interface PageVersionSelectorProps {
+    pageId: string;
+    currentVersionId?: string | null;
+    isAdmin?: boolean;
+    rc?: {
+        root?: string;
+        button?: string;
+        popover?: string;
+        versionItem?: string;
+    };
+}
+declare const __VLS_export: import("vue").DefineComponent<PageVersionSelectorProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:currentVersionId": (value: string | null) => any;
+    "version-selected": (version: PageVersion) => any;
+    "version-approved": (version: PageVersion) => any;
+    "version-reverted": (version: PageVersion) => any;
+}, string, import("vue").PublicProps, Readonly<PageVersionSelectorProps> & Readonly<{
+    "onUpdate:currentVersionId"?: ((value: string | null) => any) | undefined;
+    "onVersion-selected"?: ((version: PageVersion) => any) | undefined;
+    "onVersion-approved"?: ((version: PageVersion) => any) | undefined;
+    "onVersion-reverted"?: ((version: PageVersion) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/package.json

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