@ozdao/martyrs 0.2.485 → 0.2.487

package/dist/martyrs/src/modules/icons/pages/IconsPage.vue.cjs

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
 const vue = require("vue");
+const IconSearchPopup = require("../components/IconSearchPopup.vue.cjs");
 const IconInfo$1 = require("../navigation/IconInfo.vue.cjs");
 const IconMinus = require("../navigation/IconMinus.vue.cjs");
 const IconEllipsis = require("../navigation/IconEllipsis.vue.cjs");
@@ -57,6 +58,9 @@ const IconFeatured = require("../entities/IconFeatured.vue.cjs");
 const IconLeftovers = require("../entities/IconLeftovers.vue.cjs");
 const IconOrders = require("../entities/IconOrders.vue.cjs");
 const IconMusic = require("../entities/IconMusic.vue.cjs");
+const IconPhone = require("../entities/IconPhone.vue.cjs");
+const IconEmail = require("../entities/IconEmail.vue.cjs");
+const IconAddress = require("../entities/IconAddress.vue.cjs");
 const IconProfile = require("../entities/IconProfile.vue.cjs");
 const IconGroups = require("../entities/IconGroups.vue.cjs");
 const PlaceholderOrganizationPic = require("../placeholders/PlaceholderOrganizationPic.vue.cjs");
@@ -94,7 +98,8 @@ const _hoisted_7 = {
   key: 0,
   class: "pd-thin bg-black radius-small t-small t-white pos-absolute pos-t-0 pos-r-0 mn-t-thin mn-r-thin"
 };
-const _hoisted_8 = {
+const _hoisted_8 = ["onClick"];
+const _hoisted_9 = {
   key: 0,
   class: "notification bg-third pd-small radius-medium pos-fixed pos-b-0 pos-r-0 mn-b-large mn-r-large"
 };
@@ -153,6 +158,9 @@ const _sfc_main = {
         IconRecent: IconRecent.default,
         IconList: IconList.default,
         IconSettings: IconSettings.default,
+        IconPhone: IconPhone.default,
+        IconEmail: IconEmail.default,
+        IconAddress: IconAddress.default,
         IconEarn: IconEarn.default,
         IconPopular: IconPopular.default,
         IconDiscount: IconDiscount.default,
@@ -205,6 +213,9 @@ const _sfc_main = {
     const copiedIcon = vue.ref("");
     const displayNotification = vue.ref(false);
     const notificationMessage = vue.ref("");
+    const showSearchPopup = vue.ref(false);
+    const popupMode = vue.ref("add");
+    const currentIconForReplace = vue.ref(null);
     vue.onMounted(() => {
       loadIcons();
     });
@@ -233,9 +244,37 @@ const _sfc_main = {
         }, 2e3);
       }, 1e3);
     }
+    function openAddIconPopup() {
+      popupMode.value = "add";
+      currentIconForReplace.value = null;
+      showSearchPopup.value = true;
+    }
+    function openReplaceIconPopup(icon, categoryName) {
+      popupMode.value = "replace";
+      currentIconForReplace.value = {
+        name: icon.name,
+        category: categoryName,
+        component: icon.component
+      };
+      showSearchPopup.value = true;
+    }
+    function handleIconSelected(data) {
+      loadIcons();
+      notificationMessage.value = data.mode === "add" ? `Added new icon: ${data.icon.name}` : `Replaced icon: ${data.icon.name}`;
+      displayNotification.value = true;
+      setTimeout(() => {
+        displayNotification.value = false;
+      }, 3e3);
+    }
     return (_ctx, _cache) => {
       return vue.openBlock(), vue.createElementBlock("div", _hoisted_1, [
-        _cache[0] || (_cache[0] = vue.createElementVNode("h2", { class: "mn-b-medium" }, "Martyrs Icons Gallery", -1)),
+        vue.createElementVNode("div", { class: "flex-between mn-b-medium" }, [
+          _cache[1] || (_cache[1] = vue.createElementVNode("h2", null, "Martyrs Icons Gallery", -1)),
+          vue.createElementVNode("button", {
+            onClick: openAddIconPopup,
+            class: "pd-small pd-h-medium bg-primary t-white radius-medium hover-scale-1 cursor-pointer border-none"
+          }, " Add New Icon ")
+        ]),
         (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(categories.value, (category, index) => {
           return vue.openBlock(), vue.createElementBlock("div", {
             key: index,
@@ -246,24 +285,41 @@ const _sfc_main = {
               (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(category.icons, (icon, iconIndex) => {
                 return vue.openBlock(), vue.createElementBlock("div", {
                   key: iconIndex,
-                  class: "aspect-1x1 bg-light radius-medium flex-center flex-v-center flex-column flex hover-scale-1 cursor-pointer",
+                  class: "icon-card aspect-1x1 bg-light radius-medium flex-center flex-v-center flex-column flex hover-scale-1 cursor-pointer pos-relative",
                   onClick: ($event) => copyIconName(icon.name, category.name)
                 }, [
                   vue.createElementVNode("div", _hoisted_5, [
                     (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(icon.component), { class: "w-2r h-2r" }))
                   ]),
                   vue.createElementVNode("div", _hoisted_6, vue.toDisplayString(icon.name), 1),
-                  copiedIcon.value === icon.name ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_7, " Copied! ")) : vue.createCommentVNode("", true)
+                  copiedIcon.value === icon.name ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_7, " Copied! ")) : vue.createCommentVNode("", true),
+                  vue.createElementVNode("button", {
+                    onClick: vue.withModifiers(($event) => openReplaceIconPopup(icon, category.name), ["stop"]),
+                    class: "replace-btn pos-absolute pos-t-0 pos-r-0 mn-t-thin mn-r-thin pd-micro bg-second radius-small hover-scale-1 cursor-pointer border-none",
+                    title: "Replace icon"
+                  }, [
+                    vue.createVNode(IconRefresh.default, {
+                      class: "w-1r h-1r",
+                      fill: "rgb(var(--white))"
+                    })
+                  ], 8, _hoisted_8)
                 ], 8, _hoisted_4);
               }), 128))
             ])
           ]);
         }), 128)),
-        displayNotification.value ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_8, vue.toDisplayString(notificationMessage.value), 1)) : vue.createCommentVNode("", true)
+        displayNotification.value ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_9, vue.toDisplayString(notificationMessage.value), 1)) : vue.createCommentVNode("", true),
+        vue.createVNode(IconSearchPopup.default, {
+          isOpen: showSearchPopup.value,
+          mode: popupMode.value,
+          currentIcon: currentIconForReplace.value,
+          onClose: _cache[0] || (_cache[0] = ($event) => showSearchPopup.value = false),
+          onIconSelected: handleIconSelected
+        }, null, 8, ["isOpen", "mode", "currentIcon"])
       ]);
     };
   }
 };
-const IconsPage = /* @__PURE__ */ _pluginVue_exportHelper.default(_sfc_main, [["__scopeId", "data-v-e6d7e69a"]]);
+const IconsPage = /* @__PURE__ */ _pluginVue_exportHelper.default(_sfc_main, [["__scopeId", "data-v-f4b85646"]]);
 exports.default = IconsPage;
 //# sourceMappingURL=IconsPage.vue.cjs.map

