fcad-core-dragon 2.0.0-beta.0 → 2.0.0-beta.1

package/src/components/AppCompSVG.vue

@@ -0,0 +1,309 @@
+<!--
+  @DESCRIPTION: A component used to define and provide a list of svg icones that can simply be integreted by calling the  <use> attribute of SVG element
+  @INTEGRATION: component is instantiated once in AppBase component by calling <app-icons>.
+    To add new icon simply add it with id{String} and paths{ARRAY OF Object} in the IconList variable
+    ex:{id: 'pause-icon',paths: [{
+        d:'M14.016 5.016h3.984v13.969h-3.984v-13.969zM6 18.984v-13.969h3.984v13.969h-3.984z'}
+    ]}
+  @USAGE: Icons can be use in any component by calling their ID in the svg <use> element
+    ex: <svg><use href="#pause-icon"></svg>
+    ref: https://developer.mozilla.org/en-US/docs/Web/SVG/Element/use
+-->
+<script>
+//import { h } from 'vue'
+
+const IconsList = [
+  {
+    id: 'pause-icon',
+    paths: [
+      {
+        d:
+          'M14.016 5.016h3.984v13.969h-3.984v-13.969zM6 18.984v-13.969h3.984v13.969h-3.984z'
+      }
+    ]
+  },
+  {
+    id: 'replay-icon',
+    paths: [
+      {
+        d:
+          'M8,4V0L3,5l5,5V6c3.3,0,6,2.7,6,6s-2.7,6-6,6s-6-2.7-6-6H0c0,4.4,3.6,8,8,8s8-3.6,8-8 S12.4,4,8,4z'
+      }
+    ]
+  },
+  {
+    id: 'play-icon',
+    paths: [{ d: 'M8.016 5.016l10.969 6.984-10.969 6.984v-13.969z' }]
+  },
+  {
+    id: 'volume-high-icon',
+    paths: [
+      {
+        d:
+          'M14.016 3.234q3.047 0.656 5.016 3.117t1.969 5.648-1.969 5.648-5.016 3.117v-2.063q2.203-0.656 3.586-2.484t1.383-4.219-1.383-4.219-3.586-2.484v-2.063zM16.5 12q0 2.813-2.484 4.031v-8.063q1.031 0.516 1.758 1.688t0.727 2.344zM3 9h3.984l5.016-5.016v16.031l-5.016-5.016h-3.984v-6z'
+      }
+    ]
+  },
+  {
+    id: 'volume-low-icon',
+    paths: [
+      {
+        d:
+          'M5.016 9h3.984l5.016-5.016v16.031l-5.016-5.016h-3.984v-6zM18.516 12q0 2.766-2.531 4.031v-8.063q1.031 0.516 1.781 1.711t0.75 2.32z'
+      }
+    ]
+  },
+  {
+    id: 'volume-mute-icon',
+    paths: [
+      {
+        d:
+          'M12 3.984v4.219l-2.109-2.109zM4.266 3l16.734 16.734-1.266 1.266-2.063-2.063q-1.547 1.313-3.656 1.828v-2.063q1.172-0.328 2.25-1.172l-4.266-4.266v6.75l-5.016-5.016h-3.984v-6h4.734l-4.734-4.734zM18.984 12q0-2.391-1.383-4.219t-3.586-2.484v-2.063q3.047 0.656 5.016 3.117t1.969 5.648q0 2.203-1.031 4.172l-1.5-1.547q0.516-1.266 0.516-2.625zM16.5 12q0 0.422-0.047 0.609l-2.438-2.438v-2.203q1.031 0.516 1.758 1.688t0.727 2.344z'
+      }
+    ]
+  },
+  {
+    id: 'fullscreen-icon',
+    paths: [
+      {
+        d:
+          'M14.016 5.016h4.969v4.969h-1.969v-3h-3v-1.969zM17.016 17.016v-3h1.969v4.969h-4.969v-1.969h3zM5.016 9.984v-4.969h4.969v1.969h-3v3h-1.969zM6.984 14.016v3h3v1.969h-4.969v-4.969h1.969z'
+      }
+    ]
+  },
+  {
+    id: 'fullscreen-exit-icon',
+    paths: [
+      {
+        d:
+          'M15.984 8.016h3v1.969h-4.969v-4.969h1.969v3zM14.016 18.984v-4.969h4.969v1.969h-3v3h-1.969zM8.016 8.016v-3h1.969v4.969h-4.969v-1.969h3zM5.016 15.984v-1.969h4.969v4.969h-1.969v-3h-3z'
+      }
+    ]
+  },
+  {
+    id: 'pip-icon',
+    paths: [
+      {
+        d:
+          'M21 19.031v-14.063h-18v14.063h18zM23.016 18.984q0 0.797-0.609 1.406t-1.406 0.609h-18q-0.797 0-1.406-0.609t-0.609-1.406v-14.016q0-0.797 0.609-1.383t1.406-0.586h18q0.797 0 1.406 0.586t0.609 1.383v14.016zM18.984 11.016v6h-7.969v-6h7.969z'
+      }
+    ]
+  },
+  {
+    id: 'subtitle-on-icon',
+    paths: [
+      {
+        d:
+          'M20,4H4A2.006,2.006,0,0,0,2,6V18a2.006,2.006,0,0,0,2,2H20a2.006,2.006,0,0,0,2-2V6A2.006,2.006,0,0,0,20,4ZM4,12H8v2H4Zm10,6H4V16H14Zm6,0H16V16h4Zm0-4H10V12H20Z'
+      }
+    ]
+  },
+  {
+    id: 'subtitle-off-icon',
+    paths: [
+      {
+        d:
+          'M20,4H6.83l8,8H20v2H16.83l4.93,4.93A1.949,1.949,0,0,0,22,18V6A2.006,2.006,0,0,0,20,4Z M1.04,3.87l1.2,1.2A1.949,1.949,0,0,0,2,6V18a2.006,2.006,0,0,0,2,2H17.17l2.96,2.96,1.41-1.41L2.45,2.45ZM8,12v2H4V12Zm6,4.83V18H4V16h9.17Z'
+      }
+    ]
+  },
+  {
+    id: 'transcript-on-icon',
+    paths: [
+      {
+        d:
+          'M5.5 7a.5.5 0 0 0 0 1h5a.5.5 0 0 0 0-1h-5zM5 9.5a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1-.5-.5zm0 2a.5.5 0 0 1 .5-.5h2a.5.5 0 0 1 0 1h-2a.5.5 0 0 1-.5-.5z M9.5 0H4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V4.5L9.5 0zm0 1v2A1.5 1.5 0 0 0 11 4.5h2V14a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1h5.5z'
+      }
+    ]
+  },
+  {
+    id: 'close-square-icon',
+    viewBox: '0 0 16 16',
+    paths: [
+      {
+        d:
+          'M14 1a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1zM2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2z'
+      },
+      {
+        d:
+          'M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708'
+      }
+    ]
+  },
+  {
+    id: 'branch-crochet-icon',
+    paths: [
+      {
+        id: 'Tracé_3833',
+        'data-name': 'Tracé 3833',
+        d: 'M0,0H24V24H0Z',
+        fill: 'none'
+      },
+
+      {
+        id: 'Tracé_3834',
+        'data-name': 'Tracé 3834',
+        d: 'M9,16.2,4.8,12,3.4,13.4,9,19,21,7,19.6,5.6Z',
+        fill: '#e6f5ff'
+      }
+    ]
+  },
+  {
+    id: 'navigate-next-icon',
+    viewBox: '0 0 7.41 12',
+    paths: [
+      {
+        id: 'Path_3899',
+        'data-name': 'Path 3899',
+        d: 'M0,0H24V24H0Z',
+        fill: 'none'
+      },
+
+      {
+        id: 'Path_3900',
+        'data-name': 'Path 3900',
+        d: 'M10.02,6,8.61,7.41,13.19,12,8.61,16.59,10.02,18l6-6Z',
+        transform: 'translate(-8.61 -6)'
+      }
+    ]
+  },
+  {
+    id: 'navigate-previous-icon',
+    paths: [
+      {
+        id: 'Path_3899',
+        'data-name': 'Path 3899',
+        d: 'M24 24H0V0h24Z',
+        fill: 'none'
+      },
+      {
+        id: 'Path_3900',
+        'data-name': 'Path 3900',
+        d: 'm13.98 18 1.41-1.41L10.81 12l4.58-4.59L13.98 6l-6 6Z'
+      }
+    ]
+  },
+  {
+    id: 'fleche-gauche-icon',
+    paths: [
+      {
+        id: 'arrow_forward_FILL0_wght400_GRAD0_opsz48',
+        d:
+          'M11.7 23.4c-.3 0-.6-.1-.8-.3L.3 12.5c-.1-.1-.2-.2-.3-.4v-.4c0-.1 0-.3.1-.4.1-.1.2-.3.3-.4L10.9.3c.5-.4 1.1-.4 1.6 0 .4.5.4 1.2 0 1.6l-8.6 8.6h19c.6 0 1.1.5 1.1 1.2 0 .6-.5 1.1-1.2 1.1H3.9l8.6 8.6c.4.5.4 1.1 0 1.6-.2.3-.5.4-.8.4z'
+      }
+    ]
+  },
+  {
+    id: 'fleche-droite-icon',
+    paths: [
+      {
+        id: 'arrow_forward_FILL0_wght400_GRAD0_opsz48',
+        d:
+          'M11.4 23.1c-.4-.5-.4-1.1 0-1.6l8.6-8.6H1.1c-.6 0-1.2-.5-1.2-1.1 0-.6.5-1.2 1.1-1.2h19L11.4 2c-.4-.5-.4-1.2 0-1.6.5-.4 1.1-.4 1.6 0L23.6 11c.1.1.2.2.3.4.1.1.1.3.1.4 0 .1 0 .3-.1.4-.1.2-.2.3-.3.4L13 23.2c-.2.2-.5.3-.8.3-.3-.1-.6-.2-.8-.4z'
+      }
+    ]
+  },
+  {
+    id: 'fleche-retour-icon',
+    viewBox: '0 0 11.667 11.46',
+    paths: [
+      {
+        'data-name': 'Path 4230',
+        d:
+          'M433.865,369.022H433.6v-.005h-7.548l2.014-2.171-1.1-1.182-3.9,4.19,3.9,4.191,1.1-1.182-2.014-2.171H433v4.57h-2.5v1.861h3.366a.9.9,0,0,0,.866-.93v-6.346A.811.811,0,0,0,433.865,369.022Z',
+        transform: 'translate(-423.065 -365.664)'
+      }
+    ]
+  },
+  {
+    id: 'home-icon',
+    viewBox: '0 0 20 17',
+    paths: [
+      {
+        id: 'Path_3912',
+        'data-name': 'Path 3912',
+        d: 'M10,20V14h4v6h5V12h3L12,3,2,12H5v8Z',
+        transform: 'translate(-2 -3)'
+      }
+    ]
+  },
+  {
+    id: 'timeline-icon',
+    viewBox: '0 0 33 18',
+    paths: [
+      {
+        id: 'timeline_FILL0_wght400_GRAD0_opsz48',
+        'data-name': 'timeline FILL0 wght400 GRAD0 opsz48',
+        d:
+          'M2.93,18.46a2.63,2.63,0,0,1,0-5.25l.39,0a4.21,4.21,0,0,1,.49.09l7.5-7.5a2.73,2.73,0,0,1-.1-.48c0-.13,0-.26,0-.39a2.62,2.62,0,0,1,4.48-1.84A2.51,2.51,0,0,1,16.43,5s0,.33-.11.85L20.45,10a2.73,2.73,0,0,1,.48-.1l.38,0,.37,0a2.66,2.66,0,0,1,.49.1l6-6a4.21,4.21,0,0,1-.09-.49c0-.12,0-.25,0-.38a2.63,2.63,0,1,1,2.63,2.63l-.38,0a3.86,3.86,0,0,1-.49-.09l-6,6a4,4,0,0,1,.09.48,2.55,2.55,0,0,1,0,.39,2.63,2.63,0,0,1-5.25,0c0-.13,0-.26,0-.39a2.73,2.73,0,0,1,.1-.48L14.67,7.47a2.66,2.66,0,0,1-.49.1l-.38,0L13,7.47,5.45,15a4.21,4.21,0,0,1,.09.49c0,.13,0,.25,0,.38A2.63,2.63,0,0,1,2.93,18.46Z',
+        transform: 'translate(-0.31 -0.46)'
+      }
+    ]
+  },
+  {
+    id: 'info-icon',
+    viewBox: '0 0 17.9 17.91',
+    paths: [
+      {
+        d:
+          'M9.07 13.41a.65.65 0 0 0 .67-.63V8.66a.63.63 0 0 0-.2-.46.67.67 0 0 0-.47-.2.65.65 0 0 0-.67.63v4.08a.59.59 0 0 0 .2.46.67.67 0 0 0 .47.24ZM9 6.34a.69.69 0 0 0 .53-.2.67.67 0 0 0 .21-.52.74.74 0 0 0-.21-.54.73.73 0 0 0-1 0 .74.74 0 0 0-.21.54.67.67 0 0 0 .21.52.69.69 0 0 0 .47.2Zm0 11.57a9 9 0 0 1-3.55-.69 8.68 8.68 0 0 1-4.76-4.76 9.45 9.45 0 0 1 0-7.09 8.79 8.79 0 0 1 1.9-2.85 9.05 9.05 0 0 1 12.8 12.8 8.88 8.88 0 0 1-2.86 1.9 9.1 9.1 0 0 1-3.53.69Z'
+      }
+    ]
+  },
+  {
+    id: 'clock-icon',
+    viewBox: '0 0 18 21.01',
+    paths: [
+      {
+        id: 'Path_3904',
+        d:
+          'M12 0H6v2h6V0zM8 13h2V7H8v6zm8.03-6.61 1.42-1.42c-.43-.51-.9-.98-1.41-1.41l-1.42 1.42c-3.88-3.1-9.55-2.47-12.65 1.41S-.5 15.94 3.38 19.04s9.55 2.47 12.65-1.41a8.992 8.992 0 0 0 0-11.24zM9 19c-3.87 0-7-3.13-7-7s3.13-7 7-7 7 3.13 7 7c0 3.86-3.13 7-6.99 7H9z'
+      }
+    ]
+  }
+]
+
+export default {
+  props: {
+    viewBox: {
+      type: String,
+      default: '0 0 24 24'
+    }
+  },
+
+  methods: {},
+
+  render(h) {
+    return h('svg', { style: 'display: none', class: 'app-icons' }, [
+      h(
+        'defs',
+        {},
+        IconsList.map((icon) => {
+          return h(
+            'symbol',
+            {
+              attrs: {
+                id: icon.id,
+                viewBox: (() => (icon.viewBox ? icon.viewBox : '0 0 24 24'))()
+              }
+            },
+            icon.paths.map((_p) => {
+              return h('path', { attrs: { ..._p } })
+            })
+          )
+        })
+      )
+    ])
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+svg {
+  width: 28px;
+  height: 28px;
+  fill: #fff;
+  stroke: #fff;
+  cursor: pointer;
+}
+</style>

package/src/components/AppCompSettingsMenu.vue

@@ -31,6 +31,7 @@
       <app-base-button
         v-b-toggle.sidebar-settings
         class="float-right btn-primary"
+        :title="$t('user_settings.close')"
       >
         {{ $t('user_settings.close') }}
       </app-base-button>

package/src/components/AppCompTableOfContent.vue

@@ -1,45 +1,39 @@
 <!--
+  ----------------- MUST ADD OVERAY TO CLOSE WIDGET ------------------
+  ----------------- MUST ADD ERROR GESTION ------------------
+  ----------------- MUST ADD label terminer ------------------
+  ----------------- MUST ADD css ------------------
+
  @ Description: This component is used to display the sub menu to show the anchor of a activity.
  @ What it does: The component show the data that was enter in menu.json and create de link to the anchor from those information. This componant must be use with app-comp-menu-Item and app-comp-menu.
 -->
 
 <template>
-  <b-sidebar id="sidebar-submenu" backdrop shadow right>
-    <div class="box">
-      <div class="box-time">
-        <p>{{ time }}</p>
-      </div>
-
-      <div class="box-contenu">
-        <div class="box-ttl">
-          <h2>{{ title }}</h2>
+  <div id="sidebar-submenu" :class="{ isOpen: open }">
+    <app-base-button id="close-toc" @click="close()">X</app-base-button>
+    <p>{{ $t('text.you_are_here') }}</p>
+    <p v-html="title"></p>
 
-          <h3>{{ subtitle }}</h3>
-        </div>
+    <div>
+      <p>{{ actProgress }} {{ $t('text.activity_progress') }}</p>
+    </div>
 
-        <div class="container-anchor">
-          <div
-            v-for="(anchor, index) of anchors"
-            :id="activityId + '-submenu-anchor-' + index"
-            :key="index"
-            class="box-sa"
-          >
-            <b-link
-              :to="{
-                name: anchor.path,
-                hash: (() => (anchor.anchorTag ? `#${anchor.anchorTag}` : ''))()
-              }"
-              @click="scrollToAnchor($event)"
-            >
-              <span @click="scrollToAnchor($event)">
-                {{ anchor.anchorName }}
-              </span>
-            </b-link>
-          </div>
+    <div class="box">
+      <b-link
+        v-for="anchor of anchors"
+        :key="anchor.title"
+        :to="{
+          name: anchor.path
+        }"
+        @click="close()"
+      >
+        <div>
+          <p>{{ anchor.title }}</p>
+          <p></p>
         </div>
