@ozdao/martyrs 0.2.546 → 0.2.548

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

@@ -1 +1 @@
-{"version":3,"file":"AlbumForm.vue.js","sources":["../../../../../../../src/modules/music/components/forms/AlbumForm.vue"],"sourcesContent":["<template>\n  <div class=\"pd-medium\">\n    <h2 class=\"h2 mn-b-medium\">{{ editMode ? 'Edit Album' : 'Create Album' }}</h2>\n    \n    <form @submit.prevent=\"submitForm\" class=\"cols-1 gap-medium\">\n      <!-- Basic Info Section -->\n      <div class=\"bg-light pd-medium radius-medium\">\n        <h3 class=\"h3 mn-b-medium\">Basic Information</h3>\n        \n        <!-- Album Cover -->\n        <div class=\"mn-b-medium\">\n          <p class=\"p-semi mn-b-small\">Album Cover</p>\n          <UploadImage\n            v-model:photo=\"album.coverArt\"\n            uploadPath=\"albums/covers\"\n            class=\"w-100 h-15r radius-small o-hidden mn-b-small\"\n            @error=\"handleUploadError\"\n          />\n        </div>\n        \n        <!-- Title -->\n        <Field\n          v-model:field=\"album.title\"\n          label=\"Title\"\n          placeholder=\"Enter album title\"\n          class=\"bg-white radius-small pd-small mn-b-thin\"\n          :validation=\"validation.title\"\n        />\n        \n        <!-- URL -->\n        <Field\n          v-model:field=\"album.url\"\n          label=\"URL\"\n          placeholder=\"Leave blank for auto-generation based on the album title\"\n          class=\"bg-white radius-small pd-small mn-b-small\"\n        />\n        \n        <!-- Description -->\n        <Field\n          v-model:field=\"album.description\"\n          label=\"Description\"\n          type=\"textarea\"\n          placeholder=\"Enter album description\"\n          class=\"bg-white radius-small pd-small mn-b-thin\"\n          :validation=\"validation.description\"\n        />\n        \n        <!-- Release Date -->\n        <Field\n          v-model:field=\"album.releaseDate\"\n          label=\"Release Date\"\n          type=\"date\"\n          class=\"bg-white radius-small pd-small mn-b-thin\"\n          :validation=\"validation.releaseDate\"\n        />\n        \n        <!-- Album Type -->\n        <Select\n          v-model:select=\"album.type\"\n          :options=\"albumTypeOptions\"\n          label=\"Album Type\"\n          class=\"bg-white radius-small pd-small mn-b-thin\"\n        />\n      </div>\n      \n      <!-- Artists Section -->\n      <Block title=\"Artists\">\n        <BlockMultiselect\n          v-model=\"album.artists\"\n          placeholder=\"Search artists...\"\n          :multiple=\"true\"\n          :transform=\"(item) => ({ _id: item._id, name: item.name })\"\n          :store=\"{\n            read: (options) => artistsStore.actions.fetchArtists(options),\n            state: artistsStore.state\n          }\"\n          :options=\"{\n            rootOnly: false,\n            excludeChildren: false,\n            limit: 50\n          }\"\n          :skeleton=\"{\n            hide: false,\n            horizontal: true,\n            class: 'radius-small',\n            structure: [{ \n              block: 'text', size: 'large'\n            }]\n          }\"\n          :states=\"{\n            empty: {\n              title: 'No artists found',\n              description: 'Try different search terms or create a new artist',\n              class: 'radius-small'\n            }\n          }\"\n          key=\"_id\"\n          :label=\"item => item.name\"\n          classSearch=\"bg-white radius-small\"\n          classSelected=\"bg-white pd-small radius-small\"\n          classDropdown=\"bg-white pd-small radius-medium bs-small\"\n          classItem=\"pd-small radius-small hover-bg-light cursor-pointer\"\n          classFeed=\"h-max-30r gap-thin flex-column flex o-scroll\"\n        >\n          <!-- Слот для выбранных артистов -->\n          <template #selected=\"{ item, clear }\">\n            <div class=\"flex-nowrap flex-v-center flex gap-thin\">\n              <span class=\"t-medium\">{{ item?.name || item }}</span>\n              <button \n                @click.stop=\"clear\"\n                class=\"i-small pd-micro bg-red radius-extra flex-center flex aspect-1x1 hover-scale-1\"\n              >\n                <IconCross class=\"i-micro fill-white\" />\n              </button>\n            </div>\n          </template>\n          \n          <!-- Слот для элементов в списке -->\n          <template #item=\"{ item }\">\n            <div class=\"flex-nowrap flex-v-center flex\">\n              <div class=\"w-100\">\n                <p class=\"t-medium\">{{ item.name }}</p>\n                <p v-if=\"item.bio\" class=\"t-small t-transp\">{{ item.bio }}</p>\n              </div>\n            </div>\n          </template>\n        </BlockMultiselect>\n      </Block>\n      \n      <!-- Genres Section -->\n      <Block title=\"Genres\">\n        <BlockMultiselect\n          v-model=\"album.genres\"\n          placeholder=\"Search genres...\"\n          :multiple=\"true\"\n          :transform=\"(item) => ({ _id: item._id, name: item.name })\"\n          :store=\"{\n            read: (options) => genresStore.actions.fetchGenres(options),\n            state: genresStore.state\n          }\"\n          :options=\"{\n            rootOnly: false,\n            excludeChildren: false,\n            limit: 50\n          }\"\n          :skeleton=\"{\n            hide: false,\n            horizontal: true,\n            class: 'radius-small',\n            structure: [{ \n              block: 'text', size: 'large'\n            }]\n          }\"\n          :states=\"{\n            empty: {\n              title: 'No genres found',\n              description: 'Try different search terms or create a new genre',\n              class: 'radius-small'\n            }\n          }\"\n          key=\"_id\"\n          :label=\"item => item.name\"\n          classSearch=\"bg-white radius-small\"\n          classSelected=\"bg-white pd-small radius-small\"\n          classDropdown=\"bg-white pd-small radius-medium bs-small\"\n          classItem=\"pd-small radius-small hover-bg-light cursor-pointer\"\n          classFeed=\"h-max-30r gap-thin flex-column flex o-scroll\"\n        >\n          <!-- Слот для выбранных жанров -->\n          <template #selected=\"{ item, clear }\">\n            <div class=\"flex-nowrap flex-v-center flex gap-thin\">\n              <span class=\"t-medium\">{{ item?.name || item }}</span>\n              <button \n                @click.stop=\"clear\"\n                class=\"i-small pd-micro bg-red radius-extra flex-center flex aspect-1x1 hover-scale-1\"\n              >\n                <IconCross class=\"i-micro fill-white\" />\n              </button>\n            </div>\n          </template>\n          \n          <!-- Слот для элементов в списке -->\n          <template #item=\"{ item }\">\n            <div class=\"flex-nowrap flex-v-center flex\">\n              <div class=\"w-100\">\n                <p class=\"t-medium\">{{ item.name }}</p>\n                <p v-if=\"item.description\" class=\"t-small t-transp\">{{ item.description }}</p>\n              </div>\n            </div>\n          </template>\n        </BlockMultiselect>\n      </Block>\n      \n      <!-- Status Section -->\n      <div class=\"bg-light pd-medium radius-medium\">\n        <h3 class=\"h3 mn-b-medium\">Publishing Status</h3>\n        \n        <Select\n          v-model:select=\"album.status\"\n          :options=\"statusOptions\"\n          label=\"Status\"\n          class=\"bg-white radius-small pd-small mn-b-thin\"\n        />\n      </div>\n      \n      <!-- Submit Button -->\n      <div class=\"flex flex-justify-between\">\n        <Button\n          @click=\"$router.go(-1)\"\n          class=\"bg-grey-nano t-black\"\n          :showSucces=\"false\"\n          :showLoader=\"false\"\n        >\n          Cancel\n        </Button>\n        \n        <Button\n          :submit=\"submitForm\"\n          class=\"bg-main t-black\"\n          :text=\"{\n            success: editMode ? 'Updated!' : 'Created!'\n          }\"\n        >\n          {{ editMode ? 'Update Album' : 'Create Album' }}\n        </Button>\n      </div>\n    </form>\n  </div>\n</template>\n\n<script setup>\nimport { ref, reactive, onMounted, watch } from 'vue';\nimport { useRouter, useRoute } from 'vue-router';\n\n// Import Martyrs components\nimport Field from '@martyrs/src/components/Field/Field.vue';\nimport Block from '@martyrs/src/components/Block/Block.vue';\nimport Button from '@martyrs/src/components/Button/Button.vue';\nimport Select from '@martyrs/src/components/Select/Select.vue';\nimport UploadImage from '@martyrs/src/components/UploadImage/UploadImage.vue';\nimport IconCross from '@martyrs/src/modules/icons/navigation/IconCross.vue';\n\nimport BlockMultiselect from '@martyrs/src/modules/globals/views/components/blocks/BlockMultiselect.vue';\n\n// Import stores\nimport * as albumsStore from '../../store/albums';\nimport * as artistsStore from '../../store/artists';\nimport * as genresStore from '../../store/genres';\nimport * as globals from '@martyrs/src/modules/globals/views/store/globals.js';\nimport * as auth from '@martyrs/src/modules/auth/views/store/auth.js';\n\n// Props\nconst props = defineProps({\n  editMode: {\n    type: Boolean,\n    default: false\n  },\n  url: {\n    type: String,\n    default: ''\n  }\n});\n\n// Router and route\nconst router = useRouter();\nconst route = useRoute();\n\n// State\nconst album = reactive({\n  title: '',\n  description: '',\n  releaseDate: new Date().toISOString().split('T')[0],\n  coverArt: '',\n  artists: [],\n  type: 'album',\n  genres: [],\n  totalTracks: 0,\n  url: '',\n  status: 'draft'\n});\n\nconst validation = reactive({\n  title: false,\n  description: false,\n  releaseDate: false\n});\n\n// Track if URL was manually entered\nconst urlManuallySet = ref(false);\n\n// Function to generate URL-friendly slug from text\nconst generateSlug = (text) => {\n  if (!text) return '';\n  return text\n    .toLowerCase()\n    .replace(/[^a-z0-9\\s-]/g, '') // Remove special characters\n    .replace(/\\s+/g, '-') // Replace spaces with hyphens\n    .replace(/-+/g, '-') // Replace multiple hyphens with single\n    .trim('-'); // Remove leading/trailing hyphens\n};\n\n// Watch for changes in album title to auto-generate URL\nwatch(() => album.title, (newTitle) => {\n  // Only auto-generate if URL hasn't been manually set and we're not in edit mode\n  if (!urlManuallySet.value && !props.editMode) {\n    album.url = generateSlug(newTitle);\n  }\n});\n\n// Watch for manual changes to URL field\nwatch(() => album.url, (newUrl, oldUrl) => {\n  // If user manually changes URL, mark as manually set\n  if (newUrl !== generateSlug(album.title)) {\n    urlManuallySet.value = true;\n  }\n});\n\n// Options\nconst statusOptions = [\n  'draft',\n  'published',\n  'archived'\n];\n\nconst albumTypeOptions = [\n  'album',\n  'single',\n  'EP',\n  'compilation'\n];\n\nconst fetchAlbum = async () => {\n  if (!props.url) return;\n  \n  try {\n    const fetchedAlbum = await albumsStore.actions.fetchAlbumByUrl(props.url);\n    \n    if (!fetchedAlbum) {\n      globals.actions.setError({\n        message: 'Album not found'\n      });\n      return;\n    }\n    \n    // Update local album data\n    Object.assign(album, {\n      title: fetchedAlbum.title || '',\n      description: fetchedAlbum.description || '',\n      releaseDate: fetchedAlbum.releaseDate ? new Date(fetchedAlbum.releaseDate).toISOString().split('T')[0] : '',\n      coverArt: fetchedAlbum.coverArt || '',\n      artists: fetchedAlbum.artists || [],\n      type: fetchedAlbum.type || 'album',\n      genres: fetchedAlbum.genres || [],\n      totalTracks: fetchedAlbum.totalTracks || 0,\n      url: fetchedAlbum.url || '',\n      status: fetchedAlbum.status || 'draft',\n      _id: fetchedAlbum._id\n    });\n    \n  } catch (error) {\n    console.error('Error fetching album:', error);\n    globals.actions.setError({\n      message: 'Failed to load album details'\n    });\n  }\n};\n\nconst validateForm = () => {\n  let isValid = true;\n  \n  // Validate title\n  if (!album.title.trim()) {\n    validation.title = {\n      message: 'Album title is required'\n    };\n    isValid = false;\n  } else {\n    validation.title = false;\n  }\n  \n  // Validate release date\n  if (!album.releaseDate) {\n    validation.releaseDate = {\n      message: 'Release date is required'\n    };\n    isValid = false;\n  } else {\n    validation.releaseDate = false;\n  }\n  \n  // Validate description\n  if (album.description && album.description.length > 2000) {\n    validation.description = {\n      message: 'Description is too long (max 2000 characters)'\n    };\n    isValid = false;\n  } else {\n    validation.description = false;\n  }\n  \n  return isValid;\n};\n\nconst submitForm = async () => {\n  if (!validateForm()) {\n    return;\n  }\n  \n  try {\n    // Prepare data for submission\n    const formData = {\n      ...album,\n      artists: album.artists.map(artist => artist._id || artist),\n      genres: album.genres.map(genre => genre._id || genre)\n    };\n    \n    // Add ownership data if creating new album\n    if (!props.editMode) {\n      formData.owner = {\n        type: 'user',\n        target: auth.state.user._id\n      };\n    }\n    \n    let result;\n    if (props.editMode) {\n      result = await albumsStore.actions.updateAlbum(formData);\n    } else {\n      result = await albumsStore.actions.createAlbum(formData);\n    }\n    \n    // Navigate to album detail page\n    setTimeout(() => {\n      router.push({\n        name: 'album',\n        params: { url: result.url }\n      });\n    }, 1000);\n    \n  } catch (error) {\n    console.error('Error saving album:', error);\n    globals.actions.setError({\n      message: 'Failed to save album'\n    });\n  }\n};\n\nconst handleUploadError = (error) => {\n  console.error('Upload error:', error);\n  globals.actions.setError({\n    message: 'Error uploading image'\n  });\n};\n\n// Lifecycle hooks\nonMounted(async () => {\n  if (props.editMode) {\n    await fetchAlbum();\n    // Mark URL as manually set in edit mode to prevent auto-generation\n    urlManuallySet.value = true;\n  }\n});\n</script>"],"names":["albumsStore.actions","globals.actions","auth.state"],"mappings":"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"}
+{"version":3,"file":"AlbumForm.vue.js","sources":["../../../../../../../src/modules/music/components/forms/AlbumForm.vue"],"sourcesContent":["<template>\n  <div class=\"pd-medium\">\n    <h2 class=\"h2 mn-b-medium\">{{ editMode ? 'Edit Album' : 'Create Album' }}</h2>\n    \n    <form @submit.prevent=\"submitForm\" class=\"cols-1 gap-regular\">\n      <!-- Basic Info Section -->\n      <div class=\"bg-light pd-medium radius-medium\">\n        <h3 class=\"h3 mn-b-medium\">Basic Information</h3>\n        \n        <!-- Album Cover -->\n        <div class=\"mn-b-medium\">\n          <p class=\"p-medium mn-b-small\">Album Cover</p>\n          <UploadImage\n            v-model:photo=\"album.coverArt\"\n            uploadPath=\"albums/covers\"\n            class=\"w-100 h-15r radius-small o-hidden mn-b-small\"\n            @error=\"handleUploadError\"\n          />\n        </div>\n        \n        <!-- Title -->\n        <Field\n          v-model:field=\"album.title\"\n          label=\"Title\"\n          placeholder=\"Enter album title\"\n          class=\"bg-white radius-small pd-small mn-b-thin\"\n          :validation=\"validation.title\"\n        />\n        \n        <!-- URL -->\n        <Field\n          v-model:field=\"album.url\"\n          label=\"URL\"\n          placeholder=\"Leave blank for auto-generation based on the album title\"\n          class=\"bg-white radius-small pd-small mn-b-small\"\n        />\n        \n        <!-- Description -->\n        <Field\n          v-model:field=\"album.description\"\n          label=\"Description\"\n          type=\"textarea\"\n          placeholder=\"Enter album description\"\n          class=\"bg-white radius-small pd-small mn-b-thin\"\n          :validation=\"validation.description\"\n        />\n        \n        <!-- Release Date -->\n        <Field\n          v-model:field=\"album.releaseDate\"\n          label=\"Release Date\"\n          type=\"date\"\n          class=\"bg-white radius-small pd-small mn-b-thin\"\n          :validation=\"validation.releaseDate\"\n        />\n        \n        <!-- Album Type -->\n        <Select\n          v-model:select=\"album.type\"\n          :options=\"albumTypeOptions\"\n          label=\"Album Type\"\n          class=\"bg-white radius-small pd-small mn-b-thin\"\n        />\n      </div>\n      \n      <!-- Artists Section -->\n      <Block title=\"Artists\">\n        <BlockMultiselect\n          v-model=\"album.artists\"\n          placeholder=\"Search artists...\"\n          :multiple=\"true\"\n          :transform=\"(item) => ({ _id: item._id, name: item.name })\"\n          :store=\"{\n            read: (options) => artistsStore.actions.fetchArtists(options),\n            state: artistsStore.state\n          }\"\n          :options=\"{\n            rootOnly: false,\n            excludeChildren: false,\n            limit: 50\n          }\"\n          :skeleton=\"{\n            hide: false,\n            horizontal: true,\n            class: 'radius-small',\n            structure: [{ \n              block: 'text', size: 'large'\n            }]\n          }\"\n          :states=\"{\n            empty: {\n              title: 'No artists found',\n              description: 'Try different search terms or create a new artist',\n              class: 'radius-small'\n            }\n          }\"\n          key=\"_id\"\n          :label=\"item => item.name\"\n          classSearch=\"bg-white radius-small\"\n          classSelected=\"bg-white pd-small radius-small\"\n          classDropdown=\"bg-white pd-small radius-medium bs-small\"\n          classItem=\"pd-small radius-small hover-bg-light cursor-pointer\"\n          classFeed=\"h-max-30r gap-thin flex-column flex o-scroll\"\n        >\n          <!-- Слот для выбранных артистов -->\n          <template #selected=\"{ item, clear }\">\n            <div class=\"flex-nowrap flex-v-center flex gap-thin\">\n              <span class=\"t-medium\">{{ item?.name || item }}</span>\n              <button \n                @click.stop=\"clear\"\n                class=\"i-small pd-micro bg-red radius-extra flex-center flex aspect-1x1 hover-scale-1\"\n              >\n                <IconCross class=\"i-micro fill-white\" />\n              </button>\n            </div>\n          </template>\n          \n          <!-- Слот для элементов в списке -->\n          <template #item=\"{ item }\">\n            <div class=\"flex-nowrap flex-v-center flex\">\n              <div class=\"w-100\">\n                <p class=\"t-medium\">{{ item.name }}</p>\n                <p v-if=\"item.bio\" class=\"t-small t-transp\">{{ item.bio }}</p>\n              </div>\n            </div>\n          </template>\n        </BlockMultiselect>\n      </Block>\n      \n      <!-- Genres Section -->\n      <Block title=\"Genres\">\n        <BlockMultiselect\n          v-model=\"album.genres\"\n          placeholder=\"Search genres...\"\n          :multiple=\"true\"\n          :transform=\"(item) => ({ _id: item._id, name: item.name })\"\n          :store=\"{\n            read: (options) => genresStore.actions.fetchGenres(options),\n            state: genresStore.state\n          }\"\n          :options=\"{\n            rootOnly: false,\n            excludeChildren: false,\n            limit: 50\n          }\"\n          :skeleton=\"{\n            hide: false,\n            horizontal: true,\n            class: 'radius-small',\n            structure: [{ \n              block: 'text', size: 'large'\n            }]\n          }\"\n          :states=\"{\n            empty: {\n              title: 'No genres found',\n              description: 'Try different search terms or create a new genre',\n              class: 'radius-small'\n            }\n          }\"\n          key=\"_id\"\n          :label=\"item => item.name\"\n          classSearch=\"bg-white radius-small\"\n          classSelected=\"bg-white pd-small radius-small\"\n          classDropdown=\"bg-white pd-small radius-medium bs-small\"\n          classItem=\"pd-small radius-small hover-bg-light cursor-pointer\"\n          classFeed=\"h-max-30r gap-thin flex-column flex o-scroll\"\n        >\n          <!-- Слот для выбранных жанров -->\n          <template #selected=\"{ item, clear }\">\n            <div class=\"flex-nowrap flex-v-center flex gap-thin\">\n              <span class=\"t-medium\">{{ item?.name || item }}</span>\n              <button \n                @click.stop=\"clear\"\n                class=\"i-small pd-micro bg-red radius-extra flex-center flex aspect-1x1 hover-scale-1\"\n              >\n                <IconCross class=\"i-micro fill-white\" />\n              </button>\n            </div>\n          </template>\n          \n          <!-- Слот для элементов в списке -->\n          <template #item=\"{ item }\">\n            <div class=\"flex-nowrap flex-v-center flex\">\n              <div class=\"w-100\">\n                <p class=\"t-medium\">{{ item.name }}</p>\n                <p v-if=\"item.description\" class=\"t-small t-transp\">{{ item.description }}</p>\n              </div>\n            </div>\n          </template>\n        </BlockMultiselect>\n      </Block>\n      \n      <!-- Status Section -->\n      <div class=\"bg-light pd-medium radius-medium\">\n        <h3 class=\"h3 mn-b-medium\">Publishing Status</h3>\n        \n        <Select\n          v-model:select=\"album.status\"\n          :options=\"statusOptions\"\n          label=\"Status\"\n          class=\"bg-white radius-small pd-small mn-b-thin\"\n        />\n      </div>\n      \n      <!-- Submit Button -->\n      <div class=\"flex flex-justify-between\">\n        <Button\n          @click=\"$router.go(-1)\"\n          class=\"bg-grey-nano t-black\"\n          :showSucces=\"false\"\n          :showLoader=\"false\"\n        >\n          Cancel\n        </Button>\n        \n        <Button\n          :submit=\"submitForm\"\n          class=\"bg-main t-black\"\n          :text=\"{\n            success: editMode ? 'Updated!' : 'Created!'\n          }\"\n        >\n          {{ editMode ? 'Update Album' : 'Create Album' }}\n        </Button>\n      </div>\n    </form>\n  </div>\n</template>\n\n<script setup>\nimport { ref, reactive, onMounted, watch } from 'vue';\nimport { useRouter, useRoute } from 'vue-router';\n\n// Import Martyrs components\nimport Field from '@martyrs/src/components/Field/Field.vue';\nimport Block from '@martyrs/src/components/Block/Block.vue';\nimport Button from '@martyrs/src/components/Button/Button.vue';\nimport Select from '@martyrs/src/components/Select/Select.vue';\nimport UploadImage from '@martyrs/src/components/UploadImage/UploadImage.vue';\nimport IconCross from '@martyrs/src/modules/icons/navigation/IconCross.vue';\n\nimport BlockMultiselect from '@martyrs/src/modules/globals/views/components/blocks/BlockMultiselect.vue';\n\n// Import stores\nimport * as albumsStore from '../../store/albums';\nimport * as artistsStore from '../../store/artists';\nimport * as genresStore from '../../store/genres';\nimport * as globals from '@martyrs/src/modules/globals/views/store/globals.js';\nimport * as auth from '@martyrs/src/modules/auth/views/store/auth.js';\n\n// Props\nconst props = defineProps({\n  editMode: {\n    type: Boolean,\n    default: false\n  },\n  url: {\n    type: String,\n    default: ''\n  }\n});\n\n// Router and route\nconst router = useRouter();\nconst route = useRoute();\n\n// State\nconst album = reactive({\n  title: '',\n  description: '',\n  releaseDate: new Date().toISOString().split('T')[0],\n  coverArt: '',\n  artists: [],\n  type: 'album',\n  genres: [],\n  totalTracks: 0,\n  url: '',\n  status: 'draft'\n});\n\nconst validation = reactive({\n  title: false,\n  description: false,\n  releaseDate: false\n});\n\n// Track if URL was manually entered\nconst urlManuallySet = ref(false);\n\n// Function to generate URL-friendly slug from text\nconst generateSlug = (text) => {\n  if (!text) return '';\n  return text\n    .toLowerCase()\n    .replace(/[^a-z0-9\\s-]/g, '') // Remove special characters\n    .replace(/\\s+/g, '-') // Replace spaces with hyphens\n    .replace(/-+/g, '-') // Replace multiple hyphens with single\n    .trim('-'); // Remove leading/trailing hyphens\n};\n\n// Watch for changes in album title to auto-generate URL\nwatch(() => album.title, (newTitle) => {\n  // Only auto-generate if URL hasn't been manually set and we're not in edit mode\n  if (!urlManuallySet.value && !props.editMode) {\n    album.url = generateSlug(newTitle);\n  }\n});\n\n// Watch for manual changes to URL field\nwatch(() => album.url, (newUrl, oldUrl) => {\n  // If user manually changes URL, mark as manually set\n  if (newUrl !== generateSlug(album.title)) {\n    urlManuallySet.value = true;\n  }\n});\n\n// Options\nconst statusOptions = [\n  'draft',\n  'published',\n  'archived'\n];\n\nconst albumTypeOptions = [\n  'album',\n  'single',\n  'EP',\n  'compilation'\n];\n\nconst fetchAlbum = async () => {\n  if (!props.url) return;\n  \n  try {\n    const fetchedAlbum = await albumsStore.actions.fetchAlbumByUrl(props.url);\n    \n    if (!fetchedAlbum) {\n      globals.actions.setError({\n        message: 'Album not found'\n      });\n      return;\n    }\n    \n    // Update local album data\n    Object.assign(album, {\n      title: fetchedAlbum.title || '',\n      description: fetchedAlbum.description || '',\n      releaseDate: fetchedAlbum.releaseDate ? new Date(fetchedAlbum.releaseDate).toISOString().split('T')[0] : '',\n      coverArt: fetchedAlbum.coverArt || '',\n      artists: fetchedAlbum.artists || [],\n      type: fetchedAlbum.type || 'album',\n      genres: fetchedAlbum.genres || [],\n      totalTracks: fetchedAlbum.totalTracks || 0,\n      url: fetchedAlbum.url || '',\n      status: fetchedAlbum.status || 'draft',\n      _id: fetchedAlbum._id\n    });\n    \n  } catch (error) {\n    console.error('Error fetching album:', error);\n    globals.actions.setError({\n      message: 'Failed to load album details'\n    });\n  }\n};\n\nconst validateForm = () => {\n  let isValid = true;\n  \n  // Validate title\n  if (!album.title.trim()) {\n    validation.title = {\n      message: 'Album title is required'\n    };\n    isValid = false;\n  } else {\n    validation.title = false;\n  }\n  \n  // Validate release date\n  if (!album.releaseDate) {\n    validation.releaseDate = {\n      message: 'Release date is required'\n    };\n    isValid = false;\n  } else {\n    validation.releaseDate = false;\n  }\n  \n  // Validate description\n  if (album.description && album.description.length > 2000) {\n    validation.description = {\n      message: 'Description is too long (max 2000 characters)'\n    };\n    isValid = false;\n  } else {\n    validation.description = false;\n  }\n  \n  return isValid;\n};\n\nconst submitForm = async () => {\n  if (!validateForm()) {\n    return;\n  }\n  \n  try {\n    // Prepare data for submission\n    const formData = {\n      ...album,\n      artists: album.artists.map(artist => artist._id || artist),\n      genres: album.genres.map(genre => genre._id || genre)\n    };\n    \n    // Add ownership data if creating new album\n    if (!props.editMode) {\n      formData.owner = {\n        type: 'user',\n        target: auth.state.user._id\n      };\n    }\n    \n    let result;\n    if (props.editMode) {\n      result = await albumsStore.actions.updateAlbum(formData);\n    } else {\n      result = await albumsStore.actions.createAlbum(formData);\n    }\n    \n    // Navigate to album detail page\n    setTimeout(() => {\n      router.push({\n        name: 'album',\n        params: { url: result.url }\n      });\n    }, 1000);\n    \n  } catch (error) {\n    console.error('Error saving album:', error);\n    globals.actions.setError({\n      message: 'Failed to save album'\n    });\n  }\n};\n\nconst handleUploadError = (error) => {\n  console.error('Upload error:', error);\n  globals.actions.setError({\n    message: 'Error uploading image'\n  });\n};\n\n// Lifecycle hooks\nonMounted(async () => {\n  if (props.editMode) {\n    await fetchAlbum();\n    // Mark URL as manually set in edit mode to prevent auto-generation\n    urlManuallySet.value = true;\n  }\n});\n</script>"],"names":["albumsStore.actions","globals.actions","auth.state"],"mappings":"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"}

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

