@sprawlify/vue 0.0.65 → 0.0.66

package/dist/presence-CvUnYMZQ.js

@@ -0,0 +1,105 @@
+import { n as useMachine, r as normalizeProps$1 } from "./core-DNndr38p.js";
+import { r as createContext, t as useForwardExpose } from "./use-forward-expose-4p5AGAI3.js";
+import { t as sprawlify } from "./factory-BH3WrWd2.js";
+import { computed, createBlock, createCommentVNode, defineComponent, mergeDefaults, mergeProps, openBlock, ref, renderSlot, toValue, unref, watch, withCtx } from "vue";
+import * as presence from "@sprawlify/primitives/machines/presence";
+
+//#region src/components/presence/use-presence.ts
+const usePresence = (props, emit) => {
+	const wasEverPresent = ref(false);
+	const nodeRef = ref(null);
+	const machineProps = computed(() => {
+		return {
+			present: toValue(props).present,
+			onExitComplete: () => emit?.("exitComplete")
+		};
+	});
+	const service = useMachine(presence.machine, machineProps);
+	const api = computed(() => presence.connect(service, normalizeProps$1));
+	watch(() => api.value.present, () => {
+		if (api.value.present) wasEverPresent.value = true;
+	});
+	watch(nodeRef, () => {
+		if (nodeRef.value) {
+			const node = nodeRef.value.$el ? nodeRef.value.$el : nodeRef.value;
+			if (node) api.value.setNode(node);
+		}
+	});
+	return computed(() => {
+		const localProps = toValue(props);
+		return {
+			present: api.value.present,
+			unmounted: !api.value.present && !wasEverPresent.value && localProps.lazyMount || localProps?.unmountOnExit && !api.value?.present && wasEverPresent.value,
+			presenceProps: {
+				ref: nodeRef,
+				hidden: !api.value.present,
+				"data-state": api.value.skip && localProps.skipAnimationOnMount ? void 0 : localProps?.present ? "open" : "closed"
+			}
+		};
+	});
+};
+
+//#endregion
+//#region src/components/presence/use-presence-context.ts
+const [PresenceProvider, usePresenceContext] = createContext("PresenceContext");
+
+//#endregion
+//#region src/components/presence/presence.vue?vue&type=script&setup=true&lang.ts
+var presence_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	__name: "presence",
+	props: /* @__PURE__ */ mergeDefaults({
+		immediate: {
+			type: Boolean,
+			required: false
+		},
+		lazyMount: {
+			type: Boolean,
+			required: false
+		},
+		present: {
+			type: Boolean,
+			required: false
+		},
+		skipAnimationOnMount: {
+			type: Boolean,
+			required: false
+		},
+		unmountOnExit: {
+			type: Boolean,
+			required: false
+		},
+		asChild: {
+			type: Boolean,
+			required: false
+		}
+	}, {
+		immediate: void 0,
+		lazyMount: void 0,
+		present: void 0,
+		skipAnimationOnMount: void 0,
+		unmountOnExit: void 0
+	}),
+	emits: ["exitComplete"],
+	setup(__props, { emit: __emit }) {
+		const presence = usePresence(__props, __emit);
+		PresenceProvider(presence);
+		useForwardExpose();
+		return (_ctx, _cache) => {
+			return !unref(presence).unmounted ? (openBlock(), createBlock(unref(sprawlify).div, mergeProps({ key: 0 }, unref(presence).presenceProps, {
+				"as-child": __props.asChild,
+				"data-scope": "presence",
+				"data-part": "root"
+			}), {
+				default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
+				_: 3
+			}, 16, ["as-child"])) : createCommentVNode("v-if", true);
+		};
+	}
+});
+
+//#endregion
+//#region src/components/presence/presence.vue
+var presence_default = presence_vue_vue_type_script_setup_true_lang_default;
+
+//#endregion
+export { usePresence as i, PresenceProvider as n, usePresenceContext as r, presence_default as t };

package/dist/presence-types-Bv1E60Cw.d.ts

@@ -0,0 +1,13 @@
+//#region src/components/presence/presence-types.d.ts
+interface RootProps {
+  immediate?: boolean;
+  lazyMount?: boolean;
+  present?: boolean;
+  skipAnimationOnMount?: boolean;
+  unmountOnExit?: boolean;
+}
+type RootEmits = {
+  exitComplete: [];
+};
+//#endregion
+export { RootProps as n, RootEmits as t };

