npm - @gitlab/ui - Versions diffs - 132.0.0 → 132.0.2 - Mend

@gitlab/ui 132.0.0 → 132.0.2

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 (403) hide show

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

@@ -0,0 +1,73 @@
+import GlButtonGroup from '../button_group/button_group';
+import GlButton from '../button/button';
+import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
+const validateOptionsProp = options => {
+  const requiredOptionPropType = {
+    value: ['string', 'number', 'boolean'],
+    disabled: ['boolean', 'undefined']
+  };
+  const optionProps = Object.keys(requiredOptionPropType);
+  return options.every(option => {
+    if (!option) {
+      return false;
+    }
+    return optionProps.every(name => requiredOptionPropType[name].includes(typeof option[name]));
+  });
+};
+var script = {
+  name: 'GlSegmentedControl',
+  components: {
+    GlButtonGroup,
+    GlButton
+  },
+  props: {
+    options: {
+      type: Array,
+      required: true,
+      validator: validateOptionsProp
+    },
+    value: {
+      type: [String, Number, Boolean],
+      required: true
+    }
+  }
+};
+/* 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',_vm._l((_vm.options),function(option){return _c('gl-button',_vm._b({key:option.value,attrs:{"disabled":!!option.disabled,"selected":_vm.value === option.value},on:{"click":function($event){return _vm.$emit('input', option.value)}}},'gl-button',option.props,false),[_vm._t("button-content",function(){return [_vm._v("\n      "+_vm._s(option.text)+"\n    ")]},null,option)],2)}),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__ = /*#__PURE__*/__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 { __vue_component__ as default };

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

@@ -0,0 +1,232 @@
+import { range } from 'lodash-es';
+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) {
+    var _data$attrs;
+    let {
+      props,
+      slots,
+      data
+    } = _ref;
+    const slotIsSet = () => slots().default;
+    const propValueOrDefault = (name, defaultValue) => props[name] !== null ? props[name] : defaultValue;
+    const inheritedClasses = data.class || (// Vue 3
+    (_data$attrs = data.attrs) === null || _data$attrs === void 0 ? void 0 : _data$attrs.class) ||
+    // Vue 2
+    '';
+    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-skeleton-loader-fill-background-color'
+        } : {
+          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: 'background-stop',
+      attrs: {
+        offset: '0%'
+      }
+    }, [createElement('animate', {
+      attrs: {
+        attributeName: 'offset',
+        values: '-2; 1',
+        dur: '1s',
+        repeatCount: 'indefinite'
+      }
+    })]), createElement('stop', {
+      class: 'shimmer-stop',
+      attrs: {
+        offset: '50%'
+      }
+    }, [createElement('animate', {
+      attrs: {
+        attributeName: 'offset',
+        values: '-1.5; 1.5',
+        dur: '1s',
+        repeatCount: 'indefinite'
+      }
+    })]), createElement('stop', {
+      class: 'background-stop',
+      attrs: {
+        offset: '100%'
+      }
+    }, [createElement('animate', {
+      attrs: {
+        attributeName: 'offset',
+        values: '-1; 2',
+        dur: '1s',
+        repeatCount: 'indefinite'
+      }
+    })])])])]);
+    if (slotIsSet()) {
+      return svg;
+    }
+    return createElement('div', {
+      staticClass: data.staticClass,
+      // Vue 2
+      class: ['gl-skeleton-loader-default-container gl-max-w-full', inheritedClasses],
+      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__ = /*#__PURE__*/__vue_normalize__(
+    {},
+    __vue_inject_styles__,
+    __vue_script__,
+    __vue_scope_id__,
+    __vue_is_functional_template__,
+    __vue_module_identifier__,
+    false,
+    undefined,
+    undefined,
+    undefined
+  );
+export { __vue_component__ as default };

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

@@ -0,0 +1,180 @@
+import { uniqueId } from 'lodash-es';
+import { GlTooltipDirective } from '../../../directives/tooltip/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 { translate } from '../../../utils/i18n';
+import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
+var script = {
+  name: 'GlSorting',
+  components: {
+    GlButton,
+    GlButtonGroup,
+    GlCollapsibleListbox
+  },
+  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: () => [],
+      // 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 GlCollapsibleListbox.
+     */
+    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: ''
+    },
+    /**
+     * Render the dropdown toggle button as a block element
+     */
+    block: {
+      type: Boolean,
+      required: false,
+      default: false
+    }
+  },
+  data() {
+    return {
+      sortingListboxId: uniqueId('sorting-listbox-')
+    };
+  },
+  computed: {
+    sortingListboxLabel() {
+      return translate('GlSorting.sortByLabel', 'Sort by:');
+    },
+    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');
+    }
+  },
+  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"},[_c('gl-collapsible-listbox',{class:_vm.dropdownClass,attrs:{"toggle-text":_vm.text,"items":_vm.sortOptions,"selected":_vm.sortBy,"toggle-class":_vm.dropdownToggleClass,"placement":"bottom-end","block":_vm.block,"toggle-aria-labelled-by":_vm.sortingListboxId},on:{"select":_vm.onSortByChanged}}),_vm._v(" "),_c('span',{staticClass:"gl-sr-only",attrs:{"id":_vm.sortingListboxId}},[_vm._v(_vm._s(_vm.sortingListboxLabel))]),_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__ = /*#__PURE__*/__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 { __vue_component__ as default };

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', '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://design.gitlab.com/storybook?path=/docs/base-table-table-lite--default';
+export { glTableLiteWarning, tableFullProps, tableFullSlots };

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

