@saooti/octopus-sdk 41.10.3 → 41.10.4

package/CHANGELOG.md

@@ -1,5 +1,20 @@
 # CHANGELOG
 
+## 41.10.4 (En cours)
+
+**Fixes**
+
+- **14384** - Correctifs identification des plateformes
+  - Envoi de l'organisationId correct quand non connecté
+  - Correction taille des `ClassicAvatar`
+- Imports de stores relatifs dans `EmissionList`
+- Limitation de la largeur des messages de `ClassicHelpButton`
+
+**Misc**
+
+- Ajout de `ClassicButton`, un bouton intégrant des éléments d'accessibilité
+- Ajustement style boutons désactivés avec `aria-disabled`
+
 ## 41.10.3 (04/05/2026)
 
 **Fixes**

package/index.ts

@@ -52,8 +52,7 @@ export {
 }
 
 // Buttons
-import ActionButton from "./src/components/buttons/ActionButton.vue";
-export { ActionButton };
+export * from "./src/components/buttons/";
 
 // Form
 import ClassicButtonGroup from "./src/components/form/ClassicButtonGroup.vue";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@saooti/octopus-sdk",
-  "version": "41.10.3",
+  "version": "41.10.4",
   "private": false,
   "description": "Javascript SDK for using octopus",
   "author": "Saooti",

package/src/components/buttons/ClassicButton.vue

@@ -0,0 +1,27 @@
+<template>
+    <button
+        class="btn"
+        :aria-disabled="disabled"
+        @click="onClick"
+    >
+        <slot />
+    </button>
+</template>
+
+<script setup lang="ts">
+const props = defineProps<{
+    /** Disable the button */
+    disabled?: boolean;
+}>();
+
+const emit = defineEmits<{
+    /** Emitted when the user clicks on the button */
+    (e: 'click'): void;
+}>();
+
+function onClick(): void {
+    if (!props.disabled) {
+        emit('click');
+    }
+}
+</script>

package/src/components/buttons/index.ts

@@ -1,5 +1,7 @@
 import ActionButton from "./ActionButton.vue";
+import ClassicButton from "./ClassicButton.vue"; 
 
 export {
-    ActionButton
+    ActionButton,
+    ClassicButton
 };

package/src/components/composable/share/useSharePlatforms.ts

@@ -13,9 +13,8 @@ import PodbeanIcon from "../../icons/PodbeanIcon.vue";
 import YoutubeIcon from "vue-material-design-icons/Youtube.vue";
 import SpotifyIcon from "vue-material-design-icons/Spotify.vue";
 import { Annotations } from "@/stores/class/general";
-import { h, markRaw, onMounted, ref, type Component } from "vue";
+import { h, markRaw, ref, type Component, type Ref } from "vue";
 import { aggregatorsApi } from "../../../api/aggregatorsApi";
-import { useAuthStore } from "../../../stores/AuthStore";
 import { useNotificationStore } from "../../../stores/NotificationStore";
 import ClassicAvatar from "../../misc/ClassicAvatar.vue";
 
