@nutui/nutui 4.1.3 → 4.1.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -91,8 +91,10 @@ const _sfc_main = create({
91
91
  }
92
92
  };
93
93
  const close = (e) => {
94
- emit("close", e);
95
- emit("update:visible", false);
94
+ if (props.closeAbled) {
95
+ emit("close", e);
96
+ emit("update:visible", false);
97
+ }
96
98
  };
97
99
  return {
98
100
  slotDefault,
@@ -360,7 +360,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
360
360
  class: normalizeClass(_ctx.wrapContentClass),
361
361
  style: normalizeStyle(_ctx.contentStyle),
362
362
  onAnimationend: _cache[0] || (_cache[0] = (...args) => _ctx.onAnimationEnd && _ctx.onAnimationEnd(...args)),
363
- "on:webkitAnimationEnd": _cache[1] || (_cache[1] = (...args) => _ctx.onAnimationEnd && _ctx.onAnimationEnd(...args))
363
+ onWebkitAnimationEnd: _cache[1] || (_cache[1] = (...args) => _ctx.onAnimationEnd && _ctx.onAnimationEnd(...args))
364
364
  }, [
365
365
  renderSlot(_ctx.$slots, "default", {}, () => [
366
366
  createTextVNode(toDisplayString(_ctx.text), 1)
@@ -17,72 +17,91 @@ var __spreadValues = (a, b) => {
17
17
  return a;
18
18
  };
19
19
  var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
20
- import { reactive, ref, computed, watch, toRefs, onMounted, openBlock, createElementBlock, createElementVNode, normalizeStyle, Fragment, renderList, normalizeClass, toDisplayString, createCommentVNode, resolveComponent, renderSlot, createVNode } from "vue";
20
+ import { reactive, computed, ref, watch, toRefs, onMounted, openBlock, createElementBlock, createElementVNode, normalizeStyle, Fragment, renderList, normalizeClass, toDisplayString, createCommentVNode, resolveComponent, renderSlot, createVNode } from "vue";
21
21
  import { c as createComponent, d as preventDefault, e as clamp } from "./component-0fbad28e.js";
22
22
  import { p as pxCheck } from "./pxCheck-c6b9f6b7.js";
23
23
  import { u as useTouch } from "./index-7a7385e4.js";
24
24
  import { _ as _export_sfc } from "./_plugin-vue_export-helper-cc2b3d55.js";
25
25
  import "../locale/lang";
26
- const { componentName } = createComponent("picker");
26
+ const DEFAULT_FILED_NAMES = {
27
+ text: "text",
28
+ value: "value",
29
+ children: "children"
30
+ };
27
31
  const usePicker = (props, emit) => {
28
32
  const state = reactive({
29
33
  formattedColumns: props.columns
30
34
  });
35
+ const columnFieldNames = computed(() => {
36
+ return __spreadValues(__spreadValues({}, DEFAULT_FILED_NAMES), props.fieldNames);
37
+ });
31
38
  const defaultValues = ref([]);
39
+ const defaultIndexes = computed(() => {
40
+ const fields = columnFieldNames.value;
41
+ return columnsList.value.map((column2, index) => {
42
+ const targetIndex = column2.findIndex((item) => item[fields.value] === defaultValues.value[index]);
43
+ return targetIndex === -1 ? 0 : targetIndex;
44
+ });
45
+ });
32
46
  const pickerColumn = ref([]);
33
47
  const swipeRef = (el) => {
34
48
  if (el && pickerColumn.value.length < columnsList.value.length) {
35
49
  pickerColumn.value.push(el);
36
50
  }
37
51
  };
38
- const classes = computed(() => {
39
- const prefixCls = componentName;
40
- return {
41
- [prefixCls]: true
42
- };
43
- });
44
52
  const selectedOptions = computed(() => {
53
+ const fields = columnFieldNames.value;
45
54
  return columnsList.value.map((column2, index) => {
46
- return column2.find((item) => item.value === defaultValues.value[index]);
55
+ return column2.find((item) => item[fields.value] === defaultValues.value[index]) || column2[0];
47
56
  });
48
57
  });
49
58
  const columnsType = computed(() => {
50
59
  const firstColumn = state.formattedColumns[0];
60
+ const fields = columnFieldNames.value;
51
61
  if (firstColumn) {
52
62
  if (Array.isArray(firstColumn)) {
53
63
  return "multiple";
54
64
  }
55
- if ("children" in firstColumn) {
65
+ if (fields.children in firstColumn) {
56
66
  return "cascade";
57
67
  }
58
68
  }
59
69
  return "single";
60
70
  });
61
71
  const columnsList = computed(() => {
72
+ let result = [];
62
73
  switch (columnsType.value) {
63
74
  case "multiple":
64
- return state.formattedColumns;
75
+ result = state.formattedColumns;
76
+ break;
65
77
  case "cascade":
66
- return formatCascade(state.formattedColumns, defaultValues.value ? defaultValues.value : []);
78
+ result = formatCascade(
79
+ state.formattedColumns,
80
+ defaultValues.value ? defaultValues.value : []
81
+ );
82
+ break;
67
83
  default:
68
- return [state.formattedColumns];
84
+ result = [state.formattedColumns];
85
+ break;
69
86
  }
87
+ return result;
70
88
  });
71
89
  const formatCascade = (columns, defaultValues2) => {
72
90
  const formatted = [];
91
+ const fields = columnFieldNames.value;
73
92
  let cursor = {
74
93
  text: "",
75
94
  value: "",
76
- children: columns
95
+ [fields.children]: columns
77
96
  };
78
97
  let columnIndex = 0;
79
- while (cursor && cursor.children) {
80
- const options = cursor.children;
98
+ while (cursor && cursor[fields.children]) {
99
+ const options = cursor[fields.children];
81
100
  const value = defaultValues2[columnIndex];
82
- let index = options.findIndex((columnItem) => columnItem.value === value);
101
+ let index = options.findIndex((columnItem) => columnItem[fields.value] === value);
83
102
  if (index === -1)
84
103
  index = 0;
85
- cursor = cursor.children[index];
104
+ cursor = cursor[fields.children][index];
86
105
  columnIndex++;
87
106
  formatted.push(options);
88
107
  }
@@ -95,22 +114,24 @@ const usePicker = (props, emit) => {
95
114
  });
96
115
  };
97
116
  const changeHandler = (columnIndex, option) => {
117
+ var _a;
118
+ const fields = columnFieldNames.value;
98
119
  if (option && Object.keys(option).length) {
99
120
  defaultValues.value = defaultValues.value ? defaultValues.value : [];
100
121
  if (columnsType.value === "cascade") {
101
- defaultValues.value[columnIndex] = option.value ? option.value : "";
122
+ defaultValues.value[columnIndex] = (_a = option[fields.value]) != null ? _a : "";
102
123
  let index = columnIndex;
103
124
  let cursor = option;
104
- while (cursor && cursor.children && cursor.children[0]) {
105
- defaultValues.value[index + 1] = cursor.children[0].value;
125
+ while (cursor && cursor[fields.children] && cursor[fields.children][0]) {
126
+ defaultValues.value[index + 1] = cursor[fields.children][0][fields.value];
106
127
  index++;
107
- cursor = cursor.children[0];
128
+ cursor = cursor[fields.children][0];
108
129
  }
109
- if (cursor && cursor.children && cursor.children.length === 0) {
130
+ if (cursor && cursor[fields.children] && cursor[fields.children].length === 0) {
110
131
  defaultValues.value = defaultValues.value.slice(0, index + 1);
111
132
  }
112
133
  } else {
113
- defaultValues.value[columnIndex] = Object.prototype.hasOwnProperty.call(option, "value") ? option.value : "";
134
+ defaultValues.value[columnIndex] = Object.prototype.hasOwnProperty.call(option, fields.value) ? option[fields.value] : "";
114
135
  }
115
136
  emit("change", {
116
137
  columnIndex,
@@ -120,9 +141,10 @@ const usePicker = (props, emit) => {
120
141
  }
121
142
  };
122
143
  const confirm = () => {
144
+ const fields = columnFieldNames.value;
123
145
  if (defaultValues.value && !defaultValues.value.length) {
124
146
  columnsList.value.forEach((columns) => {
125
- defaultValues.value.push(columns[0].value);
147
+ defaultValues.value.push(columns[0][fields.value]);
126
148
  });
127
149
  }
128
150
  emit("confirm", {
@@ -156,15 +178,15 @@ const usePicker = (props, emit) => {
156
178
  state.formattedColumns = val;
157
179
  }
158
180
  );
159
- return __spreadProps(__spreadValues({
160
- classes
161
- }, toRefs(state)), {
181
+ return __spreadProps(__spreadValues({}, toRefs(state)), {
162
182
  columnsType,
163
183
  columnsList,
184
+ columnFieldNames,
164
185
  cancel,
165
186
  changeHandler,
166
187
  confirm,
167
188
  defaultValues,
189
+ defaultIndexes,
168
190
  pickerColumn,
169
191
  swipeRef,
170
192
  selectedOptions,
@@ -197,6 +219,15 @@ const _sfc_main$1 = create$1({
197
219
  optionHeight: {
198
220
  type: [Number, String],
199
221
  default: 36
222
+ },
223
+ fieldNames: {
224
+ type: Object,
225
+ default: () => ({})
226
+ },
227
+ // 特殊环境判断
228
+ taro: {
229
+ type: Boolean,
230
+ defualt: false
200
231
  }
201
232
  },
202
233
  emits: ["click", "change"],
@@ -249,8 +280,8 @@ const _sfc_main$1 = create$1({
249
280
  });
250
281
  const onTouchStart = (event) => {
251
282
  touch.start(event);
252
- if (moving.value) {
253
- let dom = roller.value;
283
+ if (moving.value && !props.taro) {
284
+ const dom = roller.value;
254
285
  const { transform } = window.getComputedStyle(dom);
255
286
  if (props.threeDimensional) {
256
287
  const circle = Math.floor(parseInt(touchDeg.value) / 360);
@@ -346,7 +377,7 @@ const _sfc_main$1 = create$1({
346
377
  };
347
378
  const modifyStatus = (type) => {
348
379
  const { column: column2 } = props;
349
- let index = column2.findIndex((columnItem) => columnItem.value === props.value);
380
+ let index = column2.findIndex((columnItem) => columnItem[props.fieldNames.value] === props.value);
350
381
  state.currIndex = index === -1 ? 1 : index + 1;
351
382
  let move = index === -1 ? 0 : index * +props.optionHeight;
352
383
  type && setChooseValue();
@@ -412,19 +443,20 @@ function _sfc_render$1(_ctx, _cache, $props, $setup, $data, $options) {
412
443
  onTransitionend: _cache[0] || (_cache[0] = (...args) => _ctx.stopMomentum && _ctx.stopMomentum(...args))
413
444
  }, [
414
445
  (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.column, (item, index) => {
446
+ var _a;
415
447
  return openBlock(), createElementBlock(Fragment, {
416
- key: item.value ? item.value : index
448
+ key: (_a = item[_ctx.fieldNames.value]) != null ? _a : index
417
449
  }, [
418
- item && item.text && _ctx.threeDimensional ? (openBlock(), createElementBlock("view", {
450
+ item && item[_ctx.fieldNames.text] && _ctx.threeDimensional ? (openBlock(), createElementBlock("view", {
419
451
  key: 0,
420
452
  class: normalizeClass(["nut-picker-roller-item", { "nut-picker-roller-item-hidden": _ctx.isHidden(index + 1) }]),
421
453
  style: normalizeStyle(_ctx.setRollerStyle(index + 1))
422
- }, toDisplayString(item.text), 7)) : createCommentVNode("", true),
423
- item && item.text && !_ctx.threeDimensional ? (openBlock(), createElementBlock("view", {
454
+ }, toDisplayString(item[_ctx.fieldNames.text]), 7)) : createCommentVNode("", true),
455
+ item && item[_ctx.fieldNames.text] && !_ctx.threeDimensional ? (openBlock(), createElementBlock("view", {
424
456
  key: 1,
425
457
  class: "nut-picker-roller-item-tile",
426
458
  style: normalizeStyle({ height: _ctx.pxCheck(_ctx.optionHeight), lineHeight: _ctx.pxCheck(_ctx.optionHeight) })
427
- }, toDisplayString(item.text), 5)) : createCommentVNode("", true)
459
+ }, toDisplayString(item[_ctx.fieldNames.text]), 5)) : createCommentVNode("", true)
428
460
  ], 64);
429
461
  }), 128))
430
462
  ], 36),
@@ -460,7 +492,7 @@ const baseProps = {
460
492
  },
461
493
  threeDimensional: {
462
494
  type: Boolean,
463
- default: true
495
+ default: false
464
496
  },
465
497
  swipeDuration: {
466
498
  type: [Number, String],
@@ -477,6 +509,10 @@ const baseProps = {
477
509
  optionHeight: {
478
510
  type: [Number, String],
479
511
  default: 36
512
+ },
513
+ fieldNames: {
514
+ type: Object,
515
+ default: () => ({})
480
516
  }
481
517
  };
482
518
  const { create, translate } = createComponent("picker");
@@ -487,7 +523,10 @@ const _sfc_main = create({
487
523
  props: baseProps,
488
524
  emits: ["cancel", "change", "confirm", "update:modelValue"],
489
525
  setup(props, { emit }) {
490
- const { changeHandler, confirm, defaultValues, columnsList, columnsType, classes, cancel } = usePicker(props, emit);
526
+ const { changeHandler, confirm, defaultValues, columnsList, columnsType, columnFieldNames, cancel } = usePicker(
527
+ props,
528
+ emit
529
+ );
491
530
  const pickerColumn = ref([]);
492
531
  const swipeRef = (el) => {
493
532
  if (el && pickerColumn.value.length < columnsList.value.length) {
@@ -507,10 +546,10 @@ const _sfc_main = create({
507
546
  confirm();
508
547
  };
509
548
  return {
510
- classes,
511
549
  column,
512
550
  columnsType,
513
551
  columnsList,
552
+ columnFieldNames,
514
553
  cancel,
515
554
  changeHandler,
516
555
  confirmHandler,
@@ -522,25 +561,24 @@ const _sfc_main = create({
522
561
  };
523
562
  }
524
563
  });
525
- const _hoisted_1 = {
564
+ const _hoisted_1 = { class: "nut-picker" };
565
+ const _hoisted_2 = {
526
566
  key: 0,
527
567
  class: "nut-picker__bar"
528
568
  };
529
- const _hoisted_2 = { class: "nut-picker__title" };
569
+ const _hoisted_3 = { class: "nut-picker__title" };
530
570
  function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
531
571
  const _component_nut_picker_column = resolveComponent("nut-picker-column");
532
- return openBlock(), createElementBlock("div", {
533
- class: normalizeClass(_ctx.classes)
534
- }, [
535
- _ctx.showToolbar ? (openBlock(), createElementBlock("view", _hoisted_1, [
572
+ return openBlock(), createElementBlock("div", _hoisted_1, [
573
+ _ctx.showToolbar ? (openBlock(), createElementBlock("view", _hoisted_2, [
536
574
  createElementVNode("view", {
537
575
  class: "nut-picker__left",
538
576
  onClick: _cache[0] || (_cache[0] = (...args) => _ctx.cancel && _ctx.cancel(...args))
539
577
  }, toDisplayString(_ctx.cancelText || _ctx.translate("cancel")), 1),
540
- createElementVNode("view", _hoisted_2, toDisplayString(_ctx.title), 1),
578
+ createElementVNode("view", _hoisted_3, toDisplayString(_ctx.title), 1),
541
579
  createElementVNode("view", {
542
580
  class: "nut-picker__right",
543
- onClick: _cache[1] || (_cache[1] = ($event) => _ctx.confirmHandler())
581
+ onClick: _cache[1] || (_cache[1] = (...args) => _ctx.confirmHandler && _ctx.confirmHandler(...args))
544
582
  }, toDisplayString(_ctx.okText || _ctx.translate("confirm")), 1)
545
583
  ])) : createCommentVNode("", true),
546
584
  renderSlot(_ctx.$slots, "top"),
@@ -557,21 +595,22 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
557
595
  ref_for: true,
558
596
  ref: _ctx.swipeRef,
559
597
  column: column2,
560
- columnsType: _ctx.columnsType,
598
+ "columns-type": _ctx.columnsType,
599
+ "field-names": _ctx.columnFieldNames,
561
600
  value: _ctx.defaultValues && _ctx.defaultValues[columnIndex],
562
- threeDimensional: _ctx.threeDimensional,
563
- swipeDuration: _ctx.swipeDuration,
564
- visibleOptionNum: _ctx.visibleOptionNum,
565
- optionHeight: _ctx.optionHeight,
601
+ "three-dimensional": _ctx.threeDimensional,
602
+ "swipe-duration": _ctx.swipeDuration,
603
+ "visible-option-num": _ctx.visibleOptionNum,
604
+ "option-height": _ctx.optionHeight,
566
605
  onChange: (option) => {
567
606
  _ctx.changeHandler(columnIndex, option);
568
607
  }
569
- }, null, 8, ["column", "columnsType", "value", "threeDimensional", "swipeDuration", "visibleOptionNum", "optionHeight", "onChange"])
608
+ }, null, 8, ["column", "columns-type", "field-names", "value", "three-dimensional", "swipe-duration", "visible-option-num", "option-height", "onChange"])
570
609
  ]);
571
610
  }), 128))
572
611
  ], 4),
573
612
  renderSlot(_ctx.$slots, "default")
574
- ], 2);
613
+ ]);
575
614
  }
576
615
  const Picker = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
577
616
  export {
@@ -37,12 +37,14 @@
37
37
  font-size: $form-item-label-font-size;
38
38
  font-weight: normal;
39
39
  width: $form-item-label-width;
40
- min-width: auto;
41
40
  margin-right: $form-item-label-margin-right;
42
41
  flex: none !important;
43
42
  display: inline-block !important;
44
43
  word-wrap: break-word;
45
44
  text-align: $form-item-label-text-align;
45
+ &.nut-cell__title {
46
+ min-width: auto;
47
+ }
46
48
  &.required {
47
49
  &::before {
48
50
  content: '*';
@@ -2,7 +2,7 @@
2
2
  "$schema": "https://raw.githubusercontent.com/JetBrains/web-types/master/schema/web-types.json",
3
3
  "framework": "vue",
4
4
  "name": "NutUI",
5
- "version": "4.1.3",
5
+ "version": "4.1.4",
6
6
  "contributions": {
7
7
  "html": {
8
8
  "tags": [
@@ -3968,6 +3968,15 @@
3968
3968
  "kind": "expression"
3969
3969
  }
3970
3970
  },
3971
+ {
3972
+ "name": "field-names",
3973
+ "default": "`{ text: 'text', value: 'value', children: 'children' }`",
3974
+ "description": "自定义 columns 中的字段",
3975
+ "value": {
3976
+ "type": "object",
3977
+ "kind": "expression"
3978
+ }
3979
+ },
3971
3980
  {
3972
3981
  "name": "title",
3973
3982
  "default": "-",
@@ -3997,7 +4006,7 @@
3997
4006
  },
3998
4007
  {
3999
4008
  "name": "three-dimensional",
4000
- "default": "`true`",
4009
+ "default": "`false`",
4001
4010
  "description": "是否开启 3D 效果",
4002
4011
  "value": {
4003
4012
  "type": "boolean",