@teammodlr/ui-kit 2.3.12 → 2.3.14

package/src/components/breadcrumb/style/Breadcrumb.css.ts

@@ -1,40 +1,40 @@
-import { globalStyle, style } from '@vanilla-extract/css';
-import { themeVars } from '../../../styles/theme.css';
-
-export const base = style({
-    display: 'flex',
-    position: 'relative',
-    margin: 0,
-    padding: 0,
-    listStyle: 'none',
-    boxSizing: 'border-box'
-});
-
-export const item = style({
-    display: 'flex',
-    alignItems: 'center',
-    fontSize: themeVars.fontSize.base
-});
-
-export const link = style({
-    padding: `0 ${themeVars.space[2]}`,
-    color: themeVars.color.gray[600],
-    cursor: 'pointer',
-    textDecoration: 'none',
-    outline: 0,
-    transition: `color 0.2s ${themeVars.transition.default}`,
-    ':hover': {
-        color: themeVars.color.blue[500]
-    }
-});
-
-export const separator = style({
-    padding: `0 ${themeVars.space[1]}`,
-    display: 'inline-flex',
-    color: themeVars.color.gray[300],
-    userSelect: 'none'
-});
-
-globalStyle(`${base} ${item}:last-child ${separator}`, {
-    display: 'none'
-});
+import { globalStyle, style } from '@vanilla-extract/css';
+import { themeVars } from '../../../styles/theme.css';
+
+export const base = style({
+    display: 'flex',
+    position: 'relative',
+    margin: 0,
+    padding: 0,
+    listStyle: 'none',
+    boxSizing: 'border-box'
+});
+
+export const item = style({
+    display: 'flex',
+    alignItems: 'center',
+    fontSize: themeVars.fontSize.base
+});
+
+export const link = style({
+    padding: `0 ${themeVars.space[2]}`,
+    color: themeVars.color.gray[600],
+    cursor: 'pointer',
+    textDecoration: 'none',
+    outline: 0,
+    transition: `color 0.2s ${themeVars.transition.default}`,
+    ':hover': {
+        color: themeVars.color.blue[500]
+    }
+});
+
+export const separator = style({
+    padding: `0 ${themeVars.space[1]}`,
+    display: 'inline-flex',
+    color: themeVars.color.gray[300],
+    userSelect: 'none'
+});
+
+globalStyle(`${base} ${item}:last-child ${separator}`, {
+    display: 'none'
+});

package/src/components/breadcrumb/style/index.ts

@@ -1 +1 @@
-export * from './Breadcrumb.css';
+export * from './Breadcrumb.css';

package/src/components/breadcrumb/symbol.ts

@@ -1,18 +1,18 @@
-import type { InjectionKey } from 'vue';
-
-export interface BreadcrumbOptions {
-    label: string;
-    name?: string | (() => string);
-}
-
-export interface BreadcrumbItemState {
-    label: string | number;
-}
-
-export interface BreadcrumbState {
-    separator: string;
-    refreshItems: () => void;
-}
-
-export const BREADCRUMB_STATE: InjectionKey<BreadcrumbState> =
-    Symbol('BREADCRUMB_STATE');
+import type { InjectionKey } from 'vue';
+
+export interface BreadcrumbOptions {
+    label: string;
+    name?: string | (() => string);
+}
+
+export interface BreadcrumbItemState {
+    label: string | number;
+}
+
+export interface BreadcrumbState {
+    separator: string;
+    refreshItems: () => void;
+}
+
+export const BREADCRUMB_STATE: InjectionKey<BreadcrumbState> =
+    Symbol('BREADCRUMB_STATE');

package/src/components/button/Button.vue

