@mekari/pixel3-autocomplete 0.0.0

package/dist/chunk-OX7ZBBEQ.mjs

@@ -0,0 +1,126 @@
+// src/modules/autocomplete.props.ts
+var autocompleteProps = {
+  id: {
+    type: String,
+    default: ""
+  },
+  data: {
+    type: [Array],
+    default: () => []
+  },
+  modelValue: {
+    type: [Number, String, Object, Array]
+  },
+  defaultValue: [Number, String, Object],
+  placeholder: {
+    type: String
+  },
+  labelProp: {
+    type: String,
+    default: "value"
+  },
+  valueProp: {
+    type: String,
+    default: "value"
+  },
+  isReadOnly: {
+    type: [Boolean],
+    default: false
+  },
+  isDisabled: {
+    type: [Boolean],
+    default: false
+  },
+  isInvalid: {
+    type: [Boolean],
+    default: false
+  },
+  isRequired: {
+    type: [Boolean],
+    default: false
+  },
+  isFullWidth: {
+    type: [Boolean],
+    default: true
+  },
+  isLoading: {
+    type: [Boolean],
+    default: false
+  },
+  isContentLoading: {
+    type: [Boolean],
+    default: false
+  },
+  isClearable: {
+    type: [Boolean],
+    default: false
+  },
+  isSearchable: {
+    type: [Boolean],
+    default: false
+  },
+  contentAttrs: {
+    type: Object
+  },
+  emptyText: {
+    type: [String],
+    default: "No result found"
+  },
+  contentLoadingText: {
+    type: [String],
+    default: "Loading"
+  },
+  isInfinityScroll: {
+    type: [Boolean],
+    default: false
+  },
+  isManualFilter: {
+    type: [Boolean],
+    default: false
+  },
+  usePortal: {
+    type: Boolean,
+    default: false
+  },
+  isShowButtonAction: {
+    type: Boolean,
+    default: false
+  },
+  buttonActionText: {
+    type: String,
+    default: "Button"
+  },
+  isGroupSuggestions: {
+    type: Boolean,
+    default: false
+  },
+  groupKey: {
+    type: String,
+    default: "group"
+  },
+  keyCode: {
+    type: Array,
+    default: () => ["Enter"]
+  },
+  isRawValue: {
+    type: [Boolean],
+    default: false
+  },
+  isListItemActiveFunction: {
+    type: Function
+  },
+  isKeepAlive: {
+    type: Boolean,
+    default: true
+  },
+  isAdaptiveWidth: {
+    type: Boolean,
+    default: true
+  }
+};
+var autocompleteEmit = ["update:modelValue", "input", "change", "enter", "scrollEnd", "buttonAction"];
+
+export {
+  autocompleteProps,
+  autocompleteEmit
+};

package/dist/chunk-QZ7VFGWC.mjs

@@ -0,0 +1,6 @@
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+
+export {
+  __name
+};

package/dist/chunk-XA465WRM.mjs

