@teammodlr/ui-kit 1.0.6 → 2.0.0

package/src/components/breadcrumb/Breadcrumb.vue

@@ -3,30 +3,37 @@
         <slot />
     </ol>
 </template>
-  
-<script lang="ts">
-import {
-    defineComponent, reactive, computed, provide, toRef
-} from "vue";
 
-interface BreadcrumbState {
-    separator: string,
-    refreshItems: () => void
-}
+<script lang="ts">
+import type {PropType} from "vue";
+import {computed, defineComponent, provide, reactive, toRef} from "vue";
+import type {BreadcrumbItemState, BreadcrumbOptions, BreadcrumbState} from "./symbol";
+import {BREADCRUMB_STATE} from "./symbol";
+import * as style from "./style";
 
 export default defineComponent({
     name: "Breadcrumb",
     components: {
-        BreadcrumbItem: () => import("../breadcrumbitem/BreadcrumbItem.vue")
+        BreadcrumbItem: () => import('./BreadcrumbItem.vue')
     },
     props: {
         seperator: {
             type: String,
             default: "/"
+        },
+        options: {
+            type: Array as PropType<BreadcrumbOptions[]>,
         }
     },
     setup(props) {
-        const refreshItems = () => { };
+        const itemStates = new Set<BreadcrumbItemState>();
+        const refreshItems = () => {
+            Array.from(itemStates).forEach((item, index) => {
+                if (!item.label) {
+                    item.label = index + 1;
+                }
+            });
+        };
 
         const state: BreadcrumbState = reactive({
             separator: toRef(props, 'seperator'),
@@ -34,12 +41,12 @@ export default defineComponent({
         });
 
         const classes = computed(() => {
-            return {
-                'm-breadcrumbs': true
-            }
+            return [
+                style.base
+            ]
         });
 
-        provide('breadcrumb', state);
+        provide(BREADCRUMB_STATE, state);
 
         return {
             props,

package/src/components/breadcrumb/BreadcrumbItem.vue

@@ -0,0 +1,73 @@
+<template>
+    <li :class="style.item">
+        <a tabindex="0" @click="handleClick" :class="style.link">
+            <slot>{{ label }}</slot>
+        </a>
+        <span :class="style.separator" role="separator">
+            {{ separator }}
+        </span>
+    </li>
+</template>
+
+<script lang="ts">
+import {defineComponent, inject, onBeforeUnmount, ref, watch} from "vue";
+
+import {BREADCRUMB_STATE} from "./symbol";
+import * as style from "./style";
+
+export default defineComponent({
+    name: 'BreadcrumbItem',
+    props: {
+        label: {
+            type: [String, Number],
+            default: null
+        },
+        onClick: {
+            type: Function,
+            default: () => {
+            }
+        }
+    },
+    setup(props) {
+        const breadcrumbState = inject(BREADCRUMB_STATE);
+
+        const label = ref(props.label);
+        const separator = ref("/");
+
+        watch(
+            () => props.label,
+            value => {
+                label.value = value;
+                breadcrumbState?.refreshItems()
+            }
+        )
+
+        if (breadcrumbState) {
+            // const state: BreadcrumbItemState = reactive({
+            //     label: label
+            // })
+
+            watch(() => breadcrumbState?.separator, (value) => {
+                    separator.value = value
+                },
+                {immediate: true}
+            );
+
+            onBeforeUnmount(() => {
+            });
+        }
+
+        const handleClick = () => {
+            props.onClick();
+        };
+
+        return {
+            label,
+            separator,
+            style,
+            handleClick
+        }
+    }
+})
+</script>
+  

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

@@ -1,9 +1,7 @@
 <template>
-    <div>
-        <MBreadcrumb>
-            <MBreadcrumbItem>Home</MBreadcrumbItem>
-            <MBreadcrumbItem>Category One</MBreadcrumbItem>
-            <MBreadcrumbItem>Category Two</MBreadcrumbItem>
-        </MBreadcrumb>  
-    </div>
+    <MBreadcrumb>
+        <MBreadcrumbItem>Home</MBreadcrumbItem>
+        <MBreadcrumbItem>Category One</MBreadcrumbItem>
+        <MBreadcrumbItem>Category Two</MBreadcrumbItem>
+    </MBreadcrumb>
 </template>

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

@@ -1,5 +1,5 @@
 import MBreadcrumb from "../Breadcrumb.vue";
-import MBreadcrumbItem from "../../breadcrumbitem/BreadcrumbItem.vue";
+import MBreadcrumbItem from "../BreadcrumbItem.vue";
 
 import {
     MBreadcrumbBasic
@@ -7,7 +7,7 @@ import {
 
 import {
     createStory
-} from "@/__storybook__";
+} from "../../../__storybook__";
 
 export default {
     component: MBreadcrumb,

package/src/components/breadcrumb/style/Breadcrumb.css.ts

@@ -0,0 +1,40 @@
+import {globalStyle, style} from "@vanilla-extract/css";
+import {themeVars} from "../../../styles/theme.css";
+
+export const base = style({
+    display: "flex",
+    position: "relative",
+    margin: 0,
+    padding: 0,
+    listStyle: "none",
+    boxSizing: "border-box",
+});
+
+export const item = style({
+    display: "flex",
+    alignItems: "center",
+    fontSize: themeVars.fontSize.base,
+});
+
+export const link = style({
+    padding: `0 ${themeVars.space[2]}`,
+    color: themeVars.color.gray[600],
+    cursor: "pointer",
+    textDecoration: "none",
+    outline: 0,
+    transition: `color 0.2s ${themeVars.transition.default}`,
+    ":hover": {
+        color: themeVars.color.blue[500],
+    }
+});
+
+export const separator = style({
+    padding: `0 ${themeVars.space[1]}`,
+    display: "inline-flex",
+    color: themeVars.color.gray[300],
+    userSelect: "none"
+});
+
+globalStyle(`${base} ${item}:last-child ${separator}`, {
+    display: "none"
+});

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

@@ -0,0 +1 @@
+export * from "./Breadcrumb.css";

package/src/components/breadcrumb/symbol.ts

@@ -0,0 +1,17 @@
+import type {InjectionKey} from "vue";
+
+export interface BreadcrumbOptions {
+    label: string;
+    name?: string | (() => string);
+}
+
+export interface BreadcrumbItemState {
+    label: string | number;
+}
+
+export interface BreadcrumbState {
+    separator: string;
+    refreshItems: () => void
+}
+
+export const BREADCRUMB_STATE: InjectionKey<BreadcrumbState> = Symbol('BREADCRUMB_STATE');

package/src/components/button/Button.vue

@@ -1,108 +1,195 @@
-<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>
+<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, nextTick, onBeforeUnmount, onMounted, ref} from "vue";
+import type {Size, Variant} from "../../types/props";
+import * as style from "./style";
+import {BUTTON_GROUP_STATE} from "../buttongroup/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
+        },
+        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 state = inject("dropdown", null);
+        const sizeValue = ref<Size>('md');
+        const waveActive = ref<boolean>(false);
+        const waveTimerId = ref<number | null>(0);
+
+        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,
+                }
+            ]
+        });
+
+        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/icon-left.vue

@@ -0,0 +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>

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

@@ -1,10 +1,9 @@
 <template>
-    <MButton>
-        <template #icon-left>
-            <svg style="width: 20px; height: 20px;" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
-                <path stroke-linecap="round" stroke-linejoin="round" d="M10.5 6h9.75M10.5 6a1.5 1.5 0 11-3 0m3 0a1.5 1.5 0 10-3 0M3.75 6H7.5m3 12h9.75m-9.75 0a1.5 1.5 0 01-3 0m3 0a1.5 1.5 0 00-3 0m-3.75 0H7.5m9-6h3.75m-3.75 0a1.5 1.5 0 01-3 0m3 0a1.5 1.5 0 00-3 0m-9.75 0h9.75" />
-            </svg>
-        </template>
-        Hello World
+    <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

@@ -3,23 +3,24 @@ import {
     MButtonBasic,
     MButtonSize,
     MButtonRounded,
-    MButtonColor,
-    MButtonColorSecondary,
+    MButtonVariant,
+    MButtonVariantSecondary,
     MButtonDisabled,
+    MButtonIconLeft,
     MButtonIcon
 } from "./index";
 
 import {
-    colorArgType,
+    variantArgType,
     createStory,
     sizeArgType
-} from "@/__storybook__";
+} from "../../../__storybook__";
 
 export default {
     component: MButton,
     title: 'Components/Buttons/Button',
     argTypes: {
-        ...colorArgType(),
+        ...variantArgType(),
         ...sizeArgType()
     }
 }
@@ -27,7 +28,8 @@ export default {
 export const Basic = createStory(MButtonBasic);
 export const Size = createStory(MButtonSize);
 export const Rounded = createStory(MButtonRounded);
-export const Colors = createStory(MButtonColor);
-export const ColorsSecondary = createStory(MButtonColorSecondary);
+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,7 +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 MButtonColor } from './colors.vue';
-export { default as MButtonColorSecondary } from './colors-secondary.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/variants-secondary.vue

@@ -0,0 +1,8 @@
+<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="success">Success</MButton><br/><br/>
+    <MButton secondary variant="warning">Warning</MButton><br/><br/>
+    <MButton secondary variant="error">Error</MButton><br/><br/>
+</template>

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

@@ -0,0 +1,8 @@
+<template>
+    <MButton>Default</MButton><br/><br/>
+    <MButton variant="tertiary">Tertiary</MButton><br/><br/>
+    <MButton variant="primary">Primary</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>