@gitlab/ui 32.46.0 → 32.50.0

package/dist/components/utilities/intersperse/examples/index.js

@@ -1,31 +0,0 @@
-import IntersperseCustomLastSeparator from './intersperse.custom_last_separator.example';
-import IntersperseCustomLastSeparatorTwoItems from './intersperse.custom_last_separator_two_items.example';
-import IntersperseCustomSeparator from './intersperse.custom_separator.example';
-import Intersperse from './intersperse.default.example';
-
-var index = [{
-  name: 'Basic',
-  items: [{
-    id: 'intersperse-default',
-    name: 'Default Intersperse',
-    description: 'Default intersperse usage',
-    component: Intersperse
-  }, {
-    id: 'intersperse-custom-separator',
-    name: 'Intersperse with custom separator',
-    description: 'Set a custom separator',
-    component: IntersperseCustomSeparator
-  }, {
-    id: 'intersperse-custom-last-separator',
-    name: 'Intersperse with custom last separator',
-    description: 'Set a custom last separator',
-    component: IntersperseCustomLastSeparator
-  }, {
-    id: 'intersperse-custom-last-separator-two-items',
-    name: 'Intersperse with custom last separator and two items',
-    description: 'Set a custom last separator on two items',
-    component: IntersperseCustomLastSeparatorTwoItems
-  }]
-}];
-
-export default index;

package/dist/components/utilities/intersperse/examples/intersperse.custom_last_separator.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-intersperse',{attrs:{"last-separator":" and "}},[_c('span',[_vm._v("Item 1")]),_vm._v(" "),_c('span',[_vm._v("Item 2")]),_vm._v(" "),_c('span',[_vm._v("Item 3")])])};
-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/utilities/intersperse/examples/intersperse.custom_last_separator_two_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-intersperse',{attrs:{"last-separator":" and "}},[_c('span',[_vm._v("Item 1")]),_vm._v(" "),_c('span',[_vm._v("Item 2")])])};
-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/utilities/intersperse/examples/intersperse.custom_separator.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-intersperse',{attrs:{"separator":"/"}},[_c('span',[_vm._v("Item 1")]),_vm._v(" "),_c('span',[_vm._v("Item 2")]),_vm._v(" "),_c('span',[_vm._v("Item 3")])])};
-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/utilities/intersperse/examples/intersperse.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-intersperse',[_c('span',[_vm._v("Item 1")]),_vm._v(" "),_c('span',[_vm._v("Item 2")]),_vm._v(" "),_c('span',[_vm._v("Item 3")])])};
-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/src/components/base/avatar_labeled/examples/avatar.labeled.example.vue

@@ -1,8 +0,0 @@
-<template>
-  <gl-avatar-labeled
-    :size="32"
-    src="https://assets.gitlab-static.net/uploads/-/system/group/avatar/9970/logo-extra-whitespace.png?width=64"
-    label="GitLab User"
-    sub-label="gitlab"
-  />
-</template>

package/src/components/base/avatar_labeled/examples/avatar.labeled_badges.example.vue

@@ -1,17 +0,0 @@
-<template>
-  <gl-avatar-labeled
-    :size="32"
-    src="https://assets.gitlab-static.net/uploads/-/system/group/avatar/9970/logo-extra-whitespace.png?width=64"
-    label="GitLab User"
-    sub-label="gitlab"
-  >
-    <template #meta>
-      <div class="gl-p-1">
-        <gl-badge class="gl-display-flex!" size="sm" variant="info">2FA</gl-badge>
-      </div>
-      <div class="gl-p-1">
-        <gl-badge class="gl-display-flex!" size="sm" variant="danger">Blocked</gl-badge>
-      </div>
-    </template>
-  </gl-avatar-labeled>
-</template>

package/src/components/base/avatar_labeled/examples/avatar.labeled_links.example.vue

@@ -1,10 +0,0 @@
-<template>
-  <gl-avatar-labeled
-    :size="32"
-    src="https://assets.gitlab-static.net/uploads/-/system/group/avatar/9970/logo-extra-whitespace.png?width=64"
-    label="GitLab User"
-    sub-label="gitlab@example.com"
-    label-link="#"
-    sub-label-link="mailto:#"
-  />
-</template>

package/src/components/base/avatar_labeled/examples/avatar.labeled_tooltip.example.vue

@@ -1,10 +0,0 @@
-<template>
-  <gl-avatar-labeled
-    v-gl-tooltip="{ placement: 'bottom' }"
-    :size="32"
-    src="https://assets.gitlab-static.net/uploads/-/system/group/avatar/9970/logo-extra-whitespace.png?width=64"
-    label="GitLab User"
-    sub-label="gitlab"
-    title="Avatar labeled with tooltip"
-  />
-</template>

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

