@gitlab/ui 37.1.0 → 37.4.0

package/dist/directives/resize_observer/examples/resize_observer.basic.example.js

@@ -1,62 +0,0 @@
-import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
-
-var script = {
-  data() {
-    return {
-      width: 0,
-      height: 0
-    };
-  },
-
-  methods: {
-    handleResize(_ref) {
-      let {
-        contentRect: {
-          width,
-          height
-        }
-      } = _ref;
-      this.width = width;
-      this.height = height;
-    }
-
-  }
-};
-
-/* 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',{directives:[{name:"gl-resize-observer-directive",rawName:"v-gl-resize-observer-directive",value:(_vm.handleResize),expression:"handleResize"}]},[_c('p',[_vm._v(_vm._s(_vm.width)+" x "+_vm._s(_vm.height))])])};
-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/form_group/examples/form_group/form_group.basic.example.vue

@@ -1,11 +0,0 @@
-<template>
-  <gl-form-group
-    id="group-id"
-    label="Label"
-    label-size="sm"
-    description="Form group description"
-    label-for="input1"
-  >
-    <gl-form-input id="input1" />
-  </gl-form-group>
-</template>

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

@@ -1,21 +0,0 @@
-<script>
-export default {
-  computed: {
-    disabled() {
-      return true;
-    },
-  },
-};
-</script>
-
-<template>
-  <gl-form-group
-    id="group-id"
-    label="Label Name"
-    label-size="sm"
-    description="This feature is disabled"
-    label-for="input1"
-  >
-    <gl-form-input id="input1" type="text" :disabled="disabled" value="Disabled" />
-  </gl-form-group>
-</template>

package/src/components/base/form/form_group/examples/form_group/form_group.textarea.example.vue

@@ -1,15 +0,0 @@
-<script>
-export default {
-  data() {
-    return {
-      text: '',
-    };
-  },
-};
-</script>
-
-<template>
-  <gl-form-group id="group-id-textarea1" label="Label Name" label-for="textarea1">
-    <gl-form-textarea id="textarea1" v-model="text" placeholder="Enter something" />
-  </gl-form-group>
-</template>

package/src/components/base/form/form_group/examples/form_group/form_group.validation.example.vue

@@ -1,36 +0,0 @@
-<script>
-export default {
-  data() {
-    return {
-      name: '',
-    };
-  },
-  computed: {
-    state() {
-      return this.name.length >= 4;
-    },
-    invalidFeedback() {
-      let feedbackText = 'This field is required.';
-
-      if (this.name.length > 4) {
-        feedbackText = '';
-      } else if (this.name.length > 0) {
-        feedbackText = 'Enter at least 4 characters.';
-      }
-
-      return feedbackText;
-    },
-  },
-};
-</script>
-<template>
-  <gl-form-group
-    label="Name"
-    description="Enter a first and last name."
-    :invalid-feedback="invalidFeedback"
-    :state="state"
-    label-for="input1"
-  >
-    <gl-form-input id="input1" v-model.trim="name" :state="state" />
-  </gl-form-group>
-</template>

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

@@ -1,32 +0,0 @@
-import FormGroupBasicExample from './form_group.basic.example.vue';
-import FormGroupDisabledExample from './form_group.disabled.example.vue';
-import FormGroupTextareaExample from './form_group.textarea.example.vue';
-import FormGroupValidationExample from './form_group.validation.example.vue';
-
-export default [
-  {
-    name: 'Form Group',
-    items: [
-      {
-        id: 'form-group',
-        name: 'basic example',
-        component: FormGroupBasicExample,
-      },
-      {
-        id: 'form-group-validations',
-        name: 'with validations',
-        component: FormGroupValidationExample,
-      },
-      {
-        id: 'form-group-disabled',
-        name: 'disabled',
-        component: FormGroupDisabledExample,
-      },
-      {
-        id: 'form-group-textarea',
-        name: 'textarea',
-        component: FormGroupTextareaExample,
-      },
-    ],
-  },
-];

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

@@ -1,10 +0,0 @@
-<template>
-  <gl-form-input-group>
-    <template #prepend>
-      <gl-input-group-text>Username</gl-input-group-text>
-    </template>
-    <template #append>
-      <gl-button variant="success">Add</gl-button>
-    </template>
-  </gl-form-input-group>
-</template>

package/src/components/base/form/form_input_group/examples/form_input_group.predefined_options.example.vue

@@ -1,25 +0,0 @@
-<script>
-export default {
-  data() {
-    return {
-      optionValues: [
-        { name: 'Embed', value: 'https://embed.com' },
-        { name: 'Share', value: 'https://share.org' },
-      ],
-    };
-  },
-};
-</script>
-<template>
-  <!--
-optionValues = [
-{ name: 'Embed', value: 'https://embed.com' },
-{ name: 'Share', value: 'https://share.org' },
-]
--->
-  <gl-form-input-group :predefined-options="optionValues">
-    <template #append>
-      <gl-button variant="success">Add</gl-button>
-    </template>
-  </gl-form-input-group>
-</template>

package/src/components/base/form/form_input_group/examples/form_input_group.predefined_reactive.example.vue

@@ -1,32 +0,0 @@
-<script>
-export default {
-  data() {
-    return {
-      testVal: 'foo',
-      optionValues: [
-        { name: 'Embed', value: 'https://embed.com' },
-        { name: 'Share', value: 'https://share.org' },
-      ],
-    };
-  },
-};
-</script>
-<template>
-  <!--
-optionValues = [
-{ name: 'Embed', value: 'https://embed.com' },
-{ name: 'Share', value: 'https://share.org' },
-]
--->
-  <div>
-    <label>
-      Data outside of the component
-      <input v-model="testVal" type="text" class="gl-form-input" />
-    </label>
-    <gl-form-input-group v-model="testVal" :predefined-options="optionValues">
-      <template #append>
-        <gl-button variant="success">Add</gl-button>
-      </template>
-    </gl-form-input-group>
-  </div>
-</template>

package/src/components/base/form/form_input_group/examples/form_input_group.reactive.example.vue

@@ -1,25 +0,0 @@
-<script>
-export default {
-  data() {
-    return {
-      testVal: 'foo',
-    };
-  },
-};
-</script>
-<template>
-  <div>
-    <label>
-      Data outside of the component
-      <gl-form-input v-model="testVal" type="text" />
-    </label>
-    <gl-form-input-group v-model="testVal">
-      <template #prepend>
-        <gl-input-group-text>Username</gl-input-group-text>
-      </template>
-      <template #append>
-        <gl-button variant="success">Add</gl-button>
-      </template>
-    </gl-form-input-group>
-  </div>
-</template>

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

@@ -1,32 +0,0 @@
-import BasicExample from './form_input_group.basic.example.vue';
-import PredefinedOptionsExample from './form_input_group.predefined_options.example.vue';
-import PredefinedReactiveExample from './form_input_group.predefined_reactive.example.vue';
-import ReactiveExample from './form_input_group.reactive.example.vue';
-
-export default [
-  {
-    name: 'Text Input Group',
-    items: [
-      {
-        id: 'input-text-group',
-        name: 'Basic',
-        component: BasicExample,
-      },
-      {
-        id: 'input-text-group-reactive',
-        name: 'Reactive update of/from the component',
-        component: ReactiveExample,
-      },
-      {
-        id: 'input-text-group-predefined-options',
-        name: 'With predefined options',
-        component: PredefinedOptionsExample,
-      },
-      {
-        id: 'input-text-group-predefined-reactive',
-        name: 'With predefined options and reactive updates',
-        component: PredefinedReactiveExample,
-      },
-    ],
-  },
-];

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

@@ -1,26 +0,0 @@
-import SearchBoxByClickDefaultExample from './search_box_by_click.default.example.vue';
-import SearchBoxByClickHistoryExample from './search_box_by_click.history.example.vue';
-import SearchBoxByClickVModelExample from './search_box_by_click.v_model.example.vue';
-
-export default [
-  {
-    name: 'Search Box By Click',
-    items: [
-      {
-        id: 'search-box-by-click',
-        name: 'default',
-        component: SearchBoxByClickDefaultExample,
-      },
-      {
-        id: 'search-box-by-click-v-model',
-        name: 'Using v-model',
-        component: SearchBoxByClickVModelExample,
-      },
-      {
-        id: 'search-box-by-click-with-history',
-        name: 'with history',
-        component: SearchBoxByClickHistoryExample,
-      },
-    ],
-  },
-];

package/src/components/base/search_box_by_click/examples/search_box_by_click.default.example.vue

@@ -1,14 +0,0 @@
-<script>
-export default {
-  data() {
-    return {
-      value: '',
-    };
-  },
-};
-</script>
-<template>
-  <div id="tooltipcontainer">
-    <gl-search-box-by-click v-model="value" tooltip-container="#tooltipcontainer" />
-  </div>
-</template>

package/src/components/base/search_box_by_click/examples/search_box_by_click.history.example.vue

@@ -1,23 +0,0 @@
-<script>
-export default {
-  data() {
-    return {
-      value: '',
-      history: ['author:@admin', 'assignee:@admin milestone:%12.5', 'label:~test'],
-    };
-  },
-};
-</script>
-<template>
-  <div id="tooltipcontainer">
-    <gl-search-box-by-click
-      v-model="value"
-      :history-items="history"
-      tooltip-container="#tooltipcontainer"
-    >
-      <template #history-item="{ historyItem }">
-        {{ historyItem }}
-      </template>
-    </gl-search-box-by-click>
-  </div>
-</template>

package/src/components/base/search_box_by_click/examples/search_box_by_click.v_model.example.vue

@@ -1,23 +0,0 @@
-<script>
-export default {
-  data() {
-    return {
-      text: '',
-    };
-  },
-  methods: {
-    setText() {
-      this.text = 'Something else';
-    },
-  },
-};
-</script>
-
-<template>
-  <div id="tooltipcontainer">
-    <gl-search-box-by-click v-model="text" tooltip-container="#tooltipcontainer" />
-    <gl-button class="gl-mt-4" @click="setText"
-      >Click here to set text to "Something else" using v-model</gl-button
-    >
-  </div>
-</template>

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

@@ -1,20 +0,0 @@
-import SearchBoxByTypeDefaultExample from './search_box_by_type.default.example.vue';
-import SearchBoxByTypeLoadingExample from './search_box_by_type.loading.example.vue';
-
-export default [
-  {
-    name: 'Search Box By Type',
-    items: [
-      {
-        id: 'search-box-by-type',
-        name: 'default',
-        component: SearchBoxByTypeDefaultExample,
-      },
-      {
-        id: 'search-box-by-type-loading',
-        name: 'loading',
-        component: SearchBoxByTypeLoadingExample,
-      },
-    ],
-  },
-];

package/src/components/base/search_box_by_type/examples/search_box_by_type.default.example.vue

@@ -1,14 +0,0 @@
-<script>
-export default {
-  data() {
-    return {
-      value: '',
-    };
-  },
-};
-</script>
-<template>
-  <div id="tooltipcontainer">
-    <gl-search-box-by-type v-model="value" tooltip-container="#tooltipcontainer" />
-  </div>
-</template>

package/src/components/base/search_box_by_type/examples/search_box_by_type.loading.example.vue

@@ -1,34 +0,0 @@
-<script>
-export default {
-  data() {
-    return {
-      value: '',
-      isLoading: false,
-    };
-  },
-  watch: {
-    value(newValue) {
-      if (newValue) {
-        clearTimeout(this.loader);
-        this.isLoading = true;
-        this.loader = setTimeout(() => {
-          this.isLoading = false;
-        }, 2000);
-      } else if (this.loader) {
-        this.isLoading = false;
-        clearTimeout(this.loader);
-        this.loader = null;
-      }
-    },
-  },
-};
-</script>
-<template>
-  <div id="tooltipcontainer">
-    <gl-search-box-by-type
-      v-model="value"
-      :is-loading="isLoading"
-      tooltip-container="#tooltipcontainer"
-    />
-  </div>
-</template>

package/src/directives/resize_observer/examples/index.js

@@ -1,14 +0,0 @@
-import BasicExample from './resize_observer.basic.example.vue';
-
-export default [
-  {
-    name: 'ResizeObserver directive',
-    items: [
-      {
-        id: 'resize-observer-directive-example',
-        name: 'ResizeObserver directive example',
-        component: BasicExample,
-      },
-    ],
-  },
-];

package/src/directives/resize_observer/examples/resize_observer.basic.example.vue

@@ -1,21 +0,0 @@
-<script>
-export default {
-  data() {
-    return {
-      width: 0,
-      height: 0,
-    };
-  },
-  methods: {
-    handleResize({ contentRect: { width, height } }) {
-      this.width = width;
-      this.height = height;
-    },
-  },
-};
-</script>
-<template>
-  <div v-gl-resize-observer-directive="handleResize">
-    <p>{{ width }} x {{ height }}</p>
-  </div>
-</template>