@@ -0,0 +1,111 @@
+import {
+  useAutocomplete
+} from "./chunk-YGOZYS5H.mjs";
+import {
+  autocompleteProps
+} from "./chunk-OX7ZBBEQ.mjs";
+
+// src/autocomplete.tsx
+import { createTextVNode as _createTextVNode, createVNode as _createVNode } from "vue";
+import { defineComponent } from "vue";
+import { MpPopover, MpPopoverTrigger, MpPopoverContent, MpPopoverList, MpPopoverListItem } from "@mekari/pixel3-popover";
+import { MpInput, MpInputGroup, MpInputRightAddon, MpInputLeftAddon } from "@mekari/pixel3-input";
+import { MpSpinner } from "@mekari/pixel3-spinner";
+import { MpIcon } from "@mekari/pixel3-icon";
+import { MpText } from "@mekari/pixel3-text";
+import { flex } from "@mekari/pixel3-styled-system/patterns";
+import { css } from "@mekari/pixel3-styled-system/css";
+var MpAutocomplete = defineComponent({
+  name: "MpAutocomplete",
+  props: autocompleteProps,
+  emits: ["update:modelValue", "input", "change", "enter", "scrollEnd", "buttonAction"],
+  setup(props, {
+    emit,
+    slots
+  }) {
+    const {
+      getSuggestionDatas,
+      getGroupSuggestions,
+      currentSearch,
+      scrollEndNode,
+      rootAtrrs,
+      popoverAtrrs,
+      popoverContentAtrrs,
+      inputAtrrs,
+      buttonActionAttrs,
+      emptyTextAttrs,
+      contentLoadingAttrs,
+      popoverListItemAttrs,
+      getLabel
+    } = useAutocomplete(props, emit);
+    return () => {
+      const suggestionsNode = !props.isGroupSuggestions ? getSuggestionDatas.value.map((item, index) => {
+        return _createVNode(MpPopoverListItem, popoverListItemAttrs(item, index), {
+          default: () => [slots.default ? slots.default({
+            item
+          }) : getLabel(item)]
+        });
+      }) : getGroupSuggestions.value.map((group, groupIndex) => {
+        return _createVNode("div", {
+          "key": groupIndex,
+          "data-category": group.key,
+          "class": flex({
+            direction: "column",
+            alignItems: "start",
+            width: "full"
+          })
+        }, [slots.group ? slots.group({
+          group
+        }) : _createVNode(MpText, {
+          "size": "body-small",
+          "color": "gray.600",
+          "class": css({
+            px: 3,
+            py: 2
+          })
+        }, {
+          default: () => [group.key]
+        }), group.values.map((item) => {
+          return _createVNode(MpPopoverListItem, popoverListItemAttrs(item, item.index), {
+            default: () => [slots.default ? slots.default({
+              item
+            }) : getLabel(item)]
+          });
+        })]);
+      });
+      const buttonActionNode = props.isShowButtonAction && _createVNode("button", buttonActionAttrs.value, [_createTextVNode(" "), slots.buttonAction ? slots.buttonAction(getSuggestionDatas.value, currentSearch.value) : props.buttonActionText, _createTextVNode(" ")]);
+      const emptyTextNode = _createVNode(MpText, emptyTextAttrs, {
+        default: () => [_createTextVNode(" "), props.emptyText, _createTextVNode(" ")]
+      });
+      const contentLoadingNode = props.isContentLoading && _createVNode("div", contentLoadingAttrs, [_createVNode(MpSpinner, {
+        "size": "md"
+      }, null), _createVNode(MpText, null, {
+        default: () => [_createTextVNode(" "), props.contentLoadingText, _createTextVNode(" ")]
+      })]);
+      return _createVNode("div", rootAtrrs.value, [_createVNode(MpPopover, popoverAtrrs.value, {
+        default: () => [_createVNode(MpPopoverTrigger, null, {
+          default: () => [_createVNode(MpInputGroup, null, {
+            default: () => [slots.leftAddon && _createVNode(MpInputLeftAddon, null, {
+              default: () => [_createTextVNode(" "), slots.leftAddon(), _createTextVNode(" ")]
+            }), _createVNode(MpInput, inputAtrrs.value, null), _createVNode(MpInputRightAddon, null, {
+              default: () => [props.isLoading ? _createVNode(MpSpinner, null, null) : _createVNode(MpIcon, {
+                "name": "chevrons-down",
+                "size": "sm"
+              }, null)]
+            })]
+          })]
+        }), _createVNode(MpPopoverContent, popoverContentAtrrs.value, {
+          default: () => [_createVNode(MpPopoverList, null, {
+            default: () => [getSuggestionDatas.value.length === 0 ? emptyTextNode : suggestionsNode, contentLoadingNode]
+          }), props.isInfinityScroll && _createVNode("div", {
+            "ref": scrollEndNode
+          }, null), buttonActionNode]
+        })]
+      })]);
+    };
+  }
+});
+
+export {
+  MpAutocomplete
+};

package/dist/chunk-YGOZYS5H.mjs

