index.js 7.3 KB

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