@gitlab/ui 32.50.0 → 32.51.3

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