@teammodlr/ui-kit 2.1.8 → 2.1.10

package/src/composables/usePopper.ts

@@ -1,23 +1,36 @@
-import { ref, watch, nextTick, onMounted, onBeforeUnmount, watchEffect } from "vue";
+import {
+    ref,
+    watch,
+    nextTick,
+    onMounted,
+    onBeforeUnmount,
+    watchEffect
+} from 'vue';
 import { createPopper as createInternalPopper } from '@popperjs/core';
 
-import type { Ref, WatchStopHandle } from "vue";
-import type { Placement, Modifier, Instance, Rect, VirtualElement } from '@popperjs/core';
+import type { Ref, WatchStopHandle } from 'vue';
+import type {
+    Placement,
+    Modifier,
+    Instance,
+    Rect,
+    VirtualElement
+} from '@popperjs/core';
 
 type OffsetsFunction = (options: {
-    popper: Rect,
-    reference: Rect,
-    placement: Placement
+    popper: Rect;
+    reference: Rect;
+    placement: Placement;
 }) => [number?, number?];
 
 interface UsePopperOptions {
-    placement: Ref<Placement>,
-    transfer: Ref<boolean | string>,
-    wrapper: Ref<HTMLElement | null | undefined>,
-    isDrop?: boolean,
-    reference?: Ref<HTMLElement | VirtualElement | null | undefined>,
-    popper?: Ref<HTMLElement | null | undefined>,
-    offset?: OffsetsFunction | [number?, number?]
+    placement: Ref<Placement>;
+    transfer: Ref<boolean | string>;
+    wrapper: Ref<HTMLElement | null | undefined>;
+    isDrop?: boolean;
+    reference?: Ref<HTMLElement | VirtualElement | null | undefined>;
+    popper?: Ref<HTMLElement | null | undefined>;
+    offset?: OffsetsFunction | [number?, number?];
 }
 
 export type { Placement, VirtualElement };
@@ -38,7 +51,7 @@ export const placementWhileList = Object.freeze([
     'right',
     'right-start',
     'right-end'
-] as Placement[])
+] as Placement[]);
 
 export interface TransferNode extends Node {
     __transferNode?: Node;
@@ -48,13 +61,15 @@ export interface TransferNode extends Node {
 export function usePopper(initialOptions: UsePopperOptions) {
     const { placement, transfer, wrapper, isDrop = false } = initialOptions;
 
-    const reference: Ref<HTMLElement | null | undefined> = (initialOptions.reference as any) ?? ref(null);
-    const popper: Ref<HTMLElement | null | undefined> = initialOptions.popper ?? ref(null);
-    const transferTo: Ref<String> = ref('body');
+    const reference: Ref<HTMLElement | null | undefined> =
+        (initialOptions.reference as any) ?? ref(null);
+    const popper: Ref<HTMLElement | null | undefined> =
+        initialOptions.popper ?? ref(null);
+    const transferTo: Ref<string> = ref('body');
 
     const options: {
-        placement: Placement,
-        modifiers: Partial<Modifier<any, any>>[]
+        placement: Placement;
+        modifiers: Partial<Modifier<any, any>>[];
     } = {
         placement: placement.value,
         modifiers: [
@@ -80,12 +95,12 @@ export function usePopper(initialOptions: UsePopperOptions) {
             phase: 'afterWrite',
             fn({ state }) {
                 const origin = setPopperDropOrigin(state.placement);
-                
+
                 if (origin) {
                     state.elements.popper.style.transformOrigin = origin;
                 }
             }
-        })
+        });
     }
 
     if (initialOptions.offset) {
@@ -94,7 +109,7 @@ export function usePopper(initialOptions: UsePopperOptions) {
             options: {
                 offset: initialOptions.offset
             }
-        })
+        });
     }
 
     let popperInstance: Instance | null = null;
@@ -104,7 +119,7 @@ export function usePopper(initialOptions: UsePopperOptions) {
         popperInstance && popperInstance?.setOptions({ placement: value });
     });
 
