@ozdao/martyrs 0.2.482 → 0.2.484

package/dist/martyrs/src/modules/globals/views/components/sections/Filters.vue2.cjs

@@ -0,0 +1,183 @@
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const vue = require("vue");
+const Popup = require("../../../../../components/Popup/Popup.vue2.cjs");
+const IconFilter = require("../../../../icons/navigation/IconFilter.vue.cjs");
+const IconCross = require("../../../../icons/navigation/IconCross.vue.cjs");
+const FilterOptions = require("./filters/FilterOptions.vue.cjs");
+const FilterRange = require("./filters/FilterRange.vue2.cjs");
+const FilterPrice = require("./filters/FilterPrice.vue.cjs");
+;/* empty css              */
+const _hoisted_1 = { class: "flex gap-thin" };
+const _hoisted_2 = {
+  key: 0,
+  class: "ml-thin"
+};
+const _hoisted_3 = ["onClick"];
+const _hoisted_4 = { class: "pd-medium bg-white radius-top-medium" };
+const _hoisted_5 = { class: "flex justify-between align-center mb-medium" };
+const _hoisted_6 = { class: "filters-container" };
+const _hoisted_7 = { class: "t-h4 mb-thin" };
+const _hoisted_8 = { class: "pd-medium bg-white radius-medium" };
+const _hoisted_9 = { class: "t-h4 mb-thin" };
+const _sfc_main = {
+  __name: "Filters",
+  props: /* @__PURE__ */ vue.mergeModels({
+    filters: {
+      type: Array,
+      required: true
+    }
+  }, {
+    "modelValue": {
+      type: Object,
+      default: () => ({})
+    },
+    "modelModifiers": {}
+  }),
+  emits: ["update:modelValue"],
+  setup(__props) {
+    const props = __props;
+    const model = vue.useModel(__props, "modelValue");
+    const showAllFilters = vue.ref(false);
+    const individualPopups = vue.reactive({});
+    const appliedFilters = vue.reactive({});
+    props.filters.forEach((filter) => {
+      individualPopups[props.filters.indexOf(filter)] = false;
+      if (!appliedFilters[filter.key]) {
+        appliedFilters[filter.key] = filter.defaultValue || null;
+      }
+    });
+    const hasActiveFilters = vue.computed(() => {
+      return Object.values(appliedFilters).some((v) => v !== null && v !== void 0);
+    });
+    const activeFiltersCount = vue.computed(() => {
+      return Object.values(appliedFilters).filter((v) => v !== null && v !== void 0).length;
+    });
+    const getFilterComponent = (type) => {
+      if (typeof type === "object") return type;
+      const components = {
+        options: FilterOptions.default,
+        range: FilterRange.default,
+        price: FilterPrice.default
+      };
+      return components[type] || FilterOptions.default;
+    };
+    const getFilterLabel = (filter) => {
+      const value = appliedFilters[filter.key];
+      if (!value) return filter.title;
+      if (Array.isArray(value) && value.length) {
+        return `${filter.title} (${value.length})`;
+      }
+      if (typeof value === "object" && (value.min || value.max)) {
+        return `${filter.title}: ${value.min || 0}-${value.max || "∞"}`;
+      }
+      return `${filter.title}: ${value}`;
+    };
+    const getFilterActiveState = (filter) => {
+      const value = appliedFilters[filter.key];
+      return value !== null && value !== void 0;
+    };
+    const openFilter = (idx) => {
+      individualPopups[idx] = true;
+    };
+    const updateFilter = (key) => {
+      model.value = { ...appliedFilters };
+    };
+    const applyFilters = () => {
+      model.value = { ...appliedFilters };
+      showAllFilters.value = false;
+    };
+    const resetFilters = () => {
+      Object.keys(appliedFilters).forEach((key) => {
+        appliedFilters[key] = null;
+      });
+      model.value = {};
+    };
+    return (_ctx, _cache) => {
+      return vue.openBlock(), vue.createElementBlock("div", _hoisted_1, [
+        vue.createElementVNode("button", {
+          onClick: _cache[0] || (_cache[0] = ($event) => showAllFilters.value = true),
+          class: vue.normalizeClass(["btn-filter radius-medium pd-thin bg-light", { "bg-primary t-white": hasActiveFilters.value }])
+        }, [
+          vue.createVNode(IconFilter.default, { class: "w-1r h-auto" }),
+          activeFiltersCount.value ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_2, vue.toDisplayString(activeFiltersCount.value), 1)) : vue.createCommentVNode("", true)
+        ], 2),
+        (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(__props.filters, (filter, idx) => {
+          return vue.openBlock(), vue.createElementBlock("button", {
+            key: idx,
+            onClick: () => openFilter(idx),
+            class: vue.normalizeClass(["btn-filter radius-medium pd-thin bg-light", { "bg-primary t-white": getFilterActiveState(filter) }])
+          }, vue.toDisplayString(getFilterLabel(filter)), 11, _hoisted_3);
+        }), 128)),
+        vue.createVNode(Popup.default, {
+          show: showAllFilters.value,
+          "onUpdate:show": _cache[2] || (_cache[2] = ($event) => showAllFilters.value = $event),
+          align: "bottom center",
+          class: "w-100 max-h-80vh"
+        }, {
+          default: vue.withCtx(() => [
+            vue.createElementVNode("div", _hoisted_4, [
+              vue.createElementVNode("div", _hoisted_5, [
+                _cache[3] || (_cache[3] = vue.createElementVNode("h3", { class: "t-h3" }, "Filters", -1)),
+                vue.createVNode(IconCross.default, {
+                  onClick: _cache[1] || (_cache[1] = ($event) => showAllFilters.value = false),
+                  class: "w-1r h-auto cursor-pointer"
+                })
+              ]),
+              vue.createElementVNode("div", _hoisted_6, [
+                (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(__props.filters, (filter, idx) => {
+                  return vue.openBlock(), vue.createElementBlock("div", {
+                    key: idx,
+                    class: "mb-medium"
+                  }, [
+                    vue.createElementVNode("h4", _hoisted_7, vue.toDisplayString(filter.title), 1),
+                    (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(getFilterComponent(filter.type)), {
+                      modelValue: appliedFilters[filter.key],
+                      "onUpdate:modelValue": ($event) => appliedFilters[filter.key] = $event,
+                      options: filter.options,
+                      config: filter.config
+                    }, null, 8, ["modelValue", "onUpdate:modelValue", "options", "config"]))
+                  ]);
+                }), 128))
+              ]),
+              vue.createElementVNode("div", { class: "flex gap-thin mt-medium" }, [
+                vue.createElementVNode("button", {
+                  onClick: applyFilters,
+                  class: "btn btn-primary flex-1"
+                }, "Apply"),
+                vue.createElementVNode("button", {
+                  onClick: resetFilters,
+                  class: "btn btn-secondary"
+                }, "Reset")
+              ])
+            ])
+          ]),
+          _: 1
+        }, 8, ["show"]),
+        (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(__props.filters, (filter, idx) => {
+          return vue.openBlock(), vue.createBlock(Popup.default, {
+            isPopupOpen: individualPopups[idx],
+            key: `popup-${idx}`,
+            align: "bottom center",
+            class: "min-w-200"
+          }, {
+            default: vue.withCtx(() => [
+              vue.createElementVNode("div", _hoisted_8, [
+                vue.createElementVNode("h4", _hoisted_9, vue.toDisplayString(filter.title), 1),
+                (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(getFilterComponent(filter.type)), {
+                  modelValue: appliedFilters[filter.key],
+                  "onUpdate:modelValue": [($event) => appliedFilters[filter.key] = $event, () => updateFilter(filter.key)],
+                  options: filter.options,
+                  config: filter.config
+                }, null, 8, ["modelValue", "onUpdate:modelValue", "options", "config"]))
+              ])
+            ]),
+            _: 2
+          }, 1032, ["isPopupOpen"]);
+        }), 128))
+      ]);
+    };
+  }
+};
+exports.default = _sfc_main;
+//# sourceMappingURL=Filters.vue2.cjs.map

