@xwiki/cristal-dsvuetify 0.13.0 → 0.15.0

package/src/vue/x-navigation-tree.vue

@@ -31,11 +31,14 @@ Software Foundation, Inc., 51 Franklin St, Fifth Floor, Boston, MA
  */
 import { inject, onBeforeMount, ref, watch } from "vue";
 import { VTreeview } from "vuetify/labs/VTreeview";
-import type { CristalApp, PageData } from "@xwiki/cristal-api";
+import type { CristalApp } from "@xwiki/cristal-api";
 import type { DocumentService } from "@xwiki/cristal-document-api";
-import type { SpaceReference } from "@xwiki/cristal-model-api";
+import type { NavigationTreeProps } from "@xwiki/cristal-dsapi";
+import type {
+  DocumentReference,
+  SpaceReference,
+} from "@xwiki/cristal-model-api";
 import type {
-  NavigationTreeNode,
   NavigationTreeSource,
   NavigationTreeSourceProvider,
 } from "@xwiki/cristal-navigation-tree-api";
@@ -49,8 +52,6 @@ type TreeItem = {
   _location: SpaceReference;
 };
 
-type OnClickAction = (node: NavigationTreeNode) => void;
-
 const cristal: CristalApp = inject<CristalApp>("cristal")!;
 const documentService: DocumentService = cristal
   .getContainer()
@@ -61,16 +62,12 @@ const treeSource: NavigationTreeSource = cristal
   .get();
 
 const rootNodes: Ref<Array<TreeItem>> = ref([]);
-const tree: Ref<VTreeview | undefined> = ref(undefined);
 
 const activatedNodes: Ref<Array<string>> = ref(new Array<string>());
 const expandedNodes: Ref<Array<string>> = ref(new Array<string>());
 var isExpanding: boolean = false;
 
-const props = defineProps<{
-  clickAction?: OnClickAction;
-  currentPage?: PageData;
-}>();
+const props = defineProps<NavigationTreeProps>();
 
 onBeforeMount(async () => {
   for (const node of await treeSource.getChildNodes("")) {
@@ -88,14 +85,16 @@ onBeforeMount(async () => {
   documentService.registerDocumentChangeListener("update", onDocumentUpdate);
 });
 
-watch(() => props.currentPage, expandTree);
+watch(() => props.currentPageReference, expandTree);
 
 // TODO: reduce the number of statements in the following method and reactivate the disabled eslint rule.
 // eslint-disable-next-line max-statements
 async function expandTree() {
-  if (props.currentPage && !isExpanding) {
+  if (props.currentPageReference && !isExpanding) {
     isExpanding = true;
-    const newExpandedNodes = treeSource.getParentNodesId(props.currentPage);
+    const newExpandedNodes = treeSource.getParentNodesId(
+      props.currentPageReference,
+    );
     let i;
     let currentNodes = rootNodes.value;
     for (i = 0; i < newExpandedNodes.length - 1; i++) {
@@ -164,32 +163,41 @@ function clearSelection() {
 
 // TODO: reduce the number of statements in the following method and reactivate the disabled eslint rule.
 // eslint-disable-next-line max-statements
-async function onDocumentDelete(page: PageData) {
+async function onDocumentDelete(page: DocumentReference) {
   const parents = treeSource.getParentNodesId(page);
-  let currentItems: TreeItem[] | undefined = rootNodes.value;
-  while (currentItems) {
-    for (const i of currentItems.keys()) {
-      if (currentItems[i].id == parents[0]) {
+  let currentItem: TreeItem | undefined = undefined;
+  let currentItemChildren: TreeItem[] | undefined = rootNodes.value;
+  let notFound = false;
+
+  currentItemsLoop: while (currentItemChildren && !notFound) {
+    for (const i of currentItemChildren.keys()) {
+      if (currentItemChildren[i].id == parents[0]) {
         if (parents.length == 1) {
-          currentItems.splice(i, 1);
+          currentItemChildren.splice(i, 1);
+          if (currentItem && currentItemChildren.length == 0) {
+            currentItem!.children = undefined;
+          }
           return;
         } else {
-          currentItems = currentItems[i].children;
+          currentItem = currentItemChildren[i];
+          currentItemChildren = currentItem.children;
           parents.shift();
-          break;
+          continue currentItemsLoop;
         }
       }
     }
+    notFound = true;
   }
 }
 
 // TODO: reduce the number of statements in the following method and reactivate the disabled eslint rule.
 // eslint-disable-next-line max-statements
-async function onDocumentUpdate(page: PageData) {
+async function onDocumentUpdate(page: DocumentReference) {
   const parents = treeSource.getParentNodesId(page);
   let currentParent: string | undefined = undefined;
   let currentItems: TreeItem[] | undefined = rootNodes.value;
   let notFound = false;
+  let isRoot = true;
 
   currentItemsLoop: while (currentItems && !notFound) {
     for (const i of currentItems.keys()) {
@@ -208,10 +216,13 @@ async function onDocumentUpdate(page: PageData) {
         } else {
           currentParent = currentItems[i].id;
           if (!currentItems[i].children) {
+            // This node had no children, we reset this so new ones can be
+            // loaded lazily.
             currentItems[i].children = [];
           }
           currentItems = currentItems[i].children;
           parents.shift();
+          isRoot = false;
           continue currentItemsLoop;
         }
       }
@@ -220,9 +231,16 @@ async function onDocumentUpdate(page: PageData) {
   }
 
   // New page
+  if (currentItems.length == 0 && !isRoot) {
+    // We don't do anything because this node will be loaded lazily anyway.
+    return;
+  }
   const newItems = await treeSource.getChildNodes(
     currentParent ? currentParent : "",
   );
+  const currentPageParents = treeSource.getParentNodesId(
+    props.currentPageReference,
+  );
   newItemsLoop: for (const newItem of newItems) {
     for (const i of currentItems!.keys()) {
       if (newItem.id == currentItems![i].id) {
@@ -236,13 +254,19 @@ async function onDocumentUpdate(page: PageData) {
       children: newItem.has_children ? [] : undefined,
       _location: newItem.location,
     });
+    if (
+      currentPageParents.length > 0 &&
+      currentPageParents[currentPageParents.length - 1] === newItem.id
+    ) {
+      // If we add a node, and it's the current page, it should be activated.
+      activatedNodes.value = [newItem.id];
+    }
   }
 }
 </script>
 
 <template>
   <v-treeview
-    ref="tree"
     v-model:opened="expandedNodes"
     density="compact"
     :activated="activatedNodes"
@@ -251,7 +275,6 @@ async function onDocumentUpdate(page: PageData) {
     activatable
     active-strategy="independent"
     item-value="id"
-    open-strategy="multiple"
     @update:activated="clearSelection"
   >
     <template #title="{ item }: { item: any }">

package/src/vue/x-tab-group.vue

@@ -21,11 +21,11 @@ Software Foundation, Inc., 51 Franklin St, Fifth Floor, Boston, MA
 import { ref } from "vue";
 const tab = ref(null);
 
-const emits = defineEmits(["change"]);
+const emits = defineEmits(["tab-change"]);
 
 function change(tabId: unknown) {
   if (typeof tabId == "string") {
-    emits("change", tabId);
+    emits("tab-change", tabId);
   }
 }
 </script>

package/src/vue/x-tab-panel.vue

@@ -26,5 +26,3 @@ defineProps<TabPanelProps>();
 <template>
   <v-tabs-window-item :value="tabId"><slot></slot></v-tabs-window-item>
 </template>
-
-<style scoped></style>