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

package/src/components/select-2/assets/dropdown.scss

@@ -0,0 +1,56 @@
+.ma-select-options-wrapper {
+  @apply flex flex-col gap-1 font-euclid overflow-y-auto;
+
+  &::-webkit-scrollbar {
+    @apply w-1;
+  }
+  &::-webkit-scrollbar-track {
+    @apply bg-transparent;
+  }
+  &::-webkit-scrollbar-thumb {
+    @apply outline-none rounded-2xl bg-gray-200;
+  }
+
+  .ma-select-search {
+    @apply bg-white sticky top-0 z-10;
+    .ma-input {
+      @apply border-none;
+      .ma-icon {
+        @apply text-gray-500;
+      }
+      .ak-input__wrapper {
+        @apply border-none;
+        input {
+          @apply bg-transparent;
+        }
+      }
+      &:hover,
+      &.ak-input--filled {
+        .ak-input__wrapper {
+          @apply bg-gray-100;
+        }
+      }
+    }
+  }
+
+  .vue-recycle-scroller {
+    &::-webkit-scrollbar {
+      @apply w-1;
+    }
+    &::-webkit-scrollbar-track {
+      @apply bg-transparent;
+    }
+    &::-webkit-scrollbar-thumb {
+      @apply outline-none rounded-2xl bg-gray-200;
+    }
+    .vue-recycle-scroller__item-wrapper {
+      .vue-recycle-scroller__item-view {
+        &:not(:last-child) {
+          > div {
+            @apply pb-1; // gap for virtual scroll
+          }
+        }
+      }
+    }
+  }
+}

package/src/components/select-2/assets/inline.scss

@@ -0,0 +1,49 @@
+.ma-select-2--inline {
+  .ma-select-2__selector {
+    @apply bg-white shadow-none p-0 border-none;
+    &::before {
+      @apply hidden;
+    }
+  }
+
+  &:hover {
+    .ma-select-2__selector {
+      @apply bg-white;
+    }
+  }
+
+  &.ma-select-2--disabled {
+    .ma-select-2__selector {
+      @apply bg-white;
+    }
+  }
+
+  &.ma-select-2--error {
+    .ma-select-2__selector,
+    .ma-select-2__selector:hover {
+      .ma-select-value {
+        span {
+          @apply text-red-500;
+        }
+      }
+      .ma-icon {
+        @apply text-red-500;
+      }
+    }
+  }
+
+  &.ma-select-2--small {
+    .ma-select-2__selector {
+      > .ma-icon {
+        @apply w-4 h-4;
+      }
+      .ma-select-value {
+        @apply leading-4;
+        .ma-select-placeholder,
+        .ma-select-item {
+          @apply text-xs leading-4;
+        }
+      }
+    }
+  }
+}

package/src/components/select-2/assets/option-group.scss

@@ -0,0 +1,6 @@
+.ma-select-option-group {
+  @apply flex flex-col gap-1;
+  &__label {
+    @apply text-xs font-medium text-gray-400 px-2 py-1 sticky -top-2 bg-white z-[1];
+  }
+}

package/src/components/select-2/assets/option.scss

@@ -0,0 +1,50 @@
+.ma-select-option {
+  @apply bg-white p-2 rounded-lg transition-colors duration-300 flex items-center gap-2 text-gray-900 text-sm cursor-pointer box-border;
+
+  &:hover,
+  &--highlighted {
+    @apply bg-gray-50;
+  }
+
+  &--active {
+    @apply bg-indigo-25;
+    .ma-select-option-label {
+      @apply font-medium;
+    }
+  }
+
+  &--disabled {
+    @apply bg-white cursor-not-allowed text-gray-400;
+    &:hover {
+      @apply bg-white;
+    }
+  }
+
+  &--cb-hidden {
+    .ma-checkbox,
+    .ma-toggle {
+      @apply hidden;
+    }
+  }
+
+  &--cb-right {
+    .ma-checkbox,
+    .ma-toggle {
+      @apply order-last;
+    }
+  }
+
+  .ma-checkbox {
+    .antd-checkbox {
+      @apply flex-none top-0;
+    }
+  }
+
+  .ma-select-option-label {
+    @apply w-full truncate;
+  }
+
+  .ma-selected-icon {
+    @apply ml-auto w-5 h-5 flex-none text-gray-900;
+  }
+}

