@nutui/nutui 3.1.22-beta.3 → 3.1.23-beta.0

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.
Files changed (207) hide show
  1. package/CHANGELOG.md +48 -0
  2. package/README.md +3 -4
  3. package/dist/nutui.es.js +20426 -4050
  4. package/dist/nutui.umd.js +20529 -4049
  5. package/dist/packages/_es/ActionSheet.js +149 -36
  6. package/dist/packages/_es/Address.js +535 -129
  7. package/dist/packages/_es/AddressList.js +615 -113
  8. package/dist/packages/_es/Animate.js +64 -0
  9. package/dist/packages/_es/Audio.js +257 -72
  10. package/dist/packages/_es/AudioOperate.js +100 -32
  11. package/dist/packages/_es/Avatar.js +162 -54
  12. package/dist/packages/_es/AvatarGroup.js +73 -14
  13. package/dist/packages/_es/BackTop.js +156 -43
  14. package/dist/packages/_es/Badge.js +86 -14
  15. package/dist/packages/_es/Barrage.js +120 -41
  16. package/dist/packages/_es/Button.js +128 -23
  17. package/dist/packages/_es/Calendar.js +246 -24
  18. package/dist/packages/_es/CalendarItem.js +2 -1
  19. package/dist/packages/_es/Card.js +107 -10
  20. package/dist/packages/_es/Cascader.js +496 -179
  21. package/dist/packages/_es/Category.js +58 -15
  22. package/dist/packages/_es/CategoryPane.js +111 -11
  23. package/dist/packages/_es/Cell.js +108 -21
  24. package/dist/packages/_es/CellGroup.js +44 -9
  25. package/dist/packages/_es/Checkbox.js +134 -29
  26. package/dist/packages/_es/CheckboxGroup.js +79 -29
  27. package/dist/packages/_es/CircleProgress.js +150 -28
  28. package/dist/packages/_es/Col.js +56 -14
  29. package/dist/packages/_es/Collapse.js +110 -24
  30. package/dist/packages/_es/CollapseItem.js +252 -80
  31. package/dist/packages/_es/Comment.js +434 -64
  32. package/dist/packages/_es/ConfigProvider.js +25 -0
  33. package/dist/packages/_es/CountDown.js +238 -75
  34. package/dist/packages/_es/CountUp.js +539 -159
  35. package/dist/packages/_es/DatePicker.js +315 -117
  36. package/dist/packages/_es/Dialog.js +289 -79
  37. package/dist/packages/_es/Divider.js +65 -32
  38. package/dist/packages/_es/Drag.js +197 -56
  39. package/dist/packages/_es/Ecard.js +159 -24
  40. package/dist/packages/_es/Elevator.js +255 -77
  41. package/dist/packages/_es/Ellipsis.js +206 -0
  42. package/dist/packages/_es/Empty.js +71 -12
  43. package/dist/packages/_es/FixedNav.js +122 -15
  44. package/dist/packages/_es/Form.js +151 -64
  45. package/dist/packages/_es/FormItem.js +114 -15
  46. package/dist/packages/_es/Grid.js +6 -5
  47. package/dist/packages/_es/GridItem.js +144 -33
  48. package/dist/packages/_es/Icon.js +40 -15
  49. package/dist/packages/_es/Image.js +142 -0
  50. package/dist/packages/_es/ImagePreview.js +547 -84
  51. package/dist/packages/_es/Indicator.js +62 -15
  52. package/dist/packages/_es/InfiniteLoading.js +249 -76
  53. package/dist/packages/_es/Input.js +433 -51
  54. package/dist/packages/_es/InputNumber.js +160 -41
  55. package/dist/packages/_es/Layout.js +5 -4
  56. package/dist/packages/_es/List.js +106 -37
  57. package/dist/packages/_es/Menu.js +168 -29
  58. package/dist/packages/_es/MenuItem.js +173 -34
  59. package/dist/packages/_es/Navbar.js +192 -30
  60. package/dist/packages/_es/NoticeBar.js +380 -93
  61. package/dist/packages/_es/Notify.js +227 -91
  62. package/dist/packages/_es/NumberKeyboard.js +272 -41
  63. package/dist/packages/_es/OldPicker.js +457 -149
  64. package/dist/packages/_es/OverLay.js +98 -40
  65. package/dist/packages/_es/Pagination.js +157 -39
  66. package/dist/packages/_es/Picker.js +460 -148
  67. package/dist/packages/_es/Popover.js +957 -337
  68. package/dist/packages/_es/Popup.js +299 -74
  69. package/dist/packages/_es/Price.js +118 -16
  70. package/dist/packages/_es/Progress.js +146 -14
  71. package/dist/packages/_es/PullRefresh.js +339 -100
  72. package/dist/packages/_es/Radio.js +90 -22
  73. package/dist/packages/_es/RadioGroup.js +37 -8
  74. package/dist/packages/_es/Range.js +408 -102
  75. package/dist/packages/_es/Rate.js +193 -16
  76. package/dist/packages/_es/Row.js +64 -22
  77. package/dist/packages/_es/SearchBar.js +238 -56
  78. package/dist/packages/_es/ShortPassword.js +225 -35
  79. package/dist/packages/_es/SideNavBar.js +81 -43
  80. package/dist/packages/_es/SideNavBarItem.js +46 -11
  81. package/dist/packages/_es/Signature.js +160 -60
  82. package/dist/packages/_es/Skeleton.js +136 -20
  83. package/dist/packages/_es/Sku.js +491 -103
  84. package/dist/packages/_es/Step.js +115 -39
  85. package/dist/packages/_es/Steps.js +53 -18
  86. package/dist/packages/_es/Sticky.js +138 -53
  87. package/dist/packages/_es/SubSideNavBar.js +82 -36
  88. package/dist/packages/_es/Swipe.js +178 -60
  89. package/dist/packages/_es/Swiper.js +433 -121
  90. package/dist/packages/_es/SwiperItem.js +53 -22
  91. package/dist/packages/_es/Switch.js +116 -21
  92. package/dist/packages/_es/TabPane.js +39 -12
  93. package/dist/packages/_es/Tabbar.js +72 -17
  94. package/dist/packages/_es/TabbarItem.js +151 -29
  95. package/dist/packages/_es/Table.js +178 -37
  96. package/dist/packages/_es/Tabs.js +202 -59
  97. package/dist/packages/_es/Tag.js +97 -20
  98. package/dist/packages/_es/TextArea.js +160 -42
  99. package/dist/packages/_es/TimeDetail.js +79 -37
  100. package/dist/packages/_es/TimePannel.js +48 -33
  101. package/dist/packages/_es/TimeSelect.js +112 -15
  102. package/dist/packages/_es/Toast.js +310 -90
  103. package/dist/packages/_es/Uploader.js +455 -120
  104. package/dist/packages/_es/Video.js +332 -93
  105. package/dist/packages/_es/common.js +128 -38
  106. package/dist/packages/_es/component.js +76 -35
  107. package/dist/packages/_es/index.js +6 -5
  108. package/dist/packages/_es/index2.js +30 -9
  109. package/dist/packages/_es/index3.js +8 -6
  110. package/dist/packages/_es/index4.js +64 -13
  111. package/dist/packages/_es/index5.js +783 -130
  112. package/dist/packages/_es/plugin-vue_export-helper.js +8 -7
  113. package/dist/packages/_es/pxCheck.js +5 -3
  114. package/dist/packages/_es/raf.js +15 -8
  115. package/dist/packages/animate/index.scss +299 -0
  116. package/dist/packages/cell/index.scss +7 -1
  117. package/dist/packages/checkbox/index.scss +10 -0
  118. package/dist/packages/configprovider/index.scss +2 -0
  119. package/dist/packages/ellipsis/index.scss +12 -0
  120. package/dist/packages/formitem/index.scss +12 -0
  121. package/dist/packages/griditem/index.scss +11 -0
  122. package/dist/packages/image/index.scss +39 -0
  123. package/dist/packages/imagepreview/index.scss +26 -2
  124. package/dist/packages/input/index.scss +13 -0
  125. package/dist/packages/inputnumber/index.scss +21 -0
  126. package/dist/packages/locale/lang/baseLang.js +3 -3
  127. package/dist/packages/locale/lang/en-US.js +105 -5
  128. package/dist/packages/locale/lang/id-ID.js +105 -5
  129. package/dist/packages/locale/lang/index.js +38 -16
  130. package/dist/packages/locale/lang/zh-CN.js +105 -5
  131. package/dist/packages/locale/lang/zh-TW.js +105 -5
  132. package/dist/packages/menu/index.scss +45 -36
  133. package/dist/packages/menuitem/index.scss +4 -0
  134. package/dist/packages/navbar/index.scss +9 -0
  135. package/dist/packages/pagination/index.scss +19 -0
  136. package/dist/packages/radio/index.scss +18 -0
  137. package/dist/packages/range/index.scss +19 -0
  138. package/dist/packages/rate/index.scss +1 -1
  139. package/dist/packages/searchbar/index.scss +21 -0
  140. package/dist/packages/switch/index.scss +1 -0
  141. package/dist/packages/tabbar/index.scss +5 -0
  142. package/dist/packages/tabbaritem/index.scss +7 -0
  143. package/dist/packages/tabpane/index.scss +5 -0
  144. package/dist/packages/tabs/index.scss +22 -0
  145. package/dist/packages/textarea/index.scss +8 -0
  146. package/dist/smartips/attributes.json +140 -4
  147. package/dist/smartips/tags.json +55 -6
  148. package/dist/smartips/web-types.json +6963 -0
  149. package/dist/style.css +1 -1
  150. package/dist/style.es.js +1 -1
  151. package/dist/styles/font/config.json +3 -1
  152. package/dist/styles/font/demo_index.html +49 -3
  153. package/dist/styles/font/iconfont.css +11 -3
  154. package/dist/styles/font/iconfont.js +15 -15
  155. package/dist/styles/font/iconfont.json +14 -0
  156. package/dist/styles/font/iconfont.ttf +0 -0
  157. package/dist/styles/font/iconfont.woff +0 -0
  158. package/dist/styles/font/iconfont.woff2 +0 -0
  159. package/dist/styles/themes/default.scss +54 -50
  160. package/dist/styles/themes/jdb.scss +54 -50
  161. package/dist/styles/themes/jdt.scss +54 -50
  162. package/dist/styles/variables-jdb.scss +12 -0
  163. package/dist/styles/variables-jdt.scss +12 -0
  164. package/dist/styles/variables.scss +12 -0
  165. package/dist/types/__VUE/actionsheet/index.vue.d.ts +3 -3
  166. package/dist/types/__VUE/address/index.vue.d.ts +7 -7
  167. package/dist/types/__VUE/animate/index.vue.d.ts +48 -0
  168. package/dist/types/__VUE/animate/type.d.ts +6 -0
  169. package/dist/types/__VUE/avatar/index.vue.d.ts +3 -3
  170. package/dist/types/__VUE/calendar/index.vue.d.ts +1 -1
  171. package/dist/types/__VUE/calendaritem/index.vue.d.ts +10 -2
  172. package/dist/types/__VUE/cascader/index.vue.d.ts +2 -2
  173. package/dist/types/__VUE/circleprogress/index.vue.d.ts +2 -2
  174. package/dist/types/__VUE/collapse/index.vue.d.ts +3 -1
  175. package/dist/types/__VUE/configprovider/common.d.ts +20 -0
  176. package/dist/types/__VUE/configprovider/index.vue.d.ts +33 -0
  177. package/dist/types/__VUE/datepicker/index.vue.d.ts +2 -2
  178. package/dist/types/__VUE/dialog/index.vue.d.ts +2 -2
  179. package/dist/types/__VUE/ellipsis/index.vue.d.ts +72 -0
  180. package/dist/types/__VUE/fixednav/index.vue.d.ts +2 -2
  181. package/dist/types/__VUE/grid/index.vue.d.ts +2 -2
  182. package/dist/types/__VUE/image/index.vue.d.ts +105 -0
  183. package/dist/types/__VUE/image/type.d.ts +6 -0
  184. package/dist/types/__VUE/imagepreview/imagePreviewItem.vue.d.ts +95 -0
  185. package/dist/types/__VUE/imagepreview/index.vue.d.ts +56 -24
  186. package/dist/types/__VUE/menu/index.vue.d.ts +31 -4
  187. package/dist/types/__VUE/menuitem/index.vue.d.ts +12 -3
  188. package/dist/types/__VUE/noticebar/index.vue.d.ts +1 -1
  189. package/dist/types/__VUE/numberkeyboard/index.vue.d.ts +2 -2
  190. package/dist/types/__VUE/oldpicker/index.vue.d.ts +4 -4
  191. package/dist/types/__VUE/picker/index.vue.d.ts +4 -4
  192. package/dist/types/__VUE/popover/index.vue.d.ts +8 -8
  193. package/dist/types/__VUE/popup/index.vue.d.ts +4 -4
  194. package/dist/types/__VUE/range/index.vue.d.ts +1 -1
  195. package/dist/types/__VUE/rate/common.d.ts +149 -0
  196. package/dist/types/__VUE/rate/index.vue.d.ts +17 -7
  197. package/dist/types/__VUE/row/index.vue.d.ts +2 -2
  198. package/dist/types/__VUE/shortpassword/index.vue.d.ts +2 -2
  199. package/dist/types/__VUE/sku/index.vue.d.ts +3 -3
  200. package/dist/types/__VUE/swipe/index.vue.d.ts +2 -2
  201. package/dist/types/__VUE/swiper/index.vue.d.ts +2 -2
  202. package/dist/types/__VUE/switch/index.vue.d.ts +2 -2
  203. package/dist/types/__VUE/timeselect/index.vue.d.ts +3 -2
  204. package/dist/types/__VUE/uploader/uploader.d.ts +1 -0
  205. package/dist/types/index.d.ts +1 -1
  206. package/dist/types/nutui.d.ts +5 -1
  207. package/package.json +5 -4
