@zboson/ui 0.0.0-stage → 0.0.1

package/dist/form/utils/validateUtil.js

@@ -0,0 +1,154 @@
+import { defaultValidateMessages } from "./messages.js";
+import { createVNode, isVNode } from "vue";
+import { warning } from "@v-c/util/dist/warning";
+import { merge } from "@v-c/util/dist/utils/set";
+import RawAsyncValidator from "@v-c/async-validator";
+//#region src/form/utils/validateUtil.ts
+const AsyncValidator = RawAsyncValidator;
+/**
+* Replace with template.
+*   `I'm ${name}` + { name: 'bamboo' } = I'm bamboo
+*/
+function replaceMessage(template, kv) {
+	return template.replace(/\\?\$\{\w+\}/g, (str) => {
+		if (str.startsWith("\\")) return str.slice(1);
+		return kv[str.slice(2, -1)];
+	});
+}
+const CODE_LOGIC_ERROR = "CODE_LOGIC_ERROR";
+const CODE_FUNCTION_MESSAGE = "CODE_FUNCTION_MESSAGE";
+async function validateRule(name, value, rule, options, messageVariables) {
+	const cloneRule = { ...rule };
+	delete cloneRule.ruleIndex;
+	delete cloneRule.trigger;
+	delete cloneRule.validateTrigger;
+	AsyncValidator.warning = () => void 0;
+	const functionMessage = typeof cloneRule.message === "function" ? cloneRule.message : null;
+	if (functionMessage) cloneRule.message = CODE_FUNCTION_MESSAGE;
+	if (cloneRule.validator) {
+		const originValidator = cloneRule.validator;
+		cloneRule.validator = (...args) => {
+			try {
+				return originValidator(...args);
+			} catch (error) {
+				console.error(error);
+				return Promise.reject(CODE_LOGIC_ERROR);
+			}
+		};
+	}
+	let subRuleField = null;
+	if (cloneRule && cloneRule.type === "array" && cloneRule.defaultField) {
+		subRuleField = cloneRule.defaultField;
+		delete cloneRule.defaultField;
+	}
+	const validator = new AsyncValidator({ [name]: [cloneRule] });
+	const messages = merge(defaultValidateMessages, options.validateMessages);
+	validator.messages(messages);
+	let result = [];
+	try {
+		await Promise.resolve(validator.validate({ [name]: value }, { ...options }));
+	} catch (errObj) {
+		if (errObj.errors) result = errObj.errors.map(({ message }, index) => {
+			if (functionMessage && message === CODE_FUNCTION_MESSAGE) return functionMessage;
+			const mergedMessage = message === CODE_LOGIC_ERROR ? messages.default : message;
+			return isVNode(mergedMessage) ? createVNode(mergedMessage, { key: `error_${index}` }) : mergedMessage;
+		});
+	}
+	if (!result.length && subRuleField && Array.isArray(value) && value.length > 0) return (await Promise.all(value.map((subValue, i) => validateRule(`${name}.${i}`, subValue, subRuleField, options, messageVariables)))).reduce((prev, errors) => [...prev, ...errors], []);
+	const kv = {
+		...rule,
+		name,
+		label: messageVariables && messageVariables.label ? messageVariables.label : name,
+		enum: (rule.enum || []).join(", "),
+		...messageVariables
+	};
+	return result.map((error) => {
+		if (typeof error === "string") return replaceMessage(error, kv);
+		return error;
+	});
+}
+/**
+* We use `async-validator` to validate the value.
+* But only check one value in a time to avoid namePath validate issue.
+*/
+function validateRules(namePath, value, rules, options, validateFirst, messageVariables) {
+	const name = namePath.join(".");
+	const filledRules = rules.map((currentRule, ruleIndex) => {
+		const originValidatorFunc = currentRule.validator;
+		const cloneRule = {
+			...currentRule,
+			ruleIndex
+		};
+		if (originValidatorFunc) cloneRule.validator = (rule, val, callback) => {
+			let hasPromise = false;
+			const wrappedCallback = (...args) => {
+				Promise.resolve().then(() => {
+					warning(!hasPromise, "Your validator function has already return a promise. `callback` will be ignored.");
+					if (!hasPromise) callback(...args);
+				});
+			};
+			const promise = originValidatorFunc(rule, val, wrappedCallback);
+			hasPromise = promise && typeof promise.then === "function" && typeof promise.catch === "function";
+			/**
+			* 1. Use promise as the first priority.
+			* 2. If promise not exist, use callback with warning instead
+			*/
+			warning(hasPromise, "`callback` is deprecated. Please return a promise instead.");
+			if (hasPromise) promise.then(() => {
+				callback();
+			}).catch((err) => {
+				callback(err || " ");
+			});
+		};
+		return cloneRule;
+	}).sort(({ warningOnly: w1, ruleIndex: i1 }, { warningOnly: w2, ruleIndex: i2 }) => {
+		if (!!w1 === !!w2) return i1 - i2;
+		if (w1) return 1;
+		return -1;
+	});
+	let summaryPromise;
+	if (validateFirst === true) summaryPromise = new Promise(async (resolve, reject) => {
+		for (let i = 0; i < filledRules.length; i += 1) {
+			const rule = filledRules[i];
+			const errors = await validateRule(name, value, rule, options, messageVariables);
+			if (errors.length) {
+				reject([{
+					errors,
+					rule
+				}]);
+				return;
+			}
+		}
+		resolve([]);
+	});
+	else {
+		const rulePromises = filledRules.map((rule) => validateRule(name, value, rule, options, messageVariables).then((errors) => ({
+			errors,
+			rule
+		})));
+		summaryPromise = (validateFirst ? finishOnFirstFailed(rulePromises) : finishOnAllFailed(rulePromises)).then((errors) => {
+			return Promise.reject(errors);
+		});
+	}
+	summaryPromise.catch((e) => e);
+	return summaryPromise;
+}
+async function finishOnAllFailed(rulePromises) {
+	return Promise.all(rulePromises).then((errorsList) => {
+		return [].concat(...errorsList);
+	});
+}
+async function finishOnFirstFailed(rulePromises) {
+	let count = 0;
+	return new Promise((resolve) => {
+		rulePromises.forEach((promise) => {
+			promise.then((ruleError) => {
+				if (ruleError.errors.length) resolve([ruleError]);
+				count += 1;
+				if (count === rulePromises.length) resolve([]);
+			});
+		});
+	});
+}
+//#endregion
+export { validateRules };