package/dist/martyrs/src/modules/icons/pages/IconsPage.vue.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"IconsPage.vue.cjs","sources":["../../../../../../src/modules/icons/pages/IconsPage.vue"],"sourcesContent":["<template>\n  <div class=\"pd-medium\">\n    <h2 class=\"mn-b-medium\">Martyrs Icons Gallery</h2>\n    \n    <div v-for=\"(category, index) in categories\" :key=\"index\" class=\"mn-b-large\">\n      <h3 class=\"mn-b-medium t-medium\">{{ formatCategoryName(category.name) }} ({{ category.icons.length }})</h3>\n      <div class=\"cols-6 gap-thin\">\n        <div \n          v-for=\"(icon, iconIndex) in category.icons\" \n          :key=\"iconIndex\" \n          class=\"aspect-1x1 bg-light radius-medium flex-center flex-v-center flex-column flex hover-scale-1 cursor-pointer\"\n          @click=\"copyIconName(icon.name, category.name)\"\n        >\n          <div class=\"flex-center flex h-60\">\n            <component :is=\"icon.component\" class=\"w-2r h-2r\" />\n          </div>\n          <div class=\"pd-t-thin pd-b-thin t-center t-small t-truncate\">\n            {{ icon.name }}\n          </div>\n          <div v-if=\"copiedIcon === icon.name\" class=\"pd-thin bg-black radius-small t-small t-white pos-absolute pos-t-0 pos-r-0 mn-t-thin mn-r-thin\">\n            Copied!\n          </div>\n        </div>\n      </div>\n    </div>\n\n    <div v-if=\"displayNotification\" class=\"notification bg-third pd-small radius-medium pos-fixed pos-b-0 pos-r-0 mn-b-large mn-r-large\">\n      {{ notificationMessage }}\n    </div>\n  </div>\n</template>\n\n<script setup>\nimport { ref, onMounted } from 'vue';\n\n// Import navigation icons\nimport IconInfo from '@martyrs/src/modules/icons/navigation/IconInfo.vue';\nimport IconMinus from '@martyrs/src/modules/icons/navigation/IconMinus.vue';\nimport IconEllipsis from '@martyrs/src/modules/icons/navigation/IconEllipsis.vue';\nimport IconPlus from '@martyrs/src/modules/icons/navigation/IconPlus.vue';\nimport IconHeart from '@martyrs/src/modules/icons/navigation/IconHeart.vue';\nimport IconCheckmark from '@martyrs/src/modules/icons/navigation/IconCheckmark.vue';\nimport IconPause from '@martyrs/src/modules/icons/navigation/IconPause.vue';\nimport IconAdd from '@martyrs/src/modules/icons/navigation/IconAdd.vue';\nimport IconVolume from '@martyrs/src/modules/icons/navigation/IconVolume.vue';\nimport IconUnMute from '@martyrs/src/modules/icons/navigation/IconUnMute.vue';\nimport IconCross from '@martyrs/src/modules/icons/navigation/IconCross.vue';\nimport IconDoubleCheck from '@martyrs/src/modules/icons/navigation/IconDoubleCheck.vue';\nimport IconSearch from '@martyrs/src/modules/icons/navigation/IconSearch.vue';\nimport IconChevronRight from '@martyrs/src/modules/icons/navigation/IconChevronRight.vue';\nimport IconLike from '@martyrs/src/modules/icons/navigation/IconLike.vue';\nimport IconDelete from '@martyrs/src/modules/icons/navigation/IconDelete.vue';\nimport IconCheck from '@martyrs/src/modules/icons/navigation/IconCheck.vue';\nimport IconFilter from '@martyrs/src/modules/icons/navigation/IconFilter.vue';\nimport IconAttach from '@martyrs/src/modules/icons/navigation/IconAttach.vue';\nimport IconRefresh from '@martyrs/src/modules/icons/navigation/IconRefresh.vue';\nimport IconUpload from '@martyrs/src/modules/icons/navigation/IconUpload.vue';\nimport IconSort from '@martyrs/src/modules/icons/navigation/IconSort.vue';\nimport IconChevronBottom from '@martyrs/src/modules/icons/navigation/IconChevronBottom.vue';\nimport IconChevronLeft from '@martyrs/src/modules/icons/navigation/IconChevronLeft.vue';\nimport IconEdit from '@martyrs/src/modules/icons/navigation/IconEdit.vue';\nimport IconMute from '@martyrs/src/modules/icons/navigation/IconMute.vue';\nimport IconSend from '@martyrs/src/modules/icons/navigation/IconSend.vue';\nimport IconArrow from '@martyrs/src/modules/icons/navigation/IconArrow.vue';\nimport IconPlay from '@martyrs/src/modules/icons/navigation/IconPlay.vue';\nimport IconShuffle from '@martyrs/src/modules/icons/navigation/IconShuffle.vue';\n\n// Import entities icons\nimport IconInfoEntities from '@martyrs/src/modules/icons/entities/IconInfo.vue';\nimport IconPrice from '@martyrs/src/modules/icons/entities/IconPrice.vue';\nimport IconCalendar from '@martyrs/src/modules/icons/entities/IconCalendar.vue';\nimport IconPayments from '@martyrs/src/modules/icons/entities/IconPayments.vue';\nimport IconBell from '@martyrs/src/modules/icons/entities/IconBell.vue';\nimport IconTime from '@martyrs/src/modules/icons/entities/IconTime.vue';\nimport IconCommunity from '@martyrs/src/modules/icons/entities/IconCommunity.vue';\nimport IconGallery from '@martyrs/src/modules/icons/entities/IconGallery.vue';\nimport IconFile from '@martyrs/src/modules/icons/entities/IconFile.vue';\nimport IconFollowing from '@martyrs/src/modules/icons/entities/IconFollowing.vue';\nimport IconEvents from '@martyrs/src/modules/icons/entities/IconEvents.vue';\nimport IconHome from '@martyrs/src/modules/icons/entities/IconHome.vue';\nimport IconProducts from '@martyrs/src/modules/icons/entities/IconProducts.vue';\nimport IconCatalog from '@martyrs/src/modules/icons/entities/IconCatalog.vue';\nimport IconShopcart from '@martyrs/src/modules/icons/entities/IconShopcart.vue';\nimport IconRecent from '@martyrs/src/modules/icons/entities/IconRecent.vue';\nimport IconList from '@martyrs/src/modules/icons/entities/IconList.vue';\nimport IconSettings from '@martyrs/src/modules/icons/entities/IconSettings.vue';\nimport IconEarn from '@martyrs/src/modules/icons/entities/IconEarn.vue';\nimport IconPopular from '@martyrs/src/modules/icons/entities/IconPopular.vue';\nimport IconDiscount from '@martyrs/src/modules/icons/entities/IconDiscount.vue';\nimport IconDate from '@martyrs/src/modules/icons/entities/IconDate.vue';\nimport IconFeatured from '@martyrs/src/modules/icons/entities/IconFeatured.vue';\nimport IconLeftovers from '@martyrs/src/modules/icons/entities/IconLeftovers.vue';\nimport IconOrders from '@martyrs/src/modules/icons/entities/IconOrders.vue';\nimport IconMusic from '@martyrs/src/modules/icons/entities/IconMusic.vue';\nimport IconProfile from '@martyrs/src/modules/icons/entities/IconProfile.vue';\nimport IconGroups from '@martyrs/src/modules/icons/entities/IconGroups.vue';\n\n// Import placeholders icons\nimport PlaceholderOrganizationPic from '@martyrs/src/modules/icons/placeholders/PlaceholderOrganizationPic.vue';\nimport PlaceholderChat from '@martyrs/src/modules/icons/placeholders/PlaceholderChat.vue';\nimport PlaceholderImage from '@martyrs/src/modules/icons/placeholders/PlaceholderImage.vue';\nimport PlaceholderUserpic from '@martyrs/src/modules/icons/placeholders/PlaceholderUserpic.vue';\n\n// Import socials icons\nimport Vk from '@martyrs/src/modules/icons/socials/vk.vue';\nimport Instagram from '@martyrs/src/modules/icons/socials/instagram.vue';\nimport Telegram from '@martyrs/src/modules/icons/socials/telegram.vue';\nimport Twitter from '@martyrs/src/modules/icons/socials/twitter.vue';\nimport Linkedin from '@martyrs/src/modules/icons/socials/linkedin.vue';\nimport Reddit from '@martyrs/src/modules/icons/socials/reddit.vue';\nimport Dribbble from '@martyrs/src/modules/icons/socials/dribbble.vue';\nimport Facebook from '@martyrs/src/modules/icons/socials/facebook.vue';\nimport Youtube from '@martyrs/src/modules/icons/socials/youtube.vue';\nimport Line from '@martyrs/src/modules/icons/socials/line.vue';\n\n// Import actions icons\nimport IconDuplicate from '@martyrs/src/modules/icons/actions/IconDuplicate.vue';\nimport IconShopcartAdd from '@martyrs/src/modules/icons/actions/IconShopcartAdd.vue';\nimport IconShow from '@martyrs/src/modules/icons/actions/IconShow.vue';\n\n// Import labels icons\nimport LabelGooglePlay from '@martyrs/src/modules/icons/labels/LabelGooglePlay.vue';\nimport LabelAppStore from '@martyrs/src/modules/icons/labels/LabelAppStore.vue';\n\n// Import logos icons\nimport Logotype from '@martyrs/src/modules/icons/logos/Logotype.vue';\n\n// Import skeletons icons\nimport SkeletonEventShort from '@martyrs/src/modules/icons/skeletons/SkeletonEventShort.vue';\nimport SkeletonBlogpost from '@martyrs/src/modules/icons/skeletons/SkeletonBlogpost.vue';\nimport SkeletonOrganization from '@martyrs/src/modules/icons/skeletons/SkeletonOrganization.vue';\nimport SkeletonEvent from '@martyrs/src/modules/icons/skeletons/SkeletonEvent.vue';\n\n// Icons map to avoid duplication\nconst iconsMap = {\n  navigation: {\n    IconInfo,\n    IconMinus,\n    IconEllipsis,\n    IconPlus,\n    IconHeart,\n    IconCheckmark,\n    IconPause,\n    IconAdd,\n    IconVolume,\n    IconUnMute,\n    IconCross,\n    IconDoubleCheck,\n    IconSearch,\n    IconChevronRight,\n    IconLike,\n    IconDelete,\n    IconCheck,\n    IconFilter,\n    IconAttach,\n    IconRefresh,\n    IconUpload,\n    IconSort,\n    IconChevronBottom,\n    IconChevronLeft,\n    IconEdit,\n    IconMute,\n    IconSend,\n    IconArrow,\n    IconPlay,\n    IconShuffle\n  },\n  entities: {\n    IconInfo: IconInfoEntities,\n    IconPrice,\n    IconCalendar,\n    IconPayments,\n    IconBell,\n    IconTime,\n    IconCommunity,\n    IconGallery,\n    IconFile,\n    IconFollowing,\n    IconEvents,\n    IconHome,\n    IconProducts,\n    IconCatalog,\n    IconShopcart,\n    IconRecent,\n    IconList,\n    IconSettings,\n    IconEarn,\n    IconPopular,\n    IconDiscount,\n    IconDate,\n    IconFeatured,\n    IconLeftovers,\n    IconOrders,\n    IconMusic,\n    IconProfile,\n    IconGroups\n  },\n  placeholders: {\n    PlaceholderOrganizationPic,\n    PlaceholderChat,\n    PlaceholderImage,\n    PlaceholderUserpic\n  },\n  socials: {\n    vk: Vk,\n    instagram: Instagram,\n    telegram: Telegram,\n    twitter: Twitter,\n    linkedin: Linkedin,\n    reddit: Reddit,\n    dribbble: Dribbble,\n    facebook: Facebook,\n    youtube: Youtube,\n    line: Line\n  },\n  actions: {\n    IconDuplicate,\n    IconShopcartAdd,\n    IconShow\n  },\n  labels: {\n    LabelGooglePlay,\n    LabelAppStore\n  },\n  logos: {\n    Logotype\n  },\n  skeletons: {\n    SkeletonEventShort,\n    SkeletonBlogpost,\n    SkeletonOrganization,\n    SkeletonEvent\n  }\n};\n\nconst categories = ref([]);\nconst copiedIcon = ref('');\nconst displayNotification = ref(false);\nconst notificationMessage = ref('');\n\nonMounted(() => {\n  loadIcons();\n});\n\nfunction loadIcons() {\n  categories.value = Object.entries(iconsMap).map(([categoryName, icons]) => ({\n    name: categoryName,\n    icons: Object.entries(icons).map(([name, component]) => ({\n      name,\n      component\n    }))\n  }));\n}\n\nfunction formatCategoryName(name) {\n  return name.charAt(0).toUpperCase() + name.slice(1);\n}\n\nfunction copyIconName(iconName, categoryName) {\n  const importStatement = `import ${iconName} from '@martyrs/src/modules/icons/${categoryName}/${iconName}.vue';`;\n  navigator.clipboard.writeText(importStatement);\n  \n  copiedIcon.value = iconName;\n  notificationMessage.value = `Copied: ${importStatement}`;\n  displayNotification.value = true;\n  \n  setTimeout(() => {\n    copiedIcon.value = '';\n    setTimeout(() => {\n      displayNotification.value = false;\n    }, 2000);\n  }, 1000);\n}\n</script>\n\n<style scoped>\n.h-60 {\n  height: 60%;\n}\n\n.notification {\n  z-index: 100;\n  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);\n  transition: all 0.3s ease;\n  animation: fadeIn 0.3s;\n}\n\n@keyframes fadeIn {\n  from { opacity: 0; transform: translateY(20px); }\n  to { opacity: 1; transform: translateY(0); }\n}\n</style>"],"names":["IconInfo","IconMinus","IconEllipsis","IconPlus","IconHeart","IconCheckmark","IconPause","IconAdd","IconVolume","IconUnMute","IconCross","IconDoubleCheck","IconSearch","IconChevronRight","IconLike","IconDelete","IconCheck","IconFilter","IconAttach","IconRefresh","IconUpload","IconSort","IconChevronBottom","IconChevronLeft","IconEdit","IconMute","IconSend","IconArrow","IconPlay","IconShuffle","IconInfoEntities","IconPrice","IconCalendar","IconPayments","IconBell","IconTime","IconCommunity","IconGallery","IconFile","IconFollowing","IconEvents","IconHome","IconProducts","IconCatalog","IconShopcart","IconRecent","IconList","IconSettings","IconEarn","IconPopular","IconDiscount","IconDate","IconFeatured","IconLeftovers","IconOrders","IconMusic","IconProfile","IconGroups","PlaceholderOrganizationPic","PlaceholderChat","PlaceholderImage","PlaceholderUserpic","Vk","Instagram","Telegram","Twitter","Linkedin","Reddit","Dribbble","Facebook","Youtube","Line","IconDuplicate","IconShopcartAdd","IconShow","LabelGooglePlay","LabelAppStore","Logotype","SkeletonEventShort","SkeletonBlogpost","SkeletonOrganization","SkeletonEvent","ref","onMounted"],"mappings":"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"}
+{"version":3,"file":"IconsPage.vue.cjs","sources":["../../../../../../src/modules/icons/pages/IconsPage.vue"],"sourcesContent":["<template>\n  <div class=\"pd-medium\">\n    <div class=\"flex-between mn-b-medium\">\n      <h2>Martyrs Icons Gallery</h2>\n      <button @click=\"openAddIconPopup\" class=\"pd-small pd-h-medium bg-primary t-white radius-medium hover-scale-1 cursor-pointer border-none\">\n        Add New Icon\n      </button>\n    </div>\n    \n    <div v-for=\"(category, index) in categories\" :key=\"index\" class=\"mn-b-large\">\n      <h3 class=\"mn-b-medium t-medium\">{{ formatCategoryName(category.name) }} ({{ category.icons.length }})</h3>\n      <div class=\"cols-6 gap-thin\">\n        <div \n          v-for=\"(icon, iconIndex) in category.icons\" \n          :key=\"iconIndex\" \n          class=\"icon-card aspect-1x1 bg-light radius-medium flex-center flex-v-center flex-column flex hover-scale-1 cursor-pointer pos-relative\"\n          @click=\"copyIconName(icon.name, category.name)\"\n        >\n          <div class=\"flex-center flex h-60\">\n            <component :is=\"icon.component\" class=\"w-2r h-2r\" />\n          </div>\n          <div class=\"pd-t-thin pd-b-thin t-center t-small t-truncate\">\n            {{ icon.name }}\n          </div>\n          <div v-if=\"copiedIcon === icon.name\" class=\"pd-thin bg-black radius-small t-small t-white pos-absolute pos-t-0 pos-r-0 mn-t-thin mn-r-thin\">\n            Copied!\n          </div>\n          <button \n            @click.stop=\"openReplaceIconPopup(icon, category.name)\"\n            class=\"replace-btn pos-absolute pos-t-0 pos-r-0 mn-t-thin mn-r-thin pd-micro bg-second radius-small hover-scale-1 cursor-pointer border-none\"\n            title=\"Replace icon\"\n          >\n            <IconRefresh class=\"w-1r h-1r\" :fill=\"'rgb(var(--white))'\" />\n          </button>\n        </div>\n      </div>\n    </div>\n\n    <div v-if=\"displayNotification\" class=\"notification bg-third pd-small radius-medium pos-fixed pos-b-0 pos-r-0 mn-b-large mn-r-large\">\n      {{ notificationMessage }}\n    </div>\n\n    <IconSearchPopup \n      :isOpen=\"showSearchPopup\" \n      :mode=\"popupMode\"\n      :currentIcon=\"currentIconForReplace\"\n      @close=\"showSearchPopup = false\"\n      @icon-selected=\"handleIconSelected\"\n    />\n  </div>\n</template>\n\n<script setup>\nimport { ref, onMounted } from 'vue';\nimport IconSearchPopup from '../components/IconSearchPopup.vue';\n\n// Import navigation icons\nimport IconInfo from '@martyrs/src/modules/icons/navigation/IconInfo.vue';\nimport IconMinus from '@martyrs/src/modules/icons/navigation/IconMinus.vue';\nimport IconEllipsis from '@martyrs/src/modules/icons/navigation/IconEllipsis.vue';\nimport IconPlus from '@martyrs/src/modules/icons/navigation/IconPlus.vue';\nimport IconHeart from '@martyrs/src/modules/icons/navigation/IconHeart.vue';\nimport IconCheckmark from '@martyrs/src/modules/icons/navigation/IconCheckmark.vue';\nimport IconPause from '@martyrs/src/modules/icons/navigation/IconPause.vue';\nimport IconAdd from '@martyrs/src/modules/icons/navigation/IconAdd.vue';\nimport IconVolume from '@martyrs/src/modules/icons/navigation/IconVolume.vue';\nimport IconUnMute from '@martyrs/src/modules/icons/navigation/IconUnMute.vue';\nimport IconCross from '@martyrs/src/modules/icons/navigation/IconCross.vue';\nimport IconDoubleCheck from '@martyrs/src/modules/icons/navigation/IconDoubleCheck.vue';\nimport IconSearch from '@martyrs/src/modules/icons/navigation/IconSearch.vue';\nimport IconChevronRight from '@martyrs/src/modules/icons/navigation/IconChevronRight.vue';\nimport IconLike from '@martyrs/src/modules/icons/navigation/IconLike.vue';\nimport IconDelete from '@martyrs/src/modules/icons/navigation/IconDelete.vue';\nimport IconCheck from '@martyrs/src/modules/icons/navigation/IconCheck.vue';\nimport IconFilter from '@martyrs/src/modules/icons/navigation/IconFilter.vue';\nimport IconAttach from '@martyrs/src/modules/icons/navigation/IconAttach.vue';\nimport IconRefresh from '@martyrs/src/modules/icons/navigation/IconRefresh.vue';\nimport IconUpload from '@martyrs/src/modules/icons/navigation/IconUpload.vue';\nimport IconSort from '@martyrs/src/modules/icons/navigation/IconSort.vue';\nimport IconChevronBottom from '@martyrs/src/modules/icons/navigation/IconChevronBottom.vue';\nimport IconChevronLeft from '@martyrs/src/modules/icons/navigation/IconChevronLeft.vue';\nimport IconEdit from '@martyrs/src/modules/icons/navigation/IconEdit.vue';\nimport IconMute from '@martyrs/src/modules/icons/navigation/IconMute.vue';\nimport IconSend from '@martyrs/src/modules/icons/navigation/IconSend.vue';\nimport IconArrow from '@martyrs/src/modules/icons/navigation/IconArrow.vue';\nimport IconPlay from '@martyrs/src/modules/icons/navigation/IconPlay.vue';\nimport IconShuffle from '@martyrs/src/modules/icons/navigation/IconShuffle.vue';\n\n// Import entities icons\nimport IconInfoEntities from '@martyrs/src/modules/icons/entities/IconInfo.vue';\nimport IconPrice from '@martyrs/src/modules/icons/entities/IconPrice.vue';\nimport IconCalendar from '@martyrs/src/modules/icons/entities/IconCalendar.vue';\nimport IconPayments from '@martyrs/src/modules/icons/entities/IconPayments.vue';\nimport IconBell from '@martyrs/src/modules/icons/entities/IconBell.vue';\nimport IconTime from '@martyrs/src/modules/icons/entities/IconTime.vue';\nimport IconCommunity from '@martyrs/src/modules/icons/entities/IconCommunity.vue';\nimport IconGallery from '@martyrs/src/modules/icons/entities/IconGallery.vue';\nimport IconFile from '@martyrs/src/modules/icons/entities/IconFile.vue';\nimport IconFollowing from '@martyrs/src/modules/icons/entities/IconFollowing.vue';\nimport IconEvents from '@martyrs/src/modules/icons/entities/IconEvents.vue';\nimport IconHome from '@martyrs/src/modules/icons/entities/IconHome.vue';\nimport IconProducts from '@martyrs/src/modules/icons/entities/IconProducts.vue';\nimport IconCatalog from '@martyrs/src/modules/icons/entities/IconCatalog.vue';\nimport IconShopcart from '@martyrs/src/modules/icons/entities/IconShopcart.vue';\nimport IconRecent from '@martyrs/src/modules/icons/entities/IconRecent.vue';\nimport IconList from '@martyrs/src/modules/icons/entities/IconList.vue';\nimport IconSettings from '@martyrs/src/modules/icons/entities/IconSettings.vue';\nimport IconEarn from '@martyrs/src/modules/icons/entities/IconEarn.vue';\nimport IconPopular from '@martyrs/src/modules/icons/entities/IconPopular.vue';\nimport IconDiscount from '@martyrs/src/modules/icons/entities/IconDiscount.vue';\nimport IconDate from '@martyrs/src/modules/icons/entities/IconDate.vue';\nimport IconFeatured from '@martyrs/src/modules/icons/entities/IconFeatured.vue';\nimport IconLeftovers from '@martyrs/src/modules/icons/entities/IconLeftovers.vue';\nimport IconOrders from '@martyrs/src/modules/icons/entities/IconOrders.vue';\nimport IconMusic from '@martyrs/src/modules/icons/entities/IconMusic.vue';\nimport IconPhone from '@martyrs/src/modules/icons/entities/IconPhone.vue';\nimport IconEmail from '@martyrs/src/modules/icons/entities/IconEmail.vue';\nimport IconAddress from '@martyrs/src/modules/icons/entities/IconAddress.vue';\nimport IconProfile from '@martyrs/src/modules/icons/entities/IconProfile.vue';\nimport IconGroups from '@martyrs/src/modules/icons/entities/IconGroups.vue';\n\n// Import placeholders icons\nimport PlaceholderOrganizationPic from '@martyrs/src/modules/icons/placeholders/PlaceholderOrganizationPic.vue';\nimport PlaceholderChat from '@martyrs/src/modules/icons/placeholders/PlaceholderChat.vue';\nimport PlaceholderImage from '@martyrs/src/modules/icons/placeholders/PlaceholderImage.vue';\nimport PlaceholderUserpic from '@martyrs/src/modules/icons/placeholders/PlaceholderUserpic.vue';\n\n// Import socials icons\nimport Vk from '@martyrs/src/modules/icons/socials/vk.vue';\nimport Instagram from '@martyrs/src/modules/icons/socials/instagram.vue';\nimport Telegram from '@martyrs/src/modules/icons/socials/telegram.vue';\nimport Twitter from '@martyrs/src/modules/icons/socials/twitter.vue';\nimport Linkedin from '@martyrs/src/modules/icons/socials/linkedin.vue';\nimport Reddit from '@martyrs/src/modules/icons/socials/reddit.vue';\nimport Dribbble from '@martyrs/src/modules/icons/socials/dribbble.vue';\nimport Facebook from '@martyrs/src/modules/icons/socials/facebook.vue';\nimport Youtube from '@martyrs/src/modules/icons/socials/youtube.vue';\nimport Line from '@martyrs/src/modules/icons/socials/line.vue';\n\n// Import actions icons\nimport IconDuplicate from '@martyrs/src/modules/icons/actions/IconDuplicate.vue';\nimport IconShopcartAdd from '@martyrs/src/modules/icons/actions/IconShopcartAdd.vue';\nimport IconShow from '@martyrs/src/modules/icons/actions/IconShow.vue';\n\n// Import labels icons\nimport LabelGooglePlay from '@martyrs/src/modules/icons/labels/LabelGooglePlay.vue';\nimport LabelAppStore from '@martyrs/src/modules/icons/labels/LabelAppStore.vue';\n\n// Import logos icons\nimport Logotype from '@martyrs/src/modules/icons/logos/Logotype.vue';\n\n// Import skeletons icons\nimport SkeletonEventShort from '@martyrs/src/modules/icons/skeletons/SkeletonEventShort.vue';\nimport SkeletonBlogpost from '@martyrs/src/modules/icons/skeletons/SkeletonBlogpost.vue';\nimport SkeletonOrganization from '@martyrs/src/modules/icons/skeletons/SkeletonOrganization.vue';\nimport SkeletonEvent from '@martyrs/src/modules/icons/skeletons/SkeletonEvent.vue';\n\n// Icons map to avoid duplication\nconst iconsMap = {\n  navigation: {\n    IconInfo,\n    IconMinus,\n    IconEllipsis,\n    IconPlus,\n    IconHeart,\n    IconCheckmark,\n    IconPause,\n    IconAdd,\n    IconVolume,\n    IconUnMute,\n    IconCross,\n    IconDoubleCheck,\n    IconSearch,\n    IconChevronRight,\n    IconLike,\n    IconDelete,\n    IconCheck,\n    IconFilter,\n    IconAttach,\n    IconRefresh,\n    IconUpload,\n    IconSort,\n    IconChevronBottom,\n    IconChevronLeft,\n    IconEdit,\n    IconMute,\n    IconSend,\n    IconArrow,\n    IconPlay,\n    IconShuffle\n  },\n  entities: {\n    IconInfo: IconInfoEntities,\n    IconPrice,\n    IconCalendar,\n    IconPayments,\n    IconBell,\n    IconTime,\n    IconCommunity,\n    IconGallery,\n    IconFile,\n    IconFollowing,\n    IconEvents,\n    IconHome,\n    IconProducts,\n    IconCatalog,\n    IconShopcart,\n    IconRecent,\n    IconList,\n    IconSettings,\n    IconPhone,\n    IconEmail,\n    IconAddress,\n    IconEarn,\n    IconPopular,\n    IconDiscount,\n    IconDate,\n    IconFeatured,\n    IconLeftovers,\n    IconOrders,\n    IconMusic,\n    IconProfile,\n    IconGroups\n  },\n  placeholders: {\n    PlaceholderOrganizationPic,\n    PlaceholderChat,\n    PlaceholderImage,\n    PlaceholderUserpic\n  },\n  socials: {\n    vk: Vk,\n    instagram: Instagram,\n    telegram: Telegram,\n    twitter: Twitter,\n    linkedin: Linkedin,\n    reddit: Reddit,\n    dribbble: Dribbble,\n    facebook: Facebook,\n    youtube: Youtube,\n    line: Line\n  },\n  actions: {\n    IconDuplicate,\n    IconShopcartAdd,\n    IconShow\n  },\n  labels: {\n    LabelGooglePlay,\n    LabelAppStore\n  },\n  logos: {\n    Logotype\n  },\n  skeletons: {\n    SkeletonEventShort,\n    SkeletonBlogpost,\n    SkeletonOrganization,\n    SkeletonEvent\n  }\n};\n\nconst categories = ref([]);\nconst copiedIcon = ref('');\nconst displayNotification = ref(false);\nconst notificationMessage = ref('');\nconst showSearchPopup = ref(false);\nconst popupMode = ref('add');\nconst currentIconForReplace = ref(null);\n\nonMounted(() => {\n  loadIcons();\n});\n\nfunction loadIcons() {\n  categories.value = Object.entries(iconsMap).map(([categoryName, icons]) => ({\n    name: categoryName,\n    icons: Object.entries(icons).map(([name, component]) => ({\n      name,\n      component\n    }))\n  }));\n}\n\nfunction formatCategoryName(name) {\n  return name.charAt(0).toUpperCase() + name.slice(1);\n}\n\nfunction copyIconName(iconName, categoryName) {\n  const importStatement = `import ${iconName} from '@martyrs/src/modules/icons/${categoryName}/${iconName}.vue';`;\n  navigator.clipboard.writeText(importStatement);\n  \n  copiedIcon.value = iconName;\n  notificationMessage.value = `Copied: ${importStatement}`;\n  displayNotification.value = true;\n  \n  setTimeout(() => {\n    copiedIcon.value = '';\n    setTimeout(() => {\n      displayNotification.value = false;\n    }, 2000);\n  }, 1000);\n}\n\nfunction openAddIconPopup() {\n  popupMode.value = 'add';\n  currentIconForReplace.value = null;\n  showSearchPopup.value = true;\n}\n\nfunction openReplaceIconPopup(icon, categoryName) {\n  popupMode.value = 'replace';\n  currentIconForReplace.value = {\n    name: icon.name,\n    category: categoryName,\n    component: icon.component\n  };\n  showSearchPopup.value = true;\n}\n\nfunction handleIconSelected(data) {\n  // Reload icons after successful save\n  loadIcons();\n  \n  // Show success notification\n  notificationMessage.value = data.mode === 'add' \n    ? `Added new icon: ${data.icon.name}` \n    : `Replaced icon: ${data.icon.name}`;\n  displayNotification.value = true;\n  \n  setTimeout(() => {\n    displayNotification.value = false;\n  }, 3000);\n}\n</script>\n\n<style scoped>\n.h-60 {\n  height: 60%;\n}\n\n.notification {\n  z-index: 100;\n  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);\n  transition: all 0.3s ease;\n  animation: fadeIn 0.3s;\n}\n\n@keyframes fadeIn {\n  from { opacity: 0; transform: translateY(20px); }\n  to { opacity: 1; transform: translateY(0); }\n}\n\n.icon-card .replace-btn {\n  opacity: 0;\n  transition: opacity 0.2s ease;\n}\n\n.icon-card:hover .replace-btn {\n  opacity: 1;\n}\n\n.flex-between {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n}\n</style>"],"names":["IconInfo","IconMinus","IconEllipsis","IconPlus","IconHeart","IconCheckmark","IconPause","IconAdd","IconVolume","IconUnMute","IconCross","IconDoubleCheck","IconSearch","IconChevronRight","IconLike","IconDelete","IconCheck","IconFilter","IconAttach","IconRefresh","IconUpload","IconSort","IconChevronBottom","IconChevronLeft","IconEdit","IconMute","IconSend","IconArrow","IconPlay","IconShuffle","IconInfoEntities","IconPrice","IconCalendar","IconPayments","IconBell","IconTime","IconCommunity","IconGallery","IconFile","IconFollowing","IconEvents","IconHome","IconProducts","IconCatalog","IconShopcart","IconRecent","IconList","IconSettings","IconPhone","IconEmail","IconAddress","IconEarn","IconPopular","IconDiscount","IconDate","IconFeatured","IconLeftovers","IconOrders","IconMusic","IconProfile","IconGroups","PlaceholderOrganizationPic","PlaceholderChat","PlaceholderImage","PlaceholderUserpic","Vk","Instagram","Telegram","Twitter","Linkedin","Reddit","Dribbble","Facebook","Youtube","Line","IconDuplicate","IconShopcartAdd","IconShow","LabelGooglePlay","LabelAppStore","Logotype","SkeletonEventShort","SkeletonBlogpost","SkeletonOrganization","SkeletonEvent","ref","onMounted"],"mappings":"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"}