-    let parentWidth = ref(0);
+    const parentWidth = ref(0);
 
     watchEffect(() => {
         if (wrapper.value && popper.value) {
@@ -118,7 +133,7 @@ export function usePopper(initialOptions: UsePopperOptions) {
         watch(transfer, value => {
             setTransformTo(value);
             updatePopper();
-        })
+        });
     }
 
     onMounted(() => {
@@ -129,11 +144,11 @@ export function usePopper(initialOptions: UsePopperOptions) {
 
     function updatePopper() {
         nextTick(() => {
-            popperInstance && popperInstance.forceUpdate()
-            if(wrapper.value) {
+            popperInstance && popperInstance.forceUpdate();
+            if (wrapper.value) {
                 parentWidth.value = wrapper.value.clientWidth;
             }
-        })
+        });
     }
 
     function createPopper() {
@@ -145,19 +160,24 @@ export function usePopper(initialOptions: UsePopperOptions) {
         const cancelWatchPopper = watch(popper, createPopperInstance);
 
         stopWatchPopper = () => {
-            cancelWatchReference()
-            cancelWatchPopper()
-        }
+            cancelWatchReference();
+            cancelWatchPopper();
+        };
     }
 
     function setTransformTo(value: boolean | string) {
-        transferTo.value = typeof value === 'boolean' ? (value ? 'body' : '') : value;
+        transferTo.value =
+            typeof value === 'boolean' ? (value ? 'body' : '') : value;
     }
 
     function createPopperInstance() {
         if (reference.value && popper.value) {
-            popperInstance && popperInstance.destroy()
-            popperInstance = createInternalPopper(reference.value, popper.value as HTMLElement, options);
+            popperInstance && popperInstance.destroy();
+            popperInstance = createInternalPopper(
+                reference.value,
+                popper.value,
+                options
+            );
             updatePopper();
         }
     }
@@ -185,10 +205,11 @@ export function usePopper(initialOptions: UsePopperOptions) {
 
 function setPopperDropOrigin(placement: Placement) {
     if (placement !== 'left' && placement !== 'right') {
-        const [placementStart, placementEnd] = placement.split('-')
+        const [placementStart, placementEnd] = placement.split('-');
 
-        return placementStart === 'bottom' || (placementStart !== 'top' && placementEnd === 'start')
+        return placementStart === 'bottom' ||
+            (placementStart !== 'top' && placementEnd === 'start')
             ? 'center top'
-            : 'center bottom'
+            : 'center bottom';
     }
 }

package/src/composables/useZIndex.ts

@@ -1,5 +1,5 @@
-import type {InjectionKey, Ref} from "vue";
-import {computed, inject, ref, unref} from "vue";
+import type { InjectionKey, Ref } from 'vue';
+import { computed, inject, ref, unref } from 'vue';
 
 const zIndex = ref(0);
 export const initialZIndex = 1000;
@@ -17,7 +17,7 @@ export const useZIndex = (override?: Ref<number>) => {
     });
 
     const current = computed(() => {
-        return initial.value + zIndex.value
+        return initial.value + zIndex.value;
     });
 
     const nextZIndex = () => {
@@ -29,5 +29,5 @@ export const useZIndex = (override?: Ref<number>) => {
         initial,
         current,
         nextZIndex
-    }
-}
+    };
+};

package/src/create.ts

@@ -3,13 +3,15 @@ import type { App } from 'vue';
 export type ModlrUIOptions = {
     prefix?: string;
     components?: any;
-}
+};
 
 const defaultOptions: ModlrUIOptions = {
     prefix: 'M'
 };
 
-const create = (createOptions: ModlrUIOptions = {}) => {
+const create = (
+    createOptions: ModlrUIOptions = {}
+): { install: (app: App, installOptions?: ModlrUIOptions) => void } => {
     const install = (app: App, installOptions: ModlrUIOptions = {}) => {
         const options = {
             ...defaultOptions,
@@ -19,16 +21,18 @@ const create = (createOptions: ModlrUIOptions = {}) => {
 
         if (options.components) {
             options.components.forEach((component: any) => {
-                const name = component.name.startsWith('M') ? component.name.slice(1) : component.name
+                const name = component.name.startsWith('M')
+                    ? component.name.slice(1)
+                    : component.name;
 
-                app.component(`${options.prefix}${name}`, component)
+                app.component(`${options.prefix}${name}`, component);
             });
         }
     };
 
     return {
         install
-    }
-}
+    };
+};
 
 export default create;

package/src/examples/cards/cards.stories.ts

@@ -1,9 +1,9 @@
-import Sidebar from "./sidebar.vue";
-import {createStory} from "../../__storybook__";
+import Sidebar from './sidebar.vue';
+import { createStory } from '../../__storybook__';
 
 export default {
     component: Sidebar,
     title: 'Examples/Cards/Sidebar'
-}
+};
 
 export const Basic = createStory(Sidebar);

package/src/examples/modal/modal.stories.ts

