@gitlab/ui 32.48.0 → 32.51.1

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>