package/dist/martyrs/src/modules/icons/pages/IconsPage.vue.js

@@ -1,76 +1,80 @@
-import { ref, onMounted, createElementBlock, openBlock, createElementVNode, createCommentVNode, Fragment, renderList, toDisplayString, createBlock, resolveDynamicComponent } from "vue";
-import _sfc_main$U from "../navigation/IconInfo.vue.js";
-import _sfc_main$T from "../navigation/IconMinus.vue.js";
-import _sfc_main$S from "../navigation/IconEllipsis.vue.js";
-import _sfc_main$R from "../navigation/IconPlus.vue.js";
-import _sfc_main$Q from "../navigation/IconHeart.vue.js";
-import _sfc_main$P from "../navigation/IconCheckmark.vue.js";
-import _sfc_main$O from "../navigation/IconPause.vue.js";
-import _sfc_main$N from "../navigation/IconAdd.vue.js";
-import _sfc_main$M from "../navigation/IconVolume.vue.js";
-import _sfc_main$L from "../navigation/IconUnMute.vue.js";
-import _sfc_main$K from "../navigation/IconCross.vue.js";
-import _sfc_main$J from "../navigation/IconDoubleCheck.vue.js";
-import _sfc_main$I from "../navigation/IconSearch.vue.js";
+import { ref, onMounted, createElementBlock, openBlock, createElementVNode, createCommentVNode, createVNode, Fragment, renderList, toDisplayString, createBlock, resolveDynamicComponent, withModifiers } from "vue";
+import IconSearchPopup from "../components/IconSearchPopup.vue.js";
+import _sfc_main$15 from "../navigation/IconInfo.vue.js";
+import _sfc_main$14 from "../navigation/IconMinus.vue.js";
+import _sfc_main$13 from "../navigation/IconEllipsis.vue.js";
+import _sfc_main$12 from "../navigation/IconPlus.vue.js";
+import _sfc_main$11 from "../navigation/IconHeart.vue.js";
+import _sfc_main$10 from "../navigation/IconCheckmark.vue.js";
+import _sfc_main$$ from "../navigation/IconPause.vue.js";
+import _sfc_main$_ from "../navigation/IconAdd.vue.js";
+import _sfc_main$Z from "../navigation/IconVolume.vue.js";
+import _sfc_main$Y from "../navigation/IconUnMute.vue.js";
+import _sfc_main$X from "../navigation/IconCross.vue.js";
+import _sfc_main$W from "../navigation/IconDoubleCheck.vue.js";
+import _sfc_main$V from "../navigation/IconSearch.vue.js";
 import IconChevronRight from "../navigation/IconChevronRight.vue.js";
