@xwiki/cristal-dsvuetify 0.10.0 → 0.12.0

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

@@ -18,13 +18,27 @@ Software Foundation, Inc., 51 Franklin St, Fifth Floor, Boston, MA
 02110-1301 USA, or see the FSF site: http://www.fsf.org.
 -->
 <script setup lang="ts">
-import { Ref, onBeforeMount, ref, watch } from "vue";
+/**
+ * Navigation Tree implemented using Vuetify's VTreeView component.
+ * In order to use the initial component as a proper Navigation Tree for
+ * Cristal, a few changes were made:
+ *   - The only node activated matches the current page, or the clicked link if
+ *     the component has a custom clickAction. We want to use actual links so
+ *     that the user can click them normally (to e.g., open them in a new tab).
+ *     So the default behavior of activating a node by clicking anywhere on the
+ *     item was disabled. Default hover effects, such as darkening or changing
+ *     the cursor on items, were also disabled.
+ */
+import { inject, onBeforeMount, ref, watch } from "vue";
 import { VTreeview } from "vuetify/labs/VTreeview";
-import { type PageData } from "@xwiki/cristal-api";
+import type { CristalApp, PageData } from "@xwiki/cristal-api";
+import type { DocumentService } from "@xwiki/cristal-document-api";
 import type {
-  NavigationTreeSource,
   NavigationTreeNode,
+  NavigationTreeSource,
+  NavigationTreeSourceProvider,
 } from "@xwiki/cristal-navigation-tree-api";
