@nextcloud/vue
Version:
Nextcloud vue components
2 lines (1 loc) • 3.22 kB
JavaScript
var y=require("../assets/index40.css");const n=require("./NcButton.cjs"),c=require("./NcPopover.cjs"),o=require("../chunks/l10n-46d0c1c0.cjs"),l=require("../chunks/GenColors-8097de04.cjs"),s=require("vue-material-design-icons/ArrowLeft.vue"),u=require("vue-material-design-icons/Check.vue"),d=require("vue-material-design-icons/DotsHorizontal.vue"),p=require("vue-color"),h=require("../chunks/_plugin-vue2_normalizer-764a4c12.cjs");const a=function(e){const t=e.toString(16);return t.length===1?"0"+t:t},v={name:"NcColorPicker",components:{ArrowLeft:s,Check:u,Chrome:p.Chrome,DotsHorizontal:d,NcButton:n,NcPopover:c},props:{value:{type:String,required:!0},advancedFields:{type:Boolean,default:!1},palette:{type:Array,default:()=>l.GenColors(4).map(e=>"#"+a(e.r)+a(e.g)+a(e.b)),validator(e){return e.every(t=>/^#([a-f0-9]{3}|[a-f0-9]{6})$/i.test(t))}}},emits:["submit","close","update:open","update:value","input"],data(){return{currentColor:this.value,advanced:!1,ariaBack:o.t("Back"),ariaMore:o.t("More options")}},watch:{value(e){this.currentColor=e}},methods:{t:o.t,handleConfirm(){this.$emit("submit",this.currentColor),this.handleClose(),this.advanced=!1},handleClose(){this.$emit("close"),this.$emit("update:open",!1)},handleBack(){this.advanced=!1},handleMoreSettings(){this.advanced=!0},pickColor(e){typeof e!="string"&&(e=this.currentColor.hex),this.currentColor=e,this.$emit("update:value",e),this.$emit("input",e)}}};var C=function(){var e=this,t=e._self._c;return t("NcPopover",e._g(e._b({on:{"apply-hide":e.handleClose},scopedSlots:e._u([{key:"trigger",fn:function(){return[e._t("default")]},proxy:!0}],null,!0)},"NcPopover",e.$attrs,!1),e.$listeners),[t("div",{staticClass:"color-picker",class:{"color-picker--advanced-fields":e.advanced&&e.advancedFields}},[t("transition",{attrs:{name:"slide",mode:"out-in"}},[e.advanced?e._e():t("div",{staticClass:"color-picker__simple"},e._l(e.palette,function(r,i){return t("button",{key:i,staticClass:"color-picker__simple-color-circle",class:{"color-picker__simple-color-circle--active":r===e.currentColor},style:{"background-color":r},attrs:{type:"button"},on:{click:function(f){return e.pickColor(r)}}},[r===e.currentColor?t("Check",{attrs:{size:20}}):e._e()],1)}),0),e.advanced?t("Chrome",{staticClass:"color-picker__advanced",attrs:{"disable-alpha":!0,"disable-fields":!e.advancedFields},on:{input:e.pickColor},model:{value:e.currentColor,callback:function(r){e.currentColor=r},expression:"currentColor"}}):e._e()],1),t("div",{staticClass:"color-picker__navigation"},[e.advanced?t("NcButton",{attrs:{type:"tertiary","aria-label":e.ariaBack},on:{click:e.handleBack},scopedSlots:e._u([{key:"icon",fn:function(){return[t("ArrowLeft",{attrs:{size:20}})]},proxy:!0}],null,!1,1821202730)}):e._e(),e.advanced?e._e():t("NcButton",{attrs:{type:"tertiary","aria-label":e.ariaMore},on:{click:e.handleMoreSettings},scopedSlots:e._u([{key:"icon",fn:function(){return[t("DotsHorizontal",{attrs:{size:20}})]},proxy:!0}],null,!1,1056868794)}),e.advanced?t("NcButton",{attrs:{type:"primary"},on:{click:e.handleConfirm}},[e._v(" "+e._s(e.t("Choose"))+" ")]):e._e()],1)],1)])},k=[],m=h.normalizeComponent(v,C,k,!1,null,"c959ec5a",null,null);const _=m.exports;module.exports=_;