@saooti/octopus-sdk 37.0.6 → 37.0.8

package/src/components/form/{Wysiwyg.vue → ClassicWysiwyg.vue}

@@ -1,11 +1,8 @@
 <template>
   <div class="wysiwyg-editor">
-    <div
-      v-if="editor"
-      class="editor-menubar"
-    >
+    <div v-if="editor" class="editor-menubar">
       <button
-        title="Bold"
+        :title="$t('Bold')"
         data-selenium="Bold"
         :class="{ 'is-active': editor.isActive('bold') }"
         @click="editor.chain().focus().toggleBold().run()"
@@ -18,7 +15,7 @@
         </svg>
       </button>
       <button
-        title="Italic"
+        :title="$t('Italic')"
         data-selenium="Italic"
         :class="{ 'is-active': editor.isActive('italic') }"
         @click="editor.chain().focus().toggleItalic().run()"
@@ -31,7 +28,7 @@
         </svg>
       </button>
       <button
-        title="Underline"
+        :title="$t('Underline')"
         data-selenium="Underline"
         :class="{ 'is-active': editor.isActive('underline') }"
         @click="editor.chain().focus().toggleUnderline().run()"
@@ -44,15 +41,12 @@
         </svg>
       </button>
       <button
-        title="Link"
+        :title="$t('Link')"
         data-selenium="Link"
         :class="{ 'is-active': editor.isActive('link') }"
         @click="setLink"
       >
-        <svg
-          viewBox="0 0 24 24"
-          fill="none"
-        >
+        <svg viewBox="0 0 24 24" fill="none">
           <path
             transform="translate(2, 2)scale(0.8)"
             d="M7.7574 10.5858L4.92897 13.4142C3.7574 14.5858 3.7574 16.4853 4.92897 17.6569L6.34319 19.0711C7.51476 20.2427 9.41425 20.2427 10.5858 19.0711L13.4143 16.2427M9.87873 14.1214L14.1214 9.87873M10.5858 7.7574L13.4142 4.92897C14.5858 3.7574 16.4853 3.7574 17.6569 4.92897L19.0711 6.34319C20.2427 7.51476 20.2427 9.41425 19.0711 10.5858L16.2427 13.4143"
@@ -67,10 +61,7 @@
         :disabled="!editor.isActive('link')"
         @click="editor.chain().focus().unsetLink().run()"
       >
-        <svg
-          viewBox="0 0 24 24"
-          fill="none"
-        >
+        <svg viewBox="0 0 24 24" fill="none">
           <path
             transform="translate(2, 2)scale(0.8)"
             d="M7.05029 11.2929L4.92897 13.4142C3.7574 14.5858 3.7574 16.4853 4.92897 17.6568L6.34319 19.0711C7.51476 20.2426 9.41425 20.2426 10.5858 19.0711L12.7071 16.9497M5.00004 5L19 19"
@@ -89,7 +80,7 @@
         </svg>
       </button>
       <button
-        title="Heading3"
+        :title="$t('Heading3')"
         data-selenium="Heading3"
         :class="{ 'is-active': editor.isActive('heading', { level: 3 }) }"
         @click="editor.chain().focus().toggleHeading({ level: 3 }).run()"
@@ -97,7 +88,7 @@
         H3
       </button>
       <button
-        title="Heading4"
+        :title="$t('Heading4')"
         data-selenium="Heading4"
         :class="{ 'is-active': editor.isActive('heading', { level: 4 }) }"
         @click="editor.chain().focus().toggleHeading({ level: 4 }).run()"
@@ -105,39 +96,24 @@
         H4
       </button>
       <button
-        title="UnorderedList"
+        :title="$t('UnorderedList')"
         data-selenium="UnorderedList"
         class="saooti-ul"
         :class="{ 'is-active': editor.isActive('bulletList') }"
         @click="editor.chain().focus().toggleBulletList().run()"
       >
         <svg>
-          <circle
-            transform="translate(8, 8)"
-            cx="2.5"
-            cy="3.998"
-            r="2.5"
-          />
+          <circle transform="translate(8, 8)" cx="2.5" cy="3.998" r="2.5" />
           <path
             transform="translate(8, 8)"
             d="M8.5 5H23a1 1 0 000-2H8.5a1 1 0 000 2z"
           />
