@xwiki/cristal-dsvuetify 0.14.0 → 0.15.0

package/dist/x-navigation-tree-select-DaiYF3ux.js

@@ -0,0 +1,95 @@
+import { defineComponent as C, mergeModels as X, inject as k, useModel as w, ref as v, onMounted as N, resolveComponent as i, openBlock as B, createElementBlock as D, Fragment as H, createVNode as t, unref as o, withCtx as a, createTextVNode as h, toDisplayString as _ } from "vue";
+import { t as M } from "./translations-k4crOAds.js";
+import T from "./x-breadcrumb-C2iUd4Sf.js";
+import { SpaceReference as S } from "@xwiki/cristal-model-api";
+import { useI18n as F } from "vue-i18n";
+import { a as I } from "./index-BAakw3UY.js";
+import { _ as j } from "./_plugin-vue_export-helper-CHgC5LLL.js";
+const z = /* @__PURE__ */ C({
+  __name: "x-navigation-tree-select",
+  props: /* @__PURE__ */ X({
+    label: {},
+    help: {},
+    currentPageReference: {},
+    modelValue: {}
+  }, {
+    modelValue: {},
+    modelModifiers: {}
+  }),
+  emits: ["update:modelValue"],
+  setup(m) {
+    const d = k("cristal"), f = d.getContainer().get("PageHierarchyResolverProvider").get(), y = d.getContainer().get("ModelReferenceHandlerProvider").get(), { t: c } = F({
+      messages: M
+    }), s = m, p = w(m, "modelValue"), u = v(!1), n = v([]);
+    let l;
+    N(async () => {
+      l = s.currentPageReference, p.value = s.currentPageReference.space, n.value = await f.getPageHierarchy(
+        s.currentPageReference.space
+      );
+    });
+    async function b(e) {
+      l = y.createDocumentReference(
+        e.location.names[e.location.names.length - 1],
+        new S(e.location.wiki, ...e.location.names.slice(0, -1))
+      ), p.value = e.location, n.value = await f.getPageHierarchy(l);
+    }
+    return (e, r) => {
+      const P = i("x-btn"), V = i("XNavigationTree"), R = i("XBtn"), x = i("XDialog");
+      return B(), D(H, null, [
+        t(o(I), {
+          label: e.label,
+          hint: e.help,
+          "persistent-hint": e.help !== void 0,
+          active: n.value.length > 0,
+          readonly: ""
+        }, {
+          default: a(() => [
+            t(T, { items: n.value }, null, 8, ["items"])
+          ]),
+          _: 1
+        }, 8, ["label", "hint", "persistent-hint", "active"]),
+        t(x, {
+          modelValue: u.value,
+          "onUpdate:modelValue": r[1] || (r[1] = (g) => u.value = g),
+          width: "auto",
+          title: o(c)("vuetify.tree.select.location.label")
+        }, {
+          activator: a(() => [
+            t(P, {
+              id: "change-page-location-button",
+              size: "small",
+              color: "secondary"
+            }, {
+              default: a(() => [
+                h(_(o(c)("vuetify.tree.select.location.label")), 1)
+              ]),
+              _: 1
+            })
+          ]),
+          default: a(() => [
+            t(V, {
+              "current-page-reference": o(l),
+              "click-action": b
+            }, null, 8, ["current-page-reference"])
+          ]),
+          footer: a(() => [
+            t(R, {
+              variant: "primary",
+              onClick: r[0] || (r[0] = (g) => u.value = !1)
+            }, {
+              default: a(() => [
+                h(_(o(c)("vuetify.tree.select.location.select")), 1)
+              ]),
+              _: 1
+            })
+          ]),
+          _: 1
+        }, 8, ["modelValue", "title"])
+      ], 64);
+    };
+  }
+}), J = /* @__PURE__ */ j(z, [["__scopeId", "data-v-059de402"]]);
+export {
+  J as default
+};
+//# sourceMappingURL=x-navigation-tree-select-DaiYF3ux.js.map

