@xwiki/cristal-dsvuetify 0.11.0 → 0.13.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xwiki/cristal-dsvuetify",
-  "version": "0.11.0",
+  "version": "0.13.0",
   "license": "LGPL 2.1",
   "author": "XWiki Org Community <contact@xwiki.org>",
   "homepage": "https://cristal.xwiki.org/",
@@ -22,18 +22,26 @@
   },
   "main": "./dist/index.es.js",
   "dependencies": {
-    "inversify": "6.0.2",
-    "vue": "3.5.12",
-    "vue-i18n": "10.0.4",
-    "vuetify": "3.7.2",
-    "@xwiki/cristal-api": "0.11.0",
-    "@xwiki/cristal-dsapi": "0.11.0",
-    "@xwiki/cristal-navigation-tree-api": "0.11.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",
-    "vue-tsc": "2.1.6",
-    "@xwiki/cristal-dev-config": "0.11.0"
+    "reflect-metadata": "0.2.2",
+    "typescript": "5.6.3",
+    "vite": "6.0.3",
+    "vue-tsc": "2.1.10",
+    "@xwiki/cristal-dev-config": "0.13.0"
   },
   "scripts": {
     "build": "pnpm compile",

package/src/components/componentsInit.ts

@@ -18,9 +18,9 @@
  * 02110-1301 USA, or see the FSF site: http://www.fsf.org.
  */
 
+import { VuetifyDesignSystemLoader } from "./vuetifyDesignSystemLoader";
 import type { DesignSystemLoader } from "@xwiki/cristal-api";
 import type { Container } from "inversify";
-import { VuetifyDesignSystemLoader } from "./vuetifyDesignSystemLoader";
 
 export default class ComponentInit {
   constructor(container: Container) {

package/src/components/vuetifyDesignSystemLoader.ts

@@ -18,20 +18,23 @@
  * 02110-1301 USA, or see the FSF site: http://www.fsf.org.
  */
 
-import type { App } from "vue";
+import { registerAsyncComponent } from "@xwiki/cristal-api";
+import { injectable } from "inversify";
+import { createVuetify } from "vuetify";
+// eslint-disable-next-line import/namespace
 import * as components from "vuetify/components";
 import { VCol, VContainer, VRow, VTextField } from "vuetify/components";
-import type { DesignSystemLoader } from "@xwiki/cristal-api";
 
-import { createVuetify } from "vuetify";
-import colors from "vuetify/util/colors";
-import { mdi } from "vuetify/iconsets/mdi";
 import * as directives from "vuetify/directives";
-import { injectable } from "inversify";
-import { registerAsyncComponent } from "@xwiki/cristal-api";
+import { mdi } from "vuetify/iconsets/mdi";
+import { blue, blueGrey } from "vuetify/util/colors";
+import type { DesignSystemLoader } from "@xwiki/cristal-api";
+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
@@ -63,8 +66,8 @@ export class VuetifyDesignSystemLoader implements DesignSystemLoader {
             dark: false,
             colors: {
               background: "#FFFFFF",
-              primary: colors.blue.darken4,
-              secondary: colors.blueGrey.darken4,
+              primary: blue.darken4,
+              secondary: blueGrey.darken4,
             },
           },
         },

package/src/vue/__tests__/utils/vuetify.ts

@@ -19,6 +19,7 @@
  */
 
 import { createVuetify } from "vuetify";
+// eslint-disable-next-line import/namespace
 import * as components from "vuetify/components";
 import * as directives from "vuetify/directives";
 

package/src/vue/__tests__/x-btn.test.ts

@@ -17,10 +17,11 @@
  * Software Foundation, Inc., 51 Franklin St, Fifth Floor, Boston, MA
  * 02110-1301 USA, or see the FSF site: http://www.fsf.org.
  */
-import { describe, expect, it } from "vitest";
-import { mount, VueWrapper } from "@vue/test-utils";
-import XBtn from "../x-btn.vue";
+
 import { addVuetifyOptions } from "./utils/vuetify";
+import XBtn from "../x-btn.vue";
+import { VueWrapper, mount } from "@vue/test-utils";
+import { describe, expect, it } from "vitest";
 
 /**
  * Mount a XBtn component with the default configuration.

package/src/vue/css/style.css

@@ -17,6 +17,7 @@
  * Software Foundation, Inc., 51 Franklin St, Fifth Floor, Boston, MA
  * 02110-1301 USA, or see the FSF site: http://www.fsf.org.
  */
+
 .load-spinner {
   background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200"><circle fill="%23B9B9B9" stroke="%23B9B9B9" stroke-width="6" r="15" cx="40" cy="100"><animate attributeName="opacity" calcMode="spline" dur="2" values="1;0;1;" keySplines=".5 0 .5 1;.5 0 .5 1" repeatCount="indefinite" begin="-.4"></animate></circle><circle fill="%23B9B9B9" stroke="%23B9B9B9" stroke-width="6" r="15" cx="100" cy="100"><animate attributeName="opacity" calcMode="spline" dur="2" values="1;0;1;" keySplines=".5 0 .5 1;.5 0 .5 1" repeatCount="indefinite" begin="-.2"></animate></circle><circle fill="%23B9B9B9" stroke="%23B9B9B9" stroke-width="6" r="15" cx="160" cy="100"><animate attributeName="opacity" calcMode="spline" dur="2" values="1;0;1;" keySplines=".5 0 .5 1;.5 0 .5 1" repeatCount="indefinite" begin="0"></animate></circle></svg>');
   background-size: cover;
@@ -31,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
@@ -81,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%);
@@ -534,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-file-input.vue

@@ -1,10 +1,9 @@
 <script setup lang="ts">
-import type { TextFieldModel, TextFieldProps } from "@xwiki/cristal-dsapi";
-import { computed } from "vue";
-import { VFileInput } from "vuetify/components/VFileInput";
 import messages from "../../translations";
+import { computed, defineModel } from "vue";
 import { useI18n } from "vue-i18n";
-import { defineModel } from "vue";
+import { VFileInput } from "vuetify/components/VFileInput";
+import type { TextFieldModel, TextFieldProps } from "@xwiki/cristal-dsapi";
 
 const { t } = useI18n({
   messages,

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

@@ -1,9 +1,9 @@
 <script setup lang="ts">
-import { type TextFieldProps } from "@xwiki/cristal-dsapi";
-import { computed } from "vue";
-import { VTextField } from "vuetify/components/VTextField";
 import messages from "../../translations";
+import { computed } from "vue";
 import { useI18n } from "vue-i18n";
+import { VTextField } from "vuetify/components/VTextField";
+import type { TextFieldProps } from "@xwiki/cristal-dsapi";
 
 const { t } = useI18n({
   messages,
@@ -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

@@ -23,7 +23,7 @@ import type { AlertProps } from "@xwiki/cristal-dsapi";
 defineProps<AlertProps>();
 </script>
 <template>
-  <v-alert closable :title="title" :type="type" :text="description">
+  <v-alert :closable="closable" :title="title" :type="type" :text="description">
     <x-btn
       v-for="action of actions"
       :key="action.name"
@@ -32,5 +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-btn.vue

@@ -19,7 +19,7 @@ Software Foundation, Inc., 51 Franklin St, Fifth Floor, Boston, MA
 -->
 <script lang="ts" setup>
 import { computed } from "vue";
-import { type BtnProps } from "@xwiki/cristal-dsapi";
+import type { BtnProps } from "@xwiki/cristal-dsapi";
 
 const { variant } = defineProps<BtnProps>();
 

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

@@ -29,38 +29,51 @@ 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 { Ref, onBeforeMount, ref, watch } from "vue";
+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 { SpaceReference } from "@xwiki/cristal-model-api";
 import type {
-  NavigationTreeSource,
   NavigationTreeNode,
+  NavigationTreeSource,
+  NavigationTreeSourceProvider,
 } from "@xwiki/cristal-navigation-tree-api";
+import type { Ref } from "vue";
 
 type TreeItem = {
   id: string;
   title: string;
   href: string;
   children?: Array<TreeItem>;
-  _location: string;
+  _location: SpaceReference;
 };
 
 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);
 
 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<{
-  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,
@@ -69,62 +82,62 @@ 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 = props.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 (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!;
           }
-          if (!expandedNodes.value.includes(node.id)) {
-            expandedNodes.value.push(node.id);
-          }
-          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;
   }
 }
 
 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,
@@ -148,6 +161,83 @@ function clearSelection() {
     activatedNodes.value.pop();
   }
 }
+
+// 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;
+  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;
+        }
+      }
+    }
+  }
+}
+
+// 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;
+
+  currentItemsLoop: while (currentItems && !notFound) {
+    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;
+          if (!currentItems[i].children) {
+            currentItems[i].children = [];
+          }
+          currentItems = currentItems[i].children;
+          parents.shift();
+          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;
+      }
+    }
+    currentItems!.push({
+      id: newItem.id,
+      title: newItem.label,
+      href: newItem.url,
+      children: newItem.has_children ? [] : undefined,
+      _location: newItem.location,
+    });
+  }
+}
 </script>
 
 <template>

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"
+  ]
 }

package/vitest.config.ts

@@ -18,9 +18,9 @@
  * 02110-1301 USA, or see the FSF site: http://www.fsf.org.
  */
 
+import localConfig from "./vite.config";
 import { defineConfig, mergeConfig } from "vitest/config";
 import defaultConfig from "@xwiki/cristal-dev-config/vitest-vue.config";
-import localConfig from "./vite.config";
 
 export default mergeConfig(
   mergeConfig(defaultConfig, localConfig),