@teammodlr/ui-kit 2.3.12 → 2.3.15

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

@@ -1,9 +1,9 @@
-export { default as MButtonBasic } from './basic.vue';
-export { default as MButtonSize } from './size.vue';
-export { default as MButtonRounded } from './rounded.vue';
-export { default as MButtonVariant } from './variants.vue';
-export { default as MButtonVariantSecondary } from './variants-secondary.vue';
-export { default as MButtonDisabled } from './disabled.vue';
-export { default as MButtonIconLeft } from './icon-left.vue';
-export { default as MButtonIcon } from './icon.vue';
-export { default as MButtonLink } from './link.vue';
+export { default as MButtonBasic } from './basic.vue';
+export { default as MButtonSize } from './size.vue';
+export { default as MButtonRounded } from './rounded.vue';
+export { default as MButtonVariant } from './variants.vue';
+export { default as MButtonVariantSecondary } from './variants-secondary.vue';
+export { default as MButtonDisabled } from './disabled.vue';
+export { default as MButtonIconLeft } from './icon-left.vue';
+export { default as MButtonIcon } from './icon.vue';
+export { default as MButtonLink } from './link.vue';

package/src/components/button/examples/link.vue

@@ -1,3 +1,3 @@
-<template>
-    <MButton variant="primary" href="http://google.com">Default</MButton>
-</template>
+<template>
+    <MButton variant="primary" href="http://google.com">Default</MButton>
+</template>

package/src/components/button/examples/rounded.vue

@@ -1,7 +1,7 @@
-<template>
-    <MButton size="xs" rounded>Extra Small</MButton><br/><br/>
-    <MButton size="sm" rounded>Small</MButton><br/><br/>
-    <MButton size="md" rounded>Default</MButton><br/><br/>
-    <MButton size="lg" rounded>Large</MButton><br/><br/>
-    <MButton size="xl" rounded>Extra Large</MButton><br/><br/>
-</template>
+<template>
+    <MButton size="xs" rounded>Extra Small</MButton><br/><br/>
+    <MButton size="sm" rounded>Small</MButton><br/><br/>
+    <MButton size="md" rounded>Default</MButton><br/><br/>
+    <MButton size="lg" rounded>Large</MButton><br/><br/>
+    <MButton size="xl" rounded>Extra Large</MButton><br/><br/>
+</template>

package/src/components/button/examples/size.vue

@@ -1,7 +1,7 @@
-<template>
-    <MButton size="xs">Extra Small</MButton><br/><br/>
-    <MButton size="sm">Small</MButton><br/><br/>
-    <MButton size="md">Default</MButton><br/><br/>
-    <MButton size="lg">Large</MButton><br/><br/>
-    <MButton size="xl">Extra Large</MButton><br/><br/>
-</template>
+<template>
+    <MButton size="xs">Extra Small</MButton><br/><br/>
+    <MButton size="sm">Small</MButton><br/><br/>
+    <MButton size="md">Default</MButton><br/><br/>
+    <MButton size="lg">Large</MButton><br/><br/>
+    <MButton size="xl">Extra Large</MButton><br/><br/>
+</template>

package/src/components/button/examples/variants-secondary.vue

@@ -1,11 +1,11 @@
-<template>
-    <MButton secondary>Default</MButton><br/><br/>
-    <MButton secondary variant="tertiary">Tertiary</MButton><br/><br/>
-    <MButton secondary variant="primary">Primary</MButton><br/><br/>
-    <MButton secondary variant="dark">Dark</MButton><br/><br/>
-    <MButton secondary variant="success">Success</MButton><br/><br/>
-    <MButton secondary variant="warning">Warning</MButton><br/><br/>
-    <MButton secondary variant="error">Error</MButton><br/><br/>
-</template>
-<script setup lang="ts">
+<template>
+    <MButton secondary>Default</MButton><br/><br/>
+    <MButton secondary variant="tertiary">Tertiary</MButton><br/><br/>
+    <MButton secondary variant="primary">Primary</MButton><br/><br/>
+    <MButton secondary variant="dark">Dark</MButton><br/><br/>
+    <MButton secondary variant="success">Success</MButton><br/><br/>
+    <MButton secondary variant="warning">Warning</MButton><br/><br/>
+    <MButton secondary variant="error">Error</MButton><br/><br/>
+</template>
+<script setup lang="ts">
 </script>

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

