@xwiki/cristal-dsvuetify 0.13.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-tab-group-ngNByee3.js → x-tab-group-Bp7V46k9.js}

@@ -1,15 +1,15 @@
-import { defineComponent as f, ref as i, resolveComponent as n, openBlock as V, createBlock as b, withCtx as a, createVNode as s, renderSlot as u } from "vue";
+import { defineComponent as f, ref as i, resolveComponent as n, openBlock as b, createBlock as V, withCtx as a, createVNode as s, renderSlot as u } from "vue";
 const x = /* @__PURE__ */ f({
   __name: "x-tab-group",
-  emits: ["change"],
+  emits: ["tab-change"],
   setup(g, { emit: d }) {
     const t = i(null), m = d;
     function r(e) {
-      typeof e == "string" && m("change", e);
+      typeof e == "string" && m("tab-change", e);
     }
     return (e, o) => {
       const _ = n("v-tabs"), c = n("v-tabs-window"), p = n("v-card-text"), v = n("v-card");
-      return V(), b(v, { class: "mx-auto" }, {
+      return b(), V(v, { class: "mx-auto" }, {
         default: a(() => [
           s(_, {
             modelValue: t.value,
@@ -46,4 +46,4 @@ const x = /* @__PURE__ */ f({
 export {
   x as default
 };
-//# sourceMappingURL=x-tab-group-ngNByee3.js.map
+//# sourceMappingURL=x-tab-group-Bp7V46k9.js.map

package/dist/{x-tab-group-ngNByee3.js.map → x-tab-group-Bp7V46k9.js.map}

@@ -1 +1 @@
-{"version":3,"file":"x-tab-group-ngNByee3.js","sources":["../src/vue/x-tab-group.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 { ref } from \"vue\";\nconst tab = ref(null);\n\nconst emits = defineEmits([\"change\"]);\n\nfunction change(tabId: unknown) {\n  if (typeof tabId == \"string\") {\n    emits(\"change\", tabId);\n  }\n}\n</script>\n\n<template>\n  <v-card class=\"mx-auto\">\n    <v-tabs v-model=\"tab\" @update:model-value=\"change\">\n      <slot name=\"tabs\"></slot>\n    </v-tabs>\n    <v-card-text>\n      <v-tabs-window v-model=\"tab\">\n        <slot name=\"panels\"></slot>\n      </v-tabs-window>\n    </v-card-text>\n  </v-card>\n</template>\n\n<style scoped></style>\n"],"names":["tab","ref","emits","__emit","change","tabId"],"mappings":";;;;;AAqBM,UAAAA,IAAMC,EAAI,IAAI,GAEdC,IAAQC;AAEd,aAASC,EAAOC,GAAgB;AAC1B,MAAA,OAAOA,KAAS,YAClBH,EAAM,UAAUG,CAAK;AAAA,IACvB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"x-tab-group-Bp7V46k9.js","sources":["../src/vue/x-tab-group.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 { ref } from \"vue\";\nconst tab = ref(null);\n\nconst emits = defineEmits([\"tab-change\"]);\n\nfunction change(tabId: unknown) {\n  if (typeof tabId == \"string\") {\n    emits(\"tab-change\", tabId);\n  }\n}\n</script>\n\n<template>\n  <v-card class=\"mx-auto\">\n    <v-tabs v-model=\"tab\" @update:model-value=\"change\">\n      <slot name=\"tabs\"></slot>\n    </v-tabs>\n    <v-card-text>\n      <v-tabs-window v-model=\"tab\">\n        <slot name=\"panels\"></slot>\n      </v-tabs-window>\n    </v-card-text>\n  </v-card>\n</template>\n\n<style scoped></style>\n"],"names":["tab","ref","emits","__emit","change","tabId"],"mappings":";;;;;AAqBM,UAAAA,IAAMC,EAAI,IAAI,GAEdC,IAAQC;AAEd,aAASC,EAAOC,GAAgB;AAC1B,MAAA,OAAOA,KAAS,YAClBH,EAAM,cAAcG,CAAK;AAAA,IAC3B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

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-2Sv6HUGW.js.map

@@ -0,0 +1 @@
+{"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 +1,6 @@
-{}
+{
+    "vuetify.file.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.13.0",
+  "version": "0.15.0",
   "license": "LGPL 2.1",
   "author": "XWiki Org Community <contact@xwiki.org>",
   "homepage": "https://cristal.xwiki.org/",
@@ -22,15 +22,16 @@
   },
   "main": "./dist/index.es.js",
   "dependencies": {
-    "inversify": "6.2.0",
+    "inversify": "6.2.2",
     "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"
+    "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 +39,11 @@
   "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.13.0"
+    "typescript": "5.7.3",
+    "vite": "6.1.0",
+    "vue-tsc": "2.2.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,
         },
@@ -141,5 +142,15 @@ export class VuetifyDesignSystemLoader implements DesignSystemLoader {
       "XNavigationTree",
       () => import("../vue/x-navigation-tree.vue"),
     );
+    registerAsyncComponent(
+      app,
+      "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,6 +25,10 @@
   height: 64px;
 }
 
+main ul, main ol {
+  padding-inline-start: var(--cr-spacing-x-large);
+}
+
 :root {
   --cr-sizes-max-page-width: 960px; /*This value controls the width of the main content. It should be 100% for spanning text along the whole width or an arbitraty value*/
   --cr-sizes-main-sidebar-width: 15%; /*The default width of the main sidebar*/
@@ -39,6 +43,8 @@
    * Typography
    */
 
+
+
   /* Fonts */
   --cr-font-mono: SFMono-Regular, Consolas, 'Liberation Mono', Menlo, monospace;
   --cr-font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif,

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

@@ -0,0 +1,35 @@
+<!--
+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 lang="ts" setup>
+import { VCheckbox } from "vuetify/components/VCheckbox";
+import type { CheckboxProps } from "@xwiki/cristal-dsapi";
+
+defineProps<CheckboxProps>();
+
+const checked = defineModel<boolean>();
+</script>
+<template>
+  <v-checkbox
+    v-model="checked"
+    :label="label"
+    :messages="help"
+    density="compact"
+  ></v-checkbox>
+</template>

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

@@ -3,13 +3,13 @@ import messages from "../../translations";
 import { computed, defineModel } from "vue";
 import { useI18n } from "vue-i18n";
 import { VFileInput } from "vuetify/components/VFileInput";
-import type { TextFieldModel, TextFieldProps } from "@xwiki/cristal-dsapi";
+import type { FileInputModel, TextFieldProps } from "@xwiki/cristal-dsapi";
 
 const { t } = useI18n({
   messages,
 });
 
-const model = defineModel<TextFieldModel>();
+const model = defineModel<FileInputModel>();
 const props = defineProps<TextFieldProps>();
 
 const rules = computed(() => {

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

@@ -9,6 +9,7 @@ const { t } = useI18n({
   messages,
 });
 const props = defineProps<TextFieldProps>();
+const input = defineModel<string>();
 
 const rules = computed(() => {
   const rulesList = [];
@@ -27,10 +28,14 @@ const rules = computed(() => {
 
 <template>
   <v-text-field
+    v-model="input"
     :label="label"
     :name="name"
     :autofocus="autofocus"
+    :hint="help"
+    :persistent-hint="help !== undefined"
     :rules="rules"
+    :readonly="readonly"
   ></v-text-field>
 </template>
 

package/src/vue/x-alert.vue

@@ -37,3 +37,11 @@ defineProps<AlertProps>();
     <slot />
   </v-alert>
 </template>
+
+<style scoped>
+:deep(.v-alert__content a.router-link-active),
+:deep(.v-alert__content a.router-link-active:visited) {
+  color: inherit;
+  text-decoration-color: inherit;
+}
+</style>

package/src/vue/x-avatar.vue

@@ -17,14 +17,14 @@ 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 lang="ts" setup>
+import type { AvatarProps } from "@xwiki/cristal-dsapi";
+
+defineProps<AvatarProps>();
+</script>
 <template>
-  <v-avatar :image="image" :size="size"></v-avatar>
+  <v-avatar :size="size">
+    <v-img v-if="image" :alt="name" :src="image"></v-img>
+    <span v-else>{{ name }}</span>
+  </v-avatar>
 </template>
-<script lang="ts">
-export default {
-  props: {
-    image: { type: String, required: true },
-    size: { type: String, required: true },
-  },
-};
-</script>

package/src/vue/x-dialog.vue

@@ -18,16 +18,10 @@ 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>
@@ -42,7 +36,7 @@ const slots = useSlots();
         <v-card-text>
           <slot name="default" />
         </v-card-text>
-        <v-card-actions v-if="slots.footer">
+        <v-card-actions v-if="$slots.footer">
           <slot name="footer" />
         </v-card-actions>
       </v-card>