@ozdao/prometheus-framework 0.2.312 → 0.2.314

package/dist/prometheus-framework/src/components/BottomSheet/BottomSheet.vue.cjs

@@ -58,8 +58,9 @@ const _sfc_main = {
           vue.createElementVNode("section", {
             ref_key: "wrapper",
             ref: wrapper,
-            class: "w-100 h-100vh",
-            style: vue.normalizeStyle(_ctx.MOBILE_APP === "ios" ? "padding-top: 6rem;" : "")
+            class: vue.normalizeClass(["w-100 h-100vh", {
+              "pd-t-extra": _ctx.MOBILE_APP === "ios"
+            }])
           }, [
             vue.createElementVNode("div", {
               onClick: _cache[0] || (_cache[0] = ($event) => emits("toggle")),
@@ -77,7 +78,7 @@ const _sfc_main = {
               ], -1)
             ]), 32),
             vue.renderSlot(_ctx.$slots, "default")
-          ], 4)
+          ], 2)
         ]),
         _: 3
       });

package/dist/prometheus-framework/src/components/BottomSheet/BottomSheet.vue.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"BottomSheet.vue.cjs","sources":["../../../../../src/components/BottomSheet/BottomSheet.vue"],"sourcesContent":["<template>\n  <transition name=\"slideY\"  mode=\"out-in\">\n    <section \n      ref=\"wrapper\" \n      class=\"w-100 h-100vh\"\n      :style=\"MOBILE_APP === 'ios' ?'padding-top: 6rem;':''\" \n    >\n      <!-- Toggle To Close -->\n      <div\n        @click=\"emits('toggle')\"\n        @mousedown=\"startDrag\"\n        @touchstart=\"startDrag\"\n        @mousemove=\"onDrag\"\n        @touchmove=\"onDrag\"\n        @mouseup=\"endDrag\"\n        @touchend=\"endDrag\"\n        @mouseleave=\"endDrag\"\n        class=\"bs-black d-block p-medium pos-relative bg-white flex-center flex uppercase z-index-2\"\n      >\n        <div class=\"radius-extra pd-small t-black p-medium\">\n          <div class=\"radius-extra pd-nano w-3r h-1r t-black p-medium bg-black-transp-10\"></div>\n        </div>\n      </div>\n      \n      <slot></slot>\n    </section>\n  </transition>\n</template>\n\n<script setup>\nimport { ref } from 'vue';\n\nconst props = defineProps({\n  show: {\n    type: Boolean,\n    default: false\n  },\n  options: {\n    type: Object,\n    default: {\n      position: false\n    }\n  }\n})\n\nconst emits = defineEmits([\n  'toggle'\n])\n\nconst wrapper = ref(null)\n\nconst startY = ref(0);\nconst currentY = ref(0);\nconst dragging = ref(false);\n\nfunction startDrag(event) {\n  dragging.value = true;\n  startY.value = event.touches ? event.touches[0].clientY : event.clientY;\n  currentY.value = startY.value;\n}\n\nfunction onDrag(event) {\n  if (!dragging.value) return;\n  event.preventDefault(); // Prevent scrolling while dragging\n  currentY.value = event.touches ? event.touches[0].clientY : event.clientY;\n  const deltaY = currentY.value - startY.value;\n\n  if (deltaY > 0) {\n    wrapper.value.style.top = `${deltaY}px`;\n  }\n}\nfunction endDrag() {\n  if (!dragging.value) return;\n\n  dragging.value = false;\n\n  const deltaY = currentY.value - startY.value;\n  const threshold = window.innerHeight * 0.2;\n\n  if (deltaY < threshold) {\n    // If less than 40%, snap back to the original position\n    wrapper.value.style.top = '';\n  } else {\n    // If more than 40%, hide the element\n    emits('toggle')\n    // VisualizerWrapper.value.style.top = '';\n  }\n}\n</script>"],"names":["ref"],"mappings":";;;;;;;;;;;;;;;;;;;;;AA6CA,UAAM,QAAQ;AAId,UAAM,UAAUA,IAAG,IAAC,IAAI;AAExB,UAAM,SAASA,IAAAA,IAAI,CAAC;AACpB,UAAM,WAAWA,IAAAA,IAAI,CAAC;AACtB,UAAM,WAAWA,IAAAA,IAAI,KAAK;AAE1B,aAAS,UAAU,OAAO;AACxB,eAAS,QAAQ;AACjB,aAAO,QAAQ,MAAM,UAAU,MAAM,QAAQ,CAAC,EAAE,UAAU,MAAM;AAChE,eAAS,QAAQ,OAAO;AAAA,IAC1B;AAEA,aAAS,OAAO,OAAO;AACrB,UAAI,CAAC,SAAS,MAAO;AACrB,YAAM,eAAc;AACpB,eAAS,QAAQ,MAAM,UAAU,MAAM,QAAQ,CAAC,EAAE,UAAU,MAAM;AAClE,YAAM,SAAS,SAAS,QAAQ,OAAO;AAEvC,UAAI,SAAS,GAAG;AACd,gBAAQ,MAAM,MAAM,MAAM,GAAG,MAAM;AAAA,MACpC;AAAA,IACH;AACA,aAAS,UAAU;AACjB,UAAI,CAAC,SAAS,MAAO;AAErB,eAAS,QAAQ;AAEjB,YAAM,SAAS,SAAS,QAAQ,OAAO;AACvC,YAAM,YAAY,OAAO,cAAc;AAEvC,UAAI,SAAS,WAAW;AAEtB,gBAAQ,MAAM,MAAM,MAAM;AAAA,MAC9B,OAAS;AAEL,cAAM,QAAQ;AAAA,MAEf;AAAA,IACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"BottomSheet.vue.cjs","sources":["../../../../../src/components/BottomSheet/BottomSheet.vue"],"sourcesContent":["<template>\n  <transition name=\"slideY\"  mode=\"out-in\">\n    <section \n      ref=\"wrapper\" \n      class=\"w-100 h-100vh\"\n      :class=\"{\n        'pd-t-extra': MOBILE_APP === 'ios',  \n      }\"\n      >\n      <!-- Toggle To Close -->\n      <div\n        @click=\"emits('toggle')\"\n        @mousedown=\"startDrag\"\n        @touchstart=\"startDrag\"\n        @mousemove=\"onDrag\"\n        @touchmove=\"onDrag\"\n        @mouseup=\"endDrag\"\n        @touchend=\"endDrag\"\n        @mouseleave=\"endDrag\"\n        class=\"bs-black d-block p-medium pos-relative bg-white flex-center flex uppercase z-index-2\"\n      >\n        <div class=\"radius-extra pd-small t-black p-medium\">\n          <div class=\"radius-extra pd-nano w-3r h-1r t-black p-medium bg-black-transp-10\"></div>\n        </div>\n      </div>\n      \n      <slot></slot>\n    </section>\n  </transition>\n</template>\n\n<script setup>\nimport { ref } from 'vue';\n\nconst props = defineProps({\n  show: {\n    type: Boolean,\n    default: false\n  },\n  options: {\n    type: Object,\n    default: {\n      position: false\n    }\n  }\n})\n\nconst emits = defineEmits([\n  'toggle'\n])\n\nconst wrapper = ref(null)\n\nconst startY = ref(0);\nconst currentY = ref(0);\nconst dragging = ref(false);\n\nfunction startDrag(event) {\n  dragging.value = true;\n  startY.value = event.touches ? event.touches[0].clientY : event.clientY;\n  currentY.value = startY.value;\n}\n\nfunction onDrag(event) {\n  if (!dragging.value) return;\n  event.preventDefault(); // Prevent scrolling while dragging\n  currentY.value = event.touches ? event.touches[0].clientY : event.clientY;\n  const deltaY = currentY.value - startY.value;\n\n  if (deltaY > 0) {\n    wrapper.value.style.top = `${deltaY}px`;\n  }\n}\nfunction endDrag() {\n  if (!dragging.value) return;\n\n  dragging.value = false;\n\n  const deltaY = currentY.value - startY.value;\n  const threshold = window.innerHeight * 0.2;\n\n  if (deltaY < threshold) {\n    // If less than 40%, snap back to the original position\n    wrapper.value.style.top = '';\n  } else {\n    // If more than 40%, hide the element\n    emits('toggle')\n    // VisualizerWrapper.value.style.top = '';\n  }\n}\n</script>"],"names":["ref"],"mappings":";;;;;;;;;;;;;;;;;;;;;AA+CA,UAAM,QAAQ;AAId,UAAM,UAAUA,IAAG,IAAC,IAAI;AAExB,UAAM,SAASA,IAAAA,IAAI,CAAC;AACpB,UAAM,WAAWA,IAAAA,IAAI,CAAC;AACtB,UAAM,WAAWA,IAAAA,IAAI,KAAK;AAE1B,aAAS,UAAU,OAAO;AACxB,eAAS,QAAQ;AACjB,aAAO,QAAQ,MAAM,UAAU,MAAM,QAAQ,CAAC,EAAE,UAAU,MAAM;AAChE,eAAS,QAAQ,OAAO;AAAA,IAC1B;AAEA,aAAS,OAAO,OAAO;AACrB,UAAI,CAAC,SAAS,MAAO;AACrB,YAAM,eAAc;AACpB,eAAS,QAAQ,MAAM,UAAU,MAAM,QAAQ,CAAC,EAAE,UAAU,MAAM;AAClE,YAAM,SAAS,SAAS,QAAQ,OAAO;AAEvC,UAAI,SAAS,GAAG;AACd,gBAAQ,MAAM,MAAM,MAAM,GAAG,MAAM;AAAA,MACpC;AAAA,IACH;AACA,aAAS,UAAU;AACjB,UAAI,CAAC,SAAS,MAAO;AAErB,eAAS,QAAQ;AAEjB,YAAM,SAAS,SAAS,QAAQ,OAAO;AACvC,YAAM,YAAY,OAAO,cAAc;AAEvC,UAAI,SAAS,WAAW;AAEtB,gBAAQ,MAAM,MAAM,MAAM;AAAA,MAC9B,OAAS;AAEL,cAAM,QAAQ;AAAA,MAEf;AAAA,IACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/prometheus-framework/src/components/BottomSheet/BottomSheet.vue.js

@@ -1,4 +1,4 @@
-import { ref, openBlock, createBlock, Transition, withCtx, createElementVNode, normalizeStyle, renderSlot } from "vue";
+import { ref, openBlock, createBlock, Transition, withCtx, createElementVNode, normalizeClass, renderSlot } from "vue";
 const _sfc_main = {
   __name: "BottomSheet",
   props: {
@@ -56,8 +56,9 @@ const _sfc_main = {
           createElementVNode("section", {
             ref_key: "wrapper",
             ref: wrapper,
-            class: "w-100 h-100vh",
-            style: normalizeStyle(_ctx.MOBILE_APP === "ios" ? "padding-top: 6rem;" : "")
+            class: normalizeClass(["w-100 h-100vh", {
+              "pd-t-extra": _ctx.MOBILE_APP === "ios"
+            }])
           }, [
             createElementVNode("div", {
               onClick: _cache[0] || (_cache[0] = ($event) => emits("toggle")),
@@ -75,7 +76,7 @@ const _sfc_main = {
               ], -1)
             ]), 32),
             renderSlot(_ctx.$slots, "default")
-          ], 4)
+          ], 2)
         ]),
         _: 3
       });