@@ -1,11 +1,11 @@
-<template>
-    <MButton>Default</MButton><br/><br/>
-    <MButton variant="tertiary">Tertiary</MButton><br/><br/>
-    <MButton variant="primary">Primary</MButton><br/><br/>
-    <MButton variant="dark">Dark</MButton><br/><br/>
-    <MButton variant="success">Success</MButton><br/><br/>
-    <MButton variant="warning">Warning</MButton><br/><br/>
-    <MButton variant="error">Error</MButton><br/><br/>
-</template>
-<script setup lang="ts">
+<template>
+    <MButton>Default</MButton><br/><br/>
+    <MButton variant="tertiary">Tertiary</MButton><br/><br/>
+    <MButton variant="primary">Primary</MButton><br/><br/>
+    <MButton variant="dark">Dark</MButton><br/><br/>
+    <MButton variant="success">Success</MButton><br/><br/>
+    <MButton variant="warning">Warning</MButton><br/><br/>
+    <MButton variant="error">Error</MButton><br/><br/>
+</template>
+<script setup lang="ts">
 </script>

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

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

package/src/components/buttongroup/ButtonGroup.vue

@@ -1,36 +1,36 @@
-<template>
-    <div
-            :class="classes"
-    >
-        <slot/>
-    </div>
-</template>
-
-<script lang="ts">
-import type {Size} from '../../types/props';
-import {defineComponent, type PropType, provide, reactive, toRef} from 'vue';
-import * as style from "./style";
-import type {ButtonGroupState} from "./symbol";
-import {BUTTON_GROUP_STATE} from "./symbol";
-
-export default defineComponent({
-    name: "MButtonGroup",
-    props: {
-        size: {
-            type: String as PropType<Size>,
-            default: 'md'
-        }
-    },
-    setup(props) {
-        const state: ButtonGroupState = reactive({
-            size: toRef(props, 'size')
-        });
-
-        provide(BUTTON_GROUP_STATE, state);
-
-        return {
-            classes: style.base
-        }
-    }
-})
-</script>
+<template>
+    <div
+            :class="classes"
+    >
+        <slot/>
+    </div>
+</template>
+
+<script lang="ts">
+import type {Size} from '../../types/props';
+import {defineComponent, type PropType, provide, reactive, toRef} from 'vue';
+import * as style from "./style";
+import type {ButtonGroupState} from "./symbol";
+import {BUTTON_GROUP_STATE} from "./symbol";
+
+export default defineComponent({
+    name: "MButtonGroup",
+    props: {
+        size: {
+            type: String as PropType<Size>,
+            default: 'md'
+        }
+    },
+    setup(props) {
+        const state: ButtonGroupState = reactive({
+            size: toRef(props, 'size')
+        });
+
+        provide(BUTTON_GROUP_STATE, state);
+
+        return {
+            classes: style.base
+        }
+    }
+})
+</script>

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

@@ -1,9 +1,9 @@
-<template>
-    <MButtonGroup>
-        <MButton>Hello</MButton>
-        <MButton>Hello</MButton>
-        <MButton>Hello</MButton>
-        <MButton>Hello</MButton>
-        <MButton>Hello</MButton>
-    </MButtonGroup>
-</template>
+<template>
+    <MButtonGroup>
+        <MButton>Hello</MButton>
+        <MButton>Hello</MButton>
+        <MButton>Hello</MButton>
+        <MButton>Hello</MButton>
+        <MButton>Hello</MButton>
+    </MButtonGroup>
+</template>

package/src/components/buttongroup/examples/icon-group.vue

