atk4/ui

{"version":3,"file":"js/atk-vue-inline-edit.js","mappings":";;;;;;;;;;;;;;;AAAgC;;AAEhC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,iEAAe;EACXC,IAAI,EAAE,eAAe;EACrBC,QAAQ,EAAG;AACf;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,eAAe;EACXC,KAAK,EAAE;IACHC,GAAG,EAAEC,MAAM;IACXC,SAAS,EAAED,MAAM;IACjBE,UAAU,EAAEC,OAAO;IACnBC,OAAO,EAAEC;EACb,CAAC;EACDC,IAAI,EAAE,SAAAA,CAAA,EAAY;IACd,OAAO;MACHC,KAAK,EAAE,IAAI,CAACN,SAAS;MACrBO,cAAc,EAAE,IAAI,CAACP,SAAS;MAC9BQ,QAAQ,EAAE;IACd,CAAC;EACL,CAAC;EACDC,QAAQ,EAAE;IACNC,OAAO,EAAE,SAAAA,CAAA,EAAY;MACjB,OAAO,IAAI,CAACH,cAAc,KAAK,IAAI,CAACD,KAAK;IAC7C;EACJ,CAAC;EACDK,OAAO,EAAE;IACLC,OAAO,EAAE,SAAAA,CAAA,EAAY;MACjB,IAAI,IAAI,CAACJ,QAAQ,EAAE;QACf,IAAI,CAACK,UAAU,CAAC,CAAC;MACrB,CAAC,MAAM;QACH,IAAI,CAACN,cAAc,GAAG,IAAI,CAACD,KAAK;MACpC;IACJ,CAAC;IACDQ,OAAO,EAAE,SAAAA,CAAUC,CAAC,EAAE;MAClB,MAAMC,GAAG,GAAGD,CAAC,CAACE,OAAO;MACrB,IAAID,GAAG,KAAK,EAAE,EAAE;QACZ,IAAI,CAACE,OAAO,CAAC,CAAC;MAClB,CAAC,MAAM,IAAIF,GAAG,KAAK,EAAE,EAAE;QACnB,IAAI,CAACG,QAAQ,CAAC,CAAC;MACnB;IACJ,CAAC;IACDC,MAAM,EAAE,SAAAA,CAAA,EAAY;MAChB,IAAI,IAAI,CAACV,OAAO,EAAE;QACd,IAAI,IAAI,CAACT,UAAU,EAAE;UACjB,IAAI,CAACoB,MAAM,CAAC,CAAC;QACjB,CAAC,MAAM;UACH,IAAI,CAACf,KAAK,GAAG,IAAI,CAACC,cAAc;QACpC;MACJ;IACJ,CAAC;IACDY,QAAQ,EAAE,SAAAA,CAAA,EAAY;MAClB,IAAI,CAACb,KAAK,GAAG,IAAI,CAACC,cAAc;MAChC,IAAI,CAACe,GAAG,CAACC,aAAa,CAAC,OAAO,CAAC,CAACC,IAAI,CAAC,CAAC;IAC1C,CAAC;IACDN,OAAO,EAAE,SAAAA,CAAA,EAAY;MACjB,IAAI,IAAI,CAACR,OAAO,EAAE;QACd,IAAI,CAACW,MAAM,CAAC,CAAC;MACjB;IACJ,CAAC;IACDR,UAAU,EAAE,SAAAA,CAAA,EAAY;MACpB,IAAI,CAACL,QAAQ,GAAG,KAAK;IACzB,CAAC;IACDa,MAAM,EAAE,SAAAA,CAAA,EAAY;MAChB,MAAMI,IAAI,GAAG,IAAI;MACjB/B,sDAAC,CAAC,IAAI,CAAC4B,GAAG,CAAC,CAACI,GAAG,CAAC;QACZC,EAAE,EAAE,KAAK;QACT7B,GAAG,EAAE,IAAI,CAACA,GAAG;QACbO,IAAI,EAAE;UAAEC,KAAK,EAAE,IAAI,CAACA;QAAM,CAAC;QAC3BsB,MAAM,EAAE,MAAM;QACdC,UAAU,EAAE,SAAAA,CAAUC,CAAC,EAAEf,CAAC,EAAE;UACxB,IAAIe,CAAC,CAACC,kBAAkB,EAAE;YACtBN,IAAI,CAACjB,QAAQ,GAAG,IAAI;UACxB,CAAC,MAAM;YACHiB,IAAI,CAAClB,cAAc,GAAGkB,IAAI,CAACnB,KAAK;UACpC;QACJ;MACJ,CAAC,CAAC;IACN;EACJ;AACJ,CAAC","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 * 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 */\nexport default {\n    name: 'AtkInlineEdit',\n    template: `\n        <div :class=\"[options.inputCss, hasError ? 'error' : '' ]\">\n            <input\n                :class=\"options.inlineCss\"\n                :name=\"options.fieldName\"\n                v-model=\"value\"\n                @keyup=\"onKeyup\"\n                @focus=\"onFocus\"\n                @blur=\"onBlur\"\n            />\n            <i class=\"icon\" />\n        </div>`,\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            lastValueValid: this.initValue,\n            hasError: false,\n        };\n    },\n    computed: {\n        isDirty: function () {\n            return this.lastValueValid !== this.value;\n        },\n    },\n    methods: {\n        onFocus: function () {\n            if (this.hasError) {\n                this.clearError();\n            } else {\n                this.lastValueValid = this.value;\n            }\n        },\n        onKeyup: function (e) {\n            const key = e.keyCode;\n            if (key === 13) {\n                this.onEnter();\n            } else if (key === 27) {\n                this.onEscape();\n            }\n        },\n        onBlur: function () {\n            if (this.isDirty) {\n                if (this.saveOnBlur) {\n                    this.update();\n                } else {\n                    this.value = this.lastValueValid;\n                }\n            }\n        },\n        onEscape: function () {\n            this.value = this.lastValueValid;\n            this.$el.querySelector('input').blur();\n        },\n        onEnter: function () {\n            if (this.isDirty) {\n                this.update();\n            }\n        },\n        clearError: function () {\n            this.hasError = false;\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.lastValueValid = that.value;\n                    }\n                },\n            });\n        },\n    },\n};\n"],"names":["$","name","template","props","url","String","initValue","saveOnBlur","Boolean","options","Object","data","value","lastValueValid","hasError","computed","isDirty","methods","onFocus","clearError","onKeyup","e","key","keyCode","onEnter","onEscape","onBlur","update","$el","querySelector","blur","that","api","on","method","onComplete","r","hasValidationError"],"sourceRoot":""}