@gitlab/ui 32.50.0 → 32.51.0

package/dist/components/base/form/examples/form.edit.example.js

@@ -1,66 +0,0 @@
-import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
-
-var script = {
-  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 */
-const __vue_script__ = script;
-
-/* template */
-var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('gl-form',{on:{"submit":_vm.onSubmit}},[_c('gl-form-group',{attrs:{"label":"Name"}},[_c('gl-form-input',{attrs:{"type":"text","required":""},model:{value:(_vm.name),callback:function ($$v) {_vm.name=$$v;},expression:"name"}})],1),_vm._v(" "),_c('gl-button',{attrs:{"disabled":_vm.formClean || _vm.submitDisabled,"type":"submit","variant":"success"}},[_vm._v("Submit")])],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/form/examples/form.inline.example.js

@@ -1,62 +0,0 @@
-import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
-
-var script = {
-  data() {
-    return {
-      name: {
-        first: '',
-        last: '',
-        submitDisabled: false
-      }
-    };
-  },
-
-  methods: {
-    onSubmit(evt) {
-      evt.preventDefault();
-      this.submitDisabled = true;
-      setTimeout(() => {
-        this.submitDisabled = false;
-      }, 1000);
-    }
-
-  }
-};
-
-/* 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('gl-form',{attrs:{"inline":""},on:{"submit":_vm.onSubmit}},[_c('label',{staticClass:"gl-mr-3",attrs:{"for":"input-name"}},[_vm._v("First name")]),_vm._v(" "),_c('gl-form-input',{staticClass:"ml-1",attrs:{"name":"input-name","type":"text","required":""},model:{value:(_vm.name.first),callback:function ($$v) {_vm.$set(_vm.name, "first", $$v);},expression:"name.first"}}),_vm._v(" "),_c('label',{staticClass:"gl-mx-3",attrs:{"for":"input-surname"}},[_vm._v("Surname")]),_vm._v(" "),_c('gl-form-input',{staticClass:"ml-1",attrs:{"name":"input-surname","type":"text","required":""},model:{value:(_vm.name.last),callback:function ($$v) {_vm.$set(_vm.name, "last", $$v);},expression:"name.last"}}),_vm._v(" "),_c('gl-button',{staticClass:"gl-ml-3",attrs:{"small":"","disabled":_vm.submitDisabled,"type":"submit","variant":"success"}},[_vm._v("Save")])],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/form/examples/form.novalidate.example.js

@@ -1,61 +0,0 @@
-import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
-
-var script = {
-  data() {
-    return {
-      name: '',
-      errorText: ''
-    };
-  },
-
-  methods: {
-    onSubmit(evt) {
-      evt.preventDefault();
-
-      if (this.name === '') {
-        this.errorText = 'Please enter your name';
-      } else {
-        this.errorText = '';
-      }
-    }
-
-  }
-};
-
-/* 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('gl-form',{attrs:{"novalidate":""},on:{"submit":_vm.onSubmit}},[_c('gl-form-group',{attrs:{"label":"Name"}},[_c('gl-form-input',{attrs:{"type":"text","required":""},model:{value:(_vm.name),callback:function ($$v) {_vm.name=$$v;},expression:"name"}})],1),_vm._v(" "),_c('p',{staticClass:"text-danger"},[_vm._v(_vm._s(_vm.errorText))]),_vm._v(" "),_c('gl-button',{attrs:{"type":"submit","variant":"success"}},[_vm._v("Submit")])],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/form/examples/index.js

@@ -1,27 +0,0 @@
-import FormExample from './form.basic.example';
-import EditFormExample from './form.edit.example';
-import InlineFormExample from './form.inline.example';
-import NoValidateFormExample from './form.novalidate.example';
-
-var index = [{
-  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
-  }]
-}];
-
-export default index;

package/dist/components/base/form/form_select/examples/form_select.basic.example.js

@@ -1,55 +0,0 @@
-import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
-
-var script = {
-  data() {
-    return {
-      selected: 'pizza',
-      options: [{
-        text: 'Pizza',
-        value: 'pizza'
-      }, {
-        text: 'Tacos',
-        value: 'tacos'
-      }]
-    };
-  }
-
-};
-
-/* 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('gl-form-select',{attrs:{"options":_vm.options},model:{value:(_vm.selected),callback:function ($$v) {_vm.selected=$$v;},expression:"selected"}})};
-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/form/form_select/examples/form_select.disabled.example.js

@@ -1,55 +0,0 @@
-import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
-
-var script = {
-  data() {
-    return {
-      selected: 'pizza',
-      options: [{
-        text: 'Pizza',
-        value: 'pizza'
-      }, {
-        text: 'Tacos',
-        value: 'tacos'
-      }]
-    };
-  }
-
-};
-
-/* 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('gl-form-select',{attrs:{"options":_vm.options,"disabled":true},model:{value:(_vm.selected),callback:function ($$v) {_vm.selected=$$v;},expression:"selected"}})};
-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/form/form_select/examples/form_select.manual_options.example.js

@@ -1,48 +0,0 @@
-import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
-
-var script = {
-  data() {
-    return {
-      selected: 'pizza'
-    };
-  }
-
-};
-
-/* 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('gl-form-select',{model:{value:(_vm.selected),callback:function ($$v) {_vm.selected=$$v;},expression:"selected"}},[_c('option',{attrs:{"value":"pizza"}},[_vm._v("Pizza")]),_vm._v(" "),_c('option',{attrs:{"value":"tacos"}},[_vm._v("Tacos")]),_vm._v(" "),_c('option',{attrs:{"value":"pad-thai","disabled":""}},[_vm._v("Pad Thai")])])};
-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/form/form_select/examples/form_select.mixed_options.example.js

@@ -1,55 +0,0 @@
-import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
-
-var script = {
-  data() {
-    return {
-      selected: 'pizza',
-      options: [{
-        text: 'Pizza',
-        value: 'pizza'
-      }, {
-        text: 'Tacos',
-        value: 'tacos'
-      }]
-    };
-  }
-
-};
-
-/* 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('gl-form-select',{attrs:{"options":_vm.options},scopedSlots:_vm._u([{key:"first",fn:function(){return [_c('option',{attrs:{"disabled":""},domProps:{"value":null}},[_vm._v("Select a dish")])]},proxy:true}]),model:{value:(_vm.selected),callback:function ($$v) {_vm.selected=$$v;},expression:"selected"}})};
-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/form/form_select/examples/index.js

@@ -1,27 +0,0 @@
-import FormSelectBasicExample from './form_select.basic.example';
-import FormSelectDisabledExample from './form_select.disabled.example';
-import FormSelectManualOptionsExample from './form_select.manual_options.example';
-import FormSelectMixedOptionsExample from './form_select.mixed_options.example';
-
-var index = [{
-  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
-  }]
-}];
-
-export default index;

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,
-      },
-    ],
-  },
-];