-import _sfc_main$H from "../navigation/IconLike.vue.js";
-import _sfc_main$G from "../navigation/IconDelete.vue.js";
-import _sfc_main$F from "../navigation/IconCheck.vue.js";
-import _sfc_main$E from "../navigation/IconFilter.vue.js";
-import _sfc_main$D from "../navigation/IconAttach.vue.js";
-import _sfc_main$C from "../navigation/IconRefresh.vue.js";
-import _sfc_main$B from "../navigation/IconUpload.vue.js";
-import _sfc_main$A from "../navigation/IconSort.vue.js";
+import _sfc_main$U from "../navigation/IconLike.vue.js";
+import _sfc_main$T from "../navigation/IconDelete.vue.js";
+import _sfc_main$S from "../navigation/IconCheck.vue.js";
+import _sfc_main$R from "../navigation/IconFilter.vue.js";
+import _sfc_main$Q from "../navigation/IconAttach.vue.js";
+import _sfc_main$P from "../navigation/IconRefresh.vue.js";
+import _sfc_main$O from "../navigation/IconUpload.vue.js";
+import _sfc_main$N from "../navigation/IconSort.vue.js";
 import IconChevronBottom from "../navigation/IconChevronBottom.vue.js";
 import IconChevronLeft from "../navigation/IconChevronLeft.vue.js";