@@ -1,108 +1,414 @@
1
- var __defProp = Object.defineProperty;
2
- var __defProps = Object.defineProperties;
3
- var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
4
- var __getOwnPropSymbols = Object.getOwnPropertySymbols;
5
- var __hasOwnProp = Object.prototype.hasOwnProperty;
6
- var __propIsEnum = Object.prototype.propertyIsEnumerable;
7
- var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
8
- var __spreadValues = (a2, b2) => {
9
- for (var prop in b2 || (b2 = {}))
10
- if (__hasOwnProp.call(b2, prop))
11
- __defNormalProp(a2, prop, b2[prop]);
12
- if (__getOwnPropSymbols)
13
- for (var prop of __getOwnPropSymbols(b2)) {
14
- if (__propIsEnum.call(b2, prop))
15
- __defNormalProp(a2, prop, b2[prop]);
16
- }
17
- return a2;
18
- };
19
- var __spreadProps = (a2, b2) => __defProps(a2, __getOwnPropDescs(b2));
20
1
  /*!
21
- * @nutui/nutui v3.1.22-beta.3 Wed Jun 15 2022 20:12:30 GMT+0800 (中国标准时间)
2
+ * @nutui/nutui v3.1.23-beta.0 Mon Jun 27 2022 17:55:50 GMT+0800 (中国标准时间)
22
3
  * (c) 2022 @jdf2e.
23
4
  * Released under the MIT License.
24
5
  */
