@v-c/slick 0.0.1 → 1.0.1

package/dist/Arrows.js

@@ -29,7 +29,7 @@ var PrevArrow = /* @__PURE__ */ defineComponent((props) => {
 			currentSlide: props.currentSlide,
 			slideCount: props.slideCount
 		};
-		if (props.prevArrow && isVNode(props.prevArrow)) return createVNode(props.prevArrow, {
+		if (props.prevArrow && isVNode(props.prevArrow)) return cloneVNode(props.prevArrow, {
 			...prevArrowProps,
 			...customProps
 		});

package/dist/InnerSlider.js

@@ -6,7 +6,7 @@ import initial_state_default from "./initial-state.js";
 import Track_default from "./Track.js";
 import { computed, createVNode, defineComponent, mergeDefaults, mergeProps, nextTick, onBeforeUnmount, onMounted, onUpdated, reactive, shallowRef, watch } from "vue";
 import { clsx } from "@v-c/util";
-import { filterEmpty, getStylePxValue } from "@v-c/util/dist/props-util";
+import { filterEmpty } from "@v-c/util/dist/props-util";
 import { toArray } from "@v-c/util/dist/Children/toArray";
 import { debounce } from "es-toolkit";
 var InnerSlider_default = /* @__PURE__ */ defineComponent((props, { slots, expose }) => {
@@ -66,24 +66,23 @@ var InnerSlider_default = /* @__PURE__ */ defineComponent((props, { slots, expos
 		if (setTrackStyle) updatedState.trackStyle = trackStyle;
 		setState(updatedState, callback);
 	};
-	const ssrInit = () => {
-		if (latestChildrenCount === 0) return {};
+	const getSsrState = (children, slideCount) => {
+		if (slideCount === 0) return {};
 		if (mergedProps.value.variableWidth) {
 			let trackWidth$1 = 0;
 			let trackLeft$1 = 0;
 			const childrenWidths = [];
-			const slideCount$1 = latestChildrenCount;
 			const preClones = getPreClones({
 				...mergedProps.value,
 				...state,
-				slideCount: slideCount$1
+				slideCount
 			});
 			const postClones = getPostClones({
 				...mergedProps.value,
 				...state,
-				slideCount: slideCount$1
+				slideCount
 			});
-			latestChildren.forEach((child) => {
+			children.forEach((child) => {
 				const width = child?.props?.style?.width;
 				const widthValue = typeof width === "number" ? width : Number.parseFloat(String(width)) || 0;
 				childrenWidths.push(widthValue);
@@ -105,7 +104,6 @@ var InnerSlider_default = /* @__PURE__ */ defineComponent((props, { slots, expos
 			}
 			return { trackStyle: trackStyle$1 };
 		}
-		const slideCount = latestChildrenCount;
 		const spec = {
 			...mergedProps.value,
 			...state,
@@ -125,6 +123,9 @@ var InnerSlider_default = /* @__PURE__ */ defineComponent((props, { slots, expos
 			trackStyle
 		};
 	};
+	const ssrInit = () => {
+		return getSsrState(latestChildren, latestChildrenCount);
+	};
 	Object.assign(state, ssrInit());
 	const checkImagesLoad = () => {
 		const listNode = listRef.value;
@@ -482,6 +483,7 @@ var InnerSlider_default = /* @__PURE__ */ defineComponent((props, { slots, expos
 		const renderChildren = resolveChildren();
 		latestChildren = renderChildren;
 		latestChildrenCount = renderChildren.length;
+		const fallbackSsrState = state.trackStyle ? null : getSsrState(renderChildren, latestChildrenCount);
 		const className = clsx("slick-slider", mergedProps.value.className, {
 			"slick-vertical": mergedProps.value.vertical,
 			"slick-initialized": true
@@ -489,6 +491,7 @@ var InnerSlider_default = /* @__PURE__ */ defineComponent((props, { slots, expos
 		const spec = {
 			...mergedProps.value,
 			...state,
+			...fallbackSsrState || {},
 			slideCount: latestChildrenCount,
 			children: renderChildren
 		};
@@ -566,7 +569,7 @@ var InnerSlider_default = /* @__PURE__ */ defineComponent((props, { slots, expos
 			nextArrow = createVNode(NextArrow, arrowProps, null);
 		}
 		let verticalHeightStyle = null;
-		if (mergedProps.value.vertical) verticalHeightStyle = { height: getStylePxValue(state.listHeight) };
+		if (mergedProps.value.vertical) verticalHeightStyle = { height: state.listHeight };
 		let centerPaddingStyle = null;
 		if (mergedProps.value.vertical === false) {
 			if (mergedProps.value.centerMode === true) centerPaddingStyle = { padding: `0px ${mergedProps.value.centerPadding}` };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@v-c/slick",
   "type": "module",
-  "version": "0.0.1",
+  "version": "1.0.1",
   "description": "",
   "publishConfig": {
     "access": "public"
@@ -10,7 +10,7 @@
     ".": {
       "types": "./dist/index.d.ts",
       "import": "./dist/index.js",
-      "require": "./dist/index.cjs"
+      "default": "./dist/index.js"
     },
     "./dist/*": "./dist/*",
     "./package.json": "./package.json"
@@ -25,7 +25,7 @@
   },
   "dependencies": {
     "es-toolkit": "^1.43.0",
-    "@v-c/util": "^1.0.4"
+    "@v-c/util": "^1.0.17"
   },
   "devDependencies": {},
   "scripts": {

package/dist/Arrows.cjs

@@ -1,186 +0,0 @@
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const require_innerSliderUtils = require("./utils/innerSliderUtils.cjs");
-let vue = require("vue");
-let _v_c_util = require("@v-c/util");
-var PrevArrow = /* @__PURE__ */ (0, vue.defineComponent)((props) => {
-	const clickHandler = (options, e) => {
-		e?.preventDefault();
-		props.clickHandler?.(options, e);
-	};
-	return () => {
-		const prevClasses = {
-			"slick-arrow": true,
-			"slick-prev": true
-		};
-		let prevHandler = (e) => {
-			clickHandler({ message: "previous" }, e);
-		};
-		if (!props.infinite && (props.currentSlide === 0 || props.slideCount <= props.slidesToShow)) {
-			prevClasses["slick-disabled"] = true;
-			prevHandler = void 0;
-		}
-		const prevArrowProps = {
-			"key": "0",
-			"data-role": "none",
-			"class": (0, _v_c_util.clsx)(prevClasses),
-			"style": { display: "block" },
-			"onClick": prevHandler
-		};
-		const customProps = {
-			currentSlide: props.currentSlide,
-			slideCount: props.slideCount
-		};
-		if (props.prevArrow && (0, vue.isVNode)(props.prevArrow)) return (0, vue.createVNode)(props.prevArrow, {
-			...prevArrowProps,
-			...customProps
-		});
-		return (0, vue.createVNode)("button", (0, vue.mergeProps)({ "type": "button" }, prevArrowProps), [(0, vue.createTextVNode)("Previous")]);
-	};
-}, { props: {
-	infinite: {
-		type: Boolean,
-		required: false,
-		default: void 0
-	},
-	centerMode: {
-		type: Boolean,
-		required: false,
-		default: void 0
-	},
-	currentSlide: {
-		type: Number,
-		required: true,
-		default: void 0
-	},
-	slideCount: {
-		type: Number,
-		required: true,
-		default: void 0
-	},
-	slidesToShow: {
-		type: Number,
-		required: true,
-		default: void 0
-	},
-	prevArrow: {
-		type: [
-			Object,
-			String,
-			Number,
-			Boolean,
-			null,
-			Array
-		],
-		required: false,
-		default: void 0
-	},
-	nextArrow: {
-		type: [
-			Object,
-			String,
-			Number,
-			Boolean,
-			null,
-			Array
-		],
-		required: false,
-		default: void 0
-	},
-	clickHandler: {
-		type: Function,
-		required: false,
-		default: void 0
-	}
-} });
-var NextArrow = /* @__PURE__ */ (0, vue.defineComponent)((props) => {
-	const clickHandler = (options, e) => {
-		e?.preventDefault();
-		props.clickHandler?.(options, e);
-	};
-	return () => {
-		const nextClasses = {
-			"slick-arrow": true,
-			"slick-next": true
-		};
-		let nextHandler = (e) => {
-			clickHandler({ message: "next" }, e);
-		};
-		if (!require_innerSliderUtils.canGoNext(props)) {
-			nextClasses["slick-disabled"] = true;
-			nextHandler = void 0;
-		}
-		const nextArrowProps = {
-			"key": "1",
-			"data-role": "none",
-			"class": (0, _v_c_util.clsx)(nextClasses),
-			"style": { display: "block" },
-			"onClick": nextHandler
-		};
-		const customProps = {
-			currentSlide: props.currentSlide,
-			slideCount: props.slideCount
-		};
-		if (props.nextArrow && (0, vue.isVNode)(props.nextArrow)) return (0, vue.cloneVNode)(props.nextArrow, {
-			...nextArrowProps,
-			...customProps
-		});
-		return (0, vue.createVNode)("button", (0, vue.mergeProps)({ "type": "button" }, nextArrowProps), [(0, vue.createTextVNode)("Next")]);
-	};
-}, { props: {
-	infinite: {
-		type: Boolean,
-		required: false,
-		default: void 0
-	},
-	centerMode: {
-		type: Boolean,
-		required: false,
-		default: void 0
-	},
-	currentSlide: {
-		type: Number,
-		required: true,
-		default: void 0
-	},
-	slideCount: {
-		type: Number,
-		required: true,
-		default: void 0
-	},
-	slidesToShow: {
-		type: Number,
-		required: true,
-		default: void 0
-	},
-	prevArrow: {
-		type: [
-			Object,
-			String,
-			Number,
-			Boolean,
-			null,
-			Array
-		],
-		required: false,
-		default: void 0
-	},
-	nextArrow: {
-		type: [
-			Object,
-			String,
-			Number,
-			Boolean,
-			null,
-			Array
-		],
-		required: false,
-		default: void 0
-	},
-	clickHandler: {
-		type: Function,
-		required: false,
-		default: void 0
-	}
-} });
-exports.NextArrow = NextArrow;
-exports.PrevArrow = PrevArrow;

package/dist/Dots.cjs

@@ -1,124 +0,0 @@
-Object.defineProperties(exports, {
-	__esModule: { value: true },
-	[Symbol.toStringTag]: { value: "Module" }
-});
-const require_default_props = require("./default-props.cjs");
-const require_innerSliderUtils = require("./utils/innerSliderUtils.cjs");
-let vue = require("vue");
-let _v_c_util = require("@v-c/util");
-function getDotCount(spec) {
-	if (spec.infinite) return Math.ceil(spec.slideCount / spec.slidesToScroll);
-	return Math.ceil((spec.slideCount - spec.slidesToShow) / spec.slidesToScroll) + 1;
-}
-var Dots = /* @__PURE__ */ (0, vue.defineComponent)((props) => {
-	const getCustomPaging = props.customPaging ?? require_default_props.default.customPaging ?? ((index) => (0, vue.createVNode)("button", { "type": "button" }, [index + 1]));
-	const appendDots = props.appendDots ?? require_default_props.default.appendDots ?? ((dots) => (0, vue.createVNode)("ul", { "style": { display: "block" } }, [dots]));
-	const clickHandler = (options, e) => {
-		e?.preventDefault();
-		props.clickHandler?.(options, e);
-	};
-	return () => {
-		const { onMouseEnter, onMouseOver, onMouseLeave, infinite, slidesToScroll, slidesToShow, slideCount, currentSlide } = props;
-		const dotCount = getDotCount({
-			slideCount,
-			slidesToScroll,
-			slidesToShow,
-			infinite
-		});
-		const dots = [];
-		for (let i = 0; i < dotCount; i += 1) {
-			const _rightBound = (i + 1) * slidesToScroll - 1;
-			const rightBound = infinite ? _rightBound : require_innerSliderUtils.clamp(_rightBound, 0, slideCount - 1);
-			const _leftBound = rightBound - (slidesToScroll - 1);
-			const leftBound = infinite ? _leftBound : require_innerSliderUtils.clamp(_leftBound, 0, slideCount - 1);
-			const className = (0, _v_c_util.clsx)({ "slick-active": infinite ? currentSlide >= leftBound && currentSlide <= rightBound : currentSlide === leftBound });
-			const dotOptions = {
-				message: "dots",
-				index: i,
-				slidesToScroll,
-				currentSlide
-			};
-			const onClick = (e) => clickHandler(dotOptions, e);
-			const paging = getCustomPaging(i);
-			const content = (0, vue.isVNode)(paging) ? (0, vue.cloneVNode)(paging, { onClick }) : (0, vue.createVNode)("button", {
-				"type": "button",
-				"onClick": onClick
-			}, [i + 1]);
-			dots.push((0, vue.createVNode)("li", {
-				"key": i,
-				"class": className
-			}, [content]));
-		}
-		const dotsNode = appendDots(dots);
-		if ((0, vue.isVNode)(dotsNode)) return (0, vue.cloneVNode)(dotsNode, {
-			class: props.dotsClass,
-			onMouseenter: onMouseEnter,
-			onMouseover: onMouseOver,
-			onMouseleave: onMouseLeave
-		});
-		return dotsNode;
-	};
-}, { props: {
-	dotsClass: {
-		type: String,
-		required: true,
-		default: void 0
-	},
-	slideCount: {
-		type: Number,
-		required: true,
-		default: void 0
-	},
-	slidesToShow: {
-		type: Number,
-		required: true,
-		default: void 0
-	},
-	currentSlide: {
-		type: Number,
-		required: true,
-		default: void 0
-	},
-	slidesToScroll: {
-		type: Number,
-		required: true,
-		default: void 0
-	},
-	clickHandler: {
-		type: Function,
-		required: false,
-		default: void 0
-	},
-	customPaging: {
-		type: Function,
-		required: false,
-		default: void 0
-	},
-	infinite: {
-		type: Boolean,
-		required: false,
-		default: void 0
-	},
-	appendDots: {
-		type: Function,
-		required: false,
-		default: void 0
-	},
-	onMouseEnter: {
-		type: Function,
-		required: false,
-		default: void 0
-	},
-	onMouseOver: {
-		type: Function,
-		required: false,
-		default: void 0
-	},
-	onMouseLeave: {
-		type: Function,
-		required: false,
-		default: void 0
-	}
-} });
-var Dots_default = Dots;
-exports.default = Dots_default;