package/dist/x-navigation-tree-select-DaiYF3ux.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"x-navigation-tree-select-DaiYF3ux.js","sources":["../src/vue/form/x-navigation-tree-select.vue"],"sourcesContent":["<!--\nSee the LICENSE file distributed with this work for additional\ninformation regarding copyright ownership.\n\nThis is free software; you can redistribute it and/or modify it\nunder the terms of the GNU Lesser General Public License as\npublished by the Free Software Foundation; either version 2.1 of\nthe License, or (at your option) any later version.\n\nThis software is distributed in the hope that it will be useful,\nbut WITHOUT ANY WARRANTY; without even the implied warranty of\nMERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU\nLesser General Public License for more details.\n\nYou should have received a copy of the GNU Lesser General Public\nLicense along with this software; if not, write to the Free\nSoftware Foundation, Inc., 51 Franklin St, Fifth Floor, Boston, MA\n02110-1301 USA, or see the FSF site: http://www.fsf.org.\n-->\n<script setup lang=\"ts\">\nimport messages from \"../../translations\";\nimport XBreadcrumb from \"../x-breadcrumb.vue\";\nimport { SpaceReference } from \"@xwiki/cristal-model-api\";\nimport { inject, onMounted, ref } from \"vue\";\nimport { useI18n } from \"vue-i18n\";\nimport { VTextField } from \"vuetify/components/VTextField\";\nimport type { CristalApp } from \"@xwiki/cristal-api\";\nimport type { NavigationTreeSelectProps } from \"@xwiki/cristal-dsapi\";\nimport type {\n  PageHierarchyItem,\n  PageHierarchyResolver,\n  PageHierarchyResolverProvider,\n} from \"@xwiki/cristal-hierarchy-api\";\nimport type { DocumentReference } from \"@xwiki/cristal-model-api\";\nimport type {\n  ModelReferenceHandler,\n  ModelReferenceHandlerProvider,\n} from \"@xwiki/cristal-model-reference-api\";\nimport type { NavigationTreeNode } from \"@xwiki/cristal-navigation-tree-api\";\nimport type { Ref } from \"vue\";\n\nconst cristal: CristalApp = inject<CristalApp>(\"cristal\")!;\nconst hierarchyResolver: PageHierarchyResolver = cristal\n  .getContainer()\n  .get<PageHierarchyResolverProvider>(\"PageHierarchyResolverProvider\")\n  .get()!;\nconst referenceHandler: ModelReferenceHandler = cristal\n  .getContainer()\n  .get<ModelReferenceHandlerProvider>(\"ModelReferenceHandlerProvider\")\n  .get()!;\n\nconst { t } = useI18n({\n  messages,\n});\nconst props = defineProps<NavigationTreeSelectProps>();\nconst model = defineModel<SpaceReference>();\n\nconst openedLocationDialog: Ref<boolean> = ref(false);\nconst hierarchy: Ref<Array<PageHierarchyItem>> = ref([]);\nlet selectedPage: DocumentReference | undefined;\n\nonMounted(async () => {\n  selectedPage = props.currentPageReference;\n  model.value = props.currentPageReference!.space;\n  hierarchy.value = await hierarchyResolver.getPageHierarchy(\n    props.currentPageReference!.space!,\n  );\n});\n\nasync function treeNodeClickAction(node: NavigationTreeNode) {\n  selectedPage = referenceHandler.createDocumentReference(\n    node.location.names[node.location.names.length - 1],\n    new SpaceReference(node.location.wiki, ...node.location.names.slice(0, -1)),\n  );\n  model.value = node.location;\n  hierarchy.value = await hierarchyResolver.getPageHierarchy(selectedPage);\n}\n</script>\n\n<template>\n  <v-text-field\n    :label=\"label\"\n    :hint=\"help\"\n    :persistent-hint=\"help !== undefined\"\n    :active=\"hierarchy.length > 0\"\n    readonly\n  >\n    <template #default>\n      <XBreadcrumb :items=\"hierarchy\"></XBreadcrumb>\n    </template>\n  </v-text-field>\n  <XDialog\n    v-model=\"openedLocationDialog\"\n    width=\"auto\"\n    :title=\"t('vuetify.tree.select.location.label')\"\n  >\n    <template #activator>\n      <x-btn id=\"change-page-location-button\" size=\"small\" color=\"secondary\">\n        {{ t(\"vuetify.tree.select.location.label\") }}\n      </x-btn>\n    </template>\n    <template #default>\n      <XNavigationTree\n        :current-page-reference=\"selectedPage\"\n        :click-action=\"treeNodeClickAction\"\n      ></XNavigationTree>\n    </template>\n    <template #footer>\n      <XBtn variant=\"primary\" @click=\"openedLocationDialog = false\">\n        {{ t(\"vuetify.tree.select.location.select\") }}\n      </XBtn>\n    </template>\n  </XDialog>\n</template>\n\n<style scoped>\n.v-treeview {\n  overflow: auto;\n}\n</style>\n"],"names":["cristal","inject","hierarchyResolver","referenceHandler","t","useI18n","messages","props","__props","model","_useModel","openedLocationDialog","ref","hierarchy","selectedPage","onMounted","treeNodeClickAction","node","SpaceReference"],"mappings":";;;;;;;;;;;;;;;;;;;;AAyCM,UAAAA,IAAsBC,EAAmB,SAAS,GAClDC,IAA2CF,EAC9C,aAAA,EACA,IAAmC,+BAA+B,EAClE,IAAI,GACDG,IAA0CH,EAC7C,aAAA,EACA,IAAmC,+BAA+B,EAClE,IAAI,GAED,EAAE,GAAAI,EAAE,IAAIC,EAAQ;AAAA,MACpBC,UAAAA;AAAAA,IAAA,CACD,GACKC,IAAQC,GACRC,IAAQC,iBAA4B,GAEpCC,IAAqCC,EAAI,EAAK,GAC9CC,IAA2CD,EAAI,EAAE;AACnD,QAAAE;AAEJ,IAAAC,EAAU,YAAY;AACpB,MAAAD,IAAeP,EAAM,sBACfE,EAAA,QAAQF,EAAM,qBAAsB,OAChCM,EAAA,QAAQ,MAAMX,EAAkB;AAAA,QACxCK,EAAM,qBAAsB;AAAA,MAC9B;AAAA,IAAA,CACD;AAED,mBAAeS,EAAoBC,GAA0B;AAC3D,MAAAH,IAAeX,EAAiB;AAAA,QAC9Bc,EAAK,SAAS,MAAMA,EAAK,SAAS,MAAM,SAAS,CAAC;AAAA,QAClD,IAAIC,EAAeD,EAAK,SAAS,MAAM,GAAGA,EAAK,SAAS,MAAM,MAAM,GAAG,EAAE,CAAC;AAAA,MAC5E,GACAR,EAAM,QAAQQ,EAAK,UACnBJ,EAAU,QAAQ,MAAMX,EAAkB,iBAAiBY,CAAY;AAAA,IAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/x-text-field-2Sv6HUGW.js

