@ozdao/martyrs 0.2.485 → 0.2.487

package/dist/martyrs/src/modules/music/components/forms/PlaylistForm.vue.js

@@ -0,0 +1,174 @@
+import { reactive, createElementBlock, openBlock, createElementVNode, withModifiers, createVNode, createBlock, withCtx, createTextVNode } from "vue";
+import _sfc_main$1 from "../../../../components/Field/Field.vue2.js";
+import _sfc_main$2 from "../../../../components/Radio/Radio.vue.js";
+import _sfc_main$5 from "../../../../components/Button/Button.vue.js";
+import _sfc_main$4 from "../../../../components/UploadImage/UploadImage.vue.js";
+import Media from "../../../../components/Media/Media.vue.js";
+import _sfc_main$3 from "../../../icons/entities/IconMusic.vue.js";
+import { state } from "../../../auth/views/store/auth.js";
+import { actions } from "../../store/playlists.js";
+const _hoisted_1 = { class: "playlist-form" };
+const _hoisted_2 = { class: "form-group mn-b-medium" };
+const _hoisted_3 = { class: "form-group mn-b-medium" };
+const _hoisted_4 = { class: "form-group mn-b-medium" };
+const _hoisted_5 = { class: "flex gap-small" };
+const _hoisted_6 = { class: "form-group mn-b-medium" };
+const _hoisted_7 = { class: "playlist-cover-upload flex gap-medium" };
+const _hoisted_8 = { class: "playlist-cover-preview bg-dark-transp-25 radius-small o-hidden" };
+const _hoisted_9 = {
+  key: 1,
+  class: "w-10r h-10r flex-center flex"
+};
+const _hoisted_10 = { class: "form-actions t-right" };
+const _sfc_main = {
+  __name: "PlaylistForm",
+  emits: ["created", "cancel"],
+  setup(__props, { emit: __emit }) {
+    const emit = __emit;
+    const form = reactive({
+      title: "",
+      description: "",
+      isPublic: true,
+      coverUrl: "",
+      isCollaborative: false,
+      tracks: []
+    });
+    const validationErrors = reactive({});
+    const submitForm = async () => {
+      validationErrors.title = !form.title ? { message: "Playlist name is required" } : null;
+      if (Object.values(validationErrors).some((error) => error !== null)) {
+        return;
+      }
+      const playlistData = {
+        ...form,
+        creator: {
+          type: "User",
+          target: state.user._id
+        },
+        owner: {
+          type: "User",
+          target: state.user._id
+        }
+      };
+      try {
+        const playlist = await actions.createPlaylist(playlistData);
+        emit("created", playlist);
+      } catch (error) {
+        console.error("Error creating playlist:", error);
+      }
+    };
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", _hoisted_1, [
+        createElementVNode("form", {
+          onSubmit: withModifiers(submitForm, ["prevent"])
+        }, [
+          createElementVNode("div", _hoisted_2, [
+            _cache[6] || (_cache[6] = createElementVNode("label", {
+              for: "title",
+              class: "t-medium mn-b-thin d-block"
+            }, "Playlist Name", -1)),
+            createVNode(_sfc_main$1, {
+              field: form.title,
+              "onUpdate:field": _cache[0] || (_cache[0] = ($event) => form.title = $event),
+              id: "title",
+              type: "text",
+              placeholder: "New Playlist",
+              validation: validationErrors.title,
+              class: "w-100 pd-small bg-dark-transp-25 radius-small"
+            }, null, 8, ["field", "validation"])
+          ]),
+          createElementVNode("div", _hoisted_3, [
+            _cache[7] || (_cache[7] = createElementVNode("label", {
+              for: "description",
+              class: "t-medium mn-b-thin d-block"
+            }, "Description", -1)),
+            createVNode(_sfc_main$1, {
+              field: form.description,
+              "onUpdate:field": _cache[1] || (_cache[1] = ($event) => form.description = $event),
+              id: "description",
+              type: "textarea",
+              placeholder: "Add an optional description",
+              validation: validationErrors.description,
+              class: "w-100 pd-small bg-dark-transp-25 radius-small"
+            }, null, 8, ["field", "validation"])
+          ]),
+          createElementVNode("div", _hoisted_4, [
+            _cache[8] || (_cache[8] = createElementVNode("label", { class: "t-medium mn-b-thin d-block" }, "Privacy", -1)),
+            createElementVNode("div", _hoisted_5, [
+              createVNode(_sfc_main$2, {
+                radio: form.isPublic,
+                "onUpdate:radio": _cache[2] || (_cache[2] = ($event) => form.isPublic = $event),
+                value: true,
+                name: "privacy",
+                label: "Public",
+                class: ""
+              }, null, 8, ["radio"]),
+              createVNode(_sfc_main$2, {
+                radio: form.isPublic,
+                "onUpdate:radio": _cache[3] || (_cache[3] = ($event) => form.isPublic = $event),
+                value: false,
+                name: "privacy",
+                label: "Private",
+                class: ""
+              }, null, 8, ["radio"])
+            ])
+          ]),
+          createElementVNode("div", _hoisted_6, [
+            _cache[9] || (_cache[9] = createElementVNode("label", { class: "t-medium mn-b-thin d-block" }, "Cover Image", -1)),
+            createElementVNode("div", _hoisted_7, [
+              createElementVNode("div", _hoisted_8, [
+                form.coverUrl ? (openBlock(), createBlock(Media, {
+                  key: 0,
+                  url: form.coverUrl,
+                  class: "w-10r h-10r object-fit-cover"
+                }, null, 8, ["url"])) : (openBlock(), createElementBlock("div", _hoisted_9, [
+                  createVNode(_sfc_main$3, {
+                    class: "i-big",
+                    fill: "rgb(var(--grey))"
+                  })
+                ]))
+              ]),
+              createVNode(_sfc_main$4, {
+                photo: form.coverUrl,
+                "onUpdate:photo": _cache[4] || (_cache[4] = ($event) => form.coverUrl = $event),
+                uploadPath: "playlists",
+                class: "flex-1 h-10r bg-dark-transp-25 radius-small"
+              }, null, 8, ["photo"])
+            ])
+          ]),
+          createElementVNode("div", _hoisted_10, [
+            createVNode(_sfc_main$5, {
+              onClick: _cache[5] || (_cache[5] = ($event) => _ctx.$emit("cancel")),
+              type: "button",
+              class: "bg-dark-transp-25 pd-small radius-small mn-r-small hover-bg-dark",
+              showLoader: false,
+              showSucces: false
+            }, {
+              default: withCtx(() => _cache[10] || (_cache[10] = [
+                createTextVNode(" Cancel ")
+              ])),
+              _: 1
+            }),
+            createVNode(_sfc_main$5, {
+              type: "submit",
+              class: "bg-main pd-small radius-small hover-scale-1",
+              submit: submitForm,
+              showLoader: true,
+              showSucces: true,
+              validation: !!Object.keys(validationErrors).length
+            }, {
+              default: withCtx(() => _cache[11] || (_cache[11] = [
+                createTextVNode(" Create Playlist ")
+              ])),
+              _: 1
+            }, 8, ["validation"])
+          ])
+        ], 32)
+      ]);
+    };
+  }
+};
+export {
+  _sfc_main as default
+};
+//# sourceMappingURL=PlaylistForm.vue.js.map

