@teammodlr/ui-kit 2.1.43 → 2.1.44

package/lib/styles/theme.css.d.ts

@@ -33,7 +33,7 @@ export declare const fontSizeScale: {
     xlarge: string;
     xxlarge: string;
 };
-export declare const fontSizeVariants: Record<"base" | "small" | "large" | "xsmall" | "xlarge" | "xxlarge", string>;
+export declare const fontSizeVariants: Record<"small" | "base" | "large" | "xsmall" | "xlarge" | "xxlarge", string>;
 export declare const shadows: {
     sm: string;
     md: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@teammodlr/ui-kit",
-  "version": "2.1.43",
+  "version": "2.1.44",
   "description": "",
   "main": "lib/index.cjs.js",
   "module": "lib/index.es.js",

package/src/components/configprovider/ConfigProvider.vue

@@ -0,0 +1,26 @@
+<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>

package/src/components/configprovider/types.ts

@@ -0,0 +1,3 @@
+export interface ConfigProviderInjection {
+    useId?: () => string;
+}

package/src/components/confirm/ConfirmProvider.vue

@@ -20,7 +20,7 @@
 
 <script lang="ts">
 import { defineComponent, provide, ref } from 'vue';
-import { useCachedUid } from '../../composables/useCachedUid';
+import { useId } from '../../composables/useCachedUid';
 import { providerProps } from './providerProps';
 import type { Confirm, ConfirmApiInjection, ConfirmOptions } from './types';
 import MConfirm from './Confirm.vue';
@@ -45,8 +45,8 @@ export default defineComponent({
         const dialogRefs: Record<string, PrivateConfirmRef> = {};
 
         function create(options: ConfirmOptions): Confirm {
-            const { id } = useCachedUid('m-confirm');
-            const key = id.value;
+            const id = useId(null, 'm-confirm');
+            const key = id;
             const dialog: PrivateConfirm = {
                 ...options,
                 key,

package/src/components/index.ts

@@ -1,4 +1,5 @@
 export { default as MRenderer } from './renderer/renderer';
+export { default as MConfigProvider } from './configprovider/ConfigProvider.vue';
 export { default as MAvatar } from './avatar/Avatar.vue';
 export { default as MAvatarGroup } from './avatargroup/AvatarGroup.vue';
 export { default as MBadge } from './badge/Badge.vue';

package/src/components/messageprovider/MessageProvider.vue

@@ -43,7 +43,7 @@ import type {
 } from './types';
 import type { PropType } from 'vue';
 import MMessage from './Message.vue';
-import { useCachedUid } from '../../composables/useCachedUid';
+import { useId } from '../../composables/useCachedUid';
 import * as style from './style';
 import { modalScale } from '../../styles/transitions.css';
 import { useIsServer } from '../../composables/useIsServer';

package/src/composables/useCachedUid.ts

@@ -1,49 +1,17 @@
-// https://github.com/liip/chusho/blob/main/packages/chusho/lib/composables/useCachedUid.ts#L20-L41 - Legend :D
-import { onMounted, readonly, ref } from 'vue';
-import { getElement } from './element';
-import type { ComponentPublicInstance, Ref } from 'vue';
-
-const UID_CACHE_ATTR = 'data-modlr-ssr-uid';
-
-// @ts-nocheck
-type CacheElement = HTMLElement | SVGElement | ComponentPublicInstance | null;
-
-export function uid(prefix = ''): string {
-    const id =
-        Date.now().toString(36) + Math.random().toString(36).substring(2);
-    return prefix ? `${prefix}-${id}` : id;
-}
-
-export interface IUseCacheUid {
-    id: Readonly<Ref<string>>;
-    cacheAttrs: {
-        ref: Ref<CacheElement>;
-        [UID_CACHE_ATTR]?: string;
-    };
-}
-
-export function useCachedUid(prefix?: string): IUseCacheUid {
-    const id = ref(uid(prefix));
-    const cacheElement = ref<CacheElement>(null);
-
-    onMounted(() => {
-        if (cacheElement.value) {
-            const element = getElement(cacheElement);
-            const serverId = element?.getAttribute(UID_CACHE_ATTR);
-
-            if (serverId) {
-                id.value = serverId;
-            }
-
-            element?.removeAttribute(UID_CACHE_ATTR);
-        }
-    });
-
-    return {
-        id: readonly(id),
-        cacheAttrs: {
-            ref: cacheElement,
-            [UID_CACHE_ATTR]: typeof window === undefined ? id.value : undefined
-        }
-    };
+import {inject} from 'vue';
+
+let count = 0
+
+export function useId(deterministicId?: string | null | undefined, prefix = 'ui') {
+    if (deterministicId) {
+        return deterministicId;
+    }
+    console.log(count);
+    const {useId} = inject('m-config', {useId: undefined});
+    if (useId && typeof useId === 'function') {
+        // @ts-ignore
+        return `${prefix}-${useId()}`;
+    }
+
+    return `${prefix}-${count++}`;
 }

package/src/composables/useInput.ts

@@ -1,7 +1,7 @@
 // inspired by indielayer ui
 import type { PropType } from 'vue';
 import { ref, watch, inject, computed, onMounted, onUnmounted } from 'vue';
-import { useCachedUid } from './useCachedUid';
+import { useId } from './useCachedUid';
 import { FORM_STATE } from '../components/form/symbol';
 
 export interface FormInput {
@@ -25,8 +25,8 @@ export const useInput = (
     const isFirstValidation = ref(true);
     const formError = ref(props.error);
 
-    const { id } = useCachedUid('input');
-    const name = props.name ? props.name : id.value;
+    const id = useId(null, 'input');
+    const name = props.name ? props.name : id;
     const _name = ref(name);
 
     watch(