@teammodlr/ui-kit 2.3.10 → 2.3.14

package/src/components/pagination/style/Pagination.css.ts

@@ -1,93 +1,93 @@
-import {
-    createVar,
-    globalKeyframes,
-    style,
-    styleVariants
-} from '@vanilla-extract/css';
-import { themeVars } from '../../../styles/theme.css';
-
-const sizes = {
-    xs: '300px',
-    sm: '400px',
-    md: '640px',
-    lg: '800px',
-    xl: '1140px'
-};
-
-export const vars = {
-    backgroundColor: createVar(),
-    color: createVar()
-};
-
-export const pagination = style({
-    display: 'flex',
-    alignItems: 'center',
-    fontSize: themeVars.fontSize.small,
-    boxSizing: 'border-box',
-    justifyContent: 'space-between'
-});
-
-export const buttons = style({
-    display: 'inline-flex',
-    alignItems: 'center',
-    fontSize: themeVars.fontSize.small,
-    boxSizing: 'border-box',
-    gap: themeVars.space['2.5']
-});
-
-export const pages = style({
-    display: 'inline-flex',
-    alignItems: 'center',
-    margin: 0,
-    gap: themeVars.space['1']
-});
-
-export const page = style({
-    vars: {
-        [vars.backgroundColor]: 'transparent',
-        [vars.color]: themeVars.color.gray['700']
-    },
-    height: '28px',
-    width: '28px',
-    borderRadius: themeVars.rounded.default,
-    outline: 'none',
-    border: 'none',
-    fontSize: 'inherit',
-    padding: `0px ${themeVars.space['2']}`,
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'center',
-    lineHeight: 1,
-    color: vars.color,
-    backgroundColor: vars.backgroundColor,
-    cursor: 'pointer',
-    selectors: {
-        '&:hover': {
-            vars: {
-                [vars.backgroundColor]: themeVars.color.gray['150']
-            }
-        }
-    }
-});
-
-export const active = style({
-    vars: {
-        [vars.backgroundColor]: themeVars.color.blue['600'],
-        [vars.color]: '#FFF'
-    },
-    selectors: {
-        '&:hover': {
-            vars: {
-                [vars.backgroundColor]: themeVars.color.blue['700']
-            }
-        }
-    }
-});
-
-export const svg = style({
-    height: 'calc(1em + 2px)',
-    width: 'calc(1em + 2px)',
-    display: 'inline-block',
-    fontSize: 'inherit',
-    userSelect: 'none'
-});
+import {
+    createVar,
+    globalKeyframes,
+    style,
+    styleVariants
+} from '@vanilla-extract/css';
+import { themeVars } from '../../../styles/theme.css';
+
+const sizes = {
+    xs: '300px',
+    sm: '400px',
+    md: '640px',
+    lg: '800px',
+    xl: '1140px'
+};
+
+export const vars = {
+    backgroundColor: createVar(),
+    color: createVar()
+};
+
+export const pagination = style({
+    display: 'flex',
+    alignItems: 'center',
+    fontSize: themeVars.fontSize.small,
+    boxSizing: 'border-box',
+    justifyContent: 'space-between'
+});
+
+export const buttons = style({
+    display: 'inline-flex',
+    alignItems: 'center',
+    fontSize: themeVars.fontSize.small,
+    boxSizing: 'border-box',
+    gap: themeVars.space['2.5']
+});
+
+export const pages = style({
+    display: 'inline-flex',
+    alignItems: 'center',
+    margin: 0,
+    gap: themeVars.space['1']
+});
+
+export const page = style({
+    vars: {
+        [vars.backgroundColor]: 'transparent',
+        [vars.color]: themeVars.color.gray['700']
+    },
+    height: '28px',
+    width: '28px',
+    borderRadius: themeVars.rounded.default,
+    outline: 'none',
+    border: 'none',
+    fontSize: 'inherit',
+    padding: `0px ${themeVars.space['2']}`,
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    lineHeight: 1,
+    color: vars.color,
+    backgroundColor: vars.backgroundColor,
+    cursor: 'pointer',
+    selectors: {
+        '&:hover': {
+            vars: {
+                [vars.backgroundColor]: themeVars.color.gray['150']
+            }
+        }
+    }
+});
+
+export const active = style({
+    vars: {
+        [vars.backgroundColor]: themeVars.color.blue['600'],
+        [vars.color]: '#FFF'
+    },
+    selectors: {
+        '&:hover': {
+            vars: {
+                [vars.backgroundColor]: themeVars.color.blue['700']
+            }
+        }
+    }
+});
+
+export const svg = style({
+    height: 'calc(1em + 2px)',
+    width: 'calc(1em + 2px)',
+    display: 'inline-block',
+    fontSize: 'inherit',
+    userSelect: 'none'
+});

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

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

