@gitlab/duo-ui 0.1.0 → 0.2.0

package/src/components/base/table/table.md

@@ -1,72 +0,0 @@
-## Usage
-
-The `gl-table` component wraps BootstrapVue `b-table` component. `b-table` provides a variety of
-slots for custom data rendering. You can learn more about them in the
-[component documentation](https://bootstrap-vue.org/docs/components/table).
-When using the component, pass in the `fields` prop as part of the `$options`, and give each table
-data and table head its own styles if necessary.
-
-## Internationalization
-
-To ensure we internationalize field labels, always pass an array of objects for the `fields` prop,
-like mentioned in the implementation example.
-
-_Full documentation for the
-`field` prop [here.](https://bootstrap-vue.org/docs/components/table#fields-column-definitions)_
-
-## Header text alignment
-
-To align a given `TH` element's text to the right, set the `thAlignRight` property to `true` in
-the fields definition. This will ensure that proper styling is applied, including when the column
-is sortable.
-
-```js
-const fields = [
-  {
-    key: "column_one",
-    label: __("First column"),
-    sortable: true,
-    thAlignRight: true,
-  },
-];
-```
-
-## Use `GlTableLite` when possible
-
-If you don't need all the features of `GlTable`, like filtering, sorting, or
-pagination, use `GlTableLite` which offers a subset of `GlTable` features.
-
-## Implementation Example
-
-```html
-<script>
-  export default {
-    fields: [
-      {
-        key: 'column_one',
-        label: __('First column'),
-        thClass: 'w-60p',
-        tdClass: 'table-col d-flex'
-      },
-      {
-        key: 'col_2',
-        label: __('Second column'),
-        thClass: 'w-15p',
-        tdClass: 'table-col d-flex'
-      },
-    ];
-  }
-</script>
-<template>
-  <gl-table :items="items" :fields="$options.fields">
-    <template #head(column_one)>
-      <div>First column</div>
-      <!-- This is the column head for the first object in `fields` -->
-    </template>
-
-    <template #cell(column_one)>
-      This is the template for column data belonging to the first object
-    </template>
-  </gl-table>
-</template>
-```

package/src/components/base/table/table.scss

@@ -1,145 +0,0 @@
-table.gl-table {
-  background-color: var(--gl-color-alpha-0);
-  color: var(--gl-text-color-default);
-
-  tr {
-    th,
-    td {
-      @apply gl-border-b-1 gl-bg-transparent gl-p-5 gl-border-b-solid;
-      border-color: var(--gl-border-color-default);
-      @apply gl-leading-normal;
-      @apply gl-text-base;
-      @apply gl-align-top;
-    }
-
-    th {
-      @apply gl-font-bold;
-      color: var(--gl-text-color-heading);
-
-      .gl-table-th-sort-icon-wrapper {
-        @apply gl-ml-2;
-      }
-
-      &.gl-table-th-align-right > div {
-        @apply gl-flex-row-reverse;
-
-        .gl-table-th-sort-icon-wrapper {
-          @apply gl-ml-0 gl-mr-2;
-        }
-      }
-
-      [name='sort-icon'] {
-        user-select: none;
-        color: var(--gl-table-sorting-icon-color);
-      }
-    }
-
-    td {
-      color: var(--gl-text-color-default);
-    }
-
-    &:focus-visible {
-      @apply gl-focus;
-      position: relative;
-      z-index: 1;
-    }
-  }
-
-  // Sticky header
-  &--sticky-header thead tr {
-    position: sticky;
-    top: -1px;
-    background-color: var(--gl-background-color-default);
-    box-shadow: inset 0 -1px 0 var(--gl-border-color-default);
-  }
-
-  .table-primary,
-  .table-primary:hover {
-    background-color: var(--gl-feedback-info-background-color);
-
-    > td {
-      background-color: var(--gl-feedback-info-background-color);
-    }
-  }
-
-  caption {
-    @apply gl-pt-2;
-    color: var(--gl-text-color-subtle);
-  }
-
-  @mixin gl-tmp-stacked-override {
-    tbody > tr {
-      &::after {
-        content: '';
-        @apply gl-h-6;
-        @apply gl-w-full;
-        @apply gl-block;
-      }
-
-      > td[data-label] {
-        @apply gl-border-l-1 gl-border-r-1 gl-border-l-solid gl-border-r-solid;
-
-        &::before {
-          @apply gl-text-left;
-        }
-
-        &:first-child {
-          @apply gl-border-t-1 gl-border-t-solid;
-        }
-
-        &:not(:first-child) {
-          @apply gl-border-t-0;
-        }
-      }
-
-      div {
-        @apply gl-text-right;
-        @apply gl-break-words;
-      }
-    }
-  }
-
-  $stacked-table-breakpoints: (
-    'sm': 'xs',
-    'md': 'sm',
-    'lg': 'md',
-    'xl': 'lg',
-  );
-
-  &.b-table {
-    &.b-table-stacked {
-      @include gl-tmp-stacked-override();
-    }
-
-    @each $class, $mq in $stacked-table-breakpoints {
-      &.b-table-stacked-#{$class} {
-        @include media-breakpoint-down(#{$mq}) {
-          @include gl-tmp-stacked-override();
-        }
-      }
-    }
-  }
-
-  &.table-hover tbody tr:hover,
-  &.table-hover td.table-secondary:hover {
-    background-color: var(--gl-table-row-background-color-hover);
-  }
-
-  thead th:hover {
-    background-color: transparent !important;
-
-    [name='sort-icon'] {
-      display: flex !important;
-    }
-  }
-}
-
-.table.b-table > thead > tr > th,
-.table.b-table > tfoot > tr > th {
-  background-image: none !important;
-}
-
-.table.b-table > thead > tr > [aria-sort]:not(.b-table-sort-icon-left),
-.table.b-table > tfoot > tr > [aria-sort]:not(.b-table-sort-icon-left) {
-  padding-right: 1rem;
-}

package/src/components/base/table/table.vue

@@ -1,144 +0,0 @@
-<!-- eslint-disable vue/multi-word-component-names -->
-<script>
-import { BTable } from '../../../vendor/bootstrap-vue/src/components/table/table';
-import { logWarning, isDev } from '../../../utils/utils';
-import { tableFullSlots, tableFullProps, glTableLiteWarning } from './constants';
-
-const shouldUseFullTable = ({ $attrs, $scopedSlots }) => {
-  return (
-    tableFullProps.some((prop) => $attrs[prop] !== undefined) ||
-    tableFullSlots.some((slot) => $scopedSlots[slot] !== undefined)
-  );
-};
-
-const { tableClass } = BTable.options.props;
-
-export default {
-  name: 'GlTable',
-  components: {
-    BTable,
-  },
-  inheritAttrs: false,
-  props: {
-    tableClass,
-    fields: {
-      type: Array,
-      required: false,
-      default: null,
-    },
-    stickyHeader: {
-      type: Boolean,
-      default: false,
-      required: false,
-    },
-    sortBy: {
-      type: String,
-      required: false,
-      default: undefined,
-    },
-    sortDesc: {
-      type: Boolean,
-      required: false,
-      default: false,
-    },
-  },
-  data() {
-    return {
-      localSortBy: this.sortBy,
-      localSortDesc: this.sortDesc,
-    };
-  },
-  computed: {
-    stickyHeaderClass() {
-      return this.stickyHeader ? 'gl-table--sticky-header' : null;
-    },
-    localTableClass() {
-      return ['gl-table', this.tableClass, this.stickyHeaderClass];
-    },
-    headSlots() {
-      return [
-        'head()',
-        ...Object.keys(this.$scopedSlots).filter((slotName) => slotName.startsWith('head(')),
-      ];
-    },
-    computedFields() {
-      return this.fields?.map((field) => {
-        if (typeof field === 'string') {
-          return field;
-        }
-        const { thAlignRight, thClass = '', ...rest } = field;
-        const computedThClass = Array.isArray(thClass) ? thClass : thClass.split(' ');
-        if (thAlignRight) {
-          computedThClass.push('gl-table-th-align-right');
-        }
-        return {
-          ...rest,
-          thClass: computedThClass,
-        };
-      });
-    },
-  },
-  mounted() {
-    // logWarning will call isDev before logging any message
-    // this additional call to isDev is being made to exit the condition early when run in production
-    if (isDev() && !shouldUseFullTable(this)) {
-      logWarning(glTableLiteWarning, this.$el);
-    }
-  },
-  methods: {
-    isSortable({ field }) {
-      return field?.sortable;
-    },
-    activeSortingColumn({ field }) {
-      return this.localSortBy === field?.key;
-    },
-    getSortingIcon({ field }) {
-      if (this.activeSortingColumn({ field })) {
-        if (this.localSortDesc) {
-          return '↓';
-        }
-        return '↑';
-      }
-
-      if (this.$attrs['sort-direction'] === 'desc') {
-        return '↓';
-      }
-
-      return '↑';
-    },
-  },
-};
-</script>
-
-<template>
-  <b-table
-    :table-class="localTableClass"
-    :fields="computedFields"
-    :sort-by.sync="localSortBy"
-    :sort-desc.sync="localSortDesc"
-    no-sort-reset
-    v-bind="$attrs"
-    v-on="$listeners"
-  >
-    <template v-for="slotName in Object.keys($scopedSlots)" #[slotName]="scope">
-      <slot :name="slotName" v-bind="scope"></slot>
-    </template>
-    <template v-for="headSlotName in headSlots" #[headSlotName]="scope">
-      <div :key="headSlotName" class="gl-flex">
-        <slot :name="headSlotName" v-bind="scope"
-          ><span>{{ scope.label }}</span></slot
-        ><template v-if="isSortable(scope)">
-          <div class="gl-table-th-sort-icon-wrapper gl-flex gl-w-5 gl-justify-center">
-            <span
-              name="sort-icon"
-              data-testid="sort-icon"
-              :class="{ 'gl-hidden': !activeSortingColumn(scope) }"
-            >
-              {{ getSortingIcon(scope) }}
-            </span>
-          </div>
-        </template>
-      </div>
-    </template>
-  </b-table>
-</template>

package/src/components/base/table_lite/table_lite.md

@@ -1,68 +0,0 @@
-## Usage
-
-The `GlTableLite` component wraps BootstrapVue `BTableLite` component.
-`BTableLite` provides a variety of slots for custom data rendering. You can learn
-more about them in the
-[component documentation](https://bootstrap-vue.org/docs/components/table#light-weight-tables).
-
-## `GlTable` vs. `GlTableLite`
-
-`GlTableLite` adds less payload to the pagebundle than `GlTable`.
-When possible `GlTableLite` should be preferred over `GlTable`.
-
-The `GlTableLite` component provides all of the styling and formatting features of
-`GlTable` (including row details and stacked support), while excluding the following features:
-
-- Filtering
-- Sorting
-- Pagination
-- Items provider support
-- Selectable rows
-- Busy table state and styling
-- Fixed top and bottom rows
-- Empty row support
-
-## Internationalization
-
-To ensure we internationalize field labels, always pass an array of objects for the `fields` prop,
-like mentioned in the implementation example.
-
-_Full documentation for the `field` prop [here.](https://bootstrap-vue.org/docs/components/table#fields-column-definitions)_
-
-## Implementation example
-
-```html
-<script>
-export default {
-  fields: [
-    {
-      key: 'column_one',
-      label: __('First column'),
-      thClass: 'w-60p',
-      tdClass: 'table-col d-flex'
-    },
-    {
-      key: 'col_2',
-      label: __('Second column'),
-      thClass: 'w-15p',
-      tdClass: 'table-col d-flex'
-    },
-  ];
-}
-</script>
-<template>
-  <gl-table-lite
-    :items="items"
-    :fields="$options.fields"
-  >
-    <template #head(column_one)>
-      <div>First column</div><!-- This is the column head for the first object in `fields` -->
-    </template>
-
-    <template #cell(column_one)>
-      This is the template for column data belonging to the first object
-    </template>
-
-  </gl-table-lite>
-</template>
-```

package/src/components/base/table_lite/table_lite.vue

@@ -1,43 +0,0 @@
-<script>
-import { BTableLite } from '../../../vendor/bootstrap-vue/src/components/table/table-lite';
-
-const { tableClass } = BTableLite.options.props;
-
-export default {
-  name: 'GlTableLite',
-  components: {
-    BTableLite,
-  },
-  inheritAttrs: false,
-  props: {
-    tableClass,
-    fields: {
-      type: Array,
-      required: false,
-      default: null,
-    },
-    stickyHeader: {
-      type: Boolean,
-      default: false,
-      required: false,
-    },
-  },
-  computed: {
-    stickyHeaderClass() {
-      return this.stickyHeader ? 'gl-table--sticky-header' : null;
-    },
-    localTableClass() {
-      return ['gl-table', this.tableClass, this.stickyHeaderClass];
-    },
-  },
-};
-</script>
-
-<template>
-  <b-table-lite :table-class="localTableClass" :fields="fields" v-bind="$attrs" v-on="$listeners">
-    <template v-for="slot in Object.keys($scopedSlots)" #[slot]="scope">
-      <!-- @slot See https://bootstrap-vue.org/docs/components/table#comp-ref-b-table-lite-slots for available slots. -->
-      <slot :name="slot" v-bind="scope"></slot>
-    </template>
-  </b-table-lite>
-</template>

package/src/components/base/tabs/constants.js

@@ -1 +0,0 @@
-export const DEFAULT_TAB_TITLE_LINK_CLASS = 'gl-tab-nav-item';

package/src/components/base/tabs/tab/tab.vue

@@ -1,57 +0,0 @@
-<!-- eslint-disable vue/multi-word-component-names -->
-<script>
-import isPlainObject from 'lodash/isPlainObject';
-import { BTab } from '../../../../vendor/bootstrap-vue/src/components/tabs/tab';
-
-import { DEFAULT_TAB_TITLE_LINK_CLASS } from '../constants';
-
-export default {
-  name: 'GlTab',
-  components: {
-    BTab,
-  },
-  inheritAttrs: false,
-  props: {
-    titleLinkClass: {
-      type: [String, Array, Object],
-      required: false,
-      default: '',
-    },
-    /**
-     * Query string parameter value to use when `gl-tabs` `sync-active-tab-with-query-params` prop is set to `true`.
-     */
-    queryParamValue: {
-      type: String,
-      required: false,
-      default: null,
-    },
-  },
-  computed: {
-    linkClass() {
-      const { titleLinkClass } = this;
-
-      if (Array.isArray(titleLinkClass)) {
-        return [...titleLinkClass, DEFAULT_TAB_TITLE_LINK_CLASS];
-      }
-      if (isPlainObject(titleLinkClass)) {
-        return { ...titleLinkClass, [DEFAULT_TAB_TITLE_LINK_CLASS]: true };
-      }
-      return `${titleLinkClass} ${DEFAULT_TAB_TITLE_LINK_CLASS}`.trim();
-    },
-  },
-};
-</script>
-
-<template>
-  <b-tab
-    :title-link-class="linkClass"
-    :query-param-value="queryParamValue"
-    v-bind="$attrs"
-    v-on="$listeners"
-  >
-    <!-- eslint-disable-next-line @gitlab/vue-prefer-dollar-scopedslots -->
-    <template v-for="slot in Object.keys($slots)" #[slot]>
-      <slot :name="slot"></slot>
-    </template>
-  </b-tab>
-</template>

package/src/components/base/tabs/tabs/scrollable_tabs.vue

@@ -1,140 +0,0 @@
-<script>
-import debounce from 'lodash/debounce';
-import { GlResizeObserverDirective } from '../../../../directives/resize_observer/resize_observer';
-import GlIcon from '../../icon/icon.vue';
-import GlTabs from './tabs.vue';
-
-const NAV_CLASS = 'gl-scrollable-tabs-nav';
-
-export default {
-  name: 'GlScrollableTabs',
-  components: {
-    GlTabs,
-    GlIcon,
-  },
-  directives: {
-    GlResizeObserverDirective,
-  },
-  inheritAttrs: false,
-  data() {
-    return {
-      width: 0,
-      // This is a reactive value of a child element's scrollLeft. It is not two-way bound.
-      // Do not set manually outside of "scroll" callback.
-      scrollLeft: 0,
-      navScrollWidth: 0,
-    };
-  },
-  computed: {
-    navClass() {
-      const attrsNavClass = this.$attrs.navClass;
-
-      if (!attrsNavClass) {
-        return [NAV_CLASS];
-      }
-      if (Array.isArray(attrsNavClass)) {
-        return [NAV_CLASS, ...attrsNavClass];
-      }
-
-      return [NAV_CLASS, attrsNavClass];
-    },
-    displayScrollLeft() {
-      // if we have scrolled && there's overflow
-      return this.scrollLeft && this.width < this.navScrollWidth;
-    },
-
-    displayScrollRight() {
-      // if there's more overflow to the right
-      return this.scrollLeft + this.width < this.navScrollWidth;
-    },
-    passthroughAttrs() {
-      return Object.keys(this.$attrs)
-        .filter((key) => !key.startsWith('action'))
-        .reduce((acc, key) => Object.assign(acc, { [key]: this.$attrs[key] }), {});
-    },
-  },
-  mounted() {
-    this.$nextTick(() => {
-      this.navScrollWidth = this.getScrollWidth();
-    });
-
-    this.handleNavScroll = debounce((e) => {
-      this.scrollLeft = e.target.scrollLeft;
-    }, 100);
-
-    this.getNavContainer().addEventListener('scroll', this.handleNavScroll);
-  },
-  beforeDestroy() {
-    this.getNavContainer().removeEventListener('scroll', this.handleNavScroll);
-  },
-  updated() {
-    // Whenever tabs are added or removed we need to recalculate the reactive scrollWidth
-    this.$nextTick(() => {
-      this.navScrollWidth = this.getScrollWidth();
-    });
-  },
-  methods: {
-    handleResize({ contentRect: { width } }) {
-      this.width = width;
-      this.navScrollWidth = this.getScrollWidth();
-    },
-    scrollTabsLeft() {
-      const scrollTo = this.scrollLeft - this.width;
-      this.scrollTabs(Math.max(scrollTo, 0));
-    },
-    scrollTabsRight() {
-      const scrollTo = this.scrollLeft + this.width;
-      this.scrollTabs(Math.min(scrollTo, this.getScrollWidth() - this.width));
-    },
-    scrollTabs(scrollTo) {
-      this.getNavContainer().scrollTo({ left: scrollTo, behavior: 'smooth' });
-      this.scrollLeft = scrollTo;
-    },
-    getScrollWidth() {
-      return this.getNavContainer()?.scrollWidth || 0;
-    },
-    getNavContainer() {
-      return this.$el?.querySelector(`.${NAV_CLASS}`);
-    },
-  },
-  NAV_CLASS,
-};
-</script>
-
-<template>
-  <gl-tabs
-    v-gl-resize-observer-directive="handleResize"
-    :nav-class="navClass"
-    v-bind="passthroughAttrs"
-    v-on="$listeners"
-  >
-    <!-- eslint-disable-next-line @gitlab/vue-prefer-dollar-scopedslots -->
-    <template v-for="slot in Object.keys($slots)" #[slot]>
-      <slot :name="slot"></slot>
-    </template>
-    <template #tabs-start>
-      <li v-show="displayScrollLeft" class="gl-tabs-fade gl-tabs-fade-left">
-        <button
-          class="gl-tabs-fade-icon-button"
-          aria-label="Scroll left"
-          tabindex="-1"
-          @click="scrollTabsLeft"
-        >
-          <gl-icon :size="16" name="chevron-lg-left" />
-        </button>
-      </li>
-    </template>
-    <template #tabs-end>
-      <li v-show="displayScrollRight" class="gl-tabs-fade gl-tabs-fade-right">
-        <button
-          class="gl-tabs-fade-icon-button"
-          aria-label="Scroll right"
-          tabindex="-1"
-          @click="scrollTabsRight"
-        >
-          <gl-icon :size="16" name="chevron-lg-right" />
-        </button>
-      </li>
-    </template>
-  </gl-tabs>
-</template>