@teammodlr/ui-kit 2.1.39 → 2.1.43

package/src/components/switch/Switch.vue

@@ -1,132 +1,132 @@
-<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">
-        </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, 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: "Switch",
-    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, expose }) {
-        const toggleRef = ref<HTMLElement | null>(null);
-
-        const { focus, blur } = useInteractive(toggleRef);
-
-        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.toggle,
-                [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;
-        }
-
-        expose({
-            focus,
-            blur,
-        })
-
-        return {
-            id,
-            formError,
-            insideForm,
-            reset,
-            validate,
-            setError,
-            disabled,
-            name,
-            checked,
-            toggleRef,
-            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">
+        </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, 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: "Switch",
+    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, expose }) {
+        const toggleRef = ref<HTMLElement | null>(null);
+
+        const { focus, blur } = useInteractive(toggleRef);
+
+        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.toggle,
+                [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;
+        }
+
+        expose({
+            focus,
+            blur,
+        })
+
+        return {
+            id,
+            formError,
+            insideForm,
+            reset,
+            validate,
+            setError,
+            disabled,
+            name,
+            checked,
+            toggleRef,
+            inputError,
+            toggle,
+            style,
+            classes,
+            hasSlot,
+            inputListeners,
+            focus,
+            blur
+        }
+    }
+})
+</script>

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

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

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

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

package/src/components/switch/examples/slot.vue

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

package/src/components/switch/style/Switch.css.ts

@@ -1,135 +1,135 @@
-import {
-    createVar,
-    globalStyle,
-    style,
-    styleVariants
-} from '@vanilla-extract/css';
-import { themeVars } from '../../../styles/theme.css';
-
-const sizes = {
-    xs: '14px',
-    sm: '16px',
-    md: '18px',
-    lg: '20px',
-    xl: '22px'
-};
-
-const vars = {
-    offBackground: createVar(),
-    onBackground: createVar(),
-    handleBackground: createVar(),
-    height: createVar()
-};
-
-export const toggle = style({
-    vars: {
-        [vars.height]: sizes.md,
-        [vars.offBackground]: themeVars.color.gray[300],
-        [vars.onBackground]: themeVars.color.blue[500],
-        [vars.handleBackground]: '#fff'
-    },
-    outline: 0,
-    display: 'block',
-    width: `calc(${vars.height} * 2)`,
-    minWidth: `calc(${vars.height} * 2)`,
-    height: `calc(${vars.height} + 2px)`,
-    position: 'relative',
-    cursor: 'pointer',
-    userSelect: 'none',
-    borderRadius: '2em',
-    padding: '2px',
-    background: vars.offBackground,
-    transition: 'all .4s ease',
-    selectors: {
-        ['&:after']: {
-            position: 'relative',
-            display: 'block',
-            content: '""',
-            width: `calc(${vars.height} - 2px)`,
-            height: '100%',
-            left: 0,
-            borderRadius: '50%',
-            background: vars.handleBackground,
-            transition: 'all .2s ease'
-        },
-        ['&:before']: {
-            position: 'relative',
-            content: '""',
-            width: '50%',
-            height: '100%',
-            display: 'none'
-        }
-    }
-});
-
-export const checked = style({
-    vars: {
-        [vars.offBackground]: vars.onBackground
-    },
-    selectors: {
-        ['&:after']: {
-            left: '50%'
-        }
-    }
-});
-
-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 disabled = style({
-    opacity: 0.5,
-    cursor: 'not-allowed'
-});
-
-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
-        }
-    }
-});
-
-globalStyle(`${base} ${input}:focus + ${toggle}`, {
-    vars: {},
-    boxShadow: `0 0 0 2px ${themeVars.color.blue[200]}`
-});
+import {
+    createVar,
+    globalStyle,
+    style,
+    styleVariants
+} from '@vanilla-extract/css';
+import { themeVars } from '../../../styles/theme.css';
+
+const sizes = {
+    xs: '14px',
+    sm: '16px',
+    md: '18px',
+    lg: '20px',
+    xl: '22px'
+};
+
+const vars = {
+    offBackground: createVar(),
+    onBackground: createVar(),
+    handleBackground: createVar(),
+    height: createVar()
+};
+
+export const toggle = style({
+    vars: {
+        [vars.height]: sizes.md,
+        [vars.offBackground]: themeVars.color.gray[300],
+        [vars.onBackground]: themeVars.color.blue[500],
+        [vars.handleBackground]: '#fff'
+    },
+    outline: 0,
+    display: 'block',
+    width: `calc(${vars.height} * 2)`,
+    minWidth: `calc(${vars.height} * 2)`,
+    height: `calc(${vars.height} + 2px)`,
+    position: 'relative',
+    cursor: 'pointer',
+    userSelect: 'none',
+    borderRadius: '2em',
+    padding: '2px',
+    background: vars.offBackground,
+    transition: 'all .4s ease',
+    selectors: {
+        ['&:after']: {
+            position: 'relative',
+            display: 'block',
+            content: '""',
+            width: `calc(${vars.height} - 2px)`,
+            height: '100%',
+            left: 0,
+            borderRadius: '50%',
+            background: vars.handleBackground,
+            transition: 'all .2s ease'
+        },
+        ['&:before']: {
+            position: 'relative',
+            content: '""',
+            width: '50%',
+            height: '100%',
+            display: 'none'
+        }
+    }
+});
+
+export const checked = style({
+    vars: {
+        [vars.offBackground]: vars.onBackground
+    },
+    selectors: {
+        ['&:after']: {
+            left: '50%'
+        }
+    }
+});
+
+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 disabled = style({
+    opacity: 0.5,
+    cursor: 'not-allowed'
+});
+
+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
+        }
+    }
+});
+
+globalStyle(`${base} ${input}:focus + ${toggle}`, {
+    vars: {},
+    boxShadow: `0 0 0 2px ${themeVars.color.blue[200]}`
+});

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

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