npm - @gitlab/ui - Versions diffs - 72.12.0 → 72.12.1 - Mend

@gitlab/ui 72.12.0 → 72.12.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (209) hide show

package/dist/components/base/skeleton_loader/skeleton_loader.js ADDED Viewed

@@ -0,0 +1,224 @@
+import range from 'lodash/range';
+import { uid } from '../../../utils/utils';
+import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
+const DEFAULT_LINE_MAX_WIDTH = 235;
+const DEFAULT_LINE_WIDTH_PERCENTAGES = [65, 100, 85];
+const DEFAULT_LINE_HEIGHT = 10;
+const DEFAULT_LINE_SPACING = 4;
+const DEFAULT_SVG_WIDTH = 400;
+const DEFAULT_SVG_HEIGHT = 130;
+var script = {
+  name: 'GlSkeletonLoader',
+  functional: true,
+  props: {
+    /**
+     * It will be set in the viewbox attr in the <svg />.
+     * Defaults to 400 when skeleton is passed via the slot. Defaults to 235 when default skeleton is used
+     */
+    width: {
+      type: Number,
+      default: null,
+      required: false
+    },
+    /**
+     * It will be set in the viewbox attr in the <svg />. Defaults to 130 when skeleton is passed via the slot.
+     * Defaults to the combined height of the lines when default skeleton is used
+     */
+    height: {
+      type: Number,
+      default: null,
+      required: false
+    },
+    /**
+     * Aspect ratio option of <svg/>
+     */
+    preserveAspectRatio: {
+      type: String,
+      default: 'xMidYMid meet',
+      required: false
+    },
+    /**
+     * Required if you're using <base url="/" /> in your <head />. Defaults to an empty string.
+     * This prop is common used as: <gl-skeleton-loader :base-url="$route.fullPath" /> which will fill the SVG attribute with the relative path.
+     */
+    baseUrl: {
+      type: String,
+      default: '',
+      required: false
+    },
+    /**
+     * Defaults to unique id
+     */
+    uniqueKey: {
+      type: String,
+      default: () => uid(),
+      required: false
+    },
+    /**
+     * Number of lines to show when using the default skeleton
+     */
+    lines: {
+      type: Number,
+      default: 3,
+      required: false
+    },
+    /**
+     * If the default skeleton lines should all be the same width
+     */
+    equalWidthLines: {
+      type: Boolean,
+      default: false,
+      required: false
+    }
+  },
+  render(createElement, _ref) {
+    let {
+      props,
+      slots
+    } = _ref;
+    const slotIsSet = () => slots().default;
+    const propValueOrDefault = (name, defaultValue) => props[name] !== null ? props[name] : defaultValue;
+    const width = () => {
+      if (slotIsSet()) {
+        return propValueOrDefault('width', DEFAULT_SVG_WIDTH);
+      }
+      return propValueOrDefault('width', DEFAULT_LINE_MAX_WIDTH);
+    };
+    const height = () => {
+      if (slotIsSet()) {
+        return propValueOrDefault('height', DEFAULT_SVG_HEIGHT);
+      }
+      return propValueOrDefault('height', props.lines * DEFAULT_LINE_HEIGHT + (props.lines - 1) * DEFAULT_LINE_SPACING);
+    };
+    const lineWidth = index => {
+      if (props.equalWidthLines) {
+        return '100%';
+      }
+      return `${DEFAULT_LINE_WIDTH_PERCENTAGES[index % DEFAULT_LINE_WIDTH_PERCENTAGES.length]}%`;
+    };
+    const reducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+    const svg = createElement('svg', {
+      class: {
+        'gl-skeleton-loader': true,
+        'gl-w-full gl-h-full': !slotIsSet()
+      },
+      attrs: {
+        viewBox: `0 0 ${width()} ${height()}`,
+        version: '1.1',
+        preserveAspectRatio: props.preserveAspectRatio
+      }
+    }, [createElement('title', {}, ['Loading']), createElement('rect', {
+      attrs: {
+        'clip-path': `url(${props.baseUrl}#${props.uniqueKey}-idClip)`,
+        x: 0,
+        y: 0,
+        width: width(),
+        height: height(),
+        ...(reducedMotion ? {
+          class: 'gl-fill-gray-100'
+        } : {
+          fill: `url(${props.baseUrl}#${props.uniqueKey}-idGradient)`
+        })
+      }
+    }), createElement('defs', {}, [createElement('clipPath', {
+      attrs: {
+        id: `${props.uniqueKey}-idClip`
+      }
+    }, slotIsSet() ? slots().default : range(props.lines).map(index => createElement('rect', {
+      key: index,
+      attrs: {
+        y: index * DEFAULT_LINE_HEIGHT + index * DEFAULT_LINE_SPACING,
+        width: lineWidth(index),
+        height: DEFAULT_LINE_HEIGHT,
+        rx: 4
+      }
+    }))), !reducedMotion && createElement('linearGradient', {
+      attrs: {
+        id: `${props.uniqueKey}-idGradient`
+      }
+    }, [createElement('stop', {
+      class: 'primary-stop',
+      attrs: {
+        offset: '0%'
+      }
+    }, [createElement('animate', {
+      attrs: {
+        attributeName: 'offset',
+        values: '-2; 1',
+        dur: '1s',
+        repeatCount: 'indefinite'
+      }
+    })]), createElement('stop', {
+      class: 'secondary-stop',
+      attrs: {
+        offset: '50%'
+      }
+    }, [createElement('animate', {
+      attrs: {
+        attributeName: 'offset',
+        values: '-1.5; 1.5',
+        dur: '1s',
+        repeatCount: 'indefinite'
+      }
+    })]), createElement('stop', {
+      class: 'primary-stop',
+      attrs: {
+        offset: '100%'
+      }
+    }, [createElement('animate', {
+      attrs: {
+        attributeName: 'offset',
+        values: '-1; 2',
+        dur: '1s',
+        repeatCount: 'indefinite'
+      }
+    })])])])]);
+    if (slotIsSet()) {
+      return svg;
+    }
+    return createElement('div', {
+      class: 'gl-skeleton-loader-default-container gl-max-w-full',
+      style: {
+        width: props.width !== null ? `${props.width}px` : null,
+        height: props.height !== null ? `${props.height}px` : null
+      }
+    }, [svg]);
+  }
+};
+/* script */
+const __vue_script__ = script;
+/* template */
+  /* 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__ = undefined;
+  /* style inject */
+  /* style inject SSR */
+  /* style inject shadow dom */
+  const __vue_component__ = __vue_normalize__(
+    {},
+    __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/sorting/sorting.js ADDED Viewed

@@ -0,0 +1,171 @@
+import { GlTooltipDirective } from '../../../directives/tooltip';
+import GlButton from '../button/button';
+import GlButtonGroup from '../button_group/button_group';
+import GlCollapsibleListbox from '../new_dropdowns/listbox/listbox';
+import { isOption } from '../new_dropdowns/listbox/utils';
+import GlDropdown from '../dropdown/dropdown';
+import { translate } from '../../../utils/i18n';
+import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
+var script = {
+  name: 'GlSorting',
+  components: {
+    GlButton,
+    GlButtonGroup,
+    GlCollapsibleListbox,
+    GlDropdown
+  },
+  directives: {
+    GlTooltip: GlTooltipDirective
+  },
+  props: {
+    /**
+     * Text to place in the toggle button.
+     */
+    text: {
+      type: String,
+      required: false,
+      default: ''
+    },
+    /**
+     * Sort options to display in the dropdown
+     */
+    sortOptions: {
+      type: Array,
+      required: false,
+      default: null,
+      // eslint-disable-next-line unicorn/no-array-callback-reference
+      validator: sortOptions => sortOptions.every(isOption)
+    },
+    /**
+     * The value of the item currently selected in the dropdown.
+     * Only to be used with the `sortOptions` prop.
+     */
+    sortBy: {
+      type: [String, Number],
+      required: false,
+      default: null
+    },
+    /**
+     * Determines the current sort order icon displayed.
+     */
+    isAscending: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    /**
+     * The text for the tooltip and aria-label of the sort direction toggle
+     * button instead of the defaults for ascending/descending.
+     */
+    sortDirectionToolTip: {
+      type: String,
+      required: false,
+      default: null
+    },
+    /**
+     * Additional class(es) to apply to the root element of the GlDropdown.
+     */
+    dropdownClass: {
+      type: String,
+      required: false,
+      default: ''
+    },
+    /**
+     * Additional class(es) to apply to the dropdown toggle.
+     */
+    dropdownToggleClass: {
+      type: String,
+      required: false,
+      default: ''
+    },
+    /**
+     * Additional class(es) to apply to the sort direction toggle button.
+     */
+    sortDirectionToggleClass: {
+      type: String,
+      required: false,
+      default: ''
+    }
+  },
+  computed: {
+    localSortDirection() {
+      return this.isAscending ? 'sort-lowest' : 'sort-highest';
+    },
+    sortDirectionText() {
+      if (this.sortDirectionToolTip) return this.sortDirectionToolTip;
+      return this.isAscending ? translate('GlSorting.sortAscending', 'Sort direction: ascending') : translate('GlSorting.sortDescending', 'Sort direction: descending');
+    },
+    useListbox() {
+      return Boolean(this.sortOptions);
+    },
+    listboxToggleClass() {
+      return [this.dropdownToggleClass, 'gl-rounded-top-right-none!', 'gl-rounded-bottom-right-none!', 'gl-focus-z-index-1'];
+    }
+  },
+  methods: {
+    toggleSortDirection() {
+      const newDirection = !this.isAscending;
+      /**
+       * Emitted when the sort direction button is clicked.
+       *
+       * The event's payload will be true if the direction has been changed to
+       * ascending, or false if descending.
+       *
+       * @property {boolean} isAscending
+       */
+      this.$emit('sortDirectionChange', newDirection);
+    },
+    onSortByChanged(event) {
+      /**
+       * Emitted when the sort field is changed.
+       *
+       * The event's payload is the value of the selected sort field.
+       *
+       * Only emitted when using the `sortOptions` prop.
+       *
+       * @property {string|number} value
+       */
+      this.$emit('sortByChange', event);
+    }
+  }
+};
+/* 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-button-group',{staticClass:"gl-sorting"},[(_vm.useListbox)?_c('gl-collapsible-listbox',{class:_vm.dropdownClass,attrs:{"toggle-text":_vm.text,"items":_vm.sortOptions,"selected":_vm.sortBy,"toggle-class":_vm.listboxToggleClass,"placement":"right"},on:{"select":_vm.onSortByChanged}}):_c('gl-dropdown',_vm._b({class:_vm.dropdownClass,attrs:{"text":_vm.text,"category":"secondary","toggle-class":_vm.dropdownToggleClass,"right":""}},'gl-dropdown',_vm.$props,false),[_vm._t("default")],2),_vm._v(" "),_c('gl-button',{directives:[{name:"gl-tooltip",rawName:"v-gl-tooltip"}],class:['sorting-direction-button', _vm.sortDirectionToggleClass],attrs:{"title":_vm.sortDirectionText,"icon":_vm.localSortDirection,"aria-label":_vm.sortDirectionText},on:{"click":_vm.toggleSortDirection}})],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/sorting/sorting_item.js ADDED Viewed

@@ -0,0 +1,109 @@
+import GlDropdownItem from '../dropdown/dropdown_item';
+import GlIcon from '../icon/icon';
+import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
+/**
+ * Sorting Item
+ *
+ * NOTE: This component is deprecated. Instead, use the `sortOptions` prop of
+ * `GlSorting`.
+ *
+ * This is written as a functional component because it is a simple wrapper over
+ * the GlDropdownItem component and does not use internal state. Functional
+ * components are cheaper to render and often used as wrappers like this. We're
+ * not using the <template functional> syntax here because it does not support
+ * custom child components wihtout extra work inside GitLab or extra work
+ * required by the user.
+ */
+var script = {
+  name: 'GlSortingItem',
+  functional: true,
+  props: {
+    /**
+     * Adds a check mark next to the item to indicate it is active.
+     */
+    active: {
+      type: Boolean,
+      default: false,
+      required: false
+    },
+    /**
+     * If given, makes the item a link pointing to the given value. Otherwise,
+     * the item is a button.
+     */
+    href: {
+      type: String,
+      default: null,
+      required: false
+    }
+  },
+  /**
+   * The content of the item.
+   * @slot default
+   */
+  render(createElement, _ref) {
+    let {
+      scopedSlots,
+      data,
+      props = {}
+    } = _ref;
+    const classNames = `gl-sorting-item js-active-icon gl-flex-shrink-0 gl-mr-2 ${props.active ? '' : 'inactive gl-visibility-hidden'}`;
+    const icon = createElement(GlIcon, {
+      class: classNames,
+      attrs: {
+        name: 'mobile-issue-close',
+        size: 16,
+        ariaLabel: 'Selected'
+      }
+    });
+    return createElement(GlDropdownItem, {
+      ...data,
+      attrs: {
+        ...props
+      },
+      scopedSlots: {
+        default: () => {
+          var _scopedSlots$default;
+          return [icon, (_scopedSlots$default = scopedSlots.default) === null || _scopedSlots$default === void 0 ? void 0 : _scopedSlots$default.call(scopedSlots)];
+        }
+      }
+    });
+  }
+};
+/* script */
+const __vue_script__ = script;
+/* template */
+  /* 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__ = undefined;
+  /* style inject */
+  /* style inject SSR */
+  /* style inject shadow dom */
+  const __vue_component__ = __vue_normalize__(
+    {},
+    __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/table/constants.js ADDED Viewed

@@ -0,0 +1,5 @@
+const tableFullSlots = ['bottom-row', 'empty', 'emptyfiltered', 'table-busy', 'thead-top', 'top-row'];
+const tableFullProps = ['api-url', 'busy', 'current-page', 'empty-filtered-html', 'empty-filtered-text', 'empty-html', 'empty-text', 'filter', 'filter-debounce', 'filter-function', 'filter-ignored-fields', 'filter-included-fields', 'label-sort-asc', 'label-sort-clear', 'label-sort-desc', 'no-footer-sorting', 'no-local-sorting', 'no-provider-filtering', 'no-provider-paging', 'no-provider-sorting', 'no-select-on-click', 'no-sort-reset', 'per-page', 'select-mode', 'selectable', 'selected-variant', 'show-empty', 'sort-by', 'sort-compare', 'sort-compare-locale', 'sort-compare-options', 'sort-desc', 'sort-direction', 'sort-icon-left', 'sort-null-last'];
+const glTableLiteWarning = 'This GlTable could be a GlTableLite component, please consider using GlTableLite instead of GlTable to reduce the page bundlesize more about this here: https://gitlab-org.gitlab.io/gitlab-ui/?path=/docs/base-table-table-lite--default';
+export { glTableLiteWarning, tableFullProps, tableFullSlots };

package/dist/components/base/table/table.js ADDED Viewed

@@ -0,0 +1,89 @@
+import { BTable } from 'bootstrap-vue/esm/index.js';
+import { isDev, logWarning } from '../../../utils/utils';
+import { tableFullProps, tableFullSlots, glTableLiteWarning } from './constants';
+import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
+//
+const shouldUseFullTable = _ref => {
+  let {
+    $attrs,
+    $scopedSlots
+  } = _ref;
+  return tableFullProps.some(prop => $attrs[prop] !== undefined) || tableFullSlots.some(slot => $scopedSlots[slot] !== undefined);
+};
+const {
+  tableClass
+} = BTable.options.props;
+var script = {
+  name: 'GlTable',
+  components: {
+    BTable
+  },
+  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];
+    }
+  },
+  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);
+    }
+  }
+};
+/* 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('b-table',_vm._g(_vm._b({attrs:{"table-class":_vm.localTableClass,"fields":_vm.fields},scopedSlots:_vm._u([_vm._l((Object.keys(_vm.$scopedSlots)),function(slot){return {key:slot,fn:function(scope){return [_vm._t(slot,null,null,scope)]}}})],null,true)},'b-table',_vm.$attrs,false),_vm.$listeners))};
+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/table_lite/table_lite.js ADDED Viewed

@@ -0,0 +1,72 @@
+import { BTableLite } from 'bootstrap-vue/esm/index.js';
+import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
+const {
+  tableClass
+} = BTableLite.options.props;
+var script = {
+  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 */
+const __vue_script__ = script;
+/* template */
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('b-table-lite',_vm._g(_vm._b({attrs:{"table-class":_vm.localTableClass,"fields":_vm.fields},scopedSlots:_vm._u([_vm._l((Object.keys(_vm.$scopedSlots)),function(slot){return {key:slot,fn:function(scope){return [_vm._t(slot,null,null,scope)]}}})],null,true)},'b-table-lite',_vm.$attrs,false),_vm.$listeners))};
+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/tabs/constants.js ADDED Viewed

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