index.js

(function(){"use strict";var f=function(){var t=this,i=t.$createElement,e=t._self._c||i;return e("k-field",t._b({staticClass:"k-color-palette-field"},"k-field",t.$props,!1),[e("template",{slot:"options"},[t.extract===!0?e("k-button",{ref:"extract",attrs:{id:t._uid,icon:"palette-pipette"},on:{click:t.openSelector}},[t._v(" "+t._s(t.$t("palette.new.palette"))+" ")]):t._e(),e("k-files-dialog",{ref:"selector",on:{submit:t.processImage}})],1),t.emptyOptions?e("k-box",{staticClass:"color-palette_empty-options",attrs:{theme:"info"}},[t._v(" "+t._s(t.emptyOptionsPlaceholder)+" ")]):t.emptyPalette?e("k-empty",{class:["color-palette_empty-palette",t.size],attrs:{layout:"custom",icon:"image"},on:{click:t.openSelector}},[t._v(" "+t._s(t.$t("palette.empty.palette"))+" ")]):t.loadingPalette?e("div",{staticClass:"color-palette_empty-loading"},[e("div",{staticClass:"loader-ctn",class:t.size},[e("div",{staticClass:"loader"})])]):e("div",{staticClass:"color-palette_input"},[e("ul",{staticClass:"color-palette_input-list"},t._l(t.colors,function(l,n){return e("li",{key:n,class:[t.size,{active:t.isValue(l)},{unselect:t.unselect}],on:{click:function(o){return t.input(l,n)}}},[e("div",{staticClass:"color-palette_input-color",style:t.inlineStyle(l),attrs:{"data-tooltip":t.toTooltip(l)}})])}),0)])],2)},y=[],C="";function _(t,i,e,l,n,o,u,p){var s=typeof t=="function"?t.options:t;i&&(s.render=i,s.staticRenderFns=e,s._compiled=!0),l&&(s.functional=!0),o&&(s._scopeId="data-v-"+o);var a;if(u?(a=function(r){r=r||this.$vnode&&this.$vnode.ssrContext||this.parent&&this.parent.$vnode&&this.parent.$vnode.ssrContext,!r&&typeof __VUE_SSR_CONTEXT__!="undefined"&&(r=__VUE_SSR_CONTEXT__),n&&n.call(this,r),r&&r._registeredComponents&&r._registeredComponents.add(u)},s._ssrRegister=a):n&&(a=p?function(){n.call(this,(s.functional?this.parent:this).$root.$options.shadowRoot)}:n),a)if(s.functional){s._injectStyles=a;var O=s.render;s.render=function(k,d){return a.call(d),O(k,d)}}else{var c=s.beforeCreate;s.beforeCreate=c?[].concat(c,a):[a]}return{exports:t,options:s}}const v={data(){return{loading:!1,palette:[]}},props:{options:[Object,Array],display:String,size:String,unselect:Boolean,default:[String,Boolean],extract:[String,Boolean],limit:Number,uri:String,endpoints:Object,autotemplate:String,template:String,label:String,disabled:Boolean,help:String,parent:String,value:[String,Array],name:[String,Number],required:Boolean,type:String},computed:{selected(){return Array.isArray(this.value)?this.value[0]:this.value},extracted(){let t=Array.isArray(this.value)?this.value[1]:"";return this.palette.length?this.palette:t},emptyOptions(){return!(this.isObject(this.options)?Object.keys(this.options).length:this.options.length)},emptyOptionsPlaceholder(){return this.extract?this.$t("palette.empty.template"):this.$t("palette.empty.options")},emptyPalette(){return this.extract===!0&&!this.extracted.length&&!this.loading},loadingPalette(){return this.extract===!0&&this.loading},colors(){return this.extract===!0?this.extracted.length?this.extracted:!1:this.isQueryOptions(this.options)?this.options.map(t=>t.value):this.options}},async created(){!this.value&&this.default&&(Array.isArray(this.colors)&&this.colors.find(t=>t==this.default)?(this.value=this.default,this.input()):this.isObject(this.colors)&&Object.keys(this.colors).find(t=>t==this.default)&&(this.value=this.colors[this.default],this.input()))},methods:{isValue(t){return this.isObject(t)?this.selected==t?!0:this.isObject(this.selected)?this.isEquivalent(this.selected,t):!1:this.selected==t},inlineStyle(t){return this.display=="duo"&&this.isObject(t)?"background: linear-gradient(to right, "+this.firstColor(t)+" 50%, "+this.secondColor(t)+" 50%);":"background:"+this.firstColor(t)},toTooltip(t){return this.isObject(t)&&t.tooltip?t.tooltip:!1},firstColor(t){if(this.isString(t))return t;if(this.isObject(t))return t[Object.keys(t)[0]]},secondColor(t){return this.isObject(t)?t[Object.keys(t)[1]]:!1},isString(t){return typeof t=="string"},isObject(t){return t!=null&&typeof t=="object"},isQueryOptions(t){if(!t.length)return!1;let i=t[0];return this.isObject(i)&&Object.keys(i).length==2&&Object.keys(i).includes("text")&&Object.keys(i).includes("value")},isEquivalent(t,i){let e=Object.keys(t),l=Object.keys(i),n=e.indexOf("key");n!==-1&&e.splice(n,1);let o=l.indexOf("key");if(o!==-1&&l.splice(o,1),e.length!=l.length)return!1;for(var u=0;u<e.length;u++){let p=e[u];if(t[p]!==i[p])return!1}return!0},openSelector(){this.$refs.selector.open({max:!1,multiple:!1,endpoint:this.endpoints.field})},async processImage(t){this.loading=!0;try{const i=await this.$api.get(`${this.endpoints.field}/extract`,{file:encodeURIComponent(Array.isArray(t)?t[0].uuid:t)});this.palette=i.colors,this.value=["",this.palette],this.input(),this.loading=!1}catch{this.palette=[],this.loading=!1}},input(t=!1,i){t&&(this.unselect&&this.isValue(t)&&(t=""),this.value=this.extract?[t,this.extracted]:t,this.isObject(this.value)&&(this.value.key=i)),this.$emit("input",this.value)}}},h={};var g=_(v,f,y,!1,m,null,null,null);function m(t){for(let i in h)this[i]=h[i]}var b=function(){return g.exports}();document.querySelector("svg defs").innerHTML+=`
    <symbol id="icon-palette-pipette" viewbox="0 0 36 35.99">
        <path d="M35.41,5.25,30.74.58a2,2,0,0,0-2.83,0L21.66,6.83,17.83,3,15,5.82l2.84,2.84L0,26.49V36H9.5L27.34,18.15,30.17,21,33,18.16l-3.84-3.84,6.25-6.25A2,2,0,0,0,35.41,5.25ZM7.84,32,4,28.15,20.13,12,24,15.87Z"/>
    </symbol>
`,window.panel.plugin("sylvainjule/color-palette",{fields:{"color-palette":b}})})();