package/dist/form/utils/valueUtil.d.ts

@@ -0,0 +1,49 @@
+import { EventArgs, InternalNamePath, NamePath, Store } from "../types.js";
+import getValue from "@v-c/util/dist/utils/get";
+import setValue from "@v-c/util/dist/utils/set";
+//#region src/form/utils/valueUtil.d.ts
+/**
+ * Convert name to internal supported format.
+ * Support formats:
+ * 'a' => ['a']
+ * 'a.b.c' => ['a', 'b', 'c']
+ * 123 => [123]
+ * ['a', 123] => ['a', 123]
+ * ['a', 'b', 'c'] => ['a', 'b', 'c']
+ */
+declare function getNamePath(path: NamePath | null): InternalNamePath;
+/**
+ * Create a new store object that contains only the values referenced by
+ * the provided list of name paths.
+ */
+declare function cloneByNamePathList(store: Store, namePathList: InternalNamePath[]): Store;
+/**
+ * Check if `namePathList` includes `namePath`.
+ * @param namePathList A list of `InternalNamePath[]`
+ * @param namePath Compare `InternalNamePath`
+ * @param partialMatch True will make `[a, b]` match `[a, b, c]`
+ */
+declare function containsNamePath(namePathList: InternalNamePath[], namePath: InternalNamePath, partialMatch?: boolean): boolean;
+/**
+ * Check if `namePath` is super set or equal of `subNamePath`.
+ * @param namePath A list of `InternalNamePath[]`
+ * @param subNamePath Compare `InternalNamePath`
+ * @param partialMatch True will make `[a, b]` match `[a, b, c]`
+ */
+declare function matchNamePath(namePath: InternalNamePath, subNamePath: InternalNamePath | null, partialMatch?: boolean): boolean;
+type SimilarObject = string | number | object;
+declare function isSimilar(source: SimilarObject, target: SimilarObject): boolean;
+declare function defaultGetValueFromEvent(valuePropName: string, ...args: EventArgs): any;
+/**
+ * Moves an array item from one position in an array to another.
+ *
+ * Note: This is a pure function so a new array will be returned, instead
+ * of altering the array argument.
+ *
+ * @param array         Array in which to move an item.         (required)
+ * @param moveIndex     The index of the item to move.          (required)
+ * @param toIndex       The index to move item at moveIndex to. (required)
+ */
+declare function move<T>(array: T[], moveIndex: number, toIndex: number): (T | undefined)[];
+//#endregion
+export { cloneByNamePathList, containsNamePath, defaultGetValueFromEvent, getNamePath, getValue, isSimilar, matchNamePath, move, setValue };