package/src/components/select-2/assets/styles.scss

@@ -0,0 +1,8 @@
+@import "vue-virtual-scroller/dist/vue-virtual-scroller.css";
+@import "./default.scss";
+@import "./borderless.scss";
+@import "./inline.scss";
+@import "./dropdown.scss";
+@import "./option.scss";
+@import "./option-group.scss";
+@import "./compact.scss";

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

@@ -0,0 +1,108 @@
+<script setup lang="ts">
+import { computed, ComputedRef, inject, onMounted } from 'vue';
+import { MaSelectOptionValue, MaSelectOptionProps } from '../types';
+
+import { MaCheckbox, MaIcon, MaToggle } from '@/index';
+import { useOptionsRegistry } from '../composables/use-options-registry';
+
+const props = withDefaults(defineProps<MaSelectOptionProps>(), {
+    checkboxPosition: 'left',
+    multiSelectionInput: 'checkbox',
+});
+
+const emit = defineEmits(['selected']);
+
+const slots = defineSlots<{
+    /**
+     * Customized label area
+     */
+     default(): unknown;
+}>();
+
+const selectOption = inject<(value: string | number) => void>('selectOption', () => {
+    console.warn('selectOption function is not provided');
+});
+
+const selectedValues = inject<ComputedRef<MaSelectOptionValue[]>>('selectedValues', computed((): MaSelectOptionValue[] => {
+    console.warn('selectedValues is not provided');
+    return [];
+}));
+
+const { registerOption } = inject('optionsRegistry') as ReturnType<typeof useOptionsRegistry>;
+
+const multiple = inject<boolean>('multiple', false);
+
+const isSelected: ComputedRef<boolean> = computed(() => selectedValues.value.includes(props.value));
+
+const optionClasses = computed(() => [
+    'ma-select-option',
+    `ma-select-option--cb-${props.checkboxPosition}`,
+    {
+        'ma-select-option--disabled': props?.disabled,
+    },
+    {
+        'ma-select-option--active': isSelected.value,
+    },
+]);
+
+const showCheckIcon: ComputedRef<boolean> = computed(() => isSelected.value && !props.hideCheckIcon && !multiple);
+
+const handleSelect = () => {
+    if (props?.disabled) return;
+    selectOption(props.value);
+    emit('selected', props.value);
+};
+
+const extractTextFromSlot = (nodes: any[]): string => nodes
+    .map((node): string => {
+        if (typeof node.children === 'string') {
+            return node.children;
+        } else if (Array.isArray(node.children)) {
+            return extractTextFromSlot(node.children);
+        }
+        return '';
+    })
+    .join(' ');
+
+const getLabel = () => props.label || slots.default ? extractTextFromSlot(slots.default() as any[]): null;
+
+onMounted(() => {
+    registerOption(props.value, getLabel());
+});
+</script>
+
+<template>
+  <div
+    :class="optionClasses"
+    :aria-disabled="props?.disabled"
+    :title="props.label"
+    :data-option-value="props.value"
+    @click="handleSelect"
+  >
+    <template v-if="multiple">
+      <ma-toggle
+        v-if="props.multiSelectionInput == 'toggle'"
+        :checked="isSelected"
+        :disabled="props?.disabled"
+        size="small"
+      />
+      <ma-checkbox
+        v-else
+        :checked="isSelected"
+        :disabled="props?.disabled"
+      />
+    </template>
+    <span
+      class="ma-select-option-label"
+    >
+      <slot>
+        {{ props.label }}
+      </slot>
+    </span>
+    <ma-icon
+      v-if="showCheckIcon"
+      name="check-line"
+      class="ma-selected-icon"
+    />
+  </div>
+</template>

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

