@ozdao/martyrs 0.2.551 → 0.2.553

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

@@ -1,434 +0,0 @@
-"use strict";
-Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
-const vue = require("vue");
-const vueRouter = require("vue-router");
-const Field = require("../../../../components/Field/Field.vue.cjs");
-const Block = require("../../../../components/Block/Block.vue.cjs");
-const Button = require("../../../../components/Button/Button.vue2.cjs");
-const Radio = require("../../../../components/Radio/Radio.vue.cjs");
-const UploadImage = require("../../../../components/UploadImage/UploadImage.vue2.cjs");
-const IconCross = require("../../../icons/navigation/IconCross.vue.cjs");
-const BlockMultiselect = require("../../../core/views/components/blocks/BlockMultiselect.vue.cjs");
-const playlists = require("../../store/playlists.cjs");
-const tracks = require("../../store/tracks.cjs");
-const core_store = require("../../../core/views/store/core.store.cjs");
-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: "mn-b-medium" };
-const _hoisted_5 = { class: "flex-nowrap flex-v-center flex gap-thin" };
-const _hoisted_6 = ["onClick", "disabled"];
-const _hoisted_7 = ["onClick", "disabled"];
-const _hoisted_8 = { class: "flex-1" };
-const _hoisted_9 = { class: "t-medium" };
-const _hoisted_10 = { class: "t-small t-transp" };
-const _hoisted_11 = { key: 0 };
-const _hoisted_12 = {
-  key: 2,
-  class: "t-small t-transp"
-};
-const _hoisted_13 = ["onClick"];
-const _hoisted_14 = { class: "flex-nowrap flex-v-center flex" };
-const _hoisted_15 = { class: "w-100" };
-const _hoisted_16 = { class: "t-medium" };
-const _hoisted_17 = { class: "t-small t-transp" };
-const _hoisted_18 = { key: 0 };
-const _hoisted_19 = {
-  key: 0,
-  class: "t-small t-transp mn-l-small"
-};
-const _hoisted_20 = {
-  key: 0,
-  class: "t-small t-transp mn-t-small"
-};
-const _hoisted_21 = { class: "bg-light pd-medium radius-medium" };
-const _hoisted_22 = { class: "mn-b-medium" };
-const _hoisted_23 = { class: "flex gap-regular" };
-const _hoisted_24 = { class: "mn-b-medium" };
-const _hoisted_25 = { class: "flex gap-regular" };
-const _hoisted_26 = { class: "flex flex-justify-between" };
-const _sfc_main = {
-  __name: "PlaylistForm",
-  props: {
-    editMode: {
-      type: Boolean,
-      default: false
-    },
-    url: {
-      type: String,
-      default: ""
-    }
-  },
-  setup(__props) {
-    const props = __props;
-    const router = vueRouter.useRouter();
-    vueRouter.useRoute();
-    const playlist = vue.reactive({
-      title: "",
-      description: "",
-      coverUrl: "",
-      tracks: [],
-      url: "",
-      isPublic: true,
-      isCollaborative: false
-    });
-    const validation = vue.reactive({
-      title: false,
-      description: false
-    });
-    const urlManuallySet = vue.ref(false);
-    const generateSlug = (text) => {
-      if (!text) return "";
-      return text.toLowerCase().replace(/[^a-z0-9\s-]/g, "").replace(/\s+/g, "-").replace(/-+/g, "-").trim("-");
-    };
-    vue.watch(() => playlist.title, (newTitle) => {
-      if (!urlManuallySet.value && !props.editMode) {
-        playlist.url = generateSlug(newTitle);
-      }
-    });
-    vue.watch(() => playlist.url, (newUrl, oldUrl) => {
-      if (newUrl !== generateSlug(playlist.title)) {
-        urlManuallySet.value = true;
-      }
-    });
-    const totalDuration = vue.computed(() => {
-      return playlist.tracks.reduce((sum, track) => sum + (track.duration || 0), 0);
-    });
-    const formatDuration = (seconds) => {
-      if (!seconds) return "0:00";
-      const hours = Math.floor(seconds / 3600);
-      const minutes = Math.floor(seconds % 3600 / 60);
-      const secs = seconds % 60;
-      if (hours > 0) {
-        return `${hours}:${minutes.toString().padStart(2, "0")}:${secs.toString().padStart(2, "0")}`;
-      }
-      return `${minutes}:${secs.toString().padStart(2, "0")}`;
-    };
-    const moveTrack = (index, direction) => {
-      const newIndex = direction === "up" ? index - 1 : index + 1;
-      if (newIndex < 0 || newIndex >= playlist.tracks.length) return;
-      const tracks2 = [...playlist.tracks];
-      [tracks2[index], tracks2[newIndex]] = [tracks2[newIndex], tracks2[index]];
-      playlist.tracks = tracks2;
-    };
-    const fetchPlaylist = async () => {
-      if (!props.url) return;
-      try {
-        const fetchedPlaylist = await playlists.actions.fetchPlaylistByUrl(props.url);
-        if (!fetchedPlaylist) {
-          core_store.actions.setError({
-            message: "Playlist not found"
-          });
-          return;
-        }
-        Object.assign(playlist, {
-          title: fetchedPlaylist.title || "",
-          description: fetchedPlaylist.description || "",
-          coverUrl: fetchedPlaylist.coverUrl || "",
-          tracks: fetchedPlaylist.tracks || [],
-          url: fetchedPlaylist.url || "",
-          isPublic: fetchedPlaylist.isPublic !== false,
-          isCollaborative: fetchedPlaylist.isCollaborative || false,
-          _id: fetchedPlaylist._id
-        });
-      } catch (error) {
-        console.error("Error fetching playlist:", error);
-        core_store.actions.setError({
-          message: "Failed to load playlist details"
-        });
-      }
-    };
-    const validateForm = () => {
-      let isValid = true;
-      if (!playlist.title.trim()) {
-        validation.title = {
-          message: "Playlist title is required"
-        };
-        isValid = false;
-      } else {
-        validation.title = false;
-      }
-      if (playlist.description && playlist.description.length > 2e3) {
-        validation.description = {
-          message: "Description is too long (max 2000 characters)"
-        };
-        isValid = false;
-      } else {
-        validation.description = false;
-      }
-      return isValid;
-    };
-    const submitForm = async () => {
-      if (!validateForm()) {
-        return;
-      }
-      try {
-        const formData = {
-          ...playlist,
-          tracks: playlist.tracks.map((track) => ({
-            track: track._id || track,
-            addedAt: /* @__PURE__ */ new Date()
-          }))
-        };
-        if (!props.editMode) {
-          formData.creator = {
-            type: "user",
-            target: auth.state.user._id
-          };
-          formData.owner = {
-            type: "user",
-            target: auth.state.user._id
-          };
-        }
-        let result;
-        if (props.editMode) {
-          result = await playlists.actions.updatePlaylist(formData);
-        } else {
-          result = await playlists.actions.createPlaylist(formData);
-        }
-        setTimeout(() => {
-          router.push({
-            name: "playlist",
-            params: { url: result.url }
-          });
-        }, 1e3);
-      } catch (error) {
-        console.error("Error saving playlist:", error);
-        core_store.actions.setError({
-          message: "Failed to save playlist"
-        });
-      }
-    };
-    const handleUploadError = (error) => {
-      console.error("Upload error:", error);
-      core_store.actions.setError({
-        message: "Error uploading image"
-      });
-    };
-    vue.onMounted(async () => {
-      if (props.editMode) {
-        await fetchPlaylist();
-        urlManuallySet.value = true;
-      }
-    });
-    return (_ctx, _cache) => {
-      return vue.openBlock(), vue.createElementBlock("div", _hoisted_1, [
-        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-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-medium mn-b-small" }, "Playlist Cover", -1)),
-              vue.createVNode(UploadImage.default, {
-                photo: playlist.coverUrl,
-                "onUpdate:photo": _cache[0] || (_cache[0] = ($event) => playlist.coverUrl = $event),
-                uploadPath: "playlists/covers",
-                class: "w-100 h-15r radius-small o-hidden mn-b-small",
-                onError: handleUploadError
-              }, null, 8, ["photo"])
-            ]),
-            vue.createVNode(Field.default, {
-              field: playlist.title,
-              "onUpdate:field": _cache[1] || (_cache[1] = ($event) => playlist.title = $event),
-              label: "Title",
-              placeholder: "Enter playlist title",
-              class: "bg-white radius-small pd-small mn-b-thin",
-              validation: validation.title
-            }, null, 8, ["field", "validation"]),
-            vue.createVNode(Field.default, {
-              field: playlist.url,
-              "onUpdate:field": _cache[2] || (_cache[2] = ($event) => playlist.url = $event),
-              label: "URL",
-              placeholder: "Leave blank for auto-generation based on the playlist title",
-              class: "bg-white radius-small pd-small mn-b-small"
-            }, null, 8, ["field"]),
-            vue.createVNode(Field.default, {
-              field: playlist.description,
-              "onUpdate:field": _cache[3] || (_cache[3] = ($event) => playlist.description = $event),
-              label: "Description",
-              type: "textarea",
-              placeholder: "Enter playlist description",
-              class: "bg-white radius-small pd-small mn-b-thin",
-              validation: validation.description
-            }, null, 8, ["field", "validation"])
-          ]),
-          vue.createVNode(Block.default, { title: "Tracks" }, {
-            default: vue.withCtx(() => [
-              vue.createVNode(BlockMultiselect.default, {
-                modelValue: playlist.tracks,
-                "onUpdate:modelValue": _cache[4] || (_cache[4] = ($event) => playlist.tracks = $event),
-                placeholder: "Search tracks...",
-                multiple: true,
-                transform: (item) => ({
-                  _id: item._id,
-                  title: item.title,
-                  artists: item.artists,
-                  album: item.album,
-                  duration: item.duration
-                }),
-                store: {
-                  read: (options) => tracks.actions.fetchTracks(options),
-                  state: tracks.state
-                },
-                options: {
-                  rootOnly: false,
-                  excludeChildren: false,
-                  limit: 50
-                },
-                skeleton: {
-                  hide: false,
-                  horizontal: true,
-                  class: "radius-small",
-                  structure: [{
-                    block: "text",
-                    size: "large"
-                  }]
-                },
-                states: {
-                  empty: {
-                    title: "No tracks found",
-                    description: "Try different search terms",
-                    class: "radius-small"
-                  }
-                },
-                key: "_id",
-                label: (item) => item.title,
-                classSearch: "bg-white radius-small",
-                classSelected: "bg-white pd-small radius-small",
-                classDropdown: "bg-white pd-small radius-medium bs-small",
-                classItem: "pd-small radius-small hover-bg-light cursor-pointer",
-                classFeed: "h-max-30r gap-thin flex-column flex o-scroll"
-              }, {
-                selected: vue.withCtx(({ item, clear, index }) => [
-                  vue.createElementVNode("div", _hoisted_5, [
-                    playlist.tracks.length > 1 ? (vue.openBlock(), vue.createElementBlock("button", {
-                      key: 0,
-                      onClick: vue.withModifiers(($event) => moveTrack(index, "up"), ["stop"]),
-                      disabled: index === 0,
-                      class: "i-small pd-micro bg-grey-nano radius-extra flex-center flex aspect-1x1 hover-scale-1"
-                    }, [
-                      vue.createVNode(IconCross.default, { class: "i-micro" })
-                    ], 8, _hoisted_6)) : vue.createCommentVNode("", true),
-                    playlist.tracks.length > 1 ? (vue.openBlock(), vue.createElementBlock("button", {
-                      key: 1,
-                      onClick: vue.withModifiers(($event) => moveTrack(index, "down"), ["stop"]),
-                      disabled: index === playlist.tracks.length - 1,
-                      class: "i-small pd-micro bg-grey-nano radius-extra flex-center flex aspect-1x1 hover-scale-1"
-                    }, [
-                      vue.createVNode(IconCross.default, { class: "i-micro" })
-                    ], 8, _hoisted_7)) : vue.createCommentVNode("", true),
-                    vue.createElementVNode("div", _hoisted_8, [
-                      vue.createElementVNode("p", _hoisted_9, vue.toDisplayString(item.title), 1),
-                      vue.createElementVNode("p", _hoisted_10, [
-                        vue.createTextVNode(vue.toDisplayString(item.artists?.map((a) => a.name || a).join(", ")) + " ", 1),
-                        item.album ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_11, " • " + vue.toDisplayString(item.album.title || item.album), 1)) : vue.createCommentVNode("", true)
-                      ])
-                    ]),
-                    item.duration ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_12, vue.toDisplayString(formatDuration(item.duration)), 1)) : vue.createCommentVNode("", true),
-                    vue.createElementVNode("button", {
-                      onClick: vue.withModifiers(clear, ["stop"]),
-                      class: "i-small pd-micro bg-red radius-extra flex-center flex aspect-1x1 hover-scale-1"
-                    }, [
-                      vue.createVNode(IconCross.default, { class: "i-micro fill-white" })
-                    ], 8, _hoisted_13)
-                  ])
-                ]),
-                item: vue.withCtx(({ item }) => [
-                  vue.createElementVNode("div", _hoisted_14, [
-                    vue.createElementVNode("div", _hoisted_15, [
-                      vue.createElementVNode("p", _hoisted_16, vue.toDisplayString(item.title), 1),
-                      vue.createElementVNode("p", _hoisted_17, [
-                        vue.createTextVNode(vue.toDisplayString(item.artists?.map((a) => a.name || a).join(", ")) + " ", 1),
-                        item.album ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_18, " • " + vue.toDisplayString(item.album.title || item.album), 1)) : vue.createCommentVNode("", true)
-                      ])
-                    ]),
-                    item.duration ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_19, vue.toDisplayString(formatDuration(item.duration)), 1)) : vue.createCommentVNode("", true)
-                  ])
-                ]),
-                _: 1
-              }, 8, ["modelValue", "transform", "store", "label"]),
-              playlist.tracks.length > 0 ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_20, vue.toDisplayString(playlist.tracks.length) + " tracks • " + vue.toDisplayString(formatDuration(totalDuration.value)), 1)) : vue.createCommentVNode("", true)
-            ]),
-            _: 1
-          }),
-          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-medium mn-b-small" }, "Privacy", -1)),
-              vue.createElementVNode("div", _hoisted_23, [
-                vue.createVNode(Radio.default, {
-                  radio: playlist.isPublic,
-                  "onUpdate:radio": _cache[5] || (_cache[5] = ($event) => playlist.isPublic = $event),
-                  value: true,
-                  name: "privacy",
-                  label: "Public",
-                  class: "bg-white pd-small radius-small"
-                }, null, 8, ["radio"]),
-                vue.createVNode(Radio.default, {
-                  radio: playlist.isPublic,
-                  "onUpdate:radio": _cache[6] || (_cache[6] = ($event) => playlist.isPublic = $event),
-                  value: false,
-                  name: "privacy",
-                  label: "Private",
-                  class: "bg-white pd-small radius-small"
-                }, null, 8, ["radio"])
-              ])
-            ]),
-            vue.createElementVNode("div", _hoisted_24, [
-              _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,
-                  "onUpdate:radio": _cache[7] || (_cache[7] = ($event) => playlist.isCollaborative = $event),
-                  value: true,
-                  name: "collaborative",
-                  label: "Yes",
-                  class: "bg-white pd-small radius-small"
-                }, null, 8, ["radio"]),
-                vue.createVNode(Radio.default, {
-                  radio: playlist.isCollaborative,
-                  "onUpdate:radio": _cache[8] || (_cache[8] = ($event) => playlist.isCollaborative = $event),
-                  value: false,
-                  name: "collaborative",
-                  label: "No",
-                  class: "bg-white pd-small radius-small"
-                }, null, 8, ["radio"])
-              ])
-            ])
-          ]),
-          vue.createElementVNode("div", _hoisted_26, [
-            vue.createVNode(Button.default, {
-              onClick: _cache[9] || (_cache[9] = ($event) => _ctx.$router.go(-1)),
-              class: "bg-grey-nano t-black",
-              showSucces: false,
-              showLoader: false
-            }, {
-              default: vue.withCtx(() => _cache[15] || (_cache[15] = [
-                vue.createTextVNode(" Cancel ")
-              ])),
-              _: 1
-            }),
-            vue.createVNode(Button.default, {
-              submit: submitForm,
-              class: "bg-main t-black",
-              text: {
-                success: __props.editMode ? "Updated!" : "Created!"
-              }
-            }, {
-              default: vue.withCtx(() => [
-                vue.createTextVNode(vue.toDisplayString(__props.editMode ? "Update Playlist" : "Create Playlist"), 1)
-              ]),
-              _: 1
-            }, 8, ["text"])
-          ])
-        ], 32)
-      ]);
-    };
-  }
-};
-exports.default = _sfc_main;
-//# sourceMappingURL=PlaylistForm.vue.cjs.map

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

