tuikit-atomicx-vue3 0.1.0 → 3.3.0-beta.3

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

@@ -0,0 +1,267 @@
+import { defineComponent, ref, onMounted, onUnmounted, watch, createElementBlock, openBlock, normalizeClass, createElementVNode, createCommentVNode, toDisplayString, unref, Fragment, renderList, createVNode, withCtx, createTextVNode } from "vue";
+import { useUIKit, TUIButton } from "@tencentcloud/uikit-base-component-vue3";
+import { SearchType } from "../../../../types/engine.js";
+import DateRangePicker from "../DateRangePicker/DateRangePicker.js";
+import { _ as _export_sfc } from "../../../../_plugin-vue_export-helper-1tPrXgE0.js";
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "MessageAdvanced",
+  props: {
+    advancedParams: {},
+    onAdvancedParamsChange: { type: Function }
+  },
+  setup(__props) {
+    const props = __props;
+    const { t } = useUIKit();
+    const isDatePickerOpen = ref(false);
+    const dateRange = ref([null, null]);
+    const datePickerRef = ref();
+    const activeQuickOption = ref("");
+    const quickOptions = [
+      { label: t("Search.timeFilter.today"), value: "today" },
+      { label: t("Search.timeFilter.last3Days"), value: "last3days" },
+      { label: t("Search.timeFilter.last7Days"), value: "last7days" }
+    ];
+    const handleClickOutside = (event) => {
+      if (datePickerRef.value && !datePickerRef.value.contains(event.target)) {
+        isDatePickerOpen.value = false;
+      }
+    };
+    onMounted(() => {
+      document.addEventListener("mousedown", handleClickOutside);
+    });
+    onUnmounted(() => {
+      document.removeEventListener("mousedown", handleClickOutside);
+    });
+    const setStartOfDay = (date) => {
+      const newDate = new Date(date);
+      newDate.setHours(0, 0, 0, 0);
+      return newDate;
+    };
+    const setEndOfDay = (date) => {
+      const newDate = new Date(date);
+      newDate.setHours(23, 59, 59, 999);
+      return newDate;
+    };
+    watch(
+      () => props.advancedParams,
+      (newParams) => {
+        const messageParams = newParams == null ? void 0 : newParams.get(SearchType.MESSAGE);
+        let newDateRange = [null, null];
+        if ((messageParams == null ? void 0 : messageParams.timePosition) && (messageParams == null ? void 0 : messageParams.timePeriod)) {
+          const endTimes = new Date(messageParams.timePosition * 1e3);
+          const startTimes = new Date((messageParams.timePosition - messageParams.timePeriod) * 1e3);
+          newDateRange = [startTimes, endTimes];
+        }
+        dateRange.value = newDateRange;
+      },
+      { immediate: true }
+    );
+    const dateRangeMatch = (startTime, endTime, daysAgo) => {
+      if (!startTime || !endTime) {
+        return false;
+      }
+      const today = /* @__PURE__ */ new Date();
+      const endOfToday = setEndOfDay(today).getTime();
+      const date = /* @__PURE__ */ new Date();
+      date.setDate(date.getDate() - (daysAgo - 1));
+      const startOfDaysAgo = setStartOfDay(date).getTime();
+      return endTime === endOfToday && startTime === startOfDaysAgo;
+    };
+    function matchQuickOptionByDateRange([start, end]) {
+      const startTimes = start == null ? void 0 : start.getTime();
+      const endTimes = end == null ? void 0 : end.getTime();
+      const quickOptionMatches = [
+        { option: "today", days: 1 },
+        { option: "last3days", days: 3 },
+        { option: "last7days", days: 7 }
+      ];
+      const matchedOption = quickOptionMatches.find(({ days }) => dateRangeMatch(startTimes, endTimes, days));
+      return (matchedOption == null ? void 0 : matchedOption.option) || "";
+    }
+    watch(
+      dateRange,
+      (newDateRange) => {
+        var _a, _b;
+        if (!activeQuickOption.value) {
+          const startTimes = (_a = newDateRange[0]) == null ? void 0 : _a.getTime();
+          const endTimes = (_b = newDateRange[1]) == null ? void 0 : _b.getTime();
+          const quickOptionMatches = [
+            { option: "today", days: 1 },
+            { option: "last3days", days: 3 },
+            { option: "last7days", days: 7 }
+          ];
+          const matchedOption = quickOptionMatches.find(({ days }) => dateRangeMatch(startTimes, endTimes, days));
+          activeQuickOption.value = (matchedOption == null ? void 0 : matchedOption.option) || "";
+        }
+      },
+      { immediate: true }
+    );
+    const getDateRangeText = () => {
+      const [start, end] = dateRange.value;
+      if (!start || !end) {
+        return t("Search.timeFilter.allTime");
+      }
+      return `${start.toLocaleDateString()} - ${end.toLocaleDateString()}`;
+    };
+    const toggleDatePicker = () => {
+      isDatePickerOpen.value = !isDatePickerOpen.value;
+    };
+    const handleDateRange = (dates, quickOption) => {
+      const [startDate, endDate] = dates;
+      const options = {
+        timePosition: 0,
+        timePeriod: 0
+      };
+      if (startDate && endDate) {
+        const startTimestamp = Math.floor(startDate.getTime() / 1e3);
+        options.timePosition = Math.floor(endDate.getTime() / 1e3);
+        options.timePeriod = options.timePosition - startTimestamp;
+      }
+      if (quickOption !== void 0) {
+        activeQuickOption.value = quickOption;
+      }
+      if (props.onAdvancedParamsChange) {
+        const newParams = new Map(props.advancedParams || []);
+        newParams.set(SearchType.MESSAGE, {
+          ...newParams.get(SearchType.MESSAGE),
+          ...options
+        });
+        props.onAdvancedParamsChange(newParams);
+      }
+    };
+    const onDateRangeChange = (dates) => {
+      var _a, _b;
+      const [startDate, endDate] = dates;
+      if (!startDate && !endDate) {
+        isDatePickerOpen.value = false;
+      }
+      if (!startDate || !endDate) {
+        return;
+      }
+      isDatePickerOpen.value = false;
+      const isSameStart = (startDate == null ? void 0 : startDate.getTime()) === ((_a = dateRange.value[0]) == null ? void 0 : _a.getTime());
+      const isSameEnd = (endDate == null ? void 0 : endDate.getTime()) === ((_b = dateRange.value[1]) == null ? void 0 : _b.getTime());
+      if (isSameStart && isSameEnd) {
+        return;
+      }
+      handleDateRange(dates);
+      activeQuickOption.value = matchQuickOptionByDateRange(dates);
+    };
+    const handleQuickOptionClick = (option) => {
+      const activeOption = option === activeQuickOption.value ? "" : option;
+      const today = /* @__PURE__ */ new Date();
+      let start = null;
+      let end = null;
+      if (option !== activeQuickOption.value) {
+        switch (option) {
+          case "today":
+            start = setStartOfDay(today);
+            end = setEndOfDay(today);
+            break;
+          case "last3days": {
+            const startDate = new Date(today);
+            startDate.setDate(today.getDate() - 2);
+            start = setStartOfDay(startDate);
+            end = setEndOfDay(today);
+            break;
+          }
+          case "last7days": {
+            const startDate = new Date(today);
+            startDate.setDate(today.getDate() - 6);
+            start = setStartOfDay(startDate);
+            end = setEndOfDay(today);
+            break;
+          }
+          default:
+            start = null;
+            end = null;
+            break;
+        }
+      }
+      const dates = [start, end];
+      handleDateRange(dates, activeOption);
+    };
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        class: normalizeClass(_ctx.$style.SearchMessageAdvanced)
+      }, [
+        createElementVNode("div", {
+          ref_key: "datePickerRef",
+          ref: datePickerRef,
+          class: normalizeClass(_ctx.$style["SearchMessageAdvanced__filter-row"])
+        }, [
+          createElementVNode("div", {
+            class: normalizeClass(_ctx.$style["SearchMessageAdvanced__filter-select"]),
+            onClick: toggleDatePicker
+          }, [
+            createElementVNode("span", {
+              class: normalizeClass(_ctx.$style["SearchMessageAdvanced__filter-label"])
+            }, toDisplayString(unref(t)("Search.input.selectTime")) + "： ", 3),
+            createElementVNode("span", {
+              class: normalizeClass(_ctx.$style["SearchMessageAdvanced__filter-value"])
+            }, toDisplayString(getDateRangeText()), 3),
+            createElementVNode("span", {
+              class: normalizeClass([
+                _ctx.$style["SearchMessageAdvanced__arrow"],
+                { [_ctx.$style["SearchMessageAdvanced__arrow--up"]]: isDatePickerOpen.value }
+              ])
+            }, " ▼ ", 2)
+          ], 2),
+          createElementVNode("div", {
+            class: normalizeClass(_ctx.$style["SearchMessageAdvanced__quick-options"])
+          }, [
+            (openBlock(), createElementBlock(Fragment, null, renderList(quickOptions, (option) => {
+              return createVNode(unref(TUIButton), {
+                key: option.value,
+                type: "text",
+                class: normalizeClass([
+                  _ctx.$style["SearchMessageAdvanced__quick-option"],
+                  { [_ctx.$style["SearchMessageAdvanced__quick-option--active"]]: activeQuickOption.value === option.value }
+                ]),
+                onClick: ($event) => handleQuickOptionClick(option.value)
+              }, {
+                default: withCtx(() => [
+                  createTextVNode(toDisplayString(option.label), 1)
+                ]),
+                _: 2
+              }, 1032, ["class", "onClick"]);
+            }), 64))
+          ], 2),
+          isDatePickerOpen.value ? (openBlock(), createElementBlock("div", {
+            key: 0,
+            class: normalizeClass(_ctx.$style["SearchMessageAdvanced__date-picker-dropdown"])
+          }, [
+            createVNode(unref(DateRangePicker), {
+              value: dateRange.value,
+              onChange: onDateRangeChange
+            }, null, 8, ["value"])
+          ], 2)) : createCommentVNode("", true)
+        ], 2)
+      ], 2);
+    };
+  }
+});
+const SearchMessageAdvanced = "_SearchMessageAdvanced_14t80_295";
+const SearchMessageAdvanced__arrow = "_SearchMessageAdvanced__arrow_14t80_329";
+const style0 = {
+  "tui-theme-dark": "_tui-theme-dark_14t80_2",
+  "tui-theme-light": "_tui-theme-light_14t80_140",
+  SearchMessageAdvanced,
+  "SearchMessageAdvanced__filter-row": "_SearchMessageAdvanced__filter-row_14t80_302",
+  "SearchMessageAdvanced__filter-select": "_SearchMessageAdvanced__filter-select_14t80_309",
+  "SearchMessageAdvanced__filter-label": "_SearchMessageAdvanced__filter-label_14t80_318",
+  "SearchMessageAdvanced__filter-value": "_SearchMessageAdvanced__filter-value_14t80_323",
+  SearchMessageAdvanced__arrow,
+  "SearchMessageAdvanced__arrow--up": "_SearchMessageAdvanced__arrow--up_14t80_335",
+  "SearchMessageAdvanced__quick-options": "_SearchMessageAdvanced__quick-options_14t80_339",
+  "SearchMessageAdvanced__quick-option": "_SearchMessageAdvanced__quick-option_14t80_339",
+  "SearchMessageAdvanced__quick-option--active": "_SearchMessageAdvanced__quick-option--active_14t80_362",
+  "SearchMessageAdvanced__date-picker-dropdown": "_SearchMessageAdvanced__date-picker-dropdown_14t80_367"
+};
+const cssModules = {
+  "$style": style0
+};
+const MessageAdvancedComponent = /* @__PURE__ */ _export_sfc(_sfc_main, [["__cssModules", cssModules]]);
+export {
+  MessageAdvancedComponent as default
+};

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