@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import { MaSelectGroupProps } from '../types';
+
+const props = withDefaults(defineProps<MaSelectGroupProps>(), {});
+</script>
+<template>
+  <div class="ma-select-option-group">
+    <span class="ma-select-option-group__label">
+      <slot name="label">
+        {{ props?.label }}
+      </slot>
+    </span>
+    <div class="ma-select-option-group__options">
+      <slot />
+    </div>
+  </div>
+</template>

package/src/components/select-2/composables/use-keyboard-navigation.ts

@@ -0,0 +1,81 @@
+import { watch, onUnmounted, Ref, ComputedRef, ref } from 'vue';
+import { MaSelectOption } from '../types';
+import { DynamicScroller } from 'vue-virtual-scroller';
+
+export function useArrowNavigation(
+    isOpen: Ref<boolean>,
+    optionList: ComputedRef<MaSelectOption[]>,
+    dynamicScrollerRef: Ref<InstanceType<typeof DynamicScroller> | null>,
+    select: (i: number) => void,
+    isDisabled: ComputedRef<boolean>
+) {
+
+    const highlightedOptionIndex = ref(null);
+
+    const handleKeydown = (event: KeyboardEvent) => {
+
+        if (typeof highlightedOptionIndex.value !== 'number') {
+            highlightedOptionIndex.value = 0;
+        }
+
+        switch (event.key) {
+            case 'ArrowUp':
+                event.preventDefault();
+                if (highlightedOptionIndex.value <= 0) {
+                    return;
+                }
+                highlightedOptionIndex.value--;
+                scrollToOption();
+                break;
+
+            case 'ArrowDown':
+                event.preventDefault();
+                if ((optionList.value.length -1) <= highlightedOptionIndex.value) {
+                    return;
+                }
+                highlightedOptionIndex.value = highlightedOptionIndex.value + 1;
+                scrollToOption();
+                break;
+
+            case 'Enter':
+                select(highlightedOptionIndex.value);
+                break;
+        }
+
+    };
+
+    const getOptionClass = (index: number) => ({
+        'ma-select-option--highlighted': index === highlightedOptionIndex.value,
+    });
+
+    const scrollToOption = () => {
+        if (dynamicScrollerRef.value) {
+            dynamicScrollerRef.value.scrollToItem(highlightedOptionIndex.value);
+        }
+    };
+
+    watch(
+        () => [isOpen.value, !isDisabled.value],
+        (values) => {
+            const isActive = values.every(Boolean);
+            if (isActive) {
+                window.addEventListener('keydown', handleKeydown);
+            } else {
+                window.removeEventListener('keydown', handleKeydown);
+                highlightedOptionIndex.value = null;
+            }
+        });
+
+    watch(
+        () => optionList.value.length,
+        () => highlightedOptionIndex.value = null
+    );
+
+    onUnmounted(() => {
+        window.removeEventListener('keydown', handleKeydown);
+    });
+
+    return {
+        getOptionClass,
+    };
+}

package/src/components/select-2/composables/use-options-registry.ts

@@ -0,0 +1,23 @@
+import { ref } from 'vue';
+import { MaSelectOptionValue } from '../types';
+
+export const useOptionsRegistry = () => {
+    const optionsMap = ref(new Map<string, string>());
+
+    const registerOption = (value: MaSelectOptionValue, label: string) => {
+        optionsMap.value.set(value.toString(), label);
+    };
+
+    const unregisterOption = (value: MaSelectOptionValue) => {
+        optionsMap.value.delete(value.toString());
+    };
+
+    const getOptionLabel = (value: MaSelectOptionValue) => optionsMap.value.get(value.toString()) || null;
+
+    return {
+        optionsMap,
+        registerOption,
+        unregisterOption,
+        getOptionLabel,
+    };
+};