@raxium/vue-addons-shared 0.1.1

package/dist/composables/useEmitAsProps.d.ts

@@ -0,0 +1,10 @@
+/**
+ * The `useEmitAsProps` function is a TypeScript utility that converts emitted events into props for a
+ * Vue component.
+ * @param emit - The `emit` parameter is a function that is used to emit events from a component. It
+ * takes two parameters: `name` which is the name of the event to be emitted, and `...args` which are
+ * the arguments to be passed along with the event.
+ * @returns The function `useEmitAsProps` returns an object that maps event names to functions that
+ * call the `emit` function with the corresponding event name and arguments.
+ */
+export declare function useEmitAsProps<Name extends string>(emit: (name: Name, ...args: any[]) => void): Record<string, any>;

package/dist/composables/useEmitAsProps.js

@@ -0,0 +1,31 @@
+import { camelize, getCurrentInstance, toHandlerKey } from 'vue';
+// Vue doesn't have emits forwarding, in order to bind the emits we have to convert events into `onXXX` handlers
+// issue: https://github.com/vuejs/core/issues/5917
+/**
+ * The `useEmitAsProps` function is a TypeScript utility that converts emitted events into props for a
+ * Vue component.
+ * @param emit - The `emit` parameter is a function that is used to emit events from a component. It
+ * takes two parameters: `name` which is the name of the event to be emitted, and `...args` which are
+ * the arguments to be passed along with the event.
+ * @returns The function `useEmitAsProps` returns an object that maps event names to functions that
+ * call the `emit` function with the corresponding event name and arguments.
+ */
+export 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}`);
+    }
+    events?.forEach((ev) => {
+        result[toHandlerKey(camelize(ev))] = (...arg) => {
+            /*
+              this is for jsx usage to exicute if we use on={{...}} to add listeners
+            */
+            ;
+            vm?.props?.on?.[ev]?.(...arg);
+            return emit(ev, ...arg);
+        };
+    });
+    return result;
+}

package/dist/composables/useForwardExpose.d.ts

@@ -0,0 +1,6 @@
+import type { ComponentPublicInstance } from 'vue';
+export declare function useForwardExpose<T extends ComponentPublicInstance>(): {
+    forwardRef: (ref: Element | T | null) => void;
+    currentRef: import("vue").Ref<Element | T | null | undefined, Element | T | null | undefined>;
+    currentElement: import("vue").ComputedRef<HTMLElement>;
+};

package/dist/composables/useForwardExpose.js

@@ -0,0 +1,54 @@
+// reference: https://github.com/vuejs/rfcs/issues/258#issuecomment-1068697672
+import { unrefElement } from '@vueuse/core';
+import { computed, getCurrentInstance, ref } from 'vue';
+export function useForwardExpose() {
+    const instance = getCurrentInstance();
+    const currentRef = ref();
+    const currentElement = computed(() => {
+        // $el could be text/comment for non-single root normal or text root, thus we retrieve the nextElementSibling
+        // @ts-expect-error ignore ts error
+        return ['#text', '#comment'].includes(currentRef.value?.$el.nodeName) ? currentRef.value?.$el.nextElementSibling : unrefElement(currentRef);
+    });
+    // Do give us credit if you reference our code :D
+    // localExpose should only be assigned once else will create infinite loop
+    const localExpose = Object.assign({}, instance.exposed);
+    const ret = {};
+    // retrieve props for current instance
+    for (const key in instance.props) {
+        Object.defineProperty(ret, key, {
+            enumerable: true,
+            configurable: true,
+            get: () => instance.props[key],
+        });
+    }
+    // retrieve default exposed value
+    if (Object.keys(localExpose).length > 0) {
+        for (const key in localExpose) {
+            Object.defineProperty(ret, key, {
+                enumerable: true,
+                configurable: true,
+                get: () => localExpose[key],
+            });
+        }
+    }
+    // retrieve original first root element
+    Object.defineProperty(ret, '$el', {
+        enumerable: true,
+        configurable: true,
+        get: () => instance.vnode.el,
+    });
+    instance.exposed = ret;
+    function forwardRef(ref) {
+        currentRef.value = ref;
+        if (!ref)
+            return;
+        // retrieve the forwarded element
+        Object.defineProperty(ret, '$el', {
+            enumerable: true,
+            configurable: true,
+            get: () => (ref instanceof Element ? ref : ref.$el),
+        });
+        instance.exposed = ret;
+    }
+    return { forwardRef, currentRef, currentElement };
+}

package/dist/composables/useForwardProps.d.ts

@@ -0,0 +1,9 @@
+import type { MaybeRefOrGetter } from 'vue';
+/**
+ * The `useForwardProps` function in TypeScript takes in a set of props and returns a computed value
+ * that combines default props with assigned props from the current instance.
+ * @param {T} props - The `props` parameter is an object that represents the props passed to a
+ * component.
+ * @returns computed value that combines the default props, preserved props, and assigned props.
+ */
+export declare function useForwardProps<T extends Record<string, any>>(props: MaybeRefOrGetter<T>): import("vue").ComputedRef<T>;

package/dist/composables/useForwardProps.js

@@ -0,0 +1,32 @@
+import { camelize, computed, getCurrentInstance, toRef } from 'vue';
+/**
+ * The `useForwardProps` function in TypeScript takes in a set of props and returns a computed value
+ * that combines default props with assigned props from the current instance.
+ * @param {T} props - The `props` parameter is an object that represents the props passed to a
+ * component.
+ * @returns computed value that combines the default props, preserved props, and assigned props.
+ */
+export function useForwardProps(props) {
+    const vm = getCurrentInstance();
+    // Default value for declared props
+    const defaultProps = Object.keys(vm?.type.props ?? {}).reduce((prev, curr) => {
+        const defaultValue = (vm?.type.props[curr]).default;
+        if (defaultValue !== undefined)
+            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];
+        });
+        // Only return value from the props parameter
+        return Object.keys({ ...defaultProps, ...preservedProps }).reduce((prev, curr) => {
+            if (refProps.value[curr] !== undefined)
+                prev[curr] = refProps.value[curr];
+            return prev;
+        }, {});
+    });
+}

package/dist/composables/useFowardPropsEmits.d.ts

@@ -0,0 +1,14 @@
+import type { MaybeRefOrGetter } from 'vue';
+/**
+ * The function `useForwardPropsEmits` takes in props and an optional emit function, and returns a
+ * computed object that combines the parsed props and emits as props.
+ * @param {T} props - The `props` parameter is of type `T`, which is a generic type that extends the
+ * parameters of the `useForwardProps` function. It represents the props object that is passed to the
+ * `useForwardProps` function.
+ * @param [emit] - The `emit` parameter is a function that can be used to emit events. It takes two
+ * arguments: `name`, which is the name of the event to be emitted, and `args`, which are the arguments
+ * to be passed along with the event.
+ * @returns a computed property that combines the parsed
+ * props and emits as props.
+ */
+export declare function useForwardPropsEmits<T extends Record<string, any>, Name extends string>(props: MaybeRefOrGetter<T>, emit?: (name: Name, ...args: any[]) => void): import("vue").ComputedRef<T & Record<string, any>>;

package/dist/composables/useFowardPropsEmits.js

@@ -0,0 +1,23 @@
+import { computed } from 'vue';
+import { useEmitAsProps } from './useEmitAsProps';
+import { useForwardProps } from './useForwardProps';
+/**
+ * The function `useForwardPropsEmits` takes in props and an optional emit function, and returns a
+ * computed object that combines the parsed props and emits as props.
+ * @param {T} props - The `props` parameter is of type `T`, which is a generic type that extends the
+ * parameters of the `useForwardProps` function. It represents the props object that is passed to the
+ * `useForwardProps` function.
+ * @param [emit] - The `emit` parameter is a function that can be used to emit events. It takes two
+ * arguments: `name`, which is the name of the event to be emitted, and `args`, which are the arguments
+ * to be passed along with the event.
+ * @returns a computed property that combines the parsed
+ * props and emits as props.
+ */
+export function useForwardPropsEmits(props, emit) {
+    const parsedProps = useForwardProps(props);
+    const emitsAsProps = emit ? useEmitAsProps(emit) : {};
+    return computed(() => ({
+        ...parsedProps.value,
+        ...emitsAsProps,
+    }));
+}

package/dist/context/createContext.d.ts

@@ -0,0 +1,14 @@
+/**
+ * Create context for component
+ *  @description source from reka-ui
+ *  @see https://github.com/unovue/reka-ui/blob/v2/packages/core/src/shared/createContext.ts
+ *
+ */
+/**
+ * @param providerComponentName - The name(s) of the component(s) providing the context.
+ *
+ * There are situations where context can come from multiple components. In such cases, you might need to give an array of component names to provide your context, instead of just a single string.
+ *
+ * @param contextName The description for injection key symbol.
+ */
+export declare function createContext<ContextValue>(providerComponentName: string | string[], contextName?: string): readonly [<T extends ContextValue | null | undefined = ContextValue>(fallback?: T) => T extends null ? ContextValue | null : ContextValue, (contextValue: ContextValue) => ContextValue];

package/dist/context/createContext.js

@@ -0,0 +1,41 @@
+/**
+ * Create context for component
+ *  @description source from reka-ui
+ *  @see https://github.com/unovue/reka-ui/blob/v2/packages/core/src/shared/createContext.ts
+ *
+ */
+import { inject, provide } from 'vue';
+/**
+ * @param providerComponentName - The name(s) of the component(s) providing the context.
+ *
+ * There are situations where context can come from multiple components. In such cases, you might need to give an array of component names to provide your context, instead of just a single string.
+ *
+ * @param contextName The description for injection key symbol.
+ */
+export function createContext(providerComponentName, contextName) {
+    const symbolDescription = typeof providerComponentName === 'string' && !contextName
+        ? `${providerComponentName}Context`
+        : contextName;
+    const injectionKey = Symbol(symbolDescription);
+    /**
+     * @param fallback The context value to return if the injection fails.
+     *
+     * @throws When context injection failed and no fallback is specified.
+     * This happens when the component injecting the context is not a child of the root component providing the context.
+     */
+    const injectContext = (fallback) => {
+        const context = inject(injectionKey, fallback);
+        if (context)
+            return context;
+        if (context === null)
+            return context;
+        throw new Error(`Injection \`${injectionKey.toString()}\` not found. Component must be used within ${Array.isArray(providerComponentName)
+            ? `one of the following components: ${providerComponentName.join(', ')}`
+            : `\`${providerComponentName}\``}`);
+    };
+    const provideContext = (contextValue) => {
+        provide(injectionKey, contextValue);
+        return contextValue;
+    };
+    return [injectContext, provideContext];
+}

package/dist/index.d.ts

@@ -0,0 +1,4 @@
+export * from './composables/useForwardExpose';
+export * from './composables/useForwardProps';
+export * from './composables/useFowardPropsEmits';
+export * from './context/createContext';

package/dist/index.js

@@ -0,0 +1,4 @@
+export * from './composables/useForwardExpose';
+export * from './composables/useForwardProps';
+export * from './composables/useFowardPropsEmits';
+export * from './context/createContext';

package/package.json

@@ -0,0 +1,45 @@
+{
+  "name": "@raxium/vue-addons-shared",
+  "type": "module",
+  "version": "0.1.1",
+  "description": "Shared utilities for Raxium Vue Addons",
+  "author": {
+    "name": "Hwacc",
+    "email": "mshcccck@gmail.com",
+    "url": "https://github.com/raxium-ui/raxium-ui"
+  },
+  "license": "MIT",
+  "keywords": [
+    "raxium",
+    "raxium-ui",
+    "vue",
+    "addons",
+    "shared"
+  ],
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    }
+  },
+  "module": "./dist/index.js",
+  "files": [
+    "dist"
+  ],
+  "peerDependencies": {
+    "vue": "^3.5.27"
+  },
+  "dependencies": {
+    "@vueuse/core": "^14.1.0"
+  },
+  "devDependencies": {
+    "typescript": "^5.9.3"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "build": "tsc --project tsconfig.build.json",
+    "test": "echo \"Error: no test specified\" && exit 1"
+  }
+}