@teammodlr/ui-kit 1.0.2 → 1.0.4

package/src/components/button/Button.css

@@ -1,378 +0,0 @@
-.m-button {
-    --button-height: 36px;
-    --button-padding: 0 15px;
-    --button-font-size: 15px;
-    --button-border-radius: 4px;
-    --button-font-weight: 500;
-    --button-border-color: var(--gray-200);
-    margin: 0;
-    white-space: nowrap;
-    outline: none;
-    border: 1px solid var(--button-border-color);
-    background-color: transparent;
-    z-index: auto;
-    padding: var(--button-padding);
-    font-size: var(--button-font-size);
-    font-weight: var(--button-font-weight);
-    font-family: inherit;
-    color: var(--gray-600);
-    position: relative;
-    display: inline-flex;
-    flex-shrink: 0;
-    align-items: center;
-    justify-content: center;
-    text-align: center;
-    cursor: pointer;
-    height: var(--button-height);
-    line-height: 1;
-    border-radius: var(--button-border-radius);
-    text-decoration: none;
-    transition: color .3s cubic-bezier(0.4, 0, 0.2, 1), background-color .3s cubic-bezier(0.4, 0, 0.2, 1), border-color .2s cubic-bezier(0.4, 0, 0.2, 1);
-}
-
-.m-button__content {
-    display: flex;
-    align-items: center;
-    flex-wrap: nowrap;
-    min-width: 0px;
-}
-
-
-.m-button.m-button--strong {
-    font-weight: 500;
-}
-
-.m-button--block {
-    display: flex;
-}
-
-.m-button.m-button--icon-left .m-button__content {
-    padding-left: 8px;
-}
-
-.m-button.m-button--icon-right .m-button__content {
-    padding-right: 8px;
-}
-
-.m-button:not(.m-button--disabled):hover {
-    color: var(--blue);
-    --button-border-color: var(--blue);
-}
-
-.m-button:not(.m-button--disabled):focus,
-.m-button:not(.m-button--disabled):active {
-    color: var(--blue-dark);
-    --button-border-color: var(--blue-dark);
-}
-
-.m-button.m-button--secondary {
-    color: var(--gray-500);
-    --button-border-color: var(--white);
-    background-color: var(--white);
-}
-
-.m-button:not(.m-button--disabled).m-button--secondary:hover {
-    color: var(--gray-600);
-    --button-border-color: var(--gray-150);
-    background-color: var(--gray-150);
-}
-
-.m-button:not(.m-button--disabled).m-button--secondary:active,
-.m-button:not(.m-button--disabled).m-button--secondary:focus {
-    color: var(--gray-600);
-    --button-border-color: var(--gray-200);
-    background-color: var(--gray-200);
-}
-
-.m-button.m-button--gray.m-button--secondary {
-    color: var(--gray-600);
-    --button-border-color: var(--gray-100);
-    background-color: var(--gray-100);
-}
-
-.m-button.m-button--gray:not(.m-button--disabled).m-button--secondary:hover {
-    color: var(--gray-600);
-    --button-border-color: var(--gray-150);
-    background-color: var(--gray-150);
-}
-
-.m-button.m-button--gray:not(.m-button--disabled).m-button--secondary:active,
-.m-button.m-button--gray:not(.m-button--disabled).m-button--secondary:focus {
-    color: var(--gray-600);
-    --button-border-color: var(--gray-200);
-    background-color: var(--gray-200);
-}
-
-/**
-   * Info Button
-  */
-.m-button--blue {
-    color: var(--white);
-    --button-border-color: var(--blue);
-    background-color: var(--blue);
-}
-
-.m-button--blue:not(.m-button--disabled):hover {
-    color: var(--white);
-    --button-border-color: var(--blue-hover);
-    background-color: var(--blue-hover);
-}
-
-.m-button--blue:not(.m-button--disabled):active,
-.m-button--blue:not(.m-button--disabled):focus {
-    color: var(--white);
-    --button-border-color: var(--blue-focus);
-    background-color: var(--blue-focus);
-}
-
-.m-button--blue.m-button--secondary {
-    color: var(--blue-dark);
-    --button-border-color: var(--blue-secondary);
-    background-color: var(--blue-secondary);
-}
-
-.m-button--blue.m-button--secondary:not(.m-button--disabled):hover {
-    color: var(--blue-darker);
-    --button-border-color: var(--blue-secondary-hover);
-    background-color: var(--blue-secondary-hover);
-}
-
-.m-button--blue.m-button--secondary:not(.m-button--disabled):active,
-.m-button--blue.m-button--secondary:not(.m-button--disabled):focus {
-    color: var(--blue-darker);
-    --button-border-color: var(--blue-secondary-focus);
-    background-color: var(--blue-secondary-focus);
-}
-
-/**
-   * Success Button
-  */
-.m-button--green {
-    color: var(--white);
-    --button-border-color: var(--green);
-    background-color: var(--green);
-}
-
-.m-button--green:not(.m-button--disabled):hover {
-    color: var(--white);
-    --button-border-color: var(--green-hover);
-    background-color: var(--green-hover);
-}
-
-.m-button--green:not(.m-button--disabled):focus,
-.m-button--green:not(.m-button--disabled):active {
-    color: var(--white);
-    --button-border-color: var(--green-focus);
-    background-color: var(--green-focus);
-}
-
-.m-button--green.m-button--secondary {
-    color: var(--green-dark);
-    --button-border-color: var(--green-secondary);
-    background-color: var(--green-secondary);
-}
-
-.m-button--green.m-button--secondary:not(.m-button--disabled):hover {
-    color: var(--green-darker);
-    --button-border-color: var(--green-secondary-hover);
-    background-color: var(--green-secondary-hover);
-}
-
-.m-button--green.m-button--secondary:not(.m-button--disabled):focus,
-.m-button--green.m-button--secondary:not(.m-button--disabled):active {
-    color: var(--green-darker);
-    --button-border-color: var(--green-secondary-focus);
-    background-color: var(--green-secondary-focus);
-}
-
-/**
-   * Danger Button
-  */
-.m-button--red {
-    color: var(--white);
-    --button-border-color: var(--red);
-    background-color: var(--red);
-}
-
-.m-button--red:not(.m-button--disabled):hover {
-    color: var(--white);
-    --button-border-color: var(--red-hover);
-    background-color: var(--red-hover);
-}
-
-.m-button--red:not(.m-button--disabled):focus,
-.m-button--red:not(.m-button--disabled):active {
-    color: var(--white);
-    --button-border-color: var(--red-focus);
-    background-color: var(--red-focus);
-}
-
-.m-button--red.m-button--secondary {
-    color: var(--red-dark);
-    --button-border-color: var(--red-secondary);
-    background-color: var(--red-secondary);
-}
-
-.m-button--red.m-button--secondary:not(.m-button--disabled):hover {
-    color: var(--red-darker);
-    --button-border-color: var(--red-secondary-hover);
-    background-color: var(--red-secondary-hover);
-}
-
-.m-button--red.m-button--secondary:not(.m-button--disabled):active,
-.m-button--red.m-button--secondary:not(.m-button--disabled):focus {
-    color: var(--red-darker);
-    --button-border-color: var(--red-secondary-focus);
-    background-color: var(--red-secondary-focus);
-}
-
-/**
-   * Yellow Button
-  */
-.m-button--yellow {
-    color: var(--white);
-    --button-border-color: var(--yellow);
-    background-color: var(--yellow);
-}
-
-.m-button--yellow:not(.m-button--disabled):hover {
-    color: var(--white);
-    --button-border-color: var(--yellow-hover);
-    background-color: var(--yellow-hover);
-}
-
-.m-button--yellow:not(.m-button--disabled):focus,
-.m-button--yellow:not(.m-button--disabled):active {
-    color: var(--white);
-    --button-border-color: var(--yellow-focus);
-    background-color: var(--yellow-focus);
-}
-
-.m-button--yellow.m-button--secondary {
-    color: var(--yellow-dark);
-    --button-border-color: var(--yellow-secondary);
-    background-color: var(--yellow-secondary);
-}
-
-.m-button--yellow.m-button--secondary:not(.m-button--disabled):hover {
-    color: var(--yellow-darker);
-    --button-border-color: var(--yellow-secondary-hover);
-    background-color: var(--yellow-secondary-hover);
-}
-
-.m-button--yellow.m-button--secondary:not(.m-button--disabled):active,
-.m-button--yellow.m-button--secondary:not(.m-button--disabled):focus {
-    color: var(--yellow-darker);
-    --button-border-color: var(--yellow-secondary-focus);
-    background-color: var(--yellow-secondary-focus);
-}
-
-.m-button--xs {
-    --button-height: 22px;
-    --button-padding: 0 6px;
-    --button-font-size: 14px;
-}
-
-.m-button--sm {
-    --button-height: 28px;
-    --button-padding: 0 10px;
-    --button-font-size: 14px;
-}
-
-.m-button--lg {
-    --button-height: 40px;
-    --button-padding: 0 18px;
-    --button-font-size: 18px;
-}
-
-.m-button--xl {
-    --button-height: 44px;
-    --button-padding: 0 22px;
-    --button-font-size: 20px;
-}
-
-.m-button--rounded {
-    border-radius: 34px;
-}
-
-.m-button--rounded.m-button--xs {
-    padding: 0 10px;
-}
-
-.m-button--rounded.m-button--sm {
-    padding: 0 14px;
-}
-
-.m-button--rounded.m-button--md {
-    padding: 0 18px;
-}
-
-.m-button--rounded.m-button--lg {
-    padding: 0 22px;
-}
-
-.m-button--rounded.m-button--xl {
-    padding: 0 26px;
-}
-
-.m-button--disabled {
-    opacity: 0.8;
-    cursor: not-allowed;
-    user-select: none;
-}
-
-.m-button-group {
-    display: inline-flex;
-    vertical-align: middle;
-    position: relative;
-}
-
-/**
-   * Only round the first and last button 
-  */
-
-.m-button-group .m-button:first-child {
-    border-top-left-radius: var(--button-border-radius);
-    border-bottom-left-radius: var(--button-border-radius);
-    border-top-right-radius: 0;
-    border-bottom-right-radius: 0;
-}
-
-.m-button-group .m-button:last-child {
-    border-top-left-radius: 0;
-    border-bottom-left-radius: 0;
-    border-top-right-radius: var(--button-border-radius);
-    border-bottom-right-radius: var(--button-border-radius);
-}
-
-.m-button-group .m-button {
-    border-radius: 0;
-}
-
-.m-button-group .m-button:not(:first-child) {
-    border-left: none;
-}
-
-
-.m-button-group .m-button:not(:first-child)::after {
-    content: '';
-    position: absolute;
-    top: 0;
-    left: 0;
-    bottom: 0;
-    width: 1px;
-    background-color: transparent;
-    transition: color .3s cubic-bezier(0.4, 0, 0.2, 1), background-color .3s cubic-bezier(0.4, 0, 0.2, 1), border-color .2s cubic-bezier(0.4, 0, 0.2, 1);
-}
-
-.m-button-group .m-button:hover:not(:first-child)::after {
-    background-color: var(--button-border-color);
-}
-
-.m-button-group--block > .m-button {
-    flex-basis: 100%;
-}
-
-.m-button-group--block {
-    display: flex;
-}

