@radiantabyss/vue-components 1.4.9 → 1.5.1

package/package.json

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

package/src/Components/Form/AutocompleteComponent.vue

@@ -61,11 +61,6 @@ export default {
             required: false,
             default: false,
         },
-        css_class: {
-            type: String,
-            required: false,
-            default: '',
-        },
         create: {
             type: Boolean,
             required: false,
@@ -164,16 +159,6 @@ export default {
         if ( this.term == '' && this.autosearch ) {
             this.search(true);
         }
-
-        for ( let css_class of this.$el.classList ) {
-            if ( ['autocomplete', 'autocomplete--inline'].includes(css_class) ) {
-                continue;
-            }
-
-            this.$refs.input.classList.add(css_class);
-        }
-
-        this.$el.className = `autocomplete ${this.css_class}`;
     },
     watch: {
         modelValue() {

package/src/Components/Form/CensoredComponent.vue

@@ -17,16 +17,6 @@ export default {
     methods: {
         mount() {
             this.value = this.modelValue;
-
-            for ( let css_class of this.$el.classList ) {
-                if ( ['censored'].includes(css_class) ) {
-                    continue;
-                }
-
-                this.$refs.input.classList.add(css_class);
-            }
-
-            this.$el.className = `censored`;
         },
 
         handleInput() {

package/src/Components/Form/ClearableAreaComponent.vue

@@ -37,17 +37,6 @@ export default {
             }, 200);
         },
     },
-    mounted() {
-        for ( let css_class of this.$el.classList ) {
-            if ( ['clearable', 'clearable--area'].includes(css_class) ) {
-                continue;
-            }
-
-            this.$refs.input.classList.add(css_class);
-        }
-
-        this.$el.className = `clearable clearable--area`;
-    },
     watch: {
         modelValue() {
             this.term = this.modelValue;

package/src/Components/Form/ClearableComponent.vue

@@ -32,17 +32,6 @@ export default {
             }, 200);
         },
     },
-    mounted() {
-        for ( let css_class of this.$el.classList ) {
-            if ( ['clearable'].includes(css_class) ) {
-                continue;
-            }
-
-            this.$refs.input.classList.add(css_class);
-        }
-
-        this.$el.className = `clearable`;
-    },
     watch: {
         modelValue() {
             this.term = this.modelValue;

package/src/Components/Form/DatepickerComponent.vue

@@ -12,6 +12,11 @@ export default {
             required: false,
             default: false,
         },
+        readonly: {
+            type: Boolean,
+            required: false,
+            default: false,
+        },
     },
     emits: ['update:modelValue'],
     data() {
@@ -205,6 +210,7 @@ export default {
     <input class="datepicker__input input"
         :class="!is_valid ? 'datepicker__input--invalid' : ''"
         :value="text"
+        :readonly="readonly"
         @keyup="parse"
         @click="show = !show"
         ref="input"

package/src/Components/Form/EditLiveComponent.vue

@@ -6,10 +6,6 @@ export default {
             type: [String, Number],
             required: false,
         },
-        css_class: {
-            type: String,
-            required: false,
-        },
     },
     emits: ['submit'],
     data() {
@@ -47,7 +43,7 @@ export default {
 </script>
 
 <template>
-<div class="edit-live" :class="css_class" v-closable="{exclude:['edit'], handler: 'hide'}" @keydown.esc="hide">
+<div class="edit-live" v-closable="{exclude:['edit'], handler: 'hide'}" @keydown.esc="hide">
     <span v-show="!is_visible" @click="show">{{ value }}</span>
     <a @click="show" v-show="!is_visible" ref="edit">
         <sprite id="edit" />

package/src/Components/Form/EditLiveDatepickerComponent.vue

@@ -6,10 +6,6 @@ export default {
             type: [String, Number],
             required: false,
         },
-        css_class: {
-            type: String,
-            required: false,
-        },
     },
     emits: ['submit'],
     data() {
@@ -44,7 +40,7 @@ export default {
 </script>
 
 <template>
-<div class="edit-live" :class="css_class" v-closable="{exclude:['edit'], handler: 'hide'}" @keydown.esc="hide">
+<div class="edit-live" v-closable="{exclude:['edit'], handler: 'hide'}" @keydown.esc="hide">
     <span v-show="!is_visible" @click="show">{{ value }}</span>
     <a @click="show" v-show="!is_visible" ref="edit">
         <sprite id="edit" class="tiny" />

package/src/Components/Form/EditLiveSelectComponent.vue

@@ -10,10 +10,6 @@ export default {
             type: [Array, Object],
             required: true,
         },
-        css_class: {
-            type: String,
-            required: false,
-        },
     },
     emits: ['submit'],
     data() {
@@ -51,7 +47,7 @@ export default {
 </script>
 
 <template>
-<div class="edit-live" :class="css_class" v-closable="{exclude:['edit'], handler: 'hide'}" @keydown.esc="hide">
+<div class="edit-live" v-closable="{exclude:['edit'], handler: 'hide'}" @keydown.esc="hide">
     <span v-show="!is_visible" @click="show">{{ Array.isArray(options) ? value : options[value] }}</span>
     <a @click="show" v-show="!is_visible" ref="edit">
         <sprite id="edit" />

package/src/Components/Form/NumberpickerComponent.vue

@@ -84,19 +84,6 @@ export default {
             this.$emit('update:modelValue', this.leading_zero ? Str.leading_zero(i) : i);
         },
     },
-    mounted() {
-        this.mount();
-
-        for ( let css_class of this.$el.classList ) {
-            if ( ['numberpicker', `numberpicker--${this.type}`].includes(css_class) ) {
-                continue;
-            }
-
-            this.$refs.input.classList.add(css_class);
-        }
-
-        this.$el.className = `numberpicker numberpicker--${this.type}`;
-    },
     watch: {
         modelValue() {
             this.mount();

package/src/Components/Form/PasswordComponent.vue

@@ -18,16 +18,6 @@ export default {
     methods: {
         mount() {
             this.value = this.modelValue;
-
-            for ( let css_class of this.$el.classList ) {
-                if ( ['password'].includes(css_class) ) {
-                    continue;
-                }
-
-                this.$el.getElementsByTagName('input')[0].classList.add(css_class);
-            }
-
-            this.$el.className = `password`;
         },
 
         handleInput() {

package/src/Components/Form/TimepickerComponent.vue

@@ -62,16 +62,6 @@ export default {
         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);
-
-        for ( let css_class of this.$el.classList ) {
-            if ( ['timepicker'].includes(css_class) ) {
-                continue;
-            }
-
-            this.$refs.input.classList.add(css_class);
-        }
-
-        this.$el.className = `timepicker`;
     }
 }
 </script>

package/src/Sass/form-components/_datepicker.scss

@@ -10,26 +10,20 @@
     }
 }
 
-.datepicker__content {
-    max-width: 230px;
-    padding: 3px;
-    background: $bg-light;
-
-    @include theme() {
-        background: $bg-light--dark;
-    }
-}
-
 .datepicker__content {
     position: absolute;
     top: 100%;
     left: 0;
     z-index: 100;
+    max-width: 230px;
+    padding: 3px;
     border: 1px solid $primary;
     border-radius: 4px;
+    background: $bg-light;
 
     @include theme() {
         border-color: $primary--dark;
+        background: $bg-light--dark;
     }
 }
 

package/src/Sass/form-components/_timepicker.scss

@@ -25,6 +25,7 @@
 
     @include theme() {
         border-color: $primary--dark;
+        background: $bg-light--dark;
     }
 
     &:after {

package/src/Sass/form-components/_windowpicker.scss

@@ -20,7 +20,7 @@ a.windowpicker__value {
 .windowpicker__popup {
     display: flex;
     position: absolute;
-    top: 32px;
+    top: 100%;
     left: 0;
     z-index: 20;
     overflow: hidden;