@ozdao/martyrs 0.2.486 → 0.2.487

package/dist/martyrs/src/modules/music/components/pages/ArtistEdit.vue.js

@@ -0,0 +1,23 @@
+import { createBlock, openBlock } from "vue";
+import _sfc_main$1 from "../forms/ArtistForm.vue.js";
+const _sfc_main = {
+  __name: "ArtistEdit",
+  props: {
+    url: {
+      type: String,
+      required: true
+    }
+  },
+  setup(__props) {
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(_sfc_main$1, {
+        editMode: true,
+        url: __props.url
+      }, null, 8, ["url"]);
+    };
+  }
+};
+export {
+  _sfc_main as default
+};
+//# sourceMappingURL=ArtistEdit.vue.js.map

package/dist/martyrs/src/modules/music/components/pages/ArtistEdit.vue.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ArtistEdit.vue.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;"}

package/dist/martyrs/src/modules/music/components/pages/MusicHome.vue.cjs

@@ -5,12 +5,13 @@ const Feed = require("../../../../components/Feed/Feed.vue.cjs");
 const PlaylistCard = require("../cards/PlaylistCard.vue.cjs");
 const AlbumCard = require("../cards/AlbumCard.vue.cjs");
 const ArtistCard = require("../cards/ArtistCard.vue.cjs");
-const TrackList = require("../lists/TrackList.vue.cjs");
+const _pluginVue_exportHelper = require("../../../../../../_virtual/_plugin-vue_export-helper.cjs");
+require("../../store/player.cjs");
+const TrackListCard = require("../cards/TrackListCard.vue.cjs");
 const playlists = require("../../store/playlists.cjs");
 const albums = require("../../store/albums.cjs");
 const tracks = require("../../store/tracks.cjs");
 const artists = require("../../store/artists.cjs");
-const _pluginVue_exportHelper = require("../../../../../../_virtual/_plugin-vue_export-helper.cjs");
 const _hoisted_1 = { class: "music-home-page pd-medium mobile:pd-thin" };
 const _hoisted_2 = { class: "mn-b-medium" };
 const _hoisted_3 = { class: "flex-between flex mn-b-small" };
@@ -18,53 +19,44 @@ const _hoisted_4 = { class: "mn-b-medium" };
 const _hoisted_5 = { class: "flex-between flex mn-b-small" };
 const _hoisted_6 = { class: "mn-b-medium" };
 const _hoisted_7 = { class: "flex-between flex mn-b-small" };