@@ -0,0 +1,17 @@
+import { SearchType } from '../../../../types/engine';
+
+interface IMessageAdvancedProps {
+    advancedParams?: Map<SearchType, any>;
+    onAdvancedParamsChange?: (params: Map<SearchType, any>) => void;
+}
+declare const _default: import('vue').DefineComponent<import('vue').ExtractPropTypes<__VLS_TypePropsToRuntimeProps<IMessageAdvancedProps>>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<__VLS_TypePropsToRuntimeProps<IMessageAdvancedProps>>> & 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/MessageAdvanced/index.d.ts

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

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

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

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

@@ -0,0 +1,76 @@
+import { defineComponent, createElementBlock, openBlock, normalizeClass, createBlock, createCommentVNode, unref } from "vue";
+import { useSearchState } from "../../../states/SearchState.js";
+import { SearchType } from "../../../types/engine.js";
+import { VariantType } from "../../../types/search.js";
+import SearchTab from "./SearchTab/SearchTab.js";
+import MessageAdvancedComponent from "./MessageAdvanced/MessageAdvanced.js";
+import UserAdvancedComponent from "./UserAdvanced/UserAdvanced.js";
+import { _ as _export_sfc } from "../../../_plugin-vue_export-helper-1tPrXgE0.js";
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "SearchAdvanced",
+  props: {
+    variant: { default: VariantType.STANDARD },
+    searchType: { default: "all" },
+    advancedParams: {},
+    onAdvancedParamsChange: {}
+  },
+  setup(__props) {
+    const props = __props;
+    const { setSelectedType } = useSearchState(props.variant);
+    const handleTabChange = (tab) => {
+      setSelectedType(tab);
+    };
+    const handleMessageAdvancedChange = (params) => {
+      const messageParams = params.get(SearchType.MESSAGE);
+      if (messageParams) {
+        props.onAdvancedParamsChange(SearchType.MESSAGE, messageParams);
+      }
+    };
+    const handleUserAdvancedChange = (params) => {
+      const userParams = params.get(SearchType.USER);
+      if (userParams) {
+        props.onAdvancedParamsChange(SearchType.USER, userParams);
+      }
+    };
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        class: normalizeClass(_ctx.$style.SearchAdvanced)
+      }, [
+        _ctx.variant === unref(VariantType).STANDARD ? (openBlock(), createBlock(unref(SearchTab), {
+          key: 0,
+          "active-tab": _ctx.searchType,
+          onTabChange: handleTabChange
+        }, null, 8, ["active-tab"])) : createCommentVNode("", true),
+        _ctx.variant === unref(VariantType).STANDARD && _ctx.searchType === unref(SearchType).MESSAGE ? (openBlock(), createBlock(unref(MessageAdvancedComponent), {
+          key: 1,
+          variant: _ctx.variant,
+          "advanced-params": _ctx.advancedParams,
+          onAdvancedParamsChange: handleMessageAdvancedChange
+        }, null, 8, ["variant", "advanced-params"])) : createCommentVNode("", true),
+        _ctx.variant === unref(VariantType).STANDARD && _ctx.searchType === unref(SearchType).USER ? (openBlock(), createBlock(unref(UserAdvancedComponent), {
+          key: 2,
+          variant: _ctx.variant,
+          "advanced-params": _ctx.advancedParams,
+          onAdvancedParamsChange: handleUserAdvancedChange
+        }, null, 8, ["variant", "advanced-params"])) : createCommentVNode("", true)
+      ], 2);
+    };
+  }
+});
+const SearchAdvanced = "_SearchAdvanced_1gxzr_295";
+const style0 = {
+  "tui-theme-dark": "_tui-theme-dark_1gxzr_2",
+  "tui-theme-light": "_tui-theme-light_1gxzr_140",
+  SearchAdvanced,
+  "SearchAdvanced__mode-toggle": "_SearchAdvanced__mode-toggle_1gxzr_299",
+  "SearchAdvanced__mode-toggle-icon": "_SearchAdvanced__mode-toggle-icon_1gxzr_311",
+  "SearchAdvanced__mode-toggle-desc": "_SearchAdvanced__mode-toggle-desc_1gxzr_321",
+  "SearchAdvanced__date-picker-dropdown": "_SearchAdvanced__date-picker-dropdown_1gxzr_335"
+};
+const cssModules = {
+  "$style": style0
+};
+const SearchAdvancedComponent = /* @__PURE__ */ _export_sfc(_sfc_main, [["__cssModules", cssModules]]);
+export {
+  SearchAdvancedComponent as default
+};

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

