@teammodlr/ui-kit 1.0.4 → 1.0.5

package/src/components/checkbox/Checkbox.css

@@ -0,0 +1,185 @@
+.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);
+    }
+}

package/src/components/checkbox/Checkbox.vue

@@ -0,0 +1,140 @@
+<template>
+    <div ref="checkboxRef" :class="wrapperComputedClasses">
+        <div :class="checkboxComputedClass" @click.prevent="toggle">
+            <input 
+                v-model="checked"
+                type="checkbox"
+                :aria-checked="checked ? 'true' : 'false'"
+                :aria-disabled="(disabled || loading) ? 'true' : 'false'"
+                :aria-labelledby="`${id}-label`"
+                :disabled="disabled || loading"
+                :name="name"
+                :id="id"
+                />
+            <span></span>
+            <div class="m-checkbox__label" :id="`${id}-label`">
+                <template v-if="hasSlot">
+                    <slot />
+                </template>
+                <template v-else>
+                    {{ label }}
+                </template>
+            </div>
+        </div>
+        <p v-if="inputError" class="m-input__error">
+            {{ inputError }}
+        </p>
+    </div>
+</template>
+
+<script lang="ts">
+import { defineComponent, toRef, ref, type PropType, watch, computed } from 'vue';
+import { useInput } from '@/composables/useInput';
+import type { Size, Color } from '@/types/props';
+
+export default defineComponent({
+    name: "Checkbox",
+    emits: useInput.emits(),
+    props: {
+        ...useInput.props(),
+        label: {
+            type: String
+        },
+        size: {
+            type: String as PropType<Size>,
+            default: 'md',
+        },
+        color: {
+            type: String as PropType<Color>,
+            default: 'blue',
+        },
+        disabled: {
+            type: Boolean,
+            default: false
+        },
+        loading: {
+            type: Boolean,
+            default: false
+        }
+    },
+    setup(props, { slots, emit }) {
+        const focus = () => { };
+
+        const {
+            id,
+            insideForm,
+            reset,
+            validate,
+            setError,
+            formError,
+            formDisabled,
+            formLoading
+        } = useInput(props, { focus, emit, withListeners: false });
+
+        const disabled = computed(() => formDisabled || props.disabled);
+        const loading = computed(() => formLoading || props.loading);
+        const name = toRef(props, 'name');
+        const checked = ref(false);
+        const checkboxRef = ref<HTMLElement | null>(null);
+        const hasSlot = computed(() => !!(slots.default));
+
+        const wrapperComputedClasses = computed(() => {
+            return [
+                'm-checkbox__container',
+                {
+                    'm-form__input': insideForm
+                }
+            ]
+        });
+
+        const checkboxComputedClass = computed(() => {
+            return {
+                'm-checkbox': true,
+                'm-checkbox--checked': checked.value,
+                'm-checkbox--disabled': disabled.value || loading.value,
+                'm-checkbox--error': formError.value,
+                [`m-checkbox--${props.size}`]: true,
+                [`m-checkbox--${props.color}`]: true,
+            }
+        });
+
+        const inputError = computed(() => {
+            return formError.value || props.error;
+        });
+
+        watch(() => props.modelValue, (value) => {
+            checked.value = !!value;
+        }, { immediate: true });
+
+        watch(() => checked.value, (value) => {
+            emit('update:modelValue', value);
+        });
+
+        function toggle() {
+            if (disabled.value) return;
+            checked.value = !checked.value;
+        }
+
+
+        return {
+            id,
+            formError,
+            insideForm,
+            reset,
+            validate,
+            setError,
+            disabled,
+            loading,
+            name,
+            checked,
+            checkboxRef,
+            inputError,
+            toggle,
+
+            wrapperComputedClasses,
+            checkboxComputedClass,
+            hasSlot
+        }
+    }
+})
+</script>

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

@@ -0,0 +1,9 @@
+<template>
+    <MCheckbox v-model="checked" label="Test" />
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue'
+
+const checked = ref(false);
+</script>

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

@@ -0,0 +1,21 @@
+import MCheckbox from "../Checkbox.vue";
+import {
+    MCheckboxBasic,
+    MCheckboxSlot
+} from "./index";
+
+import {
+    createStory, sizeArgType, colorArgType
+} from "@/__storybook__";
+
+export default {
+    component: MCheckbox,
+    title: 'Components/Checkbox',
+    argTypes: {
+        ...sizeArgType(),
+        ...colorArgType()
+    }
+}
+
+export const Basic = createStory(MCheckboxBasic);
+export const Slot = createStory(MCheckboxSlot);

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

