rimelight-components 2.1.78 → 2.1.79

package/dist/module.json

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

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

@@ -61,7 +61,6 @@ defineExpose({ undo, redo, canUndo, canRedo });
       <span class="text-sm text-dimmed mb-2">Append new block to page</span>
       <UDropdown
         :items="dropdownItems"
-        :popper="{ placement: 'bottom' }"
       >
         <UButton
           color="white"

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

@@ -8,6 +8,8 @@ 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;
     rc?: {
         header?: string;
         headerGroup?: string;

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

@@ -13,6 +13,8 @@ const {
   resolvePage,
   onCreatePage,
   onDeletePage,
+  onFetchPages,
+  onNavigateToPage,
   rc: rcProp
 } = defineProps({
   isSaving: { type: Boolean, required: true },
@@ -23,6 +25,8 @@ 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 },
   rc: { type: Object, required: false }
 });
 const page = defineModel({ type: null, ...{ required: true } });
@@ -147,6 +151,26 @@ 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>
@@ -191,6 +215,21 @@ 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"
+          />
           <RCCreatePageModal
             :is-open="isCreateModalOpen"
             :definitions="pageDefinitions"

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

@@ -8,6 +8,8 @@ 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;
     rc?: {
         header?: string;
         headerGroup?: string;

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,137 @@
+<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">
+    <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>
+  </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/package.json

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