@@ -1 +0,0 @@
-{"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/core/views/components/blocks/BlockMultiselect.vue';\n\n// Import stores\nimport * as playlistsStore from '../../store/playlists';\nimport * as tracksStore from '../../store/tracks';\nimport * as core from '@martyrs/src/modules/core/views/store/core.store.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      core.actions.setError({\n        message: 'Playlist not found'\n      });\n      return;\n    }\n    \n    // Update local playlist data\n    Object.assign(playlist, {\n      title: fetchedPlaylist.title || '',\n      description: fetchedPlaylist.description || '',\n      coverUrl: fetchedPlaylist.coverUrl || '',\n      tracks: fetchedPlaylist.tracks || [],\n      url: fetchedPlaylist.url || '',\n      isPublic: fetchedPlaylist.isPublic !== false,\n      isCollaborative: fetchedPlaylist.isCollaborative || false,\n      _id: fetchedPlaylist._id\n    });\n    \n  } catch (error) {\n    console.error('Error fetching playlist:', error);\n    core.actions.setError({\n      message: 'Failed to load playlist details'\n    });\n  }\n};\n\nconst validateForm = () => {\n  let isValid = true;\n  \n  // Validate title\n  if (!playlist.title.trim()) {\n    validation.title = {\n      message: 'Playlist title is required'\n    };\n    isValid = false;\n  } else {\n    validation.title = false;\n  }\n  \n  // Validate description\n  if (playlist.description && playlist.description.length > 2000) {\n    validation.description = {\n      message: 'Description is too long (max 2000 characters)'\n    };\n    isValid = false;\n  } else {\n    validation.description = false;\n  }\n  \n  return isValid;\n};\n\nconst submitForm = async () => {\n  if (!validateForm()) {\n    return;\n  }\n  \n  try {\n    // Prepare data for submission\n    const formData = {\n      ...playlist,\n      tracks: playlist.tracks.map(track => ({\n        track: track._id || track,\n        addedAt: new Date()\n      }))\n    };\n    \n    // Add ownership data if creating new playlist\n    if (!props.editMode) {\n      formData.creator = {\n        type: 'user',\n        target: auth.state.user._id\n      };\n      formData.owner = {\n        type: 'user',\n        target: auth.state.user._id\n      };\n    }\n    \n    let result;\n    if (props.editMode) {\n      result = await playlistsStore.actions.updatePlaylist(formData);\n    } else {\n      result = await playlistsStore.actions.createPlaylist(formData);\n    }\n    \n    // Navigate to playlist detail page\n    setTimeout(() => {\n      router.push({\n        name: 'playlist',\n        params: { url: result.url }\n      });\n    }, 1000);\n    \n  } catch (error) {\n    console.error('Error saving playlist:', error);\n    core.actions.setError({\n      message: 'Failed to save playlist'\n    });\n  }\n};\n\nconst handleUploadError = (error) => {\n  console.error('Upload error:', error);\n  core.actions.setError({\n    message: 'Error uploading image'\n  });\n};\n\n// Lifecycle hooks\nonMounted(async () => {\n  if (props.editMode) {\n    await fetchPlaylist();\n    // Mark URL as manually set in edit mode to prevent auto-generation\n    urlManuallySet.value = true;\n  }\n});\n</script>"],"names":["useRouter","useRoute","reactive","ref","watch","computed","tracks","playlistsStore.actions","core.actions","auth.state","onMounted"],"mappings":"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"}

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

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

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

