@gitlab/ui
Version:
GitLab UI Components
203 lines (186 loc) • 6.55 kB
JavaScript
import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
var script = {
data: function data() {
return {
// Generated with https://github.com/marak/Faker.js/
users: [{
avatar_url: 'https://picsum.photos/id/786/64/64',
id: 1,
name: 'Jett Kulas',
username: '@Vidal_Hilpert'
}, {
avatar_url: 'https://picsum.photos/id/823/64/64',
id: 2,
name: 'Blaze Thompson',
username: '@Otto_Medhurst'
}, {
avatar_url: 'https://picsum.photos/id/832/64/64',
id: 3,
name: 'Russel Rath',
username: '@Joy_Sanford30'
}, {
avatar_url: 'https://picsum.photos/id/838/64/64',
id: 4,
name: 'Lisandro Stiedemann',
username: '@Consuelo_Durgan'
}, {
avatar_url: 'https://picsum.photos/id/883/64/64',
id: 5,
name: 'Adela Champlin',
username: '@Tiana_Shanahan'
}, {
avatar_url: 'https://picsum.photos/id/1005/64/64',
id: 6,
name: 'Keith Rogahn',
username: '@Jackeline.Moore'
}, {
avatar_url: 'https://picsum.photos/id/1011/64/64',
id: 7,
name: 'Alek Lakin',
username: '@Ike98'
}, {
avatar_url: 'https://picsum.photos/id/1012/64/64',
id: 8,
name: 'Alek Bogan',
username: '@Wilton.Dare'
}, {
avatar_url: 'https://picsum.photos/id/1027/64/64',
id: 9,
name: 'Ismael Abbott',
username: '@Junius.Lynch58'
}, {
avatar_url: 'https://picsum.photos/id/1062/64/64',
id: 10,
name: 'Emil Bartell',
username: '@Vergie.Brown78'
}, {
avatar_url: 'https://picsum.photos/id/1074/64/64',
id: 11,
name: 'Foster Kutch',
username: '@Lyda_Cummerata'
}, {
avatar_url: 'https://picsum.photos/id/177/64/64',
id: 12,
name: 'Alexandra Schuppe',
username: '@Jana_Fadel'
}, {
avatar_url: 'https://picsum.photos/id/237/64/64',
id: 13,
name: 'Ervin Emard',
username: '@Hayden24'
}, {
avatar_url: 'https://picsum.photos/id/375/64/64',
id: 14,
name: 'Kailey Frami',
username: '@Ima46'
}, {
avatar_url: 'https://picsum.photos/id/550/64/64',
id: 15,
name: 'Xavier Prohaska',
username: '@Theron15'
}, {
avatar_url: 'https://picsum.photos/id/602/64/64',
id: 16,
name: 'Freddy Sanford',
username: '@Luciano.Kuphal6'
}, {
avatar_url: 'https://picsum.photos/id/64/64/64',
id: 17,
name: 'Alvah Rempel',
username: '@Bo89'
}, {
avatar_url: 'https://picsum.photos/id/65/64/64',
id: 18,
name: 'Gavin Mann',
username: '@Cedrick56'
}, {
avatar_url: 'https://picsum.photos/id/660/64/64',
id: 19,
name: 'Alexie Hagenes',
username: '@Berry_Erdman'
}, {
avatar_url: 'https://picsum.photos/id/996/64/64',
id: 20,
name: 'Cortez Wunsch',
username: '@Kenyon.Crist3'
}],
filteredUsers: [],
loading: false,
inputText: '',
selectedTokens: []
};
},
computed: {
emailIsValid: function emailIsValid() {
return /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/.test(this.inputText) && !this.filteredUsers.length;
}
},
methods: {
handleTextInput: function handleTextInput(value) {
this.inputText = value;
if (this.inputText === '') {
this.filteredUsers = this.users;
return;
}
this.loading = true;
this.filterUsers();
},
handleFocus: function handleFocus() {
var _this = this;
this.loading = true;
if (this.inputText !== '') {
this.filterUsers();
} else {
setTimeout(function () {
_this.filteredUsers = _this.users;
_this.loading = false;
}, 500);
}
},
filterUsers: function filterUsers() {
var _this2 = this;
setTimeout(function () {
_this2.filteredUsers = _this2.users.filter(function (user) {
var searchQuery = _this2.inputText.toLowerCase();
return user.name.toLowerCase().includes(searchQuery) || user.username.toLowerCase().includes(searchQuery);
});
_this2.loading = false;
}, 500);
}
}
};
/* 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-token-selector',{attrs:{"dropdown-items":_vm.filteredUsers,"loading":_vm.loading,"allow-user-defined-tokens":_vm.emailIsValid},on:{"text-input":_vm.handleTextInput,"focus":_vm.handleFocus},scopedSlots:_vm._u([{key:"token-content",fn:function(ref){
var token = ref.token;
return [(token.avatar_url)?_c('gl-avatar',{attrs:{"src":token.avatar_url,"size":16}}):_vm._e(),_vm._v("\n "+_vm._s(token.name)+"\n ")]}},{key:"dropdown-item-content",fn:function(ref){
var dropdownItem = ref.dropdownItem;
return [_c('div',{staticClass:"gl-display-flex"},[_c('gl-avatar',{attrs:{"src":dropdownItem.avatar_url,"size":32}}),_vm._v(" "),_c('div',[_c('p',{staticClass:"gl-m-0"},[_vm._v(_vm._s(dropdownItem.name))]),_vm._v(" "),_c('p',{staticClass:"gl-m-0 gl-text-gray-700"},[_vm._v(_vm._s(dropdownItem.username))])])],1)]}},{key:"user-defined-token-content",fn:function(ref){
var text = ref.inputText;
return [_vm._v("\n Invite \""+_vm._s(text)+"\" by email\n ")]}}]),model:{value:(_vm.selectedTokens),callback:function ($$v) {_vm.selectedTokens=$$v;},expression:"selectedTokens"}})};
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__;