@gitlab/ui/dist/components/base/sorting/sorting.documentation.js

GitLab UI Components

import examples from './examples';

var description = "# Sorting\n\n<!-- STORY -->\n\n## Usage\n\nThe sorting component allows the user to select the field on which they would like to sort a list and whether to sort in ascending or descending order.\n\nThe dropdown part of the sorting component is a standard `gl-dropdown` component, with the items exposed as a slot. Inside the `gl-sorting` component, you should add a list of `gl-sorting-item` components to construct your sorting options. The check icon will be displayed when a `gl-sorting-item` has its `active` prop set to `true`.\n\nThe `gl-sorting` component expects its parent component to manage the `text` and `is-ascending` props. It does not track these using internal state.\n\nA sort update should be triggered by clicking a `gl-sorting-item` component (and therefore should have a `@click` event bound or a `href` prop in the case of navigation) or by clicking the direction button. You should bind a function to the `sortDirectionChange` event to receive the new `is-ascending` value and re-order your data appropriately.\n\nA complete implementation example might look like:\n\n```javascript\n<template>\n  <gl-sorting\n    :text=\"dropdownText\"\n    :is-ascending=\"isAscending\"\n    @sortDirectionChange=\"onDirectionChange\"\n  >\n    <gl-sorting-item @click=\"onSortItemClick('Item 1')\">Item 1</gl-sorting-item>\n    <gl-sorting-item @click=\"onSortItemClick('Item 2')\">Item 2</gl-sorting-item>\n    <gl-sorting-item @click=\"onSortItemClick('Item 3')\">Item 3</gl-sorting-item>\n  </gl-sorting>\n</template>\n\n<script>\nimport { GlSorting, GlSortingItem } from '@gitlab/ui';\n\nexport default {\n  components: {\n    GlSorting,\n    GlSortingItem,\n  },\n  data() {\n    return {\n      isAscending: false,\n      dropdownText: 'Sort...'\n    }\n  },\n  methods: {\n    onSortItemClick(sortByItem) {\n      this.dropdownText = sortByItem;\n      this.sortMyData(sortByItem, this.isAscending);\n    },\n    onDirectionChange(isAscending) {\n      this.isAscending = isAscending;\n      this.sortMyData(this.dropdownText, this.isAscending);\n    },\n    sortMyData(sortBy, isAscending) {\n      // Use sortBy and direction to sort your data\n    },\n  }\n}\n</script>\n```";

var sorting_documentation = {
  description: description,
  bootstrapComponent: null,
  examples: examples,
  events: [{
    event: 'sortDirectionChange',
    args: [{
      arg: 'isAscending',
      description: '(Boolean) will be true if the direction has been changed to ascending or false if descending'
    }],
    description: 'Emitted when the sort direction button is clicked.'
  }],
  slots: [{
    name: 'default',
    description: 'Slot to place the dropdown items, works best with a gl-sorting-item component.'
  }]
};

export default sorting_documentation;