package/src/components/radio/Radio.vue

@@ -1,136 +1,136 @@
-<template>
-    <label :class="style.base">
-        <input
-            v-model="pick"
-            :value="value"
-            type="radio"
-            :aria-checked="checked ? 'true' : 'false'"
-            :aria-disabled="(disabled || loading) ? 'true' : 'false'"
-            :aria-labelledby="`${id}-label`"
-            :disabled="disabled || loading"
-            :name="name"
-            :id="id"
-            v-bind="$attrs"
-            v-on="inputListeners"
-            :class="style.input"
-        />
-        <span :class="classes"></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 type {PropType} from 'vue';
-import {computed, defineComponent, ref, toRef} 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: "Radio",
-    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
-        },
-        value: {
-            type: [String, Number, Boolean],
-            default: null
-        }
-    },
-    setup(props, {slots, emit, expose}) {
-        const radioRef = ref<HTMLElement | null>(null);
-
-        const {focus, blur} = useInteractive(radioRef);
-
-        const {
-            id,
-            insideForm,
-            reset,
-            validate,
-            setError,
-            formError,
-            formDisabled,
-            formLoading,
-            inputListeners
-        } = useInput(props, {focus, emit});
-
-        const disabled = computed(() => formDisabled || formLoading || props.disabled || props.loading);
-        const name = toRef(props, 'name');
-        const checked = computed(() => props.modelValue === props.value);
-        const hasSlot = computed(() => !!(slots.default));
-        const pick = computed({
-            get() {
-                return props.modelValue;
-            },
-            set(value) {
-                emit('update:modelValue', value);
-            }
-        });
-
-        const classes = computed(() => {
-            return [
-                style.checkbox,
-                [style.size[props.size]],
-                {
-                    [style.disabled]: disabled.value,
-                    [style.checked]: checked.value
-                }
-            ]
-        });
-
-        const inputError = computed(() => {
-            return formError.value || props.error;
-        });
-
-        expose({
-            focus,
-            blur,
-        })
-
-        return {
-            id,
-            formError,
-            insideForm,
-            reset,
-            validate,
-            setError,
-            disabled,
-            name,
-            checked,
-            pick,
-            radioRef,
-            inputError,
-            style,
-            classes,
-            hasSlot,
-            inputListeners,
-            focus,
-            blur
-        }
-    }
-})
-</script>
+<template>
+    <label :class="style.base">
+        <input
+            v-model="pick"
+            :value="value"
+            type="radio"
+            :aria-checked="checked ? 'true' : 'false'"
+            :aria-disabled="(disabled || loading) ? 'true' : 'false'"
+            :aria-labelledby="`${id}-label`"
+            :disabled="disabled || loading"
+            :name="name"
+            :id="id"
+            v-bind="$attrs"
+            v-on="inputListeners"
+            :class="style.input"
+        />
+        <span :class="classes"></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 type {PropType} from 'vue';
+import {computed, defineComponent, ref, toRef} 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: "Radio",
+    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
+        },
+        value: {
+            type: [String, Number, Boolean],
+            default: null
+        }
+    },
+    setup(props, {slots, emit, expose}) {
+        const radioRef = ref<HTMLElement | null>(null);
+
+        const {focus, blur} = useInteractive(radioRef);
+
+        const {
+            id,
+            insideForm,
+            reset,
+            validate,
+            setError,
+            formError,
+            formDisabled,
+            formLoading,
+            inputListeners
+        } = useInput(props, {focus, emit});
+
+        const disabled = computed(() => formDisabled || formLoading || props.disabled || props.loading);
+        const name = toRef(props, 'name');
+        const checked = computed(() => props.modelValue === props.value);
+        const hasSlot = computed(() => !!(slots.default));
+        const pick = computed({
+            get() {
+                return props.modelValue;
+            },
+            set(value) {
+                emit('update:modelValue', value);
+            }
+        });
+
+        const classes = computed(() => {
+            return [
+                style.checkbox,
+                [style.size[props.size]],
+                {
+                    [style.disabled]: disabled.value,
+                    [style.checked]: checked.value
+                }
+            ]
+        });
+
+        const inputError = computed(() => {
+            return formError.value || props.error;
+        });
+
+        expose({
+            focus,
+            blur,
+        })
+
+        return {
+            id,
+            formError,
+            insideForm,
+            reset,
+            validate,
+            setError,
+            disabled,
+            name,
+            checked,
+            pick,
+            radioRef,
+            inputError,
+            style,
+            classes,
+            hasSlot,
+            inputListeners,
+            focus,
+            blur
+        }
+    }
+})
+</script>

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