package/src/components/button/Button.vue

@@ -1,108 +0,0 @@
-<template>
-    <component :is="computedTag" :to="to" :href="href" :type="type" :class="computedClasses" :disabled="disabled">
-        <div v-if="hasIconLeft" class="m-button__icon">
-            <slot name="icon-left" />
-        </div>
-        <span class="m-button__content">
-            <slot />
-        </span>
-        <div v-if="hasIconRight" class="m-button__icon">
-            <slot name="icon-right" />
-        </div>
-    </component>
-</template>
-  
-<script lang="ts">
-import { computed, defineComponent, inject } from "vue";
-import type { PropType } from 'vue';
-import type { Color, Size } from "@/types/props";
-
-export default defineComponent({
-    name: "MButton",
-    props: {
-        type: {
-            type: String,
-            default: 'button',
-        },
-        color: {
-            type: String as PropType<Color>,
-            default: ''
-        },
-        size: {
-            type: String as PropType<Size>,
-            default: 'md'
-        },
-        rounded: {
-            type: Boolean,
-            default: false
-        },
-        disabled: {
-            type: Boolean,
-            default: false
-        },
-        block: {
-            type: Boolean,
-            default: false
-        },
-        secondary: {
-            type: Boolean,
-            default: false
-        },
-        to: {
-            type: [String, Object],
-            default: ''
-        },
-        href: {
-            type: String,
-            default: '',
-        },
-        icon: {
-            type: Boolean,
-            default: false
-        },
-        strong: {
-            type: Boolean,
-            default: false
-        }
-    },
-    setup(props, { slots }) {
-        const group = inject('buttonGroup', {
-            groupProps: {},
-            isGroup: false
-        });
-        
-        const hasIconLeft = computed(() => !!(slots['icon-left']));
-        const hasIconRight = computed(() => !!(slots['icon-right']));
-
-        const computedClasses = computed(() => {
-            // @ts-ignore
-            const size = group.groupProps.size || props.size;
-            return [
-                'm-button',
-                `m-button--${size}`,
-                {
-                    [`m-button--${props.color}`]: props.color,
-                    'm-button--rounded': props.rounded,
-                    'm-button--block': props.block,
-                    'm-button--icon': props.icon,
-                    'm-button--secondary': props.secondary,
-                    'm-button--disabled': props.disabled,
-                    'm-button--strong': props.strong,
-                    'm-button--icon-left': hasIconLeft.value,
-                    'm-button--icon-right': hasIconRight.value,
-                }
-            ]
-        });
-
-        const computedTag = computed(() => (props.to ? 'router-link' : props.href ? 'a' : 'button'));
-
-        return {
-            computedClasses,
-            computedTag,
-            hasIconLeft,
-            hasIconRight
-        }
-    }
-})
-</script>
-  