package/dist/providers-B2CNPFg1.js

@@ -0,0 +1,108 @@
+import { r as createContext } from "./use-forward-expose-4p5AGAI3.js";
+import { Fragment, computed, createCommentVNode, createElementBlock, defineComponent, openBlock, ref, renderSlot, toValue } from "vue";
+import { getDocument, getWindow } from "@sprawlify/primitives/dom-query";
+import { createCollator, createFilter, isRTL } from "@sprawlify/primitives/i18n-utils";
+
+//#region src/utils/run-if-fn.ts
+const isFunction = (value) => typeof value === "function";
+const runIfFn = (valueOrFn, ...args) => isFunction(valueOrFn) ? valueOrFn(...args) : valueOrFn;
+
+//#endregion
+//#region src/providers/environment/use-environment-context.ts
+const [EnvironmentContextProvider, useEnvironmentContext] = createContext("EnvironmentContext");
+const DEFAULT_ENVIRONMENT = computed(() => ({
+	getRootNode: () => document,
+	getDocument: () => document,
+	getWindow: () => window
+}));
+
+//#endregion
+//#region src/providers/environment/environment-provider.vue?vue&type=script&setup=true&lang.ts
+var environment_provider_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	__name: "environment-provider",
+	props: { value: {
+		type: Function,
+		required: false,
+		skipCheck: true
+	} },
+	setup(__props) {
+		const props = __props;
+		const spanRef = ref(null);
+		const getRootNode = () => runIfFn(props.value) ?? spanRef.value?.getRootNode() ?? document;
+		EnvironmentContextProvider(computed(() => ({
+			getRootNode,
+			getDocument: () => getDocument(getRootNode()),
+			getWindow: () => getWindow(getRootNode())
+		})));
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock(Fragment, null, [renderSlot(_ctx.$slots, "default"), !props.value ? (openBlock(), createElementBlock("span", {
+				key: 0,
+				hidden: "",
+				ref_key: "spanRef",
+				ref: spanRef
+			}, null, 512)) : createCommentVNode("v-if", true)], 64);
+		};
+	}
+});
+
+//#endregion
+//#region src/providers/environment/environment-provider.vue
+var environment_provider_default = environment_provider_vue_vue_type_script_setup_true_lang_default;
+
+//#endregion
+//#region src/providers/locale/use-locale-context.ts
+const DEFAULT_LOCALE = computed(() => ({
+	dir: "ltr",
+	locale: "en-US"
+}));
+const [LocaleContextProvider, useLocaleContext] = createContext("LocaleContext");
+
+//#endregion
+//#region src/providers/locale/locale-provider.vue?vue&type=script&setup=true&lang.ts
+var locale_provider_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	__name: "locale-provider",
+	props: { locale: {
+		type: String,
+		required: true
+	} },
+	setup(__props) {
+		const props = __props;
+		LocaleContextProvider(computed(() => ({
+			locale: props.locale,
+			dir: isRTL(props.locale) ? "rtl" : "ltr"
+		})));
+		return (_ctx, _cache) => {
+			return renderSlot(_ctx.$slots, "default");
+		};
+	}
+});
+
+//#endregion
+//#region src/providers/locale/locale-provider.vue
+var locale_provider_default = locale_provider_vue_vue_type_script_setup_true_lang_default;
+
+//#endregion
+//#region src/providers/locale/use-collator.ts
+function useCollator(propsOrFn = {}) {
+	const env = useLocaleContext();
+	return computed(() => {
+		const props = toValue(propsOrFn);
+		const locale = props.locale ?? env.value.locale;
+		const { locale: _, ...options } = props;
+		return createCollator(locale, options);
+	});
+}
+
+//#endregion
+//#region src/providers/locale/use-filter.ts
+function useFilter(props) {
+	const env = useLocaleContext(DEFAULT_LOCALE);
+	const locale = computed(() => props.locale ?? env.value.locale);
+	return computed(() => createFilter({
+		...props,
+		locale: locale.value
+	}));
+}
+
+//#endregion
+export { useLocaleContext as a, useEnvironmentContext as c, DEFAULT_LOCALE as i, useCollator as n, environment_provider_default as o, locale_provider_default as r, DEFAULT_ENVIRONMENT as s, useFilter as t };

package/dist/types-Bj-dS2Hc.d.ts

