@web-utils/form-ui 1.0.0-beta57 → 1.0.0-beta59

package/swiper/index.mjs

@@ -0,0 +1,126 @@
+import { t as e } from "../chunks/BwYEpK-u.mjs";
+import t from "../element-resize-observer/index.mjs";
+import { t as n } from "../chunks/DhQF2ZlD.mjs";
+import { createElementBlock as r, createElementVNode as i, createVNode as a, normalizeStyle as o, openBlock as s, renderSlot as c, withModifiers as l } from "vue";
+import { getEleWidth as u } from "@web-utils/core";
+//#region src/components/Swiper.vue
+var d = {
+	name: "Swiper",
+	data() {
+		return {
+			mouseDown: !1,
+			swiperBoxWith: 0,
+			swiperContentWidth: 0,
+			translateX: 0,
+			reachedLeft: !0,
+			reachedRight: !1,
+			childrenWidth: [],
+			swiperContentStyle: {
+				transitionDuration: "0ms",
+				transform: "translate3d(0px, 0px, 0px)"
+			}
+		};
+	},
+	async mounted() {
+		await this.layout();
+	},
+	updated() {
+		this.computeContentWidth();
+	},
+	methods: {
+		async layout() {
+			await this.$nextTick(), this.computeContentWidth(), this.resize();
+		},
+		resize() {
+			this.swiperBoxWith = this.$refs.swiperBox.offsetWidth;
+		},
+		computeContentWidth() {
+			let e = 0, t = [], { children: n } = this.$refs.swiperContent;
+			Array.prototype.forEach.call(n, (n) => {
+				let r = u(n);
+				e += r, t.push(r);
+			}), this.childrenWidth = t, this.swiperContentWidth = e;
+		},
+		updateDuration(e) {
+			this.swiperContentStyle.transitionDuration = e ? "300ms" : "0ms";
+		},
+		setTranslateX(e) {
+			this.swiperContentWidth <= this.swiperBoxWith || (e > 0 ? (this.translateX = 0, this.reachedLeft = !0, this.reachedRight = !1) : e - this.swiperBoxWith < -this.swiperContentWidth ? (this.translateX = -this.swiperContentWidth + this.swiperBoxWith, this.reachedLeft = !1, this.reachedRight = !0) : (this.translateX = e, this.reachedLeft = !1, this.reachedRight = !1), this.swiperContentStyle.transform = `translate3d(${this.translateX}px, 0px, 0px)`);
+		},
+		clickLeft() {
+			this.updateDuration(!0);
+			let e = this.translateX + this.swiperBoxWith, t = e;
+			if (e < 0) {
+				t = 0, e = -e;
+				for (let n = 0, r = this.childrenWidth.length; n < r && (t += this.childrenWidth[n], !(t >= e)); n++);
+				t = -t;
+			}
+			this.setTranslateX(t);
+		},
+		clickRight() {
+			this.updateDuration(!0);
+			let e = Math.abs(this.translateX - this.swiperBoxWith), t = 0;
+			for (let n = 0, r = this.childrenWidth.length; n < r; n++) if (t += this.childrenWidth[n], t >= e) {
+				t > e && (t -= this.childrenWidth[n]);
+				break;
+			}
+			this.setTranslateX(-t);
+		},
+		onMouseWheel(e) {
+			this.updateDuration(!0), e.deltaMode === WheelEvent.DOM_DELTA_LINE ? this.setTranslateX(this.translateX - e.deltaY * 30) : e.deltaMode === WheelEvent.DOM_DELTA_PAGE ? e.deltaY > 0 ? this.clickRight() : this.clickLeft() : this.setTranslateX(this.translateX - e.deltaY);
+		},
+		onMouseDown(e) {
+			this.mouseDown = !0, this.startX = e.clientX, this.translateXRaw = this.translateX, window.addEventListener("mousemove", this.onMouseMove, { passive: !1 }), window.addEventListener("mouseup", this.onMouseUp, { passive: !1 });
+		},
+		onMouseUp(e) {
+			this.mouseDown = !1, this.updateDuration(!0), this.$refs.swiperContent.addEventListener("transitionend", this.transitionend), this.$refs.swiperContent.addEventListener("webkitTransitionEnd", this.transitionend);
+			let t = e.clientX - this.startX;
+			if (t < 0) {
+				let e = this.translateX + t;
+				this.setTranslateX(e);
+			}
+			if (t > 0) {
+				let e = this.translateX + t;
+				this.setTranslateX(e);
+			}
+			window.removeEventListener("mousemove", this.onMouseMove), window.removeEventListener("mouseup", this.onMouseUp);
+		},
+		onMouseMove(e) {
+			this.mouseDown && requestAnimationFrame(() => {
+				let t = e.clientX - this.startX, n = this.translateXRaw + t;
+				this.setTranslateX(n);
+			});
+		},
+		transitionend() {
+			this.updateDuration(!1), this.$refs.swiperContent.removeEventListener("transitionend", this.transitionend), this.$refs.swiperContent.removeEventListener("webkitTransitionEnd", this.transitionend);
+		}
+	}
+}, f = { class: "fy-swiper" };
+function p(e, u, d, p, m, h) {
+	let g = n, _ = t;
+	return s(), r("div", f, [
+		a(g, {
+			disabled: m.reachedLeft,
+			icon: "el-icon-arrow-left",
+			onClick: h.clickLeft
+		}, null, 8, ["disabled", "onClick"]),
+		i("div", {
+			ref: "swiperBox",
+			class: "fy-swiper-box",
+			onWheel: u[0] || (u[0] = l((...e) => h.onMouseWheel && h.onMouseWheel(...e), ["stop", "prevent"]))
+		}, [i("div", {
+			ref: "swiperContent",
+			class: "fy-swiper-content",
+			style: o(m.swiperContentStyle)
+		}, [c(e.$slots, "default")], 4)], 544),
+		a(g, {
+			disabled: m.reachedRight,
+			icon: "el-icon-arrow-right",
+			onClick: h.clickRight
+		}, null, 8, ["disabled", "onClick"]),
+		a(_, { onNotify: h.resize }, null, 8, ["onNotify"])
+	]);
+}
+var m = /* @__PURE__ */ e(d, [["render", p]]);
+//#endregion
+export { m as default };

package/swiper/style.css

@@ -0,0 +1 @@
+.fy-swiper{align-items:center;width:100%;display:flex;position:relative}.fy-swiper .fy-swiper-box{-webkit-user-select:none;user-select:none;flex:auto;height:100%;overflow:hidden}.fy-swiper .fy-swiper-box .fy-swiper-content{flex-flow:row;width:100%;height:100%;transition-property:transform;display:flex;overflow:visible;transform:translate(0,0)}