@teammodlr/ui-kit 3.0.0 → 3.0.1

package/src/components/select/Select.vue

@@ -8,7 +8,7 @@
                 {{ description }}
             </div>
 
-            <PopoverTrigger as-child :disabled="disabled || loading">
+            <PopoverTrigger as-child :disabled="blocked">
                 <div :class="computedWrapperClasses" v-on="inputListeners" :id="id" ref="container"
                     :aria-disabled="disabled ? 'true' : 'false'" :aria-labelledby="`${id}-label`" tabindex="0"
                     data-m-select-trigger="true"
@@ -72,7 +72,8 @@
                             <input v-if="searchable" type="text" ref="searchRef" v-model="search" placeholder="Search"
                                 :class="style.searchInput" :data-input="`select-menu-search-${id}`" />
                         </div>
-                        <div v-if="computedOptions.length === 0" :class="style.noResults">No results</div>
+                        <div v-if="showRemoteLoading" :class="style.noResults">Loading...</div>
+                        <div v-else-if="computedOptions.length === 0" :class="style.noResults">No results</div>
                         <VList
                             v-else
                             ref="virtualListRef"
@@ -116,6 +117,7 @@ import {
     computed,
     defineComponent,
     nextTick,
+    onBeforeUnmount,
     ref,
     watch,
     watchEffect,
@@ -143,7 +145,9 @@ export default defineComponent({
         ...(useInput.emits() as unknown as InputEmitsMap),
         'on-open': () => true,
         'on-close': () => true,
-        clear: () => true
+        clear: () => true,
+        // Emitted when the search text changes (debounced when `remote`). Emits '' when the menu closes.
+        search: (_query: string) => true
     },
     props: {
         ...useInput.props(),
@@ -167,6 +171,17 @@ export default defineComponent({
             type: Boolean,
             default: false
         },
+        // Options are loaded from a server: search no longer filters locally,
+        // the consumer listens to `search` and updates `options`.
+        remote: {
+            type: Boolean,
+            default: false
+        },
+        // Debounce (ms) applied to the `search` event when `remote`
+        searchDebounce: {
+            type: Number,
+            default: 300
+        },
         size: {
             type: String as PropType<Size>,
             default: 'md'
@@ -302,6 +317,23 @@ export default defineComponent({
 
         const disabled = computed(() => formDisabled || props.disabled);
         const loading = computed(() => formLoading || props.loading);
+        // In remote mode `loading` is shown inside the menu (so the user can keep
+        // typing while a search is in flight) rather than locking the trigger.
+        const blocked = computed(() => disabled.value || (loading.value && !props.remote));
+
+        // Remote options come and go between searches, so remember every option we've
+        // seen to keep labels for selected values that are no longer in `options`.
+        const knownOptions = new Map<any, any>();
+        watch(
+            () => props.options,
+            (options) => {
+                if (!props.remote || !options) {
+                    return;
+                }
+                options.forEach(option => knownOptions.set(option[props.optionValue], option));
+            },
+            { immediate: true }
+        );
 
         const selected = computed<any | any[]>({
             get() {
@@ -366,80 +398,44 @@ export default defineComponent({
             };
         });
 
+        const showRemoteLoading = computed(() => props.remote && loading.value);
+
         const computedOptions = computed(() => {
             if (!props.options || props.options.length == 0) {
                 return [];
             }
 
-            // Filter options by search
-            if (props.searchable && search.value) {
-                let options = props.options
-                    .filter(option => {
-                        return option[props.optionLabel]
-                            .toLowerCase()
-                            .includes(search.value.toLowerCase());
-                    })
-                    .map(option => {
-                        if (option[props.optionValue] === undefined) {
-                            throw new Error('Option value is undefined');
-                        }
-
-                        if (option[props.optionLabel] === undefined) {
-                            throw new Error('Option label is undefined');
-                        }
-
-                        let value = option[props.optionValue];
-                        let active: boolean;
-                        if (props.multiple && Array.isArray(selected.value)) {
-                            active = selected.value.includes(value);
-                        } else {
-                            active = selected.value === value;
-                        }
-
-                        return {
-                            value: value,
-                            label: option[props.optionLabel],
-                            active: active,
-                            onClick: () => handleOptionClick(value)
-                        };
-                    });
-
-                if (props.allowBlank) {
-                    options.unshift({
-                        value: '',
-                        label: '',
-                        active: false,
-                        onClick: () => handleOptionClick('')
-                    });
-                }
-
-                return options;
-            }
+            // Remote options are already filtered by the server
+            const query = props.searchable && !props.remote
+                ? search.value.toLowerCase()
+                : '';
 
-            let options = props.options.map(option => {
-                if (option[props.optionValue] === undefined) {
-                    throw new Error('Option value is undefined');
-                }
+            const options = props.options
+                .filter(option => !query || option[props.optionLabel].toLowerCase().includes(query))
+                .map(option => {
+                    if (option[props.optionValue] === undefined) {
+                        throw new Error('Option value is undefined');
+                    }
 
-                if (option[props.optionLabel] === undefined) {
-                    throw new Error('Option label is undefined');
-                }
+                    if (option[props.optionLabel] === undefined) {
+                        throw new Error('Option label is undefined');
+                    }
 
-                let value = option[props.optionValue];
-                let active: boolean;
-                if (props.multiple && Array.isArray(selected.value)) {
-                    active = selected.value.includes(value);
-                } else {
-                    active = selected.value === value;
-                }
+                    const value = option[props.optionValue];
+                    let active: boolean;
+                    if (props.multiple && Array.isArray(selected.value)) {
+                        active = selected.value.includes(value);
+                    } else {
+                        active = selected.value === value;
+                    }
 
-                return {
-                    value: value,
-                    label: option[props.optionLabel],
-                    active: active,
-                    onClick: () => handleOptionClick(value)
-                };
-            });
+                    return {
+                        value: value,
+                        label: option[props.optionLabel],
+                        active: active,
+                        onClick: () => handleOptionClick(value)
+                    };
+                });
 
             if (props.allowBlank) {
                 options.unshift({
@@ -476,7 +472,7 @@ export default defineComponent({
         }
 
         function openSelect(forceOpen = false) {
-            if (disabled.value || loading.value) {
+            if (blocked.value) {
                 return;
             }
 
@@ -643,8 +639,7 @@ export default defineComponent({
         const showClear = computed(() => {
             return props.clearable
                 && hasValue.value
-                && !disabled.value
-                && !loading.value;
+                && !blocked.value;
         });
 
         function clearSelected() {
@@ -831,7 +826,7 @@ export default defineComponent({
                     [style.focused]: !props.noBorder && (open.value || focused.value),
                     [style.fillBase]: props.fill,
                     [style.noBorder]: props.noBorder,
-                    'm-select--disabled': disabled.value || loading.value,
+                    'm-select--disabled': blocked.value,
                     'm-select--focused': open.value || focused.value,
                     'm-select--multiple': props.multiple,
                     'm-select--error': formError.value
@@ -842,7 +837,7 @@ export default defineComponent({
         function getSelectedLabel(value: string | number | []) {
             const option = props.options.find(
                 i => i[props.optionValue] === value
-            );
+            ) ?? (props.remote ? knownOptions.get(value) : undefined);
             if (!option) {
                 return null;
             }
@@ -865,6 +860,28 @@ export default defineComponent({
             }
         });
 
+        // Emit search changes. Remote searches are debounced so we don't hit the
+        // server on every keystroke; clearing the query (e.g. on close) is immediate.
+        let searchTimer: ReturnType<typeof setTimeout> | undefined;
+        watch(search, (query: string) => {
+            clearTimeout(searchTimer);
+
+            if (props.remote && props.searchDebounce > 0 && query !== '') {
+                searchTimer = setTimeout(() => emit('search', query), props.searchDebounce);
+                return;
+            }
+
+            emit('search', query);
+        });
+        onBeforeUnmount(() => clearTimeout(searchTimer));
+
+        // Remote options replace the list under the cursor, keep the highlight in range
+        watch(computedOptions, (options) => {
+            if (selectedIndex.value !== undefined && selectedIndex.value >= options.length) {
+                selectedIndex.value = 0;
+            }
+        });
+
         watch(open, (value: boolean) => {
             nextTick(() => {
                 if (!value) {
@@ -925,6 +942,7 @@ export default defineComponent({
         const isOpen = computed(() => {
             if (
                 props.multiple &&
+                !props.remote &&
                 computedOptions.value.length == 0 &&
                 !search.value
             ) {
@@ -1002,6 +1020,8 @@ export default defineComponent({
             inputListeners,
             style,
             focused,
+            blocked,
+            showRemoteLoading,
             fade,
             toggleAllItems,
             optionItemHeight,

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

@@ -1,5 +1,5 @@
 import MSelect from '../Select.vue';
-import { MSelectBasic, MSelectSearchable, MSelectMultiple, MSelectFill, MSelectClearable } from './index';
+import { MSelectBasic, MSelectSearchable, MSelectMultiple, MSelectFill, MSelectClearable, MSelectRemote } from './index';
 
 import { createStory, sizeArgType } from '../../../__storybook__';
 
@@ -16,3 +16,4 @@ 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

@@ -3,3 +3,4 @@ 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/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

@@ -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/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/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');