@radiantabyss/vue-components 1.5.1 → 1.5.3

package/package.json

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

package/src/Components/Default/BadgeComponent.vue

@@ -0,0 +1,17 @@
+<script>
+export default {
+    name: 'BadgeComponent',
+    props: {
+        type: {
+            type: String,
+            required: true,
+        }
+    },
+}
+</script>
+
+<template>
+<div class="badge" :class="`badge--${type}`" :title="__(Str.ucwords(type))">
+    <sprite :id="type" />
+</div>
+</template>

package/src/Components/Default/TComponent.vue

@@ -12,8 +12,7 @@ export default {
 
         const slot_text = slot_nodes
             .map(node => node.children)
-            .join('')
-            .trim();
+            .join('');
 
         return slot_text ? __(slot_text) : null; // Return the processed slot text
     },

package/src/Components/Form/ImageUploadComponent.vue

@@ -18,6 +18,11 @@ export default {
             required: false,
             default: () => { return __('Upload Image'); },
         },
+        allowed_extensions: {
+            type: Array,
+            required: false,
+            default() { return ['jpg', 'jpeg', 'png', 'webp', 'svg']; },
+        },
     },
     emits: ['update:modelValue'],
     data() {

package/src/Components/Form/PasswordComponent.vue

@@ -20,10 +20,6 @@ export default {
             this.value = this.modelValue;
         },
 
-        handleInput() {
-            this.$emit('update:modelValue', this.$refs.input.value);
-        },
-
         toggle() {
             this.show = !this.show;
         },
@@ -43,7 +39,7 @@ export default {
 <div class="password">
     <input :type="show ? 'text' : 'password'"
         class="input"
-        name="password"
+        ref="input"
         v-model="value"
         @input="$emit('update:modelValue', value)"
     />

package/src/Components/Form/RepeatableComponent.vue

@@ -169,7 +169,7 @@ export default {
                         :enable_modal="input.autocomplete_settings.enable_modal || false"
                         :can_create="input.autocomplete_settings.can_create || false"
                         v-model="item[input_name]"
-                        v-if="input.type == 'autocomplete'"
+                        v-else-if="input.type == 'autocomplete'"
                     />
                 </div>
 

package/src/Components/Form/TimepickerComponent.vue

@@ -15,6 +15,7 @@ export default {
     emits: ['update:modelValue'],
     data() {
         return {
+            mounted: false,
             hour: 0,
             minute: 0,
             view: 'none',
@@ -26,6 +27,20 @@ export default {
         },
     },
     methods: {
+        mount() {
+            let date = new Date();
+            let split = this.modelValue.split(':');
+            this.hour = isNaN(parseFloat(split[0])) ? date.getHours() : parseFloat(split[0]);
+            this.minute = isNaN(parseFloat(split[1])) ? date.getMinutes() : parseFloat(split[1]);
+            this.mounted = true;
+
+            if ( !this.modelValue ) {
+                this.watch = false;
+                this.$emit('update:modelValue', this.value);
+                this.watch = true;
+            }
+        },
+
         show(view) {
             this.view = view;
         },
@@ -35,9 +50,11 @@ export default {
         },
 
         select(component, i) {
+            this.watch = false;
             this[component] = i;
             this.view = 'time';
             this.$emit('update:modelValue', this.value);
+            this.watch = true;
         },
 
         changeComponent(component, direction) {
@@ -57,12 +74,17 @@ export default {
         },
     },
     mounted() {
-        let date = new Date();
-        let split = this.modelValue.split(':');
-        this.hour = isNaN(parseFloat(split[0])) ? date.getHours() : parseFloat(split[0]);
-        this.minute = isNaN(parseFloat(split[1])) ? date.getMinutes() : parseFloat(split[1]);
-        this.$emit('update:modelValue', this.value);
-    }
+        this.mount();
+    },
+    watch: {
+        modelValue() {
+            if ( !this.watch ) {
+                return;
+            }
+
+            this.mount();
+        },
+    },
 }
 </script>
 

package/src/Sass/components/_badge.scss

@@ -0,0 +1,47 @@
+.badge {
+    display: inline-flex;
+    flex: 0 0 auto;
+    justify-content: center;
+    align-items: center;
+    width: 30px;
+    height: 30px;
+    border-radius: 30px;
+    color: $white;
+
+    svg {
+        position: relative;
+        width: 20px;
+        height: 20px;
+    }
+}
+
+.badge--client {
+    background: #0983a8;
+}
+
+.badge--project {
+    background: #8004b9;
+
+    svg {
+        top: -2px;
+    }
+}
+
+.badge--invoice {
+    background: #09a81a;
+
+    svg {
+        width: 18px;
+        height: 18px;
+    }
+}
+
+.badge--small {
+    width: 24px;
+    height: 24px;
+
+    svg {
+        width: 18px;
+        height: 18px;
+    }
+}

package/src/Sass/components/_tabs.scss

@@ -29,10 +29,6 @@
         }
     }
 
-    .tabs--with-buttons & {
-        flex: 1 1 auto;
-    }
-
     @include theme() {
         border-color: $border--dark;
 
@@ -55,15 +51,14 @@
 }
 
 .tabs__content {
+    flex: 0 0 100%;
     margin-top: 20px;
 }
 
 .tabs__buttons {
     display: flex;
+    flex: 1 1 auto;
+    justify-content: flex-end;
     align-items: center;
     padding-left: 30px;
 }
-
-.tabs__content {
-    flex: 0 0 100%;
-}