@sprawlify/vue 0.0.63 → 0.0.64

package/dist/index.d.ts

@@ -1,7 +1,8 @@
 import { Machine, MachineSchema, Service, mergeProps } from "@sprawlify/primitives/core";
 import * as _sprawlify_primitives_types0 from "@sprawlify/primitives/types";
 import * as Vue from "vue";
-import { ComputedRef, Ref } from "vue";
+import { ComponentPublicInstance, ComputedRef, MaybeRef, MaybeRefOrGetter, Ref, UnwrapRef } from "vue";
+import { FilterOptions, FilterReturn, Locale } from "@sprawlify/primitives/i18n-utils";
 
 //#region src/core/normalize-props.d.ts
 type ReservedProps = {
@@ -16,7 +17,101 @@ type PropTypes = Vue.NativeElements & {
 declare const normalizeProps: _sprawlify_primitives_types0.NormalizeProps<PropTypes>;
 //#endregion
 //#region src/core/machine.d.ts
-type MaybeRef<T> = T | Ref<T> | ComputedRef<T>;
-declare function useMachine<T extends MachineSchema>(machine: Machine<T>, userProps?: MaybeRef<Partial<T["props"]>>): Service<T>;
+type MaybeRef$1<T> = T | Ref<T> | ComputedRef<T>;
+declare function useMachine<T extends MachineSchema>(machine: Machine<T>, userProps?: MaybeRef$1<Partial<T["props"]>>): Service<T>;
 //#endregion
-export { PropTypes, mergeProps, normalizeProps, useMachine };
+//#region src/providers/environment/use-environment-context.d.ts
+type RootNode = ShadowRoot | Document | Node;
+interface UseEnvironmentContext {
+  /**
+   * The root node of the application.
+   * This is used to determine the window and document objects.
+   */
+  getRootNode(): RootNode;
+  /**
+   * The document context for the root node.
+   */
+  getDocument(): Document;
+  /**
+   * The window context for the root node.
+   */
+  getWindow(): Window & typeof globalThis;
+}
+declare const DEFAULT_ENVIRONMENT: ComputedRef<UseEnvironmentContext>;
+//#endregion
+//#region src/providers/environment/environment-provider.vue.d.ts
+interface EnvironmentProviderProps {
+  value?: RootNode | (() => RootNode);
+}
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+  default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_base: Vue.DefineComponent<EnvironmentProviderProps, {}, {}, {}, {}, Vue.ComponentOptionsMixin, Vue.ComponentOptionsMixin, {}, string, Vue.PublicProps, Readonly<EnvironmentProviderProps> & Readonly<{}>, {}, {}, {}, {}, string, Vue.ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export$1: __VLS_WithSlots$1<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export$1;
+type __VLS_WithSlots$1<T, S> = T & {
+  new (): {
+    $slots: S;
+  };
+};
+//#endregion
+//#region src/providers/locale/locale-provider.vue.d.ts
+interface LocaleProviderProps {
+  locale: string;
+}
+declare const _default$1: typeof __VLS_export;
+declare const __VLS_export: __VLS_WithSlots<Vue.DefineComponent<LocaleProviderProps, {}, {}, {}, {}, Vue.ComponentOptionsMixin, Vue.ComponentOptionsMixin, {}, string, Vue.PublicProps, Readonly<LocaleProviderProps> & Readonly<{}>, {}, {}, {}, {}, string, Vue.ComponentProvideOptions, false, {}, any>, {
+  default?: (props: {}) => any;
+}>;
+type __VLS_WithSlots<T, S> = T & {
+  new (): {
+    $slots: S;
+  };
+};
+//#endregion
+//#region src/providers/locale/use-collator.d.ts
+interface UseCollatorProps extends Intl.CollatorOptions {
+  locale?: string;
+}
+interface UseCollatorReturn extends ComputedRef<Intl.Collator> {}
+declare function useCollator(propsOrFn?: MaybeRef<UseCollatorProps>): UseCollatorReturn;
+//#endregion
+//#region src/providers/locale/use-filter.d.ts
+interface UseFilterProps extends FilterOptions {}
+declare function useFilter(props: UseFilterProps): UseFilterReturn;
+interface UseFilterReturn extends ComputedRef<FilterReturn> {}
+//#endregion
+//#region src/providers/locale/use-locale-context.d.ts
+interface LocaleContext extends Locale {}
+declare const DEFAULT_LOCALE: ComputedRef<LocaleContext>;
+//#endregion
+//#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
+//#region src/utils/create-context.d.ts
+type CreateContextReturn<T> = [(opts: T) => void, (fallback?: T) => T, symbol];
+declare const createContext: <T>(id: string) => CreateContextReturn<T>;
+//#endregion
+//#region src/utils/use-emits-as-props.d.ts
+declare function useEmitAsProps<Name extends string>(emit: (name: Name, ...args: any[]) => void): Record<string, any>;
+//#endregion
+//#region src/utils/use-forward-expose.d.ts
+declare function useForwardExpose(): {
+  forwardRef: (ref: Element | ComponentPublicInstance | null) => void;
+  currentRef: Vue.Ref<Element | ComponentPublicInstance | null | undefined, Element | ComponentPublicInstance | null | undefined>;
+  currentElement: Vue.ComputedRef<HTMLElement>;
+};
+//#endregion
+//#region src/utils/use-forward-props.d.ts
+declare function useForwardProps<T extends MaybeRefOrGetter<Record<string, any>>, U extends UnwrapRef<T>>(props: T): Vue.ComputedRef<U>;
+//#endregion
+//#region src/utils/use-forward-props-emits.d.ts
+declare function useForwardPropsEmits<T extends Parameters<typeof useForwardProps>[0], Name extends string>(props: T, emit?: (name: Name, ...args: any[]) => void): Vue.ComputedRef<any>;
+//#endregion
+export { Assign, BooleanDefaults, DEFAULT_ENVIRONMENT, DEFAULT_LOCALE, EmitFn, _default as EnvironmentProvider, type EnvironmentProviderProps, type LocaleContext, _default$1 as LocaleProvider, type LocaleProviderProps, MaybePromise, Optional, PropTypes, type RootNode, type UseCollatorProps, type UseCollatorReturn, type UseEnvironmentContext, type UseFilterProps, type UseFilterReturn, createContext, mergeProps, normalizeProps, useCollator, useEmitAsProps, useEnvironmentContext, useFilter, useForwardExpose, useForwardProps, useForwardPropsEmits, useLocaleContext, useMachine };

package/dist/index.js

@@ -1,7 +1,9 @@
 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 { computed, nextTick, onBeforeUnmount, onMounted, onUnmounted, shallowRef, toValue, watch } from "vue";
+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";
 
 //#region src/core/normalize-props.ts
 function toCase(txt) {
@@ -334,4 +336,218 @@ const flush = (fn) => {
 };
 
 //#endregion
-export { mergeProps, normalizeProps, useMachine };
+//#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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sprawlify/vue",
-  "version": "0.0.63",
+  "version": "0.0.64",
   "type": "module",
   "description": "Vue wrapper for primitives.",
   "author": "sprawlify <npm@sprawlify.com>",
@@ -9,14 +9,8 @@
   "types": "./dist/index.d.ts",
   "exports": {
     ".": {
-      "import": {
-        "types": "./dist/index.d.ts",
-        "default": "./dist/index.js"
-      },
-      "require": {
-        "types": "./dist/index.d.ts",
-        "default": "./dist/index.cjs"
-      }
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
     }
   },
   "files": [
@@ -26,7 +20,7 @@
     "access": "public"
   },
   "dependencies": {
-    "@sprawlify/primitives": "0.0.63"
+    "@sprawlify/primitives": "0.0.64"
   },
   "peerDependencies": {
     "vue": ">=3.0.0"