package/dist/martyrs/src/modules/globals/views/components/sections/Filters.vue2.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Filters.vue2.cjs","sources":["../../../../../../../../src/modules/globals/views/components/sections/Filters.vue"],"sourcesContent":["<!-- FiltersBar.vue -->\n<template>\n  <div class=\"flex gap-thin\">\n    <!-- All Filters Button -->\n    <button\n      @click=\"showAllFilters = true\"\n      class=\"btn-filter radius-medium pd-thin bg-light\"\n      :class=\"{ 'bg-primary t-white': hasActiveFilters }\"\n    >\n      <IconFilter class=\"w-1r h-auto\" />\n      <span v-if=\"activeFiltersCount\" class=\"ml-thin\">{{ activeFiltersCount }}</span>\n    </button>\n\n    <!-- Individual Filter Buttons -->\n    <button\n      v-for=\"(filter, idx) in filters\"\n      :key=\"idx\"\n      @click=\"() => openFilter(idx)\"\n      class=\"btn-filter radius-medium pd-thin bg-light\"\n      :class=\"{ 'bg-primary t-white': getFilterActiveState(filter) }\"\n    >\n      {{ getFilterLabel(filter) }}\n    </button>\n\n    <!-- All Filters Popup -->\n    <Popup\n      v-model:show=\"showAllFilters\"\n      align=\"bottom center\"\n      class=\"w-100 max-h-80vh\"\n    >\n      <div class=\"pd-medium bg-white radius-top-medium\">\n        <div class=\"flex justify-between align-center mb-medium\">\n          <h3 class=\"t-h3\">Filters</h3>\n          <IconCross @click=\"showAllFilters = false\" class=\"w-1r h-auto cursor-pointer\" />\n        </div>\n        \n        <div class=\"filters-container\">\n          <div v-for=\"(filter, idx) in filters\" :key=\"idx\" class=\"mb-medium\">\n            <h4 class=\"t-h4 mb-thin\">{{ filter.title }}</h4>\n            <component\n              :is=\"getFilterComponent(filter.type)\"\n              v-model=\"appliedFilters[filter.key]\"\n              :options=\"filter.options\"\n              :config=\"filter.config\"\n            />\n          </div>\n        </div>\n\n        <div class=\"flex gap-thin mt-medium\">\n          <button @click=\"applyFilters\" class=\"btn btn-primary flex-1\">Apply</button>\n          <button @click=\"resetFilters\" class=\"btn btn-secondary\">Reset</button>\n        </div>\n      </div>\n    </Popup>\n\n    <!-- Individual Filter Popups -->\n    <Popup\n      :isPopupOpen=\"individualPopups[idx]\" \n      v-for=\"(filter, idx) in filters\"\n      :key=\"`popup-${idx}`\"\n      align=\"bottom center\"\n      class=\"min-w-200\"\n    >\n      <div class=\"pd-medium bg-white radius-medium\">\n        <h4 class=\"t-h4 mb-thin\">{{ filter.title }}</h4>\n        <component\n          :is=\"getFilterComponent(filter.type)\"\n          v-model=\"appliedFilters[filter.key]\"\n          :options=\"filter.options\"\n          :config=\"filter.config\"\n          @update:modelValue=\"() => updateFilter(filter.key)\"\n        />\n      </div>\n    </Popup>\n  </div>\n</template>\n\n<script setup>\nimport { ref, computed, reactive } from 'vue'\nimport Field from '@martyrs/src/components/Field/Field.vue';\nimport Popup from '@martyrs/src/components/Popup/Popup.vue';\nimport Select from '@martyrs/src/components/Select/Select.vue';\nimport IconFilter from '@martyrs/src/modules/icons/navigation/IconFilter.vue'\nimport IconCross from '@martyrs/src/modules/icons/navigation/IconCross.vue'\n\n// Import filter components\nimport FilterOptions from './filters/FilterOptions.vue'\nimport FilterRange from './filters/FilterRange.vue'\nimport FilterPrice from './filters/FilterPrice.vue'\n\nconst props = defineProps({\n  filters: {\n    type: Array,\n    required: true\n  }\n})\n\nconst model = defineModel({\n  type: Object,\n  default: () => ({})\n})\n\n// State\nconst showAllFilters = ref(false)\nconst individualPopups = reactive({})\nconst appliedFilters = reactive({})\n\n// Initialize filters\nprops.filters.forEach(filter => {\n  individualPopups[props.filters.indexOf(filter)] = false\n  if (!appliedFilters[filter.key]) {\n    appliedFilters[filter.key] = filter.defaultValue || null\n  }\n})\n\n// Computed\nconst hasActiveFilters = computed(() => {\n  return Object.values(appliedFilters).some(v => v !== null && v !== undefined)\n})\n\nconst activeFiltersCount = computed(() => {\n  return Object.values(appliedFilters).filter(v => v !== null && v !== undefined).length\n})\n\n// Methods\nconst getFilterComponent = (type) => {\n  if (typeof type === 'object') return type\n  \n  const components = {\n    options: FilterOptions,\n    range: FilterRange,\n    price: FilterPrice\n  }\n  \n  return components[type] || FilterOptions\n}\n\nconst getFilterLabel = (filter) => {\n  const value = appliedFilters[filter.key]\n  if (!value) return filter.title\n  \n  if (Array.isArray(value) && value.length) {\n    return `${filter.title} (${value.length})`\n  }\n  \n  if (typeof value === 'object' && (value.min || value.max)) {\n    return `${filter.title}: ${value.min || 0}-${value.max || '∞'}`\n  }\n  \n  return `${filter.title}: ${value}`\n}\n\nconst getFilterActiveState = (filter) => {\n  const value = appliedFilters[filter.key]\n  return value !== null && value !== undefined\n}\n\nconst openFilter = (idx) => {\n  individualPopups[idx] = true\n}\n\nconst updateFilter = (key) => {\n  model.value = { ...appliedFilters }\n}\n\nconst applyFilters = () => {\n  model.value = { ...appliedFilters }\n  showAllFilters.value = false\n}\n\nconst resetFilters = () => {\n  Object.keys(appliedFilters).forEach(key => {\n    appliedFilters[key] = null\n  })\n  model.value = {}\n}\n</script>\n\n<style>\n.btn-filter {\n  display: flex;\n  align-items: center;\n  gap: 0.25rem;\n  border: none;\n  cursor: pointer;\n  transition: all 0.2s;\n  white-space: nowrap;\n}\n\n.btn-filter:hover {\n  opacity: 0.8;\n}\n\n.filters-container {\n  max-height: 60vh;\n  overflow-y: auto;\n}\n</style>"],"names":["_useModel","ref","reactive","computed","FilterOptions","FilterRange","FilterPrice"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA0FA,UAAM,QAAQ;AAOd,UAAM,QAAQA,IAAAA,SAGb,SAAA,YAAA;AAGD,UAAM,iBAAiBC,IAAG,IAAC,KAAK;AAChC,UAAM,mBAAmBC,IAAQ,SAAC,CAAE,CAAA;AACpC,UAAM,iBAAiBA,IAAQ,SAAC,CAAE,CAAA;AAGlC,UAAM,QAAQ,QAAQ,YAAU;AAC9B,uBAAiB,MAAM,QAAQ,QAAQ,MAAM,CAAC,IAAI;AAClD,UAAI,CAAC,eAAe,OAAO,GAAG,GAAG;AAC/B,uBAAe,OAAO,GAAG,IAAI,OAAO,gBAAgB;AAAA,MACxD;AAAA,IACA,CAAC;AAGD,UAAM,mBAAmBC,IAAQ,SAAC,MAAM;AACtC,aAAO,OAAO,OAAO,cAAc,EAAE,KAAK,OAAK,MAAM,QAAQ,MAAM,MAAS;AAAA,IAC9E,CAAC;AAED,UAAM,qBAAqBA,IAAQ,SAAC,MAAM;AACxC,aAAO,OAAO,OAAO,cAAc,EAAE,OAAO,OAAK,MAAM,QAAQ,MAAM,MAAS,EAAE;AAAA,IAClF,CAAC;AAGD,UAAM,qBAAqB,CAAC,SAAS;AACnC,UAAI,OAAO,SAAS,SAAU,QAAO;AAErC,YAAM,aAAa;AAAA,QACjB,SAASC,cAAa;AAAA,QACtB,OAAOC,YAAW;AAAA,QAClB,OAAOC,YAAAA;AAAAA,MACX;AAEE,aAAO,WAAW,IAAI,KAAKF,cAAAA;AAAAA,IAC7B;AAEA,UAAM,iBAAiB,CAAC,WAAW;AACjC,YAAM,QAAQ,eAAe,OAAO,GAAG;AACvC,UAAI,CAAC,MAAO,QAAO,OAAO;AAE1B,UAAI,MAAM,QAAQ,KAAK,KAAK,MAAM,QAAQ;AACxC,eAAO,GAAG,OAAO,KAAK,KAAK,MAAM,MAAM;AAAA,MAC3C;AAEE,UAAI,OAAO,UAAU,aAAa,MAAM,OAAO,MAAM,MAAM;AACzD,eAAO,GAAG,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC,IAAI,MAAM,OAAO,GAAG;AAAA,MACjE;AAEE,aAAO,GAAG,OAAO,KAAK,KAAK,KAAK;AAAA,IAClC;AAEA,UAAM,uBAAuB,CAAC,WAAW;AACvC,YAAM,QAAQ,eAAe,OAAO,GAAG;AACvC,aAAO,UAAU,QAAQ,UAAU;AAAA,IACrC;AAEA,UAAM,aAAa,CAAC,QAAQ;AAC1B,uBAAiB,GAAG,IAAI;AAAA,IAC1B;AAEA,UAAM,eAAe,CAAC,QAAQ;AAC5B,YAAM,QAAQ,EAAE,GAAG,eAAc;AAAA,IACnC;AAEA,UAAM,eAAe,MAAM;AACzB,YAAM,QAAQ,EAAE,GAAG,eAAc;AACjC,qBAAe,QAAQ;AAAA,IACzB;AAEA,UAAM,eAAe,MAAM;AACzB,aAAO,KAAK,cAAc,EAAE,QAAQ,SAAO;AACzC,uBAAe,GAAG,IAAI;AAAA,MACvB,CAAA;AACD,YAAM,QAAQ,CAAA;AAAA,IAChB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/martyrs/src/modules/globals/views/components/sections/Filters.vue2.js

@@ -0,0 +1,183 @@
+import { mergeModels, useModel, ref, reactive, computed, createElementBlock, openBlock, createElementVNode, createVNode, normalizeClass, createCommentVNode, toDisplayString, Fragment, renderList, withCtx, createBlock, resolveDynamicComponent } from "vue";
+import _sfc_main$2 from "../../../../../components/Popup/Popup.vue2.js";
+import _sfc_main$1 from "../../../../icons/navigation/IconFilter.vue.js";
+import _sfc_main$3 from "../../../../icons/navigation/IconCross.vue.js";
+import _sfc_main$6 from "./filters/FilterOptions.vue.js";
+import _sfc_main$5 from "./filters/FilterRange.vue2.js";
+import _sfc_main$4 from "./filters/FilterPrice.vue.js";
+/* empty css            */
+const _hoisted_1 = { class: "flex gap-thin" };
+const _hoisted_2 = {
+  key: 0,
+  class: "ml-thin"
+};
+const _hoisted_3 = ["onClick"];
+const _hoisted_4 = { class: "pd-medium bg-white radius-top-medium" };
+const _hoisted_5 = { class: "flex justify-between align-center mb-medium" };
+const _hoisted_6 = { class: "filters-container" };
+const _hoisted_7 = { class: "t-h4 mb-thin" };
+const _hoisted_8 = { class: "pd-medium bg-white radius-medium" };
+const _hoisted_9 = { class: "t-h4 mb-thin" };
+const _sfc_main = {
+  __name: "Filters",
+  props: /* @__PURE__ */ mergeModels({
+    filters: {
+      type: Array,
+      required: true
+    }
+  }, {
+    "modelValue": {
+      type: Object,
+      default: () => ({})
+    },
+    "modelModifiers": {}
+  }),
+  emits: ["update:modelValue"],
+  setup(__props) {
+    const props = __props;
+    const model = useModel(__props, "modelValue");
+    const showAllFilters = ref(false);
+    const individualPopups = reactive({});
+    const appliedFilters = reactive({});
+    props.filters.forEach((filter) => {
+      individualPopups[props.filters.indexOf(filter)] = false;
+      if (!appliedFilters[filter.key]) {
+        appliedFilters[filter.key] = filter.defaultValue || null;
+      }
+    });
+    const hasActiveFilters = computed(() => {
+      return Object.values(appliedFilters).some((v) => v !== null && v !== void 0);
+    });
+    const activeFiltersCount = computed(() => {
+      return Object.values(appliedFilters).filter((v) => v !== null && v !== void 0).length;
+    });
+    const getFilterComponent = (type) => {
+      if (typeof type === "object") return type;
+      const components = {
+        options: _sfc_main$6,
+        range: _sfc_main$5,
+        price: _sfc_main$4
+      };
+      return components[type] || _sfc_main$6;
+    };
+    const getFilterLabel = (filter) => {
+      const value = appliedFilters[filter.key];
+      if (!value) return filter.title;
+      if (Array.isArray(value) && value.length) {
+        return `${filter.title} (${value.length})`;
+      }
+      if (typeof value === "object" && (value.min || value.max)) {
+        return `${filter.title}: ${value.min || 0}-${value.max || "∞"}`;
+      }
+      return `${filter.title}: ${value}`;
+    };
+    const getFilterActiveState = (filter) => {
+      const value = appliedFilters[filter.key];
+      return value !== null && value !== void 0;
+    };
+    const openFilter = (idx) => {
+      individualPopups[idx] = true;
+    };
+    const updateFilter = (key) => {
+      model.value = { ...appliedFilters };
+    };
+    const applyFilters = () => {
+      model.value = { ...appliedFilters };
+      showAllFilters.value = false;
+    };
+    const resetFilters = () => {
+      Object.keys(appliedFilters).forEach((key) => {
+        appliedFilters[key] = null;
+      });
+      model.value = {};
+    };
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", _hoisted_1, [
+        createElementVNode("button", {
+          onClick: _cache[0] || (_cache[0] = ($event) => showAllFilters.value = true),
+          class: normalizeClass(["btn-filter radius-medium pd-thin bg-light", { "bg-primary t-white": hasActiveFilters.value }])
+        }, [
+          createVNode(_sfc_main$1, { class: "w-1r h-auto" }),
+          activeFiltersCount.value ? (openBlock(), createElementBlock("span", _hoisted_2, toDisplayString(activeFiltersCount.value), 1)) : createCommentVNode("", true)
+        ], 2),
+        (openBlock(true), createElementBlock(Fragment, null, renderList(__props.filters, (filter, idx) => {
+          return openBlock(), createElementBlock("button", {
+            key: idx,
+            onClick: () => openFilter(idx),
+            class: normalizeClass(["btn-filter radius-medium pd-thin bg-light", { "bg-primary t-white": getFilterActiveState(filter) }])
+          }, toDisplayString(getFilterLabel(filter)), 11, _hoisted_3);
+        }), 128)),
+        createVNode(_sfc_main$2, {
+          show: showAllFilters.value,
+          "onUpdate:show": _cache[2] || (_cache[2] = ($event) => showAllFilters.value = $event),
+          align: "bottom center",
+          class: "w-100 max-h-80vh"
+        }, {
+          default: withCtx(() => [
+            createElementVNode("div", _hoisted_4, [
+              createElementVNode("div", _hoisted_5, [
+                _cache[3] || (_cache[3] = createElementVNode("h3", { class: "t-h3" }, "Filters", -1)),
+                createVNode(_sfc_main$3, {
+                  onClick: _cache[1] || (_cache[1] = ($event) => showAllFilters.value = false),
+                  class: "w-1r h-auto cursor-pointer"
+                })
+              ]),
+              createElementVNode("div", _hoisted_6, [
+                (openBlock(true), createElementBlock(Fragment, null, renderList(__props.filters, (filter, idx) => {
+                  return openBlock(), createElementBlock("div", {
+                    key: idx,
+                    class: "mb-medium"
+                  }, [
+                    createElementVNode("h4", _hoisted_7, toDisplayString(filter.title), 1),
+                    (openBlock(), createBlock(resolveDynamicComponent(getFilterComponent(filter.type)), {
+                      modelValue: appliedFilters[filter.key],
+                      "onUpdate:modelValue": ($event) => appliedFilters[filter.key] = $event,
+                      options: filter.options,
+                      config: filter.config
+                    }, null, 8, ["modelValue", "onUpdate:modelValue", "options", "config"]))
+                  ]);
+                }), 128))
+              ]),
+              createElementVNode("div", { class: "flex gap-thin mt-medium" }, [
+                createElementVNode("button", {
+                  onClick: applyFilters,
+                  class: "btn btn-primary flex-1"
+                }, "Apply"),
+                createElementVNode("button", {
+                  onClick: resetFilters,
+                  class: "btn btn-secondary"
+                }, "Reset")
+              ])
+            ])
+          ]),
+          _: 1
+        }, 8, ["show"]),
+        (openBlock(true), createElementBlock(Fragment, null, renderList(__props.filters, (filter, idx) => {
+          return openBlock(), createBlock(_sfc_main$2, {
+            isPopupOpen: individualPopups[idx],
+            key: `popup-${idx}`,
+            align: "bottom center",
+            class: "min-w-200"
+          }, {
+            default: withCtx(() => [
+              createElementVNode("div", _hoisted_8, [
+                createElementVNode("h4", _hoisted_9, toDisplayString(filter.title), 1),
+                (openBlock(), createBlock(resolveDynamicComponent(getFilterComponent(filter.type)), {
+                  modelValue: appliedFilters[filter.key],
+                  "onUpdate:modelValue": [($event) => appliedFilters[filter.key] = $event, () => updateFilter(filter.key)],
+                  options: filter.options,
+                  config: filter.config
+                }, null, 8, ["modelValue", "onUpdate:modelValue", "options", "config"]))
+              ])
+            ]),
+            _: 2
+          }, 1032, ["isPopupOpen"]);
+        }), 128))
+      ]);
+    };
+  }
+};
+export {
+  _sfc_main as default
+};
+//# sourceMappingURL=Filters.vue2.js.map

