@gitlab/ui 32.46.0 → 32.50.0

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>

package/src/components/base/modal/examples/modal.sizes.example.vue

@@ -1,61 +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="'small-modal-id'" variant="confirm">Small Modal</gl-button>
-    <gl-button v-gl-modal-directive="'medium-modal-id'" variant="confirm">Default Modal</gl-button>
-    <gl-button v-gl-modal-directive="'large-modal-id'" variant="confirm">Large Modal</gl-button>
-    <gl-modal
-      modal-id="small-modal-id"
-      title="Example title"
-      no-fade
-      :action-primary="primaryProps"
-      :action-secondary="secondaryProps"
-      :action-cancel="cancelProps"
-      size="sm"
-    >
-      <p>Small modal: 512px</p>
-    </gl-modal>
-    <gl-modal
-      modal-id="medium-modal-id"
-      title="Example title"
-      no-fade
-      :action-primary="primaryProps"
-      :action-secondary="secondaryProps"
-      :action-cancel="cancelProps"
-    >
-      <p>Medium modal: 768px (default)</p>
-    </gl-modal>
-    <gl-modal
-      modal-id="large-modal-id"
-      title="Example title"
-      no-fade
-      :action-primary="primaryProps"
-      :action-secondary="secondaryProps"
-      :action-cancel="cancelProps"
-      size="lg"
-    >
-      <p>Large modal: 990px</p>
-    </gl-modal>
-  </div>
-</template>

package/src/components/charts/gauge/examples/gauge.basic.example.vue

@@ -1,5 +0,0 @@
-<template>
-  <div>
-    <gl-gauge-chart :value="48" :min="0" :max="100" :thresholds="[38, 82]" :split-number="10" />
-  </div>
-</template>

package/src/components/charts/gauge/examples/gauge.no_thresholds.example.vue

@@ -1,5 +0,0 @@
-<template>
-  <div>
-    <gl-gauge-chart :value="48" :min="0" :max="100" :split-number="10" />
-  </div>
-</template>

package/src/components/charts/gauge/examples/gauge.no_value.example.vue

@@ -1,5 +0,0 @@
-<template>
-  <div>
-    <gl-gauge-chart :min="0" :max="100" :thresholds="[38, 82]" :split-number="10" />
-  </div>
-</template>

package/src/components/charts/gauge/examples/gauge.with_text.example.vue

@@ -1,12 +0,0 @@
-<template>
-  <div>
-    <gl-gauge-chart
-      :value="48"
-      text="48Mbps"
-      :min="0"
-      :max="100"
-      :thresholds="[38, 82]"
-      :split-number="10"
-    />
-  </div>
-</template>

package/src/components/charts/gauge/examples/index.js

@@ -1,36 +0,0 @@
-import BasicExample from './gauge.basic.example.vue';
-import NoThresholdsExample from './gauge.no_thresholds.example.vue';
-import NoValueExample from './gauge.no_value.example.vue';
-import WithTextExample from './gauge.with_text.example.vue';
-
-export default [
-  {
-    name: 'Basic',
-    items: [
-      {
-        id: 'gauge-basic',
-        name: 'Basic',
-        description: 'Basic Gauge',
-        component: BasicExample,
-      },
-      {
-        id: 'gauge-no-thresholds',
-        name: 'No thresholds set',
-        description: 'Gauge with no thresholds set',
-        component: NoThresholdsExample,
-      },
-      {
-        id: 'gauge-no-value',
-        name: 'No value set',
-        description: 'Gauge with no value set',
-        component: NoValueExample,
-      },
-      {
-        id: 'gauge-with-text',
-        name: 'With text set',
-        description: 'Gauge with custom text set',
-        component: WithTextExample,
-      },
-    ],
-  },
-];

package/src/components/charts/tooltip/examples/chart_tooltip.basic.example.vue

@@ -1,32 +0,0 @@
-<script>
-export default {
-  data() {
-    return {
-      echartInstance: null,
-    };
-  },
-  methods: {
-    onCreated(chart) {
-      this.echartInstance = chart;
-    },
-  },
-};
-</script>
-
-<template>
-  <div class="position-relative">
-    <gl-chart :options="{}" :height="100" @created="onCreated" />
-    <gl-chart-tooltip
-      v-if="echartInstance"
-      :chart="echartInstance"
-      :show="true"
-      top="50%"
-      left="0px"
-    >
-      <template #title>
-        <div>Tooltip Title</div>
-      </template>
-      Basic Tooltip Content
-    </gl-chart-tooltip>
-  </div>
-</template>

package/src/components/charts/tooltip/examples/index.js

@@ -1,15 +0,0 @@
-import ChartTooltipBasicExample from './chart_tooltip.basic.example.vue';
-
-export default [
-  {
-    name: 'Basic',
-    items: [
-      {
-        id: 'chart-tooltip-basic',
-        name: 'Basic',
-        description: 'Basic Tooltip',
-        component: ChartTooltipBasicExample,
-      },
-    ],
-  },
-];

package/src/components/utilities/intersperse/examples/index.js

@@ -1,36 +0,0 @@
-import IntersperseCustomLastSeparator from './intersperse.custom_last_separator.example.vue';
-import IntersperseCustomLastSeparatorTwoItems from './intersperse.custom_last_separator_two_items.example.vue';
-import IntersperseCustomSeparator from './intersperse.custom_separator.example.vue';
-import Intersperse from './intersperse.default.example.vue';
-
-export default [
-  {
-    name: 'Basic',
-    items: [
-      {
-        id: 'intersperse-default',
-        name: 'Default Intersperse',
-        description: 'Default intersperse usage',
-        component: Intersperse,
-      },
-      {
-        id: 'intersperse-custom-separator',
-        name: 'Intersperse with custom separator',
-        description: 'Set a custom separator',
-        component: IntersperseCustomSeparator,
-      },
-      {
-        id: 'intersperse-custom-last-separator',
-        name: 'Intersperse with custom last separator',
-        description: 'Set a custom last separator',
-        component: IntersperseCustomLastSeparator,
-      },
-      {
-        id: 'intersperse-custom-last-separator-two-items',
-        name: 'Intersperse with custom last separator and two items',
-        description: 'Set a custom last separator on two items',
-        component: IntersperseCustomLastSeparatorTwoItems,
-      },
-    ],
-  },
-];

package/src/components/utilities/intersperse/examples/intersperse.custom_last_separator.example.vue

@@ -1,7 +0,0 @@
-<template>
-  <gl-intersperse last-separator=" and ">
-    <span>Item 1</span>
-    <span>Item 2</span>
-    <span>Item 3</span>
-  </gl-intersperse>
-</template>

package/src/components/utilities/intersperse/examples/intersperse.custom_last_separator_two_items.example.vue

@@ -1,6 +0,0 @@
-<template>
-  <gl-intersperse last-separator=" and ">
-    <span>Item 1</span>
-    <span>Item 2</span>
-  </gl-intersperse>
-</template>

package/src/components/utilities/intersperse/examples/intersperse.custom_separator.example.vue

@@ -1,7 +0,0 @@
-<template>
-  <gl-intersperse separator="/">
-    <span>Item 1</span>
-    <span>Item 2</span>
-    <span>Item 3</span>
-  </gl-intersperse>
-</template>

package/src/components/utilities/intersperse/examples/intersperse.default.example.vue

@@ -1,7 +0,0 @@
-<template>
-  <gl-intersperse>
-    <span>Item 1</span>
-    <span>Item 2</span>
-    <span>Item 3</span>
-  </gl-intersperse>
-</template>