index.js 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399
  1. "use strict";
  2. var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
  3. exports.__esModule = true;
  4. exports.default = void 0;
  5. var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
  6. var _utils = require("../utils");
  7. var _event = require("../utils/dom/event");
  8. var _constant = require("../utils/constant");
  9. var _shared = require("./shared");
  10. var _unit = require("../utils/format/unit");
  11. var _loading = _interopRequireDefault(require("../loading"));
  12. var _PickerColumn = _interopRequireDefault(require("./PickerColumn"));
  13. // Utils
  14. // Components
  15. var _createNamespace = (0, _utils.createNamespace)('picker'),
  16. createComponent = _createNamespace[0],
  17. bem = _createNamespace[1],
  18. t = _createNamespace[2];
  19. var _default2 = createComponent({
  20. props: (0, _extends2.default)({}, _shared.pickerProps, {
  21. defaultIndex: {
  22. type: [Number, String],
  23. default: 0
  24. },
  25. columns: {
  26. type: Array,
  27. default: function _default() {
  28. return [];
  29. }
  30. },
  31. toolbarPosition: {
  32. type: String,
  33. default: 'top'
  34. },
  35. valueKey: {
  36. type: String,
  37. default: 'text'
  38. }
  39. }),
  40. data: function data() {
  41. return {
  42. children: [],
  43. formattedColumns: []
  44. };
  45. },
  46. computed: {
  47. itemPxHeight: function itemPxHeight() {
  48. return this.itemHeight ? (0, _unit.unitToPx)(this.itemHeight) : _shared.DEFAULT_ITEM_HEIGHT;
  49. },
  50. dataType: function dataType() {
  51. var columns = this.columns;
  52. var firstColumn = columns[0] || {};
  53. if (firstColumn.children) {
  54. return 'cascade';
  55. }
  56. if (firstColumn.values) {
  57. return 'object';
  58. }
  59. return 'text';
  60. }
  61. },
  62. watch: {
  63. columns: {
  64. handler: 'format',
  65. immediate: true
  66. }
  67. },
  68. methods: {
  69. format: function format() {
  70. var columns = this.columns,
  71. dataType = this.dataType;
  72. if (dataType === 'text') {
  73. this.formattedColumns = [{
  74. values: columns
  75. }];
  76. } else if (dataType === 'cascade') {
  77. this.formatCascade();
  78. } else {
  79. this.formattedColumns = columns;
  80. }
  81. },
  82. formatCascade: function formatCascade() {
  83. var formatted = [];
  84. var cursor = {
  85. children: this.columns
  86. };
  87. while (cursor && cursor.children) {
  88. var _cursor$defaultIndex;
  89. var _cursor = cursor,
  90. children = _cursor.children;
  91. var defaultIndex = (_cursor$defaultIndex = cursor.defaultIndex) != null ? _cursor$defaultIndex : +this.defaultIndex;
  92. while (children[defaultIndex] && children[defaultIndex].disabled) {
  93. if (defaultIndex < children.length - 1) {
  94. defaultIndex++;
  95. } else {
  96. defaultIndex = 0;
  97. break;
  98. }
  99. }
  100. formatted.push({
  101. values: cursor.children,
  102. className: cursor.className,
  103. defaultIndex: defaultIndex
  104. });
  105. cursor = children[defaultIndex];
  106. }
  107. this.formattedColumns = formatted;
  108. },
  109. emit: function emit(event) {
  110. var _this = this;
  111. if (this.dataType === 'text') {
  112. this.$emit(event, this.getColumnValue(0), this.getColumnIndex(0));
  113. } else {
  114. var values = this.getValues(); // compatible with old version of wrong parameters
  115. // should be removed in next major version
  116. // see: https://github.com/vant-ui/vant/issues/5905
  117. if (this.dataType === 'cascade') {
  118. values = values.map(function (item) {
  119. return item[_this.valueKey];
  120. });
  121. }
  122. this.$emit(event, values, this.getIndexes());
  123. }
  124. },
  125. onCascadeChange: function onCascadeChange(columnIndex) {
  126. var cursor = {
  127. children: this.columns
  128. };
  129. var indexes = this.getIndexes();
  130. for (var i = 0; i <= columnIndex; i++) {
  131. cursor = cursor.children[indexes[i]];
  132. }
  133. while (cursor && cursor.children) {
  134. columnIndex++;
  135. this.setColumnValues(columnIndex, cursor.children);
  136. cursor = cursor.children[cursor.defaultIndex || 0];
  137. }
  138. },
  139. onChange: function onChange(columnIndex) {
  140. var _this2 = this;
  141. if (this.dataType === 'cascade') {
  142. this.onCascadeChange(columnIndex);
  143. }
  144. if (this.dataType === 'text') {
  145. this.$emit('change', this, this.getColumnValue(0), this.getColumnIndex(0));
  146. } else {
  147. var values = this.getValues(); // compatible with old version of wrong parameters
  148. // should be removed in next major version
  149. // see: https://github.com/vant-ui/vant/issues/5905
  150. if (this.dataType === 'cascade') {
  151. values = values.map(function (item) {
  152. return item[_this2.valueKey];
  153. });
  154. }
  155. this.$emit('change', this, values, columnIndex);
  156. }
  157. },
  158. // get column instance by index
  159. getColumn: function getColumn(index) {
  160. return this.children[index];
  161. },
  162. // @exposed-api
  163. // get column value by index
  164. getColumnValue: function getColumnValue(index) {
  165. var column = this.getColumn(index);
  166. return column && column.getValue();
  167. },
  168. // @exposed-api
  169. // set column value by index
  170. setColumnValue: function setColumnValue(index, value) {
  171. var column = this.getColumn(index);
  172. if (column) {
  173. column.setValue(value);
  174. if (this.dataType === 'cascade') {
  175. this.onCascadeChange(index);
  176. }
  177. }
  178. },
  179. // @exposed-api
  180. // get column option index by column index
  181. getColumnIndex: function getColumnIndex(columnIndex) {
  182. return (this.getColumn(columnIndex) || {}).currentIndex;
  183. },
  184. // @exposed-api
  185. // set column option index by column index
  186. setColumnIndex: function setColumnIndex(columnIndex, optionIndex) {
  187. var column = this.getColumn(columnIndex);
  188. if (column) {
  189. column.setIndex(optionIndex);
  190. if (this.dataType === 'cascade') {
  191. this.onCascadeChange(columnIndex);
  192. }
  193. }
  194. },
  195. // @exposed-api
  196. // get options of column by index
  197. getColumnValues: function getColumnValues(index) {
  198. return (this.children[index] || {}).options;
  199. },
  200. // @exposed-api
  201. // set options of column by index
  202. setColumnValues: function setColumnValues(index, options) {
  203. var column = this.children[index];
  204. if (column) {
  205. column.setOptions(options);
  206. }
  207. },
  208. // @exposed-api
  209. // get values of all columns
  210. getValues: function getValues() {
  211. return this.children.map(function (child) {
  212. return child.getValue();
  213. });
  214. },
  215. // @exposed-api
  216. // set values of all columns
  217. setValues: function setValues(values) {
  218. var _this3 = this;
  219. values.forEach(function (value, index) {
  220. _this3.setColumnValue(index, value);
  221. });
  222. },
  223. // @exposed-api
  224. // get indexes of all columns
  225. getIndexes: function getIndexes() {
  226. return this.children.map(function (child) {
  227. return child.currentIndex;
  228. });
  229. },
  230. // @exposed-api
  231. // set indexes of all columns
  232. setIndexes: function setIndexes(indexes) {
  233. var _this4 = this;
  234. indexes.forEach(function (optionIndex, columnIndex) {
  235. _this4.setColumnIndex(columnIndex, optionIndex);
  236. });
  237. },
  238. // @exposed-api
  239. confirm: function confirm() {
  240. this.children.forEach(function (child) {
  241. return child.stopMomentum();
  242. });
  243. this.emit('confirm');
  244. },
  245. cancel: function cancel() {
  246. this.emit('cancel');
  247. },
  248. genTitle: function genTitle() {
  249. var h = this.$createElement;
  250. var titleSlot = this.slots('title');
  251. if (titleSlot) {
  252. return titleSlot;
  253. }
  254. if (this.title) {
  255. return h("div", {
  256. "class": ['van-ellipsis', bem('title')]
  257. }, [this.title]);
  258. }
  259. },
  260. genCancel: function genCancel() {
  261. var h = this.$createElement;
  262. return h("button", {
  263. "attrs": {
  264. "type": "button"
  265. },
  266. "class": bem('cancel'),
  267. "on": {
  268. "click": this.cancel
  269. }
  270. }, [this.slots('cancel') || this.cancelButtonText || t('cancel')]);
  271. },
  272. genConfirm: function genConfirm() {
  273. var h = this.$createElement;
  274. return h("button", {
  275. "attrs": {
  276. "type": "button"
  277. },
  278. "class": bem('confirm'),
  279. "on": {
  280. "click": this.confirm
  281. }
  282. }, [this.slots('confirm') || this.confirmButtonText || t('confirm')]);
  283. },
  284. genToolbar: function genToolbar() {
  285. var h = this.$createElement;
  286. if (this.showToolbar) {
  287. return h("div", {
  288. "class": bem('toolbar')
  289. }, [this.slots() || [this.genCancel(), this.genTitle(), this.genConfirm()]]);
  290. }
  291. },
  292. genColumns: function genColumns() {
  293. var h = this.$createElement;
  294. var itemPxHeight = this.itemPxHeight;
  295. var wrapHeight = itemPxHeight * this.visibleItemCount;
  296. var frameStyle = {
  297. height: itemPxHeight + "px"
  298. };
  299. var columnsStyle = {
  300. height: wrapHeight + "px"
  301. };
  302. var maskStyle = {
  303. backgroundSize: "100% " + (wrapHeight - itemPxHeight) / 2 + "px"
  304. };
  305. return h("div", {
  306. "class": bem('columns'),
  307. "style": columnsStyle,
  308. "on": {
  309. "touchmove": _event.preventDefault
  310. }
  311. }, [this.genColumnItems(), h("div", {
  312. "class": bem('mask'),
  313. "style": maskStyle
  314. }), h("div", {
  315. "class": [_constant.BORDER_UNSET_TOP_BOTTOM, bem('frame')],
  316. "style": frameStyle
  317. })]);
  318. },
  319. genColumnItems: function genColumnItems() {
  320. var _this5 = this;
  321. var h = this.$createElement;
  322. return this.formattedColumns.map(function (item, columnIndex) {
  323. var _item$defaultIndex;
  324. return h(_PickerColumn.default, {
  325. "attrs": {
  326. "readonly": _this5.readonly,
  327. "valueKey": _this5.valueKey,
  328. "allowHtml": _this5.allowHtml,
  329. "className": item.className,
  330. "itemHeight": _this5.itemPxHeight,
  331. "defaultIndex": (_item$defaultIndex = item.defaultIndex) != null ? _item$defaultIndex : +_this5.defaultIndex,
  332. "swipeDuration": _this5.swipeDuration,
  333. "visibleItemCount": _this5.visibleItemCount,
  334. "initialOptions": item.values
  335. },
  336. "scopedSlots": {
  337. option: _this5.$scopedSlots.option
  338. },
  339. "on": {
  340. "change": function change() {
  341. _this5.onChange(columnIndex);
  342. }
  343. }
  344. });
  345. });
  346. }
  347. },
  348. render: function render(h) {
  349. return h("div", {
  350. "class": bem()
  351. }, [this.toolbarPosition === 'top' ? this.genToolbar() : h(), this.loading ? h(_loading.default, {
  352. "class": bem('loading')
  353. }) : h(), this.slots('columns-top'), this.genColumns(), this.slots('columns-bottom'), this.toolbarPosition === 'bottom' ? this.genToolbar() : h()]);
  354. }
  355. });
  356. exports.default = _default2;