@xwiki/cristal-dsvuetify 0.12.0 → 0.13.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xwiki/cristal-dsvuetify",
-  "version": "0.12.0",
+  "version": "0.13.0",
   "license": "LGPL 2.1",
   "author": "XWiki Org Community <contact@xwiki.org>",
   "homepage": "https://cristal.xwiki.org/",
@@ -22,19 +22,26 @@
   },
   "main": "./dist/index.es.js",
   "dependencies": {
-    "inversify": "6.0.3",
-    "vue": "3.5.12",
-    "vue-i18n": "10.0.4",
-    "vuetify": "3.7.3",
-    "@xwiki/cristal-api": "0.12.0",
-    "@xwiki/cristal-dsapi": "0.12.0",
-    "@xwiki/cristal-navigation-tree-api": "0.12.0",
-    "@xwiki/cristal-document-api": "0.12.0"
+    "inversify": "6.2.0",
+    "vue": "3.5.13",
+    "vue-i18n": "10.0.5",
+    "vuetify": "3.7.5",
+    "@xwiki/cristal-document-api": "0.13.0",
+    "@xwiki/cristal-navigation-tree-api": "0.13.0",
+    "@xwiki/cristal-api": "0.13.0",
+    "@xwiki/cristal-dsapi": "0.13.0",
+    "@xwiki/cristal-model-api": "0.13.0"
+  },
+  "peerDependencies": {
+    "reflect-metadata": "0.2.2"
   },
   "devDependencies": {
     "@vue/test-utils": "2.4.6",
+    "reflect-metadata": "0.2.2",
+    "typescript": "5.6.3",
+    "vite": "6.0.3",
     "vue-tsc": "2.1.10",
-    "@xwiki/cristal-dev-config": "0.12.0"
+    "@xwiki/cristal-dev-config": "0.13.0"
   },
   "scripts": {
     "build": "pnpm compile",

package/src/components/vuetifyDesignSystemLoader.ts

@@ -33,6 +33,8 @@ import type { App } from "vue";
 
 @injectable()
 export class VuetifyDesignSystemLoader implements DesignSystemLoader {
+  // TODO: reduce the number of statements in the following method and reactivate the disabled eslint rule.
+  // eslint-disable-next-line max-statements
   loadDesignSystem(app: App): void {
     /*
         // Manuel importing to reduce build size

package/src/vue/css/style.css

@@ -32,7 +32,8 @@
   --cr-sizes-collapsed-main-sidebar-width: 32px; /*The width of the bar that gets shown containing the menu button to reopen the standard main main sidebar*/
   --cr-base-font-size: 16px;
   --cr-base-text-color: var(--cr-color-gray-950);
-
+  --cr-base-link-color: var(--cr-color-sky-700);
+  --cr-base-visited-link-color: var(--cr-color-blue-700);
 
   /*
    * Typography
@@ -82,9 +83,9 @@
   --cr-focus-ring: var(--cr-focus-ring-style) var(--cr-focus-ring-width) var(--cr-focus-ring-color);
   --cr-focus-ring-offset: 1px;
 
-/*
- * Color Primitives
- */
+  /*
+   * Color Primitives
+   */
 
   /* Gray */
   --cr-color-gray-50: hsl(0 0% 97.5%);
@@ -535,6 +536,12 @@
   --cr-panel-border-color: var(--cr-color-neutral-200);
   --cr-panel-border-width: 1px;
 
+  /*
+  * Header
+  */
+
+  --cr-panel-background-color: var(--cr-color-neutral-0);
+
   /*
    * Tooltips
    */

package/src/vue/form/x-text-field.vue

@@ -26,7 +26,12 @@ const rules = computed(() => {
 </script>
 
 <template>
-  <v-text-field :label="label" :name="name" :rules="rules"></v-text-field>
+  <v-text-field
+    :label="label"
+    :name="name"
+    :autofocus="autofocus"
+    :rules="rules"
+  ></v-text-field>
 </template>
 
 <style scoped></style>

package/src/vue/x-alert.vue

@@ -32,6 +32,8 @@ defineProps<AlertProps>();
       @click="action.callback"
       >{{ action.name }}</x-btn
     >
+    <br v-if="details" />
+    <small v-if="details">{{ details }}</small>
     <slot />
   </v-alert>
 </template>

package/src/vue/x-dialog.vue

@@ -18,16 +18,20 @@ Software Foundation, Inc., 51 Franklin St, Fifth Floor, Boston, MA
 02110-1301 USA, or see the FSF site: http://www.fsf.org.
 -->
 <script lang="ts" setup>
+import { useSlots } from "vue";
+
 defineProps<{
   title: string;
   width: string | number | undefined;
 }>();
 
+const slots = useSlots();
+
 // const innerIsActive = ref(props.isActive);
 </script>
 
 <template>
-  <v-dialog :width="width">
+  <v-dialog :width="width" scrollable>
     <template #activator="{ props }">
       <span v-bind="props">
         <slot name="activator" />
@@ -38,7 +42,16 @@ defineProps<{
         <v-card-text>
           <slot name="default" />
         </v-card-text>
+        <v-card-actions v-if="slots.footer">
+          <slot name="footer" />
+        </v-card-actions>
       </v-card>
     </template>
   </v-dialog>
 </template>
+
+<style scoped>
+:deep(.v-card-actions) {
+  padding: var(--cr-spacing-large);
+}
+</style>

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

@@ -33,6 +33,7 @@ import { inject, onBeforeMount, ref, watch } from "vue";
 import { VTreeview } from "vuetify/labs/VTreeview";
 import type { CristalApp, PageData } from "@xwiki/cristal-api";
 import type { DocumentService } from "@xwiki/cristal-document-api";
+import type { SpaceReference } from "@xwiki/cristal-model-api";
 import type {
   NavigationTreeNode,
   NavigationTreeSource,
@@ -45,7 +46,7 @@ type TreeItem = {
   title: string;
   href: string;
   children?: Array<TreeItem>;
-  _location: string;
+  _location: SpaceReference;
 };
 
 type OnClickAction = (node: NavigationTreeNode) => void;
@@ -64,6 +65,7 @@ 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;
@@ -80,59 +82,56 @@ onBeforeMount(async () => {
       _location: node.location,
     });
   }
-  if (props.currentPage !== undefined) {
-    await expandTree();
-  }
+  await expandTree();
 
   documentService.registerDocumentChangeListener("delete", onDocumentDelete);
   documentService.registerDocumentChangeListener("update", onDocumentUpdate);
 });
 
-watch(
-  () => props.currentPage,
-  async () => {
-    if (props.currentPage) {
-      await expandTree();
-    }
-  },
-);
+watch(() => props.currentPage, 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() {
-  const newExpandedNodes = treeSource.getParentNodesId(props.currentPage);
-  let i;
-  let currentNodes = rootNodes.value;
-  for (i = 0; i < newExpandedNodes.length - 1; i++) {
-    if (currentNodes) {
-      for (const node of currentNodes) {
-        if (node.id == newExpandedNodes[i]) {
-          if (node.children?.length == 0) {
-            await lazyLoadChildren(node);
-          }
-          if (!expandedNodes.value.includes(node.id)) {
-            expandedNodes.value.push(node.id);
+  if (props.currentPage && !isExpanding) {
+    isExpanding = true;
+    const newExpandedNodes = treeSource.getParentNodesId(props.currentPage);
+    let i;
+    let currentNodes = rootNodes.value;
+    for (i = 0; i < newExpandedNodes.length - 1; i++) {
+      if (currentNodes) {
+        for (const node of currentNodes) {
+          if (node.id == newExpandedNodes[i]) {
+            if (node.children?.length == 0) {
+              await lazyLoadChildren(node);
+            }
+            if (!expandedNodes.value.includes(node.id)) {
+              expandedNodes.value.push(node.id);
+            }
+            currentNodes = node.children!;
           }
-          currentNodes = node.children!;
         }
       }
     }
-  }
-  if (currentNodes) {
-    for (const node of currentNodes) {
-      if (node.id == newExpandedNodes[i]) {
-        activatedNodes.value = [node.id];
-        // If we have a custom click action, we want to use it on dynamic
-        // selection.
-        if (props.clickAction) {
-          props.clickAction({
-            id: node.id,
-            label: node.title,
-            location: node._location,
-            url: node.href,
-            has_children: node.children !== undefined,
-          });
+    if (currentNodes) {
+      for (const node of currentNodes) {
+        if (node.id == newExpandedNodes[i]) {
+          activatedNodes.value = [node.id];
+          // If we have a custom click action, we want to use it on dynamic
+          // selection.
+          if (props.clickAction) {
+            props.clickAction({
+              id: node.id,
+              label: node.title,
+              location: node._location,
+              url: node.href,
+              has_children: node.children !== undefined,
+            });
+          }
         }
       }
     }
+    isExpanding = false;
   }
 }
 
@@ -163,6 +162,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);
   let currentItems: TreeItem[] | undefined = rootNodes.value;
@@ -182,12 +183,15 @@ 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);
   let currentParent: string | undefined = undefined;
   let currentItems: TreeItem[] | undefined = rootNodes.value;
+  let notFound = false;
 
-  while (currentItems) {
+  currentItemsLoop: while (currentItems && !notFound) {
     for (const i of currentItems.keys()) {
       if (currentItems[i].id == parents[0]) {
         if (parents.length == 1) {
@@ -203,31 +207,35 @@ async function onDocumentUpdate(page: PageData) {
           }
         } else {
           currentParent = currentItems[i].id;
+          if (!currentItems[i].children) {
+            currentItems[i].children = [];
+          }
           currentItems = currentItems[i].children;
           parents.shift();
-          break;
+          continue currentItemsLoop;
         }
       }
     }
+    notFound = true;
+  }
 
-    // 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;
-        }
+  // 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,
-      });
     }
+    currentItems!.push({
+      id: newItem.id,
+      title: newItem.label,
+      href: newItem.url,
+      children: newItem.has_children ? [] : undefined,
+      _location: newItem.location,
+    });
   }
 }
 </script>

package/tsconfig.json

@@ -1,10 +1,16 @@
 {
-    "compilerOptions": {
-        "rootDir" : "src",
-        "outDir" : "dist",
-        "isolatedDeclarations": false
-    },
-    "extends": "./../../tsconfig.json",
-    "include": ["./src/index.ts", "./src/**/*"],
-    "exclude": ["**/*.spec.ts", "**/*.test.ts"]
+  "compilerOptions": {
+    "rootDir": "src",
+    "outDir": "dist",
+    "isolatedDeclarations": false
+  },
+  "extends": "./../../tsconfig.json",
+  "include": [
+    "./src/index.ts",
+    "./src/**/*"
+  ],
+  "exclude": [
+    "**/*.spec.ts",
+    "**/*.test.ts"
+  ]
 }