@gitlab/ui 32.48.0 → 32.51.1

package/dist/components/base/modal/examples/modal.disabled.example.js

@@ -1,89 +0,0 @@
-import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
-
-var script = {
-  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 */
-const __vue_script__ = script;
-
-/* template */
-var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',[_c('gl-button',{directives:[{name:"gl-modal-directive",rawName:"v-gl-modal-directive",value:('basic-modal-id'),expression:"'basic-modal-id'"}],attrs:{"category":"primary","variant":"confirm"}},[_vm._v("\n    Open modal\n  ")]),_vm._v(" "),_c('gl-modal',{attrs:{"modal-id":"basic-modal-id","title":"Example title","no-fade":"","action-primary":_vm.primaryProps,"action-secondary":_vm.secondaryProps,"action-cancel":_vm.cancelProps},on:{"primary":_vm.clearInput,"secondary":_vm.clearInput,"cancel":_vm.clearInput}},[_c('p',[_vm._v("Enter \"gitlab\" to change the button state.")]),_vm._v(" "),_c('input',{directives:[{name:"model",rawName:"v-model",value:(_vm.enteredText),expression:"enteredText"}],attrs:{"type":"text"},domProps:{"value":(_vm.enteredText)},on:{"input":function($event){if($event.target.composing){ return; }_vm.enteredText=$event.target.value;}}})])],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_script__,
-    __vue_scope_id__,
-    __vue_is_functional_template__,
-    __vue_module_identifier__,
-    false,
-    undefined,
-    undefined,
-    undefined
-  );
-
-export default __vue_component__;

package/dist/components/base/modal/examples/modal.sizes.example.js

@@ -1,62 +0,0 @@
-import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
-
-var script = {
-  computed: {
-    primaryProps() {
-      return {
-        text: 'Okay'
-      };
-    },
-
-    secondaryProps() {
-      return {
-        text: 'Secondary'
-      };
-    },
-
-    cancelProps() {
-      return {
-        text: 'Cancel'
-      };
-    }
-
-  }
-};
-
-/* script */
-const __vue_script__ = script;
-
-/* template */
-var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',[_c('gl-button',{directives:[{name:"gl-modal-directive",rawName:"v-gl-modal-directive",value:('small-modal-id'),expression:"'small-modal-id'"}],attrs:{"variant":"confirm"}},[_vm._v("Small Modal")]),_vm._v(" "),_c('gl-button',{directives:[{name:"gl-modal-directive",rawName:"v-gl-modal-directive",value:('medium-modal-id'),expression:"'medium-modal-id'"}],attrs:{"variant":"confirm"}},[_vm._v("Default Modal")]),_vm._v(" "),_c('gl-button',{directives:[{name:"gl-modal-directive",rawName:"v-gl-modal-directive",value:('large-modal-id'),expression:"'large-modal-id'"}],attrs:{"variant":"confirm"}},[_vm._v("Large Modal")]),_vm._v(" "),_c('gl-modal',{attrs:{"modal-id":"small-modal-id","title":"Example title","no-fade":"","action-primary":_vm.primaryProps,"action-secondary":_vm.secondaryProps,"action-cancel":_vm.cancelProps,"size":"sm"}},[_c('p',[_vm._v("Small modal: 512px")])]),_vm._v(" "),_c('gl-modal',{attrs:{"modal-id":"medium-modal-id","title":"Example title","no-fade":"","action-primary":_vm.primaryProps,"action-secondary":_vm.secondaryProps,"action-cancel":_vm.cancelProps}},[_c('p',[_vm._v("Medium modal: 768px (default)")])]),_vm._v(" "),_c('gl-modal',{attrs:{"modal-id":"large-modal-id","title":"Example title","no-fade":"","action-primary":_vm.primaryProps,"action-secondary":_vm.secondaryProps,"action-cancel":_vm.cancelProps,"size":"lg"}},[_c('p',[_vm._v("Large modal: 990px")])])],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_script__,
-    __vue_scope_id__,
-    __vue_is_functional_template__,
-    __vue_module_identifier__,
-    false,
-    undefined,
-    undefined,
-    undefined
-  );
-
-export default __vue_component__;

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>