@@ -0,0 +1,3 @@
+export { default as MCheckboxBasic } from './basic.vue';
+export { default as MCheckboxSlot } from './slot.vue';
+

package/src/components/checkbox/examples/slot.vue

@@ -0,0 +1,11 @@
+<template>
+    <MCheckbox v-model="checked">
+        Weapon
+    </MCheckbox>
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue'
+
+const checked = ref(false);
+</script>

package/src/components/dropdown/Dropdown.css

@@ -0,0 +1,68 @@
+.m-dropdown {
+    position: relative;
+}
+
+.m-dropdown-menu {
+    --dropdown-menu-width: 200px;
+    --dropdown-menu-padding: 6px;
+    --dropdown-menu-background-color: var(--white);
+    --dropdown-menu-box-shadow: 0px 4px 10px 1px rgb(154 161 171 / 20%);
+    --dropdown-menu-border-radius: 4px;
+    --dropdown-menu-border: 1px solid var(--gray-200);
+
+    --dropdown-menu-item-font-size: 15px;
+    --dropdown-menu-item-height: 34px;
+    --dropdown-menu-item-line-height: 34px;
+    --dropdown-menu-item-color: var(--gray-600);
+    --dropdown-menu-item-background-color: var(--white);
+    --dropdown-menu-item-border-radius: 4px;
+    --dropdown-menu-item-padding: 0px 8px;
+    --dropdown-menu-gap: 4px;
+
+    position: relative;
+    background-color: var(--dropdown-menu-background-color);
+    box-shadow: var(--dropdown-menu-box-shadow);
+    border-radius: var(--dropdown-menu-border-radius);
+    min-width: var(--dropdown-menu-width);
+    padding: var(--dropdown-menu-padding);
+    border: var(--dropdown-menu-border);
+}
+
+.m-dropdown-menu ul {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+}
+
+.m-dropdown-menu ul .m-dropdown-item {
+    position: relative;
+    display: flex;
+    align-items: center;
+    cursor: pointer;
+
+    font-size: var(--dropdown-menu-item-font-size);
+    height: var(--dropdown-menu-item-height);
+    line-height: var(--dropdown-menu-item-line-height);
+    color: var(--dropdown-menu-item-color);
+    background-color: var(--dropdown-menu-item-background-color);
+    border-radius: var(--dropdown-menu-item-border-radius);
+    padding: var(--dropdown-menu-item-padding);
+    gap: var(--dropdown-menu-gap);
+}
+
+.m-dropdown-menu ul .m-dropdown-item .m-dropdown__text {
+    white-space: nowrap;
+    flex: 1;
+    z-index: 1;
+}
+
+.m-dropdown-menu ul .m-dropdown-item:hover {
+    --dropdown-menu-item-color: var(--blue);
+    --dropdown-menu-item-background-color: var(--gray-100);
+}
+
+.m-dropdown__icon-right,
+.m-dropdown__icon-left {
+    display: flex;
+    align-items: center;
+}

package/src/components/dropdown/Dropdown.vue