package/dist/martyrs/src/modules/music/components/forms/PlaylistForm.vue.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PlaylistForm.vue.js","sources":["../../../../../../../src/modules/music/components/forms/PlaylistForm.vue"],"sourcesContent":["<!-- components/forms/PlaylistForm.vue -->\n<template>\n  <div class=\"playlist-form\">\n    <form @submit.prevent=\"submitForm\">\n      <div class=\"form-group mn-b-medium\">\n        <label for=\"title\" class=\" t-medium mn-b-thin d-block\">Playlist Name</label>\n        <Field \n          v-model:field=\"form.title\"\n          id=\"title\"\n          type=\"text\"\n          placeholder=\"New Playlist\"\n          :validation=\"validationErrors.title\"\n          class=\"w-100 pd-small bg-dark-transp-25 radius-small \"\n        />\n      </div>\n      \n      <div class=\"form-group mn-b-medium\">\n        <label for=\"description\" class=\" t-medium mn-b-thin d-block\">Description</label>\n        <Field \n          v-model:field=\"form.description\"\n          id=\"description\"\n          type=\"textarea\"\n          placeholder=\"Add an optional description\"\n          :validation=\"validationErrors.description\"\n          class=\"w-100 pd-small bg-dark-transp-25 radius-small \"\n        />\n      </div>\n      \n      <div class=\"form-group mn-b-medium\">\n        <label class=\" t-medium mn-b-thin d-block\">Privacy</label>\n        <div class=\"flex gap-small\">\n          <Radio \n            v-model:radio=\"form.isPublic\"\n            :value=\"true\"\n            name=\"privacy\"\n            label=\"Public\"\n            class=\"\"\n          />\n          <Radio \n            v-model:radio=\"form.isPublic\"\n            :value=\"false\"\n            name=\"privacy\"\n            label=\"Private\"\n            class=\"\"\n          />\n        </div>\n      </div>\n      \n      <div class=\"form-group mn-b-medium\">\n        <label class=\" t-medium mn-b-thin d-block\">Cover Image</label>\n        <div class=\"playlist-cover-upload flex gap-medium\">\n          <div class=\"playlist-cover-preview bg-dark-transp-25 radius-small o-hidden\">\n            <Media \n              v-if=\"form.coverUrl\"\n              :url=\"form.coverUrl\"\n              class=\"w-10r h-10r object-fit-cover\"\n            />\n            <div v-else class=\"w-10r h-10r flex-center flex\">\n              <IconMusic class=\"i-big\" fill=\"rgb(var(--grey))\"/>\n            </div>\n          </div>\n          \n          <UploadImage\n            v-model:photo=\"form.coverUrl\"\n            uploadPath=\"playlists\"\n            class=\"flex-1 h-10r bg-dark-transp-25 radius-small\"\n          />\n        </div>\n      </div>\n      \n      <div class=\"form-actions t-right\">\n        <Button \n          @click=\"$emit('cancel')\"\n          type=\"button\"\n          class=\"bg-dark-transp-25  pd-small radius-small mn-r-small hover-bg-dark\"\n          :showLoader=\"false\" \n          :showSucces=\"false\"\n        >\n          Cancel\n        </Button>\n        \n        <Button \n          type=\"submit\"\n          class=\"bg-main  pd-small radius-small hover-scale-1\"\n          :submit=\"submitForm\"\n          :showLoader=\"true\" \n          :showSucces=\"true\"\n          :validation=\"!!Object.keys(validationErrors).length\"\n        >\n          Create Playlist\n        </Button>\n      </div>\n    </form>\n  </div>\n</template>\n\n<script setup>\nimport { ref, reactive } from 'vue';\nimport Field from '@martyrs/src/components/Field/Field.vue';\nimport Radio from '@martyrs/src/components/Radio/Radio.vue';\nimport Button from '@martyrs/src/components/Button/Button.vue';\nimport UploadImage from '@martyrs/src/components/UploadImage/UploadImage.vue';\nimport Media from '@martyrs/src/components/Media/Media.vue';\nimport IconMusic from '@martyrs/src/modules/icons/entities/IconMusic.vue';\n\n// Import auth store and playlists store\nimport { state as authState } from '@martyrs/src/modules/auth/views/store/auth.js';\nimport { actions as playlistsActions } from '../../store/playlists.js';\n\nconst emit = defineEmits(['created', 'cancel']);\n\n// Form data\nconst form = reactive({\n  title: '',\n  description: '',\n  isPublic: true,\n  coverUrl: '',\n  isCollaborative: false,\n  tracks: []\n});\n\n// Validation\nconst validationErrors = reactive({});\n\n// Form submission\nconst submitForm = async () => {\n  // Validate form\n  validationErrors.title = !form.title ? { message: 'Playlist name is required' } : null;\n  \n  // If there are validation errors, don't submit\n  if (Object.values(validationErrors).some(error => error !== null)) {\n    return;\n  }\n  \n  // Prepare playlist data\n  const playlistData = {\n    ...form,\n    creator: {\n      type: 'User',\n      target: authState.user._id\n    },\n    owner: {\n      type: 'User',\n      target: authState.user._id\n    }\n  };\n  \n  try {\n    const playlist = await playlistsActions.createPlaylist(playlistData);\n    emit('created', playlist);\n  } catch (error) {\n    console.error('Error creating playlist:', error);\n    // Handle error (could add form-level error message)\n  }\n};\n</script>"],"names":["authState","playlistsActions"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AA6GA,UAAM,OAAO;AAGb,UAAM,OAAO,SAAS;AAAA,MACpB,OAAO;AAAA,MACP,aAAa;AAAA,MACb,UAAU;AAAA,MACV,UAAU;AAAA,MACV,iBAAiB;AAAA,MACjB,QAAQ,CAAA;AAAA,IACV,CAAC;AAGD,UAAM,mBAAmB,SAAS,EAAE;AAGpC,UAAM,aAAa,YAAY;AAE7B,uBAAiB,QAAQ,CAAC,KAAK,QAAQ,EAAE,SAAS,4BAA2B,IAAK;AAGlF,UAAI,OAAO,OAAO,gBAAgB,EAAE,KAAK,WAAS,UAAU,IAAI,GAAG;AACjE;AAAA,MACJ;AAGE,YAAM,eAAe;AAAA,QACnB,GAAG;AAAA,QACH,SAAS;AAAA,UACP,MAAM;AAAA,UACN,QAAQA,MAAU,KAAK;AAAA,QACxB;AAAA,QACD,OAAO;AAAA,UACL,MAAM;AAAA,UACN,QAAQA,MAAU,KAAK;AAAA,QAC7B;AAAA,MACG;AAED,UAAI;AACF,cAAM,WAAW,MAAMC,QAAiB,eAAe,YAAY;AACnE,aAAK,WAAW,QAAQ;AAAA,MACzB,SAAQ,OAAO;AACd,gBAAQ,MAAM,4BAA4B,KAAK;AAAA,MAEnD;AAAA,IACA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/martyrs/src/modules/music/components/forms/SearchForm.vue.cjs

@@ -0,0 +1,80 @@
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const vue = require("vue");
+const Button = require("../../../../components/Button/Button.vue.cjs");
+const IconSearch = require("../../../icons/navigation/IconSearch.vue.cjs");
+const IconCross = require("../../../icons/navigation/IconCross.vue.cjs");
+const _pluginVue_exportHelper = require("../../../../../../_virtual/_plugin-vue_export-helper.cjs");
+const _hoisted_1 = { class: "search-form flex-v-center flex bg-dark-transp-50 pd-thin radius-extra" };
+const _hoisted_2 = ["placeholder"];
+const _sfc_main = {
+  __name: "SearchForm",
+  props: {
+    placeholder: {
+      type: String,
+      default: "Search..."
+    },
+    initialQuery: {
+      type: String,
+      default: ""
+    }
+  },
+  emits: ["search"],
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const searchInput = vue.ref(null);
+    const searchQuery = vue.ref(props.initialQuery);
+    const handleSearch = () => {
+      if (searchQuery.value.trim()) {
+        emit("search", searchQuery.value.trim());
+      }
+    };
+    const clearSearch = () => {
+      searchQuery.value = "";
+      searchInput.value.focus();
+    };
+    vue.watchEffect(() => {
+      if (props.initialQuery !== searchQuery.value) {
+        searchQuery.value = props.initialQuery;
+      }
+    });
+    return (_ctx, _cache) => {
+      return vue.openBlock(), vue.createElementBlock("div", _hoisted_1, [
+        vue.createVNode(IconSearch.default, {
+          class: "i-small mn-r-small",
+          fill: "rgb(var(--grey))"
+        }),
+        vue.withDirectives(vue.createElementVNode("input", {
+          ref_key: "searchInput",
+          ref: searchInput,
+          "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => searchQuery.value = $event),
+          type: "text",
+          placeholder: __props.placeholder,
+          class: "bg-transparent border-none flex-1",
+          onKeydown: vue.withKeys(handleSearch, ["enter"])
+        }, null, 40, _hoisted_2), [
+          [vue.vModelText, searchQuery.value]
+        ]),
+        searchQuery.value.length > 0 ? (vue.openBlock(), vue.createBlock(Button.default, {
+          key: 0,
+          onClick: clearSearch,
+          class: "bg-transparent border-none pd-zero",
+          showLoader: false,
+          showSucces: false
+        }, {
+          default: vue.withCtx(() => [
+            vue.createVNode(IconCross.default, {
+              class: "i-small",
+              fill: "rgb(var(--grey))"
+            })
+          ]),
+          _: 1
+        })) : vue.createCommentVNode("", true)
+      ]);
+    };
+  }
+};
+const SearchForm = /* @__PURE__ */ _pluginVue_exportHelper.default(_sfc_main, [["__scopeId", "data-v-5d37fb17"]]);
+exports.default = SearchForm;
+//# sourceMappingURL=SearchForm.vue.cjs.map