-          <circle
-            transform="translate(8, 8)"
-            cx="2.5"
-            cy="11.998"
-            r="2.5"
-          />
+          <circle transform="translate(8, 8)" cx="2.5" cy="11.998" r="2.5" />
           <path
             transform="translate(8, 8)"
             d="M23 11H8.5a1 1 0 000 2H23a1 1 0 000-2z"
           />
-          <circle
-            transform="translate(8, 8)"
-            cx="2.5"
-            cy="19.998"
-            r="2.5"
-          />
+          <circle transform="translate(8, 8)" cx="2.5" cy="19.998" r="2.5" />
           <path
             transform="translate(8, 8)"
             d="M23 19H8.5a1 1 0 000 2H23a1 1 0 000-2z"
@@ -145,7 +121,7 @@
         </svg>
       </button>
       <button
-        title="List"
+        :title="$t('List')"
         data-selenium="List"
         :class="{ 'is-active': editor.isActive('orderedList') }"
         @click="editor.chain().focus().toggleOrderedList().run()"
@@ -158,7 +134,7 @@
         </svg>
       </button>
       <button
-        title="Display HTML"
+        :title="$t('Display HTML')"
         data-selenium="Display-HTML"
         class="html-button"
         :class="{ 'is-active': isHtmlDisplay }"
@@ -170,24 +146,31 @@
     <editor-content
       v-if="!isHtmlDisplay"
       class="form-input html-wysiwyg-content"
-      :class="{ 'border border-danger': errorDescription, 'disabled':isDisabled }"
+      :class="{
+        'border border-danger': errorDescription,
+        disabled: isDisabled,
+      }"
       :editor="editor"
     />
     <pre
       v-else
       class="form-input"
-      :class="{ 'border border-danger': errorDescription, 'disabled':isDisabled }"
+      :class="{
+        'border border-danger': errorDescription,
+        disabled: isDisabled,
+      }"
     ><code>{{ html }}</code></pre>
   </div>
 </template>
 
 <script lang="ts">