@@ -0,0 +1,9 @@
+//#region src/types.d.ts
+type Optional<T, K extends keyof T> = Pick<Partial<T>, K> & Omit<T, K>;
+type Assign<T, U> = Omit<T, keyof U> & U;
+type EmitFn<T> = <K extends keyof T>(event: K, ...args: T[K] extends any[] ? T[K] : never) => void;
+type BooleanKey<T> = { [K in keyof T]: boolean extends NonNullable<T[K]> ? K : never }[keyof T];
+type BooleanDefaults<T> = { [K in BooleanKey<T>]: undefined };
+type MaybePromise<T> = T | Promise<T>;
+//#endregion
+export { Optional as a, MaybePromise as i, BooleanDefaults as n, EmitFn as r, Assign as t };

package/dist/use-forward-expose-4p5AGAI3.js

@@ -0,0 +1,67 @@
+import { computed, getCurrentInstance, inject, provide, ref, toValue } from "vue";
+
+//#region src/utils/create-context.ts
+const createContext = (id) => {
+	const contextId = Symbol(id);
+	const provider = (value) => provide(contextId, value);
+	const consumer = (fallback) => inject(contextId, fallback);
+	return [
+		provider,
+		consumer,
+		contextId
+	];
+};
+
+//#endregion
+//#region src/utils/unref-element.ts
+function unrefElement(elRef) {
+	const plain = toValue(elRef);
+	return plain?.$el ?? plain;
+}
+
+//#endregion
+//#region src/utils/use-forward-expose.ts
+const isElement = (el) => Object.prototype.hasOwnProperty.call(el, "nodeName") && typeof el.nodeName === "string";
+function useForwardExpose() {
+	const instance = getCurrentInstance();
+	const currentRef = ref();
+	const currentElement = computed(() => {
+		return ["#text", "#comment"].includes(currentRef.value?.$el.nodeName) ? currentRef.value?.$el.nextElementSibling : unrefElement(currentRef);
+	});
+	const localExpose = Object.assign({}, instance.exposed);
+	const ret = {};
+	for (const key in instance.props) Object.defineProperty(ret, key, {
+		enumerable: true,
+		configurable: true,
+		get: () => instance.props[key]
+	});
+	if (Object.keys(localExpose).length > 0) for (const key in localExpose) Object.defineProperty(ret, key, {
+		enumerable: true,
+		configurable: true,
+		get: () => localExpose[key]
+	});
+	Object.defineProperty(ret, "$el", {
+		enumerable: true,
+		configurable: true,
+		get: () => instance.vnode.el
+	});
+	instance.exposed = ret;
+	function forwardRef(ref) {
+		currentRef.value = ref;
+		if (isElement(ref) || !ref) return;
+		Object.defineProperty(ret, "$el", {
+			enumerable: true,
+			configurable: true,
+			get: () => ref.$el
+		});
+		instance.exposed = ret;
+	}
+	return {
+		forwardRef,
+		currentRef,
+		currentElement
+	};
+}
+
+//#endregion
+export { unrefElement as n, createContext as r, useForwardExpose as t };

package/dist/use-render-strategy-BkxoN6ll.js

@@ -0,0 +1,7 @@
+import { r as createContext } from "./use-forward-expose-4p5AGAI3.js";
+
+//#region src/utils/use-render-strategy.ts
+const [RenderStrategyPropsProvider, useRenderStrategyProps] = createContext("RenderStrategyProps");
+
+//#endregion
+export { useRenderStrategyProps as n, RenderStrategyPropsProvider as t };

package/dist/use-render-strategy-CHj_pCfT.d.ts

@@ -0,0 +1,9 @@
+import { ComputedRef } from "vue";
+
+//#region src/utils/use-render-strategy.d.ts
+interface RenderStrategyProps {
+  lazyMount?: boolean;
+  unmountOnExit?: boolean;
+}
+//#endregion
+export { RenderStrategyProps as t };

package/dist/utils-B4FuOOE-.js

