@teammodlr/ui-kit 2.0.25 → 2.0.28

package/src/components/radio/Radio.vue

@@ -1,137 +1,137 @@
-<template>
-    <label :class="style.base" @click.prevent="toggle">
-        <input
-                v-model="checked"
-                type="radio"
-                :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"></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 {defineComponent, toRef, ref, type PropType, watch, computed, defineExpose } 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
-        }
-    },
-    setup(props, {slots, emit}) {
-        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 = 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
-                }
-            ]
-        });
-
-        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;
-            }
-            checked.value = !checked.value;
-        }
-
-        defineExpose({
-            focus,
-            blur,
-        })
-
-        return {
-            id,
-            formError,
-            insideForm,
-            reset,
-            validate,
-            setError,
-            disabled,
-            name,
-            checked,
-            radioRef,
-            inputError,
-            toggle,
-            style,
-            classes,
-            hasSlot,
-            inputListeners,
-            focus,
-            blur
-        }
-    }
-})
-</script>
+<template>
+    <label :class="style.base" @click.prevent="toggle">
+        <input
+                v-model="checked"
+                type="radio"
+                :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"></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 {defineComponent, toRef, ref, type PropType, watch, computed, defineExpose } 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
+        }
+    },
+    setup(props, {slots, emit}) {
+        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 = 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
+                }
+            ]
+        });
+
+        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;
+            }
+            checked.value = !checked.value;
+        }
+
+        defineExpose({
+            focus,
+            blur,
+        })
+
+        return {
+            id,
+            formError,
+            insideForm,
+            reset,
+            validate,
+            setError,
+            disabled,
+            name,
+            checked,
+            radioRef,
+            inputError,
+            toggle,
+            style,
+            classes,
+            hasSlot,
+            inputListeners,
+            focus,
+            blur
+        }
+    }
+})
+</script>

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

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

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

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

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

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

package/src/components/radio/style/Checkbox.css.ts