@@ -1,36 +0,0 @@
-import AvatarLabeledExample from './avatar.labeled.example.vue';
-import AvatarLabeledBadgesExample from './avatar.labeled_badges.example.vue';
-import AvatarLabeledSlotsExample from './avatar.labeled_links.example.vue';
-import AvatarLabeledTooltipExample from './avatar.labeled_tooltip.example.vue';
-
-export default [
-  {
-    name: 'Basic',
-    items: [
-      {
-        id: 'avatar-labeled',
-        name: 'Avatar Labeled',
-        description: 'Avatar with text labels',
-        component: AvatarLabeledExample,
-      },
-      {
-        id: 'avatar-labeled-tooltip',
-        name: 'With tooltip',
-        description: 'Avatar labeled with tooltip',
-        component: AvatarLabeledTooltipExample,
-      },
-      {
-        id: 'avatar-labeled-badges',
-        name: 'With badges',
-        description: 'Avatar labeled with badges',
-        component: AvatarLabeledBadgesExample,
-      },
-      {
-        id: 'avatar-labeled-links',
-        name: 'With label links',
-        description: 'Avatar labeled with links',
-        component: AvatarLabeledSlotsExample,
-      },
-    ],
-  },
-];

package/src/components/base/avatars_inline/examples/avatars.inline.example.vue

@@ -1,18 +0,0 @@
-<script>
-export default {
-  data() {
-    return {
-      avatars: [
-        { src: 'https://picsum.photos/id/1005/24' },
-        { src: 'https://picsum.photos/id/1006/24' },
-        { src: 'https://picsum.photos/id/1009/24' },
-        { src: 'https://picsum.photos/id/1011/24' },
-        { src: 'https://picsum.photos/id/1012/24' },
-      ],
-    };
-  },
-};
-</script>
-<template>
-  <gl-avatars-inline :avatars="avatars" :collapsed="true" :avatar-size="24" :max-visible="2" />
-</template>

package/src/components/base/avatars_inline/examples/avatars.inline_large.example.vue

@@ -1,18 +0,0 @@
-<script>
-export default {
-  data() {
-    return {
-      avatars: [
-        { src: 'https://picsum.photos/id/1005/32' },
-        { src: 'https://picsum.photos/id/1006/32' },
-        { src: 'https://picsum.photos/id/1009/32' },
-        { src: 'https://picsum.photos/id/1011/32' },
-        { src: 'https://picsum.photos/id/1012/32' },
-      ],
-    };
-  },
-};
-</script>
-<template>
-  <gl-avatars-inline :avatars="avatars" :collapsed="true" :avatar-size="32" :max-visible="2" />
-</template>

package/src/components/base/avatars_inline/examples/avatars.inline_links_and_tooltips.example.vue

@@ -1,24 +0,0 @@
-<script>
-export default {
-  data() {
-    return {
-      avatars: [
-        { src: 'https://picsum.photos/id/1005/32', tooltip: 'Avatar 1', href: '//gitlab.com' },
-        { src: 'https://picsum.photos/id/1006/32', tooltip: 'Avatar 2', href: '//gitlab.com' },
-        { src: 'https://picsum.photos/id/1009/32', tooltip: 'Avatar 3', href: '//gitlab.com' },
-        { src: 'https://picsum.photos/id/1011/32', tooltip: 'Avatar 4', href: '//gitlab.com' },
-        { src: 'https://picsum.photos/id/1012/32', tooltip: 'Avatar 5', href: '//gitlab.com' },
-      ],
-    };
-  },
-};
-</script>
-<template>
-  <gl-avatars-inline :avatars="avatars" :collapsed="true" :avatar-size="32" :max-visible="2">
-    <template #avatar="{ avatar }">
-      <gl-avatar-link v-gl-tooltip target="blank" :href="avatar.href" :title="avatar.tooltip">
-        <gl-avatar :src="avatar.src" :size="32" />
-      </gl-avatar-link>
-    </template>
-  </gl-avatars-inline>
-</template>

package/src/components/base/avatars_inline/examples/avatars.inline_links_and_tooltips_badge.example.vue

