@saooti/octopus-sdk 33.1.3 → 33.2.0

package/src/components/misc/HomeDropdown.vue

@@ -9,86 +9,89 @@
     >
       {{ $t('My space') }}
     </button>
-    <div
-      class="dropdown btn-group"
+    <button
+      id="home-dropdown"
+      class="btn m-1 admin-button saooti-user"
+      :title="$t('User menu')"
+    />
+    <Popover
+      target="home-dropdown"
+      :only-click="true"
+      :is-fixed="true"
+      :left-pos="true"
     >
-      <button
-        class="btn dropdown-toggle m-1 admin-button dropdown-toggle-no-caret saooti-user"
-        data-bs-toggle="dropdown"
-        aria-expanded="false"
-        :title="$t('User menu')"
-      />
-      <div class="dropdown-menu dropdown-menu-right px-4">
-        <template v-if="!authenticated">
-          <a
-            class="dropdown-item"
-            href="/sso/login"
-          >
-            {{ $t('Login') }}
-          </a>
+      <template v-if="!authenticated">
+        <a
+          class="octopus-dropdown-item"
+          href="/sso/login"
+        >
+          {{ $t('Login') }}
+        </a>
+        <router-link
+          v-if="!isPodcastmaker"
+          class="octopus-dropdown-item"
+          to="/main/pub/create"
+        >
+          {{ $t('Create an account') }}
+        </router-link>
+      </template>
+      <template v-else>
+        <template
+          v-for="routerBack in routerBackoffice"
+          :key="routerBack.path"
+        >
           <router-link
-            v-if="!isPodcastmaker"
-            class="dropdown-item"
-            to="/main/pub/create"
+            v-if="!isPodcastmaker && routerBack.condition"
+            :class="routerBack.class"
+            :to="routerBack.path"
           >
-            {{ $t('Create an account') }}
+            {{ routerBack.title }}
           </router-link>
         </template>
-        <template v-else>
+        <template v-if="!isEducation">
+          <hr>
           <template
-            v-for="routerBack in routerBackoffice"
-            :key="routerBack.path"
+            v-for="helpLink in helpLinks"
+            :key="helpLink.title"
           >
-            <router-link
-              v-if="!isPodcastmaker && routerBack.condition"
-              :class="routerBack.class"
-              :to="routerBack.path"
+            <a
+              :href="helpLink.href"
+              class="octopus-dropdown-item"
+              rel="noopener"
+              target="_blank"
             >
-              {{ routerBack.title }}
-            </router-link>
+              {{ helpLink.title }}
+            </a>
           </template>
-          <template v-if="!isEducation">
-            <hr class="dropdown-divider">
-            <template
-              v-for="helpLink in helpLinks"
-              :key="helpLink.title"
-            >
-              <a
-                :href="helpLink.href"
-                class="dropdown-item"
-                rel="noopener"
-                target="_blank"
-              >
-                {{ helpLink.title }}
-              </a>
-            </template>
-          </template>
-          <hr class="dropdown-divider">
-          <a
-            class="dropdown-item"
-            href="/sso/logout"
-          >
-            {{ $t('Logout') }}
-          </a>
         </template>
-        <router-link
-          class="dropdown-item"
-          to="/main/pub/contact"
+        <hr>
+        <a
+          class="octopus-dropdown-item"
+          href="/sso/logout"
         >
-          {{ $t('Contact') }}
-        </router-link>
-      </div>
-    </div>
+          {{ $t('Logout') }}
+        </a>
+      </template>
+      <router-link
+        class="octopus-dropdown-item"
+        to="/main/pub/contact"
+      >
+        {{ $t('Contact') }}
+      </router-link>
+    </Popover>
   </div>
 </template>
 
 <script lang="ts">
 import { state } from '../../store/paramStore';
