@teammodlr/ui-kit 2.0.25 → 2.0.27

package/src/components/badge/Badge.vue

@@ -1,43 +1,43 @@
-<template>
-    <span :class="baseClass" >
-        <span :class="textClass" secondary>
-            <slot />
-        </span>
-    </span>
-</template>
-
-<script lang="ts">
-import type { Variant } from '../../types/props';
-import { computed, defineComponent, type PropType } from 'vue';
-import * as style from "./style";
-
-export default defineComponent({
-    name: "MBadge",
-    props: {
-        variant: {
-            type: String as PropType<Variant>,
-            default: 'default'
-        },
-        secondary: {
-            type: Boolean,
-            default: false
-        }
-    },
-    setup(props) {
-        const baseClass = computed(() => {
-            return [
-                style.base,
-                style.variant[props.variant],
-                {
-                    [style.secondary[props.variant]]: props.secondary
-                }
-            ]
-        });
-
-        return {
-            textClass: style.text,
-            baseClass
-        }
-    }
-})
-</script>
+<template>
+    <span :class="baseClass" >
+        <span :class="textClass" secondary>
+            <slot />
+        </span>
+    </span>
+</template>
+
+<script lang="ts">
+import type { Variant } from '../../types/props';
+import { computed, defineComponent, type PropType } from 'vue';
+import * as style from "./style";
+
+export default defineComponent({
+    name: "MBadge",
+    props: {
+        variant: {
+            type: String as PropType<Variant>,
+            default: 'default'
+        },
+        secondary: {
+            type: Boolean,
+            default: false
+        }
+    },
+    setup(props) {
+        const baseClass = computed(() => {
+            return [
+                style.base,
+                style.variant[props.variant],
+                {
+                    [style.secondary[props.variant]]: props.secondary
+                }
+            ]
+        });
+
+        return {
+            textClass: style.text,
+            baseClass
+        }
+    }
+})
+</script>

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

@@ -1,10 +1,10 @@
-<template>
-    <MBadge secondary>default</MBadge>
-</template>
-
-<script lang="ts" setup>
-import { ref } from 'vue';
-
-const badgeValue = ref(0);
-
-</script>
+<template>
+    <MBadge secondary>default</MBadge>
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue';
+
+const badgeValue = ref(0);
+
+</script>

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

@@ -1,21 +1,21 @@
-import MBadge from "../Badge.vue";
-
-import {
-    MBadgeBasic,
-} from "./index";
-
-import {
-    variantArgType,
-    createStory,
-    sizeArgType
-} from "../../../__storybook__";
-
-export default {
-    component: MBadge,
-    title: 'Components/Badge',
-    argTypes: {
-        ...variantArgType()
-    }
-}
-
-export const Basic = createStory(MBadgeBasic);
+import MBadge from "../Badge.vue";
+
+import {
+    MBadgeBasic,
+} from "./index";
+
+import {
+    variantArgType,
+    createStory,
+    sizeArgType
+} from "../../../__storybook__";
+
+export default {
+    component: MBadge,
+    title: 'Components/Badge',
+    argTypes: {
+        ...variantArgType()
+    }
+}
+
+export const Basic = createStory(MBadgeBasic);

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

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

package/src/components/badge/style/Badge.css.ts

