@sprawlify/vue 0.0.64 → 0.0.66

package/dist/index.js

@@ -1,553 +1,6 @@
-import { INIT_STATE, MachineStatus, createScope, mergeProps } from "@sprawlify/primitives/core";
-import { createNormalizer } from "@sprawlify/primitives/types";
-import { compact, ensure, isEqual, isFunction, isString, toArray, warn } from "@sprawlify/primitives/utils";
-import { Fragment, camelize, computed, createCommentVNode, createElementBlock, defineComponent, getCurrentInstance, inject, nextTick, onBeforeUnmount, onMounted, onUnmounted, openBlock, provide, ref, renderSlot, shallowRef, toHandlerKey, toRef, toValue, watch } from "vue";
-import { getDocument, getWindow } from "@sprawlify/primitives/dom-query";
-import { createCollator, createFilter, isRTL } from "@sprawlify/primitives/i18n-utils";
+import { n as useMachine, r as normalizeProps, t as mergeProps } from "./core-DNndr38p.js";
+import { a as useLocaleContext, c as useEnvironmentContext, i as DEFAULT_LOCALE, n as useCollator, o as environment_provider_default, r as locale_provider_default, s as DEFAULT_ENVIRONMENT, t as useFilter } from "./providers-B2CNPFg1.js";
+import { r as createContext, t as useForwardExpose } from "./use-forward-expose-4p5AGAI3.js";
+import { n as useForwardProps, r as useEmitAsProps, t as useForwardPropsEmits } from "./utils-B4FuOOE-.js";
 