@@ -1,9 +1,9 @@
-import Modal from "./modal.vue";
-import {createStory} from "../../__storybook__";
+import Modal from './modal.vue';
+import { createStory } from '../../__storybook__';
 
 export default {
     component: Modal,
     title: 'Examples/Modals'
-}
+};
 
 export const Basic = createStory(Modal);

package/src/exports/nuxt.js

@@ -1,33 +1,35 @@
-import { defineNuxtModule, addPlugin, createResolver } from '@nuxt/kit'
-import { fileURLToPath } from 'node:url'
+import { defineNuxtModule, addPlugin, createResolver } from '@nuxt/kit';
+import { fileURLToPath } from 'node:url';
 
 export default defineNuxtModule({
     meta: {
         name: '@teammodlr/ui-kit',
         configKey: 'modlr',
         compatibility: {
-            nuxt: '^3.0.0-rc.1',
-        },
+            nuxt: '^3.0.0-rc.1'
+        }
     },
     defaults: {
-        prefix: 'M',
+        prefix: 'M'
     },
     async setup(options, nuxt) {
         // Create resolver to resolve relative paths
-        const { resolve } = createResolver(import.meta.url)
+        const { resolve } = createResolver(import.meta.url);
 
-        nuxt.options.runtimeConfig.public.modlrUiOptions = options
+        nuxt.options.runtimeConfig.public.modlrUiOptions = options;
 
         // plugin install
-        addPlugin(resolve('./nuxt.plugin.js'))
+        addPlugin(resolve('./nuxt.plugin.js'));
 
         // nuxt install
-        nuxt.hook('components:dirs', (dirs) => {
+        nuxt.hook('components:dirs', dirs => {
             dirs.push({
-                path: fileURLToPath(new URL('../src/components', import.meta.url)),
+                path: fileURLToPath(
+                    new URL('../src/components', import.meta.url)
+                ),
                 extensions: ['vue', 'tsx'],
-                prefix: options?.prefix ? options?.prefix : 'M',
-            })
-        })
-    },
-})
+                prefix: options?.prefix ? options?.prefix : 'M'
+            });
+        });
+    }
+});

package/src/exports/nuxt.plugin.js

@@ -1,8 +1,8 @@
-import { defineNuxtPlugin } from '#app'
-import create from '../create'
+import { defineNuxtPlugin } from '#app';
+import create from '../create';
 
-export default defineNuxtPlugin((nuxtApp) => {
-    const UI = create(nuxtApp.$config.modlrUiOptions)
+export default defineNuxtPlugin(nuxtApp => {
+    const UI = create(nuxtApp.$config.modlrUiOptions);
 
-    nuxtApp.vueApp.use(UI)
-})
+    nuxtApp.vueApp.use(UI);
+});

package/src/index.ts

@@ -1,7 +1,5 @@
-// import './css/index.css';
 export * from './components';
 export * from './composables';
 export * as theme from './styles/theme.css';
 export { default as createUI } from './create';
 export { default } from './install';
-

package/src/install.ts

@@ -1,8 +1,8 @@
-import * as components from './components'
-import create from './create'
+import * as components from './components';
+import create from './create';
 
 export default create({
     components: Object.keys(components).map(
-        (key) => components[key as keyof object],
-    ),
-})
+        key => components[key as keyof object]
+    )
+});

package/src/shims-vue.d.ts

@@ -1,6 +1,6 @@
 // shims-vue.d.ts
 declare module '*.vue' {
-    import type { DefineComponent } from 'vue'
-    const component: DefineComponent<{}, {}, any>
-    export default component
+    import type { DefineComponent } from 'vue';
+    const component: DefineComponent<{}, {}, any>;
+    export default component;
 }

package/src/styles/theme.css.ts

