@gitlab/ui 37.0.0 → 37.1.0

package/dist/components/charts/legend/examples/legend.basic.example.js

@@ -1,93 +0,0 @@
-import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
-
-var script = {
-  data() {
-    return {
-      chart: null,
-      options: {
-        legend: {
-          show: false
-        },
-        xAxis: {
-          type: 'category',
-          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
-        },
-        yAxis: {
-          type: 'value'
-        },
-        // Generate the series with generateSeriesData() after
-        // https://gitlab.com/gitlab-org/gitlab-ui/-/issues/754
-        // gets implemented
-        series: [{
-          color: '#1f75cb',
-          data: [820, 932, 960, 1150, 1290, 1330, 1390],
-          name: 'Series 1',
-          showSymbol: true,
-          type: 'line'
-        }, {
-          color: '#108548',
-          data: [1640, 1864, 1920, 2300, 2580, 2660, 2780],
-          name: 'Series 2',
-          showSymbol: true,
-          type: 'line'
-        }]
-      }
-    };
-  },
-
-  computed: {
-    seriesData() {
-      return this.options.series.map(series => ({
-        type: 'solid',
-        name: series.name,
-        color: series.color,
-        data: series.data
-      }));
-    }
-
-  },
-  methods: {
-    onCreated(chart) {
-      this.chart = chart;
-    }
-
-  }
-};
-
-/* script */
-const __vue_script__ = script;
-
-/* template */
-var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',[_c('gl-chart',{attrs:{"options":_vm.options},on:{"created":_vm.onCreated}}),_vm._v(" "),(_vm.chart)?_c('gl-chart-legend',{attrs:{"chart":_vm.chart,"series-info":_vm.seriesData}}):_vm._e()],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_script__,
-    __vue_scope_id__,
-    __vue_is_functional_template__,
-    __vue_module_identifier__,
-    false,
-    undefined,
-    undefined,
-    undefined
-  );
-
-export default __vue_component__;

package/dist/components/charts/legend/examples/legend.toggled.example.js

@@ -1,100 +0,0 @@
-import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
-
-var script = {
-  data() {
-    return {
-      chart: null,
-      options: {
-        legend: {
-          show: false
-        },
-        xAxis: {
-          type: 'category',
-          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
-        },
-        yAxis: {
-          type: 'value'
-        },
-        // Generate the series with generateSeriesData() after
-        // https://gitlab.com/gitlab-org/gitlab-ui/-/issues/754
-        // gets implemented
-        series: [{
-          color: '#1f75cb',
-          data: [820, 932, 960, 1150, 1290, 1330, 1390],
-          name: 'Toggled Series 1',
-          showSymbol: true,
-          type: 'line'
-        }, {
-          color: '#108548',
-          data: [1640, 1864, 1920, 2300, 2580, 2660, 2780],
-          name: 'Series 2',
-          showSymbol: true,
-          type: 'line'
-        }]
-      }
-    };
-  },
-
-  computed: {
-    seriesData() {
-      return this.options.series.map(series => ({
-        type: 'solid',
-        name: series.name,
-        color: series.color,
-        data: series.data
-      }));
-    }
-
-  },
-
-  mounted() {
-    this.$nextTick(() => {
-      document.querySelector('#js-chart-legend [role=button]').click();
-    });
-  },
-
-  methods: {
-    onCreated(chart) {
-      this.chart = chart;
-    }
-
-  }
-};
-
-/* script */
-const __vue_script__ = script;
-
-/* template */
-var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',[_c('gl-chart',{attrs:{"options":_vm.options},on:{"created":_vm.onCreated}}),_vm._v(" "),(_vm.chart)?_c('gl-chart-legend',{attrs:{"id":"js-chart-legend","chart":_vm.chart,"series-info":_vm.seriesData}}):_vm._e()],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_script__,
-    __vue_scope_id__,
-    __vue_is_functional_template__,
-    __vue_module_identifier__,
-    false,
-    undefined,
-    undefined,
-    undefined
-  );
-
-export default __vue_component__;

package/dist/components/charts/legend/legend.documentation.js

@@ -1,21 +0,0 @@
-import examples from './examples';
-
-var description = "";
-
-var legend_documentation = {
-  description,
-  examples,
-  propsInfo: {
-    averageText: {
-      additionalInfo: 'Text for data average (overridden by prop if needed for internationalization)'
-    },
-    maxText: {
-      additionalInfo: 'Text for max amount (overridden by prop if needed for internationalization)'
-    },
-    layout: {
-      additionalInfo: 'Sets the display layout'
-    }
-  }
-};
-
-export default legend_documentation;

