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

package/src/components/select/components/dropdownRender.vue

@@ -0,0 +1,70 @@
+<script lang="ts">
+export default {
+    name: 'MaDropdownRender',
+};
+</script>
+<script setup lang="ts">
+import { VNode, computed } from 'vue';
+import { MaLinkButton, MaIcon, MaInput } from '@/index';
+
+const props = defineProps({
+    menu: {
+        type: Object as () => VNode,
+        required: true,
+    },
+    filter: {
+        type: String,
+        default: '',
+    },
+    showSearch: {
+        type: Boolean,
+    },
+});
+
+const emits = defineEmits(['update:filter', 'closeDropdown']);
+
+const VNodes = (_: unknown, { attrs }: { attrs: { vnodes: VNode[] } }): VNode[] => {
+    return attrs.vnodes;
+};
+
+const filterTerm = computed({
+    get(){
+        return props.filter;
+    },
+    set(value){
+        emits('update:filter', value);
+    },
+});
+
+const close = () => {
+    emits('closeDropdown');
+};
+
+</script>
+
+<template>
+  <div class="dropdown-wrapper">
+    <div class="mobile-header">
+      <ma-icon
+        size="lg"
+        name="close-circle"
+        @click="close"
+      />
+      <label>Select</label>
+      <ma-link-button
+        color="gray"
+        @click="close"
+      >
+        Done
+      </ma-link-button>
+    </div>
+    <ma-input
+      v-if="showSearch"
+      v-model:value="filterTerm"
+      autofocus
+      placeholder="Search..."
+      prefix-icon="search-normal"
+    />
+    <v-nodes :vnodes="menu" />
+  </div>
+</template>

package/src/components/select/components/option.vue

@@ -0,0 +1,19 @@
+<script lang="ts">
+export default {
+  name: 'MaSelectOption',
+};
+</script>
+<script setup lang="ts">
+import { SelectOption } from "ant-design-vue";
+</script>
+<template>
+    <select-option
+        v-bind="$attrs"
+        class="ma-select-option"
+        prefix-cls="antd-select"
+    >
+        <template v-for="(_, slot) in $slots" v-slot:[slot]>
+            <slot :name="slot" />
+        </template>
+    </select-option>
+</template>

package/src/components/select/components/optionCheckbox.vue

@@ -0,0 +1,31 @@
+<script lang="ts">
+export default {
+    name: 'MaOptionCheckbox',
+};
+</script>
+<script setup lang="ts">
+import MaCheckbox from "@/components/checkbox/index.vue";
+import MaToggle from "@/components/toggle/index.vue";
+
+defineProps({
+    checked: { type: Boolean },
+    isToggle: { type: Boolean },
+})
+
+</script>
+
+<template>
+    <ma-checkbox
+        v-if="!isToggle"
+        :checked="checked"
+    />
+    <ma-toggle
+        v-else
+        :checked="checked"
+        size="small"
+    />
+</template>
+
+<style scoped lang="scss">
+
+</style>

package/src/components/select/index.vue

