@teammodlr/ui-kit 3.0.0-beta.9 → 3.0.1

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

@@ -1,5 +1,5 @@
 import MSelect from '../Select.vue';
-import { MSelectBasic, MSelectSearchable, MSelectMultiple } from './index';
+import { MSelectBasic, MSelectSearchable, MSelectMultiple, MSelectFill, MSelectClearable, MSelectRemote } from './index';
 
 import { createStory, sizeArgType } from '../../../__storybook__';
 
@@ -14,3 +14,6 @@ export default {
 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);
+export const Remote = createStory(MSelectRemote);

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

@@ -1,3 +1,6 @@
 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';
+export { default as MSelectRemote } from './remote.vue';

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

@@ -0,0 +1,54 @@
+<template>
+    <MSelect
+        v-model="value"
+        :options="options"
+        :option-value="'id'"
+        :option-label="'name'"
+        :loading="loading"
+        searchable
+        remote
+        @search="onSearch"
+        @on-open="onSearch('')"
+        />
+</template>
+
+<script lang="ts" setup>
+import { ref } from "vue";
+
+const everything = Array.from({ length: 500 }, (_, i) => ({
+    id: i,
+    name: `Option ${i + 1}`
+}));
+
+// Stand-in for a server call
+function fetchOptions(query: string): Promise<typeof everything> {
+    return new Promise(resolve => {
+        setTimeout(() => {
+            resolve(
+                everything
+                    .filter(o => o.name.toLowerCase().includes(query.toLowerCase()))
+                    .slice(0, 20)
+            );
+        }, 500);
+    });
+}
+
+const value = ref();
+const options = ref<typeof everything>([]);
+const loading = ref(false);
+let latest = 0;
+
+async function onSearch(query: string) {
+    const request = ++latest;
+    loading.value = true;
+    const result = await fetchOptions(query);
+
+    // Ignore stale responses
+    if (request !== latest) {
+        return;
+    }
+
+    options.value = result;
+    loading.value = false;
+}
+</script>

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

@@ -6,7 +6,7 @@ import {
 } from '@vanilla-extract/css';
 import { themeVars } from '../../../styles/theme.css';
 