package/dist/martyrs/src/modules/globals/views/components/sections/Filters.vue2.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Filters.vue2.js","sources":["../../../../../../../../src/modules/globals/views/components/sections/Filters.vue"],"sourcesContent":["<!-- FiltersBar.vue -->\n<template>\n  <div class=\"flex gap-thin\">\n    <!-- All Filters Button -->\n    <button\n      @click=\"showAllFilters = true\"\n      class=\"btn-filter radius-medium pd-thin bg-light\"\n      :class=\"{ 'bg-primary t-white': hasActiveFilters }\"\n    >\n      <IconFilter class=\"w-1r h-auto\" />\n      <span v-if=\"activeFiltersCount\" class=\"ml-thin\">{{ activeFiltersCount }}</span>\n    </button>\n\n    <!-- Individual Filter Buttons -->\n    <button\n      v-for=\"(filter, idx) in filters\"\n      :key=\"idx\"\n      @click=\"() => openFilter(idx)\"\n      class=\"btn-filter radius-medium pd-thin bg-light\"\n      :class=\"{ 'bg-primary t-white': getFilterActiveState(filter) }\"\n    >\n      {{ getFilterLabel(filter) }}\n    </button>\n\n    <!-- All Filters Popup -->\n    <Popup\n      v-model:show=\"showAllFilters\"\n      align=\"bottom center\"\n      class=\"w-100 max-h-80vh\"\n    >\n      <div class=\"pd-medium bg-white radius-top-medium\">\n        <div class=\"flex justify-between align-center mb-medium\">\n          <h3 class=\"t-h3\">Filters</h3>\n          <IconCross @click=\"showAllFilters = false\" class=\"w-1r h-auto cursor-pointer\" />\n        </div>\n        \n        <div class=\"filters-container\">\n          <div v-for=\"(filter, idx) in filters\" :key=\"idx\" class=\"mb-medium\">\n            <h4 class=\"t-h4 mb-thin\">{{ filter.title }}</h4>\n            <component\n              :is=\"getFilterComponent(filter.type)\"\n              v-model=\"appliedFilters[filter.key]\"\n              :options=\"filter.options\"\n              :config=\"filter.config\"\n            />\n          </div>\n        </div>\n\n        <div class=\"flex gap-thin mt-medium\">\n          <button @click=\"applyFilters\" class=\"btn btn-primary flex-1\">Apply</button>\n          <button @click=\"resetFilters\" class=\"btn btn-secondary\">Reset</button>\n        </div>\n      </div>\n    </Popup>\n\n    <!-- Individual Filter Popups -->\n    <Popup\n      :isPopupOpen=\"individualPopups[idx]\" \n      v-for=\"(filter, idx) in filters\"\n      :key=\"`popup-${idx}`\"\n      align=\"bottom center\"\n      class=\"min-w-200\"\n    >\n      <div class=\"pd-medium bg-white radius-medium\">\n        <h4 class=\"t-h4 mb-thin\">{{ filter.title }}</h4>\n        <component\n          :is=\"getFilterComponent(filter.type)\"\n          v-model=\"appliedFilters[filter.key]\"\n          :options=\"filter.options\"\n          :config=\"filter.config\"\n          @update:modelValue=\"() => updateFilter(filter.key)\"\n        />\n      </div>\n    </Popup>\n  </div>\n</template>\n\n<script setup>\nimport { ref, computed, reactive } from 'vue'\nimport Field from '@martyrs/src/components/Field/Field.vue';\nimport Popup from '@martyrs/src/components/Popup/Popup.vue';\nimport Select from '@martyrs/src/components/Select/Select.vue';\nimport IconFilter from '@martyrs/src/modules/icons/navigation/IconFilter.vue'\nimport IconCross from '@martyrs/src/modules/icons/navigation/IconCross.vue'\n\n// Import filter components\nimport FilterOptions from './filters/FilterOptions.vue'\nimport FilterRange from './filters/FilterRange.vue'\nimport FilterPrice from './filters/FilterPrice.vue'\n\nconst props = defineProps({\n  filters: {\n    type: Array,\n    required: true\n  }\n})\n\nconst model = defineModel({\n  type: Object,\n  default: () => ({})\n})\n\n// State\nconst showAllFilters = ref(false)\nconst individualPopups = reactive({})\nconst appliedFilters = reactive({})\n\n// Initialize filters\nprops.filters.forEach(filter => {\n  individualPopups[props.filters.indexOf(filter)] = false\n  if (!appliedFilters[filter.key]) {\n    appliedFilters[filter.key] = filter.defaultValue || null\n  }\n})\n\n// Computed\nconst hasActiveFilters = computed(() => {\n  return Object.values(appliedFilters).some(v => v !== null && v !== undefined)\n})\n\nconst activeFiltersCount = computed(() => {\n  return Object.values(appliedFilters).filter(v => v !== null && v !== undefined).length\n})\n\n// Methods\nconst getFilterComponent = (type) => {\n  if (typeof type === 'object') return type\n  \n  const components = {\n    options: FilterOptions,\n    range: FilterRange,\n    price: FilterPrice\n  }\n  \n  return components[type] || FilterOptions\n}\n\nconst getFilterLabel = (filter) => {\n  const value = appliedFilters[filter.key]\n  if (!value) return filter.title\n  \n  if (Array.isArray(value) && value.length) {\n    return `${filter.title} (${value.length})`\n  }\n  \n  if (typeof value === 'object' && (value.min || value.max)) {\n    return `${filter.title}: ${value.min || 0}-${value.max || '∞'}`\n  }\n  \n  return `${filter.title}: ${value}`\n}\n\nconst getFilterActiveState = (filter) => {\n  const value = appliedFilters[filter.key]\n  return value !== null && value !== undefined\n}\n\nconst openFilter = (idx) => {\n  individualPopups[idx] = true\n}\n\nconst updateFilter = (key) => {\n  model.value = { ...appliedFilters }\n}\n\nconst applyFilters = () => {\n  model.value = { ...appliedFilters }\n  showAllFilters.value = false\n}\n\nconst resetFilters = () => {\n  Object.keys(appliedFilters).forEach(key => {\n    appliedFilters[key] = null\n  })\n  model.value = {}\n}\n</script>\n\n<style>\n.btn-filter {\n  display: flex;\n  align-items: center;\n  gap: 0.25rem;\n  border: none;\n  cursor: pointer;\n  transition: all 0.2s;\n  white-space: nowrap;\n}\n\n.btn-filter:hover {\n  opacity: 0.8;\n}\n\n.filters-container {\n  max-height: 60vh;\n  overflow-y: auto;\n}\n</style>"],"names":["_useModel","FilterOptions","FilterRange","FilterPrice"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA0FA,UAAM,QAAQ;AAOd,UAAM,QAAQA,SAGb,SAAA,YAAA;AAGD,UAAM,iBAAiB,IAAI,KAAK;AAChC,UAAM,mBAAmB,SAAS,CAAE,CAAA;AACpC,UAAM,iBAAiB,SAAS,CAAE,CAAA;AAGlC,UAAM,QAAQ,QAAQ,YAAU;AAC9B,uBAAiB,MAAM,QAAQ,QAAQ,MAAM,CAAC,IAAI;AAClD,UAAI,CAAC,eAAe,OAAO,GAAG,GAAG;AAC/B,uBAAe,OAAO,GAAG,IAAI,OAAO,gBAAgB;AAAA,MACxD;AAAA,IACA,CAAC;AAGD,UAAM,mBAAmB,SAAS,MAAM;AACtC,aAAO,OAAO,OAAO,cAAc,EAAE,KAAK,OAAK,MAAM,QAAQ,MAAM,MAAS;AAAA,IAC9E,CAAC;AAED,UAAM,qBAAqB,SAAS,MAAM;AACxC,aAAO,OAAO,OAAO,cAAc,EAAE,OAAO,OAAK,MAAM,QAAQ,MAAM,MAAS,EAAE;AAAA,IAClF,CAAC;AAGD,UAAM,qBAAqB,CAAC,SAAS;AACnC,UAAI,OAAO,SAAS,SAAU,QAAO;AAErC,YAAM,aAAa;AAAA,QACjB,SAASC;AAAAA,QACT,OAAOC;AAAAA,QACP,OAAOC;AAAAA,MACX;AAEE,aAAO,WAAW,IAAI,KAAKF;AAAAA,IAC7B;AAEA,UAAM,iBAAiB,CAAC,WAAW;AACjC,YAAM,QAAQ,eAAe,OAAO,GAAG;AACvC,UAAI,CAAC,MAAO,QAAO,OAAO;AAE1B,UAAI,MAAM,QAAQ,KAAK,KAAK,MAAM,QAAQ;AACxC,eAAO,GAAG,OAAO,KAAK,KAAK,MAAM,MAAM;AAAA,MAC3C;AAEE,UAAI,OAAO,UAAU,aAAa,MAAM,OAAO,MAAM,MAAM;AACzD,eAAO,GAAG,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC,IAAI,MAAM,OAAO,GAAG;AAAA,MACjE;AAEE,aAAO,GAAG,OAAO,KAAK,KAAK,KAAK;AAAA,IAClC;AAEA,UAAM,uBAAuB,CAAC,WAAW;AACvC,YAAM,QAAQ,eAAe,OAAO,GAAG;AACvC,aAAO,UAAU,QAAQ,UAAU;AAAA,IACrC;AAEA,UAAM,aAAa,CAAC,QAAQ;AAC1B,uBAAiB,GAAG,IAAI;AAAA,IAC1B;AAEA,UAAM,eAAe,CAAC,QAAQ;AAC5B,YAAM,QAAQ,EAAE,GAAG,eAAc;AAAA,IACnC;AAEA,UAAM,eAAe,MAAM;AACzB,YAAM,QAAQ,EAAE,GAAG,eAAc;AACjC,qBAAe,QAAQ;AAAA,IACzB;AAEA,UAAM,eAAe,MAAM;AACzB,aAAO,KAAK,cAAc,EAAE,QAAQ,SAAO;AACzC,uBAAe,GAAG,IAAI;AAAA,MACvB,CAAA;AACD,YAAM,QAAQ,CAAA;AAAA,IAChB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/martyrs/src/modules/globals/views/components/sections/filters/FilterOptions.vue.cjs

@@ -0,0 +1,67 @@
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const vue = require("vue");
+const Field = require("../../../../../../components/Field/Field.vue.cjs");
+const _hoisted_1 = { class: "filter-options" };
+const _hoisted_2 = ["onClick"];
+const _sfc_main = {
+  __name: "FilterOptions",
+  props: /* @__PURE__ */ vue.mergeModels({
+    options: {
+      type: Array,
+      required: true,
+      default: () => []
+    }
+  }, {
+    "modelValue": {
+      type: Array,
+      default: () => []
+    },
+    "modelModifiers": {}
+  }),
+  emits: ["update:modelValue"],
+  setup(__props) {
+    const props = __props;
+    const model = vue.useModel(__props, "modelValue");
+    const checkboxStates = vue.ref({});
+    props.options.forEach((option) => {
+      checkboxStates.value[option.value] = model.value.includes(option.value);
+    });
+    vue.watch(model, (newVal) => {
+      props.options.forEach((option) => {
+        checkboxStates.value[option.value] = newVal.includes(option.value);
+      });
+    }, { deep: true });
+    vue.watch(checkboxStates, (states) => {
+      const selected = [];
+      Object.entries(states).forEach(([value, checked]) => {
+        if (checked) selected.push(value);
+      });
+      model.value = selected;
+    }, { deep: true });
+    const toggleOption = (value) => {
+      checkboxStates.value[value] = !checkboxStates.value[value];
+    };
+    return (_ctx, _cache) => {
+      return vue.openBlock(), vue.createElementBlock("div", _hoisted_1, [
+        (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(__props.options, (option) => {
+          return vue.openBlock(), vue.createElementBlock("div", {
+            key: option.value,
+            class: "flex align-center gap-thin pd-thin cursor-pointer hover-bg-light radius-small",
+            onClick: ($event) => toggleOption(option.value)
+          }, [
+            vue.createVNode(Field.default, {
+              type: "checkbox",
+              field: checkboxStates.value[option.value],
+              "onUpdate:field": ($event) => checkboxStates.value[option.value] = $event,
+              class: "mr-thin"
+            }, null, 8, ["field", "onUpdate:field"]),
+            vue.createElementVNode("span", null, vue.toDisplayString(option.label), 1)
+          ], 8, _hoisted_2);
+        }), 128))
+      ]);
+    };
+  }
+};
+exports.default = _sfc_main;
+//# sourceMappingURL=FilterOptions.vue.cjs.map

