@radiantabyss/vue-components 1.4.6 → 1.4.8

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@radiantabyss/vue-components",
-    "version": "1.4.6",
+    "version": "1.4.8",
     "author": "radiantabyss.com",
     "license": "ISC",
     "eslintConfig": {

package/src/Components/Default/PaginationComponent.vue

@@ -114,6 +114,14 @@ export default {
             let url = this.computed_url.replace(/\?$/) + '?' + new URLSearchParams(params).toString();
             this.$router.push(`${url}`)
         },
+
+        getFullUrlWithPage(page) {
+            if ( this.full_url.match(/\?$/) ) {
+                return `${this.full_url}${this.page_param}=${page}`;
+            }
+
+            return `${this.full_url}&${this.page_param}=${page}`;
+        },
     },
     mounted() {
         if ( !localStorage.getItem(`${this.computed_url}__per_page`) ) {
@@ -138,11 +146,11 @@ export default {
     </div>
     <div v-else></div>
     <div class="flex items-center" v-if="pages > 1">
-        <router-link :to="`${full_url}&${page_param}=1`" class="page page--arrow" v-if="show_controls">
+        <router-link :to="getFullUrlWithPage(1)" class="page page--arrow" v-if="show_controls">
             <sprite id="control-start" />
         </router-link>
 
-        <router-link :to="`${full_url}&${page_param}=${page - 1}`" class="page page--arrow" v-if="page > 1">
+        <router-link :to="getFullUrlWithPage(page - 1)" class="page page--arrow" v-if="page > 1">
             <sprite id="arrow-left" />
         </router-link>
         <div class="page page--arrow page--disabled" v-else><sprite id="arrow-left" /></div>
@@ -150,16 +158,16 @@ export default {
         <div class="pages">
             <template v-for="i in visible_pages">
                 <div class="page page--current" :key="`${i}_current`" v-if="i == page">{{ i }}</div>
-                <router-link :to="`${full_url}&${page_param}=${i}`" class="page" :key="i" v-else>{{ i }}</router-link>
+                <router-link :to="getFullUrlWithPage(i)" class="page" :key="i" v-else>{{ i }}</router-link>
             </template>
         </div>
 
-        <router-link :to="`${full_url}&${page_param}=${page + 1}`" class="page page--arrow" v-if="page < pages">
+        <router-link :to="getFullUrlWithPage(page + 1)" class="page page--arrow" v-if="page < pages">
             <sprite id="arrow-right" />
         </router-link>
         <div class="page page--arrow page--disabled" v-else><sprite id="arrow-right" /></div>
 
-        <router-link :to="`${full_url}&${page_param}=${pages}`" class="page page--arrow" v-if="show_controls">
+        <router-link :to="getFullUrlWithPage(pages)" class="page page--arrow" v-if="show_controls">
             <sprite id="control-end" />
         </router-link>
     </div>

package/src/Components/Default/YesNoComponent.vue

@@ -6,15 +6,15 @@ export default {
             type: [Boolean, Number, String],
             required: true,
         },
-        yes_green: {
+        green: {
             type: Boolean,
             required: false,
             default: false,
         },
-        no_red: {
+        red: {
             type: Boolean,
             required: false,
-            default: true,
+            default: false,
         },
     },
     computed: {
@@ -35,11 +35,11 @@ export default {
         },
 
         css_class() {
-            if ( this.yes && this.yes_green ) {
+            if ( this.yes && this.green ) {
                 return 'color-green';
             }
 
-            if ( !this.yes && this.no_red ) {
+            if ( !this.yes && this.red ) {
                 return 'color-red';
             }
 

package/src/Components/Form/AutocompleteComponent.vue

@@ -76,6 +76,11 @@ export default {
             required: false,
             default: '',
         },
+        autoselect: {
+            type: Boolean,
+            required: false,
+            default: false,
+        },
     },
     emits: ['update:modelValue', 'select'],
     data() {
@@ -111,6 +116,10 @@ export default {
             let data = await Request.get(this.url ? this.url : `/${this.domain}/search`, params);
             this.results = data.items;
             this.results_visible = is_autosearch ? false : true;
+
+            if  ( this.autoselect && this.results.length == 1 ) {
+                this.select(this.results[0]);
+            }
         },
 
         select(result) {

package/src/Components/Form/FileComponent.vue

@@ -3,7 +3,7 @@ export default {
     name: 'FileComponent',
     props: {
         modelValue: {
-            type: [String, Number],
+            type: [String, Number, File],
             required: false,
         },
         accept: {

package/src/Components/Form/ImageUploadComponent.vue

@@ -23,7 +23,6 @@ export default {
     data() {
         return {
             dz: null,
-            inited: false,
             loading: false,
         }
     },
@@ -37,12 +36,6 @@ export default {
         },
     },
     mounted() {
-        if ( this.inited || !this.$refs.dropzone ) {
-            return;
-        }
-
-        this.inited = true;
-
         this.dz = new Dropzone(this.$refs.dropzone, {
             url: `${BACK_URL}${this.path}?jwt_token=${localStorage.getItem('jwt_token')}`,
             thumbnailWidth: 150,
@@ -71,7 +64,10 @@ export default {
                 Alert.show(response, 'error');
             }
         });
-    }
+    },
+    unmounted() {
+        this.dz.destroy();
+    },
 }
 </script>