package/dist/martyrs/src/modules/music/components/forms/SearchForm.vue.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"SearchForm.vue.cjs","sources":["../../../../../../../src/modules/music/components/forms/SearchForm.vue"],"sourcesContent":["<!-- components/forms/SearchForm.vue -->\n<template>\n  <div class=\"search-form flex-v-center flex bg-dark-transp-50 pd-thin radius-extra\">\n    <IconSearch class=\"i-small mn-r-small\" fill=\"rgb(var(--grey))\"/>\n    <input \n      ref=\"searchInput\"\n      v-model=\"searchQuery\"\n      type=\"text\"\n      :placeholder=\"placeholder\"\n      class=\"bg-transparent border-none  flex-1\"\n      @keydown.enter=\"handleSearch\"\n    />\n    <Button \n      v-if=\"searchQuery.length > 0\"\n      @click=\"clearSearch\"\n      class=\"bg-transparent border-none pd-zero\"\n      :showLoader=\"false\" \n      :showSucces=\"false\"\n    >\n      <IconCross class=\"i-small\" fill=\"rgb(var(--grey))\"/>\n    </Button>\n  </div>\n</template>\n\n<script setup>\nimport { ref, watchEffect, defineEmits } from 'vue';\nimport Button from '@martyrs/src/components/Button/Button.vue';\nimport IconSearch from '@martyrs/src/modules/icons/navigation/IconSearch.vue';\nimport IconCross from '@martyrs/src/modules/icons/navigation/IconCross.vue';\n\nconst props = defineProps({\n  placeholder: {\n    type: String,\n    default: 'Search...'\n  },\n  initialQuery: {\n    type: String,\n    default: ''\n  }\n});\n\nconst emit = defineEmits(['search']);\n\nconst searchInput = ref(null);\nconst searchQuery = ref(props.initialQuery);\n\nconst handleSearch = () => {\n  if (searchQuery.value.trim()) {\n    emit('search', searchQuery.value.trim());\n  }\n};\n\nconst clearSearch = () => {\n  searchQuery.value = '';\n  searchInput.value.focus();\n};\n\nwatchEffect(() => {\n  // Update search query when initialQuery prop changes\n  if (props.initialQuery !== searchQuery.value) {\n    searchQuery.value = props.initialQuery;\n  }\n});\n</script>\n\n<style scoped>\n.search-form {\n  transition: background-color 0.2s ease;\n}\n\n.search-form:focus-within {\n  background-color: rgba(var(--dark), 0.8);\n}\n\ninput::placeholder {\n  color: rgba(var(--grey), 0.8);\n}\n\ninput:focus {\n  outline: none;\n}\n</style>"],"names":["ref","watchEffect"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AA8BA,UAAM,QAAQ;AAWd,UAAM,OAAO;AAEb,UAAM,cAAcA,IAAG,IAAC,IAAI;AAC5B,UAAM,cAAcA,IAAAA,IAAI,MAAM,YAAY;AAE1C,UAAM,eAAe,MAAM;AACzB,UAAI,YAAY,MAAM,QAAQ;AAC5B,aAAK,UAAU,YAAY,MAAM,KAAI,CAAE;AAAA,MAC3C;AAAA,IACA;AAEA,UAAM,cAAc,MAAM;AACxB,kBAAY,QAAQ;AACpB,kBAAY,MAAM,MAAO;AAAA,IAC3B;AAEAC,QAAAA,YAAY,MAAM;AAEhB,UAAI,MAAM,iBAAiB,YAAY,OAAO;AAC5C,oBAAY,QAAQ,MAAM;AAAA,MAC9B;AAAA,IACA,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/martyrs/src/modules/music/components/forms/SearchForm.vue.js

@@ -0,0 +1,80 @@
+import { ref, watchEffect, createElementBlock, openBlock, createVNode, withDirectives, createBlock, createCommentVNode, createElementVNode, withKeys, vModelText, withCtx } from "vue";
+import _sfc_main$2 from "../../../../components/Button/Button.vue.js";
+import _sfc_main$1 from "../../../icons/navigation/IconSearch.vue.js";
+import _sfc_main$3 from "../../../icons/navigation/IconCross.vue.js";
+import _export_sfc from "../../../../../../_virtual/_plugin-vue_export-helper.js";
+const _hoisted_1 = { class: "search-form flex-v-center flex bg-dark-transp-50 pd-thin radius-extra" };
+const _hoisted_2 = ["placeholder"];
+const _sfc_main = {
+  __name: "SearchForm",
+  props: {
+    placeholder: {
+      type: String,
+      default: "Search..."
+    },
+    initialQuery: {
+      type: String,
+      default: ""
+    }
+  },
+  emits: ["search"],
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const searchInput = ref(null);
+    const searchQuery = ref(props.initialQuery);
+    const handleSearch = () => {
+      if (searchQuery.value.trim()) {
+        emit("search", searchQuery.value.trim());
+      }
+    };
+    const clearSearch = () => {
+      searchQuery.value = "";
+      searchInput.value.focus();
+    };
+    watchEffect(() => {
+      if (props.initialQuery !== searchQuery.value) {
+        searchQuery.value = props.initialQuery;
+      }
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", _hoisted_1, [
+        createVNode(_sfc_main$1, {
+          class: "i-small mn-r-small",
+          fill: "rgb(var(--grey))"
+        }),
+        withDirectives(createElementVNode("input", {
+          ref_key: "searchInput",
+          ref: searchInput,
+          "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => searchQuery.value = $event),
+          type: "text",
+          placeholder: __props.placeholder,
+          class: "bg-transparent border-none flex-1",
+          onKeydown: withKeys(handleSearch, ["enter"])
+        }, null, 40, _hoisted_2), [
+          [vModelText, searchQuery.value]
+        ]),
+        searchQuery.value.length > 0 ? (openBlock(), createBlock(_sfc_main$2, {
+          key: 0,
+          onClick: clearSearch,
+          class: "bg-transparent border-none pd-zero",
+          showLoader: false,
+          showSucces: false
+        }, {
+          default: withCtx(() => [
+            createVNode(_sfc_main$3, {
+              class: "i-small",
+              fill: "rgb(var(--grey))"
+            })
+          ]),
+          _: 1
+        })) : createCommentVNode("", true)
+      ]);
+    };
+  }
+};
+const SearchForm = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-5d37fb17"]]);
+export {
+  SearchForm as default
+};
+//# sourceMappingURL=SearchForm.vue.js.map

