@mekari/pixel3-autocomplete 0.0.0

package/dist/modules/autocomplete.hooks.d.mts

@@ -0,0 +1,65 @@
+import * as vue from 'vue';
+import { HTMLAttributes } from 'vue';
+import { AutocompleteProps, AutocompleteEmits, StringNumberAnyObject } from './autocomplete.props.mjs';
+import '@mekari/pixel3-popover';
+
+declare function useAutocomplete(props: AutocompleteProps, emit: AutocompleteEmits): {
+    currentSearch: vue.Ref<string>;
+    scrollEndNode: vue.Ref<any>;
+    getSuggestionDatas: vue.ComputedRef<unknown[]>;
+    getGroupSuggestions: vue.ComputedRef<{
+        key: string;
+        values: any;
+    }[]>;
+    rootAtrrs: vue.ComputedRef<HTMLAttributes>;
+    popoverAtrrs: vue.ComputedRef<{
+        id: string | undefined;
+        isManual: boolean;
+        isOpen: boolean;
+        usePortal: boolean;
+        isKeepAlive: boolean;
+        isAdaptiveWidth: boolean;
+    }>;
+    popoverContentAtrrs: vue.ComputedRef<{
+        class: unknown;
+        style?: unknown;
+        isDark?: boolean | undefined;
+        isUnstyled?: boolean | undefined;
+        onClick: () => void;
+    }>;
+    inputAtrrs: vue.ComputedRef<{
+        id: string | undefined;
+        modelValue: string;
+        isClearable: boolean;
+        autocomplete: string;
+        isReadOnly: boolean;
+        isFullWidth: boolean;
+        placeholder: string | undefined;
+        onInput: (e: Event) => void;
+        onKeydown: (e: KeyboardEvent) => void;
+        onFocus: (e: Event) => void;
+        onBlur: () => void;
+    }>;
+    buttonActionAttrs: vue.ComputedRef<{
+        class: string;
+        onClick: (e: Event) => void;
+    }>;
+    emptyTextAttrs: {
+        color: string;
+        class: string;
+    };
+    contentLoadingAttrs: {
+        class: string;
+    };
+    popoverListItemAttrs: (item: StringNumberAnyObject, index: number) => {
+        onClick: (e: Event) => void;
+        onMouseenter: () => StringNumberAnyObject;
+        isActive: boolean;
+        'data-highlight': boolean | undefined;
+        'data-index': number;
+        'aria-selected': boolean | undefined;
+    };
+    getLabel: (value: StringNumberAnyObject) => string;
+};
+
+export { useAutocomplete };

package/dist/modules/autocomplete.hooks.d.ts

@@ -0,0 +1,65 @@
+import * as vue from 'vue';
+import { HTMLAttributes } from 'vue';
+import { AutocompleteProps, AutocompleteEmits, StringNumberAnyObject } from './autocomplete.props.js';
+import '@mekari/pixel3-popover';
+
+declare function useAutocomplete(props: AutocompleteProps, emit: AutocompleteEmits): {
+    currentSearch: vue.Ref<string>;
+    scrollEndNode: vue.Ref<any>;
+    getSuggestionDatas: vue.ComputedRef<unknown[]>;
+    getGroupSuggestions: vue.ComputedRef<{
+        key: string;
+        values: any;
+    }[]>;
+    rootAtrrs: vue.ComputedRef<HTMLAttributes>;
+    popoverAtrrs: vue.ComputedRef<{
+        id: string | undefined;
+        isManual: boolean;
+        isOpen: boolean;
+        usePortal: boolean;
+        isKeepAlive: boolean;
+        isAdaptiveWidth: boolean;
+    }>;
+    popoverContentAtrrs: vue.ComputedRef<{
+        class: unknown;
+        style?: unknown;
+        isDark?: boolean | undefined;
+        isUnstyled?: boolean | undefined;
+        onClick: () => void;
+    }>;
+    inputAtrrs: vue.ComputedRef<{
+        id: string | undefined;
+        modelValue: string;
+        isClearable: boolean;
+        autocomplete: string;
+        isReadOnly: boolean;
+        isFullWidth: boolean;
+        placeholder: string | undefined;
+        onInput: (e: Event) => void;
+        onKeydown: (e: KeyboardEvent) => void;
+        onFocus: (e: Event) => void;
+        onBlur: () => void;
+    }>;
+    buttonActionAttrs: vue.ComputedRef<{
+        class: string;
+        onClick: (e: Event) => void;
+    }>;
+    emptyTextAttrs: {
+        color: string;
+        class: string;
+    };
+    contentLoadingAttrs: {
+        class: string;
+    };
+    popoverListItemAttrs: (item: StringNumberAnyObject, index: number) => {
+        onClick: (e: Event) => void;
+        onMouseenter: () => StringNumberAnyObject;
+        isActive: boolean;
+        'data-highlight': boolean | undefined;
+        'data-index': number;
+        'aria-selected': boolean | undefined;
+    };
+    getLabel: (value: StringNumberAnyObject) => string;
+};
+
+export { useAutocomplete };

