@mobileaction/action-kit 1.42.7-beta.2 → 1.42.7-beta.3

package/src/components/select-2/index.vue

@@ -0,0 +1,449 @@
+<script setup lang="ts">
+import { computed, ComputedRef, provide, ref, Ref, useTemplateRef, watch, WritableComputedRef } from 'vue';
+import { MaSelectProps, MaSelectValue, MaSelectOptionValue, MaSelectOption as MaSelectOptionType } from './types';
+import isEmpty from 'lodash/isEmpty';
+import { useElementSize, MaybeElement } from '@vueuse/core';
+
+import { MaIcon, MaPopover2 as MaPopover, MaSelect2Option as MaSelectOption, MaInput } from '@/index';
+import { DynamicScroller, DynamicScrollerItem } from 'vue-virtual-scroller';
+
+import { useArrowNavigation } from './composables/use-keyboard-navigation';
+import { useOptionsRegistry } from './composables/use-options-registry';
+
+defineOptions({
+    name: 'MaSelect2',
+});
+
+const props = withDefaults(defineProps<MaSelectProps>(), {
+    size: 'small',
+    allowClear: false,
+    showSearch: false,
+    disabled: false,
+    loading: false,
+    listHeight: 256,
+    value: null,
+    dropdownProps: () => ({}),
+    options: () => [],
+    dropdownMatchSelectWidth: true,
+    searchPlaceholder: 'Search...',
+    checkboxPosition: 'left',
+    hideCheckIcon: false,
+    multiSelectionInput: 'checkbox',
+    compact: false,
+    multiple: false,
+    hideSuffix: false,
+    disableKeywordActions: false,
+});
+
+const emit = defineEmits([
+    'update:value',
+    'change',
+    'dropdownVisibleChange',
+    'searchValueChange',
+    'cleared',
+]);
+
+const slots = defineSlots<{
+    /**
+     * Slot for the prefix icon for the select component
+     */
+    'prefix-icon'(): unknown;
+
+    /**
+     * The input area for the select component.
+     */
+    input(): unknown;
+
+    /**
+     * Suffix icon slot for the select component.
+     */
+    'suffix-icon'(): unknown;
+
+    /**
+     * The hint area slot for the bottom of the select input.
+     */
+    hint(): unknown;
+
+    /**
+     * Customize dropdown content, virtual scroll does not work with this mode
+     */
+    default(): unknown;
+
+    /**
+     * Slot for each option in the dropdown
+     */
+    option(option: MaSelectOptionType): unknown;
+
+    /**
+     * Customize dropdown header area
+     */
+    header(): unknown;
+
+    /**
+     * Customize dropdown footer area
+     */
+    footer(): unknown;
+
+}>();
+
+const optionsRegistry = useOptionsRegistry();
+
+const isOpen: Ref<boolean> = ref(props.open);
+const selectInput: Ref<MaybeElement> = useTemplateRef('selectInputEl');
+const searchInput: Ref<InstanceType<typeof MaInput> | null> = useTemplateRef('searchInputEl');
+const { width: selectInputWidth } = useElementSize(selectInput);
+const filterTerm = ref('');
+const isInputHover = ref(false);
+const dynamicScrollerRef = useTemplateRef<InstanceType<typeof DynamicScroller> | null>('dynamicScrollerEl');
+const overlayElement = useTemplateRef('overlay');
+const searchFocused = ref(false);
+
+const modelValue: WritableComputedRef<MaSelectValue> = computed({
+    get() {
+        return props.value;
+    },
+    set(data){
+        emit('update:value', data);
+        emit('change', data);
+    },
+});
+
+const isEmptyValue: ComputedRef<boolean> = computed(
+    () => typeof modelValue.value !== 'number' && isEmpty(modelValue.value)
+);
+
+const showPlaceholder: ComputedRef<boolean> = computed(
+    () => props.placeholder && isEmptyValue.value
+);
+
+const showHintText: ComputedRef<boolean> = computed(
+    () => Boolean(props?.hint || slots?.hint)
+);
+
+const showClearButton: ComputedRef<boolean> = computed(
+    () => !props.disabled && isInputHover.value && props.allowClear && !!selectedValues.value.length
+);
+
+const suffixIconName = computed(() => {
+    if (props.loading) {
+        return 'loader';
+    }
+    return isOpen.value ? 'chevron-up' : 'chevron-down';
+});
+
+const dropdownStyles = computed(() => [
+    {
+        width: props.dropdownMatchSelectWidth ? `${selectInputWidth.value}px` : undefined,
+        maxHeight: `${props.listHeight}px`,
+    },
+]);
+const selectedValues: ComputedRef<MaSelectOptionValue[]> = computed(
+    () => Array.isArray(modelValue.value)? modelValue.value: [modelValue.value ?? []].flat()
+);
+
+const selectClasses = computed(() => [
+    'ma-select-2',
+    `ma-select-2--${props.size}`,
+    { 'ma-select-2--disabled': props.disabled },
+    { 'ma-select-2--empty': isEmptyValue.value },
+    { 'ma-select-2--opened': isOpen.value },
+    { 'ma-select-2--error': props?.hasError },
+    { 'ma-select-2--borderless': props?.borderless },
+    { 'ma-select-2--inline': props?.inline },
+    { 'ma-select-2--compact': props?.compact },
+    { 'ma-select-2--clearable': showClearButton.value },
+    { 'ma-select-2--loading': props.loading },
+]);
+
+const overlayClasses = computed(() => [
+    'ma-select-options-wrapper',
+    props.dropdownClassName,
+]);
+
+const selectedLabel = computed(
+    () => selectedValues.value.length <= 1?
+        getOptionLabel(selectedValues.value[0]) || null:
+        `${selectedValues.value.length} items selected`
+);
+
+const optionList: ComputedRef<MaSelectOptionType[]> = computed(() =>
+    props.options.length? props.options : Array.from(optionsRegistry.optionsMap.value, ([key, value]) => ({ value: key, label: value }))
+);
+
+const filteredOptions: ComputedRef<MaSelectOptionType[]> = computed(() =>
+    props.showSearch && filterTerm.value
+        ? optionList.value.filter(({ label }) => label.toLowerCase().includes(filterTerm.value.toLowerCase()))
+        : optionList.value
+);
+
+const isPopoverDisabled = computed(() => props.disabled || props.loading);
+
+// Ensures an initial render for option registration when using the default slot without any options.
+const shouldRenderFallbackSlot = computed(() => !isOpen.value && !props.options.length);
+
+const keywordNavigationDisabled = computed(() => (props.disableKeywordActions || searchFocused.value));
+
+const toggleOpen = () => {
+    if (isPopoverDisabled.value) return;
+    isOpen.value = !isOpen.value;
+};
+
+const selectOption = (value: MaSelectOptionValue): void => {
+    if (props.multiple) {
+        handleMultipleSelection(value);
+    } else {
+        handleSingleSelection(value);
+    }
+};
+
+const handleMultipleSelection = (value: MaSelectOptionValue): void => {
+    if (!Array.isArray(modelValue.value)) {
+        modelValue.value = [value] as MaSelectValue;
+        return;
+    }
+    const isSelected = (modelValue.value as MaSelectOptionValue[]).includes(value);
+    modelValue.value = isSelected
+        ? modelValue.value.filter(v => v !== value) as MaSelectValue
+        : [...modelValue.value, value] as MaSelectValue;
+};
+
+const handleSingleSelection = (value: MaSelectOptionValue): void => {
+    modelValue.value = value;
+    toggleOpen();
+};
+
+const clearValue = (e: Event) => {
+    e.stopPropagation();
+    modelValue.value = (props.multiple? []: null) as MaSelectValue;
+    emit('cleared');
+};
+
+const getOptionLabel = (value: MaSelectOptionValue) => optionList.value.find(_opt => _opt.value == value)?.label;
+const onInputHover = () => isInputHover.value = true;
+const onInputHoverEnd = () => isInputHover.value = false;
+
+const onVirtualScrollVisible = async () => {
+    const firstSelectedIndex = optionList.value.findIndex(({ value }) => value == selectedValues.value?.[0]);
+    if (firstSelectedIndex < 0 && dynamicScrollerRef.value) return;
+    dynamicScrollerRef.value.scrollToItem(firstSelectedIndex); //auto scroll to first selected option
+};
+
+const handleKeydownEnter = (optionIndex: number) => {
+    const value = filteredOptions.value?.[optionIndex]?.value;
+    if (typeof value === 'undefined' || filteredOptions.value?.[optionIndex]?.disabled) return;
+    selectOption(value);
+};
+
+/**
+ * This function scrolls to the first selected item in the option list.
+ * It works when virtual scrolling is not enabled.
+ */
+const scroll2SelectedItem = () => {
+    const firstSelectedValue = selectedValues.value?.[0];
+    if (!firstSelectedValue || !overlayElement.value) return;
+
+    const firstSelectedOptEl = overlayElement.value.querySelector(`[data-option-value="${firstSelectedValue}"]`) as HTMLElement;
+    if (firstSelectedOptEl) {
+        overlayElement.value.scrollTo({
+            top: firstSelectedOptEl.offsetTop,
+        });
+    }
+};
+
+const { getOptionClass } = useArrowNavigation(
+    isOpen,
+    filteredOptions,
+    dynamicScrollerRef,
+    handleKeydownEnter,
+    keywordNavigationDisabled
+);
+
+const onDropdownVisibilityChange = async (status: boolean) => {
+    isOpen.value = status;
+    if (searchInput.value) {
+        searchInput.value.focus();
+    }
+};
+
+const onSearchValueChange = () => emit('searchValueChange', filterTerm.value);
+const setSearchValue = (value = '') => filterTerm.value = value;
+const onSearchFocusChanged = (isFocused = false) => searchFocused.value = isFocused;
+
+provide('optionsRegistry', optionsRegistry);
+provide('selectOption', selectOption);
+provide('selectedValues', selectedValues);
+provide('multiple', props.multiple);
+
+defineExpose({
+    setSearchValue,
+});
+
+watch(
+    () => props.open,
+    toggleOpen
+);
+
+watch(
+    isOpen,
+    async () => {
+        emit('dropdownVisibleChange', isOpen.value);
+        if (isOpen.value && slots?.default) {
+            scroll2SelectedItem();
+        }
+    }
+);
+</script>
+<template>
+  <div :class="selectClasses">
+    <ma-popover
+      :visible="isOpen"
+      v-bind="props.dropdownProps"
+      :disabled="isPopoverDisabled"
+      :no-auto-focus="true"
+      :dispose-timeout="-1"
+      @visible-change="onDropdownVisibilityChange"
+    >
+      <button
+        ref="selectInputEl"
+        class="ma-select-2__selector"
+        tabindex="0"
+        @mouseover="onInputHover"
+        @mouseleave="onInputHoverEnd"
+      >
+        <slot name="prefix-icon">
+          <ma-icon
+            v-if="$slots['prefix-icon'] || props.prefixIcon"
+            :name="props.prefixIcon"
+            size="sm"
+            class="ma-select-prefix-icon"
+          />
+        </slot>
+        <div class="ma-select-value">
+          <slot
+            name="input"
+            :label="selectedLabel"
+          >
+            <span
+              v-if="showPlaceholder"
+              class="ma-select-placeholder"
+            >
+              {{ props.placeholder }}
+            </span>
+            <span
+              v-else
+              class="ma-select-item"
+            >
+              {{ selectedLabel }}
+            </span>
+          </slot>
+        </div>
+        <slot
+          v-if="!props.hideSuffix"
+          name="suffix-icon"
+        >
+          <div class="ma-select-suffix-icon">
+            <ma-icon
+              :name="suffixIconName"
+              :spin="props.loading"
+              size="xs"
+            />
+          </div>
+        </slot>
+        <ma-icon
+          v-if="showClearButton"
+          name="close"
+          size="xs"
+          class="ma-clear-icon"
+          @click="clearValue"
+        />
+      </button>
+      <template #overlay>
+        <div
+          ref="overlay"
+          :class="overlayClasses"
+          :style="dropdownStyles"
+        >
+          <slot name="header" />
+          <template v-if="$slots?.default">
+            <slot
+              :options="optionList"
+              :select="selectOption"
+            />
+          </template>
+          <template v-else>
+            <div
+              v-if="props.showSearch"
+              class="ma-select-search"
+            >
+              <ma-input
+                ref="searchInputEl"
+                v-model:value="filterTerm"
+                autofocus
+                :placeholder="props.searchPlaceholder"
+                prefix-icon="search-normal"
+                allow-clear
+                size="small"
+                @change="onSearchValueChange"
+                @focusout="onSearchFocusChanged(false)"
+                @focus="onSearchFocusChanged(true)"
+              />
+            </div>
+            <dynamic-scroller
+              ref="dynamicScrollerEl"
+              :items="filteredOptions"
+              :min-item-size="40"
+              key-field="value"
+              emit-update
+              @visible="onVirtualScrollVisible"
+            >
+              <template #default="{ item, index, active }">
+                <dynamic-scroller-item
+                  :key="item.value"
+                  :item="item"
+                  :active="active"
+                  :data-index="index"
+                >
+                  <ma-select-option
+                    :key="index"
+                    :checkbox-display="props.checkboxPosition"
+                    :hide-check-icon="props.hideCheckIcon"
+                    :multi-selection-input="props.multiSelectionInput"
+                    :class="getOptionClass(index)"
+                    :value="item.value"
+                    :disabled="item?.disabled"
+                    :label="item.label"
+                  >
+                    <slot
+                      name="option"
+                      :option="item"
+                    />
+                  </ma-select-option>
+                </dynamic-scroller-item>
+              </template>
+            </dynamic-scroller>
+          </template>
+          <slot name="footer" />
+        </div>
+      </template>
+    </ma-popover>
+    <div
+      v-if="showHintText"
+      class="ma-select-2__hint"
+    >
+      <slot name="hint">
+        <ma-icon
+          name="info-circle-bold"
+          size="xs"
+        />
+        <span>{{ props?.hint }}</span>
+      </slot>
+    </div>
+    <div
+      v-if="shouldRenderFallbackSlot"
+      class="hidden"
+    >
+      <slot />
+    </div>
+  </div>
+</template>
+<style lang="scss" src="./assets/styles.scss"></style>