-      </div>
+      </b-link>
     </div>
-  </b-sidebar>
+  </div>
 </template>
 
 <script>
@@ -48,25 +42,42 @@ import { mapGetters } from 'vuex'
 export default {
   data() {
     return {
-      //activitiSubMenu: [],
-      activityId: null,
       title: '',
-      subtitle: '',
-      time: '',
       anchors: [],
-      activity: ''
+      activity: '',
+      open: false,
+      menuInfo: null,
+      actProgress: null
     }
   },
   computed: {
-    ...mapGetters(['getMenuSettings', 'getAnchorsForActivity', 'getBifChoice'])
+    ...mapGetters([
+      'getMenuSettings',
+      'getAnchorsForActivity',
+      'getBifChoice',
+      'getAllCompleted',
+      'getAllActivitiesState'
+    ])
   },
   mounted() {
+    this.$bus.$on('toggle-widget', (data) => {
+      if (data == 'toc') this.open = !this.open
+      else this.open = false
+    })
+
+    this.$bus.$on('close-widget', (data) => {
+      this.open = false
+      this.reset()
+    })
+
     this.$bus.$on('info-activity', (data) => {
       //should be condition to avoid event fireing multiple time on call
+
       if (data) {
+        this.reset()
         this.activity = data
-        //this.getInfoSubMenu(this.activity)
         this.getInfoSubMenu(data)
+        this.getProgressActivity(data)
       }
     })
   },
@@ -76,25 +87,54 @@ export default {
      */
     //
     getInfoSubMenu(activity) {
-      if (activity) {
-        this.title = activity.title
-        this.subtitle = activity.subtitle
-        this.time = activity.time
-
-        //get the anchors for this activity from the store
-        let menuInfo = this.getMenuSettings
-
-        if (menuInfo[activity.id] && menuInfo[activity.id].anchors) {
-          const anchors = menuInfo[activity.id].anchors
-          this.buildAnchorsRoutes(anchors)
-        } else this.anchors = []
-      } else {
-        this.title = ''
-        this.subtitle = ''
-        this.time = ''
+      //get the anchors for this activity from the store
+      let menuInfo = this.getMenuSettings
+      let nb = null
+
+      //Get title are if no title construct acitivty
+      if (menuInfo[activity] && menuInfo[activity].title)
+        this.title = menuInfo[activity].title
+
+      if (activity.charAt(1) == '0' || activity.charAt(1) == 0)
+        nb = activity.substr(2)
+      else nb = activity.substr(1)
+
+      this.title = `${this.$t('text.activity')} ${nb} : ${
+        menuInfo[activity].subTitle
+      }`
+
+      let count = 0
+
+      //create anchors title and path
+      if (menuInfo[activity] && menuInfo[activity].anchors) {
+        menuInfo[activity].anchors.forEach((element) => {
+          count++
+
+          //
+          let _path = null
+          let b = null
+          if (nb == 0 || nb == '0') {
+            b = `introduction`
+          } else {
+            b = `activite_${nb}`
+          }
+
+          if (element.page == 'page_1') {
+            _path = `${b}`
+          } else {
+            _path = `${b}.${element.page}`
+          }
+
+          let info = {
+            title: `${this.$t('text.anchors')} ${count} : ${
+              element.anchorName
+            }`,
+            path: _path
+          }
+          this.anchors.push(info)
+        })
       }
     },
-
     disable(data) {
       let page = data.pageRef
       let act = this.getAct(data.path)
@@ -112,7 +152,7 @@ export default {
       }
     },
     getAct(data) {
-      //return data.substring(data.indexOf('_'))
+      //return the id need it
       if (data) {
         if (data.substring(data.indexOf('_') + 1).length == 1) {
           return `A0${data.substring(data.indexOf('_') + 1)}`
@@ -121,43 +161,58 @@ export default {
         }
       }
     },
-    /* @Description:build the route for the anchors in the menu
-     */
-    buildAnchorsRoutes(anchors) {
-      //build the route for each anchors
-      for (let a of anchors) {
-        let _path = ''
-        if (a.page === 'page_1') _path = this.activity.path
-        else _path = `${this.activity.path}.${a.page}`
-        a.path = _path
-      }
-      this.anchors = anchors
-    },
-
     /**
-     * @description signal a scoll action to perform by application.
-     * - Send an update status for application to the Store
-     * - send an anchor state update to the Store
-     * - Send a scoll message to the $bus
-     * - THIS METHODE DOES NOT PERFORM Scroll. scroll action will be perform by the PAGE after receiving the scroll message
-     * @param {Object} event - the element that is the scoll target
+     * @description Gives gives length of completed page for an activity
+     * @param {String} idActivity
+     * @returns {Number}
      */
-    scrollToAnchor(event) {
-      // Making sure that the method will be executed in write sequence. Adding timeout with delay of 0 to solve asynchronicity issues.
-      setTimeout(() => {
-        // if there a Anchor to go to bus give the page the signasl to scroll
-        if (this.$route.hash) {
-          this.$store.dispatch('updateAppStatus', 'loading') // set the app status to ready
-          this.$store.commit('UPDATE_ANCHOR_STATE', false)
-          this.$bus.$emit('target-to-scroll', event.target)
+    getProgressActivity(idActivity) {
+      /// give all the page that are complete to the gauge
+      if (idActivity) {
+        let completed = []
+        if (this.getAllCompleted[idActivity]) {
+          completed = this.getAllCompleted[idActivity] //get all completed page for the activity
         }
-      }, 0)
+
+        const allActivitiesState = JSON.parse(
+          JSON.stringify(this.getAllActivitiesState)
+        )
+        let size = allActivitiesState[idActivity]
+          ? allActivitiesState[idActivity].size
+          : 0
+
+        // reduce the size if in A00
+        if (idActivity === 'A00' && size > 0) size = size - 1
+
+        // return pourcent of activity completion
+        this.actProgress = `${Math.round((completed.length * 100) / size)} %`
+      }
+    },
+    close() {
+      this.open = !this.open
+      this.reset()
+    },
+    reset() {
+      this.anchors = []
+      this.activity = ''
+      this.activity = ''
     }
   }
 }
 </script>
 <style lang="scss">
 #sidebar-submenu {
+  display: none;
+  position: absolute;
+  left: 200%;
+  top: 0;
+  background: white;
+  width: 450px;
+
+  &.isOpen {
+    display: block;
+  }
+
   .b-sidebar-header {
     display: none;
     pointer-events: none;

package/src/components/AppCompTranscript.vue

@@ -0,0 +1,19 @@
+<template>
+  <div id="transcript-container" v-html="content"></div>
+</template>
+<script>
+export default {
+  props: {
+    content: {
+      type: String,
+      default: `Hello Wolrd!`
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+#transcript-container {
+  padding: 30px;
+}
+</style>