{"version":3,"sources":["webpack:///./src/pages/SongKeysAccordion.vue","webpack:///./src/components/song/SongByKey.vue","webpack:///./src/components/song/SongByKey.vue?9e63","webpack:///./src/pages/SongKeysAccordion.vue?a076","webpack:///./src/components/song/SongByKey.vue?9d58","webpack:///./src/pages/SongKeysAccordion.vue?4116"],"names":["class","sortedSongsByKey","value","key","index","id","type","for","song","artistPhoto","artistSongsRoute","props","artist","artistSongRoute","songId","__scopeId","name","components","SongByKey","setup","store","musicKeys","songs","allKeys","getters","getMusicKeys","getSongsByKey","render"],"mappings":"4IAESA,MAAM,kB,GACJA,MAAM,Q,sBAQFA,MAAM,e,kHAVnB,eAkBY,Q,yBAjBV,iBAgBM,CAhBN,eAgBM,MAhBN,EAgBM,CAfJ,eAcM,MAdN,EAcM,E,mBAbJ,eAYM,2BAX0B,EAAAC,kBAAgB,SAAtCC,EAAOC,EAAKC,G,wBADtB,eAYM,OAVHD,IAAKA,EACNH,MAAM,O,CAEN,eAAoE,SAA5DK,GAAE,OAAWD,EAAOE,KAAK,WAAWN,MAAM,iB,UAClD,eAAoE,SAA7DA,MAAM,YAAaO,IAAG,OAAWH,G,eAAUD,GAAM,OAAI,KAC5D,eAIM,MAJN,EAIM,CAHJ,eAEK,Y,mBADH,eAA8D,2BAAlCD,GAAK,SAAbM,G,wBAApB,eAA8D,GAA1BL,IAAKK,EAAOA,KAAMA,G,iNCM9DC,EAAc,gBAAS,WAC3B,OAAO,EAAQ,WAGXC,EAAmB,gBAAS,WAChC,8BAAwBC,EAAMH,KAAKI,WAG/BC,EAAkB,gBAAS,WAC/B,uBAAiBF,EAAMH,KAAKM,W,6kBCxB9B,EAAOC,UAAY,kBAEJ,QFqBA,GACbC,KAAM,YACNC,WAAY,CACVC,aAEFC,MALa,WAMX,IAAMC,EAAQ,iBAERC,EAAY,eAAI,IAChBC,EAAQ,eAAI,IAEZC,EAAU,gBAAS,WACvB,OAAOH,EAAMI,QAAQC,gBAGjBxB,EAAmB,gBAAS,WAChC,OAAOmB,EAAMI,QAAQE,iBAGvB,MAAO,CACLL,YACAC,QACArB,mBACAsB,a,UG7CN,EAAOI,OAASA,EAChB,EAAOZ,UAAY,kBAEJ,gB,oCCRf,W,kFCAA","file":"js/chunk-24e7d284.9278f8e8.js","sourcesContent":["<template>\r\n  <base-card>\r\n    <div class=\"keys-accordion\">\r\n      <div class=\"tabs\">\r\n        <div\r\n          v-for=\"(value, key, index) in sortedSongsByKey\"\r\n          :key=\"key\"\r\n          class=\"tab\"\r\n        >\r\n          <input :id=\"'chck' + index\" type=\"checkbox\" class=\"accordion-chk\" />\r\n          <label class=\"tab-label\" :for=\"'chck' + index\">{{ key }} maj</label>\r\n          <div class=\"tab-content\">\r\n            <ul>\r\n              <song-by-key v-for=\"song in value\" :key=\"song\" :song=\"song\" />\r\n            </ul>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </base-card>\r\n</template>\r\n\r\n<script>\r\nimport { ref, computed } from \"vue\";\r\nimport { useStore } from \"vuex\";\r\nimport SongByKey from \"./../components/song/SongByKey.vue\";\r\n\r\nexport default {\r\n  name: \"Song Keys\",\r\n  components: {\r\n    SongByKey,\r\n  },\r\n  setup() {\r\n    const store = useStore();\r\n\r\n    const musicKeys = ref([]);\r\n    const songs = ref([]);\r\n\r\n    const allKeys = computed(() => {\r\n      return store.getters.getMusicKeys;\r\n    });\r\n\r\n    const sortedSongsByKey = computed(() => {\r\n      return store.getters.getSongsByKey;\r\n    });\r\n\r\n    return {\r\n      musicKeys,\r\n      songs,\r\n      sortedSongsByKey,\r\n      allKeys,\r\n    };\r\n  },\r\n};\r\n</script>\r\n<style lang=\"scss\" scoped>\r\n.keys-accordion {\r\n  max-width: 800px;\r\n  margin: 32px auto 0 auto;\r\n\r\n  .accordion-chk {\r\n    position: absolute;\r\n    opacity: 0;\r\n    z-index: -1;\r\n  }\r\n\r\n  .tabs {\r\n    overflow: hidden;\r\n    border-radius: 8px;\r\n    box-shadow: 0 4px 4px -2px rgba(0, 0, 0, 0.5);\r\n    display: flex;\r\n    flex-direction: column;\r\n    gap: 2px;\r\n  }\r\n\r\n  .tab {\r\n    width: 100%;\r\n\r\n    &-label {\r\n      display: flex;\r\n      justify-content: space-between;\r\n      padding: 1em;\r\n      background: $dark_blue_sidebar;\r\n      font-weight: bold;\r\n      cursor: pointer;\r\n      color: #fff;\r\n      text-transform: capitalize;\r\n\r\n      // Icon\r\n      &:hover {\r\n        background: darken($burgundy, 10%);\r\n      }\r\n\r\n      &::after {\r\n        content: \"\\276F\";\r\n        width: 1em;\r\n        height: 1em;\r\n        text-align: center;\r\n        transition: all 0.35s;\r\n      }\r\n    }\r\n\r\n    &-content {\r\n      max-height: 0;\r\n      background: white;\r\n      transition: all 0.35s;\r\n\r\n      ul {\r\n        list-style: none;\r\n        display: none;\r\n      }\r\n    }\r\n\r\n    &-close {\r\n      display: flex;\r\n      justify-content: flex-end;\r\n      padding: 1em;\r\n      font-size: 0.75em;\r\n      background: $f1_gray;\r\n      cursor: pointer;\r\n\r\n      &:hover {\r\n        background: darken($burgundy, 10%);\r\n      }\r\n    }\r\n  }\r\n\r\n  input:checked {\r\n    + .tab-label {\r\n      background-color: $burgundy;\r\n\r\n      &::after {\r\n        transform: rotate(90deg);\r\n      }\r\n    }\r\n\r\n    ~ .tab-content {\r\n      max-height: 100%;\r\n      padding: 8px;\r\n\r\n      ul {\r\n        display: block;\r\n      }\r\n    }\r\n  }\r\n}\r\n</style>","<template>\r\n  <li class=\"song-item\">\r\n    <div class=\"thumbnail\">\r\n      <img :src=\"song.imgUrl || artistPhoto\" alt=\"Artist\" />\r\n    </div>\r\n    <router-link :to=\"artistSongsRoute\">\r\n      {{ song.artist }}\r\n    </router-link>\r\n    <router-link :to=\"artistSongRoute\">\r\n      {{ song.songName }}\r\n    </router-link>\r\n    <div class=\"key-info\">{{ song.songKey }}</div>\r\n  </li>\r\n</template>\r\n\r\n<script setup>\r\nimport { computed } from \"vue\";\r\nconst props = defineProps([\"song\"]);\r\n\r\nconst artistPhoto = computed(() => {\r\n  return require(\"../../assets/guitar.svg\");\r\n});\r\n\r\nconst artistSongsRoute = computed(() => {\r\n  return `/songs?artist=${props.song.artist}`;\r\n});\r\n\r\nconst artistSongRoute = computed(() => {\r\n  return `/songs/${props.song.songId}`;\r\n});\r\n</script>\r\n\r\n<style lang=\"scss\" scoped>\r\n.song-item {\r\n  display: flex;\r\n  gap: 12px;\r\n  margin-bottom: 8px;\r\n  border-bottom: 1px solid #ccc;\r\n  align-items: center;\r\n\r\n  @media (min-width: 720px) {\r\n    gap: 32px;\r\n  }\r\n\r\n  .thumbnail {\r\n    padding: 0 10px;\r\n  }\r\n\r\n  .thumbnail img {\r\n    width: 55px;\r\n    height: 55px;\r\n    border-radius: 50%;\r\n    object-fit: cover;\r\n  }\r\n\r\n  a {\r\n    text-decoration: none;\r\n    color: inherit;\r\n    font-weight: 600;\r\n\r\n    &:hover {\r\n      color: $burgundy;\r\n    }\r\n  }\r\n\r\n  a {\r\n    text-overflow: ellipsis;\r\n    overflow: hidden;\r\n    display: -webkit-box !important;\r\n    -webkit-line-clamp: 2;\r\n    -webkit-box-orient: vertical;\r\n    white-space: normal;\r\n  }\r\n\r\n  .key-info {\r\n    margin-left: auto;\r\n    font-size: 0.9rem;\r\n  }\r\n}\r\n</style>","import script from \"./SongByKey.vue?vue&type=script&setup=true&lang=js\"\nexport * from \"./SongByKey.vue?vue&type=script&setup=true&lang=js\"\n\nimport \"./SongByKey.vue?vue&type=style&index=0&id=38067d1d&lang=scss&scoped=true\"\nscript.__scopeId = \"data-v-38067d1d\"\n\nexport default script","import { render } from \"./SongKeysAccordion.vue?vue&type=template&id=0ad87af4&scoped=true\"\nimport script from \"./SongKeysAccordion.vue?vue&type=script&lang=js\"\nexport * from \"./SongKeysAccordion.vue?vue&type=script&lang=js\"\n\nimport \"./SongKeysAccordion.vue?vue&type=style&index=0&id=0ad87af4&lang=scss&scoped=true\"\nscript.render = render\nscript.__scopeId = \"data-v-0ad87af4\"\n\nexport default script","export * from \"-!../../../node_modules/mini-css-extract-plugin/dist/loader.js??ref--8-oneOf-1-0!../../../node_modules/css-loader/dist/cjs.js??ref--8-oneOf-1-1!../../../node_modules/@vue/cli-service/node_modules/vue-loader-v16/dist/stylePostLoader.js!../../../node_modules/postcss-loader/src/index.js??ref--8-oneOf-1-2!../../../node_modules/sass-loader/dist/cjs.js??ref--8-oneOf-1-3!../../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../../node_modules/@vue/cli-service/node_modules/vue-loader-v16/dist/index.js??ref--0-1!./SongByKey.vue?vue&type=style&index=0&id=38067d1d&lang=scss&scoped=true\"","export * from \"-!../../node_modules/mini-css-extract-plugin/dist/loader.js??ref--8-oneOf-1-0!../../node_modules/css-loader/dist/cjs.js??ref--8-oneOf-1-1!../../node_modules/@vue/cli-service/node_modules/vue-loader-v16/dist/stylePostLoader.js!../../node_modules/postcss-loader/src/index.js??ref--8-oneOf-1-2!../../node_modules/sass-loader/dist/cjs.js??ref--8-oneOf-1-3!../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../node_modules/@vue/cli-service/node_modules/vue-loader-v16/dist/index.js??ref--0-1!./SongKeysAccordion.vue?vue&type=style&index=0&id=0ad87af4&lang=scss&scoped=true\""],"sourceRoot":""}