@@ -0,0 +1,43 @@
+import { defineComponent as s, mergeModels as m, useModel as d, computed as i, openBlock as p, createBlock as f, unref as y } from "vue";
+import { t as c } from "./translations-k4crOAds.js";
+import { useI18n as V } from "vue-i18n";
+import { a as h } from "./index-BAakw3UY.js";
+const g = /* @__PURE__ */ s({
+  __name: "x-text-field",
+  props: /* @__PURE__ */ m({
+    name: {},
+    label: {},
+    required: { type: Boolean },
+    autofocus: { type: Boolean },
+    modelValue: {},
+    help: {},
+    readonly: { type: Boolean }
+  }, {
+    modelValue: {},
+    modelModifiers: {}
+  }),
+  emits: ["update:modelValue"],
+  setup(l) {
+    const { t: n } = V({
+      messages: c
+    }), a = l, t = d(l, "modelValue"), u = i(() => {
+      const e = [];
+      return a.required && e.push((o) => o ? !0 : n("vuetify.text.input.mandatory")), e;
+    });
+    return (e, o) => (p(), f(y(h), {
+      modelValue: t.value,
+      "onUpdate:modelValue": o[0] || (o[0] = (r) => t.value = r),
+      label: e.label,
+      name: e.name,
+      autofocus: e.autofocus,
+      hint: e.help,
+      "persistent-hint": e.help !== void 0,
+      rules: u.value,
+      readonly: e.readonly
+    }, null, 8, ["modelValue", "label", "name", "autofocus", "hint", "persistent-hint", "rules", "readonly"]));
+  }
+});
+export {
+  g as default
+};
+//# sourceMappingURL=x-text-field-2Sv6HUGW.js.map

