vue_jqxtree.vue 22 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545
  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/jqxdata.js';
  9. import '../jqwidgets/jqxbuttons.js';
  10. import '../jqwidgets/jqxscrollbar.js';
  11. import '../jqwidgets/jqxpanel.js';
  12. import '../jqwidgets/jqxdragdrop.js';
  13. import '../jqwidgets/jqxtree.js';
  14. import '../jqwidgets/jqxcheckbox.js';
  15. export default {
  16. props: {
  17. animationShowDuration: Number,
  18. animationHideDuration: Number,
  19. allowDrag: Boolean,
  20. allowDrop: Boolean,
  21. checkboxes: Boolean,
  22. dragStart: Function,
  23. dragEnd: Function,
  24. disabled: Boolean,
  25. easing: String,
  26. enableHover: Boolean,
  27. height: [Number, String],
  28. hasThreeStates: Boolean,
  29. incrementalSearch: Boolean,
  30. keyboardNavigation: Boolean,
  31. rtl: Boolean,
  32. source: [Array, Object],
  33. toggleIndicatorSize: Number,
  34. toggleMode: String,
  35. theme: String,
  36. width: [Number, String],
  37. autoCreate: {
  38. default: true,
  39. type: Boolean
  40. }
  41. },
  42. created: function () {
  43. this.id = 'jqxTree' + JQXLite.generateID();
  44. this.componentSelector = '#' + this.id;
  45. },
  46. mounted: function () {
  47. if (this.autoCreate) this.__createComponent__();
  48. },
  49. methods: {
  50. createComponent: function (options) {
  51. if (!this.autoCreate) this.__createComponent__(options)
  52. else console.warn('Component is already created! If you want to use createComponent, please set "autoCreate" property to "false".');
  53. },
  54. setOptions: function (options) {
  55. JQXLite(this.componentSelector).jqxTree(options);
  56. },
  57. getOptions: function () {
  58. const usedProps = Object.keys(this.__manageProps__());
  59. const resultToReturn = {};
  60. for (let i = 0; i < usedProps.length; i++) {
  61. resultToReturn[usedProps[i]] = JQXLite(this.componentSelector).jqxTree(usedProps[i]);
  62. }
  63. return resultToReturn;
  64. },
  65. addBefore: function(item, id) {
  66. JQXLite(this.componentSelector).jqxTree('addBefore', item, id);
  67. },
  68. addAfter: function(item, id) {
  69. JQXLite(this.componentSelector).jqxTree('addAfter', item, id);
  70. },
  71. addTo: function(item, id) {
  72. JQXLite(this.componentSelector).jqxTree('addTo', item, id);
  73. },
  74. clear: function() {
  75. JQXLite(this.componentSelector).jqxTree('clear');
  76. },
  77. checkAll: function() {
  78. JQXLite(this.componentSelector).jqxTree('checkAll');
  79. },
  80. checkItem: function(item, checked) {
  81. JQXLite(this.componentSelector).jqxTree('checkItem', item, checked);
  82. },
  83. collapseAll: function() {
  84. JQXLite(this.componentSelector).jqxTree('collapseAll');
  85. },
  86. collapseItem: function(item) {
  87. JQXLite(this.componentSelector).jqxTree('collapseItem', item);
  88. },
  89. destroy: function() {
  90. JQXLite(this.componentSelector).jqxTree('destroy');
  91. },
  92. disableItem: function(item) {
  93. JQXLite(this.componentSelector).jqxTree('disableItem', item);
  94. },
  95. ensureVisible: function(item) {
  96. JQXLite(this.componentSelector).jqxTree('ensureVisible', item);
  97. },
  98. enableItem: function(item) {
  99. JQXLite(this.componentSelector).jqxTree('enableItem', item);
  100. },
  101. enableAll: function() {
  102. JQXLite(this.componentSelector).jqxTree('enableAll');
  103. },
  104. expandAll: function() {
  105. JQXLite(this.componentSelector).jqxTree('expandAll');
  106. },
  107. expandItem: function(item) {
  108. JQXLite(this.componentSelector).jqxTree('expandItem', item);
  109. },
  110. focus: function() {
  111. JQXLite(this.componentSelector).jqxTree('focus');
  112. },
  113. getCheckedItems: function() {
  114. return JQXLite(this.componentSelector).jqxTree('getCheckedItems');
  115. },
  116. getUncheckedItems: function() {
  117. return JQXLite(this.componentSelector).jqxTree('getUncheckedItems');
  118. },
  119. getItems: function() {
  120. return JQXLite(this.componentSelector).jqxTree('getItems');
  121. },
  122. getItem: function(element) {
  123. return JQXLite(this.componentSelector).jqxTree('getItem', element);
  124. },
  125. getSelectedItem: function() {
  126. return JQXLite(this.componentSelector).jqxTree('getSelectedItem');
  127. },
  128. getPrevItem: function(item) {
  129. return JQXLite(this.componentSelector).jqxTree('getPrevItem', item);
  130. },
  131. getNextItem: function(item) {
  132. return JQXLite(this.componentSelector).jqxTree('getNextItem', item);
  133. },
  134. hitTest: function(left, top) {
  135. return JQXLite(this.componentSelector).jqxTree('hitTest', left, top);
  136. },
  137. removeItem: function(item) {
  138. JQXLite(this.componentSelector).jqxTree('removeItem', item);
  139. },
  140. render: function() {
  141. JQXLite(this.componentSelector).jqxTree('render');
  142. },
  143. refresh: function() {
  144. JQXLite(this.componentSelector).jqxTree('refresh');
  145. },
  146. selectItem: function(item) {
  147. JQXLite(this.componentSelector).jqxTree('selectItem', item);
  148. },
  149. uncheckAll: function() {
  150. JQXLite(this.componentSelector).jqxTree('uncheckAll');
  151. },
  152. uncheckItem: function(item) {
  153. JQXLite(this.componentSelector).jqxTree('uncheckItem', item);
  154. },
  155. updateItem: function(item, newItem) {
  156. JQXLite(this.componentSelector).jqxTree('updateItem', item, newItem);
  157. },
  158. val: function(value) {
  159. if (value !== undefined) {
  160. JQXLite(this.componentSelector).jqxTree('val', value)
  161. } else {
  162. return JQXLite(this.componentSelector).jqxTree('val');
  163. }
  164. },
  165. _animationShowDuration: function(arg) {
  166. if (arg !== undefined) {
  167. JQXLite(this.componentSelector).jqxTree('animationShowDuration', arg)
  168. } else {
  169. return JQXLite(this.componentSelector).jqxTree('animationShowDuration');
  170. }
  171. },
  172. _animationHideDuration: function(arg) {
  173. if (arg !== undefined) {
  174. JQXLite(this.componentSelector).jqxTree('animationHideDuration', arg)
  175. } else {
  176. return JQXLite(this.componentSelector).jqxTree('animationHideDuration');
  177. }
  178. },
  179. _allowDrag: function(arg) {
  180. if (arg !== undefined) {
  181. JQXLite(this.componentSelector).jqxTree('allowDrag', arg)
  182. } else {
  183. return JQXLite(this.componentSelector).jqxTree('allowDrag');
  184. }
  185. },
  186. _allowDrop: function(arg) {
  187. if (arg !== undefined) {
  188. JQXLite(this.componentSelector).jqxTree('allowDrop', arg)
  189. } else {
  190. return JQXLite(this.componentSelector).jqxTree('allowDrop');
  191. }
  192. },
  193. _checkboxes: function(arg) {
  194. if (arg !== undefined) {
  195. JQXLite(this.componentSelector).jqxTree('checkboxes', arg)
  196. } else {
  197. return JQXLite(this.componentSelector).jqxTree('checkboxes');
  198. }
  199. },
  200. _dragStart: function(arg) {
  201. if (arg !== undefined) {
  202. JQXLite(this.componentSelector).jqxTree('dragStart', arg)
  203. } else {
  204. return JQXLite(this.componentSelector).jqxTree('dragStart');
  205. }
  206. },
  207. _dragEnd: function(arg) {
  208. if (arg !== undefined) {
  209. JQXLite(this.componentSelector).jqxTree('dragEnd', arg)
  210. } else {
  211. return JQXLite(this.componentSelector).jqxTree('dragEnd');
  212. }
  213. },
  214. _disabled: function(arg) {
  215. if (arg !== undefined) {
  216. JQXLite(this.componentSelector).jqxTree('disabled', arg)
  217. } else {
  218. return JQXLite(this.componentSelector).jqxTree('disabled');
  219. }
  220. },
  221. _easing: function(arg) {
  222. if (arg !== undefined) {
  223. JQXLite(this.componentSelector).jqxTree('easing', arg)
  224. } else {
  225. return JQXLite(this.componentSelector).jqxTree('easing');
  226. }
  227. },
  228. _enableHover: function(arg) {
  229. if (arg !== undefined) {
  230. JQXLite(this.componentSelector).jqxTree('enableHover', arg)
  231. } else {
  232. return JQXLite(this.componentSelector).jqxTree('enableHover');
  233. }
  234. },
  235. _height: function(arg) {
  236. if (arg !== undefined) {
  237. JQXLite(this.componentSelector).jqxTree('height', arg)
  238. } else {
  239. return JQXLite(this.componentSelector).jqxTree('height');
  240. }
  241. },
  242. _hasThreeStates: function(arg) {
  243. if (arg !== undefined) {
  244. JQXLite(this.componentSelector).jqxTree('hasThreeStates', arg)
  245. } else {
  246. return JQXLite(this.componentSelector).jqxTree('hasThreeStates');
  247. }
  248. },
  249. _incrementalSearch: function(arg) {
  250. if (arg !== undefined) {
  251. JQXLite(this.componentSelector).jqxTree('incrementalSearch', arg)
  252. } else {
  253. return JQXLite(this.componentSelector).jqxTree('incrementalSearch');
  254. }
  255. },
  256. _keyboardNavigation: function(arg) {
  257. if (arg !== undefined) {
  258. JQXLite(this.componentSelector).jqxTree('keyboardNavigation', arg)
  259. } else {
  260. return JQXLite(this.componentSelector).jqxTree('keyboardNavigation');
  261. }
  262. },
  263. _rtl: function(arg) {
  264. if (arg !== undefined) {
  265. JQXLite(this.componentSelector).jqxTree('rtl', arg)
  266. } else {
  267. return JQXLite(this.componentSelector).jqxTree('rtl');
  268. }
  269. },
  270. _source: function(arg) {
  271. if (arg !== undefined) {
  272. JQXLite(this.componentSelector).jqxTree('source', arg)
  273. } else {
  274. return JQXLite(this.componentSelector).jqxTree('source');
  275. }
  276. },
  277. _toggleIndicatorSize: function(arg) {
  278. if (arg !== undefined) {
  279. JQXLite(this.componentSelector).jqxTree('toggleIndicatorSize', arg)
  280. } else {
  281. return JQXLite(this.componentSelector).jqxTree('toggleIndicatorSize');
  282. }
  283. },
  284. _toggleMode: function(arg) {
  285. if (arg !== undefined) {
  286. JQXLite(this.componentSelector).jqxTree('toggleMode', arg)
  287. } else {
  288. return JQXLite(this.componentSelector).jqxTree('toggleMode');
  289. }
  290. },
  291. _theme: function(arg) {
  292. if (arg !== undefined) {
  293. JQXLite(this.componentSelector).jqxTree('theme', arg)
  294. } else {
  295. return JQXLite(this.componentSelector).jqxTree('theme');
  296. }
  297. },
  298. _width: function(arg) {
  299. if (arg !== undefined) {
  300. JQXLite(this.componentSelector).jqxTree('width', arg)
  301. } else {
  302. return JQXLite(this.componentSelector).jqxTree('width');
  303. }
  304. },
  305. __createComponent__: function (options) {
  306. let widgetOptions;
  307. options ? widgetOptions = options : widgetOptions = this.__manageProps__();
  308. JQXLite(this.componentSelector).jqxTree(widgetOptions);
  309. this.__extendProps__();
  310. this.__wireEvents__();
  311. },
  312. __manageProps__: function () {
  313. const widgetProps = ['animationShowDuration','animationHideDuration','allowDrag','allowDrop','checkboxes','dragStart','dragEnd','disabled','easing','enableHover','height','hasThreeStates','incrementalSearch','keyboardNavigation','rtl','source','toggleIndicatorSize','toggleMode','theme','width'];
  314. const componentProps = this.$options.propsData;
  315. let options = {};
  316. for (let prop in componentProps) {
  317. if (widgetProps.indexOf(prop) !== -1) {
  318. options[prop] = componentProps[prop];
  319. }
  320. }
  321. return options;
  322. },
  323. __extendProps__: function () {
  324. const that = this;
  325. Object.defineProperty(that, 'animationShowDuration', {
  326. get: function() {
  327. return that._animationShowDuration();
  328. },
  329. set: function(newValue) {
  330. that._animationShowDuration(newValue);
  331. },
  332. enumerable: true,
  333. configurable: true
  334. });
  335. Object.defineProperty(that, 'animationHideDuration', {
  336. get: function() {
  337. return that._animationHideDuration();
  338. },
  339. set: function(newValue) {
  340. that._animationHideDuration(newValue);
  341. },
  342. enumerable: true,
  343. configurable: true
  344. });
  345. Object.defineProperty(that, 'allowDrag', {
  346. get: function() {
  347. return that._allowDrag();
  348. },
  349. set: function(newValue) {
  350. that._allowDrag(newValue);
  351. },
  352. enumerable: true,
  353. configurable: true
  354. });
  355. Object.defineProperty(that, 'allowDrop', {
  356. get: function() {
  357. return that._allowDrop();
  358. },
  359. set: function(newValue) {
  360. that._allowDrop(newValue);
  361. },
  362. enumerable: true,
  363. configurable: true
  364. });
  365. Object.defineProperty(that, 'checkboxes', {
  366. get: function() {
  367. return that._checkboxes();
  368. },
  369. set: function(newValue) {
  370. that._checkboxes(newValue);
  371. },
  372. enumerable: true,
  373. configurable: true
  374. });
  375. Object.defineProperty(that, 'dragStart', {
  376. get: function() {
  377. return that._dragStart();
  378. },
  379. set: function(newValue) {
  380. that._dragStart(newValue);
  381. },
  382. enumerable: true,
  383. configurable: true
  384. });
  385. Object.defineProperty(that, 'dragEnd', {
  386. get: function() {
  387. return that._dragEnd();
  388. },
  389. set: function(newValue) {
  390. that._dragEnd(newValue);
  391. },
  392. enumerable: true,
  393. configurable: true
  394. });
  395. Object.defineProperty(that, 'disabled', {
  396. get: function() {
  397. return that._disabled();
  398. },
  399. set: function(newValue) {
  400. that._disabled(newValue);
  401. },
  402. enumerable: true,
  403. configurable: true
  404. });
  405. Object.defineProperty(that, 'easing', {
  406. get: function() {
  407. return that._easing();
  408. },
  409. set: function(newValue) {
  410. that._easing(newValue);
  411. },
  412. enumerable: true,
  413. configurable: true
  414. });
  415. Object.defineProperty(that, 'enableHover', {
  416. get: function() {
  417. return that._enableHover();
  418. },
  419. set: function(newValue) {
  420. that._enableHover(newValue);
  421. },
  422. enumerable: true,
  423. configurable: true
  424. });
  425. Object.defineProperty(that, 'height', {
  426. get: function() {
  427. return that._height();
  428. },
  429. set: function(newValue) {
  430. that._height(newValue);
  431. },
  432. enumerable: true,
  433. configurable: true
  434. });
  435. Object.defineProperty(that, 'hasThreeStates', {
  436. get: function() {
  437. return that._hasThreeStates();
  438. },
  439. set: function(newValue) {
  440. that._hasThreeStates(newValue);
  441. },
  442. enumerable: true,
  443. configurable: true
  444. });
  445. Object.defineProperty(that, 'incrementalSearch', {
  446. get: function() {
  447. return that._incrementalSearch();
  448. },
  449. set: function(newValue) {
  450. that._incrementalSearch(newValue);
  451. },
  452. enumerable: true,
  453. configurable: true
  454. });
  455. Object.defineProperty(that, 'keyboardNavigation', {
  456. get: function() {
  457. return that._keyboardNavigation();
  458. },
  459. set: function(newValue) {
  460. that._keyboardNavigation(newValue);
  461. },
  462. enumerable: true,
  463. configurable: true
  464. });
  465. Object.defineProperty(that, 'rtl', {
  466. get: function() {
  467. return that._rtl();
  468. },
  469. set: function(newValue) {
  470. that._rtl(newValue);
  471. },
  472. enumerable: true,
  473. configurable: true
  474. });
  475. Object.defineProperty(that, 'source', {
  476. get: function() {
  477. return that._source();
  478. },
  479. set: function(newValue) {
  480. that._source(newValue);
  481. },
  482. enumerable: true,
  483. configurable: true
  484. });
  485. Object.defineProperty(that, 'toggleIndicatorSize', {
  486. get: function() {
  487. return that._toggleIndicatorSize();
  488. },
  489. set: function(newValue) {
  490. that._toggleIndicatorSize(newValue);
  491. },
  492. enumerable: true,
  493. configurable: true
  494. });
  495. Object.defineProperty(that, 'toggleMode', {
  496. get: function() {
  497. return that._toggleMode();
  498. },
  499. set: function(newValue) {
  500. that._toggleMode(newValue);
  501. },
  502. enumerable: true,
  503. configurable: true
  504. });
  505. Object.defineProperty(that, 'theme', {
  506. get: function() {
  507. return that._theme();
  508. },
  509. set: function(newValue) {
  510. that._theme(newValue);
  511. },
  512. enumerable: true,
  513. configurable: true
  514. });
  515. Object.defineProperty(that, 'width', {
  516. get: function() {
  517. return that._width();
  518. },
  519. set: function(newValue) {
  520. that._width(newValue);
  521. },
  522. enumerable: true,
  523. configurable: true
  524. });
  525. },
  526. __wireEvents__: function () {
  527. const that = this;
  528. JQXLite(this.componentSelector).on('added', function (event) { that.$emit('added', event); });
  529. JQXLite(this.componentSelector).on('checkChange', function (event) { that.$emit('checkChange', event); });
  530. JQXLite(this.componentSelector).on('collapse', function (event) { that.$emit('collapse', event); });
  531. JQXLite(this.componentSelector).on('dragStart', function (event) { that.$emit('dragStart', event); });
  532. JQXLite(this.componentSelector).on('dragEnd', function (event) { that.$emit('dragEnd', event); });
  533. JQXLite(this.componentSelector).on('expand', function (event) { that.$emit('expand', event); });
  534. JQXLite(this.componentSelector).on('itemClick', function (event) { that.$emit('itemClick', event); });
  535. JQXLite(this.componentSelector).on('removed', function (event) { that.$emit('removed', event); });
  536. JQXLite(this.componentSelector).on('select', function (event) { that.$emit('select', event); });
  537. }
  538. }
  539. }
  540. </script>