@nutui/nutui 4.0.10-beta.1 → 4.0.11

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 (160) hide show
  1. package/CHANGELOG.md +23 -0
  2. package/dist/nutui.es.js +1 -1
  3. package/dist/nutui.js +6316 -7237
  4. package/dist/nutui.umd.js +1 -1
  5. package/dist/packages/_es/ActionSheet.js +78 -111
  6. package/dist/packages/_es/Address.js +250 -375
  7. package/dist/packages/_es/AddressList.js +269 -354
  8. package/dist/packages/_es/Animate.js +41 -58
  9. package/dist/packages/_es/Audio.js +128 -197
  10. package/dist/packages/_es/AudioOperate.js +60 -71
  11. package/dist/packages/_es/Avatar.js +66 -89
  12. package/dist/packages/_es/AvatarGroup.js +23 -31
  13. package/dist/packages/_es/Backtop.js +59 -99
  14. package/dist/packages/_es/Badge.js +36 -47
  15. package/dist/packages/_es/Barrage.js +68 -147
  16. package/dist/packages/_es/Button.js +47 -66
  17. package/dist/packages/_es/Calendar.js +135 -157
  18. package/dist/packages/_es/CalendarItem.js +6 -6
  19. package/dist/packages/_es/Card.js +42 -56
  20. package/dist/packages/_es/Cascader.js +315 -474
  21. package/dist/packages/_es/Category.js +29 -39
  22. package/dist/packages/_es/CategoryPane.js +57 -83
  23. package/dist/packages/_es/Cell.js +56 -71
  24. package/dist/packages/_es/CellGroup.js +19 -27
  25. package/dist/packages/_es/Checkbox.js +109 -156
  26. package/dist/packages/_es/CheckboxGroup.js +38 -59
  27. package/dist/packages/_es/CircleProgress.js +67 -96
  28. package/dist/packages/_es/Col.js +23 -31
  29. package/dist/packages/_es/Collapse.js +33 -58
  30. package/dist/packages/_es/CollapseItem.js +78 -108
  31. package/dist/packages/_es/Comment.js +207 -279
  32. package/dist/packages/_es/ConfigProvider.js +37 -55
  33. package/dist/packages/_es/Countdown.js +100 -212
  34. package/dist/packages/_es/Countup.js +232 -445
  35. package/dist/packages/_es/DatePicker.js +162 -265
  36. package/dist/packages/_es/Dialog.js +161 -213
  37. package/dist/packages/_es/Divider.js +42 -57
  38. package/dist/packages/_es/Drag.js +70 -153
  39. package/dist/packages/_es/Ecard.js +64 -104
  40. package/dist/packages/_es/Elevator.js +143 -219
  41. package/dist/packages/_es/Ellipsis.js +95 -178
  42. package/dist/packages/_es/Empty.js +23 -39
  43. package/dist/packages/_es/FixedNav.js +93 -116
  44. package/dist/packages/_es/Form.js +107 -178
  45. package/dist/packages/_es/FormItem.js +48 -61
  46. package/dist/packages/_es/Grid.js +5 -6
  47. package/dist/packages/_es/GridItem.js +58 -84
  48. package/dist/packages/_es/Image.js +90 -129
  49. package/dist/packages/_es/ImagePreview.js +256 -412
  50. package/dist/packages/_es/Indicator.js +30 -34
  51. package/dist/packages/_es/InfiniteLoading.js +83 -136
  52. package/dist/packages/_es/Input.js +160 -264
  53. package/dist/packages/_es/InputNumber.js +81 -117
  54. package/dist/packages/_es/Interceptor-6e26b757.js +18 -0
  55. package/dist/packages/_es/Invoice.js +104 -130
  56. package/dist/packages/_es/Layout.js +3 -4
  57. package/dist/packages/_es/List.js +117 -215
  58. package/dist/packages/_es/Menu.js +95 -150
  59. package/dist/packages/_es/MenuItem.js +109 -154
  60. package/dist/packages/_es/Navbar.js +103 -119
  61. package/dist/packages/_es/Noticebar.js +197 -312
  62. package/dist/packages/_es/Notify.js +110 -166
  63. package/dist/packages/_es/NumberKeyboard.js +127 -202
  64. package/dist/packages/_es/Overlay.js +52 -80
  65. package/dist/packages/_es/Pagination.js +70 -100
  66. package/dist/packages/_es/Picker.js +275 -437
  67. package/dist/packages/_es/Popover.js +122 -225
  68. package/dist/packages/_es/Popup.js +4 -4
  69. package/dist/packages/_es/Price.js +44 -82
  70. package/dist/packages/_es/Progress.js +63 -79
  71. package/dist/packages/_es/PullRefresh.js +95 -173
  72. package/dist/packages/_es/Radio.js +4 -4
  73. package/dist/packages/_es/RadioGroup.js +3 -3
  74. package/dist/packages/_es/Range.js +204 -347
  75. package/dist/packages/_es/Rate.js +92 -141
  76. package/dist/packages/_es/Row.js +21 -27
  77. package/dist/packages/_es/Searchbar.js +123 -174
  78. package/dist/packages/_es/ShortPassword.js +69 -93
  79. package/dist/packages/_es/SideNavbar.js +49 -80
  80. package/dist/packages/_es/SideNavbarItem.js +22 -32
  81. package/dist/packages/_es/Signature.js +83 -146
  82. package/dist/packages/_es/Skeleton.js +110 -130
  83. package/dist/packages/_es/Sku.js +250 -343
  84. package/dist/packages/_es/Step.js +59 -86
  85. package/dist/packages/_es/Steps.js +26 -31
  86. package/dist/packages/_es/Sticky.js +4 -4
  87. package/dist/packages/_es/SubSideNavbar.js +52 -74
  88. package/dist/packages/_es/Swipe.js +83 -155
  89. package/dist/packages/_es/Swiper.js +174 -311
  90. package/dist/packages/_es/SwiperItem.js +28 -44
  91. package/dist/packages/_es/Switch.js +55 -68
  92. package/dist/packages/_es/TabPane.js +30 -41
  93. package/dist/packages/_es/Tabbar.js +41 -52
  94. package/dist/packages/_es/TabbarItem.js +61 -82
  95. package/dist/packages/_es/Table.js +109 -165
  96. package/dist/packages/_es/Tabs.js +240 -388
  97. package/dist/packages/_es/Tag.js +44 -61
  98. package/dist/packages/_es/Textarea.js +80 -124
  99. package/dist/packages/_es/TimeDetail.js +49 -76
  100. package/dist/packages/_es/TimePannel.js +34 -48
  101. package/dist/packages/_es/TimeSelect.js +47 -68
  102. package/dist/packages/_es/Toast.js +144 -218
  103. package/dist/packages/_es/Tour.js +138 -192
  104. package/dist/packages/_es/TrendArrow.js +57 -77
  105. package/dist/packages/_es/Uploader.js +234 -359
  106. package/dist/packages/_es/Video.js +191 -316
  107. package/dist/packages/_es/Watermark.js +84 -117
  108. package/dist/packages/_es/_plugin-vue_export-helper-dad06003.js +9 -0
  109. package/dist/packages/_es/common-d218746f.js +116 -0
  110. package/dist/packages/_es/component-234624bc.js +89 -0
  111. package/dist/packages/_es/index-14dfadc4.js +561 -0
  112. package/dist/packages/_es/index-192a3ef6.js +29 -0
  113. package/dist/packages/_es/index-360c5092.js +210 -0
  114. package/dist/packages/_es/index-496e6e05.js +24 -0
  115. package/dist/packages/_es/index-50eed3d9.js +7 -0
  116. package/dist/packages/_es/index-53ec2d4d.js +34 -0
  117. package/dist/packages/_es/index-fadb0974.js +8 -0
  118. package/dist/packages/_es/index.vue_vue_type_script_lang-1139b29a.js +43 -0
  119. package/dist/packages/_es/index.vue_vue_type_script_lang-43b774dd.js +77 -0
  120. package/dist/packages/_es/index.vue_vue_type_script_lang-f44c159d.js +110 -0
  121. package/dist/packages/_es/mountComponent-6d4ff200.js +23 -0
  122. package/dist/packages/_es/pxCheck-38173291.js +4 -0
  123. package/dist/packages/_es/raf-a74f1a06.js +16 -0
  124. package/dist/packages/_es/renderIcon-47498b32.js +5 -0
  125. package/dist/smartips/web-types.json +1 -1
  126. package/dist/style.css +1 -1
  127. package/dist/styles/themes/default.scss +148 -45
  128. package/dist/styles/themes/jdb.scss +148 -45
  129. package/dist/styles/themes/jddkh.scss +148 -45
  130. package/dist/styles/themes/jdt.scss +148 -45
  131. package/dist/types/__VUE/address/index.vue.d.ts +1 -1
  132. package/dist/types/__VUE/collapseitem/index.vue.d.ts +110 -3
  133. package/dist/types/__VUE/image/index.vue.d.ts +2 -2
  134. package/dist/types/__VUE/rate/index.vue.d.ts +110 -3
  135. package/dist/types/__VUE/searchbar/index.vue.d.ts +110 -3
  136. package/dist/types/__VUE/skeleton/index.vue.d.ts +2 -2
  137. package/dist/types/__VUE/swiper/index.vue.d.ts +1 -1
  138. package/dist/types/__VUE/table/common.d.ts +55 -2
  139. package/dist/types/__VUE/timeselect/index.vue.d.ts +1 -1
  140. package/dist/types/__VUE/watermark/index.vue.d.ts +1 -1
  141. package/dist/types/index.d.ts +1 -1
  142. package/package.json +2 -2
  143. package/dist/packages/_es/Interceptor-956b24fc.js +0 -29
  144. package/dist/packages/_es/_plugin-vue_export-helper-cc2b3d55.js +0 -10
  145. package/dist/packages/_es/common-b9a5e726.js +0 -145
  146. package/dist/packages/_es/component-81a4c1d0.js +0 -145
  147. package/dist/packages/_es/index-29892cda.js +0 -33
  148. package/dist/packages/_es/index-43c34ac6.js +0 -30
  149. package/dist/packages/_es/index-54d03fc1.js +0 -8
  150. package/dist/packages/_es/index-79c5dc33.js +0 -10
  151. package/dist/packages/_es/index-7a7385e4.js +0 -67
  152. package/dist/packages/_es/index-87422be8.js +0 -942
  153. package/dist/packages/_es/index-da0a7662.js +0 -259
  154. package/dist/packages/_es/index.vue_vue_type_script_lang-22dfc112.js +0 -46
  155. package/dist/packages/_es/index.vue_vue_type_script_lang-442e4704.js +0 -98
  156. package/dist/packages/_es/index.vue_vue_type_script_lang-cc5c4086.js +0 -151
  157. package/dist/packages/_es/mountComponent-8b24c346.js +0 -39
  158. package/dist/packages/_es/pxCheck-c6b9f6b7.js +0 -6
  159. package/dist/packages/_es/raf-729dad54.js +0 -25
  160. package/dist/packages/_es/renderIcon-3d0fd47c.js +0 -9
