@teammodlr/ui-kit 1.0.7 → 2.0.0

package/src/components/dropdown/Dropdown.vue

@@ -1,17 +1,14 @@
 <template>
     <div ref="wrapper" :class="computedWrapperClasses">
         <div ref="referenceRef" :class="computedReferenceClasses" @click="toggleDropdown">
-            <slot />
+            <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 v-show="isOpen" ref="popper" :class="menuClasses">
+                        <slot name="menu"/>
                     </div>
                 </transition>
             </Teleport>
@@ -20,12 +17,26 @@
 </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 {usePopper} from '../../composables/usePopper';
+import type {Placement, VirtualElement} from '@popperjs/core';
+import {
+    defineComponent,
+    inject,
+    ref,
+    type PropType,
+    provide,
+    watch,
+    onMounted,
+    nextTick,
+    computed,
+    toRef, reactive
+} from 'vue';
+import {onClickOutside, useEventListener} from '@vueuse/core';
 import DropdownWrapper from './DropdownWrapper.vue';
-import { useLabel } from './hooks';
+import {useLabel} from './hooks';
+import type {DropdownState} from "./symbol";
+import {DROPDOWN_STATE} from "./symbol";
+import * as style from "./style";
 
 export default defineComponent({
     name: 'Dropdown',
@@ -71,16 +82,17 @@ export default defineComponent({
         },
         onSelect: {
             type: Function as PropType<(labels: any) => void>,
-            default: () => { }
+            default: () => {
+            }
         }
     },
     emits: [
         'update:open'
     ],
-    setup(props, { emit }) {
-        const state = inject("dropdown", null);
+    setup(props, {emit}) {
+        const parentState = inject(DROPDOWN_STATE, null);
 
-        const isNested = !!state;
+        const isNested = !!parentState;
         const label = toRef(props, 'label')
         const isOpen = ref(props.open);
         const placement = ref(props.placement);
@@ -114,22 +126,25 @@ export default defineComponent({
             return referenceRef.value;
         });
 
-        const { popper, transferTo, updatePopper } = usePopper({
+        const {popper, transferTo, updatePopper} = usePopper({
             reference: reference,
             placement,
             transfer,
             wrapper,
             isDrop: true,
-            offset: isNested ? [-2, 2] : undefined
+            offset: isNested ? [-2, 2] : [0, 5]
         });
 
         const currentLabel = useLabel(label, referenceRef)
 
         provide("dropdown-select", null);
-        provide("dropdown", {
-            handleSelect,
+
+        const startState: DropdownState = reactive({
+            handleSelect: handleSelect,
             isOpen: isOpen,
-        });
+        })
+
+        provide(DROPDOWN_STATE, startState);
 
         watch(() => props.open, (value) => {
             isOpen.value = value;
@@ -160,7 +175,6 @@ export default defineComponent({
         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')) {
@@ -194,10 +208,9 @@ export default defineComponent({
         function handleSelect(labels: string[]) {
             isOpen.value = false;
             props.onSelect(labels);
-            // @ts-ignore
-            if (typeof state?.handleSelect === 'function') {
+            if (typeof parentState?.handleSelect === 'function') {
                 // @ts-ignore
-                state.handleSelect([currentLabel.value!, ...labels]);
+                parentState.handleSelect([currentLabel.value!, ...labels]);
             }
         }
 
@@ -215,6 +228,13 @@ export default defineComponent({
 
         });
 
+        const menuClasses = computed(() => {
+            return [
+                'm-dropdown-menu',
+                style.menu
+            ]
+        })
+
         const transitionName = computed(() => {
             return `m-transition__${props.transitionName}`;
         });
@@ -227,6 +247,7 @@ export default defineComponent({
             isOpen,
             isNested,
             placement,
+            menuClasses,
             computedWrapperClasses,
             computedReferenceClasses,
             transitionName,

package/src/components/dropdown/DropdownItem.vue

@@ -1,118 +1,121 @@
-<template>
-    <li ref="wrapper" :class="computedWrapperClasses" role="menuitem" tabindex="0" @click="handleSelect">
-        <div v-if="hasIconLeft" class="m-dropdown__icon-left">
-            <slot name="icon-left" />
-        </div>
-        <div class="m-dropdown__text">
-            <slot />
-        </div>
-        <!-- <div v-if="hotkey" class="m-dropdown__hotkeys">
-            <template v-for="key in hotkey.split('+')">
-                <kbd>{{ key }}</kbd>
-            </template>
-        </div> -->
-        <div v-if="hasIconRight" class="m-dropdown__icon-right">
-            <slot name="icon-right" />
-        </div>
-    </li>
-</template>
-
-<script lang="ts">
-import { defineComponent, inject, ref, type PropType, computed, toRef, onMounted } from 'vue';
-import { useMagicKeys, whenever } from '@vueuse/core';
-import { useLabel } from './hooks';
-
-export default defineComponent({
-    name: "DropdownItem",
-    props: {
-        label: {
-            type: [String, Number],
-            default: null
-        },
-        disabled: {
-            type: Boolean,
-            default: false
-        },
-        reference: {
-            type: Boolean,
-            default: false
-        },
-        onSelect: {
-            type: Function as PropType<(label: string | number) => void>,
-            default: () => { }
-        },
-        hotkey: {
-            type: String,
-            default: null
-        }
-    },
-    emits: [],
-    setup(props, { slots }) {
-        const parentSelect = inject('dropdown-select', null);
-        const state = inject("dropdown", null);
-        // const keys = useMagicKeys({
-        //     passive: false,
-        //     onEventFired: (event) => {
-
-        //         // only fire when the dropdown is open
-        //         if (state?.isOpen.value) {
-        //             event.preventDefault();
-        //         }
-        //     }
-        // });
-
-        const hasIconLeft = computed(() => !!(slots['icon-left']));
-        const hasIconRight = computed(() => !!(slots['icon-right']));
-
-        const wrapper = ref(null);
-        const label = toRef(props, 'label')
-        const isReference = ref(props.reference)
-        const currentLabel = useLabel(label, wrapper)
-        function handleSelect() {
-            if (props.disabled || isReference.value) {
-                return;
-            }
-
-            if (typeof parentSelect === 'function') {
-                // @ts-ignore
-                parentSelect([currentLabel.value!]);
-            }
-
-            props.onSelect(currentLabel.value!);
-        }
-
-        // const isOpen = computed(() => {
-        //     return state?.isOpen.value;
-        // });
-
-        const computedWrapperClasses = computed(() => {
-            return {
-                'm-dropdown-item': true,
-                'm-dropdown-item--disabled': props.disabled,
-                'm-dropdown-item--reference': props.reference
-            }
-        });
-        
-        // onMounted(() => {
-        //     if (props.hotkey) {
-        //         const combination = keys[props.hotkey];
-
-        //         whenever(combination, (v) => {
-        //             if (v && isOpen.value) {
-        //                 handleSelect();
-        //             }
-        //         })
-        //     }
-        // })
-
-
-        return {
-            wrapper,
-            hasIconLeft,
-            hasIconRight,
-            handleSelect,
-            computedWrapperClasses
-        }
-    }
-})
-</script>
+<template>
+    <li ref="wrapper" :class="computedWrapperClasses" role="menuitem" tabindex="0" @click="handleSelect">
+        <div v-if="hasIconLeft" :class="style.menuItemIcon">
+            <slot name="icon-left" />
+        </div>
+        <div :class="style.menuItemText">
+            <slot />
+        </div>
+        <!-- <div v-if="hotkey" class="m-dropdown__hotkeys">
+            <template v-for="key in hotkey.split('+')">
+                <kbd>{{ key }}</kbd>
+            </template>
+        </div> -->
+        <div v-if="hasIconRight" :class="style.menuItemIcon">
+            <slot name="icon-right" />
+        </div>
+    </li>
+</template>
+
+<script lang="ts">
+import {computed, defineComponent, inject, type PropType, ref, toRef} from 'vue';
+import {useLabel} from './hooks';
+import * as style from "./style";
+
+export default defineComponent({
+    name: "DropdownItem",
+    props: {
+        label: {
+            type: [String, Number],
+            default: null
+        },
+        disabled: {
+            type: Boolean,
+            default: false
+        },
+        reference: {
+            type: Boolean,
+            default: false
+        },
+        onSelect: {
+            type: Function as PropType<(label: string | number) => void>,
+            default: () => { }
+        },
+        hotkey: {
+            type: String,
+            default: null
+        },
+        description: {
+            type: String,
+            default: null
+        }
+    },
+    emits: [],
+    setup(props, { slots }) {
+        const parentSelect = inject('dropdown-select', null);
+        // const state = inject(DROPDOWN_STATE, null);
+        // const keys = useMagicKeys({
+        //     passive: false,
+        //     onEventFired: (event) => {
+
+        //         // only fire when the dropdown is open
+        //         if (state?.isOpen.value) {
+        //             event.preventDefault();
+        //         }
+        //     }
+        // });
+
+        const hasIconLeft = computed(() => !!(slots['icon-left']));
+        const hasIconRight = computed(() => !!(slots['icon-right']));
+
+        const wrapper = ref(null);
+        const label = toRef(props, 'label')
+        const isReference = ref(props.reference)
+        const currentLabel = useLabel(label, wrapper)
+        function handleSelect() {
+            if (props.disabled || isReference.value) {
+                return;
+            }
+
+            if (typeof parentSelect === 'function') {
+                // @ts-ignore
+                parentSelect([currentLabel.value!]);
+            }
+
+            props.onSelect(currentLabel.value!);
+        }
+
+        // const isOpen = computed(() => {
+        //     return state?.isOpen.value;
+        // });
+
+        const computedWrapperClasses = computed(() => {
+            return [
+                style.menuItem
+            ]
+        });
+        
+        // onMounted(() => {
+        //     if (props.hotkey) {
+        //         const combination = keys[props.hotkey];
+
+        //         whenever(combination, (v) => {
+        //             if (v && isOpen.value) {
+        //                 handleSelect();
+        //             }
+        //         })
+        //     }
+        // })
+
+
+        return {
+            wrapper,
+            hasIconLeft,
+            hasIconRight,
+            handleSelect,
+            computedWrapperClasses,
+            style
+        }
+    }
+})
+</script>

package/src/components/dropdown/DropdownList.vue

@@ -1,19 +1,19 @@
 <template>
-    <ul>
+    <ul :class="style.menuItems">
         <slot />
     </ul>
 </template>
 
 <script lang="ts">
 import { defineComponent } from 'vue';
+import * as style from "./style";
 
 export default defineComponent({
     name: "DropdownList",
     setup() {
 
-        // computed classes
         return {
-
+            style
         }
     }
 })

package/src/components/dropdown/DropdownWrapper.vue

@@ -4,11 +4,12 @@
 
 <script lang="ts">
 import { defineComponent, inject, provide } from 'vue';
+import {DROPDOWN_STATE} from "./symbol";
 
 export default defineComponent({
     name: 'DropdownWrapper',
     setup() {
-        const state = inject("dropdown", null);
+        const state = inject(DROPDOWN_STATE, null);
 
         // @ts-ignore
         provide('dropdown-select', state?.handleSelect);

package/src/components/dropdown/examples/custom.vue

@@ -0,0 +1,13 @@
+<template>
+    <MDropdown>
+        <MButton>
+            Menu
+        </MButton>
+
+        <template #menu>
+            <MDropdownList>
+                This is some custom stuffs
+            </MDropdownList>
+        </template>
+    </MDropdown>
+</template>

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

@@ -5,9 +5,10 @@ import MButton from '../../button/Button.vue';
 
 import {
     MDropdownBasic,
-    MDropdownContext
+    MDropdownContext,
+    MDropdownCustom
 } from './index';
-import { createStory } from '@/__storybook__';
+import { createStory } from '../../../__storybook__';
 
 export default {
     component: MDropdown,
@@ -20,4 +21,5 @@ export default {
 }
 
 export const Basic = createStory(MDropdownBasic);
+export const Custom = createStory(MDropdownCustom);
 export const Context = createStory(MDropdownContext);

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

@@ -1,2 +1,3 @@
 export { default as MDropdownBasic } from './basic.vue';
+export { default as MDropdownCustom } from './custom.vue';
 export { default as MDropdownContext } from './context.vue';

package/src/components/dropdown/style/Dropdown.css.ts

@@ -0,0 +1,48 @@
+import { style } from "@vanilla-extract/css";
+import { themeVars } from "../../../styles/theme.css";
+
+export const menu = style({
+    backgroundColor: "#ffffff",
+    borderRadius: "5px",
+    padding: '5px 0',
+    zIndex: 4000,
+    boxSizing: "border-box",
+    position: "relative",
+    minWidth: "200px",
+    maxWidth: "350px",
+    border: `1px solid ${themeVars.color.gray[200]}`,
+    boxShadow: themeVars.shadow.md
+});
+
+export const menuItems = style({
+    listStyle: "none",
+    margin: 0,
+    padding: 0,
+});
+
+export const menuItem = style({
+    position: "relative",
+    display: "flex",
+    alignItems: "center",
+    cursor: "pointer",
+    minHeight: "36px",
+    fontSize: themeVars.fontSize.base,
+    paddingBlock: themeVars.space['1.5'],
+    paddingInline: themeVars.space['3'],
+    gap: themeVars.space[2],
+    color: themeVars.color.gray[800],
+    transition: "background-color 0.05s ease-in-out",
+    ':hover': {
+        backgroundColor: themeVars.color.gray[100],
+    }
+});
+
+export const menuItemText = style({
+    flex: 1,
+    whiteSpace: "nowrap",
+});
+
+export const menuItemIcon = style({
+    display: "flex",
+    alignItems: "center",
+});

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

@@ -0,0 +1 @@
+export * from './Dropdown.css';

package/src/components/dropdown/symbol.ts

@@ -0,0 +1,8 @@
+import type {InjectionKey} from "vue";
+
+export interface DropdownState {
+    handleSelect: (labels: string[]) => void;
+    isOpen: boolean;
+}
+
+export const DROPDOWN_STATE: InjectionKey<DropdownState> = Symbol('DROPDOWN_STATE');

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

@@ -1,5 +1,5 @@
 <template>
-    <MForm @submit="onSubmit" :loading="loading">
+    <MForm @submit="onSubmit" :loading="loading" style="display: flex; flex-direction: column; gap: 10px;">
         <MInput
             label="Email"
             placeholder="Email Address" 
@@ -33,13 +33,15 @@
             Something here!
         </MCheckbox>
 
+        <MColorPicker />
+
 
         <MButton type="submit" color="blue">Submit</MButton>
     </MForm>
 </template>
 
 <script lang="ts" setup>
-import { MCheckbox, MSelect } from '@/components';
+import { MCheckbox, MSelect, MColorPicker } from '@/components';
 import { ref } from 'vue';
 
 const rules = {

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

@@ -3,11 +3,12 @@ import MInput from '../../input/Input.vue';
 import MButton from '../../button/Button.vue';
 import MSelect from '../../select/Select.vue';
 import MCheckbox from '../../checkbox/Checkbox.vue';
+import MColorPicker from '../../colorpicker/ColorPicker.vue';
 
 import {
     MFormBasic
 } from './index';
-import { createStory } from '@/__storybook__';
+import { createStory } from '../../../__storybook__';
 
 export default {
     component: MForm,
@@ -15,7 +16,8 @@ export default {
         MInput,
         MButton,
         MSelect,
-        MCheckbox
+        MCheckbox,
+        MColorPicker
     },
     title: 'Components/Form'
 }

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

@@ -1,4 +1,4 @@
-import { createStory } from "@/__storybook__";
+import { createStory } from "../../../__storybook__";
 import MImage from "../Image.vue";
 import {
     MImageBasic,

package/src/components/index.ts

@@ -1,12 +1,17 @@
+export { default as MBadge } from './badge/Badge.vue';
 export { default as MButton } from './button/Button.vue';
 export { default as MButtonGroup } from './buttongroup/ButtonGroup.vue';
 export { default as MForm } from './form/Form.vue';
 export { default as MInput } from './input/Input.vue';
+export { default as MTag } from './tag/Tag.vue';
 export { default as MSelect } from './select/Select.vue';
 export { default as MCheckbox } from './checkbox/Checkbox.vue';
+export { default as MRadio } from './radio/Radio.vue';
+export { default as MRadioButton } from './radiobutton/RadioButton.vue';
+export { default as MRadioButtonGroup } from './radiobuttongroup/RadioButtonGroup.vue';
 export { default as MBreadcrumb } from './breadcrumb/Breadcrumb.vue';
-export { default as MBreadcrumbItem } from './breadcrumbitem/BreadcrumbItem.vue';
-// export { default as MVirtualScroll } from './virtualscroll/VirtualScroll.vue';
+export { default as MBreadcrumbItem } from './breadcrumb/BreadcrumbItem.vue';
+export { default as MVirtualScroll } from './virtualscroll/VirtualScroll.vue';
 export { default as MAvatar } from './avatar/Avatar.vue';
 export { default as MAvatarGroup } from './avatargroup/AvatarGroup.vue';
 export { default as MImage } from './image/Image.vue';
@@ -25,3 +30,6 @@ export { default as MDropdown } from './dropdown/Dropdown.vue';
 export { default as MDropdownWrapper } from './dropdown/DropdownWrapper.vue';
 export { default as MDropdownList } from './dropdown/DropdownList.vue';
 export { default as MDropdownItem } from './dropdown/DropdownItem.vue';
+export { default as MModal } from './modal/Modal.vue';
+export { default as MColorPicker } from './colorpicker/ColorPicker.vue';
+export { default as MSlider } from './slider/Slider.vue';