package/src/components/buttongroup/ButtonGroup.vue

@@ -1,47 +0,0 @@
-<template>
-    <component
-        :is="tag"
-        :class="computedClasses"
-    >
-        <slot />
-    </component>
-</template>
-
-<script lang="ts">
-import type { Size } from '@/types/props';
-import { defineComponent, provide, type PropType, computed } from 'vue';
-
-export default defineComponent({
-    name: "MButtonGroup",
-    props: {
-        tag: {
-            type: String,
-            default: 'div'
-        },
-        size: {
-            type: String as PropType<Size>,
-            default: 'md'
-        }
-    },
-    setup(props) {
-
-        provide('buttonGroup', {
-            groupProps: props,
-            isGroup: true
-        });
-
-        const computedClasses = computed(() => {
-            return [
-                'm-button-group',
-                {
-                    [`m-button-group--${props.size}`]: props.size
-                }
-            ]
-        });
-
-        return {
-            computedClasses
-        }
-    }
-})
-</script>

package/src/components/checkbox/Checkbox.css

@@ -1,185 +0,0 @@
-.m-checkbox {
-    --checkbox-width: 22px;
-    --checkbox-height: 22px;
-    --checkbox-border-radius: 6px;
-    --checkbox-border-width: 1px;
-    --checkbox-background-color: var(--white);
-    --checkbox-border-color: var(--gray-300);
-    --checkbox-gap: 6px;
-
-    --checkbox-tick-width: 4px;
-    --checkbox-tick-height: 10px;
-    --checkbox-tick-height-negative: -10px;
-
-    --checkbox-tick-top: 8px;
-    --checkbox-tick-left: 3px;
-    --checkbox-tick-border-width: 3px;
-
-    display: flex;
-    align-items: center;
-    position: relative;
-    font-weight: bold;
-    cursor: pointer;
-    gap: var(--checkbox-gap);
-}
-
-.m-checkbox.m-checkbox--xs {
-    --checkbox-width: 16px;
-    --checkbox-height: 16px;
-    --checkbox-border-radius: 4px;
-    --checkbox-border-width: 1px;
-    --checkbox-tick-top: 6px;
-    --checkbox-tick-left: 1px;
-
-    --checkbox-tick-width: 3px;
-    --checkbox-tick-height: 8px;
-    --checkbox-tick-height-negative: -8px;
-}
-
-.m-checkbox.m-checkbox--sm {
-    --checkbox-width: 20px;
-    --checkbox-height: 20px;
-    --checkbox-border-radius: 4px;
-    --checkbox-border-width: 1px;
-    --checkbox-tick-top: 7px;
-    --checkbox-tick-left: 2px;
-}
-
-.m-checkbox.m-checkbox--lg {
-    --checkbox-width: 26px;
-    --checkbox-height: 26px;
-    --checkbox-border-radius: 8px;
-    --checkbox-border-width: 1px;
-
-    --checkbox-tick-top: 10px;
-    --checkbox-tick-left: 3px;
-
-    --checkbox-tick-border-width: 4px;
-    --checkbox-tick-width: 4px;
-    --checkbox-tick-height: 14px;
-    --checkbox-tick-height-negative: -14px;
-}
-
-.m-checkbox.m-checkbox--xl {
-    --checkbox-width: 32px;
-    --checkbox-height: 32px;
-    --checkbox-border-radius: 8px;
-    --checkbox-border-width: 1px;
-
-    --checkbox-tick-top: 14px;
-    --checkbox-tick-left: 5px;
-
-    --checkbox-tick-border-width: 4px;
-    --checkbox-tick-width: 5px;
-    --checkbox-tick-height: 16px;
-    --checkbox-tick-height-negative: -16px;
-}
-
-.m-checkbox.m-checkbox--blue.m-checkbox--checked {
-    --checkbox-background-color: var(--blue);
-    --checkbox-border-color: var(--blue);
-}
-
-.m-checkbox.m-checkbox--green.m-checkbox--checked {
-    --checkbox-background-color: var(--green);
-    --checkbox-border-color: var(--green);
-}
-
-.m-checkbox.m-checkbox--red.m-checkbox--checked {
-    --checkbox-background-color: var(--red);
-    --checkbox-border-color: var(--red);
-}
-
-.m-checkbox.m-checkbox--yellow.m-checkbox--checked {
-    --checkbox-background-color: var(--yellow);
-    --checkbox-border-color: var(--yellow);
-}
-
-.m-checkbox input {
-    position: absolute;
-    opacity: 0;
-    cursor: pointer;
-    height: 0;
-    width: 0;
-    display: none;
-}
-
-.m-checkbox span {
-    display: flex;
-    height: var(--checkbox-height);
-    width: var(--checkbox-width);
-    border-radius: var(--checkbox-border-radius);
-    border: var(--checkbox-border-width) solid var(--checkbox-border-color);
-    background-color: var(--checkbox-background-color);
-    transition: all 125ms cubic-bezier(0.4, 0, 0.2, 1);
-    position: relative;
-}
-
-.m-checkbox:hover:not(.m-checkbox--checked):not(.m-checkbox--disabled) span {
-    --checkbox-border-color: var(--gray-400);
-    --checkbox-background-color: var(--gray-100);
-}
-
-.m-checkbox.m-checkbox--disabled span, 
-.m-checkbox.m-checkbox--disabled .m-checkbox__label {
-    cursor: not-allowed;
-}
-
-.m-checkbox.m-checkbox--disabled span {
-    opacity: 0.6;
-}
-
-.m-checkbox:not(.m-checkbox--checked).m-checkbox--disabled span {
-    --checkbox-border-color: var(--gray-300);
-    --checkbox-background-color: var(--gray-100);
-}
-
-.m-checkbox.m-checkbox--checked span {
-    background-color: var(--checkbox-background-color);
-    border-color: var(--checkbox-background-color);
-}
-
-.m-checkbox.m-checkbox--checked span::before {
-    content: "";
-    position: absolute;
-    transform: rotate(45deg);
-    border-right: var(--checkbox-tick-border-width) solid transparent;
-    border-bottom: var(--checkbox-tick-border-width) solid transparent;
-    top: var(--checkbox-tick-top);
-    left: var(--checkbox-tick-left);
-    color: #FFFFFF;
-    transform-origin: 0% 100%;
-    animation: draw-tick 125ms 170ms cubic-bezier(0.4, 0, 0.2, 1) forwards;
-}
-
-.m-checkbox .m-checkbox__label {
-    display: inline-block;
-    vertical-align: middle;
-    font-size: 14px;
-    line-height: 24px;
-    color: #000000;
-    font-weight: 400;
-    user-select: none;
-}
-
-@keyframes draw-tick {
-    0% {
-        height: 0px;
-        width: 0px;
-        border-color: #FFF;
-        transform: translate3d(0, 0, 0) rotate(45deg);
-    }
-
-    25% {
-        height: 0px;
-        width: var(--checkbox-tick-width);
-        transform: translate3d(0, 0, 0) rotate(45deg);
-    }
-
-    100% {
-        border-color: #FFF;
-        height: var(--checkbox-tick-height);
-        width: var(--checkbox-tick-width);
-        transform: translate3d(0, var(--checkbox-tick-height-negative), 0) rotate(45deg);
-    }
-}