@@ -1,259 +0,0 @@
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 = (a, b) => {
9
- for (var prop in b || (b = {}))
10
- if (__hasOwnProp.call(b, prop))
11
- __defNormalProp(a, prop, b[prop]);
12
- if (__getOwnPropSymbols)
13
- for (var prop of __getOwnPropSymbols(b)) {
14
- if (__propIsEnum.call(b, prop))
15
- __defNormalProp(a, prop, b[prop]);
16
- }
17
- return a;
18
- };
19
- var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
20
- import { c as createComponent } from "./component-81a4c1d0.js";
21
- import { reactive, computed, watch, watchEffect, toRefs, resolveComponent, openBlock, createBlock, Teleport, mergeProps, createCommentVNode, createVNode, Transition, withCtx, withDirectives, createElementVNode, normalizeClass, normalizeStyle, renderSlot, createElementBlock, vShow } from "vue";
22
- import Overlay from "./Overlay.js";
23
- import { Close } from "@nutui/icons-vue";
24
- import { _ as _export_sfc } from "./_plugin-vue_export-helper-cc2b3d55.js";
25
- const popupProps = {
26
- visible: {
27
- type: Boolean,
28
- default: false
29
- },
30
- zIndex: {
31
- type: [Number, String],
32
- default: 2e3
33
- },
34
- duration: {
35
- type: [Number, String],
36
- default: 0.3
37
- },
38
- lockScroll: {
39
- type: Boolean,
40
- default: true
41
- },
42
- closeOnClickOverlay: {
43
- type: Boolean,
44
- default: true
45
- },
46
- position: {
47
- type: String,
48
- default: "center"
49
- },
50
- transition: {
51
- type: String,
52
- default: ""
53
- },
54
- style: {
55
- type: Object,
56
- default: {}
57
- },
58
- popClass: {
59
- type: String,
60
- default: ""
61
- },
62
- closeable: {
63
- type: Boolean,
64
- default: false
65
- },
66
- closeIconPosition: {
67
- type: String,
68
- default: "top-right"
69
- },
70
- closeIcon: {
71
- type: String,
72
- default: "close"
73
- },
74
- destroyOnClose: {
75
- type: Boolean,
76
- default: true
77
- },
78
- teleport: {
79
- type: [String, Element],
80
- default: "body"
81
- },
82
- overlay: {
83
- type: Boolean,
84
- default: true
85
- },
86
- round: {
87
- type: Boolean,
88
- default: false
89
- },
90
- teleportDisable: {
91
- type: Boolean,
92
- default: false
93
- },
94
- safeAreaInsetBottom: {
95
- type: Boolean,
96
- default: false
97
- },
98
- overlayClass: {
99
- type: String,
100
- default: ""
101
- },
102
- overlayStyle: {
103
- type: Object,
104
- default: {}
105
- }
106
- };
107
- const initIndex = 2e3;
108
- let _zIndex = initIndex;
109
- const component = (componentName2, components) => {
110
- return {
111
- components,
112
- props: __spreadValues({}, popupProps),
113
- emits: ["click-pop", "click-close-icon", "open", "close", "opend", "closed", "click-overlay", "update:visible"],
114
- setup(props, { emit }) {
115
- const state = reactive({
116
- zIndex: props.zIndex,
117
- showSlot: true,
118
- closed: props.closeable
119
- });
120
- const classes = computed(() => {
121
- const prefixCls = componentName2;
122
- return {
123
- [prefixCls]: true,
124
- ["round"]: props.round,
125
- [`nut-popup--${props.position}`]: true,
126
- [`nut-popup--${props.position}--safebottom`]: props.position === "bottom" && props.safeAreaInsetBottom,
127
- [props.popClass]: true
128
- };
129
- });
130
- const popStyle = computed(() => {
131
- return __spreadValues({
132
- zIndex: state.zIndex,
133
- transitionDuration: `${props.duration}s`
134
- }, props.style);
135
- });
136
- const transitionName = computed(() => {
137
- return props.transition ? props.transition : `nut-popup-slide-${props.position}`;
138
- });
139
- const open = () => {
140
- if (props.zIndex !== initIndex) {
141
- _zIndex = Number(props.zIndex);
142
- }
143
- emit("update:visible", true);
144
- state.zIndex = ++_zIndex;
145
- if (props.destroyOnClose) {
146
- state.showSlot = true;
147
- }
148
- emit("open");
149
- };
150
- const close = () => {
151
- emit("update:visible", false);
152
- emit("close");
153
- if (props.destroyOnClose) {
154
- setTimeout(() => {
155
- state.showSlot = false;
156
- }, +props.duration * 1e3);
157
- }
158
- };
159
- const onClick = (e) => {
160
- emit("click-pop", e);
161
- };
162
- const onClickCloseIcon = (e) => {
163
- e.stopPropagation();
164
- emit("click-close-icon", e);
165
- emit("update:visible", false);
166
- };
167
- const onClickOverlay = (e) => {
168
- emit("click-overlay", e);
169
- if (props.closeOnClickOverlay) {
170
- emit("update:visible", false);
171
- }
172
- };
173
- const onOpened = (e) => {
174
- emit("opend", e);
175
- };
176
- const onClosed = (e) => {
177
- emit("closed", e);
178
- };
179
- watch(
180
- () => props.visible,
181
- (val) => {
182
- props.visible ? open() : close();
183
- }
184
- );
185
- watchEffect(() => {
186
- state.closed = props.closeable;
187
- });
188
- return __spreadProps(__spreadValues({}, toRefs(state)), {
189
- popStyle,
190
- transitionName,
191
- classes,
192
- onClick,
193
- onClickCloseIcon,
194
- onClickOverlay,
195
- onOpened,
196
- onClosed
197
- });
198
- }
199
- };
200
- };
201
- const { componentName, create } = createComponent("popup");
202
- const _sfc_main = create(
203
- component(componentName, {
204
- [Overlay.name]: Overlay,
205
- Close
206
- })
207
- );
208
- function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
209
- const _component_nut_overlay = resolveComponent("nut-overlay");
210
- const _component_Close = resolveComponent("Close");
211
- return openBlock(), createBlock(Teleport, {
212
- to: _ctx.teleport,
213
- disabled: !_ctx.teleportDisable
214
- }, [
215
- _ctx.overlay ? (openBlock(), createBlock(_component_nut_overlay, mergeProps({
216
- key: 0,
217
- visible: _ctx.visible,
218
- "close-on-click-overlay": _ctx.closeOnClickOverlay,
219
- "z-index": _ctx.zIndex,
220
- "lock-scroll": _ctx.lockScroll,
221
- duration: _ctx.duration,
222
- "overlay-class": _ctx.overlayClass,
223
- "overlay-style": _ctx.overlayStyle,
224
- onClick: _ctx.onClickOverlay
225
- }, _ctx.$attrs), null, 16, ["visible", "close-on-click-overlay", "z-index", "lock-scroll", "duration", "overlay-class", "overlay-style", "onClick"])) : createCommentVNode("", true),
226
- createVNode(Transition, {
227
- name: _ctx.transitionName,
228
- onAfterEnter: _ctx.onOpened,
229
- onAfterLeave: _ctx.onClosed
230
- }, {
231
- default: withCtx(() => [
232
- withDirectives(createElementVNode("view", {
233
- class: normalizeClass(_ctx.classes),
234
- style: normalizeStyle(_ctx.popStyle),
235
- onClick: _cache[1] || (_cache[1] = (...args) => _ctx.onClick && _ctx.onClick(...args))
236
- }, [
237
- _ctx.showSlot ? renderSlot(_ctx.$slots, "default", { key: 0 }) : createCommentVNode("", true),
238
- _ctx.closed ? (openBlock(), createElementBlock("view", {
239
- key: 1,
240
- onClick: _cache[0] || (_cache[0] = (...args) => _ctx.onClickCloseIcon && _ctx.onClickCloseIcon(...args)),
241
- class: normalizeClass(["nut-popup__close-icon", "nut-popup__close-icon--" + _ctx.closeIconPosition])
242
- }, [
243
- renderSlot(_ctx.$slots, "close-icon", {}, () => [
244
- createVNode(_component_Close, { height: "12px" })
245
- ])
246
- ], 2)) : createCommentVNode("", true)
247
- ], 6), [
248
- [vShow, _ctx.visible]
249
- ])
250
- ]),
251
- _: 3
252
- }, 8, ["name", "onAfterEnter", "onAfterLeave"])
253
- ], 8, ["to", "disabled"]);
254
- }
255
- const Popup = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
256
- export {
257
- Popup as P,
258
- popupProps as p
259
- };
@@ -1,46 +0,0 @@
1
- import { provide, readonly, computed, watch, h } from "vue";
2
- import { c as createComponent } from "./component-81a4c1d0.js";
3
- const { componentName, create } = createComponent("radio-group");
4
- const _sfc_main = create({
5
- props: {
6
- modelValue: {
7
- type: [Number, String, Boolean],
8
- default: ""
9
- },
10
- direction: {
11
- type: String,
12
- default: "vertical"
13
- //horizontal
14
- },
15
- textPosition: {
16
- type: String,
17
- default: "right"
18
- }
19
- },
20
- emits: ["change", "update:modelValue"],
21
- setup(props, { emit, slots }) {
22
- const updateValue = (value) => emit("update:modelValue", value);
23
- provide("parent", {
24
- label: readonly(computed(() => props.modelValue)),
25
- position: props.textPosition,
26
- updateValue
27
- });
28
- watch(
29
- () => props.modelValue,
30
- (value) => emit("change", value)
31
- );
32
- return () => {
33
- var _a;
34
- return h(
35
- "view",
36
- {
37
- class: `${componentName} ${componentName}--${props.direction}`
38
- },
39
- (_a = slots.default) == null ? void 0 : _a.call(slots)
40
- );
41
- };
42
- }
43
- });
44
- export {
45
- _sfc_main as _
46
- };
@@ -1,98 +0,0 @@
1
- import { inject, computed, h } from "vue";
2
- import { c as createComponent } from "./component-81a4c1d0.js";
3
- import { CheckNormal, CheckChecked } from "@nutui/icons-vue";
4
- import { p as pxCheck } from "./pxCheck-c6b9f6b7.js";
5
- const { componentName, create } = createComponent("radio");
6
- const _sfc_main = create({
7
- components: {
8
- CheckNormal,
9
- CheckChecked
10
- },
11
- props: {
12
- disabled: {
13
- type: Boolean,
14
- default: false
15
- },
16
- shape: {
17
- type: String,
18
- default: "round"
19
- // button
20
- },
21
- label: {
22
- type: [String, Number, Boolean],
23
- default: ""
24
- },
25
- iconSize: {
26
- type: [String, Number],
27
- default: ""
28
- }
29
- },
30
- setup(props, { emit, slots }) {
31
- let parent = inject("parent", null);
32
- const isCurValue = computed(() => {
33
- return parent.label.value === props.label;
34
- });
35
- const color = computed(() => {
36
- return !props.disabled ? isCurValue.value ? "nut-radio__icon" : "nut-radio__icon--unchecked" : "nut-radio__icon--disable";
37
- });
38
- const position = computed(() => {
39
- return parent.position;
40
- });
41
- const renderIcon = () => {
42
- const { iconSize } = props;
43
- const iconNodeMap = {
44
- CheckNormal: slots.icon ? slots.icon : CheckNormal,
45
- Checked: slots.checkedIcon ? slots.checkedIcon : CheckChecked
46
- };
47
- const iconNode = !isCurValue.value ? iconNodeMap.CheckNormal : iconNodeMap.Checked;
48
- const size = pxCheck(iconSize);
49
- return h(iconNode, {
50
- width: size,
51
- height: size,
52
- size,
53
- class: color.value
54
- });
55
- };
56
- const renderLabel = () => {
57
- var _a;
58
- return h(
59
- "view",
60
- {
61
- class: `${componentName}__label ${props.disabled ? `${componentName}__label--disabled` : ""}`
62
- },
63
- (_a = slots.default) == null ? void 0 : _a.call(slots)
64
- );
65
- };
66
- const renderButton = () => {
67
- var _a;
68
- return h(
69
- "view",
70
- {
71
- class: `${componentName}__button ${isCurValue.value && `${componentName}__button--active`} ${props.disabled ? `${componentName}__button--disabled` : ""}`
72
- },
73
- (_a = slots.default) == null ? void 0 : _a.call(slots)
74
- );
75
- };
76
- const handleClick = () => {
77
- if (isCurValue.value || props.disabled)
78
- return;
79
- parent.updateValue(props.label);
80
- };
81
- let reverseState = position.value === "left";
82
- return () => {
83
- return h(
84
- "view",
85
- {
86
- class: `${componentName} ${componentName}--${props.shape} ${reverseState ? `${componentName}--reverse` : ""}`,
87
- onClick: handleClick
88
- },
89
- [
90
- props.shape == "button" ? renderButton() : reverseState ? [renderLabel(), renderIcon()] : [renderIcon(), renderLabel()]
91
- ]
92
- );
93
- };
94
- }
95
- });
96
- export {
97
- _sfc_main as _
98
- };
@@ -1,151 +0,0 @@
1
- import { ref, reactive, computed, watch, onMounted, onUnmounted, h, unref } from "vue";
2
- import { c as createComponent } from "./component-81a4c1d0.js";
3
- import { u as useRect } from "./index-29892cda.js";
4
- const { componentName, create } = createComponent("sticky");
5
- const _sfc_main = create({
6
- props: {
7
- position: {
8
- type: String,
9
- default: "top"
10
- },
11
- top: {
12
- type: [Number, String],
13
- default: 0
14
- },
15
- bottom: {
16
- type: [Number, String],
17
- default: 0
18
- },
19
- container: {
20
- type: Object
21
- },
22
- zIndex: {
23
- type: [Number, String],
24
- default: 2e3
25
- }
26
- },
27
- emits: ["change", "scroll"],
28
- setup(props, { emit, slots }) {
29
- const root = ref();
30
- const state = reactive({
31
- width: 0,
32
- height: 0,
33
- fixed: false,
34
- transform: 0
35
- });
36
- const rootStyle = computed(() => {
37
- const { fixed, width, height } = state;
38
- if (fixed) {
39
- return {
40
- width: `${width}px`,
41
- height: `${height}px`
42
- };
43
- }
44
- });
45
- const stickyStyle = computed(() => {
46
- if (!state.fixed)
47
- return;
48
- const style = {
49
- width: `${state.width}px`,
50
- height: `${state.height}px`,
51
- [props.position]: `${offset.value}px`,
52
- zIndex: +props.zIndex
53
- };
54
- if (state.transform)
55
- style.transform = `translate3d(0, ${state.transform}px, 0)`;
56
- return style;
57
- });
58
- const offset = computed(() => {
59
- return props.position === "top" ? props.top : props.bottom;
60
- });
61
- const isHidden = (elementRef) => {
62
- const el = unref(elementRef);
63
- if (!el)
64
- return false;
65
- const style = window.getComputedStyle(el);
66
- const hidden = style.display === "none";
67
- const parentHidden = el.offsetParent === null && style.position !== "fixed";
68
- return hidden || parentHidden;
69
- };
70
- const isExistRoot = () => {
71
- if (!root.value || isHidden(root))
72
- return false;
73
- return true;
74
- };
75
- const getScrollTop = (el) => {
76
- return Math.max(0, "scrollTop" in el ? el.scrollTop : el.pageYOffset);
77
- };
78
- const renderFixed = () => {
79
- var _a;
80
- return h(
81
- "view",
82
- {
83
- style: stickyStyle.value,
84
- class: state.fixed ? `${componentName} nut-sticky--fixed` : componentName
85
- },
86
- (_a = slots.default) == null ? void 0 : _a.call(slots)
87
- );
88
- };
89
- const onScroll = () => {
90
- if (!isExistRoot())
91
- return;
92
- const { container, position } = props;
93
- const scrollTop = getScrollTop(window);
94
- const rootRect = useRect(root);
95
- if (rootRect.width || rootRect.height) {
96
- state.width = rootRect.width;
97
- state.height = rootRect.height;
98
- }
99
- if (position === "top") {
100
- if (container) {
101
- const containerRect = useRect(container);
102
- const diff = containerRect.bottom - +offset.value - state.height;
103
- state.fixed = +offset.value > rootRect.top && containerRect.bottom > 0;
104
- state.transform = diff < 0 ? diff : 0;
105
- } else {
106
- state.fixed = offset.value > rootRect.top;
107
- }
108
- } else if (position === "bottom") {
109
- const clientHeight = document.documentElement.clientHeight;
110
- if (container) {
111
- const containerRect = useRect(container);
112
- const diff = clientHeight - containerRect.top - +offset.value - state.height;
113
- state.fixed = clientHeight - +offset.value < rootRect.bottom && clientHeight > containerRect.top;
114
- state.transform = diff < 0 ? -diff : 0;
115
- } else {
116
- state.fixed = clientHeight - +offset.value < rootRect.bottom;
117
- }
118
- }
119
- emit("scroll", {
120
- top: scrollTop,
121
- fixed: state.fixed
122
- });
123
- };
124
- watch(
125
- () => state.fixed,
126
- (val) => {
127
- emit("change", val);
128
- }
129
- );
130
- onMounted(() => {
131
- window.addEventListener("scroll", onScroll);
132
- onScroll();
133
- });
134
- onUnmounted(() => {
135
- window.removeEventListener("scroll", onScroll);
136
- });
137
- return () => {
138
- return h(
139
- "view",
140
- {
141
- style: rootStyle.value,
142
- ref: root
143
- },
144
- [renderFixed()]
145
- );
146
- };
147
- }
148
- });
149
- export {
150
- _sfc_main as _
151
- };
@@ -1,39 +0,0 @@
1
- import { createApp } from "vue";
2
- import { j as isString, k as isFunction } from "./component-81a4c1d0.js";
3
- const CreateComponent = (options, component) => {
4
- let elWrap = document.body;
5
- const teleport = options.teleport || "body";
6
- if (teleport != "body") {
7
- if (isString(teleport)) {
8
- elWrap = document.querySelector(teleport);
9
- } else {
10
- elWrap = options.teleport;
11
- }
12
- }
13
- const root = document.createElement("view");
14
- const name = component.name ? component.name + "-" : "";
15
- const id1 = options.id || (/* @__PURE__ */ new Date()).getTime();
16
- root.id = name + id1;
17
- let Wrapper = {};
18
- if (isFunction(component.wrapper)) {
19
- Wrapper = component.wrapper(elWrap, root);
20
- } else {
21
- Wrapper = component.wrapper;
22
- }
23
- const instance = createApp(Wrapper, options);
24
- const componens = component.components;
25
- componens && componens.forEach((comp) => {
26
- instance.use(comp);
27
- });
28
- elWrap.appendChild(root);
29
- return {
30
- instance: instance.mount(root),
31
- unmount: () => {
32
- instance.unmount();
33
- elWrap.removeChild(root);
34
- }
35
- };
36
- };
37
- export {
38
- CreateComponent as C
39
- };
@@ -1,6 +0,0 @@
1
- const pxCheck = (value) => {
2
- return isNaN(Number(value)) ? String(value) : `${value}px`;
3
- };
4
- export {
5
- pxCheck as p
6
- };
@@ -1,25 +0,0 @@
1
- const _window = window;
2
- const inBrowser = typeof window !== "undefined";
3
- function requestAniFrame() {
4
- if (typeof _window !== "undefined") {
5
- return _window.requestAnimationFrame || _window.webkitRequestAnimationFrame || function(callback) {
6
- _window.setTimeout(callback, 1e3 / 60);
7
- };
8
- } else {
9
- return function(callback) {
10
- setTimeout(callback, 1e3 / 60);
11
- };
12
- }
13
- }
14
- function cancelRaf(id) {
15
- if (inBrowser) {
16
- cancelAnimationFrame(id);
17
- } else {
18
- clearTimeout(id);
19
- }
20
- }
21
- const requestAniFrame$1 = requestAniFrame();
22
- export {
23
- cancelRaf as c,
24
- requestAniFrame$1 as r
25
- };
@@ -1,9 +0,0 @@
1
- import { h } from "vue";
2
- const renderIcon = (icon, props) => {
3
- if (icon)
4
- return h(icon, props);
5
- return "";
6
- };
7
- export {
8
- renderIcon as r
9
- };