@saooti/octopus-sdk 29.0.0 → 29.0.4

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

@@ -37,23 +37,27 @@
               v-if="!podcast || isEmission || isLargeEmission"
               class="d-flex align-items-center w-100 flex-wrap mt-1"
             >
-              <b-form-radio
+              <input
                 v-model="episodeNumbers"
+                class="form-check-input"
+                type="radio"
                 name="episodeNumbers"
                 value="all"
-              />
+              >
               <span class="flex-shrink">{{ $t('Show every episode') }}</span>
             </div>
             <div
               class="d-flex align-items-center flex-wrap"
               :class="!podcast || isEmission || isLargeEmission ? '' : 'mt-3'"
             >
-              <b-form-radio
+              <input
                 v-if="!podcast || isEmission || isLargeEmission"
                 v-model="episodeNumbers"
+                class="form-check-input"
+                type="radio"
                 name="episodeNumbers"
                 value="number"
-              />
+              >
               <span class="flex-shrink">{{ $t('Show') }}</span>
               <input
                 id="number-input"

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

@@ -13,10 +13,10 @@
       <span
         v-if="authenticated"
         id="popover-share-help"
-        class="saooti-help ms-2"
+        class="saooti-help ml-2"
         :aria-label="$t('Help')"
       />
-      <b-popover
+      <Popover
         v-if="authenticated"
         target="popover-share-help"
         triggers="hover"
@@ -24,7 +24,7 @@
         custom-class="wizard-help"
       >
         {{ $t('Share this page without edit and share blocks') }}
-      </b-popover>
+      </Popover>
     </div>
     <div
       class="d-flex"
@@ -253,6 +253,7 @@ import { Podcast } from '@/store/class/podcast';
 import { state } from '../../../store/paramStore';
 import Snackbar from '../../misc/Snackbar.vue';
 import { displayMethods } from '../../mixins/functions';
+import Popover from '../../misc/Popover.vue';
 import { defineComponent, defineAsyncComponent } from 'vue';
 const ClipboardModal = defineAsyncComponent(() => import('../../misc/modal/ClipboardModal.vue'));
 const NewsletterModal = defineAsyncComponent(() => import('../../misc/modal/NewsletterModal.vue'));
