tuikit-atomicx-vue3 0.1.0 → 0.1.1

package/dist/components/Search/SearchAdvanced/UserAdvanced/UserAdvanced.js

@@ -0,0 +1,449 @@
+import { defineComponent, ref, onMounted, onUnmounted, watch, computed, createElementBlock, openBlock, normalizeClass, createElementVNode, createCommentVNode, unref, toDisplayString, Fragment, renderList, createVNode, withCtx, createTextVNode } from "vue";
+import TUIChatEngine from "@tencentcloud/chat-uikit-engine";
+import { useUIKit, TUIButton, IconSetting, IconBack } from "@tencentcloud/uikit-base-component-vue3";
+import { SearchType } from "../../../../types/engine.js";
+import Slider from "../Slider/Slider.js";
+import { isH5 } from "../../../../utils/env.js";
+import { _ as _export_sfc } from "../../../../_plugin-vue_export-helper-1tPrXgE0.js";
+const _hoisted_1 = ["onClick"];
+const _hoisted_2 = ["value"];
+const _hoisted_3 = ["value"];
+const _hoisted_4 = ["onClick"];
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "UserAdvanced",
+  props: {
+    advancedParams: {},
+    onAdvancedParamsChange: { type: Function }
+  },
+  setup(__props) {
+    const props = __props;
+    const { t } = useUIKit();
+    const birthdayToAge = (birthday) => {
+      const today = /* @__PURE__ */ new Date();
+      const birthDate = new Date(Math.floor(birthday / 1e4), Math.floor(birthday % 1e4 / 100) - 1, birthday % 100);
+      let age = today.getFullYear() - birthDate.getFullYear();
+      const monthDiff = today.getMonth() - birthDate.getMonth();
+      if (monthDiff < 0 || monthDiff === 0 && today.getDate() < birthDate.getDate()) {
+        age -= 1;
+      }
+      return age;
+    };
+    const ageToBirthday = (age) => {
+      if (!age) {
+        return void 0;
+      }
+      const today = /* @__PURE__ */ new Date();
+      const year = today.getFullYear() - age;
+      return year * 1e4 + (today.getMonth() + 1) * 100 + today.getDate();
+    };
+    const userAdvanced = ref({});
+    const isGenderOpen = ref(false);
+    const isAgeOpen = ref(false);
+    const isFilterPage = ref(false);
+    const tempAge = ref({
+      min: void 0,
+      max: void 0
+    });
+    const tempGender = ref("不限");
+    const genderRef = ref();
+    const ageRef = ref();
+    const genderList = [
+      {
+        value: "不限",
+        label: t("Search.filter.gender.any")
+      },
+      {
+        value: TUIChatEngine.TYPES.GENDER_MALE,
+        label: t("Search.filter.gender.male")
+      },
+      {
+        value: TUIChatEngine.TYPES.GENDER_FEMALE,
+        label: t("Search.filter.gender.female")
+      }
+    ];
+    const handleClickOutside = (event) => {
+      if (genderRef.value && !genderRef.value.contains(event.target)) {
+        isGenderOpen.value = false;
+      }
+      if (ageRef.value && !ageRef.value.contains(event.target)) {
+        isAgeOpen.value = false;
+      }
+    };
+    onMounted(() => {
+      document.addEventListener("mousedown", handleClickOutside);
+    });
+    onUnmounted(() => {
+      document.removeEventListener("mousedown", handleClickOutside);
+    });
+    watch(
+      () => props.advancedParams,
+      (newParams) => {
+        const userParams = (newParams == null ? void 0 : newParams.get(SearchType.USER)) || {};
+        userAdvanced.value = {
+          ...userAdvanced.value,
+          ...userParams
+        };
+        tempGender.value = (userParams == null ? void 0 : userParams.gender) || "不限";
+        tempAge.value = {
+          min: (userParams == null ? void 0 : userParams.maxBirthday) ? birthdayToAge(userParams == null ? void 0 : userParams.maxBirthday) : void 0,
+          max: (userParams == null ? void 0 : userParams.miniBirthday) ? birthdayToAge(userParams == null ? void 0 : userParams.miniBirthday) : void 0
+        };
+      },
+      { immediate: true }
+    );
+    const handleGenderChange = (gender) => {
+      if (props.onAdvancedParamsChange) {
+        const newParams = new Map(props.advancedParams || []);
+        newParams.set(SearchType.USER, {
+          ...userAdvanced.value,
+          gender: gender === "不限" ? void 0 : gender
+        });
+        props.onAdvancedParamsChange(newParams);
+      }
+      isGenderOpen.value = false;
+    };
+    const handleAgeChange = (age) => {
+      if (props.onAdvancedParamsChange) {
+        const newParams = new Map(props.advancedParams || []);
+        newParams.set(SearchType.USER, {
+          ...userAdvanced.value,
+          miniBirthday: ageToBirthday(age.max),
+          maxBirthday: ageToBirthday(age.min)
+        });
+        props.onAdvancedParamsChange(newParams);
+      }
+      isAgeOpen.value = false;
+    };
+    const handleAgeInputChange = (type, value) => {
+      if (value === "") {
+        tempAge.value = {
+          ...tempAge.value,
+          [type]: void 0
+        };
+      } else {
+        const numValue = Math.max(0, Math.min(99, parseInt(value, 10) || 0));
+        tempAge.value = {
+          ...tempAge.value,
+          [type]: numValue
+        };
+      }
+    };
+    const toggleFilter = () => {
+      isFilterPage.value = !isFilterPage.value;
+    };
+    const handleAgeConfirm = () => {
+      const { min, max } = tempAge.value;
+      handleAgeChange({ min, max });
+    };
+    const handleFilterChange = () => {
+      var _a, _b, _c;
+      toggleFilter();
+      const isSameGender = ((_a = userAdvanced.value) == null ? void 0 : _a.gender) === tempGender.value;
+      const isSameMiniBirthday = ((_b = userAdvanced.value) == null ? void 0 : _b.miniBirthday) === ageToBirthday(tempAge.value.max);
+      const isSameMaxBirthday = ((_c = userAdvanced.value) == null ? void 0 : _c.maxBirthday) === ageToBirthday(tempAge.value.min);
+      if (isSameGender && isSameMiniBirthday && isSameMaxBirthday) {
+        return;
+      }
+      if (props.onAdvancedParamsChange) {
+        const newParams = new Map(props.advancedParams || []);
+        newParams.set(SearchType.USER, {
+          ...userAdvanced.value,
+          gender: tempGender.value === "不限" ? void 0 : tempGender.value,
+          miniBirthday: tempAge.value.max !== 99 ? ageToBirthday(tempAge.value.max) : void 0,
+          maxBirthday: tempAge.value.min !== 0 ? ageToBirthday(tempAge.value.min) : void 0
+        });
+        props.onAdvancedParamsChange(newParams);
+      }
+    };
+    const handleTempGender = (value) => {
+      tempGender.value = value;
+      isGenderOpen.value = false;
+    };
+    const setIsGenderOpen = (value) => {
+      isGenderOpen.value = value;
+      if (value) {
+        isAgeOpen.value = false;
+      }
+    };
+    const setIsAgeOpen = (value) => {
+      isAgeOpen.value = value;
+      if (value) {
+        isGenderOpen.value = false;
+      }
+    };
+    const setTempAge = (value) => {
+      tempAge.value = value;
+    };
+    const minAge = computed(
+      () => {
+        var _a;
+        return ((_a = userAdvanced.value) == null ? void 0 : _a.maxBirthday) ? birthdayToAge(userAdvanced.value.maxBirthday) : void 0;
+      }
+    );
+    const maxAge = computed(
+      () => {
+        var _a;
+        return ((_a = userAdvanced.value) == null ? void 0 : _a.miniBirthday) ? birthdayToAge(userAdvanced.value.miniBirthday) : void 0;
+      }
+    );
+    const getGenderText = (gender) => {
+      switch (gender) {
+        case TUIChatEngine.TYPES.GENDER_MALE:
+          return t("Search.filter.gender.male");
+        case TUIChatEngine.TYPES.GENDER_FEMALE:
+          return t("Search.filter.gender.female");
+        default:
+          return t("Search.filter.gender.any");
+      }
+    };
+    return (_ctx, _cache) => {
+      var _a;
+      return openBlock(), createElementBlock("div", {
+        class: normalizeClass(_ctx.$style.SearchUserAdvanced)
+      }, [
+        createElementVNode("div", {
+          class: normalizeClass(_ctx.$style["SearchUserAdvanced__filter-row"])
+        }, [
+          createElementVNode("div", {
+            class: normalizeClass(_ctx.$style["SearchUserAdvanced__filter-select"]),
+            onClick: _cache[0] || (_cache[0] = ($event) => unref(isH5) ? toggleFilter() : setIsGenderOpen(!isGenderOpen.value))
+          }, [
+            createElementVNode("span", {
+              class: normalizeClass(_ctx.$style["SearchUserAdvanced__filter-label"])
+            }, toDisplayString(unref(t)("Search.filter.gender")) + "： ", 3),
+            createElementVNode("span", {
+              class: normalizeClass(_ctx.$style["SearchUserAdvanced__filter-value"])
+            }, toDisplayString(getGenderText(((_a = userAdvanced.value) == null ? void 0 : _a.gender) || unref(t)("Search.filter.gender.any"))), 3),
+            createElementVNode("span", {
+              class: normalizeClass([_ctx.$style.SearchUserAdvanced__arrow, { [_ctx.$style["SearchUserAdvanced__arrow--up"]]: isGenderOpen.value }])
+            }, " ▼ ", 2)
+          ], 2),
+          !unref(isH5) && isGenderOpen.value ? (openBlock(), createElementBlock("div", {
+            key: 0,
+            class: normalizeClass(_ctx.$style.SearchUserAdvanced__dropdown),
+            ref_key: "genderRef",
+            ref: genderRef
+          }, [
+            (openBlock(), createElementBlock(Fragment, null, renderList(genderList, (item) => {
+              return createElementVNode("div", {
+                key: item.value,
+                class: normalizeClass(_ctx.$style.SearchUserAdvanced__option),
+                onClick: ($event) => handleGenderChange(item.value)
+              }, toDisplayString(item.label), 11, _hoisted_1);
+            }), 64))
+          ], 2)) : createCommentVNode("", true)
+        ], 2),
+        createElementVNode("div", {
+          class: normalizeClass(_ctx.$style["SearchUserAdvanced__filter-row"]),
+          ref_key: "ageRef",
+          ref: ageRef
+        }, [
+          createElementVNode("div", {
+            class: normalizeClass(_ctx.$style["SearchUserAdvanced__filter-select"]),
+            onClick: _cache[1] || (_cache[1] = ($event) => unref(isH5) ? toggleFilter() : setIsAgeOpen(!isAgeOpen.value))
+          }, [
+            createElementVNode("span", {
+              class: normalizeClass(_ctx.$style["SearchUserAdvanced__filter-label"])
+            }, toDisplayString(unref(t)("Search.filter.age")) + "： ", 3),
+            createElementVNode("span", {
+              class: normalizeClass(_ctx.$style["SearchUserAdvanced__filter-value"])
+            }, toDisplayString(`${minAge.value || "0"}-${maxAge.value || "99"} ${unref(t)("Search.filter.age.yearsOld")}`), 3),
+            !unref(isH5) ? (openBlock(), createElementBlock("span", {
+              key: 0,
+              class: normalizeClass([_ctx.$style.SearchUserAdvanced__arrow, { [_ctx.$style["SearchUserAdvanced__arrow--up"]]: isAgeOpen.value }])
+            }, " ▼ ", 2)) : createCommentVNode("", true)
+          ], 2),
+          !unref(isH5) && isAgeOpen.value ? (openBlock(), createElementBlock("div", {
+            key: 0,
+            class: normalizeClass(_ctx.$style.SearchUserAdvanced__dropdown)
+          }, [
+            createElementVNode("div", {
+              class: normalizeClass(_ctx.$style["SearchUserAdvanced__age-inputs"])
+            }, [
+              createElementVNode("input", {
+                type: "number",
+                min: "0",
+                max: "99",
+                value: tempAge.value.min ?? "",
+                placeholder: "0",
+                onInput: _cache[2] || (_cache[2] = (e) => handleAgeInputChange("min", e.target.value)),
+                class: normalizeClass(_ctx.$style["SearchUserAdvanced__age-input"])
+              }, null, 42, _hoisted_2),
+              _cache[7] || (_cache[7] = createElementVNode("span", null, "-", -1)),
+              createElementVNode("input", {
+                type: "number",
+                min: "0",
+                max: "99",
+                value: tempAge.value.max ?? "",
+                placeholder: "99",
+                onInput: _cache[3] || (_cache[3] = (e) => handleAgeInputChange("max", e.target.value)),
+                class: normalizeClass(_ctx.$style["SearchUserAdvanced__age-input"])
+              }, null, 42, _hoisted_3),
+              createElementVNode("span", null, toDisplayString(unref(t)("Search.filter.age.yearsOld")), 1),
+              createVNode(unref(TUIButton), {
+                class: normalizeClass(_ctx.$style["SearchUserAdvanced__confirm-button"]),
+                onClick: handleAgeConfirm
+              }, {
+                default: withCtx(() => [
+                  createTextVNode(toDisplayString(unref(t)("Search.action.confirm")), 1)
+                ]),
+                _: 1
+              }, 8, ["class"])
+            ], 2)
+          ], 2)) : createCommentVNode("", true)
+        ], 2),
+        unref(isH5) ? (openBlock(), createElementBlock("div", {
+          key: 0,
+          class: normalizeClass(_ctx.$style["SearchUserAdvanced__filter-row-right"]),
+          onClick: toggleFilter
+        }, [
+          createVNode(unref(IconSetting), {
+            class: normalizeClass(_ctx.$style["SearchUserAdvanced__filter-icon"])
+          }, null, 8, ["class"]),
+          createElementVNode("span", {
+            class: normalizeClass(_ctx.$style["SearchUserAdvanced__filter-text"])
+          }, toDisplayString(unref(t)("Search.filter.title")), 3)
+        ], 2)) : createCommentVNode("", true),
+        isFilterPage.value ? (openBlock(), createElementBlock("div", {
+          key: 1,
+          class: normalizeClass(_ctx.$style["SearchUserAdvanced__filter-page"])
+        }, [
+          createElementVNode("div", {
+            class: normalizeClass(_ctx.$style["SearchUserAdvanced__filter-page-header"])
+          }, [
+            createElementVNode("div", {
+              class: normalizeClass(_ctx.$style["SearchUserAdvanced__back-button"]),
+              onClick: toggleFilter
+            }, [
+              createVNode(unref(IconBack), { size: "24" })
+            ], 2),
+            createElementVNode("div", {
+              class: normalizeClass(_ctx.$style["SearchUserAdvanced__header-title"])
+            }, toDisplayString(unref(t)("Search.filter.title")), 3)
+          ], 2),
+          createElementVNode("div", {
+            class: normalizeClass(_ctx.$style["SearchUserAdvanced__filter-page-main"])
+          }, [
+            createElementVNode("div", {
+              class: normalizeClass([_ctx.$style["SearchUserAdvanced__filter-page-row"], _ctx.$style["SearchUserAdvanced__bottom-line"]]),
+              onClick: _cache[4] || (_cache[4] = ($event) => setIsGenderOpen(true))
+            }, [
+              createElementVNode("span", {
+                class: normalizeClass(_ctx.$style["SearchUserAdvanced__filter-page-label"])
+              }, toDisplayString(unref(t)("Search.filter.gender")), 3),
+              createElementVNode("div", {
+                class: normalizeClass(_ctx.$style["SearchUserAdvanced__filter-page-value"])
+              }, [
+                createElementVNode("span", null, toDisplayString(getGenderText(tempGender.value)), 1),
+                createElementVNode("span", {
+                  class: normalizeClass(_ctx.$style.SearchUserAdvanced__arrow)
+                }, ">", 2)
+              ], 2)
+            ], 2),
+            isGenderOpen.value ? (openBlock(), createElementBlock("div", {
+              key: 0,
+              class: normalizeClass(_ctx.$style["SearchUserAdvanced__action-sheet-mask"])
+            }, [
+              createElementVNode("div", {
+                class: normalizeClass(_ctx.$style["SearchUserAdvanced__action-sheet-panel"]),
+                ref_key: "genderRef",
+                ref: genderRef
+              }, [
+                (openBlock(), createElementBlock(Fragment, null, renderList(genderList, (item) => {
+                  return createElementVNode("div", {
+                    key: item.value,
+                    class: normalizeClass(_ctx.$style["SearchUserAdvanced__action-sheet-option"]),
+                    onClick: ($event) => handleTempGender(item.value)
+                  }, toDisplayString(item.label), 11, _hoisted_4);
+                }), 64)),
+                createElementVNode("div", {
+                  class: normalizeClass(_ctx.$style["SearchUserAdvanced__action-sheet-cancel"]),
+                  onClick: _cache[5] || (_cache[5] = ($event) => setIsGenderOpen(false))
+                }, toDisplayString(unref(t)("Search.action.cancel")), 3)
+              ], 2)
+            ], 2)) : createCommentVNode("", true),
+            createElementVNode("div", {
+              class: normalizeClass(_ctx.$style["SearchUserAdvanced__filter-page-row"])
+            }, [
+              createElementVNode("span", {
+                class: normalizeClass(_ctx.$style["SearchUserAdvanced__filter-page-label"])
+              }, toDisplayString(unref(t)("Search.filter.age")), 3),
+              createElementVNode("div", {
+                class: normalizeClass(_ctx.$style["SearchUserAdvanced__filter-page-value"])
+              }, [
+                createElementVNode("span", null, toDisplayString(`${tempAge.value.min ?? 0}-${tempAge.value.max ?? 99}`), 1)
+              ], 2)
+            ], 2),
+            createVNode(unref(Slider), {
+              value: [tempAge.value.min ?? 0, tempAge.value.max ?? 99],
+              min: 0,
+              max: 99,
+              onChange: _cache[6] || (_cache[6] = (val) => setTempAge({ min: val[0], max: val[1] }))
+            }, null, 8, ["value"])
+          ], 2),
+          createElementVNode("div", {
+            class: normalizeClass(_ctx.$style["SearchUserAdvanced__filter-page-footer"])
+          }, [
+            createVNode(unref(TUIButton), {
+              class: normalizeClass(_ctx.$style["SearchUserAdvanced__filter-confirm-button"]),
+              onClick: handleFilterChange
+            }, {
+              default: withCtx(() => [
+                createTextVNode(toDisplayString(unref(t)("Search.action.confirm")), 1)
+              ]),
+              _: 1
+            }, 8, ["class"])
+          ], 2)
+        ], 2)) : createCommentVNode("", true)
+      ], 2);
+    };
+  }
+});
+const SearchUserAdvanced = "_SearchUserAdvanced_spt9o_295";
+const SearchUserAdvanced__arrow = "_SearchUserAdvanced__arrow_spt9o_326";
+const SearchUserAdvanced__dropdown = "_SearchUserAdvanced__dropdown_spt9o_336";
+const SearchUserAdvanced__option = "_SearchUserAdvanced__option_spt9o_348";
+const style0 = {
+  "tui-theme-dark": "_tui-theme-dark_spt9o_2",
+  "tui-theme-light": "_tui-theme-light_spt9o_140",
+  SearchUserAdvanced,
+  "SearchUserAdvanced__filter-row": "_SearchUserAdvanced__filter-row_spt9o_302",
+  "SearchUserAdvanced__filter-select": "_SearchUserAdvanced__filter-select_spt9o_306",
+  "SearchUserAdvanced__filter-label": "_SearchUserAdvanced__filter-label_spt9o_315",
+  "SearchUserAdvanced__filter-value": "_SearchUserAdvanced__filter-value_spt9o_320",
+  SearchUserAdvanced__arrow,
+  "SearchUserAdvanced__arrow--up": "_SearchUserAdvanced__arrow--up_spt9o_332",
+  SearchUserAdvanced__dropdown,
+  SearchUserAdvanced__option,
+  "SearchUserAdvanced__age-inputs": "_SearchUserAdvanced__age-inputs_spt9o_361",
+  "SearchUserAdvanced__age-input": "_SearchUserAdvanced__age-input_spt9o_361",
+  "SearchUserAdvanced__confirm-button": "_SearchUserAdvanced__confirm-button_spt9o_402",
+  "SearchUserAdvanced__action-sheet-mask": "_SearchUserAdvanced__action-sheet-mask_spt9o_421",
+  "SearchUserAdvanced__action-sheet-panel": "_SearchUserAdvanced__action-sheet-panel_spt9o_434",
+  "SearchUserAdvanced-slideUp": "_SearchUserAdvanced-slideUp_spt9o_1",
+  "SearchUserAdvanced__action-sheet-option": "_SearchUserAdvanced__action-sheet-option_spt9o_451",
+  "SearchUserAdvanced__action-sheet-cancel": "_SearchUserAdvanced__action-sheet-cancel_spt9o_465",
+  "SearchUserAdvanced__action-sheet-confirm": "_SearchUserAdvanced__action-sheet-confirm_spt9o_474",
+  "SearchUserAdvanced__filter-row-right": "_SearchUserAdvanced__filter-row-right_spt9o_483",
+  "SearchUserAdvanced__filter-icon": "_SearchUserAdvanced__filter-icon_spt9o_490",
+  "SearchUserAdvanced__filter-text": "_SearchUserAdvanced__filter-text_spt9o_494",
+  "SearchUserAdvanced__age-inputs-sheet": "_SearchUserAdvanced__age-inputs-sheet_spt9o_499",
+  "SearchUserAdvanced__filter-page": "_SearchUserAdvanced__filter-page_spt9o_507",
+  "SearchUserAdvanced__filter-page-header": "_SearchUserAdvanced__filter-page-header_spt9o_520",
+  "SearchUserAdvanced__back-button": "_SearchUserAdvanced__back-button_spt9o_527",
+  "SearchUserAdvanced__header-title": "_SearchUserAdvanced__header-title_spt9o_534",
+  "SearchUserAdvanced__filter-page-main": "_SearchUserAdvanced__filter-page-main_spt9o_543",
+  "SearchUserAdvanced__bottom-line": "_SearchUserAdvanced__bottom-line_spt9o_552",
+  "SearchUserAdvanced__filter-page-row": "_SearchUserAdvanced__filter-page-row_spt9o_556",
+  "SearchUserAdvanced__filter-page-label": "_SearchUserAdvanced__filter-page-label_spt9o_564",
+  "SearchUserAdvanced__filter-page-value": "_SearchUserAdvanced__filter-page-value_spt9o_569",
+  "SearchUserAdvanced__filter-page-footer": "_SearchUserAdvanced__filter-page-footer_spt9o_577",
+  "SearchUserAdvanced__filter-confirm-button": "_SearchUserAdvanced__filter-confirm-button_spt9o_582"
+};
+const cssModules = {
+  "$style": style0
+};
+const UserAdvancedComponent = /* @__PURE__ */ _export_sfc(_sfc_main, [["__cssModules", cssModules]]);
+export {
+  UserAdvancedComponent as default
+};

