@ozdao/martyrs 0.2.492 → 0.2.494

package/dist/martyrs/src/modules/rents/views/components/pages/Rents.vue.cjs

@@ -17,44 +17,6 @@ const _sfc_main = {
     const route = vueRouter.useRoute();
     vueRouter.useRouter();
     const isCalendarView = vue.ref(true);
-    const sampleData = vue.ref([
-      {
-        id: 2,
-        title: "Product A",
-        startDate: dayjs_min.default().add(1, "days").toDate(),
-        endDate: dayjs_min.default().add(5, "days").toDate(),
-        status: "active"
-      },
-      {
-        id: 3,
-        title: "Product B",
-        startDate: dayjs_min.default().subtract(1, "days").toDate(),
-        endDate: dayjs_min.default().add(2, "days").toDate(),
-        status: "completed"
-      },
-      {
-        id: 4,
-        title: "Product C",
-        startDate: dayjs_min.default().toDate(),
-        endDate: dayjs_min.default().add(4, "days").toDate(),
-        status: "canceled"
-      },
-      // Additional test data for hour view
-      {
-        id: 5,
-        title: "Product D",
-        startDate: dayjs_min.default().add(2, "days").add(8, "hours").toDate(),
-        endDate: dayjs_min.default().add(2, "days").add(16, "hours").toDate(),
-        status: "active"
-      },
-      {
-        id: 6,
-        title: "Product E",
-        startDate: dayjs_min.default().add(1, "days").add(14, "hours").toDate(),
-        endDate: dayjs_min.default().add(2, "days").add(10, "hours").toDate(),
-        status: "completed"
-      }
-    ]);
     const view = vue.ref("days");
     const date = vue.ref(/* @__PURE__ */ new Date());
     const loading = vue.ref(false);
@@ -63,8 +25,8 @@ const _sfc_main = {
       switch (view.value) {
         case "hours":
           return {
-            start: d.subtract(1, "days").startOf("day").toDate(),
-            end: d.add(6, "days").endOf("day").toDate()
+            start: d.startOf("day").toDate(),
+            end: d.endOf("day").toDate()
           };
         case "days":
           return {
@@ -86,18 +48,43 @@ const _sfc_main = {
     const handleLoadMore = async (direction) => {
       console.log("Loading more:", direction);
       loading.value = true;
-      return new Promise((resolve) => {
-        setTimeout(() => {
-          loading.value = false;
-          resolve();
-        }, 1e3);
-      });
+      try {
+        if (direction !== "refresh") {
+          const d = dayjs_min.default(date.value);
+          let newDate;
+          switch (view.value) {
+            case "hours":
+              newDate = direction === "forward" ? d.add(1, "day").toDate() : d.subtract(1, "day").toDate();
+              break;
+            case "days":
+              newDate = direction === "forward" ? d.add(1, "month").toDate() : d.subtract(1, "month").toDate();
+              break;
+            case "weeks":
+              newDate = direction === "forward" ? d.add(1, "month").toDate() : d.subtract(1, "month").toDate();
+              break;
+          }
+          date.value = newDate;
+        }
+        await rents_store.actions.read({
+          owner: route.params._id,
+          startDate: dateRange.value.start.toISOString(),
+          endDate: dateRange.value.end.toISOString()
+        });
+      } catch (error) {
+        console.error("Error loading more data:", error);
+      } finally {
+        loading.value = false;
+      }
     };
     const handleItemClick = (item) => {
       console.log("Item clicked:", item);
     };
     const handleToday = () => {
-      date.value = /* @__PURE__ */ new Date();
+      const now = /* @__PURE__ */ new Date();
+      date.value = now;
+      if (view.value === "hours") {
+        date.value = /* @__PURE__ */ new Date();
+      }
     };
     const today = /* @__PURE__ */ new Date();
     const calendarStartDate = vue.ref(new Date(today));
@@ -124,6 +111,7 @@ const _sfc_main = {
         ]),
         vue.createVNode(Feed.default, {
           search: true,
+          keepSlotVisible: true,
           states: {
             empty: {
               title: "No Rents Found",
@@ -132,9 +120,9 @@ const _sfc_main = {
           },
           store: { read: (options) => rents_store.actions.read(options) },
           options: {
-            limit: 15,
             owner: vue.unref(route).params._id,
-            ..._ctx.tab !== "all" && { status: _ctx.tab }
+            startDate: dateRange.value.start.toISOString(),
+            endDate: dateRange.value.end.toISOString()
           }
         }, {
           default: vue.withCtx(({ items }) => [
@@ -145,13 +133,18 @@ const _sfc_main = {
               "onUpdate:date": _cache[2] || (_cache[2] = ($event) => date.value = $event),
               dateRange: dateRange.value,
               "onUpdate:dateRange": _cache[3] || (_cache[3] = ($event) => dateRange.value = $event),
-              items: sampleData.value,
+              items,
               loading: loading.value,
+              "title-key": "productDetails.name",
+              "start-key": "startDate",
+              "end-key": "endDate",
+              "status-key": "status",
+              "id-key": "_id",
+              "group-by": "productDetails.name",
               onLoadMore: handleLoadMore,
               onItemClick: handleItemClick,
               onToday: handleToday
-            }, null, 8, ["view", "date", "dateRange", "items", "loading"]),
-            vue.createTextVNode(" " + vue.toDisplayString(items), 1)
+            }, null, 8, ["view", "date", "dateRange", "items", "loading"])
           ]),
           _: 1
         }, 8, ["store", "options"])

package/dist/martyrs/src/modules/rents/views/components/pages/Rents.vue.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Rents.vue.cjs","sources":["../../../../../../../../src/modules/rents/views/components/pages/Rents.vue"],"sourcesContent":["<template>\n  <div class=\"pd-medium mobile:pd-thin bg-white\">\n    <header class=\"mn-b-medium flex-v-center flex-nowrap flex\">\n      <h2 class=\"mn-r-medium\">Rents</h2>\n      <button \n        @click=\"$router.push({ name: 'Organization_Create Rent', params: {_id: route.params._id}})\" \n        class=\"radius-100 i-big hover-scale-1 cursor-pointer t-white bg-second\"\n      >\n        +\n      </button>\n      <div class=\"mn-l-auto flex-v-center\">\n        <button \n          @click=\"toggleView\" \n          class=\"pd-small radius-small bg-light mn-r-small\"\n        >\n          {{ isCalendarView ? 'List View' : 'Calendar View' }}\n        </button>\n      </div>\n    </header>\n\n    <Feed\n      :search=\"true\"\n      :states=\"{\n        empty: {\n          title: 'No Rents Found',\n          description: 'Currently, there are no rents available.'\n        }\n      }\"\n      :store=\"{ read: (options) => rents.actions.read(options) }\"\n      :options=\"{\n        limit: 15,\n        owner: route.params._id,\n        ...(tab !== 'all' && { status: tab })\n      }\"\n      v-slot=\"{ items }\"\n    > \n      <GanttChart\n        v-model:view=\"view\"\n        v-model:date=\"date\"\n        v-model:dateRange=\"dateRange\"\n        :items=\"sampleData\"\n        :loading=\"loading\"\n        @load-more=\"handleLoadMore\"\n        @item-click=\"handleItemClick\"\n        @today=\"handleToday\"\n      />\n      {{items}}\n\n     <!--  <CardRent\n        v-else\n        v-for=\"rent in items\"\n        :key=\"rent._id\"\n        :rent=\"rent\"\n        class=\"bg-light pd-small mn-b-thin radius-small\"\n      /> -->\n    </Feed>\n  </div>\n</template>\n\n<script setup>\nimport dayjs from 'dayjs'\n\nimport Tab from '@martyrs/src/components/Tab/Tab.vue';\nimport Feed from '@martyrs/src/components/Feed/Feed.vue';\n\nimport CardRent from '@martyrs/src/modules/rents/views/components/blocks/CardRent.vue';\n\nimport GanttChart from '@martyrs/src/modules/rents/views/components/pages/Gant/GanttChart.vue';\n\nimport { computed, onMounted, ref, watch } from 'vue';\nimport { useRoute, useRouter } from 'vue-router';\n\nimport * as rents from '@martyrs/src/modules/rents/views/store/rents.store';\n\nconst route = useRoute();\nconst router = useRouter();\n\nconst isCalendarView = ref(true);\n\n// Sample data\nconst sampleData = ref([\n  {\n    id: 2,\n    title: 'Product A',\n    startDate: dayjs().add(1, 'days').toDate(),\n    endDate: dayjs().add(5, 'days').toDate(),\n    status: 'active'\n  },\n  {\n    id: 3,\n    title: 'Product B',\n    startDate: dayjs().subtract(1, 'days').toDate(),\n    endDate: dayjs().add(2, 'days').toDate(),\n    status: 'completed'\n  },\n  {\n    id: 4,\n    title: 'Product C',\n    startDate: dayjs().toDate(),\n    endDate: dayjs().add(4, 'days').toDate(),\n    status: 'canceled'\n  },\n  // Additional test data for hour view\n  {\n    id: 5,\n    title: 'Product D',\n    startDate: dayjs().add(2, 'days').add(8, 'hours').toDate(),\n    endDate: dayjs().add(2, 'days').add(16, 'hours').toDate(),\n    status: 'active'\n  },\n  {\n    id: 6,\n    title: 'Product E',\n    startDate: dayjs().add(1, 'days').add(14, 'hours').toDate(),\n    endDate: dayjs().add(2, 'days').add(10, 'hours').toDate(),\n    status: 'completed'\n  }\n])\n\n// Set initial date range - current month plus 15 days before and 45 days after\nconst view = ref('days')\nconst date = ref(new Date())\nconst loading = ref(false)\n\nconst dateRange = computed(() => {\n  const d = dayjs(date.value)\n  \n  switch (view.value) {\n    case 'hours':\n      return {\n        start: d.subtract(1, 'days').startOf('day').toDate(),\n        end: d.add(6, 'days').endOf('day').toDate()\n      }\n      \n    case 'days':\n      return {\n        start: d.startOf('month').toDate(),\n        end: d.endOf('month').toDate()\n      }\n      \n    case 'weeks':\n      return {\n        start: d.subtract(1, 'month').startOf('week').toDate(),\n        end: d.add(2, 'months').endOf('week').toDate()\n      }\n      \n    default:\n      return {\n        start: d.startOf('month').toDate(),\n        end: d.endOf('month').toDate()\n      }\n  }\n})\n\n// Handle load more\nconst handleLoadMore = async (direction) => {\n  console.log('Loading more:', direction)\n  \n  loading.value = true\n  \n  // Simulate API call\n  return new Promise((resolve) => {\n    setTimeout(() => {\n      // Add more items if needed\n      loading.value = false\n      resolve()\n    }, 1000)\n  })\n}\n\n// Handle item click\nconst handleItemClick = (item) => {\n  console.log('Item clicked:', item)\n}\n\n// Handle today\nconst handleToday = () => {\n  date.value = new Date()\n}\n\nconst today = new Date();\nconst calendarStartDate = ref(new Date(today));\ncalendarStartDate.value.setDate(today.getDate() - 30);\n\nconst calendarEndDate = ref(new Date(today));\ncalendarEndDate.value.setDate(today.getDate() + 30);\n\n// Toggle between calendar and list view\nconst toggleView = () => {\n  isCalendarView.value = !isCalendarView.value;\n};\n\n// Navigate to rent details page\nconst viewRentDetails = (rent) => {\n  router.push({ name: 'Rent Details', params: { _id: rent._id } });\n};\n\n// Load more data when scrolling the Gantt chart\nconst loadMoreData = async ({ direction, date }) => {\n  // alert(direction)\n  console.log('scroll direction is', direction)\n  console.log('current date is', date)\n  // Update the visible range\n  if (direction === 'forward') {\n    calendarEndDate.value = date;\n  } else {\n    calendarStartDate.value = date;\n  }\n  // Here you can add logic to fetch more rents if they fall within the new date range\n  try {\n    // You might need to adjust this depending on your API and data structure\n    const startDateParam = new Date(calendarStartDate.value);\n    startDateParam.setDate(startDateParam.getDate() - 30); // Fetch a bit more to cover edge cases\n    \n    const endDateParam = new Date(calendarEndDate.value);\n    endDateParam.setDate(endDateParam.getDate() + 30);\n    \n    await rents.actions.read({\n      owner: route.params._id,\n      startDate: startDateParam.toISOString(),\n      endDate: endDateParam.toISOString(),\n      ...(tab.value !== 'all' && { status: tab.value })\n    });\n  } catch (error) {\n    console.error('Error loading additional rent data:', error);\n  }\n};\n</script>\n\n<style lang=\"scss\">\n</style>\n"],"names":["useRoute","useRouter","ref","dayjs","computed"],"mappings":"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"}
+{"version":3,"file":"Rents.vue.cjs","sources":["../../../../../../../../src/modules/rents/views/components/pages/Rents.vue"],"sourcesContent":["<template>\n  <div class=\"pd-medium mobile:pd-thin bg-white\">\n    <header class=\"mn-b-medium flex-v-center flex-nowrap flex\">\n      <h2 class=\"mn-r-medium\">Rents</h2>\n      <button \n        @click=\"$router.push({ name: 'Organization_Create Rent', params: {_id: route.params._id}})\" \n        class=\"radius-100 i-big hover-scale-1 cursor-pointer t-white bg-second\"\n      >\n        +\n      </button>\n      <div class=\"mn-l-auto flex-v-center\">\n        <button \n          @click=\"toggleView\" \n          class=\"pd-small radius-small bg-light mn-r-small\"\n        >\n          {{ isCalendarView ? 'List View' : 'Calendar View' }}\n        </button>\n      </div>\n    </header>\n\n    <Feed\n      :search=\"true\"\n      :keepSlotVisible=\"true\"\n      :states=\"{\n        empty: {\n          title: 'No Rents Found',\n          description: 'Currently, there are no rents available.'\n        }\n      }\"\n      :store=\"{ read: (options) => rents.actions.read(options) }\"\n      :options=\"{\n        owner: route.params._id,\n        startDate: dateRange.start.toISOString(),\n        endDate: dateRange.end.toISOString()\n      }\"\n      v-slot=\"{ items }\"\n    > \n      <GanttChart\n        v-model:view=\"view\"\n        v-model:date=\"date\"\n        v-model:dateRange=\"dateRange\"\n        :items=\"items\"\n        :loading=\"loading\"\n        :title-key=\"'productDetails.name'\"\n        :start-key=\"'startDate'\"\n        :end-key=\"'endDate'\"\n        :status-key=\"'status'\"\n        :id-key=\"'_id'\"\n        :group-by=\"'productDetails.name'\"\n        @load-more=\"handleLoadMore\"\n        @item-click=\"handleItemClick\"\n        @today=\"handleToday\"\n      />\n\n     <!--  <CardRent\n        v-else\n        v-for=\"rent in items\"\n        :key=\"rent._id\"\n        :rent=\"rent\"\n        class=\"bg-light pd-small mn-b-thin radius-small\"\n      /> -->\n    </Feed>\n  </div>\n</template>\n\n<script setup>\nimport dayjs from 'dayjs'\n\nimport Tab from '@martyrs/src/components/Tab/Tab.vue';\nimport Feed from '@martyrs/src/components/Feed/Feed.vue';\n\nimport CardRent from '@martyrs/src/modules/rents/views/components/blocks/CardRent.vue';\n\nimport GanttChart from '@martyrs/src/modules/rents/views/components/pages/Gant/GanttChart.vue';\n\nimport { computed, onMounted, ref, watch } from 'vue';\nimport { useRoute, useRouter } from 'vue-router';\n\nimport * as rents from '@martyrs/src/modules/rents/views/store/rents.store';\n\nconst route = useRoute();\nconst router = useRouter();\n\nconst isCalendarView = ref(true);\n\n\n// Set initial date range - current month plus 15 days before and 45 days after\nconst view = ref('days')\nconst date = ref(new Date())\nconst loading = ref(false)\n\nconst dateRange = computed(() => {\n  const d = dayjs(date.value)\n  \n  switch (view.value) {\n    case 'hours':\n      // Show only the current day in hours view\n      return {\n        start: d.startOf('day').toDate(),\n        end: d.endOf('day').toDate()\n      }\n      \n    case 'days':\n      return {\n        start: d.startOf('month').toDate(),\n        end: d.endOf('month').toDate()\n      }\n      \n    case 'weeks':\n      return {\n        start: d.subtract(1, 'month').startOf('week').toDate(),\n        end: d.add(2, 'months').endOf('week').toDate()\n      }\n      \n    default:\n      return {\n        start: d.startOf('month').toDate(),\n        end: d.endOf('month').toDate()\n      }\n  }\n})\n\n// Handle load more\nconst handleLoadMore = async (direction) => {\n  console.log('Loading more:', direction)\n  \n  loading.value = true\n  \n  try {\n    // Only update date if it's navigation (not refresh)\n    if (direction !== 'refresh') {\n      const d = dayjs(date.value)\n      let newDate\n      \n      switch (view.value) {\n        case 'hours':\n          newDate = direction === 'forward' \n            ? d.add(1, 'day').toDate()\n            : d.subtract(1, 'day').toDate()\n          break\n        case 'days':\n          newDate = direction === 'forward'\n            ? d.add(1, 'month').toDate()\n            : d.subtract(1, 'month').toDate()\n          break\n        case 'weeks':\n          newDate = direction === 'forward'\n            ? d.add(1, 'month').toDate()\n            : d.subtract(1, 'month').toDate()\n          break\n      }\n      \n      date.value = newDate\n    }\n    \n    // Load data for the current date range\n    await rents.actions.read({\n      owner: route.params._id,\n      startDate: dateRange.value.start.toISOString(),\n      endDate: dateRange.value.end.toISOString()\n    })\n  } catch (error) {\n    console.error('Error loading more data:', error)\n  } finally {\n    loading.value = false\n  }\n}\n\n// Handle item click\nconst handleItemClick = (item) => {\n  console.log('Item clicked:', item)\n}\n\n// Handle today\nconst handleToday = () => {\n  const now = new Date()\n  date.value = now\n  \n  // For hours view, ensure we're showing the current hour\n  if (view.value === 'hours') {\n    // Update date to current time to trigger proper centering\n    date.value = new Date()\n  }\n}\n\nconst today = new Date();\nconst calendarStartDate = ref(new Date(today));\ncalendarStartDate.value.setDate(today.getDate() - 30);\n\nconst calendarEndDate = ref(new Date(today));\ncalendarEndDate.value.setDate(today.getDate() + 30);\n\n// Toggle between calendar and list view\nconst toggleView = () => {\n  isCalendarView.value = !isCalendarView.value;\n};\n\n// Navigate to rent details page\nconst viewRentDetails = (rent) => {\n  router.push({ name: 'Rent Details', params: { _id: rent._id } });\n};\n\n// Load more data when scrolling the Gantt chart\nconst loadMoreData = async ({ direction, date }) => {\n  // alert(direction)\n  console.log('scroll direction is', direction)\n  console.log('current date is', date)\n  // Update the visible range\n  if (direction === 'forward') {\n    calendarEndDate.value = date;\n  } else {\n    calendarStartDate.value = date;\n  }\n  // Here you can add logic to fetch more rents if they fall within the new date range\n  try {\n    // You might need to adjust this depending on your API and data structure\n    const startDateParam = new Date(calendarStartDate.value);\n    startDateParam.setDate(startDateParam.getDate() - 30); // Fetch a bit more to cover edge cases\n    \n    const endDateParam = new Date(calendarEndDate.value);\n    endDateParam.setDate(endDateParam.getDate() + 30);\n    \n    await rents.actions.read({\n      owner: route.params._id,\n      startDate: startDateParam.toISOString(),\n      endDate: endDateParam.toISOString()\n    });\n  } catch (error) {\n    console.error('Error loading additional rent data:', error);\n  }\n};\n</script>\n\n<style lang=\"scss\">\n</style>\n"],"names":["useRoute","useRouter","ref","computed","dayjs","rents.actions"],"mappings":"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"}

package/dist/martyrs/src/modules/rents/views/components/pages/Rents.vue.js

@@ -1,4 +1,4 @@
-import { ref, computed, createElementBlock, openBlock, createElementVNode, createVNode, unref, toDisplayString, withCtx, createTextVNode } from "vue";
+import { ref, computed, createElementBlock, openBlock, createElementVNode, createVNode, unref, toDisplayString, withCtx } from "vue";
 import dayjs from "../../../../../../../_virtual/dayjs.min.js";
 /* empty css                                    */
 import _sfc_main$1 from "../../../../../components/Feed/Feed.vue.js";
@@ -15,44 +15,6 @@ const _sfc_main = {
     const route = useRoute();
     useRouter();
     const isCalendarView = ref(true);
-    const sampleData = ref([
-      {
-        id: 2,
-        title: "Product A",
-        startDate: dayjs().add(1, "days").toDate(),
-        endDate: dayjs().add(5, "days").toDate(),
-        status: "active"
-      },
-      {
-        id: 3,
-        title: "Product B",
-        startDate: dayjs().subtract(1, "days").toDate(),
-        endDate: dayjs().add(2, "days").toDate(),
-        status: "completed"
-      },
-      {
-        id: 4,
-        title: "Product C",
-        startDate: dayjs().toDate(),
-        endDate: dayjs().add(4, "days").toDate(),
-        status: "canceled"
-      },
-      // Additional test data for hour view
-      {
-        id: 5,
-        title: "Product D",
-        startDate: dayjs().add(2, "days").add(8, "hours").toDate(),
-        endDate: dayjs().add(2, "days").add(16, "hours").toDate(),
-        status: "active"
-      },
-      {
-        id: 6,
-        title: "Product E",
-        startDate: dayjs().add(1, "days").add(14, "hours").toDate(),
-        endDate: dayjs().add(2, "days").add(10, "hours").toDate(),
-        status: "completed"
-      }
-    ]);
     const view = ref("days");
     const date = ref(/* @__PURE__ */ new Date());
     const loading = ref(false);
@@ -61,8 +23,8 @@ const _sfc_main = {
       switch (view.value) {
         case "hours":
           return {
-            start: d.subtract(1, "days").startOf("day").toDate(),
-            end: d.add(6, "days").endOf("day").toDate()
+            start: d.startOf("day").toDate(),
+            end: d.endOf("day").toDate()
           };
         case "days":
           return {
@@ -84,18 +46,43 @@ const _sfc_main = {
     const handleLoadMore = async (direction) => {
       console.log("Loading more:", direction);
       loading.value = true;
-      return new Promise((resolve) => {
-        setTimeout(() => {
-          loading.value = false;
-          resolve();
-        }, 1e3);
-      });
+      try {
+        if (direction !== "refresh") {
+          const d = dayjs(date.value);
+          let newDate;
+          switch (view.value) {
+            case "hours":
+              newDate = direction === "forward" ? d.add(1, "day").toDate() : d.subtract(1, "day").toDate();
+              break;
+            case "days":
+              newDate = direction === "forward" ? d.add(1, "month").toDate() : d.subtract(1, "month").toDate();
+              break;
+            case "weeks":
+              newDate = direction === "forward" ? d.add(1, "month").toDate() : d.subtract(1, "month").toDate();
+              break;
+          }
+          date.value = newDate;
+        }
+        await actions.read({
+          owner: route.params._id,
+          startDate: dateRange.value.start.toISOString(),
+          endDate: dateRange.value.end.toISOString()
+        });
+      } catch (error) {
+        console.error("Error loading more data:", error);
+      } finally {
+        loading.value = false;
+      }
     };
     const handleItemClick = (item) => {
       console.log("Item clicked:", item);
     };
     const handleToday = () => {
-      date.value = /* @__PURE__ */ new Date();
+      const now = /* @__PURE__ */ new Date();
+      date.value = now;
+      if (view.value === "hours") {
+        date.value = /* @__PURE__ */ new Date();
+      }
     };
     const today = /* @__PURE__ */ new Date();
     const calendarStartDate = ref(new Date(today));
@@ -122,6 +109,7 @@ const _sfc_main = {
         ]),
         createVNode(_sfc_main$1, {
           search: true,
+          keepSlotVisible: true,
           states: {
             empty: {
               title: "No Rents Found",
@@ -130,9 +118,9 @@ const _sfc_main = {
           },
           store: { read: (options) => actions.read(options) },
           options: {
-            limit: 15,
             owner: unref(route).params._id,
-            ..._ctx.tab !== "all" && { status: _ctx.tab }
+            startDate: dateRange.value.start.toISOString(),
+            endDate: dateRange.value.end.toISOString()
           }
         }, {
           default: withCtx(({ items }) => [
@@ -143,13 +131,18 @@ const _sfc_main = {
               "onUpdate:date": _cache[2] || (_cache[2] = ($event) => date.value = $event),
               dateRange: dateRange.value,
               "onUpdate:dateRange": _cache[3] || (_cache[3] = ($event) => dateRange.value = $event),
-              items: sampleData.value,
+              items,
               loading: loading.value,
+              "title-key": "productDetails.name",
+              "start-key": "startDate",
+              "end-key": "endDate",
+              "status-key": "status",
+              "id-key": "_id",
+              "group-by": "productDetails.name",
               onLoadMore: handleLoadMore,
               onItemClick: handleItemClick,
               onToday: handleToday
-            }, null, 8, ["view", "date", "dateRange", "items", "loading"]),
-            createTextVNode(" " + toDisplayString(items), 1)
+            }, null, 8, ["view", "date", "dateRange", "items", "loading"])
           ]),
           _: 1
         }, 8, ["store", "options"])

package/dist/martyrs/src/modules/rents/views/components/pages/Rents.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"Rents.vue.js","sources":["../../../../../../../../src/modules/rents/views/components/pages/Rents.vue"],"sourcesContent":["<template>\n  <div class=\"pd-medium mobile:pd-thin bg-white\">\n    <header class=\"mn-b-medium flex-v-center flex-nowrap flex\">\n      <h2 class=\"mn-r-medium\">Rents</h2>\n      <button \n        @click=\"$router.push({ name: 'Organization_Create Rent', params: {_id: route.params._id}})\" \n        class=\"radius-100 i-big hover-scale-1 cursor-pointer t-white bg-second\"\n      >\n        +\n      </button>\n      <div class=\"mn-l-auto flex-v-center\">\n        <button \n          @click=\"toggleView\" \n          class=\"pd-small radius-small bg-light mn-r-small\"\n        >\n          {{ isCalendarView ? 'List View' : 'Calendar View' }}\n        </button>\n      </div>\n    </header>\n\n    <Feed\n      :search=\"true\"\n      :states=\"{\n        empty: {\n          title: 'No Rents Found',\n          description: 'Currently, there are no rents available.'\n        }\n      }\"\n      :store=\"{ read: (options) => rents.actions.read(options) }\"\n      :options=\"{\n        limit: 15,\n        owner: route.params._id,\n        ...(tab !== 'all' && { status: tab })\n      }\"\n      v-slot=\"{ items }\"\n    > \n      <GanttChart\n        v-model:view=\"view\"\n        v-model:date=\"date\"\n        v-model:dateRange=\"dateRange\"\n        :items=\"sampleData\"\n        :loading=\"loading\"\n        @load-more=\"handleLoadMore\"\n        @item-click=\"handleItemClick\"\n        @today=\"handleToday\"\n      />\n      {{items}}\n\n     <!--  <CardRent\n        v-else\n        v-for=\"rent in items\"\n        :key=\"rent._id\"\n        :rent=\"rent\"\n        class=\"bg-light pd-small mn-b-thin radius-small\"\n      /> -->\n    </Feed>\n  </div>\n</template>\n\n<script setup>\nimport dayjs from 'dayjs'\n\nimport Tab from '@martyrs/src/components/Tab/Tab.vue';\nimport Feed from '@martyrs/src/components/Feed/Feed.vue';\n\nimport CardRent from '@martyrs/src/modules/rents/views/components/blocks/CardRent.vue';\n\nimport GanttChart from '@martyrs/src/modules/rents/views/components/pages/Gant/GanttChart.vue';\n\nimport { computed, onMounted, ref, watch } from 'vue';\nimport { useRoute, useRouter } from 'vue-router';\n\nimport * as rents from '@martyrs/src/modules/rents/views/store/rents.store';\n\nconst route = useRoute();\nconst router = useRouter();\n\nconst isCalendarView = ref(true);\n\n// Sample data\nconst sampleData = ref([\n  {\n    id: 2,\n    title: 'Product A',\n    startDate: dayjs().add(1, 'days').toDate(),\n    endDate: dayjs().add(5, 'days').toDate(),\n    status: 'active'\n  },\n  {\n    id: 3,\n    title: 'Product B',\n    startDate: dayjs().subtract(1, 'days').toDate(),\n    endDate: dayjs().add(2, 'days').toDate(),\n    status: 'completed'\n  },\n  {\n    id: 4,\n    title: 'Product C',\n    startDate: dayjs().toDate(),\n    endDate: dayjs().add(4, 'days').toDate(),\n    status: 'canceled'\n  },\n  // Additional test data for hour view\n  {\n    id: 5,\n    title: 'Product D',\n    startDate: dayjs().add(2, 'days').add(8, 'hours').toDate(),\n    endDate: dayjs().add(2, 'days').add(16, 'hours').toDate(),\n    status: 'active'\n  },\n  {\n    id: 6,\n    title: 'Product E',\n    startDate: dayjs().add(1, 'days').add(14, 'hours').toDate(),\n    endDate: dayjs().add(2, 'days').add(10, 'hours').toDate(),\n    status: 'completed'\n  }\n])\n\n// Set initial date range - current month plus 15 days before and 45 days after\nconst view = ref('days')\nconst date = ref(new Date())\nconst loading = ref(false)\n\nconst dateRange = computed(() => {\n  const d = dayjs(date.value)\n  \n  switch (view.value) {\n    case 'hours':\n      return {\n        start: d.subtract(1, 'days').startOf('day').toDate(),\n        end: d.add(6, 'days').endOf('day').toDate()\n      }\n      \n    case 'days':\n      return {\n        start: d.startOf('month').toDate(),\n        end: d.endOf('month').toDate()\n      }\n      \n    case 'weeks':\n      return {\n        start: d.subtract(1, 'month').startOf('week').toDate(),\n        end: d.add(2, 'months').endOf('week').toDate()\n      }\n      \n    default:\n      return {\n        start: d.startOf('month').toDate(),\n        end: d.endOf('month').toDate()\n      }\n  }\n})\n\n// Handle load more\nconst handleLoadMore = async (direction) => {\n  console.log('Loading more:', direction)\n  \n  loading.value = true\n  \n  // Simulate API call\n  return new Promise((resolve) => {\n    setTimeout(() => {\n      // Add more items if needed\n      loading.value = false\n      resolve()\n    }, 1000)\n  })\n}\n\n// Handle item click\nconst handleItemClick = (item) => {\n  console.log('Item clicked:', item)\n}\n\n// Handle today\nconst handleToday = () => {\n  date.value = new Date()\n}\n\nconst today = new Date();\nconst calendarStartDate = ref(new Date(today));\ncalendarStartDate.value.setDate(today.getDate() - 30);\n\nconst calendarEndDate = ref(new Date(today));\ncalendarEndDate.value.setDate(today.getDate() + 30);\n\n// Toggle between calendar and list view\nconst toggleView = () => {\n  isCalendarView.value = !isCalendarView.value;\n};\n\n// Navigate to rent details page\nconst viewRentDetails = (rent) => {\n  router.push({ name: 'Rent Details', params: { _id: rent._id } });\n};\n\n// Load more data when scrolling the Gantt chart\nconst loadMoreData = async ({ direction, date }) => {\n  // alert(direction)\n  console.log('scroll direction is', direction)\n  console.log('current date is', date)\n  // Update the visible range\n  if (direction === 'forward') {\n    calendarEndDate.value = date;\n  } else {\n    calendarStartDate.value = date;\n  }\n  // Here you can add logic to fetch more rents if they fall within the new date range\n  try {\n    // You might need to adjust this depending on your API and data structure\n    const startDateParam = new Date(calendarStartDate.value);\n    startDateParam.setDate(startDateParam.getDate() - 30); // Fetch a bit more to cover edge cases\n    \n    const endDateParam = new Date(calendarEndDate.value);\n    endDateParam.setDate(endDateParam.getDate() + 30);\n    \n    await rents.actions.read({\n      owner: route.params._id,\n      startDate: startDateParam.toISOString(),\n      endDate: endDateParam.toISOString(),\n      ...(tab.value !== 'all' && { status: tab.value })\n    });\n  } catch (error) {\n    console.error('Error loading additional rent data:', error);\n  }\n};\n</script>\n\n<style lang=\"scss\">\n</style>\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"Rents.vue.js","sources":["../../../../../../../../src/modules/rents/views/components/pages/Rents.vue"],"sourcesContent":["<template>\n  <div class=\"pd-medium mobile:pd-thin bg-white\">\n    <header class=\"mn-b-medium flex-v-center flex-nowrap flex\">\n      <h2 class=\"mn-r-medium\">Rents</h2>\n      <button \n        @click=\"$router.push({ name: 'Organization_Create Rent', params: {_id: route.params._id}})\" \n        class=\"radius-100 i-big hover-scale-1 cursor-pointer t-white bg-second\"\n      >\n        +\n      </button>\n      <div class=\"mn-l-auto flex-v-center\">\n        <button \n          @click=\"toggleView\" \n          class=\"pd-small radius-small bg-light mn-r-small\"\n        >\n          {{ isCalendarView ? 'List View' : 'Calendar View' }}\n        </button>\n      </div>\n    </header>\n\n    <Feed\n      :search=\"true\"\n      :keepSlotVisible=\"true\"\n      :states=\"{\n        empty: {\n          title: 'No Rents Found',\n          description: 'Currently, there are no rents available.'\n        }\n      }\"\n      :store=\"{ read: (options) => rents.actions.read(options) }\"\n      :options=\"{\n        owner: route.params._id,\n        startDate: dateRange.start.toISOString(),\n        endDate: dateRange.end.toISOString()\n      }\"\n      v-slot=\"{ items }\"\n    > \n      <GanttChart\n        v-model:view=\"view\"\n        v-model:date=\"date\"\n        v-model:dateRange=\"dateRange\"\n        :items=\"items\"\n        :loading=\"loading\"\n        :title-key=\"'productDetails.name'\"\n        :start-key=\"'startDate'\"\n        :end-key=\"'endDate'\"\n        :status-key=\"'status'\"\n        :id-key=\"'_id'\"\n        :group-by=\"'productDetails.name'\"\n        @load-more=\"handleLoadMore\"\n        @item-click=\"handleItemClick\"\n        @today=\"handleToday\"\n      />\n\n     <!--  <CardRent\n        v-else\n        v-for=\"rent in items\"\n        :key=\"rent._id\"\n        :rent=\"rent\"\n        class=\"bg-light pd-small mn-b-thin radius-small\"\n      /> -->\n    </Feed>\n  </div>\n</template>\n\n<script setup>\nimport dayjs from 'dayjs'\n\nimport Tab from '@martyrs/src/components/Tab/Tab.vue';\nimport Feed from '@martyrs/src/components/Feed/Feed.vue';\n\nimport CardRent from '@martyrs/src/modules/rents/views/components/blocks/CardRent.vue';\n\nimport GanttChart from '@martyrs/src/modules/rents/views/components/pages/Gant/GanttChart.vue';\n\nimport { computed, onMounted, ref, watch } from 'vue';\nimport { useRoute, useRouter } from 'vue-router';\n\nimport * as rents from '@martyrs/src/modules/rents/views/store/rents.store';\n\nconst route = useRoute();\nconst router = useRouter();\n\nconst isCalendarView = ref(true);\n\n\n// Set initial date range - current month plus 15 days before and 45 days after\nconst view = ref('days')\nconst date = ref(new Date())\nconst loading = ref(false)\n\nconst dateRange = computed(() => {\n  const d = dayjs(date.value)\n  \n  switch (view.value) {\n    case 'hours':\n      // Show only the current day in hours view\n      return {\n        start: d.startOf('day').toDate(),\n        end: d.endOf('day').toDate()\n      }\n      \n    case 'days':\n      return {\n        start: d.startOf('month').toDate(),\n        end: d.endOf('month').toDate()\n      }\n      \n    case 'weeks':\n      return {\n        start: d.subtract(1, 'month').startOf('week').toDate(),\n        end: d.add(2, 'months').endOf('week').toDate()\n      }\n      \n    default:\n      return {\n        start: d.startOf('month').toDate(),\n        end: d.endOf('month').toDate()\n      }\n  }\n})\n\n// Handle load more\nconst handleLoadMore = async (direction) => {\n  console.log('Loading more:', direction)\n  \n  loading.value = true\n  \n  try {\n    // Only update date if it's navigation (not refresh)\n    if (direction !== 'refresh') {\n      const d = dayjs(date.value)\n      let newDate\n      \n      switch (view.value) {\n        case 'hours':\n          newDate = direction === 'forward' \n            ? d.add(1, 'day').toDate()\n            : d.subtract(1, 'day').toDate()\n          break\n        case 'days':\n          newDate = direction === 'forward'\n            ? d.add(1, 'month').toDate()\n            : d.subtract(1, 'month').toDate()\n          break\n        case 'weeks':\n          newDate = direction === 'forward'\n            ? d.add(1, 'month').toDate()\n            : d.subtract(1, 'month').toDate()\n          break\n      }\n      \n      date.value = newDate\n    }\n    \n    // Load data for the current date range\n    await rents.actions.read({\n      owner: route.params._id,\n      startDate: dateRange.value.start.toISOString(),\n      endDate: dateRange.value.end.toISOString()\n    })\n  } catch (error) {\n    console.error('Error loading more data:', error)\n  } finally {\n    loading.value = false\n  }\n}\n\n// Handle item click\nconst handleItemClick = (item) => {\n  console.log('Item clicked:', item)\n}\n\n// Handle today\nconst handleToday = () => {\n  const now = new Date()\n  date.value = now\n  \n  // For hours view, ensure we're showing the current hour\n  if (view.value === 'hours') {\n    // Update date to current time to trigger proper centering\n    date.value = new Date()\n  }\n}\n\nconst today = new Date();\nconst calendarStartDate = ref(new Date(today));\ncalendarStartDate.value.setDate(today.getDate() - 30);\n\nconst calendarEndDate = ref(new Date(today));\ncalendarEndDate.value.setDate(today.getDate() + 30);\n\n// Toggle between calendar and list view\nconst toggleView = () => {\n  isCalendarView.value = !isCalendarView.value;\n};\n\n// Navigate to rent details page\nconst viewRentDetails = (rent) => {\n  router.push({ name: 'Rent Details', params: { _id: rent._id } });\n};\n\n// Load more data when scrolling the Gantt chart\nconst loadMoreData = async ({ direction, date }) => {\n  // alert(direction)\n  console.log('scroll direction is', direction)\n  console.log('current date is', date)\n  // Update the visible range\n  if (direction === 'forward') {\n    calendarEndDate.value = date;\n  } else {\n    calendarStartDate.value = date;\n  }\n  // Here you can add logic to fetch more rents if they fall within the new date range\n  try {\n    // You might need to adjust this depending on your API and data structure\n    const startDateParam = new Date(calendarStartDate.value);\n    startDateParam.setDate(startDateParam.getDate() - 30); // Fetch a bit more to cover edge cases\n    \n    const endDateParam = new Date(calendarEndDate.value);\n    endDateParam.setDate(endDateParam.getDate() + 30);\n    \n    await rents.actions.read({\n      owner: route.params._id,\n      startDate: startDateParam.toISOString(),\n      endDate: endDateParam.toISOString()\n    });\n  } catch (error) {\n    console.error('Error loading additional rent data:', error);\n  }\n};\n</script>\n\n<style lang=\"scss\">\n</style>\n"],"names":["rents.actions"],"mappings":"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"}

package/dist/martyrs/src/modules/rents/views/components/pages/RentsEdit.vue.cjs

@@ -2,7 +2,7 @@
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
 const vue = require("vue");
 const Block = require("../../../../../components/Block/Block.vue.cjs");
-const Field = require("../../../../../components/Field/Field.vue2.cjs");
+const Field = require("../../../../../components/Field/Field.vue.cjs");
 const Feed = require("../../../../../components/Feed/Feed.vue.cjs");
 const Popup = require("../../../../../components/Popup/Popup.vue.cjs");
 require("../../../../globals/views/store/globals.cjs");

package/dist/martyrs/src/modules/rents/views/components/pages/RentsEdit.vue.js

@@ -1,6 +1,6 @@
 import { ref, computed, onMounted, createElementBlock, openBlock, createElementVNode, createVNode, toDisplayString, unref, withCtx, Fragment, renderList, createBlock, createCommentVNode } from "vue";
 import _sfc_main$4 from "../../../../../components/Block/Block.vue.js";
-import Field from "../../../../../components/Field/Field.vue2.js";
+import Field from "../../../../../components/Field/Field.vue.js";
 import _sfc_main$2 from "../../../../../components/Feed/Feed.vue.js";
 import _sfc_main$1 from "../../../../../components/Popup/Popup.vue.js";
 import "../../../../globals/views/store/globals.js";

package/dist/martyrs/src/modules/spots/components/blocks/SpotMemberModify.vue.cjs

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
 const vue = require("vue");
-;/* empty css                                       */
+;/* empty css                                        */
 const _pluginVue_exportHelper = require("../../../../../../_virtual/_plugin-vue_export-helper.cjs");
 ;/* empty css                                         */
 ;/* empty css                        */

package/dist/martyrs/src/modules/spots/components/blocks/SpotMemberModify.vue.js

@@ -1,5 +1,5 @@
 import { ref, computed, resolveComponent, createElementBlock, openBlock, createElementVNode, createCommentVNode, createBlock, toDisplayString } from "vue";
-/* empty css                                     */
+/* empty css                                      */
 import _export_sfc from "../../../../../../_virtual/_plugin-vue_export-helper.js";
 /* empty css                                       */
 /* empty css                      */

package/dist/martyrs/src/modules/spots/components/layouts/Spots.vue.cjs

@@ -4,7 +4,7 @@ const vue = require("vue");
 const vueRouter = require("vue-router");
 const vueI18n = require("vue-i18n");
 ;/* empty css                                           */
-;/* empty css                                       */
+;/* empty css                                        */
 ;/* empty css                                                   */
 ;/* empty css                                              */
 const globals = require("../../../globals/views/store/globals.cjs");

package/dist/martyrs/src/modules/spots/components/layouts/Spots.vue.js

@@ -2,7 +2,7 @@ import { ref, onMounted, watch, resolveComponent, createElementBlock, openBlock,
 import { useRoute, useRouter } from "vue-router";
 import { useI18n } from "vue-i18n";
 /* empty css                                         */
-/* empty css                                     */
+/* empty css                                      */
 /* empty css                                                 */
 /* empty css                                            */
 import { state as state$1 } from "../../../globals/views/store/globals.js";

package/dist/martyrs/src/modules/spots/components/pages/SpotEdit.vue.cjs

@@ -5,7 +5,7 @@ const vueRouter = require("vue-router");
 const Block = require("../../../../components/Block/Block.vue.cjs");
 const UploadImage = require("../../../../components/UploadImage/UploadImage.vue.cjs");
 ;/* empty css                                   */
-const Field = require("../../../../components/Field/Field.vue2.cjs");
+const Field = require("../../../../components/Field/Field.vue.cjs");
 const Select = require("../../../../components/Select/Select.vue2.cjs");
 const Checkbox = require("../../../../components/Checkbox/Checkbox.vue.cjs");
 const Address = require("../../../../components/Address/Address.vue2.cjs");

package/dist/martyrs/src/modules/spots/components/pages/SpotEdit.vue.js

@@ -3,7 +3,7 @@ import { useRouter, useRoute } from "vue-router";
 import _sfc_main$1 from "../../../../components/Block/Block.vue.js";
 import _sfc_main$3 from "../../../../components/UploadImage/UploadImage.vue.js";
 /* empty css                                 */
-import Field from "../../../../components/Field/Field.vue2.js";
+import Field from "../../../../components/Field/Field.vue.js";
 import Select from "../../../../components/Select/Select.vue2.js";
 import _sfc_main$4 from "../../../../components/Checkbox/Checkbox.vue.js";
 import _sfc_main$5 from "../../../../components/Address/Address.vue2.js";

package/dist/martyrs/src/modules/spots/components/sections/WorktimeEdit.vue.cjs

@@ -3,7 +3,7 @@ Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toString
 const vue = require("vue");
 const vueI18n = require("vue-i18n");
 const Button = require("../../../../components/Button/Button.vue.cjs");
-const Field = require("../../../../components/Field/Field.vue2.cjs");
+const Field = require("../../../../components/Field/Field.vue.cjs");
 const Select = require("../../../../components/Select/Select.vue2.cjs");
 const Checkbox = require("../../../../components/Checkbox/Checkbox.vue.cjs");
 const Popup = require("../../../../components/Popup/Popup.vue.cjs");

package/dist/martyrs/src/modules/spots/components/sections/WorktimeEdit.vue.js

@@ -1,7 +1,7 @@
 import { mergeModels, useModel, ref, computed, onMounted, createElementBlock, openBlock, createElementVNode, createVNode, toDisplayString, unref, withCtx, createTextVNode, Fragment, renderList, normalizeClass, createCommentVNode, createBlock } from "vue";
 import { useI18n } from "vue-i18n";
 import _sfc_main$1 from "../../../../components/Button/Button.vue.js";
-import Field from "../../../../components/Field/Field.vue2.js";
+import Field from "../../../../components/Field/Field.vue.js";
 import Select from "../../../../components/Select/Select.vue2.js";
 import _sfc_main$3 from "../../../../components/Checkbox/Checkbox.vue.js";
 import _sfc_main$2 from "../../../../components/Popup/Popup.vue.js";

package/dist/martyrs/src/modules/wallet/views/components/blocks/CardDeposit.vue.cjs

@@ -2,7 +2,7 @@
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
 const vue = require("vue");
 const wallet = require("../../localization/wallet.json.cjs");
-const Field = require("../../../../../components/Field/Field.vue2.cjs");
+const Field = require("../../../../../components/Field/Field.vue.cjs");
 const vueI18n = require("vue-i18n");
 const _hoisted_1 = { class: "bg-grey radius-big mn-t-semi mn-b-semi flex flex-justify-between" };
 const _sfc_main = {

package/dist/martyrs/src/modules/wallet/views/components/blocks/CardDeposit.vue.js

@@ -1,6 +1,6 @@
 import { createElementBlock, openBlock, Fragment, createElementVNode, createVNode, unref, toDisplayString } from "vue";
 import text from "../../localization/wallet.json.js";
-import Field from "../../../../../components/Field/Field.vue2.js";
+import Field from "../../../../../components/Field/Field.vue.js";
 import { useI18n } from "vue-i18n";
 const _hoisted_1 = { class: "bg-grey radius-big mn-t-semi mn-b-semi flex flex-justify-between" };
 const _sfc_main = {

package/dist/martyrs/src/modules/wallet/views/components/blocks/CryptoDeposit.vue.cjs

@@ -5,7 +5,7 @@ const vueI18n = require("vue-i18n");
 const bignumber = require("../../../../../../node_modules/.pnpm/bignumber.js@9.2.1/node_modules/bignumber.js/bignumber.cjs");
 const wallet_store = require("../../store/wallet.store.cjs");
 const wallet = require("../../localization/wallet.json.cjs");
-const Field = require("../../../../../components/Field/Field.vue2.cjs");
+const Field = require("../../../../../components/Field/Field.vue.cjs");
 const Select = require("../../../../../components/Select/Select.vue2.cjs");
 const _hoisted_1 = { class: "mn-b-small t-center t-bold" };
 const _hoisted_2 = { class: "t-semi" };

package/dist/martyrs/src/modules/wallet/views/components/blocks/CryptoDeposit.vue.js

@@ -3,7 +3,7 @@ import { useI18n } from "vue-i18n";
 import { BigNumber } from "../../../../../../node_modules/.pnpm/bignumber.js@9.2.1/node_modules/bignumber.js/bignumber.js";
 import { state, actions } from "../../store/wallet.store.js";
 import text from "../../localization/wallet.json.js";
-import Field from "../../../../../components/Field/Field.vue2.js";
+import Field from "../../../../../components/Field/Field.vue.js";
 import Select from "../../../../../components/Select/Select.vue2.js";
 const _hoisted_1 = { class: "mn-b-small t-center t-bold" };
 const _hoisted_2 = { class: "t-semi" };

package/dist/martyrs.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const a=require("./main-MzmGbSxs.cjs");exports.Address=a._sfc_main;exports.Breadcrumbs=a._sfc_main$1;exports.Button=a._sfc_main$2;exports.Calendar=a.Calendar;exports.Carousel=a.Carousel;exports.Checkbox=a._sfc_main$3;exports.Chips=a._sfc_main$4;exports.Countdown=a._sfc_main$5;exports.DatePicker=a._sfc_main$6;exports.Dropdown=a._sfc_main$7;exports.EmptyState=a._sfc_main$8;exports.Error=a._sfc_main$9;exports.Feed=a._sfc_main$10;exports.Field=a.Field;exports.FieldBig=a._sfc_main$11;exports.FieldPhone=a._sfc_main$12;exports.FieldTags=a._sfc_main$13;exports.Loader=a.Loader;exports.LocationMarker=a._sfc_main$14;exports.Map=a.Map;exports.Marquee=a._sfc_main$15;exports.Media=a.Media;exports.Menu=a._sfc_main$16;exports.MenuItem=a._sfc_main$17;exports.Popup=a._sfc_main$18;exports.Radio=a._sfc_main$19;exports.Select=a.Select;exports.SelectMulti=a._sfc_main$20;exports.Shader=a.Shader;exports.Slider=a._sfc_main$21;exports.Spoiler=a._sfc_main$22;exports.Status=a._sfc_main$23;exports.Tab=a._sfc_main$24;exports.Text=a._sfc_main$25;exports.Tooltip=a._sfc_main$26;exports.Upload=a.Upload;exports.UploadImage=a._sfc_main$27;exports.UploadImageMultiple=a._sfc_main$28;exports.default=a.main;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const a=require("./main-DTaE01lg.cjs");exports.Address=a._sfc_main;exports.Breadcrumbs=a._sfc_main$1;exports.Button=a._sfc_main$2;exports.Calendar=a.Calendar;exports.Carousel=a.Carousel;exports.Checkbox=a._sfc_main$3;exports.Chips=a._sfc_main$4;exports.Countdown=a._sfc_main$5;exports.DatePicker=a._sfc_main$6;exports.Dropdown=a._sfc_main$7;exports.EmptyState=a._sfc_main$8;exports.Error=a._sfc_main$9;exports.Feed=a._sfc_main$10;exports.Field=a.Field;exports.FieldBig=a._sfc_main$11;exports.FieldPhone=a._sfc_main$12;exports.FieldTags=a._sfc_main$13;exports.Loader=a.Loader;exports.LocationMarker=a._sfc_main$14;exports.Map=a.Map;exports.Marquee=a._sfc_main$15;exports.Media=a.Media;exports.Menu=a._sfc_main$16;exports.MenuItem=a._sfc_main$17;exports.Popup=a._sfc_main$18;exports.Radio=a._sfc_main$19;exports.Select=a.Select;exports.SelectMulti=a._sfc_main$20;exports.Shader=a.Shader;exports.Slider=a._sfc_main$21;exports.Spoiler=a._sfc_main$22;exports.Status=a._sfc_main$23;exports.Tab=a._sfc_main$24;exports.Text=a._sfc_main$25;exports.Tooltip=a._sfc_main$26;exports.Upload=a.Upload;exports.UploadImage=a._sfc_main$27;exports.UploadImageMultiple=a._sfc_main$28;exports.default=a.main;