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

GitLab UI Components

import GlButton from '../button/button';
import GlButtonGroup from '../button_group/button_group';
import GlDropdown from '../dropdown/dropdown';
import GlTooltip from '../../../directives/tooltip';
import GlIcon from '../icon/icon';
import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';

var script = {
  name: 'GlSorting',
  components: {
    GlButton: GlButton,
    GlButtonGroup: GlButtonGroup,
    GlDropdown: GlDropdown,
    GlIcon: GlIcon
  },
  directives: {
    GlTooltip: GlTooltip
  },
  props: {
    text: {
      type: String,
      required: false,
      default: ''
    },
    isAscending: {
      type: Boolean,
      required: false,
      default: false
    },
    sortDirectionToolTip: {
      type: String,
      required: false,
      default: 'Sort direction'
    }
  },
  computed: {
    localSortDirection: function localSortDirection() {
      return this.isAscending ? 'sort-lowest' : 'sort-highest';
    },
    sortDirectionAriaLabel: function sortDirectionAriaLabel() {
      return this.isAscending ? 'Sorting Direction: Ascending' : 'Sorting Direction: Descending';
    }
  },
  methods: {
    toggleSortDirection: function toggleSortDirection() {
      var newDirection = !this.isAscending;
      this.$emit('sortDirectionChange', newDirection);
    }
  }
};

/* 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-dropdown',_vm._b({attrs:{"text":_vm.text,"toggle-class":"dropdown-menu-toggle","right":""}},'gl-dropdown',_vm.$props,false),[_vm._t("default")],2),_vm._v(" "),_c('gl-button',{directives:[{name:"gl-tooltip",rawName:"v-gl-tooltip"}],staticClass:"sorting-direction-button",attrs:{"title":_vm.sortDirectionToolTip},on:{"click":_vm.toggleSortDirection}},[_c('gl-icon',{attrs:{"name":_vm.localSortDirection,"aria-label":_vm.sortDirectionAriaLabel,"size":16}})],1)],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__;