package/dist/form/utils/valueUtil.js

@@ -0,0 +1,98 @@
+import { toArray } from "./typeUtil.js";
+import getValue from "@v-c/util/dist/utils/get";
+import setValue from "@v-c/util/dist/utils/set";
+//#region src/form/utils/valueUtil.ts
+/**
+* Convert name to internal supported format.
+* Support formats:
+* 'a' => ['a']
+* 'a.b.c' => ['a', 'b', 'c']
+* 123 => [123]
+* ['a', 123] => ['a', 123]
+* ['a', 'b', 'c'] => ['a', 'b', 'c']
+*/
+function getNamePath(path) {
+	if (typeof path === "string") return path.split(".");
+	return toArray(path);
+}
+/**
+* Create a new store object that contains only the values referenced by
+* the provided list of name paths.
+*/
+function cloneByNamePathList(store, namePathList) {
+	let newStore = {};
+	namePathList.forEach((namePath) => {
+		const value = getValue(store, namePath);
+		newStore = setValue(newStore, namePath, value);
+	});
+	return newStore;
+}
+/**
+* Check if `namePathList` includes `namePath`.
+* @param namePathList A list of `InternalNamePath[]`
+* @param namePath Compare `InternalNamePath`
+* @param partialMatch True will make `[a, b]` match `[a, b, c]`
+*/
+function containsNamePath(namePathList, namePath, partialMatch = false) {
+	return namePathList && namePathList.some((path) => matchNamePath(namePath, path, partialMatch));
+}
+/**
+* Check if `namePath` is super set or equal of `subNamePath`.
+* @param namePath A list of `InternalNamePath[]`
+* @param subNamePath Compare `InternalNamePath`
+* @param partialMatch True will make `[a, b]` match `[a, b, c]`
+*/
+function matchNamePath(namePath, subNamePath, partialMatch = false) {
+	if (!namePath || !subNamePath) return false;
+	if (!partialMatch && namePath.length !== subNamePath.length) return false;
+	return subNamePath.every((nameUnit, i) => namePath[i] === nameUnit);
+}
+function isSimilar(source, target) {
+	if (source === target) return true;
+	if (!source && target || source && !target) return false;
+	if (!source || !target || typeof source !== "object" || typeof target !== "object") return false;
+	const sourceKeys = Object.keys(source);
+	const targetKeys = Object.keys(target);
+	return [.../* @__PURE__ */ new Set([...sourceKeys, ...targetKeys])].every((key) => {
+		const sourceValue = source[key];
+		const targetValue = target[key];
+		if (typeof sourceValue === "function" && typeof targetValue === "function") return true;
+		return sourceValue === targetValue;
+	});
+}
+function defaultGetValueFromEvent(valuePropName, ...args) {
+	const event = args[0];
+	if (event && event.target && typeof event.target === "object" && valuePropName in event.target) return event.target[valuePropName];
+	return event;
+}
+/**
+* Moves an array item from one position in an array to another.
+*
+* Note: This is a pure function so a new array will be returned, instead
+* of altering the array argument.
+*
+* @param array         Array in which to move an item.         (required)
+* @param moveIndex     The index of the item to move.          (required)
+* @param toIndex       The index to move item at moveIndex to. (required)
+*/
+function move(array, moveIndex, toIndex) {
+	const { length } = array;
+	if (moveIndex < 0 || moveIndex >= length || toIndex < 0 || toIndex >= length) return array;
+	const item = array[moveIndex];
+	const diff = moveIndex - toIndex;
+	if (diff > 0) return [
+		...array.slice(0, toIndex),
+		item,
+		...array.slice(toIndex, moveIndex),
+		...array.slice(moveIndex + 1, length)
+	];
+	if (diff < 0) return [
+		...array.slice(0, moveIndex),
+		...array.slice(moveIndex + 1, toIndex + 1),
+		item,
+		...array.slice(toIndex + 1, length)
+	];
+	return array;
+}
+//#endregion
+export { cloneByNamePathList, containsNamePath, defaultGetValueFromEvent, getNamePath, getValue, isSimilar, matchNamePath, move, setValue };

