datocms-plugin-better-links
Version:
A plugin that allows you see multiple fields when selecting a Links field type.
1 lines • 9.15 kB
JavaScript
(function(e){function t(t){for(var i,a,r=t[0],c=t[1],o=t[2],h=0,d=[];h<r.length;h++)a=r[h],l[a]&&d.push(l[a][0]),l[a]=0;for(i in c)Object.prototype.hasOwnProperty.call(c,i)&&(e[i]=c[i]);u&&u(t);while(d.length)d.shift()();return n.push.apply(n,o||[]),s()}function s(){for(var e,t=0;t<n.length;t++){for(var s=n[t],i=!0,r=1;r<s.length;r++){var c=s[r];0!==l[c]&&(i=!1)}i&&(n.splice(t--,1),e=a(a.s=s[0]))}return e}var i={},l={app:0},n=[];function a(t){if(i[t])return i[t].exports;var s=i[t]={i:t,l:!1,exports:{}};return e[t].call(s.exports,s,s.exports,a),s.l=!0,s.exports}a.m=e,a.c=i,a.d=function(e,t,s){a.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:s})},a.r=function(e){"undefined"!==typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},a.t=function(e,t){if(1&t&&(e=a(e)),8&t)return e;if(4&t&&"object"===typeof e&&e&&e.__esModule)return e;var s=Object.create(null);if(a.r(s),Object.defineProperty(s,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var i in e)a.d(s,i,function(t){return e[t]}.bind(null,i));return s},a.n=function(e){var t=e&&e.__esModule?function(){return e["default"]}:function(){return e};return a.d(t,"a",t),t},a.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},a.p="https://unpkg.com/datocms-plugin-better-links@0.0.7/dist/";var r=window["webpackJsonp"]=window["webpackJsonp"]||[],c=r.push.bind(r);r.push=t,r=r.slice();for(var o=0;o<r.length;o++)t(r[o]);var u=c;n.push([0,"chunk-vendors"]),s()})({0:function(e,t,s){e.exports=s("56d7")},1947:function(e,t,s){"use strict";var i=s("5f4b"),l=s.n(i);l.a},"37df":function(e,t,s){"use strict";var i=s("9441"),l=s.n(i);l.a},"56d7":function(e,t,s){"use strict";s.r(t);s("b107");var i=s("2b0e"),l=s("8d6e"),n=s.n(l),a=s("d619");const r=({url:e,token:t})=>new a["GraphQLClient"](e,{headers:{Authorization:t}});var c=function(){var e=this,t=e.$createElement,s=e._self._c||t;return s("div",{staticClass:"BetterLinks",attrs:{id:"app"}},[s("Selecty",{attrs:{items:e.items,"item-height":34,"scroller-max-height":136,searchValue:e.searchValue,loading:e.loading,placeholder:"Select..."},on:{"update:searchValue":function(t){e.searchValue=t}},model:{value:e.selected,callback:function(t){e.selected=t},expression:"selected"}}),s("div",{staticClass:"BetterLinks__action",on:{click:function(t){return t.preventDefault(),e.triggerAction(t)}}},[s("a",{staticClass:"flex items-center",attrs:{href:"#"}},[e._m(0),e._v("\n Create New "+e._s(e.fieldName)+"\n ")])])],1)},o=[function(){var e=this,t=e.$createElement,s=e._self._c||t;return s("div",{staticClass:"h-6 w-6 relative mr-2"},[s("div",{staticClass:"bar horizontal"}),s("div",{staticClass:"bar vertical"})])}],u=(s("ac6a"),s("133d")),h=(s("28a5"),s("874f")),d=s("c67b"),m=s("070e"),p=function(){var e=this,t=e.$createElement,s=e._self._c||t;return s("div",{staticClass:"Selecty",on:{mouseleave:e.hideSearchResults,blur:e.hideSearchResults,keydown:[function(t){return"button"in t||!e._k(t.keyCode,"down",40,t.key,["Down","ArrowDown"])?e.downItem(t):null},function(t){return"button"in t||!e._k(t.keyCode,"up",38,t.key,["Up","ArrowUp"])?e.upItem(t):null}],keyup:function(t){if(!("button"in t)&&e._k(t.keyCode,"enter",13,t.key,"Enter"))return null;e.setSelectedItem(e.highlightedItem)}}},[s("div",{staticClass:"Selecty__container"},[s("input",{directives:[{name:"model",rawName:"v-model",value:e.searchValue,expression:"searchValue"}],staticClass:"Selecty__input",attrs:{placeholder:e.placeholder,type:"text"},domProps:{value:e.searchValue},on:{click:e.showSearchResults,keydown:function(){e.clearSelectedItem(),e.showSearchResults()},input:function(t){t.target.composing||(e.searchValue=t.target.value)}}}),s("div",{staticClass:"Selecty__actions",on:{click:e.toggleSearchResults}},[e.searchResultsVisible?e._t("upArrow",[s("div",{staticClass:"Selecty__arrow Selecty__arrow--up"})]):e._t("downArrow",[s("div",{staticClass:"Selecty__arrow Selecty__arrow--down"})])],2)]),e.searchResultsVisible?s("div",{staticClass:"Selecty__list"},[e.hasSearchResults?s("DynamicScroller",{ref:"scroller",staticClass:"Selecty__scroller",style:{maxHeight:e.scrollerMaxHeight+"px"},attrs:{items:e.searchResults,"min-item-height":e.itemHeight,"item-height":e.itemHeight,buffer:0},scopedSlots:e._u([{key:"default",fn:function(t){var i=t.item,l=t.index,n=t.active;return[s("DynamicScrollerItem",{attrs:{item:i,active:n,"size-dependencies":[i.display],"data-index":l}},[s("div",{key:i.id,ref:"input",class:{Selecty__list__item:!0,selected:e.selectedItem&&i.id===e.selectedItem.id||e.highlightedItem&&i.id===e.highlightedItem.id},style:{height:(i.height||e.itemHeight)+"px"},attrs:{id:"bl-item-"+l},on:{click:function(t){e.setSelectedItem(i)},mouseenter:function(t){e.setHighlightedItem(i)}}},[e._t("item",[e._v("\n "+e._s(i.display)+"\n ")],{data:i})],2)])]}}])}):e.loading?e._t("loading",[s("div",{staticClass:"Selecty__message Selecty__message--loading"},[e._v("\n Loading...\n ")])]):e._t("noResults",[s("div",{staticClass:"Selecty__message Selecty__message--no-results"},[e._v("\n No results found\n ")])])],2):e._e()])},f=[],g=s("e508"),_=s("85b1"),y=s("e133"),b={name:"Selecty",props:{value:[String,Number],items:Array,placeholder:String,itemHeight:Number,scrollerMaxHeight:Number,loading:Boolean},components:{DynamicScroller:g["a"],DynamicScrollerItem:g["b"]},data(){return{searchValue:"",searchResultsVisible:!1,selectedItem:null,highlightedItem:null}},watch:{items(e,t){e!==t&&this.setSelectedItem()},selectedItem(e){this.$emit("input",e?e.value:e)},searchValue:Object(_["a"])(function(e){this.$emit("update:searchValue",e)},200)},methods:{showSearchResults(){this.searchResultsVisible=!0},hideSearchResults(){this.searchResultsVisible=!1,this.highlightedItem=null},toggleSearchResults(){this.searchResultsVisible?(this.searchResultsVisible=!1,this.highlightedItem=null):this.searchResultsVisible=!0},setSelectedItem(e){e?(this.searchValue=e.display,this.selectedItem=e,this.hideSearchResults()):this.value&&this.setSelectedItem(this.items.find(e=>e.value===this.value))},setHighlightedItem(e){this.highlightedItem=e},clearSelectedItem(){this.hasSelectedItem&&(this.selectedItem=null)},nextItem(e){const t=this.highlightedItem,s=this.searchResults;let i=t?s.findIndex(e=>e.id===t.id):-1;if(i="down"===e?i+1:i-1,i===s.length)return;this.setHighlightedItem(s[i]);const l=this.$refs.scroller;if(!l)return;const n=document.getElementById(`bl-item-${i}`);n||(l.$el.scrollTop+="down"===e?this.itemHeight:-this.itemHeight)},downItem(){this.nextItem("down")},upItem(){this.nextItem("up")}},computed:{searchResults(){const e=this.searchValue.toLowerCase();if(""===e)return this.items;if(this.hasSelectedItem){const e=this.selectedItem,t=Object(y["a"])([...this.items],e);return t.unshift(e),t}return this.items.filter(t=>{const s=t.value.toLowerCase(),i=t.display.toLowerCase();return s.includes(e)||i.includes(e)})},hasSearchResults(){return 0!==this.searchResults.length},hasSearchValue(){return 0!==this.searchValue.length},hasSelectedItem(){return null!==this.selectedItem}},mounted(){this.setSelectedItem()}},v=b,S=(s("37df"),s("2877")),w=Object(S["a"])(v,p,f,!1,null,null,null);w.options.__file="index.vue";var I=w.exports,k={props:{plugin:Object},components:{Selecty:I},data(){const e=this.plugin,t=e.field.attributes,s=t.api_key,i=t.validators,l=e.fieldPath,n=e.parameters,a=n.instance.fields;return console.log(this.plugin),{items:[],selected:null,loading:!1,fieldName:l,fieldLinkId:i.item_item_type.item_types[0],fieldApiKey:s,searchValue:"",searchFields:a.split(",").map(e=>e.trim())}},methods:{triggerAction(){this.plugin.createNewItem(this.fieldLinkId)},async searchItems(e){let t="";const s=this.fieldName,i=this.searchFields,l=`${Object(h["a"])(Object(d["a"])(s))}s`,n=i.map(e=>Object(d["a"])(e)),a=`all${l}`,r=t=>`{\n ${t}: {\n matches: {\n pattern: "${e}"\n }\n }\n }`;""!==e&&(t=`OR: [${n.map(e=>r(e))}]`);const c=`query All${l}{\n ${a}(${t}) {\n id\n ${n.join("\n")}\n }\n }`,o=await this.$graphql.request(c);return o[a].map(e=>{let t=e.id,s=Object(u["a"])(e,["id"]);return{id:t,value:t,display:Object.values(Object(m["a"])(s,n)).join(" ")}})}},watch:{selected(e){const t=this.plugin;t.setFieldValue(t.fieldPath,e)}},async mounted(){const e=this.plugin,t=this.searchItems,s=this.searchValue;this.selected=e.getFieldValue(e.fieldPath),this.unsubscribe=e.addFieldChangeListener(e.fieldPath,()=>{this.selected=e.getFieldValue(e.fieldPath)}),this.loading=!0,this.items=await t(s),this.loading=!1},beforeDestroy(){this.unsubscribe&&this.unsubscribe()}},V=k,x=(s("1947"),Object(S["a"])(V,c,o,!1,null,null,null));x.options.__file="index.vue";var R=x.exports;i["a"].config.productionTip=!1,i["a"].prototype.$moo="cow",n.a.init(e=>{e.startAutoResizer();const t=e.parameters.global.apiToken;i["a"].prototype.$graphql=r({url:"https://graphql.datocms.com",token:t}),new i["a"]({render:t=>t(R,{props:{plugin:e}})}).$mount("#app")})},"5f4b":function(e,t,s){},9441:function(e,t,s){},b107:function(e,t,s){}});