@teammodlr/ui-kit 2.0.29 → 2.0.30

package/src/components/input/Input.vue

@@ -1,218 +1,218 @@
-<template>
-    <div ref="container" :class="computedContainerClasses">
-        <label v-if="label" :for="id" :id="`${id}-label`" :class="style.label">
-            {{ label }}
-        </label>
-        <div v-if="description" :class="style.description">
-            {{ description }}
-        </div>
-        
-        <div :class="wrapperComputedClasses">
-            <div v-if="hasLeftIcon" :class="style.leftIcon">
-                <slot name="icon-left" />
-            </div>
-            <input 
-                ref="element"
-                :id="id"  
-                :type="inputType" 
-                :placeholder="placeholder"
-                :name="name" 
-                :value="modelValue || ''"
-                :readonly="readonly"
-                v-on="inputListeners"
-                :class="inputComputedClasses"
-                v-bind="$attrs"
-                :disabled="disabled || loading"
-                :aria-disabled="disabled ? 'true' : 'false'"
-                :aria-labelledby="`${id}-label`"
-            />
-            <div v-if="hasRightIcon" :class="style.rightIcon">
-                <slot name="icon-right" />
-            </div>
-        </div>
-        <div v-if="inputError" :class="style.errorMessage">
-            {{ inputError }}
-        </div>
-    </div>
-</template>
-
-<script lang="ts">
-import type { PropType } from "vue";
-import type { Size } from "../../types/props";
-import {
-    defineComponent,
-    ref,
-    computed,
-    toRef,
-    defineExpose
-} from "vue";
-import { useInput } from "../../composables/useInput";
-import { useInteractive } from "../../composables/useInteractive";
-import * as style from './style';
-
-export default defineComponent({
-    name: 'MInput',
-    props: {
-        ...useInput.props(),
-        ...useInteractive.props(),
-        label: {
-            type: String
-        },
-        size: {
-            type: String as PropType<Size>,
-            default: 'md',
-        },
-        type: {
-            type: String,
-            default: 'text',
-            validator: (value: string) => ['text', 'password', 'number', 'email', 'date', 'datetime'].includes(value)
-        },
-        placeholder: {
-            type: String,
-            default: ''
-        },
-        loading: {
-            type: Boolean,
-            default: false
-        },
-        readonly: {
-            type: Boolean,
-            default: false
-        },
-        disabled: {
-            type: Boolean,
-            default: false
-        },
-        description: {
-            type: String,
-            default: ''
-        },
-        block: {
-            type: Boolean,
-            default: false
-        },
-        error: {
-            type: String,
-            default: ''
-        },
-    },
-    emits: useInput.emits(),
-    setup(props, { slots, emit }) {
-        const element = ref<HTMLInputElement|null>(null);
-        const { focus, blur } = useInteractive(element);
-        const {
-            id,
-            insideForm,
-            reset,
-            inputListeners,
-            validate,
-            setError,
-            formError,
-            formDisabled,
-            formLoading
-        } = useInput(props, { focus, emit });
-
-        const showPassword = ref(false);
-        const name = toRef(props, 'name');
-
-        const hasLeftIcon = computed(() => !!(slots['icon-left']));
-        const hasRightIcon = computed(() => !!(slots['icon-right']));
-        const disabled = computed(() => formDisabled || props.disabled);
-        const loading = computed(() => formLoading || props.loading);
-
-        const inputType = computed(() => {
-            const type = props.type;
-            if (type === 'password') {
-                return showPassword.value ? 'text' : 'password';
-            }
-
-            return type;
-        });
-
-        const readonly = computed(() => (props.loading || props.readonly));
-
-        const computedContainerClasses = computed(() => {
-            return [
-                {
-                    [style.block]: props.block,
-                }
-            ]
-        });
-
-        const wrapperComputedClasses = computed(() => {
-            return [
-                style.wrapper,
-                {
-                    [style.block]: props.block,
-                }
-            ]
-        });
-
-        const inputComputedClasses = computed(() => {
-            return [
-                style.base,
-                style.size[props.size],
-                {
-                    [style.block]: props.block,
-                    [style.disabled]: disabled.value || loading.value,
-                    [style.error]: inputError.value,
-                    [style.hasLeftIcon]: hasLeftIcon.value,
-                    [style.hasRightIcon]: hasRightIcon.value,
-                }
-            ];
-
-            // return [
-            //     'm-input',
-            //     `m-input--${props.size}`,
-            //     {
-            //         'm-input--disabled': disabled.value || loading.value,
-            //         'm-input--readonly': readonly.value,
-            //         'm-input--focused': focused.value,
-            //         'm-input--error': inputError.value,
-            //         'm-input--icon-left': hasLeftIcon.value,
-            //         'm-input--icon-right': hasRightIcon.value,
-            //         'm-input--loading': props.loading,
-            //         'm-input--password': props.type === 'password'
-            //     }
-            // ]
-        });
-
-        const inputError = computed(() => {
-            return formError.value || props.error;
-        });
-
-        const onClear = () => {
-            emit('update:modelValue', '');
-        };
-
-        defineExpose({
-            focus,
-            blur,
-        })
-
-        return {
-            element,
-            id,
-            inputType,
-            disabled,
-            loading,
-            readonly,
-            inputComputedClasses,
-            wrapperComputedClasses,
-            computedContainerClasses,
-            name,
-            hasLeftIcon,
-            hasRightIcon,
-            inputError,
-            style,
-
-            onClear,
-            validate,
-            setError,
-            focus,
-            blur,
-            inputListeners
-        }
-    }
-})
-</script>
+<template>
+    <div ref="container" :class="computedContainerClasses">
+        <label v-if="label" :for="id" :id="`${id}-label`" :class="style.label">
+            {{ label }}
+        </label>
+        <div v-if="description" :class="style.description">
+            {{ description }}
+        </div>
+        
+        <div :class="wrapperComputedClasses">
+            <div v-if="hasLeftIcon" :class="style.leftIcon">
+                <slot name="icon-left" />
+            </div>
+            <input 
+                ref="element"
+                :id="id"  
+                :type="inputType" 
+                :placeholder="placeholder"
+                :name="name" 
+                :value="modelValue || ''"
+                :readonly="readonly"
+                v-on="inputListeners"
+                :class="inputComputedClasses"
+                v-bind="$attrs"
+                :disabled="disabled || loading"
+                :aria-disabled="disabled ? 'true' : 'false'"
+                :aria-labelledby="`${id}-label`"
+            />
+            <div v-if="hasRightIcon" :class="style.rightIcon">
+                <slot name="icon-right" />
+            </div>
+        </div>
+        <div v-if="inputError" :class="style.errorMessage">
+            {{ inputError }}
+        </div>
+    </div>
+</template>
+
+<script lang="ts">
+import type { PropType } from "vue";
+import type { Size } from "../../types/props";
+import {
+    defineComponent,
+    ref,
+    computed,
+    toRef,
+    defineExpose
+} from "vue";
+import { useInput } from "../../composables/useInput";
+import { useInteractive } from "../../composables/useInteractive";
+import * as style from './style';
+
+export default defineComponent({
+    name: 'MInput',
+    props: {
+        ...useInput.props(),
+        ...useInteractive.props(),
+        label: {
+            type: String
+        },
+        size: {
+            type: String as PropType<Size>,
+            default: 'md',
+        },
+        type: {
+            type: String,
+            default: 'text',
+            validator: (value: string) => ['text', 'password', 'number', 'email', 'date', 'datetime'].includes(value)
+        },
+        placeholder: {
+            type: String,
+            default: ''
+        },
+        loading: {
+            type: Boolean,
+            default: false
+        },
+        readonly: {
+            type: Boolean,
+            default: false
+        },
+        disabled: {
+            type: Boolean,
+            default: false
+        },
+        description: {
+            type: String,
+            default: ''
+        },
+        block: {
+            type: Boolean,
+            default: false
+        },
+        error: {
+            type: String,
+            default: ''
+        },
+    },
+    emits: useInput.emits(),
+    setup(props, { slots, emit }) {
+        const element = ref<HTMLInputElement|null>(null);
+        const { focus, blur } = useInteractive(element);
+        const {
+            id,
+            insideForm,
+            reset,
+            inputListeners,
+            validate,
+            setError,
+            formError,
+            formDisabled,
+            formLoading
+        } = useInput(props, { focus, emit });
+
+        const showPassword = ref(false);
+        const name = toRef(props, 'name');
+
+        const hasLeftIcon = computed(() => !!(slots['icon-left']));
+        const hasRightIcon = computed(() => !!(slots['icon-right']));
+        const disabled = computed(() => formDisabled || props.disabled);
+        const loading = computed(() => formLoading || props.loading);
+
+        const inputType = computed(() => {
+            const type = props.type;
+            if (type === 'password') {
+                return showPassword.value ? 'text' : 'password';
+            }
+
+            return type;
+        });
+
+        const readonly = computed(() => (props.loading || props.readonly));
+
+        const computedContainerClasses = computed(() => {
+            return [
+                {
+                    [style.block]: props.block,
+                }
+            ]
+        });
+
+        const wrapperComputedClasses = computed(() => {
+            return [
+                style.wrapper,
+                {
+                    [style.block]: props.block,
+                }
+            ]
+        });
+
+        const inputComputedClasses = computed(() => {
+            return [
+                style.base,
+                style.size[props.size],
+                {
+                    [style.block]: props.block,
+                    [style.disabled]: disabled.value || loading.value,
+                    [style.error]: inputError.value,
+                    [style.hasLeftIcon]: hasLeftIcon.value,
+                    [style.hasRightIcon]: hasRightIcon.value,
+                }
+            ];
+
+            // return [
+            //     'm-input',
+            //     `m-input--${props.size}`,
+            //     {
+            //         'm-input--disabled': disabled.value || loading.value,
+            //         'm-input--readonly': readonly.value,
+            //         'm-input--focused': focused.value,
+            //         'm-input--error': inputError.value,
+            //         'm-input--icon-left': hasLeftIcon.value,
+            //         'm-input--icon-right': hasRightIcon.value,
+            //         'm-input--loading': props.loading,
+            //         'm-input--password': props.type === 'password'
+            //     }
+            // ]
+        });
+
+        const inputError = computed(() => {
+            return formError.value || props.error;
+        });
+
+        const onClear = () => {
+            emit('update:modelValue', '');
+        };
+
+        defineExpose({
+            focus,
+            blur,
+        })
+
+        return {
+            element,
+            id,
+            inputType,
+            disabled,
+            loading,
+            readonly,
+            inputComputedClasses,
+            wrapperComputedClasses,
+            computedContainerClasses,
+            name,
+            hasLeftIcon,
+            hasRightIcon,
+            inputError,
+            style,
+
+            onClear,
+            validate,
+            setError,
+            focus,
+            blur,
+            inputListeners
+        }
+    }
+})
+</script>

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

