1 line
3.8 KiB
Plaintext
1 line
3.8 KiB
Plaintext
![]() |
{"version":3,"file":"vue-hsluv-picker.min.js","sources":["../src/vue-hsluv-picker.js"],"sourcesContent":["/*eslint no-console: \"off\" */\nimport {InitializePicker} from './hsluvpicker';\nexport default {\n name: 'hsluv-picker',\n props: {\n value: {\n type: String,\n default: \"#cccccc\",\n },\n nodisplay: {\n type: Boolean,\n default: false,\n },\n displaysize: {\n type: String,\n default: 300,\n },\n horizontal: {\n type: Boolean,\n default: false,\n }\n },\n watch: {\n value: function(newVal){\n if(newVal != this.currentcolor){\n this.$refs.picker.dispatchEvent(new CustomEvent('updatecolor', {detail: newVal}));\n this.currentcolor = newVal;\n }\n }\n },\n data() {\n return {\n currentcolor: \"\",\n };\n },\n methods: {\n onColorChange(event) {\n this.currentcolor = event.detail;\n this.$emit(\"input\",event.detail);\n }\n },\n mounted(){\n this.currentcolor=this.value;\n InitializePicker(this.$refs.picker, this.value);\n },\n template: `\n <div ref=\"picker\" @colorchange=\"onColorChange\" :class=\"'vue-hsluv-picker'+(horizontal?' horizontal':'')\">\n <div v-if=\"!nodisplay\" class=\"display\">\n <canvas :height=\"displaysize\" :width=\"displaysize\"></canvas>\n </div>\n <table class='picker'>\n <tr class=\"control-h\">\n <td class=\"cell-input\">\n <input type=\"number\" min=\"0\" max=\"360\" step=\"any\" class=\"counter counter-hue\" tabindex=\"0\"/>\n </td>\n <td><div class=\"range-slider\"></div></td>\n <td class=\"picker-label\">H</td>\n </tr>\n <tr class=\"control-s\">\n <td class=\"cell-input\">\n <input type=\"number\" step=\"any\" min=\"0\" max=\"100\" class=\"counter counter-saturation\"/>\n </td>\n <td><div class=\"range-slider\"></div></td>\n <td class=\"picker-label\">S</td>\n </tr>\n <tr class=\"control-l\">\n <td class=\"cell-input\">\n <input type=\"number\" step=\"any\" min=\"0\" max=\"100\" class=\"counter counter-lightness\"/>\n </td>\n <td><div class=\"range-slider\"></div></td>\n <td class=\"picker-label\">L</td>\n </tr>\n <tr>\n <td class=\"cell-input cell-input-hex\">\n <input ref=\"input\" class=\"input-hex\" pattern=\"#?[0-9a-fA-F]{6}\"/>\n </td>\n <td><div class=\"swatch\"></div></td>\n <td></td>\n </tr>\n </table>\n </div>\n </div>\n`,\n};"],"names":["name","props","value","type","String","default","nodisplay","Boolean","displaysize","horizontal","watch","newVal","this","currentcolor","$refs","picker","dispatchEvent","CustomEvent","detail","data","methods","onColorChange","event","$emit","mounted","template"],"mappings":"wMAEe,CACXA,KAAM,eACNC,MAAO,CACHC,MAAO,CACHC,KAAMC,OACNC,QAAS,WAEbC,UAAW,CACPH,KAAMI,QACNF,SAAS,GAEbG,YAAa,CACTL,KAAMC,OACNC,QAAS,KAEbI,WAAY,CACRN,KAAMI,QACNF,SAAS,IAGjBK,MAAO,CACHR,MAAO,SAASS,QACTA,QAAUC,KAAKC,oBACTC,MAAMC,OAAOC,cAAc,IAAIC,YAAY,cAAe,CAACC,OAAQP,eACnEE,aAAeF,UAIhCQ,sBACW,CACHN,aAAc,KAGtBO,QAAS,CACLC,uBAAcC,YACLT,aAAeS,MAAMJ,YACrBK,MAAM,QAAQD,MAAMJ,UAGjCM,wBACSX,aAAaD,KAAKV,wCACNU,KAAKE,MAAMC,OAAQH,KAAKV,QAE7CuB"}
|