@teammodlr/ui-kit 2.1.45 → 2.1.47

package/src/components/select/examples/basic.vue

@@ -1,21 +1,26 @@
-<template>
-    <MSelect
-        v-model="value"
-        :options="options"
-        :option-value="'id'"
-        :option-label="'name'"
-        blank
-        />
-</template>
-
-<script lang="ts" setup>
-import { ref } from "vue";
-
-// make list of options with 1000 items
-const options = Array.from({ length: 50 }, (_, i) => ({
-    id: i,
-    name: `Option ${i+1}`
-}));
-
-const value = ref();
-</script>
+<template>
+    <MSelect
+        v-model="value"
+        :options="options"
+        :option-value="'id'"
+        :option-label="'name'"
+        blank
+        @update:value="testThis"
+        />
+</template>
+
+<script lang="ts" setup>
+import { ref } from "vue";
+
+// make list of options with 1000 items
+const options = Array.from({ length: 50 }, (_, i) => ({
+    id: i,
+    name: `Option ${i+1}`
+}));
+
+const value = ref();
+
+function testThis(value: any, option: any) {
+    alert('value: ' + value);
+}
+</script>

package/src/components/select/types.ts

@@ -0,0 +1,27 @@
+export type ValueAtom = string | number
+export type Value = ValueAtom | string[] | number[] | ValueAtom[]
+export type OnUpdateValue = (
+    value: string &
+        number &
+        ValueAtom &
+        string[] &
+        number[] &
+        ValueAtom[] &
+        (ValueAtom | null) &
+        (string[] | null) &
+        (number[] | null) &
+        (ValueAtom[] | null),
+    option: object & null
+) => void
+export type OnUpdateValueImpl = (
+    value:
+        | ValueAtom
+        | string[]
+        | number[]
+        | ValueAtom[]
+        | (ValueAtom | null)
+        | (string[] | null)
+        | (number[] | null)
+        | (ValueAtom[] | null),
+    option: object | null
+) => void

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/composables/useInput.ts

@@ -1,151 +1,151 @@
-// inspired by indielayer ui
-import type { PropType } from 'vue';
-import { ref, watch, inject, computed, onMounted, onUnmounted } from 'vue';
-import { useId } from './useCachedUid';
-import { FORM_STATE } from '../components/form/symbol';
-
-export interface FormInput {
-    focus: () => void;
-    validate: (value: any) => void;
-    setError: (value: string) => void;
-}
-
-export const useInput = (
-    props: any,
-    {
-        focus,
-        emit,
-        withListeners = true
-    }: {
-        focus: () => void;
-        emit: any;
-        withListeners?: boolean;
-    }
-) => {
-    const isFirstValidation = ref(true);
-    const formError = ref(props.error);
-
-    const id = useId(null, 'input');
-    const name = props.name ? props.name : id;
-    const _name = ref(name);
-
-    watch(
-        () => props.error,
-        value => (formError.value = value)
-    );
-    watch(
-        () => props.name,
-        value => (name.value = value)
-    );
-
-    const form = inject(FORM_STATE, null);
-
-    const reset = () => {
-        formError.value = '';
-        isFirstValidation.value = true;
-        emit('update:modelValue', '');
-    };
-
-    const setError = (value: string) => {
-        formError.value = value;
-    };
-
-    const validate = (value: any): boolean => {
-        value = value || props.modelValue;
-
-        isFirstValidation.value = false;
-
-        for (let i = 0; i < props.rules.length; i++) {
-            const item = props.rules[i];
-
-            let valid = true;
-
-            if (typeof item === 'function') {
-                valid = item(value);
-            } else if (Array.isArray(item) && item.length === 2) {
-                const { 0: rule, 1: options } = item;
-                valid = rule(value, options);
-            } else {
-                const rule = item.fn;
-                const { options } = item;
-
-                valid = rule(value, options);
-            }
-
-            if (valid !== true) {
-                formError.value = valid;
-                return false;
-            }
-        }
-
-        formError.value = '';
-        return true;
-    };
-
-    const inputListeners = withListeners
-        ? computed(() => {
-              return {
-                  blur: (event: Event) => emit('blur', event),
-                  focus: (event: Event) => emit('focus', event),
-                  input: (event: Event) => {
-                      emit(
-                          'update:modelValue',
-                          (event.target as HTMLInputElement).value
-                      );
-                  },
-                  change: (event: Event) => emit('change', event)
-              };
-          })
-        : {};
-
-    onMounted(() => {
-        form?.add(
-            _name.value,
-            focus,
-            // @ts-ignore
-            validate,
-            // @ts-ignore
-            setError
-        );
-    });
-
-    onUnmounted(() => {
-        form?.remove(_name.value);
-    });
-
-    return {
-        id,
-        isFirstValidation,
-        formError,
-        insideForm: form?.insideForm ?? false,
-        inputListeners,
-        reset,
-        validate,
-        setError,
-        //@ts-ignore
-        formDisabled: form?.disabled.value || false,
-        //@ts-ignore
-        formLoading: form?.loading.value || false
-    };
-};
-
-useInput.emits = (withListeners = true): string[] => {
-    return withListeners
-        ? ['update:modelValue', 'blur', 'focus', 'input', 'change']
-        : ['update:modelValue'];
-};
-
-useInput.props = () =>
-    ({
-        modelValue: [String, Number, Boolean, Object, Array] as PropType<
-            string | number | boolean | object | any[] | any[] | undefined
-        >,
-        name: String,
-        readonly: Boolean,
-        required: Boolean,
-        error: String,
-        rules: {
-            type: Array,
-            default: () => []
-        }
-    }) as const;
+// inspired by indielayer ui
+import type { PropType } from 'vue';
+import { ref, watch, inject, computed, onMounted, onUnmounted } from 'vue';
+import { useId } from './useCachedUid';
+import { FORM_STATE } from '../components/form/symbol';
+
+export interface FormInput {
+    focus: () => void;
+    validate: (value: any) => void;
+    setError: (value: string) => void;
+}
+
+export const useInput = (
+    props: any,
+    {
+        focus,
+        emit,
+        withListeners = true
+    }: {
+        focus: () => void;
+        emit: any;
+        withListeners?: boolean;
+    }
+) => {
+    const isFirstValidation = ref(true);
+    const formError = ref(props.error);
+
+    const id = useId(null, 'input');
+    const name = props.name ? props.name : id;
+    const _name = ref(name);
+
+    watch(
+        () => props.error,
+        value => (formError.value = value)
+    );
+    watch(
+        () => props.name,
+        value => (name.value = value)
+    );
+
+    const form = inject(FORM_STATE, null);
+
+    const reset = () => {
+        formError.value = '';
+        isFirstValidation.value = true;
+        emit('update:modelValue', '');
+    };
+
+    const setError = (value: string) => {
+        formError.value = value;
+    };
+
+    const validate = (value: any): boolean => {
+        value = value || props.modelValue;
+
+        isFirstValidation.value = false;
+
+        for (let i = 0; i < props.rules.length; i++) {
+            const item = props.rules[i];
+
+            let valid = true;
+
+            if (typeof item === 'function') {
+                valid = item(value);
+            } else if (Array.isArray(item) && item.length === 2) {
+                const { 0: rule, 1: options } = item;
+                valid = rule(value, options);
+            } else {
+                const rule = item.fn;
+                const { options } = item;
+
+                valid = rule(value, options);
+            }
+
+            if (valid !== true) {
+                formError.value = valid;
+                return false;
+            }
+        }
+
+        formError.value = '';
+        return true;
+    };
+
+    const inputListeners = withListeners
+        ? computed(() => {
+              return {
+                  blur: (event: Event) => emit('blur', event),
+                  focus: (event: Event) => emit('focus', event),
+                  input: (event: Event) => {
+                      emit(
+                          'update:modelValue',
+                          (event.target as HTMLInputElement).value
+                      );
+                  },
+                  change: (event: Event) => emit('change', event)
+              };
+          })
+        : {};
+
+    onMounted(() => {
+        form?.add(
+            _name.value,
+            focus,
+            // @ts-ignore
+            validate,
+            // @ts-ignore
+            setError
+        );
+    });
+
+    onUnmounted(() => {
+        form?.remove(_name.value);
+    });
+
+    return {
+        id,
+        isFirstValidation,
+        formError,
+        insideForm: form?.insideForm ?? false,
+        inputListeners,
+        reset,
+        validate,
+        setError,
+        //@ts-ignore
+        formDisabled: form?.disabled.value || false,
+        //@ts-ignore
+        formLoading: form?.loading.value || false
+    };
+};
+
+useInput.emits = (withListeners = true): string[] => {
+    return withListeners
+        ? ['update:modelValue', 'blur', 'focus', 'input', 'change']
+        : ['update:modelValue'];
+};
+
+useInput.props = () =>
+    ({
+        modelValue: [String, Number, Boolean, Object, Array] as PropType<
+            string | number | boolean | object | any[] | any[] | undefined
+        >,
+        name: String,
+        readonly: Boolean,
+        required: Boolean,
+        error: String,
+        rules: {
+            type: Array,
+            default: () => []
+        }
+    }) as const;

