@xwiki/cristal-dsvuetify 0.16.0 → 0.18.0

package/dist/{x-tab-group-D1jmHXyJ.js → x-tab-group-BfEaq8Nj.js}

@@ -1,4 +1,4 @@
-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";
+import { defineComponent as f, ref as i, resolveComponent as n, createBlock as b, openBlock as V, withCtx as a, createVNode as s, renderSlot as u } from "vue";
 const x = /* @__PURE__ */ f({
   __name: "x-tab-group",
   emits: ["tab-change"],
@@ -9,7 +9,7 @@ const x = /* @__PURE__ */ f({
     }
     return (e, o) => {
       const _ = n("v-tabs"), c = n("v-tabs-window"), p = n("v-card-text"), v = n("v-card");
-      return b(), V(v, { class: "mx-auto" }, {
+      return V(), b(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-D1jmHXyJ.js.map
+//# sourceMappingURL=x-tab-group-BfEaq8Nj.js.map

package/dist/{x-tab-group-D1jmHXyJ.js.map → x-tab-group-BfEaq8Nj.js.map}

@@ -1 +1 @@
-{"version":3,"file":"x-tab-group-D1jmHXyJ.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, ref } from \"vue\";\nconst tab: Ref<unknown> = ref();\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":";;;;;AAqBA,UAAMA,IAAoBC,EAAI,GAExBC,IAAQC;AAEd,aAASC,EAAOC,GAAgB;AAC1B,MAAA,OAAOA,KAAS,YAClBH,EAAM,cAAcG,CAAK;AAAA,IAC3B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"x-tab-group-BfEaq8Nj.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, ref } from \"vue\";\nconst tab: Ref<unknown> = ref();\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":";;;;;AAqBA,UAAMA,IAAoBC,EAAI,GAExBC,IAAQC;AAEd,aAASC,EAAOC,GAAgB;AAC1B,MAAA,OAAOA,KAAS,YAClBH,EAAM,cAAcG,CAAK;AAAA,IAC3B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/{x-tab-panel-YsSPuuLL.js → x-tab-panel-DysgiPCz.js}

@@ -1,4 +1,4 @@
-import { defineComponent as o, resolveComponent as n, openBlock as a, createBlock as r, withCtx as p, renderSlot as s } from "vue";
+import { defineComponent as o, resolveComponent as n, createBlock as a, openBlock as r, withCtx as p, renderSlot as s } from "vue";
 const m = /* @__PURE__ */ o({
   __name: "x-tab-panel",
   props: {
@@ -7,7 +7,7 @@ const m = /* @__PURE__ */ o({
   setup(_) {
     return (e, l) => {
       const t = n("v-tabs-window-item");
-      return a(), r(t, { value: e.tabId }, {
+      return r(), a(t, { value: e.tabId }, {
         default: p(() => [
           s(e.$slots, "default")
         ]),
@@ -19,4 +19,4 @@ const m = /* @__PURE__ */ o({
 export {
   m as default
 };
-//# sourceMappingURL=x-tab-panel-YsSPuuLL.js.map
+//# sourceMappingURL=x-tab-panel-DysgiPCz.js.map

package/dist/x-tab-panel-DysgiPCz.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"x-tab-panel-DysgiPCz.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;"}

package/dist/{x-tab-OWsxC4de.js → x-tab-vRrbUjdK.js}

@@ -1,4 +1,4 @@
-import { defineComponent as o, resolveComponent as a, openBlock as n, createBlock as r, withCtx as p, renderSlot as l } from "vue";
+import { defineComponent as o, resolveComponent as a, createBlock as n, openBlock as r, withCtx as p, renderSlot as l } from "vue";
 const u = /* @__PURE__ */ o({
   __name: "x-tab",
   props: {
@@ -7,7 +7,7 @@ const u = /* @__PURE__ */ o({
   setup(s) {
     return (e, _) => {
       const t = a("v-tab");
-      return n(), r(t, { value: e.tabId }, {
+      return r(), n(t, { value: e.tabId }, {
         default: p(() => [
           l(e.$slots, "default")
         ]),
@@ -19,4 +19,4 @@ const u = /* @__PURE__ */ o({
 export {
   u as default
 };
-//# sourceMappingURL=x-tab-OWsxC4de.js.map
+//# sourceMappingURL=x-tab-vRrbUjdK.js.map

package/dist/x-tab-vRrbUjdK.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"x-tab-vRrbUjdK.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;"}

package/dist/{x-text-field-D94TCr6e.js → x-text-field-KwBy_u7M.js}

@@ -1,7 +1,7 @@
-import { defineComponent as s, mergeModels as m, useModel as p, computed as d, openBlock as i, createBlock as f, unref as y } from "vue";
-import { t as V } from "./translations-k4crOAds.js";
+import { defineComponent as s, mergeModels as m, useModel as p, computed as i, createBlock as d, openBlock as f, unref as y } from "vue";
+import { t as V } from "./translations-BVK9UR9x.js";
 import { useI18n as c } from "vue-i18n";
-import { a as h } from "./index-CLqR2xXr.js";
+import { a as h } from "./index-C-c8K0Z_.js";
 const g = /* @__PURE__ */ s({
   __name: "x-text-field",
   props: /* @__PURE__ */ m({
@@ -19,13 +19,13 @@ const g = /* @__PURE__ */ s({
   }),
   emits: ["update:modelValue"],
   setup(t) {
-    const { t: n } = c({
+    const { t: a } = c({
       messages: V
-    }), a = t, l = p(t, "modelValue"), u = d(() => {
+    }), n = t, l = p(t, "modelValue"), u = i(() => {
       const e = [];
-      return a.required && e.push((o) => o ? !0 : n("vuetify.text.input.mandatory")), e;
+      return n.required && e.push((o) => o ? !0 : a("vuetify.text.input.mandatory")), e;
     });
-    return (e, o) => (i(), f(y(h), {
+    return (e, o) => (f(), d(y(h), {
       modelValue: l.value,
       "onUpdate:modelValue": o[0] || (o[0] = (r) => l.value = r),
       label: e.label,
@@ -42,4 +42,4 @@ const g = /* @__PURE__ */ s({
 export {
   g as default
 };
-//# sourceMappingURL=x-text-field-D94TCr6e.js.map
+//# sourceMappingURL=x-text-field-KwBy_u7M.js.map

package/dist/{x-text-field-D94TCr6e.js.map → x-text-field-KwBy_u7M.js.map}

@@ -1 +1 @@
-{"version":3,"file":"x-text-field-D94TCr6e.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    :type=\"type ?? 'text'\"\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-KwBy_u7M.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    :type=\"type ?? 'text'\"\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,5 +1,6 @@
 {
     "vuetify.file.input.mandatory": "Pflichtfeld",
+    "vuetify.select.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,5 +1,6 @@
 {
   "vuetify.file.input.mandatory": "Mandatory field",
+  "vuetify.select.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,5 +1,6 @@
 {
     "vuetify.file.input.mandatory": "Champ obligatoire",
+    "vuetify.select.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.16.0",
+  "version": "0.18.0",
   "license": "LGPL 2.1",
   "author": "XWiki Org Community <contact@xwiki.org>",
   "homepage": "https://cristal.xwiki.org/",
@@ -22,16 +22,16 @@
   },
   "main": "./dist/index.es.js",
   "dependencies": {
-    "inversify": "7.1.0",
+    "inversify": "7.5.1",
     "vue": "3.5.13",
-    "vue-i18n": "11.1.2",
-    "vuetify": "3.7.16",
-    "@xwiki/cristal-api": "0.16.0",
-    "@xwiki/cristal-document-api": "0.16.0",
-    "@xwiki/cristal-model-api": "0.16.0",
-    "@xwiki/cristal-hierarchy-api": "0.16.0",
-    "@xwiki/cristal-navigation-tree-api": "0.16.0",
-    "@xwiki/cristal-model-reference-api": "0.16.0"
+    "vue-i18n": "11.1.3",
+    "vuetify": "3.8.3",
+    "@xwiki/cristal-document-api": "0.18.0",
+    "@xwiki/cristal-model-reference-api": "0.18.0",
+    "@xwiki/cristal-navigation-tree-api": "0.18.0",
+    "@xwiki/cristal-hierarchy-api": "0.18.0",
+    "@xwiki/cristal-model-api": "0.18.0",
+    "@xwiki/cristal-api": "0.18.0"
   },
   "peerDependencies": {
     "reflect-metadata": "0.2.2"
@@ -39,11 +39,11 @@
   "devDependencies": {
     "@vue/test-utils": "2.4.6",
     "reflect-metadata": "0.2.2",
-    "typescript": "5.8.2",
-    "vite": "6.2.2",
-    "vue-tsc": "2.2.8",
-    "@xwiki/cristal-dev-config": "0.16.0",
-    "@xwiki/cristal-dsapi": "0.16.0"
+    "typescript": "5.8.3",
+    "vite": "6.3.5",
+    "vue-tsc": "2.2.10",
+    "@xwiki/cristal-dev-config": "0.18.0",
+    "@xwiki/cristal-dsapi": "0.18.0"
   },
   "scripts": {
     "build": "pnpm compile",

package/src/components/vuetifyDesignSystemLoader.ts

@@ -151,5 +151,10 @@ export class VuetifyDesignSystemLoader implements DesignSystemLoader {
       "XNavigationTreeSelect",
       () => import("../vue/form/x-navigation-tree-select.vue"),
     );
+    registerAsyncComponent(
+      app,
+      "XSelect",
+      () => import("../vue/form/x-select.vue"),
+    );
   }
 }

package/src/vue/css/style.css

@@ -25,6 +25,10 @@
   height: 64px;
 }
 
+html {
+  overflow-y: auto;
+}
+
 main ul, main ol {
   padding-inline-start: var(--cr-spacing-x-large);
 }

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

@@ -1,13 +1,29 @@
 <script setup lang="ts">
+import { ref } from "vue";
 import { VForm } from "vuetify/components/VForm";
+import type { Ref } from "vue";
+
+const form: Ref<VForm | undefined> = ref(undefined);
 const emits = defineEmits(["formSubmit"]);
-function submit() {
-  emits("formSubmit");
+
+defineExpose({
+  reset,
+});
+
+async function reset() {
+  form.value?.reset();
+}
+
+async function submit() {
+  const validation = await form.value?.validate();
+  if (validation?.valid) {
+    emits("formSubmit");
+  }
 }
 </script>
 
 <template>
-  <v-form @submit.prevent="submit">
+  <v-form ref="form" @submit.prevent="submit">
     <slot></slot>
   </v-form>
 </template>

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

@@ -0,0 +1,57 @@
+<!--
+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 messages from "../../translations";
+import { computed } from "vue";
+import { useI18n } from "vue-i18n";
+import { VSelect } from "vuetify/components/VSelect";
+import type { SelectProps } from "@xwiki/cristal-dsapi";
+
+const props = defineProps<SelectProps>();
+const selected = defineModel<string>();
+
+const { t } = useI18n({
+  messages,
+});
+
+const rules = computed(() => {
+  const rulesList = [];
+  if (props.required) {
+    rulesList.push((value: unknown) => {
+      if (value) {
+        return true;
+      } else {
+        return t("vuetify.select.input.mandatory");
+      }
+    });
+  }
+  return rulesList;
+});
+</script>
+<template>
+  <v-select
+    v-model="selected"
+    :label="label"
+    :messages="help"
+    :items="items"
+    :rules="rules"
+    :clearable="!required"
+  ></v-select>
+</template>

package/src/vue/x-dialog.vue

@@ -25,7 +25,7 @@ defineProps<{
 </script>
 
 <template>
-  <v-dialog :width="width" scrollable>
+  <v-dialog :width="width" attach="#view" scrollable>
     <template #activator="{ props }">
       <span v-bind="props">
         <slot name="activator" />