@deot/vc 1.0.47 → 1.0.48
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/dist/index.d.ts +134 -98
- package/dist/index.iife.js +138 -54
- package/dist/index.umd.cjs +138 -54
- package/package.json +4 -4
package/dist/index.iife.js
CHANGED
|
@@ -221,7 +221,7 @@ var Vc = (function (exports, vue) {
|
|
|
221
221
|
return !!(overflow.match(/(scroll|auto)/) || className?.test(el.className));
|
|
222
222
|
};
|
|
223
223
|
|
|
224
|
-
const getScroller = (el, options) => {
|
|
224
|
+
const getScroller$1 = (el, options) => {
|
|
225
225
|
if (IS_SERVER$2 || !el) return null;
|
|
226
226
|
let parent = el;
|
|
227
227
|
while (parent) {
|
|
@@ -9150,6 +9150,10 @@ var Vc = (function (exports, vue) {
|
|
|
9150
9150
|
});
|
|
9151
9151
|
const MActionSheet = ActionSheet;
|
|
9152
9152
|
const props$1s = {
|
|
9153
|
+
modelValue: {
|
|
9154
|
+
type: Boolean,
|
|
9155
|
+
default: false
|
|
9156
|
+
},
|
|
9153
9157
|
zIndex: {
|
|
9154
9158
|
type: [Number, String],
|
|
9155
9159
|
default: 1
|
|
@@ -9176,14 +9180,42 @@ var Vc = (function (exports, vue) {
|
|
|
9176
9180
|
type: String
|
|
9177
9181
|
}
|
|
9178
9182
|
};
|
|
9179
|
-
|
|
9183
|
+
let scrollBarWidth;
|
|
9184
|
+
const getScrollBarWidth = () => {
|
|
9185
|
+
if (scrollBarWidth !== void 0) return scrollBarWidth;
|
|
9186
|
+
const outer = document.createElement("div");
|
|
9187
|
+
outer.className = "vc-scrollbar__wrap";
|
|
9188
|
+
outer.style.visibility = "hidden";
|
|
9189
|
+
outer.style.width = "100px";
|
|
9190
|
+
outer.style.position = "absolute";
|
|
9191
|
+
outer.style.top = "-9999px";
|
|
9192
|
+
document.body.appendChild(outer);
|
|
9193
|
+
const widthNoScroll = outer.offsetWidth;
|
|
9194
|
+
outer.style.overflow = "scroll";
|
|
9195
|
+
const inner = document.createElement("div");
|
|
9196
|
+
inner.style.width = "100%";
|
|
9197
|
+
outer.appendChild(inner);
|
|
9198
|
+
const widthWithScroll = inner.offsetWidth;
|
|
9199
|
+
outer.parentNode?.removeChild?.(outer);
|
|
9200
|
+
scrollBarWidth = widthNoScroll - widthWithScroll;
|
|
9201
|
+
return scrollBarWidth;
|
|
9202
|
+
};
|
|
9180
9203
|
const SCROLLER_WHEEL_REG = /vc-scroller-wheel/;
|
|
9204
|
+
const getScroller = (el2) => {
|
|
9205
|
+
return getScroller$1(el2, { className: SCROLLER_WHEEL_REG });
|
|
9206
|
+
};
|
|
9207
|
+
const isWheel = (el2) => {
|
|
9208
|
+
return SCROLLER_WHEEL_REG.test(el2?.className || "");
|
|
9209
|
+
};
|
|
9210
|
+
const COMPONENT_NAME$27 = "vc-affix";
|
|
9181
9211
|
const Affix = /* @__PURE__ */ vue.defineComponent({
|
|
9182
9212
|
name: COMPONENT_NAME$27,
|
|
9213
|
+
emits: ["update:modelValue"],
|
|
9183
9214
|
props: props$1s,
|
|
9184
9215
|
setup(props2, {
|
|
9185
9216
|
slots,
|
|
9186
|
-
expose
|
|
9217
|
+
expose,
|
|
9218
|
+
emit
|
|
9187
9219
|
}) {
|
|
9188
9220
|
const scrollerInstance = vue.inject("vc-scroller", null);
|
|
9189
9221
|
const scroller = vue.shallowRef();
|
|
@@ -9198,9 +9230,7 @@ var Vc = (function (exports, vue) {
|
|
|
9198
9230
|
const isActive = vue.ref(false);
|
|
9199
9231
|
const transformY = vue.ref(0);
|
|
9200
9232
|
const windowHeight = vue.ref(window.innerHeight);
|
|
9201
|
-
const isVcScrollerWheel = vue.computed(() =>
|
|
9202
|
-
return SCROLLER_WHEEL_REG.test(scroller.value?.className || "");
|
|
9203
|
-
});
|
|
9233
|
+
const isVcScrollerWheel = vue.computed(() => isWheel(scroller.value));
|
|
9204
9234
|
const currentStyle = vue.computed(() => {
|
|
9205
9235
|
if (!isActive.value) return {};
|
|
9206
9236
|
return {
|
|
@@ -9221,7 +9251,8 @@ var Vc = (function (exports, vue) {
|
|
|
9221
9251
|
};
|
|
9222
9252
|
});
|
|
9223
9253
|
const setCurrentRect = () => {
|
|
9224
|
-
const rect = current.value
|
|
9254
|
+
const rect = current.value?.getBoundingClientRect?.();
|
|
9255
|
+
if (!rect) return;
|
|
9225
9256
|
Object.assign(currentRect, {
|
|
9226
9257
|
top: rect.top,
|
|
9227
9258
|
bottom: rect.bottom,
|
|
@@ -9246,7 +9277,7 @@ var Vc = (function (exports, vue) {
|
|
|
9246
9277
|
transformY.value = Math.min(containerRect.bottom - currentHeightOffset, 0) + transformOffsetY;
|
|
9247
9278
|
} else {
|
|
9248
9279
|
isActive.value = currentRect.bottom - containerRect.top >= containerRect.height - props2.offset;
|
|
9249
|
-
transformY.value =
|
|
9280
|
+
transformY.value = transformOffsetY;
|
|
9250
9281
|
}
|
|
9251
9282
|
};
|
|
9252
9283
|
const setFixedStatus = () => {
|
|
@@ -9273,36 +9304,57 @@ var Vc = (function (exports, vue) {
|
|
|
9273
9304
|
}
|
|
9274
9305
|
}
|
|
9275
9306
|
};
|
|
9307
|
+
const offScroll = (handler) => {
|
|
9308
|
+
if (isVcScrollerWheel.value) {
|
|
9309
|
+
scrollerInstance?.off(handler);
|
|
9310
|
+
} else {
|
|
9311
|
+
scroller.value?.removeEventListener("scroll", handler);
|
|
9312
|
+
}
|
|
9313
|
+
};
|
|
9314
|
+
const onScroll = (handler, options) => {
|
|
9315
|
+
vue.nextTick(() => {
|
|
9316
|
+
if (isVcScrollerWheel.value) {
|
|
9317
|
+
scrollerInstance?.on(handler);
|
|
9318
|
+
} else {
|
|
9319
|
+
scroller.value?.addEventListener("scroll", handler);
|
|
9320
|
+
}
|
|
9321
|
+
options?.first && handler();
|
|
9322
|
+
});
|
|
9323
|
+
return () => offScroll(handler);
|
|
9324
|
+
};
|
|
9276
9325
|
const refresh = () => {
|
|
9326
|
+
if (props2.disabled) return;
|
|
9277
9327
|
setCurrentRect();
|
|
9278
9328
|
scroller.value instanceof Window || props2.fixed ? setFixedStatus() : setAbsoluteStatus();
|
|
9329
|
+
emit("update:modelValue", isActive.value);
|
|
9279
9330
|
};
|
|
9280
9331
|
vue.onMounted(() => {
|
|
9281
9332
|
if (typeof props2.target === "string") {
|
|
9282
9333
|
base.value = document.querySelector(props2.target) ?? void 0;
|
|
9283
9334
|
}
|
|
9284
9335
|
!base.value && (base.value = document.documentElement);
|
|
9285
|
-
scroller.value = getScroller(current.value
|
|
9286
|
-
|
|
9336
|
+
scroller.value = getScroller(current.value);
|
|
9337
|
+
onScroll(refresh, {
|
|
9338
|
+
first: true
|
|
9287
9339
|
});
|
|
9288
|
-
if (isVcScrollerWheel.value) {
|
|
9289
|
-
scrollerInstance?.on(refresh);
|
|
9290
|
-
} else {
|
|
9291
|
-
scroller.value?.addEventListener("scroll", refresh);
|
|
9292
|
-
}
|
|
9293
|
-
refresh();
|
|
9294
|
-
});
|
|
9295
|
-
vue.onBeforeUnmount(() => {
|
|
9296
|
-
if (isVcScrollerWheel.value) {
|
|
9297
|
-
scrollerInstance?.off(refresh);
|
|
9298
|
-
} else {
|
|
9299
|
-
scroller.value?.removeEventListener("scroll", refresh);
|
|
9300
|
-
}
|
|
9301
9340
|
});
|
|
9341
|
+
vue.onBeforeUnmount(() => offScroll(refresh));
|
|
9302
9342
|
expose({
|
|
9303
|
-
refresh
|
|
9343
|
+
refresh,
|
|
9344
|
+
onScroll,
|
|
9345
|
+
offScroll
|
|
9346
|
+
});
|
|
9347
|
+
vue.provide("vc-affix", {
|
|
9348
|
+
props: props2,
|
|
9349
|
+
isActive,
|
|
9350
|
+
refresh,
|
|
9351
|
+
onScroll,
|
|
9352
|
+
offScroll
|
|
9304
9353
|
});
|
|
9305
9354
|
return () => {
|
|
9355
|
+
if (props2.disabled) return slots?.default?.({
|
|
9356
|
+
active: false
|
|
9357
|
+
});
|
|
9306
9358
|
return vue.createVNode("div", {
|
|
9307
9359
|
"ref": current,
|
|
9308
9360
|
"class": "vc-affix",
|
|
@@ -17453,26 +17505,6 @@ var Vc = (function (exports, vue) {
|
|
|
17453
17505
|
default: () => [0, 0]
|
|
17454
17506
|
}
|
|
17455
17507
|
};
|
|
17456
|
-
let scrollBarWidth;
|
|
17457
|
-
const getScrollBarWidth = () => {
|
|
17458
|
-
if (scrollBarWidth !== void 0) return scrollBarWidth;
|
|
17459
|
-
const outer = document.createElement("div");
|
|
17460
|
-
outer.className = "vc-scrollbar__wrap";
|
|
17461
|
-
outer.style.visibility = "hidden";
|
|
17462
|
-
outer.style.width = "100px";
|
|
17463
|
-
outer.style.position = "absolute";
|
|
17464
|
-
outer.style.top = "-9999px";
|
|
17465
|
-
document.body.appendChild(outer);
|
|
17466
|
-
const widthNoScroll = outer.offsetWidth;
|
|
17467
|
-
outer.style.overflow = "scroll";
|
|
17468
|
-
const inner = document.createElement("div");
|
|
17469
|
-
inner.style.width = "100%";
|
|
17470
|
-
outer.appendChild(inner);
|
|
17471
|
-
const widthWithScroll = inner.offsetWidth;
|
|
17472
|
-
outer.parentNode?.removeChild?.(outer);
|
|
17473
|
-
scrollBarWidth = widthNoScroll - widthWithScroll;
|
|
17474
|
-
return scrollBarWidth;
|
|
17475
|
-
};
|
|
17476
17508
|
const barKeys$1 = [
|
|
17477
17509
|
"always",
|
|
17478
17510
|
"thumbMinSize",
|
|
@@ -20627,7 +20659,7 @@ var Vc = (function (exports, vue) {
|
|
|
20627
20659
|
} else if (typeof wrapper === "string") {
|
|
20628
20660
|
scroller.value = document.querySelector(wrapper);
|
|
20629
20661
|
} else {
|
|
20630
|
-
scroller.value = getScroller(instance.vnode.el);
|
|
20662
|
+
scroller.value = getScroller$1(instance.vnode.el);
|
|
20631
20663
|
}
|
|
20632
20664
|
};
|
|
20633
20665
|
const initPlaceholder = () => {
|
|
@@ -22609,13 +22641,13 @@ var Vc = (function (exports, vue) {
|
|
|
22609
22641
|
"readonly": true,
|
|
22610
22642
|
"placeholder": its.value.attrs?.placeholder || "请选择"
|
|
22611
22643
|
}, {
|
|
22612
|
-
prepend: () => {
|
|
22613
|
-
|
|
22614
|
-
|
|
22615
|
-
|
|
22644
|
+
prepend: slots.prepend || props2.label ? () => {
|
|
22645
|
+
slots.prepend ? slots.prepend() : vue.createVNode("div", {
|
|
22646
|
+
"class": "vc-select__prepend"
|
|
22647
|
+
}, [vue.createVNode("span", {
|
|
22616
22648
|
"class": "vc-select__label"
|
|
22617
|
-
}, [props2.label]);
|
|
22618
|
-
},
|
|
22649
|
+
}, [props2.label])]);
|
|
22650
|
+
} : null,
|
|
22619
22651
|
content: multiple.value && currentValue.value && currentValue.value.length > 0 ? () => {
|
|
22620
22652
|
return vue.createVNode("div", {
|
|
22621
22653
|
"class": [classes.value, "vc-select__tags"]
|
|
@@ -27985,9 +28017,12 @@ var Vc = (function (exports, vue) {
|
|
|
27985
28017
|
barStyle: [Object, String],
|
|
27986
28018
|
contentStyle: [Object, String],
|
|
27987
28019
|
barClass: [Object, String],
|
|
27988
|
-
contentClass: [Object, String]
|
|
28020
|
+
contentClass: [Object, String],
|
|
28021
|
+
affixable: Boolean,
|
|
28022
|
+
affixOptions: Object
|
|
27989
28023
|
};
|
|
27990
28024
|
const useTabs = (options = {}) => {
|
|
28025
|
+
const affix = vue.inject("vc-affix", null);
|
|
27991
28026
|
const instance = vue.getCurrentInstance();
|
|
27992
28027
|
const { props: props2, emit } = instance;
|
|
27993
28028
|
const tabsId = vue.ref(getUid("tabs"));
|
|
@@ -28029,10 +28064,56 @@ var Vc = (function (exports, vue) {
|
|
|
28029
28064
|
[`is-${props2.theme}`]: !!props2.theme
|
|
28030
28065
|
};
|
|
28031
28066
|
});
|
|
28067
|
+
const hasAnchor = vue.computed(() => {
|
|
28068
|
+
return list.value.some((item) => !!item.anchor);
|
|
28069
|
+
});
|
|
28032
28070
|
const refresh = () => {
|
|
28033
28071
|
options?.refreshAfloat?.();
|
|
28034
28072
|
};
|
|
28035
|
-
|
|
28073
|
+
let scrollToAnchorTimer;
|
|
28074
|
+
const scrollToAnchor = (anchor) => {
|
|
28075
|
+
if (!anchor) return;
|
|
28076
|
+
const el2 = document.querySelector(anchor);
|
|
28077
|
+
if (!el2) return;
|
|
28078
|
+
const scroller = getScroller(instance.vnode.el);
|
|
28079
|
+
scrollIntoView(scroller, {
|
|
28080
|
+
duration: 250,
|
|
28081
|
+
from: scroller.scrollTop,
|
|
28082
|
+
to: scroller.scrollTop + el2.getBoundingClientRect().top - scroller.getBoundingClientRect().top - (!affix || affix.props.placement !== "bottom" ? instance.vnode.el.offsetHeight : 0) - (affix && affix.props.placement !== "bottom" ? affix.props.offset : 0)
|
|
28083
|
+
});
|
|
28084
|
+
scrollToAnchorTimer && clearTimeout(scrollToAnchorTimer);
|
|
28085
|
+
scrollToAnchorTimer = setTimeout(() => scrollToAnchorTimer = null, 300);
|
|
28086
|
+
};
|
|
28087
|
+
const handleAffixScroll = () => {
|
|
28088
|
+
if (!hasAnchor.value || scrollToAnchorTimer) return;
|
|
28089
|
+
const scroller = getScroller(instance.vnode.el);
|
|
28090
|
+
const scrollTop = scroller?.scrollTop;
|
|
28091
|
+
if (typeof scrollTop !== "number") return;
|
|
28092
|
+
for (let i = 0; i < list.value.length; i++) {
|
|
28093
|
+
const nav = list.value[i];
|
|
28094
|
+
const anchor = nav.anchor;
|
|
28095
|
+
if (!anchor) continue;
|
|
28096
|
+
const el2 = document.querySelector(anchor);
|
|
28097
|
+
if (!el2) continue;
|
|
28098
|
+
const elTop = el2.getBoundingClientRect().top - scroller.getBoundingClientRect().top + scroller.scrollTop;
|
|
28099
|
+
const nextNav = list.value[i + 1];
|
|
28100
|
+
let nextElTop;
|
|
28101
|
+
if (nextNav && nextNav.anchor) {
|
|
28102
|
+
const nextEl = document.querySelector(nextNav.anchor);
|
|
28103
|
+
if (nextEl) {
|
|
28104
|
+
nextElTop = nextEl.getBoundingClientRect().top - scroller.getBoundingClientRect().top + scroller.scrollTop;
|
|
28105
|
+
}
|
|
28106
|
+
}
|
|
28107
|
+
const allowDistance = 2;
|
|
28108
|
+
if (scrollTop >= elTop - allowDistance && (typeof nextElTop === "undefined" || scrollTop < nextElTop - allowDistance)) {
|
|
28109
|
+
if (getTabIndex(currentValue.value) !== i) {
|
|
28110
|
+
handleChange(i, false);
|
|
28111
|
+
}
|
|
28112
|
+
break;
|
|
28113
|
+
}
|
|
28114
|
+
}
|
|
28115
|
+
};
|
|
28116
|
+
const handleChange = (index, scrollTo = true) => {
|
|
28036
28117
|
if (timer.value) return;
|
|
28037
28118
|
timer.value = setTimeout(() => timer.value = null, 300);
|
|
28038
28119
|
const nav = list.value[index];
|
|
@@ -28041,7 +28122,7 @@ var Vc = (function (exports, vue) {
|
|
|
28041
28122
|
emit("update:modelValue", currentValue.value);
|
|
28042
28123
|
emit("change", currentValue.value);
|
|
28043
28124
|
emit("click", currentValue.value);
|
|
28044
|
-
|
|
28125
|
+
scrollTo && scrollToAnchor(nav.anchor);
|
|
28045
28126
|
};
|
|
28046
28127
|
const handleResize = () => {
|
|
28047
28128
|
if (instance.isUnmounted) return;
|
|
@@ -28051,10 +28132,13 @@ var Vc = (function (exports, vue) {
|
|
|
28051
28132
|
vue.onMounted(() => {
|
|
28052
28133
|
Resize.on(options.wrapper.value, handleResize);
|
|
28053
28134
|
options.scrollToActive && vue.nextTick(options.scrollToActive);
|
|
28135
|
+
affix?.onScroll?.(handleAffixScroll);
|
|
28054
28136
|
});
|
|
28055
28137
|
vue.onBeforeUnmount(() => {
|
|
28056
28138
|
Resize.off(options.wrapper.value, handleResize);
|
|
28057
28139
|
timer.value && clearTimeout(timer.value);
|
|
28140
|
+
affix?.offScroll?.(handleAffixScroll);
|
|
28141
|
+
scrollToAnchorTimer && clearTimeout(scrollToAnchorTimer);
|
|
28058
28142
|
});
|
|
28059
28143
|
const add = (item, setValue) => {
|
|
28060
28144
|
if (!item) return;
|
package/dist/index.umd.cjs
CHANGED
|
@@ -224,7 +224,7 @@
|
|
|
224
224
|
return !!(overflow.match(/(scroll|auto)/) || className?.test(el.className));
|
|
225
225
|
};
|
|
226
226
|
|
|
227
|
-
const getScroller = (el, options) => {
|
|
227
|
+
const getScroller$1 = (el, options) => {
|
|
228
228
|
if (IS_SERVER$2 || !el) return null;
|
|
229
229
|
let parent = el;
|
|
230
230
|
while (parent) {
|
|
@@ -9153,6 +9153,10 @@
|
|
|
9153
9153
|
});
|
|
9154
9154
|
const MActionSheet = ActionSheet;
|
|
9155
9155
|
const props$1s = {
|
|
9156
|
+
modelValue: {
|
|
9157
|
+
type: Boolean,
|
|
9158
|
+
default: false
|
|
9159
|
+
},
|
|
9156
9160
|
zIndex: {
|
|
9157
9161
|
type: [Number, String],
|
|
9158
9162
|
default: 1
|
|
@@ -9179,14 +9183,42 @@
|
|
|
9179
9183
|
type: String
|
|
9180
9184
|
}
|
|
9181
9185
|
};
|
|
9182
|
-
|
|
9186
|
+
let scrollBarWidth;
|
|
9187
|
+
const getScrollBarWidth = () => {
|
|
9188
|
+
if (scrollBarWidth !== void 0) return scrollBarWidth;
|
|
9189
|
+
const outer = document.createElement("div");
|
|
9190
|
+
outer.className = "vc-scrollbar__wrap";
|
|
9191
|
+
outer.style.visibility = "hidden";
|
|
9192
|
+
outer.style.width = "100px";
|
|
9193
|
+
outer.style.position = "absolute";
|
|
9194
|
+
outer.style.top = "-9999px";
|
|
9195
|
+
document.body.appendChild(outer);
|
|
9196
|
+
const widthNoScroll = outer.offsetWidth;
|
|
9197
|
+
outer.style.overflow = "scroll";
|
|
9198
|
+
const inner = document.createElement("div");
|
|
9199
|
+
inner.style.width = "100%";
|
|
9200
|
+
outer.appendChild(inner);
|
|
9201
|
+
const widthWithScroll = inner.offsetWidth;
|
|
9202
|
+
outer.parentNode?.removeChild?.(outer);
|
|
9203
|
+
scrollBarWidth = widthNoScroll - widthWithScroll;
|
|
9204
|
+
return scrollBarWidth;
|
|
9205
|
+
};
|
|
9183
9206
|
const SCROLLER_WHEEL_REG = /vc-scroller-wheel/;
|
|
9207
|
+
const getScroller = (el2) => {
|
|
9208
|
+
return getScroller$1(el2, { className: SCROLLER_WHEEL_REG });
|
|
9209
|
+
};
|
|
9210
|
+
const isWheel = (el2) => {
|
|
9211
|
+
return SCROLLER_WHEEL_REG.test(el2?.className || "");
|
|
9212
|
+
};
|
|
9213
|
+
const COMPONENT_NAME$27 = "vc-affix";
|
|
9184
9214
|
const Affix = /* @__PURE__ */ vue.defineComponent({
|
|
9185
9215
|
name: COMPONENT_NAME$27,
|
|
9216
|
+
emits: ["update:modelValue"],
|
|
9186
9217
|
props: props$1s,
|
|
9187
9218
|
setup(props2, {
|
|
9188
9219
|
slots,
|
|
9189
|
-
expose
|
|
9220
|
+
expose,
|
|
9221
|
+
emit
|
|
9190
9222
|
}) {
|
|
9191
9223
|
const scrollerInstance = vue.inject("vc-scroller", null);
|
|
9192
9224
|
const scroller = vue.shallowRef();
|
|
@@ -9201,9 +9233,7 @@
|
|
|
9201
9233
|
const isActive = vue.ref(false);
|
|
9202
9234
|
const transformY = vue.ref(0);
|
|
9203
9235
|
const windowHeight = vue.ref(window.innerHeight);
|
|
9204
|
-
const isVcScrollerWheel = vue.computed(() =>
|
|
9205
|
-
return SCROLLER_WHEEL_REG.test(scroller.value?.className || "");
|
|
9206
|
-
});
|
|
9236
|
+
const isVcScrollerWheel = vue.computed(() => isWheel(scroller.value));
|
|
9207
9237
|
const currentStyle = vue.computed(() => {
|
|
9208
9238
|
if (!isActive.value) return {};
|
|
9209
9239
|
return {
|
|
@@ -9224,7 +9254,8 @@
|
|
|
9224
9254
|
};
|
|
9225
9255
|
});
|
|
9226
9256
|
const setCurrentRect = () => {
|
|
9227
|
-
const rect = current.value
|
|
9257
|
+
const rect = current.value?.getBoundingClientRect?.();
|
|
9258
|
+
if (!rect) return;
|
|
9228
9259
|
Object.assign(currentRect, {
|
|
9229
9260
|
top: rect.top,
|
|
9230
9261
|
bottom: rect.bottom,
|
|
@@ -9249,7 +9280,7 @@
|
|
|
9249
9280
|
transformY.value = Math.min(containerRect.bottom - currentHeightOffset, 0) + transformOffsetY;
|
|
9250
9281
|
} else {
|
|
9251
9282
|
isActive.value = currentRect.bottom - containerRect.top >= containerRect.height - props2.offset;
|
|
9252
|
-
transformY.value =
|
|
9283
|
+
transformY.value = transformOffsetY;
|
|
9253
9284
|
}
|
|
9254
9285
|
};
|
|
9255
9286
|
const setFixedStatus = () => {
|
|
@@ -9276,36 +9307,57 @@
|
|
|
9276
9307
|
}
|
|
9277
9308
|
}
|
|
9278
9309
|
};
|
|
9310
|
+
const offScroll = (handler) => {
|
|
9311
|
+
if (isVcScrollerWheel.value) {
|
|
9312
|
+
scrollerInstance?.off(handler);
|
|
9313
|
+
} else {
|
|
9314
|
+
scroller.value?.removeEventListener("scroll", handler);
|
|
9315
|
+
}
|
|
9316
|
+
};
|
|
9317
|
+
const onScroll = (handler, options) => {
|
|
9318
|
+
vue.nextTick(() => {
|
|
9319
|
+
if (isVcScrollerWheel.value) {
|
|
9320
|
+
scrollerInstance?.on(handler);
|
|
9321
|
+
} else {
|
|
9322
|
+
scroller.value?.addEventListener("scroll", handler);
|
|
9323
|
+
}
|
|
9324
|
+
options?.first && handler();
|
|
9325
|
+
});
|
|
9326
|
+
return () => offScroll(handler);
|
|
9327
|
+
};
|
|
9279
9328
|
const refresh = () => {
|
|
9329
|
+
if (props2.disabled) return;
|
|
9280
9330
|
setCurrentRect();
|
|
9281
9331
|
scroller.value instanceof Window || props2.fixed ? setFixedStatus() : setAbsoluteStatus();
|
|
9332
|
+
emit("update:modelValue", isActive.value);
|
|
9282
9333
|
};
|
|
9283
9334
|
vue.onMounted(() => {
|
|
9284
9335
|
if (typeof props2.target === "string") {
|
|
9285
9336
|
base.value = document.querySelector(props2.target) ?? void 0;
|
|
9286
9337
|
}
|
|
9287
9338
|
!base.value && (base.value = document.documentElement);
|
|
9288
|
-
scroller.value = getScroller(current.value
|
|
9289
|
-
|
|
9339
|
+
scroller.value = getScroller(current.value);
|
|
9340
|
+
onScroll(refresh, {
|
|
9341
|
+
first: true
|
|
9290
9342
|
});
|
|
9291
|
-
if (isVcScrollerWheel.value) {
|
|
9292
|
-
scrollerInstance?.on(refresh);
|
|
9293
|
-
} else {
|
|
9294
|
-
scroller.value?.addEventListener("scroll", refresh);
|
|
9295
|
-
}
|
|
9296
|
-
refresh();
|
|
9297
|
-
});
|
|
9298
|
-
vue.onBeforeUnmount(() => {
|
|
9299
|
-
if (isVcScrollerWheel.value) {
|
|
9300
|
-
scrollerInstance?.off(refresh);
|
|
9301
|
-
} else {
|
|
9302
|
-
scroller.value?.removeEventListener("scroll", refresh);
|
|
9303
|
-
}
|
|
9304
9343
|
});
|
|
9344
|
+
vue.onBeforeUnmount(() => offScroll(refresh));
|
|
9305
9345
|
expose({
|
|
9306
|
-
refresh
|
|
9346
|
+
refresh,
|
|
9347
|
+
onScroll,
|
|
9348
|
+
offScroll
|
|
9349
|
+
});
|
|
9350
|
+
vue.provide("vc-affix", {
|
|
9351
|
+
props: props2,
|
|
9352
|
+
isActive,
|
|
9353
|
+
refresh,
|
|
9354
|
+
onScroll,
|
|
9355
|
+
offScroll
|
|
9307
9356
|
});
|
|
9308
9357
|
return () => {
|
|
9358
|
+
if (props2.disabled) return slots?.default?.({
|
|
9359
|
+
active: false
|
|
9360
|
+
});
|
|
9309
9361
|
return vue.createVNode("div", {
|
|
9310
9362
|
"ref": current,
|
|
9311
9363
|
"class": "vc-affix",
|
|
@@ -17456,26 +17508,6 @@
|
|
|
17456
17508
|
default: () => [0, 0]
|
|
17457
17509
|
}
|
|
17458
17510
|
};
|
|
17459
|
-
let scrollBarWidth;
|
|
17460
|
-
const getScrollBarWidth = () => {
|
|
17461
|
-
if (scrollBarWidth !== void 0) return scrollBarWidth;
|
|
17462
|
-
const outer = document.createElement("div");
|
|
17463
|
-
outer.className = "vc-scrollbar__wrap";
|
|
17464
|
-
outer.style.visibility = "hidden";
|
|
17465
|
-
outer.style.width = "100px";
|
|
17466
|
-
outer.style.position = "absolute";
|
|
17467
|
-
outer.style.top = "-9999px";
|
|
17468
|
-
document.body.appendChild(outer);
|
|
17469
|
-
const widthNoScroll = outer.offsetWidth;
|
|
17470
|
-
outer.style.overflow = "scroll";
|
|
17471
|
-
const inner = document.createElement("div");
|
|
17472
|
-
inner.style.width = "100%";
|
|
17473
|
-
outer.appendChild(inner);
|
|
17474
|
-
const widthWithScroll = inner.offsetWidth;
|
|
17475
|
-
outer.parentNode?.removeChild?.(outer);
|
|
17476
|
-
scrollBarWidth = widthNoScroll - widthWithScroll;
|
|
17477
|
-
return scrollBarWidth;
|
|
17478
|
-
};
|
|
17479
17511
|
const barKeys$1 = [
|
|
17480
17512
|
"always",
|
|
17481
17513
|
"thumbMinSize",
|
|
@@ -20630,7 +20662,7 @@
|
|
|
20630
20662
|
} else if (typeof wrapper === "string") {
|
|
20631
20663
|
scroller.value = document.querySelector(wrapper);
|
|
20632
20664
|
} else {
|
|
20633
|
-
scroller.value = getScroller(instance.vnode.el);
|
|
20665
|
+
scroller.value = getScroller$1(instance.vnode.el);
|
|
20634
20666
|
}
|
|
20635
20667
|
};
|
|
20636
20668
|
const initPlaceholder = () => {
|
|
@@ -22612,13 +22644,13 @@
|
|
|
22612
22644
|
"readonly": true,
|
|
22613
22645
|
"placeholder": its.value.attrs?.placeholder || "请选择"
|
|
22614
22646
|
}, {
|
|
22615
|
-
prepend: () => {
|
|
22616
|
-
|
|
22617
|
-
|
|
22618
|
-
|
|
22647
|
+
prepend: slots.prepend || props2.label ? () => {
|
|
22648
|
+
slots.prepend ? slots.prepend() : vue.createVNode("div", {
|
|
22649
|
+
"class": "vc-select__prepend"
|
|
22650
|
+
}, [vue.createVNode("span", {
|
|
22619
22651
|
"class": "vc-select__label"
|
|
22620
|
-
}, [props2.label]);
|
|
22621
|
-
},
|
|
22652
|
+
}, [props2.label])]);
|
|
22653
|
+
} : null,
|
|
22622
22654
|
content: multiple.value && currentValue.value && currentValue.value.length > 0 ? () => {
|
|
22623
22655
|
return vue.createVNode("div", {
|
|
22624
22656
|
"class": [classes.value, "vc-select__tags"]
|
|
@@ -27988,9 +28020,12 @@
|
|
|
27988
28020
|
barStyle: [Object, String],
|
|
27989
28021
|
contentStyle: [Object, String],
|
|
27990
28022
|
barClass: [Object, String],
|
|
27991
|
-
contentClass: [Object, String]
|
|
28023
|
+
contentClass: [Object, String],
|
|
28024
|
+
affixable: Boolean,
|
|
28025
|
+
affixOptions: Object
|
|
27992
28026
|
};
|
|
27993
28027
|
const useTabs = (options = {}) => {
|
|
28028
|
+
const affix = vue.inject("vc-affix", null);
|
|
27994
28029
|
const instance = vue.getCurrentInstance();
|
|
27995
28030
|
const { props: props2, emit } = instance;
|
|
27996
28031
|
const tabsId = vue.ref(getUid("tabs"));
|
|
@@ -28032,10 +28067,56 @@
|
|
|
28032
28067
|
[`is-${props2.theme}`]: !!props2.theme
|
|
28033
28068
|
};
|
|
28034
28069
|
});
|
|
28070
|
+
const hasAnchor = vue.computed(() => {
|
|
28071
|
+
return list.value.some((item) => !!item.anchor);
|
|
28072
|
+
});
|
|
28035
28073
|
const refresh = () => {
|
|
28036
28074
|
options?.refreshAfloat?.();
|
|
28037
28075
|
};
|
|
28038
|
-
|
|
28076
|
+
let scrollToAnchorTimer;
|
|
28077
|
+
const scrollToAnchor = (anchor) => {
|
|
28078
|
+
if (!anchor) return;
|
|
28079
|
+
const el2 = document.querySelector(anchor);
|
|
28080
|
+
if (!el2) return;
|
|
28081
|
+
const scroller = getScroller(instance.vnode.el);
|
|
28082
|
+
scrollIntoView(scroller, {
|
|
28083
|
+
duration: 250,
|
|
28084
|
+
from: scroller.scrollTop,
|
|
28085
|
+
to: scroller.scrollTop + el2.getBoundingClientRect().top - scroller.getBoundingClientRect().top - (!affix || affix.props.placement !== "bottom" ? instance.vnode.el.offsetHeight : 0) - (affix && affix.props.placement !== "bottom" ? affix.props.offset : 0)
|
|
28086
|
+
});
|
|
28087
|
+
scrollToAnchorTimer && clearTimeout(scrollToAnchorTimer);
|
|
28088
|
+
scrollToAnchorTimer = setTimeout(() => scrollToAnchorTimer = null, 300);
|
|
28089
|
+
};
|
|
28090
|
+
const handleAffixScroll = () => {
|
|
28091
|
+
if (!hasAnchor.value || scrollToAnchorTimer) return;
|
|
28092
|
+
const scroller = getScroller(instance.vnode.el);
|
|
28093
|
+
const scrollTop = scroller?.scrollTop;
|
|
28094
|
+
if (typeof scrollTop !== "number") return;
|
|
28095
|
+
for (let i = 0; i < list.value.length; i++) {
|
|
28096
|
+
const nav = list.value[i];
|
|
28097
|
+
const anchor = nav.anchor;
|
|
28098
|
+
if (!anchor) continue;
|
|
28099
|
+
const el2 = document.querySelector(anchor);
|
|
28100
|
+
if (!el2) continue;
|
|
28101
|
+
const elTop = el2.getBoundingClientRect().top - scroller.getBoundingClientRect().top + scroller.scrollTop;
|
|
28102
|
+
const nextNav = list.value[i + 1];
|
|
28103
|
+
let nextElTop;
|
|
28104
|
+
if (nextNav && nextNav.anchor) {
|
|
28105
|
+
const nextEl = document.querySelector(nextNav.anchor);
|
|
28106
|
+
if (nextEl) {
|
|
28107
|
+
nextElTop = nextEl.getBoundingClientRect().top - scroller.getBoundingClientRect().top + scroller.scrollTop;
|
|
28108
|
+
}
|
|
28109
|
+
}
|
|
28110
|
+
const allowDistance = 2;
|
|
28111
|
+
if (scrollTop >= elTop - allowDistance && (typeof nextElTop === "undefined" || scrollTop < nextElTop - allowDistance)) {
|
|
28112
|
+
if (getTabIndex(currentValue.value) !== i) {
|
|
28113
|
+
handleChange(i, false);
|
|
28114
|
+
}
|
|
28115
|
+
break;
|
|
28116
|
+
}
|
|
28117
|
+
}
|
|
28118
|
+
};
|
|
28119
|
+
const handleChange = (index, scrollTo = true) => {
|
|
28039
28120
|
if (timer.value) return;
|
|
28040
28121
|
timer.value = setTimeout(() => timer.value = null, 300);
|
|
28041
28122
|
const nav = list.value[index];
|
|
@@ -28044,7 +28125,7 @@
|
|
|
28044
28125
|
emit("update:modelValue", currentValue.value);
|
|
28045
28126
|
emit("change", currentValue.value);
|
|
28046
28127
|
emit("click", currentValue.value);
|
|
28047
|
-
|
|
28128
|
+
scrollTo && scrollToAnchor(nav.anchor);
|
|
28048
28129
|
};
|
|
28049
28130
|
const handleResize = () => {
|
|
28050
28131
|
if (instance.isUnmounted) return;
|
|
@@ -28054,10 +28135,13 @@
|
|
|
28054
28135
|
vue.onMounted(() => {
|
|
28055
28136
|
Resize.on(options.wrapper.value, handleResize);
|
|
28056
28137
|
options.scrollToActive && vue.nextTick(options.scrollToActive);
|
|
28138
|
+
affix?.onScroll?.(handleAffixScroll);
|
|
28057
28139
|
});
|
|
28058
28140
|
vue.onBeforeUnmount(() => {
|
|
28059
28141
|
Resize.off(options.wrapper.value, handleResize);
|
|
28060
28142
|
timer.value && clearTimeout(timer.value);
|
|
28143
|
+
affix?.offScroll?.(handleAffixScroll);
|
|
28144
|
+
scrollToAnchorTimer && clearTimeout(scrollToAnchorTimer);
|
|
28061
28145
|
});
|
|
28062
28146
|
const add = (item, setValue) => {
|
|
28063
28147
|
if (!item) return;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@deot/vc",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.48",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"main": "dist/index.js",
|
|
6
6
|
"types": "dist/index.d.ts",
|
|
@@ -19,9 +19,9 @@
|
|
|
19
19
|
"access": "public"
|
|
20
20
|
},
|
|
21
21
|
"dependencies": {
|
|
22
|
-
"@deot/vc-components": "^1.0.
|
|
23
|
-
"@deot/vc-hooks": "^1.0.
|
|
24
|
-
"@deot/vc-shared": "^1.0.
|
|
22
|
+
"@deot/vc-components": "^1.0.48",
|
|
23
|
+
"@deot/vc-hooks": "^1.0.48",
|
|
24
|
+
"@deot/vc-shared": "^1.0.48"
|
|
25
25
|
},
|
|
26
26
|
"peerDependencies": {
|
|
27
27
|
"vue": "*"
|