@radiantabyss/vue-components 1.4.8 → 1.5.0

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@radiantabyss/vue-components",
-    "version": "1.4.8",
+    "version": "1.5.0",
     "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/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,24 +62,14 @@ 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>
 
 <template>
 <div class="timepicker" @keydown.esc="hide">
-    <input type="text" :placeholder="placeholder" autocomplete="off" readonly
-        @click="show('time')" ref="input" :value="value"
+    <input type="text" class="input" :placeholder="placeholder" autocomplete="off"
+        @click="show('time')" ref="input" :value="value" readonly
     />
 
     <div class="timepicker__time" ref="time"

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: 36px;
+    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

@@ -13,22 +13,18 @@
     justify-content: space-around;
     align-items: center;
     position: absolute;
-    top: 43px;
+    top: 100%;
     left: 0;
     z-index: 10;
     width: 130px;
     padding: 10px;
-    border-radius: 5px;
-    box-shadow: 1px 0 0 $lightgrey2, -1px 0 0 $lightgrey2,
-        0 1px 0 $lightgrey2, 0 -1px 0 $lightgrey2,
-        0 3px 13px rgba($black, 0.08);
+    border: 1px solid $primary;
+    border-radius: 4px;
     background: $bg-light;
     user-select: none;
 
     @include theme() {
-        box-shadow: 1px 0 0 $lightgrey2--dark, -1px 0 0 $lightgrey2--dark,
-            0 1px 0 $lightgrey2--dark, 0 -1px 0 $lightgrey2--dark,
-            0 3px 13px rgba($white, 0.08);
+        border-color: $primary--dark;
         background: $bg-light--dark;
     }