@teammodlr/ui-kit 2.0.24 → 2.0.27

package/src/components/button/Button.vue

@@ -1,204 +1,204 @@
-<template>
-    <component :is="computedTag" :to="to" :href="href" :type="type" :class="computedClasses" :disabled="disabled"
-               @click="handleClick" v-bind="$attrs">
-<!--        <div :class="computedWaveClasses" :key="waveTimerId"></div>-->
-        <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="computedWaveClasses" :key="waveTimerId"></div>-->
+        <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,35 +1,35 @@
-import MButton from "../Button.vue";
-import {
-    MButtonBasic,
-    MButtonSize,
-    MButtonRounded,
-    MButtonVariant,
-    MButtonVariantSecondary,
-    MButtonDisabled,
-    MButtonIconLeft,
-    MButtonIcon
-} 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);
+import MButton from "../Button.vue";
+import {
+    MButtonBasic,
+    MButtonSize,
+    MButtonRounded,
+    MButtonVariant,
+    MButtonVariantSecondary,
+    MButtonDisabled,
+    MButtonIconLeft,
+    MButtonIcon
+} 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);

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

@@ -1,8 +1,8 @@
-export { default as MButtonBasic } from './basic.vue';
-export { default as MButtonSize } from './size.vue';
-export { default as MButtonRounded } from './rounded.vue';
-export { default as MButtonVariant } from './variants.vue';
-export { default as MButtonVariantSecondary } from './variants-secondary.vue';
-export { default as MButtonDisabled } from './disabled.vue';
-export { default as MButtonIconLeft } from './icon-left.vue';
-export { default as MButtonIcon } from './icon.vue';
+export { default as MButtonBasic } from './basic.vue';
+export { default as MButtonSize } from './size.vue';
+export { default as MButtonRounded } from './rounded.vue';
+export { default as MButtonVariant } from './variants.vue';
+export { default as MButtonVariantSecondary } from './variants-secondary.vue';
+export { default as MButtonDisabled } from './disabled.vue';
+export { default as MButtonIconLeft } from './icon-left.vue';
+export { default as MButtonIcon } from './icon.vue';

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

@@ -1,7 +1,7 @@
-<template>
-    <MButton size="xs" rounded>Extra Small</MButton><br/><br/>
-    <MButton size="sm" rounded>Small</MButton><br/><br/>
-    <MButton size="md" rounded>Default</MButton><br/><br/>
-    <MButton size="lg" rounded>Large</MButton><br/><br/>
-    <MButton size="xl" rounded>Extra Large</MButton><br/><br/>
-</template>
+<template>
+    <MButton size="xs" rounded>Extra Small</MButton><br/><br/>
+    <MButton size="sm" rounded>Small</MButton><br/><br/>
+    <MButton size="md" rounded>Default</MButton><br/><br/>
+    <MButton size="lg" rounded>Large</MButton><br/><br/>
+    <MButton size="xl" rounded>Extra Large</MButton><br/><br/>
+</template>

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

@@ -1,7 +1,7 @@
-<template>
-    <MButton size="xs">Extra Small</MButton><br/><br/>
-    <MButton size="sm">Small</MButton><br/><br/>
-    <MButton size="md">Default</MButton><br/><br/>
-    <MButton size="lg">Large</MButton><br/><br/>
-    <MButton size="xl">Extra Large</MButton><br/><br/>
-</template>
+<template>
+    <MButton size="xs">Extra Small</MButton><br/><br/>
+    <MButton size="sm">Small</MButton><br/><br/>
+    <MButton size="md">Default</MButton><br/><br/>
+    <MButton size="lg">Large</MButton><br/><br/>
+    <MButton size="xl">Extra Large</MButton><br/><br/>
+</template>

package/src/components/button/examples/variants-secondary.vue

@@ -1,11 +1,11 @@
-<template>
-    <MButton secondary>Default</MButton><br/><br/>
-    <MButton secondary variant="tertiary">Tertiary</MButton><br/><br/>
-    <MButton secondary variant="primary">Primary</MButton><br/><br/>
-    <MButton secondary variant="dark">Dark</MButton><br/><br/>
-    <MButton secondary variant="success">Success</MButton><br/><br/>
-    <MButton secondary variant="warning">Warning</MButton><br/><br/>
-    <MButton secondary variant="error">Error</MButton><br/><br/>
-</template>
-<script setup lang="ts">
+<template>
+    <MButton secondary>Default</MButton><br/><br/>
+    <MButton secondary variant="tertiary">Tertiary</MButton><br/><br/>
+    <MButton secondary variant="primary">Primary</MButton><br/><br/>
+    <MButton secondary variant="dark">Dark</MButton><br/><br/>
+    <MButton secondary variant="success">Success</MButton><br/><br/>
+    <MButton secondary variant="warning">Warning</MButton><br/><br/>
+    <MButton secondary variant="error">Error</MButton><br/><br/>
+</template>
+<script setup lang="ts">
 </script>

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

@@ -1,11 +1,11 @@
-<template>
-    <MButton>Default</MButton><br/><br/>
-    <MButton variant="tertiary">Tertiary</MButton><br/><br/>
-    <MButton variant="primary">Primary</MButton><br/><br/>
-    <MButton variant="dark">Dark</MButton><br/><br/>
-    <MButton variant="success">Success</MButton><br/><br/>
-    <MButton variant="warning">Warning</MButton><br/><br/>
-    <MButton variant="error">Error</MButton><br/><br/>
-</template>
-<script setup lang="ts">
+<template>
+    <MButton>Default</MButton><br/><br/>
+    <MButton variant="tertiary">Tertiary</MButton><br/><br/>
+    <MButton variant="primary">Primary</MButton><br/><br/>
+    <MButton variant="dark">Dark</MButton><br/><br/>
+    <MButton variant="success">Success</MButton><br/><br/>
+    <MButton variant="warning">Warning</MButton><br/><br/>
+    <MButton variant="error">Error</MButton><br/><br/>
+</template>
+<script setup lang="ts">
 </script>