25
- import { ref as e, computed as a, toRefs as t, openBlock as n, createElementBlock as o, normalizeClass as r, toDisplayString as l, createCommentVNode as u, createElementVNode as i, normalizeStyle as s, withModifiers as c, Fragment as m, renderList as d, createTextVNode as v, renderSlot as p } from "vue";
26
- import { c as b } from "./component.js";
27
- import { u as g } from "./index4.js";
28
- import { u as h } from "./index2.js";
29
- import { _ as y } from "./plugin-vue_export-helper.js";
6
+ import { ref, computed, toRefs, openBlock, createElementBlock, normalizeClass, toDisplayString, createCommentVNode, createElementVNode, normalizeStyle, withModifiers, Fragment, renderList, createTextVNode, renderSlot } from "vue";
7
+ import { c as createComponent } from "./component.js";
8
+ import { u as useTouch } from "./index4.js";
9
+ import { u as useRect } from "./index2.js";
10
+ import { _ as _export_sfc } from "./plugin-vue_export-helper.js";
30
11
  import "../locale/lang";
31
- const { componentName: k, create: f } = b("range"), T = f({ props: { range: { type: Boolean, default: false }, disabled: Boolean, activeColor: String, inactiveColor: String, buttonColor: String, vertical: { type: Boolean, default: false }, marks: { type: Object, default: {} }, hiddenRange: { type: Boolean, default: false }, hiddenTag: { type: Boolean, default: false }, min: { type: [Number, String], default: 0 }, max: { type: [Number, String], default: 100 }, step: { type: [Number, String], default: 1 }, modelValue: { type: [Number, Array], default: 0 } }, emits: ["change", "drag-end", "drag-start", "update:modelValue"], setup(n2, { emit: o2, slots: r2 }) {
32
- const l2 = e(0);
33
- let u2, i2;
34
- const s2 = e(), c2 = e(), m2 = g(), d2 = a(() => {
35
- const { marks: e2, max: a2, min: t2 } = n2;
36
- return Object.keys(e2).map(parseFloat).sort((e3, a3) => e3 - a3).filter((e3) => e3 >= t2 && e3 <= a2);
37
- }), v2 = a(() => Number(n2.max) - Number(n2.min)), p2 = a(() => {
38
- const e2 = k;
39
- return { [e2]: true, [`${e2}-disabled`]: n2.disabled, [`${e2}-vertical`]: n2.vertical, [`${e2}-show-number`]: !n2.hiddenRange };
40
- }), b2 = a(() => {
41
- const e2 = "nut-range-container";
42
- return { [e2]: true, [`${e2}-vertical`]: n2.vertical };
43
- }), y2 = a(() => ({ background: n2.inactiveColor })), f2 = a(() => ({ borderColor: n2.buttonColor })), T2 = (e2) => !!n2.range && Array.isArray(e2), x2 = () => {
44
- const { modelValue: e2, min: a2 } = n2;
45
- return T2(e2) ? 100 * (e2[1] - e2[0]) / v2.value + "%" : 100 * (e2 - Number(a2)) / v2.value + "%";
46
- }, w2 = () => {
47
- const { modelValue: e2, min: a2 } = n2;
48
- return T2(e2) ? 100 * (e2[0] - Number(a2)) / v2.value + "%" : "0%";
49
- }, S2 = a(() => n2.vertical ? { height: x2(), top: w2(), background: n2.activeColor, transition: c2.value ? "none" : void 0 } : { width: x2(), left: w2(), background: n2.activeColor, transition: c2.value ? "none" : void 0 }), C2 = (e2) => {
50
- const { min: a2, max: t2, step: o3 } = n2;
51
- return e2 = Math.max(+a2, Math.min(e2, +t2)), Math.round(e2 / +o3) * +o3;
52
- }, N2 = (e2, a2) => JSON.stringify(e2) === JSON.stringify(a2), V2 = (e2, a2) => {
53
- e2 = T2(e2) ? ((e3) => e3[0] > e3[1] ? e3.slice(0).reverse() : e3)(e2).map(C2) : C2(e2), N2(e2, n2.modelValue) || o2("update:modelValue", e2), a2 && !N2(e2, u2) && o2("change", e2);
54
- };
55
- return __spreadProps(__spreadValues({ root: s2, classes: p2, wrapperStyle: y2, buttonStyle: f2, onClick: (e2) => {
56
- if (n2.disabled)
57
- return;
58
- const { min: a2, modelValue: t2 } = n2, o3 = h(s2);
59
- let r3 = e2.clientX - o3.left, l3 = o3.width;
60
- n2.vertical && (r3 = e2.clientY - o3.top, l3 = o3.height);
61
- const u3 = Number(a2) + r3 / l3 * v2.value;
62
- if (T2(t2)) {
63
- const [e3, a3] = t2;
64
- V2(u3 <= (e3 + a3) / 2 ? [u3, a3] : [e3, u3], true);
65
- } else
66
- V2(u3, true);
67
- }, onTouchStart: (e2) => {
68
- n2.disabled || (m2.start(e2), i2 = n2.modelValue, u2 = T2(i2) ? i2.map(C2) : C2(i2), c2.value = "start");
69
- }, onTouchMove: (e2) => {
70
- if (n2.disabled)
71
- return;
72
- c2.value === "start" && o2("drag-start"), m2.move(e2), c2.value = "draging";
73
- const a2 = h(s2);
74
- let t2 = m2.deltaX.value, r3 = a2.width, d3 = t2 / r3 * v2.value;
75
- n2.vertical && (t2 = m2.deltaY.value, r3 = a2.height, d3 = t2 / r3 * v2.value), T2(u2) ? i2[l2.value] = u2[l2.value] + d3 : i2 = u2 + d3, V2(i2), e2.stopPropagation(), e2.preventDefault();
76
- }, onTouchEnd: () => {
77
- n2.disabled || (c2.value === "draging" && (V2(i2, true), o2("drag-end")), c2.value = "");
78
- } }, t(n2)), { barStyle: S2, curValue: (e2) => typeof e2 == "number" ? n2.modelValue[e2] : n2.modelValue, buttonIndex: l2, containerClasses: b2, markClassName: (e2) => {
79
- const { modelValue: a2, max: t2, min: o3 } = n2;
80
- let r3 = Number(o3), l3 = Number(t2);
81
- if (n2.range) {
82
- const [e3, t3] = a2;
83
- r3 = e3, l3 = t3;
84
- } else
85
- l3 = a2;
86
- return { "nut-range-mark-text": true, "nut-range-mark-text-active": e2 <= l3 && e2 >= r3 };
87
- }, marksStyle: (e2) => {
88
- const { max: a2, min: t2, vertical: o3 } = n2;
89
- let r3 = { left: (e2 - Number(t2)) / v2.value * 100 + "%" };
90
- return o3 && (r3 = { top: (e2 - Number(t2)) / v2.value * 100 + "%" }), r3;
91
- }, marksList: d2, tickStyle: (e2) => {
92
- const { modelValue: a2, max: t2, min: o3 } = n2;
93
- let r3 = Number(o3), l3 = Number(t2);
94
- if (n2.range) {
95
- const [e3, t3] = a2;
96
- r3 = e3, l3 = t3;
12
+ const { componentName, create } = createComponent("range");
13
+ const _sfc_main = create({
14
+ props: {
15
+ range: {
16
+ type: Boolean,
17
+ default: false
18
+ },
19
+ disabled: Boolean,
20
+ activeColor: String,
21
+ inactiveColor: String,
22
+ buttonColor: String,
23
+ vertical: {
24
+ type: Boolean,
25
+ default: false
26
+ },
27
+ marks: {
28
+ type: Object,
29
+ default: {}
30
+ },
31
+ hiddenRange: {
32
+ type: Boolean,
33
+ default: false
34
+ },
35
+ hiddenTag: {
36
+ type: Boolean,
37
+ default: false
38
+ },
39
+ min: {
40
+ type: [Number, String],
41
+ default: 0
42
+ },
43
+ max: {
44
+ type: [Number, String],
45
+ default: 100
46
+ },
47
+ step: {
48
+ type: [Number, String],
49
+ default: 1
50
+ },
51
+ modelValue: {
52
+ type: [Number, Array],
53
+ default: 0
97
54
  }
98
- return { background: e2 <= l3 && e2 >= r3 ? n2.activeColor : n2.inactiveColor };
99
- } });
100
- } }), x = { key: 0, class: "min" }, w = { key: 0, class: "nut-range-mark" }, S = ["tabindex", "aria-valuemin", "aria-valuenow", "aria-valuemax", "onTouchstart"], C = { key: 0, class: "number" }, N = ["tabindex", "aria-valuemin", "aria-valuenow", "aria-valuemax"], V = { key: 0, class: "number" }, E = { key: 1, class: "max" };
101
- var M = y(T, [["render", function(e2, a2, t2, b2, g2, h2) {
102
- return n(), o("view", { class: r(e2.containerClasses) }, [e2.hiddenRange ? u("", true) : (n(), o("view", x, l(+e2.min), 1)), i("view", { ref: "root", style: s(e2.wrapperStyle), class: r(e2.classes), onClick: a2[9] || (a2[9] = c((...a3) => e2.onClick && e2.onClick(...a3), ["stop"])) }, [e2.marksList.length > 0 ? (n(), o("view", w, [(n(true), o(m, null, d(e2.marksList, (a3) => (n(), o("span", { key: a3, class: r(e2.markClassName(a3)), style: s(e2.marksStyle(a3)) }, [v(l(a3) + " ", 1), i("span", { class: "nut-range-tick", style: s(e2.tickStyle(a3)) }, null, 4)], 6))), 128))])) : u("", true), i("view", { class: "nut-range-bar", style: s(e2.barStyle) }, [e2.range ? (n(), o(m, { key: 0 }, d([0, 1], (t3) => i("view", { key: t3, role: "slider", class: r({ "nut-range-button-wrapper-left": t3 == 0, "nut-range-button-wrapper-right": t3 == 1 }), tabindex: e2.disabled ? -1 : 0, "aria-valuemin": +e2.min, "aria-valuenow": e2.curValue(t3), "aria-valuemax": +e2.max, "aria-orientation": "horizontal", onTouchstart: c((a3) => {
103
- typeof t3 == "number" && (e2.buttonIndex = t3), e2.onTouchStart(a3);
104
- }, ["stop", "prevent"]), onTouchmove: a2[0] || (a2[0] = c((...a3) => e2.onTouchMove && e2.onTouchMove(...a3), ["stop", "prevent"])), onTouchend: a2[1] || (a2[1] = c((...a3) => e2.onTouchEnd && e2.onTouchEnd(...a3), ["stop", "prevent"])), onTouchcancel: a2[2] || (a2[2] = c((...a3) => e2.onTouchEnd && e2.onTouchEnd(...a3), ["stop", "prevent"])), onClick: a2[3] || (a2[3] = (e3) => e3.stopPropagation()) }, [e2.$slots.button ? p(e2.$slots, "button", { key: 0 }) : (n(), o("view", { key: 1, class: "nut-range-button", style: s(e2.buttonStyle) }, [e2.hiddenTag ? u("", true) : (n(), o("view", C, l(e2.curValue(t3)), 1))], 4))], 42, S)), 64)) : (n(), o("view", { key: 1, role: "slider", class: "nut-range-button-wrapper", tabindex: e2.disabled ? -1 : 0, "aria-valuemin": +e2.min, "aria-valuenow": e2.curValue(), "aria-valuemax": +e2.max, "aria-orientation": "horizontal", onTouchstart: a2[4] || (a2[4] = c((a3) => {
105
- e2.onTouchStart(a3);
106
- }, ["stop", "prevent"])), onTouchmove: a2[5] || (a2[5] = c((...a3) => e2.onTouchMove && e2.onTouchMove(...a3), ["stop", "prevent"])), onTouchend: a2[6] || (a2[6] = c((...a3) => e2.onTouchEnd && e2.onTouchEnd(...a3), ["stop", "prevent"])), onTouchcancel: a2[7] || (a2[7] = c((...a3) => e2.onTouchEnd && e2.onTouchEnd(...a3), ["stop", "prevent"])), onClick: a2[8] || (a2[8] = (e3) => e3.stopPropagation()) }, [e2.$slots.button ? p(e2.$slots, "button", { key: 0 }) : (n(), o("view", { key: 1, class: "nut-range-button", style: s(e2.buttonStyle) }, [e2.hiddenTag ? u("", true) : (n(), o("view", V, l(e2.curValue()), 1))], 4))], 40, N))], 4)], 6), e2.hiddenRange ? u("", true) : (n(), o("view", E, l(+e2.max), 1))], 2);
107
- }]]);
108
- export { M as default };
55
+ },
56
+ emits: ["change", "drag-end", "drag-start", "update:modelValue"],
57
+ setup(props, { emit, slots }) {
58
+ const buttonIndex = ref(0);
59
+ let startValue;
60
+ let currentValue;
61
+ const root = ref();
62
+ const dragStatus = ref();
63
+ const touch = useTouch();
64
+ const marksList = computed(() => {
65
+ const { marks, max, min } = props;
66
+ const marksKeys = Object.keys(marks);
67
+ const list = marksKeys.map(parseFloat).sort((a, b) => a - b).filter((point) => point >= min && point <= max);
68
+ return list;
69
+ });
70
+ const scope = computed(() => Number(props.max) - Number(props.min));
71
+ const classes = computed(() => {
72
+ const prefixCls = componentName;
73
+ return {
74
+ [prefixCls]: true,
75
+ [`${prefixCls}-disabled`]: props.disabled,
76
+ [`${prefixCls}-vertical`]: props.vertical,
77
+ [`${prefixCls}-show-number`]: !props.hiddenRange
78
+ };
79
+ });
80
+ const containerClasses = computed(() => {
81
+ const prefixCls = "nut-range-container";
82
+ return {
83
+ [prefixCls]: true,
84
+ [`${prefixCls}-vertical`]: props.vertical
85
+ };
86
+ });
87
+ const wrapperStyle = computed(() => {
88
+ return {
89
+ background: props.inactiveColor
90
+ };
91
+ });
92
+ const buttonStyle = computed(() => {
93
+ return {
94
+ borderColor: props.buttonColor
95
+ };
96
+ });
97
+ const isRange = (val) => !!props.range && Array.isArray(val);
98
+ const calcMainAxis = () => {
99
+ const { modelValue, min } = props;
100
+ if (isRange(modelValue)) {
101
+ return `${(modelValue[1] - modelValue[0]) * 100 / scope.value}%`;
102
+ }
103
+ return `${(modelValue - Number(min)) * 100 / scope.value}%`;
104
+ };
105
+ const calcOffset = () => {
106
+ const { modelValue, min } = props;
107
+ if (isRange(modelValue)) {
108
+ return `${(modelValue[0] - Number(min)) * 100 / scope.value}%`;
109
+ }
110
+ return `0%`;
111
+ };
112
+ const barStyle = computed(() => {
113
+ if (props.vertical) {
114
+ return {
115
+ height: calcMainAxis(),
116
+ top: calcOffset(),
117
+ background: props.activeColor,
118
+ transition: dragStatus.value ? "none" : void 0
119
+ };
120
+ } else {
121
+ return {
122
+ width: calcMainAxis(),
123
+ left: calcOffset(),
124
+ background: props.activeColor,
125
+ transition: dragStatus.value ? "none" : void 0
126
+ };
127
+ }
128
+ });
129
+ const markClassName = (mark) => {
130
+ const classPrefix = "nut-range-mark";
131
+ const { modelValue, max, min } = props;
132
+ let lowerBound = Number(min);
133
+ let upperBound = Number(max);
134
+ if (props.range) {
135
+ const [left, right] = modelValue;
136
+ lowerBound = left;
137
+ upperBound = right;
138
+ } else {
139
+ upperBound = modelValue;
140
+ }
141
+ let isActive = mark <= upperBound && mark >= lowerBound;
142
+ return {
143
+ [`${classPrefix}-text`]: true,
144
+ [`${classPrefix}-text-active`]: isActive
145
+ };
146
+ };
147
+ const marksStyle = (mark) => {
148
+ const { max, min, vertical } = props;
149
+ let style = {
150
+ left: `${(mark - Number(min)) / scope.value * 100}%`
151
+ };
152
+ if (vertical) {
153
+ style = {
154
+ top: `${(mark - Number(min)) / scope.value * 100}%`
155
+ };
156
+ }
157
+ return style;
158
+ };
159
+ const tickStyle = (mark) => {
160
+ const { modelValue, max, min } = props;
161
+ let lowerBound = Number(min);
162
+ let upperBound = Number(max);
163
+ if (props.range) {
164
+ const [left, right] = modelValue;
165
+ lowerBound = left;
166
+ upperBound = right;
167
+ }
168
+ let isActive = mark <= upperBound && mark >= lowerBound;
169
+ let style = {
170
+ background: !isActive ? props.inactiveColor : props.activeColor
171
+ };
172
+ return style;
173
+ };
174
+ const format = (value) => {
175
+ const { min, max, step } = props;
176
+ value = Math.max(+min, Math.min(value, +max));
177
+ return Math.round(value / +step) * +step;
178
+ };
179
+ const isSameValue = (newValue, oldValue) => JSON.stringify(newValue) === JSON.stringify(oldValue);
180
+ const handleOverlap = (value) => {
181
+ if (value[0] > value[1]) {
182
+ return value.slice(0).reverse();
183
+ }
184
+ return value;
185
+ };
186
+ const updateValue = (value, end) => {
187
+ if (isRange(value)) {
188
+ value = handleOverlap(value).map(format);
189
+ } else {
190
+ value = format(value);
191
+ }
192
+ if (!isSameValue(value, props.modelValue)) {
193
+ emit("update:modelValue", value);
194
+ }
195
+ if (end && !isSameValue(value, startValue)) {
196
+ emit("change", value);
197
+ }
198
+ };
199
+ const onClick = (event) => {
200
+ if (props.disabled) {
201
+ return;
202
+ }
203
+ const { min, modelValue } = props;
204
+ const rect = useRect(root);
205
+ let delta = event.clientX - rect.left;
206
+ let total = rect.width;
207
+ if (props.vertical) {
208
+ delta = event.clientY - rect.top;
209
+ total = rect.height;
210
+ }
211
+ const value = Number(min) + delta / total * scope.value;
212
+ if (isRange(modelValue)) {
213
+ const [left, right] = modelValue;
214
+ const middle = (left + right) / 2;
215
+ if (value <= middle) {
216
+ updateValue([value, right], true);
217
+ } else {
218
+ updateValue([left, value], true);
219
+ }
220
+ } else {
221
+ updateValue(value, true);
222
+ }
223
+ };
224
+ const onTouchStart = (event) => {
225
+ if (props.disabled) {
226
+ return;
227
+ }
228
+ touch.start(event);
229
+ currentValue = props.modelValue;
230
+ if (isRange(currentValue)) {
231
+ startValue = currentValue.map(format);
232
+ } else {
233
+ startValue = format(currentValue);
234
+ }
235
+ dragStatus.value = "start";
236
+ };
237
+ const onTouchMove = (event) => {
238
+ if (props.disabled) {
239
+ return;
240
+ }
241
+ if (dragStatus.value === "start") {
242
+ emit("drag-start");
243
+ }
244
+ touch.move(event);
245
+ dragStatus.value = "draging";
246
+ const rect = useRect(root);
247
+ let delta = touch.deltaX.value;
248
+ let total = rect.width;
249
+ let diff = delta / total * scope.value;
250
+ if (props.vertical) {
251
+ delta = touch.deltaY.value;
252
+ total = rect.height;
253
+ diff = delta / total * scope.value;
254
+ }
255
+ if (isRange(startValue)) {
256
+ currentValue[buttonIndex.value] = startValue[buttonIndex.value] + diff;
257
+ } else {
258
+ currentValue = startValue + diff;
259
+ }
260
+ updateValue(currentValue);
261
+ event.stopPropagation();
262
+ event.preventDefault();
263
+ };
264
+ const onTouchEnd = () => {
265
+ if (props.disabled) {
266
+ return;
267
+ }
268
+ if (dragStatus.value === "draging") {
269
+ updateValue(currentValue, true);
270
+ emit("drag-end");
271
+ }
272
+ dragStatus.value = "";
273
+ };
274
+ const curValue = (idx) => {
275
+ const value = typeof idx === "number" ? props.modelValue[idx] : props.modelValue;
276
+ return value;
277
+ };
278
+ return {
279
+ root,
280
+ classes,
281
+ wrapperStyle,
282
+ buttonStyle,
283
+ onClick,
284
+ onTouchStart,
285
+ onTouchMove,
286
+ onTouchEnd,
287
+ ...toRefs(props),
288
+ barStyle,
289
+ curValue,
290
+ buttonIndex,
291
+ containerClasses,
292
+ markClassName,
293
+ marksStyle,
294
+ marksList,
295
+ tickStyle
296
+ };
297
+ }
298
+ });
299
+ const _hoisted_1 = {
300
+ key: 0,
301
+ class: "min"
302
+ };
303
+ const _hoisted_2 = {
304
+ key: 0,
305
+ class: "nut-range-mark"
306
+ };
307
+ const _hoisted_3 = ["tabindex", "aria-valuemin", "aria-valuenow", "aria-valuemax", "onTouchstart"];
308
+ const _hoisted_4 = {
309
+ key: 0,
310
+ class: "number"
311
+ };
312
+ const _hoisted_5 = ["tabindex", "aria-valuemin", "aria-valuenow", "aria-valuemax"];
313
+ const _hoisted_6 = {
314
+ key: 0,
315
+ class: "number"
316
+ };
317
+ const _hoisted_7 = {
318
+ key: 1,
319
+ class: "max"
320
+ };
321
+ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
322
+ return openBlock(), createElementBlock("view", {
323
+ class: normalizeClass(_ctx.containerClasses)
324
+ }, [
325
+ !_ctx.hiddenRange ? (openBlock(), createElementBlock("view", _hoisted_1, toDisplayString(+_ctx.min), 1)) : createCommentVNode("", true),
326
+ createElementVNode("view", {
327
+ ref: "root",
328
+ style: normalizeStyle(_ctx.wrapperStyle),
329
+ class: normalizeClass(_ctx.classes),
330
+ onClick: _cache[9] || (_cache[9] = withModifiers((...args) => _ctx.onClick && _ctx.onClick(...args), ["stop"]))
331
+ }, [
332
+ _ctx.marksList.length > 0 ? (openBlock(), createElementBlock("view", _hoisted_2, [
333
+ (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.marksList, (marks) => {
334
+ return openBlock(), createElementBlock("span", {
335
+ key: marks,
336
+ class: normalizeClass(_ctx.markClassName(marks)),
337
+ style: normalizeStyle(_ctx.marksStyle(marks))
338
+ }, [
339
+ createTextVNode(toDisplayString(marks) + " ", 1),
340
+ createElementVNode("span", {
341
+ class: "nut-range-tick",
342
+ style: normalizeStyle(_ctx.tickStyle(marks))
343
+ }, null, 4)
344
+ ], 6);
345
+ }), 128))
346
+ ])) : createCommentVNode("", true),
347
+ createElementVNode("view", {
348
+ class: "nut-range-bar",
349
+ style: normalizeStyle(_ctx.barStyle)
350
+ }, [
351
+ _ctx.range ? (openBlock(), createElementBlock(Fragment, { key: 0 }, renderList([0, 1], (index2) => {
352
+ return createElementVNode("view", {
353
+ key: index2,
354
+ role: "slider",
355
+ class: normalizeClass({
356
+ "nut-range-button-wrapper-left": index2 == 0,
357
+ "nut-range-button-wrapper-right": index2 == 1
358
+ }),
359
+ tabindex: _ctx.disabled ? -1 : 0,
360
+ "aria-valuemin": +_ctx.min,
361
+ "aria-valuenow": _ctx.curValue(index2),
362
+ "aria-valuemax": +_ctx.max,
363
+ "aria-orientation": "horizontal",
364
+ onTouchstart: withModifiers((e) => {
365
+ if (typeof index2 === "number") {
366
+ _ctx.buttonIndex = index2;
367
+ }
368
+ _ctx.onTouchStart(e);
369
+ }, ["stop", "prevent"]),
370
+ onTouchmove: _cache[0] || (_cache[0] = withModifiers((...args) => _ctx.onTouchMove && _ctx.onTouchMove(...args), ["stop", "prevent"])),
371
+ onTouchend: _cache[1] || (_cache[1] = withModifiers((...args) => _ctx.onTouchEnd && _ctx.onTouchEnd(...args), ["stop", "prevent"])),
372
+ onTouchcancel: _cache[2] || (_cache[2] = withModifiers((...args) => _ctx.onTouchEnd && _ctx.onTouchEnd(...args), ["stop", "prevent"])),
373
+ onClick: _cache[3] || (_cache[3] = (e) => e.stopPropagation())
374
+ }, [
375
+ _ctx.$slots.button ? renderSlot(_ctx.$slots, "button", { key: 0 }) : (openBlock(), createElementBlock("view", {
376
+ key: 1,
377
+ class: "nut-range-button",
378
+ style: normalizeStyle(_ctx.buttonStyle)
379
+ }, [
380
+ !_ctx.hiddenTag ? (openBlock(), createElementBlock("view", _hoisted_4, toDisplayString(_ctx.curValue(index2)), 1)) : createCommentVNode("", true)
381
+ ], 4))
382
+ ], 42, _hoisted_3);
383
+ }), 64)) : (openBlock(), createElementBlock("view", {
384
+ key: 1,
385
+ role: "slider",
386
+ class: "nut-range-button-wrapper",
387
+ tabindex: _ctx.disabled ? -1 : 0,
388
+ "aria-valuemin": +_ctx.min,
389
+ "aria-valuenow": _ctx.curValue(),
390
+ "aria-valuemax": +_ctx.max,
391
+ "aria-orientation": "horizontal",
392
+ onTouchstart: _cache[4] || (_cache[4] = withModifiers((e) => {
393
+ _ctx.onTouchStart(e);
394
+ }, ["stop", "prevent"])),
395
+ onTouchmove: _cache[5] || (_cache[5] = withModifiers((...args) => _ctx.onTouchMove && _ctx.onTouchMove(...args), ["stop", "prevent"])),
396
+ onTouchend: _cache[6] || (_cache[6] = withModifiers((...args) => _ctx.onTouchEnd && _ctx.onTouchEnd(...args), ["stop", "prevent"])),
397
+ onTouchcancel: _cache[7] || (_cache[7] = withModifiers((...args) => _ctx.onTouchEnd && _ctx.onTouchEnd(...args), ["stop", "prevent"])),
398
+ onClick: _cache[8] || (_cache[8] = (e) => e.stopPropagation())
399
+ }, [
400
+ _ctx.$slots.button ? renderSlot(_ctx.$slots, "button", { key: 0 }) : (openBlock(), createElementBlock("view", {
401
+ key: 1,
402
+ class: "nut-range-button",
403
+ style: normalizeStyle(_ctx.buttonStyle)
404
+ }, [
405
+ !_ctx.hiddenTag ? (openBlock(), createElementBlock("view", _hoisted_6, toDisplayString(_ctx.curValue()), 1)) : createCommentVNode("", true)
406
+ ], 4))
407
+ ], 40, _hoisted_5))
408
+ ], 4)
409
+ ], 6),
410
+ !_ctx.hiddenRange ? (openBlock(), createElementBlock("view", _hoisted_7, toDisplayString(+_ctx.max), 1)) : createCommentVNode("", true)
411
+ ], 2);
412
+ }
413
+ var index = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
414
+ export { index as default };