tweaks

package.json

@@ -1,6 +1,6 @@
 {
   "name": "vuelize",
-  "version": "0.0.67",
+  "version": "0.0.68",
   "private": false,
   "description": "A Vue component Library, with the most common Material UI styled components",
   "author": "Daniel Terletzkiy",

src/components/flex/Column.vue

@@ -1,5 +1,5 @@
 <template>
-  <d-function-wrapper :classes="['d-column', ...classesObject]" v-bind="{...$props, ...$attrs}" @click="$emit('click')">
+  <d-function-wrapper :classes="['d-column', ...classesObject]" v-bind="{...$props, ...$attrs}" :style="stylesObject" @click="$emit('click')">
     <slot>
 
     </slot>
@@ -15,17 +15,26 @@ export default {
     wrap: Boolean,
     column: Boolean,
     block: Boolean,
-    noGap: {type: Boolean, default: true},
+    gap: Boolean,
+
+    height: String,
+    width: String,
   },
 
   computed: {
+    stylesObject() {
+      return {
+        height: this.height,
+        width: this.width,
+      }
+    },
     classesObject() {
       return {
         flex: this.flex,
         wrap: this.wrap,
         column: this.column,
         block: this.block,
-        'no-gap': this.noGap,
+        'no-gap': !this.gap,
       }
     },
   },

src/components/flex/Row.vue

@@ -13,16 +13,25 @@ export default {
   props: {
     wrap: Boolean,
     column: Boolean,
-    noGap: {type: Boolean, default: true},
+    gap: Boolean,
+
+    height: String,
+    width: String,
   },
 
   computed: {
+    stylesObject() {
+      return {
+        height: this.height,
+        width: this.width,
+      }
+    },
     classesObject() {
       return {
         flex: true,
         wrap: this.wrap,
         column: this.column,
-        'no-gap': this.noGap,
+        'no-gap': !this.gap,
       }
     },
   },

src/components/menu/SelectMenu.vue

@@ -2,7 +2,7 @@
   <d-function-wrapper :classes="['d-select-menu', 'bottom']" v-bind="{...$props, ...$attrs}">
     <transition name="slide-fade">
       <d-card v-if="open" class="d-select-menu__dropdown pa-0" elevation="4" v-click-outside="hideSelectMenu">
-        <d-list v-model="value" color="primary" class="pa-0" rounded="none">
+        <d-list :value="value" @input="onInput" color="primary" class="pa-0" rounded="none">
           <d-list-item v-for="(item, index) in items" :key="index">
             <slot name="item" :item="item" :index="index">
               {{ item }}
@@ -28,14 +28,11 @@ export default {
   methods: {
     hideSelectMenu() {
       this.$emit('update:open', false)
+    },
+    onInput(e){
+      this.$emit('input', e)
     }
   },
-
-  watch: {
-    value(value) {
-      this.$emit('input', value)
-    }
-  }
 }
 </script>
 

src/components/notification/Notification.vue

@@ -16,9 +16,9 @@
             </d-card-subtitle>
           </d-column>
           <d-spacer/>
-          <transition name="slide-fade">
+          <transition name="fade-x">
             <d-column v-if="hover" class="d-notification__hide">
-              <d-icon-button size="40" :color="getContrast(options.color)" @click="hide">
+              <d-icon-button size="40" outlined depressed rounded="none" :color="getContrast(options.color)" @click="hide">
                 <d-icon name="multiply"></d-icon>
               </d-icon-button>
             </d-column>
@@ -44,10 +44,10 @@ export default {
   }),
 
   watch: {
-    hover(state){
-      if(state){
+    hover(state) {
+      if (state) {
         this.clearTimeout()
-      }else {
+      } else {
         this.setTimeout()
       }
     }
@@ -57,7 +57,7 @@ export default {
     hide() {
       this.notification.active = false
     },
-    setTimeout(){
+    setTimeout() {
       this.timeout = setTimeout(() => {
         this.hide()
       }, 3000)
@@ -111,10 +111,19 @@ export default {
 
 <style scoped lang="scss">
 .d-notification {
-  min-width: 270px;
+  min-width: auto;
   position: relative;
+  overflow: hidden;
 
   &__hide {
+    position: absolute;
+    right: 0;
+    padding: 0;
+
+    button {
+      min-height: 100% !important;
+      backdrop-filter: blur(1px);
+    }
   }
 }
 </style>

src/components/textfield/Select.vue

@@ -18,7 +18,7 @@ export default {
   name: "d-select",
 
   props: {
-    value: Number,
+    value: [Number, String],
     items: Array,
   },
 

src/components/textfield/Textfield.vue

@@ -3,7 +3,6 @@
                       :style="textFieldStylesObject"
                       @mouseenter="()=> this.hover = true" @mouseleave="()=> this.hover = false">
     <component :is="componentType" v-bind="{...$props, ...$attrs}" :id="label" class="d-text-field__input"
-               autocomplete="off"
                :placeholder="placeholderActive ? placeholder : ' '"
                :value="value" @input="onInput"
                @removeFocus="removeFocus"
@@ -24,6 +23,8 @@ export default {
     label: String,
     placeholder: String,
     select: Boolean,
+    width: String,
+    fullWidth: Boolean
   },
 
   data: () => ({
@@ -47,6 +48,9 @@ export default {
       return {
         color: (this.hover || this.selected) ? this.processColor(this.color) : null,
         caretColor: (this.hover || this.selected) ? this.processColor(this.color) : null,
+        width: this.width,
+        'min-width': this.fullWidth ? '100%' : 'unset',
+        flex: this.fullWidth ? 1 : 'unset'
       }
     },
 
@@ -81,7 +85,7 @@ export default {
 
 .d-text-field {
   position: relative;
-  width: 264px;
+  width: 250px;
   height: 3rem;
   background: inherit;
   caret-color: currentColor;
@@ -153,10 +157,10 @@ export default {
 
 .d-text-field__input:focus ~ .d-text-field__label, .d-text-field--placeholder .d-text-field__input ~ .d-text-field__label,
 .d-text-field__input:not(:placeholder-shown).d-text-field__input:not(:focus) ~ .d-text-field__label {
-  font-size: 1rem;
+  font-size: 0.8rem;
   padding: 0 0.3rem;
-  top: -0.685rem;
-  left: 0.5rem;
+  top: -0.485rem;
+  left: 0.4rem;
 }
 
 </style>

src/components/tooltip/Tooltip.vue

@@ -5,7 +5,7 @@
       </slot>
     </div>
     <transition name="slide-fade">
-      <div class="d-tooltip__wrapper" v-if="value">
+      <div class="d-tooltip__wrapper" v-if="hovering">
         <div class="d-tooltip__wrapper__content elevation rounded-pill" :style="stylesObject" ref="tooltip">
           <slot name="tooltip" v-bind="{...$props, ...$attrs}">
           </slot>
@@ -31,16 +31,25 @@ export default {
   },
 
   data: () => ({
+    hovering: false,
     offset: {
       top: 'initial',
       right: 'initial',
       bottom: 'initial',
       left: 'initial',
     }
   }),
+
+  watch: {
+    value(state){
+      this.hovering = state
+    }
+  },
+
   methods: {
     onHover: async function (state) {
-      this.value = state;
+      this.hovering = state
+      this.$emit('input',state)
       this.$forceUpdate()
 
       await this.$refs.tooltip;
@@ -75,6 +84,10 @@ export default {
       return this.offset
     }
   },
+
+  mounted() {
+    this.hovering = this.value
+  }
 }
 </script>
 

src/styles/directives/lines.scss

@@ -1,19 +1,19 @@
 .outlined {
   box-shadow: 0 0 0 1.4px currentColor;
   &.depressed.theme--dark {
-    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.12);
+    box-shadow: 0 0 0 1.4px rgba(255, 255, 255, 0.12);
   }
   &.depressed.theme--light {
-    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.12);
+    box-shadow: 0 0 0 1.4px rgba(0, 0, 0, 0.12);
   }
 }
 
 .inlined {
   box-shadow: inset 0 0 0 1.4px currentColor;
   &.depressed.theme--dark {
-    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
+    box-shadow: inset 0 0 0 1.4px rgba(255, 255, 255, 0.12);
   }
   &.depressed.theme--light {
-    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12);
+    box-shadow: inset 0 0 0 1.4px rgba(0, 0, 0, 0.12);
   }
 }