+import type { Ref } from "vue";
 
 type TreeItem = {
   id: string;
@@ -36,6 +50,15 @@ type TreeItem = {
 
 type OnClickAction = (node: NavigationTreeNode) => void;
 
+const cristal: CristalApp = inject<CristalApp>("cristal")!;
+const documentService: DocumentService = cristal
+  .getContainer()
+  .get<DocumentService>("DocumentService");
+const treeSource: NavigationTreeSource = cristal
+  .getContainer()
+  .get<NavigationTreeSourceProvider>("NavigationTreeSourceProvider")
+  .get();
+
 const rootNodes: Ref<Array<TreeItem>> = ref([]);
 const tree: Ref<VTreeview | undefined> = ref(undefined);
 
@@ -43,13 +66,12 @@ const activatedNodes: Ref<Array<string>> = ref(new Array<string>());
 const expandedNodes: Ref<Array<string>> = ref(new Array<string>());
 
 const props = defineProps<{
-  treeSource: NavigationTreeSource;
   clickAction?: OnClickAction;
   currentPage?: PageData;
 }>();
 
 onBeforeMount(async () => {
-  for (const node of await props.treeSource.getChildNodes("")) {
+  for (const node of await treeSource.getChildNodes("")) {
     rootNodes.value.push({
       id: node.id,
       title: node.label,
@@ -61,6 +83,9 @@ onBeforeMount(async () => {
   if (props.currentPage !== undefined) {
     await expandTree();
   }
+
+  documentService.registerDocumentChangeListener("delete", onDocumentDelete);
+  documentService.registerDocumentChangeListener("update", onDocumentUpdate);
 });
 
 watch(
@@ -73,7 +98,7 @@ watch(
 );
 
 async function expandTree() {
-  const newExpandedNodes = props.treeSource.getParentNodesId(props.currentPage);
+  const newExpandedNodes = treeSource.getParentNodesId(props.currentPage);
   let i;
   let currentNodes = rootNodes.value;
   for (i = 0; i < newExpandedNodes.length - 1; i++) {
@@ -113,7 +138,7 @@ async function expandTree() {
 
 async function lazyLoadChildren(item: unknown) {
   const treeItem = item as TreeItem;
-  const childNodes = await props.treeSource.getChildNodes(treeItem.id);
+  const childNodes = await treeSource.getChildNodes(treeItem.id);
   for (const child of childNodes) {
     treeItem.children?.push({
       id: child.id,
@@ -128,32 +153,112 @@ async function lazyLoadChildren(item: unknown) {
     treeItem.children = undefined;
   }
 }
+
+function clearSelection() {
+  // Clicking on a node would activate it and this can't be disabled easily.
+  // With this listener, we ensure that only the first activated node stays
+  // active.
+  if (activatedNodes.value.length > 1) {
+    activatedNodes.value.pop();
+  }
+}
+
+async function onDocumentDelete(page: PageData) {
+  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]) {
+        if (parents.length == 1) {
+          currentItems.splice(i, 1);
+          return;
+        } else {
+          currentItems = currentItems[i].children;
+          parents.shift();
+          break;
+        }
+      }
+    }
+  }
+}
+
+async function onDocumentUpdate(page: PageData) {
+  const parents = treeSource.getParentNodesId(page);
+  let currentParent: string | undefined = undefined;
+  let currentItems: TreeItem[] | undefined = rootNodes.value;
+
+  while (currentItems) {
+    for (const i of currentItems.keys()) {
+      if (currentItems[i].id == parents[0]) {
+        if (parents.length == 1) {
+          // Page update
+          const newItems = await treeSource.getChildNodes(
+            currentParent ? currentParent : "",
+          );
+          for (const newItem of newItems) {
+            if (newItem.id == currentItems[i].id) {
+              currentItems[i].title = newItem.label;
+              return;
+            }
+          }
+        } else {
+          currentParent = currentItems[i].id;
+          currentItems = currentItems[i].children;
+          parents.shift();
+          break;
+        }
+      }
+    }
+
+    // New page
+    const newItems = await treeSource.getChildNodes(
+      currentParent ? currentParent : "",
+    );
+    newItemsLoop: for (const newItem of newItems) {
+      for (const i of currentItems!.keys()) {
+        if (newItem.id == currentItems![i].id) {
+          continue newItemsLoop;
+        }
+      }
+      currentItems!.push({
+        id: newItem.id,
+        title: newItem.label,
+        href: newItem.url,
+        children: newItem.has_children ? [] : undefined,
+        _location: newItem.location,
+      });
+    }
+  }
+}
 </script>
 
 <template>
   <v-treeview
     ref="tree"
-    v-model:activated="activatedNodes"
     v-model:opened="expandedNodes"
+    density="compact"
+    :activated="activatedNodes"
     :items="rootNodes"
     :load-children="lazyLoadChildren"
     activatable
-    active-strategy="single-independent"
+    active-strategy="independent"
     item-value="id"
     open-strategy="multiple"
+    @update:activated="clearSelection"
   >
     <template #title="{ item }: { item: any }">
       <a
         v-if="props.clickAction"
         :href="item.href"
         @click.prevent="
+          activatedNodes = [item.id];
           clickAction!({
             id: item.id,
             label: item.title,
             location: item._location,
             url: item.href,
             has_children: item.children !== undefined,
-          })
+          });
         "
         >{{ item.title }}</a
       >
@@ -162,4 +267,20 @@ async function lazyLoadChildren(item: unknown) {
   </v-treeview>
 </template>
 
-<style scoped></style>
+<style scoped>
+.v-list {
+  background: none;
+}
+:deep(a) {
+  text-decoration: none;
+  color: var(--cr-base-text-color);
+}
+/* Disable hover on items. */
+:deep(.v-list-item__overlay) {
+  --v-hover-opacity: 0;
+}
+/* Disable hand cursor on items, since we disable the default click action. */
+:deep(.v-list-item--link) {
+  cursor: default;
+}
+</style>

package/tsconfig.json

@@ -5,5 +5,6 @@
         "isolatedDeclarations": false
     },
     "extends": "./../../tsconfig.json",
-    "include": ["./src/index.ts", "./src/**/*"]
+    "include": ["./src/index.ts", "./src/**/*"],
+    "exclude": ["**/*.spec.ts", "**/*.test.ts"]
 }

package/{src/vue.d.ts → vitest.config.ts}

@@ -18,10 +18,20 @@
  * 02110-1301 USA, or see the FSF site: http://www.fsf.org.
  */
 
-// vue.d.ts
-declare module "*.vue" {
-  import type { DefineComponent } from "vue";
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/ban-types
-  const component: DefineComponent<{}, {}, any>;
-  export default component;
-}
+import localConfig from "./vite.config";
+import { defineConfig, mergeConfig } from "vitest/config";
+import defaultConfig from "@xwiki/cristal-dev-config/vitest-vue.config";
+
+export default mergeConfig(
+  mergeConfig(defaultConfig, localConfig),
+  defineConfig({
+    test: {
+      server: {
+        deps: {
+          // see https://github.com/vitest-dev/vitest/discussions/2677#discussioncomment-7035566
+          inline: ["vuetify"],
+        },
+      },
+    },
+  }),
+);