Bump bootstrap-vue-next, fix toast display

Author: bperel

apps/duckguessr/package.json

@@ -31,6 +31,8 @@
     "@vueuse/integrations": "^14.1.0",
     "@vueuse/nuxt": "^14.1.0",
     "axios-cache-interceptor": "^1.11.2",
+    "bootstrap": "^5.3.8",
+    "bootstrap-vue-next": "^0.42.0",
     "js-cookie": "^3.0.5",
     "nuxt": "^4.2.2",
     "pinia": "^3.0.4",
@@ -57,8 +59,6 @@
     "@types/eslint-scope": "^8.3.2",
     "@types/js-cookie": "^3.0.6",
     "@types/node": "^22.19.3",
-    "bootstrap": "^5.3.8",
-    "bootstrap-vue-next": "^0.40.9",
     "concurrently": "^9.2.1",
     "eslint": "^9.39.2",
     "eslint-config-prettier": "^10.1.8",

apps/duckguessr/pnpm-lock.yaml

@@ -33,7 +33,7 @@
     "@vueuse/integrations": "^13.9.0",
     "axios-cache-interceptor": "^1.11.2",
     "bootstrap": "^5.3.8",
-    "bootstrap-vue-next": "^0.30.5",
+    "bootstrap-vue-next": "^0.42.0",
     "js-cookie": "^3.0.5",
     "pinia": "^3.0.4",
     "socket-call-client": "^0.7.7",

apps/dumili/package.json

@@ -35,7 +35,7 @@
     "axios": "^1.13.2",
     "axios-cache-interceptor": "^1.11.2",
     "bootstrap": "^5.3.8",
-    "bootstrap-vue-next": "^0.30.5",
+    "bootstrap-vue-next": "^0.42.0",
     "cropperjs": "^1.6.2",
     "interactjs": "^1.10.27",
     "js-cookie": "^3.0.5",

apps/dumili/pnpm-lock.yaml

@@ -1,6 +1,7 @@
 <template>
-  <BToastOrchestrator />
-  <suspense><router-view /></suspense>
+  <suspense
+    ><BApp><router-view /></BApp
+  ></suspense>
 </template>
 
 <script setup lang="ts">

apps/edgecreator/package.json

@@ -1,4 +1,4 @@
-import { useToastController } from "bootstrap-vue-next";
+import { useToast } from "bootstrap-vue-next";
 import { watch } from "vue";
 import { useRoute } from "vue-router";
 
@@ -9,11 +9,9 @@ export default () =>
     () => route.hash,
     (newValue) => {
       const toastError = (message: string) =>
-        useToastController().show({
-          props: {
-            body: message,
-            title: "Error",
-          },
+        useToast().create({
+          body: message,
+          title: "Error",
         });
       switch (newValue) {
         case "#401":

apps/edgecreator/pnpm-lock.yaml

@@ -61,7 +61,7 @@ export const useStepOptions = () => {
         );
     }
 
-    // useToastController().show!({
+    // useToast().create({
     //   props: {
     //     body: text!,
     //     title: t("Tip").toString(),

apps/edgecreator/src/App.vue

@@ -34,27 +34,39 @@ meta:
             :zoomable="false"
           />
         </div>
-        <b-container fluid>
+        <b-alert variant="info" :model-value="true">
           {{
             // eslint-disable-next-line max-len
             $t(
               'For each edge present on the picture, please select the part of the picture corresponding to the edge, fill in the information related to the edge hereunder then click on "Add". Once all the edges on the picture have been indicated, click on "Send the edge pictures".',
             )
           }}
-        </b-container>
-        <issue-select
-          :key="crops.length"
-          disable-ongoing-or-published
-          :disable-not-ongoing-nor-published="false"
-          @change="currentCrop.issuecode = $event.issuecode"
+        </b-alert>
+        <b-alert
+          v-if="isWidthBiggerThanHeight"
+          variant="danger"
+          :model-value="true"
         >
-          <template #dimensions>
-            <dimensions v-model="currentCrop" />
-          </template>
-        </issue-select>
-        <b-button :disabled="!currentCrop" class="mt-3 mb-4" @click="addCrop">
-          {{ $t("Add") }}
-        </b-button>
+          {{
+            $t(
+              "The width of your selection is bigger than its height! Make sure that the edges appear vertically on the photo.",
+            )
+          }}
+        </b-alert>
+        <template v-else>
+          <issue-select
+            disable-ongoing-or-published
+            :disable-not-ongoing-nor-published="false"
+            @change="currentCrop.issuecode = $event.issuecode"
+          >
+            <template #dimensions>
+              <dimensions v-model="currentCrop" />
+            </template>
+          </issue-select>
+          <b-button :disabled="!currentCrop" class="mt-3 mb-4" @click="addCrop">
+            {{ $t("Add") }}
+          </b-button>
+        </template>
         <b-card-group deck columns>
           <b-card
             v-for="(crop, i) in crops"
@@ -123,7 +135,7 @@ meta:
 <script lang="ts" setup>
 import "cropperjs/dist/cropper.css";
 
-import { useToastController } from "bootstrap-vue-next";
+import { useToast } from "bootstrap-vue-next";
 import type Cropper from "cropperjs";
 import { nextTick } from "vue";
 import VueCropper from "vue-cropperjs";
@@ -140,6 +152,8 @@ const { upload: uploadEvents } = inject(edgecreatorSocketInjectionKey)!;
 
 const { saveEdgeSvg } = useSaveEdge();
 
+const toast = useToast();
+
 interface Crop {
   width: number;
   height: number;
@@ -160,6 +174,8 @@ const crops = ref<CropWithData[]>([]);
 const uploadedImageData = ref<{ url: string }>();
 const cropper = ref<Cropper>();
 
+const isWidthBiggerThanHeight = ref(false);
+
 const initialContributors = computed(
   (): Omit<ModelContributor, "issuecode">[] =>
     !collection().user
@@ -178,7 +194,7 @@ const initialContributors = computed(
 const addCrop = () => {
   const data = cropper.value!.getData() as CropperData;
   if (data.height < data.width) {
-    useToastController().show({
+    toast.create({
       props: {
         body: i18n
           .t(
@@ -267,6 +283,13 @@ const drop = (e: DragEvent) => {
 const update = (data: { url: string }) => {
   uploadedImageData.value = { url: data.url };
 };
+
+onMounted(() => {
+  setInterval(() => {
+    isWidthBiggerThanHeight.value =
+      cropper.value?.getData().width > cropper.value?.getData().height;
+  }, 100);
+});
 </script>
 
 <style scoped lang="scss">