@nutui/nutui 4.0.7 → 4.0.8
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.
- package/CHANGELOG.md +15 -0
- package/dist/nutui.es.js +1 -1
- package/dist/nutui.umd.js +2 -2
- package/dist/packages/_es/Checkbox.js +4 -4
- package/dist/packages/_es/CheckboxGroup.js +15 -30
- package/dist/packages/_es/Collapse.js +28 -38
- package/dist/packages/_es/CollapseItem.js +52 -115
- package/dist/packages/_es/Image.js +37 -7
- package/dist/packages/actionsheet/index.scss +2 -0
- package/dist/packages/actionsheet/style.mjs +0 -2
- package/dist/packages/address/index.scss +3 -0
- package/dist/packages/address/style.mjs +0 -3
- package/dist/packages/addresslist/index.scss +3 -0
- package/dist/packages/addresslist/style.mjs +0 -2
- package/dist/packages/audio/index.scss +2 -0
- package/dist/packages/audio/style.mjs +0 -1
- package/dist/packages/audiooperate/index.scss +2 -0
- package/dist/packages/audiooperate/style.mjs +0 -1
- package/dist/packages/calendar/index.scss +3 -0
- package/dist/packages/calendar/style.mjs +0 -3
- package/dist/packages/card/index.scss +3 -0
- package/dist/packages/card/style.mjs +0 -2
- package/dist/packages/cascader/index.scss +4 -0
- package/dist/packages/cascader/style.mjs +0 -5
- package/dist/packages/comment/index.scss +2 -0
- package/dist/packages/comment/style.mjs +0 -1
- package/dist/packages/datepicker/index.scss +1 -2
- package/dist/packages/datepicker/style.mjs +0 -3
- package/dist/packages/dialog/index.scss +3 -0
- package/dist/packages/dialog/style.mjs +0 -3
- package/dist/packages/ecard/index.scss +2 -0
- package/dist/packages/ecard/style.mjs +0 -1
- package/dist/packages/fixednav/index.scss +2 -0
- package/dist/packages/fixednav/style.mjs +0 -1
- package/dist/packages/form/index.scss +1 -2
- package/dist/packages/form/style.mjs +0 -1
- package/dist/packages/formitem/index.scss +2 -0
- package/dist/packages/formitem/style.mjs +0 -1
- package/dist/packages/imagepreview/index.scss +5 -0
- package/dist/packages/imagepreview/style.mjs +0 -5
- package/dist/packages/invoice/index.scss +6 -0
- package/dist/packages/invoice/style.mjs +0 -7
- package/dist/packages/menuitem/index.scss +2 -0
- package/dist/packages/menuitem/style.mjs +0 -2
- package/dist/packages/notify/index.scss +2 -0
- package/dist/packages/notify/style.mjs +0 -2
- package/dist/packages/numberkeyboard/index.scss +2 -0
- package/dist/packages/numberkeyboard/style.mjs +0 -2
- package/dist/packages/picker/style.mjs +0 -2
- package/dist/packages/popover/index.scss +2 -0
- package/dist/packages/popover/style.mjs +0 -2
- package/dist/packages/popup/index.scss +2 -0
- package/dist/packages/popup/style.mjs +0 -1
- package/dist/packages/shortpassword/index.scss +2 -0
- package/dist/packages/shortpassword/style.mjs +0 -2
- package/dist/packages/signature/index.scss +2 -0
- package/dist/packages/signature/style.mjs +0 -1
- package/dist/packages/skeleton/index.scss +2 -0
- package/dist/packages/skeleton/style.mjs +0 -1
- package/dist/packages/sku/index.scss +4 -0
- package/dist/packages/sku/style.mjs +0 -4
- package/dist/packages/tabbaritem/index.scss +2 -0
- package/dist/packages/tabbaritem/style.mjs +0 -1
- package/dist/packages/tabs/index.scss +2 -0
- package/dist/packages/tabs/style.mjs +0 -1
- package/dist/packages/timeselect/index.scss +2 -0
- package/dist/packages/timeselect/style.mjs +0 -2
- package/dist/packages/tour/index.scss +2 -0
- package/dist/packages/tour/style.mjs +0 -3
- package/dist/packages/uploader/index.scss +3 -0
- package/dist/packages/uploader/style.mjs +0 -2
- package/dist/smartips/web-types.json +10 -1
- package/dist/style.css +1 -1
- package/dist/styles/themes/default.scss +54 -54
- package/dist/styles/themes/jdb.scss +54 -54
- package/dist/styles/themes/jddkh.scss +54 -54
- package/dist/styles/themes/jdt.scss +54 -54
- package/dist/types/__VUE/collapse/index.vue.d.ts +29 -3
- package/dist/types/__VUE/collapseitem/index.vue.d.ts +7 -8
- package/dist/types/__VUE/image/index.vue.d.ts +11 -0
- package/dist/types/index.d.ts +1 -1
- package/package.json +1 -1
|
@@ -56,7 +56,7 @@ const component = (componentName2, components) => {
|
|
|
56
56
|
});
|
|
57
57
|
const checked = computed(() => !!props.modelValue);
|
|
58
58
|
const color = computed(() => {
|
|
59
|
-
return !pDisabled.value ?
|
|
59
|
+
return !pDisabled.value ? state.partialSelect ? "nut-checkbox__icon--indeterminate" : !pValue.value ? "nut-checkbox__icon--unchecked" : "nut-checkbox__icon" : "nut-checkbox__icon--disable";
|
|
60
60
|
});
|
|
61
61
|
let updateType = "";
|
|
62
62
|
const emitChange = (value, label) => {
|
|
@@ -81,7 +81,7 @@ const component = (componentName2, components) => {
|
|
|
81
81
|
Checked: slots.checkedIcon ? slots.checkedIcon : components.Checked,
|
|
82
82
|
CheckDisabled: slots.indeterminate ? slots.indeterminate : components.CheckDisabled
|
|
83
83
|
};
|
|
84
|
-
const iconNode =
|
|
84
|
+
const iconNode = state.partialSelect ? iconNodeMap.CheckDisabled : !pValue.value ? iconNodeMap.CheckNormal : iconNodeMap.Checked;
|
|
85
85
|
const size = pxCheck(iconSize);
|
|
86
86
|
return h(iconNode, {
|
|
87
87
|
width: size,
|
|
@@ -134,10 +134,10 @@ const component = (componentName2, components) => {
|
|
|
134
134
|
}
|
|
135
135
|
};
|
|
136
136
|
onMounted(() => {
|
|
137
|
-
hasParent.value && parent
|
|
137
|
+
hasParent.value && parent.link(getCurrentInstance());
|
|
138
138
|
});
|
|
139
139
|
onBeforeUnmount(() => {
|
|
140
|
-
hasParent.value && parent
|
|
140
|
+
hasParent.value && parent.unlink(getCurrentInstance());
|
|
141
141
|
});
|
|
142
142
|
watch(
|
|
143
143
|
() => props.indeterminate,
|
|
@@ -23,31 +23,19 @@ const _sfc_main = create({
|
|
|
23
23
|
const state = reactive({
|
|
24
24
|
children: []
|
|
25
25
|
});
|
|
26
|
-
const
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
} else {
|
|
32
|
-
let key_1 = state.children.indexOf(child.proxy);
|
|
33
|
-
if (key_1 > -1) {
|
|
34
|
-
state.children.splice(key_1, 1);
|
|
35
|
-
}
|
|
36
|
-
let key_2 = props.modelValue.indexOf((_a = child.proxy) == null ? void 0 : _a.label);
|
|
37
|
-
if (key_2 > -1) {
|
|
38
|
-
const value = props.modelValue.filter((_, index) => index !== key_2);
|
|
39
|
-
emit("update:modelValue", value);
|
|
40
|
-
}
|
|
41
|
-
}
|
|
42
|
-
}
|
|
26
|
+
const link = (child) => {
|
|
27
|
+
child.proxy && state.children.push(child.proxy);
|
|
28
|
+
};
|
|
29
|
+
const unlink = (child) => {
|
|
30
|
+
child.proxy && (state.children = state.children.filter((p) => p !== child.proxy));
|
|
43
31
|
};
|
|
44
32
|
const updateValue = (value) => {
|
|
45
33
|
emit("update:modelValue", value);
|
|
46
34
|
emit("change", value);
|
|
47
35
|
};
|
|
48
36
|
const toggleAll = (checked) => {
|
|
49
|
-
|
|
50
|
-
if (
|
|
37
|
+
const values = [];
|
|
38
|
+
if (checked) {
|
|
51
39
|
state.children.forEach((item) => {
|
|
52
40
|
if (!(item == null ? void 0 : item.disabled)) {
|
|
53
41
|
values.push(item == null ? void 0 : item.label);
|
|
@@ -57,25 +45,22 @@ const _sfc_main = create({
|
|
|
57
45
|
emit("update:modelValue", values);
|
|
58
46
|
};
|
|
59
47
|
const toggleReverse = () => {
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
if (findIndex > -1) {
|
|
64
|
-
values.splice(findIndex, 1);
|
|
48
|
+
const value = state.children.filter((item) => {
|
|
49
|
+
if (item == null ? void 0 : item.disabled) {
|
|
50
|
+
return false;
|
|
65
51
|
} else {
|
|
66
|
-
|
|
67
|
-
values.push(item == null ? void 0 : item.label);
|
|
68
|
-
}
|
|
52
|
+
return !props.modelValue.includes(item.label);
|
|
69
53
|
}
|
|
70
|
-
});
|
|
71
|
-
emit("update:modelValue",
|
|
54
|
+
}).map((item) => item.label);
|
|
55
|
+
emit("update:modelValue", value);
|
|
72
56
|
};
|
|
73
57
|
provide("parent", {
|
|
74
58
|
value: computed(() => props.modelValue),
|
|
75
59
|
disabled: computed(() => props.disabled),
|
|
76
60
|
max: computed(() => props.max),
|
|
77
61
|
updateValue,
|
|
78
|
-
|
|
62
|
+
link,
|
|
63
|
+
unlink
|
|
79
64
|
});
|
|
80
65
|
watch(
|
|
81
66
|
() => props.modelValue,
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { ref, computed,
|
|
1
|
+
import { ref, computed, provide, openBlock, createElementBlock, normalizeClass, renderSlot } from "vue";
|
|
2
2
|
import { c as createComponent } from "./component-81a4c1d0.js";
|
|
3
3
|
import { _ as _export_sfc } from "./_plugin-vue_export-helper-cc2b3d55.js";
|
|
4
4
|
import "../locale/lang";
|
|
@@ -17,57 +17,47 @@ const _sfc_main = create({
|
|
|
17
17
|
emits: ["update:modelValue", "change"],
|
|
18
18
|
setup(props, { emit }) {
|
|
19
19
|
const collapseDom = ref(null);
|
|
20
|
-
const collapseChldren = ref([]);
|
|
21
20
|
const classes = computed(() => {
|
|
22
21
|
const prefixCls = componentName;
|
|
23
22
|
return {
|
|
24
23
|
[prefixCls]: true
|
|
25
24
|
};
|
|
26
25
|
});
|
|
27
|
-
|
|
28
|
-
() => props.modelValue,
|
|
29
|
-
(newval) => {
|
|
30
|
-
let doms = collapseChldren.value;
|
|
31
|
-
Array.from(doms).forEach((item) => {
|
|
32
|
-
if (typeof newval == "number" || typeof newval == "string") {
|
|
33
|
-
item.changeOpen(newval == item.name ? true : false);
|
|
34
|
-
} else if (Object.values(newval) instanceof Array) {
|
|
35
|
-
const isOpen = newval.indexOf(Number(item.name)) > -1 || newval.indexOf(String(item.name)) > -1;
|
|
36
|
-
item.changeOpen(isOpen);
|
|
37
|
-
}
|
|
38
|
-
item.animation();
|
|
39
|
-
});
|
|
40
|
-
}
|
|
41
|
-
);
|
|
42
|
-
onMounted(() => {
|
|
43
|
-
collapseChldren.value = getCurrentInstance().provides.collapseParent.children || [];
|
|
44
|
-
});
|
|
45
|
-
const changeVal = (val) => {
|
|
26
|
+
const changeVal = (val, name, status = true) => {
|
|
46
27
|
emit("update:modelValue", val);
|
|
47
|
-
emit("change", val);
|
|
28
|
+
emit("change", val, name, status);
|
|
48
29
|
};
|
|
49
|
-
const
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
30
|
+
const updateVal = (name) => {
|
|
31
|
+
if (props.accordion) {
|
|
32
|
+
if (props.modelValue === name) {
|
|
33
|
+
changeVal("", name, false);
|
|
34
|
+
} else {
|
|
35
|
+
changeVal(name, name, true);
|
|
55
36
|
}
|
|
56
|
-
}
|
|
57
|
-
|
|
58
|
-
|
|
37
|
+
} else {
|
|
38
|
+
if (Array.isArray(props.modelValue)) {
|
|
39
|
+
if (props.modelValue.includes(name)) {
|
|
40
|
+
const newValue = props.modelValue.filter((v) => v !== name);
|
|
41
|
+
changeVal(newValue, name, false);
|
|
42
|
+
} else {
|
|
43
|
+
const newValue = props.modelValue.concat([name]);
|
|
44
|
+
changeVal(newValue, name, true);
|
|
45
|
+
}
|
|
46
|
+
} else {
|
|
47
|
+
console.warn("[NutUI] <Collapse> 未开启手风琴模式时 v-model 应为数组");
|
|
48
|
+
}
|
|
49
|
+
}
|
|
59
50
|
};
|
|
60
51
|
const isExpanded = (name) => {
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
52
|
+
if (props.accordion) {
|
|
53
|
+
return props.modelValue === name;
|
|
54
|
+
} else if (Array.isArray(props.modelValue)) {
|
|
55
|
+
return props.modelValue.includes(name);
|
|
64
56
|
}
|
|
57
|
+
return false;
|
|
65
58
|
};
|
|
66
59
|
provide("collapseParent", {
|
|
67
|
-
|
|
68
|
-
props,
|
|
69
|
-
changeValAry,
|
|
70
|
-
changeVal,
|
|
60
|
+
updateVal,
|
|
71
61
|
isExpanded
|
|
72
62
|
});
|
|
73
63
|
return { collapseDom, classes };
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { inject, reactive, computed,
|
|
1
|
+
import { ref, inject, reactive, computed, watch, openBlock, createElementBlock, normalizeClass, createElementVNode, renderSlot, toDisplayString, createCommentVNode, normalizeStyle, createBlock, resolveDynamicComponent } from "vue";
|
|
2
2
|
import { DownArrow } from "@nutui/icons-vue";
|
|
3
3
|
import { c as createComponent } from "./component-81a4c1d0.js";
|
|
4
4
|
import { r as renderIcon } from "./renderIcon-3d0fd47c.js";
|
|
@@ -44,8 +44,9 @@ const _sfc_main = create({
|
|
|
44
44
|
default: 180
|
|
45
45
|
}
|
|
46
46
|
},
|
|
47
|
-
|
|
48
|
-
|
|
47
|
+
setup(props) {
|
|
48
|
+
const wrapperRef = ref(null);
|
|
49
|
+
const contentRef = ref(null);
|
|
49
50
|
const collapse = inject("collapseParent");
|
|
50
51
|
const parent = reactive(collapse);
|
|
51
52
|
const classes = computed(() => {
|
|
@@ -55,123 +56,54 @@ const _sfc_main = create({
|
|
|
55
56
|
[prefixCls + "__border"]: props.border
|
|
56
57
|
};
|
|
57
58
|
});
|
|
58
|
-
const
|
|
59
|
-
if (
|
|
60
|
-
parent.
|
|
59
|
+
const expanded = computed(() => {
|
|
60
|
+
if (parent) {
|
|
61
|
+
return parent.isExpanded(props.name);
|
|
61
62
|
}
|
|
62
|
-
|
|
63
|
-
relation(getCurrentInstance());
|
|
64
|
-
const proxyData = reactive({
|
|
65
|
-
openExpanded: false
|
|
63
|
+
return false;
|
|
66
64
|
});
|
|
67
|
-
const
|
|
68
|
-
const
|
|
69
|
-
|
|
70
|
-
const wrapperRefEle = document.getElementsByClassName("nut-collapse__item-wrapper")[0];
|
|
71
|
-
if (wrapperRefEle) {
|
|
72
|
-
wrapperRefEle.style.willChange = "auto";
|
|
73
|
-
}
|
|
65
|
+
const wrapperHeight = ref(expanded.value ? "auto" : "0px");
|
|
66
|
+
const toggle = () => {
|
|
67
|
+
parent.updateVal(props.name);
|
|
74
68
|
};
|
|
75
|
-
const
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
if (!wrapperRefEle || !contentRefEle) {
|
|
79
|
-
return;
|
|
80
|
-
}
|
|
81
|
-
const offsetHeight = contentRefEle.offsetHeight || "auto";
|
|
82
|
-
if (offsetHeight) {
|
|
83
|
-
const contentHeight = `${offsetHeight}px`;
|
|
84
|
-
wrapperRefEle.style.willChange = "height";
|
|
85
|
-
wrapperRefEle.style.height = !proxyData.openExpanded ? 0 : contentHeight;
|
|
86
|
-
}
|
|
87
|
-
if (!proxyData.openExpanded) {
|
|
88
|
-
onTransitionEnd();
|
|
69
|
+
const onTransitionEnd = () => {
|
|
70
|
+
if (expanded.value) {
|
|
71
|
+
wrapperHeight.value = "auto";
|
|
89
72
|
}
|
|
90
73
|
};
|
|
91
74
|
const open = () => {
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
const currentName = computed(() => props.name);
|
|
99
|
-
const toggleOpen = () => {
|
|
100
|
-
if (parent.props.accordion) {
|
|
101
|
-
nextTick(() => {
|
|
102
|
-
if (currentName.value == parent.props.modelValue) {
|
|
103
|
-
open();
|
|
104
|
-
} else {
|
|
105
|
-
parent.changeVal(currentName.value);
|
|
106
|
-
}
|
|
75
|
+
wrapperHeight.value = "0px";
|
|
76
|
+
requestAnimationFrame(() => {
|
|
77
|
+
requestAnimationFrame(() => {
|
|
78
|
+
var _a;
|
|
79
|
+
const height = (_a = contentRef.value) == null ? void 0 : _a.offsetHeight;
|
|
80
|
+
wrapperHeight.value = height ? `${height}px` : "auto";
|
|
107
81
|
});
|
|
108
|
-
} else {
|
|
109
|
-
parent.changeValAry(String(props.name));
|
|
110
|
-
open();
|
|
111
|
-
}
|
|
112
|
-
};
|
|
113
|
-
const changeOpen = (bol) => {
|
|
114
|
-
proxyData.openExpanded = bol;
|
|
115
|
-
};
|
|
116
|
-
const expanded = computed(() => {
|
|
117
|
-
if (parent) {
|
|
118
|
-
return parent.isExpanded(props.name);
|
|
119
|
-
}
|
|
120
|
-
return null;
|
|
121
|
-
});
|
|
122
|
-
watch(expanded, (value, oldValue) => {
|
|
123
|
-
if (value) {
|
|
124
|
-
proxyData.openExpanded = true;
|
|
125
|
-
}
|
|
126
|
-
});
|
|
127
|
-
const init = () => {
|
|
128
|
-
const { name } = props;
|
|
129
|
-
const active = parent && parent.props.modelValue;
|
|
130
|
-
nextTick(() => {
|
|
131
|
-
if (typeof active == "number" || typeof active == "string") {
|
|
132
|
-
if (name == active) {
|
|
133
|
-
defaultOpen();
|
|
134
|
-
}
|
|
135
|
-
} else if (Object.values(active) instanceof Array) {
|
|
136
|
-
const f = Object.values(active).filter((item) => item == name);
|
|
137
|
-
if (f.length > 0) {
|
|
138
|
-
defaultOpen();
|
|
139
|
-
}
|
|
140
|
-
}
|
|
141
82
|
});
|
|
142
83
|
};
|
|
143
|
-
|
|
144
|
-
var
|
|
145
|
-
|
|
146
|
-
}
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
childList: true,
|
|
151
|
-
subtree: true
|
|
84
|
+
const close = () => {
|
|
85
|
+
var _a;
|
|
86
|
+
const height = (_a = contentRef.value) == null ? void 0 : _a.offsetHeight;
|
|
87
|
+
wrapperHeight.value = height ? `${height}px` : "auto";
|
|
88
|
+
requestAnimationFrame(() => {
|
|
89
|
+
requestAnimationFrame(() => {
|
|
90
|
+
wrapperHeight.value = "0px";
|
|
152
91
|
});
|
|
153
|
-
}
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
let ele = contentRef.value;
|
|
158
|
-
let _class = "";
|
|
159
|
-
if (!(ele == null ? void 0 : ele.innerText)) {
|
|
160
|
-
_class = "nut-collapse__item-wrapper__content--empty";
|
|
161
|
-
}
|
|
162
|
-
return _class;
|
|
92
|
+
});
|
|
93
|
+
};
|
|
94
|
+
watch(expanded, (value) => {
|
|
95
|
+
value ? open() : close();
|
|
163
96
|
});
|
|
164
97
|
return {
|
|
165
98
|
classes,
|
|
166
|
-
emptyContent,
|
|
167
|
-
...toRefs(proxyData),
|
|
168
99
|
renderIcon,
|
|
169
100
|
wrapperRef,
|
|
170
101
|
contentRef,
|
|
171
102
|
open,
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
103
|
+
toggle,
|
|
104
|
+
wrapperHeight,
|
|
105
|
+
expanded,
|
|
106
|
+
onTransitionEnd
|
|
175
107
|
};
|
|
176
108
|
}
|
|
177
109
|
});
|
|
@@ -193,8 +125,8 @@ const _hoisted_7 = {
|
|
|
193
125
|
};
|
|
194
126
|
const _hoisted_8 = { class: "nut-collapse__item-extraWrapper__extraRender" };
|
|
195
127
|
const _hoisted_9 = {
|
|
196
|
-
class: "nut-collapse__item-
|
|
197
|
-
ref: "
|
|
128
|
+
class: "nut-collapse__item-wrapper__content",
|
|
129
|
+
ref: "contentRef"
|
|
198
130
|
};
|
|
199
131
|
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
|
|
200
132
|
return openBlock(), createElementBlock("view", {
|
|
@@ -202,7 +134,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
|
|
|
202
134
|
}, [
|
|
203
135
|
createElementVNode("view", {
|
|
204
136
|
class: normalizeClass(["nut-collapse-item__title", { "nut-collapse-item__title--disabled": _ctx.disabled }]),
|
|
205
|
-
onClick: _cache[0] || (_cache[0] = (...args) => _ctx.
|
|
137
|
+
onClick: _cache[0] || (_cache[0] = (...args) => _ctx.toggle && _ctx.toggle(...args))
|
|
206
138
|
}, [
|
|
207
139
|
createElementVNode("view", _hoisted_1, [
|
|
208
140
|
createElementVNode("view", _hoisted_2, [
|
|
@@ -222,8 +154,8 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
|
|
|
222
154
|
class: "nut-collapse-item__title-sub"
|
|
223
155
|
}, null, 8, _hoisted_6)),
|
|
224
156
|
createElementVNode("view", {
|
|
225
|
-
class: normalizeClass(["nut-collapse-item__title-icon", { "nut-collapse-item__title-icon--expanded": _ctx.
|
|
226
|
-
style: normalizeStyle({ transform: "rotate(" + (_ctx.
|
|
157
|
+
class: normalizeClass(["nut-collapse-item__title-icon", { "nut-collapse-item__title-icon--expanded": _ctx.expanded }]),
|
|
158
|
+
style: normalizeStyle({ transform: "rotate(" + (_ctx.expanded ? _ctx.rotate : 0) + "deg)" })
|
|
227
159
|
}, [
|
|
228
160
|
(openBlock(), createBlock(resolveDynamicComponent(_ctx.renderIcon(_ctx.icon))))
|
|
229
161
|
], 6)
|
|
@@ -233,14 +165,19 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
|
|
|
233
165
|
renderSlot(_ctx.$slots, "extra")
|
|
234
166
|
])
|
|
235
167
|
])) : createCommentVNode("", true),
|
|
236
|
-
createElementVNode("view",
|
|
237
|
-
|
|
238
|
-
|
|
239
|
-
|
|
240
|
-
|
|
168
|
+
createElementVNode("view", {
|
|
169
|
+
class: "nut-collapse__item-wrapper",
|
|
170
|
+
ref: "wrapperRef",
|
|
171
|
+
style: normalizeStyle({
|
|
172
|
+
willChange: "height",
|
|
173
|
+
height: _ctx.wrapperHeight
|
|
174
|
+
}),
|
|
175
|
+
onTransitionend: _cache[1] || (_cache[1] = (...args) => _ctx.onTransitionEnd && _ctx.onTransitionEnd(...args))
|
|
176
|
+
}, [
|
|
177
|
+
createElementVNode("view", _hoisted_9, [
|
|
241
178
|
renderSlot(_ctx.$slots, "default")
|
|
242
|
-
],
|
|
243
|
-
],
|
|
179
|
+
], 512)
|
|
180
|
+
], 36)
|
|
244
181
|
], 2);
|
|
245
182
|
}
|
|
246
183
|
const index = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { reactive, useSlots, computed, watch, toRefs, resolveComponent, openBlock, createElementBlock, normalizeClass, normalizeStyle, createElementVNode, createBlock, createCommentVNode, renderSlot } from "vue";
|
|
1
|
+
import { reactive, useSlots, computed, ref, onMounted, onBeforeUnmount, watch, toRefs, resolveComponent, openBlock, createElementBlock, normalizeClass, normalizeStyle, createElementVNode, createBlock, createCommentVNode, renderSlot } from "vue";
|
|
2
2
|
import { c as createComponent } from "./component-81a4c1d0.js";
|
|
3
3
|
import { p as pxCheck } from "./pxCheck-c6b9f6b7.js";
|
|
4
4
|
import { Image, ImageError } from "@nutui/icons-vue";
|
|
@@ -40,6 +40,10 @@ const _sfc_main = create({
|
|
|
40
40
|
showLoading: {
|
|
41
41
|
type: Boolean,
|
|
42
42
|
default: true
|
|
43
|
+
},
|
|
44
|
+
lazyLoad: {
|
|
45
|
+
type: Boolean,
|
|
46
|
+
default: false
|
|
43
47
|
}
|
|
44
48
|
},
|
|
45
49
|
components: {
|
|
@@ -61,6 +65,30 @@ const _sfc_main = create({
|
|
|
61
65
|
[`${prefixCls}-round`]: props.round
|
|
62
66
|
};
|
|
63
67
|
});
|
|
68
|
+
const observer = ref(null);
|
|
69
|
+
const show = ref(false);
|
|
70
|
+
const imgRef = ref(null);
|
|
71
|
+
const initObserver = () => {
|
|
72
|
+
const options = {
|
|
73
|
+
threshold: [0],
|
|
74
|
+
rootMargin: "0px"
|
|
75
|
+
};
|
|
76
|
+
observer.value = new IntersectionObserver((entires) => {
|
|
77
|
+
entires.forEach((item) => {
|
|
78
|
+
if (item.isIntersecting) {
|
|
79
|
+
show.value = true;
|
|
80
|
+
observer.value.disconnect();
|
|
81
|
+
}
|
|
82
|
+
});
|
|
83
|
+
}, options);
|
|
84
|
+
imgRef.value && observer.value.observe(imgRef.value);
|
|
85
|
+
};
|
|
86
|
+
onMounted(() => {
|
|
87
|
+
props.lazyLoad && initObserver();
|
|
88
|
+
});
|
|
89
|
+
onBeforeUnmount(() => {
|
|
90
|
+
observer.value && observer.value.disconnect();
|
|
91
|
+
});
|
|
64
92
|
const stylebox = computed(() => {
|
|
65
93
|
let style = {};
|
|
66
94
|
if (props.width)
|
|
@@ -98,10 +126,10 @@ const _sfc_main = create({
|
|
|
98
126
|
const imageClick = (event) => {
|
|
99
127
|
emit("click", event);
|
|
100
128
|
};
|
|
101
|
-
return { ...toRefs(state), imageClick, classes, styles, stylebox, error, load };
|
|
129
|
+
return { ...toRefs(state), imageClick, classes, styles, stylebox, error, load, show, imgRef };
|
|
102
130
|
}
|
|
103
131
|
});
|
|
104
|
-
const _hoisted_1 = ["src", "alt"];
|
|
132
|
+
const _hoisted_1 = ["src", "date-src", "alt"];
|
|
105
133
|
const _hoisted_2 = {
|
|
106
134
|
key: 0,
|
|
107
135
|
class: "nut-img-loading"
|
|
@@ -113,20 +141,22 @@ const _hoisted_3 = {
|
|
|
113
141
|
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
|
|
114
142
|
const _component_Image = resolveComponent("Image");
|
|
115
143
|
const _component_ImageError = resolveComponent("ImageError");
|
|
116
|
-
return openBlock(), createElementBlock("
|
|
144
|
+
return openBlock(), createElementBlock("div", {
|
|
117
145
|
class: normalizeClass(_ctx.classes),
|
|
118
146
|
style: normalizeStyle(_ctx.stylebox),
|
|
119
147
|
onClick: _cache[2] || (_cache[2] = (...args) => _ctx.imageClick && _ctx.imageClick(...args))
|
|
120
148
|
}, [
|
|
121
149
|
createElementVNode("img", {
|
|
150
|
+
ref: "imgRef",
|
|
122
151
|
class: "nut-img",
|
|
123
|
-
src: _ctx.src,
|
|
152
|
+
src: _ctx.lazyLoad ? _ctx.show ? _ctx.src : void 0 : _ctx.src,
|
|
153
|
+
"date-src": _ctx.lazyLoad ? _ctx.show ? void 0 : _ctx.src : void 0,
|
|
124
154
|
alt: _ctx.alt,
|
|
125
155
|
onLoad: _cache[0] || (_cache[0] = (...args) => _ctx.load && _ctx.load(...args)),
|
|
126
156
|
onError: _cache[1] || (_cache[1] = (...args) => _ctx.error && _ctx.error(...args)),
|
|
127
157
|
style: normalizeStyle(_ctx.styles)
|
|
128
158
|
}, null, 44, _hoisted_1),
|
|
129
|
-
_ctx.loading ? (openBlock(), createElementBlock("
|
|
159
|
+
_ctx.loading ? (openBlock(), createElementBlock("div", _hoisted_2, [
|
|
130
160
|
!_ctx.slotLoding ? (openBlock(), createBlock(_component_Image, {
|
|
131
161
|
key: 0,
|
|
132
162
|
width: "16px",
|
|
@@ -135,7 +165,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
|
|
|
135
165
|
})) : createCommentVNode("", true),
|
|
136
166
|
renderSlot(_ctx.$slots, "loading")
|
|
137
167
|
])) : createCommentVNode("", true),
|
|
138
|
-
_ctx.isError && !_ctx.loading ? (openBlock(), createElementBlock("
|
|
168
|
+
_ctx.isError && !_ctx.loading ? (openBlock(), createElementBlock("div", _hoisted_3, [
|
|
139
169
|
!_ctx.slotError ? (openBlock(), createBlock(_component_ImageError, {
|
|
140
170
|
key: 0,
|
|
141
171
|
width: "16px",
|
|
@@ -1,2 +1 @@
|
|
|
1
|
-
.
|
|
2
|
-
}
|
|
1
|
+
@import '../picker/index.scss';
|