@teammodlr/ui-kit 2.1.46 → 2.1.49

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.49",
   "description": "",
   "main": "lib/index.cjs.js",
   "module": "lib/index.es.js",

package/src/components/configprovider/ConfigProvider.vue

@@ -1,26 +1,38 @@
-<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";
+import { type Ref, toRefs } from 'vue';
+interface ConfigProviderContextValue {
+    useId?: () => string,
+    dir?: Ref<string>
+}
+
+export const [injectConfigProviderContext, provideConfigProviderContext]
+    = createContext<ConfigProviderContextValue>('ConfigProvider')
+
+export interface ConfigProviderProps {
+    useId?: () => string,
+    dir?: string
+}
+
+export default {
+    name: 'ConfigProvider',
+}
+</script>
+
+<script setup lang="ts">
+
+const props = withDefaults(defineProps<ConfigProviderProps>(), {
+    useId: undefined,
+    dir: 'ltr'
+})
+
+const { dir } = toRefs(props)
+
+provideConfigProviderContext({
+    useId: props.useId,
+    dir
+})
+</script>
+<template>
+    <slot />
+</template>

package/src/components/confirm/ConfirmProvider.vue

@@ -1,83 +1,82 @@
-<template>
-    <slot />
-    <template v-if="dialogList.length > 0">
-        <Teleport :to="teleportTo ?? 'body'">
-            <MConfirm
-                v-for="dialog in dialogList"
-                :key="dialog.key"
-                :internalKey="dialog.key"
-                :title="dialog.title"
-                :content="dialog.content"
-                :okText="dialog.okText"
-                :cancelText="dialog.cancelText"
-                :on-ok="dialog.onOk"
-                :on-cancel="dialog.onCancel"
-                :ok-variant="dialog.okVariant"
-                ref="dialogRefs" />
-        </Teleport>
-    </template>
-</template>
-
-<script lang="ts">
-import { defineComponent, provide, ref } from 'vue';
-import { useId } from '../../composables/useCachedUid';
-import { providerProps } from './providerProps';
-import type { Confirm, ConfirmApiInjection, ConfirmOptions } from './types';
-import MConfirm from './Confirm.vue';
-
-interface PrivateConfirm extends Confirm {
-    key: string;
-}
-
-interface PrivateConfirmRef extends Confirm {
-    key: string;
-    hide: () => void;
-}
-
-export default defineComponent({
-    name: 'ConfirmProvider',
-    props: providerProps,
-    components: {
-        MConfirm
-    },
-    setup(props, { slots }) {
-        const dialogListRef = ref<PrivateConfirm[]>([]);
-        const dialogRefs: Record<string, PrivateConfirmRef> = {};
-
-        function create(options: ConfirmOptions): Confirm {
-            const id = useId(null, 'm-confirm');
-            const key = id;
-            const dialog: PrivateConfirm = {
-                ...options,
-                key,
-                destroy: () => {
-                    dialogRefs[key].hide();
-                }
-            };
-
-            dialogListRef.value.push(dialog);
-            return dialog;
-        }
-
-        function destroyAll(): void {
-            // @ts-ignore
-            Object.values(dialogRefs.value).forEach(dialog => {
-                dialog.hide();
-            });
-        }
-
-        const api: ConfirmApiInjection = {
-            create,
-            destroyAll
-        } as const;
-
-        provide('m-confirm', api);
-
-        return {
-            ...api,
-            dialogRefs,
-            dialogList: dialogListRef
-        };
-    }
-});
-</script>
+<template>
+    <slot />
+    <template v-if="dialogList.length > 0">
+        <Teleport :to="teleportTo ?? 'body'">
+            <MConfirm
+                v-for="dialog in dialogList"
+                :key="dialog.key"
+                :internalKey="dialog.key"
+                :title="dialog.title"
+                :content="dialog.content"
+                :okText="dialog.okText"
+                :cancelText="dialog.cancelText"
+                :on-ok="dialog.onOk"
+                :on-cancel="dialog.onCancel"
+                :ok-variant="dialog.okVariant"
+                ref="dialogRefs" />
+        </Teleport>
+    </template>
+</template>
+
+<script lang="ts">
+import { defineComponent, provide, ref } from 'vue';
+import { useId } from '../../composables/useCachedUid';
+import { providerProps } from './providerProps';
+import type { Confirm, ConfirmApiInjection, ConfirmOptions } from './types';
+import MConfirm from './Confirm.vue';
+
+interface PrivateConfirm extends Confirm {
+    key: string;
+}
+
+interface PrivateConfirmRef extends Confirm {
+    key: string;
+    hide: () => void;
+}
+
+export default defineComponent({
+    name: 'ConfirmProvider',
+    props: providerProps,
+    components: {
+        MConfirm
+    },
+    setup(props, { slots }) {
+        const dialogListRef = ref<PrivateConfirm[]>([]);
+        const dialogRefs: Record<string, PrivateConfirmRef> = {};
+        const id = useId(null, 'm-confirm');
+        function create(options: ConfirmOptions): Confirm {
+            const key = id;
+            const dialog: PrivateConfirm = {
+                ...options,
+                key,
+                destroy: () => {
+                    dialogRefs[key].hide();
+                }
+            };
+
+            dialogListRef.value.push(dialog);
+            return dialog;
+        }
+
+        function destroyAll(): void {
+            // @ts-ignore
+            Object.values(dialogRefs.value).forEach(dialog => {
+                dialog.hide();
+            });
+        }
+
+        const api: ConfirmApiInjection = {
+            create,
+            destroyAll
+        } as const;
+
+        provide('m-confirm', api);
+
+        return {
+            ...api,
+            dialogRefs,
+            dialogList: dialogListRef
+        };
+    }
+});
+</script>

package/src/composables/useCachedUid.ts

@@ -1,4 +1,4 @@
-import {inject} from 'vue';
+import { injectConfigProviderContext } from '../components/configprovider/ConfigProvider.vue';
 
 let count = 0
 
@@ -6,9 +6,8 @@ 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,45 @@
-import type { InjectionKey } from 'vue';
-
-export function createInjectionKey<T>(key: string): InjectionKey<T> {
-    return key as any;
-}
+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
+}