@propelinc/citrus-ui 0.3.5 → 0.3.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@propelinc/citrus-ui",
-  "version": "0.3.5",
+  "version": "0.3.7",
   "repository": {
     "type": "git",
     "url": "https://github.com/propelinc/citrus-ui"

package/src/components/CCheckbox.vue

@@ -19,7 +19,7 @@
 <script lang="ts">
 import { Component, Vue, Prop } from 'vue-property-decorator';
 
-@Component({ name: 'CCheckbox' })
+@Component({ name: 'CCheckbox', inheritAttrs: false })
 export default class CCheckbox extends Vue {
   @Prop({ type: Boolean, default: false }) value!: boolean;
   @Prop({ type: Array, default: () => [] }) rules!: ((value: string) => string | boolean)[];

package/src/components/CSelect.vue

@@ -1,9 +1,9 @@
 <template>
-  <form-field :field-id="id" :disabled="disabled" :label="label">
+  <form-field :data-test="dataTest" :field-id="id" :disabled="disabled" :label="label">
     <select-input
       :id="id"
       v-bind="$attrs"
-      data-test="select-field"
+      :data-test="`${dataTest}-select`"
       class="select__field"
       :class="{ 'select__field--disabled': disabled }"
       outlined
@@ -15,18 +15,18 @@
       :items="items"
       validate-on-blur
       :hide-details="rules.length === 0"
-      @input="(value) => $emit('input', value)"
+      v-on="$listeners"
     >
       <template #append>
         <font-awesome-icon
           v-if="loading"
-          data-test="select-field-icon-loading"
+          :data-test="`${dataTest}-icon-loading`"
           class="fa-spin select__field__icon"
           :icon="faSpinner"
         />
         <font-awesome-icon
           v-else
-          data-test="select-field-icon"
+          :data-test="`${dataTest}-icon-dropdown`"
           class="select__field__icon"
           :icon="faChevronDown"
         />
@@ -43,7 +43,7 @@ import FormField from '@/components/helpers/FormField.vue';
 import SelectInput from '@/components/helpers/SelectInput.vue';
 
 // @ts-ignore
-@Component({ name: 'CSelect', components: { FormField, SelectInput } })
+@Component({ name: 'CSelect', inheritAttrs: false, components: { FormField, SelectInput } })
 export default class CSelect extends Vue {
   faChevronDown = faChevronDown;
   faSpinner = faSpinner;
@@ -54,6 +54,7 @@ export default class CSelect extends Vue {
   @Prop({ type: Array, default: () => [] }) items!: { label: string; value: string }[];
   @Prop({ type: Boolean, default: false }) disabled!: boolean;
   @Prop({ type: String, default: '' }) value!: string;
+  @Prop({ type: String, default: 'select-field' }) dataTest!: string;
   @Prop({ type: Boolean, default: false }) loading!: boolean;
   @Prop({ type: Array, default: () => [] }) rules!: ((value: string) => string | boolean)[];
 }

package/src/components/CTextArea.vue

@@ -1,9 +1,9 @@
 <template>
-  <form-field :field-id="id" :disabled="disabled" :label="label">
+  <form-field :data-test="dataTest" :field-id="id" :disabled="disabled" :label="label">
     <v-textarea
       :id="id"
       v-bind="$attrs"
-      data-test="text-area"
+      :data-test="`${dataTest}-input`"
       class="text-area__input"
       :class="{ 'text-area__input--disabled': disabled }"
       auto-grow
@@ -15,7 +15,7 @@
       :rules="rules"
       validate-on-blur
       :hide-details="rules.length === 0"
-      @input="(value) => $emit('input', value)"
+      v-on="$listeners"
     />
   </form-field>
 </template>
@@ -25,13 +25,14 @@ import { Component, Vue, Prop } from 'vue-property-decorator';
 
 import FormField from '@/components/helpers/FormField.vue';
 
-@Component({ name: 'CTextArea', components: { FormField } })
+@Component({ name: 'CTextArea', inheritAttrs: false, components: { FormField } })
 export default class CTextArea extends Vue {
   @Prop(String) label?: string;
   @Prop(String) placeholder?: string;
   @Prop({ type: String, required: true }) id!: string;
   @Prop({ type: Boolean, default: false }) disabled!: boolean;
   @Prop({ type: String, default: '' }) value!: string;
+  @Prop({ type: String, default: 'text-area' }) dataTest!: string;
   @Prop({ type: Array, default: () => [] }) rules!: ((value: string) => string | boolean)[];
 }
 </script>
@@ -40,6 +41,7 @@ export default class CTextArea extends Vue {
 @import '~@/styles/form-fields.less';
 
 .text-area__input {
+  .body();
   .form-field();
 }
 

package/src/components/CTextField.vue

@@ -1,43 +1,91 @@
 <template>
-  <form-field :field-id="id" :disabled="disabled" :label="label">
+  <form-field :data-test="dataTest" :field-id="id" :disabled="disabled" :label="label">
     <v-text-field
       :id="id"
+      ref="input"
       v-bind="$attrs"
-      data-test="text-field"
+      :data-test="`${dataTest}-input`"
       class="text-field__field"
       :class="{ 'text-field__field--disabled': disabled }"
       outlined
       single-line
       :placeholder="placeholder"
       :disabled="disabled"
-      :type="type"
+      :inputmode="inputmode"
+      :type="_type"
       :value="value"
       :rules="rules"
       validate-on-blur
       :hide-details="rules.length === 0"
-      @input="(value) => $emit('input', value)"
+      v-on="$listeners"
     >
       <template #append>
-        <slot name="append" />
+        <slot name="append">
+          <button
+            v-if="hideable"
+            type="button"
+            :data-test="`${dataTest}-hide-toggle`"
+            @click="toggleHideInput"
+          >
+            <font-awesome-icon v-if="hideInput" :icon="faEye" />
+            <font-awesome-icon v-else :icon="faEyeSlash" />
+          </button>
+        </slot>
       </template>
     </v-text-field>
   </form-field>
 </template>
 
 <script lang="ts">
+import { faEye, faEyeSlash } from '@fortawesome/pro-light-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
 import { Component, Vue, Prop } from 'vue-property-decorator';
 
 import FormField from '@/components/helpers/FormField.vue';
 
-@Component({ name: 'CTextField', components: { FormField } })
+type VTextField = Vue & { focus: () => void };
+
+@Component({ name: 'CTextField', inheritAttrs: false, components: { FormField, FontAwesomeIcon } })
 export default class CTextField extends Vue {
+  faEye = faEye;
+  faEyeSlash = faEyeSlash;
+
   @Prop(String) label?: string;
   @Prop(String) placeholder?: string;
   @Prop({ type: String, required: true }) id!: string;
   @Prop({ type: String, default: 'text' }) type!: string;
+  /** HTML property that tells browser what kind of data is being entered.
+   * Be sure to set this if you're using an hideable input, so the keyboard doesn't change as the user toggles. */
+  @Prop(String) inputmode?: string;
   @Prop({ type: Boolean, default: false }) disabled!: boolean;
+  @Prop({ type: Boolean, default: false }) hideable!: boolean;
+  @Prop({ type: Boolean, default: true }) hideByDefault!: boolean;
   @Prop({ type: String, default: '' }) value!: string;
+  @Prop({ type: String, default: 'text-field' }) dataTest!: string;
   @Prop({ type: Array, default: () => [] }) rules!: ((value: string) => string | boolean)[];
+
+  hideInput: boolean = false;
+
+  created(): void {
+    this.hideInput = this.hideByDefault;
+  }
+
+  get _type(): string {
+    return this.hideInput && this.hideable ? 'password' : this.type;
+  }
+
+  toggleHideInput(): void {
+    if (!this.hideable) {
+      return;
+    }
+
+    this.hideInput = !this.hideInput;
+    this.$emit('click:hide', this.hideInput);
+  }
+
+  focus(): void {
+    (this.$refs.input as VTextField).focus();
+  }
 }
 </script>
 

package/src/components/helpers/FormField.vue

@@ -1,9 +1,9 @@
 <template>
-  <fieldset class="form-field" :disabled="disabled">
+  <fieldset class="form-field" :data-test="dataTest" :disabled="disabled">
     <label
       v-if="label"
       :for="fieldId"
-      data-test="form-field-label"
+      :data-test="`${dataTest}-label`"
       class="form-field__label"
       :class="{ 'form-field__label--disabled': disabled }"
     >
@@ -22,6 +22,7 @@ export default class FormField extends Vue {
   @Prop(String) label?: string;
   @Prop({ type: String, required: true }) fieldId!: string;
   @Prop({ type: Boolean, default: false }) disabled!: boolean;
+  @Prop({ type: String, default: 'form-field' }) dataTest!: string;
 }
 </script>