@gitlab/ui 38.0.0 → 38.2.0

package/dist/components/base/filtered_search/examples/index.js

@@ -1,32 +0,0 @@
-import FilteredSearchDefaultExample from './filtered_search.default.example';
-import FilteredSearchFriendlyExample from './filtered_search.friendly.example';
-import FilteredSearchHistoryExample from './filtered_search.history.example';
-import FilteredSearchMultiSelectExample from './filtered_search.multi_select.example';
-import FilteredSearchSingleUniqueExample from './filtered_search.single_unique.example';
-
-var index = [{
-  name: 'Filtered search',
-  items: [{
-    id: 'filtered-search',
-    name: 'default',
-    component: FilteredSearchDefaultExample
-  }, {
-    id: 'filtered-search-single-unique',
-    name: 'single-unique',
-    component: FilteredSearchSingleUniqueExample
-  }, {
-    id: 'filtered-search-history',
-    name: 'with-history',
-    component: FilteredSearchHistoryExample
-  }, {
-    id: 'filtered-search-friendly-text',
-    name: 'with-friendly-text',
-    component: FilteredSearchFriendlyExample
-  }, {
-    id: 'filtered-search-multi-select',
-    name: 'with-multi-select',
-    component: FilteredSearchMultiSelectExample
-  }]
-}];
-
-export default index;

package/dist/components/base/form/form_checkbox_tree/examples/form_checkbox_tree.basic.example.js

@@ -1,103 +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-form-checkbox-tree',{attrs:{"value":[1, 11, 12, 121, 122, 2113, 3],"options":[
-    {
-      value: 1,
-      label: 'Felidae',
-      children: [
-        {
-          value: 11,
-          label: 'Lion',
-        },
-        {
-          value: 12,
-          label: 'Felinae',
-          children: [
-            {
-              value: 121,
-              label: 'Cheetah',
-            },
-            {
-              value: 122,
-              label: 'Ocelot',
-            } ],
-        } ],
-    },
-    {
-      value: 2,
-      label: 'Canidae',
-      children: [
-        {
-          value: 21,
-          label: 'Caninae',
-          children: [
-            {
-              value: 211,
-              label: 'Canis lupus',
-              children: [
-                {
-                  value: 2112,
-                  label: 'Wolf',
-                },
-                {
-                  value: 2113,
-                  label: 'Himalayan wolf',
-                },
-                {
-                  value: 2114,
-                  label: 'Dingo',
-                } ],
-            },
-            {
-              value: 212,
-              label: 'Black-backed jackal',
-            } ],
-        },
-        {
-          value: 22,
-          label: 'Fennec fox',
-        } ],
-    },
-    {
-      value: 3,
-      label: 'Karabair',
-    },
-    {
-      value: 4,
-      label: 'Okapi',
-    } ]}})};
-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/form/form_checkbox_tree/examples/index.js

@@ -1,13 +0,0 @@
-import BasicExample from './form_checkbox_tree.basic.example';
-
-var index = [{
-  name: 'Basic',
-  items: [{
-    id: 'form-checkbox-tree-basic',
-    name: 'Basic',
-    description: 'Basic Form Checkbox Tree',
-    component: BasicExample
-  }]
-}];
-
-export default index;

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

@@ -1,6 +0,0 @@
-import description from './dropdown_divider.md';
-
-export default {
-  description,
-  bootstrapComponent: 'b-dropdown',
-};

package/src/components/base/dropdown/dropdown_divider.md

@@ -1,7 +0,0 @@
-# Dropdown Divider
-
-<!-- STORY -->
-
-## Usage
-
-The dropdown divider component is meant to be used for visual dividers inside a dropdown component.

package/src/components/base/dropdown/dropdown_divider.stories.js

@@ -1,16 +0,0 @@
-import { withKnobs } from '@storybook/addon-knobs';
-import { documentedStoriesOf } from '../../../../documentation/documented_stories';
-import { GlDropdownDivider } from '../../../index';
-import readme from './dropdown_divider.md';
-
-const components = {
-  GlDropdownDivider,
-};
-
-documentedStoriesOf('base/dropdown/dropdown-divider', readme)
-  .addDecorator(withKnobs)
-  .add('default', () => ({
-    props: {},
-    components,
-    template: '<ul class="list-unstyled"><gl-dropdown-divider /></ul>',
-  }));

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

@@ -1,9 +0,0 @@
-import * as description from './dropdown_form.md';
-import examples from './examples';
-
-export default {
-  description,
-  examples,
-  bootstrapComponent: 'b-dropdown-form',
-  propsInfo: {},
-};

package/src/components/base/dropdown/dropdown_form.md