@@ -0,0 +1,187 @@
+import { BTable } from '../../../vendor/bootstrap-vue/src/components/table/table';
+import { isDev, logWarning } from '../../../utils/utils';
+import GlLoadingIcon from '../loading_icon/loading_icon';
+import { glTableLiteWarning, tableFullProps, tableFullSlots } 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,
+    GlLoadingIcon
+  },
+  inheritAttrs: false,
+  props: {
+    /**
+     * Additional CSS class(es) to apply to the table element.
+     */
+    tableClass,
+    /**
+     * Array of items displayed in the table as rows.
+     */
+    items: {
+      type: Array,
+      required: false,
+      default: () => []
+    },
+    /**
+     * Array of field definitions for table columns. Each field can be a string (column key) or an object with properties like 'key', 'label', 'sortable', 'thClass', etc.
+     */
+    fields: {
+      type: Array,
+      required: false,
+      default: null
+    },
+    /**
+     * When true, makes the table header sticky so it remains visible when scrolling.
+     */
+    stickyHeader: {
+      type: Boolean,
+      default: false,
+      required: false
+    },
+    /**
+     * The field key to sort by.
+     */
+    sortBy: {
+      type: String,
+      required: false,
+      default: undefined
+    },
+    /**
+     * When true, sorts in descending order. When false, sorts in ascending order.
+     */
+    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() {
+      var _this$fields;
+      return (_this$fields = this.fields) === null || _this$fields === void 0 ? void 0 : _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, {
+        name: 'GlTable',
+        element: this.$el
+      });
+    }
+  },
+  methods: {
+    isSortable(_ref2) {
+      let {
+        field
+      } = _ref2;
+      return field === null || field === void 0 ? void 0 : field.sortable;
+    },
+    activeSortingColumn(_ref3) {
+      let {
+        field
+      } = _ref3;
+      return this.localSortBy === (field === null || field === void 0 ? void 0 : field.key);
+    },
+    getSortingIcon(_ref4) {
+      let {
+        field
+      } = _ref4;
+      if (this.activeSortingColumn({
+        field
+      })) {
+        if (this.localSortDesc) {
+          return '↓';
+        }
+        return '↑';
+      }
+      if (this.$attrs['sort-direction'] === 'desc') {
+        return '↓';
+      }
+      return '↑';
+    }
+  }
+};
+/* 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.computedFields,"items":_vm.items,"sort-by":_vm.localSortBy,"sort-desc":_vm.localSortDesc,"no-sort-reset":""},on:{"update:sortBy":function($event){_vm.localSortBy=$event;},"update:sort-by":function($event){_vm.localSortBy=$event;},"update:sortDesc":function($event){_vm.localSortDesc=$event;},"update:sort-desc":function($event){_vm.localSortDesc=$event;}},scopedSlots:_vm._u([_vm._l((Object.keys(_vm.$scopedSlots)),function(slotName){return {key:slotName,fn:function(scope){return [_vm._t(slotName,null,null,scope)]}}}),_vm._l((_vm.headSlots),function(headSlotName){return {key:headSlotName,fn:function(scope){return [_c('div',{key:headSlotName,staticClass:"gl-flex"},[_vm._t(headSlotName,function(){return [_c('span',[_vm._v(_vm._s(scope.label))])]},null,scope),(_vm.isSortable(scope))?[_c('div',{staticClass:"gl-table-th-sort-icon-wrapper gl-flex gl-w-5 gl-justify-center"},[_c('span',{class:{ 'gl-hidden': !_vm.activeSortingColumn(scope) },attrs:{"name":"sort-icon","data-testid":"sort-icon"}},[_vm._v("\n            "+_vm._s(_vm.getSortingIcon(scope))+"\n          ")])])]:_vm._e()],2)]}}}),{key:"table-busy",fn:function(){return [_vm._t("table-busy",function(){return [_c('gl-loading-icon',{attrs:{"size":"lg"}})]})]},proxy:true},{key:"empty",fn:function(scope){return [_vm._t("empty",function(){return [_c('p',{staticClass:"gl-mb-0 gl-py-2 gl-text-subtle"},[_vm._v(_vm._s(scope.emptyText))])]},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__ = /*#__PURE__*/__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 { __vue_component__ as default };