@gitlab/ui 38.0.1 → 38.2.1

package/src/components/base/form/form_radio/form_radio.spec.js

@@ -5,6 +5,8 @@ import GlFormRadio from './form_radio.vue';
 describe('GlFormRadio', () => {
   let wrapper;
   let options;
+  let eventHandlers;
+
   const firstOption = {
     text: 'One',
     value: 'one',
@@ -16,6 +18,10 @@ describe('GlFormRadio', () => {
 
   const createWrapper = () => {
     options = [firstOption, secondOption];
+    eventHandlers = {
+      input: jest.fn(),
+      change: jest.fn(),
+    };
 
     wrapper = mount({
       data() {
@@ -32,9 +38,15 @@ describe('GlFormRadio', () => {
             :key="option.value"
             v-model="selected"
             :value="option.value"
+            @change="changeHandler"
+            @input="inputHandler"
           >{{ option.text }}</gl-form-radio>
         </div>
       `,
+      methods: {
+        changeHandler: eventHandlers.change,
+        inputHandler: eventHandlers.input,
+      },
     });
   };
 
@@ -79,16 +91,17 @@ describe('GlFormRadio', () => {
     });
 
     it('emits an input event on each radio, and a change event on the newly selected radio', () => {
-      const [formRadioOne, formRadioTwo] = wrapper.findAllComponents(GlFormRadio).wrappers;
+      const { input, change } = eventHandlers;
+      const { value: clickedRadioValue } = secondOption;
 
-      expect(formRadioOne.emitted()).toEqual({
-        input: [[secondOption.value]],
-      });
+      // The input handler is called twice because each radio emits one input event.
+      expect(input).toHaveBeenCalledTimes(2);
+      expect(input).toHaveBeenNthCalledWith(1, clickedRadioValue);
+      expect(input).toHaveBeenNthCalledWith(2, clickedRadioValue);
 
-      expect(formRadioTwo.emitted()).toEqual({
-        input: [[secondOption.value]],
-        change: [[secondOption.value]],
-      });
+      // The change handler is only called once, since only the newly selected radio emits a change event.
+      expect(change).toHaveBeenCalledTimes(1);
+      expect(change).toHaveBeenCalledWith(clickedRadioValue);
     });
 
     it('updates the bound value', () => {

package/src/components/base/form/form_radio_group/form_radio_group.stories.js

@@ -1,4 +1,4 @@
-import { GlFormRadioGroup } from '../../../../index';
+import { GlFormRadioGroup, GlFormRadio } from '../../../../index';
 import readme from './form_radio_group.md';
 
 const defaultOptions = [
@@ -34,6 +34,7 @@ const template = `
 const Template = (args, { argTypes }) => ({
   components: {
     GlFormRadioGroup,
+    GlFormRadio,
   },
   props: Object.keys(argTypes),
   template,

package/src/components/base/markdown/markdown.scss

@@ -162,6 +162,27 @@
     @include gl-px-2;
     @include gl-py-1;
   }
+
+  .audio-container {
+    @include gl-display-inline-flex;
+    @include gl-flex-direction-column;
+    @include gl-w-full;
+
+    audio {
+      @include gl-w-full;
+    }
+
+    a {
+      @include gl-mt-3;
+
+      &::before {
+        @include gl-mr-2;
+        text-rendering: auto;
+        -webkit-font-smoothing: antialiased;
+        content: '📎';
+      }
+    }
+  }
 }
 
 .gl-compact-markdown {

package/src/components/base/markdown/markdown_typescale_demo.html

@@ -3,8 +3,8 @@
   significant ways to add some useful functionality. You can use GFM in the following areas: comments, issues, merge
   requests, milestones, snippets and more.</p>
 <p class="sm">MD Doc Small Paragraph • GitLab uses "GitLab Flavored Markdown" (GFM). It extends the standard Markdown
-in a few significant ways to add some useful functionality. You can use GFM in the following areas: comments, issues,
-merge requests, milestones, snippets and more.</p>
+  in a few significant ways to add some useful functionality. You can use GFM in the following areas: comments, issues,
+  merge requests, milestones, snippets and more.</p>
 <p class="monospace">UI Monospace</p>
 <p class="monospace sm">UI Small Monospace</p>
 <h2>MD Doc h2 • GitLab uses "GitLab Flavored Markdown" (GFM)</h2>
@@ -29,15 +29,26 @@ merge requests, milestones, snippets and more.</p>
   requests, milestones, snippets and more.</p>
 <blockquote>
   <p>
-  MD Doc Blockquote • GitLab uses "GitLab Flavored Markdown" (GFM). It extends the standard Markdown in a few
-  significant ways to add some useful functionality. You can use GFM in the following areas: comments, issues, merge
-  requests, milestones, snippets and more.
+    MD Doc Blockquote • GitLab uses "GitLab Flavored Markdown" (GFM). It extends the standard Markdown in a few
+    significant ways to add some useful functionality. You can use GFM in the following areas: comments, issues, merge
+    requests, milestones, snippets and more.
   </p>
 </blockquote>
 <p>
   This is a paragraph with two types inline diff <span class="idiff addition">addition</span> and
   <span class="idiff deletion">deletion</span>
 </p>
-<p> 
+<p>
   This block implements the "GitLab Flavored Markdown" <code>Code span</code> styles.
 </p>
+
+<p>
+  This is an audio file
+  <span class="media-container audio-container">
+    <audio src="file.mp3" controls="true" data-setup="{}" data-title="file.mp3" data-canonical-src="file.mp3"
+      class="gfm">
+    </audio>
+    <a href="file.mp3" target="_blank" rel="noopener noreferrer" title="Download file.mp3" data-canonical-src="file.mp3"
+      data-link="true" class="gfm">file.mp3</a>
+  </span>
+</p>

package/src/components/base/navbar/navbar.stories.js

@@ -1,8 +1,9 @@
+import { BNavbarBrand } from 'bootstrap-vue';
 import { GlNavbar } from '../../../index';
 import readme from './navbar.md';
 
 const Template = (args, { argTypes }) => ({
-  components: { GlNavbar },
+  components: { GlNavbar, BNavbarBrand },
   props: Object.keys(argTypes),
   template: `
   <gl-navbar variant="dark" type="dark">

package/src/components/base/skeleton_loader/skeleton_loader.stories.js

@@ -1,28 +1,77 @@
 import { GlSkeletonLoader } from '../../../index';
+import { makeContainer } from '../../../utils/story_decorators/container';
 import readme from './skeleton_loader.md';
 
-const Template = (args) => ({
+const defaultValue = (prop) => GlSkeletonLoader.props[prop].default;
+
+const generateProps = ({
+  width = defaultValue('width'),
+  height = defaultValue('height'),
+  preserveAspectRatio = defaultValue('preserveAspectRatio'),
+  lines = defaultValue('lines'),
+  equalWidthLines = defaultValue('equalWidthLines'),
+} = {}) => ({
+  width,
+  height,
+  preserveAspectRatio,
+  lines,
+  equalWidthLines,
+});
+
+const template = (slotContent = '') => `
+    <gl-skeleton-loader
+      :width="width"
+      :height="height"
+      :preserveAspectRatio="preserveAspectRatio"
+      :lines="lines"
+      :equalWidthLines="equalWidthLines"
+    >${slotContent}</gl-skeleton-loader>
+`;
+
+export const Default = (args) => ({
   components: { GlSkeletonLoader },
   props: Object.keys(args),
-  template: `
-  <div style="background: #fff; border: 1px solid #dfdfdf; box-shadow: 0 1px 2px rgba(0,0,0,0.1); width: 359px; height: 135px; padding: 1rem; border-radius: 0.25rem;">
-    <div style="width: 327px; height: 102px;">
-      <gl-skeleton-loader :width="327" :height="102">
-        <rect width="276" height="16" rx="4" />
-        <rect y="18" width="237" height="16" rx="4" />
-        <rect y="42" width="118" height="16" rx="8" />
-        <rect x="122" y="42" width="130" height="16" rx="8" />
-        <rect y="62" width="106" height="16" rx="8" />
-        <rect x="110" y="62" width="56" height="16" rx="8" />
-        <rect x="256" y="42" width="71" height="16" rx="8" />
-        <rect y="86" width="38" height="16" rx="4" />
-      </gl-skeleton-loader>
-    </div>
-  </div>`,
+  template: template(),
+});
+Object.assign(Default, {
+  args: generateProps(),
+  parameters: {
+    controls: {
+      // When not providing custom shapes in the default slot, these are the
+      // only props you're likely to want to modify.
+      include: ['width', 'lines', 'equalWidthLines'],
+    },
+  },
 });
 
-export const Default = Template.bind({});
-Default.args = {};
+export const WithCustomShapes = (args) => ({
+  components: { GlSkeletonLoader },
+  props: Object.keys(args),
+  template: template(`
+    <rect width="276" height="16" rx="4" />
+    <rect y="18" width="237" height="16" rx="4" />
+    <rect y="42" width="118" height="16" rx="8" />
+    <rect x="122" y="42" width="130" height="16" rx="8" />
+    <rect y="62" width="106" height="16" rx="8" />
+    <rect x="110" y="62" width="56" height="16" rx="8" />
+    <rect x="256" y="42" width="71" height="16" rx="8" />
+    <rect y="86" width="38" height="16" rx="4" />
+  `),
+});
+Object.assign(WithCustomShapes, {
+  args: generateProps({
+    width: 327,
+    height: 102,
+  }),
+  parameters: {
+    controls: {
+      // With custom shapes, other props become useful, although they're a bit
+      // counterintuitive.
+      include: ['width', 'height', 'preserveAspectRatio'],
+    },
+  },
+  decorators: [makeContainer({ width: '250px' })],
+});
 
 export default {
   title: 'base/skeleton-loader',
@@ -34,8 +83,5 @@ export default {
         component: readme,
       },
     },
-    controls: {
-      disable: true,
-    },
   },
 };

package/src/components/base/tabs/tabs/tabs.stories.js

@@ -1,5 +1,5 @@
 import { range } from 'lodash';
-import { GlTabs, GlTab, GlScrollableTabs } from '../../../../index';
+import { GlTabs, GlTab, GlScrollableTabs, GlBadge } from '../../../../index';
 import readme from './tabs.md';
 
 const components = {
@@ -150,7 +150,7 @@ JustifiedTabs.args = generateProps({ justified: true });
 
 export const WithCounterBadges = (_args, { argTypes }) => ({
   props: Object.keys(argTypes),
-  components,
+  components: { ...components, GlBadge },
   template: wrap(`
     <gl-tab>
       <template #title>

package/src/components/charts/series_label/series_label.stories.js

@@ -35,14 +35,13 @@ const Template = (_args, { argTypes }) => ({
 });
 
 export const Default = Template.bind({});
-Default.args = generateProps({ color: '' });
+Default.args = generateProps();
 
 export const WithLongName = Template.bind({});
-WithLongName.args = generateProps({ color: '', text: SERIES_NAME[SERIES_NAME_LONG] });
+WithLongName.args = generateProps({ text: SERIES_NAME[SERIES_NAME_LONG] });
 
 export const WithLongNameWithNoSpaces = Template.bind({});
 WithLongNameWithNoSpaces.args = generateProps({
-  color: '',
   text: SERIES_NAME[SERIES_NAME_LONG_WITHOUT_SPACES],
 });
 
@@ -72,6 +71,10 @@ export default {
     },
   },
   argTypes: {
+    type: {
+      control: 'select',
+      options: ['solid', 'dashed'],
+    },
     color: {
       control: 'color',
     },

package/src/components/charts/series_label/series_label.vue

@@ -12,6 +12,9 @@ export default {
       type: String,
       required: false,
       default: 'solid',
+      validator(value) {
+        return ['solid', 'dashed'].indexOf(value) !== -1;
+      },
     },
   },
   data() {

package/src/scss/typescale/typescale.md

@@ -1,5 +1,3 @@
-# Typescale
-
 GitLab UI typescale is an implementation of the Pajamas [typescale specification](https://www.figma.com/file/qEddyqCrI7kPSBjGmwkZzQ/Pajamas-UI-Kit---Beta?node-id=542%3A2).
 
 ## Usage

package/src/scss/typescale/typescale.stories.js

@@ -1,5 +1,4 @@
 import has from 'lodash/has';
-import { documentedStoriesOf } from '../../../documentation/documented_stories';
 import typescaleDocs from './typescale.md';
 import uiTypescaleDemoContent from './typescale_demo.html';
 import uiTypescaleDemoStyles from './typescale_demo.scss';
@@ -33,6 +32,20 @@ const component = {
   template: '<ui-typescale-demo />',
 };
 
-documentedStoriesOf('scss/typescale', typescaleDocs).add('default', () => component, {
-  viewport: { defaultViewport: 'breakpointExtraLarge' },
-});
+export const Default = () => component;
+Default.parameters = {
+  viewport: {
+    defaultViewport: 'breakpointExtraLarge',
+  },
+};
+
+export default {
+  title: 'scss/typescale',
+  parameters: {
+    docs: {
+      description: {
+        component: typescaleDocs,
+      },
+    },
+  },
+};

package/src/utils/use_mock_intersection_observer.js

@@ -1,5 +1,5 @@
 /* global jest, beforeEach, afterEach */
-/* eslint-disable class-methods-use-this, max-classes-per-file, babel/camelcase */
+/* eslint-disable class-methods-use-this, max-classes-per-file, camelcase */
 import { isMatch, isArray } from 'lodash';
 
 /**
@@ -27,7 +27,7 @@ class MockObserver {
 
   takeRecords() {}
 
-  // eslint-disable-next-line babel/camelcase
+  // eslint-disable-next-line camelcase
   $_triggerObserve(nodeParam, { entry = {}, options = {} } = {}) {
     const nodes = this.$_getNodesFromParam(nodeParam);
 
@@ -38,7 +38,7 @@ class MockObserver {
     });
   }
 
-  // eslint-disable-next-line babel/camelcase
+  // eslint-disable-next-line camelcase
   $_hasObserver(node, options = {}) {
     return this.$_observers.some(
       ([obvNode, obvOptions]) => node === obvNode && isMatch(options, obvOptions)

package/dist/components/base/dropdown/dropdown_divider.documentation.js

@@ -1,8 +0,0 @@
-var description = "# Dropdown Divider\n\n<!-- STORY -->\n\n## Usage\n\nThe dropdown divider component is meant to be used for visual dividers inside a dropdown component.\n";
-
-var dropdown_divider_documentation = {
-  description,
-  bootstrapComponent: 'b-dropdown'
-};
-
-export default dropdown_divider_documentation;

package/dist/components/base/dropdown/dropdown_form.documentation.js

@@ -1,17 +0,0 @@
-import examples from './examples';
-
-var dropdown_form = "Unlike `b-dropdown-form`, we do _not_ add any additional padding with the `gl-dropdown-form` component.\nThis is to prevent double padding with `gl-dropdown-item` and similar components, so in most cases\nshouldn't be needed. To add padding, either add a padding utility class to your form, or an inner\nelement with some padding.\n";
-
-var description = /*#__PURE__*/Object.freeze({
-  __proto__: null,
-  'default': dropdown_form
-});
-
-var dropdown_form_documentation = {
-  description,
-  examples,
-  bootstrapComponent: 'b-dropdown-form',
-  propsInfo: {}
-};
-
-export default dropdown_form_documentation;

package/dist/components/base/dropdown/dropdown_section_header.documentation.js

@@ -1,8 +0,0 @@
-var description = "# Dropdown Section Header\n\n<!-- STORY -->\n\n## Usage\n\nThe dropdown section header component is meant to be used for header entries inside a dropdown component.\n";
-
-var dropdown_section_header_documentation = {
-  description,
-  bootstrapComponent: 'b-dropdown'
-};
-
-export default dropdown_section_header_documentation;

package/dist/components/base/dropdown/dropdown_text.documentation.js

@@ -1,8 +0,0 @@
-var description = "# Dropdown Text\n\n<!-- STORY -->\n\n## Usage\n\nThe dropdown text component is meant to be used for text entries inside a dropdown component.\n";
-
-var dropdown_text_documentation = {
-  description,
-  bootstrapComponent: 'b-dropdown'
-};
-
-export default dropdown_text_documentation;

package/dist/components/base/dropdown/examples/dropdown.default.example.js

@@ -1,38 +0,0 @@
-import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
-
-/* script */
-
-/* template */
-var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('gl-dropdown',{attrs:{"text":"Some dropdown"}},[_c('gl-dropdown-item',[_vm._v("First item")]),_vm._v(" "),_c('gl-dropdown-item',[_vm._v("Second item")]),_vm._v(" "),_c('gl-dropdown-item',[_vm._v("Last item")])],1)};
-var __vue_staticRenderFns__ = [];
-
-  /* style */
-  const __vue_inject_styles__ = undefined;
-  /* scoped */
-  const __vue_scope_id__ = undefined;
-  /* module identifier */
-  const __vue_module_identifier__ = undefined;
-  /* functional template */
-  const __vue_is_functional_template__ = false;
-  /* style inject */
-  
-  /* style inject SSR */
-  
-  /* style inject shadow dom */
-  
-
-  
-  const __vue_component__ = __vue_normalize__(
-    { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
-    __vue_inject_styles__,
-    {},
-    __vue_scope_id__,
-    __vue_is_functional_template__,
-    __vue_module_identifier__,
-    false,
-    undefined,
-    undefined,
-    undefined
-  );
-
-export default __vue_component__;

package/dist/components/base/dropdown/examples/dropdown.links.example.js

@@ -1,38 +0,0 @@
-import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
-
-/* script */
-
-/* template */
-var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('gl-dropdown',{attrs:{"text":"Some dropdown"}},[_c('gl-dropdown-item',{attrs:{"href":"https://about.gitlab.com/"}},[_vm._v("First link")]),_vm._v(" "),_c('gl-dropdown-item',{attrs:{"href":"https://about.gitlab.com/"}},[_vm._v("Second link")]),_vm._v(" "),_c('gl-dropdown-item',{attrs:{"href":"https://about.gitlab.com/"}},[_vm._v("Last link")])],1)};
-var __vue_staticRenderFns__ = [];
-
-  /* style */
-  const __vue_inject_styles__ = undefined;
-  /* scoped */
-  const __vue_scope_id__ = undefined;
-  /* module identifier */
-  const __vue_module_identifier__ = undefined;
-  /* functional template */
-  const __vue_is_functional_template__ = false;
-  /* style inject */
-  
-  /* style inject SSR */
-  
-  /* style inject shadow dom */
-  
-
-  
-  const __vue_component__ = __vue_normalize__(
-    { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
-    __vue_inject_styles__,
-    {},
-    __vue_scope_id__,
-    __vue_is_functional_template__,
-    __vue_module_identifier__,
-    false,
-    undefined,
-    undefined,
-    undefined
-  );
-
-export default __vue_component__;

package/dist/components/base/dropdown/examples/dropdown.with_avatar_and_secondary_text.example.js

@@ -1,38 +0,0 @@
-import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
-
-/* script */
-
-/* template */
-var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('gl-dropdown',{attrs:{"text":"Some dropdown"}},[_c('gl-dropdown-item',{attrs:{"avatar-url":"./img/avatar.png","secondary-text":"@sytses"}},[_vm._v("\n    Sid Sijbrandij\n  ")])],1)};
-var __vue_staticRenderFns__ = [];
-
-  /* style */
-  const __vue_inject_styles__ = undefined;
-  /* scoped */
-  const __vue_scope_id__ = undefined;
-  /* module identifier */
-  const __vue_module_identifier__ = undefined;
-  /* functional template */
-  const __vue_is_functional_template__ = false;
-  /* style inject */
-  
-  /* style inject SSR */
-  
-  /* style inject shadow dom */
-  
-
-  
-  const __vue_component__ = __vue_normalize__(
-    { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
-    __vue_inject_styles__,
-    {},
-    __vue_scope_id__,
-    __vue_is_functional_template__,
-    __vue_module_identifier__,
-    false,
-    undefined,
-    undefined,
-    undefined
-  );
-
-export default __vue_component__;

package/dist/components/base/dropdown/examples/dropdown.with_checked_items.example.js

@@ -1,38 +0,0 @@
-import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
-
-/* script */
-
-/* template */
-var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('gl-dropdown',{attrs:{"text":"Some dropdown"}},[_c('gl-dropdown-item',{attrs:{"is-check-item":true,"is-checked":true}},[_vm._v("Checked item")]),_vm._v(" "),_c('gl-dropdown-item',{attrs:{"is-check-item":true}},[_vm._v("Unchecked item")])],1)};
-var __vue_staticRenderFns__ = [];
-
-  /* style */
-  const __vue_inject_styles__ = undefined;
-  /* scoped */
-  const __vue_scope_id__ = undefined;
-  /* module identifier */
-  const __vue_module_identifier__ = undefined;
-  /* functional template */
-  const __vue_is_functional_template__ = false;
-  /* style inject */
-  
-  /* style inject SSR */
-  
-  /* style inject shadow dom */
-  
-
-  
-  const __vue_component__ = __vue_normalize__(
-    { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
-    __vue_inject_styles__,
-    {},
-    __vue_scope_id__,
-    __vue_is_functional_template__,
-    __vue_module_identifier__,
-    false,
-    undefined,
-    undefined,
-    undefined
-  );
-
-export default __vue_component__;

package/dist/components/base/dropdown/examples/dropdown.with_clear_all.example.js

@@ -1,38 +0,0 @@
-import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
-
-/* script */
-
-/* template */
-var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('gl-dropdown',{attrs:{"text":"Some dropdown","show-clear-all":true,"clear-all-text":'Clear all'}},[_c('gl-dropdown-item',[_vm._v("First item")]),_vm._v(" "),_c('gl-dropdown-item',[_vm._v("Second item")]),_vm._v(" "),_c('gl-dropdown-item',[_vm._v("Last item")])],1)};
-var __vue_staticRenderFns__ = [];
-
-  /* style */
-  const __vue_inject_styles__ = undefined;
-  /* scoped */
-  const __vue_scope_id__ = undefined;
-  /* module identifier */
-  const __vue_module_identifier__ = undefined;
-  /* functional template */
-  const __vue_is_functional_template__ = false;
-  /* style inject */
-  
-  /* style inject SSR */
-  
-  /* style inject shadow dom */
-  
-
-  
-  const __vue_component__ = __vue_normalize__(
-    { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
-    __vue_inject_styles__,
-    {},
-    __vue_scope_id__,
-    __vue_is_functional_template__,
-    __vue_module_identifier__,
-    false,
-    undefined,
-    undefined,
-    undefined
-  );
-
-export default __vue_component__;

package/dist/components/base/dropdown/examples/dropdown.with_divider.example.js

@@ -1,38 +0,0 @@
-import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
-
-/* script */
-
-/* template */
-var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('gl-dropdown',{attrs:{"text":"Some dropdown"}},[_c('gl-dropdown-item',[_vm._v("First item")]),_vm._v(" "),_c('gl-dropdown-item',[_vm._v("Second item")]),_vm._v(" "),_c('gl-dropdown-divider'),_vm._v(" "),_c('gl-dropdown-item',[_vm._v("Third item")]),_vm._v(" "),_c('gl-dropdown-item',[_vm._v("Fourth item")])],1)};
-var __vue_staticRenderFns__ = [];
-
-  /* style */
-  const __vue_inject_styles__ = undefined;
-  /* scoped */
-  const __vue_scope_id__ = undefined;
-  /* module identifier */
-  const __vue_module_identifier__ = undefined;
-  /* functional template */
-  const __vue_is_functional_template__ = false;
-  /* style inject */
-  
-  /* style inject SSR */
-  
-  /* style inject shadow dom */
-  
-
-  
-  const __vue_component__ = __vue_normalize__(
-    { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
-    __vue_inject_styles__,
-    {},
-    __vue_scope_id__,
-    __vue_is_functional_template__,
-    __vue_module_identifier__,
-    false,
-    undefined,
-    undefined,
-    undefined
-  );
-
-export default __vue_component__;