@teammodlr/ui-kit 2.0.29 → 2.0.31

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,23 +1,23 @@
-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);
+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,40 +1,40 @@
-import {globalStyle, style} from "@vanilla-extract/css";
-import {base as button} from "../../button/style/Button.css";
-import {border as buttonBorder} from "../../button/style/Button.css";
-import {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} from "../../button/style/Button.css";
+import {border as buttonBorder} from "../../button/style/Button.css";
+import {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,8 +1,8 @@
-import type {InjectionKey} from "vue";
-import type {Size} from "../../types/props";
-
-export interface ButtonGroupState {
-    size: Size
-}
-
+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');

package/src/components/checkbox/Checkbox.vue

@@ -1,156 +1,156 @@
-<template>
-    <label :class="style.base" @click.prevent="toggle">
-        <input
-                v-model="checked"
-                type="checkbox"
-                :aria-checked="checked ? 'true' : 'false'"
-                :aria-disabled="(disabled || loading) ? 'true' : 'false'"
-                :aria-labelledby="`${id}-label`"
-                :disabled="disabled || loading"
-                :name="name"
-                :id="id"
-                :class="style.input"
-                v-bind="$attrs"
-                v-on="inputListeners"
-        />
-        <span :class="classes">
-            <svg v-if="checked && !indeterminate" :class="style.checkmark" xmlns="http://www.w3.org/2000/svg"
-                 fill="none" viewBox="0 0 24 24" width="24" height="24" focusable="false"><path fill="currentColor"
-                                                                                                fill-rule="evenodd"
-                                                                                                d="m21.042 6.855-11.34 11.17-6.398-7.178L5.096 9.25l4.72 5.294 9.542-9.399 1.684 1.71z"
-                                                                                                clip-rule="evenodd"></path></svg>
-            <svg v-if="indeterminate && !checked" :class="style.checkmark" xmlns="http://www.w3.org/2000/svg"
-                 fill="none" viewBox="0 0 24 24" width="24" height="24" focusable="false"><path fill="currentColor"
-                                                                                                fill-rule="evenodd"
-                                                                                                d="M21.3 13.2H2.8v-2.4h18.5v2.4z"
-                                                                                                clip-rule="evenodd"></path></svg>
-        </span>
-        <span :class="style.label" :id="`${id}-label`">
-            <template v-if="hasSlot">
-                <slot/>
-            </template>
-            <template v-else>
-                {{ label }}
-            </template>
-        </span>
-
-    </label>
-</template>
-
-<script lang="ts">
-import {computed, defineComponent, defineExpose, type PropType, ref, toRef, watch} from 'vue';
-import {useInput} from '../../composables/useInput';
-import {useInteractive} from "../../composables/useInteractive";
-import type {Size} from '../../types/props';
-import * as style from './style';
-
-export default defineComponent({
-    name: "Checkbox",
-    emits: useInput.emits(),
-    props: {
-        ...useInput.props(),
-        ...useInteractive.props(),
-        label: {
-            type: String
-        },
-        size: {
-            type: String as PropType<Size>,
-            default: 'md',
-        },
-        disabled: {
-            type: Boolean,
-            default: false
-        },
-        loading: {
-            type: Boolean,
-            default: false
-        },
-        indeterminate: {
-            type: Boolean,
-            default: false
-        },
-    },
-    setup(props, {slots, emit}) {
-        const checkboxRef = ref<HTMLElement | null>(null);
-
-        const {focus, blur} = useInteractive(checkboxRef);
-
-        const {
-            id,
-            insideForm,
-            reset,
-            validate,
-            setError,
-            formError,
-            formDisabled,
-            formLoading,
-            inputListeners
-        } = useInput(props, {focus, emit});
-
-        const disabled = computed(() => formDisabled || props.disabled || props.loading);
-        const name = toRef(props, 'name');
-        const checked = ref(false);
-        const hasSlot = computed(() => !!(slots.default));
-
-        const classes = computed(() => {
-            return [
-                style.checkbox,
-                [style.size[props.size]],
-                {
-                    [style.disabled]: disabled.value,
-                    [style.checked]: checked.value,
-                    [style.indeterminate]: props.indeterminate,
-                }
-            ]
-        });
-
-        const inputError = computed(() => {
-            return formError.value || props.error;
-        });
-
-        watch(() => props.modelValue, (value) => {
-            checked.value = !!value;
-        }, {immediate: true});
-
-        watch(() => checked.value, (value) => {
-            emit('update:modelValue', value);
-        });
-
-        function toggle() {
-            if (disabled.value) {
-                return;
-            }
-            if (props.indeterminate) {
-                return;
-            }
-            checked.value = !checked.value;
-        }
-
-        defineExpose({
-            focus,
-            blur,
-        })
-
-        return {
-            id,
-            formError,
-            insideForm,
-            reset,
-            validate,
-            setError,
-            disabled,
-            name,
-            checked,
-            checkboxRef,
-            inputError,
-            toggle,
-            style,
-            classes,
-            hasSlot,
-            inputListeners,
-            focus,
-            blur
-        }
-    }
-})
-</script>
+<template>
+    <label :class="style.base" @click.prevent="toggle">
+        <input
+                v-model="checked"
+                type="checkbox"
+                :aria-checked="checked ? 'true' : 'false'"
+                :aria-disabled="(disabled || loading) ? 'true' : 'false'"
+                :aria-labelledby="`${id}-label`"
+                :disabled="disabled || loading"
+                :name="name"
+                :id="id"
+                :class="style.input"
+                v-bind="$attrs"
+                v-on="inputListeners"
+        />
+        <span :class="classes">
+            <svg v-if="checked && !indeterminate" :class="style.checkmark" xmlns="http://www.w3.org/2000/svg"
+                 fill="none" viewBox="0 0 24 24" width="24" height="24" focusable="false"><path fill="currentColor"
+                                                                                                fill-rule="evenodd"
+                                                                                                d="m21.042 6.855-11.34 11.17-6.398-7.178L5.096 9.25l4.72 5.294 9.542-9.399 1.684 1.71z"
+                                                                                                clip-rule="evenodd"></path></svg>
+            <svg v-if="indeterminate && !checked" :class="style.checkmark" xmlns="http://www.w3.org/2000/svg"
+                 fill="none" viewBox="0 0 24 24" width="24" height="24" focusable="false"><path fill="currentColor"
+                                                                                                fill-rule="evenodd"
+                                                                                                d="M21.3 13.2H2.8v-2.4h18.5v2.4z"
+                                                                                                clip-rule="evenodd"></path></svg>
+        </span>
+        <span :class="style.label" :id="`${id}-label`">
+            <template v-if="hasSlot">
+                <slot/>
+            </template>
+            <template v-else>
+                {{ label }}
+            </template>
+        </span>
+
+    </label>
+</template>
+
+<script lang="ts">
+import {computed, defineComponent, defineExpose, type PropType, ref, toRef, watch} from 'vue';
+import {useInput} from '../../composables/useInput';
+import {useInteractive} from "../../composables/useInteractive";
+import type {Size} from '../../types/props';
+import * as style from './style';
+
+export default defineComponent({
+    name: "Checkbox",
+    emits: useInput.emits(),
+    props: {
+        ...useInput.props(),
+        ...useInteractive.props(),
+        label: {
+            type: String
+        },
+        size: {
+            type: String as PropType<Size>,
+            default: 'md',
+        },
+        disabled: {
+            type: Boolean,
+            default: false
+        },
+        loading: {
+            type: Boolean,
+            default: false
+        },
+        indeterminate: {
+            type: Boolean,
+            default: false
+        },
+    },
+    setup(props, {slots, emit}) {
+        const checkboxRef = ref<HTMLElement | null>(null);
+
+        const {focus, blur} = useInteractive(checkboxRef);
+
+        const {
+            id,
+            insideForm,
+            reset,
+            validate,
+            setError,
+            formError,
+            formDisabled,
+            formLoading,
+            inputListeners
+        } = useInput(props, {focus, emit});
+
+        const disabled = computed(() => formDisabled || props.disabled || props.loading);
+        const name = toRef(props, 'name');
+        const checked = ref(false);
+        const hasSlot = computed(() => !!(slots.default));
+
+        const classes = computed(() => {
+            return [
+                style.checkbox,
+                [style.size[props.size]],
+                {
+                    [style.disabled]: disabled.value,
+                    [style.checked]: checked.value,
+                    [style.indeterminate]: props.indeterminate,
+                }
+            ]
+        });
+
+        const inputError = computed(() => {
+            return formError.value || props.error;
+        });
+
+        watch(() => props.modelValue, (value) => {
+            checked.value = !!value;
+        }, {immediate: true});
+
+        watch(() => checked.value, (value) => {
+            emit('update:modelValue', value);
+        });
+
+        function toggle() {
+            if (disabled.value) {
+                return;
+            }
+            if (props.indeterminate) {
+                return;
+            }
+            checked.value = !checked.value;
+        }
+
+        defineExpose({
+            focus,
+            blur,
+        })
+
+        return {
+            id,
+            formError,
+            insideForm,
+            reset,
+            validate,
+            setError,
+            disabled,
+            name,
+            checked,
+            checkboxRef,
+            inputError,
+            toggle,
+            style,
+            classes,
+            hasSlot,
+            inputListeners,
+            focus,
+            blur
+        }
+    }
+})
+</script>

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

@@ -1,9 +1,9 @@
-<template>
-    <MCheckbox v-model="checked" label="Test" />
-</template>
-
-<script lang="ts" setup>
-import { ref } from 'vue'
-
-const checked = ref(false);
-</script>
+<template>
+    <MCheckbox v-model="checked" label="Test" />
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue'
+
+const checked = ref(false);
+</script>