@xwiki/cristal-dsvuetify 0.12.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-de.json

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

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.12.0",
+  "version": "0.14.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.1",
+    "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"
+  },
+  "peerDependencies": {
+    "reflect-metadata": "0.2.2"
   },
   "devDependencies": {
     "@vue/test-utils": "2.4.6",
-    "vue-tsc": "2.1.10",
-    "@xwiki/cristal-dev-config": "0.12.0"
+    "reflect-metadata": "0.2.2",
+    "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

@@ -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
@@ -139,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*/
@@ -32,12 +36,15 @@
   --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
    */
 
+
+
   /* Fonts */
   --cr-font-mono: SFMono-Regular, Consolas, 'Liberation Mono', Menlo, monospace;
   --cr-font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif,
@@ -82,9 +89,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 +542,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-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 = [];
@@ -26,7 +27,13 @@ const rules = computed(() => {
 </script>
 
 <template>
-  <v-text-field :label="label" :name="name" :rules="rules"></v-text-field>
+  <v-text-field
+    v-model="input"
+    :label="label"
+    :name="name"
+    :autofocus="autofocus"
+    :rules="rules"
+  ></v-text-field>
 </template>
 
 <style scoped></style>

package/src/vue/x-alert.vue

@@ -32,6 +32,16 @@ defineProps<AlertProps>();
       @click="action.callback"
       >{{ action.name }}</x-btn
     >
+    <br v-if="details" />
+    <small v-if="details">{{ details }}</small>
     <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

@@ -22,12 +22,10 @@ defineProps<{
   title: string;
   width: string | number | undefined;
 }>();
-
-// 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 +36,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;
@@ -60,10 +61,10 @@ 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>());
+var isExpanding: boolean = false;
 
 const props = defineProps<{
   clickAction?: OnClickAction;
@@ -80,59 +81,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,31 +161,45 @@ 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;
-  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;
   }
 }
 
+// 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;
+  let isRoot = true;
 
-  while (currentItems) {
+  currentItemsLoop: while (currentItems && !notFound) {
     for (const i of currentItems.keys()) {
       if (currentItems[i].id == parents[0]) {
         if (parents.length == 1) {
@@ -203,30 +215,49 @@ 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();
-          break;
+          isRoot = false;
+          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
+  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) {
+        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,
+    });
+    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];
     }
   }
 }
@@ -234,7 +265,6 @@ async function onDocumentUpdate(page: PageData) {
 
 <template>
   <v-treeview
-    ref="tree"
     v-model:opened="expandedNodes"
     density="compact"
     :activated="activatedNodes"
@@ -243,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 }">
@@ -283,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>

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