-const _hoisted_8 = { class: "flex-between flex mn-b-small" };
+const _hoisted_8 = { class: "bg-dark-transp-10 radius-medium o-hidden" };
+const _hoisted_9 = { class: "flex-between flex mn-b-small" };
 const _sfc_main = {
   __name: "MusicHome",
   setup(__props) {
-    const featuredPlaylists = vue.computed(() => playlists.state.featuredPlaylists);
-    const recentAlbums = vue.computed(() => albums.state.albums);
-    const popularTracks = vue.computed(() => tracks.state.popular);
-    const topArtists = vue.computed(() => artists.state.topArtists);
-    const loadingFeatured = vue.computed(() => playlists.state.loadingFeatured);
-    const loadingRecentAlbums = vue.computed(() => albums.state.isLoading);
-    const loadingPopularTracks = vue.computed(() => tracks.state.loadingPopular);
-    const loadingTopArtists = vue.computed(() => artists.state.loadingTopArtists);
-    vue.onMounted(async () => {
-      playlists.actions.fetchFeaturedPlaylists(5);
-      albums.actions.fetchAlbums({
-        limit: 5,
-        sortParam: "releaseDate",
-        sortOrder: "desc"
-      });
-      tracks.actions.fetchPopularTracks(10);
-      artists.actions.fetchTopArtists(6);
-    });
     return (_ctx, _cache) => {
       const _component_router_link = vue.resolveComponent("router-link");
       return vue.openBlock(), vue.createElementBlock("div", _hoisted_1, [
-        _cache[12] || (_cache[12] = vue.createElementVNode("section", { class: "bg-gradient-dark pd-medium radius-medium mn-b-medium" }, [
-          vue.createElementVNode("h1", { class: "t-white mn-b-small" }, "Welcome to Music"),
-          vue.createElementVNode("p", { class: "t-grey t-medium" }, "Discover new tracks, albums, and playlists")
-        ], -1)),
         vue.createElementVNode("section", _hoisted_2, [
           vue.createElementVNode("div", _hoisted_3, [
-            _cache[5] || (_cache[5] = vue.createElementVNode("h2", { class: "" }, "Featured Playlists", -1)),
+            _cache[1] || (_cache[1] = vue.createElementVNode("h2", { class: "" }, "Featured Playlists", -1)),
             vue.createVNode(_component_router_link, {
               to: { path: "/music/playlists" },
               class: "t-main t-small hover-opacity"
             }, {
-              default: vue.withCtx(() => _cache[4] || (_cache[4] = [
+              default: vue.withCtx(() => _cache[0] || (_cache[0] = [
                 vue.createTextVNode("See all")
               ])),
               _: 1
             })
           ]),
           vue.createVNode(Feed.default, {
-            items: featuredPlaylists.value,
-            "onUpdate:items": _cache[0] || (_cache[0] = ($event) => featuredPlaylists.value = $event),
-            isLoading: loadingFeatured.value,
             showLoadMore: false,
+            LoadMore: false,
+            states: {
+              empty: {
+                title: "No Playlists",
+                description: "No featured playlists available at the moment."
+              }
+            },
+            store: {
+              read: (options) => vue.unref(playlists.actions).fetchFeaturedPlaylists(options),
+              state: vue.unref(playlists.state)
+            },
+            options: {
+              limit: 5,
+              featured: true
+            },
             skeleton: {
               structure: [
                 { block: "square", size: "large", rounded: false },
@@ -88,26 +80,39 @@ const _sfc_main = {
               }), 128))
             ]),
             _: 1
-          }, 8, ["items", "isLoading"])
+          }, 8, ["store"])
         ]),
         vue.createElementVNode("section", _hoisted_4, [
           vue.createElementVNode("div", _hoisted_5, [
-            _cache[7] || (_cache[7] = vue.createElementVNode("h2", { class: "" }, "New Releases", -1)),
+            _cache[3] || (_cache[3] = vue.createElementVNode("h2", { class: "" }, "New Releases", -1)),
             vue.createVNode(_component_router_link, {
               to: { path: "/music/albums" },
               class: "t-main t-small hover-opacity"
             }, {
-              default: vue.withCtx(() => _cache[6] || (_cache[6] = [
+              default: vue.withCtx(() => _cache[2] || (_cache[2] = [
                 vue.createTextVNode("See all")
               ])),
               _: 1
             })
           ]),
           vue.createVNode(Feed.default, {
-            items: recentAlbums.value,
-            "onUpdate:items": _cache[1] || (_cache[1] = ($event) => recentAlbums.value = $event),
-            isLoading: loadingRecentAlbums.value,
             showLoadMore: false,
+            LoadMore: false,
+            states: {
+              empty: {
+                title: "No New Releases",
+                description: "No new albums available at the moment."
+              }
+            },
+            store: {
+              read: (options) => vue.unref(albums.actions).fetchAlbums(options),
+              state: vue.unref(albums.state)
+            },
+            options: {
+              limit: 4,
+              sortParam: "releaseDate",
+              sortOrder: "desc"
+            },
             skeleton: {
               structure: [
                 { block: "square", size: "large", rounded: false },
@@ -116,7 +121,7 @@ const _sfc_main = {
               ],
               horizontal: false
             },
-            class: "cols-5 mobile:cols-2 gap-small"
+            class: "cols-4 mobile:cols-2 gap-small"
           }, {
             default: vue.withCtx(({ items }) => [
               (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(items, (album) => {
@@ -131,63 +136,93 @@ const _sfc_main = {
               }), 128))
             ]),
             _: 1
-          }, 8, ["items", "isLoading"])
+          }, 8, ["store"])
         ]),
         vue.createElementVNode("section", _hoisted_6, [
           vue.createElementVNode("div", _hoisted_7, [
-            _cache[9] || (_cache[9] = vue.createElementVNode("h2", { class: "" }, "Popular Tracks", -1)),
+            _cache[5] || (_cache[5] = vue.createElementVNode("h2", { class: "" }, "Popular Tracks", -1)),
             vue.createVNode(_component_router_link, {
               to: { path: "/music/tracks" },
               class: "t-main t-small hover-opacity"
             }, {
-              default: vue.withCtx(() => _cache[8] || (_cache[8] = [
+              default: vue.withCtx(() => _cache[4] || (_cache[4] = [
                 vue.createTextVNode("See all")
               ])),
               _: 1
             })
           ]),
           vue.createVNode(Feed.default, {
-            items: popularTracks.value,
-            "onUpdate:items": _cache[2] || (_cache[2] = ($event) => popularTracks.value = $event),
-            isLoading: loadingPopularTracks.value,
             showLoadMore: false,
+            LoadMore: false,
+            states: {
+              empty: {
+                title: "No Popular Tracks",
+                description: "No popular tracks available at the moment."
+              }
+            },
+            store: {
+              read: (options) => vue.unref(tracks.actions).fetchPopularTracks(options),
+              state: vue.unref(tracks.state)
+            },
+            options: {
+              limit: 10,
+              popular: true
+            },
             skeleton: {
               structure: [
                 { block: "text", size: "medium" },
                 { block: "text", size: "small" }
               ],
               horizontal: true
-            }
+            },
+            class: "gap-zero"
           }, {
             default: vue.withCtx(({ items }) => [
-              vue.createVNode(TrackList.default, {
-                tracks: items,
-                showAlbum: true,
-                showCover: true,
-                class: "bg-dark-transp-10 radius-medium o-hidden"
-              }, null, 8, ["tracks"])
+              vue.createElementVNode("div", _hoisted_8, [
+                (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(items, (track, index) => {
+                  return vue.openBlock(), vue.createBlock(TrackListCard.default, {
+                    key: track._id,
+                    track,
+                    index,
+                    showAlbum: true,
+                    showCover: true
+                  }, null, 8, ["track", "index"]);
+                }), 128))
+              ])
             ]),
             _: 1
-          }, 8, ["items", "isLoading"])
+          }, 8, ["store"])
         ]),
         vue.createElementVNode("section", null, [
-          vue.createElementVNode("div", _hoisted_8, [
-            _cache[11] || (_cache[11] = vue.createElementVNode("h2", { class: "" }, "Top Artists", -1)),
+          vue.createElementVNode("div", _hoisted_9, [
+            _cache[7] || (_cache[7] = vue.createElementVNode("h2", { class: "" }, "Top Artists", -1)),
             vue.createVNode(_component_router_link, {
               to: { path: "/music/artists" },
               class: "t-main t-small hover-opacity"
             }, {
-              default: vue.withCtx(() => _cache[10] || (_cache[10] = [
+              default: vue.withCtx(() => _cache[6] || (_cache[6] = [
                 vue.createTextVNode("See all")
               ])),
               _: 1
             })
           ]),
           vue.createVNode(Feed.default, {
-            items: topArtists.value,
-            "onUpdate:items": _cache[3] || (_cache[3] = ($event) => topArtists.value = $event),
-            isLoading: loadingTopArtists.value,
             showLoadMore: false,
+            LoadMore: false,
+            states: {
+              empty: {
+                title: "No Artists",
+                description: "No top artists available at the moment."
+              }
+            },
+            store: {
+              read: (options) => vue.unref(artists.actions).fetchTopArtists(options),
+              state: vue.unref(artists.state)
+            },
+            options: {
+              limit: 6,
+              top: true
+            },
             skeleton: {
               structure: [
                 { block: "circle", size: "large" },
@@ -210,12 +245,12 @@ const _sfc_main = {
               }), 128))
             ]),
             _: 1
-          }, 8, ["items", "isLoading"])
+          }, 8, ["store"])
         ])
       ]);
     };
   }
 };
