vue_jqxcheckbox.vue 14 KB

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