@gitlab/ui/dist/components/base/dropdown/examples/dropdown.with_search.example.js

GitLab UI Components

import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';

//
//
//
//
//
//
//
//
//
//
//
//
var script = {
  data: function data() {
    return {
      searchTerm: '',
      tagNames: []
    };
  },
  computed: {
    filteredTagNames: function filteredTagNames() {
      var _this = this;

      return this.tagNames.filter(function (tagName) {
        return tagName.includes(_this.searchTerm.toLowerCase());
      });
    }
  },
  mounted: function mounted() {
    var tagNames = new Set();
    var elements = document.querySelectorAll('*');
    elements.forEach(function (element) {
      return tagNames.add(element.tagName.toLowerCase());
    });
    this.tagNames = Array.from(tagNames).sort();
  },
  methods: {
    getFirstItem: function getFirstItem() {
      return this.$el.querySelector('input');
    }
  }
};

/* 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-dropdown',{attrs:{"text":"Select HTML tag"}},[_c('gl-search-box-by-type',{staticClass:"m-2",model:{value:(_vm.searchTerm),callback:function ($$v) {_vm.searchTerm=(typeof $$v === 'string'? $$v.trim(): $$v);},expression:"searchTerm"}}),_vm._v(" "),_vm._l((_vm.filteredTagNames),function(tagName){return _c('gl-dropdown-item',{key:tagName},[_vm._v(_vm._s(tagName))])}),_vm._v(" "),_c('div',{directives:[{name:"show",rawName:"v-show",value:(_vm.filteredTagNames.length === 0),expression:"filteredTagNames.length === 0"}],staticClass:"text-secondary p-2"},[_vm._v("Nothing found…")])],2)};
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__;