index.js 7.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273
  1. import { createNamespace } from '../utils';
  2. import Tab from '../tab';
  3. import Tabs from '../tabs';
  4. import Icon from '../icon';
  5. var _createNamespace = createNamespace('cascader'),
  6. createComponent = _createNamespace[0],
  7. bem = _createNamespace[1],
  8. t = _createNamespace[2];
  9. export default createComponent({
  10. props: {
  11. title: String,
  12. value: [Number, String],
  13. fieldNames: Object,
  14. placeholder: String,
  15. activeColor: String,
  16. options: {
  17. type: Array,
  18. default: function _default() {
  19. return [];
  20. }
  21. },
  22. closeable: {
  23. type: Boolean,
  24. default: true
  25. }
  26. },
  27. data: function data() {
  28. return {
  29. tabs: [],
  30. activeTab: 0
  31. };
  32. },
  33. computed: {
  34. textKey: function textKey() {
  35. var _this$fieldNames;
  36. return ((_this$fieldNames = this.fieldNames) == null ? void 0 : _this$fieldNames.text) || 'text';
  37. },
  38. valueKey: function valueKey() {
  39. var _this$fieldNames2;
  40. return ((_this$fieldNames2 = this.fieldNames) == null ? void 0 : _this$fieldNames2.value) || 'value';
  41. },
  42. childrenKey: function childrenKey() {
  43. var _this$fieldNames3;
  44. return ((_this$fieldNames3 = this.fieldNames) == null ? void 0 : _this$fieldNames3.children) || 'children';
  45. }
  46. },
  47. watch: {
  48. options: {
  49. deep: true,
  50. handler: 'updateTabs'
  51. },
  52. value: function value(_value) {
  53. var _this = this;
  54. if (_value || _value === 0) {
  55. var values = this.tabs.map(function (tab) {
  56. var _tab$selectedOption;
  57. return (_tab$selectedOption = tab.selectedOption) == null ? void 0 : _tab$selectedOption[_this.valueKey];
  58. });
  59. if (values.indexOf(_value) !== -1) {
  60. return;
  61. }
  62. }
  63. this.updateTabs();
  64. }
  65. },
  66. created: function created() {
  67. this.updateTabs();
  68. },
  69. methods: {
  70. getSelectedOptionsByValue: function getSelectedOptionsByValue(options, value) {
  71. for (var i = 0; i < options.length; i++) {
  72. var option = options[i];
  73. if (option[this.valueKey] === value) {
  74. return [option];
  75. }
  76. if (option[this.childrenKey]) {
  77. var selectedOptions = this.getSelectedOptionsByValue(option[this.childrenKey], value);
  78. if (selectedOptions) {
  79. return [option].concat(selectedOptions);
  80. }
  81. }
  82. }
  83. },
  84. updateTabs: function updateTabs() {
  85. var _this2 = this;
  86. if (this.value || this.value === 0) {
  87. var selectedOptions = this.getSelectedOptionsByValue(this.options, this.value);
  88. if (selectedOptions) {
  89. var optionsCursor = this.options;
  90. this.tabs = selectedOptions.map(function (option) {
  91. var tab = {
  92. options: optionsCursor,
  93. selectedOption: option
  94. };
  95. var next = optionsCursor.filter(function (item) {
  96. return item[_this2.valueKey] === option[_this2.valueKey];
  97. });
  98. if (next.length) {
  99. optionsCursor = next[0][_this2.childrenKey];
  100. }
  101. return tab;
  102. });
  103. if (optionsCursor) {
  104. this.tabs.push({
  105. options: optionsCursor,
  106. selectedOption: null
  107. });
  108. }
  109. this.$nextTick(function () {
  110. _this2.activeTab = _this2.tabs.length - 1;
  111. });
  112. return;
  113. }
  114. }
  115. this.tabs = [{
  116. options: this.options,
  117. selectedOption: null
  118. }];
  119. },
  120. onSelect: function onSelect(option, tabIndex) {
  121. var _this3 = this;
  122. this.tabs[tabIndex].selectedOption = option;
  123. if (this.tabs.length > tabIndex + 1) {
  124. this.tabs = this.tabs.slice(0, tabIndex + 1);
  125. }
  126. if (option[this.childrenKey]) {
  127. var nextTab = {
  128. options: option[this.childrenKey],
  129. selectedOption: null
  130. };
  131. if (this.tabs[tabIndex + 1]) {
  132. this.$set(this.tabs, tabIndex + 1, nextTab);
  133. } else {
  134. this.tabs.push(nextTab);
  135. }
  136. this.$nextTick(function () {
  137. _this3.activeTab++;
  138. });
  139. }
  140. var selectedOptions = this.tabs.map(function (tab) {
  141. return tab.selectedOption;
  142. }).filter(function (item) {
  143. return !!item;
  144. });
  145. var eventParams = {
  146. value: option[this.valueKey],
  147. tabIndex: tabIndex,
  148. selectedOptions: selectedOptions
  149. };
  150. this.$emit('input', option[this.valueKey]);
  151. this.$emit('change', eventParams);
  152. if (!option[this.childrenKey]) {
  153. this.$emit('finish', eventParams);
  154. }
  155. },
  156. onClose: function onClose() {
  157. this.$emit('close');
  158. },
  159. renderHeader: function renderHeader() {
  160. var h = this.$createElement;
  161. return h("div", {
  162. "class": bem('header')
  163. }, [h("h2", {
  164. "class": bem('title')
  165. }, [this.slots('title') || this.title]), this.closeable ? h(Icon, {
  166. "attrs": {
  167. "name": "cross"
  168. },
  169. "class": bem('close-icon'),
  170. "on": {
  171. "click": this.onClose
  172. }
  173. }) : null]);
  174. },
  175. renderOptions: function renderOptions(options, selectedOption, tabIndex) {
  176. var _this4 = this;
  177. var h = this.$createElement;
  178. var renderOption = function renderOption(option) {
  179. var isSelected = selectedOption && option[_this4.valueKey] === selectedOption[_this4.valueKey];
  180. return h("li", {
  181. "class": bem('option', {
  182. selected: isSelected
  183. }),
  184. "style": {
  185. color: isSelected ? _this4.activeColor : null
  186. },
  187. "on": {
  188. "click": function click() {
  189. _this4.onSelect(option, tabIndex);
  190. }
  191. }
  192. }, [h("span", [option[_this4.textKey]]), isSelected ? h(Icon, {
  193. "attrs": {
  194. "name": "success"
  195. },
  196. "class": bem('selected-icon')
  197. }) : null]);
  198. };
  199. return h("ul", {
  200. "class": bem('options')
  201. }, [options.map(renderOption)]);
  202. },
  203. renderTab: function renderTab(item, tabIndex) {
  204. var h = this.$createElement;
  205. var options = item.options,
  206. selectedOption = item.selectedOption;
  207. var title = selectedOption ? selectedOption[this.textKey] : this.placeholder || t('select');
  208. return h(Tab, {
  209. "attrs": {
  210. "title": title,
  211. "titleClass": bem('tab', {
  212. unselected: !selectedOption
  213. })
  214. }
  215. }, [this.renderOptions(options, selectedOption, tabIndex)]);
  216. },
  217. renderTabs: function renderTabs() {
  218. var _this5 = this;
  219. var h = this.$createElement;
  220. return h(Tabs, {
  221. "attrs": {
  222. "animated": true,
  223. "swipeable": true,
  224. "swipeThreshold": 0,
  225. "color": this.activeColor
  226. },
  227. "class": bem('tabs'),
  228. "model": {
  229. value: _this5.activeTab,
  230. callback: function callback($$v) {
  231. _this5.activeTab = $$v;
  232. }
  233. }
  234. }, [this.tabs.map(this.renderTab)]);
  235. }
  236. },
  237. render: function render() {
  238. var h = arguments[0];
  239. return h("div", {
  240. "class": bem()
  241. }, [this.renderHeader(), this.renderTabs()]);
  242. }
  243. });