@@ -1,203 +1,203 @@
-<template>
-    <component :is="computedTag" :to="to" :href="href" :type="type" :class="computedClasses" :disabled="disabled"
-               @click="handleClick" v-bind="$attrs">
-        <div :class="computedBorderClasses"></div>
-        <div :class="computedBorderStateClasses"></div>
-        <span v-if="hasIconLeft" :class="iconLeft">
-            <slot name="icon-left"/>
-        </span>
-        <span>
-            <slot/>
-        </span>
-        <span v-if="hasIconRight" :class="iconRight">
-            <slot name="icon-right"/>
-        </span>
-    </component>
-</template>
-
-<script lang="ts">
-import type {PropType} from "vue";
-import {computed, defineComponent, inject, onBeforeUnmount, onMounted, ref, toRef} from "vue";
-import type {Size, Variant} from "../../types/props";
-import * as style from "./style";
-import {BUTTON_GROUP_STATE} from "../buttongroup/symbol";
-import {FORM_STATE} from "../form/symbol";
-
-export default defineComponent({
-    name: "MButton",
-    props: {
-        type: {
-            type: String,
-            default: 'button',
-        },
-        variant: {
-            type: String as PropType<Variant>,
-            default: 'default'
-        },
-        size: {
-            type: String as PropType<Size>,
-            default: 'md'
-        },
-        rounded: {
-            type: Boolean,
-            default: false
-        },
-        disabled: {
-            type: Boolean,
-            default: false
-        },
-        loading: {
-            type: Boolean,
-            default: false
-        },
-        block: {
-            type: Boolean,
-            default: false
-        },
-        secondary: {
-            type: Boolean,
-            default: false
-        },
-        to: {
-            type: [String, Object],
-            default: null
-        },
-        href: {
-            type: String,
-            default: '',
-        },
-        link: {
-            type: Boolean,
-            default: false
-        },
-        icon: {
-            type: Boolean,
-            default: false
-        },
-        onClick: {
-            type: Function as PropType<(e: MouseEvent) => void>,
-            default: () => {
-            }
-        }
-    },
-    setup(props, {slots}) {
-        const group = inject(BUTTON_GROUP_STATE, null);
-        const form = inject(FORM_STATE, null);
-        const state = inject("dropdown", null);
-
-        const sizeValue = ref<Size>('md');
-        const waveActive = ref<boolean>(false);
-        const waveTimerId = ref<number | null>(0);
-        const loading = toRef(props, 'loading');
-
-        const dropdownOpen = computed(() => {
-            // @ts-ignore
-            return state?.isOpen.value;
-        });
-
-        const groupSize = computed(() => {
-            return group?.size;
-        });
-
-        const size = computed<Size>(() => {
-            return groupSize.value || props.size;
-        })
-
-        const hasIconLeft = computed(() => !!(slots['icon-left']));
-        const hasIconRight = computed(() => !!(slots['icon-right']));
-
-        const computedClasses = computed(() => {
-            // TODO: We can use dropdownOpen (T or F) to style the open button :)
-            return [
-                style.base,
-                [style.size[size.value]],
-                style.variant[props.variant],
-                {
-                    [style.rounded]: props.rounded,
-                    [style.secondary[props.variant]]: props.secondary,
-                    [style.block]: props.block,
-                    [style.link[props.variant]]: props.link,
-                    [style.iconButton]: props.icon,
-                    [style.loading]: form?.loading || loading.value,
-                }
-            ]
-        });
-
-        const computedWaveClasses = computed(() => {
-            return [
-                style.wave,
-                {
-                    [style.waveActive]: waveActive.value
-                }
-            ]
-        });
-
-        const computedBorderClasses = computed(() => {
-            return [
-                style.border
-            ]
-        });
-
-        const computedBorderStateClasses = computed(() => {
-            return [
-                style.borderState
-            ]
-        });
-
-        const computedTag = computed(() => (props.to ? 'nuxt-link' : props.href ? 'a' : 'button'));
-
-        onMounted(() => {
-            sizeValue.value = groupSize.value || props.size;
-        });
-
-        onBeforeUnmount(() => {
-            if (waveTimerId.value) {
-                clearTimeout(waveTimerId.value);
-            }
-        });
-
-        // const playWave = () => {
-        //     if (props.disabled || props.secondary) {
-        //         return;
-        //     }
-        //     if (waveTimerId.value) {
-        //         clearTimeout(waveTimerId.value);
-        //         waveActive.value = false;
-        //         waveTimerId.value = null;
-        //     }
-        //     nextTick(() => {
-        //         waveActive.value = true;
-        //         waveTimerId.value = setTimeout(() => {
-        //             waveActive.value = false;
-        //             waveTimerId.value = null;
-        //         }, 800);
-        //     })
-        // }
-
-        const handleClick = (e: MouseEvent): void => {
-            if (props.disabled) {
-                e.preventDefault();
-                return;
-            }
-            // playWave();
-            props.onClick(e);
-        };
-
-        return {
-            dropdownOpen,
-            computedClasses,
-            computedWaveClasses,
-            computedBorderClasses,
-            computedBorderStateClasses,
-            computedTag,
-            hasIconLeft,
-            hasIconRight,
-            handleClick,
-            waveTimerId,
-            iconLeft: style.iconLeft,
-            iconRight: style.iconRight,
-        }
-    }
-})
-</script>
-  
+<template>
+    <component :is="computedTag" :to="to" :href="href" :type="type" :class="computedClasses" :disabled="disabled"
+               @click="handleClick" v-bind="$attrs">
+        <div :class="computedBorderClasses"></div>
+        <div :class="computedBorderStateClasses"></div>
+        <span v-if="hasIconLeft" :class="iconLeft">
+            <slot name="icon-left"/>
+        </span>
+        <span>
+            <slot/>
+        </span>
+        <span v-if="hasIconRight" :class="iconRight">
+            <slot name="icon-right"/>
+        </span>
+    </component>
+</template>
+
+<script lang="ts">
+import type {PropType} from "vue";
+import {computed, defineComponent, inject, onBeforeUnmount, onMounted, ref, toRef} from "vue";
+import type {Size, Variant} from "../../types/props";
+import * as style from "./style";
+import {BUTTON_GROUP_STATE} from "../buttongroup/symbol";
+import {FORM_STATE} from "../form/symbol";
+
+export default defineComponent({
+    name: "MButton",
+    props: {
+        type: {
+            type: String,
+            default: 'button',
+        },
+        variant: {
+            type: String as PropType<Variant>,
+            default: 'default'
+        },
+        size: {
+            type: String as PropType<Size>,
+            default: 'md'
+        },
+        rounded: {
+            type: Boolean,
+            default: false
+        },
+        disabled: {
+            type: Boolean,
+            default: false
+        },
+        loading: {
+            type: Boolean,
+            default: false
+        },
+        block: {
+            type: Boolean,
+            default: false
+        },
+        secondary: {
+            type: Boolean,
+            default: false
+        },
+        to: {
+            type: [String, Object],
+            default: null
+        },
+        href: {
+            type: String,
+            default: '',
+        },
+        link: {
+            type: Boolean,
+            default: false
+        },
+        icon: {
+            type: Boolean,
+            default: false
+        },
+        onClick: {
+            type: Function as PropType<(e: MouseEvent) => void>,
+            default: () => {
+            }
+        }
+    },
+    setup(props, {slots}) {
+        const group = inject(BUTTON_GROUP_STATE, null);
+        const form = inject(FORM_STATE, null);
+        const state = inject("dropdown", null);
+
+        const sizeValue = ref<Size>('md');
+        const waveActive = ref<boolean>(false);
+        const waveTimerId = ref<number | null>(0);
+        const loading = toRef(props, 'loading');
+
+        const dropdownOpen = computed(() => {
+            // @ts-ignore
+            return state?.isOpen.value;
+        });
+
+        const groupSize = computed(() => {
+            return group?.size;
+        });
+
+        const size = computed<Size>(() => {
+            return groupSize.value || props.size;
+        })
+
+        const hasIconLeft = computed(() => !!(slots['icon-left']));
+        const hasIconRight = computed(() => !!(slots['icon-right']));
+
+        const computedClasses = computed(() => {
+            // TODO: We can use dropdownOpen (T or F) to style the open button :)
+            return [
+                style.base,
+                [style.size[size.value]],
+                style.variant[props.variant],
+                {
+                    [style.rounded]: props.rounded,
+                    [style.secondary[props.variant]]: props.secondary,
+                    [style.block]: props.block,
+                    [style.link[props.variant]]: props.link,
+                    [style.iconButton]: props.icon,
+                    [style.loading]: form?.loading || loading.value,
+                }
+            ]
+        });
+
+        const computedWaveClasses = computed(() => {
+            return [
+                style.wave,
+                {
+                    [style.waveActive]: waveActive.value
+                }
+            ]
+        });
+
+        const computedBorderClasses = computed(() => {
+            return [
+                style.border
+            ]
+        });
+
+        const computedBorderStateClasses = computed(() => {
+            return [
+                style.borderState
+            ]
+        });
+
+        const computedTag = computed(() => (props.to ? 'nuxt-link' : props.href ? 'a' : 'button'));
+
+        onMounted(() => {
+            sizeValue.value = groupSize.value || props.size;
+        });
+
+        onBeforeUnmount(() => {
+            if (waveTimerId.value) {
+                clearTimeout(waveTimerId.value);
+            }
+        });
+
+        // const playWave = () => {
+        //     if (props.disabled || props.secondary) {
+        //         return;
+        //     }
+        //     if (waveTimerId.value) {
+        //         clearTimeout(waveTimerId.value);
+        //         waveActive.value = false;
+        //         waveTimerId.value = null;
+        //     }
+        //     nextTick(() => {
+        //         waveActive.value = true;
+        //         waveTimerId.value = setTimeout(() => {
+        //             waveActive.value = false;
+        //             waveTimerId.value = null;
+        //         }, 800);
+        //     })
+        // }
+
+        const handleClick = (e: MouseEvent): void => {
+            if (props.disabled) {
+                e.preventDefault();
+                return;
+            }
+            // playWave();
+            props.onClick(e);
+        };
+
+        return {
+            dropdownOpen,
+            computedClasses,
+            computedWaveClasses,
+            computedBorderClasses,
+            computedBorderStateClasses,
+            computedTag,
+            hasIconLeft,
+            hasIconRight,
+            handleClick,
+            waveTimerId,
+            iconLeft: style.iconLeft,
+            iconRight: style.iconRight,
+        }
+    }
+})
+</script>
+  

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