@@ -1,22 +1,22 @@
-<template>
-    <MButtonGroup>
-        <MButton icon>
-            <svg width="20" height="20" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-5 h-5">
-                <path fill-rule="evenodd" d="M2 4.75A.75.75 0 012.75 4h14.5a.75.75 0 010 1.5H2.75A.75.75 0 012 4.75zm0 10.5a.75.75 0 01.75-.75h7.5a.75.75 0 010 1.5h-7.5a.75.75 0 01-.75-.75zM2 10a.75.75 0 01.75-.75h14.5a.75.75 0 010 1.5H2.75A.75.75 0 012 10z" clip-rule="evenodd" />
-            </svg>
-        </MButton>
-        <MButton icon>
-            <svg width="20" height="20" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-5 h-5">
-                <path fill-rule="evenodd" d="M2 4.75A.75.75 0 012.75 4h14.5a.75.75 0 010 1.5H2.75A.75.75 0 012 4.75zM2 10a.75.75 0 01.75-.75h14.5a.75.75 0 010 1.5H2.75A.75.75 0 012 10zm0 5.25a.75.75 0 01.75-.75h14.5a.75.75 0 010 1.5H2.75a.75.75 0 01-.75-.75z" clip-rule="evenodd" />
-            </svg>
-
-        </MButton>
-        <MButton icon>
-            <svg width="20" height="20" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-5 h-5">
-                <path fill-rule="evenodd" d="M2 4.75A.75.75 0 012.75 4h14.5a.75.75 0 010 1.5H2.75A.75.75 0 012 4.75zm7 10.5a.75.75 0 01.75-.75h7.5a.75.75 0 010 1.5h-7.5a.75.75 0 01-.75-.75zM2 10a.75.75 0 01.75-.75h14.5a.75.75 0 010 1.5H2.75A.75.75 0 012 10z" clip-rule="evenodd" />
-            </svg>
-        </MButton>
-    </MButtonGroup>
-</template>
-<script setup lang="ts">
+<template>
+    <MButtonGroup>
+        <MButton icon>
+            <svg width="20" height="20" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-5 h-5">
+                <path fill-rule="evenodd" d="M2 4.75A.75.75 0 012.75 4h14.5a.75.75 0 010 1.5H2.75A.75.75 0 012 4.75zm0 10.5a.75.75 0 01.75-.75h7.5a.75.75 0 010 1.5h-7.5a.75.75 0 01-.75-.75zM2 10a.75.75 0 01.75-.75h14.5a.75.75 0 010 1.5H2.75A.75.75 0 012 10z" clip-rule="evenodd" />
+            </svg>
+        </MButton>
+        <MButton icon>
+            <svg width="20" height="20" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-5 h-5">
+                <path fill-rule="evenodd" d="M2 4.75A.75.75 0 012.75 4h14.5a.75.75 0 010 1.5H2.75A.75.75 0 012 4.75zM2 10a.75.75 0 01.75-.75h14.5a.75.75 0 010 1.5H2.75A.75.75 0 012 10zm0 5.25a.75.75 0 01.75-.75h14.5a.75.75 0 010 1.5H2.75a.75.75 0 01-.75-.75z" clip-rule="evenodd" />
+            </svg>
+
+        </MButton>
+        <MButton icon>
+            <svg width="20" height="20" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-5 h-5">
+                <path fill-rule="evenodd" d="M2 4.75A.75.75 0 012.75 4h14.5a.75.75 0 010 1.5H2.75A.75.75 0 012 4.75zm7 10.5a.75.75 0 01.75-.75h7.5a.75.75 0 010 1.5h-7.5a.75.75 0 01-.75-.75zM2 10a.75.75 0 01.75-.75h14.5a.75.75 0 010 1.5H2.75A.75.75 0 012 10z" clip-rule="evenodd" />
+            </svg>
+        </MButton>
+    </MButtonGroup>
+</template>
+<script setup lang="ts">
 </script>

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

@@ -1,17 +1,17 @@
-import MButtonGroup from '../ButtonGroup.vue';
-import MButton from '../../button/Button.vue';
-import { MButtonGroupBasic, MButtonGroupIconGroup } from './index';
-
-import { createStory, sizeArgType } from '../../../__storybook__';
-
-export default {
-    component: MButtonGroup,
-    subcomponents: { MButton },
-    title: 'Components/Buttons/Group',
-    argTypes: {
-        ...sizeArgType()
-    }
-};
-
-export const Basic = createStory(MButtonGroupBasic);
-export const IconGroup = createStory(MButtonGroupIconGroup);
+import MButtonGroup from '../ButtonGroup.vue';
+import MButton from '../../button/Button.vue';
+import { MButtonGroupBasic, MButtonGroupIconGroup } from './index';
+
+import { createStory, sizeArgType } from '../../../__storybook__';
+
+export default {
+    component: MButtonGroup,
+    subcomponents: { MButton },
+    title: 'Components/Buttons/Group',
+    argTypes: {
+        ...sizeArgType()
+    }
+};
+
+export const Basic = createStory(MButtonGroupBasic);
+export const IconGroup = createStory(MButtonGroupIconGroup);

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