package/src/types/props.ts

@@ -1,19 +1,21 @@
-export type Size = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
-
-export type Color =
-    | 'white'
-    | 'black'
-    | 'blue'
-    | 'green'
-    | 'red'
-    | 'yellow'
-    | 'gray';
-
-export type Variant =
-    | 'default'
-    | 'tertiary'
-    | 'primary'
-    | 'dark'
-    | 'success'
-    | 'warning'
-    | 'error';
+export type Size = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+
+export type Color =
+    | 'white'
+    | 'black'
+    | 'blue'
+    | 'green'
+    | 'red'
+    | 'yellow'
+    | 'gray';
+
+export type Variant =
+    | 'default'
+    | 'tertiary'
+    | 'primary'
+    | 'dark'
+    | 'success'
+    | 'warning'
+    | 'error';
+
+export type MaybeArray<T> = T | T[];

package/src/utils/call.ts

@@ -0,0 +1,34 @@
+type AnyFunction = (...args: any[]) => any
+
+function call(funcs: MaybeArray<() => void>): void
+function call<A1>(funcs: MaybeArray<(a1: A1) => void>, a1: A1): void
+function call<A1, A2>(
+    funcs: MaybeArray<(a1: A1, a2: A2) => void>,
+    a1: A1,
+    a2: A2
+): void
+function call<A1, A2, A3>(
+    funcs: MaybeArray<(a1: A1, a2: A2, a3: A3) => void>,
+    a1: A1,
+    a2: A2,
+    a3: A3
+): void
+function call<A1, A2, A3, A4>(
+    funcs: MaybeArray<(a1: A1, a2: A2, a3: A3, a4: A4) => void>,
+    a1: A1,
+    a2: A2,
+    a3: A3,
+    a4: A4
+): void
+function call<A extends any[]>(
+    funcs: AnyFunction[] | AnyFunction,
+    ...args: A
+): void {
+    if (Array.isArray(funcs)) {
+        funcs.forEach((func) => (call as any)(func, ...args))
+    } else return funcs(...args)
+}
+
+export { call }
+
+export type MaybeArray<T> = T | T[]

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;
+}