@@ -1,3 +1,3 @@
-<template>
-    <MButton>Hello World</MButton>
-</template>
+<template>
+    <MButton>Hello World</MButton>
+</template>

package/src/components/button/examples/disabled.vue

@@ -1,3 +1,3 @@
-<template>
-    <MButton disabled>You can't click me</MButton>
-</template>
+<template>
+    <MButton disabled>You can't click me</MButton>
+</template>

package/src/components/button/examples/icon-left.vue

@@ -1,12 +1,12 @@
-<template>
-    <MButton>
-        <template #icon-left>
-            <svg width="24" height="24" viewBox="0 0 24 24" role="presentation">
-                <path
-                    d="M12.072 17.284l-3.905 2.053a1 1 0 01-1.451-1.054l.745-4.349-3.159-3.08a1 1 0 01.554-1.705l4.366-.635 1.953-3.956a1 1 0 011.794 0l1.952 3.956 4.366.635a1 1 0 01.555 1.705l-3.16 3.08.746 4.349a1 1 0 01-1.45 1.054l-3.906-2.053z"
-                    fill="currentColor" fill-rule="evenodd"></path>
-            </svg>
-        </template>
-        Hello World
-    </MButton>
-</template>
+<template>
+    <MButton>
+        <template #icon-left>
+            <svg width="24" height="24" viewBox="0 0 24 24" role="presentation">
+                <path
+                    d="M12.072 17.284l-3.905 2.053a1 1 0 01-1.451-1.054l.745-4.349-3.159-3.08a1 1 0 01.554-1.705l4.366-.635 1.953-3.956a1 1 0 011.794 0l1.952 3.956 4.366.635a1 1 0 01.555 1.705l-3.16 3.08.746 4.349a1 1 0 01-1.45 1.054l-3.906-2.053z"
+                    fill="currentColor" fill-rule="evenodd"></path>
+            </svg>
+        </template>
+        Hello World
+    </MButton>
+</template>