@@ -1,2 +1,2 @@
-export { default as MButtonGroupBasic } from './basic.vue';
-export { default as MButtonGroupIconGroup } from './icon-group.vue';
+export { default as MButtonGroupBasic } from './basic.vue';
+export { default as MButtonGroupIconGroup } from './icon-group.vue';

package/src/components/buttongroup/style/ButtonGroup.css.ts

@@ -1,42 +1,42 @@
-import { globalStyle, style } from '@vanilla-extract/css';
-import {
-    base as button,
-    border as buttonBorder,
-    borderState
-} from '../../button/style/Button.css';
-
-export const base = style({
-    display: 'inline-flex',
-    position: 'relative',
-    flexWrap: 'nowrap'
-});
-
-globalStyle(`${base} > ${button}:first-child:not(:last-child)`, {
-    marginRight: 0,
-    borderTopRightRadius: 0,
-    borderBottomRightRadius: 0
-});
-
-globalStyle(`${base} > ${button}:not(:first-child):not(:last-child)`, {
-    marginLeft: 0,
-    borderRadius: 0,
-    marginRight: 0
-});
-
-globalStyle(`${base} > ${button}:not(:first-child) ${buttonBorder}`, {
-    borderLeftWidth: 0
-});
-
-globalStyle(`${base} > ${button}:last-child:not(:first-child)`, {
-    marginLeft: 0,
-    borderTopLeftRadius: 0,
-    borderBottomLeftRadius: 0
-});
-
-globalStyle(`${base} > ${button}:not(:first-child) ${borderState}`, {
-    left: '-1px'
-});
-
-export const vertical = style({
-    flexDirection: 'column'
-});
+import { globalStyle, style } from '@vanilla-extract/css';
+import {
+    base as button,
+    border as buttonBorder,
+    borderState
+} from '../../button/style/Button.css';
+
+export const base = style({
+    display: 'inline-flex',
+    position: 'relative',
+    flexWrap: 'nowrap'
+});
+
+globalStyle(`${base} > ${button}:first-child:not(:last-child)`, {
+    marginRight: 0,
+    borderTopRightRadius: 0,
+    borderBottomRightRadius: 0
+});
+
+globalStyle(`${base} > ${button}:not(:first-child):not(:last-child)`, {
+    marginLeft: 0,
+    borderRadius: 0,
+    marginRight: 0
+});
+
+globalStyle(`${base} > ${button}:not(:first-child) ${buttonBorder}`, {
+    borderLeftWidth: 0
+});
+
+globalStyle(`${base} > ${button}:last-child:not(:first-child)`, {
+    marginLeft: 0,
+    borderTopLeftRadius: 0,
+    borderBottomLeftRadius: 0
+});
+
+globalStyle(`${base} > ${button}:not(:first-child) ${borderState}`, {
+    left: '-1px'
+});
+
+export const vertical = style({
+    flexDirection: 'column'
+});

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

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

package/src/components/buttongroup/symbol.ts

@@ -1,9 +1,9 @@
-import type { InjectionKey } from 'vue';
-import type { Size } from '../../types/props';
-
-export interface ButtonGroupState {
-    size: Size;
-}
-
-export const BUTTON_GROUP_STATE: InjectionKey<ButtonGroupState> =
-    Symbol('BUTTON_GROUP_STATE');
+import type { InjectionKey } from 'vue';
+import type { Size } from '../../types/props';
+
+export interface ButtonGroupState {
+    size: Size;
+}
+
+export const BUTTON_GROUP_STATE: InjectionKey<ButtonGroupState> =
+    Symbol('BUTTON_GROUP_STATE');