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

@ozdao/martyrs 0.2.571 → 0.2.572

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 (818) hide show

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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA2PA,UAAM,QAAQ,SAAQ;AAItB,UAAM,QAAQ;AAYd,UAAM,SAAS,UAAS;AACV,aAAQ;AAGtB,UAAM,WAAW,SAAS;AAAA,MACxB,OAAO;AAAA,MACP,aAAa;AAAA,MACb,UAAU;AAAA,MACV,QAAQ,CAAA;AAAA,MACR,KAAK;AAAA,MACL,UAAU;AAAA,MACV,iBAAiB;AAAA,IACnB,CAAC;AAED,UAAM,aAAa,SAAS;AAAA,MAC1B,OAAO;AAAA,MACP,aAAa;AAAA,IACf,CAAC;AAGD,UAAM,iBAAiB,IAAI,KAAK;AAGhC,UAAM,eAAe,CAAC,SAAS;AAC7B,UAAI,CAAC,KAAM,QAAO;AAClB,aAAO,KACJ,YAAW,EACX,QAAQ,iBAAiB,EAAE,EAC3B,QAAQ,QAAQ,GAAG,EACnB,QAAQ,OAAO,GAAG,EAClB,KAAK,GAAG;AAAA,IACb;AAGA,UAAM,MAAM,SAAS,OAAO,CAAC,aAAa;AAExC,UAAI,CAAC,eAAe,SAAS,CAAC,MAAM,UAAU;AAC5C,iBAAS,MAAM,aAAa,QAAQ;AAAA,MACtC;AAAA,IACF,CAAC;AAGD,UAAM,MAAM,SAAS,KAAK,CAAC,QAAQ,WAAW;AAE5C,UAAI,WAAW,aAAa,SAAS,KAAK,GAAG;AAC3C,uBAAe,QAAQ;AAAA,MACzB;AAAA,IACF,CAAC;AAGD,UAAM,gBAAgB,SAAS,MAAM;AACnC,aAAO,SAAS,OAAO,OAAO,CAAC,KAAK,UAAU,OAAO,MAAM,YAAY,IAAI,CAAC;AAAA,IAC9E,CAAC;AAGD,UAAM,iBAAiB,CAAC,YAAY;AAClC,UAAI,CAAC,QAAS,QAAO;AACrB,YAAM,QAAQ,KAAK,MAAM,UAAU,IAAI;AACvC,YAAM,UAAU,KAAK,MAAO,UAAU,OAAQ,EAAE;AAChD,YAAM,OAAO,UAAU;AAEvB,UAAI,QAAQ,GAAG;AACb,eAAO,GAAG,KAAK,IAAI,QAAQ,SAAQ,EAAG,SAAS,GAAG,GAAG,CAAC,IAAI,KAAK,SAAQ,EAAG,SAAS,GAAG,GAAG,CAAC;AAAA,MAC5F;AACA,aAAO,GAAG,OAAO,IAAI,KAAK,SAAQ,EAAG,SAAS,GAAG,GAAG,CAAC;AAAA,IACvD;AAEA,UAAM,YAAY,CAAC,OAAO,cAAc;AACtC,YAAM,WAAW,cAAc,OAAO,QAAQ,IAAI,QAAQ;AAC1D,UAAI,WAAW,KAAK,YAAY,SAAS,OAAO,OAAQ;AAExD,YAAM,SAAS,CAAC,GAAG,SAAS,MAAM;AAClC,OAAC,OAAO,KAAK,GAAG,OAAO,QAAQ,CAAC,IAAI,CAAC,OAAO,QAAQ,GAAG,OAAO,KAAK,CAAC;AACpE,eAAS,SAAS;AAAA,IACpB;AAEA,UAAM,gBAAgB,YAAY;AAChC,UAAI,CAAC,MAAM,IAAK;AAEhB,UAAI;AACF,cAAM,kBAAkB,MAAMA,UAAuB,mBAAmB,MAAM,GAAG;AAEjF,YAAI,CAAC,iBAAiB;AACpB,gBAAM,KAAK,QAAQ,SAAS;AAAA,YAC1B,SAAS;AAAA,UACjB,CAAO;AACD;AAAA,QACF;AAGA,eAAO,OAAO,UAAU;AAAA,UACtB,OAAO,gBAAgB,SAAS;AAAA,UAChC,aAAa,gBAAgB,eAAe;AAAA,UAC5C,UAAU,gBAAgB,YAAY;AAAA,UACtC,QAAQ,gBAAgB,UAAU,CAAA;AAAA,UAClC,KAAK,gBAAgB,OAAO;AAAA,UAC5B,UAAU,gBAAgB,aAAa;AAAA,UACvC,iBAAiB,gBAAgB,mBAAmB;AAAA,UACpD,KAAK,gBAAgB;AAAA,QAC3B,CAAK;AAAA,MAEH,SAAS,OAAO;AACd,gBAAQ,MAAM,4BAA4B,KAAK;AAC/C,cAAM,KAAK,QAAQ,SAAS;AAAA,UAC1B,SAAS;AAAA,QACf,CAAK;AAAA,MACH;AAAA,IACF;AAEA,UAAM,eAAe,MAAM;AACzB,UAAI,UAAU;AAGd,UAAI,CAAC,SAAS,MAAM,QAAQ;AAC1B,mBAAW,QAAQ;AAAA,UACjB,SAAS;AAAA,QACf;AACI,kBAAU;AAAA,MACZ,OAAO;AACL,mBAAW,QAAQ;AAAA,MACrB;AAGA,UAAI,SAAS,eAAe,SAAS,YAAY,SAAS,KAAM;AAC9D,mBAAW,cAAc;AAAA,UACvB,SAAS;AAAA,QACf;AACI,kBAAU;AAAA,MACZ,OAAO;AACL,mBAAW,cAAc;AAAA,MAC3B;AAEA,aAAO;AAAA,IACT;AAEA,UAAM,aAAa,YAAY;AAC7B,UAAI,CAAC,aAAY,GAAI;AACnB;AAAA,MACF;AAEA,UAAI;AAEF,cAAM,WAAW;AAAA,UACf,GAAG;AAAA,UACH,QAAQ,SAAS,OAAO,IAAI,YAAU;AAAA,YACpC,OAAO,MAAM,OAAO;AAAA,YACpB,SAAS,oBAAI,KAAI;AAAA,UACzB,EAAQ;AAAA,QACR;AAGI,YAAI,CAAC,MAAM,UAAU;AACnB,mBAAS,UAAU;AAAA,YACjB,MAAM;AAAA,YACN,QAAQC,QAAW,KAAK;AAAA,UAChC;AACM,mBAAS,QAAQ;AAAA,YACf,MAAM;AAAA,YACN,QAAQA,QAAW,KAAK;AAAA,UAChC;AAAA,QACI;AAEA,YAAI;AACJ,YAAI,MAAM,UAAU;AAClB,mBAAS,MAAMD,UAAuB,eAAe,QAAQ;AAAA,QAC/D,OAAO;AACL,mBAAS,MAAMA,UAAuB,eAAe,QAAQ;AAAA,QAC/D;AAGA,mBAAW,MAAM;AACf,iBAAO,KAAK;AAAA,YACV,MAAM;AAAA,YACN,QAAQ,EAAE,KAAK,OAAO,IAAG;AAAA,UACjC,CAAO;AAAA,QACH,GAAG,GAAI;AAAA,MAET,SAAS,OAAO;AACd,gBAAQ,MAAM,0BAA0B,KAAK;AAC7C,cAAM,KAAK,QAAQ,SAAS;AAAA,UAC1B,SAAS;AAAA,QACf,CAAK;AAAA,MACH;AAAA,IACF;AAEA,UAAM,oBAAoB,CAAC,UAAU;AACnC,cAAQ,MAAM,iBAAiB,KAAK;AACpC,YAAM,KAAK,QAAQ,SAAS;AAAA,QAC1B,SAAS;AAAA,MACb,CAAG;AAAA,IACH;AAGA,cAAU,YAAY;AACpB,UAAI,MAAM,UAAU;AAClB,cAAM,cAAa;AAEnB,uBAAe,QAAQ;AAAA,MACzB;AAAA,IACF,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

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

