Adds underlined inputs to vue based Input.vue component.

AgnosticUI · Oct 6, 2020 · 1cd7751 · 1cd7751
1 parent eb59965
commit 1cd7751
Show file tree

Hide file tree

Showing 3 changed files with 70 additions and 71 deletions.
diff --git a/agnosticui-css/input.css b/agnosticui-css/input.css
@@ -23,6 +23,8 @@
 .input-small,
 .input-large,
 .input-skin,
+.input-underlined,
+.input-underlined-bg,
 .input {
   /* These custom props all fallback on the agnosticui main variables so main theme is preserved */
   --agnosticui-input-error-color: var(--agnosticui-error-color, var(--agnosticui-secondary));

diff --git a/agnosticui-vue/src/stories/Input.stories.js b/agnosticui-vue/src/stories/Input.stories.js
@@ -25,17 +25,40 @@ export const Default = () => ({
 
 export const Rounded = () => ({
   components: { Input },
-  template: '<Input isRounded uniqueId="myUniqueId" v-model="name" label="Default input" />',
+  template: '<Input isRounded uniqueId="myUniqueId" v-model="name" label="Rounded input" />',
   props: ['value'],
   data() {
     return {
       name: ''
     }
   },
 })
+
+export const Underlined = () => ({
+  components: { Input },
+  template: '<Input isUnderlined uniqueId="myUniqueId" v-model="name" label="Underlined input" />',
+  props: ['value'],
+  data() {
+    return {
+      name: ''
+    }
+  },
+})
+
+export const UnderlinedWithBackground = () => ({
+  components: { Input },
+  template: '<Input isUnderlined isUnderlinedWithBackground uniqueId="myUniqueId" v-model="name" label="Underlined input" />',
+  props: ['value'],
+  data() {
+    return {
+      name: ''
+    }
+  },
+})
+
 export const Large = () => ({
   components: { Input },
-  template: '<Input size="large" uniqueId="myUniqueId" v-model="name" label="Default input" />',
+  template: '<Input size="large" uniqueId="myUniqueId" v-model="name" label="Large input" />',
   props: ['value'],
   data() {
     return {
@@ -46,7 +69,7 @@ export const Large = () => ({
 
 export const Small = () => ({
   components: { Input },
-  template: '<Input size="small" uniqueId="myUniqueId" v-model="name" label="Default input" />',
+  template: '<Input size="small" uniqueId="myUniqueId" v-model="name" label="Small input" />',
   props: ['value'],
   data() {
     return {
@@ -57,7 +80,18 @@ export const Small = () => ({
 
 export const Disabled = () => ({
   components: { Input },
-  template: '<Input disabled uniqueId="myUniqueId" v-model="name" label="Default input" />',
+  template: '<Input disabled uniqueId="myUniqueId" v-model="name" label="Disabled input" />',
+  props: ['value'],
+  data() {
+    return {
+      name: ''
+    }
+  },
+})
+
+export const Error = () => ({
+  components: { Input },
+  template: '<Input isError uniqueId="myUniqueId" v-model="name" label="Error input" />',
   props: ['value'],
   data() {
     return {

diff --git a/agnosticui-vue/src/stories/Input.vue b/agnosticui-vue/src/stories/Input.vue
@@ -58,6 +58,14 @@ export default {
       type: Boolean,
       default: false,
     },
+    isUnderlinedWithBackground: {
+      type: Boolean,
+      default: false,
+    },
+    isUnderlined: {
+      type: Boolean,
+      default: false,
+    },
     size: {
       type: String,
       default: "",
@@ -80,14 +88,15 @@ export default {
   },
   computed: {
     inputClasses() {
-      console.log("THIS $style: ", this.$style);
       const sizeKlass = `input-${this.size}`;
-      console.log("sizeKlass: ", sizeKlass);
-      console.log("this.$style[input-large]: ", this.$style[sizeKlass]);
-      console.log("this.$style[input-large]: ", this.$style["input-large"]);
+      // console.log("sizeKlass: ", sizeKlass);
+      // console.log("this.$style[input-large]: ", this.$style[sizeKlass]);
+      // console.log("this.$style[input-large]: ", this.$style["input-large"]);
       return {
         [this.$style["input"]]: true,
         [this.$style["input-rounded"]]: this.isRounded,
+        [this.$style["input-underlined"]]: this.isUnderlined,
+        [this.$style["input-underlined-bg"]]: this.isUnderlinedWithBackground,
         [`${this.inputCss}`]: !!this.inputCss,
         [this.$style[`input-${this.size}`]]: this.size,
       };
@@ -111,8 +120,7 @@ export default {
   caret-color: currentColor;
 }
 
-.label,
-.label-base {
+.label, .label-base {
   padding: 0;
   border: 0;
   box-sizing: border-box;
@@ -128,76 +136,31 @@ export default {
 .input-small,
 .input-large,
 .input-skin,
+.input-underlined,
+.input-underlined-bg,
 .input {
   /* These custom props all fallback on the agnosticui main variables so main theme is preserved */
-  --agnosticui-input-error-color: var(
-    --agnosticui-error-color,
-    var(--agnosticui-secondary)
-  );
-  --agnosticui-input-font-color: var(
-    --agnosticui-font-color,
-    var(--agnosticui-dark)
-  );
+  --agnosticui-input-error-color: var(--agnosticui-error-color, var(--agnosticui-secondary));
+  --agnosticui-input-font-color: var(--agnosticui-font-color, var(--agnosticui-dark));
   --agnosticui-input-font-weight: var(--agnosticui-font-weight, 300);
   --agnosticui-input-font-size: var(--agnosticui-font-size, var(--Space-16));
-  --agnosticui-input-label-font-size: calc(
-    var(--agnosticui-input-font-size) - 2px
-  );
+  --agnosticui-input-label-font-size: calc(var(--agnosticui-input-font-size) - 2px);
   --agnosticui-input-border-size: var(--agnosticui-border-size, 1px);
-  --agnosticui-input-border-color: var(
-    --agnosticui-border-color,
-    var(--agnosticui-gray-light)
-  );
+  --agnosticui-input-border-color: var(--agnosticui-border-color, var(--agnosticui-gray-light));
   --agnosticui-input-radius: var(--agnosticui-border-radius, var(--Space-4));
-  --agnosticui-input-underlined-color: var(
-    --agnosticui-underlined-color,
-    var(--agnosticui-gray-mid-dark)
-  );
-  --agnosticui-input-underlined-bg-color: var(
-    --agnosticui-underlined-bg-color,
-    var(--agnosticui-gray-extra-light)
-  );
+  --agnosticui-input-underlined-color: var(--agnosticui-underlined-color, var(--agnosticui-gray-mid-dark));
+  --agnosticui-input-underlined-bg-color: var(--agnosticui-underlined-bg-color, var(--agnosticui-gray-extra-light));
 
   /* TODO -- share these with agnosticui buttons */
-  --agnosticui-input-disabled-bg: var(
-    --agnosticui-disabled-bg,
-    var(--agnosticui-gray-light)
-  );
-  --agnosticui-input-disabled-color: var(
-    --agnostic-disabled-color,
-    var(--agnosticui-gray-dark)
-  );
+  --agnosticui-input-disabled-bg: var(--agnosticui-disabled-bg, var(--agnosticui-gray-light));
+  --agnosticui-input-disabled-color: var(--agnostic-disabled-color, var(--agnosticui-gray-dark));
 
   /* these can be overriden, but it might mess with the balance of the inputheights across variants */
-  --agnosticui-input-vertical-pad: var(
-    --agnosticui-vertical-pad,
-    var(--Space-8)
-  );
+  --agnosticui-input-vertical-pad: var(--agnosticui-vertical-pad, var(--Space-8));
   --agnosticui-input-line-height: var(--agnosticui-line-height, 20px);
-  --agnosticui-input-side-padding: var(
-    --agnosticui-side-padding,
-    var(--Space-12)
-  );
-  --agnosticui-input-font-family: var(
-    --agnosticui-font-family,
-    -apple-system,
-    BlinkMacSystemFont,
-    "Segoe UI",
-    "Open Sans",
-    "Ubuntu",
-    "Fira Sans",
-    Helvetica,
-    "Droid Sans",
-    "Helvetica Neue",
-    sans-serif,
-    "Apple Color Emoji",
-    "Segoe UI Emoji",
-    "Segoe UI Symbol"
-  );
-  --agnosticui-input-btn-radius: var(
-    --agnosticui-border-radius,
-    var(--Space-4)
-  );
+  --agnosticui-input-side-padding: var(--agnosticui-side-padding, var(--Space-12));
+  --agnosticui-input-font-family: var(--agnosticui-font-family, -apple-system, BlinkMacSystemFont, "Segoe UI", "Open Sans", "Ubuntu", "Fira Sans", Helvetica, "Droid Sans", "Helvetica Neue", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol");
+  --agnosticui-input-btn-radius: var(--agnosticui-border-radius, var(--Space-4));
   color: var(--agnosticui-input-font-color);
   font-family: var(--agnosticui-input-font-family);
   font-weight: var(--agnosticui-input-font-weight);
@@ -209,8 +172,7 @@ export default {
 
 .input-skin,
 .input {
-  border-color: var(
-    --agnosticui-input-border-size,
+  border-color: var(--agnosticui-input-border-size,
     var(--agnosticui-default-btn-bgcolor)
   );
   /* seems like a reasonable default as chrome picks `outset` which results in a weird 3d effect */
@@ -397,4 +359,5 @@ borders that visually conflict. */
   opacity: 0.8 !important;
   cursor: not-allowed;
 }
+
 </style>