@@ -1,135 +1,135 @@
-import {createVar, style, styleVariants} from "@vanilla-extract/css";
-import {themeVars} from "../../../styles/theme.css";
-
-const borderRadiuses = {
-    xs: '2px',
-    sm: '3px',
-    md: '4px',
-    lg: '6px',
-    xl: '8px',
-};
-
-const vars = {
-    color: createVar(),
-    backgroundColor: createVar(),
-    radius: createVar(),
-};
-
-export const base = style({
-    vars: {
-        [vars.radius]: borderRadiuses.md,
-    },
-    boxSizing: "border-box",
-    appearance: "none",
-    border: 0,
-    display: "inline-flex",
-    position: "static",
-    borderRadius: vars.radius,
-    backgroundColor: vars.backgroundColor,
-    overflow: "hidden",
-    padding: `${themeVars.space['0.5']} ${themeVars.space[1]}`,
-})
-
-export const text = style({
-    color: vars.color,
-    margin: 0,
-    padding: 0,
-    fontSize: themeVars.fontSize.xsmall,
-    fontWeight: "500",
-    letterSpacing: '0.5px',
-    textTransform: 'uppercase',
-    lineHeight: themeVars.fontSize.base,
-    overflow: 'hidden',
-    textOverflow: 'ellipsis',
-    whiteSpace: 'nowrap',
-})
-
-export const variant = styleVariants({
-    primary: {
-        vars: {
-            [vars.backgroundColor]: themeVars.color.blue[500],
-            [vars.color]: '#FFFFFF',
-        }
-    },
-    dark: {
-        vars: {
-            [vars.backgroundColor]: themeVars.color.saxe[800],
-            [vars.color]: '#FFFFFF',
-        },
-    },
-    default: {
-        vars: {
-            [vars.color]: 'white',
-            [vars.backgroundColor]: themeVars.color.gray[500],
-        }              
-    },
-    tertiary: {
-        vars: {
-            [vars.color]: themeVars.color.gray[100],
-            [vars.backgroundColor]: themeVars.color.gray[400],
-        }   
-    },
-    success: {
-        vars: {
-            [vars.backgroundColor]: themeVars.color.green[500],
-            [vars.color]: '#FFFFFF',
-        }
-    },
-    warning: {
-        vars: {
-            [vars.backgroundColor]: themeVars.color.amber[400],
-            [vars.color]: themeVars.color.gray[800],
-        }
-    },
-    error: {
-        vars: {
-            [vars.backgroundColor]: themeVars.color.red[500],
-            [vars.color]: '#FFFFFF',
-        }
-    },
-});
-
-export const secondary = styleVariants({
-    primary: {
-        vars: {
-            [vars.backgroundColor]: themeVars.color.blue[100],
-            [vars.color]: themeVars.color.blue[600],
-        }
-    },
-    dark: {
-        vars: {
-            [vars.backgroundColor]: themeVars.color.saxe[100],
-            [vars.color]: themeVars.color.saxe[900],
-        }
-    },
-    default: {
-        vars: {
-            [vars.backgroundColor]: themeVars.color.gray[100],
-            [vars.color]: themeVars.color.gray[600],
-        }              
-    },
-    tertiary: {
-        vars: {
-            [vars.backgroundColor]: themeVars.color.gray[100],
-            [vars.color]: themeVars.color.gray[400],
-        }   
-    },
-    success: {
-        vars: {
-            [vars.backgroundColor]: themeVars.color.green[100],
-            [vars.color]: themeVars.color.green[600],
-        }
-    },
-    warning: {
-        vars: {
-            [vars.backgroundColor]: themeVars.color.amber[100],
-            [vars.color]: themeVars.color.amber[600],
-        }
-    },
-    error: {
-        vars: {
-            [vars.backgroundColor]: themeVars.color.red[100],
-            [vars.color]: themeVars.color.red[600],
-        }
-    },
-});
+import {createVar, style, styleVariants} from "@vanilla-extract/css";
+import {themeVars} from "../../../styles/theme.css";
+
+const borderRadiuses = {
+    xs: '2px',
+    sm: '3px',
+    md: '4px',
+    lg: '6px',
+    xl: '8px',
+};
+
+const vars = {
+    color: createVar(),
+    backgroundColor: createVar(),
+    radius: createVar(),
+};
+
+export const base = style({
+    vars: {
+        [vars.radius]: borderRadiuses.md,
+    },
+    boxSizing: "border-box",
+    appearance: "none",
+    border: 0,
+    display: "inline-flex",
+    position: "static",
+    borderRadius: vars.radius,
+    backgroundColor: vars.backgroundColor,
+    overflow: "hidden",
+    padding: `${themeVars.space['0.5']} ${themeVars.space[1]}`,
+})
+
+export const text = style({
+    color: vars.color,
+    margin: 0,
+    padding: 0,
+    fontSize: themeVars.fontSize.xsmall,
+    fontWeight: "500",
+    letterSpacing: '0.5px',
+    textTransform: 'uppercase',
+    lineHeight: themeVars.fontSize.base,
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
+    whiteSpace: 'nowrap',
+})
+
+export const variant = styleVariants({
+    primary: {
+        vars: {
+            [vars.backgroundColor]: themeVars.color.blue[500],
+            [vars.color]: '#FFFFFF',
+        }
+    },
+    dark: {
+        vars: {
+            [vars.backgroundColor]: themeVars.color.saxe[800],
+            [vars.color]: '#FFFFFF',
+        },
+    },
+    default: {
+        vars: {
+            [vars.color]: 'white',
+            [vars.backgroundColor]: themeVars.color.gray[500],
+        }              
+    },
+    tertiary: {
+        vars: {
+            [vars.color]: themeVars.color.gray[100],
+            [vars.backgroundColor]: themeVars.color.gray[400],
+        }   
+    },
+    success: {
+        vars: {
+            [vars.backgroundColor]: themeVars.color.green[500],
+            [vars.color]: '#FFFFFF',
+        }
+    },
+    warning: {
+        vars: {
+            [vars.backgroundColor]: themeVars.color.amber[400],
+            [vars.color]: themeVars.color.gray[800],
+        }
+    },
+    error: {
+        vars: {
+            [vars.backgroundColor]: themeVars.color.red[500],
+            [vars.color]: '#FFFFFF',
+        }
+    },
+});
+
+export const secondary = styleVariants({
+    primary: {
+        vars: {
+            [vars.backgroundColor]: themeVars.color.blue[100],
+            [vars.color]: themeVars.color.blue[600],
+        }
+    },
+    dark: {
+        vars: {
+            [vars.backgroundColor]: themeVars.color.saxe[100],
+            [vars.color]: themeVars.color.saxe[900],
+        }
+    },
+    default: {
+        vars: {
+            [vars.backgroundColor]: themeVars.color.gray[100],
+            [vars.color]: themeVars.color.gray[600],
+        }              
+    },
+    tertiary: {
+        vars: {
+            [vars.backgroundColor]: themeVars.color.gray[100],
+            [vars.color]: themeVars.color.gray[400],
+        }   
+    },
+    success: {
+        vars: {
+            [vars.backgroundColor]: themeVars.color.green[100],
+            [vars.color]: themeVars.color.green[600],
+        }
+    },
+    warning: {
+        vars: {
+            [vars.backgroundColor]: themeVars.color.amber[100],
+            [vars.color]: themeVars.color.amber[600],
+        }
+    },
+    error: {
+        vars: {
+            [vars.backgroundColor]: themeVars.color.red[100],
+            [vars.color]: themeVars.color.red[600],
+        }
+    },
+});

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

