@teammodlr/ui-kit 2.1.41 → 2.1.44

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.vue

@@ -1,54 +1,54 @@
-<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",
-    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 {
-            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",
+    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 {
+            refreshItems,
+            classes
+        }
+    }
+})
+</script>

package/src/components/breadcrumb/BreadcrumbItem.vue

@@ -1,73 +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>
+<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,7 +1,7 @@
-<template>
-    <MBreadcrumb>
-        <MBreadcrumbItem>Home</MBreadcrumbItem>
-        <MBreadcrumbItem>Category One</MBreadcrumbItem>
-        <MBreadcrumbItem>Category Two</MBreadcrumbItem>
-    </MBreadcrumb>
-</template>
+<template>
+    <MBreadcrumb>
+        <MBreadcrumbItem>Home</MBreadcrumbItem>
+        <MBreadcrumbItem>Category One</MBreadcrumbItem>
+        <MBreadcrumbItem>Category Two</MBreadcrumbItem>
+    </MBreadcrumb>
+</template>

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

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

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

@@ -1,40 +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'
-});
+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

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

package/src/components/breadcrumb/symbol.ts

@@ -1,18 +1,18 @@
-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');
+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');