storybook-readme/vue/components/ReadmeContent/index.js

Storybook addon to show components README (for React and Vue)

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;

var _StoryPreview = _interopRequireDefault(require("../Preview/StoryPreview"));

var _HeaderPreview = _interopRequireDefault(require("../Preview/HeaderPreview"));

var _FooterPreview = _interopRequireDefault(require("../Preview/FooterPreview"));

var _DocPreview = _interopRequireDefault(require("../Preview/DocPreview"));

var _config = require("../../../services/config");

var _githubMarkdownCss = _interopRequireDefault(require("../../../styles/githubMarkdownCss"));

var _codeThemeCss = _interopRequireDefault(require("../../../styles/codeThemeCss"));

var _highlite = _interopRequireDefault(require("../../../services/highlite"));

var _const = require("../../../const");

var _default = {
  name: 'readme-content',
  data: function data() {
    var config = (0, _config.getConfig)();
    var _this$$props = this.$props,
        _this$$props$StoryPre = _this$$props.StoryPreview,
        StoryPreview = _this$$props$StoryPre === void 0 ? config.StoryPreview || _StoryPreview.default : _this$$props$StoryPre,
        _this$$props$FooterPr = _this$$props.FooterPreview,
        FooterPreview = _this$$props$FooterPr === void 0 ? config.FooterPreview || _FooterPreview.default : _this$$props$FooterPr,
        _this$$props$HeaderPr = _this$$props.HeaderPreview,
        HeaderPreview = _this$$props$HeaderPr === void 0 ? config.HeaderPreview || _HeaderPreview.default : _this$$props$HeaderPr,
        _this$$props$DocPrevi = _this$$props.DocPreview,
        DocPreview = _this$$props$DocPrevi === void 0 ? config.DocPreview || _DocPreview.default : _this$$props$DocPrevi;
    return {
      // backward,
      availableTypes: this.$props.types ? this.$props.types : [_const.LAYOUT_TYPE_MD, _const.LAYOUT_TYPE_STORY, _const.LAYOUT_TYPE_PROPS_TABLE, _const.LAYOUT_TYPE_FOOTER_MD, _const.LAYOUT_TYPE_HEADER_MD],
      LAYOUT_TYPE_MD: _const.LAYOUT_TYPE_MD,
      LAYOUT_TYPE_STORY: _const.LAYOUT_TYPE_STORY,
      LAYOUT_TYPE_PROPS_TABLE: _const.LAYOUT_TYPE_PROPS_TABLE,
      LAYOUT_TYPE_FOOTER_MD: _const.LAYOUT_TYPE_FOOTER_MD,
      LAYOUT_TYPE_HEADER_MD: _const.LAYOUT_TYPE_HEADER_MD,
      preview: {
        StoryPreview: StoryPreview,
        FooterPreview: FooterPreview,
        HeaderPreview: HeaderPreview,
        DocPreview: DocPreview
      }
    };
  },
  mounted: function mounted() {
    if (this.backward) {
      this.$store.commit('notify');
    }

    (0, _githubMarkdownCss.default)({
      theme: this.theme
    });

    if (this.codeTheme) {
      (0, _codeThemeCss.default)({
        codeTheme: this.codeTheme
      });
      (0, _highlite.default)(this.$el);
    }
  },
  props: ['types', 'layout', 'codeTheme', 'theme', 'withPreview', 'StoryPreview', 'DocPreview', 'HeaderPreview', 'FooterPreview', 'backward'],
  template: "\n    <div>\n      <div v-for=\"item in layout\">\n     \n        <component class=\"markdown-body\"\n          :is=\"preview.HeaderPreview\"\n          v-if=\"availableTypes.includes(item.type) && item.type === LAYOUT_TYPE_HEADER_MD\" \n          v-html=\"item.content\"/>\n\n        <component class=\"markdown-body\"\n          :is=\"preview.DocPreview\"\n          v-if=\"availableTypes.includes(item.type) && item.type === LAYOUT_TYPE_MD\" \n          v-html=\"item.content\"/>\n\n        <component class=\"markdown-body\"\n          :is=\"preview.FooterPreview\"\n          v-if=\"availableTypes.includes(item.type) && item.type === LAYOUT_TYPE_FOOTER_MD\"\n          v-html=\"item.content\" />\n          \n        <component v-if=\"availableTypes.includes(item.type) && withPreview && item.type === LAYOUT_TYPE_STORY\" \n          :is=\"preview.StoryPreview\">\n          <component :is=\"item.content\" />\n        </component>\n\n        <div v-if=\"availableTypes.includes(item.type) && !withPreview && item.type === LAYOUT_TYPE_STORY\">\n          <component :is=\"item.content\" />\n        </div>\n\n      </div>\n    </div>\n    "
};
exports.default = _default;