@teammodlr/ui-kit 1.0.2 → 1.0.4

package/package.json

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

package/src/__storybook__/argTypes.ts

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

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

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

package/src/components/avatar/Avatar.css

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

@@ -1,102 +0,0 @@
-<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/avatargroup/AvatarGroup.css

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

@@ -1,32 +0,0 @@
-<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/breadcrumb/Breadcrumb.css

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

@@ -1,51 +0,0 @@
-<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/breadcrumbitem/BreadcrumbItem.vue

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

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