-
+import Popover from '../misc/Popover.vue';
 import { defineComponent } from 'vue'
 import { Organisation } from '@/store/class/general/organisation';
 export default defineComponent({
   name: 'HomeDropdown',
+  components:{
+    Popover
+  },
   props: {
     isEducation: { default: false, type: Boolean},
   },
@@ -104,9 +107,9 @@ export default defineComponent({
     routerBackoffice(){
       return [
         {title:this.$t('Upload'),class:"btn btn-primary w-100", path:'/main/priv/upload', condition: (state.generalParameters.isContribution as boolean)},
-        {title:this.$t('My space'),class:"show-phone dropdown-item", path:'/main/priv/backoffice', condition: true},
-        {title:this.$t('Edit my profile'),class:"dropdown-item", path:'/main/priv/edit/profile', condition: true},
-        {title:this.$t('Edit my organisation'),class:"dropdown-item", path:'/main/priv/edit/organisation', condition: (state.generalParameters.isOrganisation as boolean) || 1<this.organisationsAvailable.length}];
+        {title:this.$t('My space'),class:"show-phone octopus-dropdown-item", path:'/main/priv/backoffice', condition: true},
+        {title:this.$t('Edit my profile'),class:"octopus-dropdown-item", path:'/main/priv/edit/profile', condition: true},
+        {title:this.$t('Edit my organisation'),class:"octopus-dropdown-item", path:'/main/priv/edit/organisation', condition: (state.generalParameters.isOrganisation as boolean) || 1<this.organisationsAvailable.length}];
     },
     
     isPodcastmaker(): boolean {

package/src/components/misc/Nav.vue

@@ -0,0 +1,92 @@
+<template>
+  <ul class="octopus-nav">
+    <li
+      v-for="index in tabNumber"
+      :key="index-1"
+      class="octopus-nav-item"
+    >
+      <div
+        class="octopus-nav-link"
+        :class="activeTab === (index-1)? 'active':''"
+        @click="activeTab = (index-1)"
+      >
+        <slot :name="(index-1)" />
+      </div>
+    </li>
+  </ul>
+  <div class="octopus-tab-content">
+    <div
+      v-for="index in tabNumber"
+      :key="index-1"
+      class="octopus-tab-pane"
+      :class="activeTab === (index-1)? 'active':''"
+    >
+      <slot :name="'tab'+(index-1)" />
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue'
+export default defineComponent({
+  name: 'Nav',
+  props: {
+    tabNumber: { default: 0, type: Number},
+  },
+  data() {
+    return {
+      activeTab: 0 as number,
+    };
+  },
+})
+</script>
+
+<style lang="scss">
+@import '@scss/_variables.scss';
+.octopus-app{
+  .octopus-nav{
+    display: flex;
+    flex-wrap: wrap;
+    padding-left: 0;
+    margin-bottom: 0;
+    list-style: none;
+    border-bottom: 0.05rem solid #ddd;
+  }
+  .octopus-nav-item{
+    border-right: solid 1px rgb(222,226,230);
+    border-left: solid 1px rgb(222,226,230);
+    border-top: solid 1px rgb(222,226,230);
+    border-top-left-radius: 0.25rem;
+    border-top-right-radius: 0.25rem;
+    cursor: pointer;
+    flex-grow: 1;
+    text-align: center;
+  }
+  .octopus-nav-link{
+    display: block;
+    padding: 0.5rem 1rem;
+    text-decoration: none;
+    transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out;
+    border: 0.1rem solid transparent;
+    &:hover,&.active{
+      border-color: #dee2e6;
+      border-bottom-color: $octopus-primary-color;
+      color: $octopus-primary-color;
+    }
+  }
+  .octopus-tab-content{
+    border-right: solid 1px rgb(222,226,230);
+    border-left: solid 1px rgb(222,226,230);
+    border-bottom: solid 1px rgb(222,226,230);
+    background-color: #f8fafc;
+  }
+  .octopus-tab-pane{
+    display: none;
+    &.active{
+      display: flex;
+      justify-content: space-between;
+      padding: 0.5rem;
+    }
+  }
+}
+</style>

package/src/components/misc/Popover.vue

@@ -1,122 +1,161 @@
 <template>
-  <div
-    :id="id"
-    ref="element"
-    class="popover"
-    role="tooltip"
-    tabindex="-1"
+  <div 
+    v-show="show && !disable"
+    :id="'popover'+target"
+    ref="popover"
+    tabindex="0"
+    class="octopus-popover"
+    :class="onlyClick?'octopus-dropdown':''"
+    :style="positionInlineStyle"
+    @blur="clearDataBlur"
   >
-    <div ref="titleRef">
-      <slot name="title">
-        {{ title }}
-      </slot>
+    <div
+      v-if="title"
+      class="bg-secondary p-2"
+    >
+      {{ title }}
     </div>
-    <div ref="contentRef">
-      <slot>
-        {{ content }}
-      </slot>
+    <div class="p-2">
+      <slot>{{ content }}</slot>
     </div>
   </div>
 </template>
 
 <script lang="ts">
-import {Popover} from 'bootstrap'
-import {defineComponent, onMounted, PropType, ref} from 'vue'
-import useEventListener from '../../helper/useEventListener'
+import {defineComponent} from 'vue';
 export default defineComponent({
   name: 'Popover',
-  props: {
+	props: {
     content: {type: String, default: ''},
-    id: {type: String, default: ''},
-    noninteractive: {type: Boolean, default: false},
-    placement: {type: String as PropType<Popover.Options['placement']>, default: 'right'},
+		title: {type: String, default: ''},
     target: {type: String, required: true},
-    title: {type: String, default: ''},
-    show: {type: Boolean, default: false},
     disable: {type: Boolean, default: false},
+		onlyClick: {type: Boolean, default: false},
+		isFixed: {type: Boolean, default: false},
+		leftPos: {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>()
-    function initPopover(){
-      instance.value = new Popover(`#${props.target}`, {
-        container: 'body',
-        trigger: "hover focus",
-        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()
-      }
-      if (props.disable) {
-        instance.value.disable()
-      }
-    }
-    onMounted(()=>{
-      initPopover();
-    })
-    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'))
+  data () {
     return {
-      element,
-      titleRef,
-      contentRef,
-      instance,
-      initPopover
+      show: false as boolean,
+			isClick: false as boolean,
+      posX: 0 as number,
+      posY: 0 as number,
+			targetElement: null as HTMLElement|null,
+    }
+  },
+	computed: {
+		popoverId(): string{
+			return 'popover'+this.target;
+		},
+    positionInlineStyle(): string {
+      return `left: ${this.posX}px; top: ${this.posY}px;`;
     }
   },
-  watch:{
-    disable(){
-      if(!this.instance){ return; }
-      if (this.disable) {
-        this.instance.disable();
-      } else {
-        this.instance.enable();
-      }
+	mounted () {
+    this.init();
+  },
+	unmounted(){
+		this.removeListeners();
+	},
+  methods: {
+    init () {
+			this.targetElement = document.getElementById(this.target);
+			if(this.targetElement){
+				if(!this.onlyClick){
+					this.targetElement.addEventListener("mouseenter", this.setPopoverData);
+					this.targetElement.addEventListener("mouseleave", this.clearData);
+				}
+				this.targetElement.addEventListener("click", this.setPopoverData);
+				this.targetElement.addEventListener("blur", this.clearDataBlur);
+			}  
     },
-    content(){
-      if(!this.instance){ return; }
-      this.$nextTick(() => {
-        this.instance?.dispose();
-        this.initPopover();
-      });
+    removeListeners () {
+			if(this.targetElement){
+				if(!this.onlyClick){
+					this.targetElement.removeEventListener("mouseenter", this.setPopoverData);
+					this.targetElement.removeEventListener("mouseleave", this.clearData);
+				}		
+				this.targetElement.removeEventListener("click", this.setPopoverData);
+				this.targetElement.addEventListener("blur", this.clearDataBlur);
+			}
     },
-    title(){
-      if(!this.instance){ return; }
-      this.$nextTick(() => {
-        this.instance?.dispose();
-        this.initPopover();
-      });
+    setPopoverData (e: MouseEvent|PointerEvent) {
+			if(e && e.target){
+				if("click"===e.type){
+					if(this.show && this.isClick){
+						this.isClick = false;
+						this.clearData();
+						return;
+					}
+					this.isClick = true;
+				}
+				this.show = true;
+				const rectElement = (e.target as HTMLElement).getBoundingClientRect();
+				(this.$refs.popover as HTMLElement).style.display = 'block';
+				this.posX = this.leftPos? rectElement.right - (this.$refs.popover as HTMLElement).clientWidth : rectElement.left;
+				this.posY = rectElement.bottom + (this.isFixed ? 0 : window.scrollY)+ 5;
+			}
+    },
+		clearDataBlur (e: FocusEvent) {
+			if(e.relatedTarget){
+				const myElement = e.relatedTarget as HTMLElement;
+				if(this.popoverId===myElement.id){return;}
+				const parent = this.$refs.popover as HTMLElement; 
+				if (null!==parent && parent.contains(myElement)) {
+					if(null!==myElement.classList && myElement.classList.contains('octopus-dropdown-item')){
+						this.$nextTick(() => {
+							this.isClick = false;
+							this.clearData();
+						});
+					}
+					return;
+				}
+			}
+			this.isClick = false;
+			this.clearData();
+    },
+    clearData () {
+			if(this.isClick){
+				return;
+			}
+      this.show = false;
+      this.posX = 0;
+      this.posY = 0;
     }
-  }
-
-})
+  },
+});
 </script>
 <style lang="scss">
-.popover{
-  max-height: 80vh;
-  max-width: 50vw !important;
-  display: flex !important;
-  flex-direction: column;
-  hr{
-    width: 100px;
-  }
-  .popover-body{
-    overflow: auto;
-    height: 100%;
-  }
+.octopus-popover{
+	background: white;
+	border: 1px solid #ccc;
+	border-radius: 5px;
+	position: absolute;
+	z-index: 9999;
+	&.octopus-dropdown{
+		min-width: 200px;
+		padding: 0.5rem 1rem;
+		.octopus-dropdown-item{
+			display: block;
+			color: rgb(29, 29, 29);
+			width: 100%;
+			padding: 0.25rem 1rem;
+			font-weight: 400;
+			text-align: inherit;
+			text-decoration: none;
+			white-space: nowrap;
+			background-color: transparent;
+			border: 0;
+			&:hover{
+				background: rgb(243, 243, 243);
+			}
+		}
+		hr{
+			margin: 0.5rem 0;
+			overflow: hidden;
+			border-top: 1px solid #ccc;
+			opacity: 1;
+		}
+	}
 }
 </style>

package/src/components/misc/ProgressBar.vue

@@ -0,0 +1,96 @@
+<template>
+  <div
+    class="octopus-progress"
+  >
+    <div
+      v-if="secondaryProgress"
+      class="octopus-progress-bar bg-light"
+      role="progressbar"
+      aria-valuenow="0"
+      aria-valuemin="0"
+      aria-valuemax="100"
+      :style="'width: ' + secondaryProgress + '%'"
+    />
+    <div
+      class="octopus-progress-bar primary-bg"
+      role="progressbar"
+      aria-valuenow="0"
+      aria-valuemin="0"
+      aria-valuemax="100"
+      :style="'width: ' + mainProgress + '%'"
+    />
+    <div
+      v-if="alertBar"
+      class="octopus-progress-bar octopus-progress-bar-duration bg-danger"
+      :style="'left: ' + alertBar + '%'"
+    />
+    <div
+      v-if="isProgressCursor"
+      class="progress-bar-cursor"
+      :style="'left:' + mainProgress + '%'"
+    />
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+export default defineComponent({
+  name: 'ProgressBar',
+  props: {
+    alertBar: { default: undefined, type: Number},
+    mainProgress: { default: 0, type: Number},
+    secondaryProgress: { default: 0, type: Number},
+    isProgressCursor: { default: false, type: Boolean},
+  },
+})
+</script>
+
+<style lang="scss">
+@import '@scss/_variables.scss';
+.octopus-app{
+  .octopus-progress{
+    display: flex;
+    overflow: hidden;
+    background-color:#e9ecef;
+    border-radius: 0.375rem;
+    position: relative;
+    cursor: pointer;
+
+    .octopus-progress-bar{
+      position: absolute;
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      overflow: hidden;
+      color: white;
+      text-align: center;
+      white-space: nowrap;
+      background-color: $octopus-primary-color;
+      transition: width 0.6s ease;
+    }
+    &,.octopus-progress-bar{
+      height: 4px;
+      @media (max-width: 960px) {
+        height: 8px;
+      }
+    }
+    &.large,&.large .octopus-progress-bar{
+      height: 15px;
+    }
+    &.medium,&.medium .octopus-progress-bar{
+      height: 6px;
+    }
+    .octopus-progress-bar-duration {
+      width: 10px;
+    }
+    .octopus-progress-bar-cursor{
+      width: 10px;
+      height: 10px;
+      border-radius: 50%;
+      background: black;
+      align-self: center;
+      position: absolute;
+    }
+  }
+}
+</style>

package/src/components/misc/Spinner.vue

@@ -0,0 +1,26 @@
+<template>
+  <div class="octopus-spinner" />
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+export default defineComponent({
+  name: "Spinner",
+})
+</script>
+<style lang="scss">
+.octopus-app .octopus-spinner{
+  display: inline-block;
+  width:2rem;
+  height:2rem;
+  border-radius: 50%;
+  animation: 0.75s linear infinite spinner-border;
+  border: 0.25rem solid currentcolor;
+  border-right-color: transparent;
+  flex-shrink: 0;
+
+  @keyframes spinner-border {
+    to { transform: rotate(360deg); }
+  }
+}
+</style>