@teammodlr/ui-kit 2.0.21 → 2.0.22

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/buttongroup/ButtonGroup.vue

@@ -1,36 +1,36 @@
-<template>
-    <div
-            :class="classes"
-    >
-        <slot/>
-    </div>
-</template>
-
-<script lang="ts">
-import type {Size} from '../../types/props';
-import {defineComponent, type PropType, provide, reactive, toRef} from 'vue';
-import * as style from "./style";
-import type {ButtonGroupState} from "./symbol";
-import {BUTTON_GROUP_STATE} from "./symbol";
-
-export default defineComponent({
-    name: "MButtonGroup",
-    props: {
-        size: {
-            type: String as PropType<Size>,
-            default: 'md'
-        }
-    },
-    setup(props) {
-        const state: ButtonGroupState = reactive({
-            size: toRef(props, 'size')
-        });
-
-        provide(BUTTON_GROUP_STATE, state);
-
-        return {
-            classes: style.base
-        }
-    }
-})
-</script>
+<template>
+    <div
+            :class="classes"
+    >
+        <slot/>
+    </div>
+</template>
+
+<script lang="ts">
+import type {Size} from '../../types/props';
+import {defineComponent, type PropType, provide, reactive, toRef} from 'vue';
+import * as style from "./style";
+import type {ButtonGroupState} from "./symbol";
+import {BUTTON_GROUP_STATE} from "./symbol";
+
+export default defineComponent({
+    name: "MButtonGroup",
+    props: {
+        size: {
+            type: String as PropType<Size>,
+            default: 'md'
+        }
+    },
+    setup(props) {
+        const state: ButtonGroupState = reactive({
+            size: toRef(props, 'size')
+        });
+
+        provide(BUTTON_GROUP_STATE, state);
+
+        return {
+            classes: style.base
+        }
+    }
+})
+</script>

package/src/components/buttongroup/symbol.ts

@@ -1,8 +1,8 @@
-import type {InjectionKey} from "vue";
-import type {Size} from "../../types/props";
-
-export interface ButtonGroupState {
-    size: Size
-}
-
+import type {InjectionKey} from "vue";
+import type {Size} from "../../types/props";
+
+export interface ButtonGroupState {
+    size: Size
+}
+
 export const BUTTON_GROUP_STATE: InjectionKey<ButtonGroupState> = Symbol('BUTTON_GROUP_STATE');