tuikit-atomicx-vue3 0.1.0 → 0.1.1

package/dist/components/Search/Search.js

@@ -0,0 +1,191 @@
+import { defineComponent, ref, watch, createElementBlock, openBlock, normalizeStyle, normalizeClass, createBlock, resolveDynamicComponent, unref } from "vue";
+import { useSearchState } from "../../states/SearchState.js";
+import { SearchType } from "../../types/engine.js";
+import { VariantType, defaultTypeLabels } from "../../types/search.js";
+import { debounce } from "../../utils/lodash.js";
+import SearchAdvancedComponent from "./SearchAdvanced/SearchAdvanced.js";
+import SearchBarComponent from "./SearchBar/SearchBar.js";
+import SearchResultsComponent from "./SearchResults/SearchResults.js";
+import { _ as _export_sfc } from "../../_plugin-vue_export-helper-1tPrXgE0.js";
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "Search",
+  props: {
+    variant: { default: VariantType.MINI },
+    SearchBar: { default: SearchBarComponent },
+    SearchResults: { default: SearchResultsComponent },
+    SearchAdvanced: { default: SearchAdvancedComponent },
+    SearchResultsPresearch: { default: void 0 },
+    SearchResultsLoading: { default: void 0 },
+    SearchResultsEmpty: { default: void 0 },
+    SearchResultItem: { default: void 0 },
+    debounceTime: { default: 300 },
+    autoFocus: { type: Boolean, default: false },
+    className: { default: "" },
+    style: { default: () => ({}) },
+    onKeywordChange: {},
+    onSearchComplete: {},
+    onResultItemClick: {},
+    onError: {}
+  },
+  setup(__props) {
+    const props = __props;
+    const {
+      keyword,
+      results,
+      isLoading,
+      error,
+      selectedSearchType,
+      searchAdvancedParams,
+      setKeyword,
+      setSelectedType,
+      loadMore,
+      setSearchMessageAdvancedParams,
+      setSearchUserAdvancedParams,
+      setSearchGroupAdvancedParams
+    } = useSearchState(props.variant);
+    const searchValue = ref(keyword.value);
+    const isExternalUpdate = ref(false);
+    const debouncedSearch = debounce(async (searchKeyword) => {
+      var _a;
+      try {
+        isExternalUpdate.value = true;
+        await setKeyword(searchKeyword);
+      } catch (err) {
+        (_a = props.onError) == null ? void 0 : _a.call(props, err);
+      }
+    }, props.debounceTime);
+    watch(
+      searchValue,
+      (newValue) => {
+        if (!isExternalUpdate.value) {
+          debouncedSearch(newValue);
+        }
+      },
+      { immediate: false }
+    );
+    watch(keyword, (newKeyword) => {
+      if (isExternalUpdate.value) {
+        isExternalUpdate.value = false;
+        return;
+      }
+      searchValue.value = newKeyword;
+    });
+    const handleInputChange = (e) => {
+      var _a;
+      const target = e.target;
+      const { value } = target;
+      searchValue.value = value;
+      (_a = props.onKeywordChange) == null ? void 0 : _a.call(props, value);
+      if (props.variant !== VariantType.EXACT) {
+        debouncedSearch(value);
+      }
+    };
+    const handleKeyDown = (e) => {
+      var _a;
+      if (e.key === "Enter") {
+        (_a = debouncedSearch.cancel) == null ? void 0 : _a.call(debouncedSearch);
+        isExternalUpdate.value = true;
+        setKeyword(searchValue.value);
+      }
+    };
+    const handleClear = () => {
+      var _a, _b;
+      searchValue.value = "";
+      (_a = debouncedSearch.cancel) == null ? void 0 : _a.call(debouncedSearch);
+      isExternalUpdate.value = true;
+      setKeyword("");
+      (_b = props.onKeywordChange) == null ? void 0 : _b.call(props, "");
+    };
+    const handleAdvancedChange = (type, params) => {
+      const storeParams = searchAdvancedParams.value.get(type) || {};
+      switch (type) {
+        case SearchType.MESSAGE:
+          setSearchMessageAdvancedParams({
+            ...storeParams,
+            ...params
+          });
+          break;
+        case SearchType.USER:
+          setSearchUserAdvancedParams({
+            ...storeParams,
+            ...params
+          });
+          break;
+        case SearchType.GROUP:
+          setSearchGroupAdvancedParams({
+            ...storeParams,
+            ...params
+          });
+          break;
+      }
+    };
+    const handleResultItemClick = (item, type) => {
+      if (props.onResultItemClick) {
+        props.onResultItemClick(item, type);
+      }
+      if (type === SearchType.MESSAGE) {
+        const { conversationID = "" } = item.conversation || {};
+        handleAdvancedChange(SearchType.MESSAGE, { conversationID });
+      }
+    };
+    const handleViewMore = (type) => {
+      if (props.variant === VariantType.STANDARD && type !== SearchType.CHAT_MESSAGE) {
+        setSelectedType(type);
+      }
+      loadMore == null ? void 0 : loadMore(type);
+    };
+    const stopClickPropagation = (e) => {
+      e.stopPropagation();
+    };
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        class: normalizeClass([_ctx.$style.Search, props.className]),
+        style: normalizeStyle(props.style),
+        onClick: stopClickPropagation
+      }, [
+        (openBlock(), createBlock(resolveDynamicComponent(_ctx.SearchBar), {
+          value: searchValue.value,
+          "on-change": handleInputChange,
+          "on-key-down": handleKeyDown,
+          "on-clear": handleClear,
+          "auto-focus": _ctx.autoFocus,
+          variant: _ctx.variant
+        }, null, 40, ["value", "auto-focus", "variant"])),
+        (openBlock(), createBlock(resolveDynamicComponent(_ctx.SearchAdvanced), {
+          variant: _ctx.variant,
+          "search-type": unref(selectedSearchType),
+          "advanced-params": unref(searchAdvancedParams),
+          "on-advanced-params-change": handleAdvancedChange
+        }, null, 40, ["variant", "search-type", "advanced-params"])),
+        (openBlock(), createBlock(resolveDynamicComponent(_ctx.SearchResults), {
+          results: unref(results),
+          "is-loading": unref(isLoading),
+          error: unref(error),
+          keyword: unref(keyword),
+          "type-labels": unref(defaultTypeLabels),
+          "search-type": unref(selectedSearchType),
+          "on-result-item-click": handleResultItemClick,
+          "on-load-more": handleViewMore,
+          SearchResultsPresearch: _ctx.SearchResultsPresearch,
+          SearchResultsLoading: _ctx.SearchResultsLoading,
+          SearchResultsEmpty: _ctx.SearchResultsEmpty,
+          SearchResultItem: _ctx.SearchResultItem,
+          variant: _ctx.variant
+        }, null, 40, ["results", "is-loading", "error", "keyword", "type-labels", "search-type", "SearchResultsPresearch", "SearchResultsLoading", "SearchResultsEmpty", "SearchResultItem", "variant"]))
+      ], 6);
+    };
+  }
+});
+const Search = "_Search_9g3ao_295";
+const style0 = {
+  "tui-theme-dark": "_tui-theme-dark_9g3ao_2",
+  "tui-theme-light": "_tui-theme-light_9g3ao_140",
+  Search
+};
+const cssModules = {
+  "$style": style0
+};
+const SearchComponent = /* @__PURE__ */ _export_sfc(_sfc_main, [["__cssModules", cssModules]]);
+export {
+  SearchComponent as default
+};