@@ -1 +1 @@
-export * from './Badge.css';
+export * from './Badge.css';

package/src/components/breadcrumb/Breadcrumb.css

@@ -1,46 +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;*/
-}
+.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,58 +1,58 @@
-<template>
-    <ol :class="classes">
-        <slot />
-    </ol>
-</template>
-
-<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.vue')
-    },
-    props: {
-        seperator: {
-            type: String,
-            default: "/"
-        },
-        options: {
-            type: Array as PropType<BreadcrumbOptions[]>,
-        }
-    },
-    setup(props) {
-        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'),
-            refreshItems
-        });
-
-        const classes = computed(() => {
-            return [
-                style.base
-            ]
-        });
-
-        provide(BREADCRUMB_STATE, state);
-
-        return {
-            props,
-            refreshItems,
-            classes
-        }
-    }
-})
-</script>
+<template>
+    <ol :class="classes">
+        <slot />
+    </ol>
+</template>
+
+<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.vue')
+    },
+    props: {
+        seperator: {
+            type: String,
+            default: "/"
+        },
+        options: {
+            type: Array as PropType<BreadcrumbOptions[]>,
+        }
+    },
+    setup(props) {
+        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'),
+            refreshItems
+        });
+
+        const classes = computed(() => {
+            return [
+                style.base
+            ]
+        });
+
+        provide(BREADCRUMB_STATE, state);
+
+        return {
+            props,
+            refreshItems,
+            classes
+        }
+    }
+})
+</script>