@teammodlr/ui-kit 2.1.46 → 2.1.47

package/lib/utils/injection.d.ts

@@ -1,2 +1,3 @@
-import type { InjectionKey } from 'vue';
+import { type InjectionKey } from 'vue';
 export declare function createInjectionKey<T>(key: string): InjectionKey<T>;
+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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@teammodlr/ui-kit",
-  "version": "2.1.46",
+  "version": "2.1.47",
   "description": "",
   "main": "lib/index.cjs.js",
   "module": "lib/index.es.js",
@@ -89,4 +89,4 @@
     "maska": "^2.1.9",
     "treemate": "^0.3.11"
   }
-}
+}

package/src/components/configprovider/ConfigProvider.vue

@@ -1,26 +1,31 @@
-<script lang="ts">
-export interface ConfigProviderProps {
-    useId?: () => string
-}
-export default {
-    name: 'ConfigProvider',
-}
-</script>
-
-<script setup lang="ts">
-import {provide} from "vue";
-import type {ConfigProviderInjection} from "./types";
-
-const props = withDefaults(defineProps<ConfigProviderProps>(), {
-    useId: undefined
-})
-
-const api: ConfigProviderInjection = {
-    useId: props['useId'],
-} as const;
-
-provide('m-config', api);
-</script>
-<template>
-    <slot />
-</template>
+<script lang="ts">
+import { createContext } from "../../utils/injection";
+
+interface ConfigProviderContextValue {
+    useId?: () => string
+}
+
+export const [injectConfigProviderContext, provideConfigProviderContext] = createContext<ConfigProviderContextValue>('ConfigProvider');
+
+export interface ConfigProviderProps {
+    useId?: () => string
+}
+
+export default {
+    name: 'ConfigProvider',
+}
+</script>
+
+<script setup lang="ts">
+
+const props = withDefaults(defineProps<ConfigProviderProps>(), {
+    useId: undefined
+})
+
+provideConfigProviderContext({
+    useId: props.useId
+})
+</script>
+<template>
+    <slot />
+</template>

package/src/composables/useCachedUid.ts

@@ -1,4 +1,4 @@
-import {inject} from 'vue';
+import { injectConfigProviderContext } from '../components/configprovider/ConfigProvider.vue';
 
 let count = 0
 
@@ -6,7 +6,7 @@ export function useId(deterministicId?: string | null | undefined, prefix = 'ui'
     if (deterministicId) {
         return deterministicId;
     }
-    const {useId} = inject('m-config', {useId: undefined});
+    const { useId } = injectConfigProviderContext({ useId: undefined })
     if (useId && typeof useId === 'function') {
         // @ts-ignore
         return `${prefix}-${useId()}`;

package/src/utils/injection.ts

@@ -1,5 +1,49 @@
-import type { InjectionKey } from 'vue';
+import { type InjectionKey, inject, provide } from 'vue';
 
 export function createInjectionKey<T>(key: string): InjectionKey<T> {
     return key as any;
 }
+
+export function createContext<ContextValue>(
+    providerComponentName: string | string[],
+    contextName?: string
+) {
+    const symbolDescription
+        = typeof providerComponentName === 'string' && !contextName
+        ? `${providerComponentName}Context`
+        : contextName
+
+    const injectionKey: InjectionKey<ContextValue | null> = Symbol(symbolDescription);
+
+    const injectContext = <
+        T extends ContextValue | null | undefined = ContextValue,
+    >(
+        fallback?: T,
+    ): T extends null ? ContextValue | null : ContextValue => {
+        const context = inject(injectionKey, fallback);
+        if (context) {
+            return context;
+        }
+
+        if (context === null) {
+            return context as any;
+        }
+
+        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: ContextValue) => {
+        provide(injectionKey, contextValue);
+        return contextValue;
+    }
+
+    return [injectContext, provideContext] as const;
+}