-const MusicHome = /* @__PURE__ */ _pluginVue_exportHelper.default(_sfc_main, [["__scopeId", "data-v-b0e3607d"]]);
+const MusicHome = /* @__PURE__ */ _pluginVue_exportHelper.default(_sfc_main, [["__scopeId", "data-v-14a77aad"]]);
 exports.default = MusicHome;
 //# sourceMappingURL=MusicHome.vue.cjs.map

package/dist/martyrs/src/modules/music/components/pages/MusicHome.vue.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"MusicHome.vue.cjs","sources":["../../../../../../../src/modules/music/components/pages/MusicHome.vue"],"sourcesContent":["<!-- components/pages/MusicHome.vue -->\n<template>\n  <div class=\"music-home-page pd-medium mobile:pd-thin\">\n    <!-- Hero Section -->\n    <section class=\"bg-gradient-dark pd-medium radius-medium mn-b-medium\">\n      <h1 class=\"t-white mn-b-small\">Welcome to Music</h1>\n      <p class=\"t-grey t-medium\">Discover new tracks, albums, and playlists</p>\n    </section>\n    \n    <!-- Featured Playlists Section -->\n    <section class=\"mn-b-medium\">\n      <div class=\"flex-between flex mn-b-small\">\n        <h2 class=\"\">Featured Playlists</h2>\n        <router-link :to=\"{ path: '/music/playlists' }\" class=\"t-main t-small hover-opacity\">See all</router-link>\n      </div>\n      \n      <Feed\n        v-model:items=\"featuredPlaylists\"\n        :isLoading=\"loadingFeatured\"\n        :showLoadMore=\"false\"\n        :skeleton=\"{\n          structure: [\n            { block: 'square', size: 'large', rounded: false },\n            { block: 'text', size: 'medium' },\n            { block: 'text', size: 'small' }\n          ],\n          horizontal: false\n        }\"\n        class=\"cols-5 mobile:cols-2 gap-small\"\n      >\n        <template #default=\"{ items }\">\n          <li v-for=\"playlist in items\" :key=\"playlist._id\">\n            <PlaylistCard :playlist=\"playlist\" class=\"hover-scale-1 transition-cubic-in-out\" />\n          </li>\n        </template>\n      </Feed>\n    </section>\n    \n    <!-- New Releases Section -->\n    <section class=\"mn-b-medium\">\n      <div class=\"flex-between flex mn-b-small\">\n        <h2 class=\"\">New Releases</h2>\n        <router-link :to=\"{ path: '/music/albums' }\" class=\"t-main t-small hover-opacity\">See all</router-link>\n      </div>\n      \n      <Feed\n        v-model:items=\"recentAlbums\"\n        :isLoading=\"loadingRecentAlbums\"\n        :showLoadMore=\"false\"\n        :skeleton=\"{\n          structure: [\n            { block: 'square', size: 'large', rounded: false },\n            { block: 'text', size: 'medium' },\n            { block: 'text', size: 'small' }\n          ],\n          horizontal: false\n        }\"\n        class=\"cols-5 mobile:cols-2 gap-small\"\n      >\n        <template #default=\"{ items }\">\n          <li v-for=\"album in items\" :key=\"album._id\">\n            <AlbumCard :album=\"album\" class=\"hover-scale-1 transition-cubic-in-out\" />\n          </li>\n        </template>\n      </Feed>\n    </section>\n    \n    <!-- Popular Tracks Section -->\n    <section class=\"mn-b-medium\">\n      <div class=\"flex-between flex mn-b-small\">\n        <h2 class=\"\">Popular Tracks</h2>\n        <router-link :to=\"{ path: '/music/tracks' }\" class=\"t-main t-small hover-opacity\">See all</router-link>\n      </div>\n      \n      <Feed\n        v-model:items=\"popularTracks\"\n        :isLoading=\"loadingPopularTracks\"\n        :showLoadMore=\"false\"\n        :skeleton=\"{\n          structure: [\n            { block: 'text', size: 'medium' },\n            { block: 'text', size: 'small' }\n          ],\n          horizontal: true\n        }\"\n      >\n        <template #default=\"{ items }\">\n          <TrackList \n            :tracks=\"items\" \n            :showAlbum=\"true\" \n            :showCover=\"true\"\n            class=\"bg-dark-transp-10 radius-medium o-hidden\"\n          />\n        </template>\n      </Feed>\n    </section>\n    \n    <!-- Top Artists Section -->\n    <section>\n      <div class=\"flex-between flex mn-b-small\">\n        <h2 class=\"\">Top Artists</h2>\n        <router-link :to=\"{ path: '/music/artists' }\" class=\"t-main t-small hover-opacity\">See all</router-link>\n      </div>\n      \n      <Feed\n        v-model:items=\"topArtists\"\n        :isLoading=\"loadingTopArtists\"\n        :showLoadMore=\"false\"\n        :skeleton=\"{\n          structure: [\n            { block: 'circle', size: 'large' },\n            { block: 'text', size: 'medium' }\n          ],\n          horizontal: false\n        }\"\n        class=\"cols-6 mobile:cols-3 gap-small\"\n      >\n        <template #default=\"{ items }\">\n          <li v-for=\"artist in items\" :key=\"artist._id\">\n            <ArtistCard :artist=\"artist\" class=\"hover-scale-1 transition-cubic-in-out\" />\n          </li>\n        </template>\n      </Feed>\n    </section>\n  </div>\n</template>\n\n<script setup>\nimport { ref, onMounted, computed } from 'vue';\nimport Feed from '@martyrs/src/components/Feed/Feed.vue';\nimport PlaylistCard from '../cards/PlaylistCard.vue';\nimport AlbumCard from '../cards/AlbumCard.vue';\nimport ArtistCard from '../cards/ArtistCard.vue';\nimport TrackList from '../lists/TrackList.vue';\n\n// Store imports\nimport { state as playlistsState, actions as playlistsActions } from '../../store/playlists.js';\nimport { state as albumsState, actions as albumsActions } from '../../store/albums.js';\nimport { state as tracksState, actions as tracksActions } from '../../store/tracks.js';\nimport { state as artistsState, actions as artistsActions } from '../../store/artists.js';\n\n// Computed properties\nconst featuredPlaylists = computed(() => playlistsState.featuredPlaylists);\nconst recentAlbums = computed(() => albumsState.albums);\nconst popularTracks = computed(() => tracksState.popular);\nconst topArtists = computed(() => artistsState.topArtists);\n\n// Loading states\nconst loadingFeatured = computed(() => playlistsState.loadingFeatured);\nconst loadingRecentAlbums = computed(() => albumsState.isLoading);\nconst loadingPopularTracks = computed(() => tracksState.loadingPopular);\nconst loadingTopArtists = computed(() => artistsState.loadingTopArtists);\n\nonMounted(async () => {\n  // Fetch featured playlists\n  playlistsActions.fetchFeaturedPlaylists(5);\n  \n  // Fetch recent albums\n  albumsActions.fetchAlbums({\n    limit: 5,\n    sortParam: 'releaseDate',\n    sortOrder: 'desc'\n  });\n  \n  // Fetch popular tracks\n  tracksActions.fetchPopularTracks(10);\n  \n  // Fetch top artists\n  artistsActions.fetchTopArtists(6);\n});\n</script>\n\n<style scoped>\n.bg-gradient-dark {\n  background: linear-gradient(to bottom, rgba(var(--dark), 0.8), rgba(var(--black), 0.9));\n}\n</style>"],"names":["computed","playlistsState","albumsState","tracksState","artistsState","onMounted","playlistsActions","albumsActions","tracksActions","artistsActions"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AA8IA,UAAM,oBAAoBA,IAAQ,SAAC,MAAMC,UAAc,MAAC,iBAAiB;AACzE,UAAM,eAAeD,IAAQ,SAAC,MAAME,OAAW,MAAC,MAAM;AACtD,UAAM,gBAAgBF,IAAQ,SAAC,MAAMG,OAAW,MAAC,OAAO;AACxD,UAAM,aAAaH,IAAQ,SAAC,MAAMI,QAAY,MAAC,UAAU;AAGzD,UAAM,kBAAkBJ,IAAQ,SAAC,MAAMC,UAAc,MAAC,eAAe;AACrE,UAAM,sBAAsBD,IAAQ,SAAC,MAAME,OAAW,MAAC,SAAS;AAChE,UAAM,uBAAuBF,IAAQ,SAAC,MAAMG,OAAW,MAAC,cAAc;AACtE,UAAM,oBAAoBH,IAAQ,SAAC,MAAMI,QAAY,MAAC,iBAAiB;AAEvEC,QAAAA,UAAU,YAAY;AAEpBC,gBAAgB,QAAC,uBAAuB,CAAC;AAGzCC,aAAAA,QAAc,YAAY;AAAA,QACxB,OAAO;AAAA,QACP,WAAW;AAAA,QACX,WAAW;AAAA,MACf,CAAG;AAGDC,aAAa,QAAC,mBAAmB,EAAE;AAGnCC,cAAc,QAAC,gBAAgB,CAAC;AAAA,IAClC,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"MusicHome.vue.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/martyrs/src/modules/music/components/pages/MusicHome.vue.js

@@ -1,14 +1,15 @@
-import { computed, onMounted, resolveComponent, createElementBlock, openBlock, createElementVNode, createVNode, withCtx, createTextVNode, Fragment, renderList } from "vue";
+import { resolveComponent, createElementBlock, openBlock, createElementVNode, createVNode, withCtx, createTextVNode, unref, Fragment, renderList, createBlock } from "vue";
 import _sfc_main$1 from "../../../../components/Feed/Feed.vue.js";
 import PlaylistCard from "../cards/PlaylistCard.vue.js";
 import AlbumCard from "../cards/AlbumCard.vue.js";
 import ArtistCard from "../cards/ArtistCard.vue.js";
-import TrackList from "../lists/TrackList.vue.js";
+import _export_sfc from "../../../../../../_virtual/_plugin-vue_export-helper.js";
+import "../../store/player.js";
+import _sfc_main$2 from "../cards/TrackListCard.vue.js";
 import { state, actions } from "../../store/playlists.js";
 import { state as state$1, actions as actions$1 } from "../../store/albums.js";
 import { state as state$2, actions as actions$2 } from "../../store/tracks.js";
 import { state as state$3, actions as actions$3 } from "../../store/artists.js";
-import _export_sfc from "../../../../../../_virtual/_plugin-vue_export-helper.js";
 const _hoisted_1 = { class: "music-home-page pd-medium mobile:pd-thin" };
 const _hoisted_2 = { class: "mn-b-medium" };
 const _hoisted_3 = { class: "flex-between flex mn-b-small" };
@@ -16,53 +17,44 @@ const _hoisted_4 = { class: "mn-b-medium" };
 const _hoisted_5 = { class: "flex-between flex mn-b-small" };
 const _hoisted_6 = { class: "mn-b-medium" };
 const _hoisted_7 = { class: "flex-between flex mn-b-small" };
-const _hoisted_8 = { class: "flex-between flex mn-b-small" };
+const _hoisted_8 = { class: "bg-dark-transp-10 radius-medium o-hidden" };
+const _hoisted_9 = { class: "flex-between flex mn-b-small" };
 const _sfc_main = {
   __name: "MusicHome",
   setup(__props) {
-    const featuredPlaylists = computed(() => state.featuredPlaylists);
-    const recentAlbums = computed(() => state$1.albums);
-    const popularTracks = computed(() => state$2.popular);
-    const topArtists = computed(() => state$3.topArtists);
-    const loadingFeatured = computed(() => state.loadingFeatured);
-    const loadingRecentAlbums = computed(() => state$1.isLoading);
-    const loadingPopularTracks = computed(() => state$2.loadingPopular);
-    const loadingTopArtists = computed(() => state$3.loadingTopArtists);
-    onMounted(async () => {
-      actions.fetchFeaturedPlaylists(5);
-      actions$1.fetchAlbums({
-        limit: 5,
-        sortParam: "releaseDate",
-        sortOrder: "desc"
-      });
-      actions$2.fetchPopularTracks(10);
-      actions$3.fetchTopArtists(6);
-    });
     return (_ctx, _cache) => {
       const _component_router_link = resolveComponent("router-link");
       return openBlock(), createElementBlock("div", _hoisted_1, [
-        _cache[12] || (_cache[12] = createElementVNode("section", { class: "bg-gradient-dark pd-medium radius-medium mn-b-medium" }, [
-          createElementVNode("h1", { class: "t-white mn-b-small" }, "Welcome to Music"),
-          createElementVNode("p", { class: "t-grey t-medium" }, "Discover new tracks, albums, and playlists")
-        ], -1)),
         createElementVNode("section", _hoisted_2, [
           createElementVNode("div", _hoisted_3, [
-            _cache[5] || (_cache[5] = createElementVNode("h2", { class: "" }, "Featured Playlists", -1)),
+            _cache[1] || (_cache[1] = createElementVNode("h2", { class: "" }, "Featured Playlists", -1)),
             createVNode(_component_router_link, {
               to: { path: "/music/playlists" },
               class: "t-main t-small hover-opacity"
             }, {
-              default: withCtx(() => _cache[4] || (_cache[4] = [
+              default: withCtx(() => _cache[0] || (_cache[0] = [
                 createTextVNode("See all")
               ])),
               _: 1
             })
           ]),
           createVNode(_sfc_main$1, {
-            items: featuredPlaylists.value,
-            "onUpdate:items": _cache[0] || (_cache[0] = ($event) => featuredPlaylists.value = $event),
-            isLoading: loadingFeatured.value,
             showLoadMore: false,
+            LoadMore: false,
+            states: {
+              empty: {
+                title: "No Playlists",
+                description: "No featured playlists available at the moment."
+              }
+            },
+            store: {
+              read: (options) => unref(actions).fetchFeaturedPlaylists(options),
+              state: unref(state)
+            },
+            options: {
+              limit: 5,
+              featured: true
+            },
             skeleton: {
               structure: [
                 { block: "square", size: "large", rounded: false },
@@ -86,26 +78,39 @@ const _sfc_main = {
               }), 128))
             ]),
             _: 1
-          }, 8, ["items", "isLoading"])
+          }, 8, ["store"])
         ]),
         createElementVNode("section", _hoisted_4, [
           createElementVNode("div", _hoisted_5, [
-            _cache[7] || (_cache[7] = createElementVNode("h2", { class: "" }, "New Releases", -1)),
+            _cache[3] || (_cache[3] = createElementVNode("h2", { class: "" }, "New Releases", -1)),
             createVNode(_component_router_link, {
               to: { path: "/music/albums" },
               class: "t-main t-small hover-opacity"
             }, {
-              default: withCtx(() => _cache[6] || (_cache[6] = [
+              default: withCtx(() => _cache[2] || (_cache[2] = [
                 createTextVNode("See all")
               ])),
               _: 1
             })
           ]),
           createVNode(_sfc_main$1, {
-            items: recentAlbums.value,
-            "onUpdate:items": _cache[1] || (_cache[1] = ($event) => recentAlbums.value = $event),
-            isLoading: loadingRecentAlbums.value,
             showLoadMore: false,
+            LoadMore: false,
+            states: {
+              empty: {
+                title: "No New Releases",
+                description: "No new albums available at the moment."
+              }
+            },
+            store: {
+              read: (options) => unref(actions$1).fetchAlbums(options),
+              state: unref(state$1)
+            },
+            options: {
+              limit: 4,
+              sortParam: "releaseDate",
+              sortOrder: "desc"
+            },
             skeleton: {
               structure: [
                 { block: "square", size: "large", rounded: false },
@@ -114,7 +119,7 @@ const _sfc_main = {
               ],
               horizontal: false
             },
-            class: "cols-5 mobile:cols-2 gap-small"
+            class: "cols-4 mobile:cols-2 gap-small"
           }, {
             default: withCtx(({ items }) => [
               (openBlock(true), createElementBlock(Fragment, null, renderList(items, (album) => {
@@ -129,63 +134,93 @@ const _sfc_main = {
               }), 128))
             ]),
             _: 1
-          }, 8, ["items", "isLoading"])
+          }, 8, ["store"])
         ]),
         createElementVNode("section", _hoisted_6, [
           createElementVNode("div", _hoisted_7, [
-            _cache[9] || (_cache[9] = createElementVNode("h2", { class: "" }, "Popular Tracks", -1)),
+            _cache[5] || (_cache[5] = createElementVNode("h2", { class: "" }, "Popular Tracks", -1)),
             createVNode(_component_router_link, {
               to: { path: "/music/tracks" },
               class: "t-main t-small hover-opacity"
             }, {
-              default: withCtx(() => _cache[8] || (_cache[8] = [
+              default: withCtx(() => _cache[4] || (_cache[4] = [
                 createTextVNode("See all")
               ])),
               _: 1
             })
           ]),
           createVNode(_sfc_main$1, {
-            items: popularTracks.value,
-            "onUpdate:items": _cache[2] || (_cache[2] = ($event) => popularTracks.value = $event),
-            isLoading: loadingPopularTracks.value,
             showLoadMore: false,
+            LoadMore: false,
+            states: {
+              empty: {
+                title: "No Popular Tracks",
+                description: "No popular tracks available at the moment."
+              }
+            },
+            store: {
+              read: (options) => unref(actions$2).fetchPopularTracks(options),
+              state: unref(state$2)
+            },
+            options: {
+              limit: 10,
+              popular: true
+            },
             skeleton: {
               structure: [
                 { block: "text", size: "medium" },
                 { block: "text", size: "small" }
               ],
               horizontal: true
-            }
+            },
+            class: "gap-zero"
           }, {
             default: withCtx(({ items }) => [
-              createVNode(TrackList, {
-                tracks: items,
-                showAlbum: true,
-                showCover: true,
-                class: "bg-dark-transp-10 radius-medium o-hidden"
-              }, null, 8, ["tracks"])
+              createElementVNode("div", _hoisted_8, [
+                (openBlock(true), createElementBlock(Fragment, null, renderList(items, (track, index) => {
+                  return openBlock(), createBlock(_sfc_main$2, {
+                    key: track._id,
+                    track,
+                    index,
+                    showAlbum: true,
+                    showCover: true
+                  }, null, 8, ["track", "index"]);
+                }), 128))
+              ])
             ]),
             _: 1
-          }, 8, ["items", "isLoading"])
+          }, 8, ["store"])
         ]),
         createElementVNode("section", null, [
-          createElementVNode("div", _hoisted_8, [
-            _cache[11] || (_cache[11] = createElementVNode("h2", { class: "" }, "Top Artists", -1)),
+          createElementVNode("div", _hoisted_9, [
+            _cache[7] || (_cache[7] = createElementVNode("h2", { class: "" }, "Top Artists", -1)),
             createVNode(_component_router_link, {
               to: { path: "/music/artists" },
               class: "t-main t-small hover-opacity"
             }, {
-              default: withCtx(() => _cache[10] || (_cache[10] = [
+              default: withCtx(() => _cache[6] || (_cache[6] = [
                 createTextVNode("See all")
               ])),
               _: 1
             })
           ]),
           createVNode(_sfc_main$1, {
-            items: topArtists.value,
-            "onUpdate:items": _cache[3] || (_cache[3] = ($event) => topArtists.value = $event),
-            isLoading: loadingTopArtists.value,
             showLoadMore: false,
+            LoadMore: false,
+            states: {
+              empty: {
+                title: "No Artists",
+                description: "No top artists available at the moment."
+              }
+            },
+            store: {
+              read: (options) => unref(actions$3).fetchTopArtists(options),
+              state: unref(state$3)
+            },
+            options: {
+              limit: 6,
+              top: true
+            },
             skeleton: {
               structure: [
                 { block: "circle", size: "large" },
@@ -208,13 +243,13 @@ const _sfc_main = {
               }), 128))
             ]),
             _: 1
-          }, 8, ["items", "isLoading"])
+          }, 8, ["store"])
         ])
       ]);
     };
   }
 };
-const MusicHome = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-b0e3607d"]]);
+const MusicHome = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-14a77aad"]]);
 export {
   MusicHome as default
 };

package/dist/martyrs/src/modules/music/components/pages/MusicHome.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"MusicHome.vue.js","sources":["../../../../../../../src/modules/music/components/pages/MusicHome.vue"],"sourcesContent":["<!-- components/pages/MusicHome.vue -->\n<template>\n  <div class=\"music-home-page pd-medium mobile:pd-thin\">\n    <!-- Hero Section -->\n    <section class=\"bg-gradient-dark pd-medium radius-medium mn-b-medium\">\n      <h1 class=\"t-white mn-b-small\">Welcome to Music</h1>\n      <p class=\"t-grey t-medium\">Discover new tracks, albums, and playlists</p>\n    </section>\n    \n    <!-- Featured Playlists Section -->\n    <section class=\"mn-b-medium\">\n      <div class=\"flex-between flex mn-b-small\">\n        <h2 class=\"\">Featured Playlists</h2>\n        <router-link :to=\"{ path: '/music/playlists' }\" class=\"t-main t-small hover-opacity\">See all</router-link>\n      </div>\n      \n      <Feed\n        v-model:items=\"featuredPlaylists\"\n        :isLoading=\"loadingFeatured\"\n        :showLoadMore=\"false\"\n        :skeleton=\"{\n          structure: [\n            { block: 'square', size: 'large', rounded: false },\n            { block: 'text', size: 'medium' },\n            { block: 'text', size: 'small' }\n          ],\n          horizontal: false\n        }\"\n        class=\"cols-5 mobile:cols-2 gap-small\"\n      >\n        <template #default=\"{ items }\">\n          <li v-for=\"playlist in items\" :key=\"playlist._id\">\n            <PlaylistCard :playlist=\"playlist\" class=\"hover-scale-1 transition-cubic-in-out\" />\n          </li>\n        </template>\n      </Feed>\n    </section>\n    \n    <!-- New Releases Section -->\n    <section class=\"mn-b-medium\">\n      <div class=\"flex-between flex mn-b-small\">\n        <h2 class=\"\">New Releases</h2>\n        <router-link :to=\"{ path: '/music/albums' }\" class=\"t-main t-small hover-opacity\">See all</router-link>\n      </div>\n      \n      <Feed\n        v-model:items=\"recentAlbums\"\n        :isLoading=\"loadingRecentAlbums\"\n        :showLoadMore=\"false\"\n        :skeleton=\"{\n          structure: [\n            { block: 'square', size: 'large', rounded: false },\n            { block: 'text', size: 'medium' },\n            { block: 'text', size: 'small' }\n          ],\n          horizontal: false\n        }\"\n        class=\"cols-5 mobile:cols-2 gap-small\"\n      >\n        <template #default=\"{ items }\">\n          <li v-for=\"album in items\" :key=\"album._id\">\n            <AlbumCard :album=\"album\" class=\"hover-scale-1 transition-cubic-in-out\" />\n          </li>\n        </template>\n      </Feed>\n    </section>\n    \n    <!-- Popular Tracks Section -->\n    <section class=\"mn-b-medium\">\n      <div class=\"flex-between flex mn-b-small\">\n        <h2 class=\"\">Popular Tracks</h2>\n        <router-link :to=\"{ path: '/music/tracks' }\" class=\"t-main t-small hover-opacity\">See all</router-link>\n      </div>\n      \n      <Feed\n        v-model:items=\"popularTracks\"\n        :isLoading=\"loadingPopularTracks\"\n        :showLoadMore=\"false\"\n        :skeleton=\"{\n          structure: [\n            { block: 'text', size: 'medium' },\n            { block: 'text', size: 'small' }\n          ],\n          horizontal: true\n        }\"\n      >\n        <template #default=\"{ items }\">\n          <TrackList \n            :tracks=\"items\" \n            :showAlbum=\"true\" \n            :showCover=\"true\"\n            class=\"bg-dark-transp-10 radius-medium o-hidden\"\n          />\n        </template>\n      </Feed>\n    </section>\n    \n    <!-- Top Artists Section -->\n    <section>\n      <div class=\"flex-between flex mn-b-small\">\n        <h2 class=\"\">Top Artists</h2>\n        <router-link :to=\"{ path: '/music/artists' }\" class=\"t-main t-small hover-opacity\">See all</router-link>\n      </div>\n      \n      <Feed\n        v-model:items=\"topArtists\"\n        :isLoading=\"loadingTopArtists\"\n        :showLoadMore=\"false\"\n        :skeleton=\"{\n          structure: [\n            { block: 'circle', size: 'large' },\n            { block: 'text', size: 'medium' }\n          ],\n          horizontal: false\n        }\"\n        class=\"cols-6 mobile:cols-3 gap-small\"\n      >\n        <template #default=\"{ items }\">\n          <li v-for=\"artist in items\" :key=\"artist._id\">\n            <ArtistCard :artist=\"artist\" class=\"hover-scale-1 transition-cubic-in-out\" />\n          </li>\n        </template>\n      </Feed>\n    </section>\n  </div>\n</template>\n\n<script setup>\nimport { ref, onMounted, computed } from 'vue';\nimport Feed from '@martyrs/src/components/Feed/Feed.vue';\nimport PlaylistCard from '../cards/PlaylistCard.vue';\nimport AlbumCard from '../cards/AlbumCard.vue';\nimport ArtistCard from '../cards/ArtistCard.vue';\nimport TrackList from '../lists/TrackList.vue';\n\n// Store imports\nimport { state as playlistsState, actions as playlistsActions } from '../../store/playlists.js';\nimport { state as albumsState, actions as albumsActions } from '../../store/albums.js';\nimport { state as tracksState, actions as tracksActions } from '../../store/tracks.js';\nimport { state as artistsState, actions as artistsActions } from '../../store/artists.js';\n\n// Computed properties\nconst featuredPlaylists = computed(() => playlistsState.featuredPlaylists);\nconst recentAlbums = computed(() => albumsState.albums);\nconst popularTracks = computed(() => tracksState.popular);\nconst topArtists = computed(() => artistsState.topArtists);\n\n// Loading states\nconst loadingFeatured = computed(() => playlistsState.loadingFeatured);\nconst loadingRecentAlbums = computed(() => albumsState.isLoading);\nconst loadingPopularTracks = computed(() => tracksState.loadingPopular);\nconst loadingTopArtists = computed(() => artistsState.loadingTopArtists);\n\nonMounted(async () => {\n  // Fetch featured playlists\n  playlistsActions.fetchFeaturedPlaylists(5);\n  \n  // Fetch recent albums\n  albumsActions.fetchAlbums({\n    limit: 5,\n    sortParam: 'releaseDate',\n    sortOrder: 'desc'\n  });\n  \n  // Fetch popular tracks\n  tracksActions.fetchPopularTracks(10);\n  \n  // Fetch top artists\n  artistsActions.fetchTopArtists(6);\n});\n</script>\n\n<style scoped>\n.bg-gradient-dark {\n  background: linear-gradient(to bottom, rgba(var(--dark), 0.8), rgba(var(--black), 0.9));\n}\n</style>"],"names":["playlistsState","albumsState","tracksState","artistsState","playlistsActions","albumsActions","tracksActions","artistsActions"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AA8IA,UAAM,oBAAoB,SAAS,MAAMA,MAAe,iBAAiB;AACzE,UAAM,eAAe,SAAS,MAAMC,QAAY,MAAM;AACtD,UAAM,gBAAgB,SAAS,MAAMC,QAAY,OAAO;AACxD,UAAM,aAAa,SAAS,MAAMC,QAAa,UAAU;AAGzD,UAAM,kBAAkB,SAAS,MAAMH,MAAe,eAAe;AACrE,UAAM,sBAAsB,SAAS,MAAMC,QAAY,SAAS;AAChE,UAAM,uBAAuB,SAAS,MAAMC,QAAY,cAAc;AACtE,UAAM,oBAAoB,SAAS,MAAMC,QAAa,iBAAiB;AAEvE,cAAU,YAAY;AAEpBC,cAAiB,uBAAuB,CAAC;AAGzCC,gBAAc,YAAY;AAAA,QACxB,OAAO;AAAA,QACP,WAAW;AAAA,QACX,WAAW;AAAA,MACf,CAAG;AAGDC,gBAAc,mBAAmB,EAAE;AAGnCC,gBAAe,gBAAgB,CAAC;AAAA,IAClC,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"MusicHome.vue.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}