package/dist/form/validateMessagesContext.d.ts

@@ -0,0 +1,7 @@
+import { ValidateMessages } from "./types.js";
+import { Ref } from "vue";
+//#region src/form/validateMessagesContext.d.ts
+declare function useValidateMessagesProvider(validateMessages: Ref<ValidateMessages>): void;
+declare function useValidateMessagesContext(): Ref<ValidateMessages, ValidateMessages> | undefined;
+//#endregion
+export { useValidateMessagesContext, useValidateMessagesProvider };

package/dist/form/validateMessagesContext.js

@@ -0,0 +1,11 @@
+import { inject, provide } from "vue";
+//#region src/form/validateMessagesContext.tsx
+const ValidateMessagesContextKey = Symbol("ValidateMessagesContext");
+function useValidateMessagesProvider(validateMessages) {
+	provide(ValidateMessagesContextKey, validateMessages);
+}
+function useValidateMessagesContext() {
+	return inject(ValidateMessagesContextKey, void 0);
+}
+//#endregion
+export { useValidateMessagesContext, useValidateMessagesProvider };

package/dist/grid/RowContext.d.ts

@@ -0,0 +1,10 @@
+import { Ref } from "vue";
+//#region src/grid/RowContext.d.ts
+interface RowContextState {
+  gutter?: Ref<[number, number]>;
+  wrap?: Ref<boolean | undefined>;
+}
+declare function useRowContextProvider(value: RowContextState): void;
+declare function useRowContext(): RowContextState;
+//#endregion
+export { RowContextState, useRowContext, useRowContextProvider };

package/dist/grid/RowContext.js

@@ -0,0 +1,11 @@
+import { inject, provide } from "vue";
+//#region src/grid/RowContext.ts
+const RowContext = Symbol("RowContext");
+function useRowContextProvider(value) {
+	provide(RowContext, value);
+}
+function useRowContext() {
+	return inject(RowContext, {});
+}
+//#endregion
+export { useRowContext, useRowContextProvider };

package/dist/grid/col.d.ts

@@ -0,0 +1,31 @@
+import { LiteralUnion } from "@v-c/util/dist/type";
+//#region src/grid/col.d.ts
+type ColSpanType = number | string;
+type FlexType = number | LiteralUnion<'none' | 'auto'>;
+interface ColSize {
+  flex?: FlexType;
+  span?: ColSpanType;
+  order?: ColSpanType;
+  offset?: ColSpanType;
+  push?: ColSpanType;
+  pull?: ColSpanType;
+}
+interface ColProps {
+  flex?: FlexType;
+  span?: ColSpanType;
+  order?: ColSpanType;
+  offset?: ColSpanType;
+  push?: ColSpanType;
+  pull?: ColSpanType;
+  prefixCls?: string;
+  xs?: ColSpanType | ColSize;
+  sm?: ColSpanType | ColSize;
+  md?: ColSpanType | ColSize;
+  lg?: ColSpanType | ColSize;
+  xl?: ColSpanType | ColSize;
+  xxl?: ColSpanType | ColSize;
+  xxxl?: ColSpanType | ColSize;
+}
+declare const Col: import("vue").DefineSetupFnComponent<ColProps, {}, {}, ColProps & {}, import("vue").PublicProps>;
+//#endregion
+export { ColProps, ColSize, Col as default };

