@mekari/pixel3-autocomplete 0.0.0

package/dist/autocomplete.js

@@ -0,0 +1,639 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/autocomplete.tsx
+var autocomplete_exports = {};
+__export(autocomplete_exports, {
+  MpAutocomplete: () => MpAutocomplete
+});
+module.exports = __toCommonJS(autocomplete_exports);
+var import_vue2 = require("vue");
+var import_vue3 = require("vue");
+var import_pixel3_popover = require("@mekari/pixel3-popover");
+var import_pixel3_input = require("@mekari/pixel3-input");
+var import_pixel3_spinner = require("@mekari/pixel3-spinner");
+var import_pixel3_icon = require("@mekari/pixel3-icon");
+var import_pixel3_text = require("@mekari/pixel3-text");
+
+// 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
+  }
+};
+
+// src/modules/autocomplete.hooks.ts
+var import_vue = require("vue");
+var import_pixel3_utils = require("@mekari/pixel3-utils");
+var import_css = require("@mekari/pixel3-styled-system/css");
+function useAutocomplete(props, emit) {
+  const {
+    data,
+    usePortal,
+    isKeepAlive,
+    isClearable,
+    isSearchable,
+    isReadOnly,
+    isFullWidth,
+    labelProp,
+    valueProp,
+    isInfinityScroll,
+    placeholder,
+    isAdaptiveWidth
+  } = (0, import_vue.toRefs)(props);
+  const scrollEndNode = (0, import_vue.ref)();
+  const currentValue = (0, import_vue.ref)();
+  const currentLabel = (0, import_vue.ref)("");
+  const currentCursor = (0, import_vue.ref)("");
+  const currentSearch = (0, import_vue.ref)("");
+  const isOutside = (0, import_vue.ref)(true);
+  const isPopoverOpen = (0, import_vue.ref)(false);
+  const {
+    resume: enableIntersectionObserver,
+    pause: disableIntersectionObserver
+  } = (0, import_pixel3_utils.useIntersectionObserver)(scrollEndNode, ([{
+    isIntersecting
+  }]) => {
+    if (isIntersecting) {
+      emit("scrollEnd");
+    }
+  });
+  const getId = props.id || (0, import_pixel3_utils.getUniqueId)("", "autocomplete").value;
+  const getSuggestionDatas = (0, import_vue.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 = (0, import_vue.computed)(() => {
+    const mapped = getSuggestionDatas.value.map((item, index) => {
+      const groupKey = item[props.groupKey];
+      const isUncategorized = /* @__PURE__ */ __name((value) => {
+        if ((0, import_pixel3_utils.isUndef)(value) || value === "")
+          return true;
+        return false;
+      }, "isUncategorized");
+      return {
+        ...item,
+        index,
+        [props.groupKey]: isUncategorized(groupKey) ? "UNCATEGORIZED" : groupKey
+      };
+    });
+    const grouped = (0, import_pixel3_utils.groupBy)(mapped, props.groupKey);
+    const keys = Object.keys(grouped);
+    const results = keys.map((item) => {
+      return {
+        key: item,
+        values: grouped[item]
+      };
+    });
+    return results;
+  });
+  const getValueOfSuggestions = (0, import_vue.computed)(() => {
+    if (props.isRawValue)
+      return getSuggestionDatas.value;
+    const isArrayOfObject = getSuggestionDatas.value.some((item) => (0, import_pixel3_utils.isObject)(item));
+    if (isArrayOfObject) {
+      return getSuggestionDatas.value.map((item) => item[valueProp.value]);
+    }
+    return getSuggestionDatas.value;
+  });
+  const getCursorPosition = (0, import_vue.computed)(() => getValueOfSuggestions.value.findIndex((item) => (0, import_pixel3_utils.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);
+      (0, import_vue.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() {
+    (0, import_vue.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 (0, import_pixel3_utils.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 ((0, import_pixel3_utils.isDef)(targetElement)) {
+      const isVisible = await (0, import_pixel3_utils.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) {
+        (0, import_vue.nextTick)(() => {
+          (0, import_pixel3_utils.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 (0, import_pixel3_utils.isObject)(value) ? value[valueProp.value] : value;
+  }
+  __name(getValue, "getValue");
+  function getLabel(value) {
+    return (0, import_pixel3_utils.isObject)(value) ? value[labelProp.value] : value;
+  }
+  __name(getLabel, "getLabel");
+  function isListItemActive(item) {
+    if (props.isListItemActiveFunction)
+      return props.isListItemActiveFunction(props.modelValue, item);
+    return (0, import_pixel3_utils.isEqual)(props.modelValue, getValue(item));
+  }
+  __name(isListItemActive, "isListItemActive");
+  const rootAtrrs = (0, import_vue.computed)(() => {
+    return {
+      style: {
+        width: "100%",
+        position: "relative"
+      },
+      onMouseenter: () => {
+        isOutside.value = false;
+      },
+      onMouseleave: () => {
+        isOutside.value = true;
+      }
+    };
+  });
+  const popoverAtrrs = (0, import_vue.computed)(() => {
+    return {
+      id: getId,
+      isManual: true,
+      isOpen: isPopoverOpen.value,
+      usePortal: usePortal.value,
+      isKeepAlive: isKeepAlive.value,
+      isAdaptiveWidth: isAdaptiveWidth.value
+    };
+  });
+  const popoverContentAtrrs = (0, import_vue.computed)(() => {
+    return {
+      class: (0, import_css.css)({
+        maxHeight: "300px",
+        overflowY: "auto",
+        position: "relative"
+      }),
+      onClick: handleForceFocusToInput,
+      ...props.contentAttrs
+    };
+  });
+  const inputAtrrs = (0, import_vue.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 = (0, import_vue.computed)(() => {
+    return {
+      class: (0, import_css.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: (0, import_css.css)({
+      px: 3,
+      py: 2
+    })
+  };
+  const contentLoadingAttrs = {
+    class: (0, import_css.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": (0, import_pixel3_utils.isEqual)(innerValue, currentCursor.value) ? true : void 0,
+      "data-index": index,
+      "aria-selected": isListItemActive(item) ? true : void 0
+    };
+  }, "popoverListItemAttrs");
+  (0, import_vue.watch)(() => props.modelValue, (newValue) => {
+    if (newValue)
+      onModelValueChange();
+  });
+  (0, import_vue.watch)(() => props.data, () => {
+    if (props.isManualFilter && isPopoverOpen.value) {
+      (0, import_vue.nextTick)(() => {
+        handleSetFirstSuggestion();
+      });
+    }
+  });
+  (0, import_vue.onMounted)(() => {
+    if (props.modelValue)
+      onModelValueChange();
+  });
+  return {
+    currentSearch,
+    scrollEndNode,
+    getSuggestionDatas,
+    getGroupSuggestions,
+    rootAtrrs,
+    popoverAtrrs,
+    popoverContentAtrrs,
+    inputAtrrs,
+    buttonActionAttrs,
+    emptyTextAttrs,
+    contentLoadingAttrs,
+    popoverListItemAttrs,
+    getLabel
+  };
+}
+__name(useAutocomplete, "useAutocomplete");
+
+// src/autocomplete.tsx
+var import_patterns = require("@mekari/pixel3-styled-system/patterns");
+var import_css2 = require("@mekari/pixel3-styled-system/css");
+var MpAutocomplete = (0, import_vue3.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 (0, import_vue2.createVNode)(import_pixel3_popover.MpPopoverListItem, popoverListItemAttrs(item, index), {
+          default: () => [slots.default ? slots.default({
+            item
+          }) : getLabel(item)]
+        });
+      }) : getGroupSuggestions.value.map((group, groupIndex) => {
+        return (0, import_vue2.createVNode)("div", {
+          "key": groupIndex,
+          "data-category": group.key,
+          "class": (0, import_patterns.flex)({
+            direction: "column",
+            alignItems: "start",
+            width: "full"
+          })
+        }, [slots.group ? slots.group({
+          group
+        }) : (0, import_vue2.createVNode)(import_pixel3_text.MpText, {
+          "size": "body-small",
+          "color": "gray.600",
+          "class": (0, import_css2.css)({
+            px: 3,
+            py: 2
+          })
+        }, {
+          default: () => [group.key]
+        }), group.values.map((item) => {
+          return (0, import_vue2.createVNode)(import_pixel3_popover.MpPopoverListItem, popoverListItemAttrs(item, item.index), {
+            default: () => [slots.default ? slots.default({
+              item
+            }) : getLabel(item)]
+          });
+        })]);
+      });
+      const buttonActionNode = props.isShowButtonAction && (0, import_vue2.createVNode)("button", buttonActionAttrs.value, [(0, import_vue2.createTextVNode)(" "), slots.buttonAction ? slots.buttonAction(getSuggestionDatas.value, currentSearch.value) : props.buttonActionText, (0, import_vue2.createTextVNode)(" ")]);
+      const emptyTextNode = (0, import_vue2.createVNode)(import_pixel3_text.MpText, emptyTextAttrs, {
+        default: () => [(0, import_vue2.createTextVNode)(" "), props.emptyText, (0, import_vue2.createTextVNode)(" ")]
+      });
+      const contentLoadingNode = props.isContentLoading && (0, import_vue2.createVNode)("div", contentLoadingAttrs, [(0, import_vue2.createVNode)(import_pixel3_spinner.MpSpinner, {
+        "size": "md"
+      }, null), (0, import_vue2.createVNode)(import_pixel3_text.MpText, null, {
+        default: () => [(0, import_vue2.createTextVNode)(" "), props.contentLoadingText, (0, import_vue2.createTextVNode)(" ")]
+      })]);
+      return (0, import_vue2.createVNode)("div", rootAtrrs.value, [(0, import_vue2.createVNode)(import_pixel3_popover.MpPopover, popoverAtrrs.value, {
+        default: () => [(0, import_vue2.createVNode)(import_pixel3_popover.MpPopoverTrigger, null, {
+          default: () => [(0, import_vue2.createVNode)(import_pixel3_input.MpInputGroup, null, {
+            default: () => [slots.leftAddon && (0, import_vue2.createVNode)(import_pixel3_input.MpInputLeftAddon, null, {
+              default: () => [(0, import_vue2.createTextVNode)(" "), slots.leftAddon(), (0, import_vue2.createTextVNode)(" ")]
+            }), (0, import_vue2.createVNode)(import_pixel3_input.MpInput, inputAtrrs.value, null), (0, import_vue2.createVNode)(import_pixel3_input.MpInputRightAddon, null, {
+              default: () => [props.isLoading ? (0, import_vue2.createVNode)(import_pixel3_spinner.MpSpinner, null, null) : (0, import_vue2.createVNode)(import_pixel3_icon.MpIcon, {
+                "name": "chevrons-down",
+                "size": "sm"
+              }, null)]
+            })]
+          })]
+        }), (0, import_vue2.createVNode)(import_pixel3_popover.MpPopoverContent, popoverContentAtrrs.value, {
+          default: () => [(0, import_vue2.createVNode)(import_pixel3_popover.MpPopoverList, null, {
+            default: () => [getSuggestionDatas.value.length === 0 ? emptyTextNode : suggestionsNode, contentLoadingNode]
+          }), props.isInfinityScroll && (0, import_vue2.createVNode)("div", {
+            "ref": scrollEndNode
+          }, null), buttonActionNode]
+        })]
+      })]);
+    };
+  }
+});
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  MpAutocomplete
+});

package/dist/autocomplete.mjs

@@ -0,0 +1,9 @@
+import {
+  MpAutocomplete
+} from "./chunk-XA465WRM.mjs";
+import "./chunk-YGOZYS5H.mjs";
+import "./chunk-OX7ZBBEQ.mjs";
+import "./chunk-QZ7VFGWC.mjs";
+export {
+  MpAutocomplete
+};