index.js 7.7 KB

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