package/src/components/button/examples/icon.vue

@@ -1,9 +1,9 @@
-<template>
-    <MButton icon>
-        <svg width="24" height="24" viewBox="0 0 24 24" role="presentation">
-            <path
-                d="M12.072 17.284l-3.905 2.053a1 1 0 01-1.451-1.054l.745-4.349-3.159-3.08a1 1 0 01.554-1.705l4.366-.635 1.953-3.956a1 1 0 011.794 0l1.952 3.956 4.366.635a1 1 0 01.555 1.705l-3.16 3.08.746 4.349a1 1 0 01-1.45 1.054l-3.906-2.053z"
-                fill="currentColor" fill-rule="evenodd"></path>
-        </svg>
-    </MButton>
-</template>
+<template>
+    <MButton icon>
+        <svg width="24" height="24" viewBox="0 0 24 24" role="presentation">
+            <path
+                d="M12.072 17.284l-3.905 2.053a1 1 0 01-1.451-1.054l.745-4.349-3.159-3.08a1 1 0 01.554-1.705l4.366-.635 1.953-3.956a1 1 0 011.794 0l1.952 3.956 4.366.635a1 1 0 01.555 1.705l-3.16 3.08.746 4.349a1 1 0 01-1.45 1.054l-3.906-2.053z"
+                fill="currentColor" fill-rule="evenodd"></path>
+        </svg>
+    </MButton>
+</template>

