vue_jqxrepeatbutton.vue 15 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375
  1. <template>
  2. <div v-bind:id="id">
  3. <slot></slot>
  4. </div>
  5. </template>
  6. <script>
  7. import '../jqwidgets/jqxcore.js';
  8. import '../jqwidgets/jqxbuttons.js';
  9. export default {
  10. props: {
  11. delay: Number,
  12. disabled: Boolean,
  13. height: [Number, String],
  14. imgSrc: String,
  15. imgWidth: Number,
  16. imgHeight: Number,
  17. imgPosition: String,
  18. roundedCorners: String,
  19. rtl: Boolean,
  20. textPosition: String,
  21. textImageRelation: String,
  22. theme: String,
  23. template: String,
  24. toggled: Boolean,
  25. width: [Number, String],
  26. value: String,
  27. autoCreate: {
  28. default: true,
  29. type: Boolean
  30. }
  31. },
  32. created: function () {
  33. this.id = 'jqxRepeatButton' + JQXLite.generateID();
  34. this.componentSelector = '#' + this.id;
  35. },
  36. mounted: function () {
  37. if (this.autoCreate) this.__createComponent__();
  38. },
  39. methods: {
  40. createComponent: function (options) {
  41. if (!this.autoCreate) this.__createComponent__(options)
  42. else console.warn('Component is already created! If you want to use createComponent, please set "autoCreate" property to "false".');
  43. },
  44. setOptions: function (options) {
  45. JQXLite(this.componentSelector).jqxRepeatButton(options);
  46. },
  47. getOptions: function () {
  48. const usedProps = Object.keys(this.__manageProps__());
  49. const resultToReturn = {};
  50. for (let i = 0; i < usedProps.length; i++) {
  51. resultToReturn[usedProps[i]] = JQXLite(this.componentSelector).jqxRepeatButton(usedProps[i]);
  52. }
  53. return resultToReturn;
  54. },
  55. destroy: function() {
  56. JQXLite(this.componentSelector).jqxRepeatButton('destroy');
  57. },
  58. focus: function() {
  59. JQXLite(this.componentSelector).jqxRepeatButton('focus');
  60. },
  61. render: function() {
  62. JQXLite(this.componentSelector).jqxRepeatButton('render');
  63. },
  64. val: function(value) {
  65. if (value !== undefined) {
  66. JQXLite(this.componentSelector).jqxRepeatButton('val', value)
  67. } else {
  68. return JQXLite(this.componentSelector).jqxRepeatButton('val');
  69. }
  70. },
  71. _delay: function(arg) {
  72. if (arg !== undefined) {
  73. JQXLite(this.componentSelector).jqxRepeatButton('delay', arg)
  74. } else {
  75. return JQXLite(this.componentSelector).jqxRepeatButton('delay');
  76. }
  77. },
  78. _disabled: function(arg) {
  79. if (arg !== undefined) {
  80. JQXLite(this.componentSelector).jqxRepeatButton('disabled', arg)
  81. } else {
  82. return JQXLite(this.componentSelector).jqxRepeatButton('disabled');
  83. }
  84. },
  85. _height: function(arg) {
  86. if (arg !== undefined) {
  87. JQXLite(this.componentSelector).jqxRepeatButton('height', arg)
  88. } else {
  89. return JQXLite(this.componentSelector).jqxRepeatButton('height');
  90. }
  91. },
  92. _imgSrc: function(arg) {
  93. if (arg !== undefined) {
  94. JQXLite(this.componentSelector).jqxRepeatButton('imgSrc', arg)
  95. } else {
  96. return JQXLite(this.componentSelector).jqxRepeatButton('imgSrc');
  97. }
  98. },
  99. _imgWidth: function(arg) {
  100. if (arg !== undefined) {
  101. JQXLite(this.componentSelector).jqxRepeatButton('imgWidth', arg)
  102. } else {
  103. return JQXLite(this.componentSelector).jqxRepeatButton('imgWidth');
  104. }
  105. },
  106. _imgHeight: function(arg) {
  107. if (arg !== undefined) {
  108. JQXLite(this.componentSelector).jqxRepeatButton('imgHeight', arg)
  109. } else {
  110. return JQXLite(this.componentSelector).jqxRepeatButton('imgHeight');
  111. }
  112. },
  113. _imgPosition: function(arg) {
  114. if (arg !== undefined) {
  115. JQXLite(this.componentSelector).jqxRepeatButton('imgPosition', arg)
  116. } else {
  117. return JQXLite(this.componentSelector).jqxRepeatButton('imgPosition');
  118. }
  119. },
  120. _roundedCorners: function(arg) {
  121. if (arg !== undefined) {
  122. JQXLite(this.componentSelector).jqxRepeatButton('roundedCorners', arg)
  123. } else {
  124. return JQXLite(this.componentSelector).jqxRepeatButton('roundedCorners');
  125. }
  126. },
  127. _rtl: function(arg) {
  128. if (arg !== undefined) {
  129. JQXLite(this.componentSelector).jqxRepeatButton('rtl', arg)
  130. } else {
  131. return JQXLite(this.componentSelector).jqxRepeatButton('rtl');
  132. }
  133. },
  134. _textPosition: function(arg) {
  135. if (arg !== undefined) {
  136. JQXLite(this.componentSelector).jqxRepeatButton('textPosition', arg)
  137. } else {
  138. return JQXLite(this.componentSelector).jqxRepeatButton('textPosition');
  139. }
  140. },
  141. _textImageRelation: function(arg) {
  142. if (arg !== undefined) {
  143. JQXLite(this.componentSelector).jqxRepeatButton('textImageRelation', arg)
  144. } else {
  145. return JQXLite(this.componentSelector).jqxRepeatButton('textImageRelation');
  146. }
  147. },
  148. _theme: function(arg) {
  149. if (arg !== undefined) {
  150. JQXLite(this.componentSelector).jqxRepeatButton('theme', arg)
  151. } else {
  152. return JQXLite(this.componentSelector).jqxRepeatButton('theme');
  153. }
  154. },
  155. _template: function(arg) {
  156. if (arg !== undefined) {
  157. JQXLite(this.componentSelector).jqxRepeatButton('template', arg)
  158. } else {
  159. return JQXLite(this.componentSelector).jqxRepeatButton('template');
  160. }
  161. },
  162. _toggled: function(arg) {
  163. if (arg !== undefined) {
  164. JQXLite(this.componentSelector).jqxRepeatButton('toggled', arg)
  165. } else {
  166. return JQXLite(this.componentSelector).jqxRepeatButton('toggled');
  167. }
  168. },
  169. _width: function(arg) {
  170. if (arg !== undefined) {
  171. JQXLite(this.componentSelector).jqxRepeatButton('width', arg)
  172. } else {
  173. return JQXLite(this.componentSelector).jqxRepeatButton('width');
  174. }
  175. },
  176. _value: function(arg) {
  177. if (arg !== undefined) {
  178. JQXLite(this.componentSelector).jqxRepeatButton('value', arg)
  179. } else {
  180. return JQXLite(this.componentSelector).jqxRepeatButton('value');
  181. }
  182. },
  183. __createComponent__: function (options) {
  184. let widgetOptions;
  185. options ? widgetOptions = options : widgetOptions = this.__manageProps__();
  186. JQXLite(this.componentSelector).jqxRepeatButton(widgetOptions);
  187. this.__extendProps__();
  188. this.__wireEvents__();
  189. },
  190. __manageProps__: function () {
  191. const widgetProps = ['delay','disabled','height','imgSrc','imgWidth','imgHeight','imgPosition','roundedCorners','rtl','textPosition','textImageRelation','theme','template','toggled','width','value'];
  192. const componentProps = this.$options.propsData;
  193. let options = {};
  194. for (let prop in componentProps) {
  195. if (widgetProps.indexOf(prop) !== -1) {
  196. options[prop] = componentProps[prop];
  197. }
  198. }
  199. return options;
  200. },
  201. __extendProps__: function () {
  202. const that = this;
  203. Object.defineProperty(that, 'delay', {
  204. get: function() {
  205. return that._delay();
  206. },
  207. set: function(newValue) {
  208. that._delay(newValue);
  209. },
  210. enumerable: true,
  211. configurable: true
  212. });
  213. Object.defineProperty(that, 'disabled', {
  214. get: function() {
  215. return that._disabled();
  216. },
  217. set: function(newValue) {
  218. that._disabled(newValue);
  219. },
  220. enumerable: true,
  221. configurable: true
  222. });
  223. Object.defineProperty(that, 'height', {
  224. get: function() {
  225. return that._height();
  226. },
  227. set: function(newValue) {
  228. that._height(newValue);
  229. },
  230. enumerable: true,
  231. configurable: true
  232. });
  233. Object.defineProperty(that, 'imgSrc', {
  234. get: function() {
  235. return that._imgSrc();
  236. },
  237. set: function(newValue) {
  238. that._imgSrc(newValue);
  239. },
  240. enumerable: true,
  241. configurable: true
  242. });
  243. Object.defineProperty(that, 'imgWidth', {
  244. get: function() {
  245. return that._imgWidth();
  246. },
  247. set: function(newValue) {
  248. that._imgWidth(newValue);
  249. },
  250. enumerable: true,
  251. configurable: true
  252. });
  253. Object.defineProperty(that, 'imgHeight', {
  254. get: function() {
  255. return that._imgHeight();
  256. },
  257. set: function(newValue) {
  258. that._imgHeight(newValue);
  259. },
  260. enumerable: true,
  261. configurable: true
  262. });
  263. Object.defineProperty(that, 'imgPosition', {
  264. get: function() {
  265. return that._imgPosition();
  266. },
  267. set: function(newValue) {
  268. that._imgPosition(newValue);
  269. },
  270. enumerable: true,
  271. configurable: true
  272. });
  273. Object.defineProperty(that, 'roundedCorners', {
  274. get: function() {
  275. return that._roundedCorners();
  276. },
  277. set: function(newValue) {
  278. that._roundedCorners(newValue);
  279. },
  280. enumerable: true,
  281. configurable: true
  282. });
  283. Object.defineProperty(that, 'rtl', {
  284. get: function() {
  285. return that._rtl();
  286. },
  287. set: function(newValue) {
  288. that._rtl(newValue);
  289. },
  290. enumerable: true,
  291. configurable: true
  292. });
  293. Object.defineProperty(that, 'textPosition', {
  294. get: function() {
  295. return that._textPosition();
  296. },
  297. set: function(newValue) {
  298. that._textPosition(newValue);
  299. },
  300. enumerable: true,
  301. configurable: true
  302. });
  303. Object.defineProperty(that, 'textImageRelation', {
  304. get: function() {
  305. return that._textImageRelation();
  306. },
  307. set: function(newValue) {
  308. that._textImageRelation(newValue);
  309. },
  310. enumerable: true,
  311. configurable: true
  312. });
  313. Object.defineProperty(that, 'theme', {
  314. get: function() {
  315. return that._theme();
  316. },
  317. set: function(newValue) {
  318. that._theme(newValue);
  319. },
  320. enumerable: true,
  321. configurable: true
  322. });
  323. Object.defineProperty(that, 'template', {
  324. get: function() {
  325. return that._template();
  326. },
  327. set: function(newValue) {
  328. that._template(newValue);
  329. },
  330. enumerable: true,
  331. configurable: true
  332. });
  333. Object.defineProperty(that, 'toggled', {
  334. get: function() {
  335. return that._toggled();
  336. },
  337. set: function(newValue) {
  338. that._toggled(newValue);
  339. },
  340. enumerable: true,
  341. configurable: true
  342. });
  343. Object.defineProperty(that, 'width', {
  344. get: function() {
  345. return that._width();
  346. },
  347. set: function(newValue) {
  348. that._width(newValue);
  349. },
  350. enumerable: true,
  351. configurable: true
  352. });
  353. Object.defineProperty(that, 'value', {
  354. get: function() {
  355. return that._value();
  356. },
  357. set: function(newValue) {
  358. that._value(newValue);
  359. },
  360. enumerable: true,
  361. configurable: true
  362. });
  363. },
  364. __wireEvents__: function () {
  365. const that = this;
  366. JQXLite(this.componentSelector).on('click', function (event) { that.$emit('click', event); });
  367. }
  368. }
  369. }
  370. </script>