fix(FigureCode): Make figurecode components as functional

Author: ktquez

global-components/FigureCode.vue renamed to components/FigureCode.vue

@@ -1,12 +1,12 @@
-<template>
+<template functional>
  <!-- eslint-disable vuejs-accessibility/no-redundant-roles -->
 
  <!-- role="figure" for IE11 screen reader support -->
  <!-- aria-label for macOS VoiceOver + Chrome -->
  <!-- see more: https://www.scottohara.me/blog/2019/01/21/how-do-you-figure.html#wrapping-up -->
  <figure
  role="figure"
- :aria-label="caption"
+ :aria-label="props.caption"
  class="figurecode teste-fig"
  >
  <slot name="content" />

global-components/FigureCodeCaption.vue renamed to components/FigureCodeCaption.vue

@@ -1,7 +1,7 @@
-<template>
+<template functional>
  <figcaption
  class="figurecode__caption"
- v-html="caption"
+ v-html="props.caption"
  />
 </template>
 

config/plugins.js

@@ -19,17 +19,17 @@ module.exports = [
  if (tokens[idx].nesting === 1) {
  caption = m ? md.utils.escapeHtml(m[1]) : ''
  return `
- <figure-code caption="${caption}">
+ <FigureCode caption="${caption}">
  <div slot="content">
  `
  } else {
  return `
  </div>
- <figure-code-caption
+ <FigureCodeCaption
  slot="caption"
  caption="${caption}"
  /> 
- </figure-code>
+ </FigureCode>
  `
  }
  }

enhanceApp.js

@@ -3,13 +3,17 @@ import VueDarkMode from '@vue-a11y/dark-mode'
 import 'a11y-css-reset/combo.css'
 import merge from 'deepmerge'
 import VueSkipTo from 'vue-skip-to'
+import FigureCode from './components/FigureCode.vue'
+import FigureCodeCaption from './components/FigureCodeCaption.vue'
 import WarningOpenLinkNewWindow from './components/WarningOpenLinkNewWindow.vue'
 import { axe as axeDefaultConfig } from './config/defaultThemeConfig'
 import { isObject } from './utils'
 
 export default ({ Vue, router, isServer, siteData }) => {
  // built-in components
  Vue.component('WarningOpenLinkNewWindow', WarningOpenLinkNewWindow)
+ Vue.component('FigureCode', FigureCode)
+ Vue.component('FigureCodeCaption', FigureCodeCaption)
 
  // Development
  if (process.env.NODE_ENV === 'development') {