-const sizes = {
+const heights = {
     xs: '26px',
     sm: '30px',
     md: '38px',
@@ -42,7 +42,7 @@ export const wrapper = style({
 
 export const base = style({
     vars: {
-        [vars.height]: sizes.md,
+        [vars.height]: heights.md,
         [vars.radius]: borderRadiuses.md,
         [vars.paddingX]: themeVars.space[2],
         [vars.paddingY]: themeVars.space[0],
@@ -189,8 +189,7 @@ export const menu = style({
     borderRadius: '4px',
     border: `1px solid ${themeVars.color.gray[200]}`,
     boxShadow: themeVars.shadow.md,
-    maxHeight: '230px',
-    overflowY: 'auto'
+    overflow: 'hidden'
 });
 
 export const placeholder = style({
@@ -199,11 +198,7 @@ export const placeholder = style({
 });
 
 export const search = style({
-    // padding: `${themeVars.space[1]} ${themeVars.space[1]} 0`,
     backgroundColor: '#FFFFFF',
-    position: 'sticky',
-    top: 0,
-    zIndex: 1,
     borderBottom: `1px solid ${themeVars.color.gray[200]}`,
     display: 'flex'
 });
@@ -219,10 +214,7 @@ export const searchInput = style({
 });
 
 export const options = style({
-    padding: themeVars.space[1],
-    display: 'flex',
-    flexDirection: 'column',
-    gap: themeVars.space[0.5]
+    overflow: 'hidden'
 });
 
 export const option = style({
@@ -234,10 +226,7 @@ export const option = style({
     display: 'flex',
     alignItems: 'center',
     cursor: 'pointer',
-    minHeight: '36px',
-    fontSize: themeVars.fontSize.base,
-    paddingBlock: themeVars.space['1.5'],
-    paddingInline: themeVars.space['3'],
+    marginBottom: '2px',
     gap: themeVars.space[2],
     color: vars.optionColor,
     transition: 'background-color 0.05s ease-in-out',
@@ -280,6 +269,39 @@ export const optionSelected = style({
 
 export const optionLabel = style({});
 
+export const optionSizes = styleVariants({
+    xs: {
+        minHeight: '28px',
+        fontSize: themeVars.fontSize.small,
+        paddingBlock: themeVars.space['1'],
+        paddingInline: themeVars.space['2']
+    },
+    sm: {
+        minHeight: '30px',
+        fontSize: themeVars.fontSize.base,
+        paddingBlock: themeVars.space['1'],
+        paddingInline: themeVars.space['2.5']
+    },
+    md: {
+        minHeight: '36px',
+        fontSize: themeVars.fontSize.base,
+        paddingBlock: themeVars.space['1.5'],
+        paddingInline: themeVars.space['3']
+    },
+    lg: {
+        minHeight: '40px',
+        fontSize: themeVars.fontSize.large,
+        paddingBlock: themeVars.space['2'],
+        paddingInline: themeVars.space['3']
+    },
+    xl: {
+        minHeight: '44px',
+        fontSize: themeVars.fontSize.large,
+        paddingBlock: themeVars.space['2.5'],
+        paddingInline: themeVars.space['3']
+    }
+});
+
 export const checkAll = style({
     display: 'flex',
     alignItems: 'center',
@@ -357,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({
@@ -371,12 +395,104 @@ export const arrow = style({
     height: themeVars.space[4],
     position: 'absolute',
     right: themeVars.space[3],
-    top: themeVars.space[3],
+    top: '50%',
+    transform: 'translateY(-50%)',
     display: 'flex',
     color: themeVars.color.gray[500],
     transition: 'transform 0.3s ease',
 });
 
 export const arrowOpen = style({
-    transform: 'rotate(180deg)',
+    transform: 'translateY(-50%) rotate(180deg)',
 })
+
+export const fillRoot = style({
+    display: 'flex',
+    flexDirection: 'column',
+    height: '100%',
+    width: '100%'
+});
+
+export const fill = style({
+    flexGrow: 1,
+    width: '100%',
+    minHeight: 0
+});
+
+export const sizes = styleVariants({
+    xs: {
+        vars: {
+            [vars.height]: heights.xs,
+            [vars.radius]: borderRadiuses.xs,
+            [vars.paddingX]: themeVars.space[1]
+        },
+        fontSize: themeVars.fontSize.small
+    },
+    sm: {
+        vars: {
+            [vars.height]: heights.sm,
+            [vars.radius]: borderRadiuses.sm,
+            [vars.paddingX]: themeVars.space[1.5]
+        },
+        fontSize: themeVars.fontSize.small
+    },
+    md: {
+        vars: {
+            [vars.height]: heights.md,
+            [vars.radius]: borderRadiuses.md
+        }
+    },
+    lg: {
+        vars: {
+            [vars.height]: heights.lg,
+            [vars.radius]: borderRadiuses.lg,
+            [vars.paddingX]: themeVars.space[2.5]
+        },
+        fontSize: themeVars.fontSize.large
+    },
+    xl: {
+        vars: {
+            [vars.height]: heights.xl,
+            [vars.radius]: borderRadiuses.xl,
+            [vars.paddingX]: themeVars.space[3]
+        },
+        fontSize: themeVars.fontSize.large
+    }
+});
+
+export const fillBase = style({
+    minHeight: 'unset',
+    height: '100%',
+    lineHeight: 'normal',
+    display: 'flex',
+    alignItems: 'center',
+    overflow: 'hidden',
+    paddingRight: '2rem'
+});
+
+export const fillLabel = style({
+    overflow: 'hidden',
+    whiteSpace: 'nowrap',
+    textOverflow: 'ellipsis',
+    flex: 1,
+    minWidth: 0
+});
+
+export const noBorder = style({
+    vars: {
+        [vars.borderColor]: 'transparent'
+    },
+    borderRadius: 0,
+    boxShadow: 'none',
+    ':hover': {
+        vars: {
+            [vars.borderColor]: 'transparent'
+        }
+    },
+    ':focus': {
+        vars: {
+            [vars.borderColor]: 'transparent'
+        },
+        boxShadow: 'none'
+    }
+});

package/src/components/slider/Slider.vue

@@ -29,7 +29,10 @@ export default defineComponent({
             default: '',
         },
     },
-    emits: ['update:modelValue', 'change'],
+    emits: {
+        'update:modelValue': (_value: number) => true,
+        change: (_value: number) => true
+    },
     setup(props, { emit }) {
         const slider = ref<HTMLElement | null>(null);
         const dragging = ref(false);

package/src/components/tab/Tab.vue

@@ -14,7 +14,7 @@
 
     <teleport v-if="teleportTo && hasContent" :to="teleportTo">
         <TabsContent :value="computedValue" as-child>
-            <div>
+            <div style="outline: none">
                 <slot />
             </div>
         </TabsContent>
@@ -48,7 +48,9 @@ export default defineComponent({
             default: false
         }
     },
-    emits: ['onClose'],
+    emits: {
+        onClose: (_tab: { value: any; label: any }) => true
+    },
     setup(props, { attrs, slots }) {
         const computedValue = computed(() => props.value);
         const computedLabel = computed(() => props.label || props.value);

package/src/components/tab/TabGroup.vue

@@ -53,10 +53,10 @@ export default defineComponent({
             validator: (value: string) => ['base', 'card'].includes(value)
         }
     },
-    emits: [
-        'update:modelValue',
-        'update:selected'
-    ],
+    emits: {
+        'update:modelValue': (_tab: any) => true,
+        'update:selected': (_tab: any) => true
+    },
     setup(props, { emit }) {
         const wrapperRef = ref<HTMLElement>();
         const tabsRef = ref<HTMLElement>();

package/src/components/tab/style/Tab.css.ts

@@ -91,6 +91,12 @@ export const baseButton = style({
             vars: {
                 color: themeVars.color.blue[400],
             },
+        },
+        '&:focus': {
+            outline: 'none',
+        },
+        '&:focus-visible': {
+            outline: 'none',
         }
     }
 });

package/src/components/table/Table.vue

@@ -88,9 +88,9 @@ export default defineComponent({
         TableCell,
         MCheckbox
     },
-    emits: [
-        'update:modelValue',
-    ],
+    emits: {
+        'update:modelValue': (_value: any) => true
+    },
     props: {
         modelValue: {
             type: Array,

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(),
@@ -80,15 +85,19 @@ export default defineComponent({
             default: false
         },
         error: {
-            type: String,
+            type: String as PropType<string | null>,
             default: ''
         },
         height: {
             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',

package/src/components/tree/Tree.vue

@@ -22,7 +22,10 @@ export default defineComponent({
     components: { TreeNode },
     name: 'Tree',
     props: treeProps,
-    emits: ['update:expandedKeys', 'dblclick'],
+    emits: {
+        'update:expandedKeys': (_keys: any) => true,
+        dblclick: (_node: any) => true
+    },
     setup(props, { emit }) {
         const selfElRef = ref<HTMLDivElement | null>(null);
         const controlledExpandedKeysRef = toRef(props, 'expandedKeys');

package/src/composables/useInput.ts

@@ -10,6 +10,14 @@ export interface FormInput {
     setError: (value: string) => void;
 }
 
+export interface InputEmitsMap {
+    'update:modelValue': (...args: any[]) => any;
+    blur: (...args: any[]) => any;
+    focus: (...args: any[]) => any;
+    input: (...args: any[]) => any;
+    change: (...args: any[]) => any;
+}
+
 export const useInput = (
     props: any,
     {
@@ -138,12 +146,12 @@ useInput.emits = (withListeners = true): string[] => {
 useInput.props = () =>
     ({
         modelValue: [String, Number, Boolean, Object, Array] as PropType<
-            string | number | boolean | object | any[] | any[] | undefined
+            string | number | boolean | object | any[] | null | undefined
         >,
         name: String,
         readonly: Boolean,
         required: Boolean,
-        error: String,
+        error: String as PropType<string | null | undefined>,
         rules: {
             type: Array,
             default: () => []