@@ -1,4 +1,8 @@
-import {createGlobalTheme, globalStyle, styleVariants} from '@vanilla-extract/css';
+import {
+    createGlobalTheme,
+    globalStyle,
+    styleVariants
+} from '@vanilla-extract/css';
 
 export const spaceScale = {
     '0': '0px',
@@ -13,57 +17,60 @@ export const spaceScale = {
     '5': '18px',
     '6': '20px',
     '7': '24px',
-    '8': '28px',
+    '8': '28px'
 };
 
-export const marginVariants = styleVariants(spaceScale, (space) => ({
+export const marginVariants = styleVariants(spaceScale, space => ({
     margin: space
 }));
 
 export const borderRadiusScale = {
-    'none': '0px',
-    'xsmall': '1px',
-    'small': '2px',
-    'default': '4px',
-    'medium': '6px',
-    'large': '8px',
-    'xlarge': '12px',
-    'full': '9999px',
+    none: '0px',
+    xsmall: '1px',
+    small: '2px',
+    default: '4px',
+    medium: '6px',
+    large: '8px',
+    xlarge: '12px',
+    full: '9999px'
 };
 
-export const borderRadiusVariants = styleVariants(borderRadiusScale, (borderRadius) => ({
-    borderRadius: borderRadius
-}));
+export const borderRadiusVariants = styleVariants(
+    borderRadiusScale,
+    borderRadius => ({
+        borderRadius
+    })
+);
 
 export const fontSizeScale = {
-    'base': '14px',
-    'xsmall': '10px',
-    'small': '12px',
-    'large': '16px',
-    'xlarge': '18px',
-    'xxlarge': '20px',
+    base: '14px',
+    xsmall: '10px',
+    small: '12px',
+    large: '16px',
+    xlarge: '18px',
+    xxlarge: '20px'
 };
 
-export const fontSizeVariants = styleVariants(fontSizeScale, (fontSize) => ({
-    fontSize: fontSize
+export const fontSizeVariants = styleVariants(fontSizeScale, fontSize => ({
+    fontSize
 }));
 
 export const shadows = {
-    'sm': '0px 3px 6px 1px rgb(154 161 171 / 15%)',
-    'md': '0px 4px 10px 1px rgb(154 161 171 / 20%)',
-    'lg': '0px 7px 14px 1px rgb(154 161 171 / 23%)'
-}
+    sm: '0px 3px 6px 1px rgb(154 161 171 / 15%)',
+    md: '0px 4px 10px 1px rgb(154 161 171 / 20%)',
+    lg: '0px 7px 14px 1px rgb(154 161 171 / 23%)'
+};
 
-export const shadowVariants = styleVariants(shadows, (shadow) => ({
+export const shadowVariants = styleVariants(shadows, shadow => ({
     boxShadow: shadow
 }));
 
 export const transitions = {
-    'default': 'cubic-bezier(0.4, 0, 0.2, 1)',
-}
+    default: 'cubic-bezier(0.4, 0, 0.2, 1)'
+};
 
-export const transitionsVariants = styleVariants(transitions, (transition) => ({
-    transition: transition
+export const transitionsVariants = styleVariants(transitions, transition => ({
+    transition
 }));
 
 export const themeVars = createGlobalTheme(':root', {
@@ -87,7 +94,7 @@ export const themeVars = createGlobalTheme(':root', {
             600: '#6e7781',
             700: '#57606a',
             800: '#424a53',
-            900: '#32383f',
+            900: '#32383f'
         },
         blue: {
             50: 'hsl(214,100%,96.9%)',
@@ -99,7 +106,7 @@ export const themeVars = createGlobalTheme(':root', {
             600: 'hsl(221,83.2%,53.3%)',
             700: 'hsl(224,76.3%,48%)',
             800: 'hsl(226,70.7%,40.2%)',
-            900: 'hsl(224,64.3%,32.9%)',
+            900: 'hsl(224,64.3%,32.9%)'
         },
         amber: {
             50: 'hsl(48,100%,96.1%)',
@@ -111,7 +118,7 @@ export const themeVars = createGlobalTheme(':root', {
             600: 'hsl(32,94.6%,43.7%)',
             700: 'hsl(26,90.5%,37.1%)',
             800: 'hsl(23,82.5%,31.4%)',
-            900: 'hsl(22,77.8%,26.5%)',
+            900: 'hsl(22,77.8%,26.5%)'
         },
         red: {
             50: 'hsl(0,85.7%,97.3%)',
@@ -123,7 +130,7 @@ export const themeVars = createGlobalTheme(':root', {
             600: 'hsl(0,72.2%,50.6%)',
             700: 'hsl(0,73.7%,41.8%)',
             800: 'hsl(0,70%,35.3%)',
-            900: 'hsl(0,62.8%,30.6%)',
+            900: 'hsl(0,62.8%,30.6%)'
         },
         green: {
             50: 'hsl(152,81%,95.9%)',
@@ -135,7 +142,7 @@ export const themeVars = createGlobalTheme(':root', {
             600: 'hsl(161,93.5%,30.4%)',
             700: 'hsl(163,93.5%,24.3%)',
             800: 'hsl(163,88.1%,19.8%)',
-            900: 'hsl(164,85.7%,16.5%)',
+            900: 'hsl(164,85.7%,16.5%)'
         },
         primary: 'hsl(217,91.2%,59.8%)',
         saxe: {
@@ -156,18 +163,19 @@ export const themeVars = createGlobalTheme(':root', {
     fontSize: fontSizeScale,
     shadow: shadows,
     transition: transitions,
-    rounded: borderRadiusScale,
+    rounded: borderRadiusScale
 });
 
-globalStyle("*", {
-    boxSizing: 'border-box',
+globalStyle('*', {
+    boxSizing: 'border-box'
 });
 
-globalStyle("html, body", {
-    fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"',
+globalStyle('html, body', {
+    fontFamily:
+        '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"',
     color: themeVars.color.font.default
 });
 
-globalStyle("strong, h1, h2, h3, h4, h5, h6", {
-    fontWeight: "500",
+globalStyle('strong, h1, h2, h3, h4, h5, h6', {
+    fontWeight: '500'
 });

package/src/styles/transitions.css.ts

@@ -1,99 +1,97 @@
 import { style, globalKeyframes } from '@vanilla-extract/css';
-import { themeVars } from "./theme.css";
+import { themeVars } from './theme.css';
 
-const FADE_NAME = "fade";
+const FADE_NAME = 'fade';
 const FADE_DURATION = 0.2;
 globalKeyframes(FADE_NAME, {
     from: {
-        opacity: 0,
+        opacity: 0
     },
     to: {
-        opacity: 1,
-    },
+        opacity: 1
+    }
 });
 
 export const fade = {
     enterActive: style({
-        animation: `${FADE_DURATION}s ${FADE_NAME} ${themeVars.transition.default}`,
+        animation: `${FADE_DURATION}s ${FADE_NAME} ${themeVars.transition.default}`
     }),
 
     leaveActive: style({
-        animation: `${FADE_DURATION}s ${FADE_NAME} ${themeVars.transition.default} reverse`,
+        animation: `${FADE_DURATION}s ${FADE_NAME} ${themeVars.transition.default} reverse`
     }),
 
     enterFrom: style({
-        opacity: 0,
+        opacity: 0
     }),
 
     leaveTo: style({
-        opacity: 0,
-    }),
+        opacity: 0
+    })
 };
 
-const SCALE_NAME = "scale";
+const SCALE_NAME = 'scale';
 const SCALE_DURATION = 0.12;
 globalKeyframes(SCALE_NAME, {
     '0%': {
         opacity: 0,
-        scale: 0.95,
+        scale: 0.95
     },
     '100%': {
         opacity: 1,
         scale: 1
-    },
+    }
 });
 
 export const scale = {
     enterActive: style({
-        animation: `${SCALE_DURATION}s ${SCALE_NAME} ${themeVars.transition.default}`,
+        animation: `${SCALE_DURATION}s ${SCALE_NAME} ${themeVars.transition.default}`
     }),
 
     leaveActive: style({
-        animation: `${SCALE_DURATION}s ${SCALE_NAME} ${themeVars.transition.default} reverse`,
+        animation: `${SCALE_DURATION}s ${SCALE_NAME} ${themeVars.transition.default} reverse`
     }),
 
     enterFrom: style({
-        opacity: 0,
+        opacity: 0
     }),
 
     leaveTo: style({
-        opacity: 0,
-    }),
+        opacity: 0
+    })
 };
 
-
-const MODAL_NAME = "modal";
+const MODAL_NAME = 'modal';
 const MODAL_DURATION = 0.18;
 globalKeyframes(MODAL_NAME, {
     '0%': {
         opacity: 0,
         scale: 0.95,
         // offset bottom
-        transformOrigin: "bottom",
+        transformOrigin: 'bottom',
         transform: `translateY(10%)`
     },
     '100%': {
         opacity: 1,
         scale: 1,
         transform: `translateY(0%)`
-    },
+    }
 });
 
 export const modalScale = {
     enterActive: style({
-        animation: `${MODAL_DURATION}s ${MODAL_NAME} ${themeVars.transition.default}`,
+        animation: `${MODAL_DURATION}s ${MODAL_NAME} ${themeVars.transition.default}`
     }),
 
     leaveActive: style({
-        animation: `${MODAL_DURATION}s ${MODAL_NAME} ${themeVars.transition.default}  reverse`,
+        animation: `${MODAL_DURATION}s ${MODAL_NAME} ${themeVars.transition.default}  reverse`
     }),
 
     enterFrom: style({
-        opacity: 0,
+        opacity: 0
     }),
 
     leaveTo: style({
-        opacity: 0,
-    }),
+        opacity: 0
+    })
 };
-