@@ -18,34 +18,34 @@ import { state } from "../../../auth/views/store/auth.js";
 const _hoisted_1 = { class: "pd-medium" };
 const _hoisted_2 = { class: "h2 mn-b-medium" };
 const _hoisted_3 = { class: "bg-light pd-medium radius-medium" };
-const _hoisted_4 = { class: "cols-2-fit-content mobile:cols-1 gap-regular" };
+const _hoisted_4 = { class: "cols-[fit-content(100%)_1fr] mobile:cols-1 gap-regular" };
 const _hoisted_5 = { class: "bg-light pd-medium radius-medium" };
 const _hoisted_6 = { class: "flex-nowrap flex-v-center flex gap-thin" };
-const _hoisted_7 = { class: "t-medium" };
+const _hoisted_7 = { class: "fw-medium" };
 const _hoisted_8 = ["onClick"];
 const _hoisted_9 = { class: "flex-nowrap flex-v-center flex" };
 const _hoisted_10 = { class: "w-100" };
-const _hoisted_11 = { class: "t-medium" };
+const _hoisted_11 = { class: "fw-medium" };
 const _hoisted_12 = {
   key: 0,
   class: "t-small t-transp"
 };
 const _hoisted_13 = { class: "flex-nowrap flex-v-center flex gap-thin" };
-const _hoisted_14 = { class: "t-medium" };
+const _hoisted_14 = { class: "fw-medium" };
 const _hoisted_15 = ["onClick"];
 const _hoisted_16 = { class: "flex-nowrap flex-v-center flex" };
 const _hoisted_17 = { class: "w-100" };
-const _hoisted_18 = { class: "t-medium" };
+const _hoisted_18 = { class: "fw-medium" };
 const _hoisted_19 = {
   key: 0,
   class: "t-small t-transp"
 };
 const _hoisted_20 = { class: "flex-nowrap flex-v-center flex gap-thin" };
-const _hoisted_21 = { class: "t-medium" };
+const _hoisted_21 = { class: "fw-medium" };
 const _hoisted_22 = ["onClick"];
 const _hoisted_23 = { class: "flex-nowrap flex-v-center flex" };
 const _hoisted_24 = { class: "w-100" };
-const _hoisted_25 = { class: "t-medium" };
+const _hoisted_25 = { class: "fw-medium" };
 const _hoisted_26 = {
   key: 0,
   class: "t-small t-transp"
@@ -338,7 +338,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 }) => [
@@ -346,7 +346,7 @@ const _sfc_main = {
                     createElementVNode("span", _hoisted_7, 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_8)
@@ -403,7 +403,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 }) => [
@@ -411,7 +411,7 @@ const _sfc_main = {
                     createElementVNode("span", _hoisted_14, toDisplayString(item?.title || 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_15)
@@ -468,7 +468,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 }) => [
@@ -476,7 +476,7 @@ const _sfc_main = {
                     createElementVNode("span", _hoisted_21, 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_22)

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

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