-import { EditorContent, Editor } from '@tiptap/vue-3';
-import StarterKit from '@tiptap/starter-kit';
-import Underline from '@tiptap/extension-underline';
-import Link from '@tiptap/extension-link';
-import { defineComponent } from 'vue';
+import { EditorContent, Editor } from "@tiptap/vue-3";
+import StarterKit from "@tiptap/starter-kit";
+import Underline from "@tiptap/extension-underline";
+import Link from "@tiptap/extension-link";
+import { defineComponent } from "vue";
 export default defineComponent({
+  name: "ClassicWysiwyg",
   components: {
     EditorContent,
   },
@@ -197,21 +180,23 @@ export default defineComponent({
     errorDescription: { default: false, type: Boolean },
     isDisabled: { default: false, type: Boolean },
   },
-  emits: ['update:content'],
+  emits: ["update:content"],
   data() {
     return {
       isHtmlDisplay: false as boolean,
       html: this.content as string,
-      editor: null as Editor|null,
+      editor: null as Editor | null,
     };
   },
   watch: {
     content(): void {
-      if(this.content===this.html){return;}
+      if (this.content === this.html) {
+        return;
+      }
       this.initContent();
     },
     isDisabled(): void {
-      if(this.editor){
+      if (this.editor) {
         this.editor.setOptions({
           editable: true !== this.isDisabled,
         });
@@ -219,21 +204,24 @@ export default defineComponent({
     },
   },
 
-  mounted(){
+  mounted() {
     this.editor = new Editor({
-        extensions: [StarterKit, Underline, 
+      extensions: [
+        StarterKit,
+        Underline,
         Link.configure({
           openOnClick: false,
-        })],
-        content: '',
-        editable: true !== this.isDisabled,
-        onUpdate: this.updateHtml,
+        }),
+      ],
+      content: "",
+      editable: true !== this.isDisabled,
+      onUpdate: this.updateHtml,
     });
     this.initContent();
   },
   beforeUnmount() {
-    if(this.editor){
-    this.editor.destroy();
+    if (this.editor) {
+      this.editor.destroy();
     }
   },
 
@@ -245,31 +233,28 @@ export default defineComponent({
       }
     },
     updateHtml(): void {
-      if(this.editor){
+      if (this.editor) {
         this.html = this.editor.getHTML();
-        this.$emit('update:content', this.html);
+        this.$emit("update:content", this.html);
       }
     },
     setLink() {
-      if(!this.editor){return;}
-      const previousUrl = this.editor.getAttributes('link').href;
-      const url = window.prompt('URL', previousUrl)
-      if(!url) {
+      if (!this.editor) {
         return;
       }
-      if(""===url) {
-        this.editor
-          .chain()
-          .focus()
-          .extendMarkRange('link')
-          .unsetLink()
-          .run()
+      const previousUrl = this.editor.getAttributes("link").href;
+      const url = window.prompt("URL", previousUrl);
+      if (!url) {
+        return;
+      }
+      if ("" === url) {
+        this.editor.chain().focus().extendMarkRange("link").unsetLink().run();
         return;
       }
       this.editor
         .chain()
         .focus()
-        .extendMarkRange('link')
+        .extendMarkRange("link")
         .setLink({ href: url })
         .run();
     },
@@ -277,55 +262,55 @@ export default defineComponent({
 });
 </script>
 <style lang="scss">
-@import '@scss/_variables.scss';
-.octopus-app{
-.wysiwyg-editor {
-  .form-input {
-    height: 200px;
-    display: flex;
-  }
-  pre {
-    background: #ddd;
-    margin: 0;
-  }
-  code {
-    display: block;
-    white-space: pre-wrap;
-    width: 0;
-    flex-grow: 1;
-  }
-  .editor-menubar {
-    display: flex;
-    padding: 0.2rem;
-    flex-wrap: wrap;
-    button {
-      width: 40px;
-      height: 40px;
-      background: $octopus-secondary-color;
-      border-width: 0;
-      border-radius: $octopus-borderradius;
-      margin: 0.2rem;
-      padding: 0;
-      font-size: 1.1rem;
-      font-weight: 600;
-      &:hover,
-      &.is-active {
-        background: $primaryColorTransparent;
-      }
+@import "@scss/_variables.scss";
+.octopus-app {
+  .wysiwyg-editor {
+    .form-input {
+      height: 200px;
+      display: flex;
     }
-    .html-button {
-      font-size: 12px;
+    pre {
+      background: #ddd;
+      margin: 0;
     }
-    svg {
-      width: 40px;
-      height: 40px;
+    code {
+      display: block;
+      white-space: pre-wrap;
+      width: 0;
+      flex-grow: 1;
+    }
+    .editor-menubar {
+      display: flex;
+      padding: 0.2rem;
+      flex-wrap: wrap;
+      button {
+        width: 40px;
+        height: 40px;
+        background: $octopus-secondary-color;
+        border-width: 0;
+        border-radius: $octopus-borderradius;
+        margin: 0.2rem;
+        padding: 0;
+        font-size: 1.1rem;
+        font-weight: 600;
+        &:hover,
+        &.is-active {
+          background: $primaryColorTransparent;
+        }
+      }
+      .html-button {
+        font-size: 12px;
+      }
+      svg {
+        width: 40px;
+        height: 40px;
+      }
+    }
+    .ProseMirror {
+      width: 0;
+      flex-grow: 1;
+      overflow: auto;
     }
   }
-  .ProseMirror {
-    width: 0;
-    flex-grow: 1;
-    overflow: auto;
-  }
-}
 }
 </style>

package/src/components/misc/AcpmImage.vue

@@ -6,21 +6,21 @@
     src="/img/ACPM.webp"
     :title="$t('Octopus is ACPM Podcast accredited')"
     :alt="$t('Octopus is ACPM Podcast accredited')"
-  >
+  />
 </template>
 
 <script lang="ts">
-import { defineComponent } from 'vue'
+import { defineComponent } from "vue";
 export default defineComponent({
-  name: 'AcpmImage',
-})
+  name: "AcpmImage",
+});
 </script>
 
 <style lang="scss">
-.octopus-app{
+.octopus-app {
   .acpm_image {
     width: 44px;
     height: 44px;
   }
 }
-</style>
+</style>

package/src/components/misc/ClassicAccordion.vue

@@ -0,0 +1,73 @@
+<template>
+  <div class="my-2" :class="displayAccordion ? 'octopus-accordion' : ''">
+    <template v-if="displayAccordion">
+      <button
+        :id="'accordion-' + idComposer"
+        class="btn-transparent bg-white w-100 p-2 text-start d-flex align-items-center"
+        :class="isOpen ? 'really-light-primary-bg' : ''"
+        @click="isOpen = !isOpen"
+      >
+        <span v-if="icon" class="img-accordion text-primary" :class="icon" />
+        <img
+          v-if="imageUrl"
+          width="30"
+          height="30"
+          class="img-accordion"
+          :src="imageUrl"
+          :alt="title"
+        />
+        <span class="flex-grow-1">{{ title }}</span>
+        <span :class="isOpen ? 'saooti-up' : 'saooti-down'" />
+      </button>
+      <div v-show="isOpen" class="body p-2">
+        <slot />
+      </div>
+    </template>
+    <slot v-else />
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from "vue";
+export default defineComponent({
+  name: "ClassicAccordion",
+  props: {
+    title: { default: "", type: String },
+    idComposer: { default: "", type: String },
+    icon: { default: undefined, type: String },
+    imageUrl: { default: undefined, type: String },
+    displayAccordion: { default: true, type: Boolean },
+  },
+  emits: ["open"],
+  data() {
+    return {
+      isOpen: false as boolean,
+    };
+  },
+  watch: {
+    isOpen() {
+      this.$emit("open");
+    },
+  },
+});
+</script>
+<style lang="scss">
+.octopus-accordion {
+  border: 1px solid #ccc;
+  > button {
+    height: 50px;
+  }
+  .img-accordion {
+    width: 30px;
+    height: 30px;
+    margin-right: 1rem;
+    font-size: 20px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+  .body {
+    border-top: 1px solid #ccc;
+  }
+}
+</style>

package/src/components/misc/ClassicNav.vue

@@ -0,0 +1,117 @@
+<template>
+  <ul class="octopus-nav" :class="light ? 'light' : ''">
+    <li
+      v-for="index in tabNumber"
+      v-show="hasSlot(index - 1)"
+      :key="index - 1"
+      class="octopus-nav-item"
+    >
+      <div
+        class="octopus-nav-link"
+        :class="activeTab === index - 1 ? 'active' : ''"
+        @click="$emit('update:activeTab', index - 1)"
+      >
+        <slot :name="index - 1" />
+      </div>
+    </li>
+  </ul>
+  <div :class="transparent ? 'd-flex flex-grow-1' : 'octopus-tab-content'">
+    <div
+      v-for="index in tabNumber"
+      v-show="hasSlot('tab' + (index - 1))"
+      :key="index - 1"
+      class="octopus-tab-pane"
+      :class="activeTab === index - 1 ? 'active' : ''"
+    >
+      <slot :name="'tab' + (index - 1)" :is-active="activeTab === index - 1" />
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from "vue";
+export default defineComponent({
+  name: "ClassicNav",
+  props: {
+    tabNumber: { default: 0, type: Number },
+    activeTab: { default: 0, type: Number },
+    transparent: { default: false, type: Boolean },
+    light: { default: false, type: Boolean },
+  },
+  emits: ["update:activeTab"],
+  methods: {
+    hasSlot(name = "default") {
+      return !!this.$slots[name];
+    },
+  },
+});
+</script>
+
+<style lang="scss">
+@import "@scss/_variables.scss";
+.octopus-app {
+  .octopus-nav {
+    display: flex;
+    flex-wrap: wrap;
+    padding-left: 0;
+    margin-bottom: 0;
+    margin-top: 0;
+    list-style: none;
+    border-bottom: 0.05rem solid #ddd;
+    &.light {
+      border: 0;
+    }
+  }
+  .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.light .octopus-nav-item {
+    border: 0;
+    flex-grow: 0;
+  }
+  .octopus-nav-link {
+    display: block;
+    padding: 0.5rem 1rem;
+    text-decoration: none;
+    transition:
+      color 0.15s ease-in-out,
+      background-color 0.15s ease-in-out,
+      border-color 0.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-nav.light .octopus-nav-link {
+    border-top: 0 !important;
+    border-right: 0 !important;
+    border-left: 0 !important;
+    font-weight: bold;
+  }
+  .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;
+      flex-grow: 1;
+    }
+  }
+}
+</style>