@@ -1,8 +1,17 @@
-<template>
-    <MInput
-        label="Email"
-        name="email"
-        placeholder="Email Address"
-        autofocus
-        />
-</template>
+<template>
+    <MInput
+        label="Email"
+        name="email"
+        placeholder="Email Address"
+        autofocus
+        data-maska="#-#"
+        v-model="value"
+        />
+        {{ value }}
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+
+let value = ref('');
+</script>

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

@@ -1,24 +1,24 @@
-import MInput from "../Input.vue";
-import {
-    MInputBasic,
-    MInputSuffix,
-    MInputPrefix,
-    MInputSizes
-} from "./index";
-
-import {
-    createStory, sizeArgType
-} from "../../../__storybook__";
-
-export default {
-    component: MInput,
-    title: 'Components/Input',
-    argTypes: {
-        ...sizeArgType()
-    }
-}
-
-export const Basic = createStory(MInputBasic);
-export const Suffix = createStory(MInputSuffix);
-export const Prefix = createStory(MInputPrefix);
-export const Sizes = createStory(MInputSizes);
+import MInput from "../Input.vue";
+import {
+    MInputBasic,
+    MInputSuffix,
+    MInputPrefix,
+    MInputSizes
+} from "./index";
+
+import {
+    createStory, sizeArgType
+} from "../../../__storybook__";
+
+export default {
+    component: MInput,
+    title: 'Components/Input',
+    argTypes: {
+        ...sizeArgType()
+    }
+}
+
+export const Basic = createStory(MInputBasic);
+export const Suffix = createStory(MInputSuffix);
+export const Prefix = createStory(MInputPrefix);
+export const Sizes = createStory(MInputSizes);

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

