rimelight-components 2.1.78 → 2.1.80

package/dist/module.json

@@ -1,6 +1,6 @@
 {
   "name": "rimelight-components",
-  "version": "2.1.78",
+  "version": "2.1.80",
   "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.78";
+const version = "2.1.80";
 const homepage = "https://rimelight.com/tools/rimelight-components";
 
 const defaultOptions = {

package/dist/runtime/components/blocks/Block.vue

@@ -30,37 +30,37 @@ const items = ref([
     {
       icon: "lucide:arrow-up",
       label: "Move Block Up",
-      click: onMoveUp
+      onSelect: onMoveUp
     },
     {
       icon: "lucide:arrow-down",
       label: "Move Block Down",
-      click: onMoveDown
+      onSelect: onMoveDown
     }
   ],
   [
     {
       icon: "lucide:corner-right-up",
       label: "Add Block Above"
-      //click: handleAddBlockAbove
+      //onSelect: handleAddBlockAbove
     },
     {
       icon: "lucide:corner-right-down",
       label: "Add Block Below"
-      //click: handleAddBlockBelow
+      //onSelect: handleAddBlockBelow
     }
   ],
   [
     {
       icon: "lucide:copy-plus",
       label: "Duplicate Block",
-      click: onDuplicate
+      onSelect: onDuplicate
     },
     {
-      color: "error",
+      color: "danger",
       icon: "lucide:trash-2",
       label: "Delete Block",
-      click: onDelete
+      onSelect: onDelete
     }
   ]
 ]);

package/dist/runtime/components/blocks/BlockEditor.vue

@@ -36,7 +36,7 @@ const dropdownItems = computed(() => [
   blockTypes.map((type) => ({
     label: type.label,
     icon: type.icon,
-    click: () => insertBlock(type.value)
+    onSelect: () => insertBlock(type.value)
   }))
 ]);
 provide("block-editor-api", {
@@ -59,18 +59,17 @@ defineExpose({ undo, redo, canUndo, canRedo });
 
     <div class="flex flex-col items-center justify-center p-4 border-t border-neutral-200 dark:border-neutral-800 border-dashed rounded-lg">
       <span class="text-sm text-dimmed mb-2">Append new block to page</span>
-      <UDropdown
+      <UDropdownMenu
         :items="dropdownItems"
-        :popper="{ placement: 'bottom' }"
       >
         <UButton
-          color="white"
+          color="neutral"
           label="Add Block"
           trailing-icon="i-heroicons-chevron-down-20-solid"
-          variant="solid"
+          variant="outline"
           icon="i-lucide-plus"
         />
-      </UDropdown>
+      </UDropdownMenu>
     </div>
   </div>
 </template>

package/dist/runtime/components/dashboard/QuickActions.vue

@@ -9,7 +9,7 @@ const menuItems = computed(() => {
     acc[groupId].push({
       label: action.label,
       icon: action.icon,
-      click: action.onSelect
+      onSelect: action.onSelect
     });
     return acc;
   }, {});

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

@@ -1,4 +1,4 @@
-import { type Page, type PageSurround, type PageDefinition } from "../../types/index.js";
+import { type Page, type PageSurround, type PageDefinition, type PageVersion } from "../../types/index.js";
 export interface PageEditorProps {
     isSaving: boolean;
     useSurround?: boolean;
@@ -8,6 +8,11 @@ export interface PageEditorProps {
     pageDefinitions: Record<string, PageDefinition>;
     onCreatePage?: (page: Partial<Page>) => Promise<void>;
     onDeletePage?: (id: string) => Promise<void>;
+    onFetchPages?: () => Promise<Pick<Page, 'title' | 'slug'>[]>;
+    onNavigateToPage?: (slug: string) => void;
+    currentVersionId?: string | null;
+    isViewingVersion?: boolean;
+    isAdmin?: boolean;
     rc?: {
         header?: string;
         headerGroup?: string;
@@ -31,12 +36,15 @@ export interface PageEditorProps {
 type __VLS_Props = PageEditorProps;
 export interface PageEditorEmits {
     save: [value: Page];
+    'version-navigate': [version: PageVersion];
 }
 export interface PageEditorSlots {
+    'header-actions'?: (props: {}) => any;
 }
 type __VLS_Slots = PageEditorSlots;
 type __VLS_ModelProps = {
     modelValue: Page;
+    "currentVersionId"?: string | null;
 };
 type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
 declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {
@@ -53,6 +61,8 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {
         type: "Default";
         properties: import("../../types/index.js").BasePageProperties;
     } & import("../../types/index.js").BasePage) => any;
+    "version-navigate": (version: PageVersion) => any;
+    "update:currentVersionId": (value: string | null) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
     onSave?: ((value: {
         type: "Default";
@@ -62,6 +72,8 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {
         type: "Default";
         properties: import("../../types/index.js").BasePageProperties;
     } & import("../../types/index.js").BasePage) => any) | undefined;
+    "onVersion-navigate"?: ((version: PageVersion) => any) | undefined;
+    "onUpdate:currentVersionId"?: ((value: string | null) => 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;

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

@@ -13,6 +13,11 @@ const {
   resolvePage,
   onCreatePage,
   onDeletePage,
+  onFetchPages,
+  onNavigateToPage,
+  currentVersionId = null,
+  isViewingVersion = false,
+  isAdmin = false,
   rc: rcProp
 } = defineProps({
   isSaving: { type: Boolean, required: true },
@@ -23,10 +28,16 @@ const {
   pageDefinitions: { type: Object, required: true },
   onCreatePage: { type: Function, required: false },
   onDeletePage: { type: Function, required: false },
+  onFetchPages: { type: Function, required: false },
+  onNavigateToPage: { type: Function, required: false },
+  currentVersionId: { type: [String, null], required: false },
+  isViewingVersion: { type: Boolean, required: false },
+  isAdmin: { type: Boolean, required: false },
   rc: { type: Object, required: false }
 });
 const page = defineModel({ type: null, ...{ required: true } });
-const emit = defineEmits(["save"]);
+const versionId = defineModel("currentVersionId", { type: [String, null], ...{ default: null } });
+const emit = defineEmits(["save", "version-navigate"]);
 const slots = defineSlots();
 const { rc } = useRC("PageEditor", rcProp);
 const pageEditorStyles = tv({
@@ -147,9 +158,46 @@ const handleDeleteConfirm = async () => {
     isDeleting.value = false;
   }
 };
+const isPageTreeModalOpen = ref(false);
+const isFetchingTree = ref(false);
+const treePages = ref([]);
+const handleOpenTree = async () => {
+  if (!onFetchPages) return;
+  isFetchingTree.value = true;
+  try {
+    treePages.value = await onFetchPages();
+    isPageTreeModalOpen.value = true;
+  } catch (e) {
+    console.error("Failed to fetch pages for tree", e);
+  } finally {
+    isFetchingTree.value = false;
+  }
+};
+const handleTreeNavigate = (slug) => {
+  if (onNavigateToPage) {
+    onNavigateToPage(slug);
+  }
+};
 </script>
 
 <template>
+  <div
+    v-if="isViewingVersion"
+    class="fixed top-12 left-0 right-0 z-40 bg-warning-500 text-white px-4 py-2 text-sm text-center"
+  >
+    <div class="flex items-center justify-center gap-2">
+      <UIcon name="lucide:eye" />
+      <span>Viewing a previous version. Changes made here will create a new version.</span>
+      <UButton
+        icon="lucide:x"
+        color="neutral"
+        variant="ghost"
+        size="xs"
+        @click="versionId = null"
+      />
+    </div>
+  </div>
+
   <RCHeaderLayer id="editor-header" :order="3">
     <UHeader :class="header({ class: rc.header })">
       <template #left>
@@ -191,6 +239,29 @@ const handleDeleteConfirm = async () => {
             :loading="isSaving"
             @click="handleSave"
           />
+          <UButton
+            icon="lucide:list-tree"
+            variant="outline"
+            color="neutral"
+            size="xs"
+            :loading="isFetchingTree"
+            :disabled="!onFetchPages"
+            @click="handleOpenTree"
+          />
+          <RCPageTreeModal
+            v-model:open="isPageTreeModalOpen"
+            :pages="treePages"
+            :loading="isFetchingTree"
+            @navigate="handleTreeNavigate"
+          />
+          <RCPageVersionSelector
+            v-if="page.id"
+            v-model:current-version-id="versionId"
+            :page-id="page.id"
+            :is-admin="isAdmin"
+            @version-selected="(v) => emit('version-navigate', v)"
+          />
+          <slot name="header-actions" />
           <RCCreatePageModal
             :is-open="isCreateModalOpen"
             :definitions="pageDefinitions"

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

@@ -1,4 +1,4 @@
-import { type Page, type PageSurround, type PageDefinition } from "../../types/index.js";
+import { type Page, type PageSurround, type PageDefinition, type PageVersion } from "../../types/index.js";
 export interface PageEditorProps {
     isSaving: boolean;
     useSurround?: boolean;
@@ -8,6 +8,11 @@ export interface PageEditorProps {
     pageDefinitions: Record<string, PageDefinition>;
     onCreatePage?: (page: Partial<Page>) => Promise<void>;
     onDeletePage?: (id: string) => Promise<void>;
+    onFetchPages?: () => Promise<Pick<Page, 'title' | 'slug'>[]>;
+    onNavigateToPage?: (slug: string) => void;
+    currentVersionId?: string | null;
+    isViewingVersion?: boolean;
+    isAdmin?: boolean;
     rc?: {
         header?: string;
         headerGroup?: string;
@@ -31,12 +36,15 @@ export interface PageEditorProps {
 type __VLS_Props = PageEditorProps;
 export interface PageEditorEmits {
     save: [value: Page];
+    'version-navigate': [version: PageVersion];
 }
 export interface PageEditorSlots {
+    'header-actions'?: (props: {}) => any;
 }
 type __VLS_Slots = PageEditorSlots;
 type __VLS_ModelProps = {
     modelValue: Page;
+    "currentVersionId"?: string | null;
 };
 type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
 declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {
@@ -53,6 +61,8 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {
         type: "Default";
         properties: import("../../types/index.js").BasePageProperties;
     } & import("../../types/index.js").BasePage) => any;
+    "version-navigate": (version: PageVersion) => any;
+    "update:currentVersionId": (value: string | null) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
     onSave?: ((value: {
         type: "Default";
@@ -62,6 +72,8 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {
         type: "Default";
         properties: import("../../types/index.js").BasePageProperties;
     } & import("../../types/index.js").BasePage) => any) | undefined;
+    "onVersion-navigate"?: ((version: PageVersion) => any) | undefined;
+    "onUpdate:currentVersionId"?: ((value: string | null) => 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;

package/dist/runtime/components/page/index.d.ts

@@ -5,4 +5,5 @@ export { default as PagePropertiesRenderer } from './PagePropertiesRenderer.vue.
 export { default as PageRenderer } from './PageRenderer.vue.js';
 export { default as PageSurround } from './PageSurround.vue.js';
 export { default as PageTOC } from './PageTOC.vue.js';
+export { default as PageVersionSelector } from './PageVersionSelector.vue.js';
 export * from './modals/index.js';

package/dist/runtime/components/page/index.js

@@ -5,4 +5,5 @@ export { default as PagePropertiesRenderer } from "./PagePropertiesRenderer.vue"
 export { default as PageRenderer } from "./PageRenderer.vue";
 export { default as PageSurround } from "./PageSurround.vue";
 export { default as PageTOC } from "./PageTOC.vue";
+export { default as PageVersionSelector } from "./PageVersionSelector.vue";
 export * from "./modals/index.js";

package/dist/runtime/components/page/index.mjs

@@ -5,4 +5,5 @@ export { default as PagePropertiesRenderer } from "./PagePropertiesRenderer.vue"
 export { default as PageRenderer } from "./PageRenderer.vue";
 export { default as PageSurround } from "./PageSurround.vue";
 export { default as PageTOC } from "./PageTOC.vue";
+export { default as PageVersionSelector } from "./PageVersionSelector.vue";
 export * from "./modals/index.mjs";

package/dist/runtime/components/page/modals/PageTreeModal.d.vue.ts

@@ -0,0 +1,32 @@
+import type { Page } from "../../../types/index.js";
+export interface PageTreeModalProps {
+    loading?: boolean;
+    pages?: Pick<Page, "title" | "slug">[];
+    rc?: {
+        header?: string;
+        headerTitle?: string;
+        closeButton?: string;
+        body?: string;
+        footer?: string;
+    };
+}
+type __VLS_Props = PageTreeModalProps;
+export interface PageTreeModalEmits {
+    close: [];
+    navigate: [slug: string];
+}
+type __VLS_ModelProps = {
+    "open"?: boolean;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    navigate: (slug: string) => any;
+    close: () => any;
+    "update:open": (value: boolean) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    onNavigate?: ((slug: string) => any) | undefined;
+    onClose?: (() => any) | undefined;
+    "onUpdate:open"?: ((value: boolean) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/page/modals/PageTreeModal.vue

@@ -0,0 +1,139 @@
+<script setup>
+import { computed, ref, watch } from "vue";
+import { useRC } from "../../../composables";
+import { tv } from "../../../internal/tv";
+import { getLocalizedContent } from "../../../utils";
+import { useI18n } from "vue-i18n";
+const open = defineModel("open", { type: Boolean, ...{ default: false } });
+const { loading, pages = [], rc: rcProp } = defineProps({
+  loading: { type: Boolean, required: false },
+  pages: { type: Array, required: false },
+  rc: { type: Object, required: false }
+});
+const emit = defineEmits(["close", "navigate"]);
+const { rc } = useRC("PageTreeModal", rcProp);
+const { t, locale } = useI18n();
+const pageTreeModalStyles = tv({
+  slots: {
+    header: "flex items-center justify-between",
+    headerTitle: "text-base font-semibold leading-6",
+    closeButton: "-my-1",
+    body: "p-0 min-h-[300px] max-h-[60vh] overflow-y-auto",
+    footer: "flex justify-end gap-2"
+  }
+});
+const { header: headerClass, headerTitle, closeButton, body, footer } = pageTreeModalStyles();
+const treeItems = computed(() => {
+  if (!pages || pages.length === 0) return [];
+  const nodeMap = /* @__PURE__ */ new Map();
+  const rootNodes = [];
+  const getNode = (path, partLabel, pageObj) => {
+    if (!nodeMap.has(path)) {
+      const label = pageObj ? getLocalizedContent(pageObj.title, locale.value) || partLabel : partLabel.charAt(0).toUpperCase() + partLabel.slice(1);
+      const newNode = {
+        label,
+        slug: pageObj ? pageObj.slug : void 0,
+        icon: pageObj ? "i-lucide-file" : "i-lucide-folder",
+        children: []
+      };
+      nodeMap.set(path, newNode);
+    } else if (pageObj) {
+      const node = nodeMap.get(path);
+      node.label = getLocalizedContent(pageObj.title, locale.value) || node.label;
+      node.slug = pageObj.slug;
+      node.icon = "i-lucide-file-text";
+    }
+    return nodeMap.get(path);
+  };
+  pages.forEach((page) => {
+    const parts = page.slug.split("/").filter(Boolean);
+    let currentPath = "";
+    let parent = null;
+    parts.forEach((part, index) => {
+      currentPath = currentPath ? `${currentPath}/${part}` : part;
+      const isLast = index === parts.length - 1;
+      const pageObj = isLast ? page : void 0;
+      const node = getNode(currentPath, part, pageObj);
+      if (index === 0) {
+        if (!rootNodes.includes(node)) {
+          rootNodes.push(node);
+        }
+      } else {
+        if (parent && !parent.children?.includes(node)) {
+          if (!parent.children) parent.children = [];
+          parent.children.push(node);
+        }
+      }
+      parent = node;
+    });
+  });
+  const sortNodes = (nodes) => {
+    nodes.sort((a, b) => a.label.localeCompare(b.label));
+    nodes.forEach((n) => {
+      if (n.children && n.children.length > 0) {
+        sortNodes(n.children);
+      }
+    });
+  };
+  sortNodes(rootNodes);
+  return rootNodes;
+});
+const handleSelect = (node) => {
+  if (node.slug) {
+    emit("navigate", node.slug);
+    open.value = false;
+  }
+};
+const getKey = (item) => item.slug || item.label;
+</script>
+
+<template>
+  <UModal v-model:open="open" title="Page Hierarchy" description="Navigate through your pages">
+    <template #content>
+      <UCard :ui="{ body: 'p-0 sm:p-0' }">
+        <template #header>
+          <div :class="headerClass({ class: rc.header })">
+            <h3 :class="headerTitle({ class: rc.headerTitle })">Page Hierarchy</h3>
+            <UButton
+              color="neutral"
+              variant="ghost"
+              icon="i-heroicons-x-mark-20-solid"
+              :class="closeButton({ class: rc.closeButton })"
+              @click="open = false"
+            />
+          </div>
+        </template>
+
+        <div :class="body({ class: rc.body })">
+          <div v-if="loading" class="p-4 flex justify-center">
+              <UIcon name="i-heroicons-arrow-path" class="w-5 h-5 animate-spin" />
+          </div>
+          <div v-else-if="treeItems.length === 0" class="p-4 text-center text-gray-500">
+              No pages found directly.
+          </div>
+          <UTree 
+              v-else
+              :items="treeItems" 
+              :ui="{ item: 'cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-800' }"
+          >
+              <template #item="{ item }">
+                  <div class="flex items-center gap-2 py-1 w-full" @click="handleSelect(item)">
+                      <UIcon :name="item.icon || (item.children?.length ? 'i-lucide-folder' : 'i-lucide-file')" class="w-4 h-4 text-gray-400" />
+                      <span :class="{ 'text-gray-900 dark:text-gray-100': item.slug, 'text-gray-500 font-medium': !item.slug }">
+                          {{ item.label }}
+                      </span>
+                      <UIcon v-if="item.slug" name="i-heroicons-arrow-right-20-solid" class="w-3 h-3 ml-auto text-gray-300 opacity-0 group-hover:opacity-100" />
+                  </div>
+              </template>
+          </UTree>
+        </div>
+
+        <template #footer>
+          <div :class="footer({ class: rc.footer })">
+            <UButton color="neutral" variant="ghost" label="Close" @click="open = false" />
+          </div>
+        </template>
+      </UCard>
+    </template>
+  </UModal>
+</template>

package/dist/runtime/components/page/modals/PageTreeModal.vue.d.ts

@@ -0,0 +1,32 @@
+import type { Page } from "../../../types/index.js";
+export interface PageTreeModalProps {
+    loading?: boolean;
+    pages?: Pick<Page, "title" | "slug">[];
+    rc?: {
+        header?: string;
+        headerTitle?: string;
+        closeButton?: string;
+        body?: string;
+        footer?: string;
+    };
+}
+type __VLS_Props = PageTreeModalProps;
+export interface PageTreeModalEmits {
+    close: [];
+    navigate: [slug: string];
+}
+type __VLS_ModelProps = {
+    "open"?: boolean;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    navigate: (slug: string) => any;
+    close: () => any;
+    "update:open": (value: boolean) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    onNavigate?: ((slug: string) => any) | undefined;
+    onClose?: (() => any) | undefined;
+    "onUpdate:open"?: ((value: boolean) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/page/modals/index.d.ts

@@ -1,2 +1,3 @@
 export { default as CreatePageModal } from './CreatePageModal.vue.js';
 export { default as DeletePageModal } from './DeletePageModal.vue.js';
+export { default as PageTreeModal } from './PageTreeModal.vue.js';

package/dist/runtime/components/page/modals/index.js

@@ -1,2 +1,3 @@
 export { default as CreatePageModal } from "./CreatePageModal.vue";
 export { default as DeletePageModal } from "./DeletePageModal.vue";
+export { default as PageTreeModal } from "./PageTreeModal.vue";

package/dist/runtime/components/page/modals/index.mjs

@@ -1,2 +1,3 @@
 export { default as CreatePageModal } from "./CreatePageModal.vue";
 export { default as DeletePageModal } from "./DeletePageModal.vue";
+export { default as PageTreeModal } from "./PageTreeModal.vue";

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

@@ -67,3 +67,14 @@ export interface PageSurround {
     previous: SurroundItem | null;
     next: SurroundItem | null;
 }
+export interface PageVersion extends BasePage {
+    status: "pending" | "approved" | "rejected";
+    type: PageType;
+    content: {
+        blocks: Block[];
+        properties: RegisterPageTypes[PageType];
+    };
+    createdBy: string;
+    approvedBy?: string | null;
+    approvedAt?: Date | null;
+}

package/package.json

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