@xwiki/cristal-dsvuetify 0.9.0 → 0.10.0

package/dist/x-tab-group-ngNByee3.js

@@ -0,0 +1,49 @@
+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";
+const x = /* @__PURE__ */ f({
+  __name: "x-tab-group",
+  emits: ["change"],
+  setup(g, { emit: d }) {
+    const t = i(null), m = d;
+    function r(e) {
+      typeof e == "string" && m("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" }, {
+        default: a(() => [
+          s(_, {
+            modelValue: t.value,
+            "onUpdate:modelValue": [
+              o[0] || (o[0] = (l) => t.value = l),
+              r
+            ]
+          }, {
+            default: a(() => [
+              u(e.$slots, "tabs")
+            ]),
+            _: 3
+          }, 8, ["modelValue"]),
+          s(p, null, {
+            default: a(() => [
+              s(c, {
+                modelValue: t.value,
+                "onUpdate:modelValue": o[1] || (o[1] = (l) => t.value = l)
+              }, {
+                default: a(() => [
+                  u(e.$slots, "panels")
+                ]),
+                _: 3
+              }, 8, ["modelValue"])
+            ]),
+            _: 3
+          })
+        ]),
+        _: 3
+      });
+    };
+  }
+});
+export {
+  x as default
+};
+//# sourceMappingURL=x-tab-group-ngNByee3.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"x-tab-group-DTR-H8Sn.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: string) {\n  emits(\"change\", tabId);\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,GAAe;AAC7B,MAAAH,EAAM,UAAUG,CAAK;AAAA,IACvB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"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,IAEzB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/{x-text-field-Ccv2SH00.js → x-text-field-B88odaud.js}

@@ -1,7 +1,7 @@
 import { defineComponent as a, computed as l, openBlock as u, createBlock as m, unref as p } from "vue";
 import { m as i } from "./translations-CFfpgNrx.js";
 import { useI18n as f } from "vue-i18n";