@@ -263,6 +264,7 @@ export default defineComponent({
     NewsletterModal,
     QrCodeModal,
     Snackbar,
+    Popover
   },
 
   mixins: [displayMethods],

package/src/components/misc/HomeDropdown.vue

@@ -2,93 +2,126 @@
   <div
     class="d-flex align-items-center justify-content-end flex-no-wrap top-bar-dropdown"
   >
-    <b-dropdown
+    <div
       v-if="authenticated"
-      class="split-dropdown"
-      split
-      right
-      split-variant="primary main-button-dropdown"
-      variant="primary data-selenium-dropdown-topbar"
-      :text="$t('My space')"
-      @click="goToUrl('/main/priv/backoffice')"
+      class="dropdown split-dropdown btn-group"
     >
-      <b-dropdown-text>
-        <router-link
-          v-if="isContribution && !isPodcastmaker"
-          to="/main/priv/upload"
-          class="align-self-center w-100 mb-2"
-        >
-          <button class="btn btn-primary w-100">
-            {{ $t('Upload') }}
-          </button>
-        </router-link>
-        <div @click="displayMenuPhone(true)">
-          <b-dropdown-item
-            v-if="!isPodcastmaker"
-            to="/main/priv/backoffice"
-            class="linkSpace"
-          >
-            {{ $t('My space') }}
-          </b-dropdown-item>
-          <b-dropdown-item
-            v-if="!isPodcastmaker"
-            to="/main/priv/edit/profile"
-          >
-            {{ $t('Edit my profile') }}
-          </b-dropdown-item>
-          <b-dropdown-item
-            v-if="!isPodcastmaker && isOrganisation"
-            to="/main/priv/edit/organisation"
-          >
-            {{ $t('Edit my organisation') }}
-          </b-dropdown-item>
-          <b-dropdown-divider v-if="!isEducation" />
-          <b-dropdown-item
-            v-if="!isEducation"
-            href="https://help.octopus.saooti.com/Aide/"
-            rel="noopener"
-            target="_blank"
-          >
-            {{ $t('Help') }}
-          </b-dropdown-item>
-          <b-dropdown-item
-            v-if="!isEducation"
-            href="https://help.octopus.saooti.com/"
-            rel="noopener"
-            target="_blank"
+      <button
+        class="btn btn-primary main-button-dropdown"
+        @click="goToUrl('/main/priv/backoffice')"
+      >
+        {{ $t('My space') }}
+      </button>
+      <button
+        class="btn dropdown-toggle btn-primary data-selenium-dropdown-topbar dropdown-toggle-split"
+        data-bs-toggle="dropdown"
+        aria-expanded="false"
+      />
+      <ul class="dropdown-menu dropdown-menu-right px-4">
+        <li>
+          <router-link
+            v-if="isContribution && !isPodcastmaker"
+            to="/main/priv/upload"
+            class="align-self-center w-100"
           >
-            {{ $t('TutoMag') }}
-          </b-dropdown-item>
-          <b-dropdown-divider />
-          <b-dropdown-item href="/sso/logout">
-            {{
-              $t('Logout')
-            }}
-          </b-dropdown-item>
+            <button class="btn btn-primary w-100 mb-2">
+              {{ $t('Upload') }}
+            </button>
+          </router-link>
+        </li>
+        <div @click="displayMenuPhone(true)">
+          <li v-if="!isPodcastmaker">
+            <router-link
+              to="/main/priv/backoffice"
+              class="linkSpace dropdown-item"
+            >
+              {{ $t('My space') }}
+            </router-link>
+          </li>
+          <li v-if="!isPodcastmaker">
+            <router-link
+              class="dropdown-item"
+              to="/main/priv/edit/profile"
+            >
+              {{ $t('Edit my profile') }}
+            </router-link>
+          </li>
+          <li v-if="!isPodcastmaker && isOrganisation">
+            <router-link
+              class="dropdown-item"
+              to="/main/priv/edit/organisation"
+            >
+              {{ $t('Edit my organisation') }}
+            </router-link>
+          </li>
+          <li v-if="!isEducation">
+            <hr class="dropdown-divider">
+          </li>
+          <li v-if="!isEducation">
+            <a
+              href="https://help.octopus.saooti.com/Aide/"
+              class="dropdown-item"
+              rel="noopener"
+              target="_blank"
+            >
+              {{ $t('Help') }}
+            </a>
+          </li>
+          <li v-if="!isEducation">
+            <a
+              href="https://help.octopus.saooti.com/"
+              class="dropdown-item"
+              rel="noopener"
+              target="_blank"
+            >
+              {{ $t('TutoMag') }}
+            </a>
+          </li>
+          <li><hr class="dropdown-divider"></li>
+          <li v-if="!isEducation">
+            <a
+              class="dropdown-item"
+              href="/sso/logout"
+            >
+              {{ $t('Logout') }}
+            </a>
+          </li>
         </div>
-      </b-dropdown-text>
-    </b-dropdown>
-    <b-dropdown
+      </ul>
+    </div>
+    <div
       v-else
-      right
-      toggle-class="text-decoration-none m-1 admin-button btn-rounded-icon"
-      no-caret
+      class="dropdown btn-group"
     >
-      <template #button-content>
-        <i class="saooti-user-octopus text-dark" /><span class="visually-hidden">Profile</span>
-      </template>
-      <b-dropdown-item href="/sso/login">
-        {{ $t('Login') }}
-      </b-dropdown-item>
-      <b-dropdown-item
-        v-if="!isPodcastmaker"
-        to="/main/pub/create"
+      <button
+        class="btn dropdown-toggle btn-secondary text-decoration-none m-1 admin-button btn-rounded-icon dropdown-toggle-no-caret"
+        data-bs-toggle="dropdown"
+        aria-expanded="false"
       >
-        {{
-          $t('Create an account')
-        }}
-      </b-dropdown-item>
-    </b-dropdown>
+        <i class="saooti-user-octopus text-dark" />
+        <span class="visually-hidden">Profile</span>
+      </button>
+      <ul class="dropdown-menu dropdown-menu-right px-4">
+        <li>
+          <a
+            class="dropdown-item"
+            href="/sso/login"
+          >
+            {{ $t('Login') }}
+          </a>
+        </li>
+        <li v-if="!isPodcastmaker">
+          <router-link
+            class="dropdown-item"
+            to="/main/pub/create"
+          >
+            {{
+              $t('Create an account')
+            }}
+          </router-link>
+        </li>
+      </ul>
+    </div>
   </div>
 </template>
 
@@ -103,7 +136,9 @@ export default defineComponent({
   },
 
   data() {
-    return {};
+    return {
+      showMenu: false as boolean
+    };
   },
 
   computed: {
@@ -148,7 +183,6 @@ export default defineComponent({
     padding-left: 15px;
     margin-right: 30px;
   }
-
   .btn-group .dropdown-toggle-split {
     align-items: center;
     border-radius: 50% !important;
@@ -165,11 +199,6 @@ export default defineComponent({
       right: auto;
     }
   }
-  .b-dropdown-text {
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-  }
   .dropdown-header {
     display: flex;
     align-items: center;

package/src/components/misc/Popover.vue

@@ -0,0 +1,86 @@
+<template>
+  <div
+    :id="id"
+    ref="element"
+    class="popover"
+    role="tooltip"
+    tabindex="-1"
+  >
+    <div ref="titleRef">
+      <slot name="title">
+        {{ title }}
+      </slot>
+    </div>
+    <div ref="contentRef">
+      <slot>
+        {{ content }}
+      </slot>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import {Popover} from 'bootstrap'
+import {defineComponent, onMounted, PropType, ref, watch} from 'vue'
+import useEventListener from '../../helper/useEventListener'
+export default defineComponent({
+  name: 'Popover',
+  props: {
+    content: {type: String, default: ''},
+    id: {type: String, default: ''},
+    noninteractive: {type: Boolean, default: false},
+    placement: {type: String as PropType<Popover.Options['placement']>, default: 'right'},
+    target: {type: String, required: true},
+    title: {type: String, default: ''},
+    triggers: {type: String as PropType<Popover.Options['trigger']>, default: 'click'},
+    show: {type: Boolean, default: false},
+  },
+  emits: ['show', 'shown', 'hide', 'hidden', 'inserted'],
+  setup(props, {emit}) {
+    const element = ref<HTMLElement>()
+    const target = ref<HTMLElement>()
+    const instance = ref<Popover>()
+    const titleRef = ref<HTMLElement>()
+    const contentRef = ref<HTMLElement>()
+    onMounted(() => {
+      instance.value = new Popover(`#${props.target}`, {
+        container: 'body',
+        trigger: props.triggers,
+        placement: props.placement,
+        title: titleRef.value?.innerHTML || '',
+        content: contentRef.value?.innerHTML || '',
+        html: true,
+      })
+      if (document.getElementById(props.target)) {
+        target.value = document.getElementById(props.target) as HTMLElement
+      }
+      element.value?.parentNode?.removeChild(element.value)
+      if (props.show) {
+        instance.value.show()
+      }
+    })
+    watch(
+      () => props.show,
+      (show, oldVal) => {
+        if (show !== oldVal) {
+          if (show) {
+            instance.value?.show()
+          } else {
+            instance.value?.hide()
+          }
+        }
+      }
+    )
+    useEventListener(target, 'show.bs.popover', () => emit('show'))
+    useEventListener(target, 'shown.bs.popover', () => emit('shown'))
+    useEventListener(target, 'hide.bs.popover', () => emit('hide'))
+    useEventListener(target, 'hidden.bs.popover', () => emit('hidden'))
+    useEventListener(target, 'inserted.bs.popover', () => emit('inserted'))
+    return {
+      element,
+      titleRef,
+      contentRef,
+    }
+  },
+})
+</script>

package/src/components/misc/modal/MessageModal.vue

@@ -1,56 +1,57 @@
 <template>
-  <b-modal
+  <div
     id="message-modal"
-    :title="title"
-    :show="true"
-    @close="closePopup"
-    @hide="closePopup"
-    @cancel="closePopup"
+    class="modal"
   >
-    <template
-      v-if="!closable"
-      #modal-header-close
-    >
-      <span />
-    </template>
-    <template #default>
-      <div
-        class="content"
-        v-html="message"
-      />
-    </template>
-    <template
-      v-if="validatetext"
-      #modal-footer
-    >
-      <button
-        v-if="canceltext"
-        class="btn btn-light m-1"
-        @click="onCancel"
-      >
-        {{ canceltext }}
-      </button>
-      <button
-        v-if="thirdText"
-        class="btn btn-primary m-1"
-        @click="onThirdAction"
-      >
-        {{ thirdText }}
-      </button>
-      <button
-        class="btn btn-primary m-1"
-        @click="onValid"
-      >
-        {{ validatetext }}
-      </button>
-    </template>
-    <template
-      v-else
-      #modal-footer
-    >
-      <span />
-    </template>
-  </b-modal>
+    <div class="modal-backdrop" />
+    <div class="modal-dialog">
+      <div class="modal-content">
+        <div class="modal-header">
+          <h5 class="modal-title">
+            {{ title }}
+          </h5>
+          <button
+            v-if="closable"
+            type="button"
+            class="btn-close"
+            aria-label="Close"
+            @click="closePopup"
+          />
+        </div>
+        <div class="modal-body">
+          <div
+            class="content"
+            v-html="message"
+          />
+        </div>
+        <div
+          v-if="validatetext"
+          class="modal-footer"
+        >
+          <button
+            v-if="canceltext"
+            class="btn btn-light m-1"
+            @click="onCancel"
+          >
+            {{ canceltext }}
+          </button>
+          <button
+            v-if="thirdText"
+            class="btn btn-primary m-1"
+            @click="onThirdAction"
+          >
+            {{ thirdText }}
+          </button>
+          <button
+            class="btn btn-primary m-1"
+            @click="onValid"
+          >
+            {{ validatetext }}
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
 </template>
 
 <script lang="ts">