@@ -0,0 +1,51 @@
+import { camelize, computed, getCurrentInstance, toHandlerKey, toRef } from "vue";
+
+//#region src/utils/use-emits-as-props.ts
+function useEmitAsProps(emit) {
+	const vm = getCurrentInstance();
+	const events = vm?.type.emits;
+	const result = {};
+	if (!events?.length) console.warn(`No emitted event found. Please check component: ${vm?.type.__name}`);
+	for (const event of events) result[toHandlerKey(camelize(event))] = (...arg) => emit(event, ...arg);
+	return result;
+}
+
+//#endregion
+//#region src/utils/use-forward-props.ts
+function useForwardProps(props) {
+	const vm = getCurrentInstance();
+	const defaultProps = Object.keys(vm?.type.props ?? {}).reduce((prev, curr) => {
+		const defaultValue = (vm?.type.props[curr]).default;
+		if (defaultValue !== void 0) prev[curr] = defaultValue;
+		return prev;
+	}, {});
+	const refProps = toRef(props);
+	return computed(() => {
+		const preservedProps = {};
+		const assignedProps = vm?.vnode.props ?? {};
+		Object.keys(assignedProps).forEach((key) => {
+			preservedProps[camelize(key)] = assignedProps[key];
+		});
+		return Object.keys({
+			...defaultProps,
+			...preservedProps
+		}).reduce((prev, curr) => {
+			if (refProps.value[curr] !== void 0) prev[curr] = refProps.value[curr];
+			return prev;
+		}, {});
+	});
+}
+
+//#endregion
+//#region src/utils/use-forward-props-emits.ts
+function useForwardPropsEmits(props, emit) {
+	const parsedProps = useForwardProps(props);
+	const emitsAsProps = emit ? useEmitAsProps(emit) : {};
+	return computed(() => ({
+		...parsedProps.value,
+		...emitsAsProps
+	}));
+}
+
+//#endregion
+export { useForwardProps as n, useEmitAsProps as r, useForwardPropsEmits as t };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sprawlify/vue",
-  "version": "0.0.65",
+  "version": "0.0.66",
   "type": "module",
   "description": "Vue wrapper for primitives.",
   "author": "sprawlify <npm@sprawlify.com>",
@@ -12,9 +12,61 @@
       "types": "./dist/index.d.ts",
       "default": "./dist/index.js"
     },
+    "./accordion": {
+      "types": "./dist/components/accordion/index.d.ts",
+      "default": "./dist/components/accordion/index.js"
+    },
+    "./angle-slider": {
+      "types": "./dist/components/angle-slider/index.d.ts",
+      "default": "./dist/components/angle-slider/index.js"
+    },
+    "./avatar": {
+      "types": "./dist/components/avatar/index.d.ts",
+      "default": "./dist/components/avatar/index.js"
+    },
+    "./bottom-sheet": {
+      "types": "./dist/components/bottom-sheet/index.d.ts",
+      "default": "./dist/components/bottom-sheet/index.js"
+    },
+    "./carousel": {
+      "types": "./dist/components/carousel/index.d.ts",
+      "default": "./dist/components/carousel/index.js"
+    },
+    "./checkbox": {
+      "types": "./dist/components/checkbox/index.d.ts",
+      "default": "./dist/components/checkbox/index.js"
+    },
+    "./client-only": {
+      "types": "./dist/components/client-only/index.d.ts",
+      "default": "./dist/components/client-only/index.js"
+    },
+    "./clipboard": {
+      "types": "./dist/components/clipboard/index.d.ts",
+      "default": "./dist/components/clipboard/index.js"
+    },
     "./collapsible": {
       "types": "./dist/components/collapsible/index.d.ts",
       "default": "./dist/components/collapsible/index.js"
+    },
+    "./collection": {
+      "types": "./dist/components/collection/index.d.ts",
+      "default": "./dist/components/collection/index.js"
+    },
+    "./field": {
+      "types": "./dist/components/field/index.d.ts",
+      "default": "./dist/components/field/index.js"
+    },
+    "./fieldset": {
+      "types": "./dist/components/fieldset/index.d.ts",
+      "default": "./dist/components/fieldset/index.js"
+    },
+    "./presence": {
+      "types": "./dist/components/presence/index.d.ts",
+      "default": "./dist/components/presence/index.js"
+    },
+    "./select": {
+      "types": "./dist/components/select/index.d.ts",
+      "default": "./dist/components/select/index.js"
     }
   },
   "files": [
@@ -24,7 +76,7 @@
     "access": "public"
   },
   "dependencies": {
-    "@sprawlify/primitives": "0.0.65"
+    "@sprawlify/primitives": "0.0.66"
   },
   "peerDependencies": {
     "vue": ">=3.0.0"