package/src/components/base/tabs/tab/examples/index.js

@@ -1,15 +0,0 @@
-import BasicTabExample from './tab.basic.example.vue';
-
-export default [
-  {
-    name: 'Basic',
-    items: [
-      {
-        id: 'tab-basic',
-        name: 'Basic',
-        description: 'Basic Tab',
-        component: BasicTabExample,
-      },
-    ],
-  },
-];

package/src/components/base/tabs/tab/examples/tab.basic.example.vue

@@ -1,5 +0,0 @@
-<template>
-  <gl-tabs>
-    <gl-tab title="First">first content</gl-tab>
-  </gl-tabs>
-</template>

package/src/components/base/tabs/tab/tab.documentation.js

@@ -1,16 +0,0 @@
-import examples from './examples';
-import description from './tab.md';
-
-export default {
-  description,
-  examples,
-  bootstrapComponent: 'b-tab',
-  followsDesignSystem: true,
-  propsInfo: {
-    queryParamValue: {
-      additionalInfo:
-        'Query string parameter value to use when `gl-tabs` `sync-active-tab-with-query-params` prop is set to `true`.',
-      type: String,
-    },
-  },
-};

package/src/components/base/tabs/tab/tab.md

@@ -1,3 +0,0 @@
-### GlTab Component cannot be used alone
-
-It must be used with `tabs` as the parent

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

@@ -1,12 +0,0 @@
-import { documentedStoriesOf } from '../../../../../documentation/documented_stories';
-
-const template = `
-  <div>
-    <h3>The Tab component should not be used on its own</h3>
-    <p><code>&lt;gl-tab /&gt;</code> can only be used with <code>&lt;gl-tabs /&gt;</code> as the immediate parent</p>
-  </div>
-`;
-
-documentedStoriesOf('base/tabs/tab', '').add('default', () => ({
-  template,
-}));

package/src/components/base/tabs/tabs/examples/index.js

@@ -1,72 +0,0 @@
-import BasicTabsExample from './tabs.basic.example.vue';
-import ContentlessTabExample from './tabs.contentless_tab.example.vue';
-import TabsWithCounterBadgesExample from './tabs.counterbadges.example.vue';
-import CustomTitleExample from './tabs.custom_title.example.vue';
-import DisabledTabExample from './tabs.disabled.example.vue';
-import JustifiedTabsExample from './tabs.justified.example.vue';
-import NoTabsExample from './tabs.no_tabs.example.vue';
-import TabsScrollableExample from './tabs.scrollable.example.vue';
-import TabsStylesOnlyExample from './tabs.styles_only.example.vue';
-
-export default [
-  {
-    name: 'Basic',
-    items: [
-      {
-        id: 'tabs-basic',
-        name: 'Basic',
-        description: 'Basic Tabs',
-        component: BasicTabsExample,
-      },
-      {
-        id: 'tabs-disabled',
-        name: 'Disabled',
-        description: 'Disabled Tab',
-        component: DisabledTabExample,
-      },
-      {
-        id: 'tabs-custom-title',
-        name: 'Custom Title',
-        description: 'Custom Title Tab',
-        component: CustomTitleExample,
-      },
-      {
-        id: 'tabs-contentless-tab',
-        name: 'Contentless Tab',
-        description: 'Contentless Tab',
-        component: ContentlessTabExample,
-      },
-      {
-        id: 'tabs-no-tabs',
-        name: 'Empty state when no tabs',
-        description: 'Empty state/content for when there are no tabs',
-        component: NoTabsExample,
-      },
-      {
-        id: 'tabs-with-counter-badges',
-        name: 'Tabs with counter badges',
-        component: TabsWithCounterBadgesExample,
-      },
-      {
-        id: 'tabs-styles-only',
-        name: 'Tabs styles only',
-        component: TabsStylesOnlyExample,
-      },
-      {
-        id: 'justified-tabs',
-        name: 'Justified tabs',
-        component: JustifiedTabsExample,
-      },
-    ],
-  },
-  {
-    name: 'Scrollable',
-    items: [
-      {
-        id: 'tabs-scrollable',
-        name: 'Scrollable tabs with lots of tabs',
-        component: TabsScrollableExample,
-      },
-    ],
-  },
-];

package/src/components/base/tabs/tabs/examples/tabs.basic.example.vue

@@ -1,6 +0,0 @@
-<template>
-  <gl-tabs>
-    <gl-tab title="Tab 1">Tab panel 1</gl-tab>
-    <gl-tab title="Tab 2">Tab panel 2</gl-tab>
-  </gl-tabs>
-</template>

package/src/components/base/tabs/tabs/examples/tabs.contentless_tab.example.vue