@@ -0,0 +1,30 @@
+import { VariantType, SearchAdvancedProps, SearchTabType } from '../../../types/search';
+
+declare const _default: import('vue').DefineComponent<import('vue').ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<SearchAdvancedProps>, {
+    variant: VariantType;
+    searchType: string;
+}>>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<SearchAdvancedProps>, {
+    variant: VariantType;
+    searchType: string;
+}>>> & Readonly<{}>, {
+    variant: VariantType;
+    searchType: SearchTabType;
+}, {}, {}, {}, 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;
+    };
+};
+type __VLS_WithDefaults<P, D> = {
+    [K in keyof Pick<P, keyof P>]: K extends keyof D ? __VLS_Prettify<P[K] & {
+        default: D[K];
+    }> : P[K];
+};
+type __VLS_Prettify<T> = {
+    [K in keyof T]: T[K];
+} & {};

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

@@ -0,0 +1,64 @@
+import { defineComponent, computed, createElementBlock, openBlock, normalizeClass, Fragment, renderList, createBlock, unref, withCtx, createTextVNode, toDisplayString } from "vue";
+import { useUIKit, TUIButton } from "@tencentcloud/uikit-base-component-vue3";
+import { SearchType } from "../../../../types/engine.js";
+import { _ as _export_sfc } from "../../../../_plugin-vue_export-helper-1tPrXgE0.js";
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "SearchTab",
+  props: {
+    activeTab: {}
+  },
+  emits: ["tab-change"],
+  setup(__props, { emit: __emit }) {
+    const emit = __emit;
+    const { t } = useUIKit();
+    const tabs = computed(() => [
+      { key: "all", label: t("Search.type.all") },
+      { key: SearchType.MESSAGE, label: t("Search.type.messages") },
+      { key: SearchType.USER, label: t("Search.type.users") },
+      { key: SearchType.GROUP, label: t("Search.type.groups") }
+    ]);
+    const handleTabClick = (tabKey) => {
+      emit("tab-change", tabKey);
+    };
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        class: normalizeClass(_ctx.$style.SearchTab)
+      }, [
+        (openBlock(true), createElementBlock(Fragment, null, renderList(tabs.value, (tab) => {
+          return openBlock(), createBlock(unref(TUIButton), {
+            key: tab.key,
+            type: "text",
+            class: normalizeClass([
+              _ctx.$style["SearchTab__item"],
+              {
+                [_ctx.$style["SearchTab__item--active"]]: _ctx.activeTab === tab.key
+              }
+            ]),
+            onClick: ($event) => handleTabClick(tab.key)
+          }, {
+            default: withCtx(() => [
+              createTextVNode(toDisplayString(tab.label), 1)
+            ]),
+            _: 2
+          }, 1032, ["class", "onClick"]);
+        }), 128))
+      ], 2);
+    };
+  }
+});
+const SearchTab$1 = "_SearchTab_1ismi_295";
+const SearchTab__item = "_SearchTab__item_1ismi_305";
+const style0 = {
+  "tui-theme-dark": "_tui-theme-dark_1ismi_2",
+  "tui-theme-light": "_tui-theme-light_1ismi_140",
+  SearchTab: SearchTab$1,
+  SearchTab__item,
+  "SearchTab__item--active": "_SearchTab__item--active_1ismi_323"
+};
+const cssModules = {
+  "$style": style0
+};
+const SearchTab = /* @__PURE__ */ _export_sfc(_sfc_main, [["__cssModules", cssModules]]);
+export {
+  SearchTab as default
+};

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

