@mantine-vue/hooks 3.0.0 → 3.2.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.
package/esm/index.mjs
CHANGED
|
@@ -1005,7 +1005,7 @@ function range$1(start, end) {
|
|
|
1005
1005
|
}
|
|
1006
1006
|
function usePagination({ total, siblings = 1, boundaries = 1, page, initialPage, onChange, startValue = 1 }) {
|
|
1007
1007
|
const start = computed(() => Math.max(Math.trunc(startValue), 1));
|
|
1008
|
-
const end = computed(() => Math.max(Math.trunc(total), start.value));
|
|
1008
|
+
const end = computed(() => Math.max(Math.trunc(toValue(total)), start.value));
|
|
1009
1009
|
const totalPages = computed(() => end.value - start.value + 1);
|
|
1010
1010
|
const firstPage = computed(() => initialPage ?? start.value);
|
|
1011
1011
|
const [active, setActive] = useUncontrolled({
|
|
@@ -3041,6 +3041,8 @@ function getCssSize(size) {
|
|
|
3041
3041
|
}
|
|
3042
3042
|
function createCollapse({ dimension, getElementSize, expanded, transitionDuration, transitionTimingFunction = "ease", onTransitionEnd, onTransitionStart, keepMounted }) {
|
|
3043
3043
|
const isExpanded = () => toValue(expanded);
|
|
3044
|
+
const getTransitionDuration = () => toValue(transitionDuration);
|
|
3045
|
+
const getTransitionTimingFunction = () => toValue(transitionTimingFunction) ?? "ease";
|
|
3044
3046
|
const collapsedStyles = {
|
|
3045
3047
|
[dimension]: 0,
|
|
3046
3048
|
overflow: "hidden",
|
|
@@ -3069,12 +3071,12 @@ function createCollapse({ dimension, getElementSize, expanded, transitionDuratio
|
|
|
3069
3071
|
});
|
|
3070
3072
|
};
|
|
3071
3073
|
const getTransitionStyles = (size) => {
|
|
3072
|
-
const duration =
|
|
3073
|
-
return { transition: `${dimension} ${duration}ms ${
|
|
3074
|
+
const duration = getTransitionDuration() ?? getAutoSizeDuration(size);
|
|
3075
|
+
return { transition: `${dimension} ${duration}ms ${getTransitionTimingFunction()}, opacity ${duration}ms ${getTransitionTimingFunction()}` };
|
|
3074
3076
|
};
|
|
3075
3077
|
watch(() => isExpanded(), (value, oldValue) => {
|
|
3076
3078
|
if (value === oldValue) return;
|
|
3077
|
-
if (
|
|
3079
|
+
if (getTransitionDuration() !== 0) onTransitionStart?.();
|
|
3078
3080
|
if (value) raf(() => {
|
|
3079
3081
|
state.value = "entering";
|
|
3080
3082
|
mergeStyles({
|