{"version":3,"file":"js/atk-vue-item-search.min.js","mappings":"2JAgBA,MAWA,GACIA,KAAM,kBACNC,SAbc,0XAcdC,MAAO,CACHC,QAASC,OACTC,IAAKD,OACLE,EAAGF,OACHG,OAAQH,OACRI,SAAUJ,OACVK,QAASC,QAEbC,KAAM,WACF,MAAO,CACHC,MAAOC,KAAKP,EACZQ,KAAMD,KAAKP,EACXS,UAAU,EACVC,WAAY,KACZC,SAAUJ,KAAKJ,QAAQQ,SAE/B,EACAC,SAAU,CACNC,UAAW,WACP,MAAO,CACH,cAA+B,OAAfN,KAAKD,OAAiC,KAAfC,KAAKD,MAC5C,cAA8B,OAAfC,KAAKD,MAE5B,GAEJQ,QAAS,CACLC,QAAS,WACAR,KAAKQ,QAAQC,cACdT,KAAKQ,QAAQC,YAAcC,EAAAA,EAAAA,mBAAuBC,IAC9CX,KAAKQ,QAAQC,YAAc,KACvBT,KAAKD,QAAUC,KAAKC,OACD,KAAfD,KAAKD,QACLC,KAAKD,MAAQ,MAEjBC,KAAKY,YACLZ,KAAKC,KAAOD,KAAKD,MACrB,GACDC,KAAKJ,QAAQiB,eAEpBb,KAAKQ,QAAQC,YAAYK,KAAKd,KAClC,EACAe,SAAU,WACa,OAAff,KAAKD,QACLC,KAAKD,MAAQ,KACbC,KAAKC,KAAO,KACZD,KAAKY,YAEb,EACAI,QAAS,WACc,OAAfhB,KAAKD,QACLC,KAAKD,MAAQ,KACbC,KAAKC,KAAO,KACZD,KAAKY,YAEb,EACAK,QAAS,WACDjB,KAAKD,QACLC,KAAKD,MAAQ,KACbC,KAAKC,KAAO,KACZD,KAAKY,YAEb,EACAA,UAAW,WACP,MAAMM,EAAOlB,KACPJ,EAAUuB,IAAAA,OAAS,CAAC,EAAGnB,KAAKG,WAAY,CAAEiB,aAAcpB,KAAKN,OAAQ,CAACM,KAAKL,UAAWK,KAAKD,QAC3FsB,EAAUF,IAAE,IAAMnB,KAAKN,QAC7BM,KAAKE,UAAW,EAChBmB,EAAQC,IAAI,CACRC,GAAI,MACJ/B,IAAKQ,KAAKR,IACVM,KAAMF,EACN4B,OAAQ,MACRC,aAAezB,KAAKV,QAAW6B,IAAEnB,KAAKV,SAAW6B,IAAEnB,KAAK0B,KACxDC,WAAY,SAAUhB,EAAGiB,GACrBV,EAAKhB,UAAW,CACpB,GAER,G","sources":["webpack://atk/./src/vue-components/item-search.component.js"],"sourcesContent":["import $ from 'external/jquery';\nimport atk from 'atk';\n\n/**\n * Will allow user to send data query request to server.\n * Request should filter the data and reload the data view.\n * The request is send using Fomantic-UI api.\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 this component.\n * url: string, the URL to call.\n * q: string, the initial string for the query. Useful if this search is part of the relaod.\n * reload: string, an Id selector for jQuery, '#' is append automatically.\n */\n\nconst template = `<div class=\"atk-item-search\" :class=\"inputCss\">\n <input class=\"ui\"\n v-model=\"query\"\n type=\"text\" placeholder=\"Search...\"\n @keyup=\"onKeyup\"\n @keyup.esc=\"onEscape\"\n name=\"atk-vue-search\" />\n <i class=\"atk-search-icon\" :class=\"classIcon\"></i><span style=\"width: 12px; cursor: pointer;\" @click=\"onClear\"></span>\n </div>\n`;\n\nexport default {\n name: 'atk-item-search',\n template: template,\n props: {\n context: String,\n url: String,\n q: String,\n reload: String,\n queryArg: String,\n options: Object,\n },\n data: function () {\n return {\n query: this.q,\n temp: this.q,\n isActive: false,\n extraQuery: null,\n inputCss: this.options.inputCss,\n };\n },\n computed: {\n classIcon: function () {\n return {\n 'search icon': (this.query === null || this.query === ''),\n 'remove icon': this.query !== null,\n };\n },\n },\n methods: {\n onKeyup: function () {\n if (!this.onKeyup.debouncedFx) {\n this.onKeyup.debouncedFx = atk.createDebouncedFx((e) => {\n this.onKeyup.debouncedFx = null;\n if (this.query !== this.temp) {\n if (this.query === '') {\n this.query = null;\n }\n this.sendQuery();\n this.temp = this.query;\n }\n }, this.options.inputTimeOut);\n }\n this.onKeyup.debouncedFx.call(this);\n },\n onEscape: function () {\n if (this.query !== null) {\n this.query = null;\n this.temp = null;\n this.sendQuery();\n }\n },\n onEnter: function () {\n if (this.query !== null) {\n this.query = null;\n this.temp = null;\n this.sendQuery();\n }\n },\n onClear: function () {\n if (this.query) {\n this.query = null;\n this.temp = null;\n this.sendQuery();\n }\n },\n sendQuery: function () {\n const that = this;\n const options = $.extend({}, this.extraQuery, { __atk_reload: this.reload, [this.queryArg]: this.query });\n const $reload = $('#' + this.reload);\n this.isActive = true;\n $reload.api({\n on: 'now',\n url: this.url,\n data: options,\n method: 'GET',\n stateContext: (this.context) ? $(this.context) : $(this.$el),\n onComplete: function (e, r) {\n that.isActive = false;\n },\n });\n },\n },\n};\n"],"names":["name","template","props","context","String","url","q","reload","queryArg","options","Object","data","query","this","temp","isActive","extraQuery","inputCss","computed","classIcon","methods","onKeyup","debouncedFx","atk","e","sendQuery","inputTimeOut","call","onEscape","onEnter","onClear","that","$","__atk_reload","$reload","api","on","method","stateContext","$el","onComplete","r"],"sourceRoot":""}
|
Download