@@ -1,17 +0,0 @@
-<template>
-  <gl-tabs>
-    <gl-tab title="Regular tab">
-      <p>Regular tab content.</p>
-      <p>
-        The contentless tab is not selectable, as it has no content. This is useful for displaying
-        things that aren't really tabs after the list of tabs.
-      </p>
-    </gl-tab>
-    <gl-tab title="Another tab">
-      <p>Another tab's content.</p>
-    </gl-tab>
-    <template #tabs-end>
-      <li class="nav-item align-self-center">Contentless tab</li>
-    </template>
-  </gl-tabs>
-</template>

package/src/components/base/tabs/tabs/examples/tabs.counterbadges.example.vue

@@ -1,28 +0,0 @@
-<template>
-  <gl-tabs>
-    <gl-tab>
-      <template #title>
-        <span>Tab</span>
-        <gl-badge size="sm" class="gl-tab-counter-badge">500</gl-badge>
-        <span class="sr-only">items</span>
-      </template>
-      Tab panel 1
-    </gl-tab>
-    <gl-tab>
-      <template #title>
-        <span>Tab</span>
-        <gl-badge size="sm" class="gl-tab-counter-badge">250</gl-badge>
-        <span class="sr-only">items</span>
-      </template>
-      Tab panel 2
-    </gl-tab>
-    <gl-tab>
-      <template #title>
-        <span>Tab</span>
-        <gl-badge size="sm" class="gl-tab-counter-badge">250</gl-badge>
-        <span class="sr-only">items</span>
-      </template>
-      Tab panel 3
-    </gl-tab>
-  </gl-tabs>
-</template>

package/src/components/base/tabs/tabs/examples/tabs.custom_title.example.vue

@@ -1,9 +0,0 @@
-<template>
-  <gl-tabs>
-    <gl-tab title="Tab 1">
-      <template #title><i>custom</i> <strong>Title</strong></template>
-      Tab panel 1
-    </gl-tab>
-    <gl-tab title="Tab 2">Tab panel 2</gl-tab>
-  </gl-tabs>
-</template>

package/src/components/base/tabs/tabs/examples/tabs.disabled.example.vue

@@ -1,7 +0,0 @@
-<template>
-  <gl-tabs>
-    <gl-tab title="Tab 1">Tab panel 1</gl-tab>
-    <gl-tab title="Tab 2">Tab panel 2</gl-tab>
-    <gl-tab title="Tab 3" disabled>Disabled tab panel</gl-tab>
-  </gl-tabs>
-</template>

package/src/components/base/tabs/tabs/examples/tabs.justified.example.vue

@@ -1,6 +0,0 @@
-<template>
-  <gl-tabs justified>
-    <gl-tab title="Tab 1">Tab panel 1</gl-tab>
-    <gl-tab title="Tab 2">Tab panel 2</gl-tab>
-  </gl-tabs>
-</template>

package/src/components/base/tabs/tabs/examples/tabs.no_tabs.example.vue

@@ -1,8 +0,0 @@
-<template>
-  <gl-tabs>
-    <template #empty>
-      This content is only displayed when there are no tabs. Useful for dynamically added/removed
-      tabs.
-    </template>
-  </gl-tabs>
-</template>

package/src/components/base/tabs/tabs/examples/tabs.scrollable.example.vue

@@ -1,20 +0,0 @@
-<script>
-export default {
-  tabs: Array(20)
-    .fill(1)
-    .map((_, index) => index + 1)
-    .map((id) => ({
-      id,
-      title: `Tab ${id}`,
-      content: `Tab panel ${id} content...`,
-    })),
-};
-</script>
-
-<template>
-  <gl-scrollable-tabs>
-    <gl-tab v-for="tab in $options.tabs" :key="tab.id" :title="tab.title">
-      {{ tab.content }}
-    </gl-tab>
-  </gl-scrollable-tabs>
-</template>

package/src/components/base/tabs/tabs/examples/tabs.styles_only.example.vue

@@ -1,22 +0,0 @@
-<template>
-  <div class="tabs gl-tabs">
-    <ul role="tablist" class="nav gl-tabs-nav">
-      <li role="presentation" class="nav-item">
-        <a
-          role="tab"
-          target="_self"
-          href="#"
-          class="nav-link gl-tab-nav-item gl-tab-nav-item-active gl-tab-nav-item-active-indigo"
-          >Tab 1</a
-        >
-      </li>
-      <li role="presentation" class="nav-item">
-        <a role="tab" target="_self" href="#" class="nav-link gl-tab-nav-item">Tab 2</a>
-      </li>
-    </ul>
-    <div class="tab-content gl-tab-content">
-      <div role="tabpanel" class="tab-pane active">Tab panel 1</div>
-      <div role="tabpanel" class="tab-pane">Tab panel 2</div>
-    </div>
-  </div>
-</template>