@@ -0,0 +1,237 @@
+<template>
+    <div ref="wrapper" :class="computedWrapperClasses">
+        <div ref="referenceRef" :class="computedReferenceClasses" @click="toggleDropdown">
+            <slot />
+        </div>
+
+        <DropdownWrapper>
+            <Teleport :disabled="isNested" to="body">
+                <transition :name="transitionName">
+                    <div v-show="isOpen" ref="popper" :class="[
+                        'm-dropdown-menu',
+                        `m-dropdown-menu--${placement}`
+                    ]">
+                        <slot name="menu" />
+                    </div>
+                </transition>
+            </Teleport>
+        </DropdownWrapper>
+    </div>
+</template>
+
+<script lang="ts">
+import { usePopper } from '@/composables/usePopper';
+import type { Placement, VirtualElement } from '@popperjs/core';
+import { defineComponent, inject, ref, type PropType, provide, watch, onMounted, nextTick, computed, Teleport, toRef, onUnmounted } from 'vue';
+import { onClickOutside, useEventListener } from '@vueuse/core';
+import DropdownWrapper from './DropdownWrapper.vue';
+import { useLabel } from './hooks';
+
+export default defineComponent({
+    name: 'Dropdown',
+    components: {
+        DropdownWrapper
+    },
+    props: {
+        open: {
+            type: Boolean,
+            default: false
+        },
+        placement: {
+            type: String as PropType<Placement>,
+            default: 'bottom-start'
+        },
+        transfer: {
+            type: Boolean,
+            default: false
+        },
+        trigger: {
+            type: String as PropType<'click' | 'hover'>,
+            default: 'click'
+        },
+        virtual: {
+            type: [Object],
+            default: null
+        },
+        x: {
+            type: Number,
+            default: 0
+        },
+        y: {
+            type: Number,
+            default: 0
+        },
+        label: {
+            default: null,
+            static: true
+        },
+        transitionName: {
+            type: String,
+            default: 'fade'
+        },
+        onSelect: {
+            type: Function as PropType<(labels: any) => void>,
+            default: () => { }
+        }
+    },
+    emits: [
+        'update:open'
+    ],
+    setup(props, { emit }) {
+        const state = inject("dropdown", null);
+
+        const isNested = !!state;
+        const label = toRef(props, 'label')
+        const isOpen = ref(props.open);
+        const placement = ref(props.placement);
+        const transfer = toRef(props, 'transfer');
+        const wrapper = ref(null);
+        const referenceRef = ref(null);
+
+        const reference = computed(() => {
+            if (props.virtual !== null) {
+                const virtual = (props.virtual as any).$el ?? props.virtual;
+                if (virtual) {
+                    if ('getBoundingClientRect' in virtual) {
+                        return virtual as VirtualElement;
+                    }
+
+                    if ('x' in virtual && 'y' in virtual) {
+                        return {
+                            getBoundingClientRect: () => ({
+                                x: virtual.x,
+                                y: virtual.y,
+                                left: virtual.x,
+                                top: virtual.y,
+                                width: 0,
+                                height: 0
+                            })
+                        } as VirtualElement
+                    }
+                }
+            }
+
+            return referenceRef.value;
+        });
+
+        const { popper, transferTo, updatePopper } = usePopper({
+            reference: reference,
+            placement,
+            transfer,
+            wrapper,
+            isDrop: true,
+            offset: isNested ? [-2, 2] : undefined
+        });
+
+        const currentLabel = useLabel(label, referenceRef)
+
+        provide("dropdown-select", null);
+        provide("dropdown", {
+            handleSelect,
+            isOpen: isOpen,
+        });
+
+        watch(() => props.open, (value) => {
+            isOpen.value = value;
+        });
+
+        watch(() => props.placement, (value) => {
+            setPlacement(value);
+        });
+
+        watch(isOpen, (value) => {
+            if (value) {
+                updatePopper();
+            }
+
+            emit('update:open', value);
+        });
+
+        onMounted(() => {
+            nextTick(() => {
+                setPlacement(props.placement)
+            });
+        });
+
+        useEventListener('resize', () => {
+            updatePopper();
+        });
+
+        onClickOutside(wrapper, (e) => {
+            let parent = e.target as HTMLElement;
+
+            // fail safe of 10
+            let i = 0;
+            while (parent) {
+                if (parent.classList.contains('m-dropdown-menu')) {
+                    return;
+                }
+                parent = parent.parentElement as HTMLElement;
+
+                if (i > 10) {
+                    break;
+                }
+                i++;
+            }
+
+            isOpen.value = false;
+        });
+
+        function setPlacement(value: Placement) {
+            const [xPlacement] = value.split('-');
+
+            if (isNested && xPlacement !== 'right' && xPlacement !== 'left') {
+                placement.value = 'right-start';
+            } else {
+                placement.value = value;
+            }
+        }
+
+        function toggleDropdown() {
+            isOpen.value = !isOpen.value;
+        }
+
+        function handleSelect(labels: string[]) {
+            isOpen.value = false;
+            props.onSelect(labels);
+            // @ts-ignore
+            if (typeof state?.handleSelect === 'function') {
+                // @ts-ignore
+                state.handleSelect([currentLabel.value!, ...labels]);
+            }
+        }
+
+        const computedWrapperClasses = computed(() => {
+            return [
+                'm-dropdown',
+                {
+                    'm-dropdown--open': isOpen.value,
+                    'm-dropdown--nested': isNested
+                }
+            ]
+        });
+
+        const computedReferenceClasses = computed(() => {
+
+        });
+
+        const transitionName = computed(() => {
+            return `m-transition__${props.transitionName}`;
+        });
+
+        return {
+            wrapper,
+            referenceRef,
+            popper,
+            transferTo,
+            isOpen,
+            isNested,
+            placement,
+            computedWrapperClasses,
+            computedReferenceClasses,
+            transitionName,
+            toggleDropdown
+        }
+    }
+})
+</script>