package/dist/martyrs/src/modules/music/components/forms/SearchForm.vue.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SearchForm.vue.js","sources":["../../../../../../../src/modules/music/components/forms/SearchForm.vue"],"sourcesContent":["<!-- components/forms/SearchForm.vue -->\n<template>\n  <div class=\"search-form flex-v-center flex bg-dark-transp-50 pd-thin radius-extra\">\n    <IconSearch class=\"i-small mn-r-small\" fill=\"rgb(var(--grey))\"/>\n    <input \n      ref=\"searchInput\"\n      v-model=\"searchQuery\"\n      type=\"text\"\n      :placeholder=\"placeholder\"\n      class=\"bg-transparent border-none  flex-1\"\n      @keydown.enter=\"handleSearch\"\n    />\n    <Button \n      v-if=\"searchQuery.length > 0\"\n      @click=\"clearSearch\"\n      class=\"bg-transparent border-none pd-zero\"\n      :showLoader=\"false\" \n      :showSucces=\"false\"\n    >\n      <IconCross class=\"i-small\" fill=\"rgb(var(--grey))\"/>\n    </Button>\n  </div>\n</template>\n\n<script setup>\nimport { ref, watchEffect, defineEmits } from 'vue';\nimport Button from '@martyrs/src/components/Button/Button.vue';\nimport IconSearch from '@martyrs/src/modules/icons/navigation/IconSearch.vue';\nimport IconCross from '@martyrs/src/modules/icons/navigation/IconCross.vue';\n\nconst props = defineProps({\n  placeholder: {\n    type: String,\n    default: 'Search...'\n  },\n  initialQuery: {\n    type: String,\n    default: ''\n  }\n});\n\nconst emit = defineEmits(['search']);\n\nconst searchInput = ref(null);\nconst searchQuery = ref(props.initialQuery);\n\nconst handleSearch = () => {\n  if (searchQuery.value.trim()) {\n    emit('search', searchQuery.value.trim());\n  }\n};\n\nconst clearSearch = () => {\n  searchQuery.value = '';\n  searchInput.value.focus();\n};\n\nwatchEffect(() => {\n  // Update search query when initialQuery prop changes\n  if (props.initialQuery !== searchQuery.value) {\n    searchQuery.value = props.initialQuery;\n  }\n});\n</script>\n\n<style scoped>\n.search-form {\n  transition: background-color 0.2s ease;\n}\n\n.search-form:focus-within {\n  background-color: rgba(var(--dark), 0.8);\n}\n\ninput::placeholder {\n  color: rgba(var(--grey), 0.8);\n}\n\ninput:focus {\n  outline: none;\n}\n</style>"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;AA8BA,UAAM,QAAQ;AAWd,UAAM,OAAO;AAEb,UAAM,cAAc,IAAI,IAAI;AAC5B,UAAM,cAAc,IAAI,MAAM,YAAY;AAE1C,UAAM,eAAe,MAAM;AACzB,UAAI,YAAY,MAAM,QAAQ;AAC5B,aAAK,UAAU,YAAY,MAAM,KAAI,CAAE;AAAA,MAC3C;AAAA,IACA;AAEA,UAAM,cAAc,MAAM;AACxB,kBAAY,QAAQ;AACpB,kBAAY,MAAM,MAAO;AAAA,IAC3B;AAEA,gBAAY,MAAM;AAEhB,UAAI,MAAM,iBAAiB,YAAY,OAAO;AAC5C,oBAAY,QAAQ,MAAM;AAAA,MAC9B;AAAA,IACA,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}