@teammodlr/ui-kit 2.0.21 → 2.0.23

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@teammodlr/ui-kit",
-  "version": "2.0.21",
+  "version": "2.0.23",
   "description": "",
   "main": "lib/index.cjs.js",
   "module": "lib/index.es.js",
@@ -44,15 +44,15 @@
     "@capsizecss/vanilla-extract": "^1.0.0",
     "@nuxt/kit": "^3.3.2",
     "@nuxt/schema": "^3.3.2",
-    "@storybook/addon-actions": "^7.0.12",
-    "@storybook/addon-essentials": "^7.0.12",
-    "@storybook/addon-interactions": "^7.0.12",
-    "@storybook/addon-links": "^7.0.12",
-    "@storybook/addons": "^7.0.12",
-    "@storybook/testing-library": "^0.1.0",
-    "@storybook/theming": "^7.0.12",
-    "@storybook/vue3": "^7.0.12",
-    "@storybook/vue3-vite": "^7.0.12",
+    "@storybook/addon-actions": "^7.0.22",
+    "@storybook/addon-essentials": "^7.0.22",
+    "@storybook/addon-interactions": "^7.0.22",
+    "@storybook/addon-links": "^7.0.22",
+    "@storybook/addons": "^7.0.22",
+    "@storybook/testing-library": "^0.2.0",
+    "@storybook/theming": "^7.0.22",
+    "@storybook/vue3": "^7.0.22",
+    "@storybook/vue3-vite": "^7.0.22",
     "@types/jsdom": "^21.1.0",
     "@types/node": "^18.14.1",
     "@vanilla-extract/css": "^1.9.5",
@@ -64,7 +64,7 @@
     "bumpp": "^9.1.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "storybook": "^7.0.12",
+    "storybook": "^7.0.22",
     "ts-node": "^10.9.1",
     "typescript": "^4.9.5",
     "vite": "^4.2.1",

package/src/components/avatargroup/AvatarGroup.vue

@@ -1,71 +1,71 @@
-<template>
-    <ul :class="style.base">
-        <li v-for="(option, index) in avatars" :key="index" :class="style.item">
-            <div style="display: inline-block; position: relative; outline: 0;" :style="{ zIndex: (avatars.length - index)}">
-                <MAvatar :src="option.src" :srcSet="option.srcSet" :alt="option.alt" />
-            </div>
-        </li>
-        <li v-if="options && options.length > max">
-            <MAvatar>
-                +{{ remaining }}
-            </MAvatar>
-        </li>
-    </ul>
-</template>
-
-<script lang="ts">
-import {computed, defineComponent, type PropType, provide, reactive, toRef} from 'vue';
-import * as style from './style';
-import type {AvatarGroupState, Options} from './symbol';
-import type {Size} from "../../types/props";
-import {AVATAR_GROUP_STATE} from "./symbol";
-
-export default defineComponent({
-    name: "MAvatarGroup",
-    components: {
-        MAvatar: () => import('../avatar/Avatar.vue')
-    },
-    props: {
-        options: {
-            type: Array as PropType<Options[]>,
-            default: () => []
-        },
-        max: {
-            type: Number,
-            default: 5
-        },
-        size: {
-            type: String as PropType<Size>,
-            default: 'md'
-        },
-        rounded: {
-            type: Boolean,
-            default: false
-        }
-    },
-    setup(props) {
-        const state: AvatarGroupState = reactive({
-            size: toRef(props, 'size'),
-            rounded: toRef(props, 'rounded'),
-            max: toRef(props, 'max')
-        })
-        provide(AVATAR_GROUP_STATE, state);
-
-        const avatars = computed(() => {
-            return props.options.slice(0, props.max);
-        });
-
-        const remaining = computed(() => {
-            return props.options.length - props.max;
-        });
-
-        return {
-            style,
-            avatars,
-            remaining
-        }
-    }
-});
-
-
-</script>
+<template>
+    <ul :class="style.base">
+        <li v-for="(option, index) in avatars" :key="index" :class="style.item">
+            <div style="display: inline-block; position: relative; outline: 0;" :style="{ zIndex: (avatars.length - index)}">
+                <MAvatar :src="option.src" :srcSet="option.srcSet" :alt="option.alt" />
+            </div>
+        </li>
+        <li v-if="options && options.length > max">
+            <MAvatar>
+                +{{ remaining }}
+            </MAvatar>
+        </li>
+    </ul>
+</template>
+
+<script lang="ts">
+import {computed, defineComponent, type PropType, provide, reactive, toRef} from 'vue';
+import * as style from './style';
+import type {AvatarGroupState, Options} from './symbol';
+import type {Size} from "../../types/props";
+import {AVATAR_GROUP_STATE} from "./symbol";
+
+export default defineComponent({
+    name: "MAvatarGroup",
+    components: {
+        MAvatar: () => import('../avatar/Avatar.vue')
+    },
+    props: {
+        options: {
+            type: Array as PropType<Options[]>,
+            default: () => []
+        },
+        max: {
+            type: Number,
+            default: 5
+        },
+        size: {
+            type: String as PropType<Size>,
+            default: 'md'
+        },
+        rounded: {
+            type: Boolean,
+            default: false
+        }
+    },
+    setup(props) {
+        const state: AvatarGroupState = reactive({
+            size: toRef(props, 'size'),
+            rounded: toRef(props, 'rounded'),
+            max: toRef(props, 'max')
+        })
+        provide(AVATAR_GROUP_STATE, state);
+
+        const avatars = computed(() => {
+            return props.options.slice(0, props.max);
+        });
+
+        const remaining = computed(() => {
+            return props.options.length - props.max;
+        });
+
+        return {
+            style,
+            avatars,
+            remaining
+        }
+    }
+});
+
+
+</script>

package/src/components/avatargroup/symbol.ts

@@ -1,17 +1,17 @@
-import type {InjectionKey} from "vue";
-import type {Size} from "../../types/props";
-
-export type Options = {
-    src: string;
-    srcSet: string;
-    alt: string;
-}
-
-
-export interface AvatarGroupState {
-    max: number;
-    size: Size;
-    rounded: boolean;
-}
-
+import type {InjectionKey} from "vue";
+import type {Size} from "../../types/props";
+
+export type Options = {
+    src: string;
+    srcSet: string;
+    alt: string;
+}
+
+
+export interface AvatarGroupState {
+    max: number;
+    size: Size;
+    rounded: boolean;
+}
+
 export const AVATAR_GROUP_STATE: InjectionKey<AvatarGroupState> = Symbol('AVATAR_GROUP_STATE');

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/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/symbol.ts

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