-import _sfc_main$z from "../navigation/IconEdit.vue.js";
-import _sfc_main$y from "../navigation/IconMute.vue.js";
+import _sfc_main$M from "../navigation/IconEdit.vue.js";
+import _sfc_main$L from "../navigation/IconMute.vue.js";
 import IconSend from "../navigation/IconSend.vue.js";
-import _sfc_main$x from "../navigation/IconArrow.vue.js";
-import _sfc_main$w from "../navigation/IconPlay.vue.js";
-import _sfc_main$v from "../navigation/IconShuffle.vue.js";
-import _sfc_main$u from "../entities/IconInfo.vue.js";
-import _sfc_main$t from "../entities/IconPrice.vue.js";
-import _sfc_main$s from "../entities/IconCalendar.vue.js";
-import _sfc_main$r from "../entities/IconPayments.vue.js";
-import _sfc_main$q from "../entities/IconBell.vue.js";
+import _sfc_main$K from "../navigation/IconArrow.vue.js";
+import _sfc_main$J from "../navigation/IconPlay.vue.js";
+import _sfc_main$I from "../navigation/IconShuffle.vue.js";
+import _sfc_main$H from "../entities/IconInfo.vue.js";
+import _sfc_main$G from "../entities/IconPrice.vue.js";
+import _sfc_main$F from "../entities/IconCalendar.vue.js";
+import _sfc_main$E from "../entities/IconPayments.vue.js";
+import _sfc_main$D from "../entities/IconBell.vue.js";
 import IconTime from "../entities/IconTime.vue.js";