package/dist/martyrs/src/modules/globals/views/components/sections/filters/FilterOptions.vue.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"FilterOptions.vue.cjs","sources":["../../../../../../../../../src/modules/globals/views/components/sections/filters/FilterOptions.vue"],"sourcesContent":["<!-- filters/FilterOptions.vue -->\n<template>\n  <div class=\"filter-options\">\n    <div\n      v-for=\"option in options\"\n      :key=\"option.value\"\n      class=\"flex align-center gap-thin pd-thin cursor-pointer hover-bg-light radius-small\"\n      @click=\"toggleOption(option.value)\"\n    >\n      <Field\n        type=\"checkbox\"\n        v-model:field=\"checkboxStates[option.value]\"\n        class=\"mr-thin\"\n      />\n      <span>{{ option.label }}</span>\n    </div>\n  </div>\n</template>\n\n<script setup>\nimport { ref, watch } from 'vue'\nimport Field from '@martyrs/src/components/Field/Field.vue';\n\n\nconst props = defineProps({\n  options: {\n    type: Array,\n    required: true,\n    default: () => []\n  }\n})\n\nconst model = defineModel({\n  type: Array,\n  default: () => []\n})\n\n// Создаем объект для хранения состояний чекбоксов\nconst checkboxStates = ref({})\n\n// Инициализация состояний\nprops.options.forEach(option => {\n  checkboxStates.value[option.value] = model.value.includes(option.value)\n})\n\n// Следим за изменениями модели\nwatch(model, (newVal) => {\n  props.options.forEach(option => {\n    checkboxStates.value[option.value] = newVal.includes(option.value)\n  })\n}, { deep: true })\n\n// Обновляем модель при изменении чекбоксов\nwatch(checkboxStates, (states) => {\n  const selected = []\n  Object.entries(states).forEach(([value, checked]) => {\n    if (checked) selected.push(value)\n  })\n  model.value = selected\n}, { deep: true })\n\nconst toggleOption = (value) => {\n  checkboxStates.value[value] = !checkboxStates.value[value]\n}\n</script>"],"names":["_useModel","ref","watch"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAwBA,UAAM,QAAQ;AAQd,UAAM,QAAQA,IAAAA,SAGb,SAAA,YAAA;AAGD,UAAM,iBAAiBC,IAAG,IAAC,CAAE,CAAA;AAG7B,UAAM,QAAQ,QAAQ,YAAU;AAC9B,qBAAe,MAAM,OAAO,KAAK,IAAI,MAAM,MAAM,SAAS,OAAO,KAAK;AAAA,IACxE,CAAC;AAGDC,QAAAA,MAAM,OAAO,CAAC,WAAW;AACvB,YAAM,QAAQ,QAAQ,YAAU;AAC9B,uBAAe,MAAM,OAAO,KAAK,IAAI,OAAO,SAAS,OAAO,KAAK;AAAA,MAClE,CAAA;AAAA,IACH,GAAG,EAAE,MAAM,KAAM,CAAA;AAGjBA,QAAAA,MAAM,gBAAgB,CAAC,WAAW;AAChC,YAAM,WAAW,CAAA;AACjB,aAAO,QAAQ,MAAM,EAAE,QAAQ,CAAC,CAAC,OAAO,OAAO,MAAM;AACnD,YAAI,QAAS,UAAS,KAAK,KAAK;AAAA,MACjC,CAAA;AACD,YAAM,QAAQ;AAAA,IAChB,GAAG,EAAE,MAAM,KAAM,CAAA;AAEjB,UAAM,eAAe,CAAC,UAAU;AAC9B,qBAAe,MAAM,KAAK,IAAI,CAAC,eAAe,MAAM,KAAK;AAAA,IAC3D;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/martyrs/src/modules/globals/views/components/sections/filters/FilterOptions.vue.js

@@ -0,0 +1,67 @@
+import { mergeModels, useModel, ref, watch, createElementBlock, openBlock, Fragment, renderList, createVNode, createElementVNode, toDisplayString } from "vue";
+import Field from "../../../../../../components/Field/Field.vue.js";
+const _hoisted_1 = { class: "filter-options" };
+const _hoisted_2 = ["onClick"];
+const _sfc_main = {
+  __name: "FilterOptions",
+  props: /* @__PURE__ */ mergeModels({
+    options: {
+      type: Array,
+      required: true,
+      default: () => []
+    }
+  }, {
+    "modelValue": {
+      type: Array,
+      default: () => []
+    },
+    "modelModifiers": {}
+  }),
+  emits: ["update:modelValue"],
+  setup(__props) {
+    const props = __props;
+    const model = useModel(__props, "modelValue");
+    const checkboxStates = ref({});
+    props.options.forEach((option) => {
+      checkboxStates.value[option.value] = model.value.includes(option.value);
+    });
+    watch(model, (newVal) => {
+      props.options.forEach((option) => {
+        checkboxStates.value[option.value] = newVal.includes(option.value);
+      });
+    }, { deep: true });
+    watch(checkboxStates, (states) => {
+      const selected = [];
+      Object.entries(states).forEach(([value, checked]) => {
+        if (checked) selected.push(value);
+      });
+      model.value = selected;
+    }, { deep: true });
+    const toggleOption = (value) => {
+      checkboxStates.value[value] = !checkboxStates.value[value];
+    };
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", _hoisted_1, [
+        (openBlock(true), createElementBlock(Fragment, null, renderList(__props.options, (option) => {
+          return openBlock(), createElementBlock("div", {
+            key: option.value,
+            class: "flex align-center gap-thin pd-thin cursor-pointer hover-bg-light radius-small",
+            onClick: ($event) => toggleOption(option.value)
+          }, [
+            createVNode(Field, {
+              type: "checkbox",
+              field: checkboxStates.value[option.value],
+              "onUpdate:field": ($event) => checkboxStates.value[option.value] = $event,
+              class: "mr-thin"
+            }, null, 8, ["field", "onUpdate:field"]),
+            createElementVNode("span", null, toDisplayString(option.label), 1)
+          ], 8, _hoisted_2);
+        }), 128))
+      ]);
+    };
+  }
+};
+export {
+  _sfc_main as default
+};
+//# sourceMappingURL=FilterOptions.vue.js.map

