@ozdao/martyrs 0.2.492 → 0.2.494

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

@@ -26,17 +26,34 @@ const _sfc_main = {
     const emit = __emit;
     const searchInput = vue.ref(null);
     const searchQuery = vue.ref(props.initialQuery);
+    let searchTimeout = null;
     const handleSearch = () => {
-      if (searchQuery.value.trim()) {
-        emit("search", searchQuery.value.trim());
-      }
+      emit("search", searchQuery.value.trim());
     };
     const clearSearch = () => {
       searchQuery.value = "";
-      searchInput.value.focus();
+      emit("search", "");
+      searchInput.value?.focus();
     };
-    vue.watchEffect(() => {
-      if (props.initialQuery !== searchQuery.value) {
+    vue.watch(searchQuery, (newQuery) => {
+      if (searchTimeout) {
+        clearTimeout(searchTimeout);
+      }
+      if (newQuery.trim().length >= 2) {
+        searchTimeout = setTimeout(() => {
+          handleSearch();
+        }, 300);
+      } else if (newQuery.trim().length === 0) {
+        emit("search", "");
+      }
+    });
+    vue.watch(() => props.initialQuery, (newQuery) => {
+      if (newQuery !== searchQuery.value) {
+        searchQuery.value = newQuery;
+      }
+    });
+    vue.onMounted(() => {
+      if (props.initialQuery) {
         searchQuery.value = props.initialQuery;
       }
     });
@@ -76,6 +93,6 @@ const _sfc_main = {
     };
   }
 };
-const SearchForm = /* @__PURE__ */ _pluginVue_exportHelper.default(_sfc_main, [["__scopeId", "data-v-5d37fb17"]]);
+const SearchForm = /* @__PURE__ */ _pluginVue_exportHelper.default(_sfc_main, [["__scopeId", "data-v-405341b8"]]);
 exports.default = SearchForm;
 //# sourceMappingURL=SearchForm.vue.cjs.map

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

@@ -1 +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,IAAAA,IAAI,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,MACzC;AAAA,IACF;AAEA,UAAM,cAAc,MAAM;AACxB,kBAAY,QAAQ;AACpB,kBAAY,MAAM,MAAK;AAAA,IACzB;AAEAC,QAAAA,YAAY,MAAM;AAEhB,UAAI,MAAM,iBAAiB,YAAY,OAAO;AAC5C,oBAAY,QAAQ,MAAM;AAAA,MAC5B;AAAA,IACF,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"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, watch, onMounted, 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);\nlet searchTimeout = null;\n\nconst handleSearch = () => {\n  emit('search', searchQuery.value.trim());\n};\n\nconst clearSearch = () => {\n  searchQuery.value = '';\n  emit('search', '');\n  searchInput.value?.focus();\n};\n\n// Watch for changes in search query and emit search with debounce\nwatch(searchQuery, (newQuery) => {\n  // Clear previous timeout\n  if (searchTimeout) {\n    clearTimeout(searchTimeout);\n  }\n  \n  if (newQuery.trim().length >= 2) {\n    // Set new timeout for debounce\n    searchTimeout = setTimeout(() => {\n      handleSearch();\n    }, 300);\n  } else if (newQuery.trim().length === 0) {\n    emit('search', '');\n  }\n});\n\n// Watch for changes in initialQuery prop\nwatch(() => props.initialQuery, (newQuery) => {\n  if (newQuery !== searchQuery.value) {\n    searchQuery.value = newQuery;\n  }\n});\n\nonMounted(() => {\n  if (props.initialQuery) {\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","watch","onMounted"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AA8BA,UAAM,QAAQ;AAWd,UAAM,OAAO;AAEb,UAAM,cAAcA,IAAAA,IAAI,IAAI;AAC5B,UAAM,cAAcA,IAAAA,IAAI,MAAM,YAAY;AAC1C,QAAI,gBAAgB;AAEpB,UAAM,eAAe,MAAM;AACzB,WAAK,UAAU,YAAY,MAAM,KAAI,CAAE;AAAA,IACzC;AAEA,UAAM,cAAc,MAAM;AACxB,kBAAY,QAAQ;AACpB,WAAK,UAAU,EAAE;AACjB,kBAAY,OAAO,MAAK;AAAA,IAC1B;AAGAC,QAAAA,MAAM,aAAa,CAAC,aAAa;AAE/B,UAAI,eAAe;AACjB,qBAAa,aAAa;AAAA,MAC5B;AAEA,UAAI,SAAS,OAAO,UAAU,GAAG;AAE/B,wBAAgB,WAAW,MAAM;AAC/B,uBAAY;AAAA,QACd,GAAG,GAAG;AAAA,MACR,WAAW,SAAS,KAAI,EAAG,WAAW,GAAG;AACvC,aAAK,UAAU,EAAE;AAAA,MACnB;AAAA,IACF,CAAC;AAGDA,QAAAA,MAAM,MAAM,MAAM,cAAc,CAAC,aAAa;AAC5C,UAAI,aAAa,YAAY,OAAO;AAClC,oBAAY,QAAQ;AAAA,MACtB;AAAA,IACF,CAAC;AAEDC,QAAAA,UAAU,MAAM;AACd,UAAI,MAAM,cAAc;AACtB,oBAAY,QAAQ,MAAM;AAAA,MAC5B;AAAA,IACF,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

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

@@ -1,4 +1,4 @@
-import { ref, watchEffect, createElementBlock, openBlock, createVNode, withDirectives, createBlock, createCommentVNode, createElementVNode, withKeys, vModelText, withCtx } from "vue";
+import { ref, watch, onMounted, 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";
@@ -24,17 +24,34 @@ const _sfc_main = {
     const emit = __emit;
     const searchInput = ref(null);
     const searchQuery = ref(props.initialQuery);
+    let searchTimeout = null;
     const handleSearch = () => {
-      if (searchQuery.value.trim()) {
-        emit("search", searchQuery.value.trim());
-      }
+      emit("search", searchQuery.value.trim());
     };
     const clearSearch = () => {
       searchQuery.value = "";
-      searchInput.value.focus();
+      emit("search", "");
+      searchInput.value?.focus();
     };
-    watchEffect(() => {
-      if (props.initialQuery !== searchQuery.value) {
+    watch(searchQuery, (newQuery) => {
+      if (searchTimeout) {
+        clearTimeout(searchTimeout);
+      }
+      if (newQuery.trim().length >= 2) {
+        searchTimeout = setTimeout(() => {
+          handleSearch();
+        }, 300);
+      } else if (newQuery.trim().length === 0) {
+        emit("search", "");
+      }
+    });
+    watch(() => props.initialQuery, (newQuery) => {
+      if (newQuery !== searchQuery.value) {
+        searchQuery.value = newQuery;
+      }
+    });
+    onMounted(() => {
+      if (props.initialQuery) {
         searchQuery.value = props.initialQuery;
       }
     });
@@ -74,7 +91,7 @@ const _sfc_main = {
     };
   }
 };
-const SearchForm = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-5d37fb17"]]);
+const SearchForm = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-405341b8"]]);
 export {
   SearchForm as default
 };

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

@@ -1 +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,MACzC;AAAA,IACF;AAEA,UAAM,cAAc,MAAM;AACxB,kBAAY,QAAQ;AACpB,kBAAY,MAAM,MAAK;AAAA,IACzB;AAEA,gBAAY,MAAM;AAEhB,UAAI,MAAM,iBAAiB,YAAY,OAAO;AAC5C,oBAAY,QAAQ,MAAM;AAAA,MAC5B;AAAA,IACF,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"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, watch, onMounted, 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);\nlet searchTimeout = null;\n\nconst handleSearch = () => {\n  emit('search', searchQuery.value.trim());\n};\n\nconst clearSearch = () => {\n  searchQuery.value = '';\n  emit('search', '');\n  searchInput.value?.focus();\n};\n\n// Watch for changes in search query and emit search with debounce\nwatch(searchQuery, (newQuery) => {\n  // Clear previous timeout\n  if (searchTimeout) {\n    clearTimeout(searchTimeout);\n  }\n  \n  if (newQuery.trim().length >= 2) {\n    // Set new timeout for debounce\n    searchTimeout = setTimeout(() => {\n      handleSearch();\n    }, 300);\n  } else if (newQuery.trim().length === 0) {\n    emit('search', '');\n  }\n});\n\n// Watch for changes in initialQuery prop\nwatch(() => props.initialQuery, (newQuery) => {\n  if (newQuery !== searchQuery.value) {\n    searchQuery.value = newQuery;\n  }\n});\n\nonMounted(() => {\n  if (props.initialQuery) {\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;AAC1C,QAAI,gBAAgB;AAEpB,UAAM,eAAe,MAAM;AACzB,WAAK,UAAU,YAAY,MAAM,KAAI,CAAE;AAAA,IACzC;AAEA,UAAM,cAAc,MAAM;AACxB,kBAAY,QAAQ;AACpB,WAAK,UAAU,EAAE;AACjB,kBAAY,OAAO,MAAK;AAAA,IAC1B;AAGA,UAAM,aAAa,CAAC,aAAa;AAE/B,UAAI,eAAe;AACjB,qBAAa,aAAa;AAAA,MAC5B;AAEA,UAAI,SAAS,OAAO,UAAU,GAAG;AAE/B,wBAAgB,WAAW,MAAM;AAC/B,uBAAY;AAAA,QACd,GAAG,GAAG;AAAA,MACR,WAAW,SAAS,KAAI,EAAG,WAAW,GAAG;AACvC,aAAK,UAAU,EAAE;AAAA,MACnB;AAAA,IACF,CAAC;AAGD,UAAM,MAAM,MAAM,cAAc,CAAC,aAAa;AAC5C,UAAI,aAAa,YAAY,OAAO;AAClC,oBAAY,QAAQ;AAAA,MACtB;AAAA,IACF,CAAC;AAED,cAAU,MAAM;AACd,UAAI,MAAM,cAAc;AACtB,oBAAY,QAAQ,MAAM;AAAA,MAC5B;AAAA,IACF,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

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

@@ -2,7 +2,7 @@
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
 const vue = require("vue");
 const vueRouter = require("vue-router");
-const Field = require("../../../../components/Field/Field.vue2.cjs");
+const Field = require("../../../../components/Field/Field.vue.cjs");
 const Block = require("../../../../components/Block/Block.vue.cjs");
 const Button = require("../../../../components/Button/Button.vue.cjs");
 const Checkbox = require("../../../../components/Checkbox/Checkbox.vue.cjs");
@@ -20,39 +20,39 @@ const auth = require("../../../auth/views/store/auth.cjs");
 const _hoisted_1 = { class: "pd-medium" };
 const _hoisted_2 = { class: "h2 mn-b-medium" };
 const _hoisted_3 = { class: "bg-light pd-medium radius-medium" };
-const _hoisted_4 = { class: "flex-nowrap flex-v-center flex gap-thin" };
-const _hoisted_5 = { class: "t-medium" };
-const _hoisted_6 = ["onClick"];
-const _hoisted_7 = { class: "flex-nowrap flex-v-center flex" };
-const _hoisted_8 = { class: "w-100" };
-const _hoisted_9 = { class: "t-medium" };
-const _hoisted_10 = {
+const _hoisted_4 = { class: "cols-2-fit-content mobile:cols-1 gap-medium" };
+const _hoisted_5 = { class: "bg-light pd-medium radius-medium" };
+const _hoisted_6 = { class: "flex-nowrap flex-v-center flex gap-thin" };
+const _hoisted_7 = { class: "t-medium" };
+const _hoisted_8 = ["onClick"];
+const _hoisted_9 = { class: "flex-nowrap flex-v-center flex" };
+const _hoisted_10 = { class: "w-100" };
+const _hoisted_11 = { class: "t-medium" };
+const _hoisted_12 = {
   key: 0,
   class: "t-small t-transp"
 };
-const _hoisted_11 = { class: "flex-nowrap flex-v-center flex gap-thin" };
-const _hoisted_12 = { class: "t-medium" };
-const _hoisted_13 = ["onClick"];
-const _hoisted_14 = { class: "flex-nowrap flex-v-center flex" };
-const _hoisted_15 = { class: "w-100" };
-const _hoisted_16 = { class: "t-medium" };
-const _hoisted_17 = {
+const _hoisted_13 = { class: "flex-nowrap flex-v-center flex gap-thin" };
+const _hoisted_14 = { class: "t-medium" };
+const _hoisted_15 = ["onClick"];
+const _hoisted_16 = { class: "flex-nowrap flex-v-center flex" };
+const _hoisted_17 = { class: "w-100" };
+const _hoisted_18 = { class: "t-medium" };
+const _hoisted_19 = {
   key: 0,
   class: "t-small t-transp"
 };
-const _hoisted_18 = { class: "flex-nowrap flex-v-center flex gap-thin" };
-const _hoisted_19 = { class: "t-medium" };
-const _hoisted_20 = ["onClick"];
-const _hoisted_21 = { class: "flex-nowrap flex-v-center flex" };
-const _hoisted_22 = { class: "w-100" };
-const _hoisted_23 = { class: "t-medium" };
-const _hoisted_24 = {
+const _hoisted_20 = { class: "flex-nowrap flex-v-center flex gap-thin" };
+const _hoisted_21 = { class: "t-medium" };
+const _hoisted_22 = ["onClick"];
+const _hoisted_23 = { class: "flex-nowrap flex-v-center flex" };
+const _hoisted_24 = { class: "w-100" };
+const _hoisted_25 = { class: "t-medium" };
+const _hoisted_26 = {
   key: 0,
   class: "t-small t-transp"
 };
-const _hoisted_25 = { class: "bg-light pd-medium radius-medium" };
-const _hoisted_26 = { class: "bg-light pd-medium radius-medium" };
-const _hoisted_27 = { class: "cols-2 mobile:cols-1 gap-medium" };
+const _hoisted_27 = { class: "bg-light pd-medium radius-medium" };
 const _hoisted_28 = { class: "bg-light pd-medium radius-medium" };
 const _hoisted_29 = { class: "bg-light pd-medium radius-medium" };
 const _hoisted_30 = { class: "flex flex-justify-between" };
@@ -174,12 +174,24 @@ const _sfc_main = {
         return;
       }
       try {
+        console.log("=== FORM DATA DEBUG ===");
+        console.log("form.artists:", form.artists);
+        console.log("form.albums:", form.albums);
+        console.log("form.albums.length:", form.albums.length);
+        console.log("form.albums[0]:", form.albums[0]);
+        console.log("form.albums[0]?._id:", form.albums[0]?._id);
         const formData = {
           ...form,
           artist: form.artists.length > 0 ? form.artists[0]._id || form.artists[0] : null,
-          album: form.albums.length > 0,
-          genres: form.genres.map((genre2) => genre2._id || genre2)
+          album: form.albums && form.albums._id ? form.albums._id : null,
+          genre: form.genres.map((genre) => genre._id || genre)
         };
+        delete formData.artists;
+        delete formData.albums;
+        delete formData.genres;
+        console.log("formData after preparation:", formData);
+        console.log("formData.album:", formData.album);
+        console.log("typeof formData.album:", typeof formData.album);
         if (!props.editMode) {
           formData.owner = {
             type: "user",
@@ -229,10 +241,37 @@ const _sfc_main = {
           class: "cols-1 gap-medium"
         }, [
           vue.createElementVNode("div", _hoisted_3, [
-            _cache[15] || (_cache[15] = vue.createElementVNode("h3", { class: "h3 mn-b-medium" }, "Basic Information", -1)),
+            _cache[17] || (_cache[17] = vue.createElementVNode("h3", { class: "h3 mn-b-medium" }, "Media", -1)),
+            vue.createElementVNode("div", _hoisted_4, [
+              vue.createElementVNode("div", null, [
+                _cache[15] || (_cache[15] = vue.createElementVNode("p", { class: "p-semi mn-b-small" }, "Cover Image", -1)),
+                vue.createVNode(UploadImage.default, {
+                  photo: form.coverUrl,
+                  "onUpdate:photo": _cache[0] || (_cache[0] = ($event) => form.coverUrl = $event),
+                  uploadPath: "tracks/covers",
+                  class: "aspect-1x1 h-15r radius-small o-hidden mn-b-small",
+                  onError: handleUploadError
+                }, null, 8, ["photo"])
+              ]),
+              vue.createElementVNode("div", null, [
+                _cache[16] || (_cache[16] = vue.createElementVNode("p", { class: "p-semi mn-b-small" }, "Audio File", -1)),
+                vue.createVNode(Upload.default, {
+                  field: form.fileUrl,
+                  "onUpdate:field": _cache[1] || (_cache[1] = ($event) => form.fileUrl = $event),
+                  onFileChange: _cache[2] || (_cache[2] = (url) => form.fileUrl = url),
+                  type: "file",
+                  uploadPath: "tracks/audio",
+                  class: "w-100 h-15r bg-white radius-small pd-small",
+                  validation: validationErrors.fileUrl
+                }, null, 8, ["field", "validation"])
+              ])
+            ])
+          ]),
+          vue.createElementVNode("div", _hoisted_5, [
+            _cache[18] || (_cache[18] = vue.createElementVNode("h3", { class: "h3 mn-b-medium" }, "Basic Information", -1)),
             vue.createVNode(Field.default, {
               field: form.title,
-              "onUpdate:field": _cache[0] || (_cache[0] = ($event) => form.title = $event),
+              "onUpdate:field": _cache[3] || (_cache[3] = ($event) => form.title = $event),
               label: "Track Title",
               placeholder: "Enter track title",
               class: "bg-white radius-small pd-small mn-b-thin",
@@ -240,14 +279,14 @@ const _sfc_main = {
             }, null, 8, ["field", "validation"]),
             vue.createVNode(Field.default, {
               field: form.url,
-              "onUpdate:field": _cache[1] || (_cache[1] = ($event) => form.url = $event),
+              "onUpdate:field": _cache[4] || (_cache[4] = ($event) => form.url = $event),
               label: "URL",
               placeholder: "Leave blank for auto-generation based on the track title",
               class: "bg-white radius-small pd-small mn-b-small"
             }, null, 8, ["field"]),
             vue.createVNode(Field.default, {
               field: form.releaseDate,
-              "onUpdate:field": _cache[2] || (_cache[2] = ($event) => form.releaseDate = $event),
+              "onUpdate:field": _cache[5] || (_cache[5] = ($event) => form.releaseDate = $event),
               label: "Release Date",
               type: "date",
               class: "bg-white radius-small pd-small mn-b-thin",
@@ -255,7 +294,7 @@ const _sfc_main = {
             }, null, 8, ["field", "validation"]),
             vue.createVNode(Field.default, {
               field: form.duration,
-              "onUpdate:field": _cache[3] || (_cache[3] = ($event) => form.duration = $event),
+              "onUpdate:field": _cache[6] || (_cache[6] = ($event) => form.duration = $event),
               label: "Duration (seconds)",
               type: "number",
               placeholder: "Track duration in seconds",
@@ -266,7 +305,7 @@ const _sfc_main = {
             default: vue.withCtx(() => [
               vue.createVNode(BlockMultiselect.default, {
                 modelValue: form.artists,
-                "onUpdate:modelValue": _cache[4] || (_cache[4] = ($event) => form.artists = $event),
+                "onUpdate:modelValue": _cache[7] || (_cache[7] = ($event) => form.artists = $event),
                 placeholder: "Search artists...",
                 multiple: false,
                 transform: (item) => ({ _id: item._id, name: item.name }),
@@ -304,21 +343,21 @@ const _sfc_main = {
                 classFeed: "h-max-30r gap-thin flex-column flex o-scroll"
               }, {
                 selected: vue.withCtx(({ item, clear }) => [
-                  vue.createElementVNode("div", _hoisted_4, [
-                    vue.createElementVNode("span", _hoisted_5, vue.toDisplayString(item?.name || item), 1),
+                  vue.createElementVNode("div", _hoisted_6, [
+                    vue.createElementVNode("span", _hoisted_7, vue.toDisplayString(item?.name || item), 1),
                     vue.createElementVNode("button", {
                       onClick: vue.withModifiers(clear, ["stop"]),
                       class: "i-small pd-micro bg-red radius-extra flex-center flex aspect-1x1 hover-scale-1"
                     }, [
                       vue.createVNode(IconCross.default, { class: "i-micro fill-white" })
-                    ], 8, _hoisted_6)
+                    ], 8, _hoisted_8)
                   ])
                 ]),
                 item: vue.withCtx(({ item }) => [
-                  vue.createElementVNode("div", _hoisted_7, [
-                    vue.createElementVNode("div", _hoisted_8, [
-                      vue.createElementVNode("p", _hoisted_9, vue.toDisplayString(item.name), 1),
-                      item.bio ? (vue.openBlock(), vue.createElementBlock("p", _hoisted_10, vue.toDisplayString(item.bio), 1)) : vue.createCommentVNode("", true)
+                  vue.createElementVNode("div", _hoisted_9, [
+                    vue.createElementVNode("div", _hoisted_10, [
+                      vue.createElementVNode("p", _hoisted_11, vue.toDisplayString(item.name), 1),
+                      item.bio ? (vue.openBlock(), vue.createElementBlock("p", _hoisted_12, vue.toDisplayString(item.bio), 1)) : vue.createCommentVNode("", true)
                     ])
                   ])
                 ]),
@@ -331,7 +370,7 @@ const _sfc_main = {
             default: vue.withCtx(() => [
               vue.createVNode(BlockMultiselect.default, {
                 modelValue: form.albums,
-                "onUpdate:modelValue": _cache[5] || (_cache[5] = ($event) => form.albums = $event),
+                "onUpdate:modelValue": _cache[8] || (_cache[8] = ($event) => form.albums = $event),
                 placeholder: "Search albums...",
                 multiple: false,
                 transform: (item) => ({ _id: item._id, title: item.title }),
@@ -369,21 +408,21 @@ const _sfc_main = {
                 classFeed: "h-max-30r gap-thin flex-column flex o-scroll"
               }, {
                 selected: vue.withCtx(({ item, clear }) => [
-                  vue.createElementVNode("div", _hoisted_11, [
-                    vue.createElementVNode("span", _hoisted_12, vue.toDisplayString(item?.title || item), 1),
+                  vue.createElementVNode("div", _hoisted_13, [
+                    vue.createElementVNode("span", _hoisted_14, vue.toDisplayString(item?.title || item), 1),
                     vue.createElementVNode("button", {
                       onClick: vue.withModifiers(clear, ["stop"]),
                       class: "i-small pd-micro bg-red radius-extra flex-center flex aspect-1x1 hover-scale-1"
                     }, [
                       vue.createVNode(IconCross.default, { class: "i-micro fill-white" })
-                    ], 8, _hoisted_13)
+                    ], 8, _hoisted_15)
                   ])
                 ]),
                 item: vue.withCtx(({ item }) => [
-                  vue.createElementVNode("div", _hoisted_14, [
-                    vue.createElementVNode("div", _hoisted_15, [
-                      vue.createElementVNode("p", _hoisted_16, vue.toDisplayString(item.title), 1),
-                      item.description ? (vue.openBlock(), vue.createElementBlock("p", _hoisted_17, vue.toDisplayString(item.description), 1)) : vue.createCommentVNode("", true)
+                  vue.createElementVNode("div", _hoisted_16, [
+                    vue.createElementVNode("div", _hoisted_17, [
+                      vue.createElementVNode("p", _hoisted_18, vue.toDisplayString(item.title), 1),
+                      item.description ? (vue.openBlock(), vue.createElementBlock("p", _hoisted_19, vue.toDisplayString(item.description), 1)) : vue.createCommentVNode("", true)
                     ])
                   ])
                 ]),
@@ -396,7 +435,7 @@ const _sfc_main = {
             default: vue.withCtx(() => [
               vue.createVNode(BlockMultiselect.default, {
                 modelValue: form.genres,
-                "onUpdate:modelValue": _cache[6] || (_cache[6] = ($event) => form.genres = $event),
+                "onUpdate:modelValue": _cache[9] || (_cache[9] = ($event) => form.genres = $event),
                 placeholder: "Search genres...",
                 multiple: true,
                 transform: (item) => ({ _id: item._id, name: item.name }),
@@ -434,21 +473,21 @@ const _sfc_main = {
                 classFeed: "h-max-30r gap-thin flex-column flex o-scroll"
               }, {
                 selected: vue.withCtx(({ item, clear }) => [
-                  vue.createElementVNode("div", _hoisted_18, [
-                    vue.createElementVNode("span", _hoisted_19, vue.toDisplayString(item?.name || item), 1),
+                  vue.createElementVNode("div", _hoisted_20, [
+                    vue.createElementVNode("span", _hoisted_21, vue.toDisplayString(item?.name || item), 1),
                     vue.createElementVNode("button", {
                       onClick: vue.withModifiers(clear, ["stop"]),
                       class: "i-small pd-micro bg-red radius-extra flex-center flex aspect-1x1 hover-scale-1"
                     }, [
                       vue.createVNode(IconCross.default, { class: "i-micro fill-white" })
-                    ], 8, _hoisted_20)
+                    ], 8, _hoisted_22)
                   ])
                 ]),
                 item: vue.withCtx(({ item }) => [
-                  vue.createElementVNode("div", _hoisted_21, [
-                    vue.createElementVNode("div", _hoisted_22, [
-                      vue.createElementVNode("p", _hoisted_23, vue.toDisplayString(item.name), 1),
-                      item.description ? (vue.openBlock(), vue.createElementBlock("p", _hoisted_24, vue.toDisplayString(item.description), 1)) : vue.createCommentVNode("", true)
+                  vue.createElementVNode("div", _hoisted_23, [
+                    vue.createElementVNode("div", _hoisted_24, [
+                      vue.createElementVNode("p", _hoisted_25, vue.toDisplayString(item.name), 1),
+                      item.description ? (vue.openBlock(), vue.createElementBlock("p", _hoisted_26, vue.toDisplayString(item.description), 1)) : vue.createCommentVNode("", true)
                     ])
                   ])
                 ]),
@@ -457,48 +496,21 @@ const _sfc_main = {
             ]),
             _: 1
           }),
-          vue.createElementVNode("div", _hoisted_25, [
-            _cache[16] || (_cache[16] = vue.createElementVNode("h3", { class: "h3 mn-b-medium" }, "Content Settings", -1)),
+          vue.createElementVNode("div", _hoisted_27, [
+            _cache[19] || (_cache[19] = vue.createElementVNode("h3", { class: "h3 mn-b-medium" }, "Content Settings", -1)),
             vue.createVNode(Checkbox.default, {
               checkbox: form.isExplicit,
-              "onUpdate:checkbox": _cache[7] || (_cache[7] = ($event) => form.isExplicit = $event),
+              "onUpdate:checkbox": _cache[10] || (_cache[10] = ($event) => form.isExplicit = $event),
               label: "Explicit Content",
               class: "bg-white radius-small pd-small mn-b-thin"
             }, null, 8, ["checkbox"]),
             vue.createVNode(Checkbox.default, {
               checkbox: form.isPublic,
-              "onUpdate:checkbox": _cache[8] || (_cache[8] = ($event) => form.isPublic = $event),
+              "onUpdate:checkbox": _cache[11] || (_cache[11] = ($event) => form.isPublic = $event),
               label: "Public Track",
               class: "bg-white radius-small pd-small mn-b-thin"
             }, null, 8, ["checkbox"])
           ]),
-          vue.createElementVNode("div", _hoisted_26, [
-            _cache[19] || (_cache[19] = vue.createElementVNode("h3", { class: "h3 mn-b-medium" }, "Media", -1)),
-            vue.createElementVNode("div", _hoisted_27, [
-              vue.createElementVNode("div", null, [
-                _cache[17] || (_cache[17] = vue.createElementVNode("p", { class: "p-semi mn-b-small" }, "Cover Image", -1)),
-                vue.createVNode(UploadImage.default, {
-                  photo: form.coverUrl,
-                  "onUpdate:photo": _cache[9] || (_cache[9] = ($event) => form.coverUrl = $event),
-                  uploadPath: "tracks/covers",
-                  class: "w-100 h-15r radius-small o-hidden mn-b-small",
-                  onError: handleUploadError
-                }, null, 8, ["photo"])
-              ]),
-              vue.createElementVNode("div", null, [
-                _cache[18] || (_cache[18] = vue.createElementVNode("p", { class: "p-semi mn-b-small" }, "Audio File", -1)),
-                vue.createVNode(Upload.default, {
-                  field: form.fileUrl,
-                  "onUpdate:field": _cache[10] || (_cache[10] = ($event) => form.fileUrl = $event),
-                  onFileChange: _cache[11] || (_cache[11] = (url) => form.fileUrl = url),
-                  type: "file",
-                  uploadPath: "tracks/audio",
-                  class: "w-100 h-15r bg-white radius-small pd-small",
-                  validation: validationErrors.fileUrl
-                }, null, 8, ["field", "validation"])
-              ])
-            ])
-          ]),
           vue.createElementVNode("div", _hoisted_28, [
             _cache[20] || (_cache[20] = vue.createElementVNode("h3", { class: "h3 mn-b-medium" }, "Additional Information", -1)),
             vue.createVNode(Field.default, {

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

@@ -1 +1 @@
-{"version":3,"file":"TrackForm.vue.cjs","sources":["../../../../../../../src/modules/music/components/forms/TrackForm.vue"],"sourcesContent":["<!-- components/forms/TrackForm.vue -->\n<template>\n  <div class=\"pd-medium\">\n    <h2 class=\"h2 mn-b-medium\">{{ editMode ? 'Edit Track' : 'Upload Track' }}</h2>\n    \n    <form @submit.prevent=\"submitForm\" class=\"cols-1 gap-medium\">\n      <!-- Basic Info Section -->\n      <div class=\"bg-light pd-medium radius-medium\">\n        <h3 class=\"h3 mn-b-medium\">Basic Information</h3>\n        \n        <!-- Track Title -->\n        <Field\n          v-model:field=\"form.title\"\n          label=\"Track Title\"\n          placeholder=\"Enter track title\"\n          class=\"bg-white radius-small pd-small mn-b-thin\"\n          :validation=\"validationErrors.title\"\n        />\n        \n        <!-- URL -->\n        <Field\n          v-model:field=\"form.url\"\n          label=\"URL\"\n          placeholder=\"Leave blank for auto-generation based on the track title\"\n          class=\"bg-white radius-small pd-small mn-b-small\"\n        />\n\n        <!-- Artist Selection -->\n       \n\n     \n        \n        <!-- Release Date -->\n        <Field\n          v-model:field=\"form.releaseDate\"\n          label=\"Release Date\"\n          type=\"date\"\n          class=\"bg-white radius-small pd-small mn-b-thin\"\n          :validation=\"validationErrors.releaseDate\"\n        />\n      \n        <!-- Duration -->\n        <Field\n          v-model:field=\"form.duration\"\n          label=\"Duration (seconds)\"\n          type=\"number\"\n          placeholder=\"Track duration in seconds\"\n          class=\"bg-white radius-small pd-small mn-b-thin\"\n        />\n      </div>  \n\n         <Block title=\"Artist\">\n          <BlockMultiselect\n            v-model=\"form.artists\"\n            placeholder=\"Search artists...\"\n            :multiple=\"false\"\n            :transform=\"(item) => ({ _id: item._id, name: item.name })\"\n            :store=\"{\n              read: (options) => artistsActions.fetchArtists(options),\n              state: artistsState\n            }\"\n            :options=\"{\n              rootOnly: false,\n              excludeChildren: false,\n              limit: 50\n            }\"\n            :skeleton=\"{\n              hide: false,\n              horizontal: true,\n              class: 'radius-small',\n              structure: [{ \n                block: 'text', size: 'large'\n              }]\n            }\"\n            :states=\"{\n              empty: {\n                title: 'No artists found',\n                description: 'Try different search terms or create a new artist',\n                class: 'radius-small'\n              }\n            }\"\n            key=\"_id\"\n            :label=\"item => item.name\"\n            classSearch=\"bg-white radius-small\"\n            classSelected=\"bg-white pd-small radius-small\"\n            classDropdown=\"bg-white pd-small radius-medium bs-small\"\n            classItem=\"pd-small radius-small hover-bg-light cursor-pointer\"\n            classFeed=\"h-max-30r gap-thin flex-column flex o-scroll\"\n          >\n            <!-- Selected artist slot -->\n            <template #selected=\"{ item, clear }\">\n              <div class=\"flex-nowrap flex-v-center flex gap-thin\">\n                <span class=\"t-medium\">{{ item?.name || item }}</span>\n                <button \n                  @click.stop=\"clear\"\n                  class=\"i-small pd-micro bg-red radius-extra flex-center flex aspect-1x1 hover-scale-1\"\n                >\n                  <IconCross class=\"i-micro fill-white\" />\n                </button>\n              </div>\n            </template>\n            \n            <!-- Artist item slot -->\n            <template #item=\"{ item }\">\n              <div class=\"flex-nowrap flex-v-center flex\">\n                <div class=\"w-100\">\n                  <p class=\"t-medium\">{{ item.name }}</p>\n                  <p v-if=\"item.bio\" class=\"t-small t-transp\">{{ item.bio }}</p>\n                </div>\n              </div>\n            </template>\n          </BlockMultiselect>\n        </Block>\n\n         <!-- Album Selection -->\n        <Block title=\"Album (Optional)\">\n          <BlockMultiselect\n            v-model=\"form.albums\"\n            placeholder=\"Search albums...\"\n            :multiple=\"false\"\n            :transform=\"(item) => ({ _id: item._id, title: item.title })\"\n            :store=\"{\n              read: (options) => albumsActions.fetchAlbums(options),\n              state: albumsState\n            }\"\n            :options=\"{\n              rootOnly: false,\n              excludeChildren: false,\n              limit: 50\n            }\"\n            :skeleton=\"{\n              hide: false,\n              horizontal: true,\n              class: 'radius-small',\n              structure: [{ \n                block: 'text', size: 'large'\n              }]\n            }\"\n            :states=\"{\n              empty: {\n                title: 'No albums found',\n                description: 'Try different search terms or create a new album',\n                class: 'radius-small'\n              }\n            }\"\n            key=\"_id\"\n            :label=\"item => item.title\"\n            classSearch=\"bg-white radius-small\"\n            classSelected=\"bg-white pd-small radius-small\"\n            classDropdown=\"bg-white pd-small radius-medium bs-small\"\n            classItem=\"pd-small radius-small hover-bg-light cursor-pointer\"\n            classFeed=\"h-max-30r gap-thin flex-column flex o-scroll\"\n          >\n            <!-- Selected album slot -->\n            <template #selected=\"{ item, clear }\">\n              <div class=\"flex-nowrap flex-v-center flex gap-thin\">\n                <span class=\"t-medium\">{{ item?.title || item }}</span>\n                <button \n                  @click.stop=\"clear\"\n                  class=\"i-small pd-micro bg-red radius-extra flex-center flex aspect-1x1 hover-scale-1\"\n                >\n                  <IconCross class=\"i-micro fill-white\" />\n                </button>\n              </div>\n            </template>\n            \n            <!-- Album item slot -->\n            <template #item=\"{ item }\">\n              <div class=\"flex-nowrap flex-v-center flex\">\n                <div class=\"w-100\">\n                  <p class=\"t-medium\">{{ item.title }}</p>\n                  <p v-if=\"item.description\" class=\"t-small t-transp\">{{ item.description }}</p>\n                </div>\n              </div>\n            </template>\n          </BlockMultiselect>\n        </Block>\n      \n      <!-- Genres Section -->\n      <Block title=\"Genres\">\n        <BlockMultiselect\n          v-model=\"form.genres\"\n          placeholder=\"Search genres...\"\n          :multiple=\"true\"\n          :transform=\"(item) => ({ _id: item._id, name: item.name })\"\n          :store=\"{\n            read: (options) => genresActions.fetchGenres(options),\n            state: genresState\n          }\"\n          :options=\"{\n            rootOnly: false,\n            excludeChildren: false,\n            limit: 50\n          }\"\n          :skeleton=\"{\n            hide: false,\n            horizontal: true,\n            class: 'radius-small',\n            structure: [{ \n              block: 'text', size: 'large'\n            }]\n          }\"\n          :states=\"{\n            empty: {\n              title: 'No genres found',\n              description: 'Try different search terms or create a new genre',\n              class: 'radius-small'\n            }\n          }\"\n          key=\"_id\"\n          :label=\"item => item.name\"\n          classSearch=\"bg-white radius-small\"\n          classSelected=\"bg-white pd-small radius-small\"\n          classDropdown=\"bg-white pd-small radius-medium bs-small\"\n          classItem=\"pd-small radius-small hover-bg-light cursor-pointer\"\n          classFeed=\"h-max-30r gap-thin flex-column flex o-scroll\"\n        >\n          <!-- Selected genres slot -->\n          <template #selected=\"{ item, clear }\">\n            <div class=\"flex-nowrap flex-v-center flex gap-thin\">\n              <span class=\"t-medium\">{{ item?.name || item }}</span>\n              <button \n                @click.stop=\"clear\"\n                class=\"i-small pd-micro bg-red radius-extra flex-center flex aspect-1x1 hover-scale-1\"\n              >\n                <IconCross class=\"i-micro fill-white\" />\n              </button>\n            </div>\n          </template>\n          \n          <!-- Genre item slot -->\n          <template #item=\"{ item }\">\n            <div class=\"flex-nowrap flex-v-center flex\">\n              <div class=\"w-100\">\n                <p class=\"t-medium\">{{ item.name }}</p>\n                <p v-if=\"item.description\" class=\"t-small t-transp\">{{ item.description }}</p>\n              </div>\n            </div>\n          </template>\n        </BlockMultiselect>\n      </Block>\n      \n      <!-- Content Settings Section -->\n      <div class=\"bg-light pd-medium radius-medium\">\n        <h3 class=\"h3 mn-b-medium\">Content Settings</h3>\n        \n        <Checkbox\n          v-model:checkbox=\"form.isExplicit\"\n          label=\"Explicit Content\"\n          class=\"bg-white radius-small pd-small mn-b-thin\"\n        />\n        \n        <Checkbox\n          v-model:checkbox=\"form.isPublic\"\n          label=\"Public Track\"\n          class=\"bg-white radius-small pd-small mn-b-thin\"\n        />\n      </div>\n      \n      <!-- Media Section -->\n      <div class=\"bg-light pd-medium radius-medium\">\n        <h3 class=\"h3 mn-b-medium\">Media</h3>\n        \n        <div class=\"cols-2 mobile:cols-1 gap-medium\">\n          <!-- Track Cover -->\n          <div>\n            <p class=\"p-semi mn-b-small\">Cover Image</p>\n            <UploadImage\n              v-model:photo=\"form.coverUrl\"\n              uploadPath=\"tracks/covers\"\n              class=\"w-100 h-15r radius-small o-hidden mn-b-small\"\n              @error=\"handleUploadError\"\n            />\n          </div>\n          \n          <!-- Audio File -->\n          <div>\n            <p class=\"p-semi mn-b-small\">Audio File</p>\n            <Upload\n              v-model:field=\"form.fileUrl\"\n              @file-change=\"(url) => form.fileUrl = url\"\n              type=\"file\"\n              uploadPath=\"tracks/audio\"\n              class=\"w-100 h-15r bg-white radius-small pd-small\"\n              :validation=\"validationErrors.fileUrl\"\n            />\n          </div>\n        </div>\n      </div>\n      \n      <!-- Additional Info Section -->\n      <div class=\"bg-light pd-medium radius-medium\">\n        <h3 class=\"h3 mn-b-medium\">Additional Information</h3>\n        \n        <!-- Lyrics -->\n        <Field\n          v-model:field=\"form.lyrics\"\n          label=\"Lyrics (Optional)\"\n          type=\"textarea\"\n          placeholder=\"Enter track lyrics\"\n          class=\"bg-white radius-small pd-small mn-b-thin\"\n        />\n      </div>\n      \n      <!-- Status Section -->\n      <div class=\"bg-light pd-medium radius-medium\">\n        <h3 class=\"h3 mn-b-medium\">Publishing Status</h3>\n        \n        <Select\n          v-model:select=\"form.status\"\n          :options=\"statusOptions\"\n          label=\"Status\"\n          class=\"bg-white radius-small pd-small mn-b-thin\"\n        />\n      </div>\n      \n      <!-- Submit Button -->\n      <div class=\"flex flex-justify-between\">\n        <Button\n          @click=\"router.go(-1)\"\n          class=\"bg-grey-nano t-black\"\n          :showSucces=\"false\"\n          :showLoader=\"false\"\n        >\n          Cancel\n        </Button>\n        \n        <Button\n          :submit=\"submitForm\"\n          class=\"bg-main t-black\"\n          :text=\"{\n            success: editMode ? 'Updated!' : 'Uploaded!'\n          }\"\n        >\n          {{ editMode ? 'Update Track' : 'Upload Track' }}\n        </Button>\n      </div>\n    </form>\n  </div>\n</template>\n\n<script setup>\nimport { ref, reactive, onMounted, watch } from 'vue';\nimport { useRouter, useRoute } from 'vue-router';\n\n// Import Martyrs components\nimport Field from '@martyrs/src/components/Field/Field.vue';\nimport Block from '@martyrs/src/components/Block/Block.vue';\nimport Button from '@martyrs/src/components/Button/Button.vue';\nimport Checkbox from '@martyrs/src/components/Checkbox/Checkbox.vue';\nimport Select from '@martyrs/src/components/Select/Select.vue';\nimport UploadImage from '@martyrs/src/components/UploadImage/UploadImage.vue';\nimport Upload from '@martyrs/src/components/Upload/Upload.vue';\nimport IconCross from '@martyrs/src/modules/icons/navigation/IconCross.vue';\n\nimport BlockMultiselect from '@martyrs/src/modules/globals/views/components/blocks/BlockMultiselect.vue';\n\n// Import stores\nimport * as tracksStore from '../../store/tracks';\nimport * as artistsStore from '../../store/artists';\nimport * as albumsStore from '../../store/albums';\nimport * as genresStore from '../../store/genres';\nimport * as globals from '@martyrs/src/modules/globals/views/store/globals.js';\nimport * as auth from '@martyrs/src/modules/auth/views/store/auth.js';\n\n// Store states and actions\nconst { state: artistsState, actions: artistsActions } = artistsStore;\nconst { state: albumsState, actions: albumsActions } = albumsStore;\nconst { state: genresState, actions: genresActions } = genresStore;\n\n// Props\nconst props = defineProps({\n  editMode: {\n    type: Boolean,\n    default: false\n  },\n  url: {\n    type: String,\n    default: ''\n  }\n});\n\n// Router and route\nconst router = useRouter();\nconst route = useRoute();\n\nconst emit = defineEmits(['uploaded']);\n\n// State\nconst form = reactive({\n  title: '',\n  artists: [],\n  albums: [],\n  genres: [],\n  duration: 0,\n  fileUrl: '',\n  coverUrl: '',\n  releaseDate: new Date().toISOString().split('T')[0],\n  isExplicit: false,\n  isPublic: true,\n  lyrics: '',\n  url: '',\n  status: 'draft'\n});\n\nconst validationErrors = reactive({\n  title: false,\n  fileUrl: false,\n  releaseDate: false\n});\n\n// Track if URL was manually entered\nconst urlManuallySet = ref(false);\n\n// Status options\nconst statusOptions = [\n  'draft',\n  'published',\n  'archived'\n];\n\n// Function to generate URL-friendly slug from text\nconst generateSlug = (text) => {\n  if (!text) return '';\n  return text\n    .toLowerCase()\n    .replace(/[^a-z0-9\\s-]/g, '') // Remove special characters\n    .replace(/\\s+/g, '-') // Replace spaces with hyphens\n    .replace(/-+/g, '-') // Replace multiple hyphens with single\n    .trim('-'); // Remove leading/trailing hyphens\n};\n\n// Watch for changes in track title to auto-generate URL\nwatch(() => form.title, (newTitle) => {\n  // Only auto-generate if URL hasn't been manually set and we're not in edit mode\n  if (!urlManuallySet.value && !props.editMode) {\n    form.url = generateSlug(newTitle);\n  }\n});\n\n// Watch for manual changes to URL field\nwatch(() => form.url, (newUrl, oldUrl) => {\n  // If user manually changes URL, mark as manually set\n  if (newUrl !== generateSlug(form.title)) {\n    urlManuallySet.value = true;\n  }\n});\n\nconst fetchTrack = async () => {\n  if (!props.url) return;\n  \n  try {\n    const fetchedTrack = await tracksStore.actions.fetchTrackByUrl(props.url);\n    \n    if (!fetchedTrack) {\n      globals.actions.setError({\n        message: 'Track not found'\n      });\n      return;\n    }\n    \n    // Update local track data\n    Object.assign(form, {\n      title: fetchedTrack.title || '',\n      artists: fetchedTrack.artist ? [fetchedTrack.artist] : [],\n      albums: fetchedTrack.album ? [fetchedTrack.album] : [],\n      genres: fetchedTrack.genres || [],\n      duration: fetchedTrack.duration || 0,\n      fileUrl: fetchedTrack.fileUrl || '',\n      coverUrl: fetchedTrack.coverUrl || '',\n      releaseDate: fetchedTrack.releaseDate ? new Date(fetchedTrack.releaseDate).toISOString().split('T')[0] : '',\n      isExplicit: fetchedTrack.isExplicit || false,\n      isPublic: fetchedTrack.isPublic !== false,\n      lyrics: fetchedTrack.lyrics || '',\n      url: fetchedTrack.url || '',\n      status: fetchedTrack.status || 'draft',\n      _id: fetchedTrack._id\n    });\n    \n  } catch (error) {\n    console.error('Error fetching track:', error);\n    globals.actions.setError({\n      message: 'Failed to load track details'\n    });\n  }\n};\n\nconst validateForm = () => {\n  let isValid = true;\n  \n  // Validate title\n  if (!form.title.trim()) {\n    validationErrors.title = {\n      message: 'Track title is required'\n    };\n    isValid = false;\n  } else {\n    validationErrors.title = false;\n  }\n  \n  // Validate file URL\n  if (!form.fileUrl) {\n    validationErrors.fileUrl = {\n      message: 'Audio file is required'\n    };\n    isValid = false;\n  } else {\n    validationErrors.fileUrl = false;\n  }\n  \n  return isValid;\n};\n\nconst submitForm = async () => {\n  if (!validateForm()) {\n    return;\n  }\n  \n  try {\n    // Prepare data for submission\n    const formData = {\n      ...form,\n      artist: form.artists.length > 0 ? (form.artists[0]._id || form.artists[0]) : null,\n      album: form.albums.length > 0 ?? form.albums.map(album => album._id || genre),\n      genres: form.genres.map(genre => genre._id || genre)\n    };\n    \n    // Add ownership data if creating new track\n    if (!props.editMode) {\n      formData.owner = {\n        type: 'user',\n        target: auth.state.user._id\n      };\n      formData.creator = {\n        type: 'user',\n        target: auth.state.user._id\n      };\n    }\n    \n    let result;\n    if (props.editMode) {\n      result = await tracksStore.actions.updateTrack(formData);\n    } else {\n      result = await tracksStore.actions.createTrack(formData);\n    }\n    \n    // Navigate to track detail page\n    setTimeout(() => {\n      router.push({\n        name: 'track',\n        params: { url: result.url }\n      });\n    }, 1000);\n    \n  } catch (error) {\n    console.error('Error saving track:', error);\n    globals.actions.setError({\n      message: 'Failed to save track'\n    });\n  }\n};\nconst handleUploadError = (error) => {\n  console.error('Upload error:', error);\n  globals.actions.setError({\n    message: 'Error uploading file'\n  });\n};\n\n// Lifecycle hooks\nonMounted(async () => {\n  if (props.editMode) {\n    await fetchTrack();\n    // Mark URL as manually set in edit mode to prevent auto-generation\n    urlManuallySet.value = true;\n  }\n});\n</script>"],"names":["artistsStore","albumsStore","genresStore","useRouter","useRoute","reactive","ref","watch","tracksStore.actions","globals.actions","genre","auth.state","onMounted"],"mappings":"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"}
+{"version":3,"file":"TrackForm.vue.cjs","sources":["../../../../../../../src/modules/music/components/forms/TrackForm.vue"],"sourcesContent":["<!-- components/forms/TrackForm.vue -->\n<template>\n  <div class=\"pd-medium\">\n    <h2 class=\"h2 mn-b-medium\">{{ editMode ? 'Edit Track' : 'Upload Track' }}</h2>\n    \n    <form @submit.prevent=\"submitForm\" class=\"cols-1 gap-medium\">\n       <!-- Media Section -->\n      <div class=\"bg-light pd-medium radius-medium\">\n        <h3 class=\"h3 mn-b-medium\">Media</h3>\n        \n        <div class=\"cols-2-fit-content mobile:cols-1 gap-medium\">\n          <!-- Track Cover -->\n          <div>\n            <p class=\"p-semi mn-b-small\">Cover Image</p>\n            <UploadImage\n              v-model:photo=\"form.coverUrl\"\n              uploadPath=\"tracks/covers\"\n              class=\"aspect-1x1 h-15r radius-small o-hidden mn-b-small\"\n              @error=\"handleUploadError\"\n            />\n          </div>\n          \n          <!-- Audio File -->\n          <div>\n            <p class=\"p-semi mn-b-small\">Audio File</p>\n            <Upload\n              v-model:field=\"form.fileUrl\"\n              @file-change=\"(url) => form.fileUrl = url\"\n              type=\"file\"\n              uploadPath=\"tracks/audio\"\n              class=\"w-100 h-15r bg-white radius-small pd-small\"\n              :validation=\"validationErrors.fileUrl\"\n            />\n          </div>\n        </div>\n      </div>\n      \n      <!-- Basic Info Section -->\n      <div class=\"bg-light pd-medium radius-medium\">\n        <h3 class=\"h3 mn-b-medium\">Basic Information</h3>\n        \n        <!-- Track Title -->\n        <Field\n          v-model:field=\"form.title\"\n          label=\"Track Title\"\n          placeholder=\"Enter track title\"\n          class=\"bg-white radius-small pd-small mn-b-thin\"\n          :validation=\"validationErrors.title\"\n        />\n        \n        <!-- URL -->\n        <Field\n          v-model:field=\"form.url\"\n          label=\"URL\"\n          placeholder=\"Leave blank for auto-generation based on the track title\"\n          class=\"bg-white radius-small pd-small mn-b-small\"\n        />\n\n        <!-- Artist Selection -->\n       \n\n     \n        \n        <!-- Release Date -->\n        <Field\n          v-model:field=\"form.releaseDate\"\n          label=\"Release Date\"\n          type=\"date\"\n          class=\"bg-white radius-small pd-small mn-b-thin\"\n          :validation=\"validationErrors.releaseDate\"\n        />\n      \n        <!-- Duration -->\n        <Field\n          v-model:field=\"form.duration\"\n          label=\"Duration (seconds)\"\n          type=\"number\"\n          placeholder=\"Track duration in seconds\"\n          class=\"bg-white radius-small pd-small mn-b-thin\"\n        />\n      </div>  \n\n         <Block title=\"Artist\">\n          <BlockMultiselect\n            v-model=\"form.artists\"\n            placeholder=\"Search artists...\"\n            :multiple=\"false\"\n            :transform=\"(item) => ({ _id: item._id, name: item.name })\"\n            :store=\"{\n              read: (options) => artistsActions.fetchArtists(options),\n              state: artistsState\n            }\"\n            :options=\"{\n              rootOnly: false,\n              excludeChildren: false,\n              limit: 50\n            }\"\n            :skeleton=\"{\n              hide: false,\n              horizontal: true,\n              class: 'radius-small',\n              structure: [{ \n                block: 'text', size: 'large'\n              }]\n            }\"\n            :states=\"{\n              empty: {\n                title: 'No artists found',\n                description: 'Try different search terms or create a new artist',\n                class: 'radius-small'\n              }\n            }\"\n            key=\"_id\"\n            :label=\"item => item.name\"\n            classSearch=\"bg-white radius-small\"\n            classSelected=\"bg-white pd-small radius-small\"\n            classDropdown=\"bg-white pd-small radius-medium bs-small\"\n            classItem=\"pd-small radius-small hover-bg-light cursor-pointer\"\n            classFeed=\"h-max-30r gap-thin flex-column flex o-scroll\"\n          >\n            <!-- Selected artist slot -->\n            <template #selected=\"{ item, clear }\">\n              <div class=\"flex-nowrap flex-v-center flex gap-thin\">\n                <span class=\"t-medium\">{{ item?.name || item }}</span>\n                <button \n                  @click.stop=\"clear\"\n                  class=\"i-small pd-micro bg-red radius-extra flex-center flex aspect-1x1 hover-scale-1\"\n                >\n                  <IconCross class=\"i-micro fill-white\" />\n                </button>\n              </div>\n            </template>\n            \n            <!-- Artist item slot -->\n            <template #item=\"{ item }\">\n              <div class=\"flex-nowrap flex-v-center flex\">\n                <div class=\"w-100\">\n                  <p class=\"t-medium\">{{ item.name }}</p>\n                  <p v-if=\"item.bio\" class=\"t-small t-transp\">{{ item.bio }}</p>\n                </div>\n              </div>\n            </template>\n          </BlockMultiselect>\n        </Block>\n\n         <!-- Album Selection -->\n        <Block title=\"Album (Optional)\">\n          <BlockMultiselect\n            v-model=\"form.albums\"\n            placeholder=\"Search albums...\"\n            :multiple=\"false\"\n            :transform=\"(item) => ({ _id: item._id, title: item.title })\"\n            :store=\"{\n              read: (options) => albumsActions.fetchAlbums(options),\n              state: albumsState\n            }\"\n            :options=\"{\n              rootOnly: false,\n              excludeChildren: false,\n              limit: 50\n            }\"\n            :skeleton=\"{\n              hide: false,\n              horizontal: true,\n              class: 'radius-small',\n              structure: [{ \n                block: 'text', size: 'large'\n              }]\n            }\"\n            :states=\"{\n              empty: {\n                title: 'No albums found',\n                description: 'Try different search terms or create a new album',\n                class: 'radius-small'\n              }\n            }\"\n            key=\"_id\"\n            :label=\"item => item.title\"\n            classSearch=\"bg-white radius-small\"\n            classSelected=\"bg-white pd-small radius-small\"\n            classDropdown=\"bg-white pd-small radius-medium bs-small\"\n            classItem=\"pd-small radius-small hover-bg-light cursor-pointer\"\n            classFeed=\"h-max-30r gap-thin flex-column flex o-scroll\"\n          >\n            <!-- Selected album slot -->\n            <template #selected=\"{ item, clear }\">\n              <div class=\"flex-nowrap flex-v-center flex gap-thin\">\n                <span class=\"t-medium\">{{ item?.title || item }}</span>\n                <button \n                  @click.stop=\"clear\"\n                  class=\"i-small pd-micro bg-red radius-extra flex-center flex aspect-1x1 hover-scale-1\"\n                >\n                  <IconCross class=\"i-micro fill-white\" />\n                </button>\n              </div>\n            </template>\n            \n            <!-- Album item slot -->\n            <template #item=\"{ item }\">\n              <div class=\"flex-nowrap flex-v-center flex\">\n                <div class=\"w-100\">\n                  <p class=\"t-medium\">{{ item.title }}</p>\n                  <p v-if=\"item.description\" class=\"t-small t-transp\">{{ item.description }}</p>\n                </div>\n              </div>\n            </template>\n          </BlockMultiselect>\n        </Block>\n      \n      <!-- Genres Section -->\n      <Block title=\"Genres\">\n        <BlockMultiselect\n          v-model=\"form.genres\"\n          placeholder=\"Search genres...\"\n          :multiple=\"true\"\n          :transform=\"(item) => ({ _id: item._id, name: item.name })\"\n          :store=\"{\n            read: (options) => genresActions.fetchGenres(options),\n            state: genresState\n          }\"\n          :options=\"{\n            rootOnly: false,\n            excludeChildren: false,\n            limit: 50\n          }\"\n          :skeleton=\"{\n            hide: false,\n            horizontal: true,\n            class: 'radius-small',\n            structure: [{ \n              block: 'text', size: 'large'\n            }]\n          }\"\n          :states=\"{\n            empty: {\n              title: 'No genres found',\n              description: 'Try different search terms or create a new genre',\n              class: 'radius-small'\n            }\n          }\"\n          key=\"_id\"\n          :label=\"item => item.name\"\n          classSearch=\"bg-white radius-small\"\n          classSelected=\"bg-white pd-small radius-small\"\n          classDropdown=\"bg-white pd-small radius-medium bs-small\"\n          classItem=\"pd-small radius-small hover-bg-light cursor-pointer\"\n          classFeed=\"h-max-30r gap-thin flex-column flex o-scroll\"\n        >\n          <!-- Selected genres slot -->\n          <template #selected=\"{ item, clear }\">\n            <div class=\"flex-nowrap flex-v-center flex gap-thin\">\n              <span class=\"t-medium\">{{ item?.name || item }}</span>\n              <button \n                @click.stop=\"clear\"\n                class=\"i-small pd-micro bg-red radius-extra flex-center flex aspect-1x1 hover-scale-1\"\n              >\n                <IconCross class=\"i-micro fill-white\" />\n              </button>\n            </div>\n          </template>\n          \n          <!-- Genre item slot -->\n          <template #item=\"{ item }\">\n            <div class=\"flex-nowrap flex-v-center flex\">\n              <div class=\"w-100\">\n                <p class=\"t-medium\">{{ item.name }}</p>\n                <p v-if=\"item.description\" class=\"t-small t-transp\">{{ item.description }}</p>\n              </div>\n            </div>\n          </template>\n        </BlockMultiselect>\n      </Block>\n      \n      <!-- Content Settings Section -->\n      <div class=\"bg-light pd-medium radius-medium\">\n        <h3 class=\"h3 mn-b-medium\">Content Settings</h3>\n        \n        <Checkbox\n          v-model:checkbox=\"form.isExplicit\"\n          label=\"Explicit Content\"\n          class=\"bg-white radius-small pd-small mn-b-thin\"\n        />\n        \n        <Checkbox\n          v-model:checkbox=\"form.isPublic\"\n          label=\"Public Track\"\n          class=\"bg-white radius-small pd-small mn-b-thin\"\n        />\n      </div>\n      \n     \n      \n      <!-- Additional Info Section -->\n      <div class=\"bg-light pd-medium radius-medium\">\n        <h3 class=\"h3 mn-b-medium\">Additional Information</h3>\n        \n        <!-- Lyrics -->\n        <Field\n          v-model:field=\"form.lyrics\"\n          label=\"Lyrics (Optional)\"\n          type=\"textarea\"\n          placeholder=\"Enter track lyrics\"\n          class=\"bg-white radius-small pd-small mn-b-thin\"\n        />\n      </div>\n      \n      <!-- Status Section -->\n      <div class=\"bg-light pd-medium radius-medium\">\n        <h3 class=\"h3 mn-b-medium\">Publishing Status</h3>\n        \n        <Select\n          v-model:select=\"form.status\"\n          :options=\"statusOptions\"\n          label=\"Status\"\n          class=\"bg-white radius-small pd-small mn-b-thin\"\n        />\n      </div>\n      \n      <!-- Submit Button -->\n      <div class=\"flex flex-justify-between\">\n        <Button\n          @click=\"router.go(-1)\"\n          class=\"bg-grey-nano t-black\"\n          :showSucces=\"false\"\n          :showLoader=\"false\"\n        >\n          Cancel\n        </Button>\n        \n        <Button\n          :submit=\"submitForm\"\n          class=\"bg-main t-black\"\n          :text=\"{\n            success: editMode ? 'Updated!' : 'Uploaded!'\n          }\"\n        >\n          {{ editMode ? 'Update Track' : 'Upload Track' }}\n        </Button>\n      </div>\n    </form>\n  </div>\n</template>\n\n<script setup>\nimport { ref, reactive, onMounted, watch } from 'vue';\nimport { useRouter, useRoute } from 'vue-router';\n\n// Import Martyrs components\nimport Field from '@martyrs/src/components/Field/Field.vue';\nimport Block from '@martyrs/src/components/Block/Block.vue';\nimport Button from '@martyrs/src/components/Button/Button.vue';\nimport Checkbox from '@martyrs/src/components/Checkbox/Checkbox.vue';\nimport Select from '@martyrs/src/components/Select/Select.vue';\nimport UploadImage from '@martyrs/src/components/UploadImage/UploadImage.vue';\nimport Upload from '@martyrs/src/components/Upload/Upload.vue';\nimport IconCross from '@martyrs/src/modules/icons/navigation/IconCross.vue';\n\nimport BlockMultiselect from '@martyrs/src/modules/globals/views/components/blocks/BlockMultiselect.vue';\n\n// Import stores\nimport * as tracksStore from '../../store/tracks';\nimport * as artistsStore from '../../store/artists';\nimport * as albumsStore from '../../store/albums';\nimport * as genresStore from '../../store/genres';\nimport * as globals from '@martyrs/src/modules/globals/views/store/globals.js';\nimport * as auth from '@martyrs/src/modules/auth/views/store/auth.js';\n\n// Store states and actions\nconst { state: artistsState, actions: artistsActions } = artistsStore;\nconst { state: albumsState, actions: albumsActions } = albumsStore;\nconst { state: genresState, actions: genresActions } = genresStore;\n\n// Props\nconst props = defineProps({\n  editMode: {\n    type: Boolean,\n    default: false\n  },\n  url: {\n    type: String,\n    default: ''\n  }\n});\n\n// Router and route\nconst router = useRouter();\nconst route = useRoute();\n\nconst emit = defineEmits(['uploaded']);\n\n// State\nconst form = reactive({\n  title: '',\n  artists: [],\n  albums: [],\n  genres: [],\n  duration: 0,\n  fileUrl: '',\n  coverUrl: '',\n  releaseDate: new Date().toISOString().split('T')[0],\n  isExplicit: false,\n  isPublic: true,\n  lyrics: '',\n  url: '',\n  status: 'draft'\n});\n\nconst validationErrors = reactive({\n  title: false,\n  fileUrl: false,\n  releaseDate: false\n});\n\n// Track if URL was manually entered\nconst urlManuallySet = ref(false);\n\n// Status options\nconst statusOptions = [\n  'draft',\n  'published',\n  'archived'\n];\n\n// Function to generate URL-friendly slug from text\nconst generateSlug = (text) => {\n  if (!text) return '';\n  return text\n    .toLowerCase()\n    .replace(/[^a-z0-9\\s-]/g, '') // Remove special characters\n    .replace(/\\s+/g, '-') // Replace spaces with hyphens\n    .replace(/-+/g, '-') // Replace multiple hyphens with single\n    .trim('-'); // Remove leading/trailing hyphens\n};\n\n// Watch for changes in track title to auto-generate URL\nwatch(() => form.title, (newTitle) => {\n  // Only auto-generate if URL hasn't been manually set and we're not in edit mode\n  if (!urlManuallySet.value && !props.editMode) {\n    form.url = generateSlug(newTitle);\n  }\n});\n\n// Watch for manual changes to URL field\nwatch(() => form.url, (newUrl, oldUrl) => {\n  // If user manually changes URL, mark as manually set\n  if (newUrl !== generateSlug(form.title)) {\n    urlManuallySet.value = true;\n  }\n});\n\nconst fetchTrack = async () => {\n  if (!props.url) return;\n  \n  try {\n    const fetchedTrack = await tracksStore.actions.fetchTrackByUrl(props.url);\n    \n    if (!fetchedTrack) {\n      globals.actions.setError({\n        message: 'Track not found'\n      });\n      return;\n    }\n    \n    // Update local track data\n    Object.assign(form, {\n      title: fetchedTrack.title || '',\n      artists: fetchedTrack.artist ? [fetchedTrack.artist] : [],\n      albums: fetchedTrack.album ? [fetchedTrack.album] : [],\n      genres: fetchedTrack.genres || [],\n      duration: fetchedTrack.duration || 0,\n      fileUrl: fetchedTrack.fileUrl || '',\n      coverUrl: fetchedTrack.coverUrl || '',\n      releaseDate: fetchedTrack.releaseDate ? new Date(fetchedTrack.releaseDate).toISOString().split('T')[0] : '',\n      isExplicit: fetchedTrack.isExplicit || false,\n      isPublic: fetchedTrack.isPublic !== false,\n      lyrics: fetchedTrack.lyrics || '',\n      url: fetchedTrack.url || '',\n      status: fetchedTrack.status || 'draft',\n      _id: fetchedTrack._id\n    });\n    \n  } catch (error) {\n    console.error('Error fetching track:', error);\n    globals.actions.setError({\n      message: 'Failed to load track details'\n    });\n  }\n};\n\nconst validateForm = () => {\n  let isValid = true;\n  \n  // Validate title\n  if (!form.title.trim()) {\n    validationErrors.title = {\n      message: 'Track title is required'\n    };\n    isValid = false;\n  } else {\n    validationErrors.title = false;\n  }\n  \n  // Validate file URL\n  if (!form.fileUrl) {\n    validationErrors.fileUrl = {\n      message: 'Audio file is required'\n    };\n    isValid = false;\n  } else {\n    validationErrors.fileUrl = false;\n  }\n  \n  return isValid;\n};\n\nconst submitForm = async () => {\n  if (!validateForm()) {\n    return;\n  }\n  \n  try {\n    console.log('=== FORM DATA DEBUG ===');\n    console.log('form.artists:', form.artists);\n    console.log('form.albums:', form.albums);\n    console.log('form.albums.length:', form.albums.length);\n    console.log('form.albums[0]:', form.albums[0]);\n    console.log('form.albums[0]?._id:', form.albums[0]?._id);\n    \n    // Prepare data for submission\n    const formData = {\n      ...form,\n      artist: form.artists.length > 0 ? (form.artists[0]._id || form.artists[0]) : null,\n      album: form.albums && form.albums._id ? form.albums._id : null,\n      genre: form.genres.map(genre => genre._id || genre)\n    };\n    \n    // Remove the original arrays/objects to avoid conflicts\n    delete formData.artists;\n    delete formData.albums;\n    delete formData.genres;\n    \n    console.log('formData after preparation:', formData);\n    console.log('formData.album:', formData.album);\n    console.log('typeof formData.album:', typeof formData.album);\n    \n    // Add ownership data if creating new track\n    if (!props.editMode) {\n      formData.owner = {\n        type: 'user',\n        target: auth.state.user._id\n      };\n      formData.creator = {\n        type: 'user',\n        target: auth.state.user._id\n      };\n    }\n    \n    let result;\n    if (props.editMode) {\n      result = await tracksStore.actions.updateTrack(formData);\n    } else {\n      result = await tracksStore.actions.createTrack(formData);\n    }\n    \n    // Navigate to track detail page\n    setTimeout(() => {\n      router.push({\n        name: 'track',\n        params: { url: result.url }\n      });\n    }, 1000);\n    \n  } catch (error) {\n    console.error('Error saving track:', error);\n    globals.actions.setError({\n      message: 'Failed to save track'\n    });\n  }\n};\nconst handleUploadError = (error) => {\n  console.error('Upload error:', error);\n  globals.actions.setError({\n    message: 'Error uploading file'\n  });\n};\n\n// Lifecycle hooks\nonMounted(async () => {\n  if (props.editMode) {\n    await fetchTrack();\n    // Mark URL as manually set in edit mode to prevent auto-generation\n    urlManuallySet.value = true;\n  }\n});\n</script>"],"names":["artistsStore","albumsStore","genresStore","useRouter","useRoute","reactive","ref","watch","tracksStore.actions","globals.actions","auth.state","onMounted"],"mappings":"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"}