package/dist/{x-text-field-BxSiyeFc.js.map → x-text-field-2Sv6HUGW.js.map}

@@ -1 +1 @@
-{"version":3,"file":"x-text-field-BxSiyeFc.js","sources":["../src/vue/form/x-text-field.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport messages from \"../../translations\";\nimport { computed } from \"vue\";\nimport { useI18n } from \"vue-i18n\";\nimport { VTextField } from \"vuetify/components/VTextField\";\nimport type { TextFieldProps } from \"@xwiki/cristal-dsapi\";\n\nconst { t } = useI18n({\n  messages,\n});\nconst props = defineProps<TextFieldProps>();\nconst input = defineModel<string>();\n\nconst rules = computed(() => {\n  const rulesList = [];\n  if (props.required) {\n    rulesList.push((value: unknown) => {\n      if (value) {\n        return true;\n      } else {\n        return t(\"vuetify.text.input.mandatory\");\n      }\n    });\n  }\n  return rulesList;\n});\n</script>\n\n<template>\n  <v-text-field\n    v-model=\"input\"\n    :label=\"label\"\n    :name=\"name\"\n    :autofocus=\"autofocus\"\n    :rules=\"rules\"\n  ></v-text-field>\n</template>\n\n<style scoped></style>\n"],"names":["t","useI18n","messages","props","__props","input","_useModel","rules","computed","rulesList","value"],"mappings":";;;;;;;;;;;;;;;;;;AAOM,UAAA,EAAE,GAAAA,EAAE,IAAIC,EAAQ;AAAA,MACpBC,UAAAA;AAAAA,IAAA,CACD,GACKC,IAAQC,GACRC,IAAQC,EAAmBF,GAAA,YAAC,GAE5BG,IAAQC,EAAS,MAAM;AAC3B,YAAMC,IAAY,CAAC;AACnB,aAAIN,EAAM,YACEM,EAAA,KAAK,CAACC,MACVA,IACK,KAEAV,EAAE,8BAA8B,CAE1C,GAEIS;AAAA,IAAA,CACR;;;;;;;;;;;"}
+{"version":3,"file":"x-text-field-2Sv6HUGW.js","sources":["../src/vue/form/x-text-field.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport messages from \"../../translations\";\nimport { computed } from \"vue\";\nimport { useI18n } from \"vue-i18n\";\nimport { VTextField } from \"vuetify/components/VTextField\";\nimport type { TextFieldProps } from \"@xwiki/cristal-dsapi\";\n\nconst { t } = useI18n({\n  messages,\n});\nconst props = defineProps<TextFieldProps>();\nconst input = defineModel<string>();\n\nconst rules = computed(() => {\n  const rulesList = [];\n  if (props.required) {\n    rulesList.push((value: unknown) => {\n      if (value) {\n        return true;\n      } else {\n        return t(\"vuetify.text.input.mandatory\");\n      }\n    });\n  }\n  return rulesList;\n});\n</script>\n\n<template>\n  <v-text-field\n    v-model=\"input\"\n    :label=\"label\"\n    :name=\"name\"\n    :autofocus=\"autofocus\"\n    :hint=\"help\"\n    :persistent-hint=\"help !== undefined\"\n    :rules=\"rules\"\n    :readonly=\"readonly\"\n  ></v-text-field>\n</template>\n\n<style scoped></style>\n"],"names":["t","useI18n","messages","props","__props","input","_useModel","rules","computed","rulesList","value"],"mappings":";;;;;;;;;;;;;;;;;;;;AAOM,UAAA,EAAE,GAAAA,EAAE,IAAIC,EAAQ;AAAA,MACpBC,UAAAA;AAAAA,IAAA,CACD,GACKC,IAAQC,GACRC,IAAQC,EAAmBF,GAAA,YAAC,GAE5BG,IAAQC,EAAS,MAAM;AAC3B,YAAMC,IAAY,CAAC;AACnB,aAAIN,EAAM,YACEM,EAAA,KAAK,CAACC,MACVA,IACK,KAEAV,EAAE,8BAA8B,CAE1C,GAEIS;AAAA,IAAA,CACR;;;;;;;;;;;;;;"}