@@ -130,18 +129,24 @@ export const useSharePlatforms = () => {
 
     const platforms = ref<Array<SharePlatform>>([]);
 
-    const { authOrgaId } = useAuthStore();
     const { addNotification } = useNotificationStore();
 
-    onMounted(async (): Promise<void> => {
-        platforms.value.push(...PREDEFINED_PLATFORMS);
+    async function initPlatforms(organisationId: string): Promise<void> {
+        // (Re)initialize the platforms
+        platforms.value = [...PREDEFINED_PLATFORMS];
+
         try {
-            const customPlatforms = await aggregatorsApi.getAll(authOrgaId);
+            const customPlatforms = await aggregatorsApi.getAll(organisationId);
             customPlatforms.forEach(platform => {
                 platforms.value.push({
                     name: platform.name,
                     title: platform.name,
-                    icon: markRaw(() => h(ClassicAvatar, { name: platform.name, imageUrl: platform.image })),
+                    icon: markRaw((props, { attrs }) => h(ClassicAvatar, {
+                        ...attrs,
+                        ...props,
+                        name: platform.name,
+                        imageUrl: platform.image
+                    })),
                     color: "white",
                     annotation: `ptfaudio_${platform.name}`
                 });
@@ -152,7 +157,7 @@ export const useSharePlatforms = () => {
                 message: error
             });
         }
-    });
+    }
     
     /**
      * Helper to retrieve configuration of a specific platform
@@ -198,6 +203,7 @@ export const useSharePlatforms = () => {
     }
 
     return {
+        initPlatforms,
         getPlatformsWithLinks,
         getPlatformConfiguration,
         platforms

package/src/components/display/emission/EmissionList.vue

@@ -62,14 +62,14 @@ import classicApi from "../../../api/classicApi";
 import ClassicLazy from "../../misc/ClassicLazy.vue";
 import {useErrorHandler} from "../../composable/useErrorHandler";
 import { state } from "../../../stores/ParamSdkStore";
-import { Emission, emptyEmissionData } from "@/stores/class/general/emission";
-import { Rubrique } from "@/stores/class/rubrique/rubrique";
+import { Emission, emptyEmissionData } from "../../../stores/class/general/emission";
+import { Rubrique } from "../../../stores/class/rubrique/rubrique";
 import { defineAsyncComponent, ref, Ref, computed, watch, onMounted } from "vue";
-import { FetchParam } from "@/stores/class/general/fetchParam";
+import { FetchParam } from "../../../stores/class/general/fetchParam";
 import { AxiosError } from "axios";
-import { Rubriquage } from "@/stores/class/rubrique/rubriquage";
+import { Rubriquage } from "../../../stores/class/rubrique/rubriquage";
 import { useFilterStore } from "../../../stores/FilterStore";
-import { ListClassicReturn } from "@/stores/class/general/listReturn";
+import { ListClassicReturn } from "../../../stores/class/general/listReturn";
 import { useI18n } from "vue-i18n";
 import { EmissionGroup } from "../../../api/groupsApi";
 const EmissionItem = defineAsyncComponent(() => import("./EmissionItem.vue"));

package/src/components/display/sharing/SubscribeButtons.vue

@@ -127,7 +127,7 @@ const subscribeButtonsContainerRef = useTemplateRef('subscribeButtonsContainer')
 //Composables
 const { t } = useI18n();
 const apiStore = useApiStore();
-const { getPlatformsWithLinks } = useSharePlatforms();
+const { getPlatformsWithLinks, initPlatforms } = useSharePlatforms();
 
 //Computed
 const subscriptionsDisplay = computed(() => {
@@ -152,7 +152,11 @@ const iconSize = computed((): number => {
 //Watch
 watch(()=>props.windowWidth, () =>resizeWindow());
 
-onMounted(()=>resizeWindow());
+onMounted(() => {
+  resizeWindow();
+  const orga = 'orga' in props.content ? props.content.orga : props.content.organisation;
+  initPlatforms(orga.id);
+});
 
 //Methods
 function showAllElements() {

package/src/components/misc/ClassicHelpButton.vue

@@ -73,5 +73,6 @@ const iconSize = computed(() => {
 
 .help-popover {
     background-color: var(--octopus-secondary-lighter);
+    max-width: 60%;
 }
 </style>

package/src/components/pages/SmartLinkPage.vue

@@ -108,7 +108,7 @@ import { state } from '../../stores/ParamSdkStore';
 
 const { updatePathParams } = useSeoTitleUrl();
 const { useProxyImageUrl } = useImageProxy();
-const { getPlatformsWithLinks } = useSharePlatforms();
+const { getPlatformsWithLinks, initPlatforms } = useSharePlatforms();
 
 /** Props used when displaying a playlist */
 interface PlaylistProps {
@@ -135,8 +135,10 @@ onMounted(async() => {
     // Retrieve element
     if (playlistId) {
         element.value = await playlistApi.get(playlistId);
+        initPlatforms(element.value.organisation.id);
     } else if (emissionId) {
         element.value = await emissionApi.get(emissionId);
+        initPlatforms(element.value.orga.id);
     } else {
         console.error('No content defined');
     }

package/src/style/bootstrap.scss

@@ -14,7 +14,7 @@ input:not([class^="vs__"]), button:not([class^="vs__"]), select:not([class^="vs_
 	button {
 		cursor: pointer;
 
-		&:disabled{
+		&:disabled, &[aria-disabled="true"]{
 			cursor: default !important;
 		}
 	}
@@ -106,10 +106,12 @@ input:not([class^="vs__"]), button:not([class^="vs__"]), select:not([class^="vs_
 			background: var(--octopus-primary-more-transparent);
 		}
 
-		&:not(.btn-underline, .btn-primary, .btn-on-dark, .btn-transparent, .admin-button, .share-btn):disabled{
-      		cursor: default;
-			background-color: var(--octopus-secondary-lighter) !important;
-			color:  var(--octopus-text-disabled) !important;
+		&:not(.btn-underline, .btn-primary, .btn-on-dark, .btn-transparent, .admin-button, .share-btn){
+			&:disabled, &[aria-disabled="true"] {
+	      		cursor: default;
+				background-color: var(--octopus-secondary-lighter) !important;
+				color:  var(--octopus-text-disabled) !important;
+			}
 		}
 
 		&.btn-underline{
@@ -167,8 +169,8 @@ input:not([class^="vs__"]), button:not([class^="vs__"]), select:not([class^="vs_
 				border-color: var(--octopus-color-on-primary) !important;
 			}
 
-			&:not(.btn-on-dark):disabled,
-			&.btn-on-dark:disabled{
+			&:not(.btn-on-dark):disabled, &:not(.btn-on-dark)[aria-disabled="true"],
+			&.btn-on-dark:disabled, &.btn-on-dark[aria-disabled="true"] {
 				background-color: var(--octopus-secondary-darker);
 				border: 1px solid black;
 				cursor: default;
@@ -201,6 +203,17 @@ input:not([class^="vs__"]), button:not([class^="vs__"]), select:not([class^="vs_
 		
 	}
 
+	// Make disabled state visible
+	.btn:disabled, .btn:disabled:hover, .btn[aria-disabled="true"], .btn[aria-disabled="true"]:hover {
+		filter: grayscale(100%);
+		opacity: 60%;
+
+		&:not(.btn-transparent) {
+			background-color: var(--octopus-secondary);
+		}
+	}
+
+
 	.btn-transparent{
 		background: transparent;
 		border: 0;