@@ -0,0 +1,394 @@
+import {
+  __name
+} from "./chunk-QZ7VFGWC.mjs";
+
+// src/modules/autocomplete.hooks.ts
+import { ref, computed, toRefs, nextTick, watch, onMounted } from "vue";
+import { isDef, isUndef, isElementVisible, scrollToTargetElement, isEqual, isObject, getUniqueId, useIntersectionObserver, groupBy } from "@mekari/pixel3-utils";
+import { css } from "@mekari/pixel3-styled-system/css";
+function useAutocomplete(props, emit) {
+  const {
+    data,
+    usePortal,
+    isKeepAlive,
+    isClearable,
+    isSearchable,
+    isReadOnly,
+    isFullWidth,
+    labelProp,
+    valueProp,
+    isInfinityScroll,
+    placeholder,
+    isAdaptiveWidth
+  } = toRefs(props);
+  const scrollEndNode = ref();
+  const currentValue = ref();
+  const currentLabel = ref("");
+  const currentCursor = ref("");
+  const currentSearch = ref("");
+  const isOutside = ref(true);
+  const isPopoverOpen = ref(false);
+  const {
+    resume: enableIntersectionObserver,
+    pause: disableIntersectionObserver
+  } = useIntersectionObserver(scrollEndNode, ([{
+    isIntersecting
+  }]) => {
+    if (isIntersecting) {
+      emit("scrollEnd");
+    }
+  });
+  const getId = props.id || getUniqueId("", "autocomplete").value;
+  const getSuggestionDatas = computed(() => {
+    const datas = data.value || [];
+    if (props.isManualFilter)
+      return datas;
+    if (!currentSearch.value)
+      return datas;
+    if (currentSearch.value === currentLabel.value)
+      return datas;
+    return datas.filter((item) => {
+      const label = getLabel(item).toLocaleLowerCase();
+      const search = currentSearch.value.toLocaleLowerCase();
+      return label.includes(search);
+    });
+  });
+  const getGroupSuggestions = computed(() => {
+    const mapped = getSuggestionDatas.value.map((item, index) => {
+      const groupKey = item[props.groupKey];
+      const isUncategorized = /* @__PURE__ */ __name((value) => {
+        if (isUndef(value) || value === "")
+          return true;
+        return false;
+      }, "isUncategorized");
+      return {
+        ...item,
+        index,
+        [props.groupKey]: isUncategorized(groupKey) ? "UNCATEGORIZED" : groupKey
+      };
+    });
+    const grouped = groupBy(mapped, props.groupKey);
+    const keys = Object.keys(grouped);
+    const results = keys.map((item) => {
+      return {
+        key: item,
+        values: grouped[item]
+      };
+    });
+    return results;
+  });
+  const getValueOfSuggestions = computed(() => {
+    if (props.isRawValue)
+      return getSuggestionDatas.value;
+    const isArrayOfObject = getSuggestionDatas.value.some((item) => isObject(item));
+    if (isArrayOfObject) {
+      return getSuggestionDatas.value.map((item) => item[valueProp.value]);
+    }
+    return getSuggestionDatas.value;
+  });
+  const getCursorPosition = computed(() => getValueOfSuggestions.value.findIndex((item) => isEqual(getValue(item), currentCursor.value)));
+  function onOpenPopover(e) {
+    isPopoverOpen.value = true;
+    if (isSearchable.value) {
+      const target = e.target;
+      target.setSelectionRange(0, target.value.length || 0);
+    }
+    if (props.modelValue) {
+      currentCursor.value = getValue(props.modelValue);
+      nextTick(() => {
+        handleAdjustScrollPosition();
+      });
+    } else {
+      handleSetFirstSuggestion();
+    }
+    if (isInfinityScroll.value) {
+      enableIntersectionObserver();
+    }
+  }
+  __name(onOpenPopover, "onOpenPopover");
+  function onBlur() {
+    isPopoverOpen.value = false;
+    const inputEl = document.getElementById(`${getId}-control`);
+    inputEl == null ? void 0 : inputEl.blur();
+    if (isInfinityScroll.value) {
+      disableIntersectionObserver();
+    }
+  }
+  __name(onBlur, "onBlur");
+  function onInputChange(e) {
+    const target = e.target;
+    currentSearch.value = target.value;
+    onSearchChange();
+    emit("input", e);
+  }
+  __name(onInputChange, "onInputChange");
+  function onSelectListItem(value) {
+    const innerValue = getValue(value);
+    emit("update:modelValue", innerValue);
+    emit("change", innerValue);
+    onBlur();
+  }
+  __name(onSelectListItem, "onSelectListItem");
+  function onSearchChange() {
+    nextTick(() => {
+      const hasSearchAndResult = currentSearch.value && getValueOfSuggestions.value.length;
+      const isEqualSearchAndLabel = currentSearch.value === currentLabel.value;
+      const emptySearchButHaveLabel = !currentSearch.value && currentLabel.value;
+      if (hasSearchAndResult) {
+        if (isEqualSearchAndLabel) {
+          currentCursor.value = currentValue.value;
+          handleAdjustScrollPosition();
+        } else {
+          handleSetFirstSuggestion();
+        }
+      }
+      if (emptySearchButHaveLabel) {
+        currentCursor.value = currentValue.value;
+        handleAdjustScrollPosition();
+      }
+    });
+  }
+  __name(onSearchChange, "onSearchChange");
+  function onModelValueChange() {
+    const data2 = props.data.find((item) => {
+      return isEqual(getValue(item), props.modelValue);
+    });
+    if (data2) {
+      currentValue.value = props.modelValue;
+      currentLabel.value = getLabel(data2);
+      currentSearch.value = getLabel(data2);
+    }
+  }
+  __name(onModelValueChange, "onModelValueChange");
+  function handleForceFocusToInput() {
+    const inputEl = document.getElementById(`${getId}-control`);
+    inputEl == null ? void 0 : inputEl.focus();
+  }
+  __name(handleForceFocusToInput, "handleForceFocusToInput");
+  function onKeydown(e) {
+    if (e.code === "Enter") {
+      if (getSuggestionDatas.value.length) {
+        onSelectListItem(currentCursor.value);
+        emit("enter", getSuggestionDatas.value, currentSearch.value);
+      } else {
+        emit("enter", getSuggestionDatas.value, currentSearch.value);
+        onBlur();
+      }
+    }
+    if (e.code === "ArrowDown") {
+      e.preventDefault();
+      e.stopPropagation();
+      const totalData = getSuggestionDatas.value.length - 1;
+      const position = getCursorPosition.value;
+      const isLastPosition = totalData === position;
+      if (!isLastPosition) {
+        const nextPosition = position + 1;
+        currentCursor.value = getValueOfSuggestions.value[nextPosition];
+        handleAdjustScrollPosition();
+      }
+    }
+    if (e.code === "ArrowUp") {
+      e.preventDefault();
+      e.stopPropagation();
+      const position = getCursorPosition.value;
+      const isFirstPosition = position === 0;
+      if (!isFirstPosition) {
+        const nextPosition = position - 1;
+        currentCursor.value = getValueOfSuggestions.value[nextPosition];
+        handleAdjustScrollPosition();
+      }
+    }
+  }
+  __name(onKeydown, "onKeydown");
+  async function handleAdjustScrollPosition() {
+    const position = getValueOfSuggestions.value.indexOf(currentCursor.value);
+    const containerElement = document.getElementById(`popover-content-${getId}`);
+    const targetElement = containerElement == null ? void 0 : containerElement.querySelector(`[data-index="${position}"]`);
+    if (isDef(targetElement)) {
+      const isVisible = await isElementVisible(targetElement);
+      const getPosition = /* @__PURE__ */ __name(() => {
+        if (getCursorPosition.value === 0)
+          return "top";
+        if (props.data.length === getCursorPosition.value + 1)
+          return "bottom";
+        return void 0;
+      }, "getPosition");
+      if (!isVisible) {
+        nextTick(() => {
+          scrollToTargetElement(targetElement, containerElement, getPosition());
+        });
+      }
+    }
+  }
+  __name(handleAdjustScrollPosition, "handleAdjustScrollPosition");
+  function handleSetFirstSuggestion() {
+    currentCursor.value = getValueOfSuggestions.value[0] || "";
+    handleAdjustScrollPosition();
+  }
+  __name(handleSetFirstSuggestion, "handleSetFirstSuggestion");
+  function getValue(value) {
+    if (props.isRawValue)
+      return value;
+    return isObject(value) ? value[valueProp.value] : value;
+  }
+  __name(getValue, "getValue");
+  function getLabel(value) {
+    return isObject(value) ? value[labelProp.value] : value;
+  }
+  __name(getLabel, "getLabel");
+  function isListItemActive(item) {
+    if (props.isListItemActiveFunction)
+      return props.isListItemActiveFunction(props.modelValue, item);
+    return isEqual(props.modelValue, getValue(item));
+  }
+  __name(isListItemActive, "isListItemActive");
+  const rootAtrrs = computed(() => {
+    return {
+      style: {
+        width: "100%",
+        position: "relative"
+      },
+      onMouseenter: () => {
+        isOutside.value = false;
+      },
+      onMouseleave: () => {
+        isOutside.value = true;
+      }
+    };
+  });
+  const popoverAtrrs = computed(() => {
+    return {
+      id: getId,
+      isManual: true,
+      isOpen: isPopoverOpen.value,
+      usePortal: usePortal.value,
+      isKeepAlive: isKeepAlive.value,
+      isAdaptiveWidth: isAdaptiveWidth.value
+    };
+  });
+  const popoverContentAtrrs = computed(() => {
+    return {
+      class: css({
+        maxHeight: "300px",
+        overflowY: "auto",
+        position: "relative"
+      }),
+      onClick: handleForceFocusToInput,
+      ...props.contentAttrs
+    };
+  });
+  const inputAtrrs = computed(() => {
+    return {
+      // key: currentLabel.value,
+      id: getId,
+      modelValue: currentLabel.value,
+      isClearable: isClearable.value,
+      autocomplete: "off",
+      isReadOnly: !isSearchable.value || isReadOnly.value,
+      isFullWidth: isFullWidth.value,
+      placeholder: placeholder == null ? void 0 : placeholder.value,
+      onInput: onInputChange,
+      onKeydown,
+      onFocus: onOpenPopover,
+      onBlur: () => {
+        if (isOutside.value) {
+          onBlur();
+        }
+      }
+    };
+  });
+  const buttonActionAttrs = computed(() => {
+    return {
+      class: css({
+        cursor: "pointer",
+        width: "full",
+        textAlign: "center",
+        roundedTop: "0",
+        borderTopWidth: "1px",
+        borderColor: "blue.50",
+        color: "blue.400",
+        position: "sticky",
+        bottom: "0px",
+        bg: "white",
+        fontSize: "md",
+        zIndex: "999",
+        py: 2,
+        height: "9.5",
+        _hover: {
+          color: "blue.500"
+        }
+      }),
+      onClick: (e) => {
+        e.stopPropagation();
+        emit("buttonAction", getSuggestionDatas.value, currentSearch.value);
+        isOutside.value = true;
+        onBlur();
+      }
+    };
+  });
+  const emptyTextAttrs = {
+    color: "gray.400",
+    class: css({
+      px: 3,
+      py: 2
+    })
+  };
+  const contentLoadingAttrs = {
+    class: css({
+      px: 3,
+      py: 2,
+      display: "flex",
+      alignItems: "center",
+      gap: 3
+    })
+  };
+  const popoverListItemAttrs = /* @__PURE__ */ __name((item, index) => {
+    const innerValue = getValue(item);
+    return {
+      onClick: (e) => {
+        e.stopPropagation();
+        onSelectListItem(item);
+      },
+      onMouseenter: () => currentCursor.value = innerValue,
+      isActive: isListItemActive(item),
+      "data-highlight": isEqual(innerValue, currentCursor.value) ? true : void 0,
+      "data-index": index,
+      "aria-selected": isListItemActive(item) ? true : void 0
+    };
+  }, "popoverListItemAttrs");
+  watch(() => props.modelValue, (newValue) => {
+    if (newValue)
+      onModelValueChange();
+  });
+  watch(() => props.data, () => {
+    if (props.isManualFilter && isPopoverOpen.value) {
+      nextTick(() => {
+        handleSetFirstSuggestion();
+      });
+    }
+  });
+  onMounted(() => {
+    if (props.modelValue)
+      onModelValueChange();
+  });
+  return {
+    currentSearch,
+    scrollEndNode,
+    getSuggestionDatas,
+    getGroupSuggestions,
+    rootAtrrs,
+    popoverAtrrs,
+    popoverContentAtrrs,
+    inputAtrrs,
+    buttonActionAttrs,
+    emptyTextAttrs,
+    contentLoadingAttrs,
+    popoverListItemAttrs,
+    getLabel
+  };
+}
+__name(useAutocomplete, "useAutocomplete");
+
+export {
+  useAutocomplete
+};

package/dist/index.d.mts

@@ -0,0 +1,4 @@
+export { MpAutocomplete } from './autocomplete.mjs';
+import 'vue';
+import './modules/autocomplete.props.mjs';
+import '@mekari/pixel3-popover';

package/dist/index.d.ts

@@ -0,0 +1,4 @@
+export { MpAutocomplete } from './autocomplete.js';
+import 'vue';
+import './modules/autocomplete.props.js';
+import '@mekari/pixel3-popover';