@@ -1,31 +0,0 @@
-<script>
-export default {
-  data() {
-    return {
-      avatars: [
-        { src: 'https://picsum.photos/id/1005/32', tooltip: 'Avatar 1', href: '//gitlab.com' },
-        { src: 'https://picsum.photos/id/1006/32', tooltip: 'Avatar 2', href: '//gitlab.com' },
-        { src: 'https://picsum.photos/id/1009/32', tooltip: 'Avatar 3', href: '//gitlab.com' },
-        { src: 'https://picsum.photos/id/1011/32', tooltip: 'Avatar 4', href: '//gitlab.com' },
-        { src: 'https://picsum.photos/id/1012/32', tooltip: 'Avatar 5', href: '//gitlab.com' },
-      ],
-    };
-  },
-};
-</script>
-<template>
-  <gl-avatars-inline
-    :avatars="avatars"
-    :collapsed="true"
-    :avatar-size="32"
-    :max-visible="2"
-    badge-tooltip-prop="tooltip"
-    :badge-tooltip-max-chars="20"
-  >
-    <template #avatar="{ avatar }">
-      <gl-avatar-link v-gl-tooltip target="_blank" :href="avatar.href" :title="avatar.tooltip">
-        <gl-avatar :src="avatar.src" :size="32" />
-      </gl-avatar-link>
-    </template>
-  </gl-avatars-inline>
-</template>

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

@@ -1,36 +0,0 @@
-import AvatarsInlineExample from './avatars.inline.example.vue';
-import AvatarsInlineLargeExample from './avatars.inline_large.example.vue';
-import AvatarsInlineLinksAndTooltipsExample from './avatars.inline_links_and_tooltips.example.vue';
-import AvatarsInlineLinksAndTooltipsBadgeExample from './avatars.inline_links_and_tooltips_badge.example.vue';
-
-export default [
-  {
-    name: 'Basic',
-    items: [
-      {
-        id: 'avatars-inline',
-        name: 'Avatars Inline',
-        description: 'Inline Avatars',
-        component: AvatarsInlineExample,
-      },
-      {
-        id: 'avatars-inline-large',
-        name: 'Avatars Inline Large',
-        description: 'Inline Avatars Large',
-        component: AvatarsInlineLargeExample,
-      },
-      {
-        id: 'avatars-inline-links-and-tooltips',
-        name: 'Avatars inline with links and tooltips',
-        description: 'Inline Avatars with Links and Tooltips',
-        component: AvatarsInlineLinksAndTooltipsExample,
-      },
-      {
-        id: 'avatars-inline-links-and-tooltips-badge',
-        name: 'Avatars inline with tooltip on badge',
-        description: 'Inline Avatars with Tooltip on Badge',
-        component: AvatarsInlineLinksAndTooltipsBadgeExample,
-      },
-    ],
-  },
-];

package/src/components/base/form/form_combobox/examples/form_combobox.basic.example.vue

@@ -1,31 +0,0 @@
-<script>
-export default {
-  tokens: [
-    'giraffe',
-    'dog',
-    'dodo',
-    'komodo dragon',
-    'hippo',
-    'platypus',
-    'jackalope',
-    'quetzal',
-    'badger',
-    'vicuña',
-    'whale',
-    'xenarthra',
-  ],
-  data() {
-    return {
-      inputVal: '',
-    };
-  },
-};
-</script>
-
-<template>
-  <gl-form-combobox
-    v-model="inputVal"
-    :token-list="$options.tokens"
-    label-text="Animals We Tolerate"
-  />
-</template>

package/src/components/base/form/form_combobox/examples/index.js

@@ -1,15 +0,0 @@
-import BasicExample from './form_combobox.basic.example.vue';
-
-export default [
-  {
-    name: 'Basic',
-    items: [
-      {
-        id: 'form-combobox-basic',
-        name: 'Basic',
-        description: 'Basic Combobox',
-        component: BasicExample,
-      },
-    ],
-  },
-];

package/src/components/base/form/form_radio/examples/form_radio.basic.example.vue

@@ -1,16 +0,0 @@
-<script>
-export default {
-  data() {
-    return {
-      selected: 'one',
-    };
-  },
-};
-</script>
-
-<template>
-  <div>
-    <gl-form-radio v-model="selected" value="one">One</gl-form-radio>
-    <gl-form-radio v-model="selected" value="two">Two</gl-form-radio>
-  </div>
-</template>

package/src/components/base/form/form_radio/examples/form_radio.checked_disabled.example.vue

@@ -1,13 +0,0 @@
-<script>
-export default {
-  data() {
-    return {
-      checked: 'foo',
-    };
-  },
-};
-</script>
-
-<template>
-  <gl-form-radio v-model="checked" value="foo" disabled>Disabled and checked</gl-form-radio>
-</template>

package/src/components/base/form/form_radio/examples/index.js

