@teammodlr/ui-kit 1.0.4 → 1.0.5

package/package.json

@@ -1,12 +1,13 @@
 {
   "name": "@teammodlr/ui-kit",
-  "version": "1.0.4",
+  "version": "1.0.5",
   "description": "",
   "main": "lib/index.cjs.js",
   "module": "lib/index.es.js",
   "typings": "lib/index.d.ts",
   "files": [
     "lib",
+    "src",
     "*.d.ts"
   ],
   "exports": {

package/src/__storybook__/argTypes.ts

@@ -0,0 +1,42 @@
+import { placementWhileList } from "@/composables/usePopper";
+
+export const sizeArgType = () => ({
+    size: {
+        options: ['xs', 'sm', 'md', 'lg', 'xl'],
+        control: {
+            type: 'select',
+            labels: {
+                ['Extra Small']: 'xs',
+                ['Small']: 'sm',
+                ['Medium']: 'md',
+                ['Large']: 'lg',
+                ['Extra Large']: 'xl'
+            }
+        }
+    }
+});
+
+export const colorArgType = () => ({
+    color: {
+        options: [
+            'white',
+            'black',
+            'green',
+            'red',
+            'yellow',
+            'blue',
+        ],
+        control: {
+            type: 'select',
+        }
+    }
+});
+
+export const popperPositionArgType = () => ({
+    placement: {
+        options: placementWhileList,
+        control: {
+            type: 'select',
+        }
+    }
+})

package/src/__storybook__/createStory.ts

@@ -0,0 +1,15 @@
+import { h } from 'vue';
+import type { Component } from 'vue';
+
+export const createStory =
+    (component: Component, storyArgs: { classes?: string } = {}) =>
+        (args: any) => ({
+            setup: () => () =>
+                h(
+                    'div',
+                    {
+                        class: `storybook-example ${storyArgs.classes || ''}`
+                    },
+                    [h(component, args)]
+                )
+        });

package/src/__storybook__/index.ts

@@ -0,0 +1,2 @@
+export * from './createStory';
+export * from './argTypes';

package/src/components/avatar/Avatar.css

@@ -0,0 +1,69 @@
+.m-avatar {
+    --avatar-height: 40px;
+    --avatar-width: 40px;
+    --avatar-font-size: 13px;
+    --avatar-border-radius: 4px;
+    width: var(--avatar-width);
+    height: var(--avatar-height);
+    font-size: var(--avatar-font-size);
+    position: relative;
+    display: inline-flex;
+    background-color: var(--gray-200);
+    color: var(--gray-400);
+    overflow: hidden;
+    white-space: nowrap;
+    vertical-align: middle;
+    justify-content: center;
+    align-items: center;
+    box-sizing: content-box;
+    border-radius: var(--avatar-border-radius);
+    font-weight: 600;
+    user-select: none;
+}
+
+.m-avatar img {
+    width: 100%;
+    height: 100%;
+}
+
+.m-avatar--circle {
+    --avatar-border-radius: 50%;
+}
+
+.m-avatar--rounded {
+    --avatar-border-radius: 4px;
+}
+
+.m-avatar--square {
+    --avatar-border-radius: 0;
+}
+
+.m-avatar--xs {
+    --avatar-height: 24px;
+    --avatar-width: 24px;
+    --avatar-font-size: 11px;
+}
+
+.m-avatar--sm {
+    --avatar-height: 32px;
+    --avatar-width: 32px;
+    --avatar-font-size: 12px;
+}
+
+.m-avatar--md {
+    --avatar-height: 40px;
+    --avatar-width: 40px;
+    --avatar-font-size: 13px;
+}
+
+.m-avatar--lg {
+    --avatar-height: 48px;
+    --avatar-width: 48px;
+    --avatar-font-size: 16px;
+}
+
+.m-avatar--xl {
+    --avatar-height: 56px;
+    --avatar-width: 56px;
+    --avatar-font-size: 17px;
+}

package/src/components/avatar/Avatar.vue

@@ -0,0 +1,102 @@
+<template>
+    <span 
+        :class="classes"
+        :style="customSize" 
+        ref="avatar"
+    >
+        <MImage
+            v-if="(src || srcSet) && imageExists"
+            :src="src"
+            :alt="src"
+            :srcset="srcSet"
+            @error="handleImageLoadError"
+            />
+        <slot v-else />
+    </span>
+</template>
+
+<script lang="ts">
+import { defineComponent, ref, computed, inject, onMounted } from 'vue';
+import MImage from '../image/Image.vue';
+
+export default defineComponent({
+    name: "MAvatar",
+    components: {
+        MImage,
+    },
+    props: {
+        src: {
+            type: String,
+            default: ""
+        },
+        srcSet: {
+            type: String,
+            default: ""
+        },
+        size: {
+            type: [Number, String],
+            default: 'md'
+        },
+        fit: {
+            type: String,
+            default: "cover"
+        },
+        variant: {
+            type: String,
+            default: "circle"
+        }
+    },
+    emits: {
+        error: (e: Event) => true
+    },
+    setup(props, { emit }) {
+        const avatarGroup = inject('avatarGroup', undefined);
+        const avatar = ref<HTMLElement | null>(null);
+        const imageExists = ref(true);
+        const sizeValue = ref('');
+
+        const groupSize = computed(() => {
+            // @ts-ignore
+            return avatarGroup?.size
+        });
+
+        const isCustomSize = computed(() => {
+            return typeof props.size === 'number' || props.size.includes('px')
+        });
+
+        const customSize = computed(() => {
+            return isCustomSize.value ? {
+                width: props.size,
+                height: props.size
+            } : {}
+        });
+
+        const classes = computed(() => {
+            return {
+                'm-avatar': true,
+                [`m-avatar--${sizeValue.value}`]: !isCustomSize.value,
+                [`m-avatar--${props.variant}`]: true
+            }
+        });
+
+        const handleImageLoadError = (e: Event) => {
+            imageExists.value = false;
+            emit('error', e);
+        };
+
+        onMounted(() => {
+            sizeValue.value = groupSize.value || props.size;
+        });
+
+        return {
+            avatar,
+            avatarGroup,
+            classes,
+            customSize,
+            imageExists,
+
+            handleImageLoadError
+        }
+    }
+})
+</script>

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

@@ -0,0 +1,6 @@
+<template>
+    <MAvatar
+        src="https://cdn.discordapp.com/avatars/314170125915783180/9f71af5f78d3188a0c92800c94112496.webp"
+        variant="rounded"
+        />
+</template>

package/src/components/avatar/examples/custom-size.vue

@@ -0,0 +1,7 @@
+<template>
+    <MAvatar
+        src="https://cdn.discordapp.com/avatars/314170125915783180/9f71af5f78d3188a0c92800c94112496.webp"
+        variant="rounded"
+        size="100px"
+        />
+</template>

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

@@ -0,0 +1,28 @@
+import MAvatar from "../Avatar.vue";
+
+import {
+    MAvatarBasic,
+    MAvatarSize,
+    MAvatarCustomSize,
+    MAvatarVariant,
+    MAvatarSlot
+} from "./index";
+
+import {
+    colorArgType,
+    createStory, sizeArgType
+} from "@/__storybook__";
+
+export default {
+    component: MAvatar,
+    title: 'Components/Avatar',
+    argTypes: {
+        ...sizeArgType()
+    }
+}
+
+export const Basic = createStory(MAvatarBasic);
+export const Sizes = createStory(MAvatarSize);
+export const CustomSize = createStory(MAvatarCustomSize);
+export const Variants = createStory(MAvatarVariant);
+export const Slots = createStory(MAvatarSlot);

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

@@ -0,0 +1,5 @@
+export { default as MAvatarBasic } from './basic.vue';
+export { default as MAvatarSize } from './sizes.vue';
+export { default as MAvatarCustomSize } from './custom-size.vue';
+export { default as MAvatarVariant } from './variants.vue';
+export { default as MAvatarSlot } from './slots.vue';

package/src/components/avatar/examples/sizes.vue

@@ -0,0 +1,33 @@
+<template>
+    <div>
+        <MAvatar
+            src="https://cdn.discordapp.com/avatars/314170125915783180/9f71af5f78d3188a0c92800c94112496.webp"
+            variant="rounded"
+            size="xs"
+            /><br /><br />
+
+        <MAvatar
+            src="https://cdn.discordapp.com/avatars/314170125915783180/9f71af5f78d3188a0c92800c94112496.webp"
+            variant="rounded"
+            size="sm"
+            /><br /><br />
+
+        <MAvatar
+            src="https://cdn.discordapp.com/avatars/314170125915783180/9f71af5f78d3188a0c92800c94112496.webp"
+            variant="rounded"
+            size="md"
+            /><br /><br />
+
+        <MAvatar
+            src="https://cdn.discordapp.com/avatars/314170125915783180/9f71af5f78d3188a0c92800c94112496.webp"
+            variant="rounded"
+            size="lg"
+            /><br /><br />
+
+        <MAvatar
+            src="https://cdn.discordapp.com/avatars/314170125915783180/9f71af5f78d3188a0c92800c94112496.webp"
+            variant="rounded"
+            size="xl"
+            /><br /><br />
+    </div>
+</template>

package/src/components/avatar/examples/slots.vue

@@ -0,0 +1,7 @@
+<template>
+    <MAvatar
+        variant="rounded"
+    >
+        BV
+    </MAvatar>
+</template>

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

@@ -0,0 +1,18 @@
+<template>
+    <div>
+        <MAvatar
+            src="https://cdn.discordapp.com/avatars/314170125915783180/9f71af5f78d3188a0c92800c94112496.webp"
+            variant="square"
+            /><br /><br />
+
+        <MAvatar
+            src="https://cdn.discordapp.com/avatars/314170125915783180/9f71af5f78d3188a0c92800c94112496.webp"
+            variant="rounded"
+            /><br /><br />
+
+        <MAvatar
+            src="https://cdn.discordapp.com/avatars/314170125915783180/9f71af5f78d3188a0c92800c94112496.webp"
+            variant="circle"
+            /><br /><br />
+    </div>
+</template>

package/src/components/avatargroup/AvatarGroup.css

@@ -0,0 +1,8 @@
+.m-avatar-group .m-avatar:not(:last-child) {
+    margin-right: calc(0px - 10px);
+}
+
+
+.m-avatar-group .m-avatar {
+    border: 2px solid var(--white);
+}

package/src/components/avatargroup/AvatarGroup.vue

@@ -0,0 +1,32 @@
+<template>
+    <div class="m-avatar-group">
+        <slot />
+    </div>
+</template>
+
+<script lang="ts">
+import { defineComponent, provide } from 'vue';
+
+
+export default defineComponent({
+    name: "MAvatarGroup",
+    props: {
+        max: {
+            type: Number,
+            default: 5
+        },
+        size: {
+            type: [Number, String],
+            default: 'md'
+        }
+    },
+    setup(props) {
+
+        provide('avatarGroup', props);
+
+        return {
+            props
+        }
+    }
+})
+</script>

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

@@ -0,0 +1,11 @@
+
+
+<template>
+    <MAvatarGroup>
+        <MAvatar src="https://cdn.discordapp.com/avatars/314170125915783180/9f71af5f78d3188a0c92800c94112496.webp" variant="circle" />
+        <MAvatar src="https://cdn.vuetifyjs.com/images/lists/2.jpg" variant="circle" />
+        <MAvatar src="https://cdn.vuetifyjs.com/images/lists/3.jpg" variant="circle" />
+        <MAvatar src="https://cdn.vuetifyjs.com/images/lists/4.jpg" variant="circle" />
+        <MAvatar src="https://cdn.vuetifyjs.com/images/lists/5.jpg" variant="circle" />
+    </MAvatarGroup>
+</template>

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

@@ -0,0 +1,28 @@
+import MAvatarGroup from "../AvatarGroup.vue";
+import MAvatar from "../../avatar/Avatar.vue";
+
+import {
+    MAvatarGroupBasic
+} from "./index";
+
+import {
+    createStory
+} from "@/__storybook__";
+
+export default {
+    component: MAvatarGroup,
+    subcomponents: {
+        MAvatar
+    },
+    title: 'Components/Avatar Group',
+    argTypes: {
+        size: {
+            control: {
+                type: 'select',
+                options: ['xs', 'sm', 'md', 'lg', 'xl']
+            }
+        },
+    }
+}
+
+export const Basic = createStory(MAvatarGroupBasic);

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

@@ -0,0 +1 @@
+export { default as MAvatarGroupBasic } from './basic.vue';

package/src/components/breadcrumb/Breadcrumb.css

@@ -0,0 +1,46 @@
+.m-breadcrumbs {
+    display: flex;
+    list-style: none;
+    margin: 0;
+    padding: 4px;
+    font-variant-numeric: tabular-nums;
+    align-items: center;
+    position: relative;
+}
+
+.m-breadcrumbs__item:last-child .m-breadcrumbs__item-separator {
+    display: none;
+}
+
+.m-breadcrumbs__item {
+    display: flex;
+    align-items: center;
+    outline: none;
+    cursor: pointer;
+    color: var(--gray-600);
+}
+
+.m-breadcrumbs__link {
+    padding: 4px 10px;
+    font-size: 14px;
+    border-radius: 4px;
+    background-color: transparent;
+    text-decoration: none;
+    outline: 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 .3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow .3s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.m-breadcrumbs__link:hover {
+    color: var(--blue-dark);
+    background-color: var(--gray-100);
+}
+
+.m-breadcrumbs__item-separator {
+    display: inline-flex;
+    padding: 0 6px;
+    cursor: default;
+    user-select: none;
+    color: var(--gray-300);
+    /*font-style: italic;*/
+    /*border-right: 2px solid transparent;*/
+}

package/src/components/breadcrumb/Breadcrumb.vue

@@ -0,0 +1,51 @@
+<template>
+    <ol :class="classes">
+        <slot />
+    </ol>
+</template>
+  
+<script lang="ts">
+import {
+    defineComponent, reactive, computed, provide, toRef
+} from "vue";
+
+interface BreadcrumbState {
+    separator: string,
+    refreshItems: () => void
+}
+
+export default defineComponent({
+    name: "Breadcrumb",
+    components: {
+        BreadcrumbItem: () => import("../breadcrumbitem/BreadcrumbItem.vue")
+    },
+    props: {
+        seperator: {
+            type: String,
+            default: "/"
+        }
+    },
+    setup(props) {
+        const refreshItems = () => { };
+
+        const state: BreadcrumbState = reactive({
+            separator: toRef(props, 'seperator'),
+            refreshItems
+        });
+
+        const classes = computed(() => {
+            return {
+                'm-breadcrumbs': true
+            }
+        });
+
+        provide('breadcrumb', state);
+
+        return {
+            props,
+            refreshItems,
+            classes
+        }
+    }
+})
+</script>

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

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

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

@@ -0,0 +1,20 @@
+import MBreadcrumb from "../Breadcrumb.vue";
+import MBreadcrumbItem from "../../breadcrumbitem/BreadcrumbItem.vue";
+
+import {
+    MBreadcrumbBasic
+} from "./index";
+
+import {
+    createStory
+} from "@/__storybook__";
+
+export default {
+    component: MBreadcrumb,
+    subcomponents: {
+        MBreadcrumbItem
+    },
+    title: 'Components/Breadcrumb',
+}
+
+export const Basic = createStory(MBreadcrumbBasic);

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

@@ -0,0 +1 @@
+export { default as MBreadcrumbBasic } from './basic.vue';

package/src/components/breadcrumbitem/BreadcrumbItem.vue

@@ -0,0 +1,66 @@
+<template>
+    <li class="m-breadcrumbs__item">
+        <a tabindex="0" @click="handleClick" class="m-breadcrumbs__link">
+            <slot>{{ label }}</slot>
+        </a>
+        <span class="m-breadcrumbs__item-separator" role="separator">
+            {{ separator }}
+        </span>
+    </li>
+</template>
+  
+<script lang="ts">
+import {
+    defineComponent, ref, reactive, watch, inject, onBeforeUnmount
+} from "vue";
+
+interface BreadcrumbItemState {
+    label: string | number;
+}
+
+export default defineComponent({
+    name: 'BreadcrumbItem',
+    props: {
+        label: {
+            type: [String, Number],
+            default: null
+        }
+    },
+    setup(props) {
+        const breadcrumbState = inject("breadcrumb");
+
+        const label = ref(props.label);
+        const separator = ref("/");
+
+        watch(
+            () => props.label,
+            value => {
+                label.value = value;
+                // @ts-ignore
+                breadcrumbState?.refreshItems()
+            }
+        )
+
+        if (breadcrumbState) {
+            const state: BreadcrumbItemState = reactive({
+                label: label
+            })
+
+            // @ts-ignore
+            watch(() => breadcrumbState.separator, value => separator.value = value, { immediate: true });
+
+            onBeforeUnmount(() => { });
+        }
+
+        const handleClick = () => { };
+
+        return {
+            label,
+            separator,
+
+            handleClick
+        }
+    }
+})
+</script>
+  

package/src/components/breadcrumbitem/index.ts

@@ -0,0 +1 @@
+export { default as MBreadcrumbItem } from './MBreadcrumbItem.vue';