@@ -0,0 +1,506 @@
+<script lang="ts">
+export default {
+    name: 'MaSelect',
+};
+</script>
+<script setup lang="ts">
+import { ComputedRef, WritableComputedRef, computed, ref, useAttrs, useSlots, watch } from 'vue';
+import { DefaultOptionType } from 'ant-design-vue/lib/select';
+import {
+    SelectSize,
+    SelectMode,
+    CheckboxPlacement,
+    CheckboxPlacementRight,
+    MultiSelectOption,
+    MultiSelectOptionCheckbox,
+    SelectOptionType,
+    SelectOptionTypeRadio,
+} from './types';
+import { isEmpty } from 'lodash';
+import { useSSR } from '@/composables/ssr';
+
+import { Select as ASelect, SelectProps } from 'ant-design-vue';
+import MaIcon from '../icon/index.vue';
+import DropdownRender from './components/dropdownRender.vue';
+import MaTooltip from '@/components/tooltip/index.vue';
+import MaRadio from '@/components/radio/index.vue';
+import MaOptionCheckbox from '@/components/select/components/optionCheckbox.vue';
+
+export interface MaSelectProps {
+    allowClear?: boolean,
+    autoClearSearchValue?: boolean,
+    autofocus?: boolean,
+    clearIcon?: string,
+    defaultOpen?: boolean,
+    dropdownClassName?: string,
+    disabled?: boolean,
+    loading?: boolean,
+    menuItemSelectedIcon?: string,
+    mode?: SelectMode,
+    optionFilterProp?: string,
+    optionLabelProp?: string,
+    options?: DefaultOptionType[] | undefined,
+    placeholder?: string,
+    removeIcon?: string,
+    searchValue?: string,
+    showSearch?: boolean,
+    size?: SelectSize,
+    suffixIcon?: string,
+    showArrow?: boolean,
+    prefixIcon?: string,
+    open?: boolean,
+    value?: string|number|string[]|number[]
+    listHeight?: number,
+    dropdownMatchSelectWidth?: boolean|number,
+    hintText?:string,
+    borderless?: boolean
+    error?: boolean;
+    optionItemRounded?: boolean;
+    selectOptionType?: SelectOptionType,
+    checkboxPlacement?: CheckboxPlacement,
+    multiSelectOptionType?: MultiSelectOption,
+    ignoreMobileDisplay?: boolean,
+}
+
+const props = withDefaults(defineProps<MaSelectProps>(), {
+    autoClearSearchValue: true,
+    open: false,
+    size: 'default',
+    value: '',
+    listHeight: 252,
+    dropdownMatchSelectWidth: true,
+    showArrow: true,
+    borderless: false,
+    menuItemSelectedIcon: 'check-line',
+    selectOptionType: 'tick',
+    checkboxPlacement: 'right',
+    multiSelectOptionType: 'checkbox',
+});
+
+const emits = defineEmits([
+    'update:value',
+    'dropdownVisibleChange',
+]);
+
+const slots = useSlots();
+const attrs = useAttrs();
+const { hasWindow } = useSSR();
+
+const modelValue :WritableComputedRef<string | number | (string | number)[]> = computed({
+    get(){
+        return props.value;
+    },
+    set(value){
+        emits('update:value', (typeof value !== 'number' && isEmpty(value)) && !props.mode? null: value);
+    },
+});
+
+const customFilterTerm = ref(props?.searchValue);
+const isOpen = ref(props.open);
+
+const isCustomRender = computed(() => ['dropdownRender', 'top-section', 'bottom-section'].some(slot => Object.keys(slots).includes(slot)) || props.showSearch);
+
+const selectedOptionData = computed(() => {
+    if (!props.options || modelValue.value === undefined) {
+        return { icon: null, imageSrc: null };
+    }
+    const values = [modelValue.value];
+    const currentOption = props.options.find(option => values.includes(option.value));
+
+    return {
+        icon: currentOption ? currentOption.icon : null,
+        imageSrc: currentOption ? currentOption.imageSrc : null,
+    };
+});
+
+const selectionCount = computed(() => Array.isArray(modelValue.value) ? modelValue.value.length : 0);
+const selectionDisplayText = computed(() => {
+    if (selectionCount.value === 0) return '';
+    return selectionCount.value === 1 ? '1 item selected' : `${selectionCount.value} items selected`;
+});
+
+const classNames = computed(() => [
+    'ma-select',
+    `ma-select--${props.size}`,
+    {
+        'ma-select--has-prefix': (props.mode !== 'multiselect' && props.mode ) ? false: slots?.prefixIcon || props?.prefixIcon,
+    },
+    {
+        'ma-select--selected': modelValue.value,
+    },
+    {
+        'ma-select--custom-render': isCustomRender,
+    },
+    {
+        'ma-select--error': props.error,
+    },
+    {
+        'ma-select--borderless': props.borderless,
+    },
+    {
+        'ma-select--multi-select': props.mode === 'multiselect',
+    },
+    {
+        'ma-select--multi-select-selection-done': props.mode === 'multiselect' && !!selectionCount.value,
+    },
+]);
+
+const hintClassNames = computed(() => [
+    'ma-select-hint',
+    {
+        'ma-select-hint-disabled': props.disabled,
+    },
+    {
+        'ma-select-hint-error': props.error,
+    },
+]);
+const antSearchStatus = computed(() => !isCustomRender.value && props?.showSearch);
+
+const antMode = computed(() => props?.mode && props.mode === 'multiselect'? 'multiple': props?.mode);
+
+const dropdownClassNames = computed(() => {
+    const baseClass = props?.mode !== 'multiselect' && 'ma-select-dropdown' || 'ma-multi-select-dropdown';
+    const hasPrefixClass = !props?.mode && (slots?.prefixIcon || props?.prefixIcon) && 'ma-select-dropdown--has-prefix';
+    const radioOptionClass = props?.mode !== 'multiselect' && props.selectOptionType === SelectOptionTypeRadio && 'ma-select-dropdown--with-radio-option';
+    const ignoreMobileDisplayClass = props?.ignoreMobileDisplay && '--ignore-mobile-display';
+
+    return [
+        props?.dropdownClassName,
+        baseClass,
+        hasPrefixClass,
+        radioOptionClass,
+        ignoreMobileDisplayClass,
+    ].filter(Boolean).join(' ');
+});
+
+const suffixIcon = computed(() => props?.loading? 'loader': props?.suffixIcon);
+
+const dynamicSlots: ComputedRef<string[]> = computed(() => Object.keys(slots).filter(slotName => !['option', 'dropdownRender'].includes(slotName)));
+
+const arrowDisplayStatus: ComputedRef<boolean> = computed(() => props?.showArrow && (!props?.mode || props?.mode === 'multiselect') );
+
+const isCheckPlacementRight: ComputedRef<boolean> = computed(() => props.checkboxPlacement === CheckboxPlacementRight);
+const isOptionToggle: ComputedRef<boolean> = computed(() => props.multiSelectOptionType !== MultiSelectOptionCheckbox);
+const isOptionRadio: ComputedRef<boolean> = computed(() => props.selectOptionType === SelectOptionTypeRadio);
+
+const bindings = computed(() => ({
+    ...attrs,
+    ...props,
+    disabled: props?.disabled || props?.loading,
+    dropdownClassName: dropdownClassNames.value,
+    searchValue: customFilterTerm.value || undefined,
+    showSearch: antSearchStatus.value,
+    showArrow: arrowDisplayStatus.value,
+    mode: antMode.value,
+    open: isOpen.value,
+    maxTagCount: 0,
+    listHeight: getListHeight(),
+    prefixCls: 'antd-select',
+    class: classNames.value,
+    suffixIcon: undefined,
+    removeIcon: undefined,
+    menuItemSelectedIcon: undefined,
+} as unknown as SelectProps));
+
+const dropdownVisibleChange = (visible: boolean) => {
+    isOpen.value = visible;
+    customFilterTerm.value = '';
+};
+
+const getListHeight = (): number => (hasWindow.value && (typeof window.orientation !== 'undefined' || navigator.userAgent.includes('Mobile')))? window.innerHeight : props?.listHeight;
+const handleCheckboxChange = (e: MouseEvent ,optionValue: string | number, isDisabled = false) => {
+    if (!optionValue) return;
+    e.stopPropagation();
+    if (isDisabled) return;
+    let newValue: any[] = Array.isArray(modelValue.value) ? [...modelValue.value] : [];
+
+    if ((modelValue.value as Array<string | number>)?.includes(optionValue)) {
+        newValue = newValue.filter(v => v !== optionValue);
+    } else {
+        newValue.push(optionValue);
+    }
+    modelValue.value = newValue;
+};
+
+const closeDropdown = () => {
+    isOpen.value = false;
+};
+const handleSelectClick = () => {
+    isOpen.value = !isOpen.value;
+};
+watch(
+    isOpen,
+    (status) => emits('dropdownVisibleChange', status)
+);
+
+watch(
+    () => props.open,
+    (status) => {
+        if (isOpen.value !== status) {
+            isOpen.value = status;
+        }
+    }
+);
+
+watch(modelValue, (newValue) => {
+    if (props.mode === 'multiselect' && (newValue === '')) {
+        modelValue.value = [];
+    }
+}, { deep: true });
+
+</script>
+<template>
+  <template v-if="slots.label">
+    <slot
+      name="label"
+      class="ma-select-label"
+    />
+  </template>
+  <a-select
+    v-model:value="modelValue"
+    v-bind="$attrs"
+    :class="classNames"
+    :dropdown-match-select-width="dropdownMatchSelectWidth"
+    :allow-clear="props?.allowClear"
+    :auto-clear-search-value="props?.autoClearSearchValue"
+    :autofocus="props?.autofocus"
+    :default-open="props?.defaultOpen"
+    :disabled="props?.disabled || props?.loading"
+    :dropdown-class-name="dropdownClassNames"
+    :loading="props?.loading"
+    :option-filter-prop="props?.optionFilterProp"
+    :option-label-prop="props?.optionLabelProp"
+    :options="props?.options"
+    :placeholder="props?.placeholder"
+    :search-value="customFilterTerm || undefined"
+    :show-search="antSearchStatus"
+    :show-arrow="arrowDisplayStatus"
+    :mode="antMode as any"
+    :list-height="getListHeight()"
+    :size="props?.size as any"
+    :open="isOpen"
+    :error="props?.error"
+    :max-tag-count="0"
+    prefix-cls="antd-select"
+    @dropdown-visible-change="dropdownVisibleChange"
+  >
+    <template
+      v-for="(slotName) in dynamicSlots"
+      #[slotName]="scope"
+    >
+      <slot
+        :name="slotName"
+        v-bind="scope ?? {}"
+      />
+    </template>
+    <template
+      v-if="$slots.option && mode !== 'multiselect'"
+      #option="scope"
+    >
+      <slot
+        name="option"
+        v-bind="scope"
+      />
+    </template>
+    <template
+      v-else-if="!$slots.default"
+      #option="option"
+    >
+      <div
+        v-if="props.mode === 'multiselect'"
+        class="ma-multi-select-option"
+        @click="handleCheckboxChange($event, option.value, option?.disabled)"
+      >
+        <div class="flex gap-2">
+          <ma-option-checkbox
+            v-if="!isCheckPlacementRight && !option?.options"
+            :checked="Array.isArray(modelValue) && modelValue.includes(option.value)"
+          />
+          <div class="items-center flex justify-start gap-2">
+            <ma-icon
+              v-if="option?.icon"
+              class="flex-shrink-0"
+              :round="optionItemRounded"
+              :name="option.icon"
+              size="md"
+            />
+            <img
+              v-else-if="option?.imageSrc"
+              :src="option.imageSrc"
+            >
+            <slot
+              v-if="$slots.option"
+              name="option"
+              v-bind="option"
+            />
+            <div
+              v-else
+              class="grid"
+            >
+              <ma-tooltip
+                type="primary"
+                :mouse-enter-delay="1.5"
+              >
+                <template #title>
+                  {{ option.label }}
+                </template>
+                <div class="whitespace-nowrap overflow-hidden text-ellipsis">
+                  {{ option.label }}
+                </div>
+              </ma-tooltip>
+              <span
+                v-if="option.description"
+                class="text-xs text-gray-500 font-normal whitespace-nowrap overflow-hidden text-ellipsis"
+              >{{ option.description }}</span>
+            </div>
+          </div>
+        </div>
+        <ma-option-checkbox
+          v-if="isCheckPlacementRight && !option?.options"
+          :checked="Array.isArray(modelValue) && modelValue.includes(option.value)"
+          :is-toggle="isOptionToggle"
+        />
+      </div>
+      <template v-else>
+        <div class="select-option">
+          <ma-icon
+            v-if="option?.icon"
+            :round="optionItemRounded"
+            size="sm"
+            :name="option.icon"
+          />
+          <img
+            v-else-if="option?.imageSrc"
+            :src="option.imageSrc"
+          >
+          <div class="grid">
+            {{ option.label }}
+            <span
+              v-if="option.description"
+              class="text-xs text-gray-500 font-normal"
+            >{{ option.description }}</span>
+          </div>
+        </div>
+        <ma-radio
+          v-if="isOptionRadio"
+          :checked="option.value === modelValue"
+        />
+      </template>
+    </template>
+    <template #suffixIcon>
+      <ma-icon
+        :spin="props?.loading"
+        :name="suffixIcon || 'chevron-down'"
+        @click="handleSelectClick"
+      />
+      <div
+        v-if="!selectionDisplayText"
+        class="prefix-icon"
+        @click="handleSelectClick"
+      >
+        <template v-if="selectedOptionData.imageSrc">
+          <img
+            :src="selectedOptionData.imageSrc"
+            alt="Selected Option Image"
+          >
+        </template>
+        <template v-else-if="selectedOptionData.icon">
+          <ma-icon
+            size="sm"
+            :round="optionItemRounded"
+            :name="selectedOptionData.icon"
+          />
+        </template>
+        <template v-else>
+          <slot name="prefixIcon">
+            <ma-icon
+              v-if="props?.prefixIcon"
+              :name="props?.prefixIcon"
+            />
+          </slot>
+        </template>
+      </div>
+    </template>
+    <template #removeIcon>
+      <ma-icon :name="props?.removeIcon || 'close'" />
+    </template>
+    <template
+      v-if="props?.clearIcon"
+      #clearIcon
+    >
+      <ma-icon
+        v-if="props?.clearIcon"
+        :name="props?.clearIcon"
+      />
+    </template>
+    <template
+      v-if="props?.menuItemSelectedIcon"
+      #menuItemSelectedIcon
+    >
+      <ma-icon
+        v-if="props.mode !== 'multiselect'"
+        :name="props?.menuItemSelectedIcon"
+      />
+    </template>
+    <template
+      v-if="!$slots.notFoundContent"
+      #notFoundContent
+    >
+      <ma-icon
+        size="sm"
+        name="warning"
+      /> No result found!
+    </template>
+    <template
+      v-if="isCustomRender"
+      #dropdownRender="{ menuNode: menu }"
+    >
+      <template v-if="$slots.dropdownRender">
+        <slot
+          name="dropdownRender"
+          v-bind="{ menuNode: menu }"
+        />
+      </template>
+      <template v-else>
+        <slot name="top-section" />
+        <dropdown-render
+          v-model:filter="customFilterTerm"
+          :menu="menu"
+          :show-search="showSearch"
+          @close-dropdown="closeDropdown"
+        />
+        <slot name="bottom-section" />
+      </template>
+    </template>
+    <template #maxTagPlaceholder="scope">
+      <template v-if="$slots.maxTagPlaceholder">
+        <slot
+          name="maxTagPlaceholder"
+          v-bind="scope"
+        />
+      </template>
+      <div
+        v-else-if="props.mode === 'multiselect'"
+        class="prefix-icon multi-selection-display-text"
+      >
+        <slot name="multiSelectionDisplayText">
+          {{ selectionDisplayText }}
+        </slot>
+      </div>
+      <template v-else>
+        {{ selectionDisplayText }}
+      </template>
+    </template>
+  </a-select>
+  <div
+    v-if="props.hintText"
+    :class="hintClassNames"
+  >
+    <ma-icon
+      size="xs"
+      name="info-circle-bold"
+    />
+    {{ hintText }}
+  </div>
+</template>
+<style lang="scss" src="./assets/styles.scss"></style>