@@ -1 +0,0 @@
-{"version":3,"file":"SearchForm.vue.cjs","sources":["../../../../../../../src/modules/music/components/forms/SearchForm.vue"],"sourcesContent":["<!-- components/forms/SearchForm.vue -->\n<template>\n  <div class=\"search-form flex-v-center flex bg-white-transp-50 pd-thin radius-extra\">\n    <IconSearch class=\"i-small mn-r-small\" fill=\"rgb(var(--grey))\"/>\n    <input \n      ref=\"searchInput\"\n      v-model=\"searchQuery\"\n      type=\"text\"\n      :placeholder=\"placeholder\"\n      class=\"bg-transparent border-none  flex-1\"\n      @keydown.enter=\"handleSearch\"\n    />\n    <Button \n      v-if=\"searchQuery.length > 0\"\n      @click=\"clearSearch\"\n      class=\"bg-transparent border-none pd-zero\"\n      :showLoader=\"false\" \n      :showSucces=\"false\"\n    >\n      <IconCross class=\"i-small\" fill=\"rgb(var(--grey))\"/>\n    </Button>\n  </div>\n</template>\n\n<script setup>\nimport { ref, watch, onMounted, defineEmits } from 'vue';\nimport Button from '@martyrs/src/components/Button/Button.vue';\nimport IconSearch from '@martyrs/src/modules/icons/navigation/IconSearch.vue';\nimport IconCross from '@martyrs/src/modules/icons/navigation/IconCross.vue';\n\nconst props = defineProps({\n  placeholder: {\n    type: String,\n    default: 'Search...'\n  },\n  initialQuery: {\n    type: String,\n    default: ''\n  }\n});\n\nconst emit = defineEmits(['search']);\n\nconst searchInput = ref(null);\nconst searchQuery = ref(props.initialQuery);\nlet searchTimeout = null;\n\nconst handleSearch = () => {\n  emit('search', searchQuery.value.trim());\n};\n\nconst clearSearch = () => {\n  searchQuery.value = '';\n  emit('search', '');\n  searchInput.value?.focus();\n};\n\n// Watch for changes in search query and emit search with debounce\nwatch(searchQuery, (newQuery) => {\n  // Clear previous timeout\n  if (searchTimeout) {\n    clearTimeout(searchTimeout);\n  }\n  \n  if (newQuery.trim().length >= 2) {\n    // Set new timeout for debounce\n    searchTimeout = setTimeout(() => {\n      handleSearch();\n    }, 300);\n  } else if (newQuery.trim().length === 0) {\n    emit('search', '');\n  }\n});\n\n// Watch for changes in initialQuery prop\nwatch(() => props.initialQuery, (newQuery) => {\n  if (newQuery !== searchQuery.value) {\n    searchQuery.value = newQuery;\n  }\n});\n\nonMounted(() => {\n  if (props.initialQuery) {\n    searchQuery.value = props.initialQuery;\n  }\n});\n</script>\n\n<style scoped>\n.search-form {\n  transition: background-color 0.2s ease;\n}\n\n.search-form:focus-within {\n  background-color: rgba(var(--dark), 0.8);\n}\n\ninput::placeholder {\n  color: rgba(var(--grey), 0.8);\n}\n\ninput:focus {\n  outline: none;\n}\n</style>"],"names":["ref","watch","onMounted"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AA8BA,UAAM,QAAQ;AAWd,UAAM,OAAO;AAEb,UAAM,cAAcA,IAAAA,IAAI,IAAI;AAC5B,UAAM,cAAcA,IAAAA,IAAI,MAAM,YAAY;AAC1C,QAAI,gBAAgB;AAEpB,UAAM,eAAe,MAAM;AACzB,WAAK,UAAU,YAAY,MAAM,KAAI,CAAE;AAAA,IACzC;AAEA,UAAM,cAAc,MAAM;AACxB,kBAAY,QAAQ;AACpB,WAAK,UAAU,EAAE;AACjB,kBAAY,OAAO,MAAK;AAAA,IAC1B;AAGAC,QAAAA,MAAM,aAAa,CAAC,aAAa;AAE/B,UAAI,eAAe;AACjB,qBAAa,aAAa;AAAA,MAC5B;AAEA,UAAI,SAAS,OAAO,UAAU,GAAG;AAE/B,wBAAgB,WAAW,MAAM;AAC/B,uBAAY;AAAA,QACd,GAAG,GAAG;AAAA,MACR,WAAW,SAAS,KAAI,EAAG,WAAW,GAAG;AACvC,aAAK,UAAU,EAAE;AAAA,MACnB;AAAA,IACF,CAAC;AAGDA,QAAAA,MAAM,MAAM,MAAM,cAAc,CAAC,aAAa;AAC5C,UAAI,aAAa,YAAY,OAAO;AAClC,oBAAY,QAAQ;AAAA,MACtB;AAAA,IACF,CAAC;AAEDC,QAAAA,UAAU,MAAM;AACd,UAAI,MAAM,cAAc;AACtB,oBAAY,QAAQ,MAAM;AAAA,MAC5B;AAAA,IACF,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}