@@ -1,4 +1,4 @@
-export { default as MInputBasic } from './basic.vue';
-export { default as MInputSuffix } from './suffix.vue';
-export { default as MInputPrefix } from './prefix.vue';
-export { default as MInputSizes } from './sizes.vue';
+export { default as MInputBasic } from './basic.vue';
+export { default as MInputSuffix } from './suffix.vue';
+export { default as MInputPrefix } from './prefix.vue';
+export { default as MInputSizes } from './sizes.vue';

package/src/components/input/examples/prefix.vue

@@ -1,9 +1,9 @@
-<template>
-    <MInput placeholder="Brad Veryard" name="name">
-        <template #icon-left>
-            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" style="width: 20px; height: 20px;">
-                <path stroke-linecap="round" d="M16.5 12a4.5 4.5 0 11-9 0 4.5 4.5 0 019 0zm0 0c0 1.657 1.007 3 2.25 3S21 13.657 21 12a9 9 0 10-2.636 6.364M16.5 12V8.25" />
-            </svg>
-        </template>
-    </MInput>
-</template>
+<template>
+    <MInput placeholder="Brad Veryard" name="name">
+        <template #icon-left>
+            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" style="width: 20px; height: 20px;">
+                <path stroke-linecap="round" d="M16.5 12a4.5 4.5 0 11-9 0 4.5 4.5 0 019 0zm0 0c0 1.657 1.007 3 2.25 3S21 13.657 21 12a9 9 0 10-2.636 6.364M16.5 12V8.25" />
+            </svg>
+        </template>
+    </MInput>
+</template>