package/dist/martyrs/src/modules/globals/views/components/sections/filters/FilterOptions.vue.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FilterOptions.vue.js","sources":["../../../../../../../../../src/modules/globals/views/components/sections/filters/FilterOptions.vue"],"sourcesContent":["<!-- filters/FilterOptions.vue -->\n<template>\n  <div class=\"filter-options\">\n    <div\n      v-for=\"option in options\"\n      :key=\"option.value\"\n      class=\"flex align-center gap-thin pd-thin cursor-pointer hover-bg-light radius-small\"\n      @click=\"toggleOption(option.value)\"\n    >\n      <Field\n        type=\"checkbox\"\n        v-model:field=\"checkboxStates[option.value]\"\n        class=\"mr-thin\"\n      />\n      <span>{{ option.label }}</span>\n    </div>\n  </div>\n</template>\n\n<script setup>\nimport { ref, watch } from 'vue'\nimport Field from '@martyrs/src/components/Field/Field.vue';\n\n\nconst props = defineProps({\n  options: {\n    type: Array,\n    required: true,\n    default: () => []\n  }\n})\n\nconst model = defineModel({\n  type: Array,\n  default: () => []\n})\n\n// Создаем объект для хранения состояний чекбоксов\nconst checkboxStates = ref({})\n\n// Инициализация состояний\nprops.options.forEach(option => {\n  checkboxStates.value[option.value] = model.value.includes(option.value)\n})\n\n// Следим за изменениями модели\nwatch(model, (newVal) => {\n  props.options.forEach(option => {\n    checkboxStates.value[option.value] = newVal.includes(option.value)\n  })\n}, { deep: true })\n\n// Обновляем модель при изменении чекбоксов\nwatch(checkboxStates, (states) => {\n  const selected = []\n  Object.entries(states).forEach(([value, checked]) => {\n    if (checked) selected.push(value)\n  })\n  model.value = selected\n}, { deep: true })\n\nconst toggleOption = (value) => {\n  checkboxStates.value[value] = !checkboxStates.value[value]\n}\n</script>"],"names":["_useModel"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAwBA,UAAM,QAAQ;AAQd,UAAM,QAAQA,SAGb,SAAA,YAAA;AAGD,UAAM,iBAAiB,IAAI,CAAE,CAAA;AAG7B,UAAM,QAAQ,QAAQ,YAAU;AAC9B,qBAAe,MAAM,OAAO,KAAK,IAAI,MAAM,MAAM,SAAS,OAAO,KAAK;AAAA,IACxE,CAAC;AAGD,UAAM,OAAO,CAAC,WAAW;AACvB,YAAM,QAAQ,QAAQ,YAAU;AAC9B,uBAAe,MAAM,OAAO,KAAK,IAAI,OAAO,SAAS,OAAO,KAAK;AAAA,MAClE,CAAA;AAAA,IACH,GAAG,EAAE,MAAM,KAAM,CAAA;AAGjB,UAAM,gBAAgB,CAAC,WAAW;AAChC,YAAM,WAAW,CAAA;AACjB,aAAO,QAAQ,MAAM,EAAE,QAAQ,CAAC,CAAC,OAAO,OAAO,MAAM;AACnD,YAAI,QAAS,UAAS,KAAK,KAAK;AAAA,MACjC,CAAA;AACD,YAAM,QAAQ;AAAA,IAChB,GAAG,EAAE,MAAM,KAAM,CAAA;AAEjB,UAAM,eAAe,CAAC,UAAU;AAC9B,qBAAe,MAAM,KAAK,IAAI,CAAC,eAAe,MAAM,KAAK;AAAA,IAC3D;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/martyrs/src/modules/globals/views/components/sections/filters/FilterPrice.vue.cjs

@@ -0,0 +1,91 @@
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const vue = require("vue");
+const Field = require("../../../../../../components/Field/Field.vue.cjs");
+const _hoisted_1 = { class: "filter-price" };
+const _hoisted_2 = { class: "flex gap-thin align-center" };
+const _hoisted_3 = {
+  key: 0,
+  class: "mt-thin"
+};
+const _hoisted_4 = ["onClick"];
+const _sfc_main = {
+  __name: "FilterPrice",
+  props: /* @__PURE__ */ vue.mergeModels({
+    config: {
+      type: Object,
+      default: () => ({})
+    }
+  }, {
+    "modelValue": {
+      type: Object,
+      default: () => ({ min: null, max: null })
+    },
+    "modelModifiers": {}
+  }),
+  emits: ["update:modelValue"],
+  setup(__props) {
+    var _a, _b;
+    const model = vue.useModel(__props, "modelValue");
+    const localValue = vue.ref({
+      min: ((_a = model.value) == null ? void 0 : _a.min) || null,
+      max: ((_b = model.value) == null ? void 0 : _b.max) || null
+    });
+    vue.watch(model, (val) => {
+      if (val) {
+        localValue.value = {
+          min: val.min || null,
+          max: val.max || null
+        };
+      }
+    }, { deep: true });
+    const updateValue = () => {
+      model.value = { ...localValue.value };
+    };
+    const applyPreset = (preset) => {
+      localValue.value = {
+        min: preset.min || null,
+        max: preset.max || null
+      };
+      updateValue();
+    };
+    const isPresetActive = (preset) => {
+      return localValue.value.min === preset.min && localValue.value.max === preset.max;
+    };
+    return (_ctx, _cache) => {
+      var _a2;
+      return vue.openBlock(), vue.createElementBlock("div", _hoisted_1, [
+        vue.createElementVNode("div", _hoisted_2, [
+          vue.createVNode(Field.default, {
+            type: "number",
+            field: localValue.value.min,
+            "onUpdate:field": _cache[0] || (_cache[0] = ($event) => localValue.value.min = $event),
+            placeholder: "Min",
+            class: "flex-1 bg-light pd-medium radius-small",
+            onBlur: updateValue
+          }, null, 8, ["field"]),
+          _cache[2] || (_cache[2] = vue.createElementVNode("span", { class: "t-small" }, "—", -1)),
+          vue.createVNode(Field.default, {
+            type: "number",
+            field: localValue.value.max,
+            "onUpdate:field": _cache[1] || (_cache[1] = ($event) => localValue.value.max = $event),
+            placeholder: "Max",
+            class: "flex-1 bg-light pd-medium radius-small",
+            onBlur: updateValue
+          }, null, 8, ["field"])
+        ]),
+        ((_a2 = __props.config) == null ? void 0 : _a2.presets) ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_3, [
+          (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(__props.config.presets, (preset) => {
+            return vue.openBlock(), vue.createElementBlock("button", {
+              key: preset.label,
+              onClick: ($event) => applyPreset(preset),
+              class: vue.normalizeClass(["btn btn-small mr-thin mb-thin", isPresetActive(preset) ? "btn-primary" : "btn-secondary"])
+            }, vue.toDisplayString(preset.label), 11, _hoisted_4);
+          }), 128))
+        ])) : vue.createCommentVNode("", true)
+      ]);
+    };
+  }
+};
+exports.default = _sfc_main;
+//# sourceMappingURL=FilterPrice.vue.cjs.map

