@xwiki/cristal-dsvuetify 0.14.0 → 0.16.0

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

@@ -29,13 +29,17 @@ Software Foundation, Inc., 51 Franklin St, Fifth Floor, Boston, MA
  *     item was disabled. Default hover effects, such as darkening or changing
  *     the cursor on items, were also disabled.
  */
+import { navigationTreePropsDefaults } from "@xwiki/cristal-dsapi";
 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";
@@ -47,10 +51,9 @@ type TreeItem = {
   href: string;
   children?: Array<TreeItem>;
   _location: SpaceReference;
+  _is_terminal: boolean;
 };
 
-type OnClickAction = (node: NavigationTreeNode) => void;
-
 const cristal: CristalApp = inject<CristalApp>("cristal")!;
 const documentService: DocumentService = cristal
   .getContainer()
@@ -63,22 +66,23 @@ const treeSource: NavigationTreeSource = cristal
 const rootNodes: Ref<Array<TreeItem>> = ref([]);
 
 const activatedNodes: Ref<Array<string>> = ref(new Array<string>());
-const expandedNodes: Ref<Array<string>> = ref(new Array<string>());
+const expandedNodes: Ref<unknown> = ref([]);
 var isExpanding: boolean = false;
 
-const props = defineProps<{
-  clickAction?: OnClickAction;
-  currentPage?: PageData;
-}>();
+const props = withDefaults(
+  defineProps<NavigationTreeProps>(),
+  navigationTreePropsDefaults,
+);
 
 onBeforeMount(async () => {
-  for (const node of await treeSource.getChildNodes("")) {
+  for (const node of await getChildNodes("")) {
     rootNodes.value.push({
       id: node.id,
       title: node.label,
       href: node.url,
       children: node.has_children ? [] : undefined,
       _location: node.location,
+      _is_terminal: node.is_terminal,
     });
   }
   await expandTree();
@@ -87,14 +91,17 @@ 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!,
+      props.includeTerminals,
+    );
     let i;
     let currentNodes = rootNodes.value;
     for (i = 0; i < newExpandedNodes.length - 1; i++) {
@@ -104,8 +111,8 @@ async function expandTree() {
             if (node.children?.length == 0) {
               await lazyLoadChildren(node);
             }
-            if (!expandedNodes.value.includes(node.id)) {
-              expandedNodes.value.push(node.id);
+            if (!(expandedNodes.value as unknown[]).includes(node.id)) {
+              (expandedNodes.value as unknown[]).push(node.id);
             }
             currentNodes = node.children!;
           }
@@ -125,6 +132,7 @@ async function expandTree() {
               location: node._location,
               url: node.href,
               has_children: node.children !== undefined,
+              is_terminal: node._is_terminal,
             });
           }
         }
@@ -136,7 +144,7 @@ async function expandTree() {
 
 async function lazyLoadChildren(item: unknown) {
   const treeItem = item as TreeItem;
-  const childNodes = await treeSource.getChildNodes(treeItem.id);
+  const childNodes = await getChildNodes(treeItem.id);
   for (const child of childNodes) {
     treeItem.children?.push({
       id: child.id,
@@ -144,6 +152,7 @@ async function lazyLoadChildren(item: unknown) {
       href: child.url,
       children: child.has_children ? [] : undefined,
       _location: child.location,
+      _is_terminal: child.is_terminal,
     });
   }
   // If the node doesn't have any children, we update it.
@@ -163,8 +172,8 @@ 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) {
-  const parents = treeSource.getParentNodesId(page);
+async function onDocumentDelete(page: DocumentReference) {
+  const parents = treeSource.getParentNodesId(page, props.includeTerminals);
   let currentItem: TreeItem | undefined = undefined;
   let currentItemChildren: TreeItem[] | undefined = rootNodes.value;
   let notFound = false;
@@ -192,8 +201,8 @@ async function onDocumentDelete(page: PageData) {
 
 // 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) {
-  const parents = treeSource.getParentNodesId(page);
+async function onDocumentUpdate(page: DocumentReference) {
+  const parents = treeSource.getParentNodesId(page, props.includeTerminals);
   let currentParent: string | undefined = undefined;
   let currentItems: TreeItem[] | undefined = rootNodes.value;
   let notFound = false;
@@ -204,7 +213,7 @@ async function onDocumentUpdate(page: PageData) {
       if (currentItems[i].id == parents[0]) {
         if (parents.length == 1) {
           // Page update
-          const newItems = await treeSource.getChildNodes(
+          const newItems = await getChildNodes(
             currentParent ? currentParent : "",
           );
           for (const newItem of newItems) {
@@ -235,10 +244,11 @@ async function onDocumentUpdate(page: PageData) {
     // We don't do anything because this node will be loaded lazily anyway.
     return;
   }
-  const newItems = await treeSource.getChildNodes(
-    currentParent ? currentParent : "",
+  const newItems = await getChildNodes(currentParent ? currentParent : "");
+  const currentPageParents = treeSource.getParentNodesId(
+    props.currentPageReference!,
+    props.includeTerminals,
   );
-  const currentPageParents = treeSource.getParentNodesId(props.currentPage);
   newItemsLoop: for (const newItem of newItems) {
     for (const i of currentItems!.keys()) {
       if (newItem.id == currentItems![i].id) {
@@ -251,6 +261,7 @@ async function onDocumentUpdate(page: PageData) {
       href: newItem.url,
       children: newItem.has_children ? [] : undefined,
       _location: newItem.location,
+      _is_terminal: newItem.is_terminal,
     });
     if (
       currentPageParents.length > 0 &&
@@ -261,6 +272,12 @@ async function onDocumentUpdate(page: PageData) {
     }
   }
 }
+
+async function getChildNodes(id: string) {
+  return (await treeSource.getChildNodes(id)).filter(
+    (c) => props.includeTerminals || !c.is_terminal,
+  );
+}
 </script>
 
 <template>
@@ -287,6 +304,7 @@ async function onDocumentUpdate(page: PageData) {
             location: item._location,
             url: item.href,
             has_children: item.children !== undefined,
+            is_terminal: item._is_terminal,
           });
         "
         >{{ item.title }}</a
@@ -312,16 +330,4 @@ async function onDocumentUpdate(page: PageData) {
 :deep(.v-list-item--link) {
   cursor: default;
 }
-/*TODO: This section needs to be removed when the oficial fix is released on Vuetify
-https://github.com/vuetifyjs/vuetify/issues/20421#event-16001533054
-START FIX
-*/
-:deep(.v-treeview-item:not(.v-list-group__header)) {
-  padding-inline-start: calc(39px + 6px) !important;
-}
-
-:deep(.v-treeview-item .v-list-item__spacer) {
-  width: 4px !important;
-}
-/*END FIX*/
 </style>

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

@@ -18,8 +18,8 @@ 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 } from "vue";
-const tab = ref(null);
+import { Ref, ref } from "vue";
+const tab: Ref<unknown> = ref();
 
 const emits = defineEmits(["tab-change"]);