@@ -1,131 +1,131 @@
-import {createVar, style, styleVariants} from "@vanilla-extract/css";
-import {themeVars} from "../../../styles/theme.css";
-
-const sizes = {
-    xs: '16px',
-    sm: '18px',
-    md: '20px',
-    lg: '22px',
-    xl: '24px',
-};
-
-export const vars = {
-    height: createVar(),
-    radius: createVar(),
-    backgroundColor: createVar(),
-    borderColor: createVar(),
-    color: createVar()
-}
-
-export const base = style({
-    position: "relative",
-    display: "inline-flex",
-    alignItems: "center",
-    cursor: "pointer",
-    gap: themeVars.space['1.5'],
-});
-
-export const input = style({
-    position: 'absolute',
-    opacity: 0,
-    cursor: "pointer"
-});
-
-export const checkmark = style({
-    position: "absolute",
-    width: `calc(${vars.height} - 2px)`,
-    height: `calc(${vars.height} - 2px)`,
-    top: "50%",
-    left: "50%",
-    transform: "translate(-50%, -50%)",
-    color: "white",
-});
-
-export const checkbox = style({
-    vars: {
-        [vars.height]: sizes.md,
-        [vars.radius]: themeVars.rounded.full,
-        [vars.backgroundColor]: 'white',
-        [vars.borderColor]: themeVars.color.gray[300],
-        [vars.color]: themeVars.color.gray[600],
-    },
-    position: "relative",
-    width: vars.height,
-    height: vars.height,
-    borderRadius: vars.radius,
-    backgroundColor: vars.backgroundColor,
-    border: `1px solid ${vars.borderColor}`,
-    color: vars.color,
-    cursor: 'pointer',
-    transition: `all 0.125s ${themeVars.transition.default}`
-});
-
-export const checked = style({
-    vars: {
-        [vars.borderColor]: themeVars.color.blue[500],
-        [vars.backgroundColor]: themeVars.color.blue[500],
-    },
-    selectors: {
-        ['&:after']: {
-            content: '',
-            position: 'absolute',
-            top: '50%',
-            left: '50%',
-            transform: 'translate(-50%, -50%)',
-            width: `calc(${vars.height} - 10px)`,
-            height: `calc(${vars.height} - 10px)`,
-            borderRadius: themeVars.rounded.full,
-            backgroundColor: "#FFF"
-        }
-    }
-});
-
-export const disabled = style({
-    opacity: 0.5,
-    cursor: 'not-allowed',
-});
-
-export const indeterminate = style({
-    vars: {
-        [vars.borderColor]: themeVars.color.blue[500],
-        [vars.backgroundColor]: themeVars.color.blue[500],
-    }
-});
-
-export const label = style({
-    marginLeft: themeVars.space['0.5'],
-    fontWeight: "500",
-    display: 'inline-block',
-    fontSize: themeVars.fontSize.base,
-    wordBreak: 'break-word',
-    cursor: 'pointer',
-})
-
-export const size = styleVariants({
-    xs: {
-        vars: {
-            [vars.height]: sizes.xs
-        }
-    },
-    sm: {
-        vars: {
-            [vars.height]: sizes.sm
-        }
-    },
-    md: {
-        vars: {
-            [vars.height]: sizes.md
-        },
-    },
-    lg: {
-        vars: {
-            [vars.height]: sizes.lg,
-        },
-    },
-    xl: {
-        vars: {
-            [vars.height]: sizes.xl,
-        },
-    },
-});
-
+import {createVar, style, styleVariants} from "@vanilla-extract/css";
+import {themeVars} from "../../../styles/theme.css";
+
+const sizes = {
+    xs: '16px',
+    sm: '18px',
+    md: '20px',
+    lg: '22px',
+    xl: '24px',
+};
+
+export const vars = {
+    height: createVar(),
+    radius: createVar(),
+    backgroundColor: createVar(),
+    borderColor: createVar(),
+    color: createVar()
+}
+
+export const base = style({
+    position: "relative",
+    display: "inline-flex",
+    alignItems: "center",
+    cursor: "pointer",
+    gap: themeVars.space['1.5'],
+});
+
+export const input = style({
+    position: 'absolute',
+    opacity: 0,
+    cursor: "pointer"
+});
+
+export const checkmark = style({
+    position: "absolute",
+    width: `calc(${vars.height} - 2px)`,
+    height: `calc(${vars.height} - 2px)`,
+    top: "50%",
+    left: "50%",
+    transform: "translate(-50%, -50%)",
+    color: "white",
+});
+
+export const checkbox = style({
+    vars: {
+        [vars.height]: sizes.md,
+        [vars.radius]: themeVars.rounded.full,
+        [vars.backgroundColor]: 'white',
+        [vars.borderColor]: themeVars.color.gray[300],
+        [vars.color]: themeVars.color.gray[600],
+    },
+    position: "relative",
+    width: vars.height,
+    height: vars.height,
+    borderRadius: vars.radius,
+    backgroundColor: vars.backgroundColor,
+    border: `1px solid ${vars.borderColor}`,
+    color: vars.color,
+    cursor: 'pointer',
+    transition: `all 0.125s ${themeVars.transition.default}`
+});
+
+export const checked = style({
+    vars: {
+        [vars.borderColor]: themeVars.color.blue[500],
+        [vars.backgroundColor]: themeVars.color.blue[500],
+    },
+    selectors: {
+        ['&:after']: {
+            content: '',
+            position: 'absolute',
+            top: '50%',
+            left: '50%',
+            transform: 'translate(-50%, -50%)',
+            width: `calc(${vars.height} - 10px)`,
+            height: `calc(${vars.height} - 10px)`,
+            borderRadius: themeVars.rounded.full,
+            backgroundColor: "#FFF"
+        }
+    }
+});
+
+export const disabled = style({
+    opacity: 0.5,
+    cursor: 'not-allowed',
+});
+
+export const indeterminate = style({
+    vars: {
+        [vars.borderColor]: themeVars.color.blue[500],
+        [vars.backgroundColor]: themeVars.color.blue[500],
+    }
+});
+
+export const label = style({
+    marginLeft: themeVars.space['0.5'],
+    fontWeight: "500",
+    display: 'inline-block',
+    fontSize: themeVars.fontSize.base,
+    wordBreak: 'break-word',
+    cursor: 'pointer',
+})
+
+export const size = styleVariants({
+    xs: {
+        vars: {
+            [vars.height]: sizes.xs
+        }
+    },
+    sm: {
+        vars: {
+            [vars.height]: sizes.sm
+        }
+    },
+    md: {
+        vars: {
+            [vars.height]: sizes.md
+        },
+    },
+    lg: {
+        vars: {
+            [vars.height]: sizes.lg,
+        },
+    },
+    xl: {
+        vars: {
+            [vars.height]: sizes.xl,
+        },
+    },
+});
+

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

@@ -1 +1 @@
-export * from './Checkbox.css'
+export * from './Checkbox.css'