package/dist/martyrs/src/modules/globals/views/components/sections/filters/FilterPrice.vue.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"FilterPrice.vue.cjs","sources":["../../../../../../../../../src/modules/globals/views/components/sections/filters/FilterPrice.vue"],"sourcesContent":["<!-- filters/FilterPrice.vue -->\n<template>\n  <div class=\"filter-price\">\n    <div class=\"flex gap-thin align-center\">\n      <Field\n        type=\"number\"\n        v-model:field=\"localValue.min\"\n        placeholder=\"Min\"\n        class=\"flex-1 bg-light pd-medium radius-small\"\n        @blur=\"updateValue\"\n      />\n      <span class=\"t-small\">—</span>\n      <Field\n        type=\"number\"\n        v-model:field=\"localValue.max\"\n        placeholder=\"Max\"\n        class=\"flex-1 bg-light pd-medium radius-small\"\n        @blur=\"updateValue\"\n      />\n    </div>\n    \n    <div v-if=\"config?.presets\" class=\"mt-thin\">\n      <button\n        v-for=\"preset in config.presets\"\n        :key=\"preset.label\"\n        @click=\"applyPreset(preset)\"\n        class=\"btn btn-small mr-thin mb-thin\"\n        :class=\"isPresetActive(preset) ? 'btn-primary' : 'btn-secondary'\"\n      >\n        {{ preset.label }}\n      </button>\n    </div>\n  </div>\n</template>\n\n<script setup>\nimport { ref, watch } from 'vue'\nimport Field from '@martyrs/src/components/Field/Field.vue';\n\nconst props = defineProps({\n  config: {\n    type: Object,\n    default: () => ({})\n  }\n})\n\nconst model = defineModel({\n  type: Object,\n  default: () => ({ min: null, max: null })\n})\n\nconst localValue = ref({ \n  min: model.value?.min || null, \n  max: model.value?.max || null \n})\n\nwatch(model, (val) => {\n  if (val) {\n    localValue.value = { \n      min: val.min || null, \n      max: val.max || null \n    }\n  }\n}, { deep: true })\n\nconst updateValue = () => {\n  model.value = { ...localValue.value }\n}\n\nconst applyPreset = (preset) => {\n  localValue.value = { \n    min: preset.min || null, \n    max: preset.max || null \n  }\n  updateValue()\n}\n\nconst isPresetActive = (preset) => {\n  return localValue.value.min === preset.min && localValue.value.max === preset.max\n}\n</script>"],"names":["_useModel","ref","watch"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AA8CA,UAAM,QAAQA,IAAAA,SAGb,SAAA,YAAA;AAED,UAAM,aAAaC,IAAAA,IAAI;AAAA,MACrB,OAAK,WAAM,UAAN,mBAAa,QAAO;AAAA,MACzB,OAAK,WAAM,UAAN,mBAAa,QAAO;AAAA,IAC3B,CAAC;AAEDC,QAAAA,MAAM,OAAO,CAAC,QAAQ;AACpB,UAAI,KAAK;AACP,mBAAW,QAAQ;AAAA,UACjB,KAAK,IAAI,OAAO;AAAA,UAChB,KAAK,IAAI,OAAO;AAAA,QACtB;AAAA,MACA;AAAA,IACA,GAAG,EAAE,MAAM,KAAM,CAAA;AAEjB,UAAM,cAAc,MAAM;AACxB,YAAM,QAAQ,EAAE,GAAG,WAAW,MAAK;AAAA,IACrC;AAEA,UAAM,cAAc,CAAC,WAAW;AAC9B,iBAAW,QAAQ;AAAA,QACjB,KAAK,OAAO,OAAO;AAAA,QACnB,KAAK,OAAO,OAAO;AAAA,MACvB;AACE,kBAAW;AAAA,IACb;AAEA,UAAM,iBAAiB,CAAC,WAAW;AACjC,aAAO,WAAW,MAAM,QAAQ,OAAO,OAAO,WAAW,MAAM,QAAQ,OAAO;AAAA,IAChF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}