@@ -1,4 +0,0 @@
-Unlike `b-dropdown-form`, we do _not_ add any additional padding with the `gl-dropdown-form` component.
-This is to prevent double padding with `gl-dropdown-item` and similar components, so in most cases
-shouldn't be needed. To add padding, either add a padding utility class to your form, or an inner
-element with some padding.

package/src/components/base/dropdown/dropdown_form.stories.js

@@ -1,17 +0,0 @@
-import { withKnobs } from '@storybook/addon-knobs';
-import { documentedStoriesOf } from '../../../../documentation/documented_stories';
-import { GlDropdownForm, GlButton } from '../../../index';
-import readme from './dropdown_form.md';
-
-const components = {
-  GlDropdownForm,
-  GlButton,
-};
-
-documentedStoriesOf('base/dropdown/dropdown-form', readme)
-  .addDecorator(withKnobs)
-  .add('default', () => ({
-    components,
-    template:
-      '<ul class="list-unstyled"><gl-dropdown-form><gl-button>One</gl-button></gl-dropdown-form></ul>',
-  }));

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

@@ -1,6 +0,0 @@
-import description from './dropdown_section_header.md';
-
-export default {
-  description,
-  bootstrapComponent: 'b-dropdown',
-};

package/src/components/base/dropdown/dropdown_section_header.stories.js

@@ -1,17 +0,0 @@
-import { withKnobs } from '@storybook/addon-knobs';
-import { documentedStoriesOf } from '../../../../documentation/documented_stories';
-import { GlDropdownSectionHeader } from '../../../index';
-import readme from './dropdown_section_header.md';
-
-const components = {
-  GlDropdownSectionHeader,
-};
-
-documentedStoriesOf('base/dropdown/dropdown-section-header', readme)
-  .addDecorator(withKnobs)
-  .add('default', () => ({
-    props: {},
-    components,
-    template:
-      '<ul class="list-unstyled"><gl-dropdown-section-header>Some header</gl-dropdown-section-header></ul>',
-  }));

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

@@ -1,6 +0,0 @@
-import description from './dropdown_text.md';
-
-export default {
-  description,
-  bootstrapComponent: 'b-dropdown',
-};

package/src/components/base/dropdown/dropdown_text.stories.js

@@ -1,16 +0,0 @@
-import { withKnobs } from '@storybook/addon-knobs';
-import { documentedStoriesOf } from '../../../../documentation/documented_stories';
-import { GlDropdownText } from '../../../index';
-import readme from './dropdown_text.md';
-
-const components = {
-  GlDropdownText,
-};
-
-documentedStoriesOf('base/dropdown/dropdown-text', readme)
-  .addDecorator(withKnobs)
-  .add('default', () => ({
-    props: {},
-    components,
-    template: '<ul class="list-unstyled"><gl-dropdown-text>Some text</gl-dropdown-text></ul>',
-  }));

package/src/components/base/dropdown/examples/dropdown.default.example.vue

@@ -1,7 +0,0 @@
-<template>
-  <gl-dropdown text="Some dropdown">
-    <gl-dropdown-item>First item</gl-dropdown-item>
-    <gl-dropdown-item>Second item</gl-dropdown-item>
-    <gl-dropdown-item>Last item</gl-dropdown-item>
-  </gl-dropdown>
-</template>

package/src/components/base/dropdown/examples/dropdown.links.example.vue

@@ -1,7 +0,0 @@
-<template>
-  <gl-dropdown text="Some dropdown">
-    <gl-dropdown-item href="https://about.gitlab.com/">First link</gl-dropdown-item>
-    <gl-dropdown-item href="https://about.gitlab.com/">Second link</gl-dropdown-item>
-    <gl-dropdown-item href="https://about.gitlab.com/">Last link</gl-dropdown-item>
-  </gl-dropdown>
-</template>

package/src/components/base/dropdown/examples/dropdown.with_avatar_and_secondary_text.example.vue

@@ -1,7 +0,0 @@
-<template>
-  <gl-dropdown text="Some dropdown">
-    <gl-dropdown-item avatar-url="./img/avatar.png" secondary-text="@sytses">
-      Sid Sijbrandij
-    </gl-dropdown-item>
-  </gl-dropdown>
-</template>

package/src/components/base/dropdown/examples/dropdown.with_checked_items.example.vue

@@ -1,6 +0,0 @@
-<template>
-  <gl-dropdown text="Some dropdown">
-    <gl-dropdown-item :is-check-item="true" :is-checked="true">Checked item</gl-dropdown-item>
-    <gl-dropdown-item :is-check-item="true">Unchecked item</gl-dropdown-item>
-  </gl-dropdown>
-</template>

package/src/components/base/dropdown/examples/dropdown.with_clear_all.example.vue

@@ -1,7 +0,0 @@
-<template>
-  <gl-dropdown text="Some dropdown" :show-clear-all="true" :clear-all-text="'Clear all'">
-    <gl-dropdown-item>First item</gl-dropdown-item>
-    <gl-dropdown-item>Second item</gl-dropdown-item>
-    <gl-dropdown-item>Last item</gl-dropdown-item>
-  </gl-dropdown>
-</template>

