@ozdao/prometheus-framework 0.2.323 → 0.2.325

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      :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":"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"}
+{"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-medium\"\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  LoadMore: {\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 && props.LoadMore) {\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":"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"}

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

@@ -2,7 +2,7 @@ import { mergeModels, useModel, shallowRef, ref, watch, onMounted, onUnmounted,
 import SkeletonEvent from "../../modules/icons/skeletons/SkeletonEvent.vue.js";
 import Loader from "../Loader/Loader.vue2.js";
 import _sfc_main$a from "../EmptyState/EmptyState.vue.js";
-import _sfc_main$5 from "../Dropdown/Dropdown.vue.js";
+import _sfc_main$5 from "../Dropdown/Dropdown.vue2.js";
 import _sfc_main$7 from "../DatePicker/Calendar.vue2.js";
 import _sfc_main$3 from "../BottomSheet/BottomSheet.vue.js";
 import _sfc_main$1 from "../../modules/globals/views/components/blocks/BlockSearch.vue.js";
@@ -27,6 +27,10 @@ const _sfc_main = {
       type: Boolean,
       default: true
     },
+    LoadMore: {
+      type: Boolean,
+      default: true
+    },
     search: {
       type: [Boolean, Object],
       default: false
@@ -171,7 +175,7 @@ const _sfc_main = {
     let observer = null;
     onMounted(async () => {
       await fetchItems();
-      if (typeof window !== "undefined" && !props.showLoadMore) {
+      if (typeof window !== "undefined" && !props.showLoadMore && props.LoadMore) {
         observer = new IntersectionObserver((entries) => {
           if (entries.some((entry) => entry.isIntersecting)) {
             loadMoreItems();
@@ -294,7 +298,7 @@ const _sfc_main = {
               description: __props.states.empty.description,
               action: __props.states.empty.action,
               callback: __props.states.empty.callback,
-              class: "pd-medium mn-b-thin bg-light radius-big"
+              class: "pd-medium mn-b-thin bg-light radius-medium"
             }, null, 8, ["title", "description", "action", "callback"])) : createCommentVNode("", true)
           ]),
           _: 1

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      :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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"}
+{"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-medium\"\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  LoadMore: {\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 && props.LoadMore) {\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/Media/Media.vue.cjs

@@ -0,0 +1,154 @@
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const vue = require("vue");
+;/* empty css             */
+const _pluginVue_exportHelper = require("../../../../_virtual/_plugin-vue_export-helper.cjs");
+const _hoisted_1 = { class: "media-container" };
+const _hoisted_2 = ["src", "data-src", "alt"];
+const _hoisted_3 = ["controls", "loop", "muted", "autoplay", "playsinline", "preload"];
+const _hoisted_4 = ["src", "type"];
+const _hoisted_5 = {
+  key: 2,
+  class: "media-placeholder"
+};
+const _hoisted_6 = {
+  key: 3,
+  class: "media-error"
+};
+const _sfc_main = {
+  __name: "Media",
+  props: {
+    url: {
+      type: String,
+      required: true
+    },
+    options: {
+      type: Object,
+      default: () => ({
+        muted: true,
+        loop: true,
+        playsinline: true,
+        preload: "metadata"
+        // 'none' | 'metadata' | 'auto'
+      })
+    }
+  },
+  setup(__props) {
+    const props = __props;
+    const videoElement = vue.ref(null);
+    const imageElement = vue.ref(null);
+    const isLoaded = vue.ref(false);
+    const error = vue.ref(null);
+    const isIntersecting = vue.ref(false);
+    let observer = null;
+    let isPlaying = false;
+    const fileExtension = vue.computed(() => {
+      var _a, _b, _c;
+      return (_c = (_b = (_a = props.url) == null ? void 0 : _a.split(".")) == null ? void 0 : _b.pop()) == null ? void 0 : _c.toLowerCase();
+    });
+    const isImage = vue.computed(() => {
+      const imageExtensions = ["jpg", "jpeg", "png", "gif", "webp", "svg", "avif"];
+      return imageExtensions.includes(fileExtension.value);
+    });
+    const isVideo = vue.computed(() => {
+      const videoExtensions = ["mp4", "webm", "ogg"];
+      return videoExtensions.includes(fileExtension.value);
+    });
+    const videoType = vue.computed(() => {
+      const types = {
+        "mp4": "video/mp4",
+        "webm": "video/webm",
+        "ogg": "video/ogg"
+      };
+      return types[fileExtension.value] || "";
+    });
+    function handleLoad() {
+      isLoaded.value = true;
+    }
+    function handleError(err) {
+      error.value = `Ошибка загрузки медиа: ${err.message}`;
+      isLoaded.value = false;
+    }
+    async function playVideo() {
+      if (!videoElement.value) return;
+      try {
+        if (videoElement.value.paused && !isPlaying) {
+          await videoElement.value.play();
+          isPlaying = true;
+        }
+      } catch (err) {
+        handleError(err);
+      }
+    }
+    function setupIntersectionObserver() {
+      const options = {
+        root: null,
+        rootMargin: "50px",
+        threshold: 0.1
+      };
+      observer = new IntersectionObserver((entries) => {
+        entries.forEach((entry) => {
+          var _a;
+          isIntersecting.value = entry.isIntersecting;
+          if (entry.isIntersecting) {
+            if (isVideo.value && ((_a = props.options) == null ? void 0 : _a.autoplay)) {
+              playVideo();
+            }
+            observer.disconnect();
+          }
+        });
+      }, options);
+      const element = isImage.value ? imageElement.value : videoElement.value;
+      if (element) {
+        observer.observe(element);
+      }
+    }
+    vue.onMounted(() => {
+      setupIntersectionObserver();
+    });
+    vue.onUnmounted(() => {
+      if (observer) {
+        observer.disconnect();
+      }
+    });
+    return (_ctx, _cache) => {
+      var _a, _b, _c, _d, _e, _f, _g;
+      return vue.openBlock(), vue.createElementBlock("div", _hoisted_1, [
+        isImage.value ? (vue.openBlock(), vue.createElementBlock("img", vue.mergeProps({
+          key: 0,
+          src: isIntersecting.value ? __props.url : "",
+          "data-src": __props.url,
+          alt: ((_a = __props.options) == null ? void 0 : _a.alt) || "Image",
+          class: ["media-item", { "loading": !isLoaded.value }],
+          loading: "lazy",
+          onLoad: handleLoad
+        }, __props.options, {
+          ref_key: "imageElement",
+          ref: imageElement
+        }), null, 16, _hoisted_2)) : isVideo.value ? (vue.openBlock(), vue.createElementBlock("video", vue.mergeProps({
+          key: 1,
+          ref_key: "videoElement",
+          ref: videoElement,
+          class: [{ "loading": !isLoaded.value }, "media-item"],
+          controls: !((_b = __props.options) == null ? void 0 : _b.hideControls),
+          loop: ((_c = __props.options) == null ? void 0 : _c.loop) !== false,
+          muted: ((_d = __props.options) == null ? void 0 : _d.muted) !== false,
+          autoplay: (_e = __props.options) == null ? void 0 : _e.autoplay,
+          playsinline: ((_f = __props.options) == null ? void 0 : _f.playsinline) !== false,
+          preload: ((_g = __props.options) == null ? void 0 : _g.preload) || "metadata",
+          onLoadeddata: handleLoad
+        }, __props.options), [
+          vue.createElementVNode("source", {
+            src: __props.url,
+            type: videoType.value
+          }, null, 8, _hoisted_4)
+        ], 16, _hoisted_3)) : vue.createCommentVNode("", true),
+        !isLoaded.value ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_5, " Загрузка... ")) : vue.createCommentVNode("", true),
+        error.value ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_6, vue.toDisplayString(error.value), 1)) : vue.createCommentVNode("", true)
+      ]);
+    };
+  }
+};
+const Media = /* @__PURE__ */ _pluginVue_exportHelper.default(_sfc_main, [["__scopeId", "data-v-94bcf726"]]);
+exports.default = Media;
+//# sourceMappingURL=Media.vue.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Media.vue.cjs","sources":["../../../../../src/components/Media/Media.vue"],"sourcesContent":["<template>\n  <div class=\"media-container\">\n    <!-- Изображение с ленивой загрузкой и placeholder -->\n    <img\n      v-if=\"isImage\"\n      :src=\"isIntersecting ? url : ''\"\n      :data-src=\"url\"\n      :alt=\"options?.alt || 'Image'\"\n      class=\"media-item\"\n      :class=\"{ 'loading': !isLoaded }\"\n      loading=\"lazy\"\n      @load=\"handleLoad\"\n      v-bind=\"options\"\n      ref=\"imageElement\"\n    />\n    \n    <!-- Видео с предварительной загрузкой -->\n    <video\n      v-else-if=\"isVideo\"\n      ref=\"videoElement\"\n      :class=\"{ 'loading': !isLoaded }\"\n      class=\"media-item\"\n      :controls=\"!options?.hideControls\"\n      :loop=\"options?.loop !== false\"\n      :muted=\"options?.muted !== false\"\n      :autoplay=\"options?.autoplay\"\n      :playsinline=\"options?.playsinline !== false\"\n      :preload=\"options?.preload || 'metadata'\"\n      @loadeddata=\"handleLoad\"\n      v-bind=\"options\"\n    >\n      <source :src=\"url\" :type=\"videoType\">\n    </video>\n    \n    <!-- Плейсхолдер во время загрузки -->\n    <div v-if=\"!isLoaded\" class=\"media-placeholder\">\n      Загрузка...\n    </div>\n    \n    <!-- Сообщение об ошибке -->\n    <div v-if=\"error\" class=\"media-error\">\n      {{ error }}\n    </div>\n  </div>\n</template>\n\n<script setup>\nimport { ref, onMounted, computed, onUnmounted } from 'vue'\n\nconst props = defineProps({\n  url: {\n    type: String,\n    required: true\n  },\n  options: {\n    type: Object,\n    default: () => ({\n      muted: true,\n      loop: true,\n      playsinline: true,\n      preload: 'metadata' // 'none' | 'metadata' | 'auto'\n    })\n  }\n})\n\n// Refs\nconst videoElement = ref(null)\nconst imageElement = ref(null)\nconst isLoaded = ref(false)\nconst error = ref(null)\nconst isIntersecting = ref(false)\nlet observer = null\nlet isPlaying = false\n\n// Определяем тип медиа\nconst fileExtension = computed(() => {\n  return props.url?.split('.')?.pop()?.toLowerCase()\n})\n\nconst isImage = computed(() => {\n  const imageExtensions = ['jpg', 'jpeg', 'png', 'gif', 'webp', 'svg', 'avif']\n  return imageExtensions.includes(fileExtension.value)\n})\n\nconst isVideo = computed(() => {\n  const videoExtensions = ['mp4', 'webm', 'ogg']\n  return videoExtensions.includes(fileExtension.value)\n})\n\n// Определяем MIME-тип для видео\nconst videoType = computed(() => {\n  const types = {\n    'mp4': 'video/mp4',\n    'webm': 'video/webm',\n    'ogg': 'video/ogg'\n  }\n  return types[fileExtension.value] || ''\n})\n\n// Обработчик загрузки медиа\nfunction handleLoad() {\n  isLoaded.value = true\n}\n\n// Обработка ошибок\nfunction handleError(err) {\n  error.value = `Ошибка загрузки медиа: ${err.message}`\n  isLoaded.value = false\n}\n\n// Управление видео с обработкой ошибок\nasync function playVideo() {\n  if (!videoElement.value) return\n  \n  try {\n    if (videoElement.value.paused && !isPlaying) {\n      await videoElement.value.play()\n      isPlaying = true\n    }\n  } catch (err) {\n    handleError(err)\n  }\n}\n\nfunction checkAndPlayVideo() {\n  if (!videoElement.value) return\n  \n  videoElement.value.onplaying = () => {\n    isPlaying = true\n  }\n  \n  videoElement.value.onpause = () => {\n    isPlaying = false\n  }\n  \n  videoElement.value.onerror = handleError\n}\n\n// Intersection Observer для ленивой загрузки\nfunction setupIntersectionObserver() {\n  const options = {\n    root: null,\n    rootMargin: '50px',\n    threshold: 0.1\n  }\n  \n  observer = new IntersectionObserver((entries) => {\n    entries.forEach(entry => {\n      isIntersecting.value = entry.isIntersecting\n      \n      if (entry.isIntersecting) {\n        if (isVideo.value && props.options?.autoplay) {\n          playVideo()\n        }\n        // Отключаем observer после первой загрузки\n        observer.disconnect()\n      }\n    })\n  }, options)\n  \n  // Наблюдаем за элементом в зависимости от типа медиа\n  const element = isImage.value ? imageElement.value : videoElement.value\n  if (element) {\n    observer.observe(element)\n  }\n}\n\n// Lifecycle hooks\nonMounted(() => {\n  setupIntersectionObserver()\n})\n\nonUnmounted(() => {\n  if (observer) {\n    observer.disconnect()\n  }\n})\n</script>\n\n<style scoped>\n.media-container {\n}\n\n.media-item {\n  all: inherit;\n  opacity: 1;\n  transition: opacity 0.3s ease;\n}\n\n.media-item.loading {\n  opacity: 0;\n}\n\n.media-placeholder {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background-color: #f5f5f5;\n}\n\n.media-error {\n  color: #ff4444;\n  padding: 1rem;\n  text-align: center;\n}\n</style>"],"names":["ref","computed","onMounted","onUnmounted"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAiDA,UAAM,QAAQ;AAiBd,UAAM,eAAeA,IAAG,IAAC,IAAI;AAC7B,UAAM,eAAeA,IAAG,IAAC,IAAI;AAC7B,UAAM,WAAWA,IAAG,IAAC,KAAK;AAC1B,UAAM,QAAQA,IAAG,IAAC,IAAI;AACtB,UAAM,iBAAiBA,IAAG,IAAC,KAAK;AAChC,QAAI,WAAW;AACf,QAAI,YAAY;AAGhB,UAAM,gBAAgBC,IAAQ,SAAC,MAAM;;AACnC,cAAO,uBAAM,QAAN,mBAAW,MAAM,SAAjB,mBAAuB,UAAvB,mBAA8B;AAAA,IACvC,CAAC;AAED,UAAM,UAAUA,IAAQ,SAAC,MAAM;AAC7B,YAAM,kBAAkB,CAAC,OAAO,QAAQ,OAAO,OAAO,QAAQ,OAAO,MAAM;AAC3E,aAAO,gBAAgB,SAAS,cAAc,KAAK;AAAA,IACrD,CAAC;AAED,UAAM,UAAUA,IAAQ,SAAC,MAAM;AAC7B,YAAM,kBAAkB,CAAC,OAAO,QAAQ,KAAK;AAC7C,aAAO,gBAAgB,SAAS,cAAc,KAAK;AAAA,IACrD,CAAC;AAGD,UAAM,YAAYA,IAAQ,SAAC,MAAM;AAC/B,YAAM,QAAQ;AAAA,QACZ,OAAO;AAAA,QACP,QAAQ;AAAA,QACR,OAAO;AAAA,MACR;AACD,aAAO,MAAM,cAAc,KAAK,KAAK;AAAA,IACvC,CAAC;AAGD,aAAS,aAAa;AACpB,eAAS,QAAQ;AAAA,IACnB;AAGA,aAAS,YAAY,KAAK;AACxB,YAAM,QAAQ,0BAA0B,IAAI,OAAO;AACnD,eAAS,QAAQ;AAAA,IACnB;AAGA,mBAAe,YAAY;AACzB,UAAI,CAAC,aAAa,MAAO;AAEzB,UAAI;AACF,YAAI,aAAa,MAAM,UAAU,CAAC,WAAW;AAC3C,gBAAM,aAAa,MAAM,KAAM;AAC/B,sBAAY;AAAA,QACb;AAAA,MACF,SAAQ,KAAK;AACZ,oBAAY,GAAG;AAAA,MAChB;AAAA,IACH;AAiBA,aAAS,4BAA4B;AACnC,YAAM,UAAU;AAAA,QACd,MAAM;AAAA,QACN,YAAY;AAAA,QACZ,WAAW;AAAA,MACZ;AAED,iBAAW,IAAI,qBAAqB,CAAC,YAAY;AAC/C,gBAAQ,QAAQ,WAAS;;AACvB,yBAAe,QAAQ,MAAM;AAE7B,cAAI,MAAM,gBAAgB;AACxB,gBAAI,QAAQ,WAAS,WAAM,YAAN,mBAAe,WAAU;AAC5C,wBAAW;AAAA,YACZ;AAED,qBAAS,WAAY;AAAA,UACtB;AAAA,QACP,CAAK;AAAA,MACF,GAAE,OAAO;AAGV,YAAM,UAAU,QAAQ,QAAQ,aAAa,QAAQ,aAAa;AAClE,UAAI,SAAS;AACX,iBAAS,QAAQ,OAAO;AAAA,MACzB;AAAA,IACH;AAGAC,QAAAA,UAAU,MAAM;AACd,gCAA2B;AAAA,IAC7B,CAAC;AAEDC,QAAAA,YAAY,MAAM;AAChB,UAAI,UAAU;AACZ,iBAAS,WAAY;AAAA,MACtB;AAAA,IACH,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

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

@@ -0,0 +1,154 @@
+import { ref, computed, onMounted, onUnmounted, openBlock, createElementBlock, mergeProps, createElementVNode, createCommentVNode, toDisplayString } from "vue";
+/* empty css           */
+import _export_sfc from "../../../../_virtual/_plugin-vue_export-helper.js";
+const _hoisted_1 = { class: "media-container" };
+const _hoisted_2 = ["src", "data-src", "alt"];
+const _hoisted_3 = ["controls", "loop", "muted", "autoplay", "playsinline", "preload"];
+const _hoisted_4 = ["src", "type"];
+const _hoisted_5 = {
+  key: 2,
+  class: "media-placeholder"
+};
+const _hoisted_6 = {
+  key: 3,
+  class: "media-error"
+};
+const _sfc_main = {
+  __name: "Media",
+  props: {
+    url: {
+      type: String,
+      required: true
+    },
+    options: {
+      type: Object,
+      default: () => ({
+        muted: true,
+        loop: true,
+        playsinline: true,
+        preload: "metadata"
+        // 'none' | 'metadata' | 'auto'
+      })
+    }
+  },
+  setup(__props) {
+    const props = __props;
+    const videoElement = ref(null);
+    const imageElement = ref(null);
+    const isLoaded = ref(false);
+    const error = ref(null);
+    const isIntersecting = ref(false);
+    let observer = null;
+    let isPlaying = false;
+    const fileExtension = computed(() => {
+      var _a, _b, _c;
+      return (_c = (_b = (_a = props.url) == null ? void 0 : _a.split(".")) == null ? void 0 : _b.pop()) == null ? void 0 : _c.toLowerCase();
+    });
+    const isImage = computed(() => {
+      const imageExtensions = ["jpg", "jpeg", "png", "gif", "webp", "svg", "avif"];
+      return imageExtensions.includes(fileExtension.value);
+    });
+    const isVideo = computed(() => {
+      const videoExtensions = ["mp4", "webm", "ogg"];
+      return videoExtensions.includes(fileExtension.value);
+    });
+    const videoType = computed(() => {
+      const types = {
+        "mp4": "video/mp4",
+        "webm": "video/webm",
+        "ogg": "video/ogg"
+      };
+      return types[fileExtension.value] || "";
+    });
+    function handleLoad() {
+      isLoaded.value = true;
+    }
+    function handleError(err) {
+      error.value = `Ошибка загрузки медиа: ${err.message}`;
+      isLoaded.value = false;
+    }
+    async function playVideo() {
+      if (!videoElement.value) return;
+      try {
+        if (videoElement.value.paused && !isPlaying) {
+          await videoElement.value.play();
+          isPlaying = true;
+        }
+      } catch (err) {
+        handleError(err);
+      }
+    }
+    function setupIntersectionObserver() {
+      const options = {
+        root: null,
+        rootMargin: "50px",
+        threshold: 0.1
+      };
+      observer = new IntersectionObserver((entries) => {
+        entries.forEach((entry) => {
+          var _a;
+          isIntersecting.value = entry.isIntersecting;
+          if (entry.isIntersecting) {
+            if (isVideo.value && ((_a = props.options) == null ? void 0 : _a.autoplay)) {
+              playVideo();
+            }
+            observer.disconnect();
+          }
+        });
+      }, options);
+      const element = isImage.value ? imageElement.value : videoElement.value;
+      if (element) {
+        observer.observe(element);
+      }
+    }
+    onMounted(() => {
+      setupIntersectionObserver();
+    });
+    onUnmounted(() => {
+      if (observer) {
+        observer.disconnect();
+      }
+    });
+    return (_ctx, _cache) => {
+      var _a, _b, _c, _d, _e, _f, _g;
+      return openBlock(), createElementBlock("div", _hoisted_1, [
+        isImage.value ? (openBlock(), createElementBlock("img", mergeProps({
+          key: 0,
+          src: isIntersecting.value ? __props.url : "",
+          "data-src": __props.url,
+          alt: ((_a = __props.options) == null ? void 0 : _a.alt) || "Image",
+          class: ["media-item", { "loading": !isLoaded.value }],
+          loading: "lazy",
+          onLoad: handleLoad
+        }, __props.options, {
+          ref_key: "imageElement",
+          ref: imageElement
+        }), null, 16, _hoisted_2)) : isVideo.value ? (openBlock(), createElementBlock("video", mergeProps({
+          key: 1,
+          ref_key: "videoElement",
+          ref: videoElement,
+          class: [{ "loading": !isLoaded.value }, "media-item"],
+          controls: !((_b = __props.options) == null ? void 0 : _b.hideControls),
+          loop: ((_c = __props.options) == null ? void 0 : _c.loop) !== false,
+          muted: ((_d = __props.options) == null ? void 0 : _d.muted) !== false,
+          autoplay: (_e = __props.options) == null ? void 0 : _e.autoplay,
+          playsinline: ((_f = __props.options) == null ? void 0 : _f.playsinline) !== false,
+          preload: ((_g = __props.options) == null ? void 0 : _g.preload) || "metadata",
+          onLoadeddata: handleLoad
+        }, __props.options), [
+          createElementVNode("source", {
+            src: __props.url,
+            type: videoType.value
+          }, null, 8, _hoisted_4)
+        ], 16, _hoisted_3)) : createCommentVNode("", true),
+        !isLoaded.value ? (openBlock(), createElementBlock("div", _hoisted_5, " Загрузка... ")) : createCommentVNode("", true),
+        error.value ? (openBlock(), createElementBlock("div", _hoisted_6, toDisplayString(error.value), 1)) : createCommentVNode("", true)
+      ]);
+    };
+  }
+};
+const Media = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-94bcf726"]]);
+export {
+  Media as default
+};
+//# sourceMappingURL=Media.vue.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Media.vue.js","sources":["../../../../../src/components/Media/Media.vue"],"sourcesContent":["<template>\n  <div class=\"media-container\">\n    <!-- Изображение с ленивой загрузкой и placeholder -->\n    <img\n      v-if=\"isImage\"\n      :src=\"isIntersecting ? url : ''\"\n      :data-src=\"url\"\n      :alt=\"options?.alt || 'Image'\"\n      class=\"media-item\"\n      :class=\"{ 'loading': !isLoaded }\"\n      loading=\"lazy\"\n      @load=\"handleLoad\"\n      v-bind=\"options\"\n      ref=\"imageElement\"\n    />\n    \n    <!-- Видео с предварительной загрузкой -->\n    <video\n      v-else-if=\"isVideo\"\n      ref=\"videoElement\"\n      :class=\"{ 'loading': !isLoaded }\"\n      class=\"media-item\"\n      :controls=\"!options?.hideControls\"\n      :loop=\"options?.loop !== false\"\n      :muted=\"options?.muted !== false\"\n      :autoplay=\"options?.autoplay\"\n      :playsinline=\"options?.playsinline !== false\"\n      :preload=\"options?.preload || 'metadata'\"\n      @loadeddata=\"handleLoad\"\n      v-bind=\"options\"\n    >\n      <source :src=\"url\" :type=\"videoType\">\n    </video>\n    \n    <!-- Плейсхолдер во время загрузки -->\n    <div v-if=\"!isLoaded\" class=\"media-placeholder\">\n      Загрузка...\n    </div>\n    \n    <!-- Сообщение об ошибке -->\n    <div v-if=\"error\" class=\"media-error\">\n      {{ error }}\n    </div>\n  </div>\n</template>\n\n<script setup>\nimport { ref, onMounted, computed, onUnmounted } from 'vue'\n\nconst props = defineProps({\n  url: {\n    type: String,\n    required: true\n  },\n  options: {\n    type: Object,\n    default: () => ({\n      muted: true,\n      loop: true,\n      playsinline: true,\n      preload: 'metadata' // 'none' | 'metadata' | 'auto'\n    })\n  }\n})\n\n// Refs\nconst videoElement = ref(null)\nconst imageElement = ref(null)\nconst isLoaded = ref(false)\nconst error = ref(null)\nconst isIntersecting = ref(false)\nlet observer = null\nlet isPlaying = false\n\n// Определяем тип медиа\nconst fileExtension = computed(() => {\n  return props.url?.split('.')?.pop()?.toLowerCase()\n})\n\nconst isImage = computed(() => {\n  const imageExtensions = ['jpg', 'jpeg', 'png', 'gif', 'webp', 'svg', 'avif']\n  return imageExtensions.includes(fileExtension.value)\n})\n\nconst isVideo = computed(() => {\n  const videoExtensions = ['mp4', 'webm', 'ogg']\n  return videoExtensions.includes(fileExtension.value)\n})\n\n// Определяем MIME-тип для видео\nconst videoType = computed(() => {\n  const types = {\n    'mp4': 'video/mp4',\n    'webm': 'video/webm',\n    'ogg': 'video/ogg'\n  }\n  return types[fileExtension.value] || ''\n})\n\n// Обработчик загрузки медиа\nfunction handleLoad() {\n  isLoaded.value = true\n}\n\n// Обработка ошибок\nfunction handleError(err) {\n  error.value = `Ошибка загрузки медиа: ${err.message}`\n  isLoaded.value = false\n}\n\n// Управление видео с обработкой ошибок\nasync function playVideo() {\n  if (!videoElement.value) return\n  \n  try {\n    if (videoElement.value.paused && !isPlaying) {\n      await videoElement.value.play()\n      isPlaying = true\n    }\n  } catch (err) {\n    handleError(err)\n  }\n}\n\nfunction checkAndPlayVideo() {\n  if (!videoElement.value) return\n  \n  videoElement.value.onplaying = () => {\n    isPlaying = true\n  }\n  \n  videoElement.value.onpause = () => {\n    isPlaying = false\n  }\n  \n  videoElement.value.onerror = handleError\n}\n\n// Intersection Observer для ленивой загрузки\nfunction setupIntersectionObserver() {\n  const options = {\n    root: null,\n    rootMargin: '50px',\n    threshold: 0.1\n  }\n  \n  observer = new IntersectionObserver((entries) => {\n    entries.forEach(entry => {\n      isIntersecting.value = entry.isIntersecting\n      \n      if (entry.isIntersecting) {\n        if (isVideo.value && props.options?.autoplay) {\n          playVideo()\n        }\n        // Отключаем observer после первой загрузки\n        observer.disconnect()\n      }\n    })\n  }, options)\n  \n  // Наблюдаем за элементом в зависимости от типа медиа\n  const element = isImage.value ? imageElement.value : videoElement.value\n  if (element) {\n    observer.observe(element)\n  }\n}\n\n// Lifecycle hooks\nonMounted(() => {\n  setupIntersectionObserver()\n})\n\nonUnmounted(() => {\n  if (observer) {\n    observer.disconnect()\n  }\n})\n</script>\n\n<style scoped>\n.media-container {\n}\n\n.media-item {\n  all: inherit;\n  opacity: 1;\n  transition: opacity 0.3s ease;\n}\n\n.media-item.loading {\n  opacity: 0;\n}\n\n.media-placeholder {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background-color: #f5f5f5;\n}\n\n.media-error {\n  color: #ff4444;\n  padding: 1rem;\n  text-align: center;\n}\n</style>"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAiDA,UAAM,QAAQ;AAiBd,UAAM,eAAe,IAAI,IAAI;AAC7B,UAAM,eAAe,IAAI,IAAI;AAC7B,UAAM,WAAW,IAAI,KAAK;AAC1B,UAAM,QAAQ,IAAI,IAAI;AACtB,UAAM,iBAAiB,IAAI,KAAK;AAChC,QAAI,WAAW;AACf,QAAI,YAAY;AAGhB,UAAM,gBAAgB,SAAS,MAAM;;AACnC,cAAO,uBAAM,QAAN,mBAAW,MAAM,SAAjB,mBAAuB,UAAvB,mBAA8B;AAAA,IACvC,CAAC;AAED,UAAM,UAAU,SAAS,MAAM;AAC7B,YAAM,kBAAkB,CAAC,OAAO,QAAQ,OAAO,OAAO,QAAQ,OAAO,MAAM;AAC3E,aAAO,gBAAgB,SAAS,cAAc,KAAK;AAAA,IACrD,CAAC;AAED,UAAM,UAAU,SAAS,MAAM;AAC7B,YAAM,kBAAkB,CAAC,OAAO,QAAQ,KAAK;AAC7C,aAAO,gBAAgB,SAAS,cAAc,KAAK;AAAA,IACrD,CAAC;AAGD,UAAM,YAAY,SAAS,MAAM;AAC/B,YAAM,QAAQ;AAAA,QACZ,OAAO;AAAA,QACP,QAAQ;AAAA,QACR,OAAO;AAAA,MACR;AACD,aAAO,MAAM,cAAc,KAAK,KAAK;AAAA,IACvC,CAAC;AAGD,aAAS,aAAa;AACpB,eAAS,QAAQ;AAAA,IACnB;AAGA,aAAS,YAAY,KAAK;AACxB,YAAM,QAAQ,0BAA0B,IAAI,OAAO;AACnD,eAAS,QAAQ;AAAA,IACnB;AAGA,mBAAe,YAAY;AACzB,UAAI,CAAC,aAAa,MAAO;AAEzB,UAAI;AACF,YAAI,aAAa,MAAM,UAAU,CAAC,WAAW;AAC3C,gBAAM,aAAa,MAAM,KAAM;AAC/B,sBAAY;AAAA,QACb;AAAA,MACF,SAAQ,KAAK;AACZ,oBAAY,GAAG;AAAA,MAChB;AAAA,IACH;AAiBA,aAAS,4BAA4B;AACnC,YAAM,UAAU;AAAA,QACd,MAAM;AAAA,QACN,YAAY;AAAA,QACZ,WAAW;AAAA,MACZ;AAED,iBAAW,IAAI,qBAAqB,CAAC,YAAY;AAC/C,gBAAQ,QAAQ,WAAS;;AACvB,yBAAe,QAAQ,MAAM;AAE7B,cAAI,MAAM,gBAAgB;AACxB,gBAAI,QAAQ,WAAS,WAAM,YAAN,mBAAe,WAAU;AAC5C,wBAAW;AAAA,YACZ;AAED,qBAAS,WAAY;AAAA,UACtB;AAAA,QACP,CAAK;AAAA,MACF,GAAE,OAAO;AAGV,YAAM,UAAU,QAAQ,QAAQ,aAAa,QAAQ,aAAa;AAClE,UAAI,SAAS;AACX,iBAAS,QAAQ,OAAO;AAAA,MACzB;AAAA,IACH;AAGA,cAAU,MAAM;AACd,gCAA2B;AAAA,IAC7B,CAAC;AAED,gBAAY,MAAM;AAChB,UAAI,UAAU;AACZ,iBAAS,WAAY;AAAA,MACtB;AAAA,IACH,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

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

@@ -47,10 +47,7 @@ const _sfc_main = {
     };
     vueI18n.useI18n(text);
     return (_ctx, _cache) => {
-      return vue.openBlock(), vue.createBlock(vue.Transition, {
-        name: "TransitionTranslateY",
-        appear: ""
-      }, {
+      return vue.openBlock(), vue.createBlock(vue.Transition, { name: "moveFromTop" }, {
         default: vue.withCtx(() => [
           __props.isPopupOpen ? (vue.openBlock(), vue.createBlock(vue.Teleport, {
             key: 0,

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

@@ -1 +1 @@
-{"version":3,"file":"Popup.vue.cjs","sources":["../../../../../src/components/Popup/Popup.vue"],"sourcesContent":["<template>\n\n\t\t<transition name=\"TransitionTranslateY\" appear>\n\t\t\t\t<teleport to=\"body\" v-if=\"isPopupOpen\">\n\t\t\t\t\t<div v-if=\"isPopupOpen\" key=\"popup-content\" class=\"pd-small z-index-6 popup-wrapper\">\n\n\t\t\t\t\t\t<transition name=\"TransitionTranslateY\" mode=\"out-in\">\n\t\t\t\t\t\t\t<section class=\"pos-relative z-index-4\" v-bind=\"$attrs\" :class=\"$attrs.class\">\n\t\t\t\t\t\t\t\t\t<h4 v-if=\"title\" class=\"mn-b-small\">{{title}}</h4>\n\t\t\t\t\t\t\t\t\t<IconCross :fill=\"'rgb(var(--white))'\" @click=\"closePopup()\" class=\"cursor-pointer bg-second pd-micro radius-extra pos-absolute pos-t-0 pos-r-0 mn-t-semi mn-r-semi hover-scale-1 i-medium z-index-5\"/>\n\t\t\t\t\t\t\t\t\t<slot></slot>\n\t\t\t\t\t\t\t</section>  \n\t\t\t\t\t\t</transition>\n\n\t\t\t\t\t\t<div \n\t\t\t\t\t\t\t@click=\"closePopup()\" \n\t\t\t\t\t    :class=\"{'active':isPopupOpen === true}\" \n\t\t\t\t\t    class=\"color-overlay z-index-3\">\n\t\t\t\t\t\t</div>\n\n\t\t\t\t\t</div>\n\t\t\t</teleport>\n\t\t</transition>\n\n</template>\n\n<script setup>\nimport { computed, watch, onMounted, ref, nextTick } from 'vue';\n// Import libs\nimport { useRoute, useRouter } from 'vue-router'\nimport { useI18n } from 'vue-i18n'\n// Icons\nimport IconCross from '@pf/src/modules/icons/navigation/IconCross.vue';\n// Define props\nconst props = defineProps({\n  isPopupOpen: {\n  \ttype: Boolean,\n\t  default: false\n  },\n  style: String,\n  title: String,\n});\nconst emits = defineEmits(['close-popup'])\n\nfunction closePopup() {\n  emits(\"close-popup\");\n} \n\nwatch(() => props.isPopupOpen, (newVal) => {\n  if (newVal) {\n    document.body.classList.add('no-scroll');\n  } else {\n    document.body.classList.remove('no-scroll');\n  }\n});\n\n// Accessing router and store\nconst route = useRoute()\nconst router = useRouter()\n// Localization\nconst text = {\n  \tmessages: {\n\t    en: {},\n\t    ru: {}\n\t}\n}\nconst { t } = useI18n(text)\n</script>\n\n<style lang=\"scss\">\n\t.no-scroll {\n\t  overflow: hidden;\n\t}\n\n\t.popup-wrapper {\n\t\tdisplay: flex;\n\t\tposition: fixed;\n\n\t\talign-items: center;\n\t\tjustify-content: center;\n\n\t\twidth: 100%;\n\t\theight: 100%;\n\n\t\tleft: 0;\n\t\ttop: 0;\n\n\t\tz-index: 40;\n\n\t\t.popup {\n\t\t\tposition: absolute;\n\t\t\theight: auto;\n\t\t\tpadding: 2rem;\n\t\t\tmin-width: 24rem;\n\t\t\tborder-radius: 2rem;\n\t\t\toverflow: hidden;\n\n\t\t\tcolor: white;\n\t\t\tbackground: black;\n\n\t\t\tz-index: 40;\n\t\t}\n\t}\n\n\t.color-overlay {\n\t\tdisplay: block;\n\t\tposition: fixed;\n\n\t\tleft: 0;\n\t\ttop: 0;\n\n\t\twidth: 100%;\n\t\theight: 100%;\n\n\t\tbackground: rgba(0,0,0,0.0);\n\t\tpointer-events: none;\n\n\t\ttransform: scale(1.5);\n\n\t\ttransition: all 0.5s cubic-bezier(.31,.79,.24,.92);\n\n\t\t&.active {\n\t\t\tbackground: rgba(#000,0.25);\n\t\t\tpointer-events: all;\n\t\t}\n\t}\n</style>\n"],"names":["watch","useRoute","useRouter","useI18n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AAkCA,UAAM,QAAQ;AAQd,UAAM,QAAQ;AAEd,aAAS,aAAa;AACpB,YAAM,aAAa;AAAA,IACrB;AAEAA,QAAK,MAAC,MAAM,MAAM,aAAa,CAAC,WAAW;AACzC,UAAI,QAAQ;AACV,iBAAS,KAAK,UAAU,IAAI,WAAW;AAAA,MAC3C,OAAS;AACL,iBAAS,KAAK,UAAU,OAAO,WAAW;AAAA,MAC3C;AAAA,IACH,CAAC;AAGaC,cAAAA,SAAU;AACTC,cAAAA,UAAW;AAE1B,UAAM,OAAO;AAAA,MACV,UAAU;AAAA,QACR,IAAI,CAAE;AAAA,QACN,IAAI,CAAE;AAAA,MACT;AAAA,IACF;AACcC,YAAO,QAAC,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"Popup.vue.cjs","sources":["../../../../../src/components/Popup/Popup.vue"],"sourcesContent":["<template>\n\t\t<transition name=\"moveFromTop\">\n\t\t\t<teleport to=\"body\" v-if=\"isPopupOpen\">\n\t\t\t\t<div v-if=\"isPopupOpen\" key=\"popup-content\" class=\"pd-small z-index-6 popup-wrapper\">\n\n\t\t\t\t\t<transition name=\"TransitionTranslateY\" mode=\"out-in\">\n\t\t\t\t\t\t<section class=\"pos-relative z-index-4\" v-bind=\"$attrs\" :class=\"$attrs.class\">\n\t\t\t\t\t\t\t\t<h4 v-if=\"title\" class=\"mn-b-small\">{{title}}</h4>\n\t\t\t\t\t\t\t\t<IconCross :fill=\"'rgb(var(--white))'\" @click=\"closePopup()\" class=\"cursor-pointer bg-second pd-micro radius-extra pos-absolute pos-t-0 pos-r-0 mn-t-semi mn-r-semi hover-scale-1 i-medium z-index-5\"/>\n\t\t\t\t\t\t\t\t<slot></slot>\n\t\t\t\t\t\t</section>  \n\t\t\t\t\t</transition>\n\n\t\t\t\t\t<div \n\t\t\t\t\t\t@click=\"closePopup()\" \n\t\t\t\t    :class=\"{'active':isPopupOpen === true}\" \n\t\t\t\t    class=\"color-overlay z-index-3\">\n\t\t\t\t\t</div>\n\n\t\t\t\t</div>\n\t\t</teleport>\n\t</transition>\n</template>\n\n<script setup>\nimport { computed, watch, onMounted, ref, nextTick } from 'vue';\n// Import libs\nimport { useRoute, useRouter } from 'vue-router'\nimport { useI18n } from 'vue-i18n'\n// Icons\nimport IconCross from '@pf/src/modules/icons/navigation/IconCross.vue';\n// Define props\nconst props = defineProps({\n  isPopupOpen: {\n  \ttype: Boolean,\n\t  default: false\n  },\n  style: String,\n  title: String,\n});\nconst emits = defineEmits(['close-popup'])\n\nfunction closePopup() {\n  emits(\"close-popup\");\n} \n\nwatch(() => props.isPopupOpen, (newVal) => {\n  if (newVal) {\n    document.body.classList.add('no-scroll');\n  } else {\n    document.body.classList.remove('no-scroll');\n  }\n});\n\n// Accessing router and store\nconst route = useRoute()\nconst router = useRouter()\n// Localization\nconst text = {\n  \tmessages: {\n\t    en: {},\n\t    ru: {}\n\t}\n}\nconst { t } = useI18n(text)\n</script>\n\n<style lang=\"scss\">\n\t.no-scroll {\n\t  overflow: hidden;\n\t}\n\n\t.popup-wrapper {\n\t\tdisplay: flex;\n\t\tposition: fixed;\n\n\t\talign-items: center;\n\t\tjustify-content: center;\n\n\t\twidth: 100%;\n\t\theight: 100%;\n\n\t\tleft: 0;\n\t\ttop: 0;\n\n\t\tz-index: 40;\n\n\t\t.popup {\n\t\t\tposition: absolute;\n\t\t\theight: auto;\n\t\t\tpadding: 2rem;\n\t\t\tmin-width: 24rem;\n\t\t\tborder-radius: 2rem;\n\t\t\toverflow: hidden;\n\n\t\t\tcolor: white;\n\t\t\tbackground: black;\n\n\t\t\tz-index: 40;\n\t\t}\n\t}\n\n\t.color-overlay {\n\t\tdisplay: block;\n\t\tposition: fixed;\n\n\t\tleft: 0;\n\t\ttop: 0;\n\n\t\twidth: 100%;\n\t\theight: 100%;\n\n\t\tbackground: rgba(0,0,0,0.0);\n\t\tpointer-events: none;\n\n\t\ttransform: scale(1.5);\n\n\t\ttransition: all 0.5s cubic-bezier(.31,.79,.24,.92);\n\n\t\t&.active {\n\t\t\tbackground: rgba(#000,0.25);\n\t\t\tpointer-events: all;\n\t\t}\n\t}\n</style>\n"],"names":["watch","useRoute","useRouter","useI18n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AAgCA,UAAM,QAAQ;AAQd,UAAM,QAAQ;AAEd,aAAS,aAAa;AACpB,YAAM,aAAa;AAAA,IACrB;AAEAA,QAAK,MAAC,MAAM,MAAM,aAAa,CAAC,WAAW;AACzC,UAAI,QAAQ;AACV,iBAAS,KAAK,UAAU,IAAI,WAAW;AAAA,MAC3C,OAAS;AACL,iBAAS,KAAK,UAAU,OAAO,WAAW;AAAA,MAC3C;AAAA,IACH,CAAC;AAGaC,cAAAA,SAAU;AACTC,cAAAA,UAAW;AAE1B,UAAM,OAAO;AAAA,MACV,UAAU;AAAA,QACR,IAAI,CAAE;AAAA,QACN,IAAI,CAAE;AAAA,MACT;AAAA,IACF;AACcC,YAAO,QAAC,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

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

@@ -45,10 +45,7 @@ const _sfc_main = {
     };
     useI18n(text);
     return (_ctx, _cache) => {
-      return openBlock(), createBlock(Transition, {
-        name: "TransitionTranslateY",
-        appear: ""
-      }, {
+      return openBlock(), createBlock(Transition, { name: "moveFromTop" }, {
         default: withCtx(() => [
           __props.isPopupOpen ? (openBlock(), createBlock(Teleport, {
             key: 0,

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

@@ -1 +1 @@
-{"version":3,"file":"Popup.vue.js","sources":["../../../../../src/components/Popup/Popup.vue"],"sourcesContent":["<template>\n\n\t\t<transition name=\"TransitionTranslateY\" appear>\n\t\t\t\t<teleport to=\"body\" v-if=\"isPopupOpen\">\n\t\t\t\t\t<div v-if=\"isPopupOpen\" key=\"popup-content\" class=\"pd-small z-index-6 popup-wrapper\">\n\n\t\t\t\t\t\t<transition name=\"TransitionTranslateY\" mode=\"out-in\">\n\t\t\t\t\t\t\t<section class=\"pos-relative z-index-4\" v-bind=\"$attrs\" :class=\"$attrs.class\">\n\t\t\t\t\t\t\t\t\t<h4 v-if=\"title\" class=\"mn-b-small\">{{title}}</h4>\n\t\t\t\t\t\t\t\t\t<IconCross :fill=\"'rgb(var(--white))'\" @click=\"closePopup()\" class=\"cursor-pointer bg-second pd-micro radius-extra pos-absolute pos-t-0 pos-r-0 mn-t-semi mn-r-semi hover-scale-1 i-medium z-index-5\"/>\n\t\t\t\t\t\t\t\t\t<slot></slot>\n\t\t\t\t\t\t\t</section>  \n\t\t\t\t\t\t</transition>\n\n\t\t\t\t\t\t<div \n\t\t\t\t\t\t\t@click=\"closePopup()\" \n\t\t\t\t\t    :class=\"{'active':isPopupOpen === true}\" \n\t\t\t\t\t    class=\"color-overlay z-index-3\">\n\t\t\t\t\t\t</div>\n\n\t\t\t\t\t</div>\n\t\t\t</teleport>\n\t\t</transition>\n\n</template>\n\n<script setup>\nimport { computed, watch, onMounted, ref, nextTick } from 'vue';\n// Import libs\nimport { useRoute, useRouter } from 'vue-router'\nimport { useI18n } from 'vue-i18n'\n// Icons\nimport IconCross from '@pf/src/modules/icons/navigation/IconCross.vue';\n// Define props\nconst props = defineProps({\n  isPopupOpen: {\n  \ttype: Boolean,\n\t  default: false\n  },\n  style: String,\n  title: String,\n});\nconst emits = defineEmits(['close-popup'])\n\nfunction closePopup() {\n  emits(\"close-popup\");\n} \n\nwatch(() => props.isPopupOpen, (newVal) => {\n  if (newVal) {\n    document.body.classList.add('no-scroll');\n  } else {\n    document.body.classList.remove('no-scroll');\n  }\n});\n\n// Accessing router and store\nconst route = useRoute()\nconst router = useRouter()\n// Localization\nconst text = {\n  \tmessages: {\n\t    en: {},\n\t    ru: {}\n\t}\n}\nconst { t } = useI18n(text)\n</script>\n\n<style lang=\"scss\">\n\t.no-scroll {\n\t  overflow: hidden;\n\t}\n\n\t.popup-wrapper {\n\t\tdisplay: flex;\n\t\tposition: fixed;\n\n\t\talign-items: center;\n\t\tjustify-content: center;\n\n\t\twidth: 100%;\n\t\theight: 100%;\n\n\t\tleft: 0;\n\t\ttop: 0;\n\n\t\tz-index: 40;\n\n\t\t.popup {\n\t\t\tposition: absolute;\n\t\t\theight: auto;\n\t\t\tpadding: 2rem;\n\t\t\tmin-width: 24rem;\n\t\t\tborder-radius: 2rem;\n\t\t\toverflow: hidden;\n\n\t\t\tcolor: white;\n\t\t\tbackground: black;\n\n\t\t\tz-index: 40;\n\t\t}\n\t}\n\n\t.color-overlay {\n\t\tdisplay: block;\n\t\tposition: fixed;\n\n\t\tleft: 0;\n\t\ttop: 0;\n\n\t\twidth: 100%;\n\t\theight: 100%;\n\n\t\tbackground: rgba(0,0,0,0.0);\n\t\tpointer-events: none;\n\n\t\ttransform: scale(1.5);\n\n\t\ttransition: all 0.5s cubic-bezier(.31,.79,.24,.92);\n\n\t\t&.active {\n\t\t\tbackground: rgba(#000,0.25);\n\t\t\tpointer-events: all;\n\t\t}\n\t}\n</style>\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAkCA,UAAM,QAAQ;AAQd,UAAM,QAAQ;AAEd,aAAS,aAAa;AACpB,YAAM,aAAa;AAAA,IACrB;AAEA,UAAM,MAAM,MAAM,aAAa,CAAC,WAAW;AACzC,UAAI,QAAQ;AACV,iBAAS,KAAK,UAAU,IAAI,WAAW;AAAA,MAC3C,OAAS;AACL,iBAAS,KAAK,UAAU,OAAO,WAAW;AAAA,MAC3C;AAAA,IACH,CAAC;AAGa,aAAU;AACT,cAAW;AAE1B,UAAM,OAAO;AAAA,MACV,UAAU;AAAA,QACR,IAAI,CAAE;AAAA,QACN,IAAI,CAAE;AAAA,MACT;AAAA,IACF;AACc,YAAQ,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"Popup.vue.js","sources":["../../../../../src/components/Popup/Popup.vue"],"sourcesContent":["<template>\n\t\t<transition name=\"moveFromTop\">\n\t\t\t<teleport to=\"body\" v-if=\"isPopupOpen\">\n\t\t\t\t<div v-if=\"isPopupOpen\" key=\"popup-content\" class=\"pd-small z-index-6 popup-wrapper\">\n\n\t\t\t\t\t<transition name=\"TransitionTranslateY\" mode=\"out-in\">\n\t\t\t\t\t\t<section class=\"pos-relative z-index-4\" v-bind=\"$attrs\" :class=\"$attrs.class\">\n\t\t\t\t\t\t\t\t<h4 v-if=\"title\" class=\"mn-b-small\">{{title}}</h4>\n\t\t\t\t\t\t\t\t<IconCross :fill=\"'rgb(var(--white))'\" @click=\"closePopup()\" class=\"cursor-pointer bg-second pd-micro radius-extra pos-absolute pos-t-0 pos-r-0 mn-t-semi mn-r-semi hover-scale-1 i-medium z-index-5\"/>\n\t\t\t\t\t\t\t\t<slot></slot>\n\t\t\t\t\t\t</section>  \n\t\t\t\t\t</transition>\n\n\t\t\t\t\t<div \n\t\t\t\t\t\t@click=\"closePopup()\" \n\t\t\t\t    :class=\"{'active':isPopupOpen === true}\" \n\t\t\t\t    class=\"color-overlay z-index-3\">\n\t\t\t\t\t</div>\n\n\t\t\t\t</div>\n\t\t</teleport>\n\t</transition>\n</template>\n\n<script setup>\nimport { computed, watch, onMounted, ref, nextTick } from 'vue';\n// Import libs\nimport { useRoute, useRouter } from 'vue-router'\nimport { useI18n } from 'vue-i18n'\n// Icons\nimport IconCross from '@pf/src/modules/icons/navigation/IconCross.vue';\n// Define props\nconst props = defineProps({\n  isPopupOpen: {\n  \ttype: Boolean,\n\t  default: false\n  },\n  style: String,\n  title: String,\n});\nconst emits = defineEmits(['close-popup'])\n\nfunction closePopup() {\n  emits(\"close-popup\");\n} \n\nwatch(() => props.isPopupOpen, (newVal) => {\n  if (newVal) {\n    document.body.classList.add('no-scroll');\n  } else {\n    document.body.classList.remove('no-scroll');\n  }\n});\n\n// Accessing router and store\nconst route = useRoute()\nconst router = useRouter()\n// Localization\nconst text = {\n  \tmessages: {\n\t    en: {},\n\t    ru: {}\n\t}\n}\nconst { t } = useI18n(text)\n</script>\n\n<style lang=\"scss\">\n\t.no-scroll {\n\t  overflow: hidden;\n\t}\n\n\t.popup-wrapper {\n\t\tdisplay: flex;\n\t\tposition: fixed;\n\n\t\talign-items: center;\n\t\tjustify-content: center;\n\n\t\twidth: 100%;\n\t\theight: 100%;\n\n\t\tleft: 0;\n\t\ttop: 0;\n\n\t\tz-index: 40;\n\n\t\t.popup {\n\t\t\tposition: absolute;\n\t\t\theight: auto;\n\t\t\tpadding: 2rem;\n\t\t\tmin-width: 24rem;\n\t\t\tborder-radius: 2rem;\n\t\t\toverflow: hidden;\n\n\t\t\tcolor: white;\n\t\t\tbackground: black;\n\n\t\t\tz-index: 40;\n\t\t}\n\t}\n\n\t.color-overlay {\n\t\tdisplay: block;\n\t\tposition: fixed;\n\n\t\tleft: 0;\n\t\ttop: 0;\n\n\t\twidth: 100%;\n\t\theight: 100%;\n\n\t\tbackground: rgba(0,0,0,0.0);\n\t\tpointer-events: none;\n\n\t\ttransform: scale(1.5);\n\n\t\ttransition: all 0.5s cubic-bezier(.31,.79,.24,.92);\n\n\t\t&.active {\n\t\t\tbackground: rgba(#000,0.25);\n\t\t\tpointer-events: all;\n\t\t}\n\t}\n</style>\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAgCA,UAAM,QAAQ;AAQd,UAAM,QAAQ;AAEd,aAAS,aAAa;AACpB,YAAM,aAAa;AAAA,IACrB;AAEA,UAAM,MAAM,MAAM,aAAa,CAAC,WAAW;AACzC,UAAI,QAAQ;AACV,iBAAS,KAAK,UAAU,IAAI,WAAW;AAAA,MAC3C,OAAS;AACL,iBAAS,KAAK,UAAU,OAAO,WAAW;AAAA,MAC3C;AAAA,IACH,CAAC;AAGa,aAAU;AACT,cAAW;AAE1B,UAAM,OAAO;AAAA,MACV,UAAU;AAAA,QACR,IAAI,CAAE;AAAA,QACN,IAAI,CAAE;AAAA,MACT;AAAA,IACF;AACc,YAAQ,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}