-import { a as c } from "./index-CkW0K4NP.js";
+import { a as c } from "./index-BjjXwAdJ.js";
 const y = /* @__PURE__ */ a({
   __name: "x-text-field",
   props: {
@@ -26,4 +26,4 @@ const y = /* @__PURE__ */ a({
 export {
   y as default
 };
-//# sourceMappingURL=x-text-field-Ccv2SH00.js.map
+//# sourceMappingURL=x-text-field-B88odaud.js.map

package/dist/{x-text-field-Ccv2SH00.js.map → x-text-field-B88odaud.js.map}

@@ -1 +1 @@
-{"version":3,"file":"x-text-field-Ccv2SH00.js","sources":["../src/vue/form/x-text-field.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { type TextFieldProps } from \"@xwiki/cristal-dsapi\";\nimport { computed } from \"vue\";\nimport { VTextField } from \"vuetify/components/VTextField\";\nimport messages from \"../../translations\";\nimport { useI18n } from \"vue-i18n\";\n\nconst { t } = useI18n({\n  messages,\n});\nconst props = defineProps<TextFieldProps>();\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 :label=\"label\" :name=\"name\" :rules=\"rules\"></v-text-field>\n</template>\n\n<style scoped></style>\n"],"names":["t","useI18n","messages","props","__props","rules","computed","rulesList","value"],"mappings":";;;;;;;;;;;;AAOM,UAAA,EAAE,GAAAA,EAAE,IAAIC,EAAQ;AAAA,MACpB,UAAAC;AAAA,IAAA,CACD,GACKC,IAAQC,GAERC,IAAQC,EAAS,MAAM;AAC3B,YAAMC,IAAY,CAAA;AAClB,aAAIJ,EAAM,YACEI,EAAA,KAAK,CAACC,MACVA,IACK,KAEAR,EAAE,8BAA8B,CAE1C,GAEIO;AAAA,IAAA,CACR;;;;;;;;"}
+{"version":3,"file":"x-text-field-B88odaud.js","sources":["../src/vue/form/x-text-field.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { type TextFieldProps } from \"@xwiki/cristal-dsapi\";\nimport { computed } from \"vue\";\nimport { VTextField } from \"vuetify/components/VTextField\";\nimport messages from \"../../translations\";\nimport { useI18n } from \"vue-i18n\";\n\nconst { t } = useI18n({\n  messages,\n});\nconst props = defineProps<TextFieldProps>();\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 :label=\"label\" :name=\"name\" :rules=\"rules\"></v-text-field>\n</template>\n\n<style scoped></style>\n"],"names":["t","useI18n","messages","props","__props","rules","computed","rulesList","value"],"mappings":";;;;;;;;;;;;AAOM,UAAA,EAAE,GAAAA,EAAE,IAAIC,EAAQ;AAAA,MACpB,UAAAC;AAAA,IAAA,CACD,GACKC,IAAQC,GAERC,IAAQC,EAAS,MAAM;AAC3B,YAAMC,IAAY,CAAA;AAClB,aAAIJ,EAAM,YACEI,EAAA,KAAK,CAACC,MACVA,IACK,KAEAR,EAAE,8BAA8B,CAE1C,GAEIO;AAAA,IAAA,CACR;;;;;;;;"}

package/langs/translation-fr.json

@@ -0,0 +1 @@
+{}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xwiki/cristal-dsvuetify",
-  "version": "0.9.0",
+  "version": "0.10.0",
   "license": "LGPL 2.1",
   "author": "XWiki Org Community <contact@xwiki.org>",
   "homepage": "https://cristal.xwiki.org/",
@@ -23,15 +23,15 @@
   "main": "./dist/index.es.js",
   "dependencies": {
     "inversify": "6.0.2",
-    "vue": "3.4.29",
+    "vue": "3.4.31",
     "vue-i18n": "9.13.1",
-    "vuetify": "3.6.10",
-    "@xwiki/cristal-api": "0.9.0",
-    "@xwiki/cristal-dsapi": "0.9.0"
+    "vuetify": "3.6.15",
+    "@xwiki/cristal-api": "0.10.0",
+    "@xwiki/cristal-dsapi": "0.10.0",
+    "@xwiki/cristal-navigation-tree-api": "0.10.0"
   },
   "devDependencies": {
-    "rimraf": "5.0.7",
-    "vue-tsc": "2.0.21"
+    "vue-tsc": "2.0.22"
   },
   "scripts": {
     "build": "pnpm compile",

package/src/components/vuetifyDesignSystemLoader.ts

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

package/src/vue/css/style.css

@@ -26,9 +26,9 @@
 
 :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-left-sidebar-width: 15%; /*The default width of the sidebar*/
-  --cr-sizes-left-sidebar-min-width: 250px; /*The minimum width of the sidebar*/
-  --cr-sizes-collapsed-sidebar-width: 32px; /*The width of the bar that gets shown containing the menu button to reopen the standard left sidebar*/
+  --cr-sizes-main-sidebar-width: 15%; /*The default width of the main sidebar*/
+  --cr-sizes-main-sidebar-min-width: 250px; /*The minimum width of the main sidebar*/
+  --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;
 
 

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

@@ -0,0 +1,165 @@
+<!--
+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 { Ref, onBeforeMount, ref, watch } from "vue";
+import { VTreeview } from "vuetify/labs/VTreeview";
+import { type PageData } from "@xwiki/cristal-api";
+import type {
+  NavigationTreeSource,
+  NavigationTreeNode,
+} from "@xwiki/cristal-navigation-tree-api";
+
+type TreeItem = {
+  id: string;
+  title: string;
+  href: string;
+  children?: Array<TreeItem>;
+  _location: string;
+};
+
+type OnClickAction = (node: NavigationTreeNode) => void;
+
+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>());
+
+const props = defineProps<{
+  treeSource: NavigationTreeSource;
+  clickAction?: OnClickAction;
+  currentPage?: PageData;
+}>();
+
+onBeforeMount(async () => {
+  for (const node of await props.treeSource.getChildNodes("")) {
+    rootNodes.value.push({
+      id: node.id,
+      title: node.label,
+      href: node.url,
+      children: node.has_children ? [] : undefined,
+      _location: node.location,
+    });
+  }
+  if (props.currentPage !== undefined) {
+    await expandTree();
+  }
+});
+
+watch(
+  () => props.currentPage,
+  async () => {
+    if (props.currentPage) {
+      await expandTree();
+    }
+  },
+);
+
+async function expandTree() {
+  const newExpandedNodes = props.treeSource.getParentNodesId(props.currentPage);
+  let i;
+  let currentNodes = rootNodes.value;
+  for (i = 0; i < newExpandedNodes.length - 1; i++) {
+    if (currentNodes) {
+      for (const node of currentNodes) {
+        if (node.id == newExpandedNodes[i]) {
+          if (node.children?.length == 0) {
+            await lazyLoadChildren(node);
+          }
+          if (!expandedNodes.value.includes(node.id)) {
+            expandedNodes.value.push(node.id);
+          }
+          currentNodes = node.children!;
+        }
+      }
+    }
+  }
+  if (currentNodes) {
+    for (const node of currentNodes) {
+      if (node.id == newExpandedNodes[i]) {
+        activatedNodes.value = [node.id];
+        // If we have a custom click action, we want to use it on dynamic
+        // selection.
+        if (props.clickAction) {
+          props.clickAction({
+            id: node.id,
+            label: node.title,
+            location: node._location,
+            url: node.href,
+            has_children: node.children !== undefined,
+          });
+        }
+      }
+    }
+  }
+}
+
+async function lazyLoadChildren(item: unknown) {
+  const treeItem = item as TreeItem;
+  const childNodes = await props.treeSource.getChildNodes(treeItem.id);
+  for (const child of childNodes) {
+    treeItem.children?.push({
+      id: child.id,
+      title: child.label,
+      href: child.url,
+      children: child.has_children ? [] : undefined,
+      _location: child.location,
+    });
+  }
+  // If the node doesn't have any children, we update it.
+  if (childNodes.length == 0) {
+    treeItem.children = undefined;
+  }
+}
+</script>
+
+<template>
+  <v-treeview
+    ref="tree"
+    v-model:activated="activatedNodes"
+    v-model:opened="expandedNodes"
+    :items="rootNodes"
+    :load-children="lazyLoadChildren"
+    activatable
+    active-strategy="single-independent"
+    item-value="id"
+    open-strategy="multiple"
+  >
+    <template #title="{ item }: { item: any }">
+      <a
+        v-if="props.clickAction"
+        :href="item.href"
+        @click.prevent="
+          clickAction!({
+            id: item.id,
+            label: item.title,
+            location: item._location,
+            url: item.href,
+            has_children: item.children !== undefined,
+          })
+        "
+        >{{ item.title }}</a
+      >
+      <a v-else :href="item.href">{{ item.title }}</a>
+    </template>
+  </v-treeview>
+</template>
+
+<style scoped></style>

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

@@ -23,8 +23,10 @@ const tab = ref(null);
 
 const emits = defineEmits(["change"]);
 
-function change(tabId: string) {
-  emits("change", tabId);
+function change(tabId: unknown) {
+  if (typeof tabId == "string") {
+    emits("change", tabId);
+  }
 }
 </script>