package/src/components/base/dropdown/examples/dropdown.with_divider.example.vue

@@ -1,9 +0,0 @@
-<template>
-  <gl-dropdown text="Some dropdown">
-    <gl-dropdown-item>First item</gl-dropdown-item>
-    <gl-dropdown-item>Second item</gl-dropdown-item>
-    <gl-dropdown-divider />
-    <gl-dropdown-item>Third item</gl-dropdown-item>
-    <gl-dropdown-item>Fourth item</gl-dropdown-item>
-  </gl-dropdown>
-</template>

package/src/components/base/dropdown/examples/dropdown.with_form.example.vue

@@ -1,10 +0,0 @@
-<template>
-  <gl-dropdown text="Some dropdown" header-text="Dropdown header">
-    <gl-dropdown-form>
-      <div class="gl-px-4">
-        <gl-button>First item</gl-button>
-        <gl-button>Second item</gl-button>
-      </div>
-    </gl-dropdown-form>
-  </gl-dropdown>
-</template>

package/src/components/base/dropdown/examples/dropdown.with_header.example.vue

@@ -1,7 +0,0 @@
-<template>
-  <gl-dropdown text="Some dropdown" header-text="Dropdown header">
-    <gl-dropdown-section-header>Section header title</gl-dropdown-section-header>
-    <gl-dropdown-item>First item</gl-dropdown-item>
-    <gl-dropdown-item>Second item</gl-dropdown-item>
-  </gl-dropdown>
-</template>

package/src/components/base/dropdown/examples/dropdown.with_highlighted_items.example.vue

@@ -1,9 +0,0 @@
-<template>
-  <gl-dropdown text="Some dropdown">
-    <template #highlighted-items>
-      <gl-dropdown-item>First item</gl-dropdown-item>
-      <gl-dropdown-item>Second item</gl-dropdown-item>
-    </template>
-    <gl-dropdown-item>Last item</gl-dropdown-item>
-  </gl-dropdown>
-</template>

package/src/components/base/dropdown/examples/dropdown.with_icons.example.vue

@@ -1,43 +0,0 @@
-<template>
-  <gl-dropdown text="Some dropdown">
-    <gl-dropdown-item
-      icon-color="info"
-      icon-name="status_running"
-      icon-right-name="retry"
-      icon-right-aria-label="Retry"
-    >
-      Status running
-    </gl-dropdown-item>
-    <gl-dropdown-item
-      icon-color="success"
-      icon-name="status_success"
-      icon-right-name="cancel"
-      icon-right-aria-label="Cancel"
-    >
-      Status success
-    </gl-dropdown-item>
-    <gl-dropdown-item
-      icon-color="warning"
-      icon-name="status_warning"
-      icon-right-name="cancel"
-      icon-right-aria-label="Cancel"
-    >
-      Status warning
-    </gl-dropdown-item>
-    <gl-dropdown-item
-      icon-color="danger"
-      icon-name="status_failed"
-      icon-right-name="cancel"
-      icon-right-aria-label="Cancel"
-    >
-      Status failed
-    </gl-dropdown-item>
-    <gl-dropdown-item
-      icon-name="status_manual"
-      icon-right-name="cancel"
-      icon-right-aria-label="Cancel"
-    >
-      Status manual
-    </gl-dropdown-item>
-  </gl-dropdown>
-</template>

package/src/components/base/dropdown/examples/dropdown.with_right_align.example.vue

@@ -1,7 +0,0 @@
-<template>
-  <gl-dropdown text="Right-aligned dropdown" right>
-    <gl-dropdown-item>First item</gl-dropdown-item>
-    <gl-dropdown-item>Second item</gl-dropdown-item>
-    <gl-dropdown-item>Last item</gl-dropdown-item>
-  </gl-dropdown>
-</template>

package/src/components/base/dropdown/examples/dropdown.with_search.example.vue

@@ -1,38 +0,0 @@
-<script>
-export default {
-  data() {
-    return {
-      searchTerm: '',
-      tagNames: [],
-    };
-  },
-
-  computed: {
-    filteredTagNames() {
-      return this.tagNames.filter((tagName) => tagName.includes(this.searchTerm.toLowerCase()));
-    },
-    filteredTagNamesLength() {
-      return this.filteredTagNames.length === 0;
-    },
-  },
-
-  mounted() {
-    const tagNames = new Set();
-    const elements = document.querySelectorAll('*');
-    elements.forEach((element) => tagNames.add(element.tagName.toLowerCase()));
-    this.tagNames = Array.from(tagNames).sort();
-  },
-};
-</script>
-
-<template>
-  <gl-dropdown text="Select HTML tag" header-text="Header">
-    <template #header>
-      <gl-search-box-by-type v-model.trim="searchTerm" />
-    </template>
-    <gl-dropdown-item v-for="tagName in filteredTagNames" :key="tagName">
-      {{ tagName }}
-    </gl-dropdown-item>
-    <div v-show="filteredTagNamesLength" class="text-secondary p-2">Nothing found…</div>
-  </gl-dropdown>
-</template>