package/dist/components/Search/SearchAdvanced/UserAdvanced/UserAdvanced.vue.d.ts

@@ -0,0 +1,17 @@
+import { SearchType } from '../../../../types/engine';
+
+interface IUserAdvancedProps {
+    advancedParams?: Map<SearchType, any>;
+    onAdvancedParamsChange?: (params: Map<SearchType, any>) => void;
+}
+declare const _default: import('vue').DefineComponent<import('vue').ExtractPropTypes<__VLS_TypePropsToRuntimeProps<IUserAdvancedProps>>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<__VLS_TypePropsToRuntimeProps<IUserAdvancedProps>>> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+export default _default;
+type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
+type __VLS_TypePropsToRuntimeProps<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K> ? {
+        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
+    } : {
+        type: import('vue').PropType<T[K]>;
+        required: true;
+    };
+};

package/dist/components/Search/SearchAdvanced/UserAdvanced/index.d.ts

@@ -0,0 +1,2 @@
+export { default as UserAdvanced } from './UserAdvanced.vue';
+export * from './UserAdvanced.vue';

package/dist/components/Search/SearchAdvanced/UserAdvanced/index.js

@@ -0,0 +1,4 @@
+import { default as default2 } from "./UserAdvanced.js";
+export {
+  default2 as UserAdvanced
+};