@@ -1,8 +1,8 @@
-<template>
-    <MRadio label="Test" name="item" value="sms" v-model="selected" />
-</template>
-
-<script lang="ts" setup>
-import { ref } from 'vue'
-const selected = ref('');
-</script>
+<template>
+    <MRadio label="Test" name="item" value="sms" v-model="selected" />
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue'
+const selected = ref('');
+</script>

package/src/components/radio/examples/group.vue

@@ -1,15 +1,15 @@
-<template>
-    <div>
-        <MRadio label="SMS" name="item" value="sms" v-model="selected" /><br />
-        <MRadio label="Email" name="item" value="email" v-model="selected" />
-        <div>
-            Selected: {{ selected }}
-        </div>
-    </div>
-</template>
-
-<script lang="ts" setup>
-import { ref } from 'vue'
-
-const selected = ref('sms');
-</script>
+<template>
+    <div>
+        <MRadio label="SMS" name="item" value="sms" v-model="selected" /><br />
+        <MRadio label="Email" name="item" value="email" v-model="selected" />
+        <div>
+            Selected: {{ selected }}
+        </div>
+    </div>
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue'
+
+const selected = ref('sms');
+</script>

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

@@ -1,16 +1,16 @@
-import MRadio from '../Radio.vue';
-import { MRadioBasic, MRadioGroup } from './index';
-
-import { createStory, sizeArgType, colorArgType } from '../../../__storybook__';
-
-export default {
-    component: MRadio,
-    title: 'Components/Radio',
-    argTypes: {
-        ...sizeArgType(),
-        ...colorArgType()
-    }
-};
-
-export const Basic = createStory(MRadioBasic);
-export const Group = createStory(MRadioGroup);
+import MRadio from '../Radio.vue';
+import { MRadioBasic, MRadioGroup } from './index';
+
+import { createStory, sizeArgType, colorArgType } from '../../../__storybook__';
+
+export default {
+    component: MRadio,
+    title: 'Components/Radio',
+    argTypes: {
+        ...sizeArgType(),
+        ...colorArgType()
+    }
+};
+
+export const Basic = createStory(MRadioBasic);
+export const Group = createStory(MRadioGroup);

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

@@ -1,2 +1,2 @@
-export { default as MRadioBasic } from './basic.vue';
-export { default as MRadioGroup } from './group.vue';
+export { default as MRadioBasic } from './basic.vue';
+export { default as MRadioGroup } from './group.vue';