package/langs/translation-de.json

@@ -1,4 +1,6 @@
 {
     "vuetify.file.input.mandatory": "Pflichtfeld",
-    "vuetify.text.input.mandatory": "Pflichtfeld"
+    "vuetify.text.input.mandatory": "Pflichtfeld",
+    "vuetify.tree.select.location.label": "Speicherort der Seite ändern",
+    "vuetify.tree.select.location.select": "Auswählen"
 }

package/langs/translation-en.json

@@ -1,4 +1,6 @@
 {
   "vuetify.file.input.mandatory": "Mandatory field",
-  "vuetify.text.input.mandatory": "Mandatory field"
+  "vuetify.text.input.mandatory": "Mandatory field",
+  "vuetify.tree.select.location.label": "Change Page Location",
+  "vuetify.tree.select.location.select": "Select"
 }

package/langs/translation-fr.json

@@ -1,4 +1,6 @@
 {
     "vuetify.file.input.mandatory": "Champ obligatoire",
-    "vuetify.text.input.mandatory": "Champ obligatoire"
+    "vuetify.text.input.mandatory": "Champ obligatoire",
+    "vuetify.tree.select.location.label": "Changer l'emplacement de la page",
+    "vuetify.tree.select.location.select": "Sélectionner"
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xwiki/cristal-dsvuetify",
-  "version": "0.14.0",
+  "version": "0.15.0",
   "license": "LGPL 2.1",
   "author": "XWiki Org Community <contact@xwiki.org>",
   "homepage": "https://cristal.xwiki.org/",
@@ -22,14 +22,16 @@
   },
   "main": "./dist/index.es.js",
   "dependencies": {
-    "inversify": "6.2.1",
+    "inversify": "6.2.2",
     "vue": "3.5.13",
-    "vue-i18n": "11.0.1",
-    "vuetify": "3.7.6",
-    "@xwiki/cristal-api": "0.14.0",
-    "@xwiki/cristal-model-api": "0.14.0",
-    "@xwiki/cristal-document-api": "0.14.0",
-    "@xwiki/cristal-navigation-tree-api": "0.14.0"
+    "vue-i18n": "11.1.0",
+    "vuetify": "3.7.11",
+    "@xwiki/cristal-model-api": "0.15.0",
+    "@xwiki/cristal-api": "0.15.0",
+    "@xwiki/cristal-document-api": "0.15.0",
+    "@xwiki/cristal-model-reference-api": "0.15.0",
+    "@xwiki/cristal-navigation-tree-api": "0.15.0",
+    "@xwiki/cristal-hierarchy-api": "0.15.0"
   },
   "peerDependencies": {
     "reflect-metadata": "0.2.2"
@@ -38,10 +40,10 @@
     "@vue/test-utils": "2.4.6",
     "reflect-metadata": "0.2.2",
     "typescript": "5.7.3",
-    "vite": "6.0.11",
+    "vite": "6.1.0",
     "vue-tsc": "2.2.0",
-    "@xwiki/cristal-dev-config": "0.14.0",
-    "@xwiki/cristal-dsapi": "0.14.0"
+    "@xwiki/cristal-dsapi": "0.15.0",
+    "@xwiki/cristal-dev-config": "0.15.0"
   },
   "scripts": {
     "build": "pnpm compile",

package/src/components/vuetifyDesignSystemLoader.ts

@@ -26,7 +26,7 @@ import * as components from "vuetify/components";
 import { VCol, VContainer, VRow, VTextField } from "vuetify/components";
 
 import * as directives from "vuetify/directives";
-import { mdi } from "vuetify/iconsets/mdi";
+import { aliases, mdi } from "vuetify/iconsets/mdi-svg";
 import { blue, blueGrey } from "vuetify/util/colors";
 import type { DesignSystemLoader } from "@xwiki/cristal-api";
 import type { App } from "vue";
@@ -56,6 +56,7 @@ export class VuetifyDesignSystemLoader implements DesignSystemLoader {
       directives,
       icons: {
         defaultSet: "mdi",
+        aliases,
         sets: {
           mdi,
         },
@@ -146,5 +147,10 @@ export class VuetifyDesignSystemLoader implements DesignSystemLoader {
       "XCheckbox",
       () => import("../vue/form/x-checkbox.vue"),
     );
+    registerAsyncComponent(
+      app,
+      "XNavigationTreeSelect",
+      () => import("../vue/form/x-navigation-tree-select.vue"),
+    );
   }
 }

package/src/translations.ts

@@ -18,9 +18,13 @@
  * 02110-1301 USA, or see the FSF site: http://www.fsf.org.
  */
 
+import de from "../langs/translation-de.json";
 import en from "../langs/translation-en.json";
+import fr from "../langs/translation-fr.json";
 
 const translations: Record<string, Record<string, string>> = {
   en,
+  fr,
+  de,
 };
 export default translations;

package/src/vue/css/style.css

@@ -25,7 +25,7 @@
   height: 64px;
 }
 
