@sprawlify/vue 0.0.64 → 0.0.65

package/dist/use-forward-expose-BIk4OI3R.js

@@ -0,0 +1,505 @@
+import { INIT_STATE, MachineStatus, createScope, mergeProps as mergeProps$1 } from "@sprawlify/primitives/core";
+import { createNormalizer } from "@sprawlify/primitives/types";
+import { compact, ensure, isEqual, isFunction, isString, toArray, warn } from "@sprawlify/primitives/utils";
+import { Fragment, computed, createCommentVNode, createElementBlock, defineComponent, getCurrentInstance, inject, nextTick, onBeforeUnmount, onMounted, onUnmounted, openBlock, provide, ref, renderSlot, shallowRef, toValue, watch } from "vue";
+import { getDocument, getWindow } from "@sprawlify/primitives/dom-query";
+import { createCollator, createFilter, isRTL } from "@sprawlify/primitives/i18n-utils";
+
+//#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$1 = 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/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 { DEFAULT_LOCALE as a, DEFAULT_ENVIRONMENT as c, mergeProps$1 as d, useMachine as f, locale_provider_default as i, useEnvironmentContext as l, useFilter as n, useLocaleContext as o, normalizeProps$1 as p, useCollator as r, environment_provider_default as s, useForwardExpose as t, createContext as u };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sprawlify/vue",
-  "version": "0.0.64",
+  "version": "0.0.65",
   "type": "module",
   "description": "Vue wrapper for primitives.",
   "author": "sprawlify <npm@sprawlify.com>",
@@ -11,6 +11,10 @@
     ".": {
       "types": "./dist/index.d.ts",
       "default": "./dist/index.js"
+    },
+    "./collapsible": {
+      "types": "./dist/components/collapsible/index.d.ts",
+      "default": "./dist/components/collapsible/index.js"
     }
   },
   "files": [
@@ -20,7 +24,7 @@
     "access": "public"
   },
   "dependencies": {
-    "@sprawlify/primitives": "0.0.64"
+    "@sprawlify/primitives": "0.0.65"
   },
   "peerDependencies": {
     "vue": ">=3.0.0"