-//#region src/core/normalize-props.ts
-function toCase(txt) {
-	return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase();
-}
-const propMap = {
-	htmlFor: "for",
-	className: "class",
-	onDoubleClick: "onDblclick",
-	onChange: "onInput",
-	onFocus: "onFocusin",
-	onBlur: "onFocusout",
-	defaultValue: "value",
-	defaultChecked: "checked"
-};
-const preserveKeys = "viewBox,className,preserveAspectRatio,fillRule,clipPath,clipRule,strokeWidth,strokeLinecap,strokeLinejoin,strokeDasharray,strokeDashoffset,strokeMiterlimit".split(",");
-function toVueProp(prop) {
-	if (prop in propMap) return propMap[prop];
-	if (prop.startsWith("on")) return `on${toCase(prop.substr(2))}`;
-	if (preserveKeys.includes(prop)) return prop;
-	return prop.toLowerCase();
-}
-const normalizeProps = createNormalizer((props) => {
-	const normalized = {};
-	for (const key in props) {
-		const value = props[key];
-		if (key === "children") {
-			if (typeof value === "string") normalized["innerHTML"] = value;
-			else if (process.env.NODE_ENV !== "production" && value != null) console.warn("[Vue Normalize Prop] : avoid passing non-primitive value as `children`");
-		} else normalized[toVueProp(key)] = props[key];
-	}
-	return normalized;
-});
-
-//#endregion
-//#region src/core/bindable.ts
-function bindable(props) {
-	const initial = props().defaultValue ?? props().value;
-	const eq = props().isEqual ?? Object.is;
-	const v = shallowRef(initial);
-	const controlled = computed(() => props().value !== void 0);
-	return {
-		initial,
-		ref: shallowRef(controlled.value ? props().value : v.value),
-		get() {
-			return controlled.value ? props().value : v.value;
-		},
-		set(val) {
-			const prev = controlled.value ? props().value : v.value;
-			const next = isFunction(val) ? val(prev) : val;
-			if (props().debug) console.log(`[bindable > ${props().debug}] setValue`, {
-				next,
-				prev
-			});
-			if (!controlled.value) v.value = next;
-			if (!eq(next, prev)) props().onChange?.(next, prev);
-		},
-		invoke(nextValue, prevValue) {
-			props().onChange?.(nextValue, prevValue);
-		},
-		hash(value) {
-			return props().hash?.(value) ?? String(value);
-		}
-	};
-}
-bindable.cleanup = (fn) => {
-	onUnmounted(() => fn());
-};
-bindable.ref = (defaultValue) => {
-	let value = defaultValue;
-	return {
-		get: () => value,
-		set: (next) => {
-			value = next;
-		}
-	};
-};
-
-//#endregion
-//#region src/core/refs.ts
-function useRefs(refs) {
-	const ref = { current: refs };
-	return {
-		get(key) {
-			return ref.current[key];
-		},
-		set(key, value) {
-			ref.current[key] = value;
-		}
-	};
-}
-
-//#endregion
-//#region src/core/track.ts
-const useTrack = (deps, effect) => {
-	watch(() => [...deps.map((d) => d())], (current, previous) => {
-		let changed = false;
-		for (let i = 0; i < current.length; i++) if (!isEqual(previous[i], toValue(current[i]))) {
-			changed = true;
-			break;
-		}
-		if (changed) effect();
-	});
-};
-
-//#endregion
-//#region src/core/machine.ts
-function useMachine(machine, userProps = {}) {
-	const scope = computed(() => {
-		const { id, ids, getRootNode } = toValue(userProps);
-		return createScope({
-			id,
-			ids,
-			getRootNode
-		});
-	});
-	const debug = (...args) => {
-		if (machine.debug) console.log(...args);
-	};
-	const prop = useProp(computed(() => machine.props?.({
-		props: compact(toValue(userProps)),
-		get scope() {
-			return scope.value;
-		}
-	}) ?? toValue(userProps)));
-	const context = machine.context?.({
-		prop,
-		bindable,
-		get scope() {
-			return scope.value;
-		},
-		flush,
-		getContext() {
-			return ctx;
-		},
-		getComputed() {
-			return computed$1;
-		},
-		getRefs() {
-			return refs;
-		},
-		getEvent() {
-			return getEvent();
-		}
-	});
-	const ctx = {
-		get(key) {
-			return context[key]?.get();
-		},
-		set(key, value) {
-			context[key]?.set(value);
-		},
-		initial(key) {
-			return context[key]?.initial;
-		},
-		hash(key) {
-			const current = context[key]?.get();
-			return context[key]?.hash(current);
-		}
-	};
-	let effects = /* @__PURE__ */ new Map();
-	let transitionRef = null;
-	const previousEventRef = { current: null };
-	const eventRef = { current: { type: "" } };
-	const getEvent = () => ({
-		...eventRef.current,
-		current() {
-			return eventRef.current;
-		},
-		previous() {
-			return previousEventRef.current;
-		}
-	});
-	const getState = () => ({
-		...state,
-		matches(...values) {
-			const currentState = state.get();
-			return values.includes(currentState);
-		},
-		hasTag(tag) {
-			const currentState = state.get();
-			return !!machine.states[currentState]?.tags?.includes(tag);
-		}
-	});
-	const refs = useRefs(machine.refs?.({
-		prop,
-		context: ctx
-	}) ?? {});
-	const getParams = () => ({
-		state: getState(),
-		context: ctx,
-		event: getEvent(),
-		prop,
-		send,
-		action,
-		guard,
-		track: useTrack,
-		refs,
-		computed: computed$1,
-		flush,
-		get scope() {
-			return scope.value;
-		},
-		choose
-	});
-	const action = (keys) => {
-		const strs = isFunction(keys) ? keys(getParams()) : keys;
-		if (!strs) return;
-		const fns = strs.map((s) => {
-			const fn = machine.implementations?.actions?.[s];
-			if (!fn) warn(`[sprawlify-js] No implementation found for action "${JSON.stringify(s)}"`);
-			return fn;
-		});
-		for (const fn of fns) fn?.(getParams());
-	};
-	const guard = (str) => {
-		if (isFunction(str)) return str(getParams());
-		return machine.implementations?.guards?.[str](getParams());
-	};
-	const effect = (keys) => {
-		const strs = isFunction(keys) ? keys(getParams()) : keys;
-		if (!strs) return;
-		const fns = strs.map((s) => {
-			const fn = machine.implementations?.effects?.[s];
-			if (!fn) warn(`[sprawlify-js] No implementation found for effect "${JSON.stringify(s)}"`);
-			return fn;
-		});
-		const cleanups = [];
-		for (const fn of fns) {
-			const cleanup = fn?.(getParams());
-			if (cleanup) cleanups.push(cleanup);
-		}
-		return () => cleanups.forEach((fn) => fn?.());
-	};
-	const choose = (transitions) => {
-		return toArray(transitions).find((t) => {
-			let result = !t.guard;
-			if (isString(t.guard)) result = !!guard(t.guard);
-			else if (isFunction(t.guard)) result = t.guard(getParams());
-			return result;
-		});
-	};
-	const computed$1 = (key) => {
-		ensure(machine.computed, () => `[sprawlify-js] No computed object found on machine`);
-		const fn = machine.computed[key];
-		return fn({
-			context: ctx,
-			event: getEvent(),
-			prop,
-			refs,
-			get scope() {
-				return scope.value;
-			},
-			computed: computed$1
-		});
-	};
-	const state = bindable(() => ({
-		defaultValue: machine.initialState({ prop }),
-		onChange(nextState, prevState) {
-			if (prevState) {
-				effects.get(prevState)?.();
-				effects.delete(prevState);
-			}
-			if (prevState) action(machine.states[prevState]?.exit);
-			action(transitionRef?.actions);
-			const cleanup = effect(machine.states[nextState]?.effects);
-			if (cleanup) effects.set(nextState, cleanup);
-			if (prevState === INIT_STATE) {
-				action(machine.entry);
-				const cleanup = effect(machine.effects);
-				if (cleanup) effects.set(INIT_STATE, cleanup);
-			}
-			action(machine.states[nextState]?.entry);
-		}
-	}));
-	let status = MachineStatus.NotStarted;
-	onMounted(() => {
-		const started = status === MachineStatus.Started;
-		status = MachineStatus.Started;
-		debug(started ? "rehydrating..." : "initializing...");
-		state.invoke(state.initial, INIT_STATE);
-	});
-	onBeforeUnmount(() => {
-		status = MachineStatus.Stopped;
-		debug("unmounting...");
-		const fns = effects.values();
-		for (const fn of fns) fn?.();
-		effects = /* @__PURE__ */ new Map();
-		action(machine.exit);
-	});
-	const send = (event) => {
-		if (status !== MachineStatus.Started) return;
-		previousEventRef.current = eventRef.current;
-		eventRef.current = event;
-		const currentState = state.get();
-		const transition = choose(machine.states[currentState].on?.[event.type] ?? machine.on?.[event.type]);
-		if (!transition) return;
-		transitionRef = transition;
-		const target = transition.target ?? currentState;
-		debug("transition", event.type, transition.target || currentState, `(${transition.actions})`);
-		const changed = target !== currentState;
-		if (changed) state.set(target);
-		else if (transition.reenter && !changed) state.invoke(currentState, currentState);
-		else action(transition.actions);
-	};
-	machine.watch?.(getParams());
-	return {
-		state: getState(),
-		send,
-		context: ctx,
-		prop,
-		get scope() {
-			return scope.value;
-		},
-		refs,
-		computed: computed$1,
-		event: getEvent(),
-		getStatus: () => status
-	};
-}
-function useProp(valueRef) {
-	return function get(key) {
-		return valueRef.value[key];
-	};
-}
-const flush = (fn) => {
-	nextTick().then(() => {
-		fn();
-	});
-};
-
-//#endregion
-//#region src/utils/run-if-fn.ts
-const isFunction$1 = (value) => typeof value === "function";
-const runIfFn = (valueOrFn, ...args) => isFunction$1(valueOrFn) ? valueOrFn(...args) : valueOrFn;
-
-//#endregion
-//#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/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
-//#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/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
-//#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 { DEFAULT_ENVIRONMENT, DEFAULT_LOCALE, environment_provider_default as EnvironmentProvider, locale_provider_default as LocaleProvider, createContext, mergeProps, normalizeProps, useCollator, useEmitAsProps, useEnvironmentContext, useFilter, useForwardExpose, useForwardProps, useForwardPropsEmits, useLocaleContext, useMachine };

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 };