package/dist/grid/col.js

@@ -0,0 +1,172 @@
+import { useConfig } from "../config-provider/context.js";
+import { genCssVar } from "../theme/util/genStyleUtils.js";
+import { getAttrStyleAndClass } from "../_util/hooks/useMergeSemantic.js";
+import { useColStyle } from "./style/index.js";
+import { responsiveArrayReversed } from "../_util/responsiveObserver.js";
+import { useRowContext } from "./RowContext.js";
+import { computed, createVNode, defineComponent, mergeProps } from "vue";
+import { classNames } from "@v-c/util";
+//#region src/grid/col.tsx
+function isNumber(value) {
+	return typeof value === "number" && !Number.isNaN(value);
+}
+function parseFlex(flex) {
+	if (isNumber(flex)) return `${flex} ${flex} auto`;
+	if (/^\d+(\.\d+)?(px|em|rem|%)$/.test(flex)) return `0 0 ${flex}`;
+	return flex;
+}
+const Col = /* @__PURE__ */ defineComponent((props, { slots, attrs }) => {
+	const configCtx = useConfig();
+	const { gutter, wrap } = useRowContext();
+	const prefixCls = computed(() => configCtx.value?.getPrefixCls("col", props.prefixCls));
+	const [varName] = genCssVar(computed(() => configCtx.value?.getPrefixCls()).value, "col");
+	const [hashId, cssVarCls] = useColStyle(prefixCls);
+	return () => {
+		const { span, order, offset, push, pull, flex } = props;
+		const { className, style, restAttrs } = getAttrStyleAndClass(attrs);
+		const sizeStyle = {};
+		let sizeClassObj = {};
+		responsiveArrayReversed.forEach((size) => {
+			let sizeProps = {};
+			const propSize = props[size];
+			if (typeof propSize === "number") sizeProps.span = propSize;
+			else if (typeof propSize === "object") sizeProps = propSize || {};
+			sizeClassObj = {
+				...sizeClassObj,
+				[`${prefixCls.value}-${size}-${sizeProps.span}`]: sizeProps.span !== void 0,
+				[`${prefixCls.value}-${size}-order-${sizeProps.order}`]: sizeProps.order || sizeProps.order === 0,
+				[`${prefixCls.value}-${size}-offset-${sizeProps.offset}`]: sizeProps.offset || sizeProps.offset === 0,
+				[`${prefixCls.value}-${size}-push-${sizeProps.push}`]: sizeProps.push || sizeProps.push === 0,
+				[`${prefixCls.value}-${size}-pull-${sizeProps.pull}`]: sizeProps.pull || sizeProps.pull === 0,
+				[`${prefixCls.value}-rtl`]: configCtx.value.direction === "rtl"
+			};
+			if (sizeProps.flex || sizeProps.flex === 0) {
+				sizeClassObj[`${prefixCls.value}-${size}-flex`] = true;
+				sizeStyle[varName(`${size}-flex`)] = parseFlex(sizeProps.flex);
+			}
+		});
+		const classes = classNames(prefixCls.value, {
+			[`${prefixCls.value}-${span}`]: span !== void 0,
+			[`${prefixCls.value}-order-${order}`]: order,
+			[`${prefixCls.value}-offset-${offset}`]: offset,
+			[`${prefixCls.value}-push-${push}`]: push,
+			[`${prefixCls.value}-pull-${pull}`]: pull
+		}, sizeClassObj, hashId.value, cssVarCls.value, className);
+		const mergedStyle = {};
+		if (gutter?.value && gutter.value[0] > 0) {
+			const horizontalGutter = gutter.value[0] / 2;
+			mergedStyle.paddingLeft = `${horizontalGutter}px`;
+			mergedStyle.paddingRight = `${horizontalGutter}px`;
+		}
+		if (flex || flex === 0) {
+			mergedStyle.flex = parseFlex(flex);
+			if (wrap?.value === false && !mergedStyle.minWidth) mergedStyle.minWidth = 0;
+		}
+		return createVNode("div", mergeProps(restAttrs, {
+			"class": classes,
+			"style": [
+				mergedStyle,
+				style,
+				sizeStyle
+			]
+		}), [slots.default?.()]);
+	};
+}, {
+	props: {
+		flex: {
+			type: [
+				Number,
+				String,
+				Object
+			],
+			required: false
+		},
+		span: {
+			type: [Number, String],
+			required: false
+		},
+		order: {
+			type: [Number, String],
+			required: false
+		},
+		offset: {
+			type: [Number, String],
+			required: false
+		},
+		push: {
+			type: [Number, String],
+			required: false
+		},
+		pull: {
+			type: [Number, String],
+			required: false
+		},
+		prefixCls: {
+			type: String,
+			required: false
+		},
+		xs: {
+			type: [
+				Number,
+				String,
+				Object
+			],
+			required: false
+		},
+		sm: {
+			type: [
+				Number,
+				String,
+				Object
+			],
+			required: false
+		},
+		md: {
+			type: [
+				Number,
+				String,
+				Object
+			],
+			required: false
+		},
+		lg: {
+			type: [
+				Number,
+				String,
+				Object
+			],
+			required: false
+		},
+		xl: {
+			type: [
+				Number,
+				String,
+				Object
+			],
+			required: false
+		},
+		xxl: {
+			type: [
+				Number,
+				String,
+				Object
+			],
+			required: false
+		},
+		xxxl: {
+			type: [
+				Number,
+				String,
+				Object
+			],
+			required: false
+		}
+	},
+	name: "ACol",
+	inheritAttrs: false
+});
+Col.install = (app) => {
+	app.component(Col.name, Col);
+};
+//#endregion
+export { Col as default };