package/dist/components/Search/SearchAdvanced/index.d.ts

@@ -0,0 +1,8 @@
+import { default as SearchAdvancedComponent } from './SearchAdvanced.vue';
+
+export * from './MessageAdvanced';
+export * from './UserAdvanced';
+export * from './SearchTab';
+export * from './DateRangePicker';
+export * from './Slider';
+export default SearchAdvancedComponent;

package/dist/components/Search/SearchAdvanced/index.js

@@ -0,0 +1,14 @@
+import SearchAdvancedComponent from "./SearchAdvanced.js";
+import { default as default2 } from "./MessageAdvanced/MessageAdvanced.js";
+import { default as default3 } from "./UserAdvanced/UserAdvanced.js";
+import { default as default4 } from "./SearchTab/SearchTab.js";
+import { default as default5 } from "./DateRangePicker/DateRangePicker.js";
+import { default as default6 } from "./Slider/Slider.js";
+export {
+  default5 as DateRangePicker,
+  default2 as MessageAdvanced,
+  default4 as SearchTab,
+  default6 as Slider,
+  default3 as UserAdvanced,
+  SearchAdvancedComponent as default
+};

package/dist/components/Search/SearchBar/SearchBar.js

@@ -0,0 +1,154 @@
+import { defineComponent, ref, watch, computed, createElementBlock, openBlock, normalizeStyle, normalizeClass, createCommentVNode, createVNode, unref, withCtx, createElementVNode, createBlock, resolveDynamicComponent } from "vue";
+import { useUIKit, IconBack, TUIInput, IconCloseInput, IconSearch } from "@tencentcloud/uikit-base-component-vue3";
+import { VariantType } from "../../../types/search.js";
+import { isH5 } from "../../../utils/env.js";
+import { _ as _export_sfc } from "../../../_plugin-vue_export-helper-1tPrXgE0.js";
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "SearchBar",
+  props: {
+    value: { default: "" },
+    onChange: {},
+    onKeyDown: {},
+    onClear: {},
+    placeholder: {},
+    SearchIcon: {},
+    ClearIcon: {},
+    className: { default: "" },
+    style: { default: () => ({}) },
+    onFocus: {},
+    onBlur: {},
+    autoFocus: { type: Boolean, default: false },
+    variant: { default: VariantType.STANDARD }
+  },
+  setup(__props) {
+    const props = __props;
+    const inputValue = ref(props.value);
+    watch(
+      () => props.value,
+      (newValue) => {
+        inputValue.value = newValue || "";
+      }
+    );
+    const { t } = useUIKit();
+    const isHasBack = computed(() => props.variant !== VariantType.MINI && props.variant !== VariantType.EXACT && isH5);
+    const searchPlaceholderMap = {
+      [VariantType.EXACT]: t("Search.action.search"),
+      [VariantType.STANDARD]: t("Search.action.search"),
+      [VariantType.MINI]: t("Search.action.search"),
+      [VariantType.EMBEDDED]: t("Search.results.title")
+    };
+    const handleInput = (value) => {
+      var _a;
+      const stringValue = String(value);
+      const event = {
+        target: { value: stringValue }
+      };
+      (_a = props.onChange) == null ? void 0 : _a.call(props, event);
+    };
+    const handleFocus = (e) => {
+      var _a;
+      (_a = props.onFocus) == null ? void 0 : _a.call(props, e);
+    };
+    const handleBlur = (e) => {
+      var _a;
+      (_a = props.onBlur) == null ? void 0 : _a.call(props, e);
+    };
+    const handleDone = (element) => {
+      var _a;
+      if (element) {
+        const event = new KeyboardEvent("keydown", { key: "Enter" });
+        (_a = props.onKeyDown) == null ? void 0 : _a.call(props, event);
+      }
+    };
+    const handleClear = () => {
+      var _a;
+      inputValue.value = "";
+      (_a = props.onClear) == null ? void 0 : _a.call(props);
+    };
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        class: normalizeClass([_ctx.$style.SearchBar, isHasBack.value && _ctx.$style["SearchBar--h5"], _ctx.className]),
+        style: normalizeStyle(_ctx.style)
+      }, [
+        isHasBack.value ? (openBlock(), createElementBlock("div", {
+          key: 0,
+          class: normalizeClass(_ctx.$style["SearchBar__left"]),
+          onClick: handleClear
+        }, [
+          createVNode(unref(IconBack), { size: 24 })
+        ], 2)) : createCommentVNode("", true),
+        createVNode(unref(TUIInput), {
+          modelValue: inputValue.value,
+          "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => inputValue.value = $event),
+          placeholder: _ctx.placeholder || searchPlaceholderMap[_ctx.variant || unref(VariantType).STANDARD],
+          onInput: handleInput,
+          onFocus: handleFocus,
+          onBlur: handleBlur,
+          onDone: handleDone
+        }, {
+          prefix: withCtx(() => [
+            _ctx.SearchIcon ? (openBlock(), createBlock(resolveDynamicComponent(_ctx.SearchIcon), { key: 0 })) : (openBlock(), createBlock(unref(IconSearch), { key: 1 }))
+          ]),
+          suffix: withCtx(() => [
+            !isHasBack.value && inputValue.value ? (openBlock(), createElementBlock("div", {
+              key: 0,
+              class: normalizeClass(_ctx.$style["SearchBar__actions"])
+            }, [
+              createElementVNode("div", {
+                class: normalizeClass(_ctx.$style["SearchBar__clear-icon"]),
+                onClick: handleClear
+              }, [
+                _ctx.ClearIcon ? (openBlock(), createBlock(resolveDynamicComponent(_ctx.ClearIcon), { key: 0 })) : (openBlock(), createBlock(unref(IconCloseInput), {
+                  key: 1,
+                  class: "clearIcon"
+                }))
+              ], 2)
+            ], 2)) : createCommentVNode("", true)
+          ]),
+          _: 1
+        }, 8, ["modelValue", "placeholder"]),
+        isHasBack.value ? (openBlock(), createElementBlock("div", {
+          key: 1,
+          class: normalizeClass(_ctx.$style["SearchBar__right"]),
+          onClick: handleClear
+        }, [
+          createVNode(unref(IconBack), { size: 24 })
+        ], 2)) : createCommentVNode("", true)
+      ], 6);
+    };
+  }
+});
+const SearchBar = "_SearchBar_1ob40_295";
+const SearchBar__left = "_SearchBar__left_1ob40_301";
+const SearchBar__right = "_SearchBar__right_1ob40_304";
+const SearchBar__icon = "_SearchBar__icon_1ob40_308";
+const SearchBar__input = "_SearchBar__input_1ob40_313";
+const clearIcon = "_clearIcon_1ob40_372";
+const SearchBar__button = "_SearchBar__button_1ob40_382";
+const SearchBar__actions = "_SearchBar__actions_1ob40_386";
+const style0 = {
+  "tui-theme-dark": "_tui-theme-dark_1ob40_2",
+  "tui-theme-light": "_tui-theme-light_1ob40_140",
+  SearchBar,
+  SearchBar__left,
+  SearchBar__right,
+  SearchBar__icon,
+  SearchBar__input,
+  "tui-input": "_tui-input_1ob40_316",
+  "tui-input__native-input": "_tui-input__native-input_1ob40_319",
+  "tui-input__prefix-icon": "_tui-input__prefix-icon_1ob40_336",
+  "tui-input__clear-icon": "_tui-input__clear-icon_1ob40_347",
+  "SearchBar__clear-icon": "_SearchBar__clear-icon_1ob40_365",
+  clearIcon,
+  "SearchBar__clear-icon--default": "_SearchBar__clear-icon--default_1ob40_378",
+  SearchBar__button,
+  SearchBar__actions,
+  "SearchBar--h5": "_SearchBar--h5_1ob40_391"
+};
+const cssModules = {
+  "$style": style0
+};
+const SearchBarComponent = /* @__PURE__ */ _export_sfc(_sfc_main, [["__cssModules", cssModules]]);
+export {
+  SearchBarComponent as default
+};