package/src/components/base/dropdown/examples/dropdown.with_section_headers.example.vue

@@ -1,10 +0,0 @@
-<template>
-  <gl-dropdown text="Some dropdown">
-    <gl-dropdown-section-header>First group</gl-dropdown-section-header>
-    <gl-dropdown-item>First item</gl-dropdown-item>
-    <gl-dropdown-item>Second item</gl-dropdown-item>
-    <gl-dropdown-divider />
-    <gl-dropdown-section-header>Second group</gl-dropdown-section-header>
-    <gl-dropdown-item>Last item</gl-dropdown-item>
-  </gl-dropdown>
-</template>

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

@@ -1,99 +0,0 @@
-import DropdownDefaultExample from './dropdown.default.example.vue';
-import DropdownLinksExample from './dropdown.links.example.vue';
-import DropdownWithAvatarAndSecondaryText from './dropdown.with_avatar_and_secondary_text.example.vue';
-import DropdownWithCheckedItemsExample from './dropdown.with_checked_items.example.vue';
-import DropdownClearAllExample from './dropdown.with_clear_all.example.vue';
-import DropdownWithDividerExample from './dropdown.with_divider.example.vue';
-import DropdownWithFormExample from './dropdown.with_form.example.vue';
-import DropdownWithHeaderExample from './dropdown.with_header.example.vue';
-import DropdownWithHighlightedItemsExample from './dropdown.with_highlighted_items.example.vue';
-import DropdownWithIcons from './dropdown.with_icons.example.vue';
-import DropdownWithRightAlignExample from './dropdown.with_right_align.example.vue';
-import DropdownWithSearchExample from './dropdown.with_search.example.vue';
-import DropdownWithSectionHeadersExample from './dropdown.with_section_headers.example.vue';
-
-export default [
-  {
-    name: 'Dropdown',
-    items: [
-      {
-        id: 'new-dropdown-default',
-        name: 'Default',
-        description: 'Default Dropdown',
-        component: DropdownDefaultExample,
-      },
-      {
-        id: 'new-dropdown-links',
-        name: 'With Links',
-        description: 'Dropdown with links as items',
-        component: DropdownLinksExample,
-      },
-      {
-        id: 'new-dropdown-with-divider',
-        name: 'With Divider',
-        description: 'Dropdown with divider',
-        component: DropdownWithDividerExample,
-      },
-      {
-        id: 'new-dropdown-with-header',
-        name: 'With Header',
-        description: 'Dropdown with section header',
-        component: DropdownWithHeaderExample,
-      },
-      {
-        id: 'new-dropdown-with-highlighted-items',
-        name: 'With Highlighted items',
-        description: 'Dropdown with highlighted items',
-        component: DropdownWithHighlightedItemsExample,
-      },
-      {
-        id: 'new-dropdown-with-section-headers',
-        name: 'With Section Headers',
-        description: 'Dropdown with section headers',
-        component: DropdownWithSectionHeadersExample,
-      },
-      {
-        id: 'new-dropdown-with-right-align',
-        name: 'With Right Alignment',
-        description: 'Dropdown aligned to the right side',
-        component: DropdownWithRightAlignExample,
-      },
-      {
-        id: 'new-dropdown-with-search',
-        name: 'With Search',
-        description: 'Dropdown with search field',
-        component: DropdownWithSearchExample,
-      },
-      {
-        id: 'new-dropdown-with-checked-items',
-        name: 'With Checked Items',
-        description: 'Dropdown with checked items',
-        component: DropdownWithCheckedItemsExample,
-      },
-      {
-        id: 'new-dropdown-with-avatar-and-secondary-text',
-        name: 'With Avatar and Secondary Text',
-        description: 'Dropdown with avatar and secondary text',
-        component: DropdownWithAvatarAndSecondaryText,
-      },
-      {
-        id: 'new-dropdown-with-icons',
-        name: 'With Icons',
-        description: 'Dropdown with icons',
-        component: DropdownWithIcons,
-      },
-      {
-        id: 'new-dropdown-with-form',
-        name: 'With Form',
-        description: 'Dropdown with form',
-        component: DropdownWithFormExample,
-      },
-      {
-        id: 'new-dropdown-with-clear-all',
-        name: 'With Clear all',
-        description: 'Dropdown with clear all',
-        component: DropdownClearAllExample,
-      },
-    ],
-  },
-];