npm - @ozdao/martyrs - Versions diffs - 0.2.571 → 0.2.574 - Mend

@ozdao/martyrs 0.2.571 → 0.2.574

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (819) hide show

package/dist/martyrs/src/modules/music/components/cards/TrackListCard.vue.js CHANGED Viewed

@@ -19,7 +19,7 @@ const _hoisted_6 = { key: 1 };
 const _hoisted_7 = { key: 1 };
 const _hoisted_8 = {
   key: 0,
-  class: "track-album w-15r mobile:w-0 mobile:hidden t-transp t-truncate"
+  class: "track-album w-15r mobile:w-0 mobile:hidden t-transp truncate"
 };
 const _hoisted_9 = { key: 1 };
 const _hoisted_10 = { class: "track-duration w-5r t-right t-transp" };
@@ -72,7 +72,7 @@ const _sfc_main = {
     return (_ctx, _cache) => {
       const _component_router_link = resolveComponent("router-link");
       return openBlock(), createElementBlock("div", {
-        class: normalizeClass(["track-item pd-small hover-bg-white-transp-25 flex-v-center flex cursor-pointer", { "bg-main-transp-10": isPlaying(__props.track) }]),
+        class: normalizeClass(["track-item pd-small hover:bg-white-transp-25 flex-v-center flex cursor-pointer", { "bg-main-transp-10": isPlaying(__props.track) }]),
         onClick: _cache[7] || (_cache[7] = ($event) => playTrack(__props.track)),
         onDblclick: _cache[8] || (_cache[8] = ($event) => playTrack(__props.track, true)),
         onMouseenter: _cache[9] || (_cache[9] = ($event) => hoveredIndex.value = props.index),
@@ -125,7 +125,7 @@ const _sfc_main = {
               __props.track.url ? (openBlock(), createBlock(_component_router_link, {
                 key: 0,
                 to: "/music/tracks/" + __props.track.url,
-                class: normalizeClass(["hover-t-main hover-t-underline", { "t-main": isPlaying(__props.track) }]),
+                class: normalizeClass(["hover:t-main hover:underline", { "t-main": isPlaying(__props.track) }]),
                 onClick: _cache[4] || (_cache[4] = withModifiers(() => {
                 }, ["stop"]))
               }, {
@@ -141,7 +141,7 @@ const _sfc_main = {
               __props.track.artist && __props.track.artist._id ? (openBlock(), createBlock(_component_router_link, {
                 key: 0,
                 to: "/music/artists/" + __props.track.artist.url,
-                class: "t-transp hover-t-underline",
+                class: "t-transp hover:underline",
                 onClick: _cache[5] || (_cache[5] = withModifiers(() => {
                 }, ["stop"]))
               }, {
@@ -157,7 +157,7 @@ const _sfc_main = {
           __props.track.album && __props.track.album._id ? (openBlock(), createBlock(_component_router_link, {
             key: 0,
             to: "/music/albums/" + __props.track.album.url,
-            class: "t-transp hover-t-underline",
+            class: "t-transp hover:underline",
             onClick: _cache[6] || (_cache[6] = withModifiers(() => {
             }, ["stop"]))
           }, {

package/dist/martyrs/src/modules/music/components/cards/TrackListCard.vue.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"TrackListCard.vue.js","sources":["../../../../../../../src/modules/music/components/cards/TrackListCard.vue"],"sourcesContent":["<!-- components/cards/TrackListCard.vue -->\n<template>\n <div \n class=\"track-item pd-small hover-bg-white-transp-25 flex-v-center flex cursor-pointer\"\n :class=\"{'bg-main-transp-10': isPlaying(track)}\"\n @click=\"playTrack(track)\"\n @dblclick=\"playTrack(track, true)\"\n @mouseenter=\"hoveredIndex = props.index\"\n @mouseleave=\"hoveredIndex = -1\"\n >\n <div class=\"track-number w-3r t-center pos-relative\">\n <span v-if=\"!isPlaying(track) && hoveredIndex !== props.index\" class=\"t-transp\">{{ props.index + 1 }}</span>\n <Button \n v-else-if=\"!isPlaying(track) && hoveredIndex === props.index\"\n @click.stop=\"playTrack(track)\"\n class=\"bg-main pd-thin\"\n :showLoader=\"false\"\n :showSucces=\"false\"\n >\n <IconPlay @click.stop=\"playTrack(track)\" class=\"i-small\" fill=\"rgb(var(--white))\"/>\n </Button>\n <Button \n v-else\n @click.stop=\"pauseTrack()\"\n class=\"bg-main pd-thin\"\n :showLoader=\"false\"\n :showSucces=\"false\"\n >\n <IconPause @click.stop=\"pauseTrack()\" class=\"i-small\" fill=\"rgb(var(--white))\"/>\n </Button>\n </div>\n \n <div class=\"track-title flex-child-1 flex flex-v-center\">\n <div v-if=\"showCover\" class=\"track-cover mn-r-small\">\n <Media \n :url=\"track.coverUrl \|\| (track.album && track.album.coverUrl) \|\| '/logo/logo-placeholder.jpg'\" \n class=\"w-3r h-3r object-fit-cover o-hidden radius-small\"\n />\n </div>\n \n <div class=\"track-info\">\n <div class=\"track-name \" :class=\"{'t-main': isPlaying(track)}\">\n <router-link\n v-if=\"track.url\"\n :to=\"'/music/tracks/' + track.url\"\n class=\"hover-t-main hover~~-t-~~underline\"\n :class=\"{'t-main': isPlaying(track)}\"\n @click.stop\n >\n {{ track.title }}\n </router-link>\n <span v-else>{{ track.title }}</span>\n </div>\n <div :class=\"{'t-main': isPlaying(track)}\" class=\"track-artist t-transp t-small\">\n <router-link\n v-if=\"track.artist && track.artist._id\"\n :to=\"'/music/artists/' + track.artist.url\"\n class=\"t-transp hover~~-t-~~underline\"\n @click.stop\n >\n {{ getArtistName(track) }}\n </router-link>\n <span v-else>{{ getArtistName(track) }}</span>\n </div>\n </div>\n </div>\n \n <div v-if=\"showAlbum\" class=\"track-album w-15r mobile:w-0 mobile:hidden t-transp t-truncate\">\n <router-link\n v-if=\"track.album && track.album._id\"\n :to=\"'/music/albums/' + track.album.url\"\n class=\"t-transp hover~~-t-~~underline\"\n @click.stop\n >\n {{ track.album.title }}\n </router-link>\n <span v-else>{{ track.album?.title \|\| 'Single' }}</span>\n </div>\n \n <div class=\"track-duration w-5r t-right t-transp\">{{ formatDuration(track.duration) }}</div>\n </div>\n</template>\n\n<script setup>\nimport { ref } from 'vue';\nimport Button from '@martyrs/src/components/Button/Button.vue';\nimport Media from '@martyrs/src/components/Media/Media.vue';\nimport IconPlay from '@martyrs/src/modules/icons/navigation/IconPlay.vue';\nimport IconPause from '@martyrs/src/modules/icons/navigation/IconPause.vue';\n\n// Import player store\nimport { state as playerState, actions as playerActions } from '../../store/player.js';\n\n// Props\nconst props = defineProps({\n track: {\n type: Object,\n required: true\n },\n index: {\n type: Number,\n default: 0\n },\n showCover: {\n type: Boolean,\n default: true\n },\n showAlbum: {\n type: Boolean,\n default: true\n }\n});\n\n// State\nconst hoveredIndex = ref(-1);\n\n// Methods\nconst isPlaying = (track) => {\n return playerState.currentTrack && playerState.currentTrack._id === track._id && playerState.isPlaying;\n};\n\nconst playTrack = (track, force = false) => {\n if (isPlaying(track) && !force) {\n playerActions.togglePlay();\n } else {\n playerActions.playTrack(track);\n }\n};\n\nconst pauseTrack = () => {\n playerActions.togglePlay();\n};\n\nconst getArtistName = (track) => {\n if (!track \|\| !track.artist) return 'Unknown Artist';\n return typeof track.artist === 'object' ? track.artist.name : 'Unknown Artist';\n};\n\nconst formatDuration = (duration) => {\n if (!duration) return '--:--';\n \n const minutes = Math.floor(duration / 60);\n const seconds = Math.floor(duration % 60);\n return `${minutes}:${seconds.toString().padStart(2, '0')}`;\n};\n</script>"],"names":["playerState","playerActions"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA8FA,UAAM,QAAQ;AAoBd,UAAM,eAAe,IAAI,EAAE;AAG3B,UAAM,YAAY,CAAC,UAAU;AAC3B,aAAOA,MAAY,gBAAgBA,MAAY,aAAa,QAAQ,MAAM,OAAOA,MAAY;AAAA,IAC/F;AAEA,UAAM,YAAY,CAAC,OAAO,QAAQ,UAAU;AAC1C,UAAI,UAAU,KAAK,KAAK,CAAC,OAAO;AAC9BC,gBAAc,WAAU;AAAA,MAC1B,OAAO;AACLA,gBAAc,UAAU,KAAK;AAAA,MAC/B;AAAA,IACF;AAEA,UAAM,aAAa,MAAM;AACvBA,cAAc,WAAU;AAAA,IAC1B;AAEA,UAAM,gBAAgB,CAAC,UAAU;AAC/B,UAAI,CAAC,SAAS,CAAC,MAAM,OAAQ,QAAO;AACpC,aAAO,OAAO,MAAM,WAAW,WAAW,MAAM,OAAO,OAAO;AAAA,IAChE;AAEA,UAAM,iBAAiB,CAAC,aAAa;AACnC,UAAI,CAAC,SAAU,QAAO;AAEtB,YAAM,UAAU,KAAK,MAAM,WAAW,EAAE;AACxC,YAAM,UAAU,KAAK,MAAM,WAAW,EAAE;AACxC,aAAO,GAAG,OAAO,IAAI,QAAQ,SAAQ,EAAG,SAAS,GAAG,GAAG,CAAC;AAAA,IAC1D;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
1	+ {"version":3,"file":"TrackListCard.vue.js","sources":["../../../../../../../src/modules/music/components/cards/TrackListCard.vue"],"sourcesContent":["<!-- components/cards/TrackListCard.vue -->\n<template>\n <div \n class=\"track-item pd-small hover:bg-white-transp-25 flex-v-center flex cursor-pointer\"\n :class=\"{'bg-main-transp-10': isPlaying(track)}\"\n @click=\"playTrack(track)\"\n @dblclick=\"playTrack(track, true)\"\n @mouseenter=\"hoveredIndex = props.index\"\n @mouseleave=\"hoveredIndex = -1\"\n >\n <div class=\"track-number w-3r t-center pos-relative\">\n <span v-if=\"!isPlaying(track) && hoveredIndex !== props.index\" class=\"t-transp\">{{ props.index + 1 }}</span>\n <Button \n v-else-if=\"!isPlaying(track) && hoveredIndex === props.index\"\n @click.stop=\"playTrack(track)\"\n class=\"bg-main pd-thin\"\n :showLoader=\"false\"\n :showSucces=\"false\"\n >\n <IconPlay @click.stop=\"playTrack(track)\" class=\"i-small\" fill=\"rgb(var(--white))\"/>\n </Button>\n <Button \n v-else\n @click.stop=\"pauseTrack()\"\n class=\"bg-main pd-thin\"\n :showLoader=\"false\"\n :showSucces=\"false\"\n >\n <IconPause @click.stop=\"pauseTrack()\" class=\"i-small\" fill=\"rgb(var(--white))\"/>\n </Button>\n </div>\n \n <div class=\"track-title flex-child-1 flex flex-v-center\">\n <div v-if=\"showCover\" class=\"track-cover mn-r-small\">\n <Media \n :url=\"track.coverUrl \|\| (track.album && track.album.coverUrl) \|\| '/logo/logo-placeholder.jpg'\" \n class=\"w-3r h-3r object-fit-cover o-hidden radius-small\"\n />\n </div>\n \n <div class=\"track-info\">\n <div class=\"track-name \" :class=\"{'t-main': isPlaying(track)}\">\n <router-link\n v-if=\"track.url\"\n :to=\"'/music/tracks/' + track.url\"\n class=\"hover:t-main hover:underline\"\n :class=\"{'t-main': isPlaying(track)}\"\n @click.stop\n >\n {{ track.title }}\n </router-link>\n <span v-else>{{ track.title }}</span>\n </div>\n <div :class=\"{'t-main': isPlaying(track)}\" class=\"track-artist t-transp t-small\">\n <router-link\n v-if=\"track.artist && track.artist._id\"\n :to=\"'/music/artists/' + track.artist.url\"\n class=\"t-transp hover:underline\"\n @click.stop\n >\n {{ getArtistName(track) }}\n </router-link>\n <span v-else>{{ getArtistName(track) }}</span>\n </div>\n </div>\n </div>\n \n <div v-if=\"showAlbum\" class=\"track-album w-15r mobile:w-0 mobile:hidden t-transp truncate\">\n <router-link\n v-if=\"track.album && track.album._id\"\n :to=\"'/music/albums/' + track.album.url\"\n class=\"t-transp hover:underline\"\n @click.stop\n >\n {{ track.album.title }}\n </router-link>\n <span v-else>{{ track.album?.title \|\| 'Single' }}</span>\n </div>\n \n <div class=\"track-duration w-5r t-right t-transp\">{{ formatDuration(track.duration) }}</div>\n </div>\n</template>\n\n<script setup>\nimport { ref } from 'vue';\nimport Button from '@martyrs/src/components/Button/Button.vue';\nimport Media from '@martyrs/src/components/Media/Media.vue';\nimport IconPlay from '@martyrs/src/modules/icons/navigation/IconPlay.vue';\nimport IconPause from '@martyrs/src/modules/icons/navigation/IconPause.vue';\n\n// Import player store\nimport { state as playerState, actions as playerActions } from '../../store/player.js';\n\n// Props\nconst props = defineProps({\n track: {\n type: Object,\n required: true\n },\n index: {\n type: Number,\n default: 0\n },\n showCover: {\n type: Boolean,\n default: true\n },\n showAlbum: {\n type: Boolean,\n default: true\n }\n});\n\n// State\nconst hoveredIndex = ref(-1);\n\n// Methods\nconst isPlaying = (track) => {\n return playerState.currentTrack && playerState.currentTrack._id === track._id && playerState.isPlaying;\n};\n\nconst playTrack = (track, force = false) => {\n if (isPlaying(track) && !force) {\n playerActions.togglePlay();\n } else {\n playerActions.playTrack(track);\n }\n};\n\nconst pauseTrack = () => {\n playerActions.togglePlay();\n};\n\nconst getArtistName = (track) => {\n if (!track \|\| !track.artist) return 'Unknown Artist';\n return typeof track.artist === 'object' ? track.artist.name : 'Unknown Artist';\n};\n\nconst formatDuration = (duration) => {\n if (!duration) return '--:--';\n \n const minutes = Math.floor(duration / 60);\n const seconds = Math.floor(duration % 60);\n return `${minutes}:${seconds.toString().padStart(2, '0')}`;\n};\n</script>"],"names":["playerState","playerActions"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA8FA,UAAM,QAAQ;AAoBd,UAAM,eAAe,IAAI,EAAE;AAG3B,UAAM,YAAY,CAAC,UAAU;AAC3B,aAAOA,MAAY,gBAAgBA,MAAY,aAAa,QAAQ,MAAM,OAAOA,MAAY;AAAA,IAC/F;AAEA,UAAM,YAAY,CAAC,OAAO,QAAQ,UAAU;AAC1C,UAAI,UAAU,KAAK,KAAK,CAAC,OAAO;AAC9BC,gBAAc,WAAU;AAAA,MAC1B,OAAO;AACLA,gBAAc,UAAU,KAAK;AAAA,MAC/B;AAAA,IACF;AAEA,UAAM,aAAa,MAAM;AACvBA,cAAc,WAAU;AAAA,IAC1B;AAEA,UAAM,gBAAgB,CAAC,UAAU;AAC/B,UAAI,CAAC,SAAS,CAAC,MAAM,OAAQ,QAAO;AACpC,aAAO,OAAO,MAAM,WAAW,WAAW,MAAM,OAAO,OAAO;AAAA,IAChE;AAEA,UAAM,iBAAiB,CAAC,aAAa;AACnC,UAAI,CAAC,SAAU,QAAO;AAEtB,YAAM,UAAU,KAAK,MAAM,WAAW,EAAE;AACxC,YAAM,UAAU,KAAK,MAAM,WAAW,EAAE;AACxC,aAAO,GAAG,OAAO,IAAI,QAAQ,SAAQ,EAAG,SAAS,GAAG,GAAG,CAAC;AAAA,IAC1D;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/martyrs/src/modules/music/components/forms/AlbumForm.vue.js CHANGED Viewed

@@ -17,21 +17,21 @@ const _hoisted_2 = { class: "h2 mn-b-medium" };
 const _hoisted_3 = { class: "bg-light pd-medium radius-medium" };
 const _hoisted_4 = { class: "mn-b-medium" };
 const _hoisted_5 = { class: "flex-nowrap flex-v-center flex gap-thin" };
-const _hoisted_6 = { class: "t-medium" };
+const _hoisted_6 = { class: "fw-medium" };
 const _hoisted_7 = ["onClick"];
 const _hoisted_8 = { class: "flex-nowrap flex-v-center flex" };
 const _hoisted_9 = { class: "w-100" };
-const _hoisted_10 = { class: "t-medium" };
+const _hoisted_10 = { class: "fw-medium" };
 const _hoisted_11 = {
   key: 0,
   class: "t-small t-transp"
 };
 const _hoisted_12 = { class: "flex-nowrap flex-v-center flex gap-thin" };
-const _hoisted_13 = { class: "t-medium" };
+const _hoisted_13 = { class: "fw-medium" };
 const _hoisted_14 = ["onClick"];
 const _hoisted_15 = { class: "flex-nowrap flex-v-center flex" };
 const _hoisted_16 = { class: "w-100" };
-const _hoisted_17 = { class: "t-medium" };
+const _hoisted_17 = { class: "fw-medium" };
 const _hoisted_18 = {
   key: 0,
   class: "t-small t-transp"
@@ -300,7 +300,7 @@ const _sfc_main = {
                 classSearch: "bg-white radius-small",
                 classSelected: "bg-white pd-small radius-small",
                 classDropdown: "bg-white pd-small radius-medium bs-small",
-                classItem: "pd-small radius-small hover-bg-light cursor-pointer",
+                classItem: "pd-small radius-small hover:bg-light cursor-pointer",
                 classFeed: "h-max-30r gap-thin flex-column flex o-scroll"
               }, {
                 selected: withCtx(({ item, clear }) => [
@@ -308,7 +308,7 @@ const _sfc_main = {
                     createElementVNode("span", _hoisted_6, toDisplayString(item?.name || item), 1),
                     createElementVNode("button", {
                       onClick: withModifiers(clear, ["stop"]),
-                      class: "i-small pd-micro bg-red radius-extra flex-center flex aspect-1x1 hover-scale-1"
+                      class: "i-small pd-micro bg-red radius-extra flex-center flex aspect-1x1 hover:scale-[1.05]"
                     }, [
                       createVNode(_sfc_main$2, { class: "i-micro fill-white" })
                     ], 8, _hoisted_7)
@@ -365,7 +365,7 @@ const _sfc_main = {
                 classSearch: "bg-white radius-small",
                 classSelected: "bg-white pd-small radius-small",
                 classDropdown: "bg-white pd-small radius-medium bs-small",
-                classItem: "pd-small radius-small hover-bg-light cursor-pointer",
+                classItem: "pd-small radius-small hover:bg-light cursor-pointer",
                 classFeed: "h-max-30r gap-thin flex-column flex o-scroll"
               }, {
                 selected: withCtx(({ item, clear }) => [
@@ -373,7 +373,7 @@ const _sfc_main = {
                     createElementVNode("span", _hoisted_13, toDisplayString(item?.name || item), 1),
                     createElementVNode("button", {
                       onClick: withModifiers(clear, ["stop"]),
-                      class: "i-small pd-micro bg-red radius-extra flex-center flex aspect-1x1 hover-scale-1"
+                      class: "i-small pd-micro bg-red radius-extra flex-center flex aspect-1x1 hover:scale-[1.05]"
                     }, [
                       createVNode(_sfc_main$2, { class: "i-micro fill-white" })
                     ], 8, _hoisted_14)

package/dist/martyrs/src/modules/music/components/forms/AlbumForm.vue.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"AlbumForm.vue.js","sources":["../../../../../../../src/modules/music/components/forms/AlbumForm.vue"],"sourcesContent":["<template>\n <div class=\"pd-medium\">\n <h2 class=\"h2 mn-b-medium\">{{ editMode ? 'Edit Album' : 'Create Album' }}</h2>\n \n <form @submit.prevent=\"submitForm\" class=\"cols-1 gap-regular\">\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 <!-- Album Cover -->\n <div class=\"mn-b-medium\">\n <p class=\"p-medium mn-b-small\">Album Cover</p>\n <UploadImage\n v-model:photo=\"album.coverArt\"\n uploadPath=\"albums/covers\"\n class=\"w-100 h-15r radius-small o-hidden mn-b-small\"\n @error=\"handleUploadError\"\n />\n </div>\n \n <!-- Title -->\n <Field\n v-model:field=\"album.title\"\n label=\"Title\"\n placeholder=\"Enter album title\"\n class=\"bg-white radius-small pd-small mn-b-thin\"\n :validation=\"validation.title\"\n />\n \n <!-- URL -->\n <Field\n v-model:field=\"album.url\"\n label=\"URL\"\n placeholder=\"Leave blank for auto-generation based on the album title\"\n class=\"bg-white radius-small pd-small mn-b-small\"\n />\n \n <!-- Description -->\n <Field\n v-model:field=\"album.description\"\n label=\"Description\"\n type=\"textarea\"\n placeholder=\"Enter album description\"\n class=\"bg-white radius-small pd-small mn-b-thin\"\n :validation=\"validation.description\"\n />\n \n <!-- Release Date -->\n <Field\n v-model:field=\"album.releaseDate\"\n label=\"Release Date\"\n type=\"date\"\n class=\"bg-white radius-small pd-small mn-b-thin\"\n :validation=\"validation.releaseDate\"\n />\n \n <!-- Album Type -->\n <Select\n v-model:select=\"album.type\"\n :options=\"albumTypeOptions\"\n label=\"Album Type\"\n class=\"bg-white radius-small pd-small mn-b-thin\"\n />\n </div>\n \n <!-- Artists Section -->\n <Block title=\"Artists\">\n <BlockMultiselect\n v-model=\"album.artists\"\n placeholder=\"Search artists...\"\n :multiple=\"true\"\n :transform=\"(item) => ({ _id: item._id, name: item.name })\"\n :store=\"{\n read: (options) => artistsStore.actions.fetchArtists(options),\n state: artistsStore.state\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 <!-- Слот для выбранных артистов -->\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 <!-- Слот для элементов в списке -->\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 <!-- Genres Section -->\n <Block title=\"Genres\">\n <BlockMultiselect\n v-model=\"album.genres\"\n placeholder=\"Search genres...\"\n :multiple=\"true\"\n :transform=\"(item) => ({ _id: item._id, name: item.name })\"\n :store=\"{\n read: (options) => genresStore.actions.fetchGenres(options),\n state: genresStore.state\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 <!-- Слот для выбранных жанров -->\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 <!-- Слот для элементов в списке -->\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 <!-- 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=\"album.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!' : 'Created!'\n }\"\n >\n {{ editMode ? 'Update Album' : 'Create Album' }}\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 Select from '@martyrs/src/components/Select/Select.vue';\nimport UploadImage from '@martyrs/src/components/UploadImage/UploadImage.vue';\nimport IconCross from '@martyrs/src/modules/icons/navigation/IconCross.vue';\n\nimport BlockMultiselect from '@martyrs/src/modules/core/views/components/blocks/BlockMultiselect.vue';\n\n// Import stores\nimport * as albumsStore from '../../store/albums';\nimport * as artistsStore from '../../store/artists';\nimport * as genresStore from '../../store/genres';\nimport { useStore } from '@martyrs/src/modules/core/views/store/core.store.js';\n\nconst store = useStore();\nimport * as auth from '@martyrs/src/modules/auth/views/store/auth.js';\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\n// State\nconst album = reactive({\n title: '',\n description: '',\n releaseDate: new Date().toISOString().split('T')[0],\n coverArt: '',\n artists: [],\n type: 'album',\n genres: [],\n totalTracks: 0,\n url: '',\n status: 'draft'\n});\n\nconst validation = reactive({\n title: false,\n description: false,\n releaseDate: false\n});\n\n// Track if URL was manually entered\nconst urlManuallySet = ref(false);\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 album title to auto-generate URL\nwatch(() => album.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 album.url = generateSlug(newTitle);\n }\n});\n\n// Watch for manual changes to URL field\nwatch(() => album.url, (newUrl, oldUrl) => {\n // If user manually changes URL, mark as manually set\n if (newUrl !== generateSlug(album.title)) {\n urlManuallySet.value = true;\n }\n});\n\n// Options\nconst statusOptions = [\n 'draft',\n 'published',\n 'archived'\n];\n\nconst albumTypeOptions = [\n 'album',\n 'single',\n 'EP',\n 'compilation'\n];\n\nconst fetchAlbum = async () => {\n if (!props.url) return;\n \n try {\n const fetchedAlbum = await albumsStore.actions.fetchAlbumByUrl(props.url);\n \n if (!fetchedAlbum) {\n store.core.actions.setError({\n message: 'Album not found'\n });\n return;\n }\n \n // Update local album data\n Object.assign(album, {\n title: fetchedAlbum.title \|\| '',\n description: fetchedAlbum.description \|\| '',\n releaseDate: fetchedAlbum.releaseDate ? new Date(fetchedAlbum.releaseDate).toISOString().split('T')[0] : '',\n coverArt: fetchedAlbum.coverArt \|\| '',\n artists: fetchedAlbum.artists \|\| [],\n type: fetchedAlbum.type \|\| 'album',\n genres: fetchedAlbum.genres \|\| [],\n totalTracks: fetchedAlbum.totalTracks \|\| 0,\n url: fetchedAlbum.url \|\| '',\n status: fetchedAlbum.status \|\| 'draft',\n _id: fetchedAlbum._id\n });\n \n } catch (error) {\n console.error('Error fetching album:', error);\n store.core.actions.setError({\n message: 'Failed to load album details'\n });\n }\n};\n\nconst validateForm = () => {\n let isValid = true;\n \n // Validate title\n if (!album.title.trim()) {\n validation.title = {\n message: 'Album title is required'\n };\n isValid = false;\n } else {\n validation.title = false;\n }\n \n // Validate release date\n if (!album.releaseDate) {\n validation.releaseDate = {\n message: 'Release date is required'\n };\n isValid = false;\n } else {\n validation.releaseDate = false;\n }\n \n // Validate description\n if (album.description && album.description.length > 2000) {\n validation.description = {\n message: 'Description is too long (max 2000 characters)'\n };\n isValid = false;\n } else {\n validation.description = 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 ...album,\n artists: album.artists.map(artist => artist._id \|\| artist),\n genres: album.genres.map(genre => genre._id \|\| genre)\n };\n \n // Add ownership data if creating new album\n if (!props.editMode) {\n formData.owner = {\n type: 'user',\n target: auth.state.user._id\n };\n }\n \n let result;\n if (props.editMode) {\n result = await albumsStore.actions.updateAlbum(formData);\n } else {\n result = await albumsStore.actions.createAlbum(formData);\n }\n \n // Navigate to album detail page\n setTimeout(() => {\n router.push({\n name: 'album',\n params: { url: result.url }\n });\n }, 1000);\n \n } catch (error) {\n console.error('Error saving album:', error);\n store.core.actions.setError({\n message: 'Failed to save album'\n });\n }\n};\n\nconst handleUploadError = (error) => {\n console.error('Upload error:', error);\n store.core.actions.setError({\n message: 'Error uploading image'\n });\n};\n\n// Lifecycle hooks\nonMounted(async () => {\n if (props.editMode) {\n await fetchAlbum();\n // Mark URL as manually set in edit mode to prevent auto-generation\n urlManuallySet.value = true;\n }\n});\n</script>\n"],"names":["albumsStore.actions","auth.state"],"mappings":"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"}
1	+ {"version":3,"file":"AlbumForm.vue.js","sources":["../../../../../../../src/modules/music/components/forms/AlbumForm.vue"],"sourcesContent":["<template>\n <div class=\"pd-medium\">\n <h2 class=\"h2 mn-b-medium\">{{ editMode ? 'Edit Album' : 'Create Album' }}</h2>\n \n <form @submit.prevent=\"submitForm\" class=\"cols-1 gap-regular\">\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 <!-- Album Cover -->\n <div class=\"mn-b-medium\">\n <p class=\"p-medium mn-b-small\">Album Cover</p>\n <UploadImage\n v-model:photo=\"album.coverArt\"\n uploadPath=\"albums/covers\"\n class=\"w-100 h-15r radius-small o-hidden mn-b-small\"\n @error=\"handleUploadError\"\n />\n </div>\n \n <!-- Title -->\n <Field\n v-model:field=\"album.title\"\n label=\"Title\"\n placeholder=\"Enter album title\"\n class=\"bg-white radius-small pd-small mn-b-thin\"\n :validation=\"validation.title\"\n />\n \n <!-- URL -->\n <Field\n v-model:field=\"album.url\"\n label=\"URL\"\n placeholder=\"Leave blank for auto-generation based on the album title\"\n class=\"bg-white radius-small pd-small mn-b-small\"\n />\n \n <!-- Description -->\n <Field\n v-model:field=\"album.description\"\n label=\"Description\"\n type=\"textarea\"\n placeholder=\"Enter album description\"\n class=\"bg-white radius-small pd-small mn-b-thin\"\n :validation=\"validation.description\"\n />\n \n <!-- Release Date -->\n <Field\n v-model:field=\"album.releaseDate\"\n label=\"Release Date\"\n type=\"date\"\n class=\"bg-white radius-small pd-small mn-b-thin\"\n :validation=\"validation.releaseDate\"\n />\n \n <!-- Album Type -->\n <Select\n v-model:select=\"album.type\"\n :options=\"albumTypeOptions\"\n label=\"Album Type\"\n class=\"bg-white radius-small pd-small mn-b-thin\"\n />\n </div>\n \n <!-- Artists Section -->\n <Block title=\"Artists\">\n <BlockMultiselect\n v-model=\"album.artists\"\n placeholder=\"Search artists...\"\n :multiple=\"true\"\n :transform=\"(item) => ({ _id: item._id, name: item.name })\"\n :store=\"{\n read: (options) => artistsStore.actions.fetchArtists(options),\n state: artistsStore.state\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 <!-- Слот для выбранных артистов -->\n <template #selected=\"{ item, clear }\">\n <div class=\"flex-nowrap flex-v-center flex gap-thin\">\n <span class=\"fw-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.05]\"\n >\n <IconCross class=\"i-micro fill-white\" />\n </button>\n </div>\n </template>\n \n <!-- Слот для элементов в списке -->\n <template #item=\"{ item }\">\n <div class=\"flex-nowrap flex-v-center flex\">\n <div class=\"w-100\">\n <p class=\"fw-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 <!-- Genres Section -->\n <Block title=\"Genres\">\n <BlockMultiselect\n v-model=\"album.genres\"\n placeholder=\"Search genres...\"\n :multiple=\"true\"\n :transform=\"(item) => ({ _id: item._id, name: item.name })\"\n :store=\"{\n read: (options) => genresStore.actions.fetchGenres(options),\n state: genresStore.state\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 <!-- Слот для выбранных жанров -->\n <template #selected=\"{ item, clear }\">\n <div class=\"flex-nowrap flex-v-center flex gap-thin\">\n <span class=\"fw-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.05]\"\n >\n <IconCross class=\"i-micro fill-white\" />\n </button>\n </div>\n </template>\n \n <!-- Слот для элементов в списке -->\n <template #item=\"{ item }\">\n <div class=\"flex-nowrap flex-v-center flex\">\n <div class=\"w-100\">\n <p class=\"fw-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 <!-- 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=\"album.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!' : 'Created!'\n }\"\n >\n {{ editMode ? 'Update Album' : 'Create Album' }}\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 Select from '@martyrs/src/components/Select/Select.vue';\nimport UploadImage from '@martyrs/src/components/UploadImage/UploadImage.vue';\nimport IconCross from '@martyrs/src/modules/icons/navigation/IconCross.vue';\n\nimport BlockMultiselect from '@martyrs/src/modules/core/views/components/blocks/BlockMultiselect.vue';\n\n// Import stores\nimport * as albumsStore from '../../store/albums';\nimport * as artistsStore from '../../store/artists';\nimport * as genresStore from '../../store/genres';\nimport { useStore } from '@martyrs/src/modules/core/views/store/core.store.js';\n\nconst store = useStore();\nimport * as auth from '@martyrs/src/modules/auth/views/store/auth.js';\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\n// State\nconst album = reactive({\n title: '',\n description: '',\n releaseDate: new Date().toISOString().split('T')[0],\n coverArt: '',\n artists: [],\n type: 'album',\n genres: [],\n totalTracks: 0,\n url: '',\n status: 'draft'\n});\n\nconst validation = reactive({\n title: false,\n description: false,\n releaseDate: false\n});\n\n// Track if URL was manually entered\nconst urlManuallySet = ref(false);\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 album title to auto-generate URL\nwatch(() => album.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 album.url = generateSlug(newTitle);\n }\n});\n\n// Watch for manual changes to URL field\nwatch(() => album.url, (newUrl, oldUrl) => {\n // If user manually changes URL, mark as manually set\n if (newUrl !== generateSlug(album.title)) {\n urlManuallySet.value = true;\n }\n});\n\n// Options\nconst statusOptions = [\n 'draft',\n 'published',\n 'archived'\n];\n\nconst albumTypeOptions = [\n 'album',\n 'single',\n 'EP',\n 'compilation'\n];\n\nconst fetchAlbum = async () => {\n if (!props.url) return;\n \n try {\n const fetchedAlbum = await albumsStore.actions.fetchAlbumByUrl(props.url);\n \n if (!fetchedAlbum) {\n store.core.actions.setError({\n message: 'Album not found'\n });\n return;\n }\n \n // Update local album data\n Object.assign(album, {\n title: fetchedAlbum.title \|\| '',\n description: fetchedAlbum.description \|\| '',\n releaseDate: fetchedAlbum.releaseDate ? new Date(fetchedAlbum.releaseDate).toISOString().split('T')[0] : '',\n coverArt: fetchedAlbum.coverArt \|\| '',\n artists: fetchedAlbum.artists \|\| [],\n type: fetchedAlbum.type \|\| 'album',\n genres: fetchedAlbum.genres \|\| [],\n totalTracks: fetchedAlbum.totalTracks \|\| 0,\n url: fetchedAlbum.url \|\| '',\n status: fetchedAlbum.status \|\| 'draft',\n _id: fetchedAlbum._id\n });\n \n } catch (error) {\n console.error('Error fetching album:', error);\n store.core.actions.setError({\n message: 'Failed to load album details'\n });\n }\n};\n\nconst validateForm = () => {\n let isValid = true;\n \n // Validate title\n if (!album.title.trim()) {\n validation.title = {\n message: 'Album title is required'\n };\n isValid = false;\n } else {\n validation.title = false;\n }\n \n // Validate release date\n if (!album.releaseDate) {\n validation.releaseDate = {\n message: 'Release date is required'\n };\n isValid = false;\n } else {\n validation.releaseDate = false;\n }\n \n // Validate description\n if (album.description && album.description.length > 2000) {\n validation.description = {\n message: 'Description is too long (max 2000 characters)'\n };\n isValid = false;\n } else {\n validation.description = 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 ...album,\n artists: album.artists.map(artist => artist._id \|\| artist),\n genres: album.genres.map(genre => genre._id \|\| genre)\n };\n \n // Add ownership data if creating new album\n if (!props.editMode) {\n formData.owner = {\n type: 'user',\n target: auth.state.user._id\n };\n }\n \n let result;\n if (props.editMode) {\n result = await albumsStore.actions.updateAlbum(formData);\n } else {\n result = await albumsStore.actions.createAlbum(formData);\n }\n \n // Navigate to album detail page\n setTimeout(() => {\n router.push({\n name: 'album',\n params: { url: result.url }\n });\n }, 1000);\n \n } catch (error) {\n console.error('Error saving album:', error);\n store.core.actions.setError({\n message: 'Failed to save album'\n });\n }\n};\n\nconst handleUploadError = (error) => {\n console.error('Upload error:', error);\n store.core.actions.setError({\n message: 'Error uploading image'\n });\n};\n\n// Lifecycle hooks\nonMounted(async () => {\n if (props.editMode) {\n await fetchAlbum();\n // Mark URL as manually set in edit mode to prevent auto-generation\n urlManuallySet.value = true;\n }\n});\n</script>\n"],"names":["albumsStore.actions","auth.state"],"mappings":"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"}

package/dist/martyrs/src/modules/music/components/forms/ArtistForm.vue.js CHANGED Viewed

@@ -6,7 +6,7 @@ import _sfc_main$4 from "../../../../components/Button/Button.vue2.js";
 import _sfc_main$3 from "../../../../components/Checkbox/Checkbox.vue.js";
 import Select from "../../../../components/Select/Select.vue.js";
 import UploadImage from "../../../../components/UploadImage/UploadImage.vue.js";
-/* empty css                                        */
+/* empty css                                       */
 import BlockMultiselect from "../../../core/views/components/blocks/BlockMultiselect.vue.js";
 import _sfc_main$2 from "../../../icons/navigation/IconCross.vue.js";
 import { actions as actions$1 } from "../../store/artists.js";
@@ -20,11 +20,11 @@ const _hoisted_4 = { class: "cols-2 mobile:cols-1 gap-regular" };
 const _hoisted_5 = { class: "bg-light pd-medium radius-medium" };
 const _hoisted_6 = { class: "cols-2 mobile:cols-1 gap-thin" };
 const _hoisted_7 = { class: "flex-nowrap flex-v-center flex gap-thin" };
-const _hoisted_8 = { class: "t-medium" };
+const _hoisted_8 = { class: "fw-medium" };
 const _hoisted_9 = ["onClick"];
 const _hoisted_10 = { class: "flex-nowrap flex-v-center flex" };
 const _hoisted_11 = { class: "w-100" };
-const _hoisted_12 = { class: "t-medium" };
+const _hoisted_12 = { class: "fw-medium" };
 const _hoisted_13 = {
   key: 0,
   class: "t-small t-transp"
@@ -337,7 +337,7 @@ const _sfc_main = {
                 classSearch: "bg-white radius-small",
                 classSelected: "bg-white pd-small radius-small",
                 classDropdown: "bg-white pd-small radius-medium bs-small",
-                classItem: "pd-small radius-small hover-bg-light cursor-pointer",
+                classItem: "pd-small radius-small hover:bg-light cursor-pointer",
                 classFeed: "h-max-30r gap-thin flex-column flex o-scroll"
               }, {
                 selected: withCtx(({ item, clear }) => [
@@ -345,7 +345,7 @@ const _sfc_main = {
                     createElementVNode("span", _hoisted_8, toDisplayString(item?.name || item), 1),
                     createElementVNode("button", {
                       onClick: withModifiers(clear, ["stop"]),
-                      class: "i-small pd-micro bg-red radius-extra flex-center flex aspect-1x1 hover-scale-1"
+                      class: "i-small pd-micro bg-red radius-extra flex-center flex aspect-1x1 hover:scale-[1.05]"
                     }, [
                       createVNode(_sfc_main$2, { class: "i-micro fill-white" })
                     ], 8, _hoisted_9)

package/dist/martyrs/src/modules/music/components/forms/ArtistForm.vue.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ArtistForm.vue.js","sources":["../../../../../../../src/modules/music/components/forms/ArtistForm.vue"],"sourcesContent":["<template>\n <div class=\"pd-medium\">\n <h2 class=\"h2 mn-b-medium\">{{ editMode ? 'Edit Artist' : 'Create Artist' }}</h2>\n \n <form @submit.prevent=\"submitForm\" class=\"cols-1 gap-regular\">\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 <div class=\"cols-2 mobile:cols-1 gap-regular\">\n <!-- Artist Photo -->\n <div>\n <p class=\"p-medium mn-b-small\">Artist Photo</p>\n <UploadImage\n v-model:photo=\"artist.photoUrl\"\n uploadPath=\"artists/photos\"\n class=\"w-100 h-15r radius-small o-hidden mn-b-small\"\n @error=\"handleUploadError\"\n />\n </div>\n \n <!-- Artist Cover -->\n <div>\n <p class=\"p-medium mn-b-small\">Cover Image</p>\n <UploadImage\n v-model:photo=\"artist.coverUrl\"\n uploadPath=\"artists/covers\"\n class=\"w-100 h-15r radius-small o-hidden mn-b-small\"\n @error=\"handleUploadError\"\n />\n </div>\n </div>\n \n <!-- Name -->\n <Field\n v-model:field=\"artist.name\"\n label=\"Name\"\n placeholder=\"Enter artist name\"\n class=\"bg-white radius-small pd-small mn-b-thin\"\n :validation=\"validation.name\"\n />\n <!-- URL -->\n <Field\n v-model:field=\"artist.url\"\n label=\"URL\"\n placeholder=\"Leave blank for auto-generation based on the artist name\"\n class=\"bg-white radius-small pd-small mn-b-small\"\n />\n \n <!-- Bio -->\n <Field\n v-model:field=\"artist.bio\"\n label=\"Biography\"\n type=\"textarea\"\n placeholder=\"Enter artist biography\"\n class=\"bg-white radius-small pd-small mn-b-thin\"\n :validation=\"validation.bio\"\n />\n \n <!-- Location -->\n <Field\n v-model:field=\"artist.location\"\n label=\"Location\"\n placeholder=\"e.g., Los Angeles, CA\"\n class=\"bg-white radius-small pd-small mn-b-thin\"\n />\n \n <!-- Website -->\n <Field\n v-model:field=\"artist.website\"\n label=\"Website\"\n placeholder=\"https://example.com\"\n class=\"bg-white radius-small pd-small mn-b-thin\"\n />\n \n \n </div>\n \n <!-- Social Media Section -->\n <div class=\"bg-light pd-medium radius-medium\">\n <h3 class=\"h3 mn-b-medium\">Social Media</h3>\n \n <div class=\"cols-2 mobile:cols-1 gap-thin\">\n <!-- Telegram -->\n <Field\n v-model:field=\"artist.socials.telegram\"\n label=\"Telegram\"\n placeholder=\"@username\"\n class=\"bg-white radius-small pd-small\"\n />\n \n <!-- Twitter -->\n <Field\n v-model:field=\"artist.socials.twitter\"\n label=\"Twitter\"\n placeholder=\"@username\"\n class=\"bg-white radius-small pd-small\"\n />\n \n <!-- Facebook -->\n <Field\n v-model:field=\"artist.socials.facebook\"\n label=\"Facebook\"\n placeholder=\"username or page-name\"\n class=\"bg-white radius-small pd-small\"\n />\n \n <!-- Instagram -->\n <Field\n v-model:field=\"artist.socials.instagram\"\n label=\"Instagram\"\n placeholder=\"@username\"\n class=\"bg-white radius-small pd-small\"\n />\n </div>\n </div>\n \n <!-- Genres Section (assuming genres are available) -->\n <Block title=\"Genres\">\n <BlockMultiselect\n v-model=\"artist.genres\"\n placeholder=\"Search genres...\"\n :multiple=\"true\"\n :transform=\"(item) => ({ _id: item._id, name: item.name })\"\n :store=\"{\n read: (options) => genresStore.actions.fetchGenres(options),\n state: genresStore.state\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 <!-- Слот для выбранных жанров -->\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 <!-- Слот для элементов в списке -->\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 <!-- 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=\"artist.status\"\n :options=\"statusOptions\"\n label=\"Status\"\n class=\"bg-white radius-small pd-small mn-b-thin\"\n />\n \n <Checkbox\n v-model:active=\"artist.isVerified\"\n label=\"Verified Artist\"\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!' : 'Created!'\n }\"\n >\n {{ editMode ? 'Update Artist' : 'Create Artist' }}\n </Button>\n </div>\n </form>\n </div>\n</template>\n\n<script setup>\nimport { ref, reactive, onMounted, computed, 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 Loader from '@martyrs/src/components/Loader/Loader.vue';\n\n\nimport BlockMultiselect from '@martyrs/src/modules/core/views/components/blocks/BlockMultiselect.vue';\nimport IconCross from '@martyrs/src/modules/icons/navigation/IconCross.vue';\n\n// Import store\nimport * as artistsStore from '../../store/artists';\nimport * as genresStore from '../../store/genres';\nimport { useStore } from '@martyrs/src/modules/core/views/store/core.store.js';\n\nconst store = useStore();\nimport * as auth from '@martyrs/src/modules/auth/views/store/auth.js';\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\n// State\nconst artist = reactive({\n name: '',\n bio: '',\n photoUrl: '',\n coverUrl: '',\n website: '',\n location: '',\n isVerified: false,\n status: 'draft',\n socials: {\n telegram: '',\n twitter: '',\n facebook: '',\n instagram: ''\n },\n url: '',\n genres: []\n});\n\nconst validation = reactive({\n name: false,\n bio: false\n});\n\n// Track if URL was manually entered\nconst urlManuallySet = ref(false);\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 artist name to auto-generate URL\nwatch(() => artist.name, (newName) => {\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 artist.url = generateSlug(newName);\n }\n});\n\n// Watch for manual changes to URL field\nwatch(() => artist.url, (newUrl, oldUrl) => {\n // If user manually changes URL, mark as manually set\n if (newUrl !== generateSlug(artist.name)) {\n urlManuallySet.value = true;\n }\n});\n\n// Status options\nconst statusOptions = [\n 'draft',\n 'published',\n 'archived'\n];\n\n\nconst fetchArtist = async () => {\n if (!props.url) return;\n \n try {\n const fetchedArtist = await artistsStore.actions.fetchArtistByUrl(props.url);\n \n if (!fetchedArtist) {\n store.core.actions.setError({\n message: 'Artist not found'\n });\n return;\n }\n \n // Update local artist data\n Object.assign(artist, {\n name: fetchedArtist.name \|\| '',\n bio: fetchedArtist.bio \|\| '',\n photoUrl: fetchedArtist.photoUrl \|\| '',\n coverUrl: fetchedArtist.coverUrl \|\| '',\n website: fetchedArtist.website \|\| '',\n location: fetchedArtist.location \|\| '',\n isVerified: fetchedArtist.isVerified \|\| false,\n status: fetchedArtist.status \|\| 'draft',\n url: fetchedArtist.url \|\| '',\n genres: fetchedArtist.genres \|\| [],\n _id: fetchedArtist._id,\n socials: {\n telegram: fetchedArtist.socials?.telegram \|\| '',\n twitter: fetchedArtist.socials?.twitter \|\| '',\n facebook: fetchedArtist.socials?.facebook \|\| '',\n instagram: fetchedArtist.socials?.instagram \|\| ''\n }\n });\n \n } catch (error) {\n console.error('Error fetching artist:', error);\n store.core.actions.setError({\n message: 'Failed to load artist details'\n });\n }\n};\n\nconst validateForm = () => {\n let isValid = true;\n \n // Validate name\n if (!artist.name.trim()) {\n validation.name = {\n message: 'Artist name is required'\n };\n isValid = false;\n } else {\n validation.name = false;\n }\n \n // Validate bio\n if (artist.bio && artist.bio.length > 2000) {\n validation.bio = {\n message: 'Biography is too long (max 2000 characters)'\n };\n isValid = false;\n } else {\n validation.bio = 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 ...artist,\n genres: artist.genres.map(genre => genre._id \|\| genre)\n };\n \n // Add ownership data if creating new artist\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 artistsStore.actions.updateArtist(formData);\n } else {\n result = await artistsStore.actions.createArtist(formData);\n }\n \n // Navigate to artist detail page\n setTimeout(() => {\n router.push({\n name: 'artist',\n params: { url: result.url }\n });\n }, 1000);\n \n } catch (error) {\n console.error('Error saving artist:', error);\n store.core.actions.setError({\n message: 'Failed to save artist'\n });\n }\n};\n\nconst handleUploadError = (error) => {\n console.error('Upload error:', error);\n store.core.actions.setError({\n message: 'Error uploading image'\n });\n};\n\n// Lifecycle hooks\nonMounted(async () => {\n if (props.editMode) {\n await fetchArtist();\n // Mark URL as manually set in edit mode to prevent auto-generation\n urlManuallySet.value = true;\n }\n});\n</script>\n"],"names":["artistsStore.actions","auth.state"],"mappings":"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"}
1	+ {"version":3,"file":"ArtistForm.vue.js","sources":["../../../../../../../src/modules/music/components/forms/ArtistForm.vue"],"sourcesContent":["<template>\n <div class=\"pd-medium\">\n <h2 class=\"h2 mn-b-medium\">{{ editMode ? 'Edit Artist' : 'Create Artist' }}</h2>\n \n <form @submit.prevent=\"submitForm\" class=\"cols-1 gap-regular\">\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 <div class=\"cols-2 mobile:cols-1 gap-regular\">\n <!-- Artist Photo -->\n <div>\n <p class=\"p-medium mn-b-small\">Artist Photo</p>\n <UploadImage\n v-model:photo=\"artist.photoUrl\"\n uploadPath=\"artists/photos\"\n class=\"w-100 h-15r radius-small o-hidden mn-b-small\"\n @error=\"handleUploadError\"\n />\n </div>\n \n <!-- Artist Cover -->\n <div>\n <p class=\"p-medium mn-b-small\">Cover Image</p>\n <UploadImage\n v-model:photo=\"artist.coverUrl\"\n uploadPath=\"artists/covers\"\n class=\"w-100 h-15r radius-small o-hidden mn-b-small\"\n @error=\"handleUploadError\"\n />\n </div>\n </div>\n \n <!-- Name -->\n <Field\n v-model:field=\"artist.name\"\n label=\"Name\"\n placeholder=\"Enter artist name\"\n class=\"bg-white radius-small pd-small mn-b-thin\"\n :validation=\"validation.name\"\n />\n <!-- URL -->\n <Field\n v-model:field=\"artist.url\"\n label=\"URL\"\n placeholder=\"Leave blank for auto-generation based on the artist name\"\n class=\"bg-white radius-small pd-small mn-b-small\"\n />\n \n <!-- Bio -->\n <Field\n v-model:field=\"artist.bio\"\n label=\"Biography\"\n type=\"textarea\"\n placeholder=\"Enter artist biography\"\n class=\"bg-white radius-small pd-small mn-b-thin\"\n :validation=\"validation.bio\"\n />\n \n <!-- Location -->\n <Field\n v-model:field=\"artist.location\"\n label=\"Location\"\n placeholder=\"e.g., Los Angeles, CA\"\n class=\"bg-white radius-small pd-small mn-b-thin\"\n />\n \n <!-- Website -->\n <Field\n v-model:field=\"artist.website\"\n label=\"Website\"\n placeholder=\"https://example.com\"\n class=\"bg-white radius-small pd-small mn-b-thin\"\n />\n \n \n </div>\n \n <!-- Social Media Section -->\n <div class=\"bg-light pd-medium radius-medium\">\n <h3 class=\"h3 mn-b-medium\">Social Media</h3>\n \n <div class=\"cols-2 mobile:cols-1 gap-thin\">\n <!-- Telegram -->\n <Field\n v-model:field=\"artist.socials.telegram\"\n label=\"Telegram\"\n placeholder=\"@username\"\n class=\"bg-white radius-small pd-small\"\n />\n \n <!-- Twitter -->\n <Field\n v-model:field=\"artist.socials.twitter\"\n label=\"Twitter\"\n placeholder=\"@username\"\n class=\"bg-white radius-small pd-small\"\n />\n \n <!-- Facebook -->\n <Field\n v-model:field=\"artist.socials.facebook\"\n label=\"Facebook\"\n placeholder=\"username or page-name\"\n class=\"bg-white radius-small pd-small\"\n />\n \n <!-- Instagram -->\n <Field\n v-model:field=\"artist.socials.instagram\"\n label=\"Instagram\"\n placeholder=\"@username\"\n class=\"bg-white radius-small pd-small\"\n />\n </div>\n </div>\n \n <!-- Genres Section (assuming genres are available) -->\n <Block title=\"Genres\">\n <BlockMultiselect\n v-model=\"artist.genres\"\n placeholder=\"Search genres...\"\n :multiple=\"true\"\n :transform=\"(item) => ({ _id: item._id, name: item.name })\"\n :store=\"{\n read: (options) => genresStore.actions.fetchGenres(options),\n state: genresStore.state\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 <!-- Слот для выбранных жанров -->\n <template #selected=\"{ item, clear }\">\n <div class=\"flex-nowrap flex-v-center flex gap-thin\">\n <span class=\"fw-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.05]\"\n >\n <IconCross class=\"i-micro fill-white\" />\n </button>\n </div>\n </template>\n \n <!-- Слот для элементов в списке -->\n <template #item=\"{ item }\">\n <div class=\"flex-nowrap flex-v-center flex\">\n <div class=\"w-100\">\n <p class=\"fw-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 <!-- 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=\"artist.status\"\n :options=\"statusOptions\"\n label=\"Status\"\n class=\"bg-white radius-small pd-small mn-b-thin\"\n />\n \n <Checkbox\n v-model:active=\"artist.isVerified\"\n label=\"Verified Artist\"\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!' : 'Created!'\n }\"\n >\n {{ editMode ? 'Update Artist' : 'Create Artist' }}\n </Button>\n </div>\n </form>\n </div>\n</template>\n\n<script setup>\nimport { ref, reactive, onMounted, computed, 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 Loader from '@martyrs/src/components/Loader/Loader.vue';\n\n\nimport BlockMultiselect from '@martyrs/src/modules/core/views/components/blocks/BlockMultiselect.vue';\nimport IconCross from '@martyrs/src/modules/icons/navigation/IconCross.vue';\n\n// Import store\nimport * as artistsStore from '../../store/artists';\nimport * as genresStore from '../../store/genres';\nimport { useStore } from '@martyrs/src/modules/core/views/store/core.store.js';\n\nconst store = useStore();\nimport * as auth from '@martyrs/src/modules/auth/views/store/auth.js';\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\n// State\nconst artist = reactive({\n name: '',\n bio: '',\n photoUrl: '',\n coverUrl: '',\n website: '',\n location: '',\n isVerified: false,\n status: 'draft',\n socials: {\n telegram: '',\n twitter: '',\n facebook: '',\n instagram: ''\n },\n url: '',\n genres: []\n});\n\nconst validation = reactive({\n name: false,\n bio: false\n});\n\n// Track if URL was manually entered\nconst urlManuallySet = ref(false);\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 artist name to auto-generate URL\nwatch(() => artist.name, (newName) => {\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 artist.url = generateSlug(newName);\n }\n});\n\n// Watch for manual changes to URL field\nwatch(() => artist.url, (newUrl, oldUrl) => {\n // If user manually changes URL, mark as manually set\n if (newUrl !== generateSlug(artist.name)) {\n urlManuallySet.value = true;\n }\n});\n\n// Status options\nconst statusOptions = [\n 'draft',\n 'published',\n 'archived'\n];\n\n\nconst fetchArtist = async () => {\n if (!props.url) return;\n \n try {\n const fetchedArtist = await artistsStore.actions.fetchArtistByUrl(props.url);\n \n if (!fetchedArtist) {\n store.core.actions.setError({\n message: 'Artist not found'\n });\n return;\n }\n \n // Update local artist data\n Object.assign(artist, {\n name: fetchedArtist.name \|\| '',\n bio: fetchedArtist.bio \|\| '',\n photoUrl: fetchedArtist.photoUrl \|\| '',\n coverUrl: fetchedArtist.coverUrl \|\| '',\n website: fetchedArtist.website \|\| '',\n location: fetchedArtist.location \|\| '',\n isVerified: fetchedArtist.isVerified \|\| false,\n status: fetchedArtist.status \|\| 'draft',\n url: fetchedArtist.url \|\| '',\n genres: fetchedArtist.genres \|\| [],\n _id: fetchedArtist._id,\n socials: {\n telegram: fetchedArtist.socials?.telegram \|\| '',\n twitter: fetchedArtist.socials?.twitter \|\| '',\n facebook: fetchedArtist.socials?.facebook \|\| '',\n instagram: fetchedArtist.socials?.instagram \|\| ''\n }\n });\n \n } catch (error) {\n console.error('Error fetching artist:', error);\n store.core.actions.setError({\n message: 'Failed to load artist details'\n });\n }\n};\n\nconst validateForm = () => {\n let isValid = true;\n \n // Validate name\n if (!artist.name.trim()) {\n validation.name = {\n message: 'Artist name is required'\n };\n isValid = false;\n } else {\n validation.name = false;\n }\n \n // Validate bio\n if (artist.bio && artist.bio.length > 2000) {\n validation.bio = {\n message: 'Biography is too long (max 2000 characters)'\n };\n isValid = false;\n } else {\n validation.bio = 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 ...artist,\n genres: artist.genres.map(genre => genre._id \|\| genre)\n };\n \n // Add ownership data if creating new artist\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 artistsStore.actions.updateArtist(formData);\n } else {\n result = await artistsStore.actions.createArtist(formData);\n }\n \n // Navigate to artist detail page\n setTimeout(() => {\n router.push({\n name: 'artist',\n params: { url: result.url }\n });\n }, 1000);\n \n } catch (error) {\n console.error('Error saving artist:', error);\n store.core.actions.setError({\n message: 'Failed to save artist'\n });\n }\n};\n\nconst handleUploadError = (error) => {\n console.error('Upload error:', error);\n store.core.actions.setError({\n message: 'Error uploading image'\n });\n};\n\n// Lifecycle hooks\nonMounted(async () => {\n if (props.editMode) {\n await fetchArtist();\n // Mark URL as manually set in edit mode to prevent auto-generation\n urlManuallySet.value = true;\n }\n});\n</script>\n"],"names":["artistsStore.actions","auth.state"],"mappings":"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"}

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

@@ -18,8 +18,8 @@ const _hoisted_4 = { class: "mn-b-medium" };
 const _hoisted_5 = { class: "flex-nowrap flex-v-center flex gap-thin" };
 const _hoisted_6 = ["onClick", "disabled"];
 const _hoisted_7 = ["onClick", "disabled"];
-const _hoisted_8 = { class: "flex-1" };
-const _hoisted_9 = { class: "t-medium" };
+const _hoisted_8 = { class: "flex-child-1" };
+const _hoisted_9 = { class: "fw-medium" };
 const _hoisted_10 = { class: "t-small t-transp" };
 const _hoisted_11 = { key: 0 };
 const _hoisted_12 = {
@@ -29,7 +29,7 @@ const _hoisted_12 = {
 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_16 = { class: "fw-medium" };
 const _hoisted_17 = { class: "t-small t-transp" };
 const _hoisted_18 = { key: 0 };
 const _hoisted_19 = {
@@ -299,7 +299,7 @@ const _sfc_main = {
                 classSearch: "bg-white radius-small",
                 classSelected: "bg-white pd-small radius-small",
                 classDropdown: "bg-white pd-small radius-medium bs-small",
-                classItem: "pd-small radius-small hover-bg-light cursor-pointer",
+                classItem: "pd-small radius-small hover:bg-light cursor-pointer",
                 classFeed: "h-max-30r gap-thin flex-column flex o-scroll"
               }, {
                 selected: withCtx(({ item, clear, index }) => [
@@ -308,7 +308,7 @@ const _sfc_main = {
                       key: 0,
                       onClick: withModifiers(($event) => moveTrack(index, "up"), ["stop"]),
                       disabled: index === 0,
-                      class: "i-small pd-micro bg-grey-nano radius-extra flex-center flex aspect-1x1 hover-scale-1"
+                      class: "i-small pd-micro bg-grey-nano radius-extra flex-center flex aspect-1x1 hover:scale-[1.05]"
                     }, [
                       createVNode(_sfc_main$2, { class: "i-micro" })
                     ], 8, _hoisted_6)) : createCommentVNode("", true),
@@ -316,7 +316,7 @@ const _sfc_main = {
                       key: 1,
                       onClick: withModifiers(($event) => moveTrack(index, "down"), ["stop"]),
                       disabled: index === playlist.tracks.length - 1,
-                      class: "i-small pd-micro bg-grey-nano radius-extra flex-center flex aspect-1x1 hover-scale-1"
+                      class: "i-small pd-micro bg-grey-nano radius-extra flex-center flex aspect-1x1 hover:scale-[1.05]"
                     }, [
                       createVNode(_sfc_main$2, { class: "i-micro" })
                     ], 8, _hoisted_7)) : createCommentVNode("", true),
@@ -330,7 +330,7 @@ const _sfc_main = {
                     item.duration ? (openBlock(), createElementBlock("span", _hoisted_12, toDisplayString(formatDuration(item.duration)), 1)) : createCommentVNode("", true),
                     createElementVNode("button", {
                       onClick: withModifiers(clear, ["stop"]),
-                      class: "i-small pd-micro bg-red radius-extra flex-center flex aspect-1x1 hover-scale-1"
+                      class: "i-small pd-micro bg-red radius-extra flex-center flex aspect-1x1 hover:scale-[1.05]"
                     }, [
                       createVNode(_sfc_main$2, { class: "i-micro fill-white" })
                     ], 8, _hoisted_13)

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

	@@ -1 +1 @@
1	- {"version":3,"file":"PlaylistForm.vue.js","sources":["../../../../../../../src/modules/music/components/forms/PlaylistForm.vue"],"sourcesContent":["<template>\n <div class=\"pd-medium\">\n <h2 class=\"h2 mn-b-medium\">{{ editMode ? 'Edit Playlist' : 'Create Playlist' }}</h2>\n \n <form @submit.prevent=\"submitForm\" class=\"cols-1 gap-regular\">\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 <!-- Playlist Cover -->\n <div class=\"mn-b-medium\">\n <p class=\"p-medium mn-b-small\">Playlist Cover</p>\n <UploadImage\n v-model:photo=\"playlist.coverUrl\"\n uploadPath=\"playlists/covers\"\n class=\"w-100 h-15r radius-small o-hidden mn-b-small\"\n @error=\"handleUploadError\"\n />\n </div>\n \n <!-- Title -->\n <Field\n v-model:field=\"playlist.title\"\n label=\"Title\"\n placeholder=\"Enter playlist title\"\n class=\"bg-white radius-small pd-small mn-b-thin\"\n :validation=\"validation.title\"\n />\n \n <!-- URL -->\n <Field\n v-model:field=\"playlist.url\"\n label=\"URL\"\n placeholder=\"Leave blank for auto-generation based on the playlist title\"\n class=\"bg-white radius-small pd-small mn-b-small\"\n />\n \n <!-- Description -->\n <Field\n v-model:field=\"playlist.description\"\n label=\"Description\"\n type=\"textarea\"\n placeholder=\"Enter playlist description\"\n class=\"bg-white radius-small pd-small mn-b-thin\"\n :validation=\"validation.description\"\n />\n </div>\n \n <!-- Tracks Section -->\n <Block title=\"Tracks\">\n <BlockMultiselect\n v-model=\"playlist.tracks\"\n placeholder=\"Search tracks...\"\n :multiple=\"true\"\n :transform=\"(item) => ({ \n _id: item._id, \n title: item.title,\n artists: item.artists,\n album: item.album,\n duration: item.duration \n })\"\n :store=\"{\n read: (options) => tracksStore.actions.fetchTracks(options),\n state: tracksStore.state\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 tracks found',\n description: 'Try different search terms',\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 tracks with reorder support -->\n <template #selected=\"{ item, clear, index }\">\n <div class=\"flex-nowrap flex-v-center flex gap-thin\">\n <button \n v-if=\"playlist.tracks.length > 1\"\n @click.stop=\"moveTrack(index, 'up')\"\n :disabled=\"index === 0\"\n class=\"i-small pd-micro bg-grey-nano radius-extra flex-center flex aspect-1x1 hover-scale-1\"\n >\n <IconArrowUp class=\"i-micro\" />\n </button>\n \n <button \n v-if=\"playlist.tracks.length > 1\"\n @click.stop=\"moveTrack(index, 'down')\"\n :disabled=\"index === playlist.tracks.length - 1\"\n class=\"i-small pd-micro bg-grey-nano radius-extra flex-center flex aspect-1x1 hover-scale-1\"\n >\n <IconArrowDown class=\"i-micro\" />\n </button>\n \n <div class=\"flex-1\">\n <p class=\"t-medium\">{{ item.title }}</p>\n <p class=\"t-small t-transp\">\n {{ item.artists?.map(a => a.name \|\| a).join(', ') }}\n <span v-if=\"item.album\"> • {{ item.album.title \|\| item.album }}</span>\n </p>\n </div>\n \n <span v-if=\"item.duration\" class=\"t-small t-transp\">\n {{ formatDuration(item.duration) }}\n </span>\n \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 <!-- Track items in dropdown -->\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 class=\"t-small t-transp\">\n {{ item.artists?.map(a => a.name \|\| a).join(', ') }}\n <span v-if=\"item.album\"> • {{ item.album.title \|\| item.album }}</span>\n </p>\n </div>\n <span v-if=\"item.duration\" class=\"t-small t-transp mn-l-small\">\n {{ formatDuration(item.duration) }}\n </span>\n </div>\n </template>\n </BlockMultiselect>\n \n <!-- Tracks summary -->\n <div v-if=\"playlist.tracks.length > 0\" class=\"t-small t-transp mn-t-small\">\n {{ playlist.tracks.length }} tracks • {{ formatDuration(totalDuration) }}\n </div>\n </Block>\n \n <!-- Privacy & Settings Section -->\n <div class=\"bg-light pd-medium radius-medium\">\n <h3 class=\"h3 mn-b-medium\">Privacy & Settings</h3>\n \n <!-- Privacy -->\n <div class=\"mn-b-medium\">\n <p class=\"p-medium mn-b-small\">Privacy</p>\n <div class=\"flex gap-regular\">\n <Radio\n v-model:radio=\"playlist.isPublic\"\n :value=\"true\"\n name=\"privacy\"\n label=\"Public\"\n class=\"bg-white pd-small radius-small\"\n />\n <Radio\n v-model:radio=\"playlist.isPublic\"\n :value=\"false\"\n name=\"privacy\"\n label=\"Private\"\n class=\"bg-white pd-small radius-small\"\n />\n </div>\n </div>\n \n <!-- Collaborative -->\n <div class=\"mn-b-medium\">\n <p class=\"p-medium mn-b-small\">Collaborative Playlist</p>\n <div class=\"flex gap-regular\">\n <Radio\n v-model:radio=\"playlist.isCollaborative\"\n :value=\"true\"\n name=\"collaborative\"\n label=\"Yes\"\n class=\"bg-white pd-small radius-small\"\n />\n <Radio\n v-model:radio=\"playlist.isCollaborative\"\n :value=\"false\"\n name=\"collaborative\"\n label=\"No\"\n class=\"bg-white pd-small radius-small\"\n />\n </div>\n </div>\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!' : 'Created!'\n }\"\n >\n {{ editMode ? 'Update Playlist' : 'Create Playlist' }}\n </Button>\n </div>\n </form>\n </div>\n</template>\n\n<script setup>\nimport { ref, reactive, onMounted, watch, computed } 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 Radio from '@martyrs/src/components/Radio/Radio.vue';\nimport UploadImage from '@martyrs/src/components/UploadImage/UploadImage.vue';\nimport IconCross from '@martyrs/src/modules/icons/navigation/IconCross.vue';\nimport IconArrowUp from '@martyrs/src/modules/icons/navigation/IconCross.vue';\nimport IconArrowDown from '@martyrs/src/modules/icons/navigation/IconCross.vue';\n\nimport BlockMultiselect from '@martyrs/src/modules/core/views/components/blocks/BlockMultiselect.vue';\n\n// Import stores\nimport * as playlistsStore from '../../store/playlists';\nimport * as tracksStore from '../../store/tracks';\nimport { useStore } from '@martyrs/src/modules/core/views/store/core.store.js';\n\nconst store = useStore();\nimport * as auth from '@martyrs/src/modules/auth/views/store/auth.js';\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\n// State\nconst playlist = reactive({\n title: '',\n description: '',\n coverUrl: '',\n tracks: [],\n url: '',\n isPublic: true,\n isCollaborative: false\n});\n\nconst validation = reactive({\n title: false,\n description: false\n});\n\n// Track if URL was manually entered\nconst urlManuallySet = ref(false);\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 playlist title to auto-generate URL\nwatch(() => playlist.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 playlist.url = generateSlug(newTitle);\n }\n});\n\n// Watch for manual changes to URL field\nwatch(() => playlist.url, (newUrl, oldUrl) => {\n // If user manually changes URL, mark as manually set\n if (newUrl !== generateSlug(playlist.title)) {\n urlManuallySet.value = true;\n }\n});\n\n// Computed\nconst totalDuration = computed(() => {\n return playlist.tracks.reduce((sum, track) => sum + (track.duration \|\| 0), 0);\n});\n\n// Methods\nconst formatDuration = (seconds) => {\n if (!seconds) return '0:00';\n const hours = Math.floor(seconds / 3600);\n const minutes = Math.floor((seconds % 3600) / 60);\n const secs = seconds % 60;\n \n if (hours > 0) {\n return `${hours}:${minutes.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`;\n }\n return `${minutes}:${secs.toString().padStart(2, '0')}`;\n};\n\nconst moveTrack = (index, direction) => {\n const newIndex = direction === 'up' ? index - 1 : index + 1;\n if (newIndex < 0 \|\| newIndex >= playlist.tracks.length) return;\n \n const tracks = [...playlist.tracks];\n [tracks[index], tracks[newIndex]] = [tracks[newIndex], tracks[index]];\n playlist.tracks = tracks;\n};\n\nconst fetchPlaylist = async () => {\n if (!props.url) return;\n \n try {\n const fetchedPlaylist = await playlistsStore.actions.fetchPlaylistByUrl(props.url);\n \n if (!fetchedPlaylist) {\n store.core.actions.setError({\n message: 'Playlist not found'\n });\n return;\n }\n \n // Update local playlist data\n Object.assign(playlist, {\n title: fetchedPlaylist.title \|\| '',\n description: fetchedPlaylist.description \|\| '',\n coverUrl: fetchedPlaylist.coverUrl \|\| '',\n tracks: fetchedPlaylist.tracks \|\| [],\n url: fetchedPlaylist.url \|\| '',\n isPublic: fetchedPlaylist.isPublic !== false,\n isCollaborative: fetchedPlaylist.isCollaborative \|\| false,\n _id: fetchedPlaylist._id\n });\n \n } catch (error) {\n console.error('Error fetching playlist:', error);\n store.core.actions.setError({\n message: 'Failed to load playlist details'\n });\n }\n};\n\nconst validateForm = () => {\n let isValid = true;\n \n // Validate title\n if (!playlist.title.trim()) {\n validation.title = {\n message: 'Playlist title is required'\n };\n isValid = false;\n } else {\n validation.title = false;\n }\n \n // Validate description\n if (playlist.description && playlist.description.length > 2000) {\n validation.description = {\n message: 'Description is too long (max 2000 characters)'\n };\n isValid = false;\n } else {\n validation.description = 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 ...playlist,\n tracks: playlist.tracks.map(track => ({\n track: track._id \|\| track,\n addedAt: new Date()\n }))\n };\n \n // Add ownership data if creating new playlist\n if (!props.editMode) {\n formData.creator = {\n type: 'user',\n target: auth.state.user._id\n };\n formData.owner = {\n type: 'user',\n target: auth.state.user._id\n };\n }\n \n let result;\n if (props.editMode) {\n result = await playlistsStore.actions.updatePlaylist(formData);\n } else {\n result = await playlistsStore.actions.createPlaylist(formData);\n }\n \n // Navigate to playlist detail page\n setTimeout(() => {\n router.push({\n name: 'playlist',\n params: { url: result.url }\n });\n }, 1000);\n \n } catch (error) {\n console.error('Error saving playlist:', error);\n store.core.actions.setError({\n message: 'Failed to save playlist'\n });\n }\n};\n\nconst handleUploadError = (error) => {\n console.error('Upload error:', error);\n store.core.actions.setError({\n message: 'Error uploading image'\n });\n};\n\n// Lifecycle hooks\nonMounted(async () => {\n if (props.editMode) {\n await fetchPlaylist();\n // Mark URL as manually set in edit mode to prevent auto-generation\n urlManuallySet.value = true;\n }\n});\n</script>\n"],"names":["playlistsStore.actions","auth.state"],"mappings":"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"}
1	+ {"version":3,"file":"PlaylistForm.vue.js","sources":["../../../../../../../src/modules/music/components/forms/PlaylistForm.vue"],"sourcesContent":["<template>\n <div class=\"pd-medium\">\n <h2 class=\"h2 mn-b-medium\">{{ editMode ? 'Edit Playlist' : 'Create Playlist' }}</h2>\n \n <form @submit.prevent=\"submitForm\" class=\"cols-1 gap-regular\">\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 <!-- Playlist Cover -->\n <div class=\"mn-b-medium\">\n <p class=\"p-medium mn-b-small\">Playlist Cover</p>\n <UploadImage\n v-model:photo=\"playlist.coverUrl\"\n uploadPath=\"playlists/covers\"\n class=\"w-100 h-15r radius-small o-hidden mn-b-small\"\n @error=\"handleUploadError\"\n />\n </div>\n \n <!-- Title -->\n <Field\n v-model:field=\"playlist.title\"\n label=\"Title\"\n placeholder=\"Enter playlist title\"\n class=\"bg-white radius-small pd-small mn-b-thin\"\n :validation=\"validation.title\"\n />\n \n <!-- URL -->\n <Field\n v-model:field=\"playlist.url\"\n label=\"URL\"\n placeholder=\"Leave blank for auto-generation based on the playlist title\"\n class=\"bg-white radius-small pd-small mn-b-small\"\n />\n \n <!-- Description -->\n <Field\n v-model:field=\"playlist.description\"\n label=\"Description\"\n type=\"textarea\"\n placeholder=\"Enter playlist description\"\n class=\"bg-white radius-small pd-small mn-b-thin\"\n :validation=\"validation.description\"\n />\n </div>\n \n <!-- Tracks Section -->\n <Block title=\"Tracks\">\n <BlockMultiselect\n v-model=\"playlist.tracks\"\n placeholder=\"Search tracks...\"\n :multiple=\"true\"\n :transform=\"(item) => ({ \n _id: item._id, \n title: item.title,\n artists: item.artists,\n album: item.album,\n duration: item.duration \n })\"\n :store=\"{\n read: (options) => tracksStore.actions.fetchTracks(options),\n state: tracksStore.state\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 tracks found',\n description: 'Try different search terms',\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 tracks with reorder support -->\n <template #selected=\"{ item, clear, index }\">\n <div class=\"flex-nowrap flex-v-center flex gap-thin\">\n <button \n v-if=\"playlist.tracks.length > 1\"\n @click.stop=\"moveTrack(index, 'up')\"\n :disabled=\"index === 0\"\n class=\"i-small pd-micro bg-grey-nano radius-extra flex-center flex aspect-1x1 hover:scale-[1.05]\"\n >\n <IconArrowUp class=\"i-micro\" />\n </button>\n \n <button \n v-if=\"playlist.tracks.length > 1\"\n @click.stop=\"moveTrack(index, 'down')\"\n :disabled=\"index === playlist.tracks.length - 1\"\n class=\"i-small pd-micro bg-grey-nano radius-extra flex-center flex aspect-1x1 hover:scale-[1.05]\"\n >\n <IconArrowDown class=\"i-micro\" />\n </button>\n \n <div class=\"flex-child-1\">\n <p class=\"fw-medium\">{{ item.title }}</p>\n <p class=\"t-small t-transp\">\n {{ item.artists?.map(a => a.name \|\| a).join(', ') }}\n <span v-if=\"item.album\"> • {{ item.album.title \|\| item.album }}</span>\n </p>\n </div>\n \n <span v-if=\"item.duration\" class=\"t-small t-transp\">\n {{ formatDuration(item.duration) }}\n </span>\n \n <button \n @click.stop=\"clear\"\n class=\"i-small pd-micro bg-red radius-extra flex-center flex aspect-1x1 hover:scale-[1.05]\"\n >\n <IconCross class=\"i-micro fill-white\" />\n </button>\n </div>\n </template>\n \n <!-- Track items in dropdown -->\n <template #item=\"{ item }\">\n <div class=\"flex-nowrap flex-v-center flex\">\n <div class=\"w-100\">\n <p class=\"fw-medium\">{{ item.title }}</p>\n <p class=\"t-small t-transp\">\n {{ item.artists?.map(a => a.name \|\| a).join(', ') }}\n <span v-if=\"item.album\"> • {{ item.album.title \|\| item.album }}</span>\n </p>\n </div>\n <span v-if=\"item.duration\" class=\"t-small t-transp mn-l-small\">\n {{ formatDuration(item.duration) }}\n </span>\n </div>\n </template>\n </BlockMultiselect>\n \n <!-- Tracks summary -->\n <div v-if=\"playlist.tracks.length > 0\" class=\"t-small t-transp mn-t-small\">\n {{ playlist.tracks.length }} tracks • {{ formatDuration(totalDuration) }}\n </div>\n </Block>\n \n <!-- Privacy & Settings Section -->\n <div class=\"bg-light pd-medium radius-medium\">\n <h3 class=\"h3 mn-b-medium\">Privacy & Settings</h3>\n \n <!-- Privacy -->\n <div class=\"mn-b-medium\">\n <p class=\"p-medium mn-b-small\">Privacy</p>\n <div class=\"flex gap-regular\">\n <Radio\n v-model:radio=\"playlist.isPublic\"\n :value=\"true\"\n name=\"privacy\"\n label=\"Public\"\n class=\"bg-white pd-small radius-small\"\n />\n <Radio\n v-model:radio=\"playlist.isPublic\"\n :value=\"false\"\n name=\"privacy\"\n label=\"Private\"\n class=\"bg-white pd-small radius-small\"\n />\n </div>\n </div>\n \n <!-- Collaborative -->\n <div class=\"mn-b-medium\">\n <p class=\"p-medium mn-b-small\">Collaborative Playlist</p>\n <div class=\"flex gap-regular\">\n <Radio\n v-model:radio=\"playlist.isCollaborative\"\n :value=\"true\"\n name=\"collaborative\"\n label=\"Yes\"\n class=\"bg-white pd-small radius-small\"\n />\n <Radio\n v-model:radio=\"playlist.isCollaborative\"\n :value=\"false\"\n name=\"collaborative\"\n label=\"No\"\n class=\"bg-white pd-small radius-small\"\n />\n </div>\n </div>\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!' : 'Created!'\n }\"\n >\n {{ editMode ? 'Update Playlist' : 'Create Playlist' }}\n </Button>\n </div>\n </form>\n </div>\n</template>\n\n<script setup>\nimport { ref, reactive, onMounted, watch, computed } 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 Radio from '@martyrs/src/components/Radio/Radio.vue';\nimport UploadImage from '@martyrs/src/components/UploadImage/UploadImage.vue';\nimport IconCross from '@martyrs/src/modules/icons/navigation/IconCross.vue';\nimport IconArrowUp from '@martyrs/src/modules/icons/navigation/IconCross.vue';\nimport IconArrowDown from '@martyrs/src/modules/icons/navigation/IconCross.vue';\n\nimport BlockMultiselect from '@martyrs/src/modules/core/views/components/blocks/BlockMultiselect.vue';\n\n// Import stores\nimport * as playlistsStore from '../../store/playlists';\nimport * as tracksStore from '../../store/tracks';\nimport { useStore } from '@martyrs/src/modules/core/views/store/core.store.js';\n\nconst store = useStore();\nimport * as auth from '@martyrs/src/modules/auth/views/store/auth.js';\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\n// State\nconst playlist = reactive({\n title: '',\n description: '',\n coverUrl: '',\n tracks: [],\n url: '',\n isPublic: true,\n isCollaborative: false\n});\n\nconst validation = reactive({\n title: false,\n description: false\n});\n\n// Track if URL was manually entered\nconst urlManuallySet = ref(false);\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 playlist title to auto-generate URL\nwatch(() => playlist.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 playlist.url = generateSlug(newTitle);\n }\n});\n\n// Watch for manual changes to URL field\nwatch(() => playlist.url, (newUrl, oldUrl) => {\n // If user manually changes URL, mark as manually set\n if (newUrl !== generateSlug(playlist.title)) {\n urlManuallySet.value = true;\n }\n});\n\n// Computed\nconst totalDuration = computed(() => {\n return playlist.tracks.reduce((sum, track) => sum + (track.duration \|\| 0), 0);\n});\n\n// Methods\nconst formatDuration = (seconds) => {\n if (!seconds) return '0:00';\n const hours = Math.floor(seconds / 3600);\n const minutes = Math.floor((seconds % 3600) / 60);\n const secs = seconds % 60;\n \n if (hours > 0) {\n return `${hours}:${minutes.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`;\n }\n return `${minutes}:${secs.toString().padStart(2, '0')}`;\n};\n\nconst moveTrack = (index, direction) => {\n const newIndex = direction === 'up' ? index - 1 : index + 1;\n if (newIndex < 0 \|\| newIndex >= playlist.tracks.length) return;\n \n const tracks = [...playlist.tracks];\n [tracks[index], tracks[newIndex]] = [tracks[newIndex], tracks[index]];\n playlist.tracks = tracks;\n};\n\nconst fetchPlaylist = async () => {\n if (!props.url) return;\n \n try {\n const fetchedPlaylist = await playlistsStore.actions.fetchPlaylistByUrl(props.url);\n \n if (!fetchedPlaylist) {\n store.core.actions.setError({\n message: 'Playlist not found'\n });\n return;\n }\n \n // Update local playlist data\n Object.assign(playlist, {\n title: fetchedPlaylist.title \|\| '',\n description: fetchedPlaylist.description \|\| '',\n coverUrl: fetchedPlaylist.coverUrl \|\| '',\n tracks: fetchedPlaylist.tracks \|\| [],\n url: fetchedPlaylist.url \|\| '',\n isPublic: fetchedPlaylist.isPublic !== false,\n isCollaborative: fetchedPlaylist.isCollaborative \|\| false,\n _id: fetchedPlaylist._id\n });\n \n } catch (error) {\n console.error('Error fetching playlist:', error);\n store.core.actions.setError({\n message: 'Failed to load playlist details'\n });\n }\n};\n\nconst validateForm = () => {\n let isValid = true;\n \n // Validate title\n if (!playlist.title.trim()) {\n validation.title = {\n message: 'Playlist title is required'\n };\n isValid = false;\n } else {\n validation.title = false;\n }\n \n // Validate description\n if (playlist.description && playlist.description.length > 2000) {\n validation.description = {\n message: 'Description is too long (max 2000 characters)'\n };\n isValid = false;\n } else {\n validation.description = 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 ...playlist,\n tracks: playlist.tracks.map(track => ({\n track: track._id \|\| track,\n addedAt: new Date()\n }))\n };\n \n // Add ownership data if creating new playlist\n if (!props.editMode) {\n formData.creator = {\n type: 'user',\n target: auth.state.user._id\n };\n formData.owner = {\n type: 'user',\n target: auth.state.user._id\n };\n }\n \n let result;\n if (props.editMode) {\n result = await playlistsStore.actions.updatePlaylist(formData);\n } else {\n result = await playlistsStore.actions.createPlaylist(formData);\n }\n \n // Navigate to playlist detail page\n setTimeout(() => {\n router.push({\n name: 'playlist',\n params: { url: result.url }\n });\n }, 1000);\n \n } catch (error) {\n console.error('Error saving playlist:', error);\n store.core.actions.setError({\n message: 'Failed to save playlist'\n });\n }\n};\n\nconst handleUploadError = (error) => {\n console.error('Upload error:', error);\n store.core.actions.setError({\n message: 'Error uploading image'\n });\n};\n\n// Lifecycle hooks\nonMounted(async () => {\n if (props.editMode) {\n await fetchPlaylist();\n // Mark URL as manually set in edit mode to prevent auto-generation\n urlManuallySet.value = true;\n }\n});\n</script>\n"],"names":["playlistsStore.actions","auth.state"],"mappings":"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"}

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

@@ -67,7 +67,7 @@ const _sfc_main = {
           "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => searchQuery.value = $event),
           type: "text",
           placeholder: __props.placeholder,
-          class: "bg-transparent border-none flex-1",
+          class: "bg-transparent border-none flex-child-1",
           onKeydown: withKeys(handleSearch, ["enter"])
         }, null, 40, _hoisted_2), [
           [vModelText, searchQuery.value]
@@ -91,7 +91,7 @@ const _sfc_main = {
     };
   }
 };
-const SearchForm = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-fa80a365"]]);
+const SearchForm = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-120f776b"]]);
 export {
   SearchForm as default
 };

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

	@@ -1 +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-white-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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
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-white-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-child-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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}