{"version":3,"file":"js/atk-vue-inline-edit.min.js","mappings":"gJAaA,MAYA,GACIA,KAAM,kBACNC,SAdc,8WAedC,MAAO,CACHC,IAAKC,OACLC,UAAWD,OACXE,WAAYC,QACZC,QAASC,QAEbC,KAAM,WACF,MAAO,CACHC,MAAOC,KAAKP,UACZQ,KAAMD,KAAKP,UACXS,UAAU,EAElB,EACAC,SAAU,CACNC,QAAS,WACL,OAAOJ,KAAKC,OAASD,KAAKD,KAC9B,GAEJM,QAAS,CACLC,QAAS,WACDN,KAAKE,SACLF,KAAKO,aAELP,KAAKC,KAAOD,KAAKD,KAEzB,EACAS,QAAS,SAAUC,GACf,MAAMC,EAAMD,EAAEE,QACdX,KAAKO,aACO,KAARG,EACAV,KAAKY,QAAQH,GACE,KAARC,GACPV,KAAKa,UAEb,EACAC,OAAQ,WACAd,KAAKI,SAAWJ,KAAKN,WACrBM,KAAKe,SAELf,KAAKD,MAAQC,KAAKC,IAE1B,EACAY,SAAU,WACNb,KAAKD,MAAQC,KAAKC,KAClBD,KAAKgB,IAAIC,cAAc,SAASC,MACpC,EACAN,QAAS,SAAUH,GACXT,KAAKI,SACLJ,KAAKe,QAEb,EACAR,WAAY,WACRP,KAAKE,UAAW,CACpB,EACAiB,WAAY,WAAqB,IAAXC,EAAQ,UAAH,6CAAG,EACZ,IAAVA,GAKJpB,KAAKE,UAAYF,KAAKE,SACtBmB,YAAW,KACPrB,KAAKmB,WAAWC,EAAQ,EAAE,GAC3B,MAPCpB,KAAKE,UAAW,CAQxB,EACAa,OAAQ,WACJ,MAAMO,EAAOtB,KACbuB,IAAEvB,KAAKgB,KAAKQ,IAAI,CACZC,GAAI,MACJlC,IAAKS,KAAKT,IACVO,KAAM,CAAEC,MAAOC,KAAKD,OACpB2B,OAAQ,OACRC,WAAY,SAAUC,EAAGnB,GACjBmB,EAAEC,mBACFP,EAAKpB,UAAW,EAEhBoB,EAAKrB,KAAOqB,EAAKvB,KAEzB,GAER,G","sources":["webpack://atk/./src/vue-components/inline-edit.component.js"],"sourcesContent":["import $ from 'external/jquery';\n\n/**\n * Allow user to edit a db record inline and send\n * changes to server.\n *\n * Properties need for this component are:\n *\n * context: string, a jQuery selector where the 'loading' class will be apply by Fomantic-UI - default to the requesting element.\n * url: string, the URL to call.\n * value: array, array of value to send to server.\n */\n\nconst template = `\n <div :class=\"[options.inputCss, hasError ? 'error' : '' ]\">\n <input\n :class=\"options.inlineCss\"\n :name=\"options.fieldName\"\n :type=\"options.fieldType\"\n v-model=\"value\"\n @keyup=\"onKeyup\"\n @focus=\"onFocus\"\n @blur=\"onBlur\" /><i class=\"icon\"></i>\n </div>`;\n\nexport default {\n name: 'atk-inline-edit',\n template: template,\n props: {\n url: String,\n initValue: String,\n saveOnBlur: Boolean,\n options: Object,\n },\n data: function () {\n return {\n value: this.initValue,\n temp: this.initValue,\n hasError: false,\n };\n },\n computed: {\n isDirty: function () {\n return this.temp !== this.value;\n },\n },\n methods: {\n onFocus: function () {\n if (this.hasError) {\n this.clearError();\n } else {\n this.temp = this.value;\n }\n },\n onKeyup: function (e) {\n const key = e.keyCode;\n this.clearError();\n if (key === 13) {\n this.onEnter(e);\n } else if (key === 27) {\n this.onEscape();\n }\n },\n onBlur: function () {\n if (this.isDirty && this.saveOnBlur) {\n this.update();\n } else {\n this.value = this.temp; // TODO will not save the value on 2nd edit and submit via enter\n }\n },\n onEscape: function () {\n this.value = this.temp;\n this.$el.querySelector('input').blur();\n },\n onEnter: function (e) {\n if (this.isDirty) {\n this.update();\n }\n },\n clearError: function () {\n this.hasError = false;\n },\n flashError: function (count = 4) {\n if (count === 0) {\n this.hasError = false;\n\n return;\n }\n this.hasError = !this.hasError;\n setTimeout(() => {\n this.flashError(count - 1);\n }, 300);\n },\n update: function () {\n const that = this;\n $(this.$el).api({\n on: 'now',\n url: this.url,\n data: { value: this.value },\n method: 'POST',\n onComplete: function (r, e) {\n if (r.hasValidationError) {\n that.hasError = true;\n } else {\n that.temp = that.value;\n }\n },\n });\n },\n },\n};\n"],"names":["name","template","props","url","String","initValue","saveOnBlur","Boolean","options","Object","data","value","this","temp","hasError","computed","isDirty","methods","onFocus","clearError","onKeyup","e","key","keyCode","onEnter","onEscape","onBlur","update","$el","querySelector","blur","flashError","count","setTimeout","that","$","api","on","method","onComplete","r","hasValidationError"],"sourceRoot":""}
|
Download