-import _sfc_main$p from "../entities/IconCommunity.vue.js";
-import _sfc_main$o from "../entities/IconGallery.vue.js";
-import _sfc_main$n from "../entities/IconFile.vue.js";
-import _sfc_main$m from "../entities/IconFollowing.vue.js";
-import _sfc_main$l from "../entities/IconEvents.vue.js";
-import _sfc_main$k from "../entities/IconHome.vue.js";
-import _sfc_main$j from "../entities/IconProducts.vue.js";
-import _sfc_main$i from "../entities/IconCatalog.vue.js";
-import _sfc_main$h from "../entities/IconShopcart.vue.js";
-import _sfc_main$g from "../entities/IconRecent.vue.js";
-import _sfc_main$f from "../entities/IconList.vue.js";
-import _sfc_main$e from "../entities/IconSettings.vue.js";
-import _sfc_main$d from "../entities/IconEarn.vue.js";
-import _sfc_main$c from "../entities/IconPopular.vue.js";
-import _sfc_main$b from "../entities/IconDiscount.vue.js";
-import _sfc_main$a from "../entities/IconDate.vue.js";
-import _sfc_main$9 from "../entities/IconFeatured.vue.js";
-import _sfc_main$8 from "../entities/IconLeftovers.vue.js";
-import _sfc_main$7 from "../entities/IconOrders.vue.js";
-import _sfc_main$6 from "../entities/IconMusic.vue.js";
-import _sfc_main$5 from "../entities/IconProfile.vue.js";
-import _sfc_main$4 from "../entities/IconGroups.vue.js";
+import _sfc_main$C from "../entities/IconCommunity.vue.js";
+import _sfc_main$B from "../entities/IconGallery.vue.js";
+import _sfc_main$A from "../entities/IconFile.vue.js";
+import _sfc_main$z from "../entities/IconFollowing.vue.js";
+import _sfc_main$y from "../entities/IconEvents.vue.js";
+import _sfc_main$x from "../entities/IconHome.vue.js";
+import _sfc_main$w from "../entities/IconProducts.vue.js";
+import _sfc_main$v from "../entities/IconCatalog.vue.js";
+import _sfc_main$u from "../entities/IconShopcart.vue.js";
+import _sfc_main$t from "../entities/IconRecent.vue.js";
+import _sfc_main$s from "../entities/IconList.vue.js";
+import _sfc_main$r from "../entities/IconSettings.vue.js";
+import _sfc_main$n from "../entities/IconEarn.vue.js";
+import _sfc_main$m from "../entities/IconPopular.vue.js";
+import _sfc_main$l from "../entities/IconDiscount.vue.js";
+import _sfc_main$k from "../entities/IconDate.vue.js";
+import _sfc_main$j from "../entities/IconFeatured.vue.js";
+import _sfc_main$i from "../entities/IconLeftovers.vue.js";
+import _sfc_main$h from "../entities/IconOrders.vue.js";
+import _sfc_main$g from "../entities/IconMusic.vue.js";
+import _sfc_main$q from "../entities/IconPhone.vue.js";
+import _sfc_main$p from "../entities/IconEmail.vue.js";
+import _sfc_main$o from "../entities/IconAddress.vue.js";
+import _sfc_main$f from "../entities/IconProfile.vue.js";
+import _sfc_main$e from "../entities/IconGroups.vue.js";
 import PlaceholderOrganizationPic from "../placeholders/PlaceholderOrganizationPic.vue.js";
 import PlaceholderChat from "../placeholders/PlaceholderChat.vue.js";
 import PlaceholderImage from "../placeholders/PlaceholderImage.vue.js";
 import PlaceholderUserpic from "../placeholders/PlaceholderUserpic.vue.js";