package/dist/prometheus-framework/src/components/BottomSheet/BottomSheet.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"BottomSheet.vue.js","sources":["../../../../../src/components/BottomSheet/BottomSheet.vue"],"sourcesContent":["<template>\n  <transition name=\"slideY\"  mode=\"out-in\">\n    <section \n      ref=\"wrapper\" \n      class=\"w-100 h-100vh\"\n      :style=\"MOBILE_APP === 'ios' ?'padding-top: 6rem;':''\" \n    >\n      <!-- Toggle To Close -->\n      <div\n        @click=\"emits('toggle')\"\n        @mousedown=\"startDrag\"\n        @touchstart=\"startDrag\"\n        @mousemove=\"onDrag\"\n        @touchmove=\"onDrag\"\n        @mouseup=\"endDrag\"\n        @touchend=\"endDrag\"\n        @mouseleave=\"endDrag\"\n        class=\"bs-black d-block p-medium pos-relative bg-white flex-center flex uppercase z-index-2\"\n      >\n        <div class=\"radius-extra pd-small t-black p-medium\">\n          <div class=\"radius-extra pd-nano w-3r h-1r t-black p-medium bg-black-transp-10\"></div>\n        </div>\n      </div>\n      \n      <slot></slot>\n    </section>\n  </transition>\n</template>\n\n<script setup>\nimport { ref } from 'vue';\n\nconst props = defineProps({\n  show: {\n    type: Boolean,\n    default: false\n  },\n  options: {\n    type: Object,\n    default: {\n      position: false\n    }\n  }\n})\n\nconst emits = defineEmits([\n  'toggle'\n])\n\nconst wrapper = ref(null)\n\nconst startY = ref(0);\nconst currentY = ref(0);\nconst dragging = ref(false);\n\nfunction startDrag(event) {\n  dragging.value = true;\n  startY.value = event.touches ? event.touches[0].clientY : event.clientY;\n  currentY.value = startY.value;\n}\n\nfunction onDrag(event) {\n  if (!dragging.value) return;\n  event.preventDefault(); // Prevent scrolling while dragging\n  currentY.value = event.touches ? event.touches[0].clientY : event.clientY;\n  const deltaY = currentY.value - startY.value;\n\n  if (deltaY > 0) {\n    wrapper.value.style.top = `${deltaY}px`;\n  }\n}\nfunction endDrag() {\n  if (!dragging.value) return;\n\n  dragging.value = false;\n\n  const deltaY = currentY.value - startY.value;\n  const threshold = window.innerHeight * 0.2;\n\n  if (deltaY < threshold) {\n    // If less than 40%, snap back to the original position\n    wrapper.value.style.top = '';\n  } else {\n    // If more than 40%, hide the element\n    emits('toggle')\n    // VisualizerWrapper.value.style.top = '';\n  }\n}\n</script>"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;AA6CA,UAAM,QAAQ;AAId,UAAM,UAAU,IAAI,IAAI;AAExB,UAAM,SAAS,IAAI,CAAC;AACpB,UAAM,WAAW,IAAI,CAAC;AACtB,UAAM,WAAW,IAAI,KAAK;AAE1B,aAAS,UAAU,OAAO;AACxB,eAAS,QAAQ;AACjB,aAAO,QAAQ,MAAM,UAAU,MAAM,QAAQ,CAAC,EAAE,UAAU,MAAM;AAChE,eAAS,QAAQ,OAAO;AAAA,IAC1B;AAEA,aAAS,OAAO,OAAO;AACrB,UAAI,CAAC,SAAS,MAAO;AACrB,YAAM,eAAc;AACpB,eAAS,QAAQ,MAAM,UAAU,MAAM,QAAQ,CAAC,EAAE,UAAU,MAAM;AAClE,YAAM,SAAS,SAAS,QAAQ,OAAO;AAEvC,UAAI,SAAS,GAAG;AACd,gBAAQ,MAAM,MAAM,MAAM,GAAG,MAAM;AAAA,MACpC;AAAA,IACH;AACA,aAAS,UAAU;AACjB,UAAI,CAAC,SAAS,MAAO;AAErB,eAAS,QAAQ;AAEjB,YAAM,SAAS,SAAS,QAAQ,OAAO;AACvC,YAAM,YAAY,OAAO,cAAc;AAEvC,UAAI,SAAS,WAAW;AAEtB,gBAAQ,MAAM,MAAM,MAAM;AAAA,MAC9B,OAAS;AAEL,cAAM,QAAQ;AAAA,MAEf;AAAA,IACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"BottomSheet.vue.js","sources":["../../../../../src/components/BottomSheet/BottomSheet.vue"],"sourcesContent":["<template>\n  <transition name=\"slideY\"  mode=\"out-in\">\n    <section \n      ref=\"wrapper\" \n      class=\"w-100 h-100vh\"\n      :class=\"{\n        'pd-t-extra': MOBILE_APP === 'ios',  \n      }\"\n      >\n      <!-- Toggle To Close -->\n      <div\n        @click=\"emits('toggle')\"\n        @mousedown=\"startDrag\"\n        @touchstart=\"startDrag\"\n        @mousemove=\"onDrag\"\n        @touchmove=\"onDrag\"\n        @mouseup=\"endDrag\"\n        @touchend=\"endDrag\"\n        @mouseleave=\"endDrag\"\n        class=\"bs-black d-block p-medium pos-relative bg-white flex-center flex uppercase z-index-2\"\n      >\n        <div class=\"radius-extra pd-small t-black p-medium\">\n          <div class=\"radius-extra pd-nano w-3r h-1r t-black p-medium bg-black-transp-10\"></div>\n        </div>\n      </div>\n      \n      <slot></slot>\n    </section>\n  </transition>\n</template>\n\n<script setup>\nimport { ref } from 'vue';\n\nconst props = defineProps({\n  show: {\n    type: Boolean,\n    default: false\n  },\n  options: {\n    type: Object,\n    default: {\n      position: false\n    }\n  }\n})\n\nconst emits = defineEmits([\n  'toggle'\n])\n\nconst wrapper = ref(null)\n\nconst startY = ref(0);\nconst currentY = ref(0);\nconst dragging = ref(false);\n\nfunction startDrag(event) {\n  dragging.value = true;\n  startY.value = event.touches ? event.touches[0].clientY : event.clientY;\n  currentY.value = startY.value;\n}\n\nfunction onDrag(event) {\n  if (!dragging.value) return;\n  event.preventDefault(); // Prevent scrolling while dragging\n  currentY.value = event.touches ? event.touches[0].clientY : event.clientY;\n  const deltaY = currentY.value - startY.value;\n\n  if (deltaY > 0) {\n    wrapper.value.style.top = `${deltaY}px`;\n  }\n}\nfunction endDrag() {\n  if (!dragging.value) return;\n\n  dragging.value = false;\n\n  const deltaY = currentY.value - startY.value;\n  const threshold = window.innerHeight * 0.2;\n\n  if (deltaY < threshold) {\n    // If less than 40%, snap back to the original position\n    wrapper.value.style.top = '';\n  } else {\n    // If more than 40%, hide the element\n    emits('toggle')\n    // VisualizerWrapper.value.style.top = '';\n  }\n}\n</script>"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;AA+CA,UAAM,QAAQ;AAId,UAAM,UAAU,IAAI,IAAI;AAExB,UAAM,SAAS,IAAI,CAAC;AACpB,UAAM,WAAW,IAAI,CAAC;AACtB,UAAM,WAAW,IAAI,KAAK;AAE1B,aAAS,UAAU,OAAO;AACxB,eAAS,QAAQ;AACjB,aAAO,QAAQ,MAAM,UAAU,MAAM,QAAQ,CAAC,EAAE,UAAU,MAAM;AAChE,eAAS,QAAQ,OAAO;AAAA,IAC1B;AAEA,aAAS,OAAO,OAAO;AACrB,UAAI,CAAC,SAAS,MAAO;AACrB,YAAM,eAAc;AACpB,eAAS,QAAQ,MAAM,UAAU,MAAM,QAAQ,CAAC,EAAE,UAAU,MAAM;AAClE,YAAM,SAAS,SAAS,QAAQ,OAAO;AAEvC,UAAI,SAAS,GAAG;AACd,gBAAQ,MAAM,MAAM,MAAM,GAAG,MAAM;AAAA,MACpC;AAAA,IACH;AACA,aAAS,UAAU;AACjB,UAAI,CAAC,SAAS,MAAO;AAErB,eAAS,QAAQ;AAEjB,YAAM,SAAS,SAAS,QAAQ,OAAO;AACvC,YAAM,YAAY,OAAO,cAAc;AAEvC,UAAI,SAAS,WAAW;AAEtB,gBAAQ,MAAM,MAAM,MAAM;AAAA,MAC9B,OAAS;AAEL,cAAM,QAAQ;AAAA,MAEf;AAAA,IACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/prometheus-framework/src/components/Button/Button.vue2.cjs

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
 const vue = require("vue");
-const Loader = require("../Loader/Loader.vue2.cjs");
+const Loader = require("../Loader/Loader.vue.cjs");
 ;/* empty css             */
 const _hoisted_1 = ["disabled"];
 const _hoisted_2 = { key: 0 };

package/dist/prometheus-framework/src/components/Button/Button.vue2.js

@@ -1,5 +1,5 @@
 import { ref, openBlock, createElementBlock, withModifiers, createVNode, Transition, withCtx, renderSlot, toDisplayString, createCommentVNode } from "vue";
-import Loader from "../Loader/Loader.vue2.js";
+import Loader from "../Loader/Loader.vue.js";
 /* empty css           */
 const _hoisted_1 = ["disabled"];
 const _hoisted_2 = { key: 0 };

package/dist/prometheus-framework/src/components/Feed/Feed.vue.cjs

@@ -2,7 +2,7 @@
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
 const vue = require("vue");
 const SkeletonEvent = require("../../modules/icons/skeletons/SkeletonEvent.vue.cjs");
-const Loader = require("../Loader/Loader.vue2.cjs");
+const Loader = require("../Loader/Loader.vue.cjs");
 const EmptyState = require("../EmptyState/EmptyState.vue.cjs");
 const Dropdown = require("../Dropdown/Dropdown.vue.cjs");
 const Calendar = require("../DatePicker/Calendar.vue2.cjs");
@@ -194,8 +194,9 @@ const _sfc_main = {
             key: 0,
             placeholder: search.value.placeholder || "Search...",
             class: vue.normalizeClass(search.value.class || "bg-light"),
-            onSearch: updateSearch
-          }, null, 8, ["placeholder", "class"])) : vue.createCommentVNode("", true),
+            onSearch: updateSearch,
+            autofocus: search.value.autofocus
+          }, null, 8, ["placeholder", "class", "autofocus"])) : vue.createCommentVNode("", true),
           filter.value ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 1 }, [
             vue.createElementVNode("div", {
               class: vue.normalizeClass([filter.value.class || "bg-light", "flex-center flex pd-thin bg-light radius-extra aspect-1x1 h-100"])

package/dist/prometheus-framework/src/components/Feed/Feed.vue.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Feed.vue.cjs","sources":["../../../../../src/components/Feed/Feed.vue"],"sourcesContent":["<template>\n\n  <div v-if=\"search || date || (sort && !sort.hideButton)\" class=\"flex-nowrap flex gap-thin\">\n\n    <BlockSearch \n      v-if=\"search\"\n      :placeholder=\"search.placeholder || 'Search...'\"\n      :class=\"search.class || 'bg-light'\"\n      @search=\"updateSearch\"\n    />\n\n    <template\n      v-if=\"filter\"\n    >\n      <div \n        :class=\"filter.class || 'bg-light'\"\n        class=\"flex-center flex pd-thin bg-light radius-extra aspect-1x1 h-100\"\n      >\n        <IconFilter @click=\"() => filter.active = !filter.active\" class=\"w-1r h-auto\"/>\n      </div>\n\n    \n      <BottomSheet\n        v-if=\"filter.active\"\n        :show=\"filter.active\"\n        @toggle=\"() => filter.active = false\"\n        class=\"z-index-10 pos-fixed pos-t-0 pos-r-0\"\n        :class=\"{\n          'pos-t-0':  filter.active,\n          'pos-t-100': !filter.active\n        }\"\n      >\n        <BlockFilter\n          v-model:filter=\"filter\"\n          :options=\"filter.options\"\n          class=\"h-100 w-100 pd-small bg-light\"\n        />\n      </BottomSheet>  \n    </template>\n\n    <Dropdown \n      v-if=\"date\"\n      :label=\"{\n        component: ButtonDate,\n        props: { date: date }\n      }\" \n      :class=\"date.class || 'bg-light'\"\n      class=\"flex-child flex-child-shrink-0 pd-r-small pd-l-small pd-thin bg-light radius-big\"\n      :align=\"search ? 'right' : 'left'\"\n    >\n\n      <Calendar\n        v-model:date=\"date\"\n        :locale=\"$i18n.locale\"\n        :allowRange=\"true\"\n        class=\"radius-semi w-100 o-hidden bg-light\"\n      />\n    </Dropdown> \n\n    <Dropdown \n      v-if=\"sort && !sort.hideButton\"\n      :label=\"{\n        component: ButtonSort,\n        props: { order: sort.order },\n        class: 'w-1r'\n      }\" \n      :class=\"sort.class || 'bg-light'\"\n      class=\"radius-extra aspect-1x1 h-100\"\n      :align=\"search ? 'right' : 'left'\"\n    >\n\n      <BlockSorting\n        v-model:param=\"sort.param\"\n        v-model:order=\"sort.order\"\n        :options=\"sort.options\"\n        class=\"h-100 pd-small radius-semi t-white bg-black\"\n      />\n    </Dropdown> \n  </div>\n\n  <TransitionGroup \n\n    v-if=\"isLoading\"\n    tag=\"ul\" \n    name=\"scaleTransition\" \n  >\n    <SkeletonEvent\n      v-if=\"isLoading\"\n      v-for=\"i in currentLimit\" \n      :key=\"'skeleton-' + i\"\n      class=\"mn-b-small radius-medium o-hidden d-block\"\n    />\n  </TransitionGroup>\n\n  <TransitionGroup \n    tag=\"ul\" \n    v-if=\"!isLoading && itemsList.length < 1\"\n    name=\"feed\"\n  >\n    <EmptyState\n      v-if=\"!isLoading && itemsList.length < 1\"\n      :title=\"states.empty.title\"\n      :description=\"states.empty.description\"\n      :action=\"states.empty.action\"\n      :callback=\"states.empty.callback\"\n      class=\"pd-medium mn-b-thin bg-light radius-big\"\n    />\n   </TransitionGroup>\n\n  <TransitionGroup \n    tag=\"ul\" \n    name=\"feed\"\n    :class=\"$attrs.class\"\n  >\n    <slot\n      v-if=\"!isLoading && itemsList.length > 0\"\n      :items=\"itemsList\"\n    >\n    </slot>\n  </TransitionGroup>\n\n  <button\n    v-if=\"showLoadMore && hasMoreItems && itemsList.length > 0 && !isLoadingExtra\"\n    @click=\"loadMoreItems\"\n    class=\"col-w-100 mn-t-thin w-100 t-black bg-main button\"\n  >\n    Load More\n  </button>\n\n  <div v-else key=\"sentinel\" ref=\"sentinel\" class=\"sentinel\"></div> \n\n  <div\n\n    v-if=\"isLoadingExtra\"\n    class=\"col-w-100 w-100 pos-relative\"\n  >\n    <Loader/>\n  </div>\n \n\n</template>\n\n<script setup>\nimport { ref, computed, onMounted, onUnmounted, shallowRef, watch } from 'vue';\n\nimport SkeletonEvent from '@pf/src/modules/icons/skeletons/SkeletonEvent.vue'\n\nimport Loader from '@pf/src/components/Loader/Loader.vue';\nimport EmptyState from '@pf/src/components/EmptyState/EmptyState.vue';\nimport Dropdown from \"@pf/src/components/Dropdown/Dropdown.vue\";\nimport Calendar from '@pf/src/components/DatePicker/Calendar.vue'\nimport BottomSheet from '@pf/src/components/BottomSheet/BottomSheet.vue';\n\nimport BlockSearch from '@pf/src/modules/globals/views/components/blocks/BlockSearch.vue'\nimport BlockSorting  from '@pf/src/modules/globals/views/components/blocks/BlockSorting.vue'\nimport BlockFilter  from '@pf/src/modules/globals/views/components/blocks/BlockFilter.vue'\n\nimport ButtonSort  from '@pf/src/modules/globals/views/components/elements/ButtonSort.vue'\nimport ButtonDate  from '@pf/src/modules/globals/views/components/elements/ButtonDate.vue'\n\nimport IconFilter from '@pf/src/modules/icons/navigation/IconFilter.vue'\nimport IconEvents from '@pf/src/modules/icons/entities/IconEvents.vue'\n\nconst search = defineModel('search')\nconst sort = defineModel('sort')\nconst filter = defineModel('filter')\nconst date = defineModel('date')\nconst items = defineModel('items')\n\n// Пропсы\nconst props = defineProps({\n  showLoadMore: {\n    type: Boolean,\n    default: true\n  },\n  search: {\n    type: [Boolean, Object],\n    default: false\n  },\n  states: {\n    type: Object,\n    default: () => ({\n      empty: {\n        title: String,\n        description: String,\n      },\n    }),\n  },\n  store: {\n    type: Object,\n    default: () => ({\n      read: Function,\n      state: Object,\n    }),\n  },\n  external: {\n    type: Boolean,\n    default: false\n  },\n  options: {\n    type: Object,\n    default: () => ({\n      category: null,\n      limit: 20, \n      skip: 0 ,\n      owner:  null,\n      creator:  null,\n      user:  null,\n      status: null,\n      period:  null,\n      contain:  null,\n    }),\n  },\n});\n  \nconst itemsList = shallowRef(items.value || []);\nconst hasMoreItems = ref(false);\n\nlet isLoading = ref(true);\nlet isLoadingExtra = ref(false);\nlet sentinel = ref(null)\n\nlet currentSkip = ref(props.options.skip ? props.options.skip : 0);\nlet currentLimit = ref(props.options.limit ? props.options.limit : 10);\n\n// let sortParam = ref(sort.value?.param || 'createdAt');\n// let sortOrder = ref(sort.value?.order || 'asc');\n\nlet currentSearch = ref('');\n\nfunction debounce(fn, delay) {\n  let timeoutId = null;\n  return (...args) => {\n    clearTimeout(timeoutId);\n    timeoutId = setTimeout(() => fn(...args), delay);\n  };\n}\n\nconst debouncedSearch = debounce((value) => {\n  currentSearch.value = value;\n  currentSkip.value = 0;\n  currentLimit.value = 10;\n  fetchItems();\n}, 300);\n\nfunction updateSearch(search) {\n  debouncedSearch(search);\n}\n\nconst loadMoreItems = async () => {\n  isLoadingExtra.value = true\n\n  if (hasMoreItems.value) {\n    currentSkip.value += currentLimit.value;\n    \n    const data = await props.store.read({\n      skip: currentSkip.value,\n      limit: currentLimit.value,\n      search: currentSearch.value,\n      dateStart: date.value ? date.value.start : null,\n      dateEnd: date.value ? date.value.end : null,\n      sortParam: sort.value ? sort.value.param : null,\n      sortOrder: sort.value ? sort.value.order : null,\n      ...props.options\n    });\n\n    if (data.length === 0) {\n      hasMoreItems.value = false;\n    } else if (data.length < currentLimit.value) {\n      hasMoreItems.value = false;\n    } else {\n      hasMoreItems.value = true;\n    }\n\n    itemsList.value = [...itemsList.value, ...data];\n    \n    if (items.value) items.value = itemsList.value;\n  }\n\n  isLoadingExtra.value = false\n};\n\nconst fetchItems = async () => {\n  isLoading.value = true;\n  const data = await props.store.read({\n    skip: currentSkip.value,\n    limit: currentLimit.value,\n    dateStart: date.value ? date.value.start : null,\n    dateEnd: date.value ? date.value.end : null,\n    sortParam: sort.value ? sort.value.param : null,\n    sortOrder: sort.value ? sort.value.order : null,\n    search: currentSearch.value,\n    ...props.options\n  });\n\n  if (data.length === 0) {\n    hasMoreItems.value = false;\n  } else if (data.length < currentLimit.value) {\n    hasMoreItems.value = false;\n  } else {\n    hasMoreItems.value = true;\n  }\n\n  itemsList.value = data;\n  if (items.value) items.value = itemsList.value;\n  isLoading.value = false;\n};\n\nwatch(\n  () => [props.external, date.value, sort.value, props.options],\n  ([newExternal, newDate, newSort, newOptions], [oldExternal, oldDate, oldSort, oldOptions]) => {\n    if (\n      newExternal !== oldExternal ||\n      newDate !== oldDate ||\n      newSort?.order !== oldSort?.order ||\n      newSort?.param !== oldSort?.param ||\n      JSON.stringify(newOptions) !== JSON.stringify(oldOptions)\n    ) {\n      currentSkip.value = 0;\n      fetchItems();\n    }\n  },\n  { deep: true }\n);\n\nlet observer = null\n\nonMounted(async () => {\n  await fetchItems()\n\n  if (typeof window !== 'undefined' && !props.showLoadMore) {\n    observer = new IntersectionObserver(entries => {\n      if (entries.some(entry => entry.isIntersecting)) {\n        loadMoreItems()\n      }\n    })\n\n    if (sentinel.value) observer.observe(sentinel.value)\n  }\n});\n\nonUnmounted(() => {\n  if (observer) {\n    observer.disconnect();\n  }\n});\n</script>\n\n\n<style>\n.feed-move, /* apply transition to moving elements */\n.feed-enter-active,\n.feed-leave-active {\n  transition: all 0.5s ease;\n}\n\n.feed-enter-from,\n.feed-leave-to {\n  opacity: 0;\n  transform: translateY(30px);\n}\n\n/* ensure leaving items are taken out of layout flow so that moving\n   animations can be calculated correctly. */\n.feed-leave-active {\n  position: absolute;\n}\n</style>"],"names":["_useModel","shallowRef","ref","search","watch","onMounted","onUnmounted"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAmKA,UAAM,SAASA,IAAAA,SAAY,SAAA,QAAQ;AACnC,UAAM,OAAOA,IAAAA,kBAAY,MAAM;AAC/B,UAAM,SAASA,IAAAA,SAAY,SAAA,QAAQ;AACnC,UAAM,OAAOA,IAAAA,kBAAY,MAAM;AAC/B,UAAM,QAAQA,IAAAA,kBAAY,OAAO;AAGjC,UAAM,QAAQ;AA6Cd,UAAM,YAAYC,IAAAA,WAAW,MAAM,SAAS,CAAE,CAAA;AAC9C,UAAM,eAAeC,IAAAA,IAAI,KAAK;AAE9B,QAAI,YAAYA,IAAAA,IAAI,IAAI;AACxB,QAAI,iBAAiBA,IAAAA,IAAI,KAAK;AAC9B,QAAI,WAAWA,IAAG,IAAC,IAAI;AAEvB,QAAI,cAAcA,IAAAA,IAAI,MAAM,QAAQ,OAAO,MAAM,QAAQ,OAAO,CAAC;AACjE,QAAI,eAAeA,IAAAA,IAAI,MAAM,QAAQ,QAAQ,MAAM,QAAQ,QAAQ,EAAE;AAKrE,QAAI,gBAAgBA,IAAAA,IAAI,EAAE;AAE1B,aAAS,SAAS,IAAI,OAAO;AAC3B,UAAI,YAAY;AAChB,aAAO,IAAI,SAAS;AAClB,qBAAa,SAAS;AACtB,oBAAY,WAAW,MAAM,GAAG,GAAG,IAAI,GAAG,KAAK;AAAA,MACnD;AAAA,IACA;AAEA,UAAM,kBAAkB,SAAS,CAAC,UAAU;AAC1C,oBAAc,QAAQ;AACtB,kBAAY,QAAQ;AACpB,mBAAa,QAAQ;AACrB;IACF,GAAG,GAAG;AAEN,aAAS,aAAaC,SAAQ;AAC5B,sBAAgBA,OAAM;AAAA,IACxB;AAEA,UAAM,gBAAgB,YAAY;AAChC,qBAAe,QAAQ;AAEvB,UAAI,aAAa,OAAO;AACtB,oBAAY,SAAS,aAAa;AAElC,cAAM,OAAO,MAAM,MAAM,MAAM,KAAK;AAAA,UAClC,MAAM,YAAY;AAAA,UAClB,OAAO,aAAa;AAAA,UACpB,QAAQ,cAAc;AAAA,UACtB,WAAW,KAAK,QAAQ,KAAK,MAAM,QAAQ;AAAA,UAC3C,SAAS,KAAK,QAAQ,KAAK,MAAM,MAAM;AAAA,UACvC,WAAW,KAAK,QAAQ,KAAK,MAAM,QAAQ;AAAA,UAC3C,WAAW,KAAK,QAAQ,KAAK,MAAM,QAAQ;AAAA,UAC3C,GAAG,MAAM;AAAA,QACf,CAAK;AAED,YAAI,KAAK,WAAW,GAAG;AACrB,uBAAa,QAAQ;AAAA,QACtB,WAAU,KAAK,SAAS,aAAa,OAAO;AAC3C,uBAAa,QAAQ;AAAA,QAC3B,OAAW;AACL,uBAAa,QAAQ;AAAA,QACtB;AAED,kBAAU,QAAQ,CAAC,GAAG,UAAU,OAAO,GAAG,IAAI;AAE9C,YAAI,MAAM,MAAO,OAAM,QAAQ,UAAU;AAAA,MAC1C;AAED,qBAAe,QAAQ;AAAA,IACzB;AAEA,UAAM,aAAa,YAAY;AAC7B,gBAAU,QAAQ;AAClB,YAAM,OAAO,MAAM,MAAM,MAAM,KAAK;AAAA,QAClC,MAAM,YAAY;AAAA,QAClB,OAAO,aAAa;AAAA,QACpB,WAAW,KAAK,QAAQ,KAAK,MAAM,QAAQ;AAAA,QAC3C,SAAS,KAAK,QAAQ,KAAK,MAAM,MAAM;AAAA,QACvC,WAAW,KAAK,QAAQ,KAAK,MAAM,QAAQ;AAAA,QAC3C,WAAW,KAAK,QAAQ,KAAK,MAAM,QAAQ;AAAA,QAC3C,QAAQ,cAAc;AAAA,QACtB,GAAG,MAAM;AAAA,MACb,CAAG;AAED,UAAI,KAAK,WAAW,GAAG;AACrB,qBAAa,QAAQ;AAAA,MACtB,WAAU,KAAK,SAAS,aAAa,OAAO;AAC3C,qBAAa,QAAQ;AAAA,MACzB,OAAS;AACL,qBAAa,QAAQ;AAAA,MACtB;AAED,gBAAU,QAAQ;AAClB,UAAI,MAAM,MAAO,OAAM,QAAQ,UAAU;AACzC,gBAAU,QAAQ;AAAA,IACpB;AAEAC,QAAK;AAAA,MACH,MAAM,CAAC,MAAM,UAAU,KAAK,OAAO,KAAK,OAAO,MAAM,OAAO;AAAA,MAC5D,CAAC,CAAC,aAAa,SAAS,SAAS,UAAU,GAAG,CAAC,aAAa,SAAS,SAAS,UAAU,MAAM;AAC5F,YACE,gBAAgB,eAChB,YAAY,YACZ,mCAAS,YAAU,mCAAS,WAC5B,mCAAS,YAAU,mCAAS,UAC5B,KAAK,UAAU,UAAU,MAAM,KAAK,UAAU,UAAU,GACxD;AACA,sBAAY,QAAQ;AACpB;QACD;AAAA,MACF;AAAA,MACD,EAAE,MAAM,KAAM;AAAA,IAChB;AAEA,QAAI,WAAW;AAEfC,QAAAA,UAAU,YAAY;AACpB,YAAM,WAAY;AAElB,UAAI,OAAO,WAAW,eAAe,CAAC,MAAM,cAAc;AACxD,mBAAW,IAAI,qBAAqB,aAAW;AAC7C,cAAI,QAAQ,KAAK,WAAS,MAAM,cAAc,GAAG;AAC/C,0BAAe;AAAA,UAChB;AAAA,QACP,CAAK;AAED,YAAI,SAAS,MAAO,UAAS,QAAQ,SAAS,KAAK;AAAA,MACpD;AAAA,IACH,CAAC;AAEDC,QAAAA,YAAY,MAAM;AAChB,UAAI,UAAU;AACZ,iBAAS,WAAU;AAAA,MACpB;AAAA,IACH,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"Feed.vue.cjs","sources":["../../../../../src/components/Feed/Feed.vue"],"sourcesContent":["<template>\n\n  <div v-if=\"search || date || (sort && !sort.hideButton)\" class=\"flex-nowrap flex gap-thin\">\n\n    <BlockSearch \n      v-if=\"search\"\n      :placeholder=\"search.placeholder || 'Search...'\"\n      :class=\"search.class || 'bg-light'\"\n      @search=\"updateSearch\"\n      :autofocus=\"search.autofocus\"\n    />\n\n    <template\n      v-if=\"filter\"\n    >\n      <div \n        :class=\"filter.class || 'bg-light'\"\n        class=\"flex-center flex pd-thin bg-light radius-extra aspect-1x1 h-100\"\n      >\n        <IconFilter @click=\"() => filter.active = !filter.active\" class=\"w-1r h-auto\"/>\n      </div>\n\n    \n      <BottomSheet\n        v-if=\"filter.active\"\n        :show=\"filter.active\"\n        @toggle=\"() => filter.active = false\"\n        class=\"z-index-10 pos-fixed pos-t-0 pos-r-0\"\n        :class=\"{\n          'pos-t-0':  filter.active,\n          'pos-t-100': !filter.active\n        }\"\n      >\n        <BlockFilter\n          v-model:filter=\"filter\"\n          :options=\"filter.options\"\n          class=\"h-100 w-100 pd-small bg-light\"\n        />\n      </BottomSheet>  \n    </template>\n\n    <Dropdown \n      v-if=\"date\"\n      :label=\"{\n        component: ButtonDate,\n        props: { date: date }\n      }\" \n      :class=\"date.class || 'bg-light'\"\n      class=\"flex-child flex-child-shrink-0 pd-r-small pd-l-small pd-thin bg-light radius-big\"\n      :align=\"search ? 'right' : 'left'\"\n    >\n\n      <Calendar\n        v-model:date=\"date\"\n        :locale=\"$i18n.locale\"\n        :allowRange=\"true\"\n        class=\"radius-semi w-100 o-hidden bg-light\"\n      />\n    </Dropdown> \n\n    <Dropdown \n      v-if=\"sort && !sort.hideButton\"\n      :label=\"{\n        component: ButtonSort,\n        props: { order: sort.order },\n        class: 'w-1r'\n      }\" \n      :class=\"sort.class || 'bg-light'\"\n      class=\"radius-extra aspect-1x1 h-100\"\n      :align=\"search ? 'right' : 'left'\"\n    >\n\n      <BlockSorting\n        v-model:param=\"sort.param\"\n        v-model:order=\"sort.order\"\n        :options=\"sort.options\"\n        class=\"h-100 pd-small radius-semi t-white bg-black\"\n      />\n    </Dropdown> \n  </div>\n\n  <TransitionGroup \n\n    v-if=\"isLoading\"\n    tag=\"ul\" \n    name=\"scaleTransition\" \n  >\n    <SkeletonEvent\n      v-if=\"isLoading\"\n      v-for=\"i in currentLimit\" \n      :key=\"'skeleton-' + i\"\n      class=\"mn-b-small radius-medium o-hidden d-block\"\n    />\n  </TransitionGroup>\n\n  <TransitionGroup \n    tag=\"ul\" \n    v-if=\"!isLoading && itemsList.length < 1\"\n    name=\"feed\"\n  >\n    <EmptyState\n      v-if=\"!isLoading && itemsList.length < 1\"\n      :title=\"states.empty.title\"\n      :description=\"states.empty.description\"\n      :action=\"states.empty.action\"\n      :callback=\"states.empty.callback\"\n      class=\"pd-medium mn-b-thin bg-light radius-big\"\n    />\n   </TransitionGroup>\n\n  <TransitionGroup \n    tag=\"ul\" \n    name=\"feed\"\n    :class=\"$attrs.class\"\n  >\n    <slot\n      v-if=\"!isLoading && itemsList.length > 0\"\n      :items=\"itemsList\"\n    >\n    </slot>\n  </TransitionGroup>\n\n  <button\n    v-if=\"showLoadMore && hasMoreItems && itemsList.length > 0 && !isLoadingExtra\"\n    @click=\"loadMoreItems\"\n    class=\"col-w-100 mn-t-thin w-100 t-black bg-main button\"\n  >\n    Load More\n  </button>\n\n  <div v-else key=\"sentinel\" ref=\"sentinel\" class=\"sentinel\"></div> \n\n  <div\n\n    v-if=\"isLoadingExtra\"\n    class=\"col-w-100 w-100 pos-relative\"\n  >\n    <Loader/>\n  </div>\n \n\n</template>\n\n<script setup>\nimport { ref, computed, onMounted, onUnmounted, shallowRef, watch } from 'vue';\n\nimport SkeletonEvent from '@pf/src/modules/icons/skeletons/SkeletonEvent.vue'\n\nimport Loader from '@pf/src/components/Loader/Loader.vue';\nimport EmptyState from '@pf/src/components/EmptyState/EmptyState.vue';\nimport Dropdown from \"@pf/src/components/Dropdown/Dropdown.vue\";\nimport Calendar from '@pf/src/components/DatePicker/Calendar.vue'\nimport BottomSheet from '@pf/src/components/BottomSheet/BottomSheet.vue';\n\nimport BlockSearch from '@pf/src/modules/globals/views/components/blocks/BlockSearch.vue'\nimport BlockSorting  from '@pf/src/modules/globals/views/components/blocks/BlockSorting.vue'\nimport BlockFilter  from '@pf/src/modules/globals/views/components/blocks/BlockFilter.vue'\n\nimport ButtonSort  from '@pf/src/modules/globals/views/components/elements/ButtonSort.vue'\nimport ButtonDate  from '@pf/src/modules/globals/views/components/elements/ButtonDate.vue'\n\nimport IconFilter from '@pf/src/modules/icons/navigation/IconFilter.vue'\nimport IconEvents from '@pf/src/modules/icons/entities/IconEvents.vue'\n\nconst search = defineModel('search')\nconst sort = defineModel('sort')\nconst filter = defineModel('filter')\nconst date = defineModel('date')\nconst items = defineModel('items')\n\n// Пропсы\nconst props = defineProps({\n  showLoadMore: {\n    type: Boolean,\n    default: true\n  },\n  search: {\n    type: [Boolean, Object],\n    default: false\n  },\n  states: {\n    type: Object,\n    default: () => ({\n      empty: {\n        title: String,\n        description: String,\n      },\n    }),\n  },\n  store: {\n    type: Object,\n    default: () => ({\n      read: Function,\n      state: Object,\n    }),\n  },\n  external: {\n    type: Boolean,\n    default: false\n  },\n  options: {\n    type: Object,\n    default: () => ({\n      category: null,\n      limit: 20, \n      skip: 0 ,\n      owner:  null,\n      creator:  null,\n      user:  null,\n      status: null,\n      period:  null,\n      contain:  null,\n    }),\n  },\n});\n  \nconst itemsList = shallowRef(items.value || []);\nconst hasMoreItems = ref(false);\n\nlet isLoading = ref(true);\nlet isLoadingExtra = ref(false);\nlet sentinel = ref(null)\n\nlet currentSkip = ref(props.options.skip ? props.options.skip : 0);\nlet currentLimit = ref(props.options.limit ? props.options.limit : 10);\n\n// let sortParam = ref(sort.value?.param || 'createdAt');\n// let sortOrder = ref(sort.value?.order || 'asc');\n\nlet currentSearch = ref('');\n\nfunction debounce(fn, delay) {\n  let timeoutId = null;\n  return (...args) => {\n    clearTimeout(timeoutId);\n    timeoutId = setTimeout(() => fn(...args), delay);\n  };\n}\n\nconst debouncedSearch = debounce((value) => {\n  currentSearch.value = value;\n  currentSkip.value = 0;\n  currentLimit.value = 10;\n  fetchItems();\n}, 300);\n\nfunction updateSearch(search) {\n  debouncedSearch(search);\n}\n\nconst loadMoreItems = async () => {\n  isLoadingExtra.value = true\n\n  if (hasMoreItems.value) {\n    currentSkip.value += currentLimit.value;\n    \n    const data = await props.store.read({\n      skip: currentSkip.value,\n      limit: currentLimit.value,\n      search: currentSearch.value,\n      dateStart: date.value ? date.value.start : null,\n      dateEnd: date.value ? date.value.end : null,\n      sortParam: sort.value ? sort.value.param : null,\n      sortOrder: sort.value ? sort.value.order : null,\n      ...props.options\n    });\n\n    if (data.length === 0) {\n      hasMoreItems.value = false;\n    } else if (data.length < currentLimit.value) {\n      hasMoreItems.value = false;\n    } else {\n      hasMoreItems.value = true;\n    }\n\n    itemsList.value = [...itemsList.value, ...data];\n    \n    if (items.value) items.value = itemsList.value;\n  }\n\n  isLoadingExtra.value = false\n};\n\nconst fetchItems = async () => {\n  isLoading.value = true;\n  const data = await props.store.read({\n    skip: currentSkip.value,\n    limit: currentLimit.value,\n    dateStart: date.value ? date.value.start : null,\n    dateEnd: date.value ? date.value.end : null,\n    sortParam: sort.value ? sort.value.param : null,\n    sortOrder: sort.value ? sort.value.order : null,\n    search: currentSearch.value,\n    ...props.options\n  });\n\n  if (data.length === 0) {\n    hasMoreItems.value = false;\n  } else if (data.length < currentLimit.value) {\n    hasMoreItems.value = false;\n  } else {\n    hasMoreItems.value = true;\n  }\n\n  itemsList.value = data;\n  if (items.value) items.value = itemsList.value;\n  isLoading.value = false;\n};\n\nwatch(\n  () => [props.external, date.value, sort.value, props.options],\n  ([newExternal, newDate, newSort, newOptions], [oldExternal, oldDate, oldSort, oldOptions]) => {\n    if (\n      newExternal !== oldExternal ||\n      newDate !== oldDate ||\n      newSort?.order !== oldSort?.order ||\n      newSort?.param !== oldSort?.param ||\n      JSON.stringify(newOptions) !== JSON.stringify(oldOptions)\n    ) {\n      currentSkip.value = 0;\n      fetchItems();\n    }\n  },\n  { deep: true }\n);\n\nlet observer = null\n\nonMounted(async () => {\n  await fetchItems()\n\n  if (typeof window !== 'undefined' && !props.showLoadMore) {\n    observer = new IntersectionObserver(entries => {\n      if (entries.some(entry => entry.isIntersecting)) {\n        loadMoreItems()\n      }\n    })\n\n    if (sentinel.value) observer.observe(sentinel.value)\n  }\n});\n\nonUnmounted(() => {\n  if (observer) {\n    observer.disconnect();\n  }\n});\n</script>\n\n\n<style>\n.feed-move, /* apply transition to moving elements */\n.feed-enter-active,\n.feed-leave-active {\n  transition: all 0.5s ease;\n}\n\n.feed-enter-from,\n.feed-leave-to {\n  opacity: 0;\n  transform: translateY(30px);\n}\n\n/* ensure leaving items are taken out of layout flow so that moving\n   animations can be calculated correctly. */\n.feed-leave-active {\n  position: absolute;\n}\n</style>"],"names":["_useModel","shallowRef","ref","search","watch","onMounted","onUnmounted"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAoKA,UAAM,SAASA,IAAAA,SAAY,SAAA,QAAQ;AACnC,UAAM,OAAOA,IAAAA,kBAAY,MAAM;AAC/B,UAAM,SAASA,IAAAA,SAAY,SAAA,QAAQ;AACnC,UAAM,OAAOA,IAAAA,kBAAY,MAAM;AAC/B,UAAM,QAAQA,IAAAA,kBAAY,OAAO;AAGjC,UAAM,QAAQ;AA6Cd,UAAM,YAAYC,IAAAA,WAAW,MAAM,SAAS,CAAE,CAAA;AAC9C,UAAM,eAAeC,IAAAA,IAAI,KAAK;AAE9B,QAAI,YAAYA,IAAAA,IAAI,IAAI;AACxB,QAAI,iBAAiBA,IAAAA,IAAI,KAAK;AAC9B,QAAI,WAAWA,IAAG,IAAC,IAAI;AAEvB,QAAI,cAAcA,IAAAA,IAAI,MAAM,QAAQ,OAAO,MAAM,QAAQ,OAAO,CAAC;AACjE,QAAI,eAAeA,IAAAA,IAAI,MAAM,QAAQ,QAAQ,MAAM,QAAQ,QAAQ,EAAE;AAKrE,QAAI,gBAAgBA,IAAAA,IAAI,EAAE;AAE1B,aAAS,SAAS,IAAI,OAAO;AAC3B,UAAI,YAAY;AAChB,aAAO,IAAI,SAAS;AAClB,qBAAa,SAAS;AACtB,oBAAY,WAAW,MAAM,GAAG,GAAG,IAAI,GAAG,KAAK;AAAA,MACnD;AAAA,IACA;AAEA,UAAM,kBAAkB,SAAS,CAAC,UAAU;AAC1C,oBAAc,QAAQ;AACtB,kBAAY,QAAQ;AACpB,mBAAa,QAAQ;AACrB;IACF,GAAG,GAAG;AAEN,aAAS,aAAaC,SAAQ;AAC5B,sBAAgBA,OAAM;AAAA,IACxB;AAEA,UAAM,gBAAgB,YAAY;AAChC,qBAAe,QAAQ;AAEvB,UAAI,aAAa,OAAO;AACtB,oBAAY,SAAS,aAAa;AAElC,cAAM,OAAO,MAAM,MAAM,MAAM,KAAK;AAAA,UAClC,MAAM,YAAY;AAAA,UAClB,OAAO,aAAa;AAAA,UACpB,QAAQ,cAAc;AAAA,UACtB,WAAW,KAAK,QAAQ,KAAK,MAAM,QAAQ;AAAA,UAC3C,SAAS,KAAK,QAAQ,KAAK,MAAM,MAAM;AAAA,UACvC,WAAW,KAAK,QAAQ,KAAK,MAAM,QAAQ;AAAA,UAC3C,WAAW,KAAK,QAAQ,KAAK,MAAM,QAAQ;AAAA,UAC3C,GAAG,MAAM;AAAA,QACf,CAAK;AAED,YAAI,KAAK,WAAW,GAAG;AACrB,uBAAa,QAAQ;AAAA,QACtB,WAAU,KAAK,SAAS,aAAa,OAAO;AAC3C,uBAAa,QAAQ;AAAA,QAC3B,OAAW;AACL,uBAAa,QAAQ;AAAA,QACtB;AAED,kBAAU,QAAQ,CAAC,GAAG,UAAU,OAAO,GAAG,IAAI;AAE9C,YAAI,MAAM,MAAO,OAAM,QAAQ,UAAU;AAAA,MAC1C;AAED,qBAAe,QAAQ;AAAA,IACzB;AAEA,UAAM,aAAa,YAAY;AAC7B,gBAAU,QAAQ;AAClB,YAAM,OAAO,MAAM,MAAM,MAAM,KAAK;AAAA,QAClC,MAAM,YAAY;AAAA,QAClB,OAAO,aAAa;AAAA,QACpB,WAAW,KAAK,QAAQ,KAAK,MAAM,QAAQ;AAAA,QAC3C,SAAS,KAAK,QAAQ,KAAK,MAAM,MAAM;AAAA,QACvC,WAAW,KAAK,QAAQ,KAAK,MAAM,QAAQ;AAAA,QAC3C,WAAW,KAAK,QAAQ,KAAK,MAAM,QAAQ;AAAA,QAC3C,QAAQ,cAAc;AAAA,QACtB,GAAG,MAAM;AAAA,MACb,CAAG;AAED,UAAI,KAAK,WAAW,GAAG;AACrB,qBAAa,QAAQ;AAAA,MACtB,WAAU,KAAK,SAAS,aAAa,OAAO;AAC3C,qBAAa,QAAQ;AAAA,MACzB,OAAS;AACL,qBAAa,QAAQ;AAAA,MACtB;AAED,gBAAU,QAAQ;AAClB,UAAI,MAAM,MAAO,OAAM,QAAQ,UAAU;AACzC,gBAAU,QAAQ;AAAA,IACpB;AAEAC,QAAK;AAAA,MACH,MAAM,CAAC,MAAM,UAAU,KAAK,OAAO,KAAK,OAAO,MAAM,OAAO;AAAA,MAC5D,CAAC,CAAC,aAAa,SAAS,SAAS,UAAU,GAAG,CAAC,aAAa,SAAS,SAAS,UAAU,MAAM;AAC5F,YACE,gBAAgB,eAChB,YAAY,YACZ,mCAAS,YAAU,mCAAS,WAC5B,mCAAS,YAAU,mCAAS,UAC5B,KAAK,UAAU,UAAU,MAAM,KAAK,UAAU,UAAU,GACxD;AACA,sBAAY,QAAQ;AACpB;QACD;AAAA,MACF;AAAA,MACD,EAAE,MAAM,KAAM;AAAA,IAChB;AAEA,QAAI,WAAW;AAEfC,QAAAA,UAAU,YAAY;AACpB,YAAM,WAAY;AAElB,UAAI,OAAO,WAAW,eAAe,CAAC,MAAM,cAAc;AACxD,mBAAW,IAAI,qBAAqB,aAAW;AAC7C,cAAI,QAAQ,KAAK,WAAS,MAAM,cAAc,GAAG;AAC/C,0BAAe;AAAA,UAChB;AAAA,QACP,CAAK;AAED,YAAI,SAAS,MAAO,UAAS,QAAQ,SAAS,KAAK;AAAA,MACpD;AAAA,IACH,CAAC;AAEDC,QAAAA,YAAY,MAAM;AAChB,UAAI,UAAU;AACZ,iBAAS,WAAU;AAAA,MACpB;AAAA,IACH,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/prometheus-framework/src/components/Feed/Feed.vue.js

@@ -1,6 +1,6 @@
 import { mergeModels, useModel, shallowRef, ref, watch, onMounted, onUnmounted, openBlock, createElementBlock, Fragment, createBlock, normalizeClass, createCommentVNode, createElementVNode, createVNode, withCtx, unref, TransitionGroup, renderList, renderSlot } from "vue";
 import SkeletonEvent from "../../modules/icons/skeletons/SkeletonEvent.vue.js";
-import Loader from "../Loader/Loader.vue2.js";
+import Loader from "../Loader/Loader.vue.js";
 import _sfc_main$a from "../EmptyState/EmptyState.vue.js";
 import _sfc_main$5 from "../Dropdown/Dropdown.vue.js";
 import _sfc_main$7 from "../DatePicker/Calendar.vue2.js";
@@ -192,8 +192,9 @@ const _sfc_main = {
             key: 0,
             placeholder: search.value.placeholder || "Search...",
             class: normalizeClass(search.value.class || "bg-light"),
-            onSearch: updateSearch
-          }, null, 8, ["placeholder", "class"])) : createCommentVNode("", true),
+            onSearch: updateSearch,
+            autofocus: search.value.autofocus
+          }, null, 8, ["placeholder", "class", "autofocus"])) : createCommentVNode("", true),
           filter.value ? (openBlock(), createElementBlock(Fragment, { key: 1 }, [
             createElementVNode("div", {
               class: normalizeClass([filter.value.class || "bg-light", "flex-center flex pd-thin bg-light radius-extra aspect-1x1 h-100"])

package/dist/prometheus-framework/src/components/Feed/Feed.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"Feed.vue.js","sources":["../../../../../src/components/Feed/Feed.vue"],"sourcesContent":["<template>\n\n  <div v-if=\"search || date || (sort && !sort.hideButton)\" class=\"flex-nowrap flex gap-thin\">\n\n    <BlockSearch \n      v-if=\"search\"\n      :placeholder=\"search.placeholder || 'Search...'\"\n      :class=\"search.class || 'bg-light'\"\n      @search=\"updateSearch\"\n    />\n\n    <template\n      v-if=\"filter\"\n    >\n      <div \n        :class=\"filter.class || 'bg-light'\"\n        class=\"flex-center flex pd-thin bg-light radius-extra aspect-1x1 h-100\"\n      >\n        <IconFilter @click=\"() => filter.active = !filter.active\" class=\"w-1r h-auto\"/>\n      </div>\n\n    \n      <BottomSheet\n        v-if=\"filter.active\"\n        :show=\"filter.active\"\n        @toggle=\"() => filter.active = false\"\n        class=\"z-index-10 pos-fixed pos-t-0 pos-r-0\"\n        :class=\"{\n          'pos-t-0':  filter.active,\n          'pos-t-100': !filter.active\n        }\"\n      >\n        <BlockFilter\n          v-model:filter=\"filter\"\n          :options=\"filter.options\"\n          class=\"h-100 w-100 pd-small bg-light\"\n        />\n      </BottomSheet>  \n    </template>\n\n    <Dropdown \n      v-if=\"date\"\n      :label=\"{\n        component: ButtonDate,\n        props: { date: date }\n      }\" \n      :class=\"date.class || 'bg-light'\"\n      class=\"flex-child flex-child-shrink-0 pd-r-small pd-l-small pd-thin bg-light radius-big\"\n      :align=\"search ? 'right' : 'left'\"\n    >\n\n      <Calendar\n        v-model:date=\"date\"\n        :locale=\"$i18n.locale\"\n        :allowRange=\"true\"\n        class=\"radius-semi w-100 o-hidden bg-light\"\n      />\n    </Dropdown> \n\n    <Dropdown \n      v-if=\"sort && !sort.hideButton\"\n      :label=\"{\n        component: ButtonSort,\n        props: { order: sort.order },\n        class: 'w-1r'\n      }\" \n      :class=\"sort.class || 'bg-light'\"\n      class=\"radius-extra aspect-1x1 h-100\"\n      :align=\"search ? 'right' : 'left'\"\n    >\n\n      <BlockSorting\n        v-model:param=\"sort.param\"\n        v-model:order=\"sort.order\"\n        :options=\"sort.options\"\n        class=\"h-100 pd-small radius-semi t-white bg-black\"\n      />\n    </Dropdown> \n  </div>\n\n  <TransitionGroup \n\n    v-if=\"isLoading\"\n    tag=\"ul\" \n    name=\"scaleTransition\" \n  >\n    <SkeletonEvent\n      v-if=\"isLoading\"\n      v-for=\"i in currentLimit\" \n      :key=\"'skeleton-' + i\"\n      class=\"mn-b-small radius-medium o-hidden d-block\"\n    />\n  </TransitionGroup>\n\n  <TransitionGroup \n    tag=\"ul\" \n    v-if=\"!isLoading && itemsList.length < 1\"\n    name=\"feed\"\n  >\n    <EmptyState\n      v-if=\"!isLoading && itemsList.length < 1\"\n      :title=\"states.empty.title\"\n      :description=\"states.empty.description\"\n      :action=\"states.empty.action\"\n      :callback=\"states.empty.callback\"\n      class=\"pd-medium mn-b-thin bg-light radius-big\"\n    />\n   </TransitionGroup>\n\n  <TransitionGroup \n    tag=\"ul\" \n    name=\"feed\"\n    :class=\"$attrs.class\"\n  >\n    <slot\n      v-if=\"!isLoading && itemsList.length > 0\"\n      :items=\"itemsList\"\n    >\n    </slot>\n  </TransitionGroup>\n\n  <button\n    v-if=\"showLoadMore && hasMoreItems && itemsList.length > 0 && !isLoadingExtra\"\n    @click=\"loadMoreItems\"\n    class=\"col-w-100 mn-t-thin w-100 t-black bg-main button\"\n  >\n    Load More\n  </button>\n\n  <div v-else key=\"sentinel\" ref=\"sentinel\" class=\"sentinel\"></div> \n\n  <div\n\n    v-if=\"isLoadingExtra\"\n    class=\"col-w-100 w-100 pos-relative\"\n  >\n    <Loader/>\n  </div>\n \n\n</template>\n\n<script setup>\nimport { ref, computed, onMounted, onUnmounted, shallowRef, watch } from 'vue';\n\nimport SkeletonEvent from '@pf/src/modules/icons/skeletons/SkeletonEvent.vue'\n\nimport Loader from '@pf/src/components/Loader/Loader.vue';\nimport EmptyState from '@pf/src/components/EmptyState/EmptyState.vue';\nimport Dropdown from \"@pf/src/components/Dropdown/Dropdown.vue\";\nimport Calendar from '@pf/src/components/DatePicker/Calendar.vue'\nimport BottomSheet from '@pf/src/components/BottomSheet/BottomSheet.vue';\n\nimport BlockSearch from '@pf/src/modules/globals/views/components/blocks/BlockSearch.vue'\nimport BlockSorting  from '@pf/src/modules/globals/views/components/blocks/BlockSorting.vue'\nimport BlockFilter  from '@pf/src/modules/globals/views/components/blocks/BlockFilter.vue'\n\nimport ButtonSort  from '@pf/src/modules/globals/views/components/elements/ButtonSort.vue'\nimport ButtonDate  from '@pf/src/modules/globals/views/components/elements/ButtonDate.vue'\n\nimport IconFilter from '@pf/src/modules/icons/navigation/IconFilter.vue'\nimport IconEvents from '@pf/src/modules/icons/entities/IconEvents.vue'\n\nconst search = defineModel('search')\nconst sort = defineModel('sort')\nconst filter = defineModel('filter')\nconst date = defineModel('date')\nconst items = defineModel('items')\n\n// Пропсы\nconst props = defineProps({\n  showLoadMore: {\n    type: Boolean,\n    default: true\n  },\n  search: {\n    type: [Boolean, Object],\n    default: false\n  },\n  states: {\n    type: Object,\n    default: () => ({\n      empty: {\n        title: String,\n        description: String,\n      },\n    }),\n  },\n  store: {\n    type: Object,\n    default: () => ({\n      read: Function,\n      state: Object,\n    }),\n  },\n  external: {\n    type: Boolean,\n    default: false\n  },\n  options: {\n    type: Object,\n    default: () => ({\n      category: null,\n      limit: 20, \n      skip: 0 ,\n      owner:  null,\n      creator:  null,\n      user:  null,\n      status: null,\n      period:  null,\n      contain:  null,\n    }),\n  },\n});\n  \nconst itemsList = shallowRef(items.value || []);\nconst hasMoreItems = ref(false);\n\nlet isLoading = ref(true);\nlet isLoadingExtra = ref(false);\nlet sentinel = ref(null)\n\nlet currentSkip = ref(props.options.skip ? props.options.skip : 0);\nlet currentLimit = ref(props.options.limit ? props.options.limit : 10);\n\n// let sortParam = ref(sort.value?.param || 'createdAt');\n// let sortOrder = ref(sort.value?.order || 'asc');\n\nlet currentSearch = ref('');\n\nfunction debounce(fn, delay) {\n  let timeoutId = null;\n  return (...args) => {\n    clearTimeout(timeoutId);\n    timeoutId = setTimeout(() => fn(...args), delay);\n  };\n}\n\nconst debouncedSearch = debounce((value) => {\n  currentSearch.value = value;\n  currentSkip.value = 0;\n  currentLimit.value = 10;\n  fetchItems();\n}, 300);\n\nfunction updateSearch(search) {\n  debouncedSearch(search);\n}\n\nconst loadMoreItems = async () => {\n  isLoadingExtra.value = true\n\n  if (hasMoreItems.value) {\n    currentSkip.value += currentLimit.value;\n    \n    const data = await props.store.read({\n      skip: currentSkip.value,\n      limit: currentLimit.value,\n      search: currentSearch.value,\n      dateStart: date.value ? date.value.start : null,\n      dateEnd: date.value ? date.value.end : null,\n      sortParam: sort.value ? sort.value.param : null,\n      sortOrder: sort.value ? sort.value.order : null,\n      ...props.options\n    });\n\n    if (data.length === 0) {\n      hasMoreItems.value = false;\n    } else if (data.length < currentLimit.value) {\n      hasMoreItems.value = false;\n    } else {\n      hasMoreItems.value = true;\n    }\n\n    itemsList.value = [...itemsList.value, ...data];\n    \n    if (items.value) items.value = itemsList.value;\n  }\n\n  isLoadingExtra.value = false\n};\n\nconst fetchItems = async () => {\n  isLoading.value = true;\n  const data = await props.store.read({\n    skip: currentSkip.value,\n    limit: currentLimit.value,\n    dateStart: date.value ? date.value.start : null,\n    dateEnd: date.value ? date.value.end : null,\n    sortParam: sort.value ? sort.value.param : null,\n    sortOrder: sort.value ? sort.value.order : null,\n    search: currentSearch.value,\n    ...props.options\n  });\n\n  if (data.length === 0) {\n    hasMoreItems.value = false;\n  } else if (data.length < currentLimit.value) {\n    hasMoreItems.value = false;\n  } else {\n    hasMoreItems.value = true;\n  }\n\n  itemsList.value = data;\n  if (items.value) items.value = itemsList.value;\n  isLoading.value = false;\n};\n\nwatch(\n  () => [props.external, date.value, sort.value, props.options],\n  ([newExternal, newDate, newSort, newOptions], [oldExternal, oldDate, oldSort, oldOptions]) => {\n    if (\n      newExternal !== oldExternal ||\n      newDate !== oldDate ||\n      newSort?.order !== oldSort?.order ||\n      newSort?.param !== oldSort?.param ||\n      JSON.stringify(newOptions) !== JSON.stringify(oldOptions)\n    ) {\n      currentSkip.value = 0;\n      fetchItems();\n    }\n  },\n  { deep: true }\n);\n\nlet observer = null\n\nonMounted(async () => {\n  await fetchItems()\n\n  if (typeof window !== 'undefined' && !props.showLoadMore) {\n    observer = new IntersectionObserver(entries => {\n      if (entries.some(entry => entry.isIntersecting)) {\n        loadMoreItems()\n      }\n    })\n\n    if (sentinel.value) observer.observe(sentinel.value)\n  }\n});\n\nonUnmounted(() => {\n  if (observer) {\n    observer.disconnect();\n  }\n});\n</script>\n\n\n<style>\n.feed-move, /* apply transition to moving elements */\n.feed-enter-active,\n.feed-leave-active {\n  transition: all 0.5s ease;\n}\n\n.feed-enter-from,\n.feed-leave-to {\n  opacity: 0;\n  transform: translateY(30px);\n}\n\n/* ensure leaving items are taken out of layout flow so that moving\n   animations can be calculated correctly. */\n.feed-leave-active {\n  position: absolute;\n}\n</style>"],"names":["_useModel","search"],"mappings":"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"}
+{"version":3,"file":"Feed.vue.js","sources":["../../../../../src/components/Feed/Feed.vue"],"sourcesContent":["<template>\n\n  <div v-if=\"search || date || (sort && !sort.hideButton)\" class=\"flex-nowrap flex gap-thin\">\n\n    <BlockSearch \n      v-if=\"search\"\n      :placeholder=\"search.placeholder || 'Search...'\"\n      :class=\"search.class || 'bg-light'\"\n      @search=\"updateSearch\"\n      :autofocus=\"search.autofocus\"\n    />\n\n    <template\n      v-if=\"filter\"\n    >\n      <div \n        :class=\"filter.class || 'bg-light'\"\n        class=\"flex-center flex pd-thin bg-light radius-extra aspect-1x1 h-100\"\n      >\n        <IconFilter @click=\"() => filter.active = !filter.active\" class=\"w-1r h-auto\"/>\n      </div>\n\n    \n      <BottomSheet\n        v-if=\"filter.active\"\n        :show=\"filter.active\"\n        @toggle=\"() => filter.active = false\"\n        class=\"z-index-10 pos-fixed pos-t-0 pos-r-0\"\n        :class=\"{\n          'pos-t-0':  filter.active,\n          'pos-t-100': !filter.active\n        }\"\n      >\n        <BlockFilter\n          v-model:filter=\"filter\"\n          :options=\"filter.options\"\n          class=\"h-100 w-100 pd-small bg-light\"\n        />\n      </BottomSheet>  \n    </template>\n\n    <Dropdown \n      v-if=\"date\"\n      :label=\"{\n        component: ButtonDate,\n        props: { date: date }\n      }\" \n      :class=\"date.class || 'bg-light'\"\n      class=\"flex-child flex-child-shrink-0 pd-r-small pd-l-small pd-thin bg-light radius-big\"\n      :align=\"search ? 'right' : 'left'\"\n    >\n\n      <Calendar\n        v-model:date=\"date\"\n        :locale=\"$i18n.locale\"\n        :allowRange=\"true\"\n        class=\"radius-semi w-100 o-hidden bg-light\"\n      />\n    </Dropdown> \n\n    <Dropdown \n      v-if=\"sort && !sort.hideButton\"\n      :label=\"{\n        component: ButtonSort,\n        props: { order: sort.order },\n        class: 'w-1r'\n      }\" \n      :class=\"sort.class || 'bg-light'\"\n      class=\"radius-extra aspect-1x1 h-100\"\n      :align=\"search ? 'right' : 'left'\"\n    >\n\n      <BlockSorting\n        v-model:param=\"sort.param\"\n        v-model:order=\"sort.order\"\n        :options=\"sort.options\"\n        class=\"h-100 pd-small radius-semi t-white bg-black\"\n      />\n    </Dropdown> \n  </div>\n\n  <TransitionGroup \n\n    v-if=\"isLoading\"\n    tag=\"ul\" \n    name=\"scaleTransition\" \n  >\n    <SkeletonEvent\n      v-if=\"isLoading\"\n      v-for=\"i in currentLimit\" \n      :key=\"'skeleton-' + i\"\n      class=\"mn-b-small radius-medium o-hidden d-block\"\n    />\n  </TransitionGroup>\n\n  <TransitionGroup \n    tag=\"ul\" \n    v-if=\"!isLoading && itemsList.length < 1\"\n    name=\"feed\"\n  >\n    <EmptyState\n      v-if=\"!isLoading && itemsList.length < 1\"\n      :title=\"states.empty.title\"\n      :description=\"states.empty.description\"\n      :action=\"states.empty.action\"\n      :callback=\"states.empty.callback\"\n      class=\"pd-medium mn-b-thin bg-light radius-big\"\n    />\n   </TransitionGroup>\n\n  <TransitionGroup \n    tag=\"ul\" \n    name=\"feed\"\n    :class=\"$attrs.class\"\n  >\n    <slot\n      v-if=\"!isLoading && itemsList.length > 0\"\n      :items=\"itemsList\"\n    >\n    </slot>\n  </TransitionGroup>\n\n  <button\n    v-if=\"showLoadMore && hasMoreItems && itemsList.length > 0 && !isLoadingExtra\"\n    @click=\"loadMoreItems\"\n    class=\"col-w-100 mn-t-thin w-100 t-black bg-main button\"\n  >\n    Load More\n  </button>\n\n  <div v-else key=\"sentinel\" ref=\"sentinel\" class=\"sentinel\"></div> \n\n  <div\n\n    v-if=\"isLoadingExtra\"\n    class=\"col-w-100 w-100 pos-relative\"\n  >\n    <Loader/>\n  </div>\n \n\n</template>\n\n<script setup>\nimport { ref, computed, onMounted, onUnmounted, shallowRef, watch } from 'vue';\n\nimport SkeletonEvent from '@pf/src/modules/icons/skeletons/SkeletonEvent.vue'\n\nimport Loader from '@pf/src/components/Loader/Loader.vue';\nimport EmptyState from '@pf/src/components/EmptyState/EmptyState.vue';\nimport Dropdown from \"@pf/src/components/Dropdown/Dropdown.vue\";\nimport Calendar from '@pf/src/components/DatePicker/Calendar.vue'\nimport BottomSheet from '@pf/src/components/BottomSheet/BottomSheet.vue';\n\nimport BlockSearch from '@pf/src/modules/globals/views/components/blocks/BlockSearch.vue'\nimport BlockSorting  from '@pf/src/modules/globals/views/components/blocks/BlockSorting.vue'\nimport BlockFilter  from '@pf/src/modules/globals/views/components/blocks/BlockFilter.vue'\n\nimport ButtonSort  from '@pf/src/modules/globals/views/components/elements/ButtonSort.vue'\nimport ButtonDate  from '@pf/src/modules/globals/views/components/elements/ButtonDate.vue'\n\nimport IconFilter from '@pf/src/modules/icons/navigation/IconFilter.vue'\nimport IconEvents from '@pf/src/modules/icons/entities/IconEvents.vue'\n\nconst search = defineModel('search')\nconst sort = defineModel('sort')\nconst filter = defineModel('filter')\nconst date = defineModel('date')\nconst items = defineModel('items')\n\n// Пропсы\nconst props = defineProps({\n  showLoadMore: {\n    type: Boolean,\n    default: true\n  },\n  search: {\n    type: [Boolean, Object],\n    default: false\n  },\n  states: {\n    type: Object,\n    default: () => ({\n      empty: {\n        title: String,\n        description: String,\n      },\n    }),\n  },\n  store: {\n    type: Object,\n    default: () => ({\n      read: Function,\n      state: Object,\n    }),\n  },\n  external: {\n    type: Boolean,\n    default: false\n  },\n  options: {\n    type: Object,\n    default: () => ({\n      category: null,\n      limit: 20, \n      skip: 0 ,\n      owner:  null,\n      creator:  null,\n      user:  null,\n      status: null,\n      period:  null,\n      contain:  null,\n    }),\n  },\n});\n  \nconst itemsList = shallowRef(items.value || []);\nconst hasMoreItems = ref(false);\n\nlet isLoading = ref(true);\nlet isLoadingExtra = ref(false);\nlet sentinel = ref(null)\n\nlet currentSkip = ref(props.options.skip ? props.options.skip : 0);\nlet currentLimit = ref(props.options.limit ? props.options.limit : 10);\n\n// let sortParam = ref(sort.value?.param || 'createdAt');\n// let sortOrder = ref(sort.value?.order || 'asc');\n\nlet currentSearch = ref('');\n\nfunction debounce(fn, delay) {\n  let timeoutId = null;\n  return (...args) => {\n    clearTimeout(timeoutId);\n    timeoutId = setTimeout(() => fn(...args), delay);\n  };\n}\n\nconst debouncedSearch = debounce((value) => {\n  currentSearch.value = value;\n  currentSkip.value = 0;\n  currentLimit.value = 10;\n  fetchItems();\n}, 300);\n\nfunction updateSearch(search) {\n  debouncedSearch(search);\n}\n\nconst loadMoreItems = async () => {\n  isLoadingExtra.value = true\n\n  if (hasMoreItems.value) {\n    currentSkip.value += currentLimit.value;\n    \n    const data = await props.store.read({\n      skip: currentSkip.value,\n      limit: currentLimit.value,\n      search: currentSearch.value,\n      dateStart: date.value ? date.value.start : null,\n      dateEnd: date.value ? date.value.end : null,\n      sortParam: sort.value ? sort.value.param : null,\n      sortOrder: sort.value ? sort.value.order : null,\n      ...props.options\n    });\n\n    if (data.length === 0) {\n      hasMoreItems.value = false;\n    } else if (data.length < currentLimit.value) {\n      hasMoreItems.value = false;\n    } else {\n      hasMoreItems.value = true;\n    }\n\n    itemsList.value = [...itemsList.value, ...data];\n    \n    if (items.value) items.value = itemsList.value;\n  }\n\n  isLoadingExtra.value = false\n};\n\nconst fetchItems = async () => {\n  isLoading.value = true;\n  const data = await props.store.read({\n    skip: currentSkip.value,\n    limit: currentLimit.value,\n    dateStart: date.value ? date.value.start : null,\n    dateEnd: date.value ? date.value.end : null,\n    sortParam: sort.value ? sort.value.param : null,\n    sortOrder: sort.value ? sort.value.order : null,\n    search: currentSearch.value,\n    ...props.options\n  });\n\n  if (data.length === 0) {\n    hasMoreItems.value = false;\n  } else if (data.length < currentLimit.value) {\n    hasMoreItems.value = false;\n  } else {\n    hasMoreItems.value = true;\n  }\n\n  itemsList.value = data;\n  if (items.value) items.value = itemsList.value;\n  isLoading.value = false;\n};\n\nwatch(\n  () => [props.external, date.value, sort.value, props.options],\n  ([newExternal, newDate, newSort, newOptions], [oldExternal, oldDate, oldSort, oldOptions]) => {\n    if (\n      newExternal !== oldExternal ||\n      newDate !== oldDate ||\n      newSort?.order !== oldSort?.order ||\n      newSort?.param !== oldSort?.param ||\n      JSON.stringify(newOptions) !== JSON.stringify(oldOptions)\n    ) {\n      currentSkip.value = 0;\n      fetchItems();\n    }\n  },\n  { deep: true }\n);\n\nlet observer = null\n\nonMounted(async () => {\n  await fetchItems()\n\n  if (typeof window !== 'undefined' && !props.showLoadMore) {\n    observer = new IntersectionObserver(entries => {\n      if (entries.some(entry => entry.isIntersecting)) {\n        loadMoreItems()\n      }\n    })\n\n    if (sentinel.value) observer.observe(sentinel.value)\n  }\n});\n\nonUnmounted(() => {\n  if (observer) {\n    observer.disconnect();\n  }\n});\n</script>\n\n\n<style>\n.feed-move, /* apply transition to moving elements */\n.feed-enter-active,\n.feed-leave-active {\n  transition: all 0.5s ease;\n}\n\n.feed-enter-from,\n.feed-leave-to {\n  opacity: 0;\n  transform: translateY(30px);\n}\n\n/* ensure leaving items are taken out of layout flow so that moving\n   animations can be calculated correctly. */\n.feed-leave-active {\n  position: absolute;\n}\n</style>"],"names":["_useModel","search"],"mappings":"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"}

package/dist/prometheus-framework/src/components/Field/Field.vue.cjs

@@ -9,7 +9,7 @@ const _hoisted_1 = {
 };
 const _hoisted_2 = { class: "t-nowrap" };
 const _hoisted_3 = { class: "w-100" };
-const _hoisted_4 = ["type", "value", "placeholder", "tabindex", "disabled"];
+const _hoisted_4 = ["type", "value", "placeholder", "tabindex", "disabled", "autofocus"];
 const _hoisted_5 = ["value", "placeholder", "tabindex", "disabled"];
 const _hoisted_6 = {
   key: 1,
@@ -30,7 +30,8 @@ const _sfc_main = {
     value: null,
     validation: false,
     disabled: null,
-    tabindex: -1
+    tabindex: -1,
+    autofocus: false
   },
   emits: ["update:field", "focus", "blur"],
   setup(__props, { emit: __emit }) {
@@ -40,25 +41,28 @@ const _sfc_main = {
       emit("update:field", props.value);
     }
     const textarea = vue.ref(null);
+    const input = vue.ref(null);
     function resize() {
       var _a;
       if (textarea.value) textarea.value.style.height = "1rem";
       if (textarea.value) textarea.value.style.height = ((_a = textarea.value) == null ? void 0 : _a.scrollHeight) + "px";
     }
     vue.onUpdated(() => {
-      if (props.type === "textarea") vue.nextTick(() => {
-        {
-          focus();
-        }
-      });
+      if (props.type === "textarea")
+        vue.nextTick(() => {
+          {
+            focus();
+          }
+        });
       resize();
     });
     vue.onMounted(() => {
-      if (props.type === "textarea") vue.nextTick(() => {
-        {
-          focus();
-        }
-      });
+      if (props.type === "textarea")
+        vue.nextTick(() => {
+          {
+            focus();
+          }
+        });
       resize();
     });
     const text = vue.ref(props.field);
@@ -78,6 +82,8 @@ const _sfc_main = {
           vue.createElementVNode("div", _hoisted_3, [
             __props.type !== "textarea" ? (vue.openBlock(), vue.createElementBlock("input", {
               key: 0,
+              ref_key: "input",
+              ref: input,
               onInput: _cache[0] || (_cache[0] = (event) => text.value = emit("update:field", event.target.value)),
               onFocus: _cache[1] || (_cache[1] = (event) => emit("focus", event)),
               onBlur: _cache[2] || (_cache[2] = (event) => emit("blur", event)),
@@ -86,7 +92,8 @@ const _sfc_main = {
               value: __props.field,
               placeholder: __props.placeholder,
               tabindex: __props.tabindex,
-              disabled: __props.disabled
+              disabled: __props.disabled,
+              autofocus: __props.autofocus
             }, null, 40, _hoisted_4)) : (vue.openBlock(), vue.createElementBlock("textarea", {
               key: 1,
               ref_key: "textarea",
@@ -117,6 +124,6 @@ const _sfc_main = {
     };
   }
 };
-const Field = /* @__PURE__ */ _pluginVue_exportHelper.default(_sfc_main, [["__scopeId", "data-v-dd79a28b"]]);
+const Field = /* @__PURE__ */ _pluginVue_exportHelper.default(_sfc_main, [["__scopeId", "data-v-5621c50c"]]);
 exports.default = Field;
 //# sourceMappingURL=Field.vue.cjs.map

package/dist/prometheus-framework/src/components/Field/Field.vue.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Field.vue.cjs","sources":["../../../../../src/components/Field/Field.vue"],"sourcesContent":["<script setup>\n  import { ref, computed, onUpdated, onMounted, nextTick } from 'vue'\n\n  const emit = defineEmits(['update:field', 'focus', 'blur']);\n\n  const props = defineProps({\n    label: null,\n    symbol: null,\n    type: 'text',\n    placeholder: 'Enter something here',\n    field: null,\n    value: null,\n    validation: false,\n    disabled: null,\n    tabindex: -1\n  });\n\n  if (props.value) {\n    emit('update:field', props.value)\n  }\n\n  const textarea = ref(null);\n\n  function resize() {\n    if (textarea.value) textarea.value.style.height = \"1rem\";\n    if (textarea.value) textarea.value.style.height = textarea.value?.scrollHeight + \"px\";\n  }\n\n\n  onUpdated(() => {\n   if (props.type === 'textarea') nextTick(() => {  { focus()} })\n    resize()\n  });\n\n  onMounted(() => {\n    if (props.type === 'textarea') nextTick(() => {  { focus()} })\n    resize()\n  });\n\n  const text = ref(props.field);\n</script>\n\n<template>\n  <div \n    :class=\"[\n      $attrs.class, \n      { \n        'bg-fourth-nano': validation \n      }\n    ]\" \n    class=\"flex-center flex-nowrap flex\"\n  >\n    <div \n      v-if=\"label\" \n      class=\"t-transp mn-r-small\"\n    >\n      <span class=\"t-nowrap\">\n        {{label}}\n      </span>\n    </div>\n\n    <div class=\"w-100\">\n      <input \n        v-if=\"type !== 'textarea'\"\n        @input=\"event => text = emit('update:field', event.target.value)\"\n        @focus=\"event => emit('focus', event)\"\n        @blur=\"event => emit('blur', event)\"\n        :type=\"type\"\n        class=\"w-100\"\n        :value=\"field\"\n        :placeholder=\"placeholder\"\n        :tabindex=\"tabindex\"\n        :disabled=\"disabled\"\n      />\n      <textarea \n        v-else\n        ref=\"textarea\"\n        @input=\"event => text = emit('update:field', event.target.value)\"\n        @focus=\"event => emit('focus', event)\"\n        @blur=\"event => emit('blur', event)\"\n        class=\"w-100\"\n        style=\"resize: vertical;\"\n        :value=\"field\"\n        :placeholder=\"placeholder\"\n        :tabindex=\"tabindex\"\n         :disabled=\"disabled\"\n      />\n    </div> \n\n    <slot></slot>\n\n    <div \n      v-if=\"symbol\" \n      class=\"t-transp mn-l-small\"\n    >\n      <span>\n        {{symbol}}\n      </span>\n    </div>\n  </div>\n\n  <!-- Validation -->\n  <transition name=\"fade\">\n    <div v-if=\"validation\" class=\"mn-t-thin mn-b-thin mn-b-thin invalid-feedback\">\n      * {{validation.message}}\n    </div>\n  </transition>\n</template>\n\n<style lang=\"scss\" scoped>\n  input, textarea, span {\n    line-height: 1;\n    color: inherit;\n  }\n</style>"],"names":["ref","onUpdated","nextTick","onMounted"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAGE,UAAM,OAAO;AAEb,UAAM,QAAQ;AAYd,QAAI,MAAM,OAAO;AACf,WAAK,gBAAgB,MAAM,KAAK;AAAA,IACjC;AAED,UAAM,WAAWA,QAAI,IAAI;AAEzB,aAAS,SAAS;;AAChB,UAAI,SAAS,MAAO,UAAS,MAAM,MAAM,SAAS;AAClD,UAAI,SAAS,MAAO,UAAS,MAAM,MAAM,WAAS,cAAS,UAAT,mBAAgB,gBAAe;AAAA,IAClF;AAGDC,QAAAA,UAAU,MAAM;AACf,UAAI,MAAM,SAAS,WAAYC,KAAAA,SAAS,MAAM;AAAG;AAAE,gBAAO;AAAA,QAAA;AAAA,OAAG;AAC5D,aAAQ;AAAA,IACZ,CAAG;AAEDC,QAAAA,UAAU,MAAM;AACd,UAAI,MAAM,SAAS,WAAYD,KAAAA,SAAS,MAAM;AAAG;AAAE,gBAAO;AAAA,QAAA;AAAA,OAAG;AAC7D,aAAQ;AAAA,IACZ,CAAG;AAED,UAAM,OAAOF,IAAAA,IAAI,MAAM,KAAK;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"Field.vue.cjs","sources":["../../../../../src/components/Field/Field.vue"],"sourcesContent":["<script setup>\n  import { ref, computed, onUpdated, onMounted, nextTick } from 'vue'\n\n  const emit = defineEmits(['update:field', 'focus', 'blur']);\n\n  const props = defineProps({\n    label: null,\n    symbol: null,\n    type: 'text',\n    placeholder: 'Enter something here',\n    field: null,\n    value: null,\n    validation: false,\n    disabled: null,\n    tabindex: -1,\n    autofocus: false\n  });\n\n  if (props.value) {\n    emit('update:field', props.value)\n  }\n\n  const textarea = ref(null);\n  const input = ref(null);\n\n\n  function resize() {\n    if (textarea.value) textarea.value.style.height = \"1rem\";\n    if (textarea.value) textarea.value.style.height = textarea.value?.scrollHeight + \"px\";\n  }\n\n  onUpdated(() => {\n   if (props.type === 'textarea') \n    nextTick(() => {  { focus()} })\n    resize()\n  });\n\n  onMounted(() => {\n    if (props.type === 'textarea') \n      nextTick(() => {  { focus()} })\n    resize()\n  });\n\n  const text = ref(props.field);\n</script>\n\n<template>\n  <div \n    :class=\"[\n      $attrs.class, \n      { \n        'bg-fourth-nano': validation \n      }\n    ]\" \n    class=\"flex-center flex-nowrap flex\"\n  >\n    <div \n      v-if=\"label\" \n      class=\"t-transp mn-r-small\"\n    >\n      <span class=\"t-nowrap\">\n        {{label}}\n      </span>\n    </div>\n\n    <div class=\"w-100\">\n      <input \n        v-if=\"type !== 'textarea'\"\n        ref=\"input\"\n        @input=\"event => text = emit('update:field', event.target.value)\"\n        @focus=\"event => emit('focus', event)\"\n        @blur=\"event => emit('blur', event)\"\n        :type=\"type\"\n        class=\"w-100\"\n        :value=\"field\"\n        :placeholder=\"placeholder\"\n        :tabindex=\"tabindex\"\n        :disabled=\"disabled\"\n        :autofocus=\"autofocus\"\n\n      />\n      <textarea \n        v-else\n        ref=\"textarea\"\n        @input=\"event => text = emit('update:field', event.target.value)\"\n        @focus=\"event => emit('focus', event)\"\n        @blur=\"event => emit('blur', event)\"\n        class=\"w-100\"\n        style=\"resize: vertical;\"\n        :value=\"field\"\n        :placeholder=\"placeholder\"\n        :tabindex=\"tabindex\"\n         :disabled=\"disabled\"\n      />\n    </div> \n\n    <slot></slot>\n\n    <div \n      v-if=\"symbol\" \n      class=\"t-transp mn-l-small\"\n    >\n      <span>\n        {{symbol}}\n      </span>\n    </div>\n  </div>\n\n  <!-- Validation -->\n  <transition name=\"fade\">\n    <div v-if=\"validation\" class=\"mn-t-thin mn-b-thin mn-b-thin invalid-feedback\">\n      * {{validation.message}}\n    </div>\n  </transition>\n</template>\n\n<style lang=\"scss\" scoped>\n  input, textarea, span {\n    line-height: 1;\n    color: inherit;\n  }\n</style>"],"names":["ref","onUpdated","nextTick","onMounted"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAGE,UAAM,OAAO;AAEb,UAAM,QAAQ;AAad,QAAI,MAAM,OAAO;AACf,WAAK,gBAAgB,MAAM,KAAK;AAAA,IACjC;AAED,UAAM,WAAWA,QAAI,IAAI;AACzB,UAAM,QAAQA,QAAI,IAAI;AAGtB,aAAS,SAAS;;AAChB,UAAI,SAAS,MAAO,UAAS,MAAM,MAAM,SAAS;AAClD,UAAI,SAAS,MAAO,UAAS,MAAM,MAAM,WAAS,cAAS,UAAT,mBAAgB,gBAAe;AAAA,IAClF;AAEDC,QAAAA,UAAU,MAAM;AACf,UAAI,MAAM,SAAS;AAClBC,YAAAA,SAAS,MAAM;AAAG;AAAE,kBAAK;AAAA,UAAE;AAAA,QAAC,CAAE;AAC9B,aAAQ;AAAA,IACZ,CAAG;AAEDC,QAAAA,UAAU,MAAM;AACd,UAAI,MAAM,SAAS;AACjBD,YAAAA,SAAS,MAAM;AAAG;AAAE,kBAAK;AAAA,UAAE;AAAA,QAAC,CAAE;AAChC,aAAQ;AAAA,IACZ,CAAG;AAED,UAAM,OAAOF,IAAAA,IAAI,MAAM,KAAK;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/prometheus-framework/src/components/Field/Field.vue.js

@@ -7,7 +7,7 @@ const _hoisted_1 = {
 };
 const _hoisted_2 = { class: "t-nowrap" };
 const _hoisted_3 = { class: "w-100" };
-const _hoisted_4 = ["type", "value", "placeholder", "tabindex", "disabled"];
+const _hoisted_4 = ["type", "value", "placeholder", "tabindex", "disabled", "autofocus"];
 const _hoisted_5 = ["value", "placeholder", "tabindex", "disabled"];
 const _hoisted_6 = {
   key: 1,
@@ -28,7 +28,8 @@ const _sfc_main = {
     value: null,
     validation: false,
     disabled: null,
-    tabindex: -1
+    tabindex: -1,
+    autofocus: false
   },
   emits: ["update:field", "focus", "blur"],
   setup(__props, { emit: __emit }) {
@@ -38,25 +39,28 @@ const _sfc_main = {
       emit("update:field", props.value);
     }
     const textarea = ref(null);
+    const input = ref(null);
     function resize() {
       var _a;
       if (textarea.value) textarea.value.style.height = "1rem";
       if (textarea.value) textarea.value.style.height = ((_a = textarea.value) == null ? void 0 : _a.scrollHeight) + "px";
     }
     onUpdated(() => {
-      if (props.type === "textarea") nextTick(() => {
-        {
-          focus();
-        }
-      });
+      if (props.type === "textarea")
+        nextTick(() => {
+          {
+            focus();
+          }
+        });
       resize();
     });
     onMounted(() => {
-      if (props.type === "textarea") nextTick(() => {
-        {
-          focus();
-        }
-      });
+      if (props.type === "textarea")
+        nextTick(() => {
+          {
+            focus();
+          }
+        });
       resize();
     });
     const text = ref(props.field);
@@ -76,6 +80,8 @@ const _sfc_main = {
           createElementVNode("div", _hoisted_3, [
             __props.type !== "textarea" ? (openBlock(), createElementBlock("input", {
               key: 0,
+              ref_key: "input",
+              ref: input,
               onInput: _cache[0] || (_cache[0] = (event) => text.value = emit("update:field", event.target.value)),
               onFocus: _cache[1] || (_cache[1] = (event) => emit("focus", event)),
               onBlur: _cache[2] || (_cache[2] = (event) => emit("blur", event)),
@@ -84,7 +90,8 @@ const _sfc_main = {
               value: __props.field,
               placeholder: __props.placeholder,
               tabindex: __props.tabindex,
-              disabled: __props.disabled
+              disabled: __props.disabled,
+              autofocus: __props.autofocus
             }, null, 40, _hoisted_4)) : (openBlock(), createElementBlock("textarea", {
               key: 1,
               ref_key: "textarea",
@@ -115,7 +122,7 @@ const _sfc_main = {
     };
   }
 };
-const Field = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-dd79a28b"]]);
+const Field = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-5621c50c"]]);
 export {
   Field as default
 };

package/dist/prometheus-framework/src/components/Field/Field.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"Field.vue.js","sources":["../../../../../src/components/Field/Field.vue"],"sourcesContent":["<script setup>\n  import { ref, computed, onUpdated, onMounted, nextTick } from 'vue'\n\n  const emit = defineEmits(['update:field', 'focus', 'blur']);\n\n  const props = defineProps({\n    label: null,\n    symbol: null,\n    type: 'text',\n    placeholder: 'Enter something here',\n    field: null,\n    value: null,\n    validation: false,\n    disabled: null,\n    tabindex: -1\n  });\n\n  if (props.value) {\n    emit('update:field', props.value)\n  }\n\n  const textarea = ref(null);\n\n  function resize() {\n    if (textarea.value) textarea.value.style.height = \"1rem\";\n    if (textarea.value) textarea.value.style.height = textarea.value?.scrollHeight + \"px\";\n  }\n\n\n  onUpdated(() => {\n   if (props.type === 'textarea') nextTick(() => {  { focus()} })\n    resize()\n  });\n\n  onMounted(() => {\n    if (props.type === 'textarea') nextTick(() => {  { focus()} })\n    resize()\n  });\n\n  const text = ref(props.field);\n</script>\n\n<template>\n  <div \n    :class=\"[\n      $attrs.class, \n      { \n        'bg-fourth-nano': validation \n      }\n    ]\" \n    class=\"flex-center flex-nowrap flex\"\n  >\n    <div \n      v-if=\"label\" \n      class=\"t-transp mn-r-small\"\n    >\n      <span class=\"t-nowrap\">\n        {{label}}\n      </span>\n    </div>\n\n    <div class=\"w-100\">\n      <input \n        v-if=\"type !== 'textarea'\"\n        @input=\"event => text = emit('update:field', event.target.value)\"\n        @focus=\"event => emit('focus', event)\"\n        @blur=\"event => emit('blur', event)\"\n        :type=\"type\"\n        class=\"w-100\"\n        :value=\"field\"\n        :placeholder=\"placeholder\"\n        :tabindex=\"tabindex\"\n        :disabled=\"disabled\"\n      />\n      <textarea \n        v-else\n        ref=\"textarea\"\n        @input=\"event => text = emit('update:field', event.target.value)\"\n        @focus=\"event => emit('focus', event)\"\n        @blur=\"event => emit('blur', event)\"\n        class=\"w-100\"\n        style=\"resize: vertical;\"\n        :value=\"field\"\n        :placeholder=\"placeholder\"\n        :tabindex=\"tabindex\"\n         :disabled=\"disabled\"\n      />\n    </div> \n\n    <slot></slot>\n\n    <div \n      v-if=\"symbol\" \n      class=\"t-transp mn-l-small\"\n    >\n      <span>\n        {{symbol}}\n      </span>\n    </div>\n  </div>\n\n  <!-- Validation -->\n  <transition name=\"fade\">\n    <div v-if=\"validation\" class=\"mn-t-thin mn-b-thin mn-b-thin invalid-feedback\">\n      * {{validation.message}}\n    </div>\n  </transition>\n</template>\n\n<style lang=\"scss\" scoped>\n  input, textarea, span {\n    line-height: 1;\n    color: inherit;\n  }\n</style>"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAGE,UAAM,OAAO;AAEb,UAAM,QAAQ;AAYd,QAAI,MAAM,OAAO;AACf,WAAK,gBAAgB,MAAM,KAAK;AAAA,IACjC;AAED,UAAM,WAAW,IAAI,IAAI;AAEzB,aAAS,SAAS;;AAChB,UAAI,SAAS,MAAO,UAAS,MAAM,MAAM,SAAS;AAClD,UAAI,SAAS,MAAO,UAAS,MAAM,MAAM,WAAS,cAAS,UAAT,mBAAgB,gBAAe;AAAA,IAClF;AAGD,cAAU,MAAM;AACf,UAAI,MAAM,SAAS,WAAY,UAAS,MAAM;AAAG;AAAE,gBAAO;AAAA,QAAA;AAAA,OAAG;AAC5D,aAAQ;AAAA,IACZ,CAAG;AAED,cAAU,MAAM;AACd,UAAI,MAAM,SAAS,WAAY,UAAS,MAAM;AAAG;AAAE,gBAAO;AAAA,QAAA;AAAA,OAAG;AAC7D,aAAQ;AAAA,IACZ,CAAG;AAED,UAAM,OAAO,IAAI,MAAM,KAAK;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"Field.vue.js","sources":["../../../../../src/components/Field/Field.vue"],"sourcesContent":["<script setup>\n  import { ref, computed, onUpdated, onMounted, nextTick } from 'vue'\n\n  const emit = defineEmits(['update:field', 'focus', 'blur']);\n\n  const props = defineProps({\n    label: null,\n    symbol: null,\n    type: 'text',\n    placeholder: 'Enter something here',\n    field: null,\n    value: null,\n    validation: false,\n    disabled: null,\n    tabindex: -1,\n    autofocus: false\n  });\n\n  if (props.value) {\n    emit('update:field', props.value)\n  }\n\n  const textarea = ref(null);\n  const input = ref(null);\n\n\n  function resize() {\n    if (textarea.value) textarea.value.style.height = \"1rem\";\n    if (textarea.value) textarea.value.style.height = textarea.value?.scrollHeight + \"px\";\n  }\n\n  onUpdated(() => {\n   if (props.type === 'textarea') \n    nextTick(() => {  { focus()} })\n    resize()\n  });\n\n  onMounted(() => {\n    if (props.type === 'textarea') \n      nextTick(() => {  { focus()} })\n    resize()\n  });\n\n  const text = ref(props.field);\n</script>\n\n<template>\n  <div \n    :class=\"[\n      $attrs.class, \n      { \n        'bg-fourth-nano': validation \n      }\n    ]\" \n    class=\"flex-center flex-nowrap flex\"\n  >\n    <div \n      v-if=\"label\" \n      class=\"t-transp mn-r-small\"\n    >\n      <span class=\"t-nowrap\">\n        {{label}}\n      </span>\n    </div>\n\n    <div class=\"w-100\">\n      <input \n        v-if=\"type !== 'textarea'\"\n        ref=\"input\"\n        @input=\"event => text = emit('update:field', event.target.value)\"\n        @focus=\"event => emit('focus', event)\"\n        @blur=\"event => emit('blur', event)\"\n        :type=\"type\"\n        class=\"w-100\"\n        :value=\"field\"\n        :placeholder=\"placeholder\"\n        :tabindex=\"tabindex\"\n        :disabled=\"disabled\"\n        :autofocus=\"autofocus\"\n\n      />\n      <textarea \n        v-else\n        ref=\"textarea\"\n        @input=\"event => text = emit('update:field', event.target.value)\"\n        @focus=\"event => emit('focus', event)\"\n        @blur=\"event => emit('blur', event)\"\n        class=\"w-100\"\n        style=\"resize: vertical;\"\n        :value=\"field\"\n        :placeholder=\"placeholder\"\n        :tabindex=\"tabindex\"\n         :disabled=\"disabled\"\n      />\n    </div> \n\n    <slot></slot>\n\n    <div \n      v-if=\"symbol\" \n      class=\"t-transp mn-l-small\"\n    >\n      <span>\n        {{symbol}}\n      </span>\n    </div>\n  </div>\n\n  <!-- Validation -->\n  <transition name=\"fade\">\n    <div v-if=\"validation\" class=\"mn-t-thin mn-b-thin mn-b-thin invalid-feedback\">\n      * {{validation.message}}\n    </div>\n  </transition>\n</template>\n\n<style lang=\"scss\" scoped>\n  input, textarea, span {\n    line-height: 1;\n    color: inherit;\n  }\n</style>"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAGE,UAAM,OAAO;AAEb,UAAM,QAAQ;AAad,QAAI,MAAM,OAAO;AACf,WAAK,gBAAgB,MAAM,KAAK;AAAA,IACjC;AAED,UAAM,WAAW,IAAI,IAAI;AACzB,UAAM,QAAQ,IAAI,IAAI;AAGtB,aAAS,SAAS;;AAChB,UAAI,SAAS,MAAO,UAAS,MAAM,MAAM,SAAS;AAClD,UAAI,SAAS,MAAO,UAAS,MAAM,MAAM,WAAS,cAAS,UAAT,mBAAgB,gBAAe;AAAA,IAClF;AAED,cAAU,MAAM;AACf,UAAI,MAAM,SAAS;AAClB,iBAAS,MAAM;AAAG;AAAE,kBAAK;AAAA,UAAE;AAAA,QAAC,CAAE;AAC9B,aAAQ;AAAA,IACZ,CAAG;AAED,cAAU,MAAM;AACd,UAAI,MAAM,SAAS;AACjB,iBAAS,MAAM;AAAG;AAAE,kBAAK;AAAA,UAAE;AAAA,QAAC,CAAE;AAChC,aAAQ;AAAA,IACZ,CAAG;AAED,UAAM,OAAO,IAAI,MAAM,KAAK;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/prometheus-framework/src/components/Field/Field.vue2.cjs

@@ -9,7 +9,7 @@ const _hoisted_1 = {
 };
 const _hoisted_2 = { class: "t-nowrap" };
 const _hoisted_3 = { class: "w-100" };
-const _hoisted_4 = ["type", "value", "placeholder", "tabindex", "disabled"];
+const _hoisted_4 = ["type", "value", "placeholder", "tabindex", "disabled", "autofocus"];
 const _hoisted_5 = ["value", "placeholder", "tabindex", "disabled"];
 const _hoisted_6 = {
   key: 1,
@@ -30,7 +30,8 @@ const _sfc_main = {
     value: null,
     validation: false,
     disabled: null,
-    tabindex: -1
+    tabindex: -1,
+    autofocus: false
   },
   emits: ["update:field", "focus", "blur"],
   setup(__props, { emit: __emit }) {
@@ -40,25 +41,28 @@ const _sfc_main = {
       emit("update:field", props.value);
     }
     const textarea = vue.ref(null);
+    const input = vue.ref(null);
     function resize() {
       var _a;
       if (textarea.value) textarea.value.style.height = "1rem";
       if (textarea.value) textarea.value.style.height = ((_a = textarea.value) == null ? void 0 : _a.scrollHeight) + "px";
     }
     vue.onUpdated(() => {
-      if (props.type === "textarea") vue.nextTick(() => {
-        {
-          focus();
-        }
-      });
+      if (props.type === "textarea")
+        vue.nextTick(() => {
+          {
+            focus();
+          }
+        });
       resize();
     });
     vue.onMounted(() => {
-      if (props.type === "textarea") vue.nextTick(() => {
-        {
-          focus();
-        }
-      });
+      if (props.type === "textarea")
+        vue.nextTick(() => {
+          {
+            focus();
+          }
+        });
       resize();
     });
     const text = vue.ref(props.field);
@@ -78,6 +82,8 @@ const _sfc_main = {
           vue.createElementVNode("div", _hoisted_3, [
             __props.type !== "textarea" ? (vue.openBlock(), vue.createElementBlock("input", {
               key: 0,
+              ref_key: "input",
+              ref: input,
               onInput: _cache[0] || (_cache[0] = (event) => text.value = emit("update:field", event.target.value)),
               onFocus: _cache[1] || (_cache[1] = (event) => emit("focus", event)),
               onBlur: _cache[2] || (_cache[2] = (event) => emit("blur", event)),
@@ -86,7 +92,8 @@ const _sfc_main = {
               value: __props.field,
               placeholder: __props.placeholder,
               tabindex: __props.tabindex,
-              disabled: __props.disabled
+              disabled: __props.disabled,
+              autofocus: __props.autofocus
             }, null, 40, _hoisted_4)) : (vue.openBlock(), vue.createElementBlock("textarea", {
               key: 1,
               ref_key: "textarea",
@@ -117,6 +124,6 @@ const _sfc_main = {
     };
   }
 };
-const Field = /* @__PURE__ */ _pluginVue_exportHelper.default(_sfc_main, [["__scopeId", "data-v-dd79a28b"]]);
+const Field = /* @__PURE__ */ _pluginVue_exportHelper.default(_sfc_main, [["__scopeId", "data-v-5621c50c"]]);
 exports.default = Field;
 //# sourceMappingURL=Field.vue2.cjs.map

package/dist/prometheus-framework/src/components/Field/Field.vue2.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Field.vue2.cjs","sources":["../../../../../src/components/Field/Field.vue"],"sourcesContent":["<script setup>\n  import { ref, computed, onUpdated, onMounted, nextTick } from 'vue'\n\n  const emit = defineEmits(['update:field', 'focus', 'blur']);\n\n  const props = defineProps({\n    label: null,\n    symbol: null,\n    type: 'text',\n    placeholder: 'Enter something here',\n    field: null,\n    value: null,\n    validation: false,\n    disabled: null,\n    tabindex: -1\n  });\n\n  if (props.value) {\n    emit('update:field', props.value)\n  }\n\n  const textarea = ref(null);\n\n  function resize() {\n    if (textarea.value) textarea.value.style.height = \"1rem\";\n    if (textarea.value) textarea.value.style.height = textarea.value?.scrollHeight + \"px\";\n  }\n\n\n  onUpdated(() => {\n   if (props.type === 'textarea') nextTick(() => {  { focus()} })\n    resize()\n  });\n\n  onMounted(() => {\n    if (props.type === 'textarea') nextTick(() => {  { focus()} })\n    resize()\n  });\n\n  const text = ref(props.field);\n</script>\n\n<template>\n  <div \n    :class=\"[\n      $attrs.class, \n      { \n        'bg-fourth-nano': validation \n      }\n    ]\" \n    class=\"flex-center flex-nowrap flex\"\n  >\n    <div \n      v-if=\"label\" \n      class=\"t-transp mn-r-small\"\n    >\n      <span class=\"t-nowrap\">\n        {{label}}\n      </span>\n    </div>\n\n    <div class=\"w-100\">\n      <input \n        v-if=\"type !== 'textarea'\"\n        @input=\"event => text = emit('update:field', event.target.value)\"\n        @focus=\"event => emit('focus', event)\"\n        @blur=\"event => emit('blur', event)\"\n        :type=\"type\"\n        class=\"w-100\"\n        :value=\"field\"\n        :placeholder=\"placeholder\"\n        :tabindex=\"tabindex\"\n        :disabled=\"disabled\"\n      />\n      <textarea \n        v-else\n        ref=\"textarea\"\n        @input=\"event => text = emit('update:field', event.target.value)\"\n        @focus=\"event => emit('focus', event)\"\n        @blur=\"event => emit('blur', event)\"\n        class=\"w-100\"\n        style=\"resize: vertical;\"\n        :value=\"field\"\n        :placeholder=\"placeholder\"\n        :tabindex=\"tabindex\"\n         :disabled=\"disabled\"\n      />\n    </div> \n\n    <slot></slot>\n\n    <div \n      v-if=\"symbol\" \n      class=\"t-transp mn-l-small\"\n    >\n      <span>\n        {{symbol}}\n      </span>\n    </div>\n  </div>\n\n  <!-- Validation -->\n  <transition name=\"fade\">\n    <div v-if=\"validation\" class=\"mn-t-thin mn-b-thin mn-b-thin invalid-feedback\">\n      * {{validation.message}}\n    </div>\n  </transition>\n</template>\n\n<style lang=\"scss\" scoped>\n  input, textarea, span {\n    line-height: 1;\n    color: inherit;\n  }\n</style>"],"names":["ref","onUpdated","nextTick","onMounted"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAGE,UAAM,OAAO;AAEb,UAAM,QAAQ;AAYd,QAAI,MAAM,OAAO;AACf,WAAK,gBAAgB,MAAM,KAAK;AAAA,IACjC;AAED,UAAM,WAAWA,QAAI,IAAI;AAEzB,aAAS,SAAS;;AAChB,UAAI,SAAS,MAAO,UAAS,MAAM,MAAM,SAAS;AAClD,UAAI,SAAS,MAAO,UAAS,MAAM,MAAM,WAAS,cAAS,UAAT,mBAAgB,gBAAe;AAAA,IAClF;AAGDC,QAAAA,UAAU,MAAM;AACf,UAAI,MAAM,SAAS,WAAYC,KAAAA,SAAS,MAAM;AAAG;AAAE,gBAAO;AAAA,QAAA;AAAA,OAAG;AAC5D,aAAQ;AAAA,IACZ,CAAG;AAEDC,QAAAA,UAAU,MAAM;AACd,UAAI,MAAM,SAAS,WAAYD,KAAAA,SAAS,MAAM;AAAG;AAAE,gBAAO;AAAA,QAAA;AAAA,OAAG;AAC7D,aAAQ;AAAA,IACZ,CAAG;AAED,UAAM,OAAOF,IAAAA,IAAI,MAAM,KAAK;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"Field.vue2.cjs","sources":["../../../../../src/components/Field/Field.vue"],"sourcesContent":["<script setup>\n  import { ref, computed, onUpdated, onMounted, nextTick } from 'vue'\n\n  const emit = defineEmits(['update:field', 'focus', 'blur']);\n\n  const props = defineProps({\n    label: null,\n    symbol: null,\n    type: 'text',\n    placeholder: 'Enter something here',\n    field: null,\n    value: null,\n    validation: false,\n    disabled: null,\n    tabindex: -1,\n    autofocus: false\n  });\n\n  if (props.value) {\n    emit('update:field', props.value)\n  }\n\n  const textarea = ref(null);\n  const input = ref(null);\n\n\n  function resize() {\n    if (textarea.value) textarea.value.style.height = \"1rem\";\n    if (textarea.value) textarea.value.style.height = textarea.value?.scrollHeight + \"px\";\n  }\n\n  onUpdated(() => {\n   if (props.type === 'textarea') \n    nextTick(() => {  { focus()} })\n    resize()\n  });\n\n  onMounted(() => {\n    if (props.type === 'textarea') \n      nextTick(() => {  { focus()} })\n    resize()\n  });\n\n  const text = ref(props.field);\n</script>\n\n<template>\n  <div \n    :class=\"[\n      $attrs.class, \n      { \n        'bg-fourth-nano': validation \n      }\n    ]\" \n    class=\"flex-center flex-nowrap flex\"\n  >\n    <div \n      v-if=\"label\" \n      class=\"t-transp mn-r-small\"\n    >\n      <span class=\"t-nowrap\">\n        {{label}}\n      </span>\n    </div>\n\n    <div class=\"w-100\">\n      <input \n        v-if=\"type !== 'textarea'\"\n        ref=\"input\"\n        @input=\"event => text = emit('update:field', event.target.value)\"\n        @focus=\"event => emit('focus', event)\"\n        @blur=\"event => emit('blur', event)\"\n        :type=\"type\"\n        class=\"w-100\"\n        :value=\"field\"\n        :placeholder=\"placeholder\"\n        :tabindex=\"tabindex\"\n        :disabled=\"disabled\"\n        :autofocus=\"autofocus\"\n\n      />\n      <textarea \n        v-else\n        ref=\"textarea\"\n        @input=\"event => text = emit('update:field', event.target.value)\"\n        @focus=\"event => emit('focus', event)\"\n        @blur=\"event => emit('blur', event)\"\n        class=\"w-100\"\n        style=\"resize: vertical;\"\n        :value=\"field\"\n        :placeholder=\"placeholder\"\n        :tabindex=\"tabindex\"\n         :disabled=\"disabled\"\n      />\n    </div> \n\n    <slot></slot>\n\n    <div \n      v-if=\"symbol\" \n      class=\"t-transp mn-l-small\"\n    >\n      <span>\n        {{symbol}}\n      </span>\n    </div>\n  </div>\n\n  <!-- Validation -->\n  <transition name=\"fade\">\n    <div v-if=\"validation\" class=\"mn-t-thin mn-b-thin mn-b-thin invalid-feedback\">\n      * {{validation.message}}\n    </div>\n  </transition>\n</template>\n\n<style lang=\"scss\" scoped>\n  input, textarea, span {\n    line-height: 1;\n    color: inherit;\n  }\n</style>"],"names":["ref","onUpdated","nextTick","onMounted"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAGE,UAAM,OAAO;AAEb,UAAM,QAAQ;AAad,QAAI,MAAM,OAAO;AACf,WAAK,gBAAgB,MAAM,KAAK;AAAA,IACjC;AAED,UAAM,WAAWA,QAAI,IAAI;AACzB,UAAM,QAAQA,QAAI,IAAI;AAGtB,aAAS,SAAS;;AAChB,UAAI,SAAS,MAAO,UAAS,MAAM,MAAM,SAAS;AAClD,UAAI,SAAS,MAAO,UAAS,MAAM,MAAM,WAAS,cAAS,UAAT,mBAAgB,gBAAe;AAAA,IAClF;AAEDC,QAAAA,UAAU,MAAM;AACf,UAAI,MAAM,SAAS;AAClBC,YAAAA,SAAS,MAAM;AAAG;AAAE,kBAAK;AAAA,UAAE;AAAA,QAAC,CAAE;AAC9B,aAAQ;AAAA,IACZ,CAAG;AAEDC,QAAAA,UAAU,MAAM;AACd,UAAI,MAAM,SAAS;AACjBD,YAAAA,SAAS,MAAM;AAAG;AAAE,kBAAK;AAAA,UAAE;AAAA,QAAC,CAAE;AAChC,aAAQ;AAAA,IACZ,CAAG;AAED,UAAM,OAAOF,IAAAA,IAAI,MAAM,KAAK;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}