@@ -1,22 +0,0 @@
-import FormRadioBasic from './form_radio.basic.example.vue';
-import FormRadioCheckedDisabled from './form_radio.checked_disabled.example.vue';
-
-export default [
-  {
-    name: 'Basic',
-    items: [
-      {
-        id: 'form-radio-basic',
-        name: 'Basic',
-        description: 'Basic GlFormRadio',
-        component: FormRadioBasic,
-      },
-      {
-        id: 'form-radio-checked-disabled',
-        name: 'Checked and disabled radio',
-        description: 'Checked and disabled GlFormRadio',
-        component: FormRadioCheckedDisabled,
-      },
-    ],
-  },
-];

package/src/components/base/form/input_group_text/examples/index.js

@@ -1,15 +0,0 @@
-import BasicExample from './input_group_text.basic.example.vue';
-
-export default [
-  {
-    name: 'Basic',
-    items: [
-      {
-        id: 'input-group-text-basic',
-        name: 'Basic',
-        description: 'Basic Input Group Text',
-        component: BasicExample,
-      },
-    ],
-  },
-];

package/src/components/base/form/input_group_text/examples/input_group_text.basic.example.vue

@@ -1,3 +0,0 @@
-<template>
-  <gl-input-group-text>Some text</gl-input-group-text>
-</template>

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

@@ -1,43 +0,0 @@
-import BasicExample from './keyset_pagination.basic.example.vue';
-import EventsExample from './keyset_pagination.events.example.vue';
-import I18nExample from './keyset_pagination.internationalization.example.vue';
-import LinksExample from './keyset_pagination.links.example.vue';
-import SlotsExample from './keyset_pagination.slots.example.vue';
-
-export default [
-  {
-    name: 'Usage examples',
-    items: [
-      {
-        id: 'keyset-pagination-basic',
-        name: 'Basic',
-        description: 'Basic Cursor Pagination',
-        component: BasicExample,
-      },
-      {
-        id: 'keyset-pagination-slots',
-        name: 'Custom button slots',
-        description: 'Custom "Prev" or "Next" button content',
-        component: SlotsExample,
-      },
-      {
-        id: 'keyset-pagination-links',
-        name: 'Link buttons',
-        description: '"Prev" and "Next" buttons as link buttons',
-        component: LinksExample,
-      },
-      {
-        id: 'keyset-pagination-events',
-        name: 'Button events',
-        description: '"prev" and "next" events',
-        component: EventsExample,
-      },
-      {
-        id: 'keyset-pagination-i18n',
-        name: 'Internationalization',
-        description: 'Internationalizing the "Prev" and "Next" button text',
-        component: I18nExample,
-      },
-    ],
-  },
-];

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

@@ -1,16 +0,0 @@
-<script>
-export default {
-  data() {
-    return {
-      pageInfo: {
-        hasPreviousPage: true,
-        hasNextPage: true,
-      },
-    };
-  },
-};
-</script>
-
-<template>
-  <gl-keyset-pagination v-bind="pageInfo" />
-</template>

package/src/components/base/keyset_pagination/examples/keyset_pagination.events.example.vue

@@ -1,29 +0,0 @@
-<script>
-/* eslint-disable no-alert */
-export default {
-  data() {
-    return {
-      pageInfo: {
-        startCursor:
-          'eyJpZCI6IjE3NTg1ODciLCJyZWxlYXNlZF9hdCI6IjIwMjAtMDgtMjAgMTQ6NDc6MDguNTQ1MjE1MDAwIFVUQyJ9',
-        endCursor:
-          'eyJpZCI6IjEyNjcxNzkiLCJyZWxlYXNlZF9hdCI6IjIwMjAtMDItMTkgMjE6MDA6MDUuODU5NTQ2MDAwIFVUQyJ9',
-        hasPreviousPage: true,
-        hasNextPage: true,
-      },
-    };
-  },
-  methods: {
-    onPrev(startCursor) {
-      alert(`"prev" event fired with start cursor: "${startCursor}"`);
-    },
-    onNext(endCursor) {
-      alert(`"next" event fired with end cursor: "${endCursor}"`);
-    },
-  },
-};
-</script>
-
-<template>
-  <gl-keyset-pagination v-bind="pageInfo" @prev="onPrev($event)" @next="onNext($event)" />
-</template>

package/src/components/base/keyset_pagination/examples/keyset_pagination.internationalization.example.vue

@@ -1,23 +0,0 @@
-<script>
-export default {
-  data() {
-    return {
-      pageInfo: {
-        hasPreviousPage: true,
-        hasNextPage: true,
-      },
-    };
-  },
-  methods: {
-    // Stub version of our i18n function in GitLab
-    // eslint-disable-next-line no-underscore-dangle
-    __(text) {
-      return text;
-    },
-  },
-};
-</script>
-
-<template>
-  <gl-keyset-pagination v-bind="pageInfo" :prev-text="__('Prev')" :next-text="__('Next')" />
-</template>