-import Vk from "../socials/vk.vue.js";
-import Instagram from "../socials/instagram.vue.js";
-import Telegram from "../socials/telegram.vue.js";
-import Twitter from "../socials/twitter.vue.js";
-import Linkedin from "../socials/linkedin.vue.js";
-import Reddit from "../socials/reddit.vue.js";
-import Dribbble from "../socials/dribbble.vue.js";
-import Facebook from "../socials/facebook.vue.js";
-import Youtube from "../socials/youtube.vue.js";
-import Line from "../socials/line.vue.js";
+import _sfc_main$d from "../socials/vk.vue.js";
+import _sfc_main$c from "../socials/instagram.vue.js";
+import _sfc_main$b from "../socials/telegram.vue.js";
+import _sfc_main$a from "../socials/twitter.vue.js";
+import _sfc_main$9 from "../socials/linkedin.vue.js";
+import _sfc_main$8 from "../socials/reddit.vue.js";
+import _sfc_main$7 from "../socials/dribbble.vue.js";
+import _sfc_main$6 from "../socials/facebook.vue.js";
+import _sfc_main$5 from "../socials/youtube.vue.js";
+import _sfc_main$4 from "../socials/line.vue.js";
 import _sfc_main$3 from "../actions/IconDuplicate.vue.js";
 import _sfc_main$2 from "../actions/IconShopcartAdd.vue.js";
 import _sfc_main$1 from "../actions/IconShow.vue.js";
@@ -92,7 +96,8 @@ const _hoisted_7 = {
   key: 0,
   class: "pd-thin bg-black radius-small t-small t-white pos-absolute pos-t-0 pos-r-0 mn-t-thin mn-r-thin"
 };