package/src/components/button/examples/index.stories.ts

@@ -1,37 +1,37 @@
-import MButton from '../Button.vue';
-import {
-    MButtonBasic,
-    MButtonSize,
-    MButtonRounded,
-    MButtonVariant,
-    MButtonVariantSecondary,
-    MButtonDisabled,
-    MButtonIconLeft,
-    MButtonIcon,
-    MButtonLink
-} from './index';
-
-import {
-    variantArgType,
-    createStory,
-    sizeArgType
-} from '../../../__storybook__';
-
-export default {
-    component: MButton,
-    title: 'Components/Buttons/Button',
-    argTypes: {
-        ...variantArgType(),
-        ...sizeArgType()
-    }
-};
-
-export const Basic = createStory(MButtonBasic);
-export const Size = createStory(MButtonSize);
-export const Rounded = createStory(MButtonRounded);
-export const Colors = createStory(MButtonVariant);
-export const ColorsSecondary = createStory(MButtonVariantSecondary);
-export const Disabled = createStory(MButtonDisabled);
-export const IconLeft = createStory(MButtonIconLeft);
-export const Icon = createStory(MButtonIcon);
-export const Link = createStory(MButtonLink);
+import MButton from '../Button.vue';
+import {
+    MButtonBasic,
+    MButtonSize,
+    MButtonRounded,
+    MButtonVariant,
+    MButtonVariantSecondary,
+    MButtonDisabled,
+    MButtonIconLeft,
+    MButtonIcon,
+    MButtonLink
+} from './index';
+
+import {
+    variantArgType,
+    createStory,
+    sizeArgType
+} from '../../../__storybook__';
+
+export default {
+    component: MButton,
+    title: 'Components/Buttons/Button',
+    argTypes: {
+        ...variantArgType(),
+        ...sizeArgType()
+    }
+};
+
+export const Basic = createStory(MButtonBasic);
+export const Size = createStory(MButtonSize);
+export const Rounded = createStory(MButtonRounded);
+export const Colors = createStory(MButtonVariant);
+export const ColorsSecondary = createStory(MButtonVariantSecondary);
+export const Disabled = createStory(MButtonDisabled);
+export const IconLeft = createStory(MButtonIconLeft);
+export const Icon = createStory(MButtonIcon);
+export const Link = createStory(MButtonLink);