-main ul {
+main ul, main ol {
   padding-inline-start: var(--cr-spacing-x-large);
 }
 

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

@@ -8,10 +8,14 @@ function submit() {
 
 <template>
   <v-form @submit.prevent="submit">
-    <v-container>
-      <slot></slot>
-    </v-container>
+    <slot></slot>
   </v-form>
 </template>
 
-<style scoped></style>
+<style scoped>
+.v-form {
+  display: flex;
+  flex-direction: column;
+  gap: var(--cr-spacing-x-small);
+}
+</style>

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

@@ -0,0 +1,120 @@
+<!--
+See the LICENSE file distributed with this work for additional
+information regarding copyright ownership.
+
+This is free software; you can redistribute it and/or modify it
+under the terms of the GNU Lesser General Public License as
+published by the Free Software Foundation; either version 2.1 of
+the License, or (at your option) any later version.
+
+This software is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU
+Lesser General Public License for more details.
+
+You should have received a copy of the GNU Lesser General Public
+License along with this software; if not, write to the Free
+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 messages from "../../translations";
+import XBreadcrumb from "../x-breadcrumb.vue";
+import { SpaceReference } from "@xwiki/cristal-model-api";
+import { inject, onMounted, ref } from "vue";
+import { useI18n } from "vue-i18n";
+import { VTextField } from "vuetify/components/VTextField";
+import type { CristalApp } from "@xwiki/cristal-api";
+import type { NavigationTreeSelectProps } from "@xwiki/cristal-dsapi";
+import type {
+  PageHierarchyItem,
+  PageHierarchyResolver,
+  PageHierarchyResolverProvider,
+} from "@xwiki/cristal-hierarchy-api";
+import type { DocumentReference } from "@xwiki/cristal-model-api";
+import type {
+  ModelReferenceHandler,
+  ModelReferenceHandlerProvider,
+} from "@xwiki/cristal-model-reference-api";
+import type { NavigationTreeNode } from "@xwiki/cristal-navigation-tree-api";
+import type { Ref } from "vue";
+
+const cristal: CristalApp = inject<CristalApp>("cristal")!;
+const hierarchyResolver: PageHierarchyResolver = cristal
+  .getContainer()
+  .get<PageHierarchyResolverProvider>("PageHierarchyResolverProvider")
+  .get()!;
+const referenceHandler: ModelReferenceHandler = cristal
+  .getContainer()
+  .get<ModelReferenceHandlerProvider>("ModelReferenceHandlerProvider")
+  .get()!;
+
+const { t } = useI18n({
+  messages,
+});
+const props = defineProps<NavigationTreeSelectProps>();
+const model = defineModel<SpaceReference>();
+
+const openedLocationDialog: Ref<boolean> = ref(false);
+const hierarchy: Ref<Array<PageHierarchyItem>> = ref([]);
+let selectedPage: DocumentReference | undefined;
+
+onMounted(async () => {
+  selectedPage = props.currentPageReference;
+  model.value = props.currentPageReference!.space;
+  hierarchy.value = await hierarchyResolver.getPageHierarchy(
+    props.currentPageReference!.space!,
+  );
+});
+
+async function treeNodeClickAction(node: NavigationTreeNode) {
+  selectedPage = referenceHandler.createDocumentReference(
+    node.location.names[node.location.names.length - 1],
+    new SpaceReference(node.location.wiki, ...node.location.names.slice(0, -1)),
+  );
+  model.value = node.location;
+  hierarchy.value = await hierarchyResolver.getPageHierarchy(selectedPage);
+}
+</script>
+
+<template>
+  <v-text-field
+    :label="label"
+    :hint="help"
+    :persistent-hint="help !== undefined"
+    :active="hierarchy.length > 0"
+    readonly
+  >
+    <template #default>
+      <XBreadcrumb :items="hierarchy"></XBreadcrumb>
+    </template>
+  </v-text-field>
+  <XDialog
+    v-model="openedLocationDialog"
+    width="auto"
+    :title="t('vuetify.tree.select.location.label')"
+  >
+    <template #activator>
+      <x-btn id="change-page-location-button" size="small" color="secondary">
+        {{ t("vuetify.tree.select.location.label") }}
+      </x-btn>
+    </template>
+    <template #default>
+      <XNavigationTree
+        :current-page-reference="selectedPage"
+        :click-action="treeNodeClickAction"
+      ></XNavigationTree>
+    </template>
+    <template #footer>
+      <XBtn variant="primary" @click="openedLocationDialog = false">
+        {{ t("vuetify.tree.select.location.select") }}
+      </XBtn>
+    </template>
+  </XDialog>
+</template>
+
+<style scoped>
+.v-treeview {
+  overflow: auto;
+}
+</style>

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

@@ -32,7 +32,10 @@ const rules = computed(() => {
     :label="label"
     :name="name"
     :autofocus="autofocus"
+    :hint="help"
+    :persistent-hint="help !== undefined"
     :rules="rules"
+    :readonly="readonly"
   ></v-text-field>
 </template>
 

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()
@@ -66,10 +67,7 @@ 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("")) {
@@ -87,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++) {
@@ -163,7 +163,7 @@ 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 currentItem: TreeItem | undefined = undefined;
   let currentItemChildren: TreeItem[] | undefined = rootNodes.value;
@@ -192,7 +192,7 @@ 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) {
+async function onDocumentUpdate(page: DocumentReference) {
   const parents = treeSource.getParentNodesId(page);
   let currentParent: string | undefined = undefined;
   let currentItems: TreeItem[] | undefined = rootNodes.value;
@@ -238,7 +238,9 @@ async function onDocumentUpdate(page: PageData) {
   const newItems = await treeSource.getChildNodes(
     currentParent ? currentParent : "",
   );
-  const currentPageParents = treeSource.getParentNodesId(props.currentPage);
+  const currentPageParents = treeSource.getParentNodesId(
+    props.currentPageReference,
+  );
   newItemsLoop: for (const newItem of newItems) {
     for (const i of currentItems!.keys()) {
       if (newItem.id == currentItems![i].id) {
@@ -312,16 +314,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>