@xwiki/cristal-dsvuetify 0.13.0 → 0.14.0

package/dist/x-text-field-BxSiyeFc.js

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

package/dist/x-text-field-BxSiyeFc.js.map

@@ -0,0 +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;;;;;;;;;;;"}

package/langs/translation-fr.json

@@ -1 +1,4 @@
-{}
+{
+    "vuetify.file.input.mandatory": "Champ obligatoire",
+    "vuetify.text.input.mandatory": "Champ obligatoire"
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xwiki/cristal-dsvuetify",
-  "version": "0.13.0",
+  "version": "0.14.0",
   "license": "LGPL 2.1",
   "author": "XWiki Org Community <contact@xwiki.org>",
   "homepage": "https://cristal.xwiki.org/",
@@ -22,15 +22,14 @@
   },
   "main": "./dist/index.es.js",
   "dependencies": {
-    "inversify": "6.2.0",
+    "inversify": "6.2.1",
     "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.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"
   },
   "peerDependencies": {
     "reflect-metadata": "0.2.2"
@@ -38,10 +37,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.0.11",
+    "vue-tsc": "2.2.0",
+    "@xwiki/cristal-dev-config": "0.14.0",
+    "@xwiki/cristal-dsapi": "0.14.0"
   },
   "scripts": {
     "build": "pnpm compile",

package/src/components/vuetifyDesignSystemLoader.ts

@@ -141,5 +141,10 @@ export class VuetifyDesignSystemLoader implements DesignSystemLoader {
       "XNavigationTree",
       () => import("../vue/x-navigation-tree.vue"),
     );
+    registerAsyncComponent(
+      app,
+      "XCheckbox",
+      () => import("../vue/form/x-checkbox.vue"),
+    );
   }
 }

package/src/vue/css/style.css

@@ -25,6 +25,10 @@
   height: 64px;
 }
 
+main ul {
+  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-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,6 +28,7 @@ const rules = computed(() => {
 
 <template>
   <v-text-field
+    v-model="input"
     :label="label"
     :name="name"
     :autofocus="autofocus"

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>

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

@@ -61,7 +61,6 @@ const treeSource: NavigationTreeSource = cristal
   .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>());
@@ -166,20 +165,28 @@ function clearSelection() {
 // 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]) {
+  let currentItem: TreeItem | undefined = undefined;
+  let currentItemChildren: TreeItem[] | undefined = rootNodes.value;
+  let notFound = false;
+
+  currentItemsLoop: while (currentItemChildren && !notFound) {
+    for (const i of currentItemChildren.keys()) {
+      if (currentItemChildren[i].id == parents[0]) {
         if (parents.length == 1) {
-          currentItems.splice(i, 1);
+          currentItemChildren.splice(i, 1);
+          if (currentItem && currentItemChildren.length == 0) {
+            currentItem!.children = undefined;
+          }
           return;
         } else {
-          currentItems = currentItems[i].children;
+          currentItem = currentItemChildren[i];
+          currentItemChildren = currentItem.children;
           parents.shift();
-          break;
+          continue currentItemsLoop;
         }
       }
     }
+    notFound = true;
   }
 }
 
@@ -190,6 +197,7 @@ async function onDocumentUpdate(page: PageData) {
   let currentParent: string | undefined = undefined;
   let currentItems: TreeItem[] | undefined = rootNodes.value;
   let notFound = false;
+  let isRoot = true;
 
   currentItemsLoop: while (currentItems && !notFound) {
     for (const i of currentItems.keys()) {
@@ -208,10 +216,13 @@ async function onDocumentUpdate(page: PageData) {
         } else {
           currentParent = currentItems[i].id;
           if (!currentItems[i].children) {
+            // This node had no children, we reset this so new ones can be
+            // loaded lazily.
             currentItems[i].children = [];
           }
           currentItems = currentItems[i].children;
           parents.shift();
+          isRoot = false;
           continue currentItemsLoop;
         }
       }
@@ -220,9 +231,14 @@ async function onDocumentUpdate(page: PageData) {
   }
 
   // New page
+  if (currentItems.length == 0 && !isRoot) {
+    // We don't do anything because this node will be loaded lazily anyway.
+    return;
+  }
   const newItems = await treeSource.getChildNodes(
     currentParent ? currentParent : "",
   );
+  const currentPageParents = treeSource.getParentNodesId(props.currentPage);
   newItemsLoop: for (const newItem of newItems) {
     for (const i of currentItems!.keys()) {
       if (newItem.id == currentItems![i].id) {
@@ -236,13 +252,19 @@ async function onDocumentUpdate(page: PageData) {
       children: newItem.has_children ? [] : undefined,
       _location: newItem.location,
     });
+    if (
+      currentPageParents.length > 0 &&
+      currentPageParents[currentPageParents.length - 1] === newItem.id
+    ) {
+      // If we add a node, and it's the current page, it should be activated.
+      activatedNodes.value = [newItem.id];
+    }
   }
 }
 </script>
 
 <template>
   <v-treeview
-    ref="tree"
     v-model:opened="expandedNodes"
     density="compact"
     :activated="activatedNodes"
@@ -251,7 +273,6 @@ async function onDocumentUpdate(page: PageData) {
     activatable
     active-strategy="independent"
     item-value="id"
-    open-strategy="multiple"
     @update:activated="clearSelection"
   >
     <template #title="{ item }: { item: any }">
@@ -291,4 +312,16 @@ 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

@@ -21,11 +21,11 @@ Software Foundation, Inc., 51 Franklin St, Fifth Floor, Boston, MA
 import { ref } from "vue";
 const tab = ref(null);
 
-const emits = defineEmits(["change"]);
+const emits = defineEmits(["tab-change"]);
 
 function change(tabId: unknown) {
   if (typeof tabId == "string") {
-    emits("change", tabId);
+    emits("tab-change", tabId);
   }
 }
 </script>

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

@@ -26,5 +26,3 @@ defineProps<TabPanelProps>();
 <template>
   <v-tabs-window-item :value="tabId"><slot></slot></v-tabs-window-item>
 </template>
-
-<style scoped></style>