@@ -0,0 +1,20 @@
+import { SearchTabType } from '../../../../types/search';
+
+interface Props {
+    activeTab: SearchTabType;
+}
+declare const _default: import('vue').DefineComponent<import('vue').ExtractPropTypes<__VLS_TypePropsToRuntimeProps<Props>>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    "tab-change": (tab: SearchTabType) => void;
+}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<__VLS_TypePropsToRuntimeProps<Props>>> & Readonly<{
+    "onTab-change"?: ((tab: SearchTabType) => any) | undefined;
+}>, {}, {}, {}, {}, 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/SearchTab/index.d.ts

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

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

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

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

@@ -0,0 +1,97 @@
+import { defineComponent, ref, createElementBlock, openBlock, normalizeClass, createElementVNode, normalizeStyle } from "vue";
+import { _ as _export_sfc } from "../../../../_plugin-vue_export-helper-1tPrXgE0.js";
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "Slider",
+  props: {
+    value: {},
+    min: { default: 0 },
+    max: { default: 99 },
+    onChange: {}
+  },
+  setup(__props) {
+    const props = __props;
+    const trackRef = ref();
+    const clamp = (val, min, max) => Math.max(min, Math.min(max, val));
+    const getPercent = (val) => (val - props.min) / (props.max - props.min) * 100;
+    const handleDrag = (e, type) => {
+      var _a;
+      const clientX = "touches" in e ? e.touches[0].clientX : e.clientX;
+      const track = trackRef.value;
+      if (!track) return;
+      const rect = track.getBoundingClientRect();
+      const percent = clamp((clientX - rect.left) / rect.width, 0, 1);
+      const val = Math.round(percent * (props.max - props.min) + props.min);
+      let newValue = props.value;
+      if (type === "min") {
+        newValue = [clamp(val, props.min, props.value[1]), props.value[1]];
+      } else {
+        newValue = [props.value[0], clamp(val, props.value[0], props.max)];
+      }
+      (_a = props.onChange) == null ? void 0 : _a.call(props, newValue);
+    };
+    const handleStart = (type, e) => {
+      handleDrag(e, type);
+      const moveHandler = (moveEvent) => handleDrag(moveEvent, type);
+      const upHandler = () => {
+        window.removeEventListener("mousemove", moveHandler);
+        window.removeEventListener("touchmove", moveHandler);
+        window.removeEventListener("mouseup", upHandler);
+        window.removeEventListener("touchend", upHandler);
+      };
+      window.addEventListener("mousemove", moveHandler);
+      window.addEventListener("touchmove", moveHandler);
+      window.addEventListener("mouseup", upHandler);
+      window.addEventListener("touchend", upHandler);
+    };
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        class: normalizeClass(_ctx.$style.SearchSlider)
+      }, [
+        createElementVNode("div", {
+          class: normalizeClass(_ctx.$style.SearchSlider__rail),
+          ref_key: "trackRef",
+          ref: trackRef
+        }, [
+          createElementVNode("div", {
+            class: normalizeClass(_ctx.$style.SearchSlider__track),
+            style: normalizeStyle({
+              left: `${getPercent(_ctx.value[0])}%`,
+              width: `${getPercent(_ctx.value[1]) - getPercent(_ctx.value[0])}%`
+            })
+          }, null, 6),
+          createElementVNode("div", {
+            class: normalizeClass(_ctx.$style.SearchSlider__thumb),
+            style: normalizeStyle({ left: `${getPercent(_ctx.value[0])}%` }),
+            onMousedown: _cache[0] || (_cache[0] = (e) => handleStart("min", e)),
+            onTouchstart: _cache[1] || (_cache[1] = (e) => handleStart("min", e))
+          }, null, 38),
+          createElementVNode("div", {
+            class: normalizeClass(_ctx.$style.SearchSlider__thumb),
+            style: normalizeStyle({ left: `${getPercent(_ctx.value[1])}%` }),
+            onMousedown: _cache[2] || (_cache[2] = (e) => handleStart("max", e)),
+            onTouchstart: _cache[3] || (_cache[3] = (e) => handleStart("max", e))
+          }, null, 38)
+        ], 2)
+      ], 2);
+    };
+  }
+});
+const SearchSlider = "_SearchSlider_150a9_295";
+const SearchSlider__rail = "_SearchSlider__rail_150a9_299";
+const SearchSlider__track = "_SearchSlider__track_150a9_307";
+const SearchSlider__thumb = "_SearchSlider__thumb_150a9_315";
+const style0 = {
+  "tui-theme-dark": "_tui-theme-dark_150a9_2",
+  "tui-theme-light": "_tui-theme-light_150a9_140",
+  SearchSlider,
+  SearchSlider__rail,
+  SearchSlider__track,
+  SearchSlider__thumb
+};
+const cssModules = {
+  "$style": style0
+};
+const Slider = /* @__PURE__ */ _export_sfc(_sfc_main, [["__cssModules", cssModules]]);
+export {
+  Slider as default
+};

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

@@ -0,0 +1,34 @@
+interface SliderProps {
+    value: [number, number];
+    min?: number;
+    max?: number;
+    onChange?: (value: [number, number]) => void;
+}
+declare const _default: import('vue').DefineComponent<import('vue').ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<SliderProps>, {
+    min: number;
+    max: number;
+}>>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<SliderProps>, {
+    min: number;
+    max: number;
+}>>> & Readonly<{}>, {
+    max: number;
+    min: number;
+}, {}, {}, {}, 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;
+    };
+};
+type __VLS_WithDefaults<P, D> = {
+    [K in keyof Pick<P, keyof P>]: K extends keyof D ? __VLS_Prettify<P[K] & {
+        default: D[K];
+    }> : P[K];
+};
+type __VLS_Prettify<T> = {
+    [K in keyof T]: T[K];
+} & {};

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

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

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

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