@gitlab/ui 32.48.0 → 32.49.0

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>

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

@@ -1,20 +0,0 @@
-<script>
-export default {
-  data() {
-    return {
-      pageInfo: {
-        hasPreviousPage: true,
-        hasNextPage: true,
-      },
-    };
-  },
-};
-</script>
-
-<template>
-  <gl-keyset-pagination
-    v-bind="pageInfo"
-    prev-button-link="https://example.com/prev"
-    next-button-link="https://example.com/next"
-  />
-</template>

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

@@ -1,23 +0,0 @@
-<script>
-export default {
-  data() {
-    return {
-      pageInfo: {
-        hasPreviousPage: true,
-        hasNextPage: true,
-      },
-    };
-  },
-};
-</script>
-
-<template>
-  <gl-keyset-pagination v-bind="pageInfo">
-    <template #previous-button-content>
-      <span style="color: hotpink" class="gl-font-weight-bold">🦄 ᎮᏒᏋᏉᎥᎧᏬᏕ</span>
-    </template>
-    <template #next-button-content>
-      <span style="color: purple" class="gl-font-weight-bold">ᏁᏋጀᏖ 🌈</span>
-    </template>
-  </gl-keyset-pagination>
-</template>

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

@@ -1,39 +0,0 @@
-import ModalBasicExample from './modal.basic.example.vue';
-import ModalDisabledExample from './modal.disabled.example.vue';
-import ModalSizesExample from './modal.sizes.example.vue';
-
-export default [
-  {
-    name: 'Basic',
-    items: [
-      {
-        id: 'modal-basic',
-        name: 'Basic',
-        description: 'Basic Modal',
-        component: ModalBasicExample,
-      },
-    ],
-  },
-  {
-    name: 'Disabled',
-    items: [
-      {
-        id: 'modal-disabled',
-        name: 'Disabled',
-        description: 'Disabled Modal',
-        component: ModalDisabledExample,
-      },
-    ],
-  },
-  {
-    name: 'Sizes',
-    items: [
-      {
-        id: 'modal-sizes',
-        name: 'Sizes',
-        description: 'Modal Sizes',
-        component: ModalSizesExample,
-      },
-    ],
-  },
-];

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

@@ -1,39 +0,0 @@
-<script>
-export default {
-  computed: {
-    primaryProps() {
-      return {
-        text: 'Okay',
-      };
-    },
-    secondaryProps() {
-      return {
-        text: 'Secondary',
-      };
-    },
-    cancelProps() {
-      return {
-        text: 'Cancel',
-      };
-    },
-  },
-};
-</script>
-
-<template>
-  <div>
-    <gl-button v-gl-modal-directive="'basic-modal-id'" category="primary" variant="confirm">
-      Open modal
-    </gl-button>
-    <gl-modal
-      modal-id="basic-modal-id"
-      title="Example title"
-      no-fade
-      :action-primary="primaryProps"
-      :action-secondary="secondaryProps"
-      :action-cancel="cancelProps"
-    >
-      This is my content
-    </gl-modal>
-  </div>
-</template>

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

@@ -1,58 +0,0 @@
-<script>
-export default {
-  data() {
-    return {
-      enteredText: '',
-    };
-  },
-  computed: {
-    primaryProps() {
-      return {
-        text: 'Okay',
-        attributes: [{ disabled: !this.canSubmit }, { variant: 'confirm' }],
-      };
-    },
-    secondaryProps() {
-      return {
-        text: 'Secondary',
-        attributes: [{ disabled: !this.canSubmit }, { variant: 'confirm', category: 'secondary' }],
-      };
-    },
-    cancelProps() {
-      return {
-        text: 'Cancel',
-      };
-    },
-    canSubmit() {
-      return this.enteredText === 'gitlab';
-    },
-  },
-  methods: {
-    clearInput() {
-      this.enteredText = '';
-    },
-  },
-};
-</script>
-
-<template>
-  <div>
-    <gl-button v-gl-modal-directive="'basic-modal-id'" category="primary" variant="confirm">
-      Open modal
-    </gl-button>
-    <gl-modal
-      modal-id="basic-modal-id"
-      title="Example title"
-      no-fade
-      :action-primary="primaryProps"
-      :action-secondary="secondaryProps"
-      :action-cancel="cancelProps"
-      @primary="clearInput"
-      @secondary="clearInput"
-      @cancel="clearInput"
-    >
-      <p>Enter "gitlab" to change the button state.</p>
-      <input v-model="enteredText" type="text" />
-    </gl-modal>
-  </div>
-</template>

package/src/components/base/modal/examples/modal.sizes.example.vue

@@ -1,61 +0,0 @@
-<script>
-export default {
-  computed: {
-    primaryProps() {
-      return {
-        text: 'Okay',
-      };
-    },
-    secondaryProps() {
-      return {
-        text: 'Secondary',
-      };
-    },
-    cancelProps() {
-      return {
-        text: 'Cancel',
-      };
-    },
-  },
-};
-</script>
-
-<template>
-  <div>
-    <gl-button v-gl-modal-directive="'small-modal-id'" variant="confirm">Small Modal</gl-button>
-    <gl-button v-gl-modal-directive="'medium-modal-id'" variant="confirm">Default Modal</gl-button>
-    <gl-button v-gl-modal-directive="'large-modal-id'" variant="confirm">Large Modal</gl-button>
-    <gl-modal
-      modal-id="small-modal-id"
-      title="Example title"
-      no-fade
-      :action-primary="primaryProps"
-      :action-secondary="secondaryProps"
-      :action-cancel="cancelProps"
-      size="sm"
-    >
-      <p>Small modal: 512px</p>
-    </gl-modal>
-    <gl-modal
-      modal-id="medium-modal-id"
-      title="Example title"
-      no-fade
-      :action-primary="primaryProps"
-      :action-secondary="secondaryProps"
-      :action-cancel="cancelProps"
-    >
-      <p>Medium modal: 768px (default)</p>
-    </gl-modal>
-    <gl-modal
-      modal-id="large-modal-id"
-      title="Example title"
-      no-fade
-      :action-primary="primaryProps"
-      :action-secondary="secondaryProps"
-      :action-cancel="cancelProps"
-      size="lg"
-    >
-      <p>Large modal: 990px</p>
-    </gl-modal>
-  </div>
-</template>