package/dist/grid/hooks/useBreakpoint.d.ts

@@ -0,0 +1,22 @@
+import { ScreenMap } from "../../_util/responsiveObserver.js";
+import { Ref } from "vue";
+//#region src/grid/hooks/useBreakpoint.d.ts
+declare function useBreakpoint(refreshOnChange?: boolean | Ref<boolean>, defaultScreens?: ScreenMap | null | Ref<ScreenMap | null>): Ref<{
+  xxxl?: boolean | undefined;
+  xxl?: boolean | undefined;
+  xl?: boolean | undefined;
+  lg?: boolean | undefined;
+  md?: boolean | undefined;
+  sm?: boolean | undefined;
+  xs?: boolean | undefined;
+} | null, Partial<Record<"xxxl" | "xxl" | "xl" | "lg" | "md" | "sm" | "xs", boolean>> | {
+  xxxl?: boolean | undefined;
+  xxl?: boolean | undefined;
+  xl?: boolean | undefined;
+  lg?: boolean | undefined;
+  md?: boolean | undefined;
+  sm?: boolean | undefined;
+  xs?: boolean | undefined;
+} | null>;
+//#endregion
+export { useBreakpoint as default, useBreakpoint };

package/dist/grid/hooks/useBreakpoint.js

@@ -0,0 +1,28 @@
+import useResponsiveObserver from "../../_util/responsiveObserver.js";
+import { nextTick, ref, unref, watchEffect } from "vue";
+import canUseDom from "@v-c/util/dist/Dom/canUseDom";
+//#region src/grid/hooks/useBreakpoint.tsx
+function useBreakpoint(refreshOnChange = true, defaultScreens = {}) {
+	const screensRef = ref(unref(defaultScreens));
+	const responsiveObserver = useResponsiveObserver();
+	watchEffect((onCleanup) => {
+		if (!canUseDom()) return;
+		const observer = responsiveObserver.value;
+		let token;
+		let cancelled = false;
+		nextTick(() => {
+			if (cancelled) return;
+			token = observer.subscribe((supportScreens) => {
+				screensRef.value = unref(supportScreens);
+				if (unref(refreshOnChange)) {}
+			});
+		});
+		onCleanup(() => {
+			cancelled = true;
+			if (token !== void 0) observer.unsubscribe(token);
+		});
+	});
+	return screensRef;
+}
+//#endregion
+export { useBreakpoint as default, useBreakpoint };