package/dist/modules/autocomplete.hooks.js

@@ -0,0 +1,415 @@
+"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/modules/autocomplete.hooks.ts
+var autocomplete_hooks_exports = {};
+__export(autocomplete_hooks_exports, {
+  useAutocomplete: () => useAutocomplete
+});
+module.exports = __toCommonJS(autocomplete_hooks_exports);
+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");
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  useAutocomplete
+});

package/dist/modules/autocomplete.hooks.mjs

@@ -0,0 +1,7 @@
+import {
+  useAutocomplete
+} from "../chunk-YGOZYS5H.mjs";
+import "../chunk-QZ7VFGWC.mjs";
+export {
+  useAutocomplete
+};

package/dist/modules/autocomplete.props.d.mts

@@ -0,0 +1,136 @@
+import { PropType, ExtractPropTypes } from 'vue';
+import { PopoverContentProps } from '@mekari/pixel3-popover';
+
+type PopoverContentAttrs = {
+    class?: unknown;
+    style?: unknown;
+    [key: string]: unknown;
+} & PopoverContentProps;
+type AnyObject = {
+    [key: string]: unknown;
+};
+type StringNumberAnyObject = string | number | AnyObject;
+declare const autocompleteProps: {
+    id: {
+        type: PropType<string>;
+        default: string;
+    };
+    data: {
+        type: PropType<unknown[]>;
+        default: () => never[];
+    };
+    modelValue: {
+        type: PropType<StringNumberAnyObject | undefined>;
+    };
+    defaultValue: (StringConstructor | NumberConstructor | ObjectConstructor)[];
+    placeholder: {
+        type: PropType<string>;
+    };
+    labelProp: {
+        type: PropType<string>;
+        default: string;
+    };
+    valueProp: {
+        type: PropType<string>;
+        default: string;
+    };
+    isReadOnly: {
+        type: PropType<boolean>;
+        default: boolean;
+    };
+    isDisabled: {
+        type: PropType<boolean>;
+        default: boolean;
+    };
+    isInvalid: {
+        type: PropType<boolean>;
+        default: boolean;
+    };
+    isRequired: {
+        type: PropType<boolean>;
+        default: boolean;
+    };
+    isFullWidth: {
+        type: PropType<boolean>;
+        default: boolean;
+    };
+    isLoading: {
+        type: PropType<boolean>;
+        default: boolean;
+    };
+    isContentLoading: {
+        type: PropType<boolean>;
+        default: boolean;
+    };
+    isClearable: {
+        type: PropType<boolean>;
+        default: boolean;
+    };
+    isSearchable: {
+        type: PropType<boolean>;
+        default: boolean;
+    };
+    contentAttrs: {
+        type: PropType<PopoverContentAttrs>;
+    };
+    emptyText: {
+        type: PropType<string>;
+        default: string;
+    };
+    contentLoadingText: {
+        type: PropType<string>;
+        default: string;
+    };
+    isInfinityScroll: {
+        type: PropType<boolean>;
+        default: boolean;
+    };
+    isManualFilter: {
+        type: PropType<boolean>;
+        default: boolean;
+    };
+    usePortal: {
+        type: PropType<boolean>;
+        default: boolean;
+    };
+    isShowButtonAction: {
+        type: PropType<boolean>;
+        default: boolean;
+    };
+    buttonActionText: {
+        type: PropType<string>;
+        default: string;
+    };
+    isGroupSuggestions: {
+        type: PropType<boolean>;
+        default: boolean;
+    };
+    groupKey: {
+        type: PropType<string>;
+        default: string;
+    };
+    keyCode: {
+        type: PropType<string[]>;
+        default: () => string[];
+    };
+    isRawValue: {
+        type: PropType<boolean>;
+        default: boolean;
+    };
+    isListItemActiveFunction: {
+        type: PropType<(selected: StringNumberAnyObject | undefined, item: StringNumberAnyObject | undefined) => boolean>;
+    };
+    isKeepAlive: {
+        type: PropType<boolean>;
+        default: boolean;
+    };
+    isAdaptiveWidth: {
+        type: PropType<boolean>;
+        default: boolean;
+    };
+};
+declare const autocompleteEmit: readonly ["update:modelValue", "input", "change", "enter", "scrollEnd", "buttonAction"];
+type AutocompleteProps = ExtractPropTypes<typeof autocompleteProps>;
+type AutocompleteEmits = (e: typeof autocompleteEmit[number], value?: unknown, value2?: unknown) => void;
+
+export { AnyObject, AutocompleteEmits, AutocompleteProps, StringNumberAnyObject, autocompleteEmit, autocompleteProps };