xns-audio-player-simple - npm Package Compare versions

Comparing version 3.0.2 to 3.1.0

package.json

 {
   "private": false,
   "name": "xns-audio-player-simple",
-  "version": "3.0.2",
+  "version": "3.1.0",
   "description": "a simple yet powerful music player for vuejs based on xns-audio-player",
@@ -47,4 +47,3 @@ "main": "./dist/index.js",
   "dependencies": {
-    "vue": "^3.2.31",
-    "vue-ionicons": "^3.0.5"
+    "vue": "^3.2.31"
   },
@@ -51,0 +50,0 @@ "eslintConfig": {

README.md

 # xns-audio-player-simple
-A simple yet powerful music player for vuejs based on [xns-audio-player](https://github.com/xinnks/xns-audio-player "xns-audio-player") 
+A simple yet powerful music player for VueJs inspired by [xns-audio-player](https://github.com/xinnks/xns-audio-player "xns-audio-player") 
 
-## [Demo](https://jamesinkala.me/awesomeness "xns-audio-player-simple demo")
+## [Demo](https://xaps.jamesinkala.com "xns-audio-player-simple demo")
 
@@ -10,4 +10,10 @@ ![xns-audio-player-simple](https://res.cloudinary.com/djx5h4cjt/image/upload/v1581286605/xns-audio-player-simple/xns-audio-player-simple-2.0.0.gif "xns-audio-player-simple")
 
-### install
+## Vue 2 Support
+- Docs - [README](https://github.com/xinnks/xns-audio-player-simple/tree/87b89c3ad99e974d727f5639ad505a146e047c1d#readme)
+- Last npm version - [xns-audio-player-simple@2.1.0](https://www.npmjs.com/package/xns-audio-player-simple/v/2.1.0)
 
+## Vue 3 Support
+
+**install**
+
 ```sh
@@ -18,21 +24,62 @@ $ npm i xns-audio-player-simple
 
-### Import & initiate plugin on your entry js file
+**Import & initiate plugin on your entry js file**
 
 ```sh
-import XnsAudioPlayerSimple from 'xns-audio-player-simple'
+import { createApp } from "vue";
+import XnsAudioPlayerSimple from "xns-audio-player-simple";
+import App from "./App.vue";
 
-Vue.use(XnsAudioPlayerSimple)
+const app = createApp(App);
+app.use(XnsAudioPlayerSimple);
+app.mount("#app");
 ```
 
-### Example
+**Import plugin inside a Vue SFC**
 
 ```sh
-<xns-audio-player-simple :playlist="songs"></xns-audio-player-simple>
+<script>
+import XnsAudioPlayerSimple from "xns-audio-player-simple";
+
+export default {
+  components: [XnsAudioPlayerSimple],
+  data(){
+    return {
+      playlist: [...]
+    }
+  }
+}
+</script>
 ```
 
+**Import plugin inside a Vue SFC with the script setup sugar**
+
 ```sh
+<script setup>
+import XnsAudioPlayerSimple from 'xns-audio-player-simple';
+import { ref } from "vue";  
+const playlist = ref([...]);
+</script>
+```
+
+**On the template**
+
+```sh
+<xns-audio-player-simple :playlist="playlist"></xns-audio-player-simple>
+```
+
+**Supported song Object properties**
+| Property | Type | Required |
+| ------ | ---- | -------- |
+| audio | String | true |
+| artist | String | true |
+| tittle | String | true |
+| album | String | true |
+| cover | String | true |
+
+**Example**
+```sh
 export default {
   data () {
     return {
-      songs: [
+      playlist: [
         { audio: 'audio.mp3', artist: 'Superstar', tittle: 'Funky Disco House', album: 'Alpha Zulu', cover: 'cover-art.jpg' }, ...
@@ -39,0 +86,0 @@ ]

No alert changes

Improved metrics

Dependency count

1

decreased by-50%

Number of lines in readme file

154

increased by43.93%

Worsened metrics

Total package byte prevSize

527752

decreased by-8.3%

Lines of code

12783

decreased by-8.4%

Dependency changes

• + Added@babel/parser@7.24.7(transitive)

• + Added@jridgewell/sourcemap-codec@1.4.15(transitive)

• + Added@vue/compiler-core@3.4.29(transitive)

• + Added@vue/compiler-dom@3.4.29(transitive)

• + Added@vue/compiler-sfc@3.4.29(transitive)

• + Added@vue/compiler-ssr@3.4.29(transitive)

• + Added@vue/reactivity@3.4.29(transitive)

• + Added@vue/runtime-core@3.4.29(transitive)

• + Added@vue/runtime-dom@3.4.29(transitive)

• + Added@vue/server-renderer@3.4.29(transitive)

• + Added@vue/shared@3.4.29(transitive)

• + Addedcsstype@3.1.3(transitive)

• + Addedentities@4.5.0(transitive)

• + Addedestree-walker@2.0.2(transitive)

• + Addedmagic-string@0.30.10(transitive)

• + Addednanoid@3.3.7(transitive)

• + Addedpicocolors@1.0.1(transitive)

• + Addedpostcss@8.4.38(transitive)

• + Addedsource-map-js@1.2.0(transitive)

• + Addedvue@3.4.29(transitive)

• - Removedvue-ionicons@^3.0.5

• - Removedvue-ionicons@3.0.5(transitive)