@@ -7,7 +7,7 @@ const Block = require("../../../../components/Block/Block.vue.cjs");
 const Button = require("../../../../components/Button/Button.vue.cjs");
 const Checkbox = require("../../../../components/Checkbox/Checkbox.vue.cjs");
 const Select = require("../../../../components/Select/Select.vue.cjs");
-const UploadImage = require("../../../../components/UploadImage/UploadImage.vue.cjs");
+const UploadImage = require("../../../../components/UploadImage/UploadImage.vue2.cjs");
 ;/* empty css                                         */
 const BlockMultiselect = require("../../../globals/views/components/blocks/BlockMultiselect.vue.cjs");
 const IconCross = require("../../../icons/navigation/IconCross.vue.cjs");
@@ -18,7 +18,7 @@ const auth = require("../../../auth/views/store/auth.cjs");
 const _hoisted_1 = { class: "pd-medium" };
 const _hoisted_2 = { class: "h2 mn-b-medium" };
 const _hoisted_3 = { class: "bg-light pd-medium radius-medium" };
-const _hoisted_4 = { class: "cols-2 mobile:cols-1 gap-medium" };
+const _hoisted_4 = { class: "cols-2 mobile:cols-1 gap-regular" };
 const _hoisted_5 = { class: "bg-light pd-medium radius-medium" };
 const _hoisted_6 = { class: "cols-2 mobile:cols-1 gap-thin" };
 const _hoisted_7 = { class: "flex-nowrap flex-v-center flex gap-thin" };
