@gitlab/ui 32.43.2 → 32.45.1

package/dist/components/base/skeleton_loader/examples/issue_card_skeleton.basic.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('div',{staticStyle:{"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"}},[_c('div',{staticStyle:{"width":"327px","height":"102px"}},[_c('gl-skeleton-loader',{attrs:{"width":327,"height":102}},[_c('rect',{attrs:{"width":"276","height":"16","rx":"4"}}),_vm._v(" "),_c('rect',{attrs:{"y":"18","width":"237","height":"16","rx":"4"}}),_vm._v(" "),_c('rect',{attrs:{"y":"42","width":"118","height":"16","rx":"8"}}),_vm._v(" "),_c('rect',{attrs:{"x":"122","y":"42","width":"130","height":"16","rx":"8"}}),_vm._v(" "),_c('rect',{attrs:{"y":"62","width":"106","height":"16","rx":"8"}}),_vm._v(" "),_c('rect',{attrs:{"x":"110","y":"62","width":"56","height":"16","rx":"8"}}),_vm._v(" "),_c('rect',{attrs:{"x":"256","y":"42","width":"71","height":"16","rx":"8"}}),_vm._v(" "),_c('rect',{attrs:{"y":"86","width":"38","height":"16","rx":"4"}})])],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/skeleton_loader/examples/job_log_skeleton.basic.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('div',{staticStyle:{"background":"#000","padding":"16px","border-radius":"0.25rem","width":"865px","height":"175px"}},[_c('div',{staticStyle:{"width":"830px","height":"113px"}},[_c('gl-skeleton-loader',{attrs:{"width":830,"height":113}},[_c('rect',{attrs:{"width":"540","height":"16","rx":"4"}}),_vm._v(" "),_c('rect',{attrs:{"y":"49","width":"701","height":"16","rx":"4"}}),_vm._v(" "),_c('rect',{attrs:{"y":"24","width":"830","height":"16","rx":"4"}}),_vm._v(" "),_c('rect',{attrs:{"y":"73","width":"540","height":"16","rx":"4"}}),_vm._v(" "),_c('rect',{attrs:{"y":"97","width":"639","height":"16","rx":"4"}})])],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/src/components/base/avatar/examples/avatar.fallback.example.vue

@@ -1,3 +0,0 @@
-<template>
-  <gl-avatar entity-name="Some Project" shape="rect" />
-</template>

package/src/components/base/avatar/examples/avatar.image.example.vue

@@ -1,3 +0,0 @@
-<template>
-  <gl-avatar src="https://about.gitlab.com/images/press/gitlab-summit-south-africa.jpg" />
-</template>

package/src/components/base/avatar/examples/avatar.rect.example.vue

@@ -1,6 +0,0 @@
-<template>
-  <gl-avatar
-    src="https://about.gitlab.com/images/press/gitlab-summit-south-africa.jpg"
-    shape="rect"
-  />
-</template>

package/src/components/base/avatar/examples/avatar.tooltip.example.vue

@@ -1,3 +0,0 @@
-<template>
-  <gl-avatar v-gl-tooltip entity-name="Some Project" title="Some Project" shape="rect" />
-</template>

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

@@ -1,36 +0,0 @@
-import AvatarProjectFallbackExample from './avatar.fallback.example.vue';
-import AvatarImageExample from './avatar.image.example.vue';
-import AvatarRectExample from './avatar.rect.example.vue';
-import AvatarTooltipExample from './avatar.tooltip.example.vue';
-
-export default [
-  {
-    name: 'Basic',
-    items: [
-      {
-        id: 'avatar-image',
-        name: 'Default Image',
-        description: 'Avatar with an image',
-        component: AvatarImageExample,
-      },
-      {
-        id: 'avatar-image-rect',
-        name: 'Rectangular Image',
-        description: 'Avatar with a rectangular image',
-        component: AvatarRectExample,
-      },
-      {
-        id: 'avatar-project-fallback',
-        name: 'Project/Group Fallback',
-        description: 'A fallback for projects or groups without an image',
-        component: AvatarProjectFallbackExample,
-      },
-      {
-        id: 'avatar-with-tooltip',
-        name: 'With tooltip',
-        description: 'Avatar that displays a tooltip on hover',
-        component: AvatarTooltipExample,
-      },
-    ],
-  },
-];

package/src/components/base/avatar_link/examples/avatar.link.example.vue

@@ -1,5 +0,0 @@
-<template>
-  <gl-avatar-link target="blank" href="https://gitlab.com/gitlab-org/gitlab">
-    <gl-avatar-labeled entity-name="GitLab" label="GitLab User" sub-label="@gitlab" :size="32" />
-  </gl-avatar-link>
-</template>

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

@@ -1,15 +0,0 @@
-import AvatarLinkExample from './avatar.link.example.vue';
-
-export default [
-  {
-    name: 'Basic',
-    items: [
-      {
-        id: 'avatar-link',
-        name: 'Avatar Link',
-        description: 'Linked Avatar',
-        component: AvatarLinkExample,
-      },
-    ],
-  },
-];

package/src/components/base/form/form_input/examples/form_input/form_input.text.example.vue

@@ -1,3 +0,0 @@
-<template>
-  <gl-form-input type="text" />
-</template>

package/src/components/base/form/form_input/examples/form_input/form_input.text_disabled.example.vue

@@ -1,3 +0,0 @@
-<template>
-  <gl-form-input type="text" :disabled="true" value="some text" />
-</template>

package/src/components/base/form/form_input/examples/form_input/form_input.text_reactive.example.vue

@@ -1,24 +0,0 @@
-<script>
-/**
- * This example ensures that browser native input events lead to updating the component state.
- */
-export default {
-  data() {
-    return {
-      value: '',
-    };
-  },
-  mounted() {
-    const inputElement = this.$refs.input.$el;
-    inputElement.value = 'some value';
-    inputElement.dispatchEvent(new Event('input'));
-  },
-};
-</script>
-
-<template>
-  <div>
-    <gl-form-input ref="input" v-model="value" type="text" />
-    <p class="mt-3">The entered value is: {{ value }}</p>
-  </div>
-</template>

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

@@ -1,26 +0,0 @@
-import FormInputTextExample from './form_input.text.example.vue';
-import FormInputTextDisabledExample from './form_input.text_disabled.example.vue';
-import FormInputTextReactiveExample from './form_input.text_reactive.example.vue';
-
-export default [
-  {
-    name: 'Text Input',
-    items: [
-      {
-        id: 'input-text',
-        name: 'default state',
-        component: FormInputTextExample,
-      },
-      {
-        id: 'input-text-reactive',
-        name: 'with reactive binding',
-        component: FormInputTextReactiveExample,
-      },
-      {
-        id: 'input-text-disabled',
-        name: 'disabled state',
-        component: FormInputTextDisabledExample,
-      },
-    ],
-  },
-];

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

@@ -1,5 +0,0 @@
-<template>
-  <div class="gl-form-group">
-    <gl-form-text>Some form text</gl-form-text>
-  </div>
-</template>

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

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

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

@@ -1,11 +0,0 @@
-<script>
-export default {
-  // We need this because without a v-model this input will reset on every keystroke
-  // https://github.com/bootstrap-vue/bootstrap-vue/issues/1915
-  data: () => ({ text: '' }),
-};
-</script>
-
-<template>
-  <gl-form-textarea v-model="text" placeholder="Enter something" />
-</template>

package/src/components/base/form/form_textarea/examples/form_textarea.invalid.example.vue

@@ -1,11 +0,0 @@
-<script>
-export default {
-  // We need this because without a v-model this input will reset on every keystroke
-  // https://github.com/bootstrap-vue/bootstrap-vue/issues/1915
-  data: () => ({ text: 'This is invalid' }),
-};
-</script>
-
-<template>
-  <gl-form-textarea v-model="text" placeholder="Enter something" :state="false" />
-</template>

package/src/components/base/form/form_textarea/examples/form_textarea.plaintext.example.vue

@@ -1,13 +0,0 @@
-<script>
-export default {
-  // We need this because without a v-model this input will reset on every keystroke
-  // https://github.com/bootstrap-vue/bootstrap-vue/issues/1915
-  data: () => ({
-    text: "This is some plain text.\nIt is read only and doesn't look like an input.",
-  }),
-};
-</script>
-
-<template>
-  <gl-form-textarea v-model="text" plaintext />
-</template>

package/src/components/base/form/form_textarea/examples/form_textarea.readonly.example.vue

@@ -1,9 +0,0 @@
-<script>
-export default {
-  data: () => ({ text: 'This is some readonly text.' }),
-};
-</script>
-
-<template>
-  <gl-form-textarea v-model="text" readonly />
-</template>

package/src/components/base/form/form_textarea/examples/form_textarea.submit.example.vue

@@ -1,11 +0,0 @@
-<script>
-export default {
-  // We need this because without a v-model this input will reset on every keystroke
-  // https://github.com/bootstrap-vue/bootstrap-vue/issues/1915
-  data: () => ({ text: '' }),
-};
-</script>
-
-<template>
-  <gl-form-textarea v-model="text" placeholder="Enter something" submit-on-enter />
-</template>

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

@@ -1,43 +0,0 @@
-import FormTextAreaBasic from './form_textarea.basic.example.vue';
-import FormTextAreaInvalid from './form_textarea.invalid.example.vue';
-import FormTextAreaPlaintext from './form_textarea.plaintext.example.vue';
-import FormTextReadOnlytext from './form_textarea.readonly.example.vue';
-import FormTextSubmitOnEnter from './form_textarea.submit.example.vue';
-
-export default [
-  {
-    name: 'Basic',
-    items: [
-      {
-        id: 'form-textarea-basic',
-        name: 'Basic',
-        description: 'Basic Form Textarea',
-        component: FormTextAreaBasic,
-      },
-      {
-        id: 'form-textarea-invalid',
-        name: 'Invalid',
-        description: 'Invalid Form Textarea',
-        component: FormTextAreaInvalid,
-      },
-      {
-        id: 'form-textarea-plaintext',
-        name: 'Plaintext',
-        description: 'Plaintext Form Textarea',
-        component: FormTextAreaPlaintext,
-      },
-      {
-        id: 'form-textarea-readonly',
-        name: 'Read Only',
-        description: 'Read Only Form Textarea',
-        component: FormTextReadOnlytext,
-      },
-      {
-        id: 'form-textarea-submit-on-enter',
-        name: 'Submit On Enter',
-        description: 'Submit On Enter Form Textarea',
-        component: FormTextSubmitOnEnter,
-      },
-    ],
-  },
-];

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

@@ -1,22 +0,0 @@
-import LabelBasicExample from './label.basic.example.vue';
-import LabelScopedExample from './label.scoped.example.vue';
-
-export default [
-  {
-    name: 'Label',
-    items: [
-      {
-        id: 'label-basic',
-        name: 'default',
-        description: 'Basic Label',
-        component: LabelBasicExample,
-      },
-      {
-        id: 'label-scoped',
-        name: 'scoped',
-        description: 'Scoped::Label',
-        component: LabelScopedExample,
-      },
-    ],
-  },
-];

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

@@ -1,3 +0,0 @@
-<template>
-  <gl-label target="#" background-color="#D9C2EE" title="Basic Label" />
-</template>

package/src/components/base/label/examples/label.scoped.example.vue

@@ -1,3 +0,0 @@
-<template>
-  <gl-label target="#" background-color="#D9C2EE" title="Basic::Label" scoped />
-</template>

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

@@ -1,43 +0,0 @@
-import PaginationBasicExample from './pagination.basic.example.vue';
-import PaginationCompactExample from './pagination.compact.example.vue';
-import PaginationDoubleTruncation from './pagination.double_truncation.example.vue';
-import PaginationEventExample from './pagination.event.example.vue';
-import PaginationLinksExample from './pagination.links.example.vue';
-
-export default [
-  {
-    name: 'Basic',
-    items: [
-      {
-        id: 'pagination-basic',
-        name: 'Basic',
-        description: 'Basic Pagination',
-        component: PaginationBasicExample,
-      },
-      {
-        id: 'pagination-double-truncation',
-        name: 'Double truncation',
-        description: 'Double truncation',
-        component: PaginationDoubleTruncation,
-      },
-      {
-        id: 'pagination-compact',
-        name: 'Compact',
-        description: 'Compact Pagination',
-        component: PaginationCompactExample,
-      },
-      {
-        id: 'pagination-links',
-        name: 'Link based pagination',
-        description: 'Link based pagination',
-        component: PaginationLinksExample,
-      },
-      {
-        id: 'pagination-event',
-        name: 'Page change event',
-        description: 'Page change event',
-        component: PaginationEventExample,
-      },
-    ],
-  },
-];

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

@@ -1,17 +0,0 @@
-<script>
-export default {
-  data: () => ({
-    page: 2,
-  }),
-};
-</script>
-
-<template>
-  <gl-pagination
-    v-model="page"
-    :per-page="10"
-    :total-items="100"
-    prev-text="Prev"
-    next-text="Next"
-  />
-</template>

package/src/components/base/pagination/examples/pagination.compact.example.vue

@@ -1,33 +0,0 @@
-<script>
-const LAST_PAGE = 3;
-
-export default {
-  lastPage: LAST_PAGE,
-  data: () => ({
-    page: 1,
-  }),
-  computed: {
-    prevPage() {
-      return Math.max(this.page - 1, 0);
-    },
-    nextPage() {
-      const nextPage = this.page + 1;
-      return nextPage > LAST_PAGE ? 0 : nextPage;
-    },
-  },
-};
-</script>
-
-<template>
-  <div class="text-center">
-    <gl-pagination
-      v-model="page"
-      :prev-page="prevPage"
-      :next-page="nextPage"
-      prev-text="Prev"
-      next-text="Next"
-      align="center"
-    />
-    Page {{ page }} of {{ $options.lastPage }}
-  </div>
-</template>

package/src/components/base/pagination/examples/pagination.double_truncation.example.vue

@@ -1,11 +0,0 @@
-<script>
-export default {
-  data: () => ({
-    page: 15,
-  }),
-};
-</script>
-
-<template>
-  <gl-pagination v-model="page" :per-page="10" :total-items="300" />
-</template>

package/src/components/base/pagination/examples/pagination.event.example.vue

@@ -1,26 +0,0 @@
-<script>
-export default {
-  data: () => ({
-    page: 2,
-  }),
-  methods: {
-    logEvent(page) {
-      console.log(`page changed to ${page}`); // eslint-disable-line
-    },
-  },
-};
-</script>
-
-<template>
-  <div>
-    <p>Change events are logged to the console</p>
-    <gl-pagination
-      v-model="page"
-      :per-page="10"
-      :total-items="100"
-      prev-text="Prev"
-      next-text="Next"
-      @input="logEvent"
-    />
-  </div>
-</template>

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

@@ -1,18 +0,0 @@
-<script>
-export default {
-  data: () => ({
-    page: 2,
-  }),
-};
-</script>
-
-<template>
-  <gl-pagination
-    v-model="page"
-    :per-page="10"
-    :total-items="100"
-    :link-gen="(page) => `#page${page}`"
-    prev-text="Prev"
-    next-text="Next"
-  />
-</template>

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

@@ -1,22 +0,0 @@
-import SegmentedControlBasicExample from './segmented_control.basic.example.vue';
-import SegmentedControlWhitespaceExample from './segmented_control.whitespace.example.vue';
-
-export default [
-  {
-    name: 'Basic',
-    items: [
-      {
-        id: 'segmented-control-basic',
-        name: 'Basic',
-        description: 'Basic Segmented Control',
-        component: SegmentedControlBasicExample,
-      },
-      {
-        id: 'segmented-control-whitespace',
-        name: 'Whitespace',
-        description: 'Whitespace Segmented control',
-        component: SegmentedControlWhitespaceExample,
-      },
-    ],
-  },
-];

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

@@ -1,19 +0,0 @@
-<script>
-export default {
-  data() {
-    return {
-      options: [
-        { value: 1, text: 'First' },
-        { value: 2, text: 'Second', disabled: true },
-        { value: 3, text: 'Third' },
-        { value: 4, text: 'Fourth' },
-        { value: 5, text: 'Fifth' },
-      ],
-      selected: 1,
-    };
-  },
-};
-</script>
-<template>
-  <gl-segmented-control v-model="selected" :options="options" />
-</template>

package/src/components/base/segmented_control/examples/segmented_control.whitespace.example.vue

@@ -1,18 +0,0 @@
-<script>
-export default {
-  data() {
-    return {
-      options: [
-        { value: true, text: 'Show' },
-        { value: false, text: 'Hide' },
-      ],
-      selected: true,
-    };
-  },
-};
-</script>
-<template>
-  <gl-form-group id="group-id" label="Whitespace" label-size="sm" label-for="select1">
-    <gl-segmented-control id="select1" v-model="selected" :options="options" />
-  </gl-form-group>
-</template>

package/src/components/base/skeleton_loader/examples/ci_header_skeleton.basic.example.vue

@@ -1,10 +0,0 @@
-<template>
-  <div style="width: 575px; height: 24px">
-    <gl-skeleton-loader :width="575" :height="24">
-      <rect width="86" height="24" rx="4" />
-      <rect x="94" y="4" width="300" height="16" rx="4" />
-      <rect x="430" y="4" width="145" height="16" rx="4" />
-      <circle cx="414" cy="12" r="12" />
-    </gl-skeleton-loader>
-  </div>
-</template>

package/src/components/base/skeleton_loader/examples/default_skeleton.basic.example.vue

@@ -1,3 +0,0 @@
-<template>
-  <gl-skeleton-loader />
-</template>

package/src/components/base/skeleton_loader/examples/default_skeleton_custom_props.basic.example.vue

@@ -1,9 +0,0 @@
-<template>
-  <gl-skeleton-loader
-    preserve-aspect-ratio="none"
-    equal-width-lines
-    :lines="5"
-    :width="600"
-    :height="66"
-  />
-</template>