Storyblok Iconselector

export.js

const Fieldtype = {
  mixins: [window.Storyblok.plugin],
  template: `<div>
  <div class="uk-margin-bottom uk-text-center" v-if="model.icon">
    Current icon: <i :class="model.type + ' ' + model.icon"></i>
    <small style="cursor:pointer;" @click="removeIcon">(remove)</small>
  </div>
  <input class="uk-width-1-1 uk-margin-bottom" v-model="search" placeholder="Search icons" />
  <span class="icon-link" @click="setIcon(icon)" :key="icon.icon" v-for="icon in filteredIcons" style="margin: 5px; display: inline-block;">
    <i style="cursor:pointer;" :class="icon.type + ' ' + icon.icon"></i>
  </span>
</div>`,
  data() {
    return {
      search: '',
      solid: ['address-book','address-card','adjust','align-center','align-justify','align-left','align-right','allergies','ambulance','american-sign-language-interpreting','anchor','angle-double-down','angle-double-left','angle-double-right','angle-double-up','angle-down','angle-left','angle-right','angle-up','archive','arrow-alt-circle-down','arrow-alt-circle-left','arrow-alt-circle-right','arrow-alt-circle-up','arrow-circle-down','arrow-circle-left','arrow-circle-right','arrow-circle-up','arrow-down','arrow-left','arrow-right','arrow-up','arrows-alt-h','arrows-alt-v','arrows-alt','assistive-listening-systems','asterisk','at','audio-description','backward','balance-scale','ban','band-aid','barcode','bars','baseball-ball','basketball-ball','bath','battery-empty','battery-full','battery-half','battery-quarter','battery-three-quarters','bed','beer','bell-slash','bell','bicycle','binoculars','birthday-cake','blind','bold','bolt','bomb','book','bookmark','bowling-ball','box-open','box','boxes','braille','briefcase-medical','briefcase','bug','building','bullhorn','bullseye','burn','bus','calculator','calendar-alt','calendar-check','calendar-minus','calendar-plus','calendar-times','calendar','camera-retro','camera','capsules','car','caret-down','caret-left','caret-right','caret-square-down','caret-square-left','caret-square-right','caret-square-up','caret-up','cart-arrow-down','cart-plus','certificate','chart-area','chart-bar','chart-line','chart-pie','check-circle','check-square','check','chess-bishop','chess-board','chess-king','chess-knight','chess-pawn','chess-queen','chess-rook','chess','chevron-circle-down','chevron-circle-left','chevron-circle-right','chevron-circle-up','chevron-down','chevron-left','chevron-right','chevron-up','child','circle-notch','circle','clipboard-check','clipboard-list','clipboard','clock','clone','closed-captioning','cloud-download-alt','cloud-upload-alt','cloud','code-branch','code','coffee','cog','cogs','columns','comment-alt','comment-dots','comment-slash','comment','comments','compass','compress','copy','copyright','couch','credit-card','crop','crosshairs','cube','cubes','cut','database','deaf','desktop','diagnoses','dna','dollar-sign','dolly-flatbed','dolly','donate','dot-circle','dove','download','edit','eject','ellipsis-h','ellipsis-v','envelope-open','envelope-square','envelope','eraser','euro-sign','exchange-alt','exclamation-circle','exclamation-triangle','exclamation','expand-arrows-alt','expand','external-link-alt','external-link-square-alt','eye-dropper','eye-slash','eye','fast-backward','fast-forward','fax','female','fighter-jet','file-alt','file-archive','file-audio','file-code','file-excel','file-image','file-medical-alt','file-medical','file-pdf','file-powerpoint','file-video','file-word','file','film','filter','fire-extinguisher','fire','first-aid','flag-checkered','flag','flask','folder-open','folder','font','football-ball','forward','frown','futbol','gamepad','gavel','gem','genderless','gift','glass-martini','globe','golf-ball','graduation-cap','h-square','hand-holding-heart','hand-holding-usd','hand-holding','hand-lizard','hand-paper','hand-peace','hand-point-down','hand-point-left','hand-point-right','hand-point-up','hand-pointer','hand-rock','hand-scissors','hand-spock','hands-helping','hands','handshake','hashtag','hdd','heading','headphones','heart','heartbeat','history','hockey-puck','home','hospital-alt','hospital-symbol','hospital','hourglass-end','hourglass-half','hourglass-start','hourglass','i-cursor','id-badge','id-card-alt','id-card','image','images','inbox','indent','industry','info-circle','info','italic','key','keyboard','language','laptop','leaf','lemon','level-down-alt','level-up-alt','life-ring','lightbulb','link','lira-sign','list-alt','list-ol','list-ul','list','location-arrow','lock-open','lock','long-arrow-alt-down','long-arrow-alt-left','long-arrow-alt-right','long-arrow-alt-up','low-vision','magic','magnet','male','map-marker-alt','map-marker','map-pin','map-signs','map','mars-double','mars-stroke-h','mars-stroke-v','mars-stroke','mars','medkit','meh','mercury','microchip','microphone-slash','microphone','minus-circle','minus-square','minus','mobile-alt','mobile','money-bill-alt','moon','motorcycle','mouse-pointer','music','neuter','newspaper','notes-medical','object-group','object-ungroup','outdent','paint-brush','pallet','paper-plane','paperclip','parachute-box','paragraph','paste','pause-circle','pause','paw','pen-square','pencil-alt','people-carry','percent','phone-slash','phone-square','phone-volume','phone','piggy-bank','pills','plane','play-circle','play','plug','plus-circle','plus-square','plus','podcast','poo','pound-sign','power-off','prescription-bottle-alt','prescription-bottle','print','procedures','puzzle-piece','qrcode','question-circle','question','quidditch','quote-left','quote-right','random','recycle','redo-alt','redo','registered','reply-all','reply','retweet','ribbon','road','rocket','rss-square','rss','ruble-sign','rupee-sign','save','search-minus','search-plus','search','seedling','server','share-alt-square','share-alt','share-square','share','shekel-sign','shield-alt','ship','shipping-fast','shopping-bag','shopping-basket','shopping-cart','shower','sign-in-alt','sign-language','sign-out-alt','sign','signal','sitemap','sliders-h','smile','smoking','snowflake','sort-alpha-down','sort-alpha-up','sort-amount-down','sort-amount-up','sort-down','sort-numeric-down','sort-numeric-up','sort-up','sort','space-shuttle','spinner','square-full','square','star-half','star','step-backward','step-forward','stethoscope','sticky-note','stop-circle','stop','stopwatch','street-view','strikethrough','subscript','subway','suitcase','sun','superscript','sync-alt','sync','syringe','table-tennis','table','tablet-alt','tablet','tablets','tachometer-alt','tag','tags','tape','tasks','taxi','terminal','text-height','text-width','th-large','th-list','th','thermometer-empty','thermometer-full','thermometer-half','thermometer-quarter','thermometer-three-quarters','thermometer','thumbs-down','thumbs-up','thumbtack','ticket-alt','times-circle','times','tint','toggle-off','toggle-on','trademark','train','transgender-alt','transgender','trash-alt','trash','tree','trophy','truck-loading','truck-moving','truck','tty','tv','umbrella','underline','undo-alt','undo','universal-access','university','unlink','unlock-alt','unlock','upload','user-circle','user-md','user-plus','user-secret','user-times','user','users','utensil-spoon','utensils','venus-double','venus-mars','venus','vial','vials','video-slash','video','volleyball-ball','volume-down','volume-off','volume-up','warehouse','weight','wheelchair','wifi','window-close','window-maximize','window-minimize','window-restore','wine-glass','won-sign','wrench','x-ray','yen-sign'],
      brands: ['500px','accessible-icon','accusoft','adn','adversal','affiliatetheme','algolia','amazon-pay','amazon','amilia','android','angellist','angrycreative','angular','app-store-ios','app-store','apper','apple-pay','apple','asymmetrik','audible','autoprefixer','avianex','aviato','aws','bandcamp','behance-square','behance','bimobject','bitbucket','bitcoin','bity','black-tie','blackberry','blogger-b','blogger','bluetooth-b','bluetooth','btc','buromobelexperte','buysellads','cc-amazon-pay','cc-amex','cc-apple-pay','cc-diners-club','cc-discover','cc-jcb','cc-mastercard','cc-paypal','cc-stripe','cc-visa','centercode','chrome','cloudscale','cloudsmith','cloudversify','codepen','codiepie','connectdevelop','contao','cpanel','creative-commons','css3-alt','css3','cuttlefish','d-and-d','dashcube','delicious','deploydog','deskpro','deviantart','digg','digital-ocean','discord','discourse','dochub','docker','draft2digital','dribbble-square','dribbble','dropbox','drupal','dyalog','earlybirds','edge','elementor','ember','empire','envira','erlang','ethereum','etsy','expeditedssl','facebook-f','facebook-messenger','facebook-square','facebook','firefox','first-order','firstdraft','flickr','flipboard','fly','font-awesome-alt','font-awesome-flag','font-awesome','fonticons-fi','fonticons','fort-awesome-alt','fort-awesome','forumbee','foursquare','free-code-camp','freebsd','get-pocket','gg-circle','gg','git-square','git','github-alt','github-square','github','gitkraken','gitlab','gitter','glide-g','glide','gofore','goodreads-g','goodreads','google-drive','google-play','google-plus-g','google-plus-square','google-plus','google-wallet','google','gratipay','grav','gripfire','grunt','gulp','hacker-news-square','hacker-news','hips','hire-a-helper','hooli','hotjar','houzz','html5','hubspot','imdb','instagram','internet-explorer','ioxhost','itunes-note','itunes','jenkins','joget','joomla','js-square','js','jsfiddle','keycdn','kickstarter-k','kickstarter','korvue','laravel','lastfm-square','lastfm','leanpub','less','line','linkedin-in','linkedin','linode','linux','lyft','magento','maxcdn','medapps','medium-m','medium','medrt','meetup','microsoft','mix','mixcloud','mizuni','modx','monero','napster','nintendo-switch','node-js','node','npm','ns8','nutritionix','odnoklassniki-square','odnoklassniki','opencart','openid','opera','optin-monster','osi','page4','pagelines','palfed','patreon','paypal','periscope','phabricator','phoenix-framework','php','pied-piper-alt','pied-piper-pp','pied-piper','pinterest-p','pinterest-square','pinterest','playstation','product-hunt','pushed','python','qq','quinscape','quora','ravelry','react','readme','rebel','red-river','reddit-alien','reddit-square','reddit','rendact','renren','replyd','resolving','rocketchat','rockrms','safari','sass','schlix','scribd','searchengin','sellcast','sellsy','servicestack','shirtsinbulk','simplybuilt','sistrix','skyatlas','skype','slack-hash','slack','slideshare','snapchat-ghost','snapchat-square','snapchat','soundcloud','speakap','spotify','stack-exchange','stack-overflow','staylinked','steam-square','steam-symbol','steam','sticker-mule','strava','stripe-s','stripe','studiovinari','stumbleupon-circle','stumbleupon','superpowers','supple','telegram-plane','telegram','tencent-weibo','themeisle','trello','tripadvisor','tumblr-square','tumblr','twitch','twitter-square','twitter','typo3','uber','uikit','uniregistry','untappd','usb','ussunnah','vaadin','viacoin','viadeo-square','viadeo','viber','vimeo-square','vimeo-v','vimeo','vine','vk','vnv','vuejs','weibo','weixin','whatsapp-square','whatsapp','whmcs','wikipedia-w','windows','wordpress-simple','wordpress','wpbeginner','wpexplorer','wpforms','xbox','xing-square','xing','y-combinator','yahoo','yandex-international','yandex','yelp','yoast','youtube-square','youtube']
    }
  },
  computed: {
    filteredIcons() {
      let solids = this.solid.filter((icon) => {
        return icon.indexOf(this.search) > -1
      })
      
      let brands = this.brands.filter((icon) => {
        return icon.indexOf(this.search) > -1
      })
      
      let result = []
      
      solids.forEach((icon) => {
        result.push({icon: 'fa-' + icon, type: 'fas'})
      })

      brands.forEach((icon) => {
        result.push({icon: 'fa-' + icon, type: 'fab'})
      })

      return result.slice(0, 25)
    }
  },
  methods: {
    initWith() {
      return {
        plugin: 'fontawesome-selector',
        icon: '',
        type: 'fas'
      }
    },
    setIcon(icon) {
      this.model.icon = ''
      this.$nextTick(() => {
        this.model.icon = icon.icon
        this.model.type = icon.type
      })
    },
    removeIcon() {
      this.model.icon = ''
      this.$nextTick(() => {
        this.model.icon = ''
        this.model.type = ''
      })
    },
    pluginCreated() {
      this.$sb.getScript('https://use.fontawesome.com/releases/v5.0.9/js/all.js', () => {})
    }
  },
  watch: {
    'model': {
      handler: function (value) {
        this.$emit('changed-model', value);
      },
      deep: true
    }
  }
}