package/dist/grid/hooks/useGutter.d.ts

@@ -0,0 +1,8 @@
+import { ScreenMap } from "../../_util/responsiveObserver.js";
+import { RowProps } from "../row.js";
+import { Ref } from "vue";
+//#region src/grid/hooks/useGutter.d.ts
+type Gap = number | undefined;
+declare function useGutter(gutter: Ref<RowProps['gutter']>, screens: Ref<ScreenMap | null>): Ref<[Gap, Gap]>;
+//#endregion
+export { useGutter as default };

package/dist/grid/hooks/useGutter.js

@@ -0,0 +1,35 @@
+import { responsiveArray } from "../../_util/responsiveObserver.js";
+import { computed, ref, watchEffect } from "vue";
+//#region src/grid/hooks/useGutter.ts
+function useGutter(gutter, screens) {
+	const results = ref([void 0, void 0]);
+	const normalizedGutter = computed(() => {
+		return Array.isArray(gutter.value) ? gutter.value : [gutter.value, void 0];
+	});
+	const mergedScreens = computed(() => {
+		return screens.value || {
+			xs: true,
+			sm: true,
+			md: true,
+			lg: true,
+			xl: true,
+			xxl: true,
+			xxxl: true
+		};
+	});
+	watchEffect(() => {
+		normalizedGutter.value.forEach((g, index) => {
+			if (typeof g === "object" && g !== null) for (let i = 0; i < responsiveArray.length; i++) {
+				const breakpoint = responsiveArray[i];
+				if (mergedScreens.value[breakpoint] && g[breakpoint] !== void 0) {
+					results.value[index] = g[breakpoint];
+					break;
+				}
+			}
+			else results.value[index] = g;
+		});
+	});
+	return results;
+}
+//#endregion
+export { useGutter as default };

package/dist/grid/index.d.ts

@@ -0,0 +1,22 @@
+import Col, { ColProps, ColSize } from "./col.js";
+import Row, { RowProps } from "./row.js";
+//#region src/grid/index.d.ts
+declare function useBreakpoint(): import("vue").Ref<{
+  xxxl?: boolean | undefined;
+  xxl?: boolean | undefined;
+  xl?: boolean | undefined;
+  lg?: boolean | undefined;
+  md?: boolean | undefined;
+  sm?: boolean | undefined;
+  xs?: boolean | undefined;
+} | null, Partial<Record<"xxxl" | "xxl" | "xl" | "lg" | "md" | "sm" | "xs", boolean>> | {
+  xxxl?: boolean | undefined;
+  xxl?: boolean | undefined;
+  xl?: boolean | undefined;
+  lg?: boolean | undefined;
+  md?: boolean | undefined;
+  sm?: boolean | undefined;
+  xs?: boolean | undefined;
+} | null>;
+//#endregion
+export { Col, type ColProps, type ColSize, Row, type RowProps, useBreakpoint };

package/dist/grid/index.js

@@ -0,0 +1,9 @@
+import useBreakpoint$1 from "./hooks/useBreakpoint.js";
+import Col from "./col.js";
+import Row from "./row.js";
+//#region src/grid/index.tsx
+function useBreakpoint() {
+	return useBreakpoint$1();
+}
+//#endregion
+export { Col, Row, useBreakpoint };