@gitlab/ui 32.47.0 → 32.51.0

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

@@ -1,73 +0,0 @@
-<script>
-export default {
-  data() {
-    return {
-      form: {
-        submitDisabled: false,
-        email: '',
-        name: '',
-        mergeState: null,
-        checked: [],
-      },
-      states: [{ text: 'Select One', value: null }, 'Open', 'Resolved', 'Closed', 'Blocked'],
-      show: true,
-    };
-  },
-  methods: {
-    onReset() {
-      this.form.name = '';
-      this.form.submitDisabled = false;
-    },
-    onSubmit(evt) {
-      evt.preventDefault();
-      this.form.submitDisabled = true;
-      setTimeout(() => {
-        this.form.submitDisabled = false;
-        // eslint-disable-next-line no-alert
-        alert(JSON.stringify(this.form));
-      }, 1000);
-    },
-  },
-};
-</script>
-
-<template>
-  <div>
-    <gl-form @submit="onSubmit" @reset="onReset">
-      <gl-form-group
-        id="input-group-1"
-        label="Email address:"
-        label-for="input-1"
-        description="We'll never share your email with anyone else."
-      >
-        <gl-form-input
-          id="input-1"
-          v-model="form.email"
-          type="email"
-          required
-          placeholder="Enter email"
-        />
-      </gl-form-group>
-
-      <gl-form-group id="input-group-2" label="Your Name:" label-for="input-2">
-        <gl-form-input id="input-2" v-model="form.name" required placeholder="Enter name" />
-      </gl-form-group>
-
-      <gl-form-group id="input-group-3" label="Merge State:" label-for="input-3">
-        <gl-form-select id="input-3" v-model="form.mergeState" :options="states" required />
-      </gl-form-group>
-
-      <gl-form-group id="input-group-4">
-        <gl-form-checkbox-group id="checkboxes-4" v-model="form.checked">
-          <gl-form-checkbox value="squash">Squash Commits</gl-form-checkbox>
-          <gl-form-checkbox value="new">Create New Issue</gl-form-checkbox>
-        </gl-form-checkbox-group>
-      </gl-form-group>
-
-      <div class="gl-display-flex gl-justify-content-end">
-        <gl-button type="reset" variant="secondary" class="gl-mr-3">Cancel</gl-button>
-        <gl-button type="submit" variant="success">Submit</gl-button>
-      </div>
-    </gl-form>
-  </div>
-</template>

package/src/components/base/form/examples/form.edit.example.vue

@@ -1,37 +0,0 @@
-<script>
-export default {
-  data() {
-    return {
-      originalName: 'First last',
-      name: 'First last',
-      submitDisabled: false,
-    };
-  },
-  computed: {
-    formClean() {
-      return this.name === this.originalName;
-    },
-  },
-  methods: {
-    onSubmit(evt) {
-      evt.preventDefault();
-      this.submitDisabled = true;
-      setTimeout(() => {
-        this.submitDisabled = true;
-      }, 1000);
-    },
-  },
-};
-</script>
-
-<template>
-  <gl-form @submit="onSubmit">
-    <gl-form-group label="Name">
-      <gl-form-input v-model="name" type="text" required />
-    </gl-form-group>
-
-    <gl-button :disabled="formClean || submitDisabled" type="submit" variant="success"
-      >Submit</gl-button
-    >
-  </gl-form>
-</template>

package/src/components/base/form/examples/form.inline.example.vue

@@ -1,36 +0,0 @@
-<script>
-export default {
-  data() {
-    return {
-      name: {
-        first: '',
-        last: '',
-        submitDisabled: false,
-      },
-    };
-  },
-  methods: {
-    onSubmit(evt) {
-      evt.preventDefault();
-      this.submitDisabled = true;
-      setTimeout(() => {
-        this.submitDisabled = false;
-      }, 1000);
-    },
-  },
-};
-</script>
-
-<template>
-  <gl-form inline @submit="onSubmit">
-    <!-- using plain label instead of gl-form-group to avoid margin layout issues -->
-    <label for="input-name" class="gl-mr-3">First name</label>
-    <gl-form-input v-model="name.first" name="input-name" class="ml-1" type="text" required />
-    <label for="input-surname" class="gl-mx-3">Surname</label>
-    <gl-form-input v-model="name.last" name="input-surname" class="ml-1" type="text" required />
-
-    <gl-button class="gl-ml-3" small :disabled="submitDisabled" type="submit" variant="success"
-      >Save</gl-button
-    >
-  </gl-form>
-</template>

package/src/components/base/form/examples/form.novalidate.example.vue

