@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() {
    return {
      searchTerm: '',
      tagNames: []
    };
  },

  computed: {
    filteredTagNames() {
      return this.tagNames.filter(tagName => tagName.includes(this.searchTerm.toLowerCase()));
    },

    filteredTagNamesLength() {
      return this.filteredTagNames.length === 0;
    }

  },

  mounted() {
    const tagNames = new Set();
    const elements = document.querySelectorAll('*');
    elements.forEach(element => tagNames.add(element.tagName.toLowerCase()));
    this.tagNames = Array.from(tagNames).sort();
  }

};

/* 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","header-text":"Header"},scopedSlots:_vm._u([{key:"header",fn:function(){return [_c('gl-search-box-by-type',{model:{value:(_vm.searchTerm),callback:function ($$v) {_vm.searchTerm=(typeof $$v === 'string'? $$v.trim(): $$v);},expression:"searchTerm"}})]},proxy:true}])},[_vm._v(" "),_vm._l((_vm.filteredTagNames),function(tagName){return _c('gl-dropdown-item',{key:tagName},[_vm._v("\n    "+_vm._s(tagName)+"\n  ")])}),_vm._v(" "),_c('div',{directives:[{name:"show",rawName:"v-show",value:(_vm.filteredTagNamesLength),expression:"filteredTagNamesLength"}],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__;