package/src/components/input/examples/sizes.vue

@@ -1,9 +1,9 @@
-<template>
-    <div>
-        <MInput clearable name="field_one" size="xs" /><br /><br />
-        <MInput clearable name="field_two" size="sm" /><br /><br />
-        <MInput clearable name="field_three" /><br /><br />
-        <MInput clearable name="field_four" size="lg" /><br /><br />
-        <MInput clearable name="field_five" size="xl" /><br /><br />
-    </div>
-</template>
+<template>
+    <div>
+        <MInput clearable name="field_one" size="xs" /><br /><br />
+        <MInput clearable name="field_two" size="sm" /><br /><br />
+        <MInput clearable name="field_three" /><br /><br />
+        <MInput clearable name="field_four" size="lg" /><br /><br />
+        <MInput clearable name="field_five" size="xl" /><br /><br />
+    </div>
+</template>

package/src/components/input/examples/suffix.vue

@@ -1,9 +1,9 @@
-<template>
-    <MInput placeholder="Brad Veryard" name="name">
-        <template #icon-right>
-            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" style="width: 20px; height: 20px;">
-            <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a.75.75 0 000 1.5h.253a.25.25 0 01.244.304l-.459 2.066A1.75 1.75 0 0010.747 15H11a.75.75 0 000-1.5h-.253a.25.25 0 01-.244-.304l.459-2.066A1.75 1.75 0 009.253 9H9z" clip-rule="evenodd" />
-            </svg>
-        </template>
-    </MInput>
-</template>
+<template>
+    <MInput placeholder="Brad Veryard" name="name">
+        <template #icon-right>
+            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" style="width: 20px; height: 20px;">
+            <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a.75.75 0 000 1.5h.253a.25.25 0 01.244.304l-.459 2.066A1.75 1.75 0 0010.747 15H11a.75.75 0 000-1.5h-.253a.25.25 0 01-.244-.304l.459-2.066A1.75 1.75 0 009.253 9H9z" clip-rule="evenodd" />
+            </svg>
+        </template>
+    </MInput>
+</template>