package/src/components/charts/legend/examples/index.js

@@ -1,27 +0,0 @@
-import LegendBasicExample from './legend.basic.example.vue';
-import LegendToggledExample from './legend.toggled.example.vue';
-
-export default [
-  {
-    name: 'Basic',
-    items: [
-      {
-        id: 'chart-legend-basic',
-        name: 'Basic',
-        description: 'Basic Chart Legend',
-        component: LegendBasicExample,
-      },
-    ],
-  },
-  {
-    name: 'Toggled',
-    items: [
-      {
-        id: 'chart-legend-toggled',
-        name: 'Toggled',
-        description: 'Toggled Chart Legend',
-        component: LegendToggledExample,
-      },
-    ],
-  },
-];

package/src/components/charts/legend/examples/legend.basic.example.vue

@@ -1,55 +0,0 @@
-<script>
-export default {
-  data() {
-    return {
-      chart: null,
-      options: {
-        legend: { show: false },
-        xAxis: { type: 'category', data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] },
-        yAxis: { type: 'value' },
-        // Generate the series with generateSeriesData() after
-        // https://gitlab.com/gitlab-org/gitlab-ui/-/issues/754
-        // gets implemented
-        series: [
-          {
-            color: '#1f75cb',
-            data: [820, 932, 960, 1150, 1290, 1330, 1390],
-            name: 'Series 1',
-            showSymbol: true,
-            type: 'line',
-          },
-          {
-            color: '#108548',
-            data: [1640, 1864, 1920, 2300, 2580, 2660, 2780],
-            name: 'Series 2',
-            showSymbol: true,
-            type: 'line',
-          },
-        ],
-      },
-    };
-  },
-  computed: {
-    seriesData() {
-      return this.options.series.map((series) => ({
-        type: 'solid',
-        name: series.name,
-        color: series.color,
-        data: series.data,
-      }));
-    },
-  },
-  methods: {
-    onCreated(chart) {
-      this.chart = chart;
-    },
-  },
-};
-</script>
-
-<template>
-  <div>
-    <gl-chart :options="options" @created="onCreated" />
-    <gl-chart-legend v-if="chart" :chart="chart" :series-info="seriesData" />
-  </div>
-</template>

package/src/components/charts/legend/examples/legend.toggled.example.vue

@@ -1,60 +0,0 @@
-<script>
-export default {
-  data() {
-    return {
-      chart: null,
-      options: {
-        legend: { show: false },
-        xAxis: { type: 'category', data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] },
-        yAxis: { type: 'value' },
-        // Generate the series with generateSeriesData() after
-        // https://gitlab.com/gitlab-org/gitlab-ui/-/issues/754
-        // gets implemented
-        series: [
-          {
-            color: '#1f75cb',
-            data: [820, 932, 960, 1150, 1290, 1330, 1390],
-            name: 'Toggled Series 1',
-            showSymbol: true,
-            type: 'line',
-          },
-          {
-            color: '#108548',
-            data: [1640, 1864, 1920, 2300, 2580, 2660, 2780],
-            name: 'Series 2',
-            showSymbol: true,
-            type: 'line',
-          },
-        ],
-      },
-    };
-  },
-  computed: {
-    seriesData() {
-      return this.options.series.map((series) => ({
-        type: 'solid',
-        name: series.name,
-        color: series.color,
-        data: series.data,
-      }));
-    },
-  },
-  mounted() {
-    this.$nextTick(() => {
-      document.querySelector('#js-chart-legend [role=button]').click();
-    });
-  },
-  methods: {
-    onCreated(chart) {
-      this.chart = chart;
-    },
-  },
-};
-</script>
-
-<template>
-  <div>
-    <gl-chart :options="options" @created="onCreated" />
-    <gl-chart-legend v-if="chart" id="js-chart-legend" :chart="chart" :series-info="seriesData" />
-  </div>
-</template>

package/src/components/charts/legend/legend.documentation.js

@@ -1,19 +0,0 @@
-import examples from './examples';
-import description from './legend.md';
-
-export default {
-  description,
-  examples,
-  propsInfo: {
-    averageText: {
-      additionalInfo:
-        'Text for data average (overridden by prop if needed for internationalization)',
-    },
-    maxText: {
-      additionalInfo: 'Text for max amount (overridden by prop if needed for internationalization)',
-    },
-    layout: {
-      additionalInfo: 'Sets the display layout',
-    },
-  },
-};