v12 (#5712)

Co-authored-by: MeiMei <30769358+mei23@users.noreply.github.com>
Co-authored-by: Satsuki Yanagi <17376330+u1-liquid@users.noreply.github.com>

src/client/directives/size.ts

@@ -0,0 +1,63 @@
+export default {
+	inserted(el, binding) {
+		const query = binding.value;
+
+		/*
+		const addClassRecursive = (el: Element, cls: string) => {
+			el.classList.add(cls);
+			if (el.children) {
+				for (const child of el.children) {
+					addClassRecursive(child, cls);
+				}
+			}
+		};
+
+		const removeClassRecursive = (el: Element, cls: string) => {
+			el.classList.remove(cls);
+			if (el.children) {
+				for (const child of el.children) {
+					removeClassRecursive(child, cls);
+				}
+			}
+		};*/
+
+		const addClass = (el: Element, cls: string) => {
+			el.classList.add(cls);
+		};
+
+		const removeClass = (el: Element, cls: string) => {
+			el.classList.remove(cls);
+		};
+
+		const calc = () => {
+			const width = el.clientWidth;
+			
+			for (const q of query) {
+				if (q.max) {
+					if (width <= q.max) {
+						addClass(el, 'max-width_' + q.max + 'px');
+					} else {
+						removeClass(el, 'max-width_' + q.max + 'px');
+					}
+				}
+				if (q.min) {
+					if (width >= q.min) {
+						addClass(el, 'min-width_' + q.min + 'px');
+					} else {
+						removeClass(el, 'min-width_' + q.min + 'px');
+					}
+				}
+			}
+		};
+
+		calc();
+
+		el._sizeResizeCb_ = calc;
+
+		window.addEventListener('resize', calc);
+	},
+
+	unbind(el, binding, vn) {
+		window.removeEventListener('resize', el._sizeResizeCb_);
+	}
+};