@@ -1,30 +0,0 @@
-<script>
-export default {
-  data() {
-    return {
-      name: '',
-      errorText: '',
-    };
-  },
-  methods: {
-    onSubmit(evt) {
-      evt.preventDefault();
-      if (this.name === '') {
-        this.errorText = 'Please enter your name';
-      } else {
-        this.errorText = '';
-      }
-    },
-  },
-};
-</script>
-
-<template>
-  <gl-form novalidate @submit="onSubmit">
-    <gl-form-group label="Name">
-      <gl-form-input v-model="name" type="text" required />
-    </gl-form-group>
-    <p class="text-danger">{{ errorText }}</p>
-    <gl-button type="submit" variant="success">Submit</gl-button>
-  </gl-form>
-</template>

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

@@ -1,32 +0,0 @@
-import FormExample from './form.basic.example.vue';
-import EditFormExample from './form.edit.example.vue';
-import InlineFormExample from './form.inline.example.vue';
-import NoValidateFormExample from './form.novalidate.example.vue';
-
-export default [
-  {
-    name: 'Form',
-    items: [
-      {
-        id: 'form-basic',
-        name: 'Form in the default state',
-        component: FormExample,
-      },
-      {
-        id: 'form-inline',
-        name: 'Form in the inline state',
-        component: InlineFormExample,
-      },
-      {
-        id: 'form-edit',
-        name: 'Form with existing data',
-        component: EditFormExample,
-      },
-      {
-        id: 'form-novalidate',
-        name: 'Form with HTML validation disabled',
-        component: NoValidateFormExample,
-      },
-    ],
-  },
-];

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/form_select/examples/form_select.basic.example.vue

@@ -1,17 +0,0 @@
-<script>
-export default {
-  data() {
-    return {
-      selected: 'pizza',
-      options: [
-        { text: 'Pizza', value: 'pizza' },
-        { text: 'Tacos', value: 'tacos' },
-      ],
-    };
-  },
-};
-</script>
-
-<template>
-  <gl-form-select v-model="selected" :options="options" />
-</template>

package/src/components/base/form/form_select/examples/form_select.disabled.example.vue

@@ -1,17 +0,0 @@
-<script>
-export default {
-  data() {
-    return {
-      selected: 'pizza',
-      options: [
-        { text: 'Pizza', value: 'pizza' },
-        { text: 'Tacos', value: 'tacos' },
-      ],
-    };
-  },
-};
-</script>
-
-<template>
-  <gl-form-select v-model="selected" :options="options" :disabled="true" />
-</template>

package/src/components/base/form/form_select/examples/form_select.manual_options.example.vue

@@ -1,17 +0,0 @@
-<script>
-export default {
-  data() {
-    return {
-      selected: 'pizza',
-    };
-  },
-};
-</script>
-
-<template>
-  <gl-form-select v-model="selected">
-    <option value="pizza">Pizza</option>
-    <option value="tacos">Tacos</option>
-    <option value="pad-thai" disabled>Pad Thai</option>
-  </gl-form-select>
-</template>

package/src/components/base/form/form_select/examples/form_select.mixed_options.example.vue

@@ -1,21 +0,0 @@
-<script>
-export default {
-  data() {
-    return {
-      selected: 'pizza',
-      options: [
-        { text: 'Pizza', value: 'pizza' },
-        { text: 'Tacos', value: 'tacos' },
-      ],
-    };
-  },
-};
-</script>
-
-<template>
-  <gl-form-select v-model="selected" :options="options">
-    <template #first>
-      <option :value="null" disabled>Select a dish</option>
-    </template>
-  </gl-form-select>
-</template>

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

@@ -1,32 +0,0 @@
-import FormSelectBasicExample from './form_select.basic.example.vue';
-import FormSelectDisabledExample from './form_select.disabled.example.vue';
-import FormSelectManualOptionsExample from './form_select.manual_options.example.vue';
-import FormSelectMixedOptionsExample from './form_select.mixed_options.example.vue';
-
-export default [
-  {
-    name: 'Form Select',
-    items: [
-      {
-        id: 'form-select-options-array',
-        name: 'Form select with options property',
-        component: FormSelectBasicExample,
-      },
-      {
-        id: 'form-select-manual-options',
-        name: 'Form select with manual options',
-        component: FormSelectManualOptionsExample,
-      },
-      {
-        id: 'form-select-mixed-options',
-        name: 'Form select with mixed options',
-        component: FormSelectMixedOptionsExample,
-      },
-      {
-        id: 'form-select-disabled',
-        name: 'Form select disabled',
-        component: FormSelectDisabledExample,
-      },
-    ],
-  },
-];

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>

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>