@teammodlr/ui-kit 3.0.0-beta.34 → 3.0.0-beta.37

package/src/components/input/Input.vue

@@ -20,9 +20,10 @@
                 :type="inputType"
                 :placeholder="placeholder"
                 :name="name"
-                :value="modelValue || ''"
+                :value="currentValue"
                 :readonly="readonly"
                 v-on="inputListeners"
+                @input="onNativeInput"
                 :class="inputComputedClasses"
                 v-bind="$attrs"
                 :disabled="disabled || loading"
@@ -32,6 +33,7 @@
             <div v-if="hasSuffix" :class="style.suffix">
                 <slot name="suffix" />
             </div>
+            <MClearButton v-if="showClear" :class="clearClasses" @clear="onClear" />
             <div v-if="hasRightIcon" :class="style.rightIcon">
                 <slot name="icon-right" />
             </div>
@@ -52,14 +54,17 @@ import {
     defineComponent,
     ref,
     computed,
-    toRef
+    toRef,
+    watch
 } from "vue";
 import { useInput } from "../../composables/useInput";
 import { useInteractive } from "../../composables/useInteractive";
+import MClearButton from '../clearbutton/ClearButton.vue';
 import * as style from './style';
 
 export default defineComponent({
     name: 'MInput',
+    components: { MClearButton },
     props: {
         ...useInput.props(),
         ...useInteractive.props(),
@@ -103,8 +108,12 @@ export default defineComponent({
             type: String,
             default: ''
         },
+        clearable: {
+            type: Boolean,
+            default: false
+        },
     },
-    emits: useInput.emits(),
+    emits: [...useInput.emits(), 'clear'],
     setup(props, { slots, emit, expose }) {
         const element = ref<HTMLInputElement|null>(null);
         const { focus, blur } = useInteractive(element);
@@ -170,6 +179,8 @@ export default defineComponent({
                     [style.disabled]: disabled.value || loading.value,
                     [style.hasLeftIcon]: hasLeftIcon.value,
                     [style.hasRightIcon]: hasRightIcon.value,
+                    [style.hasClear]: props.clearable,
+                    [style.hasClearAndRightIcon]: props.clearable && hasRightIcon.value,
                 }
             ];
 
@@ -193,8 +204,41 @@ export default defineComponent({
             return formError.value || props.error;
         });
 
+        // Tracks typed text so clearable works without v-model
+        const internalValue = ref<any>(props.modelValue ?? '');
+        watch(() => props.modelValue, value => {
+            internalValue.value = value ?? '';
+        });
+
+        const currentValue = computed(() => {
+            const value = props.modelValue !== undefined ? props.modelValue : internalValue.value;
+            return value || '';
+        });
+
+        const onNativeInput = (event: Event) => {
+            internalValue.value = (event.target as HTMLInputElement).value;
+        };
+
+        const showClear = computed(() => {
+            return props.clearable
+                && !disabled.value
+                && !loading.value
+                && !props.readonly
+                && currentValue.value !== '';
+        });
+
+        const clearClasses = computed(() => {
+            return [
+                style.clear,
+                { [style.clearWithRightIcon]: hasRightIcon.value }
+            ];
+        });
+
         const onClear = () => {
+            internalValue.value = '';
             emit('update:modelValue', '');
+            emit('clear');
+            focus();
         };
 
         expose({
@@ -220,6 +264,10 @@ export default defineComponent({
             hasHelpMessage,
             inputError,
             style,
+            showClear,
+            clearClasses,
+            currentValue,
+            onNativeInput,
 
             onClear,
             validate,

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

@@ -0,0 +1,18 @@
+<template>
+    <div style="display: flex; flex-direction: column; gap: 12px; max-width: 320px;">
+        <MInput v-model="value" placeholder="Type something..." clearable />
+        <MInput v-model="value" placeholder="With a right icon" clearable>
+            <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>
+    </div>
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue';
+
+const value = ref('Clear me');
+</script>

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

@@ -5,7 +5,8 @@ import {
     MInputPrefix,
     MInputLeftIcon,
     MInputRightIcon,
-    MInputSizes
+    MInputSizes,
+    MInputClearable
 } from './index';
 
 import { createStory, sizeArgType } from '../../../__storybook__';
@@ -24,3 +25,4 @@ export const Prefix = createStory(MInputPrefix);
 export const Sizes = createStory(MInputSizes);
 export const LeftIcon = createStory(MInputLeftIcon);
 export const RightIcon = createStory(MInputRightIcon);
+export const Clearable = createStory(MInputClearable);

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

@@ -4,3 +4,4 @@ export { default as MInputPrefix } from './prefix.vue';
 export { default as MInputSizes } from './sizes.vue';
 export { default as MInputLeftIcon } from './left-icon.vue';
 export { default as MInputRightIcon } from './right-icon.vue';
+export { default as MInputClearable } from './clearable.vue';

package/src/components/input/style/Input.css.ts

@@ -251,6 +251,25 @@ export const hasRightIcon = style({
     paddingRight: '2.25rem'
 });
 
+export const hasClear = style({
+    paddingRight: '1.75rem'
+});
+
+export const hasClearAndRightIcon = style({
+    paddingRight: '4rem'
+});
+
+export const clear = style({
+    position: 'absolute',
+    top: '50%',
+    right: themeVars.space[1],
+    transform: 'translateY(-50%)'
+});
+
+export const clearWithRightIcon = style({
+    right: '2.25rem'
+});
+
 export const prefix = style({
     pointerEvents: 'none',
     marginRight: themeVars.space[3],

package/src/components/select/Select.vue

@@ -35,6 +35,7 @@
                             <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevron-down-icon lucide-chevron-down"><path d="m6 9 6 6 6-6"/></svg>
                         </span>
                     </div>
+                    <MClearButton v-if="showClear" :class="style.clear" @clear="clearSelected" />
                 </div>
             </PopoverTrigger>
 
@@ -121,6 +122,7 @@ import {
         type PropType
 } from 'vue';
 import MTag from '../tag/Tag.vue';
+import MClearButton from '../clearbutton/ClearButton.vue';
 import { VList } from 'virtua/vue';
 import * as style from './style';
 
@@ -140,7 +142,8 @@ export default defineComponent({
     emits: {
         ...useInput.emits(),
         'on-open': () => true,
-        'on-close': () => true
+        'on-close': () => true,
+        clear: () => true
     },
     props: {
         ...useInput.props(),
@@ -226,6 +229,10 @@ export default defineComponent({
         zIndex: {
             type: Number
         },
+        clearable: {
+            type: Boolean,
+            default: false
+        },
         showDataOptions: {
             type: Boolean,
             default: true
@@ -235,6 +242,7 @@ export default defineComponent({
     },
     components: {
         MTag,
+        MClearButton,
         VList,
         PopoverContent,
         PopoverPortal,
@@ -615,6 +623,25 @@ export default defineComponent({
             }
         }
 
+        const hasValue = computed(() => {
+            return props.multiple
+                ? Array.isArray(selected.value) && selected.value.length > 0
+                : !!selected.value;
+        });
+
+        const showClear = computed(() => {
+            return props.clearable
+                && hasValue.value
+                && !disabled.value
+                && !loading.value;
+        });
+
+        function clearSelected() {
+            selected.value = props.multiple ? [] : '';
+            emit('clear');
+            container.value?.focus();
+        }
+
         function removeSelected(value: string | number) {
             if (!props.multiple) {
                 return;
@@ -783,6 +810,7 @@ export default defineComponent({
                 style.base,
                 style.sizes[props.size],
                 {
+                    [style.hasClear]: showClear.value,
                     [style.selectedTags]:
                         props.multiple &&
                         Array.isArray(selected.value) &&
@@ -954,6 +982,8 @@ export default defineComponent({
             getSelectedLabel,
             openSelect,
             removeSelected,
+            showClear,
+            clearSelected,
             inputError,
             transitionName,
             inputListeners,

package/src/components/select/examples/clearable.vue

@@ -0,0 +1,18 @@
+<template>
+    <div style="display: flex; flex-direction: column; gap: 12px; max-width: 320px;">
+        <MSelect v-model="single" :options="options" clearable />
+        <MSelect v-model="multiple" :options="options" multiple clearable />
+    </div>
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue';
+
+const options = Array.from({ length: 10 }, (_, i) => ({
+    value: i + 1,
+    label: `Option ${i + 1}`
+}));
+
+const single = ref(2);
+const multiple = ref([1, 2]);
+</script>

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

@@ -1,5 +1,5 @@
 import MSelect from '../Select.vue';
-import { MSelectBasic, MSelectSearchable, MSelectMultiple, MSelectFill } from './index';
+import { MSelectBasic, MSelectSearchable, MSelectMultiple, MSelectFill, MSelectClearable } from './index';
 
 import { createStory, sizeArgType } from '../../../__storybook__';
 
@@ -15,3 +15,4 @@ export const Basic = createStory(MSelectBasic);
 export const Searchable = createStory(MSelectSearchable);
 export const Multiple = createStory(MSelectMultiple);
 export const Fill = createStory(MSelectFill);
+export const Clearable = createStory(MSelectClearable);

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

@@ -2,3 +2,4 @@ export { default as MSelectBasic } from './basic.vue';
 export { default as MSelectSearchable } from './searchable.vue';
 export { default as MSelectMultiple } from './multiple.vue';
 export { default as MSelectFill } from './fill.vue';
+export { default as MSelectClearable } from './clearable.vue';

package/src/components/select/style/Select.css.ts

@@ -379,13 +379,15 @@ export const noResults = style({
     fontSize: themeVars.fontSize.small
 });
 
-export const clearable = style({
-    width: themeVars.space[4],
-    height: themeVars.space[4],
+export const clear = style({
     position: 'absolute',
-    right: themeVars.space[2],
-    top: '0',
-    display: 'flex'
+    top: '50%',
+    right: '2.25rem',
+    transform: 'translateY(-50%)'
+});
+
+export const hasClear = style({
+    paddingRight: '3.75rem'
 });
 
 export const arrow = style({

package/src/components/textarea/Textarea.vue

@@ -17,12 +17,14 @@
                 :value="textareaValue"
                 :readonly="readonly"
                 v-on="inputListeners"
+                @input="onNativeInput"
                 :class="inputComputedClasses"
                 v-bind="$attrs"
                 :disabled="disabled || loading"
                 :aria-disabled="disabled ? 'true' : 'false'"
                 :aria-labelledby="`${id}-label`"
             />
+            <MClearButton v-if="showClear" :class="style.clear" @clear="onClear" />
         </div>
         <div v-if="inputError" :class="style.errorMessage">
             {{ inputError }}
@@ -37,14 +39,17 @@ import {
     defineComponent,
     ref,
     computed,
-    toRef
+    toRef,
+    watch
 } from "vue";
 import { useInput } from "../../composables/useInput";
 import { useInteractive } from "../../composables/useInteractive";
+import MClearButton from '../clearbutton/ClearButton.vue';
 import * as style from './style';
 
 export default defineComponent({
     name: 'MTextArea',
+    components: { MClearButton },
     props: {
         ...useInput.props(),
         ...useInteractive.props(),
@@ -87,8 +92,12 @@ export default defineComponent({
             type: Number,
             default: 64
         },
+        clearable: {
+            type: Boolean,
+            default: false
+        },
     },
-    emits: useInput.emits(),
+    emits: [...useInput.emits(), 'clear'],
     setup(props, { emit, expose }) {
         const element = ref<HTMLTextAreaElement | null>(null);
         const { focus, blur } = useInteractive(element);
@@ -136,6 +145,7 @@ export default defineComponent({
                     [style.block]: props.block,
                     [style.disabled]: disabled.value || loading.value,
                     [style.error]: inputError.value,
+                    [style.hasClear]: props.clearable,
                 }
             ];
         });
@@ -144,12 +154,36 @@ export default defineComponent({
             return formError.value || props.error;
         });
 
+        // Tracks typed text so clearable works without v-model
+        const internalValue = ref('');
+        watch(() => props.modelValue, value => {
+            internalValue.value = value == null ? '' : String(value);
+        }, { immediate: true });
+
         const textareaValue = computed(() => {
-            return props.modelValue == null ? '' : String(props.modelValue);
+            if (props.modelValue !== undefined) {
+                return props.modelValue == null ? '' : String(props.modelValue);
+            }
+            return internalValue.value;
+        });
+
+        const onNativeInput = (event: Event) => {
+            internalValue.value = (event.target as HTMLTextAreaElement).value;
+        };
+
+        const showClear = computed(() => {
+            return props.clearable
+                && !disabled.value
+                && !loading.value
+                && !readonly.value
+                && textareaValue.value !== '';
         });
 
         const onClear = () => {
+            internalValue.value = '';
             emit('update:modelValue', '');
+            emit('clear');
+            focus();
         };
 
         expose({
@@ -171,6 +205,8 @@ export default defineComponent({
             textareaValue,
             inputError,
             style,
+            showClear,
+            onNativeInput,
 
             onClear,
             validate,

package/src/components/textarea/examples/clearable.vue

@@ -0,0 +1,16 @@
+<template>
+    <MTextArea
+        v-model="value"
+        label="Some Text"
+        name="text"
+        placeholder="Some text placeholder"
+        :height="128"
+        clearable
+        />
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue';
+
+const value = ref('Clear me');
+</script>

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

@@ -1,5 +1,5 @@
 import MTextarea from '../Textarea.vue';
-import { MTextareaBasic } from './index';
+import { MTextareaBasic, MTextareaClearable } from './index';
 
 import { createStory, sizeArgType } from '../../../__storybook__';
 
@@ -12,3 +12,4 @@ export default {
 };
 
 export const Basic = createStory(MTextareaBasic);
+export const Clearable = createStory(MTextareaClearable);

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

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

package/src/components/textarea/style/Textarea.css.ts

@@ -144,6 +144,16 @@ export const disabled = style({
     }
 });
 
+export const hasClear = style({
+    paddingRight: '1.75rem'
+});
+
+export const clear = style({
+    position: 'absolute',
+    top: themeVars.space[1],
+    right: themeVars.space[1]
+});
+
 export const label = style({
     fontWeight: '500',
     display: 'inline-block',