-const _hoisted_8 = {
+const _hoisted_8 = ["onClick"];
+const _hoisted_9 = {
   key: 0,
   class: "notification bg-third pd-small radius-medium pos-fixed pos-b-0 pos-r-0 mn-b-large mn-r-large"
 };
@@ -101,66 +106,69 @@ const _sfc_main = {
   setup(__props) {
     const iconsMap = {
       navigation: {
-        IconInfo: _sfc_main$U,
-        IconMinus: _sfc_main$T,
-        IconEllipsis: _sfc_main$S,
-        IconPlus: _sfc_main$R,
-        IconHeart: _sfc_main$Q,
-        IconCheckmark: _sfc_main$P,
-        IconPause: _sfc_main$O,
-        IconAdd: _sfc_main$N,
-        IconVolume: _sfc_main$M,
-        IconUnMute: _sfc_main$L,
-        IconCross: _sfc_main$K,
-        IconDoubleCheck: _sfc_main$J,
-        IconSearch: _sfc_main$I,
+        IconInfo: _sfc_main$15,
+        IconMinus: _sfc_main$14,
+        IconEllipsis: _sfc_main$13,
+        IconPlus: _sfc_main$12,
+        IconHeart: _sfc_main$11,
+        IconCheckmark: _sfc_main$10,
+        IconPause: _sfc_main$$,
+        IconAdd: _sfc_main$_,
+        IconVolume: _sfc_main$Z,
+        IconUnMute: _sfc_main$Y,
+        IconCross: _sfc_main$X,
+        IconDoubleCheck: _sfc_main$W,
+        IconSearch: _sfc_main$V,
         IconChevronRight,
-        IconLike: _sfc_main$H,
-        IconDelete: _sfc_main$G,
-        IconCheck: _sfc_main$F,
-        IconFilter: _sfc_main$E,
-        IconAttach: _sfc_main$D,
-        IconRefresh: _sfc_main$C,
-        IconUpload: _sfc_main$B,
-        IconSort: _sfc_main$A,
+        IconLike: _sfc_main$U,
+        IconDelete: _sfc_main$T,
+        IconCheck: _sfc_main$S,
+        IconFilter: _sfc_main$R,
+        IconAttach: _sfc_main$Q,
+        IconRefresh: _sfc_main$P,
+        IconUpload: _sfc_main$O,
+        IconSort: _sfc_main$N,
         IconChevronBottom,
         IconChevronLeft,
-        IconEdit: _sfc_main$z,
-        IconMute: _sfc_main$y,
+        IconEdit: _sfc_main$M,
+        IconMute: _sfc_main$L,
         IconSend,
-        IconArrow: _sfc_main$x,
-        IconPlay: _sfc_main$w,
-        IconShuffle: _sfc_main$v
+        IconArrow: _sfc_main$K,
+        IconPlay: _sfc_main$J,
+        IconShuffle: _sfc_main$I
       },
       entities: {
-        IconInfo: _sfc_main$u,
-        IconPrice: _sfc_main$t,
-        IconCalendar: _sfc_main$s,
-        IconPayments: _sfc_main$r,
-        IconBell: _sfc_main$q,
+        IconInfo: _sfc_main$H,
+        IconPrice: _sfc_main$G,
+        IconCalendar: _sfc_main$F,
+        IconPayments: _sfc_main$E,
+        IconBell: _sfc_main$D,
         IconTime,
-        IconCommunity: _sfc_main$p,
-        IconGallery: _sfc_main$o,
-        IconFile: _sfc_main$n,
-        IconFollowing: _sfc_main$m,
-        IconEvents: _sfc_main$l,
-        IconHome: _sfc_main$k,
-        IconProducts: _sfc_main$j,
-        IconCatalog: _sfc_main$i,
-        IconShopcart: _sfc_main$h,
-        IconRecent: _sfc_main$g,
-        IconList: _sfc_main$f,
-        IconSettings: _sfc_main$e,
-        IconEarn: _sfc_main$d,
-        IconPopular: _sfc_main$c,
-        IconDiscount: _sfc_main$b,
-        IconDate: _sfc_main$a,
-        IconFeatured: _sfc_main$9,
-        IconLeftovers: _sfc_main$8,
-        IconOrders: _sfc_main$7,
-        IconMusic: _sfc_main$6,
-        IconProfile: _sfc_main$5,
-        IconGroups: _sfc_main$4
+        IconCommunity: _sfc_main$C,
+        IconGallery: _sfc_main$B,
+        IconFile: _sfc_main$A,
+        IconFollowing: _sfc_main$z,
+        IconEvents: _sfc_main$y,
+        IconHome: _sfc_main$x,
+        IconProducts: _sfc_main$w,
+        IconCatalog: _sfc_main$v,
+        IconShopcart: _sfc_main$u,
+        IconRecent: _sfc_main$t,
+        IconList: _sfc_main$s,
+        IconSettings: _sfc_main$r,
+        IconPhone: _sfc_main$q,
+        IconEmail: _sfc_main$p,
+        IconAddress: _sfc_main$o,
+        IconEarn: _sfc_main$n,
+        IconPopular: _sfc_main$m,
+        IconDiscount: _sfc_main$l,
+        IconDate: _sfc_main$k,
+        IconFeatured: _sfc_main$j,
+        IconLeftovers: _sfc_main$i,
+        IconOrders: _sfc_main$h,
+        IconMusic: _sfc_main$g,
+        IconProfile: _sfc_main$f,
+        IconGroups: _sfc_main$e
       },
       placeholders: {
         PlaceholderOrganizationPic,
@@ -169,16 +177,16 @@ const _sfc_main = {
         PlaceholderUserpic
       },
       socials: {
-        vk: Vk,
-        instagram: Instagram,
-        telegram: Telegram,
-        twitter: Twitter,
-        linkedin: Linkedin,
-        reddit: Reddit,
-        dribbble: Dribbble,
-        facebook: Facebook,
-        youtube: Youtube,
-        line: Line
+        vk: _sfc_main$d,
+        instagram: _sfc_main$c,
+        telegram: _sfc_main$b,
+        twitter: _sfc_main$a,
+        linkedin: _sfc_main$9,
+        reddit: _sfc_main$8,
+        dribbble: _sfc_main$7,
+        facebook: _sfc_main$6,
+        youtube: _sfc_main$5,
+        line: _sfc_main$4
       },
       actions: {
         IconDuplicate: _sfc_main$3,
@@ -203,6 +211,9 @@ const _sfc_main = {
     const copiedIcon = ref("");
     const displayNotification = ref(false);
     const notificationMessage = ref("");
+    const showSearchPopup = ref(false);
+    const popupMode = ref("add");
+    const currentIconForReplace = ref(null);
     onMounted(() => {
       loadIcons();
     });
@@ -231,9 +242,37 @@ const _sfc_main = {
         }, 2e3);
       }, 1e3);
     }
+    function openAddIconPopup() {
+      popupMode.value = "add";
+      currentIconForReplace.value = null;
+      showSearchPopup.value = true;
+    }
+    function openReplaceIconPopup(icon, categoryName) {
+      popupMode.value = "replace";
+      currentIconForReplace.value = {
+        name: icon.name,
+        category: categoryName,
+        component: icon.component
+      };
+      showSearchPopup.value = true;
+    }
+    function handleIconSelected(data) {
+      loadIcons();
+      notificationMessage.value = data.mode === "add" ? `Added new icon: ${data.icon.name}` : `Replaced icon: ${data.icon.name}`;
+      displayNotification.value = true;
+      setTimeout(() => {
+        displayNotification.value = false;
+      }, 3e3);
+    }
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", _hoisted_1, [
-        _cache[0] || (_cache[0] = createElementVNode("h2", { class: "mn-b-medium" }, "Martyrs Icons Gallery", -1)),
+        createElementVNode("div", { class: "flex-between mn-b-medium" }, [
+          _cache[1] || (_cache[1] = createElementVNode("h2", null, "Martyrs Icons Gallery", -1)),
+          createElementVNode("button", {
+            onClick: openAddIconPopup,
+            class: "pd-small pd-h-medium bg-primary t-white radius-medium hover-scale-1 cursor-pointer border-none"
+          }, " Add New Icon ")
+        ]),
         (openBlock(true), createElementBlock(Fragment, null, renderList(categories.value, (category, index) => {
           return openBlock(), createElementBlock("div", {
             key: index,
@@ -244,25 +283,42 @@ const _sfc_main = {
               (openBlock(true), createElementBlock(Fragment, null, renderList(category.icons, (icon, iconIndex) => {
                 return openBlock(), createElementBlock("div", {
                   key: iconIndex,
-                  class: "aspect-1x1 bg-light radius-medium flex-center flex-v-center flex-column flex hover-scale-1 cursor-pointer",
+                  class: "icon-card aspect-1x1 bg-light radius-medium flex-center flex-v-center flex-column flex hover-scale-1 cursor-pointer pos-relative",
                   onClick: ($event) => copyIconName(icon.name, category.name)
                 }, [
                   createElementVNode("div", _hoisted_5, [
                     (openBlock(), createBlock(resolveDynamicComponent(icon.component), { class: "w-2r h-2r" }))
                   ]),
                   createElementVNode("div", _hoisted_6, toDisplayString(icon.name), 1),
-                  copiedIcon.value === icon.name ? (openBlock(), createElementBlock("div", _hoisted_7, " Copied! ")) : createCommentVNode("", true)
+                  copiedIcon.value === icon.name ? (openBlock(), createElementBlock("div", _hoisted_7, " Copied! ")) : createCommentVNode("", true),
+                  createElementVNode("button", {
+                    onClick: withModifiers(($event) => openReplaceIconPopup(icon, category.name), ["stop"]),
+                    class: "replace-btn pos-absolute pos-t-0 pos-r-0 mn-t-thin mn-r-thin pd-micro bg-second radius-small hover-scale-1 cursor-pointer border-none",
+                    title: "Replace icon"
+                  }, [
+                    createVNode(_sfc_main$P, {
+                      class: "w-1r h-1r",
+                      fill: "rgb(var(--white))"
+                    })
+                  ], 8, _hoisted_8)
                 ], 8, _hoisted_4);
               }), 128))
             ])
           ]);
         }), 128)),
-        displayNotification.value ? (openBlock(), createElementBlock("div", _hoisted_8, toDisplayString(notificationMessage.value), 1)) : createCommentVNode("", true)
+        displayNotification.value ? (openBlock(), createElementBlock("div", _hoisted_9, toDisplayString(notificationMessage.value), 1)) : createCommentVNode("", true),
+        createVNode(IconSearchPopup, {
+          isOpen: showSearchPopup.value,
+          mode: popupMode.value,
+          currentIcon: currentIconForReplace.value,
+          onClose: _cache[0] || (_cache[0] = ($event) => showSearchPopup.value = false),
+          onIconSelected: handleIconSelected
+        }, null, 8, ["isOpen", "mode", "currentIcon"])
       ]);
     };
   }
 };
-const IconsPage = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-e6d7e69a"]]);
+const IconsPage = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-f4b85646"]]);
 export {
   IconsPage as default
 };