@@ -202,13 +202,13 @@ const _sfc_main = {
         vue.createElementVNode("h2", _hoisted_2, vue.toDisplayString(__props.editMode ? "Edit Artist" : "Create Artist"), 1),
         vue.createElementVNode("form", {
           onSubmit: vue.withModifiers(submitForm, ["prevent"]),
-          class: "cols-1 gap-medium"
+          class: "cols-1 gap-regular"
         }, [
           vue.createElementVNode("div", _hoisted_3, [
             _cache[17] || (_cache[17] = vue.createElementVNode("h3", { class: "h3 mn-b-medium" }, "Basic Information", -1)),
             vue.createElementVNode("div", _hoisted_4, [
               vue.createElementVNode("div", null, [
-                _cache[15] || (_cache[15] = vue.createElementVNode("p", { class: "p-semi mn-b-small" }, "Artist Photo", -1)),
+                _cache[15] || (_cache[15] = vue.createElementVNode("p", { class: "p-medium mn-b-small" }, "Artist Photo", -1)),
                 vue.createVNode(UploadImage.default, {
                   photo: artist.photoUrl,
                   "onUpdate:photo": _cache[0] || (_cache[0] = ($event) => artist.photoUrl = $event),
@@ -218,7 +218,7 @@ const _sfc_main = {
                 }, null, 8, ["photo"])
               ]),
               vue.createElementVNode("div", null, [
-                _cache[16] || (_cache[16] = vue.createElementVNode("p", { class: "p-semi mn-b-small" }, "Cover Image", -1)),
+                _cache[16] || (_cache[16] = vue.createElementVNode("p", { class: "p-medium mn-b-small" }, "Cover Image", -1)),
                 vue.createVNode(UploadImage.default, {
                   photo: artist.coverUrl,
                   "onUpdate:photo": _cache[1] || (_cache[1] = ($event) => artist.coverUrl = $event),

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

@@ -1 +1 @@
-{"version":3,"file":"ArtistForm.vue.cjs","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-medium\">\n      <!-- Basic Info Section -->\n      <div class=\"bg-light pd-medium radius-medium\">\n        <h3 class=\"h3 mn-b-medium\">Basic Information</h3>\n        \n        <div class=\"cols-2 mobile:cols-1 gap-medium\">\n          <!-- Artist Photo -->\n          <div>\n            <p class=\"p-semi 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-semi 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/globals/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 * as globals from '@martyrs/src/modules/globals/views/store/globals.js';\nimport * as auth from '@martyrs/src/modules/auth/views/store/auth.js';\n\n// 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      globals.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    globals.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    globals.actions.setError({\n      message: 'Failed to save artist'\n    });\n  }\n};\n\nconst handleUploadError = (error) => {\n  console.error('Upload error:', error);\n  globals.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>"],"names":["useRouter","useRoute","reactive","ref","watch","artistsStore.actions","globals.actions","auth.state","onMounted"],"mappings":"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"}
+{"version":3,"file":"ArtistForm.vue.cjs","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/globals/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 * as globals from '@martyrs/src/modules/globals/views/store/globals.js';\nimport * as auth from '@martyrs/src/modules/auth/views/store/auth.js';\n\n// 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      globals.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    globals.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    globals.actions.setError({\n      message: 'Failed to save artist'\n    });\n  }\n};\n\nconst handleUploadError = (error) => {\n  console.error('Upload error:', error);\n  globals.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>"],"names":["useRouter","useRoute","reactive","ref","watch","artistsStore.actions","globals.actions","auth.state","onMounted"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAwPA,UAAM,QAAQ;AAYd,UAAM,SAASA,UAAAA,UAAS;AACVC,cAAAA,SAAQ;AAGtB,UAAM,SAASC,IAAAA,SAAS;AAAA,MACtB,MAAM;AAAA,MACN,KAAK;AAAA,MACL,UAAU;AAAA,MACV,UAAU;AAAA,MACV,SAAS;AAAA,MACT,UAAU;AAAA,MACV,YAAY;AAAA,MACZ,QAAQ;AAAA,MACR,SAAS;AAAA,QACP,UAAU;AAAA,QACV,SAAS;AAAA,QACT,UAAU;AAAA,QACV,WAAW;AAAA,MACf;AAAA,MACE,KAAK;AAAA,MACL,QAAQ,CAAA;AAAA,IACV,CAAC;AAED,UAAM,aAAaA,IAAAA,SAAS;AAAA,MAC1B,MAAM;AAAA,MACN,KAAK;AAAA,IACP,CAAC;AAGD,UAAM,iBAAiBC,IAAAA,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;AAGAC,QAAAA,MAAM,MAAM,OAAO,MAAM,CAAC,YAAY;AAEpC,UAAI,CAAC,eAAe,SAAS,CAAC,MAAM,UAAU;AAC5C,eAAO,MAAM,aAAa,OAAO;AAAA,MACnC;AAAA,IACF,CAAC;AAGDA,QAAAA,MAAM,MAAM,OAAO,KAAK,CAAC,QAAQ,WAAW;AAE1C,UAAI,WAAW,aAAa,OAAO,IAAI,GAAG;AACxC,uBAAe,QAAQ;AAAA,MACzB;AAAA,IACF,CAAC;AAGD,UAAM,gBAAgB;AAAA,MACpB;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAGA,UAAM,cAAc,YAAY;AAC9B,UAAI,CAAC,MAAM,IAAK;AAEhB,UAAI;AACF,cAAM,gBAAgB,MAAMC,QAAAA,QAAqB,iBAAiB,MAAM,GAAG;AAE3E,YAAI,CAAC,eAAe;AAClBC,kBAAAA,QAAgB,SAAS;AAAA,YACvB,SAAS;AAAA,UACjB,CAAO;AACD;AAAA,QACF;AAGA,eAAO,OAAO,QAAQ;AAAA,UACpB,MAAM,cAAc,QAAQ;AAAA,UAC5B,KAAK,cAAc,OAAO;AAAA,UAC1B,UAAU,cAAc,YAAY;AAAA,UACpC,UAAU,cAAc,YAAY;AAAA,UACpC,SAAS,cAAc,WAAW;AAAA,UAClC,UAAU,cAAc,YAAY;AAAA,UACpC,YAAY,cAAc,cAAc;AAAA,UACxC,QAAQ,cAAc,UAAU;AAAA,UAChC,KAAK,cAAc,OAAO;AAAA,UAC1B,QAAQ,cAAc,UAAU,CAAA;AAAA,UAChC,KAAK,cAAc;AAAA,UACnB,SAAS;AAAA,YACP,UAAU,cAAc,SAAS,YAAY;AAAA,YAC7C,SAAS,cAAc,SAAS,WAAW;AAAA,YAC3C,UAAU,cAAc,SAAS,YAAY;AAAA,YAC7C,WAAW,cAAc,SAAS,aAAa;AAAA,UACvD;AAAA,QACA,CAAK;AAAA,MAEH,SAAS,OAAO;AACd,gBAAQ,MAAM,0BAA0B,KAAK;AAC7CA,gBAAAA,QAAgB,SAAS;AAAA,UACvB,SAAS;AAAA,QACf,CAAK;AAAA,MACH;AAAA,IACF;AAEA,UAAM,eAAe,MAAM;AACzB,UAAI,UAAU;AAGd,UAAI,CAAC,OAAO,KAAK,QAAQ;AACvB,mBAAW,OAAO;AAAA,UAChB,SAAS;AAAA,QACf;AACI,kBAAU;AAAA,MACZ,OAAO;AACL,mBAAW,OAAO;AAAA,MACpB;AAGA,UAAI,OAAO,OAAO,OAAO,IAAI,SAAS,KAAM;AAC1C,mBAAW,MAAM;AAAA,UACf,SAAS;AAAA,QACf;AACI,kBAAU;AAAA,MACZ,OAAO;AACL,mBAAW,MAAM;AAAA,MACnB;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,OAAO,OAAO,IAAI,WAAS,MAAM,OAAO,KAAK;AAAA,QAC3D;AAGI,YAAI,CAAC,MAAM,UAAU;AACnB,mBAAS,QAAQ;AAAA,YACf,MAAM;AAAA,YACN,QAAQC,KAAAA,MAAW,KAAK;AAAA,UAChC;AACM,mBAAS,UAAU;AAAA,YACjB,MAAM;AAAA,YACN,QAAQA,KAAAA,MAAW,KAAK;AAAA,UAChC;AAAA,QACI;AAEA,YAAI;AACJ,YAAI,MAAM,UAAU;AAClB,mBAAS,MAAMF,QAAAA,QAAqB,aAAa,QAAQ;AAAA,QAC3D,OAAO;AACL,mBAAS,MAAMA,QAAAA,QAAqB,aAAa,QAAQ;AAAA,QAC3D;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,wBAAwB,KAAK;AAC3CC,gBAAAA,QAAgB,SAAS;AAAA,UACvB,SAAS;AAAA,QACf,CAAK;AAAA,MACH;AAAA,IACF;AAEA,UAAM,oBAAoB,CAAC,UAAU;AACnC,cAAQ,MAAM,iBAAiB,KAAK;AACpCA,cAAAA,QAAgB,SAAS;AAAA,QACvB,SAAS;AAAA,MACb,CAAG;AAAA,IACH;AAGAE,QAAAA,UAAU,YAAY;AACpB,UAAI,MAAM,UAAU;AAClB,cAAM,YAAW;AAEjB,uBAAe,QAAQ;AAAA,MACzB;AAAA,IACF,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

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

@@ -5,7 +5,7 @@ import _sfc_main$1 from "../../../../components/Block/Block.vue.js";
 import _sfc_main$4 from "../../../../components/Button/Button.vue.js";
 import _sfc_main$3 from "../../../../components/Checkbox/Checkbox.vue.js";
 import Select from "../../../../components/Select/Select.vue.js";
-import UploadImage from "../../../../components/UploadImage/UploadImage.vue.js";
+import UploadImage from "../../../../components/UploadImage/UploadImage.vue2.js";
 /* empty css                                       */
 import BlockMultiselect from "../../../globals/views/components/blocks/BlockMultiselect.vue.js";
 import _sfc_main$2 from "../../../icons/navigation/IconCross.vue.js";
@@ -16,7 +16,7 @@ import { state as state$1 } 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 mobile:cols-1 gap-medium" };
+const _hoisted_4 = { class: "cols-2 mobile:cols-1 gap-regular" };
 const _hoisted_5 = { class: "bg-light pd-medium radius-medium" };
 const _hoisted_6 = { class: "cols-2 mobile:cols-1 gap-thin" };
 const _hoisted_7 = { class: "flex-nowrap flex-v-center flex gap-thin" };
@@ -200,13 +200,13 @@ const _sfc_main = {
         createElementVNode("h2", _hoisted_2, toDisplayString(__props.editMode ? "Edit Artist" : "Create Artist"), 1),
         createElementVNode("form", {
           onSubmit: withModifiers(submitForm, ["prevent"]),
-          class: "cols-1 gap-medium"
+          class: "cols-1 gap-regular"
         }, [
           createElementVNode("div", _hoisted_3, [
             _cache[17] || (_cache[17] = createElementVNode("h3", { class: "h3 mn-b-medium" }, "Basic Information", -1)),
             createElementVNode("div", _hoisted_4, [
               createElementVNode("div", null, [
-                _cache[15] || (_cache[15] = createElementVNode("p", { class: "p-semi mn-b-small" }, "Artist Photo", -1)),
+                _cache[15] || (_cache[15] = createElementVNode("p", { class: "p-medium mn-b-small" }, "Artist Photo", -1)),
                 createVNode(UploadImage, {
                   photo: artist.photoUrl,
                   "onUpdate:photo": _cache[0] || (_cache[0] = ($event) => artist.photoUrl = $event),
@@ -216,7 +216,7 @@ const _sfc_main = {
                 }, null, 8, ["photo"])
               ]),
               createElementVNode("div", null, [
-                _cache[16] || (_cache[16] = createElementVNode("p", { class: "p-semi mn-b-small" }, "Cover Image", -1)),
+                _cache[16] || (_cache[16] = createElementVNode("p", { class: "p-medium mn-b-small" }, "Cover Image", -1)),
                 createVNode(UploadImage, {
                   photo: artist.coverUrl,
                   "onUpdate:photo": _cache[1] || (_cache[1] = ($event) => artist.coverUrl = $event),

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

@@ -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-medium\">\n      <!-- Basic Info Section -->\n      <div class=\"bg-light pd-medium radius-medium\">\n        <h3 class=\"h3 mn-b-medium\">Basic Information</h3>\n        \n        <div class=\"cols-2 mobile:cols-1 gap-medium\">\n          <!-- Artist Photo -->\n          <div>\n            <p class=\"p-semi 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-semi 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/globals/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 * as globals from '@martyrs/src/modules/globals/views/store/globals.js';\nimport * as auth from '@martyrs/src/modules/auth/views/store/auth.js';\n\n// 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      globals.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    globals.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    globals.actions.setError({\n      message: 'Failed to save artist'\n    });\n  }\n};\n\nconst handleUploadError = (error) => {\n  console.error('Upload error:', error);\n  globals.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>"],"names":["artistsStore.actions","globals.actions","auth.state"],"mappings":"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"}
+{"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/globals/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 * as globals from '@martyrs/src/modules/globals/views/store/globals.js';\nimport * as auth from '@martyrs/src/modules/auth/views/store/auth.js';\n\n// 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      globals.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    globals.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    globals.actions.setError({\n      message: 'Failed to save artist'\n    });\n  }\n};\n\nconst handleUploadError = (error) => {\n  console.error('Upload error:', error);\n  globals.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>"],"names":["artistsStore.actions","globals.actions","auth.state"],"mappings":"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"}

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

@@ -6,7 +6,7 @@ const Field = require("../../../../components/Field/Field.vue2.cjs");
 const Block = require("../../../../components/Block/Block.vue.cjs");
 const Button = require("../../../../components/Button/Button.vue.cjs");
 const Radio = require("../../../../components/Radio/Radio.vue.cjs");
-const UploadImage = require("../../../../components/UploadImage/UploadImage.vue.cjs");
+const UploadImage = require("../../../../components/UploadImage/UploadImage.vue2.cjs");
 const IconCross = require("../../../icons/navigation/IconCross.vue.cjs");
 const BlockMultiselect = require("../../../globals/views/components/blocks/BlockMultiselect.vue.cjs");
 const playlists = require("../../store/playlists.cjs");
@@ -44,9 +44,9 @@ const _hoisted_20 = {
 };
 const _hoisted_21 = { class: "bg-light pd-medium radius-medium" };
 const _hoisted_22 = { class: "mn-b-medium" };
-const _hoisted_23 = { class: "flex gap-medium" };
+const _hoisted_23 = { class: "flex gap-regular" };
 const _hoisted_24 = { class: "mn-b-medium" };
-const _hoisted_25 = { class: "flex gap-medium" };
+const _hoisted_25 = { class: "flex gap-regular" };
 const _hoisted_26 = { class: "flex flex-justify-between" };
 const _sfc_main = {
   __name: "PlaylistForm",
@@ -217,12 +217,12 @@ const _sfc_main = {
         vue.createElementVNode("h2", _hoisted_2, vue.toDisplayString(__props.editMode ? "Edit Playlist" : "Create Playlist"), 1),
         vue.createElementVNode("form", {
           onSubmit: vue.withModifiers(submitForm, ["prevent"]),
-          class: "cols-1 gap-medium"
+          class: "cols-1 gap-regular"
         }, [
           vue.createElementVNode("div", _hoisted_3, [
             _cache[11] || (_cache[11] = vue.createElementVNode("h3", { class: "h3 mn-b-medium" }, "Basic Information", -1)),
             vue.createElementVNode("div", _hoisted_4, [
-              _cache[10] || (_cache[10] = vue.createElementVNode("p", { class: "p-semi mn-b-small" }, "Playlist Cover", -1)),
+              _cache[10] || (_cache[10] = vue.createElementVNode("p", { class: "p-medium mn-b-small" }, "Playlist Cover", -1)),
               vue.createVNode(UploadImage.default, {
                 photo: playlist.coverUrl,
                 "onUpdate:photo": _cache[0] || (_cache[0] = ($event) => playlist.coverUrl = $event),
@@ -358,7 +358,7 @@ const _sfc_main = {
           vue.createElementVNode("div", _hoisted_21, [
             _cache[14] || (_cache[14] = vue.createElementVNode("h3", { class: "h3 mn-b-medium" }, "Privacy & Settings", -1)),
             vue.createElementVNode("div", _hoisted_22, [
-              _cache[12] || (_cache[12] = vue.createElementVNode("p", { class: "p-semi mn-b-small" }, "Privacy", -1)),
+              _cache[12] || (_cache[12] = vue.createElementVNode("p", { class: "p-medium mn-b-small" }, "Privacy", -1)),
               vue.createElementVNode("div", _hoisted_23, [
                 vue.createVNode(Radio.default, {
                   radio: playlist.isPublic,
@@ -379,7 +379,7 @@ const _sfc_main = {
               ])
             ]),
             vue.createElementVNode("div", _hoisted_24, [
-              _cache[13] || (_cache[13] = vue.createElementVNode("p", { class: "p-semi mn-b-small" }, "Collaborative Playlist", -1)),
+              _cache[13] || (_cache[13] = vue.createElementVNode("p", { class: "p-medium mn-b-small" }, "Collaborative Playlist", -1)),
               vue.createElementVNode("div", _hoisted_25, [
                 vue.createVNode(Radio.default, {
                   radio: playlist.isCollaborative,

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

@@ -1 +1 @@
-{"version":3,"file":"PlaylistForm.vue.cjs","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-medium\">\n      <!-- Basic Info Section -->\n      <div class=\"bg-light pd-medium radius-medium\">\n        <h3 class=\"h3 mn-b-medium\">Basic Information</h3>\n        \n        <!-- Playlist Cover -->\n        <div class=\"mn-b-medium\">\n          <p class=\"p-semi 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-semi mn-b-small\">Privacy</p>\n          <div class=\"flex gap-medium\">\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-semi mn-b-small\">Collaborative Playlist</p>\n          <div class=\"flex gap-medium\">\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/globals/views/components/blocks/BlockMultiselect.vue';\n\n// Import stores\nimport * as playlistsStore from '../../store/playlists';\nimport * as tracksStore from '../../store/tracks';\nimport * as globals from '@martyrs/src/modules/globals/views/store/globals.js';\nimport * as auth from '@martyrs/src/modules/auth/views/store/auth.js';\n\n// 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      globals.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    globals.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    globals.actions.setError({\n      message: 'Failed to save playlist'\n    });\n  }\n};\n\nconst handleUploadError = (error) => {\n  console.error('Upload error:', error);\n  globals.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>"],"names":["useRouter","useRoute","reactive","ref","watch","computed","tracks","playlistsStore.actions","globals.actions","auth.state","onMounted"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA6PA,UAAM,QAAQ;AAYd,UAAM,SAASA,UAAAA,UAAS;AACVC,cAAAA,SAAQ;AAGtB,UAAM,WAAWC,IAAAA,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,aAAaA,IAAAA,SAAS;AAAA,MAC1B,OAAO;AAAA,MACP,aAAa;AAAA,IACf,CAAC;AAGD,UAAM,iBAAiBC,IAAAA,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;AAGAC,QAAAA,MAAM,MAAM,SAAS,OAAO,CAAC,aAAa;AAExC,UAAI,CAAC,eAAe,SAAS,CAAC,MAAM,UAAU;AAC5C,iBAAS,MAAM,aAAa,QAAQ;AAAA,MACtC;AAAA,IACF,CAAC;AAGDA,QAAAA,MAAM,MAAM,SAAS,KAAK,CAAC,QAAQ,WAAW;AAE5C,UAAI,WAAW,aAAa,SAAS,KAAK,GAAG;AAC3C,uBAAe,QAAQ;AAAA,MACzB;AAAA,IACF,CAAC;AAGD,UAAM,gBAAgBC,IAAAA,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,YAAMC,UAAS,CAAC,GAAG,SAAS,MAAM;AAClC,OAACA,QAAO,KAAK,GAAGA,QAAO,QAAQ,CAAC,IAAI,CAACA,QAAO,QAAQ,GAAGA,QAAO,KAAK,CAAC;AACpE,eAAS,SAASA;AAAA,IACpB;AAEA,UAAM,gBAAgB,YAAY;AAChC,UAAI,CAAC,MAAM,IAAK;AAEhB,UAAI;AACF,cAAM,kBAAkB,MAAMC,UAAAA,QAAuB,mBAAmB,MAAM,GAAG;AAEjF,YAAI,CAAC,iBAAiB;AACpBC,kBAAAA,QAAgB,SAAS;AAAA,YACvB,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/CA,gBAAAA,QAAgB,SAAS;AAAA,UACvB,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,KAAAA,MAAW,KAAK;AAAA,UAChC;AACM,mBAAS,QAAQ;AAAA,YACf,MAAM;AAAA,YACN,QAAQA,KAAAA,MAAW,KAAK;AAAA,UAChC;AAAA,QACI;AAEA,YAAI;AACJ,YAAI,MAAM,UAAU;AAClB,mBAAS,MAAMF,UAAAA,QAAuB,eAAe,QAAQ;AAAA,QAC/D,OAAO;AACL,mBAAS,MAAMA,UAAAA,QAAuB,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;AAC7CC,gBAAAA,QAAgB,SAAS;AAAA,UACvB,SAAS;AAAA,QACf,CAAK;AAAA,MACH;AAAA,IACF;AAEA,UAAM,oBAAoB,CAAC,UAAU;AACnC,cAAQ,MAAM,iBAAiB,KAAK;AACpCA,cAAAA,QAAgB,SAAS;AAAA,QACvB,SAAS;AAAA,MACb,CAAG;AAAA,IACH;AAGAE,QAAAA,UAAU,YAAY;AACpB,UAAI,MAAM,UAAU;AAClB,cAAM,cAAa;AAEnB,uBAAe,QAAQ;AAAA,MACzB;AAAA,IACF,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"PlaylistForm.vue.cjs","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/globals/views/components/blocks/BlockMultiselect.vue';\n\n// Import stores\nimport * as playlistsStore from '../../store/playlists';\nimport * as tracksStore from '../../store/tracks';\nimport * as globals from '@martyrs/src/modules/globals/views/store/globals.js';\nimport * as auth from '@martyrs/src/modules/auth/views/store/auth.js';\n\n// 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      globals.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    globals.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    globals.actions.setError({\n      message: 'Failed to save playlist'\n    });\n  }\n};\n\nconst handleUploadError = (error) => {\n  console.error('Upload error:', error);\n  globals.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>"],"names":["useRouter","useRoute","reactive","ref","watch","computed","tracks","playlistsStore.actions","globals.actions","auth.state","onMounted"],"mappings":"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"}

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

@@ -4,7 +4,7 @@ import Field from "../../../../components/Field/Field.vue2.js";
 import _sfc_main$1 from "../../../../components/Block/Block.vue.js";
 import _sfc_main$4 from "../../../../components/Button/Button.vue.js";
 import _sfc_main$3 from "../../../../components/Radio/Radio.vue.js";
-import UploadImage from "../../../../components/UploadImage/UploadImage.vue.js";
+import UploadImage from "../../../../components/UploadImage/UploadImage.vue2.js";
 import _sfc_main$2 from "../../../icons/navigation/IconCross.vue.js";
 import BlockMultiselect from "../../../globals/views/components/blocks/BlockMultiselect.vue.js";
 import { actions as actions$1 } from "../../store/playlists.js";
@@ -42,9 +42,9 @@ const _hoisted_20 = {
 };
 const _hoisted_21 = { class: "bg-light pd-medium radius-medium" };
 const _hoisted_22 = { class: "mn-b-medium" };
-const _hoisted_23 = { class: "flex gap-medium" };
+const _hoisted_23 = { class: "flex gap-regular" };
 const _hoisted_24 = { class: "mn-b-medium" };
-const _hoisted_25 = { class: "flex gap-medium" };
+const _hoisted_25 = { class: "flex gap-regular" };
 const _hoisted_26 = { class: "flex flex-justify-between" };
 const _sfc_main = {
   __name: "PlaylistForm",
@@ -215,12 +215,12 @@ const _sfc_main = {
         createElementVNode("h2", _hoisted_2, toDisplayString(__props.editMode ? "Edit Playlist" : "Create Playlist"), 1),
         createElementVNode("form", {
           onSubmit: withModifiers(submitForm, ["prevent"]),
-          class: "cols-1 gap-medium"
+          class: "cols-1 gap-regular"
         }, [
           createElementVNode("div", _hoisted_3, [
             _cache[11] || (_cache[11] = createElementVNode("h3", { class: "h3 mn-b-medium" }, "Basic Information", -1)),
             createElementVNode("div", _hoisted_4, [
-              _cache[10] || (_cache[10] = createElementVNode("p", { class: "p-semi mn-b-small" }, "Playlist Cover", -1)),
+              _cache[10] || (_cache[10] = createElementVNode("p", { class: "p-medium mn-b-small" }, "Playlist Cover", -1)),
               createVNode(UploadImage, {
                 photo: playlist.coverUrl,
                 "onUpdate:photo": _cache[0] || (_cache[0] = ($event) => playlist.coverUrl = $event),
@@ -356,7 +356,7 @@ const _sfc_main = {
           createElementVNode("div", _hoisted_21, [
             _cache[14] || (_cache[14] = createElementVNode("h3", { class: "h3 mn-b-medium" }, "Privacy & Settings", -1)),
             createElementVNode("div", _hoisted_22, [
-              _cache[12] || (_cache[12] = createElementVNode("p", { class: "p-semi mn-b-small" }, "Privacy", -1)),
+              _cache[12] || (_cache[12] = createElementVNode("p", { class: "p-medium mn-b-small" }, "Privacy", -1)),
               createElementVNode("div", _hoisted_23, [
                 createVNode(_sfc_main$3, {
                   radio: playlist.isPublic,
@@ -377,7 +377,7 @@ const _sfc_main = {
               ])
             ]),
             createElementVNode("div", _hoisted_24, [
-              _cache[13] || (_cache[13] = createElementVNode("p", { class: "p-semi mn-b-small" }, "Collaborative Playlist", -1)),
+              _cache[13] || (_cache[13] = createElementVNode("p", { class: "p-medium mn-b-small" }, "Collaborative Playlist", -1)),
               createElementVNode("div", _hoisted_25, [
                 createVNode(_sfc_main$3, {
                   radio: playlist.isCollaborative,