@teammodlr/ui-kit 2.3.12 → 2.3.14

package/src/components/checkbox/Checkbox.vue

@@ -1,149 +1,149 @@
-<template>
-    <div>
-        <label :class="style.base">
-            <input
-                :id="name"
-                v-model="toggle"
-                :name="name"
-                :required="required"
-                :value="value"
-                :disabled="disabled"
-                :checked="checked"
-                :indeterminate="indeterminate"
-                type="checkbox"
-                :aria-disabled="disabled || loading ? 'true' : 'false'"
-                :aria-labelledby="`${id}-label`"
-                v-bind="$attrs"
-                @change="onChange"
-                :class="style.checkbox"/>
-            <span :class="style.label" :id="`${id}-label`">
-            <template v-if="hasSlot">
-                <slot/>
-            </template>
-            <template v-else>{{ label }}</template>
-        </span>
-        </label>
-        <span v-if="hasHelpMessage" :class="style.helpMessage">
-            <slot name="help"/>
-        </span>
-    </div>
-</template>
-
-<script lang="ts">
-import {computed, defineComponent, type PropType, 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: 'Checkbox',
-    emits: [...useInput.emits(), 'change'],
-    props: {
-        ...useInput.props(),
-        ...useInteractive.props(),
-        label: {
-            type: String
-        },
-        size: {
-            type: String as PropType<Size>,
-            default: 'md'
-        },
-        disabled: {
-            type: Boolean,
-            default: false
-        },
-        checked: {
-            type: Boolean,
-            default: false
-        },
-        loading: {
-            type: Boolean,
-            default: false
-        },
-        indeterminate: {
-            type: Boolean,
-            default: false
-        },
-        value: {}
-    },
-    setup(props, {slots, emit, expose}) {
-        const checkboxRef = ref<HTMLElement | null>(null);
-        const hasHelpMessage = computed(() => !!(slots['help-message'] || slots['help']));
-        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 hasSlot = computed(() => !!slots.default);
-
-        const classes = computed(() => {
-            return [
-                style.checkbox,
-                [style.size[props.size]],
-                {
-                    [style.disabled]: disabled.value,
-                    [style.indeterminate]: props.indeterminate
-                }
-            ];
-        });
-
-        const inputError = computed(() => {
-            return formError.value || props.error;
-        });
-
-        const toggle = computed({
-            get() {
-                return props.modelValue;
-            },
-            set(value) {
-                emit('update:modelValue', value);
-            }
-        });
-
-        const onChange = (event: Event) => {
-            emit('change', event);
-        };
-
-        expose({
-            focus,
-            blur
-        });
-
-        return {
-            id,
-            formError,
-            insideForm,
-            reset,
-            validate,
-            setError,
-            onChange,
-            disabled,
-            name,
-            checkboxRef,
-            inputError,
-            toggle,
-            style,
-            classes,
-            hasSlot,
-            inputListeners,
-            focus,
-            blur,
-            hasHelpMessage
-        };
-    }
-});
-</script>
+<template>
+    <div>
+        <label :class="style.base">
+            <input
+                :id="name"
+                v-model="toggle"
+                :name="name"
+                :required="required"
+                :value="value"
+                :disabled="disabled"
+                :checked="checked"
+                :indeterminate="indeterminate"
+                type="checkbox"
+                :aria-disabled="disabled || loading ? 'true' : 'false'"
+                :aria-labelledby="`${id}-label`"
+                v-bind="$attrs"
+                @change="onChange"
+                :class="style.checkbox"/>
+            <span :class="style.label" :id="`${id}-label`">
+            <template v-if="hasSlot">
+                <slot/>
+            </template>
+            <template v-else>{{ label }}</template>
+        </span>
+        </label>
+        <span v-if="hasHelpMessage" :class="style.helpMessage">
+            <slot name="help"/>
+        </span>
+    </div>
+</template>
+
+<script lang="ts">
+import {computed, defineComponent, type PropType, 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: 'Checkbox',
+    emits: [...useInput.emits(), 'change'],
+    props: {
+        ...useInput.props(),
+        ...useInteractive.props(),
+        label: {
+            type: String
+        },
+        size: {
+            type: String as PropType<Size>,
+            default: 'md'
+        },
+        disabled: {
+            type: Boolean,
+            default: false
+        },
+        checked: {
+            type: Boolean,
+            default: false
+        },
+        loading: {
+            type: Boolean,
+            default: false
+        },
+        indeterminate: {
+            type: Boolean,
+            default: false
+        },
+        value: {}
+    },
+    setup(props, {slots, emit, expose}) {
+        const checkboxRef = ref<HTMLElement | null>(null);
+        const hasHelpMessage = computed(() => !!(slots['help-message'] || slots['help']));
+        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 hasSlot = computed(() => !!slots.default);
+
+        const classes = computed(() => {
+            return [
+                style.checkbox,
+                [style.size[props.size]],
+                {
+                    [style.disabled]: disabled.value,
+                    [style.indeterminate]: props.indeterminate
+                }
+            ];
+        });
+
+        const inputError = computed(() => {
+            return formError.value || props.error;
+        });
+
+        const toggle = computed({
+            get() {
+                return props.modelValue;
+            },
+            set(value) {
+                emit('update:modelValue', value);
+            }
+        });
+
+        const onChange = (event: Event) => {
+            emit('change', event);
+        };
+
+        expose({
+            focus,
+            blur
+        });
+
+        return {
+            id,
+            formError,
+            insideForm,
+            reset,
+            validate,
+            setError,
+            onChange,
+            disabled,
+            name,
+            checkboxRef,
+            inputError,
+            toggle,
+            style,
+            classes,
+            hasSlot,
+            inputListeners,
+            focus,
+            blur,
+            hasHelpMessage
+        };
+    }
+});
+</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>

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

@@ -1,16 +1,16 @@
-import MCheckbox from '../Checkbox.vue';
-import { MCheckboxBasic, MCheckboxSlot } from './index';
-
-import { createStory, sizeArgType, colorArgType } from '../../../__storybook__';
-
-export default {
-    component: MCheckbox,
-    title: 'Components/Checkbox',
-    argTypes: {
-        ...sizeArgType(),
-        ...colorArgType()
-    }
-};
-
-export const Basic = createStory(MCheckboxBasic);
-export const Slot = createStory(MCheckboxSlot);
+import MCheckbox from '../Checkbox.vue';
+import { MCheckboxBasic, MCheckboxSlot } from './index';
+
+import { createStory, sizeArgType, colorArgType } from '../../../__storybook__';
+
+export default {
+    component: MCheckbox,
+    title: 'Components/Checkbox',
+    argTypes: {
+        ...sizeArgType(),
+        ...colorArgType()
+    }
+};
+
+export const Basic = createStory(MCheckboxBasic);
+export const Slot = createStory(MCheckboxSlot);

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

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

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

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